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

.main{
    background-color: #f6f6f6;
    /*max-height: 60vh;*/
    padding-bottom: 2vw;
}

.logo-conteiner {
    width: 95vw;
    margin: auto;
    padding: 0vw 2vw;
    height: 6vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-conteiner > img {
    height: 95%;
}

.parceiro {
    cursor: pointer;
    text-transform: uppercase;
    color: #fff;
    border-radius: 50px;
    font-size: 12px;
    letter-spacing: 1px;
    font-weight: 600;
    background-color: #ea5229;
    border: 3px solid #b62e15;
    margin-top: 30px 0px;
    padding: 4px 4px;
    height: 70%;
    margin: 3px;
}

.parceiro:hover {
    background-color: #b62e15;
}

.banner-conteiner {
    width: 95vw;
    max-height: 54vh;
    margin: auto;
    text-align: center;
}

.mob-temp {
    display: none;
}

.mySlides > img {
    max-height: 100%;
    max-width: 100%;
}

.anchor-top-box {
    background-color: #333333;
    text-transform: uppercase;
    text-align: center;
    padding-top: 8px;
}

.anchor-top-box > h2 {
    color: #8d8d8d;
    font-size: calc(9px + 1.5vw);
}

.beneficios-conteiner {
    display: flex;
    justify-content: space-around;
    width: 95%;
    margin: auto;
}

.beneficios-box {
    color: #fff;
    width: 90%;
}

.beneficios-box > h3 {
    margin: 1vw 0;
    font-size: calc(6px + 1vw);
}

.box-buttons {
    display: flex;
    justify-content: space-around;
}

.beneficios {
    background-color: #e85228;
    font-size: calc(1px + 1vw);
    height: 2.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30%;
}

#botao-beneficio {
    margin: 1vw 0;
}

.anchor-text {
    text-align: center;
    width: 95%;
    margin: auto;
}

.anchor-text > p {
    font-family: 'Open Sans', sans-serif;
    color: #3e3f3f;
    padding: 4px 0px;
    font-size: calc(5px + 1vw);
}

.anchor-top-box > button {
    font-size: calc(2px + 1vw);
}

.anchor-conteiner {
    height: 40vh;
    width: 95vw;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.anchor-card {
    width: 18vw;
    height: 90%;
    cursor: pointer;
}

.anchor-image {
    background-color: #e6e6e6;
    height: 90%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
}

.anchor-image > img {
    width: 100%;
    margin: auto;
    position: absolute;
    top: 0;
}

#anchor-img-temp {
    top: 50%;
    transform: translateY(-60%);
}

.anchor-descr {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: #ee5a21;
    text-transform: uppercase;
    color: #fff;
    height: 2.5em;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-box-shadow: 1px 6px 2px 0px rgba(0,0,0,0.25); 
    box-shadow: 1px 6px 2px 0px rgba(0,0,0,0.25);
}

.anchor-descr > p {
    text-align: center;
}

.anchor-logo {
    display: flex;
    height: 10%;
    justify-content: center;
    align-items: center;
    margin-top: 1vw;
}

.anchor-logo > img {
    height: 100%;
}

.disable {
    display: none;
}

.bottom-conteiner {
    background-color: #f6f6f6;
    /*height: 100vh;*/
    display: flex;
    padding-top: 2vw;
}

.sidebar {
    background-color: #f6f6f6;
    height: 95vh;
    width: 28vw;
}
.side-text-top {
    margin: auto 3vw;
}

.border {
    color: #333333;
    font-size: calc(6px + 2vw);
    margin: 3.5vw auto;
    line-height: 1.2;
    position: relative;
}

.border:after {
    content: "";
    background: #ee5a21;
    position: absolute;
    top: -2.5vw;
    left: 0;
    height: 8px;
    width: 75%;
}

.conteinertexto {
    display: inline;
    padding: 5px;
}

.side-inline {
    text-transform: uppercase;
    display: inline;
    line-height: 1.3;
} 

.orange {
    background-color: #ee5a21;
    color: #fff;
}

.white {
    background-color: #fff;
    color: #333333;
}

.anunciantes-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.anunc-title {
    background-color: #cbcbcb;
    color: #3e3f3f;
    text-transform: uppercase;
    text-align: center;
    padding: 0.5vw;
}

.anunc-title > h3 {
    font-size: calc(5px + 1vw);
}

.logo-card {
    height: 9vw;
    flex: 0 1 9vw;
    margin: 1vw 2vw;
    background-color: #f2f2f2;
    border-radius: 10%;
    padding: 0.5vw;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-box-shadow: 1px 6px 2px 0px rgba(0,0,0,0.25); 
    box-shadow: 1px 6px 2px 0px rgba(0,0,0,0.25);
}

.logo-card > img {
    width: 100%;
}

.side-text {
    margin: auto 3vw;
}

.side-text > h3 {
    color: #333333;
    font-size: calc(6px + 2vw);
    margin: 3.5vw auto;
    line-height: 1.2;
}

i {
    color: #ee5a21;
    font-style: normal;
}

.side-text > p {
    color: #333333;
    margin: 1.5vw auto;
    font-family: 'Open Sans', sans-serif;
    font-size: calc(4px + 1vw);
}

.photos-conteiner {
    background-color: #f6f6f6;
    width: 72vw;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.prod-cards {
    width: 14vw;
    margin: 1vw 1vw;
    height: 31vh;
    cursor: pointer;
}

.card-descr {
    background-color: #cbcbcb;
    color: #3e3f3f;
    text-transform: uppercase;
    font-size: 1vw;
    text-align: center;
    position: absolute;
    width: 100%;
    top: 0;
    height: 12%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-descr > p {
    padding: 0.5vw 0px;
}

.card-img {
    width: 100%;
    height: 85%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    background-color: #eeeeee;
}

.imagem-prod {
    max-width: 100%;
    max-height: 100%;
}

.img-temp {
    margin-top: 12%;
    max-height: 88%;
}

.card-logo {
    width: 100%;
    height: 15%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0.3vw 0;
}

.card-logo > img {
    height: 25px;
}

.card-white {
    background-color: #fff;
}

.card-grey {
    background-color: #eeeeee;
}

.card-blue {
    background-color: #03418f;
}

.testimonial {
    padding-top: 20px;
    background-color: #f6f6f6;
}

.testi-conteiner {
    width: 95vw;
    margin: auto;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
}

.testi-card {
    min-width: 250px;
    flex: 0 1 18vw;
    text-align: center;
    margin: 20px;
    padding: 0.5vw;
}

.testi-card > p {
    font-family: 'Open sans', sans-serif;
}

.quote {
    color: #ee5a21;
    font-weight: bolder;
    font-size: calc(30px + 1vw);
    line-height: 0.5;
}

#mark {
    font-family: 'Palanquin', sans-serif;
}

.testi-name {
    color: #333333;
    font-weight: bold;
    font-size: calc(8px + 1vw);
}

.testi-company {
    color: #333333;
    font-size: calc(7px + 1vw);;
}

.testi-text {
    color: #3e3f3f;
    font-size: calc(1px + 1vw);
    padding: 1.5vw 0px;
}

/* MODAL */

#zoom {
    display: none;
}

.modal {
    background-color: rgba(0, 0, 0, 0.8);
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 19;
    left: 0;
    top: 0;
    animation: zoomdetalhe .5s ease-in-out;
}

.modal-detail {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 20;
    transform: translateX(-50%) translateY(-50%);
    width: 70vh;
    height: 70vh;
    max-width: 90vw;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1vh;
    color: #3e3f3f;
}

.modal-title {
    background-color: #ebebeb;
    padding: 2.2vh;
    text-align: center;
}

.modal-image {
    position: relative;
}

.modal-upper {
    text-transform: uppercase;
    font-size: 2.2vh;
}

#imagem-detalhe {
    max-width: 75%;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    max-height: 325px;
}

#imagem-detalhe-dist {
    max-width: 25%;
    max-height: 36px;
    position: fixed;
    bottom: 213px;
    right: 20px;
}

.modal-title-conteiner {
    padding: 2vh;
}

.modal-info {
    background-color: #ebebeb;
    display: flex;
    flex-direction: column;
    padding: 2.2vh;
}

.contact-wrapper {
    display: flex;
}

.modal-info-desc {
    padding-bottom: 1.5vh;
}

.modal-info-contato {
    display: flex;
    align-items: flex-start;
}

.contact-info > a {
    text-decoration: none;
    color: #3e3f3f;
}

.contact-info > a > p {
    padding: 0.5vh;    
}

.whatsapp {
    position: relative;
}

.whatsapp > img {
    width: 20px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}


/* FORMULARIO CONTATO */

#contato {
    background-color: #f6f6f6;
    padding-bottom: 3vw;
}

.form-conteiner {
    background-color: #fff;
    border-radius: 30px;
    width: 30%;
    height: 550px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto;
    box-shadow: inset 3px -3px 5px 3px #e5ebf5,
    inset 0px 10px 5px 3px #e5ebf5;
}

.form-text {
    background-color: #ea5229;
    border-radius: 30px 30px 0px 0px;
    width: 100%;
    height: 25%;
    text-align: center;
    padding: 20px;
    box-shadow: inset 0px 3px 3px 3px #b62e15;
}

.form-text > h3 {
    color: #efefef;
    font-size: 30px;
    line-height: 50px;
    text-transform: uppercase;
    font-weight: bolder;
}

.form-text > p {
    color: #333333;
    font-size: 18px;
    line-height: 50px;
    text-transform: uppercase;
    font-weight: bold;
}

.form-fields {
    width: 100%;
    height: 75%;
}

form {
    text-align: center;
}

input {
    background-color: #f9f9f9;
    border: none;
    width: 75%;
    border-radius: 10px;
    padding: 20px 30px;
    font-size: 18px;
    margin: 20px;
}

 input:focus {
    outline: none;
 }

.send {
    cursor: pointer;
    text-transform: uppercase;
    color: #fff;
    border-radius: 50px;
    font-size: 12px;
    letter-spacing: 1px;
    font-weight: 600;
    background-color: #ea5229;
    border: 3px solid #b62e15;
    margin-top: 30px 0px;
    padding: 10px 15px;
}

.send:hover {
    background-color: #b62e15;
}


/* FOOTER */

footer {
    background-color: #1e2133;
}

.footer-conteiner {
    color: #fff;
    width: 90%;
    padding: 50px 0;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.footer-logo {
    width: 30%;
}

.footer-logo > img {
    width: 100%;
}

.footer-tel {
    width: 15%;
}

.footer-social {
    width: 15%;
}

.footer-contact {
    width: 30%;
}

.footer-line {
    display: flex;
    align-items: center;
}

.footer-line > a > p {
    font-size: calc(2px + 1vw);
    font-weight: bold;
    color: #fff;
}

.footer-icon {
    width: 25px;
    margin: 1vw;
}


/* Detalhes animation */

@-webkit-keyframes zoomdetalhe { 
    from { 
        -webkit-transform: scale(0) 
    } 
    to { 
        -webkit-transform: scale(1) 
    } 
} 
  
@keyframes zoomdetalhe { 
    from { 
        transform: scale(0) 
    } 
    to { 
        transform: scale(1) 
    } 
} 


/* Fading animation */
.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
  }
  
  @-webkit-keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
  }
  
  @keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
  }


/* RESPONSIVE */

@media (max-width: 480px) {
    .banner-conteiner {
        padding: 3vw;
        background-image: url(../img/background-mobile.png);
        background-size: cover;
        background-repeat: no-repeat;
    }
    
    .mob-temp {
        display: block;
        color: #fff;
    }

    .banner-conteiner > h2 {
        font-size: calc(10px + 2vw);
        margin: 2vw auto;
    }

    .banner-conteiner > p {
        font-family: 'Open Sans', sans-serif;
        font-size: calc(10px + 1vw);
    }

    .mySlides > img {
        display: none;
    }
    
    .anchor-conteiner {
        min-height: 70vh;
        height: fit-content;
        flex-wrap: wrap;
        justify-content: space-around;
    }

    .anchor-card {
        height: 42vh;
        margin: 4.5vw 3px;
        flex: 0 2 230px;
    }

    .bottom-conteiner {
        flex-direction: column;
    }

    .sidebar {
        width: 100vw;
        height: auto;
    }

    .logo-card {
        height: 65px;
        flex: 0 1 65px;
        margin: 3vw 2vw;
    }

    .side-text {
        margin: auto 5vw;
        text-align: center;
    }

    .side-text > h3 {
        font-size: calc(8px + 2vw);
    }

    .side-text > p {
        font-size: calc(8px + 1vw);
    }

    .photos-conteiner {
        width: 95vw;
    }

    .prod-cards {
        flex: 0 1 40vw;
        margin: 2vw 2vw;
        min-width: 180px;
    }

    .card-descr {
        font-size: calc(5px + 1vw);
    }

    .contact-info > a > p {
        font-size: 1.5vh;    
    }

    .modal-info {
        padding: 1vh;
    }

    .modal-title-conteiner {
        padding: 1vh;
    }

    .modal-info-contato {
    flex-direction: column;
    }

    .form-conteiner {
        width: 95%;
    }

    .form-text > h3 {
        font-size: calc(15px + 2vw);
        line-height: 30px;
    }

    .form-text > p {
        font-size: calc(10px + 1vw);
    }

    .anchor-text > p {
        font-size: calc(9px + 1vw);
    }

    .beneficios-conteiner {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .beneficios-box {
        width: 100%;
    }

    .beneficios {
        font-size: calc(3px + 1vw);
    }

    .testi-text {
        font-size: calc(6px + 1vw);
    }

    .testi-card {
        flex: 0 1 95vw;
        min-width: 95vw;
    }

    .footer-conteiner {
        flex-direction: column;
        padding: 30px;
        align-items: center;
    }

    .footer-logo {
        width: 80%;
        text-align: center;
    }

    .footer-logo > img {
        width: 60%;
    }

    .footer-tel {
        width: 80%;
    }

    .footer-social {
        width: 80%;
    }

    .footer-contact {
        width: 80%;
    }

    .footer-icon {
        width: 15px;
    }
    
    .footer-line {
        justify-content: center;
    }

    .footer-line > a > p  {
        font-size: calc(6px + 1vw);
    }

    .parceiro {
        font-size: calc(2px + 1vw);
    }

}

@media (aspect-ratio: 16/9) {
    body {
        margin: 15vh;
    }
}

@media (min-width: 481px) and (max-width: 540px) {
    .contact-info > a > p {
        font-size: 1.5vh;    
    }

    .modal-info {
        padding: 1vh;
    }

    .modal-title-conteiner {
        padding: 1vh;
    }
}

@media (min-width: 481px) and (max-width: 639px) {
    .anchor-conteiner {
        min-height: 70vh;
        height: fit-content;
        flex-wrap: wrap;
        justify-content: space-around;
    }

    .anchor-card {
        height: 42vh;
        margin: 1.5vw 3px;
        flex: 0 2 187px;
    }

    .logo-card {
        height: 14vw;
        flex: 0 1 14vw;
    }

    .side-text > h3 {
        font-size: calc(8px + 2vw);
    }

    .side-text > p {
        font-size: calc(6px + 1vw);
    }

    .photos-conteiner {
        justify-content: space-around;
    }

    .prod-cards {
        flex: 0 1 140px;
    }

    .card-descr {
        font-size: calc(3px + 1vw);
    }

    .form-conteiner {
        width: 80%;
    }
    
    .form-text > h3 {
        font-size: calc(14px + 2vw);
    }

    .anchor-text > p {
        font-size: calc(9px + 1vw);
    }

    .beneficios-conteiner {
        flex-direction: column;
        align-items: center;
    }

    .beneficios {
        font-size: calc(3px + 1vw);
    }

    .testi-text {
        font-size: calc(6px + 1vw);
    }

    .footer-conteiner {
        flex-direction: column;
        padding: 30px;
        align-items: center;
    }

    .footer-logo {
        width: 80%;
        text-align: center;
    }

    .footer-logo > img {
        width: 60%;
    }

    .footer-tel {
        width: 80%;
    }

    .footer-social {
        width: 80%;
    }

    .footer-contact {
        width: 80%;
    }

    .footer-icon {
        width: 15px;
    }
    
    .footer-line {
        justify-content: center;
    }

    .footer-line > a > p  {
        font-size: calc(6px + 1vw);
    }

    .parceiro {
        font-size: calc(2px + 1vw);
    }

}

@media (min-width: 640px) and (max-width: 767px) {
    .anchor-conteiner {
        min-height: 70vh;
        height: fit-content;
        flex-wrap: wrap;
        justify-content: space-around;
    }

    .anchor-card {
        height: 42vh;
        margin: 1.5vw 3px;
        flex: 0 2 187px;
    }

    .prod-cards {
        flex: 0 1 20vw;
    }

    .card-descr {
        font-size: 1.5vw;
    }

    .form-conteiner {
        width: 80%;
    }
    
    .form-text > h3 {
        font-size: calc(14px + 2vw);
    }

    .anchor-text > p {
        font-size: calc(7px + 1vw);
    }

    .beneficios {
        font-size: calc(2.5px + 1vw);
    }

    .testi-text {
        font-size: calc(6px + 1vw);
    }

    .footer-conteiner {
        width: 95%;
    }

    .footer-logo {
        width: 30%;
    }

    .footer-tel {
        width: 19%;
    }

    .footer-social {
        width: 19%;
    }

    .footer-contact {
        width: 30%;
    }

    .footer-icon {
        width: 18px;
    }
    
    .footer-line > a > p  {
        font-size: calc(4px + 1vw);
    }
}

@media (min-width: 768px) and (max-width: 959px) {
    .anchor-conteiner {
        min-height: 70vh;
        height: fit-content;
        flex-wrap: wrap;
        justify-content: space-around;
    }

    .anchor-card {
        height: 42vh;
        margin: 1.5vw 3px;
        flex: 0 2 187px;
    }

    .anchor-text > p {
        font-size: calc(7px + 1vw);
    }

    .form-conteiner {
        width: 60%;
    }

    .testi-text {
        font-size: calc(4px + 1vw);
    }

    .footer-conteiner {
        width: 95%;
    }

    .footer-tel {
        width: 17%;
    }

    .footer-social {
        width: 17%;
    }

    .footer-icon {
        width: 18px;
    }
    
    .footer-line > a > p  {
        font-size: calc(4px + 1vw);
    }
}

@media (min-width: 960px) and (max-width: 1023px) {
    .form-conteiner {
        width: 60%;
    }

    .testi-text {
        font-size: calc(3px + 1vw);
    }

    .footer-conteiner {
        width: 95%;
    }

    .footer-icon {
        width: 20px;
    }
}

@media (min-width: 1024px) and (max-width: 1450px) {
    .form-conteiner {
        width: 45%;
    }

    .testi-text {
        font-size: calc(3px + 1vw);
    }

    .footer-conteiner {
        width: 95%;
    }
}


/* CORES 

Fundo MAIN #f6f6f6
Fundo BOTTOM #f6f6f6
Barra cards Anchor #ee5a21
Fundo cards Anchor #e6e6e6
Texto Sider #333333
Texto sider 2 #ee5a21
Barra cards normal #cbcbcb
Texto cards normal #3e3f3f
Logo Sider fundo #f2f2f2
FORMULARIO DE CONTATO
fundo titulo laranja ea5229
texto titulo efefef
texto subtitulo 333333
fundo box ffffff
fundo campos f9f9f9
placeholders 696969
borda laranja b62e15
FOOTER 1e2133

fundo beneficio 333333
texto beneficio 8d8d8d
box beneficios e85228

*/