@media screen and (min-width: 840px) and (min-width: 1024px) {
    .maincontent {
        background-image: url("../img/new_bg.jpg");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-attachment: fixed;
    }

    @keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}

    div#slider { overflow: hidden; }
div#slider figure img { width: 20%; float: left; }
div#slider figure {
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 30s slidy infinite;
}

    .sidebar:hover{
        color: yellow;
    }

    .logo {
        height: 50%;
        width: 50%
    }

    .logo1 {
        height: 25%;
        width: 25%;
    }

    .firstcolumn {

    }

    .mainlogo {
        height: 18vh;
        width: 22vw;
    }

    .maintitle {
        padding-top: 1%;
        font-weight: 900;
        line-height: 1.5em;
        font-size: 1.8rem;
        text-align: center;
        font-family: Arial;
        color: black;
    }

    .rightbutton1{
        border-radius: 12px; width: 16vw; color: white; font-weight: 700;
        margin-bottom: 0.3rem;
         }

    .rightbutton2{
        background-color: green;
        margin-bottom: 0.3rem;
        width: 17vw;
        color: white;
        font-family: josefin;
        padding: 7px;
        border: none;
        cursor: pointer;
    }

    .subtitle {
        padding-top: 1%;
        line-height: 1em;
        font-size: 1.5em;
        text-align: center;
        font-family: Arial;
        color: purple;
    }

    .leftbutton {
        border-radius: 12px;
        width: 12vw;
        color: darkgreen;
        margin-bottom: 0.3rem;
    }


    /* SYE, IMPORTANT DATES AND REGISTRATION BUTTON */
    .contentbutton {
        background-color: blue;
        font-size: 14px;
        border-radius: 10px;
        width: 9vw;
        color: white
    }


    .table {
        border: 1px solid maroon;
    }

    .td {
        border: 1px solid maroon;
    }

    .th {
        border: 1px solid maroon;
    }

    .tr {
        border: 1px solid maroon;
    }

    .navigationbar {
        /*background: linear-gradient(black, white);*/
        /*background-image: url("../img/new_bg.jpg");*/
        background-size: 100%;
        background-repeat: no-repeat;
    }

    .navbar {
        background-color: darkgreen;
        color: white;
    }


    .button {
        text-align: center;
        cursor: pointer;
        outline: none;
        background-color: #FBEE97;
        border-radius: 5px;
        box-shadow: 0 2px #999;
    }

    .button:hover {
        background-color: #3e8e41
    }

    .button:active {
        background-color: #FBEE97;
        box-shadow: 0 5px #666;
        transform: translateY(4px);
    }

    .dropbtn {
        background-color: orange;
        color: white;
        font-family: josefin;
        padding: 7px;
        border: none;
        cursor: pointer;
    }

    .dropbtn1 {
        background-color: green;
        color: white;
        font-family: josefin;
        padding: 7px;
        border: none;
        cursor: pointer;
    }

    .dropbtn1:hover, .dropbtn1:focus {
        background-color: seagreen;
    }

    .dropdown1 {
        position: relative;
        display: inline-block;
        background-color: darkgreen;
    }

    .dropbtn:hover, .dropbtn:focus {
        background-color: #3e8e41;
    }

    .dropdown {
        position: relative;
        display: inline-block;
    }

    .dropdown-content {
        display: none;
        max-height:200px;/* you can change as you need it */
        overflow:auto;
        font-family: josefin;
        font-size: 12px;
        color: blue;
        position: absolute;
        background-color: #f1f1f1;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    }

    .dropdown-content a {
        color: black;
        padding: 5px 8px;
        text-decoration: none;
        display: block;
    }

    .dropdown a:hover {
        background-color: #3e8e41
    }

    .show {
        display: block;
    }

    @font-face {
        font-family: "arima";
        src: url("../font/Arima-VariableFont_wght.ttf");
    }

    @font-face {
        font-family: "josefin";
        src: url("../font/josefin/JosefinSans-VariableFont_wght.ttf");
    }

}

    @media screen and (min-width: 768px) and (max-width: 840px) {
    .maincontent {
        background-image: url("../img/new_bg.jpg");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-attachment: fixed;
    }



    .logo{
        height: 0%;
        width: 0%;
    }


    .mainlogo {
        height: 10vh;
        width: 14vw;
    }

    .maintitle {
        padding-top: 1%;
        line-height: 1em;
        font-size: 2rem;
        text-align: center;
        font-family: Arial;
        color: white
    }

    .rightbutton1{
        border-radius: 12px; width: 12vw; color: white; font-weight: 700
         }

    .rightbutton2{
        background-color: green;
        width: 12vw;
        color: white;
        font-family: josefin;
        padding: 7px;
        border: none;
        cursor: pointer;
    }

    .subtitle {
        padding-top: 1%;
        line-height: 1em;
        font-size: 1.5em;
        text-align: center;
        font-family: Arial;
        color: black;
    }

    .leftbutton {
        border-radius: 12px;
        width: 12vw;
        color: darkgreen
    }


    /* SYE, IMPORTANT DATES AND REGISTRATION BUTTON */
    .contentbutton {
        background-color: blue;
        font-size: 14px;
        border-radius: 10px;
        width: 9vw;
        color: white
    }


    .table {
        border: 1px solid maroon;
    }

    .td {
        border: 1px solid maroon;
    }

    .th {
        border: 1px solid maroon;
    }

    .tr {
        border: 1px solid maroon;
    }

    .navigationbar {
        /*background: linear-gradient(black, white);*/
        /*background-image: url("../img/new_bg.jpg");*/
        background-size: 100%;
        background-repeat: no-repeat;
    }

    .navbar {
        background-color: darkgreen;
        color: white;
    }


    .button {
        text-align: center;
        cursor: pointer;
        outline: none;
        background-color: #FBEE97;
        border-radius: 5px;
        box-shadow: 0 2px #999;
    }

    .button:hover {
        background-color: #3e8e41
    }

    .button:active {
        background-color: #FBEE97;
        box-shadow: 0 5px #666;
        transform: translateY(4px);
    }

    .dropbtn {
        background-color: orange;
        color: white;
        font-family: josefin;
        padding: 7px;
        border: none;
        cursor: pointer;
    }

    .dropbtn1 {
        background-color: green;
        color: white;
        font-family: josefin;
        padding: 7px;
        border: none;
        cursor: pointer;
    }

    .dropbtn1:hover, .dropbtn1:focus {
        background-color: seagreen;
    }

    .dropdown1 {
        position: relative;
        display: inline-block;
        background-color: darkgreen;
    }

    .dropbtn:hover, .dropbtn:focus {
        background-color: #3e8e41;
    }

    .dropdown {
        position: relative;
        display: inline-block;
    }

    .dropdown-content {
        display: none;
        font-family: josefin;
        font-size: 12px;
        color: blue;
        position: absolute;
        background-color: #f1f1f1;
        min-width: 160px;
        overflow: auto;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        z-index: 1;
    }

    .dropdown-content a {
        color: black;
        padding: 5px 8px;
        text-decoration: none;
        display: block;
    }

    .dropdown a:hover {
        background-color: #3e8e41
    }

    .show {
        display: block;
    }
    }



    @media screen and (min-width: 0px) and (max-width: 767px) {


         /* SYE, IMPORTANT DATES AND REGISTRATION BUTTON */
    .contentbutton{
        background-color: blue;
        font-size: 14px;
        border-radius: 10px;
        width: 100%;
        color: white
    }



        .leftbutton{
        border-radius: 10px;
        width: 100%;
        color: darkgreen
    }

        .mainbody{
            font-size: 1rem;
            color: red;
        }

        .maincontent {
            background-image: url("../img/new_bg.jpg");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            background-attachment: fixed;
        }

        .logo{
        height: 0%;
        width: 0%;
    }
        .mainlogo{
            height: 30vh;
            width: 90vw;
        }

         .rightbutton1{
             border-radius: 10px;
             font-weight: 700;
             color: white;
             width: 100%;
         }

         .rightbutton2{
            border-radius: 10px;
             width: 100%;
             color: white
         }


        .maintitle{
            padding-top: 1%; line-height: 1.5em; font-size: 1.5rem;text-align: center; font-family: Arial; color: yellow
        }

        .subtitle{
            padding-top: 1%; line-height: 1.5em; font-size: 1em;text-align: center; font-family: Arial; color: yellow
        }

        .table {
            border: 1px solid maroon;
        }

        .td {
            border: 1px solid maroon;
        }

        .th {
            border: 1px solid maroon;
        }

        .tr {
            border: 1px solid maroon;
        }


        .navbar {
            width: 100%;
            background-color: darkgreen;
            color: white;
        }


    .button {
        text-align: center;
        cursor: pointer;
        outline: none;
        background-color: #FBEE97;
        border-radius: 5px;
        box-shadow: 0 2px #999;
    }

    .button:hover {
        background-color: #3e8e41
    }

    .button:active {
        background-color: #FBEE97;
        box-shadow: 0 5px #666;
        transform: translateY(4px);
    }

    .dropbtn {
        background-color: orange;
        color: white;
        font-family: josefin;
        padding: 7px;
        border: none;
        cursor: pointer;
    }

    .dropbtn1 {
        background-color: green;
        color: white;
        font-family: josefin;
        padding: 7px;
        border: none;
        cursor: pointer;
    }

    .dropbtn1:hover, .dropbtn1:focus {
        background-color: seagreen;
    }

    .dropdown1 {
        position: relative;
        display: inline-block;
    }

    .dropbtn:hover, .dropbtn:focus {
        background-color: #3e8e41;
    }

    .dropdown {
        position: relative;
        display: inline-block;
    }

    .dropdown-content {
        display: none;
        font-family: josefin;
        font-size: 12px;
        color: blue;
        position: absolute;
        background-color: #f1f1f1;
        overflow: auto;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        z-index: 1;
    }

    .dropdown-content a {
        color: black;
        padding: 5px 8px;
        text-decoration: none;
        display: block;
    }

    .dropdown a:hover {
        background-color: #3e8e41
    }

    .show {
        display: block;
    }

    .rightbutton1{
        border-radius: 12px; width: 100%; color: white; font-weight: 700
         }


    }