@charset "utf-8";

/* CSS Document */

/* Desktop size 1000px and more */


a:active, a:focus { outline: none; }

a:active { background: none; } /* removes grey background in IE>=10 */

/* Accueil */

#boutons-index { position: relative; padding-top: 40px; margin: 0 auto; width: 560px; height: 50px; }

#boutons-index ul { list-style-type: none; margin: 0; }

#boutons-index ul li { float: left; list-style-type: none; }

#boutons-index ul a { font-family: 'Michroma', sans-serif; font-size: 1.8em; text-shadow: 1px 1px 1px #000; position: relative; display: block; color: #CC6600; background: #DDD; padding: 8px 25px; margin-bottom: 70px; width: auto; }

#boutons-index ul a:hover { color: #C30; background: #FFF; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }

/* Accueil fin */

/* Sticky navigation */

#sticky_top_wrapper { margin: 0; }
#sticky_top { height: 74px; padding: 0; margin: 0; }
 
/* our menu styles */
#sticky_navigation_wrapper { width:100%; height: auto; }
#sticky_navigation { width:100%; height: auto; }


/* Sticky navigation end */

/* Langue */

#langue { /* Tablet-Desktop */ position: absolute; float: right; right: 7%; padding-top: 1.6em; font-family: Arial, Helvetica, sans-serif; font-size: 1.6em; z-index: 210; }

#langue ul li { list-style-type: none; font-size: 0.8em; float: left; color: #FFF; text-shadow: 0 0 1px #000; }

#langue li.barre { color: #000; font-weight: bold; bottom: 2px; padding: 0 3px; position: relative; text-shadow: none; }

#langue li a { color: #666; display: block; text-shadow: none; }

#langue li a:hover { color: #FF9; display: block; }

#langue2 { /* Mobile */ position: absolute; float: right; right: 7%; top: 76px; font-family: Arial, Helvetica, sans-serif; font-size: 1.8em; z-index: 210; }

#langue2 ul li { list-style-type: none; float: left; color: #FFF; text-shadow: 0 0 1px #000; }

#langue2 li.barre { color: #000; font-weight: bold; bottom: 2px; padding: 0 6px; position: relative; text-shadow: none; }

#langue2 li a { color: #666; display: block; text-shadow: none; }

#langue2 li a:hover { color: #FF9; display: block; }

#langue3 {  /* Galerie photos */ position: absolute; float: right; right: 7%; top: 20px; font-family: Arial, Helvetica, sans-serif; font-size: 1.8em; z-index: 210; }

#langue3 ul li { list-style-type: none; float: left; color: #FFF; text-shadow: 0 0 1px #000; }

#langue3 li.barre { color: #000; font-weight: bold; bottom: 2px; padding: 0 6px; position: relative; text-shadow: none; }

#langue3 li a { color: #666; display: block; text-shadow: none; }

#langue3 li a:hover { color: #FF9; display: block; }

/* Langue fin */

/* Forfaits */

.forfaits { width: 660px; font-family: 'Open+Sans', sans-serif; font-weight: 700; position: relative; display: block; left: 3%; }

.forfaits ul { height: 2em; }

.forfaits ul li { float: left; padding: 0 8px; position: relative; }

.forfaits ul li a { display: block; }

.forfaits li a { color: #FFF; display: block; line-height: 2.6em; width: 180px; text-align: center; background: #666; background: -webkit-linear-gradient(to bottom, #666, #333); background: -o-linear-gradient(to bottom, #666, #333); background: -moz-linear-gradient(to bottom, #666, #333); background: linear-gradient(to bottom, #666, #333); box-shadow: 0 0 20px #333 inset; }

.forfaits li a:hover { background: #333; background: -webkit-linear-gradient(to bottom, #555, #000); background: -o-linear-gradient(to bottom, #555, #000); background: -moz-linear-gradient(to bottom, #555, #000); background: linear-gradient(to bottom, #555, #000); }

.boutonForfait:after, .boutonForfait:before { content: " "; position: absolute; width: 80%; height: 50%; z-index: -10; background: #acacac; display: block; }
.singleA:after, .singleB:before { display: none; }

.curve:before {	top: 30%; left: 10px; -ms-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -webkit-transform: rotate(-5deg); -mo-transform: rotate(-5deg); transform: rotate(-5deg); box-shadow: 7px 11px 15px #333; }
.curve:after { top: 30%; right: 10px; -ms-transform: rotate(5deg); -moz-transform: rotate(5deg); -webkit-transform: rotate(5deg); -o-transform: rotate(5deg); transform: rotate(5deg); box-shadow: -7px 11px 15px #333; }
.horizontal:before { top: 0; left: 5%; width: 90%; height: 50%;	border-radius: 125px / 12px; box-shadow: 0 -2px 10px #555;}
.horizontal:after { bottom: 0; left: 5%; width: 90%; height: 50%; border-radius: 105px / 12px; box-shadow: 0 6px 10px #565656; }


/* Forfaits fin */

/* Extraits video */

#tabmenu { color: #000; font-family: 'Open+Sans', sans-serif; font-weight: 700; font-size: 1.2em; margin: 40px 0 0 2.5%; padding: 0px; top: 1px; position: relative; z-index: 1; }

#tabmenu li { display: inline; overflow: hidden; list-style-type: none; }

#tabmenu a, a.active { text-shadow: 1.5px 1.5px 1px #000; color: #FFF; padding: 8px 15px; float: left; background: #777; background: -webkit-linear-gradient(to bottom, #AFAFAF, #666); background: -o-linear-gradient(to bottom, #AFAFAF, #666); background: -moz-linear-gradient(to bottom, #AFAFAF, #666); background: linear-gradient(to bottom, #AFAFAF, #666); -webkit-border-radius: 18px 18px 0 0; border-radius: 18px 18px 0 0; display: block; }

#tabmenu a.active { color: #FF9; background: #484848; background: -webkit-linear-gradient(to bottom, #777, #484848); background: -o-linear-gradient(to bottom, #777, #484848); background: -moz-linear-gradient(to bottom, #777, #484848); background: linear-gradient(to bottom, #777, #484848); }

#tabmenu a:hover { color: #FFC; background: #999; background: -webkit-linear-gradient(to bottom, #BBB, #888); background: -o-linear-gradient(to bottom, #BBB, #888); background: -moz-linear-gradient(to bottom, #BBB, #888); background: linear-gradient(to bottom, #BBB, #888); }

#tabmenu a.active:hover { color: #FF9; background: #555; background: -webkit-linear-gradient(to bottom, #777, #484848); background: -o-linear-gradient(to bottom, #777, #484848); background: -moz-linear-gradient(to bottom, #777, #484848); background: linear-gradient(to bottom, #777, #484848); }

.barre-extraits { clear: both; width: 100%; height: 15px; position: relative; background: #484848; z-index: 2; }

.spacer1 { height: 30px; width: 10px; float: left; position: relative; display: block; }

.spacer2 { height: 30px; width: 20px; float: left; position: relative; display: block; }

/* Extraits videos fin */

/* Main nav */

.active1 { background: #828282; background: -webkit-linear-gradient(to bottom, #666, #828282); background: -o-linear-gradient(to bottom, #666, #828282); background: -moz-linear-gradient(to bottom, #666, #828282); background: linear-gradient(to bottom, #666, #828282); }

.active2 { background: #828282; }
/*
.active3 { background: #06C; }
*/
#nav { width: 56em; font-family: 'Julius Sans One', "Lucida Sans Unicode", "Lucida Grande", sans-serif; font-weight: 700; position: relative; left: 2%; }

#nav > a { display: none; }

#nav li { position: relative; list-style-type: none; }

#nav li a { color: #fff; display: block; }

#nav li a:active { background-color: #CCC; }

/* first level */

#nav > ul { height: 2.22em; }

#nav ul li a { display: block; }

#nav > ul > li { width: 14.2%; height: 100%; float: left; }

#nav ul ul { -webkit-border-radius: 0 0 20px 4px; border-radius: 0 0 20px 4px; overflow: hidden; }

#nav > ul > li > a { height: 100%; font-size: 1.0em; line-height: 2.3em; text-align: center; }
/*
#nav > ul > li:not( :last-child ) > a {  [disabled]border-right: 1px solid #fff;
 }
 */
#nav > ul > li:hover > a, #nav > ul:not( :hover ) > li.active > a { background: #828282; background: -webkit-linear-gradient(to bottom, #666, #828282); background: -o-linear-gradient(to bottom, #666, #828282); background: -moz-linear-gradient(to bottom, #666, #828282); background: linear-gradient(to bottom, #666, #828282); }

/* second level */

#nav li ul { background-color: #666; background-color: rgba(102,102,102,0.9); filter: alpha(opacity=85); /* For IE8 and earlier */ display: none; position: absolute; top: 99%; width: 140%; }

#nav li:hover ul { display: block; left: 0; right: 0; text-align: center; }

#nav li:not( :first-child ):hover ul { left: -1px; }

#nav li ul a { font-size: 1em; /* [disabled]border-top: 1px solid #444;
*/ padding: 0.75em 0; }

#nav li ul li a:hover, #nav li ul:not( :hover ) li.active a { background: #828282; }

#nav li ul li:last-child:hover > a { /* Safari */ -webkit-border-radius: 0 0 20px 4px; }

.nav-trigger { /* critical styles - hide the checkbox input */ position: absolute; clip: rect(0, 0, 0, 0); }

#navigation-mobile {
	display: none;
}


@media only screen and (max-width: 999.9px) {

/* Accueil */

#boutons-index { position: relative; padding-top: 40px; margin: 0 auto; width: 590px; height: 50px; }

/* Accueil fin */

/* Extraits video */

#tabmenu { color: #000; font-family: 'Open+Sans', sans-serif; font-weight: 700; font-size: 1.2em; margin: 40px 0 0 2.5%; padding: 0px; position: relative; z-index: 1; }

#tabmenu li { display: inline; overflow: hidden; list-style-type: none; }

#tabmenu a, a.active { text-shadow: 1.5px 1.5px 1px #000; color: #FFF; padding: 8px 15px; float: left; background: #777; background: -webkit-linear-gradient(to bottom, #AFAFAF, #666); background: -o-linear-gradient(to bottom, #AFAFAF, #666); background: -moz-linear-gradient(to bottom, #AFAFAF, #666); background: linear-gradient(to bottom, #AFAFAF, #666); -webkit-border-radius: 18px 18px 0 0; border-radius: 18px 18px 0 0; display: block; }

#tabmenu a.active { color: #FF9; background: #484848; background: -webkit-linear-gradient(to bottom, #777, #484848); background: -o-linear-gradient(to bottom, #777, #484848); background: -moz-linear-gradient(to bottom, #777, #484848); background: linear-gradient(to bottom, #777, #484848); }

#tabmenu a:hover { color: #FFC; background: #999; background: -webkit-linear-gradient(to bottom, #CCC, #888); background: -o-linear-gradient(to bottom, #CCC, #888); background: -moz-linear-gradient(to bottom, #CCC, #888); background: linear-gradient(to bottom, #CCC, #888); }

#tabmenu a.active:hover { color: #FF9; background: #555; background: -webkit-linear-gradient(to bottom, #777, #484848); background: -o-linear-gradient(to bottom, #777, #484848); background: -moz-linear-gradient(to bottom, #777, #484848); background: linear-gradient(to bottom, #777, #484848); }

.barre-extraits { clear: both; min-width: 600px; width: 100%; height: 15px; position: relative; background: #484848; }

.spacer1 { height: 30px; width: 10px; float: left; position: relative; display: block; }

.spacer2 { height: 30px; width: 20px; float: left; position: relative; display: block; }

/* Extraits videos fin */

/* Main nav */


#nav { width: 100%; position: relative; text-align: center; left: -0.4%; }

#nav span.span1:after { width: 0; height: 0; border: 0.313em solid transparent; border-bottom: none; border-top-color: #FFF; content: ""; vertical-align: middle; display: inline-block; position: relative; right: -0.25em; }

/* first level */


#nav > ul > li { width: 20%; }

#nav > ul > li > a { height: 100%; font-size: 0.90em; line-height: 2.5em; }

/* second level */

#nav li ul { background-color: #666; background-color: rgba(102,102,102,0.9); display: none; position: absolute; top: 100%; width: 110%; }

#nav li ul a { font-size: 0.90em; /* [disabled]border-top: 1px solid #444;
*/ padding: 0.75em 0; }

}
@media only screen and (max-width: 599.9px) {

html { font-size: 85%; /* 12 */ }

/* Accueil */

#boutons-index { position: relative; padding-top: 30px; margin: 0 auto; left: -7%; width: 350px; height: 50px; }

#boutons-index ul { list-style-type: none; margin: 0; }

#boutons-index ul li { float: left; list-style-type: none; }

#boutons-index ul a { font-family: 'Michroma', sans-serif; font-size: 1.35em; text-shadow: 1px 1px 1px #000; position: relative; display: block; color: #CC6600; background: #DDD; padding: 8px 20px; margin-bottom: 70px; width: auto; }

#boutons-index ul a:hover { color: #C30; background: #FFF; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }

/* Accueil fin */

/* Sticky navigation */

#sticky_top_wrapper { margin: 0; }
#sticky_top { height: 0; padding: 0; margin: 0; }

 
/* our menu styles */
#sticky_navigation_wrapper { width:100%; height: auto; }
#sticky_navigation { width: auto; height: auto; }


/* Sticky navigation end */

/* Forfaits */


.forfaits { width: 100%; font-family: 'Open+Sans', sans-serif; font-weight: 700; position: relative; display: block; height: 9em; left: 12% }

.forfaits ul li { float: none; padding: 3px 0; }

.boutonForfait:after, .boutonForfait:before { display: none; }

/* Forfaits fin */

/* Extraits video */


#tabmenu { color: #000; height: 30px; font-family: 'Open+Sans', sans-serif; font-weight: 700; font-size: 1.1em; margin: 40px 0 0 2.5%; padding: 0px; position: relative; z-index: 1; }

#tabmenu li { display: inline; overflow: hidden; list-style-type: none; }

#tabmenu a, a.active { text-shadow: 1.5px 1.5px 1px #000; color: #FFF; padding: 8px 8px; float: left; background: #777; background: -webkit-linear-gradient(to bottom, #AFAFAF, #666); background: -o-linear-gradient(to bottom, #AFAFAF, #666); background: -moz-linear-gradient(to bottom, #AFAFAF, #666); background: linear-gradient(to bottom, #AFAFAF, #666); -webkit-border-radius: 18px 18px 0 0; border-radius: 18px 18px 0 0; display: block; }

#tabmenu a.active { color: #FF9; background: #484848; background: -webkit-linear-gradient(to bottom, #777, #484848); background: -o-linear-gradient(to bottom, #777, #484848); background: -moz-linear-gradient(to bottom, #777, #484848); background: linear-gradient(to bottom, #777, #484848); }

#tabmenu a:hover { color: #FFC; background: #999; background: -webkit-linear-gradient(to bottom, #CCC, #888); background: -o-linear-gradient(to bottom, #CCC, #888); background: -moz-linear-gradient(to bottom, #CCC, #888); background: linear-gradient(to bottom, #CCC, #888); }

#tabmenu a.active:hover { color: #FF9; background: #555; background: -webkit-linear-gradient(to bottom, #777, #484848); background: -o-linear-gradient(to bottom, #777, #484848); background: -moz-linear-gradient(to bottom, #777, #484848); background: linear-gradient(to bottom, #777, #484848); }

.barre-extraits { clear: both; min-width: 100%; width: 100%; height: 15px; margin-bottom: 0; position: relative; background: #484848; z-index: 10; }

.spacer1 { height: 30px; width: 7px; float: left; position: relative; display: block; }

.spacer2 { height: 30px; width: 20px; float: left; position: relative; display: block; }

/* Extraits videos fin */


/* Navigation Menu Mobile Drawer */


#navigation-mobile { width: 200px; height: 100%; position: fixed; top: 0; left: -200px/*0*/; z-index: 0; overflow-x: hidden; overflow-y: auto; list-style: none; background: #444; background: -webkit-linear-gradient(to bottom, #444, #555); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(to bottom, #444, #555); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(to bottom, #444, #555); /* For Firefox 3.6 to 15 */ background: linear-gradient(to bottom, #444, #555); display: block; }

#navigation-mobile li { font-family: 'Julius Sans One', "Lucida Sans Unicode", "Lucida Grande", sans-serif; font-weight: 700; width: 200px; border-top: 2px solid #222; }

#navigation-mobile li a { display: block; padding: 0.8em 0.5em 0.8em 1em; background: #333; background: -webkit-linear-gradient(to bottom, #333, #434343); background: -o-linear-gradient(to bottom, #333, #434343); background: -moz-linear-gradient(to bottom, #333, #434343); background: linear-gradient(to bottom, #333, #434343); color: white; font-size: 1.1em; text-decoration: none; }

#navigation-mobile li a:hover { color: #FFF; background: #666; background: -webkit-linear-gradient(to bottom, #555, #777); background: -o-linear-gradient(to bottom, #555, #777); background: -moz-linear-gradient(to bottom, #555, #777); background: linear-gradient(to bottom, #555, #777); }

#navigation-mobile a.nav-selected-mobile { color: #FFF; background: #666; background: -webkit-linear-gradient(to bottom, #555, #777); background: -o-linear-gradient(to bottom, #555, #777); background: -moz-linear-gradient(to bottom, #555, #777); background: linear-gradient(to bottom, #555, #777); }

#navigation-mobile li ul li { margin-left: 0.6em; padding: 0; border-top: 0; }

#navigation-mobile li ul li a { padding-right: 1em; background: #444; }

#navigation-mobile li ul li a:hover { background: #666; background: -webkit-linear-gradient(to bottom, #555, #777); background: -o-linear-gradient(to bottom, #555, #777); background: -moz-linear-gradient(to bottom, #555, #777); background: linear-gradient(to bottom, #555, #777); }

#navigation-mobile li:hover ul { display: block; left: 0; right: 0; text-align: center; }

/* second level */

#navigation-mobile li ul { position: static; padding: 0; border-bottom: none; width: auto; display: none; }

#navigation-mobile li:hover ul { text-align: left; }

#navigation-mobile span.span1:after { width: 0; height: 0; border: 0.313em solid transparent; border-bottom: none; border-top-color: #FFF; content: ""; vertical-align: middle; display: inline-block; position: relative; right: -0.25em; }

.site-wrap { min-height: 100%; min-width: 100%; background-image: url(../_derived/background3.jpg); background-repeat: repeat-x; background-color: #acacac; position: relative; top: 0; overflow-x: hidden; overflow-y: auto; bottom: 100%; left: 0; z-index: 1; }

.nav-trigger { position: fixed; clip: rect(0, 0, 0, 0); }

#drawer-toggle-label:before { display: block; position: absolute; left: 4px; top: 4px; border-bottom: 17px double #333; border-top: 6px solid #333; content: ""; height: 5px; width: 30px; text-align: left; text-indent: -9999px; }

#drawer-toggle-label {
display: block; position: fixed; top: 82px; left: 9px; height: 36px; width: 38px; z-index: 500; cursor: pointer; background: #DDD; background: rgba(255,255,255,0.5);
}

#drawer-toggle-label.label-gallery { top: 20px; }

.close { cursor: pointer; color: #FFF; text-align: right; width: 200px; height: 50px; padding-right: 25px; font-size: 2.8em; display: block; top: 0; left: 0; border: none; outline: none; background: #333; position: relative; }

.close:hover { background: #444; }

body { overflow-x: hidden; }

.site-wrap, #drawer-toggle-label ,/*(pour animer le menu)*/#navigation-mobile  { -moz-transition: left .3s; -o-transition: left .3s; -webkit-transition: left .3s; transition: left .3s; }

#nav-trigger:checked ~ #drawer-toggle-label { left: 209px; }

#nav-trigger:checked ~ div.site-wrap { left: 200px; }

/*(pour animer le menu)*/ #nav-trigger:checked ~ #navigation-mobile { left: 0; } 
}