/*  CSS     FOR      INDEX       CSS     FOR      INDEX   */

* {
	margin: 0;
	padding: 0;
	border: 0;
	box-sizing: border-box;
    list-style: none;
    text-decoration: none;
}

body {
/*  background-color: #333333;  */
  background-color: black;
  font-family: arial;   
  overflow-x: hidden;   
}

header {  
  position: sticky;
  top: 0px;
  margin-left: auto;
  margin-right: auto;
  width: 100vw;
  height: 80px;
  background-color: #131313;
  align-items: center;
  z-index: 100;
}

.navbar {
  height: 80px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
} 

/*Brand */
figure {
  margin-left: 4%;      
}

.dba {     
  height: 30px;
  box-shadow: .063rem .063rem 1.875rem rgb(255, 255, 255, 0.5);  
}

figcaption {
  font-size: 13px;
  color: gold;
  padding-top: 2px;  
}

.nav-menu {
  display: flex;
  flex-direction: row;
  width: 70%;
  justify-content: space-evenly;
  align-items: center; 
  height: 35px;
}

.nav-menu li a {  
  color: white; 
  display: block;
  border: solid 1px gold; 
  padding-top: 8px;
  padding-bottom: 8px;
  width: 120px;
  text-align: center;
  border-radius: 6px;
  background-color: #131313;
  position: relative;
}

.nav-menu ul li img {
  display: block;
  height: 20px;
  align-items: start;
  padding-left: 8px;
}

.d-drpdwn li a,
.v-drpdwn li a,
.dr-drpdwn li a {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 2px;
  padding-right: 8px;
}

/*drone icon*/
#adjust {
  width: 35px;  
}

.nav-menu li a:hover {
  color: green;  
  transition: 0.9s ease;
  background-color: silver;
  border: solid 2px black;
  color: black;
} 

.d-drpdwn,
.v-drpdwn,
.dr-drpdwn {
  position: absolute;
  margin-top: 2px;
  opacity: 0;   
}

#lft:hover .d-drpdwn,
#mid:hover .v-drpdwn,
#rt:hover .dr-drpdwn {
  opacity: 1.0;  
}

.hamburger {
  display: none;
  cursor: pointer;
  margin-right: 5%;  
}

.bar {
  display: block;
  width: 25px;
  height: 3px;
  margin:  5px auto;
  transition: all 0.3s ease-in-out;
  background-color: white;
}

/*   Main Page Content*/

.graph {
  display: block;
  position: absolute;
  inset: 0;
  margin: auto;  
  width: 400px;
  height: 400px;
  aspect-ratio: 1/1;   
  background-image: url(img/landon/land-on-draft-2.png);
  background-size: cover;
  /*background-size: 400px 400px;*/
  background-position: center;
  z-index: -100;
}

/*//////////////// Y IMGs  ////////////////////*/

.ycontainer {
  display: flex;
  position: absolute;
  align-items: center;
  justify-content: center;
  inset: 0;
  margin: auto;  
  width: 440px;
  height: 440px;  
  z-index: -90;
}

#yimg1 {
  display: block;
  position: absolute;
  margin-right: auto;
  margin-left: auto;
  margin-top: -145vh; 
  animation-name: tracky;
  animation-duration: 8s;  
}

#yimg2 {
  display: block;
  position: absolute;
  margin: auto;
  margin-top: -145vh; 
  animation-name: tracky;
  animation-delay: 3s;
  animation-duration: 8s;  
}

#yimg3 {
  display: block;
  position: absolute;
  margin: auto;
  margin-top: -145vh; 
  animation-name: tracky;
  animation-delay: 6s;
  animation-duration: 8s;  
}


@keyframes tracky {
  from{transform: translateY(0);
  }
  50% {transform: translateY(73vh);
  }
  to{transform: translateY(0);
  }
}

/*///////////////// X IMGs ///////////////////*/
.xcontainer {
  display: flex;
  position: absolute;
  align-items: center;
  justify-content: center;
  inset: 0;
  margin: auto;  
  width: 420px;
  height: 420px;  
  z-index: -80;
}

#ximg1 {
  display: block;
  position: absolute;
  margin: auto;
  margin-left: -130vw; 
  animation-name: trackx;
  animation-delay: 11s;
  animation-duration: 9s;
}

#ximg2 {
  display: block;
  position: absolute;
  margin: auto;
  margin-left: -130vw; 
  animation-name: trackx;
  animation-delay: 14s;
  animation-duration: 9s;
}

#ximg3 {
  display: block;
  position: absolute;
  margin: auto;
  margin-left: -130vw; 
  animation-name: trackx;
  animation-delay: 17s;
  animation-duration: 9s;
}


@keyframes trackx {
  from{transform: translateX(0);
  }
  50% {
    transform: translateX(65vw);        
  }
  to{transform: translateX(0);
  }
}

/*///////////////////// Z IMG ////////////////////*/

.zcontainer {
  display: flex;
  position: absolute;
  inset: 0;
  margin: auto;  
  width: 430px;
  height: 430px;
  z-index: -70;  
}

.zframe {  
  display: flex;
  position: absolute;
  margin-top: -45vh;
  margin-left: -28vw;
  height: 240px;
  width: 360px;
  aspect-ratio: 14/9;
  animation-name: trackz; 
  animation-delay: 22s;
  animation-duration: 8s;     
}

@keyframes trackz {
  from{transform: translateX(0) translateY(0);
  }
  50% {
    transform: translateY(60vh) translateX(26vw);    
  }
  to{
    transform: translateY(0) translateX(0);
  }
}

#slider {
  /*display: block;*/
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  width: 400px;
  height: 400px;
  margin: 0 auto;
  margin-top: 8vh;  
  position: relative;
  animation-name: example; 
  animation-delay: 27s;  
  animation-duration: 4s;
  animation-fill-mode: forwards;  
}

.slide1,
.slide2,
.slide3 {
  width: 240px;
  height: 360px;
  margin: 0 auto;
}

.slide4,
.slide5,
.slide6,
.slide7 {
  width: 360px;
  height: 240px;
  margin: 0 auto;
}

/*-----    Y IMGs  --------------------*/
.slide1 {
  background: url(img/landon/ind-0230-v2-260x390.jpg) no-repeat center;
  background-size: cover;
  border: solid 8px whitesmoke;  
}            

.slide2 {
  background: url(img/landon/sfo-0472-v2-260x390.jpg)no-repeat center;
  background-size: cover;
  border: solid 8px whitesmoke;   
}

.slide3 {
  background: url(img/landon/ftm-5426-v2-260x390.jpg)no-repeat center;
  background-size: cover;
  border: solid 8px whitesmoke;   
}

/*-----    X IMGs  --------------------*/
.slide4 {
  background: url(img/landon/jek-00422-v2-390x260.jpg)no-repeat center;
  background-size: cover;
  border: solid 8px whitesmoke;   
}

.slide5 {
  background: url(img/landon/mke-4391-v2-390x260.jpg)no-repeat center;
  background-size: cover;
  border: solid 8px whitesmoke;   
}

.slide6 {
  background: url(img/landon/jek-00442-v2-390x260.jpg)no-repeat center;
  background-size: cover; 
  border: solid 8px whitesmoke;   
}

.slide7 {
  background: no-repeat center;
  background-size: cover;  
}

/*-----   Nav  Arrows Left and Right -------------------*/
.arrow {   
  opacity: 0;
  width: 390px;
  margin-left: auto;
  margin-right: auto;
  display: flex;  
  flex-direction: row;
  justify-content: space-evenly;  
  align-items: center;
  /*position: absolute;*/
  /*bottom: 1px;*/
  animation-name: example2;
  animation-delay: 30s;  
  animation-duration: 4s;
  animation-fill-mode: forwards;    
}

.arrow #arrow-left {
  text-align: center;
  color: white;
  background-color: black;
  border: solid 1px gold;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  padding-bottom: 4px;
  padding-top: 2px;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  margin-left: 15%;    
}

.arrow #arrow-right {
  text-align: center;
  color: white;
  background-color: black;
  border: solid 1px gold;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  padding-bottom: 4px;
  padding-top: 2px;
  padding-left: 25px;
  padding-right: 25px;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  margin-right: 15%;    
}

@keyframes example {
  0% {opacity: 0; 
  }  
  100% {opacity: 1;
  }
}

@keyframes example2 {
  0% {opacity: 0; 
  }  
  100% {opacity: 1;
  }
}

/*//////// Footer Section  ///////////////////////////*/

footer {  
  position: relative;
  bottom: -10vh;
  width: 100%;
  background-color: #131313;    
}

footer .smedia-menu {
  display: flex;
  flex-direction: row;
  justify-content: space-around;  
  background-color: #131313; 
  align-items: center;
}

.smedia-menu ul li h4 {
  color: #F8F8F8;
  padding-top: 8px;
  padding-bottom: 8px;
}

.smedia-menu ul li {
  padding-top: 14px;
}

footer img {
  height: 30px;
}

.image-menu {
  margin-top: 20px;
}

footer .image-menu .menu-icons {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}

.copyright {
  display: block;
  position: relative;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
}

.copyright ul {
  display: flex;
  flex-direction: row;
  color: #b6b4b4;  
  justify-content: space-around;  
}

.copyright ul li {
  display: flex;
  align-items: center;
}

.copyright ul #left {
  max-width: 30%;
}
 
.copyright ul li a {
  color: #b6b4b4;
  align-items: center;
}

.copyright ul li #link {
  padding-left: 10px;
}

/*//////// Media Queries  ///////////////////////////*/

/*IPad Pro Sizes*/
/*@media(max-width: 1025px) and (min-width: 1024px) and (max-height: 1367px) and (min-height: 1291px) {*/
/*    .graph {*/
/*        width: 90%;*/
/*        height: auto;*/
/*        background-size: contain;*/
/*        background-repeat: no-repeat;*/
/*    }*/
/*    #slider {*/
/*        height: 65vh;*/
/*        width: 100%;*/
/*        padding: 25px;*/
/*    }*/
/*    .sframe {*/
/*        width: 100%;*/
/*        height: 100%;*/
/*        aspect-ratio: 12/8;*/
/*    }*/
/*    .slide, .ycontainer img {*/
        /*width: auto;*/
/*        width: 50%;*/
/*        height: 100%;*/
/*        aspect-ratio: 8/12;*/
/*    }*/
/*    .slide4, .slide5, .slide6, .slide7 {*/
/*        width: 90%;*/
/*        height: 55%;*/
        /*height: auto;*/
/*        aspect-ratio: 12/8;*/
/*    }*/
    
/*    .ycontainer {*/
/*      height: 65vh;*/
/*      width: 100%;*/
/*    }*/
/*    #yimg1 {*/
/*      margin-top: -155vh; */
/*      animation-name: tracky;*/
/*      animation-duration: 8s;  */
/*    }*/
    
/*    #yimg2 {*/
/*      margin-top: -155vh; */
/*      animation-name: tracky;*/
/*      animation-delay: 3s;*/
/*      animation-duration: 8s;  */
/*    }*/
    
/*    #yimg3 {*/
/*      margin-top: -155vh; */
/*      animation-name: tracky;*/
/*      animation-delay: 6s;*/
/*      animation-duration: 8s;  */
/*    }*/
/*    @keyframes tracky {*/
/*      from{transform: translateY(0);*/
/*      }*/
/*      50% {transform: translateY(155vh);*/
/*      }*/
/*      to{transform: translateY(0);*/
/*      }*/
/*    }*/
    
/*    .xcontainer {*/
/*        width: 90%;*/
/*    }*/
/*    .xcontainer img {*/
/*        width: 100%;*/
        /*height: auto;*/
/*        height: 100%;*/
/*        aspect-ratio: 12/8;*/
/*    }*/
/*    #ximg1 {*/
/*      margin-left: -200vw; */
/*      animation-name: trackx;*/
/*      animation-delay: 11s;*/
/*      animation-duration: 9s;*/
/*    }*/
/*    #ximg2 {*/
/*      margin-left: -200vw; */
/*      animation-name: trackx;*/
/*      animation-delay: 14s;*/
/*      animation-duration: 9s;*/
/*    }*/
/*    #ximg3 {*/
/*      margin-left: -200vw; */
/*      animation-name: trackx;*/
/*      animation-delay: 17s;*/
/*      animation-duration: 9s;*/
/*    }*/
/*    @keyframes trackx {*/
/*      from{transform: translateX(0);*/
/*      }*/
/*      50% {*/
/*        transform: translateX(200vw);        */
/*      }*/
/*      to{transform: translateX(0);*/
/*      }*/
/*    }*/
        
/*    .zcontainer {*/
/*        width: 90%;*/
/*    }*/
/*    .zframe {*/
/*        width: 100%;*/
/*        height: 100%;*/
        /*height: auto;*/
/*        margin-top: -100vh;*/
/*        margin-left: -28vw;*/
/*        aspect-ratio: 12/8;*/
/*        animation-name: trackz; */
/*        animation-delay: 22s;*/
/*        animation-duration: 8s;*/
/*    }*/
/*    @keyframes trackz {*/
/*      from{transform: translateX(0) translateY(0);*/
/*      }*/
/*      50% {*/
/*        transform: translateY(100vh) translateX(28vw);    */
/*      }*/
/*      to{*/
/*        transform: translateY(0) translateX(0);*/
/*      }*/
/*    }*/
/*}*/
/*End of IPad Pro Screens Sizes*/

/*Tablet Screens Sizes*/
@media screen and (max-width: 1025px) {
    
        .graph {
        width: 90%;
        height: auto;
        background-size: contain;
        background-repeat: no-repeat;
    }
    #slider {
        height: 65vh;
        width: 100%;
        padding: 25px;
    }
    .sframe {
        width: 100%;
        height: 100%;
        aspect-ratio: 12/8;
    }
    .slide, .ycontainer img {
        /*width: auto;*/
        width: 50%;
        height: 100%;
        aspect-ratio: 8/12;
    }
    .slide4, .slide5, .slide6, .slide7 {
        width: 90%;
        height: 55%;
        /*height: auto;*/
        aspect-ratio: 12/8;
    }
    
    .ycontainer {
      height: 65vh;
      width: 100%;
    }
    #yimg1 {
      margin-top: -155vh; 
      animation-name: tracky;
      animation-duration: 8s;  
    }
    
    #yimg2 {
      margin-top: -155vh; 
      animation-name: tracky;
      animation-delay: 3s;
      animation-duration: 8s;  
    }
    
    #yimg3 {
      margin-top: -155vh; 
      animation-name: tracky;
      animation-delay: 6s;
      animation-duration: 8s;  
    }
    @keyframes tracky {
      from{transform: translateY(0);
      }
      50% {transform: translateY(155vh);
      }
      to{transform: translateY(0);
      }
    }
    
    .xcontainer {
        width: 90%;
    }
    .xcontainer img {
        width: 100%;
        /*height: auto;*/
        height: 100%;
        aspect-ratio: 12/8;
    }
    #ximg1 {
      margin-left: -200vw; 
      animation-name: trackx;
      animation-delay: 11s;
      animation-duration: 9s;
    }
    #ximg2 {
      margin-left: -200vw; 
      animation-name: trackx;
      animation-delay: 14s;
      animation-duration: 9s;
    }
    #ximg3 {
      margin-left: -200vw; 
      animation-name: trackx;
      animation-delay: 17s;
      animation-duration: 9s;
    }
    @keyframes trackx {
      from{transform: translateX(0);
      }
      50% {
        transform: translateX(200vw);        
      }
      to{transform: translateX(0);
      }
    }
        
    .zcontainer {
        width: 90%;
    }
    .zframe {
        width: 100%;
        height: 100%;
        /*height: auto;*/
        margin-top: -100vh;
        margin-left: -28vw;
        aspect-ratio: 12/8;
        animation-name: trackz; 
        animation-delay: 22s;
        animation-duration: 8s;
    }
    @keyframes trackz {
      from{transform: translateX(0) translateY(0);
      }
      50% {
        transform: translateY(100vh) translateX(28vw);    
      }
      to{
        transform: translateY(0) translateX(0);
      }
    }
/*End of Tablet Screens Sizes*/

/*IPad Air and Pro Google Inspect*/
@media(min-width: 1023px) and (max-width: 1025px) and (min-height: 1291px) and (max-height: 1367px) {
    .graph {
        width: 90%;
        height: auto;
        background-size: contain;
        background-repeat: no-repeat;
    }
    #slider {
        height: 65vh;
        width: 100%;
        padding: 25px;
    }
    .sframe {
        width: 100%;
        height: 100%;
        aspect-ratio: 12/8;
    }
    .slide, .ycontainer img {
        width: auto;
        width: 50%;
        height: 100%;
        aspect-ratio: 8/12;
    }
    .slide4, .slide5, .slide6, .slide7 {
        width: 90%;
        height: 55%;
        height: auto;
        aspect-ratio: 12/8;
    }
    
    .ycontainer {
      height: 65vh;
      width: 100%;
    }
    #yimg1 {
      margin-top: -155vh; 
      animation-name: tracky;
      animation-duration: 8s;  
    }
    
    #yimg2 {
      margin-top: -155vh; 
      animation-name: tracky;
      animation-delay: 3s;
      animation-duration: 8s;  
    }
    
    #yimg3 {
      margin-top: -155vh; 
      animation-name: tracky;
      animation-delay: 6s;
      animation-duration: 8s;  
    }
    @keyframes tracky {
      from{transform: translateY(0);
      }
      50% {transform: translateY(75vh);
      }
      to{transform: translateY(0);
      }
    }
    
    .xcontainer {
        width: 90%;
    }
    .xcontainer img {
        width: 100%;
        height: auto;
        height: 100%;
        aspect-ratio: 12/8;
    }
    #ximg1 {
      margin-left: -200vw; 
      animation-name: trackx;
      animation-delay: 11s;
      animation-duration: 9s;
    }
    #ximg2 {
      margin-left: -200vw; 
      animation-name: trackx;
      animation-delay: 14s;
      animation-duration: 9s;
    }
    #ximg3 {
      margin-left: -200vw; 
      animation-name: trackx;
      animation-delay: 17s;
      animation-duration: 9s;
    }
    @keyframes trackx {
      from{transform: translateX(0);
      }
      50% {
        transform: translateX(100vw);        
      }
      to{transform: translateX(0);
      }
    }
        
    .zcontainer {
        width: 90%;
    }
    .zframe {
        width: 100%;
        height: 100%;
        height: auto;
        margin-top: -100vh;
        margin-left: -28vw;
        aspect-ratio: 12/8;
        animation-name: trackz; 
        animation-delay: 22s;
        animation-duration: 8s;
    }
    @keyframes trackz {
      from{transform: translateX(0) translateY(0);
      }
      50% {
        transform: translateY(50vh) translateX(28vw);    
      }
      to{
        transform: translateY(0) translateX(0);
      }
    }
}
/**/

/*Ipad Mini Size*/
@media(max-height: 1024px) and (min-height: 1024px) and (max-width: 768px) and (min-width: 767px) {
      .graph {
        width: 80% !important;
        height: auto;
        background-size: contain;
        background-repeat: no-repeat;
    }
    #slider {
        height: 65vh;
        width: 100%;
        padding: 25px;
    }
    .sframe {
        width: 100%;
        height: 100%;
        aspect-ratio: 12/8;
    }
    .slide, .ycontainer img {
        width: auto;
        width: 50%;
        height: 100%;
        aspect-ratio: 8/12;
    }
    .slide4, .slide5, .slide6, .slide7 {
        width: 90%;
        height: 55%;
        height: auto;
        aspect-ratio: 12/8;
    }
    
    .ycontainer {
      height: 65vh;
      width: 70%;
    }
    .ycontainer img {
        width: 50% !important;
        height: 95% !important;
    }
    #yimg1 {
      margin-top: -155vh; 
      animation-name: tracky;
      animation-duration: 8s;  
    }
    
    #yimg2 {
      margin-top: -155vh; 
      animation-name: tracky;
      animation-delay: 3s;
      animation-duration: 8s;  
    }
    
    #yimg3 {
      margin-top: -155vh; 
      animation-name: tracky;
      animation-delay: 6s;
      animation-duration: 8s;  
    }
    @keyframes tracky {
      from{transform: translateY(0);
      }
      50% {transform: translateY(155vh);
      }
      to{transform: translateY(0);
      }
    }
    
    .xcontainer {
        width: 90%;
    }
    .xcontainer img {
        width: 100%;
        height: auto;
        height: 100%;
        aspect-ratio: 12/8;
    }
    #ximg1 {
      margin-left: -200vw; 
      animation-name: trackx;
      animation-delay: 11s;
      animation-duration: 9s;
    }
    #ximg2 {
      margin-left: -200vw; 
      animation-name: trackx;
      animation-delay: 14s;
      animation-duration: 9s;
    }
    #ximg3 {
      margin-left: -200vw; 
      animation-name: trackx;
      animation-delay: 17s;
      animation-duration: 9s;
    }
    @keyframes trackx {
      from{transform: translateX(0);
      }
      50% {
        transform: translateX(200vw);        
      }
      to{transform: translateX(0);
      }
    }
        
    .zcontainer {
        width: 90%;
    }
    .zframe {
        width: 100%;
        height: 100%;
        height: auto;
        margin-top: -100vh;
        margin-left: -28vw;
        aspect-ratio: 12/8;
        animation-name: trackz; 
        animation-delay: 22s;
        animation-duration: 8s;
    }
    @keyframes trackz {
      from{transform: translateX(0) translateY(0);
      }
      50% {
        transform: translateY(50vh) translateX(28vw) !important;    
      }
      to{
        transform: translateY(0) translateX(0);
      }
    }
}
/*End of Ipad Mini Screen Size*/


/*Ipad Mini Size*/
@media(max-height: 1180px) and (min-height: 1180px) and (max-width: 820px) and (min-width: 819px) {
      .graph {
        width: 80% !important;
        height: auto;
        background-size: contain;
        background-repeat: no-repeat;
    }
    #slider {
        height: 65vh;
        width: 100%;
        padding: 25px;
    }
    .sframe {
        width: 100%;
        height: 100%;
        aspect-ratio: 12/8;
    }
    .slide, .ycontainer img {
        width: auto;
        width: 50%;
        height: 100%;
        aspect-ratio: 8/12;
    }
    .slide4, .slide5, .slide6, .slide7 {
        width: 90%;
        height: 55%;
        height: auto;
        aspect-ratio: 12/8;
    }
    
    .ycontainer {
      height: 65vh;
      width: 70%;
    }
    .ycontainer img {
        width: 70% !important;
        height: 95% !important;
    }
    #yimg1 {
      margin-top: -155vh; 
      animation-name: tracky;
      animation-duration: 8s;  
    }
    
    #yimg2 {
      margin-top: -155vh; 
      animation-name: tracky;
      animation-delay: 3s;
      animation-duration: 8s;  
    }
    
    #yimg3 {
      margin-top: -155vh; 
      animation-name: tracky;
      animation-delay: 6s;
      animation-duration: 8s;  
    }
    @keyframes tracky {
      from{transform: translateY(0);
      }
      50% {transform: translateY(75vh);
      }
      to{transform: translateY(0);
      }
    }
    
    .xcontainer {
        width: 90% !important;
    }
    .xcontainer img {
        width: 100%;
        height: auto;
        height: 100%;
        aspect-ratio: 12/8;
    }
    #ximg1 {
      margin-left: -200vw; 
      animation-name: trackx;
      animation-delay: 11s;
      animation-duration: 9s;
    }
    #ximg2 {
      margin-left: -200vw; 
      animation-name: trackx;
      animation-delay: 14s;
      animation-duration: 9s;
    }
    #ximg3 {
      margin-left: -200vw; 
      animation-name: trackx;
      animation-delay: 17s;
      animation-duration: 9s;
    }
    @keyframes trackx {
      from{transform: translateX(0);
      }
      50% {
        transform: translateX(100vw);        
      }
      to{transform: translateX(0);
      }
    }
        
    .zcontainer {
        width: 90%;
    }
    .zframe {
        width: 100%;
        height: 100%;
        height: auto;
        margin-top: -100vh;
        margin-left: -28vw;
        aspect-ratio: 12/8;
        animation-name: trackz; 
        animation-delay: 22s;
        animation-duration: 8s;
    }
    @keyframes trackz {
      from{transform: translateX(0) translateY(0);
      }
      50% {
        transform: translateY(50vh) translateX(28vw) !important;    
      }
      to{
        transform: translateY(0) translateX(0);
      }
    }
}
/*End of Ipad Mini Screen Size*/


/*Mobile Screen Sizes*/
@media screen and (max-width: 768px)  {
    #slider {
        margin-top: 0px;
    }
    .graph {
        width: 100%;
        height: auto;
    }
    .slide {
        width: auto;
        height: 100%;
        aspect-ratio: 8/12;
    }
    .ycontainer img {
        width: 75%;
        height: 95%;
    }
    .slide4, .slide5, .slide6, .slide7 {
        width: 100%;
        height: auto;
        aspect-ratio: 12/8;
    }
    .zframe {
        width: 75%;
        height: auto;
        aspect-ratio: 12/8;
    }

    .ycontainer {
      height: 65vh;
      width: 100%;
    }
    #yimg1 {
      margin-top: -155vh; 
      animation-name: tracky;
      animation-duration: 8s;  
    }
    
    #yimg2 {
      margin-top: -155vh; 
      animation-name: tracky;
      animation-delay: 3s;
      animation-duration: 8s;  
    }
    
    #yimg3 {
      margin-top: -155vh; 
      animation-name: tracky;
      animation-delay: 6s;
      animation-duration: 8s;  
    }
    @keyframes tracky {
      from{transform: translateY(0);
      }
      50% {transform: translateY(75vh);
      }
      to{transform: translateY(0);
      }
    }
    
    .xcontainer {
        width: 90%;
    }
    .xcontainer img {
        width: 100%;
        height: auto;
        aspect-ratio: 12/8;
    }
    #ximg1 {
      margin-left: -200vw; 
      animation-name: trackx;
      animation-delay: 11s;
      animation-duration: 9s;
    }
    #ximg2 {
      margin-left: -200vw; 
      animation-name: trackx;
      animation-delay: 14s;
      animation-duration: 9s;
    }
    #ximg3 {
      margin-left: -200vw; 
      animation-name: trackx;
      animation-delay: 17s;
      animation-duration: 9s;
    }
    @keyframes trackx {
      from{transform: translateX(0);
      }
      50% {
        transform: translateX(100vw);        
      }
      to{transform: translateX(0);
      }
    }
        
    .zcontainer {
        width: 90%;
    }
    .zframe {
        width: 100%;
        height: auto;
        margin-top: -100vh;
        margin-left: -28vw;
        aspect-ratio: 12/8;
        animation-name: trackz; 
        animation-delay: 22s;
        animation-duration: 8s;
    }
    @keyframes trackz {
      from{transform: translateX(0) translateY(0);
      }
      50% {
        transform: translateY(110vh) translateX(28vw);    
      }
      to{
        transform: translateY(0) translateX(0);
      }
    }
        
    .copyright {
        font-size: 13px;
    }
    .arrow {
        width: 100%;
    }
}
/*Mobile Screen Sizes*/

/*Surface Pro*/
@media(max-height: 1368px) and (min-height: 1368px) and (max-width: 912px) and (min-width: 912px)  {
    .graph {
        width: 90%;
        height: auto;
        background-size: contain;
        background-repeat: no-repeat;
    }
    #slider {
        height: 65vh;
        width: 100%;
        padding: 25px;
    }
    .sframe {
        width: 100%;
        height: 100%;
        aspect-ratio: 12/8;
    }
    .slide, .ycontainer img {
        width: auto;
        width: 50%;
        height: 100%;
        aspect-ratio: 8/12;
    }
    .slide4, .slide5, .slide6, .slide7 {
        width: 90%;
        height: 55%;
        height: auto;
        aspect-ratio: 12/8;
    }
    
    .ycontainer {
      height: 65vh;
      width: 100%;
    }
    #yimg1 {
      margin-top: -155vh; 
      animation-name: tracky;
      animation-duration: 8s;  
    }
    
    #yimg2 {
      margin-top: -155vh; 
      animation-name: tracky;
      animation-delay: 3s;
      animation-duration: 8s;  
    }
    
    #yimg3 {
      margin-top: -155vh; 
      animation-name: tracky;
      animation-delay: 6s;
      animation-duration: 8s;  
    }
    @keyframes tracky {
      from{transform: translateY(0);
      }
      50% {transform: translateY(75vh);
      }
      to{transform: translateY(0);
      }
    }
    
    .xcontainer {
        width: 90%;
    }
    .xcontainer img {
        width: 100%;
        height: auto;
        height: 100%;
        aspect-ratio: 12/8;
    }
    #ximg1 {
      margin-left: -200vw; 
      animation-name: trackx;
      animation-delay: 11s;
      animation-duration: 9s;
    }
    #ximg2 {
      margin-left: -200vw; 
      animation-name: trackx;
      animation-delay: 14s;
      animation-duration: 9s;
    }
    #ximg3 {
      margin-left: -200vw; 
      animation-name: trackx;
      animation-delay: 17s;
      animation-duration: 9s;
    }
    @keyframes trackx {
      from{transform: translateX(0);
      }
      50% {
        transform: translateX(100vw);        
      }
      to{transform: translateX(0);
      }
    }
        
    .zcontainer {
        width: 90%;
    }
    .zframe {
        width: 100%;
        height: 100%;
        height: auto;
        margin-top: -100vh;
        margin-left: -28vw;
        aspect-ratio: 12/8;
        animation-name: trackz; 
        animation-delay: 22s;
        animation-duration: 8s;
    }
    @keyframes trackz {
      from{transform: translateX(0) translateY(0);
      }
      50% {
        transform: translateY(50vh) translateX(28vw);    
      }
      to{
        transform: translateY(0) translateX(0);
      }
    }
}
/*End of Surface Pro*/

/*Surface Duo Screen Size*/
@media(max-height: 720px) and (min-height: 720px) and (max-width: 540px) and (min-width: 540px) {
    #slider {
        height: 75vh;
    }
    .slide {
        width: 60%;
    }
    .slide4, .slide5, .slide6, .slide7 {
        width: 80%;
    }
    .ycontainer img {
        width: 60%;
    }
    .xcontainer {
        /*left: -270px;*/
        width: 80%;
    }
    .zcontainer {
        width: 80%;
    }
}
/*End of Surface Duo Screen Size*/

/*Surface Duo Screen Landscape*/
@media(max-height: 540px) and (min-height: 540px) and (max-width: 720px) and (min-width: 720px) {
    .graph {
        background-size: 400px 400px;
        background-position: center;
        background-repeat: no-repeat;
    }
    #slider {
        height: 75vh;
    }
    .slide, .ycontainer img {
        width: auto;
        height: 100%;
    }
    .slide4, .slide5, .slide6, .slide7 {
        width: 50%;
    }
    
    .xcontainer {
        width: 50%;
    }
    .zcontainer {
        width: 50%;
    }
    .zframe {
        width: 100%;
        height: auto;
        margin-top: -75vh;
        margin-left: -28vw;
        aspect-ratio: 12/8;
        animation-name: trackz; 
        animation-delay: 22s;
        animation-duration: 8s;
    }
    @keyframes trackz {
      from{transform: translateX(0) translateY(0);
      }
      50% {
        transform: translateY(85vh) translateX(28vw);    
      }
      to{
        transform: translateY(0) translateX(0);
      }
    }
}
/*End of Surface Duo  Screen Landscape*/


/*Nest Hub Screen Size*/
@media(max-height: 600px) and (min-height: 600px) and (max-width: 1024px) and (min-width: 1024px) {
    .graph {
        background-size: 400px 400px;
        background-position: center;
        background-repeat: no-repeat;
    }
    #slider {
        height: 75vh;
    }
    .slide, .ycontainer img {
        width: auto;
        height: 100%;
    }
    .slide4, .slide5, .slide6, .slide7 {
        width: 50%;
    }
    .xcontainer {
        width: 50%;
    }
    
    .zcontainer {
        width: 50%;
    }
    .zframe {
        width: 100%;
        height: auto;
        margin-top: -75vh;
        margin-left: -28vw;
        aspect-ratio: 12/8;
        animation-name: trackz; 
        animation-delay: 22s;
        animation-duration: 8s;
    }
    @keyframes trackz {
      from{transform: translateX(0) translateY(0);
      }
      50% {
        transform: translateY(85vh) translateX(28vw);    
      }
      to{
        transform: translateY(0) translateX(0);
      }
    }
}
/*End of Nest Hub Screen Size*/


/*General Landscape*/
@media(max-height: 430px)  and (max-width: 932px)  {
    .graph {
        background-size: 400px 400px;
        background-position: center;
        background-repeat: no-repeat;
    }
    #slider {
        height: 75vh;
    }
    .slide, .ycontainer img {
        width: auto;
        height: 100%;
    }
    .slide4, .slide5, .slide6, .slide7 {
        width: 50%;
    }
    
    .xcontainer {
        width: 50%;
    }
    .zcontainer {
        width: 50%;
    }
    .zframe {
        width: 100%;
        height: auto;
        margin-top: -75vh;
        margin-left: -28vw;
        aspect-ratio: 12/8;
        animation-name: trackz; 
        animation-delay: 22s;
        animation-duration: 8s;
    }
    @keyframes trackz {
      from{transform: translateX(0) translateY(0);
      }
      50% {
        transform: translateY(110vh) translateX(28vw);    
      }
      to{
        transform: translateY(0) translateX(0);
      }
    }
}
/*End of General landscape*/


/*Ipad Mini Screen Landscape*/
@media(max-height: 768px) and (min-height: 768px) and (max-width: 1024px) and (min-width: 1024px) {
        .graph {
        background-size: 400px 400px;
        background-position: center;
        background-repeat: no-repeat;
    }
    #slider {
        height: 75vh;
    }
    .slide, .ycontainer img {
        width: auto;
        height: 100%;
    }
    .slide4, .slide5, .slide6, .slide7 {
        width: 50%;
    }
    
    .xcontainer {
        width: 50%;
    }
    .zcontainer {
        width: 50%;
    }
    .zframe {
        width: 100%;
        height: auto;
        margin-top: -75vh;
        margin-left: -28vw;
        aspect-ratio: 12/8;
        animation-name: trackz; 
        animation-delay: 22s;
        animation-duration: 8s;
    }
    @keyframes trackz {
      from{transform: translateX(0) translateY(0);
      }
      50% {
        transform: translateY(85vh) translateX(28vw);    
      }
      to{
        transform: translateY(0) translateX(0);
      }
    }
}
/*End of Ipad Mini Screen Landscape*/


/*Extra Responsive Styles*/
@media(max-height: 1200px) and (min-width: 795px) and (max-width: 1024px) {
    .graph {
        background-size: 400px 400px;
        background-position: center;
        background-repeat: no-repeat;
    }
    #slider {
        height: 75vh;
    }
    .slide, .ycontainer img {
        width: auto;
        height: 100%;
    }
    .slide4, .slide5, .slide6, .slide7 {
        width: 50%;
    }
    
    .xcontainer {
        width: 50%;
    }
    .zcontainer {
        width: 50%;
    }
    .zframe {
        width: 100%;
        height: auto;
        margin-top: -100vh;
        margin-left: -28vw;
        aspect-ratio: 12/8;
        animation-name: trackz; 
        animation-delay: 22s;
        animation-duration: 8s;
    }
    @keyframes trackz {
      from{transform: translateX(0) translateY(0);
      }
      50% {
        transform: translateY(110vh) translateX(28vw);    
      }
      to{
        transform: translateY(0) translateX(0);
      }
    }
}

@media(max-height: 1042px) and (min-width: 1025px) and (max-width: 1200px) {
    .graph {
        background-size: 400px 400px;
        background-position: center;
        background-repeat: no-repeat;
    }
    #slider {
        height: 75vh;
        width: 50%;
    }
    .slide, .ycontainer img {
        width: auto;
        height: 90%;
        aspect-ratio: 8/12;
    }
    .slide4, .slide5, .slide6, .slide7 {
        width: 100%;
        height: auto;
        aspect-ratio: 12/8;
    }
    

    .ycontainer {
      height: 65vh;
      width: 100%;
    }
    #yimg1 {
      margin-top: -155vh; 
      animation-name: tracky;
      animation-duration: 8s;  
    }
    
    #yimg2 {
      margin-top: -155vh; 
      animation-name: tracky;
      animation-delay: 3s;
      animation-duration: 8s;  
    }
    
    #yimg3 {
      margin-top: -155vh; 
      animation-name: tracky;
      animation-delay: 6s;
      animation-duration: 8s;  
    }
    @keyframes tracky {
      from{transform: translateY(0);
      }
      50% {transform: translateY(75vh);
      }
      to{transform: translateY(0);
      }
    }
    
    .sframe {
        width: 100%;
        height: 100%;
    }
    .xcontainer {
        width: 50%;
    }
    .xcontainer img {
        width: 100%;
        height: auto;
        aspect-ratio: 12/8;
    }
    #ximg1 {
      margin-left: -200vw; 
      animation-name: trackx;
      animation-delay: 11s;
      animation-duration: 9s;
    }
    #ximg2 {
      margin-left: -200vw; 
      animation-name: trackx;
      animation-delay: 14s;
      animation-duration: 9s;
    }
    #ximg3 {
      margin-left: -200vw; 
      animation-name: trackx;
      animation-delay: 17s;
      animation-duration: 9s;
    }
    @keyframes trackx {
      from{transform: translateX(0);
      }
      50% {
        transform: translateX(100vw);        
      }
      to{transform: translateX(0);
      }
    }
    .zcontainer {
        width: 50%;
    }
    .zframe {
        width: 100%;
        height: auto;
        margin-top: -75vh;
        margin-left: -28vw;
        aspect-ratio: 12/8;
        animation-name: trackz; 
        animation-delay: 22s;
        animation-duration: 8s;
    }
    @keyframes trackz {
      from{transform: translateX(0) translateY(0);
      }
      50% {
        transform: translateY(85vh) translateX(28vw);    
      }
      to{
        transform: translateY(0) translateX(0);
      }
    }
}
/*End of Surface Duo  Screen Landscape*/


@media screen and (max-width: 668px){
  .dba {     
    height: 24px;      
  }
  .hamburger {
    display: block;
  }

  .hamburger.active .bar:nth-child(2){
    opacity: 0;
  }
  .hamburger.active .bar:nth-child(1){
    transform: translateY(8px) rotate(45deg);
  }
  .hamburger.active .bar:nth-child(3){
    transform: translateY(-8px) rotate(-45deg);
  } 
  
  .nav-menu {
    position: fixed;
    left: -100%;
    top: 80px;
    flex-direction: column;    
    width: 30%;
    transition: 0.8s;
    height: 110px;
  }
  .nav-menu.active {
    left: 0;
    align-items: flex-start;
  }
  .nav-menu li a:hover ul {
    display: block;
    transition: 0.8s;
  }
  #lft:hover .d-drpdwn {
    display: block;
    margin-left: 122px;
    margin-top: -27px;
    transition: 0.8s;
  }
  #mid:hover .v-drpdwn {
    display: block;
    margin-left: 122px;
    margin-top: -27px;
    transition: 0.8s;
  }

  #rt:hover .dr-drpdwn {
    display: block;
    margin-left: 122px;
    margin-top: -27px;
    transition: 0.8s;
  }

  .land-cont {
    margin-top: 37px;
    margin-bottom: 37px; 
  }

  footer .smedia-menu {
    display: flex;
    flex-direction: column;
    justify-content: space-around;  
    align-items: center;
    text-align: center;
  }
  
  footer .image-menu .menu-icons {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
  }
  
  .menu-icons li {
    padding-top: 12px;
    padding-bottom: 12px;
    border: solid 1px gold;
    width: 90%;
    text-align: center;
    margin-top: 4px;
    margin-bottom: 4px;
  }

  .copyright ul {
    flex-direction: column;
    align-items: center;
  }

  .copyright ul li {
    margin-bottom: 20px;
  }

  .copyright ul li a{
    margin-bottom: 10px;
  }

}

@media screen and (max-width: 568px){
    
}

@media screen and (max-width: 480px) {

}

@media screen and (max-width: 376px) {
    
}