/*
 Theme Name:     HOGM Child Theme
 Description:    Custom Divi Child Theme for Hope of Glory
 Author:         CG Design
 Author URI:     http://www.creationgraphx.com
 Template:       Divi
 Version:        1.0.0
*/


/* =Theme customization starts here
------------------------------------------------------- */


/* Reduces Size of Paypal Button for Mobile
@media screen and (max-width : 480px){
.et_pb_row.et_pb_row_0 .et_pb_promo_description input {
max-width: 100%;
}
}*/

/* Set the slider height, padding, description */
@media only screen and ( min-width:981px ) {
.topslider, .topslider .et_pb_container {
height: 768px;
}
.topslider, .topslider .et_pb_slide {
max-height: 768px;
}
.topslider .et_pb_slide_description {
position: relative;
top: 35%;
padding-top: 0;
padding-bottom: 0;
height: auto;
}
}

/* Sets Slider Header and Text for mobile */
@media screen and (max-width: 960px) {
.et_pb_slide_content {
font-size: 16px !important;
}
.et_pb_slide_description h2{
font-size: 30px !important;
}
}

@media only screen and (max-width: 767px){
.et_pb_slide_description .et_pb_slide_title {
font-size: 30px !important;
}}

body #page-container .et_pb_fullwidth_header_0 .header-content { max-width: 100% !important; }

body #page-container .et_pb_fullwidth_header_0 .et_pb_button_two.et_pb_button:after { top: 5px; right: 15px; }


/*Donate, 5K, Pickup buttons in Secondary Menu*/
#et-secondary-nav > li.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-457{
    background: #dd3333;
    height: 22px;
    margin-right: 4px;
    margin-top: 2px;
    margin-bottom: 2px;
    padding-bottom: 10px;
    padding-right: 10px;
    padding-left: 10px;
    padding-top: 4px;
    border-radius: 1px;

}

#et-secondary-nav > li.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-3455{
    background: #f78e20;
    height: 22px;
    margin-right: 4px;
    margin-top: 2px;
    margin-bottom: 2px;
    padding-bottom: 10px;
    padding-right: 10px;
    padding-left: 10px;
    padding-top: 4px;
    border-radius: 1px;
}

#et-secondary-nav > li.menu-item.menu-item-type-custom.menu-item-object-custom.menu-item-5221{
    background: #7f2fc7;
	height: 22px;
    margin-right: 4px;
    margin-top: 2px;
    margin-bottom: 2px;
    padding-bottom: 10px;
    padding-right: 10px;
    padding-left: 10px;
    padding-top: 4px;
    border-radius: 1px;
}

/* Secondary Menu Hover Color */
#top-header #et-secondary-nav a:hover {
    color: #fff !important;
    opacity: .7 !important;
}

/*Mobile Menu Top Border Color*/
.et_mobile_menu {
    border-color: #dd3333;
}

/*Increase mobile logo size*/
@media (max-width: 980px) {
.et_header_style_left #logo, .et_header_style_split #logo {
    max-width: 80%;
}
}

/*Mobile Menu Collapse*/
#main-header .et_mobile_menu .menu-item-has-children > a { background-color: transparent; position: relative; }
#main-header .et_mobile_menu .menu-item-has-children > a:after { font-family: 'ETmodules'; text-align: center; speak: none; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; position: absolute; }
#main-header .et_mobile_menu .menu-item-has-children > a:after { font-size: 16px; content: '\4c'; top: 13px; right: 10px; }
#main-header .et_mobile_menu .menu-item-has-children.visible > a:after { content: '\4d'; }
#main-header .et_mobile_menu ul.sub-menu { display: none !important; visibility: hidden !important; transition: all 1.5s ease-in-out;}
#main-header .et_mobile_menu .visible > ul.sub-menu { display: block !important; visibility: visible !important;
}

/* Fix SERVE Button Hover Icon */
.home #page-container .et_pb_fullwidth_header_1 .et_pb_button_two.et_pb_button:after {
position: absolute;
top: 5px;
right: 40px !important;
margin-right: -25px;
}

/*------------------------------------------------*/
/*-----------------[CTA Mobile Menu Item]----------------*/
/*-----------------[by GenoQuiroz https://quiroz.co/transform-a-divi-menu-item-into-a-cta/]----------------*/
/*------------------------------------------------*/

/* Style the Donate CTA button */
            .donate {border-radius: 0px;}
            .donate a {color: #fff!important;}
            li.donate {
                background-color:#dd3333;
                font-weight: 700;
                text-transform: uppercase;
                text-align: center;
                /*padding: 12px 13px 10px 10px!important;*/
            border-radius: 3px;
                -moz-transition: all 0.5s;
                -webkit-transition: all 0.5s;
                transition: all 0.5s;}
            li.donate:hover {background-color:rgb(179, 41, 41);}

/* Hide Donate Button on Desktop */
@media only screen and (min-width: 981px) {
    .donate {
        display: none !important;
    }
}

/*-----------------------------------------------*/
/*-----5K Race Button on Mobile----*/
/*-----------------------------------------------*/

/* Style the 5K CTA button */
            .race {border-radius: 0px;}
            .race a {color: #fff!important;}
            li.race {
                background-color:#f78e20;
                font-weight: 700;
                text-transform: uppercase;
                text-align: center;
				margin-top: 10px;
                /*padding: 12px 13px 10px 10px!important;*/
            border-radius: 3px;
                -moz-transition: all 0.5s;
                -webkit-transition: all 0.5s;
                transition: all 0.5s;}
            li.race:hover {background-color:rgb(191, 114, 34);}


/* Hide Pickup Donation Button on Desktop */
@media only screen and (min-width: 981px) {
    .race {
        display: none !important;
    }
}

/*-----------------------------------------------*/
/*-----Pickup Donation Button on Mobile----*/
/*-----------------------------------------------*/

/* Style the Pickup Donation CTA button */
            .pickup {border-radius: 0px;}
            .pickup a {color: #fff!important;}
            li.pickup {
                background-color:#7f2fc7;
                font-weight: 700;
                text-transform: uppercase;
                text-align: center;
				margin-top: 10px;
                /*padding: 12px 13px 10px 10px!important;*/
            border-radius: 3px;
                -moz-transition: all 0.5s;
                -webkit-transition: all 0.5s;
                transition: all 0.5s;}
            li.pickup:hover {background-color:rgb(76, 1, 144);}


/* Hide Pickup Donation Button on Desktop */
@media only screen and (min-width: 981px) {
    .pickup {
        display: none !important;
    }
}

/*-----------------------------------------------*/
/*-----Scrolling Module Carousel by Divi Soup----*/
/*-----------------------------------------------*/


/*Carousel settings, adjust these values only*/

:root {
    --ds-module-number: 10; /*Your TOTAL number of modules, so if you have 8 modules duplicated, this number should be 16*/
    --ds-columns-desktop: 5; /*The number of modules you want displayed at any one time on desktop*/
    --ds-columns-tablet: 3; /*The number of modules you want displayed at any one time on tablet*/
    --ds-columns-mobile: 2; /*The number of modules you want displayed at any one time on mobile*/
    --ds-speed-desktop: 60s; /*The speed you want your carousel to move on desktop (increase value for slower, decrease for faster)*/
    --ds-speed-tablet: 60s; /*The speed you want your carousel to move on tablet (increase value for slower, decrease for faster)*/
    --ds-speed-mobile: 60s; /*The speed you want your carousel to move on mobile (increase value for slower, decrease for faster)*/
}

/**************************************************/
/*You do not need to edit anything below this line*/
/**************************************************/

/*Variables for desktop*/

@media all and (min-width: 981px) {
    :root {
        --ds-column-width: auto;
        --ds-module-width: calc(100vw / var(--ds-columns-desktop));
        --ds-column-animation: calc(var(--ds-module-width) - (var(--ds-module-width) * 2));
        --ds-scroll-speed: var(--ds-speed-desktop);
    }
}


/*Variables for tablets*/

@media all and (max-width: 980px) {
    :root {
        --ds-column-width: auto;
        --ds-module-width: calc(100vw / var(--ds-columns-tablet));
        --ds-column-animation: calc(var(--ds-module-width) - (var(--ds-module-width) * 2));
        --ds-scroll-speed: var(--ds-speed-tablet);
    }
}


/*Variables for mobile*/

@media all and (max-width: 479px) {
    :root {
        --ds-module-width: calc(100vw / var(--ds-columns-mobile));
        --ds-scroll-speed: var(--ds-speed-mobile);
    }
}


/*Hide the row overflow*/

.ds-carousel {
    overflow: hidden;
}


/*Define the grid and apply animation*/

.ds-carousel .et_pb_column {
    display: grid;
    grid-template-columns: repeat(var(--ds-module-number), var(--ds-module-width));
    width: var(--ds-column-width);
    -webkit-animation: scroll var(--ds-scroll-speed) linear infinite;
    animation: scroll var(--ds-scroll-speed) linear infinite;
}


/*Apply the module width*/

.ds-carousel .et_pb_module {
    width: var(--ds-module-width) !important;
}


/*Define the animation*/

@-webkit-keyframes scroll {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(calc(var(--ds-column-animation) * (var(--ds-module-number) / 2)));
        transform: translateX(calc(var(--ds-column-animation) * (var(--ds-module-number) / 2)));
    }
}

@keyframes scroll {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(calc(var(--ds-column-animation) * (var(--ds-module-number) / 2)));
        transform: translateX(calc(var(--ds-column-animation) * (var(--ds-module-number) / 2)));
    }
}


/*Pause animation on hover*/

.ds-carousel .et_pb_column:hover {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}

/*-----------------------------------------------*/
/*---End Scrolling Module Carousel by Divi Soup--*/
/*-----------------------------------------------*/