* {
	box-sizing: border-box;
	font-family: 'PP Radio Grotesk'; 
}

:root {
	--black: #0D0E11;
	--white: #EBEBEB;
	--gray: #C0BBBB;
	--red: #B80000;
    --pink: #A57E7E;
	--blue: #2C39AD;
}

body, html {
  background-color: var(--black); 
  padding: 0;
  margin: 0;
}


@font-face {
    font-family: 'PP Radio Grotesk';
    src: url('font/PPRadioGrotesk-Regular.eot');
    src: local('PP Radio Grotesk Regular'), local('PPRadioGrotesk-Regular'),
         url('font/PPRadioGrotesk-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'PP Radio Grotesk';
    src: url('font/PPRadioGrotesk-Ultralight.eot');
    src: local('PP Radio Grotesk Ultralight'), local('PPRadioGrotesk-Ultralight'),
         url('font/PPRadioGrotesk-Ultralight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'PP Radio Grotesk';
    src: url('font/PPRadioGrotesk-Black.eot');
    src: local('PP Radio Grotesk Black'), local('PPRadioGrotesk-Black'),
        url('font/PPRadioGrotesk-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

.gap8 {	gap: 8px; }
.gap16 { gap: 16px; }
.gap24 { gap: 24px; }
.gap32 { gap: 32px; }
.gap40 { gap: 40px; }
.gap64 { gap: 64px; }
.gap128 { gap: 128px; }

.flexrow { display: flex; flex-direction: row; }
.flexcolumn { display: flex; flex-direction: column; }

header {
	background-image: url("img/main1.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	height: 250px;
}

.missionimp {
	background-image: url("img/mission1440.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	height: 250px;
}

.studyimp {
	background-image: url("img/study.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	height: 250px;
}

.navitem {
font-family: PP Radio Grotesk;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
margin: 0;
color: var(--white);
text-decoration: none;
}

.navitem:hover {
color: var(--pink);
text-decoration: underline;
}

.navitemfooter {
font-family: PP Radio Grotesk;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
margin: 0;
color: var(--black);
text-decoration: none;
}

.navitemfooter:hover {
color: var(--pink);
text-decoration: underline;
}

#navweb {
	display: none;
	flex-direction: row;
	margin: 40px 5% 0 5%;
	justify-content: space-between;
	align-items: flex-end;

}

#navmob {
	display: flex;
	flex-direction: row;
	margin: 24px 16px 0 16px;
	justify-content: space-between;
	align-items: flex-end;
}

.logo {
	height: 40px;
	width: 111px;
}


.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 0.9);
  overflow-x: hidden;
  transition: 0.5s;
}

.overlay-content {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 18px;
  color: var(--white);
  display: block;
  transition: 0.3s;
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

.lights {
	margin: 0 16px 0 16px;
	position: relative;
	top: -60px;
	border-radius: 1000px;
	background: var(--black);
	padding: 16px;
	justify-content: space-between;
	align-items: center;
	background: linear-gradient(var(--black), var(--black)) padding-box, linear-gradient(rgba(100, 183, 206, 0.3), rgba(100, 183, 206, 0)) border-box;
	border: 1px solid transparent;
}

.yey {
	width: 82px;
	height: 23px;
	border-radius: 1000px;
	background: #F3FFF6;
	box-shadow: 0px 0px 32px 0px #0043E6, 0px 0px 74px 0px #66EFFF inset;
	filter: blur(12px);
}

h1 {color: var(--blue);
font-size: 32px;
font-style: normal;
font-weight: 400;
line-height: 100%;
margin: 0;
}

h2 {
	margin: 16px 0 0 0;
	font-size: 32px;
	font-style: normal;
	font-weight: 900;
	line-height: 100%;
	text-transform: uppercase;
}

h3 {
color: var(--white);
font-size: 24px;
font-style: normal;
font-weight: 400;
line-height: 100%; 
margin: 0;
}

h4 {
	color: var(--blue);
	font-size: 24px;
	font-style: normal;
	font-weight: 400;
	line-height: 120%;
	margin: 0;
}

h5 {
	margin: 0;
	font-size: 24px;
	font-style: normal;
	font-weight: 400;
	line-height: 150%; 
	color: var(--gray);
}

.photolist {
display: flex;
align-items: flex-start;
align-content: flex-start;
gap: 40px;
flex-wrap: wrap;
}

p {
	margin: 16px 0 0 0;
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	line-height: 150%; 
}

li { margin-top: 8px; 	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	line-height: 160%; }

#about {
	display: flex;
	flex-direction: row;
	justify-content: center;
	margin-bottom: 96px;
}

#blog {
	display: flex;
	flex-direction: row;
	justify-content: center;
	margin-top: 0px;
	padding-bottom: 96px;
	padding-top: 96px;
	background-color: var(--white);
}

#activity {
	display: flex;
	flex-direction: row;
	justify-content: center;
	margin-top: 64px;
	padding-bottom: 96px;
	padding-top: 96px;
	background-color: var(--white);
}

.textabout {
	display: flex;
	flex-direction: column;
	margin: 0 16px 0 16px;
	justify-content: space-between;
	align-items: flex-start;
}

.textteam {
	display: flex;
	flex-direction: column;
	margin: 0 16px 0 16px;
	justify-content: space-between;
	align-items: flex-start;
}

.textstudy {
	display: flex;
	flex-direction: column;
	margin: 64px 16px 64px 16px;
	align-items: flex-start;
}

.deleft {
	width: 16px;
	background-image: url("img/deleft.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-color: var(--white);
}

.deright {
	width: 16px;
	background-image: url("img/deright.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-color: var(--white);
}

.protext {
	display: flex;
	flex-direction: column;
	background-color: var(--gray);
	padding: 64px 24px;
}

.protextfooter {
	display: flex;
	flex-direction: column;
	background-color: var(--gray);
	padding: 64px 24px;
	justify-contant: flex-start;
	gap: 32px;
}

#products {
	display: flex;
	flex-direction: row;
	justify-content: center;
}

#contacts {
	display: flex;
	flex-direction: row;
	justify-content: center;
	width: 100%;
}

.radiator {
	display: flex; 
	padding: 0px 32px; 
	flex-direction: column; 
	justify-content: center; 
	align-items: center; gap: 8px; flex: 1 0 0; align-self: stretch; 
	opacity: 0.2;
}

.cardcontainer {
	display: flex;
	margin: 0 16px;
	padding: 16px;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	border-radius: 24px;
	background: linear-gradient(#17181B, #17181B) padding-box, linear-gradient(rgba(100, 183, 206, 0.3), rgba(100, 183, 206, 0)) border-box;
	border: 1px solid transparent;
}

.buttonlamp {
	padding: 16px;
	justify-content: center;
	align-items: center;
	gap: 16px;
	border-radius: 1000px;
	border: 1px solid var(--white);
}

.buttonlamp:hover {
	border: 1px solid var(--blue);
}

.buttontext {
	color: var(--white);
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	line-height: 100%;
	text-transform: uppercase;
	text-decoration: none;
}

.subsec {
	padding: 32px 16px;
}

.detailshead {
	position: relative; left: 0; justify-contant: flex-start; align-items: center; 
}

.tablerow {
	padding: 8px 16px;
	align-items: flex-start;
	gap: 16px;
	border-radius: 8px;
	background: linear-gradient(#17181B, #17181B) padding-box, linear-gradient(rgba(100, 183, 206, 0.3), rgba(100, 183, 206, 0)) border-box;
	border: 1px solid transparent;
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	line-height: 120%; 
	color: var(--gray);
}

.teamhead {
display: flex;
width: 100%;
padding: 8px 16px;
align-items: flex-start;
gap: 24px;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.20);
background: rgba(255, 255, 255, 0.04);
backdrop-filter: blur(16px);
}

.parametr { width: 65%; }

.parametr80 { width: 80%; }

.parametr2 { width: 100%; font-weight: 600; color: var(--pink); }

.parcont { width: 35% }

.parcont20 { width: 20% }

.audiovideo { flex: 1; margin: 64px 16px 64px 16px; }

#chiefweb { display: none; margin-bottom: 64px; }

#chiefweb3 { display: none; margin-bottom: 64px; }

.chiefweb2 { display: none; margin-bottom: 64px; margin-top: 64px; }

#chiefmob { margin: 64px 16px 64px 16px; }

#chiefmob3 { margin: 64px 16px 64px 16px; }

.chiefmob2 { margin: 64px 16px 64px 16px; }

@media only screen and (min-width: 600px) {
.lights { padding: 32px; top: -70px;}
}

@media only screen and (min-width: 992px) {
header { height: 350px; }
.logo { height: 80px; width: 222px; }
.textabout { flex-direction: row; }
.deright { width: 20%; }
.deleft { width: 20%; }
.protext { width: 60%; padding: 96px 48px; }
h2 { font-size: 40px; }
.radiator {	padding: 0px 80px; }
.cardcontainer { width: 60%; margin: 0;}
h1 { font-size: 64px; }
h3 { font-size: 32px; }
.cardcontainer { padding: 24px; }
.subsec { padding: 64px 20%; }
.detailshead { left: -65px; }
h4 { font-size: 32px; }
.audiovideo { margin: 64px 20% 64px 20%; }
#chiefweb { display: flex; }
#chiefweb3 { display: flex; }
.chiefweb2 { display: flex; }
#chiefmob { display: none; }
#chiefmob3 { display: none; }
.chiefmob2 { display: none; }
.protextfooter { flex-direction: row; gap: 64px;}
}

@media only screen and (min-width: 1200px) {
.textabout { margin: 0 20% 0 20%;}
.textteam { margin: 0 20% 0 20%; }
.textstudy { margin: 64px 20% 64px 20%; }
#navweb {display: flex;}
#navmob {display: none;}
header { height: 560px; }
.missionimp { height: 560px; }
.studyimp { height: 560px; }
.lights { margin: 0 5% 0 5%; top: -105px; padding: 64px; }
.yey {	width: 164px; height: 46px;	box-shadow: 0px 0px 64px 0px #0043E6, 0px 0px 128px 0px #66EFFF inset; filter: blur(24px); }
}

@media only screen and (min-width: 1440px) {

}

@media only screen and (min-width: 1600px) {
header { background-image: url("img/main.jpg"); }
.missionimp { background-image: url("img/mission.jpg"); }
.studyimp { background-image: url("img/study1600.jpg"); }
}