@charset "utf-8";
/* CSS Document */

@import url('fonts.css');

body {
	background: #f2f2f2;
	font-family: 'Bitter', serif;	
}
	
/***********************
	DEFAULT FONTS
***********************/
h1 {
	font-family: 'Montserrat', sans-serif;
	font-size: 1.6em;
	margin: 1em 0;
}

p {
	margin: 2em 0;
	font-size: 1em;	
}

.container {
	margin: 0 auto;
	width: 90%;	
}
	
	
/***********************
	BUTTONS & LINKS
***********************/
.ghost__btn {
	font-family: 'Montserrat', sans-serif;
	border: 1px solid rgba(221, 221, 221, 0.3);	
	padding: 1.3em;
	font-size: 1.2em;
	transition: .1s linear all;
	-webkit-transition: .1s linear all;
	-moz-transition: .1s linear all;
	-ms-transition: .1s linear all;
}
	
.ghost__btn:hover {
	border-color: #fff;	
	color: #fff;
}
	
.ghost__btn a {
	position: absolute;
	text-align: left;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}
	
.ghost__btn p {
	position: relative;
	margin: 0 auto;
	top: 10px;	
	width: 90%;
}
	
.ghost__btn p:after {
	content: "";
	background: url('../img/global/arrow_wte.png');
	background-repeat: no-repeat;
	background-size: cover;
	float: right;
	position: relative;
	width: 13px;
	height: 20px;
	top: 3px;
	right: 14px;
	font-size: 1.5em;
	opacity: 0.5;
	transition: .1s linear all;
	-webkit-transition: .1s linear all;
	-moz-transition: .1s linear all;
	-ms-transition: .1s linear all;
}
	
		
.ghost__btn:hover p:after {
	right: 12px;	
	opacity: 1;
}

/***********************
	ALERTS
***********************/
#alert {
	position: fixed;
	margin: 0 auto;
	top: 10px;
	left: 0;
	right: 0;
	z-index: 9999;
	width: 85%;
}

#alert p {
	float: left;
}

/***********************
	HEADER
***********************/
 
#header #top {
	height: 499px;	
	background-position: 1260px -60px !important;
}

#header .slide__content {
	position: relative;
	float: right;
	top: 150px;
	right: 0;
	left: -260px;
	width: 25%;	
	z-index: 3;
}

#header .slide__content img {
	position: absolute;
	width: 100%;	
}

#header .slide__indicators {
position: absolute;
z-index: 9998;
width: 200px;
height: 60px;
background: red;
right: 20%;
bottom: 3%;
}

#header .slide__indicators ul li {
	list-style: none;	
}

#top {
	position:relative;
	z-index: 1;
	background: #212121;
	width: 100%;
	height: 490px;
}

#top #introduction {
	position: relative;
	z-index: 3;
	float: right;
	width: 67%;
	color: #fff;
}
	
#top #introduction h1 {
	font-weight: 1em;
	line-height: 2em;
}
	
#top #introduction p {
	color: #fff;
	font-size: 1.3em;
	margin: 2em 0 0 0;
}
	
#top.top-wrap {
	position: relative;
	border: 1px solid #fff;
	margin: 2em;
	height: inherit;
}
	
#top .overlay {
	position: absolute;
	z-index: 2;
	background: url('../img/grad-overlay.png');
	background-size: cover;
	width: 100%;
	height: 100%;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}
	
#top .down__arrow {
	position: absolute;
	z-index: 3;
	opacity: 0.6;
	margin: 0 auto;
	height: 50px;
	width: 65px;
	left: 0;
	right: 0;
	bottom: 20px;
}
	
#top .down__arrow:before {
	content: "";
	display: block;
	background: url('../img/icons/arrow-down.png');	
	background-size: cover;
	height: inherit;
	width: inherit;
	animation: arrow 1s infinate;
	-webkit-animation: arrow 1s infinate;
	-moz-animation: arrow 1s infinate;
}

.carousel-indicators {
	text-align: right;
	bottom: 10% !important;	
	transition: .2s linear all;
}

.carousel-indicators li {
	-webkit-transition: .2s linear all;
	-moz-transition: .2s linear all;
	-ms-transition: .2s linear all;
	vertical-align: middle;
	height: 10px;
	border-color: #8db9e8;
}

.carousel-indicators .active {
	height: 20px !important;	
	background: #6ea0d7;
	border-color: #6ea0d7;
}


#top-bar {
	position: absolute;
	z-index:9999;
	background: #212121;
	width: 100%;
	min-height: 70px;	
	box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.77);
    border-bottom: 1px solid #717171;
}

#top-bar.fixed {
	position: fixed;
	top: 0;	
}
	
#top-bar #logo {
	float: left;
	width: 93px;
	height: 64px;
	margin: 0.5em 0 0 0;
	background: url('../img/white-vert.png') no-repeat;
	background-size: 100%;
}

#top-bar .icon-bar {
	background: #fff;	
}

#top-bar .navbar-toggle {
	top: 10px;	
}

#top-bar #navbar {
	color: #fff;	
	text-align: center;
}

#top-bar #navbar a {
	background: none !important;
	color: #fff;	
}

#top-bar #navbar a:hover {
	color: #333;	
}

#top-bar #navbar li {
	padding: 1em;	
}

#top-bar #navbar li:hover {
	background: #337ab7;	
}

#top-bar #navbar li a:hover {
	background: #337ab7;	
	color: #fff;
}
	
#top-bar .navigation {
	margin: 2em 0px 0px;
	height: inherit;
	left: 50px;
	position: relative;	
	text-shadow: 1px 2px 2px rgba(1,1,1,0.3);
	color:#fff;
}
	
#top-bar .navigation a {
	color: #fff;	
}
	
#top-bar .navigation #plan-btn {
	float: right;
}

.sub__nav {
	display: none;	
}
	
#top-bar #search-bar {
	display: none;
	background: rgba(185,185,185,0.5);
	clear: both;
	width: 100%;
	height: 60px;
	margin: 3px 0 0 0;
}
	
#top-bar #search_form {
	float: right;
	width: 300px;	
	margin: 1em 0;
}
	
#top-bar #search-box {
	border: 1px solid #cecece;
}

/***********************
	CONTENT
***********************/

#content {
	margin-top: 75px;	
}

#content p {
	font-size: 1em;	
}
	

#content .section__content p {
    margin: 2em 0;	
	font-size: 1.2em;
}
	
.section__content p:first-of-type {
    margin: 0;
}

.contact__info {
		
}

.contact__info ul {
	padding: 0;	
}

.contact__info li {
	display: inline-block;
	vertical-align: top;
	border: 1px solid #dfdfdf;
	margin: 1em 0 0 1em;
	padding: 1em;
	width: 40%;	
}

.contact__info li:first-of-type {
	margin: 1em 0;	
	vertical-align: top;
}

.contact__info li p {
	margin: 0;	
}
/***********************
	SECTIONS
***********************/

.section__header.about {
	background: url('../img/sections/about_sub_header.jpg');
	background-position: 70% 0px !important;
}

.section__header.plan {
	background: url('../img/sections/plan_your_visit_sub_header.jpg');
}

.section__header.exhibits {
	background: url('../img/sections/exhibits_sub_header.jpg');
}

.section__header.education {
	background: url('../img/sections/education_sub_header.jpg');
}

.section__header.research {
	background: url('../img/sections/research_sub_header.jpg');
}

.section__header {
		background-color: #002147 !important;
		background-size: cover;
		background-position: 70% !important;
		background-repeat: no-repeat !important;
		margin: 1em 0;
		height: 150px;
		width: 100%;
	}
	
.section__header.isAttached {
	position: fixed;
	top: 15px;
}
	
.section__header.isDetached {
	position: relative;
	top: 0;
}
	
.section__header h1 {
	position: relative;
	top: 65px;
	font-size: 30px;
	margin: 1em 0;
	color: #fff;	
}
	
.section__header p {
	display: none;
	position: relative;
	top: 35px;
	font-size: 1em !important;
	margin: 1.5em 0;
}

.section__content p {
	line-height: 2em;	
}



/***********************
	SOCIAL BAR
***********************/

#social #social-bar {
	border-top: 1px solid #cecece;
	color: #333;
	text-align: center;
}
	
#social #social-bar ul {
	margin: 0;	
	padding: 0;
}
	
#social #social-bar ul li {
	display: inline-block;	
	padding: 5%;
	font-size: 1.8em;
	color: #333;
}
	
#social #social-bar ul li span {
	display: none;	
}



/***********************
	FOOTER
***********************/

#footer {
	background: url('../img/global/footer.jpg') #333 no-repeat;
	background-position: 10% 10%;
	color: #fff;
	width: 100%;
	min-height: 300px;	
}
	
#footer h1 {
	font-size: 1.6em;	
	text-transform: uppercase;
}
	
#footer a {
	color: #8F8F8F;	
	text-decoration: none;
	-webkit-transition: .1s linear all;
	-moz-transition: .1s linear all;
	-ms-transition: .1s linear all;
}
	
#footer a:hover {
	color: #fff;	
}
	
#footer #directions-btn {
	position: relative;
	margin: 2em 0 0 0;
	width: 100%;
	height: 50px;
}	
	
#footer #footer__nav {
		
}

#footer #footer__nav #museum-location {
	margin: 1.5em 0 0 0;
}

#footer #footer__nav #museum-location h1 {
	margin: 0 0 1em 0;	
}

#footer #footer__nav #museum-location p:first-of-type {
	margin-left: 0;
}

#footer #footer__nav #museum-location p {
	margin-left: 37px;
	line-height: 6px;	
}

#footer #footer__nav #museum-location .location__icon {
	float: left;
	margin: 0 0.3em 0 0;
	font-size: 2em;	
	color: #fff;
}

#footer #footer__nav #museum-location #directions-btn p {
	position: relative;
	left: 15px;
	line-height: 25px;
}
	
#footer #footer__nav ul {
	padding: 0;	
	margin: 2em 0;
}
	
#footer #footer__nav ul > li {
	margin: 1em 0;	
	font-size: 1em;
	list-style:none;
}

#footer #footer__nav #site-links {
	margin: 3em 0;	
}

#footer #footer__nav #site-links .link-col {
	display: inline-block;
	vertical-align: top;
	width: 49.5%;	
}
	
#footer #bottom__links {
	border-top: 1px solid #989898;	
	margin: 1em 0;
	padding: 1em 0;
}
	
#footer #bottom__links ul > li {
	display: inline-block;	
	padding: 1em;
}

#footer #bottom__links  {
	text-align: center;	
}

#footer #bottom__links #accreditations {
	
}

#footer #bottom__links #accreditations ul {
	padding: 0;
}

#footer #bottom__links #accreditations ul li {
	width: 110px;
}

#footer #bottom__links #legal-links ul {
	margin: 1em 0;
	padding: 0;	
}

#footer #army-logo {
	display: none;	
}

@media (min-width: 576px) {
	#header .section__header {
		height: 130px;
	}
	
	#header .section__header h1 {
		top: 15px;
	}
	
	#header .section__header p {
		display: none ;	
	}
	
	#header .slide .slide__content {
		top: 120px;
		width: 45%;	
	}
	
	
	#social #social-bar {
		border-top: 1px solid #cecece;
		color: #333;
		text-align: center;
	}
	
	#social #social-bar ul {
		margin: 0;	
	}
	
	#social #social-bar ul li {
		display: inline-block;	
		padding: 5%;
		font-size: 1.8em;
		color: #333;
	}
	
	#social #social-bar ul li span {
		display: none;	
	}
	
	#footer #footer__nav #site-links .link-col {
		display: inline-block;
		width: 45%;
		vertical-align: top;	
	}
}

@media (min-width: 768px) {
	#header #top {
		background-position: -440px -60px !important;	
	}
	
	#header #top-bar #logo {
		background: url('../img/white-horz.png');	
		background-size: cover;
		width: 230px;
	}
	
	#header #top-bar #navbar li {
		padding: 0.1em;	
	}
	
	
	#footer #footer__nav #museum-location {
		float: left;
		width: 50%;	
	}
	
	#footer #directions-btn {
		width: 60%;	
	}
	
	#footer #footer__nav #site-links {
		margin: 0;
		float: right;
		display: inline-block;
		width: 40%;	
	}
	
	#footer #footer__nav #site-links .link-col {
		width: 49%;
	}
	
	
	#footer #bottom__links {
		clear: both;	
	}
}

@media (min-width: 992px) {
	#header #top-bar #navbar .sub__nav {
		display: none;
		position: absolute;	
		z-index: 9999;
		padding: 0;
		width: 250px;
		top: 98px;
		left: 0;
		min-height: 200px;
		background: rgba(51,51,51,0.95);
		box-shadow: 0px 1px 5px rgba(1,1,1,0.5);
		border-bottom-left-radius: 3px;
		border-bottom-right-radius: 3px;
		transition: .2s linear all;
		-webkit-transition: .2s linear all;
		-moz-transition: .2s linear all;
		-ms-transition: .2s linear all;
	}
	
	#header #top-bar #navbar .sub__nav:hover {
		color: #8F8F8F;
	}
	
	#header #top-bar #navbar .sub__nav li {
		background: transparent;
		text-align: left;
		margin: 0.5em 0;
		padding: 1em;
		list-style: none;
		transition: .2s linear all;
		-webkit-transition: .2s linear all;
		-moz-transition: .2s linear all;
		-ms-transition: .2s linear all;
	}
	
	#header #top-bar #navbar .sub__nav li:hover {
		color: #fff;	
	}
	
	#header #top-bar #navbar .sub__nav li a {
		color: inherit;
	}
	
	#header #top-bar #navbar .sub__nav li a:hover {
		background: transparent;
		text-decoration: none;
	}
	
	#header #top-bar #navbar .sub__nav li:after {
		display: block;
		content: "";
		position: relative;
		top: 17px;
		width: 100%;
		border-bottom: 1px solid #646464;	
	}
	
		
	#header #top-bar #navbar .sub__nav li:last-of-type:after {
		display: none;	
	}
	#header #top-bar #navbar li {
		padding: 1em 0.3em;	
	}
	
	#header #top-bar .navbar-nav {
		float: right;	
	}
	
	#footer #directions-btn {
		width: 45%;	
	}
	
	#footer #accreditations {
		float: left;	
	}
	
	#footer #legal-links {
		float: right;	
	}
}

@media (min-width: 1200px){
	
	/***********************
		DEFAULT FONTS
	***********************/
	h1 {
		font-family: 'Montserrat', sans-serif;
		font-size: 25px;
	}
	
	.container {
		margin: 0 auto;
		width: 1100px;
	}
	
    #header #top {
        background: #212121;   
    }
    
	#header #top-bar {
		min-height: 97px;	
	}
	
	#header #top-bar #logo {
		margin: 1em 0;
		width: 260px;	
	}
	
	#header #top-bar #navbar li {
		padding: 1.7em 0.7em;
		font-size: 1em;
	}
	
	#header #top-bar #navbar li:hover .sub__nav {
		display: block;
		
	}
	
	#header #top-bar #navbar .sub__nav {
		display: none;
		position: absolute;	
		z-index: 9999;
		padding: 0;
		width: 250px;
		top: 98px;
		left: 0;
		min-height: 200px;
		background: rgba(51,51,51,0.95);
		box-shadow: 0px 1px 5px rgba(1,1,1,0.5);
		border-bottom-left-radius: 3px;
		border-bottom-right-radius: 3px;
		transition: .2s linear all;
		-webkit-transition: .2s linear all;
		-moz-transition: .2s linear all;
		-ms-transition: .2s linear all;
	}
	
	#header #top-bar #navbar .sub__nav:hover {
		color: #8F8F8F;
	}
	
	#header #top-bar #navbar .sub__nav li {
		background: transparent;
		text-align: left;
		margin: 0.5em 0;
		padding: 1em;
		list-style: none;
		transition: .2s linear all;
		-webkit-transition: .2s linear all;
		-moz-transition: .2s linear all;
		-ms-transition: .2s linear all;
	}
	
	#header #top-bar #navbar .sub__nav li:hover {
		color: #fff;	
	}
	
	#header #top-bar #navbar .sub__nav li a {
		color: inherit;
	}
	
	#header #top-bar #navbar .sub__nav li a:hover {
		background: transparent;
		text-decoration: none;
	}
	
	#header #top-bar #navbar .sub__nav li:after {
		display: block;
		content: "";
		position: relative;
		top: 17px;
		width: 100%;
		border-bottom: 1px solid #646464;	
	}
	
		
	#header #top-bar #navbar .sub__nav li:last-of-type:after {
		display: none;	
	}
    
	#header #sub-bar {
		background: rgba(0, 0, 0, 0.4);
		position: absolute;
		z-index: 9998;
		right: 327px;
		width: 480px;
		border-bottom-left-radius: 6px;
		border-bottom-right-radius: 6px;
		color: #fff;
	}
	
	#header #sub-bar #sub-bar__social {
		float: left;
		width: 55%;	
		padding: 0.5em 0 0 0;
	}
	
	#header #sub-bar #sub-bar__social ul li {
		display: inline-block;
		font-size: 2.5em;
		border-radius: 100px;
		height: 45px;
		width: 45px;
		text-align: center;
	}
	
	#header #sub-bar #sub-bar__social a {
		color: #fff;	
	}
    
	#content {
		margin-top: 120px;
		position: relative;
		z-index: 2;
		clear: both;
	}
	
	#content .section__header {
		height: 190px;
	}
	
	#content .section__header h1 {
        margin: 0.8em 0;
		font-size: 40px;
	}
	
	#content .section__header p {
        display: block;
		color: white;
        top: 39px;
	}
	
	#content .section__content {
		min-height: 200px;	
	}
    #content .section__content .more__btn p {
        float: right;
        text-align: center;
        padding: 7px 0 0 0;
		margin: 0 0 1em 0;
        clear: both;
        width: 140px;
        height: 40px;
        border: 1px solid #a3a3a3;
        -webkit-transition: .2s linear all;
        -moz-transition: .2s linear all;
        -ms-transition: .2s linear all;
    }
	
	#content .section__content .more__btn {
			
	}

    
    #content .section__content .more__btn:hover {
        border-color: #cecece;
    }   
    
    #content .section__content .more__btn:hover .btn__nav {
        display: block !important;
    }
    
    #content .section__content .more__btn a {
        display: block;
        position: relative;
        text-decoration: none;
        width: inherit;
        height: inherit;
        color: #333;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
    
    #content .section__content .more__btn span {
        position: relative;
        top: 7px;
    }
    
    #content .section__content .btn__nav {
        display: none;
     	position: relative;
     	background: rgba(1,1,1,0.6);
		margin: -11em 0 0 0;
        color: #fff;
		right: 0px;
		float: right;
		bottom: 29px;
        border-radius: 3px;
        width: 240px;
        padding: 0;
		text-align:right;
    }
	
	#content .section__content .more__btn .btn__nav:after {
		content: "";
		position: absolute;
		display: block;
		background: url('../img/global/dwn-arrow.png');
		background-size:cover;
		opacity: 0.7;
		height: 16px;
		width: 30px;
		top: 144px;
		right: 11px;
	}
   
	
	#content .section__content .btn__nav a {
         color: #fff;   
    }
    
    #content .section__content .btn__nav li {
        list-style: none;   
        padding: 1em 1em;
    }
    
    .page-indicators {
        text-align: center;
        bottom: 5% !important;
    }
    
    .page-indicators .active {
        height: 12px !important;
        background: #fff;
        border: #fff;   
    }
    
    .page-indicators li {
        border-color: #fff;       
    }
	
    
	#content #sidebar {
		float:right;
		height: calc(100vh - 300px);
		width: 350px;	
	}
	
	#content #sidebar #hours-of-operation {
		border: 1px solid #ddd;	
	}
	
	#social {
		position: fixed;
		z-index: 9999;
		background: rgba(51, 51, 51, 0.85);
		border-top-right-radius: 4px;
		border-bottom-right-radius: 4px;
		color: #fff;
		text-decoration: none;
		width: 70px;
		height: auto;
		bottom: 130px;
		left: 0;
	}
	
	#social #social-bar {
		border: none;
		text-align: left;
	}
	
	#social #social-bar ul {
		padding: 0;
        margin: 0;
	}
	
	#social #social-bar ul li {
		color: #fff;
		list-style: none;
		font-size: 1.8em;
        padding: 0.3em 1em;
        width: 0;
        -webkit-transition: .3s linear all;
        -moz-transition: .3s linear all;
        -ms-transition: .3s linear all;
	}	
    
    #social #social-bar li span {
        display: none !important;
        font-size: 0.55em;
        vertical-align: middle;
        position: absolute;
        margin: 0.6em 0 0 0;
        left: 80px;
        width: 100px;
    }
    
	#social #social-bar li:hover {
		background: #5b2121;	
		margin: 0;
        width: 185px;
	}

    #social #social-bar li:hover span {
        display: inline-block !important;   
    }
    
	#footer {
		background: url('../img/global/footer.jpg') #333 no-repeat;
		background-position: 10% 30%;
		color: #fff;
		width: 100%;
		min-height: 300px;	
	}
	
	#footer h1 {
		font-size: 1.6em;	
		text-transform: uppercase;
	}
	
	#footer a {
		color: #8F8F8F;	
		text-decoration: none;
		-webkit-transition: .1s linear all;
		-moz-transition: .1s linear all;
		-ms-transition: .1s linear all;
	}
	
	#footer a:hover {
		color: #fff;	
	}
	
	#footer #return-top {
		position: relative;
		background: #333;
		border: 1px solid rgba(255, 255, 255, 0.8);
		box-shadow: 0 0 4px #000;
		width: 200px;
		padding: 1em;
		text-align: center;
		top: -20px;
		z-index: 100;
		margin: 0px auto;
		transition: .3s linear all;
		
	}
	
	#footer #return-top:hover {
		top: -23px;	
	}
	
	#footer #return-top p {
		margin: 0;	
	}
	
	#footer #directions-btn {
		position: relative;
		margin: 2em 0 0 0;
		width: 200px;
		height: 50px;
	}	
	
	#footer #footer__nav {
		
	}
	
	#footer #footer__nav ul {
		padding: 0;	
		margin: 2em 0;
	}
	
	#footer #footer__nav ul > li {
		margin: 1em 0;	
		font-size: 1em;
		list-style:none;
	}
	
	#footer #bottom__links {
		border-top: 1px solid #989898;	
		margin: 1em 0;
		padding: 1em 0;
	}
	
	#footer #bottom__links ul > li {
		display: inline-block;	
		padding: 1em 0.5em;
	}
	
	#footer #bottom__links #accreditations {
		float: left;
	}	
    
    #footer #bottom__links #accreditations ul li {
        width: 90px;   
    }
	
	#footer #legal-links {
		float: left;
		left: 270px;
		position: relative;	
	}	

	#footer #bottom__links #legal-links ul {
		margin: 0;
	}
	
	#footer #army-logo {
		display: inline-block;
		float: right;
	}

	
}