@charset "UTF-8";
/* CSS Document */
/* Custom Styles for CopaCabana-Yacht */

/* oooooooooo GENERAL STYLES AND RESETS oooooooooo */
html, body {
    height: 100%;
	}
body {
	position: relative;
    }
    
.nopads {
    padding-left: 0px;
	padding-right: 0px;
	}
    
p {
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
    }
    
.textshad {
	text-shadow: 2px 2px 5px #000000;
    }
    
/* oooooooooo GOOGLE FONTS USED oooooooooo */
.opensans {
	font-family: 'Open Sans', sans-serif;
	}
.volkhov {
	font-family: 'Volkhov', serif;
	}
.robotocond {
	font-family: 'Roboto Condensed', sans-serif;
	}
.italiana {
	font-family: 'Italiana', serif;
    }
    
/* oooooooooo BACKGROUND COLORS oooooooooo */
.BGnavyblue {
	background-color: #000080;
	}
.BGdarkblue {
	background-color: #000F28;
	}
.BGgold {
	background-color: #B39E70;
	}
.BGgoldlight {
    background-color: #D9CBAC;
	}
.BGsoftgrey {
	background-color: #F6F5F3;
    }
    
/* oooooooooo TEXT COLORS oooooooooo */
.txtgold {
	color: #B39E70;
	}

/* oooooooooo UNDER CONSTRUCTION PAGE STYLES CAN BE REMOVED oooooooooo */
.fullscreen {
    height: 100vh;
	}
.bgimg01 {
	background-image: url("../images/sunmanh66.jpg");
	background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    }
header h1 {
	font-family: 'Pacifico', cursive;
	font-size: 60px;
	text-shadow: 2px 2px 5px #000000;
    }
header h2 {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 60px;
	font-weight: 700;
	letter-spacing: 4px;
	text-shadow: 2px 2px 5px #000000;
    }
header p {
	color: white;
	padding-top: 30px;
    }
@media only screen and (max-width: 575px) {
	header h1 {
	font-size: 40px;
	}
}


/* oooooooooo INTROVIDEO oooooooooo */
.video-background-holder {
    position: relative;
    background-color: #000F28;
    height: calc(100vh - 100px);
    min-height: 25rem;
    width: 100%;
    overflow: hidden;
    }

.video-background-holder video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 0;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    }

.video-background-content {
    position: relative;
    z-index: 2;
    }

.video-background-content h1 {
    font-family: 'Roboto Condensed', sans-serif;
	font-size: 60px;
	font-weight: 700;
	letter-spacing: 4px;
	text-shadow: 2px 2px 5px #000000;
    }
@media only screen and (max-width: 767px) {
    .video-background-content h1 {
    font-size: 40px;
    font-weight: 700;
    letter-spacing: 3px;
    }
}

.video-background-content h3 {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 30px;
	font-weight: 400;
	letter-spacing: 4px;
	text-shadow: 2px 2px 5px #000000;
    }
@media only screen and (max-width: 767px) {
    .video-background-content h3 {
    font-size: 25px;
    letter-spacing: 2px;
    }
}

.video-background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: black;
    opacity: 0.1;
    z-index: 1;
    }
/* oooooooooo END INTROVIDEO oooooooooo */

/* oooooooooo NAV oooooooooo */
.navbar-brand,
.navbar-nav a {
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 300;
	letter-spacing: 2px
    }
/* oooooooooo END NAV oooooooooo */


/* oooooooooo SECTIONS oooooooooo */
#disco {
	text-align: center;
    }
@media only screen and (max-width: 991px) {
    #disco {
	text-align: left;
    }
}
#disco h3 {
	color: #000F28;
	font-family: 'Roboto Condensed', sans-serif;
    font-weight: 300;
    font-size: 26px;
	margin-bottom: 30px;
    }
.disco1C, .disco2C, .disco3C {
    margin-bottom: 30px;
	}
@media only screen and (max-width: 991px) {
    .disco1C, .disco2C, .disco3C {
    padding-bottom: 20px;
    border-bottom: 1px solid white;
	}   
}

#explo {
    }
#explo h3 {
	font-family: 'Roboto Condensed', sans-serif;
    font-weight: 300;
    }
#explo h4 {
	font-family: 'Volkhov', serif;
    }
    
#highlights h3 {
	font-family: 'Roboto Condensed', sans-serif;
    }
#crews h4, #crews h3 {
	font-family: 'Roboto Condensed', sans-serif;
    font-weight: 300;
    }
.destin1 {
	min-height: 400px;
	background-image: url("../images/destination1.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	}
.destin2 {
	min-height: 400px;
	background-image: url("../images/choose-mont.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	}
.destin3 {
	min-height: 400px;
	background-image: url("../images/destination3.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	}
.accomod {
	min-height: 500px;
	background-image: url("../images/accommodation.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	}
.bookbar {
    /*min-height: 400px;*/
	background-image: url("../images/prefooterpic2.jpg");
	background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    }
.bookbarleft {
	min-height: 400px;
    }
.bookminibar {
	background-color: #B39E70;
    }
    
/* oooooooooo FOOTER Styles oooooooooo*/
.ccyfoot {
	background-color: #000F28;
    }


/* oooooooooo MASTHEAD oooooooooo */
.mhfull {
    height: 100vh;
	}
.mhhalf {
    height: 50vh;
	}
    
.masthead {
    text-align: center;
	font-family: 'Volkhov', serif;
	color: #FFF;
	font-style: italic;
	font-size: 70px;
	line-height: 0.9;
	text-shadow: 0px 0px 10px #000000;
    }
    
@media only screen and (max-width: 575px) {
	.masthead {
	font-size: 50px;
	}
}

.mhcroatia { 
	background-image: url("../images/Croatia-header.jpg");
	height: 75vh;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	 /* Flexbox */
 	display: flex;
 	align-items: center;
	}
.mhmontenegro { 
	background-image: url("../images/Montenegro-header.jpg");
	height: 75vh;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	 /* Flexbox */
 	display: flex;
 	align-items: center;
	}
.mhitaly { 
    background-image: url("../images/Italy-adriatic1.jpg");
	height: 75vh;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	 /* Flexbox */
 	display: flex;
 	align-items: center;
	}
.mhplaceholder { 
	background-image: url("../images/header-captain.jpg");
	height: 50vh;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	 /* Flexbox */
 	display: flex;
 	align-items: center;
	}
.mhplaceholder2 { 
	background-image: url("../images/header-placeholder-1920x800.jpg");
	height: 50vh;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	 /* Flexbox */
 	display: flex;
 	align-items: center;
	}
.mhtheyacht { 
	background-image: url("../images/sunmanh66.jpg");
	height: 70vh;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	 /* Flexbox */
 	display: flex;
 	align-items: center;
	}
.minimum400 {
	min-height: 400px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
    }

/* oooooooooo CCY BLOCS oooooooooo */
.ccybloc {
	padding-top: 40px;
	padding-bottom: 40px;
	text-align: center;
    }
.ccyp {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 16px;
	font-weight: 300;
	letter-spacing: 4px;
	padding-bottom: 10px;
    }
.line1 {
	border-bottom-color: #555555;
	border-bottom-style: solid;
	border-bottom-width: thin;
    }
.ccyhead {
	font-family: 'Volkhov', serif;
	color: #B39E70;
	font-style: italic;
	font-size: 60px;
	line-height: 0.8; /* OPGELET toggle dit eens ON en OFF */
    }
.ccyhead2 {
	font-family: 'Volkhov', serif;
	color: #FFF;
	font-style: italic;
	font-size: 50px;
    }
.ccysubhead {
	font-size: 36px;
	letter-spacing: 2px;
	color: #000F28;
    }
.ccysubhead2 {
	font-size: 30px;
	letter-spacing: 2px;
	color: #FFF;
    }
@media only screen and (max-width: 575px) {
    .ccyhead {
	font-size: 50px;
    }
    .ccysubhead {
	font-size: 30px;
    }
}
/* oooooooooo CCY FOOTER oooooooooo */
#footerccy {
    background: #222;
    color: silver;
    }

.logo-footer {
    margin-bottom: 40px;
    }
.logo-part {
    border-right: 1px solid grey;
    height: 100%;
    }

#footerccy p, #footerccy a {
    font-family: 'Open Sans', sans-serif;
	font-weight: 300;
    font-size: 16px;
    }
#footerccy a {
    color: silver;
    }
#footerccy a:hover {
    text-decoration: none;
    color: #FFFFFF !important;
    }

#footerccy h6 {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 18px;
    color: #B39E70;
    letter-spacing: 2px;
    margin-bottom: 40px;
    position: relative;
    }

#footerccy h6:after {
    position: absolute;
    content: "";
    background: white;
    width: 12%;
    height: 1px;
    left: 0;
    bottom: -20px;
    }

#footerccy ul  {
    padding-left: 0;
    }

#footerccy ul li {
    list-style: none;
    display: block;
    }

#footerccy ul li a{
    text-decoration: none;
    color: silver;
    }

#footerccy ul li a:hover {
    text-decoration: none;
    color: #FFFFFF !important;
    }

#footerbase {
    background: #B39E70;
    color: #000;
    text-align: center;
    padding: 10px;
}
#footerbase p, #footerbase a {
    font-family: 'Open Sans', sans-serif;    
    font-size: 11px;
    letter-spacing: 1px;
    padding: 0px;
    margin: 0px;
    }
#footerbase a:link {
    color: #000;
    }
#footerbase a:visited {
    color: #000;
    }
#footerbase a:hover {
    color: #000;
    text-decoration: none;
    text-transform: uppercase;
    }
#footerbase a:active {
    color: #000;
    }
    
@media only screen and (max-width: 767px) {
    .logo-part {
        border-right: none;
    }
}
/* oooooooooo END CCY FOOTER oooooooooo */

/* oooooooooo EXPLORE DESTINATIONS oooooooooo */
.hoverbox figure, .hoverbox figure img {
   	width: 100%;
    margin: 0;
    padding: 0;
	}

.hoverbox a {
	color: #ffffff;
	}

.hover-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    -webkit-transition: background-color 0.5s ease-in-out;
    transition: background-color 0.5s ease-in-out;
	}

.hover-container:hover {
    background-color: rgba(0,0,0,0.5);
    }

.hover-container .captions {
    position: absolute;
    width: 100%;
    height: 100px;
    text-align: center;
    top: 50%;
    margin-top: -50px;
	}

.hover-container .captions h5 {
	font-family: 'Italiana', serif;
	font-size: 40px;
	margin: 0;
	padding: 0;
	text-shadow: 2px 2px 5px #000000;
	}
    
/* oooooooooo Captains Bio Section oooooooooo */
#bio {
    }

#bio li {
    font-family: 'Open Sans', sans-serif;
	font-weight: 300;
    }

#bio h3 {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 300;
    color: #B39E70;
    text-transform: uppercase;
    }

.robot {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 300;
    text-transform: uppercase;
    }
h3.robot {
    line-height: 1.3;
} /* fix for h3 font robot underlines */

.bordbot {
    padding-bottom: 10px;
    border-bottom: 1px;
    border-bottom-color: #000;
    border-bottom-style: solid;
    }

.bordtop {
    padding-bottom: 20px;
    border-top: 1px;
    border-top-color: #000;
    border-top-style: solid;
    }
.bordtopbot {
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    padding-top: 20px;
    padding-bottom: 20px;
    }
    
#prices {
	background-image: url("../images/BGprices.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
    padding-top: 50px;
    padding-bottom: 50px;
    }

.max20 {
    width: 20px;
    }
    
/* oooooooooo OSMAP STYLES oooooooooo */
.mapwrapper {
    background-color: aquamarine;
    }

.osmap1 {
    height: 400px;
    }

.map400 {
	height: 400px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
    }
    
/* oooooooooo FOR TESTING ONLY oooooooooo */
/* oooooooooo DELETE WHEN SITE IS LIVE oooooooooo */
.bigfield {
    height: 300px;
    background-color: chartreuse;
}
/* oooooooooo END TEST STYLES oooooooooo */

/* oooooooooo HOMEPAGE GALLERY STYLES oooooooooo */
.thumbnail {
	position: relative;
	}

.overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgba(0, 0, 0, 0.3);
    overflow: hidden;
	width: 100%;
	height: 100%;
	transform: scale(0);
	transition: .3s ease;
	}

.thumbnail:hover .overlay {
	transform: scale(1);
	}

/* THUMBNAIL-HOVER-TEXT */
.hvrtext {
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 300;
	color: white;	
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	}
    
/* oooooooooo LAZURE SECTION oooooooooo */
.lazyac {
    min-height: 400px;
	background-image: url("../images/Lazure-yacht.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
    }
.lazlog {
    text-align: center;
    padding-left: 0px;
	padding-right: 0px;
    }
.lazhot {
    min-height: 400px;
	background-image: url("../images/Lazure-hotel.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
    }
    
.audiotop {
    padding-top: 100px;
    text-align: left;
    }
.audiotop p {
    padding-bottom: 10px;
    }
@media only screen and (max-width: 767px) {
    .audiotop {
    padding-top: 50px;
    }
}