body{
    font-family: Arial, Helvetica, sans-serif;
     margin: 0;
     padding: 0;
     min-height: 100vh;
     display: flex;
     flex-direction: column;
}

html{
    scroll-behavior: smooth;
  }


.menutopo{
    margin-top: 2%;
    width: 60%;
}

@media only screen and (max-width:1000px) {
    /* For mobile phones: */
    .menutopo {
     margin-bottom: 50px;
    }
  }


.topo{
    margin-top: 10px;
    display: flex;
    position: relative;
    text-align: center;
}

.menu{
    padding: 2%;
}


a.menu{
    font-size: 120%;
    text-decoration: none;
    color: black;
    margin-top: 10%;
}

@media only screen and (max-width:1000px) {
    /* For mobile phones: */
    a.menu {
     font-size: 0%;
     position: absolute;
    }
  }


a.menu:hover{
    border-bottom: 1px solid black;
}



.menutele{
    padding: 2%;
}



a.menutele{
    font-size: 120%;
    text-decoration: none;
    color: black;
}

@media only screen and (max-width:1000px) {
    /* For mobile phones: */
    a.menutele {
    font-size: 180%;
    float: left;

    }
  }


a.menutele:hover{
    border-bottom: 1px solid black;
}





.logocontainer{
    width: 40%;
}

@media only screen and (max-width:1000px) {
    /* For mobile phones: */
    .logocontainer {
   width: 100%;
    }
  }


.logo{
    display: flex;
    width: 50%;
    margin-left: 10px;
    margin-bottom: 10px;
}

@media only screen and (max-width:1000px) {
    /* For mobile phones: */
    .logo {
        width: 70%;
    }
  }


/*Container*/

.container {
    display: flex;
    background-color: rgba(236, 236, 236, 0.596);
  }

  .capa{
    width: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }


  .capa1{
    position: relative; 
    width: 80%;
    display: block;
    bottom: 0%;
    left: 10%;
    
  }

  .capa2{
    position: relative;
    width: 100%;
    height: 100%;
    transform: scale(0.90);
 
  }

  @media only screen and (max-width:1000px) {
    /* For mobile phones: */
    .capa2 {
      height: 760px;
    }
  }
  

  .capah{
    position: relative;
    width: 100%;
    height: 100%;
  }


  @media only screen and (max-width:1000px) {
    /* For mobile phones: */
    .capah {
        height: 600px;
    }
  }

  .capa2v{
    position: relative;
    width: 100%;

    transform: scale(0.95);
 
  }
  .capas{
    background-color: #f47937;
    transform: scale(0.90);
    margin-left: 20%;
  }
  .capas2{
    margin-right: 20%;
  }


  @media only screen and (max-width:1000px) {
    /* For mobile phones: */
    .capas, .capas2 {
      margin-left: 0%;
      margin-right: 0%;
    }
  }


  .text {
    color: white;
    max-width: 70ch;
    display: block;
    font-size: 16px;
    width: 90%;    
    margin-left: auto;
    margin-right: auto;
  }

  h2.capa{
    color: white;
  }

/*Produtos*/

.produtos{
    display: flex;
    margin-left: 20%;
    margin-right: 20%;
    margin-top: -1%;
}

@media only screen and (max-width:1000px) {
    /* For mobile phones: */
    .produtos {
      margin-left: 0%;
      margin-right: 0%;
    }
  }

.produtosbarro{
    display: flex;
    margin-left: 10%;
    margin-right: 10%;
    margin-top: -1%;
}

@media only screen and (max-width:1000px) {
    /* For mobile phones: */
    .produtosbarro {
      margin-left: 0%;
      margin-right: 0%;
    }
  }


  .produtosbarrocapa{
    display: flex;
    margin-left: 10%;
    margin-right: 10%;
    margin-top: -1%;
}

@media only screen and (max-width:1000px) {
    /* For mobile phones: */
    .produtosbarrocapa {
      margin-left: 0%;
      margin-right: 0%;
    }
  }


.barro{
    position: relative;
    text-align: center;
    font-weight: 500;
    margin-top: 2%;
    
}

.plastico{
    position: relative;
    text-align: center;
    font-weight: 500;
    margin-top: 2%;
}

#produtosimg{
    width: 70%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    margin-bottom: 10px;
}


#produtosimg2{
    width: 70%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0px;
}

#produtosimglinha{
    width: 70%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 25px;
}

#produtosimg3{
    width: 90%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5%;
  
}

#produtosimgh{
    width: 90%;
    display: block;
    margin-left: auto;
    margin-right: auto;
  
}

#produtosimgh:hover{
    opacity: 0.80;
    transition: 100ms;
}

#produtosimg5{
    width: 90%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5%;
  
}



#produtosimg3:hover{
    opacity: 0.80;
    transition: 100ms;
}

#produtosimg4{
    width: 90%;
    display: block;
    margin-left: auto;
    margin-right: auto;
   
}



#produtosimg4:hover{
    opacity: 0.8;
    transition: 100ms;
}

.tradicional{
    text-align: center;
    font-weight: 500;
    margin-top: 2%;
}

.contemporaneo{
    text-align: center;
    font-weight: 500;
    margin-top: 2%;
}

.rustico{
    text-align: center;
    font-weight: 500;
    margin-top: 2%;
}


hr.linhas{
    margin-top: 15px;
    width: 70%;
    border: 1px solid rgba(94, 94, 94, 0.418);;
}

hr.linhas2{
    margin-bottom: 20px;
    width: 70%;
    border: 1px solid rgba(94, 94, 94, 0.418);;
}

hr.linhas3{
    width: 70%;
    border: 1px solid rgba(94, 94, 94, 0.418);;
    margin-bottom: 12px;
}

hr.linhas4{
    width: 80%;
    border: 1px solid rgba(94, 94, 94, 0.418);;
    margin-bottom: 12px;
}

hr.linhastabela{
    margin-top: 15px;
    width: 70%;
    border: 1px solid rgba(94, 94, 94, 0.418);;
}

hr.linhastabelahide{
    margin-top: 15px;
    width: 70%;
    border: 1px solid transparent;
}


hr.linhasempresa{
    margin-top: 15px;
    width: 80%;
    float: right;
    border: 1px solid #f47937;
}

hr.linhasempresa2{
    margin-top: 15px;
    width: 70%;
    border: 1px solid #f47937;
}
.textoimg{
    font-size: 24px;
    text-align: center;
    color: rgb(94, 94, 94);
}

.textoimg4{
    font-size: 12px;
    text-align: center;
    color: rgb(94, 94, 94);
}



.textoimg2{
    font-size: 24px;
    text-align: center;
    margin-top: 30px;
}

.textoimgtabela{
    font-size: 16px;
    margin-top: 10px;
    text-align: center;
    color: rgb(94, 94, 94);
}

.textoimgtabelahide{
    font-size: 16px;
    margin-top: 10px;
    text-align: center;
    color: transparent;
    
}

#rotomoldagem{
    font-size: 80%;
}

footer{
    position: relative;
    margin-top: 2%;
    bottom: 0%;
    background-color: rgba(236, 236, 236, 0.596);
    width: 100%;
    height: 400px;
    display: flex;
}

p.footer{
    font-size: 20px;
    text-align: center;
    color: black;
}

p.chamada{
    font-size: 12px;
    text-align: center;
    color: black;
}



.container2 {
    margin-top: 10px;
    
  }
  
  .containerlocal {
    margin-left: auto;
    margin-right: auto;
  }
  

#local{
    float: left;
    height: 350px;
    position: absolute;
    left: 75%;
    margin-top: 20px;
}

a.mail{
    color: black;
}

#maps{
    margin-left: auto;
    margin-right: auto;
    margin-left: 5%;
    margin-top: 25px;
    border-radius: 1.5em;
}

.vasos{
    display: flex;
    margin: 2%;
    font-size: 120%;
}


@media only screen and (max-width:1000px) {
    /* For mobile phones: */
    .vasos {
      margin: 0%;
    }
  }



/*Vasos*/

.vaso{
    margin: 0%;
}

.vaso0{
    text-align: center;
    font-weight: 500;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    margin: 10;
}

.vaso0:hover{
    transform: scale(0.95);
    transition: 100ms;
}

.vaso1{
    text-align: center;
    font-weight: 500;
    margin-top: -2%;
}

.containeresquerda{
    position: absolute;
}

.vasoesquerda{
    margin-top: 10px;
    width: 85%;
    text-align: center;
    font-weight: 500;
}

.vasoesquerda2{
    margin-top: 15px;
    width: 80%;
    text-align: center;
    font-weight: 500;
}


.vasodireita{
    width: 30%;
    text-align: center;
    font-weight: 500;
}

.vaso2{
    text-align: center;
    font-weight: 500;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    margin: 10;
}

.vaso2:hover{
    transform: scale(0.95);
    transition: 100ms;
}

.vaso3{
    text-align: center;
    font-weight: 500;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    margin: 10;
}

.vaso3:hover{
    transform: scale(0.95);
    transition: 100ms;
}


.Vaso4{
    text-align: center;
    font-weight: 500;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    margin: 10;
}

.vaso4:hover{
    transform: scale(0.95);
    transition: 100ms;
}


.Vasotabela{
    text-align: center;
    font-weight: 500;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    margin: 10;
    transform: scale(0.90);
}

@media only screen and (max-width:1000px) {
    /* For mobile phones: */
    .Vasotabela {
    transform: scale(1);
    
    }
  }

.tabelabaixo0{
    display: flex;
}

.tabelabaixo{
    width: 25%;
}

@media only screen and (max-width:1000px) {
    /* For mobile phones: */
    .tabelabaixo {
     width: 35%;
    
    }
  }

.tabelabaixo2{
    width: 75%;
    bottom: 0;
}


.tabelatexto{
    width: 50%;
}

@media only screen and (max-width:1000px) {
    /* For mobile phones: */
    .tabelatexto {
     width: 70%;
    
    }
  }


.vasotabela:hover{
    transform: scale(0.85);
    transition: 100ms;
}


.null{
    text-align: center;
    font-weight: 500;
    margin: 10;
}



/*cores*/

.cor{  
    margin-top: 35px;
    margin-bottom: 35px;
}

.cor2{  
    margin-top: 35px;
}

.cores{
    display: flex;
    margin-top: 2%;
    font-size: 120%;
}

.cores2{
    display: flex;
    margin-top: 2%;
    font-size: 120%;
}


.cor1{
    text-align: center;
    font-weight: 500;
    margin-top: auto;
    margin-bottom: auto;
}

.cortexto{
    text-align: left;
    margin-top: auto;
    margin-bottom: auto;
    font-weight: 500;
    font-size: 120%;
}


@media only screen and (max-width:1000px) {
    /* For mobile phones: */
    .cortexto {
    font-size: 90%;
    }
  }




.cortexto1{
    text-align: left;
    font-weight: 500;
    font-size:70%;
    margin-top: auto;
    margin-bottom: auto;
}

#coresimg{
    width: 70%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-radius: 10em;
}

@media only screen and (max-width:1000px) {
    /* For mobile phones: */
    #coresimg {
        width: 90%;
    }
  }





#coresimg1{
    width: 70%;
    display: block;
    border-radius: 10em;
}


@media only screen and (max-width:1000px) {
    /* For mobile phones: */
    #coresimg1 {
        width: 90%;
    }
  }


.hide {
    display: none;
    position: absolute;
  }
      
  .show:hover + .hide {
    display: block;
    color: rgb(0, 0, 0);
  }


  #foto{
    border: 2px solid black;
    border-radius: 1em;
    margin: 10%;
  }

  /* Lingua */

  .lingua{
	position:absolute;
	top:0;
	right:0;
	text-align:right;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-style: normal;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: normal;
	color:#666;
    margin-right: 10px;
    margin-top: 10px;
}

@media only screen and (max-width:1000px) {
    /* For mobile phones: */
    .lingua {
        font-size: 20px;
        margin-top: 15px;
    }
  }


.lingua a{
	background:#fdd2b7;
	display:inline-block;
	margin-left:0px;
	height:30px;
	padding:2px;
	width:30px;
	line-height:30px;
	text-decoration:none;
	text-align:center;
	color:#FFF;
}


@media only screen and (max-width:1000px) {
    /* For mobile phones: */
    .lingua a {
     width: 50px;
     height: 50px;
     line-height: 50px;
    }
  }




.lingua a:hover{
	background:#f47937;
	text-decoration:none;
	color:#FFF;
}
.lingua .active-lang{
	background:#f47937!important;
}

button.back{
	top: 7%;
	left: 0px;
	position: absolute;
    background-color: #f47937;
	border: 2px solid black;
    border-left: 0px solid black;
    border-top-right-radius: 1.5em;
    border-bottom-right-radius: 1.5em;
    font-size: 20px;
    width: 40px;
    height: 40px;
    margin-bottom: 2%;
    font-family: helvetica, sans-serif;
    text-align: center;
}



button.back:hover{
	transition: ease-in;
	transform: scale(1.10);
	transition-duration: 100ms;
}


.voltar{
    display: flex;
    width: 100%;
}


.fabrico{
    background-color: #f47937;
    margin-top: 10px;
}



.letratitulo{
    font-size: 35px;
}


.letra{
    font-size: 19px;
    line-height: 150%;
}

.letraempresa{
    font-size: 38px;
    text-align: right;
    margin-top: 30px;
    color: #f47937;
}

.letraempresa2{
    font-size: 38px;
    text-align: center;
    color: #f47937;
}


@media only screen and (max-width:1000px) {
    /* For mobile phones: */
    .letraempresa2 {
        margin-top: 15%;
    }
  }

.letraicons{
    font-size: 14px;
    text-align: center;
    color: rgb(94, 94, 94);
    width: 20%;
}

.letraicons2{
    font-size: 14px;
    margin-left: 45%;
    position: absolute;
    color: rgb(94, 94, 94);
    width: 50%;
}

.icons{
    margin-bottom: 20px;
}

.icon{
    width: 50px;
    height: 50px;
    border: 1px solid rgba(0, 0, 0, 0.548);
    border-radius: 100%;
    margin-left: auto;
    margin-right: auto;
}


.icon1{
    width: 35px;
    margin-top: 7.5px;
}

.center {
    margin: auto;
    width: 35%;
    padding: 10px;
    font-size: 20px;
    color: black;
    text-align: right;
  }

  @media only screen and (max-width:1000px) {
    /* For mobile phones: */
    .center {
        width: 80%;
    }
  }
  

  .icontamanho{
    text-align: center;
    font-weight: 500;
    margin-top: auto;
    margin-bottom: auto;
    width: 20%;
}



.creditos{
    display:inline;
	float: left;
	position: relative;
	font-family: Verdana, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
	text-transform: normal;
	letter-spacing: normal;
	line-height: 0.5em;
	color:#aaaaaa;
    background-color: rgba(236, 236, 236, 0.596);
}


.creditos2{
    display:inline;
	float: left;
    bottom: 0%;
	position: relative;
	font-family: Verdana, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
	text-transform: normal;
	letter-spacing: normal;
	line-height: 0.5em;
	color:#aaaaaa;
}


.creditos3{
    margin-top: 10%;
    display:inline;
	float: left;
    bottom: 0%;
	position: relative;
	font-family: Verdana, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
	text-transform: normal;
	letter-spacing: normal;
	line-height: 0.5em;
	color:#aaaaaa;
}



.slidetamanho{
    width: 50%;
}


@media only screen and (max-width:1000px) {
    /* For mobile phones: */
    .slidetamanho {
        width: 90%;
    }
  }


  .coresrotomoldagem{
    width: 24%;
  }

  .vidrados{
    width: 100%;
  }

  .novo{
    font-weight: bold;
    color: #f47937;
    font-size: 28px;
    line-height: 0%;
    display: flex;
    justify-content: center;
    margin-top: -73%;
    

  }

  .gama{
    color: #7c9a90;
    margin-top: 0%;
    margin-bottom: 0%;
  }

  .gamavidrados{
    color: #7c9a90;
    margin-top: 0%;
    margin-bottom: 0%;
  }

  .coresvidrados{
    display: flex;
    width: 100%;
  }

  .brancovidrado{
    width: 15%;
    text-align: center;
  }

  .mostardavidrado{
    width: 27%;
    text-align: center;
  }

  .vermelhovidrado{
    width: 25%;
    text-align: center;
  }

  .verdevidrado{
    width: 16%;
    text-align: center;
  }

  .verdeiris{
    width: 25%;
    text-align: center;
  }

  .azuliris{
    width: 25%;
    text-align: center;
  }

  .mostardairis{
    width: 25%;
    text-align: center;
  }

  .verde2iris{
    width: 25%;
    text-align: center;
  }

  .mostardaparede{
    width: 16%;
    text-align: center;
  }

  .amareloparede{
    width: 19%;
    text-align: center;
  }

  .verdeparede{
    width: 14%;
    text-align: center;
  }

  .verdeprato{
    width: 25%;
    text-align: center;
  }

  .azulprato{
    width: 25%;
    text-align: center;
  }

  .mostardaprato{
    width: 25%;
    text-align: center;
  }

  .verde2prato{
    width: 25%;
    text-align: center;
  }


  .corvidrado{
    border-radius: 20em;
    transform: scale(1.40);
    margin-top: 0%;
  }