/***********FONT CHỮ************/

@font-face {
    font-family: 'Roboto';
    src: url(../fonts/Roboto/Roboto-Regular.ttf);
    font-weight: 400;
}

@font-face {
    font-family: 'Roboto';
    src: url(../fonts/Roboto/Roboto-Medium.ttf);
    font-weight: 500;
}

@font-face {
    font-family: 'Roboto';
    src: url(../fonts/Roboto/Roboto-Bold.ttf);
    font-weight: 700;
}

@font-face {
    font-family: 'Roboto';
    src: url(../fonts/Roboto/Roboto-Black.ttf);
    font-weight: 800;
}

@font-face {
    font-family: 'Roboto';
    src: url(../fonts/Roboto/Roboto-Thin.ttf);
    font-weight: 300;
}

@font-face {
    font-family: 'Roboto Slab';
    src: url(../fonts/Roboto_Slab/RobotoSlab-VariableFont_wght.ttf);
}

body {
    font-family: 'Roboto';
    font-weight: 400;
    font-style: normal;
    color: var(--text-mi, #182940);
}

:root {
    --title: #001533;
    --text: #182940;
    --second-text: #173C68;
    --blur-text: #5E718F;
    --sub-text: #EDEDED;
    --main-purple: #0765E3;
    --background-green: #24A148;
    --background-blue: #0043CE;
    --white: #FFFFFF;
    --border-gray: #E3E6EB;
    --border-background: #F4F4FC;
}

p {
    font-family: 'Roboto';
    color: var(--text);
    line-height: 1.5;
}

.form-control:focus {
    box-shadow: 0 0 5px 0.2rem rgba(30, 45, 190, 0.15);
}

strong {
    font-family: 'Roboto';
    font-weight: 700;
}

body section {
    margin-bottom: 40px;
}

@media screen and (max-width: 1024px) {
    body section {
        margin-bottom: 35px;
    }
}
@media screen and (max-width: 768px) {
    body section {
        margin-bottom: 30px;
    }
}
@media screen and (max-width: 576px) {
    body section {
        margin-bottom: 20px;
    }
}

.main-body-content {
    min-height: calc(100vh - 565px);
    padding: 15px 0 40px;
}

.home-layout .main-body-content {
    min-height: calc(100vh - 565px);
    padding: 30px 0 40px;
}

    .home-layout .main-body-content.main-body-content-color {
        background: #F4F8FF;
    }

        .home-layout .main-body-content.main-body-content-color section {
            margin-bottom: 0;
        }

.text-center {
    text-align: center;
    vertical-align: middle
}

.text-left {
    text-align: left;
    vertical-align: middle
}

.contraC .Head {
    margin-bottom: 0;
}
/***********SCROLL BAR************/

*::-webkit-scrollbar {
    width: 8px;
    height: 4px;
}

*::-webkit-scrollbar-track {
    background-color: transparent;
    border-radius: 20px;
}

*::-webkit-scrollbar-thumb {
    background-color: #c1c1c1;
    border-radius: 20px;
    border: 8px solid transparent;
}

*::-webkit-scrollbar-thumb:hover {
    background-color: #979595;
}

/***********SETUP MAIN CSS************/

ul, li {
    margin: 0; 
    padding: 0;
    list-style-type: none;
}

img {
    max-width: 100%;
    object-fit: contain;
    object-position: 50% 50%;
}

h2, h4, h6 {

}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
    color: inherit;
}

p {
    font-family: 'Roboto';
    color: var(--text);
    line-height: 1.5;
}

b, strong {
    font-family: 'Roboto';
    font-weight: 700;
}

/***********CONTAINER SETTING************/

/* @media screen and (min-width: 1921px) {
    html[lang="vi-VN"] .container {
        max-width: 1650px;
    }
}

@media screen and (max-width: 1920px) and (min-width: 1730px) {
    html[lang="vi-VN"] .container {
        max-width: 1650px;
    }
}

@media screen and (max-width: 1729px) and (min-width: 1367px) {
    html[lang="vi-VN"] .container {
        max-width: calc(100% - 80px);
    }
} */

.container {
    max-width: 1410px;
}

.container.container-full {
    max-width: 100%;
}

.row.mini-row {
    margin-right: -8px;
    margin-left: -8px;
}

.row.mini-row .row.mini-row {
    row-gap: 16px;
}

.row.mini-row > *[class*="col-"] {
    padding-right: 8px;
    padding-left: 8px;
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
}

.form-group select {
    background: #FFFFFF;
    border: 1px solid #E2E4E9;
    padding: 8px 12px;
    border-radius: 8px;
    outline: none;
    height: 42px;
    font-family: inherit;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    /* identical to box height, or 150% */
    letter-spacing: 0.5px;
    /* Content/text-main */
    color: var(--text-main);
    background-repeat: no-repeat;
    background-position: calc(100% - 12px) center;
    background-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.22007 8.47C4.52007 8.17 4.99007 8.17 5.28007 8.47L12.0001 15.19L18.7201 8.47C18.7887 8.39631 18.8715 8.33721 18.9635 8.29622C19.0555 8.25523 19.1548 8.23319 19.2556 8.23141C19.3563 8.22963 19.4563 8.24816 19.5497 8.28588C19.6431 8.3236 19.7279 8.37974 19.7991 8.45096C19.8703 8.52218 19.9265 8.60702 19.9642 8.7004C20.0019 8.79379 20.0204 8.89382 20.0187 8.99452C20.0169 9.09523 19.9948 9.19454 19.9539 9.28654C19.9129 9.37854 19.8538 9.46134 19.7801 9.53L12.5301 16.78C12.2301 17.08 11.7601 17.08 11.4701 16.78L4.22007 9.53C4.07962 9.38938 4.00073 9.19875 4.00073 9C4.00073 8.80125 4.07962 8.61063 4.22007 8.47Z" fill="%230A0D14"/></svg>');
}

@media screen and (max-width: 1440px) and (min-width: 1240px) {
    .container {
        max-width: 1344px;
    }
}

@media screen and (max-width: 1240px) and (min-width: 1118px) {
    .container {
        max-width: 1200px;
    }
}

@media screen and (max-width: 991px) and (min-width: 871px) {
    .container {
        max-width: 980px;
    }
}

@media screen and (max-width: 870px) {
    .container{
        max-width: 850px;
    }
}

@media screen and (max-width: 800px) {
    .container{
        max-width: 790px;
    }
}

/*BACK TO TOP*/


.back-to-top a::after {
    content: 'north';
    color: #F58220;
    font-size: 24px;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 400 !important;
}

.anim-scroll-to-top.active-progress {
    opacity: 1;
    visibility: visible;
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

.anim-scroll-to-top {
    z-index: 1000;
    position: fixed;
    right: 30px;
    bottom: 110px;
    height: 50px;
    width: 50px;
    cursor: pointer;
    display: none;
    border-radius: 50px;
    box-shadow: inset 0 0 0 2px rgba(38, 166, 254, 0.2);
    opacity: 0;
    visibility: hidden;
    -moz-transform: translateY(15px);
    -o-transform: translateY(15px);
    -ms-transform: translateY(15px);
    -webkit-transform: translateY(15px);
    transform: translateY(15px);
    -moz-transition: all 300ms ease-out 0s;
    -webkit-transition: all 300ms ease-out 0s;
    -ms-transition: all 300ms ease-out 0s;
    -o-transition: all 300ms ease-out 0s;
    transition: all 300ms ease-out 0s;
}

.anim-scroll-to-top svg.progress-circle path {
    stroke: rgb(38, 166, 254);
    stroke-width: 4;
    box-sizing: border-box;
}

.anim-scroll-to-top svg path {
    fill: none;
}

.anim-scroll-to-top::after {
    content: "";
    position: absolute;
    display: block;
    width: 24px;
    height: 24px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M480-80q-17 0-28.5-11.5T440-120v-607L284-572q-11 11-27.5 11.5T228-572q-11-11-11-28t11-28l224-224q6-6 13-8.5t15-2.5q8 0 15 2.5t13 8.5l224 224q11 11 11 27.5T732-572q-12 12-28.5 12T675-572L520-727v607q0 17-11.5 28.5T480-80Z" fill="%2326A6FE"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    left: 0;
    top: 0;
    height: 50px;
    width: 50px;
    cursor: pointer;
    display: block;
    z-index: 1;
    -moz-transition: all 300ms ease-out 0s;
    -webkit-transition: all 300ms ease-out 0s;
    -ms-transition: all 300ms ease-out 0s;
    -o-transition: all 300ms ease-out 0s;
    transition: all 300ms ease-out 0s;
}

html {
    scroll-behavior: smooth;
}

.list_Advertisement {
    padding: 0;
}

/****FIREFOX SCROLL BAR****/

*:-webkit-scrollbar {
    width: 8px;
}

*:-webkit-scrollbar-track {
    background: #B7C0CF;
    border-radius: 12px;
}

*:-webkit-scrollbar-thumb {
    background: #B7C0CF;
    border-radius: 12px;
}

/* * {
    scrollbar-width: thin;
    scrollbar-color: #ECD7C5 transparent;
} */

/****SIDEBAR CLOSE/OPEN****/

.btn-sidebar {
    position: fixed;
    right: 0;
    top: 30%;
    transform: translateY(-50%);
    z-index: 10;
    background: white;
    padding: 8px;
    border-radius: 50% 0 0 50%;
    box-shadow: -2px 0px 4px 0.1rem rgba(30, 45, 190, 0.15);
    align-items: center;
    justify-content: center;
}


.div-news > .btn-sidebar,
.div-sidebar > .btn-close {
    display: none;
}

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

    .div-news > .btn-sidebar {
        display: flex;
    }
    
    .div-sidebar > .btn-close {
        display: block;
    }

    .div-news > .btn-sidebar {
        text-align: right;
        margin-bottom: 8px;
    }

    .div-sidebar > .btn-close {
        margin-bottom: 8px;
    }

    .div-sidebar {
        display: none;
        max-width: 324px;
        width: 100%;
        top: 0;
        height: 100vh;
        position: fixed;
        right: -100%;
        transition: all 0.5s;
        display: block;
        z-index: 101;
        padding-top: 30px;
        overflow: hidden auto;
    }

    .div-sidebar.show {
        display: block;
        right: 0;
        background: #fff;
        box-shadow: -4px 0px 4px rgba(30, 45, 190, 0.12);
    }

    .dim-background {
        display: none;
        transition: all 0.5s ease-in-out;
    }

    .div-news.has_sidebar .dim-background {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.6);
        z-index: 100;
        display: block;
    }

    .div-news,
    .div-main {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/****BUTTON****/

.btn {
    border-radius: 6px !important;
    padding: 9px 16px !important;
    font-family: inherit;
    font-style: normal;
    font-size: 16px !important;
    line-height: 1.5 !important;
    color: #FFFFFF !important;
    font-weight: 500 !important;
    min-width: 120px;
    border: none !important;
    outline: none !important;
}

.btn-primary,
.btn-success {
    background: var(--main-purple) !important;
    /* margin-right: 8px !important; */
}

.btn-brown {
    background: #73190F !important;
    /* margin-right: 8px !important; */
}

.btn.btn-warning,
a.btn.btn-warning,
.btn.btn-danger,
a.btn.btn-danger {
    background: var(--btn-warning) !important;
    color: var(--white) !important;
    margin-right: 8px;
}

.btn-secondary {
    background: var(--btn-secondary) !important;
    border-radius: 4px;
    padding: 8px 16px !important;
    margin-right: 8px;
}

.btn-secondary:hover {
    background: var(--btn-secondary) !important;
}

.btn-outline-primary {
    background: var(--white) !important;
    border: 1px solid var(--main-purple) !important;
    border-radius: 4px;
    padding: 8px 16px;
    color: var(--main-purple)  !important;
}

.btn-outline-primary2 {
    background: var(--white) !important;
    border: 1px solid #73190F !important;
    border-radius: 4px;
    padding: 8px 16px;
    color: #73190F  !important;
}

.btn-outline-primary:hover {
    background: var(--white) !important;
    color: #000;
}

.btn-outline-primary:focus {
    outline: none;
}

.btn-warning:hover {
    background: #E11D48 !important;
}

.btn-red {
    background: var(--red, #D61C26);
}

.btn-red:hover {
    background: #FFF;
    color: var(--red, #D61C26) !important;
    border: 1px solid var(--red, #D61C26) !important;
}

.btn-black {
    background: var(--text-mi, #182940);
}

.btn-black:hover {
    background: #FFF;
    color: var(--text-mi, #182940) !important;
    border: 1px solid var(--text-mi, #182940) !important;
}

.btn-orange {
    background: var(--vng-m, #EA8F00);
}

.btn-orange:hover {
    background: #FFF;
    color: var(--vng-m, #EA8F00) !important;
    border: 1px solid var(--vng-m, #EA8F00) !important;
}

.group-button-action {
    display: flex;
    gap: 15px;
}

/****PRE-LOADER LOADING****/

@keyframes loader {
    0%, 10%, 100% {
        width: 80px;
        height: 80px;
   }
    65% {
        width: 150px;
        height: 150px;
   }
}
@keyframes loaderBlock {
    0%, 30% {
        transform: rotate(0);
   }
    55% {
        background-color: #E0954F;
   }
    100% {
        transform: rotate(90deg);
   }
}
@keyframes loaderBlockInverse {
    0%, 20% {
        transform: rotate(0);
   }
    55% {
        background-color: #E0954F;
   }
    100% {
        transform: rotate(-90deg);
   }
}

.loading {
    overflow: hidden;
    height: 100vh;
}

.pre-loader {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background: white;
}

.loader {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 80px;
    transform: translate(-50%, -50%) rotate(45deg) translate3d(0, 0, 0);
    animation: loader 1.2s infinite ease-in-out;
}
.loader span {
    position: absolute;
    display: block;
    width: 40px;
    height: 40px;
    background-color: rgb(94, 19, 0);
    animation: loaderBlock 1.2s infinite ease-in-out both;
}
.loader span:nth-child(1) {
    top: 0;
    left: 0;
}
.loader span:nth-child(2) {
    top: 0;
    right: 0;
    animation: loaderBlockInverse 1.2s infinite ease-in-out both;
}
.loader span:nth-child(3) {
    bottom: 0;
    left: 0;
    animation: loaderBlockInverse 1.2s infinite ease-in-out both;
}
.loader span:nth-child(4) {
    bottom: 0;
    right: 0;
}

/****************************************************************************************************************/
/***********************************************************************CMS - CHECK BOX / RADIO BOX*************************************************************************/
/****************************************************************************************************************/
[type="radio"]:checked,
[type="radio"]:not(:checked) {
    position: absolute;
    left: -9999px;
}

[type="radio"]:checked + label,
[type="radio"]:not(:checked) + label {
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    line-height: 20px;
    display: inline-block;
    font-family: Roboto !important;
    font-style: normal;
    font-weight: 500 !important;
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 0;   
    color: var(--text-mi, #182940);
}

[type="radio"]:checked + label:before,
[type="radio"]:not(:checked) + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    border: 1px solid #ddd;
    border-radius: 100%;
    background: #fff;
}

[type="radio"]:checked + label:before {
    border-color: var(--blue, #0765E3);
}

[type="radio"]:checked + label:after,
[type="radio"]:not(:checked) + label:after {
    content: '';
    width: 12px;
    height: 12px;
    background: var(--blue, #0765E3);
    position: absolute;
    top: 4px;
    left: 4px;
    border-radius: 100%;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

[type="radio"]:not(:checked) + label:after {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}

[type="radio"]:checked + label:after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

[type="checkbox"] {
    /* Add if not using autoprefixer */
    -webkit-appearance: none;
    /* Remove most all native input styles */
    appearance: none;
    /* For iOS < 15 */
    background-color: transparent;
    /* Not removed via appearance */
    margin: 0;
    font: inherit;
    color: currentColor;
    width: 100%;
    height: 1.15em;
    /* border: 0.15em solid #C9D7F5; */
    border-radius: 0.15em;
    transform: translateY(-0.075em);
    display: grid;
    place-content: center;
    box-sizing: border-box;
    padding: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    width: 24px;
}

[type="checkbox"]::before {
    content: "";
    width: 24px;
    height: 24px;
    display: block;
    background-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 6.25C3 4.45 4.46 3 6.25 3H17.75C19.55 3 21 4.46 21 6.25V17.75C21 19.55 19.54 21 17.75 21H6.25C5.38805 21 4.5614 20.6576 3.9519 20.0481C3.34241 19.4386 3 18.612 3 17.75V6.25ZM6.25 4.5C5.28 4.5 4.5 5.28 4.5 6.25V17.75C4.5 18.72 5.28 19.5 6.25 19.5H17.75C18.72 19.5 19.5 18.72 19.5 17.75V6.25C19.5 5.28 18.72 4.5 17.75 4.5H6.25Z" fill="%23E2E4E9"/></svg>');    transition: all 0.2s ease-in-out;
}

[type="checkbox"]:checked::before {
    content: "";
    width: 24px;
    height: 24px;
    display: block;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><mask id="mask0_28_4142" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><rect width="24" height="24" fill="%23D9D9D9"/></mask><g mask="url(%23mask0_28_4142)"><path d="M10.6 13.4L8.45 11.25C8.26667 11.0667 8.03333 10.975 7.75 10.975C7.46667 10.975 7.23333 11.0667 7.05 11.25C6.86667 11.4333 6.775 11.6667 6.775 11.95C6.775 12.2333 6.86667 12.4667 7.05 12.65L9.9 15.5C10.1 15.7 10.3333 15.8 10.6 15.8C10.8667 15.8 11.1 15.7 11.3 15.5L16.95 9.85C17.1333 9.66667 17.225 9.43333 17.225 9.15C17.225 8.86667 17.1333 8.63333 16.95 8.45C16.7667 8.26667 16.5333 8.175 16.25 8.175C15.9667 8.175 15.7333 8.26667 15.55 8.45L10.6 13.4ZM5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H19C19.55 3 20.0208 3.19583 20.4125 3.5875C20.8042 3.97917 21 4.45 21 5V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5Z" fill="%2335C19B"/></g></svg>');
} 

[type="checkbox"]:indeterminate::before {
    content: "";
    width: 24px;
    height: 24px;
    display: block;
    background-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 13H17V11H7V13ZM5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H19C19.55 3 20.0208 3.19583 20.4125 3.5875C20.8042 3.97917 21 4.45 21 5V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5Z" fill="%235E82D1"/></svg>');
} 

[type="checkbox"]:disabled {
    --form-control-color: var(--form-control-disabled);
    color: var(--form-control-disabled);
    cursor: not-allowed;
}


/*************************************************************************************************************/
/**************************************************LOADING KIT***********************************************************/
/*************************************************************************************************************/
.sk-fading-circle {
    margin: 50px auto;
    width: 40px;
    height: 40px;
    position: relative;
  }
  
  .sk-fading-circle .sk-circle {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
  }
  
  .sk-fading-circle .sk-circle:before {
    content: '';
    display: block;
    margin: 0 auto;
    width: 15%;
    height: 15%;
    background-color: #333;
    border-radius: 100%;
    -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
            animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
  }
  .sk-fading-circle .sk-circle2 {
    -webkit-transform: rotate(30deg);
        -ms-transform: rotate(30deg);
            transform: rotate(30deg);
  }
  .sk-fading-circle .sk-circle3 {
    -webkit-transform: rotate(60deg);
        -ms-transform: rotate(60deg);
            transform: rotate(60deg);
  }
  .sk-fading-circle .sk-circle4 {
    -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  .sk-fading-circle .sk-circle5 {
    -webkit-transform: rotate(120deg);
        -ms-transform: rotate(120deg);
            transform: rotate(120deg);
  }
  .sk-fading-circle .sk-circle6 {
    -webkit-transform: rotate(150deg);
        -ms-transform: rotate(150deg);
            transform: rotate(150deg);
  }
  .sk-fading-circle .sk-circle7 {
    -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
            transform: rotate(180deg);
  }
  .sk-fading-circle .sk-circle8 {
    -webkit-transform: rotate(210deg);
        -ms-transform: rotate(210deg);
            transform: rotate(210deg);
  }
  .sk-fading-circle .sk-circle9 {
    -webkit-transform: rotate(240deg);
        -ms-transform: rotate(240deg);
            transform: rotate(240deg);
  }
  .sk-fading-circle .sk-circle10 {
    -webkit-transform: rotate(270deg);
        -ms-transform: rotate(270deg);
            transform: rotate(270deg);
  }
  .sk-fading-circle .sk-circle11 {
    -webkit-transform: rotate(300deg);
        -ms-transform: rotate(300deg);
            transform: rotate(300deg); 
  }
  .sk-fading-circle .sk-circle12 {
    -webkit-transform: rotate(330deg);
        -ms-transform: rotate(330deg);
            transform: rotate(330deg); 
  }
  .sk-fading-circle .sk-circle2:before {
    -webkit-animation-delay: -1.1s;
            animation-delay: -1.1s; 
  }
  .sk-fading-circle .sk-circle3:before {
    -webkit-animation-delay: -1s;
            animation-delay: -1s; 
  }
  .sk-fading-circle .sk-circle4:before {
    -webkit-animation-delay: -0.9s;
            animation-delay: -0.9s; 
  }
  .sk-fading-circle .sk-circle5:before {
    -webkit-animation-delay: -0.8s;
            animation-delay: -0.8s; 
  }
  .sk-fading-circle .sk-circle6:before {
    -webkit-animation-delay: -0.7s;
            animation-delay: -0.7s; 
  }
  .sk-fading-circle .sk-circle7:before {
    -webkit-animation-delay: -0.6s;
            animation-delay: -0.6s; 
  }
  .sk-fading-circle .sk-circle8:before {
    -webkit-animation-delay: -0.5s;
            animation-delay: -0.5s; 
  }
  .sk-fading-circle .sk-circle9:before {
    -webkit-animation-delay: -0.4s;
            animation-delay: -0.4s;
  }
  .sk-fading-circle .sk-circle10:before {
    -webkit-animation-delay: -0.3s;
            animation-delay: -0.3s;
  }
  .sk-fading-circle .sk-circle11:before {
    -webkit-animation-delay: -0.2s;
            animation-delay: -0.2s;
  }
  .sk-fading-circle .sk-circle12:before {
    -webkit-animation-delay: -0.1s;
            animation-delay: -0.1s;
  }
  
  @-webkit-keyframes sk-circleFadeDelay {
    0%, 39%, 100% { opacity: 0; }
    40% { opacity: 1; }
  }
  
  @keyframes sk-circleFadeDelay {
    0%, 39%, 100% { opacity: 0; }
    40% { opacity: 1; } 
  }