* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
@font-face {
    font-family: 'DIN Pro Cond';
    src: url('DinPro/DINPro-CondensedBold.woff2') format('woff2'),
        url('DinPro/DINPro-CondensedBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}



@font-face {
	font-family: 'Arial';
	src: local('Arial'), url('./Arial/Arial.woff') format('woff');
}

@font-face {
    font-family: 'Cygre';
    src: url('Cygre/Cygre-Regular.woff2') format('woff2'),
        url('Cygre/Cygre-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


/* mobiles zdes! */
/* mobiles zdes! */
@media (max-width: 767px) and (orientation: portrait) {
	.mobile-only {
		display: block !important;
	}
	.desktop-only {
		display: none !important;
	}
		body{
			height: 100vh;
			font-family: 'Arial', sans-serif;
			display: flex;
			flex-direction: column;
			align-items: stretch;
			justify-content: flex-start;
			width: 100%;
		}
		header{
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			align-items: center;
			justify-content: space-between;
		}
		#logo{
			flex-basis: 23%;
			margin: 5vw 3.5%;
		}
		img{
			max-width: 100%;
			border: none;
			height: auto;
		}
		
		#pagewrapper{
			width: 100%;
			height: 100vh;
			font-family: 'Arial', sans-serif;
			display: flex;
			flex-direction: column;
			align-items: stretch;
			justify-content: flex-start;
		}

		.address{
			margin: 0 4%;
			font-size: 4vw;
			width: 50%;
			text-align: right;
			float: right;
			font-family: 'Cygre';
			font-weight: 400;
		}

		.seredka{
			display: flex;
			flex-direction: column;
			width: 100%;
			height: 40vh;
			align-items: flex-start;
			justify-content: end;
			margin-bottom: 4vw;
		}

		.seredka h1{
			font-family: 'DIN Pro Cond',  sans-serif;
			font-weight: 600;
			margin-left: 3.5%;
			text-transform: uppercase;
			font-size: 7vw;
			line-height: 100%;
		}

		.poyasnalka{
			display: flex;
			flex-direction: column;
			flex-wrap: wrap;
			align-items: flex-start;
			justify-content: space-between;
		}
		.leftP{
			margin: 5vw 4%;
			font-size: 4vw;
			font-weight: normal;
			font-family: 'Cygre';
			color: #000;
			line-height: 110%;
			width: 80%;
		}
		#linksOut{
			display: none;
		}

		#linksOutMobile{
			display: flex;
			flex-direction: column;
			margin: 0;
			justify-content: flex-start;
			height: 60vh;
			width: 100%;
		}
		#linksOutMobile a{
			flex-basis: 100%;
			text-decoration: none;
			position: relative;
			transition: 0.4s opacity  ease-in-out;
			height: 10vh;
			overflow: hidden;
			display: block;
		}
		#linksOutMobile a picture, #linksOutMobile a img{
			width: 100%;
			height: auto;
		}


		.ImageTitle{
			display: block;
			position: absolute;
			top: 50%;
			left: 5%;
			transform: translateY(-50%);
			font-size: 4vw;
			font-family: 'Cygre', sans-serif;
			margin: 0;
			z-index: 2; /* Чтобы текст был поверх изображения */
			pointer-events: none; /* Чтобы не блокировать клик по ссылке */
		}
		.ColorB{
			color: #000;
		}
		.ColorW{
			color: #fff;
		}

		.rightP{
			font-family: 'Cygre', sans-serif;
			margin-left: 4%;
			font-size: 4.5vw;
			background: #c2162a;
			color: white;
			text-decoration: none;
			padding: 2vw 3vw;
			border-radius: 1.5vw;
			width: 55%;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			align-items: center;
			justify-content: space-evenly;
			margin-bottom: 2vw;
		}
		.BlinkingDot{
			font-size: 2vw;
			animation: pulse 2s infinite;
			margin: 0;
			box-sizing: border-box;
			transform-origin: center;
		}
		.phoneItself{
			margin: 0;
			 white-space: nowrap;
			 position: relative;
		}


		@keyframes pulse {
			0% { transform: scale(1); }
			50% { transform: scale(2.6666); }
			100% { transform: scale(1); }
		}		
}
@media (max-width: 1024px) and (orientation: landscape) {
		.mobile-only {
	display: none !important;
	}
	.desktop-only {
		display: block !important;
	}
	body{
		height: 100vh;
		font-family: 'Arial', sans-serif;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
	}
	header{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		height: 20vh;
		position: relative;
		float: left;
	}
	#logo{
		flex-basis: 8%;
		margin: 2.5vw 3.5%;
	}
	img{
		max-width: 100%;
		border: none;
	}
	#logo img{
		width: 100%;
		height: auto !important;
	}

	.address{
		margin: 0 4%;
		font-size: 1.6vw;
	}

	.seredka{
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	.seredka h1{
		font-family: 'DIN Pro Cond',  sans-serif;
		font-weight: 600;
		margin-left: 3.5%;
		text-transform: uppercase;
		font-size: 2.6vw;
		margin-top: 0;
		transform: scale(1, 1.3);
		line-height: 100%;
	}

	.poyasnalka{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
	}
	.leftP{
		margin: 2vw 4%;
		font-size: 1.4vw;
		font-weight: normal;
	}

	#linksOut{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin: 0;
		align-items: stretch;
		justify-content: start;
		position: relative;
		height: 52vh;
		overflow: hidden;
	}
	#linksOut a{
		flex-basis: 20%;
		text-decoration: none;
		position: relative;
		transition: 0.4s opacity  ease-in-out;
		
	}
	#linksOut a::before {
		opacity: 0;
		
	}
	#linksOut a:hover::before {
	 
	  content: '';
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  background: linear-gradient(
		to bottom, 
		rgba(194, 25, 44, 1) 0%, 
		rgba(194, 25, 44, 0.4) 50%,
		rgba(0, 0, 0, 0) 100%
	  );
	  z-index: 1;
	  pointer-events: none; 
	  opacity: 1;
	  transition: opacity 0.3s ease-in-out;
	}

	#linksOut a:hover .ImageTitle{
		color: #fff !important;
		z-index: 10;
	}

	#linksOut a img{
		width: 100%;
	}
	#linksOutMobile{
		display: none;
	}

	.ImageTitle{
		display: block;
		position: absolute;
		top: 4vw;
		left: 20%;
		font-size: 1.4vw;
		font-family: 'Cygre', sans-serif;
	}
	.ColorB{
		color: #000;
	}
	.ColorW{
		color: #fff;
	}

	.rightP{
		font-family: 'Cygre', sans-serif;
		margin-right: 4%;
		font-size: 2vw;
		background: #c2162a;
		color: white;
		text-decoration: none;
		padding: 0.5vw 3vw;
		border-radius: 0.4vw;
		width: 34%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-evenly;
	}
	.BlinkingDot{
		font-size: 1vw;
		margin-left: 1vw;
		animation: pulse 2s infinite;
		margin-top: 0.1vw;
	}
	.phoneItself{
		margin-right: 2vw;
	}


	@keyframes pulse {
	0% { transform: scale(1); }
	50% { transform: scale(1.6); }
	100% { transform: scale(1); }
	}
		
	
}
/* tablets zdes! */
@media (min-width: 768px) and (max-width: 1024px) {
	.mobile-only {
	display: none !important;
	}
	.desktop-only {
		display: block !important;
	}
	body{
		height: 100vh;
		font-family: 'Arial', sans-serif;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		justify-content: space-between;
		overflow: hidden;
	}
	header{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		height: 20vh;
	}
	#logo{
		flex-basis: 20%;
		margin: 2.5vw 3.5%;
	}
	img{
		max-width: 100%;
		border: none;
	}
	#logo img{
		width: 100%;
		height: auto;
	}

	.address{
		margin: 2vw 4%;
		font-size: 2.4vw;
	}

	.seredka{
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 34vh;
		margin-top: 5vh;
	}

	.seredka h1{
		font-family: 'DIN Pro Cond',  sans-serif;
		font-weight: 600;
		margin-left: 3.5%;
		text-transform: uppercase;
		font-size: 5vw;
		margin-top: 0;
		line-height: 100%;
	}

	.poyasnalka{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
	}
	.leftP{
		margin: 2vw 4%;
		font-size: 2.2vw;
		font-weight: normal;
	}

	#linksOut{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin: 0;
		align-items: stretch;
		justify-content: start;
		position: relative;
		height: 55vh;
		overflow: hidden;
	}
	#linksOut a{
		flex-basis: 20%;
		text-decoration: none;
		position: relative;
		transition: 0.4s opacity  ease-in-out;
		
	}
	#linksOut a::before {
		opacity: 0;
		
	}
	#linksOut a:hover::before {
	 
	  content: '';
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  background: linear-gradient(
		to bottom, 
		rgba(194, 25, 44, 1) 0%, 
		rgba(194, 25, 44, 0.4) 50%,
		rgba(0, 0, 0, 0) 100%
	  );
	  z-index: 1;
	  pointer-events: none; 
	  opacity: 1;
	  transition: opacity 0.3s ease-in-out;
	}

	#linksOut a:hover .ImageTitle{
		color: #fff !important;
		z-index: 10;
	}

	#linksOut a img{
		width: 100%;
	}
	#linksOutMobile{
		display: none;
	}

	.ImageTitle{
		display: block;
		position: absolute;
		top: 4vw;
		left: 15%;
		font-size: 2vw;
		font-family: 'Cygre', sans-serif;
	}
	.ColorB{
		color: #000;
	}
	.ColorW{
		color: #fff;
	}

	.rightP{
		font-family: 'Cygre', sans-serif;
		margin-right: 4%;
		font-size: 2.5vw;
		background: #c2162a;
		color: white;
		text-decoration: none;
		padding: 2vw 3vw;
		border-radius: 0.4vw;
		width: 33%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-evenly;
	}
	.BlinkingDot{
		font-size: 1vw;
		margin-left: 1vw;
		animation: pulse 2s infinite;
		margin-top: 0.1vw;
	}
	.phoneItself{
		margin-right: 2vw;
	}


	@keyframes pulse {
	0% { transform: scale(1); }
	50% { transform: scale(1.3333); }
	100% { transform: scale(1); }
	}
	
}

/* desktop PCs zdes! */

@media (min-width: 1024px) {
	.mobile-only {
	display: none !important;
	}
	.desktop-only {
		display: block !important;
	}
	body{
		font-family: 'Arial', sans-serif;
		background: #efefef;
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	#pagewrapper{
		max-width: 1440px;
		margin: auto;
		background: #fff;
		position: relative;
	}
	header{
		width: 100%;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-start;
		justify-content: space-between;
		
	}
	#logo{
		width: 112px;
		margin-top:39.5px;
		margin-left: 50px;
	}
	#logo img{
		width: 112px;
		height: 55px;
	}
	img{
		max-width: 100%;
	}

	.address{
		margin: 26px 50px 0;
		font-size: 16px;
		font-family: 'Cygre', sans-serif;
	}

	.seredka{
		display: flex;
		position: relative;
		width: 100%;
		margin-top: 112px;
		flex-wrap: wrap;
	}
	.seredka h1{
		font-family: 'DIN Pro Cond',  sans-serif;
		font-weight: 600;
		margin-left: 50px;
		text-transform: uppercase;
		font-size: 48px;
		margin-top: 0;
		line-height: 100%;
		display: block;
		position: relative;
		float: left;
		width: calc(100% - 50px);
		clear: both;
	}

	.poyasnalka{
		display: block;
		position: relative;
		float: left;
		width: 100%;
	}
	.leftP{
		margin: 20px 50px 0;
		font-size: 16px;
		font-weight: 400;
		font-family: 'Cygre', 'Arial', sans-serif;
		display: block;
		position: relative;
		float: left;
	}

	#linksOut{
		display: block;
		position: relative;
		width: 100%;
		height: 500px;
		margin-top: 20px;
	}
	#linksOut a{
		width: 20%;
		display: block;
		position: relative;
		float: left;
		text-decoration: none;
		position: relative;
		transition: 0.4s opacity  ease-in-out;
		
	}
	#linksOut a::before {
		opacity: 0;
		
	}
	#linksOut a:hover::before {
	 
	  content: '';
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  background: linear-gradient(
		to bottom, 
		rgba(194, 25, 44, 1) 0%, 
		rgba(194, 25, 44, 0.4) 50%,
		rgba(0, 0, 0, 0) 100%
	  );
	  z-index: 1;
	  pointer-events: none; 
	  opacity: 1;
	  transition: opacity 0.3s ease-in-out;
	}

	#linksOut a:hover .ImageTitle{
		color: #fff !important;
		z-index: 10;
	}

	#linksOut a img{
		width: 100%;
	}
	#linksOutMobile{
		display: none;
	}

	.ImageTitle{
		display: block;
		position: absolute;
		top: 50px;
		left: 50px;
		font-size: 16px;
		font-family: 'Cygre', sans-serif;
	}
	.ColorB{
		color: #000;
	}
	.ColorW{
		color: #fff;
	}

	.rightP{
		font-family: 'Cygre', sans-serif;
		margin-right: 50px;
		font-size: 18px;
		background: #c2162a;
		color: white;
		text-decoration: none;
		padding: 8px 86px;
		border-radius: 5px;
		width: 335px;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		font-weight: 400;
		float: right;
		margin-top: 24px;
	}
	.BlinkingDot{
		font-size: 10px;
		animation: pulse 2s infinite;
	}
	.phoneItself{
		width: 140px;
	}


	@keyframes pulse {
	0% { transform: scale(1); }
	50% { transform: scale(1.3333); }
	100% { transform: scale(1); }
	}
}