/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/
  
  
/* --------------------------------------------------------------------
    TABLE OF CONTENTS

    - COLORS
    - TYPOGRAPHY
    - JAVASCRIPT CHECK IF TABLET OR MOBILE
    - GENERAL ELEMENTS 
    - HEADER
    - WIDGETS
    - WOOCOMMERCE 
    - SALESFORCE
    - TESTIMONIALS
    - BLOG 
    - FOOTER
-------------------------------------------------------------------- */
 


/* --------------------------------------------------------------------
    COLORS

    BLACK    : 1F292A
    LT GRAY  : F8F8F8
    BLUE     : 30C7D1
    LT BLUE  : ADF2F9
    DK BLUE  : 175286
    
-------------------------------------------------------------------- */



/* --------------------------------------------------------------------
    TYPOGRAPHY
-------------------------------------------------------------------- */
@font-face {
    font-family: lilly-font;
    src: url(/wp-content/themes/astra-child/assets/fonts/Lilly.ttf);
}
.ost-lilly {
    font-family: lilly-font, serif;
}
@font-face {
    font-family: 'Lora';
    src: url(/wp-content/themes/astra-child/assets/fonts/Lora-MediumItalic.ttf);    
}



/* --------------------------------------------------------------------
    JAVASCRIPT CHECK IF TABLET OR MOBILE
-------------------------------------------------------------------- */
.hc-tablet-check {
    display: none;
    visibility: hidden;
}
.hc-mobile-check {
    display: none;
    visibility: hidden;
}    
/* TABLET */
@media (max-width: 1024px) { /* set tablet size here (see: elementor settings) */
    .hc-tablet-check {
        visibility: visible;
    }
}
/* MOBILE HEADER */
@media (max-width: 767px) { /* set mobile size here (see: elementor settings) */
    .hc-tablet-check {
        visibility: hidden;
    }
    .hc-mobile-check {
       visibility: visible;
    }    
}



/* --------------------------------------------------------------------
    GENERAL ELEMENTS
-------------------------------------------------------------------- */
body {
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 1.3;
    color: #1F292A;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Roboto", sans-serif;
    font-weight: 300!important;
    line-height: 1.5;
    text-transform: none;    
    color: #1F292A;
}
.page-title {
    color: #1F292A;
}
h1.blue, h1 > .blue, h2.blue, h2 > .blue, h3.blue, h3 > .blue, 
h4.blue, h4 > .blue, h5.blue, h5 > .blue, h6.blue, h6 > .blue {
    color: #30C7D1!important;
}

h1.dk-blue, h1 > .dk-blue, h2.dk-blue, h2 > .dk-blue, h3.dk-blue, h3 > .dk-blue, 
h4.dk-blue, h4 > .dk-blue, h5.dk-blue, h5 > .dk-blue, h6.dk-blue, h6 > .dk-blue {
    color: #175286!important;
}

/* formula:  font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width]))); */
h1, .entry-content h1, .heading-1 h2 {
    font-size: calc(36px + (50 - 36) * ((100vw - 300px) / (1200 - 300)))!important;
}  
h1.small-heading, h1 > .small-heading {
    font-size: calc(30px + (36 - 30) * ((100vw - 300px) / (1200 - 300)))!important;
}
h2, .entry-content h2 {
    font-size: calc(30px + (36 - 30) * ((100vw - 300px) / (1200 - 300)));
}
h3, .entry-content h3 {
    font-size: calc(25px + (30 - 25) * ((100vw - 300px) / (1200 - 300)));
} 
h4, .entry-content h4 {
    font-size: calc(20px + (25 - 20) * ((100vw - 300px) / (1200 - 300)));
}
h5, .entry-content h5 {
    font-size: calc(18px + (20 - 18) * ((100vw - 300px) / (1200 - 300)));
}
h6, .entry-content h6 {
    font-size: calc(17px + (18 - 17) * ((100vw - 300px) / (1200 - 300)));
}

/* links and buttons */
a {
    color: #30C7D1;
}
a:hover  {
    color: #1F292A;
}
h1 a, h2 a, h3 a {
    color: #30C7D1!important;    
}
h1 a:hover, h2 a:hover, h3 a:hover {
    color: #1F292A!important;    
}

/* make buttons uniform */
.ost-button-uniform a {
    height: 74px;
    display: inline-flex;
    align-items: center;    
    justify-content: center;
}
@media (max-width: 1024px) { 
    .ost-button-uniform a {
        height: 96px;
    }
}
@media (max-width: 767px) {
    .ost-button-uniform a {
        height: 74px;
    }
}


/* elementor buttons - default */
body .elementor-button, 
body .elementor-button.elementor-size-s,
body .elementor-button.elementor-size-m,
body .elementor-button.elementor-size-l,
body .elementor-button.elementor-size-xl {
    border-radius: 50px 50px 50px 50px;
    background-color: #00c1cf;
    box-shadow: 0em 0.15em 0.65em 0em rgba(0,0,0,0.25);
}
body .elementor-button:hover, 
body .elementor-button.elementor-size-s:hover,
body .elementor-button.elementor-size-m:hover,
body .elementor-button.elementor-size-l:hover,
body .elementor-button.elementor-size-xl:hover {
    background-color: #1F292A;
}
body .elementor-button.elementor-size-xl {
    padding: 15px 45px;
}

.menu-toggle, button, .ast-button, .ast-custom-button, .button, input#submit, input[type="button"], input[type="submit"], input[type="reset"] {
    border-color: #30C7D1;
    background-color: #30C7D1;
}

/* misc */
.ost-overflow-hidden {
    overflow: hidden;
}

/* rotation */
.ost-rotate3 {
  -webkit-transform:rotate(3deg);
  -moz-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  transform: rotate(3deg);    
}
.ost-rotate15 {
  -webkit-transform:rotate(15deg);
  -moz-transform: rotate(15deg);
  -ms-transform: rotate(15deg);
  -o-transform: rotate(15deg);
  transform: rotate(15deg);
}
.ost-rotate345 {
  -webkit-transform:rotate(345deg);
  -moz-transform: rotate(345deg);
  -ms-transform: rotate(345deg);
  -o-transform: rotate(345deg);
  transform: rotate(345deg);
}




/* --------------------------------------------------------------------
    HEADER 
-------------------------------------------------------------------- */

/* header menu */ 
.hfe-nav-menu__layout-horizontal .hfe-nav-menu .sub-menu {
    -webkit-box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.15);
    box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.15);
}
.hfe-nav-menu__layout-horizontal .hfe-nav-menu .sub-arrow {
    padding-right: 5px;  
}

/* menu button */ 
#ost-header ul.hfe-nav-menu > li.menu-item > a.hfe-menu-item,
#ost-header ul.hfe-nav-menu > li.menu-item > div > a.hfe-menu-item {
    padding: 10px 15px;
    margin-top: 5px;
    margin-bottom: 5px;
}
#ost-header .ost-menu-button { 
    margin-left: 15px;
}
#ost-header .ost-menu-button > a {
    padding: 10px 15px;
    background: #30C7D1;
    color: #fff;
}
#ost-header .ost-menu-button > a:hover {
    background: #1F292A;
}

/* sticky header */
#ost-header.ast-sticky-active {
    position: fixed;
    width: 100%;
    box-shadow: 1px 0px 3px #ccc;
}

.ost-margin-left-auto {
    margin-left: auto;
}

/* mobile header */
.ost-header-mobile-button .elementor-button {
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* use a menu item with a drop-down as a button */
#ost-header .ost-menu-item-as-button nav ul.hfe-nav-menu > li.menu-item > div > a.hfe-menu-item {
    padding: 8px 15px 7px;
    margin-top: 0;
    margin-bottom: 0;
}


/* --------------------------------------------------------------------
    WIDGETS
-------------------------------------------------------------------- */

/* US DISTRIBUTER CONTACT INFO (/ostoform-us/) */
#content .ost-us-company {
    margin-bottom: 0;
    text-transform: capitalize;
}
#content .ost-us-company a {
    color: #1F292A;
}
#content .ost-us-email {}
#content .ost-us-email a {}
#content .ost-us-phone {
    margin-bottom: 0;
    text-transform: capitalize;
}
#content .ost-us-phone a {
    color: #1F292A;
}

/* testimonials */
.ost-testimonial-content {
    font-family: 'Lora', serif;
    font-size: 27px;    
}



/* --------------------------------------------------------------------
    WOOCOMMERCE
-------------------------------------------------------------------- */

.woocommerce #content, .woocommerce-page #content {
    padding-top: 45px!important;
} 
.single-product #content #primary .woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
}
.single-product #content #primary .woocommerce-product-gallery .woocommerce-product-gallery__wrapper img {
    max-width: 450px;
    width: auto;
}
.single-product #primary h1.product_title {
    font-size: calc(25px + (30 - 25) * ((100vw - 300px) / (1200 - 300)))!important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active::before {
    background: #30C7D1;
}
.woocommerce a.button, .woocommerce button.button, .woocommerce .woocommerce-message a.button, .woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce input.button, .woocommerce input.button:disabled, .woocommerce input.button:disabled[disabled], .woocommerce input.button:disabled:hover, .woocommerce input.button:disabled[disabled]:hover, .woocommerce #respond input#submit, .woocommerce button.button.alt.disabled, .wc-block-grid__products .wc-block-grid__product .wp-block-button__link, .wc-block-grid__product-onsale {
    background-color: #30C7D1;
}

/* don't show the sku and category */
.single-product .product_meta {
    display: none;
}

/* cart icon in menu - works with plugin: WooCommerce Menu Cart */
.wpmenucartli {
    padding: 11px 0 11px 15px!important;
}

/* messages */
.woocommerce-message, .woocommerce-info {
    border-top-color: #30C7D1;
}
.woocommerce-message::before, .woocommerce-info::before {
    color: #30C7D1;
}

/* woocommerce product attribute add-on 
   example of use: $( '<div class="ost-woo-product-attribute-text">TEXT HERE</div>' ).insertAfter( '#pa_size' );
*/
.ost-woo-product-attribute-text {
    padding-top: 5px;
    /*font-size: 13px;*/
    line-height: 1.3;
    color: #444;
}



/* --------------------------------------------------------------------
    SALESFORCE
-------------------------------------------------------------------- */
/* NOTE: in order for the salesforce form to work with these css rules, it must be 
         encapsulated in a container with the classname "ost-salesforce-form" */
.ost-salesforce-form {}
.ost-salesforce-form form {
    padding: 20px;
    background: #fff;
    box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.5);
    margin: 10px;
}
.ost-salesforce-form input:not([type="submit"]), 
.ost-salesforce-form select, 
.ost-salesforce-form textarea {
    width: 100%;
    padding: .75em;
    margin-bottom: 15px;
}
.ost-salesforce-form input[type="submit"] {
    margin-top: 15px;
}



/* --------------------------------------------------------------------
    TESTIMONIALS
-------------------------------------------------------------------- */
/* 
    Example:
    <div class="ost-testimonials">
        <blockquote>
            <div class="content">
                Using regular seals, I experience leakage from time to time as the 
                acidity of the output wears away the skin barrier. I did not experience a leak during my 
                limited time with the Ostoform Seal. It does what it says, directs the flow into the bag.
            </div>
            <div class="author">
                Adrian, Ireland
            </div>
        </blockquote>
    </div>

    Note: 
    In Elementor, just name the containing widget ost-testimonials. Then use <blockquote> as needed.
*/
.owl-stage {
    display: flex;
    align-items: center;    
}
.sa_hover_container {
    padding-top: 5px!important;
    padding-bottom: 5px!important;
}
.ost-testimonials blockquote {
    display: table;
    padding: 15px;
    margin: 0;
    border: none;
    
    width: 100%;
    
    background: #f6f6f6;
    border-radius: 20px;
    box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.3);

    font-family: "Roboto", sans-serif;
    font-weight: 300 !important;    
    font-size: 24px;
}
.ost-testimonials blockquote .content {
    margin-top: 10px;
}
.ost-testimonials blockquote .author {
    margin-bottom: 10px;
}
.ost-testimonials blockquote .author {
    display: block;
    width: 100%;
    text-align: right;
    
    font-weight: bold;
}
.ost-testimonials blockquote .author::before {
    content: '~';
}
.ost-testimonials blockquote::before, 
.ost-testimonials blockquote::after {
    display: table-cell;    
    width: 70px;
    content: '';
}
.ost-testimonials blockquote::before {
    background: url(/wp-content/uploads/2021/11/quotes-offset-open-45w.png);
    background-repeat: no-repeat;
    background-size: 55px auto;
    background-position: top left;
} 
.ost-testimonials blockquote::after {
    background: url(/wp-content/uploads/2021/11/quotes-offset-close-45w.png);
    background-repeat: no-repeat;
    background-size: 55px auto;
    background-position: bottom right;
} 



/* --------------------------------------------------------------------
    PRODUCT SIZE TABLE
-------------------------------------------------------------------- */
.hc-table.ps-table {
    border-top: solid 3px #30C7D1;
    border-left: solid 1px #ccc;
    border-right: solid 1px #ccc;
    border-bottom: solid 1px #ccc;
}
.hc-table.ps-table .hc-table-title {
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 10px;
    border-bottom: solid 1px #ccc;
    background-color: #f0f0f0;
    font-weight: bold;
    font-size: 20px;
}
.hc-table.ps-table .hc-table-content {
    margin: 40px;
}
.hc-table.ps-table .hc-row {
}
.hc-table.ps-table .hc-row.header-row .hc-column {
    font-weight: bold;
    border-top: solid 1px #ccc;
}
.hc-table.ps-table .hc-row .hc-column {
    justify-content: center;
    align-items: center;
    padding: 5px;
    border-bottom: solid 1px #ccc;
}



/* --------------------------------------------------------------------
    CURRENCY SWITCHER PLUGIN
-------------------------------------------------------------------- */
.ost-currency-switcher {
    display: -ms-flexbox;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
    margin-top: 10px;
    margin-bottom: 25px;
}
.ost-currency-switcher label {
    font-weight: 700;
    color: #3a3a3a;
}
.ost-currency-switcher #alg_currency_select {
    padding: 5px 14px 5px 5px;
}



/* --------------------------------------------------------------------
    BLOG - ARCHIVE
-------------------------------------------------------------------- */

.archive #primary .ast-archive-description {
    padding: 0;
    background: transparent;
    text-align: center;
}

.archive article.ast-article-post {
    margin: 25px 0;
    padding: 25px;
    box-shadow: 1px 1px 3px #ccc;    
}
.archive article.ast-article-post .post-content {
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
}
.archive article.ast-article-post .post-content .post-thumb {
    flex: 0 0 175px;
}
.archive article.ast-article-post .post-content .entry-header {
    flex: 0 0 calc( 100% - 175px );
}
.archive article.ast-article-post .post-content .entry-content {
}

.archive .entry-title a {
    text-transform: none;
    color: #1F292A!important;
    font-size: calc(30px + (36 - 30) * ((100vw - 300px) / (1200 - 300)))!important;
    font-weight: 300;
    line-height: 1.3;
}
.archive .entry-title a:hover {
    color: #30C7D1!important;
}



/* --------------------------------------------------------------------
    BLOG - SINGLE
-------------------------------------------------------------------- */

.ast-single-post h1.entry-title {
    font-size: calc(30px + (36 - 30) * ((100vw - 300px) / (1200 - 300)))!important;
}




/* --------------------------------------------------------------------
    FOOTER
-------------------------------------------------------------------- */
.ast-plain-container.ast-no-sidebar #primary {
    margin-bottom: 35px;
}
#ost-footer a {
    color: #30C7D1;
}
#ost-footer a:hover {
    color: #fff;
}
#ost-footer a.alt {
    color: #fff;
}
#ost-footer a.alt:hover {
    color: #aaa;
}