.prev-nav {
    position: fixed;
    /* margin-left: 0;
    margin-top: 0; */
    border: 1px red solid;
    z-index: 2;
    height: 100%;
    width: 20%;
}

.next-nav {
    position: fixed;
    margin-left: 90%;
    /* margin-top: 0;  */
    border: 1px red solid;
    z-index: 2;
    height: 100%;
    width: 10%;
}

.navbar-header {
    position: fixed;
    padding: .5rem;
    padding-top: .5rem;

    max-height: 2.5rem;
    z-index: 4;
    width: 100%;
}

.toggle-button {
    padding: 0;
    margin-top: .2rem;
    margin-left: .2rem;
    height: 2em;
    width: 2em;
    cursor: pointer;
    z-index: 2;
}

.dschool-menu {
    height: 2rem;
    width: 170px;
    padding: 0;
    z-index: 4;
    /* -webkit-transition: all .15s ease;
    transition: all .15s ease; */
}

#dlogo-id{
    height: 1.5rem;
    /* width: 170px; */
}

.dlogo-id,
.shareBtn{
    -webkit-transition: opacity .6s;
    transition: opacity .6s;
    opacity: 1;
}

.fade-active {
    opacity: 0;
}

.bar {
    background: #fff;
    display: block;
    width: 100%;
    height: 5px;
    border: 0;
    -webkit-transition: all .35s ease;
    transition: all .35s ease20
}

.bar + .bar {
    margin-top: 4px;
}

.middle {
    top: 11px;
}

.bottom {
    top: 22px;
}

.toggle-button:hover {
    opacity: .6;
}

.toggle-active .bar {
    background: #fff;
    display: block;
}

.toggle-active .top {
    -webkit-transform: translateY(6px) translateX(0) rotate(45deg);
    transform: translateY(6px) translateX(0) rotate(45deg);
    transition: translateY(6px) translateX(0) rotate(45deg);
}

.toggle-active .middle {
    opacity: 0;
}

.toggle-active .bottom {
    -webkit-transform: translateY(-12px) translateX(0) rotate(-45deg);
    transform: translateY(-12px) translateX(0) rotate(-45deg);
}

.overlay {
    position: fixed;
    background-image: linear-gradient(to top, rgba(255,0,0,.5), rgba(241, 88, 34,1), rgba(241, 88, 34,1), rgba(241, 88, 34,1));

    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: opacity .35s, visibility .35s, height .35s;
    transition: opacity .35s, visibility .35s, height .35s;

    z-index: 3;
}

.nav-active { /* the menu overlay values when active */
    opacity: .97;
    visibility: visible;
    height: 100%;
    /*    max-height: 340px;*/
}

.overlay ul {
    display: block;
    position: relative;
    top: 60px;
    left: 0;
    font-family: "ApercuPro-Medium", "Helvetica Neue", 
        Helvetica, Arial, sans-serif;
    font-size: 90px;
    line-height: 1.1;
    font-weight: 400;
    margin-left: .7rem;
    list-style: none;
    padding: 0;
}

.overlay ul li {
    display: block;
}

.overlay ul li a {
    color: #fff;
    text-decoration: none;
}

#shareBtn {
    height: 1.5rem;
    cursor: pointer;
}
#shareBtn:hover {
    opacity: .5;
}

/* The Modal (background) */
.modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 2;
    /* Sit on top */
    padding-top: 15vh;
    /* Location of the box */
    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.5);
    /* Black w/ opacity */
    
}

/* Modal Content */
.modal-content {
    background-color: #000;
    padding: 20px;
    border: 1px solid #888;
    width: 75vw;
    min-width:300px;
    /* transition: all .2s ease-in-out; */
}

/* The Close Button */
.close {
    color: #aaaaaa;
    font-size: .5em;
}

.close:hover,
.close:focus {
    color:rgb(253, 171, 66);
    text-decoration: none;
    cursor: pointer;
}

.falink {
transition: all .2s ease-in-out;
}
.falink a:link{
    color:#fff;
    }
.falink a:hover{
    color: rgb(253, 171, 66);
    -webkit-transform: scale(1.1,1.1);
    -ms-transform: scale(1.1,1.1); /* IE 9 */
    transform: scale(1.1); /* Standard syntax */
    }
.falink a:visited {
    color:#fff;
}

a:hover{
    cursor:pointer;
}

/* . . . . . NAVIGATION . . . . . . */
/* Navigation Links on Home Page */

.m:link {
    text-decoration: none;
    color: rgb(255, 255, 255);
    opacity: .6;
  }
    
  .m:hover {
    color: rgb(255, 255, 255);
      opacity: 1;
  }
    
  .m:visited {
    color: rgb(255, 255, 255);
    text-decoration: none;
    opacity: .6;
  }
  
  .m, .m:link, .m:active, .m:visited {
    -webkit-transition: opacity 0.1s ease-out; 
    -moz-transition: opacity 0.1s ease-out; 
    -o-transition: opacity 0.1s ease-out;
    transition: opacity 0.1s ease-out; 
  }
  

/* . . . . . NAV FADE . . . . . . */
/* ///////////////////////////////////////*/

.shortmenufade {
    /* background: rgb(255, 155, 24); */
    background-image: url('../images/menu_fade_plain.png');
    background-size: 4rem;
    background-repeat: repeat-x;
    height: 5rem;
    margin-left: 0;
    margin-top: 0;
    position: fixed;
    z-index: 1;
  }

  .menufade {
    background-image: linear-gradient(to top,rgba(185, 185, 185, 0),  rgb(87, 87, 87));
    height: 7rem;
    margin-left: 0;
    margin-top: 0;
    position: absolute;
    z-index: 1;
  }

  .counter-nav {
    
    font-family: "ApercuPro-Medium", "Helvetica Neue", 
    Helvetica, Arial, sans-serif;
    background: none;
    height: 100vh;
    width: 100vw;
    /* width: 100vw;  */
    /* margin-left: 0;
    margin-top: 0; */
    /* padding-top: 3rem; */
    font-size: 5em;
    position: fixed;
    /* color: #fff; */
    z-index: 1;
    /* opacity: .3; */
  }