/*------------------- MEDIA CSS ---------------------------*/


#Media #Header-Media .Header-Background {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
}


#Media #Header-Media .Header-Title {
    width: 85%;
    margin-left: auto;
    margin-right: auto;
}

#Media #Header-Media .Header-Title h1 {
        font-size: 4.5em;
        font-family: 'Cormorant', serif;
        font-weight: 500;
        color: #fff;
        padding-top:6%;
    }


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


    #Media #Header-Media .Header-Background {
        height: 300px !important;
    }

    #Media #Header-Media .Header-Title {
        width: 100%;
    }

        #Media #Header-Media .Header-Title h1 {
            font-size: 3.5em;
            text-align: center;
        }
}

/*------------------------- Media Breadcumb ---------------------------- */

#Media #OneSection {
    background-color: white;
    height: auto;
}

    /* ----- One Section ----- */
    #Media #OneSection .container-fluid {
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }

    #Media #OneSection .Breadcumb {
        font-size: 1em;
        font-family: 'Lato', sans-serif;
        font-weight: 700;
        color: #31251c;
    }

        #Media #OneSection .Breadcumb a:hover {
            text-decoration: none !important;
        }



/* ------------------- VIDEO SECTION ---------------------- */

/* ----- Two Section ----- */

#Video #TwoSection{
    background-color:#fff;
}

#Video #TwoSection .container-fluid {
    width: 80%;
    margin-left: auto;
    margin-right: auto;

}

#Video #TwoSection .Video-Card {
    position:relative;
}

#Video #TwoSection .Video-Image {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 380px; 
   display:flex;
   justify-content:center;
   align-items:center;
}

#Video #TwoSection .Big-Frame {
        border: 2px solid white;
        background-color: transparent;
        width: 85%;
        height: 300px;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: 0.3s ease;
    }

#Video #TwoSection .Small-Frame {
        border: 2px solid white;
        background-color: transparent;
        width: 40%;
        height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: 0.5s ease;
    }

#Video #TwoSection .Video-Card:hover .Big-Frame {
        border: 4px solid white !important;
        transition: 0.7s ease;
    }

#Video #TwoSection .Video-Card:hover .Small-Frame {
        background-color: white !important;
        opacity: 0.5;
        transition:0.7s ease;
    }

#Video #TwoSection .Video-Card:hover .Small-Frame h3 {
        color:black !important;
    }



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

    #Video #TwoSection .Video-Card .Small-Frame h3 {
        font-size:1.3em !important;
    }

    #Video #TwoSection .Video-Image {
        width: 100%;
        height: 300px;

    }

    #Video #TwoSection .Big-Frame {
        width: 85%;
        height: 220px;
    }

    #Video #TwoSection .Small-Frame {
        width: 40%;
        height: 60px;

    }
}



/* ------------------- PRESS ROOM SECTION ---------------------- */

/* ----- Two Section ----- */


/* ------------------- GALLERY SECTION ---------------------- */

/* ----- Two Section ----- */

#Gallery #TwoSection {
    background-color: #fff;
}

    #Gallery #TwoSection .container-fluid {
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }

    #Gallery #TwoSection .Card img {
        opacity: 1;
        transition: 0.4s ease all;
    }

#Gallery #TwoSection .Card:hover img {
     opacity:0.6;
     transition:0.7s ease all;
}

    #Gallery #TwoSection .Card .Over-Text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        opacity: 0;
        transition: 0.4s ease all;
    }

    #Gallery #TwoSection .Card:hover .Over-Text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        opacity: 1;
        transition: 0.7s ease all;
    }

    #Gallery #TwoSection .Border-One {
        position: absolute;
        width: 0%;
        background-color: white;
        height: 2px;
        top: 50%;
        left: 1.5%;
        opacity: 0;
        transition: 0.4s ease all;
    }

    #Gallery #TwoSection .Card:hover .Border-One {
        width: 39%;    
        opacity: 1;
        transition: 0.7s ease all;
    }

    #Gallery #TwoSection .Border-Two {
        position: absolute;
        width: 0%;
        background-color: white;
        height: 2px;
        top: 50%;
        right: 1.5%;
        opacity: 0;
        transition: 0.4s ease all;
    }

    #Gallery #TwoSection .Card:hover .Border-Two {
        width: 39%;
        opacity: 1;
        transition: 0.7s ease all;
    }

    /*--------- Vertical --------------*/

    #Gallery #TwoSection .Border-Three {
        position: absolute;
        height:0px;
        background-color: white;
        width:2px;
        top: 3%;
        left:50%;
        opacity: 0;
        transition: 0.4s ease all;
    }

    #Gallery #TwoSection .Card:hover .Border-Three {
        height: 39%;
        opacity: 1;
        transition: 0.7s ease all;
    }

    #Gallery #TwoSection .Border-Four {
        position: absolute;
        width:2px;
        background-color: white;
        height:0;
        bottom:3%;
        left: 50%;
        opacity: 0;
        transition: 0.4s ease all;
    }

    #Gallery #TwoSection .Card:hover .Border-Four {
        height: 39%;
        opacity: 1;
        transition: 0.7s ease all;
    }




@media only screen and (max-width: 1690px) {
    #Gallery #TwoSection .Border-One {
        left: 2%;
    }

    #Gallery #TwoSection .Border-Two {
        right: 2%;
    }

    #Gallery #TwoSection .Border-Three {
        top: 3.5%;
    }

    #Gallery #TwoSection .Border-Four {
        bottom: 3.5%;
    }

}

@media only screen and (max-width: 1450px) {
    #Gallery #TwoSection .Border-One {
        left: 2%;
    }

    #Gallery #TwoSection .Border-Two {
        right: 2%;
    }

    #Gallery #TwoSection .Border-Three {
        top: 4%;
    }

    #Gallery #TwoSection .Border-Four {
        bottom: 4%;
    }
}

@media only screen and (max-width: 1290px) {
    #Gallery #TwoSection .Border-One {
        left: 2.5%;
    }

    #Gallery #TwoSection .Border-Two {
        right: 2.5%;
    }

    #Gallery #TwoSection .Border-Three {
        top: 4%;
    }

    #Gallery #TwoSection .Border-Four {
        bottom: 4%;
    }
}

@media only screen and (max-width: 1050px) {
    #Gallery #TwoSection .Border-One {
        left: 3%;
    }

    #Gallery #TwoSection .Border-Two {
        right: 3%;
    }

    #Gallery #TwoSection .Border-Three {
        top: 5%;
    }

    #Gallery #TwoSection .Border-Four {
        bottom: 5%;
    }
}



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


    #Gallery-Image {

        height:350px !important;
    }
}