/* ! normalize.css v1.0.0 | MIT License | git.io/normalize */
 
/* ==========================================================================
HTML5 display definitions
========================================================================== */
 
/* * Corrects `block` display not defined in IE 6/7/8/9 and Firefox 3. */
 
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { display: block; }
/* * Corrects `inline-block` display not defined in IE 6/7/8/9 and Firefox 3. */
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
/* * Prevents modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices. */
audio:not([controls]) { display: none; height: 0; }
/* * Addresses styling for `hidden` attribute not present in IE 7/8/9, Firefox 3, * and Safari 4.
* Known issue:no IE 6 support. */
[hidden] { display: none; }
/* ==========================================================================
Base
========================================================================== */
/* * 1. Corrects text resizing oddly in IE 6/7 when body `font-size` is set using
*    `em` units.
* 2. Prevents iOS text size adjust after orientation change, without disabling
*    user zoom. */
 
html { font-size: 100%; /* 1 */
	-webkit-text-size-adjust: 100%; /* 2 */
-ms-text-size-adjust: 100%; /* 2 */ }
html, html a { -webkit-font-smoothing: antialiased; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004); }
/* * Addresses `font-family` inconsistency between `textarea` and other form
* elements. */
html, button, input, select, textarea { font-family: 'Lato', sans-serif; }
/* * Addresses margins handled incorrectly in IE 6/7. */
body { margin: 0; font-family: 'Lato', sans-serif; }
/* ==========================================================================
Links
========================================================================== */
/* * Addresses `outline` inconsistency between Chrome and other browsers. */
 
a:focus { outline: thin dotted; }
/* * Improves readability when focused and also mouse hovered in all browsers. */
a:hover { outline: none; text-decoration-style: none;}
/* ==========================================================================
Typography
========================================================================== */
/* * Addresses font sizes and margins set differently in IE 6/7.
* Addresses font sizes within `section` and `article` in Firefox 4+, Safari 5, * and Chrome. */
 
h1 { font-size: 2em; margin: 0.67em 0; color: white;}
h2 { font-size: 1.5em; margin: 0.83em 0; }
h3 { font-size: 1.17em; margin: 1em 0; }
h4 { font-size: 1em; margin: 1.33em 0; }
h5 { font-size: 0.83em; margin: 1.67em 0; }
h6 { font-size: 0.75em; margin: 2.33em 0; }
/* * Addresses styling not present in IE 7/8/9, Safari 5, and Chrome. */
abbr[title] { border-bottom: 1px dotted; }
/* * Addresses style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome. */
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
/* * Addresses styling not present in Safari 5 and Chrome. */
dfn { font-style: italic; }
/* * Addresses styling not present in IE 6/7/8/9. */
mark { background: #ff0; color: #000; }
/* * Addresses margins set differently in IE 6/7. */
p, pre { margin: 1em 0;}
/* * Corrects font family set oddly in IE 6, Safari 4/5, and Chrome. */
code, kbd, pre, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
/* * Improves readability of pre-formatted text in all browsers. */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
/* * Addresses CSS quotes not supported in IE 6/7. */
q { quotes: none; }
/* * Addresses `quotes` property not supported in Safari 4. */
q:before, q:after { content: ''; content: none; }
small { font-size: 75%; }
/* * Prevents `sub` and `sup` affecting `line-height` in all browsers. */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
/* ==========================================================================
Lists
========================================================================== */
/* * Addresses margins set differently in IE 6/7. */
 
dl, menu, ol, ul { margin: 1em 0; }
dd { margin: 0 0 0 40px; }
/* * Addresses paddings set differently in IE 6/7. */
menu, ol, ul { padding: 0 0 0 40px; }
/* * Corrects list images handled incorrectly in IE 7. */
nav ul, nav ol { list-style: none; list-style-image: none; }
/* ==========================================================================
Embedded content
========================================================================== */
/* * 1. Removes border when inside `a` element in IE 6/7/8/9 and Firefox 3.
* 2. Improves image quality when scaled in IE 7. */
 
img { border: 0; /* 1 */
-ms-interpolation-mode: bicubic; /* 2 */ }
/* * Corrects overflow displayed oddly in IE 9. */
svg:not(:root) { overflow: hidden; }
/* ==========================================================================
Figures
========================================================================== */
/* * Addresses margin not present in IE 6/7/8/9, Safari 5, and Opera 11. */
 
figure { margin: 0; }


/* ==========================================================================
Global Styles
========================================================================== */
a { color: #8C9398; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }
a:hover, a:focus { color: #2A3F4B; outline: none; text-decoration: none;}
p { font-family:'Lato'; color: #8C9398; word-spacing: 1px; line-height: 25px; font-size: 16px;}
h2 { font-size: 15px; color: grey; text-transform: uppercase; font-weight: bold; }
h2::after { content: " "; border: solid 1px #2A3F4B; display: block; width: 35px; margin: 15px auto; }
.section-padding { padding: 10px 0px 10px 0px; }
.dark-bg {  background: #f3f5f8;  }
.light-bg { background-color: #fff; }
.dark-box { background: #f3f5f8; -webkit-box-shadow: 0px 3px 0px 0px #f0f2f4; -moz-box-shadow: 0px 3px 0px 0px #f0f2f4; box-shadow: 0px 3px 0px 0px #f0f2f4; }
.light-box { background-color: #fff; -webkit-box-shadow: 0px 3px 0px 0px #f0f2f4; -moz-box-shadow: 0px 3px 0px 0px #f0f2f4; box-shadow: 0px 3px 0px 0px #f0f2f4; padding: 10px 0; }
.light-box:hover, .light-box:focus { -webkit-box-shadow: 0px 1px 0px 0px #f0c300; -moz-box-shadow: 0px 1px 0px 0px #f0c300; box-shadow: 0px 1px 0px 0px #556C78; }
.box-hover { height: 190px; margin-bottom: 20px;transition: all 500ms ease-in-out; -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; }
.box-hover:hover, .box-hover:focus { transform: translate(0, -15px); -webkit-transform: translate(0, -15px); -ms-transform: translate(0, -15px); }
.wrapper { height: 650px;  }
.nopadding { padding: 0; }
.inner { padding-top: 230px; }
.id {padding-top: 30px; background: #f3f5f8;}


/* ==========================================================================
Intro
========================================================================== */
.intro{padding: 0px; margin: 0px;} /*voir si cette ligen sert vraiment à qqch*/
h1.arrow {font-size: 26px; text-transform: uppercase; color: grey; letter-spacing: 5px; background: url('../img/features/h1-bg.png') no-repeat center bottom; padding-bottom: 30px; padding-top: 30px;font-weight: bold; }

/* ==========================================================================
Menu Fixed Responsive (hamburger)
========================================================================== */


.menu 
{flex-basis: 100%;
 list-style: none;
 margin: 0;
 max-height: 0;
 opacity: 0;
 overflow: hidden;
 padding: 0 2em;
 text-transform: uppercase;  
 transition: margin .5s ease-in-out, max-height .5s ease-in-out, opacity .3s .1s ease-in-out;
 visibility: hidden; }

.menu li
{border-bottom: 1px solid #eee;}

.menu li a
{display: inline-block;
padding: 0.5em 1em;
font-family: Lato;
text-decoration: none;}

.menu-checkbox:checked ~ .menu 
{margin: 1em 0;
 max-height: 1000px;
 opacity: 1;
 visibility: visible;}

.menu-checkbox 
{opacity: 0;
 position: absolute;
 top: -1000px;}

.menu-checkbox:focus + .menu-toggle 
{outline: white auto 5px;}

.menu-toggle 
{padding: .5em 1em;
 font-size: 16px;
 font-family: Lato;
 color: rgb(40, 55, 67);}

.nav-wrapper 
{align-items: center;
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;}

@media screen and (min-width: 75em) 
{
    .menu 
    {flex-basis: auto;
     margin: 0;
     max-height: 1000px;
     opacity: 1;
     padding: 0;
     visibility: visible;}

    .main-navigation 
    {background-color: rgba(40, 55, 67, 0.9);
     position: fixed; /* Set the navbar to fixed position */
     z-index: 100;
     top: 0; /* Position the navbar at the top of the page */
     width: 100%;
     height: 50px;
     padding-top: 10px;}

    .menu-toggle, .menu-checkbox {display: none;}

    .menu li 
    {border: none;
     display: inline-block;
     margin-left: 70px;}

	.menu li a 
	{text-decoration: none;
     color: white;
     font-family: Lato;
     font-size: 0.9em;
     text-align: center;}

	.menu a:hover 
	{padding-right: 20px;
	 padding-left: 20px;
     border-left: 1px solid silver;
     border-right: 1px solid silver;
     letter-spacing: 2px;}

}

/* ==========================================================================
Features
========================================================================== */

.features-wrapper{ margin: 40px 0 0;}
.shadow {text-shadow: rgb(55, 181, 161) 1px 1px, rgb(255, 0, 0) 2px 2px, rgb(255, 0, 0) 3px 3px, rgb(255, 0, 0) 4px 4px, rgb(255, 0, 0) 5px 5px, rgb(255, 0, 0) 6px 6px, rgb(255, 0, 0) 7px 7px, rgb(255, 0, 0) 8px 8px, rgb(255, 0, 0) 9px 9px, rgb(255, 0, 0) 10px 10px, rgb(255, 0, 0) 11px 11px, rgb(255, 0, 0) 12px 12px, rgb(255, 0, 0) 13px 13px,  }
.icon1 { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); height: 160px; width: 160px; line-height: 160px; max-width: 100%; background: url('../img/table/PetitDejeuner.jpg')no-repeat center center;background-size:cover; border-radius: 50%; -o-border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; display: block; color: #fff; font-size: 55px; text-align: center; vertical-align: middle; position: relative; margin: 0 auto 50px; }
i {color: rgba(40, 55, 67, 0.8);}
.icon2 { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); height: 160px; width: 160px; line-height: 160px; max-width: 100%; background: url('../img/table/Tea4.jpg')no-repeat center center;background-size:cover;  ; border-radius: 50%; -o-border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; display: block; color: #fff; font-size: 55px; text-align: center; vertical-align: middle; position: relative; margin: 0 auto 50px; }
i {color: rgba(40, 55, 67, 0.8);}
.icon3 { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); height: 160px; width: 160px; line-height: 160px; max-width: 100%; background: url('../img/table/Tajine2.jpg')no-repeat center center;background-size:cover;  ; border-radius: 50%; -o-border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; display: block; color: #fff; font-size: 55px; text-align: center; vertical-align: middle; position: relative; margin: 0 auto 50px; }
i {color: rgba(40, 55, 67, 0.8);}

/* ==========================================================================
Parallax : écran d'accueil
========================================================================== */

#section1 {background: url('../img/riad/RiadNuit.jpg');background-size: cover;background-repeat: no-repeat;background-attachment: fixed;background-position: center; height: 100vh; /* 100% of viewport height */margin: 0 auto; position: relative;}
.container-accueil {text-align: center; padding-top: 200px;}
.logo {box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);margin-left: auto; margin-right: auto; background-color: rgba(40,55,67, 0.4); height: 250px; width: 450px;}
.logo img {padding-top: 20px; width: 50%;}
.down-arrow-btn1 {border: 1px solid silver; width: 50px; height: 50px; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; -o-border-radius: 50%; background-color: rgba(40, 55, 67, 0.7) ; display: block; margin: auto; margin-top: 70px;color: #fff; font-size: 16px; line-height: 50px; text-align: center; }
.down-arrow-btn1:hover, .down-arrow-btn1:focus { color: #fff; background-color: rgba(40, 55, 67, 1); border: 1px solid white;}


/* ==========================================================================
Swag
========================================================================== */
.swag {background: url('../img/riad/RiadNuit.jpg') no-repeat center center; height: 200px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-attachment: fixed;  }
.swag h1 {padding-top: 70px; color: white; font-size: 30px; letter-spacing: 5px; vertical-align: middle;}
.down-arrow-btn { width: 50px; height: 50px; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; -o-border-radius: 50%; background: rgba(061, 082, 090, 1); border: 1px solid white; display: inline-block; margin: 50px auto 0px; color: #fff; font-size: 16px; line-height: 50px; text-align: center; }
.down-arrow-btn:hover, .down-arrow-btn:focus { color: #fff; background: rgba(061, 082, 090, 0.8);}

/* ==========================================================================
GALLERY RIAD + ACTIVITES
========================================================================== */

.image-block {
    border: 2px solid white ; /* bordure des photos car pas d'espace entre elles. Adapter la couleur au background de la page si nécessaire */
    background: rgba(061, 082, 090, 0.8); /*couleur du fond, mais de quoi ? Aucun changement visible au changement de couleur */
    padding: 0px;    
    margin: 0px;
    height:300px; /* == taille des photos == */
    text-align: center;
    vertical-align: middle;
   
}
.image-block > p{
    width: 100%;
    height: 100%;
    font-weight: normal;
    font-size: 1.8em;
    padding-top: 150px;
    background-color: rgba(40,55,67,0.0); /* opacité du fond : transparent (0) */
    margin: 0px;
   	color: rgba(6,6,6,0.0); /* opacité du texte : transparent (0) */
	font-family: Zeyada; 
	}

.image-block a
{color: rgba(6,6,6,0.0) /* opacité du texte : transparent (0) */}

.image-block:hover > p {
    background-color: rgba(40,55,67,0.5); /* opacité 0.5 pour faire apparaître le fond au survol */
    color: white;  /* texte en blanc pour le survol */
}

.image-block:hover a
{outline:none;color: rgba(255,255,255,1) /* opacité du texte : transparent (0) */}
/* ==========================================================================
PORTFOLIO CHAMBRES 
========================================================================== */
.button
{color: black;
background-color: white;
font-family: Lato;
font-size: 10px;
border: 1px white solid;
text-transform: uppercase;}

.button:hover
{color: black;
text-decoration: underline; }

* {box-sizing: border-box;}

div.imgs{border: 1px solid #fff;}

div.imgs:hover {border: 1px solid #fff;}

div.imgs img {width:100%;height:auto;display: block; /*removes white space below image*/}

div.cont{padding: 0 6px;float:left;width: 24.99999%;}

@media screen and (max-width:1000px)
{div.cont{margin: 6px 0;width: 49.99999%;}}

@media screen and (max-width:600px)
{div.cont{width:100%;}}

.clearfix:after {content: "";display: table;clear: both;}



/* OVERLAY HOVER TXT + BACKGROUND SUR IMAGE */
/********* Superposition simple de texte sur une image *******/

/* Conteneur principal */
.overlay-image {
 position: relative;
 width: 100%;

}

/* Image originale */
.overlay-image .image {
 display: block;
 width: 100%;
 height: auto;

}

/* Texte original */
.overlay-image .text {
 color: white;
 font-size: 1em;
 font-family: zeyada;
 line-height: 1.5em;
 text-align: center;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 100%;
}

/********* Hover image et texte *******/

/* Overlay */
.overlay-image .hover {
 position: absolute;
 top: 0;
 height: 100%;
 width: 100%;
 opacity: 0;
 transition: .5s ease;
 background-color: rgba(0,0,0,0.3);
}

/* Apparition overlay sur passage souris */
.overlay-image:hover .hover {
 opacity: 1;
}

/* ==========================================================================
Room sheet
========================================================================== */

.room-name {font-size: 2.5em; font-family: Zeyada; color: #004D80; text-align: center; padding-top: 50px;}

.room-name-meaning {margin-top: -20px;font-size: 1.7em;font-family: Zeyada;text-align:center; font-style: italic; padding-bottom: 10px;}

.room-legend {font-family: Lato;font-size: 1.1em;line-height: 1.3em;}

.room-price {color: grey;font-size: 1.5em; text-align: right; font-family: Lato; padding-top: 10px; padding-bottom: 0; margin-bottom: 0;}
.room-price-verveine {color: grey;font-size: 1.5em; text-align: left; font-family: Lato; padding-top: 10px; padding-bottom: 0; margin-bottom: 0;}

.breakfast {font-size: 0.9em;margin-top:-5px; text-align: right; font-style: italic;}
.breakfast-verveine {font-size: 0.9em;margin-top:-5px; text-align: left; font-style: italic;}

.extra-bed {font-size: 0.9em;margin-top:-20px; text-align: right; font-style: italic;}

/* ==========================================================================
TEAM : ne pas supprimer car mise en forme des boutons réseaux soxiaux du footer;
========================================================================== */
.team img { margin-bottom: 40px; }
ul.social-buttons { list-style: none; margin: 0; padding: 0; }
ul.social-buttons li { display: inline-block; margin-right: 10px; }
ul.social-buttons li:last-child { margin-right: 0; }
.social-btn { width: 40px; height: 40px; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; -o-border-radius: 50%; background: #2A3F4B; display: inline-block; color: #fff; font-size: 17px; line-height: 40px; text-align: center; margin-bottom: 20px;}
.social-btn:hover, .social-btn:focus { background: rgba(42,63,75, 0.8); color: #fff; }
.social { margin-top: 25px }
/* ==========================================================================
Contact
========================================================================== */
i {color: white;}
h2 i {color: grey; margin: 0; padding: 0;}
.up-btn1 { width: 50px; height: 50px; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; -o-border-radius: 50%; background: rgba(40, 55, 67, 1); display: block; margin: 0 auto; color: #fff; font-size: 18px; line-height: 46px; text-align: center; position: absolute; top: -53px; left: 0; right: 0; margin-left: auto; margin-right: auto; }
.up-btn:hover, up-btn:focus { color: #fff; background: rgba(40, 55, 67, 0.8); }
.contact-details { margin: 20px 0; }
.contact-details h2 {margin-top: 0px;padding-top: 0px;font-size: 20px; }
.contact-details h2 span {display: block; color: grey; text-transform: uppercase; letter-spacing: 1px; font-size: 14px; margin-top: 5px; }
.contact-wrap { position: relative; }
.gps {font-style: italic; font-size: 0.9em; margin-bottom: -5px; padding-bottom: 0;}
.map {color: #286A9C; font-style: bold;  text-transform: uppercase; font-size: 11px;}
.map:hover {color: #286A9C;letter-spacing: 2px;}
/* ==========================================================================
Footer
========================================================================== */
footer a { color: #a1a9b0; }
footer { background-color: rgba(40, 55, 67, 1);height: 50px;  }
footer p { color: #fff; text-align: center; }
ul.legals { list-style: none; color: #fff; line-height: 25px; }
ul.legals li { display: inline-block; font-style: italic;}
ul.legals li::after { content: " |"; }
ul.legals li:last-child::after { content: ""; }
.legals { text-align: left; }
.credit { text-align: right; }
/* ==========================================================================
FlexSlider Custom CSS
========================================================================== */
#servicesSlider { margin-top: 70px; }
ul.slides li { margin-bottom: 20px; }
/* ==========================================================================
Waypoints
========================================================================== */
.wp1, .wp2, .wp3, .wp4, .wp5, .wp6 { visibility: hidden;}
.bounceInLeft, .bounceInRight, .fadeInUp, .fadeInUpDelay, .fadeInDown, .fadeInUpD, .fadeInLeft, .fadeInRight { visibility: visible; }
.delay-05s { animation-delay: 0.5s; -webkit-animation-delay: 0.5s; }
.delay-1s { animation-delay: 1s; -webkit-animation-delay: 1s; }
.wp3 { background: url('../img/iphone-bg.png') no-repeat center center; background-position: 200px 10px; height: 100%; }