@charset "utf-8";
/* CSS Document */

body{ font-family:"Segoe UI", Sans-Serif; color:#757575; margin:0px; padding:0px; }
h1 {color:#FFFFFF; font-size:36px; line-height:1em; font-weight:500; margin-top:0; }
h1 span{ font-size:24px; color:#ffd3d3; }
h2 { line-height:1.5em; padding:0px; margin:0px;}
h3 { color:#d04d6f; font-size:30px; padding:0px; margin:0px; font-weight:400; line-height:1.5em;}
h4 { color:#ffffff; font-size:18px; font-weight:600; line-height:1.0em; padding:0px 0px 20px 0px; margin:0px; }
h5 { font-size:25px; color:#6ea6ec; font-weight:400; padding:0px; margin:0px; line-height:1.5em;} /*Month Day Style*/
h6 {color:#868686; font-size:24px; font-weight:200; margin:0px; padding:0px; }  /*Year Style*/
p {line-height:1.5em; margin:0px 0px 20px 0px; font-size:16px;}
sup {font-size:12px; }
strong { font-weight:bold; font-stretch:none;}
a { color:#d04d6f; text-decoration:none;}
a:hover { text-decoration:underline;}
a:active {}
ol { color:#363636; }
ul { padding:0px 0px 0px 0px; margin:0px 0px 0px 0px;}
ul li{ padding:0px 0px 0px 0px; margin:0px 0px 0px 0px; }
em { color:#6ea6ec; font-style:normal; font-weight:600; }
.caption{ color:#ebf4fe; font-size:14px; line-height:1.5em;}
.merienda {font-family: "Merienda", cursive;font-optical-sizing: auto; font-weight: 400; font-size:4rem; font-style: normal; color:#a52c4b; }
.rock-salt-regular {font-family: "Rock Salt", cursive; font-weight: 400; font-size:3.75rem; font-style: normal; color:#a52c4b; }

.content{ width:700px; margin:0 auto; padding:0px 50px 0px 50px; height:auto; overflow:hidden; }
.wideContent{ width:960px; margin:0 auto; height:auto; overflow:hidden; margin-top:60px;}
.reset{ clear:both; }
.disclaimer{ background-color:#ffd2d2; color:#983133; border:1px solid #983133; padding:1rem; display:block; width:100%; height:auto; overflow:hidden; box-sizing:border-box;  }


#headerArea{ width:100%; display:block; position:relative; }
#header{ width:100%; display:block; background-color:#993232; padding-top:35px; } /*b13a3a*/
#mainNavigation{ width:100%; display:block; background-color:#6ea6ec; border-top:1px solid #FFFFFF; border-bottom:1px solid #FFFFFF; } /*82b6f6*/
#mainNavigation ul{ padding:0px 0px 0px 0px; margin:0px 0px 0px 0px; }
#mainNavigation li{ list-style-type:none; position:relative; z-index:10; }
#mainNavigation li a { display:block; vertical-align:center; float:left; height:28px; font-size:18px; font-weight:500; color:#FFFFFF; text-align:center; padding:8px 12px 8px 12px; cursor:pointer; }
#mainNavigation li a:hover { background-color:#5794e0; text-decoration:none; }
.mobile-menu{ display:none; float:left; height:28px; font-size:18px; font-weight:500; color:#FFFFFF; text-align:center; padding:8px 0px 8px 0px; border-bottom:1px solid #FFFFFF; cursor:pointer;}

#featureArea{ width:100%; height:auto;  }
#feature{ height:auto; width:100%; background-color:#e2edfb; position:relative; margin:0 auto; text-align:center; }
#feature .content{ margin:0 auto; padding:0px 0px 0px 0px; height:auto; overflow:hidden; width:100%;}
.featuredPicture{ width:100%; z-index:0; height:100%;  }
#featureCaption{ background:url('../images/Design/CaptionGradient.png') bottom repeat-x; height:175px; width:100%; position:absolute; bottom:0; margin:0; padding:0px; float:none;}
#featureCaption .content{width:700px; margin:0 auto; padding:60px 50px 0px 50px; height:auto; overflow:hidden; text-align:left;  }
#featureCaption .content h4, #featureCaption .content p{ text-shadow: 0 0.063rem 0.125rem rgba(0,0,0, 0.75); }
#globe{ position:absolute; width:175px; height:175px; bottom:-1rem; left:4rem; margin:0 auto; z-index:1; }

#mainContentRegion{ width:100%; display:block; margin-top:60px; clear:both; }
#mainContentRegion .content ul{ margin:10px 0px 10px 40px; }
#mainContentRegion .content ul li{ margin-bottom:10px; }
#mainContentRegion .content ol li{ margin-bottom:10px; }
#alternativeRepresentation{ display:none; }
#interactiveMap{ width:960px; height:500px; overflow:hidden; position:relative;}

#newsEventsArea{ width:100%; display:block; background-color:#c9e1ff; padding:50px 0px 60px 0px; margin-top:60px;}
#newsEventsArea .left{ width:435px; float:left; vertical-align:top; height:auto; padding:50px 0px 10px 0px;}
#newsEventsArea .right{ width:215px; float:left; vertical-align:top; height:auto; background-color:#FFF; display:block;  padding:50px 25px 40px 25px;}
.newsItem{ border-left:5px solid #FFFFFF; padding:0px 50px 5px 25px; margin:25px 0px 50px 0px; }
.newsItem p{ color:#626262; font-weight:500; margin:0px; padding:0px; }
.eventItem{ clear:both; height:auto; padding-bottom:25px; }
.eventDetails{  }
.eventDetails p{  font-weight:500; margin:0px; padding:0px; }
.eventYear{ height:100px; display:block; overflow:hidden; text-align:right; }
.eventMonthDay{ height:72px; display:block; overflow:hidden; position:relative; top:-100px; text-align:left; padding:28px 0px 0px 0px; }

#LecturesArea{ width:100%; display:block; background-color:#c9e1ff; padding:50px 0px 60px 0px; margin-top:60px;}
#LecturesArea .left{ width:435px; float:left; vertical-align:top; height:auto; padding:50px 0px 10px 0px;}
#LecturesArea .right{ width:215px; float:left; vertical-align:top; height:auto; background-color:#FFF; display:block;  padding:50px 25px 40px 25px;}

.action-button-wrapper{ display:block; margin:1rem 0; padding:0; list-style-type:none; width:100%; float:left; }
.action-button{ display:table; background-color:#0b52a8; color:#FFF; border-radius:0.5rem; border:1px solid #074188; list-style-type:none; margin:0 0.5rem 0.5rem 0; padding:0.75rem 1rem; box-sizing:border-box; float:left; }
.action-button:hover{ background-color:#074188; }
.action-button a{ color:#FFF; text-decoration:none; }
.microbes-wrapper{width:100%; display:inline-block; border-top:1px solid #eee; border-bottom:1px solid #eee; padding:1rem 0; margin:1rem 0; }
.microbes-matter-figure{ width:10rem; float:left;  }
.microbes-matter-figure:nth-child(2){ width:20rem; float:right; }
.microbes-matter-figure img{ width:100%; height:auto; max-height:15rem; }

/*consulting triangle*/

#consultingTriangleArea{ width:100%; height:450px; display:none; overflow:hidden; }
#consultingTriangleArea .largeFont{ font-size:36px; }
#consultingTriangleArea p { font-size:18px; color:#0b52a8; font-weight:400;}
#consultingTriangleArea .top{ width:100%; height:50px; text-align:center; float:left; padding-top:50px; opacity:0; }
#consultingTriangleArea .left{ width:20%; height:350px; float:left; position:relative; padding:0px 5% 0px 0px; opacity:0;}
#consultingTriangleArea .left p{ position:absolute; bottom:0; padding:0px 0px 20px 0px; }
#consultingTriangleArea .right{ width:20%; height:350px; float:left; position:relative; padding:0px 0px 0px 5%; opacity:0;}
#consultingTriangleArea .right p{ position:absolute; bottom:0; padding:0px 0px 20px 0px; }
#consultingTriangleArea .middle{ width:50%; height:300px; float:left; position:relative; margin-bottom:50px; }
#topTriad{ z-index:0; opacity:1; }
#topTriad img{ position: absolute; left: 50%; -webkit-transform: translate(-50%, 0%); transform: translate(-50%, 0%);}
#leftTriad{ z-index:0; opacity:1; position:absolute; bottom:0; left:0; }
#rightTriad{ z-index:0; opacity:1; position:absolute; bottom:0; right:0; }
#centralGlobe{ z-index:1; opacity:1; position:absolute; bottom:-4px; left: 50%; -webkit-transform: translate(-50%, 0%); transform: translate(-50%, 0%); }
#topNumber1{ position:absolute; top:30px; z-index:-1; width:100%; text-align:center; }
#topNumber2{ position:absolute; bottom:-15px; left:10px; z-index:-1; width:40%; text-align:left; padding:0px 0px 0px 10%; }
#topNumber3{ position:absolute; bottom:-15px; right:10px; z-index:-1; width:40%; text-align:right; padding:0px 10% 0px 0px;}
.ghostableTriad{ cursor:pointer;}

#footerArea{ width:100%; display:block; background-color:#f2f2f2; padding:50px 0px 60px 0px; margin-top:80px; }
#footerArea .left{ width:50%; text-align:left; vertical-align:top; float:left; }
#footerArea .right{ width:50%; text-align:right; vertical-align:top; float:left; }
#footerArea .full{ width:100%; text-align:left; float:left;}


/*Map*/

.responsive-video{ margin: 1rem 0; padding: 0; width: 100%; overflow: hidden; }
.responsive-video-wrapper{ position: relative; height: 0; margin: 0; padding-bottom: 56.35%; }
.responsive-video iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; }
.responsive-video-caption{ margin-top: -1rem; margin-bottom: 1rem; padding:0.5rem 1rem; border-bottom:0.063rem solid #CCC; border-left:0.063rem solid #CCC; border-right: 0.063rem solid #ccc; border-radius:0 0 0.3rem 0.3rem; background-color:#fdfdfd; }



@media only screen and (min-width: 1900px) 
{
	#feature{ height:450px; overflow:hidden; margin:0 auto;  }
	#feature .content{ width:1900px;}
	.featuredPicture{ width:1900px; z-index:0; height:auto;  }
	#featureArea{ width:100%; height:auto; }
	#featureCaption{ width:1900px;  }
	#featureCaption .content{ width:700px;  }
	
	.full-size-image{ width:100%; height:auto; }
	
}

@media only screen and (max-width: 1899px)
{
	#feature{ height:450px; overflow:hidden;   }
	.featuredPicture{ width:100%; z-index:0; height:auto;  }
	
	.full-size-image{ width:100%; height:auto; }
	
}


@media only screen and (max-width: 1200px) 
{
	#feature{ height:auto; width:100%;  }
	.featuredPicture{ width:100%; height:100%;  }
	#globe{ position:absolute; top:20px; left:25px; width:30%; height:auto; }
	#globe img{ width:50%; height:auto }
	#header .content{ width:80%; padding:0% 0% 0% 20%; }
	
	.full-size-image{ width:100%; height:auto; }
}

@media only screen and (max-width: 960px) 
{
	h1 { font-size:30px; }
	h1 span{ line-height:1.5; font-size:20px;}
	#mainNavigation li a { font-size:16px; font-weight:500; padding:8px 15px 8px 15px; }
	#mainNavigation .content{ padding:0px 25px 0px 25px; }
	#mainContentRegion .content{ width:80%; padding:0% 10% 0% 10%; }
	#newsEventsArea .content{ width:80%; padding:0% 10% 0% 10%; }
	#newsEventsArea .left{ width:60%; padding:50px 0px 10px 0px; }
	#newsEventsArea .right{ width:30%; padding:50px 15px 40px 15px; }
	#featureCaption { height:45%; background:url('../images/Design/CaptionGradient.png') top repeat-x; }
	#featureCaption .content{ width:80%; padding:5% 10% 1% 10%; }
	
	#LecturesArea .content{ width:80%; padding:0% 10% 0% 10%; }
	#LecturesArea .left{ width:60%; padding:50px 0px 10px 0px; }
	#LecturesArea .right{ width:30%; padding:50px 15px 40px 15px; }
	
	
	.eventYear{ height:80px; display:block; overflow:hidden; text-align:right; }
	.eventMonthDay{ height:72px; display:block; overflow:hidden; position:relative; top:-80px; text-align:left; padding:28px 0px 0px 0px; }
	.eventDetails p{ font-size:14px; font-weight:500; }
	
	.newsItem p{ font-size:14px; }
	#footerArea .content{ width:80%; padding:0% 10% 0% 10%; }
	#footerArea img{ width:70%; height:auto }
	
	#interactiveMap{ display:none; }
	#alternativeRepresentation{ display:block; }
	
	.full-size-image{ width:100%; height:auto; }
}

@media only screen and (max-width: 800px) 
{
	#featureCaption { height:55%;}
	#featureCaption .content{ width:80%; padding:5% 10% 1% 10%; }
	h4 { font-size: 16px; padding:0px 0px 10px 0px; }
	h3 { font-size: 26px; }
	.caption { line-height:1.25; }
	#mainNavigation li a { font-size:16px; font-weight:500; padding:8px 8px 8px 8px;  }
	#mainNavigation .content{ padding:0% 5% 0% 5%; width:90%; }
	
	#consultingTriangleArea { height:auto; width:100%; display:block; overflow:hidden; margin:0 auto; }
	#consultingTriangleArea .top{ float:none; display:block; padding-top:0px; height:50px; text-align:center; overflow:auto; }
	#consultingTriangleArea .left{ float:none; height:auto; padding:0px 0px 0px 0px; opacity:0; display:none;  }
	#consultingTriangleArea .right{ float:none; height:auto; padding:0px 0px 0px 0px; opacity:0; display:none; }
	#consultingTriangleArea .middle{ width:350px; height:auto; float:none; display:block; position:relative;}
	
	#consultingTriangleArea .largeFont{ font-size:36px; }
	#consultingTriangleArea p { font-size:18px; color:#0b52a8; font-weight:400;}

	#leftTriad{ z-index:0; opacity:1; position:inherit; bottom:0; left:0; }
	#topTriad{ z-index:0; opacity:1; width:100%; height:153px; display:block; overflow:auto; margin-top:0px; }
	#topTriad img{ position: absolute; left: 50%; -webkit-transform: translate(-50%, 0%); transform: translate(-50%, 0%);}
	
	#rightTriad{ z-index:0; opacity:1; position:absolute; bottom:0; right:0;}
	#centralGlobe{ z-index:1; opacity:1; position:absolute; bottom:-4px; left: 50%; -webkit-transform: translate(-50%, 0%); transform: translate(-50%, 0%); }
	
	#interactiveMap{ display:none; }
	#alternativeRepresentation{ display:block; }
}

@media only screen and (max-width: 600px) 
{
	h1 { font-size:24px; line-height:1.0; }
	h1 span{ line-height:1.5; font-size:16px;}
	h3 { font-size:24px; }
	p { font-size:16px; }
	#globe { top:10px; left:15px; }
	#globe img{ width:60%; height:auto }
	#header .content{ width:74%; padding:0% 1% 0% 25%; }
	#header { height:139px; padding-top:25px;}
	
	#mainNavigation{ width:100%; display:block; background-color:#6ea6ec; border-top:1px solid #FFFFFF; border-bottom:1px solid #FFFFFF; text-align:center; }
	#mainNavigation li a { font-size:14px; font-weight:500; padding:8px 8px 8px 8px;  }
	#mainNavigation .content{ width:94%; padding:0% 3% 0% 3%; }
	#mainContentRegion img{ width:100%; height:auto; }
	
	/*#newsEventsArea{ background-color:#FFFFFF; }
	#newsEventsArea .content{ width:100%; padding:0%; }
	#newsEventsArea .left{ background-color:#c9e1ff; width:80%; padding:10% 10% 0% 10%; }
	#newsEventsArea .right{ width:80%; padding:10% 10% 0% 10%; float:left; text-align:center; }*/
	
	.eventMonthDay{ height:72px; display:block; overflow:hidden; position:relative; top:-80px; left:-140px; text-align:center; padding:28px 0px 0px 0px; }
	.eventDetails p{ font-size:14px; font-weight:500; }
	.eventYear{ text-align:center; position:relative; left:70px; }
	
	.newsItem p{ font-size:16px; }
	
	#featureCaption{ background:#365070; height:auto; width:100%; position:relative; margin:0; padding:0px; float:none;}
	#featureCaption .content{ width:80%; padding:4% 10% 2% 10%; }

	#consultingTriangleArea img{ width:auto; height:auto;}
	
	#topTriad img{ position: absolute; left: 50%; -webkit-transform: translate(-50%, 0%); transform: translate(-50%, 0%);}

	
	#interactiveMap{ display:none; }
	#alternativeRepresentation{ display:block; }
	
	.action-button{ width:100%; display:block; }
	
	

}

@media only screen and (max-width: 480px) 
{
	#header{ height:auto; padding:20px 0px 20px 0px;}
	
	#headerArea{ height:auto;}
	#mainNavigation{ width:100%; display:block; background-color:#6ea6ec; height:auto; border-top:1px solid #FFFFFF; border-bottom:none;  text-align:center; }
	#mainNavigation .content{ width:100%; padding:0% 0% 0% 0%; }
	#mainNavigation li a { display:block; float:none; height:28px; font-size:18px; font-weight:500; color:#FFFFFF; text-align:center; padding:8px 0px 8px 0px; border-bottom:1px solid #FFFFFF; cursor:pointer; }
	.mobile-menu{float:none; }
	.js-mobile-menu-expanded{ display:block; }
	#globe { top:25px; }
	#globe img{ width:65px; height:65px; }
	h1 { font-size:22px; }
	.eventMonthDay{ left:-40px;}
	.eventYear{ left:20px;}
	.newsItem{ padding:0px 0px 5px 25px; }
	
	#interactiveMap{ display:none; }
	#alternativeRepresentation{ display:block; }
	
}

@media only screen and (max-width: 350px) 
{
	#header .content{ width:64%; padding:0% 1% 0% 35%; }
	p { font-size:14px; }
	
	#interactiveMap{ display:none; }
	#alternativeRepresentation{ display:block; }
}