* {
    margin:0px;
    padding:0px;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}

section {
    position: relative;
    width:100%;
    padding: 100px 0px 100px;
}
#content {
    padding:0px;
}

.container {
    position: relative;
    width:1000px;
    height:100%;
    margin:0px auto;
}

header {
    position: relative;
    width:100%;
    background-color:rgb(71, 157, 255);
}


header .contatos {
    display:flex;
    justify-content: flex-start;
    align-items: center;
    align-content: center;

    padding:7px 0px;

    border-bottom:1px solid #FFF;
}

header .contatos a{
    text-decoration: none;
    color:rgb(243, 243, 243);
    padding:0px 10px;
}
header .contatos .status-loja{
    position: absolute;
    width:300px;
    left:100%;
    text-align:right;
    transform: translateX(-100%);
    text-decoration: none;
    color:rgb(255, 255, 255);
    padding:0px 10px;
}


header .logo-menu {
    height:90px;
    display:flex;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
}

header #logo {
    height:60px;
}
.navMobile {
    position: fixed;
    width:100%;
    height:0px;
    top:0px;
    left:0px;
    z-index:10;
    background-color:#000;
    overflow: hidden;
    transition: height .5s;
}
header .barsMobile {
    display:none;
    position: relative;
    color:#FFF;
    padding:12px 15px;
    font-weight: 500;
    background-color:rgb(0, 97, 177);
}
header .barsMobile i {
    font-size:24px;
}

header nav {
    position: relative;
    display:flex;
    justify-content: flex-end;
    flex-wrap:wrap;
    flex-grow: 1;
}
header nav li, .navMobile li {
    list-style: none;
}
header nav a, .navMobile a {
    position: relative;
    display:block;
    text-decoration: none;
    color:#FFF;
    padding:20px;
    /* text-transform: uppercase; */
    font-weight: 500;
    font-size:18px;
    transition: all .5s;
    overflow: hidden;
}
header nav a:hover, .navMobile a:hover {
    color:rgb(240, 240, 240);
}
header nav a::after, .navMobile a::after {
    content: '';
    position: absolute;
    width:100%;
    height:3px;
    top:calc(90% - 3px);
    left:-100%;
    transform:translateY(100%);
    background-color:rgb(255, 255, 255);
    transition: all .5s;
}
header nav a:hover::after, .navMobile a:hover::after {
    left:0%;
}



#titulo-site {
    position: relative;
    width:100%;
    height:calc(100vh - 124px);
    display:flex;
    flex-wrap:wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    background-color:rgb(231, 231, 231);
    text-align: center;
}
#titulo-site .bg-image {
    position: absolute;
    top:100%;
    left:10px;
    transform:translateY(-100%);
    background:url('../images/ps/combo.png') no-repeat;
    background-size:contain;
    width:800px;
    height:60vh;
    opacity: 1;
}
#titulo-site #titulo {
    position: relative;
    top:-100px;
    font-size:70px;
    color:rgb(63, 63, 63);
    text-transform: uppercase;
}
.box-flutuante {
    position: absolute;
    top:90%;
    left:50%;
    transform: translate(-50%,-100%);
}
.box-flutuante a {
    text-decoration: none;
    display:block;
    background-color:rgb(0, 153, 255);
    font-size:20px;
    color:#FFF;
    padding:20px 50px;
    border-radius: 10px;
    text-transform: uppercase;
    font-family: 'Roboto', sans-serif;
    transition: all .5s;

    animation: box-flutuante .5s infinite linear;
}
.box-flutuante a:hover {
    background-color:rgb(0, 108, 180);
}

@keyframes box-flutuante {
    0% {
        transform:rotate(-1deg);
    }
    50% {
        transform:rotate(1deg);
    }
    100% {
        transform:rotate(-1deg);
    }
}

.titulo-sec {
    width:100%;
    margin: 0px 0px 50px;
    display: inline-block;
}
.titulo-sec h2 {
    font-size:50px;
    text-align: center;
    font-family: 'Capriola', sans-serif;
}



.box-dividida {
    position: relative;
    width:100%;
    display:flex;
    align-items: center;
    justify-content: space-between;
}
.box-dividida .left-ref, .box-dividida .right-ref {
    width:50%;
    text-align:center;
}



form h3 {
    width:100%;
    color:#FFF;
    text-decoration: none;
    font-size:36px;
}


.box-input {
    position: relative;
    width:49%;
    margin:7px 0px;
}
.box-input input, .box-input select, .box-input textarea {
    width:100%;
    padding:15px;
    outline: none;
    border:none;
    border-radius:2px;
    font-size:20px;
    resize:vertical;
}
.box-input .label-input {
    position: absolute;
    top:15px;
    left:15px;
    display: block;
    color:rgb(22, 22, 22);
    font-size:20px;
    cursor: text;
    transition: all .5s;
}

.box-input input:focus + .label-input, .box-input textarea:focus + .label-input,
.box-input input:valid + .label-input, .box-input textarea:valid + .label-input {
    top:1px;
    font-size:12px;
}

.box-form {
    border-top: 1px solid rgba(255,255,255,.8);
    width:100%;
    padding:10px 0px;
}
.box-form input {
    padding:15px 30px;
    outline: none;
    border:none;
    border-radius:2px;
    font-size:20px;
    background-color:rgb(0, 153, 255);
    color:#FFF;
    cursor: pointer;
    transition: all .5s;
}
.box-form input:hover {
    background-color:rgb(98, 192, 255);
    color:#000;
}







footer {
    position: relative;
    padding:20px 0px;
    width:100%;
    background-color:rgb(71, 157, 255);
}

footer .links {
    text-align: left;
}
footer .links li {
    list-style: none;
    display: block;
}
footer .links p{
    color:rgb(233, 233, 233);
    font-size:20px;
}
footer .links a{
    position: relative;
    text-decoration: none;
    color:#FFF;
    padding:5px;
    /* text-transform: uppercase; */
    font-weight: 500;
    font-size:18px;
    transition: all .5s;
    overflow: hidden;
}
footer a:hover {
    color:rgb(224, 224, 224);
}

footer .right-ref a {
    text-decoration: none;
    color:#FFF;
    padding:0px 5px;
}
footer .right-ref .redes-sociais {
    display: flex;
    justify-content: center;
    margin-top:5px;
}
footer .right-ref .redes-sociais a {
    position: relative;
    display: block;
    width:40px;
    height:40px;
    margin:2px;
    background-color: rgb(0, 102, 161);
    border-radius: 50%;
    transition: all .5s;
}
footer .right-ref .redes-sociais a:hover {
    opacity: .7;
}
footer .right-ref .redes-sociais i {
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    font-size:20px;
}

footer #logo {
    width:125px;
    display: block;
    margin:0px auto;
}


footer .copyright {
    width:100%;
    margin:10px 0px 0px;
    padding:10px 0px;
    border-top:1px solid #FFF;
}
footer .copyright p {
    color:#FFF;
    text-align:center;
}


.wrapperHeader {
    width:100%;
    height:70px;
    display:flex;
    justify-content: flex-start;
    align-items: center;
}
.wrapperHeader p {
    color:#FFF;
    font-size:26px;
    padding:10px;
}
.closeBox {
    position: absolute;
    top:10px;
    left:calc(100% - 10px);
    transform: translateX(-100%);
    color:#FFF;
    padding:15px 17px;
    background-color:rgb(155, 155, 155);
    cursor: pointer;
    z-index:2;
}
.closeBox i {
    font-size:20px;
}



.wrapperAwait {
    position: fixed;
    top:0px;
    left:0px;
    width:100%;
    height:100vh;
    background-color:rgba(0,0,0,.9);
    display:flex;
    flex-wrap:wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    z-index:99;
}
.wrapperAwait .loading i {
    font-size:100px;
    color:tomato;
    animation: rotate 1s infinite linear;
    transition: all .5s;
}
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.wrapperAwait .response {
    font-size:36px;
    color:#FFF;
    text-align:center;
}
.wrapperAwait .response i {
    font-size:100px;
    color:#FFF;
    text-align:center;
}
.wrapperAwait .error .error, .wrapperAwait .success .success {
    display:block;
}
.wrapperAwait .response .error {
    color:red;
}
.wrapperAwait .response .success {
    color:green;
}


.hidden {
    display:none;
}


@media (max-width:1356px){
    .container {
        width:95%;
        margin:0px auto;
    }
}

@media (max-width:991px){
    #titulo-site #titulo {
        font-size:50px;
    }
    #titulo-site .bg-image {
        width: 95%;
    }
}

@media (max-width:767px){
    header .logo-menu {
        justify-content: space-between;
    }
    header .barsMobile {
        display:block;
        margin-right:30px;
    }
    header nav {
        display:none;
    }

    #titulo-site .bg-image {
        height: 400px;
    }
}

@media (max-width:575px){

    header .contatos {
        flex-wrap:wrap;
        justify-content: center;
    }
    header .contatos .status-loja {
        position: relative;
        text-align: center;
        top:0px;
        left:0px;
        transform: none;
        width:auto;
    }

    #titulo-site {
        height:calc(100vh - 143px);
    }
    #titulo-site .bg-image {
        height: 300px;
    }
    #titulo-site #titulo {
        font-size:40px;
    }

    .box-flutuante {
        width:60%;
    }

    .titulo-sec h2 {
        font-size:36px;
    }

    .box-dividida {
        flex-wrap:wrap;
    }
    .box-dividida .left-ref, .box-dividida .right-ref {
        width:100%;
        text-align:center;
    }


    footer .links {
        text-align: center;
    }
    footer .right-ref {
        margin-top:20px;
    }
    footer .right-ref #logo {
        margin:5px auto;
    }
}


@media (max-width:475px){
    .box-input {
        width:100%;
    }
    #titulo-site .bg-image {
        height: 270px;
    }
    .box-flutuante {
        width: 80%;
    }
}


@media (max-width:375px){
    #titulo-site #titulo {
        font-size:32px;
    }
    #titulo-site .bg-image {
        height: 240px;
    }
    .titulo-sec h2 {
        font-size:30px;
    }

    .box-flutuante {
        width:90%;
    }
}