#afscmetv { position: relative; }  
    
#hero { position: relative; }
 
.slide { 
  background: rgba(0,72,129,.9);  
  height: 500px; 
  overflow: hidden;
  position: relative; 
  -webkit-transition: all .5s ease-in-out;
  -moz-transition:    all .5s ease-in-out;
  -o-transition:      all .5s ease-in-out;
  -ms-transition:     all .5s ease-in-out;
  transition:         all .5s ease-in-out; }        

#hero .player {
   width: 840px;
   position: absolute;
   top: 0;
   right: 0;
  -webkit-transition: all .5s ease-in-out;
  -moz-transition:    all .5s ease-in-out;
  -o-transition:      all .5s ease-in-out;
  -ms-transition:     all .5s ease-in-out;
  transition:         all .5s ease-in-out; }        
 
#hero iframe {
   width: 100%;
   height: 500px;
  -webkit-transition: all .5s ease-in-out;
  -moz-transition:    all .5s ease-in-out;
  -o-transition:      all .5s ease-in-out;
  -ms-transition:     all .5s ease-in-out;
  transition:         all .5s ease-in-out; }     

/* --- Hero Text Styling --- */

.description {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 500px;
  padding: 30px;
  font-family: "Arimo",helvetica,arial,serif;
  font-size: 16px;
  font-weight: 400;
  color: #fff; }
  
.description a { 
  cursor: pointer;
  color: #fff; }  
    
.description time {
  font-size: 10px;
  color: #cacaca;
  text-transform: uppercase; } 
    
.description h2 {
  font-size: 22px;
  line-height: 1;
  margin: 0 0 5px 0; 
  color: white;
  -webkit-transition: all .25s ease-in-out;
  -moz-transition:    all .25s ease-in-out;
  -o-transition:      all .25s ease-in-out;
  -ms-transition:     all .25s ease-in-out;
  transition:         all .25s ease-in-out; }
.description a:hover h2  { color: #fdba31; }
    
.description p {
  font-size: 14px;
  line-height: 1.2; 
  -webkit-transition: all .25s ease-in-out;
  -moz-transition:    all .25s ease-in-out;
  -o-transition:      all .25s ease-in-out;
  -ms-transition:     all .25s ease-in-out;
  transition:         all .25s ease-in-out; } 

@media (max-width : 1370px) { 
  .slide { height: 400px !important; } 
  #hero .player { width: 670px !important; }
  #hero iframe { height: 400px !important; }    
  .description { width: 230px !important; }
  .description h2 { font-size: 17px !important; }
  .description p { font-size: 13px !important; }   
}

.sharing {
    margin-top: 10px;
    z-index: 99999;
    text-align: center;
    display: block;
    margin-top: 15px;
    padding-top: 20px;
    border-top: 1px solid #3370a1; }
    
.sharing h3 {
    font-size: 13px;
    text-transform: uppercase;
    color: #b0b0b0; 
    margin: 20px 0 10px 0; }
    
.sharing a {
    display: inline-block;
    width: 36px !important;
    height: 36px;
    color: #fff;
    line-height: 4px;
    float: none !important;
    -moz-border-radius:    18px;
    -webkit-border-radius: 18px;
    border-radius:         18px;    
    margin-right: 5px;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition:    all .3s ease-in-out;
    -o-transition:      all .3s ease-in-out;
    -ms-transition:     all .3s ease-in-out;
    transition:         all .3s ease-in-out; }  
.sharing a:hover { background: #fff; }

.sharing a span {
    text-indent: -99999px;
    background: transparent !important; }  
    
.sharing .addthis_button_facebook { background: #728dd0; }
.sharing .addthis_button_facebook:hover { color: #728dd0; }

.sharing .addthis_button_twitter { background: #00acee; }
.sharing .addthis_button_twitter:hover  { color: #00acee; }

.sharing .addthis_button_compact { background: #f36e51;  } 
.sharing .addthis_button_compact:hover  { color: #f36e51; }

#at15s,
.at300bs,
.at300b,
.at300m { display: none; }

/* --- Hero Controls --- */

#hero ul { 
    list-style: none; 
    display: inline;
    position: absolute;
    left: 13%;
    bottom: 20px; 
    z-index: 100; 
    margin: 0; }
      
.ie #hero ul { left: 50%; }
      
#hero li {
   width: 10px;
   height: 10px;
   display: inline-block; }
   
   #hero li a { 
      width: 10px;
      height: 10px;
      background: #fff; 
      text-indent: -99999px;
      display: block;
      -moz-border-radius:    10px;
      -webkit-border-radius: 10px;
      border-radius:         10px;
      -webkit-transition: all .3s ease-in-out;
      -moz-transition:    all .3s ease-in-out;
      -o-transition:      all .3s ease-in-out;
      -ms-transition:     all .3s ease-in-out;
      transition:         all .3s ease-in-out; }
    
   #hero li:hover a { background: #fdba31; }
         
   #hero li:active a { 
      opacity: 1;
      background: #fba900; 
      -moz-box-shadow:    inset 2px 2px 2px rgba(0,0,0,.25);
      -webkit-box-shadow: inset 2px 2px 2px rgba(0,0,0,.25);
      box-shadow:         inset 2px 2px 2px rgba(0,0,0,.25); }
         
   #hero li.ui-tabs-active a { 
      background: #fdba31; 
      opacity: 1; }
   #hero li.ui-tabs-active:hover a { 
     background: #fdba31;
     cursor: auto; }
   
   
/* ------------------ ARCHIVES ------------------ */

#archive { 
  padding: 20px;
  display: block; }    
    
#archive h3 { 
  text-transform: capitalize;
  font-size: 28px; }
#archive h3 a { color: #003158; }
#archive h3 a:hover { color: #fdba31; }   

.category {
    height: 270px;
    margin: 0 0 15px 0;
    list-style: none; }
.category .car {
   display: block;
   float: left; }
     
.category li {
    margin: 0 5px 0 5px;
    float: left; }

.category a {
   background-repeat: no-repeat;
   background-position: center center;
   -webkit-background-size: cover;
   -moz-background-size:    cover;
   -o-background-size:      cover;  
   background-size:         cover;
   width: 240px;  
   height: 135px;
   margin-bottom: 10px;
   display: block;   
   position: relative; 
   -moz-box-shadow:    inset 0 0 0 1px #cdcdcd;
   -webkit-box-shadow: inset 0 0 0 1px #cdcdcd;
   box-shadow:         inset 0 0 0 1px #cdcdcd;
   -webkit-transition: all .3s ease-in-out;
   -moz-transition:    all .3s ease-in-out;
   -o-transition:      all .3s ease-in-out;
   -ms-transition:     all .3s ease-in-out;
   transition:         all .3s ease-in-out; }
.category a:hover {
   -moz-box-shadow:    inset 0 0 0 5px #fdba31;
   -webkit-box-shadow: inset 0 0 0 5px #fdba31;
   box-shadow:         inset 0 0 0 5px #fdba31; }

.category li.first { margin-bottom: 0; }
.category li.first a { 
  width: 390px;
  height: 280px; }   
    
.category a .text {
  background: rgba(0,49,88,.8);
  width: 210px;  
  height: 105px;
  padding: 10px;
  position: absolute;
  left: 5px;
  top: 5px;
  color: #fff;
  display: block;
  text-align: center;
  overflow: hidden;
  opacity: 0;
  -webkit-transition: all .5s ease-in-out;
  -moz-transition:    all .5s ease-in-out;
  -o-transition:      all .5s ease-in-out;
  -ms-transition:     all .5s ease-in-out;
  transition:         all .5s ease-in-out; }
.category a:hover .text { opacity: 1; }
.category a:active .text { background: rgba(0,25,44,.9); }

.category li.first .text {
  width: 360px;
  height: 250px; }   

.category .icons { 
  color: #fff;
  font-size: 35px; 
  margin: 10px auto;
  display: block;
  -webkit-transition: color .5s ease-in-out;
  -moz-transition:    color .5s ease-in-out;
  -o-transition:      color .5s ease-in-out;
  -ms-transition:     color .5s ease-in-out;
  transition:         color .5s ease-in-out;  }
.category li.first .icons { 
  font-size: 50px;
  margin-top: 40px; }
.category a:active .icons { color: #fdba31; }

.category a h3 {
  display: block;
  margin: 0;
  font-size: 14px !important;
  font-weight: 400;
  line-height: 1.1; 
  color: #fdba31;
  -webkit-transition: color .5s ease-in-out;
  -moz-transition:    color .5s ease-in-out;
  -o-transition:      color .5s ease-in-out;
  -ms-transition:     color .5s ease-in-out;
  transition:         color .5s ease-in-out; }
.category li.first a h3 { 
  font-size: 24px !important; }
.category a:active h3 { color: #fff; }


.category a time {
  text-transform: uppercase;
  font-size: 10px; 
  line-height: 1;
  color: #fff;
  -webkit-transition: color .5s ease-in-out;
  -moz-transition:    color .5s ease-in-out;
  -o-transition:      color .5s ease-in-out;
  -ms-transition:     color .5s ease-in-out;
  transition:         color .5s ease-in-out; }
.category a:active time { color: #fdba31; }

@media (max-width : 1370px) { 
.category { height: 230px; } 
    
.category a { 
  width: 200px;
  height: 105px; }
   
.category li.first a { 
  width: 280px; 
  height: 220px; }  
  
.category a .text {
  width: 170px;
  height: 75px; }
  
.category li.first .text {
  width: 250px; 
  height: 190px; } 
  
.category .icons { display: none;  }
.category li.first .icons {
  display: block;
  font-size: 30px; }  

.category a h3 { font-size: 14px !important; }
.category li.first a h3 { font-size: 18px !important; }

} 

#scrolling { clear: both; }
    
#scrolling article {
    width: 221px;
    margin: 7px 10px 5px 0;
    float: left;
   -webkit-transition: all .3s ease-in-out;
   -moz-transition:    all .3s ease-in-out;
   -o-transition:      all .3s ease-in-out;
   -ms-transition:     all .3s ease-in-out;
   transition:         all .3s ease-in-out;  }
    
#scrolling article a {
   background-repeat: no-repeat;
   background-position: center center;
   -webkit-background-size: cover;
   -moz-background-size:    cover;
   -o-background-size:      cover;  
   background-size:         cover;
   width: 100%;
   height: 135px;
   display: block;   
   position: relative; 
   -moz-box-shadow:    inset 0 0 0 1px #cdcdcd;
   -webkit-box-shadow: inset 0 0 0 1px #cdcdcd;
   box-shadow:         inset 0 0 0 1px #cdcdcd;
   -webkit-transition: all .3s ease-in-out;
   -moz-transition:    all .3s ease-in-out;
   -o-transition:      all .3s ease-in-out;
   -ms-transition:     all .3s ease-in-out;
   transition:         all .3s ease-in-out; }
#scrolling article a:hover {
   -moz-box-shadow:    inset 0 0 0 5px #fdba31;
   -webkit-box-shadow: inset 0 0 0 5px #fdba31;
   box-shadow:         inset 0 0 0 5px #fdba31; }
#scrolling article a:active{
   -moz-box-shadow:    inset 0 0 0 3px #007c3b;
   -webkit-box-shadow: inset 0 0 0 3px #007c3b;
   box-shadow:         inset 0 0 0 3px #007c3b; }

#scrolling article a .text {
  background: rgba(0,49,88,.8);
  width: 191px;  
  height: 105px;
  padding: 10px;
  position: absolute;
  left: 5px;
  top: 5px;
  color: #fff;
  display: block;
  text-align: center;
  overflow: hidden;
  opacity: 0;
  -webkit-transition: all .5s ease-in-out;
  -moz-transition:    all .5s ease-in-out;
  -o-transition:      all .5s ease-in-out;
  -ms-transition:     all .5s ease-in-out;
  transition:         all .5s ease-in-out; }
#scrolling article a:hover .text { opacity: 1; }
#scrolling article a:active .text { background: rgba(0,25,44,.9); }

#scrolling article .icons { 
  color: #fff;
  font-size: 30px; 
  margin: 15px auto 10px;
  -webkit-transition: color .5s ease-in-out;
  -moz-transition:    color .5s ease-in-out;
  -o-transition:      color .5s ease-in-out;
  -ms-transition:     color .5s ease-in-out;
  transition:         color .5s ease-in-out;  }

#scrolling article a:active .icons { color: #fdba31; }

#scrolling article a h3 {
  display: block;
  margin: 0;
  font-size: 14px !important;
  font-weight: 400;
  line-height: 1.1; 
  color: #fdba31;
  -webkit-transition: color .5s ease-in-out;
  -moz-transition:    color .5s ease-in-out;
  -o-transition:      color .5s ease-in-out;
  -ms-transition:     color .5s ease-in-out;
  transition:         color .5s ease-in-out; }
#scrolling article a:active h3 { color: #fff; }

#scrolling article a time {
  text-transform: uppercase;
  font-size: 10px; 
  line-height: 1;
  color: #fff;
  -webkit-transition: color .5s ease-in-out;
  -moz-transition:    color .5s ease-in-out;
  -o-transition:      color .5s ease-in-out;
  -ms-transition:     color .5s ease-in-out;
  transition:         color .5s ease-in-out; }
#scrolling article a:active time { color: #fdba31; }
    
#scrolling article .icons { 
  color: #fff;
  font-size: 35px; 
  margin: 10px auto;
  -webkit-transition: color .5s ease-in-out;
  -moz-transition:    color .5s ease-in-out;
  -o-transition:      color .5s ease-in-out;
  -ms-transition:     color .5s ease-in-out;
  transition:         color .5s ease-in-out;  }
#scrolling article li.first .icons { 
  font-size: 50px;
  margin-top: 40px; }
#scrolling article a:active .icons { color: #fdba31; }    

@media (max-width : 1370px) { 

#scrolling article { width: 174px; }
#scrolling article a { height: 110px; }

#scrolling article a .text {
  width: 144px;  
  height: 80px; }
  
#scrolling article .icons {  display: none; }
  
} 


/* --- Back/Next Buttons --- */

.controls { position: relative; }   

.controls a {
  background-color: #f0f0f0;      
  width: 24px;
  height: 48px;  
  position: absolute;
  top: 153px;
  z-index: 10000;
  opacity: 1; 
  cursor: pointer;  
  font-size: 20px;
  line-height: 48px;
  color: #aaa;   
  -webkit-transition: all .3s ease-in-out;
  -moz-transition:    all .3s ease-in-out;
  -o-transition:      all .3s ease-in-out;
  -ms-transition:     all .3s ease-in-out;
  transition:         all .3s ease-in-out; }   
@media (max-width : 1370px) { 
.controls a { top: 123px; }
}   

.controls a:hover { 
  background-color: #f7f7f7;
  color: #8e8e8e; }
.controls a:active { background-color: #f7f7f7; }

.controls a.back {
  text-align: left;
  -webkit-border-radius: 0 24px 24px 0;
  -moz-border-radius:    0 24px 24px 0;
  border-radius:         0 24px 24px 0; 
  left: -20px; }   
.controls a.back:hover {
  -moz-box-shadow:    1px 1px 1px rgba(0,0,0,.2);
  -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.2);
  box-shadow:         1px 1px 1px rgba(0,0,0,.2);  }
.controls a.back:active {
  -moz-box-shadow:    inset -1px 1px 2px rgba(0,0,0,.3);
  -webkit-box-shadow: inset -1px 1px 2px rgba(0,0,0,.3);
  box-shadow:         inset -1px 1px 2px rgba(0,0,0,.3); }

  
.controls a.next {
  text-align: right;  
  -webkit-border-radius: 24px 0 0 24px;
  -moz-border-radius:    24px 0 0 24px;
  border-radius:         24px 0 0 24px; 
  right: -20px; }
.controls a.next:hover {
  -moz-box-shadow:    -1px 1px 1px rgba(0,0,0,.2);
  -webkit-box-shadow: -1px 1px 1px rgba(0,0,0,.2);
  box-shadow:         -1px 1px 1px rgba(0,0,0,.2);  }
.controls a.next:active {
  -moz-box-shadow:    inset 1px 1px 2px rgba(0,0,0,.3);
  -webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,.3);
  box-shadow:         inset 1px 1px 2px rgba(0,0,0,.3); }