@charset "utf-8";
/* CSS Document */
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0;
}
@font-face {
	font-family: EurostileT;
	src: url("../font/EurostileT.ttf");
}
html {
	width: 100%;
	height: 100%;
	font-family: EurostileT;
	margin: 0;
	padding: 0;
}
/* ESTILOS DE HEADER */
header {
	background-color: #ffffff;
}
a {
	cursor: pointer;
	text-decoration: none;
}
/* ESTILOS DE MENU */
/* Add a black background color to the top navigation */


.topnav {
	background-color: #26c13f;
	overflow: hidden;
	width: 100%;
	margin: 0 auto;
	z-index: 10;
	font-weight: 600;
	box-shadow: 0px 5px 10px grey;
}
.topnav table {
	border: 0;
	margin: 0 auto;
}
/* Style the links inside the navigation bar */
.topnav a {
	float: left;
	display: block;
	color: #ffffff;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	font-size: 19px;
}
/* Change the color of links on hover */
.topnav a:hover {
	background-color: #ffffff;
	color: black;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
	display: none;
}
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 800px) {
	.topnav a:not(:first-child) {
		display: none;
	}
	.topnav a.icon {
		float: right;
		display: block;
	}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 800px) {
	.topnav.responsive {
		position: relative;
	}
	.topnav.responsive a.icon {
		position: absolute;
		right: 0;
		top: 0;
	}
	.topnav.responsive a {
		float: none;
		display: block;
		text-align: left;
	}
	.mySlides {
		max-width: 450px;
		height: auto;
	}
}
.td2 {
	display: block;
}
/* CONTENTS */
.contactMap {
	border: 0;
	width: 100%;
	height: 450px;
}
.bodyIndex {
	background: scroll;
	background-image: url("../img/7488.jpg");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	background-position: center center;
	background-color: white;
}
.bodyDepas {
	background: scroll;
	background-image: url("../img/Oceana215-06.jpg");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	background-position: center center;
	background-color: white;
}
.bodyShowDepas {
	background: scroll;
	background-image: url("../img/Oceana126-06.jpg");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	background-position: center center;
	background-color: white;
}
.bodyReservas {
	background: scroll;
	background-image: url("../img/OceanaAreasComunes-04.jpg");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	background-position: center center;
	background-color: white;
}
.bodyContacto {
	background: scroll;
	background-image: url("../img/OK8NAL0.jpg");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	background-position: center center;
	background-color: white;
}
.bodyEmpresas {
	background: scroll;
	background-image: url("../img/empresa_BG.jpg");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	background-position: center center;
	background-color: white;
}
.bodyPropietario {
	background: scroll;
	background-image: url("../img/empresas_bg.jpg");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	background-position: center center;
	background-color: white;
}
.contactSection {
	background-color: #d6eeda;
	width: 100%;
}
.mySlides {
	display: none;
}

.imgSlide{
	width: 615px;
	height: auto;
}

.w3-left, .w3-right, .w3-badge {
	cursor: pointer;
}
.w3-left {
	float: left!important;
	width: 25px;
	height: 25px;
	background-color: rgba(0, 0, 0, 0.8);
	color: #ffffff;
	position: relative;
	bottom: 50%;
	text-align: center;
	transform: translate(0%, -50%);
}
.w3-right {
	float: right!important;
	width: 25px;
	height: 25px;
	background-color: rgba(0, 0, 0, 0.8);
	color: #ffffff;
	position: relative;
	bottom: 50%;
	left: 61%;
	text-align: center;
}
.w3-display-container {
	position: relative;
}
.w3-display-container:hover .w3-display-hover {
	display: block;
}
.w3-display-container:hover span.w3-display-hover {
	display: inline-block;
}
.w3-display-hover {
	display: none;
}
.w3-center {
	text-align: center!important;
	display: inline-block;
	width: auto;
}
.w3-section {
	margin-top: 16px!important;
	margin-bottom: 16px!important;
}
.w3-display-bottommiddle {
	position: absolute;
	left: 50%;
	top: 45%;
	transform: translate(-50%, 0%);
	-ms-transform: translate(-50%, 0%);
}
input, label {
	display: block;
}
h1 {
	font-size: 30px;
	color: #26c13f;
	font-weight: 600;
}
section {
	border: none;
	margin: 0 auto;
	width: 100%;
}
.h1Depas {
	font-size: 25px;
	color: #26c13f;
	font-weight: 600;
}
.espacio {
	width: 100%;
	height: 35vw;
	display: block;
}
.calendario {
	background-color: white;
	width: 100%;
	display: block;
	padding-top: 3vw;
	margin: 0 auto;
}

.calendario2 {
	background-color: white;
	width: 100%;
	display: none;
	padding-top: 3vw;
	margin: 0 auto;
}

.padLeft {
	padding-left: 5%;
}
.calendario label {
	font-size: 13px;
	color: black;
}

.calendario2 label {
	font-size: 13px;
	color: black;
}
.backWhite {
	background-color: #ffffff;
	padding-top: 40px;
}
.calendar input[type="date"] {
	position: relative;
}
/* create a new arrow, because we are going to mess up the native one
see "List of symbols" below if you want another, you could also try to add a font-awesome icon.. */
.calendar input[type="date"]:after {
	content: "\25BC";
	color: #555;
	padding: 0 5px;
}
/* make the native arrow invisible and stretch it over the whole field so you can click anywhere in the input field to trigger the native datepicker*/
.calendar input[type="date"]::-webkit-calendar-picker-indicator {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: auto;
	height: auto;
	color: transparent;
	background: transparent;
}
/* adjust increase/decrease button */
.calendar input[type="date"]::-webkit-inner-spin-button {
	z-index: 1;
	color: transparent;
	background: transparent;
	opacity: 0;
}
/* adjust clear button */
.calendar input[type="date"]::-webkit-clear-button {
	z-index: 1;
	color: transparent;
	background: transparent;
	opacity: 0;
}
.flot {
	float: left;
	margin-left: 10px;
}
.imgW {
	width: 250px;
	height: 167px;
}
.tdDep {
	width: 60%;
	padding-left: 30px;
}
.tdDep2 {
	width: 20%;
	text-align: center;
}
.inpCon {
	background-color: #ffffff;
	border-radius: 5px;
	border: 1 solid #000000;
	width: 80vw;
	height: 30px;
	color: #1c1c1c;
	font-size: 16px;
	margin-bottom: 10px;
}
.inpConTxt {
	background-color: #ffffff;
	border-radius: 5px;
	border: 1 solid #000000;
	width: 80vw;
	height: 100px;
	color: #1c1c1c;
	font-size: 16px;
}
.remate {
	font-size: 12px;
}

.imgProEmp{
	width: 100%;
	height: auto;
}

ul {
  list-style: none; /* Remove default bullets */
}

ul li::before {
  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: #26c13f; /* Change the color */
  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 1em; /* Also needed for space (tweak if needed) */
  margin-left: -1em; /* Also needed for space (tweak if needed) */
}

.inpCal {
	background-color: #ddeede;
	border-radius: 5px;
	border: none;
	width: 280px;
	height: 30px;
	color: #878b87;
	font-size: 18px;
}
.inpPer {
	background-color: #ddeede;
	border-radius: 5px;
	border: none;
	width: 80px;
	height: 30px;
	color: #878b87;
	font-size: 18px;
}
.inpRes {
	background-color: #ddeede;
	border-radius: 5px;
	border: none;
	width: 100%;
	height: 30px;
	color: #878b87;
	font-size: 18px;
}
.inpResText {
	background-color: #ddeede;
	border-radius: 5px;
	border: none;
	width: 100%;
	height: 80px;
	color: #878b87;
	font-size: 18px;
}
.resContainer {
	background-color: #f1f1f1;
	max-width: 380px;
}
.boton {
	background-color: #26c13f;
	border-radius: 5px;
	border: none;
	width: 180px;
	height: 30px;
	color: #ffffff;
	font-size: 18px;
	font-weight: 600;
	margin-top: 15px;
	cursor: pointer;
}
.boton2 {
	background-color: #26c13f;
	border-radius: 5px;
	border: none;
	width: 180px;
	height: 30px;
	color: #ffffff;
	font-size: 18px;
	font-weight: 600;
	margin-top: 5px;
	cursor: pointer;
}
.blueContainer1 {
	background-color: #ddeede;
	background-image: url("../img/nuestros_dept.jpg");
	background-repeat: no-repeat;
	background-size: 50% 100%;
	background-position: right top;
	min-height: 400px;
}
.blueContainer2 {
	background-color: #ddeede;
	background-image: url("../img/ameni.jpg");
	background-repeat: no-repeat;
	background-size: 50% 100%;
	background-position: right top;
	min-height: 400px;
}
.whiteContainer {
	background-color: #ffffff;
	background-image: url("../img/local.jpg");
	background-repeat: no-repeat;
	background-size: 50% 100%;
	background-position: left top;
	min-height: 400px;
}
.whiteContainer2 {
	background-color: #ffffff;
	background-image: url("../img/planet.jpg");
	background-repeat: no-repeat;
	background-size: 50% 100%;
	background-position: left top;
	min-height: 400px;
}
.white {
	background-color: #ffffff;
}
.sectionImg {
	width: 693px;
	height: 400px;
	display: block;
}
.tdDisplay {
	display: block;
}
.tdWidth {
	width: 40%;
}
.tdmarg {
	margin-top: 20%;
}
.pmarg {
	margin-bottom: 0px;
}
.50width {
	width: 50%;
}
.imgDep {
	width: auto;
	display: block;
}
.line {
	width: 60px;
	height: 2px;
	background-color: #26c13f;
}
.copyright {
	font-size: 12px;
}
.desde {
	text-align: center;
	font-size: 12px;
}
.costo {
	text-align: center;
	font-size: 30px;
	color: #26c13f;
	font-weight: 600;
}
.depasCar {
	font-size: 18px;
	color: #26c13f;
	margin-right: 60px;
}
.margins {
	margin-bottom: 40px;
}

.width100{
	width: 60vw;
}

.sectionWidth{
	width: auto;
}

.imgDetalle{
	width: 370px;
	height: auto;
}

.imgLogos{
	width: 50%;
	height: auto;
}

.hidden{
	display: none;
	width: 100%;
}

.unhidden{
	display: block;
}

.imgBgs{
	width: 100%;
}
/* RESPONSIVE CSS STUFF */
@media screen and (max-width: 800px) {

.hidden{
	display: block;
}

.unhidden{
	display: none;
}
	.imgDetalle{
	max-width: 280px;
	height: auto;
}
	.imgLogos{
	width: 100%;
	height: auto;
}
	.w3-right {
	float: right!important;
	width: 25px;
	height: 25px;
	background-color: rgba(0, 0, 0, 0.8);
	color: #ffffff;
	position: relative;
		top: 50%;
	left: 68%;
	text-align: center;
}
	.sectionWidth{
	width: 100vw;
	}
	.blueContainer1 {
		background-image: none;
		min-height: auto;
	}
	.whiteContainer {
		background-image: none;
		min-height: auto;
	}
	.blueContainer2 {
		background-image: none;
		min-height: auto;
	}
	.whiteContainer2 {
		background-image: none;
		min-height: auto;
	}
	.inpRes {
		background-color: #ddeede;
		border-radius: 5px;
		border: none;
		width: 85vw;
		height: 30px;
		color: #878b87;
		font-size: 18px;
	}
	.inpResText {
		background-color: #ddeede;
		border-radius: 5px;
		border: none;
		width: 85vw;
		height: 80px;
		color: #878b87;
		font-size: 18px;
	}
	.resContainer {
		background-color: #f1f1f1;
		width: 85vw;
	}
}
@media screen and (max-width: 800px) {
	
	.sectionImg {
		display: none;
	}
	.tdDisplay {
		display: none;
	}
	.tdWidth {
		width: 90%;
	}
	.imgDep {
		width: 0%;
		display: none;
	}
	.pmarg {
		margin-bottom: 25%;
	}
	.50width {
		width: 0%;
		display: none;
	}
	.imgSlide{
	max-width: 325px;
		height: auto;
}
}
@media screen and (max-width: 800px) {
	.tdDep2 {
		width: 80vw;
		text-align: center;
	}
	.tdDep {
		width: 80vw;
		padding-left: 0px;
	}
	.flot {
		float: none;
	}
	.boton {
		margin-top: 10px;
	}
	.padLeft {
		padding-left: 0%;
	}
	/* Force table to not be like tables anymore */
	.table1, .thead1, .tbody1, .th1, .td1, .tr1 {
		display: block;
	}
	.contactMap {
		border: 0;
		width: 90vw;
		height: 250px;
	}
	.imgW {
		width: 80vw;
		height: auto;
	}
}