.w3-col {overflow-x:hidden;}
.fb-post {background-color:white;}
.flex-it {display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-moz-box-wrap: nowrap;-webkit-box-wrap: nowrap;-webkit-flex-wrap: nowrap;-ms-flexbox-wrap: nowrap;-ms-flex-wrap: nowrap;flex-wrap: nowrap;}
.flex-justify-around {-webkit-justify-content: space-around;-moz-justify-content: space-around;justify-content: space-around;}
.flex-wrap {-moz-box-wrap: wrap;-webkit-box-wrap: wrap;-webkit-flex-wrap: wrap;-ms-flexbox-wrap: wrap;-ms-flex-wrap: wrap;flex-wrap: wrap;}
/* ================================================================================ */
* img { display: block; } 
figure { margin:16px; padding: 0.5em; color:#F0EDE5; /* Coconut Milk */ background-color:#A36E3C; /* Caramel Brown */ }
figure img { cursor:pointer; width:100%; }
.w3-dropdown-hover:first-child,.w3-dropdown-click:hover{background-color:inherit;color:inherit}
.w3-dropdown-hover:hover > .w3-button:first-child,.w3-dropdown-click:hover > .w3-button:first-child{background-color:inherit;inherit}
button:focus {outline:0;}
/* ================================================================================ */
/* background #f7efe7 ; #d2a679; #ac7339;       #fff2df;                            */                                      
/* ================================================================================ */
img {max-width:100%;height:auto;opacity: 1;transition: opacity 0.3s;}img[data-src] {opacity: 0;}
/* ================================================================================ */
html {height:100%; overflow-y:scroll;}
body {background-color:#fbefcc; color:#7B3F00; overflow-x:hidden;}

.w3-top, .w3-bottom {z-index: 9999 !important;}

.chocolate{background-color:#7B3F00 !important; /* Chocolate */	color:#F0EDE5 !important; /* Coconut Milk */}
.caramel{background-color:#A36E3C !important; /* Caramel Brown */ color:#F0EDE5 !important; /* Coconut Milk */}
.vanille{background-color:#fbefcc;}

div[class~=w3-bottom] div { background-color:#A36E3C; /* Caramel Brown */ } 

div[class~=w3-bottom] div a[class~=w3-btn]:nth-last-child(odd){
color: #572e16; /* Coffee 4 */
background-color: #fcfbe3; /* l4 Vanilla */ }

div[class~=w3-bottom] div a[class~=w3-btn]:nth-last-child(even){
color: #572e16; /* Coffee 4 */
background-color: #d2bb97; /* l3 Coffe 1 */
}

.w3-btn { margin: 3px 6px 3px 0; padding: 6px; }

#c2024 a {min-width:36px;}
#c2024 a:hover {  transform: scale(1.2); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */}

#c2024 svg {width:24px; height:36px;}


#ap-header { padding:6px; margin-top:62px; }

#ap-header > div {border-left: 3px inset; border-right: 3px groove;}

.ap-item img {
  max-width: 100%;
  
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.ap-item:hover img {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
/* ================================================================================ */
.sticky {
/*  position: fixed; */
    position: -webkit-sticky;
    position: sticky;
    top: 0;
	background-color:#7B3F00; /* #f6d8ac #d2bb97; */
	z-index:999;
padding: 0 0 0 10px;
}
/* ================================================================================ */
.no-js{display:none}
/* ================================================================================ */
.over-x {
	overflow-x: scroll;
	white-space: nowrap;
}
/* ================================================================================ */
#ap-page {
background-color: #fbefcc;
padding:68px 20px 20px 20px;
min-height:768px;
}
/* ================================================================================ */
h1, h2, h3 {margin:0; font-size: 24pt}

h1, h2, h3, h4, h5, h6, p { padding-left: 10px; }

h4 { font-size: 20pt; }

h5 { font-size: 18pt; }

h6, p {
	font-size: 16pt;
}

p { margin:10px 0; background-color:#F0EDE5; /* Coconut Milk */ }
/* ================================================================================ */
a {text-decoration: underline; }
a:hover { text-decoration: none;  }
a:visited { }
a:visited:hover {}
a:focus,
.focus a {
	outline: none !important;
}

.isDisabled {
  color: currentColor;
  cursor: not-allowed;
  opacity: 0.5;
  text-decoration: none;
}

.w3-btn:hover {  }
/* ================================================================================ */
/* Chocolate #7B3F00 Coconut Milk #F0EDE5 Caramel Brown #A36E3C Iced Coffee #B18F6A */
/* ================================================================================ */
/* https://www.w3schools.com/colors/colors_trends.asp                               */
/* ================================================================================ */
/*.w3-theme-l4 {color:#572e16; background-color:#fcfbe3 !important}  l4 Vanilla */
/*.w3-theme-l3 {color:#572e16; background-color:#d2bb97 !important}  l3 Coffe 1 */
/* ================================================================================ */

ul {
	list-style: none;
	list-style-position: inside;
	padding: 0;
}

li {
	font-size: 16pt;
	margin-bottom: 10px;
}
/* ================================================================================ */
/* menu default  odd = impair // even = pair                                        */
/* ================================================================================ */
/* menu voyages , menu formations, menu videos                                      */
/* ================================================================================ */
.sub-menu > .w3-btn:nth-child(odd), li:nth-child(odd) {
	color: #572e16; /* Coffee 4 */
	background-color: #fcfbe3; /* l4 Vanilla */
}

.sub-menu > .w3-btn:nth-child(even), li:nth-child(even) {
	color: #572e16; /* Coffee 4 */
	background-color: #d2bb97; /* l3 Coffe 1 */
}

li img {
	vertical-align: middle;
}

.truncate {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* ================================================================================ */
li {padding-left: 1.6em;}
li:before {
  content: "\f00c"; /* FontAwesome Unicode */
  font-family: FontAwesome;
  display: inline-block;
  margin-left: -1.3em; /* same as padding-left set on li */
  width: 1em; /* same as padding-left set on li */
  margin-right:0.3em;
}
.fa-ul li:before {content:none;}
.fa-ul {list-style-image: none;}
.fa-ul li{padding-left:0.3em; margin-left:-1em; margin-right:1.3em;}
/* ================================================================================ */
table {width:100%;}

   table thead {
    text-transform: uppercase; 
/*      font-weight: bold;*/
    }

table thead tr {  background-color:#ac7339 !important }

th { text-align:left; }
/* ================================================================================ */
/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after {
	content: " ";
	display: table;
}

.clearfix:after {
	clear: both;
}

.clear {
    clear: both;
}

.clear_left {
    clear: left;
}

.clear_right {
    clear: right;
}

.center {text-align:center; margin:0 auto;}

.centered {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%);
z-index:200;
}
/* ================================================================================ */
.w3-top * { z-index: 999 !important; }
.z-max * { z-index: 666 !important; }
/* ================================================================================ */
#ap-icons {
	position: fixed;
 	bottom: 0;
	width: 100%;
	z-index: 10000;
	height: 48px;
}

#ap-icons {
left: 0;
right: 0;
	overflow-x: hidden;
	margin:0 auto;
	max-width: 1280px;
}
/* ================================================================================ */
/* the A tag */
.album {
  width: 320px;
  height: 420px;	
  position: relative;
  z-index: 5;
  vertical-align: top;
  display:block; 
}

/* the images */
.album img { 
  position: absolute;
  top: 0;
  left: 0;
  border: 5px solid #f3f3f3;
  box-shadow: 1px 1px 2px #666;
  display:block;
  transition: all .3s ease-in-out;
    
}
/* first image animation properties */
.album:hover .photo1, .album:focus .photo1 {
    transform: rotate(-6deg) translate(-100px, -3px) scale(1.1);
}

/* second image animation properties */
.album:hover .photo2, .album:focus .photo2 {
    ms-transform: rotate(0deg) translate(0, -3px) scale(1.1);
}

/* third image animation properties */
.album:hover .photo3, .album:focus .photo3 {
    transform: rotate(6deg) translate(100px, -3px) scale(1.1);
}
/* ================================================================================ */
.none {
	display: none;
}

.fit {
	width: -moz-fit-content;
	width: -webkit-fit-content;
	width: fit-content;
}

.relative {
	position: relative;
}

.absolute {
	position: absolute;
}

#web {
	top: 1vw;
	left: 1vw;
	z-index: 10;
}

#social {
	top: 1vw; 
	right: 0;
}
/* ================================================================================ */
#rcf * {
	margin: 0;
}
/* ================================================================================ */
.active {
	color: lightgreen !important;
}

.reset {
	margin: 0 !important;
	padding: 0 !important;
}

.end {margin-bottom: 0 !important;}
/* ================================================================================ */
.writing {
	font-family: Lucida Handwriting;
}

.title:first-letter, .ss_title:first-letter, .content:first-letter, .bcontent:first-letter, .even:first-letter,  .img_box:first-letter {
	text-transform: uppercase;
}

/* ================================================================================ */
/*                          BORDURES IMAGE 3D                                       */
/* ============================== css3 ============================================ */ 
.box_shadow {
	-moz-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.6);
	-webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.6);
	box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.6);
}

.big-title {
	font-size: 42px;
	font-style: italic;
}

.left, .left-video {
	float: left;
}

h6.left, p.left {
	text-align: left;
}

.right, .right-video {
	float: right;
}

h6.right, p.right {
	text-align: right;
}

.img_box {
	padding: 9px;
	background: #000077;
	margin: 0 auto 9px auto;
}

#possible .content {
	padding: 3px 9px 3px 9px;
	margin-bottom: 3px;
}

#possible .ss_title {
	margin-bottom: 3px;
}

#contact .content {
	padding: 0px 0px 0px 9px;
}

#contact .bcontent {
	padding: 0px 0px 0px 9px;
}

.sunday {
	width: auto;
	height: 21px;
	background: #000077;
}

.ordinary_month {
	width: auto;
	height: 21px;
	margin: 0px 0px 3px 0px;
	background: #000077;
	font-weight: bold;
}

.ordinary_day {
	width: auto;
	height: 21px;
	margin: 0px 0px 0px 0px;
	background: #d9b38c;
}

.this_odd {
	margin-bottom: 3px;
	padding: 0px 0px 0px 3px;
	background: #d9b38c;
}

.even, .this_even {
	margin-bottom: 3px;
	padding: 0px 0px 0px 3px;
	background: #000077;
}

.this_odd, .this_event {
	color: yellow;
}

.this_month {
	width: auto;
	height: 21px;
	margin: 0px 0px 3px 0px;
	background: #000077;
	font-weight: bold;
	color: #FFFF00;
}

.this_sunday {
	width: auto;
	height: 21px;
	margin: 0px 0px 0px 0px;
	background: #000077;
	color: #FFFF00;
}

.this_day {
	width: auto;
	height: 21px;
	margin: 0px 0px 0px 0px;
	background: #d9b38c;
	color: #FFFF00;
}

#google_results {
	margin: 0 auto;
	width: 720px;
	height: 1260px;
	resize: both;
	overflow: scroll;
}

.xtop, .xbottom {
	display: block;
	background: transparent;
	font-size: 1px;
}

.xb1, .xb2, .xb3, .xb4 {
	display: block;
} /*overflow:hidden;*/
.xb1, .xb2, .xb3 {
	height: 1px;
}

.xb2, .xb3, .xb4 {
	background: #CC3300;
	border-left: 1px solid #CC3300;
	border-right: 1px solid #CC3300;
}

.xb1 {
	margin: 0 5px;
	background: #CC3300;
}

.xb2 {
	margin: 0 3px;
	border-width: 0 2px;
}

.xb3 {
	margin: 0 2px;
}

.xb4 {
	height: 2px;
	margin: 0 1px;
}

.xboxcontent {
	display: block;
	border: 0 solid #CC3300;
	border-width: 0 5px;
	overflow: hidden;
}

.wtop, .wbottom {
	display: block;
	background: transparent;
	font-size: 1px;
}

.wb1, .wb2, .wb3, .wb4 {
	display: block;
} /*overflow:hidden;*/
.wb1, .wb2, .wb3 {
	height: 1px;
}

.wb2, .wb3, .wb4 {
	background: #fff9d6;
	border-left: 1px solid #fff9d6;
	border-right: 1px solid #fff9d6;
}

.wb1 {
	margin: 0 5px;
	background: #fff9d6;
}

.wb2 {
	margin: 0 3px;
	border-width: 0 2px;
}

.wb3 {
	margin: 0 2px;
}

.wb4 {
	height: 2px;
	margin: 0 1px;
}

.wboxcontent {
	display: block;
	border: 0 solid #fff9d6;
	border-width: 0 5px;
	overflow: hidden;
}

.width {
	display: inline-block;
}


#rotator {
	cursor: pointer;
	overflow: hidden;
	margin: 50px auto 10px;
	position: relative;
	width: 144px;
	height: 95px;
}

#rotator img {
	border: 0;
	cursor: pointer;
	width: 144px;
	height: 95px;
}


/* ================================================================================ */
select {
	background: #fff9d6;
	color: #0000FF;
}

option {
	padding-right: 9px;
}

textarea {
	background: #fff9d6;
	color: #0000FF;
}

/* odd 1 3 5 even 2 4 6 */



dl {
	font: 12px/0.6cm Arial,Helvetica,sans-serif;
	text-align: justify;
}

/* ================================================================================ */
#marqueecontainer {
	position: relative;
	width: 452px;
	height: 77px;
	overflow: hidden;
	margin: 0 auto;
	filter: alpha(opacity=70);
	-moz-opacity: .70;
	opacity: .70;
	text-align: center;
	background: #DEB404;
}

.calendartoday {
	background: #4682B4;
	color: #00FFFF;
}

.drag {
	cursor: pointer;
	position: relative;
}

.iewrap1 {
	height: 20px;
	position: relative;
}

.iewrap2 {
	position: absolute;
}

.letterandline:first-letter {
	float: left;
	font-size: 200%;
}

.letterandline:first-line {
	text-transform: uppercase;
}

.menuitems {
	font-size: 16px;
	padding-left: 12px;
	padding-right: 12px;
	font-weight: bold;
}

.tabcontent {
	display: none;
}

#a0 {
	clip: rect(0px, 9px, 9px, 0px);
	height: 25px;
	left: -24px;
	position: absolute;
	top: -24px;
	width: 9px;
	z-index: 2000;
}

#a1 {
	clip: rect(0px, 9px, 9px, 0px);
	height: 25px;
	left: 96px;
	position: absolute;
	top: -24px;
	width: 9px;
	z-index: 2000;
}

#a2 {
	clip: rect(0px, 9px, 9px, 0px);
	height: 25px;
	left: 216px;
	position: absolute;
	top: -24px;
	width: 9px;
	z-index: 2000;
}

#a3 {
	clip: rect(0px, 9px, 9px, 0px);
	height: 25px;
	left: 338px;
	position: absolute;
	top: -24px;
	width: 9px;
	z-index: 2000;
}

#a4 {
	clip: rect(0px, 9px, 9px, 0px);
	height: 25px;
	left: 460px;
	position: absolute;
	top: -24px;
	width: 9px;
	z-index: 2000;
}

#a5 {
	clip: rect(0px, 9px, 9px, 0px);
	height: 25px;
	left: 640px;
	position: absolute;
	top: -24px;
	width: 9px;
	z-index: 2000;
}

#a6 {
	clip: rect(0px, 9px, 9px, 0px);
	height: 25px;
	left: -24px;
	position: absolute;
	top: -24px;
	width: 9px;
	z-index: 2000;
}

#a7 {
	clip: rect(0px, 9px, 9px, 0px);
	height: 25px;
	left: 200px;
	position: absolute;
	top: -24px;
	width: 9px;
	z-index: 2000;
}

#a8 {
	clip: rect(0px, 9px, 9px, 0px);
	height: 25px;
	left: 300px;
	position: absolute;
	top: -24px;
	width: 9px;
	z-index: 2000;
}

#a9 {
	clip: rect(0px, 9px, 9px, 0px);
	height: 25px;
	left: 600px;
	position: absolute;
	top: -24px;
	width: 9px;
	z-index: 2000;
}

.titlefield {
	text-decoration: none;
	font-weight: bold;
}

.labelfield {
	color: brown;
}

.datefield {
	color: yellow;
}

#rssid p {
	margin-bottom: 9px;
}

.niveau {
	padding-right: 10px;
	padding-left: 10px;
	padding-bottom: 10px;
	width: 640px;
	padding-top: 10px;
}

.sousniveau {
	font-weight: normal;
	list-style-position: outside;
	list-style-image: url(../gif/plandusite.gif);
	margin-left: 60px;
	text-indent: 0px;
}

.niveau_menu {
	padding-right: 10px;
	padding-left: 10px;
	padding-bottom: 10px;
	width: 150px;
	padding-top: 10px;
}

.sousniveau_menu {
	font-weight: normal;
	list-style-position: outside;
	list-style-image: url(../gif/plandusite.gif);
	margin-left: 9px;
	text-indent: 0px;
}

.retrait60 a {
	text-decoration: none;
}

.niveau a.retrait60 a:link {
	text-decoration: none;
}

.retrait60 a:visited {
	text-decoration: none;
}

.niveau a:link {
	text-decoration: none;
}

.niveau a:visited {
	text-decoration: none;
}

.niveau a:hover {
	text-decoration: underline;
}

a.tab-menu:link, a.tab-menu:visited, a.tab-menu:active {
	background-color: transparent;
	color: #404040;
	text-decoration: none;
}

a.tab-menu:hover, a.tab-menu:visited:hover {
	background-color: transparent;
	color: yellow;
	text-decoration: none;
}

#main4, div.main-4 {
	position: relative;
	width: 720px;
	height: 92px;
	overflow: hidden;
 /* visible */
	margin-top: -117px;
	padding: 0px;
	z-index: 9;
}

#main4 img, div.main-4 img {
/*	background-color:#EEEEEE; */
	display: block;
	width: 720px;
	height: 92px;
	margin-top: -117px;
	/* position:absolute; */
	margin: auto;
	z-index: 9;
}

#main4 {
	margin-top: -117px;
	z-index: 9;
}

#banner_top, .banner_top {
	position: relative;
	width: 728px;
	height: 90px;
	overflow: hidden;
 /* visible */
	margin: 0px;
	padding: 0px;
}

#banner_top {
	margin: auto;
}

.effect {
	width: 144px;
	height: 88px;
	background-image: url(../gif/cachet.gif);
	background-position: center;
	background-repeat: no-repeat;
	color: #fff9d6;
	margin: 0px auto;
}

#sortable-list {
	padding: 0;
}

.sortme {
	padding: 4px 8px;
	color: #000;
	cursor: move;
	list-style: none;
	width: 500px;
	background: #ddd;
	margin: 10px 0;
	border: 1px solid #999;
}

#message-box {
	background: #fffea1;
	border: 2px solid #fc0;
	padding: 4px 8px;
	margin: 0 0 16px 0;
	width: 500px;
}


/* ================================================================================ */
#counter {
	border-bottom: 3px solid transparent;
	margin: 0;
	border-left: 6px solid #08a0ff;
	border-right: 6px solid #508fc4;
}

#counter img:hover {
	background-color: transparent;
}

/* ================================================================================ */
#ajax-tabs li {
	float: left;
	margin: 0px 9px 3px 0px;
}

/* ================================================================================ */ 
#tutorial {
	padding: 9px;
	margin: auto;
	overflow: hidden;
}

#tutorial div.step {
	background-color: #d9b38c;
	text-align: center;
	overflow: hidden;
}

#tutorial div.step p, ul {
	padding: 9px;
	text-align: left;
}

#result {
    max-width: 500px;
	padding: 10px;
	background-color: #F9F9F9;
	color: #ac7339;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}

#parallax {
	height: 370px;
	overflow: hidden;
	position: relative;
	width: 670px;
	margin: 0 auto;
}

.tl {
	left: 0;
	position: absolute;
	top: 0;
}

.tr {
	right: 0;
	position: absolute;
	top: 0;
}

.bl {
	left: 0;
	position: absolute;
	bottom: 0;
}

.br {
	right: 0;
	position: absolute;
	bottom: 0;
}

.preview {
	float: left;
    max-width: 177px;
    max-height: 180px;
	margin: 4px;
	padding: 5px;
	text-align: center;
	background-color: #F9F9F9;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}

.preview img {
	margin: 0;
}

.preview span {
	display: block;
	font-size: 12px;
	margin-bottom: 4px;
}

.popular {
	color: #2e8531;
	font-weight: bold;
}

.SUPERpopular {
	font-weight: bold;
	color: #d62222;
}

.normal {
	font-weight: bold;
}

.ui-tabs-nav li a span, #ajax-tabs li a {
	font-size: 16px;
	font-weight: bold;
	padding: 6px 9px 6px 9px;
}

.ui-tabs-selected a span {
	color: yellow;
}
/* ================================================================================ */ 
.css-center {
	display: table;
	margin: auto;
}
/* ================================================================================ */ 
blockquote {
	width: 168px;
 /* required */
	margin: 0 auto;
}

blockquote p {
	font-weight: bold;
	padding: 6px 9px 6px 9px;
	background-color: rgb(0,255,255);
	background-color: rgba(0,255,255,0.5);
	text-align: center;
}

blockquote h6 i {
	font-size: 16px;
}
/* ================================================================================ */ 
#smart3D {
	width: 740px;
	height: 372px;
	overflow: hidden;
}

#first3D {
	left: 85px;
	top: 46.5px;
	position: relative;
}
/* ================================================================================ */ 
.pdf, a[href$=".pdf"]:not(.no_fa), a[href$=".xls"], a[href$=".xlsx"], a[href$=".doc"], a[href$=".docx"] {
	background-repeat: no-repeat;
	background-position: left center;
/*	padding-left: 19px;*/
}

.pdf, a[href$=".pdf"]:not(.no_fa)::before {
   font-family: FontAwesome;
   content: "\f1c1";
   display: inline-block;
   padding-right: 5px;
   vertical-align: 3px;
	font-size:initial;
}

a[href$=".xls"], a[href$=".xlsx"] {
	background-image: url("../png/ext/file_extension_xls.png");
}

a[href$=".doc"], a[href$=".docx"] {
	background-image: url("../png/ext/file_extension_doc.png");
}
/* ================================================================================ */ 

.jp-table {
	width: 100%;
	cellpadding: 3;
	cellspacing: 3;
	border: 0;
}

.jp-table th {
	font-size: 16px;
}

.jp-table .even, #tarifs .odd {
	padding-right: 3px;
}

#tarifs table {
	width: 100%;
	cellpadding: 3;
	cellspacing: 3;
	border: 0;
}

#tarifs th {
	font-size: 16px;
}

#tarifs .even, #tarifs .odd {
	padding-right: 3px;
} 
/* ================================================================================ */ 
.table {
	display: table;
}

.row {
	display: table-row;
}

.cell {
	display: table-cell;
}
/* ================================================================================ */ 
.nojs {
	display: none;
}

.nocomment {
	display: none;
}
/* ================================================================================ */
#plan-du-site * {
	font-size: 18px;
}
/* ================================================================================ */ 
td {
	vertical-align: top;
}

#calendar p {
	line-height: 18px;
}
/* ================================================================================ */

.radius_50 {
	border-radius: 50%;
}

.stop {
	clear: both;
	height: 9px;
}

.ie .stop {
	clear: both;
	height: 18px;
}
/* ================================================================================ */
.youtube {
	margin-left: 10px;
}

.ie youtube {
	margin: 0px;
}

.ie .clip {
	margin: 0px;
}
/* ================================================================================ */
.ap-270 {min-width:270px; max-width:270px;}
/* ================================================================================ */
/* ratio  																		    */
/* ================================================================================ */
.video {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
/*	min-width:256px;
	min-height:144px; */
}

.video iframe,  
.video object,  
.video embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-style:none;
}

.r33 {
	position: relative;
	padding-bottom: 33.33%;
	height: 0;
	overflow: hidden;
}

.r33 img {margin-top: -136px; width:100%}

.r50 {
	position: relative;
	padding-bottom: 50%;
	height: 0;
	overflow: hidden;
}

.r75 {
	position: relative;
	padding-bottom: 75%;
	height: 0;
	overflow: hidden;
}

@media (max-width:600px){
#ap-header div[class~=r33]{padding:0; margin:0; height:100%;}
#ap-header div[class~=r33] img {margin-top: 0; width:100%}
}
/* ================================================================================ */
.left-video, .right-video {width:66%; margin:10px; min-width:266px;}
.ap-video {width:49%; max-width:512px;}
.ratio4_3, .ap-photo {max-width:33%; margin-bottom:10px;}
.ratio4_3 img, .ap-photo img {width:98%; margin:0 auto;}
/* .frame { background:red;}*/

@media screen and (max-width: 768px) and (min-width: 640px) {
.ratio4_3, .ap-photo, .ap-video {width:49%; max-width:320px;}
}

@media only screen and (max-width: 639px) {
.ratio4_3, .ap-photo, .ap-video {width:98%; max-width:608px;}

    table thead {
      display: none;
    }

    table tr {
      margin-bottom: 10px;
      display: block;
    }

    table td {
      display: block;
      text-align: right;
    }

    table td:last-child {
      border-bottom: 0;
    }

    table td:before {
      content: attr(data-title);
      float: left;
 /*   text-transform: uppercase; */
      font-weight: bold;
    }
} 
/* ================================================================================ */
.shadow { -webkit-filter: drop-shadow(5px 5px 5px #222 ); filter: drop-shadow(5px 5px 5px #222); }
/* ================================================================================ */
.shadowed {
/* for Chrome, Safari and Opera */
-webkit-filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.5));

/* w3c */
filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.5));

/* for Firefox */
filter: url(#drop-shadow);

/* for IE7/8/9 */
-ms-filter: progid:DXImageTransform.Microsoft.Dropshadow(OffX=5, OffY=5, Color='#888888');
filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color='#888888', Positive='true');
}
/* ================================================================================ */
.fixed-header {
    width: 100%;
    margin: 0 auto;
    position: fixed;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 999;
}
/* ================================================================================ */
.logo {
  float: left;
  height: 168px;
  width: 168px;
  shape-outside: url('../png/logo_attitude_plongee_168x168.png');
/* shape-margin: 1rem; */
}
/* ================================================================================ */
#acc button { 
cursor: pointer;
color: #572e16; /* Coffee 4 */
background-color: #d2bb97; /* l3 Coffe 1 */
}

#acc button:hover { 
color: #572e16; /* Coffee 4 */
background-color: #fcfbe3; /* l4 Vanilla */
}

#acc button:hover { 
color: #572e16; /* Coffee 4 */
background-color: #fcfbe3; /* l4 Vanilla */
}
/* ================================================================================ */
video {
  width: 100%;
  height: auto;
}
/* ================================================================================ */
/*                          BORDURES IMAGE 3D                                       */
/* ============================== css3 ============================================ */ 
figure, .frame {position:relative; background:transparent; padding:5px; display:block;
-moz-box-shadow: inset 3px 3px 9px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: inset 3px 3px 9px rgba(0, 0, 0, 0.6);
box-shadow: inset 3px 3px 9px rgba(0, 0, 0, 0.6);
}

.wframe {position:relative; background:#ffffff; padding:9px; display:block;
-moz-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);
}

.box_shadow {
-moz-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.6);
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.6);
}
/* ================================================================================ */
hr {
    border: none;
    border-top: 3px double #333;
    color: #333;
    overflow: visible;
    text-align: center;
    height: 5px;
}

hr:after {
    background: #fff;
    content: '§';
    padding: 0 4px;
    position: relative;
    top: -13px;
}