/*top photo dekstop*/
.photo {
    position: relative;
    top: -80px;
    left: 0;
    margin: auto;
    width: 100%;
    height: 50%;
    z-index: -100;
    opacity: 0;
    animation: anim;
    animation-duration: 5s;
    animation-delay: 2s;
    animation-fill-mode: forwards;
}
/*top photos mobile*/
.slider {
   background-repeat: no-repeat;
   background-size: cover;
   width: 100%;
   height: 80vh;
   transition: all .5s ease-in-out;
   animation: slide 30s infinite;
   display: none;
}

.overlay {
   color: #fff;
   width: 100%;
   height: 80vh;
   background-color: rgba(0, 0, 0, 0.5);
   transition: all .5s ease-in-out;
}

@keyframes slide {
   0%{
      opacity: 0;
      background-image: url('../images/gallery/main-page-undertext-mobile-1.jpg');
   }

   15%{
   opacity: 1;
   background-image: url('../images/gallery/main-page-undertext-mobile-1.jpg');
}
   20%{
   opacity: 0;
   background-image: url('../images/gallery/main-page-undertext-mobile-1.jpg');
}
   20.1%{
   opacity: 0;
   background-image: url('../images/gallery/main-page-undertext-mobile-2.jpg');
}

   35%{
   opacity: 1;
   background-image: url('../images/gallery/main-page-undertext-mobile-2.jpg');
}
   40%{
   opacity: 0;
   background-image: url('../images/gallery/main-page-undertext-mobile-2.jpg');
}
   40.01%{
   opacity: 0;
   background-image: url('../images/gallery/main-page-undertext-mobile-3.jpg');
}

   55%{
   opacity: 1;
   background-image: url('../images/gallery/main-page-undertext-mobile-3.jpg');
}
   60%{
   opacity: 0;
   background-image: url('../images/gallery/main-page-undertext-mobile-3.jpg');
}

   60.01%{
   opacity: 0;
   background-image: url('../images/gallery/main-page-undertext-mobile-4.jpg');
}

   75%{
   opacity: 1;
   background-image: url('../images/gallery/main-page-undertext-mobile-4.jpg');
}
   80%{
   opacity: 0;
   background-image: url('../images/gallery/main-page-undertext-mobile-4.jpg');
}   
    80.01%{
        opacity: 0;
        background-image: url('../images/gallery/main-page-undertext-mobile-5.jpg');
}
    95%{
        opacity: 1;
        background-image: url('../images/gallery/main-page-undertext-mobile-5.jpg');
}
        100%{
        opacity: 0;
        background-image: url('../images/gallery/main-page-undertext-mobile-5.jpg');
}
}

@media only screen and (max-width: 600px) {
    .slider {
        display: block;
    }
    .photo{
        display: none;
    }
    .cd-main-content {
        padding-top: 0px;
    }               
    .mydc_video{
        margin-bottom: 0px;
    }
}
/*text links*/
.link_text_top, .link_text_middle, .link_text_bottom{
    font-family: 'Downcome';
    font-size: 65px;
    color: white;
}
.link_text_bottom{
    white-space: pre;
}

/*three containers set up*/
.container_top,
.container_middle,
.container_bottom {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: right;
    gap: 20px;
    background-color: transparent;
    overflow: hidden;
}

/*first container pedagogi*/
.container_top {
    clip-path: polygon(0 0,
            100% 0%,
            100% 90%,
            0 100%);
}
/*second container napravlenia*/
.container_middle {
    clip-path: polygon(0 10%,
            100% 0%,
            100% 100%,
            0 90%);
}
/*third container nashe prostranstvo*/
.container_bottom {
    clip-path: polygon(0 0,
            100% 10%,
            100% 100%,
            0 100%);
}

.content_container{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.text_container{
    width: 200px;
    display: flex;
    justify-content: center;
}

.card {
    position: relative;
    display: flex;
    flex: 1;
    overflow: hidden;
    height: 800px;
    width: 100%;
    gap: 20px;
    transition: all 1s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.card:hover {
    flex-grow: 1.5;
    transition: all 1s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.card img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    transition: all 1s ease-in-out;
    filter: grayscale(100%);
}
.card:hover img{
    filter: grayscale(0);
    transition: all 1s ease-in-out;
}

.card__head {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 0.5em;
    text-align: center;
    font-size: 1.1rem;
    font-weight: bold;
    color: white;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.8), transparent);
    transition: 0.5s ease-in-out;
    transform: translateY(0);
}

/* default behaviour of car__head on hover */
.card:hover .card__head {
    top: 100%;
    background: linear-gradient(360deg, rgba(48, 255, 0, 1), transparent);
    color: black;
    transition: 0.5s ease-in-out;
}

/* container_top cards on hover */
.container_top .card:hover .card__head{
    transform: rotate(-2deg) skewX(-2deg);
}
/*if 4 cards --- 93.5 - 91 - 89 - 87 */
.container_top .card:nth-child(1):hover .card__head{
    top: 93.5%;
}
.container_top .card:nth-child(2):hover .card__head{
    top: 91%;
}
.container_top .card:nth-child(3):hover .card__head{
    top: 89%;
}
.container_top .card:nth-child(4):hover .card__head {
    top: 87%;
}
/* if 5 cards then change all above "top" to --- 94 - 92 - 90 - 88 - 86 */
/* .container_top .card:nth-child(5):hover .card__head {
    top: 86%; 
} */

/* container_middle cards on hover */
.container_middle .card .card__head {
    transform: rotate(-2deg) skewX(-2deg);
}
.container_middle .card:hover .card__head {
    transform: rotate(2deg) skewX(2deg);
}
/*if 4 cards --- 8.5 - 6 - 3.5 - 1 */
.container_middle .card:nth-child(1) .card__head {
    top: 8.5%;
}
.container_middle .card:nth-child(2) .card__head {
    top: 6%;
}
.container_middle .card:nth-child(3) .card__head {
    top: 3.5%;
}
.container_middle .card:nth-child(4) .card__head {
    top: 1%;
}
/* if 5 cards then change all above "top" to +0.5% --- 9 - 6.5 - 4 - 1.5 - 1 */
/* .container_middle .card:nth-child(5):hover .card__head {
    top: 1%; 
} */

/*if 4 cards --- 87 - 89 - 91.5 - 93.5 */
.container_middle .card:nth-child(1):hover .card__head {
    top: 87%;
}
.container_middle .card:nth-child(2):hover .card__head {
    top: 89%;
}
.container_middle .card:nth-child(3):hover .card__head {
    top: 91.5%;
}
.container_middle .card:nth-child(4):hover .card__head {
    top: 93.5%;
}
/* if 5 cards then change all above "top" to --- 86.5 - 88.5 - 90.5 - 92.5 - 94 */
/* .container_middle .card:nth-child(5):hover .card__head {
    top: 94%;
} */


/* container_bottom cards on hover */
.container_bottom .card .card__head {
    transform: rotate(2deg) skewX(2deg);
}
.container_bottom .card:hover .card__head {
    transform: rotate(0deg) skewX(0deg);
}

.container_bottom .card:nth-child(1) .card__head {
    top: 1%;
}
.container_bottom .card:nth-child(2) .card__head {
    top: 4.5%;
}
.container_bottom .card:nth-child(3) .card__head {
    top: 8%;
}

.container_bottom .card:hover .card__head {
    top: 95%;
}

@media only screen and (max-width: 1300px) {
    .card{
        height: 500px;
    }
}

@media only screen and (max-width: 600px) {
/*text links*/
.link_text_top,
.link_text_middle,
.link_text_bottom {
    font-size: 30px;
}
.link_text_top{
    margin-top: 20px;
    margin-bottom: 20px;
    transform: scaleX(2);
}
.link_text_middle{
    transform: rotate(-4deg) skewX(-5deg) scaleX(1.5);
}
.link_text_bottom{
    width: fit-content !important;
    transform: rotate(4deg) skewX(-5deg) scaleX(1.5);
}

/*mobile version containers*/
.container_top, .container_middle, .container_bottom {
    background-color: transparent;
    overflow: hidden;
}

/*first container pedagogi*/
.container_top {
    clip-path: polygon(0 0,
            100% 0%,
            100% 90%,
            0 100%);
}
/*second container napravlenia*/
.container_middle {
    clip-path: polygon(0 10%,
            100% 0%,
            100% 100%,
            0 90%);
}

/*third container nashe prostranstvo*/
.container_bottom {
    clip-path: polygon(0 0,
            100% 10%,
            100% 100%,
            0 100%);
}

.card__head {
    font-size: 15px;
}

.mydc_video {
    position: relative;
    margin-bottom: -80px;
    text-align: center;
    width: 100%;
    z-index: 2;
}

.mobile_version_content{
    display: block;
}

.pc_version_content{
    display: none;
}
.slider {
    display: block;
}

.photo{
    display: none;
}

.cd-main-content {
    padding-top: 0px;
}    

.mydc_video{
    margin-bottom: 0px;
}

.container_top, .container_middle, .container_bottom {
    margin-top: 0px;
}

/*mobile version text links*/
.link_text_top, .link_text_middle, .link_text_bottom {
    margin: auto;
    width: fit-content;
    text-align: center;
    font-family: 'Downcome';
    font-size: 30px;
    color: white;
}
.link_text_top {
    transform: scaleX(1.5);
    margin-top: 20px;
    margin-bottom: 20px;
}
.link_text_middle{
    transform: rotate(-4deg) skewX(-5deg) scaleX(1.5);
}
.link_text_bottom{
    transform: rotate(4deg) skewX(-5deg) scaleX(1.5);
}
}
@media only screen and (min-width: 600px) {
    .mobile_version_content{
        display: none;
    }
    .pc_version_content{
        display: block;
    }
}

/*mobile version splides*/
.splide_top__slide .card, .splide_middle__slide .card, .splide_bottom__slide .card{
    height: 75vmin !important;
    position: relative;
}
.splide_top__slide .card:hover, .splide_middle__slide .card:hover, .splide_bottom__slide .card:hover {
    transition: all 1s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.splide_top__slide .card .card__head, .splide_middle__slide .card .card__head, .splide_bottom__slide .card .card__head{
    padding: 0.5em;
    transform-origin: 0% 0%;
    transition: all 0.5s ease-in-out;
    min-width: 100%;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
}

/**************************************/
.splide_top__slide .card .card__head {
    transform: rotate(0deg) skewX(0deg);
}

.splide_top__slide .card:hover .card__head {
    top: 88% !important;
    transform: rotate(-4deg) skewX(-4deg);
}

@media only screen and (max-width: 600px) {
    .container_top .card:not(:nth-child(5)) {
        margin-right: 0em;
    }
}

/****************************/
.splide_middle__slide .card .card__head {
    transform: rotate(-4deg) skewX(-4deg);
}

.splide_middle__slide .card:hover .card__head {
    top: 78% !important;
    transform: rotate(4deg) skewX(4deg);
}

/****************************/
.splide_bottom__slide .card .card__head {
    transform: rotate(4deg) skewX(4deg);
}

.splide_bottom__slide .card:hover .card__head {
    top: 88% !important;
    transform: rotate(0deg) skewX(0deg);
}

@media only screen and (max-width: 600px) {
    .touch-div-link {
        opacity: 0;
        position: absolute;
        width: 70px;
        height: 70px;
        background-color: gray;
        border-radius: 100px;
        top: 30%;
        left: 40%;
        transition: 1s ease-in-out;
    }
    .touch-div-link img{
        transform: scale(0.7);
    }
    .card:hover .touch-div-link {
        opacity: 0.2;
        transition: 1s ease-in-out;
    }
    .card:hover {
        opacity: 0.8;
    }
}