/*

-- Watson-Energo
template: katalog

Powered by Lemur Digital
hello@lemur.digital
https://lemur.digital

*/

.screen1 {
	background: #f1f1f1;
	padding: 140px 0;
}

@media all and (max-width: 894px) {
	.screen1 {
		padding: 112px 0;
	}
}

.screen1 .search {
	width: 100%;
	margin: 0 auto;
	margin-bottom: 60px;
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

@media all and (max-width: 1199px) {
	.screen1 .search {
		max-width: 700px;
	}
}

@media all and (max-width: 894px) {
	.screen1 .search {
		margin-bottom: 48px;
	}
}

.screen1 .search input {
	width: -webkit-calc(100% - 200px);
	width:      -o-calc(100% - 200px);
	width:         calc(100% - 200px);
	border: 2px solid #00543d;
	margin: 0;
	box-sizing: border-box;
	color: #434343;
}

@media all and (max-width: 894px) {
	.screen1 .search input {
		width: 100%;
		margin-bottom: 15px;
	}
}

.screen1 .search input::-webkit-input-placeholder {color: #949698;}
.screen1 .search input::-moz-placeholder {color: #949698;}
.screen1 .search input:-moz-placeholder {color: #949698;}
.screen1 .search input:-ms-input-placeholder {color: #949698;}

.screen1 .search .close {
	width: 24px;
	height: 24px;
	position: absolute;
	right: 25px;
	top: 15.5px;
	cursor: pointer;
	opacity: 1;
}

.screen1 .search .close.hidden {
	opacity: 0;
}

.screen1 .search .close i {
	display: block;
	position: absolute;
	width: 32px;
	height: 2px;
	background-color: #00543d;
	top: 11px;
	left: -4px
}

.screen1 .search .close:hover i {
	background-color: #e10020;
}

.screen1 .search .close i:nth-child(1),
.screen1 .search .close i:nth-child(2),
.screen1 .search .close.hidden {
	-webkit-transition: all ease-out 0.2s;
	-moz-transition:    all ease-out 0.2s;
	-o-transition:      all ease-out 0.2s;
	transition:         all ease-out 0.2s;
}

.screen1 .search .close:hover i:nth-child(1),
.screen1 .search .close:hover i:nth-child(2) {
	-webkit-transition: all ease-in 0.2s;
	-moz-transition:    all ease-in 0.2s;
	-o-transition:      all ease-in 0.2s;
	transition:         all ease-in 0.2s;
}

.screen1 .search .close i:nth-child(1) {
	-moz-transform: 		rotate(45deg);
	-ms-transform: 			rotate(45deg);
	-webkit-transform: 		rotate(45deg);
	-o-transform: 			rotate(45deg);
	transform: 				rotate(45deg);
}

.screen1 .search .close:hover i:nth-child(1) {
	-moz-transform: 		rotate(135deg);
	-ms-transform: 			rotate(135deg);
	-webkit-transform: 		rotate(135deg);
	-o-transform: 			rotate(135deg);
	transform: 				rotate(135deg);
}

.screen1 .search .close i:nth-child(2) {
	-moz-transform: 		rotate(135deg);
	-ms-transform: 			rotate(135deg);
	-webkit-transform: 		rotate(135deg);
	-o-transform: 			rotate(135deg);
	transform: 				rotate(135deg);
}

.screen1 .search .close:hover i:nth-child(2) {
	-moz-transform: 		rotate(225deg);
	-ms-transform: 			rotate(225deg);
	-webkit-transform: 		rotate(225deg);
	-o-transform: 			rotate(225deg);
	transform: 				rotate(225deg);
}

.screen1 .search .btn {
	width: 200px;
}

.screen1 .flex-bloc {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

@media all and (max-width: 1999px) {
	.screen1 .flex-bloc {
		justify-content: center;
	}
}

.screen1 .left-bloc {
	width: 100%;
}

@media all and (min-width: 1200px) {
	.screen1 .left-bloc {
		min-width: 160px;
		max-width: 220px;
		margin-right: 50px;
	}

	.screen1 .left-bloc .bloc {
		position: sticky;
		top: 134px;
	}
}

.screen1 .left-bloc .bloc h2 {
	font-size: 18px;
	line-height: 27px;
	font-weight: 500;
	text-transform: uppercase;
	margin: 0;
	margin-bottom: 45px;
}

@media all and (max-width: 1199px) {
	.screen1 .left-bloc .bloc h2 {
		display: none;
	}
}

.screen1 .left-bloc .bloc ul {
	margin-bottom: 30px;
}

@media all and (max-width: 1199px) {
	.screen1 .left-bloc .bloc ul {
		margin: 0 auto;
		max-width: 870px;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		margin-bottom: 73px;
	}
}

.screen1 .left-bloc .bloc li a {
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 0;
	color: #00543d;
}

@media all and (max-width: 1199px) {
	.screen1 .left-bloc .bloc li a {
		display: block;
		padding: 3.5px 15px;
		background: #ddd;
		margin: 0 10px 10px 0;
		font-size: 16px;
		line-height: 28px;
		letter-spacing: 0;
	}

	.screen1 .left-bloc .bloc li:last-child a {
		margin-right: 0;
	}

	.screen1 .left-bloc .bloc li a:before {
		content: '#';
	}

	.screen1 .left-bloc .bloc li a.selected {
		background: #00543d;
		color: #ddd;
	}
}

@media all and (min-width: 1200px) {
	.screen1 .left-bloc .bloc li a.selected {
		font-weight: 700;
	}
}

.screen1 .left-bloc .bloc > a {
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 0;
	color: #00543d;
	display: block;
}

.screen1 .left-bloc .bloc a + a {
	margin-top: 10px;
}

.screen1 .right-bloc {
	width: 900px;
}

@media all and (max-width: 1199px) {
	.screen1 .right-bloc {
		width: 100%;
	}
}

.screen1 .right-bloc .blocs {
	width: 900px;
	display: flex;
	flex-wrap: wrap;
	margin: 0 auto;
}

@media all and (min-width: 901px) and (max-width: 1199px) {
	.screen1 .right-bloc .blocs {
		width: 870px;
	}
}

@media all and (min-width: 600px) and (max-width: 900px) {
	.screen1 .right-bloc .blocs {
		width: 570px;
	}
}

@media all and (max-width: 599px) {
	.screen1 .right-bloc .blocs {
		width: 280px;
	}
}

.screen1 .blocs .bloc {
	width: 100%;
	max-width: 280px;
	margin: 0 15px 95px 15px;
}

@media all and (min-width: 600px) and (max-width: 1199px) {
	.screen1 .blocs .bloc {
		max-width: 270px;
	}
}

@media all and (max-width: 894px) {
	.screen1 .blocs .bloc {
		margin: 0 15px 76px 15px;
	}
}

@media all and (min-width: 900px) {
	.screen1 .blocs .bloc:nth-child(3n) {
		margin-right: 0;
	}

	.screen1 .blocs .bloc:nth-child(3n+1) {
		margin-left: 0;
	}

	.screen1 .blocs .bloc:nth-last-child(-n+3) {
		margin-bottom: 0;
	}
}

@media all and (min-width: 600px) and (max-width: 899px) {
	.screen1 .blocs .bloc:nth-child(2n) {
		margin-right: 0;
	}

	.screen1 .blocs .bloc:nth-child(2n+1) {
		margin-left: 0;
	}

	.screen1 .blocs .bloc:nth-last-child(-n+2) {
		margin-bottom: 0;
	}
}

@media all and (max-width: 599px) {
	.screen1 .blocs .bloc {
		margin: 0 0 95px 0;
	}

	.screen1 .blocs .bloc:nth-last-child(1) {
		margin-bottom: 0;
	}
}

.screen1 .blocs .bloc .image {
	width: 100%;
	height: 280px;
	background: #fff;
	margin-bottom: 8px;
	box-sizing: border-box;
	border: 1px solid #dbdbdb;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	padding: 20px;
}

@media all and (min-width: 600px) and (max-width: 1199px) {
	.screen1 .blocs .bloc .image {
		height: 270px;
	}
}

.screen1 .blocs .bloc .image:after {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: rgba(219, 219, 219, 0);
}

.screen1 .blocs .bloc .image img {
	max-width: 100%;
	max-height: 100%;
}

.screen1 .blocs .bloc:hover .image:after {
	background: rgba(219, 219, 219, 0.85);
}

.screen1 .blocs .bloc.top .image:before {
	content: 'Top';
	display: block;
	position: absolute;
	top: -23px;
	right: 0;
	height: 22px;
	background: #008b65;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
	font-size: 14px;
	box-sizing: border-box;
	line-height: 21px;
	padding: 0 10px;
	padding-top: 1px;
}

.screen1 .blocs .bloc .code {
	font-size: 14px;
	line-height: 28px;
	letter-spacing: 0;
	color: #8e8e8e;
	font-weight: 400;
	margin-bottom: 11px;
}

.screen1 .blocs .bloc p {
	font-size: 18px;
	line-height: 28px;
	letter-spacing: 0;
	color: #00543d;
	font-weight: 400;
}

.screen1 .blocs .bloc p span {
	white-space: nowrap;
}

.screen1 .blocs .bloc:hover p:not(.code) {
	color: #e10020;
}

.screen1 .blocs .bloc .image:after,
.screen1 .blocs .bloc p {
	-webkit-transition: all ease-in 0.2s;
	-moz-transition:    all ease-in 0.2s;
	-o-transition:      all ease-in 0.2s;
	transition:         all ease-in 0.2s;
}

.screen1 .blocs .bloc:hover .image:after,
.screen1 .blocs .bloc:hover p {
	-webkit-transition: all ease-out 0.2s;
	-moz-transition:    all ease-out 0.2s;
	-o-transition:      all ease-out 0.2s;
	transition:         all ease-out 0.2s;
}

.screen1 .pagination {
	width: 100%;
	margin-top: 80px;
}

@media all and (max-width: 894px) {
	.screen1 .pagination {
		margin-top: 64px;
	}
}

.screen1 .pagination ul {
	display: block;
	display: flex;
	justify-content: center;
}

.screen1 .pagination ul li {
	display: block;
}

.screen1 .pagination ul li a {
	width: 35px;
	height: 35px;
	box-sizing: border-box;
	display: block;
	padding: 3.5px 5px;
	font-size: 16px;
	line-height: 28px;
	letter-spacing: 0;
	color: #00543d;
	background: #ddd;
	margin: 0 10px 10px 0;
	text-align: center;
	position: relative;
}

.screen1 .pagination ul li a:not(.selected):hover {
	color: #e10020;
}

.screen1 .pagination ul li a.selected {
	background: #00543d;
	color: #ddd;
}

.screen1 .pagination ul li a.prev,
.screen1 .pagination ul li a.next {
	cursor: default;
}

.screen1 .pagination ul li a.prev.active,
.screen1 .pagination ul li a.next.active {
	cursor: pointer;
}

.screen1 .pagination ul li a.prev:before,
.screen1 .pagination ul li a.prev:after,
.screen1 .pagination ul li a.next:before,
.screen1 .pagination ul li a.next:after {
	content: '';
	display: block;
	width: 8px;
	height: 1.5px;
	background: #00543d;
	position: absolute;
	left: 13px;
}

.screen1 .pagination ul li a:hover.prev.active:before,
.screen1 .pagination ul li a:hover.prev.active:after,
.screen1 .pagination ul li a:hover.next.active:before,
.screen1 .pagination ul li a:hover.next.active:after {
	background: #e10020;
}

.screen1 .pagination ul li a.prev:before,
.screen1 .pagination ul li a.next:before {
	top: 15px;
}

.screen1 .pagination ul li a.prev:after,
.screen1 .pagination ul li a.next:after {
	top: 19px;
}

.screen1 .pagination ul li a.prev:before,
.screen1 .pagination ul li a.next:after {
	-moz-transform: 	rotate(-40deg);
	-ms-transform: 		rotate(-40deg);
	-webkit-transform: 	rotate(-40deg);
	-o-transform: 		rotate(-40deg);
	transform: 			rotate(-40deg);
}

.screen1 .pagination ul li a.prev:after,
.screen1 .pagination ul li a.next:before {
	-moz-transform: 	rotate(40deg);
	-ms-transform: 		rotate(40deg);
	-webkit-transform: 	rotate(40deg);
	-o-transform: 		rotate(40deg);
	transform: 			rotate(40deg);
}

.cta-read h2 span {
	white-space: normal;
	font-size: 16px;
	line-height: 20px;
}