/* ==========================================================================
   Base styles: universal defaults
   ========================================================================== */
html,button,input,select,textarea{color:#ececec}body{font-size:100%;background-color:#212121;line-height:1.4;font-family:Arial, "Helvetica", sans-serif}a{color:#c1c0a4; text-decoration:none;outline:none;}a:visited{color:#c1c0a4; outline:none;}a:hover{color:#ECECEC; outline:none;}a:focus{outline:none;}img{vertical-align:middle}fieldset{border:0;margin:0;padding:0}textarea{resize:vertical}ul{list-style:none;padding:0;margin:0;}
p.lead{line-height:2; font-size:300;font-family:'Helvetica', Arial, sans-serif;}.vmiddle {vertical-align:middle;}

/* ==========================================================================
   Grid (Minified)
   ========================================================================== */
/** Lean Modal **/

.modal-right {
    float:left;width:60%;
}

.modal-right h4 {
    margin-top: 0;
}

.modal-left {
    float: left;width:40%;
}
#lean_overlay {
    position: fixed;
    z-index:100;
    top: 0px;
    left: 0px;
    height:100%;
    width:100%;
    background: #000;
    display: none;
}
.modal_close { 
	position: absolute; top: 12px; right: 12px; display: block; width: 14px; height: 14px; background: url(../img/modal_close.png); z-index: 2; cursor: pointer;}   
#overview_video, #combat_tests, #acr, #assertive_communication, #atc, #attack_reading, #attention_control, #avoid_thinking_traps, #building_confidence, #character_strengths, #cs_challenges_leadership, #detect_icebergs, #energy_managment, #goal_setting, #energy_management, #htgs, #integrating_imagery, #learn_w_peers, #learning_mindset, #make_study_count, #mental_games, #msf, #piip, #plan_prioritize, #problem_solving, #remember_study, #rtr, #take_notes  {
	width: 600px;
	padding: 30px; 
	display:none;
	background: #333333;
	border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
	box-shadow: 0px 0px 4px rgba(0,0,0,0.7); -webkit-box-shadow: 0 0 4px rgba(0,0,0,0.7); -moz-box-shadow: 0 0px 4px rgba(0,0,0,0.7);     
	}

/**Responsive YouTube Embed **/
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/** Begin Grid **/
.row {
  margin-left: -20px;
  *zoom: 1;
}

.row:before,
.row:after {
  display: table;
  line-height: 0;
  content: "";
}

.row:after {
  clear: both;
}

[class*="span"] {
  float: left;
  min-height: 1px;
  margin-left: 20px;
}

.container {
  width: 940px;
}

.container-modal {
    width:600px;
}

.span12 {
  width: 940px;
}

.span11 {
  width: 860px;
}

.span10 {
  width: 780px;
}

.span9 {
  width: 700px;
}

.span8 {
  width: 620px;
}

.span7 {
  width: 540px;
}

.span6 {
  width: 460px;
}

.span5 {
  width: 380px;
}

.span4 {
  width: 300px;
}

.span3 {
  width: 220px;
}

.span2 {
  width: 140px;
}

.span1 {
  width: 60px;
}
.container, .container-modal {
  margin-right: auto;
  margin-left: auto;
  *zoom: 1;
}

h1{
        font-family: "Arial Black", Arial, Helvetica, sans-serif;
        font-weight:800;
        font-size:2.81em;/*45px */
        color:#efefef;
        text-transform:uppercase;
}
span {
	text-transform:uppercase;
	font-family:"Verdana", Helvetica, Arial, sans-serif;
	font-weight:100;
	font-size:1em;/* 45 px w/ h1 parent */
	color:#c1c0a4;
}

h2{
	font-family: "Arial Black", Arial, Helvetica, sans-serif;
	font-weight:800;
	font-size:2.19em; /* 35 px w/ body parent*/
	color:#c1c0a4;
	text-transform:uppercase;
}
h3 {
	font-family: "Arial Black", Arial, Helvetica, sans-serif;
	font-weight:800;
	font-size:1.56em; /* 25 px w/ body parent*/
	color:#efefef;
	text-transform:uppercase;   
}
h4 {
	font-family: "Arial Black", Arial, Helvetica, sans-serif;
	font-weight:800;
	font-size:1.1em; /* 25 px w/ body parent*/
	color:#efefef;
	text-transform:uppercase;   
}
a:hover h3, a:hover h4 {
    color: #c1c0a4;
}
h5 {
	font-family: "Arial Black", Arial, Helvetica, sans-serif;
	font-weight:800;
	font-size:1em; /* 25 px w/ body parent*/
	color:#efefef;
	text-transform:uppercase;   
}
span.small {
	text-transform:uppercase;
	font-family:"Helvetica", Arial, sans-serif;
	font-weight:100;
	font-size:1em; /* 35px w/ h2 parent */
	color:#efefef;
}
.fancybordertop {
	padding: 5px 0px;background: #212121;border-top: 20px solid #111111;
border-right: 20px solid #212121;border-left: 20px solid #212121;
}
.fancybordertop-1 {
	padding:0px;background: #212121;border-top: 10px solid #111111;
border-right: 10px solid #212121;border-left: 10px solid #212121;
}
.borderbottombright {
	border-bottom:1px solid #c1c0a4;
}
.borderright {
    border-right: 1px solid #efefef;
}
.borderleft {
    border-left: 1px solid #efefef;
}
.announcement {
	padding:5px 0;
	border-bottom: 1px solid #444444;	
}
.footer {
	height:100%;
	margin-top:55px;
	width:100%;
	padding-top:20px;
	background-color:#2c2c2d;
	-webkit-box-shadow: inset 0px 5px 5px 0px #000; 
	box-shadow: inset 0px 5px 5px 0px #000;
	
}
.footer li, .footer p {
	line-height:1.6;
	font-size:90%;
}
.container.first {
   padding-top:115px;   
}
.about-list li {
  border-bottom: 1px solid #c1c0a4;
  padding: 10px 0px;
}
.footer-list li {
  padding: 4px 0px;
}
.footer-list li:first-child {
    padding: 0;
}
.small-description {
	font-family: Arial, sans-serif; font-size: .9em;
}
/** Breadcrumbs **/
.breadcrumb { 
	list-style: none; 
	font: 12px 'Verdana', Helvetica, Arial, Sans-Serif;
}
.breadcrumb li { 
	float: left; 
}
.breadcrumb li a {
	color: white;
	text-decoration: none; 
	padding: 10px 10px 0px 0px;
	position: relative; 
	display: block;
	float: left;
}

/* FEATURE HEADLINE & Bar */

.feature-headline {
    font-family:  'Hoefler Text', Georgia, 'Times New Roman', serif;
    font-weight: normal;
    font-size: 1.75em;
    letter-spacing: .2em;
    line-height: 1.1em;
    margin:0px;
    text-align: center;
    text-transform: uppercase; 
    position: absolute;
    right: 70px;
    top: 100px;
    width: 350px; 
}

.feature-headline-hero {
	font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 1em;
    letter-spacing: normal;
    line-height: 1.1em;
    margin:0px;
    text-align: center;
    text-transform: none; 
    position: absolute;
    right: 70px;
    top: 100px;
    width: 350px; 
}

.feature-bar {
    text-align: center;
    width: 100%;
    position: absolute;
    bottom: 0;
    height: 80px;
    background: rgba(0, 0, 0, 0.6);
}
    

/* SLIDESHOW
--------------------------------------*/
/* Basic jQuery Slider essential styles */

#banner-slide{margin:0 auto;}
ul.bjqs{position:relative; width:100%; height: 100%; list-style:none;padding:0;margin:0 auto;overflow:hidden; display:none;}
li.bjqs-slide{position:absolute; display:none;}
ul.bjqs-controls{list-style:none;margin:0;padding:0;z-index:9999;}
ul.bjqs-controls.v-centered li a{position:absolute;}
ul.bjqs-controls.v-centered li.bjqs-next a{margin-top:50px;right:20px;font-size:28px;text-shadow: 1px 1px 3px #000;}
ul.bjqs-controls.v-centered li.bjqs-prev a{margin-top:50px;left:20px;font-size:28px;text-shadow: 1px 1px 3px #000;}
ol.bjqs-markers{list-style: none; padding: 0; margin:; 0; width:100%;}
ol.bjqs-markers.h-centered{text-align: center;}
ol.bjqs-markers li{display:inline;}
ol.bjqs-markers li a{display:inline-block;}
p.bjqs-caption{display:block;width:100%;margin:0;padding:2%;position:absolute;bottom:0;}
.slide-dot {
	width:15px;
	height: 15px;
	background: url("../img/slide-dot.png") top center no-repeat;
}
.slide-dot:hover {
	background: url("../img/slide-dot-hover.png") top center no-repeat;
}

.active-marker {
	background: url("../img/slide-dot-active.png") top center no-repeat;
}
/* ==========================================================================
   CSF2 custom styles
   ========================================================================== */
header {

	width: 100%;
	height: 76px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;

}

#logo{

	margin: 5px 10px 10px 10px;
	float: left;
	width: 259px;
	height: 64px;
	background: url(../img/logo_alt.png) no-repeat center;
	display: block;

}

nav {

	float: right;
	padding: 20px 20px;	

}

nav ul li {

	display: inline-block;
    text-transform: uppercase;
	float: left;
	font-size:75%;
	padding: 10px 5px 0px 10px;		
	
}

.current {

	color: #ececec;

}

#menu-icon {

	display: hidden;
	width: 40px;
	height: 40px;
	background: url(../img/menu-icon.png) center;

}

a:hover#menu-icon {

	background-color: #000;
	border-radius: 4px 4px 0 0;

}
/** Feature Area - Home Pg **/
.text-shadow {text-shadow: 1px 1px 3px #111; /* Chrome, Firefox 3.5+, IE 10+, Opera 9+, Safari 1+ */}
.welcometo {font-size: 2em/**32px**/; color: #c1c0a4; letter-spacing:2px;font-family: Arial Black, Helvetica, Arial, sans-serif;font-weight:800; text-shadow: 1px 1px 3px #111; /* Chrome, Firefox 3.5+, IE 10+, Opera 9+, Safari 1+ */}
.csf2headline {font-size: 3em/**50px**/; color: #ffffff; margin-top:-46px; font-family: Verdana, Helvetica, Arial, sans-serif;text-shadow: 1px 1px 3px #111; /* Chrome, Firefox 3.5+, IE 10+, Opera 9+, Safari 1+ */}
.sff {font-size: 27px; color: #ffffff; letter-spacing:2px; margin-top: -65px;font-family: Verdana, Helvetica, Arial, sans-serif;text-shadow: 1px 1px 3px #111; /* Chrome, Firefox 3.5+, IE 10+, Opera 9+, Safari 1+ */}
.headlinetop {font-size: 22px; color: #ffffff; letter-spacing:2px; margin-top: -46px;font-family: Verdana, Helvetica, Arial, sans-serif;text-shadow: 1px 1px 3px #111; /* Chrome, Firefox 3.5+, IE 10+, Opera 9+, Safari 1+ */}
.headlinebot {font-size: 22px; color: #ffffff; letter-spacing:2px; margin-top: -35px;font-family: Verdana, Helvetica, Arial, sans-serif;text-shadow: 1px 1px 3px #111; /* Chrome, Firefox 3.5+, IE 10+, Opera 9+, Safari 1+ */}
.home-bg {
	background: #000000 url("gat_spouse.jpg") center top no-repeat;
	padding: 0px;
    position: relative;
	background-size: 100%;
	width:100%;
	-webkit-box-shadow: 0px 0px 4px 0px #000000; /* Android 2.3+, iOS 4.0.2-4.2, Safari 3-4 */
	box-shadow: 0px 0px 4px 0px #000000;
	height: 600px;
}

@media (min-width: 1200px) {
.hero_announcement {
  		position: relative;
  		height: 600px;
  		background: #000000 url("gat_spouse.jpg") 0% -400px no-repeat;
  		background-size: cover;
  		margin-bottom: 1em;
  		padding-top: 3em;
  		text-align:center;
}
}

@media (min-width: 600px) {
.hero_announcement {
  		position: relative;
  		height: 600px;
  		background: #000000 url("gat_spouse.jpg") 0% -200px no-repeat;
  		background-size: cover;
  		margin-bottom: 1em;
  		padding-top: 3em;
  		text-align:center;
}
}

.hero_announcement h3 {
  		margin-bottom: -3px;
}

.announcement_box {
		width:300px;
		max-height:400px;
		position:absolute;
		right:50px;
		top:100px;
		padding:20px;
		background: rgba(0, 0, 0, 0.6);
	}

/**
*
* Button
*
**/
.button, .button--primary, .button--secondary, .button--secondary-variation {
  display: inline-block;
  padding: 10px 28px;
  margin-bottom: 13px;
  margin-top: 13px;
  min-height: 26px;
  text-align: center;
  font-family: "Open Sans", Helvetica, sans-serif;
  font-weight: 300;
  text-decoration: none;
  outline: 0;
  transition: none;
  -webkit-box-shadow: 0px 2px 5px 0px #000; 
	box-shadow: 0px 2px 5px 0px #000;
}
.button:hover, .button--primary:hover, .button--secondary:hover, .button--secondary-variation:hover {
  background: #4d4d4d;
  color: #ffffff;
  border: 1px solid #4d4d4d;
  text-decoration: none;
}

.button--primary {
  background: #c1c0a5;
  color: white;
  border: 1px solid #c1c0a5;
}

.button--big {
	padding: 20px 56px;
	font-size: 2.2em;
}

.button--secondary {
  background: white;
  color: #3372df;
  border: 1px solid #e6e6e6;
}

.button--secondary-variation {
  background: white;
  color: #3372df;
  border: 1px solid #e6e6e6;
  border-color: transparent;
}

/*==========  LIST LINKS  ==========*/
ul.list-links li:before {
  display: none;
}
ul.list-links a {
  font-weight: 400;
}
ul.list-links a:before {
  font-family: "icons";
  font-size: 13px;
  display: block;
  font-weight: 400;
  position: absolute;
  top: 0;
  left: 0;
  line-height: 26px;
}
ul.list-links a:before {
  font-size: 4px;
}
ul.list-links.list-links--primary a {
  font-weight: 400;
  font-family: "Open Sans", Helvetica, sans-serif;
  line-height: 1;
  text-decoration: none;
}
ul.list-links.list-links--primary a:before {
  font-family: "icons";
  font-size: 13px;
  display: block;
  font-weight: 400;
  position: absolute;
  top: 0;
  left: 0;
  line-height: 26px;
}

ol.list-links li:before {
  display: none;
}
ol.list-links li a {
  display: inline-block;
  font-weight: 300;
}
ol.list-links li a:before {
  counter-increment: list;
  content: "0" counter(list);
  color: inherit;
  font-weight: 400;
  display: inline-block;
  position: absolute;
  left: 0;
}
ol.list-links li:nth-child(10n) ~ li a:before, ol.list-links li:nth-child(10n) a:before {
  content: counter(list);
}
ol.list-links.list-links--secondary a:before {
  display: none;
}

.list-links--secondary {
  font-size: 16px;
  line-height: 1.6250em;
  /* 26px */
  padding-top: 1em;
  padding-bottom: 0;
  padding-left: 0;
}
.list-links--secondary li {
  padding-left: 0;
}
/** Feature Area - TC Pg **/
.tc-bg {
    background: #000000 url('../img/tc_bg.jpg') center top no-repeat;
    padding:50px 0 100px 0;
    background-size: 100%;
    height: 100%;
	-webkit-box-shadow: 0px 0px 4px 0px #000000; /* Android 2.3+, iOS 4.0.2-4.2, Safari 3-4 */
	box-shadow: 0px 0px 4px 0px #000000;
}
/* ============================= */
/* !Circle Hover Effects   */
/* ============================= */
.ch-grid {
    margin: 20px 0 0 0;
    padding: 0;
    list-style: none;
    display: block;
    text-align: center;
    width: 100%;
}

.ch-grid:after,
.ch-item:before {
    content: '';
    display: table;
}

.ch-grid:after {
    clear: both;
}

.ch-grid li {
    width: 300px;
    height: 300px;
    padding: 10px;
    display: inline-block;
    margin: 10px;
}
.ch-item {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    cursor: default;
    background: #c1c0a4;
    /**box-shadow: 
        inset 0 0 0 16px rgba(255,255,255,0.6),
        0 1px 2px rgba(0,0,0,0.1);**/
        
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

.ch-img-1, .ch-img-2, .ch-img-3 { 
    background-image: url(../img/benefits.png);
}

.ch-info {
    position: absolute;
    background: #707070;
    width: inherit;
    height: inherit;
	vertical-align:middle;
    border-radius: 50%;
    opacity: 0;

    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    
    -webkit-backface-visibility: hidden;

}

.ch-info h3 {
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 22px;
    margin: 0 30px;
    padding: 70px 0 0 0;
    height: 30px;
    font-family: 'Open Sans', Arial, sans-serif;
    text-shadow: 
        0 0 1px #fff, 
        0 1px 2px rgba(0,0,0,0.3);
}

.ch-info p {
    color: #fff;
    padding: 3px 10px;
    font-style: italic;
    margin: 0 30px;
	line-height:1.5;
    font-size: 12px;
    opacity: 0;
    text-align: center;
    -webkit-transition: all 1s ease-in-out 0.4s;
    -moz-transition: all 1s ease-in-out 0.4s;
    -o-transition: all 1s ease-in-out 0.4s;
    -ms-transition: all 1s ease-in-out 0.4s;
    transition: all 1s ease-in-out 0.4s;
}

.ch-info p a {
    display: block;
    color: #fff;
    color: rgba(255,255,255,0.7);
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: 1px;
    padding-top: 4px;
    font-family: 'Open Sans', Arial, sans-serif;
}

.ch-info p a:hover {
    color: #fff222;
    color: rgba(255,242,34, 0.8);
}

.ch-item:hover {
    box-shadow: 
        inset 0 0 0 1px rgba(255,255,255,0.1),
        0 1px 2px rgba(0,0,0,0.1);

}
.ch-item:hover .ch-info {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}

.ch-item:hover .ch-info p {
    opacity: 1;
}
.timeline-descrip-right {
		padding-top: 135px;
		text-align: right;
	}
	
.timeline-descrip-left {
		padding-top: 90px;
		text-align: left;
	} 

/** Locations Map + Pg **/
.map {
	background: url("../img/map.png")top center no-repeat;
	width:100%;
	height:593px;
}
.brightrow {background:#efefef;color: #111;}
.dark-row {
        text-align:left;
}

.skills img {
    height: 150px;
}

/** Icons **/
.chart {
        background: url("../img/chart.png") top center no-repeat;
         width:368px;
        height: 395px;
    }
    .mrt-icon {
        background: url("../img/mrt_icon.png") top center no-repeat;
        width:368px;
        height: 395px;
    }
    .pe-icon {
        background: url("../img/pe-circle.png") top center no-repeat;
        width:368px;
        height: 395px;
    }
    .it-icon {
        background: url("../img/book.png") top center no-repeat;
        width:368px;
        height: 395px;
    }
    .armyfit-icon {
        background: url("../img/armyfit.png") top center no-repeat;
        width:368px;
        height: 395px;
		margin-top: 25px;
    }
    .physical-poly {
        background: url("../img/physical-poly.png") top center no-repeat;
        width:368px;
        height: 395px;
    }
    .social-poly {
        background: url("../img/social_poly.png") top center no-repeat;
        width:368px;
        height: 395px;
    }
    .emotional-icon {
        background: url("../img/emotional-icon.png") top center no-repeat;
        width:368px;
        height: 395px;
    }
    .tree-poly {
        background: url("../img/tree-poly.png") top center no-repeat;
        width:368px;
        height: 395px;
    }
    .family-poly {
        background: url("../img/family-poly.png") top center no-repeat;
        width:368px;
        height: 395px;
    }
    .usericon {
        background: url("../img/user-icon.png") top center no-repeat;
        width:251px;
        height: 90px;
    } 
    .bigvideo {
        /*background: #000000;*/
        width:100%;
        height: 480px;
    }

/**
* HINT- A CSS tooltip library
*/

.hint { position: relative; display: inline-block; }

.hint:before, .hint:after {
            position: absolute;
            opacity: 0;
            z-index: 1000000;
            -webkit-transition: 0.3s ease;
            -moz-transition: 0.3s ease;
  pointer-events: none;
}

        
.hint:hover:before, .hint:hover:after {
    opacity: 1;
}

.hint:before {
    content: '';
    position: absolute;
    background: transparent;
    border: 6px solid transparent;
    position: absolute;
}
        
.hint:after {
    content: attr(data-hint);
    background: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 8px 10px;
            font-size: 12px;
    white-space: nowrap;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
}


/* top */

.hint--top:before {
    bottom: 100%;
    left: 50%;
    margin: 0 0 -18px 0;
    border-top-color: rgba(0, 0, 0, 0.8);
}
        
.hint--top:after {
    bottom: 100%;
    left: 50%;
    margin: 0 0 -6px -10px;
}

.hint--top:hover:before {
    margin-bottom: -10px;
}

.hint--top:hover:after {
    margin-bottom: 2px;
}

/* default: bottom */

.hint--bottom:before {
    top: 100%;
    left: 50%;
    margin: -14px 0 0 0;
    border-bottom-color: rgba(0, 0, 0, 0.8);
}
        
.hint--bottom:after {
    top: 100%;
    left: 50%;
    margin: -2px 0 0 -10px;
}

.hint--bottom:hover:before {
    margin-top: -6px;
}

.hint--bottom:hover:after {
    margin-top: 6px;
}

/* right */

.hint--right:before {
    left: 100%;
    bottom: 50%;
    margin: 0 0 -4px -8px;
    border-right-color: rgba(0,0,0,0.8);
}
        
.hint--right:after {
    left: 100%;
    bottom: 50%;
    margin: 0 0 -13px 4px;
}

.hint--right:hover:before {
    margin: 0 0 -4px -0;
}

.hint--right:hover:after {
    margin: 0 0 -13px 12px;
}

/* left */

.hint--left:before {
    right: 100%;
    bottom: 50%;
    margin: 0 -8px -4px 0;
    border-left-color: rgba(0,0,0,0.8);
}
        
.hint--left:after {
    right: 100%;
    bottom: 50%;
    margin: 0 4px -13px 0;
}

.hint--left:hover:before {
    margin: 0 0 -4px 0;
}

.hint--left:hover:after {
    margin: 0 12px -13px 0;
}

/** Tabs **/
.tabs {
      position: relative;   
      min-height: 600px; /* This part sucks */
      max-height:100%;
      clear: both;
      margin: 25px 0px;
    }
    .tab {
      float: left;
    }
    .tab label {
      background: transparent; 
      padding: 10px 20px; 
      font-family: "Arial Black", Arial, Helvetica, sans-serif;
	  font-weight:800;
	  font-size:1em; /* 25 px w/ body parent*/
	  color:#efefef;
      margin-left: -1px; 
      position: relative;
      left: 1px; 
    }
    .tab [type=radio] {
      display: none;   
    }
    .content {
      position: absolute;
      top: 28px;
      left: 0;
      background: transparent;
      right: 0;
      bottom: 0;
      padding: 20px;
      
      overflow: hidden;
    }
    .content > * {
      opacity: 0;
      
      -webkit-transform: translate3d(0, 0, 0);
    
      -webkit-transform: translateX(-100%);
      -moz-transform:    translateX(-100%);
      -ms-transform:     translateX(-100%);
      -o-transform:      translateX(-100%);
      
      -webkit-transition: all 0.6s ease;
      -moz-transition:    all 0.6s ease;
      -ms-transition:     all 0.6s ease;
      -o-transition:      all 0.6s ease;
    }
    [type=radio]:checked ~ label {
      background: transparent;
      z-index: 2;
      -webkit-box-shadow: inset 0px 0px 20px rgba(0,0,0,0.8); -moz-box-shadow: inset 0px 0px 20px rgba(0,0,0,0.8); box-shadow: inset 0px 0px 20px rgba(0,0,0,0.8); 
    }
    [type=radio]:checked ~ label ~ .content {
      z-index: 1;
    }
    [type=radio]:checked ~ label ~ .content > * {
      opacity: 1;
      
      -webkit-transform: translateX(0);
      -moz-transform:    translateX(0);
      -ms-transform:     translateX(0);
      -o-transform:      translateX(0);
    }

    .tag {
        background: transparent; 
        padding: 10px 20px; 
        font-family: "Helvetica", Arial, sans-serif;
        font-weight:300;
        font-size:.75rem; /* 25 px w/ body parent*/
        color:#efefef;
        border-right: 1px solid #efefef;
        margin-left: -1px; 
        position: relative;
        float: left;
        margin-right:10px;
    }
    .tag:hover {
        cursor: pointer;
        color: #c1c0a4;
    }
    .search {
        padding:15px;
        width:90%;
    }
    .category {
        font-size: .7rem;
        padding:0px 20px;
        background: #111111;
        margin: 0 20px;
         -moz-border-radius: 20px;
        -webkit-border-radius: 20px;
        -khtml-border-radius: 20px;
        border-radius: 20px;
    }
    .name {
		padding-bottom: 30px;}
		
	.name:hover {
		cursor: pointer;}	
		
    .description {display:none;padding-bottom: 30px;font-size:.9em;}

    /**** Tab #2 ****/
    /***************/

     .tabWidget {
    overflow: hidden;

}

.tabWidget .tabPanel {
    display: block;

      }

.tabWidget .tab {
   background: transparent; 
      padding: 10px 20px; 
      font-family: "Arial Black", Arial, Helvetica, sans-serif;
    font-weight:300;
    font-size:.8em; /* 25 px w/ body parent*/
    color:#efefef;
      margin-left: -1px; 
      position: relative;
      left: 1px;
      cursor: pointer; 
}
.tabWidget .tab:hover {
    cursor: pointer;
    color: #c1c0a4;
}

.js .tabWidget .tab {
    clear: none;

}

.tabWidget .panel {
    clear: right;
    display: block;
    float: right;
    margin-left: -100%;
    margin-top: 1.7em;  /* adjust as needed */
    width: 100%;
        -webkit-transform: translate3d(0, 0, 0);
    
      -webkit-transform: translateX(-100%);
      -moz-transform:    translateX(-100%);
      -ms-transform:     translateX(-100%);
      -o-transform:      translateX(-100%);
      
      -webkit-transition: all 0.6s ease;
      -moz-transition:    all 0.6s ease;
      -ms-transition:     all 0.6s ease;
      -o-transition:      all 0.6s ease;

}

.js .tabWidget .panel {
    display: none;
    clear: none;

}

.tabWidget .panel-inner {
    padding: 10px;
    margin: 30px 0px;
}

.tabWidget .selected .tab {
    background: transparent;
      z-index: 2;
      color: #c1c0a4;
      -webkit-box-shadow: inset 0px 0px 20px rgba(0,0,0,0.8); -moz-box-shadow: inset 0px 0px 20px rgba(0,0,0,0.8); box-shadow: inset 0px 0px 20px rgba(0,0,0,0.8); 
}

.js .tabWidget .selected .panel {
    display: block;      
      -webkit-transform: translateX(0);
      -moz-transform:    translateX(0);
      -ms-transform:     translateX(0);
      -o-transform:      translateX(0);
}

    .ac-container{
        max-width: 100%;
        text-align: left;
    }
    .ac-container label{
        padding: 5px 0px;
        font: 1.3em 'Helvetica', Arial, sans-serif;
        color: #c1c0a4;
        border-bottom: 1px dotted #c1c0a4;
        line-height:35px;
        font-weight: 100;
        position: relative;
        z-index: 20;
        display: block;
        height: 30px;
        cursor: pointer;
        line-height: 33px;
        font-size: 19px;
        opacity: 0.8;
    /*Transition*/ -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; 
    }
    .ac-container label:hover{
         opacity: 1; 
        /*Glow*/ -webkit-box-shadow: 0px 0px 20px rgba(193, 192, 164,0.8); -moz-box-shadow: 0px 0px 20px rgba(193, 192, 164,0.8); box-shadow: 0px 0px 20px rgba(193, 192, 164,0.8); 
    }
    .ac-container input:checked + label,
    .ac-container input:checked + label:hover{
        background: #c1c0a4;
        color: #3d7489;
    }
    .ac-container label:hover:after,
    .ac-container input:checked + label:hover:after{
        content: '';
        position: absolute;
        width: 24px;
        height: 24px;
        right: 13px;
        top: 7px;
        background: transparent url(../img/arrow_down.png) no-repeat center center; 
    }
    .ac-container input:checked + label:hover:after{
        background-image: url(../img/arrow_up.png);
    }
    .ac-container input{
        display: none;
    }
    .ac-container article{
        margin-top: -1px;
        overflow: hidden;
        height: 0px;
        position: relative;
        z-index: 10;
        -webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
        -moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
        -o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
        -ms-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
        transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
    }
    .ac-container article p{
font-family:'Helvetica', Arial, sans-serif;
        line-height: 23px;
        font-size: 14px;
        padding: 20px;
    }
    .ac-container input:checked ~ article{
        -webkit-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
        -moz-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
        -o-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
        -ms-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
        transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    }
    .ac-container input:checked ~ article.ac-small{
        height: 140px;
    }
    .ac-container input:checked ~ article.ac-medium{
        height: 180px;
    }
    .ac-container input:checked ~ article.ac-large{
        height: 230px;
    }

/** Footer styles **/
.social_icons_footer{ 
	height:40px;
	float:left;
}    
.twitter-footer{
	width:37px;
	height:30px;
	background: url(../img/Twitter_icon.png) no-repeat;
}
.twitter-footer:hover{
	width:37px;
	height:30px;
	background: url(../img/Twitter_icon_hover.png) no-repeat;
}
.facebook-footer{
	width:37px;
	height:30px;
	background: url(../img/F_icon.png) no-repeat;
}
.facebook-footer:hover{
	width:37px;
	height:30px;
	background: url(../img/F_icon_hover.png) no-repeat;
}
.youtube-footer{
	width:37px;
	height:30px;
	background: url(../img/Youtube_icon.png) no-repeat;
} 
.youtube-footer:hover{
	width:37px;
	height:30px;
	background: url(../img/Youtube_icon_hover.png) no-repeat;
}

/**Gradient Box Panels**/
.white-panel{
	background-color: #2c2c2d;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#2c2c2d), to(#212121)); /* Chrome, Safari 4+ */
	background-image: -webkit-linear-gradient(top, #2c2c2d, #212121); /* Chrome 10-25, iOS 5+, Safari 5.1+ */
	background-image:    -moz-linear-gradient(top, #2c2c2d, #212121); /* Firefox 3.6-15 */
	background-image:      -o-linear-gradient(top, #2c2c2d, #212121); /* Opera 11.10-12.00 */
	background-image:         linear-gradient(to bottom, #2c2c2d, #212121);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2c2c2d', endColorstr='#212121');
	padding:5px 0px 0px 0px;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
	border-bottom-left-radius: 3px;
	-webkit-box-shadow: inset 0px 0px 8px 0px #000; 
	box-shadow: inset 0px 0px 8px 0px #000;
}
.white-panel span.small { margin-left:20px;}
.white-panel p{ margin:20px;}

















/* ==========================================================================
   Helper classes
   ========================================================================== */

/* Prevent callout */

.nocallout {
    -webkit-touch-callout: none;
}

.pressed {
    background-color: rgba(0, 0, 0, 0.7);
}

/* A hack for HTML5 contenteditable attribute on mobile */

textarea[contenteditable] {
    -webkit-appearance: none;
}

/* A workaround for S60 3.x and 5.0 devices which do not animated gif images if
   they have been set as display: none */

.gifhidden {
    position: absolute;
    left: -100%;
}

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    background-repeat: no-repeat;
    border: 0;
    direction: ltr;
    display: block;
    overflow: hidden;
    text-align: left;
    text-indent: -999em;
}

.ir br {
    display: none;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/**
 * Clearfix helper
 * Used to contain floats: h5bp.com/q
 */

.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

a.tooltip {outline:none; } a.tooltip strong {line-height:30px;} a.tooltip:hover {text-decoration:none;} a.tooltip span { z-index:10; display:none; padding:14px 10px; margin-left:-25px; width:240px; line-height:16px; } a.tooltip:hover span{ display:inline; position:absolute; border: 2px solid #FFF; color:#EEE; background:#000 url(img/css-tooltip-gradient-bg.png) repeat-x 0 0; } .callout {z-index:20;position:absolute;border:0;top:-14px; left:120px;} /*CSS3 extras*/ a.tooltip span { border-radius:2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; -moz-box-shadow: 0px 0px 8px 4px #666; -webkit-box-shadow: 0px 0px 8px 4px #666; box-shadow: 0px 0px 8px 4px #666; }

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   Theses examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */
/*MEDIA QUERY FOR NAV*/
@media only screen and (max-width : 1050px) {

	header {

		position: absolute;

	}

	#menu-icon {

		display:inline-block;

	}

	nav ul, nav:active ul { 

		display: none;
		position: absolute;
		padding: 20px;
		background: #000;
		border: 5px solid #3c3c3c;
		right: 0px;
		top: 60px;
		width: 50%;
		border-radius: 4px 0 4px 4px;

	}

	nav li {

		text-align: center;
		width: 100%;
		padding: 10px 0;
		margin: 0;

	}

	nav:hover ul {

		display: block;

	}
@media only screen and (min-width: 800px) {
    /* Style adjustments for viewports that meet the condition */
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min-resolution: 144dpi) {
    /* Style adjustments for viewports that meet the condition */
}