/* Fonts */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');


/* Reset */

* {padding: 0;	margin: 0; -webkit-tap-highlight-color:transparent;}
*, *:before, *:after {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
:focus, :active, a:focus, a:active {outline: none;}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
html, body {
	width: 100%;
	min-height: 100%;
	font-size: 100%;
	line-height: normal;
	-webkit-text-size-adjust: none
}
html {
	display: flex; /* это растягивает body на всю высоту */
}

input, button, textarea, select {
	font-family: inherit;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	border-radius: 0;
}
input::placeholder {opacity: 1;}
input::-ms-clear {display: none;}
button::-moz-focus-inner {padding: 0; border: 0;}
button, .button, input[type="button"], input[type=submit] {cursor: pointer;}
button[disabled], input[disabled] {cursor: default;}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {display: none;}

a, a:hover, a:visited {text-decoration: none;}
img {vertical-align: top; max-width: 100%;}

h1,h2,h3,h4,h5,h6 {font-size: inherit; font-weight: normal;}

ol, ul {list-style: none;}
ol {counter-reset: myCounter;}
ol li:before {
	counter-increment: myCounter;
	content:counter(myCounter);
	margin-right: 5px;
}

table {border-collapse: collapse; border-spacing: 0;}
th {font-weight: inherit;}






/* Global */

:root {
	--white: #FFFFFF;
	--black: #000000;
	--gray: #EDEDED;
	--blue: #2F80ED;
	--green: #219653;
	--red: #EB5757;
	--yellow: #F2C94C;
}

body {
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 16px;
	color: var(--black);
	background: var(--gray); 
}

.page {
	width: 100%;
	min-width: 320px;
	min-height: 100%;
	display: flex;
	flex-direction: column;
	position: relative;
}

a, a:before, button {
	transition: 0.3s;
}
a {
	color: var(--blue);
	text-decoration: underline;
}
a:hover {
	text-decoration: none;
}




/* Main */

.main {
	flex: 1;
	display: grid;
	align-items: center;
	width: 100%;
	max-width: 1365px; 
	padding: 30px;
	margin: 0 auto;
}
.main_columns {
	grid-template-columns: repeat(2, auto);
	grid-gap: 30px;
	align-items: stretch;
}
.main_columns .social {
	margin-bottom: -25px;
}
.main_columns + .footer {
	position: absolute;
	bottom: 0;
	right: 0;
}
.main__sticky {
	min-height: calc(100vh - 60px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: sticky;
	top: 30px;
}





/* Header */

.header_center {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.header__logo {
	font-weight: 500;
	font-size: 40px;
	display: grid;
	grid-template-columns: repeat(2, auto);
	grid-gap: 0.25em;
	align-items: center;
	justify-content: start;
	margin-bottom: 25px;
}
.header__logo img {
	width: 3em;
}
.header__title {
	font-weight: 700;
	font-size: 40px;
	max-width: 900px;
	margin-bottom: 25px;
}
.header__desc {
	font-weight: 500;
	font-size: 24px;
	max-width: 900px;
	margin-bottom: 25px;
}






/* Checklist */

.checklist {
	display: flex;
	flex-wrap: wrap;
	width: calc(100% + 7px);
	margin-bottom: 25px;
}
.checklist_center {
	justify-content: center;
}
.checklist__item {
	display: block;
	background: #fff;
	border-radius: 10px;
	padding: 15px;
	font-family: 'Roboto';
	font-weight: 300;
	font-size: 14px;
	line-height: normal;
	margin: 0 7px 7px 0;
}
.checklist__item::before {
	content:'';
	display: inline-block;
	width: 14px;
	height: 14px;
	background: url(../img/check.png) center no-repeat;
	background-size: contain;
	margin: 0 5px -2px 0;
}
.checklist__item_big {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-gap: 12px;
	align-items: center;
}
.checklist__item_big::before {
	width: 32px;
	height: 32px;
	margin: 0;
}





/* Social */

.social {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	width: calc(100% + 25px);
}
.social_center {
	justify-content: center;
}
.social__item {
	display: block;
	border-radius: 20px;
	background: var(--white);
	box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.08), 0px 4px 4px 0px rgba(0, 0, 0, 0.04);
	padding: 15px 10px;
	width: fit-content;
	max-width: 211px;
	margin: 0 25px 25px 0;
	display: grid;
	grid-template-columns: 48px 1fr;
	grid-gap: 5px;
	align-items: center;
	text-decoration: none;
	color: var(--black);
	font-family: 'Roboto', sans-serif;
}
.social__item_big {
	max-width: 286px;
	grid-template-columns: 82px 1fr;
}
.social__item_red {
	color: var(--white);
	background: var(--red);
}
.social__item_green {
	color: var(--white);
	background: var(--green);
}
.social__icon img {
	width: 100%;
}
.social__text {
	font-weight: 300;
	font-size: 10px;
	line-height: 1.2em;
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 5px;
}
.social__text b {
	font-weight: 700;
	font-size: 16px;
	line-height: normal;
	display: block;
}
@media (hover: hover) {
	.social__item:hover {
		transform: scale(1.07);
	}
}





/* Media */

.media {
	display: block;
	position: relative; 
	width: 100%;
	height: 0;
	border-radius: 20px;
	overflow: hidden;
	isolation: isolate;
}
.media_big {
	padding-bottom: 45%;
	margin-bottom: 25px;
}
.media_square {
	width: 735px;
	padding-bottom: 100%;
}
.media_portrait {
	width: 470px;
	padding-bottom: 150%;
}
.media_landscape {
	width: 735px;
	padding-bottom: 65%;
}
.media__image,
.media__video,
.media__slider {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}
.media__image img,
.media__video video {
	object-fit: cover;
	object-position: center;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.media__video iframe {
	width: 100%;
	height: 100%;
}
.media__sound {
	width: 40px;
	height: 40px;
	position: absolute;
	bottom: 30px;
	right: 30px;
	border: none;
	background: url(../img/sound-off.svg) center no-repeat;
	background-size: contain;
}
.media__sound_on {
	background: url(../img/sound-on.svg) center no-repeat;
	background-size: contain;
}
@media (hover: hover) {
	.media__sound:hover {
		filter: brightness(150%);
	}
}
.media__slider .media__sound {
	bottom: 60px;
}





/* Slider */

.slick-list {
	height: 100%;
	overflow: hidden;
}
.slick-track {
	height: 100%;
	display: flex;
}
.slick-slide {
	position: relative;
}

.slick-arrow {
	position: absolute;
   top: 20%;
	bottom: 25%;
	width: 20%;
	cursor: pointer;
	border: none;
	background: none;
	font-size: 0;
	z-index: 1000;
}
.slick-next {
	right: 0;
}
.slick-prev {
	left: 0;
}

.progress {
	position: absolute;
	bottom: 25px;
	left: 30px;
	right: 30px;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	grid-gap: 18px;
	z-index: 1001;
}
.progress__item {
	cursor: pointer;
}
.progress__bar {
	width: 100%;
	height: 10px;
	background: var(--white);
	border-radius: 50px;
}
.progress__line {
	height: 10px;
	background: var(--blue);
	border-radius: 50px;
}




/* Footer */

.footer {
	padding: 10px 30px;
	font-size: 10px;
	text-align: right;
}





/* Responsive */

/* 1280 */

@media (max-width:1365px) {
	.main {max-width: 1280px;}
	
	.header__logo,	.header__title {font-size: 38px;}
	.header__desc {font-size: 22px;}

	.media_square, .media_landscape {width: 650px;}
	.media_portrait {width: 430px;}
}

/* 1024 */

@media (max-width:1279px) {
	.main {max-width: 1024px;}

	.header__logo,	.header__title {font-size: 34px; max-width: 800px; margin-bottom: 20px;}
	.header__desc {font-size: 20px; max-width: 800px;}

	.media_square, .media_landscape {width: 412px;}
	.media_portrait {width: 360px;}

	.progress__bar, .progress__line {height: 8px;}

	.main_columns .media__sound {width: 25px; height: 25px; bottom: 20px; right: 20px;}
	.main_columns .media__slider .media__sound {bottom: 30px;}
	.main_columns .progress {bottom: 10px; left: 20px; right: 20px; grid-gap: 6px;}
	.main_columns .progress__bar, .main_columns .progress__line {height: 4px;}
}

/* 768 */

@media (max-width:1023px) {
	.main {max-width: 768px;}

	.header__logo,	.header__title {font-size: 30px;}
	.header__desc {font-size: 18px;}

	.media_square, .media_landscape {width: 320px;}
	.media_portrait {width: 300px;}
	.media__sound {width: 35px; height: 35px;}
	.media__slider .media__sound {bottom: 45px;}
	
	.progress {bottom: 20px; grid-gap: 10px;}
	.progress__bar, .progress__line {height: 6px;}
}

/* 414 */

@media (max-width:767px) {
	.main {max-width: 414px; padding: 30px 20px;}
	.main_columns {grid-template-columns: 1fr;}
	.main_columns .social {margin-bottom: 0;}
	.main_columns + .footer {position: static;}
	.main__sticky {min-height: auto;}
	
	.header__logo,	.header__title {font-size: 24px;}
	.header__desc {font-size: 16px;}
	
	.checklist {margin-bottom: 20px;}
	.checklist__item {padding: 13px;}
	
	.social {width: calc(100% + 15px);}
	.social__item {margin: 0 15px 15px 0;}
	
	.media {width: calc(100% + 40px); margin-left: -20px;}
	.media_big {padding-bottom: 55%;}
	.media__sound {width: 25px; height: 25px; bottom: 20px; right: 20px;}
	.media__slider .media__sound {bottom: 30px;}
	
	.progress {bottom: 10px; left: 20px; right: 20px; grid-gap: 6px;}
	.progress__bar, .progress__line {height: 4px;}
	
	.footer {padding: 10px 20px;}
	
	.main_mediatop .main__content {display: flex; flex-direction: column;}
	.main_mediatop .media, .main_mediatop .main__sidebar {order: 1;}
	.main_mediatop section {order: 2;}
}
@media (max-width:414px) {
	.media {border-radius: 0;}
	.main_mediatop {padding-top: 0;}
}

/* 375 */

@media (max-width:385px) {
	.checklist__item {width: 100%;}
	.checklist__item br {display: none;}
}

/* 360 */

@media (max-width:370px) {
	.main, .footer {padding-left: 15px; padding-right: 15px;}
}

/* 320 */

@media (max-width:350px) {
	.header__logo,	.header__title {font-size: 22px;}
	.header__desc {font-size: 15px;}
}