<!--MAIN -->
<!--===============================================================-->
  <main class="main">

    <section class="row small-header-nav hidden-sm hidden-md hidden-lg small-nav">
        <?php include 'includes/content/navigation.php'; ?>
    </section>

   <section class="slides row"><!-- absolute-->

     <div class="slide" id="slide-1">
      <div class="slide__bg"></div>
        <div id="parents"></div><!--nav link-->
        <span id="top_link"></span>

         <div class="slide__text row">
             <div class="well panel_well one_edge_shadow row" >
                <?php include 'includes/content/panel1.php'; ?>
             </div>
        </div>
    </div>

    <div class="slide" id="slide-2">

    <div class="slide__bg one_edge_shadow">  </div>
    <div class="slide__content row">

    <div class="slide__testomonial">
        <section class="row">
                <?php include 'includes/content/embedded-video.php'; ?>
        </section>
    </div>
    </div>
    </div>
<!-- Panel3 ==========================================-->

    <div class="slide" id="slide-3">
        <div class="slide__bg"></div>

        <div class="slide__content row">

        <div class="slide__text">

            <div class="well panel_well one_edge_shadow row">
<span id="teachers"></span><!--nav link-->
                <?php include 'includes/content/panel2.php'; ?>
            </div>
        </div>
        </div>
    </div>

<!-- FORM==========================================-->
<div class="slide " id="slide-4">
    <div class="slide__bg"></div>
        <div class="slide__content row">

        <section class="footer slide__footer">
            <?php include 'includes/content/form.php'; ?>

        </section>
    </div>
</div>

</section>

</main>

/*FORM*/
   form{position: fixed; bottom: 0;left: 0; width: 100%;background-color: black;display: block;}

/* PARALLAX STYLES
--------------------------------------------- */
.slides{overflow: hidden}

.slide {
    position: relative;/*to background*/
}


/* slide background */
.slide__bg {
  position: absolute;/*in relation to slide container*/
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;/*bottom layer*/;
}
#slide-1 .slide__bg {
    background-color: darkcyan;
}
/*non critical styling*/
#slide-2 .slide__bg {
    background-color: darkmagenta;
}
/*non critical styling*/
#slide-3 .slide__bg {
  background-color: darkgoldenrod
}
/*non critical styling*/
#slide-4 .slide__bg {
    background-color: darkblue;
}






 /*foreground*/
.slides {
    position: absolute;/*position container in window*/
    width: 100%;/*fill container*/
    height: 100%;/*fill container*/
    perspective: 400px;/*dictates size of slide--bg*/
    overflow-x: hidden;/*hide scroll bar*/
    overflow-y: auto;/*hide scroll bar*/
    }

.slides::-webkit-scrollbar {
    display: none;/*hide scroll bar*/
}

/* Only apply to larger screens
--------------------------------------------- */
@media screen and (min-width: 768px) {

  /* parallax */
  @supports ((perspective: 1px) and (not (-webkit-overflow-scrolling: touch))) {
    body {
      transform: translateZ(0px); /* Fix paint issues in Edge && Safari H/W acceleration */
    }


.slide, .slide__content {
      transform-style: preserve-3d;/* maintain perspective effect*/
    }

  .slide__text {
      transform: translateZ(60px) scale(.7);/*set text distance from page and scale*/
      transform-origin: 50% 50%;/*position of text on slide*/
        /*background-color: aqua;   */
      background-color: red;
      height: 800px;
    }


.slide__testomonial {
      transform: translateZ(80px) scale(.7);/*set text distance from page and scale*/
      transform-origin: 50% 50%;/*position of text on slide*/
        background-color: aqua;
    height: 800px;
    }

.slide__footer {
    transform: translateZ(60px) scale(.7);/*set text distance from page and scale*/
    transform-origin: 50% 50%;/*position of text on slide*/
    background-color: green;
    height: 400px;
    }



    .slide:nth-child(2n) {
      z-index: 1; /* ensure EVERY OTHER SLIDE overlays correctly */
    }

    .slide:nth-child(2n+1):not(:first-child) .slide__bg {
      top: -16%;/*SELECTS EVERY ODD SLIDE NOT INCLUDING FIRST - extend slide__bg to meet next bg to fill gap*/
         bottom: -50%;/*SELECTS EVERY ODD SLIDE NOT INCLUDING
    }

    .slide:nth-child(2n) .slide__bg {
      transform: translateZ(59px) scale(.85);/*SELECTS EVERY EVEN SLIDE AFTER THE FIRST - set background distance from page and scale to match window*/
    }

    .slide:nth-child(2n+1):not(:last-child) .slide__bg {
      bottom: -50%;/*SELECTS EVERY ODD SLIDE NOT INCLUDING LAST extend slide__bg to meet next bg to fill gap*/
    }


    }