/*Estilo página de ajuda CB Play v2.3*/

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;900&display=swap');

div.cc-window {display: none!important}

.lp-play-help {font-family: 'Lato', sans-serif; width: 100%; margin: 0 auto; text-align: center;}
.lp-play-help h1 {font-size: 18px; font-weight: bold; text-transform: uppercase; color: #fff;}
.lp-play-help h1 strong {font-style: italic; color: #ec1c3d; font-size: 26px;}  
.lp-play-help h2 {font-size: 16px; font-weight: bold; text-transform: uppercase; color: #fff; margin-bottom: 10px;}
.lp-play-help h3 {font-size: 15px; font-weight: bold; text-transform: uppercase; color: #0033C6; margin-bottom: 15px;}
.lp-play-help p {font-size: 14px; color: #2A2A2A; margin-bottom: 20px;}
.lp-play-help .cta-play {display: block; font-size: 16px; background: #51A559; width: 100%; color: #fff; padding: 15px; border-radius: 5px; font-weight: bold; max-width: 350px; margin: 0 auto;}

.lp-play-help section.content-intro {background: rgb(2,0,160); overflow: hidden; background: linear-gradient(320deg, rgba(2,0,160,1) 0%, rgba(3,0,213,1) 100%); padding: 0 20px 20px;}
.lp-play-help section.content-intro img.logo {width: 80%; margin: 10px auto;}
.lp-play-help section.content-intro img.hero {width: 100%; transform: scale(1.11); margin: 30px auto;}
.lp-play-help section.content-intro .copy p {color: #fff;}
.lp-play-help section.content-intro .promocode {display: flex; align-items: center; position: relative; background: #F0EFEA; border-radius: 8px; text-align: left; margin: 0 auto 20px; max-width: 350px;}
.lp-play-help section.content-intro .promocode .code {margin: 0 auto;}
.lp-play-help section.content-intro .promocode .code span {font-size: 12px; color:#2A2A2A;}
.lp-play-help section.content-intro .promocode .code strong {font-size: 24px; color: #0033C6; display: block;}
.lp-play-help section.content-intro .promocode > img {height: 96px}
.lp-play-help section.content-intro .promocode a {cursor: pointer; margin: 0 auto; width: 40px;}
.lp-play-help section.content-intro .promocode a.copy {padding: 0}

.lp-play-help section.content-intro .promocode .feedback {color: #fff; position: absolute; top: 82px; background: #51A559; font-size: 12px; padding: 5px; border-radius: 5px; margin-left: 50%; left: -112px; width: 70px; text-align: center; box-sizing: border-box; opacity: 0; transition: opacity 0.25s;}
.lp-play-help section.content-intro .promocode .feedback:after {width: 0; height: 0; border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 15px solid #51A559; content: ""; top: -8px; position: absolute; left: 20px;}
.lp-play-help section.content-intro .promocode .feedback.animate {animation-name: copy-feedback; animation-duration: 2.5s;-webkit-animation-iteration-count: 1;}
@keyframes copy-feedback {0%{opacity: 0} 25%{opacity: 1} 50%{opacity: 1} 100% {opacity: 0}}

.lp-play-help section.content-steps {background: #F0EFEA; padding: 30px 20px;}
.lp-play-help section.content-steps .step {display: flex; align-items: center;}
.lp-play-help section.content-steps .step img {width: 30%; margin: 0 10px;}
.lp-play-help section.content-steps .step .copy {width: 70%;}

.lp-play-help section.content-footer {background: #F0EFEA; padding: 0 20px 30px}
.lp-play-help section.content-footer .copy h2 {color: #0033C6;}
.lp-play-help section.content-footer a.terms {font-size: 14px; text-decoration: underline; color: #0033C6; margin: 20px 0; display: block;}

.lp-play-help.faq {padding: 30px 20px; font-size: 14px; text-align: left; padding-bottom: 80px;}
.lp-play-help.faq h1 {color: #0033C6; font-size: 24px; margin-bottom: 40px; text-align: center;}
.lp-play-help.faq h2 {color:#0033C6; margin-bottom: 20px}
.lp-play-help.faq section {margin-bottom: 40px;}
.lp-play-help.faq section.faq button {font-size: 14px; padding: 15px 0; color: #0033C6; width: 100%; text-align: left; border: none; outline: none; font-weight: bold; border-bottom: 1px solid #ccc; background: none; padding-right: 5%; position: relative;}
.lp-play-help.faq section.faq button:after {content: '\002B'; color: #0033C6; font-weight: bold; right: 0; position: absolute; top: 50%; margin-top: -6px;}
.lp-play-help.faq section.faq button.active:after {content: "\2212";}
.lp-play-help.faq section.faq .panel {text-align: left; padding: 0; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; width: 100%;}
.lp-play-help.faq section.faq .panel p {padding: 10px 0; margin: 0;}

.lp-play-help.faq section.rules ol {list-style: decimal; list-style-position: inside;counter-reset: item;}
.lp-play-help.faq section.rules li {display: block; margin-bottom: 10px;}
.lp-play-help.faq section.rules li ol {margin-top: 10px;}
.lp-play-help.faq section.rules li ol li {margin-bottom: 10px;}
/*.lp-play-help.faq section.rules li:before {content: counters(item, ".") ". "; counter-increment: item; font-weight: bold;}*/
.lp-play-help.faq section.rules small {font-size: 12px; margin: 30px 0 0; display: block;}

.content-iframe {width: 100%; height: 100%; display: none; position: fixed; left: 0; top: 0; z-index: 100; background: rgb(255,255,255);
background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);}
.content-iframe.display {display: block;}
.content-iframe iframe {width: 100%; height: 100%; top: 0; position: absolute; left: 0;}
.content-iframe span {display: block; position: absolute; bottom: 0; width: 100%; height: 125px; z-index: 100; background: rgb(255,255,255); background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);}
.content-iframe a.cta-close {background: #0033C6; position: fixed; bottom: 20px; z-index: 100; padding: 10px; color: #fff; border-radius: 50px; font-size: 40px; width: 75px; height: 75px; text-align: center; margin-left: -35px; display: block; left: 50%;}

body.display {overflow: hidden;}

@media screen and (min-width: 768px) {.lp-play-help {width: 768px;}}