@import "../../css/_mixins.scss";
@import "../../css/_theme-vars.scss";
@import "css/_skin-vars.scss";

//---global styles
//--content gaps
.page_content_wrap {
	padding-top: 3.35rem;
}
//--background image
.page_wrap.with_bg {
	-webkit-background-size: cover;
	background-size: cover;
	background-position: top center;
	background-repeat: no-repeat;
	&.contain_size {
		-webkit-background-size: contain;
		background-size: contain;
		background-position: top center;
	}
	.page_content_wrap {
		background-color: transparent;
	}
	.top_panel,
	[class*="scheme_"].top_panel {
		background-color: transparent;
	}
}
body.with_bg_canvas .page_wrap.with_bg {
	background: none;
}
//--post 404
.error404 {
	.page_title {
		display: flex;
		align-items: end;
		justify-content: center;
		font-size: 17.2vw;
		font-weight: 300;
		//-picture in the middle of the header
		img {
			max-width: 15vw;
			margin: 0 5px;
		}
	}
	.page_subtitle {
		margin: 2vw 0 0;
	}
}
//--404.no-result page
.error404 .page_content_wrap,
.search-no-results .page_content_wrap {
	background-color: var(--theme-color-bg_color);
}

//---user styles
//--clients -alter style
.alter_clients .widget_slider .slider_container .slider-slide {
	background-color: transparent;
}
//--header fullscreen
.header_fullscreen:before {
	background-color: var(--theme-color-inverse_bd_hover);
	opacity: 0.3;
}
//--button -inverse backgraund
//-extra class-'inverse_bg'
.button_bg_icon_color.inverse_bg .sc_button_icon {
	color: var(--theme-color-inverse_hover);
	background-color: var(--theme-color-inverse_bd_color);
}
//--list
ul[class*="trx_addons_list"] > li:before {
	color: var(--theme-color-text_link2);
}
//--google map -marker
.map_marker {
	background-color: var(--theme-color-text_link);
	> div {
		background-color: var(--theme-color-text_link_05);
	}
}

//---widgets styles
//--services -modern styles
.sc_services_modern {
	.sc_services_item_thumb .all-svg {
		.svg-1,
		.svg-2 {
			display: none;
		}
	}
	.sc_services_item:hover .sc_button_arrow,
	.sc_services_item .sc_button_arrow:hover {
		@include box-shadow(none);
	}
}
//--contactForm7 -style 9
div.wpcf7 .form-style-9 {
	.columns_wrap > [class*="column-"] {
		padding-bottom: 15px;
	}
	.wpcf7-submit-style {
		margin-top: 13px;
		.wpcf7-submit {
			display: inline-block;
			padding: 17px 35px 17px 35px !important;
		}
		.submit-style-in:before {
			display: none;
		}
	}
	+ div.wpcf7-response-output {
		margin: 18px 0 0;
	}
	span.wpcf7-not-valid-tip {
		bottom: -5px;
	}
	.wpcf7-not-valid + .wpcf7-not-valid-tip {
		margin-top: 5px;
		margin-bottom: 0.5em;
	}
}

//--mc4wp-form -style 3
#style-3.mc4wp-form .mc4wp-form-fields {
	button {
		&:hover,
		&:active,
		&:focus {
			color: var(--theme-color-text_dark_08) !important;
			&:before {
				color: var(--theme-color-text_dark_08);
			}
		}
	}
	input[type="submit"] {
		&:hover,
		&:active,
		&:focus {
			color: var(--theme-color-text_dark_08) !important;
			&:before {
				color: var(--theme-color-text_dark_08);
			}
		}
	}
}

//---footer zone
.footer_wrap {
	//--mc4wp-form -style 7
	#style-7.mc4wp-form .mc4wp-form-fields input[type="email"] {
		background-color: var(--theme-color-bg_color) !important;
	}
}

//---responsive styles
//@mixin theme--lg()
@media #{$media_lg} {
	//--content gaps
	.page_content_wrap {
		padding-top: 40px;
	}
	//--post 404
	.error404 {
		.page_title {
			font-size: 200px;
			img {
				max-width: 160px;
			}
		}
	}
	//--contactForm7 -style 9
	div.wpcf7 .form-style-9 .wpcf7-submit-style {
		margin-top: 5px;
		.wpcf7-submit {
			padding: 15px 35px 15px 35px !important;
		}
	}
	div.wpcf7 .form-style-9 .wpcf7-not-valid + .wpcf7-not-valid-tip {
		margin-top: 0;
	}
}

//@mixin theme--sm()
@media #{$media_sm} {
	//--content gaps
	.page_content_wrap {
		padding-top: 30px;
	}
	//--post 404
	.error404 {
		.page_title {
			font-size: 140px;
			align-items: baseline;
			img {
				max-width: 110px;
			}
		}
		.page_subtitle {
			margin: 20px 0;
		}
	}
	//--contactForm7 -style 9
	div.wpcf7 .form-style-9 .wpcf7-submit-style {
		margin-top: 10px;
		.wpcf7-submit {
			padding: 13px 30px 13px 30px !important;
		}
	}
	div.wpcf7 .form-style-9 + div.wpcf7-response-output {
		margin: 12px 0 0;
	}
	div.wpcf7 .form-style-9 .columns_wrap > [class*="column-"] {
		padding-bottom: 10px;
	}
}