*{
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}
		html { min-height: 100%; overflow: hidden; } 
		body {
		    margin: 0;
		    padding: 0;
		    min-height: 100%;
		    overflow-x: hidden;
		    overflow-y: scroll;
		    perspective: 1px;
		} 
		
		.body p{
			margin: 1.6em 0;
		}
		
		#linktopo{
			color: #ffffff;
			position: fixed;
			bottom: 0;
			right: 0;
			z-index: 4000;
		}
		
		#linktopo a{text-decoration: none;}
		
	
		.slide {
		    z-index: 0;
		    position: relative;		    
		    min-height: 100%;
		    width: 100%;
		    box-sizing: border-box;
		    box-shadow: 0 -1px 10px rgba(0, 0, 0, .7);
		    transform-style: inherit;
		}
		.fundo{
			opacity: 0.1;
			filter: alpha(opacity=10); /* For IE8 and earlier */
			width: 100%;
			height:100%;
			left: 0;
			top: 0;
			margin: 0;
			position: absolute;
			z-index: -2000;
		}
		
		#abertura{
			padding: 25% 10%;
			background-image: url("../img/type.jpg");
			background-color: #cccccc;
			background-size: cover;
			color: #000000;
			z-index: 0;
		}
		h1 {
		    text-align: center;
		    font-size: 500%;
		    color: #fff;
		    text-shadow: 0 2px 2px #000;
		}
		h2 {
		    text-align: center;
		    font-size: 200%;
		    color: #fff;
		    text-shadow: 0 2px 2px #000;
		}
		#materias{
			min-height: 100%;
			margin: 0;
			background: rgba(20,90,120,1);
			z-index: 0;
			padding-top: 40px;
			width: 100%;
			text-align: center;
			display: table;
		}

		#materias a{
			text-decoration: none;
		}
		
		.materiaexposta{
			width: 20%;
			height: 400px;
			display: inline-block;
			background-color:#343434;
			text-align: center;
			float: left;
		}
		.titulo_secao{
			padding-bottom:40px; 
			color:#ffffff;
			text-align: center;
			font-size: 400%;
			font-family: 'Source Sans Pro', sans-serif;
		}
	
		#materia1{
			background-image: url("../img/materias/materia1b.jpg");
			background-size: cover;
		}
		
		#materia2{
			background-image: url("../img/materias/materia2b.jpg");
			background-size: cover;
		}
		#materia3{
			background-image: url("../img/materias/materia3b.jpg");
			background-size: cover;
		}
		#materia4{
			background-image: url("../img/materias/materia4b.jpg");
			background-size: cover;
		}
		#materia5{
			background-image: url("../img/materias/materia5b.jpg");
			background-size: cover;
		}
		#materia6{
			background-image: url("../img/materias/materia6b.jpg");
			background-size: cover;
		}
		#materia7{
			background-image: url("../img/materias/materia7b.jpg");
			background-size: cover;
		}
		#materia8{
			background-image: url("../img/materias/materia8b.jpg");
			background-size: cover;
		}
		#materia9{
			background-image: url("../img/materias/materia9b.jpg");
			background-size: cover;
		}
			#materia10{
			background-image: url("../img/materias/materia10a.jpg");
			background-size: cover;
		}
		.materiaConteudo{
			background: rgba(0,0,0,0.0);
			width: 100%;
			height: 100%;
			color: #ffffff;
			font-size: 200%;
		}
		.materiaConteudo h3{
			visibility: hidden;
			padding-top: 100px;
		}
		div.materiaConteudo:hover > h3, div.materiaConteudo:focus > h3 {
		        color:#ffffff;
		        font-size: 40px;
		        visibility: visible;
		}
		
		#sobre{
			padding-top: 40px;
			background-color:#008866;
			background-position: fixed;
			background-size: cover;
		}
		#textosobre{
			color:#ffffff;
			font-family: sans-serif;
			padding-right: 20%;
			padding-left:20%;
			text-align: justify;
			font-size: 100%;
		}
		
		#autora{
			margin-left: 20%;
			margin-right: 20%;
			background: rgba(255,255,255,0.8);
		    box-shadow: 0 -1px 10px rgba(0, 0, 0, .7);
			width: 60%;
			min-height: 150px;
			height: 150px;
			font-family: sans-serif;
		}
		
		.nome_autora{display:inline-block; height: 100%; min-width: 70%; text-align: center; padding: 20px}
		
		#sugira{
			padding-top: 40px;
			background-color:#100505;
		}
		
		#formulario{
			padding-top: 40px;
			padding-left: 50%;
			padding-right: 50%;
			margin-left: -250px;
		}
		
		textarea {
			width: 500px;
			height: 150px;
			font-family: sans-serif;
			font-size: 15px;
			border:0;
		}
		
		input{
			width: 500px;
			height: 50px;
			font-size: 15px;
			font-family: sans-serif;
			border: 0;
		}
		
		#submit{
			width: 80px;
			height: 30px;
			border: 0;
			background-color: #efefef;
		}
		
	
		/* ----------- INÍCIO DO DESIGN RESPONSIVO -----------  */
		
		@media (min-aspect-ratio: 16/9) {

		}

		@media (max-aspect-ratio: 16/9) {
	
		}

		@media (max-width: 767px) {
	
			h1 {
		    text-align: center;
		    font-size: 300%;
			}
			
			h2{
				font-size: 150%;
			}
			
			#materias{
				height: auto !important;
				min-height: 1350px !important;
				margin: 0;
				background: rgba(20,90,120,1);
				z-index: 0;
				padding-top: 40px;
				width: 100%;
				text-align: center;
				overflow-y: auto;
			}
		
			.materiaexposta{
				width: 100%;
				height: 150px;
				display: block;
				background-color:#343434;
				text-align: center;
				margin:0;
			}

			.materiaConteudo h3{
				visibility: visible;
				font-size: 30px;
				padding-top: 50px;
				height: 100%;
			}
			#textosobre{
				padding-right: 5%;
				padding-left:5%;
				text-align: justify;
				font-size: 100%;
			}
	
			#autora{
				margin-left: 0;
				margin-right: 0;
				background: rgba(255,255,255,0.8);
				box-shadow: 0 -1px 10px rgba(0, 0, 0, .7);
				width: 100%;
				min-height: 150px;
				height: 150px;
				font-family: sans-serif;
			}
			
			.nome_autora{display:inline-block; height: 100%; width: 50%; text-align: center; padding-top: 15px; padding-right: 5px; font-size: 15px;}
		
			#formulario{
				padding-top: 40px;
				padding-left: 0;
				padding-right: 0;
				margin-left: 0;
				text-align: center;
			}
			
			textarea {
				width: 90%;
				height: 150px;
				font-family: sans-serif;
				font-size: 15px;
				border:0;
			}
			
			input{
				width: 90%;
				height: 50px;
				font-size: 15px;
				font-family: sans-serif;
				border: 0;
			}
		
			#submit{
				width: 80px;
				height: 30px;
				border: 0;
				background-color: #efefef;
			}
	
	
		}
		
		
		@media (max-width: 400px) {
			#autora{display: table; padding: 0;}
			.nome_autora{position: absolute; display:inline-block; right: 5px; height: 100px; width:auto; text-align: right; margin-top: 10px; font-size: 10px; float: left;}
			#nav h2 {
				text-align: left;
			}
		}
		
		
		@media (min-width: 1800px){
			#sobre{font-size: 150%;}
			
			.materiaexposta{
				width: 20%;
				height: 600px;
				display: inline-block;
				background-color:#343434;
				text-align: center;
				float: left;
			}
		}