.filmsSection {

    display: flex;
    flex-wrap: wrap;
    width: 100%;
    overflow-x: hidden;

    min-height: 100vh;

}

.filmimglink {
    position: relative;

    flex: 1;

    /* width: 16.66%; */

    transition: flex 0.4s ease;

    overflow: hidden;

    display: inline-block;

    height: auto;

}

.filmimglink:hover {
    flex: 1.5;
}

/* .filmimglink img {
    width: 100%;
    height: 100vh;
    object-fit: cover;
    display: block;
} */

.hide-on-desktop {
    display: none;
}

.image-for-desktop{
    display: block;
}

.image-for-largeScreen{
    display: none;
}

.filmimglink .default-img,
.filmimglink .hover1-img {
    /* width: auto; */
    min-width: 100%;
    object-fit: cover;
    height: 100vh;

    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
  
    /* Default z-index */

    /* transition: opacity 0.5s ease; */
}



.filmimglink .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #2c207b2d;
    transform: none;
    /* Default state */
    transition: opacity 0.5s ease, transform 0.5s ease;
    z-index: 3;
}

.filmimglink:hover .overlay {
    opacity: 0;
    animation: fadeIngIn 1s ease-out forwards;
}



.movieTitleImage {
    position: absolute;
    z-index: 4;
    top: 50%;
    padding: 16px;
    width: 100%;
    text-align: center;
    /* transition: opacity 0.5s ease; */
}

.hoverImgCatInTheHat{

    top: 45%;
  
}

/* .filmimglink:hover .movieTitleImage {
    opacity: 1;
  } */

.hover2-img {

    /* animation: fadeUp 1s ease-out; */
    width: auto;
    /* max-width: 100%; */
    margin: 0 auto;
}

.partnerLogos{
    margin-top: 7em;
}

.hover3-img {

    width: auto;
  
    margin: 0 auto;
}

.movieTitleImage p{
    font-size: 1.21em;
}

.filmRelaseDate{
    margin-top: 15px;
}

.margieClausFilmRelaseDate{
    margin-top: 8.5em;
}

@keyframes fadeIngIn {

    0% {
        opacity: 1;
        /* transform: translateY(40px); */
    }

    50% {
        opacity: 0.8;
    }

    80% {
        opacity: 0.5;
    }

    100% {
        opacity: 0;

    }
}




@keyframes fadeIngUp {

    0% {
        opacity: 0;
        /* transform: translateY(40px); */
    }


    50% {
        opacity: 0.5;
    }

    80% {
        opacity: 0.8;
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Width 1400 and height 1050 */

/* @media only screen and (max-width: 1400px) and (max-height:1050px) {
    .movieTitleImage {

        top: 20%;


    }

} */



/*********************** Responsive Design ***********************/

@media screen and (min-width: 2200px) {

    .image-for-desktop{
        display: none;
    }
    
    .image-for-largeScreen{
        display: block;
    }

    .hover2-img{
        width: 50%;
    }


    .movieTitleImage{
        font-size: 2em;
    }
}

@media (max-width: 1366px) {

   
    .filmimglink .default-img,
    .filmimglink .hover1-img {
        min-width: 100%;
        min-height: 100vh;
    }

    .filmsSection {
        min-height: 100vh;
    }

    .catInTheHatPartnerLogos{
        margin-top: 5em;
    }
    

    /* .movieTitleImage {

        top: 50%;

    } */

    /* .hoverImgCatInTheHat {
        top: 39%;
    } */




    /* .filmimglink .default-img,
    .hover1-img {
        min-height: 100vh;
    } */

    /* .movieTitleImage {

        top: 60%;


    }
 */

    .filmimglink:hover {
        flex: 2;
    }


    /* .hover2-im.animate {
        opacity: 0;
        transform: translateY(20px);
        animation: fadeIngUp 2s ease-out forwards;
    } */

}




/* @media (max-width: 1024px) {

    .filmsSection {
        min-height: 100vh;
    }

    .filmimglink .default-img,
    .hover1-img {
        min-height: 100vh;
    }

    .movieTitleImage {

        top: 30%;


    }


} */


/*********  Mobile Design ************/


@media (max-width: 768px) {

    .hide-on-mobile {

        display: none;
    }

    .hide-on-desktop {
        display: block;
    }

   


    .filmSectionForMobile {

        width: 100%;
        /* overflow-x: hidden; */
        margin-top: 65px;
    }



    .filmimglinkformobile {
        /* position: relative; */
        width: 100%;

    }



    .catInTheHat-bg-image,
    .badFairies-bg-image,
    .margieClaus-bg-image,
    .dynamicDuo-bg-image,
    .ohtheplacesyougo-bg-image,
    .lunarchronicles-bg-image {
        width: 100%;
    }




}





@media all and (device-width:1280px) and (device-height: 1024px) and (orientation:landscape),
all and (device-width:1280px) and (device-height: 960px) and (orientation:landscape),
all and (device-width:1366px) and (device-height: 1024px) and (orientation:landscape),
all and (device-width:1080px) and (device-height: 820px) and (orientation:landscape),
all and (device-width:1180px) and (device-height: 820px) and (orientation:landscape),
all and (device-width:1180px) and (device-height: 713px) and (orientation:landscape),
all and (device-width:1024px) and (device-height: 768px) and (orientation:landscape),
all and (device-width:1368px) and (device-height: 912px) and (orientation:landscape),
all and (device-width:1073px) and (device-height: 820px) and (orientation:landscape),
all and (device-width:1194px) and (device-height: 834px) and (orientation:landscape),
all and (device-width:1087px) and (device-height: 834px) and (orientation:landscape),
all and (device-width:1194px) and (device-height: 727px) and (orientation:landscape),
all and (device-width:980px) and (device-height: 578px) and (orientation:landscape),
all and (device-width:1280px) and (device-height: 800px) and (orientation:landscape) {

    .hide-on-mobile {

        display: none;
    }

    .hide-on-desktop {
        display: block;
    }

   
    .filmSectionForMobile {

        width: 100%;
        display: flex;
        flex-wrap: wrap;
        /* overflow-x: hidden; */
        margin-top: 65px;
    }



    .filmimglinkformobile {
        /* position: relative; */
        width: 50%;


    }



    .catInTheHat-bg-image,
    .badFairies-bg-image,
    .margieClaus-bg-image,
    .dynamicDuo-bg-image,
    .ohtheplacesyougo-bg-image,
    .lunarchronicles-bg-image {
        width: 100%;
    }

}

@media all and (min-width:700px) and (max-width:1200px) and (min-height: 500px) and (max-height: 900px) and (orientation:landscape) {

    .deviceTablet .hide-on-mobile {

        display: none;
    }

    .deviceTablet .hide-on-desktop {
        display: block;
    }


    .deviceTablet .filmSectionForMobile {

        width: 100%;
        display: flex;
        flex-wrap: wrap;
        /* overflow-x: hidden; */
        margin-top: 65px;
    }



    .deviceTablet .filmimglinkformobile {
        /* position: relative; */
        width: 50%;


    }



    .deviceTablet .catInTheHat-bg-image,
    .deviceTablet .badFairies-bg-image,
    .deviceTablet .margieClaus-bg-image,
    .deviceTablet .dynamicDuo-bg-image,
    .deviceTablet .ohtheplacesyougo-bg-image,
    .deviceTablet .lunarchronicles-bg-image {
        width: 100%;
    }

}


@media all and (device-height:1280px) and (device-width: 1024px) and (orientation:portrait),
all and (device-height:1280px) and (device-width: 960px) and (orientation:portrait),
all and (device-height:1366px) and (device-width: 1024px) and (orientation:portrait),
all and (device-height:1080px) and (device-width: 820px) and (orientation:portrait),
all and (device-height:1180px) and (device-width: 820px) and (orientation:portrait),
all and (device-height:1024px) and (device-width: 768px) and (orientation:portrait),
all and (device-height:1368px) and (device-width: 912px) and (orientation:portrait),
all and (device-height:1073px) and (device-width: 820px) and (orientation:portrait),
all and (device-height:1194px) and (device-width: 834px) and (orientation:portrait),
all and (device-height:1087px) and (device-width: 834px) and (orientation:portrait),
all and (device-height:1194px) and (device-width: 727px) and (orientation:portrait),
all and (device-height:1262px) and (device-width: 980px) and (orientation:portrait),
all and (device-height:1280px) and (device-width: 800px) and (orientation:portrait) {

    .hide-on-mobile {

        display: none;
    }

    .hide-on-desktop {
        display: block;
    }

    

    .filmSectionForMobile {

        width: 100%;
        /* overflow-x: hidden; */
        margin-top: 65px;
    }



    .filmimglinkformobile {
        /* position: relative; */
        width: 100%;

    }



    .catInTheHat-bg-image,
    .badFairies-bg-image,
    .margieClaus-bg-image,
    .dynamicDuo-bg-image,
    .ohtheplacesyougo-bg-image,
    .lunarchronicles-bg-image {
        width: 100%;
    }
}