/*
Theme Name: AnLac
Theme URI: http://anlac.Zthemes.com/
Author: ZThemes
Author URI: https://anlac.vn/
Description: Đây là template dành cho Trung tâm chính trị phường An Lac!
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: two-columns, threaded-comments, sticky-post, left-sidebar, theme-options, custom-colors, featured-image-header, custom-background, custom-menu, post-formats, translation-ready 
Text Domain: anlac
11.06.26*/
/*=============================================================================================================*/
/*=== I. RESET CSS ============================================================================================*/
/*=============================================================================================================*/
:root {
     --zt-blue-color: #0368ff;
     --zt-darkblue-color: #2A3696;
     --zt-red-color: #ec3237;
     --zt-light-color: #ffffff;
     --zt-dark-color: #292C33;
     --zt-grey-color: #ededed;
     --zt-main-font-size: 16px;
     --zt-main-line-height: 1.4;
}

* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box
}

html {
     -webkit-font-smoothing: antialiased;
     -webkit-text-size-adjust: none
}

body {
     font-size: 14px;
     line-height: 24px;
     text-align: left;
     letter-spacing: 0;
     font-weight: 400;
     vertical-align: baseline;
     position: static;
     width: 100%;
     -webkit-text-size-adjust: none;
     -ms-text-size-adjust: none;
     -webkit-font-smoothing: antialiased;
     word-wrap: break-word;
     -ms-word-wrap: break-word;
     -webkit-text-size-adjust: none;
     background-image: none
}

#ca_custom_style {
     display: none;
}

/*=== DEFAULT & HEADING ===*/
#header .nav h1,
#header .nav h2,
#header .nav h3,
#header .nav h5,
#header .nav h4,
#header .nav h6 {
     text-transform: uppercase;
}

h1,
h2,
h3,
h4,
h5,
h6 {
     margin: 0;
}

h1 {
     font-size: 46px;
     line-height: 56px;
     font-weight: 600;
     padding-bottom: 20px;
}

h2 {
     font-size: 36px;
     line-height: 46px;
     font-weight: 600;
     padding-bottom: 20px;
}

h3 {
     font-size: 30px;
     line-height: 40px;
     font-weight: 600;
     padding-bottom: 20px;
}

h4 {
     font-size: 25px;
     line-height: 32px;
     font-weight: 600;
     padding-bottom: 15px;
}

h5 {
     font-size: 23px;
     line-height: 30px;
     font-weight: 400;
     padding-bottom: 15px;
}

h6 {
     font-size: 20px;
     line-height: 28px;
     font-weight: 400;
     padding-bottom: 15px;
}

.clear {
     clear: both;
     min-height: 0;
     width: 100%
}

.clearboth {
     clear: both
}

.clearleft {
     clear: left
}

.noimage {
     margin-left: 0
}

.alignleft {
     float: left !important;
     margin: 0 20px 20px 0 !important;
     max-width: 100%;
     height: auto
}

.alignright {
     float: right;
     margin: 0 0 20px 20px !important;
     max-width: 100%;
     height: auto
}

.aligncenter {
     display: block;
     margin: 0 auto 20px !important;
     max-width: 100%;
     height: auto
}

iframe {
     max-width: 100%;
     position: relative;
     z-index: 1;
     border: none
}

img {
     border: 0;
     height: auto;
     vertical-align: top;
     max-width: 100%;
     border-radius: 8px;
     -webkit-transition: all .5s ease-out;
     -moz-transition: all .5s ease-out;
     -ms-transition: all .5s ease-out;
     -o-transition: all .5s ease-out;
     transition: all .5s ease-out;
}

body.wp-singular article img {
     margin-bottom: 10px;
}

a {
     text-decoration: none;
     line-height: 18px;
     cursor: pointer;
     background: transparent;
     -webkit-transition: all .25s ease-out;
     -moz-transition: all .25s ease-out;
     -ms-transition: all .25s ease-out;
     -o-transition: all .25s ease-out;
     transition: all .25s ease-out;
}

a:hover {
     -webkit-tap-highlight-color: transparent;
     -moz-tap-highlight-color: transparent;
     -o-tap-highlight-color: transparent;
     text-decoration: none
}

a:focus {
     outline: 0 !important;
}

a.button:hover,
a.button:focus,
a:focus {
     text-decoration: none;
}

strong {
     font-weight: bold;
}

em {
     font-style: italic;
}

i {
     letter-spacing: 0.5px
}

del {
     text-decoration: line-through;
}

ins {
     text-decoration: none;
}

br {
     margin: 0 0 5px;
}

.mark,
mark {
     background-color: transparent;
}

pre {
     overflow: hidden;
     border-radius: 0;
     -webkit-border-radius: 0;
     -moz-border-radius: 0;
     -o-border-radius: 0;
}

p {
     margin: 0 0 20px;
     display: block
}

.wp-caption {
     margin-bottom: 20px
}

.wp-caption img {
     width: 100%
}

.wp-caption img.wp-smiley {
     width: auto
}

.wp-caption .wp-caption-text {
     margin-top: -15px;
     padding: 5px 10px;
     margin-bottom: 0;
     background: #F5F5F5;
     border: 1px solid #efefef;
     border-top: 0
}

.gallery-caption {
     max-width: 100%;
     font-style: italic
}

.bypostauthor {
     list-style: none
}

blockquote {
     font-size: 17.5px;
     line-height: 27px
}

blockquote cite {
     display: block;
     margin-top: 20px
}

.post-password-form input[type^=submit] {
     border: 1px solid #E6E6E6
}

#list-hook {
     color: #000
}

.color-white {
     color: #f5f5f5;
}

/*=== LIST & TABLE ===*/
ol,
ul {
     margin: 0;
     padding-left: 0;
     list-style: none;
     list-style-type: none
}

ol li,
ul li {
     line-height: 24px;
     list-style-position: inside;
     list-style: none;
     list-style-type: none
}

ol ol,
ol ul,
ul ul,
ul ol {
     margin-left: 35px;
     margin-top: 0
}

ol ol ol,
ul ul ul,
ul ul ol,
ul ol ul,
ol ul ul,
ul ol ol,
ol ol ul,
ol ul ol {
     margin-top: 0;
     margin-left: 35px
}

ol>li {
     list-style: circle inside none
}

ul>li {
     list-style: disc inside none
}

dl {
     margin-bottom: 20px
}

dt,
dd {
     line-height: var(--zt-main-font-size);
}

dt {
     font-weight: 700
}

dd {
     margin: 5px 0 20px 10px
}

table {
     border-collapse: collapse;
     border-spacing: 0;
     empty-cells: show;
     font-size: 100%;
     width: 100%;
     margin: 0 0 20px;
     word-wrap: break-word;
     border-collapse: separate;
     border-left: 1px solid #ebebeb;
     border-bottom: 1px solid #ebebeb
}

table>thead>tr>th {
     text-transform: uppercase;
     font-weight: 400;
     font-size: 14px;
     background: #f4f4f4;
     border-top: 1px solid #ebebeb;
     padding: 15px 15px 15px 20px
}

table>tbody>tr>td,
table>tbody>tr>th,
.table>tbody>tr>td,
.table>tbody>tr>th,
.table>tfoot>tr>td,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>thead>tr>th {
     border-top: 1px solid #ebebeb;
     border-right: 1px solid #ebebeb;
     padding: 15px 15px 15px 20px;
     border-bottom: 0
}

form {
     display: inline
}

input {
     line-height: var(--zt-main-font-size);
     max-width: 100%;
     box-shadow: none;
     -moz-box-shadow: none;
     -webkit-box-shadow: none;
     border-width: 0;
     font-weight: 400;
     vertical-align: middle
}

input,
button {
     transition: all .3s ease-in-out 0;
     -moz-transition: all .3s ease-in-out 0;
     -webkit-transition: all .3s ease-in-out 0
}

input:focus:invalid:focus,
textarea:focus:invalid:focus,
select:focus:invalid:focus {
     box-shadow: none;
     -webkit-box-shadow: none;
     -moz-box-shadow: none
}

input[type="color"],
input[type="date"],
input[type="email"],
input[type="url"],
input[type="number"],
input[type="password"],
input[type="tel"],
input[type="text"],
textarea {
     border-radius: 0;
     -webkit-border-radius: 0;
     -moz-border-radius: 0;
     -o-border-radius: 0;
     height: 40px;
     padding: 7px 10px;
     -webkit-appearance: none;
     border: 1px solid #e6e6e6
}

select {
     width: 260px;
     height: 38px;
     line-height: 16px;
     font-size: 14px;
     border: 1px solid #E6E6E6;
     border-radius: 5px !important;
     -webkit-border-radius: 5px !important;
     -moz-border-radius: 5px !important;
     -o-border-radius: 5px !important;
     font-weight: 400;
     cursor: pointer;
     background-color: var(--zt-light-color);
     vertical-align: middle
}

select:focus {
     outline: none
}

input:focus,
input[type^="search"]:focus,
textarea:focus {
     outline: 0
}

input[type^="radio"],
input[type^="checkbox"] {
     border: 0;
     padding: 0;
     margin: -2px 20px 0 5px
}

textarea {
     font-size: 12px;
     padding: 5px 8px 4px;
     vertical-align: middle;
     -webkit-appearance: none;
     transition: all .3s ease-in-out 0;
     -moz-transition: all .3s ease-in-out 0;
     -webkit-transition: all .3s ease-in-out 0;
     background: var(--zt-light-color);
     border: 1px solid #e6e6e6
}

select option {
     padding: 0 3px
}

textarea {
     overflow: auto
}

table {
     max-width: 100%;
     table-layout: fixed
}

table tbody,
table tfood {
     max-width: 100%
}

label.label-radio {
     margin-bottom: 2px
}

button.button::-moz-focus-inner {
     padding: 0;
     border: 0
}

button.button {
     -webkit-border-fit: lines
}

button.button,
a.button {
     overflow: visible;
     width: auto;
     border: 0;
     padding: 0;
     margin: 0;
     background: transparent;
     cursor: pointer
}

.ie9 select,
html.ie9 input[type^="text"],
html.ie9 input[type^="email"],
html.ie9 input[type^="password"] {
     line-height: 22px
}

/*=== OTHERS ===*/
::-moz-selection {
     color: #fff;
     background: #765c22
}

::selection {
     color: var(--zt-light-color);
     background: #765c22
}

::-webkit-scrollbar {
     -webkit-appearance: none;
     width: 7px
}

::-webkit-scrollbar-thumb {
     border-radius: 4px;
     background-color: #32367D;
     -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5)
}

.screen-reader-text {
     display: none
}

a.thumbnail {
     max-width: 100%
}

.thumbnail {
     float: left;
     display: inline-block;
     border: 0;
     margin-bottom: 0;
     padding: 0;
     border-radius: 0;
     -webkit-border-radius: 0;
     -moz-border-radius: 0;
     -o-border-radius: 0;
     box-shadow: none;
     -webkit-box-shadow: none;
     -moz-box-shadow: none;
     -o-box-shadow: none;
     background: transparent
}

.no-items {
     margin-bottom: 30px;
     color: #df5e5e;
}

body code {
     clear: both;
     display: inline-block;
     margin: 10px 0 20px;
     padding: 5px 10px;
     letter-spacing: .1px;
     border-width: 0;
     font-size: 12px;
     line-height: 34px;
     word-wrap: break-word;
     word-break: break-all;
     white-space: normal;
     border-radius: 0;
     -webkit-border-radius: 0;
     -moz-border-radius: 0;
     -o-border-radius: 0;
     box-sizing: border-box;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     -o-box-sizing: border-box;
     transition: all 150ms ease-in-out 0;
     -moz-transition: all 150ms ease-in-out 0;
     -webkit-transition: all 150ms ease-in-out 0;
     background-color: #f7f7f7
}

body li code,
body p code {
     margin: 0;
     padding: 2px 4px;
     line-height: inherit
}

body table code {
     white-space: normal
}

.col-lg-1,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-md-1,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-sm-1,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-xs-1,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9 {
     padding-left: 15px;
     padding-right: 15px
}

.row {
     margin-right: -15px;
     margin-left: -15px
}

.gallery .gallery-item {
     float: left;
     border: 2px solid var(--zt-light-color);
     width: 33.33%
}

.gallery .gallery-item figcaption {
     display: none
}

.gallery .gallery-item img {
     width: 100%;
     max-width: 100%;
}

.gallery.gallery-columns-4 .gallery-item {
     width: 25%
}

.gallery.gallery-columns-5 .gallery-item {
     width: 20%
}



.show-mobile {
     display: none;
}

/*=============================================================================================================*/
/*=== II. LAYOUT CONTAINER ====================================================================================*/
/*=============================================================================================================*/
.container {
     max-width: 100%;
     -webkit-transition: -webkit-transform .5s;
     transition: transform .5s
}


/* ===== CONTAINER ===== */
.container {
     position: relative;
     max-width: 1100px;
     margin: 0 auto;

     /* border: 1px solid #f00;
            padding: 0 15px;
            border: 1px solid; */
}

/* ===== PAGE LAYOUT ===== */
.page-template {
     display: flex;
     flex-wrap: wrap;
     gap: 30px;
}

/* ===== MAIN CONTENT & SIDEBAR===== */
.main-content {
     flex: 1;
     min-width: 0;
}

.sidebar {
     width: 33.333%;
     /* 1/3 */
}


/* ===== LAYOUT STATES ===== */

/* full width */
.layout-full .main-content {
     width: 100%;
}

/* có sidebar */
/* .layout-left,
.layout-right {
     gap: 15px;
} */

/* sidebar LEFT */
.layout-left .sidebar {
     order: 1;
}

.layout-left .main-content {
     order: 2;
}

/* sidebar RIGHT */
.layout-right .main-content {
     order: 1;
}

.layout-right .sidebar {
     order: 2;
}

@media (max-width: 992px) {
     .page-template {
          flex-direction: column;
     }

     .sidebar {
          width: 100%;
     }

     .layout-left,
     .layout-right {
          gap: 30px;
     }
}

.sidebar {
     position: sticky;
     top: 20px;
     align-self: flex-start;
     margin-bottom: 20px;
}



#main-container-wrapper {
     z-index: 10;
     position: relative;
     width: 100%;
     padding-top: 30px;
}

#main-container-wrapper #container .main-content {
     position: relative;
     z-index: 1;
     margin-bottom: 20px;
     /* padding:150px 0 60px */
}

#main-container-wrapper #container .main-content footer.entry-footer {
     clear: both
}

#main-container-wrapper #container .sidebar {
     max-width: 260px;
}

#cata-template-wrapper {
     position: relative;
     overflow: hidden
}

.main-slideshow-wrapper {
     position: relative;
     z-index: 50
}


/* .body-wrapper {
    max-width: 1440px;
    margin: auto;
} */



/*=== COLUMNS ===*/
.cols-wrapper {
     overflow: hidden;
     margin: 0 -15px
}

.col {
     margin-bottom: 30px;
     float: left
}

.cols-4 .col {
     width: 22.6%
}

.cols-3 .col {
     width: 31.2%
}

.cols-2 .col {
     width: 48.4%
}

.cols-1 .col {
     width: 100%
}

.cols-5 .col {
     width: 17.44%
}

.cols-34 .col:first-child {
     width: 72.6%
}

.cols-34 .col:last-child {
     width: 24.2%
}

.cols-23 .col:first-child {
     width: 64.5%
}

.cols-23 .col:last-child {
     width: 32.3%
}

.cols-23 .col:last-child,
.cols-34 .col:last-child,
.cols-5 .col:nth-of-type(5n),
.cols-4 .col:nth-of-type(4n),
.cols-3 .col:nth-of-type(3n),
.cols-2 .col:nth-of-type(2n),
.cols-1 .col:nth-of-type(n) {
     clear: right;
     margin-right: 0
}

.cols-wrapper .col {
     float: left;
     position: relative;
     min-height: 1px;
     padding-right: 15px;
     padding-left: 15px;
     margin-bottom: 30px
}

.cols-wrapper.cols-1 .col {
     width: 100%
}

.cols-wrapper.cols-2 .col {
     width: 50%
}

.cols-wrapper.cols-3 .col {
     width: 33.33333333%
}

.cols-wrapper.cols-4 .col {
     width: 25%
}

.cols-wrapper.cols-5 .col {
     width: 20%
}

.cols-wrapper.cols-6 .col {
     width: 16.66666667%
}

@media only screen and (max-width: 768px) {
     .cols-wrapper.cols-1 .col {
          width: 100%
     }

     .cols-wrapper.cols-2 .col {
          width: 100%
     }

     .cols-wrapper.cols-3 .col {
          width: 100%
     }

     .cols-wrapper.cols-4 .col {
          width: 100%
     }

     .cols-wrapper.cols-5 .col {
          width: 100%
     }

     .cols-wrapper.cols-6 .col {
          width: 100%
     }
}

/*=== SETTINGS ===*/
button.button,
input.button,
a.button,
input[type^=submit] {
     position: relative;
     top: auto;
     right: auto;
     left: auto;
     bottom: auto;
     font-size: 14px;
     font-weight: 700;
     min-height: 40px;
     line-height: 35px;
     border-radius: 0;
     -webkit-border-radius: 0;
     -moz-border-radius: 0;
     -o-border-radius: 0;
     box-shadow: none;
     -webkit-box-shadow: none;
     -moz-box-shadow: none;
     text-shadow: none;
     -moz-text-shadow: none;
     -webkit-text-shadow: none;
     background-image: none;
     border: none;
     text-transform: uppercase;
     display: inline-block;
     padding: 0 20px;
     -webkit-transition: all .4s ease-in-out;
     -moz-transition: all .4s ease-in-out;
     transition: all .4s ease-in-out;
     background-color: transparent
}

button.button,
input.button:hover,
a.button:hover,
input[type^=submit]:hover {
     color: var(--zt-light-color)
}

.ca-preloader {
     position: fixed;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     z-index: 9999;
     background: #32367D url(images/preloader_page.gif) center no-repeat;
     background-size: 60px;
}


#btn_loadmore {
     padding: 8px 15px;
     font-size: var(--zt-main-font-size);
     line-height: var(--zt-main-line-height);
     border-radius: 3px;
     cursor: pointer;
     transition: all 0.25s ease;
     display: block;
     margin: 60px auto 0;

     color: #0253CC;
     background: var(--zt-light-color);
     border: 1px solid #0253CC;

}

#btn_loadmore i {
     padding-left: 10px;
     font-size: 12px;
     transition: transform 0.25s ease;
}

#btn_loadmore:hover {
     background: #0253CC;
     color: var(--zt-light-color);
}

#btn_loadmore:hover i {
     transform: translateY(2px);
}

#btn_loadmore:active {
     transform: scale(0.97);
}

#btn_loadmore.loading {
     opacity: 0.7;
     pointer-events: none;
}

#btn_loadmore.loading i {
     animation: spin 1s linear infinite;
}

@keyframes spin {
     from {
          transform: rotate(0deg);
     }

     to {
          transform: rotate(360deg);
     }
}

/*============================================================================================*/
/*=== HEADER PAGE ============================================================================*/

/*=== HEADER GENERAL ===*/
#header {
     /* position: fixed; top:0; */
     z-index: 5000;
     width: 100%;
     box-sizing: border-box;
     -webkit-transition: all .3s ease;
     -moz-transition: all .3s ease;
     -ms-transition: all .3s ease;
     -o-transition: all .3s ease;
     transition: all .3s ease
}

.header .header-top {
     position: relative;
     background-color: var(--wp--preset--color--white);
     border-bottom: 1px solid #EDEDEE;
}

.header .header-logo .sticky-logo {
     display: none
}

/* Header V1 */
.header.v1 .header-logo {
     max-width: 280px;
     margin: 0;
     padding: 0;
}

.header.v1 .header-socials {
     float: right;
     padding: 0 15px;
}

.header.v1 .header-socials li {
     list-style: none;
     display: inline-block;
     padding-right: 12px;
}

.header.v1 .header-socials li a {
     transition: all .5s ease;
     -moz-transition: all .5s ease;
     -webkit-transition: all .5s ease;
     font-size: 17px;
     line-height: 25px;
}

.header.v1 .header-middle {
     clear: both
}

.header.v1 .header-logo a.main-logo {
     position: relative;
     z-index: 20;
     display: block;
     color: var(--zt-light-color);
     font-weight: normal;
}

.header.v1 .header-bottom {
     position: relative;
     height: 100px;
     -webkit-transition: all .5s ease;
     -moz-transition: all .5s ease;
     -ms-transition: all .5s ease;
     -o-transition: all .5s ease;
     transition: all .5s ease;
     background-color: #32367D;
}

.header.v1 .header-bottom-container {
     text-align: center;
     height: 100%;
     padding: 10px 0;
     display: flex;
     justify-content: left;
     align-items: center;
}



.header.v1 .header-search-socials {
     display: flex;
     width: calc(100% - 280px);
     justify-content: flex-end;
}



/*===============*/
.header-top-menu {
     display: flex;
     align-items: center;
     margin-right: -12px;
}

.header-tini-menu {
     display: flex;
     align-items: center;
     z-index: 20;
}

.header-top-menu>a,
.header-tini-menu>li>a {
     display: flex;
     align-items: center;
     padding: 0 12px;
     position: relative;
     color: var(--zt-light-color);
     font-size: 14px;
}

.header-tini-menu>li {
     display: flex;
     position: relative;
}

.header-top-menu i {
     margin-right: 6px;
     opacity: 0.9;
}

/* ===== SEPARATOR (ÁP DỤNG CHUNG) ===== */
.header-top-menu>a::after,
.header-tini-menu>li:not(:last-child)::after {
     content: "";
     position: absolute;
     right: 0;
     top: 50%;
     transform: translateY(-50%);
     width: 1px;
     height: 14px;
     background: rgba(255, 255, 255, 0.4);
}

.header-top-menu a:hover {
     opacity: 0.8;
     color: #f6f6f6 !important;
}




/*=== MAIN MENU ===*/
.nav-menu>ul>li {
     margin: 8px 12px;
}

.nav-menu ul li {
     position: relative;
     display: inline-block
}

/* Home Menu Icon */
.nav-menu ul li.navicon-home>a {
     text-indent: -9999px;
     margin-right: 10px;
     color: red !important;
}

.nav-menu ul li.navicon-home>a::before {
     content: "\f015";
     /* fa-home */
     font-family: "Font Awesome 5 Pro";
     font-weight: 300;
     /* light (mỏng) */

     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);

     text-indent: 0;
     font-size: var(--zt-main-font-size);
     color: inherit;
}

.nav-menu ul li a {
     display: block;
     padding: 2px 0;
     font-size: 14px;
}

/* ===== MENU BASE ===== */
.nav-menu .main-menu {
     display: flex;
     align-items: center;
     justify-content: center;
}


.nav-menu .main-menu>li>a {
     display: inline-block;
     position: relative;
     text-decoration: none;

     color: var(--zt-dark-color);
}

/* ===== LINE EFFECT ===== */
.nav-menu .main-menu>li>a::after {
     content: "";
     position: absolute;
     left: 50%;
     bottom: 0;
     width: 80%;
     height: 1px;

     transform: translateX(-50%) translateY(-6px);
     opacity: 0;

     transition: all 0.25s ease;
     background: #d6d6d6;
}

/* ===== HOVER, ACTIVE===== */
.nav-menu .main-menu>li:hover>a:hover {
     opacity: 0.7;
}

.nav-menu .main-menu>li:hover>a::after,
.nav-menu .main-menu>li.current-menu-item>a::after {
     transform: translateX(-50%) translateY(0);
     opacity: 1;
}


/* .nav-menu > ul > li > a::before {
    display: inline-block;
    content: '[';
    margin-right: 10px;
    opacity: 0;
    -webkit-transform: translateX(20px);
    -moz-transform: translateX(20px);
    transform: translateX(20px);
    -webkit-transition: -webkit-transform .3s, opacity .2s;
    -moz-transition: -moz-transform .3s, opacity .2s;
    transition: transform .3s, opacity .2s
}
.nav-menu > ul > li > a::after {
    display: inline-block;
    content: ']';
    top: 0!important;
    margin-left: 10px;
    opacity: 0;
    -moz-opacity: 0;
    -khtml-opacity: 0;
    -webkit-opacity: 0;
    -ms-filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    filter: alpha(opacity=0);
    -webkit-transform: translateX(-20px);
    -moz-transform: translateX(-20px);
    transform: translateX(-20px);
    -webkit-transition: -webkit-transform .3s, opacity .2s;
    -moz-transition: -moz-transform .3s, opacity .2s;
    transition: transform .3s, opacity .2s
}
.nav-menu ul li a:focus:after,
.nav-menu ul li a:focus:before,
.nav-menu ul li a:not(.active):hover:after,
.nav-menu ul li a:not(.active):hover:before,
.nav-menu ul li a.active:after,
.nav-menu ul li a.active:before {
    opacity: 1;
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    transform: translateX(0px)
} */

/* ===== MENU CÓ SUB ===== */
.nav-menu .main-menu>li.menu-item-has-children>a {
     position: relative;
     padding-right: 20px;
     /* chừa chỗ cho icon */
}

.nav-menu .main-menu>li.menu-item-has-children>a::before {
     content: "\f078";
     /* fa-chevron-down */
     font-family: "Font Awesome 5 Pro";
     font-weight: 300;

     position: absolute;
     right: 6px;
     top: 50%;
     transform: translateY(-50%);

     font-size: 10px;
     opacity: 0.8;

     transition: transform 0.25s ease, opacity 0.25s ease;
}

/* hover: xoay nhẹ cho đẹp */
.nav-menu .main-menu>li.menu-item-has-children:hover>a::before {
     transform: translateY(-50%) rotate(180deg);
     opacity: 1;
}

/* SUB MENU */
.nav-menu ul ul {
     padding: 0;
     z-index: 20000;
     margin-left: 0;
     padding-left: 0;
     display: none;
     opacity: 1 !important;
     position: absolute;
     width: 200px;
}

.nav-menu ul ul:before {
     position: absolute;
     left: 0;
     right: 0;
     top: 0;
     bottom: 0;
     display: inline-block;
     content: "";
     z-index: -1;
     border: 1px solid rgba(70, 70, 70, 0.2)
}

.nav-menu ul ul ul {
     top: -2px;
     left: 200px
}

.nav-menu ul ul li {
     position: relative;
     display: block;
     width: 100%;
     text-align: left;
     border-bottom: 1px solid
}

.nav-menu ul ul li:hover {
     background: var(--zt-blue-color);
     /*done*/
}

.nav-menu ul ul li a {
     padding: 10px 10px 10px 20px;
     transition: padding-left 250ms ease-out
}

.nav-menu ul ul li a:hover {
     padding-left: 25px;
}

.nav-menu ul li:last-child a {
     border-right: 0
}

.fixed-header-scroll .nav-menu ul ul ul {
     margin-top: 0
}

.fixed-header-scroll .content-slider-wrapper {
     padding-top: 0 !important
}

.nav-menu>ul>li:not(.mega-menu-item) ul>li:first-child {
     border-top-width: 1px;
     border-top-style: solid
}

.nav-menu .sub-menu li:last-child {
     border-bottom: 0
}

/* MEGA MENU */
.nav-menu ul li.mega-menu-item {
     position: static
}

.nav-menu li.mega-menu-item ul ul {
     display: block;
     padding: 0
}

.nav-menu li.mega-menu-item>ul {
     width: auto;
     top: 52px;
     padding: 0 15px 20px
}

.nav-menu li.mega-menu-item>ul[class*="mega-columns"] {
     box-shadow: 0 2px 3px #D2D2D2;
     -webkit-box-shadow: 0 2px 3px #D2D2D2;
     -moz-box-shadow: 0 2px 3px #D2D2D2;
     border-top: 2px solid
}

.nav-menu li.mega-menu-item ul ul:before {
     border: none;
     box-shadow: none;
     -webkit-box-shadow: none;
     -moz-box-shadow: none
}

.nav-menu li.mega-menu-item>ul[class*="mega-columns"]:before {
     box-shadow: none
}

.nav-menu li.mega-menu-item>ul ul ul {
     padding: 0
}

.nav-menu li.mega-menu-item>ul ul {
     position: relative;
     left: 0;
     top: 0;
     border-top: none
}

.nav-menu li.mega-menu-item ul li {
     display: inline-block;
     width: 200px;
     background: none;
     padding: 3px 0;
     border-bottom: 1px solid
}

.nav-menu .mega-menu-item>ul>li {
     margin: 0;
     margin-left: 15px;
     margin-right: 15px
}

.nav-menu .mega-menu-item ul li a {
     padding: 4px 0
}

.nav-menu .mega-menu-item>ul>li>a {
     font-weight: 700;
     text-transform: uppercase
}

.nav-menu .mega-menu-item>ul>li>a:hover {
     padding: 4px 0
}

.nav-menu li.mega-menu-item ul ul a {
     font-weight: 400;
     letter-spacing: 1px;
     transition: padding-left 250ms ease-out
}

.nav-menu li.mega-menu-item ul ul .current-menu-item>a,
.nav-menu li.mega-menu-item>ul>ul>li:hover>a,
.nav-menu li.mega-menu-item ul ul a:hover {
     padding-left: 10px
}

.nav-menu>ul>li>a:after,
.nav-menu>div.menu-ul>ul>li>a:after {
     position: relative;
     /* top: 4px */
}

.header-layout-center .nav-menu ul ul {
     display: none;
     text-align: left
}

.header-layout-center .nav-menu li.mega-menu-item ul ul {
     display: block
}

.fixed-header-scroll .nav-menu li.mega-menu-item>ul {
     top: 30px
}

.mega-columns-2>li:nth-of-type(2n+1),
.mega-columns-3>li:nth-child(3n+1),
.mega-columns-4>li:nth-child(4n+1) {
     clear: left
}

.nav-menu li.mega-menu-item>ul>li {
     margin-top: 20px;
     text-align: left;
     border-bottom: 0;
     overflow: hidden
}

.nav-menu li.mega-menu-item>ul>li:first-child,
.nav-menu li.mega-menu-item>ul>li:first-child,
.nav-menu li.mega-menu-item>ul>li:last-child,
.nav-menu li.mega-menu-item>ul>li:last-child {
     border-bottom: 0
}

.nav-menu li.mega-menu-item ul li ul>li {
     display: block;
     float: none;
     overflow: hidden;
     width: 100%
}

/*=== PAGE TITLE & BREADCRUMBS ===*/
h1.heading-title.page-title {
     position: relative;
     font-size: 50px;
     line-height: 60px;
     font-weight: 600;
     text-align: center;
     text-transform: uppercase;
     letter-spacing: 2px;
     margin: 0 auto;
     padding: 0 10px;
     color: #C69B3C;
     width: 100%;
     max-width: 1200px
}

.cata-breadcrumbs {
     margin-top: 12px;
     padding: 5px 0;
     border-bottom: 3px solid #EDEDEE;
}

.cata-breadcrumb-items {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
}

.cata-breadcrumb-item {
     display: flex;
     align-items: center;
     position: relative;
}

.cata-breadcrumb-item a {
     display: inline-flex;
     align-items: center;
     color: var(--zt-dark-color);
}

.cata-breadcrumb-item a:hover {
     color: #000;
}

/* ===== Divider logic ===== */

.cata-breadcrumb-item:nth-child(1) {
     margin: 0 !important;
}

.cata-breadcrumb-item+.cata-breadcrumb-item {
     margin-left: 15px;
     padding-left: 15px;
}

.cata-breadcrumb-item:nth-child(n+2)::before {
     content: "\f105";
     /* fa-angle-right */
     font-family: "Font Awesome 5 Pro";
     font-weight: 300;
     position: absolute;
     left: 0;
     top: 50%;
     transform: translateY(-50%);
}

.cata-breadcrumb-last * {
     color: #0253CC !important;
}

/*---Slideshow top header---*/
.main-slideshow-wrapper img.home-img-bg-default {
     margin: 0
}


/*--- MARQUEE ---*/
marquee{
     border-bottom: 4px double #C3D0E0;
     padding: 10px 0 5px;
}
marquee ul{
     display: flex;
     align-items: center;
     gap: 80px;
}
marquee ul li{
     position: relative;
     display: inline-block;
     padding: 0 15px;
     list-style: none;
     cursor: pointer;
}
marquee ul li:before{
     content: '\25A0';
     color: #da251c;
     margin-right: 7px;
     font-size: 13px;
     position: absolute;
     left: 0;
     top: -2px;
}


/*============================================================================================*/
/*=== FOOTER PAGE ============================================================================*/
#footer {
     position: relative;
     clear: both;
     padding: 30px 0;
     background-color: #32367D;
}

.header-bottom::before,
.header-bottom::after,
#footer::before,
#footer::after {
     content: "";
     position: absolute;
     background: url(images/header_pattern.png) no-repeat top center;
     width: 301px;
     height: 300px;
}

.header-bottom::before,
#footer::before {
     top: 0;
     left: 0%;
}

.header-bottom::after,
#footer::after {
     bottom: 0;
     right: 0%;
     transform: rotateZ(180deg);
}



.footer-selectbox {
     color: var(--zt-blue-color);
}

.footer-selectbox:hover {
     border-color: #999;
}

.footer-selectbox:focus {
     outline: none;
     border-color: #666;
}



#footer .widget_title_wrapper {
     background: transparent
}

#footer h3.widget-title {
     text-transform: uppercase;
     font-size: var(--zt-main-font-size);
     padding-bottom: 15px;
     margin-bottom: 0
}

.footer-top .footer-col:last-child {
     display: flex;
     justify-content: flex-end;
}

#footer .footer-middle {
     position: relative;
     z-index: 10;
     padding-top: 40px;
     overflow: hidden;
}

#footer .footer-bottom {
     overflow: hidden;
     padding-top: 25px;
     padding-bottom: 25px;
     text-align: center;
     clear: both;

}

#footer .footer-middle .cata-link-logos {
     display: none;
}


#footer a,
#footer p,
#footer li,
#footer .widget-title,
#footer .wg-about-contact ul li span,
#footer a:hover,
#footer .widget_recent_entries a:hover {
     color: var(--zt-light-color);
}

#footer a:hover {
     opacity: 0.8;
     color: #f6f6f6;
}

#footer ul li {
     margin-bottom: 20px;
     list-style: none;
}

#footer-info ul li:last-child {
     margin-bottom: 0;
}

#footer .widget_recent_entries ul li {
     border-top: 1px solid #1E1E1E;
}

#footer .widget_recent_entries a {
     color: #c69b3c;
}


/* ===== FOOTER INFO LIST ===== */
.footer-info ul li {
     display: flex;
     align-items: flex-start;
}

/* ===== DROPDOWN WRAPPER ===== */
.cata-dropdown {
     position: relative;
     width: 260px;
     max-width: 100%;
     z-index: 20;
}

/* ===== TOGGLE ===== */
.cata-dropdown-toggle {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 10px 15px;
     border-radius: 4px;
     cursor: pointer;
     transition: all 0.2s ease;

     background: var(--zt-light-color);
     color: var(--zt-blue-color) !important;
}

.cata-dropdown-toggle:hover {
     background: #f5f5f5;
}

/* icon */
.cata-dropdown-toggle i {
     font-size: 20px;
     transition: transform 0.25s ease;
}

/* ===== MENU ===== */
.cata-dropdown-menu {
     position: absolute;
     top: 100%;
     left: 0;
     right: 0;
     background: var(--zt-light-color);
     border-radius: 6px;
     margin-top: 8px;
     padding: 6px 0;
     opacity: 0;
     visibility: hidden;
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
     transform: translateY(-10px) scale(0.98);

     transition:
          opacity 0.25s ease,
          transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
          visibility 0.25s;

     transform-origin: top;
}

#footer .cata-dropdown-menu {
     top: inherit;
     bottom: 50px;
}

/* ===== ACTIVE ===== */
.cata-dropdown.active .cata-dropdown-menu {
     opacity: 1;
     visibility: visible;
     transform: translateY(0) scale(1);
}

.cata-dropdown-menu li {
     margin-bottom: 5px !important;
}

.cata-dropdown-menu li a {
     display: block;
     padding: 8px 15px;
     text-align: left;
     color: var(--zt-dark-color) !important;
}

.cata-dropdown-menu li a:hover {
     padding-left: 20px;
}

/* ===== ACTIVE ===== */

.cata-dropdown-toggle i {
     transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.cata-dropdown.active .cata-dropdown-toggle i {
     transform: rotate(180deg);
}




/*=== WIDGETS IN FOOTER ===*/
/* Widget Text & Subscriptions */
#footer .textwidget ul.menu>li a,
#footer .widget_nav_menu ul.menu>li a {
     color: #888;
     font-size: 18px;
}

#footer .textwidget ul.menu>li a:hover,
#footer .widget_nav_menu ul.menu>li a:hover,
#footer .textwidget ul.menu>li.current_page_item>a,
#footer .widget_pages ul li.current_page_item>a,
#footer .widget_nav_menu ul li.current_page_item>a,
#footer .widget_categories li.current-cat>a {
     color: var(--zt-light-color);
}

#footer .widget_text p {
     margin-bottom: 15px
}

#footer .widget_text ul.menu {
     overflow: hidden;
     margin-left: 0
}

#footer .widget_text ul.menu>li {
     display: block;
     padding: 0;
     list-style-type: none;
     list-style: none
}


/* Widget AboutUs Contact */
.wg-about-contact ul li {
     list-style: none
}

.wg-about-contact p.logo {
     margin-top: -40px;
     margin-bottom: 15px
}

.right-sidebar .wg-about-contact p.logo,
.left-sidebar .wg-about-contact p.logo {
     margin-top: 0;
}

.wg-about-contact p.logo img {
     margin-top: 5px;
     margin-bottom: 10px
}

.wg-about-contact .widget_desc {
     margin-bottom: 20px
}

/*=== FIX FOOTER USE WIDGET PRODUCTS & POSTS ===*/
#footer .widget_recent_entries ul li {
     padding: 15px 0
}

#footer .widget_recent_entries ul li:first-child {
     padding-top: 0;
     margin: 0
}

#footer .widget_recent_entries ul li:last-child {
     border-bottom: none;
     padding-bottom: 0
}

#footer .widget_recent_entries .post-date {
     font-style: normal;
     color: #bfbfbf
}

#footer .widget_recent_entries ul li:first-child {
     border: none
}

#footer .wg-flickr a.see-more {
     color: #898989
}

body a.backtotop {
     position: fixed;
     bottom: 10px;
     right: 20px;
     z-index: 100;
     display: block;
     width: 40px;
     height: 40px;
     line-height: 40px;
     text-align: center;
     color: var(--zt-light-color);
     display: none;
     transition: opacity .3s 0s, visibility 0 0;
     -moz-transition: opacity .3s 0s, visibility 0 0;
     -webkit-transition: opacity .3s 0s, visibility 0 0
}

.backtotop:hover {
     opacity: 1;
     color: var(--zt-light-color);
     filter: alpha(opacity=100)
}


/*============================================================================================*/
/*=== POST ===================================================================================*/
/*=== BLOG LAYOUT - ARCHIVE ===*/
.ca-post-lists .posts-container {
     display: flex;
     flex-direction: column;
     gap: 15px;
}

.ca-post-lists .blog-item .item {
     display: flex;
     gap: 15px;
     padding-right: 15px;
     border-right: 1px solid #ededed;
}

.ca-post-lists .entry-header {
     flex: 0 0 340px;
}

.ca-post-lists .entry-thumbnail img {
     max-height: 220px;
}

.ca-post-lists .entry-content {
     flex: 1;
     display: flex;
     flex-direction: column;
}

.ca-post-lists .blog-item .entry-content .title {
     font-weight: 600;

     a {
          color: #1B1D22;
     }
}

.ca-post-lists .cata-blog-item-excerpt {
     display: -webkit-box;
     -webkit-line-clamp: 5;
     -webkit-box-orient: vertical;
     overflow: hidden;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
     .ca-post-lists .blog-item .item {
          flex-direction: column;
     }

     .ca-post-lists .entry-header {
          flex: none;
     }

     .ca-post-lists .entry-thumbnail img {
          max-height: inherit;
          aspect-ratio: 2 / 1;
     }
}



/*=== BLOG ITEM ===*/
.blog-item .item {
     overflow: hidden;
     width: 100%;
     border-width: 0;
     border-style: solid;
     border-color: #e6e6e6
}

.blog-item img {
     width: 100%;
     aspect-ratio: 4 / 3;
     object-fit: cover;
}

.blog-item img.avatar {
     position: absolute;
     top: 30px;
     right: -35px;
     z-index: 10;
     width: 70px;
     border-radius: 50%;
     -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
     -ms-border-radius: 50%;
     -o-border-radius: 50%;
     min-height: inherit;
     display: none;
}

.blog-item .entry-content .title {
     font-style: normal;
     font-weight: 400;
     font-size: 20px;
     line-height: 26px;
     padding-bottom: 5px;
     margin-top: 5px
}

.blog-item .entry-content .title a {
     color: #c69b3c;
}

.blog-item .item figure.entry-thumbnail {
     position: relative;
     overflow: hidden;
     border-radius: 8px;
}

.blog-item .item figure.entry-thumbnail:before {
     background: #94dfef
}

.blog-item .entry-content .excerpt p {
     margin: 0
}

.blog-item .entry-content .excerpt p>a.read-more,
.blog-item .wrap-entry-content a.read-more {
     display: block;
     margin-top: 15px;
}

.blog-item .entry-content .entry-meta {
     margin-bottom: 18px
}

.blog-item .entry-meta,
.blog-item .entry-meta li,
.entry-meta li a {
     font-style: italic;
     font-size: 13px;
     list-style: none;
     color: #bcbcbc;
}

.blog-item .entry-meta li.meta-seperate {
     padding: 0
}

.blog-item .entry-meta li.meta-seperate:before {
     content: '/'
}

.blog-item .entry-meta li.meta-author a {
     color: #888
}

.blog-item a.read-more {
     display: block;
     margin-top: 20px;
     color: #1a1a1a;
     display: none !important;
}

.blog-item a.read-more .more-arrow {
     padding-right: 8px
}

.blog-item a.read-more:hover .more-arrow {
     padding-right: 3px;
     float: left;
     -webkit-transition: all 300ms ease-in-out;
     -moz-transition: all 300ms ease-in-out;
     -ms-transition: all 300ms ease-in-out;
     -o-transition: all 300ms ease-in-out;
     transition: all 300ms ease-in-out
}

/*=============================*/
/*======== BLOG LAYOUT ========*/
.post-area {
     position: relative;
     margin-bottom: 20px;
}

.post-area .block-title {
     font-weight: 600;
     font-size: 14px;
     margin-bottom: 10px;
}

.post-area .post-item:last-child {
     padding-bottom: 0 !important;
     border-bottom: none !important;
}

.post-area .thumb img {
     display: block;
     object-fit: cover;

     transform: scale(1);
     -webkit-transition: all .5s ease-out;
     -moz-transition: all .5s ease-out;
     -ms-transition: all .5s ease-out;
     -o-transition: all .5s ease-out;
     transition: all .5s ease-out;
}

.post-area .post-item:hover img,
.post-area .blog-item:hover img {
     transform: scale(1.02);
}

.layout-featured .right-col .post-item:hover img,
.layout-style23 .left-col .post-item:hover img,
.layout-style1 .post-item.related-featured:hover img {
     transform: scale(1.01);
}

/*==========================*/
/* ===== THONGBAO GRID ===== */
.thongbao-grid {
     background-color: #fafafa;
     padding: 22px 10px 10px;
     border: 1px dashed #ededed;
     border-radius: 8px;
}

.thongbao-grid .block-title {
     position: absolute;
     top: -15px;
     padding: 2px 12px;
     border-radius: 5px;
     color: var(--zt-light-color);
     background: var(--zt-red-color);
}

.thongbao-grid .custom-posts {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 20px;
}

.thongbao-grid h6 {
     margin-top: 8px;
     font-size: var(--zt-main-font-size);
     line-height: var(--zt-main-line-height);
     font-weight: 600;
     padding-bottom: 0;
}

.thongbao-grid .thumb img {
     width: 100%;
     height: 160px;
}

.thongbao-grid h6 {
     color: #1B1D22;
}

/*==========================*/
/* ===== THONGBAO LIST ===== */
.thongbao-list {
     background: #eef5ff;
     padding: 10px;
     border-radius: 10px;
     border: 1px dashed #CDE1FF;
}

.thongbao-list .block-title {
     color: var(--zt-darkblue-color);
}

.thongbao-list .custom-posts {
     display: flex;
     flex-direction: column;
     gap: 15px;
}

.thongbao-list .post-item {
     background: var(--zt-light-color);
     border-radius: 8px;
     padding: 10px;
     font-size: 14px;
     line-height: 18px;
     border: 1px solid #e2ecf9;
}

.thongbao-list .post-item a:hover {
     font-weight: 600;
     color: #0253CC;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
     .thongbao-grid .custom-posts {
          grid-template-columns: repeat(2, 1fr);
     }
}

@media (max-width: 600px) {
     .thongbao-grid .custom-posts {
          grid-template-columns: 1fr;
     }
}

/*======================================*/
/* ===== FEATURED POST (HOME PAGE) ===== */
.layout-featured .custom-posts {
     display: flex;
     gap: 15px;
}

.layout-featured h6 {
     font-size: 20px;
     line-height: 26px;
     font-weight: 600;
     padding: 15px 0 5px;
     color: #1B1D22;
}

.layout-featured .left-col {
     flex: 1;
     display: flex;
     flex-direction: column;
     gap: 15px;
}

.layout-featured .right-col {
     display: flex;
     flex-direction: column;
     flex: 1.9;
     padding-left: 15px;
     border-left: 1px solid #ededed;

     padding-right: 15px;
     border-right: 1px solid #ededed;
}

/* equal hight */
.layout-featured .left-col,
.layout-featured .right-col {
     align-self: stretch;
}

.layout-featured .left-col .post-item:first-child {
     border-bottom: 1px solid #ededed;
     padding-bottom: 15px;
}

.layout-featured .left-col .thumb img {
     width: 100%;
     max-height: 160px;
     aspect-ratio: 4/3;
     object-fit: cover;
}

.layout-featured .left-col h6 {
     font-size: var(--zt-main-font-size);
     line-height: var(--zt-main-line-height);
}

.layout-featured .right-col .post-item {
     display: flex;
     flex-direction: column;
}

.layout-featured .right-col .thumb img {
     width: 100%;
     aspect-ratio: 16/9;
     object-fit: cover;
     border-radius: 8px;
}

.layout-featured .excerpt {
     margin-top: 0;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
}



/*==============================================*/
/*===== BLOG LAYOUT STYLE 1 (RELATED POST) =====*/
.layout-style1 .custom-posts {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 30px;
}

.layout-style1 .block-title {
     text-transform: uppercase;
     margin-bottom: 20px;
     color: var(--zt-darkblue-color);
}

.layout-style1 .custom-posts a,
.layout-style23 .custom-posts a {
     color: #1B1D22;
}


/* ========================== */
/* ===== LAYOUT STYLE 2 ===== */
.layout-style23 .custom-posts {
     display: flex;
     gap: 15px;
}

/* LEFT (BIG) */
.layout-style23 .left-col {
     flex: 2.4;
     padding-right: 15px;
     border-right: 1px solid #ededed;
}

/* RIGHT (SMALL LIST) */
.layout-style23 .right-col {
     flex: 1;
     display: flex;
     flex-direction: column;
     gap: 15px;
}

/* ===== BIG POST ===== */
.layout-style23 .big .thumb img {
     aspect-ratio: 16/9;
     border-radius: 10px;
}

.layout-style23 .big h6 {
     font-size: 20px;
     line-height: 26px;
     padding: 15px 0 5px;
     font-weight: 600;
}

.layout-style23 .big .excerpt {
     display: -webkit-box;
     -webkit-line-clamp: 5;
     -webkit-box-orient: vertical;
     overflow: hidden;
     margin: 0;
}

/* ===== SMALL POSTS ===== */
.layout-style23 .post-item {
     padding-bottom: 15px;
     border-bottom: 1px solid #eee;
}

.layout-style23 .small .thumb img {
     width: 100%;
     max-height: 160px;
     aspect-ratio: 4 / 3;
     object-fit: cover;
}

.layout-style23 .small h6 {
     font-size: var(--zt-main-font-size);
     line-height: var(--zt-main-line-height);
     font-weight: 600;
     padding: 15px 0 5px;
}

.layout-style23 .date {
     font-size: 12px;
     color: #999;
}

.layout-style23 .zlayout2 .post-item:not(:first-child) .thumb {
     display: none;
}

.layout-style23 .zlayout2 .post-item:not(:first-child) h6 {
     padding-top: 0;
}


/* ========================== */
/* ===== LAYOUT STYLE 3 ===== */

.layout-style23 .zlayout3 * {
     color: var(--zt-light-color);
}

.layout-style23 .zlayout3 .left-col {
     flex: 1;
}

.layout-style23 .zlayout3 .right-col {
     flex: 1;
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 30px;
     padding-left: 15px;
}

.layout-style23 .zlayout3 .small .thumb img {
     width: 100%;
     height: 160px;
}

.layout-style23 .zlayout3 .small h6 {
     padding-bottom: 0;
     display: -webkit-box;
     -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
     overflow: hidden;
}

.layout-style23 .zlayout3 .date {
     display: none;
}

.layout-style23 .zlayout3 .right-col .small:nth-last-child(-n+2) {
     border-bottom: none;
}

.layout-style23 .zlayout3 .right-col .small:nth-child(2n+1):nth-last-child(-n+2),
.layout-style23 .zlayout3 .right-col .small:nth-child(2n):nth-last-child(-n+2) {
     border-bottom: none;
}



@media (max-width: 768px) {

     .layout-featured .custom-posts {
          flex-direction: column-reverse;
     }

     .layout-featured .right-col {
          border: none;
          padding: 0;
          border-bottom: 3px solid #ededed;
          margin-bottom: 10px;
     }



     .layout-style1 .custom-posts {
          grid-template-columns: 1fr;
          border-left: none;
          padding-left: 0;
     }


     .layout-style23 .custom-posts {
          flex-direction: column;
     }

     .layout-style23 .zlayout2 .left-col,
     .layout-style23 .zlayout3 .left-col {
          border-right: none;
          padding-right: 0;
     }

     .layout-style23 .zlayout3 .right-col {
          grid-template-columns: 1fr;
          border-left: none;
          padding-left: 0;
     }

     .thongbao-grid .thumb img,
     .layout-featured .left-col .thumb img,
     .layout-style1 .related-featured .thumb img,
     .layout-style23 .zlayout3 .small .thumb img {
          height: inherit;
          max-height: inherit;
          aspect-ratio: 16 / 9;
     }

     .layout-style23 .zlayout2 .small .thumb img {
          display: none;
     }
}



/*=== BLOG TYPE and INFINITE SCROLL loading ===*/
.blog-item .post-default,
.blog-item .post-image {
     overflow: hidden
}

.blog-item .post-standard>a img,
.blog-item .post-default>a img,
.blog-item .post-image>a img {
     min-height: 240px;
     transition: all .5s ease;
     -moz-transition: all .5s ease;
     -webkit-transition: all .5s ease
}

.blog-item .post-standard>a:hover img,
.blog-item .post-default>a:hover img,
.blog-item .post-image>a:hover img {
     -webkit-transform: scale(1.1, 1.1);
     -moz-transform: scale(1.1, 1.1);
     -ms-transform: scale(1.1, 1.1);
     -o-transform: scale(1.1, 1.1);
     transform: scale(1.1, 1.1)
}



/*=== SINGLE POST ===*/
.single-post article.post .item .entry-header {
     position: relative
}

.single-post article.post .item .entry-header img {
     width: 100%;
}

.single-post article.post .item .entry-header img.avatar {
     position: absolute;
     bottom: -35px;
     left: 50%;
     margin-left: -35px;
     z-index: 10;
     width: 70px;
     border-radius: 50%;
     -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
     -ms-border-radius: 50%;
     -o-border-radius: 50%
}

.single-post article.post .item .entry-header .post-format {
     position: relative;
     overflow: inherit
}

body.single article .item .entry-header .single-top-meta p,
.date-post {
     margin: 0;
     color: #696D77;
     font-size: 14px;
}

body.single article .item .entry-header .single-top-meta p i, .date-post i {
     display: inline-block;
     padding-right: 7px;
}

.single-post article.post .item .entry-header .single-top-meta .title {
     font-size: 32px;
     line-height: 40px;
     padding-bottom: 10px;
}

.single-post article.post .item .entry-meta,
.single-post article.post .item .entry-meta li,
.single-post article.post .item .entry-meta li a {
     font-style: italic;
     font-size: 13px;
     color: #bcbcbc
}

.single-post article.post .item .entry-meta li.meta-seperate {
     padding: 0
}

.single-post article.post .item .entry-meta li.meta-seperate:before {
     content: '/'
}

.single-post article.post .item .entry-meta li.meta-author a {
     color: #888
}

.single-post article.post .item .entry-content {
     margin-top: 20px
}

.single-post article.post .item .entry-content .meta-tags {
     margin: 30px 0 0
}

.single-post article.post .item .entry-content .gallery {
     overflow: hidden;
     margin-bottom: 20px
}

.single-post article.post .item .entry-content .wp-video {
     margin: 0 auto 20px
}

.single-post article.post .item .meta-tags span {
     font-weight: 700
}

.single-post article.post .item .meta-tags a {
     color: #898989
}

.single-post .author-info {
     position: relative;
     padding: 20px;
     border: 1px solid;
     border-bottom-width: 2px;
     margin-top: 40px;
     border-color: #E6E6E6
}

.author-description {
     padding-top: 5px
}

.single-post .author-info .author-title {
     text-transform: uppercase;
     font-size: 14px;
     font-weight: 400;
     padding-bottom: 5px
}

.single-post .author-info .avatar {
     float: left;
     width: 120px;
     height: 120px;
     margin: 0 1.6842em 1.6842em 0
}

.author-socials li {
     display: inline-block;
     margin: -5px 10px 0 -10px;
     list-style-type: none;
     text-align: center;
     -webkit-transition: all 300ms ease;
     -moz-transition: all 300ms ease;
     transition: all 300ms ease
}

.author-socials li a {
     display: block;
     width: 30px;
     height: 30px;
     vertical-align: middle;
     padding-top: 5px
}

.author-socials li a:hover {
     -webkit-transition: all 300ms ease;
     -moz-transition: all 300ms ease;
     transition: all 300ms ease
}

.single-attachment article.attachment.type-attachment .entry-header>p {
     text-align: center
}


.single-hoatdong_lienket .blog-item {
     padding: 30px 30px 15px;
     width: 50%;
     text-align: center;
     margin: 0 auto 30px;
     background: #eee;
     border: 1px solid #ededed;
}

.single-hoatdong_lienket .blog-item img {
     width: auto;
     aspect-ratio: auto;
}


/*Post With No-Thumb*/
.single-post article.post .item.no-thumb .entry-header img.avatar {
     position: relative;
     bottom: inherit;
     left: inherit;
     margin: 0 auto -45px;
     display: block;
}


/*=== RELETED POST ===*/
.related-posts {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 30px;
     position: relative;
     /* z-index: -1;     */
}

.related-posts a {
     color: #1B1D22;
}

.wrap-related-title {
     border-top: 2px solid #eee;
     padding: 20px 0;
}

.wrap-related-title .block-title {
     font-size: 14px;
     line-height: 24px;
     text-transform: uppercase;
     padding: 0;
     color: var(--zt-darkblue-color);
}

.wrap-related-title .ca-viewall a {
     display: none;
}

.related-featured img {
     width: 100%;
     display: block;
     aspect-ratio: 4 / 3;
    object-fit: cover;
}

.featured-title {
     font-size: 20px;
     line-height: 26px;
     padding: 15px 0 5px;
}


/* RIGHT LIST */
.related-list {
     display: flex;
     flex-direction: column;
     gap: 20px;
}

.related-list .post-item {
     display: flex;
     flex: 1 0 auto;
     gap: 15px;
     align-items: stretch;
     justify-content: space-between;
     padding-bottom: 15px;
     border-bottom: 1px solid #eee;
}

.related-list .post-item:last-child {
     border: 0
}

.related-list .post-item>a {
     max-width: 160px;
}

.related-list .post-item>a img {
     width: 100%;
     object-fit: cover;
     border-radius: 6px;
     min-width: 160px;
}

.related-content h6 {
     font-size: var(--zt-main-font-size);
     line-height: var(--zt-main-line-height);
     font-weight: 600;
     padding-bottom: 0px;
}

.related-content .date {
     font-size: 12px;
     color: #999;
}

.wp-singular.page .related-posts{
     margin-bottom: 30px;
}



/*=== COMMENT LIST ===*/
#comments {
     margin-top: 95px
}

#comments .comments-title {
     text-transform: uppercase;
     padding-bottom: 35px
}

ol.commentlist {
     position: relative;
     list-style: none;
     padding: 0;
     text-indent: 0
}

ol.commentlist li {
     list-style: none
}

#comments ol.commentlist li #respond {
     margin: 30px 0
}

ol.commentlist li.comment article {
     overflow: hidden;
     margin-bottom: 20px
}

ol.commentlist li.comment div.comment-author {
     float: left;
     display: inline-block;
     vertical-align: top;
     min-width: 70px
}

ol.commentlist li.comment div.comment-author>h6 {
     font-size: 0;
     padding: 0
}

ol.commentlist li.comment div.wrap-comment-info {
     position: relative;
     margin-left: 100px;
     padding: 25px 20px;
     border-width: 1px;
     border-style: solid;
     border-color: #f5f5f5
}

ol.commentlist li.comment div.wrap-comment-info:before {
     content: "";
     position: absolute;
     top: 25px;
     left: -20px;
     z-index: 10;
     width: 20px;
     border-bottom: 10px solid transparent;
     border-top: 10px solid transparent;
     border-right: 10px solid #f5f5f5
}

ol.commentlist li.comment div.wrap-comment-info .comment-metadata {
     margin-bottom: 15px
}

ol.commentlist li.comment .meta-datetime {
     font-size: 14px;
     padding-right: 5px;
     color: #9e9e9e
}

ol.commentlist li.comment .comment-edit-link {
     float: right;
     font-size: 14px;
     border-bottom: 1px solid
}

ol.commentlist li.comment div.wrap-comment-info cite.fn {
     margin-right: 20px
}

ol.commentlist li.comment div.wrap-comment-info cite.fn,
ol.commentlist li.comment div.wrap-comment-info cite.fn a.url {
     font-size: 14px;
     font-style: normal;
     font-weight: 700;
     text-transform: uppercase
}

ol.commentlist li.comment div.vcard img.avatar {
     border-radius: 50%;
     width: 70px
}

ol.commentlist li.comment ul,
ol.commentlist li.comment ol {
     margin-left: 20px
}

#comments ol.commentlist li.comment ul li {
     list-style: square inside none
}

#comments ol.commentlist li.comment ol li {
     list-style: circle inside none
}

#comments ol.commentlist li.comment img,
#comments ol.commentlist li.comment p:last-child {
     margin: 0
}

#comments ol.commentlist li.comment p {
     margin-bottom: 10px
}

#comments ol.commentlist li.comment p.comment-awaiting-moderation {
     display: inline-block;
     padding: 0 10px;
     border-width: 1px;
     border-style: dashed
}

#comments ol.commentlist li.comment code {
     margin: 0;
     padding: 0 10px;
     line-height: 20px
}

#comments ol.commentlist li.comment strong {
     font-weight: 700
}

/* - (p, em, strong, blockquote, ul, ol, etc.)*/
ol.commentlist li.comment div.reply {
     clear: both;
     display: inline-block;
     margin-top: 30px;
     font-size: 12px
}

ol.commentlist li.comment div.reply a {
     text-transform: uppercase;
     padding: 5px 15px;
     border-width: 1px;
     border-style: solid
}

ol.commentlist li.comment ul.children {
     list-style: none;
     margin: 1em 0 0;
     text-indent: 0
}

#comments ol.commentlist li.comment ul.children li {
     list-style: none
}

ol.commentlist li.comment ul.children li.depth-2 {
     margin: 0 0 0 110px
}

ol.commentlist li.comment ul.children li.depth-3 {
     margin: 0 0 0 110px
}

ol.commentlist li.comment ul.children li.depth-4 {
     margin: 0 0 0 110px
}

ol.commentlist li.comment ul.children li.depth-5 {
     margin: 0 0 0 110px
}

ol.commentlist li.pingback article {
     overflow: hidden;
     margin-bottom: 20px;
     border: 1px solid #f5f5f5;
     background-color: var(--zt-light-color);
     padding: 25px 20px
}

ol.commentlist li.pingback cite.fn {
     margin-right: 20px;
     font-size: 14px;
     font-style: normal;
     font-weight: 700;
     text-transform: uppercase
}

ol.commentlist li.pingback .meta-datetime {
     font-size: 14px;
     padding-right: 5px;
     color: #9e9e9e
}

ol.commentlist li.pingback .comment-edit-link {
     float: right;
     font-size: 14px;
     border-bottom: 1px solid
}

ol.commentlist li.pingback ul.children li {
     margin: 0 0 0 110px
}


/*=== COMMENT FORM ===*/
#comments .heading-title,
#respond .heading-title {
     position: relative;
     display: inline-block;
     margin: 0;
     padding: 15px 30px;
     font-size: 20px;
     line-height: 24px;
     font-weight: 700
}

#comments .heading-title:before,
#respond .heading-title:before {
     content: "";
     position: absolute;
     top: -1px;
     bottom: -1px;
     left: -1px;
     right: -1px;
     border-width: 1px;
     border-style: solid
}

#comments .heading-title:after,
#respond .heading-title:after {
     content: "";
     position: absolute;
     top: -1px;
     left: auto;
     right: -1px;
     bottom: auto;
     width: 9px;
     height: 9px
}

/*=== COMMENT RESPOND ===*/
#comments #respond {
     margin-top: 95px
}

#comments #reply-title {
     text-transform: uppercase;
     padding-bottom: 15px
}

#comments #cancel-comment-reply-link {
     text-transform: capitalize;
     font-size: 13px
}

#respond #commentform button {
     min-width: 135px
}

#respond #commentform .label:after {
     content: "*";
     margin-left: 2px;
     font-size: 12px;
     font-family: arial !important;
     color: red
}

#respond #commentform {
     display: block;
     margin: 0;
     padding: 0
}

#respond p label {
     display: block;
     margin: 0;
     padding: 0;
     border: 0;
     font-size: 9px;
     line-height: 12px;
     font-weight: 700;
     text-transform: uppercase;
     background: transparent;
     border-radius: 0;
     -moz-border-radius: 0;
     -webkit-border-radius: 0;
     text-shadow: none;
     -moz-text-shadow: none;
     -webkit-text-shadow: none;
     transition: all .2s ease-in-out 0;
     -moz-transition: all .2s ease-in-out 0;
     -webkit-transition: all .2s ease-in-out 0
}

#respond p.logged-in-as {
     margin-top: 10px
}

#respond #commentform .logged-in-as a {
     font-size: 12px;
     font-weight: 700
}

body div.pp_woocommerce #respond .form-submit,
#respond p.form-submit {
     margin-top: 10px;
     display: inline-block
}

#respond p.info {
     margin-bottom: 25px
}

#respond #commentform .logged-in-as a:first-child {
     font-size: 12px;
     font-weight: 700;
     text-transform: uppercase
}

#respond #commentform .label {
     background: transparent;
     border: 0;
     padding: 0
}

#respond #commentform input {
     width: 100%;
     max-width: 435px
}

#respond #commentform .comment-author-wrapper,
#respond #commentform .comment-message-wrapper {
     overflow: hidden;
     width: 100%;
     clear: both
}

#respond #commentform .comment-author-wrapper p {
     display: inline-block;
     width: 32%;
     margin-right: 2%
}

#respond #commentform .comment-author-wrapper p:last-child {
     margin: 0 0 10px;
     width: 100%;
     float: none;
     display: flex;
     align-items: center;
}

#respond #commentform input[type^="checkbox"] {
     width: auto;
     margin: 0px 10px 0 0px;
}

#respond #commentform p.form-submit {
     clear: both;
     margin: 0;
     padding: 0 30px
}

#respond #commentform p.form-submit .icon {
     padding-right: 15px;
     margin-right: 15px;
     border-right: 1px solid;
     display: none;
}

#respond #commentform p.form-submit input#submit {
     width: auto;
     color: var(--zt-light-color);
     background: none;
     padding: 0
}

#respond #commentform p.form-submit:hover {
     background-color: var(--zt-light-color);
     border: 1px solid #AAA
}

#respond #commentform textarea {
     width: 100%;
     min-height: 170px
}


/*=============================================================================================================*/
/*=== III. WIDGETS ============================================================================================*/
/*=============================================================================================================*/

/*=== WIDGET SETTING GENERAL ===*/
.fix {
     clear: both
}

.widget-container {
     position: relative;
     clear: both;
     overflow: hidden;
     margin-bottom: 30px;
}

.widget-container:last-child {
     margin-bottom: 0
}

.widget_title_wrapper .widget-title {
     padding-bottom: 10px;
     text-transform: uppercase;
     font-size: var(--zt-main-font-size);
     line-height: var(--zt-main-line-height);
     font-weight: 600;

     color: #32367D;
}

.widget-container ul {
     overflow: hidden;
     clear: both
}

.widget-container.widget_text ul li a {
     display: inline-block
}

.widget-container ul li {
     position: relative;
     list-style: none
}

.widget-container>select {
     width: 100%;
     margin: 0;
     max-width: 300px
}

.widget_rss ul li:last-child,
.widget_archive ul li:last-child,
.widget_categories ul li:last-child,
.widget_meta ul li:last-child,
.widget_pages ul li:last-child {
     border: 0;
     padding-bottom: 0;
     margin-bottom: 0
}

.widget_nav_menu ul {
     margin-left: 0
}

.widget_nav_menu ul.menu>li>ul,
.widget_nav_menu ul.menu>li>ul>li>ul {
     margin-left: 20px
}

.widget_nav_menu li {
     padding-bottom: 0 !important
}

.widget_categories ul li:nth-last-child(1)>ul>li:nth-last-child(1) {
     margin-bottom: 0
}

/*=== WIDGET EFFECT THUMBNAIL IMAGE ===*/
.cata-effect-thumbnail:before {
     z-index: 10;
     content: "";
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     opacity: 1;
     transform: scale(0, 1);
     -moz-transform: scale(0, 1);
     -webkit-transform: scale(0, 1);
     transition: all .4s ease;
     -moz-transition: all .4s ease;
     -webkit-transition: all .4s ease
}

.cata-effect-thumbnail:after {
     z-index: 12;
     content: "+";
     position: absolute;
     top: 50%;
     left: 0;
     text-align: center;
     line-height: 100%;
     height: 30px;
     width: 100%;
     transform: scale(0);
     -moz-transform: scale(0);
     -webkit-transform: scale(0);
     transition: all .4s ease;
     -moz-transition: all .4s ease;
     -webkit-transition: all .4s ease;
     margin-top: -15px;
     font-size: 40px;
     font-family: "Font Awesome 5 Pro";
     font-weight: 900;
     color: var(--zt-light-color)
}

.notouch .effect_color:hover:before,
.notouch .project-thumbnail:hover:before,
.cata-effect-thumbnail:hover:before {
     transform: scale(1);
     -moz-transform: scale(1);
     -webkit-transform: scale(1);
     opacity: .4
}

.notouch .effect_color:hover:after,
.notouch .project-thumbnail:hover:after,
.cata-effect-thumbnail:hover:after {
     transform: scale(1);
     -webkit-transform: scale(1);
     -moz-transform: scale(1)
}


/*=== WIDGET SLIDER NAVIGATION Owl Carousel ===*/
.widget-container .owl-theme .owl-controls .owl-prev,
.widget-container .owl-theme .owl-controls .owl-next {
     position: absolute;
     top: -40px;
     right: 32px;
     font-size: 0;
     line-height: 23px;
     width: 24px;
     height: 24px;
     margin: initial;
     padding: initial;
     color: initial;
     background: var(--zt-light-color);
     -moz-transition: all .3s ease;
     -webkit-transition: all .3s ease;
     -ms-transition: all .3s ease;
     -o-transition: all .3s ease;
     -webkit-border-radius: 0;
     -moz-border-radius: 0;
     border-radius: 0;
     border: 1px solid #e6e6e6
}

.widget-container .owl-theme .owl-controls .owl-next {
     right: 0
}

.widget-container .owl-theme .owl-controls .owl-next:before {
     content: "\f0da";
     font-family: "Font Awesome 5 Pro";
     font-size: var(--zt-main-font-size);
}

.widget-container .owl-theme .owl-controls .owl-prev:before {
     content: "\f0d9";
     font-family: "Font Awesome 5 Pro";
     font-size: var(--zt-main-font-size);
}

.widget-container .owl-theme .owl-controls .owl-prev:hover,
.widget-container .owl-theme .owl-controls .owl-next:hover {
     color: var(--zt-light-color);
}

/*============================================================================================*/
/*=== 1. (WP) WIDGET SEARCH & COMMENT ========================================================*/
.widget_search form {
     overflow: hidden;
     display: block;
     position: relative
}

.widget_search form p {
     display: none
}

.widget_search form label {
     margin: 0;
     width: 90%
}

.widget_search form input.search-field {
     padding: 10px;
     width: 100%
}

.widget_search form input.search-input {
     width: 100%
}

.widget_search form input[type^=submit] {
     position: absolute;
     right: 0;
     top: 2px;
     border: none;
     text-indent: -9999px;
     padding: 12px 20px;
     background: url(images/icon_search.png) no-repeat 50% 11px
}

.widget_recent_comments li .comment-author-link {
     font-weight: 700
}

/*============================================================================================*/
/*=== 2. (WP) WIDGET RSS =====================================================================*/
.widget_rss .widget-title img {
     margin: 3px 5px 0 0
}

.widget_rss ul li {
     padding-bottom: 15px;
     margin-bottom: 15px;
     border-bottom: 1px solid #e6e6e6
}

.widget_rss ul li a.rsswidget {
     margin-right: 5px;
     font-weight: 700;
     text-transform: capitalize
}

/*============================================================================================*/
/*=== 3. WP WIDGET TAGS CLOUD ================================================================*/
.widget_tag_cloud .tagcloud,
.wg-tag-cloud .tagcloud {
     overflow: hidden
}

.widget_tag_cloud .tagcloud a,
.wg-tag-cloud .tagcloud a {
     float: left;
     font-size: 12px !important;
     line-height: 20px;
     padding: 6px 15px;
     margin: 0 5px 7px 0;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     border: 1px solid transparent;
     background: #E6E6E6
}

.widget_tag_cloud .tagcloud a:hover,
.wg-tag-cloud .tagcloud a:hover {
     background: transparent;
     border-color: #E6E6E6
}

.wd_tag_cloud .wd_widget_tag_cloud embed {
     margin-top: -20px
}

.wd_tag_cloud .wd_widget_tag_cloud a:hover,
.wd_tag_cloud .wd_widget_tag_cloud a:focus {
     text-decoration: none
}

/*============================================================================================*/
/*=== 4. (WP) WIDGET META ====================================================================*/
.widget_meta ul li:before {
     float: right;
     width: 12%;
     text-align: right;
     font: normal normal normal 14px/20px "Font Awesome 5 Pro"
}

.widget_meta ul li:nth-child(1):before {
     content: "\f023"
}

.widget_meta ul li:nth-child(2):before {
     content: "\f143"
}

.widget_meta ul li:nth-child(3):before {
     content: "\f086"
}

.widget_meta ul li:nth-child(4):before {
     content: "\f19a"
}

.widget_meta ul.meta-logged li:nth-child(1):before {
     content: "\f0e4"
}

.widget_meta ul.meta-logged li:nth-child(2):before {
     content: "\f08b"
}

.widget_meta ul.meta-logged li:nth-child(3):before {
     content: "\f143"
}

.widget_meta ul.meta-logged li:nth-child(4):before {
     content: "\f086"
}

.widget_meta ul.meta-logged li:nth-child(5):before {
     content: "\f19a"
}

/*============================================================================================*/
/*=== 5. (WP) WIDGET CALENDAR ================================================================*/
.widget_calendar {
     float: left
}

.widget-container #calendar_wrap {
     margin-top: 0;
     border: 0 !important
}

#wp-calendar {
     margin: 0;
     width: 100%;
     text-align: center;
     border: 1px solid #E6E6E6
}

#calendar_wrap {
     padding-left: 0
}

#wp-calendar caption {
     text-align: center;
     text-transform: uppercase;
     border-width: 0;
     border-style: solid;
     font-weight: 700;
     font-size: var(--zt-main-font-size);
     background: #E6E6E6
}

#wp-calendar thead tr th {
     border: 0;
     letter-spacing: 0;
     padding: 10px 0 5px;
     text-align: center;
     font-size: 12px
}

#wp-calendar tbody tr td {
     border: none;
     text-align: center;
     padding: 8px;
     white-space: nowrap
}

#wp-calendar tfoot tr td {
     border: 0;
     letter-spacing: 0;
     padding: 8px;
     text-align: center;
     background: #E6E6E6
}

#wp-calendar tbody td:not(.pad):hover {
     color: var(--zt-light-color);
}

#wp-calendar tfoot td#prev {
     text-align: left;
     padding: 10px 0 5px 5px;
     font-size: 12px;
     text-transform: uppercase
}

#wp-calendar tfoot td.pad a {
     font-weight: 700
}

#wp-calendar tfoot td#next {
     text-align: right;
     padding: 10px 5px 5px 0;
     font-size: 12px;
     text-transform: uppercase
}

/*============================================================================================*/
/*=== 6. (WP) WIDGET CATAGORIES ==============================================================*/
/*=== 7. (WP) WIDGET CUSTOM MENU =============================================================*/
/*=== 8. (WP) WIDGET PAGE ====================================================================*/
.widget_nav_menu>ul ul,
.widget_pages>ul ul,
.widget_categories>ul ul {
     margin: 0 0 0 25px;
     clear: both
}

.widget_recent_comments ul li,
.widget_archive ul li,
.widget_categories ul li,
.widget_meta ul li,
.widget_nav_menu div ul li,
.widget_pages ul li,
.widget_recent_entries ul li {
     list-style: none;
     padding: 10px 0 0;
     line-height: 140%;
     position: relative;
     text-indent: 0;
     clear: both;
     display: block;
     min-height: 40px;
}

.widget_recent_comments ul li:last-child,
.widget_archive ul li:last-child,
.widget_categories ul li:last-child,
.widget_meta ul li:last-child,
.widget_nav_menu div ul li:last-child,
.widget_pages ul li:last-child,
.widget_recent_entries ul li:last-child {
     border: none
}

.widget_nav_menu ul li,
.widget_categories ul li {
     clear: both;
     text-align: right;
     overflow: hidden
}

.widget_nav_menu ul li a,
.widget_categories ul li a {
     float: left
}

.widget_nav_menu li.collapsed:before,
.widget_nav_menu li.expanded:before,
.widget_pages li.collapsed:before,
.widget_pages li.expanded:before,
.widget_categories li.collapsed:before,
.widget_categories li.expanded:before {
     content: "\f0d7";
     display: inline-block;
     position: absolute;
     top: 12px;
     right: 0;
     font: normal normal normal 14px/14px "Font Awesome 5 Pro";
     border-radius: 3px 3px 3px 3px;
     width: 16px;
     height: 16px;
     line-height: 15px;
     cursor: pointer;
     text-align: center;
     -webkit-transition: background .3s ease, border-color .2s ease, color .3s ease;
     transition: background .3s ease, border-color .2s ease, color .3s ease
}

.widget_nav_menu li.collapsed:before,
.widget_pages li.collapsed:before {
     content: "\f0d7"
}

.widget_nav_menu li.expanded:before,
.widget_pages li.expanded:before {
     content: "\f0d8"
}

.widget_recent_entries .post-date {
     display: inline-block;
     width: 100%;
     font-size: 12px;
     font-style: italic
}

.widget_recent_comments ul li {
     padding-bottom: 10px;
}

/*--- Archive ---*/
.widget_archive li {
     text-align: right
}

.widget_archive li a {
     float: left
}

/*--- Page ---*/
.widget_pages ul li a:hover {
     text-decoration: none
}

/*============================================================================================*/
/*=== 9. (PLUGIN) WIDGET REVOLUTION SLIDER ===================================================*/
aside.sidebar .rev_slider_wrapper {
     margin-bottom: 35px !important
}

aside.sidebar .rev_slider_wrapper .tp-rightarrow.default,
aside.sidebar .rev_slider_wrapper .tp-leftarrow.default {
     display: none !important
}

aside.sidebar .rev_slider_wrapper .tp-bullets {
     bottom: 0 !important
}

.cata-thumb-small .cata-effect-thumbnail:before,
.cata-thumb-small .cata-effect-thumbnail:after {
     width: 100%;
     height: 100%
}


/*============================================================================================*/
/*=== 10. WIDGET ADS  ========================================================================*/

.widget-container.wg-menu-dropdown {
     overflow: visible;
     margin-bottom: 10px;
}

.widget-container.wg-menu-dropdown .cata-dropdown-toggle {
     color: #696D77 !important;
     border: 1px solid #EDEDEE;
}


/*============================================================================================*/
/*=== 99. WIDGET POPULAR POST ================================================================*/
.cata-popular-widget {
     background: #eef5ff;
     padding: 5px 10px 10px;
     border-radius: 10px;
     border: 1px dashed #CDE1FF;
}

.cata-popular-widget .widget-title {
     font-size: 14px;
     padding-bottom: 5px;
     color: var(--zt-darkblue-color);
}

.popular-item {
     display: grid;
     grid-template-columns: 30px 1fr;
     gap: 10px;
     background: var(--zt-light-color);
     border-radius: 8px;
     padding: 10px;
     margin-bottom: 10px;

     font-size: 14px;
     line-height: 18px;
     border: 1px solid #e2ecf9;
}

.popular-item:last-child {
     margin-bottom: 0;
}

.popular-item .rank {
     width: 30px;
     height: 40px;
     line-height: 40px;
     background: #dbe4ff;
     color: #3b5bdb;
     font-weight: bold;
     text-align: center;

     border-radius: 6px;
     margin-right: 10px;
}

.popular-item a:hover {
     font-weight: 600;
     color: #0253CC;
}

/*=============================================================================================================*/
/*=== IV. OTHERS ==============================================================================================*/
/*=============================================================================================================*/


/*============================================================================================*/
/*=== 0. GRID SYSTEM =========================================================================*/
.footer-row {
     display: flex;
     flex-wrap: wrap;
     margin-left: -15px;
     margin-right: -15px;
}

.footer-col {
     padding-left: 15px;
     padding-right: 15px;
     width: 100%;
}
.footer-col:last-child {
     margin-bottom: 0 !important;
}

/* ===== 12 COL SYSTEM ===== */
.col-1 {
     width: 8.333%;
}

.col-2 {
     width: 16.666%;
}

.col-3 {
     width: 25%;
}

.col-4 {
     width: 33.333%;
}

.col-5 {
     width: 41.666%;
}

.col-6 {
     width: 50%;
}

.col-7 {
     width: 58.333%;
}

.col-8 {
     width: 66.666%;
}

.col-9 {
     width: 75%;
}

.col-10 {
     width: 83.333%;
}

.col-11 {
     width: 91.666%;
}

.col-12 {
     width: 100%;
}

/* ===== ALIGN ===== */
.align-center {
     align-items: center;
}

.text-right {
     text-align: right;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 992px) {

     .col-1,
     .col-2,
     .col-3,
     .col-4,
     .col-5,
     .col-6,
     .col-7,
     .col-8,
     .col-9,
     .col-10,
     .col-11 {
          width: 50%;
     }
}

@media (max-width: 768px) {

     .col-1,
     .col-2,
     .col-3,
     .col-4,
     .col-5,
     .col-6,
     .col-7,
     .col-8,
     .col-9,
     .col-10,
     .col-11 {
          width: 100%;
     }

     .text-right {
          text-align: left;
     }
}


/*============================================================================================*/
/*=== 1. PRETTY PHOTO (FOR QUICKSHOP) ========================================================*/
div.pp_overlay {
     background-color: rgba(33, 33, 36, .95) !important
}

body .pp_fade {
     float: left;
     overflow: hidden;
     max-width: 100%
}

body div.pp_default .pp_top .pp_left,
body div.pp_default .pp_top .pp_right,
body div.pp_default .pp_bottom .pp_left,
body div.pp_default .pp_bottom .pp_right,
body div.pp_default .pp_top .pp_middle,
body div.pp_default .pp_bottom .pp_middle,
body div.pp_default .pp_content_container .pp_left,
body div.pp_default .pp_content_container .pp_right {
     background: none !important;
     padding: 0 !important
}

body div.pp_default .pp_top .pp_middle,
body div.pp_default .pp_bottom .pp_middle {
     left: 16px;
     right: 16px
}

body div.pp_default .pp_woocommerce div.ppt {
     display: none !important
}

body div.pp_default a.pp_close {
     right: 20px;
     top: 2px
}

body div.pp_default .pp_content {
     width: 100px;
     height: 100px;
     position: relative;
     border-radius: 5px;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px
}

body div.pp_default .pp_top {
     min-height: 30px
}

div.pp_default .pp_description {
     padding-top: 5px
}

body div.pp_default .pp_content_container .pp_details {
     padding-left: 10px
}

body div.pp_woocommerce .pp_content_container {
     padding: 0;
     box-shadow: none;
     -webkit-box-shadow: none;
     -moz-box-shadow: none
}

body div.pp_woocommerce .pp_content_container .pp_right {
     padding-right: 0;
     overflow: hidden
}

body .pp_content_container .pp_left {
     padding-left: 0
}

body div.pp_woocommerce .pp_content {
     max-width: 100%;
     min-height: 40px;
     top: auto !important;
     width: 100% !important;
     height: auto !important
}

body div.pp_woocommerce .pp_details {
     padding: 0
}

body div.pp_woocommerce .pp_close {
     z-index: 99999
}

body div.pp_woocommerce div.pp_top {
     display: none
}

body div.pp_woocommerce div.ppt {
     display: none !important
}

body div.pp_woocommerce a.pp_next {
     position: absolute;
     top: 50%;
     right: 0;
     height: 24px !important;
     width: 24px !important;
     margin-top: -15px !important
}

body div.pp_woocommerce a.pp_previous {
     position: absolute;
     top: 50%;
     left: 0;
     height: 24px !important;
     width: 24px !important;
     margin-top: -15px !important
}

body div.pp_woocommerce .pp_hoverContainer {
     top: 40px
}

body div.pp_pic_holder {
     margin-top: 30px
}

body div.pp_woocommerce .pp_loaderIcon {
     background: url(images/ajax-loader.gif) center no-repeat !important;
     width: 32px;
     height: 32px;
     margin: -16px 0 0 -16px
}

div.pp_woocommerce .pp_loaderIcon:before {
     background: none
}

body div.pp_woocommerce .pp_fade:hover .pp_previous:before,
body div.pp_woocommerce .pp_fade:hover .pp_next:before {
     opacity: 1;
     filter: alpha(opacity=100);
     display: block
}

body div.pp_woocommerce .pp_fade .pp_previous:hover:before,
body div.pp_woocommerce .pp_fade:hover .pp_next:hover:before,
div.pp_woocommerce .pp_arrow_next:hover,
div.pp_woocommerce .pp_arrow_previous:hover,
body div.pp_woocommerce .pp_fade .pp_previous:focus,
body div.pp_woocommerce .pp_fade:focus .pp_next:focus:before,
div.pp_woocommerce .pp_arrow_next:focus,
div.pp_woocommerce .pp_arrow_previous:focus {
     opacity: .7;
     filter: alpha(opacity=70);
     text-decoration: none !important
}

body div.pp_woocommerce a.pp_expand,
body div.pp_woocommerce a.pp_contract {
     display: none !important;
     top: 0;
     left: 5px;
     height: 20px;
     width: 20px;
     line-height: 20px;
     background: none;
     border: 0;
     box-shadow: none;
     -webkit-box-shadow: none;
     -moz-box-shadow: none;
     -o-box-shadow: none;
     border-radius: 0;
     -webkit-border-radius: 0;
     -moz-border-radius: 0;
     -o-border-radius: 0
}

body div.pp_woocommerce a.pp_expand:before,
body div.pp_woocommerce a.pp_contract:before {
     display: none
}

body div.pp_woocommerce .pp_close {
     top: -100px;
     right: 50%;
     margin-right: -15px;
     height: 30px;
     width: 30px;
     font-size: 0 !important;
     line-height: 30px;
     background: none;
     border: 0;
     box-shadow: none;
     -webkit-box-shadow: none;
     -moz-box-shadow: none;
     -o-box-shadow: none;
     border-radius: 0;
     -webkit-border-radius: 0;
     -moz-border-radius: 0;
     -o-border-radius: 0;
     background: url(images/cross-search.png) no-repeat center center
}

body div.pp_woocommerce .pp_close:hover:before {
     color: var(--zt-light-color);
}

body div.pp_woocommerce .pp_close:before {
     display: none
}

body div.pp_woocommerce a.pp_expand:before,
body div.pp_woocommerce a.pp_expand:hover:before,
div.pp_woocommerce .pp_close:before,
div.pp_woocommerce .pp_close:hover:before,
body div.pp_woocommerce a.pp_contract:before,
body div.pp_woocommerce a.pp_contract:hover:before {
     color: var(--zt-light-color);
}

body .pp_gallery ul a,
body .pp_gallery ul {
     height: auto
}

body div.pp_woocommerce .pp_previous:before,
body div.pp_woocommerce .pp_next:before {
     position: absolute;
     content: "";
     width: 24px;
     height: 24px;
     font-size: 20px !important;
     line-height: 28px !important;
     color: var(--zt-light-color) !important;
     font-weight: 400 !important;
     text-shadow: none !important;
     border: 0 !important;
     margin-top: -15px;
     border-radius: 0 !important;
     -webkit-border-radius: 0 !important;
     -moz-border-radius: 0 !important;
     -o-border-radius: 0 !important;
     background: transparent;
     border: 1px solid
}

body div.pp_woocommerce .pp_previous:before {
     left: 0;
     background-image: url(images/o_button_prev.png) !important;
     background-repeat: no-repeat !important;
     background-position: center !important
}

body div.pp_woocommerce .pp_next:before {
     right: 0;
     background-image: url(images/o_button_next.png) !important;
     background-repeat: no-repeat !important;
     background-position: center !important
}

div.pp_woocommerce .pp_arrow_previous,
div.pp_woocommerce .pp_arrow_next {
     border-radius: 0 !important;
     -webkit-border-radius: 0 !important;
     -moz-border-radius: 0 !important;
     -o-border-radius: 0 !important
}

.ie body div.pp_woocommerce .pp_previous:before,
.ie body div.pp_woocommerce .pp_next:before {
     display: block !important;
     line-height: 30px !important
}

body div.pp_woocommerce .pp_arrow_previous:before,
body div.pp_woocommerce .pp_arrow_next:before {
     font-size: 12px !important;
     line-height: 12px !important
}

body div.pp_woocommerce .pp_nav,
body div.pp_woocommerce .pp_description {
     font-size: 12px;
     line-height: 16px;
     display: none !important
}

body .pp_gallery .pp_arrow_previous,
body .pp_gallery .pp_arrow_next {
     margin-top: 20px !important
}

body .pp_gallery img {
     max-width: 50px;
     max-height: 50px
}


/*============================================================================================*/
/*=== 2. PAGINATION ==========================================================================*/
.cata-pagination {
     clear: both;
     padding: 40px 0 0px;
     text-align: center;
     margin-top: 60px;
     border-top: 1px solid #ededed
}

.cata-pagination ul {
     display: flex;
     justify-content: center;
     margin-bottom: 0;
}

.cata-pagination ul li {
     list-style: none;
     list-style-type: none;
     display: inline-block
}

.cata-pagination ul li span,
.cata-pagination ul li a {
     position: relative;
     display: block;
     margin: 0 5px;
     padding: 0;
     width: 40px;
     height: 40px;
     font-size: 14px;
     line-height: 36px;
     font-weight: 700;
     text-align: center;
     background: transparent;
     transition: all .3s ease-in-out 0;
     -moz-transition: all .3s ease-in-out 0;
     -webkit-transition: all .3s ease-in-out 0;
     border: 2px solid #ededed
}

.cata-pagination ul li a.next:before,
.cata-pagination ul li a.prev:before {
     position: absolute;
     left: 2px;
     right: 0;
     bottom: 0;
     top: 0;
     content: "\f178";
     font-family: "Font Awesome 5 Pro";
     line-height: 38px;
     font-size: 14px;
     text-align: center;
     text-indent: 0
}

.cata-pagination ul li a.prev:before {
     content: "\f177"
}

.cata-pagination ul li span.current,
.cata-pagination ul li:hover a {
     color: var(--zt-light-color)
}

/*============================================================================================*/
/*=== 3. PRELOADER ===========================================================================*/
@-webkit-keyframes scale {
     0% {
          -webkit-transform: scale(1);
          transform: scale(1);
          opacity: 1
     }

     45% {
          -webkit-transform: scale(0.1);
          transform: scale(0.1);
          opacity: .7
     }

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

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

     45% {
          -webkit-transform: scale(0.1);
          transform: scale(0.1);
          opacity: .7
     }

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

.ball-pulse>div:nth-child(0) {
     -webkit-animation: scale .75s -.36s infinite cubic-bezier(.2, .68, .18, 1.08);
     animation: scale .75s -.36s infinite cubic-bezier(.2, .68, .18, 1.08)
}

.ball-pulse>div:nth-child(1) {
     -webkit-animation: scale .75s -.24s infinite cubic-bezier(.2, .68, .18, 1.08);
     animation: scale .75s -.24s infinite cubic-bezier(.2, .68, .18, 1.08)
}

.ball-pulse>div:nth-child(2) {
     -webkit-animation: scale .75s -.12s infinite cubic-bezier(.2, .68, .18, 1.08);
     animation: scale .75s -.12s infinite cubic-bezier(.2, .68, .18, 1.08)
}

.ball-pulse>div:nth-child(3) {
     -webkit-animation: scale .75s 0s infinite cubic-bezier(.2, .68, .18, 1.08);
     animation: scale .75s 0s infinite cubic-bezier(.2, .68, .18, 1.08)
}

.ball-pulse>div {
     background-color: #fff;
     width: 15px;
     height: 15px;
     border-radius: 100%;
     margin: 2px;
     -webkit-animation-fill-mode: both;
     animation-fill-mode: both;
     display: inline-block
}

@-webkit-keyframes ball-pulse-sync {
     33% {
          -webkit-transform: translateY(10px);
          transform: translateY(10px)
     }

     66% {
          -webkit-transform: translateY(-10px);
          transform: translateY(-10px)
     }

     100% {
          -webkit-transform: translateY(0);
          transform: translateY(0)
     }
}

@keyframes ball-pulse-sync {
     33% {
          -webkit-transform: translateY(10px);
          transform: translateY(10px)
     }

     66% {
          -webkit-transform: translateY(-10px);
          transform: translateY(-10px)
     }

     100% {
          -webkit-transform: translateY(0);
          transform: translateY(0)
     }
}

.ball-pulse-sync>div:nth-child(0) {
     -webkit-animation: ball-pulse-sync .6s -.21s infinite ease-in-out;
     animation: ball-pulse-sync .6s -.21s infinite ease-in-out
}

.ball-pulse-sync>div:nth-child(1) {
     -webkit-animation: ball-pulse-sync .6s -.14s infinite ease-in-out;
     animation: ball-pulse-sync .6s -.14s infinite ease-in-out
}

.ball-pulse-sync>div:nth-child(2) {
     -webkit-animation: ball-pulse-sync .6s -.07s infinite ease-in-out;
     animation: ball-pulse-sync .6s -.07s infinite ease-in-out
}

.ball-pulse-sync>div:nth-child(3) {
     -webkit-animation: ball-pulse-sync .6s 0s infinite ease-in-out;
     animation: ball-pulse-sync .6s 0s infinite ease-in-out
}

.ball-pulse-sync>div {
     background-color: #fff;
     width: 15px;
     height: 15px;
     border-radius: 100%;
     margin: 2px;
     -webkit-animation-fill-mode: both;
     animation-fill-mode: both;
     display: inline-block
}

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

     100% {
          -webkit-transform: scale(1);
          transform: scale(1);
          opacity: 0
     }
}

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

     100% {
          -webkit-transform: scale(1);
          transform: scale(1);
          opacity: 0
     }
}

.ball-scale>div {
     background-color: #fff;
     border-radius: 100%;
     margin: 2px;
     display: inline-block;
     height: 60px;
     width: 60px;
     -webkit-animation: ball-scale 1s 0s ease-in-out infinite;
     animation: ball-scale 1s 0s ease-in-out infinite
}

@-webkit-keyframes rotate {
     0% {
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg)
     }

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

     100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg)
     }
}

@keyframes rotate {
     0% {
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg)
     }

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

     100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg)
     }
}

.ball-rotate {
     position: relative
}

.ball-rotate>div {
     background-color: #fff;
     width: 15px;
     height: 15px;
     border-radius: 100%;
     margin: 2px;
     -webkit-animation-fill-mode: both;
     animation-fill-mode: both;
     position: relative
}

.ball-rotate>div:first-child {
     -webkit-animation: rotate 1s 0s cubic-bezier(.7, -.13, .22, .86) infinite;
     animation: rotate 1s 0s cubic-bezier(.7, -.13, .22, .86) infinite
}

.ball-rotate>div:after,
.ball-rotate>div:before {
     background-color: #fff;
     width: 15px;
     height: 15px;
     border-radius: 100%;
     margin: 2px;
     content: "";
     position: absolute;
     opacity: .8
}

.ball-rotate>div:before {
     top: 0;
     left: -28px
}

.ball-rotate>div:after {
     top: 0;
     left: 25px
}

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

     50% {
          -webkit-transform: rotate(180deg) scale(0.6);
          transform: rotate(180deg) scale(0.6)
     }

     100% {
          -webkit-transform: rotate(360deg) scale(1);
          transform: rotate(360deg) scale(1)
     }
}

.ball-clip-rotate>div {
     border-radius: 100%;
     margin: 2px;
     border: 2px solid #fff;
     border-bottom-color: transparent;
     height: 25px;
     width: 25px;
     background: 0 0 !important;
     display: inline-block;
     -webkit-animation: rotate .75s 0s linear infinite;
     animation: rotate .75s 0s linear infinite
}

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

     50% {
          -webkit-transform: rotate(180deg) scale(0.6);
          transform: rotate(180deg) scale(0.6)
     }

     100% {
          -webkit-transform: rotate(360deg) scale(1);
          transform: rotate(360deg) scale(1)
     }
}

@keyframes scale {
     30% {
          -webkit-transform: scale(0.3);
          transform: scale(0.3)
     }

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

.ball-clip-rotate-pulse {
     position: relative;
     -webkit-transform: translateY(-15px);
     -ms-transform: translateY(-15px);
     transform: translateY(-15px)
}

.ball-clip-rotate-pulse>div {
     -webkit-animation-fill-mode: both;
     animation-fill-mode: both;
     position: absolute;
     top: 0;
     left: 0;
     border-radius: 100%
}

.ball-clip-rotate-pulse>div:first-child {
     background: #fff;
     height: 16px;
     width: 16px;
     top: 7px;
     left: -7px;
     -webkit-animation: scale 1s 0s cubic-bezier(.09, .57, .49, .9) infinite;
     animation: scale 1s 0s cubic-bezier(.09, .57, .49, .9) infinite
}

.ball-clip-rotate-pulse>div:last-child {
     position: absolute;
     width: 30px;
     height: 30px;
     left: -16px;
     top: -2px;
     background: 0 0;
     border: 2px solid;
     border-color: #fff transparent;
     -webkit-animation: rotate 1s 0s cubic-bezier(.09, .57, .49, .9) infinite;
     animation: rotate 1s 0s cubic-bezier(.09, .57, .49, .9) infinite;
     -webkit-animation-duration: 1s;
     animation-duration: 1s
}

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

     50% {
          -webkit-transform: rotate(180deg) scale(0.6);
          transform: rotate(180deg) scale(0.6)
     }

     100% {
          -webkit-transform: rotate(360deg) scale(1);
          transform: rotate(360deg) scale(1)
     }
}

.ball-clip-rotate-multiple {
     position: relative
}

.ball-clip-rotate-multiple>div {
     position: absolute;
     left: -20px;
     top: -20px;
     border: 2px solid #fff;
     border-bottom-color: transparent;
     border-top-color: transparent;
     border-radius: 100%;
     height: 35px;
     width: 35px;
     -webkit-animation: rotate 1s 0s ease-in-out infinite;
     animation: rotate 1s 0s ease-in-out infinite
}

.ball-clip-rotate-multiple>div:last-child {
     display: inline-block;
     top: -10px;
     left: -10px;
     width: 15px;
     height: 15px;
     -webkit-animation-duration: .5s;
     animation-duration: .5s;
     border-color: #fff transparent;
     -webkit-animation-direction: reverse;
     animation-direction: reverse
}

@-webkit-keyframes ball-scale-ripple {
     0% {
          -webkit-transform: scale(0.1);
          transform: scale(0.1);
          opacity: 1
     }

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

     100% {
          opacity: 0
     }
}

@keyframes ball-scale-ripple {
     0% {
          -webkit-transform: scale(0.1);
          transform: scale(0.1);
          opacity: 1
     }

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

     100% {
          opacity: 0
     }
}

.ball-scale-ripple>div {
     height: 50px;
     width: 50px;
     border-radius: 100%;
     border: 2px solid #fff;
     -webkit-animation: ball-scale-ripple 1s 0s infinite cubic-bezier(.21, .53, .56, .8);
     animation: ball-scale-ripple 1s 0s infinite cubic-bezier(.21, .53, .56, .8)
}

@-webkit-keyframes ball-scale-ripple-multiple {
     0% {
          -webkit-transform: scale(0.1);
          transform: scale(0.1);
          opacity: 1
     }

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

     100% {
          opacity: 0
     }
}

@keyframes ball-scale-ripple-multiple {
     0% {
          -webkit-transform: scale(0.1);
          transform: scale(0.1);
          opacity: 1
     }

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

     100% {
          opacity: 0
     }
}

.ball-scale-ripple-multiple {
     position: relative;
     -webkit-transform: translateY(-25px);
     -ms-transform: translateY(-25px);
     transform: translateY(-25px)
}

.ball-scale-ripple-multiple>div:nth-child(0) {
     -webkit-animation-delay: -.8s;
     animation-delay: -.8s
}

.ball-scale-ripple-multiple>div:nth-child(1) {
     -webkit-animation-delay: -.6s;
     animation-delay: -.6s
}

.ball-scale-ripple-multiple>div:nth-child(2) {
     -webkit-animation-delay: -.4s;
     animation-delay: -.4s
}

.ball-scale-ripple-multiple>div:nth-child(3) {
     -webkit-animation-delay: -.2s;
     animation-delay: -.2s
}

.ball-scale-ripple-multiple>div {
     position: absolute;
     top: -2px;
     left: -26px;
     width: 50px;
     height: 50px;
     border-radius: 100%;
     border: 2px solid #fff;
     -webkit-animation: ball-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(.21, .53, .56, .8);
     animation: ball-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(.21, .53, .56, .8)
}

@-webkit-keyframes ball-beat {
     50% {
          opacity: .2;
          -webkit-transform: scale(0.75);
          transform: scale(0.75)
     }

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

@keyframes ball-beat {
     50% {
          opacity: .2;
          -webkit-transform: scale(0.75);
          transform: scale(0.75)
     }

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

.ball-beat>div {
     background-color: #fff;
     width: 15px;
     height: 15px;
     border-radius: 100%;
     margin: 2px;
     display: inline-block;
     -webkit-animation: ball-beat .7s 0s infinite linear;
     animation: ball-beat .7s 0s infinite linear
}

.ball-beat>div:nth-child(2n-1) {
     -webkit-animation-delay: -.35s !important;
     animation-delay: -.35s !important
}

@-webkit-keyframes ball-scale-multiple {
     0% {
          -webkit-transform: scale(0);
          transform: scale(0);
          opacity: 0
     }

     5% {
          opacity: 1
     }

     100% {
          -webkit-transform: scale(1);
          transform: scale(1);
          opacity: 0
     }
}

@keyframes ball-scale-multiple {
     0% {
          -webkit-transform: scale(0);
          transform: scale(0);
          opacity: 0
     }

     5% {
          opacity: 1
     }

     100% {
          -webkit-transform: scale(1);
          transform: scale(1);
          opacity: 0
     }
}

.ball-scale-multiple {
     position: relative;
     -webkit-transform: translateY(-30px);
     -ms-transform: translateY(-30px);
     transform: translateY(-30px)
}

.ball-scale-multiple>div:nth-child(2) {
     -webkit-animation-delay: -.4s;
     animation-delay: -.4s
}

.ball-scale-multiple>div:nth-child(3) {
     -webkit-animation-delay: -.2s;
     animation-delay: -.2s
}

.ball-scale-multiple>div {
     background-color: #fff;
     border-radius: 100%;
     position: absolute;
     left: -30px;
     top: 0;
     opacity: 0;
     margin: 0;
     width: 60px;
     height: 60px;
     -webkit-animation: ball-scale-multiple 1s 0s linear infinite;
     animation: ball-scale-multiple 1s 0s linear infinite
}

@-webkit-keyframes ball-triangle-path-1 {
     33% {
          -webkit-transform: translate(25px, -50px);
          transform: translate(25px, -50px)
     }

     66% {
          -webkit-transform: translate(50px, 0);
          transform: translate(50px, 0)
     }

     100% {
          -webkit-transform: translate(0px, 0);
          transform: translate(0px, 0)
     }
}

@keyframes ball-triangle-path-1 {
     33% {
          -webkit-transform: translate(25px, -50px);
          transform: translate(25px, -50px)
     }

     66% {
          -webkit-transform: translate(50px, 0);
          transform: translate(50px, 0)
     }

     100% {
          -webkit-transform: translate(0px, 0);
          transform: translate(0px, 0)
     }
}

@-webkit-keyframes ball-triangle-path-2 {
     33% {
          -webkit-transform: translate(25px, 50px);
          transform: translate(25px, 50px)
     }

     66% {
          -webkit-transform: translate(-25px, 50px);
          transform: translate(-25px, 50px)
     }

     100% {
          -webkit-transform: translate(0px, 0);
          transform: translate(0px, 0)
     }
}

@keyframes ball-triangle-path-2 {
     33% {
          -webkit-transform: translate(25px, 50px);
          transform: translate(25px, 50px)
     }

     66% {
          -webkit-transform: translate(-25px, 50px);
          transform: translate(-25px, 50px)
     }

     100% {
          -webkit-transform: translate(0px, 0);
          transform: translate(0px, 0)
     }
}

@-webkit-keyframes ball-triangle-path-3 {
     33% {
          -webkit-transform: translate(-50px, 0);
          transform: translate(-50px, 0)
     }

     66% {
          -webkit-transform: translate(-25px, -50px);
          transform: translate(-25px, -50px)
     }

     100% {
          -webkit-transform: translate(0px, 0);
          transform: translate(0px, 0)
     }
}

@keyframes ball-triangle-path-3 {
     33% {
          -webkit-transform: translate(-50px, 0);
          transform: translate(-50px, 0)
     }

     66% {
          -webkit-transform: translate(-25px, -50px);
          transform: translate(-25px, -50px)
     }

     100% {
          -webkit-transform: translate(0px, 0);
          transform: translate(0px, 0)
     }
}

.ball-triangle-path {
     position: relative;
     -webkit-transform: translate(-29.99px, -37.51px);
     -ms-transform: translate(-29.99px, -37.51px);
     transform: translate(-29.99px, -37.51px)
}

.ball-triangle-path>div:nth-child(1) {
     -webkit-animation-name: ball-triangle-path-1;
     animation-name: ball-triangle-path-1;
     -webkit-animation-delay: 0;
     animation-delay: 0;
     -webkit-animation-duration: 2s;
     animation-duration: 2s;
     -webkit-animation-timing-function: ease-in-out;
     animation-timing-function: ease-in-out;
     -webkit-animation-iteration-count: infinite;
     animation-iteration-count: infinite
}

.ball-triangle-path>div:nth-child(2) {
     -webkit-animation-name: ball-triangle-path-2;
     animation-name: ball-triangle-path-2;
     -webkit-animation-delay: 0;
     animation-delay: 0;
     -webkit-animation-duration: 2s;
     animation-duration: 2s;
     -webkit-animation-timing-function: ease-in-out;
     animation-timing-function: ease-in-out;
     -webkit-animation-iteration-count: infinite;
     animation-iteration-count: infinite
}

.ball-triangle-path>div:nth-child(3) {
     -webkit-animation-name: ball-triangle-path-3;
     animation-name: ball-triangle-path-3;
     -webkit-animation-delay: 0;
     animation-delay: 0;
     -webkit-animation-duration: 2s;
     animation-duration: 2s;
     -webkit-animation-timing-function: ease-in-out;
     animation-timing-function: ease-in-out;
     -webkit-animation-iteration-count: infinite;
     animation-iteration-count: infinite
}

.ball-triangle-path>div {
     -webkit-animation-fill-mode: both;
     animation-fill-mode: both;
     position: absolute;
     width: 10px;
     height: 10px;
     border-radius: 100%;
     border: 1px solid #fff
}

.ball-triangle-path>div:nth-of-type(1) {
     top: 50px
}

.ball-triangle-path>div:nth-of-type(2) {
     left: 25px
}

.ball-triangle-path>div:nth-of-type(3) {
     top: 50px;
     left: 50px
}

@-webkit-keyframes ball-pulse-rise-even {
     0% {
          -webkit-transform: scale(1.1);
          transform: scale(1.1)
     }

     25% {
          -webkit-transform: translateY(-30px);
          transform: translateY(-30px)
     }

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

     75% {
          -webkit-transform: translateY(30px);
          transform: translateY(30px)
     }

     100% {
          -webkit-transform: translateY(0);
          transform: translateY(0);
          -webkit-transform: scale(1);
          transform: scale(1)
     }
}

@keyframes ball-pulse-rise-even {
     0% {
          -webkit-transform: scale(1.1);
          transform: scale(1.1)
     }

     25% {
          -webkit-transform: translateY(-30px);
          transform: translateY(-30px)
     }

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

     75% {
          -webkit-transform: translateY(30px);
          transform: translateY(30px)
     }

     100% {
          -webkit-transform: translateY(0);
          transform: translateY(0);
          -webkit-transform: scale(1);
          transform: scale(1)
     }
}

@-webkit-keyframes ball-pulse-rise-odd {
     0% {
          -webkit-transform: scale(0.4);
          transform: scale(0.4)
     }

     25% {
          -webkit-transform: translateY(30px);
          transform: translateY(30px)
     }

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

     75% {
          -webkit-transform: translateY(-30px);
          transform: translateY(-30px)
     }

     100% {
          -webkit-transform: translateY(0);
          transform: translateY(0);
          -webkit-transform: scale(0.75);
          transform: scale(0.75)
     }
}

@keyframes ball-pulse-rise-odd {
     0% {
          -webkit-transform: scale(0.4);
          transform: scale(0.4)
     }

     25% {
          -webkit-transform: translateY(30px);
          transform: translateY(30px)
     }

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

     75% {
          -webkit-transform: translateY(-30px);
          transform: translateY(-30px)
     }

     100% {
          -webkit-transform: translateY(0);
          transform: translateY(0);
          -webkit-transform: scale(0.75);
          transform: scale(0.75)
     }
}

.ball-pulse-rise>div {
     background-color: #fff;
     width: 15px;
     height: 15px;
     border-radius: 100%;
     margin: 2px;
     -webkit-animation-fill-mode: both;
     animation-fill-mode: both;
     display: inline-block;
     -webkit-animation-duration: 1s;
     animation-duration: 1s;
     -webkit-animation-timing-function: cubic-bezier(.15, .46, .9, .6);
     animation-timing-function: cubic-bezier(.15, .46, .9, .6);
     -webkit-animation-iteration-count: infinite;
     animation-iteration-count: infinite;
     -webkit-animation-delay: 0;
     animation-delay: 0
}

.ball-pulse-rise>div:nth-child(2n) {
     -webkit-animation-name: ball-pulse-rise-even;
     animation-name: ball-pulse-rise-even
}

.ball-pulse-rise>div:nth-child(2n-1) {
     -webkit-animation-name: ball-pulse-rise-odd;
     animation-name: ball-pulse-rise-odd
}

@-webkit-keyframes ball-grid-beat {
     50% {
          opacity: .7
     }

     100% {
          opacity: 1
     }
}

@keyframes ball-grid-beat {
     50% {
          opacity: .7
     }

     100% {
          opacity: 1
     }
}

.ball-grid-beat {
     width: 57px
}

.ball-grid-beat>div:nth-child(1) {
     -webkit-animation-delay: -.07s;
     animation-delay: -.07s;
     -webkit-animation-duration: 1.53s;
     animation-duration: 1.53s
}

.ball-grid-beat>div:nth-child(2) {
     -webkit-animation-delay: .72s;
     animation-delay: .72s;
     -webkit-animation-duration: .94s;
     animation-duration: .94s
}

.ball-grid-beat>div:nth-child(3) {
     -webkit-animation-delay: .11s;
     animation-delay: .11s;
     -webkit-animation-duration: 1.25s;
     animation-duration: 1.25s
}

.ball-grid-beat>div:nth-child(4) {
     -webkit-animation-delay: .13s;
     animation-delay: .13s;
     -webkit-animation-duration: 1.01s;
     animation-duration: 1.01s
}

.ball-grid-beat>div:nth-child(5) {
     -webkit-animation-delay: .1s;
     animation-delay: .1s;
     -webkit-animation-duration: 1.2s;
     animation-duration: 1.2s
}

.ball-grid-beat>div:nth-child(6) {
     -webkit-animation-delay: .18s;
     animation-delay: .18s;
     -webkit-animation-duration: .97s;
     animation-duration: .97s
}

.ball-grid-beat>div:nth-child(7) {
     -webkit-animation-delay: -.09s;
     animation-delay: -.09s;
     -webkit-animation-duration: .67s;
     animation-duration: .67s
}

.ball-grid-beat>div:nth-child(8) {
     -webkit-animation-delay: .42s;
     animation-delay: .42s;
     -webkit-animation-duration: .92s;
     animation-duration: .92s
}

.ball-grid-beat>div:nth-child(9) {
     -webkit-animation-delay: .52s;
     animation-delay: .52s;
     -webkit-animation-duration: 1.43s;
     animation-duration: 1.43s
}

.ball-grid-beat>div {
     background-color: #fff;
     width: 15px;
     height: 15px;
     border-radius: 100%;
     margin: 2px;
     -webkit-animation-fill-mode: both;
     animation-fill-mode: both;
     display: inline-block;
     float: left;
     -webkit-animation-name: ball-grid-beat;
     animation-name: ball-grid-beat;
     -webkit-animation-iteration-count: infinite;
     animation-iteration-count: infinite;
     -webkit-animation-delay: 0;
     animation-delay: 0
}

@-webkit-keyframes ball-grid-pulse {
     0% {
          -webkit-transform: scale(1);
          transform: scale(1)
     }

     50% {
          -webkit-transform: scale(0.5);
          transform: scale(0.5);
          opacity: .7
     }

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

@keyframes ball-grid-pulse {
     0% {
          -webkit-transform: scale(1);
          transform: scale(1)
     }

     50% {
          -webkit-transform: scale(0.5);
          transform: scale(0.5);
          opacity: .7
     }

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

.ball-grid-pulse {
     width: 57px
}

.ball-grid-pulse>div:nth-child(1) {
     -webkit-animation-delay: .73s;
     animation-delay: .73s;
     -webkit-animation-duration: 1.3s;
     animation-duration: 1.3s
}

.ball-grid-pulse>div:nth-child(2) {
     -webkit-animation-delay: .32s;
     animation-delay: .32s;
     -webkit-animation-duration: 1.3s;
     animation-duration: 1.3s
}

.ball-grid-pulse>div:nth-child(3) {
     -webkit-animation-delay: .71s;
     animation-delay: .71s;
     -webkit-animation-duration: .88s;
     animation-duration: .88s
}

.ball-grid-pulse>div:nth-child(4) {
     -webkit-animation-delay: .62s;
     animation-delay: .62s;
     -webkit-animation-duration: 1.06s;
     animation-duration: 1.06s
}

.ball-grid-pulse>div:nth-child(5) {
     -webkit-animation-delay: .31s;
     animation-delay: .31s;
     -webkit-animation-duration: .62s;
     animation-duration: .62s
}

.ball-grid-pulse>div:nth-child(6) {
     -webkit-animation-delay: -.14s;
     animation-delay: -.14s;
     -webkit-animation-duration: 1.48s;
     animation-duration: 1.48s
}

.ball-grid-pulse>div:nth-child(7) {
     -webkit-animation-delay: -.1s;
     animation-delay: -.1s;
     -webkit-animation-duration: 1.47s;
     animation-duration: 1.47s
}

.ball-grid-pulse>div:nth-child(8) {
     -webkit-animation-delay: .4s;
     animation-delay: .4s;
     -webkit-animation-duration: 1.49s;
     animation-duration: 1.49s
}

.ball-grid-pulse>div:nth-child(9) {
     -webkit-animation-delay: .73s;
     animation-delay: .73s;
     -webkit-animation-duration: .7s;
     animation-duration: .7s
}

.ball-grid-pulse>div {
     background-color: #fff;
     width: 15px;
     height: 15px;
     border-radius: 100%;
     margin: 2px;
     -webkit-animation-fill-mode: both;
     animation-fill-mode: both;
     display: inline-block;
     float: left;
     -webkit-animation-name: ball-grid-pulse;
     animation-name: ball-grid-pulse;
     -webkit-animation-iteration-count: infinite;
     animation-iteration-count: infinite;
     -webkit-animation-delay: 0;
     animation-delay: 0
}

@-webkit-keyframes ball-spin-fade-loader {
     50% {
          opacity: .3;
          -webkit-transform: scale(0.4);
          transform: scale(0.4)
     }

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

@keyframes ball-spin-fade-loader {
     50% {
          opacity: .3;
          -webkit-transform: scale(0.4);
          transform: scale(0.4)
     }

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

.ball-spin-fade-loader {
     position: relative;
     top: -10px;
     left: -10px
}

.ball-spin-fade-loader>div:nth-child(1) {
     top: 25px;
     left: 0;
     -webkit-animation: ball-spin-fade-loader 1s -.96s infinite linear;
     animation: ball-spin-fade-loader 1s -.96s infinite linear
}

.ball-spin-fade-loader>div:nth-child(2) {
     top: 17.05px;
     left: 17.05px;
     -webkit-animation: ball-spin-fade-loader 1s -.84s infinite linear;
     animation: ball-spin-fade-loader 1s -.84s infinite linear
}

.ball-spin-fade-loader>div:nth-child(3) {
     top: 0;
     left: 25px;
     -webkit-animation: ball-spin-fade-loader 1s -.72s infinite linear;
     animation: ball-spin-fade-loader 1s -.72s infinite linear
}

.ball-spin-fade-loader>div:nth-child(4) {
     top: -17.05px;
     left: 17.05px;
     -webkit-animation: ball-spin-fade-loader 1s -.6s infinite linear;
     animation: ball-spin-fade-loader 1s -.6s infinite linear
}

.ball-spin-fade-loader>div:nth-child(5) {
     top: -25px;
     left: 0;
     -webkit-animation: ball-spin-fade-loader 1s -.48s infinite linear;
     animation: ball-spin-fade-loader 1s -.48s infinite linear
}

.ball-spin-fade-loader>div:nth-child(6) {
     top: -17.05px;
     left: -17.05px;
     -webkit-animation: ball-spin-fade-loader 1s -.36s infinite linear;
     animation: ball-spin-fade-loader 1s -.36s infinite linear
}

.ball-spin-fade-loader>div:nth-child(7) {
     top: 0;
     left: -25px;
     -webkit-animation: ball-spin-fade-loader 1s -.24s infinite linear;
     animation: ball-spin-fade-loader 1s -.24s infinite linear
}

.ball-spin-fade-loader>div:nth-child(8) {
     top: 17.05px;
     left: -17.05px;
     -webkit-animation: ball-spin-fade-loader 1s -.12s infinite linear;
     animation: ball-spin-fade-loader 1s -.12s infinite linear
}

.ball-spin-fade-loader>div {
     background-color: #fff;
     width: 15px;
     height: 15px;
     border-radius: 100%;
     margin: 2px;
     -webkit-animation-fill-mode: both;
     animation-fill-mode: both;
     position: absolute
}

@-webkit-keyframes ball-spin-loader {
     75% {
          opacity: .2
     }

     100% {
          opacity: 1
     }
}

@keyframes ball-spin-loader {
     75% {
          opacity: .2
     }

     100% {
          opacity: 1
     }
}

.ball-spin-loader {
     position: relative
}

.ball-spin-loader>span:nth-child(1) {
     top: 45px;
     left: 0;
     -webkit-animation: ball-spin-loader 2s .9s infinite linear;
     animation: ball-spin-loader 2s .9s infinite linear
}

.ball-spin-loader>span:nth-child(2) {
     top: 30.68px;
     left: 30.68px;
     -webkit-animation: ball-spin-loader 2s 1.8s infinite linear;
     animation: ball-spin-loader 2s 1.8s infinite linear
}

.ball-spin-loader>span:nth-child(3) {
     top: 0;
     left: 45px;
     -webkit-animation: ball-spin-loader 2s 2.7s infinite linear;
     animation: ball-spin-loader 2s 2.7s infinite linear
}

.ball-spin-loader>span:nth-child(4) {
     top: -30.68px;
     left: 30.68px;
     -webkit-animation: ball-spin-loader 2s 3.6s infinite linear;
     animation: ball-spin-loader 2s 3.6s infinite linear
}

.ball-spin-loader>span:nth-child(5) {
     top: -45px;
     left: 0;
     -webkit-animation: ball-spin-loader 2s 4.5s infinite linear;
     animation: ball-spin-loader 2s 4.5s infinite linear
}

.ball-spin-loader>span:nth-child(6) {
     top: -30.68px;
     left: -30.68px;
     -webkit-animation: ball-spin-loader 2s 5.4s infinite linear;
     animation: ball-spin-loader 2s 5.4s infinite linear
}

.ball-spin-loader>span:nth-child(7) {
     top: 0;
     left: -45px;
     -webkit-animation: ball-spin-loader 2s 6.3s infinite linear;
     animation: ball-spin-loader 2s 6.3s infinite linear
}

.ball-spin-loader>span:nth-child(8) {
     top: 30.68px;
     left: -30.68px;
     -webkit-animation: ball-spin-loader 2s 7.2s infinite linear;
     animation: ball-spin-loader 2s 7.2s infinite linear
}

.ball-spin-loader>div {
     -webkit-animation-fill-mode: both;
     animation-fill-mode: both;
     position: absolute;
     width: 15px;
     height: 15px;
     border-radius: 100%;
     background: green
}

@-webkit-keyframes ball-zig {
     33% {
          -webkit-transform: translate(-15px, -30px);
          transform: translate(-15px, -30px)
     }

     66% {
          -webkit-transform: translate(15px, -30px);
          transform: translate(15px, -30px)
     }

     100% {
          -webkit-transform: translate(0, 0);
          transform: translate(0, 0)
     }
}

@keyframes ball-zig {
     33% {
          -webkit-transform: translate(-15px, -30px);
          transform: translate(-15px, -30px)
     }

     66% {
          -webkit-transform: translate(15px, -30px);
          transform: translate(15px, -30px)
     }

     100% {
          -webkit-transform: translate(0, 0);
          transform: translate(0, 0)
     }
}

@-webkit-keyframes ball-zag {
     33% {
          -webkit-transform: translate(15px, 30px);
          transform: translate(15px, 30px)
     }

     66% {
          -webkit-transform: translate(-15px, 30px);
          transform: translate(-15px, 30px)
     }

     100% {
          -webkit-transform: translate(0, 0);
          transform: translate(0, 0)
     }
}

@keyframes ball-zag {
     33% {
          -webkit-transform: translate(15px, 30px);
          transform: translate(15px, 30px)
     }

     66% {
          -webkit-transform: translate(-15px, 30px);
          transform: translate(-15px, 30px)
     }

     100% {
          -webkit-transform: translate(0, 0);
          transform: translate(0, 0)
     }
}

.ball-zig-zag {
     position: relative;
     -webkit-transform: translate(-15px, -15px);
     -ms-transform: translate(-15px, -15px);
     transform: translate(-15px, -15px)
}

.ball-zig-zag>div {
     background-color: #fff;
     width: 15px;
     height: 15px;
     border-radius: 100%;
     margin: 2px 2px 2px 15px;
     -webkit-animation-fill-mode: both;
     animation-fill-mode: both;
     position: absolute;
     top: 4px;
     left: -7px
}

.ball-zig-zag>div:first-child {
     -webkit-animation: ball-zig .7s 0s infinite linear;
     animation: ball-zig .7s 0s infinite linear
}

.ball-zig-zag>div:last-child {
     -webkit-animation: ball-zag .7s 0s infinite linear;
     animation: ball-zag .7s 0s infinite linear
}

@-webkit-keyframes ball-zig-deflect {
     17% {
          -webkit-transform: translate(-15px, -30px);
          transform: translate(-15px, -30px)
     }

     34% {
          -webkit-transform: translate(15px, -30px);
          transform: translate(15px, -30px)
     }

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

     67% {
          -webkit-transform: translate(15px, -30px);
          transform: translate(15px, -30px)
     }

     84% {
          -webkit-transform: translate(-15px, -30px);
          transform: translate(-15px, -30px)
     }

     100% {
          -webkit-transform: translate(0, 0);
          transform: translate(0, 0)
     }
}

@keyframes ball-zig-deflect {
     17% {
          -webkit-transform: translate(-15px, -30px);
          transform: translate(-15px, -30px)
     }

     34% {
          -webkit-transform: translate(15px, -30px);
          transform: translate(15px, -30px)
     }

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

     67% {
          -webkit-transform: translate(15px, -30px);
          transform: translate(15px, -30px)
     }

     84% {
          -webkit-transform: translate(-15px, -30px);
          transform: translate(-15px, -30px)
     }

     100% {
          -webkit-transform: translate(0, 0);
          transform: translate(0, 0)
     }
}

@-webkit-keyframes ball-zag-deflect {
     17% {
          -webkit-transform: translate(15px, 30px);
          transform: translate(15px, 30px)
     }

     34% {
          -webkit-transform: translate(-15px, 30px);
          transform: translate(-15px, 30px)
     }

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

     67% {
          -webkit-transform: translate(-15px, 30px);
          transform: translate(-15px, 30px)
     }

     84% {
          -webkit-transform: translate(15px, 30px);
          transform: translate(15px, 30px)
     }

     100% {
          -webkit-transform: translate(0, 0);
          transform: translate(0, 0)
     }
}

@keyframes ball-zag-deflect {
     17% {
          -webkit-transform: translate(15px, 30px);
          transform: translate(15px, 30px)
     }

     34% {
          -webkit-transform: translate(-15px, 30px);
          transform: translate(-15px, 30px)
     }

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

     67% {
          -webkit-transform: translate(-15px, 30px);
          transform: translate(-15px, 30px)
     }

     84% {
          -webkit-transform: translate(15px, 30px);
          transform: translate(15px, 30px)
     }

     100% {
          -webkit-transform: translate(0, 0);
          transform: translate(0, 0)
     }
}

.ball-zig-zag-deflect {
     position: relative;
     -webkit-transform: translate(-15px, -15px);
     -ms-transform: translate(-15px, -15px);
     transform: translate(-15px, -15px)
}

.ball-zig-zag-deflect>div {
     background-color: #fff;
     width: 15px;
     height: 15px;
     border-radius: 100%;
     margin: 2px 2px 2px 15px;
     -webkit-animation-fill-mode: both;
     animation-fill-mode: both;
     position: absolute;
     top: 4px;
     left: -7px
}

.ball-zig-zag-deflect>div:first-child {
     -webkit-animation: ball-zig-deflect 1.5s 0s infinite linear;
     animation: ball-zig-deflect 1.5s 0s infinite linear
}

.ball-zig-zag-deflect>div:last-child {
     -webkit-animation: ball-zag-deflect 1.5s 0s infinite linear;
     animation: ball-zag-deflect 1.5s 0s infinite linear
}

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

     50% {
          -webkit-transform: scaley(0.4);
          transform: scaley(0.4)
     }

     100% {
          -webkit-transform: scaley(1);
          transform: scaley(1)
     }
}

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

     50% {
          -webkit-transform: scaley(0.4);
          transform: scaley(0.4)
     }

     100% {
          -webkit-transform: scaley(1);
          transform: scaley(1)
     }
}

.line-scale>div:nth-child(1) {
     -webkit-animation: line-scale 1s -.4s infinite cubic-bezier(.2, .68, .18, 1.08);
     animation: line-scale 1s -.4s infinite cubic-bezier(.2, .68, .18, 1.08)
}

.line-scale>div:nth-child(2) {
     -webkit-animation: line-scale 1s -.3s infinite cubic-bezier(.2, .68, .18, 1.08);
     animation: line-scale 1s -.3s infinite cubic-bezier(.2, .68, .18, 1.08)
}

.line-scale>div:nth-child(3) {
     -webkit-animation: line-scale 1s -.2s infinite cubic-bezier(.2, .68, .18, 1.08);
     animation: line-scale 1s -.2s infinite cubic-bezier(.2, .68, .18, 1.08)
}

.line-scale>div:nth-child(4) {
     -webkit-animation: line-scale 1s -.1s infinite cubic-bezier(.2, .68, .18, 1.08);
     animation: line-scale 1s -.1s infinite cubic-bezier(.2, .68, .18, 1.08)
}

.line-scale>div:nth-child(5) {
     -webkit-animation: line-scale 1s 0s infinite cubic-bezier(.2, .68, .18, 1.08);
     animation: line-scale 1s 0s infinite cubic-bezier(.2, .68, .18, 1.08)
}

.line-scale>div {
     background-color: #fff;
     width: 4px;
     height: 35px;
     border-radius: 2px;
     margin: 2px;
     -webkit-animation-fill-mode: both;
     animation-fill-mode: both;
     display: inline-block
}

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

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

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

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

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

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

.line-scale-party>div:nth-child(1) {
     -webkit-animation-delay: .23s;
     animation-delay: .23s;
     -webkit-animation-duration: 1.1s;
     animation-duration: 1.1s
}

.line-scale-party>div:nth-child(2) {
     -webkit-animation-delay: .09s;
     animation-delay: .09s;
     -webkit-animation-duration: 1s;
     animation-duration: 1s
}

.line-scale-party>div:nth-child(3) {
     -webkit-animation-delay: .44s;
     animation-delay: .44s;
     -webkit-animation-duration: .65s;
     animation-duration: .65s
}

.line-scale-party>div:nth-child(4) {
     -webkit-animation-delay: -.12s;
     animation-delay: -.12s;
     -webkit-animation-duration: 1.01s;
     animation-duration: 1.01s
}

.line-scale-party>div {
     background-color: #fff;
     width: 4px;
     height: 35px;
     border-radius: 2px;
     margin: 2px;
     -webkit-animation-fill-mode: both;
     animation-fill-mode: both;
     display: inline-block;
     -webkit-animation-name: line-scale-party;
     animation-name: line-scale-party;
     -webkit-animation-iteration-count: infinite;
     animation-iteration-count: infinite;
     -webkit-animation-delay: 0;
     animation-delay: 0
}

@-webkit-keyframes line-scale-pulse-out {
     0% {
          -webkit-transform: scaley(1);
          transform: scaley(1)
     }

     50% {
          -webkit-transform: scaley(0.4);
          transform: scaley(0.4)
     }

     100% {
          -webkit-transform: scaley(1);
          transform: scaley(1)
     }
}

@keyframes line-scale-pulse-out {
     0% {
          -webkit-transform: scaley(1);
          transform: scaley(1)
     }

     50% {
          -webkit-transform: scaley(0.4);
          transform: scaley(0.4)
     }

     100% {
          -webkit-transform: scaley(1);
          transform: scaley(1)
     }
}

.line-scale-pulse-out>div {
     background-color: #fff;
     width: 4px;
     height: 35px;
     border-radius: 2px;
     margin: 2px;
     display: inline-block;
     -webkit-animation: line-scale-pulse-out .9s -.6s infinite cubic-bezier(.85, .25, .37, .85);
     animation: line-scale-pulse-out .9s -.6s infinite cubic-bezier(.85, .25, .37, .85)
}

.line-scale-pulse-out>div:nth-child(2),
.line-scale-pulse-out>div:nth-child(4) {
     -webkit-animation-delay: -.4s !important;
     animation-delay: -.4s !important
}

.line-scale-pulse-out>div:nth-child(1),
.line-scale-pulse-out>div:nth-child(5) {
     -webkit-animation-delay: -.2s !important;
     animation-delay: -.2s !important
}

@-webkit-keyframes line-scale-pulse-out-rapid {
     0% {
          -webkit-transform: scaley(1);
          transform: scaley(1)
     }

     80% {
          -webkit-transform: scaley(0.3);
          transform: scaley(0.3)
     }

     90% {
          -webkit-transform: scaley(1);
          transform: scaley(1)
     }
}

@keyframes line-scale-pulse-out-rapid {
     0% {
          -webkit-transform: scaley(1);
          transform: scaley(1)
     }

     80% {
          -webkit-transform: scaley(0.3);
          transform: scaley(0.3)
     }

     90% {
          -webkit-transform: scaley(1);
          transform: scaley(1)
     }
}

.line-scale-pulse-out-rapid>div {
     background-color: #fff;
     width: 4px;
     height: 35px;
     border-radius: 2px;
     margin: 2px;
     display: inline-block;
     -webkit-animation: line-scale-pulse-out-rapid .9s -.5s infinite cubic-bezier(.11, .49, .38, .78);
     animation: line-scale-pulse-out-rapid .9s -.5s infinite cubic-bezier(.11, .49, .38, .78)
}

.line-scale-pulse-out-rapid>div:nth-child(2),
.line-scale-pulse-out-rapid>div:nth-child(4) {
     -webkit-animation-delay: -.25s !important;
     animation-delay: -.25s !important
}

.line-scale-pulse-out-rapid>div:nth-child(1),
.line-scale-pulse-out-rapid>div:nth-child(5) {
     -webkit-animation-delay: 0s !important;
     animation-delay: 0s !important
}

@-webkit-keyframes line-spin-fade-loader {
     50% {
          opacity: .3
     }

     100% {
          opacity: 1
     }
}

@keyframes line-spin-fade-loader {
     50% {
          opacity: .3
     }

     100% {
          opacity: 1
     }
}

.line-spin-fade-loader {
     position: relative;
     top: -10px;
     left: -4px
}

.line-spin-fade-loader>div:nth-child(1) {
     top: 20px;
     left: 0;
     -webkit-animation: line-spin-fade-loader 1.2s -.84s infinite ease-in-out;
     animation: line-spin-fade-loader 1.2s -.84s infinite ease-in-out
}

.line-spin-fade-loader>div:nth-child(2) {
     top: 13.64px;
     left: 13.64px;
     -webkit-transform: rotate(-45deg);
     -ms-transform: rotate(-45deg);
     transform: rotate(-45deg);
     -webkit-animation: line-spin-fade-loader 1.2s -.72s infinite ease-in-out;
     animation: line-spin-fade-loader 1.2s -.72s infinite ease-in-out
}

.line-spin-fade-loader>div:nth-child(3) {
     top: 0;
     left: 20px;
     -webkit-transform: rotate(90deg);
     -ms-transform: rotate(90deg);
     transform: rotate(90deg);
     -webkit-animation: line-spin-fade-loader 1.2s -.6s infinite ease-in-out;
     animation: line-spin-fade-loader 1.2s -.6s infinite ease-in-out
}

.line-spin-fade-loader>div:nth-child(4) {
     top: -13.64px;
     left: 13.64px;
     -webkit-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
     transform: rotate(45deg);
     -webkit-animation: line-spin-fade-loader 1.2s -.48s infinite ease-in-out;
     animation: line-spin-fade-loader 1.2s -.48s infinite ease-in-out
}

.line-spin-fade-loader>div:nth-child(5) {
     top: -20px;
     left: 0;
     -webkit-animation: line-spin-fade-loader 1.2s -.36s infinite ease-in-out;
     animation: line-spin-fade-loader 1.2s -.36s infinite ease-in-out
}

.line-spin-fade-loader>div:nth-child(6) {
     top: -13.64px;
     left: -13.64px;
     -webkit-transform: rotate(-45deg);
     -ms-transform: rotate(-45deg);
     transform: rotate(-45deg);
     -webkit-animation: line-spin-fade-loader 1.2s -.24s infinite ease-in-out;
     animation: line-spin-fade-loader 1.2s -.24s infinite ease-in-out
}

.line-spin-fade-loader>div:nth-child(7) {
     top: 0;
     left: -20px;
     -webkit-transform: rotate(90deg);
     -ms-transform: rotate(90deg);
     transform: rotate(90deg);
     -webkit-animation: line-spin-fade-loader 1.2s -.12s infinite ease-in-out;
     animation: line-spin-fade-loader 1.2s -.12s infinite ease-in-out
}

.line-spin-fade-loader>div:nth-child(8) {
     top: 13.64px;
     left: -13.64px;
     -webkit-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
     transform: rotate(45deg);
     -webkit-animation: line-spin-fade-loader 1.2s 0s infinite ease-in-out;
     animation: line-spin-fade-loader 1.2s 0s infinite ease-in-out
}

.line-spin-fade-loader>div {
     background-color: #fff;
     border-radius: 2px;
     margin: 2px;
     -webkit-animation-fill-mode: both;
     animation-fill-mode: both;
     position: absolute;
     width: 5px;
     height: 15px
}

@-webkit-keyframes triangle-skew-spin {
     25% {
          -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
          transform: perspective(100px) rotateX(180deg) rotateY(0)
     }

     50% {
          -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
          transform: perspective(100px) rotateX(180deg) rotateY(180deg)
     }

     75% {
          -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
          transform: perspective(100px) rotateX(0) rotateY(180deg)
     }

     100% {
          -webkit-transform: perspective(100px) rotateX(0) rotateY(0);
          transform: perspective(100px) rotateX(0) rotateY(0)
     }
}

@keyframes triangle-skew-spin {
     25% {
          -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
          transform: perspective(100px) rotateX(180deg) rotateY(0)
     }

     50% {
          -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
          transform: perspective(100px) rotateX(180deg) rotateY(180deg)
     }

     75% {
          -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
          transform: perspective(100px) rotateX(0) rotateY(180deg)
     }

     100% {
          -webkit-transform: perspective(100px) rotateX(0) rotateY(0);
          transform: perspective(100px) rotateX(0) rotateY(0)
     }
}

.triangle-skew-spin>div {
     width: 0;
     height: 0;
     border-left: 20px solid transparent;
     border-right: 20px solid transparent;
     border-bottom: 20px solid #fff;
     -webkit-animation: triangle-skew-spin 3s 0s cubic-bezier(.09, .57, .49, .9) infinite;
     animation: triangle-skew-spin 3s 0s cubic-bezier(.09, .57, .49, .9) infinite
}

@-webkit-keyframes square-spin {
     25% {
          -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
          transform: perspective(100px) rotateX(180deg) rotateY(0)
     }

     50% {
          -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
          transform: perspective(100px) rotateX(180deg) rotateY(180deg)
     }

     75% {
          -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
          transform: perspective(100px) rotateX(0) rotateY(180deg)
     }

     100% {
          -webkit-transform: perspective(100px) rotateX(0) rotateY(0);
          transform: perspective(100px) rotateX(0) rotateY(0)
     }
}

@keyframes square-spin {
     25% {
          -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
          transform: perspective(100px) rotateX(180deg) rotateY(0)
     }

     50% {
          -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
          transform: perspective(100px) rotateX(180deg) rotateY(180deg)
     }

     75% {
          -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
          transform: perspective(100px) rotateX(0) rotateY(180deg)
     }

     100% {
          -webkit-transform: perspective(100px) rotateX(0) rotateY(0);
          transform: perspective(100px) rotateX(0) rotateY(0)
     }
}

.square-spin>div {
     width: 50px;
     height: 50px;
     background: #fff;
     border: 1px solid red;
     -webkit-animation: square-spin 3s 0s cubic-bezier(.09, .57, .49, .9) infinite;
     animation: square-spin 3s 0s cubic-bezier(.09, .57, .49, .9) infinite
}

@-webkit-keyframes rotate_pacman_half_up {
     0% {
          -webkit-transform: rotate(270deg);
          transform: rotate(270deg)
     }

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

     100% {
          -webkit-transform: rotate(270deg);
          transform: rotate(270deg)
     }
}

@keyframes rotate_pacman_half_up {
     0% {
          -webkit-transform: rotate(270deg);
          transform: rotate(270deg)
     }

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

     100% {
          -webkit-transform: rotate(270deg);
          transform: rotate(270deg)
     }
}

@-webkit-keyframes rotate_pacman_half_down {
     0% {
          -webkit-transform: rotate(90deg);
          transform: rotate(90deg)
     }

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

     100% {
          -webkit-transform: rotate(90deg);
          transform: rotate(90deg)
     }
}

@keyframes rotate_pacman_half_down {
     0% {
          -webkit-transform: rotate(90deg);
          transform: rotate(90deg)
     }

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

     100% {
          -webkit-transform: rotate(90deg);
          transform: rotate(90deg)
     }
}

@-webkit-keyframes pacman-balls {
     75% {
          opacity: .7
     }

     100% {
          -webkit-transform: translate(-100px, -6.25px);
          transform: translate(-100px, -6.25px)
     }
}

@keyframes pacman-balls {
     75% {
          opacity: .7
     }

     100% {
          -webkit-transform: translate(-100px, -6.25px);
          transform: translate(-100px, -6.25px)
     }
}

.pacman {
     position: relative
}

.pacman>div:nth-child(3) {
     -webkit-animation: pacman-balls 1s -.66s infinite linear;
     animation: pacman-balls 1s -.66s infinite linear
}

.pacman>div:nth-child(4) {
     -webkit-animation: pacman-balls 1s -.33s infinite linear;
     animation: pacman-balls 1s -.33s infinite linear
}

.pacman>div:nth-child(5) {
     -webkit-animation: pacman-balls 1s 0s infinite linear;
     animation: pacman-balls 1s 0s infinite linear
}

.pacman>div:first-of-type {
     width: 0;
     height: 0;
     border-right: 25px solid transparent;
     border-top: 25px solid #fff;
     border-left: 25px solid #fff;
     border-bottom: 25px solid #fff;
     border-radius: 25px;
     -webkit-animation: rotate_pacman_half_up .5s 0s infinite;
     animation: rotate_pacman_half_up .5s 0s infinite;
     position: relative;
     left: -30px
}

.pacman>div:nth-child(2) {
     width: 0;
     height: 0;
     border-right: 25px solid transparent;
     border-top: 25px solid #fff;
     border-left: 25px solid #fff;
     border-bottom: 25px solid #fff;
     border-radius: 25px;
     -webkit-animation: rotate_pacman_half_down .5s 0s infinite;
     animation: rotate_pacman_half_down .5s 0s infinite;
     margin-top: -50px;
     position: relative;
     left: -30px
}

.pacman>div:nth-child(3),
.pacman>div:nth-child(4),
.pacman>div:nth-child(5),
.pacman>div:nth-child(6) {
     background-color: #fff;
     border-radius: 100%;
     margin: 2px;
     width: 10px;
     height: 10px;
     position: absolute;
     -webkit-transform: translate(0, -6.25px);
     -ms-transform: translate(0, -6.25px);
     transform: translate(0, -6.25px);
     top: 25px;
     left: 70px
}

@-webkit-keyframes cube-transition {
     25% {
          -webkit-transform: translateX(50px) scale(0.5) rotate(-90deg);
          transform: translateX(50px) scale(0.5) rotate(-90deg)
     }

     50% {
          -webkit-transform: translate(50px, 50px) rotate(-180deg);
          transform: translate(50px, 50px) rotate(-180deg)
     }

     75% {
          -webkit-transform: translateY(50px) scale(0.5) rotate(-270deg);
          transform: translateY(50px) scale(0.5) rotate(-270deg)
     }

     100% {
          -webkit-transform: rotate(-360deg);
          transform: rotate(-360deg)
     }
}

@keyframes cube-transition {
     25% {
          -webkit-transform: translateX(50px) scale(0.5) rotate(-90deg);
          transform: translateX(50px) scale(0.5) rotate(-90deg)
     }

     50% {
          -webkit-transform: translate(50px, 50px) rotate(-180deg);
          transform: translate(50px, 50px) rotate(-180deg)
     }

     75% {
          -webkit-transform: translateY(50px) scale(0.5) rotate(-270deg);
          transform: translateY(50px) scale(0.5) rotate(-270deg)
     }

     100% {
          -webkit-transform: rotate(-360deg);
          transform: rotate(-360deg)
     }
}

.cube-transition {
     position: relative;
     -webkit-transform: translate(-25px, -25px);
     -ms-transform: translate(-25px, -25px);
     transform: translate(-25px, -25px)
}

.cube-transition>div {
     width: 10px;
     height: 10px;
     position: absolute;
     top: -5px;
     left: -5px;
     background-color: #fff;
     -webkit-animation: cube-transition 1.6s 0s infinite ease-in-out;
     animation: cube-transition 1.6s 0s infinite ease-in-out
}

.cube-transition>div:last-child {
     -webkit-animation-delay: -.8s;
     animation-delay: -.8s
}

@-webkit-keyframes spin-rotate {
     0% {
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg)
     }

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

     100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg)
     }
}

@keyframes spin-rotate {
     0% {
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg)
     }

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

     100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg)
     }
}

.semi-circle-spin {
     position: relative;
     width: 35px;
     height: 35px;
     overflow: hidden
}

.semi-circle-spin>div {
     position: absolute;
     border-width: 0;
     border-radius: 100%;
     -webkit-animation: spin-rotate .6s 0s infinite linear;
     animation: spin-rotate .6s 0s infinite linear;
     background-image: -webkit-linear-gradient(transparent 0, transparent 70%, #fff 30%, #fff 100%);
     background-image: linear-gradient(transparent 0, transparent 70%, #fff 30%, #fff 100%);
     width: 100%;
     height: 100%
}

.preloader {
     position: fixed;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     z-index: 11;
     background: var(--zt-light-color);
}

.preloader .ball-scale-ripple {
     position: absolute;
     display: block;
     left: 50%;
     top: 50%;
     margin-left: -25px;
     margin-top: -25px
}

.preloader .ball-scale-ripple>div {
     border: 2px solid #151515
}

.no-js #loader {
     display: none
}

.js #loader {
     display: block;
     position: absolute;
     left: 100px;
     top: 0
}

/*============================================================================================*/
/*=== 5. SLICK SLIDER ========================================================================*/
.slick-slider {
     position: relative;
     display: block;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
     -webkit-touch-callout: none;
     -khtml-user-select: none;
     -ms-touch-action: pan-y;
     touch-action: pan-y;
     -webkit-tap-highlight-color: transparent
}

.slick-slider:hover .slick-prev,
.slick-slider:hover .slick-next {
     opacity: 1;
}

.slick-list {
     position: relative;
     display: block;
     overflow: hidden;
     margin: 0;
     padding: 0
}

.slick-list:focus {
     outline: none
}

.slick-list.dragging {
     cursor: pointer;
     cursor: hand
}

.slick-slider .slick-track,
.slick-slider .slick-list {
     -webkit-transform: translate3d(0, 0, 0);
     -moz-transform: translate3d(0, 0, 0);
     -ms-transform: translate3d(0, 0, 0);
     -o-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0)
}

.slick-track {
     position: relative;
     top: 0;
     left: 0;
     display: block
}

.slick-track:before,
.slick-track:after {
     display: table;
     content: ''
}

.slick-track:after {
     clear: both
}

.slick-loading .slick-track {
     visibility: hidden
}

.slick-slide {
     display: none;
     float: left;
     height: 100%;
     min-height: 1px
}

[dir='rtl'] .slick-slide {
     float: right
}

.slick-slide img {
     display: block
}

.slick-slide.slick-loading img {
     display: none
}

.slick-slide.dragging img {
     pointer-events: none
}

.slick-initialized .slick-slide {
     display: block
}

.slick-loading .slick-slide {
     visibility: hidden
}

.slick-vertical .slick-slide {
     display: block;
     height: auto;
     border: 1px solid transparent
}

.slick-arrow.slick-hidden {
     display: none
}

.slick-loading .slick-list {
     background: var(--zt-light-color) url(images/ajax-loader.gif) center center no-repeat
}

.slick-prev,
.slick-next {
     display: block;
     position: absolute;
     top: 42%;
     z-index: 30;
     font-size: 0;
     line-height: 0;
     width: 30px;
     height: 30px;
     padding: 0;
     cursor: pointer;
     border: none;
     outline: none;
     opacity: 0;
     filter: alpha(opacity=0);
     background: transparent;
     color: var(--zt-light-color);
     -webkit-transition: all .5s ease;
     -moz-transition: all .5s ease;
     -o-transition: all .5s ease;
     transition: all .5s ease
}

.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
     outline: none
}

.slick-prev:before,
.slick-next:before {
     font-size: 40px;
     line-height: 1;
     font-family: "Font Awesome 5 Pro";
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale
}

.slick-prev {
     left: 0
}

[dir='rtl'] .slick-prev {
     right: 0;
     left: auto
}

.slick-prev:before {
     content: "\f104"
}

[dir='rtl'] .slick-prev:before {
     content: "\f104"
}

.slick-next {
     right: 0
}

[dir='rtl'] .slick-next {
     right: auto;
     left: 0
}

.slick-next:before {
     content: "\f105"
}

[dir='rtl'] .slick-next:before {
     content: "\f105"
}

.slick-dots {
     position: absolute;
     bottom: -45px;
     display: block;
     width: 100%;
     padding: 0;
     list-style: none;
     text-align: center
}

.slick-dots li {
     position: relative;
     display: inline-block;
     width: 20px;
     height: 20px;
     margin: 0 5px;
     padding: 0;
     cursor: pointer
}

.slick-dots li button {
     display: block;
     width: 20px;
     height: 20px;
     padding: 5px;
     font-size: 0;
     line-height: 0;
     cursor: pointer;
     border: 0;
     outline: none;
     background: transparent;
     color: #c69b3c
}

.slick-dots li button:hover,
.slick-dots li button:focus {
     outline: none
}

.slick-dots li button:hover:before,
.slick-dots li button:focus:before {
     opacity: 1
}

.slick-dots li button:before {
     content: "\f111";
     position: absolute;
     top: 0;
     left: 0;
     width: 20px;
     height: 20px;
     line-height: 20px;
     font-size: 14px;
     text-align: center;
     font-family: "Font Awesome 5 Pro";
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale
}

.slick-dots li.slick-active button:before {
     color: var(--zt-light-color)
}

/*============================================================================================*/
/*=== 6. SELECT BOX CONTROL & Owl Carousel CONTROL ===========================================*/
select {
     background-color: var(--zt-light-color);
     border-width: 1px;
     border-style: solid;
     padding: 10px 30px 10px 8px;
     max-width: 400px;
     filter: none !important;
     position: relative;
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
     background-image: url(images/icon-select.png);
     background-position: right center;
     background-repeat: no-repeat
}

/*=== Owl Carousel CONTROL ===*/
.owl-theme .owl-controls {
     text-align: center
}

.owl-theme .owl-controls .owl-dot {
     display: inline-block
}

.owl-theme .owl-controls span {
     margin: 10px 3px;
     display: block;
     width: 8px;
     height: 8px;
     opacity: 1;
     -moz-opacity: 1;
     -khtml-opacity: 1;
     -webkit-opacity: 1;
     -ms-filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
     filter: alpha(opacity=100);
     -webkit-border-radius: 20px;
     -moz-border-radius: 20px;
     border-radius: 20px;
     background: #E6E6E6
}

/*============================================================================================*/
/*=== 7. SOCIALS ICON ========================================================================*/
.social-icons li {
     list-style: none;
     display: inline-block;
     float: left;
     text-align: center;
     width: 100%
}

.social-icons.icons-2 li {
     width: 50%
}

.social-icons.icons-3 li {
     width: 33.3%
}

.social-icons.icons-4 li {
     width: 25%
}

.social-icons.icons-5 li {
     width: 20%
}

.social-icons.icons-6 li {
     width: 16.6%
}

.social-icons.icons-7 li {
     width: 14.2%
}

.social-icons li a {
     position: relative;
     text-transform: uppercase;
     transition: 600ms
}

.social-icons li a:after {
     content: attr(data-hover);
     position: absolute;
     left: 0;
     bottom: 0;
     height: 0;
     padding-left: 22px;
     transform: rotateX(90deg);
     -webkit-transform: rotateX(90deg);
     -moz-transform: rotateX(90deg);
     -o-transform: rotateX(90deg);
     -ms-transform: rotateX(90deg);
     transition: 300ms;
     opacity: 1;
     filter: alpha(opacity=100)
}

.social-icons li a:hover:after {
     top: 0;
     height: 100%;
     transform: rotateX(0deg);
     -webkit-transform: rotateX(0deg);
     -moz-transform: rotateX(0deg);
     -o-transform: rotateX(0deg);
     -ms-transform: rotateX(0deg);
     opacity: 1;
     filter: alpha(opacity=100)
}

.social-icons li a:hover {
     color: transparent
}

.social-icons li a i.fa {
     padding-right: 5px
}

/*============================================================================================*/
/*=== 8. CUSTOM PLUGIN VISUAL & OTHER ========================================================*/
/* body .wpb_row{
	clear: both;
	margin: 0 -15px; 
} */


.vc_row.vc_row-o-equal-height .wpb_wrapper {
     height: 100%;
}

.wpb_button,
.wpb_content_element,
ul.wpb_thumbnails-fluid>li {
     margin-bottom: 25px;
}

.vc_tta.vc_general .vc_tta-panel-body {
     padding: 15px 0px !important;
}

.vc_col-has-fill>.vc_column-inner,
.vc_row-has-fill+.vc_row-full-width+.vc_row>.vc_column_container>.vc_column-inner,
.vc_row-has-fill+.vc_row>.vc_column_container>.vc_column-inner,
.vc_row-has-fill+.vc_vc_row>.vc_row>.vc_vc_column>.vc_column_container>.vc_column-inner,
.vc_row-has-fill+.vc_vc_row_inner>.vc_row>.vc_vc_column_inner>.vc_column_container>.vc_column-inner,
.vc_row-has-fill>.vc_column_container>.vc_column-inner,
.vc_row-has-fill>.vc_row>.vc_vc_column>.vc_column_container>.vc_column-inner,
.vc_row-has-fill>.vc_vc_column_inner>.vc_column_container>.vc_column-inner,
.vc_section.vc_section-has-fill,
.vc_section.vc_section-has-fill+.vc_row-full-width+.vc_section,
.vc_section.vc_section-has-fill+.vc_section {
     padding-top: 0;
}

body .vc_row-no-padding .wpb_column {
     padding-left: 0;
     padding-right: 0
}

/*=== HACK BORDER ===*/
body .vc_row.zwidth-incontent {
     margin-left: 0;
     width: 100%;
}

 body .vc_row.zwidth-incontent   .vc_column_container>.vc_column-inner {
     padding-left: 0;
     padding-right: 0;
}

.flexslider {
     overflow: hidden
}

.fr-close,
.fr-touch-close {
     position: absolute;
     right: 50%;
     top: 60px;
     margin-right: -15px;
     z-index: 100;
     overflow: hidden;
     width: 30px;
     height: 30px;
     border: none;
     outline: none;
     text-indent: 200%;
     cursor: pointer;
     color: transparent;
     background: url(images/cross-search.png) no-repeat center center
}

.fr-ui-outside .fr-close-background,
.fr-window-fresco .fr-close .fr-close-icon {
     display: none
}

@media (min-width: 768px) {
     .vc_tta.vc_tta-style-outline.vc_tta-tabs .vc_tta-panels {
          border: 0 !important;
     }

     .vc_tta.vc_tta-style-outline .vc_tta-panel-body::before,
     .vc_tta.vc_tta-style-outline .vc_tta-panel-body::after {
          content: none !important;
     }
}


/*=== WP GALLERY ====*/
.wpb_flexslider.flexslider {
     border: none !important;
     margin-bottom: 0 !important;
}

.wpb_gallery .wpb_flexslider .flex-direction-nav a {
     font-size: 0 !important;
}

.flex-direction-nav a:before {
     font-family: "Font Awesome 5 Pro" !important;
     content: '\f053' !important;
     font-size: 30px !important;
     color: rgba(255, 255, 255, 0.8) !important;
}

.flex-direction-nav a.flex-next:before {
     content: '\f054' !important;
}

.theme-default .nivo-directionNav a {
     background: none !important;
     text-indent: inherit !important;
     font-size: 0 !important;
}

.theme-default .nivo-directionNav a:before {
     font-family: "Font Awesome 5 Pro" !important;
     content: '\f053' !important;
     font-size: 30px !important;
     color: rgba(255, 255, 255, 0.8) !important;
}

.theme-default a.nivo-nextNav:before {
     content: '\f054' !important;
}

.theme-default .nivo-caption {
     display: none !important;
}

/*=============================================================================================================*/
/*=== V. PAGES ================================================================================================*/
/*=============================================================================================================*/

/*============================================================================================*/
/*=== 3. ERROR 404 PAGE ======================================================================*/
body.error404 #main-container-wrapper {
     padding-top: 0 !important
}

body.error404 .container-404 {
     padding: 100px 0 200px;
     height: 100%;
     min-height: 100%;
     background-color: #000;
     background-size: cover;
     background-attachment: fixed;
     background-repeat: no-repeat;
     background-position: center center
}

body.error404 .footer-top,
body.error404 .cata-breadcrumbs {
     display: none
}

body.error404 article {
     text-align: center;
     padding-bottom: 30px;
     color: var(--zt-light-color)
}

body.error404 article h1 {
     color: var(--zt-light-color);
     font-size: 200px;
     text-transform: uppercase;
     line-height: 200px
}

body.error404 article h3 {
     color: var(--zt-light-color);
     font-size: 40px
}

body.error404 article p a {
     color: var(--zt-light-color);
     text-decoration: underline;
     font-weight: 700;
     letter-spacing: 1px
}

body.error404 article .header-search {
     position: relative;
     display: block;
     overflow: hidden;
     margin: auto;
     max-width: 600px
}

body.error404 article .header-search p {
     display: none
}

body.error404 article input[type="text"] {
     width: 100%;
     max-width: 100%;
     padding: 10px 15px 10px 0;
     background: transparent;
     border: none;
     border-bottom: 1px solid var(--zt-light-color);
     color: var(--zt-light-color)
}

body.error404 article input[type="submit"] {
     content: "";
     position: absolute;
     right: 0;
     top: 0;
     z-index: 3;
     width: 40px;
     height: 20px;
     background: url(images/icon_search.png) 25px -20px no-repeat;
     font-size: 0 !important;
     padding: 0 !important;
     border: 0 !important;
     -webkit-appearance: none
}

body.error404 article input[type="submit"]:hover {
     background-position: 25px -15px !important;
     opacity: 1;
     filter: alpha(opacity 100)
}

body.error404::-webkit-input-placeholder {
     color: var(--zt-light-color);
}

body.error404:-moz-placeholder {
     color: var(--zt-light-color);
}

body.error404::-moz-placeholder {
     color: var(--zt-light-color)
}

body.error404:-ms-input-placeholder {
     color: var(--zt-light-color);
}

/*============================================================================================*/
/*=== 4. OVERLAY =============================================================================*/
.zoverlay {
     position: fixed;
     width: 100%;
     height: 100px;
     background: #32367d;
     z-index: 9999;

     transform: translateY(-100%);
     opacity: 0;
     visibility: hidden;
     overflow: hidden;
     transition: all .5s ease;
}


.zoverlay.open {
     transform: translateY(0);
     opacity: 1;
     visibility: visible;
}

.zoverlay .header-search {
     height: 100px;
     display: flex;
     align-items: center;
     justify-content: center;
}

.zoverlay form {
     width: 100%;
     position: relative;
}

.zoverlay .search-input {
     width: 100%;
     height: 60px;
     font-size: 20px;
     border: 0;
     padding-right: 30px;
     background: transparent;
     color: var(--zt-light-color);
}

.zoverlay .search-input::-webkit-input-placeholder {
     color: var(--zt-light-color);
}

.zoverlay .search-input:-moz-placeholder {
     color: var(--zt-light-color);
}

.zoverlay .search-input::-moz-placeholder {
     color: var(--zt-light-color);
}

.zoverlay .search-input:-ms-input-placeholder {
     color: var(--zt-light-color);
}

.zoverlay input[type="submit"] {
     display: none;
}


.zoverlay #close_overlay {
     position: absolute;
     right: 0;
     top: 50%;
     transform: translateY(-50%);
     z-index: 30;
     cursor: pointer;
     font-size: 30px;
     color: var(--zt-light-color);
}


/*================================================*/
/*============== FIX in VC =======================*/

.wpb_heading.wpb_accordion_heading {
     font-size: 20px;
     text-transform: uppercase;
     font-style: normal;
     font-weight: 700
}

h4.vc_tta-panel-title {
     padding-bottom: 0
}

h2.wpb_heading {
     font-style: normal;
     font-size: 14px;
     line-height: 20px;
     text-transform: uppercase;

     color: var(--zt-darkblue-color);
}

/*============================================================================================*/
/*=== 7. SEARCH PAGE =========================================================================*/
.search-area {
     margin: -15px -15px 0;
}

.search-area .search-item,
.search-area .grid-sizer {
     width: 33.33%;
     padding: 15px;
}

.search-area .search-item .item {
     -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
     -ms-backface-visibility: hidden;
     -webkit-transition: all .3s;
     -moz-transition: all .3s;
     -ms-transition: all .3s;
     -o-transition: all .3s;
     transition: all .3s;
     -webkit-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.1);
     -moz-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.1);
     box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.1);
}

.search-area .search-item .item .entry-content {
     padding: 15px;
}

.search-area .search-item .item .entry-content .title {
     margin: 0;
     padding-bottom: 10px;
     font-size: var(--zt-main-font-size);
     line-height: var(--zt-main-line-height);
}

.search-area .search-item .item .read-more {
     display: block;
     margin-top: 20px;
}

.search-area .search-item .item .read-more .more-arrow {
     padding-right: 8px;
}

.search-area .search-item .item .read-more:hover .more-arrow {
     padding-right: 3px;
     float: left;
     -webkit-transition: all 300ms ease-in-out;
     -moz-transition: all 300ms ease-in-out;
     -ms-transition: all 300ms ease-in-out;
     -o-transition: all 300ms ease-in-out;
     transition: all 300ms ease-in-out;
}


/*============================================================================================*/
/*=== 8. HACK BROWSER CSS ====================================================================*/

/*=== SAFARI 5+ ONLY ===*/
@media screen and (-webkit-min-device-pixel-ratio: 0) and (max-width: 500px) {

     ::i-block-chrome,
     .vc_row.vc_row-flex,
     .vc_row.vc_row-flex>.vc_column_container {
          display: block
     }
}