@font-face {
  font-family: 'FreeSans';
  src: url('FreeSans.otf');
}

body {
background:#02010a;
	
}

div#conteudo{
	max-width:900px;
	margin:0 auto;
	
	animation-name: imagem2-animacao;
	animation-duration: 2s;
	
}

@keyframes imagem2-animacao {
	0% {
		position: relative;
		margin-top: 150%;
	}
	60% {
		position: relative;
		margin-top: -5%;
	}
	100% {
		position: relative;
		margin-top: 0%;
	}
}


header {
	
background-color: #5b7989;
	  border-top-left-radius: 10px;
	  border-top-right-radius: 10px;
	  width:100%;
	  height:100px;

}

div#menu{

}

div#menu h1 {
	float:left;
	padding-left: 1%;
	font-size: 1.9em;
	text-align:left;
	color:#fff;
	text-shadow: 2px 2px #02010a;
  font-family: 'Indie Flower', cursive;
  font-variant: small-caps;
  font-weight: bold;
}

div#menu ul{
	margin-left:15%;
float:left;
padding:1%;
width:30%;
}

ul  {
  list-style: none;
}

div#menu ul li{
	float:left;
	margin:2%;
}

div#menu ul li a{
	color:#fff;
	font-size: 1.3em;
	font-family: 'Indie Flower', cursive;
  font-variant: small-caps;
  font-weight: bold;
	
}

a#menu-01 {
  text-decoration:none;
} 

#conteudo-01 {

	background:#82c3a6;
}

#conteudo-02 {
	
	background: #d5c75f ;
}

#conteudo-03 {
	
	
}

figure {
	text-align: center;
	padding-top:2%;
	padding-bottom:2%;
}

figure img {
	width: 80%;
	    box-shadow: 4px 4px 2px #02010a;

}

.container {
	display: flex;
	flex-direction: row;
}



#imagem-01 img{
	width:90%;
	border: 1px solid #fff;
	 box-shadow: 2px 2px 2px #02010a;
	 cursor:pointer;
}

#imagem-02 img{
	width:90%;
	border: 1px solid #fff;
	 box-shadow: 2px 2px 2px #02010a;
	 	 cursor:pointer;

}

#imagem-01 a{
color:#000;
font-family: 'Indie Flower', cursive;
  font-variant: small-caps;
  font-weight: bold;
  font-size: 1.6em;
}

#imagem-02 a{
color:#000;
font-family: 'Indie Flower', cursive;
  font-variant: small-caps;
  font-weight: bold;
  font-size: 1.6em;
}

#imagem-01 img:hover{
 transform: rotate(10deg);
	 box-shadow: 2px 2px 2px #82c3a6;
	 transition-duration: 1.0s;
}




#imagem-02 img:hover{
 box-shadow: 2px 2px 2px #82c3a6;
 
  -ms-transform: translate(20px,-5px); /* IE 9 */
  -webkit-transform: translate(20px,-5px); /* Safari */
  transform: translate(20px,-5px); /* Standard syntax */
  transition-duration: 1.0s;
}
 



.container > div {
	text-align: center;
	padding: 10px;
	margin: 10px;
	width: 50%;
}

footer {
	
	background: #C6d5c5 ;
	border-bottom-left-radius: 10px;
	  border-bottom-right-radius: 10px;
	text-align: center;
}

footer div.bloco{
	width:23%;
	height:;
	
}

footer div#bloco{
	width:30%;
	height:;
	
}

footer div.bloco h3{
color:#000;
text-align:left;
font-family: 'Indie Flower', cursive;
  font-variant: small-caps;
  font-weight: bold;
  font-size: 1.5em;
}

footer div#bloco h3{
color:#000;
text-align:left;
font-family: 'Indie Flower', cursive;
  font-variant: small-caps;
  font-weight: bold;
  font-size: 1.5em;
}

div.bloco p{
color:#000;
text-align:left;
font-family: 'Indie Flower', cursive;
  font-variant: small-caps;
  font-weight: bold;
  font-size: 1.0em;
}

div.bloco a{
color:#000;
text-align:left;
font-family: 'Indie Flower', cursive;
  font-variant: small-caps;
  font-weight: bold;
  font-size: 1.0em;
}



div#bloco p{
color:#000;
text-align:left;
font-family: 'Indie Flower', cursive;
  font-variant: small-caps;
  font-weight: bold;
  font-size: 0.9em;
}

div#bloco img{
	width:20px;
}



@media all and (max-width: 900px) {
	
	div#conteudo{
	width:100%;	
	}
	
	header {
	height:160px;
}
	
div#menu h1{
	width:80%;
	margin-left:10%;
	text-align:center;

}

div#menu ul{
	width:30%;
	margin-left:35%;
	text-align:center;

}

div#imagem-01{
margin:0 auto;
width:80%;	
	   
}

#imagem-01 img{

	
}

#imagem-02 {
margin:0 auto;
width:80%;	

	   }

#imagem-02 img{

	
}

.container {
	display:  block;;
	
}

footer{
	padding-left:10%;

	}

footer div.bloco{
	width:70%;
	height:;
	
}

footer div#bloco{
	width:70%;
	height:;
	
}

footer div.bloco h3{

  font-size: 1.9em;
}

footer div#bloco h3{

  font-size: 1.9em;
}

div.bloco p{

  font-size: 1.5em;
}

div.bloco a{

  font-size: 1.3em;
}



div#bloco p{

  font-size: 1.4em;
}

}

@media all and (max-width: 800px) {



div#menu ul{
	width:35%;
	margin-left:33%;


}



}


@media all and (max-width: 700px) {



div#menu ul{
	width:40%;
	margin-left:30%;

}

div#menu h1 {
	
	font-size: 1.7em;
	
}

footer div.bloco h3{

  font-size: 1.8em;
}

footer div#bloco h3{

  font-size: 1.8em;
}

div.bloco p{

  font-size: 1.4em;
}

div.bloco a{

  font-size: 1.2em;
}



div#bloco p{

  font-size: 1.3em;
}

}

@media all and (max-width: 600px) {

div#menu h1 {
	
	font-size: 1.5em;
	
}

div#menu ul{
	width:50%;
	margin-left:27%;


}

div#menu ul li a{

	font-size: 1.2em;

}

footer div.bloco h3{

  font-size: 1.6em;
}

footer div#bloco h3{

  font-size: 1.6em;
}

div.bloco p{

  font-size: 1.2em;
}

div.bloco a{

  font-size: 1.0em;
}



div#bloco p{

  font-size: 1.1em;
}

}

@media all and (max-width: 500px) {

div#menu h1 {
	
	font-size: 1.3em;
	
}

div#menu ul{
	width:50%;
	margin-left:25%;


}



}