#header{
	/*Novamente definimos a largura da div*/
	width:100%;
	/* altura da div */
	height:100px;
	/* Cor de fundo da div */
	background-color:#00F;
	
	}
#conteudo{
	/*Novamente definimos a largura da div*/
	width:100%;
	/* altura da div */
	height:80%;
	float:top;
	/* Cor de fundo da div */
	background-color:#FFFF00;
	
}	

#contd{
	/*Novamente definimos a largura da div*/
	width:100%;
	/* altura da div */
	height:80%;
	float:top;
	/* Cor de fundo da div */
	background-color:#FFFF00;
	
}

#conteudo-left{
	padding: 10px;
	/*Novamente definimos a largura da div*/
	width:100%;
	align-items: center;
	/* altura da div */
	height:100%;
	/* O atributo Float é utilizado para fazermos o nosso bloco(div) literalmente flutue e se posicione onde queremos na página, quando escolhemos left, dizemos que esse bloco irá se posicionar na parte esquerda da página */
	/*float:left;*/
	/* Cor de fundo da div */
background-color:#F5EFE4;
	
	}
#conteudo-right{
	padding: 10px;
	/*Novamente definimos a largura da div*/
	width:100%;
	/* altura da div */
	height:100%;
	/* Pode parecer meio estranho usarmos o mesmo atributo left para o bloco em que queremos posicionar na direita, mas como sabemos, o CSS é um estilo em cascata, nossa div conteúdo definimos a largura de 1000px e na conteudo-left 500px, 
automaticamente ao definirmos o conteudo-right com 500px e à esquerda também, ele ficou à direita do conteudo-left, pois o máximo que a div filha poderá ter é 1000px, sendo 500+500=1000px */
	/*float:left;
	 Cor de fundo da div */
	background-color:#FAFAD2;
	}

#conteudo-imags{
	padding: 10px;
	/*Novamente definimos a largura da div*/
	width:100%;
	/* altura da div */
	height:100%;
	background-color:#FAFAD2;
	}

	#contenedorHijo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}