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


Theme Name:   Stir Custom
Theme URI:    http://www.wack.space
Description:  A theme requiring Divi built custom for client
Author:       jez @ omg
Author URI:   http://omgcreative.com.au/
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 ------------------------------*/

/* @import url("/includes/fonts/fonts.css"); */




/* Custom CSS goes here */



/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––

-  1.  DOCUMENT
-  2.  TYPOGRAPHY
-  3.  COLOURS
        -- Solids
        -- Gradients
-  4.  NAV
        -- Logo
        -- sub-menu
-  5.  HEADERS
-  6.  SECTIONS
        -- Content
        -- Headings
        -- Text
        -- Grids
        -- Links etc
        -- Buttons
        -- Icons
-  7.  FOOTER
-  8.  ANIMATIONS
-  9.  FORMS
-  10. VARIOUS GLOBAL
-  11. GMAPS
-  12. MEDIA QUERIES
-  13. END
-  14. EXAMPLE


 */

/*

eg load style:
https://www.uplabs.com/posts/the-honeypot-home-page-design-animation-animation

*/

/* ==========================================================================
   DOCUMENT
   ========================================================================== */

   /* sub section
   --------------*/


/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */

   body {font-family: 'Montserrat','Helvetica Neue',Helvetica,Arial,sans-serif !important;}
   h1 { }
   p { font-size: 18px; line-height: 170%; margin-top: 45px; }
   a { text-decoration: none !important; }

   body.page:not(.et-fb-modal) {}

   h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6, .meta, .meta a, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
      font-family: 'nexa_rust_sansblack', sans-serif !important; font-weight: normal;
      color: #343434;
   }


   #main-content h2 {
     font-size: 60px;
     margin-top: 8px;
   }
   #main-content p {
     color:#999999;
     margin-top: 15px;
     font-weight: 400;
   }


   #main-footer {}
   * > #footer-info  {font-size: 10px;}

/* ==========================================================================
   COLOURS
   ========================================================================== */

.tangerine {background-color: #f5a590; }
.dark_tang {background-color: #F36744;}

.lime {background-color: #b8c675; }
.dark_lime {background-color: #859f13;}

/* ==========================================================================
   HEADER / NAV
   ========================================================================== */

   #main-header {padding: 20px;}
   #main-header, .et_fixed_nav #top-header {
      position: fixed !important;
  }
   #et_mobile_nav_menu {
    display: none;
  }
  /* .et_pb_svg_logo #logo, */
  #main-header img#logo {
    height: 100%;
  }
  @media (max-width: 979px) {
      .et_fullwidth_nav #main-header .container {
          min-height: 50px;
      }
  }
.et_fullwidth_nav #main-header .container {
  min-height: 40px;
}



/* ==========================================================================
   HEADERS
   ========================================================================== */


/* ==========================================================================
   SECTIONS
   ========================================================================== */

   #hero-sect {
     /* min-height: 80vh; */
   }
   #hero-sect .et_pb_column:nth-of-type(1) {margin-right: 0;}
   #hero-sect .et_pb_column:nth-of-type(2) {margin-right: 2%;}
   #hero-sect .et_pb_column:nth-of-type(3) {width: 31%;}

  #hero-sect .hero_cta {}

   #hero-sect p {font-size: 48px; line-height: 1;}

   @media (max-width: 1400px) {
        #main-content h2, #hero-sect h2 {font-size: 44px;}
        #main-content p, #hero-sect p { font-size: 28px;
            margin-top: 10px;
        }
    }


   @media (min-width: 580px) and (max-width: 980px) {
     #hero-sect .et_pb_column {width: 47.5% !important;}
     #hero-sect .et_pb_column:nth-of-type(3) {width: 100% !important;}

   }

   #hero-sect .et_pb_promo_description {
     padding-bottom: 50px;
   }

   .popup_txt { text-align: center; }
   .pink_popup, .green_popup { font-size: 14px; color: #aaaaaa; font-weight: 400; }

   .pum-content.popmake-content img {
        max-height: 66vh;
        height: 100%;
        width: auto;
   }

   @media (max-width: 980px) {
        #hero-sect .hero_cta {
            text-align: center;
            margin-left:auto;
            margin-right: auto;
        }
       #hero-sect .et_pb_column:nth-of-type(2) {margin-right: 0;}
       .behind {
            top: 50%;
            left: 50%;
            margin: 40px 0 0 -150px;
       }
    }
    @media (min-width:510px) and (max-width: 803px) {
      .behind {
           top: 50%;
           left: 50%;
           margin-top: 60px;
      }
    }

	@media (max-width:509px) {
      .behind {
           top: 50%;
           left: 50%;
           margin-top: 97px;
        min-width: 250px !important;
      }
      a.bttn, a.bttn_wht {
        min-width: 250px !important;
        max-width: 92% !important;
      }
      .bttn:before {
        max-width: 100% !important;
      }
    }

   /* -------------
   Product
   ------------- */

  .product_sect { margin: 0; padding: 0 !important;}

  .product_row { padding: 0 !important;width:100% !important; max-width: 100%!important; }

  @media only screen and (max-width: 767px){

  }

  .product_row.go_nuts,
  .product_row.go_columbian,
  .product_row.go_plant { width:100% !important; max-width: 100%!important;}

  .product_row.go_nuts .product_col_01,
  .product_row.go_nuts .product_col_02,
  .product_row.go_columbian .product_col_01,
  .product_row.go_columbian .product_col_02,
  .product_row.go_plant .product_col_01,
  .product_row.go_plant .product_col_02 {width:50% !important; margin: 0;}

  .product_row.go_nuts .product_col_02,
  .product_row.go_columbian .product_col_01,
  .product_row.go_plant .product_col_02 {
      padding: 5.5vh;
  }

  .go_nuts, .go_columbian, .go_plant {}

  .product_row.go_nuts {background-color:#859F13;}
  .product_row.go_columbian {background-color:#b8c675;}
  .product_row.go_plant {background-color:#aaaaaa;}

  .shout_txt {
      max-width: 400px;
  }
  .shout_txt p { line-height: 1.1;}



  .product_row.go_nuts .product_col_02,
  .product_row.go_plant .product_col_02 {
      float:left;
  }
  .product_row.go_columbian .product_col_01  {
      float:right;
  }

  @media (min-width: 768px) and (max-width: 1199px) {
      /* */
      .shout_txt p {}
  }

  @media (max-width: 980px) {

  }


  @media only screen and (min-width: 768px){
      .product_row.go_nuts,
      .product_row.go_columbian,
      .product_row.go_plant {
          position: relative !important;
      }
      .shout_txt {
          position: absolute ;
          top: 50%;
          /* left:50%; */
          transform: translateY(-50%)/*translateX(-50%)*/;
      }
  }
  @media only screen and (max-width: 787px){
      .product_row.go_nuts .shout_txt,
      .product_row.go_columbian .shout_txt,
      .product_row.go_plant .shout_txt {
          position: relative !important;
          padding-top: 0 !important;

      }
  }

  @media only screen and (min-width: 1200px){
      .shout_txt {
          top: 50%;
          left:50%;
      }
      .product_row.go_nuts .shout_txt,
      .product_row.go_plant .shout_txt {
          transform: translateY(-50%) translateX(-70%);
      }
      .product_row.go_columbian .shout_txt  {
          transform: translateY(-50%) translateX(-30%);
      }
  }

  .product_row.go_nuts .product_col_02,
  .product_row.go_columbian .product_col_01 ,
  .product_row.go_plant .product_col_02 {
      /* padding-top: 20%!important; */
  }

  .go_nuts h3, .go_nuts p,
  .go_columbian h3, .go_columbian p,
  .go_plant h3, .go_plant p {
      color: #ffffff !important;
  }

  .go_nuts h3, .go_columbian h3, .go_plant h3 { font-size: 2.625rem; }
  .go_nuts p, .go_columbian p, .go_plant p { font-size: 1.818125rem; }

  @media only screen and (min-width: 768px) and (max-width: 980px){
      .go_nuts h3, .go_columbian h3, .go_plant h3 { font-size: 2rem; }
      .go_nuts p, .go_columbian p, .go_plant p { font-size: 1.2rem; }

      .product_row.go_nuts .product_col_02,
      .product_row.go_columbian .product_col_01 ,
      .product_row.go_plant .product_col_02 {
          padding: 10%!important;
      }
      .product_row.go_columbian .product_col_01 {
          float: left;
      }

      .product_row.go_nuts .shout_txt,
      .product_row.go_columbian .shout_txt,
      .product_row.go_plant .shout_txt {
           padding-top: 20%!important;
           padding-right: 20%!important;
      }

  }


  /* --------
  vertically center block level element unknown height
  -----------

  .parent {
      position: relative;
  }
  .child {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
  }
  */

  @media only screen and (max-width: 786px){

      .product_sect {
          padding-bottom: 0px!important;
      }
      .product_row.go_nuts,
      .product_row.go_columbian,
      .product_row.go_plant {
          padding-top: 0px!important;
          padding-bottom: 0px!important;
      }

      .product_row.go_nuts,
      .product_row.go_columbian,
      .product_row.go_plant {
          display: -webkit-box;
          display: -moz-box;
          display: -ms-flexbox;
          display: -webkit-flex;
          display: flex;
          -webkit-flex-flow: column;
          -moz-flex-flow: column;
          -ms-flex-flow: column;
          flex-flow: column;
      }

      .product_row.go_nuts .product_col_01,
      .product_row.go_nuts .product_col_02,
      .product_row.go_columbian .product_col_01,
      .product_row.go_columbian .product_col_02,
      .product_row.go_plant .product_col_01,
      .product_row.go_plant .product_col_02 { width:100% !important; }

      .product_row.go_columbian .et_pb_column:nth-of-type(2) {
          order: 1;
      }
      .product_row.go_columbian .et_pb_column:nth-of-type(1) {
          order: 2;
      }
  }

    /* ------------
    go_icons_sect
    ------------- */

    .go_icons_sect {}

    .go_icons_row,
    .go_icons_col {}

    @media (min-width: 981px) {
        .go_icons_col {
              width:25% !important; margin: 0 !important;
        }
    }

    .go_low_sugar, .go_gluten_free, .go_lactose_free, .go_instant_coffee  {}

    /*------------
    CTA section
    -------------*/

    .cta_sect { background-color: #F36744; }
    .cta_row {text-align: center;}

    .cta_sect h3 { color:#ffffff; text-align: center; font-family: "Montserrat" !important; font-size: 2.5rem; font-weight: 400 !important; margin-bottom: 3rem;}

    .cta_wht_bttn { margin: 0 auto; }
    .behind_wht {
      top: 50%;
      left: 50%;
      margin: 23px 0 0 -150px;
    }
    .bttn_wht {}

    @media (max-width: 625px) {
        .behind_wht {
          margin-top: 44px;
        }
    }


.flex-center {
  display: flex;
  justify-content: center;
}

  /* -------------
  hero bottom image
  ------------- */

  .full_coffee img {
    height: 55vh;
    object-fit: cover;
  }


   /* -------------
   Privacy
   ------------- */

  .privacy-sect {background-color: #fafafa!important;}


/***************************************************/
/* Buttons */

   /* -------------
   Buttons
   ------------- */

   a.bttn, a.bttn_wht {
     /* color: #ffffff !important; */
     min-width: 300px;
     text-align: center;
   }

   /* ghost-button
    -------------- */

    a.bttn {
        /* text */
        /* font-family: "proxima-nova",sans-serif; */
    }
    /*
    @import "https://fonts.googleapis.com/css?family=Source+Sans+Pro:700";
    */

    *,
    *::before,
    *::after {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }




a.bttn, a.bttn:hover { color: #ffffff !important; }
a.bttn_wht { color: #2d2d2d !important; }
a.bttn_wht:hover { color: #ffffff !important; }


a.bttn, a.bttn_wht {
  text-decoration: none;
  -webkit-transition: 0.3s all ease;
  transition: 0.3s ease all;

}
a.bttn:hover, a.bttn_wht:hover {
  z-index:3;
}
a.bttn:focus {
  color: #ffffff !important;
}

.behind, .behind_wht {
  width:300px;
  height:51px;
  z-index:-10;
  display:block;
  position:absolute;
}
.behind {
  background-color:#F36744;
}
.behind_wht {
  background-color:#ffffff;
}


.bttn, .bttn_wht {
  font-size: 18px;
  letter-spacing: 2px;
  text-transform: uppercase;
  display: inline-block;
  text-align: center;
  width: 200px;
  font-weight: bold;
  padding: 14px 0px;
  border: none;
  /* background-color:#F36744; */
  border-radius: 2px;
  position: relative;
}

.bttn:hover, .bttn_wht:hover { box-shadow: 0 2px 10px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.1);}


.bttn:before, .bttn_wht:before {
  -webkit-transition: 0.5s all ease;
  transition: 0.5s all ease;
  position: absolute;
  top: 0;
  left: 50%;
  right: 50%;
  bottom: 0;
  opacity: 0;
  content: '';
  z-index:-1;
}
.bttn:before {
    background-color: #859f13;
}
.bttn_wht:before {
    background-color: #2d2d2d;
}
.bttn:hover:before, .bttn_wht:hover:before {
  -webkit-transition: 0.5s all ease;
  transition: 0.5s all ease;
  left: 0;
  right: 0;
  opacity: 1;
}
.bttn:focus:before, .bttn_wht:focus:before {
  transition: 0.5s all ease;
  left: 0;
  right: 0;
  opacity: 1;
}

    @media( max-width: 480px ) {
      .bttn, .bttn_wht { width:100%; max-width:100% !important; }
    }

/* -----
ripple
-------- */

.btn_alt {
    background-color: orange;
    color: #fff;
    font-size: 40px;
    padding: 20px 20px;
    overflow: auto !important;

}

/*Create ripple effec*/

.ripple {
    position: relative;
    overflow:  hidden !important;
    transform: translate3d(0, 0, 0);
}

.ripple:hover {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(10, 10);
    opacity: 0;
    transition: transform .5s, opacity 1s;
}

.ripple:hover:after {
    transform: scale(0, 0);
    opacity: .3;
    transition: 0s;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

#footer-widgets .footer-widget {}
#footer-widgets a { color: #ffffff; }
#footer-widgets a:hover { color: #666666; }

#footer-widgets .footer-widget:nth-of-type(1)    {
    min-width: 360px;
    margin-right: 0 !important;
    float: left;
}
#footer-widgets .footer-widget:nth-of-type(2)    {
    min-width: 92px;
    max-width: 93px;
    margin-right: 0 !important;
    margin-bottom: 25px!important;
    float:right;
}
#footer-widgets .footer-widget:nth-of-type(3)    {
    margin-left: 110px;
    width: 12% !important;
    min-width: 208px;
    margin-right: 0 !important;
    float:right;
    clear:right;
}
#footer-widgets .footer-widget:nth-of-type(3) p{
    font-size: 10px;
    line-height: 1.1;
    margin-top: 15px;
    text-align: right;
    margin-right: 0 !important;
}
@media ( max-width: 767px ) {
    #footer-widgets .footer-widget:nth-of-type(2), #footer-widgets .footer-widget:nth-of-type(3){
          float:left;
          /* clear: none; */
    }
    #footer-widgets p {text-align: left;}
    #footer-widgets .et-social-icons li { margin-left: 0; margin-right: 20px;}
}
#footer-widgets p {
    font-size: 12px;
    line-height: 1.1;
    margin-top: 5px;
}
#footer-widgets .et-social-icons li {
    /* position: relative; */
    padding-left: 0;
}
#footer-widgets .et-social-icons li::before {
    display: none;
}
#footer-widgets ul.et-social-icons { list-style: none; }

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */


/* ==========================================================================
   FORMS
   ========================================================================== */


/* ==========================================================================
   VARIOUS GLOBAL
   ========================================================================== */


/* ==========================================================================
   GMAPS
   ========================================================================== */


/* ==========================================================================
   MEDIA QUERIES
   ========================================================================== */

    /* Media Queries
    –––––––––––––––––––––––––––––––––––––––––––––––––– */
    /*
    Note: The best way to structure the use of media queries is to create the queries
    near the relevant code. For example, if you wanted to change the styles for buttons
    on small devices, paste the mobile query code up in the buttons section and style it
    there.
    */


    /* Larger than mobile */
    @media (min-width: 400px) {}

    /* Larger than phablet (also point when grid becomes active) */
    @media (min-width: 550px) {}

    /* Larger than tablet */
    @media (min-width: 750px) {}

    /* Larger than desktop */
    @media (min-width: 1000px) {}

    /* Larger than Desktop HD */
    @media (min-width: 1200px) {}



    /* Extra Large Monitors*/
    @media ( min-width: 1801px ) {
    /**/
    }

    /* Large Monitors*/
    @media ( min-width: 1405px ) and ( max-width: 1800px) {
        /**/
    }

    /* Standard laptops & desktops */
    @media ( min-width: 1100px ) and ( max-width: 1404px) {
        /**/
    }
    @media only screen and (max-width: 1200px) {
        /**/
    }

    /* landscape Tablets */
    @media ( min-width: 981px ) and ( max-width: 1099px ) {
        /**/
    }

    @media only screen and (max-width: 980px) {
      /**/
    }

    /* Portrait Tablets*/
    @media ( min-width: 768px ) and ( max-width: 980px ) {
        /**/
    }

    /* Landscape Phones */
    @media ( min-width: 480px ) and ( max-width: 767px ) {
        /* - */
    }


    /* Portrait Phones */
    @media ( min-width: 415px ) and ( max-width: 479px ) {
        /**/
    }

    @media ( min-width: 376px ) and ( max-width: 414px ) {
         /**/
    }


    /* Portrait Phones */
    @media ( min-width: 320px ) and ( max-width: 375px ) {
        /**/
    }



/* ==========================================================================
   SET UP EXAMPLE
   ========================================================================== */

   .selector {
       /* Positioning */
       position: absolute;
       z-index: 10;
       top: 0;
       right: 0;
       bottom: 0;
       left: 0;

       /* Display & Box Model */
       display: inline-block;
       overflow: hidden;
       box-sizing: border-box;
       width: 100px;
       height: 100px;
       padding: 10px;
       border: 10px solid #333;
       margin: 10px;

       /* Other */
       background: #000;
       color: #fff;
       font-family: sans-serif;
       font-size: 16px;
       text-align: right;
   }


/* ==========================================================================
   END
   ========================================================================== */