/*
 Theme Name:   Overstrap
 Author:       Evsikov Konstantin
 Template:     understrap
*/


/* ------------------------------------------ */
/*                    CSS                     */
/* ------------------------------------------ */

body { background-color: #F0DBBE; }

hr.wp-block-separator.is-style-default {
    width: 10rem;
    border-width: 1.5px;
}

.bg-orange {
	background: #EFA96E!important;
}

.navbar-nav .nav-link {
    padding-right: .5rem;
    padding-left: .5rem;
}

#wrapper-footer {
	background: url('img/footer-bg.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
#wrapper-footer .row { background-color: transparent!important; }

.page-template-template-no-header .custom-header-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1;
}

.page-template-template-no-header .upper-site-navbar,
.page-template-template-no-header .site-custom-navbar {
	background-color: transparent!important;
}

body.admin-bar.page-template-template-no-header .custom-header-wrapper  { top: 32px; }
/* sticky navigation top offcet mobile */
@media screen and (max-width: 782px) {
	body.admin-bar.page-template-template-no-header .custom-header-wrapper  { top: 46px; }
}

figure.wp-block-image.border img, .wp-block-image.border,
.editor-styles-wrapper figure.wp-block-image.border img {
    margin-bottom: 0;
}
figure[data-type="core/image"] img { display: inline-block; }

.border-thick {
	border-width: 4px!important;
}


.has-primary-background-color {
    border-color: #cc7337;
}

/* cf7 fixes */
.wpcf7 form .wpcf7-response-output { margin: 0.5em 0.5em 2em; }
span.ajax-loader { display: none!important; }


/* ----------------------------------------- */
/*               Frames lines                */
/* ----------------------------------------- */

.frame-top-left {
	position: relative;
	border-right: 4px solid #cc7337;
	margin-top: 3rem;
}
.frame-top-left:after {
	position: absolute;
	content: "";
	background-color: #cc7337;
	top: 0!important;
	left: 50%!important;
	width: 50%;
	height: 4px;
	box-shadow: none!important;
	border-radius: 0;
}
.frame-top-left:before {
	position: absolute;
	content: "";
	background-color: #cc7337;
	top: -6rem!important;
	right: 50%!important;
	width: 4px;
	height: calc(6rem + 4px);
	border-radius: 0;
}

.frame-middle-right {
	border-top: 4px solid #cc7337;
	border-right: 4px solid #cc7337;
}
.frame-middle-left {
	border-top: 4px solid #cc7337;
	border-left: 4px solid #cc7337;
}

.frame-bottom-left {
	position: relative;
	border-top: 4px solid #cc7337;
	border-left: 4px solid #cc7337;
	margin-bottom: 3rem;
}
.frame-bottom-left:before {
	position: absolute;
	content: "";
	background-color: #cc7337;
	top: calc(100% - 4px)!important;
	left: 0!important;
	width: 50%;
	height: 4px;
	border-radius: 0;
}
.frame-bottom-left:after {
	position: absolute;
	content: "";
	background-color: #cc7337;
	top: calc(100% - 4px)!important;
	left: 50%!important;
	width: 4px;
	bottom: calc( -1*(3rem + 8px) )!important;
	box-shadow: none!important;
	border-radius: 0;
}

.frame-middle-left-before-highlighted {
	position: relative;
	border-top: 4px solid #cc7337;
	border-left: 4px solid #cc7337;
	border-radius: 0;
}
.frame-middle-left-before-highlighted:after {
	position: absolute;
	content: "";
	background-color: #cc7337;
	top: calc(100% - 4px)!important;
	left: 0!important;
	width: 50%;
	height: 4px;
	box-shadow: none!important;
	border-radius: 0;
}

.frame-highlighted {
	position: relative;
	border: 4px solid #cc7337;
	margin-top: 3rem;
	margin-bottom: 3rem;
	background-color: white;
}
.frame-highlighted:before {
	position: absolute;
	content: "";
	background-color: #cc7337;
	top: calc( -1*(3rem + 8px) );
	left: 50%;
	width: 4px;
	bottom: 100%;
	border-radius: 0;
}
.frame-highlighted:after {
	position: absolute;
	content: "";
	background-color: #cc7337;
	top: 100%!important;
	left: 50%!important;
	width: 4px;
	bottom: calc( -1*(3rem + 8px) );
	box-shadow: none!important;
	border-radius: 0;
}

.white-icon-img {
	background-color: white;
	padding: 1rem;
	display: inline-block!important;
}

.top-line-connect {
	position: relative;
	margin-top: 3rem;
	border-left: 4px solid transparent;
}
.top-line-connect:after {
	position: absolute;
	content: "";
	background-color: #cc7337;
	top: calc( -1*(3rem + 8px) )!important;
	left: 50%!important;
	width: 4px;
	bottom: 100%!important;
	box-shadow: none!important;
	border-radius: 0;
}
.top-line-connect:before {
	position: absolute;
	content: "";
	background-color: #cc7337;
	top: 0!important;
	left: calc( 50% - 5rem )!important;
	width: 10rem;
	height: 4px;
	border-radius: 0;
}

/* custom select highlight for wrappers block as we cant use abter */
div.is-selected[data-type="core/group"]:after {
	box-shadow: none!important;
}
div.is-selected[data-type="core/group"] {
	border-radius: 2px!important;
	box-shadow: 0 0 0px 3px #9c27b0;
}