/* reset básico */

/* ------------------------------------------- UI designer - SITE 54 ----------------------------------------------------------- */


body{
			background-position: center center;
			background-repeat:  no-repeat;
			background-attachment: fixed;
			background-size:  cover;
	
}

a:link {
	color: #fff;
	text-decoration: none;
}
a:visited {
	color: #fff;
	text-decoration: none;
}
a:hover {
	color: #fff;
	text-decoration: none;
}
a:active {
	color: #fff;
	text-decoration: none;
}

::-webkit-scrollbar {
  width: 15px;
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: #dbdfe0;
}

::-webkit-scrollbar-thumb {
  background-color: #dbdfe0;
  border-radius: 20px;
}

::-webkit-scrollbar-thumb {
  background-color: #dbdfe0;
  border-radius: 20px;
  border: 6px solid transparent;
  background-clip: content-box;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* ------------------------  coluna A home fixo ---------------------------------------------------------------------- */
.child1 {
  width: 100px;
  height: 250px;
  /* Centralizar na vertical e na horizontal */
  position: absolute;
  top: 50%;
  left: 30%;
  margin: -25px 0 0 -25px; /* aplique margens superior e esquerda negativas para centralizar de verdade o elemento */
}


/* ------------------------  coluna B home fixo ---------------------------------------------------------------------- */
.child2 {
  width: 100px;
  height: 250px;
  /* Centralizar na vertical e na horizontal */
  position: absolute;
  top: 40%;
  left: 30%;
  margin: -25px 0 0 -25px; /* aplique margens superior e esquerda negativas para centralizar de verdade o elemento */
  
}

/* ------------------------  coluna A paginas fixo ---------------------------------------------------------------------- */
.child3 {
  width: 100px;
  height: 250px;
  /* Centralizar na vertical e na horizontal */
  position: absolute;
  top: 55%;
  left: 0%;
  margin: -25px 0 0 -25px; /* aplique margens superior e esquerda negativas para centralizar de verdade o elemento */
  
}

/* ------------------------  coluna A fixo paginas portifolio 123... ---------------------------------------------------------------------- */
.child4 {
  width: 100px;
  height: 250px;
  /* Centralizar na vertical e na horizontal */
  position: absolute;
  top: 45%;
  left: 0%;
  margin: -25px 0 0 -25px; /* aplique margens superior e esquerda negativas para centralizar de verdade o elemento */
  
}

/* ----------- linha vertival ----------------*/


.linha-responsiva1 {
  border: none;
  height: 4000px;
  background-color: #fff;
  width:  1px;
  margin: 0px 0; opacity: 0.4;
}

.linha-responsiva2 {
  border: none;
  height: 4000px;
  background-color: #fff;
  width:  1px;
  margin: 0px 0; opacity: 0.4;
}

/* ----------- Efeito vidro ----------------*/
.vidro1 {
            background: rgba(255,255,255,0.7);
            backdrop-filter: blur(4px);
            border-radius: 0px;
            border: 0px solid rgba(204,204,204,0.2);
	        z-index:0;
}

/* ----------- Efeito vidro ----------------*/
.vidro2 {
            background: rgba(0,0,0,0.1);
            backdrop-filter: blur(4px);
            border-radius: 0px;
            border: 0px solid rgba(204,204,204,0.2);
	        z-index:0;
}

/* ----------- borda divisória --------------*/
.bor001 {
border-right: 1px solid #fff;
z-index:0;
}

/* ----------- Crop de imagem ----------------*/
.crop {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ----------- borda das imagem portfolio ----------------*/
.beirada {
background: #fff;
  padding: 0.1rem;
  box-shadow: 0 0.2rem 1.2rem rgba(0,0,0,0.2);
}
/* ------------------------------------------- UI designer - SITE 54 ----------------------------------------------------------- */




#botoes li{
	display: inline-block;
	list-style-type: none;
	padding-right: 20px;
}

		#menu ul {

			padding:0px;
			margin:0px;
			float: center;
			width: 100%;
			list-style:none;

		}
 
		#menu ul li { display: inline;  }
 
		#menu ul li a {
			color: #333;
			text-decoration: none;
			float:left;
			margin:2px;
			
			

		}

/* ----------- logos da paginas 2026 --------------*/
 #logo {
    height: 200px;
    width: 80%;
    float: center;
	z-index: 100;
	position:absolute;
	top:150px; 
	left: 10%;
	z-index:1;	
	
}

/* ----------- foto do perfil --------------*/

.thumbnail {
  width: 50px;
  height: 50px;
  display: flex;
  border-radius: 100%;
  box-shadow: 0 13px 26px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.2);
}



/* ----------- botão do menu ----------------*/
.btn_menu button {
  margin-right: 7px;
  margin-left: 7px;
  margin-top: 7px; 	
  float: center;
  display: inline-block;
  height: 40px;
  width: 130px;
  box-sizing: border-box;
  border: transparent;
  border-radius: 0px;
  font-family: 'osw', 'Arial Narrow', Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: #ff0000;  background-color: #D85A5D;
  cursor: pointer;
  outline: none;
  border: 0px solid #fff;
}

/* ----------- borda MEUS TRABALHO --------------*/

.polaroid1 {
    align-items: center;
	  background: #fff;
  padding: 0.5rem;
  box-shadow: 0 0.2rem 1.2rem rgba(0,0,0,0.2);
   transform: rotate(-9deg);
  
} 

.polaroid2 {
    align-items: center;
	  background: #fff;
  padding: 0.5rem;
  box-shadow: 0 0.2rem 1.2rem rgba(0,0,0,0.2);
   transform: rotate(9deg);
  
} 

.polaroid3 {
    align-items: center;
	  background: #fff;
  padding: 0.5rem;
  box-shadow: 0 0.2rem 1.2rem rgba(0,0,0,0.2);
   transform: rotate(0deg);
  
} 



/* ----------- Efeito pontinhos SEM USO ----------------*/
#over_big {
	position:absolute;
    height: 110px;
    width: 300px;
	background-position: center;
	background-repeat: repeat;
	left: 0px;
	top: 0px;
	background-image: url(../img_site/15.png);

	z-index: 2;
}  


/* ----------- Div mãe para todos os destaques de 2 lado ----------------*/
.div_mae {
	position:relative;
	
}


/* ----------- Div do lado esquerdo do topo data ----------------*/
.div_copy {
	position:absolute;
    height: 140px;
    width: 300px;
	top:370px; 
	left: 3%;
	z-index:5;	background-color: #000;
	
}


/* ----------- Botao com link dos destaques  ----------------*/
.div_filha0 {
	position:absolute;
    height: 50px;
	top:450px; 
	right: 5%;	
	
}

/* ------------------------------ LINHA 1 Topo do site  -------------------------------------------*/

/* ----------- Div do lado direito do topo destaque ----------------*/
.div_filha1 {
	position:absolute;
    height: 200%;
    width: 3%;
	top:30%; 
	left: 0px;	
	
}



/* ----------- Div do lado esquerdo do topo logo ----------------*/
.div_filha3  {
	position:absolute;	
    height: 150px;
    width: 100%;
    float: center;
	z-index: 100;
	top:160px; 
	left: 0%;
	z-index:1;	
}

/* ------------------------------ LINHA 2 ENSAIOS E PRODUTOS  -------------------------------------------*/


/* ----------- Div do lado esquerdo 2 linha ----------------*/
.div_filha4  {
	position:absolute;	
    height: 100px;
    width: 100%;
    float: center;
	z-index: 100;
	top: 30px; 
	right: 0px;
	z-index:9;        
}

/* ----------- Div do lado direitO 2 linha ----------------*/
.div_filha5  {
	position:absolute;	
    height: 100px;
    width: 100%;
    float: center;
	z-index: 100;
	top: 170px; 
	right: 0px;
	z-index:10;        
}

/* ------------------------------ LINHA 3 EVENTOS E MEUS TRABALHOS  -------------------------------------------*/


/* ----------- Div do lado esquerdo 3 linha ----------------*/
.div_filha6  {
	position:absolute;	
    height: 100px;
    width: 100%;
    float: center;
	z-index: 100;
	top: 20px; 
	right: 0px;
	z-index:9;         
}



/* ----------- Div do lado direito 3 linha ----------------*/
.div_filha9  {
	position:absolute;	
    height: 100%;
    width: 100%;
    float: center;
	background-position: center;
	background-repeat: repeat;
	left: 0px;
	top: 0px;
	background-image: url(../img_site/15.png);
	z-index: 0; 

}

/* ----------- Div do lado direito 3 linha ----------------*/
.div_filha10 {
	position:absolute;
    height: 150px;
    width: 200px;
	top:170px; 
	left: 40px;
	z-index: 2; 
	

	
}


/* ----------- Div do lado direito 3 linha ----------------*/
.div_filha11 {
	position:absolute;
    height: 150px;
    width: 200px;
	top: 280px; 
	left: 140px;
	z-index: 2; 	    
	
}

/* ----------- Div do lado direito 3 linha ----------------*/
.div_filha12 {
	position:absolute;
    height: 150px;
    width: 200px;
	top: 50px; 
	left: 140px;
	z-index: 2; 	   

	
}

/* ----------- Div do lado direito 3 linha ----------------*/
.div_filha13 {
	position:absolute;
    height: 110px;
    width: 100%;
	top: 180px; 
	right: 8%;
	z-index: 2; 	   
    text-align: right;
	
}


/* ------------------------------ LINHA 5 RODAPE -------------------------------------------*/


/* ----------- Div rodape lado esquerda  ----------------*/
.div_filha14 {
	position:absolute;
    height: 110px;
    width: 80%;
	top: 70px; 
	right: 10%;
	z-index: 2; 	   
}

/* ----------- Div rodape lado direito  ----------------*/
.div_filha15 {
	position:absolute;
    height: 110px;
    width: 80%;
	top: 70px; 
	right: 10%;
	z-index: 2; 	   
}


/* ----------- Topo das paginas ----------------*/
.div_filha7  {
	position:absolute;	
    height: 70px;
    width: 100%;
    float: center;
	z-index: 100;
	top: 350px; 
	right: 0%;
	z-index:10;  
    padding-top: 0px;
}

/* ----------- SEM USO ----------------*/
.div_filha8  {
	position:absolute;	
    height: 200px;
    width: 80%;
    float: center;
	z-index: 100;
	top: 130px; 
	left: 10%;
	z-index:10;   
    text-align: justify;	    

}

/* ------------------------------------- Imagens backgraund  ---------------------------------------------*/

/* ------------------------------ LINHA 1 TOPO DO SITE HOME  -------------------------------------------*/

/* ----------- Topo lado esquerdo  ----------------*/
.topo1_img {
	background-image: url('../img_site/topo1.png');
	width: 100%;
	height: 500px;
			background-position: top center;
			background-repeat:  no-repeat;
			background-size: cover;	
			z-index:0; 

}

/* ----------- Topo lado direito  ----------------*/
.topo2_img {
	background-image: url('../img_site/topo2.png');
	width: 100%;
	height: 500px;
			background-position: top center;
			background-repeat:  no-repeat;
			background-size: cover;	
			z-index:0; 
}


/* ------------------------------ LINHA 2 ENSAIO E PRODUTO  -------------------------------------------*/

/* ----------- Ensaio lado esquerdo  ----------------*/
.ensaio1_img {
	background-image: url('../img_site/ensaio.jpg');
	width: 100%;
	height: 500px;
			background-position: center center;
			background-repeat:  no-repeat;
			background-size: cover;	
			z-index:0; 

}

/* ----------- produto lado esquerdo  ----------------*/
.produto_img {
	background-image: url('../img_site/produto.jpg');
	width: 100%;
	height: 500px;
			background-position: top top;
			background-repeat:  no-repeat;
			background-size: cover;	
			z-index:0; 

}


/* ------------------------------ LINHA 3 EVENTO MEUS TRABALHOS  -------------------------------------------*/

/* ----------- Ensaio lado esquerdo  ----------------*/
.evento1_img {
	background-image: url('../img_site/evento1.jpg');
	width: 100%;
	height: 500px;
			background-position: top center;
			background-repeat:  no-repeat;
			background-size: cover;	
			z-index:0; 

}

/* ----------- Meus trabalhos lado esquerdo  ----------------*/
.myjobs_img {
	background-image: url('../img_site/evento2.jpg');
	width: 100%;
	height: 500px;
			background-position: top top;
			background-repeat:  no-repeat;
			background-size: cover;	
			z-index:0; 

}

/* ----------- Ensaio lado esquerdo  ----------------*/
.rod1_img {
	background-image: url('../img_site/rod_01.jpg');
	width: 100%;
	height: 500px;
			background-position: top top;
			background-repeat:  no-repeat;
			background-size: cover;	
			z-index:0; 

}

/* ----------- Ensaio lado esquerdo  ----------------*/
.rod2_img {
	background-image: url('../img_site/rod_02.jpg');
	width: 100%;
	height: 500px;
			background-position: top top;
			background-repeat:  no-repeat;
			background-size: cover;	
			z-index:0; 

}