/*******FONT***********/
.teko{font-family: 'Teko'}

/***********ICONS****************/
.icon.alarm:after { content: "\f100"; }
.icon.enfant:after { content: "\f101"; }
.icon.info:after { content: "\f102"; }
.icon.next-big:after { content: "\f103"; }
.icon.prev.big:after { content: "\f104"; }
.icon.search:after { content: "\f105"; }
.icon.mail:after { content: "\f106"; }
.icon.money:after { content: "\f107"; }
.icon.dest:after { content: "\f108"; }
.icon.back:after { content: "\f109"; }
.icon.etoile.active:after { content: "\f10a"; }
.icon.move:after { content: "\f10b"; }
.icon.coche.active:after { content: "\f10c"; }
.icon.bas.big:after { content: "\f10d"; }
.icon.play:after { content: "\f10e"; }
.icon.adulte:after { content: "\f10f"; }
.icon.info2:after { content: "\f110"; }
.icon.photo:after { content: "\f111"; }
.icon.cabine:after { content: "\f112"; }
.icon.tel:after { content: "\f113"; }
.icon.home:after { content: "\f114"; }
.icon.garanti:after { content: "\f115"; }
.icon.credit-a-bord:after { content: "\f116"; }
.icon.carte:after { content: "\f117"; }
.icon.filtre:after { content: "\f118"; }
.icon.valide:after { content: "\f119"; }
.icon.vol:after,.icon.vol-inclus:after { content: "\f11a"; }
.icon.coche:after { content: "\f11b"; }
.icon.secure2:after { content: "\f11c"; }
.icon.restau:after { content: "\f11d"; }
.icon.etoile:after { content: "\f11e"; }
.icon.bas:after { content: "\f11f"; }
.icon.prev:after { content: "\f120"; }
.icon.next:after { content: "\f121"; }
.icon.radio:after { content: "\f122"; }
.icon.radio.active:after { content: "\f123"; }
.icon.assurance:after { content: "\f124"; }
.icon.duree:after { content: "\f125"; }
.icon.user:after { content: "\f126"; }
.icon.carte.multiple:after { content: "\f127"; }
.icon.equipage:after { content: "\f128"; }
.icon.secure:after { content: "\f129"; }
.icon.date:after { content: "\f12a"; }
.icon.message:after { content: "\f12b"; }
.icon.clock:after { content: "\f12c"; }
.icon.alert:after { content: "\f12d"; }
.icon.plus:after { content: "\f12e"; }
.icon.search:after { content: "\f12f"; }
.icon.headset:after { content: "\f130"; }
.icon.close:after { content: "\f131"; }
.icon.menu:after { content: "\f132"; }
.icon.passagers:after { content: "\f133"; }
.icon.moins:after { content: "\f134"; }
.icon.change:after { content: "\f135"; }
.icon.rate:after { content: "\f136"; }
.icon.medecin:after { content: "\f137"; }
.icon.edit:after { content: "\f138"; }
.icon.poubelle:after,.icon.delete:after { content: "\f139"; }
.icon.bateau:after { content: "\f13a"; }
.icon.depit:after { content: "\f13b"; }
.icon.depes:after { content: "\f13c"; }
.icon.depfr:after { content: "\f13d"; }
.icon.quatrex:after { content: "\f13e"; }
.icon.new:after { content: "\f13f"; }
.icon.wifi:after,.icon.internet-illimite:after { content: "\f140"; }
.icon.enfant-gratuit:after { content: "\f141"; }
.icon.transfert:after { content: "\f142"; }
.icon.pension:after { content: "\f143"; }
.icon.tout-inclus:after { content: "\f144"; }
.icon.arobase:after { content: "\f145"; }
.icon.mail:after { content: "\f146"; }
.icon.portable:after { content: "\f147"; }
.icon.boutique:after { content: "\f148"; }
.icon.valide:after { content: "\f149"; }
.icon.error:after { content: "\f14a"; }
.icon.pdf:after { content: "\f14b"; }
.icon.aide:after { content: "\f14c"; }
.icon.ti:after { content: "\f14d"; }
.icon.money:after { content: "\f14e"; }
.icon.cadeau:after { content: "\f14f"; }
.icon.power:after { content: "\f150"; }
.icon.folder:after { content: "\f151"; }
.icon.folder.open:after { content: "\f152"; }
.icon.facebook:after { content: "\f153"; }
.icon.google:after { content: "\f154"; }
.icon.pj:after { content: "\f155"; }
.icon.ok:after { content: "\f156"; }
.icon.ko:after { content: "\f157"; }


.star.bleu {
    background: rgba(0, 0, 0, 0) url("https://static.qcnscruise.com/images/etoileBleu.png") repeat-x scroll left center;
}
.star.jaune {
    background: rgba(0, 0, 0, 0) url("https://static.qcnscruise.com/images/etoileJaune.png") repeat-x scroll left center;
}
.star.gris {
    background: rgba(0, 0, 0, 0) url("https://static.qcnscruise.com/images/etoileGris.png") repeat-x scroll left center;
}
.star {
    background: rgba(0, 0, 0, 0) url("https://static.qcnscruise.com/images/etoile.png") repeat-x scroll left center;
    height: 10px;
    width: 50px;
}


/*******BORDER***********/
.br{border-right:1px solid #ccc;}
.brb{border-right:1px solid #fff;}
.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}
.btbl{border-top:1px solid #3D506B !important}
.bbbl{border-bottom:1px solid #3D506B !important}
.bn{border:none}
.bar{border:1px solid #ff4000}
.ba{border:1px solid #ccc}
.ba5bl{border:5px solid #51698E}
.ombrePhoto{box-shadow: 13px 10px 30px -5px rgba(0, 0, 0, 0.5) inset}

/*******BACKGROUND***********/

.fg { background-color:#eee}
.fde { background-color:#dedede}
.fc { background-color:#ccc}
.fn { background-color:#222}
.fblf { background-color:#254958}
.fbln { background-color:#1c3642}
.fblface { background-color:#4267B2}
.fbl { background-color:#09c}
.fblc{background-color: #6382A9}
.fblc2{background-color: #66C2E0}
.fbl1{background-color: #364760}
.fbl2{background-color: #304056}
.fbl3{background-color: #293649}
.fbl4{background-color: #2D3B50}
.fbl5{background-color: #222c3c}
.fbl6{background-color: #242F3F}
.fvc { background-color:#CEE9D9}
.fv { background-color:#44C260}
.fj { background-color:#fc3}
.fjf { background-color:#fcb329}
.fr { background-color:#ff4000;}
.frgoogle { background-color:#DB4437;}
.fo { background-color:#ffa200}
.foc { background-color:#FFDFBF}
.ff2 { background-color:#f2f2f2}
.ff6 { background-color:#f6f6f6}
.fe6 { background-color:#e6e6e6}
.fd6 { background-color:#d6d6d6}
.fb { background-color:#fff}
.f9 { background-color:#999}
.f6 { background-color:#666}
.fb04 { background-color:rgba(255,255,255,.4)}
.fb08 { background-color:rgba(255,255,255,.8)}
.fn04 { background-color:rgba(28,54,66,.4)}
.fn07 { background-color:rgba(0,0,0,.7)}
.fgdeg { background: rgb(204,204,204);
background: -moz-linear-gradient(top, rgba(204,204,204,1) 0%, rgba(238,238,238,1) 100%);
background: -webkit-linear-gradient(top, rgba(204,204,204,1) 0%,rgba(238,238,238,1) 100%);
background: linear-gradient(to bottom, rgba(204,204,204,1) 0%,rgba(238,238,238,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#eeeeee',GradientType=0 );}
.ligneTab2:nth-child(even),.ligneTab:nth-child(odd) { background-color:#fff}
.ligneTab2:nth-child(odd),.ligneTab:nth-child(even) { background-color:#eee}
.fhover:hover{background-color: #eee}
.fhover.fg:hover{background-color: #fff}
.hover:hover{color:#0099cc}

input[type="checkbox"]:checked + label, input[type="radio"]:checked + label {color: #ff4000;}
input[type="checkbox"] + label, input[type="radio"] + label {cursor: pointer;display: block;padding-left: 20px;position: relative}
input[type="checkbox"] + label .icon:after {content: "\f11b";left: 0;position: absolute;top:2px}
input[type="checkbox"]:checked + label .icon:after {content: "\f10c";}
input[type="radio"] + label .icon:after {content: "\f122";left: 0;position: absolute;;top:2px}
input[type="radio"]:checked + label .icon:after {content: "\f123";}


/*******COULEUR***********/
.blanc {color:#fff}
.bleu.fonce {color:#1c3642}

.gec {color:#ececec}
.gb9 {color:#b9b9b9}
.gd6 {color:#d6d6d6}
.gccc {color:#ccc}
.g999 {color:#999}
.noir {color:#5D5F66}
.bleu {color:#09c}
.bleu2 {color:#6382A9}
.jaune {color:#fc3}
.jaune.fonce {color:#fcb329}
.vert {color:#2bb04a}
.vert.clair {color:#44C260}
.rouge {color:#ff4000}



/*******BOUTON***********/
.bouton{position:relative;cursor:pointer}

@keyframes sonarWarning {0% {box-shadow: 0 0 0 0 #ff7f00;}100% {box-shadow: 0 0 0 15px rgba(249, 202, 64, 0);}}
@keyframes sonarDanger {0% {box-shadow: 0 0 0 0 #ff715b;}100% {box-shadow: 0 0 0 15px rgba(255, 113, 91, 0);}}
@keyframes sonarSuccess {0% {box-shadow: 0 0 0 0 #82B440;}100% {box-shadow: 0 0 0 15px rgba(169, 253, 0, 0);}}
.danger {animation: 1.8s linear 0s normal none infinite running sonarDanger;background-color: #ff4000;}
.warning {animation: 1.8s linear 0s normal none infinite running sonarWarning;background-color: #f9cb40;}
.success {animation: 1.8s linear 0s normal none infinite running sonarSuccess;background-color: #82B440;}
.messagepop.popright::after {font-family: "Flaticon";background-color: #d33d28;border-radius: 20px;content: "\f118";font-size: 16px;height: 30px;line-height: 30px;left: -35px;position: absolute;text-align: center;top: calc(50% - 15px);width: 30px;}
.messagepop.popleft::after {font-family: "Flaticon";background-color: #d33d28;border-radius: 20px;content: "\f118";font-size: 16px;height: 30px;line-height: 30px;right: -35px;position: absolute;text-align: center;top: calc(50% - 15px);width: 30px;}
.messagepop.fj::after {content: "\f108";animation: 1.8s linear 0s normal none infinite running sonarWarning;background-color: #ff7f00;}
.messagepop.fr::after {content: "\f12d";animation: 1.8s linear 0s normal none infinite running sonarDanger;background-color: #FD3F26;}
.messagepop.fv::after {content: "\f119";animation: 1.8s linear 0s normal none infinite running sonarSuccess;background-color: #82B440;}

/*******TRIANGLE*********/



/*******HEADER***********/



/*******FOOTER***********/


/*******CDF*************/



/*************BLOC****************/
#menu li:hover{padding-left:5px}
.bloc:not(.notactive){cursor: pointer;-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;}
.bloc.active{border: 1px solid #0099cc;background-color: #fff}
.bloc.active:before{left:0;top:0;content: " ";width: 100%;height:100%;position: absolute;box-shadow:0px 0px 0px 3px #0099cc, 0 0px 20px 5px rgba(0,0,0,0.5);z-index: 1}
.bloc:not(.active):not(.notactive):hover{box-shadow:0 0px 10px 0 rgba(0,0,0,0.5)}
.bloc{position:relative}
.typecab.bloc.active.triangle::after{
    border-left: 20px solid rgba(0, 0, 0, 0);
    border-right: 20px solid rgba(0, 0, 0, 0);
    border-bottom: 20px solid #ccc;
    bottom: -32px;
    content: " ";
    height: 0;
    left: calc(50% - 20px);
    position: absolute;
    width: 0;   
    z-index: 0;
}
#liste li{background-color:#575759;margin-top:5px;padding:10px 50px 10px 10px;position:relative}
#liste li::before {font-family: "Flaticon";color:#fff;font-size: 50px;pointer-events: none;position: absolute;right: 45px;text-align: center;top: 10px;width: 24px;height: 50px;line-height: 50px;box-sizing: inherit;}
#liste li:hover{background-color:#0099cc;color:#ccc}
#liste li:hover .bleu{color:#fff}
#liste li.active{background-color:#0099cc;color:#ccc}
#liste li.active .bleu{color:#fff}
#liste li.active:after{border-bottom:20px solid transparent;border-left:20px solid #0099cc;border-top:20px solid transparent;bottom:calc(50% - 20px);content:" ";height:0;position:absolute;right:-20px!important;width:0;z-index:999}
#liste li.active{background-color:#0099cc}
#liste li.carte::before {content: "\f117"}
#liste li.depart::before {content: "\f136"}
#liste li.ami::before {content: "\f126"}
#liste li.etranger::before {content: "\f137"}
.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%;
}
.selection4 {
    -moz-column-count:4;
    -moz-column-gap: 0;
    -moz-column-width: 25%;
    -webkit-column-count:4;
    -webkit-column-gap: 0;
    -webkit-column-width: 25%;
    column-count: 4;
    column-gap: 0;
    column-width: 25%;
}
.selection5 {
    -moz-column-count:5;
    -moz-column-gap: 0;
    -moz-column-width: 20%;
    -webkit-column-count:5;
    -webkit-column-gap: 0;
    -webkit-column-width: 20%;
    column-count: 5;
    column-gap: 0;
    column-width: 20%;
}
.selection > *,.selection4 > *,.selection5 > * {
    -webkit-column-break-inside: avoid; /* Chrome, Safari */
    page-break-inside: avoid;           /* Theoretically FF 20+ */
    break-inside: avoid-column;         /* IE 11 */
    display:table;                      /* Actually FF 20+ */
}
.liste_message.active .fde{background-color: #222c3c}

/*************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;font-family: "Roboto";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: rgba(255,64,0,0.6) !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:80%;text-align: center}
.curseur::after {color: white;text-shadow: 0 1px rgba(0,0,0, 0.5);left:0}

.curseur::before {color: white;text-shadow: 0 1px rgba(0, 0, 0, 0.5);right:0;opacity:0}


.curseur.rep{background-color: #0099CC !important;}
.curseur.rep::after,.curseur.rep::before {font-family: "Flaticon";content: "\f10c" !important;font-size:16px}
.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;}