@import url('https://fonts.googleapis.com/css?family=Lato:300,400');
@import url('https://fonts.googleapis.com/css?family=Montserrat');
@import url(http://allfont.net/allfont.css?fonts=montserrat-light);
@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
@font-face {
  font-family: 'Font';
  src: url('Sansation_Light.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff') format('woff'), /* Modern Browsers */
       url('Sansation_Light.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
@font-face {
    font-family:Font;
    src: url('Sansation_Light.eot');
    src: url('Sansation_Light.eot?') format('☺'),
        url('Sansation_Light.woff') format('woff'),
        url('Sansation_Light.ttf') format('truetype'),
        url('Sansation_Light.svg#webfontssbCkuz5') format('svg');
}

@font-face{
    font-family:VerlagB;
    src: url(Verlag-Bold.otf);
}
@font-face{
    font-family:'Font';
    src:url('Sansation_Light.ttf');
}

@font-face {
   font-family: Quantum;
   src: url(Quantum.otf);
}

@font-face {
   font-family: Spy;
   src: url(SpyAgencyv3.ttf);
}
@font-face {
   font-family: MontserratB;
   src: url(Montserrat-Bold.ttf);
}

#myVideo {
   
    margin:0px 0px;
   /* min-width: 100%;*/ 
    min-height: 100%;
    z-index: 1;
    top:0;
   left:0;

}




html{
    
    
    scroll-behavior:smooth;
}
#logo p img{
 vertical-align: middle;
    max-width:180px;
    
}
/*#logo p{
  font-family:"Quantum";
  font-size:35px;
  color:white;
}
*/

#purplep a, #green a, #blue a,  #quest a{
  /*color:white;*/
  font-size:15px;
  margin: 25px 10px;  
/*font-weight:600;*/
font-family:/*'MontserratB', */sans-serif;

    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    outline: 0;
  
    text-transform: uppercase;
    /*color: #ffffff;-moz-osx-font-smoothing: grayscale;*/
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    outline: 0;
  
  
 
  text-decoration: none;
  }

.topcontainer span {
  margin: 0;
  width:;
  background-color:;
  font-size:12px;
  /* margin: 25px 10px; */
  font-family:/*'MontserratB', */sans-serif;
  /* border-radius: 35px; */
  letter-spacing: 1px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  outline: 0;
  text-transform: uppercase;
  color: #ffffff;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  /* outline: 0; */
  padding: 25px 30px;
  text-decoration: none;
}
.topcontainer {
  background:rgba(100,63,115,.8); /*#643f73;  */
  height: 68px;
  /*margin-bottom: 25px;*/
  width:100%;
  margin-top:0px;
  margin:rgba(0,255,0,0.3);
  /*border-bottom: 20px rgba(242, 222, 48, 0.2);solid green;*/
  display: flex;
  justify-content: space-between;
  /*background:rgba(0, 8, 0,0.8);  rgba(0,255,0,0.3) ;*//*rgba(242, 222, 48, 0.2);*/
  /*background-color: #dfe29a;*/
  align-items: center;
  position:fixed;
  z-index: 100;
  /*padding-top:12px;
  padding-bottom:12px;*/
  }

.footer a {
    outline-style:none;
    text-decoration:none;
}
/*@supports (-moz-appearance:none) {
    .topcontainer {display:flex;
      justify-content:space-around;
      flex-wrap: wrap;
      height:70px;
    align-items: center;

  } 
}
@supports (-moz-appearance:none) {
    @media only screen and (max-width: 600px) {
    .topcontainer #logo {margin-top:}
      
}
}
@supports (-moz-appearance:none) {
    @media only screen and (max-width: 320px) {
    .topcontainer {display:block;justify-content: center;align-items: center}
    .topcontainer #logo{width:50px;display:none;}
     .topcontainer #blue{display:none;}
    }
    }



*/
 /*particles.js container ---- */ 

#particles-js { display:flex; height:685px;
 background-repeat: no-repeat; background-size:cover; z-index: 100;
width:100%;} 
  
/*#holder{
  height:300px;
position:flex;}*/

/*stying for services h3*/
#services h2,h3 {
  font-family:Montserrat,Font, Ariel;
  padding: 10px;
  font-size:30px;
  color:#fff;
  margin:0px;
}
#services h3 , h2{
  display: flex;
  justify-content: center;
  padding: 8px;
}
.icon {
  /* padding-top:15px; */
  /*border: 3px solid pink;*/
  /* margin:0px; */
}

/*.design {
  padding-top:25px;
}*/

#top{
    background-color: rgba(0,0,0,.5);
    line-height:1;
    color: white;
    padding:15px;
    border-radius:30px;
    background-color: rgba(0, 0, 0, 0.3);
    margin-top: 280px;
    font-family: 'Montserrat',serif;
    position:absolute;
    left: 50%;
    transform: translate(-50%, 0);
    font-size:52px;
    position:absolute;
    font-weight: 500;
} 
#square{
   padding:0px 15px;
   background-color:rgba(0,0,0,.3);
  color:white;
  margin-top:578px;
  z-index:10;

}

img.floating{width:20px;}
/*!!!!!!!!!!This is for the main heading web design & development its also conflicting with top and square!!!!!!!!!cant add .top or #top doesnt work dont reuse selector*/
 div h1 {
position:absolute;
margin-top:0px;
left: 50%;
    transform: translate(-50%, 0);
  
}


 @media only screen  and (max-width:660px) {
    #logo  p img {
       vertical-align:middle;
    max-width:150px;
    }
    
   
 
}


@media only screen  and (min-width:660px) {
    .color {
       
    background: /* url(https://images.pexels.com/photos/306825/pexels-photo-306825.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260);
    */
   /* url(https://cloud.addictivetips.com/wp-content/uploads/2017/12/winter-trees.jpg);*/
    
    /* url('winter (1).jpg');
    url(https://cdn.dodowallpaper.com/medium/692/winter-landscape-36.jpg);*/
    url('stock.jpg')
    }
    
   
 
}
@media only screen  and (max-width:649px){
  
#particle-js {
  display:none;
}

}
@media only screen and (min-width:1011px){
  #part1 {justify-content: center; align-self: center; align-items:center;/*margin-left:30px;*/}/*{margin-left:55px; margin-right:30px;}*/
}
@media only screen and (min-width:1020px) and (max-width:1030px){
   #part1 {
    /* margin-left:50px; */
    padding: 10px;
   }
}
/*.bder{align-content: center}*/
 
@media only screen and (max-width:1007px){
 /* #part1 p{margin-top:100px;}*/
 
}


/* menu will appear*/
@media only screen and (min-width:652px)and (max-width: 1024px) {
 #part1 p {  
  text-align: center;
 

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

#part1 {justify-content: center; align-self: center;}
 }
 @media only screen  and (min-width:1008px) {
  .dropdown{display:none;}
  part1 p{margin-left:80px;}
 
  
 }
@media only screen and (max-width: 1000px) {
  #services{flex-direction:column;align-items: center;}
}
@media only screen  and (max-width:682px){
.bder {align-items: center;flex-direction:column; align-items: center;}
}
@media only screen  and (max-width:1007px){
  #roundbtn {display:none;}
  
}
@media only screen  and (max-width:682px) {
  /*#square {margin-top:258px;}*/
    #top{margin-top:120px;font-size:46px;}
    /*.bder {align-items: center;flex-direction:column; align-items: center;}*/
    #part1 p {text-align: center;font-size:22px !important; }
    .color {
        display:none;
        background:url("sht8.jpg");
    }
#services{flex-direction:column;align-items: center;}

  
  #square{margin-top:326px;}
}
@media only screen and (min-width:682px) and (max-width: 1162px) 
{
  #square
  {margin-top:550px;}
}

@media only screen and (max-width:415px){
  footer div {
    text-align: center;
    display:flex;
    justify-content:center;
   flex-wrap:wrap;
  }
}
.caption .headline {
    color: #ffffff;
    font-family: Lato;
    font-weight: lighter;
    text-transform: uppercase;
    font-size: 40px;
    font-style: normal;
    letter-spacing: 2px;
    line-height: 1.4em;
    margin-bottom: 15px;
}

.contain{
  display:flex;
  justify-content: center;
  align-items:center;
}
 .caption {
    width: 100%;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
}



@media only screen  and (min-width:682px) {
.cover5{display:none;}
  .mobilevw{display:none;}
  #mb2{display:none;}
  #mb h1 {display:none;}/*needed because not in div */
  
}
@media only screen and (max-width: 682px){
.mobilevw {
    display: flex;
    justify-content: center;
    height: 380px;
}}/*442 css rulle on heightg may conflict*/
@media only screen and (max-width:550px){
#mb2 h1 {font-size: 17.9px;
    line-height: 20px;
    letter-spacing: 0;
    padding: 12px 20px;}
}


@media only screen and (min-width:550px){
#mb2 h1 {font-size: 25px;
    line-height: 35px;
    letter-spacing: 0;
    padding: 10px;}
}



@media only screen and (max-width:650px){
    }
@media only screen and (max-width: 767px)
.banner-bar h3 {
    font-size: 20px;
    line-height: 30px;
    letter-spacing: 0;
    padding: 10px;
}
@media only screen and (max-width: 1279px)
.banner-bar h3 {
    font-size: 42px;
}
@media only screen and (max-width: 1279px)
.banner-bar h3 {
    font-size: 42px;
}

@media only screen and (min-width:500px){
   #mb    h1  {left:47%;}
}

@media only screen and (max-width:500px){
   #mb h1{ left:46%;}
}

 #mb2 h1 {
  /*font-size:17.9px !important;*/
  /*font-weight:600;*/
  
  background-color:rgba(0,0,0,.5);
 /* line-height:20px;*/
  width:85%;
  
  /*border-radius:15px;*/
  font-family:VerlagB;
  margin-top:180px;
  padding:12px 20px;
  
  letter-spacing:1.5;
  
  z-index:10;
  text-transform:uppercase;
  
}


.mobilevw video{

  height: 480px;
  margin: 0;
  width: cover;
  z-index: -200;
  
}
/*
.cover5 {
  display: block;
  position:;
  background-color: rgba(300,300,00, .8);
  z-index: 253;
  height: 380px;
  width: ;
  margin: 0;
}*/

.topcontainer  #green:hover, .topcontainer #quest:hover, .topcontainer #blue:hover , .topcontainer #purplep:hover {
background-color:#efefef; color:black;
}


  #green a:hover , #purplep a:hover, #quest a:hover, #blue a:hover{
color:black;
}


.topcontainer  #
purplep:hover{
background-color:#FFF7B6;
color:black;
}

.dropbtn   {
    background-color:rgba(0, 0, 0,0.0);
    color: white;rgb(255,255,255,);
    padding: 15px;
   /* font-size: 16px;*/
    border-radius: 25px;
    border: none;
     font-family:Montserrat;
     font-weight: 800;
     outline-style: none;
}



.show {display: block;}

.dropdown-content {
    left:5%;
    
    
    
    top:85%;
    

    display: none;
    
     
     text-align:center;
    
    
    align-self:center;
    position: absolute;
    background-color:#688b08; rgba(111, 151, 49, .9);
    width: 90%;
    height:500px;
   width:90%;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
    z-index: 1;
    border-radius:25px;
   
    outline-style: none;
    
 -webkit-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}



@import url('https://fonts.googleapis.com/css?family=Lato:300');
.dropdown-content a {
    color: white;
    padding: 26px 25px;
    text-decoration: none;
    display: block;
    font-weight: 800;
    font-size:25px;
    font-family:'Montserrat';
   /* border-radius:35px;*/
   outline: none;
  
  
  
   -webkit-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.dropdown-content a:hover {background-color:rgba(255, 247, 182,.8);#FFF7B6; color:black;border-radius:35px;outline:none;}

/*.dropdown:hover .dropdown-content {display: block;}*/

.dropdown:hover .dropbtn {background-color: #688b08;}


.show{display:block;}
 
.topcontainer #purplep {
   margin: 0;
   /* background-color: #bf9b30; */#FF1493;   #bc37bf;
}
.topcontainer #green {
  margin: 0;
  /* background-color:#4CBB17; */#37bf7b; 76 187 23
}
#quest {
  /* background-color:#818b35; */
}
.topcontainer  #blue{
   /* background-color:#debc3b; */
   black;#374ebf;
}
.topcontainer #logo {
  /*background-color:#231eaa
font-family:"Quantum";
  font-size: 30px;
  font-weight:;
  border-radius:5px;
  margin-right:30px;/*background-color: #3b37bf;#231eaa;
  }*//
  }

#button {
padding-top: 20px;
}

img .float{
    width:20px;
}

.bder {
    
    
   
    background-color: white;
    padding:0px 0px 10px 0px;
    margin-bottom: 0px;
    display: flex;
    justify-content: space-around;
    
  
}



#part1 {
  line-height: 2;
 
  
  display: flex;
  justify-content:center;
  font-family: 'Montseratt';
  padding: 10px;
}


 #holder{
 /* height:;
  width:;
display:flex;
justify-content:center ;*/
display: flex;

/*
height: 460px;*/
align-items: center;


}
.holder div{background-color:black; }

div h2 img {
     url("colorsp10.png");
}


  
/*this p is really just part1 p */
 #part1 p {
  text-align:center;
  font-family: 'Montserrat','Lato',sans-serif;
  font-size:26px;
  
  color:#4d6316 ;
  letter-spacing: 2px;
  -webkit-font-smoothing:antialiased;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
  text-transform: uppercase;
  /* margin-right: 10px; */
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  outline: 0;
  font-weight:600;
  
}
html, body {
font-family:Lato;
size:18px;
 width: 100%;
height: auto;
margin: 0px;
padding: 0px;
overflow-x: hidden; 
}

 
.color{
 /* background:url("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1024px-Cat03.jpg");*/

 /*background-image:url("shutterstock_176793407 (1) - Copy.jpg");*/
 /* opacity: .8;*/
  z-index: -10;
   width:100%;
   background-repeat: no-repeat;
   background-size:cover; 
   background-position:center;

}
rect {
    fill:#fff;
}


@media only screen and (min-width:1000px){
  #services div {
    width: 33.3%;
  }
}
@media only screen and (max-width:1000px){
  #services div {
    width: 100%;
  }
  .bder {
    background-color:#613F67;
  }
  rect{
    fill:#613F67;
  }
  
}

@media only screen and (max-width:1000px){
  #services div {/* margin-top:20px; */}
}


.box{
    border: none!important;
    background-: #464545;
    background-color: #464545;
    /* height: 80px; */
}
#services div {
   /* border-radius:10px; */
   /*this will alloww indidual color/* background-color: white;*/
   /* box-shadow: 5px 13px 89px 0px; */
   /* margin:35px; */
   justify-content: center;
   padding: 25px;
}
div .design {
    background-color:#00bbac;
}
div .dev{
    background-color:#81a623;
}
div  .ux{
    background-color:#d2be07;
}
div #talk .talk { 
 border:none!important;
}
 #services p  {padding: 10px 0 0 0;font-family:'Montserrat';font-weight: 800px;font-size:18px;display:flex;justify-content: center;text-align: center;font-weight:lighter;margin:0px 15px;line-height:2;color:#FFF;}
#services {
   background-color: #613F67;
   /* background-color: #cfd6d863;*/
   display:flex;
   justify-content: space-around;
   /* margin:0px 0px; */
   /*height: 500px;*/
   width:100%;
   /* background:url(chfbr.png); */
   /*padding-bottom: 20px*/
   /*border-top:10px solid black;*/
}
#talk {
 border: none!important;
}
.talk {
  font-family: 'Montserrat', sans-serif;
  /*font-family: 'Lato',sans-serif;*/
  display: flex;
  justify-content:center;
  /* margin: 0px 0px; */
  background-color: rgb(121, 120, 120);
  
  solid white;*/
  font-weight:300;
  padding:115px 80px;
}
.talk p {
 border: none;
 
 font-size:20px;
 text-align:center;
 color:white;
 -webkit-font-smoothing: antialiased;
 
 line-height: 3em;
 letter-spacing:.5px;
 /* border: 5px solid pink; */
}

@media only screen  and (max-width:510px) {
    .talk p {
       border:none;
    line-height: 1.75em;
    padding: 25px 2px;
    }
    
   
 
}

@media only screen  and (max-width:810px){
    
    .talk{
    padding:80px 20px;
        
    }
}
#span:hover{
  color:grey;
}

.footer {order: none;display:flex;justify-content: center;
flex-direction: column;align-items: center;
align-content: center;background-color:rgba(0,0,0,.8);color:white;
padding:35px 25px 80px 25px;font-family:'Montserrat';font-size: 22px;text-align:center;border: none!important;}
.footer button {
    
    margin:5px;
  font-family:'Montserrat';
font-size: 22px;
color:white;
border-radius: 50px;
outline-style:none;
border: 2px solid white;
background:transparent;
text-transform: uppercase;

/*margin:10px 10px 20px 10px;*/
padding: 8px;
}
 
.footer button:hover{
  color:black; background:white;
  font-family:'MontserratB';
  outline-style:none;
}
.footer div  {
  
 align-items: center;
  align-content: center;
  justify-content: center;
  align-self: center;
  display: flex;
}
.get{
  font-size:50px;
}





/*animation*/

/*
==============================================
floating
==============================================
*/

.floating{
  animation-name: floating;
  -webkit-animation-name: floating;

  animation-duration: 1.5s; 
  -webkit-animation-duration: 1.5s;

  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}

@keyframes floating {
  0% {
    transform: translateY(0%);  
  }
  50% {
    transform: translateY(8%);  
  } 
  100% {
    transform: translateY(0%);
  }     
}

@-webkit-keyframes floating {
  0% {
    -webkit-transform: translateY(0%);  
  }
  50% {
    -webkit-transform: translateY(8%);  
  } 
  100% {
    -webkit-transform: translateY(0%);
  }     
}

/*
/*
==============================================
pulse
==============================================
*/

.pulse{
  animation-name: pulse;
  -webkit-animation-name: pulse;  

  animation-duration: 1.5s; 
  -webkit-animation-duration: 1.5s;

  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}

@keyframes pulse {
  0% {
    transform: scale(0.9);
    opacity: 0.7;   
  }
  50% {
    transform: scale(1);
    opacity: 1; 
  } 
  100% {
    transform: scale(0.9);
    opacity: 0.7; 
  }     
}

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(0.95);
    opacity: 0.7;   
  }
  50% {
    -webkit-transform: scale(1);
    opacity: 1; 
  } 
  100% {
    -webkit-transform: scale(0.95);
    opacity: 0.7; 
  }     
}

/*
==============================================
slideExpandUp
==============================================
*/


.slideExpandUp{
  animation-name: slideExpandUp;
  -webkit-animation-name: slideExpandUp;  

  animation-duration: 1.6s; 
  -webkit-animation-duration: 1.6s;

  animation-timing-function: ease-out;  
  -webkit-animation-timing-function: ease -out;

  visibility: visible !important; 
}

@keyframes slideExpandUp {
  0% {
    transform: translateY(100%) scaleX(0.5);
  }
  30%{
    transform: translateY(-8%) scaleX(0.5);
  } 
  40%{
    transform: translateY(2%) scaleX(0.5);
  }
  50%{
    transform: translateY(0%) scaleX(1.1);
  }
  60%{
    transform: translateY(0%) scaleX(0.9);    
  }
  70% {
    transform: translateY(0%) scaleX(1.05);
  }     
  80%{
    transform: translateY(0%) scaleX(0.95);   
  }
  90% {
    transform: translateY(0%) scaleX(1.02);
  } 
  100%{
    transform: translateY(0%) scaleX(1);    
  }
}

@-webkit-keyframes slideExpandUp {
  0% {
    -webkit-transform: translateY(100%) scaleX(0.5);
  }
  30%{
    -webkit-transform: translateY(-8%) scaleX(0.5);
  } 
  40%{
    -webkit-transform: translateY(2%) scaleX(0.5);
  }
  50%{
    -webkit-transform: translateY(0%) scaleX(1.1);
  }
  60%{
    -webkit-transform: translateY(0%) scaleX(0.9);    
  }
  70% {
    -webkit-transform: translateY(0%) scaleX(1.05);
  }     
  80%{
    -webkit-transform: translateY(0%) scaleX(0.95);   
  }
  90% {
    -webkit-transform: translateY(0%) scaleX(1.02);
  } 
  100%{
    -webkit-transform: translateY(0%) scaleX(1);    
  }
}

/*

/*
==============================================
slideLeft
==============================================
*/


.slideLeft{
  animation-name: slideLeft;
  -webkit-animation-name: slideLeft;  

  animation-duration: 2s; 
  -webkit-animation-duration: 2s;

  animation-timing-function: ease-in-out; 
  -webkit-animation-timing-function: ease-in-out;   

  visibility: visible !important; 
}

@keyframes slideLeft {
  0% {
    transform: translateX(150%);
  }
  50%{
    transform: translateX(-8%);
  }
  65%{
    transform: translateX(4%);
  }
  80%{
    transform: translateX(-4%);
  }
  95%{
    transform: translateX(2%);
  }     
  100% {
    transform: translateX(0%);
  }
}

@-webkit-keyframes slideLeft {
  0% {
    -webkit-transform: translateX(150%);
  }
  50%{
    -webkit-transform: translateX(-8%);
  }
  65%{
    -webkit-transform: translateX(4%);
  }
  80%{
    -webkit-transform: translateX(-4%);
  }
  95%{
    -webkit-transform: translateX(2%);
  }     
  100% {
    -webkit-transform: translateX(0%);
  }
}

/*
==============================================
slideLLight
==============================================
*/


.slideLLeft{
  animation-name: slideLeft;
  -webkit-animation-name: slideLeft;  

  animation-duration: 2s; 
  -webkit-animation-duration: 2s;

  animation-timing-function: ease-in-out; 
  -webkit-animation-timing-function: ease-in-out;   

  visibility: visible !important; 
}


@keyframes slidein {
    from{
       margin-left:100%;
       width:300%;
        
        
    }
    to {
        margin-left:0%;
        width:100%;
    }
    
}















/*
==============================================
slideRight
==============================================
*/


.slideRight{
  animation-name: slideRight;
  -webkit-animation-name: slideRight; 

  animation-duration: 1s; 
  -webkit-animation-duration: 1s;

  animation-timing-function: ease-in-out; 
  -webkit-animation-timing-function: ease-in-out;   

  visibility: visible !important; 
}

@keyframes slideRight {
  0% {
    transform: translateX(-150%);
  }
  50%{
    transform: translateX(8%);
  }
  65%{
    transform: translateX(-4%);
  }
  80%{
    transform: translateX(4%);
  }
  95%{
    transform: translateX(-2%);
  }     
  100% {
    transform: translateX(0%);
  } 
}

@-webkit-keyframes slideRight {
  0% {
    -webkit-transform: translateX(-150%);
  }
  50%{
    -webkit-transform: translateX(8%);
  }
  65%{
    -webkit-transform: translateX(-4%);
  }
  80%{
    -webkit-transform: translateX(4%);
  }
  95%{
    -webkit-transform: translateX(-2%);
  }     
  100% {
    -webkit-transform: translateX(0%);
  }
}



.fadeOutUpBig {
  -webkit-animation-name: fadeOutUpBig;
  animation-name: fadeOutUpBig;
}
@-webkit-keyframes flip {
  from {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  to {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

@keyframes flip {
  from {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  to {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

.animated.flip {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip;
}
/*
src="https://images.fineartamerica.com/images/artworkimages/mediumlarge/1/autumn-bliss-colorful-abstract-painting-manjiri-kanvinde.jpg" 
#pnav a{
    background:url(http://www.us-bingo.com/images/Tickets/Solid-Color-Tyvek-Wrist-Tickets-lg.gif) 0 0 no-repeat;
    display:block;
      text-align: center;
      color: #fff;
      padding-top: 20px;;
    width:500px;
    height:300px;

    -webkit-transition: background-position 2s ease-in-out;
    -moz-transition: background-position 2s ease-in-out;
    -ms-transition: background-position 2s ease-in-out;
    -o-transition: background-position 2s ease-in-out;
    transition: background-position 2s ease-in-out;
}

#pnav a:hover {
    background-position:0px -200px;

}

const bg = document.querySelector('.background-image');
const windowWidth = window.innerWidth / 5;
const windowHeight = window.innerHeight / 5 ;

bg.addEventListener('mousemove', (e) => {
  const mouseX = e.clientX / windowWidth;
  const mouseY = e.clientY / windowHeight;
  
  bg.style.transform = `translate3d(-${mouseX}%, -${mouseY}%, 0)`;
});*/



.animated {
  animation-duration: 2.5s;
  animation-fill-mode: both;
  animation-iteration-count: 2;
}

@keyframes flip {
  0% {transform: perspective(400px) translateZ(0) rotateY(0) scale(1);animation-timing-function: ease-out;}
  40% {transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);animation-timing-function: ease-out;}
  50% {transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);animation-timing-function: ease-in;}
  80% {transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);animation-timing-function: ease-in;}
  100% {transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);animation-timing-function: ease-in;}
}
.animated.flip {
  backface-visibility: visible;
  animation-name: flip;
}
@keyframes lightSpeedIn {
  0% {transform: translateX(100%) skewX(-30deg);opacity: 0;}
  60% {transform: translateX(-20%) skewX(30deg);opacity: 1;}
  80% {transform: translateX(0%) skewX(-15deg);opacity: 1;}
  100% {transform: translateX(0%) skewX(0deg);opacity: 1;}
}
.lightSpeedIn {
  animation-name: lightSpeedIn;
  animation-timing-function: ease-out;
}

@keyframes rollIn {
  0% {opacity: 0;transform: translateX(-100%) rotate(-120deg);}
  100% {opacity: 1;transform: translateX(0px) rotate(0deg);}
}
.rollIn {
  animation-name: rollIn;
}