@import url('https://fonts.googleapis.com/css?family=Lato:300,400');
@import url('https://fonts.googleapis.com/css?family=Montserrat');
@import url('https://fonts.googleapis.com/css?family=MontserratB');



@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;

}
#purplep a, #green a, #blue a  {
  color:white;
  font-size:12px;
  margin: 25px 10px;  
/*font-weight:600;*/
font-family: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 {
  width:;
  background-color: ;
 
  font-size:12px;
  margin: 25px 10px;
font-family: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: 15px 20px;
  
  text-decoration: none;
  
   

}
.topcontainer {
height: 58px; 



width:100%;
  margin-top:0px;
  margin:rgba(0,255,0,0.3) ;
  
  display: flex;
  justify-content: space-between;
  
  
 align-items: center;
  position:fixed;
  z-index: 100;
 

  
}

.footer a {
    outline-style:none;
    text-decoration:none;
}

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

#particles-js { display:flex; height:635px;
 background-repeat: no-repeat; background-size:cover; z-index: 100;
width:100%;} 

/*stying for services h3*/
#services h2,h3 {
  font-family:Lato, Font;
padding: 10px;
 font-size:32px;
  color:rgb(51, 72, 109);
  margin:0px;
}

 .icon {
  padding:10px;;
 
 
}

img{
    padding:10px;
}

@media only screen and (max-width:2080px) {
    #top {font-size:50px; }
    
}
  @media only screen and (max-width:1280px) {
    #top {font-size:38px; width:480px;}
    
}
  
#top{
    background-color: rgba(0,0,0,.5);
    line-height:1;
  color: white;
 
 padding:15px;
 border-radius:30px;
  background-color:rgba(0,0,0,.5); 
  margin-top: 280px;
   font-family: Font,'Montserrat',serif;
 position:absolute;

left: 50%;
    transform: translate(-50%, 0);

 /*.font-size:52px;*/
  position:absolute;

font-weight:600;

} 
#square{
   
   background-color:rgba(0,0,0,.3);
  color:white;
  margin-top:578px;
  z-index:10;

}
/*!!!!!!!!!!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 (min-width:660px) {
    .color {
      background: url('crocus.jpg');
       
       
    /*background:url('http://www.golfian.com/wp-content/uploads/2016/08/Wonderful-Purple-Winter-Crocus-Flower-Picture.jpg'); /*url('cvc.svg');*/
    }
    
   
 
}
@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;
}}
@media only screen and (min-width:1020px) and (max-width:1030px){
   #part1 {
    margin-left:50px;
   }
}

 
@media only screen and (min-width:1080px){
 /* #part1 p{margin-top:100px;}*/
 
}



@media only screen and (min-width:652px)and (max-width: 1024px) {
 #part1 p {  
 font-size: 6px; 
 text-align: center;
 padding:2px;

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

#part1 {justify-content: center; align-self: center;}
 }
 @media only screen  and (min-width:914px) {
  .dropdown{display:none;}
 }
@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:914px){
  #roundbtn {display:none;}
}
@media only screen  and (max-width:682px) {
  
    #top{margin-top:120px;font-size:46px;}
    
    #part1 p {text-align: center; }
    .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;
}}
@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 {
  
  
  background-color:rgba(0,0,0,.5);
 
  width:85%;
  
  
  font-family:VerlagB;
  margin-top:180px;
  padding:12px 20px;
  
  letter-spacing:1.5;
  
  z-index:10;
  text-transform:uppercase;
  
}


.mobilevw video{

  height: 380px;
  margin: 0;
  width: cover;
  z-index: -200;
  
}


.topcontainer  #green:hover, .topcontainer #quest:hover, .topcontainer #blue:hover , .topcontainer #purplep:hover {
background-color:#FFF7B6; 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.8);
    color: white;rgb(255,255,255,);
    padding: 16px;
  
    border-radius: 15px;
    border: none;
     font-family:Montserrat;
     font-weight: 800;
     outline-style: none;
}



.dropdown-content {
    display: none;
   
    position: absolute;
    background-color:rgba(68, 76, 56, .9);#333333;
    min-width: 360px;
   width:500px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
    z-index: 1;
    border-radius:25px;
    margin:0px 0px;
    outline-style: none;
}
@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';
   
   outline: none;
    
   
}

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



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


.show{display:block;}
 
.topcontainer #purplep {
   background-color: #bf9b30;#FF1493;   #bc37bf;
   


}
.topcontainer #green {
  
   background-color:#4CBB17  ;#37bf7b; 76 187 23
    

    
}
#quest {
  background-color:#818b35;
}
.topcontainer  #blue{
   background-color:#debc3b; black;#374ebf;
    
}
.topcontainer #logo {
  
  font-family:"Quantum";
  font-size: 30px;
 
  border-radius:5px;
  margin-right:30px;
  }

#button {
padding-top: 20px;
}
.bder{


border-top:rgba(0, 0, 0,0.8) 10px solid;
background-color:rgba(0, 0, 0,0.8) ; 
margin-bottom: 0px;
display: flex;
justify-content:space-around;

margin-top:0px;

border-bottom:rgba(0, 0, 0,0.8) 10px solid;
}

#part1 {
  
  display: flex;
  justify-content:center;
  
  
  font-family: 'Montseratt';

}


 #holder{
 
display: flex;


align-items: center;
background-color:black;

}
.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;
  font-weight: lighter;
  color:white;

   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:lighter;
  margin-left:25px;
}
html, body {
font-family:Lato;
size:18px;
 width: 100%;
height: auto;
margin: 0px;
padding: 0px;
overflow-x: hidden; 
}

 
.color{
 
  z-index: -10;
   width:100%;
   background-repeat: no-repeat;
   background-size:cover; 
   background-position:center;

}

#logo p{
  font-family:"Lato";
  font-size:35px;
  color:white;
}

@media only screen and (min-width:1000px){
  #services div {
    width:25%;
   
  }
}
@media only screen and (max-width:1000px){
  #services div {
    width:80%;

  }
}

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


.box{
    
   
  height: 80px;
  
  background:url(chfbr.png);
}
#services div {border-radius:10px;
    background-color: white;
    
    box-shadow: 5px 13px 89px 0px;


   margin:35px;
  justify-content: center;
  padding-bottom:25px;

}

#services h3 , h2{
  display: flex;
  justify-content: center;
  padding: 8px;
}
 #services p  {
    
  font-family:'Montserrat';
  font-weight: 800px;
  font-size:20px;
  display:flex;
  justify-content: center;
  text-align: center;
  font-weight:lighter;
  margin:0px 15px;
}
#services {
   
   
  
  display:flex;
  justify-content: space-around;
 
  margin:0px 0px;
 
  width:100%;
  background:url(chfbr.png);
  
}
.talk {
  font-family: 'Montserrat'; 
  display: flex;
  justify-content:center;
  margin: 0px 0px;
  background-color:rgba(0,0,0,0.9);
  width:100%;
 /* border: 2px solid white;*/
  font-weight:300;
  padding:0px 50px;
}
.talk p {
 margin:20px 0px;

  font-size:20px;
  text-align:center;
  color:white;
  -webkit-font-smoothing: antialiased;
   padding: 25px 10px ;
   
   
    line-height: 3em;
    letter-spacing:.5px;


}

@media only screen  and (max-width:510px) {
    .talk p {
       
    line-height: 1.75em;
    padding: 25px 2px;
    }
    
   
 
}
#span:hover{
  color:grey;
}

.footer {
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;

}
.footer button {
  font-family:'Montserrat';
font-size: 22px;
color:white;
border-radius: 50px;
outline-style:none;
border: 2px solid white;
background:transparent;



padding: 8px;
}
 
.footer button:hover{
 
  color:black; background:white;
  font-family:'Montserrat';
  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%);
  }
}

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















/*
==============================================
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;
}