/*
	Theme Name: CP3
	Theme URI: http://coolpad.us
	Description: Custom Theme Built by Tim + Baltik
	Version: 1.4.3
	Author: Tim Brandon
	Author URI: http://timbrandon.com
	Tags: Coolpad

	License: MIT
	License URI: http://opensource.org/licenses/mit-license.php
*/

/*------------------------------------*\
    MAIN
\*------------------------------------*/

/* global box-sizing */
*,
*:after,
*:before {
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	-webkit-font-smoothing:antialiased;
	font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}
/* html element 62.5% font-size for REM use */
html {
	font-size:62.5%;
}
body {
	font:300 14px/1.4 'TTNorms-Regular', Helvetica, Arial, sans-serif;
	color:#444;
	-webkit-transition: all 0.3s ease !important;
	-moz-transition: all 0.3s ease !important;
	transition: all 0.3s ease !important;
	overflow-x: hidden;
	left:0;
	position: relative;
	text-rendering:optimizeLegibility;
	font-variant-ligatures: none;
	
}
/* clear */
.clear:before,
.clear:after {
    content:' ';
    display:table;
}

.clear:after {
    clear:both;
}
.clear {
    *zoom:1;
}
img {
	max-width:100%;
	vertical-align:bottom;
}
a {
	color:#444;
	text-decoration:none;
}
a:hover {
	color:#444;
}
a:focus {
	outline:0;
}
a:hover,
a:active {
	outline:0;
}

.page-template-default main a{
	color:#00A9B7;
	text-decoration: underline;
}
input:focus {
	outline:0;
	border:1px solid #04A4CC;
}
.align-center{
	text-align: center;
}
.align-left{
	text-align: left;
}
.align-right{
	text-align: right;
}

h1, h2, h3{
  font-family: 'TTNorms-Bold';
}


.product-loop #post-789.flex_item{
	display: none !important;
}
.similar-products #post-789.flex_item{
	display: none !important;
}

body.postid-708 .similar-products #post-708.flex_item{
	display:none !important;
}

/*------------------------------------*\
    STRUCTURE
\*------------------------------------*/

/* wrapper */
.wrapper {
	max-width:1200px;
	width:98%;
	margin:0 auto;
	position:relative;
}
/* header */
.header {
	height: 85px;
	width: 100%;
	box-shadow: 0 4px 10px -4px #ccc;
	position: fixed;
	background-color: rgba(255,255,255,.90);
	z-index: 10;
	top: 0;
  transition: top 0.2s ease-in-out;
}

.nav-up {
    top: -85px;
}

/* logo */
.logo {
	width: 200px;
  height: 42px;
  /*background-image: url(img/coolpad_logo.png);*/
	background-image: url("img/coolpad_logo_18.png");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  float: left;
	margin-top: 20px;
}
.logo a{
	display: block;
	width: 100%;
	height: 100%;
}
.logo-img {

}


body.search-results .date, .search-results .author{
	display: none !important; 
	
}

body.search-result .article-featured-box, body.search-result article.press{
	border:none !important;
}

main{
	padding-top: 85px;
}

/* nav */
.nav {

}
.main-menu{
	width: 100%;
}
.main-menu ul{
	margin: 0px;
	padding: 25px 0px 0px;
	text-align: right;
}
.main-menu ul li{
	list-style: none;
	display: inline-block;
}
.main-menu ul li a{
	padding: 20px;
	font-size: 18px;
	color:#444;
}

.main-menu ul li a:hover{
	text-decoration: none;
}

.main-menu ul li.search-icon-btn a, .main-menu ul li.language-select-btn a{
	font-size: 0px !important;
} 

.search-icon-btn{
	display: inline-block;
	width: 25px;
	height: 24px;
	background-image: url("img/search_icon.png");
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat; 
	font-size: 0px !important;
  margin-right: 20px;
	margin-left: 45px;
	line-height: 35px;
}
.language-select-btn{
	font-size: 0px !important;
	display: inline-block;
	width: 25px;
	height: 25px;
	background-image:url("img/en_icon.png");
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	line-height: 35px;
	
  
}

/* sidebar */
.sidebar {

}
/* footer */
.footer {
	width: 100%;
	background-color: #00A9B7;
	color:#FFF;
	padding: 100px 0px;
	font-size: 16px;
}
.footer h3{
	font-family: 'TTNorms-Bold';
	text-transform: uppercase;
	color: #FFF;
	font-size: 18px;
	display: block;
	margin-bottom: 20px;
}
.footer_sign_up p{
	max-width: 465px;
}
/* Footer Nav */
.footer_nav ul li{
	list-style: none;
	float: left;
	width: 33.33%;
}
.footer_nav .sub-menu{
	padding: 0px;
}
.footer_nav .sub-menu li{
	display:block;
	padding: 5px 0px;
	margin: 0px;
	width: 100%;
}
.footer_nav  li a{
  font-family: 'TTNorms-Bold';
	text-transform: uppercase;
	color: #FFF;
	font-size: 18px;
	display: block;
	margin-bottom: 20px;
}
.footer_nav .sub-menu li a{
  font-family: 'TTNorms-regular';
	color:#FFF;
	font-size: 16px;
	text-transform: none;
	margin-bottom: 0px;
}
.footer_nav .sub-menu li a:hover{
	text-decoration: underline;
}
.footer_nav .sub-menu li.location-menu-item a{
	font-size: 10px;
}

.copy-links a{
	color:#3B3D3D;
}
.copy-links a:hover{
	text-decoration: underline;
}

.social-icons{
	padding: 75px 0px 0px;
	font-size: 24px;
	text-align: left;
}
.social-icons a i{
	color:#FFF;
	margin-top: 8px;
}
.social-icons a i:hover{
	color:#FFF;
	margin-top: 8px;
}

.social-icons a i.fa-facebook{
	  background-image: url(img/svg-icons/facebook.svg);
    background-size: contain;
    width: 100%;
    height: 100%;
    display: block;
    background-position: center center;
    background-repeat: no-repeat;
    max-width: 20px;
    margin: 0px auto;
}
.social-icons a i:hover.fa-facebook{
	background-image: url(img/svg-icons/facebook_white.svg);
}

.social-icons a i.fa-twitter{
	  background-image: url(img/svg-icons/twitter.svg);
    background-size: contain;
    width: 100%;
    height: 100%;
    display: block;
    background-position: center center;
    background-repeat: no-repeat;
    max-width: 20px;
    margin: 0px auto;
}

.social-icons a i:hover.fa-twitter{
	  background-image: url(img/svg-icons/twitter_white.svg);
}

.social-icons a i.fa-youtube{
	  background-image: url("img/svg-icons/youtube.svg");
    background-size: contain;
    width: 100%;
    height: 100%;
    display: block;
    background-position: center center;
    background-repeat: no-repeat;
    max-width: 20px;
    margin: 0px auto;
}
.social-icons a i:hover.fa-youtube{
	  background-image: url("img/svg-icons/youtube_white.svg");
}

.social-icons a i.fa-instagram{
	  background-image: url("img/svg-icons/instagram.svg");
    background-size: contain;
    width: 100%;
    height: 100%;
    display: block;
    background-position: center center;
    background-repeat: no-repeat;
    max-width: 20px;
    margin: 0px auto;
}
.social-icons a i:hover.fa-instagram{
	  background-image: url("img/svg-icons/instagram_white.svg");
}

.social-icons a i.fa-linkedin{
	  background-image: url("img/svg-icons/linkedin.svg");
    background-size: contain;
    width: 100%;
    height: 100%;
    display: block;
    background-position: center center;
    background-repeat: no-repeat;
    max-width: 20px;
    margin: 0px auto;
	fill: red;
}
.social-icons a i:hover.fa-linkedin{
	  background-image: url("img/svg-icons/linkedin_white.svg");
}

.social-icon-svg{
	fill: red;
}


span.icon-circle{
	 width: 40px;
   height: 40px;
   background-color: #FFF;
   display: inline-block;
   border-radius: 50px;
	text-align: center;    
	margin-left: 10px;
}

span.icon-circle:hover{
	background-color:#37838B;
}

.copyright{
	color:#3B3D3D;
}
.copy-links{
	margin-left: 10%;
}
.footer-globe{
	background-image: url("img/en_footer_icon.png");
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	width: 73px;
	height: 28px;
	float: right;
}


/*------------------------------------*\
    Buttons
\*------------------------------------*/
.blue_btn{
	border-radius: 28px;
	height: 55px;
	line-height: 55px;
	background-color:#00A9B7;
	text-align: center;
	display: inline-block;
	width: auto;
  padding: 0px 55px;
	color:#FFF;
  font-family: 'TTNorms-Bold';
	font-size: 18px;
	
}

.btn{
	border-radius: 28px;
	height: 55px;
	line-height: 55px;
	text-align: center;
	display: inline-block;
	width: auto;
	min-width: 295px;
  padding: 0px 55px;
	color:#FFF;
  font-family: 'TTNorms-Bold';
	font-size: 18px;
	background-color:#00A9B7;
	
}

.btn.blue{
	background-color:#00A9B7;
}


.btn.blue:hover{
	background-color:#38848B;
	color:#FFF !important;
}

.btn.red{
	background-color:#F0544F;
}

.btn.red:hover{
	color:#FFF !important;
	background-color:#D13529;
}

.btn.yellow{
	background-color:#FFCE40;
}

.btn.yellow:hover{
	color:#FFF !important;
	background-color:#F2B833;
}

.btn.grey{
	background-color:#3b3d3d;
}

.btn.grey:hover{
	color:#FFF !important;
	background-color:#2b2d2d;
}



#zrf-form #zrf_submit{
	border-radius: 28px;
	height: 55px;
	line-height: 55px;
	text-align: center;
	display: inline-block;
	width: auto;
	min-width: 295px;
  padding: 0px 55px;
	color:#FFF;
  font-family: 'TTNorms-Bold';
	font-size: 18px;
	background-color:#00A9B7;
	border:none;
}
#zrf-form #zrf_submit:hover{
	background-color:#38848B;
	color:#FFF !important;
}
#zrf-form input, #zrf-form textarea{
	  min-height: 40px;
    background-color: rgba(245, 248, 248, 1);
    border: none;
    padding: 10px;
}

#zrf-form label{
	font-size: 16px;
	line-height: 20px;
	text-transform: uppercase;
	font-family: 'TTNorms-Medium';
	
}

.hero-page-content{
	padding: 60px 0px;
}

.hero span.dark{
	color:#000 !important;
}

/*------------------------------------*\
    Mailchimp Form
\*------------------------------------*/
#mc_embed_signup{
	max-width: 465px;
}
#mc_embed_signup input{
	width: 100%;
	height: 55px;
	border:none;
}
#mc_embed_signup input.email{
	border-top-left-radius: 28px;
	border-bottom-left-radius: 28px;
	text-indent: 15px;
	color:#00A9B7;
	font-size: 16px;
	border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
#mc_embed_signup input.email::placeholder{
	color:#00A9B7;
	font-size: 16px;
}
#mc_embed_signup input.button{
	background-color:#37838B;
	text-transform: uppercase;
	color:#FFF;
	font-size: 16px;
  font-family: 'TTNorms-Bold';
	border-top-right-radius: 28px;
	border-bottom-right-radius: 28px;
	border-bottom-left-radius: 0px;
  border-top-left-radius: 0px;
	
	
	
}
/*------------------------------------*\
    Hero Slider
\*------------------------------------*/
.hero{
	min-height:633px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	width: 100%;
	margin:0;
	text-align: center;
	display: flex;
  align-items: center;
  justify-content: center;
	color:#FFF;
}
.hero p{
	font-size: 18px;
	max-width: 421px;
	margin: 0px auto 20px;
}


.hero h2:before{
	content: "";
	width: 78px;
	height: 4px;
	display: block;
	margin: 10px auto;
}


.hero.yellow h2:before{
	background-color:#FFCE40;
}

.hero.grey h2:before{
	background-color:#3b3d3d;
}

.hero.blue h2:before{
	background-color:#00A9B7;
}
.hero.red h2:before{
	background-color:#F0544F;
}



.hero h2{
	font-size: 30px;
	line-height: 36px;
	text-align: center;
	display: inline-block;
	margin: 10px 10px 35px;
}
.hero .sub_title{
	font-size: 12px;
	font-family: 'TTNorms-Medium';
}
.hero-np{
	width: 320px;
	height: 130px;
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	margin: 20px auto 0;
}

.hero-slider .bx-controls-direction{
	/*display: none;*/
}
.hero-slider .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager{
	text-align: right;
	margin-right: 20px;
	right: 35px;
}

.hero-slider{
	position: relative
}


.hero-product-image{
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	width: 100%;
	min-height: 500px;
}

/*------------------------------------*\
    BLURB
\*------------------------------------*/

.blurb{
	width: 100%;
	padding: 50px 0px;
	background-color:#00A9B7;
	color:#FFF;
	text-align: center;
	font-size: 21px;
	font-family: 'TTNorms-Medium';
	line-height: 36px;
}
.blurb p{
	max-width: 824px;
	margin: 0px auto;
}
.blurb-logo{
	width:280px;
	height: 130px;
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	margin: 40px auto;
}

.bx-pager-item:first-of-type:last-of-type { 
    display: none
}
/*------------------------------------*\
    Spotlight Content
\*------------------------------------*/

.content-spotlight{
	padding: 60px 0px;
	text-align: center;
	background: linear-gradient(0deg, rgba(213,213,213,1) 0%, rgba(255,255,255,1) 83%);


}

.content-spotlight p{
	font-family: 'TTNorms-Light';
	font-size: 16px;
}

.content-spotlight a{
	color:#00A9B7;
	font-family: 'TTNorms-Bold';
	font-size: 18px;
	margin-top: 30px;
	display: block;
}
.content-spotlight a:hover{
	text-decoration: underline;
}


.learn-more-btn {
	color:#00A9B7;
	font-family: 'TTNorms-Bold';
	font-size: 18px;
	margin-top: 30px;
	display: block;
}
.learn-more-btn:hover{
	text-decoration: underline;
	color:#00A9B7;
	
}



.content-spotlight h3{
	font-size: 30px;
	line-height:36px;
	margin-bottom: 0px;
}
.spotlight-image{
	width: 100%;
	min-height: 550px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
}

/*------------------------------------*\
    Featured Products Section - Home
\*------------------------------------*/
.featured-products{
	border:solid #D8D8D8 4px;
	padding: 20px;
	margin: 100px 20px;
}
.featured-box{
	padding: 30px;
  background: linear-gradient(0deg, rgba(213,213,213,1) 0%, rgba(255,255,255,1) 83%);
  margin: 10px;
	min-height: 436px;
}
.featured-box p{
	min-height: 50px;
}

.featured-products h2{
	font-size: 30px;
  text-align: center;
  display: block;
  background-color: #FFF;
  margin-top: -40px;
  max-width: 330px;
  margin: -40px auto 40px;
}
.featured-products h3{
	font-size: 30px;
	line-height: 36px;
}
.featured-product-image{
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	width: 264px;
	height: 360px;
	margin-top: 15px;
}
.featured-bar{
	margin: -108px 10px 0px;
  padding: 12px;
}
.featured-bar.blue{
	background-color:#00A9B7;
}
.featured-bar.yellow{
	background-color:#FFCE40;
}

.featured-bar.grey{
	background-color:#3b3d3d;
}


.featured-bar p{
	text-transform: uppercase;
	font-size: 13px;
	font-family: 'TTNorms-Bold';
	letter-spacing: 3px;
	margin-top: 10px;
	margin-bottom: 0px;
}
.featured-bar.blue p{
	color:#37838B;
}

.featured-bar.yellow p{
	color:#D58432;
}

.featured-bar h3{
	margin-top: 0px;
	color:#FFF;
	font-size: 30px;
	margin-bottom: 10px;
}

.compare-box h3{
	      font-family: TTNorms-light;
    text-align: left;
    padding: 0px 0px 18px;
    border-bottom: solid 1px #D8D8D8;
    max-width: 85%;
    margin: 0px auto;
	font-size: 16px;
}

.compare-box .spec-icon{
	margin-left:15px;
	margin-right: 15px;
	width: 50px;
	height: 50px;
	margin-bottom: -20px;
	margin-top: 5px;
}

.feature-arrow{
	width:55px;
	height: 55px;
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	float: right;
	display: inline-block;
	    margin-top: -65px;
    margin-right: 10px;
	position: relative;
	z-index: 1;
}
.featured-bar.yellow .feature-arrow{
	background-image: url("img/wearable-icon-arrow.png");
}
.featured-bar.blue .feature-arrow{
	background-image: url("img/smartphone_icon_arrow.png");
}
.featured-shop-all{
	text-align: center;
	margin: 50px auto 40px;
}



/*------------------------------------*\
    Home About section
\*------------------------------------*/

.home-about-section{
	text-align: center;
	background-color:#F4F4F4;
	padding: 55px 0px;
}

.home-about-section h3{
	font-size: 30px;
	margin-bottom: 0px;
}

.about-box{
	min-height: 300px;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	margin: 30px 10px;
}

.about-bar h3{
	font-size: 18px;
  margin: 10px;
  padding: 20px;
  margin-top: -30px;
}

.about-bar h3.about-hover{
	display: none;
	background-color:#F0544F;
	color:#FFF;
	    margin-top: -75px;
    z-index: 1;
    position: relative;
}
	
	.about-bar:hover h3.about-hover{
		display: block;
	}

/*.about-box:hover + .about-bar h3.about-no-hover{
	display: none;
}
.about-box:hover + .about-bar h3.about-hover{
	display: block;
}
*/


/*------------------------------------*\
    Trusted By
\*------------------------------------*/
.trusted-by-bar{
	width: 100%;
	color:#FFF;
	background-color: #3B3D3D;
	padding: 60px 0px;
}
.trusted-by-bar h3{
	text-align: center;
	text-transform: uppercase;
	font-size: 13px;
	letter-spacing: 3px;
}
.trust-logos{
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	background-image: url("img/carrier_logos.png");
	width: 100%;
	min-height: 100px;
}

.featured-logo-single{
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	width: 100%;
	min-height: 100px;
}
.featured-logo-single a{
	display: block;
	width: 100%;
	height: 100%;
}



/*------------------------------------*\
    Hero Page
\*------------------------------------*/
.hero-page-section{
	position: relative;
}
.hero-page{
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	height: 500px;
	width: 100%;
	text-align: center;
	position: relative;
}
.hero-page h1{
	font-size: 60px;
	color:#FFFFFF;
	opacity: .9;
	max-width: 850px;
	margin: 0 auto;
	padding: 10% 0 0;
}
.hero-page{
	font-size: 18px;
  font-family: 'TTNorms-Medium';
	color:#FFF;	
}

.down-arrow{
	  width: 50px;
    height: 50px;
    background-image: url(img/downarrow.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    position: absolute;
    bottom: -20px;
		z-index: 1;
		margin-left: auto;
		margin-right: auto;
		left: 0;
		right: 0;
}
.down-arrow a{
	display: block;
	width: 100%;
	height: 100%;
}
/*------------------------------------*\
    Prodcut Family Page
\*------------------------------------*/

.product-family-row{
	padding: 100px 0px;
	text-align: center;
}
.product-family-row.grey{
	background-color:#F4F4F4;
}
.product-family-img{
	min-height: 400px;
	width: 100%;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	
}
.prodcut-family-copy{
	padding: 0px 50px;
}
.prodcut-family-copy h2{
	font-size: 30px;
}
.prodcut-family-copy p{
	font-size: 16px;
	line-height: 25px;
}
.prodcut-family-copy ul li{
	list-style: none;
	margin: 0px;
	padding: 0px;
	line-height: 25px;

}
.prodcut-family-copy ul{
	margin: 0px;
	padding: 0px;
}

.product-family-cat{
	font-size: 13px;
	text-transform: uppercase;
	font-family: 'TTNorms-Bold';
}
.product-family-cat:after{
	content:"";
	width: 78px;
	height: 2px;
	margin: 10px auto;
	display: block;
}


.product-family-row.blue .product-family-cat{
	color:#37838B;
}
.product-family-row.blue .product-family-cat:after{
	background-color:#37838B;
}


.product-family-row.yellow .product-family-cat{
	color:#FFCE40;
}
.product-family-row.yellow .product-family-cat:after{
	background-color:#FFCE40;
}


.product-family-row.grey .product-family-cat{
	color:#3b3d3d;
}
.product-family-row.grey .product-family-cat:after{
	background-color:#3b3d3d;
}


.product-family-row.red .product-family-cat{
	color:#D03429;
}
.product-family-row.red .product-family-cat:after{
	background-color:#D03429;
}

.sorting-bar{
	width: 100%;
	background-color:#00A9B7;
	margin-bottom:0px;
	height: 60px;
}

.view-all-btn h2{
	margin: 0px;
	padding: 0px;
	text-align: center;
	padding: 15px;
}

.view-all-btn h2 a{
	color:#FFF;	
}
.view-all-btn h2 a:hover{
	text-decoration: underline;
}

.family-view{
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	width: 40px;
	height: 40px;
	background-image:url("img/family_view.png");
	display: block;
	cursor: pointer;
	float: left;
	margin-right: 15px;
	margin-top: 10px;
}

.family-view:hover, .family-view.active{
	background-image:url("img/family_view_w.png");
}

.family-view a, .product-view a{
	display: block;
	width: 100%;
	height: 100%;
}

.product-view{
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	width: 40px;
	height: 40px;
	background-image:url("img/product_view.png");
	display: block;
	cursor: pointer;
	float: left;
	margin-top: 10px;
}

.product-view:hover, .product-view.active{
	background-image:url("img/product_view_white.png");
}


.grid-view{
	  width: 115px;
    border-right: solid 2px #FFF;
    height: 60px;
    display: inline-block;
    position: relative;
}

.sorting{
	width: 70%;
  float: right;
}

.sorting ul{
	padding: 20px 0px;
	margin: 0px;
}
.sorting ul li{
	list-style: none;
	display: inline-block;
	position: relative;
	margin-right: 30px;
	width: 100px;
}
.sorting ul li a:after{
	content:"";
	display: block;
	background-size: contain;
	background-position: right center;
	background-repeat: no-repeat;
	background-image: url("img/dropdown_arrow_sort.png");
	width: 20px;
	height: 20px;
	float: right;
}

.sorting ul li a:hover:after{
	background-image:url("img/dropdown_arrow_sort_w.png");
}

.sorting ul.sub-menu li a:after{
	display: none;
}

.sorting ul li a{
	font-size: 13px;
	text-transform: uppercase;
	color:#3B3D3D;
  font-family: 'TTNorms-Bold';
	width: 100%;
	height: 100%;
}


.sorting ul li.current-menu-item a{
	color:#FFF;
}

.sorting ul li a:hover{
	color:#FFF;
}

.sorting ul li ul.sub-menu{
	display: none;
	position: absolute;
	z-index: 2;
	background-color: #00A9B7;
	transition: .2s;
	padding: 15px;
	min-width: 100px;
}
.sorting ul li ul.sub-menu li{
	width: 110px;
}

.sorting ul li ul.sub-menu li{
	display: block;
	margin-bottom: 10px;
}

.sorting ul li:hover > ul.sub-menu {
    display: block;
}

.sort-by{
	float: right;
}
.sort-by:before{
	content: "";
  width: 2px;
  height: 60px;
  display: inline-block;
  background-color: #FFF;
  position: absolute;
  top: -20px;
  left: -20px;
}

.product-loop{
	margin-top: 60px;
}


.mobile-sort{
	display: none;
}

/*------------------------------------*\
    PDP Page
\*------------------------------------*/

.pdp-section.mobile{display:none;}

.postid-753 .similar-products .flex_container .flex_item:nth-child(4n){
	display: none!important;
}

.pdp-section{
	min-height:533px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	width: 100%;
	margin:0;
	display: flex;
  align-items: center;
  justify-content: center;
}

.pdp_section_content{
	max-width: 456px;
}
.pdp_section_content.center{
	text-align: center;
	margin: 0px auto;
}

.pdp_slection_content.left{
	text-align: left;
	margin: 0px;
}

.pdp_section_content.right{
	text-align: right;
	margin: 0px;
	float: right;
}

.pdp_section_content.dark{
	color:#000;
}
.pdp_section_content.light{
	color:#FFF;
}

.sub_title{
	font-family: 'TTNorms-Medium';
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 14px;
}

.pdp_section_content .sub_title:after{
	content: '';
	display: block;
	width: 78px;
	height: 2px;
	background-color:#00A9B7;
	margin-top: 13px;
}

.sub_title.red:after{
		background-color:#F0544F;

}

.sub_title.blue:after{
	
	background-color:#00A9B7;
}

.sub_title.yellow:after{
	background-color:#FFCE40;
}


.sub_title.grey:after{
	background-color:#3b3d3d;
}


.pdp_section_content.center .sub_title:after{
	margin: 15px auto 0;
}

.pdp_section_content.right .sub_title:after{
	right: 0;
    display: block;
    clear: both;
    position: relative;
    text-align: right;
    left: 82%;
}

.pdp_section_content.dark .sub_title{
	/*color: #00A9B7;*/
	color:#000;
}

.pdp_section_content h2{
	font-size: 30px;
}
.pdp_section_content p{
	font-size: 18px;
	font-family: 'TTNorms-Medium';
}
.split-content{
	background-color:#3B3D3D;
	width: 100%;
	color: #FFF;
	min-height:500px;
	font-size: 18px;
}

.split-content .bx-wrapper .bx-prev{
	background-image: url("img/left_arrow.png");
	background-size: contain;
  background-position: center center;
}

.split-content .bx-wrapper .bx-next{
	background-image: url("img/right_arrow.png");
	background-size: contain;
  background-position: center center;
	margin-left: 20px !important;
}

.split-content .bx-wrapper .bx-prev:hover, .split-content .bx-wrapper .bx-prev:focus{
	background-position: center center;
}
.split-content .bx-wrapper .bx-next:hover, .split-content .bx-wrapper .bx-next:focus{
	background-position: center center;
}

.split-content .bx-wrapper .bx-controls-direction a{
	    position: absolute;
    top: 90%;
    margin-top: -16px;
    outline: 0;
    width: 10px;
    height: 32px;
    text-indent: -9999px;
    z-index: 9999;
    left: 7%;
    margin: 0px;
}

.split-content .bx-wrapper .bx-pager.bx-default-pager a:hover, .split-content .bx-wrapper .bx-pager.bx-default-pager a.active, .split-content .bx-wrapper .bx-pager.bx-default-pager a:focus{
	background-color:#979797;
}

.split-content .bx-wrapper .bx-pager.bx-default-pager a {
	background-color:#3b3d3d;
	border:solid 1px #979797;
	width: 10px;
	height: 10px;
}

.split-content .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager{
	width: 45%;
	text-align: right;
}

.flex_item.center-align-content{
	margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;	
}

.split-content .sub_title:after{
	content: '';
	display: block;
	width: 78px;
	height: 2px;
	margin-top: 15px;
}

.split-content-left.blue .sub_title:after{
	background-color:#00A9B7;
}

.split-content-left.red .sub_title:after{
	background-color:#F0544F;
}

.split-content-left.yellow .sub_title:after{
	background-color:#FFCE40;
}


.split-content-left.grey .sub_title:after{
	background-color:#3b3d3d;
}

.split-content-left{
	max-width: 456px;	
	
}

.pdp_gallery_image{
	width: 100%;
	height: 100%;
	min-height: 500px;
	background-size: cover;
	background-position: center right;
	background-repeat: no-repeat;
}

.image-gallery{
	padding: 55px 0;
	text-align: center;
	max-width: 969px;
  margin: 0px auto;
}

.gallery-thumbnail{
	width: 133px;
	height: 133px;
	margin: 10px;
	border: solid 1px #D7D7D7;
	overflow: hidden;
}

.gallery-thumbnail.active{
	
	border: solid 1px #3FB8BE;
}
.image-gallery-main-image{
	border: solid 1px #D7D7D7;
	overflow: hidden;
	width: 423px;
	height: 439px;
	margin: 10px;
	
}
.image-gallery-images{
	
}

.tec-specs-section{
	background-color:#F4F4F4;
	padding: 55px 0px;
}

.tec-specs-section p{
	font-size: 16px;
  font-family: 'TTNorms-Light';
	line-height: 25px;
  margin: 0px 0px 30px;
	padding-left: 35px;
}
.tec-specs-section a{
	color:#00A9B7;
  font-family: 'TTNorms-Bold';
}

.tec-specs-section a:hover{
	text-decoration: underline;
}

.tec-specs-section .sub_title{
	font-size: 13px;
  font-family: 'TTNorms-Bold';
}

.tec-specs-section h3{
	color:#4A4A4A;
	font-size: 16px;
}
.spec-icon{
	width:30px;
	height: 30px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	display: inline-block;
  margin-right: 5px;
  margin-bottom: -10px;
}



/*
.tech-massonary{
	display: -ms-flexbox;
	-ms-flex-direction: column;
	-ms-flex-wrap: wrap;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	height: 40vw;
	font-size: 0; 
}

.tech-massonary .flex_item { 
	width: 33.3%;
}
*/

.tech-content-box{
	width: 95%;
}

.tech-content-box:after{
    /*content: "";
    width: 72%;
    height: 1px;
    background-color: #D7D7D7;
    display: block;
    float: none;
    margin: 0px auto;
    margin-left: 35px;*/
	
}

.flex_container.tabcontent{
	display: none;
}

.flex_container.tabcontent.active{
	display: flex;
}


.tablinks{
	cursor: pointer;
	float: left;
	color:#4A4A4A;    
	margin-right: 30px;
}
.sub_title.tablinks.active{
	text-decoration: underline !important;
	color:#3B3D3D;
}

.tec-specs-section #more-info-box p{
	padding-left: 0px;
}

#more-info-box .tech-content-box{
	width: 80%;
}

.pdp-blurb .bx-controls-direction{
	display: none;
  
}

.gallery-thumbnail{
	width: 133px;
	height: 133px;
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
}

.main-pdp-image-box{
  background: linear-gradient(0deg, rgba(213,213,213,1) 0%, rgba(255,255,255,1) 83%);
  margin: 10px;
}
.main-pdp-image-box:after{
	content:'';
	width: 100%;
	height: 55px;
	display: block;
	background-color:#00A9B7;
	margin-top:-20px;
}

.main-pdp-image-box.red:after{
	background-color:#F0544F;
}

.main-pdp-image-box.yellow:after{
	background-color:#FFCE40;
}
.main-pdp-image-box.grey:after{
	background-color:#3b3d3d;
}

.main-pdp-image-box h2{
	margin-bottom: -39px;
	text-align: center;
}
.main-pdp-image-box h2 a{
	color:#FFF;
}

.main-pdp-image{
	min-height: 320px;
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	position: relative;
}
.pdp-main-content{
	text-align: center;
	margin-bottom: 50px;
}
.excerpt-box{
	min-height: 60px;
}
.similar-products{
	text-align: center;
	padding: 100px 0px;
}

audio, canvas, video{
	display: block;
	width: 100%;
}
.video_full_bg{
  width:100%;
  height:auto;
	margin: 0px auto;
}
.single .blurb{
	background-color:#3B3D3D;
}

.pdp-sub-nav-wrap{
	position: fixed;
	top:85px;
	height: 60px;
	width: 100%;
	z-index: 2;
	transition: .5s;
}

.pdp-sub-nav-wrap.red{
		background-color:#F0544F;
}

.pdp-sub-nav-wrap.blue{
	background-color:#00A9B7;
}

.pdp-sub-nav-wrap.yellow{
	background-color:#FFCE40;
}

.pdp-sub-nav-wrap.grey{
	background-color:#3b3d3d;
}

.pdp-logo{
	background-size: contain;
	background-position: left center;
	background-repeat: no-repeat;
	height: 30px;
  margin-top: 15px;
	width: 270px;
  float: left;
}


.pdp-sub-nav{
	text-align: right;
	padding-top: 20px;
}

.pdp-sub-nav-wrap.nav-up{
	top:0px;
}

.pdp-sub-nav a{
	text-align: right;
	color:#FFF;
	text-transform: uppercase;
  font-family: 'TTNorms-Bold';
	/*text-shadow: 1px 1px 2px #000;*/
	font-size: 13px;
	margin-left: 20px;	
	line-height: 20px;
}
.pdp-sub-nav a.active{
	text-decoration: underline;
}

.pdp-sub-nav li{
	list-style: none;
	display: inline;
	padding: 20px 0;
}

.pdp-sub-nav li ul.sub-menu-buy{
	display: none;
	position: absolute;
	z-index: 2;
	background-color: #00A9B7;
	transition: .2s;
	padding: 0;
	min-width: 100px;
	right: 0px;
	min-width: 145px;
	margin-top: 5px;
}

.pdp-sub-nav li ul.sub-menu-buy:hover{
	display: block;
}

.pdp-sub-nav li ul.sub-menu-buy li{
	display: block !important;
	text-align: center;
	padding: 5px 0 !important;
}

.pdp-sub-nav li ul.sub-menu-buy li a{
	text-align: center !important;
	margin: 10px auto !important;
}

.pdp-sub-nav li:hover > ul.sub-menu-buy {
    display: block;
}



/*------------------------------------*\
    PAGES
\*------------------------------------*/

.blank-header{
	text-align: center;
	padding: 100px 0;
}
.blank-header h1{
	font-size: 60px;
	line-height: 71px;
	color:#000;
	margin-bottom: 0px;
}
.blank-header p{
	font-size: 18px;
	line-height: 21px;
  font-family: 'TTNorms-Medium';	
	text-align: center;
	max-width: 600px;
	margin: 0px auto;
}
.article-featured-box, article.press {
	border: solid 1px #D7D7D7;
	margin: 5px;
}

.centerfy{
	display: flex;
  align-items: center;
  justify-content: center;
	min-height: 400px;
}

.content-blog{
	padding: 20px;
}
.content-blog h2 a{
	font-size: 30px;
	line-height: 36px;
	color:#000;
}
.content-blog p{
	font-size: 16px;
	line-height: 21px;
	color:#000;
  font-family: 'TTNorms-Light';
}
.content-blog p.blog-date{
	color:#9E9E9E;
	text-transform: uppercase;
}
.content-blog p.cat-tip{
	text-transform: uppercase;
	font-size: 12px;
  font-family: 'TTNorms-Medium';
	color:#00A9B7;
}
.blog-box-title{
	min-height: 145px;
}


.featured-img{
	width: 100%;
	min-height: 400px;
	background-size: cover;
	background-repeat: no-repeat;
}

/*------------------------------------*\
    About Page
\*------------------------------------*/
.about-quote{
	text-align: center;
	font-size: 30px;
	max-width: 762px;
	margin: 0px auto;
	padding: 100px 0;
}
.blue_section{
	background-color:#00A9B7;
	color:#FFF;
}
.about-content-wrap{
	padding: 100px 0;
}
.about-content-wrap h2{
	font-size: 30px;
	padding: 0 10%;
}
.about-content-wrap p{
	font-size: 18px;
	line-height: 30px;
	padding: 0 10%;
}

.about-content-wrap-center{
	 text-align: center;
   max-width: 700px;
   margin: 0px auto;
}

.about-content-wrap-center h2{
	    font-size: 60px;
	margin-bottom: 0px;
	line-height: 60px;
}
.about-content-wrap-center p{
	    font-size: 18px;
    font-family: 'TTNorms-Medium';
    text-align: center;
    max-width: 720px;
    margin: 0px auto;
    line-height: 21px;
	
}



.about-quote-sm{
  font-family: 'TTNorms-Medium';
	font-size: 21px;
	line-height: 36px;
	max-width: 300px;
	margin: 0px auto;
	padding-top: 60px;
	
}
.author-quote-sm{
	color:#3B3D3D;
	text-transform:uppercase;
	font-size: 12px !important;
}

.vertical-image{    
	background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  min-height: 905px;
  margin: 0px 15px 30px 0px;
}


.horizontal-image{
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	min-height: 437px;
	margin-bottom: 30px;
	margin-left: 15px;
}

.about-timeline-img{
	min-height: 400px;
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
}

.about-content-wrap.about-footer{
	text-align: center;
	max-width: 575px;
	margin: 0px auto;
}
.slider-date{
	color:#00A9B7;
	font-size:39px !important;
	line-height: 46px;
  font-family: 'TTNorms-Bold';	
}
.hero.about-slider .wrapper{
	max-width: 735px;
	margin: 0px auto;
}	

.hero.about-slider h2{
	font-size:39px !important;
	line-height: 46px;
	margin-top: -10px;
}
.hero.about-slider h2:after{
	content:"";
	display: block;
	margin: 15px auto;
	width: 78px;
	height: 4px;
	background-color:#00A9B7;
}

.hero.about-slider h3{
	font-size: 30px;
  font-family: 'TTNorms-regular';    
	margin-top: -30px;
}

.hero.about-slider p{
	margin-bottom: 0px;
}

/* hero button */

.hero-new-dropdown {
  position: relative;
  display: inline-block;
	border-radius: 28px;
}

.hero-new-dropdown:hover .btn{
	background-color:#38848B;
}
.hero-new-dropdown-content {
  display: none;
  position: absolute;
  background-color: #00A9B7;
  min-width: 295px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
	
	/*
	background-color: #38848B;
  min-width: 295px;
  box-shadow: 0px 19px 16px 0px rgba(0,0,0,0.2);
  z-index: 0;
  border-radius: 24px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  margin-top: -23px;
  padding-top: 25px;
	*/
}

.hero-new-dropdown-content a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
	font-family: 'TTNorms-Bold';
}

.hero-new-dropdown-content a:hover {background-color: #38848B;}

.hero-new-dropdown:hover .hero-new-dropdown-content {display: block;}


.multi-buy:after{
	content: "";
    display: block;
    float: right;
    width: 14px;
    height: 14px;
    background-image: url(img/dropdown_arrow_sort_w.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    margin-left: 5px;
    margin-top: 2px;
}
.multi-buy-big:after{
	content: "";
    display: block;
    float: right;
    width: 20px;
    height: 20px;
    background-image: url(img/dropdown_arrow_sort_w.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    margin-left: 5px;
    margin-top: 18px;
}

.pdp-sub-nav li ul.sub-menu-buy li:hover{
	background-color:#38848B;
}

	/*------------------------------------*\
    Careers Page
\*------------------------------------*/
.careers-quote-main{
	max-width: 670px;
	margin: 0px auto;
	text-align: center;
	padding: 100px 0px;
}
.careers-quote-main h2{
	font-size: 30px;
  font-family: 'TTNorms-Regular';
}

.careers-quote-author{
	text-align: center;
	text-transform: uppercase;
	font-size: 12px;
  font-family: 'TTNorms-Medium';
}

.career-block{
	background-size: cover;
	background-repeat: no-repeat;
	color:#FFF;
	margin: 10px;
	min-height: 400px;
}
.career-block h3{
	padding: 260px 30px 0;
	font-size: 12px;
	text-transform: uppercase;
  font-family: 'TTNorms-Medium';
	
}
.career-block h3:after{
	content:"";
	display: block;
	width: 78px;
	height: 2px;
	background-color:#00A9B7;
	margin-top: 10px;
	
}
.career-block p{
	padding: 0 30px;
	font-size: 16px;
  font-family: 'TTNorms-Bold';
	line-height: 25px;
	
}
.career-block.long{
	margin-top: -5px;
}

	/*------------------------------------*\
    Team Section
\*------------------------------------*/
.team-members{
	margin-top: 50px;
}

.teal-bg{
	color: #FFF;
  background: linear-gradient(180deg, #37838B 84%, #FFFFFF 30%);
  padding: 50px 0;
  display: block;
  clear: both;
}
.team-title h2{
	font-size: 60px;
	text-align: center;
	margin-bottom: 0px;
	line-height: 60px;
}
.team-title p{
	font-size: 18px;
  font-family: 'TTNorms-Medium';
	text-align: center;
	max-width: 720px;
	margin: 0px auto;
	line-height: 21px;
	
}
.team-member-headshot{
	background-size: cover;
	min-height:205px;
	background-position: center;
	background-repeat: no-repeat;
}

.head-shot-box{
	margin:5px;
}
.head-shot-box h3{
	color:#00A9B7;
	font-size: 12px;
	text-transform: uppercase;
	line-height: 15px;
}

.head-shot-box p{
	color:#444;
	font-size: 12px;
  font-family: 'TTNorms-Medium';
	
}

.head-shot-box.main .team-member-headshot{
	min-height:420px; 
}

.team-bar{
	background-color: rgba(63, 184, 190, .9);
  height: 80px;
  width: 100%;
  top: 340px;
  display: block;
  position: relative;
  padding: 5px 15px;
}


.team-bar h3{
	color:#FFFFFF;
	font-size: 18px;
}
.team-bar p{
	font-size: 12px;
	color:#FFFFFF;
  font-family: 'TTNorms-Medium';
	margin: -10px 0;
	
}

.bio-panel{
	display: none;
	position: absolute;
	top:0px;
	background-color:#37838B;
	height: 425px;
	z-index: 1;
	left: 0;
}
.flex_item.js-click-team.active .bio-panel{
	display: block !important;
}

.bio-content{
	padding: 30px;
}

.bio-content h3{
	font-size: 30px;
  font-family: 'TTNorms-Medium';
	margin: 0px;
}

.bio-content p{
	font-size: 16px;
	line-height: 24px;
}

.bio-title{
	font-size: 16px;
  font-family: 'TTNorms-Medium';
}
.bio-image .team-member-headshot{
	min-height: 420px;
}
.bio-panel-close{
	background-image:url("img/close.png");
	width: 20px;
	height: 20px;
	display: block;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	right: 20px;
	top: 20px;
	cursor: pointer;
	
}

	/*------------------------------------*\
    Hero Search
\*------------------------------------*/

.hero-search{
	min-height: 300px;
	position: relative;
}

.hero-search .search-input{
	background-color: transparent;
  border-bottom: 2px solid #D7D7D7;
  border-top: none;
  border-right: none;
  border-left: none;
  font-size: 60px;
  text-align: center;
  font-family: 'TTNorms-Light';
	color:#D7D7D7;	
}
.hero-search .search{
	text-align: center;
}
.hero-search p{
	text-align: center;
	color:#D7D7D7;
	font-size: 18px;
  font-family: 'TTNorms-Medium';
}
.hero-search p a{
	color:#D7D7D7;
	text-decoration: underline;
}

	/*------------------------------------*\
    Misc
\*------------------------------------*/

.scroll-to-top{
	width: 50px;
	height: 50px;
	position: fixed;
	bottom: 30px;
	right: 30px;
	background-image: url("img/scroll-to-top.png");
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
}
.scroll-to-top a{
	display: block;
	width: 100%;
	height: 100%;
}

@keyframes fade-in {
    from {opacity: 0; transform: scale(.7,.7)}
    to {opacity: 1;}
}
.fade-in-element {
  animation: fade-in 1.4s;
}

.hidden {
  /*opacity: 0;*/
}


/*------------------------------------*\
	TYPOGRAPHY
\*------------------------------------*/

@font-face {
  font-family: 'TTNorms-Bold';
	src: url('fonts/TTNorms-Bold.eot');
  src: url('fonts/TTNorms-Bold.eot#iefix') format('embedded-opentype'),  url('fonts/TTNorms-Bold.otf')  format('opentype'),
	     url('fonts/TTNorms-Bold.woff') format('woff'), url('fonts/TTNorms-Bold.ttf')  format('truetype'), url('https://2bmxxv2yj0s82ye6f82wewg5-wpengine.netdna-ssl.com/wp-content/themes/cp3/fonts/gfTTNorms-Bold.svg#TTNorms-Bold') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'TTNorms-Light';
	src: url('fonts/TTNorms-Light.eot');
  src: url('fonts/TTNorms-Light.eot#iefix') format('embedded-opentype'),  url('fonts/TTNorms-Light.otf')  format('opentype'),
	     url('fonts/TTNorms-Light.woff') format('woff'), url('fonts/TTNorms-Light.ttf')  format('truetype'), url('fonts/TTNorms-Light.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'TTNorms-Medium';
	src: url('fonts/TTNorms-Medium.eot');
  src: url('fonts/TTNorms-Medium.eot#iefix') format('embedded-opentype'),  url('fonts/TTNorms-Medium.otf')  format('opentype'),
	     url('fonts/TTNorms-Medium.woff') format('woff'), url('fonts/TTNorms-Medium.ttf')  format('truetype'), url('fonts/TTNorms-Medium.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'TTNorms-Regular';
	src: url('fonts/TTNorms-Regular.eot');
  src: url('fonts/TTNorms-Regular.eot#iefix') format('embedded-opentype'),  url('fonts/TTNorms-Regular.otf')  format('opentype'),
	     url('fonts/TTNorms-Regular.woff') format('woff'), url('fonts/TTNorms-Regular.ttf')  format('truetype'), url('fonts/TTNorms-Regular.svg') format('svg');
  font-weight: normal;
  font-style: normal; 
}

@font-face {
  font-family: 'TTNorms-Thin';
  src: url('fonts/TTNorms-Thin.eot');
	src: url('fonts/TTNorms-Thin.eot#iefix') format('embedded-opentype'),
		url('fonts/TTNorms-Thin.otf')  format('opentype'),
	     url('fonts/TTNorms-Thin.woff') format('woff'), 
		url('fonts/TTNorms-Thin.ttf')  format('truetype'), 
		url('fonts/TTNorms-Thin.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}



@font-face {
	font-family:'Font-Name';
	src:url('https://2bmxxv2yj0s82ye6f82wewg5-wpengine.netdna-ssl.com/wp-content/themes/cp3/fonts/font-name.eot');
	src:url('https://2bmxxv2yj0s82ye6f82wewg5-wpengine.netdna-ssl.com/wp-content/themes/cp3/fonts/font-name.eot#iefix') format('embedded-opentype'),
		url('https://2bmxxv2yj0s82ye6f82wewg5-wpengine.netdna-ssl.com/wp-content/themes/cp3/fonts/font-name.woff') format('woff'),
		url('https://2bmxxv2yj0s82ye6f82wewg5-wpengine.netdna-ssl.com/wp-content/themes/cp3/fonts/font-name.ttf') format('truetype'),
		url('https://2bmxxv2yj0s82ye6f82wewg5-wpengine.netdna-ssl.com/wp-content/themes/cp3/fonts/font-name.svg#font-name') format('svg');
    font-weight:normal;
    font-style:normal;
}


table {
	font-family: verdana,arial,sans-serif;
	font-size:11px;
	color:#333333;
	border-width: 1px;
	border-color: #666666;
	border-collapse: collapse;
}
table th {
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #666666;
	background-color: #dedede;
}
table td {
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #666666;
	background-color: #ffffff;
}


/*------------------------------------*\
   Flex Containers
\*------------------------------------*/

.hero .flex_container > .flex_item{
	align-self: center;
}

.flex_container::before {
  width: auto;
}
.flex_container {
  -moz-box-align: stretch;
  -moz-box-direction: normal;
  -moz-box-orient: horizontal;
  -moz-box-pack: justify;
  align-content: space-between;
  align-items: stretch;
  display: flex;
  flex-flow: row wrap;
	width: 100%;
}
.flex_container > .flex_item {
  -moz-box-flex: 0;
  -moz-box-ordinal-group: 1;
  align-self: auto;
  flex: 0 1 auto;
  order: 0;
}
.flex_container.flex_one > .flex_item {
  width: 100%;
}
.flex_container.flex_two > .flex_item {
  width: 50%;
}

.flex_container.flex_two > .flex_item.two_thirds {
  width: 70%;
}
.flex_container.flex_two > .flex_item.one_third {
  width: 30%;
}
.flex_container.flex_three > .flex_item {
  width: 33.333%;
}
.flex_container.flex_four > .flex_item {
  width: 25%;
}
.flex_container.flex_five > .flex_item {
  width: 20%;
}
.flex_container.flex_six > .flex_item {
  width: 16.66666666%;
}

/*------------------------------------*\
    RESPONSIVE
\*------------------------------------*/

/*------------------------------------*\
    mobile Nav
\*------------------------------------*/


#nav-icon3{
  	width: 22px;
	height: 25px;
	margin: -20px 20px 15px;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .5s ease-in-out;
	-moz-transition: .5s ease-in-out;
	-o-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
	cursor: pointer;
	position:absolute;
	top: 45px;
	right: 0px;
	z-index: 999999;
}

#nav-icon3 span{
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background:#00A9B7;
  border-radius: 2.5px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

#nav-icon3 span:nth-child(1) {
  top: 0px;
}

#nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3) {
  top: 7px;
}

#nav-icon3 span:nth-child(4) {
  top: 14px;
}

#nav-icon3.open span:nth-child(1) {
  top: 18px;
  width: 0%;
  left: 50%;
}

#nav-icon3.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#nav-icon3.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#nav-icon3.open span:nth-child(4) {
  top: 18px;
  width: 0%;
  left: 50%;
}
.m-show{
	display: none;
}

body.move-left {
	left: -240px;
	overflow-x: hidden;
	position: relative;
	-webkit-transition: all 0.3s ease !important;
	-moz-transition: all 0.3s ease !important;
	transition: all 0.3s ease !important;
}

.mobile-menu {
	background: #00A9B7;
	position: fixed;
	right: -240px;
	width: 240px;
	height: 100%;
	-webkit-transition: all 0.3s ease !important;
	-moz-transition: all 0.3s ease !important;
	transition: all 0.3s ease !important;
	z-index: 9999;
	
}
.mobile-menu.move-left{
	right: 0;
}

.mobile-pmenu h3 {
	color: #afdefa;
	font-size: 1.9em;
	padding: 20px;
	margin: 0;
	font-weight: 300;
	background: #0d77b6;
}

.mobile-menu a {
	display: block;
	color: #fff;
	font-weight: 300;
	text-decoration: none;
	font-size: 20px;
	padding: 15px;
	border-bottom: solid 1px #fff;
	text-indent: 15px;
}

.mobile-menu a:hover{
	background-color:#37838b;
}

.mobile-menu ul{
	padding: 0px;
	margin: 0px;
}
.mobile-menu ul li{
	list-style: none;
}

.mobile-pmenu a:hover {
	background: #258ecd;
}

.mobile-menu a:active {
	background: #afdefa;
	color: #47a3da;
}
.header.fixed{
	position: fixed;
	top:0px;
}

.header.fixed .logo{
	position: absolute;
  left: 240px;
}



/*Breaks Early */
@media only screen and (max-width:1090px) {
	.featured-products	.flex_container.flex_two > .flex_item{
		width: 100%;
		max-width: 499px;
		margin: 0px auto;
	}
	.featured-products .featured-box .flex_container.flex_two > .flex_item{
		width: 50%;
	}
}


@media only screen and (max-width:960px) {
	.sorting{
		display: none;
	}
}

/*Big Tablets + Small Computers */
@media only screen and (max-width:920px) {
	.nav.main-menu{
		display: none;
	}
	.m-show{
		display: block;
	}
	.btn{
		padding: 0  20px;
	}
	.product-loop .flex_container.flex_three > .flex_item{
		width: 50%;
	}
	.similar-products .flex_container.flex_three > .flex_item{
		width: 50%;
	}
	
}

@media only screen and (max-width:840px) {
	.home-about-section .flex_container.flex_three > .flex_item{
		width: 100%;
	}
	.footer .flex_container.flex_two > .flex_item{
		width: 100%;
	}
	
		.footer .flex_container.flex_two.m-flip > .flex_item:nth-of-type(1){
			order: 1;
		}
	

	.footer .flex_container.flex_two > .flex_item.two_thirds{
		width: 70%;
	}
	.footer .flex_container.flex_two > .flex_item.one_third{
		width: 30%;
	}
	
	.footer_sign_up{
		text-align: center;
	}
	
	.footer_sign_up p{
		margin: 10px auto;
	}
	#mc_embed_signup{
		margin: 20px auto;
	}
	.social-icons{
		text-align: center;
		padding: 15px 0px;
	}
	.copy-links{
		text-align: center;
		margin: 0px;
		display: block;
	}
	.align-left{
		text-align: center;
		display: block;
	}
	.footer-globe{
		float: none;
    display: block;
    text-align: center;
    margin: 0px auto;
	}
	
	.product-family-row{
		padding-bottom: 10px;
	}
	.product-family-row .flex_container.flex_two > .flex_item{
		width: 100%;
	}
	
	.product-family-row.grey .flex_container.flex_two > .flex_item:nth-last-of-type(1n){
		order:1;
	}
	
	.product-family-row .flex_container.flex_two > .flex_item:nth-last-of-type(2n){
		order:1;
	}
	.prodcut-family-copy{
		padding-bottom: 50px;
	}
	.hero-page h1{
		font-size: 50px;
		line-height: 55px;
		padding: 15% 0 0;
	}
	
	.split-content .flex_container.flex_two > .flex_item{
		width: 100%;
	}
	.split-content .flex_container.flex_two > .flex_item:nth-of-type(1){
		order: 2;
	}
	
	.image-gallery-images .flex_container.flex_two > .flex_item{
		width: 100%;
		
	}
	.image-gallery-main-image{
		margin: 0px auto;
	}
	.image-gallery-images{
		max-width: 430px;
		margin: 0px auto;
	}
	.image-gallery-images .flex_container.flex_two > .flex_item:nth-of-type(1){
		order: 2;
	}
	.gallery-thumbnail{
		margin: 15px auto 0px;
	}
	
	.hidden {
  opacity: 1;
}
	
}

/* Tablets + Big Phones */
@media only screen and (max-width:768px) {
	.pdp-section.desktop{display:none;}
	.pdp-section.mobile{display:block;}
	
	.sub_title.red:after{margin:0 auto;}
	
	.hero .flex_container.flex_two > .flex_item{
		width: 100%;
	}
	.spotlight-image{
		min-height: 250px;
	}
	
	.blue_section .flex_container.flex_two > .flex_item{
		width: 100%;
	}
	.about-content-wrap .flex_container.flex_two > .flex_item{
		width: 100%;
	}
	.about-content-wrap{
		text-align: center;
	}
	.vertical-image{
		min-height: 605px;
		margin: 0px 20px;
	}
	.horizontal-image{
		min-height: 300px;
		margin: 20px;
	}
	.career-content-blocks .flex_container.flex_two > .flex_item{
		width: 100%;
	}
	
	.team-section .flex_container.flex_four > .flex_item{
		width: 50%;
	}
	.team-members.large-box .flex_container.flex_two > .flex_item{
		width: 50%;
	}
	
	.bio-panel .team-members.large-box .flex_container.flex_two > .flex_item{
		width: 100%;
	}
	
	.teal-bg{
		background: linear-gradient(180deg, #37838B 65%, #FFFFFF 30%);
	}
	
	.bio-panel{
		height: auto;
	}
	.btn{
		font-size: 16px;
	}
	
	.pdp_gallery_image{
		min-height: 400px;
	}
	.split-content-left{
		margin: 2%;
	}
	.split-content .bx-wrapper .bx-controls-direction a{
		top: 67%;
		left: 90%
	}
	.split-content .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager{
		position: absolute;
    right: 0;
	}
	.pdp_section_content{
		margin-top: 288px;
    position: absolute;
		margin-left: 2%;
    margin-right: 2%;
	}
	.pdp_section_content.right{
		text-align: left;
		margin-top: 80%;
		margin-left: 2%;
        margin-right: 2%;
	}
	.pdp_section_content.center{
		text-align: left;
		margin-top: 288px;
		margin-left: 2%;
    margin-right: 2%;
	}
	.pdp_section_content.center .sub_title:after{
		margin: 13px 0 0;
	}
	
	.pdp_section_content.light{
		color:#000;
	}
	.pdp-section{
		min-height: 400px;
		margin-bottom: 480px;
	}
	
	.pdp-section.left{
		background-position: center right;
	}
	.pdp-section.right{
		background-position: left center;
	}
	
	.pdp_section_content.right .sub_title:after{
		left: 0;
		width:100%;
	}
	.pdp_section_content .sub_title:after{
		width:100%;
	}
	.team-members.large-box .bio-panel .flex_container.flex_two > .flex_item{
		width: 100%;
	}
	.hero-search .search-input{
		font-size: 30px;
	}
	
}


	.mobile-hero-bg{
	display: none;
}
.hide-price{
	display: none;
}



@media only screen and (max-width:600px) {
	.pdp_gallery_image{
		min-height: 300px;
	}
	.pdp-section{
		min-height: 300px;
		margin-bottom: 390px;
	}
	.pdp_section_content.right, .pdp_section_content, .pdp_section_content.center{
		margin-top: 75%;
		text-align: center;
	}
	.hero-np{
		display: none;
	}
	.has-mobile .hero-np{
		display: block;
	}
	.hero-product-image{
		min-height: 300px;
	}
	.hero .sub_title{
		margin-top: 40px;
	}
	
	.hero.has-mobile{
		background:none !important;
		display: block;
	}
	.hero.has-mobile .hero-np{
		width: 100%;
		height: 85px;
	}
	
	.hero.has-mobile h2{
		font-size: 16px;
	}
	
	.hero.has-mobile .btn{
		margin-top: 85%;
	}
	.mobile-hero-bg{
		position: absolute;
		min-height: 634px;
		background-size: cover;
		background-position: top center;
		background-repeat: no-repeat;
		width: 100%;
		display: block;
		height: 100%;
	}
	.hero.has-mobile .sub_title {
		margin-top: 20px;
	}
	.hero-slider .bx-controls{
		display: inline !important;
	}
	
	.down-arrow{
		display: none;
	}
	.scroll-to-top{
		display: none;
	}
	
	.career-block{
		padding-bottom: 20px;
	}
	.tec-specs-section .flex_container.flex_three > .flex_item{
		width: 100%;
	}
	.tec-specs-section{
		padding: 2%;
	}
	
	.gallery-thumbnail{
		width: 90%;
	}
	
	.trusted-by-bar .flex_container.flex_five >.flex_item{
		width: 50%;
	  margin: 0px auto;
	}
	
	.featured-products{
		margin: 100px 0;
		padding: 0px;
	}
	.featured-product-image{
		width: 100%;
	}
	.featured-products h2{
		margin-bottom: 0px;
	}
	
	.featured-bar h3{
		font-size:20px; 
	}
	
	.header.fixed .logo{
		left: 0;
	}
	
	.image-gallery-main-image{
		margin: 0px auto;
		width: 97%;
		height: 395px;
	}
	
	.product-loop .flex_container.flex_three > .flex_item{
		width: 100%;
	}
	.similar-products .flex_container.flex_three > .flex_item{
		width: 100%;
	}
	
	.pdp-sub-nav a{
		font-size: 11px;
		margin-left: 10px;
		display: none;
	}
	.pdp-sub-nav a.buy-now-sub{
		display: block !important;
	}
	
}

@media only screen and (max-width:480px) {
	
	
	
	.footer_nav ul{
		margin: 0px;
		padding: 0px;
	}
	.footer_nav ul li{
		width: 100%;
		text-align: center;
		float: none;
	}
	.footer_nav li a{
		margin-bottom: 0px;
	}
	.footer_nav .sub-menu{
		margin-bottom: 20px;
	}
}


@media only screen and (min-width:768px) {
  
}
@media only screen and (min-width:1024px) {

}
@media only screen and (min-width:1140px) {

}
@media only screen and (min-width:1280px) {

}
@media only screen and (-webkit-min-device-pixel-ratio:1.5),
	   only screen and (min-resolution:144dpi) {

}

/*------------------------------------*\
    MISC
\*------------------------------------*/

::selection {
	background:#04A4CC;
	color:#FFF;
	text-shadow:none;
}
::-webkit-selection {
	background:#04A4CC;
	color:#FFF;
	text-shadow:none;
}
::-moz-selection {
	background:#04A4CC;
	color:#FFF;
	text-shadow:none;
}

/*------------------------------------*\
    WORDPRESS CORE
\*------------------------------------*/

.alignnone {
	margin:5px 20px 20px 0;
}
.aligncenter,
div.aligncenter {
	display:block;
	margin:5px auto 5px auto;
}
.alignright {
	float:right;
	margin:5px 0 20px 20px;
}
.alignleft {
	float:left;
	margin:5px 20px 20px 0;
}
a img.alignright {
	float:right;
	margin:5px 0 20px 20px;
}
a img.alignnone {
	margin:5px 20px 20px 0;
}
a img.alignleft {
	float:left;
	margin:5px 20px 20px 0;
}
a img.aligncenter {
	display:block;
	margin-left:auto;
	margin-right:auto;
}
.wp-caption {
	background:#FFF;
	border:1px solid #F0F0F0;
	max-width:96%;
	padding:5px 3px 10px;
	text-align:center;
}
.wp-caption.alignnone {
	margin:5px 20px 20px 0;
}
.wp-caption.alignleft {
	margin:5px 20px 20px 0;
}
.wp-caption.alignright {
	margin:5px 0 20px 20px;
}
.wp-caption img {
	border:0 none;
	height:auto;
	margin:0;
	max-width:98.5%;
	padding:0;
	width:auto;
}
.wp-caption .wp-caption-text,
.gallery-caption {
	font-size:11px;
	line-height:17px;
	margin:0;
	padding:0 4px 5px;
}
.sticky {

}
.bypostauthor {

}

/** VARIABLES
===================================*/
/** RESET AND LAYOUT
===================================*/
.bx-wrapper {
  position: relative;
  margin-bottom: 0px;
  padding: 0;
  *zoom: 1;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
}
.bx-wrapper img {
  max-width: 100%;
  display: block;
}
.bxslider {
  margin: 0;
  padding: 0;
}
ul.bxslider {
  list-style: none;
}
.bx-viewport {
  /*fix other elements on the page moving (on Chrome)*/
  -webkit-transform: translatez(0);
}
/** THEME
===================================*/
.bx-wrapper {
  }
.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
  position: absolute;
  bottom: -30px;
  width: 100%;
}
.bx-controls-auto{
	display: none;
}
/* LOADER */
.bx-wrapper .bx-loading {
  min-height: 50px;
  background: url('img/bx_loader.gif') center center no-repeat #ffffff;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2000;
}
/* PAGER */
.bx-wrapper .bx-pager {
  text-align: center;
  font-size: .85em;
  font-family: Arial;
  font-weight: bold;
  color: #666;
  padding-top: 20px;
}
.bx-wrapper .bx-pager.bx-default-pager a {
 
  text-indent: -9999px;
  display: block;
  width: 15px;
  height: 15px;
  margin: 0 5px;
  outline: 0;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
	border:solid 2px #FFF;
	background: transparent;
	
}
.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active,
.bx-wrapper .bx-pager.bx-default-pager a:focus {
  background: #37838B;
}
.bx-wrapper .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
  display: inline-block;
  vertical-align: bottom;
  *zoom: 1;
  *display: inline;
}
.bx-wrapper .bx-pager-item {
  font-size: 0;
  line-height: 0;
}
/* DIRECTION CONTROLS (NEXT / PREV) */
.bx-wrapper .bx-prev {
  left: 10px;
  background: url('img/controls.png') no-repeat 0 -32px;
}
.bx-wrapper .bx-prev:hover,
.bx-wrapper .bx-prev:focus {
  background-position: 0 0;
}
.bx-wrapper .bx-next {
  right: 10px;
  background: url('img/controls.png') no-repeat -43px -32px;
}
.bx-wrapper .bx-next:hover,
.bx-wrapper .bx-next:focus {
  background-position: -43px 0;
}
.bx-wrapper .bx-controls-direction a {
  position: absolute;
  top: 50%;
  margin-top: -16px;
  outline: 0;
  width: 32px;
  height: 32px;
  text-indent: -9999px;
  z-index: 9999;
}
.bx-wrapper .bx-controls-direction a.disabled {
  display: none;
}
/* AUTO CONTROLS (START / STOP) */
.bx-wrapper .bx-controls-auto {
  text-align: center;
}
.bx-wrapper .bx-controls-auto .bx-start {
  display: block;
  text-indent: -9999px;
  width: 10px;
  height: 11px;
  outline: 0;
  background: url('img/controls.png') -86px -11px no-repeat;
  margin: 0 3px;
}
.bx-wrapper .bx-controls-auto .bx-start:hover,
.bx-wrapper .bx-controls-auto .bx-start.active,
.bx-wrapper .bx-controls-auto .bx-start:focus {
  background-position: -86px 0;
}
.bx-wrapper .bx-controls-auto .bx-stop {
  display: block;
  text-indent: -9999px;
  width: 9px;
  height: 11px;
  outline: 0;
  background: url('img/controls.png') -86px -44px no-repeat;
  margin: 0 3px;
}
.bx-wrapper .bx-controls-auto .bx-stop:hover,
.bx-wrapper .bx-controls-auto .bx-stop.active,
.bx-wrapper .bx-controls-auto .bx-stop:focus {
  background-position: -86px -33px;
}
/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
  text-align: center;
  width: 100%;
	margin: 60px auto;
	
}
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
  right: 0;
  width: 35px;
}
/* IMAGE CAPTIONS */
.bx-wrapper .bx-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  background: #666;
  background: rgba(80, 80, 80, 0.75);
  width: 100%;
}
.bx-wrapper .bx-caption span {
  color: #fff;
  font-family: Arial;
  display: block;
  font-size: .85em;
  padding: 10px;
}


/*------------------------------------*\
    PRINT
\*------------------------------------*/

@media print {
	* {
		background:transparent !important;
		color:#000 !important;
		box-shadow:none !important;
		text-shadow:none !important;
	}
	a,
	a:visited {
		text-decoration:underline;
	}
	a[href]:after {
		content:" (" attr(href) ")";
	}
	abbr[title]:after {
		content:" (" attr(title) ")";
	}
	.ir a:after,
	a[href^="javascript:"]:after,
	a[href^="#"]:after {
		content:"";
	}
	pre,blockquote {
		border:1px solid #999;
		page-break-inside:avoid;
	}
	thead {
		display:table-header-group;
	}
	tr,img {
		page-break-inside:avoid;
	}
	img {
		max-width:100% !important;
	}
	@page {
		margin:0.5cm;
	}
	p,
	h2,
	h3 {
		orphans:3;
		widows:3;
	}
	h2,
	h3 {
		page-break-after:avoid;
	}
}


/*!
 * animate.css -http://daneden.me/animate
 * Version - 3.7.0
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2018 Daniel Eden
 */

@-webkit-keyframes bounce {
  from,
  20%,
  53%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}

@keyframes bounce {
  from,
  20%,
  53%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}

.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}

@-webkit-keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

@keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

.flash {
  -webkit-animation-name: flash;
  animation-name: flash;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

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

@-webkit-keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
}

@-webkit-keyframes shake {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

@keyframes shake {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}

@-webkit-keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg);
  }

  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg);
  }

  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg);
  }

  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg);
  }

  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg);
  }

  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg);
  }

  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg);
  }

  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg);
  }

  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

.headShake {
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-name: headShake;
  animation-name: headShake;
}

@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

@keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

.swing {
  -webkit-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing;
}

@-webkit-keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.tada {
  -webkit-animation-name: tada;
  animation-name: tada;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes wobble {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes wobble {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble;
}

@-webkit-keyframes jello {
  from,
  11.1%,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}

@keyframes jello {
  from,
  11.1%,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}

.jello {
  -webkit-animation-name: jello;
  animation-name: jello;
  -webkit-transform-origin: center;
  transform-origin: center;
}

@-webkit-keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

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

  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

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

@keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

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

  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

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

.heartBeat {
  -webkit-animation-name: heartBeat;
  animation-name: heartBeat;
  -webkit-animation-duration: 1.3s;
  animation-duration: 1.3s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

@-webkit-keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.bounceIn {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}

@-webkit-keyframes bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}

@-webkit-keyframes bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}

@-webkit-keyframes bounceInRight {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInRight {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight;
}

@-webkit-keyframes bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}

@-webkit-keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  50%,
  55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}

@keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  50%,
  55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}

.bounceOut {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut;
}

@-webkit-keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

@keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

.bounceOutDown {
  -webkit-animation-name: bounceOutDown;
  animation-name: bounceOutDown;
}

@-webkit-keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

@keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

.bounceOutLeft {
  -webkit-animation-name: bounceOutLeft;
  animation-name: bounceOutLeft;
}

@-webkit-keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

@keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

.bounceOutRight {
  -webkit-animation-name: bounceOutRight;
  animation-name: bounceOutRight;
}

@-webkit-keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

@keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

.bounceOutUp {
  -webkit-animation-name: bounceOutUp;
  animation-name: bounceOutUp;
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@-webkit-keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig;
}

@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig;
}

@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

@-webkit-keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig;
}

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@-webkit-keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
}

@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

@-webkit-keyframes fadeOutDown {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

@keyframes fadeOutDown {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

.fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
}

@-webkit-keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

@keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

.fadeOutDownBig {
  -webkit-animation-name: fadeOutDownBig;
  animation-name: fadeOutDownBig;
}

@-webkit-keyframes fadeOutLeft {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes fadeOutLeft {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

.fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
}

@-webkit-keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

@keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

.fadeOutLeftBig {
  -webkit-animation-name: fadeOutLeftBig;
  animation-name: fadeOutLeftBig;
}

@-webkit-keyframes fadeOutRight {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

@keyframes fadeOutRight {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

.fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight;
}

@-webkit-keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

@keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

.fadeOutRightBig {
  -webkit-animation-name: fadeOutRightBig;
  animation-name: fadeOutRightBig;
}

@-webkit-keyframes fadeOutUp {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes fadeOutUp {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
}

@-webkit-keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

@keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 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;
}

@-webkit-keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

@keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

.flipInX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}

@-webkit-keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

@keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

.flipInY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
}

@-webkit-keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}

@keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}

.flipOutX {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: flipOutX;
  animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

@-webkit-keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}

@keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}

.flipOutY {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY;
}

@-webkit-keyframes lightSpeedIn {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes lightSpeedIn {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.lightSpeedIn {
  -webkit-animation-name: lightSpeedIn;
  animation-name: lightSpeedIn;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

@-webkit-keyframes lightSpeedOut {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}

@keyframes lightSpeedOut {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}

.lightSpeedOut {
  -webkit-animation-name: lightSpeedOut;
  animation-name: lightSpeedOut;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}

@-webkit-keyframes rotateIn {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateIn {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.rotateIn {
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn;
}

@-webkit-keyframes rotateInDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateInDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft;
}

@-webkit-keyframes rotateInDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateInDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.rotateInDownRight {
  -webkit-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight;
}

@-webkit-keyframes rotateInUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateInUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.rotateInUpLeft {
  -webkit-animation-name: rotateInUpLeft;
  animation-name: rotateInUpLeft;
}

@-webkit-keyframes rotateInUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateInUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.rotateInUpRight {
  -webkit-animation-name: rotateInUpRight;
  animation-name: rotateInUpRight;
}

@-webkit-keyframes rotateOut {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}

@keyframes rotateOut {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}

.rotateOut {
  -webkit-animation-name: rotateOut;
  animation-name: rotateOut;
}

@-webkit-keyframes rotateOutDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}

@keyframes rotateOutDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}

.rotateOutDownLeft {
  -webkit-animation-name: rotateOutDownLeft;
  animation-name: rotateOutDownLeft;
}

@-webkit-keyframes rotateOutDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

@keyframes rotateOutDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

.rotateOutDownRight {
  -webkit-animation-name: rotateOutDownRight;
  animation-name: rotateOutDownRight;
}

@-webkit-keyframes rotateOutUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

.rotateOutUpLeft {
  -webkit-animation-name: rotateOutUpLeft;
  animation-name: rotateOutUpLeft;
}

@-webkit-keyframes rotateOutUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}

.rotateOutUpRight {
  -webkit-animation-name: rotateOutUpRight;
  animation-name: rotateOutUpRight;
}

@-webkit-keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%,
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40%,
  80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}

@keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%,
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40%,
  80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}

.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-name: hinge;
  animation-name: hinge;
}

@-webkit-keyframes jackInTheBox {
  from {
    opacity: 0;
    -webkit-transform: scale(0.1) rotate(30deg);
    transform: scale(0.1) rotate(30deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }

  50% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  70% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }

  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes jackInTheBox {
  from {
    opacity: 0;
    -webkit-transform: scale(0.1) rotate(30deg);
    transform: scale(0.1) rotate(30deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }

  50% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  70% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }

  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.jackInTheBox {
  -webkit-animation-name: jackInTheBox;
  animation-name: jackInTheBox;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}

@keyframes rollOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}

.rollOut {
  -webkit-animation-name: rollOut;
  animation-name: rollOut;
}

@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}

.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}

@-webkit-keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomInDown {
  -webkit-animation-name: zoomInDown;
  animation-name: zoomInDown;
}

@-webkit-keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomInLeft {
  -webkit-animation-name: zoomInLeft;
  animation-name: zoomInLeft;
}

@-webkit-keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomInRight {
  -webkit-animation-name: zoomInRight;
  animation-name: zoomInRight;
}

@-webkit-keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomInUp {
  -webkit-animation-name: zoomInUp;
  animation-name: zoomInUp;
}

@-webkit-keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  to {
    opacity: 0;
  }
}

@keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  to {
    opacity: 0;
  }
}

.zoomOut {
  -webkit-animation-name: zoomOut;
  animation-name: zoomOut;
}

@-webkit-keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomOutDown {
  -webkit-animation-name: zoomOutDown;
  animation-name: zoomOutDown;
}

@-webkit-keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
    -webkit-transform-origin: left center;
    transform-origin: left center;
  }
}

@keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
    -webkit-transform-origin: left center;
    transform-origin: left center;
  }
}

.zoomOutLeft {
  -webkit-animation-name: zoomOutLeft;
  animation-name: zoomOutLeft;
}

@-webkit-keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
    -webkit-transform-origin: right center;
    transform-origin: right center;
  }
}

@keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
    -webkit-transform-origin: right center;
    transform-origin: right center;
  }
}

.zoomOutRight {
  -webkit-animation-name: zoomOutRight;
  animation-name: zoomOutRight;
}

@-webkit-keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomOutUp {
  -webkit-animation-name: zoomOutUp;
  animation-name: zoomOutUp;
}

@-webkit-keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}

@-webkit-keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}

@-webkit-keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}

@-webkit-keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
}

@-webkit-keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

@keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

.slideOutDown {
  -webkit-animation-name: slideOutDown;
  animation-name: slideOutDown;
}

@-webkit-keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

.slideOutLeft {
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft;
}

@-webkit-keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

@keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

.slideOutRight {
  -webkit-animation-name: slideOutRight;
  animation-name: slideOutRight;
}

@-webkit-keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

.slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp;
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.delay-1s {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

.animated.delay-2s {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

.animated.delay-3s {
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}

.animated.delay-4s {
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}

.animated.delay-5s {
  -webkit-animation-delay: 5s;
  animation-delay: 5s;
}

.animated.fast {
  -webkit-animation-duration: 800ms;
  animation-duration: 800ms;
}

.animated.faster {
  -webkit-animation-duration: 500ms;
  animation-duration: 500ms;
}

.animated.slow {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.animated.slower {
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
}

@media (print), (prefers-reduced-motion) {
  .animated {
    -webkit-animation: unset !important;
    animation: unset !important;
    -webkit-transition: none !important;
    transition: none !important;
  }
}