html,
body {
    height: 100%;
    margin: 0;
}
body{
    font-family: "Open Sans", sans-serif;
    background-color: #E8EEFF;
    display: flex;
    flex-direction: column;
}
body a{
    text-decoration: none;
}

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #4565BE; 
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: grey; 
}

.content {
    position: relative;
    width: 100%;
    height: 100vh;
    margin: 15px auto 0;
    display: block;
    text-align: center;
}

.content a:hover, .content button:hover{
    opacity: 0.7;
}

.content h1,
.content h2,
.content h3 {
    font-size: 42px;
    color: #3D5FC0;
    text-shadow: rgb(255, 255, 255) 4px 0px 0px, rgb(255, 255, 255) 3.87565px 0.989616px 0px, rgb(255, 255, 255) 3.51033px 1.9177px 0px, rgb(255, 255, 255) 2.92676px 2.72656px 0px, rgb(255, 255, 255) 2.16121px 3.36588px 0px, rgb(255, 255, 255) 1.26129px 3.79594px 0px, rgb(255, 255, 255) 0.282949px 3.98998px 0px, rgb(255, 255, 255) -0.712984px 3.93594px 0px, rgb(255, 255, 255) -1.66459px 3.63719px 0px, rgb(255, 255, 255) -2.51269px 3.11229px 0px, rgb(255, 255, 255) -3.20457px 2.39389px 0px, rgb(255, 255, 255) -3.69721px 1.52664px 0px, rgb(255, 255, 255) -3.95997px 0.56448px 0px, rgb(255, 255, 255) -3.97652px -0.432781px 0px, rgb(255, 255, 255) -3.74583px -1.40313px 0px, rgb(255, 255, 255) -3.28224px -2.28625px 0px, rgb(255, 255, 255) -2.61457px -3.02721px 0px, rgb(255, 255, 255) -1.78435px -3.57996px 0px, rgb(255, 255, 255) -0.843183px -3.91012px 0px, rgb(255, 255, 255) 0.150409px -3.99717px 0px, rgb(255, 255, 255) 1.13465px -3.8357px 0px, rgb(255, 255, 255) 2.04834px -3.43574px 0px, rgb(255, 255, 255) 2.83468px -2.82216px 0px, rgb(255, 255, 255) 3.44477px -2.03312px 0px, rgb(255, 255, 255) 3.84068px -1.11766px 0px, rgb(255, 255, 255) 3.9978px -0.132717px 0px;
}

.content h1 span {
    text-transform: uppercase;
    color: #1e55ee;
}

.content h2.thanks {
    font-size: 22px;
    color: #11940d;
}

.content h2.thanks strong{
    text-transform: uppercase;
}

.content h3{
    font-size: 30px;
}

.content h3 span{
    font-size: 22px;
    line-height: 18px;
    font-weight: 600;
    text-shadow: 2px 2px 2px #fff, 2px 2px 2px #FFFFFF;
}

.content h4 {
    font-size: 16px;
    line-height: 20px;
    text-shadow: 2px 2px 2px #fff, 2px 2px 2px #FFFFFF;
}

.content h5 {
    font-size: 14px;
    line-height: 18px;
    font-weight: normal;
    text-shadow: 2px 2px 2px #fff, 2px 2px 2px #e8eeff;
}

/* HEADER */
.content .header{
    position: relative;
    width: 70%;
    margin: 0 auto;
    padding: 5px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top-left-radius: 40px;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 50px;
    background-color: #E8EEFF;
    border: 3px solid #fff;
    box-shadow: 4px 4px 4px rgba(75, 74, 74, 0.315);
}

.content .header .logo{
    position: relative;
    width: 50%;
    height: 70px;
    background: url('../img/logo__horizontal_transp.png') no-repeat left center;
    background-size: 200px auto;
}

.content .header .logo a{
    width:100%;
    height: 100%;
    display: block;
    cursor: pointer;
}

.content .header .logo:hover {
    opacity: 0.7;
}

.content .header .right{
    position: relative;
    width: 50%;
}

.content .header .right button {
    position: relative;
    width: 130px;
    height: 40px;
    margin: 0 auto;
    display: block;
    float: right;
    font-size: 16px;
    color: #fff;
    background-color: #3d5fc0;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    box-shadow: 3px 3px 3px rgb(245, 242, 242);
}

.content .header .right button.dev,
.content .header .right button.btn-contato {
    width: 250px;
    margin-right: 12px;
    font-size: 14px;
}

.content .header .right button.btn-contato{
    width: 90px;
}

/* BOXES */
.content .boxes {
    position: relative;
    width: 60%;
    height: auto;
    margin: 0 auto 20px;
    padding: 5px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.content .boxes .box-left,
.content .boxes .box-right {
    position: relative;
    width: 48%;
    height: 100%;
    margin: 0 auto;
    bottom: 10px;
    padding: 5px 10px;
    color: #413f3f;
    align-items: center;
    justify-content: space-between;
    border-top-left-radius: 8px;
    border-top-right-radius: 40px;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    background-color: #F1F4FF;
    border: 5px solid #fff;
    box-shadow: 4px 4px 4px rgba(75, 74, 74, 0.315);
    clear: both;
}
.content .boxes .box-right{
    margin-left: 4%;
    background: url('../img/plano-completo.png') no-repeat -20px -20px;
    background-size: 110px auto;
}

.content .boxes .box-left h2,
.content .boxes .box-right h2{
    position: relative;
    width: 100%;
    margin: 20px auto 0px;
    text-align: center;
    font-size: 28px;
    line-height: 26px;
}

.content .boxes .box-left h2 span,
.content .boxes .box-right h2 span{
    font-size: 16px;
}

.content .boxes .box-left .subtitle,
.content .boxes .box-left .subtitle2,
.content .boxes .box-right .subtitle,
.content .boxes .box-right .subtitle2 {
    position: relative;
    width: 100%;
    margin: 10px auto 5px;
    text-align: center;
    font-size: 13px;
}

.content .boxes .box-left .subtitle2,
.content .boxes .box-right .subtitle2{
    position: relative;
    width: 100%;
    margin: 15px auto 0px;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    color: #e70707;
    animation: pisca 1s linear infinite;
}

.content .boxes .box-left .subtitle2 span,
.content .boxes .box-right .subtitle2 span{
    font-size: 18px;
    
}

@keyframes pisca {
    0% {opacity: 1;}
    25% {opacity: 0.5;}
    50% {opacity: 0;}
    75% {opacity: 0.5;}
    100% {opacity: 1;}
}

.content .boxes .box-left .preco,
.content .boxes .box-right .preco {
    position: relative;
    width: 100%;
    height: 50px;
    margin: 0 auto;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    line-height: 60px;
    text-shadow: rgb(255, 255, 255) 4px 0px 0px, rgb(255, 255, 255) 3.87565px 0.989616px 0px, rgb(255, 255, 255) 3.51033px 1.9177px 0px, rgb(255, 255, 255) 2.92676px 2.72656px 0px, rgb(255, 255, 255) 2.16121px 3.36588px 0px, rgb(255, 255, 255) 1.26129px 3.79594px 0px, rgb(255, 255, 255) 0.282949px 3.98998px 0px, rgb(255, 255, 255) -0.712984px 3.93594px 0px, rgb(255, 255, 255) -1.66459px 3.63719px 0px, rgb(255, 255, 255) -2.51269px 3.11229px 0px, rgb(255, 255, 255) -3.20457px 2.39389px 0px, rgb(255, 255, 255) -3.69721px 1.52664px 0px, rgb(255, 255, 255) -3.95997px 0.56448px 0px, rgb(255, 255, 255) -3.97652px -0.432781px 0px, rgb(255, 255, 255) -3.74583px -1.40313px 0px, rgb(255, 255, 255) -3.28224px -2.28625px 0px, rgb(255, 255, 255) -2.61457px -3.02721px 0px, rgb(255, 255, 255) -1.78435px -3.57996px 0px, rgb(255, 255, 255) -0.843183px -3.91012px 0px, rgb(255, 255, 255) 0.150409px -3.99717px 0px, rgb(255, 255, 255) 1.13465px -3.8357px 0px, rgb(255, 255, 255) 2.04834px -3.43574px 0px, rgb(255, 255, 255) 2.83468px -2.82216px 0px, rgb(255, 255, 255) 3.44477px -2.03312px 0px, rgb(255, 255, 255) 3.84068px -1.11766px 0px, rgb(255, 255, 255) 3.9978px -0.132717px 0px;
}

.content .boxes .box-left .preco em,
.content .boxes .box-right .preco em {
    font-size: 40px;
}

.content .boxes .box-left .preco span,
.content .boxes .box-right .preco span{
    font-size: 60px;
    letter-spacing: -4px;
}

.content .boxes .box-left ul,
.content .boxes .box-right ul {
    position: relative;
    display: block;
    list-style-type: none;
    padding: 0;
    margin: 20px 0;
}

.content .boxes .box-left ul li,
.content .boxes .box-right ul li{
    position: relative;
    font-size: 14px;
    background: url('../img/icon-check-green.png') no-repeat 26px center;
    background-size: 16px auto;
    line-height: 28px;
    margin-left: 50px;
    padding-left: 50px;
    text-align: left;
    text-shadow: 2px 2px 2px rgb(255, 251, 251);
}

.content .boxes .box-left ul li.red,
.content .boxes .box-right ul li.red{
    background: url('../img/icon-check-red.png') no-repeat 26px center;
    background-size: 16px auto;
    color: #ff0000;
    opacity: 0.25;
}

.content .boxes .box-left button,
.content .boxes .box-right button {
    position: relative;
    height: 40px;
    margin: 10px auto;
    padding: 0 30px;
    display: block;
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
    color: #fff;
    background-color: #3d5fc0;
    border: none;
    border-radius: 18px;
    cursor: pointer;
    box-shadow: 3px 3px 3px rgba(48, 47, 47, 0.5);
    animation: pisca 1s linear infinite;
}

.content .boxes .box-left button{
    background-color: #fff;
    color: #000;
}


/* Cloud */
.cloud,
.construtores{
    position: relative;
    width: 50%;
    height: 320px;
    margin: 30px auto 40px;
    background: #fff url('../img/cloud.png') no-repeat center center;
    background-size: 75% auto;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    border-top-left-radius: 8px;
    border-top-right-radius: 40px;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    background-color: #fff;
    border: 5px solid #4565BE;
}

/* Construtores */
.construtores {
    height: 350px;
    margin: 30px auto 50px;
    background: #fff url('../img/construtores.png') no-repeat center center;
    background-size: 90% auto;
}

/* FOOTER */
.content .footer {
    position: relative;
    width: 96%;
    height: 100px;
    padding: 5px 2%;
    bottom: 0;
    left: 0px;
    right: 0px;
    margin: 0px auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top-left-radius: 200px;
    border-top-right-radius: 30px;
    background-color: #3d5fc0;
}

.content .footer .logo {
    position: relative;
    width: 50%;
    height: 100%;
    background: url('../img/logo-footer.png') no-repeat 30px center;
    background-size: 200px auto;
}

.content .footer .logo a {
    width: 100%;
    height: 100%;
    display: block;
    cursor: pointer;
}

.content .footer .logo:hover{
    opacity: 0.7;
}

.content .footer .cnpj{
    position: relative;
    width: 50%;
    color: #fff;
    font-size: 12px;
    line-height: 25px;
    text-align: right;
    right: 15px;
    line-height: 24px;
}

.content .footer .cnpj .icon-pgto,
.content .footer .cnpj .icon-contato {
    position: relative;
    text-decoration: none;
    color: #fff;
    background: url('../img/icon-contato.png') no-repeat left -6px;
    background-size: 30px auto;
    padding-left: 27px;
} 
.content .footer .cnpj .icon-pgto {
    background: url('../img/icon-pgto.png') no-repeat left 2px;
    background-size: 20px auto;
    padding-left: 27px;
    right: 10px;
}

.g-recaptcha{
    position: relative;
    width: 40%;
    height: auto;
    margin: 4px auto;
    display: block;
    float: left;
    display: block;
}

/* Telas Maiores */
@media only screen and (min-device-width: 1441px) {
    .content .header{
        width: 60%;
    }
}

/* MOBILE */
@media only all and (max-device-width: 768px) {

    .content{
        height: auto;

    }
    .content h1,
    .content h2,
    .content h3 {
        font-size: 22px;
    }

    .content h2.thanks {
        font-size: 16px;
    }
    .content h3{
        font-size: 20px;
    }
    .content h3 span{
        font-size: 16px;
    }
    .content h4 {
        font-size: 12px;
    }
    .content h5 {
        font-size: 12px;
    }

    .content .header{
        width: 94%;
        padding: 5px 0 5px 6px;
        margin: 5px 0 0 0 4px;
        border-top-left-radius: 20px;
        border-top-right-radius: 6px;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 40px;
    }

    .content .header .logo{
        width: 30%;
        background-size: 100% auto;
    }

    .content .header .right{
        width: 70%;
        right: 8px
    }

    .content .header .right button {
        width: 70px;
        height: 26px;
        font-size: 13px;
    }

    .content .header .right button.dev {
        width: 140px;
        margin-right: 4px;
    }

    /* BOXES */
    .content .boxes {
        width: 96%;
        margin: 0 0 20px 10px;
        padding: 5px 0; 
        display: block;
        float: left;
    }

    .content .boxes .box-left,
    .content .boxes .box-right {
        width: 90%;
        bottom: 10px;
        display: block;
        float: left;
        padding: 5px 10px;
    }
    .content .boxes .box-right{
        margin-left: 0;
        margin-top: 20px;
    }

    .content .boxes .box-left .subtitle2,
    .content .boxes .box-right .subtitle2{
        width: 62%;
    }

    .content .boxes .box-left ul li,
    .content .boxes .box-right ul li{
        font-size: 12px;
        margin-left: 10px;
        line-height: 22px;
    }

    /* Cloud */
    .cloud,
    .construtores{
        width: 90%;
        height: 150px;
        background-size: 85% auto;
    }

    /* Construtores */
    .construtores {
        height: 150px;
    }

    /* FOOTER */
    .content .footer {
        height: 100px;
        border-top-left-radius: 100px;
    }

    .content .footer .logo {
        width: 35%;
        background: url('../img/logo-footer.png') no-repeat 20px center;
        background-size: 100px auto;
    }

    .content .footer .cnpj{
        width: 65%;
        font-size: 10px;
        right: 10px;
        line-height: 20px;
    }

    .content .footer .cnpj .icon-pgto,
    .content .footer .cnpj .icon-contato {
        background: url('../img/icon-contato.png') no-repeat left -4px;
        background-size: 24px auto;
        padding-left: 23px;
    } 
    .content .footer .cnpj .icon-pgto {
        background: url('../img/icon-pgto.png') no-repeat left 3px;
        background-size: 14px auto;
        padding-left: 20px;
        right: 2px;
    }

    .content .footer .cnpj .txt{
        font-size: 7px;
    }

    
}