@font-face {
    font-family:"Myriad Pro";
    font-style:normal;
    font-weight:normal;
    src : url(/Meals-on-Wheels/fonts/MyriadPro-Regular.otf);
    }
p, a {
    font-family: "Myriad Pro";
    color: #fefce7;

    line-height: 2;
}
body{ 
    font-size:120%;
}
.download-button {
    background-color:#fedb00;
    border:none;
    height: 40px;
    width: 100%;
    font-size:.8em;
    border-radius: 4px;
    cursor: pointer;
    transition: 0.3s;
    color: black;
    display: inline-block;
} 
.download-button:hover {
    opacity: .8;
}
.download-button:active {
    background-color: #ffa600;
}
.download-button-anchor {
    margin: 2% auto;
    width:50%;
    display: block;
    min-width: 450px;

}


/* Style page content */

#main {
    transition: .5s;
    outline: 20px solid #fedb00;
    background-color:#1a1a1a;
    background-size: auto;
    padding-bottom: 2%;
    min-height: 100vh;
    
}
#driver-main {
    transition: .5s;
    background-color:#1a1a1a;
    outline: 20px solid #8052a1;
    background-size: auto;
    padding-bottom: 2%;
    min-height: 100vh;
}
#nav-main {
    transition: .5s;
    background-color:#1a1a1a;
    outline: 20px solid #63c6c3;
    background-size: auto;
    padding-bottom: 2%;
    min-height: 100vh;
}

.pdf {
    aspect-ratio: 8.5 / 11;
    width: 60vw;
    margin: 5% auto;
    max-width: 1000px;
    display: block;
}
.video {
    aspect-ratio: 16/  9;
    width: 70vw;
    margin: auto;
    max-width: 1000px;
    display: block;
    border: #fedb00 .5vw solid;
}


.title{
    margin: 0;
    background: 100% url('../images/backgroudHQ.png');
    outline:#fedb00 solid 10px;
    text-align: center;
    padding: 6%;
    margin-top: .1em;
    font-size: 5em;
    color: #fedb00;
    line-height: 1;
}
.driver-title {
    color: #8052a1;
}
.nav-title {
    color: #63c6c3;
}

.subtitle{
    margin: 0;
    background: 100% url('../images/backgroudHQ.png');
    outline:#fedb00 solid 3px;
    text-align: center;
    padding: 3%;
    margin: 0;
    font-size: 2.5em;
    color: #fedb00;
    position: sticky;
    top: 1.2em;
    line-height: 1;
}
.subtitle-2{
    margin: 0;
    padding-top: 25px;
    border:#fedb00 solid;
    border-width: 0 0 3px 0;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
    width: 40%;
    font-size: 2em;
    color: #fedb00;
    display: block;
    clear: both;
    line-height: 1;
}
.subtitle-3 {
    margin: 0;
    border:#fedb00 solid;
    border-width: 0 0 1.5px 0;
    text-align: left;
    margin-left: 3%;
    width: 25%;
    font-size: 1.2em;
    color: #fedb00;
    display: block;
    clear: both;
    line-height: 1;
    padding-left: 1.5vw;
    margin-top: 5vw;
}
.text{
    margin: 3% auto;
    width: 80%;
    text-align: left;
    padding: 1%;
    clear: both;
}
.short-text{
    margin: 3% auto;
    width: 80%;
    text-align: center;
    padding: 1%;
    clear: both;
}

.break {
    border: solid #fedb00 3px;
    border-width: 0 0 3px 0; 
    clear: both;
}

.mobile-text {
    display: none;
}
.desktop-text {
    display: inline;
}

/* TEXT Colors*/
.Accent-White {color:#fefce7 ;}
.Airstrike-Red {color:#c9442d ;}
.Support-Blue {color:#279ab6 ;}
.Democracy-Yellow {color:#fedb00 ;}
.Driver-Purple {color: #8052a1;}
.Teammate-Green {color:#34865b ;}
.Nav-Blue {color:#63c6c3 ;}


.header {
    position: sticky;
    top: 0;
    padding: 5px 10px;
    background-color: #1a1a1a;
    transition: 0.5s;
    outline:#fedb00 solid 4px;
    line-height: 1;
    z-index: 1;
}
.header a {
    display: inline;
    text-decoration: none;
    font-size: 1.2em;
    color: #fedb00;
    /*border: #fedb00 solid; */
    padding:  inherit ;
    height: inherit;
    border-width: 0 4px 0 0;

    
}

.bar-button{
    margin: 3vh;
    z-index: 1;
    display: block;
    
}
.navbarstack{
    height: 5vw ;
    max-height: 36px;
}
.sidebar {
    height: 100%;
    position: fixed; /* Stay in place */
    z-index: 1; /* Stay on top */
    background-color: #1a1a1a;
    overflow-x: hidden; /* Disable horizontal scroll */
    transition: 0.5s;
    outline:#fedb00 solid 7px;
     
}
@keyframes slide {
    0%      {
      left:-250px;
      display: none;
    }
    100%    {
      left:0px;
      display:block;
    }
}
.slide, .slideAway {
    animation-name: slide;
    animation-timing-function:linear;
    animation-duration: .3s;
    animation-fill-mode: forwards;
}
.slideAway {
    animation-direction:reverse;  
}
.hidden{
  display:none
}

.sidebar a {
    text-decoration: none;
    font-size: 25px;
    color: #fedb00;
    display: block;
    transition: 0.3s;
    padding: 8px 20px;
}

.sidebar a:hover {
  color: #ffa600;
}





@media (max-width: 500px) {
    .download-button-anchor {width:100%;min-width: 0;}
    .download-button {border-radius: 0px;}
    .pdf {width: 100%;}
    .body {font-size: 100%;}
    .title {font-size: 2em;}
    .subtitle {font-size: 1.2em; top: 2em;}
    .subtitle-2{font-size: 1.1em; width: 80%;}
    .mobile-text {display: inline;}
    .desktop-text {display: none;}
    .subtitle-3{ width: 100%; margin-left: 0;}
    .header {font-size: .8em;}
}