@charset "UTF-8";

/* ################################################################
############# section 1: section scheme css #######################
################################################################ */

/* ****************************************************************
************* sub-section 1-1: nav bar functions ******************
**************************************************************** */

/* ========== style x: yachts theme ============================= */
.c17-000000003-top-nav-container {
	background: linear-gradient(to left, #000000, #566D7E);
	/* move text color into here */
}

/* ========== style x: top text color on main bar ============= */
.c17-000000003-topnav a,
.c17-000000003-dropdown .c17-000000003-dropbtn {
	color: white;
}

/* ========== style x: color for burger bar ============= */
.c17-000000003-burger {
	background-color: white;
}

/* ========== c17-000000004: right content - left search bar ========== */
.c17-000000004-right-content-left-bar {
	background-color: #454545;
	color: white;
}

/* ========== c17-000000005-left content - right info bar ============= */
.c17-000000005-left-content-right-bar {
	background: linear-gradient(to left, #000000, #566D7E);
	color: white;
}

/* ========== c17-000000006: center content - both bars ======== */
.c17-000000006-center-content-left-bar {
	background-color: #98AFC7;
	color: white;
}
.c17-000000006-center-content-right-bar {
	background-color: #98AFC7;
	color: white;
}

/* ########## style x: arrow stage 1 - creates reverse L for down arrow ########## */
.c17-000000003-arrow {
    border: solid white;
  	border-width: 0 3px 3px 0;
  	display: inline-block;
  	padding: 3px;
}

/* ========== style x: converts top nav to burger menu ========= */
/* converts top nav items into block menu for mobile view */
@media screen and (max-width: 1150px) {
.c17-000000003-topnav a:not(:first-child), .c17-000000003-dropdown .c17-000000003-dropbtn {
    	display: none;
  	}
.c17-000000003-topnav a.c17-000000003-icon {
    	float: right;
    	display: block;
	}

/* style 16: displays the dropdowns on mobile device with burger */
.c17-000000003-topnav.c17-000000003-responsive {position: relative;}
.c17-000000003-topnav.c17-000000003-responsive .c17-000000003-icon {
    	position: absolute;
    	right: 0;
    	top: 0;
	}

.c17-000000003-topnav.c17-000000003-responsive a {
    	float: none;
    	display: block;
    	text-align: left;
	}

.c17-000000003-topnav.c17-000000003-responsive .c17-000000003-dropdown {float: none;}
.c17-000000003-topnav.c17-000000003-responsive .c17-000000003-dropdown-content {position: relative;}
.c17-000000003-topnav.c17-000000003-responsive .c17-000000003-dropdown .c17-000000003-dropbtn {
    	display: block;
    	width: 100%;
    	text-align: left;
	}
}

/* ****************************************************************
************* sub-section 1-2: quick search pages ******************
**************************************************************** */

/* ========== c17-000000087-img-search-one-button-twice-stacked ==================== */
h2.c17-000000087 {
  text-align: left;
  font-family: Arial, Helvetica, sans-serif;
  color: black;
}

.c17-000000087-banner-image {
  /* The image used */
  background: url("../site-images/shared/yachts-main.jpg");
  min-height: 500px;
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

/* Add styles to the form container */
.c17-000000087-banner-container {
  position: absolute;
  right: 0;
  margin: 20px;
  width: 400px;
  max-width: 400px;
  padding: 6px 16px;
  background-color: white;
  border-radius: 10px;
}

/* Full-width input fields */
input.c17-000000087[type=text] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
  border-radius: 10px;
}

input.c17-000000087[type=text]:focus {
  background-color: #ddd;
  outline: none;
}

/* Set a style for the submit button */
.c17-000000087-button {
  background-color: #0C090A;
  color: white;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  cursor: pointer;
  width: 100%;
  opacity: 0.9;
  border-radius: 10px;
}

.c17-000000087-button:hover {
  opacity: 1;
}

.c17-000000087-intro-h2 {
	font-family: Rockwell, "Courier Bold", Courier, Georgia, Times, "Times New Roman", sans-serif;
	font-weight: 500;
	font-size: 68px;
	color: #FFFFFF;
	padding-bottom: 15px;
	text-shadow: 0px 0px 16px rgba(45, 54, 68, 0.2);
}

.c17-000000087-inline {
display: inline-block;
float: left;
padding: 40px;
}

.c17-000000087-right {
float: right;
width: 50%;
text-align: left;
}
.c17-000000087-left {
float: left;
width: 50%
}

.c17-000000087-quick-search {
display: inline-block;
float: left;
width: 68%;
padding-left: 4px;
}

.c17-000000087-quick-search-button {
display: inline-block;
float: left;
width: 28%;
padding-left: 4px;
}

@media only screen and (max-width: 800px) {

/* Add styles to the form container */
.c17-000000087-banner-container {
  width: 370px;
}  
  
  
.c17-000000087-intro-h2 {
	display: inline-block;
	margin: 0;
	width: 100;
	font-family: Rockwell, "Courier Bold", Courier, Georgia, Times, "Times New Roman", sans-serif;
	font-weight: 500;
	font-size: 48px;
	color: #FFFFFF;
	padding-bottom: 15px;
	text-shadow: 0px 0px 16px rgba(45, 54, 68, 0.2);
	}

.c17-000000087-left {
display: none;
}

}


/* ========== c17-000000090-img-search-date-nights-guests-button ==================== */
h2.c17-000000090 {
  text-align: left;
  font-family: Arial, Helvetica, sans-serif;
  color: black;
}

.c17-000000090-banner-image {
  min-height: 500px;
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

/* Add styles to the form container */
.c17-000000090-banner-container {
  min-height: 130px;
  text-align: center;
  background-size: cover;
  margin: 3%;
  padding: 2px 16px 16px 16px;
  background-color: white;
  border-radius: 10px;
}

.c17-000000090-top {
height: 50%;
background-size: cover;
padding: 5px;
text-align: center;
}

.c17-000000090-bottom {
height: 50%;
background-size: cover;
padding: 5px;
text-align: center;
}

/* Full-width input fields */
input.c17-000000090[type=text] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
  border-radius: 10px;
}

.c17-000000090-date-picker {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
}

/* Full-width input fields */
.c17-000000090-dropdown {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
  border-radius: 10px;
}

input.c17-000000090[type=text]:focus {
  background-color: #ddd;
  outline: none;
}

/* Set a style for the submit button */
.c17-000000090-button {
  color: white;
  background-color: #0C090A;
  width: 100%;
  cursor: pointer;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  opacity: 0.9;
  border-radius: 10px;
}

.c17-000000090-button:hover {
  opacity: 1;
}

.c17-000000090-intro-h2 {
	font-family: Rockwell, "Courier Bold", Courier, Georgia, Times, "Times New Roman", sans-serif;
	font-weight: 500;
	font-size: 68px;
	color: #FFFFFF;
	padding-bottom: 15px;
	text-shadow: 0px 0px 16px rgba(45, 54, 68, 0.2);
}

.c17-000000090-input-div, .c17-000000090-guests-div, .c17-000000090-date-div {
display: inline-block;
float: left;
width: 14%;
padding-left: 4px;
}

.c17-000000090-search-div {
display: inline-block;
float: left;
width: 10%;
padding-left: 4px;
}

.c17-000000090-guests-div, .c17-000000090-nights-div {
display: inline-block;
float: left;
width: 14%;
padding-left: 4px;
}

.c17-000000090-input-div {
display: inline-block;
float: left;
width: 36%;
padding-left: 4px;
}

@media only screen and (max-width: 1000px) {

.c17-000000090-top {
height: 30%;
}

.c17-000000090-bottom {
height: 70%;
}

.c17-000000090-input-div, .c17-000000090-date-div {
width: 98%;
}

.c17-000000090-guests-div, .c17-000000090-search-div, .c17-000000090-nights-div, .c17-000000090-quick-search {
width: 24%;
display: inline-block;
}

.c17-000000090-banner-container {
  min-height: 270px;
}

input[type=text] {
  color: black;
  font-size: 16px;
  }
  
input[type=date] {
  -webkit-appearance: none;
  color: black;
  }

    select {
  font-size: 16px;
  color: black;
  }

  input[type=text] input[type=date] {
  color: black;
  }
}



@media only screen and (max-width: 630px) {

.c17-000000090-banner-container {
  min-height: 350px;
}

.c17-000000090-intro-h2 {
font-size: 58px;
}

.c17-000000090-guests-div, .c17-000000090-search-div, .c17-000000090-nights-div, .c17-000000090-quick-search {
width: 48%;
display: inline-block;
}

input[type=text] {
  font-size: 16px;
  color: black;
  }
  
input[type=date] {
  -webkit-appearance: none;
  color: black;
  }
  
    select {
  font-size: 16px;
  color: black;
  }
  
}