/*******************************************
    
    Small devices (landscape phones, 10px and up)

*******************************************/

@media (min-width: 10px) {
  body * {
    line-height: 1.5;
  }

  section.stage.ie-s1 .container,
  section.stage.ie-s1 .container-fluid {
    background-position: left 35% top;
  }

  section.stage.ie-s2 .container {
    background-position: right 40% top;
  }

  section.stage.ie-s3 .container {
    background-position: left 20% top;
  }

  section.stage.ie-s4 .container {
  }

  section.stage.ie-s5 .container {
    background-position: left 30% top;
  }

  section.stage.ie-about-us .container {
    background-image: url("/images/NewPic1.jpg");
    background-position: 95% 50%;
  }

  section h2 span.hl,
  section h2 span.ll {
    font-size: 1.4em;
  }

  figure {
    max-width: 350px;
  }

  .ie-big-quote-sm cite {
    padding-right: 20%;
  }

  .underlay-sm {
    background-color: rgba(255, 255, 255, 0.5);
    padding: 1em;
  }

  .stage .ie-big-quote {
    position: relative;
    top: 55px;
    left: 46px;
    font-size: 1.6em;
    max-width: 350px;
  }

  .ie-big-quote::before,
  .ie-big-quote-sm::before {
    top: -10px;
    left: -35px;
  }

  .ie-big-quote::after,
  .ie-big-quote-sm::after {
    bottom: 35px;
    right: 12px;
  }

  .ie-s1 .ie-quote-container {
    top: 0px;
  }

  .grid-2-2 {
    grid-template-columns: 100%;
    grid-template-rows: auto;
    grid-column-gap: 0rem;
  }
  .grid-3:not(.noresize) {
    grid-template-columns: 100%;
    grid-template-rows: auto;
    grid-column-gap: 0rem;
  }

  .grid-3.even {
    grid-template-columns: 100%;
  }

  .nav-brand img {
    max-width: 250px;
  }
}

/*******************************************
    
    Small devices (landscape phones, 576px and up)

*******************************************/

@media (min-width: 576px) {
  /* */
}

/*******************************************
    
    Medium devices (tablets, 768px and up)

*******************************************/

@media (min-width: 768px) {
  .orientation-left .underlay-sm,
  .orientation-right .underlay-sm {
    max-width: 500px;
  }

  .orientation-top .underlay-sm {
    max-width: 60%;
  }

  section.stage.ie-s2 .container {
    background-position: left 50% top;
  }

  section.stage.ie-s3 .container {
    background-position: left 50px top;
  }

  section.stage.ie-s5 .container {
    background-position: left 15% top;
  }

  .border-md-end {
    border-right-width: 1px !important;
    border-right-style: solid;
  }
}

/*******************************************
    
    Large devices (desktops, 992px and up)

*******************************************/

@media (min-width: 992px) {
  figure {
    max-width: 450px;
  }
  .grid-2-2 {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 50% 50%;
  }

  .grid-3,
  .grid-3.even {
    grid-template-columns: 33.33333% 33.33333% 33.33333%;
  }

  .offset-top-lg-50n {
    transform: translateY(-50%);
  }

  .ie-s1 .ie-quote-container {
    top: -100px;
  }

  section.stage.ie-s2 .container {
    background-position: right 0% top;
  }

  section.stage.ie-about-us .container {
    background-position: left 10% top;
  }

  .nav-brand img {
    max-width: 350px;
  }
}

/*******************************************
    
    Extra large devices (large desktops, 1200px and up)

*******************************************/

@media (min-width: 1200px) {
  section.stage.ie-s1 .container,
  section.stage.ie-s1 .container-fluid {
    background-position: left 15% top;
  }

  section h2 span.hl,
  section h2 span.ll {
    font-size: 1.5em;
  }

  section.stage.ie-s3 .container {
    background-position: left 180px top;
  }

  .underlay-sm {
    background: transparent;
    padding: 0;
  }
  .orientation-top .underlay-sm {
    max-width: 100%;
  }
  .stage .ie-big-quote {
    position: absolute;
    top: 250px;
    right: 100px;
    left: auto;
    font-size: 2.5em;
    max-width: 500px;
  }
  .ie-big-quote::before,
  .ie-big-quote-sm::before {
    top: -10px;
    left: -35px;
  }

  .ie-big-quote::after,
  .ie-big-quote-sm::after {
    bottom: 35px;
    right: 12px;
  }
  .ms-xl-n5 {
    margin-left: -3rem !important;
  }
}

@media (min-width: 1920px) {
  section h2 span.hl,
  section h2 span.ll {
    font-size: 1.8em;
  }
}