/************************************************** GENERAL **************************************************/

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{font-size:100%;font:inherit;padding:0;border:0;margin:0;vertical-align:baseline}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}.clear{clear:both}
.sticky{}.bypostauthor{}.wp-caption{}.wp-caption-text{}.gallery-caption{}.alignright{}.alignleft{}.aligncenter{}

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

body {
  margin: 0;
  padding: 0;
  background: #ebebeb;
  font-family: 'Open Sans', sans-serif;
}

div {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
}

#obsolete {
    display: none;
}

#embed {
	background-color: #fff; 
	text-align: right; 
	font-size: 14px; 
	padding: 5px; 
	font-weight: normal;
}

#embed2 {
	background-color: #fff; 
	text-align: left; 
	font-size: 14px; 
	padding: 5px; 
	font-weight: normal;
}

#embed3 {
	background-color: #fff; 
	text-align: left; 
	font-size: 14px; 
	padding: 5px; 
	font-weight: bold;
}

#wrapper {
  min-width: 1100px;
}

.full-width {
  width: 100%;
}

.content {
  margin: 0 auto;
  width: 984px;
}

.features .fa {
  color: #0098db;
  display: block;
  font-size: 30px;
  margin-bottom: 10px;
}

#follow .fa {
  background: #acacac none repeat scroll 0 0;
  color: #fff;
  display: block;
  font-size: 22px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  width: 40px;
}

a {
  text-decoration: none !important;
  color: #0098db;
}

a:hover {
  color: #00549f;
}

#twitter-feed {padding: 10px;}

/************************************************** NAVIGATION **************************************************/

#navigation {
  	background: #001332;
}

#menu {
  display: table;
  width: 100%;
}

#menu li {
  border-left: 1px solid #ebebeb;
  display: table-cell;
  height: 50px;
  margin: 0;
  padding: 0;
  text-align: center;
  vertical-align: middle;
  width: 180px;
}

#menu li#menu-trigger {
  display: none;
}

#menu li:last-child {
  border-right: 1px solid #ebebeb;
}

#menu li.esa-link {
  width: 255px;
}

#menu li a {
  color: #fff;
  display: block;
  font-family: "NotesESA";
  font-size: 16px;
  height: 100%;
  line-height: 50px;
  text-decoration: none;
  text-transform: uppercase;
  width: 100%;
}

#menu li a:hover {
  background: none repeat scroll 0 0 #002664;
}




/************************************************** BRANDING **************************************************/

#branding {
  background: none repeat scroll 0 0 #002664;
  height: 145px;
  margin: 1px 0;
}

#branding .left, #branding .right {
  background-repeat: no-repeat;
}

#branding .left {
  background-image: url("../images/title.png");
  background-position: left center;
}

#branding .right {
  background-image: url("../images/esa_logo.png");
  background-position: right center;
}






/************************************************** FEATURE **************************************************/

#feature {
  float: left;
  height: auto;
  margin: 1px;
  width: 982px;
}

#feature img {
  width: 100%;
}

/************************************************** SLIDER **************************************************/

#slider {
  background: none;
  height: 552px;
  width: 982px;
  padding: 0;
}

.flexslider.box {
  overflow: visible;
}

.flex-viewport, .slides, .slides li {
  height: 100%;
  width: 100%;
}

.flex-active-slide img {
  width: 100%;
}

#frameWrapper {
  position: relative;
  padding-bottom: 54%;
  padding-top: 20px;
  height: 0;
}

#frameWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#slider ol {
  left: 0;
  margin-left: -40px;
  position: absolute;
  top: 50px;
}

#slider ol li {
  display: block;
  margin-bottom: 10px;
}

#slider ol li a {
  background: none repeat scroll 0 0 #002664;
  border-radius: 50px;
  display: block;
  font-size: 0;
  height: 25px;
  width: 25px;
  cursor: pointer;
}

#slider ol li a.flex-active, #slider ol li a:hover {
  background-color: #ffffff;
  box-shadow: 0 0 0 4px #0098db inset;
}

.flex-direction-nav {
  display: none;
  left: 50%;
  margin-left: -50px;
  margin-top: -50px;
  position: absolute;
  top: 50%;
}

.flex-direction-nav li a {
  display: block;
  font-size: 0;
  position: absolute;
}

.flex-prev {
  width: 0; 
  height: 0; 
  border-top: 60px solid transparent;
  border-bottom: 60px solid transparent;
  border-right: 60px solid #002664;
  margin-left: -530px;
}

.flex-next {
  width: 0; 
  height: 0; 
  border-top: 60px solid transparent;
  border-bottom: 60px solid transparent;
  border-left: 60px solid #002664;
  margin-left: 570px;
}

.flex-prev:hover {
  border-right-color: #ffffff;
}

.flex-next:hover {
  border-left-color: #ffffff;
}





/************************************************** TABLES **************************************************/

.table {
  display: table;
  height: 145px;
  width: 100%;
}

.table .left, .table .right {
  display: table-cell;
  vertical-align: middle;
}

.table .left {
  text-align: left;
}

.table .right {
  text-align: right;
}




/************************************************** BOXES **************************************************/

.box {
  background: none repeat scroll 0 0 #fff;
  float: left;
  height: 326px;
  margin: 1px;
  padding: 30px 20px 20px;
  width: 326px;
  overflow: hidden;
}

.box.half {
  height: 162px;
}

.box.features {
  font-family: NotesESA;
  font-size: 16px;
  height: 132px;
  text-align: center;
  text-transform: uppercase;
}

.box-link {
  color: inherit;
  text-decoration: none;
}

h2 {
  color: #0098db;
  font-family: NotesESA;
  font-size: 30px;
  margin-bottom: 15px;
  text-transform: lowercase;
}

.box p {
  font-size: 18px;
  line-height: 24px;
}

.box span.date, .box p.timePosted, div.timePosted {
  display: block;
  font-size: 14px;
  margin-top: 15px;
}

#countdown, #tracker, #competition {
  padding-top: 25px;
}

#tracker, #competition {
  font-size: 20px;
}

.ct2 {
  line-height: 16px !important;
}

#creditfooter {
 display: none;
}

.box li div {
 line-height: 24px;
}

.headline {
 font-size: 20px;
 line-height: 1.2;
 margin-bottom: 10px;
 display: block;
}



/************************************************** MISSION AND BLOG **************************************************/

#mission {
  background: none repeat scroll 0 0 #002664;
}

#mission > h2, #flickr > h2, #youtube > h2 {
  color: #fff;
}

#mission > p {
  color: #fff;
  font-size: 14px;
}

.feeds-blog > li, .feeds-mission li {
  font-size: 18px;
  line-height: 24px;
}

h3 {
  margin-bottom: 10px;
}




/************************************************** MISSION LOGO **************************************************/

#mission-logo {
  background: url("../images/rosetta_logo.png") no-repeat scroll center center #fff;
}



/************************************************** YOUTUBE **************************************************/

#youtube {
  padding: 0;
}

#youtube h2 {
  margin-left: 20px;
  margin-top: 25px;
  position: absolute;
  color: #ffffff;
}

#youtube > a {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
  height: 100%;
  width: 100%;
  box-shadow: 0 0 100px #000 inset;
}

#youtube > a:before {
  background: url("../images/play.png") no-repeat scroll center center transparent;
  content: "";
  display: block;
  height: 50px;
  left: 50%;
  margin-left: -25px;
  margin-top: -25px;
  position: absolute;
  top: 50%;
  width: 50px;
}

#youtube > a:hover:before {
  transform: scale(0.9);
  -ms-transform: scale(0.9);
  -webkit-transform: scale(0.9);
}

#youtube > iframe {width: 100%;}




/************************************************** FLICKR **************************************************/

#flickr {
  padding: 0;
}

#flickr ul {
  height: 100%;
}

#flickr li {
  display: block;
  height: 100%;
  width: 100%;
}

#flickr a {
  display: block;
  height: 100%;
  overflow: hidden;
  width: 100%;
}

#flickr img {
  min-height: 100%;
  min-width: 100%;
}

#flickr > h2 {
  margin-left: 20px;
  margin-top: 30px;
  position: absolute;
  z-index: 99;
}

.flick-container {
  height: 326px; 
  overflow: hidden; 
  width: 326px; 
} 
.flick-container iframe, .flick-container object, .flick-container embed {
  position: absolute; 
  width: 326px; 
  height: 326px;
}
/************************************************** FACEBOOK **************************************************/

#facebook .overlay {
  display: block;
  float: left;
  height: 90px;
  margin-right: 20px;
  overflow: hidden;
  width: 90px;
}

#facebook .overlay:before {
  font-size: 50px;
  line-height: 90px;
}

#facebook .overlay > img {
  min-height: 90px;
  min-width: 90px;
}

.more {
  position: absolute;
  bottom: 20px;
  right: 20px;
}



/************************************************** EVENTS **************************************************/

#events li {
  border-left: 2px solid #0098db;
  font-size: 18px;
  margin: 20px 0;
  padding: 0 0 0 10px;
}

#events .date {
  margin-bottom: 10px;
}

.date {
 color: #959595;
 font-size: 13px !important;
 margin-top: 15px;
}

/************************************************** TUMBLR **************************************************/

#tumblr img {
  max-width: 100%;
}


/************************************************** PARTNERS **************************************************/

#partners ul {
  display: table;
  margin-top: 25px;
  width: 100%;
}

#partners li {
  display: table-cell;
  vertical-align: middle;
}



/************************************************** FOLLOW **************************************************/

#follow ul {
  margin-top: 25px;
}

#follow li {
  display: inline-block;
  float: left;
}

#follow li {
  display: inline-block;
  float: left;
  margin-right: 7px;
}

#follow li:last-child {
  margin-right: 0;
}

.fa.fa-twitter:hover {
    background: none repeat scroll 0 0 #00aced !important;
}

.fa.fa-facebook:hover {
    background: none repeat scroll 0 0 #3b579d !important;
}

.fa.fa-flickr:hover {
    background: none repeat scroll 0 0 #ff0084 !important;
}

.fa.fa-youtube:hover {
    background: none repeat scroll 0 0 #fa212e !important;
}

.fa.fa-instagram:hover {
    background: none repeat scroll 0 0 #efc042 !important;
}

.fa.fa-tumblr:hover {
  background: #37465d none repeat scroll 0 0 !important;
}





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

footer {
  background: none repeat scroll 0 0 #002664;
  clear: both;
  height: 145px;
  margin: 2px 0 0;
}

#footer {
  background: none repeat scroll 0 0 #002664;
  clear: both;
  height: 145px;
  margin: 2px 0 0;
}

#connect {
  padding-left: 155px;
}

#connect:before {
  color: #ffffff;
  content: "connect with us";
  display: block;
  font-family: NotesESA;
  margin: 8px 0 0 -150px;
  position: absolute;
  text-transform: uppercase;
}

#connect a {
  display: block;
  line-height: 0;
}

#connect li {
  display: inline-block;
  float: left;
  margin: 0 10px 0 0;
}

#footer .right span  {
  color: #e6e7e8;
  font-size: 14px;
  margin-right: 5px;
}

footer .right span {
  color: #e6e7e8;
  font-size: 14px;
  margin-right: 5px;
}

.overlay {
  position: relative;
}

.overlay:hover:before {
  background: none repeat scroll 0 0 #0098db;
  color: #fff;
  content: "\2192";
  display: block;
  font-family: NotesESA;
  font-size: 30px;
  height: 100%;
  left: 0;
  line-height: 32px;
  position: absolute;
  text-align: center;
  top: 0;
  width: 100%;
}









/************************************************** MOBILE **************************************************/

@media only screen and (max-width : 1024px) {

#wrapper {
  width: 100%;
  min-width: 320px;
  max-width: 1024px;
}

.content {
  width: 100%;
}

#navigation {
  background: none repeat scroll 0 0 #001332;
  box-sizing: border-box;
  height: 51px;
  overflow: hidden;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

#navigation:hover12 {
  height: 305px;
}


#menu li {
  border-bottom: medium none !important;
  border-left: medium none !important;
  border-right: medium none !important;
  border-top: 1px solid #ebebeb;
  display: block;
  height: 50px;
  margin: 0;
  padding: 0;
  text-align: center;
  vertical-align: middle;
  width: 100% !important;
}

#menu li#menu-trigger {
  display: block;
}

#branding .table {
  padding: 0 20px;
}

#branding .left, #branding .right {
  background-repeat: no-repeat;
}

#branding .left {
  background-image: url("../images/title_m.png");
  background-position: center left;
}

#branding .right {
  background-image: url("../images/esa_logo_m.png");
  background-position: center right;
}

#slider, #feature {
  height: auto;
  width: 100%;
}

#feature {
  margin: 1px 0;
}

#frameWrapper {
  padding-bottom: 56%;
  padding-top: 0;
}

#embed {
	display: none;
}

#embedLink {
	display: none;
}

.flex-active-slide iframe {
  width: 100%;
  height: auto;
}

.flex-control-nav {
  display: none;
}

.flex-direction-nav {
  display: block;
  height: 100%;
  left: 0;
  margin-left: 0;
  margin-top: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.flex-prev, .flex-next {
  border-bottom: 60px solid transparent;
  border-top: 60px solid transparent;
  height: 0;
  margin-top: -50px;
  margin-right: 0;
  margin-left: 0;
  top: 50%;
  width: 0;
  visibility: hidden;
}

.flex-prev {
  left: 30px;
  border-right: 60px solid #002664;
}

.flex-next {
  right: 30px;
  border-left: 60px solid #002664;
}

.box {
  height: auto;
  width: 100%;
  margin: 1px 0;
}

.table .left, .table .right {
  padding: 0 15px;
}

#flickr img {
	display: block;
	margin-left: auto;
	margin-right: auto;
	min-width: 326px;
	min-height: 326px;
}

.flick-container {
  width: 100%;
  background-color: #000;
}

.flick-container iframe, .flick-container object, .flick-container embed {
  height: 100%;
  width: 100%;
}

#footer {
  height: auto;
}

#footer .table {
  height: 180px;
}

#footer .left, #footer .right {
  display: block;
  float: left;
  margin: 15px;
  clear: both;
}

#connect {
  padding-left: 0;
  padding-top: 50px;
}

#connect:before {
  margin: -30px 0 0;
}

#footer .right span {
  padding-bottom: 20px;
}

}


@media screen and (-webkit-min-device-pixel-ratio: 1.5) {

#branding .left {
  background-image: url("../images/title_m2.png");
  background-size: 100px 39px;
}

#branding .right {
  background-image: url("../images/esa_logo_m2.png");
  background-size: 100px 37px;
}

}