@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,300;0,400;0,500;0,600;1,300&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css');

@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Playball&display=swap');

/* footer */

/* menu */



@font-face {

    font-family: 'Americana';

    src: url('../font/Americana-Font-Regular.otf') format('opentype');

    font-weight: regular;

    font-style: normal;

}

/*!

 * animate.css -http://daneden.me/animate

 * Version - 3.5.1

 * Licensed under the MIT license - http://opensource.org/licenses/MIT

 *

 * Copyright (c) 2016 Daniel Eden

 */

/*** Animate ****/

@charset "UTF-8";

/* If media is above 991 */

/* If media is below 992 */

/*!

 * animate.css -http://daneden.me/animate

 * Version - 3.5.1

 * Licensed under the MIT license - http://opensource.org/licenses/MIT

 *

 * Copyright (c) 2016 Daniel Eden

 */

 :root {

  --primary-font: "Open Sans", sans-serif;

  --secondary-font:"Americana", sans-serif;

  --light-color: #ffffff;

  --brand-primary: #232323;

  --brand-secondary: #a18f24;

}

.search-widget .dropdown-backdrop {
    z-index: 1 !important;
}

.search-widget {

    cursor: pointer;

    display: inline-block;

    vertical-align: middle;

    margin-right: 8px;

}

.search-widget .search-text {

    display: inline-block;

    vertical-align: middle;

    color: var(--brand-primary);

    -webkit-transition: all 0.5s;

    -moz-transition: all 0.5s;

    -o-transition: all 0.5s;

    transition: all 0.5s;

}

.search-widget .search-logo {

    fill: var(--brand-primary);

    width: 50px;

    height: 50px;

    display: block;

    border-radius: 50%;

    -webkit-transition: all 0.5s;

    -moz-transition: all 0.5s;

    -o-transition: all 0.5s;

    transition: all 0.5s;

}

.search-widget .search-logo:after{

  display: none;

}

.search-widget form input[type="text"] {

    min-width: 300px;

    width: 100%;

    border: 1px solid #f1f1f1;

    height: 40px;

    padding: 5px 55px 5px 15px;

    margin: 0;

    border-radius: 30px !important;

    background: #fff;

    text-transform: capitalize;

    font-size: 13px;

    letter-spacing: 0.3px;

    font-weight: 300;

}

.modal-title{

  font-size: 20px;

  color: #000;

}

#search .btn-lg {

    position: absolute !important;

    top: 0px;

    right: 0px;

    border: none;

    background: var(--brand-secondary);

    font-size: 14px;

    letter-spacing: 0;

    font-weight: 500;

    width: 45px;

    height: 40px;

    color: var(--light-color);

    text-transform: uppercase;

    padding: 8px 14px;

    border-radius: 0 30px 30px 0;

    border-top-left-radius: 0;

    border-bottom-left-radius: 0;

    outline: none;

    z-index: 11;

    -ms-transition: all 0.5s;

    -webkit-transition: all 0.5s;

    -moz-transition: all 0.5s;

    -o-transition: all 0.5s;

    transition: all 0.5s;

}

.associated-block{

    margin-top: 40px;

}

/*** Animate ****/

@charset "UTF-8";



/* If media is above 991 */

/*** WRAPPER ***/

/* If media is below 992 */

/* If media is below 992 */

/* If media is above 1199 */

/* If media is above 991 */

@media (min-width: 576px) {

  .container {

    max-width: 540px;

    width: 100%;

  }

}



@media (min-width: 768px) {

  .container {

    max-width: 720px;

    width: 100%;

  }

}



@media (min-width: 992px) {

  .container {

    max-width: 940px;

    width: 100%;

  }

}



@media (min-width: 1200px) {

  .container {

    max-width: 1750px;

    width: 100%;

  }

}

#trending-carousel .item a{

  margin-bottom: 30px;

  display: block;

}

#slidetop {

  background: #494949; none repeat scroll 0 0;

  box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.25);

  color: transparent;

  border-radius: 50%;

  bottom: 15px;

  cursor: pointer;

  height: 40px;

  overflow: hidden;

  padding: 6px;

  position: fixed;

  right: 15px;

  text-align: center;

  width: 40px;

  z-index: 99;

  display: none;

  -webkit-transition: all 0.5s;

  -moz-transition: all 0.5s;

  -o-transition: all 0.5s;

  transition: all 0.5s;

}

/*Breadcrumb*/



.banner-block{

  background: url(../images/category-page-banner.jpg) no-repeat top;

  background-repeat: no-repeat;

  background-size: cover;

  background-position: center;

  padding: 20% 0;

}

.banner-block.about-banner{

  background: url(../images/aboutus-banner.jpg) no-repeat top;

  padding: 12% 0;

  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;

}

.banner-block.contact-banner{

  background: url(../images/contact-us-banner.png) no-repeat top;

  background-repeat: no-repeat;

  background-size: cover;

  background-position: center;

  padding: 11% 0;

}

.banner-block.event-banner{

  background: url(../images/Upcoming-Events-Banner.jpg) no-repeat top;

  background-repeat: no-repeat;

  background-size: cover;

  background-position: center;

  padding: 11% 0;

}

.banner-block.dealer-banner{

  background: url(../images/become-a-dealer-banner.jpg) no-repeat top;

  background-repeat: no-repeat;

  background-size: cover;

  background-position: center;

  padding: 11% 0;

}

.banner-block.faq-banner{

  background: url(../images/faq-banner.jpg) no-repeat top;

  background-repeat: no-repeat;

  background-size: cover;

  background-position: center;

  padding: 11% 0;

}

.banner-block.privacy-banner{

  background: url(../images/privacy-policy.jpg) no-repeat top;

  background-repeat: no-repeat;

  background-size: cover;

  background-position: center;

  padding: 11% 0;

}

.banner-block.accessibility-banner{

  background: url(../images/accessibility-banner.png) no-repeat top;

  background-repeat: no-repeat;

  background-size: cover;

  background-position: center;

}

.banner-block.product-banner{

  background: url(../images/product-banner.jpg) no-repeat top;

  background-repeat: no-repeat;

  background-size: cover;

  background-position: center;

}

.terms-banner{

  background: url(../images/terms-conditions.jpg) no-repeat top;

  background-repeat: no-repeat;

  background-size: cover;

  background-position: center;

  padding: 6% 0;

}

.breadcrumb-container {

  /* If media is below 992 */

  background: url(../images/product-inner-banner.jpg) no-repeat top;

  padding: 10% 0;

  background-repeat: no-repeat;

  background-size: cover;

  background-position: center;

  margin-bottom: 50px;

  /******* Pagination *******/ }

  

  .breadcrumb-container .breadcrumb {

    background: transparent;

    margin-bottom: 0;

    text-align: center;

    padding: 0 15px; }

  .breadcrumb-container .breadcrumb .breadcrumb-title {

    font-size: 50px;

    line-height: normal;

    margin-bottom: 5px;

    color: var(--light-color);

    font-weight: 600;

    text-transform: capitalize;

    letter-spacing: 0.5px; }

  .breadcrumb-container .breadcrumb ul, .breadcrumb-container .breadcrumb ol {

    margin: 0;

    padding: 0; }

  .breadcrumb-container .breadcrumb li {

    display: inline-block;

    vertical-align: middle;

    color: var(--light-color); }

    .breadcrumb-container li a{

      color: var(--light-color);

    }

    .breadcrumb-container li a:hover{

      color: var(--brand-secondary);

    }

  .breadcrumb-container .breadcrumb li:after {

    content: "-";

    color: var(--light-color);

    margin: 0.3125rem; }

  .breadcrumb-container .breadcrumb li:last-child:after {

    display: none; }

#product-list-top{

    



    margin-bottom: 30px;

    

}
.products-selection{
	background: #e7e7e7;
	padding: 10px;
	border-radius: 5px;
	margin: 0 10px;
}
.products-selection.classic-product-list{
	background: #d5c2a3;
	
}
#product-list-top p{

  margin: 0;

  font-size: 18px;

  color: var(--light-color);

}

.sort-by-row{

  text-align: right;

  display: flex;

  justify-content: right;

}

.filter-area.dropdown-menu{

  left: auto;

  right: 0;

  min-width: 70em;

}

.select-title{

  padding: 5px 20px;

  display: flex;

  border: 1px solid var(--brand-primary);

  color: var(--brand-primary);

}

.select-title:hover,.select-title:focus{

  color: var(--brand-primary);

}

.products-sort-order{

    display: flex;

    justify-content: end;

    align-items: center;

    padding-right: 10px;

}

.products-selection{

  align-items: center;

}

.products-sort-order .dropdown-menu a{

  display: block;

}

.products-sort-order .dropdown-menu{

  padding: 10px 10px;

  right: 0;

  left: auto;

}

.products-sort-order .sort-by{

    padding-right: 15px;

    font-size: 17px;

    color: var(--brand-primary);

}

.product-details{

  margin-bottom: 30px;

}

.pagination{

    padding: 10px;

    background: #e7e7e7;

    margin-bottom: 30px;

    align-items: center;

}

.pagination-desc{

  font-size: 18px;

  color: var(--brand-primary);

}

.pagination a {

    margin: 0 auto;

    font-weight: 500;

    border: 1px solid #eee;

    width: 35px;

    height: 35px;

    padding: 5px;

    line-height: 22px;

    text-align: center;

    display: block;

    color: #232323;

    background-color: #fff;

    transition: 0.5s;

}

.thumb-container img{

  width: 192px;

  height: 126px;

}

.pagination .page-list li {

    display: inline-block;

    vertical-align: middle;

    text-align: center;

}

.pagination .current a {

    background-color: var(--brand-primary);

    text-decoration: none;

    color: #fff;

}

.product-details .product-title{

  font-size: 17px;

  font-family: "Kanit", sans-serif;

  text-align: center;

  margin-top: 10px;

}

.product-detail-page{

  padding: 100px 0;

}



.filter-column .container {

  display: block;

  position: relative;

  padding-left: 50px;

  margin-bottom: 12px;

  cursor: pointer;

  font-size: 18px;

  color: #000;

  -webkit-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  user-select: none;

}

.filter-column h3{

    padding: 18px 20px;

    background: #e7e7e7;

    margin-bottom: 30px;

    font-size: 20px;

    color: var(--brand-primary);

    text-transform: uppercase;

}

.product-details-area{

  text-align: center;

}

.category-product-block{

  padding: 100px 0;

}

.product-details-area .dropdown-menu{

      min-width: 100rem;

      right: 0;

}

.zoomImg {

    transition: 0.5s;

}

/* Hide the browser's default checkbox */

.filter-column .container input {

  position: absolute;

  opacity: 0;

  cursor: pointer;

  height: 0;

  width: 0;

  margin-left: 15px;

}

.filter-column{

    border: 1px solid #eee;

    margin-bottom: 30px;

    width: 25%;

    float: left;

    min-height: 270px;

}

/* Create a custom checkbox */

.filter-column .checkmark {

  margin-left: 15px;

  position: absolute;

  top: 0;

  left: 0;

  height: 25px;

  width: 25px;

  background-color: #eee;

}



/* On mouse-over, add a grey background color */

.filter-column .container:hover input ~ .checkmark {

  background-color: #ccc;

}



/* When the checkbox is checked, add a blue background */

.filter-column .container input:checked ~ .checkmark {

  background-color: #2196F3;

}



/* Create the checkmark/indicator (hidden when not checked) */

.filter-column .checkmark:after {

  content: "";

  position: absolute;

  display: none;

}



.filter-column .container input:checked ~ .checkmark {

  background-color: #2196F3;

}



/* Create the checkmark/indicator (hidden when not checked) */

.filter-column .checkmark:after {

  content: "";

  position: absolute;

  display: none;

}



/* Show the checkmark when checked */

.filter-column .container input:checked ~ .checkmark:after {

  display: block;

}



/* Style the checkmark/indicator */

.filter-column .container .checkmark:after {

  left: 9px;

  top: 5px;

  width: 6px;

  height: 9px;

  border: solid white;

  border-width: 0 3px 3px 0;

  -webkit-transform: rotate(45deg);

  -ms-transform: rotate(45deg);

  transform: rotate(45deg);

}



#slidetop:before {

  content: "\f106";

  display: inline-block;

  color: var(--light-color);

  font-family: FontAwesome;

  font-size: 24px;

  line-height: 26px;

}



#slidetop:after {

  display: none;

}



#slidetop:hover {

  background-color: var(--brand-primary);

}

#slidetop:hover:before {

  color: var(--light-color);

}

.aboutus .about-img img{  

  max-width: 100%;

}

.aboutus p{

  color: var(--brand-primary);

  font-size: 14px;

  font-weight: 400;

}



.videoblock p {

  color: var(--brand-primary);

  font-size: 14px;

  font-weight: 400;

}



footer a {

  font-family: var(--primary-font);

  font-weight: 400;

  letter-spacing: 0.5px;

  font-size: 14px;

  color: #383838;

  line-height: 24px;

  text-decoration: none;

  -webkit-transition: all 0.5s;

  -moz-transition: all 0.5s;

  -o-transition: all 0.5s;

  transition: all 0.5s;

}

.footer-before i{

  color: var(--light-color);

}

footer h2 {

  color: var(--brand-primary);

  font-size: 20px;

  font-weight: 500;

  font-family: var(--primary-font);

  margin-bottom: 20px;

}

footer{

  background: #e7e7e7;

}

.footer-before{

  padding: 80px 0;

}

.storeinfo .store-img{

  width: 70%;

  margin-bottom: 10px;

}

.storeinfo p{

    font-size: 14px;

    color: var(--light-color);

    margin-bottom: 0;

}

.storeinfo .store-img img{

  max-width: 100%;

}

.footerafter{

  align-items: center;

  padding: 10px 0;

}



.owl-nav {

  text-align: center;

  -webkit-transition: all 0.4s;

  -moz-transition: all 0.4s;

  -o-transition: all 0.4s;

  transition: all 0.4s;

}



.owl-nav .owl-prev,

.owl-nav .owl-next {

  display: inline-block;

  border: 1px solid #9b9b9b;

  background-color: #9b9b9b;

  color: var(--light-color);

  border-radius: 50%;

  margin: 0 4px;

  width: 35px;

  height: 35px;

  outline: none;

  -webkit-transition: all 0.3s ease 0s;

  -moz-transition: all 0.3s ease 0s;

  -ms-transition: all 0.3s ease 0s;

  -o-transition: all 0.3s ease 0s;

  transition: all 0.3s ease 0s;

}



.owl-nav .owl-prev:hover,

.owl-nav .owl-next:hover {

  background-color: var(--brand-primary);

  border-color: var(--brand-primary);

}



.owl-nav .owl-prev:hover i:after,

.owl-nav .owl-next:hover i:after {

  color: var(--light-color);

}



.owl-nav .owl-prev i,

.owl-nav .owl-next i {

  height: 35px;

  width: 35px;

  line-height: 35px;

}



.owl-nav .owl-prev i:after,

.owl-nav .owl-next i:after {

  content: "\E314";

  display: inline-block;

  font-family: "material icons";

  font-size: 24px;

  color: var(--light-color);

  margin-left: -2px;

}



.owl-nav .owl-next i:after {

  content: "\E315";

  margin: 0;

}



#_desktop_top_menu {

  /* If media is below 992 */

  position: relative;

  text-align: right;

}



@media (max-width: 991px) {

  #_desktop_top_menu {

    display: block;

  }

}



#top-menu {

  /* If media is below 1500 */

  padding: 0;

  margin: 0;

  justify-content: center;

}



.top-menu .dropdown-menu{

    display: block !important;
    border: 0;
    margin: 0 !important;

    grid-template-columns: 1fr 1fr 1fr 1fr;

}



.top-menu .submenu2 .dropdown-menu{

    grid-template-columns: unset;

}





#top-menu>li {

  display: inline-block;

  vertical-align: middle;

  text-align: center;

  background: transparent;

  position: relative;

  cursor: pointer;

  list-style: none;

  background: transparent;

  /* If media is below 992 */

}



#top-menu>li:last-child {

  border-bottom: 0;

}



#top-menu>li:last-child a:after {

  display: none;

}

@media (max-width: 1199px) {

  .top-menu .submenu3.dropdown-menu{

    min-width: 40em;

  }

}

@media (max-width: 991px) {

  #top-menu>li {

    padding: 2px 0;

    border-bottom: 0;

    overflow: hidden;

    display: block;

    text-align: left;

  }

}



#top-menu>li .dropdown-item {

  white-space: normal;

  display: block;

  width: 100%;

  clear: both;

}



#top-menu>li .dropdown-item.active,

#top-menu>li .dropdown-item:focus {

  background-color: transparent;

}



#top-menu>li .dropdown-item:active {

  background-color: transparent;

}



#top-menu>li>a {

  color: var(--brand-primary);

  font-weight: 500;

  font-size: 15px;

  line-height: 20px;

  padding: 15px 10px;

  position: relative;

  font-family: var(--primary-font);

  -webkit-transition: all 0.5s;

  -moz-transition: all 0.5s;

  -o-transition: all 0.5s;

  transition: all 0.5s;

}
.classic-header #top-menu>li>a {
        font-family: "Kanit", sans-serif;
    
}
#top-menu>li>a.active,

#top-menu>li>a:focus {

  background-color: transparent;

}





#top-menu>li>a i {

  float: right;

  line-height: 16px;

  font-size: 22px;

}



#top-menu>li>a:hover {

  color: #eb4d4b;

  background-color: transparent;

}



#_desktop_top_menu #top-menu>li .sub-menu {

  top: 150%;

  opacity: 0;

  visibility: hidden;

  left: 0;

  border: none;

  width: auto;

  z-index: 99;

  padding: 15px;

  border-radius: 3px;

  margin: 0;

  -webkit-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

  -webkit-box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.1);

  box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.1);

  text-align: center;

  /* If media is below 1200 */

}

.buy-btn{

  margin-left: 10px;

}

.modal-dialog {

    max-width: 60%;

}

a.buy-btn{

  color: #fff;

}

#_desktop_top_menu #top-menu>li .sub-menu.collapse {

  opacity: 0;

  visibility: hidden;

}



@media (max-width: 1200px) {

  #_desktop_top_menu #top-menu>li .sub-menu {

    top: 100%;

  }

}



#_desktop_top_menu #top-menu>li .sub-menu .category_dropdownmenu {

  width: 200px;

  padding: 0;

}



#_desktop_top_menu #top-menu>li .sub-menu .category_dropdownmenu.multiple-dropdown-menu {

  float: left;

}



#_desktop_top_menu #top-menu>li .sub-menu .category_dropdownmenu .childs_2 {

  margin-bottom: 15px;

}



#_desktop_top_menu #top-menu>li .sub-menu .category_dropdownmenu .childs_2 li {

  margin-bottom: 6px;

  list-style: none;

}



#_desktop_top_menu #top-menu>li .sub-menu .category_dropdownmenu .childs_2 li a {

  text-transform: capitalize;

}



#_desktop_top_menu #top-menu>li .sub-menu ul[data-depth="1"]>li {

  /* If media is below 1200 */

  text-align: left;

  float: left;

  min-width: 190px;

  list-style: none;

  background: transparent;

}

.mask .owl-nav .owl-prev, .mask .owl-nav .owl-next {

    left: -20px;

    right: auto;

    position: absolute;

    top: 37%;

    margin: 0;

}

.js-qv-mask{

  margin-top: 30px;

}

.mask .owl-nav .owl-next {

    right: -20px;

    left: auto;

}

.productfullldetails .product-title {

    color: #333;

    font-weight: 400;

    text-transform: capitalize;

    padding-bottom: 15px;

    font-size: 22px;

    border-bottom: 1px solid #ccc;

    margin-bottom: 15px;

}

.product-information p {

    margin-bottom: 15px;

    color: #323;

    font-weight: 400;

    font-size: 15px;

    letter-spacing: 0.8px;

    line-height: 20px;

}

.product-prices {

    font-weight: 400;

    font-size: 15px;

    color: #333;

    margin-bottom: 8px;

}

.product-prices div {

    display: inline-block;

    vertical-align: middle;

}

.product-quantity-selector {

    margin-bottom: 20px;

    padding: 10px 20px;

    display: inline-flex;

    align-items: center;

    height: auto;

    border: 1px solid #ededed;

}

.product-information p {

    margin-bottom: 15px;

    color: #323;

    font-weight: 400;

    font-size: 15px;

    letter-spacing: 0.8px;

    line-height: 20px;

}

.product-quantity-selector .dec {

    margin-right: 5px;

}

.product-quantity-selector .quantity {

    margin: 0;

    padding: 0;

    width: auto;

    min-width: 0;

    border: none;

    width: 30px;

    font-size: 18px;

    text-align: center;

}

.product-quantity-selector .inc {

    margin-left: 5px;

}

.product-quantity-selector span {

    display: none;

}

.product-quantity-selector p {

    margin-right: 35px;

    margin-bottom: 0;

    font-size: 16px;

    line-height: 26px;

    color: #505050;

}

.product-quantity .add {

    margin-right: 5px;

}

.product-quantity .add, .product-quantity .wishlist_login {

    display: inline-flex;

    margin-bottom: 15px;

}

#product-availability {

    display: flex;

    font-weight: 500;

    width: 100%;

    overflow: hidden;

    align-items: center;

    color: #000;

}

#product-availability .product-available {

    color: #4cbb6c;

    margin-right: 3px;

}

.product-details, .product-block-information {

    margin-top: 30px;

}

.tabs .nav-tabs {

    border-bottom: none;

    margin-bottom: 30px;

    text-align: center;

    display: block;

}

.tabs .nav-tabs .nav-item {

    display: inline-block;

    vertical-align: middle;

    float: none;

    margin-bottom: -0.125rem;

    text-transform: uppercase;

    margin-left: 10px;

}

.tabs #tab-content {

    padding: 15px;

    border: 1px solid #e4e4e4;

}

.product-description p{

  color: #000;

  margin-bottom: 0;

}

.product-features {

    margin-top: 1.25rem;

    margin-left: 0.3125rem;

    text-align: center;

}

.product-features > dl.data-sheet {

    display: flex;

    flex-wrap: wrap;

    align-items: stretch;

}

.product-features > dl.data-sheet dd.value, .product-features > dl.data-sheet dt.name {

    flex: 1 0 40%;

    font-weight: normal;

    background: #ebebeb;

    padding: 0.625rem;

    margin-right: 0.625rem;

    min-height: 2.5rem;

    word-break: normal;

    text-transform: capitalize;

    margin-bottom: 0.5rem;

    align-items: center;

    justify-content: center;

    display: flex;

}

.product-features > dl.data-sheet dd.value:nth-of-type(even), .product-features > dl.data-sheet dt.name:nth-of-type(even) {

    background: #f6f6f6;

}

@media (max-width: 1200px) {

  #_desktop_top_menu #top-menu>li .sub-menu ul[data-depth="1"]>li {

    min-width: 168px;

  }

}

@media (max-width: 991px) {

  .total-products{

    text-align: center;

    margin-bottom: 10px;

  }

  .products-sort-order{

    justify-content: center;

  }

}

#_desktop_top_menu #top-menu>li .sub-menu ul[data-depth="1"]>li>a {

  padding: 0;

  padding-bottom: 4px;

  margin-bottom: 17px;

  color: #000;

  text-transform: capitalize;

  font-size: 15px;

  position: relative;

  display: block;

  background: transparent;

}



#_desktop_top_menu #top-menu>li .sub-menu ul[data-depth="1"]>li>a:before {

  border-top: 1px solid #ddd;

  bottom: -7px;

  content: "";

  position: absolute;

  left: 0;

  width: 50%;

}



.top-menu .collapse {

  display: inherit;

}



#mobile_top_menu_wrapper {

  position: fixed;

  top: 0;

  right: 0;

  width: 300px;

  bottom: 0;

  background: var(--light-color);

  z-index: 999;

  overflow-y: auto;

  overflow-x: auto;

}



#mobile_top_menu_wrapper #top_menu_closer {

  cursor: pointer;

  color: var(--brand-primary);

  margin: 10px 10px 0 10px;

  text-align: right;

  display: block;

}



#mobile_top_menu_wrapper #_mobile_top_menu {

  padding: 10px 10px 10px 12px;

}



#_mobile_top_menu .logo {

  display: none;

}



#mobile_top_menu_wrapper #top-menu {

  margin-bottom: 0;

  text-align: left;

  display: block;

  padding: 2px 0;

  background: none;

}



#mobile_top_menu_wrapper #top-menu ul {

  padding: 10px 0 0 15px;

}



@media (max-width: 991px) {

  #mobile_top_menu_wrapper #top-menu li {

    padding: 10px 0px;

    border: 0;

  }

}



#mobile_top_menu_wrapper #top-menu li a {

  padding: 0;

  display: inline-block;

  vertical-align: middle;

  width: auto;

  margin-bottom: 0;

  line-height: 30px;

  z-index: 1;

  position: relative;

  color: var(--brand-primary);

  background: transparent;

}



#mobile_top_menu_wrapper #top-menu li a:hover {

  color: var(--brand-secondary);

}



@media (max-width: 991px) {

  #mobile_top_menu_wrapper #top-menu li a {

    font-size: 16px;

    line-height: 20px;

  }

}



#mobile_top_menu_wrapper .top-menu {

  color: #333;

}



#mobile_top_menu_wrapper .top-menu .collapse-icons[aria-expanded="true"] .add {

  display: none;

}



#mobile_top_menu_wrapper .top-menu .collapse-icons[aria-expanded="true"] .remove {

  display: block;

}



#mobile_top_menu_wrapper .top-menu .collapse-icons .remove {

  display: none;

}



#mobile_top_menu_wrapper .top-menu .navbar-toggler {

  cursor: pointer;

  right: 0;

  padding: 0;

  position: absolute;

  right: 0;

  top: 17px;

  left: 0;

}



#mobile_top_menu_wrapper .top-menu .navbar-toggler i {

  float: right;

  color: #000;

  line-height: 16px;

  font-size: 22px;

}



#mobile_top_menu_wrapper .top-menu a[data-depth="0"] {

  padding: 0;

  margin-bottom: 8px;

}



#mobile_top_menu_wrapper .top-menu .collapse {

  display: none;

}



#mobile_top_menu_wrapper .top-menu .collapse.show {

  display: block;

}



#mobile_top_menu_wrapper .top-menu .sub-menu {

  box-shadow: none;

  z-index: inherit;

  display: block;

  position: static;

  overflow: hidden;

  margin-left: 0;

  width: 100%;

  min-width: 100%;

  border: none;

}



#mobile_top_menu_wrapper .top-menu .sub-menu ul {

  padding: 0 0 0 15px;

}



#mobile_top_menu_wrapper .top-menu .sub-menu li>a {

  margin-bottom: 5px;

}



#menu-icon {

  float: right;

  cursor: pointer;

}



#menu-icon .menu-block {

  width: 40px;

  height: 40px;

}



#menu-icon .menu-block svg {

  fill: #000;

}



@media (max-width: 991px) {

  #menu-icon .menu-block svg {

    fill: var(--brand-primary);

  }

  .megamenu{

    display: none;

  }

}

#slider {

  overflow: hidden;

  position: relative;

  display: block;

  margin: 0px;

}



#slider .slideshow__link {

  display: flex;

  align-items: center;

}



#slider .slideshow__link img {

  max-width: 100%;

}



#slider .container {

  position: absolute;

  left: 0;

  right: 0;

}



@media (min-width: 1500px) {

  #slider .container {

    max-width: 1400px;

  }

}



#slider .slider-content {

  padding: 30px 30px;

  width: 70%;

  text-align: center;

  margin: 0 auto;

  background: rgba(0, 0, 0, .5);

}



#slider .slider-content .slider-title {

  font-size: 50px;

  line-height: 60px;

  font-weight: 600;

  text-decoration: none;

  line-height: 70px;

  color: var(--light-color);

  margin-bottom: 30px;

}

@media (max-width: 1199px) {

  #slider .slider-content{

    width: 90%;

  }

}

@media (max-width: 991px) {

  #slider .slider-content{

    width: 100%;

  }

  #slider .slider-content .slider-title {

    font-size: 40px;

  }

}





  



@media (max-width: 575px) {

  #slider .slider-content .slider-title {

    font-size: 15px;

    margin-bottom: 10px;

  }



  #slider .slider-content .btn-primary{

    font-size: 11px;

    padding: 5px 15px;

  }

}





.offer-block{

  border-top: 2px solid var(--brand-secondary);

  border-bottom: 2px solid var(--brand-secondary);

  padding: 30px 0 20px;

}



.offer-block p{

  display: inline-block;

  vertical-align: middle;

  margin: 0;

  color: var(--brand-primary);

  font-size: 20px;

  padding-right: 25px;



}



/*Category Block*/



.category-area{

  position: relative;

}



.category-item{

  position: relative;

}



.category-item a{

  width: 100%;

  vertical-align: middle;

}



.category-info{

  text-align: center;

  padding: 15px 15px;

  border: 1px double rgba(0, 0, 0, 0.08);

  border-radius: 50px;

  transition: all .3s ease-in-out;

}



.category-item:hover .category-info{

  border-color: var(--theme-color);

}



.category-info .icon{

  width: 165px;

  height: 165px;

  margin: 0 auto 0 auto;

  border-radius: 50%;

  background: var(--brand-secondary);

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  box-shadow: 0 0 40px 5px rgb(0 0 0 / 5%);

  z-index: 1;

}



.category-info .icon img{

  width: 70px;

  webkit-transition: all 0.3s ease-out 0s;

    -moz-transition: all 0.3s ease-out 0s;

    -ms-transition: all 0.3s ease-out 0s;

    -o-transition: all 0.3s ease-out 0s;

    transition: all 0.3s ease-out 0s;

}



.category-info:hover .icon img{

  transform: scale(1.1);

}



.category-info .content{

  margin-top: 20px;

}



.category-info .content h4{

  font-size: 18px;

  color: var(--color-dark);

  transition: all .3s ease-in-out;

}



.category-info:hover .content h4{

  color: var(--theme-color);

}



.category-info .content p{

  color: var(--body-text-color);

}



/* category-area2 */

.category-area2 .category-info{

  background: var(--theme-bg-light);

  border: none;

}



.category-area2 .category-slider{

  margin-top: 10px;

}



/* category-area3 */

.category-area3 .category-info{

  border: none;

}



.category-area3 .category-info .icon{

  background: var(--theme-bg-light);

  box-shadow: none;

}



.category-area3 .category-info .icon img{

  width: 120px;

}



@media all and (max-width: 767px) {

  .category-info .icon{

    width: 130px;

    height: 130px;

  }

}

.category-area .owl-nav {

    position: absolute;

    right: 0;

    top: -26%;

}



.vr5-ct-single-box {

  border: 1px solid var(--primary-color);

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

  overflow: hidden;

}



.vr5-ct-single-box img {

  -webkit-transition: 0.3s;

  -o-transition: 0.3s;

  transition: 0.3s;

  width: calc(100% + 20px);

  max-width: calc(100% + 20px);

}



.vr5-ct-single-box .btn-primary {

  text-align: center;

  font-size: 20px;

  font-weight: 600;

  text-transform: uppercase;

  position: absolute;

  left: 50%;

  top: 50%;

  -webkit-transform: translate(-50%, -50%);

  -ms-transform: translate(-50%, -50%);

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

  z-index: 1;

}



.vr5-ct-single-box:hover img {

  margin-left: -15px;

}



.vr5-category-section .row{

  margin: 0;

}

#trending-carousel .owl-nav{

    top: -16%;

}

.vr5-ct-single-box.large-box img {

  width: calc(100% + 30px);

  max-width: calc(100% + 30px);

}

.border-start-0 {

    border-left: 0 !important;

}

.border-bottom-0 {

    border-bottom: 0 !important;

}

.position-relative {

    position: relative !important;

}

/*Category Block */



/*Banner Block*/



.big-banner{

  position: relative;

}



.big-banner .banner-wrap{

  position: relative;

  background-repeat: no-repeat;

  background-size: cover;

  background-position: center;

  border-radius: 15px;

  padding-top: 50px;

  padding-bottom: 50px;

}



.big-banner .banner-content{

  text-align: center;

}



.big-banner .banner-content h6{

  color: var(--brand-primary);

  font-size: 22px;

  text-transform: lowercase;

  letter-spacing: 4px;

}



.big-banner .banner-content h2{

  color: var(--brand-primary);

  text-transform: uppercase;

  margin-top: 20px;

  font-size: 40px;

  margin-bottom: 20px;

}



.big-banner .banner-content p{

  color: var(--brand-primary);

  text-transform: lowercase;

  font-size: 20px;

  margin-bottom: 25px;

  border-top: 1px solid var(--brand-primary);

  border-bottom: 1px solid var(--brand-primary);

  display: inline-block;

}



.big-banner .banner-content .theme-btn{

  border-radius: 50px;

  margin-top: 30px;

  padding: 8px 28px;

}



.choose-area{

  position: relative;

}

.choose-area .row{

  align-items: center;

}

.choose-img img{

  border-radius: 100px;

  box-shadow:  0 0 40px 5px rgb(0 0 0 / 5%);;

}



.choose-content{

  margin-top: 70px;

}



.choose-item{

  display: flex;

  gap: 18px;

}



.choose-icon{

  width: 80px;

  height: 80px;

  line-height: 76px;

  text-align: center;

  background: var(--theme-color2);

  border-radius: 50px;

  box-shadow: var(--box-shadow);

}



.choose-icon img{

  width: 50px;

}



.choose-info{

  flex: 1;

}



.choose-info h4{

  color: var(--color-dark);

  margin-bottom: 8px;

}



.choose-info p{

  color: var(--body-text-color);

}



/*Banner Block*/



.small-banner{

  position: relative;

}



.small-banner .banner-item{

  position: relative;

  border-radius: 15px;

}



.small-banner .banner-item img{

  height:100%;

  width:100%;

  border-radius: 15px;

}



.small-banner .banner-content{

  position: absolute;

  left: 0;

  top: 50%;

  transform: translateY(-50%);

  margin-left: 35px;



  background: rgba(0, 0, 0, .5);

  padding: 20px 20px;

}



.small-banner .banner-item h3 {

  font-size: 22px;

  font-weight: 600;

  text-transform: capitalize;

  color: var(--light-color);

}



.small-banner .banner-item h3 span{

  color: var(--brand-secondary);

}



.small-banner .banner-item p {

  display: inline-block;

  background: var(--brand-secondary);

  font-size: 13px;

  color: var(--light-color);

  font-weight: 500;

  text-transform: uppercase;

  letter-spacing: 1px;

  padding: 2px 20px 2px 14px;

  margin-bottom: 15px;

  border-radius: 50px 0 0 50px;

  clip-path: polygon(100% 0, 90% 50%, 100% 100%, 0 100%, 0 0);

}



.small-banner .banner-item a {

  color: var(--light-color);

  margin-top: 15px;

  font-size: 14px;

  font-weight: 500;

  display: inline-block;

  text-transform:uppercase;

  border-bottom:2px solid var(--light-color);

}



.small-banner .banner-item a:hover{

  color: var(--brand-secondary);

  border-color: var(--brand-secondary);

}





@media all and (max-width: 1399px) {

  .small-banner .banner-item h3 {

    font-size: 19px;

  }

}



@media all and (max-width: 1199px) {

  .small-banner .banner-content{

    padding-left: 25px;

  }



  .small-banner .banner-item h3 {

    font-size: 17px;

  }

}

/*About Section*/



.about-left{

  position: relative;

}



.about-shape{

  position: absolute;

  left: -50px;

  top: -50px;

  width: 150px;

  z-index: -1;

}



.about-img{

  position: relative;

}



.about-img .img-1{

  width: 65%;

}



.about-img .img-2{

  position: absolute;

  right: 0;

  top: -45px;

  width: 200px;

}



.about-img .img-3{

  position: absolute;

  right: 0;

  bottom: -45px;

  width: 42%;

}



.about-img img{

  border-radius: 15px;

}



.about-experience-icon img{

  width: 55px;

  filter: brightness(0) invert(1);

}



.about-right{

  position: relative;

  display: block;

  padding-left: 30px;

}



.about-list{

  margin-top: 20px;

  margin-bottom: 10px;

}



@media all and (max-width: 991px) {

  .about-right{

    margin-top: 30px;

    padding-left: 0px;

  }

}

.site-title-tagline {

    text-transform: uppercase;

    letter-spacing: 4px;

    font-size: 17px;

    font-weight: 700;

    color: var(--brand-secondary);

    position: relative;

    margin-bottom: 5px;

    display: inline-block;

}

.choose-area p{

  font-size: 17px;

}

.site-title {

    font-weight: 700;

    text-transform: capitalize;

    font-size: 34px;

    color: var(--brand-primary);

    margin-top: 4px;

}

.site-title span {

    color: var(--brand-secondary);

}

.about-shape {

    position: absolute;

    left: -50px;

    top: -50px;

    width: 150px;

    z-index: -1;

}

img{

  max-width: 100%;

}

.about-area {

  padding-top: 80px;

  padding-bottom: 50px;

}

/*About us section*/

/*DEAL SECTION*/

.deal-area{

  position: relative;

  background: #fdc4c7;

  overflow: hidden;

  z-index: 1;

}



.deal-area::before{

  content: "";

  position: absolute;

  right: 5%;

  bottom: 0;

  width: 570px;

  height: 570px;

  border-radius: 50% 50% 0 50%;

  background: #fba707;

  opacity: .5;

  transform: rotate(80deg);

  z-index: -1;

}



.deal-text-shape{

  position: absolute;

  left: 0;

  top: 0;

  writing-mode: vertical-lr;

  transform: scale(-1, -1);

  letter-spacing: 15px;

  font-size: 180px;

  line-height: 180px;

  font-weight: 800;

  text-transform: uppercase;

  color: var(--brand-secondary);

  opacity: .3;

  z-index: -1;

}



.deal-content{

  margin-right: 80px;

}



.deal-info span{

  color: var(--color-red);

  font-size: 20px;

  text-transform: uppercase;

  font-weight: 700;

  letter-spacing: 5px;

}



.deal-info h1{

  font-weight: 700;

  margin-top: 5px;

  margin-bottom: 15px;

}



.deal-info p{

  color: var(--color-dark);

  font-size: 17px;

}



.deal-img{

  position: relative;

}



.deal-discount{

  position: absolute;

  width: 120px;

  height: 120px;

  top: 0;

  left: 20%;

  background: #f05454;

  color: var(--light-color);

  border-radius: 50%;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 5px;

}



.deal-discount span{

  font-size: 40px;

  line-height: 40px;

  font-weight: 800;

}



.deal-discount span:last-child{

  font-size: 25px;

  line-height: 25px;

  font-weight: 600;

  text-transform: uppercase;

}



@media all and (max-width: 991px) {

  .deal-img{

    margin-top: 50px;

  }

}



@media all and (max-width: 767px) {

  .deal-content{

    margin-right: 0;

  }

}

.pb-50 {

    padding-bottom: 50px;

}



.pt-50 {

    padding-top: 50px;

}

.deal-info span {

    color: #f05454;

    font-size: 20px;

    text-transform: uppercase;

    font-weight: 700;

    letter-spacing: 5px;

}

.deal-info h1{

  font-weight: 700;

  margin-top: 5px;

  margin-bottom: 15px;

}



.deal-info p{

  color: var(--brand-primary);

  font-size: 17px;

}



.deal-img{

  position: relative;

}



.deal-discount{

  position: absolute;

  width: 120px;

  height: 120px;

  top: 0;

  left: 20%;

  background: #f05454;

  color: var(--light-color);

  border-radius: 50%;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 5px;

}



.deal-discount span{

  font-size: 40px;

  line-height: 40px;

  font-weight: 800;

}



.deal-discount span:last-child{

  font-size: 25px;

  line-height: 25px;

  font-weight: 600;

  text-transform: uppercase;

}



@media all and (max-width: 991px) {

  .deal-img{

    margin-top: 50px;

  }

}



@media all and (max-width: 767px) {

  .deal-content{

    margin-right: 0;

  }

}

.deal-countdown{

  padding: 0 7px;

  margin-top: 25px;

  margin-bottom: 35px;

}



.deal-countdown .row{

  gap: 8px;

}



.deal-countdown .countdown-item{

  margin: 3px;

  padding: 10px 6px;

  border-radius: 20px;

}



.deal-countdown .countdown-item h2{

  font-size: 50px;

  margin-bottom: 4px;

}



.deal-countdown .countdown-item h5{

  font-size: 16px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: .5px;

}

.countdown{

  position: relative;

  margin: 15px 0;

}



.countdown-item{

  background: var(--light-color);

  text-align: center;

  margin: 5px;

  padding: 12px 20px 16px 20px;

  border-radius: 50px;

  border: 1px solid var(--light-color);

}



.countdown-item h2{

  color: var(--brand-secondary);

  font-weight: 700;

}



.countdown-item h5{

  margin-top: 2px;

  color: var(--brand-primary);

}

/*Deal Section*/

#slider .slider-content .main-title {

  font-size: 50px;

  font-weight: normal;

  line-height: 1.2em;

  letter-spacing: 7px;

  margin-bottom: 20px;

  color: #0bef9a;

  text-shadow: .2px 6px 9px rgba(11, 239, 154)

}



@media (max-width: 1199px) {

  #slider .slider-content .main-title {

    font-size: 40px;

    line-height: 50px;

    margin-bottom: 20px;

  }

}



@media (max-width: 991px) {

  #slider .slider-content .main-title {

    font-size: 38px;

    line-height: 44px;

    margin-bottom: 15px;

  }

}



@media (max-width: 767px) {

  #slider .slider-content .main-title {

    font-size: 26px;

    line-height: 36px;

  }

}



@media (max-width: 543px) {

  #slider .slider-content .main-title {

    font-size: 22px;

    line-height: 30px;

    letter-spacing: 2px;

  }

}



@media (max-width: 480px) {

  #slider .slider-content .main-title {

    font-size: 20px;

    line-height: 24px;

  }

}



@media (max-width: 415px) {

  #slider .slider-content .main-title {

    font-size: 18px;

    line-height: 22px;

    margin-bottom: 12px;

  }

}



@media (max-width: 380px) {

  #slider .slider-content .main-title {

    font-size: 16px;

    line-height: 20px;

    margin-bottom: 10px;

  }

}



@media (max-width: 350px) {

  #slider .slider-content .main-title {

    font-size: 14px;

    line-height: 18px;

  }

}



#slider .owl-item.active .slider-title {

  -webkit-animation-duration: 1s;

  animation-duration: 1s;

  -webkit-animation-fill-mode: both;

  animation-fill-mode: both;

  animation-name: fadeInDown;

  animation-delay: 0.3s;

}



#slider .owl-item.active .main-title {

  -webkit-animation-duration: 1s;

  animation-duration: 1s;

  -webkit-animation-fill-mode: both;

  animation-fill-mode: both;

  animation-name: fadeInDown;

  animation-delay: 0.35s;

}



#slider .owl-item.active .slider-btn {

  -webkit-animation-duration: 1s;

  animation-duration: 1s;

  -webkit-animation-fill-mode: both;

  animation-fill-mode: both;

  animation-name: fadeInDown;

  animation-delay: 0.35s;

}



#slider .owl-nav {

  margin: 0;

  position: unset;

  /* If media is below 768 */

}



@media (max-width: 767px) {

  #slider .owl-nav {

    display: none;

  }

}



#slider .owl-nav .owl-prev,

#slider .owl-nav .owl-next {

  /* If media is below 992 */

  position: absolute;

  top: 45%;

  border-radius: 50%;

  background-color: #494949;

  border: 1px solid #494949;

  color: var(--light-color);

  padding: 0px;

  margin: 0 4px;

  left: 70px;

  right: auto;

  width: 40px;

  height: 40px;

  overflow: hidden;

  opacity: 0;

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

  /* If media is below 768 */

}



@media (max-width: 991px) {



  #slider .owl-nav .owl-prev,

  #slider .owl-nav .owl-next {

    top: 44%;

  }

}



@media (max-width: 991px) {



  #slider .owl-nav .owl-prev,

  #slider .owl-nav .owl-next {

    top: 38%;

  }

}



#slider .owl-nav .owl-prev:hover,

#slider .owl-nav .owl-next:hover {

  background-color: var(--brand-primary);

  border-color: var(--brand-primary);

}



#slider .owl-nav .owl-prev:hover i:after,

#slider .owl-nav .owl-next:hover i:after {

  color: var(--light-color);

}



#slider .owl-nav .owl-prev i,

#slider .owl-nav .owl-next i {

  line-height: 40px;

  height: 40px;

  width: 40px;

}



#slider .owl-nav .owl-prev i:after,

#slider .owl-nav .owl-next i:after {

  margin-left: -2px;

  color: var(--light-color);

}



#slider .owl-nav .owl-next {

  right: 70px;

  left: auto;

}



#slider .owl-nav .owl-next i:after {

  margin-left: 0px;

}



#slider .owl-dots {

  position: absolute;

  bottom: 14px;

  right: 0;

  left: 0;

  margin: 0 auto;

  text-align: center;

  -webkit-transition: all 0.3s;

  -moz-transition: all 0.3s;

  -o-transition: all 0.3s;

  transition: all 0.3s;

}



@media (max-width: 767px) {

  #slider .owl-dots {

    bottom: 5px;

  }

}

@media (max-width: 543px) {

  #slider .owl-dots {

    bottom: 0;

  }

}

#slider .owl-dots .owl-dot {

  display: inline-block;

  vertical-align: middle;

  margin: 0 2px;

  outline: none;

}



#slider .owl-dots .owl-dot span {

  border-radius: 50%;

  width: 12px;

  height: 12px;

  border: 1px solid var(--brand-primary);

  background: var(--brand-primary);

  margin: 0 3px;

  display: block;

  -webkit-transition: all 0.3s;

  -moz-transition: all 0.3s;

  -o-transition: all 0.3s;

  transition: all 0.3s;

}



#slider .owl-dots .owl-dot.active span,

#slider .owl-dots .owl-dot:hover span {

  background: var(--brand-secondary);

  border-color: var(--brand-secondary);

}



#slider:hover:before {

  width: 100%;

}



#slider:hover .owl-nav .owl-prev,

#slider:hover .owl-nav .owl-next {

  opacity: 1;

  left: 50px;

}



#slider:hover .owl-nav .owl-next {

  right: 50px;

  left: auto;

}

.course .course-data{

  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

  margin-bottom: 30px;

}

.course .courser-img img{

  max-width: 100%;

}

.course .cource-content{

  padding: 25px 10px 10px;

  text-align: center;

  background: #fde468;

  min-height: 266px;

}

.course .cource-content .course-title{

  font-size: 25px;

  color: var(--brand-primary);

  font-weight: 600;

  padding-bottom: 20px;

}

.course .cource-content .desc{

  font-size: 15px;

  color: var(--brand-primary);

  font-weight: 500;

  margin-bottom: 20px;

}

.course .banner-btn{

  display: inline-block;

}

.course .banner-btn .btn-default{

  display: block;

}

@media (max-width: 1199px) {

  .course .cource-content .course-title{

    font-size: 22px;

    padding-bottom: 12px;

  }

}

@media (max-width: 991px) {

  .course .cource-content .course-title{

    font-size: 18px;

    padding-bottom: 9px;

  }

  .course .cource-content .desc{

    font-size: 14px;

  }

}

.services-upcoming-image {

  background-image: url("../images/services-upcoming-image.jpg");

  background-position: bottom center;

  background-repeat: no-repeat;

  background-size: cover;

}



.servicesblock {

  padding-bottom: 140px;

}



@media (min-width: 1200px) {

  .servicesblock .container {

    max-width: 1240px;

  }

}



.servicesblock .service-img {

  position: relative;

  width: 90px;

  height: 90px;

}



.servicesblock .services-content {

  padding-left: 10px;

}



.servicesblock .service-img svg linearGradient stop:nth-child(1) {

  stop-color: #0bef9a !important;

}



.servicesblock .service-img svg linearGradient stop:nth-child(2) {

  stop-color: #0bef9a !important;

}



.servicesblock .service-img svg linearGradient stop:nth-child(3) {

  stop-color: #823bed !important;

}



.servicesblock .services {

  display: flex;

  border-style: solid;

  border-width: 0px 1px 1px 0px;

  border-color: rgba(11, 239, 154, 0.1);

  transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;

  padding: 40px 25px 40px 40px;

}



.servicesblock .services:nth-child(6n+3),

.servicesblock .services:nth-child(6n+6) {

  border-width: 0px 0px 1px 0px;

}



.servicesblock .row {

  background: #111111;

}



.servicesblock .service-img svg {

  position: relative;

  width: 90px;

  height: 90px;

}



.servicesblock .service-img::before {

  content: '';

  position: absolute;

  display: block;

  width: 100%;

  height: 100%;

  background-image: -webkit-linear-gradient(228deg, #111111 0, rgba(17, 17, 17, 0) 100%);

  background-image: -o-linear-gradient(228deg, #111111 0, rgba(17, 17, 17, 0) 100%);

  background-image: linear-gradient(-138deg, #111111 0, rgba(17, 17, 17, 0) 100%);

  border-radius: 100%;

  background-color: #0bef9a;

  opacity: .05;

  -webkit-animation-duration: 1s;

  animation-duration: 1s;

  -webkit-animation-fill-mode: both;

  animation-fill-mode: both;

  -webkit-animation-iteration-count: infinite;

  animation-iteration-count: infinite;

  -webkit-animation-timing-function: linear;

  animation-timing-function: linear;

}



.servicesblock .services:hover .service-img::before {

  -webkit-animation-name: rotate;

  animation-name: rotate;

}



@-webkit-keyframes rotate {

  0% {

    -webkit-transform: rotate(0);

    transform: rotate(0);

    opacity: .05

  }



  50% {

    -webkit-transform: rotate(180deg);

    transform: rotate(180deg);

    opacity: .1

  }



  100% {

    -webkit-transform: rotate(360deg);

    transform: rotate(360deg);

    opacity: .05

  }

}



@keyframes rotate {

  0% {

    -webkit-transform: rotate(0);

    transform: rotate(0);

    opacity: .05

  }



  50% {

    -webkit-transform: rotate(180deg);

    transform: rotate(180deg);

    opacity: .1

  }



  100% {

    -webkit-transform: rotate(360deg);

    transform: rotate(360deg);

    opacity: .05

  }

}



.servicesblock .services-content a {

  font-size: 15px;

  color: #ffffff;

  font-weight: 500;

}



.servicesblock .services-content h5 {

  position: relative;

  margin-bottom: 10px;

  font-size: 20px;

  line-height: 1.35;

  font-weight: 600;

  color: #0bef9a;

}



@media (max-width: 1199px) {

  .servicesblock .services {

    display: block;

    padding: 40px 10px 40px 10px;

  }



  .servicesblock .services-content h5 {

    font-size: 16px;

  }



  .servicesblock .service-img {

    text-align: center;

    margin: 0 auto 20px;

  }



  .services-content {

    text-align: center;

  }



}



@media (max-width: 991px) {

  .servicesblock .services {

    border-width: 0px 0px 1px 0px;

  }

}



.servicesblock .subtitle {

  margin-bottom: 40px;

}



.servicesblock .services-content p {

  font-family: 'Montserrat';

  font-weight: 400;

  font-size: 14px;

  line-height: 1.67;

  color: rgba(255, 255, 255, 0.8);

  font-style: normal;

}



.section-title{

  padding-bottom: 15px;

  margin-bottom: 30px;

  text-align: center;

}



.home-title {

  font-size: 40px;

  font-weight: 600;

  text-align: center;

  color: #232323;

  font-family: var(--secondary-font);

  display: inline-block;

  margin: 0 auto;

  line-height: 50px;

  position: relative;

}

.home-title:after, .home-title:before{

  content: '';

  position: absolute;

  left: 0;

  right: 0;

  width: 70%;

  height: 2px;

  bottom: -6px;

  text-align: center;

  margin: 0 auto;

  background: var(--brand-primary);

}

.home-title:before{

  width: 30%;

  bottom: -15px;

}

.home-title span{

  color: #fcbc1c;

}

.aboutclub p {

  font-weight: 400;

  font-size: 18px;

  line-height: 1.67;

  color: rgba(255, 255, 255, 0.8);

  width: 72%;

  text-align: center;

  margin: 0 auto 50px;

  font-family: 'Montserrat', sans-serif;

}



@media (max-width: 1199px) {

  .aboutclub {

    padding: 100px 0;

  }



  .aboutclub p {

    width: 100%;

  }

}



@media (max-width: 991px) {

  .aboutclub {

    padding: 50px 0;

  }

}



.aboutclub .subtitle {

  color: #0bef9a;

}



.aboutclub a {

  font-size: 15px;

  font-weight: 600;

  letter-spacing: 1.13px;

  color: #ffffff;

  position: relative;

  padding: 0 0 20px;

  font-family: 'Montserrat', sans-serif;

  -webkit-transition: all 0.5s;

  -moz-transition: all 0.5s;

  -o-transition: all 0.5s;

  transition: all 0.5s;

}



.aboutclub a::before,

.aboutclub a::after {

  content: '';

  position: absolute;

  display: block;

  bottom: 0;

  left: 0;

  right: 0;

  height: 2px;

  width: 20px;

  background-color: #0bef9a;

  box-shadow: 0 0 5px 1px rgba(11, 239, 154, .45);

  -webkit-box-shadow: 0 0 5px 1px rgba(11, 239, 154, .45);

  -webkit-transition: width 250ms ease-in-out;

  -o-transition: width 250ms ease-in-out;

  transition: width 250ms ease-in-out;

}



.aboutclub a::before,

.aboutclub a::after {

  left: 50%;

  -webkit-transform: translateX(-50%);

  -ms-transform: translateX(-50%);

  transform: translateX(-50%);

}



.aboutclub a::after {

  bottom: 4px;

}



.aboutclub a:hover::before,

.aboutclub a:hover::after {

  width: 100%;

}



.aboutclub .certificate .certificate-inner {

  display: flex;

  -webkit-flex-wrap: wrap;

  -ms-flex-wrap: wrap;

}

.aboutclub .certificate{

  padding: 80px 0 0;

}

.aboutclub .certificate img {

  max-width: 100%;

}



.aboutclub .certificate .certificate-inner .certificate-image {

  margin-bottom: 30px;

}

.galleryblock {

  background: #0b0b0b;

  padding: 120px 0 0;

}



.galleryblock .gallery-image {

  margin-bottom: 30px;

}



.galleryblock .gallery-image img {

  max-width: 100%;

  cursor: pointer;

  min-height: 250px;

}

.testimonials-container {

  text-align: center;

}

.user-content .user-name{

  font-size: 20px;

  font-weight: 600;

  margin-bottom: 20px;

}

.user-description{

  font-size: 16px;

  color: var(--brand-primary);

}

.user-content .icon i{

  width: 50px;

  height: 50px;

  font-size: 50px;

  margin-bottom: 10px;

}

.testimonialsblock .bg-img{

  background-image: url("../images/counter-bg-image.png");

  background-color: #fce882;

  background-size: cover;

  background-attachment: fixed;

  background-repeat: no-repeat;

  padding: 80px 0;

}



@media (max-width: 767px) {

  .testimonialsblock .bgimage {

    padding: 40px 0;

  }

}

@media (max-width: 543px) {

  .galleryblock {

    padding: 30px 0;

  }

}

@media (min-width: 768px) {

  .testimonialsblock .bgimage .section-header {

    margin-bottom: 45px;

  }

}



@media (max-width: 767px) {

  .testimonialsblock .bgimage .section-header {

    margin-bottom: 30px;

  }

}



.testimonialsblock .bgimage .testimonial-container {

  background-color: #111111;

  text-align: left;

  padding: 50px;

  position: relative;

  margin-bottom: 20px;

}



.testimonialsblock .bgimage .testimonial-container .title {

  position: absolute;

  margin-top: -68px;

  margin-bottom: 0;

  font-size: 40px;

  color: #0bef9a;

  line-height: 50px;

  font-family: 'Mrs Saint Delafield', cursive;

}



@media (max-width: 575px) {

  .testimonialsblock .bgimage .testimonials-container {

    padding: 40px 15px 30px;

  }

}



.testimonialsblock .bgimage .testimonials-container .testimonial-img {

  display: inline-block;

  vertical-align: middle;

  min-width: 63px;

  max-width: 63px;

  height: 63px;

  width: 63px;

  border-radius: 50%;

  margin: 0 auto;

  overflow: hidden;

  margin-bottom: 0;

}



.testimonialsblock .bgimage .testimonials-container .user-content {

  display: inline-block;

  vertical-align: middle;

  padding-left: 15px;

}



@media (max-width: 1199px) {

  .testimonialsblock .bgimage .testimonials-container .testimonial-img {

    left: 30px;

  }

}



@media (max-width: 575px) {

  .testimonialsblock .bgimage .testimonials-container .testimonial-img {

    margin-bottom: 15px;

  }

}



.testimonialsblock .bgimage .testimonials-container .user-description {

  color: #ffffff;

  line-height: 34px;

  font-weight: 400;

  font-size: 24px;

}



@media (max-width: 1199px) {

  .testimonialsblock .bgimage .testimonials-container .user-description {

    font-size: 18px;

    line-height: 30px;

  }



  .testimonialsblock .bgimage .testimonial-container {

    padding: 30px;

  }



  .testimonialsblock .bgimage .testimonial-container .title {

    margin-top: -48px;

  }

}



@media (max-width: 991px) {

  .testimonialsblock .bgimage .testimonial-container {

    padding: 20px;

  }



  .testimonialsblock .bgimage .testimonials-container .user-description {

    font-size: 15px;

    line-height: 25px;

  }



  .testimonials-container {

    margin-top: 30px;

  }

}



@media (max-width: 767px) {

  .testimonials-container {

    padding: 0 15px;

  }

}



.testimonialsblock .bgimage .testimonials-container .user-name {

  color: #FFFFFF;

  position: relative;

  font-size: 20px;

  line-height: 24px;

  font-weight: 600;

}



@media (max-width: 575px) {

  .testimonialsblock .bgimage .testimonials-container .user-name {

    font-size: 20px;

    display: block;

    margin-bottom: 5px;

  }

}



.testimonialsblock .bgimage .testimonials-container .user-designation {

  font-weight: 400;

  font-size: 14px;

  color: #0bef9a;

}



@media (max-width: 575px) {

  .testimonialsblock .bgimage .testimonials-container .user-designation {

    display: block;

    padding-left: 0;

  }

}



.testimonialsblock .bgimage .testimonials-container .user-ratting {

  margin-top: 10px;

}



.testimonialsblock .bgimage .testimonials-container .user-ratting .starrating i {

  position: relative;

  font-style: normal;

  display: inline-block;

}



.testimonialsblock .bgimage .testimonials-container .user-ratting .starrating i:after {

  content: '\F005';

  font-family: "FontAwesome";

  color: #ccc;

  font-size: 18px;

}



.testimonialsblock .bgimage .testimonials-container .user-ratting .starrating i.starfill:after {

  content: "\F005";

  font-family: "FontAwesome";

  color: #fec42d;

  font-size: 18px;

}



.testimonialsblock .bgimage .owl-nav {

  margin-top: 30px;

  margin-bottom: 0;

}



















@media (min-width: 992px) {



  /*** end Animate ****/

  .hb-animate-element {

    opacity: 0;

  }



  .hb-animate-element.hb-animate-element.hb-in-viewport.right-to-left {

    animation: 1s ease 0s normal none 1 fadeInRight;

    -webkit-animation: 1s ease 0s normal none 1 fadeInRight;

    -moz-animation: 1s ease 0s normal none 1 fadeInRight;

    -o-animation: 1s ease 0s normal none 1 fadeInRight;

    opacity: 1;

  }



  .lang-rtl .hb-animate-element.hb-animate-element.hb-in-viewport.right-to-left {

    animation: 1s ease 0s normal none 1 fadeInLeft;

    -webkit-animation: 1s ease 0s normal none 1 fadeInLeft;

    -moz-animation: 1s ease 0s normal none 1 fadeInLeft;

    -o-animation: 1s ease 0s normal none 1 fadeInLeft;

  }



  .hb-animate-element.hb-animate-element.hb-in-viewport.left-to-right {

    animation: 1s ease 0s normal none 1 fadeInLeft;

    -webkit-animation: 1s ease 0s normal none 1 fadeInLeft;

    -moz-animation: 1s ease 0s normal none 1 fadeInLeft;

    -o-animation: 1s ease 0s normal none 1 fadeInLeft;

    opacity: 1;

  }



  .lang-rtl .hb-animate-element.hb-animate-element.hb-in-viewport.left-to-right {

    animation: 1s ease 0s normal none 1 fadeInRight;

    -webkit-animation: 1s ease 0s normal none 1 fadeInRight;

    -moz-animation: 1s ease 0s normal none 1 fadeInRight;

    -o-animation: 1s ease 0s normal none 1 fadeInRight;

  }



  .hb-animate-element.hb-animate-element.hb-in-viewport.bottom-to-top {

    animation: 1s ease 0s normal none 1 fadeInUp;

    -webkit-animation: 1s ease 0s normal none 1 fadeInUp;

    -moz-animation: 1s ease 0s normal none 1 fadeInUp;

    -o-animation: 1s ease 0s normal none 1 fadeInUp;

    opacity: 1;

  }



  .hb-animate-element.hb-animate-element.hb-in-viewport.top-to-bottom {

    animation: 1s ease 0s normal none 1 fadeInDown;

    -webkit-animation: 1s ease 0s normal none 1 fadeInDown;

    -moz-animation: 1s ease 0s normal none 1 fadeInDown;

    -o-animation: 1s ease 0s normal none 1 fadeInDown;

    opacity: 1;

  }



  .hb-animate-element.hb-animate-element.hb-in-viewport.fade-in {

    animation: 1s ease 0s normal none 1 fadeIn;

    -webkit-animation: 1s ease 0s normal none 1 fadeIn;

    -moz-animation: 1s ease 0s normal none 1 fadeIn;

    -o-animation: 1s ease 0s normal none 1 fadeIn;

    opacity: 1;

  }

}



.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 .hinge {

  -webkit-animation-duration: 2s;

  animation-duration: 2s;

}



.animated .flipOutX,

.animated .flipOutY,

.animated .bounceIn,

.animated .bounceOut {

  -webkit-animation-duration: 0.75s;

  animation-duration: 0.75s;

}



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

    transform: none;

  }



  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: none;

    transform: none;

  }

}



@keyframes wobble {

  from {

    -webkit-transform: none;

    transform: none;

  }



  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: none;

    transform: none;

  }

}



.wobble {

  -webkit-animation-name: wobble;

  animation-name: wobble;

}



@-webkit-keyframes jello {



  from,

  11.1%,

  to {

    -webkit-transform: none;

    transform: none;

  }



  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.39063deg) skewY(0.39063deg);

    transform: skewX(0.39063deg) skewY(0.39063deg);

  }



  88.8% {

    -webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg);

    transform: skewX(-0.19531deg) skewY(-0.19531deg);

  }

}



@keyframes jello {



  from,

  11.1%,

  to {

    -webkit-transform: none;

    transform: none;

  }



  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.39063deg) skewY(0.39063deg);

    transform: skewX(0.39063deg) skewY(0.39063deg);

  }



  88.8% {

    -webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg);

    transform: skewX(-0.19531deg) skewY(-0.19531deg);

  }

}



.jello {

  -webkit-animation-name: jello;

  animation-name: jello;

  -webkit-transform-origin: center;

  transform-origin: center;

}



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

    transform: none;

  }

}



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

    transform: none;

  }

}



.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: none;

    transform: none;

  }

}



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

    transform: none;

  }

}



.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: none;

    transform: none;

  }

}



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

    transform: none;

  }

}



.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-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: none;

    transform: none;

  }

}



@keyframes fadeInDown {

  from {

    opacity: 0;

    -webkit-transform: translate3d(0, -100%, 0);

    transform: translate3d(0, -100%, 0);

  }



  to {

    opacity: 1;

    -webkit-transform: none;

    transform: none;

  }

}



.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: none;

    transform: none;

  }

}



@keyframes fadeInDownBig {

  from {

    opacity: 0;

    -webkit-transform: translate3d(0, -2000px, 0);

    transform: translate3d(0, -2000px, 0);

  }



  to {

    opacity: 1;

    -webkit-transform: none;

    transform: none;

  }

}



.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: none;

    transform: none;

  }

}



@keyframes fadeInLeft {

  from {

    opacity: 0;

    -webkit-transform: translate3d(-100%, 0, 0);

    transform: translate3d(-100%, 0, 0);

  }



  to {

    opacity: 1;

    -webkit-transform: none;

    transform: none;

  }

}



.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: none;

    transform: none;

  }

}



@keyframes fadeInLeftBig {

  from {

    opacity: 0;

    -webkit-transform: translate3d(-2000px, 0, 0);

    transform: translate3d(-2000px, 0, 0);

  }



  to {

    opacity: 1;

    -webkit-transform: none;

    transform: none;

  }

}



.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: none;

    transform: none;

  }

}



@keyframes fadeInRight {

  from {

    opacity: 0;

    -webkit-transform: translate3d(100%, 0, 0);

    transform: translate3d(100%, 0, 0);

  }



  to {

    opacity: 1;

    -webkit-transform: none;

    transform: none;

  }

}



.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: none;

    transform: none;

  }

}



@keyframes fadeInRightBig {

  from {

    opacity: 0;

    -webkit-transform: translate3d(2000px, 0, 0);

    transform: translate3d(2000px, 0, 0);

  }



  to {

    opacity: 1;

    -webkit-transform: none;

    transform: none;

  }

}



.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: none;

    transform: none;

  }

}



@keyframes fadeInUp {

  from {

    opacity: 0;

    -webkit-transform: translate3d(0, 100%, 0);

    transform: translate3d(0, 100%, 0);

  }



  to {

    opacity: 1;

    -webkit-transform: none;

    transform: none;

  }

}



.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: none;

    transform: none;

  }

}



@keyframes fadeInUpBig {

  from {

    opacity: 0;

    -webkit-transform: translate3d(0, 2000px, 0);

    transform: translate3d(0, 2000px, 0);

  }



  to {

    opacity: 1;

    -webkit-transform: none;

    transform: none;

  }

}



.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) rotate3d(0, 1, 0, -360deg);

    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);

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

    animation-timing-function: ease-out;

  }



  40% {

    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);

    transform: perspective(400px) 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) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);

    transform: perspective(400px) 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);

    transform: perspective(400px) scale3d(0.95, 0.95, 0.95);

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

    animation-timing-function: ease-in;

  }



  to {

    -webkit-transform: perspective(400px);

    transform: perspective(400px);

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

    animation-timing-function: ease-in;

  }

}



@keyframes flip {

  from {

    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);

    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);

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

    animation-timing-function: ease-out;

  }



  40% {

    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);

    transform: perspective(400px) 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) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);

    transform: perspective(400px) 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);

    transform: perspective(400px) scale3d(0.95, 0.95, 0.95);

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

    animation-timing-function: ease-in;

  }



  to {

    -webkit-transform: perspective(400px);

    transform: perspective(400px);

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

    opacity: 1;

  }



  to {

    -webkit-transform: none;

    transform: none;

    opacity: 1;

  }

}



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

    opacity: 1;

  }



  to {

    -webkit-transform: none;

    transform: none;

    opacity: 1;

  }

}



.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: none;

    transform: none;

    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: none;

    transform: none;

    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: none;

    transform: none;

    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: none;

    transform: none;

    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: none;

    transform: none;

    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: none;

    transform: none;

    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: none;

    transform: none;

    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: none;

    transform: none;

    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: none;

    transform: none;

    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: none;

    transform: none;

    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-name: hinge;

  animation-name: hinge;

  /* 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: none;

    transform: none;

  }

}



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

    transform: none;

  }

}



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

}

@media (min-width: 992px) {



  /*** end Animate ****/

  .hb-animate-element {

    opacity: 0;

  }



  .hb-animate-element.hb-animate-element.hb-in-viewport.right-to-left {

    animation: 1s ease 0s normal none 1 fadeInRight;

    -webkit-animation: 1s ease 0s normal none 1 fadeInRight;

    -moz-animation: 1s ease 0s normal none 1 fadeInRight;

    -o-animation: 1s ease 0s normal none 1 fadeInRight;

    opacity: 1;

  }



  .lang-rtl .hb-animate-element.hb-animate-element.hb-in-viewport.right-to-left {

    animation: 1s ease 0s normal none 1 fadeInLeft;

    -webkit-animation: 1s ease 0s normal none 1 fadeInLeft;

    -moz-animation: 1s ease 0s normal none 1 fadeInLeft;

    -o-animation: 1s ease 0s normal none 1 fadeInLeft;

  }



  .hb-animate-element.hb-animate-element.hb-in-viewport.left-to-right {

    animation: 1s ease 0s normal none 1 fadeInLeft;

    -webkit-animation: 1s ease 0s normal none 1 fadeInLeft;

    -moz-animation: 1s ease 0s normal none 1 fadeInLeft;

    -o-animation: 1s ease 0s normal none 1 fadeInLeft;

    opacity: 1;

  }



  .lang-rtl .hb-animate-element.hb-animate-element.hb-in-viewport.left-to-right {

    animation: 1s ease 0s normal none 1 fadeInRight;

    -webkit-animation: 1s ease 0s normal none 1 fadeInRight;

    -moz-animation: 1s ease 0s normal none 1 fadeInRight;

    -o-animation: 1s ease 0s normal none 1 fadeInRight;

  }



  .hb-animate-element.hb-animate-element.hb-in-viewport.bottom-to-top {

    animation: 1s ease 0s normal none 1 fadeInUp;

    -webkit-animation: 1s ease 0s normal none 1 fadeInUp;

    -moz-animation: 1s ease 0s normal none 1 fadeInUp;

    -o-animation: 1s ease 0s normal none 1 fadeInUp;

    opacity: 1;

  }



  .hb-animate-element.hb-animate-element.hb-in-viewport.top-to-bottom {

    animation: 1s ease 0s normal none 1 fadeInDown;

    -webkit-animation: 1s ease 0s normal none 1 fadeInDown;

    -moz-animation: 1s ease 0s normal none 1 fadeInDown;

    -o-animation: 1s ease 0s normal none 1 fadeInDown;

    opacity: 1;

  }



  .hb-animate-element.hb-animate-element.hb-in-viewport.fade-in {

    animation: 1s ease 0s normal none 1 fadeIn;

    -webkit-animation: 1s ease 0s normal none 1 fadeIn;

    -moz-animation: 1s ease 0s normal none 1 fadeIn;

    -o-animation: 1s ease 0s normal none 1 fadeIn;

    opacity: 1;

  }

}



.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 .hinge {

  -webkit-animation-duration: 2s;

  animation-duration: 2s;

}



.animated .flipOutX,

.animated .flipOutY,

.animated .bounceIn,

.animated .bounceOut {

  -webkit-animation-duration: 0.75s;

  animation-duration: 0.75s;

}



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

    transform: none;

  }



  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: none;

    transform: none;

  }

}



@keyframes wobble {

  from {

    -webkit-transform: none;

    transform: none;

  }



  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: none;

    transform: none;

  }

}



.wobble {

  -webkit-animation-name: wobble;

  animation-name: wobble;

}



@-webkit-keyframes jello {



  from,

  11.1%,

  to {

    -webkit-transform: none;

    transform: none;

  }



  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.39063deg) skewY(0.39063deg);

    transform: skewX(0.39063deg) skewY(0.39063deg);

  }



  88.8% {

    -webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg);

    transform: skewX(-0.19531deg) skewY(-0.19531deg);

  }

}



@keyframes jello {



  from,

  11.1%,

  to {

    -webkit-transform: none;

    transform: none;

  }



  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.39063deg) skewY(0.39063deg);

    transform: skewX(0.39063deg) skewY(0.39063deg);

  }



  88.8% {

    -webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg);

    transform: skewX(-0.19531deg) skewY(-0.19531deg);

  }

}



.jello {

  -webkit-animation-name: jello;

  animation-name: jello;

  -webkit-transform-origin: center;

  transform-origin: center;

}



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

    transform: none;

  }

}



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

    transform: none;

  }

}



.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: none;

    transform: none;

  }

}



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

    transform: none;

  }

}



.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: none;

    transform: none;

  }

}



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

    transform: none;

  }

}



.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-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: none;

    transform: none;

  }

}



@keyframes fadeInDown {

  from {

    opacity: 0;

    -webkit-transform: translate3d(0, -100%, 0);

    transform: translate3d(0, -100%, 0);

  }



  to {

    opacity: 1;

    -webkit-transform: none;

    transform: none;

  }

}



.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: none;

    transform: none;

  }

}



@keyframes fadeInDownBig {

  from {

    opacity: 0;

    -webkit-transform: translate3d(0, -2000px, 0);

    transform: translate3d(0, -2000px, 0);

  }



  to {

    opacity: 1;

    -webkit-transform: none;

    transform: none;

  }

}



.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: none;

    transform: none;

  }

}



@keyframes fadeInLeft {

  from {

    opacity: 0;

    -webkit-transform: translate3d(-100%, 0, 0);

    transform: translate3d(-100%, 0, 0);

  }



  to {

    opacity: 1;

    -webkit-transform: none;

    transform: none;

  }

}



.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: none;

    transform: none;

  }

}



@keyframes fadeInLeftBig {

  from {

    opacity: 0;

    -webkit-transform: translate3d(-2000px, 0, 0);

    transform: translate3d(-2000px, 0, 0);

  }



  to {

    opacity: 1;

    -webkit-transform: none;

    transform: none;

  }

}



.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: none;

    transform: none;

  }

}



@keyframes fadeInRight {

  from {

    opacity: 0;

    -webkit-transform: translate3d(100%, 0, 0);

    transform: translate3d(100%, 0, 0);

  }



  to {

    opacity: 1;

    -webkit-transform: none;

    transform: none;

  }

}



.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: none;

    transform: none;

  }

}



@keyframes fadeInRightBig {

  from {

    opacity: 0;

    -webkit-transform: translate3d(2000px, 0, 0);

    transform: translate3d(2000px, 0, 0);

  }



  to {

    opacity: 1;

    -webkit-transform: none;

    transform: none;

  }

}



.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: none;

    transform: none;

  }

}



@keyframes fadeInUp {

  from {

    opacity: 0;

    -webkit-transform: translate3d(0, 100%, 0);

    transform: translate3d(0, 100%, 0);

  }



  to {

    opacity: 1;

    -webkit-transform: none;

    transform: none;

  }

}



.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: none;

    transform: none;

  }

}



@keyframes fadeInUpBig {

  from {

    opacity: 0;

    -webkit-transform: translate3d(0, 2000px, 0);

    transform: translate3d(0, 2000px, 0);

  }



  to {

    opacity: 1;

    -webkit-transform: none;

    transform: none;

  }

}



.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) rotate3d(0, 1, 0, -360deg);

    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);

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

    animation-timing-function: ease-out;

  }



  40% {

    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);

    transform: perspective(400px) 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) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);

    transform: perspective(400px) 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);

    transform: perspective(400px) scale3d(0.95, 0.95, 0.95);

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

    animation-timing-function: ease-in;

  }



  to {

    -webkit-transform: perspective(400px);

    transform: perspective(400px);

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

    animation-timing-function: ease-in;

  }

}



@keyframes flip {

  from {

    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);

    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);

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

    animation-timing-function: ease-out;

  }



  40% {

    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);

    transform: perspective(400px) 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) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);

    transform: perspective(400px) 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);

    transform: perspective(400px) scale3d(0.95, 0.95, 0.95);

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

    animation-timing-function: ease-in;

  }



  to {

    -webkit-transform: perspective(400px);

    transform: perspective(400px);

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

    opacity: 1;

  }



  to {

    -webkit-transform: none;

    transform: none;

    opacity: 1;

  }

}



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

    opacity: 1;

  }



  to {

    -webkit-transform: none;

    transform: none;

    opacity: 1;

  }

}



.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: none;

    transform: none;

    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: none;

    transform: none;

    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: none;

    transform: none;

    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: none;

    transform: none;

    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: none;

    transform: none;

    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: none;

    transform: none;

    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: none;

    transform: none;

    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: none;

    transform: none;

    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: none;

    transform: none;

    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: none;

    transform: none;

    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-name: hinge;

  animation-name: hinge;

  /* 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: none;

    transform: none;

  }

}



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

    transform: none;

  }

}



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

}



.card {

  clear: both;

  background-color: #fff;

  border: 1px solid #eaeaea;

  padding: 15px;

  margin-bottom: 10px;

  border-radius: 0;

  display: block;

}











section.checkout-step .form-control-label {

  text-align: left;

}



section.checkout-step .form-group {

  align-items: center;

}



section.checkout-step form#customer-form {

  display: block;

  position: relative;

  overflow: hidden;

  width: 100%;

}



@media (min-width: 1200px) {

  section.checkout-step .collapse {

    display: none;

  }



  section.checkout-step .collapse.show,

  section.checkout-step .collapse.in {

    display: inherit;

  }

}



@media (min-width: 992px) {

  section.checkout-step .collapse {

    display: none;

  }



  section.checkout-step .collapse.show,

  section.checkout-step .collapse.in {

    display: inherit;

  }

}



section.checkout-step .content {

  padding: 0 2.313rem;

  margin-top: 10px;

}



@media (max-width: 575px) {

  section.checkout-step .content {

    padding: 0;

  }

}



section.checkout-step .form-footer {

  text-align: center;

  margin: 8px 0;

}



section.checkout-step .payment-options {

  display: block;

  position: relative;

  overflow: hidden;

  width: 100%;

}









.pagination .pagination-right {

  float: right;

  text-align: right;

}



@media (max-width: 575px) {

  .pagination .pagination-right {

    text-align: center;

  }

}



.pagination .page-list {

  padding: rem(10px) 0;

  margin-bottom: 0;

}



.pagination .page-list li {

  display: inline-block;

  vertical-align: middle;

  text-align: center;

}



.pagination .page-list .pagination-lbl {

  display: none;

}



.ourparty {

  background-image: url("../images/our-party-host.jpg");

  background-position: bottom center;

  background-repeat: no-repeat;

  background-size: cover;

  padding: 70px 20px 70px 20px;

  text-align: center;

}



@media (max-width: 1199px) {

  .ourparty {

    padding: 60px 20px 85px 20px;

  }

}



.ourparty .subtitle {

  margin-bottom: 50px;

}



@media (max-width: 543px) {



  .ourparty .home-title {

    font-size: 23px;

  }



  .ourparty {

    padding: 60px 0 85px 0;

  }



  .ourparty .subtitle {

    margin-bottom: 30px;

    font-size: 30px;

  }

}



.ourparty .host-data {

  text-align: left;

  padding-top: 25px;

}



.ourparty .host-data h5 {

  font-size: 20px;

  line-height: 1.35;

  font-weight: 600;

  color: #ffffff;

  font-family: 'Montserrat', sans-serif;

}



.ourparty .host-data p {

  margin-top: 4px;

  font-size: 14px;

  font-weight: 400;

  color: #0bef9a;

  font-family: 'Montserrat', sans-serif;

}







.tabs {

  /* If media is below 992 */

  margin-bottom: 50px;

}



@media (max-width: 991px) {

  .tabs {

    margin-bottom: 30px;

  }

}



.tabs .nav-tabs {

  border-bottom: none;

  margin-bottom: 30px;

  text-align: center;

  display: block;

}



@media (max-width: 575px) {

  .tabs .nav-tabs {

    margin-bottom: 20px;

  }

}



.tabs .nav-tabs .nav-link {

  color: #000;

  padding-left: 1px;

  padding-right: 1px;

  padding: 8px 12px;

  border: 1px solid #e4e4e4;

  background: #fff;

  letter-spacing: 1px;

  text-decoration: none;

  -webkit-transition: all 0.5s;

  -moz-transition: all 0.5s;

  -o-transition: all 0.5s;

  transition: all 0.5s;

  font-size: 14px;

  font-weight: 500;

  border-radius: 4px;

  position: relative;

}



.tabs .nav-tabs .nav-link.active {

  border-color: var(--brand-secondary);

  background: var(--brand-secondary);

  color: #fff;

}



.tabs .nav-tabs .nav-link.active:before {

  border-color: var(--brand-secondary) transparent transparent transparent;

}



.tabs .nav-tabs .nav-link:hover {

  border-color: var(--brand-secondary);

  background: var(--brand-secondary);

  color: #fff;

}



.tabs .nav-tabs .nav-link:hover:before {

  border-color: var(--brand-secondary) transparent transparent transparent;

}



.tabs .nav-tabs .nav-link:focus {

  border-color: var(--brand-secondary);

  background: var(--brand-secondary);

  color: #fff;

}



.tabs .nav-tabs .nav-link:focus:before {

  border-color: var(--brand-secondary) transparent transparent transparent;

}



.tabs .nav-tabs .nav-link:before {

  content: '';

  position: absolute;

  left: 0;

  right: 0;

  width: 0;

  height: 0;

  bottom: -9px;

  margin: 0 auto;

  border-style: solid;

  border-width: 8px 10px 0 10px;

  border-color: transparent transparent transparent transparent;

  -webkit-transition: all 0.5s;

  -moz-transition: all 0.5s;

  -o-transition: all 0.5s;

  transition: all 0.5s;

}



@media (max-width: 767px) {

  .tabs .nav-tabs .nav-link {

    padding: 8px 4px;

    font-size: 13px;

  }

}



.tabs .nav-tabs .nav-item {

  display: inline-block;

  vertical-align: middle;

  float: none;

  margin-bottom: -0.125rem;

  text-transform: uppercase;

  margin-left: 10px;

}



@media (max-width: 991px) {

  .tabs .nav-tabs .nav-item {

    margin-bottom: 15px;

  }

}



@media (max-width: 767px) {

  .tabs .nav-tabs .nav-item {

    margin-left: 6px;

    margin-bottom: 13px;

  }

}



.tabs .nav-tabs .nav-item:first-child {

  margin-left: 0;

}



.tabs #tab-content #description .product-description>ul,

.tabs #tab-content #description .product-description>ol {

  margin-bottom: 18px;

  padding-left: 26px;

}



.tabs #tab-content #description .product-description>ul li,

.tabs #tab-content #description .product-description>ol li {

  list-style: unset;

  padding-left: 3px;

}



.tabs #tab-content #description .product-description>ul li:marker,

.tabs #tab-content #description .product-description>ol li:marker {

  line-height: 14px;

}



@media (max-width: 575px) {



  .tabs #tab-content #description .product-description>ul li,

  .tabs #tab-content #description .product-description>ol li {

    margin-bottom: 6px;

  }



  .tabs #tab-content #description .product-description>ul li:last-child,

  .tabs #tab-content #description .product-description>ol li:last-child {

    margin-bottom: 0;

  }

}



#tab-about tr {

  line-height: 26px;

  color: #787878;

  margin-bottom: 20px;

  letter-spacing: 0.1px;

  font-weight: 500;

  font-size: 15px;

}



#contact #wrapper {

  display: block;

  width: 100%;

  overflow: hidden;

}



#contact #wrapper iframe {

  width: 100%;

  border: 0;

}



.contact-form-information {

  display: block;

  width: 100%;

  overflow: hidden;

  padding-bottom: 100px;

  /* If media is below 768 */

}



@media (max-width: 767px) {

  .contact-form-information {

    padding-bottom: 50px;

  }

}



.contact-form-information .contact-banner {

  /* If media is below 992 */

}



@media (max-width: 991px) {

  .contact-form-information .contact-banner {

    text-align: center;

  }

}



.contact-form-information .contact-banner .image-container {

  position: relative;

  /* If media is below 992 */

}



@media (max-width: 991px) {

  .contact-form-information .contact-banner .image-container {

    display: inline-block;

    vertical-align: middle;

  }

}



.contact-form-information .contact-banner .image-container a {

  display: block;

  position: relative;

}



.contact-form-information .contact-banner .image-container a:after {

  border-color: #eb4d4b;

  border-style: solid;

  border-width: 4px;

  content: "";

  height: 100%;

  left: 15px;

  position: absolute;

  top: 15px;

  width: 100%;

  z-index: -1;

  -webkit-transition: all 0.2s;

  -moz-transition: all 0.2s;

  -o-transition: all 0.2s;

  transition: all 0.2s;

  /* If media is below 768 */

}



@media (max-width: 767px) {

  .contact-form-information .contact-banner .image-container a:after {

    display: none;

  }

}



.contact-form-information .contact-banner .image-container a:hover:after {

  border-color: ;

}



.contact-form-information .contact-banner .image-container img {

  max-width: 100%;

  width: 100%;

}



.contact-form-information .information-container {

  text-align: left;

  /* If media is below 992 */

}



@media (max-width: 991px) {

  .contact-form-information .information-container {

    text-align: center;

  }

}



.contact-form-information .information-container .list-contact-info .contact_info_item {

  float: left;

  /* If media is below 543 */

}



@media (max-width: 575px) {

  .contact-form-information .information-container .list-contact-info .contact_info_item {

    width: 100%;

    float: none;

  }

}



.contact-form-information .information-container .list-contact-info .contact_info_item h3 {

  color: #333;

  font-size: 15px;

  font-weight: 700;

  margin: 20px 0 10px;

  line-height: 1.1;

  font-family: 'Poppins', sans-serif;

  text-transform: capitalize;

}



.contact-form-information .information-container .list-contact-info .contact_info_item p,

.contact-form-information .information-container .list-contact-info .contact_info_item a {

  color: #696969;

  line-height: 25px;

  margin: 0 auto;

  font-size: 15px;

  font-weight: 400;

  font-family: 'Poppins', sans-serif;

}



.contact-form-information .information-container .list-contact-info .contact_info_item p a:hover,

.contact-form-information .information-container .list-contact-info .contact_info_item a a:hover {

  color: #696969;

}



.contact-form-information .information-container .list-contact-info .contact_info_item:nth-child(3) {

  clear: left;

}



.contact-form-information .information-container .list-contact-info .block-social {

  margin: 0;

  text-align: left;

  top: 0;

  padding: 0 15px;

  /* If media is below 992 */

}



@media (max-width: 991px) {

  .contact-form-information .information-container .list-contact-info .block-social {

    text-align: center;

  }

}



.contact-form-information .information-container .list-contact-info .block-social li {

  display: inline-block;

  vertical-align: middle;

}



.contact-form-information .information-container .list-contact-info .block-social li a:before {

  font-size: 16px;

}



.contact-form-information .information-container .list-contact-info .block-social li a i {

  font-size: 14px;

  color: #fff;

  line-height: 34px;

}



.contact-form-information .information-container .list-contact-info .block-social li a .socialicon-label {

  display: none;

}



.title-container {

  padding: 16px 0;

  padding-right: 0;

  margin-bottom: 45px;

  /* If media is below 768 */

}



@media (min-width: 992px) {

  .title-container {

    padding-left: 30px;

  }

}



@media (max-width: 767px) {

  .title-container {

    margin-bottom: 10px;

  }

}



.title-container .heading {

  color: #444;

  font-size: 40px;

  display: block;

  letter-spacing: 0.1em;

  font-family: 'Poppins', sans-serif;

  font-weight: 600;

  text-transform: uppercase;

  position: relative;

  margin: 20px 0 10px;

  line-height: 1.1;

  /* If media is below 543 */

}



@media (max-width: 575px) {

  .title-container .heading {

    font-size: 25px;

  }

}



.title-container .subheading {

  color: #eb4d4b;

  font-size: 16px;

  font-weight: normal;

  font-style: italic;

  letter-spacing: 0.1em;

  /* If media is below 543 */

}



@media (max-width: 575px) {

  .title-container .subheading {

    font-size: 15px;

  }

}



.contact-form-bottom {

  padding: 15px;

}



@media (min-width: 1200px) {

  .contact-form-bottom {

    max-width: 1000px;

    margin: 0 auto;

  }

}



.contact-form-bottom .title-container {

  text-align: center;

}



.contact-form-bottom .form-field label {

  display: none;

}



.contact-form-bottom .form-field .form-group {

  margin-bottom: 0;

}



.contact-form-bottom .form-field .form-control {

  box-shadow: none;

  width: 100%;

  font-size: 15px;

  line-height: 1.42857;

  color: #555;

  border-color: #e9e9e9;

  padding: 0 12px;

  margin-bottom: 15px;

  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;

}



.contact-form-bottom .form-field input {

  border-radius: 30px;

  height: 45px;

}



.contact-form-bottom .form-field .form-group-area textarea {

  border-radius: 30px;

  padding: 12px 12px 0;

  height: auto;

}



.contact-form-bottom .submit-button {

  margin: 0 auto;

  text-align: center;

}



.contact-form-bottom .submit-button .btn {

  margin: 0;

}



.contact-email-form {

  display: inline-block;

  vertical-align: middle;

  position: relative;

  margin: 0 auto 55px;

}



.contact-email-form .input-wrapper {

  position: relative;

  overflow: hidden;

}



.contact-email-form .input-wrapper input[type="email"] {

  min-width: 390px;

  height: 40px;

  padding: 0 15px;

  border: 0;

}



.contact-email-form .input-wrapper input[type="email"]::placeholder {

  color: #a4a4a4;

}



@media (max-width: 575px) {

  .contact-email-form .input-wrapper input[type="email"] {

    min-width: 280px;

  }

}



.contact-email-form input[type="submit"] {

  background-color: #eb4d4b;

  border-color: #eb4d4b;

  height: 40px;

  border-radius: 0;

  padding: 7px 17px;

  position: absolute;

  right: 0;

  top: 0;

}



.contact-email-form input[type="submit"]:hover {

  background-color: #000;

  border-color: #000;

}



#index section {

  margin-bottom: 70px;

}



@media (max-width: 767px) {

  #index section {

    margin-bottom: 30px;

  }

}





.tabs {

  margin-bottom: 0;

}



body {

  font-family: var(--primary-font);

  font-weight: 400;

  background: var(--light-color);

  color: var(--brand-primary);

  font-size: 14px;

  line-height: 24px;

  letter-spacing: 0.5px;

}



* {

  outline: 0 !important;

}



*:focus {

  outline: 0 !important;

}



*:active {

  outline: 0 !important;

}



h1,

h2,

h3,

h4,

h5,

h6 {

  color: #333;

}



p {

  color: #232323;

  /* default font size */

}



.fa {

  font-size: 17px;

  /* Override the bootstrap defaults */

}



h1 {

  font-size: 33px;

}



h2 {

  font-size: 27px;

}



h3 {

  font-size: 21px;

}



h4 {

  font-size: 15px;

}



h5 {

  font-size: 12px;

}



h6 {

  font-size: 10.2px;

}



th,

td {

  text-align: left;

  border: 1px solid #e8e9eb;

  padding: 10px 14px;

  width: 15%;

  font-size: 16px;

  white-space: nowrap;

}

.qty-block{

  display: flex;

  align-items: center;

  margin-bottom: 10px;

}

.qty-block span{

    font-size: 30px;

    line-height: 30px;

}

.qty-block button{

    background: #9b9b9b;

    box-shadow: none;

    border: none;

    color: #fff;

    padding: 5px 10px;

    font-size: 20px;

}



.qty-block select{

  margin: 0 5px;

}

th {

  font-weight: 700;

}



input,

textarea {

  font-family: 'Poppins', sans-serif;

}



table {

  width: 100%;

  border-collapse: collapse;

  border-spacing: 0;

  background-color: white;

}



a {

  color: #000;

  outline: none;

}

.store-details div{

  margin-bottom: 10px;

}

.footer-before .links li{

  position: relative;

  margin-bottom: 10px;

}

.footer-before .links li a{

  padding-left: 20px;

}

.footer-before .links li:before{

  content: '';

  position: absolute;

  left: 0;

  top: 6px;

  border-radius: 100px;

  width: 10px;

  height: 10px;

  background: #383838;

}

a:hover {

  color: var(--brand-primary);

  text-decoration: none;

  outline: none;

}



a:focus {

  outline: none;

  color: var(--brand-primary);

  text-decoration: none;

}



ul,

.list-unstyled {

  padding: 0;

}



ul li,

.list-unstyled li {

  list-style: none;

}



.form-control {

  box-shadow: none;

  border-radius: 0;

  margin: 0 0 5px;

  font-size: 14px;

  color: #a4a4a4;

  height: 40px;

  line-height: 20px;

  border-color: #eee;

  -webkit-transition: all 0.5s;

  -moz-transition: all 0.5s;

  -o-transition: all 0.5s;

  transition: all 0.5s;

}



.form-control::placeholder {

  color: #a4a4a4;

}



.form-control:focus {

  box-shadow: none;

  border-color: #ccc;

}



.form-horizontal .control-label {

  /* If media is above 767 */

}



@media (min-width: 768px) {

  .form-horizontal .control-label {

    text-align: left;

  }

}



.custom-radio {

  display: inline-block;

  position: relative;

  width: 18px;

  height: 18px;

  vertical-align: middle;

  cursor: pointer;

  border-radius: 50%;

  border: 1px solid #ddd;

  background: white;

  margin-right: 5px;

}



.custom-radio input[type="radio"] {

  opacity: 0;

  cursor: pointer;

}



.custom-radio input[type="radio"]:checked+span {

  display: block;

  background-color: #eb4d4b;

  width: 8px;

  height: 8px;

  left: 4px;

  top: 4px;

  border-radius: 50%;

  position: absolute;

}



.custom-radio input[type="radio"]:focus+span {

  border-color: #55595c;

}



.custom-checkbox {

  position: relative;

}



.custom-checkbox input[type="checkbox"] {

  margin-top: 0.25rem;

  opacity: 0;

  cursor: pointer;

  position: absolute;

}



.custom-checkbox input[type="checkbox"]+span {

  margin-right: 3px;

  display: inline-block;

  width: 0.9375rem;

  height: 0.9375rem;

  vertical-align: middle;

  cursor: pointer;

  border: 1px solid #ddd;

  background: #fafafa none repeat scroll 0 0;

}



.custom-checkbox input[type="checkbox"]+span .checkbox-checked {

  display: none;

  margin: -0.25rem -0.125rem;

  font-size: 20px;

  color: #a9a9a9;

}



.custom-checkbox input[type="checkbox"]:checked+span .checkbox-checked {

  display: block;

}



.custom-checkbox input[type="checkbox"]:focus+span {

  border-color: #55595c;

}



.custom-checkbox label {

  text-align: left;

}



input[type="checkbox"] {

  position: relative;

  top: 0;

  margin: 3px 2px 0px 2px;

  vertical-align: middle;

}



.buttons input[type="checkbox"] {

  margin: 0px 2px 0px 2px;

}



.panel {

  margin-bottom: 20px;

  background-color: #fff;

  border: 1px solid #e9e9e9;

  border-radius: 0;

  box-shadow: none;

}



legend {

  font-size: 18px;

  padding: 7px 0px;

}



label {

  font-size: 14px;

  font-weight: 400;

  color: #000;

}



.panel-heading {

  padding: 15px;

}



.input-group {

  /* Fix some bootstrap issues */

}



.input-group input,

.input-group select,

.input-group .dropdown-menu,

.input-group .popover {

  font-size: 12px;

}



.input-group .input-group-addon {

  font-size: 12px;

  height: 30px;

}



.popover {

  font-family: inherit;

}



.nav-tabs {

  margin-bottom: 15px;

}



div.required .control-label:before {

  content: '* ';

  color: #f00;

  font-weight: bold;

  /* Gradent to all drop down menus */

}



.dropdown-menu li>a:hover {

  text-decoration: none;

  outline: none;

  background-color: transparent;

}



@media (max-width: 991px) {



  #_mobile_column_left>#column-left,

  #_mobile_column_right>#column-left,

  #_mobile_column_left #column-right,

  #_mobile_column_right #column-right {

    float: left;

    width: 100%;

    padding: 0;

    display: block !important;

  }



  #content {

    float: left;

    width: 100%;

  }

}



.clearfix {

  clear: both;

}



#menu_wrapper.active {

  position: fixed;

  left: 0;

  top: 0;

  bottom: 0;

  right: 0;

  z-index: 3;

  background: rgba(0, 0, 0, .5);

  cursor: pointer;

}

.find-block{

  margin-top: 70px;

}

.header-top{

  padding: 10px 0 10px;

  border-bottom: 2px solid #291616;

  background: var(--light-color);

}

.location-selector{
	background: #e7e7e7;
    padding: 8px 20px;
    margin-top: 20px;
    display:none;
}

.home #top-menu>li>a {

  color: var(--brand-primary);

}



.home #top-menu>li>a:hover {

  color: var(--brand-secondary);
    border-bottom:1px solid #000;
}



.home .account .account-logo {

  fill: #fff;

}



@media (min-width: 992px) {

  .home .account .account-logo:hover {

    fill: #000;

  }

}



.home .blockcart .cart-img {

  fill: #fff;

}



@media (min-width: 992px) {

  .home .blockcart .cart-img:hover {

    fill: #000;

  }

}



#header-before {

  /* If media is below 768 */

  /* header */

}



#header-before .page-title {

  display: none;

}



@media (max-width: 767px) {

  #header-before {

    display: none;

  }

}



#header {

  font-family: var(--primary-font);

  font-weight: 400;

  font-size: 14px;

  letter-spacing: 0.6px;

  left: 0;

  right: 0;

  top: 0;

  z-index: 88;

  background: #232323;

}

.header-nav{

  background: #232323;

  padding: 10px 0;

}

.header-nav .left-nav,.header-nav .right-nav a,.header-nav .right-nav i{

  color: var(--light-color);

  font-size: 15px;

  font-weight: 400;

  -webkit-transition: all 0.5s;

  -moz-transition: all 0.5s;

  -o-transition: all 0.5s;

  transition: all 0.5s;

}

.header-nav .right-nav a:hover i,.header-nav .right-nav a:hover{

  color: var(--brand-secondary);

}

.header-nav .left-nav{

  text-align: left;

}

.header-nav .right-nav{

  text-align: right;

}

.header-nav .right-nav div{

  display: inline-block;

  vertical-align: middle;

  padding: 0 5px;

}

.header-nav .right-nav div i{

  margin-right: 5px;

}

  .fixedheader.fixed-header {

    background-color: var(--light-color);

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    text-align: center;

    margin: 0 auto;

    z-index: 99;

    box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.1);

    animation: slide-down 0.7s;

    -moz-animation: slide-down 0.7s;

    -webkit-animation: slide-down 0.7s;

    -o-animation: slide-down 0.7s;

    overflow: visible;

  }







.header-top>.container {

  position: relative;

}

@media (min-width: 992px) {

  .mobile-menu{

    display: none;

  }

}
@media (max-width: 991px) {

  .mobile-menu{

    display: inline-block;
    vertical-align:middle;

  }

}
.search-text::after{

  display: none;

}

.search-widget form {

    position: absolute;

    right: 0;

    left: auto;

    top: 60px;

    width: auto;

    display: none;

    float: none;

    background-color: transparent;

    border: none;

    padding: 0;

    margin: 0;

    box-shadow: none;

    z-index: 2;

}

.header-right{

  display: flex;

  align-items: center;

  justify-content: right;

}

.location-selector .location-text{
    display: flex;
    align-items: center;
    justify-content: end;
}
.location-text label{
    margin-right: 10px;
    margin-bottom: 0;
}
.location-text select{
    width: 12%;
}
@media (max-width: 1400px) {
    .location-text select{
        width: 15%;
    }
}
@media (max-width: 1200px) {
    .location-text select{
        width: 18%;
    }
}
@media (max-width: 991px) {
    .location-text select{
        width: 32%;
    }
}
@media (max-width: 575px) {
    .location-text select{
        width: 50%;
    }
}
#search .input-group-btn{

  position: unset;

}

@media (min-width: 576px) {

  .header-top>.container .row {

    display: flex;

    align-items: center;

  }

}



.header-top #desktop_logo {

  max-width: 240px;

  text-align: left;

  /* If media is below 992 */

}



.header-top #desktop_logo img {

  text-align: center;

  margin: 0 auto;

  max-width: 240px;

}

.collapse.show {

    display: block !important;

}



@media (max-width: 991px) {

  .filter-column .container{

    margin-top: 10px;

  }

  .category-product-block .block-title {

    padding: 13px 20px;

    background: #e9e3e3;

    font-size: 20px;

    color: #000;

    text-transform: uppercase;

  }

  .header-top #desktop_logo {

    margin: 0 auto;

    text-align: center;

    position: relative;

  }

  .header-nav .left-nav,.header-nav .right-nav{

    text-align: center;

  }

  #slider .slider-content .slider-title{

    font-size: 40px;

    line-height: 60px;

  }

  .header-nav .right-nav div{

    display: block;

  }

}

@media (max-width: 575px) {

  .header-top #desktop_logo {

    float: none;

    text-align: center;

  }

  .header-top .row{

    justify-content: space-between;

    align-items: center;

  }

  .matrix-logo{

    padding: 5px 5px;

  }

  .header-top .logo{

    width: 40%;

  }

  .header-top .header-right{

    width: 60%;

  }

  .mobile-menu{

    width: 50%;

  }

}



.nav-full-width {

  /* If media is below 992 */

  position: relative;

  clear: both;

}







@media (max-width: 991px) {

  .nav-full-width {

    background-color: #0bef9a;

    padding: 10px 0;

  }







  .nav-full-width.fixed-header {

    background-color: #0bef9a;

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    text-align: center;

    margin: 0 auto;

    z-index: 99;

    box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.1);

    animation: slide-down 0.7s;

    -moz-animation: slide-down 0.7s;

    -webkit-animation: slide-down 0.7s;

    -o-animation: slide-down 0.7s;

    overflow: visible;

  }

}



@keyframes slide-down {

  0% {

    transform: translateY(-100%);

    -webkit-transform: translateY(-100%);

    -ms-transform: translateY(-100%);

    -o-transform: translateY(-100%);

    -moz-transform: translateY(-100%);

  }



  100% {

    transform: translateY(0);

    -webkit-transform: translateY(0);

    -ms-transform: translateY(0);

    -o-transform: translateY(0);

    -moz-transform: translateY(0);

  }

}



.buttons {

  margin: 1em 0;

  display: block;

  overflow: hidden;

  position: relative;

}



.buttons.close {

  position: relative;

  top: 2px;

  right: 0;

}



.alert-dismissible .close {

  position: relative;

  top: 2px;

  right: 0;

}



.btn {

  padding: 7.5px 12px;

  font-size: 12px;

  line-height: 18px;

  border-radius: 0;

}



.btn.active {

  box-shadow: none;

  outline: none;

}



.btn:focus {

  outline: none;

  text-decoration: none;

  box-shadow: none;

}



.btn-xs {

  font-size: 9px;

}



.btn-sm {

  font-size: 10.2px;

}



.btn-lg {

  padding: 10px 16px;

  font-size: 15px;

}



.btn-group>.btn,

.btn-group>.dropdown-menu,

.btn-group>.popover {

  font-size: 12px;

}



.btn-group>.btn:focus,

.btn-group>.dropdown-menu:focus,

.btn-group>.popover:focus {

  outline: none;

  text-decoration: none;

}



.btn-group>.btn-xs {

  font-size: 9px;

}



.btn-group>.btn-sm {

  font-size: 10.2px;

}



.btn-group>.btn-lg {

  font-size: 15px;

}



.btn-warning,

.btn-inverse,

.btn-link,

.btn-info,

.btn-success,

.btn-danger,

.btn-warning {

  padding: 7.5px 12px;

}



.btn-warning:hover,

.btn-inverse:hover,

.btn-link:hover,

.btn-info:hover,

.btn-success:hover,

.btn-danger:hover,

.btn-warning:hover,

.btn-warning:focus,

.btn-inverse:focus,

.btn-link:focus,

.btn-info:focus,

.btn-success:focus,

.btn-danger:focus,

.btn-warning:focus {

  outline: none;

  text-decoration: none;

  box-shadow: none;

}



.btn-default {

  background-color: var(--brand-primary);

  border-color: var(--brand-primary);

  color: var(--light-color);

  outline: none;

  line-height: 20px;

  font-size: 14px;

  font-weight: 500;

  font-family: var(--primary-font);

  padding: 9px 25px;

  text-transform: uppercase;

  border-radius: 30px;

  cursor: pointer;

  -webkit-transition: all 0.5s;

  -moz-transition: all 0.5s;

  -o-transition: all 0.5s;

  transition: all 0.5s;

}



.btn-default:hover,

.btn-default:active,

.btn-default:focus {

  color: var(--brand-primary);

  background-color: var(--brand-secondary);

  border-color: var(--brand-secondary);

  outline: none;

}



.btn-default:active:hover {

  color: var(--brand-primary);

  background-color: var(--brand-secondary);

  border-color: var(--brand-secondary);

  outline: none;

}



.btn-default:active:focus {

  color: var(--brand-primary);

  background-color: var(--brand-secondary);

  border-color: var(--brand-secondary);

  outline: none;

}



.btn-default i.material-icons {

  position: relative;

  line-height: 0;

  top: 7px;

}



.btn-primary,

.btn.disabled,

.btn:disabled,

.btn-secondary {

  opacity: 1;

  font-size: 14px;

  font-weight: 500;

  font-family: var(--primary-font);

  padding: 9px 25px;

  text-transform: uppercase;

  border-radius: 10px;

  cursor: pointer;

  -webkit-transition: all 0.5s;

  -moz-transition: all 0.5s;

  -o-transition: all 0.5s;

  display: inline-block;

  transition: all 0.5s;

  fill: var(--light-color);

  color: var(--light-color);

  background-color: var(--brand-primary);

  border: 1px solid var(--brand-primary);

  box-shadow: none;

  outline: none;

  line-height: 20px;

  /* list group */

}



.btn-primary:hover,

.btn.disabled:hover,

.btn:disabled:hover,

.btn-secondary:hover,

.btn-primary:active,

.btn.disabled:active,

.btn:disabled:active,

.btn-secondary:active,

.btn-primary:focus,

.btn.disabled:focus,

.btn:disabled:focus,

.btn-secondary:focus {

  color: var(--light-color);

  fill: var(--light-color);

  background-color: #9b9b9b;

  border-color: #9b9b9b;

  outline: none;

  box-shadow: none;

}



.btn-primary:active:hover,

.btn.disabled:active:hover,

.btn:disabled:active:hover,

.btn-secondary:active:hover {

  color: var(--light-color);

  fill:var(--light-color);

  background-color: var(--brand-primary);

  border-color: var(--brand-primary);

  outline: none;

}



.btn-primary:active:focus,

.btn.disabled:active:focus,

.btn:disabled:active:focus,

.btn-secondary:active:focus {

  color: var(--light-color);

  fill: var(--light-color);

  background-color: var(--brand-primary);

  border-color: var(--brand-primary);

  outline: none;

  box-shadow: none;

}



.btn-primary i.material-icons,

.btn.disabled i.material-icons,

.btn:disabled i.material-icons,

.btn-secondary i.material-icons {

  position: relative;

  line-height: 0;

  top: 7px;

}



.list-group a {

  border: 1px solid #e9e9e9;

  color: #888;

  padding: 10px 12px;

  /* fixed product layouts used in left and right columns */

}



.list-group a.active {

  color: #444;

  background: #eee;

  border: 1px solid #ddd;

  text-shadow: 0 1px 0 #fff;

}



.list-group a.active:hover {

  color: #444;

  background: #eee;

  border: 1px solid #ddd;

  text-shadow: 0 1px 0 #fff;

}



.list-group a:hover {

  color: #444;

  background: #eee;

  border: 1px solid #ddd;

  text-shadow: 0 1px 0 #fff;

}



.list-group a:focus {

  color: #888;

  background: #eee;

  border: 1px solid #ddd;

  text-shadow: 0 1px 0 #fff;

}



@media (min-width: 1200px) {

  .collapse {

    display: inherit;

  }

}



@media (min-width: 992px) {

  .collapse {

    display: inherit;

  }

}



.block-title,

.footer-title,

.title {

  position: relative;

}



.block-title .navbar-toggler,

.footer-title .navbar-toggler,

.title .navbar-toggler {

  position: absolute;

  top: 12px;

  right: 15px;

  padding: 0;

  font-size: 22px;

  font-style: normal;

  display: inline-block;

  vertical-align: middle;

  width: 1em;

  height: 1em;

  text-align: center;

}



.block-title,

.footer-title {

  /* Theme Title */

}



.block-title .navbar-toggler i.add,

.footer-title .navbar-toggler i.add {

  display: none;

}



.block-title .navbar-toggler i.remove,

.footer-title .navbar-toggler i.remove {

  display: block;

}



.block-title.collapsed .navbar-toggler i.add,

.footer-title.collapsed .navbar-toggler i.add {

  display: block;

}



.block-title.collapsed .navbar-toggler i.remove,

.footer-title.collapsed .navbar-toggler i.remove {

  display: none;

}



.section-header .subtitle {

  font-size: 16px;

  letter-spacing: 8px;

  font-weight: 500;

  margin-bottom: 12px;

  color: #eb4d4b;

}



@media (max-width: 991px) {

  .section-header .subtitle {

    letter-spacing: 5px;

  }

}



@media (max-width: 767px) {

  .section-header .subtitle {

    letter-spacing: 3px;

  }

}



@media (max-width: 575px) {

  .section-header .subtitle {

    font-size: 14px;

    margin-bottom: 8px;

  }

}



.section-header .title {

  font-size: 40px;

  line-height: 40px;

  letter-spacing: 0px;

  font-weight: 700;

  color: #222;

  text-transform: unset;

  position: relative;

  margin-bottom: 25px;

  padding-bottom: 25px;

}



@media (max-width: 1199px) {

  .section-header .title {

    font-size: 36px;

    line-height: 36px;

  }

}



@media (max-width: 991px) {

  .section-header .title {

    font-size: 30px;

    line-height: 30px;

  }

}



@media (max-width: 767px) {

  .section-header .title {

    font-size: 26px;

    line-height: 26px;

  }

}



@media (max-width: 575px) {

  .section-header .title {

    margin-bottom: 20px;

    padding-bottom: 20px;

  }

}



.section-header .title:before {

  content: "";

  position: absolute;

  width: 80px;

  height: 4px;

  background: #eb4d4b;

  bottom: 0;

  left: 0;

  right: 0;

  margin: 0 auto;

}



.sub-title {

  /* If media is below 1200 */

  /* If media is below 992 */

  color: #777;

  font-size: 14px;

  font-family: 'Poppins', sans-serif;

  font-weight: 400;

  text-align: center;

  display: block;

  width: 34%;

  margin: 0 auto;

  line-height: 1.5;

  margin-bottom: 15px;

  /* select dropdown */

}



@media (max-width: 1199px) {

  .sub-title {

    width: 60%;

  }

}



@media (max-width: 991px) {

  .sub-title {

    width: 100%;

  }

}



.select-wrapper {

  position: relative;

}



.select-wrapper .form-control {

  font-size: 12px;

  border: 1px solid #e0e0e0;

  background-color: #fff;

  padding: 0 5px;

  color: #333;

  position: relative;

  text-decoration: none;

  white-space: nowrap;

  text-align: left;

  border-radius: 0;

  box-shadow: none;

  cursor: pointer;

  appearance: none;

  -o-appearance: none;

  -moz-appearance: none;

  -webkit-appearance: none;

}



.select-wrapper .form-control:focus {

  box-shadow: none;

}



.select-wrapper:after {

  font-family: 'fontawesome';

  content: '\f0d7';

  font-size: 14px;

  position: absolute;

  right: 10px;

  top: 9px;

  pointer-events: none;

}

#spin-wrapper {

  width: 100%;

  height: 100%;

  position: fixed;

  z-index: 9998;

  background: #fff;

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

}



#siteloader {

  background: var(--light-color);

  height: 100%;

  left: 0;

  right: 0;

  position: fixed;

  top: 0;

  bottom: 0;

  width: 100%;

  z-index: 9999;

  margin: auto;

  -webkit-transition: all 0.5s ease;

  -moz-transition: all 0.5s ease;

  transition: all 0.5s ease;

}



#siteloader .loader {

  top: 45%;

  margin: auto;

  position: relative;

  clear: both;

  width: 64px;

  height: 64px;

  border-radius: 50%;

  background: var(--brand-secondary);

  animation: lds-circle 2.4s cubic-bezier(0, 1, 0.9, 1) infinite;

}



@-webkit-keyframes lds-circle {



  0%,

  100% {

    animation-timing-function: cubic-bezier(0.8, 0, 1, 0.8);

  }



  0% {

    transform: rotateY(0deg);

  }



  50% {

    transform: rotateY(900deg);

    animation-timing-function: cubic-bezier(0, 0.6, 0.6, 1);

  }



  100% {

    transform: rotateY(1500deg);

  }

}



@-moz-keyframes lds-circle {



  0%,

  100% {

    animation-timing-function: cubic-bezier(0.8, 0, 1, 0.8);

  }



  0% {

    transform: rotateY(0deg);

  }



  50% {

    transform: rotateY(900deg);

    animation-timing-function: cubic-bezier(0, 0.6, 0.6, 1);

  }



  100% {

    transform: rotateY(1500deg);

  }

}



@-o-keyframes lds-circle {



  0%,

  100% {

    animation-timing-function: cubic-bezier(0.8, 0, 1, 0.8);

  }



  0% {

    transform: rotateY(0deg);

  }



  50% {

    transform: rotateY(900deg);

    animation-timing-function: cubic-bezier(0, 0.6, 0.6, 1);

  }



  100% {

    transform: rotateY(1500deg);

  }

}



@keyframes lds-circle {



  0%,

  100% {

    animation-timing-function: cubic-bezier(0.8, 0, 1, 0.8);

  }



  0% {

    transform: rotateY(0deg);

  }



  50% {

    transform: rotateY(900deg);

    animation-timing-function: cubic-bezier(0, 0.6, 0.6, 1);

  }



  100% {

    transform: rotateY(1500deg);

  }

}



.hide {

  display: none !important;

}





#contact-map iframe {

  width: 100%;

}



.popup {

  width: 900px;

  margin: auto;

  text-align: center

}



.popup img {

  width: 200px;

  height: 200px;

  cursor: pointer

}







.show .overlay {

  width: 100%;

  height: 100%;

  background: rgba(0, 0, 0, .66);

  position: absolute;

  top: 0;

  left: 0;

}



.show .img-show {

  width: 624px;

  height: 468px;

  background: #FFF;

  position: absolute;

  top: 50%;

  left: 50%;

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

  overflow: hidden

}



.img-show span {

  position: absolute;

  top: 10px;

  right: 10px;

  z-index: 888;

  cursor: pointer;

  width: 40px;

  height: 40px;

  background: rgba(255, 255, 255, 0.7);

  text-align: center;

  margin: 0 auto;

  line-height: 38px;

  border-radius: 50px;

  font-size: 21px;

}



.img-show img {

  width: 100%;

  height: 100%;

  position: absolute;

  top: 0;

  left: 0;

}



.schedule-block .schedule-data {

  text-align: center;

}



@media (max-width: 1199px) {

  .schedule-block .schedule-data {

    margin-bottom: 30px;

  }

}



.schedule-block .schedule-data .date-title,

.schedule-block .schedule-data .time-title,

.schedule-block .schedule-data .location-title {

  font-size: 20px;

  color: #fff;

  margin-bottom: 10px;

}



.schedule-block .schedule-data .date,

.schedule-block .add {

  font-size: 18px;

  color: #fff;

}



.schedule-block .schedule-data .icon {

  width: 50px;

  height: 50px;

  text-align: center;

  margin: 0 auto 10px;

}



.schedule-block .schedule-data .icon i {

  color: #0bef9a;

  font-size: 40px;

}







.bannerblock {

  padding-bottom: 70px;

}



.bannerblock .container {

  max-width: 1240px;

}



.bannerblock img {

  max-width: 100%;

}



.contactus .contact-subtitle {

  text-align: left;

  font-size: 35px;

  line-height: 1em;

  color: #0bef9a;

  margin-bottom: 20px;

  font-family: 'Mrs Saint Delafield', cursive;

}



.contactus .contact-title {

  text-align: left;

  font-size: 35px;

  color: #ffffff;

  margin-bottom: 30px;

  font-family: 'Montserrat', sans-serif;

}



.contactus p {

  color: #ffffff;

  text-align: left;

  font-size: 18px;

}



.contactform {

  padding: 33px 35px 35px 35px;

  background-color: #111111;

}



@media (max-width: 1199px) {

  .contactform {

    padding: 33px 20px 35px 20px;

  }



  .contactus .contact-title {

    font-size: 30px;

  }

}



@media (max-width: 991px) {

  .contact-content {

    margin-bottom: 30px;

  }

}



@media (max-width: 543px) {

  .contactus p {

    font-size: 15px;

  }



  .contactform {

    padding: 33px 15px 35px 15px;

  }

}



@media (max-width: 380px) {

  .contactus .contact-title {

    font-size: 23px;

  }

}



.contactus .address-content h4 {

  font-size: 24px;

  margin-bottom: 15px;

  color: #fff;

}



.contactus .address-content .block .icon,

.contactus .address-content .block .content {

  display: inline-block;

  vertical-align: middle;

}



.contactus .address-content .block .icon {

  color: #0bef9a;

}



.contactus .address-content .block .icon i {

  font-size: 25px;

}



.contactus .address-content .block a {

 color: #fff;

  font-size: 20px;

  margin-left: 10px;

}

.contactus .address-content .block{

  margin-bottom: 15px;

}

@media (max-width: 543px) {

  .contactus .address-content .block a{

    font-size: 17px;

  }

  .contactus .address-content .block .icon i{

    font-size: 25px;

  }

}

.contactform input,

.contactform textarea {

  background: transparent;

  border: 1px solid rgba(11, 239, 154, 0.3);

  color: #ffffff;

}



.contactform input {

  height: 40px;

}



.contactform input:focus,

.contactform textarea:focus {

  background: rgba(11, 239, 154, 0.1);

  border: 1px solid rgba(11, 239, 154, 0.1);

}



.contactform .form-control {

  height: auto;

}



.contactform .btn-primary {

  font-family: 'Montserrat';

  font-weight: 600;

  font-size: 15px;

  padding: 12px 35px;

  background: #0bef9a;

  color: #ffffff;

  border-radius: 0;

  width: 100%;

  height: 50px;

}

.footerafter{

  background: #494949;

}



.footer-after-text{

  font-size: 16px;

  font-weight: 500;

  color: var(--light-color);

}

.master-title{

  text-align: right;

  display: flex;

  align-items: center;

  justify-content: end;

  font-size: 15px;

  color: var(--light-color);

}

.master-title a{

  font-size: 15px;

  color: var(--light-color);

}

.footerafter-text a {

  color: #0bef9a;

}





#header.other .header-top {

  background: #0bef9a;

  position: unset;

}



#header.other .header-top.fixed-header {

  position: fixed;

}



.other #top-menu>li>a:hover {

  color: #232323;

}



.sponsors {

  background-image: url("../images/our-sponsor-bg-image.jpg");

  background-position: center;

  padding: 100px 50px;

}



.present-image img {

  max-width: 100%;

}



.present-inner {

  border: 2px solid #0bef9a;

  padding: 80px 50px;

  text-align: center;

  border-radius: 10px;

}



@media (max-width: 1199px) {

  .present-inner {

    padding: 50px 50px;

  }

}



@media (max-width: 991px) {

  .present-image {

    text-align: center;

    margin-bottom: 30px;

  }

}



.present-inner .present-subtitle {

  font-size: 40px;

  line-height: 50px;

  color: #fff;

  margin-bottom: 20px;

}



.present-inner .present-title {

  font-size: 50px;

  line-height: 60px;

}



@media (max-width: 767px) {

  .present-inner .present-title {

    font-size: 40px;

    line-height: 50px;

  }

}



@media (max-width: 543px) {

  .present-inner .present-title {

    font-size: 30px;

    line-height: 40px;

  }



  .present-inner .present-subtitle {

    font-size: 30px;

    line-height: 40px;

  }



  .present-inner {

    padding: 50px 15px;

  }



  .sponsors {

    padding: 50px 15px;

  }

}



.associate-block .home-title {

  margin-bottom: 30px;

}



.associate-block .assciation-card {

  text-align: center;

}



.associate-block .assciation-card img {

  max-width: 100%;

}



.sponsors-block .sponsors-subtitle {

  text-align: center;

  font-size: 25px;

  margin-bottom: 10px;

}



.sponsors-block .sponsors-image img {

  max-width: 100%;

}



.sponsors-block .sponsors-image {

  text-align: center;

  margin-bottom: 30px;

}



.sponsors-block .home-title {

  margin-bottom: 30px;

}



.eventsbody {

  padding: 80px 50px;

  background-image: url("../images/upcoming_events.jpg");

  background-position: center;

}







.nav-tabs .nav-link {

  font-size: 18px;

  font-weight: 600;

  color: #000;

}

.bestseller-block .nav-tabs{

  justify-content: center;

  border: 0;

  margin-bottom: 30px;

}

.nav-tabs .nav-link.active {

  background: #e7e7e7;

  border-color: #e7e7e7;

  color: #000;



}



.nav-tabs .nav-link:focus,

.nav-tabs .nav-link:hover {

  border-color: #e7e7e7;

  background: #e7e7e7;

  color: #000;

}



.block_content {

  margin-top: 30px;

}



.food-center .services:last-child {

  border-width: 0px 0px 1px 0px;

}



.home-services.servicesblock {

  padding: 150px 0 0;

}

@media (max-width: 543px) {

  .home-services.servicesblock {

    padding: 0 0 0;

  }

}

.contactus {

  padding: 150px 0 0;

}



@media (max-width: 991px) {

  .mobile-logo {

    text-align: center;

  }

}



@media (max-width: 767px) {

  .mobile-logo {

    width: 90%;

  }

}



@media (max-width: 543px) {

  .mobile-logo {

    width: 82%;

  }

  .contactus {

    padding: 0 0 0;

  }

}



#upcoming-event .event-image img,#past-event .event-image img {

  max-width: 100%;

}



#upcoming-event .event-content , #past-event .event-content {

  text-align: center;

}



#upcoming-event h2 ,#past-event h2{

  color: #0bef9a;

  font-size: 35px;

  margin-bottom: 20px;

}



#upcoming-event .event-content p , #past-event .event-content p {

  color: #fff;

  font-size: 22px;

  line-height: 28px;

}



#upcoming-event .event-content i , #past-event .event-content i{

  font-size: 20px;

  margin-right: 10px;

}

#past-event .event-content i.add{

  font-size: 26px;

}

.schedule {

  text-align: center;

}



.schedule h2 {

  color: #ffffff;

}



.schedule p {

  color: #fff;

  font-size: 22px;

}



.schedule .home-title {

  margin: 0 auto 20px;

}



.schedule .schedule-inner {

  border: 1px solid #0bef9a;

  padding: 40px 0 30px;

  border-radius: 20px;

  background: rgba(11, 239, 154, 0.1);

}



.schedule .date-time {

  border-right: 1px solid #0bef9a;

}



@media (max-width: 991px) {

  #upcoming-event .event-content,#past-event .event-content{

    margin-top: 20px;

  }

}



@media (max-width: 543px) {

  #productstab {

    display: block;

  }



  .eventsbody {

    padding: 40px 15px;

  }



  #upcoming-event h2 , #past-event h2{

    font-size: 25px;

  }



  .eventsbody .subtitle {

    font-size: 19px !important;

    padding: 15px 0 !important;

  }



  #eventsblock {

    padding: 0;

  }



  .eventsbody .servicesblock {

    padding-bottom: 10px;

  }



  .schedule p {

    font-size: 18px;

  }

}

.footerafter-text .master-title,.footerafter-text a{

  display: inline-block;

  vertical-align: middle;

}

.footerafter-text a{

  color: #0bef9a;

}

.bannercountdown{

  padding: 100px 0;

  background-color: #f0e5af;

  background-image: url("../images/counter-bg-image.png");

  background-attachment: fixed;

}

@media (max-width: 543px) {

  .bannercountdown{

    padding: 50px 0;

  }

}

.bannercountdown .counter .data,.bannercountdown .counter .lbl{

  display: block;

  text-align: center;

}

.bannercountdown .counter .data{

  position: relative;

  color: var(--brand-primary);

  text-align: center;

  font-size: 50px;

  line-height: 50px;

  font-weight: 600;

  margin-bottom: 10px;

}

.bannercountdown .counter .lbl{

  font-size: 20px;

  font-weight: 600;

  color: var(--brand-primary);

}

@media (max-width: 1199px) {

  .bannercountdown .counter .data{

    font-size: 30px;

    line-height: 30px;

  }

  .bannercountdown .counter .data::after{

    right: 60px;

  }

  .bannercountdown .counter.countdown-funders .data::after{

    right: 50px;

  }

  .bannercountdown .counter.countdown-guests .data::after{

    right: 35px;

  }

  .bannercountdown .counter .lbl{

    font-size: 17px;

  }

}

@media (max-width: 991px) {

  .bannercountdown .counter .data::after{

    right: 35px;

  }

  .bannercountdown .counter.countdown-funders .data::after{

    right: 25px;

  }

  .bannercountdown .counter.countdown-guests .data::after{

    right: 7px;

  }

  .bannercountdown .counter .lbl{

    font-size: 14px;

  }

}

@media (max-width: 767px) {

  .countdown-event,.countdown-artist{

    margin-bottom: 30px;

  }

  .bannercountdown .counter .data::after{

    right: 75px;

  }

  .bannercountdown .counter.countdown-funders .data::after {

    right: 65px;

  }

  .bannercountdown .counter.countdown-guests .data::after{

    right: 50px;

  }

}

@media (max-width: 575px) {

  .bannercountdown .counter .data{

    width: 42%;

    text-align: center;

    margin: 0 auto 10px;

  }

  .countdown-funders{

    margin-bottom: 30px;

  }

}

@media (max-width: 535px) {

  .bannercountdown .counter .data{

    width: 46%;

  }

}

@media (max-width: 510px) {

  .bannercountdown .counter .data{

    width: 50%;

  }

}

@media (max-width: 470px) {

  .bannercountdown .counter .data{

    width: 55%;

  }

}

@media (max-width: 420px) {

  .bannercountdown .counter .data{

    width: 61%;

  }

}

@media (max-width: 390px) {

  .bannercountdown .counter .data{

    width: 68%;

  }

}

@media (max-width: 350px) {

  .bannercountdown .counter .data{

    width: 76%;

  }

}





/**/

/*time line*/

/**/

.line-element:after{

  content: "";

  display: table;

  clear: both;

}

.line-element {

  width: 100%;

  display: -ms-flexbox;

    display: -webkit-flex;

    display: flex;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;

}

.line-element>* {

  max-width: 100%;

  width: 50%;

  vertical-align: middle;

  text-align: center;

  position: relative;

}

.action-block .text h3 {

  font-size: 25px;

  font-family: "Raleway";

}

.action-block .text h3,

.action-block .text p{

  color: var(--brand-primary);

}

.action-block .text p{

  margin-bottom: 7px;

}

.action .action-block {

  position: relative;

  display: inline-block;

  box-sizing: border-box;

  -moz-box-sizing: border-box;

  -webkit-box-sizing: border-box;

  width: 370px;

  max-width: 100%;

  margin: 30px 0;

  border: 2px solid #fde468;

  border-radius: 4px;

  -moz-border-radius: 4px;

  -webkit-border-radius: 4px;

  background-color: #ffffff;

}

.action .action-block span {

  position: absolute;

  z-index: 1;

  overflow: hidden;

  line-height: 1;

  left: 0;

  bottom: 0;

}

.action .action-block i {

  font-size: 98px;

  color: #f27c66;

  opacity: 0.25;

  margin-left: -10px;

  margin-bottom: -5px;

}

.action .action-block .text {

  position: relative;

  z-index: 2;

  background-color: #fde468;

  margin-left: 66px;

  padding: 30px;

  text-align: left;

}

.action .action-block:before {

  position: absolute;

  right: -32px;

  top: 50%;

  transform: translateY(-50%);

  -ms-transform: translateY(-50%);

  -moz-transform: translateY(-50%);

  -webkit-transform: translateY(-50%);

  content: "";

  display: block;

  width: 0;

  height: 0;

  border-top: 30px solid transparent;

  border-left: 30px solid #fde468;

  border-bottom: 30px solid transparent;

}

.action:last-child .action-block span {

  right: 0;

  left: auto;

}

.action .action-block i.flaticon-shopping{

  margin-left: 0;

}

.action:last-child .action-block i {

  margin-right: 2px;

  margin-left: 0;

}

.action:last-child .action-block .text {

  margin: 0 66px 0 0;

}

.action:last-child .action-block:before {

  left: -32px;

  border-right: 30px solid #f27c66;

  border-left: 0;

}

.line-element .level-block {

  display: inline-block;

  font-size: 30px;

  line-height: 80px;

  padding: 0 35px;

  color: var(--brand-primary);

  background-color: #fde468;

  border-radius: 9px;

  -moz-border-radius: 9px;

  -webkit-border-radius: 9px;

}

.line-element .level {

  position: relative;

  z-index: 1;

}

.line-element .level:before{

  content: "";

  position: absolute;

  z-index: 1;

  width: 42px;

  height: 42px;

  border-radius: 50%;

  -moz-border-radius: 50%;

  -webkit-border-radius: 50%;

  background-color: #ffffff;

  border: 3px solid #fde468;

  top: 50%;

  left: 0;

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

  -ms-transform: translate(-50%, -50%);

  -moz-transform: translate(-50%, -50%);

  -webkit-transform: translate(-50%, -50%);

}

.line-element .level:after{

  content: "";

  position: absolute;

  background-color: #e6e6e6;

  left: 0;

  top: 50%;

  width: 50%;

  height: 1px;

  z-index: -1;

}

.line-element .level:first-child:before{

  right: 0;

  left: auto;

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

  -ms-transform: translate(50%, -50%);

  -moz-transform: translate(50%, -50%);

  -webkit-transform: translate(50%, -50%);

}

.line-element  .level:first-child:after{

  right: 0;

  left: auto;

}

.line-element .action:after{

  content: "";

  display: block;

  position: absolute;

  background-color: #e6e6e6;

  width: 2px;

  right: 0;

  top: 0;

  bottom: 0;

  transform: translateX(50%);

  -ms-transform: translateX(50%);

  -moz-transform: translateX(50%);

  -webkit-transform: translateX(50%);

}

.line-element .level + .action:after{

  right: auto;

  left: 0;

  transform: translateX(-50%);

  -ms-transform: translateX(-50%);

  -moz-transform: translateX(-50%);

  -webkit-transform: translateX(-50%);

}

.line-element.color-2 .level:before,

.color-2 .action .action-block {

  border-color: #f9cb8f;

}

.line-element.color-2 .level-block,

.color-2 .action .action-block .text {

  background-color: #edcf82;

}

.color-2 .action .action-block:before {

  border-left-color: #edcf82;

}

.color-2 .action:last-child .action-block:before {

  border-right-color: #edcf82;

}

.color-2 .action .action-block i {

  color: #f9cb8f;

}



.line-element.color-3 .level:before,

.color-3 .action .action-block {

  border-color: #f0e5af;

}

.line-element.color-3 .level-block,

.color-3 .action .action-block .text {

  background-color: #f0e5af;

}

.color-3 .action .action-block:before {

  border-left-color: #f0e5af;

}

.color-3 .action:last-child .action-block:before {

  border-right-color: #f0e5afc;

}

.color-3 .action .action-block i {

  color: #f0e5af;

}



@media screen and (max-width: 1200px){

  .action:first-child {

    text-align: left;

  }

  .action:last-child {

    text-align: right;

  }

}

@media screen and (max-width: 980px){

  .time-line .line-element:nth-child(2n) {

     -webkit-flex-direction: column;

      -ms-flex-direction: column;

      flex-direction: column;

  }

  .time-line .line-element:nth-child(2n+1) {

     -webkit-flex-direction: column-reverse;

      -ms-flex-direction: column-reverse;

      flex-direction: column-reverse;

  }

  .line-element>* {

    width: auto;

  }

  .line-element .action:after{

    display: none;

  }

  .action .action-block:before{

    top: -34px;

    left: 50% !important;

    right: auto;

    -webkit-transform: translate(-50%, 0) rotate(-90deg);

    -ms-transform: translate(-50%, 0) rotate(-90deg);

    -o-transform: translate(-50%, 0) rotate(-90deg);

    transform: translate(-50%, 0) rotate(-90deg);

    /* display: none; */

  }

  .action:last-child .action-block:before {

    -webkit-transform: translate(-50%, 0) rotate(90deg);

    -ms-transform: translate(-50%, 0) rotate(90deg);

    -o-transform: translate(-50%, 0) rotate(90deg);

    transform: translate(-50%, 0) rotate(90deg);

  }

  .line-element .level:before{

    display: none;

  }

  .line-element .level:after{

    display: none;

  }

}



.ticket-title{

    font-size: 30px;

    color: #fff;

    margin-top: 40px;

    line-height: 40px;

}

.venue-title{

  font-size: 25px;

  color: #fff;

  margin-bottom: 20px;

}

  .footerafter .row{

    align-items: center;

  }

#social-container{

text-align: right;

}

  .block-social ul {

    margin: 0; }

    .block-social ul li{

    display: inline-block; }

  .block-social ul li a{

    /* If media is below 350 */

    cursor: pointer;

    display: inline-block;

    vertical-align: middle;

    padding: 3px;

    margin: 1px 1px;

    border-radius: 50%;

    text-align: center;

    position: relative;

    -webkit-transition: all 0.4s;

    -moz-transition: all 0.4s;

    -o-transition: all 0.4s;

    transition: all 0.4s; }

  @media (max-width: 350px) {

        .block-social ul li a {

          margin: 2px 1px; } }

  .block-social ul li a, .block-social ul li i {

    text-decoration: none; }

  .block-social ul li a:before, .block-social ul li i:before {

    display: inline-block;

    vertical-align: middle;

    font-family: FontAwesome;

    font-weight: 400;

    position: relative;

    font-size: 20px;

    line-height: 25px;

    color: #fff; }

  .block-social ul li a:before {

    display: none; }

 /* .block-social ul li .facebook {

    background: #3b5999; }*/

    .block-social ul li .twitter {

    background: #1da1f2; }

  .block-social ul li .youtube {

    background: #d12121; }

  /*.block-social ul li .instagram {

    background: #cc2366; }*/

  .block-social ul li a i:hover {

    color: var(--brand-secondary); }



.videoblock iframe{

  max-width: 100%;

}









/*** 



====================================================================

  Info Section

====================================================================



***/



.info-section{

  position:relative;

}



.info-block{

  position:relative;

  margin-bottom:30px;

}



.info-block h2{

  position:relative;

  color:#222222;

  font-size:18px;

  font-weight:700;

  margin-bottom:20px;

  text-transform:uppercase;

}



.info-block .inner-box{

  position:relative;

  padding-left:65px;

  padding-top:10px;

}



.info-block .inner-box .icon-box{

  position:absolute;

  left:0px;

  top:0px;

  width:50px;

  height:50px;

  font-size:18px;

  color:#172745;

  line-height:48px;

  text-align:center;

  background-color:var(--brand-secondary);

}



.info-block .inner-box .text{

  color:#777777;

  font-size: 16px;

}



.contact-form-section{

  position:relative;

  padding:75px 0px 55px;

  background-color:#fafafa;

}



/*** 



====================================================================

  Contact Form

====================================================================



 ***/



.contact-form .group-title{

  position:relative;

  margin-bottom:22px;

}



.contact-form .group-title h2{

  font-size:18px;

  text-transform:uppercase;

  color:#222222;

  font-weight:700;

}



.contact-form .form-group{

  margin-bottom:30px;

}



.contact-form .form-group .group-inner{

  position:relative;

}



.contact-form .form-group .icon-label{

  position: absolute;

    right: 20px;

    top: 12px;

    font-size: 16px;

    color: #ffd105;

  z-index:1;

}



.contact-form .form-group input[type="text"],

.contact-form .form-group input[type="password"],

.contact-form .form-group input[type="tel"],

.contact-form .form-group input[type="email"],

.contact-form .form-group select{

  position:relative;

  display:block;

  width:100%;

  line-height:23px;

  padding:10px 20px;

  color:#222222;

  border:1px solid #e2e2e2;

  height:45px;

  font-size:14px;

  background:#ffffff;

  -webkit-transition:all 300ms ease;

  -ms-transition:all 300ms ease;

  -o-transition:all 300ms ease;

  -moz-transition:all 300ms ease;

  transition:all 300ms ease;

}



.contact-form .form-group input[type="text"]:focus,

.contact-form .form-group input[type="password"]:focus,

.contact-form .form-group input[type="tel"]:focus,

.contact-form .form-group input[type="email"]:focus,

.contact-form .form-group select:focus,

.contact-form .form-group textarea:focus{

  border-color:var(--brand-secondary);

}



.contact-form .form-group textarea{

  position:relative;

  display:block;

  width:100%;

  line-height:24px;

  padding:10px 20px;

  color:#222222;

  border:1px solid #e2e2e2;

  height:152px;

  background:#ffffff;

  resize:none;

  font-size:14px;

  -webkit-transition:all 300ms ease;

  -ms-transition:all 300ms ease;

  -o-transition:all 300ms ease;

  -moz-transition:all 300ms ease;

  transition:all 300ms ease;

}



.contact-form button{

  position:relative;

  padding:9px 66px;

  text-transform:uppercase;

}



.contact-form input.error,

.contact-form select.error,

.contact-form textarea.error{

  border-color:#ff0000 !important;  

}



.contact-form label.error{

  display:block;

  line-height:24px;

  padding:5px 0px 0px;

  margin:0px;

  text-transform:uppercase;

  font-size:11px;

  color:#ff0000;

  font-weight:500;  

}



/*===============================Contact Page End============================================*/

/*================================AboutUs Page=================================================*/

.instructor-wrapper {

  margin-left: 65px;

  margin-top: 27px;

}

@media only screen and (min-width: 992px) and (max-width: 1200px) {

  .instructor-wrapper {

    margin-left: 0;

    margin-top: 0;

  }

}

@media (max-width: 767px) {

  .instructor-wrapper {

    margin-left: 0;

  }

}

@media only screen and (min-width: 576px) and (max-width: 767px) {

  .instructor-wrapper {

    margin-left: 0;

  }

}



.ins-info {

  padding-left: 20px;

  position: relative;

}

@media (max-width: 767px) {

  .ins-info {

    padding-left: 0;

  }

}

@media only screen and (min-width: 576px) and (max-width: 767px) {

  .ins-info {

    padding-left: 0;

  }

}

.ins-info::before {

  position: absolute;

  content: "";

  background: #c3d9df;

  height: 145px;

  width: 1px;

  left: -40px;

  top: 0;

}



.instructor-icon i {

  font-size: 40px;

  color: #ea5822;

}



.instructor-text h4 {

  font-size: 22px;

  margin-top: 20px;

  margin-bottom: 6px;

  letter-spacing: -0.3px;

}

.instructor-text p {

  margin-bottom: 0;

  margin-right: 37px;

}



.instructor-img {

  margin-left: -50px;

}

.instructor-img img {

  width: 100%;

}



.instructor-button a.c-btn {

  margin-bottom: 10px;

}



.instructor-wrapper-03 {

  margin: 0;

  padding-top: 125px;

  padding-bottom: 120px;

}

.instructor-wrapper-03 .section-title span {

  color: white;

}

.instructor-wrapper-03 .section-title h2 {

  color: white;

}

@media only screen and (min-width: 992px) and (max-width: 1200px) {

  .instructor-wrapper-03 .section-title h2 {

    font-size: 40px;

  }

}

@media only screen and (min-width: 768px) and (max-width: 991px) {

  .instructor-wrapper-03 .section-title h2 {

    font-size: 35px;

  }

}

.instructor-wrapper-03 .section-title p {

  color: #999ec4;

  margin-right: 0;

}

.instructor-wrapper-03.iw-03 {

  padding-left: 375px;

  padding-right: 100px;

}

@media only screen and (min-width: 1801px) and (max-width: 1900px) {

  .instructor-wrapper-03.iw-03 {

    padding-left: 300px;

  }

}

@media only screen and (min-width: 1601px) and (max-width: 1800px) {

  .instructor-wrapper-03.iw-03 {

    padding-left: 240px;

  }

}

@media only screen and (min-width: 1200px) and (max-width: 1600px) {

  .instructor-wrapper-03.iw-03 {

    padding-left: 50px;

    padding-right: 50px;

  }

}

@media only screen and (min-width: 992px) and (max-width: 1200px) {

  .instructor-wrapper-03.iw-03 {

    padding-left: 50px;

    padding-right: 50px;

  }

}

@media only screen and (min-width: 768px) and (max-width: 991px) {

  .instructor-wrapper-03.iw-03 {

    padding-left: 15px;

    padding-right: 15px;

  }

}

@media (max-width: 767px) {

  .instructor-wrapper-03.iw-03 {

    padding-left: 15px;

    padding-right: 15px;

  }

}

@media only screen and (min-width: 576px) and (max-width: 767px) {

  .instructor-wrapper-03.iw-03 {

    padding-left: 15px;

    padding-right: 15px;

  }

}

.instructor-wrapper-03.iw-04 {

  padding-left: 155px;

  padding-right: 325px;

}

@media only screen and (min-width: 1801px) and (max-width: 1900px) {

  .instructor-wrapper-03.iw-04 {

    padding-right: 294px;

  }

}

@media only screen and (min-width: 1601px) and (max-width: 1800px) {

  .instructor-wrapper-03.iw-04 {

    padding-right: 144px;

  }

}

@media only screen and (min-width: 1200px) and (max-width: 1600px) {

  .instructor-wrapper-03.iw-04 {

    padding-left: 50px;

    padding-right: 50px;

  }

}

@media only screen and (min-width: 992px) and (max-width: 1200px) {

  .instructor-wrapper-03.iw-04 {

    padding-left: 50px;

    padding-right: 50px;

  }

}

@media only screen and (min-width: 768px) and (max-width: 991px) {

  .instructor-wrapper-03.iw-04 {

    padding-left: 15px;

    padding-right: 15px;

  }

}

@media (max-width: 767px) {

  .instructor-wrapper-03.iw-04 {

    padding-left: 15px;

    padding-right: 15px;

  }

}

@media only screen and (min-width: 576px) and (max-width: 767px) {

  .instructor-wrapper-03.iw-04 {

    padding-left: 15px;

    padding-right: 15px;

  }

}



.about-img-box .about-one {

  padding-left: 40px;

}

@media only screen and (min-width: 992px) and (max-width: 1200px) {

  .about-img-box .about-one img {

    width: 100%;

  }

}

@media only screen and (min-width: 768px) and (max-width: 991px) {

  .about-img-box .about-one img {

    width: 100%;

  }

}

@media (max-width: 767px) {

  .about-img-box .about-one img {

    width: 100%;

  }

}

@media only screen and (min-width: 576px) and (max-width: 767px) {

  .about-img-box .about-one img {

    width: 100%;

  }

}

@media only screen and (min-width: 992px) and (max-width: 1200px) {

  .about-img-box .about-one {

    padding-left: 0;

  }

}

@media only screen and (min-width: 768px) and (max-width: 991px) {

  .about-img-box .about-one {

    padding-left: 0;

  }

}

@media (max-width: 767px) {

  .about-img-box .about-one {

    padding-left: 0;

  }

}

@media only screen and (min-width: 576px) and (max-width: 767px) {

  .about-img-box .about-one {

    padding-left: 0;

  }

}

.about-img-box .about-two {

  position: absolute;

  bottom: -97px;

  right: 0;

}



.about-tag {

  width: 177px;

  height: 177px;

  display: inline-block;

  position: absolute;

  z-index: 1;

  top: 230px;

  left: 170px;

  text-align: center;

  display: flex;

  align-items: center;

  justify-content: center;

}

.about-tag::before {

  content: '';

  border-radius: 50%;

  background-color: white;

  position: absolute;

  left: 10px;

  top: 10px;

  width: 177px;

  height: 177px;

  z-index: 1;

}

.about-tag .about-tag-inner {

  background: var(--brand-secondary);

  width: 177px;

  height: 177px;

  display: inline-block;

  border-radius: 50%;

  padding: 44px;

  position: relative;

  z-index: 2;

}

.about-tag .about-tag-inner h2 {

  color: var(--brand-primary);

  font-size: 50px;

  line-height: 1;

  font-family: "IBM Plex Sans", sans-serif;

  font-weight: 700;

  margin: 0;

}

.about-tag .about-tag-inner p {

  color: var(--brand-primary);

  font-family: "IBM Plex Sans", sans-serif;

  font-weight: 700;

  line-height: 1;

  margin: 0;

}



.left-line::before {

  content: '';

  background-color: var(--brand-secondary);

  position: absolute;

  left: 0;

  top: 8px;

  width: 3px;

  height: 70px;

  z-index: 1;

}



.about-wrapper {

  padding-left: 70px;

  padding-right: 45px;

}

@media only screen and (min-width: 992px) and (max-width: 1200px) {

  .about-wrapper {

    padding-left: 0;

    padding-right: 0;

  }

}

@media only screen and (min-width: 768px) and (max-width: 991px) {

  .about-wrapper {

    padding-left: 0;

    padding-right: 0;

  }

}

@media (max-width: 767px) {

  .about-wrapper {

    padding-left: 0;

    padding-right: 0;

  }

}

@media only screen and (min-width: 576px) and (max-width: 767px) {

  .about-wrapper {

    padding-left: 0;

    padding-right: 0;

  }

}

.about-wrapper .section-title h2 {

  margin-bottom: 33px;

}

.about-wrapper .section-title p {

  color: var(--brand-primary);

  font-size: 15px;

}



.inner-content-list li:first-child {

  border-bottom: 1px solid #ebebeb;

  padding-bottom: 15px;

  margin-bottom: 40px;

}



.inner-content .inner-content-icon {

  margin-right: 23px;

}

.inner-content .inner-content-icon i {

  color: white;

  font-size: 18px;

  line-height: 55px;

  background: #3662ff;

  display: inline-block;

  width: 55px;

  height: 55px;

  border-radius: 50%;

  text-align: center;

}



.skills .skills-box {

  background: white;

  width: 95px;

  height: 95px;

  display: inline-block;

  position: relative;

  border-radius: 50%;

  margin-bottom: 20px;

}

.skills .skills-box h3 {

  color: #062a35;

  font-size: 30px;

  line-height: 1;

  font-family: "roboto";

  font-weight: 700;

  position: absolute;

  left: 0;

  right: 0;

  text-align: center;

  top: 50%;

  transform: translateY(-50%);

}

.skills .skills-box h3 span {

  color: #062a35;

  font-size: 15px;

}

.skills h6 {

  font-size: 18px;

  padding-right: 40px;

}



.our-video {

  margin-left: 100px;

}

@media only screen and (min-width: 992px) and (max-width: 1200px) {

  .our-video {

    margin-left: 0;

  }

}

@media only screen and (min-width: 768px) and (max-width: 991px) {

  .our-video {

    margin-left: 0;

  }

}

@media only screen and (min-width: 576px) and (max-width: 767px) {

  .our-video {

    margin-left: 0;

  }

}

@media (max-width: 767px) {

  .our-video {

    margin-left: 0;

  }

}

@media only screen and (min-width: 992px) and (max-width: 1200px) {

  .our-video .video-thumb img {

    width: 100%;

  }

}

@media only screen and (min-width: 768px) and (max-width: 991px) {

  .our-video .video-thumb img {

    width: 100%;

  }

}

@media (max-width: 767px) {

  .our-video .video-thumb img {

    width: 100%;

  }

}

@media only screen and (min-width: 576px) and (max-width: 767px) {

  .our-video .video-thumb img {

    width: 100%;

  }

}

.our-video .video-area .popup-video {

  width: 65px;

  height: 65px;

  line-height: 65px;

  position: absolute;

}

.our-video .video-area .popup-video::before {

  content: '';

  border: 2px solid white;

  border-radius: 50%;

  opacity: 0.349;

  position: absolute;

  left: -11px;

  top: -11px;

  width: 86px;

  height: 86px;

  z-index: 1;

}

.mb-60 {

  margin-bottom: 60px;

}

.mb-30 {

  margin-bottom: 30px;

}

.pb-130{

  padding-bottom: 130px;

}

.about-wrapper h6{

  font-family: "roboto";

  color: #062a35;

  margin-top: 0px;

  font-style: normal;

  font-weight: 700;

  text-transform: normal;

  line-height: 1.1;

}

.grey-bg {

  background: #f9f1ce;

}

.pb-100 {

  padding-bottom: 100px;

}

.pt-160 {

  padding-top: 160px;

}

.pos-rel {

  position: relative;

}

.align-items-center {

  -ms-flex-align: center !important;

  align-items: center !important;

  display: flex;

}

.popup-video {

  color: #ea5822;

  font-size: 12px;

  display: inline-block;

  position: absolute;

  background: white;

  width: 45px;

  height: 45px;

  line-height: 45px;

  text-align: center;

  top: 50%;

  left: 0;

  right: 0;

  margin: 0 auto;

  transform: translateY(-50%);

  border-radius: 50%;

  animation: pulseBig infinite 4s linear;

  z-index: 7;

}

.skill-wrapper p{

  color: var(--brand-primary);

  font-size: 15px;

}

.pl-30{

  padding-left: 30px;

}

.counter-bg {

  margin-top: -76px;

  position: relative;

  z-index: 3;

}

@media only screen and (min-width: 992px) and (max-width: 1200px) {

  .counter-bg {

    margin-top: 50px;

  }

}

@media only screen and (min-width: 768px) and (max-width: 991px) {

  .counter-bg {

    margin-top: 50px;

  }

}

@media (max-width: 767px) {

  .counter-bg {

    margin-top: 50px;

  }

}



.counter-wrapper {

  box-shadow: 0px 10px 30px 0px rgba(234, 244, 247, 0.9);

  background: white;

  padding: 33px 20px 30px 40px;

}

@media only screen and (min-width: 992px) and (max-width: 1200px) {

  .counter-wrapper {

    padding: 33px 10px 30px 10px;

  }

}



.counter-icon {

  margin-right: 20px;

}

@media only screen and (min-width: 992px) and (max-width: 1200px) {

  .counter-icon {

    margin-right: 13px;

  }

}

.counter-icon i {

  color: #ea5822;

  font-size: 40px;

  position: relative;

  top: 2px;

}



.counter-text {

  overflow: hidden;

}

.counter-text h1 {

  color: var(--brand-secondary);

  line-height: 1;

  font-size: 35px;

  margin-bottom: 4px;

}

.counter-text > span {

  color: var(--brand-primary);

  font-size: 18px;

  font-weight: 500;

}



.single-brand {

  display: inline-block;

}



.counter-area-02 .counter-bg {

  margin-top: -180px;

  position: relative;

  z-index: 3;

}

@media only screen and (min-width: 768px) and (max-width: 991px) {

  .counter-area-02 .counter-bg {

    margin-top: 0;

  }

}

@media (max-width: 767px) {

  .counter-area-02 .counter-bg {

    margin-top: 0;

  }

}

@media only screen and (min-width: 576px) and (max-width: 767px) {

  .counter-area-02 .counter-bg {

    margin-top: 0;

  }

}



.counter-wrapper-02 {

  padding: 75px 90px 55px 90px;

}

@media only screen and (min-width: 992px) and (max-width: 1200px) {

  .counter-wrapper-02 {

    padding: 75px 15px 55px 15px;

  }

}

@media (max-width: 767px) {

  .counter-wrapper-02 {

    padding: 75px 15px 55px 15px;

  }

}

@media only screen and (min-width: 576px) and (max-width: 767px) {

  .counter-wrapper-02 {

    padding: 75px 15px 55px 15px;

  }

}

.counter-wrapper-02.counter-border {

  border-right: 1px solid #5a7efe;

  border-left: 1px solid #5a7efe;

}

.counter-wrapper-02 .counter-icon {

  margin-right: 0;

}

.counter-wrapper-02 .counter-icon i {

  color: white;

  font-size: 45px;

  line-height: 1;

}

.counter-wrapper-02 .counter-text > span {

  color: white;

  font-size: 15px;

  font-weight: 500;

  display: inline-block;

  margin-bottom: 5px;

}

.counter-wrapper-02 .counter-text h1 {

  color: white;

  line-height: 1;

  font-size: 45px;

  margin-bottom: 20px;

}

.counter-wrapper-02 .counter-text p {

  color: white;

}



.counter-area-03 .counter-bg {

  margin-top: 0;

  margin-bottom: -100px;

}



.counter-wrapper-03 {

  border-top: 3px solid var(--brand-secondary);

}

@media (max-width: 991px) {

  .pb-130{

    padding-bottom: 0;

  }

}

/*================================AboutUs Page End=================================================*/

@media (max-width: 991px) {

  .aboutus .about-img{

    text-align: center;

    margin-bottom: 30px;

  }

  .aboutus .simple-text{

    text-align: center;

  }

  .aboutus .sim-button{

    text-align: center;

  }

  .links{

    padding-left: 15px;

  }

  .links{

    margin-bottom: 20px;

  }

  .storeinfo .store-img{

    width: 40%;

  }

  .footer-before{

    padding: 40px 0 20px;

  }

  .footer-after-text,.master-title{

    text-align: center;

    display: block;

  }

}



@media (max-width: 767px) {

  .bannercountdown{

    padding: 50px 0;

  }

  .testimonialsblock .bg-img{

    padding: 40px 0;

  }

  .videoblock p{

    text-align: center;

  }

}

@media (max-width: 575px) {

  .home-title{

    font-size: 20px;

  }

}

.footerafter .footer-after-text{

  font-size: 14px;

  display: flex;

  align-items: center;

}

.terms-link{

  padding-left: 5px;

}

.terms-link ul{

  margin: 0;

}

.terms-link ul li{

  display: inline-block;

  vertical-align: middle;

  padding: 0 5px;

}

.filter-btn{

    overflow: hidden;

    clear: both;

    margin-left: 20px;

    margin-bottom: 10px;

}

.stock-block{

  margin-top: 5px;

}

.stock-block .red-stock{

  color: #bb2124;

}

.stock-block .green-stock{

  color: #22bb33;

}

#warehouse{

  height: 39px;

  padding: 0 10px;

}

/* Magnific Popup CSS */

.mfp-bg {

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  z-index: 502;

  overflow: hidden;

  position: fixed;

  background: #0b0b0b;

  opacity: 0.8;

  filter: alpha(opacity=80); }



.mfp-wrap {

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  z-index: 503;

  position: fixed;

  outline: none !important;

  -webkit-backface-visibility: hidden; }



.mfp-container {

  height: 100%;

  text-align: center;

  position: absolute;

  width: 100%;

  height: 100%;

  left: 0;

  top: 0;

  padding: 0 8px;

  -webkit-box-sizing: border-box;

  -moz-box-sizing: border-box;

  box-sizing: border-box; }



.mfp-container:before {

  content: '';

  display: inline-block;

  height: 100%;

  vertical-align: middle; }



.mfp-align-top .mfp-container:before {

  display: none; }



.mfp-content {

  position: relative;

  display: inline-block;

  vertical-align: middle;

  margin: 0 auto;

  text-align: left;

  z-index: 505; }



.mfp-inline-holder .mfp-content,

.mfp-ajax-holder .mfp-content {

  width: 100%;

  cursor: auto; }



.mfp-ajax-cur {

  cursor: progress; }



.mfp-zoom-out-cur,

.mfp-zoom-out-cur .mfp-image-holder .mfp-close {

  cursor: -moz-zoom-out;

  cursor: -webkit-zoom-out;

  cursor: zoom-out; }



.mfp-zoom {

  cursor: pointer;

  cursor: -webkit-zoom-in;

  cursor: -moz-zoom-in;

  cursor: zoom-in; }



.mfp-auto-cursor .mfp-content {

  cursor: auto; }



.mfp-close,

.mfp-arrow,

.mfp-preloader,

.mfp-counter {

  -webkit-user-select: none;

  -moz-user-select: none;

  user-select: none; }



.mfp-loading.mfp-figure {

  display: none; }



.mfp-hide {

  display: none !important; }



.mfp-preloader {

  color: #cccccc;

  position: absolute;

  top: 50%;

  width: auto;

  text-align: center;

  margin-top: -0.8em;

  left: 8px;

  right: 8px;

  z-index: 504; }



.mfp-preloader a {

  color: #cccccc; }



.mfp-preloader a:hover {

  color: white; }



.mfp-s-ready .mfp-preloader {

  display: none; }



.mfp-s-error .mfp-content {

  display: none; }



button.mfp-close,

button.mfp-arrow {

  overflow: visible;

  cursor: pointer;

  background: transparent;

  border: 0;

  -webkit-appearance: none;

  display: block;

  padding: 0;

  z-index: 506; }



button::-moz-focus-inner {

  padding: 0;

  border: 0; }



.mfp-close {

  width: 44px;

  height: 44px;

  line-height: 44px;

  position: absolute;

  right: 0;

  top: 0;

  text-decoration: none;

  text-align: center;

  opacity: 0.65;

  padding: 0 0 18px 10px;

  color: white;

  font-style: normal;

  font-size: 28px;

  font-family: Arial, Baskerville, monospace; }

  .mfp-close:hover, .mfp-close:focus {

    opacity: 1; }

  .mfp-close:active {

    top: 1px; }



.mfp-close-btn-in .mfp-close {

  color: #333333; }



.mfp-image-holder .mfp-close,

.mfp-iframe-holder .mfp-close {

  color: white;

  right: -6px;

  text-align: right;

  padding-right: 6px;

  width: 100%; }



.mfp-counter {

  position: absolute;

  top: 0;

  right: 0;

  color: #cccccc;

  font-size: 12px;

  line-height: 18px; }



.mfp-arrow {

  position: absolute;

  top: 0;

  opacity: 0.65;

  margin: 0;

  top: 50%;

  margin-top: -55px;

  padding: 0;

  width: 90px;

  height: 110px;

  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }



.mfp-arrow:active {

  margin-top: -54px; }



.mfp-arrow:hover,

.mfp-arrow:focus {

  opacity: 1; }



.mfp-arrow:before, .mfp-arrow:after,

.mfp-arrow .mfp-b,

.mfp-arrow .mfp-a {

  content: '';

  display: block;

  width: 0;

  height: 0;

  position: absolute;

  left: 0;

  top: 0;

  margin-top: 35px;

  margin-left: 35px;

  border: solid transparent; }

.mfp-arrow:after,

.mfp-arrow .mfp-a {

  opacity: 0.8;

  border-top-width: 12px;

  border-bottom-width: 12px;

  top: 8px; }

.mfp-arrow:before,

.mfp-arrow .mfp-b {

  border-top-width: 20px;

  border-bottom-width: 20px; }



.mfp-arrow-left {

  left: 0; }

  .mfp-arrow-left:after,

  .mfp-arrow-left .mfp-a {

    border-right: 12px solid black;

    left: 5px; }

  .mfp-arrow-left:before,

  .mfp-arrow-left .mfp-b {

    border-right: 20px solid white; }



.mfp-arrow-right {

  right: 0; }

  .mfp-arrow-right:after,

  .mfp-arrow-right .mfp-a {

    border-left: 12px solid black;

    left: 3px; }

  .mfp-arrow-right:before,

  .mfp-arrow-right .mfp-b {

    border-left: 20px solid white; }



.mfp-iframe-holder {

  padding-top: 40px;

  padding-bottom: 40px; }



.mfp-iframe-holder .mfp-content {

  line-height: 0;

  width: 100%;

  max-width: 900px; }



.mfp-iframe-scaler {

  width: 100%;

  height: 0;

  overflow: hidden;

  padding-top: 56.25%; }



.mfp-iframe-scaler iframe {

  position: absolute;

  top: -3px;

  left: 0;

  width: 100%;

  height: 100%;

  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);

  background: black; }



.mfp-iframe-holder .mfp-close {

  top: -43px; }



/* Main image in popup */

img.mfp-img {

  width: auto;

  max-width: 100%;

  height: auto;

  display: block;

  line-height: 0;

  -webkit-box-sizing: border-box;

  -moz-box-sizing: border-box;

  box-sizing: border-box;

  padding: 40px 0 40px;

  margin: 0 auto; }



/* The shadow behind the image */

.mfp-figure:after {

  content: '';

  position: absolute;

  left: 0;

  top: 40px;

  bottom: 40px;

  display: block;

  right: 0;

  width: auto;

  height: auto;

  z-index: -1;

  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); }



.mfp-figure {

  line-height: 0; }



.mfp-bottom-bar {

  margin-top: -36px;

  position: absolute;

  top: 100%;

  left: 0;

  width: 100%;

  cursor: auto; }



.mfp-title {

  text-align: left;

  line-height: 18px;

  color: #f3f3f3;

  word-break: break-word;

  padding-right: 36px; }



.mfp-figure small {

  color: #bdbdbd;

  display: block;

  font-size: 12px;

  line-height: 14px; }



.mfp-image-holder .mfp-content {

  max-width: 100%; }



.mfp-gallery .mfp-image-holder .mfp-figure {

  cursor: pointer; }



@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {

  /**

   * Remove all paddings around the image on small screen

   */

  .mfp-img-mobile .mfp-image-holder {

    padding-left: 0;

    padding-right: 0; }



  .mfp-img-mobile img.mfp-img {

    padding: 0; }



  /* The shadow behind the image */

  .mfp-img-mobile .mfp-figure:after {

    top: 0;

    bottom: 0; }



  .mfp-img-mobile .mfp-bottom-bar {

    background: rgba(0, 0, 0, 0.6);

    bottom: 0;

    margin: 0;

    top: auto;

    padding: 3px 5px;

    position: fixed;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box; }



  .mfp-img-mobile .mfp-bottom-bar:empty {

    padding: 0; }



  .mfp-img-mobile .mfp-counter {

    right: 5px;

    top: 3px; }



  .mfp-img-mobile .mfp-close {

    top: 0;

    right: 0;

    width: 35px;

    height: 35px;

    line-height: 35px;

    background: rgba(0, 0, 0, 0.6);

    position: fixed;

    text-align: center;

    padding: 0; }



  .mfp-img-mobile .mfp-figure small {

    display: inline;

    margin-left: 5px; } }

@media all and (max-width: 800px) {

  .mfp-arrow {

    -webkit-transform: scale(0.75);

    transform: scale(0.75); }



  .mfp-arrow-left {

    -webkit-transform-origin: 0;

    transform-origin: 0; }



  .mfp-arrow-right {

    -webkit-transform-origin: 100%;

    transform-origin: 100%; }



  .mfp-container {

    padding-left: 6px;

    padding-right: 6px; } }

.mfp-ie7 .mfp-img {

  padding: 0; }

.mfp-ie7 .mfp-bottom-bar {

  width: 600px;

  left: 50%;

  margin-left: -300px;

  margin-top: 5px;

  padding-bottom: 5px; }

.mfp-ie7 .mfp-container {

  padding: 0; }

.mfp-ie7 .mfp-content {

  padding-top: 44px; }

.mfp-ie7 .mfp-close {

  top: 0;

  right: 0;

  padding-top: 0; }



  /* Menu Css */

.navbar-default{

    background: transparent !important;

    box-shadow: none !important;

    border: 0 !important;

    margin-bottom: 0 !important;

    padding: 0;

}

@media all and (min-width: 768px) {

  #_desktop_top_menu .dropdown>.dropdown-menu,

  #_desktop_top_menu.dropdown.open>.dropdown-menu {

     opacity: 0;

     visibility: hidden;

     transition: all ease 0.2s;

  }

  #_desktop_top_menu .dropdown:hover>.dropdown-menu,

  #_desktop_top_menu.dropdown.open:hover>.dropdown-menu { 

     opacity: 1;

     visibility: visible; 

  }

}

.navbar-nav li a{

    color: #000000 !important;

    font-size: 14px;

    font-weight: 500;

    letter-spacing: 1.5px;

    font-family: 'Kanit', sans-serif;

}

ul.dropdown-menu{

  padding: 0;

  background: #3a3a42;

}

.submenu li a img {

    max-width: 100%;

    height: 63px;

}

.submenu li a span {

    display: flex;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    display: block;

}

.mega-name{

  text-align: center;

  font-size: 12px;

  line-height: 12px;

  padding-left: 10px;

}

.mega-logo img{

  max-width: 23%;

}

ul.dropdown-menu li{

  display: block;

  padding: 10px;

  border-bottom: 1px solid var(--brand-secondary);

}

ul.dropdown-menu li:last-child{

  border-bottom: 0;

}

ul.dropdown-menu li a{

  color: #fff;

  font-size: 15px;

}

.navbar-default .navbar-collapse{

    float: right;

}

.search .navbar-left{

    float: none !important;

}

.nav-full-width{

    background: #3A3A42;

    padding: 8px 0px;

}

.search .navbar-form{

    margin: 0;

    padding: 0;

    display: flex;

}

.search .navbar-form .form-group{

  margin: 0;

}

.search .form-control{

    width: 250px !important;

    margin-bottom: 0;

}

.matrix-logo {

  background: #e9e3e3;

  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

  overflow: hidden;

  padding: 10px 10px;

  margin-left: 10px;

  border-radius: 10px;

}

.mega-logo{

  display: flex;

  align-items: center;

  justify-content: center;

  margin-top: 5px;

}

.nav-left{

    display: flex;

    align-items: center;

    justify-content: right;

}

.header-nav .top-left {

    position: relative;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

}

.header-nav .list-style-one {

    position: relative;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    margin: 0;

}

.header-nav .list-style-one.light li, .header-nav .list-style-one.light a {

    color: var(--light-color) !important;

    font-size: 14px;

}

.header-nav .list-style-one.light li{

  padding-right: 10px;

}

.header-nav .row{

  align-items: center;

}

.catalog-block,.retailer-block{

    padding: 0 20px;

}

.catalog-block img,.retailer-block img{

    width: 21px;

    height: 21px;

}

.catalog-block a,.retailer-block a{

    color: #ffffff;

    font-weight: 500;

    text-decoration: none;

    font-family: 'Kanit', sans-serif;

    transition: all .25s ease-in-out;

}

.catalog-block i,.retailer-block i{

    margin-right: 5px;

}

.catalog-block a:hover,.retailer-block a:hover{

    text-decoration: none;

    color: #ca1b22;

}

.user-info{

    background: var(--light-color);

    padding: 5px 5px;

    border-radius: 5px;

    border: 1px solid var(--brand-primary);

}

.user-info a{

    font-size: 14px;

    color: var(--brand-primary);

    transition: all .25s ease-in-out;

}

.search .navbar-left .btn-default{

    background: #ca1b22;

    border: 0;

    color: #fff;

    letter-spacing: 1.5px;

    padding: 5px 25px;

    border-radius: 0;

    margin-left: 10px;

}

.nav-full-width .row{

  align-items: center;

}

/* Menu Css End */

/*storeinfo-block*/

.storeinfo-block .row{

  align-items: center;

  margin:0;

}

.storeinfo-block .store-logo{

  width: 50%;

  text-align: center;

  padding: 77px 40px;

  background: #efefef;

}

.storeinfo-block .store-logo img{

  max-width: 100%;

}

.storeinfo-block .store-details{

  width: 50%;

  background: var(--brand-secondary);

  color: var(--light-color);

  padding: 50px 40px;

  position: relative;

}

.storeinfo-block .store-details:before{

  content: "";

  position: absolute;

  left: -8%;

  top: 0;

  width: 20%;

  height: 100%;

  background: var(--brand-secondary);

  clip-path: polygon(45% 0, 47% 49%, 48% 100%, 29% 100%, 0 50%, 26% 0);

}

.storeinfo-block .store-details a,.storeinfo-block .store-details h2{

  color: var(--light-color);

}

.storeinfo-block .store-details a{

  font-size: 20px;

}

.storeinfo-block .store-details i{

  font-size: 17px;

}

/*storeinfo-block*/



/*bestseller-block*/

.bestseller-block {

  position: relative;

}

.bestseller-block .row{

  display: block;

}

.bestseller-block .owl-nav{

  margin-top: 20px;

}

.bestseller-block .product-title{

  font-family: "Kanit", sans-serif;

  text-align: center;

  font-size: 17px;

  color: #000;

  margin-top: 10px;

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

}

.bestseller-block .row{

  margin: 0;

}

/*bestseller-block*/



/*New Arrivals*/



.new-arrival-block .section-title{

  padding-bottom: 0;

  border-bottom: 0;

  margin-bottom: 0;

}

.new-arrival-block .row{

  align-items: center;

}

.new-arrival-block .section-title .title{ 

  text-align: center;

  background: #ca1b22;

  color: #fff;

  font-size: 25px;

  padding: 60px 0 45px;

}

.new-arrival-block .section-title .title i{ 

  display: block;

  margin-top: 20px;

  font-size: 25px;

}

.new-arrival-block .owl-nav{

  margin-top: 15px;

}

/*New Arrivals*/



/*Video Block*/



.video-block video{

  width: 100%;

}

.line-item-container {

    padding: 10px 0px;

    display: flex;

    width: 40%;

}

.line-item-container button{

    background: transparent;

    border: 0;

}

.preposal_item {

    padding: 10px 10px;

    background: var(--brand-secondary);

    margin: 5px 0;

    display: inline-block;

    color: #fff;

}



.events-btn{

  text-align: center;

  margin: 0 auto;

  margin-top: 30px;

}

.faqs-block .nav-tabs{

  display: block;

  border: 1px solid #eee;

}

.faqs-block{

  margin-top: 70px;

}

.faqs-block .nav-tabs .nav-item{ 

  margin-bottom: 10px;

}

.faqs-block .nav-tabs .nav-link{

  border-radius: 0;

}

.faq-inner h2{

    font-size: 35px;

    font-weight: 600;

    margin-bottom: 20px;

}

.faq-inner .faq-title{

  font-size: 20px;

  font-weight: 600;

  margin-bottom: 10px;

}

.faq-inner ul li{

  list-style: disc;

  margin-left: 40px;

  font-size: 16px;

  margin-bottom: 15px;

}

.faq-inner p{

  font-size: 16px;

}

/*Video Block*/

@media (max-width: 1500px) {

  #top-menu>li>a{

    padding: 15px 14px;

    font-size: 13px;

  }



}

@media (max-width: 1360px) {

    #top-menu>li>a {

        padding: 15px 10px;

        font-size: 13px;

    }

}

@media (max-width: 1360px) {

    #top-menu>li>a {

        padding: 15px 7px;

        font-size: 13px;

    }

}

@media (min-width: 992px) and (max-width: 1199px) {

  .header-nav .container, .header-top .container{

    max-width: 1150px;

  }

  

}

@media (min-width: 1081px) and (max-width: 1199px) {

  #top-menu>li>a {

    padding: 15px 5px;

    font-size: 12px;

  }

}

@media (min-width: 992px) and (max-width: 1080px) {

  #top-menu>li>a {

    padding: 15px 5px;

    font-size: 11px;

  }

}

@media all and (max-width: 1199px) {

  th, td {

    width: 25%;

  }

  .new-arrival-block .section-title, .new-arrival-block .product-block{

    width: 100% !important;

    max-width: 100% !important;

  }

  .new-arrival-block .row{

    display: block;

  }

  .new-arrival-block .section-title{

    margin-bottom: 30px;

    padding: 0;

  }

  #trending-carousel .owl-nav{

    top: -20%;

  }

  .search .form-control{

    width: 160px !important;

  }

  .catalog-block a, .retailer-block a{

    font-size: 13px;

  }

  .catalog-block, .retailer-block {

    padding: 0 5px;

  }

  .user-info{

    text-align: center;

    padding: 5px 5px;

  }

  .user-info a{

    font-size: 13px;

  }

  .new-arrival-block .section-title .title{

    padding: 70px 0 45px;

  }



}

@media all and (max-width: 991px) {

  th, td {

      width: 100%;

      font-size: 14px;

  }

  .product-quantity .add{

    display: block;

  }

  a.buy-btn {

      margin-left: 0;

      margin-top: 10px;

  }

  .modal-dialog {

      max-width: 90%;

  }

  ul.dropdown-menu li{

    text-align: center;

    display: block !important;

  }

  .top-menu .dropdown-menu{

    position: unset;

  }

  .top-menu .dropdown-menu li a img{

    display: none;

  }

  .top-menu .dropdown-menu{

    display: block !important;

  }

  ul.dropdown-menu {

      min-width: 15rem;

  }

  #mobile_top_menu_wrapper #top-menu ul{

    background: transparent;

    padding: 0;

    padding-left: 10px;

    border: 0;

  }

  ul.dropdown-menu li{

    text-align: left;

    border-bottom: 0;

  }

  ul .dropdown.show{

    display: block !important;

  }

  .dropdown-menu, .dropdown .dropdown-menu {

      opacity: 1;

      visibility: visible;

  }

  .small-banner .banner-item{

    margin-bottom: 30px;

  }

  #trending-carousel .owl-nav{

    top: -19%;

  }

  .choose-img{

    margin: 0 auto;

    text-align: center;

  }

  .choose-img img {

      border-radius: 50px;

  }

  .search-widget .search-logo{

    width: 50px;

    height: 50px;

  }

  .header-nav .list-style-one{

    display: block;

  }

  .header-nav .top-left{

    text-align: center;

    margin: 0 auto;

    display: block;

  }

  .search .navbar-form{

    justify-content: center;

  }

  .search .form-control {

    width: 360px !important;

  }

  .nav-full-width .search{

    margin-bottom: 20px;

  }

  .nav-full-width .nav-left{

    justify-content: center;

  }

  .new-arrival-block .section-title .title{

    padding: 40px 0 40px;

    margin-bottom: 30px;

  }

  .new-arrival-block .section-title .title i{

    display: none;

  }

}

@media all and (max-width: 950px) {

  .storeinfo-block .store-logo{

    width: 100%;

  }

  .storeinfo-block .store-details{

    width: 100%;

    margin: 0 auto;

    text-align: center;

  }

}

@media all and (max-width: 767px) {

  .modal-dialog {

    max-width: 90%;

  }

  .choose-img img {

    border-radius: 10px;

  }

  .search .form-control{

    width: 250px !important;

  }

  .bestseller-block .owl-nav{

    top: -40%;

  }

  #slider .slider-content .slider-title {

    font-size: 30px;

    line-height: 40px;

    margin-bottom: 20px;

  }

}

@media all and (max-width: 575px) {

  #slider .slider-content .slider-title{

    font-size: 20px;

    line-height: 25px;

  }

  .bestseller-block .owl-nav {

    position: unset;

    margin-top: 20px;

  }

  .bestseller-block .home-title{

    text-align: center;

  }

}

@media all and (max-width: 450px) {

  .nav-full-width .nav-left{

    display: block;

    text-align: center;

  }

  .catalog-block, .retailer-block {

    display: inline-block;

    margin-bottom: 10px;

  }

  .user-info {

    display: inline-block;

  }

  .search .form-control {

    width: 170px !important;

  }

  .storeinfo-block .store-details{

    padding: 20px 10px;

  }

  .storeinfo-block .store-logo{

    padding: 40px;

  }

  .user-info {

    padding: 4px 2px;

  }

}

@media all and (max-width: 400px) {

    #slider .slider-content .slider-title {

        font-size: 14px;

        line-height: 16px;

        margin-bottom: 10px;

    }

}    

@media (min-width: 768px) {

    .flex-md-row-reverse {

        -ms-flex-direction: row-reverse !important;

        flex-direction: row-reverse !important;

    }

}



.align-items-center {

    -ms-flex-align: center !important;

    align-items: center !important;

}

.no-gutters {

    margin-right: 0;

    margin-left: 0;

}

@media (min-width: 992px) {

    .pl-lg-13, .px-lg-13 {

        padding-left: 6.25rem !important;

    }

}

@media (min-width: 992px) {

    .pl-md-6, .px-md-6 {

        padding-left: 1.875rem !important;

    }

}

@media (min-width: 768px) {

    .mb-md-0, .my-md-0 {

        margin-bottom: 0 !important;

    }

}

@media (min-width: 768px) {

    .fs-md-60 {

        font-size: 60px !important;

    }

}

.fs-30 {

    font-size: 30px !important;

}

.about-page-content{

  margin-top: 70px;

}

.about-page-content p{

  font-size: 16px;

}

.service-block{

  background:#ece4de;

  padding: 100px 0;

  text-align: center;

}

.service-block .services-img{

  padding-bottom: 20px;

}

.services-content p{

  margin-bottom: 0;

}

.about-page-content li{

  list-style: disc;

  margin-bottom: 20px;

  font-size: 16px;

  margin-left: 20px;

}

 

.left-content {

  padding-right: 50px !important;

}

.pb-55 {

    padding-bottom: 55px;

}

.store-information {

    color: #333;

    margin-bottom: 30px;

    overflow: hidden;

}

.store-title > h4 {

    font-size: 18px;

    font-weight: 700;

    text-transform: uppercase;

    color: #414141;

    margin-bottom: 30px;

}

.single-communication {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    margin-bottom: 20px;

    border-bottom: 1px solid #ebebeb;

    padding-bottom: 15px;

}

.communication-icon {

    margin-right: 20px;

    margin-left: 5px;

}

.communication-icon i {

    font-size: 32px;

    color: var(--brand-secondary);

}

.contact-form{

    border: 1px solid rgba(0, 0, 0, .125);

    padding: 30px 30px;

}

.location-area-map iframe{

  margin-bottom: 30px;

}

.button_area{

  margin-bottom: 0 !important;

}

.contact-form-title h3{

  margin-bottom: 20px;

}

@media (max-width: 991px) {

  .service-padding{

    padding-bottom: 40px;

  }

  .left-content{

    margin-top: 30px;

  }

  .left-content {

    padding-right: 0 !important;

  }

}

@media (max-width: 767px) {

  .service-block {

      padding: 40px 0;

  }

}

.privacy-content-inner li{

  margin-left: 30px;

  list-style: disc;

  font-size: 16px;

}

.privacy-content-inner p{

  font-size: 16px;

}

.login-inner, .forgot-inner {

    width: 40%;

    margin: 0 auto;

    padding: 30px;

    border: 1px solid #eee;

    background: #fff;

}

.col-form-label {

    text-align: left;

    font-weight: 500;

}

legend {

    font-size: 25px;

    line-height: 28px;

    padding: 0px 0px 9px;

    font-weight: 500;

    margin-bottom: 15px;

    border-bottom: 1px solid #e5e5e5;

    letter-spacing: 0;

}

.float-start {

    float: left !important;

}

.float-end {

    float: right !important;

}

.registration-block{

  margin-top: 70px;

}

@media (max-width: 1199px) {

  .login-inner, .forgot-inner {

      width: 70%;

  }

}

@media (max-width: 991px) {

  .login-inner, .forgot-inner {

      width: 100%;

  }

}

#column-left .list-group a.list-group-item.active {

    color: var(--brand-primary);

    background-color: #e7e7e7;

    border-color: #e7e7e7;

}

#column-left .list-group a.list-group-item {

    padding: 15px;

    color: var(--brand-primary);

    border-radius: 0;

}

#account-account .a-link-list {

    border: 1px solid #e9e9e9;

    margin-bottom: 20px;

}

#account-account .a-link-list .a-link-heading {

    background-color: #f5f5f5;

    margin-bottom: 6px;

    padding: 7px 15px;

}

#account-account .a-link-list .a-link-heading h2 {

    margin: 0;

    font-size: 16px;

    font-weight: 500;

    color: var(--brand-primary);

    line-height: 38px;

}

#account-account .a-link-list .a-link-content {

    padding: 15px 10px;

    font-size: 14px;

    color: #777777;

    line-height: 24px;

    background: #fff;

    text-align: center;

}

#account-account .a-link-list .a-link-content ul {

    margin: 0;

    padding: 0;

}

#account-account .a-link-list .a-link-content ul li a {

    color: #777777;

    line-height: 19px;

    display: block;

}

#account-account .a-link-list .a-link-content ul li i {

    display: block;

    color: var(--brand-primary);

    font-size: 30px;

}

@media (min-width: 768px) {

    .row-cols-md-2 > * {

        flex: 0 0 auto;

        width: 50%;

    }

}

.form-floating>label {

    position: absolute;

    top: 0;

    left: 15px;

    height: 100%;

    font-size: 14px;

    line-height: 20px;

    font-weight: 400;

    padding: 12px;

    text-align: left;

    color: #444444;

    text-overflow: ellipsis;

    white-space: nowrap;

    pointer-events: none;

    border: 1px solid transparent;

    -webkit-transform-origin: 0 0;

    transform-origin: 0 0;

    -webkit-transition: opacity .1s ease-in-out, -webkit-transform .1s ease-in-out;

    transition: opacity .1s ease-in-out, -webkit-transform .1s ease-in-out;

    transition: opacity .1s ease-in-out, transform .1s ease-in-out;

}

.form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label, .form-floating > .form-select ~ label {

    opacity: 0.65;

    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);

}

.form-floating > .form-control {

    height: 46px;

}

div.required .col-form-label:before, div.required .form-label:before {

    content: "* ";

    color: #F00;

    font-weight: bold;

}

.form-floating > .form-select {

    padding-top: 1.625rem;

    padding-bottom: 0.625rem;

}

.form-select:focus, select  {

    box-shadow: none;

    border-color: #ced4da;

}

.form-select {

    display: block;

    width: 100%;

    padding: 0.35rem 2.25rem 0.35rem 0.75rem;

    font-size: 1rem;

    font-weight: 400;

    line-height: 1.8;

    color: #212529;

    background-color: #fff;

    background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e);

    background-repeat: no-repeat;

    background-position: right 0.75rem center;

    background-size: 16px 12px;

    border: 1px solid #ced4da;

    border-radius: 0.25rem;

    appearance: none;

}

.registration-inner-block{

    width: 50%;

    margin: 0 auto;

    padding: 20px 20px;

    border: 1px solid #eee;

}

.event-block{

  margin-top: 70px;

}

.border{

  border-bottom: 1px solid #666;

}

.cart-total-table{

  width: 30%;

  float: right;

}

.textarea{

  width:100%;

  height: 150px;

}

.cart-img{

  display: inline-block;

  width: 50px;

  height: 50px;

  fill: var(--brand-primary);

}

.cart-content, #_desktop_seach_widget, .user-info{

  position: relative;
    display: inline-block;
    vertical-align:middle;
}

.cart-product-count{

    width: 15px;

    height: 15px;

    color: #fff;

    background: var(--brand-primary);

    border-radius: 100px;

    text-align: center;

    font-size: 12px;

    line-height: 14px;

    position: absolute;

    right: 10px;

    top: 0;

}

.a-link-content ul li {

  margin-right: 20px;

}



.find-inner form{

  padding: 20px;

  border: 1px solid #eee;

}

.location-block {

    border: 1px solid #000;

    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

    height: 600px;

    overflow: scroll;

}

.location-block .email-box,.location-block .store-box, .location-block .address-box, .location-block .phone-box, .location-block .catering-box, .location-block .fundraising-box, .location-block .social-block {

    display: flex;

    align-items: center;

}

.location-block p {

    margin-bottom: 0;

    color: #000;

}

.location-block .menu-list-item-inner {

    border-bottom: 1px solid #000;

    padding: 10px 10px;

}

.info-title{

  padding: 0 10px;

}

.state-choose-block label {

    color: #fff;

    display: block;

    font-size: 18px;

    font-family: var(--primary-font);

}

.state-choose-block input {

    width: 100%;

    padding: 5px 10px;

    color: #000;

    border: 1px solid #000;

}

.state-choose-block {

    margin-bottom: 10px;

    position: sticky;

    top: 0;

    z-index: 11111;

    z-index: 8;

    background: var(--brand-secondary);

    padding: 10px 10px;

}

@media (max-width: 1199px) {

  .registration-inner-block {

      width: 100%;

  }

}

@media (max-width: 991px) {

  .find-inner form{

    margin-bottom: 30px;

  }

}

@media (max-width: 767px) {

  #form-shipping-address .row{

    display: block;

  }

  .width-100 {

      width: 100%;

      float: none;

      max-width: 100%;

  }

  .display-block{

    display: block;

    overflow: hidden;

  }

  .other-colunmleft{

    margin-bottom: 30px;

  }

  .registration-block .row, .forgot-block .row, .cart-block .row{

    display: block;

  }



}

@media (max-width: 575px) {

  #account-account .a-link-list .a-link-content ul{

    display: block;

  }

  #account-account .a-link-list .a-link-content ul li{

    margin-bottom: 30px;

  }

}

.single-banner-item .banner-content {

    

    text-align: center;

    background: rgba(0, 0, 0, .5);

    padding: 20px 20px;

}





.single-banner-item .banner-image a img {

    width: 100%;

    -webkit-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);

    transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);

}

.single-banner-item .banner-content .title {

    font-size: 28px;

    line-height: 32px;

    font-weight: 700;

    margin-bottom: 0;

}

.single-banner-item .banner-content.color-white .title {

    color: #ffffff;

}

.single-banner-item .banner-content.color-white a {

    color: #ffffff;

}

.single-banner-item .banner-image {

    position: relative;

    overflow: hidden;

}

.single-banner-item:hover .banner-image a img {

    -webkit-transform: scale(1.1);

    transform: scale(1.1);

}



.call-details-block{

  display: flex;

  align-items: center;

}

.call-location {

    margin-right: 10px;

    color: #fff;

}

.call-details-block a{

  color: #fff;

  font-size: 16px;

}

/*About*/



.about-con .about-leftimage {

    position: absolute;

    left: 0;

    top: 162px;

}

.about-con .about-rightimage {

    position: absolute;

    right: 0;

    bottom: 190px;

}

.about-con .about_wrapper .about-image1 {

    margin-bottom: 36px;

}

.about-con .about_wrapper ul {

    display: flex;

    justify-content: space-between;

}

.about-con .about_wrapper ul li {

    padding-right: 30px;

    display: inline-block;

    border-right: 1px solid rgb(255 255 255 / 13%);

}

.about-con .about_wrapper ul li:last-child {

    padding-right: 0;

    border-right: none;

}

.about-con .about_wrapper span {

    color: #fff;

}

.about-con .about_wrapper .value {

    margin-bottom: 8px;

    color: #fff;

}

.about-con .about_wrapper .value span {

    font-size: 46px;

    line-height: 46px;

    font-weight: 700;

}

.about-con .about_wrapper .expression {

    color: var(--e-global-color-accent);

}

.about-con .about_wrapper .text {

    font-size: 16px;

    line-height: 16px;

    font-weight: 400;

}

.about-con .about_content {

    padding-left: 50px;

}

.about-con .about_content .content {

    margin-bottom: 85px;

}



.about-con .about_content h6{

    margin-bottom: 14px;

    font-size: 14px;

    line-height: 20px;

    font-weight: 400;

    text-transform: uppercase;

    letter-spacing: 2.8px;

}

.text-size-18 {

    font-size: 18px;

    line-height: 26px;

    font-weight: 400;

    color: #494949;

}

.about-con .about_content h2{

    margin-bottom: 30px;

}

.about-con .about_content .text{

    margin-bottom: 36px;

}

.about-con .about_content .primary_btn {

    padding: 20px 44px;

}

.about-con .about_content .primary_btn:hover {

    color: var(--e-global-color-very-dark-cyan);

    background-color: var(--e-global-color-white);

}

.about-con .about_content .about-image2 {

    position: relative;

    top: 0;

    left: 0;

    background-color: var(--e-global-color-black);

}

.about-con .about_content .about-image2 img {

    width: 100%;

    opacity: 80%;

}

.about-con .about_content .icon {

    height: 102px;

    width: 102px;

    line-height: 102px;

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;

    margin: auto;

    position: absolute;

    text-align: center;

    border-radius: 100%;

    transition: all 0.8s ease-in-out;

    border: 1px solid rgba(255, 255, 255, 60%);

}

.about-con .about_content .icon:hover {

    transform: translateY(-5px);

}

.about-con .about_content .icon .video-icon {

    height: 83px;

    width: 83px;

    line-height: 83px;

    top: 9px;

    left: -1px;

    right: 0;

    margin: 0 auto;

    position: relative;

    text-align: center;

    border-radius: 100%;

    transition: all 0.8s ease-in-out;

    background: var(--e-global-color-white);

}



/*Category*/



.categories-con .categories_content h6 {

    margin-bottom: 16px;

}

.categories-con .categories_content h2 {

    margin-bottom: 52px;

}

.categories-con .categories-box {

    position: relative;

    text-align: center;

    transition: all 0.8s ease-in-out;

}

.categories-con .categories-box .image {

    margin-bottom: 32px;

}

.categories-con .categories-box figure { 

    width: 255px;

    height: 255px;

    margin: 0 auto;

    border-radius: 100%;

    overflow: hidden;

    background-color: var(--brand-secondary);

}

.categories-con .categories-box figure img {

    border-radius: 100%;

    transition: all 0.8s ease-in-out;

}

.categories-con .categories-box:hover figure img {

    opacity: 55%;

    transform: scale(1.1);

}

.categories-con .categories-box .image i{

    font-size: 16px;

    height: 52px;

    width: 52px;

    line-height: 52px;

    text-align: center;

    border-radius: 100%;

    color: var(--light-color);

    background-color: var(--brand-secondary);

    transition: all 0.8s ease-in-out;

    position: absolute;

    left: 0;

    right: 0;

    top: 0;

    bottom: 0;

    margin: auto;

    display: none;

}

.categories-con .categories-box:hover i{

    display: block;

}



.categories-con h4 {

    font-size: 20px;

    line-height: 26px;

    font-weight: 600;

    color: var(--brand-primary);

}



/*Offer*/

.offer-con::before {

    content: "";

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    position: absolute;

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    background-image: url(../images/offer-backgroundimage.jpg);

    background-color: #000;

    opacity: 0.5;

}

.offer-con  {

    padding: 135px 0;

}

.offer-con .offer_content h6 {

    margin-bottom: 16px;

}

.offer-con .offer_content h2 {

    font-size: 80px;

    line-height: 82px;

    margin-bottom: 20px;

}

.offer-con .offer_content p {

    font-size: 26px;

    line-height: 26px;

    margin-bottom: 40px;

    color: var(--brand-primary);

}

.offer-con .offer_content p span {

    color: var(--brand-primary);

}

.offer-con .offer_content .primary_btn {

    padding: 20px 48px;

}

.offer-con .offer_wrapper .box {

    position: relative;

    display: inline-block;

    transition: all 0.8s ease-in-out;

}

.offer-con .offer_wrapper .box .dot {

    right: -50px;

    top: 0;

    bottom: 0;

    margin: auto 0;

    position: absolute;

    cursor: pointer;

    transition: all 0.8s ease-in-out;

}

.offer-con .offer_wrapper .popup-box {

    width: 235px;

    padding: 10px 20px;

    position: relative;

    background-color: var(--light-color);

    transition: all 0.8s ease-in-out;

    opacity: 0;

    visibility: hidden;

}

.offer-con .offer_wrapper .popup-box::after {

    content: '';

    height: 20px;

    width: 20px;

    right: -10px;

    top: 0;

    bottom: 0;

    margin: auto 0;

    position: absolute;

    transform: rotate(45deg);

    background-color: var(--light-color);

}

.offer-con .offer_wrapper .box .dot:hover + .offer-con .offer_wrapper .popup-box {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}

.offer-con .offer_wrapper .box h3 {

    margin-bottom: 8px;

}

.offer-con .offer_wrapper .box p {

    margin-bottom: 10px;

}

.offer-con .offer_wrapper .box .price1 {

    font-size: 18px;

    line-height: 18px;

    font-weight: 700;

    color: var(--e-global-color-accent);

}

.offer-con  h6 {

    margin-bottom: 14px;

    font-size: 14px;

    line-height: 20px;

    font-weight: 400;

    text-transform: uppercase;

    letter-spacing: 2.8px;

}



.location-area-inner {

  text-align: center;

}

.location-area-icon{

  margin-bottom: 30px;

}

.location-area-icon img{

    background: #fff;

    padding: 20px 20px;

    border-radius: 100px;

    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

}

.location-area-title{

    font-size: 30px;

    margin-bottom: 14px;

    color: #494949;

    font-weight: 600;

}

.location-area-address a{

  font-size: 18px;

}

.location-area .section-title{

  margin-bottom: 50px;

}

.call-details-block .dropdown {

  display: none;

}

.call-details-block.show .dropdown{

  display: block;

}

.call-inner-title{

  color: #000;

}

.call-details-block.mobile{

  position: relative;

  display: inline-block;

  background: #fff;

  color: #000;

  padding: 2px 15px;

  border-radius: 20px;

}

.call-details-block .dropdown {

    position: absolute;

    right: auto;

    left: 0;

    top: 40px;

    width: 300px;

    display: none;

    float: none;

    background-color: #232323;

    border: none;

    padding: 0;

    margin: 0;

    box-shadow: none;

    z-index: 2;

    padding: 10px;

}

.call-details-block.mobile{

    display: none;

  }

  .product-dimension-inner{

    display: flex;

    align-items: center;

    margin-bottom: 20px;

  }

  .product-dimension-link a{

    font-size: 20px;

  }

  .product-dimension-img img{

    width: 90px;

  }

  td, th {

  border: 1px solid #dddddd;

  text-align: left;

  padding: 8px;

}



tr:nth-child(even) {

  background-color: #dddddd;

}



.product-features .h6{

    font-size: 30px;

    margin-bottom: 20px;

}

.contact-us-area{

  margin-top: 70px;

}

.contact-us-area .content-wrapper{

    text-align: center;

    width: 100%;

}

.contact-us-area .location-area-address{

  margin-bottom: 20px;

}

.event-block .row{

  align-items: center;

}



.event-block  .event-title{

    font-size: 30px;

    font-weight: 600;

    margin-bottom: 20px;

}

.event-block .event-date{

  font-size: 20px;

  font-weight: 600;
  margin-bottom: 10px;

}

.event-block p{

  font-size: 17px;

}

.mb-30{

  margin-bottom: 30px;

}

.links .location-title{

    color: var(--brand-primary);

    font-size: 16px;

    font-weight: 600;

}

.terms-link a{

  color: var(--light-color);

}

.store-logo{

  margin: 0 auto;

  text-align: center;

}

.store-logo img{

  max-width: 50%;

  margin-bottom: 20px;

}

.bestseller-block .owl-nav .owl-prev,.bestseller-block .owl-nav .owl-next{

  position: absolute;

  left: -15px;

  top: 40%;

}

.bestseller-block .owl-nav .owl-next{

  right: -15px;

  left: auto;

}

.services-block{

  text-align: center;

  background: #e7e7e7;

  padding: 70px 0;

}





.services-block .services-img{

  margin-bottom: 15px;

}

.services-block .services-title{

  font-size: 30px;

  color: #494949;

  line-height: 40px;

}

#bestseller-carousel .item{

  transition: all 250ms linear;

  margin-bottom: 10px;

}



.services-inner .services-img img{

  -webkit-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);

  transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);

}

.services-inner:hover .services-img img{

  

  -webkit-transform: scale(1.1);

  transform: scale(1.1);

}

.privacy-title{

  font-size: 25px;

  margin-bottom: 10px;

  font-weight: 600;

}

.privacy-block p{

  font-size: 16px;

}

.main-event-title {

  text-align: center;

  padding: 0px 0 70px; 

  font-size: 40px;

  line-height: 40px;

}

.main-event-icon{

    text-align: center;

}

.banner-category-block .row{

  align-items: center;

}

.banner-category-content{

  padding: 20% 20%;

  background: #b6a68c;

}

.banner-category-inner{

  padding: 0;

}

.banner-2 .banner-category-content{

  padding: 21% 20%;

  background: #bdb485;

}

.banner-3 .banner-category-content{

  padding: 28% 20%;

  background: #b6a68c;

}

.banner-4 .banner-category-content{

  padding: 21.8% 20%;

  background: #bdb485;

}

.banner-category-title{

    font-family: var(--secondary-font);

    font-size: 80px;

    color: #fff;

    line-height: 113px;

    text-align: center;

}

.category-banner-block .category-banner-inner {

  box-sizing: border-box;

  display: flex;

  flex-wrap: wrap;

}



.category-banner-block .category-banner-inner > div:nth-child(1) {

    flex: 1 0 60%;

    padding-right: 5px;

}

.category-banner-block .category-banner-inner > div:nth-child(2) {

    flex: 1 0 40%;

    padding-left: 5px;

}

.category-banner-block .category-banner-inner > div:nth-child(3) {

    flex: 1 0 40%;

    padding-right: 5px;

}

.category-banner-block .category-banner-inner > div:nth-child(4) {

    flex: 1 0 60%;

    padding-left: 5px;

}

.category-banner-block .category-banner-inner .category-banner {

    margin-bottom: 5px;

    position: relative;

}

.category-banner-block .category-banner-inner .category-banner a span {

    position: absolute;

    bottom: 4px;

    font-family: "Times New Roman", Times, serif;

    color: #e1e1e1;

    text-decoration: none;

    display: block;

    left: 0;

    right: 0;

    background: rgba(0, 0, 0, 0.4);

    text-align: center;

    font-size: 20px;

    text-transform: uppercase;

    padding: 10px 0 7px 0;

}

.home-box-hover {

    display: none;

    position: absolute;

    left: 0;

    right: 0;

    top: 0;

    bottom: 0;

    background: rgba(0, 0, 0, 0.6);

    text-align: center;

    margin-bottom: 5px;

}

.category-banner:hover .home-box-hover {

    display: block;

}

.hover-content {

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

    transform: translate(0, -50%);

    max-width: 650px;

    margin: 0 auto;

    position: relative;

    top: 50%;

}



.hover-content h3{

  font-size: 40px;

  font-family: var(--secondary-font);

  color: #fff;

  margin-bottom: 20px;

}

.category-banner:hover a span{

  display: none !important;

}

.services-img img{

  width: 100px;

}

@media (max-width: 1350px) {

  #slider .slider-content .slider-title{

    font-size: 35px;

    line-height: 50px;

  }  

}

@media (max-width: 1220px) {

  .call-details-block a {

      font-size: 14px;

  }

}

@media (max-width: 1199px) {

  .filter-column{

    width: 50%;

  }

  .filter-area.dropdown-menu{

    min-width: 40em;

  }

  .location-area-title{

    font-size: 23px;

  }

  .location-area-address a {

    font-size: 15px;

  }

  footer h2 {

    font-size: 14px;

  }

  footer a {

    font-size: 12px;

  }

  .footerafter .footer-after-text{

    display: block;

  }

  .terms-link {

    padding-left: 0;

  }

  .services-block .services-title{

    font-size: 18px;

    line-height: 25px;

  }

  .categories-con .categories-box figure {

      width: 200px;

      height: 200px;

  }

  .offer-con .offer_content h2{

    font-size: 50px;

    line-height: 50px;

  }

  .about-con .about_content {

      padding-left: 0;

  }

  .single-banner-item .banner-content .title{

    font-size: 20px;

    line-height: 22px;

  }

  .single-banner-item .banner-content{

      padding: 10px 20px;

  }

}

@media (max-width: 1100px) {

  .call-details-block a {

      font-size: 13px;

  }

}

@media (max-width: 991px) {

  

  .product-features table{

    width: 100%;

  }

  #social-container {

    text-align: center;

  } 

  .location-area {

    padding: 50px 0;

  }

  .services-inner{

    margin-bottom: 30px;

  }

  .contact-us-area .content-wrapper{

    width: 100%;

  }

  .about-con .about_content .content {

      margin-bottom: 30px;

  }

  .call-details-block.desktop{

    display: none;

  }

  .call-details-block.mobile{

    display: inline-block;

  }

  .categories-con .categories-box {

    margin-bottom: 30px;

  }

  .location-area-inner{

    margin-bottom: 30px;

  }

}

@media (max-width: 767px) {

  .logo img {

      max-width: 100%;

  }

  .category-banner-block .category-banner-inner > div:nth-child(1) {

    flex: 1 0 100%;

    padding-right: 0px;

  }

  .category-banner-block .category-banner-inner > div:nth-child(2) {

    flex: 1 0 100%;

    padding-left: 0;

  }

  .category-banner-block .category-banner-inner > div:nth-child(3) {

    flex: 1 0 100%;

    padding-right: 0px;

  }

  .category-banner-block .category-banner-inner > div:nth-child(4) {

    flex: 1 0 100%;

    padding-left: 5px;

  }

  .filter-area.dropdown-menu {

        min-width: 32em;

    }

  .event-block .event-image{

    margin-bottom: 30px;

  }

  .about-con{

    padding: 50px 0;

  }

  #slider .slider-content .slider-title {

      font-size: 25px;

      line-height: 40px;

  }

}

@media (max-width: 575px) {

  .filter-column {

    width: 100%;

    min-height: auto;

  }

  .breadcrumb-container .breadcrumb .breadcrumb-title {

      font-size: 25px;

  }

  .breadcrumb-container{

    padding: 15% 0;

  }



  .filter-area.dropdown-menu {

        min-width: 20em;

    }

  .nav-tabs .nav-link {

    font-size: 15px;

  }

  .call-min-block, .nav-left{

    width: 50%;

  }

    .logo img {

      max-width: 80%;

    }

    .offer_content{

      text-align: center;

    }

    .offer-con {

        padding: 50px 0;

    }

    .offer-con .offer_content h2 {

      font-size: 35px;

      line-height: 35px;

    }

    #slider .slider-content .slider-title {

        font-size: 19px;

        line-height: 30px;

    }

    #slider .slider-content{

      padding: 10px;

    }

    .single-banner-item .banner-content .title {

        font-size: 20px;

        line-height: 25px;

    }

}

@media (max-width: 400px) {

    #slider .slider-content .slider-title {

        font-size: 14px;

        line-height: 20px;

    }

}

/* Button to open modal */





.open-modal-btn:hover {

  background-color: #555;

}



/* Modal Overlay (hidden by default) */

.modal-overlay {

  display: none;

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(0, 0, 0, 0.5);

  z-index: 1000;

  justify-content: center;

  align-items: center;

  opacity: 0;

  visibility: hidden;

  transition: opacity 0.3s ease, visibility 0.3s ease;

}



/* Modal Content */

.product-btn .btn-primary{

    background-color: #9b9b9b;

    border: 1px solid #9b9b9b;

}

.product-btn .btn-primary:hover{

    background-color: var(--brand-primary);

    border: 1px solid var(--brand-primary);

}

.modal-content {

  background-color: #fff;

  padding: 30px;

  border-radius: 10px;

  width: 700px;

  text-align: center;

  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

  transform: translateY(-30px);

  opacity: 0;

  transition: opacity 0.3s ease, transform 0.3s ease;

}



.modal-overlay.open {

  display: flex;

  opacity: 1;

  visibility: visible;

}



.modal-overlay.open .modal-content {

  opacity: 1;

  transform: translateY(0);

}



/* Close Button */

.close-modal-btn {

  margin-top: 20px;

  padding: 10px 20px;

  border-radius: 10px;

  background-color: #333;

  color: #fff;

  border: none;

  cursor: pointer;

  transition: background-color 0.3s ease;

}



.close-modal-btn:hover {

  background-color: #555;

}

.registration-block{

  margin-top: 70px;

}

.cart-block, .checkout-block{

  margin-top: 70px;

}

.login-block{

  margin-top: 70px;

}

.forgot-block,.privacy-block{

  margin-top: 70px;

}

#account-account{

  margin-top: 70px;

  margin-bottom: 70px;

}
.bestseller-block .item .product-img{
  margin: 0 auto;
}
.bestseller-block .item .product-img img{
    text-align: center;
    margin: 0 auto !important;
    max-height: 240px;
}    


.classic-header .header-top{
	background: #d5c2a3;
}
.classic-product-list .home-title{
        font-family: "Kanit", sans-serif;
}
.product-img{
	text-align:center;
} 
.logo img{
    max-width: 65%;
}
.product-offer-label{
  position: absolute;
  top: 35px;
  left: 8px;
  color: #fff;
  padding: 5px 12px;
  font-weight: bold;
  font-size: 16px;
  text-transform: uppercase;
}
.saletypebadge {
  padding: 5px 10px;
  background-color: #4e2a2a;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: bold;
  display: inline-block;
  border-radius: 5px;
  margin-bottom: 20px;
}