@import url(normalize.css);
a, a:hover, a:visited, a:focus, span, h1, h2, h3, h4, h5, h6 { transition: all 0.5s; -moz-transition: all 0.5s; /* Firefox 4 */ -webkit-transition: all 0.5s; /* Safari and Chrome */ -o-transition: all 0.5s; /* Opera */ }

body { margin: 0; padding: 0; font-family: 'Open Sans', sans, arial; color: white; font-size: 14.4px; font-size: 0.9rem; }

a, a:hover, a:visited, a:focus, span, h1, h2, h3, h4, h5, h6 { text-decoration: none; font-weight: normal; outline: none; }

#page { background: #aaa url(../images/wabco-logo.png) center center no-repeat; width: 100%; overflow-x: hidden; }
#page:before { content: ''; background: url(../images/wabco-cores.jpg) center top no-repeat; background-size: contain; height: 5px; width: 100%; position: fixed; top: 0; left: 0; display: block; }
#page #masthead { position: fixed; width: 100%; height: 60px; padding: 60px 0 0 0; bottom: 0px; z-index: 2; background: -moz-linear-gradient(top, transparent 0%, transparent 1%, rgba(0, 0, 0, 0.4) 40%, rgba(0, 0, 0, 0.4) 80%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, transparent), color-stop(1%, transparent), color-stop(40%, rgba(0, 0, 0, 0.4)), color-stop(80%, rgba(0, 0, 0, 0.4))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, transparent 0%, transparent 1%, rgba(0, 0, 0, 0.4) 40%, rgba(0, 0, 0, 0.4) 80%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, transparent 0%, transparent 1%, rgba(0, 0, 0, 0.4) 40%, rgba(0, 0, 0, 0.4) 80%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, transparent 0%, transparent 1%, rgba(0, 0, 0, 0.4) 40%, rgba(0, 0, 0, 0.4) 80%); /* IE10+ */ background: linear-gradient(to bottom, transparent 0%, transparent 1%, rgba(0, 0, 0, 0.4) 40%, rgba(0, 0, 0, 0.4) 80%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#66000000',GradientType=0 ); /* IE6-9 */ }
@media screen and (max-width: 960px) { #page #masthead { background: #2e8c99; bottom: 0; height: 110px; padding-top: 50px; text-align: center; } }
#page #masthead .container { width: 80%; max-width: 960px; display: block; margin-left: auto; margin-right: auto; }
@media screen and (max-width: 960px) { #page #masthead .container { width: 90%; } }
#page #masthead picture { max-width: 45%; float: left; margin: -1rem 1rem 1rem 0; font-size: 11.2px; font-size: 0.7rem; }
#page #masthead picture img { height: auto; max-width: 100%; }
@media screen and (max-width: 1110px) { #page #masthead picture { max-width: 75px; margin-top: -0.5rem; } }
@media screen and (max-width: 960px) { #page #masthead picture { max-width: 100px; display: inline-block; float: none; } }
#page #masthead #menu { float: right; margin-right: -5px; }
@media screen and (max-width: 960px) { #page #masthead #menu { float: none; } }
#page #masthead #menu ul { list-style: none; width: 100%; margin: 0; padding: 0; }
#page #masthead #menu ul li { display: inline-block; margin-right: -2px; vertical-align: top; text-align: center; }
#page #masthead #menu ul li a { color: white; padding: 5px 12px; text-transform: uppercase; font-size: 12.8px; font-size: 0.8rem; display: block; }
#page #masthead #menu ul li:hover, #page #masthead #menu ul li.active { background: white; }
#page #masthead #menu ul li:hover > a, #page #masthead #menu ul li.active > a { color: #2e8c99; }
#page main section { min-height: 100vh; display: flex; flex-direction: column; }
@media screen and (max-width: 960px) { #page main section { height: auto; min-height: 430px; } }
#page main section > .container { min-height: 100vh; }
#page main section article { flex: 1; display: flex; width: 80%; max-width: 960px; padding: 15vh 0; display: block; margin-left: auto; margin-right: auto; }
#page main section article .content { max-width: 45%; float: right; }
#page main section article .content:after { clear: both; content: ""; display: table; }
@media screen and (max-width: 960px) { #page main section article .content { max-width: 100%; float: none; } }
#page main section article .header h2 { font-size: 19.2px; font-size: 1.2rem; line-height: 1.1rem; }
#page main section .updown { position: absolute; text-align: right; margin-top: -150px; width: 100%; left: 0; }
#page main section .updown .container { width: 80%; max-width: 960px; display: block; margin-left: auto; margin-right: auto; }
#page main section .updown a:nth-child(1) { background: url(../images/wabco-updown.png) center center no-repeat; -webkit-transform: scaleY(-1); -moz-transform: scaleY(-1); -ms-transform: scaleY(-1); -o-transform: scaleY(-1); transform: scaleY(-1); }
#page main section .updown a:nth-child(2) { background: url(../images/wabco-updown.png) center center no-repeat; }
#page main section .updown a { width: 45px; height: 45px; display: block; text-transform: uppercase; font-size: 11.2px; font-size: 0.7rem; display: inline-block; text-align: center; line-height: 40px; text-indent: -100em; overflow: hidden; }
@media screen and (max-width: 960px) { #page main section .updown { margin-top: -60px; }
  #page main section .updown a { width: 24px; height: 24px; } }
#page main section#inicio .updown a.prev-section { opacity: 0.5; filter: alpha(opacity=50); pointer-events: none; cursor: default; }
#page main section#participantes .updown a.next-section { opacity: 0.5; filter: alpha(opacity=50); pointer-events: none; cursor: default; }
#page .sp-scrollbar { width: 10px; margin: 4px; background-color: rgba(255, 255, 255, 0.25); cursor: pointer; }
#page .sp-scrollbar .sp-thumb { background-color: white; }
#page .sp-scrollbar.active .sp-thumb { background-color: rgba(0, 0, 0, 0.5); }

#page main section#inicio { background: url(../images/wabco-inicio.jpg) 10% 25% no-repeat; background-size: cover; }

#page main #campanha { background: #025198 url(../images/wabco-campanha-fundo.jpg) right center no-repeat; background-size: cover; }
#page main #campanha > .container { background: url(../images/wabco-campanha-motor.png) top left no-repeat; background-size: 50% auto; }
#page main #campanha > .container .header img:nth-child(1) { width: 60%; height: auto; }
#page main #campanha > .container .header img:nth-child(2) { width: 30%; height: auto; margin-left: 5%; }
@media screen and (max-width: 960px) { #page main #campanha > .container { background: none; } }

#page main #participantes { background: #00723d url(../images/wabco-participantes-fundo.jpg) center center no-repeat; background-size: cover; }
@media screen and (max-width: 960px) { #page main #participantes { padding-bottom: 150px; } }
#page main #participantes article .content { width: 100%; max-width: 100%; }
#page main #participantes article .content #consulte, #page main #participantes article .content #selector { float: right; width: 40%; text-align: right; }
@media screen and (max-width: 960px) { #page main #participantes article .content #consulte, #page main #participantes article .content #selector { width: 100%; float: none; } }
#page main #participantes article .content #consulte label, #page main #participantes article .content #selector label { font-size: 9.6px; font-size: 0.6rem; text-transform: uppercase; display: block; }
#page main #participantes article .content #consulte select, #page main #participantes article .content #selector select { color: #2e8c99; font-size: 16px; font-size: 1rem; /*
appearance:none;
-moz-appearance:none; /* Firefox */ background: white; border-radius: 4px; border: 0; padding: 3px 35px 4px 6px; outline: none; }
#page main #participantes article .content #consulte select:focus, #page main #participantes article .content #selector select:focus { outline: none; }
#page main #participantes article .content img { max-width: 50%; height: auto; }
#page main #participantes article .content #lojas { max-width: 50%; height: 200px; overflow-y: hidden; }
@media screen and (max-width: 960px) { #page main #participantes article .content #lojas { width: 100%; max-width: 100%; float: none; } }
#page main #participantes article .content #lojas h3 { font-size: 16px; font-size: 1rem; }
#page main #participantes article .content #lojas p { border-top: 1px solid rgba(255, 255, 255, 0.25); padding-top: 0.5rem; }
#page main #participantes article .content #lojas p span:last-of-type { float: right; }

#page main #premiacoes { min-height: inherit; }
#page main #premiacoes article { padding: 0; margin: 0; width: 100%; max-width: 100%; }
#page main #premiacoes article .content { float: none; max-width: inherit; width: 100%; }
#page main #premiacoes article .content img { width: 100%; height: auto; margin-bottom: -5px; }

body.regulamento { color: black; }
body.regulamento a, body.regulamento a:hover, body.regulamento a:visited, body.regulamento a:focus, body.regulamento span, body.regulamento h1, body.regulamento h2, body.regulamento h3, body.regulamento h4, body.regulamento h5, body.regulamento h6 { transition: none; font-family: "Open Sans", sans, arial !important; line-height: inherit !important; }
body.regulamento #page { background: white; }
body.regulamento #page #masthead { position: inherit; width: 100%; margin-bottom: 20px; background: white; }
body.regulamento #page #masthead .container { width: 90%; }
body.regulamento #page #masthead .container h2 { text-align: left !important; }
body.regulamento #page #content { width: 90%; max-width: 960px; margin: 50px auto; }
body.regulamento #page #footer { background: #2e8c99; }
body.regulamento #page #footer .container { width: 90%; margin: 0 auto; height: 100px; }
body.regulamento #page #footer .container picture { max-width: 45%; float: left; margin: 1rem 1rem 1rem 0; font-size: 11.2px; font-size: 0.7rem; }
body.regulamento #page #footer .container picture img { height: auto; max-width: 100%; }
@media screen and (max-width: 960px) { body.regulamento #page #footer .container picture { display: inline-block; max-width: 100px; float: none; } }