/* Callout Styling */

.callout-column{width:200px;}

.callout{width:200px;height:140px;margin-bottom: 10px;}

.callout img{width:200px;height:120px;}

.callout a {display:block;overflow:hidden}

.callout .learn-more{
    background: url("../images/system/arrow-dark.gif") no-repeat scroll 185px 6px #C4C4C2;
    text-transform: uppercase;
    padding: 5px 20px 0 0;
    text-align:right;
    height:15px;
    width:180px;
    font-size:9px;
}

.callout a{color: #0500A3; text-decoration: none;}

/* Responsive Framework for modern browsers and mobile designs */
@media only screen and (min-width: 980px) {
  /* Full Site Width and tablets in landscape view */
}

@media only screen and (min-width: 960px) and (max-width:979px){
  /* Full Site Shadow Removed */
}

@media only screen and (min-width: 768px) and (max-width:959px){
  /* iPad in Potrait view ( other 10in tablets, and 7in tablets in landscape view) */
}

@media only screen and (min-width: 600px) and (max-width:767px){
  /* 7in tablets in partrait view ( and large screen phones in landscape view) */
}

@media only screen and (min-width: 480px) and (max-width:599px){
  /* iPhone, iPod touch in portrait view ( and other small screen phone) */
  .callout-column{width:460px; padding:0 10px 0 10px;}
}

@media only screen and (min-width: 320px) and (max-width:479px){
  /* iPhone, iPod touch in portrait view ( and other small screen phone) */
  .callout-column{width:300px; padding:0 10px 0 10px;}
}

@media only screen and (max-width:319px){
  /* Extra Small Screens */
}

@media only screen and (max-width:767px){
  /* Target Mobile View */
  .callout{
      background-color:#002878;
      color: white;
      background-image: url('../images/system/mobile-callout-gradient.png');
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      font-family:ff-meta-web-pro, 'Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode', verdana, sans-serif;
      padding: 15px 20px 15px 20px;
      width:auto;
      height:auto;
  }
  .callout .callout-text {
      font-weight: 700;
      font-size: 24px;
      line-height: 24px;
      clear:both;
      text-transform:capitalize;
  }
  
  .callout a {color:#FFFFFF;}
  
  .callout .learn-more {
      font-weight: 400;
      font-size: 12px;
      line-height: 14px;
      background: none;
      text-align:left;
  }
  .callout .learn-more:after {content:" \00BB"; }
}

@media only screen and (min-width: 768px){
  /* Target Desktop View */
}