/*!
Theme Name: Kulladal
Theme URI: http://underscores.me/
Author: Vladyslav Lykhenko
Author URI: https://lihenko.com.ua/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: kulladal
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Kulladal is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

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

html, body{
	background-color: #ECEAE4;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}


.wpcf7-form-control-wrap{
	position: unset;
}

/* ===== TEXT COLORS ===== */
.has-greige-100-color { color: #F6F4F0; }
.has-greige-200-color { color: #ECEAE4; }
.has-greige-300-color { color: #DFDED7; }
.has-greige-400-color { color: #D5D3CC; }
.has-greige-500-color { color: #BFBDB6; }
.has-greige-600-color { color: #A7A49A; }
.has-greige-700-color { color: #8F8C7F; }

.has-green-color  { color: #565747; }
.has-blue-color   { color: #626C75; }
.has-white-color  { color: #FFFFFF; }
.has-earth-color  { color: #4F4A45; }
.has-dark-color   { color: #222222; }
.has-brown-color   { color: #4f4a45; }

/* ===== BACKGROUND COLORS ===== */
.has-greige-100-background-color { background-color: #F6F4F0; }
.has-greige-200-background-color { background-color: #ECEAE4; }
.has-greige-300-background-color { background-color: #DFDED7; }
.has-greige-400-background-color { background-color: #D5D3CC; }
.has-greige-500-background-color { background-color: #BFBDB6; }
.has-greige-600-background-color { background-color: #A7A49A; }
.has-greige-700-background-color { background-color: #8F8C7F; }

.has-green-background-color  { background-color: #565747; }
.has-blue-background-color   { background-color: #626C75; }
.has-white-background-color  { background-color: #FFFFFF; }
.has-earth-background-color  { background-color: #4F4A45; }
.has-dark-background-color   { background-color: #222222; }
.has-brown-background-color   { background-color: #4f4a45; }



.wp-block-columns{
	padding-left: 1.5rem;
 	padding-right: 1.5rem;
}

.quote-wrap{
	position:relative;
	padding-left:45px;
}

.quote-wrap:before{
	content:'';
	width:35px;
	height:35px;
	background-image:url(./img/quote.svg);
	background-position:center;
	background-size:contain;
	background-repeat:no-repeat;
	position:absolute;
	display:block;
	left:0;
	top:0;
}

.quote-wrap .qoute-text{
	margin-bottom:15px;
}

.quote-wrap .qoute-author{
	text-align:right;
	letter-spacing: 0.51px;
	font-weight:600;
}

.qoute-author-position{
	text-align:right;
	letter-spacing: 0.51px;
}

.bordered-btn{
	border-radius:4px;
	border:1px solid #A7A49A;
	padding:12px 16px;
}

.arrow-btn.bordered-btn{
	padding-right:52px;
}

.arrow-btn.bordered-btn:after{
	right:16px;
}

.arrow-btn.bordered-btn:hover:after{
	right:8px;
}

.one-images p{
	max-width: 70ch;
}

.footer-logo{
	max-height:79.2px;
}

.slick-dots:has(li:only-child) {
  display: none;
}

.no-underline{
	text-decoration:none;
}

.tile-label{
	font-size:80%;
}

.tile-card{
	padding:45px 45px 70px;
}

.tile-number{
	margin-bottom:2px;
}

.tile-title h3{
	text-transform:none;
}

.tile-description{
	padding-left:10px;
	padding-right:10px;
}

ol.wp-block-list{
	margin-left:25px;
	list-style:decimal;
}

ol.wp-block-list li{
	margin-bottom:10px;
}

ol.wp-block-list ol{
	margin-left:25px;
	list-style:decimal;
}

ol.wp-block-list ol li{
	margin-bottom:10px;
}

#calculator-section .gform_title{
	display:none;
}

#calculator-section .gform_description{
	display:none;
}

#calculator-section .gform_required_legend{
	display:none;
}


#calculator-section .gf_progressbar{
	display:none;
}

#calculator-section .gf_progressbar_title{
	font-weight:500;
	color:#222;
}

#calculator-section .gform_next_button{
	background-color:transparent;
	box-shadow:none;
	font-size:16px;
	text-transform:uppercase;
	border:1px solid #8F8C7F;
	border-radius:4px;
	color:#222;
	margin-left:auto;
	padding:13px 25px;
	transition:all 0.3s ease-in-out;
}

#calculator-section .gform_next_button:hover{
	background-color:#8F8C7F;
	color:#fff;
}

#calculator-section .gform_previous_button{
	background-color:transparent;
	box-shadow:none;
	font-size:16px;
	text-transform:uppercase;
	border:1px solid #8F8C7F;
	border-radius:4px;
	color:#222;
	padding:13px 25px;
	transition:all 0.3s ease-in-out;
}

#calculator-section .gform_previous_button:hover{
	background-color:#8F8C7F;
	color:#fff;
}

#calculator-section .gform_button{
	background-color:transparent;
	box-shadow:none;
	font-size:16px;
	text-transform:uppercase;
	border:1px solid #8F8C7F;
	border-radius:4px;
	color:#222;
	padding:13px 25px;
	transition:all 0.3s ease-in-out;
}

#calculator-section .gform_button:hover{
	background-color:#8F8C7F;
	color:#fff;
}

.mb-0{
	margin-bottom:0;
}

#calculator-section input[type=number]{
	background-color:transparent;
	border-radius:3px;
	border:1px solid #8F8C7F;
}

#calculator-section .gfield_radio {
    display: flex;
	flex-direction:row;
    flex-wrap: wrap;
    margin: 0 -8px;
	gap:unset;
}

#calculator-section .gfield:not(.step-7-terms) .gchoice {
    position: relative;
	display:block;
	width:273px;
	max-width:100%;
	padding-left:8px;
	padding-right:8px;
	margin-bottom:16px;
}

#calculator-section .gfield:not(.step-7-terms) .gchoice input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

#calculator-section .gfield:not(.step-7-terms) .gchoice label {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 24px;
    border: 1px solid #A7A49A;
    cursor: pointer;
    text-align: center;
    background: transparent;
    transition: all 0.3s ease-in-out;
	width:100%;
	margin:0;
	font-weight:500;
}

#calculator-section .gfield:not(.step-7-terms) .gchoice input[type="radio"]:checked + label {
    border-color: #000;
    background: #000;
    color: #fff;
}

#calculator-section .gfield.step-7-terms{
	margin-bottom:5px;
}

#calculator-section .gfield.step-7-terms input:before{
	color:#222;
}

#calculator-section .gfield.step-7-terms input:focus{
	border-color:#222;
}

#calculator-section .gfield.step-7-title{
	padding-top:64px;
}

#calculator-section .pb-16{
	padding-bottom:64px;
}

#calculator-section .gform-theme--foundation .gform_page_footer {
	position:relative;
}

img.gform_ajax_spinner {
    width: 40px !important;
    height: 40px !important;
    border: 4px solid #f0f0f0;
    border-top-color: #A7A49A;
    border-radius: 50%;
    animation: gf-spin 0.8s linear infinite;
    background: transparent !important;
	position:absolute;
	left:100%;
}

.carousel .slick-dots li button:before{
	font-size: 40px;
}

.error404 .page-title{
	letter-spacing:normal;
}

.error404 .site-main{
	min-height:calc(100vh - 537px);
}

@keyframes gf-spin {
    to { transform: rotate(360deg); }
}

@media (max-width: 991px) {
	#calculator-section p.gf_progressbar_title{
		margin-bottom:0;
	}
	#calculator-section .gf_progressbar_wrapper{
		margin-bottom:0;
	}
	#calculator-section .gform-theme--foundation .gform_fields{
		row-gap:5px;
	}
}

@media (min-width: 782px) {
  .wp-block-columns:has(.wp-block-column:nth-child(4)) {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}

#calculator-section .step-7-input{
	margin-bottom:8px;
}
#calculator-section .step-7-input input{
	background-color:transparent;
}

#calculator-section .step-7-input select{
	background-color:transparent;
}

@media (min-width: 992px){
	.footer-logo{
		max-height:unset;
	}
	.wp-block-columns{
		padding-left: 2rem;
		padding-right: 2rem;
	}
	.wp-block-columns.px-0{
		padding-left:0;
		padding-right:0;
	}
	#calculator-section .step-1-title{
		grid-column-start:1;
		grid-column-end:5;
		grid-row-start:2;
		grid-row-end:3;
	}
	#calculator-section .step-1-size-input{
		grid-column-start:1;
		grid-column-end:5;
		grid-row-start:3;
		grid-row-end:4;
	}
	#calculator-section .step-1-image{
		grid-column-start:6;
		grid-column-end:12;
		grid-row-start:1;
		grid-row-end:5;
	}
	#calculator-section .step-2-title{
		grid-column-start:1;
		grid-column-end:5;
		grid-row-start:2;
		grid-row-end:3;
	}
	#calculator-section .step-2-input{
		grid-column-start:1;
		grid-column-end:5;
		grid-row-start:3;
		grid-row-end:4;
	}
	#calculator-section .step-2-image{
		grid-column-start:6;
		grid-column-end:12;
		grid-row-start:1;
		grid-row-end:5;
	}
	#calculator-section .step-3-title{
		grid-column-start:1;
		grid-column-end:5;
		grid-row-start:2;
		grid-row-end:3;
	}
	#calculator-section .step-3-input{
		grid-column-start:1;
		grid-column-end:5;
		grid-row-start:3;
		grid-row-end:4;
	}
	#calculator-section .step-3-image{
		grid-column-start:6;
		grid-column-end:12;
		grid-row-start:1;
		grid-row-end:5;
	}
	#calculator-section .step-4-title{
		grid-column-start:1;
		grid-column-end:5;
		grid-row-start:2;
		grid-row-end:3;
	}
	#calculator-section .step-4-input{
		grid-column-start:1;
		grid-column-end:5;
		grid-row-start:3;
		grid-row-end:4;
	}
	#calculator-section .step-4-image{
		grid-column-start:6;
		grid-column-end:12;
		grid-row-start:1;
		grid-row-end:5;
	}
	#calculator-section .step-5-title{
		grid-column-start:1;
		grid-column-end:5;
		grid-row-start:2;
		grid-row-end:3;
	}
	#calculator-section .step-5-input{
		grid-column-start:1;
		grid-column-end:5;
		grid-row-start:3;
		grid-row-end:4;
	}
	#calculator-section .step-5-image{
		grid-column-start:6;
		grid-column-end:12;
		grid-row-start:1;
		grid-row-end:5;
	}
	#calculator-section .step-6-title{
		grid-column-start:1;
		grid-column-end:5;
		grid-row-start:2;
		grid-row-end:3;
	}
	#calculator-section .step-6-input{
		grid-column-start:1;
		grid-column-end:5;
		grid-row-start:3;
		grid-row-end:4;
	}
	#calculator-section .step-6-image{
		grid-column-start:6;
		grid-column-end:12;
		grid-row-start:1;
		grid-row-end:5;
	}
	#calculator-section .step-7-title{
		grid-column-start:1;
		grid-column-end:5;
	}
	#calculator-section .step-7-input{
		grid-column-start:1;
		grid-column-end:5;
	}
	#calculator-section .gform-theme--foundation .gform_fields{
		align-items:center;
		grid-row-gap:0;
	}
	#calculator-section .gform-theme--foundation .gform_page_footer{
		width:50%;
		justify-content:space-between;
	}
	.lg\:pt-12{
		padding-top: 2rem;
	}
}


@media (min-width: 1200px) {
  .wp-block-columns:has(.wp-block-column:nth-child(4)) {
    grid-template-columns: repeat(4, 1fr);
  }
  .wp-block-columns:has(.wp-block-column:nth-child(5)) {
    grid-template-columns: repeat(5, 1fr);
  }
  .tile-link {
        opacity: 0;
	    transform: translatey(5px);
        transition: all 0.3s ease;
    }
    
    .tile-card:hover .tile-link {
        opacity: 1;
		transform: translatey(0);
    }
	#calculator-section .step-1-title{
		padding-left:46px;
	}
	#calculator-section .step-1-size-input{
		padding-left:46px;
	}
	#calculator-section .step-2-title{
		padding-left:46px;
	}
	#calculator-section .step-2-input{
		padding-left:46px;
	}
	#calculator-section .step-3-title{
		padding-left:46px;
	}
	#calculator-section .step-3-input{
		padding-left:46px;
	}
	#calculator-section .step-4-title{
		padding-left:46px;
	}
	#calculator-section .step-4-input{
		padding-left:46px;
	}
	#calculator-section .step-5-title{
		padding-left:46px;
	}
	#calculator-section .step-5-input{
		padding-left:46px;
	}
	#calculator-section .step-6-title{
		padding-left:46px;
	}
	#calculator-section .step-6-input{
		padding-left:46px;
	}
	#calculator-section .step-7-title{
		padding-left:46px;
	}
	#calculator-section .step-7-input{
		padding-left:46px;
	}
	#calculator-section .step-7-terms{
		padding-left:46px;
	}
}

.gf-area-slider-wrapper,
.style-slider-wrapper {
    text-align: center;
    margin-bottom: 0.5em;
}

#gf-area-slider-value,
#gf-style-slider-value {
    display: inline-block;
    width: 195px;
    background: transparent;
	border: 1px solid #A7A49A;
    color: #222;
    padding: 3px 15px;
    margin-top: 0.5em;
    text-align: center;
    font-weight: 500 !important;
    font-size: 18px;
    line-height: 36px;
}

#gf-area-slider,
#gf-style-slider {
    -webkit-appearance: none;
    height: 8px;
    background: #A7A49A;
    border: none;
    border-radius: 0;
    margin: 1em auto;
    outline: none;
}

#gf-area-slider:focus,
#gf-style-slider:focus {
    outline: none;
}

#gf-area-slider::-webkit-slider-thumb,
#gf-style-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    background: #222;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}



@media (max-width: 430px) {
    #gf-area-slider,
    #gf-style-slider {
        width: 100% !important;
        margin: 0.5em auto;
    }

    #gf-area-slider-value,
    #gf-style-slider-value {
        width: 70%;
        font-size: 16px;
    }
}