html { 
    scroll-behavior: smooth; 
}


.mainVideo, #Fotos, #Planos {
    padding: 0 17%;
}


.projectMediaContainer :is(video,img) {
    cursor: zoom-in!important;
}

.projectInner {
    display: flex;
    flex-direction: column-reverse;
}

.projectInner>div {
    width: 100%;
}

.projectInner {
    padding: 0 7%;
}

.image {
    width: 100%;
    height: auto;
    margin-bottom: 2vh;
}

.image img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.projectMedia {
    margin-bottom: 10vh;
}

.projectDescription {
    padding: 2% 3%;
    height: auto;
    box-sizing: border-box;
    transition: padding 0.25s ease-in-out;
    width: 100%;
}

.projectDescription.sticky {
padding-top: 13vh!important;
}


.projectTitle h1 {
    width: fit-content;
}

.projectTitle {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 5vh 0;
    padding-bottom: 4vh;
    position: relative;
}

.projectDescription *, .projectDescription {
    font-family: 'Lexend';
}


.projectTitle h1 {
    width: fit-content;
    font-family: 'Lexend';
    font-size: 2.1em;
    margin: 0;
}

.image video {
    width: 100%;
    height: auto;
}

.swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.swiper{
    width:100%;
    height:100%;
}

.hiddenSwiper {
    z-index:20;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0.1% 0%;
    box-sizing: border-box;
    display: block;
    pointer-events: none;
    opacity: 0;
    transition: all 0.25s ease-in-out;
    backdrop-filter: brightness(1.4) blur(7px);
    padding-bottom:5vh;

}

.hiddenSwiper.active{
    opacity:1;
    pointer-events: all;
}




.swiper-button-prev::after, .swiper-button-next::after {
    color: white;
}
.swiper-pagination-bullet-active {
    background: #1a1a1a!important;
    opacity: 1!important;
}

.closeSwiper {
    font-family: cursive;
    position: absolute;
    z-index: 10;
    top: -2%;
    left: 94%;
    font-size: 1.6em;
    border-radius: 50px;
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.25s ease-in-out;
    opacity: 0;
    transform: translate(-50%,50%);
}

.swiper-slide-active .closeSwiper {
    opacity: 1;
}



main#content :is(img, video){
    cursor: pointer;
}

span.swiper-pagination-bullet {
    width: 16px;
    height: 16px;
    margin: 0em 0.6em!important;
    min-width: 16px;
    min-height: 16px;
}


.closeSwiper:after {
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg id='Capa_1' data-name='Capa 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 66.55 66.55'%3E%3Cg style='opacity:0.39'%3E%3Ccircle cx='33.27' cy='33.27' r='33.27' style='fill:%23fff'/%3E%3C/g%3E%3Cline x1='22.45' y1='22.45' x2='44.04' y2='44.04' style='fill:none;stroke:%23000;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px'/%3E%3Cline x1='44.1' y1='22.51' x2='22.51' y2='44.1' style='fill:none;stroke:%23000;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    transition: all 0.15s ease-in-out;
    background-position: center;
}

.closeSwiper:hover::after {
    transform: scale(0.92);
}



.swiper-slide.swiper-slide-prev {
    transform: scale(0.9)translateX(10%)!important;
    filter: brightness(0.5);
}

.swiper-slide-active,.swiper-slide-prev,.swiper-slide-next {opacity: 1!important;}

.swiper-slide {
    opacity: 0;
}


.swiper-slide-inner {
    border: 2px solid #0000009e;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.96);
    padding: 4em;
    box-sizing: border-box;
    width: 80%;
    height: 100%;
    margin: 0 auto;
    position: relative;
}


.swiper {
    overflow: visible!important;
}

html body .hiddenSwiper .swiperControls.swiperControls>div {
    position: relative;
    left: unset!important;
    right: unset!important;
    top: unset!important;
    bottom: unset!important;
}


.swiper-pagination {
    width: fit-content!important;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80%;
    margin: auto auto;
    background-color: rgba(255,255,255,0.8);
    border-radius: 40px;
}

.swiper-sepparator {
    width: 100%;
    height: 4px;
    background-color: white;
    margin: 0 2%;
    border-radius: 5px;
}

.swiper-button-prev, .swiper-button-next {
    margin: unset!important;
    width: 60px!important;
    height: 60px!important;
    min-width: 60px!important;
    max-width: 60px!important;
    min-height: 60px!important;
    min-height: 60px!important;
    transition: all 0.15s ease-in-out;
}

.swiper-button-next {
    padding-left: 1%;
}

.swiperControls {
    width: 100%;
    height: 5%;
    position: absolute;
    top: 100%;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5%;
    box-sizing: border-box;
    padding-left: 6.6%;
}

.swiper-button-prev::after, .swiper-button-next::after {
    font-size: 0px!important;
    background-image: url("data:image/svg+xml,%3Csvg id='Capa_1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 66.55 66.55'%3E%3Cg transform='translate(33.27,33.27) scale(0.7) translate(-33.27,-33.27)'%3E%3Cpolyline points='23.99 13.72 44.55 33.28 23.99 53.83' style='fill:transparent;stroke:black;stroke-linecap:round;stroke-linejoin:round;stroke-width:4px'/%3E%3C/g%3E%3C/svg%3E%0A");
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.swiper-button-prev::after{
   transform: rotate(180deg);
}


span.swiper-pagination-bullet {
    transition: all 0.15s ease-in-out;
}

span.swiper-pagination-bullet:hover {
    transform: scale(0.9);
}

span.swiper-pagination-bullet-active {
    transform: unset!important;
}

.swiper-slide video {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    transition: all 0.25s ease-in-out;
}


.mainVideo video {
    width: 100%;
    height: 100%;
    margin-bottom: 3em;
}


.projectNavigation {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    transform: translateY(-200%);
}

.projectNavigation {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%,0%);
    transition: width 0.25s ease-in-out,
    height 0.25s ease-in-out;
}

.projectNavigation>a {
    color: black;
    font-family: 'Lexend';
    font-weight: 500;
    font-size: 1.1em;
    text-decoration: unset;
    margin: 0 1em;
    transition: all 0.25s ease-in-out;
    cursor: pointer;
}

 .projectNavigation>a:hover{
        font-weight: 600;
    }

.longDescription {
    padding: 6vh 9%;
    font-family:'Lexend'
}

.longDescription section {
    font-family: 'Lexend'!important;
}


body:has(.hiddenSwiper.active), html:has(.hiddenSwiper.active) {
    overflow: clip!important;
}

html body .swiper-pagination-bullet {
    background: #1a1a1a;
    opacity: 0.7;
}

.projectNavigation.sticky {
    position: fixed;
    z-index: 8;
    top: 10vh;
    width: 100%;
    background-color: white;
    padding-bottom: 1em;
}


.projectNavigation.sticky a {
    font-size: 1em;
    margin: 0 2.6em;
}

.swiper-button-next {
    top: 50%!important;
    left: 100%!important;
    transform: translate(-190%,-50%);
}

.swiper-button-prev {
    top: 50%!important;
    left: 0%!important;
    transform: translate(140%,-50%);
}

.swiper-button-next:hover{
    transform: translate(-190%,-50%) scale(0.92);
}

.swiper-button-prev:hover{
    transform: translate(140%,-50%) scale(0.92)  ;
}

.swiper-button-next:active{
    transform: translate(-190%,-50%) scale(0.75) ;
}
.swiper-button-prev:active{
    transform: translate(140%,-50%) scale(0.75) ;
}

.swiper-pagination {
    padding: 0% 1%;
}


@media only screen and (max-width: 1600px) {


span.swiper-pagination-bullet {
    width: 12px!important;
    height: 12px!important;
    min-width: 12px;
    min-height: 12px;
}

    section {
        font-size: 0.9em;
    }   
    .projectTitle h1 {
        font-size: 1.6em;
    }
    .header.sticky .headerLogo p {
    font-size: 0.7em;
    }
    .header.sticky .headerLogo {
    width: 110px;
}
.swiper-button-prev, .swiper-button-next {
    /* width: 48px!important; */
    /* height: 45px!important; */
    /* min-width: 45px!important; */
    /* max-width: 45px!important; */
    /* min-height: 45px!important; */
    /* min-height: 45px!important; */
}
}

@media only screen and (max-width:1050px){

    .swiper-slide-inner {
    width: 90%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.swiper-slide {
    opacity: 0!important;
}

.swiper-slide-active {
    opacity: 1!important;
}

.swiper-button-next {
    top: 50%!important;
    left: 100%!important;
    transform: translate(-100%,-50%);
}

.swiper-button-prev {
    top: 50%!important;
    left: 0%!important;
    transform: translate(-10%,-50%);
}


.swiper-button-next:hover {
    transform: translate(-100%,-50%) scale(0.92);
}

.swiper-button-prev:hover {
    transform: translate(-10%,-50%) scale(0.92);
}

.swiper-button-next:active {
    transform: translate(-100%,-50%) scale(0.75);
}

.swiper-button-prev:active {
    transform: translate(-10%,-50%) scale(0.75);
}


}


@media only screen and (max-width:800px){

    .projectTitle h1 {
    text-align: center;
}
.projectDescription {
    padding-bottom: 6vh;
}

    span.swiper-pagination-bullet {
    width: 14px;
    height: 14px;
}
    .projectInner {
    padding: 0px 5%;
}

.projectInner {
    display: flex;
    flex-direction: column-reverse;
}
.swiper-slide.swiper-slide-visible.swiper-slide-active {
    padding: 1em;
}
.projectInner>div {
    width: 100%;
}
}

@media only screen and (max-width:600px){
    .swiper-slide.swiper-slide-prev{
        transform: unset!important;
    }

    .swiper-slide.swiper-slide-visible.swiper-slide-active {
    width: 99%!important;
    margin-left: 0.5%;
}


.hiddenSwiper {
    padding-bottom:7vh;
}

.swiper-slide {
    height: auto!important;
    margin: auto 0;
}

.swiper-pagination {
    height: 50%;
}


.closeSwiper{
    left: 93%;
    height: 40px;
    width:40px;
}

.swiperControls {
    height: 7%;
}

.swiper-slide-inner {
    padding: 12px;
}


.swiper-sepparator {
    display: none;
}
.projectTitle h1 {
    font-size: 1.3em;
    padding: 0 5%;
}

.swiper-slide {
    margin: unset!important;
    box-sizing: border-box;
    padding: 5px!important;
}

html body .swiper-button-next {
    top: 100%!important;
    transform: translate(-105%,-110%)!important;
}

html body .swiper-button-prev {
    top: 100%!important;
    transform: translate(-5%,-110%)!important;
}

html body .swiper-button-next:hover {
    transform: translate(-105%,-110%) scale(0.92)!important;
}

html body .swiper-button-prev:hover {
    transform: translate(-5%,-110%) scale(0.92)!important;
}

html body .swiper-button-next:active {
    transform: translate(-105%,-110%) scale(0.75)!important;
}

html body .swiper-button-prev:active {
    transform: translate(-5%,-110%) scale(0.75)!important;
}

.projectNavigation>a {
    font-size: 0.8em!important;
}

.projectNavigation.sticky a{
    margin:unset;
}

.projectNavigation.sticky {
    top: 10vh;
    transform: translateX(-50%);
    height: 4vh;
    justify-content: space-evenly;
}

.mainVideo, #Fotos, #Planos {
    padding: unset;
}

html body .closeSwiper {
    left: 100%;
    top: 0;
    transform: translate(-125%,25%);
}
}

@media only screen and (max-width:700px){
    .swiper-pagination>span:last-child {
    display: none;
}

}