/* Fonts */

@font-face {
	font-family: 'Montserrat';
	src: url('../fonts/Montserrat-Light.eot');
	src: url('../fonts/Montserrat-Light.eot?#iefix') format('embedded-opentype'),
		url('../fonts/Montserrat-Light.woff') format('woff'),
		url('../fonts/Montserrat-Light.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
}
@font-face {
	font-family: 'Montserrat';
	src: url('../fonts/Montserrat-Medium.eot');
	src: url('../fonts/Montserrat-Medium.eot?#iefix') format('embedded-opentype'),
		url('../fonts/Montserrat-Medium.woff') format('woff'),
		url('../fonts/Montserrat-Medium.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
}
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Bold.eot');
    src: url('../fonts/Montserrat-Bold.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Montserrat-Bold.woff') format('woff'),
    url('../fonts/Montserrat-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}
@font-face {
	font-family: 'Montserrat';
	src: url('../fonts/Montserrat-ExtraBold.eot');
	src: url('../fonts/Montserrat-ExtraBold.eot?#iefix') format('embedded-opentype'),
		url('../fonts/Montserrat-ExtraBold.woff') format('woff'),
		url('../fonts/Montserrat-ExtraBold.ttf') format('truetype');
	font-weight: 800;
	font-style: normal;
}
@font-face {
	font-family: 'Montserrat';
	src: url('../fonts/Montserrat-Black.eot');
	src: url('../fonts/Montserrat-Black.eot?#iefix') format('embedded-opentype'),
		url('../fonts/Montserrat-Black.woff') format('woff'),
		url('../fonts/Montserrat-Black.ttf') format('truetype');
	font-weight: 900;
	font-style: normal;
}


/* 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
}

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: #01162e;
	--gradient: linear-gradient(45deg, #029ffe, #11f5e6);
	--darkgradient: linear-gradient(45deg, #0a2342, #01162e);
	--adaptive: ((100vw - 375px) / (1536 - 375));
}

body {
	font-family: 'Montserrat', sans-serif;
	font-weight: 300;
	font-size: 16px;
	color: var(--white);
	background: var(--black);
	overflow-x: hidden;
}

.page {
	width: 100%;
	min-width: 320px;
	overflow: hidden;
	position: relative;
}

.section {
	min-height: 100vh;
	padding: 110px 24px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
}
.section:nth-child(2n) {
	background: var(--darkgradient);
}

a, a:before, button {
	transition: 0.3s;
}







/* Menu */

.menu {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 66px;
	padding: 0 24px;
	background: var(--gradient);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 16;
}
.menu__list {
	display: grid;
	grid-auto-flow: column;
	grid-gap: 35px;
}
.menu__link {
	font-weight: 500;
	font-size: 14px;
	color: var(--black);
	white-space: nowrap;
}
.menu__link_active {
	color: var(--white);
	transition-delay: 0.3s;
}
@media (hover: hover) {
	.menu__link:hover {
		color: var(--white);
	}
}





/* Portfolio */

.portfolio__title {
	font-weight: 700;
	font-size: clamp(24px, 24px + (36 - 24) * var(--adaptive), 36px);
	text-align: center;
	text-transform: uppercase;
	display: block;
	max-width: 920px;
	margin: 0 auto;
	margin-bottom: 1em;
}
.portfolio__list {
	column-count: 6;
	column-gap: 30px;
}
.portfolio__link {
	display: block;
	overflow: hidden;
	isolation: isolate;
	position: relative;
	transition: 0.7s;
	margin-bottom: 30px;
	background: #002a4f;
}
.portfolio__link::before {
	content:'Перейти';
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	color: var(--white);
	z-index: 2;
	padding: 15px 30px;
	background: linear-gradient(45deg, #029ffe, #11f5e6);
	font: 300 15px 'Montserrat', sans-serif;
	text-decoration: none;
	text-align: center;
	color: var(--white);
	letter-spacing: normal;
	border-radius: 50px;
	transition: 0.7s;
	opacity: 0;
}
.portfolio__link img {
	width: 100%;
	height: auto;
	transition: 0.7s;
}
.portfolio__link:hover {
	transform: scale(1.05);
}
.portfolio__link:hover img {
	transform: scale(1.05);
	opacity: 0.4;
}
.portfolio__link:hover:before {
	opacity: 1;
	box-shadow: 0px 0px 32px 0 rgba(27, 189, 242, .3);
}



/* Loading */

/* прячем весь контент в скелетных блоках */
.loading .portfolio__link img {
	opacity: 0;
}
/* добавляем серую плашку к скелетным блокам вместо контента */
/* задаем фиксированные размеры для каждого элемента скелета, так как в них не будет контента при загрузке */
.skeleton.card__title {
	width: 430px;
	height: 36px;
}

/* Добавляем анимацию */
.loading .portfolio__link::after {
	display: block;
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transform: translateX(-100%);
	background: linear-gradient(90deg, transparent,
			  rgba(255, 255, 255, 0.05), transparent);
	animation: loading 1.5s infinite;
}
@keyframes loading {
	100% {
		 transform: translateX(100%);
	}
}





/* Contacts */

.contacts {
	text-align: center;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1;
	transition: 0.5s;
}
.contacts_hide {
	transform: translateY(calc(100% - 95px));
}
.contacts__buttons {
	padding: 20px;
	height: 95px;
	position: relative;
}
.contacts__button {
	display: inline-block;
	padding: 15px 30px;
	background: linear-gradient(45deg, #029ffe, #11f5e6);
	font: 400 20px 'Montserrat', sans-serif;
	text-decoration: none;
	color: #ffffff;
	letter-spacing: normal;
	border-radius: 50px;
	border: none;
	-webkit-transition: 0.3s;
	transition: 0.3s;
	box-shadow: 0px 0px 32px 0 rgba(27, 189, 242, .3);
	position: relative;
	top: -10px;
}
.contacts__button:hover {
	box-shadow: 0 0 5px rgba(3,233,244,0.5),
              0 0 12px rgba(3,233,244,0.5),
              0 0 25px rgba(3,233,244,0.5),
              0 0 50px rgba(3,233,244,0.5);
}
.contacts__button_hide {
	transform: scale(0);
}

.contacts__close {
	width: 40px;
	height: 40px;
	border: none;
	background: none;
	position: relative;
	transition: 0.3s;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
.contacts__close::after, .contacts__close::before {
	content: '';
	display: block;
	width: 140%;
	left: -20%;
	position: absolute;
	top: 50%;
	height: 5px;
	border-radius: 10px;
	background: linear-gradient(45deg, #029ffe, #11f5e6);
	box-shadow: 0px 0px 32px 0 rgba(27, 189, 242, 0.75);
}
.contacts__close::after {
	transform: translateY(-50%) rotate(45deg);
}
.contacts__close::before {
	transform: translateY(-50%) rotate(-45deg);
}
.contacts__close:hover {
	filter: brightness(120%);
}
.contacts__close_hide {
	transform: translate(-50%,-50%) scale(0);
}

.contacts__content {
	background: rgba(1,18,37,0.98);
}
.contacts__container {
	max-width: 1140px;
	margin: 0 auto;
	padding: 80px 30px;
	position: relative;
}

.contacts__email {
	display: block;
	color: #fff;
	font-size: 36px;
	font-weight: 700;
	text-align: center;
	width: fit-content;
	margin: 0 auto;
	position: relative;
}
.contacts__email:after {
	content: '';
	display: block;
	width: 70px;
	height: 2px;
	background: #1bbdf2;
	margin: 20px auto;
}
.contacts__email:hover {
	text-shadow: 0 0 5px #03e9f4,
              0 0 25px #03e9f4,
              0 0 50px #03e9f4,
              0 0 100px #03e9f4;
} 

.contacts__social {
	margin: 40px 0;
}
.contacts__social .social__link {
	padding: 0 24px;
	font-size: 26px;
	color: #fff;
}
.contacts__social .social__icon {
	width: 28px;
	height: 30px;
	transition: 0.3s;
}
.contacts__social .social__icon_vk {width: 32px;}
.contacts__social .social__icon_skype {width: 25px;}

.contacts__social .social__icon:hover {
	color: #1bbdf2;
}

.contacts__copyright {
	color: #fff;
	opacity: 0.2;
}
.contacts__copyright:hover {
	color: #1bbdf2;
	text-decoration: underline;
	text-decoration-skip-ink: none;
	text-underline-offset: 6px;
	text-decoration-thickness: 1px;
	opacity: 1;
}






/* Responsive */

@media (max-width:1535px) {
	.portfolio__list {column-count: 5;}
}

@media (max-width:1279px) {
	.portfolio__list {column-count: 4;}
}

@media (max-width:1000px) {
	.portfolio__list {column-count: 3;}
	.menu {display: none;}
	.section:first-child {padding-top: 40px;}
}

@media screen and (max-width:767px) {
	.contacts__container {padding: 60px 30px;}
	.contacts__email {font-size: 32px;}
	.contacts__social .social__link {padding: 20px;}
	.contacts__social .social__icon {width: 24px; height: 30px;}
	.contacts__social .social__icon_vk {width: 30px;}
	.contacts__social .social__icon_skype {width: 22px;}
}

@media (max-width:639px) {
	.portfolio__list {column-count: 2;}
	.section {padding: 60px 24px;}
}

@media screen and (max-width:374px) {
	.contacts__email {font-size: 26px;}
	.contacts__social .social__link {padding: 15px;}
	.contacts__copyright {font-size: 14px;}
}