@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

/*ESSA É A BASE DE TUDO, ALTERAR DEPOIS*/
.gallery{
	margin: 0 auto;
	position: relative;
	width: 100%;
	height: 100%;
	margin: 5px;
	background-color: #FFF;
	padding-bottom: 65%;
}

.slide_img{
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: -1;
}

.slide_img img{
	width: 100%;
	height: 100%;
}

.button-images{
	display: none;
}

.prev, .next{
	width: 12%;
	height: 100%;
	position: absolute;
	top: 0;
	z-index: 99;
	cursor:pointer;
}

.prev{
	left: 0;
	background: linear-gradient(to right, rgba(0, 0, 0, 0.3), transparent);
}

.next{
	right: 0;
	background: linear-gradient(to left, rgba(0, 0, 0, 0.3), transparent);
}

.prev:hover{
	background: linear-gradient(to right, rgba(0, 0, 0, 0.7), transparent);
}

.next:hover{
	background: linear-gradient(to left, rgba(0, 0, 0, 0.7), transparent);
}

/*SETAS DO NEXT E PREV*/
.material-icons{
	font-size: 5vw;
	color:rgba(249, 224, 4, 0.7);
	width:100%;
	height:20%;
	top:40%;
	left:0px;
	padding-top:15%;
	padding-left:10%;
	position: absolute;
}

.material-icons:hover{
	color:rgba(249, 224, 4, 0.9);
}

/*AQUI FAZ O TRABALHO DE TROCAR AS FOTOS*/
#P1:checked ~ #F-1,
#P2:checked ~ #F-2,
#P3:checked ~ #F-3,
#P4:checked ~ #F-4,
#P5:checked ~ #F-5,
#P6:checked ~ #F-6,
#P7:checked ~ #F-7,
#P8:checked ~ #F-8,
#P9:checked ~ #F-9,
#P10:checked ~ #F-10,
#P11:checked ~ #F-11,
#P12:checked ~ #F-12,
#P13:checked ~ #F-13,
#P14:checked ~ #F-14,
#P15:checked ~ #F-15,
#P16:checked ~ #F-16,
#P17:checked ~ #F-17,
#P18:checked ~ #F-18,
#P19:checked ~ #F-19,
#P20:checked ~ #F-20,
#P21:checked ~ #F-21,
#P22:checked ~ #F-22,
#P23:checked ~ #F-23,
#P24:checked ~ #F-24,
#P25:checked ~ #F-25,
#P26:checked ~ #F-26,
#P27:checked ~ #F-27,
#P28:checked ~ #F-28,
#P29:checked ~ #F-29,
#P30:checked ~ #F-30,
#P31:checked ~ #F-31,
#P32:checked ~ #F-32{
	z-index: 9;
}