/* --------------------------------------------- */
/* logo */
/* --------------------------------------------- */

.logo-container{
 height: 200px;
 max-width: 1215px;
 margin: 0 auto;
 position: relative;
}

.logo{
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -58%);
}

@media(min-width: 1220px){


 .logo-container{
  height: 153px;
 }

 .logo{
  position: absolute;
  top: 20px;
  left: 0;
  transform: none;
 }
}


/* 
.logo-mobile{
 max-width: 100%;
 margin: 45px auto;
 display: block;
}

.logo-mobile.is-home{
 margin-bottom: 45px;
}

@media(min-width: 768px){
 .logo-mobile.is-home{
  margin-bottom: 85px;
 }
}


@media(min-width: 1220px){
 .logo-mobile.is-home{
  margin-bottom: 100px;
 }
} */


/* ------------------------------------------------- */
/* capas  */
/* ------------------------------------------------- */
.cover{
 max-width: 285px;
 margin: -65px auto 30px auto;
 display: flex;
 flex-direction: row;
 gap: 3px;
}
.cover img{
 max-width: 33%;
 display: block;
 flex-grow: 1;
}

@media(min-width: 768px){
 .cover{
  max-width: 350px;
  margin-top: -95px;
 } 
}

@media(min-width: 1220px){
 .cover{
  max-width: 435px;
  margin-top: -130px;
 } 
}


/* ------------------------------------------------- */
/* home  */
/* ------------------------------------------------- */

.home{
 max-width: 582px;
 margin: 0 auto 20px auto; 
 text-align: center;
}

.home__sup-title{
 text-transform: uppercase;
 text-align: center;
 font-size: 17px;
}

.home__title{
 margin-bottom: 20px;
 text-transform: uppercase;
 font-size: 24px;
 font-family: var(--ff-globotipo-black);
 color: var(--color-red);
}

.home__description{
 margin-bottom: 20px;
 text-align: center;
}

.home__featured-text{
    max-width: 464px;
    margin: 0 auto 40px auto;
 font-weight: 900;
}

@media(min-width: 768px){

 .home__sup-title{
  font-size: 22px;
 }

 .home__title{
  font-size: 32px;
 }
}

/* ------------------------------------------------- */
/* quiz  */
/* ------------------------------------------------- */
.quiz__counter{
 margin-bottom: 25px;
 font-size: 32px;
 font-family: var(--ff-globotipo-black);
 text-align: center;
 color: var(--color-red);
}

.quiz__title{
 margin-bottom: 20px;
 font-family: var(--ff-globotipo);
 font-size: 20px;
 text-align: center;
 line-height: 1.5;  
 color: var(--color-dark-900);
}

.quiz__content{
 display: flex;
 flex-direction: column;
}

.quiz__banner img{
 max-width: 100%;
 display: block;
 margin: 0 auto 10px auto;
}

.quiz__respostas{ }

.quiz__respostas-item{
 margin-bottom: 10px;
 padding: 25px 10px 25px 53px;
 position: relative;
 font-size: 16px;
 color: var(--color-dark-900);
 border: 1.4px solid var(--color-neutral-200);
 border-radius: 4px;
 cursor: pointer;
}

.quiz__respostas-item::before{
 content: '';
 width: 27px;
 height: 27px;
 position: absolute;
 top: 50%;
 left: 15px;
 transform: translateY(-50%);
 border: 2px solid var(--color-neutral-200);
 border-radius: 50%;
}

.quiz__respostas-item.is_checked,
.quiz__respostas-item:hover{
 color: #FFF;
 background-color: var(--color-dark-900);
 border-color: var(--color-dark-900);
}

.quiz__respostas-item.is_checked::before,
.quiz__respostas-item:hover::before{
 background: #fff url(https://image.globoplaymkt.globo.com/lib/fe3311717064047d721777/m/8/dea8dc8e-3013-4c71-9db6-452cf2200c3d.png) center no-repeat;
 border-color: #fff;
}

@media(min-width: 1220px){
 .quiz__content{
  flex-direction: row;
  gap: 32px;
 }
 .quiz__respostas{ 
  flex-grow: 1;
  flex-shrink: 1;
 }
 .quiz__banner{ 
  flex-grow: 0;
  flex-shrink: 0;
 }
}

/* ----------------------------------------------------------------- */
/* botão */
/* ----------------------------------------------------------------- */

.btn {
    width: 100%;
    padding: 21px 20px;
    margin: 0 auto;
    display: block;
    vertical-align: middle;
    text-align: center;
    text-decoration: none;
    text-overflow: ellipsis;
    font-family: var(--ff-globotipo);
    font-weight: 500;
    font-size: 18px;
    line-height: 1;
    color: #fff;
    background-color: var(--color-red);
    border: 2px solid var(--color-red);
 cursor: pointer;
  
    -webkit-touch-callout: none;
    -moz-touch-callout: none;
    touch-callout: none;
    
    transition: all 0.1s ease-in-out; 
}
.btn:hover{
 background-color: var(--color-dark-900);
 border-color: var(--color-dark-900);
}

/* ------------------------------------------------- */
/* pagination  */
/* ------------------------------------------------- */

.pagination{
 margin-top: 25px;
 display: flex;
 flex-direction: row;
 gap: 10px;
}

.btn.is-pagination{
 flex-grow: 1;
 display: flex;
 flex-direction: row;
 justify-content: center;
 gap: 20px;
 align-items: center;
 background-color: transparent;
 border-color: var(--color-dark-900);
 color: var(--color-dark-900);
}

.btn.is-pagination:hover{
 background-color: var(--color-dark-900);
 color: #fff;
}

.btn.is-finish{
 background-color: var(--color-red);
 border-color: var(--color-dark-900);
 color: #fff; 
}


/* ----------------------------------------------------------------- */
/* sprites */
/* ----------------------------------------------------------------- */
.sprite{
 background: url(https://image.globoplaymkt.globo.com/lib/fe3311717064047d721777/m/8/0adcd069-64c7-41d6-bd90-f2c170eec7f2.png) top left no-repeat;
}

.sprite.is-prev{
 width: 12px; 
 height: 26px;
}

.sprite.is-next{
 width: 13px;
    height: 26px;
    background-position: -44px 0;
}

.sprite.is-reload{
 width: 27px;
    height: 27px;
    background-position: -79px 0;
}

.btn:hover .sprite.is-prev{
    background-position: 0 -26px;
}

.btn:hover .sprite.is-next{
    background-position: -44px -26px;
}

.btn:hover .sprite.is-reload{
    background-position: -79px -26px;
}

/* ----------------------------------------------------------------- */
/* form-control */
/* ----------------------------------------------------------------- */

.form-control {
    width: 100%;
    height: 64px;
    margin-bottom: 15px;
    padding: 1px 10px;
    
    font-size: 18px;
    font-family: var(--ff-globotipo);
    font-weight: 400;
 text-align: center;
    color: var(--color-dark-900);
    vertical-align: bottom;
    outline: transparent;
    border: 1px solid  var(--color-dark-900);
    background-color: #FFF;
    
    transition: all 0.3s ease-in-out;
  
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

::-webkit-input-placeholder{ 
 text-align: center; 
 color: var(--color-dark-900) 
}
::-ms-input-placeholder{ 
 text-align: center; 
 color: var(--color-dark-900); opacity: 1; 
}
:-ms-input-placeholder{ 
 text-align: center; 
 color: var(--color-dark-900) 
}
::placeholder { 
 text-align: center; 
 color: var(--color-dark-900) 
}
.form-control:focus{
    border-color: var(--color-red);
}

/* ----------------------------------------------------------------- */
/* form */
/* ----------------------------------------------------------------- */
.form{
 max-width: 385px;
 margin: 0 auto  0 auto
}

.form .btn{
 margin-bottom: 20px;
}

.checkbox{
 margin: 10px 0 10px 0;
 display: block;
 font-size: 13px;
 cursor: pointer;
}

/* ----------------------------------------------------------------- */
/* erros */
/* ----------------------------------------------------------------- */

.error{
    font-size: 14px;
    color: red;
}
.error > *{
    display: block;
    margin-bottom: 5px;
}

/* ------------------------------------------------- */
/* vencedor  */
/* ------------------------------------------------- */
.vencedor__thumb img{
 max-width: 100%;
 display: block;
 margin: 0 auto 25px auto;
}

.vencedor__sup-title{
 text-transform: uppercase;
 text-align: center;
 font-size: 17px;
}

.vencedor__title{
 margin-bottom: 20px;
 text-transform: uppercase;
 text-align: center;
 font-size: 24px;
 font-family: var(--ff-globotipo-black);
 color: var(--color-red);
}

.vencedor__description{
 max-width: 415px;
 margin: 0 auto 20px auto;
 text-align: center;
}

@media(min-width: 768px){

 .vencedor__sup-title{
  font-size: 22px;
 }

 .vencedor__title{
  font-size: 32px;
 }
}

/* ------------------------------------------------- */
/* reset  */
/* ------------------------------------------------- */


.btn.is-reset{
 max-width: 384px;
 margin: 0 auto 20px auto;
 flex-grow: 1;
 display: flex;
 flex-direction: row;
 justify-content: center;
 gap: 20px;
 align-items: center;
 background-color: transparent;
 border-color: var(--color-dark-900);
 color: var(--color-dark-900);
}

.btn.is-reset:hover{
 background-color: var(--color-dark-900);
 color: #fff;
}

/* ------------------------------------------------- */
/* RASATRO  */
/* ------------------------------------------------- */
.rastro{
 max-width: 526px;
 height: 21px;
 margin-left: auto;
 margin-right: auto;
 position: relative;
 margin-top: -16px;
 display: flex;
 flex-direction: row;
}

.rastro-right,
.rastro-left{
 width: 26px;
 flex-grow: 0;
}

.rastro-center{
 flex-grow: 1;
 background: url(https://image.globoplaymkt.globo.com/lib/fe3311717064047d721777/m/8/eed3135f-f19b-4eb9-84b6-10f36efcb12d.png) center repeat-x;
 background-size:  100% 100%;
}

.rastro-right{
 background: url(https://image.globoplaymkt.globo.com/lib/fe3311717064047d721777/m/8/1342d5d1-18e7-43b7-b51d-111ebf74f989.png) center no-repeat;
 background-size:  100% 100%;
}
.rastro-left{
 background: url(https://image.globoplaymkt.globo.com/lib/fe3311717064047d721777/m/8/014202a9-3b0f-4b62-b20d-db896b04aec7.png) center no-repeat;
 background-size:  100% 100%;
}

@media(min-width: 768px){

 .rastro{
  height: 70px;
  max-width: 740px;
  margin-top: -40px;
 }
 .rastro-center{
  background-image: url(https://image.globoplaymkt.globo.com/lib/fe3311717064047d721777/m/8/a44faf2d-989f-43f5-a829-4a57e45ea909.png);
 }
 
 .rastro-right{
  width: 83px;
  background-image: url(https://image.globoplaymkt.globo.com/lib/fe3311717064047d721777/m/8/f5071760-ea97-4c10-8d3f-7a01518759c1.png);
 }
 .rastro-left{
  width: 83px;
  background-image: url(https://image.globoplaymkt.globo.com/lib/fe3311717064047d721777/m/8/d59269e3-e30b-42ae-a0c1-42ff6d4282e6.png);
 }
 
}

@media(min-width: 1220px){

 .rastro{
  max-width: 1215px;
 }
 
}

/* ------------------------------------------------- */
/* COPYRIGHT  */
/* ------------------------------------------------- */

.copyright {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    text-align: center;
    color: #B7B7B7;
    padding: 15px 50px;
    background-color: #151515;
}
.copyright p { 
 width: 100%; 
 font-size: 10px;
}

.copyright p:first-child { 
 margin-bottom: 10px;
}

@media ( min-width: 794px ) {

 .copyright {
  text-align: unset;
  padding: 15px 50px;
 }

 .copyright p { 
  width: auto; 
 }

    .copyright p:first-child { 
  margin-bottom: 0; 
 }
}

.copyright .links a { 
 padding: 0 10px; 
 display: inline-block; 
 color: #B7B7B7;
 text-decoration: underline;
}