@import url('https://fonts.googleapis.com/css?family=Fjalla+One');

*, html {
	margin: 0;
	padding: 0;
}
.tal { text-align: left;}
.tar { text-align: right;}
.tac { text-align: center;}
.taj { text-align: justify;}

.fll { float: left;}
.flr { float: right;}
.clear { clear: both; }

.db { display: block; }
.dib { display: inline-block; }
.dn	{ display: none; }

.violet {
	color: #503084;
}.bg-violet {
	background: #503084;
}.vert {
	color: #aac857;
}.bg-vert {
	background: #aac857;
}.rose {
	color: #a9257b;
}.bg-rose {
	background: #a9257b;
}
.blanc {
	color: #fefefe;
}

a, a:hover, a:active {color: inherit;text-decoration: none;}

body {
	background: url('../img/background-location-velo-isle-sur-sorgue.jpg') no-repeat;
	background-attachment: fixed;
}

header {
	height: 65vh;
	position: relative;	
	background: url('../img/bg-location-velo-vtt-vtc-isle-sur-la-sorgue-le-thor-velleron.png') no-repeat bottom center;
	-webkit-background-size: 100% auto;
	background-size: 100% auto;
}
header .container {position: relative;height: 100%;}

header .container:after{
	background: url('../img/fleches-vtt-location-isle.png') no-repeat bottom center;
	width: 90px;
	height: 200px;
	position: absolute;
	bottom: 0;
	content:"";
	left: 0;
}

.sub_title,h1,h2,h3,h4
 {
	font-family: 'Fjalla One', cursive;
}

header .logo {
	width: 180px;
	height:auto;
	margin-top: 60px;

}

header h1 { 
	color: #fff;
	font-size: 3.5em;
	font-weight: 600;
	margin-top: 10px;	
	text-shadow: 0 0 15px #000;

}
header h2 { 
	color: #fff;
	font-size: 2em;
	font-weight: 600;
	margin-top: 10px;	
	letter-spacing: 2px;
	margin-top: 20px;
	text-shadow: 0 0 15px #000;

}

header nav {
	display: block;
	position: fixed;
	z-index: 9999;
	left: 0;
	top: 225px;
	width: 150px;
	text-align: left;
}

header nav ul li a {
	padding: 10px 10px 10px 20px;
	width: 100%;
	display: block;
	color: #fff;
	position: relative;
	margin: 2px 0; 
	font-style: italic;
}

header nav ul li a:hover, header nav ul li a:hover:after {
	color: #fff;
	background: #a9257b;
}
header nav ul li a:hover:after { 
	background: none;   
 	border-color: #a9257b rgba(250, 154, 166, 0);
 }


header nav ul li:nth-of-type(1) a { width: 210px;}
header nav ul li:nth-of-type(2) a { width: 170px;}
header nav ul li:nth-of-type(3) a { width: 130px;}
header nav ul li:nth-of-type(4) a { width: 90px;}


header nav ul li a:after { 
    content: "";
    width: 0;
    height: 0;
    border: 40px solid;
    border-bottom: none;
    border-left: none;
    border-color: #503084 rgba(250, 154, 166, 0);
    position: absolute;
    right: -40px;
    top: 0;
}

/*section.page {
	padding: 0 0;
}*/

section.page h3 {
	font-size: 3em;
	margin-bottom: 5px;
	padding-left: 15px;
}
section.page h4 {
	font-size: 1.5em;
	margin-top: 5px;
	padding-left: 15px;
	margin-bottom: 30px;
}

section.page .p_title {
	font-size: 22px;
}

section.page .thumbnail h4 { color: #503084; }

.thumbnail {
	overflow: hidden;
	padding: 20px 0 0;

}

.thumbnail img {
	height: 140px;
	max-width: initial;
	padding: 15px;
}

.btn.rose {
	color: #a9257b;
	border-color: #a9257b;
	margin-top: 10px;
}

.btn.rose:hover {
	color: #a9257b;
	}

footer {
	padding: 20px 20px;
	margin-top: 70px; 
}


/* RESPONSIVE */
@media screen and (max-width: 700px ) { 
	header {
		height: auto;
	}
}


@media screen and (max-width: 992px ) { 
	header {
		background-position: top center;
	}
}


@media screen and (max-width: 1200px) {
	
	header nav {
	    display: block;
	    position: fixed;
	    z-index: 9999;
	    left: 0;
	    right: 0;
	    top: 0;
	    width: 100%;
	    text-align: center;
	}
	header nav ul { background: #503084; }

	header nav ul li {
		width: 24%;
		display: inline-block;
	}

	header nav ul li a {
		padding: 10px 10px 10px 20px;
		width: 100% !important;
		display: block;
		color: #fff;
		position: relative;
		margin: 2px 0; 
		font-style: italic;
	}

	header .container:after{ 
		content: ""; 
		background: none;
	}

}