/*
Theme Name: baer4
Theme URI: http://baer.com.ua/
Project Name: baer.com.ua
Description: Догляд за могилами у Сумах та Києві. Якщо немає можливості самостійно приїжджати на цвинтар з лопатами, мішком гравію та землі, живете в іншій частині міста або за кордоном, і немає фізичної можливості приїхати на цвинтар прибрати сміття та бур'яни, посадити квіти, пофарбувати огорожу, дрібний ремонт. Залишіть заявку на сайті та у призначений час все буде зроблено з належною повагою та якістю.
Author: Oleksandr Matsenko, admin@tria.sumy.ua
Author URI: http://tria.sumy.ua/
Version: 3.1
File Name: style.css
Tags: light, responsive-layout, flexible-header, accessibility-ready, custom-background, custom-header, custom-menu, featured-image-header, featured-images, microformats, post-formats, theme-options, threaded-comments, translation-ready
*/

/* ============================================
 Fonts + icon
============================================ */	

/* font-family: 'Roboto', sans-serif; */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500&display=swap');


/* h1  //  font-family: 'Lora', serif;  */
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;1,600&display=swap');

/* h2 // font-family: 'Open Sans', sans-serif; */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=latin,cyrillic-ext');

 
/* icon too header */ 
@import url("../fonts/font-awesome.min.css");

/* ============================================
 Basic
============================================ */	 
*{
	box-sizing: border-box;
	outline: none;
}
body{
	transition: border-box;
}


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, u, i, center,
dl, dt, dd, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	scroll-behavior: smooth;
  box-sizing: border-box;
}
ul {
	margin-left: 0;
	padding-left: 0;	
}

a { color: #457896; text-decoration:underline;}
a:hover { color: #000; text-decoration:underline;}
a img { border:none; }

.fix-max { 	
	max-width: 1240px;	
	margin: 0 auto; 
	display: block;
	padding: 0 18px;
}
.fix { 	
	max-width: 980px;	
	margin: 0 auto; 
	display: block;
	padding: 0 14px;
}
.fix-min { 	
	max-width: 660px;	
	margin: 0 auto; 
	display: block;
	padding: 0 10px;

}
.clr 			{ clear: both; }
.fl 			{ float: left; }
.fr 			{ float: right; }
.mb-30 		{ margin-bottom: 30px;}
.mb-60 		{ margin-bottom: 60px;}
.mb-90 		{ margin-bottom: 90px;}
.pt-10 		{ padding-top: 10px;}
.pt-30 		{ padding-top: 30px;}
.pt-60 		{ padding-top: 60px;}
.pb-30 		{ padding-bottom: 30px;}
.pb-60 		{ padding-bottom: 60px;}
.mt-10 		{ margin-top: 10px;}
.mt-30 		{ margin-top: 30px;}
.mt-60 		{ margin-top: 60px;}
.ta-l 		{	text-align: left;}
.ta-r 		{ text-align: right;}
.ta-c 		{	text-align: center;}
.poz-a 		{ position: absolute;}
.poz-r 		{	position: relative;}
.d-flex 	{ display: flex !important; }
.d-cont 	{ display: contents !important; }
.bg-w3			{ 
	background: rgba(255,255,255,0.8); 
	padding: 1%;
}

body { 
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0; 
  overflow-x: hidden;
  overflow-y: scroll;
	list-style-position:inside;	
	color: #fff;
	font-size: 16px;
	line-height: 20px;
	font-family: 'Roboto', sans-serif;
	background: #232323;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: 5px 5px 5px -5px rgba(34, 60, 80, 0.2) inset;
  /* background-color: #f9f9fd; */
  background-color: #232323;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: linear-gradient(180deg, #ddd, #000);
}


/* ============================================
 Header
============================================ */	 
#header { 
	width: 100%; 
	display: block; 
	margin: 0;
	background-position: 100% 200px ;
	background-size: 45% auto; 
	background-repeat: no-repeat;
	background-image: url('../img/heder-bg.webp');
}

/* --- header-yaz --- */
.header-yaz {
	margin: 20px auto;
	width: fit-content;
	display: block;
	background: #f2f2f2;
	padding: 20px 30px;
	z-index: 888;
	border-radius: 10px;
	box-shadow: 0 0 10px #bebebe;

}
.header-yaz ul {
	list-style: none;
	margin: 0;
	padding: 0;
	padding-inline-start: 0;
}
.header-yaz li {
	display: block;
	text-align: center;
	padding: 10px;
	line-height: 20px;
	float: left;
	color: #777 !important;
}
.header-yaz span {
	color: #777 !important;
	padding-bottom: 10px;
	display: block;
}


.header-yaz li a {
	padding: 10px;
	text-align: center;
	color: #a50f0f; 
}
.header-yaz li a:hover {
	border-radius: 4px;
	background: #a50f0f;
	color: #fff;
	transition: .5s ease-in-out;
}


/* --- white-line --- */
.white-line {
	margin: 0;
	padding: 0 0 30px;
}
.header-cell {
	float: left;
	width: 32%;
	padding: 30px;
	color: #fff;
	text-align: center;
}
.header-cell span {
	padding-right: 20px;
}
.header-cell p {
	margin-top: 10px;
}
.header-cell a {
	font-size: 20px;
	color: #e34747;
	font-weight: 300;
}


/* header-logo */
#header-logo {
	z-index: 999;
}
#header-logo a {
	display: block;
	width: 124px;
	height: 80px;
	background: url(../img/header-logo.png) no-repeat top center;
	margin: 0 auto;
	padding: 0;
	z-index: 999;
} 
#header-logo a span {
	display: block;
}
#header-logo a:hover {
	opacity: 0.8;
	transition: .2s ease-in-out;
}




.slogan {
	width: 55%;
	margin: 20px 0 30px 0;
	padding: 20px 40px 10px 40px ;
}  


.slogan-h3 {
	margin-top: 60px;
	max-width: 600px;
	color: #fff;
	font-size: 44px;
	line-height: 44px;
	font-weight: 500;
	font-family: 'Lora', serif;
	text-transform: uppercase;
}
.slogan p {
	font-weight: 100 !important;
	color: #fff;
	padding-top: 20px;
	font-family: 'Open Sans', sans-serif;
}



/* callnowbutton */
.callnowbutton {
	/* margin-top: 20px; */
	display: inline-block;
	user-select: none;
	padding: 4px 18px;
	border-radius: 14px;
	border: 3px solid #e34747;
	outline: none;
	transition: 0.4s;
}
a.callnowbutton {
	font-size: 17px;
	color: #fff;
	padding: 10px 40px;
	text-decoration: none;
}
.callnowbutton:hover {
	background: #fdd432 !important;
	color: #000;
	border-radius: 14px;
	text-decoration: none;
	transition: 0.4s;
}



@keyframes color {
  0% {
    background: #33cccc;
  }
  20% {
    background: #33cc36;
  }
  40% {
    background: #b8cc33;
  }
  60% {
    background: #fcca00;
  }
  80% {
    background: #33cc36;
  }
  100% {
    background: #33cccc;
  }
}


.callnowbutton2 {
	margin-top: 20px;
	display: inline-block;
	user-select: none;
	padding: 4px 18px;
	border-radius: 14px;
	border-bottom: 2px solid #512712;
	outline: none;
	background: #36bb10;
  animation: color 9s infinite linear;
}
a.callnowbutton2 {
	font-size: 17px;
	color: #fff;
	padding: 10px 60px;
	text-decoration: none;
	transition: 0.4s;
}
.callnowbutton2:hover {
	background: #fdd432 !important;
	color: #000;
	text-decoration: none;
	transition: 0.4s;
}


.slogan-h4 {
	margin-top: 60px;
	margin-bottom: 60px;
	max-width: 600px;
	color: #de8d57;
	font-size: 30px;
	line-height: 30px;
	font-weight: 500;
	font-family: 'Lora', serif;
}



/* --- mams --- */
.wrap-block-mams {
	position: relative;
	text-align: center;	
}  
.wrap-block-childr {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: center;
	align-content: center;
}  



.price-cell {
	background: #2d2d2d;
	border-radius: 14px;
	margin: 30px 3% 30px 0;
	width: 29%;
	float: left;
	display: block;
	padding: 30px 20px 20px;
	position: relative;
	font-weight: 100;
	text-align: left;
}
.price-cell span {
	display: block;
	position: absolute;
	top: -20px;
	font-size: 46px;
	font-weight: 800;
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: #de8d57;
	color: transparent;
	font-family: 'Open Sans', sans-serif;
}




/* ------------ ---------------------------------
	001 // section 1 // Про нас
------------------------------------------------ */
#w-what {
	z-index: 1;
	position: relative;
	padding: 60px 0 60px;
	margin: 0 auto 0;
	width: 100%;
	background-color: #2d2d2d;
	display: table;
	table-layout: fixed;
}

.wf-img {
	display: table-cell;
	width: 50%;
	margin: 0;
	background-position: top right;
	background-size: cover; 
	background-repeat: no-repeat;
	background-image: url('../img/w-what-bg.jpg');	
}	

.wf-txt {
	display: table-cell;
	width: 50%;
	margin: 0;
	padding: 90px;
}
.wf-txt h1 {
	font-family: 'Lora', serif;
	color: #da8b56;
	font-size: 40px;
	font-weight: 100;
	line-height: 40px;
	padding: 40px 0 0 0;
	margin-bottom: 30px;
	margin-bottom: 20px;	
}
.wf-txt p {
	padding-top: 10px;
}







/* ------------ ---------------------------------
	002 //  wrapper // Ресурси
------------------------------------------------ */
#w-stages {
	padding: 60px 0 140px;
	margin: 0 auto 0;
	width: 100%;
	display: block;
}

#w-stages h1 {
	text-align: center;
	font-size: 40px;
	padding: 40px 0 0 0;
	min-height: 70px;
	font-family: 'Lora', serif;
	color: #de8d57;
	margin-top: 30px;
	margin-bottom: 30px;	
}
#w-stages p {
	color: #fff;
}


/* */
.wa-icon {
	margin-top: 40px;
	list-style: none;
  display: flex;
  flex-wrap: wrap;
}

.wb-icon {
	background: #2d2d2d;
	border-radius: 14px;
	padding: 30px 20px 20px;
	display: block;
	position: relative;
	font-weight: 100;
	text-align: left;
}
.wbi-1 {
	margin: 60px 3% 0 0;
	width: 20%;
}

.wbi-right {
	float: right;
	margin: 30px 3% 30px 0;
	width: 70%;
}

.wbi-2 {
	float: left;
	margin: 30px 3% 30px 0;
	width: 54%;
}
.wbi-3 {
	float: left;
	margin: 30px 3% 30px 0;
	width: 40%;
}

.wbi-4 {
	float: left;
	margin: 30px 3% 30px 0;
	width: 40%;
}
.wbi-5 {
	float: left;
	margin: 30px 3% 30px 0;
	width: 54%;
}

.wbi-1 h2, .wbi-2 h2, .wbi-3 h2, .wbi-4 h2, .wbi-5 h2 {
	display: block;
	position: absolute;
	top: -10px;
	font-size: 70px;
	font-weight: 800;
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: #d58854;
	color: transparent;
	font-family: 'Open Sans', sans-serif;
}
.wbi-1 h3, .wbi-2 h3, .wbi-3 h3, .wbi-4 h3, .wbi-5 h3 {
	font-weight: 600;
	font-size: 20px;
	margin-top: 20px;
	margin-bottom: 10px;
}
.wbi-1 p, .wbi-2, .wbi-3, .wbi-4, .wbi-5 {
	font-size: 15px;
	line-height: 17px; 
	text-align: left;
}



/* ============================================
 wrapper 
============================================ */	
#wrapper { 
	width: 100%;
	padding: 30px 0 60px;
}

#wrapper h1 { 
	font-size: 40px;
	line-height: 40px;
	padding: 40px 0 0 40px;
	font-family: 'Lora', serif;
	margin-bottom: 30px;
	color: #de8d57;
	margin-bottom: 60px;
	text-align: center;
}



/* keysys */
.c-block-txt h2 { 
	color: #fff;
	font-size: 30px;
	padding: 20px 0 20px 0px;
	font-family: 'Lora', serif;
	margin-bottom: 20px;	
}


.c-block-txt {
	width: 48%;
	margin: 1%;
	padding-left: 20px;
	padding-top: 10px;
}

.resurs-price {
	padding-top: 12px;
	background: #2d2d2d;
	padding: 10px 10px 30px;
	border-radius: 12px;
	max-width: 360px;
}
.resurs-price-block {
	float: left;
	width: 50%;
	padding-top: 12px;
	padding: 0 20px;
}


.resurs-price h3 {
	color: #db8b56;
	font-size: 19px;
	padding-top: 12px;
	margin-top: 20px;
	margin-bottom: 10px;
	border-bottom: 1px dotted #db8b56;
}


.c-block-pic {
	width: 48%;
	margin: 1%;
	display: block;
}
.c-block-pic img, .c-block-pic2 img {
	width: 100%;
	height: auto;
	border-radius: 10px;
	box-shadow: 0 0 15px #bebebe;
}

.c-block:hover, .c-block2:hover {
  transform: scale(1.05); 
	transition: 0.5s;
}


.c-ban img { 
	width: 100%;
	height: auto;
}
.c-ban a:hover { opacity: 0.8; }





	
/* ----	#content ----  */
#content {
	float: left;
	width: 68%; 
	margin-top: 40px;
	padding-right: 30px; 
	padding-bottom: 40px; 
}
#content h1 {
	color: #777;
	font-size: 40px;
	padding: 40px 0 0 80px;
	min-height: 70px;
	font-family: 'Lora', serif;
	background: url('../img/wa-txt-h1.png') top left no-repeat;
	margin-bottom: 30px;
}
#content p {
	padding: 10px 0 4px;
	font-weight: 300;
}
#content h2 {
	padding: 0px 0 10px;
	font-size: 18px;
	line-height: 20px;
	color: #3d3f44;
	font-family: 'Lora', serif;
}
















/* ------------ ---------------------------------
	003 // w-portfolio // Співробітництво
------------------------------------------------ */
#w-portfolio {
	padding: 60px 0 60px;
}

#w-portfolio h2 {
	font-size: 40px;
	line-height: 40px;
	padding: 40px 0 0 0;
	font-family: 'Lora', serif;
	margin-bottom: 30px;
	color: #de8d57;
	margin-bottom: 20px;	
}

.textcols {
	column-width: 44%;
	column-count: 2;
	column-gap: 2%;
}
 
.textcols p {
	padding: 0;
	margin: 0 0 15px 0;
}


/* --- gallery --- */
.wg-4 {
	float: left;
	margin: 20;
	width: 24%;
	height: auto;
	margin: 0;
	padding: 0;
}
.wg-4 img {
	padding: 0;
	margin: 0;
	/* filter: opacity(1);  */
  filter: grayscale(0.8);
	width: 100%;
	height: auto;
}
a.wg-4 img {
	display: flex;
	padding: 0;
	margin: 0;
}

.wg-4 img:hover {
	filter: opacity(0.8); 
}







/* ============================================
	004 // w-price //  Контакти
============================================ */	
#w-price {
	margin: 60px 0;
}
.w-price-sidebar {
	width: 40%;
	float: left;
	padding-right: 30px;
}
.w-price-content {
	width: 60%;
	float: right;
} 
.w-price-content img {
	max-width: 90px;
	display: block;
	float: left;
	padding-right: 30px;
}
.w-price-content p {
	margin-top: 10px;
}
.w-price-content span {
	margin-left: 20px;
	font-size: 14px;
	line-height: 17px;
	margin-top: 6px;
	color: #797877;	
}

#w-price h2 {
	font-size: 30px;
	line-height: 30px;
	padding: 40px 0 0 0;
	font-family: 'Lora', serif;
	margin-bottom: 30px;
	margin-bottom: 20px;	
	color: #de8d57;
}




/* ============================================
	footer
============================================ */	
footer { 
	margin: 0;
}
#footer {  
	background: #000;
	width: 100%; 
	padding: 0; 
	min-height: 300px;
	text-align: left;
	font-weight: 300;
	padding-top: 60px;
	
}

#footer a { color: #fff; text-decoration: none; }
#footer a:hover { color: #6f7e88;}

.hot-line {
	text-align: center;
	font-size: 34px;
	line-height: 34px;
	color: #fff;
	font-weight: 400;
}
.hot-line a {
	font-size: 30px;
	line-height: 34px;
	color: #fff;
	font-weight: 100;
}

.blink {
  -webkit-animation: blink 1s linear infinite;
  animation: blink 1s linear infinite;
}
@-webkit-keyframes blink {
  100% { color: rgba(34, 34, 34, 0); }
}
@keyframes blink {
  100% { color: rgba(34, 34, 34, 0); }
}	



.footer-cell {
	float: left;
	margin-top: 30px;
	width: 32%;
	padding: 30px;
	color: #fff;
}
.footer-cell h2 {
	color: #d88159;
	padding-top: 14px;
	font-size: 25px;
	line-height: 40px;
	font-family: 'Lora', serif;	
	font-weight: 500;
	margin-bottom: 10px;
}

.footer-cell p { 
	display: flex;
	text-align: left;
}

.footer-cell a {
	float: left;
	padding-left: 0;
	padding-top: 6px;
	text-decoration: none;
}
.footer-cell span { 
	margin-left: 20px;
	font-size: 14px;
	line-height: 17px;
	margin-top: 6px;
	color: #797877;
}


/* up-sprite-block */
.up-sprite-block {
	margin-top: 30px;
	color: #5d80a1;
	font-size: 15px; 
}
.up-sprite-block a {
	display: contents;
	color: #000;
	background: rgba(255,255,255,0.2);
	padding: 2px 5px;	
}
.up-sprite-block i {
	text-align: center;
	width: 18px !important;
}
.up-sprite-block a:hover {
	color: #fff !important;
	background: rgba(255,255,255,0.5);
}
 
#copyright { 
	width: 100%;
	margin: 40px auto 0;
	color: #9e9e9e;
	text-align: center;
	font-size: 12px;  
	font-weight: 300;
	min-height: 60px; 
	padding: 10px 0 0 0;
}