@font-face {
	font-family: Lemon;
	src: url("../lib/fonts/LemonMilk.otf");
	font-size: 1em;
}

@font-face {
	font-family: Nechao;
	src: url("../lib/fonts/Nechao.ttf");
	font-size: 1em;
}


html, body {   
}

.Logotipo img {
    width: 50%;
}

.productBar {
    border-top: 5px solid black;
    border-bottom: 5px solid black;
    box-shadow: 2px 5px 5px solid black;
}

.phoneContainer, .mailContainer {
    font-family: Lemon;
    color: black;
    font-size: 1.5rem;
}

.phoneTopIcon, .wppTopIcon, .mailTopIcon {
    color: yellow;
    font-size: 2.0rem;
}

.navBarDesktop .links a {
    font-family: Lemon;
    font-size: 1.5rem;    
    color: #29e52e;
    text-shadow: 1px 1px 2px black;
}

.productBar {
    
}

.productBar img {
    width: 10%;
    border: 1px solid black;
  
}

.links a {
    display: inline-block;
    padding: 20px;
}

.bannerPhrase {
    font-family: Lemon;
    font-size: 2rem;
    color: #0ff718;
    text-shadow: 2px 2px 3px black;
}

.bloco-historico {
    font-size: 1rem;
    color: black;
    text-shadow: none;
}

#juntosBanner {
    font-size: 1.5rem;
    color: black;
    text-shadow: none;
}

.bannerPic img {
    max-width: 100%;
}

.bannerMarks img {
    padding-left: 30px;
    padding-right: 30px;
}

.banner-LojaVirtual {
    background-color: #363435;
    font-family: Lemon;
    font-size: 2rem;
    color: yellow;
    text-shadow: 1px 1px 5px black;
    padding: 15px;
    box-shadow: 1px 1px 2px black;
}

.nossasRedes {
    background-image: url(../imgs/quemSomos-banner.png);
    background-repeat: no-repeat;
}

.nossas-redes-sociais {
    font-family: Lemon;
    font-size: 2.0rem;
    text-shadow: 1px 1px 2px black;
    color: #2b2219;
    
}

.nossas-redes-sociais p {
    margin-left: 20px;
    margin-top: -40px;
}


.banner-RedesSociais {
    background-color: black;
    border-radius: 15px;
    box-shadow: 1px 1px 2px black;
}

.redesSociais-Logos {
    width: 100%;
    margin-left: 50px;
}

.redesSociais-Texto {
    font-family: Lemon;
    font-size: 3rem;
    color: lawngreen;    
}

.redesSociais-Icons a:hover {
    transition-duration: 0.5s;    
    filter: invert(48%) sepia(3%) saturate(3207%) hue-rotate(190deg) brightness(95%) contrast(80%);    
}

.contactArea {
    margin-top: 100px;
    margin-left: 30px;
}

.contactArea-Titulo {
    font-family: Lemon;
    font-size: 3.5rem;
    color: #373435;
    text-shadow: 2px 2px 2px black;    
}

.contactArea-Titulo-Contato div {
    font-size: 8rem;
    margin-top: -100px;
    margin-left: 250px;
}

.contactArea-Titulo-Contato:last-child {
    margin-top: -150px;
    margin-left: 300px;
}

.contactForm {
    background-color: green;
    box-shadow: 1px 1px 5px black;
    border-top-left-radius: 40px;
    border-bottom-right-radius: 40px;    
    font-family: Lemon;
}

.formTitulo {
    font-size: 2.5rem;
    text-shadow: 1px 1px 2px black;
    padding-left: 30px;
    padding-top: 10px;
    margin-bottom: 10px;
    color: black;
}

.form-group ::placeholder {
    color: black;
}


#textAreaClientLabel {
    color: black;    
}

.areaEndereco {
    font-family: Lemon;
    color: #373435;    
}

footer {
    background-color: #35363b;    
}

.footerLogo img {
    height: 150px;
    padding-top: 10px;
}

.footerContact {
    font-family: Lemon;
    color: white;
    text-shadow: 1px 1px 3px black;
}

.footerContact p {
    color: #f3ce7f;
}

.footerLojaVirtual {
    font-family: Lemon;
    font-size: 1.5rem;
    color: white;
    text-shadow: 1px 1px 2px black;
}

.footerLojaVirtual p {
    color: yellow;
}

.footerDevelopment {
    font-family: Lemon;
    color: #f3ce7f;
    text-shadow: 1px 1px 3px black;
}

.footerDevelopment img {
    height: 80px;
}

#logoPrimus {
    font-family: Nechao;
    color: #ff8700;
    text-shadow: 1px 1px 4px black;
    font-size: 1.5rem;
    
}

#logoTI {
    font-family: Nechao;
    color: #3b53b9;
    text-shadow: 1px 1px 4px black;
    font-size: 1.5rem; 
}

/*Responsivo*/ /*Responsivo*/ /*Responsivo*/ /*Responsivo*/

@media (max-device-width: 767px) {
    
    .Logotipo img {
        width: 100%;
    }
    
    .wppTopIcon {
        color: green;
        font-size: 3.5rem;
        text-shadow: 1px 1px 2px black;
    }
    
    .telContactText {
        font-family: Lemon;
        font-size: 1.0rem;
    }
    
    .telContactNumber {
        font-family: Lemon;
        font-size: 2.5rem;
        color: #35363b;
        text-shadow: 1px 1px 2px black;
    }
    
    .banner-LojaVirtual {
        background-color: deepskyblue;
        color: white;
    }
    
    .quemSomos-Texto {
        font-size: 3.5rem;
    }
    
    .nossaHistoria-Titulo {
        
    }
    
    .nossaHistoria-Titulo img {
        width: 10%;
    }
    
    .banner-RedesSociais {
        border-radius: 0px;
    }
    
    .redesSociais-Texto {
        font-size: 1.5rem;
        text-align: center;
    }
    
    .redesSociais-Icons a {
        height: 6px;        
    }
    
    .redesSociais-Logos {
        margin-left: 0px;

    }
    
    .googleMapsText {
        font-family: Lemon;
        font-size: 1.4rem;
        color: white;
        padding: 10px;
        text-shadow: 1px 2px 4px black;
        border: 1px solid white;
        border-radius: 10px;
        background-image: url(../imgs/localizacao-mobile-icon.png);
        background-repeat: no-repeat;
        background-position: 250px 50px;
        background-size: 70px;
    }
    
    .googleMapsText span {
        color: #25f490;
    }
    
    .enderecoMobile {
        font-family: Lemon;
        color: white;
    }
    
    .tituloEndereco {
        color: #25f490;
        text-shadow: 1px 2px 4px black;
    }
    
    .footerLojaVirtual {
        background-color: cornflowerblue;
    }
    
    .contactArea {
        margin-left: 0;
    }
    
}

@media (min-device-width: 1920px) {
    .phoneContainer, .mailContainer {
        font-size: 2.5rem;
    }
    
    .bloco-historico {
        font-size: 1.3rem;
    }
    
    .bannerPhrase {
        font-family: Lemon;
        font-size: 3.0rem;
        color: darkcyan;
        text-shadow: 2px 2px 6px black;        
    }
    
    .nossasRedes {
        background-image: url(../imgs/quemSomos-banner.png);
        background-repeat: no-repeat;
        background-position-x: right;       
    }
    
    .redesSociais-Logos {
        width: 60%;
    }
    
    .banner-LojaVirtual {
        margin-top: 100px;
        margin-bottom: 100px;
    }
    
    #inputTel {
        width: 260px!important;
        
    }
    
    .googleMapsSpace iframe {
        width: 700px;
    }
    
    .navBarDesktop .links {
        font-size: 2.5rem;
    }
    
    .mLogo {
        margin-top: -20px!important;
    }
}