/*
 Theme Name:   Infinite Child
 Theme URI:    http://demo.goodlayers.com/infinite
 Description:  Goodlayers Infinite Child Theme
 Author:       Goodlayers
 Author URI:   http://goodlayers.com
 Template:     infinite
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, right-sidebar, responsive-layout
 Text Domain:  infinite-child

 START YOUR CHILD THEME CSS HERE
*/

/*--------------------------
*           Index          *
----------------------------
* 1. Global                *
*    1.1 Custom Properties *
*    1.2 Header            *
*    1.3 Footer            *
*    1.4 Sidebar           *
* 2. Home-page             *
* 3. Sub-page              *
* 4. Responsive            *
* 5. Keyframes             *
--------------------------*/

/*--------------------------
*        1. Global         *
--------------------------*/
/* Don't let phone number links wrap */
a[href^="tel:"], a[href^="tel+"] {
    white-space: nowrap;
}

/* Hidden Links */

body a {
    font-weight: 600;
}

body a.hide-link, body a.hide-link:hover {
    color: #000 !important;
    font-weight: 400;
    text-decoration: none;
    cursor: text;
}

body .dark-background a.hide-link, body .dark-background a.hide-link:hover {
    color: #fff !important;
}

.no-wrap {
    white-space: nowrap;
}

/* Remove default appearance for iOS/Safari forms */
input:matches([type="button"], [type="submit"], [type="reset"]) {
    -webkit-appearance: none !important;
}

/* Make all video popups larger on tablet or larger (overrides plugin styles) */
@media screen and (min-width: 768px) {
    .mfp-wrap .mfp-iframe-holder .mfp-content {
        width: 90vw;
        max-width: 1400px;
        max-height: 90vh;
    }
}

/* 1.1 Custom Properties */

/* 1.2 Header */

html .infinite-navigation .sf-menu > .infinite-normal-menu li.final-menu-item {
    right: 90px;
}

html .infinite-top-bar span.header-phone {
    margin-right: 30px;
}

html .infinite-header-style-boxed.infinite-style-center-menu .infinite-navigation {
    text-align: right;
}

html .infinite-body .infinite-top-bar {
    font-weight: 500;
    text-transform: uppercase;
}

html .infinite-body .infinite-top-bar a {
    font-weight: 700;
    letter-spacing: 1px;
}

html .infinite-body .infinite-top-bar a:hover {
    color: #f90101;
}

html .infinite-body .infinite-top-bar .infinite-top-bar-right-social a {
    font-size: 24px;
}

html .infinite-mm-menu-wrap.mm-menu a {
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    text-wrap: wrap;
}

html .mm-panel, html .mm-navbar {
    background: #000;
}

html .infinite-animate-fixed-navigation.infinite-header-style-boxed .infinite-logo {
    padding-top: 18px;
}

html .infinite-top-bar-right-social .fa-facebook:before, .footer-social .fa-facebook:before {
    content: "\f082";
}

html .infinite-top-bar-left {
    padding-top: 5px;
}

/* 1.3 Footer */

.infinite-body footer {
    border-top: 3px solid #FAFC0C;
}

html .infinite-footer-wrapper {
    text-align: center;
}

.footer-social a i {
    font-size: 30px;
    margin-right: 24px;
}

.footer-social a:last-of-type i {
    margin-right: 0;
}

/* 1.4 Sidebar */


/*------------------------
*      2. Home-page      *
-------------------------*/

.infinite-body .dark-background a, .infinite-body .home-blog p a {
    color: #fff;
}

.infinite-body .dark-background a:hover, .infinite-body .home-blog p a:hover {
    color: #f90101;
}

.infinite-body .home-blog .gdlr-core-excerpt-read-more.gdlr-core-button {
    padding: 0;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 0;
    margin-top: 20px;
    background-color: transparent;
    color: #f90101;
}

.infinite-body .home-blog .gdlr-core-excerpt-read-more.gdlr-core-button:hover {
    color: #000;
}

.infinite-body .home-blog .gdlr-core-blog-grid .gdlr-core-blog-title, .home-blog .gdlr-core-blog-grid .gdlr-core-blog-title, .home-blog .gdlr-core-blog-grid .gdlr-core-blog-title, .home-blog .gdlr-core-blog-grid .gdlr-core-blog-title a {
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 20px;
    color: #f90101 !important;
}

.home-blog .gdlr-core-blog-grid .gdlr-core-blog-content {
    margin-bottom: 0;
}

.bbb-logo {
    margin-top: 24px;
}

.home-text, .home-testimonials, .home-services, .logo-background {
    background-size: 900px;
    background-image: url(/wp-content/uploads/2024/05/asphalt-pavement-company.png);
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-position-y: calc(46% - 0px);
}

.gdlr-core-page-builder-body .home-blog .gdlr-core-blog-grid {
    background-color: #fff;
}

.testimonial-block .gdlr-core-pbf-background-wrap {
    z-index: 0;
}

.home-count .gdlr-core-counter-item .gdlr-core-counter-item-number {
    color: #f90101 !important;
}

.home-count .gdlr-core-counter-item .gdlr-core-counter-item-bottom-text {
    color: #fff !important;
}

/* Home Page Hero Video */
.gdlr-core-pbf-wrapper.fullwidth .gdlr-core-pbf-wrapper-content .gdlr-core-pbf-wrapper-container.gdlr-core-pbf-wrapper-full-no-space {
    max-width: 100%;
    width: 100%;
}

.wtp-video-container.wtp-video-background {
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
    position: relative;
}

.wtp-video-container.wtp-video-background .wtp-video-text {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
}

.wtp-video-container.wtp-video-background .wtp-video-text .wtp-video-text-inner {
    position: relative;
    top: 60%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    text-transform: none;
    max-width: 1240px;
    display: block;
    margin: 0 auto;
    padding: 0 30px;
}

.wtp-video-container.wtp-video-background .wtp-video-text .wtp-video-text-inner h1 {
    color: #fff;
    display: block;
    font-weight: 500;
    font-size: 70px;
    line-height: 76px;
    letter-spacing: 1px;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-animation: zoom-in 0.3s 1 normal ease forwards 0.5s;
    animation: zoom-in 0.3s 1 normal ease forwards 0.5s;
    text-shadow: 1px 1px 3px #000;
}

.wtp-video-container.wtp-video-background .wtp-video-text .wtp-video-text-inner p {
    color: #fff;
    display: block;
    font-weight: 500;
    font-size: 26px;
    line-height: 34px;
    margin-bottom: 30px;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-animation: zoom-in 0.3s 1 normal ease forwards 0.5s;
    animation: zoom-in 0.3s 1 normal ease forwards 0.5s;
    text-shadow: 1px 1px 3px #000;
}

.wtp-video-container.wtp-video-background .wtp-video-text .wtp-video-text-inner p .split {
    display: block;
}

.wtp-video-container.wtp-video-background .wtp-video-text .wtp-video-text-inner a.wtp-button {
    background-color: #f90101;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    text-align: center;
    display: inline-block;
    text-transform: uppercase;
    margin-right: 20px;
    font-size: 18px;
    padding: 20px 33px;
    font-weight: 600;
    letter-spacing: 1px;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-animation: zoom-in 0.3s 1 normal ease forwards 0.5s;
    animation: zoom-in 0.3s 1 normal ease forwards 0.5s;
}

.wtp-video-container.wtp-video-background .wtp-video-text .wtp-video-text-inner a.wtp-button:nth-of-type(2) {
    background-color: #FAFC0C;
    color: #000;
}

.wtp-video-container.wtp-video-background .wtp-video-text .wtp-video-text-inner a.wtp-button:hover {
    background-color: #000;
    color: #fff;
}

.wtp-video-container.wtp-video-background .wtp-video-foreground {
    height: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.wtp-video-container.wtp-video-background .wtp-video-foreground .wtp-video-inner:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 1;
}

.wtp-video-container.wtp-video-background .wtp-video-foreground .wtp-video-inner {
    height: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.wtp-video-container.wtp-video-background .wtp-video-foreground .wtp-video-inner iframe.wtp-hero-iframe {
    -webkit-transform: scale(1.55);
    -ms-transform: scale(1.55);
    transform: scale(1.55);
}

.wtp-video-container.wtp-video-background .wtp-video-text .wtp-video-text-inner a.wtp-button:nth-child(3) {
    margin-right: 0;
}

.banner-border {
    border-left: 6px solid #FAFC0C;
    padding-left: 30px;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-animation: zoom-in 0.3s 1 normal ease forwards 0.5s;
    animation: zoom-in 0.3s 1 normal ease forwards 0.5s;
}

@media (max-width: 999px) {
    .wtp-video-container.wtp-video-background {
        height: calc(100vh - 133px);
    }
    .wtp-video-container.wtp-video-background .wtp-video-text .wtp-video-text-inner {
        top: 50%;
    }
    .wtp-video-container.wtp-video-background .wtp-video-text .wtp-video-text-inner h1 {
        font-size: 60px;
        line-height: 66px;
    }
}

@media (max-width: 767px) {
    .wtp-video-container.wtp-video-background .wtp-video-text .wtp-video-text-inner {
        max-width: 500px;
    }
    .banner-wrapper .gdlr-core-pbf-wrapper-full-no-space {
        max-width: 100%;
    }
    .wtp-video-container.wtp-video-background {
        height: 60vh;
    }
    .wtp-video-container.wtp-video-background .wtp-video-text .wtp-video-text-inner h1 {
        font-size: 38px !important;
        line-height: 44px;
        margin-bottom: 20px;
        letter-spacing: 0;
    }
    .wtp-video-container.wtp-video-background .wtp-video-text .wtp-video-text-inner p {
        font-size: 22px;
        line-height: 28px;
    }
    .wtp-video-container.wtp-video-background .wtp-video-text .wtp-video-text-inner a.wtp-button {
        font-size: 16px;
        margin-right: 5px;
        padding: 15px 24px;
        letter-spacing: 0;
    }
    .wtp-video-container.wtp-video-background .wtp-video-text .wtp-video-text-inner p .split {
        display: inline;
    }
    .banner-border {
        border-left: 4px solid #FAFC0C;
        padding-left: 20px;
    }
}

@media (max-width: 550px) {
    .wtp-video-container.wtp-video-background {
        height: 50vh;
    }
    .short-btn {
        display: none;
    }
    .wtp-video-container.wtp-video-background .wtp-video-text .wtp-video-text-inner a.wtp-button {
        padding: 10px;
    }
    .wtp-video-container.wtp-video-background .wtp-video-text .wtp-video-text-inner h1 {
        font-size: 25px !important;
        line-height: 35px;
        margin-bottom: 10px;
    }
    .wtp-video-container.wtp-video-background {
        height: 350px;
        max-height: 350px;;
    }
    .wtp-video-container.wtp-video-background .wtp-video-text .wtp-video-text-inner p {
        font-size: 18px;
        line-height: 24px;
        font-weight: 400;
        margin-bottom: 20px;
    }
    .banner-border {
        border-left: 4px solid #FAFC0C;
        padding-left: 10px;
    }
}

@media (max-width: 350px) {
    .wtp-video-container.wtp-video-background .wtp-video-text .wtp-video-text-inner h1 {
        font-size: 22px !important;
        line-height: 30px;
    }
}

@-webkit-keyframes zoom-in {
    0% {
        -webkit-transform: scale(0) translate(0,0);
        transform: scale(0) translate(0,0);
        opacity: 0;
    }

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

@keyframes zoom-in {
    0% {
        -webkit-transform: scale(0) translate(0,0);
        transform: scale(0) translate(0,0);
        opacity: 0;
    }

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

/* End Video Banner Styles */


/*------------------------
*      3. Sub-page       *
------------------------*/

html .infinite-page-title-wrap .infinite-page-title-overlay {
    opacity: 0.5;
}

.content-page .yt--popper {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.content-page .yt--popper:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    background: url("/wp-content/uploads/2024/05/asphalt-paving-contractors.png");
    color: #fff;
    text-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
    z-index: 9;
    background-size: 90px;
    width: 90px;
    height: 90px;
    background-repeat: no-repeat;
    -webkit-transition: .4s ease-in-out;
    -o-transition: .4s ease-in-out;
    transition: .4s ease-in-out;
}

.content-page .yt--popper:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -webkit-animation: glowing 1500ms infinite;
    animation: glowing 1500ms infinite;
    background-size: 90px;
    width: 90px;
    height: 90px;
    border-radius: 100%;
    background-repeat: no-repeat;
    -webkit-transition: .4s ease-in-out;
    -o-transition: .4s ease-in-out;
    transition: .4s ease-in-out;
}

.content-page .yt--popper:hover:before, .content-page .yt--popper:hover:after  {
    opacity: .6;
}

@-webkit-keyframes glowing {
    0% {-webkit-box-shadow: 0 0 8px #000; }
    50% {-webkit-box-shadow: 0 0 12px #f90101; }
    100% {-webkit-box-shadow: 0 0 8px #000; }
}

@keyframes glowing {
    0% {-webkit-box-shadow: 0 0 8px #000; }
    50% {-webkit-box-shadow: 0 0 12px #f90101; }
    100% {-webkit-box-shadow: 0 0 8px #000; }
}

.contact-page .gform-theme--framework .gform-field-label {
    font-size: 18px;
    font-weight: 500;
}

.gdlr-core-page-builder-body .contact-page input, .gdlr-core-page-builder-body .contact-page textarea, body .gdlr-core-page-builder-body .contact-page select, .contact-page .gform-theme--framework input[type]:where(:not(.gform-text-input-reset):not([type=hidden])):where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)):focus, .contact-page .gform-theme--framework input, .contact-page .gform-theme--framework textarea, .contact-page .gform-theme--framework select, .contact-page .gform-theme--framework input[type]:where(:not(.gform-text-input-reset):not([type=hidden])):where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)) {
    font-size: 16px;
    border-radius: 0;
}

.gdlr-core-page-builder-body .contact-page input, body .gdlr-core-page-builder-body .contact-page select, .contact-page .gform-theme--framework input[type]:where(:not(.gform-text-input-reset):not([type=hidden])):where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)):focus, .contact-page .gform-theme--framework select, .contact-page .gform-theme--framework input[type]:where(:not(.gform-text-input-reset):not([type=hidden])):where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)) {
    height: 50px;
}

body .gdlr-core-page-builder-body .contact-page select, .contact-page .gform-theme--framework select {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.contact-page .gform-theme.gform-theme--framework.gform_wrapper .button:where(:not(.gform-theme-no-framework):not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .contact-page .gform-theme.gform-theme--framework.gform_wrapper input:is([type=submit], .contact-page .gform-theme--framework [type=button],[type=reset]).button:where(:not(.gform-theme-no-framework):not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .contact-page .gform-theme.gform-theme--framework.gform_wrapper input:is([type=submit],[type=button],[type=reset]):where(:not(.gform-theme-no-framework):not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .contact-page .gform-theme.gform-theme--framework.gform_wrapper input[type=submit].button.gform_button:where(:not(.gform-theme-no-framework):not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)) {
    background-color: #f90101;
    font-size: 18px;
    border-radius: 0;
    margin: 0 auto;
    text-transform: uppercase;
    padding: 20px 33px;
    font-weight: 600;
}

.contact-page .gform-theme.gform-theme--framework.gform_wrapper .button:where(:not(.gform-theme-no-framework):not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)):hover, .contact-page .gform-theme.gform-theme--framework.gform_wrapper input:is([type=submit]:hover, .contact-page [type=button]:hover,[type=reset]).button:where(:not(.gform-theme-no-framework):not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)):hover, .contact-page .gform-theme.gform-theme--framework.gform_wrapper input:is([type=submit]:hover, .contact-page [type=button]:hover, .contact-page [type=reset]):where(:not(.gform-theme-no-framework):not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)):hover, .contact-page .gform-theme.gform-theme--framework.gform_wrapper input[type=submit].button.gform_button:where(:not(.gform-theme-no-framework):not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)):hover {
    background-color: #000;
}

.gdlr-core-page-builder-body .contact-page input[type=checkbox], .gdlr-core-page-builder-body .contact-page input[type=radio] {
    height: 25px !important;
    width: 25px !important;
}

.gdlr-core-page-builder-body .contact-page p.gform_required_legend {
    font-size: 16px;
}

.contact-page .gform-theme--framework .gform_required_legend .gfield_required, .contact-page .gform-theme--framework .gform-field-label>.gfield_required {
    color: #f90101;
    font-size: 18px;
}

.contact-page .gform-theme--framework .field_description_below .gfield_description:where(:not(.ginput_counter_tinymce):not(.gfield_creditcard_warning_message):not(.field_validation_above .gfield_validation_message)) {
    font-size: 16px;
    color: #000;
}

html .responsive-map {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 40%;
}

html .responsive-map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.blog-page .gdlr-core-blog-grid .gdlr-core-excerpt-read-more {
    font-size: 16px;
    letter-spacing: 0;
    margin-bottom: 0;
}

.gdlr-core-body .blog-page .gdlr-core-button:hover {
    background-color: #000;
}

.blog-page .gdlr-core-filterer-wrap.gdlr-core-style-button a {
    background-color: #000;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0;
    margin: 5px;
}

.blog-page .gdlr-core-filterer-wrap.gdlr-core-style-button a:hover, .blog-page .gdlr-core-filterer-wrap.gdlr-core-style-button a.gdlr-core-active {
    background-color: #f90101;
}

.post-template-default .infinite-blog-title-wrap {
    text-align: center;
}

.post-template-default .infinite-blog-title-wrap .infinite-blog-title-overlay {
    opacity: .5;
}

.post-template-default .infinite-blog-title-wrap .infinite-single-blog-title-style-2 .infinite-single-article-title {
    margin-top: 0;
}

/*------------------------
*      4. Responsive     *
------------------------*/

@media (max-width: 999px) {
    html .infinite-body .infinite-top-bar a, html .infinite-body .infinite-top-bar {
        font-size: 16px;
        line-height: 24px;
    }
    .home-text, .home-testimonials, .home-services, .home-blog, .logo-background {
        background-size: 90%;
    }
    .mobile-no-wrap {
        white-space: nowrap;
    }
    html .responsive-map {
        padding-top: 60%;
    }
}

@media (max-width: 780px) {
    html .infinite-top-bar span.header-email {
        display: none;
    }
    html .infinite-top-bar span.header-phone {
        margin-right: 0;
    }
}

@media (min-width: 768px) {
    .mobile-logos {
        display: none;
    }
}

@media (max-width: 767px) {
    .desktop-logos {
        display: none;
    }
    .mobile-logos .gdlr-core-flexslider .flex-direction-nav {
        display: block;
    }
    .mobile-logos .gdlr-core-flexslider .flex-direction-nav li a {
        padding: 12px;
        background: #f90101;
    }
    .mobile-logos .gdlr-core-flexslider .flex-direction-nav .flex-nav-next {
        right: -20px;
    }
    .mobile-logos .gdlr-core-flexslider .flex-direction-nav .flex-nav-prev {
        left: -20px;
    }
    .gdlr-core-page-builder-body .mobile-logos img {
        max-width: 90%;
    }
    html .infinite-top-bar-right-text {
        display: inline;
        margin-right: 30px;
    }
    html .infinite-mobile-header-wrap .infinite-top-bar-right {
        margin-top: 10px;
    }
    html .infinite-mobile-header-wrap .infinite-top-bar-left {
        float: left;
        text-align: left;
    }
    .infinite-mobile-header-wrap .infinite-top-bar-right {
        float: right;
        text-align: right;
    }
    .header-phone {
        display: block;
    }
    html .responsive-map {
        padding-top: 70%;
    }
    html .contact-map .gdlr-core-pbf-wrapper-full-no-space {
        max-width: 100%;
    }
    .content-page .yt--popper:before, .content-page .yt--popper:after {
        background-size: 70px;
        width: 70px;
        height: 70px;
    }
    html .infinite-page-title-wrap .infinite-page-title-content, .post-template-default .infinite-blog-title-wrap .infinite-blog-title-content {
        padding-top: 80px !important;
        padding-bottom: 80px !important;
    }
   .logo-background {
        background-position-y: calc(23% - 0px);
    }
}

@media (max-width: 450px) {
    html .infinite-top-bar-right-social a {
        margin-left: 15px;
    }
    html .infinite-top-bar-right.infinite-item-pdlr {
        padding-left: 5px;
    }
    html .infinite-top-bar-left.infinite-item-pdlr {
        padding-right: 5px;
    }
    html .responsive-map {
        padding-top: 100%;
    }
}

/*------------------------
*      5. Keyframes      *
-------------------------*/
/* Fade In */
@-webkit-keyframes fade-in {
    0% {
        opacity: 0;
    }

    33% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }

    33% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* Zoom In */
@-webkit-keyframes zoom-in {
    0% {
        -webkit-transform: scale(0) translate(0, 0);
        -ms-transform: scale(0) translate(0, 0);
        transform: scale(0) translate(0, 0);
        opacity: 0;
    }

    100% {
        -webkit-transform: scale(1) translate(0, 0);
        -ms-transform: scale(1) translate(0, 0);
        transform: scale(1) translate(0, 0);
        opacity: 1;
    }
}
@keyframes zoom-in {
    0% {
        -webkit-transform: scale(0) translate(0, 0);
        -ms-transform: scale(0) translate(0, 0);
        transform: scale(0) translate(0, 0);
        opacity: 0;
    }

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