body { font-family: 'Poppins', sans-serif; }
.wrapper { display: flex; flex: 1; flex-direction: column; }
.reset_flex { flex: auto;}
.text_center { text-align: center; }
.inline_block { display: inline-block }
.bold { font-weight: bold; }
.text_right { float: right; }

/*.btn_maxoutil {display: block;position: fixed;bottom: 7%;right: 0; width: 100px; height: 80px; line-height: 80px; z-index: 1000; }*/
/*.btn_maxoutil img {max-width: 100%;vertical-align: middle;}*/

/*.btn_lhp {display: block;position: fixed;bottom: 7%;left: 0; width: 100px; height: 80px;line-height: 80px; z-index: 1000; }*/
/*.btn_lhp img {max-width: 100%;vertical-align: middle;}*/

.footer img { vertical-align: middle; max-height: 50px;  margin: 10px 20px 20px 10px; }
.footer img { }
.footer .btn_lhp img { max-height: 40px; }
.footer .btn_maxoutil img { max-height: 80px; }

.navigation_button { display: none; cursor: pointer; width: 50px;position: fixed;top: 20px;right: 20px;background-color: #292929;border: 1px solid #dedede;border-radius: 8px;text-align: center;line-height: 12px;z-index: 10;padding: 2px 1px 6px 1px; }
.navigation_button .separator {display: inline-block;width: 90%;background-color: #ffffff;border-radius: 10px;height: 6px;}

.page1 { display: flex; flex: 1; flex-direction: row; height: 100vh; overflow: hidden;}
.page1 .fa-arrow-circle-down { position: absolute;bottom: 20px;left: 0;right: 0;margin: auto;text-align: center;font-size: 80px;color: white; display: none; cursor: pointer; }
.page1 .fa-arrow-circle-down:hover { bottom: 10px; transition: all 0.5s; }
.page1 .logo { display: flex; flex: 1; background-color: red; height: 100vh; background-color: #441e07;}
.page1 .logo h1 {  width: 100%; text-align: center; position: relative; }
.page1 .logo h1 img { position: absolute; top: -66px   ; left: 0; right: 0; bottom: 0; margin: auto; max-width: 100%; }
/*.page1 .picture { display: flex; flex: 2; z-index: -1; height: 100vh; background: url('../images/background1.jpg') top right no-repeat; background-size: contain; background-attachment: fixed; transform: translateZ(-1px) scale(1.1); }*/
.page1 .picture { display: flex; flex: 3; z-index: -1; height: 100vh; background: url('../images/background1.jpg') 100% 100% no-repeat; background-size: cover; /* background-attachment: fixed; */}
.soulages .page1 .picture { background: url('../images/musee-soulages-site.jpg') 100% 100% no-repeat;      background-size: cover; /* background-attachment: fixed; */ }
.page1 .navigation { position: absolute; bottom: 0; left: 0; width: 100%; height: 65px; background-color: #ececec; border-top: 1px solid #d0ab9c; }
.page1 .navigation ul { list-style: none; text-align: center; }
.page1 .navigation ul li { display: inline-block; }
.page1 .navigation ul li a { font-size: 24px; color: #441e07; font-weight: bold; text-decoration: none; font-style: italic; }
.page1 .navigation ul li a:hover { text-decoration: underline; }
.page1 .navigation ul li:first-child:before,
.page1 .navigation ul li.contact:before,
.page1 .navigation ul li.follow_us:before { display: none;  }
.page1 .navigation ul li:before { font-family: 'FontAwesome'; content: '\f005'; color: #441e07; margin: 0 10px; }
.page1 .navigation ul li.contact { background: url('../images/contact_button.png') center center no-repeat; width: 87px; height: 90px; position: absolute; top: -16px;right: 220px; }
.page1 .navigation ul li.contact a { display: block; height: 100%; width: 100%; }
.page1 .navigation ul li.contact:hover { top: -5px; }
.page1 .navigation.active ul li.contact:hover { top: auto; }
.page1 .navigation ul li.follow_us { position: absolute; right: 40px; }
.page1 .navigation ul li.follow_us a { font-size: 15px; font-weight: normal; }
.page1 .navigation ul li.follow_us a i { font-size: 35px; vertical-align: middle;  }

.page2 { display: flex; flex: 1; flex-direction: row; min-height: 250px; padding: 50px 0; width: 100%; max-width: 1000px; margin: auto; }
.page2 .picture { display: flex; flex: 1; }
.page2 .content { display: flex; flex: 2; flex-direction: column; padding-left: 65px;border-left: 7px solid #441e07; }
.soulages .page2 .content { border-left: none; }
.page2 h2 { font-style: italic; color: #441e07; font-size: 38px; width: 100%; text-align: center; padding: 0; background: url('../images/floral.png') center 50px no-repeat;  }

.page3 { min-height: 320px; background-color: #c1b5ad; }
.page3 .content { max-width: 1300px;margin: auto; padding: 20px 0; }
.page3 .content ul { list-style: none; text-align: center; }
.page3 .content ul li { max-width: 220px; width: 100%; overflow: hidden; display: inline-block; font-size: 13px; color: #441e07; text-align: left; padding-left: 80px; padding-top: 10px; position: relative; height: 80px; }
.page3 .content ul li img { position: absolute; left: 0; top: 0; max-width: 60px; }

.page4 { background-color: black; min-height: 360px; color: #fff; padding: 100px 0; }
.page4 .container { width: 100%; /*max-width: 1200px;*/ margin: auto; display: flex; flex: 1; flex-direction: row;  }
.page4 .picture { display: flex; flex: 1; }
.page4 .picture p { font-size: 22px; }
.page4 .picture p:before { display: block; content: ''; background: url('../images/guillemet.png'); width: 26px; height: 21px; margin-bottom: 10px; }
.page4 .picture p:after { display: block; content: ''; background: url('../images/guillemet2.png'); width: 26px; height: 21px; float: right; margin-top: 10px;}
.page4 .content { display: flex; flex: 2; flex-direction: column; overflow: hidden; padding: 0 30px 25px 30px; }
.page4 h2 {  font-style: italic; color: white; font-size: 38px; width: 100%; text-align: center; padding: 0; background: url('../images/floral_white.png') center 50px no-repeat; padding-bottom: 60px; margin-top: 0; }
.page4 .slick-dots li button { color: white; }
.page4 .slick-dots li button:before { color: white; font-size: 15px; opacity: 1; }
.page4 .slick-dots li.slick-active button:before { color: #f6df5c; }
.page4 .slick-initialized .slick-slide { text-align: center; }
.page4 .slick-slide img { display: inline; }

.page5 { max-width: 1200px; margin: auto; color: #441e07; }
.page5 h2 {  font-size: 38px; background: url('../images/floral.png') center bottom no-repeat; padding-bottom: 60px; }
.page5 ul { list-style: none; padding: 0; text-align: center; }
.page5 ul li { display: inline-block; max-width: 330px; text-align: center; margin: 0 30px; vertical-align: top; margin-bottom: 50px; }
.page5 .title { font-size: 30px; }
.page5 .sub_title { font-size: 16px; }
.page5 .price { background-color: #f6df5c;color: #da5c3b;font-size: 30px;padding: 7px;  font-weight: bold;}
.page5 .content { padding: 20px;font-size: 17px;line-height: 24px; }

.page5 ul li .header { padding: 10px; padding-bottom: 160px;     max-height: 52px; }
.page5 ul .price1 .header { background: url('../images/tarif1.png') center 85px no-repeat #ece8e6; }
.page5 ul .price2 .header { background: url('../images/tarif2.png') center 105px no-repeat #ece8e6; }
.page5 ul .price3 .header { background: url('../images/tarif3.png') center 85px no-repeat #ece8e6; }
.page5 ul .price4 .header { background: url('../images/tarif4.png') center 85px no-repeat #ece8e6; }
.page5 ul .price5 .header { background: url('../images/tarif5.png') center 85px no-repeat #ece8e6; }
.page5 ul .price6 .header { background: url('../images/tarif6.png') center 85px no-repeat #ece8e6; }

.page5 .breakfast {background-color: #ece8e6; min-height: 50px; text-align: center; }
.page5 .breakfast .title { display: inline-block; padding: 20px; padding-right: 80px; margin-right: 10px; background: url('../images/dejeuner.png') center right no-repeat; }
.page5 .breakfast .price { display: inline-block;     padding: 20px; }
.page5 .tax { font-weight: bold; }

/*.page6 { background-color: #78c2fe; }*/
.page6 { background-color: #e0e5e8; }
.page6 .container { max-width: 1200px; margin: 40px auto;     text-align: center; }
.page6 .container iframe { box-shadow: 5px 5px 10px grey; display: inline-block; margin-bottom: 40px; }
.page6 .contact { background: url('../images/cadre.png') center center no-repeat; max-width: 317px; height: 561px; display: inline-block; margin-left: 40px; vertical-align: top; }
.page6 .contact .content {padding: 55px 30px 20px 30px;text-align: center; font-size: 19px;line-height: 27px; }
.page6 .contact .content a.geoloc > i {font-size: 60px;color: #db5c3b;}
.page6 .contact .content a.geoloc { text-decoration: none; color: #441e07; }
.page6 .contact .content a:hover i { transform: rotate(360deg); transition: all 0.5s; }
.page6 .contact .content a span { font-size: 12px;     position: relative;top: -13px; }
.page6 .contact .content > p, .page6 .contact .content > p a { color: #441e07; }
.page6 .contact .content p.shedule { color: #055392; font-weight: bold; }

.page7 { background: url('../images/rodez2.jpg') center bottom no-repeat #61aae2; }
.page7 .container { max-width: 1200px; margin: 40px auto;  }
.page7 ul { list-style: none; padding: 0; margin: 0; color: white;     max-width: 380px;  background-color: #0000005c;padding: 10px; }
.page7 ul li {margin-bottom: 10px;border-bottom: 1px solid white; }
.page7 h4 { color: white; font-size: 22px;     background-color: #ff4b4b;padding: 10px;display: inline-block; }

.footer { min-height: 40px; background-color: black; color: white; text-align: center; line-height: 40px; }
.footer ul { margin: 0; padding: 0; }
.footer ul li { display: inline-block; margin: 0 10px;}
.footer ul li a { color: white; text-decoration: none; }

.white-popup {position: relative;background: #FFF;padding: 20px;width: auto;max-width: 1000px;margin: 20px auto;}
.popin-soulages { position: fixed; display: block; bottom: 0; left: 0; background: url('../images/pop-up-hotel-du-clocher.png') center center no-repeat; width: 450px; height: 248px; bottom: -230px; transition: all 1s;}
.popin-soulages.active { bottom: 0; }
.popin-soulages a { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 10; }
.popin-soulages .close { position: absolute;top: 37px;right: 30px;cursor: pointer;display: block;width: 26px;height: 26px; z-index: 20; }
.soulages #soulages-reservation { margin: auto; display: block; max-width: 200px; height: 30px; line-height: 30px; text-align: center;background-color: #00e051; color: white; font-size: 20px; text-decoration: none; }
.soulages .page1 .picture { display: table; }
.soulages h2 {text-align: center;display: table-cell;vertical-align: middle;font-size: 70px;color: white;text-shadow: 5px 0px black;}

#reserver_btn { display: inline-block;height: 50px;border: 1px solid #d2d2d2;line-height: 50px;text-align: center;text-decoration: none;text-transform: uppercase;background: #f6df5c;font-size: 30px;padding: 0px 20px;border-radius: 5px;margin-bottom: 20px;color: black; }

@media (max-width: 1500px) {
    .page1 .navigation ul li.follow_us {position: absolute;right: auto;left: 20px;}
    .page1 .navigation ul li.contact { right: 10px; }
}

@media (max-width: 1100px) {
    .page1 .navigation ul li.follow_us { display: none; }
    .page1 .navigation ul { text-align: left; }

    .page1 .logo { display: block;flex: none;width: 100%;background-color: transparent;position: absolute;top: 0; }
    .page1 .picture { display: block;flex: none;transform: none;width: 100%;background-size: cover;background-position: center top; filter: blur(4px);}
    .page1 .logo h1 {position: absolute;top: 0;background-color: #6b6b6b75;margin: 0;bottom: 0;display: block;}
    .page1 .logo h1 img { tpop: -66px; }

    .page7 .container { max-width: 400px; }
}
@media (min-width: 975px) {
    .page1 .navigation.fixed { position: fixed; bottom: auto; left: 0; top: 0; z-index: 50; }
}
@media (max-width: 975px) {
    .navigation_button { display: block; }

    .page1 .fa-arrow-circle-down {display: block; }
    .page1 .navigation { top: 0;max-width: 270px;height: 100%;border-top: none; background-color: #ffffffe0; left: -270px; z-index: 50; border-right: 1px solid #a5a5a5; position: fixed; }

    .page1 .navigation.active { left: 0; transition: left 0.2s; }
    .page1 .navigation ul { margin-top: 20%; }
    .page1 .navigation ul li:first-child:before { display: inline-block; }
    .page1 .navigation ul li { display: block; }
    .page1 .navigation ul li a {height: 70px;display: inline-block;}
    .page1 .navigation ul li.contact {right: 10px;top: auto;bottom: 0;}

    .page4  { padding: 50px 0; }
    .page4 h2 { margin-bottom: 0; }
    .page4 .picture p { margin-bottom: 50px; }
    .page4 .container { flex: auto; display: block; }
    .page4 .picture { flex: auto; display: block; }
    .page4 .content { flex: auto !important; display: block; }
}

@media (max-width: 1300px) {
    .page4 .content { flex: 1; }
}
@media (max-width: 770px) {
    .page6 .container iframe { display: none; }
}
@media (max-width: 700px) {
    .page2 { display: block; flex: none; }
    .page2 .picture {display: block;flex: none;width: 100%;}
    .page2 h2 { margin-top: 0;padding-bottom: 60px; }
    .page2 .content { display: block;flex: none;width: 90%;margin: auto;padding-left: 10px; }

    .page6 .contact { margin-left: 0; }
}

@media (max-width: 644px) {
    .page3 .content ul { text-align: left;     padding: 0 20px; }
    .page3 .content ul li {display: block; width: auto;}

    .page5 ul li .header { background-position-y: 100% !important;      max-height: 62px !important;}
    .page5 ul li { margin: 0 0 50px 0 !important; }
    .page4 .picture p {padding: 0 30px;}
    .page7 ul li span.text_right {     display: block;text-align: right; float: none; }
}

@media (max-width: 480px) {
    .page4 .slick-dotted.slick-slider { padding-bottom: 30px; }
}