#hero {
  background-color: #003659;
  width: 1200px;
  height: 500px;
  position: relative; }

.slide {
  background-repeat: no-repeat;
  background-position: center top;
  position: relative;
  -webkit-box-shadow:inset 0 0 60px 0 rgba(0,54,89,.5);
   box-shadow:inset 0 0 60px 0 rgba(0,54,89,.5);}	

.mask { background: url(/theme/img/hero-mask.png) no-repeat center bottom; }	

.slide a { 
  width: 1200px;
  height: 500px;
  position: relative;
  display: block; }

#hero .text {
  background: rgba(173,38,36,.9);
  width: 530px;
  height: auto;
  padding: 30px;   
  font-size: 17px;
  color: #fff;
  position: absolute;
   text-align: left;
  bottom: 70px;
  -webkit-transition: background .3s ease-in-out;
  -moz-transition:    background .3s ease-in-out;
  -o-transition:      background .3s ease-in-out;
  -ms-transition:     background .3s ease-in-out;
  transition:         background .3s ease-in-out; } 
#hero .text.left { left: 30px; }
#hero .text.center {
   text-align: center;
  margin-left: -295px;
  left: 50%; }
#hero .text.right { text-align: right; right: 30px; }
#hero .text.none { display: none; }

#hero a:hover .text { background: rgba(173,38,36,1); }

#hero a h1 {
  color: #fff;  
  font-size: 40px;
  line-height: .9;
  font-weight: 700;
  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 { 
  -moz-text-shadow:    inset 2px 2px 2px rgba(0,0,0,.25);
  -webkit-text-shadow: inset 2px 2px 2px rgba(0,0,0,.25);
  text-shadow:         inset 2px 2px 2px rgba(0,0,0,.25);
  color: #ddd; }

#hero a p {
  color: #fff;
  font-size: 19px;
  line-height: 1.2;
  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: #fff; }      

#hero .button { 
  background: #003659;  
  padding: 10px 15px 7px 15px;
  display: inline-block;
  font-family: "proxima-nova", sans-serif; 
  font-weight: 600;
  font-size: 20px;
  color: #6194c6;
  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: #003659; 
  color: #fff;
  -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:active .button { 
  background: #003659;
  color: #ad2624;
  -moz-box-shadow:    inset 0 1px 1px rgba(0,0,0,.35);
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.35);
  box-shadow:         inset 0 1px 1px rgba(0,0,0,.35); }


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

#hero ul { 
  list-style: none; 
  display: inline;
  position: absolute;
  top: 30px; 
  left: 30px;
  z-index: 10;
  font: 300 1px/1 museo-sans, arial; }

#hero li { 
  width: 20px;
  margin-right: 5px;
  display: inline-block; }

#hero li a { 
  background: rgba(255,255,255,.6); 
  color: #fff;
  padding: 10px;
  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;
  -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:hover a { 
  background: rgba(173,38,36,.5); 
  color: #ad2624;
  -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:active a { 
  background: rgba(173,38,36,1);
  color: #ad2624;
  -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 { color: #ad2624; background: rgba(173,38,36,1); opacity: .5; }
#hero li.ui-tabs-active hover a { background: transparent; }


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

#hero .control {
  background-color: #fff;   
  background-position: center center;
  background-repeat: no-repeat;
  width: 45px;
  height: 70px; 
  position: absolute;
  top: 60px;
  opacity: .5; 
  -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 .control:hover { 
  background-color: #fff; 
  opacity: 1;
  -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); }
#hero .control:active { 
  background-color: #ad2624;
  opacity: 1;
  -moz-box-shadow:    inset 0 1px 1px rgba(0,0,0,.2);
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.2);
  box-shadow:         inset 0 1px 1px rgba(0,0,0,.2); }

#hero .control.back {
  background-image: url(/theme/img/left.png);
  left: -70px; }			
#hero .control.next {
  background-image: url(/theme/img/right.png);
  right: -70px; }			

/* --------------- Below --------------- */

.below {
  width: 1140px;
  background: #e1e1e1;
  padding: 0 30px 30px 30px;
  text-align: left;
  position: relative; } 

/* --------------- Tabs ---------------- */
#tabs {
   width: 780px;
   float: left;
   min-height: none;
   position: relative;
   top: -20px;
   background: #fff;
   -webkit-box-shadow: 2px 2px 3px 0 rgba(0,0,0,.1);
   box-shadow: 2px 2px 3px 0 rgba(0,0,0,.1); }
   
ul.tabs {
   margin: 0;
	padding: 0;
	float: left;
	list-style: none;
	height: 45px; /*--Set height of tabs--*/
	background: #013658;
	width: 100%;
}

ul.tabs li {
	float: left;
   width: 33%;
   text-align: center;
	margin: 0;
	padding: 0;
	height: 45px; /*--Subtract 1px from the height of the unordered list--*/
	line-height: 45px; /*--Vertically aligns the text within the tab--*/
	margin-bottom: -1px; /*--Pull the list item down 1px--*/
	overflow: hidden;
	position: relative;
   font-family: "proxima-nova", sans-serif; font-weight: 700; font-size: 18px; text-transform: uppercase;
}
ul.tabs li:nth-child(2) { }
ul.tabs li:last-child { width: 34%; }

ul.tabs li a {
	text-decoration: none;
	color: #679bcd;
	display: block;
	font-size: 1.0em;
	font-weight: 700;
	padding: 0px 15px;
	outline: none;
   -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; 
}
ul.tabs li a:hover {
	color: #fff;
   background: #679bcd;
}
html ul.tabs li.active { /*--Makes sure that the active tab does not listen to the hover properties--*/
   background: #fff;
	border-bottom: none; /*--Makes the active tab look like it's connected with its content--*/
}
html ul.tabs li.active a { color: #00365a; }
html ul.tabs li.active a:hover { background: none; }

.tab_container {
	border: none;
	overflow: hidden;
	clear: both;
	float: none; 
   width: 100%;
   padding-bottom: 1em;
}
.tab_content {
   position: relative;
	font-size: 1.0em;
	line-height: 1.5em;
	background: none;
   padding: 1em;
	border-top: none; /*--Makes the active tab look like it's connected with its content--*/
}

#featured { 
   position: absolute;
   width: 320px; }

/* Expander 
--------------------------------------------------- */

.expander { display: none; margin: 0 0 1px; background: none; padding: 2px 2px 0 2px; }
   
.expander-header { 
   cursor: pointer;
   padding: 10px;
   display: block;
   background: #679bcd;
   border-bottom: #fff 2px solid;
	-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; }
  .expander-header.selected { background: #fff; }

.expander-header h2 {
   font-family: "proxima-nova", sans-serif; 
      font-weight: 700; 
      font-size: 18px; 
      text-transform: uppercase;
      color: #fff;
      line-height: 1;
	margin: 0;
   padding: 0 25px 0 0;
   position: relative;
   padding-bottom: 0 !important; 
   -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; }   
.expander-header:hover h2,
.expander-header.selected h2 { color: #013658 !important; }   
.expander-header.selected:hover h2 { color: #013658 !important; }   

.expander-header h2:after {
   background: #013658 url(/theme/img/expander.png) no-repeat center 5px; 
   width: 22px;
   height: 21px;
   display: block;
   content:" ";
   -moz-border-radius:       20px;
      -webkit-border-radius: 20px;
      border-radius:         20px;    
   color: #fff;
   font-size: 22px;
   line-height: 19px;
   font-weight: 300;
   text-align: center;
   position: absolute;
      top: 0;
      right: 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;}
.expander-header:hover h2:after { background-color: #ad2624; }
.expander-header:active h2:after { 
   background-color: #ad2624;  }

.expander-header.selected h2:after { background-position: center -47px !important; }

.expander-header p { margin-bottom: 0; }
   
.expander-header:hover { background-position: 630px -68px; }
.expander-header:active {  }        
      
.expander-body { 
   background: none;
   padding: 1em;   }       
.expander-body p:last-child { margin-bottom: 0; }    

   
#sidebar {
   clear: both;
   width: 250px;
   float: right; }

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

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

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