/*************************************************************************
 _____   _____   _   __   _   _____        _          __  _____   _____  
|  _  \ /  _  \ | | |  \ | | |_   _|      | |        / / | ____| |  _  \ 
| |_| | | | | | | | |   \| |   | |        | |  __   / /  | |__   | |_| | 
|  ___/ | | | | | | | |\   |   | |        | | /  | / /   |  __|  |  _  { 
| |     | |_| | | | | | \  |   | |        | |/   |/ /    | |___  | |_| | 
|_|     \_____/ |_| |_|  \_|   |_|        |___/|___/     |_____| |_____/ 

**************************************************************************

    @ Copyright © 2019 POINT WEB
    @ Catégorie : Structure site
    @ Site : Boucaud
    @ Auteur : SERCO POINT WEB - Nico / www.point-web.fr

**************************************************************************/

/************* GENERAL **************/

    *,*:after,*:before{-webkit-tap-highlight-color:transparent;list-style-position:inside;list-style-type:none;color:inherit;box-sizing:border-box;margin:0;padding:0;outline:none;position:relative;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}
    *:after,*:before{display:inline-block;z-index:1;}
    html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
    form,fieldset,input,textarea,p,blockquote,th,td,p,figure,figcaption,button,var,abbr{font-style:normal;border:0;font-size:inherit;color:inherit;background:transparent;text-decoration:none;}
    section,article,header,footer,nav,aside{display:block;}
    table,td,blockquote,code,pre,textarea,input,video{max-width:100%;}
    p,dd,ul{word-wrap:break-word;-webkit-hyphens:none;-ms-hyphens:none;-o-hyphens:none;hyphens:none;}
    input,textarea,button{resize:none;-webkit-appearance:none;-moz-appearance:none;font-family:inherit;}
    img{border:none;max-width:100%;height:auto;}
    a,button{border:0;cursor:pointer;color:inherit;text-decoration:none;transition:.25s;}
    a,a:hover,a:active,a:focus,button,button:hover,button:focus,button:active{text-decoration:none;outline:none;}
    .clear{clear:both;background:none;outline:none;border:none;height:1px;margin:0;}
    .bg-img{background-position:center center;background-size:cover;}
    .swiper-slide{display:flex;align-items:center;overflow:hidden;flex:1 0 auto;height:100%;}
    .swiper-wrapper{display:flex;flex-wrap:nowrap;height:100%;}
    .bg-img img{width:100%;height:100%;left:0;top:0;opacity:0;position:absolute;}
    [data-link]{cursor:pointer;}
    [data-bg]{background-size:cover;background-position:center center;}
    [data-mail], .mail{cursor:pointer;display:inline!important;}
    [data-grid] > *{position:absolute;transition:transform .5s;transform:scale(0);}
    [data-grid] > *.show{position:absolute;transform:scale(1);}
    strong{font-weight:bold;}
    i.fa-at{font-size:90%!important;top:1px!important;margin:0!important;}
    .center{text-align:center;}
                
    /* autocomplete styles in Chrome */
        input:-webkit-autofill,
        input:-webkit-autofill:hover,
        input:-webkit-autofill:focus
        textarea:-webkit-autofill,
        textarea:-webkit-autofill:hover
        textarea:-webkit-autofill:focus,
        select:-webkit-autofill,
        select:-webkit-autofill:hover,
        select:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 0 #000 inset;transition:background-color 5000s ease-in-out 0s;background-color:inherit!important;}
            
    /* selection styling */
        *::-moz-selection{background:#af8946;color:#fcf8f3;}
        *::selection{background:#af8946;color:#fcf8f3;}

    /* selection placeholder */
        ::-webkit-input-placeholder{color:inherit;opacity:.5;}
        ::-moz-placeholder{color:inherit;opacity:.5;}
        ::-ms-input-placeholder{color:inherit;opacity:.5;}

    /* loader */
        .loader{transition:.2s;position:absolute;top:0;left:50%;z-index:22000;width:200px;height:200px;transform:translateX(-50%);}
        .loader.load{opacity:0;visibility:hidden;}
        .loader:after,
        .loader:before{content:'';box-sizing:content-box;position:absolute;border:5px solid #af8946;border-radius:50%;animation:lds-ripple 1.5s cubic-bezier(0,0.2,0.8,1) infinite;}
        .loader:after{animation-delay:-0.75s;}
    
    /* font */
        @font-face{font-family:'icomoon';src:url('../../lib/fonts/icomoon.eot?2wgia4');src:url('../../lib/fonts/icomoon.eot?2wgia4#iefix') format('embedded-opentype'),url('../../lib/fonts/icomoon.ttf?2wgia4') format('truetype'),url('../../lib/fonts/icomoon.woff?2wgia4') format('woff'),url('../../lib/fonts/icomoon.svg?2wgia4#icomoon') format('svg');font-weight:normal;font-style:normal}
        [class^="ico-"],
        [class*=" ico-"]{font-family:'icomoon'!important;speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;}
        .ico-chalet:before{content:"\e900"}
        .ico-charpente:before{content:"\e901"}
        .ico-madrier:before{content:"\e902"}
        .ico-maison:before{content:"\e903"}
        .ico-plancher:before{content:"\e904"}
        .ico-toiture:before{content:"\e905"}


/*----------------------------------------------------< PRESET APP >---------------------------------------------------*/

    html{width:100%;background:#7c6b4d;overflow-x:hidden;line-height:1;}
    body{width:100%;background:inherit;overflow:hidden;font-family:'Poppins', sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
    body#p-maison{background:url(../../img/maison-1.jpg) center center no-repeat;background-size:100% auto;}

    /* cookies */
        #cookiesdirective{transition:transform .5s, opacity .5s;position:fixed;background:#af8946;top:auto!important;z-index:24000;transition:.8s;max-width:calc(100% - 30px);color:#fcf8f3;line-height:18px;padding:10px 25px;font-size:11px;font-family:inherit;box-shadow:0 3px 35px rgba(0,0,0,.15);width:500px;bottom:15px;left:15px;}
        #cookiesdirective.close{transform:translateY(100%);opacity:0;}
        #cookiesdirective > div{width:100%;padding:10px 5px;}
        #cookiesdirective a{font-family:inherit;line-height:auto;font-size:inherit;color:#fcf8f3;font-weight:900;}
        #cookiesdirective a:hover{color:#fcf8f3;}
        #cookiesdirective input{border:0;color:#af8946;border-radius:2px;transition:.3s;cursor:pointer;background:#fcf8f3;font-family:Arial;font-weight:900;position:absolute;top:-3px;right:-18px;width:16px;height:16px;font-size:10px;line-height:15px;}
        #cookiesdirective input:hover{border-radius:50%;-webkit-transform:rotate(180deg);transform:rotate(180deg);}

    /* recaptcha styling */  
        .captcha{height:40px;display:inline-block;margin:5px 0 10px;}
        .captcha .g-recaptcha{top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);transition:.4s;z-index:9999;cursor:pointer!important;margin-right:8px;float:left;border:2px solid #1d221e;cursor:pointer;overflow:hidden;width:29px;height:29px;border-radius:50%;}
        .captcha .g-recaptcha:hover{border-color:#af8946;}
        .captcha .g-recaptcha > div{cursor:pointer!important;width:500px!important;margin-top:-24px;margin-left:-14px;position:static;}
        .captcha .no-robot{font-weight:500;float:left;font-size:13px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);}
        .captcha .no-robot .liens{font-size:9px;font-weight:normal;}
        .captcha .no-robot .liens a:hover{color:#af8946;}
    
    /* container > ct */
        .ct{width:1300px;background:#fcf8f3;margin:auto;max-width:100%;color:#403523;}

    /* h* */
        h2{line-height:1;font-size:calc(16px + 12 * (100vw - 320px) / 1080);}
        h2 + *{margin-top:calc(10px + 1.2vw);}
        h3{color:#af8946;font-size:calc(14px + 5 * (100vw - 320px) / 1080);font-weight:800;}
        h3 + *{margin-top:calc(10px + 1.2vw);}
        h2 i{font-size:90%;margin-right:.5%;}

    /* count */
        .count-h{counter-reset:title;}
        .count-h h3:before{color:#af8946;font-size:15px;font-weight:300;margin-right:5px;content:counter(title) ". ";counter-increment:title;}
    
    /* alert */
        .paragraphe + .alert, h2 + .alert{margin-top:15px;}
        .alert, .badge{background:#1d1d1b;color:#fcf8f3;font-size:12px;margin-bottom:10px;font-weight:400;line-height:1;padding:calc(10px + 0.5%) calc(10px + 1%) calc(10px + 0.3%) calc(10px + .5%);}
            .badge.badge-danger, .alert.alert-danger{background:#bd2828;}
            .badge.badge-success, .alert.alert-success{background:#84b41c;}
            .badge.badge-info, .alert.alert-info{background:#2875bd;}
            .badge.badge-warning, .alert.alert-warning{background:#bd6e28;}
        .badge{display:inline-block;white-space:nowrap;padding:3px 5px 2px 6px;border-radius:2px;font-weight:bold;font-size:10px}
        .alert.hide{transition:opacity .3s;}
        .alert [data-close-alert]{position:absolute;top:2px;right:4px;font-size:10px;}
        .alert.no-close [data-close-alert]{display:none;}
         
    /* select */
        .select-ul{text-align:left;z-index:9000;width:100px;text-decoration:line-through;display:inline-block;height:40px;}
        .select-ul:after{position:absolute;right:15px;font-size:10px;top:50%;transform:translateY(-50%);content:"\f0d7";font-family:"Font Awesome 5 Pro";font-weight:900;}
        .select-ul ul{border-radius:3px;border:1px solid #eee;height:100%;background:#fcf8f3;overflow:hidden;position:absolute;width:100px;overflow:hidden;display:flex;flex-wrap:wrap;}
        .select-ul ul:hover{border-color:#1d1d1b;}
        .select-ul.open ul{height:auto;}
        .select-ul ul li{cursor:pointer;padding:3px 10px;font-weight:900;letter-spacing:2px;text-transform:uppercase;flex:1;font-weight:bold;flex-basis:100%;max-width:100%;order:1;font-size:10px;}
        .select-ul ul li:not(:first-child):not(.selected):not(.disabled):hover{background:rgba(0,0,0,.05);}
        .select-ul ul li:first-child{padding:1px 15px;margin-bottom:5px;border-bottom:1px solid #eee;font-weight:bold;height:40px;line-height:40px;}
        .select-ul ul li:last-child{padding-bottom:8px;}
        .select-ul ul li.selected{order:0;padding:1px 15px;margin-bottom:5px;border-bottom:1px solid #eee;font-weight:bold;height:40px;line-height:40px;}
        .select-ul ul li.disabled{opacity:.4;text-decoration:line-through;}
    
    /* input:number */
        input[type=number]::-webkit-inner-spin-button,
        input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
        input[type=number]{-moz-appearance:textfield;}
        .qty{display:inline-block;color:#564c36;overflow:hidden;border-radius:3px;border:1px solid #7c6940;width:100px;height:55px;}
        .qty input{padding:15px 15px 13px;height:100%;text-align:left;width:calc(100% - 21px);line-height:1.65;display:block;margin:0;}
        .qty input:focus{outline:0;}
        .qty-nav{background:#fcf8f3;top:0;position:absolute;height:100%;right:0;border-left:1px solid #7c6940;width:25px;}
        .qty-button{font-family:"Poppins", sans-serif;position:absolute;cursor:pointer;height:50%;width:100%;text-align:center;font-size:20px;line-height:1.3;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;}
        .qty-button:hover{background:#7c6940;color:#fcf8f3;}
        .qty-button.qty-up{top:0;border-bottom:1px solid #7c6940;}
        .qty-button.qty-down{bottom:0;}
        
    /* paragraphe */
        .paragraphe{line-height:1.8;font-size:calc(12px + 2 * (100vw - 320px) / 1080);font-weight:300;}
        .paragraphe strong{font-weight:700;}
        .paragraphe a{font-weight:bold;}
        .paragraphe a:hover{color:#af8946;}
        .paragraphe p + *{margin-top:calc(10px + .3vw);}
        .paragraphe .btn{margin-right:5px;}
        .paragraphe ul li{padding:2px 0 2px 14px;}
        .paragraphe ul li:before{left:0;top:2px;color:#af8946;position:absolute;content:"\f06e";font-family:"Font Awesome 5 Pro";font-weight:lighter;}
        .paragraphe + *{margin-top:calc(10px + 1.2vw);}

    /* error */
        .error-page{text-align:center;}
        .error-page img{width:300px;max-width:70%;}
        .error-page .error-code{letter-spacing:2px;margin-top:calc(25px + 2%);font-size:calc(18px + 20 * (100vw - 320px) / 1080);font-weight:bold;text-transform:uppercase;}
        .error-page p{font-size:calc(13px + 2.5 * (100vw - 320px) / 1080);margin:10px 0 calc(15px + 2%);}
    
    /* btn */
        .btn{white-space:nowrap;transition:background .25s;text-shadow:0 0 0;overflow:hidden;font-weight:bold;text-transform:uppercase;text-align:center;font-size:calc(10px + .5 * (100vw - 320px) / 1080);color:#fcf8f3;padding:calc(15px + 7 * (100vw - 320px) / 1080) 0 calc(15px + 7 * (100vw - 320px) / 1080) calc(15px + 10 * (100vw - 320px) / 1080);display:inline-block;line-height:1;background:#af8946;letter-spacing:calc(1px + .5 * (100vw - 320px) / 1080);}
        .btn:hover{background:#c3984b;}
        .btn i{margin-left:calc(15px + 7 * (100vw - 320px) / 1080);display:inline-block;width:calc(35px + 15 * (100vw - 320px) / 1080);font-size:110%;vertical-align:middle;}
        .btn i:after{transition:.25s;background:#c3984b;position:absolute;z-index:0;content:'';width:100px;height:300px;left:-25px;transform:rotate(10deg) translateY(-50%);top:50%;}
        .btn:hover i:after{background:#cda357;}
        .btn i:before{transition:.25s;}
        .btn:hover i:before{transform:scale(1.3) translateX(10%);}

    /* sub */
        .sub{color:#af8946;text-transform:uppercase;font-size:calc(10px + 2 * (100vw - 320px) / 1080);font-weight:bold;letter-spacing:calc(2px + 4 * (100vw - 320px) / 1080);}
        .sub + *{margin-top:calc(10px + 1vw);}


/*----------------------------------------------------< APP >---------------------------------------------------*/
    
/************* APP **************/

    #app{font-weight:300;width:100%;height:100%;}
        
        
/************* header **************/

    #header{color:#fcf8f3;transition:transform .4s;z-index:99999;position:fixed;width:100%;left:0;}
    #header + *:not(#slider){padding-top:140px;}
    .fix #header{transform:translateY(-40px);}
    .down #header{transform:translateY(-100%);}
    #header .top{justify-content:space-between;padding:0 15px;font-size:11px;font-weight:400;letter-spacing:1px;height:40px;background:#2f271e;width:100%;display:flex;align-items:center;}
    #header .top h1{display:inline-block;font-weight:inherit;}
    #header .top > *{align-self:center;}
    #header .top i:not(.fa-at){color:#af8946;margin-right:3px;}
    #header .top .right{text-align:right;}
    #header .top .right > div{display:inline-block;margin-left:10px;}
    #header .bottom{justify-content:space-between;transition:height .5s, padding .5s, box-shadow .5s;padding:0 25px;box-shadow:0 -1px 0 rgba(255,255,255,.15) inset;display:flex;align-items:center;height:100px;}
    .fix #header .bottom{height:70px;padding:0 15px;box-shadow:0 -1px 0 transparent inset;}
    #header .bottom:before{transition:height .5s;background:#2f271e;content:'';width:100%;height:0;z-index:1;position:absolute;left:0;top:0;}
    .fix #header .bottom:before{height:100%;}
    #header .bottom > *{align-self:center;z-index:5;}
    #header .bottom .left{display:flex;align-items:center;margin-right:auto;}
    #header .bottom .left > *{align-self:center;}
    #header .bottom .left ul{display:flex;margin-left:12px;}
    #header .bottom .left ul li{margin-left:6px;}
    #header .bottom .left ul a{border-radius:50%;display:block;width:25px;height:25px;border:2px solid transparent;}
    #header .bottom .left ul a:hover{border-color:#af8946;}


/************* nav **************/
    
    /* data-nav */
        [data-nav]{cursor:pointer;display:none;height:12px;z-index:999999!important;position:absolute;right:45px;top:50%;transform:translateY(-50%);}
        [data-nav]:before,
        [data-nav]:after{content:attr(data-lab-open);transition:.3s .2s;position:absolute;top:50%;transform:translateY(-50%);font-size:10px;margin-right:10px;font-weight:bold;text-transform:uppercase;text-align:right;right:100%;}
        [data-nav]:after{content:attr(data-lab-close);opacity:0;}
        .openNav [data-nav]:before{opacity:0;}
        .openNav [data-nav]:after{opacity:1;}
        [data-nav] span{display:block;width:22px;height:12px;display:block;position:absolute;}
        [data-nav] span:after,
        [data-nav] span:before{transition:.3s ease-in-out;background:#fcf8f3;right:0;content:'';display:block;width:100%;height:3px;display:block;position:absolute;}
        [data-nav] span:after{bottom:0;}
        [data-nav] span:nth-child(1):after,
        [data-nav] span:nth-child(1):before{transition-delay:.2s;}
        [data-nav]:hover span:nth-child(1):before{width:60%;}
        .openNav [data-nav] span:nth-child(1):before,
        .openNav [data-nav] span:nth-child(1):after{width:0;}
        [data-nav] span:nth-child(2):before{top:-3px;left:4px;width:0;}
        [data-nav] span:nth-child(2):after{top:-3px;right:4px;width:0;}
        [data-nav] span:nth-child(2):before{transform:rotate(45deg);transform-origin:top left;}
        [data-nav] span:nth-child(2):after{transform:rotate(-45deg);transform-origin:top right;}
        .openNav [data-nav] span:nth-child(2):before{transition-delay:.5s;width:100%;}
        .openNav [data-nav] span:nth-child(2):after{transition-delay:.3s;width:100%;}
        
        
/************* slider **************/

    #slider{margin-bottom:calc(35px + 3%);color:#fcf8f3;text-shadow:0 1px 1px rgba(0,0,0,.15);}
    #slider + *{margin-top:-30vh;}
    #slider > div{height:100%;}
    #slider .swiper-slide{overflow:visible;padding:calc(140px + 15%) calc(5% + 10px) 30vh;align-items:flex-end;}
    #slider .swiper-slide .ct{background:transparent;color:inherit;margin:0 auto;align-self:flex-end;}
    #slider [data-bg]{position:absolute;left:0;top:0;width:100%;height:100vh;min-height:800px;z-index:0;}
    #slider [data-bg]:after{content:'';position:absolute;background:linear-gradient(to top, #7c6b4d, transparent);left:0;z-index:10;bottom:0;width:100%;height:30%;}
    #slider [data-bg]:before{content:'';position:absolute;background:linear-gradient(to top, #403523 30%, transparent);z-index:5;left:0;top:0;width:100%;height:100%;opacity:.8;}
    #slider .ct{z-index:600;padding-right:10%;}
    #slider .sub{opacity:0;top:-150px;transition:opacity 1s, top .8s;color:inherit;}
    #slider .end .sub{opacity:1;top:0;}
    #slider .title{opacity:0;top:-100px;transition:opacity 1s, top .8s;line-height:.95;margin:calc(20px + 2%) 0 calc(25px + 2%);font-weight:bold;font-size:calc(20px + 20 * (100vw - 320px) / 1080);}
    #slider .end .title{opacity:1;top:0;}
    #slider .btn{opacity:0;bottom:-100px;transition:background .25s, opacity 1s, bottom .8s;}
    #slider .end .btn{opacity:1;bottom:0;}
    #slider .nav{z-index:100;position:absolute;bottom:30vh;right:calc(50% - 750px);transform:translateX(-100%);}
    #slider .nav button{transition:background .25s;font-size:calc(14px + 3 * (100vw - 320px) / 1080);height:calc(40px + 15 * (100vw - 320px) / 1080);width:calc(40px + 15 * (100vw - 320px) / 1080);display:inline-block;line-height:1;background:#af8946;letter-spacing:calc(1px + 1 * (100vw - 320px) / 1080);}
    #slider .nav button i{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);}
    #slider .nav button:hover{background:#c3984b;}


/************* page default **************/
    
    .default{padding:0 calc(5% + 10px);}
    .default .ct{padding:calc(10px + 6%);}
    .default [data-grid]{mmargin-bottom:calc(25px + 3%);}

    .page{z-index:1000;}
    .page > div{display:flex;flex-wrap:wrap;}
    .page > div > div{flex:1;width:50%;max-width:50%;flex-basis:50%;}
    .page > div .bg-img{min-height:calc(200px + 200 * (100vw - 320px) / 1080);}
    .page > div .content{overflow:hidden;background:#fcf8f3;padding:calc(15px + 6%);}
    .page > div .content > *{z-index:10;}
    .page > div .content .bg-ico{opacity:.05;right:0;color:#fcf8f3;z-index:1;position:absolute;font-size:calc(300px + 250 * (100vw - 320px) / 1080);top:50%;transform:translateY(-50%);text-shadow:0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000;}
        
        .page > div:nth-child(even) .bg-img{order:1;}
        .page > div:nth-child(even) .content{order:2;}
        .page > div:nth-child(even) .bg-ico{left:0;}
    

/************* title **************/
    
    #title{z-index:5;padding:0 calc(5% + 10px);text-shadow:0 1px 1px rgba(0,0,0,.15);}
    #title + *{z-index:10;}
    #title [data-bg]{background:url(../../img/title/default.jpg) center center no-repeat;background-size:cover;height:70vh;min-height:400px;position:absolute;left:0;top:0;width:100%;z-index:1;}
    #title [data-bg]:after{content:'';position:absolute;background:linear-gradient(to top, #7c6b4d, transparent);left:0;z-index:10;bottom:0;width:100%;height:100%;}
    #title [data-bg]:before{content:'';position:absolute;background:linear-gradient(to top, #403523 50%, transparent);z-index:5;left:0;top:0;width:100%;height:100%;opacity:.8;}
    #title .ct{padding:calc(20px + 2%) 0;z-index:15;background:transparent;color:#fcf8f3;}
        
    /* bc */
        #bc{margin-top:5px;}
        #bc li:after{content:'/';font-size:5px;font-weight:900;margin:0 6px 0 10px;top:-3px;}
        #bc li:last-child:after{display:none;}
        #bc li{letter-spacing:1px;display:inline-block;font-size:11px;font-weight:600;opacity:.7;}
        #bc li a:hover{color:#c3984b;opacity:1;}
   

/************* head **************/
    
    .head{z-index:5;padding:0 calc(5% + 10px);text-align:center;text-shadow:0 1px 1px rgba(0,0,0,.15);}
    .default .head{margin-top:calc(25px + 3%);}
    .head + *{z-index:10;}
    .head h2{font-size:calc(20px + 20 * (100vw - 320px) / 1080);color:#fcf8f3;}
    .head [data-bg]{background-position:center center;background-size:cover;height:100vh;min-height:700px;position:absolute;left:0;top:0;width:100%;z-index:1;}
    .head [data-bg]:after{content:'';position:absolute;background:linear-gradient(to top, #7c6b4d, transparent);left:0;z-index:10;bottom:0;width:100%;height:100%;}
    .head [data-bg]:before{content:'';position:absolute;background:linear-gradient(to top, #403523 30%, transparent);z-index:5;left:0;top:0;width:100%;height:100%;opacity:.8;}
    .head .ct{padding:calc(20px + 10%) 0;z-index:15;background:transparent;color:#fcf8f3;}
    .head .sub{color:#fcf8f3;}
    .head .intro{width:900px;margin-left:auto;margin-right:auto;font-size:calc(12px + 3 * (100vw - 320px) / 1080);max-width:100%;line-height:calc(14px + 10 * (100vw - 320px) / 1080);letter-spacing:1px;font-weight:200;}
    .head #bc{margin:calc(10px + 1%) 0;}
    

/************* maison **************/
    
    .line{margin:calc(20px + 1%) 0 calc(-20px - 1%);height:0;}
    .line > div{height:3px;border-radius:15px;width:3px;border-left:1px solid #af8946;border-right:1px solid #af8946;background:#c3984b;position:absolute;left:50%;transform:translateX(-50%);top:0;}
    
    .sec{color:#fcf8f3;display:flex;align-items:center;margin:calc(150px + 3%) auto;padding:4% 0;width:1200px;max-width:100%;}
    .sec:first-of-type{margin-top:calc(80px + 3%);}
    .sec:before{transition:.3s;content:'';width:7px;height:7px;position:absolute;top:0;background:#fcf8f3;border-radius:50%;left:50%;transform:translateX(-50%);}
    .sec.show:before{width:15px;height:15px;}
    .sec > div{flex:1;align-self:center;}
    .sec .sub{opacity:0;transition:.5s;color:#fcf8f3;top:-50px;}
    .sec.show  .sub{opacity:1;top:0;}
    .sec h3{color:#fcf8f3;margin-top:calc(15px + 1%);}
    .sec .paragraphe{transition:.8s;opacity:0;bottom:-80px;}
    .sec.show .paragraphe{transition-delay:.3s;opacity:1;bottom:0;}
    .sec .paragraphe p{font-style:italic;font-weight:200;letter-spacing:1px;font-size:calc(12px + 1 * (100vw - 320px) / 1080);letter-spacing:1.5;}
    .sec .bg-img{z-index:1000;opacity:0;box-shadow:0 0 100px rgba(0,0,0,.3);transition:all 0s, opacity .6s;height:calc(150px + 150 * (100vw - 320px) / 1080);transform:0;}
    .sec.show .bg-img{opacity:1;}
    .sec:after{transition:2s;opacity:0;position:absolute;content:attr(data-bf);white-space:nowrap;text-align:center;font-size:calc(80px + 150 * (100vw - 320px) / 1080);position:absolute;z-index:0;color:#2f271e;top:50%;left:50%;transform:translate(-50%, -50%);}
        
        .sec:nth-child(odd).show:after{opacity:.1;transform:translate(-50%, -50%) rotate(-10deg);}
        .sec:nth-child(odd) > div:nth-child(1){text-align:right;padding-right:6%;}
        .sec:nth-child(odd) > div:nth-child(2){margin-left:6%;}
        .sec:nth-child(odd) h3{transition:1s;opacity:0;right:-80px;}
        .sec:nth-child(odd).show h3{transition-delay:.2s;opacity:1;right:0;}

        .sec:nth-child(even).show:after{opacity:.1;transform:translate(-50%, -50%) rotate(10deg);}
        .sec:nth-child(even) > div:nth-child(1){order:2;text-align:left;padding-left:6%;}
        .sec:nth-child(even) > div:nth-child(2){order:1;margin-right:6%;}
        .sec:nth-child(even) h3{transition:1s;opacity:0;left:-80px;}
        .sec:nth-child(even).show h3{transition-delay:.2s;opacity:1;left:0;}

    .illu{transform:rotate(-5deg) translateX(-50%);width:120vw;background-attachment:fixed;height:80vh;z-index:3;left:50%;}
    .illu:after{content:'';position:absolute;background:linear-gradient(to top, #7c6b4d, transparent 50%);left:0;z-index:10;bottom:0;width:100%;height:100%;}
    .illu:before{content:'';position:absolute;background:linear-gradient(to bottom, #7c6b4d, transparent 50%);left:0;z-index:10;bottom:0;width:100%;height:100%;}

    .bottom-mai{text-align:center;z-index:600;margin-bottom:calc(30px + 3%)}
    .bottom-mai .btn{z-index:10;}
    .bottom-mai:after{background:#7c6b4d;content:'';position:absolute;left:0;top:0;width:100%;height:300px;z-index:1;}


/************* index **************/
    
    #index{z-index:100;margin-bottom:-20%;}
    #index .ct:before{box-shadow:0 5px 20px rgba(0,0,0,.1);z-index:0;content:'';position:absolute;left:0;top:0;background:url(../../img/bg-index.jpg) center right #fcf8f3 no-repeat;background-size:auto 100%;width:calc(100vw - (50vw - 750px));height:100%;}
    #index .ct > div{width:66.66%;z-index:10;}
    #index .passion{padding:calc(15px + 5%) 3%;width:950px;max-width:100%;margin:auto;color:#fcf8f3;}
    #index .passion .paragraphe{margin-bottom:calc(10px + 1%);columns:2;column-gap:calc(20px + 3%);text-align:justify;}
    .chal{width:100%;z-index:1;}


/************* presta **************/
    
    #presta{background:#fcf8f3;color:#362e24;margin-top:-10px;z-index:100;padding:calc(20px + 2%);}
    #presta .ct{text-align:center;}
    #presta ul{margin-top:calc(20px + 1vw);display:flex;flex-wrap:wrap;width:calc(100% + 14px);left:-7px;}
    #presta ul li{flex:1;padding:7px;}
    #presta ul li > div{display:flex;align-items:flex-end;color:#fcf8f3;overflow:hidden;background:#aa8a52;height:calc(100px + 100 * (100vw - 320px) / 1080);}
    #presta ul li .bottom{padding-right:60px;font-weight:bold;font-size:calc(12px + 3 * (100vw - 320px) / 1080);padding:20px;padding-right:50px;align-self:flex-end;margin-top:auto;z-index:100;}
    #presta ul li .bottom i{display:block;margin-bottom:10px;font-size:calc(30px + 5 * (100vw - 320px) / 1080);}
    #presta ul li [data-bg]{transition:.3s;position:absolute;left:0;top:0;width:100%;height:100%;}
    #presta ul li [data-bg]:before{transition:.3s;opacity:.9;background:linear-gradient(to bottom, transparent, #aa8a52);content:'';position:absolute;left:0;bottom:0;width:100%;height:50%;z-index:1;}
    #presta ul li > div:hover [data-bg]:before{opacity:.3;}
    #presta ul li a{display:block;right:0;bottom:0;z-index:1000;width:calc(35px + 7 * (100vw - 320px) / 1080);height:calc(35px + 7 * (100vw - 320px) / 1080);position:absolute;background:#c3984b;}
    #presta ul li > div:hover a{right:-5px;}
    #presta ul li a i{z-index:100;position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);font-size:14px;}
    #presta ul li a:before{transition:.3s;transform-origin:top left;transform:rotate(25deg);position:absolute;background:inherit;content:'';position:absolute;left:0;top:0;width:200%;height:200%;z-index:1;}
    #presta ul li > div:hover a:before{transform:rotate(0deg);}
    .reali #presta{margin-top:calc(-5% - 25px);padding:calc(25px + 3%) calc(20px + 2%);background:transparent;}
    .reali #presta .ct{background:transparent;}
    .reali #presta .sub,
    .reali #presta h2{color:#fcf8f3;}
    .reali #presta ul li > div{box-shadow:0 0 100px rgba(0,0,0,.3);}


/************* real **************/
    
    #real{padding-left:4%;padding-right:4%;padding-bottom:calc(5px + 1%);}
    #real .ct{background:transparent;padding:calc(25px + 2%) calc(5% + 10px) calc(10px + 1%);}
    #real h2{color:#fcf8f3;}
    #real [data-swiper]{width:1330px;max-width:100%;margin:auto;}
    #real .swiper-slide{transition:opacity .5s;opacity:.4;overflow:visible;padding:15px;margin:auto;height:calc(250px + 250 * (100vw - 320px) / 1080);}
    #real .swiper-slide.end{opacity:1;}
    #real .swiper-slide figure{overflow:hidden;height:100%;width:100%;box-shadow:0 0 100px rgba(0,0,0,.3);}
    #real .swiper-slide figure figcaption{transition:.4s;opacity:0;position:absolute;bottom:-5px;left:0;z-index:100;transform:translateX(-50px);}
    #real .swiper-slide.end figure figcaption{opacity:1;transform:translateX(0);}
    #real .swiper-slide figure figcaption .btn{padding-left:calc(10px + 10 * (100vw - 320px) / 1080);padding-top:calc(10px + 5 * (100vw - 320px) / 1080);padding-bottom:calc(10px + 5 * (100vw - 320px) / 1080);text-transform:none;letter-spacing:0;font-size:calc(11px + 1 * (100vw - 320px) / 1080);}
    #real .swiper-slide figure figcaption .btn i.ico{font-size:calc(16px + 7 * (100vw - 320px) / 1080);;}
    #real .bg-img{height:100%;width:100%;}
    #real .nav{transition:.5s;opacity:0;width:100%;position:absolute;top:50%;transform:translateY(-50%);}
    #real [data-swiper]:hover .nav{opacity:1;}
    #real .nav button{position:absolute;background:#c3984b;height:calc(35px + 20 * (100vw - 320px) / 1080);width:calc(35px + 20 * (100vw - 320px) / 1080);font-size:calc(12px + 5 * (100vw - 320px) / 1080);color:#fcf8f3;top:50%;transform:translateY(-50%);}
    #real .nav button.prev{transform:translate(-100%, -50%);left:15px;}
    #real .nav button.next{transform:translate(100%, -50%);right:15px;}
    
    [data-grid]{margin:calc(25px + 3%) 0;}
    .mtm [data-grid]{margin-top:0;}
    [data-grid] figure{overflow:hidden;}
    [data-grid] figcaption{transition:.4s;opacity:0;left:-50px;background:#c3984b;color:#fcf8f3;font-weight:bold;padding:10px 15px;font-size:calc(11px + 2 * (100vw - 320px) / 1080);position:absolute;z-index:100;bottom:0;}
    [data-grid] figure:hover figcaption{opacity:1;left:0;}


/************* dom **************/
    
    .dom{display:flex;flex-wrap:wrap;width:1200px;margin-top:calc(25px + 2%);}
    .dom li{color:#af8946;font-weight:400;margin-right:calc(15px + 4%);text-align:center;font-size:calc(11px + 1 * (100vw - 320px) / 1080);}
    .dom li i{color:#82796b;font-size:calc(50px + 10 * (100vw - 320px) / 1080);display:block;margin:0 auto calc(15px + 1%);}
    .dom li:last-child{color:#af8946;font-weight:bold;}
    .dom li:last-child i{color:inherit;}


/************* form **************/

    form fieldset{background:#fff;margin:20px 0 10px;width:100%;height:calc(40px + 2vw);border-radius:1px;}
    form fieldset + button{margin-top:10px;}
    form fieldset:before{position:absolute;transition:.2s;width:calc(40px + 2vw);left:0;height:calc(40px + 2vw);display:flex;align-items:center;text-align:center;justify-content:center;font-size:calc(13px + 7 * (100vw - 320px) / 1080);}
    form fieldset:after{transition:1s;opacity:0;position:absolute;right:7px;top:6px;font-size:10px;font-family:"Font Awesome 5 Pro";font-weight:lighter;}
    form fieldset.valid:after{content:"\f058";color:#86c361;opacity:1;}
    form fieldset.invalid:after{content:"\f057";color:#c36161;opacity:1;}
    form fieldset.focus:before{color:#af8946;opacity:1;}
    form fieldset input, form fieldset textarea{z-index:10;outline-style:none!important;box-shadow:0 0 0!important;font-size:calc(11px + 3 * (100vw - 320px) / 1080);padding:0 calc(35px + 2vw);width:100%;height:100%;padding:0 15px 0 calc(35px + 2vw);font-family:'Poppins', sans-serif;}
    form fieldset input:focus, form fieldset textarea:focus{color:#af8946;background:transparent;}
    form fieldset.txt{height:200px;}
    form fieldset textarea{height:100%;padding-bottom:calc(8px + 1vw);padding-top:calc(8px + 1vw);}
    form fieldset label{top:50%;transform:translateY(-50%);opacity:.5;transition:.2s;cursor:text;z-index:15;white-space:nowrap;position:absolute;font-weight:500;padding-left:calc(35px + 2vw);font-family:'Poppins', sans-serif;font-size:calc(11px + 3 * (100vw - 320px) / 1080);}
    form fieldset.txt label{top:calc(8px + 1vw);transform:translateY(0);}
    form fieldset.required label:after{content:"*";margin-left:3px;}
    form fieldset.focus.required label:after{color:#c36161;}
    form fieldset.active label{font-size:calc(8px + 2 * (100vw - 320px) / 1080);top:-5px;transform:translateY(-100%);padding-left:0;}
    form fieldset.active.txt label{top:calc(((40px + 2vw) * 5) / 40);}


/************* galerie **************/
     
    [data-gallery] img{cursor:zoom-in;}
    .gallery-window{cursor:zoom-out;overflow:hidden;display:none;top:0;left:0;z-index:99999999;height:100%;width:100%;background:rgba(0,0,0,.5);position:fixed;user-select:none;}
    .gallery-window .gallery-img > div{padding:25px;transform:scale(.8);transition:.3s;opacity:0;z-index:0;display:flex;position:absolute;height:100vh;width:100%;align-items:center;}
    .gallery-window .gallery-img > div.active{transform:scale(1);opacity:1;z-index:5;}
    .gallery-window img{cursor:default;max-height:100%;box-shadow:0 0 30px rgba(0,0,0,.3);max-width:100%;align-self:center;margin:auto;}
    .gallery-window button{cursor:pointer;background:#af8946;color:#fcf8f3;width:calc(30px + 10 * (100vw - 320px) / 1080);height:calc(30px + 10 * (100vw - 320px) / 1080);font-size:calc(12px + 5 * (100vw - 320px) / 1080);position:absolute;top:50%;transform:translateY(-50%);z-index:100;}
    .gallery-window button.disabled{opacity:.5;}
    .gallery-window button[data-g-change="prev"]{left:0;}
    .gallery-window button[data-g-change="next"]{right:0;}
    .gallery-window button[data-g-change="close"]{right:0;top:0;transform:none;}
    .ie .gallery-window img{max-height:auto!important;width:800px;max-width:100%;}
    

/************* footer **************/
     
    #footer{background:#2d271c;color:#fcf8f3;padding:calc(20px + 3%) 5%;z-index:1000;}
    #footer .ct{align-items:center;display:flex;flex-wrap:wrap;background:inherit;color:inherit;}
    #footer .menu{display:flex;flex-wrap:wrap;flex:1;}
    #footer .menu ul{flex:1;font-size:calc(11px + 1 * (100vw - 320px) / 1080);}
    #footer .menu li{padding:calc(5px + 1%) 0;}
    #footer .menu li:first-child{letter-spacing:0;font-size:inherit;}
    #footer .menu li:first-child + li{margin-top:calc(10px + 2%);}
    #footer .menu li a:hover{color:#af8946;}
    #footer .left{margin-right:calc(30px + 6%);width:315px;max-width:315px;flex-basis:315px;}
    #footer p{margin:calc(20px + 2%) 0;line-height:1.2;font-size:calc(10px + 1 * (100vw - 320px) / 1080);;}


/*----------------------------------------------------< MEDIA QUERIES >---------------------------------------------------*/

/************* max 1450 **************/ @media screen and (max-width:1450px){
    
    #slider .nav{right:calc(10px + 5%);transform:none;}

}
/************* max 1400 **************/ @media screen and (max-width:1400px){

    #header .top{letter-spacing:.5px;}

}
/************* max 1300 **************/ @media screen and (max-width:1300px){

    .dom{width:450px;left:-50px;margin-top:15px;}
    .dom li{width:33.33%;max-width:33.33%;flex-basis:33.33%;margin-right:0;margin-top:calc(15px + 2%);}

}
/************* max 1300 min 1084 **************/ @media screen and (max-width:1300px) and (min-width:1084px){
    
    #nav ul li{letter-spacing:.5px;font-size:10px;margin:0 10px;}

}
/************* max 1200 **************/ @media screen and (max-width:1200px){
    
    #presta ul li{width:33.33%;max-width:33.33%;flex-basis:33.33%;}
    #presta ul li > div{height:calc(100px + 150 * (100vw - 320px) / 1080);}

    #header .top .right .address{display:none!important;}

}
/************* max 1100 **************/ @media screen and (max-width:1100px){

     #footer .menu ul:first-child{display:none;}

}
/************* min 1084 **************/ @media screen and (min-width:1084px){
    
    #nav{height:100%;color:#fcf8f3;text-shadow:0 1px 1px rgba(0,0,0,.15);margin-left:auto;}
    #nav nav{height:100%;}
    #nav ul{height:100%;display:flex;}
    #nav ul li{text-transform:uppercase;font-size:11px;font-weight:600;letter-spacing:1px;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;margin:0 17px;}
    #nav ul li span{transition:.5s;display:block;width:0;background:#fcf8f3;height:3px;position:absolute;bottom:0;left:50%;transform:translateX(-50%);}
    #nav ul li a{opacity:.9;}
    #nav ul li a:hover{opacity:1;}
    #nav ul li a:hover + span{width:100%;}
    #nav ul li ul{transition:.6s;opacity:0;visibility:hidden;top:80%;height:auto;padding:0;position:absolute;background:#fcf8f3;display:block;white-space:nowrap;left:50%;transform:translateX(-50%);}
    #nav ul li:hover ul{opacity:1;visibility:visible;top:100%;}
    #nav ul li ul li{height:45px;margin:0;}
    #nav ul li ul li a{height:100%;display:block;color:#2f271e;width:100%;padding:15px;}
    #nav ul li ul li a:hover{color:#fcf8f3;background:#af8946;}

}
/************* max 1084 **************/ @media screen and (max-width:1084px){

    [data-nav]{display:flex;z-index:9999999;}
    #nav{z-index:9999;transform:translateX(-100%);transition:top .4s, box-shadow .6s, transform .6s;max-width:calc(100vw - 90px);width:300px;overflow:hidden;text-transform:uppercase;font-size:calc(11px + 2 * (100vw - 320px) / 1080);letter-spacing:.5px;color:#fcf8f3;background:#2f271e;position:fixed;top:0;left:0;height:100vh;}
    .openNav #nav{transform:translateX(0);box-shadow:0 0 2000px 300px rgba(175,137,70,.3), 0 0 500px 100px #af8946;}
    .fix #nav{top:40px;}
    .down #nav{top:110px;}
    #nav nav > ul{margin-bottom:0;margin-left:0;overflow-y:scroll;height:100vh;width:500px;}
    #nav nav > ul li{transition:.6s;width:300px;max-width:calc(100vw - 90px);padding:0;border-bottom:1px solid rgba(0,0,0,.2);}
    #nav nav > ul li a{font-weight:bold;padding:calc(22px + .6%) calc(20px + .6%) calc(20px + .6%);display:block;}
    #nav nav > ul li a:hover{background:#af8946;color:#2f271e;}
    #nav nav > ul > li[data-sub] > a:after{display:flex;align-items:center;justify-content:center;text-align:center;width:calc(50px + 1.2%);position:absolute;height:100%;right:0;background:rgba(255,255,255,.05);border-left:1px solid rgba(0,0,0,.5);transition:.2s;font-size:16px;top:0;content:'\f078';font-family:'Font Awesome 5 Pro';font-weight:300;}
    #nav nav > ul > li[data-sub] > a.open:after{content:'\f077';}
    #nav nav > ul li ul{background:rgba(0,0,0,.2);display:block;opacity:1;visibility:visible;border-top:1px solid rgba(0,0,0,.2);}
    #nav nav > ul li ul li:last-child{border-bottom:0;}
    #nav nav > ul li ul li a{font-size:11px;padding:calc(18px + .6%) calc(20px + .6%) calc(16px + .6%);}
    #nav ul li ul{display:none;}
    
    #slider [data-bg]{height:100%;min-height:600px;}

    .page > div > div{width:100%;max-width:100%;flex-basis:100%;}
    .page > div > .content{order:1!important;}
    .page > div > .bg-img{order:2!important;height:calc(250px + 300 * (100vw - 320px) / 600);}

}
/************* max 1000 **************/ @media screen and (max-width:1000px){
    
    body#p-maison{background-image:none;}
    
    .ct.col > div{flex-basis:100%;width:100%;max-width:100%;}

}
/************* max 900 **************/ @media screen and (max-width:900px){

    #index .ct{box-shadow:0 5px 20px rgba(0,0,0,.1);}
    #index .ct:before{display:none;}
    #index .ct > div{width:100%;}

    .dom{width:100%;left:0;}
    .dom li{width:auto;max-width:auto;flex-basis:auto;flex:1;}

    .default, #title{padding:0 calc(3% + 5px);}

    #title{text-align:center;}
    #bc li{letter-spacing:0;font-size:10px;}
    
    #slider .swiper-slide{padding-top:calc(110px + 15%);align-items:center;}
    #slider .swiper-slide .ct{padding:0 15px;text-align:center;margin:auto 0;align-self:center;}
    #slider [data-bg]{max-height:500px;}
    #slider [data-bg]:before{background:#403523;height:100%;opacity:.7;}
    #slider .nav{width:100%;left:0;height:0;top:50%;transform:translateY(-50%);}
    #slider .nav button{width:25px;height:25px;font-size:12px;}
    #slider .nav button.next{position:absolute;right:0;}
   
    #header .top .h1{flex:1;text-align:center;}
    #header .top .h1 i{display:none;}
    #header .top .right{display:none;}
    #header .top .right .address{display:none;}
    #header .bottom{padding:0 15px;}
    #header .bottom .left{max-width:calc(100% - 45px);}
    #header .bottom .left ul a{width:20px;height:20px;}
    #header .bottom{height:70px;}
    .fix #header .bottom{height:60px;}
    #header + *:not(#slider){padding-top:110px;}

}
/************* max 850 **************/ @media screen and (max-width:850px){

    #footer .ct .left{width:100%;max-width:100%;flex-basis:100%;text-align:center;margin-right:0;} 
    #footer .ct .left p{font-size:calc(13px + 4 * (100vw - 320px) / 1080);} 
    #footer .menu{margin-top:calc(25px + 2%);}
    #footer .menu ul:first-child{display:block;}
    #footer .menu ul{text-align:center;}

}
/************* max 750 **************/ @media screen and (max-width:750px){

    .dom li{width:33.33%;max-width:33.33%;flex-basis:33.33%;}
    
    #presta ul{width:calc(100% + 10px);left:-5px;}
    #presta ul li{width:50%;max-width:50%;flex-basis:50%;padding:5px;}

}
/************* max 700 **************/ @media screen and (max-width:700px){
    
    .steps{margin:60px 0 15px;width:110%;left:-5%;}
    .steps ol li{font-size:8px;}
    .steps ol li span{-webkit-transform-origin:center left;transform-origin:center left;margin-top:13px;-webkit-transform:rotate(-65deg);transform:rotate(-65deg);}

}
/************* max 650 **************/ @media screen and (max-width:650px){
    
    .sec{display:block;text-align:center;padding:calc(50px + 2%) 3% 3%;}
    .sec > div{text-align:center!important;padding:0 0!important;margin:0 0!important;}
    .sec > div:nth-child(1){order:1!important;}
    .sec > div:nth-child(2){order:2!important;}
    .sec .bg-img{margin-top:calc(20px + 3%)!important;position:relative;top:0!important;height:calc(200px + 300 * (100vw - 320px) / 1080);}

}
/************* max 550 **************/ @media screen and (max-width:550px){

    #header .top .h1{font-size:10px;letter-spacing:.5px;line-height:.9;}
    
    #index .passion .paragraphe{columns:1;}

    .btn strong{display:none;}

    #footer img{max-width:80%;}
    #footer .menu ul:first-child{display:none;}
    #footer .menu li:first-child + li{margin-top:5px!important;}
    #footer .menu li{padding:4px 0;}

}
/************* max 500 **************/ @media screen and (max-width:500px){
    
    #header .bottom{height:60px;}
    .fix #header .bottom{height:50px;}
    #header + *:not(#slider){padding-top:100px;}

    #slider .swiper-slide{padding-top:calc(100px + 15%);}
    
    #presta ul li{padding:5px 0;width:100%;max-width:100%;flex-basis:100%;}
    #presta ul li > div{height:calc(150px + 150 * (100vw - 320px) / 1080);}

}
/************* max 450 **************/ @media screen and (max-width:450px){

    .steps li span{letter-spacing:0;}
    
    .dom li{width:50%;max-width:50%;flex-basis:50%;}

    #footer .menu ul{width:100%;max-width:100%;flex-basis:100%;}
    #footer .menu ul:not(:last-child){margin-bottom:calc(20px + 1%);}


}

/*----------------------------------------------------< KEYS FRAMES >---------------------------------------------------*/

/************* loader **************/

    @keyframes lds-ripple{
        0%{top:96px;left:96px;width:0;height:0;opacity:1;}
        100%{top:18px;left:18px;width:156px;height:156px;opacity:0;}
    }

/************* btn load **************/

    @keyframes rotate{
        0%{transform:rotate(0deg);transform-origin:center center;}
        100%{transform:rotate(360deg);transform-origin:center center;}
    }