body.overflow_off {
overflow-y: hidden;
}
/* НАДПИСЬ - Масса Венеры - massa_venus - модальное окно ----------------------------------------- */
#massa_venus_modal {
/*border: 3px solid green;*/
width: 99vw;
height: 100vh;
position: fixed;
top: 0;
left:0;
display: none;
justify-content: center;
align-items: center;
}
#massa_venus_modal.open {
display: flex;
}
#massa_venus_obshii_block {
/* border: 1px solid blue;*/
position: relative;
}
#massa_venus_krestik {
position: absolute;
text-align: center;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 7px;
padding-right: 7px;
background-color: white;
color: black;
border: 2px solid black;
border-radius: 0px; /*Квадрат*/
/*border-radius: 5px;*/ /*Скругленный квадрат*/
/*border-radius: 20px;*/ /*Круг*/
top: -15px;
right: -15px;
cursor: pointer;
transition: transform 0.2s;
}
#massa_venus_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;
}
#massa_venus_polotno {
background-color: white;
color: black;
width: 850px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
border: 2px solid black;
}
#massa_venus_nadpis {
/* border: 1px solid lime;*/
}
/* ------------------------------------------------------------------------- */
/* НАДПИСЬ Расстояние Венеры от Солнца - venus_ae_sun - модальное окно ----------------------------------------- */
#venus_ae_sun_modal {
/*border: 3px solid green;*/
width: 99vw;
height: 100vh;
position: fixed;
top: 0;
left:0;
display: none; /*Скрыть модальное окно*/
justify-content: center;
align-items: center;
}
#venus_ae_sun_modal.open {
display: flex;
}
#venus_ae_sun_obshii_block {
/* border: 1px solid blue;*/
position: relative;
}
#venus_ae_sun_krestik {
position: absolute;
text-align: center;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 7px;
padding-right: 7px;
background-color: white;
color: black;
border: 2px solid black;
border-radius: 0px; /*Квадрат*/
/*border-radius: 5px;*/ /*Скругленный квадрат*/
/*border-radius: 20px;*/ /*Круг*/
top: -15px;
right: -15px;
cursor: pointer;
transition: transform 0.2s;
}
#venus_ae_sun_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;
}
#venus_ae_sun_polotno {
background-color: white;
color: black;
width: 500px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
border: 2px solid black;
}
/* ------------------------------------------------------------------------- */
/* ----- МОДАЛЬНОЕ ОКНО - Venus.png ----- */
/* Серая область ---------------------------------------------------------------- */
#Venus_png_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;
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#Venus_png_modal.open {
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#Venus_png_osnovnoi_block {
/*border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#Venus_png_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;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#Venus_png_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;
}
#Venus_png_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;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#Venus_png_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Venus_png_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#Venus_png_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#Venus_png_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#Venus_png_nadpis {
/*border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#Venus_png_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Venus_png_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- МОДАЛЬНОЕ ОКНО - Венера состав.jpg ----- */
/* Серая область ---------------------------------------------------------------- */
#Venera_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;
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#Venera_sostav_jpg_modal.open {
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#Venera_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;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#Venera_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;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#Venera_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;
}
#Venera_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;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#Venera_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Venera_sostav_jpg_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#Venera_sostav_jpg_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#Venera_sostav_jpg_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#Venera_sostav_jpg_nadpis {
/*border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#Venera_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Venera_sostav_jpg_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- МОДАЛЬНОЕ ОКНО - Венера - парниковый эффект.jpg ----- */
/* Серая область ---------------------------------------------------------------- */
#Venera_par_effect_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;
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#Venera_par_effect_jpg_modal.open {
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#Venera_par_effect_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;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#Venera_par_effect_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;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#Venera_par_effect_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;
}
#Venera_par_effect_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;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#Venera_par_effect_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Venera_par_effect_jpg_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#Venera_par_effect_jpg_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#Venera_par_effect_jpg_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#Venera_par_effect_jpg_nadpis {
/*border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#Venera_par_effect_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Venera_par_effect_jpg_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* БЛОК МОДАЛЬНЫХ ОКОН - 4 шт - Галерея — Венера-7 ****************************** */
/* ----- МОДАЛЬНОЕ ОКНО 1 - Photo/Венера-7/1. Венера-7.jpg ----- */
/* Серая область ---------------------------------------------------------------- */
#Venera_7_p1_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;
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#Venera_7_p1_modal.open {
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#Venera_7_p1_osnovnoi_block {
/*border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#Venera_7_p1_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;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#Venera_7_p1_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;
}
#Venera_7_p1_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;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#Venera_7_p1_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Venera_7_p1_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#Venera_7_p1_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#Venera_7_p1_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#Venera_7_p1_nadpis {
/*border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#Venera_7_p1_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Venera_7_p1_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- МОДАЛЬНОЕ ОКНО 2 - Photo/Венера-7/2. Венера-7.jpg ----- */
/* Серая область ---------------------------------------------------------------- */
#Venera_7_p2_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;
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#Venera_7_p2_modal.open {
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#Venera_7_p2_osnovnoi_block {
/* border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#Venera_7_p2_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;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#Venera_7_p2_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;
}
#Venera_7_p2_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;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#Venera_7_p2_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Venera_7_p2_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#Venera_7_p2_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#Venera_7_p2_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#Venera_7_p2_nadpis {
/* border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#Venera_7_p2_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Venera_7_p2_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- МОДАЛЬНОЕ ОКНО 3 - Photo/Венера-7/3. Венера-7 устройство.jpg ----- */
/* Серая область ---------------------------------------------------------------- */
#Venera_7_p3_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;
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#Venera_7_p3_modal.open {
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#Venera_7_p3_osnovnoi_block {
/* border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#Venera_7_p3_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;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#Venera_7_p3_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;
}
#Venera_7_p3_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;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#Venera_7_p3_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Venera_7_p3_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#Venera_7_p3_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#Venera_7_p3_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#Venera_7_p3_nadpis {
/* border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#Venera_7_p3_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Venera_7_p3_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- МОДАЛЬНОЕ ОКНО 4 - Photo/Венера-7/4. Венера-7 устройство спускаемого аппарата.jpg ----- */
/* Серая область ---------------------------------------------------------------- */
#Venera_7_p4_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;
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#Venera_7_p4_modal.open {
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#Venera_7_p4_osnovnoi_block {
/* border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#Venera_7_p4_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;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#Venera_7_p4_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;
}
#Venera_7_p4_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;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#Venera_7_p4_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Venera_7_p4_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#Venera_7_p4_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#Venera_7_p4_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#Venera_7_p4_nadpis {
/* border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#Venera_7_p4_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Venera_7_p4_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* КОНЕЦ БЛОКА МОДАЛЬНЫХ ОКОН - 4 шт - Галерея — Венера-7 *********************** */
/* БЛОК МОДАЛЬНЫХ ОКОН - 10 шт - Галерея — Венера-9 и Венера-10 ****************************** */
/* ----- МОДАЛЬНОЕ ОКНО 1 - Photo/Венера-9 и Венера-10/1. Венера-9 и Венера-10.jpg ----- */
/* Серая область ---------------------------------------------------------------- */
#Venera_9_10_p1_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;
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#Venera_9_10_p1_modal.open {
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#Venera_9_10_p1_osnovnoi_block {
/*border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#Venera_9_10_p1_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;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#Venera_9_10_p1_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;
}
#Venera_9_10_p1_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;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#Venera_9_10_p1_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Venera_9_10_p1_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#Venera_9_10_p1_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#Venera_9_10_p1_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#Venera_9_10_p1_nadpis {
/* border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#Venera_9_10_p1_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Venera_9_10_p1_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- МОДАЛЬНОЕ ОКНО 2 - Photo/Венера-9 и Венера-10/2. Венера-9 и Венера-10.jpg ----- */
/* Серая область ---------------------------------------------------------------- */
#Venera_9_10_p2_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;
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#Venera_9_10_p2_modal.open {
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#Venera_9_10_p2_osnovnoi_block {
/* border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#Venera_9_10_p2_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;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#Venera_9_10_p2_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;
}
#Venera_9_10_p2_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;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#Venera_9_10_p2_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Venera_9_10_p2_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#Venera_9_10_p2_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#Venera_9_10_p2_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#Venera_9_10_p2_nadpis {
/* border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#Venera_9_10_p2_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Venera_9_10_p2_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- МОДАЛЬНОЕ ОКНО 3 - Photo/Венера-9 и Венера-10/3. Венера-9 и Венера-10.jpg ----- */
/* Серая область ---------------------------------------------------------------- */
#Venera_9_10_p3_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;
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#Venera_9_10_p3_modal.open {
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#Venera_9_10_p3_osnovnoi_block {
/* border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#Venera_9_10_p3_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;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#Venera_9_10_p3_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;
}
#Venera_9_10_p3_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;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#Venera_9_10_p3_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Venera_9_10_p3_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#Venera_9_10_p3_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#Venera_9_10_p3_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#Venera_9_10_p3_nadpis {
/* border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#Venera_9_10_p3_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Venera_9_10_p3_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- МОДАЛЬНОЕ ОКНО 4 - Photo/Венера-9 и Венера-10/4. Венера-9 и Венера-10.jpg ----- */
/* Серая область ---------------------------------------------------------------- */
#Venera_9_10_p4_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;
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#Venera_9_10_p4_modal.open {
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#Venera_9_10_p4_osnovnoi_block {
/* border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#Venera_9_10_p4_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;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#Venera_9_10_p4_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;
}
#Venera_9_10_p4_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;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#Venera_9_10_p4_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Venera_9_10_p4_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#Venera_9_10_p4_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#Venera_9_10_p4_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#Venera_9_10_p4_nadpis {
/* border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#Venera_9_10_p4_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Venera_9_10_p4_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- МОДАЛЬНОЕ ОКНО 5 - Photo/Венера-9 и Венера-10/5. Венера-9 и Венера-10 - внутреннее строение.jpg ----- */
/* Серая область ---------------------------------------------------------------- */
#Venera_9_10_p5_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;
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#Venera_9_10_p5_modal.open {
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#Venera_9_10_p5_osnovnoi_block {
/* border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#Venera_9_10_p5_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;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#Venera_9_10_p5_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;
}
#Venera_9_10_p5_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;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#Venera_9_10_p5_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Venera_9_10_p5_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#Venera_9_10_p5_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#Venera_9_10_p5_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#Venera_9_10_p5_nadpis {
/* border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#Venera_9_10_p5_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Venera_9_10_p5_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- МОДАЛЬНОЕ ОКНО 6 - Photo/Венера-9 и Венера-10/6. Венера-9 и Венера-10 - художественное представление.jpg ----- */
/* Серая область ---------------------------------------------------------------- */
#Venera_9_10_p6_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;
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#Venera_9_10_p6_modal.open {
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#Venera_9_10_p6_osnovnoi_block {
/* border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#Venera_9_10_p6_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;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#Venera_9_10_p6_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;
}
#Venera_9_10_p6_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;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#Venera_9_10_p6_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Venera_9_10_p6_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#Venera_9_10_p6_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#Venera_9_10_p6_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#Venera_9_10_p6_nadpis {
/* border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#Venera_9_10_p6_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Venera_9_10_p6_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- МОДАЛЬНОЕ ОКНО 7 - Photo/Венера-9 и Венера-10/7. Венера-9 - фото 1.jpg ----- */
/* Серая область ---------------------------------------------------------------- */
#Venera_9_10_p7_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; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#Venera_9_10_p7_modal.open {
/*visibility: visible;*/ /*Устаревший метод открытия модального блока*/
/*opacity: 1;*/ /*Устаревший метод открытия модального блока*/
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#Venera_9_10_p7_osnovnoi_block {
/* border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#Venera_9_10_p7_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;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#Venera_9_10_p7_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;
}
#Venera_9_10_p7_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;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#Venera_9_10_p7_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Venera_9_10_p7_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#Venera_9_10_p7_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
/* ------------------------------------------------------- */
/* Блок верхнего пространства ---------------------------- */
#Venera_9_10_p7_verhnee_prostranstvo {
/* border: 1px solid red;*/
width: 800px;
height: 149px; /*Расчетная высота блока*/
}
/* -------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#Venera_9_10_p7_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Блок нижнего пространства ---------------------------- */
#Venera_9_10_p7_nizhnee_prostranstvo {
/* border: 1px solid red;*/
width: 800px;
height: 149px; /*Расчетная высота блока*/
}
/* -------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#Venera_9_10_p7_nadpis {
/* border: 1px solid orange;*/
width: 805px;
/*padding-left: 40px;*/ /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
/*padding-right: 40px;*/
position: relative;
bottom: -5px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#Venera_9_10_p7_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Venera_9_10_p7_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- МОДАЛЬНОЕ ОКНО 8 - Photo/Венера-9 и Венера-10/8. Венера-9 - фото 2 обраб.jpg ----- */
/* Серая область ---------------------------------------------------------------- */
#Venera_9_10_p8_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; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#Venera_9_10_p8_modal.open {
/*visibility: visible;*/ /*Устаревший метод открытия модального блока*/
/*opacity: 1;*/ /*Устаревший метод открытия модального блока*/
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#Venera_9_10_p8_osnovnoi_block {
/* border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#Venera_9_10_p8_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;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#Venera_9_10_p8_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;
}
#Venera_9_10_p8_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;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#Venera_9_10_p8_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Venera_9_10_p8_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#Venera_9_10_p8_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
/* ------------------------------------------------------- */
/* Блок верхнего пространства ---------------------------- */
#Venera_9_10_p8_verhnee_prostranstvo {
/* border: 1px solid red;*/
width: 800px;
height: 157px; /*Расчетная высота блока*/
}
/* -------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#Venera_9_10_p8_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Блок нижнего пространства ---------------------------- */
#Venera_9_10_p8_nizhnee_prostranstvo {
/* border: 1px solid red;*/
width: 800px;
height: 157px; /*Расчетная высота блока*/
}
/* -------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#Venera_9_10_p8_nadpis {
/* border: 1px solid orange;*/
width: 805px;
/*padding-left: 40px;*/ /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
/*padding-right: 40px;*/
position: relative;
bottom: -5px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#Venera_9_10_p8_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Venera_9_10_p8_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- МОДАЛЬНОЕ ОКНО 9 - Photo/Венера-9 и Венера-10/9. Венера-10 - фото 1.jpg ----- */
/* Серая область ---------------------------------------------------------------- */
#Venera_9_10_p9_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; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#Venera_9_10_p9_modal.open {
/*visibility: visible;*/ /*Устаревший метод открытия модального блока*/
/*opacity: 1;*/ /*Устаревший метод открытия модального блока*/
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#Venera_9_10_p9_osnovnoi_block {
/* border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#Venera_9_10_p9_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;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#Venera_9_10_p9_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;
}
#Venera_9_10_p9_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;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#Venera_9_10_p9_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Venera_9_10_p9_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#Venera_9_10_p9_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
/* ------------------------------------------------------- */
/* Блок верхнего пространства ---------------------------- */
#Venera_9_10_p9_verhnee_prostranstvo {
/* border: 1px solid red;*/
width: 800px;
height: 146px; /*Расчетная высота блока*/
}
/* -------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#Venera_9_10_p9_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Блок нижнего пространства ---------------------------- */
#Venera_9_10_p9_nizhnee_prostranstvo {
/* border: 1px solid red;*/
width: 800px;
height: 146px; /*Расчетная высота блока*/
}
/* -------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#Venera_9_10_p9_nadpis {
/* border: 1px solid orange;*/
width: 805px;
/*padding-left: 40px;*/ /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
/*padding-right: 40px;*/
position: relative;
bottom: -5px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#Venera_9_10_p9_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Venera_9_10_p9_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- МОДАЛЬНОЕ ОКНО 10 - Photo/Венера-9 и Венера-10/10. Венера-10 - фото 2 обраб.jpg ----- */
/* Серая область ---------------------------------------------------------------- */
#Venera_9_10_p10_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; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#Venera_9_10_p10_modal.open {
/*visibility: visible;*/ /*Устаревший метод открытия модального блока*/
/*opacity: 1;*/ /*Устаревший метод открытия модального блока*/
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#Venera_9_10_p10_osnovnoi_block {
/* border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#Venera_9_10_p10_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;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#Venera_9_10_p10_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;
}
#Venera_9_10_p10_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;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#Venera_9_10_p10_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Venera_9_10_p10_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#Venera_9_10_p10_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
/* ------------------------------------------------------- */
/* Блок верхнего пространства ---------------------------- */
#Venera_9_10_p10_verhnee_prostranstvo {
/* border: 1px solid red;*/
width: 800px;
height: 161px; /*Расчетная высота блока*/
}
/* -------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#Venera_9_10_p10_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Блок нижнего пространства ---------------------------- */
#Venera_9_10_p10_nizhnee_prostranstvo {
/* border: 1px solid red;*/
width: 800px;
height: 161px; /*Расчетная высота блока*/
}
/* -------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#Venera_9_10_p10_nadpis {
/* border: 1px solid orange;*/
width: 805px;
/*padding-left: 40px;*/ /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
/*padding-right: 40px;*/
position: relative;
bottom: -5px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#Venera_9_10_p10_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Venera_9_10_p10_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* КОНЕЦ БЛОКА МОДАЛЬНЫХ ОКОН - 10 шт - Галерея — Венера-9 и Венера-10 *********************** */
/* БЛОК МОДАЛЬНЫХ ОКОН - Галерея — Венера-13 и Венера-14 ************************************* */
/* ----- МОДАЛЬНОЕ ОКНО 1 - Photo/Венера-13 и Венера-14/1. Венера-13 и Венера-14.jpeg ----- */
/* Серая область ---------------------------------------------------------------- */
#Venera_13_14_p1_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;
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#Venera_13_14_p1_modal.open {
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#Venera_13_14_p1_osnovnoi_block {
/* border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#Venera_13_14_p1_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;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#Venera_13_14_p1_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;
}
#Venera_13_14_p1_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;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#Venera_13_14_p1_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Venera_13_14_p1_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#Venera_13_14_p1_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#Venera_13_14_p1_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#Venera_13_14_p1_nadpis {
/* border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#Venera_13_14_p1_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Venera_13_14_p1_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- МОДАЛЬНОЕ ОКНО 2 - Photo/Венера-13 и Венера-14/2. Венера-13 и Венера-14.jpeg ----- */
/* Серая область ---------------------------------------------------------------- */
#Venera_13_14_p2_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;
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#Venera_13_14_p2_modal.open {
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#Venera_13_14_p2_osnovnoi_block {
/* border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#Venera_13_14_p2_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;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#Venera_13_14_p2_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;
}
#Venera_13_14_p2_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;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#Venera_13_14_p2_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Venera_13_14_p2_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#Venera_13_14_p2_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#Venera_13_14_p2_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#Venera_13_14_p2_nadpis {
/* border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#Venera_13_14_p2_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Venera_13_14_p2_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- МОДАЛЬНОЕ ОКНО 3 - Photo/Венера-13 и Венера-14/3. Венера-13 и Венера-14.jpeg ----- */
/* Серая область ---------------------------------------------------------------- */
#Venera_13_14_p3_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;
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#Venera_13_14_p3_modal.open {
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#Venera_13_14_p3_osnovnoi_block {
/* border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#Venera_13_14_p3_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;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#Venera_13_14_p3_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;
}
#Venera_13_14_p3_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;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#Venera_13_14_p3_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Venera_13_14_p3_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#Venera_13_14_p3_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#Venera_13_14_p3_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#Venera_13_14_p3_nadpis {
/* border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#Venera_13_14_p3_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Venera_13_14_p3_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* (<500px); (ш/в) > 1,6 */
/* ----- МОДАЛЬНОЕ ОКНО 4 - Photo/Венера-13 и Венера-14/4. Венера-13 - фото.jpg ----- */
/* Серая область ---------------------------------------------------------------- */
#Venera_13_14_p4_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; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#Venera_13_14_p4_modal.open {
/*visibility: visible;*/ /*Устаревший метод открытия модального блока*/
/*opacity: 1;*/ /*Устаревший метод открытия модального блока*/
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#Venera_13_14_p4_osnovnoi_block {
/* border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#Venera_13_14_p4_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;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#Venera_13_14_p4_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;
}
#Venera_13_14_p4_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;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#Venera_13_14_p4_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Venera_13_14_p4_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#Venera_13_14_p4_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
/* ------------------------------------------------------- */
/* Блок верхнего пространства ---------------------------- */
#Venera_13_14_p4_verhnee_prostranstvo {
/* border: 1px solid red;*/
width: 800px;
height: 63px; /*Расчетная высота блока*/
}
/* -------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#Venera_13_14_p4_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Блок нижнего пространства ---------------------------- */
#Venera_13_14_p4_nizhnee_prostranstvo {
/* border: 1px solid red;*/
width: 800px;
height: 63px; /*Расчетная высота блока*/
}
/* -------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#Venera_13_14_p4_nadpis {
/* border: 1px solid orange;*/
width: 805px;
/*padding-left: 40px;*/ /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
/*padding-right: 40px;*/
position: relative;
bottom: -5px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#Venera_13_14_p4_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Venera_13_14_p4_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- МОДАЛЬНОЕ ОКНО 5 - Photo/Венера-13 и Венера-14/5. Венера-13 - фото обраб 1.jpg ----- */
/* Серая область ---------------------------------------------------------------- */
#Venera_13_14_p5_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;
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#Venera_13_14_p5_modal.open {
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#Venera_13_14_p5_osnovnoi_block {
/* border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#Venera_13_14_p5_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;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#Venera_13_14_p5_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;
}
#Venera_13_14_p5_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;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#Venera_13_14_p5_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Venera_13_14_p5_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#Venera_13_14_p5_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#Venera_13_14_p5_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#Venera_13_14_p5_nadpis {
/* border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#Venera_13_14_p5_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Venera_13_14_p5_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* (<500px); (ш/в) > 1,6 */
/* ----- МОДАЛЬНОЕ ОКНО 6 - Photo/Венера-13 и Венера-14/6. Венера-13 - фото обраб 2.jpg ----- */
/* Серая область ---------------------------------------------------------------- */
#Venera_13_14_p6_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; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#Venera_13_14_p6_modal.open {
/*visibility: visible;*/ /*Устаревший метод открытия модального блока*/
/*opacity: 1;*/ /*Устаревший метод открытия модального блока*/
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#Venera_13_14_p6_osnovnoi_block {
/* border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#Venera_13_14_p6_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;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#Venera_13_14_p6_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;
}
#Venera_13_14_p6_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;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#Venera_13_14_p6_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Venera_13_14_p6_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#Venera_13_14_p6_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
/* ------------------------------------------------------- */
/* Блок верхнего пространства ---------------------------- */
#Venera_13_14_p6_verhnee_prostranstvo {
/* border: 1px solid red;*/
width: 800px;
height: 166px; /*Расчетная высота блока*/
}
/* -------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#Venera_13_14_p6_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Блок нижнего пространства ---------------------------- */
#Venera_13_14_p6_nizhnee_prostranstvo {
/* border: 1px solid red;*/
width: 800px;
height: 166px; /*Расчетная высота блока*/
}
/* -------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#Venera_13_14_p6_nadpis {
/* border: 1px solid orange;*/
width: 805px;
/*padding-left: 40px;*/ /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
/*padding-right: 40px;*/
position: relative;
bottom: -5px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#Venera_13_14_p6_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Venera_13_14_p6_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* (<500px); (ш/в) > 1,6 */
/* ----- МОДАЛЬНОЕ ОКНО 7 - Photo/Венера-13 и Венера-14/7. Венера-14 - фото.jpg ----- */
/* Серая область ---------------------------------------------------------------- */
#Venera_13_14_p7_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; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#Venera_13_14_p7_modal.open {
/*visibility: visible;*/ /*Устаревший метод открытия модального блока*/
/*opacity: 1;*/ /*Устаревший метод открытия модального блока*/
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#Venera_13_14_p7_osnovnoi_block {
/* border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#Venera_13_14_p7_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;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#Venera_13_14_p7_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;
}
#Venera_13_14_p7_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;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#Venera_13_14_p7_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Venera_13_14_p7_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#Venera_13_14_p7_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
/* ------------------------------------------------------- */
/* Блок верхнего пространства ---------------------------- */
#Venera_13_14_p7_verhnee_prostranstvo {
/* border: 1px solid red;*/
width: 800px;
height: 48px; /*Расчетная высота блока*/
}
/* -------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#Venera_13_14_p7_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Блок нижнего пространства ---------------------------- */
#Venera_13_14_p7_nizhnee_prostranstvo {
/* border: 1px solid red;*/
width: 800px;
height: 48px; /*Расчетная высота блока*/
}
/* -------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#Venera_13_14_p7_nadpis {
/* border: 1px solid orange;*/
width: 805px;
/*padding-left: 40px;*/ /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
/*padding-right: 40px;*/
position: relative;
bottom: -5px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#Venera_13_14_p7_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Venera_13_14_p7_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* /КОНЕЦ БЛОКА МОДАЛЬНЫХ ОКОН - Галерея — Венера-13 и Венера-14 ***************************** */
/* БЛОК МОДАЛЬНЫХ ОКОН - 2 шт - Галерея — АМС Маринер-10 ***************************** */
/* ----- МОДАЛЬНОЕ ОКНО 1 - Photo/Mariner-10/1. Venus - Mariner-10.jpg ----- */
/* Серая область ---------------------------------------------------------------- */
#Mariner10_p1_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;
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#Mariner10_p1_modal.open {
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#Mariner10_p1_osnovnoi_block {
/* border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#Mariner10_p1_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;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#Mariner10_p1_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;
}
#Mariner10_p1_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;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#Mariner10_p1_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Mariner10_p1_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#Mariner10_p1_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#Mariner10_p1_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#Mariner10_p1_nadpis {
/* border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#Mariner10_p1_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Mariner10_p1_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- МОДАЛЬНОЕ ОКНО 2 - Photo/Mariner-10/2. Venus - Mariner-10.jpg ----- */
/* Серая область ---------------------------------------------------------------- */
#Mariner10_p2_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;
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#Mariner10_p2_modal.open {
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#Mariner10_p2_osnovnoi_block {
/* border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#Mariner10_p2_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;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#Mariner10_p2_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;
}
#Mariner10_p2_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;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#Mariner10_p2_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Mariner10_p2_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#Mariner10_p2_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#Mariner10_p2_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#Mariner10_p2_nadpis {
/* border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#Mariner10_p2_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Mariner10_p2_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* /КОНЕЦ БЛОКА МОДАЛЬНЫХ ОКОН - 2шт - Галерея — АМС Маринер-10 ***************************** */
/* БЛОК МОДАЛЬНЫХ ОКОН - 18 шт - Галерея — АМС Магеллан ************************************* */
/* ----- МОДАЛЬНОЕ ОКНО 1 - Photo/Magellan/1. False color global view of Venus at 0E longitude.jpg ----- */
/* Серая область ---------------------------------------------------------------- */
#Magellan_p1_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;
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#Magellan_p1_modal.open {
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#Magellan_p1_osnovnoi_block {
/* border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#Magellan_p1_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;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#Magellan_p1_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;
}
#Magellan_p1_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;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#Magellan_p1_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Magellan_p1_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#Magellan_p1_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#Magellan_p1_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#Magellan_p1_nadpis {
/* border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#Magellan_p1_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Magellan_p1_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- МОДАЛЬНОЕ ОКНО 2 - Photo/Magellan/2. Lava channel in Sedna Planitia, Venus.jpg ----- */
/* Серая область ---------------------------------------------------------------- */
#Magellan_p2_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;
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#Magellan_p2_modal.open {
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#Magellan_p2_osnovnoi_block {
/* border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#Magellan_p2_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;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#Magellan_p2_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;
}
#Magellan_p2_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;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#Magellan_p2_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Magellan_p2_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#Magellan_p2_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#Magellan_p2_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#Magellan_p2_nadpis {
/* border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#Magellan_p2_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Magellan_p2_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- МОДАЛЬНОЕ ОКНО 3 - Photo/Magellan/3. Volcanic -pancake- domes in Tinatin Planitia, Venus.jpg ----- */
/* Серая область ---------------------------------------------------------------- */
#Magellan_p3_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;
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#Magellan_p3_modal.open {
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#Magellan_p3_osnovnoi_block {
/* border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#Magellan_p3_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;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#Magellan_p3_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;
}
#Magellan_p3_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;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#Magellan_p3_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Magellan_p3_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#Magellan_p3_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#Magellan_p3_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#Magellan_p3_nadpis {
/* border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#Magellan_p3_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Magellan_p3_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- МОДАЛЬНОЕ ОКНО 4 - Photo/Magellan/4. Mona Lisa crater, Venus.jpg ----- */
/* Серая область ---------------------------------------------------------------- */
#Magellan_p4_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;
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#Magellan_p4_modal.open {
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#Magellan_p4_osnovnoi_block {
/* border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#Magellan_p4_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;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#Magellan_p4_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;
}
#Magellan_p4_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;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#Magellan_p4_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Magellan_p4_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#Magellan_p4_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#Magellan_p4_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#Magellan_p4_nadpis {
/* border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#Magellan_p4_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Magellan_p4_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- МОДАЛЬНОЕ ОКНО 5 - Photo/Magellan/5. The tick volcano, northeast of Alpha Regio, Venus.jpg ----- */
/* Серая область ---------------------------------------------------------------- */
#Magellan_p5_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;
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#Magellan_p5_modal.open {
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#Magellan_p5_osnovnoi_block {
/* border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#Magellan_p5_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;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#Magellan_p5_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;
}
#Magellan_p5_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;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#Magellan_p5_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Magellan_p5_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#Magellan_p5_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#Magellan_p5_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#Magellan_p5_nadpis {
/* border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#Magellan_p5_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Magellan_p5_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- МОДАЛЬНОЕ ОКНО 6 - Photo/Magellan/6. Nova in Themis Regio,Venus.jpg ----- */
/* Серая область ---------------------------------------------------------------- */
#Magellan_p6_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;
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#Magellan_p6_modal.open {
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#Magellan_p6_osnovnoi_block {
/* border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#Magellan_p6_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;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#Magellan_p6_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;
}
#Magellan_p6_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;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#Magellan_p6_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Magellan_p6_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#Magellan_p6_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#Magellan_p6_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#Magellan_p6_nadpis {
/* border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#Magellan_p6_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Magellan_p6_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- МОДАЛЬНОЕ ОКНО 7 - Photo/Magellan/7. Shield volcanoes in Boann Corona,Venus.jpg ----- */
/* Серая область ---------------------------------------------------------------- */
#Magellan_p7_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;
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#Magellan_p7_modal.open {
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#Magellan_p7_osnovnoi_block {
/* border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#Magellan_p7_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;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#Magellan_p7_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;
}
#Magellan_p7_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;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#Magellan_p7_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Magellan_p7_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#Magellan_p7_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#Magellan_p7_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#Magellan_p7_nadpis {
/* border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#Magellan_p7_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Magellan_p7_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- МОДАЛЬНОЕ ОКНО 8 - Photo/Magellan/8. Press release image of wind streaks on Venus.jpg ----- */
/* Серая область ---------------------------------------------------------------- */
#Magellan_p8_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;
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#Magellan_p8_modal.open {
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#Magellan_p8_osnovnoi_block {
/* border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#Magellan_p8_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;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#Magellan_p8_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;
}
#Magellan_p8_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;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#Magellan_p8_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Magellan_p8_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#Magellan_p8_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#Magellan_p8_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#Magellan_p8_nadpis {
/* border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#Magellan_p8_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Magellan_p8_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- МОДАЛЬНОЕ ОКНО 9 - Photo/Magellan/9. Western Maxwell Montes and Cleopatra Crater.jpg ----- */
/* Серая область ---------------------------------------------------------------- */
#Magellan_p9_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;
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#Magellan_p9_modal.open {
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#Magellan_p9_osnovnoi_block {
/* border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#Magellan_p9_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;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#Magellan_p9_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;
}
#Magellan_p9_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;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#Magellan_p9_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Magellan_p9_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#Magellan_p9_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#Magellan_p9_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#Magellan_p9_nadpis {
/* border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#Magellan_p9_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Magellan_p9_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- МОДАЛЬНОЕ ОКНО 10 - Photo/Magellan/10. Beta Regio, Venus.jpg ----- */
/* Серая область ---------------------------------------------------------------- */
#Magellan_p10_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;
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#Magellan_p10_modal.open {
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#Magellan_p10_osnovnoi_block {
/* border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#Magellan_p10_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;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#Magellan_p10_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;
}
#Magellan_p10_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;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#Magellan_p10_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Magellan_p10_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#Magellan_p10_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#Magellan_p10_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#Magellan_p10_nadpis {
/* border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#Magellan_p10_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Magellan_p10_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- МОДАЛЬНОЕ ОКНО 11 - Photo/Magellan/11. Group of volcanic features southeast of Beta Regio, Venus.jpg ----- */
/* Серая область ---------------------------------------------------------------- */
#Magellan_p11_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;
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#Magellan_p11_modal.open {
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#Magellan_p11_osnovnoi_block {
/* border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#Magellan_p11_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;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#Magellan_p11_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;
}
#Magellan_p11_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;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#Magellan_p11_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Magellan_p11_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#Magellan_p11_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#Magellan_p11_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#Magellan_p11_nadpis {
/* border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#Magellan_p11_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Magellan_p11_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- МОДАЛЬНОЕ ОКНО 12 - Photo/Magellan/12. Perspective view of Sif Mons, Venus.jpg ----- */
/* Серая область ---------------------------------------------------------------- */
#Magellan_p12_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;
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#Magellan_p12_modal.open {
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#Magellan_p12_osnovnoi_block {
/* border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#Magellan_p12_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;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#Magellan_p12_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;
}
#Magellan_p12_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;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#Magellan_p12_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Magellan_p12_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#Magellan_p12_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#Magellan_p12_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#Magellan_p12_nadpis {
/* border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#Magellan_p12_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Magellan_p12_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- МОДАЛЬНОЕ ОКНО - Photo/Magellan/13. Perspective view of western Eistla Regio, Venus.jpg ----- */
/* Серая область ---------------------------------------------------------------- */
#Magellan_p13_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;
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#Magellan_p13_modal.open {
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#Magellan_p13_osnovnoi_block {
/* border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#Magellan_p13_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;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#Magellan_p13_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;
}
#Magellan_p13_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;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#Magellan_p13_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Magellan_p13_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#Magellan_p13_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#Magellan_p13_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#Magellan_p13_nadpis {
/* border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#Magellan_p13_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Magellan_p13_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- МОДАЛЬНОЕ ОКНО 14 - Photo/Magellan/14. Sapas Mons volcano, false color press release.jpg ----- */
/* Серая область ---------------------------------------------------------------- */
#Magellan_p14_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;
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#Magellan_p14_modal.open {
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#Magellan_p14_osnovnoi_block {
/* border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#Magellan_p14_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;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#Magellan_p14_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;
}
#Magellan_p14_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;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#Magellan_p14_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Magellan_p14_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#Magellan_p14_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#Magellan_p14_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#Magellan_p14_nadpis {
/* border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#Magellan_p14_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Magellan_p14_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- МОДАЛЬНОЕ ОКНО 15 - Photo/Magellan/15. Sapas Mons volcano, Venus; 3-D color press release.jpg ----- */
/* Серая область ---------------------------------------------------------------- */
#Magellan_p15_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;
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#Magellan_p15_modal.open {
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#Magellan_p15_osnovnoi_block {
/* border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#Magellan_p15_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;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#Magellan_p15_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;
}
#Magellan_p15_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;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#Magellan_p15_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Magellan_p15_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#Magellan_p15_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#Magellan_p15_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#Magellan_p15_nadpis {
/* border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#Magellan_p15_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Magellan_p15_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- МОДАЛЬНОЕ ОКНО 16 - Photo/Magellan/16. Perspective view of pancake domes in Alpha Regio,Venus.jpg ----- */
/* Серая область ---------------------------------------------------------------- */
#Magellan_p16_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;
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#Magellan_p16_modal.open {
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#Magellan_p16_osnovnoi_block {
/* border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#Magellan_p16_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;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#Magellan_p16_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;
}
#Magellan_p16_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;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#Magellan_p16_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Magellan_p16_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#Magellan_p16_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#Magellan_p16_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#Magellan_p16_nadpis {
/* border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#Magellan_p16_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Magellan_p16_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- МОДАЛЬНОЕ ОКНО 17 - Photo/Magellan/17. 3-D perspective view of the -crater farm- on Venus.jpg ----- */
/* Серая область ---------------------------------------------------------------- */
#Magellan_p17_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;
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#Magellan_p17_modal.open {
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#Magellan_p17_osnovnoi_block {
/* border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#Magellan_p17_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;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#Magellan_p17_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;
}
#Magellan_p17_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;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#Magellan_p17_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Magellan_p17_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#Magellan_p17_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#Magellan_p17_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#Magellan_p17_nadpis {
/* border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#Magellan_p17_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Magellan_p17_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- МОДАЛЬНОЕ ОКНО 18 - Photo/Magellan/18. Perspective view of Latona Corona and Dali Chasma,Venus.jpg ----- */
/* Серая область ---------------------------------------------------------------- */
#Magellan_p18_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;
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#Magellan_p18_modal.open {
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#Magellan_p18_osnovnoi_block {
/* border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#Magellan_p18_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;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#Magellan_p18_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;
}
#Magellan_p18_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;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#Magellan_p18_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Magellan_p18_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#Magellan_p18_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#Magellan_p18_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#Magellan_p18_nadpis {
/* border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#Magellan_p18_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Magellan_p18_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* /КОНЕЦ БЛОКА МОДАЛЬНЫХ ОКОН - 18 шт - Галерея — АМС Магеллан ***************************** */
/* БЛОК МОДАЛЬНЫХ ОКОН - 6 шт - Галерея — АМС Акацуки ************************************** */
/* ----- МОДАЛЬНОЕ ОКНО 1 - Photo/Akatsuki/1. Venus dayside synthesized false color image by UVI (2018 Mar 30) No.2.png ----- */
/* Серая область ---------------------------------------------------------------- */
#Akatsuki_p1_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;
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#Akatsuki_p1_modal.open {
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#Akatsuki_p1_osnovnoi_block {
/* border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#Akatsuki_p1_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;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#Akatsuki_p1_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;
}
#Akatsuki_p1_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;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#Akatsuki_p1_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Akatsuki_p1_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#Akatsuki_p1_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#Akatsuki_p1_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#Akatsuki_p1_nadpis {
/* border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#Akatsuki_p1_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Akatsuki_p1_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- МОДАЛЬНОЕ ОКНО 2 - Photo/Akatsuki/2. Venus nightside synthesized false color image by IR2 1.735 µm and 2.26 µm (2016 Sep 04) No.2.png ----- */
/* Серая область ---------------------------------------------------------------- */
#Akatsuki_p2_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;
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#Akatsuki_p2_modal.open {
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#Akatsuki_p2_osnovnoi_block {
/* border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#Akatsuki_p2_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;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#Akatsuki_p2_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;
}
#Akatsuki_p2_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;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#Akatsuki_p2_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Akatsuki_p2_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#Akatsuki_p2_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#Akatsuki_p2_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#Akatsuki_p2_nadpis {
/* border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#Akatsuki_p2_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Akatsuki_p2_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- МОДАЛЬНОЕ ОКНО 3 - Photo/Akatsuki/3. Venus dayside synthesized false color image by UVI (2016 May 06).png ----- */
/* Серая область ---------------------------------------------------------------- */
#Akatsuki_p3_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;
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#Akatsuki_p3_modal.open {
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#Akatsuki_p3_osnovnoi_block {
/* border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#Akatsuki_p3_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;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#Akatsuki_p3_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;
}
#Akatsuki_p3_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;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#Akatsuki_p3_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Akatsuki_p3_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#Akatsuki_p3_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#Akatsuki_p3_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#Akatsuki_p3_nadpis {
/* border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#Akatsuki_p3_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Akatsuki_p3_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- МОДАЛЬНОЕ ОКНО 4 - Photo/Akatsuki/4. Venus' image acquired by IR2 after Venus Orbit Insertion (IR2_2015_12_11).jpg ----- */
/* Серая область ---------------------------------------------------------------- */
#Akatsuki_p4_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;
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#Akatsuki_p4_modal.open {
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#Akatsuki_p4_osnovnoi_block {
/* border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#Akatsuki_p4_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;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#Akatsuki_p4_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;
}
#Akatsuki_p4_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;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#Akatsuki_p4_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Akatsuki_p4_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#Akatsuki_p4_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#Akatsuki_p4_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#Akatsuki_p4_nadpis {
/* border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#Akatsuki_p4_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Akatsuki_p4_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- МОДАЛЬНОЕ ОКНО 5 - Photo/Akatsuki/5. Venus dayside synthesized false color image by UVI (2015 Dec 07).png ----- */
/* Серая область ---------------------------------------------------------------- */
#Akatsuki_p5_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;
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#Akatsuki_p5_modal.open {
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#Akatsuki_p5_osnovnoi_block {
/* border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#Akatsuki_p5_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;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#Akatsuki_p5_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;
}
#Akatsuki_p5_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;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#Akatsuki_p5_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Akatsuki_p5_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#Akatsuki_p5_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#Akatsuki_p5_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#Akatsuki_p5_nadpis {
/* border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#Akatsuki_p5_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Akatsuki_p5_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* ----- МОДАЛЬНОЕ ОКНО 6 - Photo/Akatsuki/6. Venus images taken by four cameras.jpg ----- */
/* Серая область ---------------------------------------------------------------- */
#Akatsuki_p6_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;
display: none; /*Новый метод скрытия модального окна*/
overflow-y: auto; /*Прокрутка для модального окна, если малое разрешение экрана*/
}
#Akatsuki_p6_modal.open {
display: flex; /* Новый метод открытия модального окна*/
}
/* --------------------------------------------------------------------------------- */
/* Основной блок ----------------------- */
#Akatsuki_p6_osnovnoi_block {
/* border: 1px solid yellow;*/
width: 85vw;
height: 99vh;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* --------------------------------------- */
/* ОБЩИЙ БЛОК для крестика и фото + надпись---------------------------------------------*/
#Akatsuki_p6_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;
}
/* --------------------------------------------------------------------------------- */
/* Крестик ---------------------------------------------------------------------- */
#Akatsuki_p6_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;
}
#Akatsuki_p6_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;
}
/* ------------------------------------------------------------------------------------- */
/* Левая кнопка ------------------------------------------ */
#Akatsuki_p6_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Akatsuki_p6_levo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* Заднее полотно для фото ------------------------------- */
#Akatsuki_p6_polotno {
width: 800px;
height: 500px;
background-color: dimgrey;
border: 3px solid white;
}
/* ------------------------------------------------------- */
/* Само увеличенное фото ---------------------------------------------------------------*/
#Akatsuki_p6_modal_photo {
/*max-width: 800px;*/ /*Используется в теге html ![]()
атрибут width="800px"*/
/*border: 3px solid white;*/
}
/* --------------------------------------------------------------------------------- */
/* Надпись под фото -------------------------------------- */
#Akatsuki_p6_nadpis {
/* border: 1px solid orange;*/
width: 805px;
padding-left: 40px; /*Отступы по краям чтобы границы надписи начинались и заканчиливались на границах фото, а не кнопок*/
padding-right: 40px;
position: relative;
left: -43px;
}
/* ------------------------------------------------------- */
/* Правая кнопка ------------------------------------------ */
#Akatsuki_p6_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; /*Запрещает выделение текста(синим цветом когда мышкой нажимаешь)*/
}
#Akatsuki_p6_pravo:hover {
color: rgba(255, 255, 255, 1.0);
background-color: rgba(169, 169, 169, 0.3);
}
/* ------------------------------------------------------- */
/* /КОНЕЦ БЛОКА МОДАЛЬНЫХ ОКОН - 6 шт - Галерея — АМС Акацуки ****************************** */
/* БОКОВАЯ ПАНЕЛЬ и все что сней связано */
/* Пробел (перенос строки) -------------- */
.break {
/* border: 1px solid green;*/
width: 15vw;
height: 20px;
}
/* Сама боковая панель ***************************** */
#bokovaya_panel {
/*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);
text-align: center;
}
#bokovaya_panel.open {
display: flex;
}
/* **************************** */
/* Боковые фото - прозрачные бордеры и белая рамка ------------------------- */
/* №1 */
#Venus_png_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#Venus_png_bokovoe_photo.vybrano {
border: 2px solid white; /* Добавляет белую рамку когда фото выбрано */
}
/* №2 */
#Venera_sostav_jpg_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#Venera_sostav_jpg_bokovoe_photo.vybrano {
border: 2px solid white; /* Добавляет белую рамку когда фото выбрано */
}
/* №3 */
#Venera_par_effect_jpg_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#Venera_par_effect_jpg_bokovoe_photo.vybrano {
border: 2px solid white; /* Добавляет белую рамку когда фото выбрано */
}
/* Галерея — Венера-7 */
/* №4 */
#Venera_7_p1_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#Venera_7_p1_bokovoe_photo.vybrano {
border: 2px solid white; /* Добавляет белую рамку когда фото выбрано */
}
/* №5 */
#Venera_7_p2_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#Venera_7_p2_bokovoe_photo.vybrano {
border: 2px solid white; /* Добавляет белую рамку когда фото выбрано */
}
/* №6 */
#Venera_7_p3_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#Venera_7_p3_bokovoe_photo.vybrano {
border: 2px solid white; /* Добавляет белую рамку когда фото выбрано */
}
/* №7 */
#Venera_7_p4_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#Venera_7_p4_bokovoe_photo.vybrano {
border: 2px solid white; /* Добавляет белую рамку когда фото выбрано */
}
/* Галерея — Венера-9 и Венера-10 */
/* №8 */
#Venera_9_10_p1_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#Venera_9_10_p1_bokovoe_photo.vybrano {
border: 2px solid white; /* Добавляет белую рамку когда фото выбрано */
}
/* №9 */
#Venera_9_10_p2_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#Venera_9_10_p2_bokovoe_photo.vybrano {
border: 2px solid white; /* Добавляет белую рамку когда фото выбрано */
}
/* №10 */
#Venera_9_10_p3_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#Venera_9_10_p3_bokovoe_photo.vybrano {
border: 2px solid white; /* Добавляет белую рамку когда фото выбрано */
}
/* №11 */
#Venera_9_10_p4_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#Venera_9_10_p4_bokovoe_photo.vybrano {
border: 2px solid white; /* Добавляет белую рамку когда фото выбрано */
}
/* №12 */
#Venera_9_10_p5_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#Venera_9_10_p5_bokovoe_photo.vybrano {
border: 2px solid white; /* Добавляет белую рамку когда фото выбрано */
}
/* №13 */
#Venera_9_10_p6_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#Venera_9_10_p6_bokovoe_photo.vybrano {
border: 2px solid white; /* Добавляет белую рамку когда фото выбрано */
}
/* №14 */
#Venera_9_10_p7_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#Venera_9_10_p7_bokovoe_photo.vybrano {
border: 2px solid white; /* Добавляет белую рамку когда фото выбрано */
}
/* №15 */
#Venera_9_10_p8_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#Venera_9_10_p8_bokovoe_photo.vybrano {
border: 2px solid white; /* Добавляет белую рамку когда фото выбрано */
}
/* №16 */
#Venera_9_10_p9_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#Venera_9_10_p9_bokovoe_photo.vybrano {
border: 2px solid white; /* Добавляет белую рамку когда фото выбрано */
}
/* №17 */
#Venera_9_10_p10_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#Venera_9_10_p10_bokovoe_photo.vybrano {
border: 2px solid white; /* Добавляет белую рамку когда фото выбрано */
}
/* Галерея — Венера-13 и Венера-14 */
/* №18 */
#Venera_13_14_p1_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#Venera_13_14_p1_bokovoe_photo.vybrano {
border: 2px solid white; /* Добавляет белую рамку когда фото выбрано */
}
/* №19 */
#Venera_13_14_p2_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#Venera_13_14_p2_bokovoe_photo.vybrano {
border: 2px solid white; /* Добавляет белую рамку когда фото выбрано */
}
/* №20 */
#Venera_13_14_p3_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#Venera_13_14_p3_bokovoe_photo.vybrano {
border: 2px solid white; /* Добавляет белую рамку когда фото выбрано */
}
/* №21 */
#Venera_13_14_p4_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#Venera_13_14_p4_bokovoe_photo.vybrano {
border: 2px solid white; /* Добавляет белую рамку когда фото выбрано */
}
/* №22 */
#Venera_13_14_p5_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#Venera_13_14_p5_bokovoe_photo.vybrano {
border: 2px solid white; /* Добавляет белую рамку когда фото выбрано */
}
/* №23 */
#Venera_13_14_p6_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#Venera_13_14_p6_bokovoe_photo.vybrano {
border: 2px solid white; /* Добавляет белую рамку когда фото выбрано */
}
/* №24 */
#Venera_13_14_p7_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#Venera_13_14_p7_bokovoe_photo.vybrano {
border: 2px solid white; /* Добавляет белую рамку когда фото выбрано */
}
/* Галерея — АМС Маринер-10 */
/* №25 */
#Mariner10_p1_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#Mariner10_p1_bokovoe_photo.vybrano {
border: 2px solid white; /* Добавляет белую рамку когда фото выбрано */
}
/* №26 */
#Mariner10_p2_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#Mariner10_p2_bokovoe_photo.vybrano {
border: 2px solid white; /* Добавляет белую рамку когда фото выбрано */
}
/* Галерея — АМС Магеллан */
/* №27 */
#Magellan_p1_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#Magellan_p1_bokovoe_photo.vybrano {
border: 2px solid white; /* Добавляет белую рамку когда фото выбрано */
}
/* №28 */
#Magellan_p2_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#Magellan_p2_bokovoe_photo.vybrano {
border: 2px solid white; /* Добавляет белую рамку когда фото выбрано */
}
/* №29 */
#Magellan_p3_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#Magellan_p3_bokovoe_photo.vybrano {
border: 2px solid white; /* Добавляет белую рамку когда фото выбрано */
}
/* №30 */
#Magellan_p4_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#Magellan_p4_bokovoe_photo.vybrano {
border: 2px solid white; /* Добавляет белую рамку когда фото выбрано */
}
/* №31 */
#Magellan_p5_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#Magellan_p5_bokovoe_photo.vybrano {
border: 2px solid white; /* Добавляет белую рамку когда фото выбрано */
}
/* №32 */
#Magellan_p6_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#Magellan_p6_bokovoe_photo.vybrano {
border: 2px solid white; /* Добавляет белую рамку когда фото выбрано */
}
/* №33 */
#Magellan_p7_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#Magellan_p7_bokovoe_photo.vybrano {
border: 2px solid white; /* Добавляет белую рамку когда фото выбрано */
}
/* №34 */
#Magellan_p8_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#Magellan_p8_bokovoe_photo.vybrano {
border: 2px solid white; /* Добавляет белую рамку когда фото выбрано */
}
/* №35 */
#Magellan_p9_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#Magellan_p9_bokovoe_photo.vybrano {
border: 2px solid white; /* Добавляет белую рамку когда фото выбрано */
}
/* №36 */
#Magellan_p10_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#Magellan_p10_bokovoe_photo.vybrano {
border: 2px solid white; /* Добавляет белую рамку когда фото выбрано */
}
/* №37 */
#Magellan_p11_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#Magellan_p11_bokovoe_photo.vybrano {
border: 2px solid white; /* Добавляет белую рамку когда фото выбрано */
}
/* №38 */
#Magellan_p12_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#Magellan_p12_bokovoe_photo.vybrano {
border: 2px solid white; /* Добавляет белую рамку когда фото выбрано */
}
/* №39 */
#Magellan_p13_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#Magellan_p13_bokovoe_photo.vybrano {
border: 2px solid white; /* Добавляет белую рамку когда фото выбрано */
}
/* №40 */
#Magellan_p14_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#Magellan_p14_bokovoe_photo.vybrano {
border: 2px solid white; /* Добавляет белую рамку когда фото выбрано */
}
/* №41 */
#Magellan_p15_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#Magellan_p15_bokovoe_photo.vybrano {
border: 2px solid white; /* Добавляет белую рамку когда фото выбрано */
}
/* №42 */
#Magellan_p16_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#Magellan_p16_bokovoe_photo.vybrano {
border: 2px solid white; /* Добавляет белую рамку когда фото выбрано */
}
/* №43 */
#Magellan_p17_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#Magellan_p17_bokovoe_photo.vybrano {
border: 2px solid white; /* Добавляет белую рамку когда фото выбрано */
}
/* №44 */
#Magellan_p18_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#Magellan_p18_bokovoe_photo.vybrano {
border: 2px solid white; /* Добавляет белую рамку когда фото выбрано */
}
/* Галерея — АМС Акацуки */
/* №45 */
#Akatsuki_p1_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#Akatsuki_p1_bokovoe_photo.vybrano {
border: 2px solid white; /* Добавляет белую рамку когда фото выбрано */
}
/* №46 */
#Akatsuki_p2_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#Akatsuki_p2_bokovoe_photo.vybrano {
border: 2px solid white; /* Добавляет белую рамку когда фото выбрано */
}
/* №47 */
#Akatsuki_p3_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#Akatsuki_p3_bokovoe_photo.vybrano {
border: 2px solid white; /* Добавляет белую рамку когда фото выбрано */
}
/* №48 */
#Akatsuki_p4_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#Akatsuki_p4_bokovoe_photo.vybrano {
border: 2px solid white; /* Добавляет белую рамку когда фото выбрано */
}
/* №49 */
#Akatsuki_p5_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#Akatsuki_p5_bokovoe_photo.vybrano {
border: 2px solid white; /* Добавляет белую рамку когда фото выбрано */
}
/* №50 */
#Akatsuki_p6_bokovoe_photo {
border: 2px solid rgba(0, 0, 0, 0.0); /*Добавлены прозрачные бордеры(границы) для бокового фото, чтобы при наводке мышью при появлении лаймового цвета бордера, фото не шевелилось*/
}
#Akatsuki_p6_bokovoe_photo.vybrano {
border: 2px solid white; /* Добавляет белую рамку когда фото выбрано */
}
/* ---------------------------------------- */
/* Боковые фото - наводка */
/* №1 */
#Venus_png_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
/* №2 */
#Venera_sostav_jpg_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
/* №3 */
#Venera_par_effect_jpg_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
/* №4 */
#Venera_7_p1_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
/* №5 */
#Venera_7_p2_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
/* №6 */
#Venera_7_p3_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
/* №7 */
#Venera_7_p4_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
/* №8 */
#Venera_9_10_p1_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
/* №9 */
#Venera_9_10_p2_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
/* №10 */
#Venera_9_10_p3_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
/* №11 */
#Venera_9_10_p4_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
/* №12 */
#Venera_9_10_p5_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
/* №13 */
#Venera_9_10_p6_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
/* №14 */
#Venera_9_10_p7_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
/* №15 */
#Venera_9_10_p8_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
/* №16 */
#Venera_9_10_p9_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
/* №17 */
#Venera_9_10_p10_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
/* №18 */
#Venera_13_14_p1_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
/* №19 */
#Venera_13_14_p2_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
/* №20 */
#Venera_13_14_p3_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
/* Боковые фото - наводка */
/* №21 */
#Venera_13_14_p4_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
/* №22 */
#Venera_13_14_p5_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
/* №23 */
#Venera_13_14_p6_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
/* №24 */
#Venera_13_14_p7_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
/* №25 */
#Mariner10_p1_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
/* №26 */
#Mariner10_p2_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
/* №27 */
#Magellan_p1_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
/* №28 */
#Magellan_p2_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
/* №29 */
#Magellan_p3_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
/* №30 */
#Magellan_p4_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
/* №31 */
#Magellan_p5_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
/* №32 */
#Magellan_p6_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
/* №33 */
#Magellan_p7_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
/* №34 */
#Magellan_p8_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
/* №35 */
#Magellan_p9_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
/* №36 */
#Magellan_p10_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
/* №37 */
#Magellan_p11_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
/* №38 */
#Magellan_p12_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
/* №39 */
#Magellan_p13_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
/* №40 */
#Magellan_p14_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
/* №41 */
#Magellan_p15_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
/* №42 */
#Magellan_p16_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
/* №43 */
#Magellan_p17_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
/* №44 */
#Magellan_p18_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
/* №45 */
#Akatsuki_p1_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
/* №46 */
#Akatsuki_p2_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
/* №47 */
#Akatsuki_p3_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
/* №48 */
#Akatsuki_p4_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
/* №49 */
#Akatsuki_p5_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
/* №50 */
#Akatsuki_p6_bokovoe_photo:hover {
cursor: pointer;
border: 2px solid lime;
}
/* ---------------------------------------- */