@font-face {
      font-family: "Whitney";
      src: url("../fonts/whitney-book.eot") format("eot");
      src: url("../fonts/whitney-book.woff") format("woff");
      src: url("../fonts/whitney-book.woff2") format("woff2");
      font-weight: normal;
      font-style: normal;
    }

    @font-face {
      font-family: "Whitney SC";
      src: url("../fonts/whitney-sc.otf") format("opentype");
      font-weight: normal;
      font-style: normal;
    }

    @font-face {
      font-family: "Chronicle";
      src: url("../fonts/chronicle.otf") format("opentype");
      font-weight: normal;
      font-style: normal;
    }
    html,
    body {
      height: 100%;
    }

    

    body {
      background-color: #ada59c;
      color: #000;
      font-family: "Whitney", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
      font-size:16px;
      line-height: 20px;
    }

    a {
      text-decoration: none;
      color: #fff;
      font-size: 15px;
    }

    ul,
    li {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    img {
      border:none;
    }


.frame {
      position: relative;
    }

    .navigation {
      position: absolute;

      right: 25px;
      top: 40px;
      z-index: 2;
      width: 185px;
      text-align: center;

    }

    .navigation a {
      display: block;
      
    }

    .navigation>li {
      position: relative;
    }
    .subNav.hover {
      visibility: visible;
      /* shows sub-menu */
      opacity: 1;
      z-index: 1;
      /* transform: translateY(0%); */
      transition-delay: 0s, 0s, 0.3s;
      /* this removes the transition delay so the menu will be visible while the other styles transition */
    }

    .subNav {
      padding-top: 10px;
      visibility: hidden;
      /* hides sub-menu */
      opacity: 0;
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      /* transform: translateY(-2em); */
      z-index: -1;
      transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;

    }

    .subNav li {
     
      border-top: 1px dotted rgba(255,255,255,0.5);
      padding-top: 10px;
      padding-bottom: 10px;
    }
    .subNav li:first-child{
      border:none;
      }
    .subNav a{
     
      text-transform: uppercase;
      font-size:13px;
      letter-spacing: 1px;
      
    }  


    .inline li{
      text-align: center;
    }

    .inline a {
      display: inline-block;
      vertical-align: top;
      padding-top: 3px;
      padding-bottom: 3px;
      line-height: 10px;
    }
    .inline a:first-child{
      
      padding-right: 10px;
      border-right: 1px solid rgba(255,255,255,0.5);
      
    }
    .inline a:last-child{
      padding-left: 8px;
    }

    .clearfix {
      overflow: auto;
    }
     
    .clearfix::after {
      content: "";
      clear: both;
      display: table;
    }

/* The Modal (background) */
.modal {
   /* display: none; Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 5; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s;  

}
.modal.show {
  /* display:block; */
  visibility: visible;
  opacity: 1;
  /* transition-delay: 0.3s; */
}
.modal-content h1{
  margin:0 0 20px 0;
  font-size:24px;
}

.modal-body p:first-child{
  margin-top:0;
}
.modal-body p:last-child{
  margin-bottom:0;
}

/* Modal Content/Box */
.modal-content {
  background-color:rgba(0,0,0,0.4);
  color:#fff;
  margin: 15% auto; /* 15% from the top and centered */
  
  
  width: 80%; /* Could be more or less, depending on screen size */
  max-width:840px;
}

.modal-header{
  position: relative;
}
/* The Close Button */
.close {
  color: #aaa;
  position: absolute;
  right:10px;
  top:10px;
  font-size: 28px;
  font-family: Arial, Helvetica, sans-serif
}

.close:hover,
.close:focus {
  color: #ccc;
  text-decoration: none;
  cursor: pointer;
}


    @media (orientation: landscape) {
      body {
        background-image: url(../banners/tanyasingh_abanHouse_desktop.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;

      }
      .navigation{
        right:40px;
      }

      .modal-content{
       margin:6% auto;

      }
      .biography{
          
          box-sizing: border-box
      }
      .bioPic{
        float:left;
        width:50%;
        margin-right:20px;
        
      }   

      .biography-large{
        display:block;
        margin-top:40px
      }
      .biography-mini{
        display:none;
      }

    }

    
   

    @media (orientation: portrait) {
      body {
        background-image: url(../banners/tanyasingh_abanHouse_mobile-opt.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
      }

       .modal-content{
        margin-top:0;
        margin-bottom: 0;
        width: 100%;
        max-width: 100%;
        }
        .close{
            position: absolute;
            right:0;
            top:0;
            padding:20px;
            z-index: 6;
        }  
        .biography{
          padding:20px;
        } 
        .biography-large{
          display:none;
        }
        .biography-mini{
          display:block;
        }


    }

    @media only screen and (max-width : 1024px) {
      body {
        /* min-width: 1024px;
        min-height: 768px; */
        overflow-x: auto;
        overflow-y: auto
      }      
    }

    @media only screen and (min-width : 678px) {
      
    }

    @media only screen and (max-width : 678px) {
     
    }