/* Default max-vh classes for mobile (below 576px) */
@media (max-width: 575px) {
    .max-vh-xs-10 { max-height: 10vh!important; }
    .max-vh-xs-20 { max-height: 20vh!important; }
    .max-vh-xs-30 { max-height: 30vh!important; }
    .max-vh-xs-40 { max-height: 40vh!important; }
    .max-vh-xs-50 { max-height: 50vh!important; }
    .max-vh-xs-60 { max-height: 60vh!important; }
    .max-vh-xs-70 { max-height: 70vh!important; }
    .max-vh-xs-75 { max-height: 75vh!important; }
    .max-vh-xs-80 { max-height: 80vh!important; }
    .max-vh-xs-90 { max-height: 90vh!important; }
    .max-vh-xs-100 { max-height: 100vh!important; }
}

/* Small devices (sm, min-width: 576px) */
@media (min-width: 576px) {
    .max-vh-sm-10 { max-height: 10vh!important; }
    .max-vh-sm-20 { max-height: 20vh!important; }
    .max-vh-sm-30 { max-height: 30vh!important; }
    .max-vh-sm-40 { max-height: 40vh!important; }
    .max-vh-sm-50 { max-height: 50vh!important; }
    .max-vh-sm-60 { max-height: 60vh!important; }
    .max-vh-sm-70 { max-height: 70vh!important; }
    .max-vh-sm-75 { max-height: 75vh!important; }
    .max-vh-sm-80 { max-height: 80vh!important; }
    .max-vh-sm-90 { max-height: 90vh!important; }
    .max-vh-sm-100 { max-height: 100vh!important; }
}

/* Medium devices (md, min-width: 768px) */
@media (min-width: 768px) {
    .max-vh-md-10 { max-height: 10vh!important; }
    .max-vh-md-20 { max-height: 20vh!important; }
    .max-vh-md-30 { max-height: 30vh!important; }
    .max-vh-md-40 { max-height: 40vh!important; }
    .max-vh-md-50 { max-height: 50vh!important; }
    .max-vh-md-60 { max-height: 60vh!important; }
    .max-vh-md-70 { max-height: 70vh!important; }
    .max-vh-md-75 { max-height: 75vh!important; }
    .max-vh-md-80 { max-height: 80vh!important; }
    .max-vh-md-90 { max-height: 90vh!important; }
    .max-vh-md-100 { max-height: 100vh!important; }
}

/* Large devices (lg, min-width: 992px) */
@media (min-width: 992px) {
    .max-vh-lg-10 { max-height: 10vh!important; }
    .max-vh-lg-20 { max-height: 20vh!important; }
    .max-vh-lg-30 { max-height: 30vh!important; }
    .max-vh-lg-40 { max-height: 40vh!important; }
    .max-vh-lg-50 { max-height: 50vh!important; }
    .max-vh-lg-60 { max-height: 60vh!important; }
    .max-vh-lg-70 { max-height: 70vh!important; }
    .max-vh-lg-75 { max-height: 75vh!important; }
    .max-vh-lg-80 { max-height: 80vh!important; }
    .max-vh-lg-90 { max-height: 90vh!important; }
    .max-vh-lg-100 { max-height: 100vh!important; }
}

/* Extra large devices (xl, min-width: 1400px) */
@media (min-width: 1400px) {
    .max-vh-xl-10 { max-height: 10vh!important; }
    .max-vh-xl-20 { max-height: 20vh!important; }
    .max-vh-xl-30 { max-height: 30vh!important; }
    .max-vh-xl-40 { max-height: 40vh!important; }
    .max-vh-xl-50 { max-height: 50vh!important; }
    .max-vh-xl-60 { max-height: 60vh!important; }
    .max-vh-xl-70 { max-height: 70vh!important; }
    .max-vh-xl-75 { max-height: 75vh!important; }
    .max-vh-xl-80 { max-height: 80vh!important; }
    .max-vh-xl-90 { max-height: 90vh!important; }
    .max-vh-xl-100 { max-height: 100vh!important; }
}

body:not(.loaded) .slider-parallax .slider-inner{
    position: unset!important;
}

.invisible {
    visibility: hidden;
}

.swiper_wrapper{
    background-color: var(--black-color);
}


.animation_slider .bubble:not(.tripledot) {
    position: fixed;
    right: -110%;
}


.animation_slider .bubble.tripledot {
    position: fixed;
    right: calc(-110% + 170px) !important;
}

@media(max-width:1400px){
    .animation_slider .bubble {
        right:-90%!important;
    }

    .animation_slider .bubble.tripledot {
        right: calc(-90% + 170px) !important;
    }
}

.animation_slider .bubble:not(.tripledot) {
    width: 260px;
}

.animation_slider .bubble p{
    font-size: 1rem;
    margin: 0;
}

.animation_slider .bubble:nth-child(1){
    top: 295px;
}

.animation_slider .bubble:nth-child(2){
    top: 145px;
}

.animation_slider .bubble:nth-child(3){
    top: 10px;
}

.portfolioCover {
    height: 40vh;
    width: calc(100% - 60px);
    object-fit: cover;
    object-position: 50% 50%;
    margin: 0 30px;
    margin-bottom: -70px;
}

.border-none{
    border: none;
}

.slider-caption h2 {
    font-size: 2rem;
    letter-spacing: 1px;
    color:white;
}

section#slider, #header.full-header:not(.transparent-header), #header-wrap {
    background-color: #2f3a3a;
    color:white;
}

@media(max-width: 1400px){
    .portfolioCover {
        height: 50vh;
    }
}

@media(max-width: 575px){
    .portfolioCover {
        height: 20vh;
        margin-bottom: -30px !important;
        width: calc(100% - 10px);
        margin: 0 5px;
    }

    .slider-caption{
        justify-content: left!important;
        padding: 0 15px;
        top: 30px!important;
    }
}