/*
 * Author: Luca Arzilli, ALSolutions
 *
 * Project Name: Il Fortullino
 *
 */

/* HOME PAGE */

/* welcome */
body {
	background-color:#000;
}

#welcome {
	width: 100%;
	padding-top:300px;
	background-image:url('../img/bg/bg-home.jpg');
	background-size:cover;
	background-position: center; 
	height:850px;
}

#restaurant {
	width: 100%;
	padding-top:360px;
	background-image:url('../img/bg/bg-home-restaurant.jpg');
	background-size:cover;
	background-position: center; 
	height:850px;
}

#beach {
	width: 100%;
	padding-top:360px;
	background-image:url('../img/bg/bg-home-beach.jpg');
	background-size:cover;
	background-position: center; 
	height:850px;
}

#park {
	width: 100%;
	padding-top:360px;
	background-image:url('../img/bg/bg-home-park.jpg');
	background-size:cover;
	background-position: center; 
	height:850px;
}

#contacts {
	width: 100%;
	padding-top:360px;
	background-image:url('../img/bg/bg-home-contacts.jpg');
	background-size:cover;
	background-position: center; 
	height:850px;
}

#welcome h1 {
	font-size:45px;
	text-align:center;
	text-transform:uppercase;
	padding-bottom:0px;
	margin-top:280px;
	line-height:30px;
}
#welcome h1 span {
	font-weight: 200;
}
#restaurant h1, #beach h1, #park h1, #contacts h1 {
	font-size:72px;
	text-align:center;
	text-transform:uppercase;
	padding-bottom:0px;
	margin-bottom:0px;
	line-height:50px;
	margin-left:-20px;
}
#restaurant h1 span, #beach h1 span, #park h1 span, #contacts h1 span {
	font-weight: 200;
	position: absolute;
	margin-left: 5px;
	margin-top: -5px;
}

#welcome a, #restaurant a, #beach a, #park a, #contacts a {
	text-decoration: none;
	color: #FFF;
}

#welcome a:hover, #restaurant a:hover, #beach a:hover, #park a:hover, #contacts a:hover, #welcome a:focus, #restaurant a:focus, #beach a:focus, #park a:focus, #contacts a:focus, #welcome a:visited, #restaurant a:visited, #beach a:visited, #park a:visited, #contacts a:visited {
	text-decoration: none;
	color: #FFF;
}


#footer {
	background:#FFF;
	text-transform: uppercase;
	font-size: 12px;
	padding-top:10px;
	padding-left: 30px;
}
#footer p {
	text-align:center;
	color:#000;
}
#footer a {
	font-size: 12px;
	text-transform: uppercase;
	text-decoration:none;
	color:#000;
}
#footer a:hover, #footer a:focus {
	color:#bcbec0;
}
.weather {
	font-size:72px;
	font-weight: 500;
	margin:0 auto;
	padding: 3px;
	text-align:center;
	line-height:65px;
}
.weather img {
	width:60px;
	height:60px;
}

@media (max-width: 1920px) {
	#welcome {
		height: 920px;
	}
	#restaurant, #beach, #park, #contacts {
		padding-top: 440px;
		height: 1000px;
	}
}

@media (max-width: 1680px) {
	#welcome {
		height: 850px;
	}
	#restaurant, #beach, #park, #contacts {
		padding-top: 360px;
		height: 850px;
	}
}

@media (max-width: 1024px) {
	#welcome {
		height: 768px;
		padding-top:320px;
	}
	#restaurant, #beach, #park, #contacts {
		padding-top:320px;
		height: 768px;
	}
	#restaurant h1, #beach h1, #park h1, #contacts h1 {
		font-size:60px;
		line-height: 50px;
	}
	#restaurant h1 span, #beach h1 span, #park h1 span, #contacts h1 span {
		margin-top:-4px;
	}
	.weather {
		font-size:60px;
		line-height: 40px;
	}
}

@media (max-width: 768px) {
	#welcome {
		height: 1024px;
		padding-top:480px;
	}
	#restaurant, #beach, #park, #contacts {
		padding-top:480px;
		height: 1024px;
	}
	#restaurant h1, #beach h1, #park h1, #contacts h1 {
		font-size:55px;
		line-height: 50px;
	}
	#restaurant h1 span, #beach h1 span, #park h1 span, #contacts h1 span {
		margin-top:-3px;
	}
	.weather {
		font-size:55px;
		line-height: 45px;
	}
}
@media (max-width: 414px) {
	#welcome {
		height: 736px;
		padding-top:320px;
	}
	#restaurant, #beach, #park, #contacts {
		padding-top:320px;
		height: 736px;
	}
	#restaurant h1, #beach h1, #park h1, #contacts h1 {
		font-size:35px;
		line-height: 30px;
	}
	#restaurant h1 span, #beach h1 span, #park h1 span, #contacts h1 span {
		margin-top:-3px;
	}
	.weather {
		font-size:35px;
		line-height: 25px;
	}
}
@media (max-height: 667px) {
	#welcome {
		height: 667px;
		padding-top:290px;
	}
	#restaurant, #beach, #park, #contacts {
		padding-top:290px;
		height: 667px;
	}
	#restaurant h1, #beach h1, #park h1, #contacts h1 {
		font-size:35px;
		line-height: 30px;
	}
	#welcome h1 {
		margin-top: 220px;
	}
	#restaurant h1 span, #beach h1 span, #park h1 span, #contacts h1 span {
		margin-top:-3px;
	}
	.weather {
		font-size:35px;
		line-height: 25px;
	}
}
@media (max-height: 568px) {
	#welcome {
		height: 568px;
		padding-top:260px;
	}
	#restaurant, #beach, #park, #contacts {
		padding-top:260px;
		height: 568px;
	}
	#restaurant h1, #beach h1, #park h1, #contacts h1 {
		font-size:25px;
		line-height: 20px;
	}
	#welcome h1 {
		margin-top: 180px;
	}
	#restaurant h1 span, #beach h1 span, #park h1 span, #contacts h1 span {
		margin-top:-3px;
	}
	.weather {
		font-size:25px;
		line-height: 15px;
	}
}
@media (max-height: 414px) {
	#welcome {
		height: 414px;
		padding-top:180px;
	}
	#restaurant, #beach, #park, #contacts {
		padding-top:180px;
		height: 414px;
	}
	#restaurant h1, #beach h1, #park h1, #contacts h1 {
		font-size:25px;
		line-height: 20px;
	}
	#welcome h1 {
		margin-top: 100px;
	}
	#restaurant h1 span, #beach h1 span, #park h1 span, #contacts h1 span {
		margin-top:-3px;
	}
	.weather {
		font-size:25px;
		line-height: 15px;
	}
}
@media (max-height: 375px) {
	#welcome {
		height: 375px;
		padding-top:160px;
	}
	#restaurant, #beach, #park, #contacts {
		padding-top:160px;
		height: 375px;
	}
	#restaurant h1, #beach h1, #park h1, #contacts h1 {
		font-size:25px;
		line-height: 20px;
	}
	#welcome h1 {
		margin-top: 80px;
	}
	#restaurant h1 span, #beach h1 span, #park h1 span, #contacts h1 span {
		margin-top:-3px;
	}
	.weather {
		font-size:25px;
		line-height: 15px;
	}
}
@media (max-height: 320px) {
	#welcome {
		height: 320px;
		padding-top:140px;
	}
	#restaurant, #beach, #park, #contacts {
		padding-top:140px;
		height: 320px;
	}
	#restaurant h1, #beach h1, #park h1, #contacts h1 {
		font-size:25px;
		line-height: 20px;
	}
	#welcome h1 {
		margin-top: 50px;
	}
	#restaurant h1 span, #beach h1 span, #park h1 span, #contacts h1 span {
		margin-top:-3px;
	}
	.weather {
		font-size:25px;
		line-height: 15px;
	}
}