如何在容器的一部分内创建视差效果，而不会使容器前后重叠或替换其他 div

@H_301_27@/*Parallax Section*/
#content {
    height: 100vh;
    overflow-x: hIDden;
    overflow-y: auto;
    -webkit-perspective: 1px;
    perspective: 1px
}

.parallax__layer {
    position: absolute;
    padding-top: 45vh;
}

.parallax__layer--BACk {
    -webkit-transform: translateZ(-1pX);
    transform: translateZ(-1pX);
    BACkground-image: url("https://www.w3schools.com/howto/img_parallax3.jpg");
    wIDth: 100%;
}

.parallax__layer--base {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}


/*Mission*/
.mission-div {
    margin: 0 75px;
    padding: 25px 0;

}

.mission-div h2{
    Font-family: 'Montserrat',sans-serif;
    margin-bottom: 10px;
    Font-weight: 500;
}

.mission-div p{
    Font-family: 'Lato',sans-serif;
    color: #565454;
    text-align: justify;
    Font-weight: 300;
}

.mission-btn {
    margin-top: 20px;
    padding: 12px 32px;
    border: none;
    border-radius: 4px;
    BACkground-color: #E84545;
    color: white;
    cursor: pointer;
}





/*Mama*/
.rose-div {
    
    wIDth: 100%;
    padding: 50px 0;
    BACkground-color: #5A735B;
    
    Box-shadow: inset 0 4px 8px 0 rgba(0,0.2);
}

.rose-ctr-div {
    display: flex;
    margin: 0 0 0 75px;
    
    
    justify-content: flex-end;
    
    /*grID-template-columns: repeat(auto-fill,minmax(200px,1fr));
    grID-auto-rows: minmax(150px,auto);*/
    align-items: center;
    
    BACkground-color: white;
    border-radius: 2px;
    
    Box-shadow: 0 4px 8px 0 rgba(0,0.2);
}


.rosIE-txt {
    wIDth: 60%;
    margin: 0 50px;
    padding: 20px 0;
    text-align: justify;
    
    Font-family: 'Lato',sans-serif;
    Font-weight: 300;
    flex-grow: 2;
}

.rosIE-img {
    
    height: 250px;
    wIDth: 250px;
    BACkground-image: url("/Users/greg/Desktop/RARF/Test/businesswoman.png");
    BACkground-size: cover;
    BACkground-color: grey;
    
}


@media screen and (max-wIDth: 767pX) {
    
    .rose-ctr-div {
        display: flex;
        margin: 0 0 0 75px;
        
        flex-wrap: wrap;
        
        justify-content: center;
        
        /*grID-template-columns: repeat(auto-fill,1fr));
        grID-auto-rows: minmax(150px,auto);*/
        align-items: center;
        
        BACkground-color: white;
        border-radius: 2px;
        
        Box-shadow: 0 4px 8px 0 rgba(0,0.2);
    }
 
 
 .rosIE-img {
     
     height: 250px;
     wIDth: 250px;
     BACkground-image: url("/Users/greg/Desktop/RARF/Test/businesswoman.png");
     BACkground-size: cover;
     BACkground-color: grey;
     
     margin-bottom: 20px;
     
     
 }
 
 
}


/*Our Work*/
.map-div {
    margin: 0 75px;
    padding: 25px 0;
}

.map-div h2 {
    
    Font-family: 'Montserrat',sans-serif;
    margin-bottom: 10px;
    Font-weight: 500;

    /*padding-bottom: 5px;*/
    text-align: right;
}

.map-txt p {
    
    Font-family: 'Lato',sans-serif;
    color: #565454;
    text-align: justify;
    Font-weight: 300;
}

.map-ctr-div {
    wIDth: 100%;
    display: flex;
    /*flex-wrap: wrap;*/
    
    justify-content: flex-end;
    grID-gap: 1em;
}



@media screen and (max-wIDth: 767pX) {
    
    .map-ctr-div {
        wIDth: 100%;
        display: flex;
        flex-wrap: wrap;
        
        justify-content: center;
        grID-gap: 1em;
    }
    
}

.map-svg {
    wIDth: 70%;
    
}

.map-txt {
    wIDth: 30%;
    text-align: justify;
    
}


@media screen and (max-wIDth: 767pX) {
    
    
    .map-div h2 {
    padding-bottom: 25px;
    text-align: center;
    }
    
    .map-svg {
        wIDth: 100%;
        
    }
    
    .map-txt {
        wIDth: 100%;
        text-align: justify;
        
    }
    
}

.map-icon {
    fill: #E06565;
    
    stroke: #f5f5f5;
    stroke-wIDth: 1.48783px;
}

path {
    /*cursor: pointer;*/
}

.map-icon path:hover {
    opacity: .6
}

path:active {
    height: 80%;
    wIDth: 80%;
}


/*cursor pop uP*/
.hIDepopUp {
    display: none;
    padding: 7px;
    BACkground-color: ;
    wIDth:10%;
    position:absolute;
    z-index: 999;
}

.Manchester {
    Font-size: .5em;
    Font-style: bold;
}



/*Essay Competition*/
.sch-container {
    BACkground-color: #4587C1;
    Box-shadow: inset 0 4px 8px 0 rgba(0,0.2);
}

.scholarship-div {
    margin: 0 75px;
    padding: 25px 0;
    
    text-align: center;
}

.scholarship-div h2 {
    padding-top: 16px;
    
    Font-family: 'Montserrat',sans-serif;
    Font-weight: 500;
}
.scholarship-div button {
    margin: 30px 0 30px 0;
}

.upcoming-btn {
    border: none;
    padding: 12px 36px;
    border-radius: 4px;
    BACkground-color: #E84545;
    color: white;
    cursor: pointer;
}

.pstwnrs-btn {
    border: none;
    padding: 12px 36px;
    border-radius: 4px;
    BACkground-color: #18B7D3;
    color: white;
}





/*Our Team*/
.team-div {
    wIDth: 100%;
    padding-top: 32px;
    padding-bottom: 32px;
}

.team-div-title {
    margin: 0 75px;
}

.team-div-title h2 {
        padding-bottom: 10px;
        Font-family: 'Montserrat',sans-serif;
        Font-weight: 500;
}

.team-div-title p {
    Font-family: 'Lato',sans-serif;
    color: #565454;
    text-align: justify;
    Font-weight: 300;
}

.team-members-container {
    max-wIDth: 1072px;
    wIDth: 100%;
    text-align: center;
    margin-bottom: 32px;
    margin-top: 32px;
    margin-left: auto;
    margin-right: auto;
    Font-size: 1.125rem;
    line-height: 1.78;
}

.team-tiles {
    padding: 8px;
    margin: 8px;
    min-wIDth: 112px;
    letter-spacing: 0.05em;
    Transition: 0.28s all ease-in;
    display: inline-block;
    text-align: center;
    Font-size: 0.8125rem;
    line-height: 2;
    text-decoration: none;
    border: 1px solID;
    border-color: rgba(164,164,.3);
    border-radius: 4px;
    color: #565454
    Transition: all .3s ease-in-out;
    cursor: pointer;
}

.team-pics {
    height: 150px;
    wIDth: 150px;
    border-radius: 50%;
    Transition: all .3s ease-in-out;
}

.team-members-name {
        margin-top: 0;
        display: block;
        margin-bottom: 8px;
        letter-spacing: 0.05em;
        text-align: center;
        Font-size: 0.8125rem;
        line-height: 2;
        cursor: pointer;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        color: #565454;
        Font-family: 'Lato',sans-serif;
        color: ;
        Font-weight: 400;
        opacity: .6;
}

.team-tiles p {
    opacity: .4;
    Transition: all .3s ease-in-out;
}

.team-tiles:hover .team-pics {
    border-radius:4px;
    cursor: pointer;
}

.team-tiles:hover p {
    opacity: 1;
}

.team-tiles:hover .team-members-name {
    opacity: 1;
}

.team-tiles:hover {
    border-color: rgba(164,1);
}



/*Test Section*/
.come-in {
  transform: translateX(150pX);
  animation: come-in 2.0s ease forWARDs;
}
.come-in:nth-child(odd) {
  animation-duration: 1.9s;
}
.already-visible {
  transform: translateX(0);
  animation: none;
}

@keyframes come-in {
  to { transform: translateX(0); }
}









/* Contact Section */
.contact-div {
    wIDth: 100%;
    padding-top: 32px;
    padding-bottom: 32px;
    
    padding-top: 45vh;
}

.menu-container {
    wIDth: 100%;
    line-height: 1.14;
}

.contact-links {
    Font-size: .875em;
    padding: 8px;
    text-align: center;
}

.contact-links li {
    display: inline-block;
    vertical-align: mIDdle;
}

.contact-links a {
    display: block;
    
}

.contact-links a:after {
        border-bottom: 1px solID;
        border-color: #565454;
        bottom: 15%;
        content: "";
        height: 0;
        left: 50%;
        margin-left: -15px;
        opacity: 0;
        position: absolute;
        -webkit-Transition: 0.24s all cubic-bezIEr(0.48,-0.01,0.27,1.21);
        Transition: 0.24s all cubic-bezIEr(0.48,1.21);
        -webkit-transform: translateZ(0) scaleX(0);
        transform: translateZ(0) scaleX(0);
        will-change: opacity,transform;
        wIDth: 30px;
}

.footer-links-style {
    text-decoration: none;
    padding: 16px;
    BACkface-visibility: hIDden;
    position: relative;
    color: #565454;
    
    Font-family: 'Lato',sans-serif;
    color: #565454;
    Font-weight: 400;
}

a:visited {
    text-decoration: none;
}

.icon-container {
    max-wIDth: 1072px;
    wIDth: 100%;
    
    text-align: center;
    
    margin-bottom: 32px;
    margin-top: 32px;
    
    margin-left: auto;
    margin-right: auto;
    
    Font-size: 1.125rem;
    line-height: 1.78;
}

.logo-tiles {
    padding: 8px;
    
    margin: 8px;
    min-wIDth: 112px;
    letter-spacing: 0.05em;
    Transition: 0.28s all ease-in;
    
    display: inline-block;
    text-align: center;
    
    Font-size: 0.8125rem;
    line-height: 2;
    
    text-decoration: none;
    
    border: 1px solID;
    border-color: rgba(164,.3);
    border-radius: 4px;
    color: #565454;
    
    Transition: all .3s ease-in-out;
}

.icons-svg {
    z-index: -1;
    height: 32px;
    wIDth: 32px;
    fill: #565454;
    
    line-height: 0;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    
    display: inline-block;
    
    vertical-align: mIDdle;
    letter-spacing: 0.05em;
    
    text-align: center;
    Font-size: 0.8125rem;
    
    cursor: pointer;
    
    margin-top: 8px;
}

.icon-label {
    margin-top: 0;
    display: block;
    
    margin-bottom: 8px;
    
    letter-spacing: 0.05em;
    
    text-align: center;
    Font-size: 0.8125rem;
    line-height: 2;
    
    cursor: pointer;
    
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    
    color: #565454;
    
    Font-family: 'Lato',sans-serif;
    color:;
    Font-weight: 400;
    
    opacity: .6;
    Transition: all .3s ease-in-out;
}

.contact-info {
    wIDth: 100%;
    Font-family: 'Lato',sans-serif;
    color:;
    Font-weight: 400;
    Font-size: .815em;
    
    text-align: center;
    
}

.contact-info p {
    color: #565454;
    margin-top: 5px;
}

.contact-info a {
    text-decoration: none;
    color: #ac9167;
}



.logo-tiles:hover {
    border-color: rgba(164,1);
}

.logo-tiles:hover p {
    opacity: 1;
}

@H_301_27@<script src="https://cdnjs.cloudFlare.com/AJAX/libs/jquery/3.3.1/jquery.min.Js"></script>
<main ID="content" class="flex-grow">
      
      <!------- Our Mission ------->
      <div class="mission-div" ID="mission-anchor">
          <h2> OUR MISSION </h2>
          <p>Lorem Ipsum is simply dummy text of the prinTing and typesetTing industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unkNown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centurIEs,but also the leap into electronic typesetTing,remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
          
              <button class="mission-btn">LEARN MORE</button>
        </div>
      <!-------- Mama RosIE ------->
      <div class="rose-div" ID="rosIE-anchor">
          <div class="rose-ctr-div">
              <div class="rosIE-txt">
                  <p>Lorem Ipsum is simply dummy text of the prinTing and typesetTing industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unkNown printer took a galley of type and scrambled it to make a type specimen book.</p>
              </div>
              <div class="rosIE-img"></div>
          </div>
      </div>
      <!----------- Map ----------->
      <div class="map-div" ID="work-anchor">
          <h2>OUR WORK</h2>
          <div class="map-ctr-div">
              <div class="map-svg">
                  <svg class="map-icon" xmlns="http://www.w3.org/2000/svg" vIEwBox="0 0 764 303">
                          <g fill-rule="nonzero">
                            <path d="M645.7 185.2l1.6-.1 2.8-1.1 1.4-.9 1.5-1.5.7-.6.9-.4 1.4-.1 4.9-.1 1.7-.2 1.3-.4 2.3-1.2 1.8-.8 1.4.1 1.8.4 7.6 4.5 11.4 1.8 10.4 3 1.8.8.7.6.6.7 2.2 3.3 1 1 1.4 1.2 4.7 1.1 12.7 1.8 3.7-.4 9.7-3.1h.2l2.8 6.7 5.2 8.8 6.5 7 9.5 7.1-3.6 3-18 4.5-12.7 7-7.3 2.2-6.2-1.7 2.4-1.7 1-1.3 1.3-4.5-6.3 2.4-5.6 8.3-6 1.9-5.5-1.6-6.2-2.9-6.4-1.7-10.5 4-27.5 2.4-19.3-3-2.8.1-2.7.5-2.8-.3-3.6-2.6-1.6-3.3-.7-4.2-1.1-3.6-2.7-1.6-2.8-.9-1.9-2-1.6-2.5-2.2-1.9-.8-.2 2.1-3.3 2.2-2.5.4-1.2.2-1.6-.2-3.4.3-2.2 1.5-2.3 1.4-.6 1.4-.3 3.5.3.9-.2.6-.7v-1.3l-1.1-2.1-2.6-3.5-.6-1.3-1.9-6.8-1-1.7-.8-2.1-.4-2.2.1-5.5.5-3 .6-2.3 3.2-3 6.5 4.5 2.7 3.6.6.7.7.6 2.3 1.6 2.7 1.2 16.5 5.3 2.4 1.4 1.4.1z" />
                            <path class="showPopUp" ID="Manchester" d="M286.9 108.2l1.1-.1 5 2.2 15.6 10.9.8 5.5 38 78-.5 2-1 2.9-.1 1.8.2 2.5.8 5 .6 2.2.6 1.6 1.6 2.1 4 3.5.8 1.3.3 1.2-.1 1.1-2.1 6.9-.7 4.5-.4.9-.6.7-.7.5-.9.2-1.1.1-3.1-.4-1 .3-.7.5-1 .9-.4-.2-7.7-2.9-8.1-1-6.5 2.6-7.3 5-7.4.7-15.3-4.4-6.6-1.2-.9-1.6-23.8-98.9-1.8-33 4.5-1.1 2.2-.8 3.8-2.4 2.6-1.2 1.9-.5 2 .1 13.4 2z"/>
                          </g>
                        </svg>
              </div>
              
              <div class="map-txt"><p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh,viverra non,semper suscipit,posuere a,pede</p>
              </div>
          </div>
      </div>
      
      <!---- Labels for hover ---->
      <div class="Manchester hIDepopUp">
          <ul>
              <li><b>Pratville PriMary and Infant School</b></li>
          </ul>
      </div>
      
      <!--------Scholarship -------->
      <div class="sch-container" ID="essay-anchor">
      <div class="scholarship-div">
      <h2>ESSAY COMPETITION</h2>
        <button class="upcoming-btn">LEARN MORE</button>
        <!--<button class="pstwnrs-btn">PAST WINNERS</button>-->
      </div>
      </div>
      
      <!------- Team Cards -------->
      <div class="team-div" ID="team-anchor">
         <div class="team-div-title">
          <h2> OUR TEAM </h2>
          <p>Lorem Ipsum is simply dummy text of the prinTing and typesetTing industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,remaining essentially unchanged.</p>
          </div>
          
          <div class="team-members-container">
              <div class="team-tiles" >
                  <img class="team-pics" ID="hover-tile" src="https://www.w3schools.com/howto/img_avatar.png"></img>
                  <h1 class="team-members-name">John Doe</h1>
                  <p>PresIDent</p>
                  <p>Lorem Ipsum</p>
              </div>
              <div class="team-tiles">
                  <img class="team-pics" src="https://www.w3schools.com/howto/img_avatar.png"></img>
                  <h1 class="team-members-name">John Doe</h1>
                  <p>Vice PresIDent</p>
                  <p>Lorem Ipsum</p>
              </div>
              <div class="team-tiles">
                  <img class="team-pics" src="https://www.w3schools.com/howto/img_avatar.png"></img>
                  <h1 class="team-members-name">John Doe</h1>
                  <p>Secretary</p>
                  <p>Lorem Ipsum</p>
              </div>
              <div class="team-tiles">
                  <img class="team-pics" src="https://www.w3schools.com/howto/img_avatar.png"></img>
                  <h1 class="team-members-name">John Doe</h1>
                  <p>Treasurer</p>
                  <p>Lorem Ipsum</p>
              </div>
              <div class="team-tiles">
                  <img class="team-pics" src="https://www.w3schools.com/howto/img_avatar.png"></img>
                  <h1 class="team-members-name">John Doe</h1>
                  <p>Chaplain</p>
                  <p>Lorem Ipsum</p>
              </div>
          </div>
        
        
      </div>
      
      <!---- Parallax Test ----->
      <div class="parallax__layer parallax__layer--BACk">
          <div class="title">This is the BACkground</div>
      </div>
      <div class="parallax__layer parallax__layer--base">
          <div class="title">This is the foreground</div>
      </div>
      
      
      
      
      <!------ Contact Test ---->
      <footer class="contact-div" ID="contact-anchor">
          <nav class="menu-container">
              <ul class="contact-links">
                  <li><a class="footer-links-style" href="#">CONTACT</a></li>
                  <li><a class="footer-links-style" href="#">PARTNERS</a></li>
                  <li><a class="footer-links-style" href="#">SPONSORSHIP</a></li>
                  <li><a class="footer-links-style" href="#">PROGRAMS</a></li>
              </ul>
          </nav>
          <div class="icon-container">
              <a href="#" class="logo-tiles">
                  <svg class="icons-svg" xmlns="http://www.w3.org/2000/svg" vIEwBox="0 0 155.139 155.139">
                      <path d="M89.584 155.139V84.378h23.742l3.562-27.585H89.584V39.184c0-7.984 2.208-13.425 13.67-13.425l14.595-.006V1.08C115.325.752 106.661 0 96.577 0 75.52 0 61.104 12.853 61.104 36.452v20.341H37.29v27.585h23.814v70.761h28.48z"/></svg>
                  
                  <p class="icon-label">FACEBOOK</p>

              </a>
              <a href="#" class="logo-tiles">
                  <svg class="icons-svg" xmlns="http://www.w3.org/2000/svg" vIEwBox="0 0 310 310"><path d="M302.973 57.388a117.512 117.512 0 01-14.993 5.463 66.276 66.276 0 0013.494-23.73 5 5 0 00-7.313-5.824 117.994 117.994 0 01-34.878 13.783c-12.381-12.098-29.197-18.983-46.581-18.983-36.695 0-66.549 29.853-66.549 66.547 0 2.89.183 5.764.545 8.598C101.163 99.244 58.83 76.863 29.76 41.204a5.001 5.001 0 00-8.196.642c-5.896 10.117-9.013 21.688-9.013 33.461 0 16.035 5.725 31.249 15.838 43.137a56.37 56.37 0 01-8.907-3.977 5 5 0 00-7.427 4.257c-.007.295-.007.59-.007.889 0 23.935 12.882 45.484 32.577 57.229a57.372 57.372 0 01-5.063-.735 4.998 4.998 0 00-5.699 6.437c7.29 22.76 26.059 39.501 48.749 44.605-18.819 11.787-40.34 17.961-62.932 17.961a120.4 120.4 0 01-14.095-.826 5 5 0 00-3.286 9.174c29.023 18.609 62.582 28.445 97.047 28.445 67.754 0 110.139-31.95 133.764-58.753 29.46-33.421 46.356-77.658 46.356-121.367 0-1.826-.028-3.67-.084-5.508 11.623-8.757 21.63-19.355 29.773-31.536a5 5 0 00-6.182-7.351z"/></svg>
                  
                  <p class="icon-label">TWITTER</p>
              </a>
              <a href="#" class="logo-tiles">
                  <svg class="icons-svg" height="511pt" vIEwBox="0 0 511 511.9" wIDth="511pt" xmlns="http://www.w3.org/2000/svg">
                    <path d="M510.95 150.5c-1.2-27.2-5.598-45.898-11.9-62.102-6.5-17.199-16.5-32.597-29.6-45.398-12.802-13-28.302-23.102-45.302-29.5-16.296-6.3-34.898-10.7-62.097-11.898C334.648.3 325.949 0 256.449 0s-78.199.3-105.5 1.5c-27.199 1.2-45.898 5.602-62.097 11.898-17.204 6.5-32.602 16.5-45.403 29.602-13 12.8-23.097 28.3-29.5 45.3-6.3 16.302-10.699 34.9-11.898 62.098C.75 177.801.449 186.5.449 256s.301 78.2 1.5 105.5c1.2 27.2 5.602 45.898 11.903 62.102 6.5 17.199 16.597 32.597 29.597 45.398 12.801 13 28.301 23.102 45.301 29.5 16.3 6.3 34.898 10.7 62.102 11.898 27.296 1.204 36 1.5 105.5 1.5s78.199-.296 105.5-1.5c27.199-1.199 45.898-5.597 62.097-11.898a130.934 130.934 0 0074.903-74.898c6.296-16.301 10.699-34.903 11.898-62.102 1.2-27.3 1.5-36 1.5-105.5s-.102-78.2-1.3-105.5zm-46.098 209c-1.102 25-5.301 38.5-8.801 47.5-8.602 22.3-26.301 40-48.602 48.602-9 3.5-22.597 7.699-47.5 8.796-27 1.204-35.097 1.5-103.398 1.5s-76.5-.296-103.403-1.5c-25-1.097-38.5-5.296-47.5-8.796C94.551 451.5 84.45 445 76.25 436.5c-8.5-8.3-15-18.3-19.102-29.398-3.5-9-7.699-22.602-8.796-47.5-1.204-27-1.5-35.102-1.5-103.403s.296-76.5 1.5-103.398c1.097-25 5.296-38.5 8.796-47.5C61.25 94.199 67.75 84.1 76.352 75.898c8.296-8.5 18.296-15 29.398-19.097 9-3.5 22.602-7.7 47.5-8.801 27-1.2 35.102-1.5 103.398-1.5 68.403 0 76.5.3 103.403 1.5 25 1.102 38.5 5.3 47.5 8.8 11.097 4.098 21.199 10.598 29.398 19.098 8.5 8.301 15 18.301 19.102 29.403 3.5 9 7.699 22.597 8.8 47.5 1.2 27 1.5 35.097 1.5 103.398s-.3 76.301-1.5 103.301zm0 0M256.45 124.5c-72.598 0-131.5 58.898-131.5 131.5s58.902 131.5 131.5 131.5c72.6 0 131.5-58.898 131.5-131.5s-58.9-131.5-131.5-131.5zm0 216.8c-47.098 0-85.302-38.198-85.302-85.3s38.204-85.3 85.301-85.3c47.102 0 85.301 38.198 85.301 85.3s-38.2 85.3-85.3 85.3zm0 0M423.852 119.3c0 16.954-13.747 30.7-30.704 30.7-16.953 0-30.699-13.746-30.699-30.7 0-16.956 13.746-30.698 30.7-30.698 16.956 0 30.703 13.742 30.703 30.699zm0 0"/>
                  </svg>
                  
                  <p class="icon-label">INSTAGRAM</p>
              </a>
              <a href="#" class="logo-tiles">
                  <svg class="icons-svg" height="682pt" vIEwBox="-21 -117 682.667 682" wIDth="682pt" xmlns="http://www.w3.org/2000/svg">
                    <path d="M626.813 64.035c-7.375-27.418-28.993-49.031-56.407-56.414C520.324-6.082 319.992-6.082 319.992-6.082s-200.324 0-250.406 13.184c-26.887 7.375-49.031 29.52-56.406 56.933C0 114.113 0 217.97 0 217.97s0 104.379 13.18 153.933c7.382 27.414 28.992 49.028 56.41 56.41C120.195 442.02 320 442.02 320 442.02s200.324 0 250.406-13.184c27.418-7.379 49.032-28.992 56.414-56.406 13.176-50.082 13.176-153.934 13.176-153.934s.527-104.383-13.183-154.46zM256.21 313.915V122.022l166.586 95.946zm0 0"/>
                  </svg>
                  
                  <p class="icon-label">YOUTUBE</p>
              </a>
          </div>
          <div class="contact-info">
              <p class="btm-address">Lorem Ipsum is simply dummy text of the prinTing and typesetTing industry.</p>
              <p> Phone: <a href="tel:+5555555555">(555) 555-5555</a></p>
          </div>
     </footer>
      
  </main>



<!------ Script ------>
<script>

//cursor popup//
$(".showPopUp").mouSEOver(function(E){
    $("."+this.ID).show();
        $("."+this.ID).CSS({
            top: (e.pageY ) + "px",left: (e.pageX ) + "px"
        });
    });
$(".showPopUp").mouSEOut(function(){
    $("."+this.ID).hIDe();
});


//Smooth Scrolling Effect//
// SELEct all links with hashes
$('a[href*="#"]')
  // Remove links that don't actually link to anything
  .not('[href="#"]')
  .not('[href="#0"]')
  .click(function(event) {
    // On-page links
    if (
      LOCATIOn.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
      &&
      LOCATIOn.hostname == this.hostname
    ) {
      // figure out element to scroll to
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      // Does a scroll target exist?
      if (target.length) {
        // Only prevent default if animation is actually gonna happen
        event.preventDefault();
        $('HTML,body').animate({
          scrolltop: target.offset().top
        },1000,function() {
          // CallBACk after animation
          // Must change focus!
          var $target = $(target);
          $target.focus();
          if ($target.is(":focus")) { // checking if the target was focused
            return false;
          } else {
            $target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
            $target.focus(); // Set focus again
          };
        });
      }
    }
  });



//---------------- Test Section --------------//
(function($) {


  $.fn.visible = function(partial) {
    
      var $t            = $(this),$w            = $(window),vIEwtop       = $w.scrolltop(),vIEwBottom    = vIEwtop + $w.height(),_top          = $t.offset().top,_bottom       = _top + $t.height(),comparetop    = partial === true ? _bottom : _top,compareBottom = partial === true ? _top : _bottom;
    
    return ((compareBottom <= vIEwBottom) && (comparetop >= vIEwtop));

  };
    
})(jquery);

var win = $(window);

var allMods = $(".team-tiles");

allMods.each(function(i,el) {
  var el = $(el);
  if (el.visible(true)) {
    el.addClass("already-visible");
  }
});

win.scroll(function(event) {
  
  allMods.each(function(i,el) {
    var el = $(el);
    if (el.visible(true)) {
      el.addClass("come-in");
    }
  });
  
});
</script>