@charset "UTF-8";
/* CSS Document */

	 * {
      box-sizing: border-box;
    }
        body {
            margin: 0;
           font-family: 'Roboto', sans-serif;
        }

        header {
            background-color: transparent !important;
            color: black;
            text-align: center;
			border-bottom: 5px solid red;
			z-index: -1;
        }
		
		#navbar {
			height:105px
			}

        #navbar {
            background-color: transparent;
            overflow: hidden;
            position: sticky;
            top: 0;
            z-index: 1200;
            transition: background-color 0.5s ease;
			text-align:center;
        }

        #navbar a {
            
            display: inline-block;
            color: black;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
            transition: background-color 0.3s;
        }

        #navbar a:hover {
            color: #555;
        }

       .menu-btn {
    display: none;
    background-color: transparent;
    color: black;
    padding: 14px 16px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    float: right; /* Add this line to make the button float to the right */
}

        /* Responsive Styles */
        @media screen and (max-width: 980px) {
            #navbar a {
                display:none;
				text-align:center;
				padding: 14px 16px;
            }
			
			#navbar {
			height:auto;
			min-height:85px;
			background-color: #999 
			}

            .menu-btn {
                display: inline-block;
				text-align:center;
				padding: 18px 16px;
            }

           #navbar.responsive a {
                display: block;
                width: 100%;
                text-align: center;
            }
			.responsiveImgLogo {
				float:left;
				 margin-top:3px !important;
  
}

span {
	float:right;
	}


        }
		  .content {
            padding: 20px;
            height: auto;
			margin-top:45%;
			background-color:#transparent;
        }
		 .content2 {
            padding: 20px;
            height: auto;
			margin-top:0px;
			background-color:#transparent;
        }
		 @media screen and (min-width: 981px) {
			  .menu-btn {
                display: none;
            }
			
		 }
		 .responsiveImgLogo {
   
    width: 100%;
    height: auto;
    max-width: 75px;
    margin-bottom: -35px;
    margin-top: -45px;
}

 .mySlides {
      display: none;
    }
    
    img {
      vertical-align: middle;
    }
    
    /* Slideshow container */
    .slideshow-container {
      max-width: 20000px;
	  width:100%;
      position: absolute;
      margin-rigth: auto;
      margin-left: auto;
	  margin-top:-175px !important; 
	   z-index:-1;
    }
	
	 @media screen and (max-width: 980px) {
		 .slideshow-container {
      max-width: 20000px;
	  width:100%;
      position: absolute;
      margin-rigth: auto;
      margin-left: auto;
	  margin-top:0 !important; 
	   z-index:-1;
    }
	 }
    
    /* Fading animation */
    .fade {
      animation-name: fadeInOut;
      animation-duration: 5s; /* Adjust the duration as needed */
    }
    
    @keyframes fadeInOut {
      0%, 100% {
        opacity: 0;
      }
      50% {
        opacity: 1;
      }
    }


.columnContainer {widdth:100%; background-color:transparent; border-bottom: 1px solid black;
			z-index: -1; margin:0px}
	
	.column {
  float: left;
  width: 50%;
  background-color: transparent !important;
  z-index:100;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
    background-color: transparent !important;
	z-index:100;
}



.column_contact {
  float: left;
  width: 50%;
  background-color: transparent !important;
  z-index:100;
}

/* Clear floats after the columns */
.row_contact:after {
  content: "";
  display: table;
  clear: both;
    background-color: transparent !important;
	z-index:100;
}


 @media screen and (max-width: 981px) {
	 .column_contact {
    width: 100%;
	height:auto;
	padding:1%
  }
 }

.column h4 {margin-left:3%}

.column a {color:#000; text-decoration:none}

.floatIzq {float: right;}

.cleardiv {
	width:100%; height:1pa; clear:both;
	
}

.caption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    background-color: transparent;
    color: white;
    text-align: left;
    padding: 10px;
    opacity: 0;
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

.caption h1 {
    font-size:9rem; 
    margin-left: 3%;
	font-family: 'Lilita One', sans-serif;
}

.caption h2 {
   font-size:4rem; 
    margin-left: 5%; 
	margin-top:-30px;
	font-family: 'Lilita One', sans-serif;}


 @media screen and (max-width: 980px) {
	.caption h1 {
    font-size:2rem; 
    margin-left: 3%;
	font-family: 'Lilita One', sans-serif;
}

.caption h2 {
   font-size:3rem; 
    margin-left: 5%; 
	margin-top:-30px;
	font-family: 'Lilita One', sans-serif;} 
 }

.mySlides:hover .caption {
    opacity: 1;
    transform: translate(-50%, -50%); /* Slide caption to the center */
}


.imgSocial {
	width:25px;
	height:25px; 
	margin:22px
	}
	
	/* Add this to your existing styles */
.book-now-btn {
    float: right;
    background-color: #069; /* Green background color */
    color: white !important;
    padding: 14px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s;
	margin-top:-48px;
	margin-right:15px
}

.book-now-btn:hover {
    background-color: #45a049; /* Darker green on hover */
}



@media screen and (max-width: 980px) {
	.book-now-btn {
    float: none;
    background-color: #069; /* Green background color */
    color: white !important;
    padding: 14px 20px;
    border: none;
    border-radius: ;
    cursor: pointer;
    font-size: ;
    transition: background-color 0.3s;
	margin-top:auto;
	margin-right:auto
}
}

.book-now-btn-extra {
    float: none;
    background-color: #069; /* Green background color */
    color: white !important;
    padding: 10px 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 12px;
    transition: background-color 0.3s;
	text-decoration:none
}

.book-now-btn-extra:hover {
    background-color: #45a049; /* Darker green on hover */
}

.book-now-btn-cont {
    float: none;
    background-color: #069; /* Green background color */
    color: white !important;
    padding: 10px 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 18px;
    transition: background-color 0.3s;
	text-decoration:none
}

.book-now-btn-extra:cont {
    background-color: #45a049; /* Darker green on hover */
}

.mainHeader {
	width:100%;
	text-align:center;
	padding:5%
	}

/* Create two unequal columns that floats next to each other */
.columna {
  float: left;
  padding:5%;
 
}

.left {
  width: 50%;
  padding-left:10%;
	padding-right:10%
}

.right {
  width: 50%;
  padding-left:2%;
	padding-right:2%
}

/* Clear floats after the columns */
.rowa:after {
  content: "";
  display: table;
  clear: both;
}

.columna img {
	max-width:800px;
	width:100%;
	
	padding-top:8%
	}
@media screen and (max-width: 980px) {
  .columna {
    width: 100%;
	height:auto;
	padding:1%
  }
  
.left {
  width: 100%
}
}

/* Create three equal columns that floats next to each other */
.columndeTres {
  float: left;
  width: 33.33%;
  padding: 5%;
  text-align:center;
}

/* Clear floats after the columns */
.rowdeTres:after {
  content: "";
  display: table;
  clear: both;
 
}

.columndeTres h2 {color:#069}
.columndeTres img {width:200px; margin:auto}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 680px) {
  .columndeTres {
    width: 100%;
  }
}

.responsive-bg {
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url('1m4635/Santa_Teresa_Costa_Rica.jpg');
  background-size: cover;
  background-position: center;
  width: 100%;
  height: auto;
  min-height: 315px;
}

.responsive-bg h1 {
  color: #FFF;
  text-align: center;
}

.Adventure h3 {
  color: #black;
  text-align: center;
}


/* Create three equal columns that floats next to each other */
.columndeAdven {
  float: left;
  width: 33.33%;
  padding: 4%;
  text-align:center;
}

/* Clear floats after the columns */
.rowdeAdven:after {
  content: "";
  display: table;
  clear: both;
 
}

.columndeAdven h2 {color:#069}
.columndeAdven img {width:250px; margin:auto}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 890px) {
  .columndeAdven {
    width: 100%;
  }
}


 .container {
      position: relative;
      width: 100%;
    }

 .container img {
      width: 100%;
      height: auto;
      display: block;
    }

    .text-overlay {
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      padding: 20px;
      color: #fff;
    }
	
	@media screen and (max-width: 890px) {
		.text-overlay {
      position: absolute;
      top: 40%;
      left: 0;
      transform: translateY(-50%);
      padding: 10px;
      color: #fff;
	  text-align:left
    }
	}
	
	
	.container a {
		text-decoration: none;
		color:#FFF;}
		
		.container a:hover {
		text-decoration: none;
		color: #393;}
		
		.waveDeco {
			margin-top:-60px;
			margin-left:auto;
			margin-right:auto;
			width:100%;
			max-width:250px;
			position: relative
			}
			
			@media screen and (max-width: 690px) {
				.waveDeco {
			margin-top:-20px;
			margin-left:auto;
			margin-right:auto;
			width:100%;
			max-width:250px;
			position: relative
			}
			}
		
	.textPhotoGallery	{
		max-width:500px;
		width:100%;
		margin: auto;
		text-align:center
		}
		
	
	
	
	
	.gallery {
    display: flex;
    flex-wrap: wrap;
}

.gallery-container {
    display: flex;
    flex-wrap: wrap;
}

.gallery-item {
    position: relative;
    cursor: pointer;
    margin: 5px;
    flex: 1 0 200px; /* Adjust the width as needed */
    overflow: hidden;
	z-index: 100
}

.gallery-item img {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
	z-index: 100
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.7);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.magnify-icon {
    color: #fff;
    font-size: 30px;
}

.gallery-item:hover img {
    transform: scale(1.1);
}

.gallery-item:hover .overlay {
    opacity: 1;
}

.lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Ensure a higher z-index value */
}

@media only screen and (max-width: 768px) {
    .lightbox {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        justify-content: center;
        align-items: center;
        z-index: 9999; /* Ensure a higher z-index value */
    }
}

.lightbox-content {
    max-width: 80%;
    max-height: 80%;
    width: auto;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
@media only screen and (max-width: 768px) {
    .lightbox-content {
        max-width: 90%; /* Adjust as needed */
    }
}

.close-btn {
    position: absolute;
    top: 105px; /* Adjust as needed */
    right: 15px;
    font-size: 30px;
    color: #fff;
    cursor: pointer;
    z-index: 1100; /* Ensure a higher z-index value */
}

/* Responsive Styles */
@media only screen and (max-width: 600px) {
    .gallery-item {
		 margin-left: 0px;
		 margin-right: 0px;
		 margin-top: 0px;
		 margin-bottom: 10px;
        flex: 1 0 100%; /* Full width on small screens */
    }
	
	
	
}

@media only screen and (max-width: 768px) {
    .lightbox-content {
        max-width: 90%; /* Adjust as needed */
    }
}
		
		.material-symbols-outlined {
    color: #FFF;
    font-size: 36px; /* Change the font size to your preference */
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}


.span1{ font-size:24px;}
.span2{font-size:36px;}
.span3{font-size:18px;}

@media screen and (max-width: 890px) {
 .span1{ font-size:12px !important; text-align:left} 
.span2{font-size:14px !important; text-align:left}
.span3{font-size:12px !important; text-align:left}
}



.footer {background-color:#222222; margin:30px 0px 0px 0px; color:white}


/* Create three equal columns that floats next to each other */
.columnFooter {
  float: left;
  width: 33.33%;
  padding: 4%;
  text-align:center;
}

/* Clear floats after the columns */
.rowFooter:after {
  content: "";
  display: table;
  clear: both;
 
}

.columnFooter h2 {color:white}
.columnFooter h4 {text-align:left}
.columnFooter a {color:white; text-decoration:none}
.columnFooter a:hover {color: #069; text-decoration:none}
.columnFooter img {width:250px; margin:auto}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 890px) {
  .columnFooter {
    width: 100%;
  }
}

.text-footer {text-align:left; line-height:25px; margin-top:95px}
    
.footerwA {max-width:25px}    
  


.footerLink  {color:white;
text-decoration:none; cursor:pointer
}

.footerLink:hover  {color: #069;
text-decoration:none; cursor:pointer
}

.spacer1 {width:100%; height:55px}
.footerLiner {width:80%; max-width:2000px; height:1px; background-color:white; margin-left:auto; margin-right:auto; margin-top:450px}
@media only screen and (max-width: 768px) {
	.footerLiner {display:none}
	
}

.text-footer-bottom h4{text-align:center}
.text-footer-bottom{text-align:center}


 form {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            max-width: 600px;
            width: 100%;
			margin:auto;
			margin-top: 25px
        }

        label {
            display: block;
            margin-bottom: 8px;
        }

        input[type="text"],
        input[type="email"],
        textarea {
            width: 100%;
            padding: 8px;
            margin-bottom: 16px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        textarea {
            height: 100px;
        }

        input[type="submit"] {
            background-color: #069;
            color: #fff;
            padding: 10px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }

        input[type="submit"]:hover {
            background-color: #45a049;
        }

        .g-recaptcha {
            margin-bottom: 16px;
        }
		
		.column_contact iframe {
    width: 90%;
    height: 450px;
	padding:20px;
}