* {
	box-sizing: border-box; 
}

::selection {
	background-color: #ff5a00;
	color: white; 
}
::-moz-selection {
	background-color: #ff5a00;
	color: white; 
}


@import url(https://fonts.googleapis.com/css?family=Lora:400,400italic,700,700italic); 







a {
	color: #9cbfcc;
	text-decoration: none; 
	border-bottom: solid 1px #9cbfcc;
} 
a:visited {
	color: gray;
	text-decoration: none; 
	border-bottom: solid 1px gray;
} 
a:hover {
	color: #9cbfcc;
	text-decoration: none; 
	border-bottom: solid 2px #9cbfcc;
} 
a:active {
	color: #9cbfcc;
	text-decoration: none; 
	border-bottom: dotted 2px #9cbfcc;
} 
a:focus {
	color: #9cbfcc;
	text-decoration: none; 
	border-bottom: solid 1px #9cbfcc;
} 



body {
	font-size: 1em; 
	font-family: 'Lora', serif; 
	height: 100%; 
	margin: 0; padding: 0; 
	background-color: #e0dacd;
}








/* ========================= HEADER =========================== */

header {
	position: absolute; 
	width: 100%; 
	margin: auto; 
	border-bottom: solid 1px #ff5a00;
}

header div {
	width: 75%; margin: auto; 
}


header p {
	display: inline-block;
	width: 200px; 
	color: #ff5a00;
	font-size: 1.2em; 
	text-align: center; 
	padding: 10px; 
}

header a {
	color: #ff5a00; 
	border: none;
	padding: 10px; 
}

header a:visited {
	color: #ff5a00; 
	border: none;
}

header a p:hover {
	color: white; 
	background-color: #ff5a00; 
	border: none; 
}

header a:active {
	color: #ff5a00; 
	border: none;
}

header a:focus {
	color: #ff5a00; 
	border: none;
}







































/* =============================================================================
GALLERIES
=============================================================================== */


#tallinn {
	background-image: url('bg-tallinn.jpg'); 
	background-size: cover;
	background-attachment: fixed; 
}

#peter {
	background-image: url('bg-peter.jpg'); 
	background-size: cover;
	background-attachment: fixed; 
}


#helsinki {
	background-image: url('bg-helsinki.jpg'); 
	background-size: cover;
	background-attachment: fixed; 
}

img {
	width: 90%; 
	height: auto;
	margin: 0 5% 25px 5%; 
}

.intro {
	height: 600px; 
}

.intro h2 {
	font-family:'Georgia', serif;
	font-size: 6em; 
	letter-spacing:; 
	margin-top:0; 
	padding-top: 200px; 
	text-align: center; 
	color: white; 
	text-shadow: 2px 2px 6px black;
}

.intro p {
	text-align: center; 
	font-style: italic; 
	font-size: 1.4em; 
	color: white; 
	text-shadow: 1px 1px 4px black;
}

p {
	max-width: 480px; 
	margin: auto; 
	font-family: 'Lora', serif; 
	font-size: 1.2em;
}

p.caption {
	margin-top: 2em; margin-bottom: 15px;  
	padding-top: 2em; 
	line-height: 1.5;  

}

p.separ {
	text-align: center; 
	margin: 50px auto; 
}

.fil {
	width: 75%; 
	margin:auto; 
	background-color: rgba(255,255,255,1); 
	box-shadow: 0 0 20px rgba(0,0,0,0.8); 
	border-right: solid 4px white; 
}


footer {
	width: 75%; 
	margin:4em auto; 
	text-align: center; 
}

footer .next, footer .index {
	background-color: #ff5a00; 
	border-radius: 5px; 
	color: white; 
	width: 100%;
	padding: 1em; 
	margin: 2em 0; 
	font-size: 1.4em; 
}

footer .next:hover, footer .index:hover {
	box-shadow: 4px 4px 12px rgba(0,0,0,0.3); 
}

footer .next a, footer .index a {
	color: white; 
	font-weight: bold; 
	border-bottom: 1px solid white;
}
footer .next a:hover, footer .index a:hover {
	color: white; 
	font-weight: bold; 
	border-bottom: 2px solid white;
}

footer .direct ul {
	list-style: none;
	font-size: 1.6em; 
	font-family: 'Lora', serif; 
	color: #ff5a00;
}











































/* ==========================================================================================
Accueil
=========================================================================================== */
.accueil {
	background-image: url('wov.png'); 
}

.accueil h3 {
	text-align: center; 
	font-size: 2em; 
	font-family: georgia, serif; 
	margin-bottom: 0.5em; margin-top: 2em; 
	color: #232222;
}


.presentation {
}

.presentation h1 {
	color: #ff5a00;
	font-family: georgia, serif; 
	font-size: 6em; 
	font-style: italic; 
	text-align: center; 
	padding-top: 1em; 
	margin-top: 0; 
}

.presentation p {
	font-size: 1.8em; 
	font-style: italic; 
	margin: 0 auto 2em auto;
	text-align: center; 
}

.container-map {
	width: 100%; height: auto; 

}

.container-map img {
	width: 100%; height: auto; 
	margin: 0; padding: 0;
	cursor: url('cursor.png'), auto; box-shadow: 1px 1px 0px black; 
}






.acces {
	margin: 2em 0 0.5em 5px; 
}

.acces a {
	border: none; 
}
.acces a:hover {
	border:none; 
}

.acces-tallinn, .acces-peter, .acces-helsinki { 
	display: inline-block; vertical-align: top; 
	width: calc(33% - 10px);
	height: 600px; 
	margin: 0 10px 0 0;
}

.acces-tallinn h2, .acces-peter h2, .acces-helsinki h2 {
	font-family: 'Arial Black', sans-serif; 
	font-size: 2em;
	text-align: center; 
	color: #ff5a00;
	margin-top: 0;
}

.acces-tallinn {
	background-image: url('bg-tallinn.jpg'); 
	background-size: cover; 
	background-position: center; 
	text-shadow:0 0 0 black;
	-webkit-transition-property: border, text-shadow; 
	-webkit-transition-duration: 260ms; 
	-moz-transition-property: border, text-shadow; 
	-moz-transition-duration: 260ms;
	-o-transition-property: border, text-shadow; 
	-o-transition-duration: 260ms;
	transition-property: border, text-shadow; 
	transition-duration: 260ms;
}
.acces-tallinn:hover {
	background-image: url('bg-tallinn.jpg'); 
	background-size: cover; 
	text-shadow: 2px 2px 2px rgba(0,0,0,0.4); 
	border-bottom: 12px solid #ff5a00; 
}


.acces-peter {
	background-image: url('bg-peter.jpg'); 
	background-size: cover; 
	background-position: center; 
	text-shadow:0 0 0 black;
	-webkit-transition-property: border, text-shadow; 
	-webkit-transition-duration: 260ms; 
	-moz-transition-property: border, text-shadow; 
	-moz-transition-duration: 260ms;
	-o-transition-property: border, text-shadow; 
	-o-transition-duration: 260ms;
	transition-property: border, text-shadow; 
	transition-duration: 260ms;
}
.acces-peter:hover {
	background-image: url('bg-peter.jpg'); 
	background-size: cover; 
	text-shadow: 2px 2px 2px rgba(0,0,0,0.4); 
	border-bottom: 12px solid #ff7f00; 
}


.acces-helsinki {
	background-image: url('bg-helsinki.jpg'); 
	background-size: cover; 
	background-position: center;
	text-shadow:0 0 0 black;
	-webkit-transition-property: border, text-shadow; 
	-webkit-transition-duration: 260ms; 
	-moz-transition-property: border, text-shadow; 
	-moz-transition-duration: 260ms;moz
	-o-transition-property: border, text-shadow; 
	-o-transition-duration: 260ms;
	transition-property: border, text-shadow; 
	transition-duration: 260ms;
}
.acces-helsinki:hover {
	background-image: url('bg-helsinki.jpg'); 
	background-size: cover; 
	text-shadow: 2px 2px 2px rgba(0,0,0,0.4); 
	border-bottom: 12px solid #ffa800; 
}








.details {
	width: 100%;
	background-color: #232424; 
	margin-top: 5em; 
}
.details .text {
	padding: 2em; 
}
.details p {
	width: 100%; max-width: 100%; 
	font-size: 0.9em; 
	color: white; 
	text-align: center; 
}





































/* ------------------------------------------------ */
.mail:before {
	content: '@gmail.com';
}