/* @import url(https://fonts.googleapis.com/css?family=Roboto:regular,600&display=swap); */

@font-face {
	font-family: 'Roboto';
	src: url('../fonts/Roboto-SemiBold.woff2') format('woff2'),
		url('../fonts/Roboto-SemiBold.woff') format('woff'),
		url('../fonts/Roboto-SemiBold.ttf') format('truetype');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

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


/* General ==================================================> */

.main .hat {
	margin: 23px 0 0;
}

.breadcrumbs {
	margin: 25px 0;
}

.footer__list li:not(:last-of-type) {
	margin-bottom: 10px;
}

body:before {
	background: url(../../images/dist/blur-blue.png) no-repeat;
}

body:after {
	background: url(../../images/dist/blur-green.png) no-repeat;
}

@media (max-width: 575px) {

	.breadcrumbs {
		margin: 15px 0;
	}
}





/* Icon page ==================================================> */

.popup:not(.active) .popup__ads ins > div {
	visibility: hidden !important;
}

.merchandise__info {
	max-width: 652px;
	margin: 0 auto;
}

.merchandise__info h1 {
	font: 600 26px/1.2 'Roboto';
	text-align: center;
	margin-bottom: 27px;
}

.merchandise__info h2,
.merchandise__title {
	font: 600 26px/1.2 'Roboto';
	text-align: left;
	margin-bottom: 15px;
}

.merchandise__info .icon-navigation {
	margin-bottom: 15px;
}

.merchandise__info .merchandise__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 20px;
	padding: 20px;
	width: 377px;
	height: 377px;
}

.merchandise__info .merchandise__icon > div {
	flex: 0 0 181px;
	width: 181px;
	height: 181px;
}

.merchandise__info .merchandise__icon > div img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	max-width: none;
	max-height: none;
}

.merchandise__info .merchandise__details,
.merchandise__info .merchandise__text,
.merchandise__info .merchandise__share,
.merchandise__info button {
	max-width: 377px;
	margin-right: auto;
	margin-left: auto;
}

.merchandise__info button {
	font: 600 30px/1.2 'Roboto';
	width: 100%;
	height: auto;
	padding: 17px;
}

.merchandise__info .merchandise__details a,
.merchandise__info .merchandise__text a,
.merchandise__info .merchandise__share a {
	color: #2C69E1;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.merchandise__info .merchandise__details a:hover,
.merchandise__info .merchandise__text a:hover,
.merchandise__info .merchandise__share a:hover {
	text-decoration: none;
}

.merchandise__info .merchandise__details {
	margin-bottom: 15px;
}

.merchandise__info .merchandise__text {
	padding: 15px 0 0;
	margin-bottom: 25px;
}

@media (max-width: 991px) {

	.merchandise__info .merchandise__icon {
		width: 335px;
		height: 335px;
	}
}

@media (max-width: 768px) {

	.merchandise__info button {
		font-size: 20px;
	}
}





.share-merchandise {
	display: flex;
	align-items: center;
	gap: 30px;
	background: #fff;
	border-radius: 14px;
	padding: 25px 30px;
}

.share-merchandise__img {
	flex: 0 0 80px;
	height: 80px;
}

.share-merchandise__img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.share-merchandise__content {
	flex: 1 1 auto;
}

.share-merchandise__content h2 {
	margin-bottom: 5px;
}

.merchandise__description,
.merchandise__details > div *,
.share-merchandise__content > div * {
	font: 400 16px/1.2 'Roboto';
}

.merchandise__details > div * {
	line-height: 1.8;
}

@media (max-width: 768px) {

	.share-merchandise {
		gap: 20px;
		padding: 20px 24px;
	}
}





.icon-navigation {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.icon-navigation__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-width: 396px;
}

.icon-navigation__thumbnails {
	flex: 0 0 120px;
	display: flex;
	align-items: center;
	gap: 10px;
	width: 120px;
}

.icon-navigation__thumbnails_left {
	justify-content: flex-end;
}

.icon-navigation__thumbnails_right {
	justify-content: flex-start;
}

.icon-navigation__img {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border-radius: 50%;
	overflow: hidden;
}

.icon-navigation__img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.icon-navigation__img_large {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	padding: 10px;
}

.icon-navigation__img_medium {
	flex: 0 0 34px;
	width: 34px;
	height: 34px;
	padding: 8px;
	opacity: 0.5;
}

.icon-navigation__img_small {
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	padding: 3px;
	opacity: 0.2;
}

.icon-navigation__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font: 400 16px/1.2 'Roboto';
	background: #fff;
	padding: 13px;
	min-width: 178px;
	margin: 0 10px;
	border: 2px solid #2C69E1;
	border-radius: 80px;
	transition: all linear 0.2s;
}

.icon-navigation__btn:hover {
	background: #2c69e112;
}

.icon-navigation__btn span {
	position: relative;
	display: inline-block;
	color: #2C69E1;
}

.icon-navigation__btn span::before {
	content: "";
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 10px;
	height: 6px;
	background: url(../img/blue-arrow.svg) center/contain no-repeat;
}

.icon-navigation__btn_prev {
}

.icon-navigation__btn_prev span {
	padding-left: 15px;
}

.icon-navigation__btn_prev span::before {
	left: 0;
}

.icon-navigation__btn_next {
}

.icon-navigation__btn_next span {
	padding-right: 15px;
}

.icon-navigation__btn_next span::before {
	right: 0;
	transform: translateY(-50%) rotate(180deg);
}

@media (max-width: 768px) {
	
	.icon-navigation {
		gap: 8px;
	}

	.icon-navigation__nav {
		/* flex-direction: column;
		gap: 5px; */
		gap: 20px;
		min-width: 335px;
	}

	.icon-navigation__thumbnails {
		display: none;
		/* flex: 0 0 90px;
		width: 90px; */
	}

	.icon-navigation__btn {
		min-width: 157px;
		margin: 0;
		/* padding: 7px;
		min-width: 140px;
		margin: 0; */
	}

	/* .icon-navigation__img_small {
		display: none;
	} */
}





/* Our team page ==================================================> */

.merchandise h1 {
	font: 600 26px/1.39 'Roboto';
	text-align: center;
	margin-bottom: 17px;
}

.merchandise .merchandise__content {
	font: 400 16px/1.2 'Roboto';
	margin-bottom: 17px;
}

.team-members {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-bottom: 127px;
}

.team-member {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: calc(25% - 15px);
	background: #fff;
	padding: 20px;
	border-radius: 14px;
}

.team-member__avatar {
	display: block;
	width: 110px;
	height: 110px;
	margin: 0 auto 20px;
	overflow: hidden;
	border-radius: 14px;
}

.team-member__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.team-member__info {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	margin-bottom: 12px;
}

.team-member__name {
	display: inline-block;
}

.team-member__name h3 {
	font: 600 16px/1.2 'Roboto';
}

.team-member__job {
	text-align: center;
}

.team-member__role {
	font: 400 16px/1.2 'Roboto';
	color: #2C69E1;
}

.team-member__socials,
.employee__socials {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 15px;
}

.team-member__socials a,
.employee__socials a {
	display: inline-block;
	width: 30px;
	height: 30px;
}

.team-member__socials a img,
.employee__socials a img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

@media (max-width: 991.98px) {

	.team-members {
		gap: 20px;
	}

	.team-member {
		width: calc(50% - 10px);
	}
}

@media (max-width: 500px) {

	.team-member {
		padding: 10px;
	}

	.team-member__avatar {
		width: 135px;
		height: 135px;
		margin: 0 auto 10px;
	}

	.team-member__name h3 {
		font-size: 14px;
	}

	.team-member__socials,
	.employee__socials {
		gap: 10px;
	}
}





/* Team member page ==================================================> */

.product .merchandise {
	margin: 0 0 60px;
}

.employee .merchandise__icon {
	flex: 0 0 278px;
	width: 278px;
	padding: 0;
	background: none;
}

.employee .merchandise__info {
	flex: 1 1 auto;
	max-width: none;
	margin: 0 0 0 40px;
}

.employee__avatar {
	width: 278px;
	height: 278px;
	margin-bottom: 23px;
	border-radius: 14px;
	overflow: hidden;
}

.employee__avatar img {
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: cover;
}

.employee h1 {
	text-align: left;
	margin-bottom: 2px;
}

.employee__role {
	display: inline-block;
	font: 400 16px/1.2 'Roboto';
	color: #2C69E1;
	margin-bottom: 5px;
}

.employee__info {
	font: 400 16px/1.8 'Roboto';
	margin-bottom: 20px;
}

.employee__text {
	position: relative;
	padding: 13px 0;
	margin-bottom: 20px;
}

.employee__text::before,
.employee__text::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: #fff;
}

.employee__text::before {
	top: 0;
}

.employee__text::after {
	bottom: 0;
}

.employee__text h2 {
	font: 600 16px/1.2 'Roboto';
	margin-bottom: 13px;
}

.employee__text ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 40px;
	row-gap: 13px;
}

.employee__text ul li {
	display: flex;
	align-items: center;
	gap: 15px;
}

.employee__text ul li > div {
	flex: 0 0 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	padding: 12px;
	background: #fff;
	border-radius: 50%;
	overflow: hidden;
}

.employee__text ul li > div img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.employee__tools {
	display: flex;
	flex-direction: column;
	gap: 15px;
	font: 400 16px/1.2 'Roboto';
}

.employee__tools b {
	font-weight: 600;
}

@media (max-width: 991.98px) {

	.employee .merchandise__icon {
		flex: 0 1 auto;
		width: 278px;
		margin: 0 auto 30px;
	}
	
	.employee .merchandise__info {
		margin: 0;
	}
}





/* Footer ==================================================> */

.footer__container {
	justify-content: space-between;
	gap: 80px;
	padding-bottom: 20px;
}

.footer__container img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.footer__copywrite {
	background: #2C69E1;
}

.left-footer {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	min-width: 210px;
}

.left-footer__logo {
	height: 38px;
}
.left-footer__dmca {
	display: inline-block;
	height: 32px;
}
.left-footer__design {
	width: 171px;
	height: 83px;
}

.footer__center .footer__list {
	padding: 0;
	margin: 0;
}

.right-footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: 20px;
}

.right-footer__advantage {
	height: 120px;
	max-width: 150px;
}

@media (max-width: 992px) {

	.footer__container {
		gap: 30px;
	}

	.left-footer {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
		min-width: 210px;
	}

	.left-footer__logo {
		height: 38px;
	}
	.left-footer__dmca {
		height: 32px;
	}
	.left-footer__design {
		height: 83px;
	}

	.footer__center .footer__list {
		padding: 0;
		margin: 0;
	}

	.right-footer {
		justify-content: center;
	}

	.right-footer__advantage {
		height: 120px;
	}
}