/* ================================================================ *\
	#Reset
\* ================================================================ */

* { padding: 0; margin: 0; outline: 0; }

/* ================================================================ *\
	#Base
\* ================================================================ */

article,
aside,
figcaption,
figure,
footer,
header,
main,
nav,
section { display: block; }

html,
body { height: 100%; }

html { overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body { min-width: 320px; background: #f7f7f7; font: 19px/1.42 'Roboto', sans-serif; font-weight: 300; color: #fff; -webkit-font-smoothing:antialiased; }

a { text-decoration: none; color: inherit; }
a:hover { text-decoration: underline; }
.intro-content h1 a:hover{text-decoration:none}
.intro-wrapper{  padding-bottom: 37.5%;}

img { border: 0; vertical-align: middle; }
strong { font-weight: bold; }
small { font-size: 80%; }

button,
input,
select,
textarea { font-family: inherit; font-size: inherit; color: inherit; -webkit-font-smoothing:antialiased; }

button,
input[type="button"],
input[type="reset"],
input[type="submit"] { cursor: pointer; }

button::-moz-focus-inner,
input::-moz-focus-inner { padding: 0; border: 0; }

button { overflow: visible; }
textarea { overflow: auto; resize: none; }

table { border-collapse: collapse; border-spacing: 0; }
th,
td { padding: 0; }

h1 { font: 105px/1.2 'Raleway', sans-serif; font-weight: 200; }
h3 { font: 24px/1.2 'Raleway', sans-serif; font-weight: 800; text-transform: uppercase; }

/* ================================================================ *\
	#Helpers
\* ================================================================ */

.alignleft { float: left; }
.alignright { float: right; }
.hidden { display: none; visibility: hidden; }

.clearfix:before,
.clearfix:after { display: table; content: ' '; }
.clearfix:after { clear: both; }

/* ------------------------------------------------------------ *\
	Containers
\* ------------------------------------------------------------ */
.wrapper { padding-top: 24px; overflow: hidden; }
.shell { max-width: 1594px; width: 100%; margin: 0 auto; }

/* ------------------------------------------------------------ *\
	Header
\* ------------------------------------------------------------ */
.header { position: absolute; top: 0; left: 0; right: 0; z-index: 3; height: 24px; box-shadow: 0 15px 24px rgba(0,0,0,.2);  background: #f7f7f7; }

.logo { float: left; background: #fff url(images/logo.png) no-repeat center 39px; width: 179px; height: 179px; background-size: 126px 87px; font-size: 0; line-height: 0; box-shadow: 0 6px 16px rgba(0,0,0, .2);height:149px }
.header .socials { float: right; padding: 16px 22px 7px; margin-top: 24px; background: rgba(0, 55, 88, .5); }

.socials ul { list-style: none outside none; text-align: center; }
.socials li { display: inline-block; vertical-align: top; }
.socials li + li { padding-left: 3px; }
.socials a { font-family: 'Socialico'; color: #dfe6eb; font-size: 55px; 
-webkit-transition: color .3s, opacity .3s; 
        transition: color .3s, opacity .3s; 
}
.socials a:hover { text-decoration: none; color: #fff; }

/* ------------------------------------------------------------ *\
	Intro
\* ------------------------------------------------------------ */
.intro { padding: 110px 0 130px; text-align: center; background: url(images/temp/intro.jpg) no-repeat center 0; background-size: cover;position: fixed;top: 0;left: 0;width: 100%;}
.intro-content { max-width: 960px; margin: 0 auto; }
.intro-content h1 { padding-bottom: 38px; }

.intro-content .lead { position: relative; padding-bottom: 28px; margin-bottom: 34px; }
.intro-content .lead:after { content: ''; position: absolute; top: 100%; left: 120px; right: 120px; height: 2px; background: #f7f7f7; }
.intro-entry { padding: 0 170px; }

.lead { font-size: 25px; line-height: 1.28; font-weight: normal; }
.join{  font-size: 25px;}

/* ------------------------------------------------------------ *\
	Main
\* ------------------------------------------------------------ */
.main { position: relative; padding-top: 56px;  z-index: 1000;background: #f7f7f7; }
.main:before { content: ''; position: absolute; bottom: 100%; left: 0; right: 0; background: url(images/main-head.png) repeat-x center 0; height: 26px; }

/*  Tiles  */
.tiles { overflow: hidden; margin: 0 -20px; padding-bottom: 37px; }
.tile { float: left; width: 33.3333%; padding: 0 20px; position: relative; margin-bottom: 40px; overflow: hidden; 
-webkit-box-sizing: border-box; 
        box-sizing: border-box; 
}
.tile-image { background: #406d85; -webkit-backface-visibility: hidden; }
.tile-image img { width: 100%; height: auto; -webkit-backface-visibility: hidden;
-webkit-transition: opacity .3s; 
        transition: opacity .3s; 
}
.tile-image a { display: block; }

.tile-image .ico-zoom { position: absolute; top: 50%; left: 50%; margin: -55px 0 0 -38px; opacity: 0; 
-webkit-transition: opacity .3s; 
        transition: opacity .3s; 
}

.tile-overlay,
.tile-overlay-actions,
.tile-overlay-label { position: absolute; background: rgba(28, 45, 61, .8); }

.tile-overlay { bottom: -100%; left: 20px; right: 20px; padding: 14px 0 19px; 
-webkit-transition: bottom .4s; 
        transition: bottom .4s; 
}
.tile-socials li + li { padding-left: 8px; }
.tile-socials a { font-size: 65px; line-height: 1; color: #f7f7f7; }
.tile-socials a:hover { opacity: .8; }

.tile-overlay-label,
.tile-overlay-actions { bottom: 100%; }

.tile-overlay-label { left: 30px; padding: 7px 20px 0; border-radius: 9px 9px 0 0; font-size: 12px; font-weight: 500; line-height: 1; }
.tile-overlay-actions { right: 30px; border-radius: 20px 20px 0 0; }
.tile-overlay-actions a { display: block; width: 44px; text-align: center; margin-bottom: -9px; padding-top: 2px; }

.tile:hover .tile-image img { opacity: .2; }
.tile:hover .tile-image .ico-zoom { opacity: 1; }
.tile:hover .tile-overlay { bottom: 0; }
.tile.overlay-hidden:hover .tile-overlay { bottom: -100%; }

/* ------------------------------------------------------------ *\
	Footer
\* ------------------------------------------------------------ */
.footer { padding: 80px 0 160px; border-top: 9px solid #bfc8cb; background: #003a5d; text-align: center; font-weight: normal;  position: relative; }
.footer h3 { padding-bottom: 3px; }

/* ------------------------------------------------------------ *\
	Icons
\* ------------------------------------------------------------ */
[class^="ico-"] { display: inline-block; vertical-align: middle; }
.ico-close { background: url(images/close.png) no-repeat 0 0; width: 13px; height: 14px; }
.ico-zoom { background: url(images/zoom.png) no-repeat 0 0; width: 77px; height: 78px; }

/* ===========================
	# animations
============================ */
.intro-content h1 {
	opacity: 0;
	-webkit-transform: translate(0, -100%);
	    -ms-transform: translate(0, -100%);
	     -o-transform: translate(0, -100%);
	        transform: translate(0, -100%);
}
.intro-entry p {
		opacity: 0;
	-webkit-transform: translate(0, 100%);
	    -ms-transform: translate(0, 100%);
	     -o-transform: translate(0, 100%);
	        transform: translate(0, 100%);
}

.loaded .intro-entry p, 
.loaded .intro-content h1 {
	opacity: 1;
	-webkit-transform: translate(0, 0);
	    -ms-transform: translate(0, 0);
	     -o-transform: translate(0, 0);
	        transform: translate(0, 0);
}


.loaded .intro-content h1 {
	-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
	    -ms-transition: -ms-transform 0.5s, opacity 0.5s;
	     -o-transition: -o-transform 0.5s, opacity 0.5s;
	        transition: transform 0.5s, opacity 0.5s;
}
.loaded .intro-entry p {
	-webkit-transition: -webkit-transform 0.5s 0.6s, opacity 0.5s 0.6s;
	    -ms-transition: -ms-transform 0.5s 0.6s, opacity 0.5s 0.6s;
	     -o-transition: -o-transform 0.5s 0.6s, opacity 0.5s 0.6s;
	        transition: transform 0.5s 0.6s, opacity 0.5s 0.6s;
}
.loaded .intro-entry .lead {
	-webkit-transition: -webkit-transform 0.5s 0.3s, opacity 0.5s 0.3s;
	    -ms-transition: -ms-transform 0.5s 0.3s, opacity 0.5s 0.3s;
	     -o-transition: -o-transform 0.5s 0.3s, opacity 0.5s 0.3s;
	        transition: transform 0.5s 0.3s, opacity 0.5s 0.3s;
}

.tile { opacity: 0; }
.tile {
	-webkit-transition: opacity 1s;
	     -o-transition: opacity 1s;
	        transition: opacity 1s;
}
.tile.in { opacity: 1; }

/*SOCIAL*/
.tile-socials a{position:relative}
.stButton{  position: absolute !important;left: 0 !important;top: 0 !important;width: 100% !important;height: 100% !important;}
.stButton .stLarge{background:none !important}

/*Dropdown*/
.dropdown{background: url('images/dropdown.png') no-repeat;width: 368px; height: 53px; height:65px;cursor:pointer;  margin: 24px 34px 7px;position:relative;display:block;  z-index: 9;margin-left:0;float:right;    margin-right: 146px;float:left;  margin-left: 67.5%;margin-right:0 }
.dropdown div{  width: 285px;float: right;font-size: 23px;line-height: 50px;}
.dropdown:hover div{opacity:.8}
.options{  display:none;position: absolute;background: rgba(2, 26, 42, 0.79);border: 1px solid #90B1C7;width: 303px;height: 374px;overflow-y: auto;padding: 10px 0 35px 15px;left: 0;  top: 65px;  font-size: 15px;font-weight: 900;}
.options li{  color: #fff;display: block; margin-top: 15px;cursor: pointer;}
.options li.selected, .options li:hover{color:#0FA2F9}
.dropdown:hover .options{display:block}
.tile{  width: 33%;}

/* ==========================================================================
	#Media queries
========================================================================== */
/* max-width: 979px */
@media (max-width: 979px) {
	h1 { font-size: 80px; }

	.intro { padding-top: 160px; }
	.intro-entry { padding: 0 20px; }

	.tiles { margin: 0; }
	.tile { width: 50%; padding: 0 10px; margin-bottom: 20px; }
	.tile-overlay { left: 10px; right: 10px; padding: 10px 0 0; }

	.footer { padding: 50px 0px; }
}

/* max-width: 767px */
@media (max-width: 767px) {

	h1 { font-size: 40px; }
	
	.logo { width: 140px; height: 110px; background-position: center bottom 10px; }

	.header .socials { padding: 10px 5px 0; line-height: 1; }

	.intro { padding: 120px 0 60px; }
	.intro-content h1 { padding-bottom: 20px; }
	.intro-entry { padding: 0 10px; }
	.intro-content .lead:after { left: 50px; right: 50px; }

	.main { padding-top: 25px; }

	.tiles { padding-bottom: 10px; }
	.tile { width: 100%; }

	.footer { font-size: 16px; padding: 20px 0; }
	.socials a{  font-size: 40px;}
	
	.intro-wrapper{padding-bottom:0 !important}
	.intro{  position: relative;}
	.dropdown{margin-left: 0;}
	.dropdown div{font-size: 20px;}
}

.intro-entry {padding: 0 15px;}
.ccb-dd {display:block;background:#fff;z-index:1041;position: absolute;width: 923px;height: 508px;background: url('images/popupbg.png') no-repeat;padding: 15px;text-align: center;    max-width: 95%;background-size: contain;margin: 0 auto;left: 0; right: 0;position: absolute;top:25%}
.ccb-dd h3 {font-size:50px;text-transform:none;color:#003A5D; margin-top: 125px;}
.ccb-dd a {text-decoration:none;display:inline;font-weight: bold;color:#555}
.ccb-dd p { padding:20px 0;color:#9A1C1F;    max-width: 70%;margin: 0 auto;font-size: 47px;font-weight: 500;    line-height: 50px;}
.ccb-dd a.button {    font-weight: bold;color: #fff;background: url('images/popup_button.png') no-repeat;background-size: cover;width: 290px;height: 70px;display: inline-block;line-height: 70px;font-size: 28px;cursor:pointer}
.ccb-dd a:hover,.video-vote:hover {text-decoration: none;opacity:.8}
.ccb-dd form span {color: black;display:inline-block;margin: 15px 10px 0 10px}
.ccb-dd form input {margin-right:10px;padding:10px;max-width:100px;}
.ccb-dd table td {text-align: left;font-size:12px;margin: 0;font-size:16px;padding:5px 0 0 3px}
.popup-close {position: absolute;right: 7%;top: 6%;
height:34px;width:34px;background: url('images/popup_close.png') no-repeat;cursor:pointer;    background-size: cover;}
.popup-close:hover{opacity:.8}
.mfp-bg.popup-ready{z-index:1040}
.ico-video {background: url('images/videoico.png') no-repeat 0 0;width: 72px;height: 72px;}
.tile-image .ico-video {position: absolute;top: 50%;left: 50%;margin: -55px 0 0 -38px; opacity: 1;-webkit-transition: opacity .3s; transition: opacity .3s;}

.intro-entry img {
		opacity: 0;
	-webkit-transform: translate(0, 100%);
	    -ms-transform: translate(0, 100%);
	     -o-transform: translate(0, 100%);
	        transform: translate(0, 100%);
			    max-width: 100%;
}

.loaded .intro-entry img {
	opacity: 1;
	-webkit-transform: translate(0, 0);
	    -ms-transform: translate(0, 0);
	     -o-transform: translate(0, 0);
	        transform: translate(0, 0);
}
.loaded .intro-entry img {
	-webkit-transition: -webkit-transform 0.5s 0.6s, opacity 0.5s 0.6s;
	    -ms-transition: -ms-transform 0.5s 0.6s, opacity 0.5s 0.6s;
	     -o-transition: -o-transform 0.5s 0.6s, opacity 0.5s 0.6s;
	        transition: transform 0.5s 0.6s, opacity 0.5s 0.6s;
}

@media (max-width: 979px) {
	.ccb-dd {}
.ccb-dd h3 {margin-top: 50px;    font-size: 45px;}
.ccb-dd p {    font-size: 36px;line-height: 45px;padding: 10px 0;}
.ccb-dd a.button {  width: 240px;height: 60px;display: inline-block;line-height: 60px;font-size: 30px;} 
}
@media (max-width: 767px) {
	.ccb-dd {}
.ccb-dd h3 {margin-top: 30px;    font-size: 23px;}
.ccb-dd p {    max-width: 100%; font-size: 23px;line-height: 27px;    padding: 0;}
.ccb-dd a.button {    width: 180px;height: 50px;display: inline-block;line-height: 50px;font-size: 20px;}
}

@media (max-width: 500px) {
	.ccb-dd {}
.ccb-dd h3 {margin-top: 30px;    font-size: 20px;}
.ccb-dd p {    max-width: 100%; font-size: 20px;line-height: 20px;    padding: 0;}
.ccb-dd a.button { width: 160px;height: 40px;display: inline-block;line-height: 40px;font-size: 17px;}
.popup-close{    height: 25px;width: 25px;}
}

@media (max-width: 350px) {
	.ccb-dd h3 { margin-top: 15px;    font-size: 17px;}
	.ccb-dd p{font-size:16px}
}