*{
    margin:0;
    padding:0;
}
body, html{
    font-family: 'Open Sans', sans-serif;
    font-style: normal;
    font-weight: 600;
    color:#fff;
    font-size: 16px;
}


.site{
    overflow: hidden;
}
h1, h2, h3, h4, p{
    margin:0;
    padding:0 0 20px 0;
    
}


h2{
    font-size: 2.8em;
    text-transform: uppercase;
}
.chamada1{
    font-family: 'Saira', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 2rem;
    line-height: 1em;
    text-transform: uppercase;
}

h1, h2, h3{
    font-family: 'Saira', sans-serif;
    font-style: normal;
    font-weight: 700;
    line-height: 1em;
    text-transform: uppercase;
}

.c1{
    color:#fff;
}

section{
    padding: 50px 0;
}


.banner-topo .cta{
    padding: 10px 20px;
    background: #da4a48;
    color: #fff;
    border-radius: 20px;
    margin-bottom: 50px;
    display: inline-block;
    text-transform: uppercase;
    transition: all 0.3s;
}

.banner-topo .cta:hover{
    background: #1b3058;
    color: #fff;
    text-decoration: none;
}

.box-a .c1 a{
    color: #f1bb1f;
}

.box-b p a{
    color: #da4a48;
}

h1 strong{
    color: #da4a48;
    font-size: 2.8rem;
}

.social {
    /* width: 150px; */
    display: inline-flex;
    list-style: none;
}
.social .nav-link {
    display: block;
    padding: .5rem .5rem;
    color:#fff;
    font-size: normal;
    font-size: 1.2em;
    font-weight: normal;
}
.social .nav-link:hover{
    color:#f1bb1f;
}
.social  a:hover{
    color:#f1bb1f;
}
header nav.navbar {
    background: #ae3e39;
    padding: 20px 0;
}

.logo-rodape{
    max-width: 150px;
    margin-bottom: 20px;
}


.banner-topo{
    padding: 50px 0;
    background: url(../img/bg-01.jpg) no-repeat #1b3058;
    background-position: 50% 50%;
    background-size: cover;
    position: relative;
}   



.banner-topo .sliPai{
 background:url(../img/mae.png) no-repeat;
 background-size: contain;
}


.box-a{
    background: url(../img/bg-02.jpg) no-repeat;
    background-position: 50% 50%; 
    background-size: cover;
}

.box-b{
    background: url(../img/bg-03.jpg) no-repeat;
    background-position: 50% 50%; 
    background-size: cover;
}

.box-a figure, .box-b figure{
    margin:-40px 0 0 0;
}

.btns img{
    transition: all ease .1s;
    margin-bottom: 30px;
}
.btns:hover img{
    
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=18, Direction=0, Color=#000000)";/*IE 8*/
    -moz-box-shadow: 0 18px 18px -11px rgba(0,0,0,0.4);/*FF 3.5+*/
    -webkit-box-shadow: 0 18px 18px -11px rgba(0,0,0,0.4);/*Saf3-4, Chrome, iOS 4.0.2-4.2, Android 2.3+*/
    box-shadow: 0 18px 18px -11px rgba(0,0,0,0.4);/* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=18, Direction=135, Color=#000000); /*IE 5.5-7*/
    
}



.compartilhe{
    background: #ae3e39;
}

.compartilhe ul.share-buttons{
    list-style: none;
    padding: 0;
    background: #ffffff00;
    padding: 6px;
    max-width:100px;
    margin:0 auto;
  }
  .compartilhe ul.share-buttons h4{
      color:#000;
      font-size:.8em;
      margin:0;
      padding:0 0 3px 0;
  }

  
  .compartilhe ul.share-buttons li{
    display: inline;
  }
  
  .compartilhe ul.share-buttons .sr-only{
    position: absolute;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px, 1px, 1px, 1px);
    padding: 0;
    border: 0;
    height: 1px;
    width: 1px;
    overflow: hidden;
  }
  
  .compartilhe ul.share-buttons img{
    width: 25px;
  }






.estilo{
    padding: 60px 0;
    text-align: center;
    background: -moz-radial-gradient(50% 50%, circle cover, #f05c54 0, #ae3e39 63%);/* FF3.6+ */
    background: -webkit-radial-gradient(50% 50%, circle cover, #f05c54 0, #ae3e39 63%);/* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(50% 50%, circle cover, #f05c54 0, #ae3e39 63%);/* Opera 11.10+ */
    background: -ms-radial-gradient(50% 50%, circle cover, #f05c54 0, #ae3e39 63%);/* IE10+ */
    background: radial-gradient(50% 50%, circle cover, #f05c54 0, #ae3e39 63%);/* W3C */}

.estilo a{
    color:#fff;
    text-decoration: none;
}
.estilo a:hover{
    color:#f1bb1f;
    text-decoration: none; 
}

.estilo h2{
    line-height: 1em;
    margin:0; padding: 0;
}

.estilo h2 span{
    font-weight: 400;
    color:#f1bb1f;
    font-size: 60%;
    
}

.share{
    background:#000000;
    padding: 0 0;
    text-align: center;

}
.shares{
    text-align: center;
}

.p1, .p2, .p3, .p4, .p5, .p6, .p7, .p8{
    padding: 4% 0;
    transition: all .2s ease;
}

.p1{
    background:url(../img/c-pai-high-tech.jpg) no-repeat;
    background-position: 50% 50%;
    background-size: cover;
   
    
}
.p2{
    background:url(../img/c-pai-executivo.jpg) no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    
}
.p3{
    background:url(../img/c-pai-conectado.jpg) no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    
}
.p4{
    background:url(../img/c-pai-gamer.jpg) no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    
}
.p5{
    background:url(../img/c-pai-gourmet.jpg) no-repeat;
    background-position: 50% 50%;
    background-size: cover;
  
}
.p6{
    background:url(../img/c-pai-aventureiro.jpg) no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    
}
.p7{
    background:url(../img/c-pai-rock.jpg) no-repeat;
    background-position: 50% 50%;
    background-size: cover;
   
}
.p8{
    background:url(../img/c-pai-player2.jpg) no-repeat;
    background-position: 50% 50%;
    background-size: cover;
   
}



.meuPaiNinja{
    padding: 80px 0;
    background: url(../img/bg-04.jpg) no-repeat;
    background-position: 50% 50%; 
    background-size: cover;
}

.meuPaiNinja .fotoSocial{
    border-top: 6px solid #f1bb1f;
    border-right: 18px solid #f1bb1f;
    border-bottom: 0;
    border-left: 7px solid #f1bb1f;
    max-width: 380px;
    margin:0 auto;
    position: relative;
}
.fotoSocial:before{
    content:"";
    position: absolute;
    top:-25px;
    left: -35px;
    width: 108px;
    height: 105px;
    background: url(../img/seta1.png) no-repeat;
}
.fotoSocial:after{
    content:"";
    position: absolute;
    bottom:-25px;
    right: -42px;
    width: 464px;
    height: 93px;
    background: url(../img/seta2.png) no-repeat;
}




footer{
    background: #000;
    padding:30px 0;
}


footer {
    padding: 30px 0;
    text-align: center;
    display: -webkit-flex;
    display: block;
    background: #ae3e39;
    overflow: hidden;

}

footer h6{
    color:#fff;
    font-size: .9em;
    padding-top:10px;
    margin: 0;
}
footer ul li a {
    color: inherit;
    padding: 0.9375rem;
    font-weight: 500;
    font-size: 1.4em;
    text-transform: uppercase;
    border-radius: 3px;
    text-decoration: none;
    position: relative;
    display: block;
  }

  #faq {
    background: #f1bb1f;
    padding: 50px 0;
    text-align: center
}

#faq h2 {
    font-size: 2rem;
    margin-bottom: 30px
}

#faq li {
    background: #da4a48;
    border-radius: 10px;
    padding: 20px;
    text-align: left
}

#faq li h3 {
    color: #fff;
    font-weight: 600;
    font-size: 1.2rem;
    margin-bottom: 0;
    padding: 0;
}

#faq li p {
    font-size: .9rem;
    margin-bottom: 10px
}

#faq li p a {
    color: #f1bb1f;
}

#faq li .uk-accordion-title::before {
    background: url(../img/seta-faq.webp) center center no-repeat;
    filter: brightness(100);
    background-size: contain;
    rotate: 180deg;
    transition: all .3s
}

#faq .uk-open .uk-accordion-title::before {
    rotate: 0deg
}

.flex {
    clear: both;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly
}

.center {
    justify-content: center
}

.between {
    justify-content: space-between
}

.gap {
    gap: 30px;
}

.wrap {
    flex-wrap: wrap;
}

section#cupom {
    background: url(../img/bg-cupom.webp) center top no-repeat;
    background-size: cover;
    position: relative;
    padding: 0;

}

#cupom .texto {
    max-width: 500px;
    position: relative;
    z-index: 3
}

#cupom .ninja {
    position: relative;
    z-index: 3
}

#cupom h2 {
    font-size: 2rem;
    margin-bottom: 20px;
    text-wrap: balance;
    color: #fff;
}

#cupom h2 strong {
    color: #ff6a13
}

#cupom p {
    font-size: .9rem;
    margin-bottom: 10px
}

#cupom .cta {
    background: #ff6300;
    padding: 10px;
    border-radius: 10px;
    display: flex;
    gap: 10px;
    width: -moz-fit-content;
    width: fit-content;
    justify-content: center;
    align-items: center;
    color: #fff;
    transition: all .3s;
    margin-top: 20px;
    text-transform: uppercase;
}
#cupom .cta:hover {
    background: #f1bb1f;
    text-decoration: none;
}



section#giftcard {
    background: url(../img/bg-02.jpg) no-repeat;
    background-position: 50% 50%; 
    background-size: cover;
    position: relative;
    padding: 50px 0;

}

#giftcard .texto {
    max-width: 500px;
    position: relative;
    z-index: 3
}

#giftcard .ninja {
    position: relative;
    z-index: 3
}

#giftcard h2 {
    font-size: 2rem;
    margin-bottom: 20px;
    text-wrap: balance;
    color: #fff;
}

#giftcard h2 strong {
    color: #ff6a13
}

#giftcard p {
    font-size: .9rem;
    margin-bottom: 10px
}

#giftcard .cta {
    background: #f1bb1f;
    padding: 10px;
    border-radius: 10px;
    display: flex;
    gap: 10px;
    width: -moz-fit-content;
    width: fit-content;
    justify-content: center;
    align-items: center;
    color: #000;
    transition: all .3s;
    margin-top: 20px;
    text-transform: uppercase;
}
#giftcard .cta:hover {
    background: #1b3058;
    text-decoration: none;
    color: #fff;
}

#oquevem{
    background: url(../img/bg-03.jpg) no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    text-align: center;
    box-sizing: border-box;
}

#oquevem h2{
    color: #fff;
    margin-bottom: 50px;
}

#oquevem .flex{
    justify-content: center;
    align-items: stretch;
    gap: 50px;
    flex-wrap: wrap;
}

#oquevem .box{
    background: #ff4744;
    padding: 30px;
    max-width: 500px;
    position: relative;
}

#oquevem .box::after{
    position: absolute;
    left: 0;
    top: 0;
    border: solid 2px #fff;
    width: 100%;
    height: 100%;
    content: "";
    rotate: -3deg;
    pointer-events: none;
}

#oquevem .box h3{
    font-size: 20px;
    color: #fff;
}

#oquevem .box p{
    font-size: 14px;
    color: #fff;
}

#oquevem .box img{
    max-width: 200px;
    aspect-ratio: 2 / 1;
    object-fit: contain;
    margin-bottom: 30px;
}


@media (max-width:600px){
#oquevem .box::after{
    display: none;
}
}



  @media (min-width:200px){
    .banner-topo{
        padding: 50px 0 0;
    }
    header .social{
        display: none;
    }
    header .navbar-brand{
        text-align: center;
        width: 150px;
    }

    header .navbar-brand img{
        max-width: 150px;
    }
     h2{
        font-size: 2.2em;
    }

    .box-a, .box-b{
        padding:50px 0 ;
    }

    .box-a figure, .box-b figure {
        margin: 30px 0 0 0;
    }

}

@media (min-width:576px){
    header .social{
        display: inherit;
    }
    header .navbar-brand{
        width: unset;
    }

    .box-a, .box-b{
        padding:50px 0 ;
    }
    .box-a figure, .box-b figure {
        margin: 20px 0 0 0;
    }

    h2{
        font-size: 2.4em;
    }
    p{
        font-size: 1em;
        line-height: 1.3em;
    }
    .share h3{
        font-size: .8rem;
    }

}

@media (min-width:768px){
    header .social{
        display: inherit;
    }
    header .navbar-brand{
        width: unset;
    }

    .box-a, .box-b{
        padding:50px 0 ;
    }
    .box-a figure, .box-b figure {
        margin: -40px 0 0 0;
    }

    h1{
        font-size: 2em;
    }
    h2{
        font-size: 2em;
    }
    p{
        font-size: .8em;
        line-height: 1.3em;
    }

    .share h3{
        font-size: 1.2rem;
    }

    

}


@media (min-width:992px){
    .box-a figure, .box-b figure {
        margin: -40px 0 0 0;
    }

    h1{
        font-size: 1.6rem;
    }
    h2{
        font-size: 2em;
    }
    p{
        font-size: 1em;
        line-height: 1.3em;
        margin-bottom: 10px;
    }
    .share h3{
        font-size: 1.4rem;
    }


}

@media (min-width:1200px){
    .box-a figure, .box-b figure {
        margin: -40px 0 0 0;
    }

    h1{
        font-size: 3em;
    }
    h2{
        font-size: 2.8em;
    }
    p{
        font-size: 1.2em;
        line-height: 1.3em;
        margin-bottom: 10px;
    }

    .share h3{
        font-size: 1.8rem;
    }


}

@media screen and (max-width: 1240px) {

    section#cupom {
        padding-top: 50px;
        text-align: center
    }

    #cupom .container {
        flex-direction: column-reverse
    }

    #cupom .texto {
        max-width: none
    }

    #cupom .cta {
        margin: 20px auto 0
    }

}