/*
 Theme Name:   CPF XStore Child
 Theme URI:    http://8theme.com/
 Description:  Copper Penny XStore Child Theme
 Author:       Barry Tuber
 Author URI:   https://www.personalcto.net
 Template:     xstore
 Version:      0.0.1
 Text Domain:  xstore-child
*/

/**************************************************
 Typography
**************************************************/
html, body {
    --h1-size-proportion: 4.8;
    --h2-size-proportion: 2.4;
    --h3-size-proportion: 2.04;
    --h4-size-proportion: 1.6;
    --h5-size-proportion: 1.4;
    --h6-size-proportion: 1.2;
    /*
    --h1-size-proportion: 3;
    --h2-size-proportion: 2.7142;
    --h3-size-proportion: 1.7142;
    --h4-size-proportion: 1.6;
    --h5-size-proportion: 1;
    --h6-size-proportion: .8571;
   */
    font-size: 16px !important;
    font-family: adobe-garamond-pro, serif;
    /*    font-family: 'Cormorant Garamond', serif;*/
}

h1, h2, h3, h4 {
    font-family: orpheuspro, serif;
}
h1 { line-height: 1.4; margin-bottom: 2rem; }
h2 { line-height: 1.288; margin-bottom: 2rem; }
h3 { line-height: 1.3048; margin-bottom: 2rem; }
h4 { line-height: 1.372; margin-bottom: 2rem; }
.container h3 a { color: #9a5837; }
.container h3 a:hover {   opacity: .8 !important; }
.hrf-title { font-family: adobe-garamond-pro, serif; font-size: calc(.84vw + 1rem); line-height: 1.6; }

p { font-size: calc(.24vw + 1rem); line-height: 1.6; }
.large, p.large, .sqsrte-large, .wpex-text-2xl { font-size: calc(.84vw + 1rem); line-height: 1.6; }
.small, p.small { font-size: calc(0vw + 1rem); line-height: 1.6; }

.footer {
    --h2-size-proportion: 1.7142;
}
.container h2, .container h1 { font-weight: normal; }


/**************************************************
 Colors
**************************************************/
.vc_btn3.vc_btn3-color-turquoise { background-color: #9A5837 !important; }
.greenblock,
.greenblock .hrf-title, 
.greenblock .hrf-content {
    background-color: #9AA484; color: #ffffff;
}
.greenblock * { color: #ffffff; }
.greenblock .hrf-title.close-faq span {
    background-color: #9a5837; 
}


/**************************************************
 Layout
**************************************************/
.content-page,
.page-content {
  padding-bottom: 0;
}

.pageheader h1 {
    font-size: calc(4.8vw + 1rem);
}

.pageheader {
    padding-top: 6.6vmax;
    padding-bottom: 6.6vmax;
}

.pageheader  * { color: #ffffff; }


@media only screen and (min-width: 993px) {
  .header-wrapper header > .container .container-wrapper {
    padding-top: 1em;
    padding-bottom: 1em;
  }
}

/**************************************************
 Top Bar
**************************************************/
.top-bar.topbar-color-dark *,
.topbar-widget.etheme_widget_socials .et-follow-buttons a i,
.copyrights-widget.etheme_widget_socials .et-follow-buttons a i {
  color: #9a5837;
}


/**************************************************
 Links
**************************************************/

a.link {
  text-decoration: underline;
  text-decoration-skip-ink: none;
  cursor: pointer;
  color: #9a5837;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
a.link:focus,
a.link:hover {
  outline: none;
  color: #888888;
}


/**************************************************
 Buttons
**************************************************/
.button,
.btn,
input[type="submit"],
input[type="button"],
form button,
form #qna-ask-input button {
/*  display: inline-block;*/
  display: inline-flex;
  justify-content: center; /* center the content horizontally */
  align-items: center; /* center the content vertically */

  border-radius: 0.4rem;
  border: 1px solid transparent;
  -webkit-text-fill-color: currentColor;
  text-transform: none;
  font-size: 1.25rem;
  text-align: center;
  line-height: 1;
  padding: 2rem 2.2rem;
  height: 5.25rem;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.button:not(.btn-white), .button:not(.btn-white) a {
    background-color: rgb(154, 88, 55) !important;
    color: rgb(255, 255, 255) !important; 
    
}

.button.btn-white, .button.btn-white a {
    font-weight: 500;;
    color: rgb(154, 88, 55);
    background-color: rgb(255, 255, 255) !important; 
}

    
.button:hover,
.btn:hover,
.button a:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
form button:hover,
form #qna-ask-input button:hover {
  opacity: .8 !important;
}
.button:focus,
.btn:focus,
input[type="submit"]:focus,
input[type="button"]:focus,
form button:focus,
form #qna-ask-input button:focus {
  color: #222222;
  outline: none;
}
.button:focus:hover,
.btn:focus:hover,
input[type="submit"]:focus:hover,
input[type="button"]:focus:hover,
form button:focus:hover,
form #qna-ask-input button:focus:hover {
  color: white;
  outline: none;
}
.button.active:hover,
.btn.active:hover,
input[type="submit"].active:hover,
input[type="button"].active:hover,
form button.active:hover,
form #qna-ask-input button.active:hover {
  background-color: #222222;
  color: #fff;
  border-color: #222222;
}
.button.active,
.btn.active,
input[type="submit"].active,
input[type="button"].active,
form button.active,
form #qna-ask-input button.active,
.button.active:focus,
.btn.active:focus,
input[type="submit"].active:focus,
input[type="button"].active:focus,
form button.active:focus,
form #qna-ask-input button.active:focus {
  color: #fff;
}
input[type="submit"],
input[type="button"] {
  height: auto;
}
.btn.active:hover {
  opacity: .8 !important;
}

/**************************************************
 Home
**************************************************/
.instagram-row .vc_column-inner {
   padding-top: 0!important; 
}


/**************************************************
 Portfolio
**************************************************/
.single-cpf-portfolio article { margin-bottom: 0; }
.single-cpf-portfolio .vc_column_container>.vc_column-inner { padding: 0; }
.page-portfolio .portfolio_title { margin-top: 15px; font-size: 1.5rem; line-height: 1.4; color: #9a5837 ; }
.page-portfolio .portfolio-page-title h1 { font-size: 5rem; }


/**************************************************
 Rentals
**************************************************/
.rental_types { margin-bottom: 5rem; }
.rental_types h4 { font-size: 2rem; margin-bottom: 2rem; }
.rental_types a.rental_link { font-size: 1.5rem; color: #9a5837 ; text-decoration: underline; }

/**************************************************
 Weddings
**************************************************/
.wedding-blocks a {
    color: #9a5837;
    background-repeat: repeat-x;
    background-image: linear-gradient(to right,currentColor 100%,currentColor 0);
    background-size: 1px 1px;
    background-position: 0 100%;
    white-space: initial;
}
.wedding-blocks a:hover {
    opacity: .7;
}
.page-weddings-and-events .alive-block {
    min-height: 185px; 
}

@media (min-width: 768px) {
    .page-wedding-planning-checklist .pageheader .headerleft h2 { text-align: right; }
    .page-wedding-planning-checklist .pageheader .headerright h2 { text-align: left; }
}


.page-contact-us .content h4 { margin-bottom: 0; }

.page-about-copper-penny-flowers .about-jen h2 {
    --h2-size-proportion: 2.8;
}

.page-photographer-directory .vcex-icon-box-symbol,
.page-photographer-directory .vcex-icon-box-icon,
.page-photographer-directory .vcex-icon-box-text  { display: inline; margin-right: 1em; }
.page-photographer-directory h2.vcex-icon-box-heading { display: inline; font-size: 20px; }
.page-venue-directory .vcex-icon-box-symbol,
.page-venue-directory .vcex-icon-box-icon,
.page-venue-directory .vcex-icon-box-text  { display: inline; margin-right: 1em; }
.page-venue-directory h2.vcex-icon-box-heading { display: inline; font-size: 20px; }
.wp-flex-grow { flex-grow: 1; }

/**************************************************
 WooCommerce
**************************************************/
.single-product .product_meta .sku_wrapper, 
.single-product .product_meta .products-page-cats, 
.single-product .product_meta .tagged_as {
    display: none; 
}
.single-product span.price { font-size: 24px; color: #9a5837 ; }
.home .products-page-cats { display: none; }
.home .content-product { --product-title-size-proportion: 1.5; }

/**************************************************
 Blog
**************************************************/
.widget_categories .cat-item a:before {
    font-family: FontAwesome;
    padding-right: 1rem;
    content: '\f0da ';
    color: #9a5837;
}
.blog .content-page { padding-top: 6.6vmax; }
.blog .post-grid .meta-post .entry-date { font-variant: small-caps; }
.blog .post-grid .meta-post .entry-date:first-letter {
  font-size: 22px;
}
/*
.blog .post-grid .meta-post .meta-divider,
.blog .post-grid .meta-post .views-count { display: none; }
*/
/**************************************************
 Footer
**************************************************/

#menu-footer-about a {
    line-height: 1.1;
    font-size: 21px;
    font-weight: 500;
/*    border-bottom: 1px solid #9a5837;*/
    color: #9a5837;
    background-repeat: repeat-x;
    background-image: linear-gradient(to right,currentColor 100%,currentColor 0);
    background-size: 1px 1px;
    background-position: 0 100%;
    white-space: initial;
}
#menu-footer-about a:hover {
/*    font-weight: 600;*/
    opacity: .7;
}
.footer-bottom.text-color-dark a { color: #9a5837; line-height: 1.1; font-weight: 400; border-bottom: 1px solid #9a5837; }


.footer-bottom a:hover { opacity: .7;  }
.footer h1, .footer h2, .footer h3, .footer h4, .footer h5, .footer h6, .footer .widget-title {
    text-transform: none;
}

.footer { padding-bottom: 0; }
.footer:before {
    content: '';
    width: 100%;
    height: 1px;
    background: #9a5837;
    position: absolute;
    top: 2rem;
    right: 0;
}

.footer_cc p { margin-bottom: 0; }

@media only screen and (max-width:992px){ 
    .footer:before { width: 100%; }
}


.footer .widget-title {
    font-size: calc(2.04vw + 1rem);
    line-height: 1; 
    font-weight: normal;
    padding-bottom: 0;
    margin-bottom: .5rem; 
}

.footer-widget a,
.footer-widget p {
  color: #000000;
}
.footer-widget a:hover {
  color: #fff;
}