html,body{
    font-family:arial;
    margin:0;
   /* background-image: linear-gradient( to bottom, black, white ); */
   background:#E8E8E8;
   overflow-x:hidden;
}

a{
    text-decoration:none;
    color:#B5B5B5;
}
a:active{
    color:#436EEE;
}
a:hover{
    color:#436EEE;
}


header{
    background-image:linear-gradient(#4F4F4F,#1C1C1C);
    height:50px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}
article{
    width:auto;
    float:auto;
    left:auto;
    display:auto;
    overflow-y:auto;
    margin:3mm;
    background:white;
    overflow:auto;
    height:80%;
    display:auto;
    margin:5mm;
    border-radius:6px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

footer{
    background:#363636;
    height:200px;
    border-bottom:solid 30px #EE2C2C;
}

li::marker {
  color: red;
}

#menu{
    display:inline-block;
    float:right;
    margin-right:20px;
}

#menu li,ul{
   list-style:none; 
}

#menu li{
    display:inline-block;
    color:white;
    padding:15px;
    cursor:pointer;
}


.menu-header{
    color:white;
    font-weight:bold;
    height:100%;
    width:15%;
    display:inline-block;
}
.menu-header img{
    position:relative;
    top:15px;
    left:10px;
    cursor:pointer;
}


.icones-header{
   height:20px; 
   display:none;
}

.linha-menu{
   width:40%;
   position:relative;
   right:-44%; 
}


.button{
    background-image: linear-gradient(to bottom right, #32CD32 , green);
    padding:10px;
    border-radius:6px;
    font-weight:bold;
    border:0;
    color:white;
    cursor:pointer;
}
.button:active{
    background:#008B45;
    transition: 0.3s;
}

a.button{
    color:white;
}

.button img{
    height:5%;
    margin-right:5px;
}

.zap{
    height:60px;
    cursor:pointer;
}


#pagina1{
    background-image: url('../images/part14/fachada.png');
    background-size:cover;
    background-position: center; /* Centraliza a imagem dentro da div */
    background-repeat: no-repeat; /* Evita repetir a imagem */
    overflow:hidden;
}
#principal{
    background-color: rgb(255, 255, 255, 0.8);
    height:90%;
}


.texto-apresentacao{
    margin-top:20%;
    margin-right:5%;
    color:#4F4F4F;
    font-size:40px;
     font-variant: small-caps;
}

.legenda{
    background:black;
    color:white;
    padding:2px;
    margin-bottom:20px;
}
.legenda h3{
   font-size:12px;
}

main{
    margin-top:0%;
    text-align:center;
}

.centralizado{
    height:80%;
    text-align:center;
}

.lado-esquerdo{
    display:inline-block;
    height:80%;
    width:50%;
    float:left;
    text-align:center;
}

.lado-direito{
    display:inline-block;
    height:80%;
    width:50%;
    overflow:hidden;
    text-align:center;
}

.titulo{
    height:10%;
    width:100%;
}





/*classes diversas */

.logo img{
    height:60%;
}
.logo2{
    display:none;
}

#contener-esp{
    width:80%;
}
.esp{
    display:inline-block;
    height:35%;
    margin:2mm;
}

.lado-esquerdo ul{
    margin-left:10%;
    font-size:20px;
    list-style:inside;
    font-weight:bold;
}

.img1{
    height:40%;
}

.text1{
    text-align:left;
    background:white;
    padding-bottom:20px;
}
.text1 h3{
    position:relative;
    top:15px;
}

.text2{
    text-align:left;
    background:white;
    padding-bottom:20px;
}
.text2 h3{
    position:relative;
    top:15px;
}

.img3{
    height:35%;
    position:relative;
    left:20%;
}

.img4{
    height:30%;
    display:none;
}

.img5{
    height:50%;
}

.img6{
    height:50%;
}

.img7{
    height:100%;
}

#texto-sobreposto{
    position:absolute;
    z-index:12;
}
.img8{
    height:40%;
    position:absolute;
    z-index:10;
    right:20%;
}

.img9{
    height:100%;
}

.lado-esquerdo p{
    font-size:20px;
    text-align:left;
    margin-left:20%;
}

.lado-esquerdo span{
    background-color: rgba(255, 255, 255, 0.5); /* Cor branca com 50% de opacidade */
    position:absolute;
    padding:5px;
    z-index:1;
}

.lado-direito p{
    display:none;
}

.img10{
    height:70%;
}

.img11{
    height:30%;
    position:absolute;
    z-index:20;
    
}

#clientes{
    
}

.titulo-divisao{
    background-image: linear-gradient(to bottom, #8B0000, #EE0000);
    color:white;
    text-align:center;
    font-size:14px;
    height:30px;
}

.titulo-divisao h3{
    position:relative;
    top:5px;
    font-family: Arial, sans-serif;
    font-style: italic;
}

.images-cliente{
    padding:10px;
}

#clientes .images-cliente img{
    display:inline-block;
    height:7%;
}

.images-celos{
   padding:20px; 
}

#celos .images-celos img{
    display:inline-block;
    height:15%;    
}

#sobre{
    background-image:url('../images/part14/fachada.png');
    background-size: cover; /* Faz a imagem cobrir toda a div */
    background-position: center; /* Centraliza a imagem dentro da div */
    background-repeat: no-repeat; /* Evita repetir a imagem */
    padding:20px;
    height:80%;
    color:white;
}

#sobre .texto{
    background-color: rgba(255, 255, 255, 0.5); /* Cor branca com 50% de opacidade */
    font-size:12px;
    text-align: justify; /* Justifica o texto */
    color:#363636;
    padding:10px;
    font-weight:bold;
}


#familia{
    background-image:url('../images/part15/familia4.png');
    background-size: cover; /* Faz a imagem cobrir toda a div */
    background-position: center; /* Centraliza a imagem dentro da div */
    background-repeat: no-repeat; /* Evita repetir a imagem */
    padding:20px;
    height:100%;
    color:white;
}

.images-footer{
    position:relative;
    top:30px;
}

.images-footer img{
    display:inline-block;
    height:40%;    
}

/* fim */













/*......conteudo responsivel......................................................*/
@media (max-width: 767px){

html,body{
   overflow-x:hidden;
}

footer{
    background:#4F4F4F;
    height:200px;
    border-bottom:solid 30px #EE2C2C;
}


.icones-header{
   height:20px; 
   display:inline-block;
}
#menu{
    display:none;
    width:100%;
    float:left;
    background-image:linear-gradient(#4F4F4F,#1C1C1C);
}

#menu li{
    width:100%;
}

.menu-header{
    color:white;
    font-weight:bold;
    height:100%;
    width:32%;
    display:inline-block;
}
.menu-header img{
    position:relative;
    top:15px;
    left:10px;
    cursor:pointer;
}

.linha-menu{
   display:none;
}



#pagina1{
    background-image: url('../images/part14/fachada.png');
    background-size:auto 130%;
    background-position: center; /* Centraliza a imagem dentro da div */
    background-repeat: no-repeat; /* Evita repetir a imagem */
    overflow:hidden;
    height:90%;
}
#principal{
    background-color: rgb(255, 255, 255, 0.8);
    height:100%;
}


.centralizado{
    height:60%;
    text-align:center;
}

.lado-esquerdo{
    display:inline-block;
    height:30%;
    width:100%;
    float:left;
    text-align:center;
}

.lado-direito{
    display:inline-block;
    height:30%;
    width:100%;
    overflow:hidden;
    text-align:center;
}

.titulo{
    height:8%;
    width:100%;
}




/*classes diversas */

.logo{
    display:none;
}

.logo2{
    position:relative;
    top:50px;
    height:70%;
    display:block;
}

#linkzap1{
    position:relative;
    top:240px;
}

#pagina1 .lado-esquerda{
}
#pagina1 .lado-direito{
    height:70%;
}
#pagina1 .texto-apresentacao{
    position:relative;
    top:250px;
    font-size:18px;
    margin-left:20px;
    background-color: rgba(255, 255, 255, 0.5); /* Cor branca com 50% de opacidade */
     font-variant: small-caps;
}

#contener-esp{
    width:85%;
}
.esp{
    display:inline-block;
    height:19%;
    margin:2mm;
}

.lado-esquerdo ul{
    margin-left:10%;
    font-size:20px;
    list-style:inside;
    font-weight:bold;
}

.img1{
    height:40%;
}


.text1{
    text-align:left;
}
.text1 li{
    font-size:12px;
}
.text1 h3{
    position:relative;
    top:10px;
    font-size:12px;
}

.text2{
    text-align:left;
    background:white;
    padding-bottom:20px;
}
.text2 li{
    font-size:12px;
}
.text2 h3{
    position:relative;
    top:10px;
    font-size:12px;
}

.img2{
    height:80%;
    position:relative;
    right:-15%;
    margin-top:2%;
}

.img3{
    height:35%;
    position:relative;
    left:20%;
    display:none;
}

.img4{
    height:20%;
    display:inline-block;
    position:absolute;
    left:20%;
    display:block;
}

.img5{
    height:50%;
}

.img6{
    height:50%;
}

.img7{
    height:70%;
}

.img8{
    height:15%;
    position:absolute;
    right:30%;
}

.img9{
    height:70%;
}

.lado-esquerdo p{
    font-size:10px;
    text-align:left;
    margin-left:30px;
}

.lado-esquerdo span{
    background-color: rgba(255, 255, 255, 0.5); /* Cor branca com 50% de opacidade */
    position:absolute;
    left:0;
    padding:5px;
    z-index:1;
    font-size:10px;
}

.lado-direito p{
    font-size:10px;
    text-align:left;
    margin-left:30px;
}

.img10{
    height:80%;
}

.img11{
    position:absolute;
}


#clientes{
    
}

.titulo-divisao{
    background-image: linear-gradient(to bottom, #8B0000, #EE0000);
    color:white;
    text-align:center;
    font-size:14px;
    height:30px;
}

.titulo-divisao h3{
    font-size:12px;
    position:relative;
    top:10px;
    font-family: Arial, sans-serif;
    font-style: italic;
}

#clientes .images-cliente img{
    display:inline-block;
    height:4%;
}

.images-celos{
   padding:5px; 
}

#celos .images-celos img{
    display:inline-block;
    height:6%;    
}

/* fim */


#sobre{
    background-image:url('../images/part14/fachada.png');
    background-size: cover; /* Faz a imagem cobrir toda a div */
    background-position: center; /* Centraliza a imagem dentro da div */
    background-repeat: no-repeat; /* Evita repetir a imagem */
    padding:20px;
    height:80%;
    color:white;
}

#sobre .texto{
    background-color: rgba(255, 255, 255, 0.5); /* Cor branca com 50% de opacidade */
    font-size:8px;
    text-align: justify; /* Justifica o texto */
    color:#363636;
    padding:10px;
    font-weight:bold;
}


#familia{
    background-image:url('../images/part15/familia5.png');
    background-size: cover; /* Faz a imagem cobrir toda a div */
    background-position: center; /* Centraliza a imagem dentro da div */
    background-repeat: no-repeat; /* Evita repetir a imagem */
    width:95%;
    height:80%;
    color:white;
}

.images-footer{
    position:relative;
    top:60px;
}

.images-footer img{
    display:inline-block;
    height:15%;    
}


.button{
    background-image: linear-gradient(to bottom right, #32CD32 , green);
    padding:12px;
    border-radius:6px;
    font-weight:bold;
    border:0;
    color:white;
    cursor:pointer;
}
.button:active{
    background:#008B45;
    transition: 0.3s;
}

a.button{
    color:white;
}

.zap{
    height:50px;
    cursor:pointer;
}

.texto-apresentacao{
    margin-top:10%;
    margin-right:5%;
    color:#4F4F4F;
    font-size:20px;
}

.legenda{
    background:black;
    color:white;
    padding:2px;
    margin-bottom:20px;
}
.legenda h3{
   font-size:10px;
}


}











@media (min-width: 601px) and (max-width: 1080px) {
    /* Estilos para o Xiaomi Redmi Note 12S */


#linkzap1{
    position:relative;
    top:250px;
}

#pagina1 .lado-esquerda{
}
#pagina1 .lado-direito{
    height:70%;
}
#pagina1 .texto-apresentacao{
    position:relative;
    top:260px;
    font-size:20px;
    margin-left:20px;
    background-color: rgba(255, 255, 255, 0.5); /* Cor branca com 50% de opacidade */
     font-variant: small-caps;
}

}