:root{
--blue-color:#142A51;
--top-color:#F5F5F5;
--red-color:#C42B3F;
--red-opacity:rgba(253,14,18,0.8);
--gray-color:#7C7C7C;
--black-color:#3C3C3C;
--lightblue-color:#263D8D;
--opacity-3:rgba(255,255,255,0.3);
--opacity-5:rgba(255,255,255,0.5);
--opacity-7:rgba(255,255,255,0.7);
--opacityb-3:rgba(0,0,0,0.3);
--opacityb-5:rgba(0,0,0,0.5);
--opacityb-7:rgba(0,0,0,0.7);
}
html{
   width:100%;
    height:100%;
}
body{
    width:100%;
    height:100%;
    font-family: "Ubuntu","open sans serif","roboto",sans-serif;
    background-repeat:repeat-x;
    background-color:#ffffff;  
    margin:0px;
    padding:0px;
   color:#222222;
}
.round{
 border-radius:7px;
}
.btn{
     border-radius:33px;
     height:66px;
     padding-top:20px;
}
.page-container{
  min-height:100vh;
  position: relative;
}
.content{
  min-height:calc(100% - 217px);
   height:100%;
   padding-top:120px;
}
h1,.h1{color:var(--lightblue-color);display:block;width:100%;}
h2,.h2{color:var(--lightblue-color);display:block;width:100%;}
.ml-10{
  margin-left:-10px;
}
.btn-red{
  background-color:var(--red-color);

  color:white;
}
.btn-white{
  background-color:#fff;

  color:var(--blue-color);
}
.btn-red:hover{
  color:white;
  background-color:var(--red-color);
}
.pointer{
 cursor:pointer;
}
.container {
   margin:auto;  
}
.opacity-3{
   background-color:var(--opacity-3);
}
.opacity-5{
   background-color:var(--opacity-5);
}

.opacity-7{
   background-color:var(--opacity-7);
}
.opacityb-3{
   color:var(--opacityb-3);
}
.opacityb-5{
  color:var(--opacityb-5);
}

.opacityb-7{
   color:var(--opacityb-7);
}
.opacity-9{
   background-color:rgba(255,255,255,0.9);
}
.h1{
 font-size:3rem;
}

#banner{
  height:calc(100% - 0px);

  background-color:#CCA77B;
 background-image:url(images/bg.jpg);
  background-size:cover;
  width:100%;

 position:fixed;
top:0px;
}

.h100{
   height:100%!important;
}
.red{
color:var(--red-color);
}
.white{
color:white;
}
a{
 color:var(--blue-color);
  
}
a:hover{
  text-decoration:none;
  opacity:0.9;
}
 ol.d {list-style-type:lower-alpha;}

#bgvideo {
    z-index: -1;
    position: relative;
    width: 100%;
    min-width: 500px;
    min-height: 400px;
    overflow:hidden;
    margin: auto;
    top: 0px;
    right: 0px;
}
#bgvideo video{
    width: 100%;
 min-width:800px;
   margin-top:50px;
}
#bgvideo img{
    width: 100%;
   margin-top:100px;
}


@media (max-width: 768px){
#bgvideo {
    z-index: -1;
    position: relative;
    width: 100%;
    min-height: 460px;
    min-width: 300px;
    overflow:hidden;
    margin: auto;
    top: 0px;
    right: 0px;
}
}

.cruises{
 overflow-x:scroll;
max-height:600px;
}
.zp_day{
  padding-left:5px;
  padding-right:5px;

}
#footer{
 color:var(--gray-color);
}
#footer a{
 color:var(--gray-color);
}

#footer h3{
 margin-top:2rem;
 margin-bottom:2rem;
}

.navbar-collapse.show{
 background-color:var(--blue-color)!important;
}
.static{
  padding-top:130px;
  
}
.static img{
   max-width:100%!important;
  height:auto!important;
  margin-bottom:15px;
}
.b{
display:none;
}
.logo.w{
display:block!important;
}
.logo-sm.w.fix{
   display:inline-block;
}
.logo.w.fix{
   display:none!important;
   
}
.logo-sm.b.fix{
   display:none!important;
}
.logo.b.fix{
   display:none;
   
}

#top{
  background-color:var(--blue-color)!important;
}
#top a{
 color:white!important;
}

.cam{
display:inline-block;
width:42%;
text-align:center;
}
.navbar-collapse.show{
background-color: white;

    width: 50%;
    position: absolute;
    top: 0px;
    right: -41px;
  margin-top:55px;
height: calc(100vh - 55px);
}
.navbar-collapse.show li{
display: block;
    flex-grow: 1;
    width: 100%;
}
.navbar-toggler{
position:absolute;
}
#route{
 position:relative;
}
.w{
 display:none;
}
#top .ico{
 width:20px;
height:20px;
}
.logo{
width:200px;
   transition-duration:0.7s 
}
h1{
   color:var(--blue-color);
   font-size:30px;
   font-weight:bold;
  line-height:1;
}
h1 small{
   font-size:22px;
}

.gradient{
  position:fixed;
  background-image:linear-gradient(to bottom, white 15%, transparent);

  height:80px;
  width:100%;
  z-index:100;
}

.logo-sm{
   margin-top:1px;
   height:46px;
   display:none;
    width:200px;
   transition-duration:0.7s 
}
.logo-sm.b.fix{
   display:inline-block;

}
.logo.b.fix{
   display:none;
    
}

#topleftmenu.fix a{
   font-size:14px;
}


#top{
  height:100px;
  position:fixed;
  width:100%;
  background-color:white;
  z-index:2000;
   transition-duration:0.7s;
 padding-top:15px;
padding-bottom:15px; 
}
#top a{
 color:var(--blue-color);
}
#top.fix{
  height:64px;
  position:fixed;
  width:100%;

 z-index:2000;
 padding-top:5px;
padding-bottom:5px;
   transition-duration:0.7s;
}
#top ul.nav{
padding-top:7px;
   transition-duration:0.7s;
}
#top.fix ul.nav{
padding-top:0px;
   transition-duration:0.7s; 
}

.grey{
  color:#666;
}
@media (max-width: 576px){
#route{
display:none;
}
.nav-link{
font-size:80%;
}
#top .ico{
 width:14px;
height:14px;
}
}