html {
    height: 100%;
    margin: 0;
    padding: 0;
    width: 100%;
    /*background-image:url(https://static.cruiseline.eu/images/fondGM.jpg);*/
    background-attachment: fixed;
    background-color: #fff;
    background-position: center top;
    background-repeat: repeat-x;
    background-color:#fff;
    font-family: 'Lato', sans-serif;
    font-size: 14px;  
    color:#131E29;
    text-rendering:optimizelegibility
}
body{
    margin:0;
    padding:0;
    height:100%;
}


@font-face {
    font-family: "Flaticon";
    src: url("./fonts/flaticon.eot");
    src: url("./fonts/flaticon.eot?#iefix") format("embedded-opentype"),
        url("./fonts/flaticon.woff") format("woff"),
        url("./fonts/flaticon.ttf") format("truetype"),
        url("./fonts/flaticon.svg#Flaticon") format("svg");
    font-weight:normal;
    font-style:normal;
    font-variant:normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family: "Flaticon";
        src: url("./fonts/flaticon.eot");
        src: url("./fonts/flaticon.eot?#iefix") format("embedded-opentype"),
            url("./fonts/flaticon.woff") format("woff"),
            url("./fonts/flaticon.ttf") format("truetype"),
            url("./fonts/flaticon.svg#Flaticon") format("svg");
        font-weight:normal;
        font-style:normal;
        font-variant:normal;
    }
}
@font-face{font-family:'FjallaOne-Regular';
           src:url('./fonts/FjallaOne-Regular.woff') format('woff'), 
               url('./fonts/FjallaOne-Regular.eot?') format('eot'), 
               url('./fonts/FjallaOne-Regular.ttf') format('truetype'), 
               url('./fonts/FjallaOne-Regular.svg#FjallaOne-Regular') format('svg')
}
*{margin: 0;padding: 0;}
.transition,.hover{ -webkit-transition: 0.3s ease 0s; -moz-transition: 0.3s ease 0s; -o-transition: 0.3s ease 0s; -ms-transition: 0.3s ease 0s; transition: 0.3s ease 0s;}
.transition2{ -webkit-transition: 0.5s ease 0s; -moz-transition: 0.5s ease 0s; -o-transition: 0.5s ease 0s; -ms-transition: 0.5s ease 0s; transition: 0.5s ease 0s;}
.transitionAll *{ -webkit-transition: 0.3s ease 0s; -moz-transition: 0.3s ease 0s; -o-transition: 0.3s ease 0s; -ms-transition: 0.3s ease 0s; transition: 0.3s ease 0s;}
.notransition{ -moz-transition: none;-webkit-transition: none;-o-transition: color 0 ease-in;transition: none;}

h1,h2,h3,h4,h5{font-weight: normal;font-size: inherit;}
h1 {
    color:#71C5E8;
    font-weight: bold;
  /*  border-bottom: 3px solid #71C5E8;*/
    padding-bottom: 5px;
}
*,*::before, *::after,*:not(.noborder) {box-sizing: border-box;}
p {margin: 0;}
/*******MARGIN***********/
.top-1{margin-top:-1px;}
.top-40{margin-top:-40px;}
.top-90{margin-top:-90px;}
.left-1{margin-left:-1px;}
.right-1{margin-right:-1px;}
.bottom-1{margin-bottom:-1px;}
.bottom5{margin-bottom:5px}
.bottom10{margin-bottom:10px}
.bottom20{margin-bottom:20px}
.bottom30{margin-bottom:30px}
.bottom40{margin-bottom:40px}
.bottom50{margin-bottom:50px}
.bottom90{margin-bottom:90px;}
.top-100{top:-100px;}
.martop-100{margin-top:-100px;}
.top3{margin-top:3px;}
.top5{margin-top:5px;}
.top7{margin-top:7px;}
.top10{margin-top:10px;}
.top15{margin-top:15px;}
.top20{margin-top:20px;}
.top25{margin-top:25px;}
.top30{margin-top:30px;}
.top35{margin-top:35px;}
.top40{margin-top:40px;}
.top50{margin-top:50px;}
.top60{margin-top:60px;}
.top70{margin-top:70px;}
.top80{margin-top:80px;}
.top90{margin-top:90px;}
.top100{margin-top:100px;}
.top10P{margin-top:10%;}
.top12P{margin-top:12.5%;}
.top25P{margin-top:25%;}
.top50P{margin-top:50%;}
.left1{margin-left:1px;}
.left5{margin-left:5px;}
.left10{margin-left:10px;}
.left15{margin-left:15px;}
.left20{margin-left:20px;}
.left25{margin-left:25px;}
.b0{bottom:0}
.b50{bottom:50px;}
.b85{bottom:85px;}
.t0{top:0}
.r0{right:0}
.l0P{left:0%;}
.l15P{left:15%;}
.l20P{left:20%;}
.left30{margin-left:30px;}
.left40{margin-left:40px;}
.left50{margin-left:50px;}
.left60{margin-left:60px;}
.left80{margin-left:80px;}
.left100{margin-left:100px;}
.left1P{margin-left:2%;}
.left2P{margin-left:2%;}
.left4P{margin-left:4%;}
.left5P{margin-left:5%;}
.auto{margin:0 auto}
.autolr{margin-left:auto;margin-right:auto}
.padB10{padding-bottom:10px}
.padB30{padding-bottom:30px}
.padB40{padding-bottom:40px}
.padT10{padding-top:10px}
.padT20{padding-top:20px}
.padT20P{padding-top:20%}
.padT25{padding-top:25px}
.padT23P{padding-top:23%}
.padT27P{padding-top:27%}
.padT33P{padding-top:33%}
.padT40P{padding-top:40%}
.padT50P{padding-top:50%}
.padT60P{padding-top:60%}
.padT100P{padding-top:100%}
.padB50P{padding-bottom:50%}
.pad5{padding:5px}
.pad10{padding:10px}
.pad20{padding:20px}
.pad30{padding:30px}
.pad40{padding:40px}
.pad50{padding:5px 0}
.pad100{padding:10px 0}
.pad200{padding:20px 0}
.pad400{padding:40px 0}
.pad600{padding:60px 0}
.pad2010{padding:20px 10px}
.pad510{padding:5px 10px}
.pad710{padding:7px 10px}
.pad20100{padding:20px 10px 0}
.pad02{padding:0 2px}
.pad010{padding:0 10px}
.pad012{padding:0 12px}
.pad105{padding:10px 5px}
.pad020{padding:0 20px}
.pad030{padding:0 30px}
.pad040{padding:0 40px}
.pad060{padding:0 60px}
.pad500{padding:50px 0}
.pad520{padding:5px 20px !important}
.pad205{padding:20px 5px !important}
.padLR50{padding-left:50px !important;padding-right:50px !important}
.padLR100{padding-left:100px !important;padding-right:100px !important}
.pad1020{padding:10px 20px !important}
.pad5{padding:5px;}
.pad1{padding:1px;}
.pad05{padding:0 5px;}
.pad2P{padding:2%;}
.pad02P{padding:0 2%;}
.padL5 {padding-left: 5px;}
.padL10 {padding-left: 10px;}
.padL20 {padding-left: 20px;}
.padL30 {padding-left: 30px;}
.padL40 {padding-left: 40px;}
.padL1P {padding-left: 1%;}
.padL2P {padding-left: 2%;}
.padL5P {padding-left: 5%;}
.padL10P {padding-left: 10%;}
.padR5 {padding-right: 5px;}
.padR10 {padding-right: 10px;}
.padR20 {padding-right: 20px;}
.padR30 {padding-right: 30px;}
.padR40 {padding-right: 40px;}
.padR1P {padding-right: 1%;}
.padR5P {padding-right: 5%;}
.padR10P {padding-right: 10%;}
.right5{margin-right:5px;}
.right10{margin-right:10px;}
.right15{margin-right:15px;}
.right20{margin-right:20px;}
.right30{margin-right:30px;}
.right1P{margin-right:1%;}
.right2P{margin-right:2%;}
.right5P{margin-right:5%;}
.leftright1P{margin-left:0.5%;margin-right: 0.5%}
.pad0 {padding: 0 !important;}
.op05{opacity:0.5}

/******* MENU ***********/
#menusLien > li {
    text-align: center;
    flex-grow: 1;
    font-weight: bold;
}

#menusLien > li:hover {
    color: #FBBB17;
}

#menusLien > li:nth-child(1), li:last-child {
    border: none;
}

.menuGauche > h2 {
    margin-top: 0;
}
.menuGauche ul li {
    list-style-type: none;
    line-height: 25px;
    padding: 0 10px;
}

/*******FLEX***********/
.flex{display: flex;display: -webkit-flex;}
.flex-colonne{display: flex;display: -webkit-flex;flex-direction: column; -webkit-flex-direction: column;-moz-flex-direction: column;-o-flex-direction: column;-ms-flex-direction: column;}
.flex-row{display: flex;display: -webkit-flex;-webkit-flex-direction: row;-ms-flex-direction: row;flex-direction: row;}

.flex-nowrap{display: flex;display: -webkit-flex;-webkit-flex-wrap: nowrap;-ms-flex-wrap: nowrap;flex-wrap: nowrap;}
.flex-wrap{display: flex;display: -webkit-flex;-webkit-flex-wrap: wrap;-ms-flex-wrap: wrap;flex-wrap: wrap;}

.justify-evenly{justify-content: space-evenly;}
.justify-center{-webkit-justify-content: center;-ms-flex-pack: center;justify-content: center;}
.justify-around{-webkit-justify-content: space-around;-ms-flex-pack: distribute;justify-content: space-around;}
.justify-between{-webkit-justify-content: space-between;-ms-flex-pack: justify;justify-content: space-between;}
.justify-end{-webkit-justify-content: flex-end;-ms-flex-pack: end;justify-content: flex-end;}

.hori-start{-webkit-align-items: flex-start;-ms-flex-align: start;align-items: flex-start;}
.hori-center{-webkit-align-items: center;-ms-flex-align: center;align-items: center;}
.hori-end{-webkit-align-items: flex-end;-ms-flex-align: end;align-items: flex-end;}


.vert-start{-webkit-align-content: flex-start;-ms-flex-line-pack: start;align-self: flex-start;}
.vert-center{-webkit-align-content: center;-ms-flex-line-pack: center;align-self: center;}
.vert-end{-webkit-align-content: flex-end;-ms-flex-line-pack: end;align-self: flex-end;}

.grow0{flex-grow: 0;}
.grow1{flex-grow: 1;}

/*******POSITION***********/
.vmiddle {vertical-align: middle !important}
.vtop {vertical-align: top !important}
.vbottom {vertical-align: bottom !important}
.left{float:left}
.right{float:right}
.spacer{clear:both}
.center{text-align:center}
.absolute{position:absolute}
.relative{position:relative}
.fixed{position:fixed}
.hidden{overflow:hidden}
.hid{visibility:hidden}
.block{display:block}
.inblock{display:inline-block}
.table{display:table}
.spacing010{border-collapse:separate;border-spacing:10px 0}
.cell{display:table-cell;vertical-align:middle}
.cell.top{vertical-align:top !important}
.row{display:table-row}
.none{display:none}
/*.blockMobile{display:none}*/
a{cursor:pointer;color:inherit;text-decoration:none;}
.z0{z-index: 0}
.z1{z-index: 1}
.z2{z-index: 2}
.z10{z-index: 10}
.z900{z-index: 900}
.z999{z-index: 999}
.z1000{z-index: 1000}

/*******APPARENCE***********/
.spacing05{border-collapse:separate;border-spacing:5px 0}
.radius{border-radius: 5px}
.radius20{border-radius: 20px;}
.radius30{border-radius: 30px;}
.radius50{border-radius: 50px;}
.radius50P{border-radius: 50%;}
.ombre{box-shadow:0 3px 3px rgba(0, 0, 0, 0.2)}
.ombre2{box-shadow:0 0px 5px rgba(0, 0, 0, 0.5)}
.ombre3{box-shadow:0 3px 37px -8px rgba(0, 0, 0, 1)}
.ombreBloc{box-shadow: 0 3px 5px rgba(0, 0, 0, 0.8);}
.ombreInset{ box-shadow:0 10px 10px -10px rgba(0, 0, 0, 0.6) inset, 0 -10px 10px -10px rgba(0, 0, 0, 0.6) inset}
ul li{list-style:none}
ul li.selectPont {list-style: disc inside none;}
img{border:none}
.line10{line-height:10px;}
.line12{line-height:12px;}
.line15{line-height:15px;}
.line17{line-height:17px;}
.line18{line-height:18px}
.line20{line-height:20px}
.line22{line-height:22px;}
.line25{line-height:25px;}
.line28{line-height:25px;}
.line30{line-height:30px;}
.line35{line-height:35px;}
.line40{line-height:40px}
.line42{line-height:42px}
.line50{line-height:50px}
.line60{line-height:60px}
.line62{line-height:62px}
.line80{line-height:80px}
.line90{line-height:90px}
.line100{line-height:100px}
.line120{line-height:120px}
.line160{line-height:160px}
.scrollY{overflow-y: auto;overflow-x: hidden;}
.op0{opacity:0}
.op03{opacity:0.3}
.op1{opacity:1}
/*.hoverliste:hover{background-color: #fff;color: #25a3bc}
.fg .hover:hover{background-color: #fff}
.fb .hover:hover{background-color: #eee}
.fg.hover:hover{background-color: #fff !important}
.fb.hover:hover{background-color: #eee !important}*/
.f9{background-color:#999}
.hover:hover{color: #FBBB17;cursor: pointer}
.hover.orange:hover{color: #575759}
.hover.orange.fn:hover{color: #fff}
.fn .hover.orange:hover{color: #fff}
/*******WIDTH***********/
.w10{width:10px}
.w15{width:15px}
.w20{width:20px}
.w25{width:25px}
.w30{width:30px}
.w35{width:35px}
.w40{width:40px}
.w50{width:50px}
.w55{width:55px}
.w60{width:60px}
.w70{width:70px}
.w80{width:80px}
.w90{width:90px}
.w100{width:100px}
.w110{width:110px}
.w120{width:120px}
.w140{width:140px}
.w150{width:150px}
.w160{width:160px}
.w170{width:170px}
.w180{width:180px}
.w190{width:190px}
.w200{width:200px}
.w220{width:220px}
.w225{width:225px}
.w240{width:240px}
.w250{width:250px}
.w260{width:260px}
.w270{width:270px}
.w280{width:280px}
.w290{width:290px}
.w300{width:300px}
.w320{width:320px}
.w330{width:330px}
.w345{width:345px}
.w350{width:350px}
.w360{width:360px}
.w375{width:375px}
.w400{width:400px}
.w420{width:420px}
.w440{width:440px}
.w450{width:450px}
.w500{width:500px}
.w550{width:550px}
.w560{width:560px}
.w580{width:580px}
.w600{width:600px}
.w650{width:650px}
.w730{width:730px}
.w1200{width:1200px}
.w740{width:740px}
.maxw600{max-width:600px}
.maxw800{max-width:800px}
.maxw1000{max-width:1000px}
.maxw1200{max-width:1200px}
.maxw1400{max-width:1400px}
.w3P{width:3%}
.w4P{width:4%}
.w5P{width:5%}
.w6P{width:6%}
.w8P{width:8%}
.w9P{width:9%}
.w10P{width:10%}
.w12P{width:12%}
.w13P{width:13%}
.w14P{width:14%}
.w15P{width:15%}
.w166P{width:16.6667%}
.w18P{width:18%}
.w19P{width:19%}
.w20P{width:20%}
.w21P{width:21%}
.w22P{width:22%}
.w23P{width:23%}
.w235P{width:23.5%}
.w24P{width:24%}
.w25P{width:25%}
.w28P{width:28%}
.w29P{width:29%}
.w30P{width:30%}
.w32P{width:32%}
.w33P{width:33.3%}
.w34P{width:34%}
.w35P{width:35%}
.w40P{width:40%}
.w41P{width:41%}
.w44P{width:44%}
.w45P{width:45%}
.w46P{width:46%}
.w48P{width:48%}
.w49P{width:49%}
.w50P{width:50%}
.w55P{width:55%}
.w58P{width:58%}
.w59P{width:59%}
.w60P{width:60%}
.w62P{width:62%}
.w64P{width:64%}
.w65P{width:65%}
.w66P{width:66%}
.w68P{width:68%}
.w70P{width:70%}
.w74P{width:74%}
.w75P{width:75%}
.w77P{width:77%}
.w80P{width:80%}
.w82P{width:82%}
.w85P{width:85%}
.w88P{width:88%}
.w90P{width:90%}
.w95P{width:95%}
.w96P{width:96%}
.w98P{width:98%}
.w99P{width:99%}
.w100P{width:100%}
.w26P{width:26%}
.h0{height:0px}
.h5{height:5px}
.h10{height:10px}
.h12{height:12px}
.h15{height:15px}
.h20{height:20px}
.h25{height:25px}
.h30{height:30px}
.h35{height:35px}
.h40{height:40px}
.h42{height:42px}
.h49{height:49px}
.h50{height:50px}
.h60{height:60px}
.h65{height:65px}
.h70{height:70px}
.h75{height:75px}
.h80{height:80px}
.h90{height:90px}
.h100{height:100px}
.h110{height:110px}
.h115{height:115px}
.h118{height:118px}
.h120{height:120px}
.h125{height:125px}
.h130{height:130px}
.h140{height:140px}
.h150{height:150px}
.h160{height:160px}
.h165{height:165px}
.h170{height:170px}
.h180{height:180px}
.h190{height:190px}
.h200{height:200px}
.h210{height:210px}
.h215{height:215px}
.h220{height:220px}
.h230{height:230px}
.h240{height:240px}
.h250{height:250px}
.h260{height:260px}
.h280{height:280px}
.h290{height:290px}
.h300{height:300px}
.h320{height:320px}
.h330{height:330px}
.h340{height:340px}
.h350{height:350px}
.h380{height:380px}
.h400{height:400px}
.h410{height:410px}
.h420{height:420px}
.h500{height:500px}
.h550{height:550px}
.h10P{height:10%}
.h20P{height:20%}
.h25P{height:25%}
.h33P{height:33.333%}
.h40P{height:40%}
.h45P{height:45%}
.h50P{height:50%}
.h60P{height:60%}
.h70P{height:70%}
.h75P{height:75%}
.h80P{height:80%}
.h100P{height:100%}
.h75vh{height: 75vh}
.h50vh{height: 50vh}
.h70vh{height: 70vh}
.h85vh{height: 85vh}
.w0{width:0;border:none !important}
.maxh200{max-height:200px}
.maxh480{max-height:480px}


/*******BORDER***********/
.br{border-right:1px solid #ccc;}
.blbleu{border-left:1px solid #131E29;}
.brbleu{border-right:1px solid #131E29;}
.brb{border-right:1px solid #fff;}
.br4b{border-right:1px solid #4b4b4b;}
.bb4b{border-bottom:1px solid #4b4b4b;}
.bl{border-left:1px solid #ccc}
.bt{border-top:1px solid #ccc;}
.bb{border-bottom:1px solid #ccc}
.bbb{border-bottom:1px solid #fff !important}
.bn{border:none}
.bae5{border-right:5px solid #eee ;}
.ba{border:1px solid #ccc}
.bab{border:1px solid #fff}
.ba2b{border:2px solid #fff}
.ba7c{border:1px solid #7c7c7c}
.ba4b{border:1px solid #4b4b4b;}
.babl{box-shadow: inset 0 0 10px #71C5E8}
.star .bb{border-bottom:1px solid #862466 !important}
.sky .bb{border-bottom:1px solid #58B2DC !important}
.sea .bb{border-bottom:1px solid #19BDC5 !important}

.trait {
    background: #fff url("https://static.cruiseline.eu/images/fondListe.png") repeat-x scroll center top;
}

/*******BACKGROUND***********/
.fb05{background: rgba(255,255,255,0.5)}
.fg{background-color: #f4f4f4}
.fe{background-color: #eee}
.fc{background-color: #ccc}
.fb{background-color: #fff}
.fbl{background-color: #71C5E8}
.fbl2{background-color: #061566}
.fbl3{background-color: #5461c8}
.fblc{background-color: #ABE1FB}
.fblf{background-color: #131E29}
.fn{background-color: #575759}
.fo{background-color: #f47920}
.fo2{background-color: #c6401b}
.fo3{background-color: #db5c1e}
.fp{background-color: #F171A1}
.fv{background-color: #03A679}
.fvc{background-color: #B5DCAF}
.fp2{background-color: #B82077}
.fp3{background-color: #772186}
.fr{background-color: #d33d28}
.fj{background-color: #FBBB17}
.fj2{background-color: #FFD766}
.fj3{background-color: #D89812}
.fjc{background-color: #FFEEBE}
.fbbb{background-color: #bbb}
.fn03{background-color:rgba(0,0,0,0.3)}
.fn07 {
    background-color: rgba(0, 0, 0, 0.7)
}
.fb07{background-color:rgba(255,255,255,0.7)}
.fn05{background-color:rgba(0,0,0,0.5)}
.fblf05{background-color:rgba(25,15,65,0.5)}
.fblf07{background-color:rgba(25,15,65,0.7)}

.star .fbl{background-color: #862466 !important}
.sky .fbl{background-color: #58B2DC !important}
.sea .fbl{background-color: #19BDC5 !important}



.fade.fb:after {content: "";text-align: right;position: absolute;bottom: 0;right: 0;width: 40%; height: 1em;background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 70%);}
.cover{background-size: cover;background-position: center;}
.after{position: relative}
.after::after {background-color:#000;content: "";height: 100%;left: 0;opacity: 0.5;position: absolute;top: 0;width: 100%;}
.after:hover::after {background-color: rgba(0,0,0,0.6);  transition: 1s ease-out; cursor: pointer;}

/*******COULEUR***********/
.blanc07{color:rgba(255,255,255,0.7)}
.blanc{color:#ffffff;}
.noir{color:#575759}
.black{background-color:#000}
.g999{color:#999;}
.g666{color:#666;}
.geee{color:#eee;}
.gccc{color:#ccc;}
.gbbb{color:#bbb;}
.bleu{color: #71C5E8}
.jaune{color: #FBBB17}
.bleu.fonce{color: #19103F}
.rose{color:#B62077}
.star .bleu{color : #862466 !important}
.sky .bleu{color : #58B2DC !important}
.sea .bleu{color : #19BDC5 !important}

/*******FONTS***********/
.kapra{font-family: 'Kapra',sans-serif; text-transform:uppercase; font-weight: 600;}
.bold{font-weight: bold;}
.font10{font-size:10px;}
.font11{font-size:11px;}
.font12{font-size:12px;}
.font14{font-size:14px;}
.font15{font-size:15px;}
.font16{font-size:16px;}
.font18{font-size:18px;}
.font20{font-size:20px;}
.font22{font-size:22px;}
.font24{font-size:24px;}
.font25{font-size:25px;}
.font26{font-size:26px;}
.font28{font-size:28px;}
.font30{font-size:30px;}
.font35{font-size:35px;}
.font40{font-size:40px;}
.font45{font-size:45px;}
.font50{font-size:50px;}
.font60{font-size:60px;}
.font120{font-size:120px;}
.font100{font-weight: 100}
.font300{font-weight: 300}
.font400{font-weight: 400}
.font700{font-weight: 700}
.font900{font-weight: 900}

.font100{font-weight:100;letter-spacing: 0 !important}
.upper{text-transform:uppercase;}
.capital{text-transform:capitalize;}
.lower{text-transform:lowercase;}
.pointer,.liencache,.target{cursor:pointer}
.italic{font-style:italic}
.barre{text-decoration:line-through}
.underline{text-decoration:underline}
.nounder{text-decoration:none !important}
.center{text-align:center}
.justify{text-align:justify}
.txtRight{text-align:right}
.txtLeft{text-align:left !important}
.etc{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.letter3{letter-spacing: 3px}
.letter5{letter-spacing: 5px}
.letter10{letter-spacing: 10px}
.txtombre{text-shadow: 0 2px 2px #000000}
.txtombre2{text-shadow: 2px 2px 6px #000000}
.txtombrebl{text-shadow: 2px 2px 6px #ffffff}

.ligneTab:nth-child(even){background-color: #eee;}
.ligneTab:nth-child(odd){background-color: #fff;}

/*******FORM***********/
select{font-size:14px;background: transparent;border:none;outline:none;display: inline-block;-webkit-appearance: none;-moz-appearance: none;-ms-appearance: none;-o-appearance: none;appearance: none;cursor:pointer;padding-right: 26px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;margin: 0  !important;width:100% !important;height:35px;color: inherit;padding-left: 2px}
.select.pad0 select{position: absolute;top:0}
.select.pad0{height:30px !important}
select::-ms-expand {
    display: none;
}
.spinner{background: url('https://static.cruiseline.eu/images/gfx/loading.gif') no-repeat center right;}

@media screen and (-webkit-min-device-pixel-ratio:0) {select {padding-right:25px}}
label.select {position:relative;padding: 0;display: block;height: 35px;line-height: 35px}
label.select.none {
    display: none;
}
label.select{padding-left: 10px}
label.select::before {font-family: "Flaticon";color:#FBBB17;font-size: 16px;pointer-events: none;position: absolute; left: 2px;text-align: center;top: 0px;width: 24px;height: 30px;line-height: 30px;box-sizing: inherit;}

label.select.dest::before{content:"\e018"}
label.select.date::after{content:"\e017"}
label.select.port::before{content:"\e004"}
label.select.bateau::before{content:"\e00a"}
label.select.budget::before{content:"\e032"}

label.select::after {font-family: "Flaticon"; content: "\e009"; color:#131E29; font-size: 18px; pointer-events: none;position: absolute;right: 2px; top: 0px;width: 24px;height: 35px;line-height: 35px;box-sizing: inherit;}
.input::after,.check:not(.icon)::after, .textarea::after {box-sizing: inherit;font-size: 18px;line-height: 35px;height: 35px;pointer-events: none;position: absolute;right: 5px;text-align: center;top: 0;width: 24px;color:131E29}
.combo.after::after {box-sizing: inherit;font-size: 14px;line-height: 35px;height: 35px;pointer-events: none;position: absolute;left: 0;text-align: center;top: 0;width: 24px;}
.combo.after.line30::after,.check:not(.icon).line30::after {line-height: 30px !important;height: 30px !important}
label.select.pad0::after,label.select.pad0::before {height: 25px !important;line-height: 25px !important}
option {padding: 5px 0;color: #575759 !important}
option:nth-child(even){background-color: #eee;}
option:nth-child(odd){background-color: #fff;}
input[type=text],input[type=password],input[type=email],input[type=number], input[type="tel"]{background-color: transparent;border:none;resize:none;font-size:14px;text-align: inherit;padding-left:5px;color:#575759;padding-right: 35px}
input[type=submit]{border:none;resize:none;font-size:14px;-webkit-appearance: none;color:#131E29;}
input.orange{color: #FD3F26}
input.error, select.error{border:1px solid #FD3F26!important;color: #FD3F26;}
input.bleu{color: #71C5E8}
input.vert{color: #00bf74}
input.blanc{color: #fff}
textarea{border: none;resize: none;color: #575759;font-size: 14px;font-weight: 400;background-color: transparent;padding: 10px 0 0 5px;}
input[type=file]{padding:3px 0 3px 2px;resize:none;border-radius:5px}
input[readonly=readonly],input[readonly=readonly]:focus{background-color:transparent;color:#999 !important;cursor:default;-moz-user-select:-moz-none;-webkit-user-select:none;-khtml-user-select:none;-o-user-select:none;user-select:none}
input[type=text]:focus,input[type=password]:focus,input[type=email]:focus,input[type=number]:focus{color:#25a3bc}
button {color: inherit;}
*:focus {
    outline: none;
}
.select.disabled,.ms-choice.disabled  {background-color:#eee;}
.input,.check:not(.icon),.combo {position:relative;line-height: 35px;height: 35px; }
.check:not(.icon).line30,.combo.line30 {line-height: 30px !important;height: 30px !important}
.placeholder{top:0;left:0;height: 33px;line-height: 33px}
.placeholder.active{left: 0;top: -5px;line-height: 10px;height: 10px;font-size: 11px}


input[type="checkbox"]:checked+label,
input[type="radio"]:checked+label {
    color: #19103F;
}

input[type="checkbox"]+label,
input[type="radio"]+label {
    cursor: pointer;
    display: block;
    font-size: 12px;
    padding-left: 20px;
    position: relative
}

input[type="checkbox"]+label>.icon:after {
    content: "\e011";
    left: 0;
    position: absolute;
    top: 0px
}

input[type="checkbox"]:checked+label>.icon:after {
    content: "\e013";
}

input[type="radio"]+label>.icon:after {
    content: "\e045";
    left: 0;
    position: absolute;
    ;
    top: 2px
}

input[type="radio"]:checked+label>.icon:after {
    content: "\e046";
}


/*******POPUP***********/
.popup,.pop{margin:0 auto;width:100%}
#popupContact,#popupImg,#blocContact{background:#222;bottom:0;display:none;left:0;position:fixed;right:0;top:0;z-index:20;opacity:0.7}
#popupContenu{background:#fff;box-shadow:0 3px 10px 0 #222;display:none;padding:10px;position:fixed;z-index:20;border-radius: 5px}

#popupLoad {
    background: rgba(255, 255, 255, 0.7) url("../images/gfx/loader.gif") no-repeat scroll center center;
    bottom: 0;
    display: none;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1000;
}
#popupBlanc {background-color: rgba(255, 255, 255, 0.7);bottom: 0;display: none;left: 0;position: fixed;right: 0;top: 0;z-index: 2;}
.loading {background-image: url("../images/gfx/loader.gif");background-position: center center;background-repeat: no-repeat;}

.loader2 {background:rgba(255, 255, 255, 0.7) url("https://static.cruiseline.eu/images/loader2.gif") no-repeat scroll center center;z-index:4;}
.croix:hover{background-color: #fc507a;}

/*******BOUTON***********/
.bouton {cursor:pointer;text-transform:uppercase;}
.bouton.fj{}
.bouton.fb {border:1px solid #ccc}

/***********BLOCK****************/

.bloc3{margin-left: 2%}
.bloc4{margin-left: 2%}
.bloc42{margin-left: 2%}
.bloc5{margin-left: 2.5%}
.bloc3:nth-child(3n+1),.bloc4:nth-child(4n+1),.bloc42:nth-child(4n+1),.bloc5:nth-child(5n+1){margin-left: 0}
.canvasjs-chart-credit{display: none !important}
.box:before{padding-top: 50%}

/***********ICONS****************/
.icon {font-family: "Flaticon"; font-style: 1rem;}
.iconbefore:before {font-family: "Flaticon";font-style: 1rem;position: relative; margin-right:10px;}
.iconbefore{padding-left: 20px;position: relative}

.icon.activite:after {content: "\e001";}
.icon.adulte:after {content: "\e002";}
.icon.amerique-du-sud:after {content: "\e003";}
.icon.ancre:after {content: "\e004";}
.icon.anniversaire:after {content: "\e005";}
.icon.arobase:after {content: "\e006";}
.icon.asie:after {content: "\e007";}
.icon.bas.big:after {content: "\e008";}
.icon.bas:after {content: "\e009";}
.icon.bateau:after {content: "\e00a";}
.icon.blog:after {content: "\e00b";}
.icon.transfert:after {content: "\e00c";}
.icon.cabine:after {content: "\e00d";}
.icon.cadeau:after {content: "\e00e";}
.icon.capitain:after {content: "\e00f";}
.icon.caraibes:after {content: "\e010";}
.icon.check-1:after {content: "\e011";}
.icon.check:after {content: "\e012";}
.icon.checkactive:after {content: "\e013";}
.icon.close:after {content: "\e014";}
.icon.coeur:after {content: "\e015";}
.icon.credit-a-bord:after {content: "\e016";}
.icon.date:after {content: "\e017";}
.icon.dest:after {content: "\e018";}
.icon.drapfr:after {content: "\e019";}
.icon.drapit:after {content: "\e01a";}
.icon.enfant-gratuit:after {content: "\e01b";}
.icon.enfant:after {content: "\e01c";}
.icon.equipage:after {content: "\e01d";}
.icon.etoile.active:after {content: "\e01e";}
.icon.etoile:after {content: "\e01f";}
.icon.europe-du-nord:after {content: "\e020";}
.icon.facebook:after ,.iconbefore.facebook:before {content: "\e021";}
.icon.famille:after {content: "\e022";}
.icon.garanti:after {content: "\e023";}
.icon.google:after {content: "\e024";}
.icon.hauteur:after {content: "\e025";}
.icon.headset:after {content: "\e026";}
.icon.home:after {content: "\e027";}
.icon.info:after {content: "\e028";}
.icon.info2:after {content: "\e029";}
.icon.instagram:after,.iconbefore.instagram:before {content: "\e02a";}
.icon.itineraire:after {content: "\e02b";}
.icon.mail:after {content: "\e02c";}
.icon.mediterranee:after {content: "\e02d";}
.icon.menu-1:after {content: "\e02e";}
.icon.menu:after {content: "\e02f";}
.icon.message:after {content: "\e030";}
.icon.moins:after {content: "\e031";}
.icon.money:after {content: "\e032";}
.icon.moyen-orient:after {content: "\e033";}
.icon.next.big:after {content: "\e034";}
.icon.next:after {content: "\e035";}
.icon.noce:after {content: "\e036";}
.icon.nuit:after {content: "\e037";}
.icon.pacifique:after {content: "\e038";}
.icon.passagers:after {content: "\e039";}
.icon.pdf:after {content: "\e03a";}
.icon.photo:after {content: "\e03b";}
.icon.play:after {content: "\e03c";}
.icon.plus:after {content: "\e03d";}
.icon.poids:after {content: "\e03e";}
.icon.power:after {content: "\e03f";}
.icon.pression1:after {content: "\e040";}
.icon.pression2:after {content: "\e041";}
.icon.pression3:after {content: "\e042";}
.icon.prev.big:after {content: "\e043";}
.icon.prev:after {content: "\e044";}
.icon.radio:after {content: "\e045";}
.icon.radioactive:after {content: "\e046";}
.icon.restau:after,.icon.pension:after {content: "\e047";}
.icon.royal:after {content: "\e048";}
.icon.search:after {content: "\e049";}
.icon.secure:after {content: "\e04a";}
.icon.spa:after {content: "\e04b";}
.icon.speed:after {content: "\e04c";}
.icon.sport:after {content: "\e04d";}
.icon.tel:after {content: "\e04e";}
.icon.temperature:after {content: "\e04f";}
.icon.tout-inclus:after {content: "\e050";}
.icon.train:after {content: "\e051";}
.icon.twitter:after,.iconbefore.twitter:before {content: "\e052";}
.icon.user:after {content: "\e053";}
.icon.vk:after {content: "\e054";}
.icon.vol:after,.icon.vol-inclus:after {content: "\e055";}
.icon.whatsapp:after {content: "\e056";}
.icon.wifi:after {content: "\e057";}
.icon.world:after {content: "\e058";}
.icon.royal-head:after,.iconbefore.royal-head:before {content: "\e059";}
.icon.youtube:after,.iconbefore.youtube:before {content: "\e05a";}
.icon.crown:after {content: "\e05b";}
.icon.hublot:after {content: "\e05c";}
.icon.amerique-du-nord:after {content: "\e05d";}
.icon.document:after {content: "\e05e";}
.icon.secure:after {content: "\e05f";}
.icon.enregistrement:after {content: "\e060";}
.icon.atlantique:after {content: "\e061";}
.icon.experience:after {content: "\e062";}
.icon.list:after {content: "\e063";}
.icon.drap:after {content: "\e064";}
.icon.handicap:after {content: "\e065";}
.icon.dr{position: relative}
.icon.dr:after{position: absolute;right: 10px}

.rotate-1{-ms-transform: rotate(-1deg); /* IE 9 */
          -webkit-transform: rotate(-1deg); /* Chrome, Safari, Opera */
          transform: rotate(-1deg);
}
.rotate1{-ms-transform: rotate(1deg); /* IE 9 */
         -webkit-transform: rotate(1deg); /* Chrome, Safari, Opera */
         transform: rotate(1deg);
}
.rotate{-ms-transform: rotate(180deg); /* IE 9 */
        -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
        transform: rotate(180deg);
}
.rotate90{-ms-transform: rotate(90deg); /* IE 9 */
          -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
          transform: rotate(90deg);
}
.rotate270{-ms-transform: rotate(270deg); /* IE 9 */
           -webkit-transform: rotate(270deg); /* Chrome, Safari, Opera */
           transform: rotate(270deg);
}
.trigauche::before{
    border-bottom: 10px solid transparent;
    border-right: 10px solid #fff;
    border-top: 10px solid transparent;
    content: " ";
    height: 0;
    left: -10px !important;
    position: absolute;
    top: 10px;
    width: 0;
}
.trigauche.fg::before{
    border-right: 10px solid #eee;
}
.tribas::before{
    border-left: 10px solid rgba(0, 0, 0, 0);
    border-right: 10px solid rgba(0, 0, 0, 0);
    border-top: 10px solid #fff;
    bottom: -10px;
    content: " ";
    height: 0;
    left: calc(50% - 10px);
    position: absolute;
    width: 0;
}
.trihaut::before{
    border-left: 10px solid rgba(0, 0, 0, 0);
    border-right: 10px solid rgba(0, 0, 0, 0);
    border-bottom: 10px solid #fff;
    top: -10px;
    content: " ";
    height: 0;
    left: calc(50% - 10px);
    position: absolute;
    width: 0;
}
.trihaut.fn::before{
    border-bottom: 10px solid #222;
}
.tribas.fbl::before{
    border-top: 10px solid #71C5E8;
}
.tridroite::before{
    border-bottom: 10px solid transparent;
    border-left: 10px solid #fff;
    border-top: 10px solid transparent;
    content: " ";
    height: 0;
    right: -10px !important;
    position: absolute;
    top: calc(50% - 10px);
    width: 0;
}
.tricomp::before{
    border-bottom: 50px solid transparent;
    border-left: 30px solid #bbb;
    border-top: 50px solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    right: -30px !important;
    top: 0;
    width: 0;
    z-index: 999;
}

/***********NAV****************/
.cdf{margin: 20px 0}
nav{padding: 0;width: 100%}
/*nav::after {
    border-bottom: 30px solid transparent;
    border-right: 20px solid white;
    border-top: 30px solid transparent;
    bottom: 0;
    content: "";
    height: 0;
    position: absolute;
    right: -20px;
    width: 0;
    background-color: #061566
}
nav::before {
    border-bottom: 10px solid transparent;
    border-right: 20px solid #010553;
    border-top: 0 solid transparent;
    bottom: -10px;
    content: "";
    height: 0;
    left: 0;
    position: absolute;
    width: 0;
}*/
.menu.active:before{
    border-left: 10px solid rgba(0, 0, 0, 0);
    border-right: 10px solid rgba(0, 0, 0, 0);
    border-bottom: 10px solid #fff;
    bottom: 0;
    content: " ";
    height: 0;
    left: calc(50% - 10px);
    position: absolute;
    width: 0;
}
.submenu{top: 100%;z-index: 999;left:0;}
.submenu a:hover *{color:#FBBB17 !important}

nav > li:hover, nav > li.active {
    background-color:#136fb8!important;
}




/***********BORDER****************/
.bafterbl,.bafterbl > div,.baftero,.baftero > div,.bafterv,.bafterv > div,.bafterp,.bafterp > div{position: relative}
.bafterbl:before{border-top-color: #ABE1FB !important;border-left-color: #ABE1FB!important}
.bafterbl:after{border-top-color: #33C2E0!important;border-right-color: #33C2E0!important}
.bafterbl > div:before{border-bottom-color: #1370B6!important;border-left-color: #1370B6!important}
.bafterbl > div:after{border-bottom-color: #180E40!important;border-right-color: #180E40!important}

.bafterp:before{border-top-color: #ED3E81 !important;border-left-color: #ED3E81!important}
.bafterp:after{border-top-color: #B62079!important;border-right-color: #B62079!important}
.bafterp > div:after{border-bottom-color: #762282!important;border-right-color: #762282!important}
.bafterp > div:before{border-bottom-color: #F3719F!important;border-left-color: #F3719F!important}

.bafterj:before{border-top-color: #FFEEBE !important;border-left-color: #FFEEBE!important}
.bafterj:after{border-top-color: #FFD766!important;border-right-color: #FFD766!important}
.bafterj > div:after{border-bottom-color: #D89812!important;border-right-color: #D89812!important}
.bafterj > div:before{border-bottom-color: #FBBB17!important;border-left-color: #FBBB17!important}

.bafterv:before{border-top-color: #B5DCAF !important;border-left-color: #B5DCAF!important}
.bafterv:after{border-top-color: #03A679!important;border-right-color: #03A679!important}
.bafterv > div:after{border-bottom-color: #00A9AC!important;border-right-color: #00A9AC!important}
.bafterv > div:before{border-bottom-color: #A7BE3A!important;border-left-color: #A7BE3A!important}

.bafterbl:before,.baftero:before,.bafterv:before,.bafterp:before,.bafterj:before{position: absolute;content: "";width: 50%;height: 50%;border-top: 10px solid #ccc;border-left: 10px solid #ccc;left:0;top:0;z-index: 2;}
.bafterbl:after,.baftero:after,.bafterv:after,.bafterp:after,.bafterj:after{position: absolute;content: "";width: 50%;height: 50%;border-top: 10px solid #eee;border-right: 10px solid #eee;right:0;top:0;z-index: 2;}
.bafterbl > div:before,.baftero > div:before,.bafterv > div:before,.bafterp > div:before,.bafterj > div:before{position: absolute;content: "";width: 50%;height: 50%;border-bottom: 10px solid #999;border-left: 10px solid #999;left:0;bottom:0;z-index: 2;}
.bafterbl > div:after,.baftero > div:after,.bafterv > div:after,.bafterp > div:after,.bafterj > div:after{position: absolute;content: "";width: 50%;height: 50%;border-bottom: 10px solid #bbb;border-right: 10px solid #bbb;right:0;bottom:0;z-index: 2;}

.soustitre {font-weight: 700;font-size: 16px;color: #71C5E8;}
.note {font-size: 12px;color: #71C5E8;}
.asterisque {color: #71C5E8;cursor:pointer;}
.star .titre.bleu:after{border-bottom: 2px solid #862466 !important}
.sky .titre.bleu:after{border-bottom: 2px solid #58B2DC !important}
.sea .titre.bleu:after{border-bottom: 2px solid #19BDC5 !important}
@media only screen and (max-width: 400px) {
    .noneMobile{display:block}
    .nonePc{display:none}
}

#callmeback {
    bottom:-550px;
    right:20px;
    width:310px;
    z-index:10;
    border: 3px solid #71C5E8;
}

#callmeback #titreCallmeback {
    border-bottom: 1px solid #71C5E8;
    padding: 5px 0;
    margin: 0 10px;
}

#formCallmeback input[type=text], #formCallmeback input[type=email], #formCallmeback input[type="tel"], #formCallmeback select,
#formCallmeback2 input[type=text], #formCallmeback2 input[type=email], #formCallmeback2 input[type="tel"], #formCallmeback2 select {
    height:40px;
    background:#fff;
    border:2px solid #ccc;
    width:100%;
    margin-bottom:10px!important;
}

.blocbas b {
    font-size:16px;
}

.blocbas a {
    color:#71C5E8;
}

/*************SWITCH****************/
.switch {background-color: white;background-image: linear-gradient(to bottom, #e0e0e0, white 25px);border-radius: 18px;box-shadow: 0 -1px white inset, 0 1px 1px rgba(0, 0, 0, 0.05) inset;cursor: pointer;padding: 3px;}
.curseur{background-color: #eceeef;border-radius: inherit;box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) inset, 0 0 3px rgba(0, 0, 0, 0.2) inset;height: inherit;content: "ON" !important;font-size:13px}
.switch.off .curseur::before{opacity:1}
.switch.off .curseur::after{opacity:0}

.curseur{background-color: rgba(0, 153, 204,0.6) !important;}

.switch.off .curseur {background-color: #eceeef !important;}

.curseur::after,.curseur::before{line-height: 1;margin-top: -0.5em;position: absolute;top: 50%;-webkit-transition: 0.3s ease 0s; -moz-transition: 0.3s ease 0s; -o-transition: 0.3s ease 0s; -ms-transition: 0.3s ease 0s; transition: 0.3s ease 0s;text-align: center;width:60%}
.curseur::after {color: white;content: "ON";text-shadow: 0 1px rgba(0,0,0, 0.2);left:0}

.curseur::before {color: #aaa;content: "OFF";text-shadow: 0 1px rgba(255, 255, 255, 0.5);right:0;opacity:0}


.curseur.rep{background-color: #0099CC !important;}
.point{background: white linear-gradient(to bottom, white 40%, #f0f0f0) repeat scroll 0 0;border-radius: 10px;box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);height: 18px;left: calc(100% - 22px);position: absolute;top: 4px;width: 18px;}
.switch.off .point{box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);left: 4px !important;}


/*LISTE*/
.blocaff li.aff,
.blocaff li.unavailable,
.blocaff option.unavailable {
    display: none
}
.blocaff li.aff.first5 {
    display: block
}
@media only screen and (max-width: 1300px) {
    .blocCroisiere .slide {
        width: 200px
    }
    .blocCroisiere .blocinfo {
        width: calc(100% - 210px) !important;
        width: -webkit-calc(100% - 210px) !important;
        width: -moz-calc(100% - 210px) !important
    }
/*    .blocCroisiere .slide {
        width: 250px
    }*/
    .blocCroisiere .blocinfo {
        width: 400px;
        width: calc(100% - 260px) !important;
        width: -webkit-calc(100% - 260px) !important;
        width: -moz-calc(100% - 260px) !important
    }
    #affinage {
        margin-top: 0
    }
    .infotxt {
        line-height: 15px;
    }
}

#slide_destination:before{
    content:"";
    width:100%;
    height:50px;
    top:-30px;
    left:0;
    position:absolute;
    transform: skew(0, -0.5deg);
    background-color: #f4f4f4;
    z-index: 2;
}
#slide_destination:after{
    content:"";
    width:100%;
    height:50px;
    bottom:-30px;
    left:0;
    position:absolute;
    transform: skew(0, -0.5deg);
    background-color: #f4f4f4;
    z-index: 2;
}

#slide_activites:before{
    content:"";
    width:100%;
    height:50px;
    top:-30px;
    left:0;
    position:absolute;
    transform: skew(0, -0.5deg);
    background-color: #f4f4f4;
    z-index: 2;
}
/*#slide_activites:after{
    content:"";
    width:100%;
    height:50px;
    bottom:-30px;
    left:0;
    position:absolute;
    transform: skew(0, -0.5deg);
    background-color: #f4f4f4;
    z-index: 2;
}*/

.legende2 {
    text-transform: uppercase;
    font:bold 2.5rem 'Kapra',sans-serif;
    text-shadow:0 0 5px rgba(0,0,0,0.5);
    margin:0 auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}



.txt {
    transform: scale(0);
}

.photolegende2:hover .txt {
    transform: scale(1);
}
/***********ONGLETS****************/
#onglets li {
    font-size: 14px;
    border: 1px solid #131E29;
}

#onglets li:hover, #ongletcroisiere:hover, #ongletscroisiere:focus, #ongletpackage:hover, #ongletpackage:focus {
    background-color: #131E29;
    color: #fff;
}


/*******MASONRY*********/
.selection {
    -moz-column-count: 3;
    -moz-column-gap: 0;
    -moz-column-width: 33%;
    -webkit-column-count: 3;
    -webkit-column-gap: 0;
    -webkit-column-width: 33%;
    column-count:3;
    column-gap: 0;
    column-width: 33%;
}


.selection>* {
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid-column;
    display: table
} 

.survol::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    top: 0;
    left: 0;
    transition: 0.5s ease-in;
}

#moteur.fixed .select,#moteur.fixed input[type=submit] {
    width: 18%;
}

#moteur.fixed #recherche {
    display: flex;display: -webkit-flex;-webkit-flex-direction: row;-ms-flex-direction: row;flex-direction: row;
    -webkit-align-items: center;-ms-flex-align: center;align-items: center;
}

#moteur.fixed #bt_rech {
    padding: 10px;
}

.l0 {
    left: 0px;
}

#moteur.fixed {
    height: auto;
}
.cont {
    top: 100%;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    -webkit-transition: 0.3s ease 0s;
    -moz-transition: 0.3s ease 0s;
    -o-transition: 0.3s ease 0s;
    -ms-transition: 0.3s ease 0s;
    transition: 0.3s ease 0s;
}

.cont:after {
    content: '\e014';
    font-family: 'Flaticon';
    position: absolute;
    right: 25px;
    top: 25px;
    font-size: 20px;
    height: 40px;width: 40px;line-height: 40px;
    text-align: center;
    color: #999;
    cursor: pointer;
}
.cont.active {
    top: 0;
}