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

/*CSS RESET */
* {
margin:0;
padding:0;
list-style:none;
vertical-align:baseline;
}

a, a:hover {
	text-decoration:none !important;
}

.texto-modal{
	color:#666;
}

.mini-text {font-size:0.8em; color:#ccc;}


h1 {
	font-family: 'proxima_novablack', sans-serif !important;
	font-size: 5em !important;
}

h2 {
	font-family: 'proxima_nova_rgbold', sans-serif !important;
	font-size: 4em !important;
	line-height:0.5 !important;
}

h3 {
	font-family: 'proxima_novalight', sans-serif !important;
	font-size: 1.5em !important;
}

h4 {
	font-family: 'proxima_nova_rgbold', sans-serif !important;
	font-size: 2em !important;
	color: #dae000 !important;
}

h5 {
	font-family: 'proxima_nova_rgbold', sans-serif !important;
	font-size: 1.5em !important;
}

h6 {
	font-family: 'proxima_nova_rgbold', sans-serif !important;
	font-size: 1em !important;
	color: #aaa !important;
}


/*END of CSS RESET */

body{
	margin: 0 !important;
	padding: 0 !important;
	background: url(../img/bg.jpg) repeat-x #0A0422 !important;
	font-family: Arial, Helvetica, sans-serif;
	color: #fff !important;
}

header {
	width: 100%;
	height: auto;
	background:#000;
	margin: 0;
	padding: 0;
	border-bottom: 5px solid #DAE200;
}

.clear{
	clear:both;
}

#head-container {
	width: 1200px;
	height: auto;
	margin: 0 auto;
	padding: 12px 0;
}

#logo{
	background:url(../img/logo-eutleta-noturno.svg) no-repeat;
	background-size: 100%, 100%, auto;
	text-indent: -9999px;
	width: 360px;
	height: 64px;
	float:left;
}

#info{	margin: 0 20px;	float:right;}
h2.info-data{ font-family:'proxima_novablack', sans-serif; font-size: 2em !important; line-height: 1 !important; color: #dae000 !important;}
.info-local{ font-family: 'proxima_nova_rgregular', sans-serif; color: #fff; text-transform:uppercase;}
.arrow-box { display:block; padding: 0 10px; margin: 0 12px; max-height: 48px; background: #444; border-radius: 5px; -webkit-border-radius: 5px;-moz-border-radius: 5px;-o-border-radius: 5px; float:right;}
.arrow-box:hover { background: #dae000;}

#social{ position: fixed; top:50%; left: 0;}
#social nav ul{ display:table; background: #000;}
#social nav ul li{display:block; padding: 10px;}
#social nav ul li:hover {background:#dae000;}

#container {width: 1200px; margin: 0 auto;}

#main-menu { font-family: 'proxima_nova_rgbold', sans-serif;text-transform:uppercase;}
#main-menu ul { display:table;}
#main-menu ul .current-link {display: none;}
#main-menu ul li {display:block; float:left; margin: 20px 0; border-right: solid 2px #dae000;}
#main-menu ul li:last-child {border:none;}
#main-menu ul li a{ color: #dae000 !important; padding: 0 15px;}
#main-menu ul li a:hover{ color: #fff !important; text-decoration: none;}

.to-right { float:right; width: auto; height:auto;}
.to-left { float:left; width: auto; height:auto;}
.to-up a{position: fixed; bottom: 5px; right: 5px; display:block; width: 48px; height:48px; background:url(../img/up.png) no-repeat; opacity: 0.5;} 
.left-half-box {clear: both; float: left; margin: 5px 0; width: 595px; height: 292px; padding: 5px; border-radius: 5px; -webkit-border-radius: 5px;-moz-border-radius: 5px;-o-border-radius: 5px; background: #ccc; }

.right-full-box {float: right; margin: 5px 0; width: 595px; height: 595px; padding: 15px; border-radius: 5px; -webkit-border-radius: 5px;-moz-border-radius: 5px;-o-border-radius: 5px;}
.left-full-box {float: left; margin: 5px 0; width: 595px; height: 595px; padding: 15px; border-radius: 5px; -webkit-border-radius: 5px;-moz-border-radius: 5px;-o-border-radius: 5px;}

.left-half-box a, .right-full-box a{ color: #fff !important;}

#box-overview {background:url(../img/bg-box-overview.jpg) no-repeat; background-position:center; background-size: 595px, 595px, auto; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; padding-top: 475px;}

#box-percurso { background:url(../img/bg-box-percurso.jpg) no-repeat; background-position:center; background-size: 595px, 292px, auto; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; padding-top: 175px;}

#box-patrocinadores {background: url(../img/banner_parceiros.gif) no-repeat #fff; background-position:center; border: 1px solid #ccc;}

#box-overview:hover, #box-percurso:hover { background-size: 625px, 625px, auto; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out;}

#patrocinio { width: auto; max-width: 920px; margin: 0 auto;}
#patrocinio nav ul { display: table; margin:}
#patrocinio nav ul li{ float: left; margin: 20px 15px; text-align:center;}
#patrocinio nav ul li img{margin: 0 10px;}

#prox-etapas { width: 800px; height: auto; margin: 20px 0; padding: 0 15px 15px 0;}
.img-etapas {border-radius: 5px; -webkit-border-radius: 5px;-moz-border-radius: 5px;-o-border-radius: 5px; float: left; margin-right: 20px;}
.box-etapas { width: 100%; height: auto; border-bottom: #dedede solid 1px; padding: 40px 0;}
#prox-etapas aside div a, #prox-etapas aside div h5{color: #dae000!important;}
#prox-etapas .box-etapas ul {display: table;}
#prox-etapas .box-etapas ul li{display: block; float: left; margin: 0 10px 0 0;}
.mob-on {display:none;}
.apaga-etapa {display:none;}
.to-confirm {color:#999 !important;}

.modal-body{height: 640px!important; overflow-y:scroll;}

iframe{border: 0;}

#sobre-etapas{ width: 390px; height: auto; margin: 20px 0; border-radius: 5px; -webkit-border-radius: 5px;-moz-border-radius: 5px;-o-border-radius: 5px; border: 1px solid #dae000; text-align:center; color:#fff;}
#sobre-etapas h4{display:block; padding: 10px; width: 100%; height: auto; background: #dae000; margin: 0 !important; color:#000 !important;}
#sobre-etapas h5 {color: #dae000!important;}
#sobre-etapas p {margin: 10px;}
.sobre-item {width:165px; margin:10px; float:left; border-radius: 5px; -webkit-border-radius: 5px;-moz-border-radius: 5px;-o-border-radius: 5px; background: #171133;}
.sobre-item:hover {background: #241e3e;}
.sobre-item > figure > a > img {width:100%; border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0;-moz-border-radius: 5px 5px 0 0;-o-border-radius: 5px 5px 0 0;}
.sobre-item > a > h5 {font-size: 1.28em !important;}
.botao-active {display: block; background:#dae000; color: #000; max-width: 180px; margin: 15px auto; text-align:center; border-radius: 5px; -webkit-border-radius: 5px;-moz-border-radius: 5px;-o-border-radius: 5px; font-family: 'proxima_nova_rgbold', sans-serif !important; text-transform:uppercase !important; font-size:1.5em;}
.botao-active:hover {background:#bcc103; color:#000 !important;}

#sobre-kits div {background: #fff; margin: 5px 0; padding: 0; border-radius: 5px; -webkit-border-radius: 5px;-moz-border-radius: 5px;-o-border-radius: 5px; border: 1px solid #4D6A79;}
#sobre-kits div div {border:none; text-align:center; margin: 0; padding: 0 10px;}
#sobre-kits h5{display:block; padding: 10px; width: 100%; height: auto; background: #4D6A79; margin: 0 !important; color: #fff !important;}
#sobre-kits div div ul{width: 380px; margin: 0 auto;}
#sobre-kits div div ul li {display:block; padding: 5px 10px; width: 180px; margin: 15px 5px; float: left; background:#efefef; text-align:center; border-radius: 5px; -webkit-border-radius: 5px;-moz-border-radius: 5px;-o-border-radius: 5px;}
#sobre-kits div div ul li a{color: #999 !important; font-family: 'proxima_nova_rgbold', sans-serif !important; text-transform:uppercase !important; font-size:1.5em;}
#sobre-kits div div ul li.botao-kit-insc{background:#000 !important;}
#sobre-kits div div ul li.botao-kit-insc:hover{background:#444 !important;}
#sobre-kits div div ul li.botao-kit-insc a{color: #dae000 !important;}
#sobre-kits div div ul li.botao-kit-preco:hover a {cursor: default !important;}

.left-kit-box {float: left; margin: 5px 0; width: 595px; height: 535px; padding: 15px; border-radius: 5px; -webkit-border-radius: 5px;-moz-border-radius: 5px;-o-border-radius: 5px;}
.right-kit-box {float: right; margin: 5px 0; width: 595px; height: 535px; padding: 15px; border-radius: 5px; -webkit-border-radius: 5px;-moz-border-radius: 5px;-o-border-radius: 5px;}

#sobre-instagram ul li a figure img{float:left; display:block; margin: 5px; width: 230px; height: auto; border-radius: 5px; -webkit-border-radius: 5px;-moz-border-radius: 5px;-o-border-radius: 5px;}
#sobre-instagram ul li a figure img:hover{opacity: 0.8;}

#sobre-outros-eventos {width: 100%; text-align:center;}
#sobre-outros-eventos ul li a figure img{float:left; display:block; margin: 29px; width: 141px; height: auto; border-radius: 5px; opacity: 0.85;}
#sobre-outros-eventos ul li a figure img:hover{opacity: 1;}

#percurso h4, #sobre-instagram h4, #prox-etapas h4, #sobre-kits h4 {line-height: 1; margin: 5px auto !important;}

#sobre-kits {width: 1200px; height: auto; margin: 20px auto; color: #999;}
#percurso, #sobre-instagram {width: 1200px; height: auto; margin: 20px auto; color:#fff;}
#percurso iframe { margin: 20px auto;}
.img-percurso {width: auto; max-width: 1200px; margin: 20px 0; border-radius: 5px; -webkit-border-radius: 5px;-moz-border-radius: 5px;-o-border-radius: 5px;}

footer { width:100%; height:auto; max-height: 100%; text-align:center; background:#000; margin: 0;  color:#aaa !important; padding: 20px 10px 0 10px;}
#bottom-box { width: 1200px; margin: 0 auto; padding: 20px 0;}

#social-eu-atleta {width: 100%; height: auto; border-bottom: 1px #27223F solid; }
#soc-menu-footer ul {width: 306px; margin: 0 auto;}
#soc-menu-footer ul li {float: left; display: block; margin:0 20px 20px 20px; padding: 10px; border-radius: 28px; -webkit-border-radius: 28px;-moz-border-radius: 28px;-o-border-radius: 28px;}
#soc-menu-footer ul li:last-child{border:none;}
#soc-menu-footer ul li:hover {background: #27223F;}

#bottom-menu { text-align:right;  float:right; margin: 0 40px;}
#bottom-menu h5 {color: #FFF;}
#bottom-menu ul {display:table; float:right;}
#bottom-menu ul li a{color:#dae000 !important;}
#bottom-menu ul li a.bold-link{color:#dae000 !important; font-weight:bold;}
#bottom-menu ul li a.bold-link:hover{color:#fff !important;}
#bottom-menu ul li a:hover{color:#fff !important;}

@media screen and (min-width : 768px) and (max-width : 1024px) 

{
	#head-container {
		width: 100%;
		height: auto;
		margin: 0 auto;
		padding: 12px;
	}
	
	#logo{
		background:url(../img/logo-eutleta-noturno.svg) no-repeat;
		text-indent: -9999px;
		width: 320px;
		height: 64px;
		float:left;
	}
	
	#info{	margin: 0 20px;	float:right;}
	h2.info-data{ font-family:'proxima_novablack', sans-serif; font-size: 2em !important; line-height: 1 !important; color: #dae000 !important;}
	.info-local{ font-family: 'proxima_nova_rgregular', sans-serif; color: #888; text-transform:uppercase;}
	.arrow-box { display:block; padding: 0 10px; margin: 0 12px; max-height: 48px; background: #dae000; border-radius: 5px; -webkit-border-radius: 5px;-moz-border-radius: 5px;-o-border-radius: 5px; float:right;}
	.arrow-box:hover { background: #dd5311;}
	
	#social{ opacity: 0.8;}
	
	#container {width: 100%; margin: 0 10px; padding: 5px;}
	
	#main-menu ul li a{ color: #dae000 !important; padding: 0 12px;}
	
	.left-half-box {clear: both; float: left; margin: 5px 0; width: 490px; height: 292px; padding: 5px;}
	.right-full-box {float: right; margin: 5px 0; width: 490px; height: 595px; padding: 15px;}
	.left-full-box {float: left; margin: 5px 0; width: 490px; height: 595px; padding: 15px;}
	
	#box-overview {background:url(../img/bg-box-overview.jpg) no-repeat; background-position:center; background-size: 595px, 595px, auto; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; padding-top: 475px;}
	
	#box-percurso { background:url(../img/bg-box-percurso.jpg) no-repeat; background-position:center; background-size: 595px, 292px, auto; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; padding-top: 175px;}
	
	#prox-etapas { width: 580px; height: auto; margin: 20px 0; padding: 0 15px 15px 0;}
	.box-etapas { width: 100%; height: auto; border-bottom: #dedede solid 1px; padding: 40px 0;}
	
	.modal-body{height: 640px !important; overflow:visible;}
	
	iframe{border: 0;}
	
	#sobre-etapas{ width: 390px; height: auto; margin-left: 5px; text-align:center; color:#999;}
	
	#percurso, #sobre-instagram, #sobre-kits {width: 100%; height: auto; margin: 20px auto; color: #999; padding: 5px;}
	#percurso iframe, .img-percurso { margin: 20px auto; width: 100% !important;}

	#sobre-kits div div {border:none; text-align:center; margin: 0; padding:5px;}
	.left-kit-box {float: left; margin: 5px 0; width: 490px; height: auto; padding: 10px;}
	.right-kit-box {float: right; margin: 5px 0; width: 490px; height: auto; padding: 10px;}
	
	#sobre-instagram ul li a figure img{float:left; display:block; margin: 5px; width: 230px; height: 230px;}
	
	footer { width:100%; height:auto; max-height: 100%; text-align:center; margin: 0;  color:#aaa !important;}
	#bottom-box { width: 100%; margin: 0 auto; padding: 20px 0;}

}

@media screen and (min-width : 320px) and (max-width : 528px) 

{
	.BlocoInfo-box {width: 100% !important; float:none !important; margin: 10px auto !important; padding: 5px !important; }
}
	
@media only screen and (min-device-width : 320px) and (max-device-width : 640px)

{
	h2 {
	font-family: 'proxima_novablack', sans-serif !important;
	font-size: 3em !important;
	line-height:0 !important;
	}

	h3 {
	font-family: 'proxima_novalight', sans-serif !important;
	font-size: 1.3em !important;
	}
	
	h4 {
	margin:20px auto !important;
	}
	
	h5 {
	font-family: 'proxima_nova_rgbold', sans-serif !important;
	font-size: 1.12em !important;
	}
	
		
	#head-container {
		width: 100%;
		height: auto;
		margin: 0 auto;
		padding: 10px;
		position: relative;
	}
	
	#logo{ display:block; width: 100%; max-height: 64px; float: none; margin: 0 auto; padding: 0;}
	
	#info{ display:block; width: 100%; float: none; margin: 0 auto; padding: 0; text-align:center;}
	h2.info-data{font-size: 1.2em !important; line-height: 1 !important;}
	.arrow-box { display:block; background: #444; padding: 2px; margin: 0 5px; width: auto; height: auto; float:right;}
	
	#main-menu ul { display:table; font-size:1.5em; width: 100%; background:#000; padding-top: 5px;}
	#main-menu ul li.current-link {display: block;}
	#main-menu ul:hover li.hide-link {display: none;}
	#main-menu ul li {display:none; border:none; margin:5px 0; padding: 0; color: #f60;}
	#main-menu ul:hover li {display:block; width: 100%; margin: 2px 0; border:none;}
	#main-menu ul li a{ color: #dae000 !important; padding: 0 24px;}
	#main-menu ul li a:hover{ color: #fff !important; text-decoration: none;}
	
	#social{ opacity: 0.6;}
	
	#box-overview {background:url(../img/bg-box-overview.jpg) no-repeat; background-size: cover; background-position:center;}
	
	#container {width: 100%; margin: 0; padding: 7px;}
	
	#patrocinio { width: auto; max-width: 100%; margin: 0 auto; text-align:center;}
	#patrocinio nav ul { display: table; margin: 0 auto;}
	#patrocinio nav ul li{ display: block; text-align:center;}
	#patrocinio nav ul li img{margin: 10px;}
	
	.mob-on {display:block;}
	
	.to-right { float:none; width: auto; height:auto;}
	.to-left { float:none; width: auto; height:auto;}
	.to-up a{position: fixed; bottom: 18%; right: 5px; display:block; width: 36px; height:36px; background:url(../img/up.png) no-repeat; background-size: 100%, 100% auto; opacity: 0.5; z-index:10;} 
	.to-up a:hover {opacity: 1;}
	
	.right-half-box {clear: both; float: none; margin: 10px; width: auto; max-width: 100%; height: 292px; padding: 5px; border-radius: 5px; -webkit-border-radius: 5px;-moz-border-radius: 5px;-o-border-radius: 5px; background: #ccc; }
	.right-half-box a, .left-full-box a{ color: #fff !important;}
	.left-full-box {float: none; margin: 10px; width: auto; max-width: 100%; height: 292px; padding: 5px; border-radius: 5px; -webkit-border-radius: 5px;-moz-border-radius: 5px;-o-border-radius: 5px; background: #0cc;}
	
	#box-percurso, #box-overview {width:100%; max-height: 292px;}
	#box-patrocinadores {width:100%; height: 140px;}
	#box-overview {background:url(../img/bg-box-overview.jpg) no-repeat; background-size: cover; padding-top: 180px;}
	#box-percurso { background:url(../img/bg-box-percurso.jpg) no-repeat right top; background-size: cover; padding-top: 180px;}
	#box-patrocinadores {background-size: 100%, 100%, auto;}
	#box-overview:hover, #box-percurso:hover, #box-kit:hover { -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; background-size:auto, auto, auto;}
	
	#prox-etapas { width: 100%; height: auto; margin: 20px 0; padding: 0 15px 15px 0;}
	.img-etapas {border-radius: 5px; -webkit-border-radius: 5px;-moz-border-radius: 5px;-o-border-radius: 5px; float: left; margin-right: 10px;}
	.mob-on {display:block;}
	
	#sobre-etapas{ width: 100%; height: auto; margin: 0; border-radius: 5px; -webkit-border-radius: 5px;-moz-border-radius: 5px;-o-border-radius: 5px; border: 1px solid #dae000; text-align:center; color:#999;}
	#sobre-etapas h4{display:block; padding: 10px; width: 100%; height: auto; background: #dae000; margin: 0 !important; color:#000 !important;}
	#sobre-etapas h5 {color: #dae000!important;}
	#sobre-etapas p {margin: 10px;}
	#sobre-etapas ul {width: 132px; display:table; margin: 0 auto;}
	#sobre-etapas ul li {float:left; margin: 0 2px;}
	.sobre-item {width:230px; margin:10px auto; float:none; border-radius: 5px; -webkit-border-radius: 5px;-moz-border-radius: 5px;-o-border-radius: 5px;}
	
	#sobre-instagram, #sobre-kits { width: 100%; height: auto; margin: 20px 0; text-align:center;}
	#sobre-instagram ul {margin:0 auto; display:table; width: 230px;}
	#sobre-instagram ul li {display:block; margin: 5px auto; width: 230px; height: 230px; background:#dedede; border-radius: 5px; -webkit-border-radius: 5px;-moz-border-radius: 5px;-o-border-radius: 5px;}
	#sobre-instagram ul li:hover { background:#a1a1a1;}
	
	#sobre-outros-eventos ul li a figure img{float:left; display:block; margin: 2%; width: 45%; height: auto; border-radius: 5px; opacity: 1;}
	
	.left-kit-box {float: none; margin: 5px 0; max-width: 100%; height: auto; padding: 0; border-radius: 5px; -webkit-border-radius: 5px;-moz-border-radius: 5px;-o-border-radius: 5px;}
	.right-kit-box {float: none; margin: 5px 0; max-width: 100%; height: auto; padding: 0; border-radius: 5px; -webkit-border-radius: 5px;-moz-border-radius: 5px;-o-border-radius: 5px;}

	#sobre-kits div {background: #fff; margin: 5px 0; padding: 0; border-radius: 5px; -webkit-border-radius: 5px;-moz-border-radius: 5px;-o-border-radius: 5px; border: 1px solid #4D6A79;}
	#sobre-kits div div {border:none; text-align:center;}
	#sobre-kits h5{display:block; padding: 10px; width: 100%; height: auto; margin: 0 !important;}
	#sobre-kits div div ul{max-width: 320px; margin: 0 auto;}
	#sobre-kits div div ul li {display:block; padding: 5px 10px; width: auto; margin: 15px 5px; float: left; background:#efefef; text-align:center; border-radius: 5px; -webkit-border-radius: 5px;-moz-border-radius: 5px;-o-border-radius: 5px;}
	#sobre-kits div div ul li a{color: #999 !important; font-family: 'proxima_nova_rgbold', sans-serif !important; text-transform:uppercase !important; font-size:1.5em;}
	#sobre-kits div div ul li.botao-kit-insc{background:#000 !important;}
	#sobre-kits div div ul li.botao-kit-insc:hover{background:#dae000 !important;}
	#sobre-kits div div ul li.botao-kit-insc a{color: #fff !important;}
	#sobre-kits div div ul li.botao-kit-preco:hover a {cursor: default !important;}

	#percurso h4, #sobre-instagram h4, #prox-etapas h4 {text-align:center;}
	
	#percurso {width: 100%; height: auto; margin: 0 auto;}
	#percurso iframe { margin: 30px auto; max-height: 320px;}
	.img-percurso {width: auto; max-width: 100%; margin: 5px 0; border-radius: 5px; -webkit-border-radius: 5px;-moz-border-radius: 5px;-o-border-radius: 5px; }
	
	#sobre-instagram ul li a figure img{float:none; display:block; margin: 5px 0; width: 230px; height: 230px; border-radius: 5px; -webkit-border-radius: 5px;-moz-border-radius: 5px;-o-border-radius: 5px;}
	
	#bottom-box { width: 100%; margin: 0 auto 64px auto; padding: 20px 0;}
	
	.modal-body{height: 360px !important; overflow:visible;}
	
	#etapa-bottom {float:left;}
	
	footer p {font-size: x-small;}
}