/* В этой версии верстки все правила font-face изменены, чтобы соответствоать тому, как шрифты указаны в Google Fonts. То есть одно название, разный вес и стиль. Если что-то случится с локальными шрифтами, сработают удаленные. */
@font-face {
	src: url('../fonts/OpenSans-Regular.ttf') format('truetype');
	font-family: 'Open Sans';
	font-weight: 400;
	font-style: normal;
}

@font-face {
	src: url('../fonts/OpenSans-Italic.ttf') format('truetype');
	font-family: 'Open Sans';
	font-weight: 400;
	font-style: italic;
}

@font-face {
	src: url('../fonts/OpenSans-SemiBold.ttf') format('truetype');
	font-family: 'Open Sans';
	font-weight: 600;
	font-style: normal;
}

@font-face {
	src: url('../fonts/OpenSans-Bold.ttf') format('truetype');
	font-family: 'Open Sans';
	font-weight: 700;
	font-style: normal;
}

@font-face {
	src: url('../fonts/OpenSans-ExtraBold.ttf') format('truetype');
	font-family: 'Open Sans';
	font-weight: 800;
	font-style: normal;
}

/* Здесь используется более элегантный способ прижать футер, чем тот, на который у вас была ссылка. Кроме последних трех свойств для body нужно задать только flex-grow: 1 для main и всё. Разметку при этом трогать не нужно. */
.page {
	margin: 0;
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

/* Main Sections */
/* По БЭМу нда и вообще не рекомендуется так объединять селекторы. Но если очень хочется, то можно:) */
.intro,
.services,
.feature,
.team,
.subscribe,
.get-in-touch__body,
.footer__content {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	max-width: 1249px;
	margin: 0 auto;
	padding-left: 1vw;
	padding-right: 1vw;
}

.page__content {
	flex-grow: 1;
}

h2 {
	color: #585858;
	/* Хотя в макете цвет текста заголовков и других элементов достигается прозрачностью, в браузере такое значение даст другой результат. Другой вариант: взять цвет в фотошопе пипеткой. */
	margin: 0;
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
	font-weight: 600;
	font-size: 42px;
	line-height: 55px;
	text-transform: uppercase;
}

h3 {
	margin: 0;
}

p {
	margin: 0;
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.75;
}

.page__header_grey {
	background-color: #e0e0e0;
}

.page__intro_grey {
	background-color: #e0e0e0;
}

.header__line {
	width: 122px;
	height: 3px;
	background-color: #ff2d2d;
	border: none;
}

/* Header */
.header {
	box-sizing: border-box;
	display: flex;
	align-items: stretch;
	justify-content: center;
	max-width: 1249px;
	margin: 0 auto;
	min-height: 89px;
	background-color: #000000;
}

.page__header {
	padding-top: 29px;
}

.menu {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	list-style: none;
	padding: 0;
	margin: 0;	
	margin-left: -20px;
	/* Сдвигать элементы можно не только позиционированием, но и отрицательными отступами. В каких случаях, что использовать читайте по ссылке https://www.smashingmagazine.com/2009/07/the-definitive-guide-to-using-negative-margins/ */
}

.menu__item {
	display: flex;
	align-items: stretch;
	justify-content: center;
	min-height: 89px;
}

.menu__item:hover {
	background-color: #ff3f40;
}

.menu__link {
	display: flex;
	align-items: center;
	padding: 0 30px;
	color: #e0e0e0;
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;
	text-transform: uppercase;
}

/* Intro */
.intro {
	background-color: #e0e0e0;
	padding-top: 103px;
	padding-bottom: 94px;
}

.intro__content {
	position: relative;
    bottom: 11px;
	width: 617px;
	margin-bottom: 20px;
	margin-right: 75px;
}

.intro__heading {
	margin: 0;
	font-size: 60px;
	line-height: 1.2;
	/* Чтобы высота строки оставалась пропорциональной разному размеру шрифта, можно указать ее без единиц измерения. Тогда она бужет зависеть от размера шрифта. */
	font-weight: bold;
	text-transform: uppercase;
	margin-bottom: 18px;
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
	font-weight: 800;
	letter-spacing: 1.5px;
	/* Свойство letter-spacing позволяет изменить межбуквенное расстояние. */
}

.intro__heading_style {
	letter-spacing: 6px;
	word-break: break-word;
	hyphens: auto;
	/* Свойство word-break заставляет слова переноситься по буквам, если они не помещаются в родительский элемент.
	Свойство hyphens добавляет дефис в месте переноса (может работать не во всех браузерах) */
}

.intro__text {
	max-width: 520px;
	margin-bottom: 51px;
	opacity: 0.7; 
}

.action-button {
	box-sizing: border-box;
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
	display: inline-block;
	width: 227px;
	padding: 16px 0;
	text-align: center;
	text-decoration: none;
	border-radius: 5px;
}

.action-button_red {
	font-size: 18px;
	font-weight: 700;
	color: #ffffff;
	background-color: #ff2d2d;
}

.intro__image {
	width: 550px;
	height: 300px;
	
	/* Свойство box-shadow позволяет создать тень бокса. Первые два значения - смещение по горизонтали и вертикали. Третье - размытие. Четвертое - распространение. Пятое цвет. */
}

/* Services */
.services {
	padding-top: 56px;
	padding-bottom: 53px;
	border-bottom: 1px solid #ececec;
}

.services__lead {
	flex: 1 1 502px;
	/* Свойство flex совмещает в себе три свойства grow, shrink и basis. Первые два позволяют сказать, что флекс элемент может расширятсья и сжиматься. Третье задает базовую ширину, которая расчитывается до всего остального */
	max-width: 502px;
	margin-bottom: 50px;
	margin-right: 50px;
}

.services__heading {
	position: relative;
    bottom: 5px;
	margin-bottom: 27px;
	margin-left: 80px;
}

.services__text {
	margin-bottom: 51px;
	margin-left: 80px;
}

.action-button_white {
	font-size: 15px;
	color: #ff3f40;
	background-color: #ffffff;
	border: 2px solid #ff3f40;
}

.services__blocks {
	flex: 1 1;
	max-width: 609px;
	display: flex;
	flex-wrap: wrap;
}

.service {
	flex: 1 1 288px;
	width: 288px;
	margin-bottom: 20px;
}

.service:nth-child(odd) {
	margin-right: 32px;
}

.service__heading {
	letter-spacing: 1.5px;
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
	font-weight: 600;
	font-size: 22px;
	margin-bottom: 10px;
	text-decoration: none;
	cursor: pointer;
}

.service__heading::before {
	display: block;
	width: 41px;
	height: 41px;
	margin-bottom: 23px;
}

.herf_text{
	text-decoration: none;
}

.service__text {
	opacity: 0.8;
	line-height:1.5

}

.service__heading_manage::before {
	content: url('../images/service-1.png');
	
}

.service__heading_ux::before {
	content: url('../images/service-2.png');
}

.service__heading_brand::before {
	content: url('../images/service-3.png');
}

.service__heading_anim::before {
	content: url('../images/service-4.png');
}

.service__heading_qwe::before {
	content: url('../images/service-5.png');

}
.service__heading_qwer::before {
	content: url('../images/service-6.png');

}
/* Feature products */
.feature {
	padding-top: 94px;
	padding-bottom: 52px
}

.feature__header {
	width: 100%;
	text-align: center;
	margin-bottom: 67px;
}

.feature__heading {
	padding-left: 14px;
	margin-bottom: 16px;
}

.feature__text {
	max-width: 500px;
	margin: 0 auto 30px;
	opacity: 0.7;
}

.products__filter {
	width: 100%;
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-bottom: 60px;
}

.products__link {
	position: relative;
    left: 45px;
	color: #000;
	margin-right: 55px;
	font-size: 22px;
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	text-decoration: none;
	opacity: 0.7;
}

.products__link_active {
	color: #ff2d2d;
	opacity: 1;
}

.products__link:hover {
	color: #ff2d2d;
}

.products {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
}

.product {
	flex: 1 1 24%;
	min-width: 250px;
	max-width: 299px;
	height: 291px;
	margin-bottom: 18px;
	object-fit: cover;
	/* Свйоство object-fit позволяет управлять размером изображений как фоновым, то есть независимо от границ самого элемента img. Это новое свойство и не работает в старых браузерах. */
}

/* Team */
.team {
	padding-top: 60px;
	padding-bottom: 110px;
}

.team__header {
	width: 100%;
	text-align: left;
	margin-bottom: 67px;
}

.team__heading {
	margin-bottom: 23px;
}

.team__text {
	max-width: 460px;
	margin-bottom: 30px;
}

.team__line {
	margin-left: 0;
}

.team__members {
	position: relative;
	width: 100%;
	display: flex;
	align-items: flex-end;
	flex-wrap: wrap;
	min-height: 458px;
    align-content: space-between;
}

.team__selected {
	position: relative;
    display: flex;
    flex-direction: column;
	max-width: 642px;
	margin-left: calc(321px + 65px);
}

.selected-member__name {
	position: relative;
    bottom: 5px;
	font-size: 30px;
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	opacity: 0.8;
	margin-bottom: 16px;
}

.selected-member__photo {
	position: absolute;
	transform: translateX(calc(-100% - 65px));
	width: 321px;
	height: 458px;
	margin-right: 65px;
	background-color: #eb6d4a8f;
}

.selected-member__link {
	color: #000;
	font-size: 18px;
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
	font-style: italic;
	text-decoration: none;
	margin-right: 30px;
} 

.selected-member__link:hover {
	text-decoration: underline;
}

.selected-member__info {
	margin-bottom: 34px;
}

.members {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	margin-left: calc(321px + 65px);
}

.member {
	position: relative;
	margin-top: 18px;
	margin-right: 18px;
}

.member__name {
	display: flex;
    justify-content: center;
    align-items: center;
	visibility: hidden;
	color: #ffffff;
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 37px;
	text-align: center;
	background-color: #000;
	opacity: 0.5;
}

.member:hover > .member__name {
	visibility: visible;
}

.member__photo {
	display: block;
	width: 197px;
	height: 214px;
	background-color: #d4dce680;
}

/* Subscribe */
.subscribe {
	box-sizing: border-box;
	display: block;
	width: 100%;
	max-width: 100%;
	background-color: #2c2c2c;
	padding-top: 50px;
	padding-bottom: 50px;
}

.subscribe__header {
	max-width: 1249px;
	margin: 0 auto;
	text-align: left;
}

.footer_link{
	color: #e0e0e0;
}


.popup__overlay1 {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.7);
	text-align: center;
	z-index: 10000
	
    }
.popup__overlay1:after {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    height: 100%;
    width: 0;
    vertical-align: middle;
    content: ''
    }
/* ADDED FOR IE<9 COMPATIBILITY */
.popup__overlay1_ie {
    background: #000;
    opacity: .7;
    filter: alpha(opacity=70)
}

.popup__close1 {
	display: block;
	position: absolute;
	top: -18px;
	right: 10px;
	width: 12px;
	height: 12px;
	padding: 8px;
	border-radius: 50%;
	cursor: pointer;
	background: red;
	text-align: center;
	font-size: 12px;
	line-height: 12px;
	color: #fff;
	text-decoration: none;
	font-weight: bold;
	cursor:pointer;
}
.popup__close1:hover {
	background: rgb(44,44,44)
}
		
.popup1 {
display: inline-block;
*display: inline;
*zoom: 1;
position: relative;
top: 10%;
max-width: 100%;
padding: 20px;
border:3px solid #000000;
background: #fff;
vertical-align: middle
					
}
/* ADDED INSTEAD OF :AFTER PSEUDOELEMENT */
.popup__valignfix1 {
display: inline-block;
*display: inline;
*zoom: 1;
width: 0;
height: 100%;
vertical-align: middle
}

.popup_a{
display: initial;
align-items: initial;
justify-content: initial;
font-family: 'OpenSans Bold', sans-serif, Helvetica, Arial;
text-transform: uppercase;
width: 122px;
height: 89px;
color: rgb(0, 0, 0);
font-size: 14px;
font-style: normal;
font-weight: bold;
letter-spacing: 0,49px;
text-decoration: none;
}
.popup_a:hover{
background: initial;
}
						
.popup__overlay {
display: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.7);
text-align: center
}
.popup__overlay:after {
display: inline-block;
*display: inline;
*zoom: 1;
height: 100%;
width: 0;
vertical-align: middle;
content: ''
}
/* ADDED FOR IE<9 COMPATIBILITY */
.popup__overlay_ie {
background: #000;
opacity: .7;
filter: alpha(opacity=70)
}
.popup {
display: inline-block;
*display: inline;
*zoom: 1;
position: relative;
max-width: 80%;
padding: 20px;
border:3px solid black;
background: #fff;
vertical-align: middle
}
/* ADDED INSTEAD OF :AFTER PSEUDOELEMENT */
.popup__valignfix {
display: inline-block;
*display: inline;
*zoom: 1;
width: 0;
height: 100%;
vertical-align: middle
}
input[type="button"] {
padding: 6px 16px;
border: 0;
border-radius: 2px;
cursor: pointer;
background: #ff6600;
color: #fff
}
.popup__close {
display: block;
position: absolute;
top: -18px;
right: 10px;
width: 12px;
height: 12px;
padding: 8px;
border-radius: 50%;
cursor: pointer;
background: red;
text-align: center;
font-size: 12px;
line-height: 12px;
color: #fff;
text-decoration: none;
font-weight: bold;
cursor:pointer;
}
.popup__close:hover {
background: rgb(44,44,44)
}

.popup__overlay2 {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.7);
	text-align: center;
	z-index: 10000
	
    }
.popup__overlay2:after {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    height: 100%;
    width: 0;
    vertical-align: middle;
    content: ''
    }
/* ADDED FOR IE<9 COMPATIBILITY */
.popup__overlay2_ie {
    background: #000;
    opacity: .7;
    filter: alpha(opacity=70)
}

.popup__close2 {
	display: block;
	position: absolute;
	top: -18px;
	right: 10px;
	width: 12px;
	height: 12px;
	padding: 8px;
	border-radius: 50%;
	cursor: pointer;
	background: red;
	text-align: center;
	font-size: 12px;
	line-height: 12px;
	color: #fff;
	text-decoration: none;
	font-weight: bold;
	cursor:pointer;
}
.popup__close2:hover {
	background: rgb(44,44,44)
}
		
.popup2 {
display: inline-block;
*display: inline;
*zoom: 1;
position: relative;
top: 10%;
max-width: 100%;
padding: 20px;

background-color:rgba(0, 0, 0, 0.5);

vertical-align: middle
					
}
/* ADDED INSTEAD OF :AFTER PSEUDOELEMENT */
.popup__valignfix2 {
display: inline-block;
*display: inline;
*zoom: 1;
width: 0;
height: 100%;
vertical-align: middle
}

.popup_a{
display: initial;
align-items: initial;
justify-content: initial;
font-family: 'OpenSans Bold', sans-serif, Helvetica, Arial;
text-transform: uppercase;
width: 122px;
height: 89px;
color: rgb(0, 0, 0);
font-size: 14px;
font-style: normal;
font-weight: bold;
letter-spacing: 0,49px;
text-decoration: none;
}
.popup_a:hover{
background: initial;
}
						
.popup__overlay {
display: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.7);
text-align: center
}
.popup__overlay:after {
display: inline-block;
*display: inline;
*zoom: 1;
height: 100%;
width: 0;
vertical-align: middle;
content: ''
}
/* ADDED FOR IE<9 COMPATIBILITY */
.popup__overlay_ie {
background: #000;
opacity: .7;
filter: alpha(opacity=70)
}
.popup {
display: inline-block;
*display: inline;
*zoom: 1;
position: relative;
max-width: 80%;
padding: 20px;
border:3px solid black;
background: #fff;
vertical-align: middle
}
/* ADDED INSTEAD OF :AFTER PSEUDOELEMENT */
.popup__valignfix {
display: inline-block;
*display: inline;
*zoom: 1;
width: 0;
height: 100%;
vertical-align: middle
}
input[type="button"] {
padding: 6px 16px;
border: 0;
border-radius: 2px;
cursor: pointer;
background: #ff6600;
color: #fff
}
.popup__close {
display: block;
position: absolute;
top: -18px;
right: 10px;
width: 12px;
height: 12px;
padding: 8px;
border-radius: 50%;
cursor: pointer;
background: red;
text-align: center;
font-size: 12px;
line-height: 12px;
color: #fff;
text-decoration: none;
font-weight: bold;
cursor:pointer;
}
.popup__close:hover {
background: rgb(44,44,44)
}

.popup__overlay3 {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.7);
	text-align: center;
	z-index: 10000
	
    }
.popup__overlay3:after {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    height: 100%;
    width: 0;
    vertical-align: middle;
    content: ''
    }
/* ADDED FOR IE<9 COMPATIBILITY */
.popup__overlay3_ie {
    background: #000;
    opacity: .7;
    filter: alpha(opacity=70)
}

.popup__close3 {
	display: block;
	position: absolute;
	top: -18px;
	right: 10px;
	width: 12px;
	height: 12px;
	padding: 8px;
	border-radius: 50%;
	cursor: pointer;
	background: red;
	text-align: center;
	font-size: 12px;
	line-height: 12px;
	color: #fff;
	text-decoration: none;
	font-weight: bold;
	cursor:pointer;
}
.popup__close3:hover {
	background: rgb(44,44,44)
}
		
.popup3 {
display: inline-block;
*display: inline;
*zoom: 1;
position: relative;
top: 10%;
max-width: 100%;
padding: 20px;
background-color:rgba(0, 0, 0, 0.5);

vertical-align: middle
					
}
/* ADDED INSTEAD OF :AFTER PSEUDOELEMENT */
.popup__valignfix3 {
display: inline-block;
*display: inline;
*zoom: 1;
width: 0;
height: 100%;
vertical-align: middle
}

.popup_a{
display: initial;
align-items: initial;
justify-content: initial;
font-family: 'OpenSans Bold', sans-serif, Helvetica, Arial;
text-transform: uppercase;
width: 122px;
height: 89px;
color: rgb(0, 0, 0);
font-size: 14px;
font-style: normal;
font-weight: bold;
letter-spacing: 0,49px;
text-decoration: none;
}
.popup_a:hover{
background: initial;
}
						
.popup__overlay {
display: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.7);
text-align: center
}
.popup__overlay:after {
display: inline-block;
*display: inline;
*zoom: 1;
height: 100%;
width: 0;
vertical-align: middle;
content: ''
}
/* ADDED FOR IE<9 COMPATIBILITY */
.popup__overlay_ie {
background: #000;
opacity: .7;
filter: alpha(opacity=70)
}
.popup {
display: inline-block;
*display: inline;
*zoom: 1;
position: relative;
max-width: 80%;
padding: 20px;
border:3px solid black;
background: #fff;
vertical-align: middle
}
/* ADDED INSTEAD OF :AFTER PSEUDOELEMENT */
.popup__valignfix {
display: inline-block;
*display: inline;
*zoom: 1;
width: 0;
height: 100%;
vertical-align: middle
}
input[type="button"] {
padding: 6px 16px;
border: 0;
border-radius: 2px;
cursor: pointer;
background: #ff6600;
color: #fff
}
.popup__close {
display: block;
position: absolute;
top: -18px;
right: 10px;
width: 12px;
height: 12px;
padding: 8px;
border-radius: 50%;
cursor: pointer;
background: red;
text-align: center;
font-size: 12px;
line-height: 12px;
color: #fff;
text-decoration: none;
font-weight: bold;
cursor:pointer;
}
.popup__close:hover {
background: rgb(44,44,44)
}

.popup__overlay4 {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.7);
	text-align: center;
	z-index: 10000
	
    }
.popup__overlay4:after {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    height: 100%;
    width: 0;
    vertical-align: middle;
    content: ''
    }
/* ADDED FOR IE<9 COMPATIBILITY */
.popup__overlay4_ie {
    background: #000;
    opacity: .7;
    filter: alpha(opacity=70)
}

.popup__close4 {
	display: block;
	position: absolute;
	top: -18px;
	right: 10px;
	width: 12px;
	height: 12px;
	padding: 8px;
	border-radius: 50%;
	cursor: pointer;
	background: red;
	text-align: center;
	font-size: 12px;
	line-height: 12px;
	color: #fff;
	text-decoration: none;
	font-weight: bold;
	cursor:pointer;
}
.popup__close4:hover {
	background: rgb(44,44,44)
}
		
.popup4 {
display: inline-block;
*display: inline;
*zoom: 1;
position: relative;
top: 10%;
max-width: 100%;
padding: 20px;
background-color:rgba(0, 0, 0, 0.5);

vertical-align: middle
					
}
/* ADDED INSTEAD OF :AFTER PSEUDOELEMENT */
.popup__valignfix4 {
display: inline-block;
*display: inline;
*zoom: 1;
width: 0;
height: 100%;
vertical-align: middle
}

.popup_a{
display: initial;
align-items: initial;
justify-content: initial;
font-family: 'OpenSans Bold', sans-serif, Helvetica, Arial;
text-transform: uppercase;
width: 122px;
height: 89px;
color: rgb(0, 0, 0);
font-size: 14px;
font-style: normal;
font-weight: bold;
letter-spacing: 0,49px;
text-decoration: none;
}
.popup_a:hover{
background: initial;
}
						
.popup__overlay {
display: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.7);
text-align: center
}
.popup__overlay:after {
display: inline-block;
*display: inline;
*zoom: 1;
height: 100%;
width: 0;
vertical-align: middle;
content: ''
}
/* ADDED FOR IE<9 COMPATIBILITY */
.popup__overlay_ie {
background: #000;
opacity: .7;
filter: alpha(opacity=70)
}
.popup {
display: inline-block;
*display: inline;
*zoom: 1;
position: relative;
max-width: 80%;
padding: 20px;
border:3px solid black;
background: #fff;
vertical-align: middle
}
/* ADDED INSTEAD OF :AFTER PSEUDOELEMENT */
.popup__valignfix {
display: inline-block;
*display: inline;
*zoom: 1;
width: 0;
height: 100%;
vertical-align: middle
}
input[type="button"] {
padding: 6px 16px;
border: 0;
border-radius: 2px;
cursor: pointer;
background: #ff6600;
color: #fff
}
.popup__close {
display: block;
position: absolute;
top: -18px;
right: 10px;
width: 12px;
height: 12px;
padding: 8px;
border-radius: 50%;
cursor: pointer;
background: red;
text-align: center;
font-size: 12px;
line-height: 12px;
color: #fff;
text-decoration: none;
font-weight: bold;
cursor:pointer;
}
.popup__close:hover {
background: rgb(44,44,44)
}

.popup__overlay5 {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.7);
	text-align: center;
	z-index: 10000
	
    }
.popup__overlay5:after {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    height: 100%;
    width: 0;
    vertical-align: middle;
    content: ''
    }
/* ADDED FOR IE<9 COMPATIBILITY */
.popup__overlay5_ie {
    background: #000;
    opacity: .7;
    filter: alpha(opacity=70)
}

.popup__close5 {
	display: block;
	position: absolute;
	top: -18px;
	right: 10px;
	width: 12px;
	height: 12px;
	padding: 8px;
	border-radius: 50%;
	cursor: pointer;
	background: red;
	text-align: center;
	font-size: 12px;
	line-height: 12px;
	color: #fff;
	text-decoration: none;
	font-weight: bold;
	cursor:pointer;
}
.popup__close5:hover {
	background: rgb(44,44,44)
}
		
.popup5 {
display: inline-block;
*display: inline;
*zoom: 1;
position: relative;
top: 10%;
max-width: 100%;
padding: 20px;
background-color:rgba(0, 0, 0, 0.5);

vertical-align: middle
					
}
/* ADDED INSTEAD OF :AFTER PSEUDOELEMENT */
.popup__valignfix5 {
display: inline-block;
*display: inline;
*zoom: 1;
width: 0;
height: 100%;
vertical-align: middle
}

.popup_a{
display: initial;
align-items: initial;
justify-content: initial;
font-family: 'OpenSans Bold', sans-serif, Helvetica, Arial;
text-transform: uppercase;
width: 122px;
height: 89px;
color: rgb(0, 0, 0);
font-size: 14px;
font-style: normal;
font-weight: bold;
letter-spacing: 0,49px;
text-decoration: none;
}
.popup_a:hover{
background: initial;
}
						
.popup__overlay {
display: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.7);
text-align: center
}
.popup__overlay:after {
display: inline-block;
*display: inline;
*zoom: 1;
height: 100%;
width: 0;
vertical-align: middle;
content: ''
}
/* ADDED FOR IE<9 COMPATIBILITY */
.popup__overlay_ie {
background: #000;
opacity: .7;
filter: alpha(opacity=70)
}
.popup {
display: inline-block;
*display: inline;
*zoom: 1;
position: relative;
max-width: 80%;
padding: 20px;
border:3px solid black;
background: #fff;
vertical-align: middle
}
/* ADDED INSTEAD OF :AFTER PSEUDOELEMENT */
.popup__valignfix {
display: inline-block;
*display: inline;
*zoom: 1;
width: 0;
height: 100%;
vertical-align: middle
}
input[type="button"] {
padding: 6px 16px;
border: 0;
border-radius: 2px;
cursor: pointer;
background: #ff6600;
color: #fff
}
.popup__close {
display: block;
position: absolute;
top: -18px;
right: 10px;
width: 12px;
height: 12px;
padding: 8px;
border-radius: 50%;
cursor: pointer;
background: red;
text-align: center;
font-size: 12px;
line-height: 12px;
color: #fff;
text-decoration: none;
font-weight: bold;
cursor:pointer;
}
.popup__close:hover {
background: rgb(44,44,44)
}

.popup__overlay6 {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.7);
	text-align: center;
	z-index: 10000
	
    }
.popup__overlay6:after {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    height: 100%;
    width: 0;
    vertical-align: middle;
    content: ''
    }
/* ADDED FOR IE<9 COMPATIBILITY */
.popup__overlay6_ie {
    background: #000;
    opacity: .7;
    filter: alpha(opacity=70)
}

.popup__close6 {
	display: block;
	position: absolute;
	top: -18px;
	right: 10px;
	width: 12px;
	height: 12px;
	padding: 8px;
	border-radius: 50%;
	cursor: pointer;
	background: red;
	text-align: center;
	font-size: 12px;
	line-height: 12px;
	color: #fff;
	text-decoration: none;
	font-weight: bold;
	cursor:pointer;
}
.popup__close6:hover {
	background: rgb(44,44,44)
}
		
.popup6 {
display: inline-block;
*display: inline;
*zoom: 1;
position: relative;
top: 10%;
max-width: 100%;
padding: 20px;
background-color:rgba(0, 0, 0, 0.5);

vertical-align: middle
					
}
/* ADDED INSTEAD OF :AFTER PSEUDOELEMENT */
.popup__valignfix6 {
display: inline-block;
*display: inline;
*zoom: 1;
width: 0;
height: 100%;
vertical-align: middle
}

.popup_a{
display: initial;
align-items: initial;
justify-content: initial;
font-family: 'OpenSans Bold', sans-serif, Helvetica, Arial;
text-transform: uppercase;
width: 122px;
height: 89px;
color: rgb(0, 0, 0);
font-size: 14px;
font-style: normal;
font-weight: bold;
letter-spacing: 0,49px;
text-decoration: none;
}
.popup_a:hover{
background: initial;
}
						
.popup__overlay {
display: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.7);
text-align: center
}
.popup__overlay:after {
display: inline-block;
*display: inline;
*zoom: 1;
height: 100%;
width: 0;
vertical-align: middle;
content: ''
}
/* ADDED FOR IE<9 COMPATIBILITY */
.popup__overlay_ie {
background: #000;
opacity: .7;
filter: alpha(opacity=70)
}
.popup {
display: inline-block;
*display: inline;
*zoom: 1;
position: relative;
max-width: 80%;
padding: 20px;
border:3px solid black;
background: #fff;
vertical-align: middle
}
/* ADDED INSTEAD OF :AFTER PSEUDOELEMENT */
.popup__valignfix {
display: inline-block;
*display: inline;
*zoom: 1;
width: 0;
height: 100%;
vertical-align: middle
}
input[type="button"] {
padding: 6px 16px;
border: 0;
border-radius: 2px;
cursor: pointer;
background: #ff6600;
color: #fff
}
.popup__close {
display: block;
position: absolute;
top: -18px;
right: 10px;
width: 12px;
height: 12px;
padding: 8px;
border-radius: 50%;
cursor: pointer;
background: red;
text-align: center;
font-size: 12px;
line-height: 12px;
color: #fff;
text-decoration: none;
font-weight: bold;
cursor:pointer;
}
.popup__close:hover {
background: rgb(44,44,44)
}


.popup__overlay7 {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.7);
	text-align: center;
	z-index: 10000
	
    }
.popup__overlay7:after {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    height: 100%;
    width: 0;
    vertical-align: middle;
    content: ''
    }
/* ADDED FOR IE<9 COMPATIBILITY */
.popup__overlay7_ie {
    background: #000;
    opacity: .7;
    filter: alpha(opacity=70)
}

.popup__close7 {
	display: block;
	position: absolute;
	top: -18px;
	right: 10px;
	width: 12px;
	height: 12px;
	padding: 8px;
	border-radius: 50%;
	cursor: pointer;
	background: red;
	text-align: center;
	font-size: 12px;
	line-height: 12px;
	color: #fff;
	text-decoration: none;
	font-weight: bold;
	cursor:pointer;
}
.popup__close7:hover {
	background: rgb(44,44,44)
}
		
.popup7 {
display: inline-block;
*display: inline;
*zoom: 1;
position: relative;
top: 10%;
max-width: 100%;
padding: 20px;
background-color:rgba(0, 0, 0, 0.5);

vertical-align: middle
					
}
/* ADDED INSTEAD OF :AFTER PSEUDOELEMENT */
.popup__valignfix7 {
display: inline-block;
*display: inline;
*zoom: 1;
width: 0;
height: 100%;
vertical-align: middle
}

.popup_a{
display: initial;
align-items: initial;
justify-content: initial;
font-family: 'OpenSans Bold', sans-serif, Helvetica, Arial;
text-transform: uppercase;
width: 122px;
height: 89px;
color: rgb(0, 0, 0);
font-size: 14px;
font-style: normal;
font-weight: bold;
letter-spacing: 0,49px;
text-decoration: none;
}
.popup_a:hover{
background: initial;
}
						
.popup__overlay {
display: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.7);
text-align: center
}
.popup__overlay:after {
display: inline-block;
*display: inline;
*zoom: 1;
height: 100%;
width: 0;
vertical-align: middle;
content: ''
}
/* ADDED FOR IE<9 COMPATIBILITY */
.popup__overlay_ie {
background: #000;
opacity: .7;
filter: alpha(opacity=70)
}
.popup {
display: inline-block;
*display: inline;
*zoom: 1;
position: relative;
max-width: 80%;
padding: 20px;
border:3px solid black;
background: #fff;
vertical-align: middle
}
/* ADDED INSTEAD OF :AFTER PSEUDOELEMENT */
.popup__valignfix {
display: inline-block;
*display: inline;
*zoom: 1;
width: 0;
height: 100%;
vertical-align: middle
}
input[type="button"] {
padding: 6px 16px;
border: 0;
border-radius: 2px;
cursor: pointer;
background: #ff6600;
color: #fff
}
.popup__close {
display: block;
position: absolute;
top: -18px;
right: 10px;
width: 12px;
height: 12px;
padding: 8px;
border-radius: 50%;
cursor: pointer;
background: red;
text-align: center;
font-size: 12px;
line-height: 12px;
color: #fff;
text-decoration: none;
font-weight: bold;
cursor:pointer;
}
.popup__close:hover {
background: rgb(44,44,44)
}




#thumbs { padding-top: 10px; overflow: hidden; }
#thumbs img, #largeImage {
    border: 1px solid gray;
    padding: 4px;
    background-color: white;
	cursor: pointer;
}
#thumbs img {
    float: left;
    margin-right: 6px;
}
#description {
    background: black;
    color: white;
    position: absolute;
    bottom: 0;
    padding: 10px 20px;
    width: 525px;
    margin: 5px;
}
#panel { position: relative; }

#thumbs1 { padding-top: 10px; overflow: hidden; }
#thumbs1 img, #largeImage1 {
    border: 1px solid gray;
    padding: 4px;
    background-color: white;
    cursor: pointer;
}
#thumbs img {
    float: left;
    margin-right: 6px;
}
#description1 {
    background: black;
    color: white;
    position: absolute;
    bottom: 0;
    padding: 10px 20px;
    width: 525px;
    margin: 5px;
}
#panel1 { position: relative; }


#thumbs2 { padding-top: 10px; overflow: hidden; }
#thumbs2 img, #largeImage2 {
    border: 1px solid gray;
    padding: 4px;
    background-color: white;
    cursor: pointer;
}
#thumbs img {
    float: left;
    margin-right: 6px;
}
#description2 {
    background: black;
    color: white;
    position: absolute;
    bottom: 0;
    padding: 10px 20px;
    width: 525px;
    margin: 5px;
}
#panel2 { position: relative; }

#thumbs3 { padding-top: 10px; overflow: hidden; }
#thumbs3 img, #largeImage3 {
    border: 1px solid gray;
    padding: 4px;
    background-color: white;
    cursor: pointer;
}
#thumbs img {
    float: left;
    margin-right: 6px;
}
#description3 {
    background: black;
    color: white;
    position: absolute;
    bottom: 0;
    padding: 10px 20px;
    width: 525px;
    margin: 5px;
}
#panel3 { position: relative; }


#thumbs4 { padding-top: 10px; overflow: hidden; }
#thumbs4 img, #largeImage4 {
    border: 1px solid gray;
    padding: 4px;
    background-color: white;
    cursor: pointer;
}
#thumbs img {
    float: left;
    margin-right: 6px;
}
#description4 {
    background: black;
    color: white;
    position: absolute;
    bottom: 0;
    padding: 10px 20px;
    width: 525px;
    margin: 5px;
}
#panel4 { position: relative; }


#thumbs5 { padding-top: 10px; overflow: hidden; }
#thumbs5 img, #largeImage5 {
    border: 1px solid gray;
    padding: 4px;
    background-color: white;
    cursor: pointer;
}
#thumbs img {
    float: left;
    margin-right: 6px;
}
#description5 {
    background: black;
    color: white;
    position: absolute;
    bottom: 0;
    padding: 10px 20px;
    width: 525px;
    margin: 5px;
}
#panel5 { position: relative; }

#thumbs6 { padding-top: 10px; overflow: hidden; }
#thumbs6 img, #largeImage6 {
    border: 1px solid gray;
    padding: 4px;
    background-color: white;
    cursor: pointer;
}
#thumbs img {
    float: left;
    margin-right: 6px;
}
#description6 {
    background: black;
    color: white;
    position: absolute;
    bottom: 0;
    padding: 10px 20px;
    width: 525px;
    margin: 5px;
}
#panel6 { position: relative; }


.subscribe__heading {
	color: #fff;
	opacity: 0.8;
	text-transform: none;
	margin-bottom: 30px;
}

.subscribe__text {
	color: #fff;
	opacity: 0.8;
	margin-bottom: 50px;
}

.subscribe__form {
	display: flex;
	align-items: center;
	justify-content: center;
}

.subscribe__form .subscribe__input[type="email"] {
	box-sizing: border-box;
	flex: 0 1 521px;
	min-height: 79px;
	padding: 0;
	padding-left: 35px;
	border: none;
	border-radius: 5px;
	margin-right: 22px;
}

.subscribe__form .subscribe__button[type="submit"] {
	color: #fff;
	font-size: 18px;
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
	font-weight: 700;
	width: 214px;
	min-height: 79px;
	background-color: #ff2d2d;
	border: none;
	border-radius: 5px;
	text-transform: uppercase;
}

/* Get in touch */
.get-in-touch {
	/* overflow: hidden; */
	/* Это свойство скрывает переполнение. В этом макете это использовалось в предыдущих версиях, чтобы декоративная подложка в разделе контактов не выходила за край. Это не самая лучшая практика, потому что она не решает проблемы, а скрывает. В данном случае это ни на что не влияло, но в реальных проектах лучше найти решение проблемы. Как минимум применйте его к секции, а не ко всей странице. */
}

.get-in-touch__header {
	box-sizing: border-box;
	max-width: 1249px;
	margin: 0 auto;
	padding-left: 1vw;
	padding-right: 1vw;
	width: 100%;
	padding-top: 92px;
}

.get-in-touch__heading {
	margin-bottom: 34px;
}

.get-in-touch__text {
	max-width: 720px;
	margin-bottom: 50px;
}

.get-in-touch__line {
	margin-left: 0;
	margin-bottom: 75px;
}

/* Feedback */
.get-in-touch__body {
	position: relative;
	display: flex;
	align-items: flex-end;
	flex-wrap: nowrap;
	/* padding-top: 92px; */
	padding-bottom: 110px;
	width: 100%;
    max-width: 100%;
    align-items: stretch;
    padding-left: 0;
    padding-right: 0;
}

.get-in-touch__left-box {
	flex: 1 1 auto;
}

.get-in-touch__feedback {
	max-width: 731px;
	margin-right: 107px;
	padding-left: 40px;
}

.feedback__form {
	display: flex;
	flex-wrap: wrap;
}

.feedback__input {
	box-sizing: border-box;
	padding-left: 54px;
	border: none;
	border-radius: 5px;
	background-color: #f3f3f3;	
	margin-bottom: 45px;
}

/* Для инпутов можно было бы задать свои классы и использовать их, но здесь я хотел показать селектор атрибута и где он может быть использован. */
.feedback__input[name="name"],
.feedback__input[name="email"] {
	font-size: 16px;
	width: 339px;
	max-width: 339px;
	height: 69px;
}

.feedback__input[name="name"] {
	margin-right: 53px;
}

.feedback__input[name="message"] {
	resize: none;
	font-size: 16px;
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
	width: 731px;
	max-width: 731px;
	height: 249px;
	box-sizing: border-box;
	padding: 35px 54px;
	margin-bottom: 45px;
	border: none;
	border-radius: 5px;
	background-color: #f3f3f3;	
}

.feedback__button[type="submit"] {
	width: 731px;
	max-width: 731px;
	height: 72px;
	color: #fff;
	font-size: 18px;
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
	font-weight: 700;
	background-color: #ff2d2d;
	border: none;
	border-radius: 5px;
	text-transform: uppercase;
} 

/* Contacts */
.get-in-touch__contacts {
	position: relative;
	color: #e0e0e0;
	background-color: #2c2c2c;
	padding: 125px 78px;
	max-width: 290px;
}

.contacts__heading {
	color: #e0e0e0;
	font-size: 18px;
	margin-bottom: 13px;
}

.contacts-address {
	line-height: 1.75;
}

.contacts__line {
	margin-bottom: 17px;
}

.get-in-touch__right-box {
	flex: 1 1 auto;
}

.contacts__decor {
	background-color: #2c2c2c;
}

/* Ниже идут два предыдущих варианта создания этой декоративной части */
.contacts-background {
	position: absolute;
	z-index: -1;
	width: 100vw;
	height: 481px;
	background-color: #2c2c2c;
	clip-path: polygon(1000px 0, 100% 0, 100% 100%, 1000px 100%);
	/* Свойство clip-path позволяет наложить на элемент маску, которая может визуально скрыть части этого элемента. Макса может быть самой разной формы, в данном случае это прямоугольник. */
}

.contacts::after {
	/* content: ''; */
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	transform: translateX(100%);
	/* Свойство transform позволяет изменять внешний вид элементов. Значение translate сдвигает элемент по осям X, Y или по обеим сразу. Его особенность - проценты расчитываются не от размеров родителя, а от самого элемента. При этом такой сдвинутый элемент не участвует в потоке. */
	width: 100vw;
	height: 100%;
	background-color: #2c2c2c;
}
/* Второй способ сделать темную подложку - создать пустой псевдоэлемент, стилизовать его и тоже исопльзовать позиционирование. Этот подход лучше тем, что вам не нужно изменять HTML. Сейчас работает этот способ, поэтому элемент в HTML отключен. */

/* Footer */
.footer {
	background-color: #2c2c2c;
	padding: 0 1vw;
}

.subscribe__form a {

	width: 217px;
	height: 82px;
	border: 0px;
	padding: 0px 0px;
	background-color: red;
	margin: 0px 0px;
	align-items: center;
	display: flex;
	justify-content: center;
	flex-wrap: nowrap;
	align-items: center;
	margin-top: 56px;
	justify-self: center;
	text-decoration: none;
}

.footer__content {
	box-sizing: border-box;
	padding: 19px 0 0;
	color: #e0e0e0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 110px;
	background-color: #2c2c2c;
	justify-content: center;
}

.footer__social-links > .footer__link:not(:last-child) {
	margin-right: 18px;
	text-align: center;
	justify-content: center;

}

.linkmenu{
	justify-content: center;
	text-align: center;
	font-size: 40px;
	
}

/* Responsive */
@media screen and (max-width: 1286px) {
	.intro {
		flex-wrap: nowrap;
	}
	.intro__content {
		width: 50%;
		box-sizing: border-box;
		margin-right: 0;
		padding-right: 15px;
	}
	.intro__heading {
		font-size: 5vw;
	}
	.intro__image-link {
		width: 50%;
	}
	.intro__image {
		width: 100%;
		height: auto;
	}
	.products {
		justify-content: flex-start;
	}
	.product {
		max-width: 100%;
		margin-right: 1vw;
	}
	.get-in-touch__body {
		flex-wrap: wrap;
		padding-left: initial;
		padding-right: initial;
		padding-bottom: 0;
	}
	.get-in-touch__left-box {
		flex: 0 1 auto;
	}
	.feedback {
		margin: 0 auto;
		margin-bottom: 30px;
		padding: 0 1vw;
	}
	.contacts {
		width: 100%;
		max-width: 100%;
	}
	.contacts-background {
		display: none;
	}
}

@media screen and (max-width: 900px) {
	.selected-member {
		position: initial;
	}
	.products__item {
		width: 100%;
		text-align: center;
	}
	.services {
		justify-content: center;
	}
}

@media screen and (max-width: 907px) {
	.services-lead,
	.services__blocks {
		width: 100%;
		max-width: 100%;
	}
}

@media screen and (max-width: 855px) {
	.selected-member {
		margin-left: 0;
		margin-bottom: 1.5rem;
	}
	.selected-member__photo {
		position: initial;
		margin-right: 0;
		transform: initial;
		margin-bottom: 1rem;
	}
	.members {
		margin-left: 0;
	}
} 

@media screen and (max-width: 800px) {
	.services-lead {
		width: 100%;
		max-width: 100%;
	}
	.services__blocks {
		width: 100%;
		max-width: 100%;
	}
	.contacts {
		padding: 1vw;
	}
}

@media screen and (max-width: 760px) {
	.feedback__input[name="name"],
	.feedback__input[name="email"],
	.feedback__input[name="message"],
	.feedback__button[type="submit"] {
		width: 100%;
		max-width: 100%;
	}
	.feedback__input[name="name"] {
		margin-right: 0;
	}
}

@media screen and (max-width: 700px) {
	.header {
		padding-left: 20px;
	}
	.intro {
		flex-wrap: wrap;
	}
	.intro__content {
		width: 100%;
	}
	.intro__image-link {
		width: 100%;
	}
	.intro__image {
		width: 100%;
		height: auto;
	}
	.intro__heading {
		font-size: 50px;
	}
}

@media screen and (max-width: 400px) {
	.subscribe__form {
		flex-wrap: wrap;
	}
}