/*---------------------------------------------------------------------------------

 Theme Name:   Julie Zommers Divi Child Theme
 Theme URI:    
 Description:  
 Author:       
 Author URI:   
 Template:     Divi
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html

------------------------------ ADDITIONAL CSS HERE ------------------------------*/

/******************************************/
/*******Week 111 - Sample Stylesheet*******/
/******************************************/


/*Global styles*/

:root {
    /*Set colour values with variables to provide a single place to change colours*/
    -primary-color: #ff0000;
    -accent-color: #ffff00;
    -dark-color: #000000;
    -light-color: #ffffff;
    -mid-color: #888888;
}


/*Typography*/

p,
body,
.et_pb_post p {
    color: var(--dark-color);
    font-size: 16px;
    font-weight: normal;
    line-height: 1.2em;
}

h1,
.et_pb_column_1_3 h1,
.et_pb_column_1_4 h1 {
    color: var(#2d68c4);
    font-size: 50px;
    font-weight: 600;
    line-height: 1.5em;
    text-transform: uppercase;
}

h2,
.et_pb_column_1_3 h2,
.et_pb_column_1_4 h2 {
    color: var(--dark-color);
    font-size: 40px;
    font-weight: 500;
    line-height: 1.2em;
    text-transform: uppercase;
}

h3,
.et_pb_column_1_3 h3,
.et_pb_column_1_4 h3 {
    color: var(--dark-color);
    font-size: 100px;
    font-weight: 500;
    line-height: 1.2em;
    text-transform: uppercase;
}


/*Includes sidebar and footer widgets titles*/

h4,
.et_pb_column_1_3 h4,
.et_pb_column_1_4 h4,
.et_pb_widget h4.widgettitle {
    color: var(--dark-color);
    font-size: 25px;
    font-weight: 500;
    line-height: 1.2em;
    text-transform: uppercase;
}

h5,
.et_pb_column_1_3 h5,
.et_pb_column_1_4 h5 {
    color: var(#2d68c4);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.2em;
    text-transform: uppercase;
}

h6,
.et_pb_column_1_3 h6,
.et_pb_column_1_4 h6 {
    color: var(#2d68c4);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.2em;
    text-transform: uppercase;
}


/*Adjust typography for Divi's mobile breakpoints*/

@media all and (max-width: 980px) {
    p,
    body,
    .et_pb_post p {}
    h1,
    .et_pb_column_1_3 h1,
    .et_pb_column_1_4 h1 {}
    h2,
    .et_pb_column_1_3 h2,
    .et_pb_column_1_4 h2 {}
    h3,
    .et_pb_column_1_3 h3,
    .et_pb_column_1_4 h3 {}
    h4,
    .et_pb_column_1_3 h4,
    .et_pb_column_1_4 h4,
    .et_pb_widget h4.widgettitle {}
    h5,
    .et_pb_column_1_3 h5,
    .et_pb_column_1_4 h5 {}
    h6,
    .et_pb_column_1_3 h6,
    .et_pb_column_1_4 h6 {}
}

@media all and (max-width: 479px) {
    p,
    body,
    .et_pb_post p {}
    h1,
    .et_pb_column_1_3 h1,
    .et_pb_column_1_4 h1 {}
    h2,
    .et_pb_column_1_3 h2,
    .et_pb_column_1_4 h2 {}
    h3,
    .et_pb_column_1_3 h3,
    .et_pb_column_1_4 h3 {}
    h4,
    .et_pb_column_1_3 h4,
    .et_pb_column_1_4 h4,
    .et_pb_widget h4.widgettitle {}
    h5,
    .et_pb_column_1_3 h5,
    .et_pb_column_1_4 h5 {}
    h6,
    .et_pb_column_1_3 h6,
    .et_pb_column_1_4 h6 {}
}


/*Vertical alignment*/


/*Set columns to equalize and add class to column css field in advanced tab*/

@media all and (min-width: 981px) {
    .vertical-center {
        display: -webkit-box;
        display: -ms-flexbox;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }
}


/*Swap column order on tablet & mobile*/


/*For use with 2 column layouts - add class to row css field in advanced tab */

@media all and (max-width: 980px) {
    .swap-columns {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
    }
}


/*Buttons*/

.et_pb_button,
.et_button_no_icon .et_pb_button {
    color: var(--light-color);
    background: var(--accent-color);
    border-color: var(--accent-color);
}

.et_pb_button:hover,
.et_button_no_icon .et_pb_button:hover {
    color: var(--light-color);
    background: var(--primary-color);
    border-color: var(--primary-color);
}


/*Jumping header fix*/


/*Value needs to be the same height as your header*/

#page-container {
    padding-top: 100px !important;
}


/*Remove any horizonal browser scrollbars*/

#page-container {
    overflow: hidden;
}


/*Menu*/


/*Adjust when mobile menu is actiavted - change the 1080px value*/

@media all and (max-width:1080px) {
    #et_mobile_nav_menu {
        display: block;
    }
    #top-menu-nav {
        display: none;
    }
}


/*Remove the main header shadow*/

#main-header,
#main-header.et-fixed-header {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}


/*Switch last menu item sub menu alignment to right*/

#top-menu li:last-child ul {
    right: 0;
    left: auto;
}


/*Hamburger icon colour*/

.mobile_menu_bar::before,
.mobile_menu_bar::after {
    color: var(--accent-color);
}


/*Hamburger icon colour for fixed nav*/

.et-fixed-header .mobile_menu_bar::before,
.et-fixed-header .mobile_menu_bar::after {
    color: var(--primary-color);
}


/*Center align footer bottom bar when not using social icons*/

#footer-info {
    float: none;
    text-align: center;
}


/*Page background colour for archive, single posts and 404 pages*/

.single #main-content,
.archive #main-content,
.search #main-content,
.error404 #main-content {
    background: var(--mid-color);
}


/*Fix for fullwidth header button alignment on mobile*/

.et_pb_fullwidth_header .et_pb_fullwidth_header_container .et_pb_button_one,
.et_pb_fullwidth_header .et_pb_fullwidth_header_container .et_pb_button_two {
    margin-left: 0;
    margin-right: 15px;
}


/*Sidebar*/


/*Remove sidebar dividing line*/

.archive #main-content .container::before,
.search #main-content .container::before,
.single #main-content .container::before {
    display: none;
}


/*Set sidebar widgets to fullwidth on tablets & mobile*/

@media all and (max-width: 980px) {
    /*Widget width*/
    #sidebar .et_pb_widget {
        width: 100%;
    }
    /*Images*/
    #sidebar .et_pb_widget img {
        width: 100%;
    }
}


/*---Browser scrollbars---*/

::-webkit-scrollbar {
    width: 15px;
}

::-webkit-scrollbar-thumb {
    border-radius: 0;
    background: var(--primary-color);
}

::-webkit-scrollbar-thumb:window-inactive {
    background: var(--primary-color);
    opacity: .5;
}


/*Placeholder styling*/

::-webkit-input-placeholder {
    text-align: center;
}

::-moz-placeholder {
    text-align: center;
}

:-ms-input-placeholder {
    text-align: center;
}

:-moz-placeholder {
    text-align: center;
}


/*Back to top button*/

.et_pb_scroll_top.et-pb-icon {
    background: var(--accent-color);
    right: 10px;
    font-size: 20px
}


/*Change the icon - uses ET icon font, see the week 19 resource for all the icon codes*/

.et_pb_scroll_top:before {
    content: '\e043';
}


/*Change blog module image sizes and maintain aspect ratio*/

.et_pb_module .et_pb_post a img {
    height: 350px;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
}


/*Comment Form*/


/*Field spacing*/

.single p.comment-form-author,
.single p.comment-form-comment,
.single p.comment-form-email,
.single p.comment-form-url {
    padding-bottom: 0;
}


/*Input field styling*/

.single #commentform textarea,
.single #commentform input[type="text"],
.single #commentform input[type="email"],
.single #commentform input[type="url"] {
    border-radius: 0;
}


/*Set name and email fields side by side on larger screens*/

@media all and (min-width: 768px) {
    /*Comment form fields*/
    .single #commentform input#author {
        width: calc(50% - 10px);
        float: left;
    }
    .single #commentform input#email {
        width: calc(50% - 10px);
        float: right;
    }
    .single #commentform input#url {
        width: 100%;
    }
}