/* ============================================================================================================================================ MAIN FRAME ======================== */

* {box-sizing: border-box;}

body {
	background-image: url(images/background.jpg);
	background-attachment: fixed;
	background-size: cover;
	background-position: right;
	margin: 0;
	padding: 0;
	font-family: 'Open Sans', 'Times New Roman', Times, sans-serif;
	font-size: 100%; /* 16px */
	text-align: justify;
}

.fuzzy {
	position: fixed;
	z-index: -1;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: rgba(255, 255, 255, 0.5);
}

.container {
	width: 100%;
	max-width: 75em; /* 1200px */
	margin: auto;
}

.float-left {float: left;}
.float-right {float: right;}
.add-clear:after { /* put the floating elements in flux */
	content: "";
	clear: both;
	display: block;
}

/* ============================================================================================================================================ Header ============================ */

header {padding: 0.5em 0em;}

header h1 {
	margin: 0;
	padding: 0.25em 2em; /* 8px 0px 8px 0px ; % of the element font-size */
	text-align: center;
	font-size: 2em; /* 32px */
}

header h2 {
	margin: 0;
	padding: calc(1em/3) 2em; /* 8px 0px 8px 0px ; % of the element font-size */
	text-align: center;
	font-size: 1.5em; /* 24px */
}

/* ============================================================================================================================================ Menu ============================== */

nav {padding: 0.5em 0em;}

nav .navbar-overflow {
	overflow: auto;
	box-shadow: 0em 0.5em 1em 0em rgba(0,0,0,0.2);
}

nav ul {
	min-width: 56.18em;
	padding: 0;
	margin: 0;
	list-style-type: none;
	background-color: hsl(0, 0%, 98%); /* 98% blank */
}

nav ul li.active {background-color: hsl(0, 0%, 92%);}
nav ul li:hover:not(.active) {background-color: hsl(0, 0%, 95%);}

nav ul li a {
	display: block;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: left;
	margin: 0.75em 0em 0.75em 0.75em;
	padding: 0.25em 0.75em 0.25em 2.375em; /* 4px 0px 4px (Lineheight + 4 x PaddingUpBottom)px */
	color: black;
	text-decoration: none;
}
nav ul li.border-right a {border-right: 0.125em solid black;}

nav ul li a.icon-only {
	margin: 0.75em 1em;
	padding: 0.25em calc((30em*53)/35/32);
	background-position: center;
}

nav ul li a.home {background-image: url(images/navigation/home.png);}
nav ul li a.gallery {background-image: url(images/navigation/picture.png);}
nav ul li a.gastronomy {background-image: url(images/navigation/restaurant.png);}
nav ul li a.events {background-image: url(images/navigation/calendar.png);}
nav ul li a.sports {background-image: url(images/navigation/exercise.png);}
nav ul li a.contact-us {background-image: url(images/navigation/mail.png);}
nav ul li a.flag-en {background-image: url(images/navigation/flag_en.jpg);}
nav ul li a.flag-fr {background-image: url(images/navigation/flag_fr.jpg);}

/* ============================================================================================================================================ Content =========================== */

[class*="col-"] {padding: 0.5em;}

/* For mobile phones: */
[class*="col-"] {width: 100%;}
/* For tablets: */
@media only screen and (min-width: 768px) {
	.col-tab-1 {width: 6.25%;}
	.col-tab-2 {width: 12.5%;}
	.col-tab-3 {width: 18.75%;}
	.col-tab-4 {width: 25%;}
	.col-tab-5 {width: 31.25%;}
	.col-tab-6 {width: 37.5%;}
	.col-tab-7 {width: 43.75%;}
	.col-tab-8 {width: 50%;}
	.col-tab-9 {width: 56.25%;}
	.col-tab-10 {width: 62.5%;}
	.col-tab-11 {width: 68.75%;}
	.col-tab-12 {width: 75%;}
	.col-tab-13 {width: 81.25%;}
	.col-tab-14 {width: 87.5%;}
	.col-tab-15 {width: 93.75%;}
	.col-tab-16 {width: 100%;}
}
/* For desktop: */
@media only screen and (min-width: 900px) {
	.col-1 {width: 6.25%;}
	.col-2 {width: 12.5%;}
	.col-3 {width: 18.75%;}
	.col-4 {width: 25%;}
	.col-5 {width: 31.25%;}
	.col-6 {width: 37.5%;}
	.col-7 {width: 43.75%;}
	.col-8 {width: 50%;}
	.col-9 {width: 56.25%;}
	.col-10 {width: 62.5%;}
	.col-11 {width: 68.75%;}
	.col-12 {width: 75%;}
	.col-13 {width: 81.25%;}
	.col-14 {width: 87.5%;}
	.col-15 {width: 93.75%;}
	.col-16 {width: 100%;}
}

[class*="col-"] .section {
	padding: 1em;
	background-color: hsl(0, 0%, 98%);
	box-shadow: 0em 0.5em 1em 0em rgba(0,0,0,0.2);
}

[class*="col-"] > div h3 {
	font-size: 1.25em; /* 20px */
	margin: 0;
	padding: 0.2em 0em 0.2em 2.15em; /* 4px 0px 4px (Lineheight + 4 x PaddingUpBottom)px ; % of 20px */
	overflow: hidden;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: left;
}

/* ============================================================================================================================================ Footer ============================ */

footer {padding: 0.5em 0em;}

footer ul {
	padding: 0;
	margin: 0;
	list-style-type: none;
	background-color: hsl(0, 0%, 98%);
	box-shadow: 0em 0.5em 1em 0em rgba(0,0,0,0.2);
}

footer ul li {
	margin: 0.75em 0em;
	padding: 0em 0.75em;
	border-right: 0.125em solid black;
}
footer ul li:last-child {border-right: none;}

footer ul li a.bug_report {
	color: black;
	text-decoration: underline;
}

/* ============================================================================================================================================ HOME PAGE ========================= */

/* ============================================================================================================================================ Video ============================= */

.video {height: 25em;}

.video h3 {background-image: url(images/titles_icons/video.png);}

.video iframe {
	display: block;
	width: 100%;
	height: calc(100% - 2.6875em);
	margin: 0.5em auto 0em auto; /* 8px auto 0px auto ; % of the element font-size*/
	border: none;
}

/* ============================================================================================================================================ Property ========================== */

.property {height: 25em;}

.property h3 {background-image: url(images/titles_icons/eye.png);}

.property div.wrapper {
	height: calc(100% - 2.1875em);
	padding: 0.5em 0em 0em 0em;
	overflow: auto;
}

.property div.wrapper p {margin: 0em 0em 0.5em 0em;}
.property div.wrapper p:last-child {margin: 0;}

/* ============================================================================================================================================ Accomodation ====================== */

.accommodation h3 {background-image: url(images/titles_icons/search.png);}

.accommodation ul {
	padding: 0;
	margin: 0;
	list-style-type: none;
}

.accommodation ul li {
	min-width: calc(536em/3/16); /* 1/3 of the box */
	padding: 0.25em 0.5em 0.25em 2.375em; /* 4 px 8px 4px 38px */
	margin: 0.5em 0em 0em 0em; /* 8px 0px 0px 0px */
	background-size: contain;
	background-repeat: no-repeat;
	background-position: left;
}

.accommodation ul li.sleeps {background-image: url(images/accomodation/person.png);}
.accommodation ul li.bedrooms {background-image: url(images/accomodation/bed.png);}
.accommodation ul li.bathrooms {background-image: url(images/accomodation/bathroom.png);}
.accommodation ul li.parking {background-image: url(images/accomodation/parking.png);}
.accommodation ul li.garden {background-image: url(images/accomodation/leaves.png);}
.accommodation ul li.swimming {background-image: url(images/accomodation/swimming_pool.png);}
.accommodation ul li.barbecue {background-image: url(images/accomodation/barbecue.png);}
.accommodation ul li.internet {background-image: url(images/accomodation/wifi.png);}
.accommodation ul li.dish_washer {background-image: url(images/accomodation/dish_washer.png);}
.accommodation ul li.washing_machine {background-image: url(images/accomodation/washing_machine.png);}

/* ============================================================================================================================================ Gallery =========================== */

.photos {height: 39.5em;}

.photos h3 {background-image: url(images/titles_icons/camera.png);}

.photos div.window {
	position: relative;
	width: 100%; 
	height: calc(100% - 2.6875em);
	margin: 0.5em auto 0em auto; /* 8px auto 0px auto ; % of the element font-size*/
	overflow: hidden;
}

.photos div.window ul.slides {
	position: absolute;
	top: 0;
	left: 0;
	width: calc(21*100%); /* (nb of images + 1st) x 100 */
	height: 100%;
	margin: 0;
	padding: 0;
	list-style-type: none;
	
	/* Chrome, Safari, Opera */
	-webkit-animation: AutoSlide 90s infinite cubic-bezier(0.4, 0, 0.2, 1);
	/* Mozilla */
	-moz-animation: AutoSlide 90s infinite cubic-bezier(0.4, 0, 0.2, 1);
	/* Standar syntax */
	animation: AutoSlide 90s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

.photos div.window ul.slides:hover,
.photos div.window ul.slides:focus {
	-webkit-animation-play-state: paused;
	-moz-animation-play-state: paused;
	animation-play-state: paused;
}

.photos div.window ul.slides li {
	position: relative;
	display: inline-block;
	width: calc(100%/21);
	height: 100%;
	background-size: cover;
	background-repeat: no-repeat;
}

.photos div.window ul.slides li.image1 {
	background-position: 35% 50%;
	background-image: url(images/gallery/image1.10);
}
.photos div.window ul.slides li.image2 {
	background-position: 50% 50%;
	background-image: url(images/gallery/image2.10);
}
.photos div.window ul.slides li.image3 {
	background-position: 60% 50%;
	background-image: url(images/gallery/image3.10);
}
.photos div.window ul.slides li.image4 {
	background-position: 0% 50%;
	background-image: url(images/gallery/image4.10);
}
.photos div.window ul.slides li.image5 {
	background-position: 30% 70%;
	background-image: url(images/gallery/image5.10);
}
.photos div.window ul.slides li.image6 {
	background-position: 20% 55%;
	background-image: url(images/gallery/image6.10);
}
.photos div.window ul.slides li.image7 {
	background-position: 70% 60%;
	background-image: url(images/gallery/image7.10);
}
.photos div.window ul.slides li.image8 {
	background-position: 65% 65%;
	background-image: url(images/gallery/image8.10);
}
.photos div.window ul.slides li.image9 {
	background-position: 25% 80%;
	background-image: url(images/gallery/image9.10);
}
.photos div.window ul.slides li.image10 {
	background-position: 65% 55%;
	background-image: url(images/gallery/image10.10);
}
.photos div.window ul.slides li.image11 {
	background-position: 50% 20%;
	background-image: url(images/gallery/image11.10);
}
.photos div.window ul.slides li.image12 {
	background-position: 85% 55%;
	background-image: url(images/gallery/image12.10);
}
.photos div.window ul.slides li.image13 {
	background-position: 45% 50%;
	background-image: url(images/gallery/image13.10);
}
.photos div.window ul.slides li.image14 {
	background-position: 60% 70%;
	background-image: url(images/gallery/image14.10);
}
.photos div.window ul.slides li.image15 {
	background-position: 35% 25%;
	background-image: url(images/gallery/image15.10);
}
.photos div.window ul.slides li.image16 {
	background-position: 60% 100%;
	background-image: url(images/gallery/image16.10);
}
.photos div.window ul.slides li.image17 {
	background-position: 50% 40%;
	background-image: url(images/gallery/image17.10);
}
.photos div.window ul.slides li.image18 {
	background-position: 50% 40%;
	background-image: url(images/gallery/image18.10);
}
.photos div.window ul.slides li.image19 {
	background-position: 45% 50%;
	background-image: url(images/gallery/image19.10);
}
.photos div.window ul.slides li.image20 {
	background-position: 50% 50%;
	background-image: url(images/gallery/image20.10);
}

.photos div.window ul.slides li.image21 {
	background-position: 55% 40%;
	background-image: url(images/gallery/image21.10);
}

.photos div.window ul.slides li.image22 {
	background-position: 60% 50%;
	background-image: url(images/gallery/image22.10);
}

.photos div.window ul.slides li.image23 {
	background-position: 40% 50%;
	background-image: url(images/gallery/image23.10);
}

.photos div.window ul.slides li span.description {
	position: absolute;
	bottom: 0;
	width: 100%;
	background: rgba(255, 255, 255, 0.7);
	text-align: center;
	padding: 0.25em 0em; /* 4px 0px */
}
/* -------------------------------------------------------------------------------------------------------------------------------------------- Animation --------------------------*/
/* Chrome, Safari, Opera */
@-webkit-keyframes AutoSlide {
	0%, 4% {left: 0%;}
	5%, 9% {left: -100%;}
	10%, 14% {left: -200%;}
	15%, 19% {left: -300%;}
	20%, 24% {left: -400%;}
	25%, 29% {left: -500%;}
	30%, 34% {left: -600%;}
	35%, 39% {left: -700%;}
	40%, 44% {left: -800%;}
	45%, 49% {left: -900%;}
	50%, 54% {left: -1000%;}
	55%, 59% {left: -1100%;}
	60%, 64% {left: -1200%;}
	65%, 69% {left: -1300%;}
	70%, 74% {left: -1400%;}
	75%, 79% {left: -1500%;}
	80%, 84% {left: -1600%;}
	85%, 89% {left: -1700%;}
	90%, 94% {left: -1800%;}
	95%, 99% {left: -1900%;}
	100% {left: -2000%;}
}
/* Mozilla */
@-moz-keyframes AutoSlide {
	0%, 4% {left: 0%;}
	5%, 9% {left: -100%;}
	10%, 14% {left: -200%;}
	15%, 19% {left: -300%;}
	20%, 24% {left: -400%;}
	25%, 29% {left: -500%;}
	30%, 34% {left: -600%;}
	35%, 39% {left: -700%;}
	40%, 44% {left: -800%;}
	45%, 49% {left: -900%;}
	50%, 54% {left: -1000%;}
	55%, 59% {left: -1100%;}
	60%, 64% {left: -1200%;}
	65%, 69% {left: -1300%;}
	70%, 74% {left: -1400%;}
	75%, 79% {left: -1500%;}
	80%, 84% {left: -1600%;}
	85%, 89% {left: -1700%;}
	90%, 94% {left: -1800%;}
	95%, 99% {left: -1900%;}
	100% {left: -2000%;}
}
/* Standar syntax */
@keyframes AutoSlide {
	0%, 4% {left: 0%;}
	5%, 9% {left: -100%;}
	10%, 14% {left: -200%;}
	15%, 19% {left: -300%;}
	20%, 24% {left: -400%;}
	25%, 29% {left: -500%;}
	30%, 34% {left: -600%;}
	35%, 39% {left: -700%;}
	40%, 44% {left: -800%;}
	45%, 49% {left: -900%;}
	50%, 54% {left: -1000%;}
	55%, 59% {left: -1100%;}
	60%, 64% {left: -1200%;}
	65%, 69% {left: -1300%;}
	70%, 74% {left: -1400%;}
	75%, 79% {left: -1500%;}
	80%, 84% {left: -1600%;}
	85%, 89% {left: -1700%;}
	90%, 94% {left: -1800%;}
	95%, 99% {left: -1900%;}
	100% {left: -2000%;}
}

/* ============================================================================================================================================ Reviews =========================== */

.reviews {height: 24.8125em;}

.reviews h3 {background-image: url(images/titles_icons/review.png);}

.reviews ul {
	height: calc(100% - 2.1875em);
	overflow: auto;
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.reviews ul li {margin: 0.5em 0em 0em 0em;}

.reviews ul li h4 {
	margin: 0em 0em 0.25em 0.5em; /* 0px 0px 4px 8px */
	padding: 0.25em 0em 0.25em 2.875em; /* 4px 0px 4px 46px (22+2*4+16) */
	overflow: auto;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: left;
}

.reviews ul li h4.male {background-image: url(images/reviews/male.png);}
.reviews ul li h4.female {background-image: url(images/reviews/female.png);}

.reviews ul li p {margin: 0em 0em 0.25em 0em;}
.reviews ul li p.date {text-align: right;}

/* ============================================================================================================================================ Travel ============================ */

.travel h3 {background-image: url(images/titles_icons/plane.png);}

.travel ul {
	margin: 0;
	padding: 0em 0em 0em 1.5em;
}

.travel ul li {margin: 0.5em 0em 0em 0em;}

/* ============================================================================================================================================ Location ============================= */

.location {height: 33.6875em;}

.location h3 {background-image: url(images/titles_icons/location.png);}

.location iframe {
	display: block;
	width: 100%;
	height: calc(100% - 2.6875em);
	margin: 0.5em auto 0em auto; /* 8px auto 0px auto ; % of the element font-size*/
	border: none;
}

/* ============================================================================================================================================ Prices & Availability ============= */

.prices-availability h3 {background-image: url(images/titles_icons/euro.png);}

.prices-availability ul {
	margin: 0;
	padding: 0em 0em 0em 1.5em;
}

.prices-availability ul li {margin: 0.5em 0em 0em 0em;}

.prices-availability ul li a.mail {
	padding-left: 1.625em;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: left;
	background-image: url(images/terms_conditions/mail.png);
	font-weight: bold;
	color: black;
	text-decoration: none;
}

.prices-availability ul li span.phone {
	position: relative;
	padding-left: 1.625em;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: left;
	background-image: url(images/terms_conditions/phone.png);
	font-weight: bold;
}

.prices-availability ul li span.phone-number {
	display: none;
	position: absolute;
	bottom: -3.375em;
	left: 0;
	background-color: #e6e6e6;
	box-shadow: 0em 0.5em 1em 0em rgba(0,0,0,0.2);
	padding: 1em;
}
.prices-availability ul li span.phone:hover .phone-number,
.prices-availability ul li span.phone:focus .phone-number {display: block;}

.prices-availability ul li a.site {
	color: black;
	text-decoration: underline;
}

/* ============================================================================================================================================ Terms & Conditions ================ */

.terms-conditions h3 {background-image: url(images/titles_icons/balance.png);}

.terms-conditions ul {
	margin: 0;
	padding: 0em 0em 0em 1.5em;
}

.terms-conditions ul li {margin: 0.5em 0em 0em 0em;}

/* ============================================================================================================================================ GALLERY PAGE ====================== */

.gallery h3 {background-image: url(images/navigation/picture.png);}

.gallery ul {
	margin: 1em 0em 0em 0em;
	padding: 0;
	list-style-type: none;
}

.gallery .viewer li {
	display: none;
	margin: auto;
	padding: 0.5em 0em 0em 0em;
}
.gallery .viewer li:target {display : block;}

.gallery .viewer li a {
	display: block;
	padding: 17.125em 0em; /* smaller screen support (Samsung G5) */
	background-size: cover;
	background-repeat: no-repeat;
	box-shadow: 0em 0.5em 1em 0em rgba(0,0,0,0.2);
}

.gallery .viewer li .description {
	padding: 1em;
	background-color: #e6e6e6;
	box-shadow: 0em 0.5em 1em 0em rgba(0,0,0,0.2);
}

.gallery .thumbnail li a {
	display: block;
	padding: 2.3em 0em;
	background-size: cover;
	background-repeat: no-repeat;
	box-shadow: 0em 0.5em 1em 0em rgba(0,0,0,0.2);
	opacity: 0.75;
}
.gallery .thumbnail li a:hover {opacity: 1;}

.gallery .img1 a {
	background-position: 35% 50%;
	background-image: url(images/gallery/image1.10);
}
.gallery .img2 a {
	background-position: 50% 50%;
	background-image: url(images/gallery/image2.10);
}
.gallery .img3 a {
	background-position: 60% 50%;
	background-image: url(images/gallery/image3.10);
}
.gallery .img4 a {
	background-position: 0% 50%;
	background-image: url(images/gallery/image4.10);
}
.gallery .img5 a {
	background-position: 30% 70%;
	background-image: url(images/gallery/image5.10);
}
.gallery .img6 a {
	background-position: 20% 55%;
	background-image: url(images/gallery/image6.10);
}
.gallery .img7 a {
	background-position: 70% 60%;
	background-image: url(images/gallery/image7.10);
}
.gallery .img8 a {
	background-position: 65% 65%;
	background-image: url(images/gallery/image8.10);
}
.gallery .img9 a {
	background-position: 25% 80%;
	background-image: url(images/gallery/image9.10);
}
.gallery .img10 a {
	background-position: 65% 55%;
	background-image: url(images/gallery/image10.10);
}
.gallery .img11 a {
	background-position: 50% 20%;
	background-image: url(images/gallery/image11.10);
}
.gallery .img12 a {
	background-position: 85% 55%;
	background-image: url(images/gallery/image12.10);
}
.gallery .img13 a {
	background-position: 45% 50%;
	background-image: url(images/gallery/image13.10);
}
.gallery .img14 a {
	background-position: 60% 70%;
	background-image: url(images/gallery/image14.10);
}
.gallery .img15 a {
	background-position: 35% 25%;
	background-image: url(images/gallery/image15.10);
}
.gallery .img16 a {
	background-position: 60% 100%;
	background-image: url(images/gallery/image16.10);
}
.gallery .img17 a {
	background-position: 50% 40%;
	background-image: url(images/gallery/image17.10);
}
.gallery .img18 a {
	background-position: 50% 40%;
	background-image: url(images/gallery/image18.10);
}
.gallery .img19 a {
	background-position: 45% 50%;
	background-image: url(images/gallery/image19.10);
}
.gallery .img20 a {
	background-position: 50% 50%;
	background-image: url(images/gallery/image20.10);
}

.gallery .img21 a {
	background-position: 55% 40%;
	background-image: url(images/gallery/image21.10);
}

.gallery .img22 a {
	background-position: 60% 50%;
	background-image: url(images/gallery/image22.10);
}

.gallery .img23 a {
	background-position: 40% 50%;
	background-image: url(images/gallery/image23.10);
}