/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

body
{
    background-image: url('../images/background/red_black_maroon_1302674908.jpg');
    background-size: 300%;
    background-repeat: repeat-y;
    background-position: center;
}
/* -------Main 1-------- */
#Main1
{
    height: 100vh;
    width: 100%;
    padding-top: 10vh;
}
#TVH
{
    color: #fff;
    font-size: 3rem;
    font-family: 'Roboto', sans-serif;
    border-bottom: solid 3px #dc3545;
    width: 15rem;
    margin-left: auto;
    margin-right: auto;
    display: block;
}
/* -------Main 2------ */
#Main2
{
    height: auto;
    width: 90%;
    margin-top: 5vh;
    margin-left: auto;
    margin-right: auto;
}
.MainPic
{
    height: auto;
    background-image: url('../images/production/gallery/poster/1.jpg');
    background-repeat: no-repeat;
    background-size: 100% 150%;
    background-position: center;
    animation: animatePics 20s infinite;
    padding-top: 5vh;
    padding-bottom: 10vh;
}
@keyframes animatePics
{
    25%
    {
        background-image: url('../images/production/gallery/poster/1.jpg');
    }
    50%
    {
        background-image: url('../images/production/gallery/poster/2.jpg');
    }
    75%
    {
        background-image: url('../images/production/gallery/poster/3.jpg');
    }
    100%
    {
        background-image: url('../images/production/gallery/poster/4.jpg');
    }
}
.innerItemHolder
{
    height: auto;
    width: 90%;
    background-color: rgb(0, 0, 0, 0.7);
    margin-left: auto;
    margin-right: auto;
    padding: 2vw;
    padding-top: 10vh; 
    padding-bottom: 10vh;
}
#DOH
{
    color: #fff;
    font-size: 3rem;
    font-family: 'Roboto', sans-serif;
    border-bottom: solid 3px #dc3545;
    width: 24.5rem;
    margin-left: auto;
    margin-right: auto;
    display: block;
}
#DOT
{
    color: #fff;
    font-size: 1.1rem;
    text-align: justify;
    margin-top: 6vh;
}
/* ------Main 3---- */
#Main3
{
    height: auto;
    width: 90%;
    margin-top: 15vh;
    margin-left: auto;
    margin-right: auto;
    z-index: 105 !important;
    position: relative;
}
#FEH
{
    color: #fff;
    font-size: 3rem;
    font-family: 'Roboto', sans-serif;
    border-bottom: solid 3px #dc3545;
    width: 21.8rem;
    margin-left: auto;
    margin-right: auto;
    display: block;
}
#FET
{
    color: #fff;
    text-align: justify;
    margin-top: 5vh;
}
.SlickSlider
{
    margin-top: 10vh;
    margin-bottom: 10vh;
}
.ss
{
    height: 40vh !important;
    width: 95% !important;
    margin-left: auto;
    margin-right: auto;
    background-size: 100% 120%;
    background-position: right;
    background-repeat: no-repeat;
}
.s1
{
    background-image: url('../images/production/films/Film1.jpg');
}
.s2
{
    background-image: url('../images/production/films/Film2.jpg');
}
.s3
{
    background-image: url('../images/production/films/Film3.jpg');
}
.s4
{
    background-image: url('../images/production/films/Film4.jpg');
}
.s5
{
    background-image: url('../images/production/films/Film5.jpg');
}
.s6
{
    background-image: url('../images/production/films/Film6.jpg');
}
.s7
{
    background-image: url('../images/production/films/Film7.jpg');
}
.s8
{
    background-image: url('../images/production/films/Film8.jpg');
}
.s9
{
    background-image: url('../images/production/films/Film9.jpg');
}
.s10
{
    background-image: url('../images/production/films/Film10.jpg');
}
/* -------Main 4------- */
#Main4
{
    height: auto;
    width: 85%;
    margin-left:auto;
    margin-right: auto;
}
.Main4Pic
{
    height: 100%;
    background-image: url('../images/production/web/MoneyHiest.jpg');
    background-size: 150% 100%;
    background-position: center;
    background-repeat: no-repeat;
}
#WEH
{
    color: #fff;
    font-size: 3rem;
    font-family: 'Roboto', sans-serif;
    border-bottom: solid 3px #dc3545;
    width: 17rem;
    margin-left: auto;
    margin-right: auto;
    display: block;
}
.Main4Inner
{
    height: auto;
    margin-top: 5vh;
}
.Main4Pic
{
    height: auto;
}
.Main4Text
{
    height: 100%;
    background-color: rgb(0, 0, 0, 0.7);
    color: #fff;
    font-size: 0.9rem;
    text-align: justify;
    letter-spacing: 1px;
    padding: 4vw 2vw;
}
#GAH
{
    color: #fff;
    font-size: 3rem;
    font-family: 'Roboto', sans-serif;
    border-bottom: solid 3px #dc3545;
    width: 12.4rem;
    margin-left: auto;
    margin-right: auto;
    display: block;
}
/* ----Main 5---- */
#Main5
{
    height: auto;
    width: 85%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10vh;
    margin-bottom: 20vh;
}
.Main5_OPT
{
    display: flex;
    height: 3rem;
    width: 80%;
    margin-top: 10vh;
    margin-left: auto;
    margin-right: auto;
}
.Main5_Item
{
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    color: #fff;
    font-size: 1.1rem;
    font-family: 'Roboto', sans-serif;
    margin-left: auto;
    margin-right: auto;
    width: 8rem;
    text-align: center;
    padding-top: 8px;
    font-weight: 500;
    cursor: pointer;
}
.Main5_Item:hover
{
    color: #dc3545;
}
.Main5_Active
{
    color: #dc3545;
}
#Gallery
{
    margin-top: 5vh;
}
.Main5_Img
{
    height: 37vh;
    margin-top: 3vh;
}
.Main5_Img div
{
    height: 100%;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.Equipments:nth-child(1) div
{
    background-image: url('../images/production/gallery/equip/1.jpg');
}
.Equipments:nth-child(2) div
{
    background-image: url('../images/production/gallery/equip/2.jpg');
}
.Equipments:nth-child(3) div
{
    background-image: url('../images/production/gallery/equip/3.jpg');
}
.Equipments:nth-child(4) div
{
    background-image: url('../images/production/gallery/equip/4.jpg');
}
.Poster:nth-child(5) div
{
    background-image: url('../images/production/gallery/poster/1.jpg');
}
.Poster:nth-child(6) div
{
    background-image: url('../images/production/gallery/poster/2.jpg');
}
.Poster:nth-child(7) div
{
    background-image: url('../images/production/gallery/poster/3.jpg');
}
.Poster:nth-child(8) div
{
    background-image: url('../images/production/gallery/poster/4.jpg');
}
.Shoot:nth-child(9) div
{
    background-image: url('../images/production/gallery/shoot/1.jpg');
}
.Shoot:nth-child(10) div
{
    background-image: url('../images/production/gallery/shoot/2.jpg');
}
.Shoot:nth-child(11) div
{
    background-image: url('../images/production/gallery/shoot/3.jpg');
}
.Shoot:nth-child(12) div
{
    background-image: url('../images/production/gallery/shoot/4.jpg');
}
.Video:nth-child(13) div
{
    background-image: url('../images/production/gallery/Video/1.jpg');
}
.Video:nth-child(14) div
{
    background-image: url('../images/production/gallery/video/2.jpg');
}
.Video:nth-child(15) div
{
    background-image: url('../images/production/gallery/video/3.jpg');
}
/* Responsive CSS */
@media(max-width: 1000px)
{
    .innerItemHolder
    {
        width: 98%;
        padding-top: 1vh;
    }
    #DOH
    {
        font-size: 2.5rem;
        width: 20.2rem;
    }
    .Main5_OPT
    {
        width: 100%;
    }
}
@media(max-width: 770px)
{
    .Main4Inner
    {
        height: auto;
    }
    .Main4Pic
    {
        height: 50vh;
    }
}
@media (max-width: 750px)
{
    #Main1
    {
        padding-top: 20vh;;
    }
    .Main5_Item
    {
        width: 7rem;
        font-size: 1rem;
        padding-top: 10px;
    }
}
@media (max-width: 670px)
{
    .Main5_Item
    {
        width: 6rem;
        font-size: 0.9rem;
        padding-top: 10px;
    }
}
@media (max-width: 570px)
{
    .Main5_Item
    {
        width: auto;
        font-size: 0.9rem;
        padding-top: 10px;
        padding: 1rem;
    }
}
@media(max-width: 550px)
{
    #Main2
    {
        margin-top: 5vh;
    }
    .innerItemHolder
    {
        width: 100%;
        padding-top: 2vh;
    }
    #DOH
    {
        font-size: 2rem;
        width: 16.2rem;
    }
    #DOT
    {
        font-size: 1rem;
    }
    #FEH
    {
        font-size: 2.2rem;
        width: 16rem;
    }
    #Main2
    {
        width: 100%;
    }
    .MainPic
    {
        background-size: 100% 100%;
        background-position: center;
        padding: 1rem;
    }
    .innerItemHolder
    {
        padding: 2rem;
    }
    #Main4
    {
        width: 90%;
    }
    #WEH
    {
        font-size: 2.5rem;
        width: 14rem;
    }
    #Main5
    {
        width: 90%;
    }
}
@media (max-width: 430px)
{
    .Main5_OPT
    {
        background-color:rgba(0, 0, 0, 0.9);
    }
    .Main5_Item
    {
        width: auto;
        font-size: 0.9rem;
        padding: 0rem;
        padding-top: 10px;
    }
}