@charset "utf-8";
/* Con esta orden (@font-face), esta que va a continuaci�n, se utiliza para poner cualquier tipograf�a, en tu web */
@font-face {
	/* para obtener la tipograf�a que quieras, tienes que conseguir primero la versi�n .ttf (truetype), luego convertirla a los otros formatos (.woff/.svg/.eot), en estos sitios que paso a continuaci�n:
1-a- Aca las buscas y las bajas https://es.ffonts.net/, luego las dezipeas y seguis con el siguiente paso.
1-b Aca, es para que sea compatible, con Google Chrome, elegir formato .woff y luego en un segundo paso el formato .svg / https://www.fontconverter.org/es.html y https://www.fontconverter.io/es/ttf-a-woff2/ aca haces el formato .woff2

2- Despu�s ir a este sitio: 
http://www.kirsle.net/wizards/ttf2eot.cgi
convertir a .eot , finalmente poner todos los formatos de tipograf�as en la misma carpeta llamada fonts
IMPORTANTE EN LA VERSION .TTF ABRILA EN WINDOWS Y ARRIBA DE TODO FIJATE COMO SE LLAMA LA TIPOGRAFIA, YA QUE A VECES HAY PEQUEñAS VARIACIONES, FIJATE ACÁ EN ESTE CASO SE LLAMA AGENCYFB Y EN EL RESTO PONES AGENCYR */
	font-family: "STIXTwoText-Regular";
	src: url("../fonts/STIXTwoText-Regular.eot") format("eot"),
	/* esto que viene a continuaci�n ".eot?#iefix" es un arreglo para versiones viejas de internet explorer */
	url("../fonts/STIXTwoText-Regular.otf") format("opentype"),  
	url("../fonts/STIXTwoText-Regular.woff") format("woff"),  
	url("../fonts/STIXTwoText-Regular.woff2") format("woff2"),  
	url("../fonts/STIXTwoText-Regular.ttf") format("truetype"),  
	url("../fonts/STIXTwoText-Regular.svg") format("svg");
	font-weight: normal;
	font-style: normal;
	font-display: fallback;
}
@font-face {
	font-family: "Copper Penny DTP";
	src: url("../fonts/Copper_Penny_DTP.eot") format("eot"),
	url("../fonts/Copper Penny DTP.otf") format("opentype"),  
	url("../fonts/Copper_Penny_DTP.woff") format("woff"),  
	url("../fonts/Copper Penny DTP.woff2") format("woff2"),  
	url("../fonts/Copper Penny DTP.ttf") format("truetype"),  
	url("../fonts/Copper_Penny_DTP.svg") format("svg");
	font-weight: normal;
	font-style: normal;
	font-display: fallback;
}
/* COMIENZA Diseño móvil: 480 px e inferior. ESTE SITIO WEB ES CSS MOBILE FIRST */
* {
	-moz-box-sizing: border-box;
  	-webkit-box-sizing: border-box;
 	box-sizing: border-box;
	margin:0;
	padding:0;
}
body {
	background: #fff;
	font-family: "Copper Penny DTP", Verdana, Arial, Helvetica;
}
/* comienzan estilos de scrollbar */
body::-webkit-scrollbar {
	width: 10px;
	background: rgba(53,101,72,.7);	
}
body::-webkit-scrollbar-thumb {
	border-radius: 10px;
	background: #356548;
	border-right: 2px solid #000000;
	}
/* terminan estilos de scrollbar */
/* comienza whatsapp  celular */
a.btn-wsp {
    position: fixed;
    width: 48px;
    height: 48px;
    bottom: 110px;
    right: 10px;
    background:#fff;
    border-radius: 60px;
    text-align:center;
    box-shadow: 0px 1px 10px rgba(0,0,0,0.3);
    z-index: 2500;
    transition: all 300ms ease;
}
a.btn-wsp:hover {
    background: #c4b107;
}
/* termina whatsapp  celular */
/* comienzan estilos solo del index */
.contenedor-index {
display: flex;
justify-content: center; 
width: 100vw;
height: 100vh;
background-image: url("../img/resort-rio-grande-i.avif");
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center center;
background-attachment: fixed;
}
.contenido {
width: 90%;
height: auto;
margin: 15% 5% 0% 5%;
	}
.contenido img {
width: 48%;
height: auto;
margin: 3% 26% 0% 26%;
    }
.contenido h1 {
width: 95%;
height: auto;
font-family: "Copper Penny DTP";
font-style: normal;
font-weight: 100;
font-size: 28px;
color: #fff;
letter-spacing: 3px;
line-height:95%;
border-bottom: 2px solid #ffffff;
margin: 0% 2.5% 3% 2.5%;
text-align: center;
	}	
.contenido .indexcolumn {
width: 95%;
height: auto;
margin: 2% 2.5% 10% 2.5%;
text-align: center;
	}
.contenido p {
width: 100%;
height: auto;
font-family: "STIXTwoText-Regular";
font-style: normal;
font-weight: 100;
font-size: 17px;
color: #fff;
letter-spacing: 1px;
margin: 0% 0% 0% 0%;
text-align: center;
	}		
.button {
	display: flex;
	justify-content: center; /* Alinea horizontalmente al centro */
    align-items: center; /* Alinea verticalmente al centro */
	width: 56%;
	height: 37px;
	background:#254632;
	font-family: "Copper Penny DTP";
	letter-spacing: 3px;
	color:#fff;
	font-size: 9px;
	margin: 2% 22% 0% 22%;
	text-align:center;
	text-decoration:none;
	cursor: pointer;
	border-radius:8px;
	-o-transition:.5s ease;
	-ms-transition:.5s ease;
	-moz-transition:.5s ease;
	-webkit-transition:.5s ease;
	transition:.5s;
}
.button i {
	margin: 0px 10px 0px 0px;	
}
.button span {
	margin: 1px 0px 0px 0px;
}
.button:hover {
background-color: #71937E;
color: #000000;
	}	
/* terminan estilos solo del index */
/* comienzan estilos header y navegacion */
header {
	width:100%;
	height: 530px;
	margin: 0px 0px 0px 0px;
}
.navbar {
	width: 100%;
	padding: 0px;
	position: fixed;
	top: 0px;
	z-index: 3000;
	background-color: rgba(29, 29, 27, 0.4);	
	}
#logo {
	margin: 15px;
	float: left;
	width: 143px;
	height: 81px;
	background: url("../img/logo-resort-rio-grande.png") no-repeat center;
	background-size: 143px 81px;
	}
header nav {
	width:70%;
	height:100%;
	left:-100%;
	margin: 0;
	position: fixed;
	background-color: rgba(53, 101, 72, 0.75);	
	z-index: 999;
}
.menu_bar {
	display: block;
	width: 100%;
	background-color: rgba(53, 101, 72, 0.75);	
	/*background-color:#356548;*/
	}
.menu_bar .bt-menu {
		display:block;
		width: 100%;
		height: 120px; /*segun las medidas del logo hay que tocar este valor */
		padding:20px; /*segun las medidas del logo hay que tocar este valor */
		background-color: rgba(53, 101, 72, 0.75);	
		color:#fff;
		text-decoration:none;
		font-size:20px;
		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
		box-sizing:border-box;
}
.menu_bar span {
		float: right;
		font-size: 40px;
		margin-top: 15px;
	}
header nav ul {
	overflow:hidden;
	list-style:none;
}
header nav ul li {
	display:block;
	float:none;
	border-bottom: 1px solid rgba(97, 139, 41, .5);
}
header nav ul li a {
	font-size:12px;
	color:#fff;
	padding:18px;
	letter-spacing: 2px;
	display:block;
	text-decoration:none;
	-o-transition:.5s;
	-ms-transition:.5s;
	-moz-transition:.5s;
	-webkit-transition:.5s;
	transition:.5s;
}
header nav ul li span {
	margin-right:15px;
}
header nav ul li a:hover {
	background-color:#71937E;
	border-radius: 6px;
}
header nav ul li a.active {
	background-color:#254632;
	border-radius: 6px;
}
/* termina nav para celular */
section {
	padding:20px;
}
/* termina nav para celular */
.row-full {
	clear: both;
	width:100%;
	height:auto;
	overflow: hidden;
	}
.row-centrado {
	clear: both;
	width: 100%;
	height: auto;
	margin: 0 auto;
	overflow: hidden;
	}
/* termina nav para celular */
.flexcenter {
    display: flex;
	justify-content: center; /* Alinea horizontalmente al centro */
    align-items: center; /* Alinea verticalmente al centro */
	background-color: #f1f3f4;
	text-align: center;
}
.audio {
	margin: 0px;
}
.content-gral-carrusel {
	min-height: 65vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	/*background-color: #F90307;*/
	overflow: hidden;
}
.about-title {
	font-size: 3.4rem;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: -0.02em;
	position: absolute;
	top: 150px;
	left: 50%;
	transform: translateX(-50%);
	pointer-events: none;
	white-space: nowrap;
	font-family: "Copper Penny DTP", "Arial Bold", Arial, sans-serif;
	background: linear-gradient(
		to bottom,
		rgb(51 102 51 / 35%) 30%,
		rgb(51 102 51 / 0%) 76%
	);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.carousel-container {
	width: 100%;
	max-width: 1200px;
	height: 450px;
	position: relative;
	perspective: 60px;
	margin-top: 110px;
}
.carousel-track {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	transform-style: preserve-3d;
	transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.card {
	position: absolute;
	width: 300px;
	height: 240px;
	background: white;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
	transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	cursor: pointer;
}
.card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.card.center {
	z-index: 10;
	transform: scale(1.1) translateZ(0);
}
.card.center img {
	filter: none;
}
.card.left-2 {
	z-index: 1;
	transform: translateX(-400px) scale(0.8) translateZ(-300px);
	opacity: 0.7;
}
.card.left-2 img {
	filter: grayscale(100%);
}

.card.left-1 {
	z-index: 5;
	transform: translateX(-200px) scale(0.9) translateZ(-100px);
	opacity: 0.9;
}

.card.left-1 img {
	filter: grayscale(100%);
}

.card.right-1 {
	z-index: 5;
	transform: translateX(200px) scale(0.9) translateZ(-100px);
	opacity: 0.9;
}
.card.right-1 img {
	filter: grayscale(100%);
}
.card.right-2 {
	z-index: 1;
	transform: translateX(400px) scale(0.8) translateZ(-300px);
	opacity: 0.7;
}
.card.right-2 img {
	filter: grayscale(100%);
}
.card.hidden {
	opacity: 0;
	pointer-events: none;
}
.nav-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(51, 102, 51, 0.6);
	color: white;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 20;
	transition: all 0.3s ease;
	font-size: 1.5rem;
	border: none;
	outline: none;
	padding-bottom: 4px;
}
.nav-arrow:hover {
	background: rgba(51, 102, 51, 0.8);
	transform: translateY(-50%) scale(1.1);
}
.nav-arrow.left {
	left: 20px;
	padding-right: 3px;
}
.nav-arrow.right {
	right: 20px;
	padding-left: 3px;
}	
h1 {
	width: 100%;
	height: auto;
	font-family: "Copper Penny DTP"; 
	font-size: 20px;
	color: #356548;
	letter-spacing: 1px;
	border-bottom: 2px solid #356548;
	margin: 8% 0% 15% 5%;
	padding: 5% 0% 0% 0%;
	-webkit-animation-duration: 24s;
  	-webkit-animation-delay: 3s;
  	-webkit-animation-iteration-count: 1;
	-ms-animation-duration: 28s;
  	-ms-animation-delay: 3s;
  	-ms-animation-iteration-count: 1;
	}
h2 {
	width: 100%;
	height: auto;
	font-family: "Copper Penny DTP"; 
	font-size: 16px;
	color: #356548;
	letter-spacing: 1px;
	margin: 0px 0px 10px 0px;
	}
p {
	font-family: "STIXTwoText-Regular"; 
	font-style: normal;
}
.columvariables {
	float: none;
	width: 90%;
	height: auto;
	-webkit-column-count: 1;
 	-webkit-column-gap: 0px;
	-moz-column-count: 1;
	-moz-column-gap: 0px;
	column-count: 1;
	column-gap: 00px;
	margin: 8% 5% 15% 5%;
	}
.columvariables p {
	font-family: "STIXTwoText-Regular";
    font-size: 20px;
	font-style: normal;
	letter-spacing: 0.3px;
	color: #999999;
	line-height: 200%;
}
.columvariables p span {
	font-family: "STIXTwoText-Regular";
    font-size: 26px;
	font-weight: bold;
	letter-spacing: 0.3px;
	color: #254632;
	line-height: 200%;
}
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}
@-webkit-keyframes flash {
  from, 50%, to {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}
@keyframes flash {
  from, 50%, to {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}
.flash {
  -webkit-animation-name: flash;
  animation-name: flash;
}
@-webkit-keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(1040px, 0, 0);
    transform: translate3d(1040px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(1040px, 0, 0);
    transform: translate3d(1040px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
/*---comienza Parallax Section---*/
.parallax-1 {
	background: url("../img/caza-y-pesca-resort-rio-grande-p.png") no-repeat fixed 100%;
	background-size: cover;
	background-position: center center;
	text-align: center;
	}
.parallax-2 {
	background: url("../img/caza-en-resort-rio-grande-p.png") no-repeat fixed 100%;
	background-size: cover;
	background-position: -500px center;
	text-align: center;
	}
.parallax-3 {
	background: url("../img/pesca-resort-rio-grande-p.png") no-repeat fixed 110%;
	background-size: cover;
	background-position: -80px center;
	text-align: center;
	}
.parallax-4 {
	background: url("../img/cessna-caravan-resort-rio-grande-p.png") no-repeat fixed 100%;
    background-size: cover;
	background-position: -25px center;
	text-align: center;
	}
.parallax-5 {
	background: url("../img/reservas-resort-rio-grande-p.png") no-repeat fixed 100%;
	background-size: cover;
	background-position: center center;
	text-align: center;
	}
.parallax-inner {
	padding-top: 180px;
	padding-bottom: 180px;
	display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: center;    /* Centra verticalmente */
	}
.parallax-inner-dos {
	height: 600px;
	display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: center;    /* Centra verticalmente */
	}
.parallax-inner p {
	width: 70%;
	height: auto;
	font-family: "Copper Penny DTP"; 
	font-size: 16px;
	color: #ffffff;
	letter-spacing: 1px;
	line-height: 160%;
	padding: 10% 10% 10% 10%;
	text-align: center;
	border-radius: 10px;
	background-color: #254632;
	opacity: 0.6;
	}
/*---termina Start Parallax Section---*/
.destacado {
	margin: 50px auto;
	text-align: center;
	font-family: "Copper Penny DTP"; 
	font-size:18px;
	letter-spacing:2px;
	line-height: normal;
	color: #356548;
	}
.rayita-abajo-2 {
	border-bottom: 2px solid #ffffff;
	}
/* comienzo de dos fotos que se amplian y cambian de opacidad */
/*Ancho y altura son modificables al requerimiento de cada uno*/
.zoom-dos-dos {
			width: 100%; /* tamaño del div */
			height: auto;
			float: left;
			margin: 0 auto;
			position: relative;
			overflow: hidden;
}
.zoom-dos-dos img {
			-webkit-transition: all .9s ease; /* Safari y Chrome */
			-moz-transition:all .9s ease; /* Firefox */
			-o-transition:all .9s ease; /* IE 9 */
			-ms-transition:all .9s ease; /* Opera */
			width:100%; /* tamaño de la foto */
			height: auto;
			opacity: 0.4;
			display: block;
			transition: .9s ease;
			}
.zoom-dos-dos:hover img {
			opacity: 1;
			-webkit-transform:scale(1.45);
			-moz-transform:scale(1.45);
			-ms-transform:scale(1.45);
			-o-transform:scale(1.45);
			transform:scale(1.45);
			z-index: 100;
			}
.content {
			position: absolute;
			top: 45%;
			left: 50%;
			transform: translate(-50%, -50%);
			-ms-transform: translate(-50%, -50%);
			text-transform: uppercase;
			text-align: center;
	        font-family: Copper Penny DTP;
			font-size: 14px;
	        letter-spacing: 1px;
			color: #000;
			background-color: rgba(255, 255, 255, 0.6);
			padding: 15px;
			border-radius: 6px;
			white-space: nowrap;
			z-index: 200;
			}
.boton {
	font-size: 14px;
	width: 160px;
	display: block;
	background: #254632;
	padding: 10px;
	margin: 10px auto;
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
	border-radius: 18px;
	}
.boton:hover {
		background: #71937E;
		text-decoration: underline;
		}
.boton:active {
    background: #000000;
	transform: scale(0.80);
		}
/* termina de dos fotos que se amplian y cambian de opacidad */
.background {
	background: url("../img/resort-rio-grande-back-verde.png") no-repeat fixed 100%;
	background-size: cover;
	background-position: center center;
	overflow: hidden;
	}
.backgroundcaza {
	background: url("../img/caza-resort-rio-grande-back-verde.png") no-repeat fixed 100%;
	background-size: cover;
	background-position: -150px center;
	overflow: hidden;
	}
.backgroundpesca {
	background: url("../img/pesca-resort-rio-grande-back-verde.png") no-repeat fixed 100%;
	background-size: cover;
	background-position: -550px center;
	overflow: hidden;
	}
.backgrounddonde {
	background: url("../img/donde-esta-resort-rio-grande-back-verde.png") no-repeat fixed 100%;
	background-size: cover;
	background-position: -220px center;
	overflow: hidden;
	}
.backgroundreservas {
	background: url("../img/reservas-resort-rio-grande-back-verde.png") no-repeat fixed 100%;
	background-size: cover;
	background-position: -85px center;
	overflow: hidden;
	}
.left-col {
		width: 100%;
		margin: 12% 0%;
	    padding: 0px 10px 0px 10px;
		}
.left-col h2 {
	font-family: "Copper Penny DTP"; 
	font-size: 14px;
	font-style: normal;
	color: #fff;
	letter-spacing: 2px;
	margin: 0px 0px 34px 0px;
	padding: 10px 0px 10px 10px;
	background-color: #254632;
	border-left: 8px solid #000000;
	}
.left-col p {
	font-family: "STIXTwoText-Regular";
	font-size: 20px;
	color: #fff;
	letter-spacing: 1px;
	line-height: 160%;
	}
.sidebar {
		width: 100%;
		height: 50%;
		margin: 10% 0%;
		}
.sidebar img {
		width: 100%;
		height: auto;
		}
.content-copa {
	display: flex;
    justify-content: space-between;
	width: 70%;
	height: auto;
	margin: 0% 15%;
}
.copa {
	width: 100%;
	height: auto;
}
.diploma {
	width: 100%;
	height: auto;
	margin: 0% 0% 0% 0%;
}
.autoRotate {
	width: 30%;
	height: auto;
	animation: AutoRotateAnimation both;	
	animation-timeline: view(50% 20%);
	}
@keyframes AutoRotateAnimation { 
	from {
	transform: rotate(0deg);
		}
	to {
	transform: rotate(360deg);
	}
    }
.show {
	view-timeline-name: --image;
	view-timeline-axis: block;
	animation-timeline: --image;
	animation-name: show;
	animation-range: entry 25% cover 50%;
	animation-fill-mode: both;
}
@keyframes show { 
	from {
	opacity: 0;
	scale: 25%;
		}
	to {
	opacity: 1;	
	scale: 100%;
	}
	}
.verde-oscuro {
	background-color: #356548;
	}
.rayita-abajo-3 {
	border-bottom: 2px solid #000000;
	}
.p-blanco {
	margin: 10% auto;
	font-family: "Copper Penny DTP"; 
	font-size: 15px;
	text-align: center;	
	color: #ffffff;
	letter-spacing: 3px;
	-webkit-animation-duration: 5s;
  	-webkit-animation-delay: 2s;
  	-webkit-animation-iteration-count: infinite;
	-ms-animation-duration: 5s;
  	-ms-animation-delay: 2s;
  	-ms-animation-iteration-count: infinite;
	}
.blanco {
	background-color: #FFF;	
		}
.foto, .foto2, .foto3, .foto4, .foto5 {
	float: left;
	width: 100%;
	heigth: auto;
	background-repeat: no-repeat;
}
.foto {
    background-image: url("../img/resort-rio-grande-pie.png");
	}
.foto2 {
	background-image: url("../img/caza-y-pesca-resort-rio-grande-pie.png");
}
.foto3 {
	background-image: url("../img/pesca-resort-rio-grande-pie.png");
}
.foto4 {
	background-image: url("../img/donde-estamos-rio-grande-pie.png");
}
.foto5 {
	background-image: url("../img/reservas-resort-rio-grande-pie.png");
}
.foto h3, .foto2 h3, .foto3 h3, .foto4 h3, .foto5 h3 {	
	width: 84%;
	heigth: auto;
	font-family: "Copper Penny DTP"; 
	font-size: 16px;
	margin: 140% 7% 4% 9%;
	padding: 10px;
	color: #000;
	letter-spacing: 1px;
	background-color: rgba(255, 255, 255, 0.7);
	}
.foto p, .foto2 p, .foto3 p, .foto4 p, .foto5 p {
	width: 84%;
	heigth: auto;
	font-family: "STIXTwoText-Regular";
	font-size: 16px;
	color: #000;
	letter-spacing: 1px;
	line-height: 160%;
	margin: 2% 7% 5% 9%;
	padding: 10px;
	background-color: rgba(255, 255, 255, 0.7);
}
.verde-oscuro-2 {
 background-color: #244643;
}
.redes {
	float: left;
	width: 40%;
	height: auto;	
	padding: 3% 0% 12% 20%;
	display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: center;    /* Centra verticalmente */
	}
#redesvaria {
	width: 95%;
	height: auto;	
	padding: 15% 0% 5% 5%;
	}
.redes p {
	font-family: "Copper Penny DTP";
	font-size: 16px;
	letter-spacing: 3px;
	text-align: center;
	color: #ffffff;
	font-style: normal;
	}
.redes a img:hover {
	box-shadow: 0px 0px 40px #ffffff;
	border-radius: 50%;
}
.padding {
	padding: 50px 0px 0px 0px;
	}
.footer-1-3 {
	float: none;
	width: 100%;
	height: auto;
	margin: 10% 0% 10% 0%;
	}
.footer-1-3 img {
	width: 50%;
	height: auto;
	margin: 0% 25%;
	}
#footer-1-3-c3 {
	margin: 0% 0% 10% 0%;
	}
.dir {
	width: 90%;
	margin: 0% 5% 0% 5%;
	font-family: Arial;
	font-size: 14px;	
	color: #fff;
	text-align: center;
	line-height: 220%;
	letter-spacing: 1px;
}
.lef {
	float: none;
}
.right {float: none;
}
.copyright {
	width: 90%;
	height: auto;
	font-family: Arial;
	font-size: 14px;	
	margin: 0% 5% 0% 5%;
	color: #fff;
	text-align: center;
	}
.negro {
	background-color: #000000;
	}
#IrArriba span {
	position: fixed;
	bottom: 30px;
	right: 2px;
	width: 64px;
	height: 64px;
	background-image: url(../img/boton-arriba.png);
	z-index: 1000;
	}
.mapa-iframe {
 width: 100%;
 height: 800px;
 margin: 2% 0% 0% 0%;
}
#blanco {
	color: #fff;
	border-bottom: 2px solid #fff;
}
/* terminan estilos formularios */
/* empieza Diseño tableta: de 481 px a 768 px. Hereda estilos de: Diseño móvil. */
@media only screen and (min-width: 481px) {
/* comienza nav para tableta */
.contenedor-index {
display: flex;
align-items: center; /*Centra verticalmente*/
justify-content: center; /* Opcional: Centra horizontalmente */
width: 100vw;
height: 100vh;
background-image: url("../img/resort-rio-grande-i.jpg");
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center center;
background-attachment: fixed;
}
.contenido {
width: 90%;
height: auto;
margin: 0% 0% 0% 0%;
text-align: center;
	}
.contenido img {
width: 30%;
height: auto;
margin: 4% 34% 0% 34%;
    }
.contenido h1 {
width: 100%;
height: auto;
font-family: "Copper Penny DTP";
font-style: normal;
font-weight: 100;
font-size: 38px;
color: #fff;
letter-spacing: 1px;
line-height:65%;
border-bottom: 2px solid #ffffff;
margin: 0% 0% 0% 0%;
text-align: center;
	}	
.contenido .indexcolumn {
float: left;
width: 31.30%;
height: auto;
margin: 2% 1% 2% 1%;
text-align: center;
	}
.contenido p {
width: 100%;
height: auto;
margin: 0% 0% 8% 0%;
text-align: center;
	}	
.button {
	width: 80%;
	margin: 0% 10% 0% 10%;
}
header {
	width:100%;
	height:833px;
	margin: 0px 0px 0px 0px;
}
/* termina nav para tableta */
.row-full {
	clear: both;
	width: 100%;
	height: auto;
	overflow: hidden;
	}
.row-centrado {
	width: 80%;
	max-width: 768px;
	height: auto;
	margin: 0 auto;
	overflow: hidden;
	}	
	
/* comienza el carrusel */
.content-gral-carrusel {
	min-height: 85vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	/*background-color: #F90307;*/
	overflow: hidden;
}
.about-title {
	font-size: 6rem;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: -0.02em;
	position: absolute;
	top: 170px;
	left: 50%;
	transform: translateX(-50%);
	pointer-events: none;
	white-space: nowrap;
	font-family: "Copper Penny DTP", "Arial Bold", Arial, sans-serif;
	background: linear-gradient(
		to bottom,
		rgb(51 102 51 / 35%) 30%,
		rgb(51 102 51 / 0%) 76%
	);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.carousel-container {
	width: 100%;
	max-width: 1200px;
	height: 450px;
	position: relative;
	perspective: 300px;
	margin-top: 140px;
}

.carousel-track {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	transform-style: preserve-3d;
	transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.card {
	position: absolute;
	width: 420px;
	height: 380px;
	background: white;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
	transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	cursor: pointer;
}

.card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.card.center {
	z-index: 10;
	transform: scale(1.1) translateZ(0);
}

.card.center img {
	filter: none;
}

.card.left-2 {
	z-index: 1;
	transform: translateX(-400px) scale(0.8) translateZ(-300px);
	opacity: 0.7;
}

.card.left-2 img {
	filter: grayscale(100%);
}

.card.left-1 {
	z-index: 5;
	transform: translateX(-200px) scale(0.9) translateZ(-100px);
	opacity: 0.9;
}

.card.left-1 img {
	filter: grayscale(100%);
}

.card.right-1 {
	z-index: 5;
	transform: translateX(200px) scale(0.9) translateZ(-100px);
	opacity: 0.9;
}

.card.right-1 img {
	filter: grayscale(100%);
}

.card.right-2 {
	z-index: 1;
	transform: translateX(400px) scale(0.8) translateZ(-300px);
	opacity: 0.7;
}

.card.right-2 img {
	filter: grayscale(100%);
}

.card.hidden {
	opacity: 0;
	pointer-events: none;
}

.nav-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(51, 102, 51, 0.6);
	color: white;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 20;
	transition: all 0.3s ease;
	font-size: 1.5rem;
	border: none;
	outline: none;
	padding-bottom: 4px;
}

.nav-arrow:hover {
	background: rgba(51, 102, 51, 0.8);
	transform: translateY(-50%) scale(1.1);
}

.nav-arrow.left {
	left: 20px;
	padding-right: 3px;
}

.nav-arrow.right {
	right: 20px;
	padding-left: 3px;
}	
h1 {
	font-size: 28px;
	letter-spacing: 3px;
	line-height: 62%;
	margin: 0% 0% 8% 0%;
	}
h2 {
	font-size: 16px;
	margin: 20px 0px 20px 0px;
	}
.columvariables {
	float: left;
	width: 100%;
	height: auto;
	-webkit-column-count: 2;
 	-webkit-column-gap: 30px;
	-moz-column-count: 2;
	-moz-column-gap: 30px;
	column-count: 2;
	column-gap: 30px;
	margin: 6% 0% 15% 0%;
	}
.columvariables p {
    font-size: 20px;
	letter-spacing: 0.4px;
	line-height: 180%;
}
.parallax-1 {
	background: url("../img/caza-y-pesca-resort-rio-grande-p.png") no-repeat fixed 100%;
	background-position: center center;
	}
.parallax-2 {
	background: url("../img/caza-en-resort-rio-grande-p.png") no-repeat fixed 100%;
	background-position: -580px center;
	}
.parallax-3 {
	background: url("../img/pesca-resort-rio-grande-p.png") no-repeat fixed 100%;
	background-position: -100px center;
	}
.parallax-4 {
	background: url("../img/cessna-caravan-resort-rio-grande-p.png") no-repeat fixed 100%;
	background-position: -25px center;
	}
.parallax-5 {
	background: url("../img/reservas-resort-rio-grande-p.png") no-repeat fixed 100%;
	background-position: center center;
	}
.parallax-inner {
	padding-top: 200px;
	padding-bottom: 200px;
	}
.parallax-inner-dos {
	height: 800px;
	}
.parallax-inner p {
	width: 48%;
	height: auto;
	font-size: 22px;
	color: #ffffff;
	letter-spacing: 3px;
	padding: 7% 7% 7% 7%;
	text-align: center;
	border-radius: 10px;
	background-color: #254632;
	opacity: 0.6;
	}
.destacado {
	margin: 50px 15px;
	}
/* comienzo de dos fotos que se amplian y cambian de opacidad */
/*Ancho y altura son modificables al requerimiento de cada uno*/
.zoom-dos-dos {
width:50%; 
}
/* termina de dos fotos que se amplian y cambian de opacidad */	
.left-col h2 {
	font-size: 14px;
	letter-spacing: 3px;
	}
.left-col p {
	line-height: 180%;
	}
.p-blanco {
	font-size: 18px;
	}
.foto, .foto2, .foto3, .foto4, .foto5 {
	float: left;
	width:100%;
	heigth: auto;
	overflow: hidden;
	background-repeat: no-repeat;
}
.foto h3, .foto2 h3, .foto3 h3, .foto4 h3, .foto5 h3 {	
	width: 50%;
	heigth: auto;
	margin: 5% 5% 0% 45%;
	padding: 10px;
	font-size: 20px;
	letter-spacing:1px;
	}
.foto p, .foto2 p, .foto3 p, .foto4 p, .foto5 p {
	width: 50%;
	heigth: auto;
	font-size: 18px;
	margin: 2% 5% 80% 45%;
	padding: 10px;
	line-height: 150%;
}
.footer-1-3 {
	float: none;
	width: 100%;
	height: auto;
	margin: 10% 0% 10% 0%;
	}
.footer-1-3 img {
	width: 40%;
	height: auto;
	margin: 0% 30%;
	}
.copyright {
	margin: 0% auto;
	text-align: center;
	}
	}
/* Diseño escritorio: de 769 px hasta un máximo de 1232 px.  Hereda estilos de: Diseño móvil y Diseño tableta. */
@media only screen and (min-width: 769px) {
/* comienza nav para escritorio */
.contenedor-index {
display: flex;
align-items: center; /*Centra verticalmente*/
justify-content: center; /* justify-content:flex-start Opcional: lo tira ala izquierda*/
width: 100vw;
height: 100vh;
background-image: url("../img/resort-rio-grande-i.jpg");
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center center;
background-attachment: fixed;
}
.contenido {
width: 70%;
height: auto;
margin: 0% 0% 0% 0%;
	}
.contenido img {
width: 22%;
height: auto;
margin: 0% 39% 0% 39%;
    }
.contenido h1 {
width: 100%;
height: auto;
font-family: "Copper Penny DTP";
font-style: normal;
font-weight: 100;
font-size: 46px;
color: #fff;
letter-spacing: 1px;
line-height:65%;
border-bottom: 2px solid #ffffff;
margin: 0% 0% 0% 0%;
text-align: center;
	}	
.contenido .indexcolumn {
float: left;
width: 31.30%;
height: auto;
margin: 2% 1% 3% 1%;
text-align: center;
	}
.contenido p {
width: 100%;
height: auto;
font-family: "STIXTwoText-Regular";
font-style: normal;
font-weight: 100;
color: #fff;
letter-spacing: 1px;
margin: 0% 0% 5% 0%;
text-align: center;
	}	
.button {
	width: 60%;
	margin: 0% 20% 0% 20%;
	}
header {
	width:100%;
	height: 795px;
	margin: 0px 0px 0px 0px;
}
.navbar {
	width:100%;
	padding: 10px;
	position: fixed;
	top: 0px;
	z-index:3000;
	}
header nav {
	float: right;
	width:80%;
	height:100%;
	left:0px;
	margin: 2% 0% 0% 0%;
	position: relative;
	background-color: transparent;
}
.menu_bar {
	display:none;
}
.menu_bar .bt-menu {
		display:none;
}
.menu_bar span {
	    display:none;
	}
header nav ul {
	float: right;
}
header nav ul li {
	float: left;
	border-bottom: hidden;
}
header nav ul li a {
	font-size:12px;
	padding:10px;
	letter-spacing: 2px;
}
header nav ul li span {
	margin-right:5px;
}
/* termina nav para escritorio */
.row-full {
	clear: both;
	width:100%;
	height:auto;
	overflow: hidden;
	}
.row-centrado {
	width:80%;
	height:auto;
	max-width: 1024px;
	margin: 0 auto;
	overflow: hidden;
	}

	
/* comienza el carrusel */
.content-gral-carrusel {
	min-height: 85vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	/*background-color: #F90307;*/
	overflow: hidden;
}
.about-title {
	font-size: 6rem;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: -0.02em;
	position: absolute;
	top: 170px;
	left: 50%;
	transform: translateX(-50%);
	pointer-events: none;
	white-space: nowrap;
	font-family: "Copper Penny DTP", "Arial Bold", Arial, sans-serif;
	background: linear-gradient(
		to bottom,
		rgb(51 102 51 / 35%) 30%,
		rgb(51 102 51 / 0%) 76%
	);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.carousel-container {
	width: 100%;
	max-width: 1200px;
	height: 450px;
	position: relative;
	perspective: 1600px;
	margin-top: 140px;
}
.carousel-track {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	transform-style: preserve-3d;
	transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.card {
	position: absolute;
	width: 520px;
	height: 380px;
	background: white;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
	transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	cursor: pointer;
}
.card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.card.center {
	z-index: 10;
	transform: scale(1.1) translateZ(0);
}
.card.center img {
	filter: none;
}
.card.left-2 {
	z-index: 1;
	transform: translateX(-400px) scale(0.8) translateZ(-300px);
	opacity: 0.7;
}
.card.left-2 img {
	filter: grayscale(100%);
}
.card.left-1 {
	z-index: 5;
	transform: translateX(-200px) scale(0.9) translateZ(-100px);
	opacity: 0.9;
}
.card.left-1 img {
	filter: grayscale(100%);
}
.card.right-1 {
	z-index: 5;
	transform: translateX(200px) scale(0.9) translateZ(-100px);
	opacity: 0.9;
}
.card.right-1 img {
	filter: grayscale(100%);
}
.card.right-2 {
	z-index: 1;
	transform: translateX(400px) scale(0.8) translateZ(-300px);
	opacity: 0.7;
}
.card.right-2 img {
	filter: grayscale(100%);
}
.card.hidden {
	opacity: 0;
	pointer-events: none;
}
.nav-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(51, 102, 51, 0.6);
	color: white;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 20;
	transition: all 0.3s ease;
	font-size: 1.5rem;
	border: none;
	outline: none;
	padding-bottom: 4px;
}
.nav-arrow:hover {
	background: rgba(51, 102, 51, 0.8);
	transform: translateY(-50%) scale(1.1);
}
.nav-arrow.left {
	left: 20px;
	padding-right: 3px;
}
.nav-arrow.right {
	right: 20px;
	padding-left: 3px;
}	
h1 {
	font-size: 32px;
	letter-spacing: 3px;
	margin: -2% 0% 7% 0%;
	}
h2 {
	font-size: 17px;
	margin: 20px 0px 20px 0px;
	}
.columvariables {
	-webkit-column-count: 3;
 	-webkit-column-gap: 30px;
	-moz-column-count: 3;
	-moz-column-gap: 30px;
	column-count: 3;
	column-gap: 30px;
	margin: 0px 0px 60px 0px;
	}
.columvariables p {
	font-size: 20px;
	line-height: 240%;
}
.flex {
	display: flex;	
	justify-content: center;
	align-items: center;
	gap: 140px;
	}
/*---comienzo Parallax Section---*/
.parallax-inner {
	padding-top: 280px;
	padding-bottom: 280px;
	}
.parallax-inner-dos {
	height: 900px;
	}
.parallax-inner p {
	width: 30%;
	height: auto;
	font-size: 28px;
	color: #ffffff;
	letter-spacing: 3px;
	padding: 3% 3% 3% 3%;
	text-align: center;
	border-radius: 10px;
	background-color: #254632;
	opacity: 0.7;
	}
/*---termina Start Parallax Section---*/
.destacado {
	margin: 80px auto;
	text-align:center;
	font-size:24px;
	letter-spacing:20px;
	}
.parallax-1 {
	background: url("../img/caza-y-pesca-resort-rio-grande-p.png") no-repeat fixed 100%;
	background-position: center center;
	}
.parallax-2 {
	background: url("../img/caza-en-resort-rio-grande-p.png") no-repeat fixed 100%;
	background-position: center center;
	}
.parallax-3 {
	background: url("../img/pesca-resort-rio-grande-p.png") no-repeat fixed 100%;
	background-position: center center;
	}
.parallax-4 {
	background: url("../img/cessna-caravan-resort-rio-grande-p.png") no-repeat fixed 100%;
	background-position: center center;
	}
.parallax-5 {
	background: url("../img/reservas-resort-rio-grande-p.png") no-repeat fixed 100%;
	background-position: center center;
	}
/* comienzo de dos fotos que se amplian y cambian de opacidad */
/*Ancho y altura son modificables al requerimiento de cada uno*/
.zoom-dos-dos {
			width:25%; /* tamaño del div como son 4x25% = 100% del area si son menos dividir y que la suma de 100% */
}
.content {	
	font-size: 15px;
	letter-spacing: 1px;
	}
.boton {
	font-size: 14px;
	margin: 10px auto;
	}
/* termina de dos fotos que se amplian y cambian de opacidad */
.background {
	background: url("../img/resort-rio-grande-back-verde.png") no-repeat fixed 100%;
	background-size: cover;
	background-position: center center;
	overflow: hidden;
	}
.backgroundcaza {
	background: url("../img/caza-resort-rio-grande-back-verde.png") no-repeat fixed 100%;
	background-size: cover;
	background-position: center center;
	overflow: hidden;
	}
.backgroundpesca {
	background: url("../img/pesca-resort-rio-grande-back-verde.png") no-repeat fixed 100%;
	background-size: cover;
	background-position: center center;
	overflow: hidden;
	}
.backgrounddonde {
	background: url("../img/donde-esta-resort-rio-grande-back-verde.png") no-repeat fixed 100%;
	background-size: cover;
	background-position: center center;
	overflow: hidden;
	}
.backgroundreservas {
	background: url("../img/reservas-resort-rio-grande-back-verde.png") no-repeat fixed 100%;
	background-size: cover;
	background-position: center center;
	overflow: hidden;
	}
.left-col {
	width: 60%;
	float: left;
	margin: 15% 5% 15% 0%;
	}
.left-col h2 {
	font-size: 14px;
	font-style: normal;
	color:#fff;
	line-height: 100%;
	margin: 0% 0% 5% 0%;
	}
.left-col p {
	font-size: 20px;
	color:#fff;
	line-height: 200%;
	font-weight: 400;
	}
.sidebar {
	width: 35%;
	height: auto;
	float: left;
	margin: 15% 0%;
	}
.sidebar img {
	width: 100%;
	height: auto;
	}
.content-copa {
	display: flex;
    justify-content: space-between;
	width: 50%;
	height: auto;
	margin: 0% 25%;
}
.copa {
	width: 14%;
	height: auto;
	}
.diploma {
	width: 50%;
	height: auto;
	margin: 0% 25% 4% 25%;
}
.foto, .foto2, .foto3, .foto4, .foto5 {
	float: left;
	width: 100%;
	height: 794px;
	background-repeat: no-repeat;
}
.foto h3, .foto2 h3, .foto3 h3, .foto4 h3, .foto5 h3 {	
	width: 38%;
	heigth: auto;
	margin: 2% 2% 2% 60%;
	padding: 15px;
	font-size: 25px;
	color: #000000;
	}
.foto p, .foto2 p, .foto3 p, .foto4 p, .foto5 p {
	width: 38%;
	heigth: auto;
	margin: 0% 2% 40% 60%;
	padding: 15px;
	font-size: 21px;
	color: #000000;
	line-height: 200%;
}
.redes {
	width: 10%;
	height: auto;	
	padding: 3% 3% 3% 15%;
	}
#redesvaria {
	float: left;
	width: 47%;
	height: auto;	
	padding: 3.5% 0% 3% 0%;	
	}
.footer-1-3 {
	float: left;
	width: 30%;
	height: auto;
	margin: 7% 5% 4% 0%;
	}
.footer-1-3 img {
	width: 100%;
	height: auto;
	margin: 0% 0% 0% 0%;
	}
#footer-1-3-c3 {
	margin: 7% 0% 4% 0%;
	}	
.left {
	text-align: left;		
	}
.right {
	text-align: right;	
	}
.copyright {
	width: 100%;
	}
}