@media screen and (min-width: 1600px) {
    #intro-vid{
        max-width: 105%;
    }
    
}

@media screen and (max-width: 1140px) {
    #logo-large{
        display: none;
    }
    #logo-small{
        display: inherit;
        height: 45px;
        padding-top: 5px;
    }
}

@media screen and (max-width: 991px) {
    .dual-column{
        max-width: fit-content;
        padding:0;
    }

    #media-container{
    top: 0;
    text-align: start;
    padding-left: 2vw;
    padding-right: 4vw;
    }

    .scrolly-vid{
        width:90%;
    }
}

@media screen and (min-width: 851px){
    .loaded1, .loaded2, .loaded3, .loaded4, .loaded5 .loaded6 .loaded7 .loaded8 .loaded9 .loaded10 .loaded11 .loaded12 .loaded13 .loaded14 .loaded15 .loaded16 .loaded17{
        animation: fadeIn 1s;
      -webkit-animation: fadeIn 1s;
      -moz-animation: fadeIn 1s;
      -o-animation: fadeIn 1s;
      -ms-animation: fadeIn 1s;
    }
    
    @keyframes fadeIn {
        0% {opacity:0;}
        100% {opacity:1;}
      }

      #media-container{
        top: 10vh;
        text-align: start;
        padding-left: 16px;
        padding-right: 16px;
        }
}


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

    header h2 {
        margin-bottom: 15px;
    }
    
    .row{
        --bs-gutter-x: 1rem;
    }
    
    li.droplinks-ragouts > a img{
        width: 100%;
    }

    .break-padding{
        padding: 0px 24px;
    }


    #intro-vid {
        max-width: inherit;
    }
    .loaded1.media1, .loaded2.media2{
        animation: none;
        -webkit-animation: none;
        -moz-animation: none;
        -o-animation: none;
        -ms-animation: none;
    }

}

@media screen and (max-width: 800px) {
    .full{
        flex-direction: column-reverse;
    }
    .sticky {
        position: -webkit-sticky; /* Safari */
        position: sticky;
        top:50px;
        background: #232f3b;
        width: 95%;
        margin: auto;
    }
    .col.sticky.spacer{
        height: 45vh;
        width: 100%;
        margin: auto;
        background-color: #232f3b;
        box-shadow: 0px 3px 10px #111;
    }

    .spacer{
        height:15vh;
    }

    #chart-container{
        position: -webkit-sticky; /* Safari */
        position: sticky;
        padding-top: 1.2vh;
        top:3.5vh;
        height: 45vh;
        width: 90%;
        margin: auto;
    }

    text.highcharts-title{
        font-size: 14px !important;
    }
    .customLegend{
        font-size: 10px !important;
    }

    #media-container{
        top: 0vh;
        text-align: start;
        margin: auto;
        width: 100%;
        padding-top: 0vh;
        height: auto;
        background-color: #232f3b;
        text-align: center;
        box-shadow: 0px 3px 10px #111;
    }
    .scrolly-vid{
        height: auto;
        width: 100%;
        margin-top: 4vh;
        max-height: -webkit-fill-available;
    }

    .enlarge{
        display: initial;
    }

    .panel img{
        width:40%;
        margin: 1em 1.2em 1em 0;
        float: left;
    }

    .panel img.wide{
        width: 100%;
        margin: 0;
        float: none;
    }
    p.long-quote-text{
        margin-left:0;
        font-size:20px;
    }

    .line{
        display: inline-block;
        display: -webkit-inline-box;
        margin-bottom: 2vh;
    }
    .snippet-mob{
        width:100% !important
    }
}

@media (max-width: 1000px) {
    .droplinks .grid li.small,
    .droplinks .grid li.large {
        flex-basis: 50%;
    }
}

@media (max-width: 800px) {
    .droplinks .grid li.small,
    .droplinks .grid li.large {
        flex-basis: 100%;
    }
}

@media (max-width: 3000px) {
    .droplinks .grid li {
      padding: 50px;
      flex-basis: 33.3%;
      text-align: center;
    }
  }

  /* @media (max-width: 1280px) {

    .long-quote {
        font-size: 13px !important;
    }
  } */

  @media (max-width: 1100px) {
    .droplinks .grid li {
      padding: 50px;
      flex-basis: 50%;
      text-align: center;
    }
  }

  @media (max-width: 800px) {
    .droplinks .grid li {
      flex-basis: 100%;
      padding: 20px;
    }
  }


  @media screen and (max-width: 480px){
    #intro-vid {
        max-width: inherit;
    }
    .paperstacks{
        max-height: 350px;
        margin:1em 0;
        height:fit-content;
    }
    #inline-vid{
        height: auto;
        max-height:190px;
    }
}