:root {
    --main-color: #083627;
    --max-width: 800px;
}

body, html { padding: 0; margin: 0; height: 100%; overflow-x: hidden; }
body { min-height: 100%;}

.bg {
    background: var(--main-color);
    position: relative;
	height: 100%;
}

.logo {
    max-width: 200px; 
}

.header {
    padding: 1rem; position: relative; z-index: 1002;
}


.grb {
    position: absolute; right: 0; top: 0; bottom: 0;
    object-fit: cover; width: 33%;
    overflow: hidden;
}

.grb img {
    height: 100%; width: 100%; object-fit: cover;
    /*animation: upAndDownOpacity 2s infinite alternate;*/
}

.bar {
    background: #FFF;
    position: absolute; height: 10vh;
    left: 0; bottom: 0; width: 100%;
}

.vid {
    max-width: var(--max-width); height: auto; overflow: hidden;
    width: 100%; position: relative; border-radius: 1rem;
    z-index: 1001; max-width: 100%;
}

.vid video {
    width: 100%; height: auto; max-width: 100%;

}
.vid .play {
    display: flex; width: 80px; height: 80px;
    background: rgba(255, 255, 255, 0.6); border-radius: 100%; position: absolute; top: 50%; left: 50%;
    transform: translateX(-50%) translateY(-50%);
    justify-content: center; align-items: center;
    cursor: pointer; transition: transform 0.5s;
}
.vid .play:hover {
    transform: scale(1.1) translateX(-50%) translateY(-50%);
}
.vid .play.hidden {
    display: none;
}

.vid .play:before {
    content: ''; display: block; width: 1px; height: 1px;
    border-left: solid 15px black;
    border-top: solid 15px transparent;
    border-bottom: solid 15px transparent;
    margin-left: 5px;
}
.title {
    width: 100%; max-width: var(--max-width); object-fit: contain;
    position: relative;
}

.media {
    max-width: var(--max-width); padding: 1rem; display: flex;
    gap: 2rem; flex-direction: column; position: relative; 
    padding: 1rem; padding-bottom: 5rem;
}

.slider {
    position: absolute; right: 0; bottom:-30%; width: 100%; max-width: 300px; min-height: 300px; z-index: 1000; transform: scale(0.2);
    animation: upAndDown 4s infinite alternate;
}
.slider img {
    position: absolute; left: 0; top: 0; bottom: 0; 
    opacity: 0;
    transition: opacity 2s ease-in-out;
}

.slider img.active {
    opacity: 1;
}

.moving {
    transition: transform 2s ease-in-out;
}

@keyframes upAndDown {
    0% {
        transform: scale(0.7) translateY(0); /* Start position */
    }
    100% {
        transform: scale(0.7) translateY(30px); /* End position */
    }
}

@keyframes upAndDownOpacity {
    0%, 100% {
        opacity: 0.5; /* Start and end opacity */
    }
    50% {
        opacity: 1; /* Middle opacity */
    }
}

@media all and (min-width: 600px) {

    .slider {
        right: -20%; bottom:10%;
    }

    .header, .media {
        padding: 3rem;
    }

    @keyframes upAndDown {
        0% {
            transform: translateY(0); /* Start position */
        }
        100% {
            transform: translateY(30px); /* End position */
        }
    }


}