html, body {width: 100%; height: 100%;white-space: nowrap;oveflow:hidden;position:fixed;top:0;left:0;}
#content{display:block;position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000;}
button:active, button:focus,button:target {outline-style:none;outline:none;}
/*module langue*/
#langues {display:block;position:absolute;width:auto;height:30px;right:10px;top:10px;z-index: 9999;}
#langues a.flag {width:auto;height:30px;color:#fff;font-size:12px;text-decoration:none;}
#langues a.flag.is{text-decoration:underline;}
#langues a.flag.not:hover{text-decoration:underline;}
#langues a aside{display: inline-block;position: relative;line-height: inherit;width: 16px;height: 11px;top: 1px;margin: 0 8px 0 8px;background-image: url('http://www.hotel-metropol-paris.com/img/flags.png');background-repeat: no-repeat;}
#fr_flag{background-position:-229px -174px;}
#en_flag{background-position:-285px -174px;}
/*header*/
#content header{display:block;width:100%;height:12.5%;position:absolute;top:0;left:0;background-color:#fff;z-index:10;}
#content header.top_menu{display:block;width:100%;height:15%;position:absolute;top:0;left:0;background-color:#000;}
#content header.home_menu{display:block;width:100%;height:100%;position:absolute;top:0;left:0;background-color:#000;}
/*header menu*/
#content header nav {display:block;width:100%;height:30%;position:absolute;top:70%;left:0;background-color:transparent;margin:0;padding:0;}
/*menu zoning*/
#content header nav {display: block;width: 100%;height: 40%;position: absolute;top: 60%;left: 0;background-color: #222;margin: 0;padding: 0;}
#content header nav ul {display:block;width:100%;height:100%;position:absolute;top:0;left:0;background-color:transparent;margin:0;padding:0;list-style:none;white-space:nowrap;}
#content header nav ul li {display:inline-block;width:20%;height:100%;position:relative;background-color:transparent;margin:0;padding:0;list-style:none;white-space:nowrap;}
#content header nav ul li button{display:block;width:100%;height:100%;position:absolute;top:0;left:0;background-color:transparent;margin:0;padding:0;list-style:none;border:none;
z-index: 5;font-family: 'karlabold', Arial, sans-serif;font-size:0.8em;color:white;}
#content header.home_menu nav{background-color:transparent;}
#content header.home_menu nav ul li button {padding-top: 0;background-image: url('http://www.hotel-metropol-paris.com/img/fond-news.jpg');background-size:70% 60%;background-position:50% 0 ;background-repeat:no-repeat;}
#content header.home_menu nav {display: block;width: 100%;height: 25%;top:75%;}
#content header.home_menu nav ul li.pga button{background-image: url('http://www.hotel-metropol-paris.com/img/bt_a.jpg');}
#content header.home_menu nav ul li.pgb button{background-image: url('http://www.hotel-metropol-paris.com/img/bt_b.jpg');}
#content header.home_menu nav ul li.pgc button{background-image: url('http://www.hotel-metropol-paris.com/img/bt_c.jpg');}
#content header.home_menu nav ul li.pgd button{background-image: url('http://www.hotel-metropol-paris.com/img/bt_d.jpg');}
#content header.home_menu nav ul li.pge button{background-image: url('http://www.hotel-metropol-paris.com/img/bt_e.jpg');}
/*Home header content*/
/*Bouton home*/
#content header button#btn_home{display:block;position:absolute;border:none;background-color:transparent;width:10%;height:50%;top:5%;left:2.5%;
background-image: url('home.png');background-position:left center;background-size:auto 70%;background-repeat:no-repeat;color:transparent;text-align:end;}
/*tampon home*/
#content header aside{display: block;position: absolute;border: none;background-color: transparent;width: 10%;height: 60%;top: 5%;left:90%;}
#content header aside div.text_content{display: block;position: absolute;border: none;background-color: transparent;width: 100%;height: 100%;top: 0;font-size: 10px;left:0;color: #FFA500;white-space:normal;overflow:hidden;}
#content header aside div.text_content p{display: block;position: relative;border: none;background-color: transparent;width: 100%;height: auto;margin: 0;padding:0;top: 0;font-size: 9px;left:0;color: #FFA500;white-space:normal;overflow:hidden;}
/*text intro home*/
#content header article#text_home{display:block;position:absolute;border:none;background-color:transparent;width:100%;height:10%;top:25%;left:0;text-align:center;color:#efefef;}
#content header article#text_home{display:none;}
#content header article#text_home.home{display:block;}
/*logo home*/
#content header section {display:block;width:100%;height:70%;position:absolute;top:0;left:0;background-color:transparent;margin:0;padding:0;}
#content header section header{max-height: 100px;display:block;width:100%;height:100%;position:absolute;top:0;left:0;background-color:transparent;margin:0;padding:0;list-style:none;border:none;
background-image: url('http://www.hotel-metropol-paris.com/img/logo5.png');background-position:center;background-size:contain;background-repeat:no-repeat;}
/*zonning logo dans header*/
#content header.top_menu section {display: block;width: 80%;height: 60%;top: 0;left: 10%;}
#content header.home_menu section {display:block;width:100%;height:25%;top:0%;left:0;}
/*zonning news home*/
#content header.top_menu div{display:none;}
#content header.top_menu div#home_news{display:none;}
#content header.home_menu div#home_news{display:block;position:absolute;width:100%;left:0;height:25%;top:40%;overflow:auto;
background-image:url('http://www.hotel-metropol-paris.com/img/fondnewshome.jpg');background-repeat:no-repeat;background-size:cover;background-size:100% 100%;background-position:center;}
#content header.home_menu div#home_news article{display:block;position:relative;width:90%;left:5%;height:100%;top:0%;white-space:nowrap;/*margin-left:2.5%;*/}
/*news home titre*/
#content header.home_menu div#home_news article div.news_titre{display:block;width:40%;position:absolute;top:5%;left:10%;height:15%;}
#content header.home_menu div#home_news article div.news_titre h4.news_h4{margin:0 0 0 0;font-size: 14px;color:#fff;}
/*news home texte*/
#content header.home_menu div#home_news article img{display:block;position:absolute;width:40%;height:75%;top:20%;left:5%;}
#content header.home_menu div#home_news article aside.news_content{position:absolute;display:block;width:50%;height:80%;top:20%;left:50%;}
#content header.home_menu div#home_news article aside.news_content p{position:relative;display:inline;white-space:normal;font-size: 11px;text-align:left;}
#content header aside.news_content{position:absolute;display:block;width:40%;height:80%;top:20%;left:10%;color:#ededed;}
#content header.home_menu aside{height:8%;}
#content header.home_menu div#home_news ul{display:block;position:absolute;width:100%;height:300%;margin:0;padding:0;}
#content header.home_menu div#home_news li{display:block;position:relative;width:100%;height:33.33333%;margin:0;padding:0;list-style:none;}
/*news next prev home button*/
#content header.home_menu button.news_next{display:block;position:absolute;z-index:99;top:50%;left:0%;width:100%;height:50%;background-color:#121212;border: 2px solid #020202;color:orange;}
#content header.home_menu button.news_prev{display:block;position:absolute;z-index:99;top:0%;left:0%;width:100%;height:50%;background-color:#121212;border: 2px solid #020202;color:orange;}
#content header.top_menu button.news_next{display:none;}
#content header.top_menu button.news_prev{display:none;}
#content header.home_menu div#news_nav{display:none;}
#content header.home_menu div#news_nav{display:block;position:absolute;z-index:99;top:40%;left:2.5%;width:5%;height:20%;}
#content header.home_menu div#news_nav .bt_nav_a{display:block;position:absolute;z-index:99;width:100%;height:100%; }
/*Footer*/
#content footer{display:block;width:100%;height:12.5%;position:absolute;top:87.5%;left:0;background-color:#111;z-index: 12;}
#content footer.home{display:block;z-index:12;top: 92.5%;}
/*footer menu*/
#content footer nav {display:block;width:100%;height:65%;position:absolute;top:0;left:0;background-color:transparent;margin:0;padding:0;}
#content footer nav ul {display:block;width:100%;height:100%;position:absolute;top:0;left:0;background-color:transparent;margin:0;padding:0;list-style:none;white-space:nowrap;}
#content footer nav ul li {display:inline-block;width:100%;height:100%;position:relative;background-color:transparent;margin:0;padding:0;list-style:none;white-space:nowrap;}
#content footer nav ul li button{display:block;width:100%;height:100%;position:absolute;top:0;left:0;background-color:transparent;margin:0;padding:0;list-style:none;border:none;z-index: 5;white-space:normal;overflow:hidden;color:#fff;}
#content footer nav ul li button{background-image: url("http://www.hotel-metropol-paris.com/img/btn_resa.png");background-position:center;background-size:cover;background-size:100% 100%;background-repeat:no-repeat;}
#content footer section {display:block;width:100%;height:35%;position:absolute;top:65%;left:0;background-color:transparent;margin:0;padding:0;}
#content footer section button{display:block;position:absolute;background-color:transparent;margin:0;padding:0;list-style:none;border:none;z-index: 5;white-space:normal;overflow:hidden;color:#fff;font-size:xx-small;}
#content footer section button#btn_copyright{width:25%;height:100%;top:0;left:0;}
#content footer section button#btn_credit{width:25%;height:100%;top:0;left:25%;}
#content footer section button#btn_mentionlegal{width:25%;height:100%;top:0;left:50%;}
#content footer section button#btn_cgv{width:25%;height:100%;top:0;left:75%;}
/*Bouton Menu Masquer*/
#content header nav ul li.pgf{display:none;}
#content footer nav ul li.pga{display:none;}
#content footer nav ul li.pgb{display:none;}
#content footer nav ul li.pgc{display:none;}
#content footer nav ul li.pgd{display:none;}
#content footer nav ul li.pge{display:none;}
/*Resercation*/
#frame_container{width:85%;height:80%;z-index:98;margin:0;padding:0;display:block;position:absolute;top:10%;left:7.5%;overflow:auto;overflow-scrolling:scroll;-webkit-overflow-scrolling: touch; }
#iframe{width:100%;height:100%;z-index:99;margin:0;padding:0;display:block;position:absolute;top:0;left:0;overflow:auto;overflow-scrolling:scroll;-webkit-overflow-scrolling: touch; }
#frame_container_mobile{width:85%;height:80%;z-index:98;margin:0;padding:0;display:none;position:absolute;top:10%;left:7.5%;overflow:auto;overflow-scrolling:scroll;-webkit-overflow-scrolling: touch; }
#iframe_mobile{width:100%;height:100%;z-index:99;margin:0;padding:0;display:none;position:absolute;top:0;left:0;overflow:auto;overflow-scrolling:scroll;-webkit-overflow-scrolling: touch; }
/*POP UP*/
#content aside {display:none;width:100%;height:72.5%;position:absolute;top:15%;left:0;background-color:transparent;z-index: 4;}/*CONTENEUR DES PAGES*/
#content aside h1, #content aside h2, #content aside h3, #content aside h4, #content aside h5, #content aside article, #content aside aside{display:block;margin:auto;color:white;position:absolute;padding:0;border:none;}
#content aside h1, #content aside h2, #content aside h3, #content aside h4, #content aside h5{top:0;left:5%;width:90%;height:15%;text-align:center;margin:2.5% 0 7px ;position: relative;}
#content aside article{top:15%;width:90%;left:5%;height:70%;text-align:left;}
#content aside aside{top:85%;width:90%;left:5%;height:15%;text-align:center;}
#content aside article{overflow:auto;white-space:normal;}
#content aside aside button{top:15%;width:90%;left:5%;height:70%;text-align:center;border:none;display:block;position:absolute;border: 1px solid #fff;border-radius: 25px;color: #fff;}
#content aside.popup article div {
overflow: auto;
white-space: normal;
color: #fff !important;
}
#content aside#popup_background{display:none;width:100%;height:72.5%;position:absolute;top:15%;left:0;background-color:#000;z-index: 3;opacity:0.92;}
/*PAGE PRINCIPALE*/
#content section {display:block;width:100%;height:72.5%;position:absolute;top:15%;left:0;background-color:#000;z-index: 1;}/*CONTENEUR DES PAGES*/
#content section#background {/*background-image: url("http://www.hotel-metropol-paris.com/img/fond_o2.jpg");*/background-position:center;background-size:cover;background-size:100% 100%;background-repeat:no-repeat;}
#content section section{width:100%;height:100%;position:absolute;display:block;z-index: 2;}/*CONTENU DES PAGES*/
/*Animation des pages*/
#content section section.view{top:0;}
#content section section.view.in_view {z-index: 4;left:0;-moz-transition: all 1.5s ease-in-out 1s;-webkit-transition: all 1.5s ease-in-out 1s;transition: all 1.5s ease-in-out 1s;}
#content section section.view.out_view {z-index: 3;left:-100%;-moz-transition: all 1.5s ease-in-out 1s;-webkit-transition: all 1.5s ease-in-out 1s;transition: all 1.5s ease-in-out 1s;}
#content header.top_menu{-moz-transition: all 1.5s ease-in-out 1s;-webkit-transition: all 1.5s ease-in-out 1s;transition: all 1.5s ease-in-out 1s;}
#content header.home_menu{-moz-transition: all 1.5s ease-in-out 1s;-webkit-transition: all 1.5s ease-in-out 1s;transition: all 1.5s ease-in-out 1s;}
#content header.top_menu section {-moz-transition: all 1.5s ease-in-out 1s;-webkit-transition: all 1.5s ease-in-out 1s;transition: all 1.5s ease-in-out 1s;}
#content header.home_menu section {-moz-transition: all 1.5s ease-in-out 1s;-webkit-transition: all 1.5s ease-in-out 1s;transition: all 1.5s ease-in-out 1s;}
#content footer.fullscreen {display:none;}
/*background des pages*/
#content section section#page_a{background-color:transparent;}
#content section section#page_b{background-color:transparent;}
#content section section#page_c{background-color:transparent;}
#content section section#page_d{background-color:transparent;}
#content section section#page_e{background-color:transparent;}
/*ZoninG Content standart*/
#content section section nav{display:block;position:absolute;width:20%;height:100%;background-color:transparent;top:0;left:0%;white-space:normal;z-index: 10;}
#content section section section{display:block;position:absolute;width:60%;height:100%;background-color:red;top:0;left:20%;white-space:normal;}
#content section section aside{display:block;position:absolute;width:20%;height:90%;background-color:transparent;top:5%;left:80%;overflow:hidden;white-space:normal;}
#content section section aside{background-color:transparent;background-image:url('http://www.hotel-metropol-paris.com/img/deco_bar_left.png');background-repeat:no-repeat;background-size:cover;background-size:100% 100%;background-position:center;}
/* Zonning personaliser*/
/*zoning du contenu principalephoto cadrephoto scrolling innner cadre*/
#content section section section{background-color:transparent;width:45%;left:27.5%;height:90%;top:5%;}
#content section section section aside{display:block;position:absolute;width:100%;height:100%;top:0;left:0;white-space:normal;z-index:2;background-color:transparent;background-image:url('http://www.hotel-metropol-paris.com/img/cadre_md.png');background-repeat:no-repeat;background-size:cover;background-size:100% 100%;background-position:center;}
#content section section section article{display: block;position: absolute;width: 83.50%;height: 79.5%;background-color: red;top: 10.5%;left: 8.25%;white-space: normal;z-index: 4;}
/*zooning iscrol photo() inner cadre*/
#content section section section article{overflow:hidden;background-color:black;}/*cadre zonning*/
#content section section section article article {position:absolute;width:100%;height:100%;top:0;left:0;margin:0;padding:0;overflow:hidden;display:block;background-image:none;}
#content section section section article article aside {position:relative;width:100%;height:100%;margin:0;padding:0;overflow:auto;display:block;background-image:none;}
#content section section section article article aside ul {position:relative;width:100%;height:100%;margin:0;padding:0;overflow:hidden;display:block;}
#content section section section article article aside ul li {position:relative;width:100%;height:100%;margin:0;padding:0;overflow:hidden;display:inline-block;float:left;}
#content section section section article article aside ul img{position:absolute;width:100%;height:100%;margin:0;padding:0;overflow:hidden;display:block;}
/*zoning du contenu principalephoto cadrephoto scrolling des cadres*/
#content section section section.caroussel {display:block;position:absolute;width:60%;height:100%;background-color:transparent;top:0;left:20%;white-space:normal;}
#content section section section.caroussel section {display: block;position: absolute;width: 100%;height: 100%;background-color: transparent;white-space: normal;z-index: 4;top:0;left:0;}
#content section section section.caroussel{top:0;-moz-transition: all 0.0s ease-in-out 1s;-webkit-transition: all 0.0s ease-in-out 1s;transition: all 0.0s ease-in-out 1s;}
#content section section section.caroussel.photo_in {top:0;-moz-transition: top 0.8s ease-in-out 1s;-webkit-transition: top 0.8s ease-in-out 1s;transition: top 0.8s ease-in-out 1s;}
#content section section section.caroussel.photo_out{top:170%;-moz-transition: all 0.8s ease-in-out 1s;-webkit-transition: all 0.8s ease-in-out 1s;transition: all 0.8s ease-in-out 1s;}
#content section section.fullscreen section.caroussel.photo_out{top:170%;-moz-transition: top 0.8s ease-in-out 1s;-webkit-transition: top 0.8s ease-in-out 1s;transition: top 0.8s ease-in-out 1s;}
#content section section.fullscreen {display:block;position:fixed;width:100%;height:100%;background-color:transparent;top:0;left:0;white-space:normal;z-index:90;}
#content section section.fullscreen section.caroussel {display:block;position:fixed;width:100%;height:100%;background-color:transparent;top:0;left:0;white-space:normal;z-index:50;-moz-transition: all 0s ease-in-out 0s;-webkit-transition: all 0s ease-in-out 0s;transition: all 0s ease-in-out 0s;}
#content section section.fullscreen section.caroussel section ul li{display: block;position:relative;width:12.5%;height: 100%;top: 0;left:initial;white-space: normal;z-index: 4;float:left;margin:0;max-height:initial;max-width:initial;}
#content section section.fullscreen section.caroussel section ul li img{max-height:initial;max-width:initial;}
#content section section.fullscreen section.caroussel aside button.photo_full{background-position:center -15%;}
/*zonning iscroll CAdre*/
#content section section section.caroussel section ul{display:block;position:absolute;width:800%;height:100%;top:0;left:0;white-space:normal;z-index:2;margin:0;padding:0;}
#content section section section.caroussel section ul li{display: block;position:relative;width:11%;height: 90%;background-color: black;top: 5%;left:initial;white-space: normal;z-index: 4;float:left;margin:0 0.74%;}
#content section section section.caroussel section ul li aside{display: block;position: absolute;width: 100%;height: 100%;top:0;left:0;white-space: normal;z-index: 4;}
#content section section section.caroussel section ul li img{position:absolute;width:85%;height:85%;margin:0;padding:0;overflow:hidden;display:block;top:7.5%;left:7.5%;}
#content section section section.caroussel section ul li aside{background-color:transparent;background-image:none;background-repeat:no-repeat;background-size:100% 100%;background-position:center;}
/*Bouton carroussel*/
#content section section section.caroussel button.photo_prev{display:block;width:7.5%;height:100%;z-index:12;position:absolute;left:0%;top:0;background-color:transparent;border:none;color:transparent;}
#content section section section.caroussel button.photo_next{display:block;width:7.5%;height:100%;z-index:12;position:absolute;left:92.5%;top:0;background-color:transparent;border:none;color:transparent;}
#content section section section.caroussel button.photo_prev{background-image:url('http://www.hotel-metropol-paris.com/img/fleche_g.png');background-repeat:no-repeat;background-size:contain;background-size: 100%;background-position: center ;background-color:transparent;}
#content section section section.caroussel button.photo_next{background-image:url('http://www.hotel-metropol-paris.com/img/fleche_d.png');background-repeat:no-repeat;background-size:contain;background-size: 100%;background-position: center ;background-color:transparent;}
/*zone commande caroussel full*/
#content section section section.caroussel aside {display:block;width:160%;height:12.5%;z-index:12;position:absolute;left:-30%;top:87.5%;text-align:center;background-image:none;/*background-image:url('http://www.hotel-metropol-paris.com/img/deco_bar_bas.png');*/background-color:transparent;}
#content section section section.caroussel aside button.photo_full{display:block;width:84px;height:60px;z-index:1;position:relative;margin: 0.1% auto 0 auto;padding:0;border:none;color:transparent;font-size:7px;}
#content section section section.caroussel aside button.photo_full{background-image:url('http://www.hotel-metropol-paris.com/img/btn_full.png');background-repeat:no-repeat;background-size:cover;background-size: 90%;background-position: center 115%;background-color:transparent;}
#content section section.fullscreen section.caroussel.photo_in aside {background-image:url('http://www.hotel-metropol-paris.com/img/deco_bar_bas.png');background-repeat:no-repeat;background-size:cover;}
#content section section.fullscreen section.caroussel.photo_in aside.cadre{background-image:none;background-size:100% 100%;background-position:center;}
/*3d transform
#content section section aside.blockinfo{
transform: rotateY(45deg);-webkit-transform:rotateY(45deg);moz-transform: rotateY(45deg);os-transform: rotateY(45deg);ms-transform: rotateY(45deg);
perspective: 400;-webkit-perspective: 400;-moz-perspective: 400;-os-perspective: 400;-ms-perspective: 400;
transform-style:preserve-3d; -webkit-transform-style:preserve-3d; -moz-transform-style:preserve-3d; os-transform-style:preserve-3d; ms-transform-style:preserve-3d;
}
*/
/*animation text des page block */
#content section section.view.out_view aside.blockinfo {opacity:0.2;-moz-transition: all 1.0s ease-in-out 1s;-webkit-transition: all 1.0s ease-in-out 1s;transition: all 1.0s ease-in-out 1s;}
#content section section.view.in_view aside.blockinfo {opacity:0.9;-moz-transition: all 1.5s ease-in-out 1s;-webkit-transition: all 1.5s ease-in-out 1s;transition: all 1.5s ease-in-out 1s;}
#content section section aside.blockinfo.in {top:5%;-moz-transition: all 1.0s ease-in-out 1s;-webkit-transition: all 1.0s ease-in-out 1s;transition: all 1.0s ease-in-out 1s;}
#content section section aside.blockinfo.out {top:110%;-moz-transition: all 1.5s ease-in-out 1s;-webkit-transition: all 1.5s ease-in-out 1s;transition: all 1.5s ease-in-out 1s;}
#content section section nav.blocknav.in{top:0%;-moz-transition: all 1.0s ease-in-out 1s;-webkit-transition: all 1.0s ease-in-out 1s;transition: all 1.0s ease-in-out 1s;}
#content section section nav.blocknav.out{top:110%;-moz-transition: all 1.0s ease-in-out 1s;-webkit-transition: all 1.0s ease-in-out 1s;transition: all 1.0s ease-in-out 1s;}
/*News*/
#content section section nav.blocknav article.news {display:inline-block;position:relative;width:90%;height:30%;margin:3% 0 0 0;padding:0;left: 5%;background-image: url('http://www.hotel-metropol-paris.com/img/fond-news.jpg');background-size:cover;background-size:100% 100%;background-repeat:no-repeat;background-position:center;}
#content section section nav.blocknav article.news div.news_titre {display:block;position:absolute;width:90%;height:10%;margin:0;padding:0;top:5%;left: 5%;z-index: 4;}
#content section section nav.blocknav article.news div.news_titre h4{width:100%;height:100%;text-align:left;color:#fff;background-image: none;font-size:0.85em;padding: 0;margin: 1.5% 0 0 0;}
#content section section nav.blocknav article.news img.news_photo {width:80%;height:60%;position:absolute;top:30%;left:10%;margin:0;padding:0;display:block;z-index: 1;}
#content section section nav.blocknav article.news aside.news_content {display:none;width:90%;height:55%;text-align:left;margin:0;padding:0;top:40%;left: 5%;color:#fff;z-index: 3;position:absolute;background-image: none;font-size:0.6em;}
#content section section nav.blocknav article.news aside.news_content p {margin: 0;padding: 0;}
#content section section nav.blocknav article.news section {display:none;}
/*News fullscreen*/
/*#content section section nav.blocknav.big{width:100%;height:100%;top:0;position:absolute;z-index:80;left:0;display:block;}*/
#content section section nav.blocknav.big article.news.bignews{display:block;position:relative;width:100%;height:90%;margin:3% 0 0 0;padding:0;left: 5%;z-index:5;}
#content section section nav.blocknav.big article.news.hidenews {display:none;position:relative;width:100%;height:30%;margin:3% 0 0 0;padding:0;left: 5%;z-index:2;}
#content section section nav.blocknav aside#news_background{display:none;width:100%;height:100%;position:absolute;top:0%;left:0;background-color:#000;z-index: 3;opacity:0.85;}
#content section section nav.blocknav section#btn_newshide {display:none;position:absolute;background-color:transparent;}
#content section section nav.blocknav.big section#btn_newshide {top:82.5%;width:100%;left:5%;height:15%;text-align:center;border:none;display:block;position:absolute;background-color:transparent;z-index:80;}
#content section section nav.blocknav.big section#btn_newshide button {top:15%;width:90%;left:5%;height:70%;text-align:center;border:none;display:block;position:absolute;border:none;color: #fff;}
#content section section nav.blocknav.big article.news.bignews aside.news_content {display:block;width: 90%;height: 50%;text-align: left;margin: 0;padding: 0;top: 20%;left: 5%;color: #fff;z-index: 2;position: absolute;background-image: none;font-size: 0.8em;}
#content section section nav.blocknav.big article.news img.news_photo {width:80%;height:20%;position:absolute;top:70%;left:10%;margin:0;padding:0;display:block;z-index: 1;}
/*zonin g precis nombre de page image par categorie*/
#content section section section.caroussel.hotel section ul.photo_a {width:100%;}
#content section section section.caroussel.hotel section ul.photo_a li{width:90%;margin:0 5%;}
#content section section section.caroussel.chambre section ul.photo_a {width:100%;}
#content section section section.caroussel.chambre section ul.photo_a li{width:90%;margin:0 5%;}
#content section section section.caroussel.access section ul.photo_a {width:100%;}
#content section section section.caroussel.access section ul.photo_a li{width:90%;margin:0 5%;}
#content section section section.caroussel.resa section ul.photo_a {width:100%;}
#content section section section.caroussel.resa section ul.photo_a li{width:90%;margin:0 5%;}
#content section section section.caroussel.hotel section ul{width:700%;}
#content section section section.caroussel.hotel section ul li{
width: calc( 100% / 7 );
height: 90%;top: 5%;margin:0;
}
#content section section section.caroussel.chambre section ul{width:700%;}
#content section section section.caroussel.chambre section ul li{
width: calc( 100% / 7);
margin: 0;
height: 90%;
top: 5%;
}
#content section section section#photo_chambre_simple ul{}
#content section section section#photo_chambre_double ul{width:1100%;}
#content section section section#photo_chambre_double ul li{
width: calc( 100% / 11 );
margin: 0;
}
#content section section section#photo_chambre_pmr ul {
width: 500%;
}
#content section section section#photo_chambre_pmr ul li{
width: calc( 100% / 5 );
margin: 0;
}
#content section section section#photo_chambre_triple ul{
width:400%;
}
#content section section section#photo_chambre_triple ul li{
width: calc( 100% / 4 );
margin: 0;
}
#content section section section.caroussel.more section ul{width:300%;}
#content section section section.caroussel.more section ul li{width:30.0%;margin:0 1.66%;}
#content section section section.caroussel.around section ul{width:1200%;}
#content section section section.caroussel.around section ul li{width:7.5%;margin:0 0.416%;}
#content section section section.caroussel.access section ul{width:1000%;}
#content section section section.caroussel.access section ul li{width:9.0%;margin:0 0.490%;}
#content section section section.caroussel.resa section ul{width:100%;}
#content section section section.caroussel.resa section ul li{width:100%;margin:0;}
#content section section.fullscreen section.caroussel.hotel section {width:100%;margin:0 0%;}
#content section section.fullscreen section.caroussel.hotel section ul.photo_a li{width:100%;margin:0 0%;}
#content section section.fullscreen section.caroussel.chambre section ul.photo_a li{width:100%;margin:0 0%;}
#content section section.fullscreen section.caroussel.chambre section {width:100%;margin:0 0%;}
#content section section.fullscreen section#photo_chambre_simple{width:100%;margin:0 0%;}
#content section section.fullscreen section#photo_chambre_double{width:100%;margin:0 0%;}
#content section section.fullscreen section#photo_chambre_triple{width:100%;margin:0 0%;}
#content section section.fullscreen section.caroussel.access section ul.photo_a li{width:100%;margin:0 0%;}
#content section section.fullscreen section.caroussel.access section {width:100%;margin:0 0%;}
#content section section.fullscreen section.caroussel.more section{width:100%;margin:0 0%;}
#content section section.fullscreen section.caroussel.around section{width:100%;margin:0 0%;}
#content section section.fullscreen section.caroussel.resa section{width:100%;margin:0 0%;}
#content section section.fullscreen section.caroussel.resa section ul.photo_a li{width:100%;margin:0 0%;}
#content section section.fullscreen section.caroussel.resa{height:85%;top:5%;}
#content section section.fullscreen section.caroussel.hotel section ul.photo_b li{width:14.2857142857%;height: 100%;top: 0;left:initial;z-index: 4;margin:0;max-height:initial;max-width:initial;}
/* photo Chambre fullscreen*/
#content section section.fullscreen section.caroussel.chambre section ul.photo_b li{width:12.5%;height: 100%;top: 0;left:initial;z-index: 4;margin:0;max-height:initial;max-width:initial;}
#content section section.fullscreen section#photo_chambre_simple{width:100%;}
#content section section.fullscreen section#photo_chambre_double{width:100%;}
#content section section.fullscreen section#photo_chambre_triple{width:100%;}
#content section section.fullscreen section.caroussel.more section ul.photo_b li{width:33.3333333%;height: 100%;top: 0;left:initial;z-index: 4;margin:0;max-height:initial;max-width:initial;}
#content section section.fullscreen section.caroussel.around section ul.photo_b li{width:8.33333333333%;height: 100%;top: 0;left:initial;z-index: 4;margin:0;max-height:initial;max-width:initial;}
#content section section.fullscreen section.caroussel.access section ul.photo_b li{width:10%;height: 100%;top: 0;left:initial;z-index: 4;margin:0;max-height:initial;max-width:initial;}
/*zonning inner access list des lieux*/
#content section section section.caroussel.access section ul li div.text_content {display:block;z-index:20;position:absolute;width:85%;height:80%;top:10%;left:7.5%;}
#content section section section.caroussel.access section ul li div.text_content p{display:block;z-index:21;position:relative;width:90%;height:auto;top:5%;left:5%;color:#fff;}
#content section section section.caroussel.access section ul li div.text_content h1,
#content section section section.caroussel.access section ul li div.text_content h2,
#content section section section.caroussel.access section ul li div.text_content h3,
#content section section section.caroussel.access section ul li div.text_content h4,
#content section section section.caroussel.access section ul li div.text_content h5
{display:block;z-index:21;position:relative;width:90%;height:auto;top:5%;left:5%;color:#fff;}
/*zonning cadre formulaire*/
#btn_form{display: block;width: 85%;height: 80%;top: 10%;left: 7.5%;color: white;z-index: 5;background-color: transparent;position: absolute;}
#block_formulaire{display:block;width: 85%;height: 80%;top: 10%;left: 7.5%;margin: 0;padding: 0;z-index:20;position: absolute;}
#block_formulaire {background-image: url("http://www.hotel-metropol-paris.com/img/deco_bar_left.png");background-position:center;background-size:contain;}
#block_formulaire{background-image:none;background-position:0 0;background-size:100% 100%;}
#block_formulaire #formulaire {height:85%;width:90%;top:5%;left:5%;position:absolute;}
#block_formulaire fieldset{border:none;color:transparent;font-size:10px;}
#block_formulaire fieldset#fseta{width:100%;height:20%;margin:0;padding:0;}
#block_formulaire fieldset#fsetb{width:100%;height:20%;margin:0;padding:0;}
#block_formulaire fieldset#fsetc{width:100%;height:40%;margin:0;padding:0;}
#block_formulaire fieldset#fsetd{width:100%;height:20%;margin:0;padding:0;}
#block_formulaire #formulaire #lnom{width:17.5%;padding:0;position:relative;color:#eee;text-align:right;}
#block_formulaire #formulaire #nom{width:24%;padding:0;position:relative;color:#222;}
#block_formulaire #formulaire #lprenom{width:22%;padding:0;position:relative;color:#eee;text-align:right;}
#block_formulaire #formulaire #prenom{width:24%;padding:0;position:relative;color:#222;}
#block_formulaire #formulaire #lmail{width:17.5%;padding:0;position:relative;color:#eee;text-align:right;}
#block_formulaire #formulaire #email{width:24%;padding:0;position:relative;color:#222;}
#block_formulaire #formulaire #lphone{width:22%;padding:0;position:relative;color:#eee;text-align:right;}
#block_formulaire #formulaire #phone{width:24%;padding:0;position:relative;color:#222;}
#block_formulaire #formulaire #lmessage{width: 17.5%;
padding: 0;
position: absolute;
text-align: right; display: inline-block;
color: #eee;
top: 40%;}
#block_formulaire #formulaire textarea{width: 73.7%;
height: 35%;
padding: 0;
position: absolute;
display: inline-block;
color: #222;
left: 18.2%;}
#block_formulaire #formulaire #lsend{width: 20%;height: 60%;border:none;background-color:#444;border-radius:20px;color:#eee;
text-align: center;
padding: 0;
position: relative;
font-size: 10px;
left: 32.5%;
top: 15%;}
#block_formulaire #formulaire #lstop{width: 20%;height: 60%;border:none;background-color:#444;border-radius:20px;color:#eee;
text-align: center;
padding: 0;
position: relative;
font-size: 10px;
left: 35%;
top: 15%;}
#btn_form {font-size:small;margin:0 0;text-align:center;}
#btn_form button{font-size:small;margin:0 0;text-align:center;border:none;background-color:transparent;color:white;}
#btn_form button{display:block;position:absolute;top:0;left:0;width:100%;height:100%;}
#result{display:none;position:absolute;width:100%;height:100%;top: 0;left:0px; width: 100%;height: 100%;background-image: url("");background-position:0 0;background-size:100% 100%;z-index:99;text-align:center;vertical-align:center;}
#result h2 {margin:16%;font-size:16px;color:#fff;}
/*MAp google*/
div#map-canvas2{width:100%;z-index:60;}
/*zonning inner conntent*/
#content section section aside div.text_content{display:block;position:absolute;width:85%;height:auto;background-color:transparent;top:7.5%;left:7.5%;white-space:normal;overflow:auto;color:#eee;}
#content section section nav button{display:inline-block;position:relative;width:70%;height:30px;background-color:transparent;top:0;left:15%;white-space:normal;float:left;border:none;color:#fff;font-size:x-small;}
#content section section nav button{background-image: url("http://www.hotel-metropol-paris.com/img/btn_all.png");background-position:center;background-size:cover;background-repeat:no-repeat;background-size:100% 100%;}
#content section section nav button:focus{background-image: url("http://www.hotel-metropol-paris.com/img/btn_all2.png");}
#content section section nav button.active{background-image: url("http://www.hotel-metropol-paris.com/img/btn_all2.png");}
#content section section nav button:hover{background-image: url("http://www.hotel-metropol-paris.com/img/btn_all3.png");}
/*Zonig DES BOUTTON SOUUS MENU*/
#content section section nav button{width:70%;height:8%;top:8%;left:15%;}
#content section section nav button#btn_simple,
#content section section nav button#btn_double,
#content section section nav button#btn_triple{}
#content section section nav button#btn_ber,
#content section section nav button#btn_snak,
#content section section nav button#btn_roomservice,
#content section section nav button#btn_seminaire,
#content section section nav button#btn_dej,
#content section section nav button#btn_arriver,
#content section section nav button#btn_wifi{}
#content section section nav button#btn_autoura,
#content section section nav button#btn_autourb,
#content section section nav button#btn_autourc,
#content section section nav button#btn_autourd,
#content section section nav button#btn_autoure,
#content section section nav button#btn_autourf,
#content section section nav button#btn_autourg,
#content section section nav button#btn_autourh,
#content section section nav button#btn_autouri,
#content section section nav button#btn_autourj,
#content section section nav button#btn_autourk{}
#content section section nav button#btn_access,
#content section section nav button#btn_contact,
#content section section nav button#btn_paiement{}
/*fin de bouton sous menu*/
@media only screen and (min-width :1000px) {
/*module langue*/
#langues {display:block;position:absolute;width:auto;height:30px;right:10px;top:10px;z-index: 9999;}
#langues a.flag {width:auto;height:30px;color:#fff;font-size:14px;text-decoration:none;}
/*resa mobiule*/
#frame_container{width:85%;height:80%;z-index:98;margin:0;padding:0;display:none;position:absolute;top:10%;left:7.5%;overflow:auto;overflow-scrolling:scroll;-webkit-overflow-scrolling: touch; }
#iframe{width:100%;height:100%;z-index:99;margin:0;padding:0;display:none;position:absolute;top:0;left:0;overflow:auto;overflow-scrolling:scroll;-webkit-overflow-scrolling: touch; }
#frame_container_mobile{width:85%;height:80%;z-index:98;margin:0;padding:0;display:block;position:absolute;top:10%;left:7.5%;overflow:auto;overflow-scrolling:scroll;-webkit-overflow-scrolling: touch; }
#iframe_mobile{width:100%;height:100%;z-index:99;margin:0;padding:0;display:block;position:absolute;top:0;left:0;overflow:auto;overflow-scrolling:scroll;-webkit-overflow-scrolling: touch; }
#content section section nav button#btn_resamob{display:block;}
#content section section nav button#btn_resaa{display:none;}
/*zoning du contenu principalephoto cadrephoto*/
#content section section section{width:50%;left:25%;height:90%;top:5%;}
#content section section section.caroussel {width:60%;height:100%;top:0;left:20%;}
#content section section section.caroussel section {width: 100%;height: 100%;top:0;left:0;}
#content header.home_menu nav ul li button {background-size: 75% 60%;font-size:11px;}
/*menu bouton home*/
#content header.home_menu nav ul li button {background-size: 75% 60%;font-size:11px;}
/*news home et bienvenue*/
#content header aside {left: 16%;height: 16%;width:84%;top: 10%;}
#content header.top_menu aside {top: 45%;height: 17%;width: 100%;left: 0;text-align: center;}
#content header.home_menu aside {top: 17%;width: 100%;left: 0;text-align: center;}
#content header.home_menu aside.news_content {top: 10%;color: #efefef;width:50%;left:5%;font-size: 0.8em;}
#content header aside div.text_content p {display: inline;}
#content header article#text_home{top:21.5%;font-size: 17px;}
#content header.home_menu div#home_news{top:28%;height:40%;}
#content header.home_menu div#home_news article aside.news_content p {font-size:16px;}
#content header aside div.text_content p{font-size:16px;}
#content header.top_menu aside div.text_content p{font-size:14px;}
#content header.home_menu section {height:25%;width:100%;left:0;}
/*bouton nav home news*/
#content header.home_menu div#news_nav{top:28%;left:5%;width:5%;height:40%;}
}
@media only screen and (min-width :1000px) and (max-height :480px) {
#content section section section.caroussel aside button.photo_full{
background-position: center 140%;width: 40px;height: 30px;}
#content section section.fullscreen section.caroussel aside button.photo_full{background-position:center -36%;width: 60px;height: 50px;}
}
@media only screen and (min-width :1000px) and (min-height :481px) {
#content section section section.caroussel aside button.photo_full{
background-position: center 165%;width: 60px;height: 50px;}
#content section section.fullscreen section.caroussel aside button.photo_full{background-position:center -64%;}
/*home adjust*/
#content header.home_menu aside {top: 81px;width: 100%;left: 0;text-align: center;}
#content header.home_menu div#home_news {width:100%;left:0;border-radius:0px;/*border-left: 2px solid #FFA500;border-right: 2px solid #FFA500;*/ }
#content header.home_menu div#home_news article {
display: block;
height: 100%;
left: 0;
margin: auto;
position: relative;
top: 0;
white-space: nowrap;
width: 80%;
}
#content header.home_menu div#news_nav{max-height:260px;}
}
@media only screen and (min-width :1000px) and (min-height :520px) {
#content section section section{max-height:400px;}
#content section section section article{max-height: 318px;}
#content section section section.caroussel {max-height:none;}
#content section section section.caroussel section {max-height:none;}
#content section section section.caroussel section ul li{top:5%;}
}
@media only screen and (min-width :1000px) and (min-height :620px) {
#content section section section{top:8.5%;}
#content section section section.caroussel {top:0;}
#content section section section.caroussel section ul li{top:8.5%;}
}
@media only screen and (min-width :1000px) and (min-height :720px) {
#content section section section{top:12.5%;}
#content section section section.caroussel {top:0;}
#content section section section.caroussel section ul li{top:12.5%;}
}
@media only screen and (min-width :1000px) and (min-height :770px) {
#content section section section{top:15%;}
#content section section section.caroussel {top:0;}
#content section section section.caroussel section ul li{top:15%;}
}
@media only screen and (min-width :1000px) and (min-height :840px) {
#content section section section{top:17.5%;}
#content section section section.caroussel {top:0;}
#content section section section.caroussel section ul li{top:17.5%;}
}
@media only screen and (min-width :1120px) {
/*Modif page resa ordi fulll longueur*/
#background #photo_resa{width:80%;left:0;}
#background #scroller_photo_resa{width:100%;height:100%;}
#background #scroller_photo_resa ul{width:100%;height:100%;}
#background #scroller_photo_resa ul li{height: 100%;
margin: 0;
max-height: none;
max-width: none;
padding: 0;
position: absolute;
width: 100%;}
#background #scroller_photo_resa ul li aside {display:none;}
#background #nav_pagef {display:none;}
#background #photo_resa aside{display:none;}
/*resa ordi*/
#frame_container{width:100%;height:100%;z-index:98;margin:0;padding:0;display:block;position:absolute;top:0;left:0;overflow:auto;overflow-scrolling:scroll;-webkit-overflow-scrolling: touch; }
#iframe{width:100%;height:100%;z-index:99;margin:0;padding:0;display:block;position:absolute;top:0;left:0;overflow:auto;overflow-scrolling:scroll;-webkit-overflow-scrolling: touch; }
#frame_container_mobile{width:85%;height:80%;z-index:98;margin:0;padding:0;display:none;position:absolute;top:10%;left:7.5%;overflow:auto;overflow-scrolling:scroll;-webkit-overflow-scrolling: touch; }
#iframe_mobile{width:100%;height:100%;z-index:99;margin:0;padding:0;display:none;position:absolute;top:0;left:0;overflow:auto;overflow-scrolling:scroll;-webkit-overflow-scrolling: touch; }
#content section section nav button#btn_resamob{display:none;}
#content section section nav button#btn_resaa{display:block;}
}
@media only screen and (min-width :1400px) {
/*zoning du contenu principalephoto cadrephoto*/
#content section section section{width:50%;left:25%;height:90%;top:5%;}
#content section section section.caroussel {width:60%;height:100%;;top:0;left:20%;}
#content section section section.caroussel section {width: 100%;height: 100%;top:0;left:0;}
#content header.home_menu div#home_news {width:100%;max-height:260px;left:0;border-radius:0px;/*border-left: 2px solid #FFA500;border-right: 2px solid #FFA500;*/ }
#content header.home_menu div#home_news article {
display: block;
height: 100%;
left: 0;
margin: auto;
position: relative;
top: 0;
white-space: nowrap;
width: 70%;
}
#content header.home_menu div#news_nav{max-height:260px;}
}
@media only screen and (min-width :1400px) and (min-height :520px) {
#content section section section{max-height:440px;}
#content section section section article{max-height: 440px;}
#content section section section.caroussel {max-height:none;}
#content section section section.caroussel section {max-height:none;}
#content section section section.caroussel section ul li{top:5%;}
}
@media only screen and (min-width :1400px) and (min-height :620px) {
#content section section section{top:7.5%;}
#content section section section.caroussel {top:0;}
#content section section section.caroussel section ul li{top:7.5%;}
}
@media only screen and (min-width :1400px) and (min-height :720px) {
#content section section section{top:10%;}
#content section section section.caroussel {top:0;}
#content section section section.caroussel section ul li{top:10%;}
}
@media only screen and (min-width :1400px) and (min-height :800px) {
#content section section section{top:15%;}
#content section section section.caroussel {top:0;}
#content section section section.caroussel section ul li{top:15%;}
}
@media only screen and (min-width :1540px) {
/*zoning du contenu principalephoto cadrephoto*/
#content section section section{width:50%;left:25%;height:90%;top:5%;}
#content section section section.caroussel {width:60%;height:100%;;top:0;left:20%;}
#content section section section.caroussel section {width: 100%;height: 100%;top:0;left:0;}
}
@media only screen and (min-width :1540px) and (min-height :520px) {
#content section section section{max-height:540px;}
#content section section section article{max-height: 440px;}
#content section section section.caroussel {max-height:none;}
#content section section section.caroussel section {max-height:none;}
#content section section section.caroussel section ul li{top:5%;}
}
@media only screen and (min-width :1540px) and (min-height :840px) {
#content section section section{top:7.5%;}
#content section section section.caroussel {top:0;}
#content section section section.caroussel section ul li{top:7.5%;}
}
@media only screen and (min-width :1680px) {
/*zoning du contenu principalephoto cadrephoto*/
#content section section section{width:50%;left:25%;height:90%;top:5%;}
#content section section section.caroussel {width:60%;height:100%;;top:0;left:20%;}
#content section section section.caroussel section {width: 100%;height: 100%;top:0;left:0;}
#content section section section.caroussel section ul.photo_a li{margin:0 1%;}
#content section section section.caroussel.hotel section ul.photo_a{width:100%;}
#content section section section.caroussel.chambre section ul.photo_a{width:100%;}
#content section section section.caroussel.access section ul.photo_a {width:100%;}
#content section section section.caroussel.hotel section ul.photo_a li{margin:0 8%;}
#content section section section.caroussel.chambre section ul.photo_a li{margin:0 8%;}
#content section section section.caroussel.access section ul.photo_a li{margin:0 8%;}
#content header.home_menu div#home_news {width:100%;max-height:260px;left:0;border-radius:0px;/*border-left: 2px solid #FFA500;border-right: 2px solid #FFA500;*/ }
#content header.home_menu div#home_news article {
display: block;
height: 100%;
left: 0;
margin: auto;
position: relative;
top: 0;
white-space: nowrap;
width: 60%;
}
#content header.home_menu div#news_nav{max-height:260px;}
}
@media only screen and (min-width :1680px) and (min-height :520px) {
#content section section section{max-height:540px;max-width:845px;}
#content section section section article{max-height: 429px;max-width:710px;}
#content section section section.caroussel {max-height:none;max-width:none;}
#content section section section.caroussel section {max-height:none;max-width:none;}
#content section section section.caroussel section ul li{max-height:unset;max-width:unset;margin:0;}
}
@media only screen and (min-width :1680px) and (min-height :840px) {
#content section section section{top:7.5%;}
#content section section section.caroussel {top:0;}
#content section section section.caroussel section ul li{top:7.5%;}
}
@media only screen and (min-width :1710px) {
#content section section section{left:25.25%;}
#content section section section.caroussel.hotel section ul.photo_a{width:100%;}
#content section section section.caroussel.chambre section ul.photo_a{width:100%;}
#content section section section.caroussel.access section ul.photo_a {width:100%;}
#content section section section.caroussel.hotel section ul.photo_a li{margin:0 9%;}
#content section section section.caroussel.chambre section ul.photo_a li{margin:0 9%;}
#content section section section.caroussel.access section ul.photo_a li{margin:0 9%;}
}
@media only screen and (min-width :1725px) {
#content section section section{left:25.45%;}
}
@media only screen and (min-width :1740px) {
#content section section section{left:25.60%;}
#content section section section.caroussel section ul.photo_a li{margin:0 1.3%;}
#content section section section.caroussel.hotel section ul.photo_a{width:100%;}
#content section section section.caroussel.chambre section ul.photo_a{width:100%;}
#content section section section.caroussel.access section ul.photo_a {width:100%;}
#content section section section.caroussel.hotel section ul.photo_a li{margin:0 9%;}
#content section section section.caroussel.chambre section ul.photo_a li{margin:0 9%;}
#content section section section.caroussel.access section ul.photo_a li{margin:0 9%;}
}
@media only screen and (min-width :1760px) {
#content section section section{left:25.80%;}
}
@media only screen and (min-width :1780px) {
#content section section section{left:26.25%;}
#content section section section.caroussel.hotel section ul.photo_a{width:100%;}
#content section section section.caroussel.chambre section ul.photo_a{width:100%;}
#content section section section.caroussel.access section ul.photo_a {width:100%;}
#content section section section.caroussel.hotel section ul.photo_a li{margin:0 9%;}
#content section section section.caroussel.chambre section ul.photo_a li{margin:0 9%;}
#content section section section.caroussel.access section ul.photo_a li{margin:0 9%;}
}
@media only screen and (min-width :1800px) {
#content section section section{left:26.5%;}
#content header.home_menu div#home_news {width:100%;max-height:260px;left:0;border-radius:0px;/*border-left: 2px solid #FFA500;border-right: 2px solid #FFA500;*/ }
#content header.home_menu div#home_news article {
display: block;
height: 100%;
left: 0;
margin: auto;
position: relative;
top: 0;
white-space: nowrap;
width: 50%;
}
#content header.home_menu div#news_nav{max-height:260px;}
}
@media only screen and (min-width :1820px) {
#content section section section{left:26.8%;}
/*#content section section section.caroussel section ul.photo_a li{margin:0 12.5%;}*/
}
@media only screen and (min-width :1840px) {
#content section section section{left:27.4%;}
}
@media only screen and (min-width :1880px) {
#content section section section{left:27.8%;}
}
@media only screen and (min-width :1900px) {
#content section section section{left:28.2%;}
#content section section section.caroussel.hotel section ul.photo_a{width:100%;}
#content section section section.caroussel.chambre section ul.photo_a{width:100%;}
#content section section section.caroussel.access section ul.photo_a {width:100%;}
#content section section section.caroussel.hotel section ul.photo_a li{margin:0;}
#content section section section.caroussel.chambre section ul.photo_a li{margin:0;}
#content section section section.caroussel.access section ul.photo_a li{margin:0;}
}
@media only screen and (min-width :1940px) {
#content section section section{left:28.70%;}
}
@media only screen and (min-width :1980px) {
#content section section section{left:29.5%;}
}
@media only screen and (max-width :1000px) {
/*resa ordi*/
#frame_container{width:85%;height:80%;z-index:98;margin:0;padding:0;display:none;position:absolute;top:10%;left:7.5%;overflow:auto;overflow-scrolling:scroll;-webkit-overflow-scrolling: touch; }
#iframe{width:100%;height:100%;z-index:99;margin:0;padding:0;display:none;position:absolute;top:0;left:0;overflow:auto;overflow-scrolling:scroll;-webkit-overflow-scrolling: touch; }
#frame_container_mobile{width:85%;height:80%;z-index:98;margin:0;padding:0;display:block;position:absolute;top:10%;left:7.5%;overflow:auto;overflow-scrolling:scroll;-webkit-overflow-scrolling: touch; }
#iframe_mobile{width:100%;height:100%;z-index:99;margin:0;padding:0;display:block;position:absolute;top:0;left:0;overflow:auto;overflow-scrolling:scroll;-webkit-overflow-scrolling: touch; }
#content section section nav button#btn_resamob{display:block;}
#content section section nav button#btn_resaa{display:none;}
#content section section section.caroussel aside {
z-index: 80;
}
#content section section nav{width:100%;height:20%;top:80%;left:0%;}
#content section section section{width: 65%;height: 70%;top: 5%;left: 5%;}
#content section section aside{width:25%;height:80%;top:0;left:75%;}
#content section section nav{text-align:center;}
#content section section nav button{width:8%;height:80%;top:10%;margin:auto;left: 5%;}
#content section section section.caroussel {width:75%;height:80%;;top:0;left:0;}
#content section section section.caroussel section {width: 100%;height: 100%;top:0;left:0;}
/*Bouton fullscreen ajustement*/
#content section section section.caroussel aside button.photo_full{background-position: center 118%;width: 60px;height: 40px;}
#content section section.fullscreen section.caroussel aside button.photo_full{background-position: center -15%;}
/*zonning animation block nav */
#content section section nav.blocknav.in {top: 87.5%;height: 12.5%;}
#content section section aside.blockinfo.in {top:5%;}
#content section section nav.blocknav article.news {width:30%;height:100%;margin:1.8% 1.20% 0 1.20%;padding:0;left: 0;}
#content section section nav.blocknav article.news div.news_titre {width:90%;height:10%;margin:0;padding:0;top:5%;left: 5%;z-index: 3;}
#content section section nav.blocknav article.news div.news_titre h4{width:100%;height:100%;text-align:center;color:#fff;background-image: none;font-size:0.9em;padding: 0;margin: 6px 0 0 0;}
#content section section nav.blocknav article.news img.news_photo {width:100%;height:100%;position:absolute;top:0;left:0;margin:0;padding:0;display:block;z-index: 1;}
#content section section nav.blocknav article.news aside.news_content {width:90%;height:55%;top:40%;left: 5%;font-size:0.8em;}
#content section section nav.blocknav article.news aside.news_content p{margin:0;padding:0;}
#content section section nav.blocknav article.news aside.news_content {display:none;}
#content section section nav.blocknav.big article.news aside.news_content {display:block;}
#content section section nav.blocknav.big{width:100%;height:100%;top:0;position:absolute;z-index:80;left:0;display:block;}
#content section section nav.blocknav.big article.news.bignews {display: block;position: relative;width: 100%;height: 90%;margin: 3% 0 0 0;padding: 0;left: 0;z-index: 5;}
#content section section nav.blocknav.big article.news.bignews aside.news_content {text-align: left;font-size: 1em;}
#content section section nav.blocknav.big article.news img.news_photo {width: 60%;height: 30%;position: absolute;top: 60%;left: 20%;margin: 0;padding: 0;display: block;z-index: 1;}
#content section section nav.blocknav.big section#btn_newshide {top: 75%;width: 20%;left: 86%;height: 40%;z-index: 80;}
#content section section nav.blocknav article.news img.news_photo {
width: 80%;
height: 80%;
position: absolute;
top: 50%;
left: 10%;
margin: 0;
padding: 0;
display: none;
z-index: 1;
}
#content header aside {
width: 15%;
height: 60%;
top: 5%;
left: 85%;
}
/*menu bouton home*/
#content header.home_menu nav ul li button {background-size: 75% 60%;font-size:11px;}
/*news home et bienvenue*/
#content header aside {left: 16%;height: 16%;width:84%;top: 10%;}
#content header.top_menu aside {top: 45%;height: 17%;width: 100%;left: 0;text-align: center;}
#content header.home_menu aside {top: 20%;width: 100%;left: 0;text-align: center;}
#content header.home_menu aside.news_content {top: 10%;color: #efefef;width:50%;left:5%;font-size: 0.8em;}
#content header aside div.text_content p {display: inline;}
#content header article#text_home{top:21.5%;font-size: 14px;}
#content header.home_menu div#home_news{top:28%;height:40%;}
#content header.home_menu section {height:25%;width:100%;left:0;}
/*bouton plein ecran*/
#content section section section.caroussel aside button.photo_full{
background-position: 50% 140%;
width: 40px;
height: 30px;
}
#content header.home_menu div#home_news {width:100%;max-height:260px;left:0;border-radius:0px;/*border-left: 2px solid #FFA500;border-right: 2px solid #FFA500;*/ }
#content header.home_menu div#home_news article {
display: block;
height: 100%;
left: 0;
margin: auto;
position: relative;
top: 0;
white-space: nowrap;
width: 80%;
}
#content header.home_menu div#news_nav{max-height:260px;}
}
#content header.home_menu div#news_nav {
top: 28%;
left: 5%;
width: 5%;
height: 40%;
}
@media only screen and (max-width :1000px) and (min-height :400px) {
#content header.home_menu aside {top: 80px;width: 100%;left: 0;text-align: center;}
}
@media only screen and (max-width :1000px) and (min-height :600px) {
/*petite Tablette vertical et phone */
#content section section nav{width:100%;height:12.5%;top:87.5%;left:0%;}
#content section section section{width:80%;height:50%;top:5%;left:10%;}
#content section section aside{width:100%;height:27.5%;top:60%;;left:0%;}
#content section section section.caroussel {width:100%;height:60%;;top:0;left:0;}
#content section section section.caroussel section {width: 100%;height: 100%;top:0;left:0;}
#content section section nav.blocknav.in {top: 87.5%;height: 15%;}
#content section section aside.blockinfo.in {top: 60%;}
#content section section nav.blocknav.big{width:100%;height:100%;top:0;position:absolute;z-index:80;left:0;display:block;}
#content section section nav.blocknav article.news img.news_photo {
width: 80%;
height: 80%;
position: absolute;
top: 50%;
left: 10%;
margin: 0;
padding: 0;
display: none;
z-index: 1;
}
}
@media only screen and (max-width :780px) {
#content section section nav{width:100%;height:20%;top:80%;left:0%;}
#content section section section{width: 60%;height: 70%;top: 5%;left: 5%;}
#content section section aside{width:30%;height:80%;top:0;left:70%;}
/*logo*/
#content header.home_menu section {height:20%;width:100%;left:0;}
#content section section section.caroussel {width:70%;height:80%;;top:0;left:0;}
#content section section section.caroussel section {width: 100%;height: 100%;top:0;left:0;}
#content section section aside.blockinfo.in {
top: 5%;
}
#content header.home_menu nav ul li button {background-size: 80% 60%;font-size:11px;}
/*news home et bienvenue*/
#content header aside {left: 16%;height: 16%;width:84%;top: 10%;}
#content header.top_menu aside {top: 45%;height: 17%;width: 100%;left: 0;text-align: center;}
#content header.home_menu aside {top: 15%;width: 100%;left: 0;text-align: center;}
#content header.home_menu aside.news_content {top: 10%;color: #efefef;width:50%;left:5%;font-size: 0.8em;}
#content header aside div.text_content p {display: inline;}
#content header article#text_home{top:17.5%;font-size: 14px;}
#content header.home_menu div#home_news{top:28%;height:40%;}
}
@media only screen and (max-width :780px) and (min-height :540px) {
/*petite Tablette vertical et phone */
#content section section nav{width:100%;height:12.5%;top:87.5%;left:0%;}
#content section section section{width: 80%;height: 50%;top: 5%;left: 10%;}
#content section section aside{width:100%;height:27.5%;top:60%;;left:0%;}
#content section section section.caroussel {width:100%;height:60%;;top:0;left:0;}
#content section section section.caroussel section {width: 100%;height: 100%;top:0;left:0;}
#content section section aside.blockinfo.in {top: 60%;}
#content header article#text_home{top:17.5%;}
#content header.home_menu aside {top: 82px;width: 100%;left: 0;text-align: center;}
}
@media only screen and (max-width :680px) {
#content section section nav{width:100%;height:12.5%;top:87.5%;left:0%;}
#content section section section{width: 80%;height: 50%;top: 5%;left: 10%;}
#content section section aside{width:100%;height:27.5%;top:60%;;left:0%;}
#content section section section.caroussel {width:100%;height:60%;;top:0;left:0;}
#content section section section.caroussel section {width: 100%;height: 100%;top:0;left:0;}
#content section section aside.blockinfo.in {
top: 60%;
}
#content header.home_menu nav ul li button {background-size: 80% 60%;font-size:11px;}
}
@media only screen and (max-width :680px) and (max-height :420px) {
/*petite Tablette horizontale et phone */
#content section section nav{width:100%;height:20%;top:80%;left:0%;}
#content section section section{width:60%;height:70%;top:5%;left:5%;}
#content section section aside{width:30%;height:80%;top:0;left:70%;}
#content section section section.caroussel {width:70%;height:80%;;top:0;left:0;}
#content section section section.caroussel section {width: 100%;height: 100%;top:0;left:0;}
#content section section aside.blockinfo.in {
top: 5%;
}
}
@media only screen and (max-width :620px) {
#content header.home_menu section {height:15%;width:100%;left:0;}
#content header nav ul li button{font-size:0.6em;}
#content section section nav{width:100%;height:12.5%;top:87.5%;left:0%;}
#content section section section{width: 80%;height: 50%;top: 5%;left: 10%;}
#content section section aside{width:100%;height:27.5%;top:60%;;left:0%;}
#content section section section.caroussel {width:100%;height:60%;;top:0;left:0;}
#content section section section.caroussel section {width: 100%;height: 100%;top:0;left:0;}
#content section section aside.blockinfo.in {
top: 60%;
}
#content header aside {
width: 20%;
height: 60%;
top: 5%;
left: 80%;
}
#content header.home_menu nav ul li button {background-size: 85% 60%;font-size:10px;}
}
@media only screen and (max-width :620px) and (max-height :700px) {
#content section section section.caroussel aside button.photo_full{
background-position: center 140%;width: 48px;height: 36px;}
#content section section.fullscreen section.caroussel aside button.photo_full{background-position:center -36%;}
#content section section aside.blockinfo.in {
top: 60%;
}
}
@media only screen and (max-width :620px) and (max-height :580px) {
#content section section section.caroussel aside button.photo_full{
background-position: center 140%;width: 40px;height: 30px;}
#content section section.fullscreen section.caroussel aside button.photo_full{background-position:center -36%;}
#content section section aside.blockinfo.in {
top: 60%;
}
}
@media only screen and (max-width :620px) and (max-height :420px) {
/*petite Tablette horizontale et phone */
#content section section nav{width:100%;height:20%;top:80%;left:0%;}
#content section section section{width:50%;height:70%;top:7.5%;left:10%;}
#content section section aside{width:30%;height:80%;top:0;left:70%;}
#content section section section.caroussel {width:70%;height:80%;;top:0;left:0;}
#content section section section.caroussel section {width: 100%;height: 100%;top:0;left:0;}
#content section section aside.blockinfo.in {
top: 5%;
}
}
@media only screen and (max-width :420px) {
/*OGO POSITION*/
#content header section header{background-position:50% 50%;}
/*module langue*/
#langues {display:block;position:absolute;width:auto;height:30px;right:5px;top:5px;z-index: 9999;}
#langues a.flag {width:auto;height:30px;color:#fff;font-size:11px;text-decoration:none;}
#content header.home_menu section {height:12.5%;width:100%;left:0;}
#content header nav ul li button{font-size:0.5em;}
#content section section nav{width:100%;height:12.5%;top:87.5%;left:0%;}
#content section section section{width: 90%;height: 50%;top: 5%;left: 5%;}
#content section section aside{width:100%;height:27.5%;top:60%;;left:0%;}
#content section section section.caroussel {width:100%;height:60%;;top:0;left:0;}
#content section section section.caroussel section {width: 100%;height: 100%;top:0;left:0;}
#content section section aside.blockinfo.in {top: 60%;}
/*news home et bienvenue*/
#content header aside {left: 16%;height: 16%;width:84%;
top: 10%;}
#content header.top_menu aside {top: 45%;height: 17%;}
#content header.home_menu aside {top: 10%;}
#content header.home_menu aside.news_content {top: 10%;color: #efefef;width:50%;left:5%;
font-size: 0.8em;}
#content header aside div.text_content p {display: inline;}
#content header article#text_home{top:17%;font-size: 12px;}
#content header.home_menu div#home_news{top:25%;height:47%;}
/*boouton menu home et cadre*/
#content header.home_menu nav ul li button {background-size: 110% 60%;font-size:9px;}
#content header.home_menu div#news_nav {
top: 28%;
left: 0%;
width: 10%;
height: 40%;
}
}
@media only screen and (max-width :420px) and (max-height :420px) {
/*petite Tablette horizontale et phone */
#content section section nav{width:100%;height:20%;top:80%;left:0%;}
#content section section section{width:60%;height:70%;top:5%;left:5%;}
#content section section aside{width:30%;height:80%;top:0;left:70%;}
#content section section section.caroussel {width:70%;height:80%;;top:0;left:0;}
#content section section section.caroussel section {width: 100%;height: 100%;top:0;left:0;}
#content section section aside.blockinfo.in {
top: 5%;
}
}
@media only screen and (max-width :380px) {
#content header aside {width: 100%;
height: 16%;
top: 10%;
left: 15%;}
#content header.home_menu aside{height:8%;top:10%;}
/*boouton menu home et cadre*/
#content header.home_menu nav ul li button {background-size: 110% 60%;font-size:8px;}
}
@media only screen and (max-width :340px) {
#content header aside {width: 100%;height: 10%;left: 9%;}
/*boouton menu home et cadre*/
#content header.home_menu nav ul li button {background-size: 110% 60%;font-size:7px;}
}
@media only screen and (max-width :325px) {
#content header aside {width: 100%;left: 7%;}
/*boouton menu home et cadre*/
#content header.home_menu nav ul li button {background-size: 110% 60%;font-size:7px;}
}