* {
    box-sizing: border-box;
}

.header {
font-family: helvetica;
position: sticky;
top: 0;
left: 0;
right: 0;
display: flex;
flex-direction: row;
justify-content: space-between;
background-color: white;
border-bottom: 1px solid #DBDCDD;
}

.left-section {
    display: flex;
    align-items: center;
}

.course-section {
align-items: center;
}


/* Style The Dropdown Button */
.dropbtn {
    border: none;
    background-color: white;
    cursor: pointer;
    transition: opacity 0.13s;
    transition-timing-function: ease-in-out;
    vertical-align: bottom;
  }

  .dropbtn::after{
    color: #2C2C2C;
    font-family: helvetica;
    content: " \221F";
    display: inline-block; 
}

.dropbtn::after{
    transform: translate(5px, -3px) rotate(315deg) ;
}

.dropbtn:hover{
    background-color: #F5F5F5;
    color: #2C2C2C;
    transition: background-color 0.13s;
    transition-timing-function: ease-out;
}

.dropbtn:active{
    opacity: 0.7;
}
  
  /* The container <div> - needed to position the dropdown content */
  .dropdown {
    position: relative;
    display: inline-block;
  }
  
  /* Dropdown Content (Hidden by Default) */
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  /* Links inside the dropdown */
  .dropdown-content a {
    color:#6E6E6E;
    padding: 12px 16px;
    font-size: 80%;
    text-decoration: none;
    display: block;
  }
  
  /* Change color of dropdown links on hover */
  .dropdown-content a:hover {
    background-color: #f1f1f1
}
  
  /* Show the dropdown menu on hover */
  .dropdown:hover .dropdown-content {
    display: block;
  }
  
  /* Change the background color of the dropdown button when the dropdown content is shown */
  .dropdown:hover .dropbtn {
    background-color: #F5F5F5;
    color: #2C2C2C;
    transition: background-color 0.13s;
    transition-timing-function: ease-out;

  }

.course-button {  
    font-family: Arial, Helvetica, sans-serif;
    cursor: pointer;
    transition: opacity 0.13s;
    transition-timing-function: ease-in-out;
    vertical-align: bottom;
}

.course-button::after{
    color: #2C2C2C;
    font-family: helvetica;
    content: " \221F";
    display: inline-block; 
}


.course-button::after{
    transform: translate(5px, -3px) rotate(315deg) ;
}

.course-button:hover{
    background-color: #F5F5F5;
    color: #2C2C2C;
    transition: background-color 0.13s;
    transition-timing-function: ease-out;
}

.course-button:active{
    opacity: 0.7;
}


.subcourse-button {
    text-decoration: none;         
    color:#6E6E6E;
    cursor: pointer;
    transition: opacity 0.13s, background-color 0.13s, color 0.13s;
    transition-timing-function: ease-in-out;
    vertical-align: bottom;
}



.subcourse-button a:link, a:visited {
    font-family: Helvetica, sans-serif;
    text-decoration: none;       
    color:#6E6E6E;
    transition: opacity 0.13s;
    transition-timing-function: ease-in-out;
 }

 .subcourse-button:hover {
    background-color: #F5F5F5;
    color: #2C2C2C;
}


.subcourse-button a:active {
    color: #2C2C2C;
 }

.subcourse-button:active {
    opacity: 0.7;
}














@media (min-width: 1200px) {

    .header {
        margin: 0;
        height: 55px;
        z-index: 1;
        border-bottom: 1px solid #DBDCDD;
    }


    
    .school-logo {
        margin-left: 16px;
        margin-right: 16px;
        height: 36px;
    }

    .support-logo {
        margin-left: 16px;
        margin-right: 16px;
        height: 36px;
    }
    
    
    .dropbtn {
        font-size: 83.3333%;
        padding-left: 2.083333vw;
        padding-right: 2.083333vw;
        padding-top: 20px;
        padding-bottom: 16.5px;
        border-bottom: 2px solid #2C2C2C;
        
    }

    .course-button {
        margin-left: 8px;
        height: 55px;
        line-height: 55px;
        font-size: 83.3333%;
        padding-left: 2.083333vw;
        padding-right: 2.083333vw;
        padding-top: 19.5px;
        padding-bottom: 18.0px;
        border-bottom: 2px solid #2C2C2C;
        
    }
   
    
    .subcourse-button {
        height: 55px;
        line-height: 55px;
        font-size: 80%;
        padding-top: 19.5px;
        padding-bottom: 19.5px;
        padding-left: 1.54vw;
        padding-right: 1.54vw;
    }
    


    .right-section {
        display: flex;
        align-items: center;
        background-color: white;
        width: 150px;
        
    }

    body {
        margin-top: 55px;
        margin-left: 372px;
    }
    
    }
    

    @media (max-width: 1199px) {

        .header {
            
            height: 4.58vw;
            z-index: 1;
            border-bottom: 1px solid #DBDCDD;
        } 


        
        .school-logo {
            margin-left: 1.33vw;
            margin-right: 1.33vw;
            height: 3vw;
            
        }

        .support-logo {
            margin-left: 1.33vw;
            margin-right: 1.33vw;
            height: 3vw;
            
        }

        .dropbtn {
            padding-left: 2.1vw;
            padding-right: 2.1vw;
            padding-top: 1.7vw;
            padding-bottom: 1.35vw;
            border-bottom: 0.18vw solid #2C2C2C;
            font-size: 1.112035vw;
        }
 
        
            
        .subcourse-button {
            height: 4.58vw;
            line-height: 4.58vw;
            padding-top: 1.7vw;
            padding-bottom: 1.6vw;
            padding-left: 1.525vw;
            padding-right: 1.525vw;
            font-size: 1.07335vw;
        }
        
        .subcourse-button:hover {
            color: #2C2C2C;
        }
        
        .right-section {
            display: flex;
            align-items: center;
            background-color: white;
            width: 12.5vw;


        }


    body {
        margin-top: 4.58vw;
        margin-left: 31vw;
    }

        
    }