/* Подключение шрифта Roboto */
@font-face {
    font-family: 'Roboto';
    src: url('/fonts/Roboto-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

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

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

@font-face {
    font-family: 'Roboto';
    src: url('/fonts/Roboto-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}


/* Устанавливаем Lato как базовый шрифт для всего контента */
html {
    font-family: 'Roboto', sans-serif;
}


#navbar{
	width:100%;
	height:60px;
	display:grid;
	grid-template-columns: minmax( 65px , 5% ) minmax( 200px , 90% ) minmax( 65px , 5% );
	background-color:#f0f0f0;
	align-items:center;
	justify-content:center;
}


#menuBurger{
	text-decoration:none;
	color:#333333;
	font-size:150%;
	text-transform:uppercase;
	cursor:pointer;
	text-align: right;
	padding-right:15px;
}


#menuGeo{
	padding-left:15px;
}


#menuMain{
	overflow:hidden;
}


#menuList{
	display:flex;
	align-items:center;
	justify-content:center;
	padding:0;
}

#menuList li{
	margin-right:50px;
}

#menuList li:last-child{
	margin-right:0;
}

#menuList a{
	text-decoration:none;
	color:#333333;
	font-size:120%;
	text-transform:uppercase;
}


#about{
	height:95vh;
	background-image:url('/images/BG-about.webp');
	background-size:cover;
}

#about h1{
	color:white;
	font-size:500%;
	padding-bottom:100px;
}

#about h2{
	color:white;
	font-size:300%;
	padding-bottom:100px;
}

#about a.button{
	color:white;
	font-size:150%;
	padding:20px 50px;
	background-color:#0eb8b8;
	text-decoration:none;
	border-radius:7px;
}

#about div.splashsemidark{
	width:100%;
	height:100%;
	display:grid;
	grid-template-rows:90% 10%;
	align-items:center;
	justify-content:center;
	background-color:rgba(0,0,0,0.55);
}



#about a.arrow{
	color:#ffffff;
	text-decoration:none;
	font-size:300%;
}

#about div.content{
	height:90%;
	text-align:center;
}

#about div.arrow{
	height:10%;
	text-align:center;
}


#menuListBurder{
	position:absolute;
	width:350px;
	margin:-100px 0 0 -25px;
	padding:50px;
	padding-top:125px;
	background:#e0e0e0;
	border-radius:7px;
	list-style-type:none;
	-webkit-font-smoothing:antialiased;
	transform-origin: 0% 0%;
	transform: translate(-100%, 0);
	transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
}

#menuListBurder a{
	text-decoration:none;
	line-height:2;
	color:#333333;
}


#details{
	display:grid;
	grid-template-columns:1fr minmax(250px,500px) minmax(250px,500px) 1fr;
	margin:100px;
}

#details div.images{
	display:flex;
	flex-wrap:wrap;
}

#details div.images img{
	width:220px;
	height:220px;
	padding:10px;
}

#details h3{
	font-size:300%;
	padding-bottom:20px;
}

#details p{
	line-height:1.7;
	padding-right:20px;
	padding-bottom:10px;
	padding-top:10px;
}


#achievements{
	display:grid;
	grid-template-columns:1fr minmax(350px,999px) 1fr;
	background-color:#f5f5f5;
}

#achievements h3{
	padding-top:70px;
	font-size:200%;
	font-weight:bold;
	padding-bottom:50px;
}

#achievements h4{
	font-size:150%;
	font-weight:bold;
	padding-bottom:25px;
}

#achievements p{
	line-height:1.5;
}

#achievements img{
	width:90px;
	height:90px;
	padding-bottom:20px;
}

#achievements div.content{
	width:283px;
	height:450px;
	padding:25px;
	text-align:center;
}


#foundation{
	display:grid;
	grid-template-columns:1fr minmax(300px,950px) 1fr;
	background-image:url('/images/BG-foundation.webp');
	background-size:cover;
	background-repeat:no-repeat;
	background-attachment:fixed;
	text-align:center;
}

#foundation h1{
	padding-top:100px;
	color:#ffffff;
	font-weight:bold;
	font-size:300%;
}

#foundation p{
	padding-top:50px;
	color:#ffffff;
	line-height:1.25;
	font-size:115%;
	font-weight:100;
}

#foundation a{
	padding:25px 50px;
	border-radius:5px;
	background-color:#0eb8b8;
	color:white;
	text-decoration:none;
	font-weight:bold;
	font-size:150%;
}

#foundationText{
	width:600px;
	text-align:left;
}


#news{
	display:grid;
	grid-template-columns:1fr minmax(500px,1000px) 1fr;
	padding:100px 0;
	background-color:#f2f2f2;
}

#news div.image{
	display:flex;
	min-width:250px;
	max-width:500px;
	padding-top:35px;
	padding-bottom:35px;
}

#news div.text{
	display:flex;
	flex-wrap:wrap;
	min-width:250px;
	max-width:500px;
	padding-top:35px;
	padding-bottom:35px;
}

#news div.text a{
	color:#ff8562;
}

#news div.image img{
	width:460px;
	padding:20px;
}

#news h2{
	font-size:300%;
	font-weight:bold;
}

#news h3{
	font-size:150%;
	font-weight:bold;
}

#news p{
	text-indent:25px;
	line-height:1.5;
	padding-top:25px;
}



#labaratory{
	display:grid;
	grid-template-columns:1fr minmax(580px,1160px) 1fr;
	background-color:#eeeeee;
}

#labaratory h3{
	font-weight:bold;
	font-size:200%;
}

#labaratory h4{
	font-size:150%;
	padding-top:50px;
	padding-bottom:50px;
}

#labContent{
	display:flex;
	flex-wrap:wrap;
	align-items:flex-start;
	justify-content:center;
}

#labContent div.group{
	display:flex;
	flex-wrap:wrap;
	width:580px;
}

#labContent div.item{
	width:290px;
	height:290px;
}

#labContent div.labText{
	background-color:#ffffff;
	font-weight:bold;
}



#map{
	display:grid;
	grid-template-columns:50% 50%;
	background-color:#292929;
}

#map div{
	height:100vh;
}

#map div.text{
	color:#ffffff;
}

#map div.text h3{
	font-weight:bold;
	padding-bottom:30px;
	font-size:200%;
}

#map div.text h4{
	display:inline;
	color:rgb(247,247,118);
	font-weight:100;
	font-size:90%;
}

#map div.text ul{
	line-height:2;
	list-style-type:circle;
}

#map div.text a{
	color:#ffffff;
}



#partners{
	display:grid;
	grid-template-columns:1fr minmax(500px,1000px) 1fr;
	background-color:#eeeeee;
}

#partners h1{
	font-weight:bold;
	font-size:200%;
	padding:70px 0;
}

#parContent{
	display:flex;
	justify-content:space-around;
	flex-wrap:wrap;
}

#parContent div.item{
	display:flex;
	justify-content:space-around;
	margin-bottom:50px;
	width:500px;
}

#parContent div.parText{
	width:400px;
	padding:0 30px 0 20px;
	display:flex;
	justify-content:center;
	align-items:flex-start;
	flex-direction:column;
}

#parContent div.parText name{
	font-size:90%;
	font-weight:300;
}

#parContent div.parText special{
	font-size:90%;
	color:#333333;
	font-weight:300;
}

#parContent div.parText profession{
	font-size:90%;
	font-weight:bold;
	padding:10px 0;
}

#parContent div.parText a{
	color:#333333;
	font-weight:100;
	font-size:80%;
}

#parContent div.parImg{
	width:100px;
}

#parContent div.parImg img{
	border-radius:50%;
}



#contact{
	height:95vh;
	background-image:url('/images/BG-contact.webp');
	background-size:cover;
}

#contact h1{
	color:white;
	font-size:500%;
	padding-bottom:100px;
}

#contact h2{
	color:white;
	font-size:300%;
	padding-bottom:100px;
}

#contact h3{
	color:white;
	font-size:200%;
	padding-bottom:100px;
}

#contact a.button{
	color:white;
	font-size:150%;
	padding:20px 50px;
	background-color:#0eb8b8;
	text-decoration:none;
	border-radius:7px;
}

#contact div.splashsemidark{
	width:100%;
	height:100%;
	display:grid;
	grid-template-rows:90% 10%;
	align-items:center;
	justify-content:center;
	background-color:rgba(0,0,0,0.75);
}

#contactForm{
	display:flex;
	align-items:center;
	justify-content:space-around;
	padding:10px;
}

#contactForm .input-field{
	background-color:transparent;
	border:1px solid #ffffff;
	border-radius:4px;
	padding:15px;
	margin:0 10px;
	color:#f0f0f0;
	width:250px;
}

#contactForm .submit-button{
	background-color:#0eb8b8;
	color:white;
	border:none;
	padding:15px 30px;
	text-transform:uppercase;
	border-radius:5px;
	cursor:pointer;
	font-weight:bold;
}

#contactForm .submit-button:hover{
	background-color:#069c9c;
}



#contacts{
	display:grid;
	grid-template-columns:1fr 300px 1fr;
}

#contacts div.content{
	padding:70px 0;
	display:flex;
	flex-direction:column;
	justify-content:space-around;
}

#contacts div.content h1{
	padding-bottom:30px;
	font-size:200%;
	font-weight:bold;
}

#contacts div.content a{
	padding-bottom:30px;
	font-weight:bold;
	color:#000000;
}

#contacts div.content h2{
	padding-bottom:20px;
}



#footer{
	height:69px;
	background-color:#000000;
	display:flex;
	align-items:center;
	justify-content:space-around;
}

#footer a{
	color:#696969;
	text-decoration:none;
	font-size:90%;
}


.c{
	text-align:center;
}


.l{
	text-align:left;
}


.db{
	display:block;
}


.dn{
	display:none;
}


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


.flexlc{
	display:flex;
	align-items:center;
	justify-content:left;
	flex-wrap:wrap;
}


.flexccv{
	display:flex;
	align-items:center;
	justify-content:center;
	flex-wrap:wrap;
	flex-direction:column;
}


.i{
	display:inline;
}


.ib{
	display:inline-block;
}


.flexC{
	display:flex;
	align-items:center;
}


.bgBlack55{
	background-color:rgba(0,0,0,0.55);
}