@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap');
*
{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Poppins', sans-serif;
        scroll-behavior: smooth;
}

@font-face {
        font-family: Baha;
        src: url(Bahamas.ttf);
}

/* width */
::-webkit-scrollbar {
        width: 10px;
      }
      
      /* Track */
      ::-webkit-scrollbar-track {
        border-radius: 1.5px;
      }
       
      /* Handle */
      ::-webkit-scrollbar-thumb {
        background: #ff9100; 
        border-radius: 1.5px;
      }
      
      /* Handle on hover */
      ::-webkit-scrollbar-thumb:hover {
        background: #e78403; 
      }

body{
        background: #111;
}

.fitBg{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0.8;
}

.destination{
        text-align: center;
}

.destination .content{
        text-align: center;
}

.destination .destinationList{
        position: relative;
        display: flex;
        justify-content: center;
        /*align-items: center;*/
        flex-wrap: wrap;
        margin-top: 40px;
}

.destination .destinationList .box{
        position: relative;
        min-width: 350px;
        max-width: 350px;
        height: 100%;
        background: #191919;
        transition: 0.5s;
        margin: 10px;
}

.destination .destinationList:hover .box{
        opacity: 0.2;
}

.destination .destinationList .box:hover{
        opacity: 1;
}

.destination .destinationList .box .imgBx{
        position: relative;
        width: 100%;
        height: 400px;
}

.destination .destinationList .box .content{
        width: 100%;
        /*height: 260px;*/
        display: flex;
        justify-content: center;
        margin-top: 15px;
}

.destination .destinationList .box .content h2{
        color: #fff;
        font-weight: 500;
        line-height: 1.2em;
}

.destination .destinationList .box .content h2 span{
        font-size: 0.8em;
        font-weight: 300;
        opacity: 0.5;
}

.destination .content .aaa{
        display: inline-block;
        color: #a8a7a7;
        font-size: 4em;
        font-family: Baha;
}

.destination .content .Blogo{
        color: #ff9100;
        font-size: 4em;
        display: inline-block;
        font-family: Baha;
        margin-top: 50px;
}

/*Menú*/

.navigation{
        position: fixed;
        top: 0px;
        left: 0;
        width: 60px;
        height: 100%;
        transition: 0.5s;
        overflow: hidden;
        background: rgb(20 20 20 / 0.2);
        z-index: 1;
}

.navigation:hover,.navigation.active{
        width: 300px;
        background: rgb(20 20 20 / 1);
}

.navigation ul{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        color: #fff;
}

.navigation ul li{
        position: relative;
        width: 100%;
        list-style: none;
}

.navigation ul li:hover{
        background: rgb(0 0 0 / 0.7);
}

.navigation ul li a{
        position: relative;
        display: none;
        width: 100%;
        display: flex;
        text-decoration: none;
        color: #fff;
}

.navigation ul li a:hover .icon{
        color: #a8a7a7;
}

.navigation ul li a .icon{
        position: relative;
        display: block;
        min-width: 60px;
        height: 60px;
        line-height: 60px;
        text-align: center;
        color: #ff9100;
}

.navigation ul li a .icon .fa{
        font-size: 24px;
}

.navigation ul li a .icon .title{
        position: relative;
        display: block;
        padding: 0 10px;
        height: 60px;
        line-height: 60px;
        text-align: start;
        white-space: nowrap;
}

.toggle{
        position: absolute;
        top: 60px;
        right: 5px;
        width: 60px;
        height: 60px;
        cursor: pointer;
        background: rgb(20 20 20 / 0.2);
}

.toggle:before{
        content: '\f0c9';
        font-family: fontAwesome;
        position: absolute;
        width: 100%;
        height: 100%;
        line-height: 60px;
        text-align: center;
        font-size: 24px;
        color: #fff;
        color: #ff9100;
}

.toggle.active:before{
        content: '\f00d';
}

@media (max-width: 767px){
        .navigation{
                left: -60px;
        }
        .navigation.active{
                left: 0px;
                width: 82.5%;
        }
}

@media (max-width: 767px){

        .destination .content .Blogo{
                color: #ff9100;
                font-size: 3em;
                font-family: Baha;
                display: inline-block;
                margin-top: 50px;
        }
        
        .destination .content .aaa{
                display: inline-block;
                color: #a8a7a7;
                font-size: 3em;
                font-family: Baha;
        }
}