/*В этом файле с помощью медийных запросов определяется высота блока с картой, необходимая для работы прелоудера.
В index главной страницы этот файл должен подключаться после основного файла css.*/
/*Высота блока #visitors_map рассчитана для его ширины 100% для верхней границы ширины устройства в диапазоне (n*50px;[n+1]*50px) - т.е. для max возможной ширины в этом диапазоне*/
/*Эти значения высот оказываются немного больше фактической высоты карты, что обеспечивает небольшой запас блока по высоте и гарантирует, что картинка не обрежется*/
/*Сейчас на смартфоне сайдбар на главной отключен (@media screen and (max-device-width: 800px) в основном файле css) и блоку с картой нужно больше высоты, иначе он обрезается первым письмом*/
/*Удалить третью колонку, переопределяющую #visitors_map, если нужно показать сворачивающийся сайдбар на главной на смартах (например, там важное сообщение или реклама)*/
#map_wrapper{background-color:lightsteelblue;border-radius:1rem;overflow:hidden;} /*постепенное появление карты для избежания скачка*/
.appearance{animation: appear 5s;}
@keyframes appear {
	0% {opacity: 0;}
	20% {opacity: 0;}/*задержка для избежания скачка*/
    100% {opacity: 1;}
}

@media screen and (min-device-width: 50px)   {#visitors_map{height:38px;} #visitors_map.hidden_sidebar{height:50px;} #visitors_map{height:50px;}}/*для устройств с шириной экрана более 50px*/
@media screen and (min-device-width: 100px)  {#visitors_map{height:56px;} #visitors_map.hidden_sidebar{height:75px;} #visitors_map{height:75px;}}
@media screen and (min-device-width: 150px)  {#visitors_map{height:74px;} #visitors_map.hidden_sidebar{height:100px;} #visitors_map{height:100px;}}
@media screen and (min-device-width: 200px)  {#visitors_map{height:92px;} #visitors_map.hidden_sidebar{height:125px;} #visitors_map{height:125px;}}
@media screen and (min-device-width: 250px)  {#visitors_map{height:110px;} #visitors_map.hidden_sidebar{height:150px;} #visitors_map{height:150px;}}
@media screen and (min-device-width: 300px)  {#visitors_map{height:128px;} #visitors_map.hidden_sidebar{height:175px;} #visitors_map{height:175px;}}
@media screen and (min-device-width: 350px)  {#visitors_map{height:146px;} #visitors_map.hidden_sidebar{height:200px;} #visitors_map{height:200px;}}
@media screen and (min-device-width: 400px)  {#visitors_map{height:164px;} #visitors_map.hidden_sidebar{height:225px;} #visitors_map{height:225px;}}
@media screen and (min-device-width: 450px)  {#visitors_map{height:182px;} #visitors_map.hidden_sidebar{height:250px;} #visitors_map{height:250px;}}
@media screen and (min-device-width: 500px)  {#visitors_map{height:200px;} #visitors_map.hidden_sidebar{height:275px;} #visitors_map{height:275px;}}
@media screen and (min-device-width: 550px)  {#visitors_map{height:218px;} #visitors_map.hidden_sidebar{height:300px;} #visitors_map{height:300px;}}
@media screen and (min-device-width: 600px)  {#visitors_map{height:236px;} #visitors_map.hidden_sidebar{height:325px;} #visitors_map{height:325px;}}
@media screen and (min-device-width: 650px)  {#visitors_map{height:254px;} #visitors_map.hidden_sidebar{height:350px;} #visitors_map{height:350px;}}
@media screen and (min-device-width: 700px)  {#visitors_map{height:272px;} #visitors_map.hidden_sidebar{height:375px;} #visitors_map{height:375px;}}
@media screen and (min-device-width: 750px)  {#visitors_map{height:290px;} #visitors_map.hidden_sidebar{height:400px;} #visitors_map{height:400px;}}
@media screen and (min-device-width: 800px)  {#visitors_map{height:308px;} #visitors_map.hidden_sidebar{height:425px;}}
@media screen and (min-device-width: 850px)  {#visitors_map{height:326px;} #visitors_map.hidden_sidebar{height:450px;}}
@media screen and (min-device-width: 900px)  {#visitors_map{height:344px;} #visitors_map.hidden_sidebar{height:475px;}}
@media screen and (min-device-width: 950px)  {#visitors_map{height:362px;} #visitors_map.hidden_sidebar{height:500px;}}
@media screen and (min-device-width: 1000px) {#visitors_map{height:380px;} #visitors_map.hidden_sidebar{height:525px;}}
@media screen and (min-device-width: 1050px) {#visitors_map{height:398px;} #visitors_map.hidden_sidebar{height:550px;}}
@media screen and (min-device-width: 1100px) {#visitors_map{height:416px;} #visitors_map.hidden_sidebar{height:575px;}}
@media screen and (min-device-width: 1150px) {#visitors_map{height:434px;} #visitors_map.hidden_sidebar{height:600px;}}
@media screen and (min-device-width: 1200px) {#visitors_map{height:452px;} #visitors_map.hidden_sidebar{height:625px;}}
@media screen and (min-device-width: 1250px) {#visitors_map{height:470px;} #visitors_map.hidden_sidebar{height:650px;}}
@media screen and (min-device-width: 1300px) {#visitors_map{height:488px;} #visitors_map.hidden_sidebar{height:675px;}} /*this line works for my working laptop*/
@media screen and (min-device-width: 1350px) {#visitors_map{height:506px;} #visitors_map.hidden_sidebar{height:700px;}}
@media screen and (min-device-width: 1400px) {#visitors_map{height:524px;} #visitors_map.hidden_sidebar{height:725px;}}
@media screen and (min-device-width: 1450px) {#visitors_map{height:542px;} #visitors_map.hidden_sidebar{height:750px;}}
@media screen and (min-device-width: 1500px) {#visitors_map{height:560px;} #visitors_map.hidden_sidebar{height:775px;}}
@media screen and (min-device-width: 1550px) {#visitors_map{height:578px;} #visitors_map.hidden_sidebar{height:800px;}}
@media screen and (min-device-width: 1600px) {#visitors_map{height:596px;} #visitors_map.hidden_sidebar{height:825px;}}
@media screen and (min-device-width: 1650px) {#visitors_map{height:614px;} #visitors_map.hidden_sidebar{height:850px;}}
@media screen and (min-device-width: 1700px) {#visitors_map{height:632px;} #visitors_map.hidden_sidebar{height:875px;}}
@media screen and (min-device-width: 1750px) {#visitors_map{height:650px;} #visitors_map.hidden_sidebar{height:900px;}}
@media screen and (min-device-width: 1800px) {#visitors_map{height:668px;} #visitors_map.hidden_sidebar{height:925px;}}
@media screen and (min-device-width: 1850px) {#visitors_map{height:686px;} #visitors_map.hidden_sidebar{height:950px;}}
@media screen and (min-device-width: 1900px) {#visitors_map{height:704px;} #visitors_map.hidden_sidebar{height:975px;}}
@media screen and (min-device-width: 1950px) {#visitors_map{height:722px;} #visitors_map.hidden_sidebar{height:1000px;}}
@media screen and (min-device-width: 2000px) {#visitors_map{height:740px;} #visitors_map.hidden_sidebar{height:1025px;}}
@media screen and (min-device-width: 2050px) {#visitors_map{height:758px;} #visitors_map.hidden_sidebar{height:1050px;}}
@media screen and (min-device-width: 2100px) {#visitors_map{height:776px;} #visitors_map.hidden_sidebar{height:1075px;}}
@media screen and (min-device-width: 2150px) {#visitors_map{height:794px;} #visitors_map.hidden_sidebar{height:1100px;}}
@media screen and (min-device-width: 2200px) {#visitors_map{height:812px;} #visitors_map.hidden_sidebar{height:1125px;}}
@media screen and (min-device-width: 2250px) {#visitors_map{height:830px;} #visitors_map.hidden_sidebar{height:1150px;}}
@media screen and (min-device-width: 2300px) {#visitors_map{height:848px;} #visitors_map.hidden_sidebar{height:1175px;}}
@media screen and (min-device-width: 2350px) {#visitors_map{height:866px;} #visitors_map.hidden_sidebar{height:1200px;}}
@media screen and (min-device-width: 2400px) {#visitors_map{height:884px;} #visitors_map.hidden_sidebar{height:1225px;}}
@media screen and (min-device-width: 2450px) {#visitors_map{height:902px;} #visitors_map.hidden_sidebar{height:1250px;}}
@media screen and (min-device-width: 2500px) {#visitors_map{height:920px;} #visitors_map.hidden_sidebar{height:1275px;}}
@media screen and (min-device-width: 2550px) {#visitors_map{height:938px;} #visitors_map.hidden_sidebar{height:1300px;}}
@media screen and (min-device-width: 2600px) {#visitors_map{height:956px;} #visitors_map.hidden_sidebar{height:1325px;}}
@media screen and (min-device-width: 2650px) {#visitors_map{height:974px;} #visitors_map.hidden_sidebar{height:1350px;}}
@media screen and (min-device-width: 2700px) {#visitors_map{height:992px;} #visitors_map.hidden_sidebar{height:1375px;}}
@media screen and (min-device-width: 2750px) {#visitors_map{height:1010px;} #visitors_map.hidden_sidebar{height:1400px;}}
@media screen and (min-device-width: 2800px) {#visitors_map{height:1028px;} #visitors_map.hidden_sidebar{height:1425px;}}
@media screen and (min-device-width: 2850px) {#visitors_map{height:1046px;} #visitors_map.hidden_sidebar{height:1450px;}}
@media screen and (min-device-width: 2900px) {#visitors_map{height:1064px;} #visitors_map.hidden_sidebar{height:1475px;}}
@media screen and (min-device-width: 2950px) {#visitors_map{height:1082px;} #visitors_map.hidden_sidebar{height:1500px;}}
@media screen and (min-device-width: 3000px) {#visitors_map{height:1100px;} #visitors_map.hidden_sidebar{height:1525px;}}