/*****************************************/ /* RESPONSIVE WEB DESIGN */ /*****************************************/ #navmain-trigger, #nav-mobile, #slick-wp { display: none;} .visible-tablet { display: none;} #btn-top { display: inline-block; text-decoration: none; width: 35px; height: 35px; background-color: #028fdc; color: #FFF; font-size: 24px; border-radius: 40px; position: fixed; bottom: 15px; right: 15px; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); text-align: center; padding-top: 0; line-height: 1.45em; } @media screen and (min-width: 767px) { #menu, #header_info { display: block !important;} } @media screen and (max-width: 1024px) { body { overflow-x: hidden;} * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} #conteneur, #footer { width: 750px;} #conteneur { background: url(bandeau-rwd.png) 0 12px no-repeat} #diapo { width: 695px; left: 25px; background: url(diapo-rwd.png) 0 0px no-repeat} .theme-default .nivoSlider img { width: 100% ;} .theme-default #slider{ width: 650px;} #logo { padding-left: 45px; height: 70px;} #logo img { width: 130px; height: auto; image-rendering: -moz-crisp-edges; image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: -webkit-optimize-contrast; -ms-interpolation-mode: nearest-neighbor; } #nav { left: 195px; top: 45px; right: auto; } #diapo { top: 125px;} #footer { width: -webkit-calc(100% - 20px); width: -moz-calc(100% - 20px); width: calc(100% - 20px);} #section { display: flex; flex-flow: column wrap;} #section #sectiondroite { order: 1;} #section #sectiondroite, #section #sectiongauche { width: 100%;} #section #sectiondroite { margin-top: 50px;} #sectiondroite h1 { text-align: left;} .theme-default a.nivo-nextNav { right: 20px;} #section .bloc.curve.home { width: 25% !important; float: left; margin: 0; background-color: transparent; height: auto; border: none; margin-bottom: 30px;} #section .bloc.curve.home:after, #section .bloc.curve.home:before { display: none;} #section .bloc.curve.home img { width: 100%; height: auto;} #section .container h2.acc_trigger { width: 100%;} #section .container { width: 665px;} #section .container .acc_container { width: 98%;} #sectiondecouverte { width: 100%; order: 1; margin-top: 30px;} .decouverte-img { float: left; } iframe { width: 100%;} #formcontact input[type=text] { width: 80%; padding: 10px 15px; border: 1px solid #CCC; -webkit-appearance: none;} #formcontact textarea { width: 100%; padding: 10px 15px; border: 1px solid #CCC; -webkit-appearance: none;} .decouverte-img.except img { height: 279px; } #listefleche li { min-height: 30px;} #section .container h2.acc_trigger { background: url(h2_trigger_a-rwd.png) no-repeat; } #section .container h2.active { background-position: left bottom !important;} #section .cadrebleu { width: 315px; background: url(encartbleu-rwd.png) 0 0px no-repeat !important;} #section .cadrebeige { width: 315px; background: url(encartbeige-rwd.png) 0 0px no-repeat !important;} .visible-tablet { display: block;} .hidden-tablet { display: none;} .theme-default a.nivo-nextNav { right: 20px !important;} .theme-default .nivo-controlNav { position: absolute!important; bottom: 24px!important; right: 18px!important; } input[type=submit] { background-color: #028fdc; color: #FFF; border: none; outline: none; display: inline-block; padding: 6px 15px !important; font-size: 16px; -webkit-appearance: none;} .except-cours { width: 50%; float: left;} .section-mid { width: 100%!important; } } @media screen and (max-width: 767px) { #header { background-color: #FFF;} #section { margin: 10px 15px;} #conteneur, #footer { width: 100%;} #conteneur, html { background-image: none; } #diapo { position: relative; top: auto; left: auto;} #section ul { margin-left: 10px;} img { max-width: 100%; height: auto;} #diapo { display: none;} #sectiondroite .actualite img { width: 85px;} #sectiondroite .actu_texte { padding: 0.3em 0px .6em 100px;} #logo { height: auto; padding: 10px 0 10px 15px; -webkit-box-shadow: 0 0 7px rgba(0,0,0,0.2); -moz-box-shadow: 0 0 7px rgba(0,0,0,0.2); box-shadow: 0 0 7px rgba(0,0,0,0.2);} #logo img { width: 90px;} #header { height: auto;} #nav { display: none; position: relative; top: auto; left: auto; width: 100%;} #nav li { float: none; display: block; width: 100%; padding: 0; margin: 0; border: none !important; border-top: 1px solid #FFF !important;} #nav li a { display: block; width: 100%; padding: 10px 15px; background-color: #dbcfd0;} #nav li.lien_actif a { background-color: #028fdc; color: #FFF;} #navmain-trigger { display: block; position: absolute; top: 0; right: 0; z-index: 9; height: 76px; width: 76px; padding: 5px 6px 5px 6px; border: none; background-color: #028fdc; cursor: pointer;} #btn-hamburger-wp { width: 30px; height: inherit; text-align: center; } #btn-hamburger { display: block; margin: 0 auto; width: 40px; height: 20px; position: relative; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer;} #btn-hamburger span { display: block; position: absolute; height: 4px; width: 100%; background: #fff; border-radius: 15px; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;} #btn-hamburger span:nth-child(1) { top: 0px; } #btn-hamburger span:nth-child(2), #btn-hamburger span:nth-child(3) { top: 10px;} #btn-hamburger span:nth-child(4) { top: 20px;} .menu-open #btn-hamburger span:nth-child(1) { top: 18px;width: 0%;left: 50%;} .menu-open #btn-hamburger span:nth-child(2) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .menu-open #btn-hamburger span:nth-child(3) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg);} .menu-open #btn-hamburger span:nth-child(4) { top: 18px; width: 0%; left: 50%; } #footer { position: relative; bottom: auto; left: auto; margin: 0;} #footer #bambou { position: relative; top: auto; right: auto; background: none; text-align: left; width: 100%; padding-left: 15px; } #footer #bambou p img { vertical-align: middle; margin: 0;} #footer #menupied { width: 100%; margin: 0; padding: 10px 15px; text-align: left; } #footer #reseaux { width: 30px; float: none; margin: 0; text-align: center; position: absolute; right: 15px; top: 25px;} #footer #reseaux a { display: inline-block;} #footer #menupied li { display: inline-block; } #section { padding-bottom: 15px;} .floatright.except, .floatleft.except { float: none;} #section #sectiondroite { margin-top: 30px; } #section .cadrebeige, #section .cadrebleu { margin: 10px auto; position: relative; left: -10px;} #section .cadrebleu { margin-bottom: 30px !important;} #section .btn-card { margin: 10px auto !important;display: block;} #section .bloc.curve.home { width: 50% !important; margin-bottom: 5px;} #slick-wp { display: block; background-color: #f3f0eb;} #slick img { width: 100%;} .slick-dots li.slick-active button { background-color: #028fdc !important; } .slick-dots { text-align: center; margin-top: 15px; margin-bottom: 30px;} .slick-dots li { display: inline-block; margin: 0 2px;} .slick-dots button { border: none; line-height: 0em; display: block; background: #8a7576 !important; width: 20px; height: 20px; color: #FFF; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px;} #section .container { width: 100%;} #section .container h2.acc_trigger { border-right: 1px solid #938073; max-width: 665px;} #section .container h2.active { border-right: 1px solid #54a4f2;} #section .container .acc_container { width: calc(100% - 12px); } #section .container .acc_container img { float: none;} form { margin: 10px 0 !important;} #formcontact input[type=text] { width: 100%;} .decouverte-img:not(.except) img { width: 50%; display: inline-block; vertical-align: top;} .except-cours {width: auto;} }