@import url(//db.onlinewebfonts.com/c/5c6682d0f00a759d2d735c090a6900fe?family=posteramalight);

* {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    font-size: 62.5%;
    /* 1rem = 10px */
}

.header {
    overflow: hidden;
    position: fixed; /* Set the navbar to fixed position */
    top: 0;
    width: 100%;
    height: 12rem;
    z-index: 2;
}

.inner_header {
    position: relative;
    height: 8.5rem;
    width: 100%;
    display: block;
}

.under_construction h1{
    position: absolute;
    z-index: 1;
    font-family: "roombold";
    font-size: 1rem;
    color:aliceblue;
    left: 50%;
    height:100%;
    text-align: center;
    background-color: #000;
}
.under_construction {
    position: relative;
    /*display: flex;*/
    background: repeating-linear-gradient(-75deg,yellow , yellow 5px, black 5px, black 10px);
    height:15px;
    width:100%;
    display: none;
}

/* Makes the animation pause on hover */
.moving-text:hover{
    animation-play-state: paused;
}

/* The animation */
@keyframes marquee{
    0%{transform: translateX(100%);}
    100%{transform: translateX(-100%);}
}

/* media query to enable animation for only those who want it */
@media (prefers-reduced-motion: no-preference) {
    .moving-text{
        animation: marquee 5s linear infinite;
    }
}

.header_line_1 {
    background-color: #022134;
    height: 2.5rem;
    width: 100%;
    display: block;
}

.header_line_2 {
    background-color: #ffffff;
    height: 6rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5em 1em;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}


.header_line_2 #du_logo img {
    height: 100%;
    width: 6rem;
}

.header_line_2 #du_logo {
    padding: 0px 8px 4px 20px;
}

.du_logo_ham{
    position: absolute;
    top: 12px;
    left: 12px;
}

.header_line_2 .g20_logo {
    align-items: center;
    /*padding: 8px 0px 8px 0px;*/
}

.header_line_2 .g20_logo img {
    height: 100%;
    width: 7rem;
}

.g20_logo_ham{
    position: absolute;
    top: 12px;
    left: 73px;
}


.logo_container {
    /*border-radius : bottom top top bottom  */
    border-radius: 0rem 0rem 3rem 3rem;
    background-color: #022134;
    height: 10rem;
    width: 28rem;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    position: absolute;
    left: 10rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.logo_container_div {
    width: 90%;
    height: 90%;
}
.logo_container_div img {
    width: 100%;
    height: 100%;
}

.sidebar {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 9;
    top: 0;
    left: 0;
    background-color: whitesmoke;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidebar a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.sidebar a:hover {
    color: #f1f1f1;
}

.sidebar .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

.openbtn {
    display: none;
    font-size: 20px;
    cursor: pointer;
    color: #111;
    padding: 10px 15px;
    border: none;
}

.openbtn:hover {
    background-color: #444;
}

#main {
    transition: margin-left .5s;
}

.nav-bar{
    display: flex;
    margin-left: auto;
    align-items: center;
}


@media screen and (max-width: 823px){
    .openbtn{
        display: block;
    }
    .nav-bar{
        display: none;
    }
    .hamburger{
        display: flex;
        margin-left: auto;
        margin-right: 3vw;
    }
}


/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .sidebar {padding-top: 15px;}
    .sidebar a {font-size: 18px;}

}


.navbar-right {
    display: flex;
    margin-left: auto;
    align-items: center;
}

.navbar-right li {
    margin-right: 3rem;
    font-size: 4rem;
    color: #17242A;
    font-family: "bicyclettelight", serif;
}
.navbar-right a {
    color: black;
}

.navbar-right a:hover{
    color:#3AAFA9;
}
@media screen and (max-width:1024px) {
    .header_line_2 #du_logo{
        padding:10px 30px 10px 20px;
    }
    .logo_container {
        left:3rem;   
    }
}
@media screen and (max-width : 910px) {
    .header_line_1 {
        display:none;
    }
    .header_line_2 {
        height:8rem;
    }
    .navbar-right li{
        padding:0;
        font-size : 3rem;
    }
    .logo_container {
        left:3rem;
    }
    
}
@media screen and (max-width: 450px) {
    .logo_container {
        height: 8rem;
        width: 20rem;
        right:3px;
    }
    
    .header_line_2 {
        height: 5rem;
    }
}


@font-face {
    font-family: 'bicyclettelight';
    src: url('font/Bicyclette-Light.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'beautymountains';
    src: url('font/BeautyMountains.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'maderabold';
    src: url('font/Madera-Bold.ttf');
}

.home {
    position: relative;
    width: 100%;
    margin-top:5rem;
    height: 40rem;
    background-image: url(../img/webcover-01.png);
    background-repeat: no-repeat;
    background-size:cover;
    background-position-y:bottom;

}

.quote {
    font-family: "bicyclettelight", serif;
    color: white;
    font-size: 12rem;
    position: absolute;
    top: 50%;
    left: 40%;
    display:flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transform: translate(-50%, -50%);
}


.bold_alumni_text {
    font-family: "roombold", serif;
    font-size: 8rem;
}
.session_text {
    font-size: 6rem;
    color: white;
}

@media screen and (max-width: 768px) {
    .home{
        height:40rem;
        width:100%;
    }
    .quote {
        font-size: 10rem !important;
    }
    .welcome_text {
        font-size: 8rem !important;
    }
    .bold_alumni_text {
        font-size: 8rem !important;
    }
    .session_text{
        font-size: 6rem;
    }
       
}
@media screen and (max-width: 450px) {
    .home{
        height : 200px;
        width:100%;
    }
    .quote p{
        font-size: 3rem !important;
    }
    .bold_alumni_text{
        font-size: 4rem !important;
    }
    .session_text{
        font-size: 6rem !important;
    }
}
@media screen and (max-width: 375px) {
    .quote {
        font-size: 10rem !important;
    }
    .session_text {
        font-size: 6rem;
    }
}

@font-face {
    font-family: 'roombold';
    src: url('font/Room-Bold.ttf')format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'posteramalight';
    src: url('font/PosteramaLight.ttf')format('truetype');
}
/* ------------------RISHI-------------- */

/* -------------------DEEPAK-------------------- */

.upcoming-event {
    display: flex;
    height: 100%;
    position: relative;
    padding: 2rem;
}

.img-area {
    width: 40%;
    padding: 3em 10em 3em 10em;
    position: relative;
}

.img-poster {
    width: 100%;
    height: 80%;
}

.content-area {
    width: 60%;
    position: relative;
}

.top-area {
    display: flex;
    flex-direction: row;
}

.top-heading {
    width: 75%;
}


.txt-title {
    color: #17242A;
    font-size: 2.5rem;
    padding: 1.5rem;
    font-family: 'roombold', serif;
    font-weight: lighter;
    letter-spacing: 0.1em;
}

.txt-meet {
    color: #17242A;
    font-size: 5rem;
    padding:  0 1.5rem 0 1.5rem;
    font-family: 'roombold', serif;
    letter-spacing: 0.03em;
}

.txt-bottom {
    color: rgb(80, 79, 79);
    font-family: 'posteramalight', serif;
    font-size: 1.5rem;
    padding:  0 1.5rem 0 1.5rem;
    font-weight: lighter;
}

.txt-bottom:hover{
    color:blue;
}

.bottom-area {
    display: flex;
    flex-direction: row;
    width: 100%;
    margin-top: 1rem;
    justify-content: center;
}

.register {
    width: 25%;
}

.register-button {
    font-size: 2vw;
    font-family: 'maderabold', serif;
    background-color: rgba(0, 128, 105, 0.918);
    border: none;
    color: white;
    padding: 2rem;
    text-align: center;
    border-radius: 5px;
}

/* countdown start */
.countdown {
    width: 75%;
    display: flex;
    flex-direction: row;
    font-size: 6rem;
    color: #17242A;
    font-family: 'posteramalight', serif;
    padding: 1.5rem;
}



.countdown div p {
    font-size: 5.5rem;
}

.countdown span {
    font-size : 2rem;
}

.top-heading {
    width: 80%;
}


/*This is for the calender*/
.calender {
    width: 25%;
    display: flex;
    flex-direction: column;
}

.day {
    font-family: 'maderabold', serif;
    font-size: 4vw;
    width: 11.5vw;
    text-align: center;
    background-color: #ebebeb;
    color: #2d2d2d;
    font-weight: bolder;
}

.month {
    color: #2d2d2d;
    font-family: 'posteramalight', serif;
    font-weight: 200;
    width: 11.5vw;
    font-size: 3vw;
    text-align: center;
    background-color: #ebebeb;
}

.year {
    width: 11.5vw;
    font-size: 3vw;
    font-weight: 200;
    font-family: 'posteramalight', serif;
    text-align: center;
    background-color: #dadada;
    color:  #595959;
}

.map_logo{
  height: 1.5rem;
  width: 1.5rem;
}





@media screen and (max-width:1024px) {
    .upcoming-event{
        height: 40rem;
    }
    .bottom-area {
        height: 5rem;
        padding-top: 2rem;
    }
    .img-area{
        width:35%;
    }
    .content-area{
        width:65%;
        margin-right: 1rem;
    }
    .countdown{
        width:80%;
    }
    .countdown div p{       
    font-size: 40px !important;
    }
    .countdown span {
        font-size: 15px;
    }
    .register{
        padding-right: 2rem;
    }
}
@media screen and (max-width:880px) {

}
@media screen and (max-width:786px) {
    .upcoming-event {
        height:100%;
        flex-direction: column;
    }
    .bottom-area{
        padding-top: 0;
    }
    .img-area{
        width:100%;
        margin:0;
    }
    .content-area{
        width:100%;
        height:25rem;
    }
    .top-area{
        height:15rem;
    }
    .countdown div{
        flex-basis: 80px;
    }
    .countdown div p{
        font-size: 42px !important;
        margin-bottom: -2px;
    }
    .countdown span {
        font-size : 15px !important;
        text-align: left;
    }
    .txt-title{
        font-size:20px;
    }
}

@media screen and (max-width:452px) {
    .bottom-area{
        display: flex;
        flex-direction: column;
    }
    .register-button{
        width: 55vw;
    }
    .top-area{
        position: relative;
    }
    .countdown{
        position: relative;
    }
}

@media screen and (max-width: 425px) {
    .upcoming-event{
        height: 100%;
    }
    .bottom-area{
        padding-top: 8vw;
        height: 100%;
    }
    .countdown{
        margin-top: 10vw;
        height: 100%;
    }
    .content-area{
        height: 100%;
    }
    .register{
        height: 100%;
    }
    .heading{
        margin-top: 4vw;
    }
    .img-area{
        margin-left: 0;
        background: black;
        width: 100%;
        height: 100%;
        padding: 0 0 0 0;
    }
}

/* ------------------DEEPAK------------- */
/* -----------------NAVNEET------------- */

#news h1{
    font-family: 'posteramalight', cursive;
    font-size: 2vw;
    color: #17242A;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 5px;
}
hr{
    background-color: #17242A;
    height: 3px;
    border-radius: 10px;
}
#news{
    width: 100%;
    height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}
.heading{
    padding: 10px 0px 10px 10px;
    height:10%;
    margin-right: auto;
}
.news_area{
    width: 100%;
    height: 90%;
    display: flex;
}
.paragraph {
    width: 55%;
    color:#17242A;
    height: 100%;
    font-family: 'beautymountains' ;
    font-size: 1.5vw;
    display: flex;
    flex-direction: column;
    padding: 0px 30px 30px 30px;
    justify-content: center;
    text-align: justify;
    text-justify: inter-word;

}

.banner{
    width: 45%;
    height: 100%;
    right:0;
    display: flex;
    bottom:0;
}

.banner img{
    width: 100%;
    height: 80%;
    padding-right: 10px;
}

@media screen and (max-width:1024px) {
    .banner {
        padding-left: 50px;
    }
    .banner img{
        height: 50%;
    }
}
@media screen and (max-width:768px) {
    #news{
        width:100%;
        height:100%;
    }
    hr{
        height:1px;
    }
    .banner{
        display: none;
    }
    .paragraph {
        height:100%;
        width:100%;
    }
}
@media screen and (max-width:425px) {
    #news{
        width:100%;
        height:100%;
    }
    .paragraph {
        font-size: 6vw;
        height:100%;
        width:100%;
    }
    #news h1 {
        font-size: 4vw;
    }
}
    
/*Scroll bar*/


/* -----------------NAVNEET------------- */
/* -------------------SHIVPUJAN-------------------- */

/* -------------------FOOTER----------------------- */
.footer-container{

    height:270px ;
    /* background: linear-gradient(to top, #4c433e, #ff935e); */
   
}
.container {
    display: flex;
    justify-content: space-between;
  }

  .para-txt {
    font-size: 15px;
    /* padding-top: 1px; */

    font-family: 'posteramalight', serif;
    /* color: #FFF; */
    /* text-align: center; */
    line-height: 20px;
  }

  .email-id{
    font-size: 15px;
    font-weight: bold;
    padding-top: 8px;
    font-family: 'posteramalight', serif;

  }
  .phone-no{
    
        font-size: 15px;
        font-weight: bold;
        padding-top: 8px;
        font-family: 'posteramalight', serif;
    
      
  }
  .heading-txt{
    padding-top:10px;
    padding-bottom: 20px;
    font-size: 20px;
    text-align: start;
    height: 20px;
    color: #2d2d2d;
    font-family: 'roombold';
  }

  .underline-social{
    width: 5vw;
    height: 5px;
    background: #767676;
    border-radius: 3px;
    position: relative;
    overflow: hidden;
}
.underline-social span{
width: 15%;
height: 100%;
background: #fff;
border-radius: 3px;
position: absolute;
top: 0;
left: 10px;
animation: moving 2s linear infinite;
}

.underline-address{
    width: 5.5vw;
    height: 5px;
    background: #767676;
    border-radius: 3px;
    position: relative;
    overflow: hidden;

}

.underline-address span{
    width: 15px;
    height: 100%;
    background: #FFF;
    border-radius: 3px;
    position: absolute;
    top: 0;
    left: 10px;
    animation: moving 2s linear infinite;
    }

    .underline-map{
        width: 2.5vw;
        height: 5px;
        background: #767676;
        border-radius: 3px;
        position: relative;
        overflow: hidden;
    
    }
    
    .underline-map span{
        width: 15px;
        height: 100%;
        background: #fff;
        border-radius: 3px;
        position: absolute;
        top: 0;
        left: 10px;
        animation: moving 2s linear infinite;
        }

    .S-logo:hover {
         height: 35px;   
      }
          

@keyframes moving {
    0%{
        left: -20px;
    }
    100%{
        left: 100%;
    }
    
}
  
  .box-1 {
    /* background-color: red; */
    padding-top:5px;
    width: 30%;
    height: 100%;
    padding-left: 5%;
  }
  
  .box-2 {
    /* background-color: blue; */
    width: 15%;
    height: 100%;
    padding-left: 3%;
  }
  .box-2 ul li {
    padding-top: 6px;
    
  }
  
  .box-3 {
    /* background-color: green; */
    width: 25%;
    height: 100%;
    padding-left: 3%;
  }

  .box-4{
    /* background-color: brown; */
    width: 30%;
    height: 100%;
    padding-left: 3%;
  }
  .logo{
    width: 80px;
    /* margin-bottom: 30px; */
}

.copy-right {
    width: 100%;
    position:relative;
    bottom:0px;
}
  .copy-right p{
    
	padding: 0.5rem;
    background: #1f2020;
    /* letter-spacing: 0.1rem; */
    color: white;
    font-size: 15px;
    text-align: center;
    font-family: "bicyclettelight", serif;
}
@media screen and (max-width:1024px) {
    .container{
        height:290px;
    }
}

@media screen and (max-width:880px) {
    .box-4{
        display: none;
    }
}
@media screen and (max-width:768px) {
    .footer-container{
        height:800px;
        display:flex;
        flex-direction: column;
    }
    .box-4{
        display:block;
    }
    .container{
        display:flex;
        flex-direction: column;
        height:800px;
        align-items: center;
    }
    .underline-social{
        width: 11%;
        background: #767676;
        border-radius: 3px;
        position: relative;
        overflow: hidden;
    }
    
    .underline-address{
        width: 12%;
        height: 5px;
        background: #767676;
        border-radius: 3px;
        position: relative;
        overflow: hidden;
    
    }
        .underline-map{
            width: 5%;
            height: 5px;
            background: #767676;
            border-radius: 3px;
            position: relative;
            overflow: hidden;
        
        }
        
        .underline-map span{
            width: 10px;
            }
    
    @keyframes moving {
        0%{
            left: -20px;
        }
        100%{
            left: 100%;
        }
        
    }
    .box-1{
        width: 100%;
        height:60px;
    }
    
    .box-2{
        position: relative;
        width:100%;
        height:10px;
    }
    
    .box-2 ul li{
        display: inline;

    }
    .box-3{
        width: 100%;
        height:100px;
    }
    .box-4{
        width:100%;
        height:auto;
    }
    .copy-right{
        position: relative;
    }
    

}
/*Mobile large*/
@media screen and (max-width: 425px){
    .footer-container{
        height: 100%;
        padding-left: 3vw;
    }
    .box-1{
        height: 100%;
    }

    .box-2 {
        height: 100%;
    }

    .box-3 {
        height: 100%;
    }

    .box-4 {
        height: 100%;
    }
}

/* -------------------FOOTER----------------------- */