/*
 Theme Name:   Aside-DiviChi
 Theme URI:    http://aside.divichi.com
 Description:  A Child Theme Template for Divi by DiviChi
 Author:       Maureen Denny
 Author URI:   http://divichi.com
 Template:     Divi
 Version:      1
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
*/


/* loading custom fonts*/

@import url('//fonts.googleapis.com/css?family=Open+Sans|Playfair+Display');

/*Heading Styles*/
/*H1 styling*/
h1 {
    font-family: 'Playfair Display', serif;
    font-size: 2.4em;
    color: #111111;
    line-height: 1.4em;
    font-weight: normal;
    letter-spacing: 0px;
}

/*H2 styling*/
h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2em;
    color: #111111;
    font-weight: 500;
    line-height: 1.4em;
    letter-spacing: 0px;
}
/*H3 styling*/
h3 {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.5em;
    color: #111111;
    line-height: 1.4em;
    letter-spacing: 0px;
}
/*H4 styling*/
h4 {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.6em;
    color: #444444;
    line-height: 1.2em;
    letter-spacing: 0px;
}
/*H5 styling*/
h5 {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.2em;
    letter-spacing: 0.1em;
    color: #444444;
    line-height: 1.1em;
}
/*H6 styling*/
h6 {
    font-family: 'Open Sans', sans-serif;
    font-size: 1em;
    color: #ffffff;
    line-height: 1.2em;
}

a,
#submit {
    color: #111111;
}

/* hide default menu - use mobile menu on large screen */
@media only screen and ( min-width:980px) {
    #et_mobile_nav_menu {
        display: block
    }
    #top-menu-nav {
        display: none;
    }
    /* move menu to left side of screen */
    #et-top-navigation {
        position: absolute;
        left: 0;
        padding-left: 1% !important;
    }
    /* style the menu icon*/
    span.mobile_menu_bar:before {
        content: "\39";
        background-color: transparent;
        padding: 1px 0px 2px 2px;
        top: 9px;
        color: #977f43 !important;
        font-size: 50px;
        font-weight: 500;
    }
    /* add text to the menu icon */
    .mobile_menu_bar::after {
        content: "menu";
        position: absolute;
        padding: 0;
        background-color: transparent;
        color: #977f43 !important;
        cursor: pointer;
        font-size: 1.5em;
        font-weight: 500;
        left: 2px;
    }
    .mobile_nav.opened span.mobile_menu_bar:before {
        content: "\38";
    }
    #mobile_menu {
        display: block !important;
        min-height: 100vh;
        top: 0;
        border-top: none;
        padding-top: 80px;
        z-index: 9998;
        min-width: 35vw;
    }
    .mobile_nav.closed #mobile_menu {
        transform: rotateY(90deg);
        -webkit-transform: rotateY(90deg);
        transform-origin: left;
        -webkit-transform-origin: left;
        background: #000;
        transition: .5s ease-in-out !important;
        margin-left: -1900px;
    }
    .mobile_nav.opened #mobile_menu {
        transform: rotateY(0deg);
        -webkit-transform: rotateY(0deg);
        transform-origin: left;
        -webkit-transform-origin: left;
        background-color: rgba(0, 0, 0, 0.8);
        transition: 0.5s ease-in-out;
    }
    .mobile_menu_bar.mobile_menu_bar_toggle {
        z-index: 9999;
    }
    /* put menu middle of screen*/
    .et_mobile_menu {
        text-align: center;
        padding-top: 33vh !important;
    }
    .et_mobile_menu li a {
        color: #ffffff;
        font-size: 1.6em;
        letter-spacing: .1em;
        font-weight: 100;
    }
}

/* back to standard mobile menu for smaller devices */
@media only screen 
   and (max-width : 979px) {
       span.mobile_menu_bar.mobile_menu_bar_toggle {
       top: 0;
       margin-left: 5px;
        }   
       .mobile_menu_bar.mobile_menu_bar_toggle::before {
          color: #ffffff;
          background-color: #111111;
        }
       .et_mobile_menu {
          border-top: 0px solid #ffffff;
        }
        span.mobile_menu_bar:before {
        content: "\37";
        /*background-color: transparent;*/
        color: #ffffff;
        font-size: 2.8em;
        font-weight: 200;
        }
        .mobile_nav.opened span.mobile_menu_bar:before {
        content: "\36";  
        }  
        .et_mobile_menu li a {
        color: #ffffff;
        font-size: 1.1em;
        letter-spacing: .1em;
        font-weight: 100;
        background-color: rgba(0,0,0,0.8);
    }
}


#et-secondary-menu {
    float: left;
}
#et-secondary-nav .menu-icons a:before {
 right: 10px;
 top: 0px;
}
.menu-icons a { 
    padding-left: 0; 
} 
.menu-icons a:before { 
    font-family: 'ETmodules'; 
    position: absolute; 
    font-size: 2.2em;
    color: #ffffff;
} 
.menu-icon-20 a:before { 
    content: "\e009"; 
}
/* Hide the menu title */
#et-secondary-menu > ul > li a {
    color: transparent;
} 
/* Hide secondary menu on mobile menu to reduce duplication */
#et-top-navigation .menu-icon-20 {
    display: none;
}
#et-info {
    float: right;
}

#top-header {
    background-color: #111111;
}

@media(max-width: 980px) {
    .et_header_style_split .mobile_menu_bar,
    .et_header_style_left .mobile_menu_bar {
        z-index: 9998;
        position: absolute !important;
        left: 0 !important;
    }
    #main-header .container.clearfix.et_menu_container {
        width: 100%;
    }
    .logo_container {
        padding-left: 30px;
    }
    #et-top-navigation {
        padding-right: 30px;
    }
}


/** mobile edits**/

@media(max-width: 980px) {
    .et_header_style_split .mobile_menu_bar,
    .et_header_style_left .mobile_menu_bar {
        z-index: 9998;
    }
    #main-header .container.clearfix.et_menu_container {
        width: 100%;
    }
    .logo_container {
        padding-left: 30px;
    }
    #et-top-navigation {
        padding-right: 30px;
    }
    .mobile_menu_bar.mobile_menu_bar_toggle {
        z-index: 9999;
        top: 40vh;
    }
}

@media(min-width: 341px) {
    #mobile_menu {
        width: 340px;
        margin-right: calc(100% - 340px);
    }
    .mobile_menu_bar.mobile_menu_bar_toggle {
        z-index: 9999;
        top: 25vh;
    }
}

@media(max-width: 340px) {
    #mobile_menu {
        width: 100%;
        margin-right: 0;
    }
    .mobile_menu_bar.mobile_menu_bar_toggle {
        z-index: 9999;
        top: 40vh;
    }
}

.header-content-container bottom {
    padding-bottom: 10%;
}

.entry-header h1 {
    color: #fff;
    font-size: 4em;
    margin-top: 10vh;
    text-align: right;
}
span.et_pb_fullwidth_header_subhead {
    font-size: 1.6em;
    color: #977f43;
    text-align: right;
}
/* blurb style*/
.blurb-style p {
    text-align: justify;
    padding: 2%;
}

.et_pb_blurb_content .blurb-style {
    margin: 0 auto;
    padding-top: 7%;
}

.blurb-style h4,
.blurb-style h5 {
    padding: 2%;
}
.book-vendor {
    padding-bottom: 5%;
}
.dc-border {
    padding: 3%;
    border: 1px solid #000000;
    outline: 1px solid #977f43;
    outline-offset: -20px;
}
.intro-text-section {
    padding: 10%;
    border-top: 1px solid #000000;
}
.intro-text.et_pb_image  {
    margin-top: -60%;
}
.intro-text.et_pb_image img {
    border: 2px solid #000000;
    outline: 2px solid #977f43;
    outline-offset: -20px;
}

/* Contact page styling */

.header-height {
    height: 35vh;
}
.et_pb_fullwidth_section.header-height {
    border-bottom: 1px solid #000;
}

.et_pb_contact p input,
.et_pb_contact p textarea {
    border: 1px solid #000;
}
    .et_pb_contact_main_title {
        font-size: 40px;
        color: #977f43;
    }
    .et_pb_module.et_pb_text.contact-text h3 {
        color: #977f43;
    }
    .et_pb_button {
        color: #ffffff;
    }
    .dc-contact-text {
        border: 1px solid #000000;
        outline: 1px solid #977f43;
        outline-offset: -20px;
        padding: 10%;
    }
  
@media (max-width: 979px) {
    .intro-text.et_pb_image  {
        margin-top: 0;
    }
     .entry-header.et_pb_fullwidth_header {
        padding: 0;
     }
}
/* about page */
    .et_pb_team_member.about-text {
        border: 1px solid #000;
        outline: 1px solid #977f43;
        outline-offset: -20px;
        padding: 5%; 
    }
.about-box-indent {
    margin: 0 5%;
}

@media only screen 
   and (max-width : 768px) {
   .about-header,
   .blog-header {
        padding-top: 0 !important;
     }
}
/* style sidebar widgets */
    .widgettitle {
        border: 1px solid black;
        outline: 1px solid #977f43;
        outline-offset: -7px;
        padding: 5%;
        margin-bottom: 10px;
    }
    .widget_search input#searchsubmit {
        border: 1px solid #111111;
        color: #111111;
    }
    .widget_search input#searchsubmit {
        background-color: #977f43;
    }
    /* remove line in sidebar */
    .container:before {
        background-color: transparent !important;
    }
    .et_pb_widget_area_right {
        border-left: 0 !important;
    }
    .et_pb_widget_area_left {
        border-right: 0 !important;
    }
    /*--------------------------------------------------------------------*/
    /*-----Two, Three and Four Column Square Blog Layout by Divi Soup-----*/
    /*--------------------------------------------------------------------*/
    /***Global styles required for all layouts***/
    /*This scales the images keeping the aspect ratio. NOTE: Object-fit is not supported in IE and Edge so if you want to use the standard image size remove this section*/
    .ds-blog-square a img {
        width: 100%;
        object-fit: cover;
    }
    /*This section hides the excerpt*/
    .ds-blog-square .post-content {
        display: none;
    }
    /*This section corrects some margin and padding issues*/
    .ds-blog-square .et_pb_image_container {
        margin: -19px -19px 0;
    }
    .ds-blog-square h2 {
        margin: 0;
        padding: 0;
    }
    /*This section removes the bottom padding from the post and sets the position so we can move the title on top of the image*/
    .ds-blog-square .et_pb_post {
        position: relative;
        padding-bottom: 0;
        border: none;
    }
    /*This section adds the semi transparent overlay and border on the image. It also sets the post title to absolute center*/
    .ds-blog-square h2 a {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        padding: 40px;
        margin: 0;
        background: rgba(0, 0, 0, .4);
        color: #fff;
        font-size: 1.6em;
        line-height: 1.1em;
        text-align: center;
        outline: 1px solid #977f43;
        outline-offset: -20px;
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        -moz-transition: all 0.5s ease;
        -webkit-transition: all 0.5s ease;
        transition: all 0.5s ease;
    }
    /*This section changes the border and overlay colour and border position on hover*/
    .ds-blog-square h2 a:hover {
        background: rgba(255, 255, 255, .5);
        color: #000;
        outline: 4px solid #000;
        outline-offset: 0;
    }
  @media only screen and (max-width: 1200px) {
        .ds-blog-square h2 a{
            font-size: 1.2em;
            line-height: 1.3em;
        }
}   
/***4 Column Styles***/
/*This section changes the layout to 4 columns*/
@media only screen and ( min-width: 981px) {
    .ds-blog-four-column.et_pb_column_4_4 .et_pb_blog_grid[data-columns]::before {
        content: '4 .column.size-1of4' !important;
    }
    /*This section divides the width of the posts equally in the available space*/
    .ds-blog-four-column.et_pb_column_4_4 .column.size-1of4 {
        width: 20.875% !important;
        margin-right: 5.5%;
    }
    /*This removes the right margin from the last post on each row*/
    .ds-blog-four-column.et_pb_column_4_4 .column.size-1of4:nth-child(4n) {
        margin-right: 0;
    }
}
/*This sets the spacing between post rows*/
.ds-blog-four-column .et_pb_post {
    margin-bottom: 25%;
}
/*This section sets the height of the images on different screen sizes to keep it relatively square. If you are not using object-fit because it isn't supported in IE and Edge then you should remove this entire section or the images will be distorted*/
.ds-blog-four-column .ds-blog-square a img {
    height: 33vh !important; /*Adjust this value if you want the images taller or shorter*/
}
@media only screen and (max-width: 1440px) {
    .ds-blog-four-column .ds-blog-square a img {
        height: 28vh !important; /*Adjust this value if you want the images taller or shorter*/
    }
}
@media only screen and (max-width: 1280px) {
    .ds-blog-four-column .ds-blog-square a img {
        height: 25vh !important; /*Adjust this value if you want the images taller or shorter*/
    }
}
@media only screen and (max-width: 768px) {
    .ds-blog-four-column .ds-blog-square a img {
        height: 28vh !important; /*Adjust this value if you want the images taller or shorter*/
    }
}
@media only screen and (max-width: 480px) {
    .ds-blog-four-column .ds-blog-square a img {
        height: 40vh !important; /*Adjust this value if you want the images taller or shorter*/
    }
}

/* Set the padding for the content */
.skinny-optin-form  .et_bloom_form_container .et_bloom_form_content {
    padding: 0px !important;
}

/* Hide the header area */
.skinny-optin-form  .et_bloom_form_container .et_bloom_form_header {
   display: none !important;
}

/* Set the font size of the optin text module */
.skinny-optin-text {
    padding-top: 15px !important;
}

/* Set the margin for the optin form module */
.skinny-optin-form  {
    margin: 0px 0;
}

.skinny-optin-form .et_bloom_inline_form {
    margin: 10px 0 !important;
}

/* Add a little padding for smaller screens */
@media only screen and (max-width: 1110px) {
.skinny-optin-form  {
    margin-bottom: 25px;
	margin-top: 0px;
}
}

/* Set the font colour for the sucess and error messages */
.skinny-optin-form  h2.et_bloom_success_message, h2.et_bloom_error_message {
   color: #888 !important;
}

/* Set the border radius for the sucess and error messages */
.skinny-optin-form .et_bloom_form_container h2.et_bloom_error_message, h2.et_bloom_success_message {
   border-radius: 0px !important;
}

/* Hide the checkmark on success message */
.skinny-optin-form .et_bloom_success_container.et_bloom_animate_success span.et_bloom_success_checkmark {
    display: none;
}
.wide-section-divider {
    z-index: -50;
    margin-top: -40%;
}
/* media queries for mobile devices */
@media only screen 
   and (max-width : 768px)  {
   .dc-border {
       padding: 8%;
    }
    .et_pb_module.et_pb_team_member.about-text {
       padding: 9%;
    }
    div.header-height   {
      height: 20vh;
    } 
}