/* folio css */
  
  /* html {
          background: linear-gradient(to bottom, #8c7a7a 0%, #af877c 65%, #af877c 100%) fixed;
          background: url("../images/background.jpg") no-repeat center center fixed;
          background-size: cover;
      } */
  
  body {
            font-family: 'Roboto', sans-serif;
            font-weight: 400;
            font-size: 1.05em;
            color: rgb(60,60,60);
            background: white;
            top: 0;
            left: 0;
            padding: 0;
            margin: 0;
        }

        .fancy-font {
            font-family: 'Fuggles', cursive;
            color: white;
            text-transform: none;
        }
        
        .fancy-font-dark {
            font-family: 'Fuggles', cursive;
            color: black;
            text-transform: none;
        }

        h1, h3, h4 {
            font-family: 'League Gothic', sans-serif;
        }

        h1 {
            font-size: 3em;
            margin: 0;
            padding: 0;
            line-height:.8em;
            text-transform: uppercase;
            font-weight: 400;
        }

        h2 {
            font-size: 2em;
            margin: 0;
            padding: 0;
            font-weight: 400;
        }

        p {
            font-family: 'Roboto', sans-serif;
            font-size: 1em;
            font-weight: 400;
            margin: 1em;
            padding: 0;
            line-height: 1.4em;
        }
        
        b {
            font-weight: 500;
            color: rgb(0,0,0);
        }
        
        i {
            font-family: 'Roboto', sans-serif;
            font-size: 1em;
            font-weight: 400;
            padding: 0;
            line-height: 1.4em;
            font-style: italic;
        }
        
        .lighter-text {
            font-weight: 300;
        }
        
        hr.short {
            margin: 2em auto;
            width:40%;
            text-align:center;
        }
        
        
        #loading {
           width: 100%;
           height: 100%;
           top: 0;
           left: 0;
           position: fixed;
           opacity: 1;
           background-color: #000;
           z-index: 99;
        }
        
        #loading-parent {
          background-color: #000;
          height: 95%;
          width: 60%;
          margin: 0 auto;
          display: flex;
          justify-content: center;
          align-items: center;
          resize:none;
          overflow:hidden;
        }
        
        #loading-child {
            z-index: 100;
            width: 100px;
            height: auto;
        }
        
        .center-text {
          text-align: center;
        }
        
        .larger-text {
            font-size: 1.4em;
            margin: 1em;
            padding: 0;
            line-height: normal;
        }
        
        .slightly-larger-text {
            font-size: 1.1em;
            margin: 1em;
            padding: 0;
            line-height: normal;
        }
        
        .smaller-text {
            font-size: .8em;
        }
        
        .small-note {
          font-size: .9em;
          color:gray;
        }
        
        .section-row .title-text {
          padding: 0;
          margin: 0;
        }
        
        .title-text h1 {
          padding: 10px;
          margin: 0;
          color: rgb(90,90,110);
        }
        
        section .title-margin {
          margin: 0 auto;
          padding: 0;
        }
        
        .section-row.no-background, .video-row.no-background {
          border:none;
          background:none;
        }
        
        .nudge-right {
          margin-left: 14px;
        }

        .page-container{
            display: block;
            width: 100vw;
            height: 100vh;
        }

        .nav {
            position: fixed;
            z-index: 1;
            width: 100%;
            padding: 10px;
            background: rgba(255,255,255,.95);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        button {
           border-radius: 2px;
           cursor: pointer;
          /* box-shadow: 2px 2px 6px 2px rgba(0,0,0,0.1); */
        }

        .text-box button, .push-button-center button, .nav button {
            padding: 6px 26px;
            font-size: 1em;
        }

        .text-box button:active, .push-button-center button:active, .nav button:active {
            transform: scale(.97);
        }

        .nav-buttons button {
            font-size: .8em;
            margin: 10px;
            background: rgb(220, 220, 220);
            text-transform: uppercase;
            border: none;
        }

        .text-box button, .text-box-small button, .push-button-center button {
            font-size: .7em;
            margin: 15px 0 0;
            padding: 10px 20px;
            color: white;
            text-transform: uppercase;
            border-radius: 20px;
            background: rgba(90,90,110,0.9);
            /* background: rgba(44, 44, 44, .5); */
            border: none;
        }
        
        .push-button-center button {
            margin: 15px 15px 0;
        }

        .image-box {
            width: 400px;
            height: auto;
            margin: 20px;
            padding: 0;
            background: transparent;
        }

        .image-box img {
            width: 100%;
            height: auto;
        }
        
        .video-box {
            width: 500px;
            height: auto;
            margin: 20px;
            padding: 0;
            background: transparent;
        }

        .text-box {
            width: 400px;
            height: auto;
            margin: 20px;
            padding: 0;
            background: transparent;
        }
        
        .text-box-small {
            width: 300px;
            height: auto;
            margin: 20px;
            padding: 0;
            background: transparent;
        }

        .text-box p, .text-box-small p {
            margin: 20px 0;
        }
        
        .lazy {
          opacity: 0; 
        }

        section {
            scroll-margin-top: 100px;
            scroll-snap-margin-top: 100px; /* iOS 11 and older */
            /* padding: 20px; */
            margin: 50px;
            /* border: 1px dotted gray; */
            /* background: rgb(245,245,245); */
            z-index:2;
            transition: opacity 0.5s ease-in-out;
        }
        
        @supports (scroll-margin-top: 0;) {
          section {
            scroll-margin-top: 200px;
          }
        }
        
        .intro {
          border: none;
          background: transparent;
          color: white;
        }
        
        .section-background {
          background: white;
          overflow: hidden;
          width: 100%;
          z-index:-1;
        }
        
        .section-background.section-image-1 {
          background-image: url("../images/wall-background-2.jpg");
          background-size: cover;
          opacity:1;
        }

        .section-row {
            display: flex;
            flex-flow: row;
            justify-content: center;
            margin: 0 auto;
            padding: 40px;
            max-width: 1000px;
            border: 1px solid rgb(218, 218, 218);
            background: rgb(250,250,250);
            border-radius: 3px;
        }

        .full-width-paragraph {
            margin: 0 auto;
            padding: 40px;
            max-width: 800px;
        }
        
        .info-paragraph {
            padding:  5px 40px 40px;
        }
        
        .full-width-image {
            width: 840px;
            height: auto;
            overflow: hidden;
            margin: 20px;
            padding: 0;
            background: transparent;
        }
        
        .responsive-image {
            width: 100%;
            height: auto;
            margin-top: 20px;
        }
        
        .responsive-image img {
            width: 100%;
            height: auto;
        }
        
        

        .full-width-image img {
            width: 100%;
        }
        
        .info-image {
            max-width: 280px;
            height: auto;
            margin: 0 auto;
        }

        .spacer {
            display: block;
            position:relative;
            width: 100%;
            height:74px;
            background: lightgray;
          }
          
          .page-header {
              width: 100vw;
              height: 120px;
              margin: 0;
              padding: 0;
              overflow: hidden;
          }
          
          .page-header img {
            width: 100%;
          }
          
          .top-info {
              position: absolute;
              top: 90px;
              left: 100px;
              margin: auto 0;
              padding: 10px;
              max-width: 800px;
              color: white;
          } 
          
          .top-info.fancy-font {
              color: white;
          }
          
          .intro-top-info {
              font-size: 1.25em;
              text-align: center;
              margin: auto;
              padding: 10px;
              max-width: 800px;
              color: white;
          }
          
          .intro-top-info.fancy-font {
              color: white;
          }
          
          .movie-box {
            position:relative;
            display: flex;
            flex-flow: row;
            justify-content: center;
            width: 500px;
            margin: 20px;
          }
          
          .splide {
            max-width:700px;
            background: gray;
          }
          
          .splide__slide img {
            width: 100%;
            height: auto;
          }
          
          .scroller-pic {
            margin: 60px auto 0;
            width: 30px;
            height: auto;
          }
          
          .scroller-pic img {
            width: 100%;
            height: 100%;
          }
          
          /* splide */
          
          .splide {
            background: rgb(250, 250, 250);
          }
            
          .splide__slide img {
            width: 100%;
            height: 100%;
            object-fit: contain;
          }
          
                    
          .video-row {
              display: flex;
              flex-flow:row wrap;
              justify-content: center;
              margin: 0 auto;
              padding: 0px 40px;
              max-width: 1000px;
              border: 1px dotted gray;
              background: rgb(249,249,249);
              border-radius: 1em;
          }
          
          .video-object {
            padding:56.25% 0 0 0;
            position:relative;
          }
          
          .video-object-square {
            padding:90% 0 0 0;
            position:relative;
          }
          
          .video-object-three-quarter {
            padding:75% 0 0 0;
            position:relative;
          }
          
          .video-object-container {
            /* min-width: 300px; */
            min-width: 500px;
            height: auto;
            border: 1px solid black;
            padding: 10px;
            margin: 10px;
          }
          
          .elearn-object-container {
            width: 700px;
            height: auto;
            padding: 10px;
            margin: 10px;
          }
          
          /* popup */
          
          .pop-container {
              display: none;
              opacity: 0;
              position: fixed;
              top: 0;
              bottom: 0;
              left: 0;
              right: 0;
              width: 100%;
              height: 100%;
              background: transparent;
              z-index: 100;
          }
          
          .pop-up-info {
              display: block;
              position: absolute;
              border: 1px solid gray;
              border-radius: 10px;
              padding: 100px;
              background: rgba(40,40,40,1);
              overflow: hidden;
              width: 60%;
              max-width: 800px;
              height: auto;
              text-align: left;
              cursor: pointer;
              font-size: 1em;
              z-index: 2;
              /* new */
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
          }
          
          .pop-up-info:after {
              content: 'x';
              display:block;
              position: absolute;
              color: white;
              float: right;
              font-size: 1em;
              top: 4px;
              right:12px;
              margin: 0;
              padding: 0; 
          }
          
          .pop-up-info p {
              font-size: 1em;
              margin: 0;
              padding: 10px;
              color: white;
          }
          
          .pop-up-info h1 {
              padding: 10px;
              color: gray;
          }
          
          .pop-cover {
              display: none;
              position: fixed;
              top: 0;
              bottom: 0;
              left: 0;
              right: 0;
              width: 100%;
              height: 100%;
              background: rgba(0, 0, 0, 0.95);
              backdrop-filter: blur(3px);
              z-index: 1;
          }
            
            
            
  /*  ----- Media Queries -----  */
  /*  -------------------------  */
  /*  ---------- xs -----------  */
  
  
  
  @media (max-width: 760px) {
    
    section {
        align-self: center;
        padding: 0;
        margin: 10px auto;
        width: 80%;
    }
    
    .section-row {
        flex-flow: column;
        align-items: center;
        margin: 0;
        padding: 20px;
    }
    
    .full-width-paragraph {
        margin: 0 auto;
        padding: 10px;
        max-width: 700px;
    }
    
    .full-width-image {
        max-width: 90%;
        margin: 20px;
    }
    
    .text-box, .text-box-small {
        width: 100%;
        height: auto;
        margin: 0;
        padding: 0;
        background: transparent;
    }
    
    .text-box p, .text-box-small p {
        margin: 10px 0;
        padding: 0;
    }
    
    .image-box {
        max-width: 100%;
    }
    
    .nav {
        display: none;  
    }
    
    .spacer {
        display: none;  
    }
    
    .top-info {
        top: 10px;
        left: 10px;
        margin: auto 0;
        padding: 10px;
        max-width: 700px;
    }
    
    .elearn-object-container {
      width: 500px;
    }
    
    .video-box {
      width: 100%;
      padding: 0;
      margin: 0 0 20px 0;
    }
    
    .video-object-container {
      min-width: 300px;
    }
    
    #fancy-elearn {
      font-size: 0.5em;
    }
    
    .wide-elearn {
      width: 400px;
    }
    
    .pop-up-info {
      width: 70%;
      padding: 20px;
    }
    
    /* splide */
    
    .splide {
           width: 65%;
           margin: auto;
    }

    
    
  }