/*
 Theme Name:   Joinas Divi 4.0
 Theme URI:    https://joinas.fi
 Description:  Asiakas: Avantosauna Lauteet Oy
 Author:       Joinas Oy
 Author URI:   https://joinas.fi
 Template:     Divi
 Version:      4.1
*/

/***** Teeman muokkaukset *****/

/* Asiakkaan ilme */

:root {
  --asiakasvari: #68533A; 
  --tummaasiakasvari: #463E35;
  --asiakastehostevari: #65B4E5;
  --toinenasiakastehostevari: #65B4E5;
  --asiakasfontti: brandon-grotesque, sans-serif;
  --asiakasotsikkofontti: brandon-grotesque, sans-serif;
}

/* Ei vareja tai fontteja taman alle */
/* Typografia */

body {
	font-family: var(--asiakasfontti);
	font-weight: 500;
  font-style: normal;
}


h1, h2, h3, h4, h5, h6,
div#page-container div#main-content h1,
div#page-container div#main-content h2,
div#page-container div#main-content h3,
div#page-container div#main-content h4,
div#page-container div#main-content h5 { 
	font-family: var(--asiakasotsikkofontti);

 }

.et_pb_bg_layout_light h1,
.et_pb_bg_layout_light h2,
.et_pb_bg_layout_light h3,
.et_pb_bg_layout_light h4 { color: var(--tummaasiakasvari);  }

.et_pb_bg_layout_dark h1,
.et_pb_bg_layout_dark h2,
.et_pb_bg_layout_dark h3,
.et_pb_bg_layout_dark h4 { color: #ffffff  }

h1 span { color: var(--toinenasiakastehostevari); }
h2 span { color: var(--asiakastehostevari); }

div#page-container div#main-content h2, h2 {  font-size: 35px; margin-top: 20px; margin-bottom: 5px; line-height: 1.45; }
div#page-container div#main-content h3, h3 { font-size: 25px; margin-top: 10px; color: var(--asiakasvari); line-height: 1.45; }
div#page-container div#main-content h4, h4 { font-size: 16px; }

div#page-container div#main-content h2.woocommerce-loop-product__title { font-size: 25px; }

div#joinas-footer h3 span {
  font-weight: 400 !important;
}

a[href^="tel:"]:before,
 div#joinas-footer a[href^="mailto:"]:before { 
    content: "\f879";
    font-family: 'Font Awesome 5 Pro' !important;
    font-style: normal;
    font-weight: 600;

    padding-right: 1em;
    position: relative;
    top: 0px;
    left: 0px;
}
div#joinas-footer a[href^="mailto:"]:before { 
    content: "\f0e0";
    font-family: FontAwesome;
}

div#joinas-footer div.textwidget h2 { text-transform: none !important; font-size: 25px; }
div#joinas-footer h4.widgettitle { display: none !important; }
div#joinas-footer div.et_pb_widget  { float: none; margin: 0px; width: 100%; }
div#joinas-footer div.et_pb_widget a  { color: inherit; }

/* Kustomoidut luokat */

ul#mobile_menu1 li.ctabtn a, nav.et-menu-nav ul li.ctabtn a { color: #dcb182 !important; background-color: rgba(0, 0, 0, .0); font-size: 14px !important; text-transform: uppercase; padding: 13px 22px !important; border: 2px solid #dcb182; border-radius: 2px; height: auto; margin-left: 30px; font-weight: 600; }
ul#mobile_menu1 li.ctabtn a { margin: 0px 20px 20px 20px; /* background-color: var(--asiakastehostevari); */ }
.et_pb_menu--with-logo .et_pb_menu__menu>nav>ul>li>a { padding: 20px 0; }

h2.iso { font-size: 45px !important; line-height: 1.35; }
footer.et-l--footer h3 { padding-bottom: 22px; }


/* Social Feed */

div.sbi_header_text { margin-bottom: 20px; }
div.sbi_header_text h3 { font-size: 16px !!important; font-weight: 600 !important; color: var(--tummaasiakasvari) !important; }
div.sbi_header_text p.sbi_bio { font-size: 16px !important; color: var(--asiakasvari); }
/* #sb_instagram .sb_instagram_header .sbi_header_text h3,
#sb_instagram .sb_instagram_header .sbi_header_text p.sbi_bio { margin-left: 70px !important; } */

/* WOO  */

.woocommerce-page a.woocommerce-product-gallery__trigger { display: none; }
small.woocommerce-price-suffix { font-size: 16px; display: block; color: #dcb182; }
.woocommerce-page a.checkout-button { padding: 16px !important; background-color: var(--asiakastehostevari) !important; color: #ffffff !important} 


/* Listaukset */

div#et-main-area div#main-content div.et_pb_text_inner ul { list-style-type: none; padding: 10px 0px; margin: 0; } 
div#et-main-area div#main-content div.et_pb_text_inner ul li { position: relative; padding-left: 30px; padding-bottom: 5px; }
div#et-main-area div#main-content div.et_pb_text_inner ul li:before {
	content: "\f054";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    color: var(--asiakasvari); 
    font-size: 12px;
    padding-right: 0.5em;
    position: absolute;
    top: 0px;
    left: 0px;
}

div#et-main-area div#main-content div.et_pb_text_inner ol {
  list-style: none;
  counter-reset: numerointi;
  margin-top: 10px;
}
div#et-main-area div#main-content div.et_pb_text_inner ol li {
  counter-increment: numerointi;
  margin-left: 30px;
  margin-bottom: 5px;
}
div#et-main-area div#main-content div.et_pb_text_inner ol li::before {
  content: counter(numerointi) ". ";
  color: var(--asiakasvari);
  font-weight: bold;
  position: absolute;
  left: 0;
}

div#et-main-area div#main-content div.et_pb_text_inner ul.checklist li:before {  content: "\f00c" !important; }

a[href^="tel:"], a[href^="mailto:"], a.whatsapp { white-space: nowrap; text-decoration: none !important; }

.et_pb_bg_layout_dark .ikonit a[href^="mailto:"]:before, .et_pb_bg_layout_dark .ikonit a[href^="tel:"]:before, .et_pb_bg_layout_dark .ikonit a.whatsapp:before { color: #ffffff; } 
.et-l--footer .et_pb_bg_layout_dark .ikonit a[href^="mailto:"]:before, .et-l--footer .et_pb_bg_layout_dark .ikonit a[href^="tel:"]:before, .et-l--footer .et_pb_bg_layout_dark .ikonit a.whatsapp:before { color: #ffffff; } 

/* Kategoriasivun muotoilut */

a.more-link { top: 10px; position: relative; }
a.more-link::after {
  transition-timing-function: ease-in-out;
  transition: 1s;
  content: " \24"; 
  font-family: 'ETmodules';
  font-weight: normal;
  position: absolute;
}
a.more-link:hover::after {
  padding-left: 5px;
}
.single-post .et_pb_section .et_pb_post_title .et_pb_title_container { max-width: 850px; margin: 0 auto; }
.et_pb_blog_grid .et_pb_post { padding: 40px !important; }
body.home .et_pb_blog_grid .et_pb_post { padding: 0px !important; }
.et_pb_blog_grid .et_pb_image_container { margin: -40px -39px 29px !important; }

.fluid-width-video-wrapper { margin-bottom: 20px; }

div.et_pb_post_content blockquote { font-size: 20px; color: var(--asiakastehostevari); border-color: var(--asiakastehostevari); border-left: 4px solid; line-height: 1.65;  }


/* Evasteilmoitus */
div#cookie-notice { padding: 5px 0; }
#cn-notice-text a { color: #ffffff; }
a#cn-accept-cookie { white-space: nowrap; background-color: #ffffff; padding: 6px 10px; border-radius: 20px; }
@media only screen and (max-width: 875px) { a#cn-accept-cookie { margin-top: 15px; display: block;} div.cookie-notice-container { font-size: 16px; line-height: 1.6; padding: 30px; } }
.cookie-notice-hidden { display: none !important; }

/* Mobiilimenu & dropdown */

.et_pb_menu_0_tb_header.et_pb_menu ul li.current_page_item a {  }
.et_pb_menu_0_tb_header.et_pb_menu ul li.current-menu-item.menu-item-has-children ul li a { color: var(--asiakasvari) !important;  }
.et-menu .menu-item-has-children>a:first-child { padding-right: 0px; }
.et-menu .menu-item-has-children>a:first-child:after { content: ""; }
.nav li ul.sub-menu {
  width: 400px;
  border-radius: 5px;
  border-top: 0px;
  -webkit-box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.07); 
  -moz-box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.07); 
  box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.07);
}
.nav li ul.sub-menu a {
  width: 360px;
}


nav.et-menu-nav .et-menu li li a { padding: 18px 20px !important; }

.et_mobile_menu { left: 10px; width: calc(100% - 20px); }
#mobile_menu1 { border-radius: 10px; border-top: 0px; }
#mobile_menu1.et_mobile_menu li a { padding: 25px 10%; text-align: center; }

#mobile_menu1.et_mobile_menu li.current-menu-item a, #mobile_menu1.et_mobile_menu li.second-level a { background-color: #f6f6f6;  }
#mobile_menu1.et_mobile_menu li.current_page_parent a { border-radius: 10px; }

#mobile_menu1.et_mobile_menu li.current-menu-item li a::before { content: ""; } 
#mobile_menu1.et_mobile_menu { padding: 0px; top: 55px; -webkit-box-shadow: 0px 10px 80px 0px rgba(0,0,0,0.3); -moz-box-shadow: 0px 10px 80px 0px rgba(0,0,0,0.3); box-shadow: 0px 10px 80px 0px rgba(0,0,0,0.3); }

.mobile_nav.opened .mobile_menu_bar:before {
 content: '\4d';
}

.et_mobile_menu .first-level > a {
background-color: transparent;
position: relative;
}
.et_mobile_menu .first-level > a:after {
font-family: 'ETmodules';
content: '\4c';
font-weight: normal;
position: absolute;
font-size: 18px;
top: 25px;
right: 30px;
}
.et_mobile_menu .first-level > .icon-switch:after{
content: '\4d';
}
.second-level {
display: none;
}
.reveal-items {
display: block;
}

.et_mobile_menu li li, .et_pb_menu .et_mobile_menu li ul { padding-left: 0px; }


/* Lomakemuotoilut */



/* Listausten poistaminen */
div#et-main-area div#main-content div.et_pb_text_inner .gform_wrapper ul li { position: relative; padding-left: 0px; padding-bottom: 0px; }
div#et-main-area div#main-content div.et_pb_text_inner .gform_wrapper ul li:before {
  content: "";
}

/*----*/

.et_pb_bg_layout_dark .gform_wrapper ul.gform_fields .ginput_container input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]) {
  border: 2px solid #ffffff; padding: 15px 20px;
}
body .et_pb_bg_layout_light .gform_wrapper ul li.gfield { margin-top: 0px; }
.et_pb_bg_layout_light div.gform_wrapper div.gform_footer { margin-top: 0px; padding: 0px; }
.gform_wrapper .top_label .gfield_label, .gform_wrapper legend.gfield_label { font-size: 16px; }
.gform_wrapper ul.gform_fields .ginput_container input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]) {
	padding: 14px 14px;
}

.et_pb_bg_layout_dark .gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]), .et_pb_bg_layout_dark .gform_wrapper textarea {
	border: 0px;
}
.et_pb_bg_layout_light .gform_wrapper textarea { padding: 14px 14px;  }
.et_pb_bg_layout_dark .gform_wrapper textarea { padding: 14px 14px; }

.gform_wrapper div.gform_body ul.gform_fields div.ginput_container { margin-top: 2px; }
.gform_wrapper ul.gform_fields li.gfield { padding-right: 0px !important; }
.gform_wrapper .gform_footer input[type=submit].gform_button, div#field_2_2 button { text-transform: uppercase; font-size: 16px; width: 100%; padding: 17px 20px; border: 0px; background-color: var(--tummaasiakasvari); color: #fff; font-weight: 600; border-radius: 2px; cursor: pointer; }
.et_pb_bg_layout_dark .gform_wrapper .gform_footer input[type=submit].gform_button {  background-color: var(--asiakastehostevari); color: var(--tummaasiakasvari);}
.gform_wrapper li.hidden_label input { margin-top: 0px !important; }
.gform_wrapper .gform_footer { margin-top: 0px !important; }
body .gform_wrapper ul li.gfield { margin-top: 10px !important; }


/* Inline-button */

div#field_2_2 button { width: 100%; background-color: #dcb182; color: var(--tummaasiakasvari); padding: 20px !important; }

.gform_wrapper input::placeholder, .gform_wrapper textarea::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: var(--asiakasvari);
    opacity: 1; /* Firefox */
    font-size: 16px;
    font-style: italic;
}

.gform_wrapper input:-ms-input-placeholder, .gform_wrapper textarea:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: var(--asiakasvari);
    font-size: 16px;
    font-style: italic;
}

.gform_wrapper input::-ms-input-placeholder, .gform_wrapper textarea::-ms-input-placeholder { /* Microsoft Edge */
    color: var(--asiakasvari);
    font-size: 16px;
    font-style: italic;
} 

.et_pb_bg_layout_dark .gform_wrapper { margin: 0px; }

.gform_wrapper input[type=text], 
.gform_wrapper input[type=password], 
.gform_wrapper input[type=tel], 
.gform_wrapper input[type=email], 
.gform_wrapper input.text, 
.gform_wrapper input.title, 
.gform_wrapper textarea {
  border: 0px;
  border: 2px solid;
  border-color: var(--asiakasvari) !important;
  border-radius: 3px !important;
  padding:  20px !important;
  background-color: rgba(0, 0, 0, .0);
}
.et_pb_bg_layout_light .gform_wrapper ul.gform_fields .ginput_container textarea:focus, .et_pb_bg_layout_light .gform_wrapper ul.gform_fields .ginput_container input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]):focus, .gform_wrapper ul.gform_fields .ginput_container textarea:focus, .gform_wrapper ul.gform_fields .ginput_container input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]):focus {
  border-bottom: 2px solid !important; border-color: var(--asiakasvari) !important; font-style: normal !important; font-weight: 500 !important; background-color: #F9F9FA !important;
}
.gform_wrapper li.gf_left_half { margin-right: 8px; width: calc(50% - 8px) !important; }
.gform_wrapper li.gf_right_half { margin-left: 8px !important; width: calc(50% - 8px) !important; } 


/* VIRHEILMOITUKSET */
div.et_pb_module .gform_wrapper.gform_validation_error .gform_body ul li.gfield.gfield_error:not(.gf_left_half):not(.gf_right_half) { margin: 0 auto; max-width: 100% !important; width: 100% !important;}
.gform_wrapper div.validation_message { color: var(--asiakasvari); line-height: 1.5; }
.gform_wrapper div.validation_error { color: #fff !important; border: 0px !important; background-color: var(--asiakasvari); border-radius: 5px; margin-top: 30px !important; margin-bottom: 0px !important; padding: 16px 20px !important; }
.gform_wrapper li.gfield_error div.ginput_container ul li label { color: #2d2d2d !important; }
.gform_wrapper .gfield_error .gfield_label { color: var(--tummaasiakasvari) !important;  }
.gform_wrapper li.gfield_error { text-align: left !important;  }
.gform_wrapper li.gfield.gfield_error.gfield_contains_required div.gfield_description { padding-top: 7px !important; }
.gform_wrapper li.gfield.gfield_error, .gform_wrapper li.gfield.gfield_error.gfield_contains_required.gfield_creditcard_warning { background-color: rgba(255, 255, 255, 0) !important; border-top: 0px !important; border-bottom: 0px !important; padding-top: 0px !important; }
.gform_wrapper li.gfield_error ul.gfield_checkbox { color: #fff; }
.gform_wrapper li.gfield_error input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]), .gform_wrapper li.gfield_error textarea { border-color:  var(--asiakastehostevari) !important; }

/* Gdpr-palkki */

.large.cli-plugin-button {
  width: 100%;
  padding: 14px 20px;
  font-size: 16px;
}

h5.cli_messagebar_head { font-size: 20px !important; }
div.cli-bar-message { font-size: 16px; line-height: 24px; }
div.sbi_header_text h3 { font-size: 16px !important; }


/* Palstajarjestyksen muuttaminen */

@media all and (max-width: 980px) {
/*** wrap row in a flex box ***/
.custom_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_row:last-child .et_pb_column:last-child {
margin-bottom: 30px;
}
}

a.et_pb_button.viivanappi:hover { background-color: rgba(0,0,0,.0) !important; }
a.et_pb_button.viivanappi, a.et_pb_button.viivanappi:hover { padding-right: 30px !important; }
a.et_pb_button.viivanappi::after { 
  content: "\f178" !important;
    font-family: 'Font Awesome 5 Pro' !important;
    font-style: normal;
    font-weight: 300;
    text-decoration: inherit;
    font-size: 16px;
    padding-right: 0.5em;
    position: absolute;
    top: 7px;
    right: 0px;
  display: inline-block !important;
 }

a.et_pb_button.viivanappi.et_pb_bg_layout_light:hover::after { right: -5px;
    -webkit-transform:scale(1.1,1.0);
    -moz-transform:scale(1.1, 1.0);
    -ms-transform:scale(1.1, 1.0);
    -o-transform:scale(1.1, 1.0);
    transform:scale(1.1,1.0);
     }


/* Responsiiviset muutokset */

@media all and (min-width: 981px) {
body.archive .et-db #et-boc .et-l .et_pb_section { padding: 0px 0px !important; }
}

@media all and (max-width: 980px) {

  nav.et-menu-nav ul li.ctabtn a { margin-left: 0px; }

div.et_pb_menu__wrap:before {
  position: absolute;
  left: 135px;
  top: 10px;
  font-size: 12px;
  font-weight: 600;
  color: #7796a6;
}

}


@media all and (max-width: 640px) {

a.et_pb_button.viivanappi { padding-right: 0px !important; }
a.et_pb_button.viivanappi::after { 
  content: "" !important;
 }
 a.et_pb_button.viivanappi:hover::after { content: "" !important; }


.gform_wrapper li.gf_left_half { margin-right: 0px; width: 100% !important; }
.gform_wrapper li.gf_right_half { margin-left: 0px !important; width: 100% !important; } 
  .gform_wrapper .top_label li.gfield.gf_left_third:not(.gfield_time_hour):not(.gfield_time_minute):not(.gfield_time_ampm), .gform_wrapper .top_label li.gfield.gf_middle_third:not(.gfield_time_hour):not(.gfield_time_minute):not(.gfield_time_ampm) {
    width: 50% !important; float: left;
  }

  h1, h1.et_pb_contact_main_title, .et_pb_title_container h1 { font-size: 32px !important; }
  body.home h1 { font-size: 40px !important; }
  
  h2.iso { font-size: 31px !important; line-height: 1.35; }

  div#page-container div#main-content h2, h2 { font-size: 25px; }

  div.et_pb_title_container h1.entry-title {
    font-size: 32px; 
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
  .hyphens-mobile p, .hyphens-mobile, p {
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
}