/*
Theme Name: quake
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: quake
Tags:

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

quake is based on Underscores http://underscores.me/, (C) 2012-2016 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal http://necolas.github.io/normalize.css/
*/




.puddle_beach_ball {
  width: 272px;
  height: 262px;
  position: fixed;
  bottom: -86px;
  left: 30px;
  z-index: 999;
  display: none;
}
.puddle_beach_ball.lazy-load {
  display: block;
}
.puddle_beach_ball .hand,
.puddle_beach_ball .beach-ball {
  position: absolute;
  transform-origin: center;
}
.puddle_beach_ball .hand {
  bottom: 0;
}
.puddle_beach_ball .hand-1 {
  width: 61px;
  height: 164px;
  left: 0;
}
.puddle_beach_ball .hand-2 {
  width: 70px;
  height: 173px;
  left: 65px;
}
.puddle_beach_ball .hand-3 {
  width: 88px;
  height: 111px;
  right: 55px;
}
.puddle_beach_ball .hand-4 {
  width: 111px;
  height: 149px;
  right: 0;
}
.puddle_beach_ball .beach-ball {
  top: 0;
}
.puddle_beach_ball .beach-ball.desktop {
  width: 161px;
  height: 158px;
  left: 10px;
}
.puddle_beach_ball:hover .hand {
  transform-origin: center bottom;
  -webkit-animation: hand-bobble 500ms 6.8 alternate;
          animation: hand-bobble 500ms 6.8 alternate;
}
.puddle_beach_ball:hover .beach-ball {
  /* animation-fill-mode: forwards; */
  animation: beach-ball-toss-small 800ms ease-in-out 2 alternate, beach-ball-toss-big 1000ms ease-in-out 1600ms, beach-ball-toss-small 800ms ease-in-out 2600ms reverse;
}

@-webkit-keyframes hand-bobble {
  to {
    transform: translateX(10%) rotate(23deg);
  }
}

@keyframes hand-bobble {
  to {
    transform: translateX(10%) rotate(23deg);
  }
}
@-webkit-keyframes beach-ball-toss-small {
  50% {
    top: -50%;
  }
  to {
    transform: translateX(40%) rotate(23deg);
    top: -10%;
  }
}
@keyframes beach-ball-toss-small {
  50% {
    top: -50%;
  }
  to {
    transform: translateX(40%) rotate(23deg);
    top: -10%;
  }
}
@-webkit-keyframes beach-ball-toss-big {
  50% {
    top: -100%;
  }
  to {
    transform: translateX(40%) rotate(383deg);
    top: -10%;
  }
}
@keyframes beach-ball-toss-big {
  50% {
    top: -100%;
  }
  to {
    transform: translateX(40%) rotate(383deg);
    top: -10%;
  }
}



/* The Overlay (background) */
.overlay {
  /* Height & width depends on how you want to reveal the overlay (see JS below) */   
  height: 100%;
  width: 0;
  position: fixed; /* Stay in place */
  z-index: 99999999999999999; /* Sit on top */
  left: 0;
  top: 0;
  background-color: #000;
  overflow-x: hidden; /* Disable horizontal scroll */
  transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

.wpcf7-spinner{
	display: block;
}

.overlay p{
	color: #fff;
	font-size: 1.1rem;
}

.overlay h2{
	color: #00c9ff;
}

.form-line{
	border-top: 1px solid #918d8d;
	margin-top: 15px;
	padding-bottom: 15px;
}

.overlay input[type=text], .overlay input[type=email], .overlay textarea{
	padding: 15px 25px;
	width: 100%;
	border-radius: 15px;
	border: 1px solid #fff;
	max-width: 350px;
	color: #000;
	margin-bottom: 25px;
	max-width: none;
}

.overlay input[type=submit]{
	margin-top: 45px;
	border-radius: 15px;
    padding: 15px 25px;
    text-transform: uppercase;
    font-size: 14px;
    display: block;
    background-color: #00c9ff;
    color: #fff;
    width: 100%;
    margin: auto;
    border: 1px solid #00c9ff;
}

/* Position the content inside the overlay */
.overlay-content {
	margin: 30px auto;
  position: relative;
  top: 10%; /* 25% from the top */
  width: 100%; /* 100% width */
z-index: 3;
	max-width: 600px;
  text-align: center; /* Centered text/links */

}

.overlay-content label{
	color: #7b7b7b;
	margin-bottom: 5px;
}


/* The navigation links inside the overlay */
.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block; /* Display block instead of inline */
  transition: 0.3s; /* Transition effects on hover (color) */
}

/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}

/* Position the close button (top right corner) */
.overlay .close_btn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}



/*--zoom-fade--*/
.zoom-fade, .featured-item:after{
    animation-name: zoom-fade; 
    animation-duration: 5s; 
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  
  -webkit-animation-name: zoom-fade; 
    -webkit-animation-duration: 5s; 
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
  
  -moz-animation-name: zoom-fade; 
    -moz-animation-duration: 5s; 
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
  
  -ms-animation-name: zoom-fade; 
    -ms-animation-duration: 5s; 
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
  
  -o-animation-name: zoom-fade; 
    -o-animation-duration: 5s; 
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
}

@-webkit-keyframes zoom-fade {
  0% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }

  50% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  100% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}

@keyframes zoom-fade {
  0% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }

  50% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  100% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}

.bg-animation{
	position: absolute;
	width: 100%;
	height: 100%;
	background-size: cover;
}