/*!
 * Start Bootstrap - Grayscale Bootstrap Theme (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

html {
  width: 100%;
  height: 100%;
  scroll-behavior: smooth;
}
body {
  width: 100%;
  height: 100%;
  font-family: ltc-bodoni-175,sans-serif;
  color: #d8d8d8;
  background-color: black; /*#191919*/
}
.bg-image{
  background-size: contain;
  object-fit: cover;
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow-y: auto;
}
.btn-circle {
    top: -20vh; 
    padding: 7px 16px;
    border: 2px solid #fff;
    border-radius: 35px;
    font-size: 3.5vw;
    color: #fff;
    background: 0 0;
    -webkit-transition: background .3s ease-in-out;
    -moz-transition: background .3s ease-in-out;
    transition: background .3s ease-in-out;
}

.btn-circle:hover,
.btn-circle:focus {
    outline: 0;
    color: #fff;
    background: rgba(255,255,255,.1);
}

.btn-circle i.animated {
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: 1s;
    -moz-transition-property: -moz-transform;
    -moz-transition-duration: 1s;
}

.btn-circle:hover i.animated {
    -webkit-animation-name: pulse;
    -moz-animation-name: pulse;
    -webkit-animation-duration: 1.5s;
    -moz-animation-duration: 1.5s;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
}
.btn {
    text-transform: uppercase;
    font-family: ltc-bodoni-175,sans-serif;
    font-weight: 400;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.btn-default {
    border: 1px solid white;
    color: white;
    background-color: transparent;
}

.btn-default:hover,
.btn-default:focus {
    border: 1px solid #219ab3;
    outline: 0;
    color: #000;
    background-color: #219ab3;
}

.extra {
  width: 80vw;
  margin: auto;
  display: block;
  overflow-y: auto;
  margin-bottom: 3%;
}
.center {
  position: absolute; /* Stay fixed */
  left: 50%;
  transform: translate(-50%, -50%);
  margin-top: -5%;
}


.title {
  color: white;
  font-size: 10vw;
  font-style: normal;
  font-weight: 400;
  text-transform: none;
  text-shadow: 0px 2px 2px rgba(0,0,0,0.25);
  position: absolute; /* Stay fixed */
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  padding: 20px;
  text-align: center;
}

.articlecontainer {
  /*display: flex;
  flex-direction: row;*/
  padding: 0;
  height: auto;
  width: 100%;
  background-color: white;
  margin-bottom: 40px;
  transition: all 0.25s ease;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow-y: auto;
  /*filter: brightness(75%);*/
  background-position: center top;
}

.darkenimage {
    position: inherit;
    size: inherit;
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0, 0.6); /* Black w/opacity/see-through */

}

.abouttext {
    overflow-y: auto;
    height: auto;
    margin: auto;
    margin-top: 2%;
    width: 80vw;
    font-family: ltc-bodoni-175,sans-serif;
    font-size: 1.7vw;
    line-height: 120%;
    margin-bottom: 6%
}
.articletext {
    height: auto;
    margin: auto;
    width: 80vw;
    color: white;
    font-family: 'Bitter', serif;
    font-family: 'Jost', sans-serif;
    font-family: 'Libre Baskerville', serif;
    font-family: 'Montserrat', sans-serif;
    font-family: 'Playfair Display', serif;
    font-family: 'Roboto Slab', serif;
    font-size: 2.5vw;
    padding-top: 6%;
}
.articleblurb {
    height: auto;
    margin: auto;
    width: 80vw;
    color: white;
    font-size: 1.7vw;
    padding-top: 2%;
    padding-bottom: 2%;
    line-height: 120%;
    font-family: ltc-bodoni-175,sans-serif;
}
.articleauthor {
    height: auto;
    margin: auto;
    width: 80vw;
    color: white;
    font-size: 1.2vw;
    padding-bottom: 6%;
    font-family: ltc-bodoni-175,sans-serif;
}
#author_op {
    margin-top: 1.7%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 35px;
    text-transform: uppercase;
    font-family: ltc-bodoni-175,sans-serif;
    font-weight: 700;
    letter-spacing: 1px;
}

p {
    margin: 0 0 25px;
    font-size: 18px;
    line-height: 1.5;
}

@media(min-width:767px) {
    p {
        margin: 0 0 35px;
        font-size: 20px;
        line-height: 1.6;
    }
}

a {
    color: #219ab3;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

a:hover,
a:focus {
    text-decoration: none;
    color: #11505d;
}

.light {
    font-weight: 400;
}

.intro {
    display: table;
    width: 100%;
    height: auto;
    /*padding: 100px 0;*/
    text-align: center;
    color: #fff;
    /*background: url(../img/cover.png) no-repeat bottom center scroll;*/
    background-color: #000;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    background-size: cover;
    -o-background-size: cover;
}

.intro .intro-body {
    display: table-cell;
    vertical-align: middle;
}

.intro .intro-body .brand-heading {
    font-size: 40px;
}

.intro .intro-body .intro-text {
    font-size: 18px;
}


@media(min-width:767px) {
    .intro {
        height: 100%;
        padding: 0;
    }

    .intro .intro-body .brand-heading {
        font-size: 100px;
    }

    .intro .intro-body .intro-text {
        font-size: 25px;
    }
    .content-section {
        padding-top: 80px;
    }

    .section-two {
        padding-top: 20px;

    }
}

@media only screen 
and (max-device-width : 1024px) 
and (orientation : landscape) { 
    .btn-circle {
        top: 10vh !important; 
    }
    #shift {
        top: 3vh !important;
        width: 3vw !important;
    }
}

@media(max-width:1100px) {
    .playlistText {
        top: 1.8vw; 
        font-size: 2.3vh;
    }
    .iconHolder {
        top: 4vh; 
        margin-bottom: 8vh; 
    }
    .apple {
        height: 9vw; 
        width: 9vw; 
        top: -2.7vh; 
        left: 2vh;
    }

    .center {
        margin-top: -16%;
    }
    #site-header {
        display: none;
    }
    #mobile-header {
        display: block;
    }
    .topBar{ 
        display: none;
    }
    .articletext {
        font-size: 5vw;
    }
    .title {
        font-size: 20vw;
    }
    .articleblurb {
        font-size: 3vw;
        line-height: 120%;
    }
    .articleauthor {
        font-size: 2vw;
    }
    .abouttext {
        font-size: 4vw;
        line-height: 120%;
        padding-bottom: 5%;
    }
    .btn-circle {
        top: -15vh; 
        width: 5vw;
        height: 5vh;
        padding: .2em .5em;
        border-radius: 1em;
        font-size: 8vw;
    }
    iframe {
        width: 80%;
    }
    .youtube-icon {
        font-size:11vw;
        top: -3vh;
        margin-left: 36%;
    }

    #spotify {
        margin-bottom: 2%;
    }
    .quiz {
        height: 50vh;
    }
    .extra {
        overflow-y: scroll;
        margin-bottom: 9%;
    }
    .alignmentchart {
        overflow-y: scroll;
        width: 80vw;
        margin-bottom: 9%;
    }
    .seniorquotes {
        overflow-y: scroll;
        margin-top: 9%;
        margin-bottom: 9%;
    }
    #restaurant {
        margin-top: 10%;
    }
}
@media(min-width:450px) and (max-width:749px) and (orientation : portrait) {
    #shift {
        top: 2.5vh !important;
        width: 3vw !important;
    }
}

@media(min-width:750px) and (max-width:1100px) {
    .topBar{ 
        display: block;
    }
    .topBar {
        height: auto;
    
    }
    .navOptions{
        height: auto;
    }
    .list{
        height: auto;
    } 
    .navLink {
        height: auto;
    }
    #site-header {
        display: block;
    }
    #mobile-header {
        display: none;
    }
    .center {
        margin-top: -20%;
    }
    .btn-circle {
        top: -6vh;
        padding: .2em .5em;
        border-radius: 1em;
        font-size: 4vw;
    }
    .abouttext {
        margin-top: -5%;
    }

}
@media(min-width:1000px) and (max-width:1100px) {
    .youtube-icon {
        font-size:8vh;
        margin-left: 40%;
        top: -2.9vh; 
    }
    .apple {
        height: 6vh; 
        width: 6vh; 
        top: -2.7vh; 
        left: 2vh;
    }

}
@media(min-width:1100px) and (max-width:1500px) {
    .youtube-icon {
        font-size:8vh;
        margin-left: 45%;
        top: -2.9vh; 
    }
    .apple {
        height: 6vh; 
        width: 6vh; 
        top: -2.7vh; 
        left: 2vh;
    }

}
@media(max-width:370px) {

    .youtube-icon {
        font-size: 6vh;
        margin-left: 37%;
        bottom: 2vh;
    }
    .playlistText {
        top: 2vh; 
        font-size: 2.3vh;
    }
    .iconHolder {
        top: 4vh; 
        margin-bottom: 8vh; 
    }
    .apple {
        height: 9vw; 
        width: 9vw; 
        top: -2.5vh; 
        left: 2vh;
    }
    .quiz {
        height: 60vh;
        margin-bottom: 50%;
    }
}
@media(max-width:460px) {
    .btn-circle {
        top: -10vh;
    }
    .title{
        top: 40%;
    }

}