/*
Theme Name: GP Developer Child Theme
Template: generatepress
Theme URI: https://addisonhalldesign.com
Author: Addison Hall
Author URI: https://addisonhalldesign.com
Description: This is a child theme for GeneratePress for use in jumpstarting more customized development.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gpc
Tags: two-columns, three-columns, one-column, right-sidebar, left-sidebar, fluid-layout, fixed-layout, responsive-layout, flexible-header, full-width-template, buddypress, custom-header, custom-background, custom-menu, custom-colors, sticky-post, threaded-comments, translation-ready, featured-images, theme-options, light, white, dark, black, blue, brown, gray, green, orange, pink, purple, red, silver, tan, yellow
*/

/*

CONTENTS:
1. Defaults
2. Header and Nav
3. Home Page
4. Content
5. Components
6. Widgets
7. Footer
8. Other
9. Animations

*/

/* ==========================================
=! DEFAULTS
------------------------------------------ */

@media (max-width: 767px) {
    body, button, input, select, textarea {
        font-size: 18px;
    }
}

@media (min-width: 1025px) {
    .gpc .grid-container,
    .gpc .page-hero .inside-page-hero.grid-container,
    .gb-container-wide > .gb-inside-container {
        max-width: 80%;
        max-width: calc(80% + 80px);
    }
    .gb-container-slim > .gb-inside-container {
        max-width: 64.5%;
        max-width: calc(64.5% + 80px);
    }
}

.gb-inside-container > p:last-child {
    margin-bottom: 0;
}

body {
    font-family: "Decimal A", "Decimal B", sans-serif;
    letter-spacing: -0.0125em;
}

.font-serif {
    font-family: "Chronicle Text G1 A", "Chronicle Text G1 B", serif;
}

.font-sans {
    font-family: "Decimal A", "Decimal B", sans-serif;
}

/* .single-post .entry-content > p,
.single-post .entry-content > ul,
.single-post .entry-content > ol {
    font-family: "Chronicle Text G1 A", "Chronicle Text G1 B", serif;
    font-size: 27px;
    letter-spacing: 0;
    line-height: 1.4;
    margin-bottom: 1.4em;
} */

.entry-title,
h1,
.single-post .entry-content .wp-block-pullquote blockquote p {
    font-family: "Decimal A", "Decimal B", sans-serif;
    letter-spacing: -0.02em;
    margin-bottom: 0;
    hanging-punctuation: first;
}

h2 {
    letter-spacing: -0.035em;
}

h2,
h3,
.display-text {
    letter-spacing: -0.025em;
}

blockquote {
    border: none;
    padding: 20px 0;
    font-style: normal;
    margin: 0 0 1.4em;
}

ol, ul {
    margin: 0 0 1.5em 1.5em;
}

/* --- links --- */
.entry-content a,
.entry-title a,
a.gb-button-transparent-dark,
a.gb-button-transparent-light,
.gpc.page .entry-content .wp-show-posts-entry-title a,
.footer-block .footer-block__next-article a,
.slideout-navigation.main-navigation .main-nav ul li a {
    display: inline-block;
    position: relative;
    z-index: 1;
    transition: border-color 0.5s ease;
}
.slideout-navigation.main-navigation .main-nav ul li a {
    padding-left: 0;
    padding-right: 0;
}
.entry-content a:not(.button-plain)::after,
.entry-title a::after,
a.gb-button-transparent-dark:not(.button-plain)::after,
a.gb-button-transparent-light:not(.button-plain)::after,
.slideout-navigation.main-navigation .main-nav ul li a::after,
.footer-block .footer-block__next-article a::after {
    position: absolute;
    left: 0;
    bottom: 0;
    content: '';
    display: block;
    background-color: #DDDDDD;
    width: 100%;
    height: 2px;
    z-index: -1;
    transition: all 0.5s ease;
}
/* disable underline on GB buttons */
a.gb-button-transparent-dark:not(.button-plain)::after,
a.gb-button-transparent-light:not(.button-plain)::after,
.gpc.page .entry-content .wp-show-posts-entry-title a::after,
.entry-title a::after,
.slideout-navigation.main-navigation .main-nav ul li a::after,
#wpsp-230 .wp-show-posts-image a::after,
#wpsp-549 .wp-show-posts-image a::after,
#wpsp-599 .wp-show-posts-image a::after,
.footer-block .footer-block__next-article a::after {
    height: 0;
}
.entry-content a:focus::after,
.entry-content a:hover::after,
a.gb-button-transparent-dark:not(.button-plain):focus::after,
a.gb-button-transparent-dark:not(.button-plain):hover::after,
a.gb-button-transparent-light:not(.button-plain):focus::after,
a.gb-button-transparent-light:not(.button-plain):hover::after,
.gpc.page .entry-content .wp-show-posts-entry-title a:focus::after,
.gpc.page .entry-content .wp-show-posts-entry-title a:hover::after,
.entry-title a:focus::after,
.entry-title a:hover::after,
.footer-block .footer-block__next-article a:focus::after,
.footer-block .footer-block__next-article a:hover::after,
.slideout-navigation.main-navigation .main-nav ul li a:hover::after { /* only over for slideout since home defaults focus */
    background-color: #EEEEEE;
    height: 100%;
}
/* BG button additional hover effects */
a.gb-button-transparent-dark:not(.button-plain):focus,
a.gb-button-transparent-dark:not(.button-plain):hover,
a.gb-button-transparent-light:not(.button-plain):focus,
a.gb-button-transparent-light:not(.button-plain):hover {
    border-color: transparent !important;
}
a.gb-button-transparent-light:not(.button-plain):focus::after,
a.gb-button-transparent-light:not(.button-plain):hover::after,
.slideout-navigation.main-navigation .main-nav ul li a:focus::after,
.slideout-navigation.main-navigation .main-nav ul li a:hover::after,
.footer-block .footer-block__next-article:focus a::after,
.footer-block .footer-block__next-article:hover a::after {
    background-color: rgba(255, 255, 255, 0.2) !important;
}
/* .page .entry-content a.gb-button-transparent-dark:focus::after,
.page .entry-content a.gb-button-transparent-dark:hover::after {
    width: 120%;
    left: -10%;
} */

/* ==========================================
=! HEADER AND NAV
------------------------------------------ */

/* --- transition sticky nav color when scrolled to bottom --- */
#sticky-navigation {
    transition: background-color 0.25s ease, transform 300ms ease-in-out 0s !important;
}
[class*="sticky-nav-style-dark"] #sticky-navigation {
    background-color: transparent;
    box-shadow: none;
}
[class*="sticky-nav-style-dark"] #sticky-navigation .sticky-navigation-logo {
    background-image: url('/wp-content/uploads/2021/08/blanchardgroup-bodonibt-logotype-white-372px.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
#sticky-navigation .sticky-navigation-logo .is-logo-image {
    transition: opacity 0.25s ease;
}
[class*="sticky-nav-style-dark"] #sticky-navigation .sticky-navigation-logo .is-logo-image {
    opacity: 0;
}
#sticky-navigation .menu-bar-items {
    transition: color 0.25s ease;
}
[class*="sticky-nav-style-dark"] #sticky-navigation .menu-bar-items,
[class*="sticky-nav-style-dark"] #sticky-navigation .menu-toggle {
    color: #FFFFFF;
    background-color: transparent;
}
[class*="sticky-nav-style-dark"] #sticky-navigation .menu-bar-item:hover a {
    background-color: transparent;
    color: #FFFFFF;
}

.main-navigation.sticky-navigation-transition .site-logo img,
.main-navigation.sticky-navigation-transition .navigation-search input[type="search"],
.main-navigation.sticky-navigation-transition .navigation-branding img {
    height: auto;
    max-width: 186px;
}

@media (max-width: 768px) {
    .gpc .navigation-branding {
        margin-left: 30px;
    }
}

/* @media (min-width: 769px) {
    .gpc .main-navigation .menu-bar-item > a {
        margin-right: -20px;
    }
} */

.gpc .main-navigation .menu-bar-items,
.gpc .mobile-menu-control-wrapper .menu-toggle {
    background-image: url('/wp-content/themes/generatepress-child/img/bg-butterfly-flapping-wings-v2.gif');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.gpc .main-navigation .menu-bar-items .menu-bar-item:hover > a,
.gpc .mobile-menu-control-wrapper .menu-toggle {
    background-color: transparent;
}
.gp-icon.pro-menu-bars,
.gpc .mobile-menu-control-wrapper .menu-toggle .icon-menu-bars {
    visibility: hidden;
}

/* --- slideout navigation --- */
.gpc .slideout-navigation.do-overlay .inside-navigation {
    justify-content: center;
    max-width: 64.5%;
    max-width: calc(64.5% + 80px);
    height: 100vh;
    padding: 40px;
    text-align: left;
}
.gpc .slideout-navigation .main-nav {
    margin-bottom: 0;
}
.gpc .slideout-navigation .main-nav + .slideout-widget {
    margin-top: 50px;
}
.gpc .slideout-widget {
    font-size: 14px;
}
.gpc .slideout-navigation.do-overlay .inside-navigation .main-nav,
.gpc .slideout-navigation.do-overlay .inside-navigation .slideout-widget {
    width: 100%;    
}
.gpc #generate-slideout-menu.do-overlay .slideout-menu li,
.gpc .slideout-navigation.do-overlay .inside-navigation {
    text-align: left;
}
/* .butterfly-nav-home {
    max-width: 60px;
    position: relative;
    left: -5px;
    bottom: 5px;
} */

/* ==========================================
=! HOME PAGE
------------------------------------------ */

/* .page-hero.hero-home {
    background-image: url('/wp-content/uploads/2021/07/butterfly-yellow-landed-right-up.jpg');
    background-size: 320px 162px;
    background-position: bottom 10px left 25px;
    background-repeat: no-repeat;
    -webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
            animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
} */
/* .page-hero.hero-home {
    background-image: url('/wp-content/uploads/2021/07/butterfly-abstract-1.jpg');
    background-size: 145px 169px;
    background-position: bottom 10px left 25px;
    background-repeat: no-repeat;
    -webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
            animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
} */
.page-hero.hero-home .inside-page-hero {
    position: relative;
}
.page-hero.hero-home .inside-page-hero .hero-home-heading {
    font-size: 45px;
    position: relative;
    /* margin-top: 45px; */

    /* testing fonts */
    /* font-family: "Whitney A", "Whitney B", sans-serif !important;
    letter-spacing: 0 !important; */
}
.page-hero.hero-home .hero-home-heading__butterfly {
    position: absolute;
    width: 100%;
    height: auto;
}
.hero-home-heading__butterfly.butterfly-1 {
    top: -160px;
    right: 15%;
    max-width: 160px;
}
.hero-home-heading__butterfly.butterfly-2 {
    top: -200px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 220px;
}
.hero-home-heading__butterfly.butterfly-3 {
    top: -160px;
    right: 15%;
    max-width: 160px;
}
.hero-home-heading__butterfly.butterfly-4 {
    top: 100%;
    left: 0;
    max-width: 320px;
}

/* ==========================================
=! CONTENT
------------------------------------------ */

/* --- blog archive --- */
.blog.separate-containers .inside-article {
    display: flex;
    flex-direction: column;
}
@media (max-width: 767px) {
    .blog .post.generate-columns {
        margin-bottom: 0;
    }
}
@media (min-width: 768px) {
    .blog .site-content {
        margin-top: 50px;
        margin-bottom: 200px;
    }
    .blog.separate-containers .inside-article {
        padding: 0;
    }
    .blog .generate-columns-container {
        margin-left: 0;
        padding-left: 40px;
        padding-right: 40px;
    }
    .blog .generate-columns {
        padding-left: 0;
        margin-bottom: 100px;
    }
}
@media (min-width: 1025px) {
    .blog .generate-columns.is-featured {
        width: 50%;
    }
}
.blog.post-image-above-header .inside-article .post-image {
    margin-bottom: 1em;
}
.blog.post-image-above-header .inside-article .wp-post-image,
.gpc.single-post .featured-image img,
#wpsp-230 .wp-show-posts-image img,
#wpsp-549 .wp-show-posts-image img,
#wpsp-599 .wp-show-posts-image img {
    mix-blend-mode: multiply;
}
.blog.post-image-above-header .inside-article .post-image a,
.blog.post-image-above-header .inside-article .post-image img {
    display: block;
}
.post-image a,
a.post-color,
.wp-show-posts-image a,
.single-post .featured-image {
    background: rgb(255,255,255);
    background: linear-gradient(75deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.075) 100%);
    /* background: rgb(194,193,69);
    background: linear-gradient(90deg, rgba(194,193,69,0.5049370089832808) 0%, rgba(59,52,142,0.5049370089832808) 100%); */
}
.blog .entry-header {
    padding-right: 30px;
    padding-left: 30px;
    margin-left: 10px;
    order: 2;
}
.blog .entry-title {
    font-size: 17px;
    font-weight: bold;
    letter-spacing: 0;
}
.blog .entry-meta {
    font-size: 14px;
    letter-spacing: 0;
    margin-top: 0;
    padding-right: 28px;
    padding-left: 28px;
    margin-left: 10px;
    order: 1;
    position: relative;
}
.blog .entry-meta::before {
    content: '';
    width: 20px;
    height: 1px;
    background: #000;
    position: absolute;
    top: 50%;
    left: 0;
}
.blog .entry-meta .cat-links {
    pointer-events: none;
}
.blog .entry-meta .cat-links .gp-icon {
    display: none;
}
.blog .post-color {
    height: 0;
    padding-bottom: 56.25%;
    margin-bottom: 1em;
}

.single-post .site.grid-container {
    max-width: 100%;
}
.single-post .entry-content > h2 {
    margin-bottom: 0.35em;
}
@media (max-width: 767px) {
    .single-post .entry-content {
        font-size: 14px;
    }
    .single-post .entry-content > h2 {
        font-size: 17px;
    }
    .single-post .entry-content > h3 {
        font-size: 15px;
    }
}
@media (min-width: 1025px) {
    .single-post .inside-article {
        /* max-width: 810px; */
        max-width: 64.5%;
        max-width: calc(64.5% + 80px);
        margin-right: auto;
        margin-left: auto;
    }
}

/* --- pullquote --- */
.wp-block-pullquote {
    border: none;
    padding: 1.4em 0;
    text-align: unset;
}
.wp-block-pullquote:not(.is-style-solid-color) {
    border-top: 4px solid;
    border-bottom: 4px solid;
}
.wp-block-pullquote blockquote {
    margin: 0;
    padding: 0;
}
.wp-block-pullquote p {
    font-weight: bold;
    line-height: 1.3em;
}
@media (min-width: 768px) {
    .wp-block-pullquote p {
        font-size: 45px;
    }
}

/* --- blockquote --- */
blockquote {
    font-size: 85%;
}
.wp-block-quote {
    border: none;
    padding: 0 3em 0 2em;
}
.wp-block-quote p {
    margin-bottom: 0.5em;
}

/* ==========================================
=! COMPONENTS
------------------------------------------ */

/* --- background video --- */
.bg-video {
    object-fit: cover;
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    background-color: white;

    /* position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 0;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url(polina.jpg) no-repeat;
    background-size: cover;  */
}

/* --- fixes potential theme css conflict --- */
.acf-map img {
    max-width: inherit !important;
}

/* --- responsive embed --- */
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.embed-container iframe, .embed-container object, .embed-container embed, .embed-container video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* --- breadcrumbs --- */
.breadcrumbs {
    font-size: 14px;
    margin-bottom: 10px;
}

/* --- wp show posts --- */
.wp-show-posts-columns .wp-show-posts-single:not(.wp-show-posts-masonry-block) .wp-show-posts-image img {
    object-fit: unset;
}
.bg-articles.wp-show-posts .wp-show-posts-image {
    margin-bottom: 1em;
}
.bg-articles.wp-show-posts .wp-show-posts-entry-header {
    display: flex;
    flex-direction: column;
    margin-bottom: 0.25em;
}
.bg-articles.wp-show-posts .wp-show-posts-entry-header,
.bg-articles.wp-show-posts .wp-show-posts-entry-summary {
    padding-right: 28px;
    padding-left: 28px;
    margin-left: 10px;
}
.bg-articles.wp-show-posts .wp-show-posts-entry-title {
    font-size: 17px;
    letter-spacing: 0;
    order: 2;
}
.bg-articles.wp-show-posts .wp-show-posts-entry-meta {
    font-size: 14px;
    order: 1;
    position: relative;
}
.bg-articles.wp-show-posts .wp-show-posts-entry-meta::before {
    content: '';
    width: 20px;
    height: 1px;
    background: #000;
    position: absolute;
    top: 50%;
    left: -30px;
}
@media (max-width: 767px) {
    .bg-articles--homepage .wp-show-posts-single {
        margin-bottom: 60px;
    }
}

/* post header */
.post-single-header {
    padding-top: 10vh;
}
@media (min-width: 768px) {
    .post-single-header {
        padding-top: 30vh;
    }
}
.post-single-header .eyebrow {
    font-size: 14px;
}
.post-single-header .eyebrow a {
    color: #222222;
}
@media (min-width: 768px) {
    .post-single-header .eyebrow {
        font-size: 16px;
    }
    .post-single-header .entry-title {
        font-size: 48px;
        margin-bottom: 1rem;
    }
}

/* --- post author info --- */
.author-bio {
    margin-top: 2em;
}
.author-bio::before {
    content: '';
    display: block;
    background-color: #222222;
    width: 20px;
    height: 1px;
    margin-bottom: 1em;
}
/* @media (min-width: 1024px) {
    .author-bio {
        max-width: 66.66%;
    }
} */
.author-bio__header,
.author-bio__description {
    font-size: 12px;
}
@media (min-width: 768px) {
    .author-bio__header,
.author-bio__description {
    font-size: 19px;
    letter-spacing: -0.01em;
}
}
/* .author-bio__description {
    font-style: italic;
} */

/* --- team bio --- */
.gb-headline-h3-team-name {
    position: relative;
}
.gb-headline-h3-team-name:after {
    content: '';
    display: block;
    background-color: #222222;
    width: 20px;
    height: 1px;
    position: absolute;
    bottom: 0;
    left: 0;
}

/* --- post paging navigation --- */
.separate-containers .paging-navigation {
    font-family: "Decimal A", "Decimal B", sans-serif;
    padding: 0;
}
.paging-navigation .gb-container.footer-block::before {
    transition: opacity 1.5s ease;
}
/* .paging-navigation:hover .gb-container.footer-block::before {
    opacity: 0.4;
} */

/* --- wp gallery --- */
.wp-block-gallery.logo-grid .blocks-gallery-caption {
    font-size: 14px;
    text-align: left;
}

/* --- logo grid --- */
.wp-block-gallery.logo-grid .blocks-gallery-item {
    flex-grow: 0;
}
@media (min-width: 1280px) {
    .wp-block-gallery.logo-grid {
        margin-left: -8%;
        margin-right: -8%;
    }
    .wp-block-gallery.logo-grid .blocks-gallery-item {
        flex-grow: 0;
    }
    .wp-block-gallery.logo-grid .blocks-gallery-item figure {
        padding: 5% 10%;
    }
    .wp-block-gallery.logo-grid .blocks-gallery-caption {
        margin-left: 2rem;
        margin-top: 1rem;
    }
}

/* --- getwid video popup --- */
.gpc .has-image .wp-block-getwid-video-popup__wrapper {
    min-height: unset;
    height: 0;
    padding: 56.25% 0 0 0;
}
.gpc .has-image .wp-block-getwid-video-popup__button {
    position: absolute;
    z-index: 1;
    top: 50%;
    transform: translateY(-50%);
}
.gpc .wp-block-getwid-video-popup__link {
    display: block;
}
.gpc .wp-block-getwid-video-popup__caption:empty {
    display: none;
}

/* --- reading progress bar for articles --- */
.readingProgressbar {
    transition: opacity 0.5s ease;
}
.hit-bottom .readingProgressbar {
    opacity: 0;
}

/* ==========================================
=! WIDGETS
------------------------------------------ */

/* --- GPC Sub Menu Widget --- */
.widget_gpc_sub_menu_widget .dropdown-menu-toggle { display: none; }
.widget_gpc_sub_menu_widget .menu-item-has-children .sub-menu { margin-left: 1.2em; }
.widget_gpc_sub_menu_widget .menu-item-has-children .sub-menu li { list-style: disc; }
.widget_gpc_sub_menu_widget .current-menu-item > a { font-weight: bold; }

/* --- header widgets --- */
.header-widget {
    font-family: "Decimal A", "Decimal B", sans-serif;
    
    font-size: 14px;
    font-weight: bold;
}
.header-widget ul li {
    margin-bottom: 0;
}

/* --- single post header widget --- */
/* .single-post.nav-float-right .header-widget {
    margin-left: auto;
    order: 1;
}
.single-post.nav-float-right #site-navigation {
    margin-left: 10px;
    order: 2
} */

/* ==========================================
=! FOOTER
------------------------------------------ */

.inside-site-info {
    /* max-width: 774px; */
    justify-content: flex-start;
}

.gb-container.footer-block {
    position: relative;
}

/* --- chryssie easter egg animation --- */
.meadow {
    position: absolute;
    bottom: 0;
    left: 50%;
    display: block;
    transform: translateX(-50%);
    width: 200px;
    height: 150px;
    margin: 0 auto;
    background-image: url("/wp-content/uploads/2022/11/bg-chryssie-flowers.png");
    background-position: center bottom;
    background-size: contain;
    background-repeat: no-repeat;
}

.butterfly {
    position: absolute;
    top: 68px;
    left: 84px;
    width: 40px;
    height: auto;
    cursor: pointer;
    animation: butterfly-pulse 4s ease-in-out infinite;
}

@keyframes butterfly-pulse {
    0% {
        transform: scale(100%) translateY(0);
    }
    80% {
        transform: scale(100%) translateY(0);
    }
    85% {
        transform: scale(108%) translateY(-1px);
    }
    90% {
        transform: scale(100%) translateY(0);
    }
    95% {
        transform: scale(108%) translateY(-1px);
    }
    100% {
        transform: scale(100%) translateY(0);
    }
}

/* ==========================================
=! OTHER
------------------------------------------ */

.full-width,
.full-width img {
    width: 100%;
}

/* ==========================================
=! ANIMATION
------------------------------------------ */

/* --- do all the preload stuff --- */
@media (min-width: 768px) {
    .preload * {
        -webkit-transition: none !important;
        transition: none !important;
        -webkit-animation: none !important;
        animation: none !important;
    }
    .has-js .prep-animation,
    .has-js .prep-scroll-animation {
        visibility: hidden;
    }
    .has-js .do-animation,
    .has-js .do-scroll-animation {
        visibility: visible;
    }
}

/* ----------------------------------------------
 * Generated by Animista
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

 @media (min-width: 768px) {
     .fade-in-left {
         -webkit-animation: fade-in-left 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
                 animation: fade-in-left 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
     }
     
     .fade-in {
         -webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
                 animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
     }
     
     .fade-in-bottom {
         -webkit-animation: fade-in-bottom 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
                 animation: fade-in-bottom 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
     }
     
     .fade-in-top {
         -webkit-animation: fade-in-top 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
                 animation: fade-in-top 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
     }
     
     .fade-in-right {
         -webkit-animation: fade-in-right 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
                 animation: fade-in-right 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
     }
 }

/* --- animation fade-in-left --- */
@-webkit-keyframes fade-in-left {
    0% {
        -webkit-transform: translateX(-75px);
                transform: translateX(-75px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
                transform: translateX(0);
        opacity: 1;
    }
}
@keyframes fade-in-left {
    0% {
        -webkit-transform: translateX(-75px);
                transform: translateX(-75px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
                transform: translateX(0);
        opacity: 1;
    }
}

/* --- animation fade-in --- */
@-webkit-keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* --- animation fade-in-bottom --- */
@-webkit-keyframes fade-in-bottom {
    0% {
        -webkit-transform: translateY(75px);
                transform: translateY(75px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
                transform: translateY(0);
        opacity: 1;
    }
}
@keyframes fade-in-bottom {
    0% {
        -webkit-transform: translateY(75px);
                transform: translateY(75px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
                transform: translateY(0);
        opacity: 1;
    }
}

/* --- animation fade-in-top --- */
@-webkit-keyframes fade-in-top {
    0% {
        -webkit-transform: translateY(-75px);
                transform: translateY(-75px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
                transform: translateY(0);
        opacity: 1;
    }
}
@keyframes fade-in-top {
    0% {
        -webkit-transform: translateY(-75px);
                transform: translateY(-75px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
                transform: translateY(0);
        opacity: 1;
    }
}

/* --- animation fade-in-right --- */
@-webkit-keyframes fade-in-right {
    0% {
        -webkit-transform: translateX(75px);
                transform: translateX(75px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
                transform: translateX(0);
        opacity: 1;
    }
}
@keyframes fade-in-right {
    0% {
        -webkit-transform: translateX(75px);
                transform: translateX(75px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
                transform: translateX(0);
        opacity: 1;
    }
}
  
  
/* --- delay classes --- */
.delay-250 {
    -webkit-animation-delay: 250ms;
    animation-delay: 250ms;
}
.delay-500 {
    -webkit-animation-delay: 500ms;
    animation-delay: 500ms;
}
.delay-750 {
    -webkit-animation-delay: 750ms;
    animation-delay: 750ms;
}
.delay-1000 {
    -webkit-animation-delay: 1000ms;
    animation-delay: 1000ms;
}
.delay-1250 {
    -webkit-animation-delay: 1250ms;
    animation-delay: 1250ms;
}
.delay-1500 {
    -webkit-animation-delay: 1500ms;
    animation-delay: 1500ms;
}
.delay-1750 {
    -webkit-animation-delay: 1750ms;
    animation-delay: 1750ms;
}
.delay-2000 {
    -webkit-animation-delay: 2000ms;
    animation-delay: 2000ms;
}
.delay-2500 {
    -webkit-animation-delay: 2500ms;
    animation-delay: 2500ms;
}
.delay-3000 {
    -webkit-animation-delay: 3000ms;
    animation-delay: 3000ms;
}
.delay-3500 {
    -webkit-animation-delay: 3500ms;
    animation-delay: 3500ms;
}
.delay-4500 {
    -webkit-animation-delay: 4500ms;
    animation-delay: 4500ms;
}
.delay-5000 {
    -webkit-animation-delay: 5000ms;
    animation-delay: 5000ms;
}
.delay-6000 {
    -webkit-animation-delay: 6000ms;
    animation-delay: 6000ms;
}
.delay-7000 {
    -webkit-animation-delay: 7000ms;
    animation-delay: 7000ms;
}