* {padding:0;margin:0;}
html{width:100%;height:100%;box-sizing:border-box;padding:0;margin:0;font-size:1em;color:black;background-color:ivory;overflow-y:auto;overflow-x:hidden;}/*с помощью box-sizing:border-box включаем paddingи в размеры блока; задаём размер шрифта корневого элемента для вёрстки с rem на случай отказа медийных запросов ниже*/

/*ЗАДАЁМ РАЗМЕР ШРИФТА КОРНЕВОГО ЭЛЕМЕНТА В ЗАВИСИМОСТИ ОТ ШИРИНЫ ЭКРАНА УСТРОЙСТВА:*/
@media screen and (max-device-width: 800px) {html{font-size:0.75em;}}/*для устройств с шириной экрана менее 800px*/
@media screen and (min-device-width: 800px) {html{font-size:0.75em;}}/*для устройств с шириной экрана более 800px*/
@media screen and (min-device-width: 900px) {html{font-size:0.8em;}}
@media screen and (min-device-width: 1000px) {html{font-size:0.85em;}}
@media screen and (min-device-width: 1100px) {html{font-size:0.9em;}}
@media screen and (min-device-width: 1200px) {html{font-size:0.95em;}}
@media screen and (min-device-width: 1300px) {html{font-size:1em;}}
@media screen and (min-device-width: 1400px) {html{font-size:1.05em;}}
@media screen and (min-device-width: 1500px) {html{font-size:1.1em;}}
@media screen and (min-device-width: 1600px) {html{font-size:1.15em;}}
@media screen and (min-device-width: 1700px) {html{font-size:1.2em;}}
@media screen and (min-device-width: 1800px) {html{font-size:1.25em;}}
@media screen and (min-device-width: 1900px) {html{font-size:1.3em;}}
@media screen and (min-device-width: 2000px) {html{font-size:1.35em;}}
@media screen and (min-device-width: 2100px) {html{font-size:1.4em;}}
@media screen and (min-device-width: 2200px) {html{font-size:1.45em;}}
@media screen and (min-device-width: 2300px) {html{font-size:1.5em;}}
@media screen and (min-device-width: 2500px) {html{font-size:1.55em;}}
@media screen and (min-device-width: 2600px) {html{font-size:1.6em;}}
/*разрешение моего ноутбука 1366x768*/
/*разрешение моего большого монитора 1920x1080*/
/*разрешение моего нового смартфона 2280x1080*/
/*разрешение моего старого смартфона 1280×720*/
/*эмпирически значение device-width моего смартфона 350-400 */
/*пример обводки: text-shadow: #ccff00 2px 0 0px, #ccff00 0 2px 0px, #ccff00 -2px 0 0px, #ccff00 0 -2px 0px;*/

/* ОБЩИЕ СВОЙСТВА */
@media (orientation: portrait) {.not_display_on_portraits{display:none;}}/*не отображать на устройствах с портретной ориентацией*/
@media (orientation: landscape) {.not_display_on_landscapes{display:none;}}/*не отображать на устройствах с горизонтальной ориентацией*/
.favorite_color{color:steelblue;}
body {width:100%;height:100%;overflow:auto;font-family:'Montserrat Alternates',sans-serif;}/*'Nunito', 'Alice', serif, 'Gabriela' */
.no_line_breaks,.nowrap{white-space: nowrap;}
.text_align_center{text-align:center;}
.text_align_justify{text-align:justify;}
.text_align_left{text-align:left;}
.text_align_right{text-align:right;}
.color_red{color:red;}
.color_green{color:green;}
.color_dimgrey{color:Dimgrey;}
.color_grey{color:grey;}
.color_yellow{color:yellow;}
.bold{font-weight:bold;}
.italic{font-style:italic;}
.display_inline{display:inline-block;}

.styled_block{width:100%;box-sizing:border-box;text-align:justify;
font-size:1.5rem;line-height:2.0rem;border-radius:2rem;
border-style:solid;border-color:steelblue;border-width:2px;
padding:2%;margin-bottom:2%;}/*формат анкет и блоков*/


h1{width:100%;box-sizing:border-box;padding:2% 2% 2% 2%;
font-family: 'Montserrat', sans-serif;font-style:italic;font-weight:bold;
color:steelblue;text-align:center;font-size: 2.5rem;line-height:3.0rem;}

.form,#confirmation_of_sent_message{width:100%;box-sizing:border-box;text-align:left;
font-size:1.5rem;line-height:2.0rem;border-radius:2rem;
border-style:solid;border-color:steelblue;border-width:2px; /*border-color:gray;border-width:0.05rem; */
padding:2%;margin:0%;}
legend{color:steelblue;font-weight:bold;}
input, select{padding:0.1rem;font-family:Arial,Verdana,sans-serif;font-size:1.1rem;}
textarea{padding:0.1rem;width:100%;box-sizing:border-box;font-family:Arial,Verdana,sans-serif;font-size:1.1rem;}
.button{font-family:'Montserrat Alternates',Verdana,sans-serif;font-size:1.2rem;border-radius: 10rem;
padding:0.5rem 1rem 0.5rem 1rem;margin:2% 1% 1% 0%;border:solid;border-color:steelblue;border-width:2px;} /*формат всех кнопок сайта #cae1ff #bcd2ee #cae1ff __#b9d3ee__ #c6e2ff*/
.button:hover{cursor:pointer;} /*background: #d1eeee;  __#cae1ff__*/
.button_registration{margin:0% 1% 0% 0%;}
a{color:#0078ce;} /*все ссылки ____#0000cd____ #00008b__#27408b__#836fff*/
a:hover {color:#0000cd;} /*#436eee__Royalblue__ #27408b #3a5fcd*/
/*стилизация текста под ссылку*/
.link{color:#0078ce;cursor:pointer;text-decoration:underline;} 
.link:hover{color:#0000cd;} 

.content{width:100%;height:100%;box-sizing:border-box;}/*блок группировки контента в flexbox выравнивании*/
table{width:100%;}

/*видео*/
.post_media_block,.event_media_block{display: flex;flex-direction:column;justify-content:center;align-items:center;}
.video_frame{width:50vw;height:28.125vw;}


/* HEADER */
#header {min-height:15%;width:100%;/*высота блока адаптивная - по содержимому; при этом указывать размер дочерних картинок относительно родителя в % нельзя - картинки займут max размер, поэтому их размер задаётся ниже в единицах vh*/
padding-left:1%;padding-right:1%;box-sizing:border-box;
font-family: 'Montserrat', sans-serif;
font-size:1.5rem;line-height:2.0rem;
text-align:center;
position:relative;display: flex;flex-direction:row;justify-content:space-between;align-items:center;}/*Steelblue*/
/*background-color:rgba(230,230,250,0.75);border-top:solid;border-bottom:solid;border-color:rgba(70,130,180,0.45);*/

/* The sticky class is added to the header with JS when scrolled*/
.sticky_header {
position: sticky !important;
top: 0;
background-color:cornsilk; /*#f1f1f1*/
background-color:rgba(255,248,220,0.90);
z-index:10;
}

#navigation_panel{list-style-type:none;display:inline-block;width:100%;margin-top:0%;
font-family: 'Montserrat Alternates',sans-serif;font-size:1.8rem;}/*был margin-top:1%; */
.navigation_panel_element {display:inline;padding:1%;margin:0%;}
.navigation_panel_link{color:steelblue;text-decoration:none;} /*color:#36648b; */
.navigation_panel_link:hover {text-decoration:underline;color:#0078ce;} /*Steelblue Royalblue #27408b #3a5fcd*/


#avatar_link{height:8.5vh;display:inline-block;float:right;margin-right:2%;}/*высота блока header адаптивная - по содержимому; при этом указывать размер дочерних картинок относительно родителя в % нельзя - картинки займут max размер, поэтому их размер задаётся единицах vh*/
#avatar_image{height:100%;display:inline-block;}
.empty_avatar_image{height:8.5vh !important;display:inline-block;float:right;margin-right:2%;}/*нужно для корректного отображения пустой аватарки, !important переписывает более сильный дескриптор #avatar_image*/
#dropdown_menu_block{height:8.5vh;display:inline-block;float:right;}
 
#header_menu_image{display:inline-block;height:100%;margin:0;}

#header_login_link{height:8.5vh;display:inline-block;float:right;}
#header_login_image{height:100%;}

#header_controls{display: flex;flex-direction:row;justify-content:space-between;align-items:center;}/*этот блок группирует иконки хедера; padding-right в header + padding-right здесь = 1+3=4%, что соответствует padding в central_block; был установлен */
/*из header_controls исключен padding-right:3%; для выравнивания нав панели по центру на смартфоне*/
@media screen and (min-device-width: 1000px) and (orientation: landscape)
{/*на больших горизонтальных экранах блок с иконками исключается из нормального потока для выравнивания навигационной панели строго по центру*/
#header_controls{position:absolute;right:1%;}/*padding в header_controls + right в position absolute = 3+1=4%, что соответствует padding в central_block*/
}

/* ЛЭНДИНГ И ПОСЛЕДУЮЩИЕ БЛОКИ*/
#landing{height:90%;width:100%;position:relative;}
#landing::before {content: "";top: -20%;left: 0;bottom: 0;right: 0; /*-20% обеспечивает подложку фона под header, который не входит в landing*/
position: absolute;z-index:-1;
background:linear-gradient(to bottom right, rgba(204, 0, 204, 0.4) 20%, rgba(255, 51, 0, 0.3) 66%, rgba(242, 113, 33, 0.2) 100%);
}
#landing::after {content: "";
background-image: url("/images/landing_background.landscape1.png");
background-repeat:no-repeat;
background-size:cover;background-position: center center;
top: -20%;left: 0;bottom: 0;right: 0;position: absolute;z-index: -1;opacity:0.1;/*-15% обеспечивает подложку фона под header, который не входит в landing*/
}
@media (orientation: portrait) {#landing::after {background-image: url("/images/landing_background.portrait1.png");}}

#welcome_page{height:100%;width:100%;position:relative;box-sizing:border-box;background-color:none;
display:flex;flex-direction:column;justify-content:space-between;align-items:center;}

h1#title{font-family: 'Play', sans-serif; /*font-family:'Oswald', sans-serif;*/
font-size: 5.0rem;padding:0% 0% 0% 0%;line-height:5rem;padding-top:4rem;
color:#ccff00;} /*'Pinyon Script' #ccff00*/
p#subtitle{font-family: 'Montserrat Alternates', sans-serif;
font-size: 2.0rem;padding:0% 0% 0% 0%;color:steelblue;text-align:center;}


#note{width:20vw; height:20wv;
transform: rotate(-8deg);
-webkit-transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
-ms-transform: rotate(-8deg);
-o-transform: rotate(-8deg);
position:absolute;right:5%;top:40%;}
#note_text{text-anchor:middle;font-size:1.5vw;font-family:'Caveat',cursive;fill:darkblue;}

#institute{width:100%;font-family: 'Montserrat Alternates', sans-serif;font-weight:bold;font-style:italic;
color:steelblue;font-size: 2.0rem;line-height:2.0rem;text-align:center;padding:2% 0% 3% 0%;} /*'Jura', sans-serif;font-style:italic;font-weight:bold;*/
font.time_value{font-family: 'Play', sans-serif;}

div#description>h2,div#directions>h2,div#publications>h2,div#recent_news>h2{width:100%;box-sizing:border-box;padding:2% 2% 2% 2%;
font-family: 'Montserrat', sans-serif;font-style:italic;font-weight:bold;
color:steelblue;text-align:center;font-size: 2.5rem;line-height:3.0rem;}


#description,#directions,#publications,#recent_news{width:100%;box-sizing:border-box;
text-align:justify;padding:1% 8% 3% 8%;font-size: 1.5rem;line-height:2.5rem;}

#ul_publications,#ul_directions{list-style-position: inside;margin-left:0%;}
#ul_publications li, #ul_directions li{margin-top:1.5%;margin-bottom:1.5%;}
#ul_publications,#ul_directions {list-style: none;}/* меняем дефолтные маркеры списка */
#ul_publications li::before {content: "✔";color:steelblue;padding-right:2%;}
#ul_directions li::before {content: "\f303";color:steelblue;font-family:'Font Awesome 6 Free';font-weight: 900;padding-right:2%;}/*использование иконки awesome вместо маркера */

ol {counter-reset:item}/* меняем дефолтный цвет номеров упорядоченного списка */
ol li {display:block}
ol li:before {content:counter(item) ". ";counter-increment:item;color:steelblue;font-weight:bold;}

/* ФОТО НА ГЛАВНОЙ странице*/
.mainpage_images_block{width:100%;text-align:center;}
.two_imgs_on_line{display:inline-block;width:40%;margin:0.5%;}
.three_imgs_on_line{display:inline-block;width:31%;margin:0.5%;}
.description_image{display:inline-block;width:100%;border-radius:1rem;}

/* КАРУСЕЛЬ */
#carousel{padding:1% 4% 3% 4%;}
.carousel-item {/*border: 2px solid steelblue;border-radius:2rem;*/
text-align: center;box-sizing: border-box;cursor: grab;
min-height:60vh;overflow-wrap:break-word;padding:3%;margin:0.5%;
display:flex;flex-direction:column;justify-content:space-evenly;align-items:center;
/*background-color:mintcream;*/}
.carousel_image_block{width:90%;padding-bottom:5%;}/* border-radius:50%;background-color:#ccff00;background-color:rgba(204, 255, 0, 0.8); */
.carousel_image{width:100%;border-radius:3%;}
.carousel_legend{font-family: 'Montserrat', sans-serif;
font-size:1.5rem;text-align:justify;}


/* БЛОГ */
.blog_post_box{width:100%;box-sizing:border-box;
border-radius:2rem;border-style:solid;border-color:steelblue;border-width:2px; 
padding:2%;margin:0%;}
/*иконки awesome*/
.fa-thumbtack{color:steelblue;}/*цвет иконок awesome*/
.post_images_block{width:100%;text-align:center;}
.post_image{display:inline-block;width:100%;border-radius:1rem;}
.post_title_link{color:steelblue;text-decoration:none;}
.post_title_link:hover{color:#0000cd;text-decoration:underline;}
/*видео*/
.post_media_block{display: flex;flex-direction:column;justify-content:center;align-items:center;}


/*иконки awesome*/
.fa-calendar-days,.fa-clock,.fa-location-dot{color:steelblue;}/*цвет иконок awesome*/
.fa-person,.fa-person-dress{color:steelblue;font-size:larger;}

.one_img_on_page{display:inline-block;width:61%;margin:0.5%;} /*формат ссылок, в качестве которых использовано изображение*/
.two_imgs_on_page{display:inline-block;width:40%;margin:0.5%;}
.three_imgs_on_page{display:inline-block;width:31%;margin:0.5%;}
.four_imgs_on_page{display:inline-block;width:23%;margin:0.5%;}


/* ФУТЕР */
#footer{width:100%;min-height:10%;box-sizing:border-box;
font-family: 'Montserrat',sans-serif;font-size:1.0rem;line-height:1.5rem;color:Dimgrey;
text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;
border-top:solid;border-color:gainsboro;border-color:rgba(128,128,128,0.2);}

.footer_link{color:Dimgrey;margin:0.5% 1% 0% 1%;vertical-align:middle;text-underline-offset:0.2rem;}
.footer_link:hover {color:#0000cd;}

/* ФОРМА ЗАГРУЗКИ АВАТАРКИ */
#upload_avatar_button{color:black !important;} /* дополняет стили .button*/

/* СТРАНИЦЫ ЛИЧНОГО КАБИНЕТА (с формами и контентом)*/
/*иконка подсказки*/
.tool_tip{font-weight:bold;color:green;}
/*стилизация блока с подсказкой*/
.tippy-box[data-theme~='tippy_box_style'] {
font-family:'Arial', serif;font-size:1.2rem;
background-color: lavender;color: black;
border:solid;border-color:grey;border-width:1px;border-radius:0.5rem;
}
/*стилизация стрелок*/
.tippy-box[data-theme~='tippy_box_style'][data-placement^='top'] > .tippy-arrow::before {
border-top-color: grey;
}
.tippy-box[data-theme~='tippy_box_style'][data-placement^='bottom'] > .tippy-arrow::before {
border-bottom-color: grey;
}
.tippy-box[data-theme~='tippy_box_style'][data-placement^='left'] > .tippy-arrow::before {
border-left-color: grey;
}
.tippy-box[data-theme~='tippy_box_style'][data-placement^='right'] > .tippy-arrow::before {
border-right-color: grey;
}

.content_vertically_centered{display:flex;flex-direction:column;justify-content:center;}
#central_block{width:100%;min-height:80%;background-color:transparent;
font-size: 1.5rem;line-height:2.5rem;
text-align:justify;box-sizing:border-box;padding:1% 8% 3% 8%;}/*было padding:2%;*/


/* аватарки в формах*/
.person_avatar_link{width:5%;display:inline-block;vertical-align:middle;}
.person_avatar_image{width:100%;display:inline-block;vertical-align:middle;}
.empty_person_avatar_image{width:5%;display:inline-block;vertical-align:middle;}/*нужно для корректного отображения пустой аватарки*/


/* более красивая вёрстка аватарки и текста - аватарка и несколько текстовых строк посередине*/
.person_info_block{width:100%;text-align:left;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;}
.person_avatar_link_flex,.empty_person_avatar_image_flex{width:5%;flex:0 0 5%;margin:0.25% 1% 0.25% 0%;}/* flex:grow shrink basis*/
.empty_person_avatar_image_flex{vertical-align:middle;}/* без этого свойства выравнивание будет по базовой линии*/
.person_avatar_image_flex{width:100%;vertical-align:middle;}
.input_in_interactive_forms{margin-right:0.5%;}/*промежуток после флажка перед аватаркой*/

/* -------------------------------------------------------------------------------- */
/* РАСКРЫВАЮЩЕЕСЯ МЕНЮ */
/* Кнопка выпадающего списка */
.dropbtn {
	/*background-color: #3498DB;*/
	display:inline-block;height:100%;
	cursor: pointer;
}
a.navigation_panel_link.dropbtn{opacity:1.0;}/*это селектро ссылки выпадающего меню*/

/* Контейнер <div> - необходим для размещения выпадающего содержимого */
.dropdown {
  position: relative;
  display: inline-block;
  vertical-align: top;
  height:100%; box-sizing:border-box;/* added */
  padding-top:2%;padding-bottom:2%; /* added */
}

/* Выпадающее содержимое (скрыто по умолчанию) */
.dropdown-content {
  font-family: 'Montserrat Alternates',sans-serif;
  display: none;
  position: absolute;
  right: 0;
  background-color:cornsilk; /*#f1f1f1*/
  background-color:rgba(255,248,220,0.90);
  width:600%; /*от размера кнопки с иконкой*/
  z-index: 1000;
  overflow:auto;/* added */
  font-size:1.3rem;/* added */
  border-radius:1rem; /* added */
}
div.dropdown-content#common_menu1{width:220%;left: -60%;} /*от размера элемента списка li; shift=(width-100%)/2*/
div.dropdown-content#common_menu2{width:300%;left: -100%;}
div.dropdown-content#common_menu3{width:300%;right: 0%;}
/*если нужно выровнить выпадающее меню по центру ссылки на больших экранах*/
/*@media screen and (min-device-width: 1000px) and (orientation: landscape)
{div.dropdown-content#common_menu{left: -100%;}}*/

/*кнопка выхода в выпадающем меню*/
#logout_btn{font-size:1.3rem;padding: 1% 5% 1% 5%;margin: 1% 5% 4% 5%;}

/* Ссылки внутри выпадающего списка */
.dropdown-content a{
  color: black;
  padding: 1% 5% 1% 5%;
  text-decoration: none;
  display: block;
}

/* Изменение цвета выпадающих ссылок при наведении курсора */
.dropdown-content a:hover {background-color: papayawhip;background-color: rgba(255,239,213,1.0);}

/* Показать выпадающее меню (используйте JS, чтобы добавить этот класс .dropdown-content содержимого, когда пользователь нажимает на кнопку выпадающего списка) */
.show {display:block;} 
	

/* -------------------------------------------------------------------------------- */



/* АДАПТАЦИЯ ПОД СМАРТФОНЫ*/

/*ДЛЯ  ВСЕХ СМАРТФОНОВ - в вертикальной и горизонтальгой ориентации - в основном, адаптация размера шрифта*/
@media ((orientation: portrait) and (max-device-width: 700px)) or ((orientation: landscape) and (max-device-height: 600px)) {/*раньше было услоаия по разиеру экрана для типовых смартфонов: @media screen and (max-device-width: 700px){}*/
#central_block,.description{padding:1% 4% 4% 4%;}
.smartphones_not_display{display:none;} /*элементы c этим классом не отображаются на смартфонах*/

#navigation_panel{font-size:1.8rem;}
h1{font-size:2.0rem;}
h1#title{font-size: 2.5rem;line-height:4rem;padding-top:2.5rem;}
#subtitle{font-size:1.0rem;}
#institute{font-size:1.5rem;}

#slogan{font-size:1.7rem;padding:2% 0% 2% 0%;}

.tippy-box[data-theme~='tippy_box_style'] {font-size:1.4rem;}

/*карусель*/
.carousel_header{font-size: 3.0rem;}
.carousel_legend{font-size:1.8rem;}
.carousel_image{border-radius:5%;}

.dropdown-content,#logout_btn{font-size:1.7rem;}
/* Ссылки внутри выпадающего списка */
.dropdown-content a {padding: 2% 5% 2% 5%;}

.button{font-size:1.5rem;} /*формат всех кнопок сайта*/

.dropbtn,a,.button{-webkit-tap-highlight-color:rgba(0, 0, 0, 0);-webkit-tap-highlight-color: transparent;}/*убираем появление синего фона при клике*/
input,textarea,select{font-size:1.7rem;}
input[type="date"],input[type="time"]{margin-top:1%;margin-bottom:1%;}
textarea{padding:0.3rem;}
}


/*ДЛЯ УЗКИХ УСТРОЙСТВ - прежде всего, смартфонов*/
@media (max-device-width: 700px){
/*выравнивание по левому краю*/
#central_block{text-align:left;padding:1% 4% 4% 4%;font-size: 1.35rem;line-height:2.2rem;}
.styled_block{text-align:left;padding:1% 4% 4% 4%;font-size: 1.35rem;line-height:2.2rem;}
div.blog_post_box > h1{font-size: 1.75rem;}/*заголовки постов в блоге, новостях, модулях*/
#description,#directions,#publications,#recent_news{text-align:left;padding:1% 4% 4% 4%;font-size: 1.35rem;line-height:2.2rem;}
.form,#confirmation_of_sent_message{text-align:left;font-size:1.35rem;}
.single_standing_link{font-size: 1.6rem;}
/*карусель*/
.carousel_image_block{width:90%;}
.carousel_legend{text-align:center;}

#navigation_panel{margin-top:0%;}
/*иконки в панели навигации*/
#header_controls{margin-top:2%;}/*этот блок группирует иконки хедера*/
#avatar_link{height:6vh;display:inline-block;margin-right:0.5%;}/*высота блока header адаптивная - по содержимому; при этом указывать размер дочерних картинок относительно родителя в % нельзя - картинки займут max размер, поэтому их размер задаётся единицах vh*/
.empty_avatar_image{height:6vh !important;display:inline-block;float:right;margin-right:0.5%;}/*нужно для корректного отображения пустой аватарки, !important переписывает более сильный дескриптор #avatar_image*/
#header_login_link{height:6vh;display:inline-block;}
#dropdown_menu_block{height:6vh;}
div.dropdown-content#common_menu1{position:fixed;width:90%;left: 5%;font-size:1.4rem;} /*от размера элемента списка li; shift=(width-100%)/2*/

.one_img_on_page{display:inline-block;width:95%;margin:0.5%;} /*формат ссылок, в качестве которых использовано изображение*/
.two_imgs_on_page{display:inline-block;width:46%;margin:0.5%;} /*ширина групп изображений выровнена и составляет 92%*/
.three_imgs_on_page{display:inline-block;width:30%;margin:0.5%;}
.four_imgs_on_page{display:inline-block;width:30%;margin:0.5%;}
/* аватарки в формах*/
.person_avatar_link,.person_avatar_icon{width:15%;}
.empty_person_avatar_image{width:15%;}/*нужно для корректного отображения пустой аватарки*/
/* более красивая вёрстка аватарки и текста - аватарка и несколько текстовых строк посередине*/
.person_avatar_link_flex,.empty_person_avatar_image_flex{width:15%;flex:0 0 15%;margin:0.75% 3% 0.75% 0%;}/* flex:grow shrink basis*/
.empty_person_avatar_image_flex{vertical-align:middle;}/* без этого свойства выравнивание будет по базовой линии*/
.person_avatar_image_flex{width:100%;vertical-align:middle;}


/*маркированный список описания*/
#ul_description li::before{padding-right:3%;}
}

/*ДЛЯ ГОРИЗОНТАЛЬНЫХ СМАРТФОНОВ */
@media (orientation: landscape) and (max-device-height: 600px) { 
#landing::before {content: "";top: -25%;left: 0;bottom: 0;right: 0;} /*-20% обеспечивает подложку фона под header, который не входит в landing*/
#landing::after {top: -25%;left: 0;bottom: 0;right: 0;}/*-20% обеспечивает подложку фона под header, который не входит в landing*/
#welcome_page{display:flex;flex-direction:column;justify-content:space-between;align-items:center;}/*на горизонтальных смартфонах верхняя панель навигации превышает установленную ширину и блок welcome_page съезжает вниз, поэтому flex выравниваеие сделано flex-start и далее корректируется положение печати, сдвиг блоков становится виден с border:solid;*/
h1#title{padding-top:2.5%;}
#institute{padding-bottom:2.5%;}
#slogan{padding-top:5%;padding-bottom:0%;}
#note{width:30vw; height:30wv;position:absolute;right:2%;top:15%;}
#note_text{font-size:3vw;}
#header_login_link{height:14vh;margin-top:2vh;}
#avatar_link{height:14vh;margin-top:2vh;}/*высота блока header адаптивная - по содержимому; при этом указывать размер дочерних картинок относительно родителя в % нельзя - картинки займут max размер, поэтому их размер задаётся единицах vh*/
.empty_avatar_image{height:14vh !important;margin-top:2vh;}/*нужно для корректного отображения пустой аватарки, !important переписывает более сильный дескриптор #avatar_image*/
#dropdown_menu_block{height:14vh;}
/*#welcome_page{display:flex;flex-direction:column;justify-content:center;align-items:center;}*/

.carousel_image_block{width:17%;}
.one_img_on_page{width:50%;}

/* аватарки в формах*/
.person_avatar_link,.person_avatar_icon{width:10%;}
.empty_person_avatar_image{width:10%;}/*нужно для корректного отображения пустой аватарки*/
/* более красивая вёрстка аватарки и текста - аватарка и несколько текстовых строк посередине*/
.person_avatar_link_flex,.empty_person_avatar_image_flex{width:10%;flex:0 0 10%;margin:0.5% 2% 0.5% 0%;}/* flex:grow shrink basis*/
.empty_person_avatar_image_flex{vertical-align:middle;}/* без этого свойства выравнивание будет по базовой линии*/
.person_avatar_image_flex{width:100%;vertical-align:middle;}
}

/*ДЛЯ  ВСЕХ ПОРТРЕТНЫХ ОРИЕНТАЦИЙ*/
@media (orientation: portrait){ 
h1#title{padding:8% 0% 0% 0%;}
#institute{padding-bottom:12%;}
#note{width:60vw; height:60wv;position:absolute;right:5%;top:40%;}
#note_text{font-size:6vw;}
#slogan{padding-bottom:8%;}
/*центральная часть в интерактивных станицах*/
#view_control_block{width:100%;height:3%;position:relative;}
#central_block{padding:1% 4% 4% 4%;}
.video_frame{width:85vw;height:47.8125vw;}
}