body{
    /* background-image: linear-gradient(to top left,
        #0000009b, #000000
    ); */
    /* width: 100%; */
    /* min-height: 100vh; */
    line-height: 20px;
    font-family: monospace;
}
.content{

    display: grid;
    grid-template-columns: 70% 30%;
}
.container{
    width:99%;
    margin:10px;
}
.list{
    width: 90%;
    /* height: 80%; */
    display: grid;
    grid-template-columns: 50% 50%;
    column-gap: 2.5rem !important;
    /* margin-top:5rem; */
}
.item{
    width: 100%;
    position: relative;
    height:250px;
    /* background-color: red; */
    /* margin-left: -3rem; */
    margin-bottom: 2.5rem;
}

.topper-img
{
    display: block;
    width: 100%;
    height: 100%;
    border-radius:10px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}
.details{
    visibility: hidden;
    width:100%;
    position: absolute;
    left: 0rem; 
    bottom: -20px;    
    border-radius: 10px;
    
    
}
.item:hover .details
{
    visibility: visible;
    animation: myfirst 1s;
    
}
/*.mfp-container {*/
    /*top: -35rem !important;*/
/*}*/
@keyframes myfirst {
    from {
        transition: all ease;
        opacity: 0;
        transform: translateY(30%);
    }
    to { opacity: 1 }
  }
.details p
{   
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 20px;
    color: white;
    padding:10px;
    border-radius: 0px 0px 10px 10px;
    background-color: rgba(0, 0, 0, 0.815);
}
.youtube-icon
{
    width: 25%;
    height: 34%;
    position: absolute;
    left: 9rem; 
    bottom: 70px;    
    transition: .5s ease;
    opacity:0.7; 
    padding: 20px;
}
.mfp-iframe-holder .mfp-close{
    margin: auto;
    width: 40px;
    height: 40px;    
    text-align: right;
    font-size: 48px;
    background-color: #005899;
    border-radius: 70%;
}
.mfp-iframe-holder .mfp-close:hover
{
   background-color: #EC3136;
    transform: rotate(260deg);
    transition: 1s ease all;
    text-align: right;
    width: 42px;
    height: 42px;
    margin: auto;
}

.listPage{
    padding:5px;
    text-align: center;
    list-style: none;
}
.listPage li{
    font-family: 'Roboto', sans-serif;
    font-weight: 800;
    background-color: #ffffffBD;
    padding:10px;
    display: inline-block;
    margin:0 2px;
    cursor: pointer;
}
.listPage .active{
    background-color: #EE3136;
    border-radius: 15px;
    color:#fff;
}
.sidebar-area{
    margin-top: 5rem;
    width: 100%;
}
.sidebar-area h3
{   
    margin-top:2rem;
    margin-left:-3rem;
    text-align:center;
    font-weight:800;
}
.sidebar-area img{
    width: 350px;
    height: 350px;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.social-icon{
    margin-left:5rem;
    width:50%;
    display:flex;
    margin-top:1rem;
    justify-content: space-between;
}
.social-icon i{
    font-size:35px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
} 

.social-icon .bi-facebook{
    color:#3b5998;
}
.social-icon .bi-instagram{
    color:#fa7e1e;
}
.social-icon .bi-twitter{
    color:#1DA1F2;
}

.social-icon .bi-youtube{
    color:red;
}


@media only screen and (max-width: 600px) {
    .content{
        display: block;
    }
    .list{
        display: grid;
        grid-template-columns:100%;
        column-gap: 20px;
    }
    iframe{
        width: 100%;
    }
    .topper-img
{
    display: block;
    width: 100%;
    height: 100%;
}
.details
{
    width:100%;
}
.youtube-icon
{   
    left: 7rem;
    /* bottom:60px; */
    width: 30%;
}
.sidebar-area{
    display: none;
}
}