Modal Overlay

HTML

              
                <!-- START Print Page Contnet ============== v00.53.56 ============== -->

<div id="section-content-djax" class="updatable-w-djax"><!-- START section-content-djax  -->

    <div id="section-hero-djax-image" class="section-hero-djax-image-print">
      <!-- CSS Sets Background Image -->
      <div id="closeAndSendBack" class="image-print-crop">
        <!-- CSS Sets Background Image  -->
          <div class="image-print-crop-hover imageVisibility">
            <!-- CSS Sets Background Image  -->
          </div>
      </div>
    </div>

    <div id="section-content-print" class="row small-collapse medium-collapse large-collapse justifyContent handwritten"> <!-- START ROW  -->

        
          <div id="modalPrintAdvil" class="boxFrameOuter small-12 medium-6 large-4 columns healthcare">
            <div id="boxFrame1" class="boxFrame">
              <div class="innerFrame1"></div>
              <div class="innerFrame2"></div>
              <div class="innerFrame3"></div>
              <span class="clientLabel handwritten"><p>Advil</p></span>

              <img class="fadeMe" src="http://hainis.net/dev/assets/img/modalPrintAdvil1a.jpg" alt="Advil Blah Blah Blah Ad">
            </div>
          </div>

          <div id="modalPrintAmex" class="boxFrameOuter small-12 medium-6 large-4 columns healthcare">
            <div id="boxFrame2" class="boxFrame">
              <div class="innerFrame1"></div>
              <div class="innerFrame2"></div>
              <div class="innerFrame3"></div>
              <span class="clientLabel handwritten"><p>Amex</p></span>

              <img class="fadeMe" src="http://hainis.net/dev/assets/img/modalPrintAdvil1a.jpg" alt="Amex Ad">
            </div>
          </div>
        

          <div id="modalPrintAmtrak" class="boxFrameOuter small-12 medium-6 large-4 columns healthcare">
            <div id="boxFrame3" class="boxFrame">
              <div class="innerFrame1"></div>
              <div class="innerFrame2"></div>
              <div class="innerFrame3"></div>
              <span class="clientLabel handwritten"><p>Amtrak</p></span>

              <img class="fadeMe" src="http://hainis.net/dev/assets/img/modalPrintAdvil1a.jpg" alt="Amtrak Ad">
            </div>
          </div>

      </div><!-- END ROW  -->

    </div><!-- END section-content-djax  -->

<!-- END Print Page Contnet ======================================= -->

CSS

              
                /* *************************************************************** */
/* ******************* Custom Styles v00.53.55 ******************* */
/* *************************************************************** */


/* ***************************************** */
/* *************** Font Stack ************** */
/* ***************************************** */


.handwritten {
    font-family: Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #000;
}

.handwritten p {
    font-size: 1em;}

      /* ********************************* */
      @media all and (max-height: 200px) {
      .handwritten p {
        font-size: .75em;
        }
      }

      @media all and (min-height: 201px) and (max-height: 400px) {
      .handwritten p {
        font-size: .85em;
        }
      }

      @media all and (min-height: 401px) and (max-height: 600px) {
      .handwritten p {
        font-size: .90em;
        }
      }

      @media all and (min-height: 601px) {
      .handwritten p {
        font-size: 1.0em;
        }
      }



/* *********************** */
/* ***** Main Styles ***** */
/* *********************** */

body {
  overflow: hidden;
  margin: 0;
  padding: 0;
  background-color: #afafaf; 
}



/* ******************************************************* */
/* ************** Section Content Container ************** */
/* ******** Dynamically Loaded By GSAP - Pjax/dJax ******* */
/* ******************************************************* */

.hideMe {
  display: none; /* Set with GreenSock */
}


.showMe {
  display: block;
}


#closeSection {
  position: fixed;
  position: -ms-device-fixed;
  display: block; /* GreenSock Sets Display */
  cursor: pointer;
  top: 0;
  right: 0;
  width: 60px;
  height: 60px;
  margin-top: 5px;
  margin-right: 7px;
  background-image: url('http://hainis.net/dev/assets/img/closeButton-base.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: none;
  border: none;
}

.closeSectionModal {
    position: fixed;
    position: -ms-device-fixed;
    display: block;
    opacity: 1;
    cursor: pointer;
    top: 0;
    right: 0;
    border: 1px solid #114469;
    color: #114469;
     -webkit-transition: background-color .25s ease-out;
    -moz-transition: background-color .25s ease-out;
    -o-transition: background-color .25s ease-out;
    transition: background-color .25s ease-out;
    z-index: 999;
}


#closeSection:hover, 
#closeSection:focus, 
#closeSection:active {
  background-image: url('http://hainis.net/dev/assets/img/closeButton-hover.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}
      
      @media all and (min-width: 401px) {
      #closeSection {
          margin-top: 8px;
          margin-right: 10px;
          width: 70px;
          height: 70px;
        }
      }


      @media all and (max-width: 400px) {
      .closeSectionModal {
          margin-top: 18px;
          margin-right: 19px;
          width: 37px;
          height: 37px;
          font-size: 2em;
          padding-bottom: .16em;
        }
      .modalNav ul{
          margin-top: 23px;
        }
      .modalNav ul li {
          margin-right: 10px;
        }
      }


      @media all and (min-width: 401px) {
      .closeSectionModal {
          margin-top: 25px;
          margin-right: 25px;
          width: 39px;
          height: 39px;
          font-size: 1.75em;
          padding-bottom: .16em;
        }
      .modalNav ul{
          margin-top: 23px;
        }
      .modalNav ul li {
          margin-tright: 15px;
        }
      }


.closeSectionModal:hover, 
.closeSectionModal:focus, 
.closeSectionModal:active {
  background-color: #08385d;
  border: 1px solid #C00000;
}


#section-wrap {
  position: fixed;
  position: -ms-device-fixed;
  display: none; /* GreenSock Sets Display */
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  overflow: scroll;
  z-index: 100;
}


#section-hero-djax-image {
  position: relative;
  top: 50%;
  left: 50%;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: auto;
  transform: translate(-50%, -50%);
  /* background-image: url(see javascript); */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}


.section-hero-djax-image-print {
  background-image: url('http://hainis.net/dev/assets/img/marker-pad-btm.png');
}


.noTransform {
  -webkit-transform: none;
  transform: none;
}

#section-content-djax {
  position: absolute;
  display: Block; /* GreenSock Sets Display */
  width: 100vw;
  height: 100vh;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: scroll;
  /* background-image set by GreenSock */
  background-size: 50%;
  background-repeat: repeat;
  background-position: top left;
}



.section-content-wrap{
  position: absolute;
  width: 100%;
}


/* Dynamically Created Div with GSAP */
#section-content-print,
#section-content-broadcast,
#section-content-outdoor,
#section-content-online {
  position: absolute;
  max-width: 800px;
  left: 50%;
  transform: translate(-50%, 0%);
  padding-left: 6%;
  padding-right: 3%;
  margin-top: 5%;
}

            /* ************ Center Content ************* */      
            @media all and (max-width: 40em) {
            #section-content-print,
            #section-content-broadcast,
            #section-content-outdoor,
            #section-content-online {
                padding-left: 5%;
                padding-right: 5%;
              }
            }


            /* ************** Max Height 200px ************** */
            @media all and (max-height: 200px)
            and (max-width: 500px) {
            #section-hero-djax-image,
            #section-content-print,
            #section-content-broadcast,
            #section-content-outdoor,
            #section-content-online  {
              width: 40vw;
              height: 90vh; 
              }
            #section-content-print {
              margin-top: 4%;
              }
            #section-content-broadcast {
              margin-top: 4%;
              }
            #section-content-outdoor {
              margin-top: 4%;
              }
            #section-content-online {
              margin-top: 4%;
              }
            }

            @media all and (max-height: 200px) 
            and (min-width: 501px) 
            and (max-width: 800px) {
            #section-hero-djax-image,
            #section-content-print,
            #section-content-broadcast,
            #section-content-outdoor,
            #section-content-online {
              width: 70vw;
              height: 90vh; 
              }
            #section-content-print {
              margin-top: .5%;
              }
            #section-content-broadcast {
              margin-top: .5%;
              }
            #section-content-outdoor {
              margin-top: 1%;
              }
            #section-content-online {
              margin-top: .5%;
              }
            }

            @media all and (max-height: 200px) 
            and (min-width: 801px) 
            and (max-width: 900px) {
            #section-hero-djax-image,
            #section-content-print,
            #section-content-broadcast,
            #section-content-outdoor,
            #section-content-online {
              width: 90vw;
              height: 90vh; 
              }
            #section-content-print {
              margin-top: 1%;
              }
            #section-content-broadcast {
              margin-top: 1%;
              }
            #section-content-outdoor {
              margin-top: 2%;
              }
            #section-content-online {
              margin-top: 1%;
              }
            }

            @media all and (max-height: 200px) 
            and (min-width: 901px)
            and (max-width: 1024px) {
            #section-hero-djax-image,
            #section-content-print,
            #section-content-broadcast,
            #section-content-outdoor,
            #section-content-online {
              width: 90vw;
              height: 90vh; 
              }
            #section-content-print {
              margin-top: 2%;
              }
            #section-content-broadcast {
              margin-top: 2%;
              }
            #section-content-outdoor {
              margin-top: 3%;
              }
            #section-content-online {
              margin-top: 2%;
              }
            }

            @media all and (max-height: 200px) 
            and (min-width: 1025px) {
            #section-hero-djax-image,
            #section-content-print,
            #section-content-broadcast,
            #section-content-outdoor,
            #section-content-online {
              width: 90vw;
              height: 90vh;
              }
            #section-content-print {
              margin-top: 1%;
              }
            #section-content-broadcast {
              margin-top: 1%;
              }
            #section-content-outdoor {
              margin-top: 2%;
              }
            #section-content-online {
              margin-top: 1%;
              }
            }


            /* ************** Min Height 201px ************** */
            @media all and (min-height: 201px) 
            and (max-width: 500px) {
            #section-hero-djax-image,
            #section-content-print,
            #section-content-broadcast,
            #section-content-outdoor,
            #section-content-online {
              width: 80vw;
              height: 80vh; 
              }
            #section-content-print {
              margin-top: 3%;
              }
            #section-content-broadcast {
              margin-top: 3%;
              }
            #section-content-outdoor {
              margin-top: 7%;
              }
            #section-content-online {
              margin-top: 3%;
              }
            }

            @media all and (min-height: 201px) 
            and (min-width: 501px) 
            and (max-width: 800px) {
            #section-hero-djax-image,
            #section-content-print,
            #section-content-broadcast,
            #section-content-outdoor,
            #section-content-online {
              width: 80vw;
              height: 80vh; 
              }
            #section-content-print {
              margin-top: 4%;
              }
            #section-content-broadcast {
              margin-top: 4%;
              }
            #section-content-outdoor {
              margin-top: 8%;
              }
            #section-content-online {
              margin-top: 4%;
              }
            }

            @media all and (min-height: 201px) 
            and (min-width: 801px) 
            and (max-width: 900px) {
            #section-hero-djax-image,
            #section-content-print,
            #section-content-broadcast,
            #section-content-outdoor,
            #section-content-online {
              width: 80vw;
              height: 80vh; 
              }
            #section-content-print {
              margin-top: 3%;
              }
            #section-content-broadcast {
              margin-top: 4%;
              }
            #section-content-outdoor {
              margin-top: 6%;
              }
            #section-content-online {
              margin-top: 3%;
              }
            }

            @media all and (min-height: 201px) 
            and (min-width: 901px)
            and (max-width: 1024px) {
            #section-hero-djax-image,
            #section-content-print,
            #section-content-broadcast,
            #section-content-outdoor,
            #section-content-online {
              width: 80vw;
              height: 80vh; 
              }
            #section-content-print {
              margin-top: 3%;
              }
            #section-content-broadcast {
              margin-top: 4%;
              }
            #section-content-outdoor {
              margin-top: 5%;
              }
            #section-content-online {
              margin-top: 4%;
              }
            }

            @media all and (min-height: 201px) 
            and (min-width: 1025px) {
            #section-hero-djax-image,
            #section-content-print,
            #section-content-broadcast,
            #section-content-outdoor,
            #section-content-online {
              width: 80vw;
              height: 80vh;
              }
            #section-content-print {
              margin-top: 3%;
              }
            #section-content-broadcast {
              margin-top: 3%;
              }
            #section-content-outdoor {
              margin-top: 3.5%;
              }
            #section-content-online {
              margin-top: 3%;
              }
            }


            /* ************** Min Height 401px ************** */
            @media all and (min-height: 401px) 
            and (max-width: 500px) {
           #section-hero-djax-image,
           #section-content-print,
            #section-content-broadcast,
            #section-content-outdoor,
            #section-content-online {
              width: 70vw;
              height: 70vh; 
              }
            #section-content-print {
              margin-top: 7%;
              }
            #section-content-broadcast {
              margin-top: 7%;
              }
            #section-content-outdoor {
              margin-top: 14%;
              }
            #section-content-online {
              margin-top: 9%;
              }
            }

            @media all and (min-height: 401px) 
            and (min-width: 501px) 
            and (max-width: 800px) {
            #section-hero-djax-image,
            #section-content-print,
            #section-content-broadcast,
            #section-content-outdoor,
            #section-content-online {
              width: 70vw;
              height: 70vh;  
              }
            #section-content-print {
              margin-top: 9%;
              }
            #section-content-broadcast {
              margin-top: 9%;
              }
            #section-content-outdoor {
              margin-top: 11%;
              }
            #section-content-online {
              margin-top: 11%;
              }
            }

            @media all and (min-height: 401px)
            and (min-width: 801px) 
            and (max-width: 900px) {
            #section-hero-djax-image,
            #section-content-print,
            #section-content-broadcast,
            #section-content-outdoor,
            #section-content-online {
              width: 70vw;
              height: 70vh;  
              }
            #section-content-print {
              margin-top: 7%;
              }
            #section-content-broadcast {
              margin-top: 8%;
              }
            #section-content-outdoor {
              margin-top: 9%;
              }
            #section-content-online {
              margin-top: 8%;
              }
            }

            @media all and (min-height: 401px) 
            and (min-width: 901px)
            and (max-width: 1024px) {
            #section-hero-djax-image,
            #section-content-print,
            #section-content-broadcast,
            #section-content-outdoor,
            #section-content-online {
              width: 70vw;
              height: 70vh;  
              }
            #section-content-print {
              margin-top: 7%;
              }
            #section-content-broadcast {
              margin-top: 7%;
              }
            #section-content-outdoor {
              margin-top: 7.5%;
              }
            #section-content-online {
              margin-top: 7%;
              }
            }

            @media all and (min-height: 401px) 
            and (min-width: 1025px) {
            #section-hero-djax-image,
            #section-content-print,
            #section-content-broadcast,
            #section-content-outdoor,
            #section-content-online {
              width: 70vw;
              height: 70vh; 
              }
            #section-content-print {
              margin-top: 5%;
              }
            #section-content-broadcast {
              margin-top: 5%;
              }
            #section-content-outdoor {
              margin-top: 6%;
              }
            #section-content-online {
              margin-top: 4.5%;
              }
            }

 
            /* ************** Min Height 601px ************** */
            @media all and (min-height: 601px) 
            and (max-width: 500px) {
            #section-hero-djax-image,
            #section-content-print,
            #section-content-broadcast,
            #section-content-outdoor,
            #section-content-online {
              width: 65vw;
              height: 65vh; 
              }
            #section-content-print {
              margin-top: -6%;
              }
            #section-content-broadcast {
              margin-top: -5%;
              }
            #section-content-outdoor {
              margin-top: -1%;
              }
            #section-content-online {
              margin-top: -4%;
              }
            }

            @media all and (min-height: 601px) 
            and (min-width: 501px) 
            and (max-width: 600px) {
            #section-hero-djax-image,
            #section-content-print,
            #section-content-broadcast,
            #section-content-outdoor,
            #section-content-online {
              width: 65vw;
              height: 65vh; 
              }
            #section-content-print {
              margin-top: 3%;
              }
            #section-content-broadcast {
              margin-top: 4%;
              }
            #section-content-outdoor {
              margin-top: 14%;
              }
            #section-content-online {
              margin-top: 6%;
              }
            }

            @media all and (min-height: 601px) 
            and (min-width: 601px) 
            and (max-width: 700px) {
            #section-hero-djax-image,
            #section-content-print,
            #section-content-broadcast,
            #section-content-outdoor,
            #section-content-online {
              width: 65vw;
              height: 65vh; 
              }
            #section-content-print {
              margin-top: 6%;
              }
            #section-content-broadcast {
              margin-top: 6%;
              }
            #section-content-outdoor {
              margin-top: 16%;
              }
            #section-content-online {
              margin-top: 9%;
              }
            }

            @media all and (min-height: 601px) 
            and (min-width: 701px) 
            and (max-width: 800px) {
            #section-hero-djax-image,
            #section-content-print,
            #section-content-broadcast,
            #section-content-outdoor,
            #section-content-online {
              width: 65vw;
              height: 65vh; 
              }
            #section-content-print {
              margin-top: 8%;
              }
            #section-content-broadcast {
              margin-top: 8%;
              }
            #section-content-outdoor {
              margin-top: 18%;
              }
            #section-content-online {
              margin-top: 11%;
              }
            }

             @media all and (min-height: 601px) 
            and (min-width: 801px) 
            and (max-width: 900px) {
            #section-hero-djax-image,
            #section-content-print,
            #section-content-broadcast,
            #section-content-outdoor,
            #section-content-online {
              width: 65vw;
              height: 65vh; 
              }
            #section-content-print {
              margin-top: 10%;
              }
            #section-content-broadcast {
              margin-top: 10%;
              }
            #section-content-outdoor {
              margin-top: 15%;
              }
            #section-content-online {
              margin-top: 13%;
              }
            }

            @media all and (min-height: 601px) 
            and (min-width: 901px)
            and (max-width: 1024px) {
            #section-hero-djax-image,
            #section-content-print,
            #section-content-broadcast,
            #section-content-outdoor,
            #section-content-online {
              width: 65vw;
              height: 65vh; 
              }
            #section-content-print {
              margin-top: 10%;
              }
            #section-content-broadcast {
              margin-top: 10%;
              }
            #section-content-outdoor {
              margin-top: 14%;
              }
            #section-content-online {
              margin-top: 12%;
              }
            }

            @media all and (min-height: 601px) 
            and (min-width: 1025px)
            and (max-width: 1124px) {
            #section-hero-djax-image,
            #section-content-print,
            #section-content-broadcast,
            #section-content-outdoor,
            #section-content-online {
              width: 65vw;
              height: 65vh; 
              }
            #section-content-print {
              margin-top: 9%;
              }
            #section-content-broadcast {
              margin-top: 9%;
              }
            #section-content-outdoor {
              margin-top: 13%;
              }
            #section-content-online {
              margin-top: 10%;
              }
            }

            @media all and (min-height: 601px) 
            and (min-width: 1125px)
            and (max-width: 1224px)  {
            #section-hero-djax-image,
            #section-content-print,
            #section-content-broadcast,
            #section-content-outdoor,
            #section-content-online {
              width: 65vw;
              height: 65vh; 
              }
            #section-content-print {
              margin-top: 9%;
              }
            #section-content-broadcast {
              margin-top: 9%;
              }
            #section-content-outdoor {
              margin-top: 11%;
              }
            #section-content-online {
              margin-top: 10%;
              }
            }

            @media all and (min-height: 601px) 
            and (min-width: 1225px)
            and (max-width: 1324px)  {
            #section-hero-djax-image,
            #section-content-print,
            #section-content-broadcast,
            #section-content-outdoor,
            #section-content-online {
              width: 65vw;
              height: 65vh; 
              }
            #section-content-print {
              margin-top: 9%;
              }
            #section-content-broadcast {
              margin-top: 9%;
              }
            #section-content-outdoor {
              margin-top: 10%;
              }
            #section-content-online {
              margin-top: 10%;
              }
            }

            @media all and (min-height: 601px) 
            and (min-width: 1325px)
            and (max-width: 1424px)  {
            #section-hero-djax-image,
            #section-content-print,
            #section-content-broadcast,
            #section-content-outdoor,
            #section-content-online {
              width: 65vw;
              height: 65vh; 
              }
            #section-content-print {
              margin-top: 8%;
              }
            #section-content-broadcast {
              margin-top: 9%;
              }
            #section-content-outdoor {
              margin-top: 9%;
              }
            #section-content-online {
              margin-top: 9%;
              }
            }

            @media all and (min-height: 601px) 
            and (min-width: 1425px) {
            #section-hero-djax-image,
            #section-content-print,
            #section-content-broadcast,
            #section-content-outdoor,
            #section-content-online {
              width: 65vw;
              height: 65vh; 
              }
            #section-content-print {
              margin-top: 7%;
              }
            #section-content-broadcast {
              margin-top: 8%;
              }
            #section-content-outdoor {
              margin-top: 8%;
              }
            #section-content-online {
              margin-top: 8%;
              }
            }






/* *************************************************** */
/* ************** Box Frames For Photos ************** */
/* *************************************************** */
.justifyContent {
  text-align: center;
  font-size: 1em; /* IE 9 & 10 don't like font-size: 0; */
}

.justifyContent div {
  display: inline-block;
}


.justifyContent:after {
  content: '';
  width: 100%; /* Ensures there are at least 2 lines of text, so justification works */
  display: inline-block;
}

.justifyContent div {
  float: none;
}

#selectPrintAdvil {
  cursor: pointer;
}

.clientLabel {
  display: block;
  opacity: 1;
}


.boxFrame {
  position: relative;
  background-color: none;
  cursor: pointer;
  width: 100%;
  height: auto;
  padding: 3%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  max-width: 1150px;
  line-height: 0;
}


.innerFrame1 {
  position: absolute;
  background-color: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('http://hainis.net/dev/assets/img/boxFrame.gif');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: none;
}

.innerFrame2,
.innerFrame3 {
  position: absolute;
  background-color: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background-image: url('SET BY GSAP'); */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: none;
}


.boxFrame span {
  position: absolute;
  top: 0;
  right: 0;
  background-color: black;
  height: 1.5em;
  margin-top: .20em;
  margin-right: .12em;
  padding-top: .075em;
  padding-bottom: .25em;
  padding-left: .35em;
  padding-right: .35em;
  transform: skewX(-10deg);
}



      /* ********************************* */
      @media all and (max-width: 40em) {
      .boxFrame span {
        height: 1.7em;
        line-height: 1.7;
        }
        .boxFrameOuter, {
        width: 88%;
        }
      }

      @media all and (max-width: 40em) and (max-height: 40em) {
      .boxFrame span {
        height: 1.2em;
        line-height: 1.7;
        }
      }

      @media all and (max-width: 40em) and (max-height: 64em) {
      .boxFrame span {
        height: 1.5em;
        line-height: 1.5;
        }
        .boxFrameOuter, {
        width: 88%;
        }
      }

      @media all and (min-width: 40.063em) and (max-width: 64em) {
      .boxFrameOuter span {
        height: 1.5em;
        line-height: 1.5;
        }
        .boxFrameOuter, {
        width: 88%;
        }
      }

      @media all and (min-width: 90.063em) {
      .boxFrameOuter span {
        height: 1.5em;
        line-height: 1.5;
        }
        .boxFrameOuter, {
        width: 100%;
        }
      }


.boxFrame p {
  text-align: center;
  -webkit-text-stroke: .25px white;
  color: white;
  text-shadow:
   -.25px -.25px 0 #000,  
    .25px -.25px 0 #000,
    -.25px .25px 0 #000,
     .25px .25px 0 #000;
  letter-spacing: .05em;
}

.justifyContent .columns:last-child:not(:first-child) {
    float: none;
}

      /* ********************************* */      
      @media all and (max-width: 40em) {
      .boxFrameOuter {
        width: 100%;
        margin: auto;
        margin-bottom: .75rem;
        }
      }

      @media all and (min-width: 40.063em) and (max-width: 90em) {
      .boxFrameOuter {
        width: 45%;
        margin-right: .75rem;
        margin-bottom: .75rem;
        }
      }

      @media all and (min-width: 90.063em) {
      .boxFrameOuter {
        width: 31%;
        margin-right: .75rem;
        margin-bottom: .75rem;
        }
      }


/* *********************************************** */
/* ***** User Selected Client Work and Modal ***** */
/* *********************************************** */

.overlay {
  display: none;  /* GreenSock Sets Display */
  position: fixed;
  position: -ms-device-fixed;
  width: 100vw;
  height: 100vh;
  width: 100%;
  height: 100%;
  background-image: url('http://hainis.net/dev/assets/img/seamless-paper-texture-drk-blu.jpg');
  background-size: 50%; /* Note Media query controls size - see texture-paper-bkg class in Main Styles */
  background-repeat: repeat;
  background-position: top left;
  background-color: #090E38;
  z-index: 101;
}

          @media all and (min-width: 900px) and (max-width: 1000px) {
          #section-content-djax,
          .overlay,
          .texture-paper-bkg {
            background-size: 30%;
            }
          }

          @media all and (min-width: 1001px) {
          #section-content-djax,
          .overlay,
          .texture-paper-bkg {
            background-size: 20%;
            }
          }

.clone {
  position: absolute;
  display: none;
  opacity: 0;
  z-index: 102;
}

 /* ********************************* */      
      @media all and (max-width: 40em) {
      .clone {
        padding: 14%;
        }
      }

      @media all and (min-width: 40.063em) and (max-width: 90em) {
      .clone {
        padding: 7%;
        }
      }

      @media all and (min-width: 90.063em) {
      .clone {
        padding: 0%;
        }
      }

#cloned1 {
  position: absolute;
  display: none;
  opacity: 0;
  max-width: 1150px;
  z-index: 102;
}


.selectedModal {
  position: absolute;
  display: block;
  opacity: 1;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 100vh;
  transform: translate(-50%, -50%);
  max-width: 1150px;
  background-image: none;
  padding: 1.5rem;
  z-index: 103;
}


a.modalLink:link,
.selectedModal p, {
  font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
  font-weight: 400;
  font-style: normal;
  color: #4f81a5;
}

a.modalLink:visited {
  color: #325A73;
}

a.modalLink:hover {
  color: #55788C;
}

.selectedModal h3 {
  color: #4f81a5;
  line-height: .85;
  margin-bottom:-.15rem;
}

/* .closeSectionModal Button Style above with  */




/* ****************************************** */
/* ***************** Modal ****************** */
/* ****************************************** */


a {
    text-decoration: none;
}

.modalNav {
    position: fixed;
    top: 50%;
    left: 0;
    width: 45px;
    transform: translateY(-50%);
    z-index: 999;
}

.modalNav ul {
    list-style: none;
    text-align: left;
    //margin-top: 25px;
}

.modalNav ul li {
    display: block;
}

.modalNav ul li:last-child {
    margin-right: 0;
}

#back-to-tutorial {
    margin-left: 100px;
}

.modalNav a {
    position: relative;
    top: 0;
    font-weight: normal;
    text-align: center;
    border: 1px solid #114469;
    border-radius: 50%;
    background-color: none;
    color:#114469;
}


.modalNav a.active {
  background-color: #08385d;
  border: 1px solid #C00000;
}

      @media all and (max-width: 400px) {
      .modalNav ul{
          margin-top: 18px;
        }
      .modalNav ul li {
          margin-right: 10px;
          margin-bottom: 10px;
        }
      .modalNav a {
          padding: 0px 6px;
          font-size: 14px;
        }
      }


      @media all and (min-width: 401px) {
      .modalNav ul{
          margin-top: 23px;
        }
      .modalNav ul li {
          margin-right: 15px;
          margin-bottom: 15px;
        }
      .modalNav a {
          padding: 0px 8px;
          font-size: 18px;
        }
      }

.slides-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 10;
}

.slide {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.slide .centered {
    position: absolute;
    display: block;
    opacity: 1;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: auto;
    transform: translate(-50%, -50%);
    max-width: 1150px;
    background-image: none;
    padding: 1.5rem;
}

      /* ********************************* */      
      @media all and (max-width: 40em) {
      .slide .centered {
        padding: 14%;
        }
      }

      @media all and (min-width: 40.063em) and (max-width: 90em) {
      .slide .centered {
        padding: 7%;
        }
      }

      @media all and (min-width: 90.063em) {
      .slide .centered {
        padding: 0%;
        }
      }

.go-prev, .go-next {
    cursor: pointer;
    font-weight: bold;
    text-decoration: underline;
}


a.slide:link,
.slide p {
  font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
  font-weight: 400;
  font-style: normal;
  color: #4f81a5;
  padding-left: 3%;
  padding-right: 3%;
  text-align: left;
  line-height: 1.5;
}

.slide p, {
  color: #4f81a5;
}

a.slide:visited {
  color: #325A73;
}

a.slide:hover {
  color: #55788C;
}

.slide h1,
.slide h2,
.slide h3 {
  color: #4f81a5;
  line-height: 1;
  margin-bottom: 0; 
  padding-bottom: 0 !important;
  text-align: left;
  padding: 3%;
}

.slide h1 {
  font-size: 2em;
}

JS

              
                // ==================================================================
// ============== Section Content Javascript v00.53.56 ==============
// ==================================================================

"use strict";

//  Modal Vars   =============================================================================
var vw = $(window).width();
var vh = $(window).height();

var body = $("body");

var boxFrame = $(".boxFrame");
var boxFrameOuter = $(".boxFrameOuter");

var closeModal = $("#closeModal");

var overlay = $("<div class='overlay updatable-w-djax'></div>");
var overlayDiv = $(".overlay");

var clone = null;
var target = null;
var currentOriginalLocation = null;
var tlUserSelected = null; // Modal TweenMax Timeline
var selectedModal = $(".selectedModal");
var cloned1 = $("#cloned1");

var $this = $(this);

var closeSectionModal = $(".closeSectionModal");


// Click Function for Modal Selection
boxFrame.on("click", function(e) {
   if(!e) {
        var e = window.event;
    }
    var ele = e.target || e.srcElement;

  // pass the var e value to openTile
  openTile(e);
  console.log("boxFrameOuter Clicked / Cloned");

}); // END on Click




$(window).resize(resizeModal);

function resizeModal(resizeModal) {
  var cloneBackgroundImage = cloneBackgroundImage;

  // If there's a timeline, rebuild it
   if (tlUserSelected) {
    var cloneBackgroundImage = cloneBackgroundImage;
    var progress = tlUserSelected.progress();
    var reversed = tlUserSelected.reversed();
    // tlUserSelected.kill();
    tlUserSelected.seek(0).clear();
    buildTimelineUserSelected(progress, reversed, cloneBackgroundImage);
  } // END if

}; // END Window Resize



// ===========================================================================
// ======== Client Work Selectd by User Modal Timeline and Functions =========
// ===========================================================================


function buildTimelineUserSelected(progress, reversed, cloneBackgroundImage) { 

var vw = $(window).width();
var vh = $(window).height();

var cloneBackgroundImage = cloneBackgroundImage;

var rect = getPosition(target[0]);
console.log( rect );
  
var clientLabel = $(".clone").find("span"); // For some reason global var not being passed in
var innerFrame1 = $(".clone").find(".innerFrame1");
var innerFrame2 = $(".clone").find(".innerFrame2");
var innerFrame3 = $(".clone").find(".innerFrame3");
var fadeMe = $(".clone").find(".fadeMe"); // For some reason global var not being passed in
var boxFrame = $(".clone").find(".boxFrame"); // For some reason global var not being passed in


  TweenMax.set(closeSectionModal, { className: "closeSectionModal", opacity: 1, display: "block" });
  TweenMax.set(overlay, { opacity: 0, display: "none" });
  TweenMax.set(boxFrame, { cursor: "default" });
  TweenMax.set(innerFrame1, { opacity: 1, display: "block" });
  TweenMax.set(innerFrame2, { 
    opacity: 0, 
    display: "block",
    cursor: "default",
    backgroundImage: "url(http://hainis.net/dev/assets/img/modalPrintAdvil1b.jpg)", // cloneBackgroundImage,
    backgroundSize: "contain",
    backgroundRepeat: "no-repreat",
    backgroundPosition: "center center",  
  });

  TweenMax.set(innerFrame3, { 
    opacity: 0, 
    display: "block",
    cursor: "default",
    backgroundImage: "url(http://hainis.net/dev/assets/img/modalPrintAdvil1c.jpg)", // cloneBackgroundImage,
    backgroundSize: "contain",
    backgroundRepeat: "no-repreat",
    backgroundPosition: "center center",  
  });

  TweenMax.set(clientLabel, { opacity: 1, display: "block" });
  TweenMax.set(clone, rect, { opacity: 1, display:"block", className:"boxFrameOuter small-12 medium-6 large-4 columns clone handwritten" });


  TweenMax.set(fadeMe, {
                          opacity: 1, 
                          display: "block",
                          onStart: function() {
                              // Do Something
                                $(".fadeMe").attr("src", "http://hainis.net/dev/assets/img/modalPrintAdvil1c.jpg");
                           }, // END onStart
                         });

  tlUserSelected = new TimelineMax({ onReverseComplete: removeClone })
          
          .to(overlay, .75, { 
              opacity: 1, 
              display: "block",
               onStart: function() {
                  // Do Something
                     
               }, // END onStart
               onComplete: function() {
                  // Do Something

               }, // END onComplete
               onReverseComplete: function () {
                  // Remove Clone From DOM
                  clone.remove();
               
                  TweenMax.set(boxFrame, { cursor: "pointer" });

                }, // END onReverseComplete
            }, 0, "overlay") // END overlay
          
          .to(clone, 1.0, { 
            opacity: 1, 
            display:"block",
            left: "50%", 
            top: "50%",
            xPercent: "-50%",
            yPercent: "-50%",
            width: "100vw",
            height: "auto",
            maxWidth: "1150px",
            autoRound: false,
            // ease:Power2.easeInOut, // ORIGINAL Ease In/Out
            ease:Power0.easeNone,
            onComplete: function() {
                  // Do Something
                              
               }, // END onComplete
            onReverseComplete: function () {
                  // Remove Clone From DOM
                  $(".clone").css("display", "none");
                  $(".clone").remove();

                }, // END onReverseComplete
             }, .25, "lineArt") // END clone

          .to(innerFrame1, 0.25, { opacity: 0, display: "none" }, "overlay-=0.75")
          .to(clientLabel, 0.25, { opacity: 0, display: "none" }, "overlay-=0.75")
          .to(boxFrame, 0.5, { padding: "0" }, 0)
          .to(closeSectionModal, 0.5, { className: "closeSectionModal", opacity: 1, display: "block" }, .25)
          .to(innerFrame2, 1.0, { opacity: 1 }, "lineArt+=0.25")
          .to(innerFrame3, 1.0, { opacity: 1 }, "-=0.15")
          .progress(progress || 0)
          .reversed(reversed || false);

} // END - buildTimelineUserSelected




function openTile(e) {
  // "e" value is passed in from the on click function 

  target = $(e.target).closest('.boxFrameOuter'); // solved targeting issue by using .closest vs .parent

  // var for dynamic URL
  var currentSelect = $(e.target).closest('.boxFrameOuter').attr('id');
  console.log( currentSelect );

  // Set Var number for Clone ID formual
  var cloneCount = 1;

  // Clone and set Unique ID so it is valid HTML with no conflicts
  clone = target.clone(false).prop('id', currentSelect + cloneCount++ ).addClass('clone').css("cursor", "default")/*.css("padding", "0")*/;

  // Set var for Clone Background Image URL
  var cloneBackgroundImage = "url(http://hainis.net/dev/assets/img/" + currentSelect + "1a.jpg)";
  console.log( cloneBackgroundImage );

  var urlLink = "http://hainis.net/dev/assets/modals/" + currentSelect + ".html";

  console.log( urlLink );
  
  body.append(overlay).promise().done(function() {

    // Load external HTML page via AJAX method         
    $.ajax({
        async: true,
        type:'get',
        url: 'https://codepen.io/jh-thank-you/pen/rjqNaY.html',
        cache:false,
        dataType: 'html',
        start: function()
        {

        }, // END start
        success:function(data)
        {
            
            $('.overlay').html(data).promise().done(function() {
                
              // Create Clone inside Modal Slide Container
             $('#slide-1').append(clone);

          }); // END Promise
        }, // END success
        complete: function() {
                  // Load Script
                    $.getScript( "https://codepen.io/jh-thank-you/pen/rjqNaY.js" ).promise().done(function() {
                    // Load Script
                     
                        console.log( "ScrollToPlugin and Custom Modal JS loaded" );
                    }); // END Promise
        } // END Complete
    }); // END AJAX
  }); // END Promise Append Overlay
  

  // After New DOM Elements are created build timeline
  // Pass the cloneBackgroundImage Var to the timeline
  buildTimelineUserSelected(cloneBackgroundImage);

  resizeModal(cloneBackgroundImage);

    if ($('.clone').length > 1) {
      clone.css("display", "none");
      clone.detach();
      clone.remove();
    } // END if

} // END openTile


function closeTile() {
  // tlUserSelected.reverse();
  TweenMax.to(overlay, 0.75, { opacity: 0, 
                               display: "none",
                               onComplete: function () {
                              // Remove Clone From DOM
                              $(".clone").css("display", "none");
                              $(".clone").remove();
                              removeClone();

                              //kill only tweens, but not delayedCalls or timelines
                              TweenMax.killAll(false, true, false, false);
                              
                              //kill only delayedCalls
                              TweenMax.killAll(false, false, true, false);

                            }, // END onReverseComplete
                 }, 0);

  console.log( "Closed Overlay" );
} // END closeTile


function removeClone() {

  overlay.detach();

  // Due to the way the timelines are redrawn with window resize
  // if a user resizes the window and clicks/selects a boxFrame,
  // which launches the overlay Modal timeline, it results in
  // the clone being created several times. The following
  // if/else loop cycles through and clears them out. Also,
  // for some reason the reverse onComplete doesn't change back 
  // the opacity for the labels, it should ve set back to 1 (100%).
  if (clone.length > 0) {
    clone.css("display", "none");
    clone.detach();
    clone.remove();
  } else {
    clone = null;
    // clientLabel.css("opacity", "1");

    // Clear and Kill Timeline
    tlUserSelected.clear();
    tlUserSelected.kill();
  }

  tlUserSelected = null;
  target = null;
  clone = null;

} // END removeClone


function getPosition(element) {

  var body = document.body;
  var root = document.documentElement;
  var rect = element.getBoundingClientRect();

  var scrollTop = window.pageYOffset || root.scrollTop || body.scrollTop || 0;
  var scrollLeft = window.pageXOffset || root.scrollLeft || body.scrollLeft || 0;

  var clientTop = root.clientTop || body.clientTop || 0;
  var clientLeft = root.clientLeft || body.clientLeft || 0;

  return {
    top: Math.round(rect.top + scrollTop - clientTop),
    left: Math.round(rect.left + scrollLeft - clientLeft),
    height: rect.height,
    width: rect.width
  };
} // END getPosition

999px

Insecure Resource

About JavaScript Preprocessors

About External Resources

About Packages

HTML

CSS

JS

Console

HTML

HTML Preprocessor

About HTML Preprocessors

Add Class(es) to <html>

Adding Classes

Stuff for <head>

About the <head>

Insecure Resource

CSS

CSS Preprocessor

About CSS Preprocessors

CSS Base

About CSS Base

Vendor Prefixing

About Vendor Prefixing

Add External Stylesheets/Pens

About External Resources

JavaScript

JavaScript Preprocessor

About JavaScript Preprocessors

Add External Scripts/Pens

About External Resources

Packages

Add Packages

About Packages

Behavior

Auto Save

Auto-Updating Preview

Format on Save

Editor Settings

Code Indentation

Code Indent width

Want to change your Syntax Highlighting theme, Fonts and more?

HTML

CSS

JS

Console

Editor Commands

Editor Focus

Misc

HTML Specific

Pen Actions