/*
font-family: 'Oswald', sans-serif;
font-family: 'PT Sans', sans-serif;
*/
:root{
    --ct-color-primary:#003764;
    --ct-color-secundary:#6687a2;
    --ct-font-primary:'PT Sans', sans-serif;
    --ct-font-secundary:'Oswald', sans-serif;
    --ct-body-font-size: 1.8rem;
    --ct-body-font-weight: 400;
    --ct-body-line-height: 1.4;
    --ct-body-color: #3a3a3a;
    --ct-body-bg: #FFF;
    --ct-color-cta:#f4a600;
}

 h1,h2,h3,h4,h5{font-size:inherit; font-family:inherit; margin:0px; display:inline-block;}

 body{
     font-weight:var(--ct-body-font-weight);
    font-size:var(--ct-body-font-size);
    line-height:var(--ct-body-line-height);
    font-family:var(--ct-font-primary);
    background-color:var(--ct-body-bg);
    color:var(--ct-body-color);
}

md-input-container:has(> md-select[name="petsFerries"]) {
    display: none;
}
     
a{color:var(--ct-color-cta);}
    a:hover{color:var(--ct-color-primary); text-decoration:none; transition:all 0.25s ease-out 0s}

::-moz-selection { color:#fff; background:var(--ct-color-secundary); }
::selection { color:#fff; background:var(--ct-color-secundary); }

.fw,.full-width{width:100%; float:left;}
        .full-width.container{max-width:100%;}
.full-image{background-size:cover; background-position:center;} 

.btn-theme.md-button{text-transform:inherit; line-height:inherit; font-weight:inherit; min-height:inherit; font-size:inherit}

.btn-theme{padding:15px 25px; font-weight:700 !important; font-size:1.9rem !important; text-transform:inherit; color:#FFF !important; background-color:var(--ct-color-primary); border-radius:50px; display:inline-flex !important; box-shadow:0px 0px 21px #0b395f82; align-items:center; justify-content:center; gap:20px}
    .btn-theme span{
        color:var(--ct-color-cta);
    font-size: 20px;}
.btn-theme-alt{padding:15px 25px; font-weight:700; font-size:1.9rem; text-transform:inherit; color:var(--ct-color-cta); background-color:#FFF; border:3px solid var(--ct-color-cta); border-radius:0 50px 50px 50px; display:inline-flex !important;  align-items:center; justify-content:center; gap:20px}
    
    .btn-theme-alt:hover, .btn-theme:hover{background-color:var(--ct-color-cta); color:#FFF}
    .btn-theme-at:hover span, .btn-theme:hover span{color:#FFF}
    

.row-sp{margin-left:-10px; margin-right:-10px;}
.pad-sp{padding:0px 10px;}

.p-0, .no-pad{padding:0px !important}

.color-primary{color:var(--ct-color-primary) !important}
    a.color-primary:hover{opacity:.8}
.color-secundary{color:var(--ct-color-secundary) !important}
    a.color-secundary:hover{opacity:.8}
.color-white{color:#FFF !important}
.color-blueLight{color:#d0d9ea}

.text-alt{font-family:var(--ct-font-secundary)}

.md-dialog .md-dialog-content.loadingCreateBooking md-progress-circular path{color:var(--ct-color-primary)}
.md-dialog .md-dialog-content.loadingCreateBooking span{color:#233746;    font-weight: 500;    font-size: 16px;}
#loader-container {background:var(--ct-color-primary); position: fixed;overflow: hidden;top: 0;right: 0;left: 0;bottom: 0;z-index: 99999;
}
#loader-container::before{content:""; position:absolute; z-index:1; top:50%; left:50%; width:50px; margin-top:-25px; margin-left:-25px;
	aspect-ratio: 1;
	border-radius: 50%;
	border: 8px solid var(--ct-color-cta);
	border-right-color: var(--ct-color-primary);
	animation: spinner 1s infinite linear;}
@keyframes spinner {
	to {
		transform: rotate(1turn);
	}
}

.mt-1{margin-top:10px;}
.mt-2{margin-top:25px;}
.mt-3{margin-top:45px;}
.mt-4{margin-top:80px;}

.mb-1{margin-bottom:10px;}
.mb-2{margin-bottom:25px;}
.mb-3{margin-bottom:45px;}
.mb-4{margin-bottom:80px;}

.font-light{font-weight:300}
.font-medium{font-weight:500}
.font-bold{font-weight:700}
.font-black{font-weight:900}

.font-xxs{font-size:1.4rem}
.font-xs{font-size:1.5rem}
.font-sm{font-size:1.6rem}
.font-md{font-size:1.8rem}
.font-lg{font-size:2.2rem}
.font-xl{font-size:3.4rem; line-height:1.1em}

.material-icons.default, .material-icons-outlined.default{position:relative; top:6px}
.section-header{color:var(--ct-color-secundary); font-family:var(--ct-font-secundary); text-transform:uppercase; font-weight:700}


@media (min-width: 1px) and (max-width: 767px){.clearfix-xs{clear:both !important;}}
@media (min-width: 768px) and (max-width: 992px){.clearfix-sm{clear:both !important;}}
@media (min-width: 992px) and (max-width: 1200px){.clearfix-md{clear:both !important;}}
@media (min-width: 1200px){.clearfix-lg{clear:both !important;}}

md-dialog md-toolbar.md-default-theme:not(.md-menu-toolbar), md-toolbar:not(.md-menu-toolbar){background-color:var(--ct-color-primary);}
    md-dialog md-toolbar h4{font-weight: 700; font-size:18px; font-family:var(--ct-font-secundary); color:#FFF;}
    md-dialog .section-header{font-weight: 700; font-size:18px; font-family:var(--ct-font-secundary); color:#6f6f6e;}
        md-dialog a{color:var(--ct-color-cta); font-size:.9em} 
            md-dialog a:hover{color:var(--ct-color-secundary);}

.md-primary.md-button {
    background-color: var(--ct-color-cta) !important;
    color:#FFF !important;
    text-transform:inherit !important;
    font-weight:700;
    border-radius:25px;
    font-size:.9em;
    border-color:var(--ct-color-secundary) !important;
}

.loginBox .btnLogin {border-radius:25px;
    background-color: var(--ct-color-cta);
    color: #FFF;
    padding: 10px 20px;
    margin:5px 0px;
    width: 100%;
    text-transform: inherit;
    font-weight: 700;}
    .loginBox .btnLogin.btnTwitter {background-color:#1DA1F2}
    .loginBox .btnLogin.btnLinkedin {background-color:#0077b5}
    .loginBox .btnLogin.btnPayPal {background-color:#003087}
    .loginBox .btnLogin.btnTWSClient  {margin-top:10px}
    .loginBox .btnLogin:hover{background-color:var(--ct-color-secundary) !important}
.loginBox md-checkbox, .loginContainer md-checkbox{margin-bottom:0px; font-size:1.5rem}
.loginBox .md-block a, .loginContainer .md-block a{font-size:1.5rem}
.registerBox .loginLink{
    background: var(--ct-color-primary);
    color: #FFF;
    border-radius: 25px;
    padding: 10px 25px;
    display: inline-block;
    margin-top: 10px;
    font-weight: 700;}
.ui-datepicker{border-color:var(--ct-color-primary); z-index:999 !important}
.ui-datepicker th, .ui-datepicker.travel-datepicker .infoPrice, .ui-datepicker.travel-datepicker .ui-datepicker-calendar td a[data-custom-price]::after{color:var(--ct-color-primary)}
.ui-datepicker .ui-datepicker-header{background-color:var(--ct-color-primary)}             

.infoGDPR{margin-bottom:20px}

		/* Sitemap */
		.page-sitemap{font-size:16px;}
			.page-sitemap .container{width:100%; max-width:1340px; margin:30px auto;}

.btn-as-link{
    min-width: auto;
    min-height: inherit;
    margin: 0;
    padding: 0;
    line-height: inherit;
    font: inherit;
    text-transform: none;
    border: 0;
    vertical-align: inherit;
    background: none;}

.line-btns .btn-theme{margin:0px 9px}
.img-box{background-position:50% 50% !important; -webkit-background-size: cover !important; -moz-background-size: cover !important; -o-background-size: cover !important; background-size: cover !important; background-color:#141414;}
.forma-responsive{display:block; position: relative; width: 100%;  background:#23211D;}
.forma-responsive:before{ content: ""; display: block; padding-top:53%;}
.forma-responsive.panoramica:before{ content: ""; display: block; padding-top:48%; border-radius:3px;}
.forma-responsive.squared:before{ content: ""; display: block; padding-top:100%;}
.img-boxed {    position: absolute;    top: 0;    right: 0;    bottom: 0;    left: 0;}

.img-boxed .img-cover {    width: 100%;    height: 100%;    object-fit: cover;}
.box .img-box .deg {    position: absolute;    top: 0;    right: 0;    bottom: 0;    left: 0;    background: none;    transition: .3s;}
.as-link .hover-link {    z-index: 20;    position: absolute;    top: 0;    right: 0;    bottom: 0;    left: 0;}
.as-link .hover-link:hover{background-color:rgba(112,177,224,.5)}

.middle-box {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

md-checkbox.md-default-theme:not([disabled]).md-primary.md-checked .md-icon, md-checkbox:not([disabled]).md-primary.md-checked .md-icon{background-color:var(--ct-color-primary) !important}
.white{color:#fff !important;}    

/* Custom concretos */
.md-open-menu-container.md-active{border-radius:10px;}
.md-menu-content.md-default-theme, md-menu-content{border-radius:10px; background-color:#233746; color:#FFF; }
    md-menu-content.md-default-theme md-menu-item, md-menu-content md-menu-item{color:#FFF;}
    .md-menu-content.md-default-theme .material-icons, md-menu-content .material-icons{color:var(--ct-color-secundary)}
    .md-menu-content.md-default-theme a, md-menu-content a{color:#FFF}
    .md-menu-content.md-default-theme a:hover, md-menu-content a:hover{color:var(--ct-color-cta)}
.header-landing{position:relative; padding:85px 0px; color:#FFF; background-color:#dbe4eb}
.aside-theme{background:var(--ct-color-primary); padding:40px 25px; color:#FFF; border-radius:25px; box-shadow:0px 0px 20px #02204320}
    .aside-theme a{color:#FFF}
    
.aside-theme i{color:#8da6bb}

    
.tabs-theme md-tabs-wrapper{border-radius:25px; background-color:#f4f4f2; padding:5px}	
		.tabs-theme .md-tab{padding:4px 15px;  font-size:16px; text-transform:none; background-color:#fbfcfe; border-radius:25px; margin:0px 3px}		
	.tabs-theme .md-tab.md-active, .tabs-theme .md-tab:hover{color:#FFF; background-color:var(--ct-color-primary)}
	.tabs-theme .md-tab .material-icons{position:relative; top:6px; color:#b7d8eb }
	.tabs-theme .md-tab:hover .material-icons, .tabs-theme .md-tab.md-active .material-icons{color:#FFF}
		.tabs-theme md-ink-bar{display:none}    
/* /Custom concretos*/    

.separator{height:3px; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e00210+0,64af26+50,f4a600+100 */
background: rgb(224,2,16); /* Old browsers */
background: -moz-linear-gradient(left,  rgba(224,2,16,1) 0%, rgba(100,175,38,1) 50%, rgba(244,166,0,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(224,2,16,1) 0%,rgba(100,175,38,1) 50%,rgba(244,166,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(224,2,16,1) 0%,rgba(100,175,38,1) 50%,rgba(244,166,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e00210', endColorstr='#f4a600',GradientType=1 ); /* IE6-9 */
}
.divisor{height:3px;background-color:#63af26}
#web-header .top-line{display:flex; justify-content:space-between; align-items:center; background-color:var(--ct-color-primary);}
    #web-header .top-line .lead{margin:10px; font-size:1.4rem; color:#7cb4df;}
        #web-header .top-line .lead .material-icons{    font-size: 18px;    top: 3px;    position: relative;}
        
        #web-header .top-line .options .md-button, #web-header .top-line .options .md-menu, #web-header .div-links{margin-right:15px}
        #web-header .top-line .options, #web-header .top-line .options a, #web-header .top-line .options .md-button{text-transform:inherit; color:#FFF; font-size:1.4rem; font-weight:700; vertical-align:inherit; background:transparent}
            #web-header .top-line .options, #web-header .top-line .options a:hover, #web-header .top-line .options .md-button:hover{color:var(--ct-color-cta)}
        #web-header .top-line .options .material-icons, #web-header .top-line .options .fab{font-size:18px; color:#549ecf}
         #web-header .top-line .options .md-button .material-icons{position:relative; top:4px; }
         #web-header .top-line .options .md-button .material-icons.icn-mini{color:#397f07}


        #web-header .div-links{padding-top:3px; float:left;}

    #web-header .boxLanguage .md-button img{width:18px; height:18px; border-radius:50%;}

#web-header .bottom-line{width:100%; float:left; background-color:#FFF; padding:20px 0; position:relative;}

    #web-header .bottom-line .navbar-nav .md-button, #web-header .bottom-line .main-line a {padding-top:7px; padding-bottom:7px;  font-size:1.9rem; color:var(--ct-color-primary); font-weight:700;}
    #web-header .bottom-line .navbar-nav li{border-right:2px solid #eeeeee;}
    #web-header .bottom-line .navbar-nav li:last-child{border-right:0px}
        #web-header .bottom-line a:focus, #web-header .bottom-line a:hover{background:transparent; color:var(--ct-color-cta)}
        
    #web-header .bottom-line .brand-logo{z-index:2; position: absolute;  left:0; top:5px;}
        #web-header .bottom-line .brand-logo img{width:100%;}
    #web-header .bottom-line .brand-logo-maroc{z-index:2; position: absolute;  left:50%; top:5px; transform:translateX(-50%)}
            
    #web-header .navbar-toggle{ background-color:#FFF; margin:0px 15px;}
        #web-header .navbar-toggle .icon-bar{background-color:var(--ct-color-secundary);}
    
     #web-header .bottom-line .md-button{text-transform:inherit; font-size:16px; margin-top:7px}

 #web-header .whatsApp-btn{float:right; margin:7px}     
    #web-header .whatsApp-btn .fab{font-size:40px; color:#25D366}
.sidenav-menu-mvl,
	.sidenav-menu-mvl md-content{background:#FFF}
		.sidenav-menu-mvl ul{width:100%; margin:0;}
			.sidenav-menu-mvl ul .md-button, .sidenav-menu-mvl ul li{width:100%; float:left;}
				.sidenav-menu-mvl ul .md-button, .sidenav-menu-mvl ul li a{margin-bottom:2px; padding:13px 11px; font-size:1.7rem; color:var(--ct-color-primary); font-weight:900; border-radius:2px; background:#00000010;}
				    .sidenav-menu-mvl ul .md-button:hover, .sidenav-menu-mvl ul li a:hover{background:#00000015; color:var(--ct-color-secundary);}
				.sidenav-menu-mvl ul .md-button{text-transform:inherit; text-align:left; margin:0px 0px 2px 0px;}       
				

#web-footer{margin-top:50px}
#web-footer .top-line{position:relative; background:var(--ct-color-primary); padding:110px 0px 80px; color:#FFF}
    #web-footer .links li{margin-top:10px; }
        #web-footer .links li a{font-size:16px; color:#FFF}
            #web-footer .links li a:hover{color:#00a0e0}
#web-footer .top-line .btns{display:flex; align-items:center; justify-content: start; gap: 5px;}  
    .btns .btn{text-transform:inherit; font-size:16px; color:#FFF; background-color:#002f55}
#web-footer .phone{display:flex; align-items:center; gap:5px}        
        #web-footer .social-networks li{margin:3px}
        #web-footer .social-networks li a{min-width:45px; height:45px; padding:0px 7px; display:flex; justify-content:center; align-items:center; background-color:#f0f3f9; color:var(--ct-color-primary);font-size:22px}
        #web-footer .social-networks li a svg{width:18px; fill:var(--ct-color-primary)}
            #web-footer .social-networks li a:hover{color:var(--ct-color-cta)}
            #web-footer .social-networks li a:hover svg{fill:var(--ct-color-cta)}
            
            #web-footer .social-networks li a .font-sm{color:#18212e; font-style:italic}
#web-footer .bottom-line{padding:45px 15px; 
    display: flex;
    justify-content: space-between;
    align-items: center;}

#web-footer .bottom-line .powered-by img{margin:0px 10px} 


details summary{background-color:var(--ct-color-primary); color:#FFF; padding:10px; border-radius:10px; cursor:pointer} 
    details summary::after{
        font-family: 'Material Icons';
          content: "chevron_right";
          -webkit-font-feature-settings: 'liga';
        float:right;
    }
details summary:hover, details[open] summary{background-color:var(--ct-color-secundary)} 
details[open] summary::after{font-family: 'Material Icons';
  content: "expand_more";
  -webkit-font-feature-settings: 'liga';
        float:right;}

.main-slider{position:relative; z-index:2; float:left; width:100%; background-color:var(--ct-color-secundary)}
    .main-slider, .main-slider .item{min-height:525px}
    .main-slider.mid, .main-slider.mid .item{min-height:400px}
    .main-slider .layout-top{position:absolute; z-index:1; top:0px; left:0px; right:0px; height:208px; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+0,0+100;White+to+Transparent */
background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
}
    .main-slider .layout-left{position:absolute; z-index:1; top:0px; left:0px; ;




}
    .main-slider .badge-top{position:absolute; z-index:3; top:0; left:0px;}
    .main-slider .position-caption{position:absolute;z-index:2;left:0px; right:0px;bottom:140px}
        .main-slider .caption{margin-left:25px}
    .main-slider .caption .title{font-size:13rem; line-height:1em; text-shadow:26px 3px 35px #00000059}
    .main-slider .caption .subtitle{display:inline-block; padding:7px 15px; background-color:#FFF;color:var(--ct-color-primary)}
        .main-slider .caption .subtitle span{color:var(--ct-color-secundary)}
        
    .main-slider .position-searcher{position:absolute;z-index:1;left:0px; right:0px;bottom:-90px}
.main-slider .carousel-indicators{display:none}
.main-slider .searcher{float:left; width:100%; padding:25px; background-color:var(--ct-color-primary); border-radius:25px; box-shadow:0px 8px 30px #255a9350}  
.searcher .btnSearch{padding:10px 25px; font-size:20px} 
.main-slider .carousel-control{opacity:0}
    .main-slider:hover .carousel-control{opacity:.5}
    
.searcher md-radio-button .md-label{color:#c3cfdf !important; font-size:1.3rem; text-transform:uppercase; font-weight:600}
.searcher md-radio-button .md-on{background-color:var(--ct-color-cta)}
.searcher md-radio-button .md-off, .searcher md-radio-button.md-default-theme.md-checked .md-off, .searcher md-radio-button.md-checked .md-off{border-color:#c3cfdf}
.searcher label{color:var(--ct-color-cta) !important; font-size:15px; font-weight:700}
            .searcher .md-select-value, .searcher .md-select, .searcher .md-input{border-color:#6c90b2; color:#c3cfdf !important; font-size:1.55rem; border-bottom-width:2px}
.searcher .md-select-value .md-select-icon  { color:#c3cfdf !important;}          
.searcher .col-xs-12.col-sm-6.col-md-3.pull-left{clear:both}

.featured-recommended{display:flex; flex-direction:column; text-align:center}
.featured-recommended .icon span{font-size:4.6rem}
.featured-recommended .title{font-size:2.4rem}
.featured-recommended .description{font-size:1.8rem}

.title-section{font-size:2.4rem; color:var(--ct-color-primary)}
.title-section span{color:var(--ct-color-secundary)}

.offices-section > .container{display:flex; align-items:center}
.offices-section .caption{padding:50px 20px; background-color:var(--ct-color-primary); color:#FFF; border-radius:50px 0 0 50px}
.offices-section .caption .icon{color:#8da6bb; font-size:4rem;}
.offices-section .caption .title{font-size:2.4rem}
.offices-section .layout-map{min-height:400px; border-radius:0px 50px 50px 50px; aspect-ratio:16/9; box-shadow:2px 3px 9px #00000010}

.button-round{width:60px; height:60px; display:flex; justify-content:center; align-items:center; border-radius:50%; background-color:#FFF; color:var(--ct-color-cta)}

.services-recommended{/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#dbe4eb+0,dbe4eb+100&1+0,0+100 */
background: -moz-linear-gradient(top,  rgba(219,228,235,1) 0%, rgba(219,228,235,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(219,228,235,1) 0%,rgba(219,228,235,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(219,228,235,1) 0%,rgba(219,228,235,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dbe4eb', endColorstr='#00dbe4eb',GradientType=0 ); /* IE6-9 */
}
.service-recommended{position:relative; height:360px; border-radius:50px; overflow:hidden; box-shadow:0px 0px 20px #02204320}
.service-recommended .box-image{position:absolute; z-index:1; left:180px; right:0px; top:0px; bottom:0px;}
.service-recommended .circle{    position: absolute;    z-index: 2;    left: -400px;    top: -100px;    border-radius: 50%;    width: 700px;    aspect-ratio: 1; background-color:var(--ct-color-primary)}
.service-recommended .caption{ position: absolute;    z-index: 3; top:0px; bottom:0px; left:40px; width:165px; display:flex; flex-direction:column; justify-content:center; }
.service-recommended .image-secundary{position:absolute; z-index:4; bottom:-25px; left:50%; margin-left:-86px; width:172px; aspect-ratio:1; border-radius:50%; overflow:hidden}
.service-recommended .layout-circle{position:absolute; z-index:4; bottom:-25px; right:-25px; width:100px; aspect-ratio:1; background-color:var(--ct-color-cta); border-radius:50%}
.service-recommended .button-round{position:absolute; z-index:5; bottom:20px; right:20px; box-shadow:0px 0px 20px #02204327}


.loginBox{}
    .loginBox .btnLogin.btnTwitter,
    .loginBox .btnLogin.btnLinkedin,
    .loginBox .btnLogin.btnPayPal{display:none;}

.pre-footer{position:relative; display: flex;  justify-content: space-between; align-items:center; margin-bottom:-50px;}
.pre-footer .media-left .icon-circle span{color:#d0d9ea; font-size:200px}

.media-big {display:flex; justify-content:center; align-items:center}
.media-big .icon-circle span{color:#d0d9ea; font-size:200px}
.media-big .media-caption{display:flex; justify-content:center; flex-direction:column}

.pre-footer .btn-theme{margin-right:2%}
.pre-footer .circle-big{position:absolute; z-index:1; width:236px; aspect-ratio:1/1; bottom:-20px; left:50%; margin-left:-270px; border-radius:50%; overflow:hidden}
/* Ferries*/
.availEngines .searchResume .searchParameters md-icon, .availEngines .searchResume .searchParameters{color:var(--ct-body-color); font-weight:500; font-size:16px}
.ferryResume .totalPrice .priceBreakdown md-icon,.ferryResume .totalPrice .priceBreakdown,.availEngines .searchResume .newSearch md-icon, .availEngines .searchResume .newSearch{color:var(--ct-color-cta); font-weight:500; }

.availEngines .filtersContainer .title, .availEngines .resultsContainer .title{text-transform:inherit; font-family:var(--ct-font-secundary)}

.availEngines .resultsContainer .residentResume{background-color:#F4F4F4; border-radius:12px}
.availEngines .resultsContainer .residentResume .changeResident{background-color:var(--ct-color-cta);}
.availEngines .resultsContainer .residentResume h5{text-transform:inherit; color:var(--ct-body-color)}

.availFerries .resultsContainer .journeyBox{color:inherit; background:transparent; border-bottom:3px dotted #DDD}
.availFerries .resultsContainer .journeyBox .type md-icon i, .availFerries .resultsContainer .journeyBox .type md-icon{color:var(--ct-color-primary)}
.availEngines .resultsContainer .title{padding-top:0px}
.availEngines .ferryContainer.selected{border-color:var(--ct-color-secundary); border-width:1px}
.availEngines .ferryContainer.selected > .boxRadio{background-color:rgba(244,166,0,.3)}

.availEngines .ferryContainer .tariffContainer .headerOptions{background-color:var(--ct-body-color)}
.availEngines .ferryContainer .tariffContainer .tariffTitle{background-color:#f4f4f4; color:var(--ct-body-color)}
.availEngines .ferryContainer .tariffContainer .boxOption{border-color:#F4F4F4}
.availEngines .ferryContainer .tariffContainer .boxOption .boxRadio{background-color:#f4f4f4}
.availEngines .ferryContainer .tariffContainer .boxOption .boxPrice .price{color:var(--ct-body-color)}

.availEngines .ferryContainer .tariffContainer .boxOption.selected{
    border: 2px solid rgba(244,166,0, 0.3);
    background-color: rgba(244,166,0, 0.3);}
    
.bookingPage .formContainerBox md-input-container.promotionalCodeContainer>.md-button, .bookingPage .btnContinue, .ferryResume .goBooking{background-color:var(--ct-color-secundary); color:var(--ct-color-primary); border-radius:4px}    
.bookingPage .btnContinue md-icon{color:var(--ct-color-primary)}

.bookingPage .formContainerBox md-input-container.promotionalCodeContainer>.md-button:hover, .bookingPage .btnContinue:hover, .ferryResume .goBooking:hover, .ferryResume .goBooking.md-focused{background-color:var(--ct-color-primary); color:#FFF;}
.bookingPage .btnContinue:hover md-icon{color:#FFF}
/* Checkout */
.bookingPage .progressBarContainer{font-size:15px;}
.bookingPage .progressBarContainer > div.step span{font-weight:500; color:inherit}
.bookingPage .loginBox{padding:15px; text-align:left; font-size:15px; font-weight:400; margin-bottom:15px}
.bookingPage .loginBox .btnLogin{border-radius:8px}
.bookingPage .titleSection{margin-top:30px;}
.bookingPage .tabsOperation .btnPageOperation{background-color:#FFF; color: var(--ct-color-primary); border-radius:6px 6px 0 0}
.bookingPage .tabsOperation .btnPageOperation .material-icons{color:var(--ct-color-primary)}
.bookingPage .tabsOperation .btnPageOperation.active{background-color:var(--ct-color-primary); color:#FFF}
.bookingPage .tabsOperation .btnPageOperation.active .material-icons{color:#FFF}
.bookingPage .tabsOperation{border-color:var(--ct-color-primary)}
.bookingPage .infoSection{font-size:14px; color:inherit}
.bookingPage .formContainerBox{padding:15px;font-size:15px; border-radius:6px}
.bookingPage .formContainerBox .optionalTitle{font-size:15px}
.bookingPage .formContainerBox .optionalTitle .material-icons,.bookingPage .formContainerBox .optionalTitle{color:var(--ct-color-primary); font-weight:500}
.bookingPage .formContainerBox .secondBox{background-color:#fcfcfc; border-radius:16px}
.bookingPage .formContainerBox .paxContainer .roomHeader .title{background:transparent; padding:0px}
.bookingPage .formContainerBox.cancelPoliciesContainer .containerBox{font-size:14px}

.bookingPage .boxSummary{color:inherit; border:0px; background-color:#FFF}
/*.bookingPage .boxSummary .iconLeftService{color:var(--ct-color-primary)}*/
.bookingPage .boxSummary .headerSummary{text-transform:inherit; background:#FFF}
    .bookingPage .boxSummary .headerSummary b{font-weight:500}
.bookingPage .boxSummary .serviceContainer{border-color:var(--ct-color-secundary)}    
.bookingPage .boxSummary .serviceContainer .sectionSubservice{font-size:20px}
.bookingPage .boxSummary .serviceContainer .serviceData .serviceInfo{color:inherit; font-size: 14px;  padding: 5px 10px;    border-top: 1px solid #f4f4f2;    margin-top: 5px;}
.bookingPage .boxSummary .priceContainer .priceLine{font-size:16px}
.bookingPage .contactUs {    border-radius: 50px;    background: var(--ct-color-primary); color:#FFF;}
.bookingPage .contactUs b{font-weight:500}
.bookingPage .contactUs .phone {    width: 100%;    float: left;    font-size: 24px !important;    line-height: 26px !important;    color: #fff !important;}
.bookingPage .securePayment{text-align:center}
.bookingPage .securePayment .title{text-transform:inherit; font-weight:500; font-size:15px; margin-top:30px}
        
        
.font-xxl{font-size:6rem}

.fleet-recommended{
view-timeline-name: --image;
view-timeline-axis: block;

animation-timeline: --image;
animation-name: show-scroll; 

animation-range: entry 20% cover 30%;
animation-fill-mode: both;
}
.fleet-recommended .gallery{
    width: 100%;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    column-gap: 1rem;
    row-gap: 1rem;
}
.fleet-recommended .image{width:100%}

.fleet-recommended .image img{
    width: 100%;
}
.fleet-recommended .feature{display:flex; align-items:center; gap:5px}
.fleet-recommended .feature span{opacity:.4}




@keyframes show-scroll{
      from{opacity:.2; transform:scale(.7)}
      to{opacity:1; transform:scale(1)}
}        
@media (min-width: 1200px) {.container {width:100%; max-width:1370px;} }
@media (max-width: 1600px) {
    #web-header .bottom-line .brand-logo-maroc{left:350px; transform:inherit}
}
@media (max-width: 1500px) {
.media-big .icon-circle span{font-size:100px}
.pre-footer .circle-big{width:136px; margin-left:-198px}
}


@media (max-width: 1340px) {

    #web-header .bottom-line .brand-logo-maroc{left:15px; top:15px}
    #web-footer .bottom-line, .pre-footer{flex-direction:column; gap:25px; margin-bottom:0px}
}

@media (max-width: 991px) {
    #web-header .bottom-line .brand-logo{top:15px}
    .main-slider .position-searcher{position:static; padding:15px 0px}
    .offices-section > .container{align-items:start}
    
    .main-slider .caption .title{font-size:7rem;}
}
@media (max-width: 767px) {
    #web-footer .top-line{padding-top:40px}
    
    .main-slider, .main-slider .item{min-height:340px;}
        .main-slider .caption{margin:0; padding:0 40px}
            .main-slider .caption .title{font-size:5rem; text-shadow: 0 0 5px rgba(33,33,33,0.4);}
            .main-slider .position-caption{bottom:15px}
}
				
				
				
				
/*mobile*/
@media (min-width: 1200px) {
        #web-header .bottom-line .brand-logo{width:350px; top:12px;}

    
}
@media (min-width: 767px) {
    
    #web-header .bottom-line{min-height:74px;}
        
        
    .badge-top-xs{display:none;}
}
				
@media (max-width: 767px) {				
	
	
				
    #web-header .top-line{padding:.3em 0;}
        #web-header .top-line .options > *{margin-right:15px !important; float:left;}
        
            #web-header .boxLanguage .md-button img{width:20px; height:20px; margin-top:2px; float:left;}
            #web-header .top-line .options .md-button, #web-header .top-line .options .md-menu{margin-right:0}
        
            #web-header .top-line .options .material-icons, #web-header .top-line .options .fab{font-size:22px; top:0 !important; float:left;}
            
        #web-header .bottom-line{min-height:74px; padding:10px 0;}
            #web-header .bottom-line .brand-logo{width:260px;}
            #web-header .bottom-line .main-line{margin-top:0;}
            
            
    .offices-section .caption{border-radius:50px 50px 0 0}        
    .offices-section .layout-map{border-radius:0 0 50px 50px}        
    
    
    .service-recommended{height:auto;     background-color: var(--ct-color-primary);}
        .service-recommended .box-image{position:relative; width: 100%;  height: 200px; float: left;  right: auto; left: auto; top: auto;  bottom: auto;}
        .service-recommended .caption{position: relative; top: auto;  left: auto; right: auto; bottom: auto; width: 100%; float: left; padding:30px 80px 30px 30px; }
        .service-recommended .circle{display:none;}
        .service-recommended .image-secundary{left: auto; right: -25px; bottom: auto; top: -25px;}
    
    
    .badge-top{display:none;}    
    .badge-top-xs{padding-bottom:20px;}
    
    #web-footer .top-line .btns{flex-wrap:wrap}
    
}
@media (width < 991px) {
     #web-header .bottom-line > a{float:left; max-width:300px}
    #web-header .navbar-toggle{display:inline}

    .navbar-collapse.collapse {
        display: none !important;
        height: auto !important;
        padding-bottom: 0;
    }

}
@media (width < 1200px) {
    #web-header .bottom-line .brand-logo{width:300px}
    #web-header .bottom-line .navbar-nav .md-button, #web-header .bottom-line .main-line a{font-size:1.65rem}
}

details .padding{padding:25px}.dateTables header{display:flex; justify-content:center; align-items:center; flex-direction:column}