@font-face{font-family:Sans;font-weight:400;font-display:swap;src:url(PetrobrasSans-Italic.woff) format("woff"),url(PetrobrasSans-Italic.woff2) format("woff2"),url(PetrobrasSans-Italic.eot) format("embedded-opentype")}
@font-face{font-family:SansBold;font-weight:600;font-display:swap;src:url(PetrobrasSans-BoldItalic.woff) format("woff"),url(PetrobrasSans-BoldItalic.woff2) format("woff2"),url(PetrobrasSans-BoldItalic.eot) format("embedded-opentype")}

.blur{-webkit-filter:blur(30px); -moz-filter:blur(30px); -ms-filter:blur(30px); -o-filter:blur(30px); filter:blur(30px); transition:transform 0.7s ease-out; width:100%; height:100%; overflow:hidden; text-align:center}

.container {position:relative; width:100%; max-width:1200px; margin:0 auto; padding: 0 20px; box-sizing:border-box; }
.container-fluid {position:relative; width:100%; max-width:1250px; margin:0; padding:0; box-sizing:border-box; }
.column,.columns { width:100%; float: left; box-sizing: border-box; }
.pad2{padding:20px 0}.pad3{padding:30px 0}.pad4{padding:40px 0}.pad5{padding:50px 0}.pad6{padding:60px 0}.pad7{padding:70px 0}
.padd{padding:80px 0; min-height:60px}.pad{padding:20px}
.br{color:#fff}
.brbg{background-color:#fff}
.blu{color:#00263a}
.blubg{background-color:#00263a}
.ouro{color:#FDC82F}
.blu{color:#3DDAFF}
.maincor{color:#008542}
.maincorbg{background-color:#008542}
.vd{color:#053e1f}
.bk{color:#1d1d1b}
.bkbg{background-color:#1d1d1b}
.cz{color:#505050}
.czbg{background-color:#505050}
.som{text-shadow:1px 1px 19px rgba(0, 0, 0, 0.4);}
.somd{-webkit-box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.3);-moz-box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.3);box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.3);}
.tsom{text-shadow:1px 1px 9px rgba(0, 0, 0, 0.3);}
.over{position:absolute; float:left;z-index:100;}
.trans{background-color: cornflowerblue;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";filter:alpha(opacity=50);opacity:0.5}
.img-circle {border-radius: 50%;}


.zoom{transition: transform 0.2s;}
.zoom:hover{transform: scale(1.2)}

.pulsa {animation:pulse 0.33s infinite; animation-name:pulse; animation-timing-function:ease-out; animation-delay:0; animation-direction:alternate; animation-iteration-count:infinite;}
@keyframes pulse {
  0% {transform: scale(1)}
  100% {transform: scale(1.17)}
}

.row {padding:0 20px}


.modal-window {position:fixed; background-color: rgba(255, 255, 255, 0.8); top:0; right:0; bottom:0; left:0; z-index:999999; visibility: hidden; opacity: 0; pointer-events:none; -webkit-transition: all 0.3s; transition: all 0.2s}
.modal-window:target { visibility: visible; opacity: 1; pointer-events: auto;}
.modal-window > div {max-width:300px; width:100%; padding:30px; position:absolute; top:40%; left:50%; -webkit-transform:translate(-50%, -50%);transform: translate(-50%, -50%); padding:2em; background:#ffffff; -webkit-box-shadow: 0px 0px 90px 0px rgba(0,0,0,0.26); -moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.26); box-shadow: 0px 0px 90px 0px rgba(0,0,0,0.26); border-radius:6px}

.modal-close {line-height:50px; font-size:80%; font-weight:bolder; position:absolute; right:12px; text-align:center; top:0; width:80px; text-decoration:none}
.modal-close:hover {color: black;}

.modal-window div:not(:last-of-type) { margin-bottom: 15px;}




html {font-size:62.5%; scroll-behavior:smooth; margin:0; padding:0; overflow:hidden; text-rendering:optimizeLegibility; overflow:hidden}
body {font-size:1.5em; font-family:Sans,sans-serif; line-height:1.4; font-weight:400; overflow:hidden; color:#222; background-color:#006529; height:100%; background-image:url(../img/bg.webp); background-size:cover}



h1, h2, h3, h4, h5, h6 {margin-top:1rem; margin-bottom:1.4rem; color:#ffd900; line-height:1; font-family:SansBold,sans-serif; letter-spacing:-0.1rem}
h1 { font-size: 4.3rem; line-height:105%}
h2 { font-size: 3.3rem;}
h3 { font-size: 2.8rem;}
h4 { font-size: 2.3rem; color:#333;}
h5 { font-size: 1.9rem; }
h6 { font-size: 1.5rem; }


@media (min-width: 950px) {
.hhome { font-size: 7.7rem;}
  h1 { font-size: 4.5rem; }
  h2 { font-size: 3.7rem; }
  h3 { font-size: 3.0rem; }
  h4 { font-size: 2.2rem; }
  h5 { font-size: 1.9rem; }
  h6 { font-size: 1.5rem; }
}

p {margin:0; font-size:1.1em; font-weight:300}
a {color:#fdc82f; text-decoration:none;-webkit-transition:color 0.2s ease-in; -moz-transition:color 0.2s ease-in; -o-transition:color 0.2s ease-in}
a:hover { color:#000}
p.sm{line-height:13px; font-size:10px; color:#fff}



.button,button,input[type="submit"],input[type="reset"],
input[type="button"] {display:inline-block; height:auto; padding:8px 22px; color:#fff; text-align:center; font-size:1.7rem; text-decoration:none; white-space:nowrap; background-color:#053e1f; border-radius:30px; cursor:pointer; box-sizing:border-box; border:1px none #fff;}
.button:hover,button:hover,input[type="submit"]:hover,input[type="reset"]:hover,input[type="button"]:hover,.button:focus,button:focus,input[type="submit"]:focus,input[type="reset"]:focus,input[type="button"]:focus {color:#fff; outline: 0; background-color:#000}
.button.button-primary,button.button-primary,input[type="submit"].button-primary,input[type="reset"].button-primary,
input[type="button"].button-primary {height:50px; background:#018205; color:#fff}
.button.button-primary:hover,button.button-primary:hover,input[type="submit"].button-primary:hover,input[type="reset"].button-primary:hover,input[type="button"].button-primary:hover,.button.button-primary:focus,button.button-primary:focus,input[type="submit"].button-primary:focus,input[type="reset"].button-primary:focus,input[type="button"].button-primary:focus {color:#FFF; background-color:#046207}



input[type="email"],input[type="number"],input[type="search"],input[type="text"],input[type="tel"],input[type="url"],input[type="password"],input[type="date"],textarea,select {height:auto; width:100%; padding:15px; font-size:1.2em; background-color:#fff; border:0px solid #888; border-radius:10px; box-shadow:none; box-sizing:border-box; -webkit-box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.2);-moz-box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.2);box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.2); margin:10px 0}
/* Removes awkward default styles on some inputs for iOS */
input[type="email"],input[type="number"],input[type="search"],input[type="text"],input[type="tel"],input[type="url"],input[type="password"],
textarea {-webkit-appearance: none; -moz-appearance: none;appearance: none; }
textarea {min-height: 65px; padding-top: 6px; padding-bottom: 6px; }
input[type="email"]:focus,input[type="number"]:focus,input[type="search"]:focus,input[type="text"]:focus,input[type="tel"]:focus,input[type="url"]:focus,input[type="password"]:focus,textarea:focus,select:focus {border:2px solid #000; outline: 0; }
label,legend {display: block; margin-bottom: .5rem; font-weight: 600; }
fieldset { padding: 0; border-width: 0; }
input[type="checkbox"],input[type="radio"] { display:inline; padding:5px}
input[type="image"] { display:inline; text-align:center; max-height:50px;width:auto; margin-bottom:0}
label > .label-body { display: inline-block; margin-left: .5rem; font-weight: normal; }



ul {list-style: circle inside; }
ol {list-style: decimal inside; }
ol, ul {padding-left: 0; margin-top: 0; }
ul ul,ul ol,ol ol,ol ul {margin: 1.5rem 0 1.5rem 3rem; font-size: 90%; }
li {margin-bottom: 1rem; }



@media screen and (min-width:320px) {
table {border-collapse:collapse; margin:0; padding:0; width:100%; margin-left:0%; table-layout:fixed}
table caption {font-size:1.5em; margin:.5em 0 .75em 0}
table tr {padding:2em 0}
table th,table td {padding:.625em .4em; text-align:left; border-bottom:1px solid #E1E1E1; font-size:0.7em}
table th, thead {padding:.625em .4em; font-size:.8em; text-transform:uppercase; font-weight:bold; background-color:#333; color:#fff}
tbody tr:nth-child(odd){background-color:#e9e9e9}
table tr td:first-child {}
table tr td:last-child {width:4em;}
.uf{width:36px}
.padr{font-size:22px}
}

@media screen and (min-width:550px) {
table {border-collapse: collapse; width:100%; margin-left:0; table-layout:fixed}
table caption {font-size:1.5em; margin:.5em 0 .75em 0}
table tr {padding:2em 0}
table th,table td { padding:.625em 0; text-align:center; border-bottom:1px solid #E1E1E1; font-size:0.9em}
table th, thead {font-size:.9em; text-transform:uppercase; font-weight:bold; background-color:#333; color:#fff}
tbody tr:nth-child(odd){background-color:#e9e9e9}
table tr td:first-child {width:2em; min-width:2em; max-width:2em; word-break:break-all;}
table tr td:last-child {width:12em; word-break:normal}
.uf{width:60px}
.padr{font-size:22px}
.ttd {font-size:15px}
}



button,.button {margin-bottom: 1rem; }
input,textarea,select,fieldset {margin-bottom: 1.5rem; }
pre,blockquote,dl,figure,table,p,ul,ol {margin-bottom: 2.5rem; }

.u-full-width {width:100%; box-sizing:border-box}
.u-max-full-width,.u-half-width {width:100%;  box-sizing:border-box}
.u-pull-right {float:right}
.u-pull-left {float:left}
.text-center{text-align: center}
.text-just{text-align: justify}
.it{font-style: italic}
.spa{letter-spacing:0.1em}
.leve{font-weight:300}
.b, b{font-weight:bolder}
.reg{font-family:Sans,sans-serif;}
hr {margin-top:2rem; margin-bottom:2.5rem; border-width:0; border-top: 1px solid #E1E1E1}
.container:after,.row:after,.u-cf { content:""; display:table; clear:both}


@-webkit-keyframes sk-bounce {
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}
@keyframes sk-bounce {
  0%, 100% { transform: scale(0.0);-webkit-transform: scale(0.0);
  } 50% { transform: scale(1.0); -webkit-transform: scale(1.0); }
}









@media (min-width: 320px) {
body {background-size:110%}
.tit{margin-top:6vh}
.tittkt{color:#fdc82f; transform: rotate(-10deg); text-align:center; position:absolute; width:200px; z-index:88; margin:15% 0 0 18%}
.centro{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);}
.shapeintro {background:#008542; border-radius:30px; padding:27px 0px 27px 0px; -webkit-box-shadow: 0px 20px 44px 10px rgba(7,7,7,0.5);-moz-box-shadow:0px 20px 44px 10px rgba(7,7,7,0.5);box-shadow: 0px 20px 44px 10px rgba(7,7,7,0.5); margin:auto 10%}
.shape {background:#008542; border-radius:30px; padding:27px 0px 27px 0px; -webkit-box-shadow: 0px 20px 44px 10px rgba(7,7,7,0.5);-moz-box-shadow:0px 20px 44px 10px rgba(7,7,7,0.5);box-shadow: 0px 20px 44px 10px rgba(7,7,7,0.5); margin:auto 10%; z-index:200}

#disco{width:83%}
#roleta{width:70%; margin-left:15%}
#deck{width:100%;position:fixed; bottom:-4px; left:0}

#nav-icon4 {width:36px; height:20px; position:fixed; top:7px; right:10px; -webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition:.5s ease-in-out;-moz-transition:.5s ease-in-out;-o-transition:.5s ease-in-out; transition:.5s ease-in-out; cursor:pointer; z-index:99999; background:none; padding:20px; border-radius:0 0 0 12px}
#nav-icon4 span {display:block; position:absolute; height:5px; width:60%; margin:13px auto 10px 21.4%; background:#fff; border-radius:2px; opacity: 1; left: 0; -webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg); -webkit-transition: .25s ease-in-out;-moz-transition:.25s ease-in-out;-o-transition:.25s ease-in-out;transition:.25s ease-in-out}
#nav-icon4 {}
#nav-icon4 span:nth-child(1) {top:0px;-webkit-transform-origin:left center;-moz-transform-origin:left center;-o-transform-origin:left center;transform-origin:left center; -webkit-box-shadow:0px -10px 28px 5px rgba(0,0,0,1);-moz-box-shadow:0px -10px 28px 5px rgba(0,0,0,1);box-shadow:0px -10px 28px 5px rgba(0,0,0,1)}
#nav-icon4 span:nth-child(2) {top:10px; -webkit-transform-origin:left center;-moz-transform-origin:left center;-o-transform-origin:left center;transform-origin:left center;}
#nav-icon4 span:nth-child(3) {top:20px;-webkit-transform-origin:left center;-moz-transform-origin:left center; -o-transform-origin:left center; transform-origin:left center; -webkit-box-shadow: 0px 10px 28px 5px rgba(0,0,0,1);-moz-box-shadow: 0px 10px 28px 5px rgba(0,0,0,1);box-shadow:0px 10px 28px 5px rgba(0,0,0,1)}
#nav-icon4.open span:nth-child(1) {-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg); transform: rotate(45deg); top:-11px; left:7px; background-color:#76b729; -webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}
#nav-icon4.open span:nth-child(2) { width:0%; opacity:0;}
#nav-icon4.open span:nth-child(3) {-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform: rotate(-45deg); top:20px; left:7px; background-color:#76b729; -webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}
.menu{color:#fff; font-size:19px; font-weight:bolder; position:fixed; top:36px; letter-spacing:-0.03em; right:14px; text-shadow:0px 0px 29px rgba(0,0,0,1);}

.overlay {position:fixed; background:#fff; top:0; left:0; width:100%; height:0%; opacity:0; visibility:hidden; -webkit-transition: opacity .35s, visibility .35s, height .35s; transition:opacity .35s, visibility .35s, height .35s; overflow:hidden; z-index:250}
.overlay.open {opacity:1; visibility:visible; height:100%;}
.overlay.open li {-webkit-animation:fadeInRight .5s ease forwards; animation:fadeInRight .5s ease forwards; -webkit-animation-delay:.35s; animation-delay:.35s;}
.overlay.open li:nth-of-type(2) {-webkit-animation-delay:.4s; animation-delay:.4s;}
.overlay.open li:nth-of-type(3) {-webkit-animation-delay:.45s; animation-delay:.45s;}
.overlay.open li:nth-of-type(4) {-webkit-animation-delay:.50s; animation-delay:.50s;}
.overlay nav {position:relative; height:70%; top:48%; -webkit-transform:translateY(-50%); transform:translateY(-50%); font-size:24px; text-align:center; letter-spacing:-0.01em}
.overlay ul {list-style:none; padding:0; margin:0 auto; display:inline-block; position:relative; height:100%}
.overlay ul li {display:block; height:12%; height:calc(100%/6); min-height:30px; position:relative; opacity:100; color:#fff;text-align:center}
.overlay ul li a {display:block; position:relative; color:#1c4624; text-decoration:none; letter-spacing:-0.033em; z-index:99999; font-weight:600}
.overlay ul li a:hover {color:#76b729}

.wrap-collapsible {margin:2rem 0}
.lbl-toggle h4{padding:0; font-size:2rem; text-transform:none; line-height:110%}
input[type='checkbox'] {display:none;}
.lbl-toggle {display:block; font-size:1.8rem; line-height:1rem; text-transform:uppercase; padding:1.4rem 0.7rem 0 1.4rem; color:#1c2f6e; background:#fff; cursor:pointer; border-radius:10px; transition:all 0.25s ease-out; margin-bottom:0; box-shadow:rgba(15, 20, 31, 0.15) 0px 0px 18px 0px;}
.lbl-toggle:hover { color:#1c2f6e}
.lbl-toggle::after { content:' '; display:inline-block; vertical-align:middle; transition:transform .2s ease-out; margin:0 0 0 6px}
.collapsible-content { max-height:0px; overflow:hidden; transition:max-height .15s ease-in-out; box-shadow:rgba(15, 20, 31, 0.15) 0px 0px 18px 0px; border-bottom-left-radius:10px; border-bottom-right-radius:10px;}
.toggle:checked + .lbl-toggle + .collapsible-content { max-height:2250px; height:auto}
.toggle:checked + .lbl-toggle { border-bottom-right-radius:0; border-bottom-left-radius:0;}
.collapsible-content .content-inner { background:#fff; border-bottom-left-radius:10px; border-bottom-right-radius:10px; padding:1.7rem;}
.content-inner p {margin-bottom:1.4rem}

#loader {display:none; position:fixed; top:0; left:0; right:0; bottom:0; width:100%; background:rgba(0,0,0,0.85); z-index:10000}
.lds-ripple {display:inline-block; position:relative; width:96px; height:96px; margin:42% 0 0 39%}
.lds-ripple div {position:absolute; border:8px solid #fff; opacity:1; border-radius:50%;animation:lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;}
.lds-ripple div:nth-child(2) {animation-delay:-0.5s;}
@keyframes lds-ripple {0% {top:48px; left:48px; width:0; height:0; opacity:1} 100% {top:0px; left:0px; width:96px; height:96px; opacity:0} }


.containeris {overflow:hidden; border:none; position:relative; width:100%; max-width:320px; height:100%; margin:0 auto;
	-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;-o-user-select: none;user-select: none;
	cursor: url('../img/mao.ico'), grab; cursor: url('../img/mao.ico'), -webkit-grab;
}
.canvas {position:absolute; top:0; z-index:10;}
.blinker { -webkit-animation-name: blinker;-webkit-animation-duration: 0.6s;-webkit-animation-timing-function:linear; -webkit-animation-iteration-count:infinite; -moz-animation-name: blinker; -moz-animation-duration: 0.6s; -moz-animation-timing-function:linear; -moz-animation-iteration-count:infinite;animation-name: blinker; animation-duration: 0.6s;animation-timing-function: linear; animation-iteration-count:infinite;}
@-moz-keyframes blinker { 0% { opacity: 1.0; }50% { opacity: 0.0; }100% { opacity: 1.0; }}
@-webkit-keyframes blinker { 0% { opacity: 1.0; } 50% { opacity: 0.0; } 100% { opacity: 1.0; }}
@keyframes blinker { 0% { opacity: 1.0; } 50% { opacity: 0.0; } 100% { opacity: 1.0; }}

#scratch-container { position: relative; width:320px; height:188px; }
#scratch-canvas    { position:absolute; left:0; top:0; z-index:2; touch-action:none; -ms-touch-action:none; }
.winner-box        { position:absolute; left:0; top:0; z-index:1; width:320px; height:188px; }

}



@media (min-width:360px) {
.shape {padding:33px auto}
}

@media (min-width:375px) {

}

@media (min-width:410px) {
.tit{margin-top:8vh}
}

@media (min-width:550px) {

}


#ganhou{height:100vh}
.confetti{position:absolute; top:-9vh; z-index:-2; left:0; min-width:100%; height:100vh; display:block; margin:0 auto; user-select:none;}
.canvas {touch-action:none; -ms-touch-action:none; }
#scratch-canvas {touch-action:none; -ms-touch-action:none;}