@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800);
@import url(https://fonts.googleapis.com/css?family=Economica:400,700);

.cb{clear: both}
body{font-size: 16px; font-family: 'Open Sans'; overflow: auto}
body.bg001{background-image: url("/static/images/bg-lac.654a72d0ea0f.jpg"); background-repeat: no-repeat; background-size: auto auto;}
header{width: 100%; height: 80px; display: inline-block; z-index: 100; position: fixed; top: 0; left: 0}
header .bg{background: rgba(26, 30, 33, 0.9); width: 100%; height: 100%; position: absolute; z-index: 0}
header i.fa.fa-bars{position: absolute; font-size: 2em; color: #2ca8ff; padding: 23px; cursor: pointer; display: none}
header img.lang{cursor: pointer; float: right; margin: 17px -10px 17px 17px; width: 40px; position: relative; z-index: 10000}
.logo{height: 80px; width: 400px; float: left; position: absolute; z-index: 10; cursor: pointer}
.logo img{width: 80%; margin: -1% 0 0 8%; cursor: pointer}
nav{margin-right: 25px; margin-top: 9px; position: relative;}
nav ul li{float: right; padding: 18px 15px; text-transform: uppercase; font-weight: 600; color: #455a71; font-size: 0.85em}
nav > ul > a:first-of-type{float: right; padding: 18px 20px;}
nav ul li:hover{color: #2ca8ff;}
.welcome{width: 100%; text-align: center; display: flex; justify-content: center; align-items: center; height: 100vh; position: relative;}
.welcome img{position: fixed; top: 0; left: 0; z-index: -1; height: 100vw;}
.welcome h1, .welcome h6{font-family: 'Open Sans'; font-weight: 200; color: #fff;  font-size: 60px; text-shadow: 0 2px 3px rgba(0,0,0,.4);}
.welcome h6{font-size: 21px; margin-bottom: 40px}
.scr_Section{width: 22px; color: #fff; text-shadow: 0 2px 3px rgba(0,0,0,.2); font-size: 22px; cursor: pointer; position: absolute; bottom: 50px;}
.scr_Section span{display: block; position: absolute}
.scr_Section span:nth-child(1){opacity: 0; top: -40px}

/* NOTIF */
header .notif{padding: 15px; position: relative; top: -1px; text-align: center; z-index: -1;}
header .notif p{color: rgba(255, 255, 255, 0.8); width: 95%; margin: 0}
header .notif > i{position: absolute; top: 20px; right: 20px; cursor: pointer; color: rgba(255, 255, 255, 0.8);}
header .notif-success{background: #3eb5ac;}
header .notif-primary{background: #02baf2;}
header .notif-danger{background: #f84545;}
header .notif-warning{background: #fad46b;} header .notif-warning p{color: #fff}
header .notif-info{background: #d6e1e5;} header .notif-info p{color: #fff}
header .notif-purple{background: #a88cd5;}
header .notif-orange{background: #f58410;}

/* LANGUAGE */
.lightbox{width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); z-index: 1000; position: fixed; top: 0; left: 0; display: none}
.lightbox > div{position: absolute; top: 0; left: 0; bottom: 0; right: 0; overflow: hidden; margin: auto; height: 400px; width: 900px; border: none; background: rgba(42, 49, 74, 1.0); }
.lightbox > div > .panel-heading{background: rgba(42, 49, 74, 1.0); color: #77799D; border: none;}
.lightbox > div > .panel-heading > i{position: absolute; top: 5px; right: 5px; padding: 5px; cursor: pointer}
.lightbox > div > .panel-body{background: rgba(42, 49, 74, 1.0); color: #77799D; border: none;}
.lightbox > div > .panel-body img{cursor: pointer; padding: 10px}

/* SECTION */
section{width: 940px; margin: 0 auto; padding: 50px 0; color: #c7c7c7; border-top: 1px solid #efefef}
section h1{font-weight: bold; font-size: 57px; color: #455a71; font-family: 'Open Sans'}
section h1 span{font-weight: 100; font-size: 25px; color: #2ca8ff;}
section .hr{width: 100%; margin-bottom: 20px; margin-top: 39px}
section .hr span:first-of-type{display: block; background: #dad9d7; width: 100%; height: 1px;}
section .hr span:last-of-type{display: block; background: #2ca8ff; width: 2%; height: 5px; margin-top: -3px}
section ul li{width: 50%; float: left; text-align: center; margin-top: 80px}

/* #SERVICES */
section#service{border-top: none}
section#service h6, section p{color: #938c8c}
section#service h6{font-family: 'Open Sans'; font-weight: 800; font-size: 18px; text-transform: uppercase;}
section#service p{font-family: 'Open Sans'; font-weight: 100; font-size: 16px; width: 90%; margin: 0 5%}
section#service ul li .pict{width: 84px; height: 84px; border-radius: 100px; border: 2px solid #dad9d7; margin: 0 auto; background-size: 100% 250%; background-image: linear-gradient(to bottom, #fff 50%, #2ca8ff 50%); -webkit-transition: background-position 400ms; -moz-transition: background-position 400ms; transition: background-position 400ms; cursor: pointer; transition: 400ms}
section#service ul li .pict:hover{background-position: 0 100%; color: #fff; border-color: #fff}
section#service ul li .pict i{font-size: 27px; margin: 27px}

/* #BLUE1 */
section#blue1{width: 100%; background: #2ca8ff; padding: 30px 0}
section#blue1 ul{width: 940px; margin: 0 auto;}
section#blue1 ul li{float: left; margin: 0}
section#blue1 ul li:first-of-type{width: 33%}
section#blue1 ul li:first-of-type i{font-size: 172px; color: #fff;}
section#blue1 ul li:first-of-type sup{font-size: 100px; color: #fff; font-family: 'Open Sans'; font-weight: 800; top: -54px; left: -15px;}
section#blue1 ul li:last-of-type{width: 66%; text-align: left}
section#blue1 ul li:last-of-type h2{color: #fff; font-family: 'Open Sans'; font-weight: normal; font-size: 48px;}
section#blue1 ul li:last-of-type p{color: #fff; font-family: 'Open Sans'; font-weight: 300; font-size: 18px; width: 80%; margin: 0}

/* SECTION BIS */
section.bis{background: #fbfbfb; width: 100%;}
section.bis ul{width: 940px; margin: 0 auto;}
section.bis ul li{float: left; margin: 0}
section.bis ul li:first-of-type{width: 57%; text-align: justify}
section.bis ul li:first-of-type p{font-family: 'Open Sans'; font-weight: 100; font-size: 16px; margin: 0; color: #6E6A6A; padding: 20px 0}
section.bis ul li:last-of-type{width: 43%; text-align: center}
section.bis ul li:last-of-type i:nth-child(1){font-size: 224px; color: #455a71; padding: 34px 0 0 87px;}
section.bis ul li:last-of-type i:nth-child(2){font-size: 100px; color: #2ca8ff; font-weight: 100; position: relative; top: -92px; left: -77px;}

/* SECTION TRIPLE */
section.triple{background: #fff; width: 100%;}
section.triple ul{width: 940px; margin: 0 auto;}
section.triple ul li{float: left; margin: 0}
section.triple ul li:last-of-type{width: 57%; text-align: justify}
section.triple ul li:last-of-type p{font-family: 'Open Sans'; font-weight: 100; font-size: 16px; margin: 0; color: #6E6A6A; padding: 20px 0}
section.triple ul li:first-of-type{width: 43%; text-align: center}
section.triple ul li:first-of-type i:nth-child(1){font-size: 224px; color: #455a71; padding: 34px 0 0 0;}
section.triple ul li:first-of-type i:nth-child(2){font-size: 100px; color: #2ca8ff; font-weight: 100; position: relative; top: -92px; left: -77px;}

/* SECTION #AVIS */
section#avis{width: 100%; background: #2ca8ff; padding:  47px 0 50px; background-image: url("/static/images/quote.b42d10c5a75a.svg"); background-size: 142px; background-repeat: no-repeat; background-position: center;}
section#avis p{font-family: 'Open Sans'; font-weight: 600; font-size: 28px; text-transform: uppercase; color: #fff; line-height: 48px; width: 80%; max-width: 900px; margin: 60px auto 0; text-align: center}
section#avis span{color: #fff; text-transform: uppercase; font-family: 'Open Sans'; font-size: 18px; font-weight: 100; text-align: center; display: block; margin: 20px 0}
section#avis span:before{content: url("/static/images/quotter.73c805114dc3.png"); position: relative; top: -7px; margin-right: 10px;}
section#avis span:after{content: url("/static/images/quotter.73c805114dc3.png"); position: relative; top: -7px; margin-left: 10px;}
section#avis div.avised{position: absolute; left: 0; right: 0}
section#avis div.separator div{width: 43px; height: 5px; background: #fff; float: left; margin: 5px; cursor: pointer; opacity: 0.4;}

/* PRICER */
table.pricerList{width: 100%; max-width: 940px; margin: 0 auto; background-color: #fff; border: 1px solid; border-color: #e5e6e9 #dfe0e4 #d0d1d5; border-radius: 3px; -webkit-border-radius: 3px; font-family: 'Open Sans';}
table.pricerList td, table.pricerList th{width: 50%; text-align: center; font-family: 'Open Sans';}
table.pricerList thead tr:last-of-type th{cursor: pointer; -webkit-transition: background 500ms; -moz-transition: background 500ms; transition: background 500ms;}

table.pricerList thead tr:first-of-type th{text-transform: uppercase; background: #448bdb; color: #fff; padding: 15px 0; font-weight: 800; font-family: 'Open Sans';}
table.pricerList thead tr:first-of-type th:last-of-type{background: #2ca8ff; font-family: 'Open Sans';}
table.pricerList thead tr:nth-child(2) th{text-transform: uppercase; background: #639ede; color: #fff; padding: 20px 0; font-weight: 200; font-size: 4.5em; font-family: 'Open Sans';}
table.pricerList thead tr:nth-child(2) th:last-of-type{background: #71adf0; font-family: 'Open Sans';}
table.pricerList thead tr:last-of-type th{text-transform: uppercase; background: #448bdb; color: #fff;}
table.pricerList thead tr:last-of-type th:last-of-type{background: #2ca8ff; font-family: 'Open Sans';}
table.pricerList thead tr:last-of-type th a{text-transform: uppercase; color: #fff; padding: 15px 0; font-weight: 200; font-family: 'Open Sans'; display: block}
table.pricerList thead tr:last-of-type th:hover{background: #336cac;}
table.pricerList thead tr:last-of-type th:last-of-type:hover{background: #3a7dc7;}

table.pricerList thead tr th span{font-size: 0.3em; font-family: 'Open Sans';}
table.pricerList tbody td:first-of-type{width: 51%; font-family: 'Open Sans';}
table.pricerList tbody td:last-of-type{width: 50%; font-family: 'Open Sans';}
table.pricerList tbody tr td{padding: 15px; color: #959595; border: 1px solid #e8e8e8; font-family: 'Open Sans';}
table.pricerList tbody tr.strong td{color: #2a2a2a; font-weight: 600; font-family: 'Open Sans';}
table.pricerList tbody tr td.clean{background-color: #e8e8e8}
table.pricerList tbody tr td:last-of-type{color: #c4c4c4; border-left: none; font-size: 1.2em;; cursor: pointer;}
table.pricerList tbody tr td:not(:last-of-type):not(:first-of-type){border-right: none}

table.pricerList tbody tr td i.fa.fa-question-circle::after{content: "\f059"}
/* TOOLTIP */
i[data-tooltip] {position: relative;}
i[data-tooltip]::before, a[data-tooltip]::after {position: absolute; display: none; opacity: 1;}
i[data-tooltip]::before {content: attr(data-tooltip); background: #4C90DB; width: 400px;  color: #fff; font-family: 'Open Sans'; font-size: 14px; padding: 10px; border-radius: 4px; text-decoration: none; line-height: 20px}
i.m[data-tooltip]::before {width: 300px;}
i.vm[data-tooltip]::before {width: 200px;}
i[data-tooltip]::after {width: 0; height: 0; border: 6px solid transparent; content: '';}
i[data-tooltip]:hover::before, a[data-tooltip]:hover::after, i[data-tooltip]:focus::before, a[data-tooltip]:focus::after {display: block;}
/** positioning **/
i[data-tooltip][data-placement="left"]::before {top: -50%; right: 100%; margin-right: 10px;}
i[data-tooltip][data-placement="left"]::after {border-left-color: transparent; border-right: none; top: 50%; right: 100%; margin-top: -6px; margin-right: 4px;}
i[data-tooltip][data-placement="right"]::before {top: -50%; left: 100%; margin-left: 10px;}
i[data-tooltip][data-placement="right"]::after {border-right-color: transparent; border-left: none; top: 50%; left: 100%; margin-top: -6px; margin-left: 4px;}
i[data-tooltip][data-placement="top"]::before {bottom: 100%; left: 0; margin-bottom: 10px;}
i[data-tooltip][data-placement="top"]::after {border-top-color: transparent; border-bottom: none; bottom: 100%; left: 10px; margin-bottom: 4px;}
i[data-tooltip][data-placement="bottom"]::before {top: 100%; left: 0; margin-top: 10px;}
i[data-tooltip][data-placement="bottom"]::after {border-bottom-color: transparent; border-top: none; top: 100%; left: 10px; margin-top: 4px;}



/* ICON PADDING */
section#simple ul li:first-of-type i:nth-child(1){font-size: 244px; padding: 0;}
section#simple ul li:first-of-type i:nth-child(2){top: 4px; left: -104px; font-size: 86px;}
section#support ul li:last-of-type i:nth-child(1){font-size: 244px; padding: 38px 0 0 87px;}
section#support ul li:last-of-type i:nth-child(2){top: -248px; left: 130px; font-size: 126px;}

/* FOOTER */
footer{width: 100%; background: rgba(26, 30, 33, 1); border-top: 1px solid #c7c7c7; color: #455a71; padding: 20px 0}
footer div.link{float: left; width: 145px; z-index: 2;  position: relative}
footer div.link a i{font-size: 2em; margin: 18px; color: #455a71;}
footer div.link a i:nth-child(2){font-size: 1.85em; margin: 18px; color: #455a71;}
footer div.link a:hover i{color: #2ca8ff}
footer div.text{text-align: center; width: 100%; float: left; position: absolute; z-index: 1}
footer p{color: #455a71; font-size: 14px; padding: 0; margin: 0}
footer p a{color: #455a71}
footer p a:hover{color: #2ca8ff}

/* REGISTER OR CONNECT */
.bg-tooltip{background-image: url("/static/images/bg-lac.654a72d0ea0f.jpg"); background-repeat: no-repeat; background-size: auto auto; background-position: center center; width: 900px; height: 500px; margin: auto; border-radius: 6px; padding: 35px 25px 40px 25px; position: absolute; top: 0; left: 0; bottom: 0; right: 0; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.2);}
.bg-tooltip>.bg-tooltip{filter: blur(10px); -webkit-filter: blur(10px); -moz-filter: blur(10px); -o-filter: blur(10px); -ms-filter: blur(10px); overflow: auto; border: none;}
.toolTip{width:900px; height: 480px; text-align: center; margin: auto; border-radius: 6px; padding: 35px 25px 40px 25px; position: absolute; top: 0; left: 0; bottom: 0; right: 0;}
.toolTip > div{max-height: 430px}
.toolTip div.tile-login{background: none; padding-bottom: 4px}
.toolTip .titleLogo{color: #fff; font-family: 'Open Sans'; font-weight: normal; margin: 0 0 30px 0; text-shadow: 0 0 3px rgba(0,0,0,.2);}
.toolTip>div:first-of-type{border-right: 1px solid rgba(255, 255, 255, 0.2)}
.tile-register input[type='text']#email{border-radius: 0}
.tile-register input[type='password']#password{border-radius: 0; margin-bottom: 1px}
.tile-register label{font-family: 'Open Sans'; font-weight: normal; color: #fff}
#registForm div.input-group{margin: 10px 0}
.tile-register div.alert{padding: 10px!important; border: 1px solid transparent; border-radius: 4px; text-align: left; z-index: auto; display: block; background: inherit; position: relative;}
.tile-register div.alert-warning {background-color: rgba(250, 212, 107, 0.2); color: #f3bc65; text-shadow: 01px 1px 1px rgba(136, 99, 42, 0.77);}
.tile-register input{border-style: solid; border-width: 1px; border-color: transparent}
.tile-register button{width: 100%; margin: 10px 0;}
.tile-register #email{padding-right: 128px; padding-left: 41px; text-indent: 0}
.input-icon .email-text{position: absolute; top: 10px; right: 7px; font-size: 0.8em; color: #b2c6cd}
.tile-login .alert{margin-top: 10px}
.tile-login input {border-style: solid; border-width: 1px; border-color: transparent;}

/* SERVER STATUS */
section#status>div, section#maintenance>div{width: 940px; margin: 0 auto}
section#status h1{padding-top: 50px}
.tile-status{width: 24%; float: left; margin: 0 0.5%; background: transparent; color: #455a71}
.tile-status h4, .tile-status p{color: #455a71; padding: 10px 0}
.tile-status i{font-size: 5em; margin: 10px;  padding: 33px 0; width: 150px; height: 150px; border-radius: 150px; border: 3px solid #02baf2; color: #02baf2}
.tile-status i.online{border-color: #3eb5ac; color: #3eb5ac}
.tile-status i.offline{border-color: #f84545; color: #f84545}
section#status table{width: 100%}
section#status table tr td{vertical-align: top; color: #2A314A}
section#status table tr td#uptimecharts{text-align: center}
section#maintenance table{width: 100%}
section#maintenance table tr{border-bottom: 1px dotted #c7c7c7}
section#maintenance table tr:last-of-type{border-bottom: none}
section#maintenance table tr td{padding: 10px 0}
section#maintenance table tr td:nth-child(1){width: 10%; color: #02baf2}
section#maintenance table tr td:nth-child(2){width: 85%; color: #455a71}
section#maintenance table tr td:nth-child(3){width: 5%; color: #3eb5ac; text-align: center}
section#maintenance table tr td:nth-child(3) .fa-exclamation-triangle{color: #fad46b}
section#maintenance table tr td:nth-child(3) .fa-check{color: #3eb5ac}
section#maintenance table tr td:nth-child(3) .fa-times{color: #f84545}

/* CGU */
section#cgu>div{width: 940px; margin: 0 auto}
section#cgu h1{padding-top: 50px}
section#cgu h4{text-align: left; padding: 20px 0 10px 0; color: #226579}
section#cgu p{text-align: justify; color: #aaa}

/* CONTACT */
section#contact>div{width: 940px; margin: 0 auto}
section#contact h1{padding-top: 50px}
section#contact textarea{resize: none; min-height: 300px}
section#contact .input-required{position: relative;}
section#contact .input-required span{right: -5px}
section#contact .input-required span:before{top: 8px; right: 1px;}
section#contact form button{margin-bottom: 20px}

/* ERROR PAGE */
section#error{text-align: center; margin-top: 90px; border-top: 0; position: absolute; z-index: 100}
.codeError{line-height: 12rem; text-align: center; color: #fff; font: 10em "Open Sans"; text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);}
.descError{font: 2em "Open Sans" 200; margin-bottom: 20px; color: #fff; text-shadow: 0 2px 3px rgba(0,0,0,.4);}
.topError{font: 2em "Open Sans" 200; margin-top: 20px; color: #fff; text-shadow: 0 2px 3px rgba(0,0,0,.4);}
.descError i{font-style: italic; font-size: 0.75em; color: #fff; text-shadow: 0 2px 3px rgba(0,0,0,.4);}
.bgError{background-image: url("/static/images/bg-lac.654a72d0ea0f.jpg"); background-repeat: no-repeat; background-size: auto auto; width: 110%; height: 110%; margin: auto; overflow: hidden; position: fixed; left: -5%; top: -5%}
.bgError>.bgError{filter: blur(20px); -webkit-filter: blur(20px); -moz-filter: blur(20px); -o-filter: blur(20px); -ms-filter: blur(20px); overflow: auto; border: none;}

/* RESPONSIVE */

/* 991 */
@media (max-width: 991px){
    .toolTip>div:first-of-type{border-right: none}
    .toolTip{margin-top: 90px}
    .bg-tooltip{position: fixed}
    .bg-tooltip, .toolTip{height: auto; width: 100%}
}

/* 940 ---> 957 (bugfix) */
@media (max-width: 957px){
    /* #SERVICES */
    section#service{width: 80%;}
    section#service h6{text-align: left; padding-left: 100px}
    section#service p{width: 100%; padding-left: 100px; text-align: justify; margin: 0}
    section#service ul li{float: none; width: 100%}
    section#service ul li .pict{float: left}

    /* SECTION BIS */
    section.bis ul{width: 100%;}
    section.bis ul li:first-of-type{width: 80%; margin: 0 10%}
    section.bis ul li:last-of-type{width: 90px; position: absolute; right: 10%}
    section.bis ul li:last-of-type i:nth-child(1){font-size: 59px; padding: 38px 0 0 0;}
    section.bis ul li:last-of-type i:nth-child(2){font-size: 29px; position: relative; top: -29px; left: -17px;}

    /* SECTION TRIPLE */
    section.triple ul{width: 100%;}
    section.triple ul li:last-of-type{width: 80%; margin: 0 10%}
    section.triple ul li:first-of-type{width: 90px; position: absolute; right: 10%}
    section.triple ul li:first-of-type i:nth-child(1){font-size: 59px; padding: 38px 0 0 0;}
    section.triple ul li:first-of-type i:nth-child(2){font-size: 29px; position: relative; top: -29px; left: -17px;}

    /* SECTION STATUS */
    section#status>div, section#maintenance>div{width: 100%; margin: 0 auto}

    /* SECTION CGU */
    section#cgu>div{width: 90%; margin: 0 5%}

    /* SECTION CONTACT */
    section#contact>div{width: 90%; margin: 0 5%}


    /* ICON PADDING */
    section#simple ul li:first-of-type i:nth-child(1){font-size: 59px; padding: 34px 0 0 0;}
    section#simple ul li:first-of-type i:nth-child(2){top: 4px; left: -17px; font-size: 21px;}
    section#support ul li:last-of-type i:nth-child(1){font-size: 59px; padding: 38px 0 0 0;}
    section#support ul li:last-of-type i:nth-child(2){top: 6px; left: -12px; font-size: 21px;}

    /* #BLUE1 */
    section#blue1 ul{width: 100%;}
    section#blue1 ul li{float: left; margin: 0}
    section#blue1 ul li:first-of-type{display: none}
    section#blue1 ul li:last-of-type{width: 100%%; text-align: center}
    section#blue1 ul li:last-of-type h2{margin-top: 0}
    section#blue1 ul li:last-of-type p{text-align: center; width: 80%; margin: 0 10%}

    /* PRICER */
    div.pricerList{width: 640px; margin: 0 auto}
    div.pricer{width: 300px; margin: 10px; background: #fff; border: 1px solid #c7c7c7; border-radius: 4px; float: left}
    div.pricer#max{margin-top: -20px;}
    div.pricer#max h2{padding: 20px 0;}
    div.pricer h2{font-family: 'Open Sans'; font-size: 18px; font-weight: 800; text-align: center; text-transform: uppercase; padding: 5px 0; color: #dcdadb}
    div.pricer p{background: #2ca8ff; width: 100%; font-family: 'Open Sans'; font-size: 89px; font-weight: 800; text-align: center; color: #fff; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); margin-bottom: 25px;}
    div.pricer ul{width: 80%; margin: 0 10%;}
    div.pricer ul li{margin: 0!important}
    div.pricer ul li:last-of-type{position: inherit!important}
    div.pricer a button{margin: 25px auto; display: block;}
    div.pricer#max a button{margin: 35px auto; display: block;}

    /* LANGUAGE */
    .lightbox > div{width: 100%; height: 100%}
}

/* 820 */
@media (max-width: 820px){

    /* HEADER */
    header .bg{background-color: rgba(42, 49, 74, 1)}
    header nav{margin-right: 0; margin-top: 80px}
    header nav > ul > a:first-of-type{position: fixed; right: 62px; top: 9px}
    header nav > img.lang{margin: 17px 10px; position: fixed; top: 9px; right: 0px;}
    header nav > ul > ul{width: 100%; background: #2a314a}
    header nav ul ul a li{width: 100%; background-size: 200% 100%; background-image: linear-gradient(to right, #2a314a 50%, #a9abc6 50%); -webkit-transition: background-position 500ms; -moz-transition: background-position 500ms; transition: background-position 500ms;}
    header nav ul ul a li:hover{background-position: -100% 0; color: #fff}
    header i.fa.fa-bars{display: block; left: 80px; position: absolute}
    header nav ul > ul{display: none}

    /* STATUS */
    .tile-status i{display: none}
}

/* 760 */
@media (max-width: 760px){

    /* SECTION */
    section h1 span{display: none}
}

/* 650 */
@media (max-width: 650px){

    /* SECTION */
    section h1{font-size: 39px; padding-top: 17px;}

    /* FOOTER */
    footer div.text{display: none}

    /* PRICER */
    div.pricerList{width: 100%}
    div.pricer{width: 94%; margin: 40px 3%}

    /* AVIS */
    section#avis p{font-size: 18px; line-height: 28px;}

    /* STATUS */
    .tile{padding: 0}
    .tile-status{width: 80%; margin: 0 10%}
    section#maintenance table tr td{padding: 10px 0 0 10px}
}

/* 480 */
@media (max-width: 480px){

    /* WELCOME */
    .welcome h1{font-size: 30px;}
    .welcome h6{font-size: 14px;}
    .welcome a.btn-kr{padding: 7px 15px 6px 15px; font-size: 14px; line-height: 1.6;}
}