@font-face{
    font-family: 'Manrope';
    src: url('fonts/Manrope-VariableFont_wght.ttf'),
    url('fonts/Manrope-VariableFont_wght.ttf') format('ttf');
}
@font-face{
    font-family: 'BreeBoldItalic';
    src: url('fonts/Bree Serif Bold Italic.otf'),
    url('fonts/Bree Serif Bold Italic.otf') format('otf');
}
.pupa,
.borboleta {
    animation: moveLeftRight 2s ease-in-out infinite alternate;
}
@keyframes moveLeftRight {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-20px);
    }
}
body {
    margin: 0;
    padding: 0;
}
header {
    width: 100%;
    background: #d3d0d6;
    margin: 0;
    padding: 20px;
    box-sizing: border-box;
    text-align:center;
}
header img{
    width:17.5%;
}
#banner img{
    width: 100%;
}
#banner{
    text-align:center;
}
#banner h1{
    font-family:'Manrope';
    line-height:1em;
    font-size:40px;
    color:#ffffff;
    font-weight:600;
    margin-top:-550px
}
#banner h2{
    font-family:'BreeBoldItalic';
    line-height:0.8em;
    font-size:60px;
    color:#ff964e;
    margin-top:-30px;
}
#banner .pupa{
    width:7.5%;
    position:relative;
    left:-440px;
    top:-420px;
}
#banner .borboleta{
    width:20%;
    position:relative;
    right:-450px;
    top:-180px;
}
#subbanner{
    text-align:center;
    background:#d3d0d6;
    padding:20px;
    margin-top:-200px;
}
#subbanner h1{
    font-family:'BreeBoldItalic';
    line-height:0.8em;
    font-size:60px;
    color:#e42673;
}
#subbanner h2{
    font-family:'Manrope';
    font-size:15px;
    text-transform:uppercase;
    color:#ff964e;
    background:#4e2377;
    padding:15px;
    width:50%;
    margin:0 auto;
    margin-top:-20px;
}
#subbanner h3{
    font-family:'Manrope';
    font-size:18px;
    color:#211c60;
    margin-top:10px;
    font-weight:500;
}
#subbanner h3 span{
    font-weight:900;
}
#video img{
    width:100%;
    margin-bottom:-213px;
}
#video div{
    background:#e42673;
    width:50%;
    margin-left:-5%;
    margin-top:-200px;
    padding:30px;
    display:inline-block;
    text-align:center;
    border-radius:0px 280px 320px 0px;
}
#video div h1{
    font-family:'BreeBoldItalic';
    line-height:1.1em;
    font-size:30px;
    color:#ff964e;
    margin-top:100px;
}
#video div h2{
    font-family:'Manrope';
    font-size:20px;
    color:#ffffff;
    margin-top:-20px;
    font-weight:500;
}
#video div h3{
    font-family:'Manrope';
    font-size:21px;
    color:#4e2377;
    font-weight:500;
    background:#ff964e;
    border-radius:20px;
    margin-top:-10px;
    margin-left:auto;
    margin-right:auto;
    width:200px;
    cursor:pointer;
    margin-bottom:100px;
}
#video div a{
    text-decoration:none;
}
#servicos{
    background:#4e2377;
    margin-top:-50px;
}
#servicos .logo{
    width:25%;
    margin-left:10%;
    margin-top:150px;
}
#servicos h3{
    font-family:'BreeBoldItalic';
    line-height:0.8em;
    font-size:60px;
    color:#e42673;
    margin-top:-600px;
    margin-left:600px;
}
#servicos .pupa{
    margin-top:-210px;
    width:6%;
    display:block;
    float:right;
    margin-right:10%;
}
#col1 h1, #col2 h1{
    font-family:'Manrope';
    color:#ff964e;
    font-weight:900;
    font-size:22px;
}
#col1 h2, #col2 h2{
    font-family:'Manrope';
    color:#ffffff;
    font-weight:300;
    font-size:18px;
    line-height:1em;
    margin-top:-20px;
}
#col1{
    margin-left:45%;
}
#col2{
    float:right;
    margin-right:10%;
    margin-top:-435px;
}
#space{
    height:100px;
}
#clientes h1{
    font-family:'BreeBoldItalic';
    line-height:0.8em;
    font-size:60px;
    color:#e42673;
    text-align:center;
}
#clientes h2{
    font-family:'Manrope';
    font-weight:500;
    font-size:18px;
    text-align:center;
    margin-top:-30px;
    color:#ff964e;
}
#clientes img{
    width:50%;
    display:block;
    margin:0 auto;
    margin-top:30px;
    margin-bottom:50px;
}
#depoimentos img{
    width:100%;
}
#dep1 img{
    width:12.5%;
    margin-left:7.5%;
    margin-top:-600px;
    display:block;
}
#dep1 h1{
    font-family:'BreeBoldItalic';
    line-height:1em;
    font-size:40px;
    color:#ff964e;
    margin-top:-200px;
    margin-left:22%;
}
#dep1 h2{
    font-family:'BreeBoldItalic';
    line-height:1em;
    font-size:20px;
    color:#ff964e;
    margin-top:-30px;
    margin-left:22%;
}
#dep1 h3{
    font-family:'Manrope';
    font-weight:500;
    font-size:15px;
    color:#ffffff;
    margin-left:22%;
    line-height:1em;
}
#dep2 img{
    width:12.5%;
    margin-top:2.5%;
    margin-left:53%;
    display:block;
}
#dep2 h1{
    font-family:'BreeBoldItalic';
    line-height:1em;
    font-size:40px;
    color:#ff964e;
    margin-top:-160px;
    margin-left:33%;
}
#dep2 h2{
    font-family:'BreeBoldItalic';
    line-height:1em;
    font-size:20px;
    color:#ff964e;
    margin-top:-30px;
    margin-left:16%;
}
#dep2 h3{
    font-family:'Manrope';
    font-weight:500;
    font-size:15px;
    color:#ffffff;
    margin-right:47.5%;
    line-height:1em;
    text-align:right;
}
#dep3 img{
    width:12.5%;
    margin-left:7.5%;
    margin-top:80px;
    display:block;
}
#dep3 h1{
    font-family:'BreeBoldItalic';
    line-height:1em;
    font-size:40px;
    color:#ff964e;
    margin-top:-200px;
    margin-left:22%;
}
#dep3 h2{
    font-family:'BreeBoldItalic';
    line-height:1em;
    font-size:20px;
    color:#ff964e;
    margin-top:-30px;
    margin-left:22%;
}
#dep3 h3{
    font-family:'Manrope';
    font-weight:500;
    font-size:15px;
    color:#ffffff;
    margin-left:22%;
    line-height:1em;
}
#contato img{
    width:100%;
    margin-top:19px;
}
#contato h1{
    font-family:'BreeBoldItalic';
    font-size:60px;
    color:#e42673;
    line-height:0.9em;
}
.col1{
    text-align:center;
    margin-top:-400px;
    margin-left:-55%;
}
#contato h2{
    font-family:'Manrope';
    font-size:15px;
    font-weight:100px;
    color:#ff964e;
    text-align:center;
    text-transform:uppercase;
    margin-top:-40px;
    margin-left:-55%;
}
#contato div{
    margin-top:-370px;
    margin-left:55%;
}
#contato div h1{
    margin-bottom:10px;
}
#contato form input, #contato form textarea, #contato form select{
    font-family:'Manrope';
    width:80%;
    font-size:18px;
    font-weight:600;
    box-sizing:border-box;
    padding:5px;
    border:2px solid #211c60;
    background:transparent;
}
#contato ::-webkit-input-placeholder{
   color:#211c60;
}
#contato form input{
    margin-bottom:5px;
}
#como_conheceu{
   color:#211c60; 
}
#contato button{
    margin-top:5px;
    font-family:'Manrope';
    width:80%;
    color:#ffffff;
    font-size:18px;
    font-weight:900;
    box-sizing:border-box;
    padding:5px;
    border:2px solid #211c60;
    background:#211c60;
    cursor:pointer;
}
#contato h3{
    font-family:'Manrope';
    font-size:22px;
    font-weight:900px;
    color:#e42673;
    margin-bottom:-10px;
}
#contato span{
    display:flex;
    width:60%;
}
#newsletter{
    text-align:center;
    background:#211c60;
    padding:50px;
}
#newsletter h1{
    font-family:'BreeBoldItalic';
    line-height:1em;
    font-size:40px;
    color:#ff964e;
}
#newsletter h2{
    font-family:'BreeBoldItalic';
    line-height:1em;
    font-size:20px;
    color:#ff964e;
    margin-top:-30px;
}
#newsletter form input{
    font-family:'Manrope';
    width:40%;
    font-size:15px;
    font-weight:600;
    box-sizing:border-box;
    padding:5px;
    border:2px solid #ffffff;
    background:transparent;
    margin-bottom:5px;
}
#newsletter ::-webkit-input-placeholder{
   color:#ffffff;
}
#newsletter button{
    font-family:'Manrope';
    width:40%;
    color:#211c60;
    font-size:18px;
    font-weight:900;
    box-sizing:border-box;
    padding:5px;
    border:2px solid #ff964e;
    background:#ff964e;
    cursor:pointer;
}
#newsletter hr{
    width:30%;
    border:1px solid #e42673;
    margin-top:25px;
    margin-bottom:25px;
}
#newsletter h3 a{
    text-decoration:none;
    font-family:'Manrope';
    color:#211c60;
    font-size:12px;
    font-weight:900;
    box-sizing:border-box;
    padding:5px;
    border:2px solid #ff964e;
    background:#ff964e;
    cursor:pointer;
    border-radius:20px;
}
#newsletter h4 a{
    text-decoration:none;
    font-family:'Manrope';
    color:#211c60;
    font-size:12px;
    font-weight:900;
    box-sizing:border-box;
    padding:5px;
    border:2px solid #ff964e;
    background:#ff964e;
    cursor:pointer;
    border-radius:20px;
}
#whatsapp img{
    position:fixed;
    bottom:20px;
    right:20px;
    z-index:999;
    width:50px;
}
footer{
    background:#4e2377;
    padding:10px;
    text-align:center;
}
footer h1{
    font-family:'Manrope';
    color:#e42673;
    font-size:35px;
    font-weight:500;
    line-height:1em;
    margin-bottom:50px;
}
footer h1 span{
    font-family:'BreeBoldItalic';
    color:#ff964e;
    font-size:45px;
}
#coluna1 img{
    width:10%;
    margin-left:-40%;
}
#coluna2 h2{
    font-family:'Manrope';
    color:#ffffff;
    font-size:13px;
    font-weight:500;
    line-height:1em;
}
#coluna2{
    margin-top:-80px;
}
#coluna3 img{
    width:5%;
}
#coluna3{
    margin-left:40%;
    margin-top:-50px;
    margin-bottom:5%;
}
@media screen and (min-width: 1920px){
    #banner .pupa{
        width:7%;
        left:-600px;
        top:-590px;
    }
    #banner h1{
        margin-top:-720px;
    }
    #banner .borboleta{
        width:18%;
        right:-560px;
    }
    #video div{
        margin-top:-220px;
    }
    #servicos .logo{
        width:20%;
    }
    #servicos h3{
        margin-left:850px;
    }
    #servicos .pupa{
        width:4.5%;
        margin-right:20%;
    }
    #dep1 img{
        margin-top:-831px;
    }
    #dep1 h1{
        margin-top:-230px;
    }
    #dep2 h1{
        margin-top:-180px;
        margin-left:38.7%;
    }
    #dep2 h2{
        margin-left:26.7%;
    }
    #dep3{
        margin-bottom:95px;
    }
    #dep3 h1{
        margin-top:-210px;
    }
    .col1{
        margin-top:-550px;
    }
    #newsletter{
        margin-top:120px;
    }
    #coluna2{
        margin-top:-105px;
    }
    #coluna3{
        margin-top:-60px;
    }
}
/** SAFARI ONLY */
  @media not all and (min-resolution: .001dpcm) {
    @supports(-webkit-appearance:none) and (stroke-color:transparent) {
        #banner .pupa{
            width:7%;
            left:-600px;
            top:-590px;
        }
        #banner h1{
            margin-top:-720px;
        }
        #banner .borboleta{
            width:18%;
            right:-560px;
        }
        #video div{
            margin-top:-220px;
        }
        #servicos .logo{
            width:20%;
        }
        #servicos h3{
            margin-left:850px;
        }
        #servicos .pupa{
            width:4.5%;
            margin-right:20%;
        }
        #dep1 img{
            margin-top:-831px;
        }
        #dep1 h1{
            margin-top:-230px;
        }
        #dep2 h1{
            margin-top:-180px;
            margin-left:38.7%;
        }
        #dep2 h2{
            margin-left:24.5%;
        }
        #dep3{
            margin-bottom:95px;
        }
        #dep3 h1{
            margin-top:-210px;
        }
        .col1{
            margin-top:-550px;
        }
        #newsletter{
            margin-top:120px;
        }
        #coluna2{
            margin-top:-105px;
        }
        #coluna3{
            margin-top:-60px;
        }
        #coluna1 img{
            margin-left:-25%;
        }
    }
  }
/** SAFARI ONLY */
@media screen and (max-width: 768px){
    header img{
        width:55%;
    }
    #banner img{
        height:220px;
    }
    #banner .pupa{
        width:7.5%;
        height:auto;
        left:-130px;
        top:-220px;
    }
    #banner h1{
        font-size:16px;
        margin-top:-240px;
    }
    #banner h2{
        font-size:25px;
        margin-top:-10px;
    }
    #banner .borboleta{
        height:auto;
        right:-150px;
        top:-30px;
    }
    #subbanner{
        margin-top:-50px;
    }
    #subbanner h1{
        font-size:30px;
    }
    #subbanner h2{
        width:80%;
        margin-top:-15px;
    }
    #subbanner h3{
        font-size:12px;
        font-weight:700;
    }
    #video img{
        margin-bottom:-100px;
    }
    #video div{
        width:100%;
        margin-left:0%;
        margin-top:95px;
        padding:0px;
        border-radius:0px;
    }
    #video div h1{
        font-size:20px;
        margin-top:20px;
    }
    #video div h2{
        font-size:15px;
        margin-top:-15px;
    }
    #video div h3{
        margin-bottom:20px;
        font-size:18px;
    }
    #servicos{
        margin-top:0px;
    }
    #servicos .logo{
        width:50%;
        margin-left:25%;
        margin-top:50px;
    }
    #servicos h3{
        font-size:40px;
        text-align:center;
        margin-top:0px;
        margin-left:0px;
    }
    #servicos .pupa{
        margin-top:-40px;
        width:10%;
    }
    #col1{
        margin-left:12%;
    }
    #col2{
        float:left;
        margin-left:12%;
        margin-top:-15px;
    }
    #space{
        height:450px;
    }
    #clientes h1{
        font-size:40px;
    }
    #clientes img{
        width:100%;
    }
    #depoimentos img{
        display:none;
    }
    #depoimentos{
        background:#ac005e;
        padding-top:25px;
        padding-bottom:25px;
    }
    #dep1 img{
        display:block !important;
        margin-top:0px;
        width:30%;
        margin-left:35%;
    }
    #dep1 h1{
        margin-top:0px;
        margin-left:0%;
        text-align:center;
        font-size:30px;
    }
    #dep1 h2{
        font-size:15px;
        margin-top:-20px;
        margin-left:0%;
        text-align:center;
    }
    #dep1 h3{
        margin-left:0%;
        font-size:13px;
        text-align:center;
    }
    #dep2 img{
        display:block !important;
        margin-top:0px;
        width:30%;
        margin-left:35%;
    }
    #dep2 h1{
        margin-top:0px;
        margin-left:0%;
        text-align:center;
        font-size:30px;
    }
    #dep2 h2{
        font-size:15px;
        margin-top:-20px;
        margin-left:0%;
        text-align:center;
    }
    #dep2 h3{
        margin-right:0%;
        font-size:13px;
        text-align:center;
    }
    #dep3 img{
        display:block !important;
        margin-top:0px;
        width:30%;
        margin-left:35%;
    }
    #dep3 h1{
        margin-top:0px;
        margin-left:0%;
        text-align:center;
        font-size:30px;
    }
    #dep3 h2{
        font-size:15px;
        margin-top:-20px;
        margin-left:0%;
        text-align:center;
    }
    #dep3 h3{
        margin-left:0%;
        font-size:13px;
        text-align:center;
    }
    #contato img{
        display:none;
    }
    #contato{
        background:#d3d0d6;
        padding:25px;
    }
    .col1{
        margin-top:0px;
        margin-left:0%;
    }
    #contato h1{
        font-size:30px;
    }
    #contato h2{
        margin-top:-20px;
        margin-left:0%;
        color:#211c60;
    }
    #contato div{
        margin-left:0%;
        margin-top:0px;
        text-align:center;
    }
    #contato span img{
        display:block !important;
    }
    #contato span{
        width:100%;
    }
    #newsletter{
        padding:10px;
    }
    #newsletter h1{
        font-size:28px;
    }
    #newsletter h2{
        font-size:14px;
        margin-top:-20px;
    }
    #newsletter form input{
        width:90%;
    }
    #newsletter button{
        width:90%;
    }
    #newsletter hr{
        width:80%;
    }
    #newsletter h4 a{
        font-size:16px;
    }
    #newsletter h3 a{
        font-size:16px;
    }
    footer h1{
        margin-bottom:30px;
    }
    #coluna1 img{
        width:50%;
        margin-left:0%;
    }
    #coluna2 h2{
        line-height:0.5em;
    }
    #coluna2{
        margin-top:20px;
    }
    #coluna3{
        margin-left:0%;
        margin-top:30px;
    }
    #coluna3 img{
        width:15%;
    }
}