/*
 Theme Name:     Sift
 Description:    Sift
 Author:         Audentio
 Author URI:     https://www.audentio.com
 Template:       Divi
 Version:        1.0.0
*/


/*
 * Fix for image overflow issue on IE 11.
 * @see: HORZN-57
 *
 * Images are overflowing out of their container div. The divi css sets the
 * images to display block, setting them to inline-block seems to resolve
 * the issue.
 */
.et_pb_main_blurb_image {
  display: inline-block;
}


/*
 * Fix for logo overlappying search box on small screens.
 * @see HORZN-263: https://projects.sift.co.uk/jira/browse/HORZN-263
 */
@media (max-width: 980px) {
  .et_header_style_left .et-search-form, .et_header_style_split .et-search-form {
    width: 100%!important;
    max-width: 100%!important;
  }
  .et_header_style_left .et-search-form input, .et_header_style_split .et-search-form input {
    width: 100%;
    width: calc(100% - 30px); /* Offset the position right.*/
    background: white;
  }
}
@media (min-width: 981px) {
  #main-header form.et-search-form {
    max-width: 400px !important;
  }
}

/*
 * Fix for image size issue on medium size screens.
 * @see: HORZN-243 https://projects.sift.co.uk/jira/browse/HORZN-243
 */
@media only screen and (min-width: 981px) and (max-width: 1246px) {
  #logo {
    max-width: 300px;
  }
}


/*
 * General site improvements
 *
 * The following CSS rules are generic site improvements that can't
 * be defined in the Divi UI.
 */
@media only screen and (max-width: 980px) {
  #main-header .container {
    width: 90%;
  }
}

/*
 * Fix Divi Hero button alignment.
 * Divi put margin-left on the second button, which mis-aligns on smaller devices,
 * when the buttons, are one above the other.
 *
 * Remove the margin-left on the second button.
 * ONLY add margin-right to the first if there is a second button.
 */
.et_pb_fullwidth_header .et_pb_fullwidth_header_container .et_pb_button_two {
  margin-left: 0;
}

.et_pb_fullwidth_header .et_pb_fullwidth_header_container .et_pb_more_button:first-of-type:not(:last-of-type) {
  margin-right: 15px;
}

/*
 * Adding responsive CSS for cookies table
 * @see: HORZN-342 https://projects.sift.co.uk/jira/browse/HORZN-342
 */
@media only screen and (max-width: 840px) {
  table.responsive {
    margin-bottom: 0;
    overflow: hidden;
    overflow-x: scroll;
    display: block;
    white-space: nowrap;
  }
}

/*
 * Set the default font weight for sites to 'normal'.
 */
body {
  font-weight: 400;
}

/*
 * Helper class to vertically align items.
 */
.vertical-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/*
 * For default posts, if there is no sidebar
 * restrict width and center.
 */
.post-template-default.et_full_width_page .et_pb_post {
  max-width: 800px;
  margin-right: auto;
  margin-left: auto;
}

/*
 * Helper class to change background image position
 * on mobile and tablet viewport widths.
 */
@media (max-width: 980px) {
  .m-t-bgp-left {
    background-position: left;
  }
}

/*
 * Helper class to give content a max-width when
 * inside a full width section/row.
 */
.mwidth-500 {
  max-width: 500px;
}

/*
 * Helper class to equalise card heights regardless of the content, using flex
 */
@media (min-width: 981px) {
  .flex {
    display: flex;
    flex: 1;
  }
}

/*
 * Helper class to text-align center.
 */
  .text-center {
    text-align: center;
  }

/*
 * Helper class to add padding to certain aspects of a module not all the module content, i.e. blurb content includes
 * image, header and copy text. We only want padding on header and copy text.
 */
  .content-padding h4 {
    padding: 30px 30px 0 30px;
  }

  .content-padding p:first-of-type {
    padding: 0 30px;
  }

  .content-padding p:last-of-type {
    padding: 0 30px 30px 30px;
  }

/*
 * Overriding widget sidebar hover style to inherit the link colour. Currently Divi sets hover colour too #f7f7f7.
 */
.et_pb_widget_area .et_pb_widget li a:hover {
  color: inherit;
  text-decoration: underline;
}

/*
 * Adding a divider between each category on the category landing page.
 */
.category #content-area .et_pb_post {
  padding-bottom: 50px;
  border-bottom: 1px solid #e2e2e2;
  margin-bottom: 50px;
}

.category #content-area .et_pb_post:last-of-type {
  padding-bottom: 0;
  border-bottom: 0;
}

/*
 * Adding class and css to equlaise card heights in the blog module.
 * @see HORZN-974 Equalise card heights in divi blog module.
 * @see HORZN-1152 There is a need to set 3 different post equalise values.
 */
@media (min-width: 981px) {
  .sm-post-equalise .et_pb_post {
    min-height: 500px;
  }
  .md-post-equalise .et_pb_post {
    min-height: 550px;
  }
  .lg-post-equalise .et_pb_post {
    min-height: 600px;
  }
}

/*
 * Adding css styles to the categories hover on individual blog posts giving it colour and text decoration.
 * @see HORZN-971 Hover status for categories.
 */
#sidebar .widget_categories li a:hover {
  color: #666;
  text-decoration: underline;
}

/*
 * Adding css to make the header in the category sidebar smaller as it starts to wrap on tablet screen sizes.
 * @see HORZN-1000 Category sidebar header size.
 */
@media only screen and (max-width: 1246px) {
  #sidebar .widget_categories .widgettitle {
    font-size: 25px;
  }
}
@media only screen and (min-width: 1247px) and (max-width: 1385px) {
  #sidebar .widget_categories .widgettitle {
    font-size: 30px;
  }
}

/*
 * Adding css to the sift theme to set the mobile text colour to black as default.
 * @see HORZN-1012 Mobile search bar.
 */
@media (max-width: 980px) {
  .et_search_outer .et_search_form_container .et-search-field {
    color: #000;
  }
}

/*
 * The following css added to the sift theme was to solve and fix a design issue for blurb images on IE11, spotted on
 * Parry Hancock.
 * @see HORZN-1042 IE11 Blurb imgae issue.
 */
*::-ms-backdrop, .blurb-width .et_pb_main_blurb_image img {
  width: 100%;
}

/*
 * The following css was added to allow for icons and images to be aligned to the left for the blurb module.
 * The class you need to implement this alignment style is blurb-image-alignment.
 */
  .blurb-image-alignment .et_pb_blurb_content .et_pb_main_blurb_image {
    display: block;
    text-align: left;
  }

/*
 * The following css was added to th sift theme to solve a issue on safari where the tel and fax links were styled
 * differently meaning they were no longer visible on out Horizon sites.
 * @see HORZN-1246 Tel and Fax links on Safari need fixing to use text colour over link colour.
 */
  a[href^=tel] {
    text-decoration:inherit;
    color: inherit;
  }

/*
 * The following css is used to visually differentiate the active link of sidebar menu's compare to normal link items.
 * @see HORZN-1403 Active link status in sidebar menu's.
 */
.menu .current-menu-item {
  text-decoration: underline;
}

/*
 * The following css is being implemented coming off of the back of the performance plan.
 * There were many modules used on some of our sites that weren't being displayed to solve
 * the ordering issue for columns and modules on mobile. So this css will solve that issue
 * rather than continuing to implement modules that aren't displayed.
 * @see HORZN-1641 performance plan: Hidden module CSS fix.
 */
@media all and (max-width: 980px) {
  /*** wrap row in a flex box ***/
  .custom_responsive_row {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap; /* Safari 6.1+ */
    flex-wrap: wrap;
  }

  /*** custom classes that will designate the order of columns in the flex box row ***/
  .first-on-mobile {
    -webkit-order: 1;
    order: 1;
  }

  .second-on-mobile {
    -webkit-order: 2;
    order: 2;
  }

  .third-on-mobile {
    -webkit-order: 3;
    order: 3;
  }

  .fourth-on-mobile {
    -webkit-order: 4;
    order: 4;
  }
  /*** add margin to last column ***/
  .custom_responsive_row:last-child .et_pb_column:last-child {
    margin-bottom: 30px;
  }

}

/*
 * The following css is used to remove the fixed navigation css that is effecting the spacing on smaller
 * screens when we are using a mobile menu plugin, to control the navigation on ipad pro and below.
 * HORZN-1635 Fix to be able to use mobile menu plugins with fixed navigation sites.
 */
@media (max-width: 1024px) {
  body.et_fixed_nav.et_show_nav.mobile-menu-plugin-active #page-container {
    padding-top: 0;
  }
}

/*
 * The following css is used to outline a number of helper classes to define the video iframe height.
 * The current process doesn't give us control over the height of iframes and the other alternative
 * options effect site performance. Meaning these helper classes for iframe height is required.
 * @see HORZN-1714 set height for video's - helper class.
 */

.video-iframe-1 iframe, .video-iframe-2 iframe, .video-iframe-3 iframe, .video-iframe-4 iframe {
  height: 170px;
}

@media (min-width: 768px) {
  .video-iframe-1 iframe, .video-iframe-2 iframe, .video-iframe-3 iframe {
    height: 340px;
  }
}

@media (min-width: 1024px) {
  .video-iframe-1 iframe {
    height: 460px;
  }
  .video-iframe-2 iframe {
    height: 220px;
  }
  .video-iframe-3 iframe {
    height: 170px;
  }
}

/* The following css is a class asked for by Design to grant the menu module used in the theme builder to create global headers the ability to have a scroll on responsive viewing. This is due to a issue where if the menu has more than 8 items you are unable to view them on mobile screen sizes unless you have the following css added.
 */
/* @see HORZN-1713 Fixed responsive headers. */
.sift-responsive-navigation .et_mobile_menu {
  overflow: scroll;
  max-height: 83vh;
}

/* The following css is a number of classes used to define a better sized option for equalising post content. The heights were outlined by design as well as the number of different options.
 */
/* @see HORZN-1777 amend sizing for post-equaliser classes */
@media (min-width: 981px) {
  .post-equalise-xs .et_pb_post {
    height: 250px;
  }

  .post-equalise-sm .et_pb_post {
    height: 300px;
  }

  .post-equalise-md .et_pb_post {
    height: 350px;
  }

  .post-equalise-lg .et_pb_post {
    height: 400px;
  }

  .post-equalise-xl .et_pb_post {
    height: 450px;
  }

  .post-equalise-xxl .et_pb_post {
    height: 500px;
  }
}

/* The following css is a class that is used to vertically centre align text/content withing a column.
 */
/* @see HORZN-2127 Vertically centre text in Divi. */
.sift-vertical-alignment {
  margin-top:auto;
  margin-bottom:auto;
}

/* The following css is being used to resolve the overflow right issue caused by postioning css in the Divi mobile menu plugin for th hamburger icon. */
/* @see HORZN-2271 Overflow right on tablet and mobile. */
.divi-mobile-menu .menu-button {
  overflow: hidden;
}

/* The following css is helping to implement and style up video lightbox classes which will attach to the image module to integrate this feature into that module.
 */
/* HORZN-2335 Implement lightbox class into sift theme. */
/* Custom Video Popup */
/* Popup Close Icon Tweak */
.mfp-wrap.mfp-close-btn-in.mfp-auto-cursor.mfp-fade.mfp-ready {
  top: 0px !important;
  position: fixed !important;
}
.mfp-iframe-holder .mfp-content {
  max-width: 70%;
}
.mfp-iframe-scaler button.mfp-close {
  top: -50px ;
}
.mfp-iframe-holder .mfp-close,
.mfp-image-holder .mfp-close,
.mfp-wrap .mfp-close:active {
  top: -50px !important;
}
.video_popup_lightbox .mfp-iframe-holder .mfp-close {
  top: -50px;
}
.video_popup {
  position: relative;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}
.video_popup.no_icon:before,
.video_popup.no_icon:after {
  display: none!important;
}
.video_popup:not(.no_icon):hover {
  -webkit-transform: scale(0.95);
  -ms-transform: scale(0.95);
  transform: scale(0.95);
}

/* The following css is to solve a sub menu shift problem coming from css included in the Divi
mobile menu plugin. A calculation is done in the css which regardless of the inputted settings
shifts the sub menu and icons to the left using max width. This css is to counter act that.*/
/* @see HORZN-2549 issues with mobile menu not displaying properly.*/
.divi-mobile-menu #dm_nav .menu-wrap__inner .menu-item-has-children > a, .divi-mobile-menu #dm-menu.nav li {
  max-width: initial;
}