@font-face {
    font-family: Fira Sans; /* Гарнитура шрифта */
    font-weight:400;
    src: url(img/FiraSansCondensed-Regular.ttf); /* Путь к файлу со шрифтом */
}
@font-face {
    font-family: Fira Sans; /* Гарнитура шрифта */
    font-weight:600;
    src: url(img/FiraSansCondensed-SemiBold.ttf); /* Путь к файлу со шрифтом */
}
[data-fn] {cursor: pointer}

html {	font-family: Fira Sans, Helvetica,Arial; padding:70px 0 0 0; font-size:16px; font-weight:400;}
body {padding:0 0 80px 0; margin:0; }
body,nav,footer{ margin:0 auto; position:relative; max-width: 800px;}


/*@media(min-width:700px) {
	html {font-size:20px;}
}
*/
h1 {margin-bottom:10px; }
h1,h2,h3 {color: #5a6279 ; margin-top:0; font-size:1.2em; font-weight:600; }
input,button,textarea {font-size:20px; width:100%; padding:5px; box-sizing: border-box; }

.button,button{background-color:#5a6279; color:white; border:none; padding:7px;width: 200px; margin: 10px auto; display:block;}
.button.red, button.red {background-color:#ba4232}

.map .img{ position:relative; background-size:contain; background-repeat: no-repeat; }
.map .place {position:absolute; z-index:100000;  width:6px; height:6px; overflow:hidden; background-size: cover; border-radius: 100px;  box-sizing: border-box; background-repeat: no-repeat; background-position: center center}

.map2 {overflow:scroll;}
.map2 .img{ position:relative; background-size:contain; background-repeat: no-repeat; width:2000px; height: 426px;}
.map2 .place {position:absolute; width:40px; height:40px; overflow:hidden; background-size: cover; border-radius: 100px;  box-sizing: border-box; background-repeat: no-repeat; background-position: center center}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none; // Yeah, yeah everybody write about it
}

input[type='number'],
input[type="number"]:hover,
input[type="number"]:focus {
    appearance: none;
    -moz-appearance: textfield;
}

footer {position:fixed; bottom:0; left:0; right:0; height:80px; background:#F6F8F5; display: flex; justify-content: space-around; align-items: center; text-align: center; font-size:0.8em; color:#5A6279;}
footer div {flex:1;}
footer img {height:40px;}

nav {height:40px; z-index:10; position:fixed; top:0; left:0; right:0; padding:10px 0; background:white;}
nav .sandwich {position:absolute; top:20px; right:20px; height:40px; width:100px; text-align:right;}
nav .back {position:absolute; top:20px; left:20px; height:40px; width:100px; }
nav .logo {display:block; margin: -5px auto; height:40px;}
nav .title {text-align:center; margin-top:8px; font-size:1.3em;}
nav .menu {display:none; }
nav .menu.open {display:flex; font-size:1em; background:white; z-index:10; margin-top:10px; height:100vh;}
nav .menu div {padding:20px;  text-align:center; box-sizing: border-box; }


.text {margin:10px;}

.instruction img {max-width:70%; display:block; margin:10px auto; border:1px solid black;}

.contacts { will-change: transform}
.contacts > div {display:flex; align-items: center;}
.contacts > div > div:nth-child(1) {flex-shrink: 0}
.contacts img {margin-right:20px; border-radius:100px; width:50px; height:50px; object-fit: cover;flex-shrink: 0}
.birthdays {margin:0;}
.birthdays .day {font-size:2em;}
.birthdays .date {width:80px;}
.birthdays .month {background-color:#5a6279; color:white; padding: 10px; font-size:1.2em;}

.officemap {padding:10px;}

.position {color:#8c8c8c;}

.flex {display:flex; align-items: flex-start;}


.items label{display:block; color:#81674a; margin-bottom:10px;}

.profile .dark {text-align:center; margin-bottom:20px; background-color: #fbfaff; padding:10px;}
.avatar {border-radius:100px; width:200px; height:200px; object-fit: cover}
.profile .edit_avatar_icon {width:30px; height:30px; position:absolute; right:30%;}

.spasibo {text-align:center; }
.spasibo .header {color:#81674a;}
.spasibo .blocks {display:flex; justify-content: space-around; margin:10px;font-size:0.8em; }
.spasibo img {vertical-align: sub;}

.items {display:flex; flex-direction: column; color:#5a6279;}
.items > *:nth-child(1) {border-top:1px solid #c8c7cc;}
.items > * {border-bottom:1px solid #c8c7cc; width:100%; padding:10px; box-sizing: border-box;}
.items a {color:inherit; text-decoration: none}

.restaurant .datestring {display: flex; justify-content: space-between; }

.auth {margin:50px; font-size:1.2em; }
.auth input {margin: 5px 0;}
body[state=auth] footer {display:none;}
body[state=auth] nav .back {display:none !important;}
body[state=auth] nav .sandwich {display:none;}

.main_birthday {background-image: url(/img/new_bg_1.jpg); background-size: cover; background-position: center center; color: white ; margin:10px; padding:20px;}
.main_birthday h2 {margin-bottom:0; color:inherit;}
.main_birthday .position {color:white;}
.main_birthday .avatar {border-radius:100px; width:100px; height:100px; object-fit: cover}

.main_news {padding:0px}
.main_news h2 {margin:10px 0 0 10px;}
.main_news .flex {flex-wrap: wrap;}

.main_mouse { background-position: center center; margin:10px; padding:0px; text-align: center;}
.main_mouse h2 { color:#ba4232;}

.mousepart {width:300px; height:338px; position:relative;}
.mousepart .fon {width:300px; height:338px; background-size: 300px 338px; background-repeat: no-repeat; filter: grayscale(100%);}
.mousepart.color1 .fon,.mousepart.color1 .part {background-image:url(mouses/1.png);}
.mousepart.color2 .fon,.mousepart.color2 .part {background-image:url(mouses/2.png);}
.mousepart.color3 .fon,.mousepart.color3 .part {background-image:url(mouses/3.png);}
.mousepart.color4 .fon,.mousepart.color4 .part {background-image:url(mouses/4.png);}
.mousepart.color5 .fon,.mousepart.color5 .part {background-image:url(mouses/5.png);}
.mousepart .part {background-image: inherit; width:100%; height: 68px; background-size: 300px 338px; position:absolute; }
.mousepart.part0 .part {background-position:0 calc(-68px * 0); top: calc(68px * 0);}
.mousepart.part1 .part {background-position:0 calc(-68px * 1); top: calc(68px * 1);}
.mousepart.part2 .part {background-position:0 calc(-68px * 2); top: calc(68px * 2);}
.mousepart.part3 .part {background-position:0 calc(-68px * 3); top: calc(68px * 3);}
.mousepart.part4 .part {background-position:0 calc(-68px * 4); top: calc(68px * 4);}
.blackpopup .count {font-size:1.5em;}
.blackpopup .last {font-size:0.5em;}

.main_newyear { text-align:center; padding: 20px 0; /*background:  #c8c9cd;*/}
.main_newyear h2 { color:#5b627c; font-size:2em; margin:0;}
.main_newyear h3 { margin:0;}
.main_newyear .inputs {display:flex; gap:15px; justify-content: center}
.main_newyear .inputs input {width:45px; height:45px; font-size:40px; text-align:center;}
.main_newyear img {max-width: 50vw;}
.main_newyear button {margin-top:0; margin-bottom:17px}
.main_newyear .sunduk {margin:20px;  background:white; padding:20px;}
.main_newyear .sunduk.sunduk1 {background:#bfe0f9;}
.main_newyear .sunduk.sunduk2 {background:#9ec1db;}
.main_newyear .sunduk.sunduk3 {background:#bfe0f9;}
.main_newyear .sunduk.sunduk4 {background:#9ec1db;}

.chat {padding:10px}


.comments .item {border-bottom: 1px solid #5a6279; padding: 20px 0 ; position:relative;}
.comments .removecomment {position: absolute; right:0; top:5px; width:20px; height:20px; background-image:url(/img/Close_icon.svg); background-size: cover}
.comments .commentform {padding: 20px 0 }
.comments .user {display:flex; margin-bottom: 20px;}
.comments .avatar {width:50px; height:50px; margin-right: 20px;}
.comments .date {color: #81674a ;}
.comments h3 {margin:0;}
 
.zen {flex:1; min-width: 300px; margin:0px 0px 20px 0px; background-size:cover; background-position: top center; background-repeat: no-repeat; border:1px solid white; height:300px; position:relative; overflow:hidden;}
.zen .shadow {background: linear-gradient(to bottom, transparent 0%,transparent 40%, #1F2041CC 60%, #1F2041CC 100%); padding:160px 20px 20px 20px; color:white; height:300px; box-sizing: border-box;}
.zen h3 {color:white; height:30px;}
.zen .announce {height:57px; overflow:hidden;}
.zen .date {position:absolute; bottom:10px ; right:20px;} 
.zen .counter {position:absolute; bottom:10px ; left:20px; padding-left:20px; background-image: url(/img/Comment_icon.svg); background-size:15px; background-repeat: no-repeat;}

	.zen {margin:10px;}

.phoneitem,.emailitem {position:relative;}
.phoneitem .whatsapp img {position:absolute; right: 65px; top:15px; }
.phoneitem .call img {position:absolute; right: 20px; top:15px; }
.emailitem .email img {position:absolute; right: 20px; top:15px; }
.phoneitem .vcard img {position:absolute; right: 111px; top:15px; width:38px}

.errorpopup {background-color:#0005; position:fixed; width:100%; height:100%; z-index:100000; top:0; left:0; flex-direction: column; justify-content:  center;display:none;}
.errorpopup .container{  background:white; padding:20px; text-align:center; border:1px solid #5a6279; }
.errorpopup .label {color: #5a6279 ; margin-top:0; font-size:1.2em; font-weight:600;  }
.errorpopup.open {display:flex;}

.alertpopup {background-color:#0005; position:fixed; width:100%; height:100%; z-index:100000; top:0; left:0; flex-direction: column; justify-content:  center;display:none;}
.alertpopup .container{  background:white; padding:20px; text-align:center; border:1px solid #5a6279; }
.alertpopup .label {color: #5a6279 ; margin-top:0; font-size:1.2em; font-weight:600;  }
.alertpopup.open {display:flex;}


.blackpopup {background-color:#000b; position:fixed; width:100%; height:100%; z-index:100000; top:0; left:0;flex-direction: column; justify-content:  center;display:none;}
.blackpopup .container{ padding:20px; text-align:center; color:white; font-size:1.8em;}
.blackpopup .label { margin-top:0;  font-weight:600;  }
.blackpopup.open {display:flex;}


.promptpopup {background-color:#0005; position:fixed; width:100%; height:100%; z-index:100000; top:0; left:0; flex-direction: column; justify-content:  center;display:none;}
.promptpopup .container{  background:white; padding:20px; text-align:center; border:1px solid #5a6279; }
.promptpopup .label {color: #5a6279 ; margin-top:0; font-size:1.2em; font-weight:600;  }
.promptpopup.open {display:flex;}
.promptpopup textarea {width:100%;}
.promptpopup input {width:20px;}

.likestat {display:flex; text-align:center; align-items: flex-end; font-size:10px;}
.likestat > div {width:8px;margin:2px;}
.likestat .line {background:gray; width:8px;}
.likestat .mon{ transform: rotate(-90deg); transform-origin: center center; margin-top:12px; }
.likestats {display:flex; justify-content: space-around;}
.likestats img {vertical-align: sub;}


.vote {background: #cedde9; padding:40px; margin-bottom:20px}
.vote .name {font-weight:bold; font-size:1.5rem;}
.vote .answer {margin-top:20px;box-sizing: border-box;}
.vote .answer .wrap1 { display:flex; justify-content: space-between; gap:10px; align-items: center;}
.vote .galka {background:white; width:25px; height:25px; border-radius:100px; border:2px solid gray }
.vote .galka.checked {background:green;background-image:url(/img/galka.png); background-size: 100%}

.vote .variant {flex:1; text-align: left; width:100%}
.vote .progresswrapper {width:calc(100% - 40px); background:white;margin-top:5px; margin-left: 40px; box-sizing: border-box;}
.vote .progress { height:10px; background:green;}