body.overflow_off {
overflow-y: hidden;
}
/*
Обновлено 16 дек. 2023, некоторые комментарии могли устареть и неправильно передавать порядок содержимого этого файла.
Потом будет исправлено.
/*
/*
Итого модальное окно состоит из элементов:
1. Фото
2. Серая область - modal.
3. Общий блок для крестика и фото (div) - modal_block.
4. Крестик - krestik.
5. Левая кнопка
6. Само увеличенное фото - modal_photo.
7. Правая кнопка
8. Перенос строки (break, для flex контейнера)
9. Надпись под фото.
*/
/* .break - перенос строки внутри flex контейнера */
.break {
width: 100%;
}
/* Фото ------------------------------------------------------------------------- */
.photo {
cursor: pointer;
}
/* --------------------------------------------------------------------------------- */
/* -----Mercury.jpg----- */
/* Серая область ---------------------------------------------------------------- */
#Mercury_jpg_modal {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
align-items: center;
justify-content: center;
/*visibility: hidden;*/ /*Устаревший метод скрытия модального блока*/
/*opacity: 0;*/ /*Устаревший метод скрытия модального блока*/
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#Mercury_jpg_modal.open {
/*visibility: visible;*/ /*Устаревший метод открытия модального блока*/
/*opacity: 1;*/ /*Устаревший метод открытия модального блока*/
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#Mercury_jpg_osnovnoi_block {
/*border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#Mercury_jpg_modal_block {
/*border: 1px solid lime;*/
position: relative;
padding: 14px;
background-color: rgba(0, 0, 0, 0);
margin: 20px;
text-align: center;
color: white;
font-size: 1.1rem;
display: flex;
flex-wrap: wrap; /*Разрешение переноса строки внтури flex контейнера*/
width: 891px;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#Mercury_jpg_krestik {
position: absolute;
text-align: center;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 7px;
padding-right: 7px;
background-color: black;
color: white;
border: 2px solid white;
border-radius: 0px; /*Квадрат*/
/*border-radius: 5px;*/ /*Скругленный квадрат*/
/*border-radius: 20px;*/ /*Круг*/
top: 0;
right: 45px;
cursor: pointer;
transition: transform 0.2s;
}
#Mercury_jpg_krestik:hover {
color: #F22318;
border: 2px solid #F22318;
transform: scale(1.1);
transition: transform 0.2s;
transition: color 0.8s;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 8px;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#Mercury_jpg_levo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Mercury_jpg_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#Mercury_jpg_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
/* ------------------------------------------------------- */
/* Блок верхнего пространства ---------------------------- */
#Mercury_jpg_verhnee_prostranstvo {
/*border: 1px solid red;*/
width: 800px;
height: 53px; /*Расчетная высота блока*/
}
/* -------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#Mercury_jpg_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Блок нижнего пространства ---------------------------- */
#Mercury_jpg_nizhnee_prostranstvo {
/*border: 1px solid red;*/
width: 800px;
height: 53px; /*Расчетная высота блока*/
}
/* -------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#Mercury_jpg_nadpis {
/*border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
bottom: -5px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#Mercury_jpg_pravo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Mercury_jpg_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* -----Меркурий состав.jpg----- */
/* Серая область ---------------------------------------------------------------- */
#Mercury_sostav_jpg_modal {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
align-items: center;
justify-content: center;
/*visibility: hidden;*/ /*Устаревший метод скрытия модального блока*/
/*opacity: 0;*/ /*Устаревший метод скрытия модального блока*/
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#Mercury_sostav_jpg_modal.open {
/*visibility: visible;*/ /*Устаревший метод открытия модального блока*/
/*opacity: 1;*/ /*Устаревший метод открытия модального блока*/
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#Mercury_sostav_jpg_osnovnoi_block {
/*border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#Mercury_sostav_jpg_modal_block {
/*border: 1px solid lime;*/
position: relative;
padding: 14px;
background-color: rgba(0, 0, 0, 0);
margin: 20px;
text-align: center;
color: white;
font-size: 1.1rem;
display: flex;
flex-wrap: wrap; /*Разрешение переноса строки внтури flex контейнера*/
width: 891px;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#Mercury_sostav_jpg_krestik {
position: absolute;
text-align: center;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 7px;
padding-right: 7px;
background-color: black;
color: white;
border: 2px solid white;
border-radius: 0px; /*Квадрат*/
/*border-radius: 5px;*/ /*Скругленный квадрат*/
/*border-radius: 20px;*/ /*Круг*/
top: 0;
right: 45px;
cursor: pointer;
transition: transform 0.2s;
}
#Mercury_sostav_jpg_krestik:hover {
color: #F22318;
border: 2px solid #F22318;
transform: scale(1.1);
transition: transform 0.2s;
transition: color 0.8s;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 8px;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#Mercury_sostav_jpg_levo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Mercury_sostav_jpg_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#Mercury_sostav_jpg_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
/* ------------------------------------------------------- */
/* Блок верхнего пространства ---------------------------- */
#Mercury_sostav_jpg_verhnee_prostranstvo {
/*border: 1px solid red;*/
width: 800px;
height: 13px; /*Расчетная высота блока*/
}
/* -------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#Mercury_sostav_jpg_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Блок нижнего пространства ---------------------------- */
#Mercury_sostav_jpg_nizhnee_prostranstvo {
/*border: 1px solid red;*/
width: 800px;
height: 13px; /*Расчетная высота блока*/
}
/* -------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#Mercury_sostav_jpg_nadpis {
/*border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
bottom: -5px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#Mercury_sostav_jpg_pravo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Mercury_sostav_jpg_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* -----Caloris_photomosaic.jpg----- */
/* Серая область ---------------------------------------------------------------- */
#Caloris_photomosaic_jpg_modal {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
align-items: center;
justify-content: center;
/*visibility: hidden;*/ /*Устаревший метод скрытия модального блока*/
/*opacity: 0;*/ /*Устаревший метод скрытия модального блока*/
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#Caloris_photomosaic_jpg_modal.open {
/*visibility: visible;*/ /*Устаревший метод открытия модального блока*/
/*opacity: 1;*/ /*Устаревший метод открытия модального блока*/
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#Caloris_photomosaic_jpg_osnovnoi_block {
/*border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#Caloris_photomosaic_jpg_modal_block {
/*border: 1px solid lime;*/
position: relative;
padding: 14px;
background-color: rgba(0, 0, 0, 0);
margin: 20px;
text-align: center;
color: white;
font-size: 1.1rem;
display: flex;
flex-wrap: wrap; /*Разрешение переноса строки внтури flex контейнера*/
width: 891px;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#Caloris_photomosaic_jpg_krestik {
position: absolute;
text-align: center;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 7px;
padding-right: 7px;
background-color: black;
color: white;
border: 2px solid white;
border-radius: 0px; /*Квадрат*/
/*border-radius: 5px;*/ /*Скругленный квадрат*/
/*border-radius: 20px;*/ /*Круг*/
top: 0;
right: 45px;
cursor: pointer;
transition: transform 0.2s;
}
#Caloris_photomosaic_jpg_krestik:hover {
color: #F22318;
border: 2px solid #F22318;
transform: scale(1.1);
transition: transform 0.2s;
transition: color 0.8s;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 8px;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#Caloris_photomosaic_jpg_levo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Caloris_photomosaic_jpg_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#Caloris_photomosaic_jpg_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#Caloris_photomosaic_jpg_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#Caloris_photomosaic_jpg_nadpis {
/*border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#Caloris_photomosaic_jpg_pravo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Caloris_photomosaic_jpg_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- Caloris_2_photomosaic(stereographic).jpg ----- */
/* Серая область ---------------------------------------------------------------- */
#Caloris_2_photomosaic_stereographic_jpg_modal {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
align-items: center;
justify-content: center;
/*visibility: hidden;*/ /*Устаревший метод скрытия модального блока*/
/*opacity: 0;*/ /*Устаревший метод скрытия модального блока*/
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#Caloris_2_photomosaic_stereographic_jpg_modal.open {
/*visibility: visible;*/ /*Устаревший метод открытия модального блока*/
/*opacity: 1;*/ /*Устаревший метод открытия модального блока*/
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#Caloris_2_photomosaic_stereographic_jpg_osnovnoi_block {
/*border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#Caloris_2_photomosaic_stereographic_jpg_modal_block {
/*border: 1px solid lime;*/
position: relative;
padding: 14px;
background-color: rgba(0, 0, 0, 0);
margin: 20px;
text-align: center;
color: white;
font-size: 1.1rem;
display: flex;
flex-wrap: wrap; /*Разрешение переноса строки внтури flex контейнера*/
width: 891px;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#Caloris_2_photomosaic_stereographic_jpg_krestik {
position: absolute;
text-align: center;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 7px;
padding-right: 7px;
background-color: black;
color: white;
border: 2px solid white;
border-radius: 0px; /*Квадрат*/
/*border-radius: 5px;*/ /*Скругленный квадрат*/
/*border-radius: 20px;*/ /*Круг*/
top: 0;
right: 45px;
cursor: pointer;
transition: transform 0.2s;
}
#Caloris_2_photomosaic_stereographic_jpg_krestik:hover {
color: #F22318;
border: 2px solid #F22318;
transform: scale(1.1);
transition: transform 0.2s;
transition: color 0.8s;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 8px;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#Caloris_2_photomosaic_stereographic_jpg_levo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Caloris_2_photomosaic_stereographic_jpg_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#Caloris_2_photomosaic_stereographic_jpg_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#Caloris_2_photomosaic_stereographic_jpg_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#Caloris_2_photomosaic_stereographic_jpg_nadpis {
/*border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#Caloris_2_photomosaic_stereographic_jpg_pravo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Caloris_2_photomosaic_stereographic_jpg_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* -----Mariner-10.jpg----- */
/* Серая область ---------------------------------------------------------------- */
#Mariner-10_jpg_modal {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
align-items: center;
justify-content: center;
/*visibility: hidden;*/ /*Устаревший метод скрытия модального блока*/
/*opacity: 0;*/ /*Устаревший метод скрытия модального блока*/
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#Mariner-10_jpg_modal.open {
/*visibility: visible;*/ /*Устаревший метод открытия модального блока*/
/*opacity: 1;*/ /*Устаревший метод открытия модального блока*/
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#Mariner-10_jpg_osnovnoi_block {
/*border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#Mariner-10_jpg_modal_block {
/*border: 1px solid lime;*/
position: relative;
padding: 14px;
background-color: rgba(0, 0, 0, 0);
margin: 20px;
text-align: center;
color: white;
font-size: 1.1rem;
display: flex;
flex-wrap: wrap; /*Разрешение переноса строки внтури flex контейнера*/
width: 891px;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#Mariner-10_jpg_krestik {
position: absolute;
text-align: center;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 7px;
padding-right: 7px;
background-color: black;
color: white;
border: 2px solid white;
border-radius: 0px; /*Квадрат*/
/*border-radius: 5px;*/ /*Скругленный квадрат*/
/*border-radius: 20px;*/ /*Круг*/
top: 0;
right: 45px;
cursor: pointer;
transition: transform 0.2s;
}
#Mariner-10_jpg_krestik:hover {
color: #F22318;
border: 2px solid #F22318;
transform: scale(1.1);
transition: transform 0.2s;
transition: color 0.8s;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 8px;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#Mariner-10_jpg_levo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Mariner-10_jpg_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#Mariner-10_jpg_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#Mariner-10_jpg_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#Mariner-10_jpg_nadpis {
/*border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#Mariner-10_jpg_pravo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Mariner-10_jpg_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* -----Mariner-10-ustroistvo_jpg----- */
/* Серая область ---------------------------------------------------------------- */
#Mariner-10-ustroistvo_jpg_modal {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
align-items: center;
justify-content: center;
/*visibility: hidden;*/ /*Устаревший метод скрытия модального блока*/
/*opacity: 0;*/ /*Устаревший метод скрытия модального блока*/
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#Mariner-10-ustroistvo_jpg_modal.open {
/*visibility: visible;*/ /*Устаревший метод открытия модального блока*/
/*opacity: 1;*/ /*Устаревший метод открытия модального блока*/
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#Mariner-10-ustroistvo_jpg_osnovnoi_block {
/*border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#Mariner-10-ustroistvo_jpg_modal_block {
/*border: 1px solid lime;*/
position: relative;
padding: 14px;
background-color: rgba(0, 0, 0, 0);
margin: 20px;
text-align: center;
color: white;
font-size: 1.1rem;
display: flex;
flex-wrap: wrap; /*Разрешение переноса строки внтури flex контейнера*/
width: 891px;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#Mariner-10-ustroistvo_jpg_krestik {
position: absolute;
text-align: center;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 7px;
padding-right: 7px;
background-color: black;
color: white;
border: 2px solid white;
border-radius: 0px; /*Квадрат*/
/*border-radius: 5px;*/ /*Скругленный квадрат*/
/*border-radius: 20px;*/ /*Круг*/
top: 0;
right: 45px;
cursor: pointer;
transition: transform 0.2s;
}
#Mariner-10-ustroistvo_jpg_krestik:hover {
color: #F22318;
border: 2px solid #F22318;
transform: scale(1.1);
transition: transform 0.2s;
transition: color 0.8s;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 8px;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#Mariner-10-ustroistvo_jpg_levo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Mariner-10-ustroistvo_jpg_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#Mariner-10-ustroistvo_jpg_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#Mariner-10-ustroistvo_jpg_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#Mariner-10-ustroistvo_jpg_nadpis {
/*border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#Mariner-10-ustroistvo_jpg_pravo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Mariner-10-ustroistvo_jpg_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* -----Messenger.jpg----- */
/* Серая область ---------------------------------------------------------------- */
#Messenger_jpg_modal {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
align-items: center;
justify-content: center;
/*visibility: hidden;*/ /*Устаревший метод скрытия модального блока*/
/*opacity: 0;*/ /*Устаревший метод скрытия модального блока*/
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#Messenger_jpg_modal.open {
/*visibility: visible;*/ /*Устаревший метод открытия модального блока*/
/*opacity: 1;*/ /*Устаревший метод открытия модального блока*/
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#Messenger_jpg_osnovnoi_block {
/*border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#Messenger_jpg_modal_block {
/*border: 1px solid lime;*/
position: relative;
padding: 14px;
background-color: rgba(0, 0, 0, 0);
margin: 20px;
text-align: center;
color: white;
font-size: 1.1rem;
display: flex;
flex-wrap: wrap; /*Разрешение переноса строки внтури flex контейнера*/
width: 891px;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#Messenger_jpg_krestik {
position: absolute;
text-align: center;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 7px;
padding-right: 7px;
background-color: black;
color: white;
border: 2px solid white;
border-radius: 0px; /*Квадрат*/
/*border-radius: 5px;*/ /*Скругленный квадрат*/
/*border-radius: 20px;*/ /*Круг*/
top: 0;
right: 45px;
cursor: pointer;
transition: transform 0.2s;
}
#Messenger_jpg_krestik:hover {
color: #F22318;
border: 2px solid #F22318;
transform: scale(1.1);
transition: transform 0.2s;
transition: color 0.8s;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 8px;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#Messenger_jpg_levo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Messenger_jpg_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#Messenger_jpg_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#Messenger_jpg_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#Messenger_jpg_nadpis {
/*border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#Messenger_jpg_pravo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Messenger_jpg_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* -----Messenger - устройство.jpg Messenger-u_jpg----- */
/* Серая область ---------------------------------------------------------------- */
#Messenger-u_jpg_modal {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
align-items: center;
justify-content: center;
/*visibility: hidden;*/ /*Устаревший метод скрытия модального блока*/
/*opacity: 0;*/ /*Устаревший метод скрытия модального блока*/
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#Messenger-u_jpg_modal.open {
/*visibility: visible;*/ /*Устаревший метод открытия модального блока*/
/*opacity: 1;*/ /*Устаревший метод открытия модального блока*/
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#Messenger-u_jpg_osnovnoi_block {
/*border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#Messenger-u_jpg_modal_block {
/*border: 1px solid lime;*/
position: relative;
padding: 14px;
background-color: rgba(0, 0, 0, 0);
margin: 20px;
text-align: center;
color: white;
font-size: 1.1rem;
display: flex;
flex-wrap: wrap; /*Разрешение переноса строки внтури flex контейнера*/
width: 891px;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#Messenger-u_jpg_krestik {
position: absolute;
text-align: center;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 7px;
padding-right: 7px;
background-color: black;
color: white;
border: 2px solid white;
border-radius: 0px; /*Квадрат*/
/*border-radius: 5px;*/ /*Скругленный квадрат*/
/*border-radius: 20px;*/ /*Круг*/
top: 0;
right: 45px;
cursor: pointer;
transition: transform 0.2s;
}
#Messenger-u_jpg_krestik:hover {
color: #F22318;
border: 2px solid #F22318;
transform: scale(1.1);
transition: transform 0.2s;
transition: color 0.8s;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 8px;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#Messenger-u_jpg_levo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Messenger-u_jpg_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#Messenger-u_jpg_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
/* ------------------------------------------------------- */
/* Блок верхнего пространства ---------------------------- */
#Messenger-u_jpg_verhnee_prostranstvo {
/*border: 1px solid red;*/
width: 800px;
height: 39px; /*Расчетная высота блока*/
}
/* -------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#Messenger-u_jpg_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Блок нижнего пространства ---------------------------- */
#Messenger-u_jpg_nizhnee_prostranstvo {
/*border: 1px solid red;*/
width: 800px;
height: 39px; /*Расчетная высота блока*/
}
/* -------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#Messenger-u_jpg_nadpis {
/*border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
bottom: -5px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#Messenger-u_jpg_pravo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Messenger-u_jpg_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* BEPICOLMBO */
/* BepiColombo.jpg */
/* Серая область ---------------------------------------------------------------- */
#BepiColombo_jpg_modal {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
align-items: center;
justify-content: center;
/*visibility: hidden;*/ /*Устаревший метод скрытия модального блока*/
/*opacity: 0;*/ /*Устаревший метод скрытия модального блока*/
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#BepiColombo_jpg_modal.open {
/*visibility: visible;*/ /*Устаревший метод открытия модального блока*/
/*opacity: 1;*/ /*Устаревший метод открытия модального блока*/
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#BepiColombo_jpg_osnovnoi_block {
/*border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#BepiColombo_jpg_modal_block {
/*border: 1px solid lime;*/
position: relative;
padding: 14px;
background-color: rgba(0, 0, 0, 0);
margin: 20px;
text-align: center;
color: white;
font-size: 1.1rem;
display: flex;
flex-wrap: wrap; /*Разрешение переноса строки внтури flex контейнера*/
width: 891px;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#BepiColombo_jpg_krestik {
position: absolute;
text-align: center;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 7px;
padding-right: 7px;
background-color: black;
color: white;
border: 2px solid white;
border-radius: 0px; /*Квадрат*/
/*border-radius: 5px;*/ /*Скругленный квадрат*/
/*border-radius: 20px;*/ /*Круг*/
top: 0;
right: 45px;
cursor: pointer;
transition: transform 0.2s;
}
#BepiColombo_jpg_krestik:hover {
color: #F22318;
border: 2px solid #F22318;
transform: scale(1.1);
transition: transform 0.2s;
transition: color 0.8s;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 8px;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#BepiColombo_jpg_levo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#BepiColombo_jpg_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#BepiColombo_jpg_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#BepiColombo_jpg_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#BepiColombo_jpg_nadpis {
/*border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#BepiColombo_jpg_pravo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#BepiColombo_jpg_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* BepiColombo_Orbiters.jpg */
/* Серая область ---------------------------------------------------------------- */
#BepiColombo_Orbiters_jpg_modal {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
align-items: center;
justify-content: center;
/*visibility: hidden;*/ /*Устаревший метод скрытия модального блока*/
/*opacity: 0;*/ /*Устаревший метод скрытия модального блока*/
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#BepiColombo_Orbiters_jpg_modal.open {
/*visibility: visible;*/ /*Устаревший метод открытия модального блока*/
/*opacity: 1;*/ /*Устаревший метод открытия модального блока*/
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#BepiColombo_Orbiters_jpg_osnovnoi_block {
/*border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#BepiColombo_Orbiters_jpg_modal_block {
/*border: 1px solid lime;*/
position: relative;
padding: 14px;
background-color: rgba(0, 0, 0, 0);
margin: 20px;
text-align: center;
color: white;
font-size: 1.1rem;
display: flex;
flex-wrap: wrap; /*Разрешение переноса строки внтури flex контейнера*/
width: 891px;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#BepiColombo_Orbiters_jpg_krestik {
position: absolute;
text-align: center;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 7px;
padding-right: 7px;
background-color: black;
color: white;
border: 2px solid white;
border-radius: 0px; /*Квадрат*/
/*border-radius: 5px;*/ /*Скругленный квадрат*/
/*border-radius: 20px;*/ /*Круг*/
top: 0;
right: 45px;
cursor: pointer;
transition: transform 0.2s;
}
#BepiColombo_Orbiters_jpg_krestik:hover {
color: #F22318;
border: 2px solid #F22318;
transform: scale(1.1);
transition: transform 0.2s;
transition: color 0.8s;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 8px;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#BepiColombo_Orbiters_jpg_levo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#BepiColombo_Orbiters_jpg_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#BepiColombo_Orbiters_jpg_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#BepiColombo_Orbiters_jpg_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#BepiColombo_Orbiters_jpg_nadpis {
/*border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#BepiColombo_Orbiters_jpg_pravo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#BepiColombo_Orbiters_jpg_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/*ГАЛЕРЕЯ МАРИНЕРА-10*\
/* ----- 111111111111111 1. Global_mosaic_Mercury-Mariner-10_Incoming.jpg - j1jpg ----- */
/* Серая область ---------------------------------------------------------------- */
#j1jpg_modal {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
align-items: center;
justify-content: center;
/*visibility: hidden;*/ /*Устаревший метод скрытия модального блока*/
/*opacity: 0;*/ /*Устаревший метод скрытия модального блока*/
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#j1jpg_modal.open {
/*visibility: visible;*/ /*Устаревший метод открытия модального блока*/
/*opacity: 1;*/ /*Устаревший метод открытия модального блока*/
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#j1jpg_osnovnoi_block {
/*border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#j1jpg_modal_block {
/*border: 1px solid lime;*/
position: relative;
padding: 14px;
background-color: rgba(0, 0, 0, 0);
margin: 20px;
text-align: center;
color: white;
font-size: 1.1rem;
display: flex;
flex-wrap: wrap; /*Разрешение переноса строки внтури flex контейнера*/
width: 891px;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#j1jpg_krestik {
position: absolute;
text-align: center;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 7px;
padding-right: 7px;
background-color: black;
color: white;
border: 2px solid white;
border-radius: 0px; /*Квадрат*/
/*border-radius: 5px;*/ /*Скругленный квадрат*/
/*border-radius: 20px;*/ /*Круг*/
top: 0;
right: 45px;
cursor: pointer;
transition: transform 0.2s;
}
#j1jpg_krestik:hover {
color: #F22318;
border: 2px solid #F22318;
transform: scale(1.1);
transition: transform 0.2s;
transition: color 0.8s;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 8px;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#j1jpg_levo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#j1jpg_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#j1jpg_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#j1jpg_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#j1jpg_nadpis {
/*border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#j1jpg_pravo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#j1jpg_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- 2222222222222222 2. Global_mosaic_mariner-10_Outgoing.jpg - j2jpg ----- */
/* Серая область ---------------------------------------------------------------- */
#j2jpg_modal {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
align-items: center;
justify-content: center;
/*visibility: hidden;*/ /*Устаревший метод скрытия модального блока*/
/*opacity: 0;*/ /*Устаревший метод скрытия модального блока*/
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#j2jpg_modal.open {
/*visibility: visible;*/ /*Устаревший метод открытия модального блока*/
/*opacity: 1;*/ /*Устаревший метод открытия модального блока*/
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#j2jpg_osnovnoi_block {
/*border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#j2jpg_modal_block {
/*border: 1px solid lime;*/
position: relative;
padding: 14px;
background-color: rgba(0, 0, 0, 0);
margin: 20px;
text-align: center;
color: white;
font-size: 1.1rem;
display: flex;
flex-wrap: wrap; /*Разрешение переноса строки внтури flex контейнера*/
width: 891px;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#j2jpg_krestik {
position: absolute;
text-align: center;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 7px;
padding-right: 7px;
background-color: black;
color: white;
border: 2px solid white;
border-radius: 0px; /*Квадрат*/
/*border-radius: 5px;*/ /*Скругленный квадрат*/
/*border-radius: 20px;*/ /*Круг*/
top: 0;
right: 45px;
cursor: pointer;
transition: transform 0.2s;
}
#j2jpg_krestik:hover {
color: #F22318;
border: 2px solid #F22318;
transform: scale(1.1);
transition: transform 0.2s;
transition: color 0.8s;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 8px;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#j2jpg_levo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#j2jpg_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#j2jpg_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#j2jpg_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#j2jpg_nadpis {
/*border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#j2jpg_pravo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#j2jpg_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- 3333333333333333 3. Косой вид Меркурия.jpg - j3_kosoi_vid_mercury_jpg ----- */
/* Серая область ---------------------------------------------------------------- */
#j3_kosoi_vid_mercury_jpg_modal {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
align-items: center;
justify-content: center;
/*visibility: hidden;*/ /*Устаревший метод скрытия модального блока*/
/*opacity: 0;*/ /*Устаревший метод скрытия модального блока*/
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#j3_kosoi_vid_mercury_jpg_modal.open {
/*visibility: visible;*/ /*Устаревший метод открытия модального блока*/
/*opacity: 1;*/ /*Устаревший метод открытия модального блока*/
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#j3_kosoi_vid_mercury_jpg_osnovnoi_block {
/*border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#j3_kosoi_vid_mercury_jpg_modal_block {
/*border: 1px solid lime;*/
position: relative;
padding: 14px;
background-color: rgba(0, 0, 0, 0);
margin: 20px;
text-align: center;
color: white;
font-size: 1.1rem;
display: flex;
flex-wrap: wrap; /*Разрешение переноса строки внтури flex контейнера*/
width: 891px;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#j3_kosoi_vid_mercury_jpg_krestik {
position: absolute;
text-align: center;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 7px;
padding-right: 7px;
background-color: black;
color: white;
border: 2px solid white;
border-radius: 0px; /*Квадрат*/
/*border-radius: 5px;*/ /*Скругленный квадрат*/
/*border-radius: 20px;*/ /*Круг*/
top: 0;
right: 45px;
cursor: pointer;
transition: transform 0.2s;
}
#j3_kosoi_vid_mercury_jpg_krestik:hover {
color: #F22318;
border: 2px solid #F22318;
transform: scale(1.1);
transition: transform 0.2s;
transition: color 0.8s;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 8px;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#j3_kosoi_vid_mercury_jpg_levo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#j3_kosoi_vid_mercury_jpg_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#j3_kosoi_vid_mercury_jpg_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#j3_kosoi_vid_mercury_jpg_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#j3_kosoi_vid_mercury_jpg_nadpis {
/*border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#j3_kosoi_vid_mercury_jpg_pravo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#j3_kosoi_vid_mercury_jpg_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- 444444444444444 4. Zola_crater_Mariner-10.jpg - j4_Zola_crater_jpg ----- */
/* Серая область ---------------------------------------------------------------- */
#j4_Zola_crater_jpg_modal {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
align-items: center;
justify-content: center;
/*visibility: hidden;*/ /*Устаревший метод скрытия модального блока*/
/*opacity: 0;*/ /*Устаревший метод скрытия модального блока*/
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#j4_Zola_crater_jpg_modal.open {
/*visibility: visible;*/ /*Устаревший метод открытия модального блока*/
/*opacity: 1;*/ /*Устаревший метод открытия модального блока*/
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#j4_Zola_crater_jpg_osnovnoi_block {
/*border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#j4_Zola_crater_jpg_modal_block {
/*border: 1px solid lime;*/
position: relative;
padding: 14px;
background-color: rgba(0, 0, 0, 0);
margin: 20px;
text-align: center;
color: white;
font-size: 1.1rem;
display: flex;
flex-wrap: wrap; /*Разрешение переноса строки внтури flex контейнера*/
width: 891px;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#j4_Zola_crater_jpg_krestik {
position: absolute;
text-align: center;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 7px;
padding-right: 7px;
background-color: black;
color: white;
border: 2px solid white;
border-radius: 0px; /*Квадрат*/
/*border-radius: 5px;*/ /*Скругленный квадрат*/
/*border-radius: 20px;*/ /*Круг*/
top: 0;
right: 45px;
cursor: pointer;
transition: transform 0.2s;
}
#j4_Zola_crater_jpg_krestik:hover {
color: #F22318;
border: 2px solid #F22318;
transform: scale(1.1);
transition: transform 0.2s;
transition: color 0.8s;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 8px;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#j4_Zola_crater_jpg_levo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#j4_Zola_crater_jpg_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#j4_Zola_crater_jpg_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#j4_Zola_crater_jpg_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#j4_Zola_crater_jpg_nadpis {
/*border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#j4_Zola_crater_jpg_pravo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#j4_Zola_crater_jpg_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- 555555555555555 5. Zola crater - крупный план.jpg - j5_Zola_crater_kp_jpg ----- */
/* Серая область ---------------------------------------------------------------- */
#j5_Zola_crater_kp_jpg_modal {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
align-items: center;
justify-content: center;
/*visibility: hidden;*/ /*Устаревший метод скрытия модального блока*/
/*opacity: 0;*/ /*Устаревший метод скрытия модального блока*/
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#j5_Zola_crater_kp_jpg_modal.open {
/*visibility: visible;*/ /*Устаревший метод открытия модального блока*/
/*opacity: 1;*/ /*Устаревший метод открытия модального блока*/
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#j5_Zola_crater_kp_jpg_osnovnoi_block {
/*border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#j5_Zola_crater_kp_jpg_modal_block {
/*border: 1px solid lime;*/
position: relative;
padding: 14px;
background-color: rgba(0, 0, 0, 0);
margin: 20px;
text-align: center;
color: white;
font-size: 1.1rem;
display: flex;
flex-wrap: wrap; /*Разрешение переноса строки внтури flex контейнера*/
width: 891px;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#j5_Zola_crater_kp_jpg_krestik {
position: absolute;
text-align: center;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 7px;
padding-right: 7px;
background-color: black;
color: white;
border: 2px solid white;
border-radius: 0px; /*Квадрат*/
/*border-radius: 5px;*/ /*Скругленный квадрат*/
/*border-radius: 20px;*/ /*Круг*/
top: 0;
right: 45px;
cursor: pointer;
transition: transform 0.2s;
}
#j5_Zola_crater_kp_jpg_krestik:hover {
color: #F22318;
border: 2px solid #F22318;
transform: scale(1.1);
transition: transform 0.2s;
transition: color 0.8s;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 8px;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#j5_Zola_crater_kp_jpg_levo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#j5_Zola_crater_kp_jpg_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#j5_Zola_crater_kp_jpg_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#j5_Zola_crater_kp_jpg_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#j5_Zola_crater_kp_jpg_nadpis {
/*border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#j5_Zola_crater_kp_jpg_pravo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#j5_Zola_crater_kp_jpg_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- 666666666666666 6. Flat_plains_Mercury_Mariner-10.jpg - j6jpg ----- */
/* Серая область ---------------------------------------------------------------- */
#j6jpg_modal {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
align-items: center;
justify-content: center;
/*visibility: hidden;*/ /*Устаревший метод скрытия модального блока*/
/*opacity: 0;*/ /*Устаревший метод скрытия модального блока*/
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#j6jpg_modal.open {
/*visibility: visible;*/ /*Устаревший метод открытия модального блока*/
/*opacity: 1;*/ /*Устаревший метод открытия модального блока*/
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#j6jpg_osnovnoi_block {
/*border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#j6jpg_modal_block {
/*border: 1px solid lime;*/
position: relative;
padding: 14px;
background-color: rgba(0, 0, 0, 0);
margin: 20px;
text-align: center;
color: white;
font-size: 1.1rem;
display: flex;
flex-wrap: wrap; /*Разрешение переноса строки внтури flex контейнера*/
width: 891px;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#j6jpg_krestik {
position: absolute;
text-align: center;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 7px;
padding-right: 7px;
background-color: black;
color: white;
border: 2px solid white;
border-radius: 0px; /*Квадрат*/
/*border-radius: 5px;*/ /*Скругленный квадрат*/
/*border-radius: 20px;*/ /*Круг*/
top: 0;
right: 45px;
cursor: pointer;
transition: transform 0.2s;
}
#j6jpg_krestik:hover {
color: #F22318;
border: 2px solid #F22318;
transform: scale(1.1);
transition: transform 0.2s;
transition: color 0.8s;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 8px;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#j6jpg_levo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#j6jpg_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#j6jpg_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#j6jpg_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#j6jpg_nadpis {
/*border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#j6jpg_pravo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#j6jpg_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- 7777777777777777 7. Brahms_crater_mercury_Mariner-10.jpg - j7_Brahms_crater_jpg ----- */
/* Серая область ---------------------------------------------------------------- */
#j7_Brahms_crater_jpg_modal {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
align-items: center;
justify-content: center;
/*visibility: hidden;*/ /*Устаревший метод скрытия модального блока*/
/*opacity: 0;*/ /*Устаревший метод скрытия модального блока*/
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#j7_Brahms_crater_jpg_modal.open {
/*visibility: visible;*/ /*Устаревший метод открытия модального блока*/
/*opacity: 1;*/ /*Устаревший метод открытия модального блока*/
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#j7_Brahms_crater_jpg_osnovnoi_block {
/*border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#j7_Brahms_crater_jpg_modal_block {
/*border: 1px solid lime;*/
position: relative;
padding: 14px;
background-color: rgba(0, 0, 0, 0);
margin: 20px;
text-align: center;
color: white;
font-size: 1.1rem;
display: flex;
flex-wrap: wrap; /*Разрешение переноса строки внтури flex контейнера*/
width: 891px;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#j7_Brahms_crater_jpg_krestik {
position: absolute;
text-align: center;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 7px;
padding-right: 7px;
background-color: black;
color: white;
border: 2px solid white;
border-radius: 0px; /*Квадрат*/
/*border-radius: 5px;*/ /*Скругленный квадрат*/
/*border-radius: 20px;*/ /*Круг*/
top: 0;
right: 45px;
cursor: pointer;
transition: transform 0.2s;
}
#j7_Brahms_crater_jpg_krestik:hover {
color: #F22318;
border: 2px solid #F22318;
transform: scale(1.1);
transition: transform 0.2s;
transition: color 0.8s;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 8px;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#j7_Brahms_crater_jpg_levo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#j7_Brahms_crater_jpg_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#j7_Brahms_crater_jpg_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#j7_Brahms_crater_jpg_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#j7_Brahms_crater_jpg_nadpis {
/*border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#j7_Brahms_crater_jpg_pravo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#j7_Brahms_crater_jpg_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- 88888888888888 8. Photomosaic of southeastern region of Kuiper quadrangle, Mercury.jpg - j8jpg ----- */
/* Серая область ---------------------------------------------------------------- */
#j8jpg_modal {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
align-items: center;
justify-content: center;
/*visibility: hidden;*/ /*Устаревший метод скрытия модального блока*/
/*opacity: 0;*/ /*Устаревший метод скрытия модального блока*/
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#j8jpg_modal.open {
/*visibility: visible;*/ /*Устаревший метод открытия модального блока*/
/*opacity: 1;*/ /*Устаревший метод открытия модального блока*/
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#j8jpg_osnovnoi_block {
/*border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#j8jpg_modal_block {
/*border: 1px solid lime;*/
position: relative;
padding: 14px;
background-color: rgba(0, 0, 0, 0);
margin: 20px;
text-align: center;
color: white;
font-size: 1.1rem;
display: flex;
flex-wrap: wrap; /*Разрешение переноса строки внтури flex контейнера*/
width: 891px;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#j8jpg_krestik {
position: absolute;
text-align: center;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 7px;
padding-right: 7px;
background-color: black;
color: white;
border: 2px solid white;
border-radius: 0px; /*Квадрат*/
/*border-radius: 5px;*/ /*Скругленный квадрат*/
/*border-radius: 20px;*/ /*Круг*/
top: 0;
right: 45px;
cursor: pointer;
transition: transform 0.2s;
}
#j8jpg_krestik:hover {
color: #F22318;
border: 2px solid #F22318;
transform: scale(1.1);
transition: transform 0.2s;
transition: color 0.8s;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 8px;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#j8jpg_levo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#j8jpg_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#j8jpg_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#j8jpg_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#j8jpg_nadpis {
/*border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#j8jpg_pravo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#j8jpg_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- 999999999999 9. Scarp Features in Tir Planitia, Mercury.jpg - j9jpg ----- */
/* Серая область ---------------------------------------------------------------- */
#j9jpg_modal {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
align-items: center;
justify-content: center;
/*visibility: hidden;*/ /*Устаревший метод скрытия модального блока*/
/*opacity: 0;*/ /*Устаревший метод скрытия модального блока*/
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#j9jpg_modal.open {
/*visibility: visible;*/ /*Устаревший метод открытия модального блока*/
/*opacity: 1;*/ /*Устаревший метод открытия модального блока*/
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#j9jpg_osnovnoi_block {
/*border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#j9jpg_modal_block {
/*border: 1px solid lime;*/
position: relative;
padding: 14px;
background-color: rgba(0, 0, 0, 0);
margin: 20px;
text-align: center;
color: white;
font-size: 1.1rem;
display: flex;
flex-wrap: wrap; /*Разрешение переноса строки внтури flex контейнера*/
width: 891px;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#j9jpg_krestik {
position: absolute;
text-align: center;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 7px;
padding-right: 7px;
background-color: black;
color: white;
border: 2px solid white;
border-radius: 0px; /*Квадрат*/
/*border-radius: 5px;*/ /*Скругленный квадрат*/
/*border-radius: 20px;*/ /*Круг*/
top: 0;
right: 45px;
cursor: pointer;
transition: transform 0.2s;
}
#j9jpg_krestik:hover {
color: #F22318;
border: 2px solid #F22318;
transform: scale(1.1);
transition: transform 0.2s;
transition: color 0.8s;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 8px;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#j9jpg_levo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#j9jpg_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#j9jpg_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#j9jpg_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#j9jpg_nadpis {
/*border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#j9jpg_pravo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#j9jpg_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- 1010101010 10. Amru Al-Qays crater, Mercury.jpg - j10_Amru-Al-Qays_jpg ----- */
/* Серая область ---------------------------------------------------------------- */
#j10_Amru-Al-Qays_jpg_modal {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
align-items: center;
justify-content: center;
/*visibility: hidden;*/ /*Устаревший метод скрытия модального блока*/
/*opacity: 0;*/ /*Устаревший метод скрытия модального блока*/
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#j10_Amru-Al-Qays_jpg_modal.open {
/*visibility: visible;*/ /*Устаревший метод открытия модального блока*/
/*opacity: 1;*/ /*Устаревший метод открытия модального блока*/
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#j10_Amru-Al-Qays_jpg_osnovnoi_block {
/*border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#j10_Amru-Al-Qays_jpg_modal_block {
/*border: 1px solid lime;*/
position: relative;
padding: 14px;
background-color: rgba(0, 0, 0, 0);
margin: 20px;
text-align: center;
color: white;
font-size: 1.1rem;
display: flex;
flex-wrap: wrap; /*Разрешение переноса строки внтури flex контейнера*/
width: 891px;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#j10_Amru-Al-Qays_jpg_krestik {
position: absolute;
text-align: center;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 7px;
padding-right: 7px;
background-color: black;
color: white;
border: 2px solid white;
border-radius: 0px; /*Квадрат*/
/*border-radius: 5px;*/ /*Скругленный квадрат*/
/*border-radius: 20px;*/ /*Круг*/
top: 0;
right: 45px;
cursor: pointer;
transition: transform 0.2s;
}
#j10_Amru-Al-Qays_jpg_krestik:hover {
color: #F22318;
border: 2px solid #F22318;
transform: scale(1.1);
transition: transform 0.2s;
transition: color 0.8s;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 8px;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#j10_Amru-Al-Qays_jpg_levo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#j10_Amru-Al-Qays_jpg_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#j10_Amru-Al-Qays_jpg_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#j10_Amru-Al-Qays_jpg_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#j10_Amru-Al-Qays_jpg_nadpis {
/*border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#j10_Amru-Al-Qays_jpg_pravo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#j10_Amru-Al-Qays_jpg_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- 1111111111 11. Jumbled terrain antipodal to the Caloris Basin, Mercury.jpg - j11jpg ----- */
/* Серая область ---------------------------------------------------------------- */
#j11jpg_modal {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
align-items: center;
justify-content: center;
/*visibility: hidden;*/ /*Устаревший метод скрытия модального блока*/
/*opacity: 0;*/ /*Устаревший метод скрытия модального блока*/
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#j11jpg_modal.open {
/*visibility: visible;*/ /*Устаревший метод открытия модального блока*/
/*opacity: 1;*/ /*Устаревший метод открытия модального блока*/
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#j11jpg_osnovnoi_block {
/*border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#j11jpg_modal_block {
/*border: 1px solid lime;*/
position: relative;
padding: 14px;
background-color: rgba(0, 0, 0, 0);
margin: 20px;
text-align: center;
color: white;
font-size: 1.1rem;
display: flex;
flex-wrap: wrap; /*Разрешение переноса строки внтури flex контейнера*/
width: 891px;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#j11jpg_krestik {
position: absolute;
text-align: center;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 7px;
padding-right: 7px;
background-color: black;
color: white;
border: 2px solid white;
border-radius: 0px; /*Квадрат*/
/*border-radius: 5px;*/ /*Скругленный квадрат*/
/*border-radius: 20px;*/ /*Круг*/
top: 0;
right: 45px;
cursor: pointer;
transition: transform 0.2s;
}
#j11jpg_krestik:hover {
color: #F22318;
border: 2px solid #F22318;
transform: scale(1.1);
transition: transform 0.2s;
transition: color 0.8s;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 8px;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#j11jpg_levo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#j11jpg_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#j11jpg_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#j11jpg_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#j11jpg_nadpis {
/*border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#j11jpg_pravo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#j11jpg_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- 1212121212 12. Photomosaic including Copley ray crater, Mercury.jpg - j12jpg ----- */
/* Серая область ---------------------------------------------------------------- */
#j12jpg_modal {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
align-items: center;
justify-content: center;
/*visibility: hidden;*/ /*Устаревший метод скрытия модального блока*/
/*opacity: 0;*/ /*Устаревший метод скрытия модального блока*/
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#j12jpg_modal.open {
/*visibility: visible;*/ /*Устаревший метод открытия модального блока*/
/*opacity: 1;*/ /*Устаревший метод открытия модального блока*/
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#j12jpg_osnovnoi_block {
/*border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#j12jpg_modal_block {
/*border: 1px solid lime;*/
position: relative;
padding: 14px;
background-color: rgba(0, 0, 0, 0);
margin: 20px;
text-align: center;
color: white;
font-size: 1.1rem;
display: flex;
flex-wrap: wrap; /*Разрешение переноса строки внтури flex контейнера*/
width: 891px;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#j12jpg_krestik {
position: absolute;
text-align: center;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 7px;
padding-right: 7px;
background-color: black;
color: white;
border: 2px solid white;
border-radius: 0px; /*Квадрат*/
/*border-radius: 5px;*/ /*Скругленный квадрат*/
/*border-radius: 20px;*/ /*Круг*/
top: 0;
right: 45px;
cursor: pointer;
transition: transform 0.2s;
}
#j12jpg_krestik:hover {
color: #F22318;
border: 2px solid #F22318;
transform: scale(1.1);
transition: transform 0.2s;
transition: color 0.8s;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 8px;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#j12jpg_levo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#j12jpg_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#j12jpg_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#j12jpg_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#j12jpg_nadpis {
/*border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#j12jpg_pravo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#j12jpg_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/*ГАЛЕРЕЯ МЕССЕНДЖЕРА*\
/* ----- ///////1111111111111 Messenger фото/1. Mercury - Messenger.png - mes-1png ----- */
/* Серая область ---------------------------------------------------------------- */
#mes-1png_modal {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
align-items: center;
justify-content: center;
/*visibility: hidden;*/ /*Устаревший метод скрытия модального блока*/
/*opacity: 0;*/ /*Устаревший метод скрытия модального блока*/
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#mes-1png_modal.open {
/*visibility: visible;*/ /*Устаревший метод открытия модального блока*/
/*opacity: 1;*/ /*Устаревший метод открытия модального блока*/
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#mes-1png_osnovnoi_block {
/*border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#mes-1png_modal_block {
/*border: 1px solid lime;*/
position: relative;
padding: 14px;
background-color: rgba(0, 0, 0, 0);
margin: 20px;
text-align: center;
color: white;
font-size: 1.1rem;
display: flex;
flex-wrap: wrap; /*Разрешение переноса строки внтури flex контейнера*/
width: 891px;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#mes-1png_krestik {
position: absolute;
text-align: center;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 7px;
padding-right: 7px;
background-color: black;
color: white;
border: 2px solid white;
border-radius: 0px; /*Квадрат*/
/*border-radius: 5px;*/ /*Скругленный квадрат*/
/*border-radius: 20px;*/ /*Круг*/
top: 0;
right: 45px;
cursor: pointer;
transition: transform 0.2s;
}
#mes-1png_krestik:hover {
color: #F22318;
border: 2px solid #F22318;
transform: scale(1.1);
transition: transform 0.2s;
transition: color 0.8s;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 8px;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#mes-1png_levo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#mes-1png_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#mes-1png_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#mes-1png_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#mes-1png_nadpis {
/*border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#mes-1png_pravo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#mes-1png_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- ////////////22222222222222 Messenger фото/2. Mercury - Messenger.png - mes-2png ----- */
/* Серая область ---------------------------------------------------------------- */
#mes-2png_modal {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
align-items: center;
justify-content: center;
/*visibility: hidden;*/ /*Устаревший метод скрытия модального блока*/
/*opacity: 0;*/ /*Устаревший метод скрытия модального блока*/
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#mes-2png_modal.open {
/*visibility: visible;*/ /*Устаревший метод открытия модального блока*/
/*opacity: 1;*/ /*Устаревший метод открытия модального блока*/
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#mes-2png_osnovnoi_block {
/*border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#mes-2png_modal_block {
/*border: 1px solid lime;*/
position: relative;
padding: 14px;
background-color: rgba(0, 0, 0, 0);
margin: 20px;
text-align: center;
color: white;
font-size: 1.1rem;
display: flex;
flex-wrap: wrap; /*Разрешение переноса строки внтури flex контейнера*/
width: 891px;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#mes-2png_krestik {
position: absolute;
text-align: center;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 7px;
padding-right: 7px;
background-color: black;
color: white;
border: 2px solid white;
border-radius: 0px; /*Квадрат*/
/*border-radius: 5px;*/ /*Скругленный квадрат*/
/*border-radius: 20px;*/ /*Круг*/
top: 0;
right: 45px;
cursor: pointer;
transition: transform 0.2s;
}
#mes-2png_krestik:hover {
color: #F22318;
border: 2px solid #F22318;
transform: scale(1.1);
transition: transform 0.2s;
transition: color 0.8s;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 8px;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#mes-2png_levo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#mes-2png_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#mes-2png_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#mes-2png_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#mes-2png_nadpis {
/*border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#mes-2png_pravo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#mes-2png_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- Messenger фото/3. Mercury в цветных фильтрах - Messenger.png - mes-3png ----- */
/* Серая область ---------------------------------------------------------------- */
#mes-3png_modal {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
align-items: center;
justify-content: center;
/*visibility: hidden;*/ /*Устаревший метод скрытия модального блока*/
/*opacity: 0;*/ /*Устаревший метод скрытия модального блока*/
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#mes-3png_modal.open {
/*visibility: visible;*/ /*Устаревший метод открытия модального блока*/
/*opacity: 1;*/ /*Устаревший метод открытия модального блока*/
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#mes-3png_osnovnoi_block {
/*border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#mes-3png_modal_block {
/*border: 1px solid lime;*/
position: relative;
padding: 14px;
background-color: rgba(0, 0, 0, 0);
margin: 20px;
text-align: center;
color: white;
font-size: 1.1rem;
display: flex;
flex-wrap: wrap; /*Разрешение переноса строки внтури flex контейнера*/
width: 891px;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#mes-3png_krestik {
position: absolute;
text-align: center;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 7px;
padding-right: 7px;
background-color: black;
color: white;
border: 2px solid white;
border-radius: 0px; /*Квадрат*/
/*border-radius: 5px;*/ /*Скругленный квадрат*/
/*border-radius: 20px;*/ /*Круг*/
top: 0;
right: 45px;
cursor: pointer;
transition: transform 0.2s;
}
#mes-3png_krestik:hover {
color: #F22318;
border: 2px solid #F22318;
transform: scale(1.1);
transition: transform 0.2s;
transition: color 0.8s;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 8px;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#mes-3png_levo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#mes-3png_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#mes-3png_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#mes-3png_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#mes-3png_nadpis {
/*border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#mes-3png_pravo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#mes-3png_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- ////////////44444444444 Messenger фото/4. Мозаичное изображение Меркурия - 3 пролет Мессенджера.png - mes-4png ----- */
/* Серая область ---------------------------------------------------------------- */
#mes-4png_modal {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
align-items: center;
justify-content: center;
/*visibility: hidden;*/ /*Устаревший метод скрытия модального блока*/
/*opacity: 0;*/ /*Устаревший метод скрытия модального блока*/
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#mes-4png_modal.open {
/*visibility: visible;*/ /*Устаревший метод открытия модального блока*/
/*opacity: 1;*/ /*Устаревший метод открытия модального блока*/
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#mes-4png_osnovnoi_block {
/*border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#mes-4png_modal_block {
/*border: 1px solid lime;*/
position: relative;
padding: 14px;
background-color: rgba(0, 0, 0, 0);
margin: 20px;
text-align: center;
color: white;
font-size: 1.1rem;
display: flex;
flex-wrap: wrap; /*Разрешение переноса строки внтури flex контейнера*/
width: 891px;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#mes-4png_krestik {
position: absolute;
text-align: center;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 7px;
padding-right: 7px;
background-color: black;
color: white;
border: 2px solid white;
border-radius: 0px; /*Квадрат*/
/*border-radius: 5px;*/ /*Скругленный квадрат*/
/*border-radius: 20px;*/ /*Круг*/
top: 0;
right: 45px;
cursor: pointer;
transition: transform 0.2s;
}
#mes-4png_krestik:hover {
color: #F22318;
border: 2px solid #F22318;
transform: scale(1.1);
transition: transform 0.2s;
transition: color 0.8s;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 8px;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#mes-4png_levo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#mes-4png_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#mes-4png_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#mes-4png_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#mes-4png_nadpis {
/*border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#mes-4png_pravo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#mes-4png_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- Messenger фото/5. Vivaldi crater.png - mes-5png ----- */
/* Серая область ---------------------------------------------------------------- */
#mes-5png_modal {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
align-items: center;
justify-content: center;
/*visibility: hidden;*/ /*Устаревший метод скрытия модального блока*/
/*opacity: 0;*/ /*Устаревший метод скрытия модального блока*/
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#mes-5png_modal.open {
/*visibility: visible;*/ /*Устаревший метод открытия модального блока*/
/*opacity: 1;*/ /*Устаревший метод открытия модального блока*/
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#mes-5png_osnovnoi_block {
/*border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#mes-5png_modal_block {
/*border: 1px solid lime;*/
position: relative;
padding: 14px;
background-color: rgba(0, 0, 0, 0);
margin: 20px;
text-align: center;
color: white;
font-size: 1.1rem;
display: flex;
flex-wrap: wrap; /*Разрешение переноса строки внтури flex контейнера*/
width: 891px;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#mes-5png_krestik {
position: absolute;
text-align: center;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 7px;
padding-right: 7px;
background-color: black;
color: white;
border: 2px solid white;
border-radius: 0px; /*Квадрат*/
/*border-radius: 5px;*/ /*Скругленный квадрат*/
/*border-radius: 20px;*/ /*Круг*/
top: 0;
right: 45px;
cursor: pointer;
transition: transform 0.2s;
}
#mes-5png_krestik:hover {
color: #F22318;
border: 2px solid #F22318;
transform: scale(1.1);
transition: transform 0.2s;
transition: color 0.8s;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 8px;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#mes-5png_levo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#mes-5png_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#mes-5png_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#mes-5png_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#mes-5png_nadpis {
/*border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#mes-5png_pravo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#mes-5png_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- //////666666 Messenger фото/6. Caloris basin.png - mes-6png ----- */
/* Серая область ---------------------------------------------------------------- */
#mes-6png_modal {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
align-items: center;
justify-content: center;
/*visibility: hidden;*/ /*Устаревший метод скрытия модального блока*/
/*opacity: 0;*/ /*Устаревший метод скрытия модального блока*/
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#mes-6png_modal.open {
/*visibility: visible;*/ /*Устаревший метод открытия модального блока*/
/*opacity: 1;*/ /*Устаревший метод открытия модального блока*/
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#mes-6png_osnovnoi_block {
/*border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#mes-6png_modal_block {
/*border: 1px solid lime;*/
position: relative;
padding: 14px;
background-color: rgba(0, 0, 0, 0);
margin: 20px;
text-align: center;
color: white;
font-size: 1.1rem;
display: flex;
flex-wrap: wrap; /*Разрешение переноса строки внтури flex контейнера*/
width: 891px;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#mes-6png_krestik {
position: absolute;
text-align: center;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 7px;
padding-right: 7px;
background-color: black;
color: white;
border: 2px solid white;
border-radius: 0px; /*Квадрат*/
/*border-radius: 5px;*/ /*Скругленный квадрат*/
/*border-radius: 20px;*/ /*Круг*/
top: 0;
right: 45px;
cursor: pointer;
transition: transform 0.2s;
}
#mes-6png_krestik:hover {
color: #F22318;
border: 2px solid #F22318;
transform: scale(1.1);
transition: transform 0.2s;
transition: color 0.8s;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 8px;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#mes-6png_levo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#mes-6png_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#mes-6png_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#mes-6png_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#mes-6png_nadpis {
/*border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#mes-6png_pravo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#mes-6png_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- ///////7777777 Messenger фото/7. Apollodorus crater and Pantheon Fossae.png - mes-7png ----- */
/* Серая область ---------------------------------------------------------------- */
#mes-7png_modal {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
align-items: center;
justify-content: center;
/*visibility: hidden;*/ /*Устаревший метод скрытия модального блока*/
/*opacity: 0;*/ /*Устаревший метод скрытия модального блока*/
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#mes-7png_modal.open {
/*visibility: visible;*/ /*Устаревший метод открытия модального блока*/
/*opacity: 1;*/ /*Устаревший метод открытия модального блока*/
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#mes-7png_osnovnoi_block {
/*border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#mes-7png_modal_block {
/*border: 1px solid lime;*/
position: relative;
padding: 14px;
background-color: rgba(0, 0, 0, 0);
margin: 20px;
text-align: center;
color: white;
font-size: 1.1rem;
display: flex;
flex-wrap: wrap; /*Разрешение переноса строки внтури flex контейнера*/
width: 891px;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#mes-7png_krestik {
position: absolute;
text-align: center;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 7px;
padding-right: 7px;
background-color: black;
color: white;
border: 2px solid white;
border-radius: 0px; /*Квадрат*/
/*border-radius: 5px;*/ /*Скругленный квадрат*/
/*border-radius: 20px;*/ /*Круг*/
top: 0;
right: 45px;
cursor: pointer;
transition: transform 0.2s;
}
#mes-7png_krestik:hover {
color: #F22318;
border: 2px solid #F22318;
transform: scale(1.1);
transition: transform 0.2s;
transition: color 0.8s;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 8px;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#mes-7png_levo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#mes-7png_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#mes-7png_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
/* ------------------------------------------------------- */
/* Блок верхнего пространства ---------------------------- */
#mes-7png_verhnee_prostranstvo {
/*border: 1px solid red;*/
width: 800px;
height: 25px; /*Расчетная высота блока*/
}
/* -------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#mes-7png_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Блок нижнего пространства ---------------------------- */
#mes-7png_nizhnee_prostranstvo {
/*border: 1px solid red;*/
width: 800px;
height: 25px; /*Расчетная высота блока*/
}
/* -------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#mes-7png_nadpis {
/*border: 1px solid orange;*/
width: 805px;
/*padding-left: 40px;*/ /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
/*padding-right: 40px;*/
position: relative;
bottom: -5px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#mes-7png_pravo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#mes-7png_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- ////////88888888 Messenger фото/8. NorthernPlains_2015.png - mes-8png ----- */
/* Серая область ---------------------------------------------------------------- */
#mes-8png_modal {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
align-items: center;
justify-content: center;
/*visibility: hidden;*/ /*Устаревший метод скрытия модального блока*/
/*opacity: 0;*/ /*Устаревший метод скрытия модального блока*/
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#mes-8png_modal.open {
/*visibility: visible;*/ /*Устаревший метод открытия модального блока*/
/*opacity: 1;*/ /*Устаревший метод открытия модального блока*/
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#mes-8png_osnovnoi_block {
/*border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#mes-8png_modal_block {
/*border: 1px solid lime;*/
position: relative;
padding: 14px;
background-color: rgba(0, 0, 0, 0);
margin: 20px;
text-align: center;
color: white;
font-size: 1.1rem;
display: flex;
flex-wrap: wrap; /*Разрешение переноса строки внтури flex контейнера*/
width: 891px;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#mes-8png_krestik {
position: absolute;
text-align: center;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 7px;
padding-right: 7px;
background-color: black;
color: white;
border: 2px solid white;
border-radius: 0px; /*Квадрат*/
/*border-radius: 5px;*/ /*Скругленный квадрат*/
/*border-radius: 20px;*/ /*Круг*/
top: 0;
right: 45px;
cursor: pointer;
transition: transform 0.2s;
}
#mes-8png_krestik:hover {
color: #F22318;
border: 2px solid #F22318;
transform: scale(1.1);
transition: transform 0.2s;
transition: color 0.8s;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 8px;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#mes-8png_levo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#mes-8png_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#mes-8png_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
/* ------------------------------------------------------- */
/* Блок верхнего пространства ---------------------------- */
#mes-8png_verhnee_prostranstvo {
/*border: 1px solid red;*/
width: 800px;
height: 25px; /*Расчетная высота блока*/
}
/* -------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#mes-8png_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Блок нижнего пространства ---------------------------- */
#mes-8png_nizhnee_prostranstvo {
/*border: 1px solid red;*/
width: 800px;
height: 25px; /*Расчетная высота блока*/
}
/* -------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#mes-8png_nadpis {
/*border: 1px solid orange;*/
width: 805px;
/*padding-left: 40px;*/ /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
/*padding-right: 40px;*/
position: relative;
bottom: -5px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#mes-8png_pravo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#mes-8png_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- /////////999999999 Messenger фото/9. Mosaic - unnamed ridge in the northern volcanic plains, Mercury, Messenger.png - mes-9png ----- */
/* Серая область ---------------------------------------------------------------- */
#mes-9png_modal {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
align-items: center;
justify-content: center;
/*visibility: hidden;*/ /*Устаревший метод скрытия модального блока*/
/*opacity: 0;*/ /*Устаревший метод скрытия модального блока*/
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#mes-9png_modal.open {
/*visibility: visible;*/ /*Устаревший метод открытия модального блока*/
/*opacity: 1;*/ /*Устаревший метод открытия модального блока*/
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#mes-9png_osnovnoi_block {
/*border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#mes-9png_modal_block {
/*border: 1px solid lime;*/
position: relative;
padding: 14px;
background-color: rgba(0, 0, 0, 0);
margin: 20px;
text-align: center;
color: white;
font-size: 1.1rem;
display: flex;
flex-wrap: wrap; /*Разрешение переноса строки внтури flex контейнера*/
width: 891px;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#mes-9png_krestik {
position: absolute;
text-align: center;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 7px;
padding-right: 7px;
background-color: black;
color: white;
border: 2px solid white;
border-radius: 0px; /*Квадрат*/
/*border-radius: 5px;*/ /*Скругленный квадрат*/
/*border-radius: 20px;*/ /*Круг*/
top: 0;
right: 45px;
cursor: pointer;
transition: transform 0.2s;
}
#mes-9png_krestik:hover {
color: #F22318;
border: 2px solid #F22318;
transform: scale(1.1);
transition: transform 0.2s;
transition: color 0.8s;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 8px;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#mes-9png_levo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#mes-9png_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#mes-9png_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
/* ------------------------------------------------------- */
/* Блок верхнего пространства ---------------------------- */
#mes-9png_verhnee_prostranstvo {
/*border: 1px solid red;*/
width: 800px;
height: 71px; /*Расчетная высота блока*/
}
/* -------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#mes-9png_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Блок нижнего пространства ---------------------------- */
#mes-9png_nizhnee_prostranstvo {
/*border: 1px solid red;*/
width: 800px;
height: 71px; /*Расчетная высота блока*/
}
/* -------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#mes-9png_nadpis {
/*border: 1px solid orange;*/
width: 805px;
/*padding-left: 40px;*/ /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
/*padding-right: 40px;*/
position: relative;
bottom: -5px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#mes-9png_pravo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#mes-9png_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- ///////101010 Messenger фото/10. Мозаичное изображение Меркурия - Мессенджер.jpg - mes-10jpg ----- */
/* Серая область ---------------------------------------------------------------- */
#mes-10jpg_modal {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
align-items: center;
justify-content: center;
/*visibility: hidden;*/ /*Устаревший метод скрытия модального блока*/
/*opacity: 0;*/ /*Устаревший метод скрытия модального блока*/
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#mes-10jpg_modal.open {
/*visibility: visible;*/ /*Устаревший метод открытия модального блока*/
/*opacity: 1;*/ /*Устаревший метод открытия модального блока*/
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#mes-10jpg_osnovnoi_block {
/*border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#mes-10jpg_modal_block {
/*border: 1px solid lime;*/
position: relative;
padding: 14px;
background-color: rgba(0, 0, 0, 0);
margin: 20px;
text-align: center;
color: white;
font-size: 1.1rem;
display: flex;
flex-wrap: wrap; /*Разрешение переноса строки внтури flex контейнера*/
width: 891px;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#mes-10jpg_krestik {
position: absolute;
text-align: center;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 7px;
padding-right: 7px;
background-color: black;
color: white;
border: 2px solid white;
border-radius: 0px; /*Квадрат*/
/*border-radius: 5px;*/ /*Скругленный квадрат*/
/*border-radius: 20px;*/ /*Круг*/
top: 0;
right: 45px;
cursor: pointer;
transition: transform 0.2s;
}
#mes-10jpg_krestik:hover {
color: #F22318;
border: 2px solid #F22318;
transform: scale(1.1);
transition: transform 0.2s;
transition: color 0.8s;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 8px;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#mes-10jpg_levo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#mes-10jpg_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#mes-10jpg_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
/* ------------------------------------------------------- */
/* Блок верхнего пространства ---------------------------- */
#mes-10jpg_verhnee_prostranstvo {
/*border: 1px solid red;*/
width: 800px;
height: 42px; /*Расчетная высота блока*/
}
/* -------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#mes-10jpg_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Блок нижнего пространства ---------------------------- */
#mes-10jpg_nizhnee_prostranstvo {
/*border: 1px solid red;*/
width: 800px;
height: 42px; /*Расчетная высота блока*/
}
/* -------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#mes-10jpg_nadpis {
/*border: 1px solid orange;*/
width: 805px;
/*padding-left: 40px;*/ /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
/*padding-right: 40px;*/
position: relative;
bottom: -5px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#mes-10jpg_pravo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#mes-10jpg_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- /////111111 Messenger фото/11. Abedin.png - mes-11png ----- */
/* Серая область ---------------------------------------------------------------- */
#mes-11png_modal {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
align-items: center;
justify-content: center;
/*visibility: hidden;*/ /*Устаревший метод скрытия модального блока*/
/*opacity: 0;*/ /*Устаревший метод скрытия модального блока*/
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#mes-11png_modal.open {
/*visibility: visible;*/ /*Устаревший метод открытия модального блока*/
/*opacity: 1;*/ /*Устаревший метод открытия модального блока*/
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#mes-11png_osnovnoi_block {
/*border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#mes-11png_modal_block {
/*border: 1px solid lime;*/
position: relative;
padding: 14px;
background-color: rgba(0, 0, 0, 0);
margin: 20px;
text-align: center;
color: white;
font-size: 1.1rem;
display: flex;
flex-wrap: wrap; /*Разрешение переноса строки внтури flex контейнера*/
width: 891px;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#mes-11png_krestik {
position: absolute;
text-align: center;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 7px;
padding-right: 7px;
background-color: black;
color: white;
border: 2px solid white;
border-radius: 0px; /*Квадрат*/
/*border-radius: 5px;*/ /*Скругленный квадрат*/
/*border-radius: 20px;*/ /*Круг*/
top: 0;
right: 45px;
cursor: pointer;
transition: transform 0.2s;
}
#mes-11png_krestik:hover {
color: #F22318;
border: 2px solid #F22318;
transform: scale(1.1);
transition: transform 0.2s;
transition: color 0.8s;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 8px;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#mes-11png_levo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#mes-11png_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#mes-11png_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#mes-11png_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#mes-11png_nadpis {
/*border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#mes-11png_pravo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#mes-11png_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- ///////121212 Messenger фото/12. Oblique_Abedin_2015.png - mes-12png ----- */
/* Серая область ---------------------------------------------------------------- */
#mes-12png_modal {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
align-items: center;
justify-content: center;
/*visibility: hidden;*/ /*Устаревший метод скрытия модального блока*/
/*opacity: 0;*/ /*Устаревший метод скрытия модального блока*/
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#mes-12png_modal.open {
/*visibility: visible;*/ /*Устаревший метод открытия модального блока*/
/*opacity: 1;*/ /*Устаревший метод открытия модального блока*/
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#mes-12png_osnovnoi_block {
/*border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#mes-12png_modal_block {
/*border: 1px solid lime;*/
position: relative;
padding: 14px;
background-color: rgba(0, 0, 0, 0);
margin: 20px;
text-align: center;
color: white;
font-size: 1.1rem;
display: flex;
flex-wrap: wrap; /*Разрешение переноса строки внтури flex контейнера*/
width: 891px;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#mes-12png_krestik {
position: absolute;
text-align: center;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 7px;
padding-right: 7px;
background-color: black;
color: white;
border: 2px solid white;
border-radius: 0px; /*Квадрат*/
/*border-radius: 5px;*/ /*Скругленный квадрат*/
/*border-radius: 20px;*/ /*Круг*/
top: 0;
right: 45px;
cursor: pointer;
transition: transform 0.2s;
}
#mes-12png_krestik:hover {
color: #F22318;
border: 2px solid #F22318;
transform: scale(1.1);
transition: transform 0.2s;
transition: color 0.8s;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 8px;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#mes-12png_levo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#mes-12png_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#mes-12png_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
/* ------------------------------------------------------- */
/* Блок верхнего пространства ---------------------------- */
#mes-12png_verhnee_prostranstvo {
/*border: 1px solid red;*/
width: 800px;
height: 84px; /*Расчетная высота блока*/
}
/* -------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#mes-12png_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
border-top: 3px solid white;
border-bottom: 3px solid white;
}
/* --------------------------------------------------------------------------------- */
/* Блок нижнего пространства ---------------------------- */
#mes-12png_nizhnee_prostranstvo {
/*border: 1px solid red;*/
width: 800px;
height: 84px; /*Расчетная высота блока*/
}
/* -------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#mes-12png_nadpis {
/*border: 1px solid orange;*/
width: 805px;
/*padding-left: 40px;*/ /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
/*padding-right: 40px;*/
position: relative;
bottom: -5px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#mes-12png_pravo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#mes-12png_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- ///////131313 Messenger фото/13. Rays_of_Hokusai_high_res.png - mes-13png ----- */
/* Серая область ---------------------------------------------------------------- */
#mes-13png_modal {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
align-items: center;
justify-content: center;
/*visibility: hidden;*/ /*Устаревший метод скрытия модального блока*/
/*opacity: 0;*/ /*Устаревший метод скрытия модального блока*/
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#mes-13png_modal.open {
/*visibility: visible;*/ /*Устаревший метод открытия модального блока*/
/*opacity: 1;*/ /*Устаревший метод открытия модального блока*/
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#mes-13png_osnovnoi_block {
/*border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#mes-13png_modal_block {
/*border: 1px solid lime;*/
position: relative;
padding: 14px;
background-color: rgba(0, 0, 0, 0);
margin: 20px;
text-align: center;
color: white;
font-size: 1.1rem;
display: flex;
flex-wrap: wrap; /*Разрешение переноса строки внтури flex контейнера*/
width: 891px;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#mes-13png_krestik {
position: absolute;
text-align: center;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 7px;
padding-right: 7px;
background-color: black;
color: white;
border: 2px solid white;
border-radius: 0px; /*Квадрат*/
/*border-radius: 5px;*/ /*Скругленный квадрат*/
/*border-radius: 20px;*/ /*Круг*/
top: 0;
right: 45px;
cursor: pointer;
transition: transform 0.2s;
}
#mes-13png_krestik:hover {
color: #F22318;
border: 2px solid #F22318;
transform: scale(1.1);
transition: transform 0.2s;
transition: color 0.8s;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 8px;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#mes-13png_levo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#mes-13png_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#mes-13png_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#mes-13png_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#mes-13png_nadpis {
/*border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#mes-13png_pravo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#mes-13png_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- ///////141414 Messenger фото/14. Hokusai_crater.jpg - mes-14jpg ----- */
/* Серая область ---------------------------------------------------------------- */
#mes-14jpg_modal {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
align-items: center;
justify-content: center;
/*visibility: hidden;*/ /*Устаревший метод скрытия модального блока*/
/*opacity: 0;*/ /*Устаревший метод скрытия модального блока*/
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#mes-14jpg_modal.open {
/*visibility: visible;*/ /*Устаревший метод открытия модального блока*/
/*opacity: 1;*/ /*Устаревший метод открытия модального блока*/
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#mes-14jpg_osnovnoi_block {
/*border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#mes-14jpg_modal_block {
/*border: 1px solid lime;*/
position: relative;
padding: 14px;
background-color: rgba(0, 0, 0, 0);
margin: 20px;
text-align: center;
color: white;
font-size: 1.1rem;
display: flex;
flex-wrap: wrap; /*Разрешение переноса строки внтури flex контейнера*/
width: 891px;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#mes-14jpg_krestik {
position: absolute;
text-align: center;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 7px;
padding-right: 7px;
background-color: black;
color: white;
border: 2px solid white;
border-radius: 0px; /*Квадрат*/
/*border-radius: 5px;*/ /*Скругленный квадрат*/
/*border-radius: 20px;*/ /*Круг*/
top: 0;
right: 45px;
cursor: pointer;
transition: transform 0.2s;
}
#mes-14jpg_krestik:hover {
color: #F22318;
border: 2px solid #F22318;
transform: scale(1.1);
transition: transform 0.2s;
transition: color 0.8s;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 8px;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#mes-14jpg_levo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#mes-14jpg_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#mes-14jpg_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#mes-14jpg_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#mes-14jpg_nadpis {
/*border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#mes-14jpg_pravo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#mes-14jpg_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- ///////151515 Messenger фото/15. Tolstoj_and_Nureyev.png - mes-15png ----- */
/* Серая область ---------------------------------------------------------------- */
#mes-15png_modal {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
align-items: center;
justify-content: center;
/*visibility: hidden;*/ /*Устаревший метод скрытия модального блока*/
/*opacity: 0;*/ /*Устаревший метод скрытия модального блока*/
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#mes-15png_modal.open {
/*visibility: visible;*/ /*Устаревший метод открытия модального блока*/
/*opacity: 1;*/ /*Устаревший метод открытия модального блока*/
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#mes-15png_osnovnoi_block {
/*border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#mes-15png_modal_block {
/*border: 1px solid lime;*/
position: relative;
padding: 14px;
background-color: rgba(0, 0, 0, 0);
margin: 20px;
text-align: center;
color: white;
font-size: 1.1rem;
display: flex;
flex-wrap: wrap; /*Разрешение переноса строки внтури flex контейнера*/
width: 891px;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#mes-15png_krestik {
position: absolute;
text-align: center;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 7px;
padding-right: 7px;
background-color: black;
color: white;
border: 2px solid white;
border-radius: 0px; /*Квадрат*/
/*border-radius: 5px;*/ /*Скругленный квадрат*/
/*border-radius: 20px;*/ /*Круг*/
top: 0;
right: 45px;
cursor: pointer;
transition: transform 0.2s;
}
#mes-15png_krestik:hover {
color: #F22318;
border: 2px solid #F22318;
transform: scale(1.1);
transition: transform 0.2s;
transition: color 0.8s;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 8px;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#mes-15png_levo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#mes-15png_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#mes-15png_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#mes-15png_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#mes-15png_nadpis {
/*border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#mes-15png_pravo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#mes-15png_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- /////161616 Messenger фото/16. Tolstoj_basin_Mariner-10_and_Messenger.jpg - mes-16jpg ----- */
/* Серая область ---------------------------------------------------------------- */
#mes-16jpg_modal {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
align-items: center;
justify-content: center;
/*visibility: hidden;*/ /*Устаревший метод скрытия модального блока*/
/*opacity: 0;*/ /*Устаревший метод скрытия модального блока*/
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#mes-16jpg_modal.open {
/*visibility: visible;*/ /*Устаревший метод открытия модального блока*/
/*opacity: 1;*/ /*Устаревший метод открытия модального блока*/
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#mes-16jpg_osnovnoi_block {
/*border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#mes-16jpg_modal_block {
/*border: 1px solid lime;*/
position: relative;
padding: 14px;
background-color: rgba(0, 0, 0, 0);
margin: 20px;
text-align: center;
color: white;
font-size: 1.1rem;
display: flex;
flex-wrap: wrap; /*Разрешение переноса строки внтури flex контейнера*/
width: 891px;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#mes-16jpg_krestik {
position: absolute;
text-align: center;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 7px;
padding-right: 7px;
background-color: black;
color: white;
border: 2px solid white;
border-radius: 0px; /*Квадрат*/
/*border-radius: 5px;*/ /*Скругленный квадрат*/
/*border-radius: 20px;*/ /*Круг*/
top: 0;
right: 45px;
cursor: pointer;
transition: transform 0.2s;
}
#mes-16jpg_krestik:hover {
color: #F22318;
border: 2px solid #F22318;
transform: scale(1.1);
transition: transform 0.2s;
transition: color 0.8s;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 8px;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#mes-16jpg_levo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#mes-16jpg_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#mes-16jpg_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
/* ------------------------------------------------------- */
/* Блок верхнего пространства ---------------------------- */
#mes-16jpg_verhnee_prostranstvo {
/*border: 1px solid red;*/
width: 800px;
height: 64px; /*Расчетная высота блока*/
}
/* -------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#mes-16jpg_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Блок нижнего пространства ---------------------------- */
#mes-16jpg_nizhnee_prostranstvo {
/*border: 1px solid red;*/
width: 800px;
height: 64px; /*Расчетная высота блока*/
}
/* -------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#mes-16jpg_nadpis {
/*border: 1px solid orange;*/
width: 805px;
/*padding-left: 40px;*/ /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
/*padding-right: 40px;*/
position: relative;
bottom: -5px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#mes-16jpg_pravo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#mes-16jpg_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- ///////171717 Messenger фото/17. Torrent in tolstoj.png - mes-17png ----- */
/* Серая область ---------------------------------------------------------------- */
#mes-17png_modal {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
align-items: center;
justify-content: center;
/*visibility: hidden;*/ /*Устаревший метод скрытия модального блока*/
/*opacity: 0;*/ /*Устаревший метод скрытия модального блока*/
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#mes-17png_modal.open {
/*visibility: visible;*/ /*Устаревший метод открытия модального блока*/
/*opacity: 1;*/ /*Устаревший метод открытия модального блока*/
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#mes-17png_osnovnoi_block {
/*border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#mes-17png_modal_block {
/*border: 1px solid lime;*/
position: relative;
padding: 14px;
background-color: rgba(0, 0, 0, 0);
margin: 20px;
text-align: center;
color: white;
font-size: 1.1rem;
display: flex;
flex-wrap: wrap; /*Разрешение переноса строки внтури flex контейнера*/
width: 891px;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#mes-17png_krestik {
position: absolute;
text-align: center;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 7px;
padding-right: 7px;
background-color: black;
color: white;
border: 2px solid white;
border-radius: 0px; /*Квадрат*/
/*border-radius: 5px;*/ /*Скругленный квадрат*/
/*border-radius: 20px;*/ /*Круг*/
top: 0;
right: 45px;
cursor: pointer;
transition: transform 0.2s;
}
#mes-17png_krestik:hover {
color: #F22318;
border: 2px solid #F22318;
transform: scale(1.1);
transition: transform 0.2s;
transition: color 0.8s;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 8px;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#mes-17png_levo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#mes-17png_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#mes-17png_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#mes-17png_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#mes-17png_nadpis {
/*border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#mes-17png_pravo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#mes-17png_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- /////181818 Messenger фото/18. Lermontov crater.png - mes-18png ----- */
/* Серая область ---------------------------------------------------------------- */
#mes-18png_modal {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
align-items: center;
justify-content: center;
/*visibility: hidden;*/ /*Устаревший метод скрытия модального блока*/
/*opacity: 0;*/ /*Устаревший метод скрытия модального блока*/
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#mes-18png_modal.open {
/*visibility: visible;*/ /*Устаревший метод открытия модального блока*/
/*opacity: 1;*/ /*Устаревший метод открытия модального блока*/
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#mes-18png_osnovnoi_block {
/*border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#mes-18png_modal_block {
/*border: 1px solid lime;*/
position: relative;
padding: 14px;
background-color: rgba(0, 0, 0, 0);
margin: 20px;
text-align: center;
color: white;
font-size: 1.1rem;
display: flex;
flex-wrap: wrap; /*Разрешение переноса строки внтури flex контейнера*/
width: 891px;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#mes-18png_krestik {
position: absolute;
text-align: center;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 7px;
padding-right: 7px;
background-color: black;
color: white;
border: 2px solid white;
border-radius: 0px; /*Квадрат*/
/*border-radius: 5px;*/ /*Скругленный квадрат*/
/*border-radius: 20px;*/ /*Круг*/
top: 0;
right: 45px;
cursor: pointer;
transition: transform 0.2s;
}
#mes-18png_krestik:hover {
color: #F22318;
border: 2px solid #F22318;
transform: scale(1.1);
transition: transform 0.2s;
transition: color 0.8s;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 8px;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#mes-18png_levo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#mes-18png_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#mes-18png_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#mes-18png_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#mes-18png_nadpis {
/*border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#mes-18png_pravo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#mes-18png_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- /////191919 Messenger фото/19. Popova crater.jpg - mes-19jpg ----- */
/* Серая область ---------------------------------------------------------------- */
#mes-19jpg_modal {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
align-items: center;
justify-content: center;
/*visibility: hidden;*/ /*Устаревший метод скрытия модального блока*/
/*opacity: 0;*/ /*Устаревший метод скрытия модального блока*/
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#mes-19jpg_modal.open {
/*visibility: visible;*/ /*Устаревший метод открытия модального блока*/
/*opacity: 1;*/ /*Устаревший метод открытия модального блока*/
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#mes-19jpg_osnovnoi_block {
/*border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#mes-19jpg_modal_block {
/*border: 1px solid lime;*/
position: relative;
padding: 14px;
background-color: rgba(0, 0, 0, 0);
margin: 20px;
text-align: center;
color: white;
font-size: 1.1rem;
display: flex;
flex-wrap: wrap; /*Разрешение переноса строки внтури flex контейнера*/
width: 891px;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#mes-19jpg_krestik {
position: absolute;
text-align: center;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 7px;
padding-right: 7px;
background-color: black;
color: white;
border: 2px solid white;
border-radius: 0px; /*Квадрат*/
/*border-radius: 5px;*/ /*Скругленный квадрат*/
/*border-radius: 20px;*/ /*Круг*/
top: 0;
right: 45px;
cursor: pointer;
transition: transform 0.2s;
}
#mes-19jpg_krestik:hover {
color: #F22318;
border: 2px solid #F22318;
transform: scale(1.1);
transition: transform 0.2s;
transition: color 0.8s;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 8px;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#mes-19jpg_levo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#mes-19jpg_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#mes-19jpg_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#mes-19jpg_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#mes-19jpg_nadpis {
/*border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#mes-19jpg_pravo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#mes-19jpg_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- /////202020 Messenger фото/20. Michelangelo basin.jpg - mes-20jpg ----- */
/* Серая область ---------------------------------------------------------------- */
#mes-20jpg_modal {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
align-items: center;
justify-content: center;
/*visibility: hidden;*/ /*Устаревший метод скрытия модального блока*/
/*opacity: 0;*/ /*Устаревший метод скрытия модального блока*/
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#mes-20jpg_modal.open {
/*visibility: visible;*/ /*Устаревший метод открытия модального блока*/
/*opacity: 1;*/ /*Устаревший метод открытия модального блока*/
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#mes-20jpg_osnovnoi_block {
/*border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#mes-20jpg_modal_block {
/*border: 1px solid lime;*/
position: relative;
padding: 14px;
background-color: rgba(0, 0, 0, 0);
margin: 20px;
text-align: center;
color: white;
font-size: 1.1rem;
display: flex;
flex-wrap: wrap; /*Разрешение переноса строки внтури flex контейнера*/
width: 891px;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#mes-20jpg_krestik {
position: absolute;
text-align: center;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 7px;
padding-right: 7px;
background-color: black;
color: white;
border: 2px solid white;
border-radius: 0px; /*Квадрат*/
/*border-radius: 5px;*/ /*Скругленный квадрат*/
/*border-radius: 20px;*/ /*Круг*/
top: 0;
right: 45px;
cursor: pointer;
transition: transform 0.2s;
}
#mes-20jpg_krestik:hover {
color: #F22318;
border: 2px solid #F22318;
transform: scale(1.1);
transition: transform 0.2s;
transition: color 0.8s;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 8px;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#mes-20jpg_levo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#mes-20jpg_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#mes-20jpg_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#mes-20jpg_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#mes-20jpg_nadpis {
/*border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#mes-20jpg_pravo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#mes-20jpg_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- /////212121 Messenger фото/21. Prokofiev crater.png - mes-21png ----- */
/* Серая область ---------------------------------------------------------------- */
#mes-21png_modal {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
align-items: center;
justify-content: center;
/*visibility: hidden;*/ /*Устаревший метод скрытия модального блока*/
/*opacity: 0;*/ /*Устаревший метод скрытия модального блока*/
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#mes-21png_modal.open {
/*visibility: visible;*/ /*Устаревший метод открытия модального блока*/
/*opacity: 1;*/ /*Устаревший метод открытия модального блока*/
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#mes-21png_osnovnoi_block {
/*border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#mes-21png_modal_block {
/*border: 1px solid lime;*/
position: relative;
padding: 14px;
background-color: rgba(0, 0, 0, 0);
margin: 20px;
text-align: center;
color: white;
font-size: 1.1rem;
display: flex;
flex-wrap: wrap; /*Разрешение переноса строки внтури flex контейнера*/
width: 891px;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#mes-21png_krestik {
position: absolute;
text-align: center;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 7px;
padding-right: 7px;
background-color: black;
color: white;
border: 2px solid white;
border-radius: 0px; /*Квадрат*/
/*border-radius: 5px;*/ /*Скругленный квадрат*/
/*border-radius: 20px;*/ /*Круг*/
top: 0;
right: 45px;
cursor: pointer;
transition: transform 0.2s;
}
#mes-21png_krestik:hover {
color: #F22318;
border: 2px solid #F22318;
transform: scale(1.1);
transition: transform 0.2s;
transition: color 0.8s;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 8px;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#mes-21png_levo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#mes-21png_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#mes-21png_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
/* ------------------------------------------------------- */
/* Блок верхнего пространства ---------------------------- */
#mes-21png_verhnee_prostranstvo {
/*border: 1px solid red;*/
width: 800px;
height: 87px; /*Расчетная высота блока*/
}
/* -------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#mes-21png_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Блок нижнего пространства ---------------------------- */
#mes-21png_nizhnee_prostranstvo {
/*border: 1px solid red;*/
width: 800px;
height: 87px; /*Расчетная высота блока*/
}
/* -------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#mes-21png_nadpis {
/*border: 1px solid orange;*/
width: 805px;
/*padding-left: 40px;*/ /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
/*padding-right: 40px;*/
position: relative;
bottom: -5px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#mes-21png_pravo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#mes-21png_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- /////222222 Messenger фото/22. Lennon crater.jpg - mes-22jpg ----- */
/* Серая область ---------------------------------------------------------------- */
#mes-22jpg_modal {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
align-items: center;
justify-content: center;
/*visibility: hidden;*/ /*Устаревший метод скрытия модального блока*/
/*opacity: 0;*/ /*Устаревший метод скрытия модального блока*/
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#mes-22jpg_modal.open {
/*visibility: visible;*/ /*Устаревший метод открытия модального блока*/
/*opacity: 1;*/ /*Устаревший метод открытия модального блока*/
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#mes-22jpg_osnovnoi_block {
/*border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#mes-22jpg_modal_block {
/*border: 1px solid lime;*/
position: relative;
padding: 14px;
background-color: rgba(0, 0, 0, 0);
margin: 20px;
text-align: center;
color: white;
font-size: 1.1rem;
display: flex;
flex-wrap: wrap; /*Разрешение переноса строки внтури flex контейнера*/
width: 891px;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#mes-22jpg_krestik {
position: absolute;
text-align: center;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 7px;
padding-right: 7px;
background-color: black;
color: white;
border: 2px solid white;
border-radius: 0px; /*Квадрат*/
/*border-radius: 5px;*/ /*Скругленный квадрат*/
/*border-radius: 20px;*/ /*Круг*/
top: 0;
right: 45px;
cursor: pointer;
transition: transform 0.2s;
}
#mes-22jpg_krestik:hover {
color: #F22318;
border: 2px solid #F22318;
transform: scale(1.1);
transition: transform 0.2s;
transition: color 0.8s;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 8px;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#mes-22jpg_levo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#mes-22jpg_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#mes-22jpg_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#mes-22jpg_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#mes-22jpg_nadpis {
/*border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#mes-22jpg_pravo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#mes-22jpg_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- /////232323 Messenger фото/23. Mena crater.jpg - mes-23jpg ----- */
/* Серая область ---------------------------------------------------------------- */
#mes-23jpg_modal {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
align-items: center;
justify-content: center;
/*visibility: hidden;*/ /*Устаревший метод скрытия модального блока*/
/*opacity: 0;*/ /*Устаревший метод скрытия модального блока*/
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#mes-23jpg_modal.open {
/*visibility: visible;*/ /*Устаревший метод открытия модального блока*/
/*opacity: 1;*/ /*Устаревший метод открытия модального блока*/
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#mes-23jpg_osnovnoi_block {
/*border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#mes-23jpg_modal_block {
/*border: 1px solid lime;*/
position: relative;
padding: 14px;
background-color: rgba(0, 0, 0, 0);
margin: 20px;
text-align: center;
color: white;
font-size: 1.1rem;
display: flex;
flex-wrap: wrap; /*Разрешение переноса строки внтури flex контейнера*/
width: 891px;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#mes-23jpg_krestik {
position: absolute;
text-align: center;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 7px;
padding-right: 7px;
background-color: black;
color: white;
border: 2px solid white;
border-radius: 0px; /*Квадрат*/
/*border-radius: 5px;*/ /*Скругленный квадрат*/
/*border-radius: 20px;*/ /*Круг*/
top: 0;
right: 45px;
cursor: pointer;
transition: transform 0.2s;
}
#mes-23jpg_krestik:hover {
color: #F22318;
border: 2px solid #F22318;
transform: scale(1.1);
transition: transform 0.2s;
transition: color 0.8s;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 8px;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#mes-23jpg_levo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#mes-23jpg_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#mes-23jpg_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#mes-23jpg_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#mes-23jpg_nadpis {
/*border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#mes-23jpg_pravo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#mes-23jpg_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- /////242424 Messenger фото/24. Chekhov basin.png - mes-24png ----- */
/* Серая область ---------------------------------------------------------------- */
#mes-24png_modal {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
align-items: center;
justify-content: center;
/*visibility: hidden;*/ /*Устаревший метод скрытия модального блока*/
/*opacity: 0;*/ /*Устаревший метод скрытия модального блока*/
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#mes-24png_modal.open {
/*visibility: visible;*/ /*Устаревший метод открытия модального блока*/
/*opacity: 1;*/ /*Устаревший метод открытия модального блока*/
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#mes-24png_osnovnoi_block {
/*border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#mes-24png_modal_block {
/*border: 1px solid lime;*/
position: relative;
padding: 14px;
background-color: rgba(0, 0, 0, 0);
margin: 20px;
text-align: center;
color: white;
font-size: 1.1rem;
display: flex;
flex-wrap: wrap; /*Разрешение переноса строки внтури flex контейнера*/
width: 891px;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#mes-24png_krestik {
position: absolute;
text-align: center;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 7px;
padding-right: 7px;
background-color: black;
color: white;
border: 2px solid white;
border-radius: 0px; /*Квадрат*/
/*border-radius: 5px;*/ /*Скругленный квадрат*/
/*border-radius: 20px;*/ /*Круг*/
top: 0;
right: 45px;
cursor: pointer;
transition: transform 0.2s;
}
#mes-24png_krestik:hover {
color: #F22318;
border: 2px solid #F22318;
transform: scale(1.1);
transition: transform 0.2s;
transition: color 0.8s;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 8px;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#mes-24png_levo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#mes-24png_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#mes-24png_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#mes-24png_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#mes-24png_nadpis {
/*border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#mes-24png_pravo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#mes-24png_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- /////252525 Messenger фото/25. Sunrise on Mercury.png - mes-25png ----- */
/* Серая область ---------------------------------------------------------------- */
#mes-25png_modal {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
align-items: center;
justify-content: center;
/*visibility: hidden;*/ /*Устаревший метод скрытия модального блока*/
/*opacity: 0;*/ /*Устаревший метод скрытия модального блока*/
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#mes-25png_modal.open {
/*visibility: visible;*/ /*Устаревший метод открытия модального блока*/
/*opacity: 1;*/ /*Устаревший метод открытия модального блока*/
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#mes-25png_osnovnoi_block {
/*border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#mes-25png_modal_block {
/*border: 1px solid lime;*/
position: relative;
padding: 14px;
background-color: rgba(0, 0, 0, 0);
margin: 20px;
text-align: center;
color: white;
font-size: 1.1rem;
display: flex;
flex-wrap: wrap; /*Разрешение переноса строки внтури flex контейнера*/
width: 891px;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#mes-25png_krestik {
position: absolute;
text-align: center;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 7px;
padding-right: 7px;
background-color: black;
color: white;
border: 2px solid white;
border-radius: 0px; /*Квадрат*/
/*border-radius: 5px;*/ /*Скругленный квадрат*/
/*border-radius: 20px;*/ /*Круг*/
top: 0;
right: 45px;
cursor: pointer;
transition: transform 0.2s;
}
#mes-25png_krestik:hover {
color: #F22318;
border: 2px solid #F22318;
transform: scale(1.1);
transition: transform 0.2s;
transition: color 0.8s;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 8px;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#mes-25png_levo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#mes-25png_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#mes-25png_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#mes-25png_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#mes-25png_nadpis {
/*border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#mes-25png_pravo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#mes-25png_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ГАЛЕРЕЯ БЕПИКОЛОМБО */
/* Пролет 1 */
/* ----- Пролет 1 - Фото 1 - "BepiColombo фото/1 flyby/1. BepiColombo_meets_Mercury_1oct2021.png" - p1f1 ----- */
/* Серая область ---------------------------------------------------------------- */
#p1f1_modal {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
align-items: center;
justify-content: center;
/*visibility: hidden;*/ /*Устаревший метод скрытия модального блока*/
/*opacity: 0;*/ /*Устаревший метод скрытия модального блока*/
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#p1f1_modal.open {
/*visibility: visible;*/ /*Устаревший метод открытия модального блока*/
/*opacity: 1;*/ /*Устаревший метод открытия модального блока*/
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#p1f1_osnovnoi_block {
/*border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#p1f1_modal_block {
/*border: 1px solid lime;*/
position: relative;
padding: 14px;
background-color: rgba(0, 0, 0, 0);
margin: 20px;
text-align: center;
color: white;
font-size: 1.1rem;
display: flex;
flex-wrap: wrap; /*Разрешение переноса строки внтури flex контейнера*/
width: 891px;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#p1f1_krestik {
position: absolute;
text-align: center;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 7px;
padding-right: 7px;
background-color: black;
color: white;
border: 2px solid white;
border-radius: 0px; /*Квадрат*/
/*border-radius: 5px;*/ /*Скругленный квадрат*/
/*border-radius: 20px;*/ /*Круг*/
top: 0;
right: 45px;
cursor: pointer;
transition: transform 0.2s;
}
#p1f1_krestik:hover {
color: #F22318;
border: 2px solid #F22318;
transform: scale(1.1);
transition: transform 0.2s;
transition: color 0.8s;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 8px;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#p1f1_levo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#p1f1_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#p1f1_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#p1f1_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#p1f1_nadpis {
/*border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#p1f1_pravo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#p1f1_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- Пролет 1 - Фото 2 - "BepiColombo фото/1 flyby/2. Sunrise_on_Mercury.png" - p1f2 ----- */
/* Серая область ---------------------------------------------------------------- */
#p1f2_modal {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
align-items: center;
justify-content: center;
/*visibility: hidden;*/ /*Устаревший метод скрытия модального блока*/
/*opacity: 0;*/ /*Устаревший метод скрытия модального блока*/
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#p1f2_modal.open {
/*visibility: visible;*/ /*Устаревший метод открытия модального блока*/
/*opacity: 1;*/ /*Устаревший метод открытия модального блока*/
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#p1f2_osnovnoi_block {
/*border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#p1f2_modal_block {
/*border: 1px solid lime;*/
position: relative;
padding: 14px;
background-color: rgba(0, 0, 0, 0);
margin: 20px;
text-align: center;
color: white;
font-size: 1.1rem;
display: flex;
flex-wrap: wrap; /*Разрешение переноса строки внтури flex контейнера*/
width: 891px;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#p1f2_krestik {
position: absolute;
text-align: center;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 7px;
padding-right: 7px;
background-color: black;
color: white;
border: 2px solid white;
border-radius: 0px; /*Квадрат*/
/*border-radius: 5px;*/ /*Скругленный квадрат*/
/*border-radius: 20px;*/ /*Круг*/
top: 0;
right: 45px;
cursor: pointer;
transition: transform 0.2s;
}
#p1f2_krestik:hover {
color: #F22318;
border: 2px solid #F22318;
transform: scale(1.1);
transition: transform 0.2s;
transition: color 0.8s;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 8px;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#p1f2_levo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#p1f2_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#p1f2_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#p1f2_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#p1f2_nadpis {
/*border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#p1f2_pravo {
/*border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#p1f2_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- Пролет 1 - Фото 3 - "BepiColombo фото/1 flyby/3. A_taste_of_Mercury_geology.png" - p1f3 ----- */
/* Серая область ---------------------------------------------------------------- */
#p1f3_modal {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
align-items: center;
justify-content: center;
/*visibility: hidden;*/ /*Устаревший метод скрытия модального блока*/
/*opacity: 0;*/ /*Устаревший метод скрытия модального блока*/
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#p1f3_modal.open {
/*visibility: visible;*/ /*Устаревший метод открытия модального блока*/
/*opacity: 1;*/ /*Устаревший метод открытия модального блока*/
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#p1f3_osnovnoi_block {
/* border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#p1f3_modal_block {
/* border: 1px solid lime;*/
position: relative;
padding: 14px;
background-color: rgba(0, 0, 0, 0);
margin: 20px;
text-align: center;
color: white;
font-size: 1.1rem;
display: flex;
flex-wrap: wrap; /*Разрешение переноса строки внтури flex контейнера*/
width: 891px;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#p1f3_krestik {
position: absolute;
text-align: center;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 7px;
padding-right: 7px;
background-color: black;
color: white;
border: 2px solid white;
border-radius: 0px; /*Квадрат*/
/*border-radius: 5px;*/ /*Скругленный квадрат*/
/*border-radius: 20px;*/ /*Круг*/
top: 0;
right: 45px;
cursor: pointer;
transition: transform 0.2s;
}
#p1f3_krestik:hover {
color: #F22318;
border: 2px solid #F22318;
transform: scale(1.1);
transition: transform 0.2s;
transition: color 0.8s;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 8px;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#p1f3_levo {
/* border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#p1f3_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#p1f3_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#p1f3_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#p1f3_nadpis {
/* border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#p1f3_pravo {
/* border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#p1f3_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- Пролет 1 - Фото 4 - "BepiColombo фото/1 flyby/4. Hello_Mercury.png" - p1f4 ----- */
/* Серая область ---------------------------------------------------------------- */
#p1f4_modal {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
align-items: center;
justify-content: center;
/*visibility: hidden;*/ /*Устаревший метод скрытия модального блока*/
/*opacity: 0;*/ /*Устаревший метод скрытия модального блока*/
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#p1f4_modal.open {
/*visibility: visible;*/ /*Устаревший метод открытия модального блока*/
/*opacity: 1;*/ /*Устаревший метод открытия модального блока*/
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#p1f4_osnovnoi_block {
/* border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#p1f4_modal_block {
/* border: 1px solid lime;*/
position: relative;
padding: 14px;
background-color: rgba(0, 0, 0, 0);
margin: 20px;
text-align: center;
color: white;
font-size: 1.1rem;
display: flex;
flex-wrap: wrap; /*Разрешение переноса строки внтури flex контейнера*/
width: 891px;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#p1f4_krestik {
position: absolute;
text-align: center;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 7px;
padding-right: 7px;
background-color: black;
color: white;
border: 2px solid white;
border-radius: 0px; /*Квадрат*/
/*border-radius: 5px;*/ /*Скругленный квадрат*/
/*border-radius: 20px;*/ /*Круг*/
top: 0;
right: 45px;
cursor: pointer;
transition: transform 0.2s;
}
#p1f4_krestik:hover {
color: #F22318;
border: 2px solid #F22318;
transform: scale(1.1);
transition: transform 0.2s;
transition: color 0.8s;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 8px;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#p1f4_levo {
/* border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#p1f4_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#p1f4_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#p1f4_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#p1f4_nadpis {
/* border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#p1f4_pravo {
/* border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#p1f4_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Пролет 2 */
/* ----- Пролет 2 - Фото 1 - BepiColombo фото/2 flyby/1. Sunrise_and_shadows.png - p2f1 ----- */
/* Серая область ---------------------------------------------------------------- */
#p2f1_modal {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
align-items: center;
justify-content: center;
/*visibility: hidden;*/ /*Устаревший метод скрытия модального блока*/
/*opacity: 0;*/ /*Устаревший метод скрытия модального блока*/
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#p2f1_modal.open {
/*visibility: visible;*/ /*Устаревший метод открытия модального блока*/
/*opacity: 1;*/ /*Устаревший метод открытия модального блока*/
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#p2f1_osnovnoi_block {
/* border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#p2f1_modal_block {
/* border: 1px solid lime;*/
position: relative;
padding: 14px;
background-color: rgba(0, 0, 0, 0);
margin: 20px;
text-align: center;
color: white;
font-size: 1.1rem;
display: flex;
flex-wrap: wrap; /*Разрешение переноса строки внтури flex контейнера*/
width: 891px;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#p2f1_krestik {
position: absolute;
text-align: center;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 7px;
padding-right: 7px;
background-color: black;
color: white;
border: 2px solid white;
border-radius: 0px; /*Квадрат*/
/*border-radius: 5px;*/ /*Скругленный квадрат*/
/*border-radius: 20px;*/ /*Круг*/
top: 0;
right: 45px;
cursor: pointer;
transition: transform 0.2s;
}
#p2f1_krestik:hover {
color: #F22318;
border: 2px solid #F22318;
transform: scale(1.1);
transition: transform 0.2s;
transition: color 0.8s;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 8px;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#p2f1_levo {
/* border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#p2f1_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#p2f1_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#p2f1_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#p2f1_nadpis {
/* border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#p2f1_pravo {
/* border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#p2f1_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- Пролет 2 - Фото 1.2 - "BepiColombo фото/2 flyby/1.2 Sunrise_and_shadows - rus annotated.png" - p2f1_2 ----- */
/* Серая область ---------------------------------------------------------------- */
#p2f1_2_modal {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
align-items: center;
justify-content: center;
/*visibility: hidden;*/ /*Устаревший метод скрытия модального блока*/
/*opacity: 0;*/ /*Устаревший метод скрытия модального блока*/
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#p2f1_2_modal.open {
/*visibility: visible;*/ /*Устаревший метод открытия модального блока*/
/*opacity: 1;*/ /*Устаревший метод открытия модального блока*/
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#p2f1_2_osnovnoi_block {
/* border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#p2f1_2_modal_block {
/* border: 1px solid lime;*/
position: relative;
padding: 14px;
background-color: rgba(0, 0, 0, 0);
margin: 20px;
text-align: center;
color: white;
font-size: 1.1rem;
display: flex;
flex-wrap: wrap; /*Разрешение переноса строки внтури flex контейнера*/
width: 891px;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#p2f1_2_krestik {
position: absolute;
text-align: center;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 7px;
padding-right: 7px;
background-color: black;
color: white;
border: 2px solid white;
border-radius: 0px; /*Квадрат*/
/*border-radius: 5px;*/ /*Скругленный квадрат*/
/*border-radius: 20px;*/ /*Круг*/
top: 0;
right: 45px;
cursor: pointer;
transition: transform 0.2s;
}
#p2f1_2_krestik:hover {
color: #F22318;
border: 2px solid #F22318;
transform: scale(1.1);
transition: transform 0.2s;
transition: color 0.8s;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 8px;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#p2f1_2_levo {
/* border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#p2f1_2_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#p2f1_2_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#p2f1_2_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#p2f1_2_nadpis {
/* border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#p2f1_2_pravo {
/* border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#p2f1_2_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- Пролет 2 - Фото 2 - "BepiColombo фото/2 flyby/2. First_sighting_of_Caloris.png" - p2f2 ----- */
/* Серая область ---------------------------------------------------------------- */
#p2f2_modal {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
align-items: center;
justify-content: center;
/*visibility: hidden;*/ /*Устаревший метод скрытия модального блока*/
/*opacity: 0;*/ /*Устаревший метод скрытия модального блока*/
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#p2f2_modal.open {
/*visibility: visible;*/ /*Устаревший метод открытия модального блока*/
/*opacity: 1;*/ /*Устаревший метод открытия модального блока*/
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#p2f2_osnovnoi_block {
/* border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#p2f2_modal_block {
/* border: 1px solid lime;*/
position: relative;
padding: 14px;
background-color: rgba(0, 0, 0, 0);
margin: 20px;
text-align: center;
color: white;
font-size: 1.1rem;
display: flex;
flex-wrap: wrap; /*Разрешение переноса строки внтури flex контейнера*/
width: 891px;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#p2f2_krestik {
position: absolute;
text-align: center;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 7px;
padding-right: 7px;
background-color: black;
color: white;
border: 2px solid white;
border-radius: 0px; /*Квадрат*/
/*border-radius: 5px;*/ /*Скругленный квадрат*/
/*border-radius: 20px;*/ /*Круг*/
top: 0;
right: 45px;
cursor: pointer;
transition: transform 0.2s;
}
#p2f2_krestik:hover {
color: #F22318;
border: 2px solid #F22318;
transform: scale(1.1);
transition: transform 0.2s;
transition: color 0.8s;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 8px;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#p2f2_levo {
/* border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#p2f2_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#p2f2_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#p2f2_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#p2f2_nadpis {
/* border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#p2f2_pravo {
/* border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#p2f2_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- Пролет 2 - Фото 2.2 - "BepiColombo фото/2 flyby/2.2 First_sighting_of_Caloris - rus annotated.png" - p2f2_2 ----- */
/* Серая область ---------------------------------------------------------------- */
#p2f2_2_modal {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
align-items: center;
justify-content: center;
/*visibility: hidden;*/ /*Устаревший метод скрытия модального блока*/
/*opacity: 0;*/ /*Устаревший метод скрытия модального блока*/
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#p2f2_2_modal.open {
/*visibility: visible;*/ /*Устаревший метод открытия модального блока*/
/*opacity: 1;*/ /*Устаревший метод открытия модального блока*/
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#p2f2_2_osnovnoi_block {
/* border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#p2f2_2_modal_block {
/* border: 1px solid lime;*/
position: relative;
padding: 14px;
background-color: rgba(0, 0, 0, 0);
margin: 20px;
text-align: center;
color: white;
font-size: 1.1rem;
display: flex;
flex-wrap: wrap; /*Разрешение переноса строки внтури flex контейнера*/
width: 891px;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#p2f2_2_krestik {
position: absolute;
text-align: center;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 7px;
padding-right: 7px;
background-color: black;
color: white;
border: 2px solid white;
border-radius: 0px; /*Квадрат*/
/*border-radius: 5px;*/ /*Скругленный квадрат*/
/*border-radius: 20px;*/ /*Круг*/
top: 0;
right: 45px;
cursor: pointer;
transition: transform 0.2s;
}
#p2f2_2_krestik:hover {
color: #F22318;
border: 2px solid #F22318;
transform: scale(1.1);
transition: transform 0.2s;
transition: color 0.8s;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 8px;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#p2f2_2_levo {
/* border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#p2f2_2_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#p2f2_2_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#p2f2_2_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#p2f2_2_nadpis {
/* border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#p2f2_2_pravo {
/* border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#p2f2_2_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- Пролет 2 - Фото 3 - BepiColombo фото/2 flyby/3. The_search_for_volcanoes.png - p2f3 ----- */
/* Серая область ---------------------------------------------------------------- */
#p2f3_modal {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
align-items: center;
justify-content: center;
/*visibility: hidden;*/ /*Устаревший метод скрытия модального блока*/
/*opacity: 0;*/ /*Устаревший метод скрытия модального блока*/
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#p2f3_modal.open {
/*visibility: visible;*/ /*Устаревший метод открытия модального блока*/
/*opacity: 1;*/ /*Устаревший метод открытия модального блока*/
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#p2f3_osnovnoi_block {
/* border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#p2f3_modal_block {
/* border: 1px solid lime;*/
position: relative;
padding: 14px;
background-color: rgba(0, 0, 0, 0);
margin: 20px;
text-align: center;
color: white;
font-size: 1.1rem;
display: flex;
flex-wrap: wrap; /*Разрешение переноса строки внтури flex контейнера*/
width: 891px;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#p2f3_krestik {
position: absolute;
text-align: center;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 7px;
padding-right: 7px;
background-color: black;
color: white;
border: 2px solid white;
border-radius: 0px; /*Квадрат*/
/*border-radius: 5px;*/ /*Скругленный квадрат*/
/*border-radius: 20px;*/ /*Круг*/
top: 0;
right: 45px;
cursor: pointer;
transition: transform 0.2s;
}
#p2f3_krestik:hover {
color: #F22318;
border: 2px solid #F22318;
transform: scale(1.1);
transition: transform 0.2s;
transition: color 0.8s;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 8px;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#p2f3_levo {
/* border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#p2f3_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#p2f3_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#p2f3_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#p2f3_nadpis {
/* border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#p2f3_pravo {
/* border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#p2f3_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- Пролет 1 - Фото 3.2 - BepiColombo фото/2 flyby/3.2 The_search_for_volcanoes - rus annotated.png - p2f3_2 ----- */
/* Серая область ---------------------------------------------------------------- */
#p2f3_2_modal {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
align-items: center;
justify-content: center;
/*visibility: hidden;*/ /*Устаревший метод скрытия модального блока*/
/*opacity: 0;*/ /*Устаревший метод скрытия модального блока*/
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#p2f3_2_modal.open {
/*visibility: visible;*/ /*Устаревший метод открытия модального блока*/
/*opacity: 1;*/ /*Устаревший метод открытия модального блока*/
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#p2f3_2_osnovnoi_block {
/* border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#p2f3_2_modal_block {
/* border: 1px solid lime;*/
position: relative;
padding: 14px;
background-color: rgba(0, 0, 0, 0);
margin: 20px;
text-align: center;
color: white;
font-size: 1.1rem;
display: flex;
flex-wrap: wrap; /*Разрешение переноса строки внтури flex контейнера*/
width: 891px;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#p2f3_2_krestik {
position: absolute;
text-align: center;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 7px;
padding-right: 7px;
background-color: black;
color: white;
border: 2px solid white;
border-radius: 0px; /*Квадрат*/
/*border-radius: 5px;*/ /*Скругленный квадрат*/
/*border-radius: 20px;*/ /*Круг*/
top: 0;
right: 45px;
cursor: pointer;
transition: transform 0.2s;
}
#p2f3_2_krestik:hover {
color: #F22318;
border: 2px solid #F22318;
transform: scale(1.1);
transition: transform 0.2s;
transition: color 0.8s;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 8px;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#p2f3_2_levo {
/* border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#p2f3_2_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#p2f3_2_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#p2f3_2_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#p2f3_2_nadpis {
/* border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#p2f3_2_pravo {
/* border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#p2f3_2_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- Пролет 2 - Фото 4 - BepiColombo фото/2 flyby/4. BepiColombo_surveys_Mercury_s_rich_geology.png - p2f4 ----- */
/* Серая область ---------------------------------------------------------------- */
#p2f4_modal {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
align-items: center;
justify-content: center;
/*visibility: hidden;*/ /*Устаревший метод скрытия модального блока*/
/*opacity: 0;*/ /*Устаревший метод скрытия модального блока*/
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#p2f4_modal.open {
/*visibility: visible;*/ /*Устаревший метод открытия модального блока*/
/*opacity: 1;*/ /*Устаревший метод открытия модального блока*/
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#p2f4_osnovnoi_block {
/* border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#p2f4_modal_block {
/* border: 1px solid lime;*/
position: relative;
padding: 14px;
background-color: rgba(0, 0, 0, 0);
margin: 20px;
text-align: center;
color: white;
font-size: 1.1rem;
display: flex;
flex-wrap: wrap; /*Разрешение переноса строки внтури flex контейнера*/
width: 891px;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#p2f4_krestik {
position: absolute;
text-align: center;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 7px;
padding-right: 7px;
background-color: black;
color: white;
border: 2px solid white;
border-radius: 0px; /*Квадрат*/
/*border-radius: 5px;*/ /*Скругленный квадрат*/
/*border-radius: 20px;*/ /*Круг*/
top: 0;
right: 45px;
cursor: pointer;
transition: transform 0.2s;
}
#p2f4_krestik:hover {
color: #F22318;
border: 2px solid #F22318;
transform: scale(1.1);
transition: transform 0.2s;
transition: color 0.8s;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 8px;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#p2f4_levo {
/* border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#p2f4_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#p2f4_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#p2f4_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#p2f4_nadpis {
/* border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#p2f4_pravo {
/* border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#p2f4_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- Пролет 2 - Фото 4.2 - BepiColombo фото/2 flyby/4.2 BepiColombo_surveys_Mercury_s_rich_geology - rus annotated.png - p2f4_2 ----- */
/* Серая область ---------------------------------------------------------------- */
#p2f4_2_modal {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
align-items: center;
justify-content: center;
/*visibility: hidden;*/ /*Устаревший метод скрытия модального блока*/
/*opacity: 0;*/ /*Устаревший метод скрытия модального блока*/
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#p2f4_2_modal.open {
/*visibility: visible;*/ /*Устаревший метод открытия модального блока*/
/*opacity: 1;*/ /*Устаревший метод открытия модального блока*/
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#p2f4_2_osnovnoi_block {
/* border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#p2f4_2_modal_block {
/* border: 1px solid lime;*/
position: relative;
padding: 14px;
background-color: rgba(0, 0, 0, 0);
margin: 20px;
text-align: center;
color: white;
font-size: 1.1rem;
display: flex;
flex-wrap: wrap; /*Разрешение переноса строки внтури flex контейнера*/
width: 891px;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#p2f4_2_krestik {
position: absolute;
text-align: center;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 7px;
padding-right: 7px;
background-color: black;
color: white;
border: 2px solid white;
border-radius: 0px; /*Квадрат*/
/*border-radius: 5px;*/ /*Скругленный квадрат*/
/*border-radius: 20px;*/ /*Круг*/
top: 0;
right: 45px;
cursor: pointer;
transition: transform 0.2s;
}
#p2f4_2_krestik:hover {
color: #F22318;
border: 2px solid #F22318;
transform: scale(1.1);
transition: transform 0.2s;
transition: color 0.8s;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 8px;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#p2f4_2_levo {
/* border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#p2f4_2_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#p2f4_2_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#p2f4_2_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#p2f4_2_nadpis {
/* border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#p2f4_2_pravo {
/* border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#p2f4_2_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- Пролет 3 - Фото 1 - BepiColombo фото/3 flyby/1. BepiColombo_s_Mercury_flyby_in_3D.png - p3f1 ----- */
/* Серая область ---------------------------------------------------------------- */
#p3f1_modal {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
align-items: center;
justify-content: center;
/*visibility: hidden;*/ /*Устаревший метод скрытия модального блока*/
/*opacity: 0;*/ /*Устаревший метод скрытия модального блока*/
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#p3f1_modal.open {
/*visibility: visible;*/ /*Устаревший метод открытия модального блока*/
/*opacity: 1;*/ /*Устаревший метод открытия модального блока*/
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#p3f1_osnovnoi_block {
/* border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#p3f1_modal_block {
/* border: 1px solid lime;*/
position: relative;
padding: 14px;
background-color: rgba(0, 0, 0, 0);
margin: 20px;
text-align: center;
color: white;
font-size: 1.1rem;
display: flex;
flex-wrap: wrap; /*Разрешение переноса строки внтури flex контейнера*/
width: 891px;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#p3f1_krestik {
position: absolute;
text-align: center;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 7px;
padding-right: 7px;
background-color: black;
color: white;
border: 2px solid white;
border-radius: 0px; /*Квадрат*/
/*border-radius: 5px;*/ /*Скругленный квадрат*/
/*border-radius: 20px;*/ /*Круг*/
top: 0;
right: 45px;
cursor: pointer;
transition: transform 0.2s;
}
#p3f1_krestik:hover {
color: #F22318;
border: 2px solid #F22318;
transform: scale(1.1);
transition: transform 0.2s;
transition: color 0.8s;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 8px;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#p3f1_levo {
/* border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#p3f1_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#p3f1_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#p3f1_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#p3f1_nadpis {
/* border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#p3f1_pravo {
/* border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#p3f1_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- Пролет 3 - Фото 2 - BepiColombo фото/3 flyby/2. Mercury_ahead - BepiColombo-19june2023.png - p3f2 ----- */
/* Серая область ---------------------------------------------------------------- */
#p3f2_modal {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
align-items: center;
justify-content: center;
/*visibility: hidden;*/ /*Устаревший метод скрытия модального блока*/
/*opacity: 0;*/ /*Устаревший метод скрытия модального блока*/
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#p3f2_modal.open {
/*visibility: visible;*/ /*Устаревший метод открытия модального блока*/
/*opacity: 1;*/ /*Устаревший метод открытия модального блока*/
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#p3f2_osnovnoi_block {
/* border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#p3f2_modal_block {
/* border: 1px solid lime;*/
position: relative;
padding: 14px;
background-color: rgba(0, 0, 0, 0);
margin: 20px;
text-align: center;
color: white;
font-size: 1.1rem;
display: flex;
flex-wrap: wrap; /*Разрешение переноса строки внтури flex контейнера*/
width: 891px;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#p3f2_krestik {
position: absolute;
text-align: center;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 7px;
padding-right: 7px;
background-color: black;
color: white;
border: 2px solid white;
border-radius: 0px; /*Квадрат*/
/*border-radius: 5px;*/ /*Скругленный квадрат*/
/*border-radius: 20px;*/ /*Круг*/
top: 0;
right: 45px;
cursor: pointer;
transition: transform 0.2s;
}
#p3f2_krestik:hover {
color: #F22318;
border: 2px solid #F22318;
transform: scale(1.1);
transition: transform 0.2s;
transition: color 0.8s;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 8px;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#p3f2_levo {
/* border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#p3f2_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#p3f2_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#p3f2_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#p3f2_nadpis {
/* border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#p3f2_pravo {
/* border: 1px solid blue;*/
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(169, 169, 169, 0.1);
cursor: pointer;
user-select: none; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#p3f2_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* БОКОВАЯ ПАНЕЛЬ и все что с ней связано */
.break {
/* border: 1px solid green;*/
width: 15vw;
height: 20px;
}
/* Сама боковая панель ************************* */
#bokovaya_panel {
text-align: center;
/* border: 1px solid red;*/
border-left: 2px solid white;
width: 15vw;
height: 100vh;
position: fixed;
right: 0;
top: 0;
display: none; /* Скрывает боковую панель */
justify-content: center;
align-items: center;
flex-wrap: wrap;
z-index: 2;
overflow-y: scroll;
background-color: rgba(0, 0, 0, 0.8);
}
#bokovaya_panel.open {
display: flex;
}
/* ******************************************** */
/* Боковые фото (Прозрачные бордеры и белая рамка) ------------------------- */
#Mercury_jpg_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#Mercury_jpg_bokovoe_photo.vybrano {
border: 2px solid white; /* Делает белую рамку когда боковое фото выбрали (нажали на него) */
}
#Mercury_sostav_jpg_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#Mercury_sostav_jpg_bokovoe_photo.vybrano {
border: 2px solid white;
}
#Caloris_photomosaic_jpg_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#Caloris_photomosaic_jpg_bokovoe_photo.vybrano {
border: 2px solid white;
}
#Caloris_2_photomosaic_stereographic_jpg_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#Caloris_2_photomosaic_stereographic_jpg_bokovoe_photo.vybrano {
border: 2px solid white;
}
#Mariner-10_jpg_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#Mariner-10_jpg_bokovoe_photo.vybrano {
border: 2px solid white;
}
#Mariner-10-ustroistvo_jpg_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#Mariner-10-ustroistvo_jpg_bokovoe_photo.vybrano {
border: 2px solid white;
}
#Messenger_jpg_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#Messenger_jpg_bokovoe_photo.vybrano {
border: 2px solid white;
}
#Messenger-u_jpg_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#Messenger-u_jpg_bokovoe_photo.vybrano {
border: 2px solid grey;
}
#BepiColombo_jpg_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#BepiColombo_jpg_bokovoe_photo.vybrano {
border: 2px solid white;
}
#BepiColombo_Orbiters_jpg_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#BepiColombo_Orbiters_jpg_bokovoe_photo.vybrano {
border: 2px solid white;
}
/* Галерея Меркурия - Маринер-10 (12 фото) */
#j1jpg_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#j1jpg_bokovoe_photo.vybrano {
border: 2px solid white; /* Делает белую рамку когда боковое фото выбрали (нажали на него) */
}
/* !!!!!!!!!!!!!!!!!!!!!!!!!!!Начинай делать отсюда, вставляй из html ид боковых фото */
#j2jpg_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#j2jpg_bokovoe_photo.vybrano {
border: 2px solid white; /* Делает белую рамку когда боковое фото выбрали (нажали на него) */
}
#j3_kosoi_vid_mercury_jpg_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#j3_kosoi_vid_mercury_jpg_bokovoe_photo.vybrano {
border: 2px solid white; /* Делает белую рамку когда боковое фото выбрали (нажали на него) */
}
#j4_Zola_crater_jpg_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#j4_Zola_crater_jpg_bokovoe_photo.vybrano {
border: 2px solid white; /* Делает белую рамку когда боковое фото выбрали (нажали на него) */
}
#j5_Zola_crater_kp_jpg_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#j5_Zola_crater_kp_jpg_bokovoe_photo.vybrano {
border: 2px solid white; /* Делает белую рамку когда боковое фото выбрали (нажали на него) */
}
#j6jpg_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#j6jpg_bokovoe_photo.vybrano {
border: 2px solid white; /* Делает белую рамку когда боковое фото выбрали (нажали на него) */
}
#j7_Brahms_crater_jpg_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#j7_Brahms_crater_jpg_bokovoe_photo.vybrano {
border: 2px solid white; /* Делает белую рамку когда боковое фото выбрали (нажали на него) */
}
#j8jpg_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#j8jpg_bokovoe_photo.vybrano {
border: 2px solid white; /* Делает белую рамку когда боковое фото выбрали (нажали на него) */
}
#j9jpg_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#j9jpg_bokovoe_photo.vybrano {
border: 2px solid white; /* Делает белую рамку когда боковое фото выбрали (нажали на него) */
}
#j10_Amru-Al-Qays_jpg_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#j10_Amru-Al-Qays_jpg_bokovoe_photo.vybrano {
border: 2px solid white; /* Делает белую рамку когда боковое фото выбрали (нажали на него) */
}
#j11jpg_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#j11jpg_bokovoe_photo.vybrano {
border: 2px solid white; /* Делает белую рамку когда боковое фото выбрали (нажали на него) */
}
#j12jpg_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#j12jpg_bokovoe_photo.vybrano {
border: 2px solid white; /* Делает белую рамку когда боковое фото выбрали (нажали на него) */
}
/* Галерея Меркурия - Мессенджер (25 фото) */
#mes-1png_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#mes-1png_bokovoe_photo.vybrano {
border: 2px solid white; /* Делает белую рамку когда боковое фото выбрали (нажали на него) */
}
#mes-2png_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#mes-2png_bokovoe_photo.vybrano {
border: 2px solid white; /* Делает белую рамку когда боковое фото выбрали (нажали на него) */
}
#mes-3png_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#mes-3png_bokovoe_photo.vybrano {
border: 2px solid white; /* Делает белую рамку когда боковое фото выбрали (нажали на него) */
}
#mes-4png_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#mes-4png_bokovoe_photo.vybrano {
border: 2px solid white; /* Делает белую рамку когда боковое фото выбрали (нажали на него) */
}
#mes-5png_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#mes-5png_bokovoe_photo.vybrano {
border: 2px solid white; /* Делает белую рамку когда боковое фото выбрали (нажали на него) */
}
#mes-6png_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#mes-6png_bokovoe_photo.vybrano {
border: 2px solid white; /* Делает белую рамку когда боковое фото выбрали (нажали на него) */
}
#mes-7png_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#mes-7png_bokovoe_photo.vybrano {
border: 2px solid white; /* Делает белую рамку когда боковое фото выбрали (нажали на него) */
}
#mes-8png_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#mes-8png_bokovoe_photo.vybrano {
border: 2px solid white; /* Делает белую рамку когда боковое фото выбрали (нажали на него) */
}
#mes-9png_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#mes-9png_bokovoe_photo.vybrano {
border: 2px solid white; /* Делает белую рамку когда боковое фото выбрали (нажали на него) */
}
#mes-10jpg_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#mes-10jpg_bokovoe_photo.vybrano {
border: 2px solid white; /* Делает белую рамку когда боковое фото выбрали (нажали на него) */
}
#mes-11png_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#mes-11png_bokovoe_photo.vybrano {
border: 2px solid white; /* Делает белую рамку когда боковое фото выбрали (нажали на него) */
}
#mes-12png_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#mes-12png_bokovoe_photo.vybrano {
border: 2px solid white; /* Делает белую рамку когда боковое фото выбрали (нажали на него) */
}
#mes-13png_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#mes-13png_bokovoe_photo.vybrano {
border: 2px solid white; /* Делает белую рамку когда боковое фото выбрали (нажали на него) */
}
#mes-14jpg_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#mes-14jpg_bokovoe_photo.vybrano {
border: 2px solid white; /* Делает белую рамку когда боковое фото выбрали (нажали на него) */
}
#mes-15png_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#mes-15png_bokovoe_photo.vybrano {
border: 2px solid white; /* Делает белую рамку когда боковое фото выбрали (нажали на него) */
}
#mes-16jpg_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#mes-16jpg_bokovoe_photo.vybrano {
border: 2px solid white; /* Делает белую рамку когда боковое фото выбрали (нажали на него) */
}
#mes-17png_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#mes-17png_bokovoe_photo.vybrano {
border: 2px solid white; /* Делает белую рамку когда боковое фото выбрали (нажали на него) */
}
#mes-18png_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#mes-18png_bokovoe_photo.vybrano {
border: 2px solid white; /* Делает белую рамку когда боковое фото выбрали (нажали на него) */
}
#mes-19jpg_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#mes-19jpg_bokovoe_photo.vybrano {
border: 2px solid white; /* Делает белую рамку когда боковое фото выбрали (нажали на него) */
}
#mes-20jpg_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#mes-20jpg_bokovoe_photo.vybrano {
border: 2px solid white; /* Делает белую рамку когда боковое фото выбрали (нажали на него) */
}
#mes-21png_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#mes-21png_bokovoe_photo.vybrano {
border: 2px solid white; /* Делает белую рамку когда боковое фото выбрали (нажали на него) */
}
#mes-22jpg_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#mes-22jpg_bokovoe_photo.vybrano {
border: 2px solid white; /* Делает белую рамку когда боковое фото выбрали (нажали на него) */
}
#mes-23jpg_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#mes-23jpg_bokovoe_photo.vybrano {
border: 2px solid white; /* Делает белую рамку когда боковое фото выбрали (нажали на него) */
}
#mes-24png_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#mes-24png_bokovoe_photo.vybrano {
border: 2px solid white; /* Делает белую рамку когда боковое фото выбрали (нажали на него) */
}
#mes-25png_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#mes-25png_bokovoe_photo.vybrano {
border: 2px solid white; /* Делает белую рамку когда боковое фото выбрали (нажали на него) */
}
/* Галерея Меркурия - БепиКоломбо (3 пролета - всего 14 фото) */
/* Пролет 1 (4 фото) */
#p1f1_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#p1f1_bokovoe_photo.vybrano {
border: 2px solid white; /* Делает белую рамку когда боковое фото выбрали (нажали на него) */
}
#p1f2_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#p1f2_bokovoe_photo.vybrano {
border: 2px solid white; /* Делает белую рамку когда боковое фото выбрали (нажали на него) */
}
#p1f3_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#p1f3_bokovoe_photo.vybrano {
border: 2px solid white; /* Делает белую рамку когда боковое фото выбрали (нажали на него) */
}
#p1f4_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#p1f4_bokovoe_photo.vybrano {
border: 2px solid white; /* Делает белую рамку когда боковое фото выбрали (нажали на него) */
}
/* Пролет 2 (8 фото) */
#p2f1_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#p2f1_bokovoe_photo.vybrano {
border: 2px solid white; /* Делает белую рамку когда боковое фото выбрали (нажали на него) */
}
#p2f1_2_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#p2f1_2_bokovoe_photo.vybrano {
border: 2px solid white; /* Делает белую рамку когда боковое фото выбрали (нажали на него) */
}
#p2f2_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#p2f2_bokovoe_photo.vybrano {
border: 2px solid white; /* Делает белую рамку когда боковое фото выбрали (нажали на него) */
}
#p2f2_2_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#p2f2_2_bokovoe_photo.vybrano {
border: 2px solid white; /* Делает белую рамку когда боковое фото выбрали (нажали на него) */
}
#p2f3_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#p2f3_bokovoe_photo.vybrano {
border: 2px solid white; /* Делает белую рамку когда боковое фото выбрали (нажали на него) */
}
#p2f3_2_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#p2f3_2_bokovoe_photo.vybrano {
border: 2px solid white; /* Делает белую рамку когда боковое фото выбрали (нажали на него) */
}
#p2f4_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#p2f4_bokovoe_photo.vybrano {
border: 2px solid white; /* Делает белую рамку когда боковое фото выбрали (нажали на него) */
}
#p2f4_2_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#p2f4_2_bokovoe_photo.vybrano {
border: 2px solid white; /* Делает белую рамку когда боковое фото выбрали (нажали на него) */
}
/*Полет 3 (2 фото)*/
#p3f1_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#p3f1_bokovoe_photo.vybrano {
border: 2px solid white; /* Делает белую рамку когда боковое фото выбрали (нажали на него) */
}
#p3f2_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#p3f2_bokovoe_photo.vybrano {
border: 2px solid white; /* Делает белую рамку когда боковое фото выбрали (нажали на него) */
}
/* ---------------------------------------- */
/* Боковые фото - наводка */
/* №1 */
#Mercury_jpg_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
/* №2 */
#Mercury_sostav_jpg_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
/* №3 */
#Caloris_photomosaic_jpg_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
/* №4 */
#Caloris_2_photomosaic_stereographic_jpg_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
/* №5 */
#Mariner-10_jpg_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
/* №6 */
#Mariner-10-ustroistvo_jpg_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
/* №7 */
#Messenger_jpg_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
/* №8 */
#Messenger-u_jpg_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
/* №9 */
#BepiColombo_jpg_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
/* №10 */
#BepiColombo_Orbiters_jpg_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
/* Наводка - Галерея Меркурия - Маринер-10 */
#j1jpg_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
#j2jpg_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
#j3_kosoi_vid_mercury_jpg_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
#j4_Zola_crater_jpg_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
#j5_Zola_crater_kp_jpg_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
#j6jpg_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
#j7_Brahms_crater_jpg_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
#j8jpg_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
#j9jpg_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
#j10_Amru-Al-Qays_jpg_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
#j11jpg_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
#j12jpg_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
/* Наводка - Галерея Меркурия - Мессенджер (25 фото) */
#mes-1png_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
#mes-2png_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
#mes-3png_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
#mes-4png_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
#mes-5png_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
#mes-6png_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
#mes-7png_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
#mes-8png_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
#mes-9png_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
#mes-10jpg_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
#mes-11png_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
#mes-12png_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
#mes-13png_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
#mes-14jpg_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
#mes-15png_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
#mes-16jpg_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
#mes-17png_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
#mes-18png_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
#mes-19jpg_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
#mes-20jpg_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
#mes-21png_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
#mes-22jpg_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
#mes-23jpg_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
#mes-24png_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
#mes-25png_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
/* Наводка - Галерея Меркурия - БепиКоломбо (3 пролета - 14 фото всего) */
#p1f1_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
#p1f2_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
#p1f3_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
#p1f4_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
#p2f1_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
#p2f1_2_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
#p2f2_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
#p2f2_2_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
#p2f3_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
#p2f3_2_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
#p2f4_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
#p2f4_2_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
#p3f1_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
#p3f2_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
/* ---------------------------------------- */