@import url('https://fonts.googleapis.com/css?family=Work+Sans:400,700');

header {
			background: #edf5e1;
			padding: 25px;
			width: 100%;
			position: absolute;
			font-size: 20px;
			top: 0;
			left: 0;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: flex-end;
	
		}

header a { color: #edaa1d ; text-decoration: none;}
header a:hover {color: #b3700d;}


.headerright {
	color: #edaa1d;

}



.dgm_logo {
	height: 40px;
	padding: 0 1090px 0 0;
}



.dgm {
	margin: 0;
	padding: 110px 0 0 0;
	width: 100%;
	height: 75vh;


	background-image: url(../imagens/fundo.png);
	background-position: center;
	background-size: cover;

	color: #FFF;
	font-size: 90px;
	text-align: center;

	display: flex;
	justify-content: center;
	align-items: center;

	font-weight: 800;
}




.portfolios {
	margin: 0;
	padding: 4vh;
	background-color: #f5d38a;
	text-align: center;
	font-size: 35px;
	color: #b3700d;
}






body {
	margin: 0;
	padding: 0;
	background-color: #edf5e1;

	font-family: 'Work Sans', sans-serif;

}






.dgm_sobre {
	font-size: 50px;
	padding: 50px 70px 5px 0;

}


.sobre {
	margin: 0;
	padding: 80px ;
	background-color: #f5d38a;
	text-align: left;
	font-size: 18px;
	color: #b3700d;

}



.materiais , .programas , .portfolio1 , .portfolio2 , .portfolio3 {
	margin: 0;
	padding: 130px 70px 35px 70px;
	background-color: #f5d38a;
	text-align: left;
	font-size: 45px;
	color: #b3700d;

}

.eventos , .oficinas {
	margin: 0;
	padding: 140px 70px 20px 70px;
	background-color: #f5d38a;
	text-align: left;
	font-size: 45px;
	color: #b3700d;

}




.imgs , .imgs_sobre , .imgs_materiais , .imgs_programas , .imgs_eventos {
	
	
	margin: 0 auto;
	width: 70%;

	display: grid;
	grid-template-columns: repeat(6, 4fr);

	justify-content: center;
	
	}



.imgs_m , .imgs_p {
	width: 150px;
	height: 150px;
	padding: 45px 40px 30px 40px;
}





.imgs_i {
	width: 160px;
	height: 160px;
	padding: 60px 100px 60px 100px;
}


.imgs_s {
	width: 180px;
	height: 180px;
	padding: 60px 100px 60px 100px;

}


.imgs_i:hover {opacity: 0.5; transition: 0.3s;}

.imgs_s:hover {opacity: 0.5; transition: 0.3s;}



h3 { 
	margin: 40px 70px 20px 70px;
	width: 35%;
	padding: 17px 0;
	text-align: left;
	font-size: 30px;
	color: #b3700d;

}


.titulo_horario {
	font-size: 25px;
}


.horarios {
	margin: 30px 70px 40px 70px;
	width: 40%;
	padding: 17px 0 17px 30px;
	background-color: #f5d38a;
	text-align: left;
	font-size: 17px;
	color: #fff;

}



.texto_oficinas {
	margin: 0;
	padding: 0 70px;
	text-align: left;
	font-size: 18px;
	color: #b3700d;

}





.footer {
	margin: 30px 0 0 0;
	padding: 50px;
	background-color: #f5d38a;
	text-align: left;
	font-size: 18px;
	color: #b3700d;
}



.footerleft {
	margin: 0 auto;
	width: 80%;
	font-size: 20px;
	padding: 20px;
	display: grid;
	grid-template-columns: repeat(4, 4fr);

	justify-content: center;
}


.footerright {
	width: 190%;
	
	display: flex;
	align-items: center;
	justify-content: flex-end;

}


.logos {
	width: 45px;
	height: 50px;
	padding: 0 5px 0px 5px;
}




/* EVENTOS/PORTFOLIOS */

div.polaroid {
  width: 400px;

  text-align: center;
  padding: 50px 30px 10px 65px;
  margin: auto;

  display: inline-grid;

}

div.container {
  padding: 5px;
  background-color: #f5d38a;
}





/* PAGINAÇÃO */


.center {
  text-align: center;
}

.pagination {
  display: inline-block;
  padding: 70px 7px 30px;
}

.pagination a {
  color: #b3700d;
  font-size: 27px;
  float: left;
  padding: 4px 10px;
  text-decoration: none;
}


 .pagination a { color: #edaa1d ; text-decoration: none;}
 .pagination a:hover {color: #b3700d;}










/*--------------------------------------------------------------------------------------------------------------------------------*/




@media only screen and (max-width: 768px) {
  /* For mobile phones: */
 

header {
	font-size: 15px;
	padding: 20px 17px 15px 0;
	 }



.dgm_logo {
	height: 30px;
	padding: 0 119px 0 0;
}




.dgm {
	font-size: 43px; 
	margin: 0;
	padding: 80px 0 0 0;
	width: 100%;
	height: 75vh;
	text-align: center;
	background-position: center;
	background-position-y: 50px;


}






.portfolios {
	font-size: 30px;
}





.footer {
	margin: 0;
	padding: 25px 50px;
	background-color: #f5d38a;
	text-align: left;
	color: #b3700d;
}



.footerleft {
	margin: 0 35px;
	width: 20%;
	font-size: 20px;
	
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	grid-gap: 30px;

	
}


.footerright {
	width: 190%;
	display: flex;
	justify-content: flex-start;

}


.logos {
	width: 45px;
	height: 50px;
	padding: 0;
}




.dgm_sobre {
	font-size: 33px;
	padding: 70px 70px 5px 0;

}


.sobre {
	margin: 0;
	padding: 50px 30px 50px 30px ;
	background-color: #f5d38a;
	text-align: justify;
	font-size: 18px;
	color: #b3700d;

}






.materiais , .programas , .portfolio1 , .portfolio2 , .portfolio3 {
	margin: 0;
	padding: 110px 70px 35px 30px;
	background-color: #f5d38a;
	text-align: left;
	font-size: 30px;
	color: #b3700d;

}

.eventos , .oficinas {
	margin: 0;
	padding: 110px 70px 20px 30px;
	background-color: #f5d38a;
	text-align: left;
	font-size: 35px;
	color: #b3700d;

}


.imgs , .imgs_sobre , .imgs_materiais , .imgs_programas , .imgs_eventos {
	margin: 0 auto;
	width: 40%;

	display: grid;
	grid-template-columns: repeat(1, 1fr);

	justify-content: center;
	
	}



.imgs_i , .imgs_s {
	width: 150px;
	height: 150px;
	padding: 30px 100px 30px 100px;

}



.imgs_m , .imgs_p  {
	width: 150px;
	height: 150px;
	padding: 30px 100px 30px 100px;
	
}





/* EVENTOS/PORTFOLIOS */

div.polaroid {
  width: 438px;

  text-align: center;
  padding: 50px 0 5px 0;

  float: left;
}

div.container {
  padding: 5px;
  background-color: #f5d38a;
}




/* PAGINAÇÃO */

.center {
  text-align: center;
}

.pagination {
  display: inline-block;
  padding: 70px 7px 30px;
}

.pagination a {
  color: #b3700d;
  font-size: 27px;
  float: left;
  padding: 4px 10px;
  text-decoration: none;
}


 .pagination a { color: #edaa1d ; text-decoration: none;}
 .pagination a:hover {color: #b3700d;}







h3 { 
	margin: 50px 70px 20px 35px;
	width: 50%;
	padding: 17px 0;
	text-align: left;
	font-size: 30px;
	color: #b3700d;

}


.titulo_horario {
	font-size: 25px;
}


.horarios {
	margin: 10px 70px 20px 35px;
	width: 65%;
	padding: 17px 0 17px 30px;
	background-color: #f5d38a;
	text-align: left;
	font-size: 17px;
	color: #fff;

}


.texto_oficinas {
	margin: 0;
	padding: 0 35px 17px 35px;
	text-align: justify;
	font-size: 18px;
	color: #b3700d;

}




}