*
{
    margin: 0;
    padding: 0;
}
#events
{
    width: 100%;
    height: 100vh;
    /* overflow: hidden; */
    background-color: black;
}

#events .col
{
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: space-evenly;
    align-items: center;  
    flex-wrap: wrap;
    align-content: center;  
    /* flex-direction: column; */
}

#events div[class^="row"]
{
    width: 20.01%;
    height: 38%; 
    margin: 2% 0 0 0 ;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    /* background-color: red; */
    box-shadow: 0px 0px 10px black;
    flex-direction: column;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#events .col .row-one
{
    background-image: url("images/background.jpg");
}
#events .col .row-two
{
    background-image: url("images/technical\ art\ gallery.jpg");
}
#events .col .row-three
{
    background-image: url("images/face\ painting.jpg");
}
#events .col .row-four
{
    background-image: url("images/project\ exhibition.jpg");
}
#events .col .row-five
{
    background-image: url("images/talent\ exam.jpg");
}
#events .col .row-six
{
    background-image: url("images/treasure\ hunt.jpg");
}
#events .col .row-seven
{
    background-image: url("images/short\ film.jpg");
}
#events .col .row-eight
{
    background-image: url("images/pro\ night.jpg");
}

#events .col h1
{
    display: block;
    width: 100%;
    height: 10%;
    text-align: left;
    /* background-color: green; */
    font-size: 32px;
    margin: 5% 0 -4% 4%;
    color: white;
    /* z-index: 997; */
}

.onecol div[class^="row"] div[class^="col"] .details
{
    width: 100%;
    height: 20%;
    vertical-align: middle;
    background-color: white;
    position: absolute;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

div[class^="row"] div[class^="col"]
{
    position: relative;
    /* border-radius: 5px; */
}

div[class^="col"] div[class^="row"] .details
{
    width: 100%;
    height: 20%;
    vertical-align: middle;
    background-color: white;
    position: absolute;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 0 5px 5px;
}


div[class^="col"] div[class^="row"] 
{
    position: relative;
    border-radius: 5px;
    transition: 0.5s ease-in-out;
}

div[class^="col"] div[class^="row"]:hover
{
    box-shadow: 0 0px 10px rgb(151, 150, 150) !important;
    transition: 0.3s ease-in-out;
    /* border: 1px solid white; */
}

#aboutus 
{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: black;
}

#aboutus .onecol
{
    width: 90%;
    height: 90vh;
    margin: 35px 0 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

#aboutus .onecol h1
{
    display: block !important;
    text-align: center;
}

#aboutus .onecol div[class^="row"]
{
    display: inline-block;
    /* background-color: yellow; */
}

#aboutus .onecol .row-one
{
    width: 25%;
    height: 99%;
}

#aboutus .onecol .row-two
{
    width: 50%;
    height: 99%;
    /* overflow: hidden; */
}

#aboutus .onecol .row-three
{
    width: 25%;
    height: 99%;
}

#aboutus .onecol .row-one div[class^="col"]
{
    display: block;
    width: 100%;
    height: 33.33%;
    /* background-color: teal; */
}

#aboutus .onecol .row-three div[class^="col"]
{
    display: block;
    width: 100%;
    height: 33.33%;
    /* background-color: teal; */
}

#aboutus .onecol .row-two div[class^="col"]
{
    width: 100%;
    height: 50%;
    /* background-color: tomato; */
}

.onecol .row-one .col-one
{
    background-image: url("images/background.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.onecol .row-one .col-two
{
    background-image: url("images/background2.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.onecol .row-one .col-three
{
    background-image: url("images/background3.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    /* position: absolute; */
}

.onecol .row-three .col-two
{
    background-image: url("images/background.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.onecol .row-three .col-three
{
    background-image: url("images/background2.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.onecol .row-three .col-one
{
    background-image: url("images/background3.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.onecol div[class^="row"] div[class^="col"] .details
{
    width: 100%;
    height: 20%;
    vertical-align: middle;
    background-color: white;
    position: absolute;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

div[class^="row"] div[class^="col"]
{
    position: relative;
}

div[class^="col"] div[class^="row"] .details
{
    width: 100%;
    height: 20%;
    vertical-align: middle;
    background-color: white;
    position: absolute;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}


div[class^="col"] div[class^="row"] 
{
    position: relative;
}

/******************************************     slider-1       ******************************************/


.row-two .col-one {
	overflow: hidden;
}

@keyframes slider1 {
	0% { left: 0; }
	30% { left: 0; }
	31% { left: -100%; }
	60% { left: -100%; }
	61% { left: -200%; }
	96% { left: -200%; }
	100% { left: -200%; }
}
.row-two .col-one #slider {
    width: 300%;
    height: 100%;
	position: relative;
    animation: 9s slider1 ease-in-out infinite;
    animation-direction: alternate-reverse;
    /* animation-timing-function: ease-in-out; */
}

#slider #img2
{
    width: 33%;
    height: 100%;
    margin: 0 0px 0 2px;
}

#slider #img1
{
    width: 33% !important;
    height: 100%;
    margin: 0;
    padding: 0 0 0 3px !important;
}

#slider #img3
{
    width: 33.1% !important;
    height: 100%;
    margin: 0 0 0 1px;
}


#slider img:hover {
	animation-play-state: paused; 
}

/******************************************     slider-2       ******************************************/


.row-two .col-two {
	overflow: hidden;
}

@keyframes slider2 {
	0% { left: 0; }
	30% { left: 0; }
	31% { left: -100%; }
	60% { left: -100%; }
	61% { left: -200%; }
	96% { left: -200%; }
	100% { left: -200%; }
}
.row-two .col-two #slider2 {
    width: 300%;
    height: 100%;
	position: relative;
    animation: 12s slider2 infinite;
    animation-direction: alternate;
    /* transform: translateX(-66.6%); */
}

#slider2 #img2
{
    width: 33%;
    height: 100%;
    margin: 0 0px 0 2px;
}

#slider2 #img1
{
    width: 33% !important;
    height: 100%;
    margin: 0;
    padding: 0 0 0 3px !important;
}

#slider2 #img3
{
    width: 33.1% !important;
    height: 100%;
    margin: 0 0 0 1px;
}


#slider2:hover {
    animation-play-state: paused;
}

#mobile-events
{
    display: none;
}

#mobile-aboutus
{
    display: none;
}

@media only screen and (min-width: 200px) and (max-width: 720px)
{
    body
    {
        width: 100vw;
    overflow-x: hidden;
    }
    #aboutus, #events
    {
        display: none;
    }
    #mobile-aboutus
    {
        display: block;
        padding: 10% 0 0 0;
        background-color: black;
    }
    #mobile-aboutus .col-one {
        overflow: hidden;
        width: 100vw;
        height: 40vh;
        margin: 10% 0 0 0;
    }

    @keyframes slider1 {
        0% { left: 0; }
        30% { left: 0; }
        31% { left: -100%; }
        60% { left: -100%; }
        61% { left: -200%; }
        96% { left: -200%; }
        100% { left: -200%; }
    }
    #mobile-aboutus .col-one #slider {
        width: 300%;
        height: 100%;
        position: relative;
        animation: 9s slider1 ease-in-out infinite;
        animation-direction: alternate-reverse;
        display: flex;
        justify-content: center;
        /* animation-timing-function: ease-in-out; */
    }

    #mobile-aboutus .col0one #slider img
    {
        margin: 0;
        width: 100%;
        height: 100% !important;
    }

    #mobile-events
    {
        display: block;
        width: 100%;
        height: auto;
        background-color: black;
    }

    #mobile-events .col [class^="row"] .details
    {
        font-size: 12px;
    }

    #mobile-events h1
    {
        font-size: 21px;
        padding : 10px 0 0 10px !important;
        color: white;
    }
    #mobile-events a
    {
        margin: 10px 0 30px 0;
        color: black;
        text-decoration: none;
    }
    #mobile-events .col
    {
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        /* flex-direction: column; */
        flex-wrap: wrap;
        padding: 0 0 10% 0;
    }

    #mobile-events div[class^="row"]
    {
        /* display: inline-block; */
        width: 40vw;
        height: 38vh; 
        margin: 2% 0 0 0 ;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        /* background-color: red; */
        box-shadow: 0px 0px 10px black;
        flex-direction: column;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        background-color: black;
    }
    #mobile-events .col [class^="row"]
    {
        background-size: cover;
        background-repeat: no-repeat;
    }    
    #mobile-events .col .row-one
    {
        background-image: url("images/background.jpg");
    }
    #mobile-events .col .row-two
    {
        background-image: url("images/technical\ art\ gallery.jpg");
    }
    #mobile-events .col .row-three
    {
        background-image: url("images/face\ painting.jpg");
    }
    #mobile-events .col .row-four
    {
        background-image: url("images/project\ exhibition.jpg");
    }
    #mobile-events .col .row-five
    {
        background-image: url("images/talent\ exam.jpg");
    }
    #mobile-events .col .row-six
    {
        background-image: url("images/treasure\ hunt.jpg");
    }
    #mobile-events .col .row-seven
    {
        background-image: url("images/short\ film.jpg");
    }
    #mobile-events .col .row-eight
    {
        background-image: url("images/pro\ night.jpg");
    }   
    footer p
    {
        font-size: 16px !important;
    }

}