@import url(../colorVariables.css);

.section-pics-pagination-container{
    margin-top: 100px;
    width: 100%;
    height: calc(100vh - var(--header-height)) !important;
}
.section{
    position: relative;
    height: auto;
    width: 100%;

}

.btn-outline-light:focus{
    background-color: #B9AB87 !important;
}

.btn-outline-light:active{
    background-color: #B9AB87 !important;
}


.btn-outline-light:hover{
    background-color: #B9AB87 !important;
}

.btn-outline-light:checked{
    background-color: #B9AB87 !important;
}



.pagination-container{
    position: relative;
    overflow: hidden;

}
.pagination-right-button{
    top: 50%;
    left: 100px;
}
.pagination-left-button{
    top: 50%;
    right: 40px;
}
.pagination-right-button, .pagination-left-button, .images-paginating{
    position: absolute;
}
.pagination-right-button, .pagination-left-button{
    color: var(--site-primary);
}


.sentence-pagination-container{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--site-primary-op-1);
}

.pagination-right-button, .pagination-left-button{

    width: 60px;
    height: 60px;
    /*padding-top: 5px;*/
    /*padding-bottom: 5px;*/
}

.pagination-left-button:hover, .pagination-right-button:hover{
    background: var(--site-secondary) ;
    color: var(--site-primary) !important;
}

.pagination-left-button:active, .pagination-right-button:active{
    background: var(--site-primary);
    color: var(--site-secondary) !important;
}

.pagination-left-button, .pagination-right-button{
    transition: 250ms background-color;
}

.pagination-location{
    position: relative;
    width: 100%;
    height: 50px;
    background-color: var(--site-primary-op-1);
    z-index: 3;
}

.pagination-sentence{
    background-color: var(--site-primary-op-1);
    width: 80%;
    /*height: 100px;*/
    z-index: 100 !important;
    transition: 250ms opacity;
    font-size: calc(30px + 3vw);
    top: 15%;
    left: 40%;
    animation: 1200ms pagination_sentence ease-in-out;

}
.pagination-sentence-full{
    background-color: var(--site-primary-op-1);
    width: 100%;
    /*height: 100px;*/
    z-index: 100 !important;
    transition: 250ms opacity;
    height: 100px;
    font-size: calc(30px + 3vw);
    top: 0;
    left: 50%;
    animation: 1200ms pagination_sentence_full ease-in-out;

}

/*.pagination-locating{*/
/*    color: var(--site-secondary);*/
/*}*/


.images-paginating{
    width: 100%;
    height: 100%;
    transition: 2000ms left, 2000ms right, 2000ms opacity;

}

.image-animation-1{
    animation: images_animation 20s infinite ease;
}

.image-animation-2 {
    animation: images_animation 20s 5s infinite ease;
}
.image-animation-3{
    animation: images_animation 20s 10s infinite ease;

 }
.image-animation-4{
    animation: images_animation 20s 15s infinite ease;

}

.discount{
    height: 50px;
    width: 100%;
    top: 0;
    left: 0;
    background-color: rgba(185, 171, 135, 0.6);
}

.discount a{
    font-family: space_grotesk, sans-serif;
    color: var(--site-primary);
    transition: 250ms color ;
    font-size: 22px;
}
.discount:hover a{
    color: white;
}

.discount-number{
    top: 58%;
    left: 60%;
    width: 50px;
    height: 50px;
    font-size: 15px;
    background-color: var(--site-primary);
    color: white;
    transform: rotate(25deg) !important;
}


.top-to-down{
    animation: 1s linear top-to-down;
}


.project-about{
    position: relative !important;
    height: auto;
    /*overflow-x: hidden;*/
}
.project-image-right{
    position: absolute;
    right: 0;
    top: 0;
    width: 40%;
    z-index: -1;
    height: 100%;

}

.project-image-left{

    position: absolute;
    left: 0;
    top: 0;
    width: 40%;
    transform: rotateY(180deg);
    z-index: -1;
    height: 100%;

}


.about-title{
    width: 100%;
    /*min-height: 350px;*/
    position: relative;
    z-index: 3;
    padding-top: 50px;
    padding-bottom: 50px;
}

.about-title-text{
    /*font-family: space_grotesk, sans-serif !important;*/
    font-size: calc(7px + 3.2vw);
    width: 70%;
    height: 90%;
    position: relative;
}

.about-title-text .comma-small{
    position: absolute;
    top: -50px;
    left: -30px;
    font-size: calc(150px + 1.5vw);
    color: var(--site-secondary);
    z-index: -1;
    animation: comma_small_index 6s infinite;
}
.about-title-text .comma-big{
    position: absolute;
    top: -50px;
    right: -65px;
    font-size: calc(200px + 4.5vw);
    z-index: -5;
    color: rgba(185, 171, 135, 0.31);
    animation: comma_big_index 6s infinite;
}


.vision-comma-big,
.vision-comma-small{
    position: absolute;
}
.vision-comma-small{
    color: var(--site-secondary);
    left: 50px;
    font-size: calc(150px + 1.5vw);
    animation: comma_small_index 6s infinite;
}
.vision-comma-big{
    color: rgba(185, 171, 135, 0.31);
    font-size: calc(200px + 4.5vw);
    right: 0;
    animation: comma_big_vision 6s infinite;
}

.about-title-text p{
    font-family: "Times New Roman", sans-serif;
}

.about-image-about-grid, .our-vision-grid{

    display: grid;
    grid-template-columns: 40% 60%;
    grid-template-rows: 550px;

}


#about-this div{
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    -webkit-line-clamp: 11;
    -webkit-box-orient: vertical;
}

.about-writing, .vision-writing{
    font-size: calc(10px + .8vw);
}






#why-this-project-container{
    height: auto;
}

.why-this-project-grid{
    display: grid;
    grid-template-columns: 40% 60%;
    grid-template-rows: 1000px;

}

.why-see-more{
    transition: 250ms all;
    color: var(--site-secondary) ;
    background-color: var(--site-primary) ;
}

.why-see-more:hover{
    color: var(--site-primary) !important;
    background-color: var(--site-secondary) !important;
}

.our-vision-font{
    font-size: calc(10px + 3.5vw);
}



.about-right,.about-left, .vision-title, .vision-writing,.why-this-writing{
    position: absolute;
    /*top: 0;*/
}

.why-this-image{
    position: absolute;
    z-index: -1;
    top: 0;
    left: 20%;
    height: 100%;
    opacity: 0.2
}

.about-right, .vision-writing, .why-this-writing{
    right: 0;
    object-fit: cover;
}
.about-left, .vision-title{
    left: 0;
}



.see-more-btn{
    background-color: var(--site-primary);
    color: var(--site-secondary)
}

.see-more-btn:hover{
    background-color: var(--site-secondary) !important;
    color: var(--site-primary) !important;
}


.see-more-btn:active, .interior-see-more:active{
    background-color: var(--site-primary) !important;
    color: var(--site-secondary)!important;
}

.three-parts{
    padding: 150px 100px 50px 100px;
    min-height: 1300px;

}

#interior-images-container{
    position: relative;
    /*top: 0;*/
    left: -100px;
    width: calc(100% + 200px);
    display: flex;
    overflow: hidden;
    height: 500px;
}
.interior-image{
    position: absolute;
    top: 0;
    transition: 250ms left, 250ms right ;
}

#interior-chevron-left,#interior-chevron-right{
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    z-index: 10;
    font-size: calc(20px + 1vw);
    width: 55px;
    height: 55px;
    /*border: 1px solid red;*/
    background-color: var(--site-primary);
    color: var(--site-secondary);
    transition: 250ms background-color,250ms color;
    cursor: pointer;
}

#interior-chevron-left{
    left:  2%;
}

#interior-chevron-right{
    left: 98%;
}

#interior-chevron-left:hover,#interior-chevron-right:hover{
    background-color: var(--site-secondary);
    color: var(--site-primary);
}
#interior-chevron-left:active,#interior-chevron-right:active{
    background-color: var(--site-primary);
    color: var(--site-secondary);
}

.three-parts-container{
    min-height: 1000px;
}


.reveal{
    opacity: 0;
}
.reveal.active{
    opacity: 1;
}

.active.going-left{
    animation: going_left 3s ;
}
.active.going-right{
    animation: going_right 1200ms;
}

.active.small-to-large{
    animation: small-to-large 1800ms;
}

.interior-see-more{
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--site-secondary) !important;
    color: var(--site-primary)!important;
}

.interior-image-enlarging{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.interior-images-background{
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%,-50%) rotateZ(90deg);
    opacity: .1;
    /*width: calc(100% + 200px);*/
}


.apartment-payment-plans{
    padding: 0 100px;

}

.apartment-payment-plans .apartment-plans{
    background-color: var(--site-primary);
}



.apartment-types-container{
    display: grid;
    grid-template-columns: repeat(auto-fit, 33%);

}


.apartment-payment-plans .payment-plans .payment-plans-container{
    display: grid;
    grid-template-columns: repeat(auto-fit, 50%);
}

.contact-us{
    padding: 50px ;
}


.contact-font-size{
    font-size: calc(10px + 1vw);
}


.main-apartment-plans-container{
    width: 80%;
    height: 100%;
}

.plan-details-container{
    display: grid;
    grid-template-columns: repeat(auto-fit, 30%);
    justify-content: space-evenly;
    align-items: center;
    gap: 10px;
}
.apartment-plan-image{
    background-color: var(--site-secondary);
    transition: 250ms all;
    width: 850px;
    height: 600px;
}



.apartment-plan-container{
    height: 720px;
}
.apartment-plan-position-container{
    height: 20px;
}

.apartment-plan-images-container,
.apartment-plan-position-dot,
.apartment-type-title,
.plan-detail,
.index-images-container,
.index-position-dot{
    transition: 1s left,1s right, 500ms opacity, 1s z-index;
}


.apartment-type-cover-2_1_A-1,
.apartment-type-cover-2_1_A-2,
.apartment-type-cover-2_1_B-1,
.apartment-type-cover-2_1_B-2{
    height: 15.2%;
}


.apartment-type-cover-2_1_A-1,
.apartment-type-cover-2_1_A-2{
    width: 21.1%;
    top: 0;

}
.apartment-type-cover-2_1_A-1{
    left: 12%;
}
.apartment-type-cover-2_1_A-2{
    left: 66%;
}



.apartment-type-cover-2_1_B-1,
.apartment-type-cover-2_1_B-2{
    width: 25%;
}

.apartment-type-cover-2_1_B-1,
.apartment-type-cover-2_1_B-2{
    left: 33%;

}

.apartment-type-cover-2_1_B-1{
    top: 0;
}
.apartment-type-cover-2_1_B-2{
    bottom: 0;
}

.apartment-type-cover-1_1-1,
.apartment-type-cover-1_1-2{
    height: 18%;
}

.apartment-type-cover-1_1-1,
.apartment-type-cover-1_1-2{
    top: 41%;
}
.apartment-type-cover-1_1-1{
    width: 12.3%;
}
.apartment-type-cover-1_1-2 {
    width: 12.9%;
}
.apartment-type-cover-1_1-1{
    left: 0;
}
.apartment-type-cover-1_1-2{
    right: 0;
}


.apartment-type-cover-1_0-1,
.apartment-type-cover-1_0-2{
    height: 15.2%;
}

.apartment-type-cover-1_0-1,
.apartment-type-cover-1_0-2{
    left: 57.8%;
    width: 8.5%;
}

.apartment-type-cover-1_0-1{
    top: 0%;
}
.apartment-type-cover-1_0-2{
    bottom: 0%;
}

.apartment-type-cover-3_1-1,
.apartment-type-cover-3_1-2{
    height: 15.2%;
}

.apartment-type-cover-3_1-1,
.apartment-type-cover-3_1-2{
    left: 33.5%;
    width: 32.9%;
}

.apartment-type-cover-3_1-1{
    top: 0;
}
.apartment-type-cover-3_1-2{
    bottom: 0;
}


.apartment-type-cover-2_1_A-1-upper,
.apartment-type-cover-2_1_A-2-upper{
    height: 15.2%;
    width: 20.9%;
}

.apartment-type-cover-2_1_A-1-upper{
    top: 0;
    left: 13%;
}

.apartment-type-cover-2_1_A-2-upper{
    top: 0;
    left: 66%;
}

.apartment-type-cover-1_1-1-upper,
.apartment-type-cover-1_1-2-upper{
    height: 17.9%;
}

.apartment-type-cover-1_1-1-upper,
.apartment-type-cover-1_1-2-upper{
    top: 40.9%;
    width: 13.1%;
}

.apartment-type-cover-1_1-1-upper{
    left: 0;
}
.apartment-type-cover-1_1-2-upper{
    right: 0;
}


.apartment-type-cover-3_1-1-upper,
.apartment-type-cover-3_1-2-upper{
    height: 15.2%;
}

.apartment-type-cover-3_1-1-upper,
.apartment-type-cover-3_1-2-upper{
    width: 32.7%;
    left: 33.6%;
}

.apartment-type-cover-3_1-1-upper{
    top: 0;
}
.apartment-type-cover-3_1-2-upper{
    bottom: 0;
}



.apartment-type-cover-3_1-1-upper div,
.apartment-type-cover-3_1-2-upper div,
.apartment-type-cover-1_1-1-upper div,
.apartment-type-cover-1_1-2-upper div,
.apartment-type-cover-2_1_A-1-upper div,
.apartment-type-cover-2_1_A-2-upper div,
.apartment-type-cover-3_1-1 div,
.apartment-type-cover-3_1-2 div,
.apartment-type-cover-1_0-1 div,
.apartment-type-cover-1_0-2 div,
.apartment-type-cover-1_1-1 div,
.apartment-type-cover-1_1-2 div,
.apartment-type-cover-2_1_A-1 div,
.apartment-type-cover-2_1_A-2 div,
.apartment-type-cover-2_1_B-1 div,
.apartment-type-cover-2_1_B-2 div{
    transition: 150ms background-color;
}

.apartment-type-cover-3_1-1-upper div:hover,
.apartment-type-cover-3_1-2-upper div:hover,
.apartment-type-cover-1_1-1-upper div:hover,
.apartment-type-cover-1_1-2-upper div:hover,
.apartment-type-cover-2_1_A-1-upper div:hover,
.apartment-type-cover-2_1_A-2-upper div:hover,
.apartment-type-cover-3_1-1 div:hover,
.apartment-type-cover-3_1-2 div:hover,
.apartment-type-cover-1_0-1 div:hover,
.apartment-type-cover-1_0-2 div:hover,
.apartment-type-cover-1_1-1 div:hover,
.apartment-type-cover-1_1-2 div:hover,
.apartment-type-cover-2_1_A-1 div:hover,
.apartment-type-cover-2_1_A-2 div:hover,
.apartment-type-cover-2_1_B-1 div:hover,
.apartment-type-cover-2_1_B-2 div:hover{
    background-color: rgba(25, 47, 88, 0.3) !important;
}


.plan-details{
    height: 100px;
}
.plan-detail{
    padding: 0 25px 0 25px;
}


.why-this-project-writing{
    padding: 0 100px 0 100px;
}


.quote-container{
    border:3px solid var(--site-secondary);
}
.up-quote{
    left: -5%;
    top: -15%;
    transform: rotate(25deg) !important;
    transform-origin: center;
    color:  white;
    background-color:var(--site-secondary);
    /*border: 2px solid var(--site-secondary);*/
    width: 45px;
    height: 45px;
    font-size: 25px;
 }
.down-quote{
    left: 97%;
    top: 77%;
    transform: rotate(25deg) !important;
    transform-origin: center;
    color:  white;
    background-color:var(--site-secondary);
    /*border: 2px solid var(--site-secondary);*/
    width: 45px;
    height: 45px;
    font-size: 25px;
}



@media screen and (min-width: 1200px) and (max-width: 1500px) {

    .why-this-project-writing{
        padding: 0 120px 0 120px;
    }

}


@media screen and (min-width: 600px) and (max-width: 1200px) {

    .why-this-project-writing{
        padding: 0 50px 0 50px;
    }

}

@media screen and (min-width: 600px) and (max-width: 1300px) {
    .plan-details-container{
        grid-template-columns: repeat(auto-fit, 45%);
    }
    .plan-details{
        height: 125px;
        font-size: 25px;
    }

}

@media screen and (min-width:0px) and (max-width: 1300px) {
    .apartment-plan-images-container div:nth-child(even){
        display: none;
    }
    .main-apartment-plans-container{
        width: 100%;
    }

}

@media screen and (min-width: 0px) and (max-width: 600px) {
    .plan-details-container{
        grid-template-columns: repeat(auto-fit, 95%);
    }

    .up-quote{
        left: -10%;
        top: -22%;
    }
    /*.down-quote{*/
    /*    left: 97%;*/
    /*    top: 77%;*/
    /*}*/

    .about-title-text{
        font-size: calc(35px + 1vw);
    }

    .apartment-plan-image{
        height: 300px;
        width: 350px;
    }

    .apartment-type-title{
        font-size: 25px
    }

    .why-this-project-writing{
        padding: 0 10px 0 10px;
    }


}









#index-right-button, #index-left-button{
    z-index: 100;
    top: 50%;
    background-color: var(--secondary-first-der);
    color: var(--primary);
    transition: 250ms background-color;
}

#index-right-button:hover, #index-left-button:hover{
    background-color: var(--secondary-second-der);
    /*color: var(--);*/
}

#index-right-button{
    left: 90%;
}

#index-left-button{
    left: 10%;
}

#index-bottom-pagination{
    /*background-color: var(--site-primary-op-1);*/
    left: 0;
    bottom: 0;
}
#index-bottom-pagination .index-pagination-dots{
    transition: 250ms color;
}

#index-bottom-pagination .index-pagination-dots:hover{
    color: var(--secondary-second-der);
}

.index-pagination-images{
    width: 100%;
    height: 100%;
    transition: 1s left, 500ms opacity, 1s z-index;
}

#index-position-container{
 position: absolute;
    bottom: 0;
    left: 0;
}


.image-position{
    max-width: 900px;
    height: 80%;
    /*aspect-ratio:  4/3;*/
    /*animation: 8s ease-in 1 ;*/
    left: 30%;
    top: 50%;
}

.writing-position{
    width: 500px;
    height: 80%;
    /*aspect-ratio:  4/3;*/
    /*animation: 8s ease-in 1 ;*/
    left: 78%;
    top: 50%;
}

.image-size{
    width: 100%;
    height: 100%;
}

.size-changing.active{
    animation: 15s size_changing ease-out infinite;
}

.size-changing-1.active{
    animation: 15s size_changing_1 ease-out infinite;
}




.first-side-image,
.second-side-image,
.third-side-image,
.fourth-side-image{
    width: 80%;
    height: 15%;

}
.first-side-image{
    left: 50%;
    top: 15%;
}

.second-side-image{
    left: 50%;
    top: 38%;
}
.third-side-image{
    left: 50%;
    top: 62%;
}
.fourth-side-image{
    left: 50%;
    top: 85%;
}

.vertical-side-images{
    transition: 500ms opacity;
}



@keyframes pagination_sentence {
    0%{
        left: 0;
    }100%{
    left: 40%;
         }
}

@keyframes pagination_sentence_full {
    0%{
        left: 0;
    }100%{
         left: 50%;
     }
}



@keyframes size_changing {
    0%{
        /*left: 150%;*/
        /*width: auto;*/
        height: 130%;
        width: 130%;
        /*aspect-ratio: 4/3;*/
    }

    100%{
        /*left: 50%;*/
        height: 100%;
        width: 100%;
        /*aspect-ratio: 9/16;*/
    }
}

@keyframes size_changing_1 {
    0%{
        /*left: 150%;*/
        /*width: auto;*/
        height: 130%;
        width: 130%;
        /*aspect-ratio: 4/3;*/
    }
    50%{
        /*left: 50%;*/
        height: 100%;
        width: 45%;
        /*aspect-ratio: 9/16;*/
    }
    75%{
             /*left: 50%;*/
             height: 100%;
             width: 45%;
             /*aspect-ratio: 9/16;*/
         }
    100%{
        /*left: 50%;*/
        height: 100%;
        width: 48%;
        /*aspect-ratio: 9/16;*/
    }
}










@media screen and (max-width: 1800px) and (min-width: 1200px) {


    .three-parts-container{
        min-height: 1000px;
    }
    .why-this-image{
        left: 13%;
    }

}

@media screen and (min-width: 600px) and (max-width: 850px){
    .our-vision-font{
        font-size: calc(15px + 2vw);
    }
}

@media screen and (min-width: 0px) and (max-width: 600px){
    .our-vision-font{
        font-size: calc(35px + 1vw);
    }
    .vertical-side{
        display: none;
    }
    .horizontal-side{
        width: 99%;
    }
}

@media screen and (min-width: 0) and (max-width: 850px){
    #interior-chevron-left,#interior-chevron-right{
        position: absolute;
        transform: translate(-50%, -50%);
        top: 50%;
        z-index: 10;
        font-size: calc(20px + 1vw);
        width: 40px;
        height: 40px;
        /*border: 1px solid red;*/
        background-color: var(--site-primary);
        color: var(--site-secondary);
        transition: 250ms background-color,250ms color;
        cursor: pointer;
    }
    #interior-chevron-left{
        left:  5%;
    }
    #interior-chevron-right{
        left: 95%;
    }


    .our-vision-grid{
        width: 100%;
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 300px 400px;

    }


    .about-right ,.why-this-writing{
        width: 100%;
    }

    .why-this-image{
        width: 100%;
        left: 0;
        opacity: .1;
        padding: 0 !important;
    }



    /*.three-parts-container{*/
    /*    min-height: 1950px;*/
    /*}*/

    .about-writing, .vision-writing{
        font-size: calc(15px + 1vw);
    }

    .apartment-payment-plans{
        padding: 0 20px 0 20px ;
    }
    .three-parts{
        padding: 150px 30px 50px 30px;
    }
    .apartment-payment-plans .apartment-plans .apartment-type{
        justify-content: center;
    }

    .apartment-types-container{
        display: grid;
        grid-template-columns: repeat(auto-fit, 100%);


    }
    .apartment-types-container div{
        justify-content: center;
        align-items: center;
    }

    .apartment-payment-plans .payment-plans .payment-plans-container{
        grid-template-columns: repeat(auto-fit, 100%);

    }
    .contact-us{
        padding: 10px;
    }
    .about-writing{
        height: 65%;
    }
    .pagination-sentence{
        padding: 15px;
    }



}


@media screen and (min-width: 600px) and (max-width: 850px){

    .about-image-about-grid{
        width: 100%;
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 550px 550px;
    }

    #about-this div{
        -webkit-line-clamp: 8;
    }

    .why-this-project-grid{
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 800px 1000px;

    }
}
@media screen and (min-width: 0) and (max-width: 450px){
    .about-image-about-grid{
        width: 100%;
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 750px 550px;

    }

    #about-this div{
        -webkit-line-clamp: 12;
    }

    .why-this-project-grid{
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 800px 1400px;

    }
}



@keyframes top-to-down {

    0%{
        top: -100px;
    }
    100%{
        top: 0;
    }

}
@keyframes small-to-large {
    0%{
        height: 0;
        width: 0;
        opacity: 0;
    }100% {
             height: 100%;
             width: 100%;
         opacity: 1;
     }
}


@keyframes going_left {
    0%{
        left: -20%;
        opacity: 0;
    }100% {
         left: 0;
         opacity: 1;
     }
}


@keyframes going_right {
    0%{
        right: -20%;
        opacity: 0;

    }100%{
         right: 0;
         opacity: 1;
     }
}

@keyframes comma_small_index {
    0%{
        top: -30px;
    }
    50%{
        top: 10px;
    }100%{
         top: -30px;
     }
}


@keyframes comma_big_index {
    0%{
        top: -50px;
    }
    50%{
        top: -80px;
    }100%{
         top: -50px;
     }
}

@keyframes comma_big_vision {
    0%{
        top: 220px;
    }
    50%{
        top: 180px;
    }100%{
         top: 220px;
     }
}


@keyframes images_animation {
    0%  {
        width: 130%;
        height: 130%;
        top: 50%;
    }
    50%{
        width: 110%;
        height: 110%;
        top: 52%;
        left: 52%;
    }
    100%{
        width: 130%;
        height: 130%;
        top: 50%;
        left: 50%;
    }

}