/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, /*em,*/ img, ins, kbd, q, s, samp, small, strike, /*strong,*/ sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } strong{font-weight:bold;} /***************************** PopUp ************************/ @keyframes popUpAp { 0%{opacity:0;} 80%{opacity:0} 100%{opacity:1;} } #popUp{position:fixed; z-index:99999; width:100%; height:100%; background-color:rgba(0,0,0,0.4); animation-name : popUpAp; animation-duration : 15.0s; } #contenuPop{position:absolute;top: calc(40% - 160px) ; left:30% ; width:30%; padding:50px; background-color:rgba(256,256,256,1); border-radius: 5px; box-shadow: 5px 5px 10px #222222; font-size:1.6em;} #popFermeture{position: absolute;right: -18px;top: -18px; cursor:pointer;} #contenuPopInterne{overflow:auto;} #contenuPop a:active, #contenuPop a:visited{text-decoration:none; color:#008080;} /************************************* GLOBAL ****************************************************************/ /*body{/*font-family:'Raleway', Arial, Helvetica, sans-serif;font-family: "Sawarabi Mincho"; font-size:1em; color:#333; font-weight:lighter;}*/ body{font-family: "Noto Sans Japanese", Arial, Helvetica, sans-serif; font-size:1em; color:#333; font-weight:lighter;} /*body{font-family: "Mplus 1p", Arial, Helvetica, sans-serif; font-size:1em; color:#333; font-weight:lighter;}*/ /*body{font-family: "Nico Moji", Arial, Helvetica, sans-serif; font-size:1em; color:#333; font-weight:lighter; }*/ nav{position:fixed; z-index:9999; width:100%; height:33px; top:0; font-family:Arial, Helvetica, sans-serif; /*background: rgba(255,255,255,1); background:-moz-linear-gradient(left, rgba(255,255,255,0) 21%, rgba(246,246,246,1) 40% ); background:-webkit-gradient(left top, right top, color-stop(21%, rgba(255,255,255,0)), color-stop(40%, rgba(246,246,246,1))); background:-webkit-linear-gradient(left, rgba(255,255,255,0) 21%, rgba(246,246,246,1) 40%); background: -o-linear-gradient(left, rgba(255,255,255,0) 21%, rgba(246,246,246,1) 40%); background: -ms-linear-gradient(left, rgba(255,255,255,0) 21%, rgba(246,246,246,1) 40%); background:linear-gradient(to right, rgba(255,255,255,0) 21%, rgba(246,246,246,1) 40%);*/ /*box-shadow: 0px 1px 6px 0px #656565;*/ } /*nav ul{margin-right:5.555555555555556%;} à remettre lors de la réaparition des drapeaux : */ nav li a {float:right; border-radius:0px; margin-right:0.6%; margin-top:4px; padding:5px; color:#555; text-decoration:none; font-weight:600; } nav li a:first-child{padding-left:10px;} nav li a:hover{/*color:rgb(51,153,153);*/ background-color:rgba(54,104,174,0.8); color:#fff; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition:all 0.5s ease-out; -o-transition:all 0.5s ease-out; transition: all 0.5s ease-out; } header nav{position:absolute; background:none; text-align:right; right:5px; cursor:pointer;} #bienvenue{background-color:rgba(0,0,0,0.5);} #bandeau div ul li{background-color:#fff; margin-top:-4px } #bandeau div{ width:430px; box-shadow: 0 1px 6px 0 #656565; border-radius:0 0 0 3px; position: absolute;right:0; background-color: #ddd; text-align:right; } #Ch-enHaut, #Esp-enHaut, #Tour-enHaut, #Res-enHaut{top:25%;} #Ch-enBas, #Esp-enBas, #Tour-enBas, #Res-enBas{top:65%;} #Accss-enHaut{top:25%} #Acc-enBas, #Accss-enBas{top:65%} #fondSombre{width:100%; height:100%; position:fixed; /*top:0; left:0;*/ z-index:10000; background-color:rgba(0,0,0,0.85); display:none; } .credits{text-align:left; padding-left:20%;} .mentions{text-align:left!important;padding-left:20%; padding-right:20%; padding-top:100px; padding-bottom:100px; background-color:#fff;} video, iframe{max-width:100%;} /************* Ajouts 2017 *************/ #logo, #logoCh, #logoEsp, #logoAcc, #logoTour, #logoRes{position:absolute; top:40px; z-index:8888;} #retourTop{display:none; position:fixed; bottom:5px; right:5px; cursor:pointer;z-index:8889; opacity:0.7;-webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition:all 0.5s ease-out; -o-transition:all 0.5s ease-out; transition: all 0.5s ease-out; } #retourTop:hover{opacity:0.95;} #retourTop img{transform:scale(0.9);} .arrangement{/*display:none;*/} .ecran{height: calc(70vh); min-height:480px;} .ecran2{height:calc(100vh);min-height:480px;} .ecran25{height:calc(80vh);min-height:480px;} .ecran3{height:calc(60vh);min-height:480px;} .justif{text-align:justify;} .center{text-align:center;} .blanc{color:#fff;} .gris{color:#444;} .noir{color:#111;} .bleuVert{color:rgb(51,153,153);} .grand{font-size:3em;} .moyenMoins{font-size:1.5em;} .moyen{font-size:2.1em;} .moyenPlus{font-size:3em;} .toutPetit{font-size:0.8em;} .ombre{text-shadow: 2px 2px 5px #171717;} .guillemets{font-family:"Times New Roman", Times, serif; font-style:italic; font-size:2em;} .deuxColonnes{-moz-column-count: 2; -webkit-column-count: 2; column-count: 2;} .vignette3{display:inline-table; width:20%; line-height:1.5em;} /*.vignette3:nth-child(2), .vignette3:nth-child(3), .vignette3:nth-child(5){margin-left:5%;}*/ .vignette3:nth-child(4){margin-left:0;} .asc{ width:50px; transform:scale(0.9); -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition:all 0.5s ease-out; -o-transition:all 0.5s ease-out; transition: all 0.5s ease-out;} .asc img{opacity:0.3; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition:all 0.5s ease-out; -o-transition:all 0.5s ease-out; transition: all 0.5s ease-out;} .ascSpecial img{opacity:0.6;} .asc .indicateurs{opacity:0; -webkit-transition: all 0.8s ease-out; -moz-transition: all 0.8s ease-out; -ms-transition:all 0.8s ease-out; -o-transition:all 0.8s ease-out; transition: all 0.8s ease-out;} .asc:hover .indicateurs{opacity:1;} .asc img:hover{opacity:0.8; /*transform:scale(1.0);*/ } aside h3{color:rgb(51,153,153);} .indicateurs{opacity:1; color:#fff; padding:10px 0; right:5px; top:-35px; position:absolute; cursor:auto;} .versLeHaut ul li, .versLeBas ul li{font-size:0.9em; opacity:0.6} .versLeHaut ul li:last-child, .versLeBas ul li:first-child{font-size:1em; opacity:1;} /*.versLeBas ul li:nth-child(1){opacity:1;} .versLeBas ul li:nth-child(2){opacity:0.4; font-size:0.9em;} .versLeBas ul li:nth-child(3){opacity:0.4; font-size:0.9em;} .versLeBas ul li:nth-child(4){opacity:0.4; font-size:0.9em;} .versLeBas ul li:nth-child(5){opacity:0.4; font-size:0.9em;} .versLeBas ul li:nth-child(6){opacity:0.4; font-size:0.9em;}*/ .versLeBas{top:50px;;} .sensible{opacity:1; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition:all 0.5s ease-out; -o-transition:all 0.5s ease-out; transition: all 0.5s ease-out;} .sensible:hover{/*opacity:0.7;*/ transform:scale(1.05); } .vignette2{display:inline-table; width:40%; text-align:left;} .vignette2:nth-child(2n+1){margin-left:5%;} .centre{text-align:center;} .alignGauche{text-align:left; display:inline-block;} .bouton{border-radius:3px; /*font-weight:bold;*/ cursor:pointer; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition:all 0.5s ease-out; -o-transition:all 0.5s ease-out; transition: all 0.5s ease-out;} .bouton a{text-decoration:none;} header a{text-decoration:none;} .bouton:hover{border-radius:3px 30px 3px 30px; } .ligne{display:inline-block;} article{text-align:center;} header{text-align:center; min-height:100%} header h1{background-color:rgba(0,0,0,0.3); padding: calc(1em + 42px) 1em 1em; width:50%; margin:auto;} #section1 header h1{padding: calc(1em + 12px) 1em 1em;} /*section{background-color:rgba(255,255,255,0.0);}*/ /************************/ @keyframes apparition { 0%{opacity:0;} 30%{opacity:0.3} 100%{opacity:1;} } #section1{background : url(../images/SabineCibert1Grand.jpg) no-repeat center center fixed; background-size:cover; animation-name : apparition; animation-duration : 1.0s; } #verbatim{width:40%; margin:auto; line-height: 1.4em;} #accueil1{ padding-top:20%; text-align:center;} #accueil2{background-color:rgba(255,255,255,0.8); padding-top:100px; padding-bottom:100px;} #accueil2 img, #accueil3 img, #chambres2 img, #espaces2 img, #tourisme3 img{/*border-radius:100px;*/ text-align:center;} #accueil2 img{border:solid 1px;} #accueil3{background-color:rgba(255,255,255,1); text-align:center;} article aside{margin-top:50px; padding:20px;} #boutonLienVersSiteAnglais{padding:15px; width:205px;margin:auto;margin-top:2%;background-color:rgba(141,166,188,0.8);} #boutonContacter{padding:15px; width:205px; margin-left:calc(50% - 250px);margin-top:5%;background-color:rgba(107,107,152,0.8);} #boutonContacter:hover{ background-color:rgba(107,107,152,1);} #boutonDecouvrir{float:left; padding:15px;margin-left:calc(50% + 20px); margin-top:-62px; width:170px; background-color:rgba(57,104,174,0.8); } #boutonMentions{float:left; padding:11px;margin-left:calc(50% + 20px); margin-top:-63px; width:150px; background-color:rgba(255,153,0,1); font-size:1.3em} #boutonDecouvrir:hover{background-color:rgba(54,104,174,1);} #partenaires{/*position:absolute; right:10px; bottom:35px;*/width:280px; margin:20% 2% 2% auto;} #section2{background :url(../images/SabineCibert4Grand.jpg) no-repeat center center fixed; background-size:cover; margin-top:5%; position:relative;} #chambres1{position:relative;} #chambresEnImages{background-color:rgba(255,255,255,1);padding-bottom:5%} #chambresEnImages a{text-decoration:none;} #chambres2{background-color:#fff;} #chambres3{background-color:rgba(0,0,0,0.5);/* background:url(../images/overlays/06.png) repeat;*/ padding-top:5%; padding-bottom:5%;} article ul{text-align:left; margin-left:25%; margin-top:2%;} article ul li{margin-top:5%; width:60%} #boutonChambresImages, #boutonEspacesImages, #boutonTourismeImages{padding:15px; background-color:rgba(190,44,1,0.75); width:150px; margin-left:calc(50.8% - 100px);/*margin-top:30%;*/ } #boutonChambresImages{margin-top:30%;} #boutonChambresImages:hover, #boutonEspacesImages:hover, #boutonTourismeImages:hover, #boutonExpo:hover{background-color:rgba(190,44,1,1);} .boutonExpo{padding:15px; background-color:rgba(190,44,1,0.6); width:180px; margin-top:10px;font-size: 0.8em; text-align: center;} .boutonExpo:hover{background-color:rgba(190,44,1,1);} .cote{background-color:rgba(0,0,0,0.3); width:100px; position:absolute; right:0; top:0; display:none;} #section3{background :url(../images/SabineCibert3Grand.jpg) no-repeat center center fixed; background-size:cover; position:relative;animation-name : apparition; animation-duration : 1.0s;} #espaces1{position:relative;} #espaces1 #Esp-enHaut .indicateurs{top:-50px;} #espacesEnImages{background-color:rgba(255,255,255,1); margin-bottom:5%;} #espacesEnImages a{text-decoration:none;} #espaces header h1{background-color:rgba(0,0,0,0.3);} #espaces2{background-color:rgba(0,0,0,0.5); padding-bottom:20px;} #expositionsListe, #biographie{width:80%; margin:auto; text-align:left; color:#fff;} #expositionsListe ul li{text-decoration:none;} #biographie{color:#333; text-align:center;} #bioDetails{width:60%; margin:auto; text-align:left; line-height:1.5em;} #espace3{background-color:rgba(0,0,0,0.5); padding-top:5%; padding-bottom:5%;} #section4{background :url(../images/SabineCibert6Grand.jpg) no-repeat center center fixed; background-size:cover; animation-name : apparition; animation-duration : 1.0s;} #acces1{position:relative;} #acces1 #Accss-enHaut .indicateurs{top:-65px;} #acces header h1{background-color:rgba(0,0,0,0.4);} #section4-1{background-color:rgba(255,255,255,0.8); padding-top:5%; } #section4-2{background-color:rgba(255,255,255,0.95); padding-top:5%; padding-bottom:5%;} #section4-3{background-color:rgba(0,0,0,0.9); padding-top:5%; padding-bottom:0%;} #containerGoogleMap{width:50%; height:450px; margin:auto; position:relative;} #cache{width:100%; height:450px; position:absolute; cursor:pointer;} #containerGoogleMap iframe{width:100%; height:100%;} #prestVideo{} /*#acces2{margin-top:-10%;}*/ #tourisme{background :url(../images/tourisme/tourisme01.jpg) no-repeat center center fixed; background-size:cover; position:relative; } #tourisme1{position:relative;} #tourisme1 #Tour-enHaut .indicateurs{top:-80px;} #tourismeEnImages{background-color:rgba(255,255,255,0.7);padding-bottom:5%;} #tourismeEnImages a{text-decoration:none;} #tourisme2, #tourisme3{background-color:rgba(255,255,255,0.7);; padding-top:5%; padding-bottom:5%; padding-left: 25%;padding-right: 25%;line-height: 1.2em;} #tourisme header h1{background-color:rgba(0,0,0,0.1);} #tourisme3{background-color:rgba(255,255,255,1);} #tourisme3 ul li{width:auto;} #tourisme3 a{text-decoration:none; color:#666; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition:all 0.5s ease-out; -o-transition:all 0.5s ease-out; transition: all 0.5s ease-out;} #tourisme3 a:hover{background-color:rgb(51,153,153); color:#fff; padding:2px 3px;} #tourisme3 img a:hover{background-color:transparent!important;} #section5{background :url(../images/SabineCibert2Grand.jpg) no-repeat center center fixed; background-size:cover; position:relative; animation-name : apparition; animation-duration : 1.0s;} #reserver1{position:relative;} #reserver1 #Res-enHaut .indicateurs{top:-95px;} #reserver header h1{background-color:rgba(0,0,0,0.2);} #reserver2, #reserver3{background-color:rgba(0,0,0,0.7); overflow:hidden; color:#fff;} #containerIframe{position:relative; height:290px;} #containerIframe iframe{position:absolute; left:-32px; width:490px; height:290px;} #Rzone3 p{margin-top:5%;} #reserver2 a{text-decoration:none; color:#333;} #reserver2 a:hover{text-decoration:underline;} #wpcf7-f6-o1{} #wpcf7-f145-o1 p{margin-top:10px; font-size:0.8em;} #Rzone4 >p{margin-top:5%;} #Rzone4 p:last-child{font-size:0.7em; margin-top:0;} #Rzone3{} #Rzone4{margin:auto; margin-right:8%;margin-bottom:10%; text-align:right; width:40%;} /**************************************/ /******* diaporama *******************/ #swipebox-top-bar{top:90%!important;} #swipebox-title{padding-left:0!important; text-align:center!important;} #swipebox-slider .slide{height:90%!important;} #swipebox-overlay{background: rgba(0,0,0,0.4)!important;} /**************************************/ /******** formulaire *****************/ .wpcf7-form-control-wrap textarea, .wpcf7-form-control-wrap input{border:none; opacity:0.7; width:80%;color: #222222; font-size: 1em;} .wpcf7-form-control-wrap textarea{font-size:1.2em; padding-top:20px;} .wpcf7-form-control-wrap input{ height: 25px;} /*.your-name input{width:100px; border:none;}*/ .wpcf7-submit{padding:10px 20px; font-family:'Raleway', Arial, Helvetica, sans-serif; font-size:1.5em; background-color:rgba(112,53,37,1); color:#fff; border:none; border-radius:3px; cursor:pointer; margin-top:20px; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition:all 0.5s ease-out; -o-transition:all 0.5s ease-out; transition: all 0.5s ease-out;} .wpcf7-submit:hover{border-radius:3px 30px 3px 30px; opacity:0.95;} .screen-reader-response{display:none;} .wpcf7-not-valid-tip{display:block; color:#A00;} .wpcf7-validation-errors{color:#A00;} .wpcf7-mail-sent-ok{color:#44A09F; font-weight:bold;} .wpcf7-not-valid-tip-no-ajax{display:block; color:#A00;} footer{background-color:#333; color:#aaa; padding:15px 0px ; text-align:center; min-height:350px; position:relative;} footer a{color:#ccc; text-decoration:none;} footer a:hover{color:#eee; cursor:pointer;} #pourcelot{text-align:right; margin-top:25px; opacity:0.8; position:absolute; bottom:0; right:0;} #pourcelot:hover{opacity:1;} /************************************************************************************************************************************************************************************/ /******************************************************************************** Media Query **************************************************************************************/ /**********************************************************************************************************************************************************************************/ @media screen and (max-height:900px){ #partenaires{margin:10% 2% 2% auto; } } @media screen and (max-height:750px){ #partenaires{margin:5% 2% 2% auto ; } } @media screen and (max-width:1400px){ .vignette3{width:25%;} /*#partenaires{bottom:5%;}*/ #logoWatermark{left:-10px!important; } #tourisme3{padding-left:5%; padding-right:5%;} #tourisme2.moyen{font-size:1.8em;} #verbatim{width:50%;} #containerGoogleMap{width:60%;} } @media screen and (max-width:1200px){ #Rzone3{width:50%; margin-left: calc(50% - 420px);} #Rzone4{width:50%; margin-left: calc(50% - 420px);} } @media screen and (max-width:1080px){ #verbatim{width:70%;} #containerGoogleMap{width:70%;} } @media screen and (max-width:1025px){ #section1{background : url(../images/SabineCibert1Grand.jpg)no-repeat center center fixed, background-size:cover; animation-name : apparition; animation-duration : 1.0s; } #accueil1{margin-bottom:30%;} #partenaires{margin:15% auto;} } @media screen and (max-width:980px){ #bandeau{display:none;} .vignette3{width:35%;} header h1{padding:1em;} } @media screen and (max-width:800px){ /*.asc .indicateurs{opacity:0.8;}*/ .asc img{opacity:0.5;} #logo{top:0; left:calc(50% - 170px);} #accueil1{margin-bottom:30%;} #partenaires{margin:25% auto;} #tourisme3 ul li{width:100%;} #tourisme2, #tourisme3{padding: 5% 15%;} #espacesEnImages, #chambresEnImages{/*margin-bottom:8%*/} #tourismeEnImages{padding-bottom:8%;} #Rzone3, #Rzone4{width:60%; margin-left: calc(50% - 420px);} #verbatim{width:80%;} #containerGoogleMap{width:80%;} } @media screen and (max-width:650px){ #logo{transform:scale(0.8);} #logoWatermark{/*left:-30px!important;*/ transform:scale(0.4)!important;} #accueil{background : url(../images/gite/petit/gite-01.jpg) no-repeat center center fixed, url(../images/gite/gite-01-attente.jpg) no-repeat center center fixed ;background-size:cover;} #accueil1{margin-bottom:80%;} #chambres{background :url(../images/chambres/petit/chambres06.jpg) no-repeat center center fixed;background-size:cover;} #espaces{background :url(../images/espaces/petit/espaces09.jpg) no-repeat center center fixed;background-size:cover;} #espacesEnImages, #chambresEnImages{/*margin-bottom:15%*/} #acces{background :url(../images/espaces/petit/espaces02.jpg) no-repeat center center fixed;background-size:cover;} #acces3{padding-bottom:15%;} #tourisme{background :url(../images/tourisme/petit/tourisme01.jpg) no-repeat center center fixed;background-size:cover;} #tourismeEnImages{padding-bottom:15%;} #tourisme3{margin-bottom:10%;} #reserver{background :url(../images/gite/petit/gite-03.jpg) no-repeat center center fixed;background-size:cover;} #accueil1{padding-top:35%;} .grand, .moyenPlus{font-size:2em;} .moyenMoins{font-size:1.3em;} .moyen{font-size:1.5em;} #verbatim{width:90%; font-size:1.2em;} #boutonContacter{margin-left:calc(50% - 100px); margin-top:15%;} #boutonDecouvrir{margin-left:calc(50% - 100px); margin-top:20%;} #boutonLienVersSiteAnglais{margin-top:50%;} #partenaires{margin:60% auto;} article ul{margin-left:5%;} article ul li{margin-top:8%; width:100%;} #tourisme2, #tourisme3{padding: 5% 5%;} #tourisme2.moyen{font-size:1.5em;} .vignette2{width:90%;} .vignette2:nth-child(2n+1){margin-left:0;} /*#containerIframe{transform:scale(0.8); margin-left:-16%;}*/ /*#itea_widget_dispo.itea_widget_dispo_2mois{width:50%!important;}*/ #reserver2 aside .moyen{font-size:1.8em;} #Rzone3, #Rzone4{width:90%; margin-left:0;} #containerIframe iframe{/*left:0; width:100%;*/} .wpcf7-form-control-wrap textarea, .wpcf7-form-control-wrap input{width:95%;} } @media screen and (max-width:500px){ #containerIframe iframe{left:0; width:100%;} #verbatim{font-size:1em; width:90%;} #contenuPop{left:20%;} }