section{
	width:100%;
	padding-bottom:40px;
	border-bottom:1px solid black;
}

section:last-child{
	border-bottom:none;
}

section h2{
	text-transform:uppercase;
	text-align:center;
	font-size:30px;
}

section h2::after{
	content:"";
	display:block;
	height:1px;
	width:80px;
	background-color:black;
	margin:2px auto;
}

/*######################################################################################
  SLIDER
######################################################################################*/

.slider{
	width:100%;
	position:relative;
}

.slider:before{
	content:"";
	display:block;
	padding-top:66%; 	/* initial ratio of 4:3*/
}

.slider .arrow{
	width:4%;
	position:absolute;
	top:50%;
	transform:translateY(-50%);
}

.slider .left{left:0px;}
.slider .right{right:0px;}

.image, .nextImage{
	position:absolute;
	top:0; left:50%;
	width:90%;
	height:100%;
	transform:translateX(-50%);
	background-image:none;
	background-repeat:no-repeat;
	background-position:center;
	background-size:contain;
}

.image #title{
	opacity:0;
	margin:0;
	width:100%;
	height:60px;/*7%*/
	position:absolute;
	left:0; bottom:0;
	background-color:rgba(0,0,0,0.4);
	color:white;
	text-align:center;
	padding-top:1%;
	font-size:40px;
}

.image:hover #title{
	opacity:1;
}

/*######################################################################################
  Resposive
######################################################################################*/

@media (min-width: 651px) and (max-width: 800px){
	section h2{
		font-size:25px;
	}
}

@media (max-width: 650px){
	section h2{
		font-size:20px;
	}
}

@media (max-width: 1300px){
	#content{
		width:85%;
	}
}

@media (max-width: 900px){
	.image #title{
		height:45px;
		padding-top:0.5%;
		font-size:30px;
	}
}