/* Burger Icon and related media query is done with the help of a tutorial wound at https://www.w3schools.com/howto/howto_js_topnav_responsive.asp */
.header {
    overflow: hidden;
    background-color: #fff;
    padding: 10px 0px;
  }

  

.header a {
    font-family: 'Space Mono', monospace;
    color:rgb(161, 161, 161);
    font-size: 18px;
    text-align: center;
    float: left;
    padding: 12px;
    text-decoration: none;
    line-height: 25px;
    border-radius: 3px;
}
  
  
.header a:hover {
    background-color: rgb(189, 188, 188);
    color: #044c7c;
}
  
.header a.on {
    background-color: #044c7c;
    color: white;
}
  
  
.header-right {
    float: right;
    position: relative;
}

.header a.login{
  color: rgb(10, 10, 10);
  background-color: white;
  text-decoration: underline;
}

.header a.login:hover{
  color: rgb(178, 8, 8);
  text-decoration: underline;
}

.header-right .icon {
    display: none;  
}
  
 
@media screen and (max-width: 770px) {
    .header-right a:not(:last-child) {display: none;}
    .header-right a.icon {
        float: right;
        display: block;
    }
}

@media screen and (max-width: 1000px) {
    .header-right.responsive {position: relative;}
    .header-right.responsive a.icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    .header-right.responsive a {
        float: none;
        display: block;
        text-align: left;
    }
}


@media screen and (max-width: 500px) {

    .open-house-actual-image{
        width: 100%;
    }

    .yale-header{
        max-width: 300px;
    }
}