/*#19b340*/
/*#009933*//*web safe*/

 
/*#0088C*/
/*#3399CC*//*web safe*/
/*font-size: clamp(1.5rem, 10vw - 2.9rem, 4rem);*/
:root {
	/*VERDE LEIRIVIGA*/
	--verde: hsla(135, 75%, 40%, 1);
	--verde_medio: hsla(117, 65%, 47%, 1);
	--verde_claro: hsla(100, 55%, 55%, 1);
	
	--verde_claro1: hsla(100, 55%, 55%, 0.85);
	--verde_claro2: hsla(100, 55%, 55%, 0.65);
	--verde_claro3: hsla(100, 55%, 55%, 0.45);
	--verde_claro4: hsla(100, 55%, 55%, 0.25);
	--verde_claro5: hsla(100, 55%, 55%, 0.15);
	
	/*VERDE ESCURO*/
	--verde_footer1: hsla(125, 39%, 11%, 1);
	
	/*AZUL LITOPREL*/
	--azul: hsla(200, 100%, 40%, 1);
	--azul_medio: hsla(200, 65%, 63%, 1);
	--azul_claro: hsla(200, 65%, 85%, 1);
	--azul_claro2: hsla(200, 65%, 85%, 0.65);
	--azul_claro3: hsla(200, 65%, 85%, 0.45);
	--azul_claro4: hsla(200, 65%, 85%, 0.25);
	--azul_claro5: hsla(200, 65%, 85%, 0.15);
	
	/*CINZA*/
	--cinza_texto: hsla(0, 0, 20%, 1);	/*#333333*/
	--cinza_60: hsla(0, 0, 40%, 1);		/*#666666*/
	--cinza_40: hsla(0, 0, 60%, 1);		/*#999999*/
	--cinza_20: hsla(0, 0, 80%, 1);		/*#cccccc*/
	--cinza_10: hsla(0, 0, 90%, 1); 	/*#e5e5e5*/
	

	--wide: 75%;
	--narrow: 25%;
	--font-size: 1.125rem;
} 

html,body, p {
	font-family:robotoregular, sans-serif;
	line-height:1.5;
	color: var(--cinza_texto);
} 

h1, h2  {
  font-family: roboto_condensedbold, sans-serif;
  margin:0;
}

h3, h4, h5, h6  {
  font-family: robotoregular, sans-serif;
  margin:0;
  color: var(--cinza_texto);
}

  
p.legenda  {
    padding-top:1em;
	font-weight: 200;
  }
 
p.legendapavimento  {
	font-weight: 200;
  } 


.titulocinza  {
	text-transform: uppercase;
	font-weight: 300;
  }

.tituloverde  {
	margin-top: -0.4em;
	text-transform: uppercase;
	font-weight: 800;
	
	/*VERDE LEIRIVIGA*/
	color: var(--verde); 	
  }
  
  .tituloazul  {
	margin-top: -0.4em;
	text-transform: uppercase;
	font-weight: 800;
	
	/*azul LITOPREL*/
	color: var(--azul); 	
  }
  
.tituloverdebranco  {

	text-transform: uppercase;
	font-weight: 800;
	
	/*branco*/
	color: #ffffff; 	
  }

.subtitulo  {
	font-family: roboto_condensedbold, sans-serif;
	font-weight: 600;
	font-size: 1.5em;  
  }
  
.subtituloverde  {
	font-family: roboto_condensedbold, sans-serif;
	font-weight: 200;
	font-size: 1.5em;
	margin-bottom:0.1em;
	color: var(--verde); 	
  }
  
.subtituloazul  {
	font-family: roboto_condensedbold, sans-serif;
	font-weight: 200;
	font-size: 1.5em;
	margin-bottom:0.1em;	
	color: var(--azul);  
  }
  
.destaque  {
	font-family: roboto_condensedbold, sans-serif;
	font-weight: 800;
	font-size: 1em; 
	color: var(--cinza_texto);  
  }
  
.unidade  {
    font-family: robotoitalic, sans-serif;
	 font-style: italic;
  }

.w3-content {
  max-width:1600px;
}


* {
  box-sizing: border-box;
}
.flex-container {
    display: flex;
    flex-wrap: wrap; 
 
}


    /*	Hover GALLERY*/
    /*	Este Hover não se deve apagar os outros já sao carregado em Hover Box , Belchior*/
      .hovergalleryM img{
        -webkit-transform:scale(0.95); /*Webkit: Scale down image to 0.8x original size*/
        -moz-transform:scale(0.95); /*Mozilla scale version*/
        -o-transform:scale(0.95); /*Opera scale version*/
        -webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
        -moz-transition-duration: 0.5s; /*Mozilla duration version*/
        -o-transition-duration: 0.5s; /*Opera duration version*/
        opacity: 0.8; /*initial opacity of images*/
        margin: 0 10px 5px 0; /*margin between images*/
      }

      .hovergalleryM img:hover{
        -webkit-transform:scale(1.05); /*Webkit: Scale up image to 1.2x original size*/
        -moz-transform:scale(1.05); /*Mozilla scale version*/
        -o-transform:scale(1.05); /*Opera scale version*/
        box-shadow:0px 0px 20px gray; /*CSS3 shadow: 30px blurred shadow all around image*/
        -webkit-box-shadow:0px 0px 20px gray; /*Safari shadow version*/
        -moz-box-shadow:0px 0px 20px gray; /*Mozilla shadow version*/
        opacity: 1;
      }

  /*	SEPARADORES VERTICAIS NO MENU PRINCIPAL*/   
      .vrsoft {
        margin-left: 0px;
        margin-right: 10px;
        height: 100px;
        border: 0;
        border-left: 2px solid #ffffff;
        display: inline-block;
        vertical-align: bottom;
      }
      .vr2 {
        margin-left: 0px;
        margin-right: 10px;
        height: 50px;
        border: 0;
        border-left: 1px solid #ffffff;
        display: inline-block;
        vertical-align: bottom;
      }  
      .vr3 {
        margin-left: 0px;
        margin-right: 10px;
        height: 110px;
        border: 0;
        border-left: 1px solid #ffffff;
        display: inline-block;
        vertical-align: bottom;
      }
      .vreng {
        margin-left: 0px;
        margin-right: 10px;
        height: 90px;
        border: 0;
        border-left: 2px solid #ffffff;
        display: inline-block;
        vertical-align: bottom;
      }
      .vreng_long {
        margin-left: 0px;
        margin-right: 10px;
        height: 250px;
        border: 0;
        border-left: 1px solid #ffffff;
        display: inline-block;
        vertical-align: bottom;
      }
  /* FIM DE	SEPARADORES VERTICAIS NO MENU PRINCIPAL*/ 

  /*MENU PRINCIPAL*/ 
      .gallerycontainer{
        position: relative;
        /*Add a height attribute and set to largest image's height to prevent overlaying*/
      }
      .thumbnail img{
        border: 1px solid white;
        margin: 0 5px 5px 0;
      }
      .thumbnail:hover{
        background-color: transparent;
      }
      .thumbnail:hover img{
        border: 1px solid blue;
      }
      .thumbnail span{ /*CSS for enlarged image*/
        position: absolute;
        background-color: lightyellow;
        padding: 5px;
        left: -1000px;
        border: 1px dashed gray;
        visibility: hidden;
        color: black;
        text-decoration: none;
      }
      .thumbnail span img{ /*CSS for enlarged image*/
        border-width: 0;
        padding: 2px;
      }
      .thumbnail:hover span{ /*CSS for enlarged image*/
        visibility: visible;
        top: 0;
        left: 200px; /*position where enlarged image should offset horizontally */
        z-index: 50;
      }
    /*FIM - MENU PRINCIPAL*/



      .flex-item-texto {
        /*background-color :#f4faf4 ;*/
        padding: 10px;
        flex: 100%;
        text-align: left;
        font-size: 1em;
        color: var(--cinza_60);
      }
      .flex-item-texto-pavimentos {
        padding: 10px;
        flex: 100%;
    
        font-size: 1em;
        color: var(--cinza_60);
      }
      .flex-item-specs {
			background-color: #19b4461a;
		  /*background-color: rgba(25, 180, 70, 0.1);*/
        padding: 0px;
        flex: 20%;
        text-align: center;
        align-items: flex-end;
        font-size: 1em;
        color: var(--cinza_60);
		 
      }
	    .flex-item-specs_litoprel {
			background-color: var(--azul_claro);
		  /*background-color: rgba(25, 180, 70, 0.1);*/
        padding: 0px;
        flex: 20%;
        text-align: center;
        align-items: flex-end;
        font-size: 1em;
        color: var(--cinza_60);
		 
      }
      .flex-item-foto {
      /* background-color: #dbefdc ;*/
        padding: 10px;
        flex: 30%;
        text-align: center;     
      }
      .footer {
        padding: 10px;
        flex: 100%;
        text-align: center;
      }

/* Responsive layout - makes a one column-layout instead of a two-column layout */
@media (max-width: 800px) {
  .flex-item-texto, .flex-item-specs, .flex-item-foto {
    flex: 100%;
  }
}
    .block-group {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
        grid-gap: 9px;
      }
      .block-group div {
        background: lavender;
        height: 200px;
      }

  
  
  /* largura tabela pavimentos landing page- dentro de flexbox */
  .tabela-pavs {
    width: 100%;
  }


/* Responsive layout grid - pavimentos parte superior */

.header {
  grid-area: header;
}  
.titulo {
  grid-area: titulo;
}  

.foto {
  grid-area: foto;
}

.texto {
  grid-area: texto;
}

.specs {
  grid-area: specs;
}

.footer {
  grid-area: footer;
}

.wrapper {
  background-color: #fff;
  width: 100%;
}

.wrapper {
  display: grid;
  grid-template-areas:
    "header"
    "titulo"
    "foto"
    "specs"
    "texto"
    "footer";
    row-gap: 2em;
}

.box {
font-size: 100%;
 
}

.texto ul { 
  display: flex;
  flex-direction: row;
  list-style-type: none;
  padding: 0; 
  margin-top: 20px;
  justify-content:space-between ;

}

@media only screen and (min-width: 650px)  {
.wrapper {

  grid-template-columns: 150px auto;
  grid-template-areas:
  "header    header"
  "titulo   titulo"
  "specs  foto"
  "texto   texto"
  "footer  footer";
  column-gap: 2em;
  
}
.texto ul {
  flex-direction: row;
}
  .tabela-estreita {
    width: 100%;
  }
  .tabela-maior {
    width: 100%;
  }
}

@media only screen and (min-width: 1000px)   {
  .wrapper {
  
    grid-template-columns: auto 150px minmax(350px, 450px) ;
    grid-template-areas:
    "header    header    header "
    "titulo    specs     foto   "
    "texto     specs      foto  "
    "footer    footer    footer ";
    column-gap: 2em;
    max-width: 100%;
  }
  .texto ul { 
    flex-direction: row;
  }
  .tabela-pavs {
    width: 80%;
  }
  .tabela-estreita {
    width: 40%;
  }
  .tabela-maior {
    width: 70%;
  }
}

@media only screen and (min-width: 1400px)   {
  .wrapper {
    grid-gap: 10px;
    grid-template-columns: auto 150px minmax(350px, 450px) ;
    grid-template-areas:
    " header    header    header   "
    "  titulo    specs     foto     "
    "  texto     ...      foto    "
    "  footer    footer    footer  ";
    max-width: 100%;  
  }
  .texto ul {
    flex-direction: column;
  }
  .tabela-pavs{
    width: 80%;
  }
  .tabela-estreita {
    width: 40%;
  }
  .tabela-maior {
    width: 70%;
  }
}


  .flex-item-specs2 {
    display: flex;
    padding: 0px;
    flex-direction: column;
    align-self: flex-end;
}

.flex-item-specs2 div {
    border-bottom: var(--verde);
    font-size: 12px;
    color: var(--cinza_60)
    text-align: center;  
}

/* border */
hr.new {
  border: 0.8px solid var(--verde);
  margin-top: 2px;
}
hr.litoprel {
  border: 1px solid var(--azul);
  margin-top: 2px;
}

hr.old {
  border: 1px solid var(--verde);
}
/* border */
hr.separador {
  border: 2px solid var(--verde);
  margin: 15px 0px;
}


/* grelha de imagens com largua e altura definidas */
  .grelha-img {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 1em;
  }
  .grelha-img div {
    /* background: lavender;*/
    /*height: 200px;*/
    align-self: center;
    justify-self: center;   
  }

  /* border */
.specs-pics {
  padding-right: 20px;
  color: var(--cinza_60);
}

 /* row especificações modal */
 .linha{
  margin-top: 2em;
}
  /* texto especificações modal */
  .texto-modal{
    color: var(--cinza_60);
    padding-left: 20px;
  }
    /* texto titulo especificações modal */
    .titulo {
      font-size: 1.2em;
      /*font-weight: 800;*/
    }


    /* alinhamento centrado pavimentos landing page-flexbox */
  .tech-img {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .titulo-pavs  {
    text-align: center;
    color:var(--verde);
    padding: 20px 0px 30px;
    font-size: 2em;
    font-weight: 200; 
    text-transform: uppercase;
  }


 /* LINKS COM ANIMAÇÃO DE BARRA INFERIOR COR VERDE A APARECER */

a p {
  position: relative;

}

a p::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 4px;
    border-radius: 4px;
    
    bottom: 0;
    left: 0;
    transform-origin: right;
    transform: scaleX(0);
    transition: transform .3s ease-in-out;
  }

a p:hover::before {
  transform-origin: left;
  transform: scaleX(1);
}
    

/* botao open side menu pavimentos */
div.fixed {
	position: fixed;
	top: 200;
	right: 0;
	width: 300px;
}

/* amplia imagens hover */
.zoom {

  transition: transform .2s; /* Animation */
  margin: 0 auto;
}
.zoom:hover {
  transform: scale(1.05); 
}

/* sombra oficial */
.sombra {
	box-shadow:0px 5px 5px 0px;
}

		
.padrao {
        background-image: url("//LV/img/obras.svg");
		background-repeat: repeat-x;
		}
.galeria_img {	
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
		padding:10px; 
		margin-bottom:10px;	
		}