*{
    margin: 0;
    padding: 0;
    
}

.logo img{
    width: 4%;
    z-index: 2;
}

.main-climate{
    width: 100%;
    height: 70vh;
    position: relative;
    margin-bottom: 15rem;
}


.detail-climate-container{
    width: 85%;
    margin: auto;
    display: flex;
    transition: all 2s;
    margin-top: 5rem;
}


.detail-climate-container h1{
    font-size: 2.5rem;
    margin-bottom: 1.8rem;
}

.detail-climate-container p{
    font-size: 1.2rem;
    line-height: 1.9rem;
}

.detail-climate-container img{
    width: 35%;
    border-radius: 10px;
    margin: 2rem;
}

.bubbles{
    width: 100%;
    height: 20vh;
    overflow: hidden;
    position: relative;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
}

.bubble {
    position: absolute;
    bottom:0 ;
    width: 100%;
    height: 100%;
    background-image: url(../../img/bubble3.png);
    background-size: 100% 100%;
}


.bubble1{
    animation: ani_bubbles1 30s ease-in-out infinite;
    z-index: -1;
    opacity: 0.5;
    bottom: 0;
}


@keyframes ani_bubbles1 {
    0% {
        background-position-y: 0;
    }
    100% {
        background-position-y: -35em;
    }
	
	
}


#myVideo{
    width:100%;
    transition: all 1.6s;
    border-radius: 10%;
}


/*********ACTIVITIES**********/
.activities{
    margin-top:6rem !important;
}

.activities .activities-container{
    width: 85%;
    margin:auto;
}

.waviy {
    position: relative;
    font-size: 62px;
    margin: auto;
    text-align: center;
    line-height: 200px;
}

.waviy span {
    font-family: 'Alfa Slab One', cursive;
    position: relative;
    display: inline-block;
    color: black;
    animation: waviy 1.5s infinite;
    animation-delay: calc(.1s * var(--i));
    text-shadow: 2px 1px #db3951;
}


@keyframes waviy {
    0%,40%,100% {
    transform: translateY(0)
    }
    20% {
    transform: translateY(-20px)
    }
}


.temp-activity{
    position: relative;
    width: 100%;
    height: 100vh;
}

.temp-activity .container-img img{
    position: absolute;
    transform: translate(40%, 10%);
    width: 740px;
    border-radius: 2%;
    transition: opacity 0.5s ease-in-out;
}


#earth2,#earth3,#earth4,#earth5{
    opacity: 0;
    transition: opacity 0.9s ease-in-out;
}

.buttons{
    display: flex;
    margin-top: 2rem;
    position: absolute;
    transform: translate(295%, 970%);
    justify-content: space-between;
}
.btn{
margin: 0.3rem;
}


/************** SEA LEVEL****************/

.sea-activity{
    position: relative;
    width: 100%;
    height: 80vh;
    overflow: hidden;
    margin-bottom: 5rem;
}

.sea-activity img{
    position: absolute;
    /* top: -105px; */
    bottom: 98px;
    left: 30px;
    width: 95%;
    /* z-index: 10000; */
    transition: all 3s ;
}

.seabuttons{
    display: flex;
    margin-top: 0.2rem;
    position: absolute;
    transform: translate(5%, 3%);
    justify-content: space-between;
    z-index: 10000;
}

.sea-activity .wave {
    position: absolute;
    bottom:0 ;
    left: 0;
    width: 100%;
    height: 30%;
    background: url(svg6.png);
    background-size: 3000px 100%;
    transition:all 1s;
}



.sea-activity .wave1{
    animation: ani_wave 5s ease-in-out infinite;
    z-index: 2;
    opacity: 1;
    bottom: 10px;
}

.sea-activity .wave2{
    animation: ani_wave2 3s ease-in-out infinite;
    z-index: 1;
    opacity: 0.6;
    animation-delay: -2s;
    bottom: 14px;
}

@keyframes ani_wave {
    0% {
        background-position-x: 0;
    }
    100% {
        background-position-x: 3000px;
    }
}

@keyframes ani_wave2 {
    0% {
        background-position-x: 0;
    }
    100% {
        background-position-x: -3000px;
    }
}