/*HEADER*/
#header .top-hd{
	padding:15px 0;
}
#header p{
	margin:0;
	/*padding:5px 0;*/
}
#header .phone a{
	color:#00763a;
	font-weight: 600;
	font-size:20px;
}
#header .contact{
	position: relative;
	padding: 0 30px;
}
#header .contact:before{
	content:url(img/icon/icon-phone.png);
	display: block;
	position: absolute;
	left:-30px;
}
	.navigation{
		background:#00763a;
	}
	.main-nav li {position: relative;}
	.main-nav .main-menu{
		position:relative;
	}
	.main-nav .main-menu > li + li {margin-left: 25px;}
	.main-nav .main-menu > li > a {
		display: block;
		position: relative;
		padding: 15px 15px;
		color: #fff;
		font-size: 15px;
		font-weight: bold;
		line-height: 20px;
		text-transform: uppercase;
	}
	
	.template-tour .main-nav .main-menu > li > a {color: #fff;}
	
	.template-tour .scroll .main-nav .main-menu > li > a {color: #333 !important;}

	.template-tour .main-nav .main-menu > li > a:after {background: #f15922;}
	
	.main-nav .main-menu > li:hover > a:after {width: 100%;}
	.main-nav .megamenu {
		position: absolute;
		display: none;
		width: 1200px;
		padding: 20px 20px;
		left: 30%;
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		-o-transform: translateX(-50%);
		transform: translateX(-50%);
		background: #fff;
	    -webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.2);
	    -khtml-box-shadow: 0 2px 6px rgba(0,0,0,0.2);
	    -moz-box-shadow: 0 2px 6px rgba(0,0,0,0.2);
	    -ms-box-shadow: 0 2px 6px rgba(0,0,0,0.2);
	    -o-box-shadow: 0 2px 6px rgba(0,0,0,0.2);
	    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
		z-index: 1000;
	}
	
	.pc-header.fix .main-nav .megamenu{
		left:50%;
	}
	.main-nav .main-menu > li:hover > .megamenu {display: block;}
	.main-nav .megamenu .title {
		margin: 0 0 15px 0;
		font-size: 17px;
		line-height: 22px;
	}
	.main-nav .megamenu .title a {color: #000;}
	.main-nav .megamenu .submenu > li {margin-bottom: 10px;}
	.main-nav .megamenu .submenu a {
		display: block;
		position: relative;
		padding-left: 15px;
		color: #000;
		font-size: 14px;
		line-height: 20px;
	}
	.main-nav .megamenu .submenu a:before {
		content: "\f101";
		display: block;
		position: absolute;
		left: 0px;
		top: -1px;
		font-size: 13px;
		font-family: FontAwesome;
	}
	.main-nav .megamenu .submenu a:hover {text-decoration: underline;}
	.main-nav .dropdown-menu {
		display: none;
		position: absolute;
		top: 100%;
		left: 0px;
		min-width: 220px;
		background: #fff;
		z-index: 1000;
		    -webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.2);
			-khtml-box-shadow: 0 2px 6px rgba(0,0,0,0.2);
			-moz-box-shadow: 0 2px 6px rgba(0,0,0,0.2);
			-ms-box-shadow: 0 2px 6px rgba(0,0,0,0.2);
			-o-box-shadow: 0 2px 6px rgba(0,0,0,0.2);
			box-shadow: 0 2px 6px rgba(0,0,0,0.2);
	}
	.main-nav .main-menu > li:hover > .dropdown-menu {display: block;}
	.main-nav .dropdown-menu .submenu > li > a {
		display: block;
		position: relative;
		padding: 10px 10px 10px 15px;
		color: #333;
		font-size: 14px;
		line-height: 20px;
		-webkit-transition: all .25s ease-in-out;
		-moz-transition: all .25s ease-in-out;
		-o-transition: all .25s ease-in-out;
		transition: all .25s ease-in-out;
	}
	.main-nav .dropdown-menu .submenu > li + li > a {}
	.main-nav .dropdown-menu .submenu > li:hover > a {
		/* background-color: rgba(241, 89, 34, 1); */
			text-decoration: underline;
	}

	@media (min-width: 1220px) {
		.main-nav .main-menu > li + li {margin-left: 50px;}
	}
	@media (max-width: 1220px) {
		.main-nav .megamenu {
			width: 800px;
			left: 0px;
		}
		.pc-header .logo {width: 200px;margin-right:140px;}
		.main-nav .main-menu > li > a {padding: 25px 0;}
		.main-nav .main-menu > li > a:after {bottom: 15px;}
	}
@media(max-width: 416px){
	
}

.list-subchild{
	display: none;
    position: absolute;
    top: 0;
    left: 100%;
    min-width: 220px;
    background: #fff;
    z-index: 1000;
    -webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    -khtml-box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    -ms-box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    -o-box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.list-subchild > li{}
.list-subchild > li > a{
	display: block;
    position: relative;
    padding: 10px 10px 10px 15px;
    color: #333;
    font-size: 14px;
    line-height: 20px;
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
}
.list-subchild > li > a:hover{}
.submenu > li:hover .list-subchild{
	display:block;
}

/*SLIDE*/
.main-slide .uk-dotnav-contrast>.uk-active>*{
	background:#00763a;
	display: block;
	width:15px;
	height: 15px;
}
.main-slide .uk-dotnav-contrast>*>* {
    background: rgba(0, 0, 0, .2);
    display: block;
	width:15px;
	height: 15px;
}
.main-slide .uk-dotnav-contrast{
	margin-bottom:20px;
}
/*INTRODUCTION*/
.introduction .panel-head {
	display: flex;
	-o-display: flex;
	-moz-display: flex;
	-webkit-display: flex;
	align-items: center;
	justify-content: center;
}
.introduction{
	padding:50px 0 40px 0;
	background:url(img/upload/background-intro.png) no-repeat center;
	background-size:cover;
}
.introduction .panel-body{
	padding:50px 143px 40px 143px;
}
.introduction .panel-body p{
	text-align: center;
	line-height: 30px;
}
.introduction .panel-head .heading-1{
	text-align: center;
	display: inline-block;
	border:1px solid #ddd;
	padding:20px 40px;
	font-weight: 600;
	text-transform: uppercase;
	position: relative;
	font-size:18px;
}
.introduction .panel-head .heading-1:before{
	content:"\f067 ";
	display: block;
	position: absolute;
	font-family: FontAwesome;
	right: 50%;
	color:#fff;
	font-size:12px;
	transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	top:0;
	background: #ea0007;
	border-radius:50%;
	width:20px;
	line-height: 20px;
	text-align: center;
	height: 20px;
	z-index: 10;
}
.introduction .panel-head .heading-1:after{
	content:"";
	display: block;
	position: absolute;
	font-family: FontAwesome;
	right: 41%;
	color:#fff;
	transform: translateY(-40%);
	-o-transform: translateY(-40%);
	-moz-transform: translateY(-40%);
	-webkit-transform: translateY(-40%);
	top:0;
	background: #fff;
	width:68px;
	height: 30px;
	z-index: 9;
}
.introduction .readmore{
	display: flex;
	-o-display: flex;
	-moz-display: flex;
	-webkit-display: flex;
	align-items: center;
	justify-content: center;
}
.introduction .readmore a{
	display: inline-block;
	padding:12px 14px;
	background: #00763a;
	color:#fff;
	font-weight: 600;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	-o-border-radius:5px;
}

@media(max-width: 601px){
	.introduction .panel-body {
    padding: 30px 70px 20px 70px;
	}
}
@media(max-width: 415px){
	.introduction .panel-body {
    padding: 20px 10px 10px 10px;
	}
}
/*NEWPROD*/
.new-product{
	background:#f4eded;
}
.new-product .wrap{
	background:#00763a;
	padding:60px 40px 25px 40px;
}
.new-product .wrap .readmore a{
	text-align: center;
	display: inline-block;
	text-transform: uppercase;
	padding:8px 24px;
	border:3px solid #fff;
	color:#fff;
}
.new-product .wrap .readmore {
	display: flex;
	-o-display: flex;
	-moz-display: flex;
	-webkit-display: flex;
	align-items: center;
	justify-content: center;
}
.new-product .wrap .panel-body{
	padding:20px 0;
}
.new-product .wrap .panel-body p{
	text-align: center;
	color:#fff;
	line-height: 30px;
}
.new-product .wrap .panel-head{
	padding:25px 0;
	position: relative;
}
.new-product .wrap .panel-head:before{
	position: absolute;
	display: block;
	content:"";
	width:100%;
	height: 2px;
	background:#fff;
	top:100%;
	left: 50%;
	right: 50%;
	transform: translate(-50%,-50%);
	-o-transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
}
.new-product .wrap .panel-head{
	text-align: center;
}
.new-product .wrap .panel-head img{
	
}
.new-product .wrap .panel-head .heading-2{
	margin-top:20px;
	color:#fff;
	text-transform: uppercase;
	font-weight: 600;
	font-size:24px;
}
.new-product {
	position: relative;
}
.new-product .new{
	position: absolute;
	top:0;
	left:8%;
}
.new-product .wrap-1{
	display: flex;
	-o-display: flex;
	-moz-display: flex;
	-webkit-display: flex;
	align-items: center;
	-o-align-items: center;
	-moz-align-items: center;
	-webkit-align-items: center;
	-ms-align-items: center;
	justify-content: center;
	-o-justify-content: center;
	-moz-justify-content: center;
	-webkit-justify-content: center;
	-ms-justify-content: center;
	padding:10px 0;
}
.new-product .wrap-1{
	position: relative;
}
.new-product .wrap-1 .new-icon{
	position: absolute;
	left:80%;
	width:91px;
	height: 89px;
	transform: translateX(-80%);
	-moz-transform: translateX(-80%);
	-o-transform: translateX(-80%);
	-webkit-transform: translateX(-80%);
	top:10%;
}
@media(max-width: 415px){
	.new-product .wrap .panel-head .heading-2{
		font-size:22px;
	}
	.new-product .wrap-1 .new-icon img{ 
		width:40px;
		height: 40px;
	 }
	 .new-product .wrap-1 .new-icon{
	 	left:90%;
	 }
}
@media(max-width: 321px){
	.new-product .wrap-1 .new-icon{
	 	left:95%;
	 }
}
@media (max-width: 376px){
.new-product .wrap .panel-head .heading-2 {
    font-size: 20px;
	}
}
@media (max-width: 321px){
.new-product .wrap .panel-head .heading-2 {
    font-size: 16px;
	}
}


.list-product .product{
	position:relative;
}
.list-product .product .bagde{
	position:absolute;
	right:10px;
	top:5px;
	z-index:1;
}
.list-product .product .bagde .icon{
	max-width: 60px;
	display:inline-block;
}
/*PRODUCT NOI BAT*/
.feature-product .panel-head {
	display: flex;
	-o-display: flex;
	-moz-display: flex;
	-webkit-display: flex;
	align-items: center;
	-o-align-items: center;
	-moz-align-items: center;
	-webkit-align-items: center;
	-ms-align-items: center;
	justify-content: center;
	-o-justify-content: center;
	-moz-justify-content: center;
	-webkit-justify-content: center;
	-ms-justify-content: center;
}

.feature-product .panel-head .heading-3{
	text-align: center;
	display: inline-block;
	border:1px solid #ddd;
	padding:30px 40px;
	font-weight: 600;
	text-transform: uppercase;
	position: relative;
	font-size:30px;
	color:#00763a;
}
.feature-product .panel-head .heading-3:before{
	content:"";
	display: block;
	position: absolute;
	right: 44%;
	color:#fff;
	transform: translateY(-40%);
	-o-transform: translateY(-40%);
	-moz-transform: translateY(-40%);
	-webkit-transform: translateY(-40%);
	top:0;
	background: #fff;
	width:68px;
	height: 30px;
	z-index: 9;
}
 .feature-product  .panel-head .heading-3:after{
	content:"\f067";
	display: block;
	position: absolute;
	font-family: FontAwesome;
	right: 50%;
	color:#fff;
	font-size:12px;
	transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	top:0;
	background: #ea0007;
	border-radius:50%;
	width:20px;
	line-height: 20px;
	text-align: center;
	height: 20px;
	z-index: 10;
}
.feature-product {
	padding:45px 0;
}
.feature-product .thumb{
	background:url(img/upload/background-product.png) no-repeat center;
	border:1px solid #ddd;
	background-size:cover;
	height: 300px;
}
.feature-product .thumb img{
	height: 300px;
}
.feature-product .meta{
	padding:12px 0;
}
.feature-product .meta .des{
	padding:0 14px;
}
.feature-product .meta .name{
	display: inline-block;
	padding:5px 10px;
	color:#fff;
	font-weight: 500;
	background: #39a633;
	border-radius:10px;
	-o-border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;

}
.feature-product .panel-body{
	padding-top:30px;
}
@media(max-width:769px){
	.feature-product .meta{
		text-align: center;
	}
}
/*SUPPORT ONLINE*/
.support-online .panel-head{
	text-align: center;
}
.support-online .panel-head .heading-3{
	font-size:24px;
	color:#39a633;
	text-shadow: -3px 2px 0px #fff, 5px 2px 8px #f0f3f0;
	text-transform:uppercase;
	padding:12px 0;
}
.support-online{
	background:url(img/upload/background-hotro.png) no-repeat center;
	background-size:cover;
	padding:20px 0;
}
.support-online .panel-head .heading-4{
	font-size:18px;
	color:#333;
	text-transform:uppercase;
}
.support-online .panel-body{
	padding:20px 0;
}
.support-online .panel-body .thumb{
	display: block;
	width:70px;
	height:170px;
	float:left;
}
.support-online .panel-body .thumb img{
	display: block;
	width:70px;
	height:70px; 
}

.support-online .panel-body .meta{
	display: inline-block;
	padding:0 10px;
}
.support-online .panel-body .menu p.active{
	font-weight: 600;
}
.support-online .panel-body a{
	color:#333;
}
@media(max-width:779px){
.support-online .panel-body .thumb{
		height: 70px;
		float:none;
		margin-left: 20px;
	}
	
}
@media(max-width: 601px){
	.support-online .panel-body .menu{
		text-align: center;
	}
	.support-online .panel-body .menu .thumb{
		margin-left:45%;
	}
}
@media(max-width: 416px){
	.support-online .panel-body .menu .thumb{
		margin-left:40%;
	}
}
	/*NEWS BOTTOM*/
	.new-bottom{
		padding:20px 0;
	}
.new-bottom .panel-head .heading-5{
	padding: 10px 0;
	position: relative;
	color:#00763a;
	text-transform: uppercase;
}
.new-bottom .panel-head .heading-5:before{
	content:"";
	display: block;
	position:absolute;
	width:100%;
	height: 1px;
	background:#ddd;
	top:100%;
}
.new-bottom .panel-body{
	padding:10px 0;
}
.new-bottom .panel-body ul li{
	display: block;
	padding:10px 0;
	border-bottom:1px dashed #ddd;
}
.new-bottom .panel-body ul li .des{
	padding: 0 14px;
}
.new-bottom .panel-body ul li a{
	color:#333;
}
.new-bottom .panel-body .video{
	height: 225px;
}
@media(max-width: 600px){
	.new-bottom .panel-body ul li .des{
		padding:0 5px;
	}
}
/*FOOTER*/
#footer {
	padding: 60px 0 0px 0;
	background:#00763a;
	color:#fff;
}
#footer a{
	color:#fff;
}
.heading-6{
	font-weight: 600;
	color:#fff;
}
#footer .description{
	line-height: 30px;
	padding-right: 30px;
}
#footer .panel-head{
	padding:20px 0;
}
#footer .nav-foot{
	padding:20px 0;
}
#footer .nav-foot li a{
	display: block;
	padding:10px 0;
}
.copyright{
	padding:14px 0;
	border-top:1px solid #333!important;
}
#footer .address,#footer .phone,
 #footer .mail, #footer .web{
 	position: relative;
 	padding:0 18px;
 }
 #footer .address:before{
 	content:"\f041 ";
 	display: block;
 	position: absolute;
 	font-family: FontAwesome;
 	left:0;
 	font-size:12px;
 }
 #footer .phone:before{
 	content:"\f095";
 	display: block;
 	position: absolute;
 	font-family: FontAwesome;
 	left:0;
 	font-size:12px;
 }
 #footer .mail:before{
 	content:"\f003";
 	display: block;
 	position: absolute;
 	font-family: FontAwesome;
 	left:0;
 	font-size:12px;
 }
 #footer .web:before{
 	content:"\f0ac";
 	display: block;
 	position: absolute;
 	font-family: FontAwesome;
 	left:0;
 	font-size:12px;
 }
 #footer .border{
 	border-right:1px dotted #ddd;
 }
 .fl{
 	padding:30px 0;
 }
 .fl p{
 	font-weight: 600;
 	padding:20px;
 }
 .fl .mxh a{
 	font-size:25px;
 	margin-left:15px;
 }
 @media(max-width: 769px){
 	#footer .border{
 	border-right:none;
 	}
 }

 /* Product */
	.product-catalogue, .product-related {margin-bottom: 25px!important;}
	.product-catalogue .heading {
		margin: 0 0 20px 0;
		font-size: 18px;
		line-height: 24px;
		font-weight: bold;
	}
	.product-catalogue .heading>* {color: #00763a;}
	.product-related .heading {
		position: relative;
		margin: 0 0 20px 0;
		padding-bottom: 8px;
		font-size: 16px;
		line-height: 20px;
		font-weight: bold;
		text-transform: uppercase;
	}
	.product-related .heading>* {color: #252525;}
	.product-related .heading:before {
		content: "";
		display: block;
		position: absolute;
		width: 80px;
		height: 2px;
		background: #00763a;
		left: 0px;
		top: initial;
		bottom: 0px;
	}

	.product-catalogue .panel-body {padding-bottom: 15px;}
	.panel-products .list-product>li {margin-bottom: 30px;}
	@media (max-width: 959px) {
		.panel-products .list-product {margin-left: -10px;}
		.panel-products .list-product>li {
			padding-left: 10px;
			margin-bottom: 15px;
		}
	}
	@media (max-width: 479px) {
		.panel-products .list-product>li {margin-bottom: 10px;}
	}

	.product-1 .thumb {
		position: relative;
		overflow: hidden;
		margin: 0 0 15px 0;
		padding: 30px;
		background-position: center;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-ms-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		border:1px solid #ddd;
	}
	.product-1 .overlay {
		position: absolute;
		width: 100%;
		height: 100%;
		padding: 20px 0;
		top: 0px;
		left: 0px;
		background: rgba(0, 0, 0, .6);
		text-align: center;
		color: #fff;
		-webkit-transform: translate(0, 100%);
		-moz-transform: translate(0, 100%);
		-ms-transform: translate(0, 100%);
		-o-transform: translate(0, 100%);
		transform: translate(0, 100%);
		-webkit-transition: all .4s linear;
		-moz-transition: all .4s linear;
		-ms-transition: all .4s linear;
		-o-transition: all .4s linear;
		transition: all .4s linear;
	}
	.product-1 .thumb:hover .overlay {
		-webkit-transform: translate(0, 0);
		-moz-transform: translate(0, 0);
		-ms-transform: translate(0, 0);
		-o-transform: translate(0, 0);
		transform: translate(0, 0);
	}
	.product-1 .overlay .title {
		position: relative;
		margin: 0 0 15px 0;
		padding: 5px 0;
		font-size: 14px;
		font-weight: bold;
		color: #fff;
		background: #39a633;
	}
	.product-1 .overlay .title a {color: #fff;}
	.product-1 .overlay .description {
		margin: 0 0 20px 0;
		padding: 0 10px;
		font-size: 13px;
		line-height: 18px;
		height: 54px;
	}
	.product-1 .overlay .detail a {
		display: inline-block;
		padding: 6px 20px;
		font-size: 13px;
		line-height:18px;
		background: #39a633;
		border: 1px solid #39a633;
		color: #fff;
		-webkit-transition: all .4s linear;
		-moz-transition: all .4s linear;
		-ms-transition: all .4s linear;
		-o-transition: all .4s linear;
		transition: all .4s linear;
	}
	.product-1 .overlay .detail a:hover {background: transparent;}
	.product-1 .info {
		position: relative;
		padding: 5px 0 0 90px;
	}
	.product-1 .trademark {
		display: block;
		position: absolute;
		width: 70px;
		padding: 5px;
		text-align: center;
		background: #39a633;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		-ms-border-radius: 3px;
		-o-border-radius: 3px;
		border-radius: 3px;
		color: #fff;
		left: 0px;
		top: 0px;
	}
	.product-1 .main-title {
		margin: 0;
		font-size: 14px;
		line-height: 20px;
		font-weight: normal;
	}
	.product-1 .main-title a {color: #252525;}
	.product-1 .main-title a:hover {color: #00763a;}
	@media (min-width: 1220px) {
		.product-1 .image {height: 170px;}
	}
	@media (min-width: 960px) and (max-width: 1220px) {
		.product-1 .image {height: 160px;}
	}
	@media (min-width: 767px) and (max-width: 959px) {
		.product-1 .image {height: 180px;}
	}
	@media (min-width: 567px) and (max-width: 767px) {
		.product-1 .image {height: 200px;}
	}
	@media (min-width: 479px) and (max-width: 567px) {
		.product-1 .image {height:170px;}
	}
	@media (max-width: 1219px) {
		.product-1 .thumb {padding: 15px;}
	}
	@media (max-width: 959px) {
		.product-1 .trademark {
			top: -45px;
			-webkit-border-radius: 0;
			-moz-border-radius: 0;
			-ms-border-radius: 0;
			-o-border-radius: 0;
			border-radius: 0;
		}
		.product-1 .info {
			padding: 0;
			text-align: center;
		}
		.product-1 .overlay {
			display: none;
			visibility: hidden;
		}
	}
	@media (max-width: 479px) {
		.product-1 .image {height: 100px;}
		.product-1 .thumb {margin: 0 0 5px 0;}
		.product-1 .trademark {display: none;}
		.product-1 .main-title {
			height: 20px;
			overflow: hidden; 
			-ms-text-overflow: ellipsis; 
			text-overflow: ellipsis; 
			display: -webkit-box; 
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
		}
	}
	
	/* Aside */
	.aside, .aside>* {margin-bottom: 25px;}
	.aside-categories {
		position: relative;
		padding: 15px;
		background: #0C8E4C;
	}
	.aside-categories .heading {
		margin: 0 0 10px 0;
		position: relative;
		padding-bottom: 8px;
		font-size: 14px;
		line-height: 20px;
		text-transform: uppercase;
		font-weight: bold;
	}
	.aside-categories .heading:before {
		content: "";
		display: block;
		position: absolute;
		width: 85px;
		height: 2px;
		background: #fff;
		left: 0px;
		bottom: 0px;
	}
	.aside-categories .heading>* {color: #fff;}
	.aside-categories .mainCat li a {
		position: relative;
		display: block;
		padding: 10px 10px 10px 15px;
		color: #fff;
	}
	.aside-categories .mainCat li+li a {border-top: 1px dashed #f7ce80;}
	.aside-categories .mainCat li a:before {
		content: "\f067";
		font-family: FontAwesome;
		display: block;
		position: absolute;
		left: 0px;
		top: 10px;
		font-size: 10px;
	}
	.aside-categories .mainCat li a:hover {text-decoration: underline;}

	.aside-product .heading {
		position: relative;
		padding-bottom: 8px;
		margin: 0 0 20px 0;
		font-size: 14px;
		line-height: 20px;
		text-transform: uppercase;
		font-weight: bold;
	}
	.aside-product .heading:before {
		content: "";
		display: block;
		position: absolute;
		width: 80px;
		height: 2px;
		background: #00763a;
		left: 0px;
		top: initial;
		bottom: 0;
	}
	.aside-product .heading>* {color: #00763a;}
	.aside-product .list-product>li:not(:last-child) {margin-bottom: 15px;}
	.aside-product .list-product>li+li {
		padding-top: 15px;
		border-top: 1px solid #eaeaea;
	}
	.aside-product .product .thumb {
		float: left;
		width: 100px;
		padding: 5px;
		border: 1px solid #e1e1e1;
	}
	.aside-product .product .image {height: 80px;}
	.aside-product .product .info {
		float: right;
		width: -webkit-calc(100% - 100px);
		width: -moz-calc(100% - 100px);
		width: -ms-calc(100% - 100px);
		width: -o-calc(100% - 100px);
		width: calc(100% - 100px);
		padding-left: 15px;
	}
	.aside-product .product .title {
		margin: 0 0 5px 0;
		font-size: 14px;
		line-height: 20px;
		font-weight: normal;
		overflow: hidden; 
		-ms-text-overflow: ellipsis; 
		text-overflow: ellipsis; 
		display: -webkit-box; 
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		height: 40px;
	}
	.aside-product .product .title a {color: #39a633}
	.aside-product .product .title a:hover {text-decoration: underline;}
	.aside-product .product .star {
		margin: 0 0 5px 0;
		font-size: 13px;
		line-height: 18px;
		color: #ffb526;
	}
	.aside-product .product .price {
		font-size: 14px;
		font-weight: bold;
		color: #df0024;
	}
	
	#prdcatalogue{
		margin-top:20px;
	}
	
	/* Product detail */
	.product-detail {
		margin-bottom: 25px!important;
		font-size: 14px;
		left: 20px;
		font-family: Arial, sans-serif;
		color: #000;
	}
	.product-detail .panel-body {margin-bottom: 15px;}
	.product-detail .gallery, .product-detail .introduction {margin-bottom: 20px;}
	.product-detail .gallery #slider {
		margin: 0 0 10px 0;
		border-radius: 0px;
		border: 1px solid #c8c8c8;
	}
	.product-detail .gallery #slider .image {
		padding: 3px;
		height: 300px;
	}
	.product-detail .gallery #carousel {margin: 0!important;}
	.product-detail .gallery #carousel.flexslider {background: transparent;}
	.product-detail .gallery #carousel .slides li:nth-child(n+2) {margin-left: 5px;}
	.product-detail .gallery #carousel .slides .image {
		padding: 3px;
		border: 1px solid #c8c8c8;
		height: 100px;
		padding: 10px;
	}
	.product-detail .gallery #slider .flex-direction-nav>*>* {
		display: block!important;
		opacity: 1!important;
		width: 35px;height: 35px;
		line-height: 35px;
		background: rgba(127, 127, 127, .5);
		text-align: center;
		z-index: 9;
	}
	.product-detail .gallery #slider .flex-direction-nav>*>*:before {
		color: #fff;
		font-size: 25px;
		z-index: 9;
	}
	.product-detail .gallery #slider:hover .flex-direction-nav>*>* {padding: 0;}
	.product-detail .gallery #slider .flex-direction-nav .flex-prev {left: 0px!important;}
	.product-detail .gallery #slider .flex-direction-nav .flex-next {right: 0px!important;}
	.product-detail .gallery .flex-direction-nav .flex-prev:before {content:'\f104';font-family: FontAwesome;}
	.product-detail .gallery .flex-direction-nav .flex-next:before {content:'\f105';font-family: FontAwesome;}

	.product-detail .introduction .title {
		margin: 0 0 15px 0;
		font-size: 22px;
		line-height: 24px;
		font-weight: bold;
		font-family: 'RobotoSlabBold', sans-serif;
		color: #00763a;
	}
	.product-detail .introduction .price {
		margin: 0 0 10px 0;
		font-size: 15px;
		line-height: 20px;
		color: #252525;
	}
	.product-detail .introduction .price .number {
		font-size: 18px;
		line-height: 24px;
		font-weight: bold;
		color: #f00;
	}
	.product-detail .introduction .description {
		margin-bottom: 20px;
		padding-top: 10px;
		border-top: 1px dotted #4d4d4d;
		font-size: 14px;
		line-height: 22px;
	}
	.product-detail .introduction .info .title {
		margin: 0 0 5px 0;
		font-size: 14px;
		line-height: 20px;
		font-weight: 600;
		color: #282a7b;
	}
	.product-detail .introduction .share .label {
		display: block;
		font-size: 13px;
		margin: 0 10px 0 0;
	}
	.product-detail .introduction .code_status {margin-bottom: 10px;}
	.product-detail .introduction .code_status li {
		float: left;
		position: relative;
	}
	.product-detail .introduction .code_status li+li {
		margin-left: 15px;
		padding-left: 15px;
	}
	.product-detail .introduction .code_status li+li:before {
		content: "";
		display: block;
		position: absolute;
		height: 10px;
		width: 1px;
		background: #333;
		left: 0px;
		top: 5px;
	}
	.product-detail .introduction .code_status .text {color: #f00;}
	.product-detail .introduction .weight {margin: 0 0 10px 0;}
	.product-detail .content-small {
		display: none;
		position: relative;
		margin: 0 0 20px 0;
	}
	.product-detail .content-small>.list>li+li {margin-top: 5px;}
	.product-detail .content-small>.list>li>a {
		display: block;
		position: relative;
		padding: 10px 10px 10px 15px;
		color: #000;
		background: #f1f1f5;
		border: 1px solid #e1e1e1;
	}
	.product-detail .content-small>.list>li>a:before {
		content: "\f105";
		font-family: FontAwesome;
		display: block;
		position: absolute;
		font-size: 15px;
		left: initial;
		right: 10px;
		top: 10px;
		font-weight: bold;
	}
	.product-detail .content-small>.list>li>a.uk-active:before {content: "\f107";}

	.product-detail .content-small .article {
		padding: 15px 10px;
		border: 1px solid #e1e1e1;
		border-top: none;
	}
	@media (max-width: 1220px) {
		.product-detail .introduction .share {display: block;}
		.product-detail .introduction .share .label {margin: 0 0 5px 0;}
	}
	@media (max-width: 768px) {
		.product-detail .content-small {display: block;}
	}
	@media (max-width: 567px) {
		.product-detail .gallery #slider .image {height: 250px;}
	}
	@media (max-width: 479px) {
		.product-detail .introduction .code_status li {float: none;}
		.product-detail .introduction .code_status li+li {
			margin: 5px 0 0 0;
			padding: 0;
		}
		.product-detail .introduction .code_status li+li:before {display: none;}
	}


	/* Tab */
	.tabControl {
		position: relative;
		bottom: -2px;
		z-index: 100;
	}
	.tabControl li {
		position: relative;
		z-index: 20;
		float: left;
		padding: 10px 25px;
		font-size: 14px;
		font-weight: 500;
		cursor: pointer;
		color: #000;
		border: 1px solid transparent;
		border-top: 2px solid transparent;
	}
	.tabControl li.uk-active, 
	.tabControl li:hover {
		position: relative;
		border: 1px solid #c8c8c8;
		background: #fff;
		border-bottom: none;
		border-top: 2px solid #00763a;
		color: #00763a;
	}
	.tabContent {
		padding: 10px 15px;
		color: #000;
		border: 1px solid #c8c8c8;
		font-size: 14px;
		line-height: 22px;
	}
	@media (min-width: 479px) {
		.tabControl li+li {margin-left: 5px;}
	}
	@media (max-width: 767px) {
		.tabControl li {padding: 10px 20px;}
		.tabContent {
			padding: 15px 10px 10px 10px;
		}
	}
	@media (max-width: 599px) {
		.tabControl li {
			padding: 10px 15px;
			font-size: 13px;
		}
	}
	@media (max-width: 479px) {
		.tabControl li {
			padding: 10px 10px;
			font-size: 13px;
			text-transform: none;
		}
		.tabControl li+li {margin-left: 0;}
	}
	
	.bl-panel-head .heading-1{
	font-size:25px;
	font-weight:600;
	text-transform:uppercase;
	color:#333;
	position: relative;
	border-bottom: #22140c4a 1px solid;
	padding:15px 0
}
.bl-panel-head .heading-1:before{
	content: "";
	display: block;
	position: absolute;
	width:125px;
	height: 2px;
	bottom:0;
	left: 0;
	background:#f47920;
}
.bl-panel-body{
	padding:20px 0;
}
.bl-panel-body .bl-description{
	padding:0 12px;
	line-height:30px;
}
.bl-panel-body .bl-thumb img{
	height:195px;
	overflow: hidden;
	display:block;
}
.bl-description .des-head a{
	font-size: 18px;
	font-weight:bold;
	color:#f47920;

}
.bl-description .des-head a:hover{
	color:#3C2415;
}
.bl-description .meta{
	font-size:12px;
	font-style: italic;
	color:#898989;
}
/* ######################## Article ######################## */
.artcatalogue {margin-bottom: 25px!important;}
.artcatalogue .panel-body {padding: 0 0 10px 0;}
.artcatalogue .list-article>li:not(:last-child) {margin-bottom: 10px;}
[class*=article-] .description p {margin: 0;}
[class*=article-] .title a {
	-webkit-transition: all .4s linear;
	-moz-transition: all .4s linear;
	-ms-transition: all .4s linear;
	-o-transition: all .4s linear;
	transition: all .4s linear;
}
.artcatalogue .article {position: relative;}
.artcatalogue .article .thumb {
	position: relative;
	float: left;
	width: 250px;
}
.artcatalogue .article .info {
	position: relative;
	float: left;
	width: -moz-calc(100% - 250px);
	width: -webkit-calc(100% - 250px);
	width: -ms-calc(100% - 250px);
	width: -o-calc(100% - 250px);
	width: calc(100% - 250px);
	padding-left: 20px;
}
.artcatalogue .article .title {
	margin: 0 0 10px 0;
	font-size: 18px;
	line-height: 22px;
}
.artcatalogue .article .title a {
	display: block;
	color: #333;
}
.artcatalogue .article .title a:hover {color: #0097D2;}
.artcatalogue .article .meta {
	margin: 0 0 5px 0;
	font-size: 13px;
	line-height: 18px;
	color: #999;
}
.artcatalogue .article .meta>*+* {margin-left: 15px;}
.artcatalogue .article .description {
	font-size: 15px;
	line-height: 20px;
	height: 80px;
	color: #666;
}
@media (min-width: 1220px) {
	.artcatalogue .list-article>li:not(:last-child) {margin-bottom: 15px;}
	.artcatalogue .article .thumb {width: 285px;}
	.artcatalogue .article .info {
		width: -moz-calc(100% - 285px);
		width: -webkit-calc(100% - 285px);
		width: -ms-calc(100% - 285px);
		width: -o-calc(100% - 285px);
		width: calc(100% - 285px);
	}
}
@media (min-width: 479px) and (max-width: 767px) {
	.artcatalogue .article .thumb {width: 180px;}
	.artcatalogue .article .info {
		position: relative;
		width: -moz-calc(100% - 180px);
		width: -webkit-calc(100% - 180px);
		width: -ms-calc(100% - 180px);
		width: -o-calc(100% - 180px);
		width: calc(100% - 180px);
	}
	.artcatalogue .article .description {height: 60px;}
}
@media (max-width: 767px) {
	.artcatalogue .article .meta {display: none;}
	.artcatalogue .article .info {padding-left: 15px;}
}
@media (max-width: 567px) {
	.artcatalogue .list-article>li:not(:last-child) {margin-bottom: 0;}
	.artcatalogue .article {
		position: relative;
		margin-bottom: 10px!important;
		padding-top: 10px!important;
	}
	.artcatalogue .article:before {
		content: "";
		height: 1px;
		position: absolute;
		display: block;
		top: 1px;
		left: initial;
		right: 0;
		width: -webkit-calc( 65% - 10px);
		width: -moz-calc( 65% - 10px);
		width: -o-calc( 65% - 10px);
		width: -ms-calc( 65% - 10px);
		width: calc( 65% - 10px);
		background: #e1e1e1;
	}
	.artcatalogue .article .thumb {
		width: 35%;
		padding: 0;
		border: none;
	}
	.artcatalogue .article .image {height: 80px;}
	.artcatalogue .article .info {
		width: 65%;
		padding-left: 10px;
	}
	.artcatalogue .article .title {
		margin: 0;
		font-size: 15px;
		line-height: 20px;
		font-weight: normal;
		font-family: 'No1 Bold', sans-serif;
	}
	.artcatalogue .article .description {display: none;}
	.artcatalogue .article.featured {
		margin-bottom: 10px!important;
		padding-top: 0px!important;
	}
	.artcatalogue .article.featured:before {display: none;}
	.artcatalogue .article.featured .thumb {
		float: none;
		width: 100%;
		margin: 0;
	}
	.artcatalogue .article.featured .image {height: auto;}
	.artcatalogue .article.featured .info {
		position: absolute;
		float: none;
		width: 100%;
		margin: 0;
		padding: 10px 15px;
		left: 0;
		top: initial;
		bottom: 0px;
		z-index: 5;
		background-image: -webkit-linear-gradient(transparent 0%, rgba(0, 0, 0, 0.5) 100%);
		background-image: -o-linear-gradient(transparent 0%, rgba(0, 0, 0, 0.5) 100%);
		background-image: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.5) 100%);
	}
	.artcatalogue .article.featured .title {
		font-size: 18px;
		line-height: 22px;
		font-family: 'No1 Bold', sans-serif;
		font-weight: normal;
		text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.3);
		text-align: center;
	}
	.artcatalogue .article.featured .title a {color: #fff;}
	.artcatalogue .list-article>li:nth-of-type(2) .article:before {display: none;}
}

/* ######################## Contact ######################## */
	#contact-page .breadcrumb {
		padding: 0 0 10px 0;
		margin-bottom: 20px;
	}
	.contact {margin: 0 0 30px 0;}
	.contact .contact-infomation, 
	.contact .contact-form {
		margin-bottom: 20px!important;
	}
	.contact .contact-infomation .note {
		margin-bottom: 10px;
		font-style: italic;
		color: #666;
		font-weight: 500;
	}
	.contact .contact-infomation .company {
		margin-bottom: 10px;
		font-size: 20px;
		line-height: 24px;
		text-transform: uppercase;
		color: #ba2026;
		font-weight: normal;
		font-family: 'UTM Avo Bold', sans-serif;
	}
	.contact .contact-infomation .address {margin-bottom: 20px;}
	.contact .contact-infomation .address p {
		margin: 0 0 5px 0;
		color: #000;
	}
	.contact .contact-infomation .address a {color: #000;}
	.contact .contact-map {
		padding: 4px;
		border: 1px solid #d5d5d5;
		height: 340px;
	}
	.contact .contact-form .label {
		font-size: 14px;
		line-height: 22px;
		color: #000;
		margin-bottom: 15px;
	}
	.contact .contact-form .form-row {margin-bottom: 10px;}
	.contact .contact-form .input-text, 
	.contact .contact-form .form-select, 
	.contact .contact-form .form-textarea {
		border: 1px solid #d5d5d5;
		font-size: 14px;
		line-height: 20px;
		color: #000;
	}
	.contact-form .form-select {color: #999!important;}
	.contact .contact-form .input-text, 
	.contact .contact-form .form-select {height: 30px;}
	.contact .contact-form .form-textarea {
		padding: 5px 10px;
		height: 200px;
	}
	.contact-form .btn-submit {
		display: inline-block;
		padding: 6px 25px;
		cursor: pointer;
		background: #ba2026;
		font-size: 14px;
		line-height: 20px;
		text-transform: uppercase;
		color: #fff;
		border: none;
	}
	/* ######################## Header for mobile ######################## */
	.mobile-header {
		position: relative;
		z-index: 5;
	}
	.mobile-header .topbar {
		padding: 3px 10px;
		background: #00763a;
		line-height: 18px
		font-size: 12px;
		color: #fff;	
		text-align: center;
	}
	.mobile-header .topbar p {margin: 0;}
	.mobile-header .upper {
		padding: 7px 10px;
		background: #f3f3f3;
		position: relative;
		text-align: center;
	}
	.mobile-header .logo {display: inline-block;}
	.mobile-header .logo a {width: 150px;}
	.mobile-header .lower {
		position: relative;
		padding: 7px 5px;
		background: #fff;
		border-top: 1px solid #e1e1e1;
		border-bottom: 1px solid #e1e1e1;
	}
	.mobile-search .form {
		position: relative;
		padding-right: 60px;
	}
	.mobile-search .form .input-text {
		display: block;
		height: 32px;
		background: #fff;
		font-size: 13px;
		line-height: 32px;
		color: #000;
		border: 1px solid #0388cd;
		-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,.12);
		-moz-box-shadow: inset 0 0 5px rgba(0,0,0,.12);
		-ms-box-shadow: inset 0 0 5px rgba(0,0,0,.12);
		-o-box-shadow: inset 0 0 5px rgba(0,0,0,.12);
		box-shadow: inset 0 0 5px rgba(0,0,0,.12);
	}
	.mobile-search .form .btn-submit {
		display: block;
		position: absolute;
		height: 32px;
		width: 60px;
		top: 0px;
		left: initial;
		right: 0px;
		background: #00763a url(img/icon_search.png) 50% 50% no-repeat;
		border: 1px solid #00763a;
		cursor: pointer;
		text-indent: -99999px;
	}
	.mobile-search .form .input-text::-webkit-input-placeholder {
	    color: #999;
	    font-size: 13px;
	}
	.mobile-search .form .input-text::-moz-placeholder {
	    color: #999;
	    font-size: 13px;
	}
	.mobile-search .form .input-text:-ms-input-placeholder {
	    color: #999;
	    font-size: 13px;
	}
	.mobile-search .form .input-text:-moz-placeholder {
	    color: #999;
	    font-size: 13px;
	}
	.mobile-cart {
		display: block;
		position: absolute;
		width: 40px;
		height: 36px;
		left: initial;
		right: 0px;
		top: 50%;
		-webkit-transform: translate(0, -50%);
		-ms-transform: translate(0, -50%);
		-o-transform: translate(0, -50%);
		transform: translate(0, -50%);
		background: url(img/icon-cart.png) 0px 0px no-repeat;
		-webkit-background-size: 40px 36px;
		-moz-background-size: 40px 36px;
		-o-background-size: 40px 36px;
		background-size: 40px 36px;
	}
	.mobile-cart .quantity {
		display: block;
		position: absolute;
		top: -1px;
		left: initial;
		right: 10px;
		font-size: 10px;
		color: #fff;
	}
	
	.upper .search{}
.upper .search .search-form{
	margin-bottom: 10px;
}
.upper .search .search-form>*{
	border: 1px solid #00763a;
	outline: none;
}
.upper .search .search-form>*:not(:last-child){
	border-right: none;
}
.upper .search .search-form .search-cate{
	background: #f7f5f5;
	font-size: 12px;
	width: 165px;
}
.upper .search .search-form .search-input{
	position: relative;
	min-width: 300px;
}
.upper .search .search-form .search-input::placeholder{
	color: #898989;
	font-size: 12px;
}
.upper .search .search-form .search-input::after{
	content: "\f030";
	font-family: 'fas';
	display: block;
	position: absolute;
	top: 0;
	right: 10px;
	transform: translateY(30%);
	color: #898989;
}
.upper .search .search-form .search-input input{
	display: block;
	width: 100%;
	height: 100%;
	border: none;
	padding: 0 10px;
	padding-right: 25px;
	line-height: 25px;
	font-size: 12px;
	outline: none;
}
.btn-search{
	background: #00763a;
	color: #fff;
}
.upper .search .search-last{}
.upper .search .search-last p{
	margin:0;
}
.upper .search .search-last span{
}
.upper .search .search-last span:not(:last-child){
	border-right: 1px solid #363636;
}
.upper .search .search-last span a{
	color: #363636;
	font-size: 12px;
	padding-right: 10px;
}
.upper .search .search-last span:not(:first-child) a{
	padding-left: 10px;
}
kbd{
	width:100% !important;
	color:#333 !important;
}

/* EXTEND */
.ring-alo-phone{position:fixed;left:5px;bottom:10px;visibility:visible;background-color:transparent;width:110px;height:110px;cursor:pointer;z-index:200000!important}
.ring-alo-ph-circle{width:90px;height:90px;top:12px;left:12px;position:absolute;background-color:transparent;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;border:2px solid rgba(0,175,242,0.7);opacity:.1;border-color:#d6483c;opacity:.5}
.ring-alo-ph-circle-fill{width:60px;height:60px;top:28px;left:28px;position:absolute;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;border:2px solid transparent;-webkit-transition:all .5s;-moz-transition:all .5s;-o-transition:all .5s;transition:all .5s;background-color:#d6483c;opacity:.75!important}
.ring-alo-ph-img-circle{width:30px;height:30px;top:43px;left:43px;position:absolute;background:#d6483c url(img/icon-phone.png) no-repeat center center;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;border:2px solid transparent;opacity:.7;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out;-webkit-transform-origin:50% 50%;-moz-transform-origin:50% 50%;-ms-transform-origin:50% 50%;-o-transform-origin:50% 50%;transform-origin:50% 50%;background-color:#d6483c;background-size:70%}


/* ANIMATE */
@charset "UTF-8";

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

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

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

.animated.hinge {
  animation-duration: 2s;
}

.animated.flipOutX,
.animated.flipOutY,
.animated.bounceIn,
.animated.bounceOut {
  animation-duration: .75s;
}

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

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

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

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

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

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

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

.flash {
  animation-name: flash;
}

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

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

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

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

.pulse {
  animation-name: pulse;
}

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

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

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

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

  65% {
    transform: scale3d(.95, 1.05, 1);
  }

  75% {
    transform: scale3d(1.05, .95, 1);
  }

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

.rubberBand {
  animation-name: rubberBand;
}

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

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

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

.shake {
  animation-name: shake;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.tada {
  animation-name: tada;
}

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

@keyframes wobble {
  from {
    transform: none;
  }

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

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

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

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

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

  to {
    transform: none;
  }
}

.wobble {
  animation-name: wobble;
}

@keyframes jello {
  from, 11.1%, to {
    transform: none;
  }

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

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

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

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

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

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

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

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

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

  0% {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
  }

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

  40% {
    transform: scale3d(.9, .9, .9);
  }

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

  80% {
    transform: scale3d(.97, .97, .97);
  }

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

.bounceIn {
  animation-name: bounceIn;
}

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

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

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

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

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

  to {
    transform: none;
  }
}

.bounceInDown {
  animation-name: bounceInDown;
}

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

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

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

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

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

  to {
    transform: none;
  }
}

.bounceInLeft {
  animation-name: bounceInLeft;
}

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

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

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

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

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

  to {
    transform: none;
  }
}

.bounceInRight {
  animation-name: bounceInRight;
}

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

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

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

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

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

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

.bounceInUp {
  animation-name: bounceInUp;
}

@keyframes bounceOut {
  20% {
    transform: scale3d(.9, .9, .9);
  }

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

  to {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
  }
}

.bounceOut {
  animation-name: bounceOut;
}

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

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

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

.bounceOutDown {
  animation-name: bounceOutDown;
}

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

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

.bounceOutLeft {
  animation-name: bounceOutLeft;
}

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

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

.bounceOutRight {
  animation-name: bounceOutRight;
}

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

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

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

.bounceOutUp {
  animation-name: bounceOutUp;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  animation-name: fadeIn;
}

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

  to {
    opacity: 1;
    transform: none;
  }
}

.fadeInDown {
  animation-name: fadeInDown;
}

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

  to {
    opacity: 1;
    transform: none;
  }
}

.fadeInDownBig {
  animation-name: fadeInDownBig;
}

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

  to {
    opacity: 1;
    transform: none;
  }
}

.fadeInLeft {
  animation-name: fadeInLeft;
}

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

  to {
    opacity: 1;
    transform: none;
  }
}

.fadeInLeftBig {
  animation-name: fadeInLeftBig;
}

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

  to {
    opacity: 1;
    transform: none;
  }
}

.fadeInRight {
  animation-name: fadeInRight;
}

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

  to {
    opacity: 1;
    transform: none;
  }
}

.fadeInRightBig {
  animation-name: fadeInRightBig;
}

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

  to {
    opacity: 1;
    transform: none;
  }
}

.fadeInUp {
  animation-name: fadeInUp;
}

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

  to {
    opacity: 1;
    transform: none;
  }
}

.fadeInUpBig {
  animation-name: fadeInUpBig;
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.fadeOut {
  animation-name: fadeOut;
}

@keyframes fadeOutDown {
  from {
    opacity: 1;
  }

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

.fadeOutDown {
  animation-name: fadeOutDown;
}

@keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }

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

.fadeOutDownBig {
  animation-name: fadeOutDownBig;
}

@keyframes fadeOutLeft {
  from {
    opacity: 1;
  }

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

.fadeOutLeft {
  animation-name: fadeOutLeft;
}

@keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }

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

.fadeOutLeftBig {
  animation-name: fadeOutLeftBig;
}

@keyframes fadeOutRight {
  from {
    opacity: 1;
  }

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

.fadeOutRight {
  animation-name: fadeOutRight;
}

@keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }

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

.fadeOutRightBig {
  animation-name: fadeOutRightBig;
}

@keyframes fadeOutUp {
  from {
    opacity: 1;
  }

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

.fadeOutUp {
  animation-name: fadeOutUp;
}

@keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }

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

.fadeOutUpBig {
  animation-name: fadeOutUpBig;
}

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

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

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

  80% {
    transform: perspective(400px) scale3d(.95, .95, .95);
    animation-timing-function: ease-in;
  }

  to {
    transform: perspective(400px);
    animation-timing-function: ease-in;
  }
}

.animated.flip {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  animation-name: flip;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  to {
    transform: none;
    opacity: 1;
  }
}

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

@keyframes lightSpeedOut {
  from {
    opacity: 1;
  }

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

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

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

  to {
    transform-origin: center;
    transform: none;
    opacity: 1;
  }
}

.rotateIn {
  animation-name: rotateIn;
}

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

  to {
    transform-origin: left bottom;
    transform: none;
    opacity: 1;
  }
}

.rotateInDownLeft {
  animation-name: rotateInDownLeft;
}

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

  to {
    transform-origin: right bottom;
    transform: none;
    opacity: 1;
  }
}

.rotateInDownRight {
  animation-name: rotateInDownRight;
}

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

  to {
    transform-origin: left bottom;
    transform: none;
    opacity: 1;
  }
}

.rotateInUpLeft {
  animation-name: rotateInUpLeft;
}

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

  to {
    transform-origin: right bottom;
    transform: none;
    opacity: 1;
  }
}

.rotateInUpRight {
  animation-name: rotateInUpRight;
}

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

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

.rotateOut {
  animation-name: rotateOut;
}

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

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

.rotateOutDownLeft {
  animation-name: rotateOutDownLeft;
}

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

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

.rotateOutDownRight {
  animation-name: rotateOutDownRight;
}

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

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

.rotateOutUpLeft {
  animation-name: rotateOutUpLeft;
}

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

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

.rotateOutUpRight {
  animation-name: rotateOutUpRight;
}

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

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

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

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

.hinge {
  animation-name: hinge;
}

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

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

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

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

.jackInTheBox {
  animation-name: jackInTheBox;
}

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

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

  to {
    opacity: 1;
    transform: none;
  }
}

.rollIn {
  animation-name: rollIn;
}

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

@keyframes rollOut {
  from {
    opacity: 1;
  }

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

.rollOut {
  animation-name: rollOut;
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

.zoomIn {
  animation-name: zoomIn;
}

@keyframes zoomInDown {
  from {
    opacity: 0;
    transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

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

.zoomInDown {
  animation-name: zoomInDown;
}

@keyframes zoomInLeft {
  from {
    opacity: 0;
    transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

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

.zoomInLeft {
  animation-name: zoomInLeft;
}

@keyframes zoomInRight {
  from {
    opacity: 0;
    transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

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

.zoomInRight {
  animation-name: zoomInRight;
}

@keyframes zoomInUp {
  from {
    opacity: 0;
    transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

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

.zoomInUp {
  animation-name: zoomInUp;
}

@keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
  }

  to {
    opacity: 0;
  }
}

.zoomOut {
  animation-name: zoomOut;
}

@keyframes zoomOutDown {
  40% {
    opacity: 1;
    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

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

.zoomOutDown {
  animation-name: zoomOutDown;
}

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

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

.zoomOutLeft {
  animation-name: zoomOutLeft;
}

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

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

.zoomOutRight {
  animation-name: zoomOutRight;
}

@keyframes zoomOutUp {
  40% {
    opacity: 1;
    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

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

.zoomOutUp {
  animation-name: zoomOutUp;
}

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

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

.slideInDown {
  animation-name: slideInDown;
}

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

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

.slideInLeft {
  animation-name: slideInLeft;
}

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

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

.slideInRight {
  animation-name: slideInRight;
}

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

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

.slideInUp {
  animation-name: slideInUp;
}

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

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

.slideOutDown {
  animation-name: slideOutDown;
}

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

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

.slideOutLeft {
  animation-name: slideOutLeft;
}

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

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

.slideOutRight {
  animation-name: slideOutRight;
}

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

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

.slideOutUp {
  animation-name: slideOutUp;
}