#hero {   
    background: #003158;
    width: 960px;
    height: 380px;
    position: relative; 
    -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 (min-width : 1200px) { 
  #hero { 
      width: 1200px;
      height: 505px;
      } }     

.slide {
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    position: relative; 
    }  

.slide a { 
    width: 960px; 
    height: 380px;
    position: relative;
    display: block;
    -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 .text {
    background: rgba(0,72,129,.9);
    width: 30%;
    height: 380px;
    font-family: "Arimo",helvetica,arial,serif;
    font-size: 16px;
    font-weight: 400;
    color: #fff;
    position: absolute;
    text-align: 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; 
    } 
  
#hero a:hover .text { background: rgba(0,72,129,1); }

.ie8 #hero .text { background: #004881; }
.ie8 #hero a:hover .text { background: #004174; }

    @media (min-width : 1200px) { 
        .slide a { width: 1200px; height: 505px; } 
        #hero .text {  height: 505px; }   
        }   

#hero .text.left { 
    top: 0; 
    left: 0; 
    }
  
#hero .text.center {
    margin-left: -21%;
    left: 50%; 
    bottom: 0;
    width: 40%;
    padding: 3%; 
    height: auto; 
    }
  
#hero .text.right { 
    top: 0; 
    right: 0;
    }

#hero .text .pad { padding: 25px; }

#hero h1 {
    color: #ebf6ff;
    font-family: "Arimo",helvetica,arial,serif;   
    font-size: 32px;
    line-height: .9;
    font-weight: 300;
    margin: 0 0 7px;  
    -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 a:hover h1 { 
    color: #fdba31; 
    text-shadow: 1px 1px 1px rgba(0,0,0,.25); 
    }

#hero p {
    color: #d9eeff;
    line-height: 1.2;
    font-size: 16px;
    font-family: 'arimo';  
    margin-bottom: 12px;
    -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 a:hover p { color: #ebf6ff; }  

#hero .button { 
    background: #d9eeff;  
    padding: 7px 10px;
    display: inline-block;
    font-size: 14px;
    line-height: 1;
    color: #003158;
    text-transform: uppercase;
    -moz-border-radius:    4px;
    -webkit-border-radius: 4px;
    border-radius:         4px;   
    -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 a:hover .button { 
    background: #fdba31; 
    -moz-box-shadow:    0 1px 1px rgba(0,0,0,.15);
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.15);
    box-shadow:         0 1px 1px rgba(0,0,0,.15); 
    }   
  
#hero a:hover .button:hover,
#hero a:active .button { 
    background: #fac966; 
    -moz-box-shadow:    0 1px 1px rgba(0,0,0,.35);
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.35);
    box-shadow:         0 1px 1px rgba(0,0,0,.35); 
    }

/* --- Slide Tabs --- */

#hero ul { display: none; }





/* --------------- Masonry --------------- */
.below {
    background: #ededed url(/theme/img/feed.png) repeat-x center top; 
    padding-bottom: 60px; 
    }  
    
.masonry-wrap { 
    width: 964px;
    -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 (min-width : 1200px) { .masonry-wrap { width: auto;} }
  
.feed.masonry {
    width: 965px;
    position: relative; 
    -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 (min-width : 1200px) { .feed.masonry { width: 1204px; }}

.masonry article {
    background: #fff;
    width: 207px;
    padding: 15px;
    margin: 2px; 
    -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 (min-width : 1200px) { .masonry article { width: 266px; }}
  
.masonry article .sticky { 
    position: relative !important; 
    left: 0;
    top: 0; 
    }  
  
.masonry .featured { width: 447px; }

    @media (min-width : 1200px) { .masonry .featured { width: 565px; }}

.masonry .featured.sticky { width: 447px; }
        
    @media (min-width : 1200px) { .masonry .featured.sticky { width: 565px; }}
            
.feed.masonry article:hover {
    background-color: #f6f6f6; 
    -moz-box-shadow:    0 1px 2px rgba(0,0,0,.15);
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
    box-shadow:         0 1px 2px rgba(0,0,0,.15); 
    }
  
.feed.masonry article:active {
    background-color: #f3f3f3; 
    -moz-box-shadow:    inset 0 1px 2px rgba(0,0,0,.15);
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.15);
    box-shadow:         inset 0 1px 2px rgba(0,0,0,.15); 
    }

.title {
    font-family: 'arimo', Helvetica, sans-serif;
    font-weight: 300;
    padding: 15px 15px 5px; 
    }
    
.title.cf { width: 930px }
    
    @media (min-width : 1200px) { .title.cf { width: auto } } 
  
.title h3 {
    display: inline;
    float: left; 
    font-weight: 400;
    font-size: 45px;
    line-height: 1;
    color: #123043; 
    } 

.title ul { 
    list-style: none;
    display: inline-block; 
    }

.title li { 
    list-style: none;
    display: inline-block;
    margin: 0 3px;
    float: left; 
    }  

.title a { 
    padding: 2px 5px;
    font-size: 20px;
    line-height: 1;
    color: #23445a; 
    -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; 
    } 

.title a:hover { 
    background: #3b5998; 
    color: #fff; 
    }
  
.title a:active { 
    background: #003158; 
    color: #fff; 
    }
  
.title li.ui-tabs-active a {
    background: #19317C; 
    color: #fff; 
    position: relative; 
    }

.title li.ui-tabs-active a:after { 
    height: 0; 
    width: 0;
    content: " "; 
    position: absolute; 
    left: 50%;
    top: 100%; 
    border: solid transparent;
    border-color: rgba(252, 97, 0, 0); 
    border-top-color: #19317C; 
    border-width: 4px;
    margin-left: -4px; 
    }    

.title.cf {
    width: 100%;
    height: 35px;
    max-width: 1170px;
    }
    
.title ul li {
    float: left;
    list-style: none;
    margin-left: 15px;
    }
    
.title ul {
    float: left;
    margin: auto;
    margin-left: 15px;
    }
    
.title h3 {
    float: left;
    font-size: 15px;
    text-transform: uppercase;
    margin: auto;
    line-height: 184%;
    }
    
.title ul li a {
    font-size: 14px;
    color: #555;
    }



/* --------------- Promo Bar --------------- */

.promos {
    background: #fff;
    padding: 5px;
    font-family: 'arimo', Helvetica, sans-serif;  
    font-weight: 300;
    text-align: 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; 
    }
  
.promos section { 
    height: 78px;  
    position: relative;
    padding: 15px;
    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; 
    }  
  
.promos a { display: block; }

.promos h3 {
    color: #699bbf;
    font-size: 12px;
    text-transform: uppercase; 
    margin-bottom: 5px; 
    }
  
.promos h3 a { color: #699bbf; }
.promos h3 a:hover { color: #004881; }

.promos h4 {
    color: #004781;
    font-size: 18px; 
    line-height: .9;
    font-weight: 300; 
    }
    
.promos h4 a { color: #004781; }
.promos h4 a:hover { color: #003158; }
  
    @media (min-width : 1200px) { 
      .promos h3 { font-size: 13px; }
      .promos h4 { font-size: 23px; line-height: auto; } 
      }   
  
.promos .more { 
    background: #b3c9db;
    width: 64px;
    padding: 5px 5px;
    position: absolute;
    right: -15px;
    top: 43px;
    transform:         rotate(-90deg); 
    -ms-transform:     rotate(-90deg); 
    -webkit-transform: rotate(-90deg);
    color: #fff;
    font-size: 12px;
    line-height: 1;
    text-align: center; 
    -moz-border-radius:    4px;
    -webkit-border-radius: 4px;
    border-radius:         4px;
    text-transform: uppercase;
    -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; 
    display: none;
    }
  
.ie9 .promos .more { display: none; }
  
    @media (min-width : 1200px) { .promos .more { display: block; }}  /*watch out here */ 
  
.promos .more:hover { background: #004881; }

.promos .more:active { 
    background: #003158;
    -moz-box-shadow:    inset 0 1px 3px rgba(0,0,0,.35);
    -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,.35);
    box-shadow:         inset 0 1px 3px rgba(0,0,0,.35); 
    }
    
    
    
    
/* --------------- Members --------------- */    
    
    
.members {
    width: 250px;
    background: -moz-linear-gradient(top,  yargba(255,255,255,0) 0%, rgba(251,253,253,0) 22%, rgba(238,244,248,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(22%,rgba(251,253,253,0)), color-stop(100%,rgba(238,244,248,1))); 
    background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(251,253,253,0) 22%,rgba(238,244,248,1) 100%);
    background: -o-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(251,253,253,0) 22%,rgba(238,244,248,1) 100%);
    background: -ms-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(251,253,253,0) 22%,rgba(238,244,248,1) 100%);
    background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(251,253,253,0) 22%,rgba(238,244,248,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#eef4f8',GradientType=0 ); 
    -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; 
    }

.members .left {
    width: 39%;
    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; 
    }

.members .buttons { 
    width: 152px; 
    float: right;
    -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; 
    }

.members .buttons a {
    width: 61px; 
    font-size: 11px; 
    text-align: center; 
    height: auto;
    background: #89a9c4;  
    float: left;
    margin: 2px;
    -moz-border-radius:    4px;
    -webkit-border-radius: 4px;
    border-radius:         4px;
    padding:  6px 5px;
    color: #fff;
    text-transform: uppercase;
    line-height: 23px;
    -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; 
    }
  
.members .buttons a figure { 
    display: inline;
    float: left; 
    margin-right: 4px; 
    display: none;
    }
  
.members .buttons a:hover { background: #11548a; }

.members .buttons a:active { 
    background: #003158;
    -moz-box-shadow:    inset 0 1px 3px rgba(0,0,0,.35);
    -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,.35);
    box-shadow:         inset 0 1px 3px rgba(0,0,0,.35); 
    }
  
@media (min-width : 1200px) { 
    .members { width: 375px; }
    .members .left { width: 37%; } 
    .members .buttons { width: 215px; float: left; }
    .members .buttons a { width: 93px; font-size: 12px; text-align: left; height: 23px; }
    .members .buttons a figure { display: block;  }
    }   
    
    
    
    
    
/* --------------- Events --------------- */     

.events {
    width: 360px;
    background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(243,247,250,0) 22%, rgba(202,219,232,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(22%,rgba(243,247,250,0)), color-stop(100%,rgba(202,219,232,1)));
    background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(243,247,250,0) 22%,rgba(202,219,232,1) 100%); 
    background: -o-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(243,247,250,0) 22%,rgba(202,219,232,1) 100%); 
    background: -ms-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(243,247,250,0) 22%,rgba(202,219,232,1) 100%);
    background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(243,247,250,0) 22%,rgba(202,219,232,1) 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#cadbe8',GradientType=0 );
    -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; 
    }
    
.events article {
    width: 125px;
    margin-right: 5px;
    padding: 7px 10px 7px 40px; 
    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; 
    }
  
.events article:hover { 
    background: #fff; 
    color: #003158; 
    }

.events h3 { margin-bottom: 6px; }

.events h4 { 
    font-size: 13px;
    margin-bottom: 0; 
    }

.events time {
    float: left; 
    width: 25px;
    margin-left: -35px;
    text-align: center;
    font-size: 11px;
    line-height: 1;
    text-transform: uppercase;
    color: #6d83a2;
    }   
  
.events time strong {
    font-weight: 300;
    font-size: 15px;
    display: block; 
    }


    @media (min-width : 1200px) { 
        .events { width: 450px; } 
        .events article { width: 161px; }
        .events h4 { font-size: 14px; margin-bottom: 0; }
        .events time { width: 30px; font-size: 12px; }      
        .events time strong { font-size: 17px; }  
        }


/* --------------- Events --------------- */     
.shop {
    float: left;
    width: 246px;
    background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(236,242,246,0) 22%, rgba(168,194,215,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(22%,rgba(236,242,246,0)), color-stop(100%,rgba(168,194,215,1))); 
    background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(236,242,246,0) 22%,rgba(168,194,215,1) 100%); 
    background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(236,242,246,0) 22%,rgba(168,194,215,1) 100%);
    background: -ms-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(236,242,246,0) 22%,rgba(168,194,215,1) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(236,242,246,0) 22%,rgba(168,194,215,1) 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#a8c2d7',GradientType=0 ); 
    -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 (min-width : 1200px) { .shop { width: 275px; } }  


#shop a {width: 87px; font-size: 10px;}

    @media (min-width : 1200px) { #shop a { width: auto; font-size: 12px;}} 

.shop img { 
    width: 70px;  
    height: 70px;
    margin-right: 15px;
    border: 1px solid #fff;
    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; 
    }
  
.shop a:hover img { border: 1px solid #003158; }

.shop h4 { margin-bottom: 5px; }

#shop h3 {font-size: 16px;}

    @media (min-width : 1200px) { #shop h3 { font-size: auto; }} 

.shop .button {
    background: #89a9c4;  
    -moz-border-radius:    4px;
    -webkit-border-radius: 4px;
    border-radius:         4px;
    display: inline-block;
    padding: 6px 10px;
    color: #fff;
    text-transform: uppercase;
    font-size: 12px;
    line-height: 1;
    -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; 
    }
  
.shop a:hover .button { background: #11548a; }

.shop a:active .button { 
    background: #003158;
    -moz-box-shadow:    inset 0 1px 3px rgba(0,0,0,.35);
    -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,.35);
    box-shadow:         inset 0 1px 3px rgba(0,0,0,.35); 
    }


/* ---- Feed ---- */   

.feed .panel { min-height: 210px; } 

.feed.list {
    width: 370px;
    float: left; 
    }

/* ---- Alertbox ---- */   

.topbanner { margin: 0; padding: 0; }

.topbanner .banner {
  width: 100%;
  height: 90px;
  background-size: 960px 90px !important;
}
    @media (min-width : 1200px) { .topbanner .banner { height: 113px; background-size: 1200px 113px !important; }}