/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/

/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */

/* #Site Styles
================================================== */
body {
	background-image:url(../images/background.png);
}

.header {
	/*background-image:url(../images/header.png);*/
	height:90px;
	width:100%;
	overflow:visible;
	background: #444444; /* Old browsers */
	background: -moz-linear-gradient(top, #444444 0%, #222222 85%, #333333 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#444444), color-stop(85%,#222222), color-stop(100%,#333333)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #444444 0%,#222222 85%,#333333 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #444444 0%,#222222 85%,#333333 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #444444 0%,#222222 85%,#333333 100%); /* IE10+ */
	background: linear-gradient(to bottom, #444444 0%,#222222 85%,#333333 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444', endColorstr='#333333',GradientType=0 ); /* IE6-9 */
}

.header h1 {
	color:#ffffff;
	text-shadow:1px 1px 1px #000000;
	font-size:28px;
	margin-top:20px;
}

.logo-wrapper {
	position:relative;
	height:90px;
	overflow:visible;
}

.logo {
	width:209px;
	height:120px;
	position:absolute;
	bottom:-20px !important;
	left:0px;
	background-image:url(../images/logo.png);
	z-index:100;
}

.map {
	background-image:url(../images/map.png);
	background-repeat:no-repeat;
	background-position:center top;
	width:100%;
	position:relative;
	overflow:hidden;
	min-height:750px;
	z-index:90;
}

.map .container {
	margin-top:40px;
}

.filter {
	position:absolute;
	background-image:url(../images/filter.png);
	background-position:center top;
	background-repeat:no-repeat;
	width:1920px;
	left:50%;
	margin-left:-960px;
	height:1109px;
	top:0px;
}

.pre-footer {
	position:relative;
	margin-top:-100px;
	height:235px;
	background-image:url(../images/pre-footer.png);
	background-position:center bottom;
	background-repeat:no-repeat;
	overflow:hidden;
	z-index:120;
}

.footer {
	background-color:#222222;
}

.logos {
	text-align:right;
}

.content .text {
	position:relative;
	background-image:url(../images/t.png);
	padding:15px;
	margin-top:15px;
	box-shadow:0px 0px 35px #111111;
	
}
.content .text, .content .text h3, .content .text .description, .content .text .prev {
	-webkit-transition: 1s;
	-moz-transition: 1s;
	-o-transition: 1s;
	-ms-transition: 1s;
	transition: 1s;
}

.content .text h3 {
	margin-top:180px;
	font-size:17px;
	line-height:17px !important;
}

.content .prev {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:180px;
	background-image:url(../images/wims.png);
	background-position:center top;
}

.content .text p {
	font-size:14px !important;
	line-height:18px !important;
}

.content .dnd {
	background-image:url(../images/dnd.png);
}

.content .dndkm {
	background-image:url(../images/dndkm.png);
}

.content .rkmit {
	background-image:url(../images/rkmit.png);
}

.content .FixativeApp {
	background-image:url(../images/FixativeApp.png);
}

.content .doe {
	background-image:url(../images/DOE-EM_fs.png);
}

.content .res {
	background-image:url(../images/doeresearch.png);
}

.content .ecr {
	background-image:url(../images/ecrmodel.png);
}

.content .intl {
	/*background-image:url(../images/IMG_3336.jpg);*/
	background-image:url(../images/doefellows.png);
}

.content .text .description {
	height:0px;
	overflow:hidden;
}

.content:hover .text {
	box-shadow:0px 0px 15px #FC0;
	cursor:pointer;
}

.content:hover .text h3 {
	margin-top:0px;
	color:#FC0;
}

.content:hover .text p {
	color:#ffffff;
}

.content:hover .text .prev {
	height:0px;
}

.content:hover .text .description {
	height:180px;
}

.clouds div {
	background-position:center;
	background-repeat:no-repeat;
	-webkit-animation-iteration-count:infinite;
	-moz-animation-iteration-count:infinite;
	-ms-animation-iteration-count:infinite;
	animation-iteration-count:infinite;
}

.cloud1 {
	position:absolute;
	top:0px;
	left:0px;
	background-image:url(../images/cloud1.png);
	width:1205px;
	height:874px;
	-webkit-animation: move300 170s linear;  
    -moz-animation: move300 170s linear;  
    -ms-animation: move300 170s linear;  
    animation: move300 170s linear;
}

.cloud2 {
	position:absolute;
	top:200px;
	left:1150px;
	background-image:url(../images/cloud2.png);
	width:396px;
	height:347px;
	-webkit-animation: move300 170s linear;  
    -moz-animation: move300 170s linear;  
    -ms-animation: move300 170s linear;  
    animation: move300 170s linear;
}

.cloud3 {
	position:absolute;
	top:400px;
	left:600px;
	background-image:url(../images/cloud3.png);
	width:341px;
	height:305px;
	-webkit-animation: move600 120s linear;  
    -moz-animation: move600 120s linear;  
    -ms-animation: move600 120s linear;  
    animation: move600 120s linear;
}

.cloud4 {
	position:absolute;
	top:150px;
	left:450px;
	background-image:url(../images/cloud4.png);
	width:532px;
	height:535px;
	-webkit-animation: move600 120s linear;  
    -moz-animation: move600 120s linear;  
    -ms-animation: move600 120s linear;  
    animation: move600 120s linear;
}

.cloud5 {
	position:absolute;
	top:400px;
	left:800px;
	background-image:url(../images/cloud5.png);
	width:392px;
	height:321px;
	-webkit-animation: move600 120s linear;  
    -moz-animation: move600 120s linear;  
    -ms-animation: move600 120s linear;  
    animation: move600 120s linear;
}

.logos img {
	margin-top:35px;	
}

.logos .fiu {
	margin-bottom:10px;
}

.modal {
	position:fixed;
	width:100%;
	height:100%;
	left:0px;
	top:0px;
	background-image:url(../images/t.png);
	z-index:150;
}

.popup {
	position:absolute;
	width:920px;
	top:75px;
	left:50%;
	margin-left:-470px;
	padding:20px;
	background-color:#ffffff;
	z-index:200;
}

.popup h1 {
	font-size:35px;
	color:#000000;
}

.popup p {
	color:#333333;
}

.popup .info {
	display:none;
}

.popup .image {
	text-align:right; 
	float:right; 
	margin:10px;
	max-width:345px;
}

.popup .image p {
	font-size:12px;
	font-style:italic;
	line-height:16px;
	color:#666666;
	text-align:center;
}

@-webkit-keyframes move300 {
  0% {
    -webkit-transform: translate(0px,0px);
  }
 
  33% {
    -webkit-transform: translate(300px,15px);
  }
  
  66% {
    -webkit-transform: translate(50px,25px);
  }
  
   100% {
    -webkit-transform: translate(0px,0px);
  }
}

@-moz-keyframes move300 {
  0% {
    -moz-transform: translate(0px,0px);
  }
 
  33% {
    -moz-transform: translate(300px,15px);
  }
  
  66% {
    -moz-transform: translate(50px,25px);
  }
  
   100% {
    -moz-transform: translate(0px,0px);
  }
}

@-ms-keyframes move300 {
  0% {
    -ms-transform: translate(0px,0px);
  }
 
  33% {
    -ms-transform: translate(300px,15px);
  }
  
  66% {
    -ms-transform: translate(50px,25px);
  }
  
   100% {
    -ms-transform: translate(0px,0px);
  }
}
@keyframes move300 {
  0% {
    transform: translate(0px,0px);
  }
 
  33% {
    transform: translate(300px,15px);
  }
  
  66% {
    transform: translate(50px,25px);
  }
  
   100% {
    transform: translate(0px,0px);
  }
}

@-webkit-keyframes move600 {
  0% {
    -webkit-transform: translate(0px,0px);
  }
 
  33% {
    -webkit-transform: translate(150px,64px);
  }
  
  66% {
    -webkit-transform: translate(50px,25px);
  }
  
   100% {
    -webkit-transform: translate(0px,0px);
  }
}

@-moz-keyframes move600 {
  0% {
    -moz-transform: translate(0px,0px);
  }
 
  33% {
    -moz-transform: translate(150px,64px);
  }
  
  66% {
    -moz-transform: translate(50px,25px);
  }
  
   100% {
    -moz-transform: translate(0px,0px);
  }
}

@-ms-keyframes move600 {
  0% {
    -ms-transform: translate(0px,0px);
  }
 
  33% {
    -ms-transform: translate(150px,64px);
  }
  
  66% {
    -ms-transform: translate(50px,25px);
  }
  
   100% {
    -ms-transform: translate(0px,0px);
  }
}
@keyframes move600 {
  0% {
    transform: translate(0px,0px);
  }
 
  33% {
    transform: translate(150px,64px);
  }
  
  66% {
    transform: translate(50px,25px);
  }
  
   100% {
    transform: translate(0px,0px);
  }
}




/* #Page Styles
================================================== */

/* #Media Queries
================================================== */

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {.logo-wrapper {display:none !important; } .header h1 { font-size:18px !important; line-height:18px !important;} .pre-footer {margin-top:0px;} .popup { position:fixed; margin:0px;
	left:5%; width:90%; height:100%; top:0px; overflow:scroll;} }

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 4120px) and (max-width: 767px) { .logo-wrapper {display:none !important; }}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) { .logo-wrapper { display:none !important; }}


/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */

/*	@font-face {
	    font-family: 'FontName';
	    src: url('../fonts/FontName.eot');
	    src: url('../fonts/FontName.eot?iefix') format('eot'),
	         url('../fonts/FontName.woff') format('woff'),
	         url('../fonts/FontName.ttf') format('truetype'),
	         url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
	    font-style: normal; }
*/

.loading { display:none; position:fixed; top:0px; left:0px; width:100%; height:100%; background-image:url(../images/background.png); z-index:300; }

.loading .position {
	position:relative;
	width:400px;
	margin:100px auto;
	text-align:center !important;
	text-shadow:1px 1px 1px #000000;
}

.loading .position h1 {
	font-size:35px;	
	margin-bottom:0px;
}

.loading .position h3 {
	font-size:18px;	
	color:#777777;
}