
@import url('https://fonts.googleapis.com/css2?family=Cabin+Condensed:wght@400;500;600;700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');


* {
    margin: 0px;
    padding: 0px;
   /* font-family: "Fredoka", sans-serif;*/
    /*font-family: "Cabin Condensed", sans-serif;*/
}
body{
    position: relative;
}

.Lt1 {
    font-family: "Fredoka", sans-serif;
    text-decoration: none;
}
.Lt2{
    font-family: "Bahnschrift", sans-serif;
    text-decoration: none;
}
.Lt3{
    font-family: "Freehand521 BT", sans-serif;;
}
html{
    scroll-behavior: smooth;
}


/*Padre*/
.padre {
    display: flex;
    flex-flow: column nowrap;  
}

/***indioma****/
.cont-ext-idioma{
    width: 100%;
    height: 20px;
   /*background-color: #f2f2f2;*/
    display: flex;
    justify-content: center;
    
}
.cont-int-idioma{
    width: 80%;
    /*background-color: #f2f2f2;*/
    display: flex;
    justify-content: end;
    
   
}
.cont-int-idioma .Lt2{
    padding: 0px 10px;
    background-color: #54B435;
    color:white;
    text-decoration: none;
}
.cont-int-idioma .Lt2:hover{
    background-color: #3d8325 ;
}

/*header*/
.header{
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    
}
.menu{
    display: flex;
    flex-wrap: wrap;
    padding: 0px;  
    position: relative;
    max-width: 1200px;
    
}
.menu div, nav{
    margin: 10px;
}
    .logo{

        flex: 1 1 auto;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0px;
       
    }
        
    .nav {
        flex: 3 1 auto;
        display: flex;       
        justify-content: center;
        
        
    }
        ul, ol {
            list-style: none;
        }
        .navint > li {
          float: left;
        }
        .nav a {
            display: block;
            text-decoration: none;
            font: 1em sans-serif;
            padding: 15px;
            flex: 1 1 auto;
            text-align: center;
            font-family: "Fredoka", sans-serif;
            font-optical-sizing: auto;
            font-size: 20px;
            font-weight: 600;
            color: #54B435;
            transition: all 0.5s;
           
            
        }
        .nav .navint li ul{
            
            display: none;
            flex-direction: column;
            position: absolute;
            background-color: white;
            z-index: 1;
            margin: 0px;
            padding: 0px;
           
            
        }
        .navsub a{
            text-align: left;
        }
        .navsub i{
            position: relative;
            left: -10px;
        }
        .nav i {
            padding-left: 5px;
        }
            .navint li:hover > .ocultarServicios{
                display: block;
                
            }
            .nav a:hover{
                /*font-size: 25px;*/
                /*border-bottom:  #54B435 solid;*/
                color: white;
                background-color: #54B435;

            }
    .btnmenu {
        display: flex;
        flex: 10 1 auto;
        justify-content: right;
        align-items: center;
        display: none;
        
        
    }
    .btnmenu a{
        color: #54B435;
        font-size: 30px;
        cursor: pointer;
    }

    .social{
        display: flex;
        flex: 1 1 auto;
        align-items: center;
        justify-content: center;
        
       
    }
        #instagrambtn{
            border-right: 2px solid;
            border-right-color: #54B435;
            
        }
        .social a{
            padding:10px 20px;
            text-decoration: none;
            color: #54B435;
            text-align: center;
            font-size: 25px;
        }
            .social a:hover, #instagrambtn:hover{
            background-color: #54B435;
            color: white;
            
            
            }
      
    .containersliders{
        position: relative;
        width: 100%;
        overflow: hidden; 
       
        
    }


    .containersliders input{
        visibility: hidden;
        display: none;

    }
    .containersliders input:nth-child(1):checked ~ .buttons label:nth-child(1),
    .containersliders input:nth-child(2):checked ~ .buttons label:nth-child(2),
    .containersliders input:nth-child(3):checked ~ .buttons label:nth-child(3)
    {
        opacity: 1;
        /*scroll-margin: 1.2; */
        width: 60px;
    }
      /*Animacion*/
     /* @keyframes example {
        0%   { initial-value: c;
        }
        50%  {
            left: -100vw;
        }
        100%  {
            left: -200vw;
        }*/
        /*100% {background-color: green;}*/
    /*  }*/

    /*fin Animacion*/
    .sliders {
        position: relative;
        width: 300vw;
        height: 600px;
        display: flex;
        transition: 1s ease-in-out;
        animation-name: example;
         animation-duration: 50s;
         animation-iteration-count: 3;
         animation-direction: alternate;
         animation-timing-function: ease-out;
         scroll-snap-type: x mandatory;
        
        
    }
    .slider1, .slider2, .slider3{
        position: relative;
        width: 100vw;
        height: 600px;
        display: flex;
        justify-content: center;
        align-items: center;

    }
    .slider1{
        background: url(../img/mr1.png);
        background-position: center;
        background-attachment: contain;
        background-size: cover;
    }
    .slider2{
        background:linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.0)),
         url(../img/saona.jpg);
        background-position: center;
        background-attachment: contain;
        background-size: cover;
        display: flex;
        flex-direction: row;
        text-align: right;
        position: relative;
        overflow: hidden;
        
        
    }
  
    .slider2 h1{
        color: white; 
        position: absolute; 
    }
    .slider2 .text1{
        right: 30px;
        top: 20px;
        font-size: 50px;
    }
    .slider2 .text2{
        right: 30px;
        top: 70px;
        font-size: 150px;
        color: #54B435;
    }
    .slider3{
        background:linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.0)),
         url(../img/imagen3.jpg);
        background-position: center;
        background-attachment: contain;
        background-size: cover;
    }
      
    .containersliders input:nth-child(1):checked ~ .sliders{
        left: 0vw;
    }
    .containersliders input:nth-child(2):checked ~ .sliders{
        left: -100vw;
    }
    .containersliders input:nth-child(3):checked ~ .sliders{
        left: -200vw;
    }
  
    .buttons{
        position: absolute;
        width: 100%;
        display: flex;
        justify-content: center;
        bottom: 50px;
        gap: 10px;
    }
    .buttons label{
        width: 20px;
        height: 20px;
        background-color: white;
        opacity: 0.5;
        cursor: pointer;
        z-index: 1;
        transition: 300ms ease-in-out;
    }
    .buttons label:hover{
        scale: 1.2;
        opacity: 1;    
    }
   
    

/*.sliders{
    background-color:#2D9596 ;
    display: flex;
    height: 600px;
}*/

/* Section*/
.title{
    background-color: #f2f2f2f2;
    display: flex;
    justify-content: center;
    margin-top: 10px;
}
.titulo {
    font-size: 50px;
    color: #54B435;
    width: 90%;
    margin: 5px;
    max-width: 1200px;
}
.titulo i{
    margin: 30px;
}

.sectCont{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    
   
}
    .servcio{
        display: flex;
        flex-wrap: wrap;
        margin: 20px;
        width: 400px;
        height: 500px;
        margin-top: 30px;
        
       
    }
    
    .class .img{
        background: url(../img/starex.jpg);
       
        
    }
    .prime .img{
        background: url(../img/hiace.jpg);
        
    }
    .luxury .img{
        background: url(../img/suburban.jpg);
        
    }
    .servcio .img{
        width: 100%;
        height: 50%;
        background-position: center;
        background-attachment: contain;
        background-size: cover;
        transition: all 1s;
        cursor: pointer;
        
    }
    .servcio .img:hover{
        scale: 1.1;
        cursor: default;
    }
    .servcio .text{
        width: 100%;
        height: 50%;
        background-color: #f2f2f2;
        opacity: 5;
        border-radius: 10%;
        display: flex;
        flex-direction: column;
        position: relative;
        
       
       
    }
    .servcio .text .n1{
        font-family: "Montserrat", sans-serif;
        font-size: 70px;
        position: absolute;
        top: -50px;
        left: -40px;
    }
    .servcio .text .n2{
        font-family: "Montserrat", sans-serif;
        font-size: 40px;
        position: absolute;
        top: 40px;
        left: 130px;
        color: #54B435;
       
    }
    .servcio .text a{
        text-decoration: none;
        padding: 10px 15px;
        background-color: #54B435;
        color: white;
    }
    .servcio .text i{
        margin-right: 5px;
    }
    .servcio .text .inf{
        width: 70px;
        margin: 25px 10px 5px 0px;
    }
    .servcio .text .txtDetalle{  
        margin-left: 15px;
        margin-right: 15px;
        text-align: justify;
        font-family: "Montserrat", sans-serif;
        
    }
    .textMDH{
        text-align: center;
        margin: 5px;
        color:#54B435;
        text-decoration: wavy ;
        
    }
    .servcio .btnbook {
        width: fit-content;
        align-self: center;
        transition: all 0.5s;
        border-radius: 5px;
       
    }
    .servcio .btnbook:hover{
        
        background-color: #3d8325;
        scale: 1.1;
    }
    
 /*Excursion*/
     .excursion{
        height: auto;
        display: flex;
        flex-direction: column;
       
    }
    .excursion .contExcursiones {
        align-self: center;
        max-width: 1200px;
        height:auto;
        display: flex;
        flex-wrap: wrap;
        margin: 20px;
        
   
    }
    
        .contExcursiones .img{
        width: 100%;
        transition: all 4s;
        border-radius: 5px;
        
        
        }
       
        .contExcursiones .contimg{
            
            display: flex;
            width: 350px;
            position: relative;
            cursor: pointer;
            border-radius: 5px;
            margin: 5px;
            overflow: hidden;
        }
        .contExcursiones .contimg1{
            flex: 1 1 auto;
        }
        .contExcursiones .contimg2{
            flex: 2 1 auto;
        }
        .contExcursiones .contimg3{
            flex: 1 1 auto;
        }
        .contExcursiones .contimg4{
            flex: 1 1 auto;
        }
        .contExcursiones .contimg5{
            flex: 1 1 auto;
        }
        
        .contExcursiones .img1{
            height: 250px;
            background-color: silver;
            background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
             url(../img/caballos.jpg);
            background-position: center;
            background-attachment: contain;
            background-size: cover;
           
        }
        .contExcursiones .img2{
            
            height: 250px;
            background-color: silver;
            background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
             url(../img/saona.jpg);
            background-position: center;
            background-attachment: contain;
            background-size: cover;
        }
        .contExcursiones .img3{
            height: 250px;
            background-color: black;
            background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
             url(../img/Buggy.jpg);
            background-position: center;
            background-attachment: contain;
            background-size: cover;
            
            
        }.contExcursiones .img4{
            height: 250px;
            background-color: palevioletred;
            background:  linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
            url(../img/ballenas.jpg);
            background-position: center;
            background-attachment: contain;
            background-size: cover;
            
        }
        .contExcursiones .img5{
            height: 250px;
            background-color: purple;
            background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
             url(../img/city.jpg);
            background-position: center;
            background-attachment: contain;
            background-size: cover;
        }
        .contExcursiones .img:hover{
            scale: 1.2;
            z-index: 5;
            border: white ;
            cursor: default;
        }
        .excursion .btnbook {
            width: fit-content;
            align-self: center;
            font-size: 30px;
            text-decoration: none;
             padding: 10px 50px;
             margin: 20px;
             background-color: #54B435;
             color: white;
             border-radius: 10px;
             transition: all 1.1s;
        }
        .excursion .btnbook i{
            margin-right: 5px;
        }
        .excursion .btnbook:hover{
            color: #f2f2f2;
            background-color: #3d8325;
            scale: 1.05;
        
        }
        .contExcursiones div{
            display: flex;
            justify-content: end;
            align-items: end;
        }
        .contExcursiones .contimg a{
            color: white;
            font-size: 30px;
            font-style:inherit;
            position: absolute;
            z-index: 5;
            
        }

        
        

/*pie*/
/*******Pie*******/

.cont-ext-pie{
    width: 100%;
   height: 500px;
    background:  linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.8)),url(/img/PiePage.jpg);
    background-repeat: no-repeat;
    background-size: cover;  
    position: relative;
    display: flex;
    align-content: center;
    display: block;
    
    margin-top: 50px;
}

.cont-int-pie {
    max-width: 1200px;
    min-height: fit-content;
    /*background-color: #54B435;*/
    right: 0px;
    bottom: 0px;
    top: 50px;
    left: 0px;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    color: #f2f2f2f2;
    border-bottom: #f2f2f2f2 solid 1px;
   
}
.cont-int-pie .txtInf,
 .cont-int-pie .list-inf  li, 
 .list-enlaces li{
    margin: 10px;
    font-size: 1em;
    text-decoration: none;
    
}
.cont-int-pie  a:hover{
    color: #54B435;
    transition: all 0.7s;
 }
 .cont-int-pie  .list-enlaces :hover{
    color: #54B435;
    cursor: pointer;
    transition: all 0.7s;

 }
.cont-int-pie a, .cont-int-pie li a{
    text-decoration: none;
    color: #f2f2f2f2;
    cursor: pointer;
}
.cont-int-pie .pie-inf{
    width: 250px;
}
.cont-int-pie .pieLogo{
    width: 350px;

}
.cont-int-pie .pieLogo{
    padding: 5px;
}
.cont-int-pie .pieSubTitulos{
    font-size: 2.5em;
    padding: 10px 10px;
}
.cont-int-pie .pieIcon{
    padding: 5px;
    font-size: 1.2em;
    color: #54B435;
}
.cont-int-pie .listSocial{
    display: flex;
   
   
}
.cont-int-pie .listSocial li{
    background-color: white;
    padding: 5px;
    border-radius: 100%;
    cursor: pointer;
    margin: 10px;
}
.cont-int-pie .listSocial .socialIcon{
    background-color: #54B435;
    font-size: 1.2em;
    padding: 10px ;
    border-radius: 100%;
} 
.cont-int-pie .listSocial li:hover{
    background-color: #54B435;
    scale: 1.1;
    transition: all 0.7s;
}

.cont-int-marca{
    top: 0px;
    bottom: 0px;
    right: 0px;
    left: 0px;
    margin: auto;
    max-width: 1200px;
    display: flex;
    justify-content: space-between;
}
.cont-int-marca a{
    color: #f2f2f2f2;
    font-size: 1em;
    margin: 10px;
    text-decoration: none;
    

}
.cont-int-marca i{
    color: #54B435;
}
/**************   Media    **************/
@media all and (max-width: 1110px){
    
    .menu .nav{
        position: absolute;
        display: flex;
        flex-direction: column;
        z-index: 10;
        background-color: white;
        width:100%;
        top: 100%;
        margin-top: 0px;
        margin-left: 0px;
        border-right: #54B435 solid 5px;
    }
    .menu .ocultar{
        left: -200%;
    }
   
    
    .menu .nav ul{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: left;
        position: relative;
        
    }
    .menu .nav ul li ul {
        width: 100%;
        top: 0px;
        position: relative;
        overflow: hidden;
        
    }
    .menu .nav ul li ul a{
        width: 100%;
       
     
    }
    .menu .btnmenu {
        display: flex;
    }
    .cont-ext-pie {
        height: fit-content;
        justify-content: center;
        align-items: center;
    }
.containersliders .text1 {
font-size: 40px;

}
.containersliders .text2{
   font-size: 130px;


}

    
}
@media all and (max-width: 900px){
    .containersliders .text2{
        font-size: 110px;
     
     }
}
@media all and (max-width: 730px){
    .containersliders .text2{
        font-size: 80px;
     
     }
     .pie {
        flex-direction: column;
        justify-content: center;
        align-items: center;
   }
   .pieh{
flex-direction: column;
      
}
   .pie .contacto img{
    position: relative;
    
 }
    
}
@media all and (max-width: 500px){
    .containersliders .text1 {
        font-size: 30px;
        }
        .containersliders .text2{
           font-size: 80px;
        
        }
    .servcio .text .n1{
        top: -50px;
        left: 5px;
    } 
}