@import url('pannellum.css');

:root {
    --body_background: #fff;
    --body_color: #222;
    --link-color: darkblue;
    --color_link_blue: #003cff;
    --categories_menu_bg: rgb(255 255 255 /.99);
    --categories_menu_color: #111;
    --categories_description_color: #777;
    --categories_new_color: #999;
    --title_site_span: #8f8f8f;
    --header_bg: rgb(255 255 255 /.92);
    --header_color_title: #111;
    --header_link_h_color: #fff;
    --header_link_h_bg: #333;
    --header_link_n_color: #333;
    --footer_copyright_color: #bbb;
    --footer_copyright_color_link: #b9b9b9;
    --footer_admin_bgcolor: #bb0000;
    --footer_admin_color: #fff;

    --preview_wh: 244px;
}


* { padding: 0; margin: 0; box-sizing: border-box; }
body { font-size: .93rem; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: var(--body_background); color: var(--body_color); }
a:link, a:visited { color: var(--link-color) }
a:hover { color: var(--link-color) }

.link_blue:link, .link_blue:visited { color: var(--color_link_blue) }



.block_link { display: block; height: 100%; }
.link_logo { text-decoration: none; }




.photocard { position: relative }
.photocard img { max-width: 1000px;}

.header_block { position: relative; display: flex; gap: 20px; justify-content: space-between; align-items: center; max-width: 1007px; margin: 25px 0 7px 0 }
.header_block .name_block { text-decoration: none; }


.more_photos { display: grid; width: 1007px; grid-template-columns: repeat(4, var(--preview_wh)); gap: 40px 10px; justify-content: space-between; }
.more_panorams { display: grid; width: 1007px; grid-template-columns: 499px 499px; gap: 40px 10px; justify-content: space-between; }
.thumbnails, .thumbnails_pano { display: block; }
.thumbnails .info, .thumbnails_pano .info { margin: 7px 0 0 0; text-align: center; }
.thumbnails .info .name, .thumbnails_pano .info .name { display: block; font-weight: 500; }
.thumbnails .wrapper { width: var(--preview_wh); height: var(--preview_wh); }
.thumbnails .wrapper img { width: 100%; height: 100%; object-fit: cover; opacity: 90%; animation-duration: .2s; }
.thumbnails .wrapper img:hover { opacity: 100%; }
.thumbnails_pano .wrapper { width: 499px; height: 230px; }
.thumbnails_pano .wrapper img { width: 100%; height: 100%; object-fit: cover; opacity: 90%; animation-duration: .2s; }
.thumbnails_pano .wrapper img:hover { opacity: 100%; }



/*
@media  screen and (min-width: 1369px) {

    .menu_header { position: fixed; background: var(--header_bg); padding: 10px 0; width: 100%; top: 0; z-index: 9999; backdrop-filter: blur(3px); }
    .menu_header .link_h:link, .link_h:visited { background: var(--header_link_h_bg); color: var(--header_link_h_color); text-decoration: none;  padding: 5px 15px 7px 15px; border-radius: 4px; }
    .menu_header .link_logo { text-decoration: none; }
    .menu_header menu { list-style: none }
    .menu_header menu li { display: inline; margin: 0 5px 0 0 }
    .menu_header menu li:last-child { margin: 0 }
    .menu_header menu .cat_dropdown { position: relative; background: var(--categories_menu_bg); color: var(--categories_menu_color); cursor: pointer; padding: 5px 10px 7px 15px; margin: 0 5px 0 0; border-radius: 4px; }
    .menu_header menu .cat_dropdown-content { display: none; position: absolute; background: var(--categories_menu_bg); min-width: 160px; padding: 12px 16px; z-index: 1; right: 0; top: 25px; border-radius: inherit; backdrop-filter: blur(3px); }
    .menu_header menu .cat_dropdown:hover .cat_dropdown-content { display: block; cursor: default;  }
    .menu_header menu .cat_dropdown:hover .cat_dropdown-content ul { column-count: 2 }
    .menu_header menu .cat_dropdown:hover .cat_dropdown-content ul li { display: block; }
    .menu_header menu .cat_dropdown:hover .cat_dropdown-content ul li .cat_link:link, .cat_link:visited { color: var(--categories_menu_color); text-decoration: none; line-height: 190%; }
    .menu_header .header_flex { position: relative; width: 1009px; display: flex; align-items: center; justify-content: space-between; margin: 0 auto }
    .menu_header .header_flex .logo { display: flex; gap: 12px; align-items: center }
    .menu_header .header_flex .logo .title_mysite { margin: -5px 0 -3px -2px; color: var(--header_color_title) }
    .menu_header .header_flex .logo span { display: block; font-size: 12px; color: var(--title_site_span); margin: 0 }
    .menu_header .header_flex .logo .avatar { --avatar_size: 65px; width: var(--avatar_size); height: var(--avatar_size); border-radius: 50%; overflow: hidden; }
    .menu_header .header_flex .logo .avatar img { width: 100%; height: 100%; object-fit: cover; }


    .main_page { width: 1009px; height: 100vh; margin: 85px 0 0 0 }
    .main_page_full { width: 100%; min-width: 1009px; height: 100vh; padding: 0 20px; margin: 100px 0 0 0 }
    .main_page_full #allphoto { position: relative; }
    .main_page_full #allphoto .photocard { position: relative; margin: 0 0 40px 0; }
    .main_page_full #allphoto .photocard img { max-width: 1000px; }
    .main_page_full #allphoto .photocard .name { font-weight: 500; }
    .grid_new_photos { --gap_np: 3px; --wh_size: 199px; display: grid; gap: var(--gap_np); grid-template-columns: repeat(5, var(--wh_size)); grid-template-rows: repeat(3, var(--wh_size)) ; width: 1009px; height: 606px;}
    .grid_new_photos .photo { background-repeat: no-repeat; background-size: cover; background-position: 50%; filter: opacity(90%); transition: .2s; }
    .grid_new_photos .photo:hover { filter: opacity(100%) }
    .grid_new_photos .count_photo1 {  grid-area: 1 / 1 / 3 / 3; }

    .content { width: 1009px; min-width: 1009px; margin: 85px auto }

}
*/  

/*@media only screen and (max-width: 1370px) {*/
@media only screen and (min-width: 1009px) {


    .link_n:link, .link_n:visited { color: var(--header_link_n_color); text-decoration: none;  padding: 5px 15px 7px 15px }
    .link_h:link, .link_h:visited { background: var(--header_link_h_bg); color: var(--header_link_h_color); text-decoration: none;  padding: 5px 15px 7px 15px; border-radius: 4px; }


    .menu_header_home { position: relative; background: var(--header_bg); padding: 10px 0; margin: 0 0 10px 0}
    .menu_header { position: fixed; background: var(--header_bg); padding: 10px 0; width: 100%; top: 0; z-index: 9999; backdrop-filter: blur(3px); }

    menu { list-style: none }
    menu li { display: inline; margin: 0 5px 0 0 }
    menu li:last-child { margin: 0 }
    menu .cat_dropdown { position: relative; background: var(--categories_menu_bg); color: var(--categories_menu_color); cursor: pointer; padding: 5px 10px 7px 15px; margin: 0 5px 0 0; border-radius: 4px; }
    menu .cat_dropdown-content { display: none; position: absolute; background: var(--categories_menu_bg); min-width: 160px; padding: 12px 16px; z-index: 1; right: 0; top: 25px; border-radius: inherit; backdrop-filter: blur(3px);  }
    menu .cat_dropdown:hover .cat_dropdown-content { display: block; cursor: default; }
    menu .cat_dropdown:hover .cat_dropdown-content ul { column-count: 2 }
    menu .cat_dropdown:hover .cat_dropdown-content ul li { display: block; width: 150px;  }
    menu .cat_dropdown:hover .cat_dropdown-content ul li .cat_link:link, .cat_link:visited { color: var(--categories_menu_color); text-decoration: none; line-height: 190%; }

    .header_wrapper { position: fixed; top: 0; display: flex; z-index: 9999; width: 100%; background: var(--header_bg); backdrop-filter: blur(10px); padding: 7px 0 }
    .header_flex { position: relative; width: 1009px; display: flex; align-items: center; justify-content: space-between; margin: 0 auto }
    .header_flex .logo { display: flex; gap: 12px; align-items: center; }
    .header_flex .logo .title_mysite { margin: -7px 0 -3px -2px; color: var(--header_color_title); font-size: 30px }
    .header_flex .logo span { display: block; font-size: 12px; color: var(--title_site_span); margin: -7px 0 0 0 }
    .header_flex .logo .avatar { --avatar_size: 65px; width: var(--avatar_size); height: var(--avatar_size); border-radius: 50%; overflow: hidden; }
    .header_flex .logo .avatar img { width: 100%; height: 100%; object-fit: cover; }

    
    .main_page_home { display: flex; width: 100%; min-width: 1009px; height: 100vh; align-items: center; }
    .main_page { width: 100%; min-width: 1009px;  margin: 100px 0 40px 0  }
    .main_page_full { width: 100%; min-width: 1009px;  margin: 100px 0 40px 0 }
    .main_page_full #allphoto { position: relative; }
    .main_page_full #allphoto .photocard { position: relative; margin: 0 0 40px 0; }
    .main_page_full #allphoto .photocard img { max-width: 1009px; }
    .main_page_full #allphoto .photocard .name { font-weight: 500; }
    .grid_new_photos { --wh_size: 199px; display: grid; gap: 3px; grid-template-columns: repeat(5, var(--wh_size)); grid-template-rows: repeat(2, var(--wh_size)) ; width: 1007px; height: 403px; }
    .grid_new_photos .photo { background-repeat: no-repeat; background-size: cover; background-position: 50%; filter: opacity(90%); transition-duration: .2s; }
    .grid_new_photos .photo:hover { filter: opacity(100%) }
    .grid_new_photos .count_photo1 {  grid-area: 1 / 1 / 3 / 3; }


    .content { width: 1009px; margin: 20px auto; }
    .photo_page { position: relative; margin: 100px 0 40px 0 }
    .photoblock { position: relative; min-height: calc(100vh - 260px); }

    #panorama { width: 100%; height: calc(100vh - 160px); margin: 85px 0 0 0 }
    .panorama_info_wrapper { position: relative; width: 100%; }
    .panorama_info { position: relative; width: 1009px; margin: 10px auto 0 auto }
    .panorama_info .name_panoram { display: block; font-weight: 600; font-size: 24px; }


    .cat_header { position: relative; margin: 0 0 20px 0 }
    .cat_header .name_category { margin: 0; font-size: 24px; }
    .cat_header .cat_description { display: block; color: var(--categories_description_color); font-size: 13px; padding: 0 0 0 1px }
    .category_flex { display: flex; width: 150px; align-items: center; justify-content: space-between; }
    .category_flex .new_num { color: var(--categories_new_color); font-size: 12px }

}


/*@media (orientation: portrait) {*/
@media only screen and (orientation: portrait) and (min-device-width: 428px) and (max-device-height: 926px) and (-webkit-device-pixel-ratio: 3) {

    .menu_header { position: relative; margin: 20px 0 25px 0; }
    .menu_header .link_h:link, .link_h:visited { background: #333 ; text-decoration: none;  padding: 5px 15px 7px 15px; border-radius: 4px; }
    menu { list-style: none; display: none; }
    menu li { display: inline; margin: 0 5px 0 0 }
    menu li:last-child { margin: 0 }
    menu .cat_dropdown { position: relative; background: var(--categories_menu_bg); color: var(--categories_menu_color); cursor: pointer; padding: 5px 10px 7px 15px; margin: 0 5px 0 0; border-radius: 4px; }
    menu .cat_dropdown-content { display: none; position: absolute; background: var(--categories_menu_bg); min-width: 160px; padding: 12px 16px; z-index: 1; left: 0; top: 25px }
    menu .cat_dropdown:hover .cat_dropdown-content { display: block; cursor: default;  }
    menu .cat_dropdown:hover .cat_dropdown-content ul { column-count: 2 }
    menu .cat_dropdown:hover .cat_dropdown-content ul li { display: block; }
    menu .cat_dropdown:hover .cat_dropdown-content ul li .cat_link:link, .cat_link:visited { color: var(--categories_menu_color); text-decoration: none; line-height: 190%; }

    .header_wrapper { position: fixed; top: 0; display: flex; z-index: 9999; width: 100%; background: var(--header_bg); backdrop-filter: blur(10px); padding: 14px 0; margin: 0 0 0 -10px }

    .header_flex { display: flex; align-items: center; justify-content: space-between; padding: 0 20px }
    .header_flex .logo { display: flex; gap: 12px; align-items: center; }
    .header_flex .logo .title_mysite { margin: -6px 0 -3px -2px; font-size: 3.5rem; }
    .header_flex .logo span { display: block;  color: var(--title_site_span); margin: -6px 0 0 0; font-size: 1.7rem }
    .header_flex .logo .avatar { --avatar_size: 135px; width: var(--avatar_size); height: var(--avatar_size); border-radius: 50%; overflow: hidden; }
    .header_flex .logo .avatar img { width: 100%; height: 100%; object-fit: cover; }



    .main_page { display: block; width: 100%; /*min-width: 900px*/ padding: 0 20px }
    .main_page_full { width: 100%; /*min-width: 900px;*/ height: 100dvh; padding: 0 20px; margin: 200px 0 0 0 }
    .main_page_full #allphoto { position: relative; }
    .main_page_full #allphoto .photocard { position: relative; margin: 0 0 40px 0; }
    .main_page_full #allphoto .photocard img { max-width: 990px; }
    .main_page_full #allphoto .photocard .name { font-weight: 500; }

    .grid_new_photos { --wh_size: 322px; display: grid; gap: 2px; grid-template-columns: repeat(3, var(--wh_size)); grid-template-rows: repeat(4, var(--wh_size)) ; /*width: 465px;*/ height: 1660px; margin: 20px 0; padding: 0 20px  }
    .grid_new_photos .photo { background-repeat: no-repeat; background-size: cover; background-position: 50% }
    .grid_new_photos .count_photo1 {  grid-area: 1 / 1 / 3 / 3; }
    .content { position: relative; /*width: 900px;*/ margin: 20px auto; }
}

/*@media (orientation: landscape) {*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
    /*Стиль применится при горизонтальной ориентации устройства*/
  }


.footer_job { position: relative; display: flex; flex-wrap: wrap; margin: 20px 0 25px 0; align-items: center; justify-content: space-between; }


.admin_dropdown { position: relative; background: var(--footer_admin_bgcolor); color: var(--footer_admin_color); cursor: pointer; padding: 2px 7px 5px 7px; font-size: 12px }
.admin_dropdown .admin_dropdown_content { display: none; position: absolute; background: var(--categories_menu_bg); min-width: 160px; padding: 12px 16px; z-index: 1; right: 0; bottom: 20px }
.admin_dropdown:hover .admin_dropdown_content { display: block; cursor: default;  }


#copyright { font-size: .7rem;  color: var(--footer_copyright_color)  }
#copyright .link_f { color: var(--footer_copyright_color_link)  }