@import "/design/css/newstyle.css";


html {
cursor: context-menu;
}


body{
    background: url(/design/img/diz/bg.png);
    background-color: #202020;
    background-attachment: fixed;
    font-family: 'Roboto', sans-serif !important;
    font-size: 12px;
    color: #0a0a0a;
	max-width: 550px;
    margin: auto;
    padding: 0px;
    word-wrap: break-word;
	position:relative;
}

img {
vertical-align: middle;
}

    #progress {
    width: 0%;
    height: 3px;
    background: #18385a;
    transition: width 500ms ease-out, opacity 400ms linear;
    }
	
	
	
body::-webkit-scrollbar {
width: 6px;
}
body::-webkit-scrollbar-track {
background: #1f1f1f;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
body::-webkit-scrollbar-thumb {
border-radius: 20px;
border: 3px solid #18385a;
}

body::-webkit-scrollbar-thumb:hover {
border: 3px solid #1c4e84;
}


textarea {
        resize: none;
	display: block;
	max-width: 100%;
        min-width: 100%;
        box-sizing: border-box;
	padding: 10px;
	border: solid 1px #2f4f4f;
        border-radius: 5px;
	background-color: #c0c0c0;
	min-height: 54px;
	font-size: 14px; 
	line-height: 1.2;
        margin: 0 0 5px 0;
		
}


textarea:focus, input:focus{
outline: none;
}

a
{
text-decoration: none;
color: #fff;
cursor: pointer;	
}
hr {
    width: 95%;
    border: 1px solid #191919;
}

table
{
	width:100%;
}


input
{
	max-width: 550px;
}


ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  width: 100%;
}

li {
  float: left;
}


@font-face{
    font-family: 'stalker';
    src: url(/design/fonts/stalker.ttf);
}

@font-face{
    font-family: 'veneer';
    src: url(/design/fonts/veneer.ttf);
}



@font-face{
    font-family: 'stalker2';
    src: url(/design/fonts/stalker2.ttf);
}




 #greenBar {
  width: 0%;
      height: 4px;
    background-color: #193a21;
    text-align: center;
    line-height: 30px;
    color: white;
	display:none;
}



.error
{
	background: url(/design/img/diz/byttonaw.png) no-repeat right top;
    display: block;
    background-color: #a64141;
    background-size: contain;
    color: #fff;
    padding: 8px;
    border-left: 3px solid #762c2c;
	font-family: stalker2;
    font-size: 15px;
}

.event {
	display: block;
    background-color: #0a0a0a;
    background-size: contain;
    color: #fff;
    padding: 3px;
    border-left: 3px solid #2c7754;
}

.yevent {
	display: block;
    background-color: #a7813b;
    background-size: contain;
    color: #101010;
    padding: 6px;
    /* border-left: 3px solid #2c7754; */
    text-align: center;
}

.error2
{
    display: block;
    background-color: #a64141;
    background-size: contain;
    color: #fff;
    padding: 8px;
    border-left: 3px solid #762c2c;
font-family: stalker2;
    font-size: 15px;	
}

.ok
{
	background: url(/design/img/diz/byttonaw.png) no-repeat right top;
    display: block;
    background-color: #193a21;
    background-size: contain;
    color: #fff;
    padding: 8px;
    border-left: 3px solid #0e2e16;
font-family: stalker2;
    font-size: 15px;	
}


.ok2
{
    display: block;
    background-color: #193a21;
    background-size: contain;
    color: #fff;
    padding: 8px;
    border-left: 3px solid #0e2e16;	
	font-family: stalker2;
    font-size: 15px;
}

.uvedomlenie
{
	background: url(/design/img/diz/mailuv.png) no-repeat right top;
    display: block;
    background-color: #9f8231;
    background-size: contain;
    color: #fff;
    padding: 8px;
    border-left: 3px solid #6c5618;
	font-family: stalker2;
    font-size: 15px;
}

.uvedomlenieforum
{
	display: block;
	background-color: #0a0a0a;
	background-size: contain;
	color: #fff;
	padding: 8px;
	border-left: 3px solid #0e2c15;
}





.buttongreen
{
    background: #193a21;
    border: none;
    color: #fff;
    padding: 9px;
    border-radius: 8px;
}

.buttonblue
{
    background: #1d4869;
    border: none;
    color: #fff;
    padding: 9px 30px;
    border-radius: 4px;
}

.form-row {
   position: relative;
   margin-bottom: 40px;
}
.form-row input {
display: block;
    width: 100%;
    line-height: 30px;
    font-family: 'Roboto', sans-serif;
    background: none;
    border-width: 0;
    border-bottom: 2px solid #3c3c3c;
    transition: all 0.2s ease;
	color: #bababa;
    font-size: 15px;
}
.form-row label {
  
position: absolute;
    left: 8px;
    color: #fff;
    font-size: 15px;
    font-weight: 200;
    margin: -45px -14px;
}



.imgrbuttona {
 padding: 10px;
    background-repeat: round;
    background: url(/design/img/diz/byttona.png) no-repeat right top;
    display: block;
    background-color: #bababa;
    background-size: contain;
    box-shadow: 1px 2px 5px 0px rgb(10 67 25 / 59%);
    color: #1d1d1d;
    cursor: pointer;
    border: none;
	width: 100%;
	font-weight: 700;
}



.imgrbuttona:hover {
	background-repeat: round;
	background: url(/design/img/diz/byttona.gif) no-repeat right top;
	background-color: #bababa;
    background-size: contain;
}



.divbigtext { 
    background-repeat: round;
    background: url(/design/img/diz/logomin.png) no-repeat center top;
    display: block;
    background-size: contain;
}


.modal-block {
display:none;
}
.modal-block2 {
display:none;
}
.modal-block:before {
	content: '';
	background: #000;
	position: fixed; 
	left: 0;
	top: 0;
	width: 100%; 
	height: 100%;
	opacity: 0.7;
	z-index: 9999;
}

.modal-block2:before {
	content: '';
	background: #000;
	position: fixed; 
	left: 0;
	top: 0;
	width: 100%; 
	height: 100%;
	opacity: 0.7;
	z-index: 9999;
}


.modal2 {
    position: fixed;
    transform: translate(-50%, -35%);
    border-radius: 4px;
    z-index: 99999;
    top: 37%;
    left: 50%;
}


.password {
	position: relative;
}
.password-control {
	position: absolute;
	top: 11px;
	right: 6px;
	display: inline-block;
	width: 20px;
	height: 20px;
	background: url(/design/img/diz/view.png) 0 0 no-repeat;
}
.password-control.view {
	background: url(/design/img/diz/no-view.png) 0 0 no-repeat;
}

.header {
    background: #0a0a0a;
}


.ava
{
    margin: 1px 4px 0px 4px;
border: 5px solid rgb(18 16 16);
}

.staty
{
	width: 20px;height: 20px;padding: 3px 0px;margin: 0px 15px;
}

.panelicon
{
margin: -7px 7px;
}


.header_procent1 {
    background: #191919;
    padding: 6.5px 0px;
    margin: 0px 2px;
    border-radius: 4px;
    display: block;
    color: #b2b2b2;
}








.bodyr2 {
    background-color: #030303;
}


.textareamail {
    border: none;
    background: #242424;
    padding-left: 10px;
    padding-right: 10px;
    min-width: 100%;
    max-width: 100%;
    border-radius: 5px 5px 0px 0px;
    margin: 8px 0px 0px 0px;
    min-height: 40px;
    height: 40px;
    color: #fff;
}

.textareamail:focus
{
	 border: none;
}

.butttuchblock {
    border: none;
    font-size: 12px;
    padding: 14px;
    margin: 0px;
    width: 100%;
    cursor: pointer;
    background: #bababa;
}
.butttuchblock:hover
{
	
    background: #9c9c9c;
	
}

.lia {
    display: block;
    color: #000000;
    text-align: center;
    padding: 5px 16px;
    text-decoration: none;
}

.lia:hover {
    background: #9c9c9c;
}

.lia2 {
    display: block;
    color: #000000;
    text-align: center;
    padding: 5px 16px;
    text-decoration: none;
	border-radius: 0px 0px 0px 5px;
}

.lia2:hover {
    background: #9c9c9c;
}


.lia3 {
    display: block;
    color: #000000;
    text-align: center;
    padding: 5px 16px;
    text-decoration: none;
	 background: #9c9c9c;
}





.touch_contact {
    display: block;
    overflow: hidden;
    overflow-wrap: break-word;
    padding: 4px 12px 3px 6px;
    border-radius: 4px;
    margin: 0px 0px 3px 0px;
    border-bottom: 2px solid #000000;
    border-top: 2px solid #000000;
    background: #191919;
    color: #e5e9e7;
}

.touch_contact_a {
    display: block;
    overflow: hidden;
    overflow-wrap: break-word;
    padding: 4px 12px 3px 6px;
    border-radius: 4px;
    margin: 0px 0px 3px 0px;
    border-bottom: 2px solid #000000;
    border-top: 2px solid #000000;
    background: #191919;
    color: #e5e9e7;
}

.touch_contact_a:hover{
    background: #131313;	
}





.msgblock1 {
    border-top: 1px solid #1f1f1f;
    border-right: 1px solid #1f1f1f;
    border-left: 1px solid #1f1f1f;
    padding: 10px;
    background: #242424;
    border-radius: 12px 12px 0px 0px;
    color: #bababa;
    margin-right: -5px;
    margin-top: 3px;
}







.msgblock2
{
    text-align: center;
    margin-top: 0px;
    border-left: 1px solid #0a0a0a;
    border-right: 1px solid #0a0a0a;
    background: #0a0a0a;
    border-bottom: 1px solid #0a0a0a;
    font-size: 10px;
    color: #666666;
    margin-right: -5px;
    padding: 8px 0px;
}

.msglvl
{
    background: #0a0a0a9e;
    padding: 2px 9px;
    border-radius: 5px;
    box-shadow: 0px 1px 1px 0px #193a21;
}


.msglogi
{
	    float: left;
    justify-content: center;
    align-items: center;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    display: inline-flex;
    margin: 4px 4px 0px -8px;
}

.moneybar
{
background: #bababa;color: #101010;padding: 5px;
}

.moneybar2
{
	background: #1f1f1f;
padding: 4px;
border-radius: 12px;
margin: 0px 6px;
border: 2px solid #302d2c;
color: #ddd;
}






.mappanel1_0{
    background: #191919;
    padding: 5px 0px;
}

.mappanel1_0:hover{
    background: #131313;
}

.mappanel1_1{
    background: #193a21;
    padding: 5px 0px;
}

.mappanel1_1:hover{
    background: #142d1a;
}

.mappanel2_0{
    background: #191919;
    padding: 5px 0px;
}

.mappanel2_0:hover{
    background: #131313;
}

.mappanel2_1{
    background: #622d2a;
    padding: 5px 0px;
}

.mappanel2_1:hover{
    background: #552623;
}

.menu
{
border: 7px solid #0a0a0a;
    background: #0a0a0a;	
}


.knopkablyat1{
    background: #191919;
	font-weight: 600;
    padding: 7px 0px;
}

.knopkablyat1:hover{
    background: #131313;
}

.knopkablyat2{
    background: #999999;
    color: #0a0a0a;
    font-weight: 600;
    padding: 7px 0px;
}

.knopkablyat4{
    background: #ededed;
    color: #0a0a0a;
    font-weight: 600;
    padding: 7px 0px;
}


.knopkablyat3{
    background: #121212;
	font-weight: 600;
    padding: 7px 0px;
}

.knopkablyat3:hover{
    background: #0e0e0e;
}


.inputp1
{
	background: #242424;width: 100%;padding: 7px 12px;border: none;border-radius: 3px 0px 0px 3px;color: #bababa;
}

.inputp2
{
	border: none;
    background: #191919;
    color: #bababa;
    padding: 4px 9px;
    margin: 7px 5px;
    border-radius: 4px;
}


.inputb1
{
	background: #193a21;
	border: none;
	color: #fff;
	border-radius: 0px 3px 3px 0px;
	padding: 7px 0px;
	width: 100%;
	cursor: pointer;
}

.inputb2
{
	background: #193a21;
	border: none;
	color: #fff;
	border-radius: 0px 0px 5px 5px;
	padding: 7px 0px;
	width: 100%;
	cursor: pointer;
}


.inputb1:hover
{
	background: #14301b;
}



.indexblock_nohover {
    background: #191919;
    padding: 9px 0px;
    margin: 4px;
    color: #ededed;
    border-radius: 4px;
    display: block;
}

.indexblock_nohover2 {
    background: #191919;
    padding: 9px 8px;
    margin: 4px;
    color: #ededed;
    border-radius: 4px;
    display: block;
}



.indexblock3 {
    background: #0e2c15;
    padding: 9px 0px;
    margin: 4px;
    color: #ededed;
    border-radius: 4px;
    display: block;
}

.indexblock3:hover {
    background: #131313;
}

.countpda
{
border-radius: 4px;padding: 2px 3px;background: #0a0a0a;margin: -25px 3px 0px 0px;float: right;
}

.dlyatexta
{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media screen and (max-width: 1020px){
.blok_bok_box1-right {
    display:none;
}
.blok_bok_box-left{
    display:none;
}
}

.col_foot{
background: url(/design/img_css/col1_ramka1.png) repeat-x bottom;		
text-align:center;	
font-size: 12px;
color: #fff;
padding:10px;
position:relative;
}

.col_top{
background: url(/design/img_css/col1_ramka.png) repeat-x bottom;		
text-align:center;	
font-size: 12px;
color: #fff;
padding:10px;
position:relative;
}

.col{
background: url(/design/img_css/cols.png) repeat-y center;
padding: 0px 20px;
}

.blok_bok {
    position: absolute;
    width: 230px;
    top: 0;
    z-index: 9;
    left: -235px;   
}


.blok_bok1 {
    position: absolute;
    width: 230px;
    top: 0;
    z-index: 9;   
    right: -235px;
}




.predmethead
{
background: #191919;
    color: #fff;
    font-size: 21px;
    font-family: veneer;
    padding: 3px 0px;
}

.predmetcenter
{
background: #121212;
color: #fff;
padding: 0px 10px 10px 10px;

}


.admredpredmet
{
width: 50%;
background: #121212;
padding: 7px 0px;
color: #fff;
cursor: pointer;
border-bottom: 1px solid #191919;
}
.admredpredmet:hover
{
background: #1c1c1c;	
}

.imgclass {
    transform: rotate(271deg) translateX(-100%);
    transform-origin: 0 0;
    position: relative;
    left: 30%;
    width: 200px;
}


.flex-container-medal {
background: #121212a8;
    display: flex;
    padding: 3px;
    flex-wrap: wrap;
    justify-content: center;
    box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);

}
.medal
{
    background: #121212;
    border-radius: 4px;
    padding: 4px;
    width: 45px;
    margin: 3px;
}


.profilegp
{
 background: #191919; 
}



.invent
{
background: #191919;
    padding: 12px 0px 10px 0px;
    margin: 5px;
    color: #ededed;
    border-radius: 4px;
    display: block;
    width: 58px;
    text-align: center;
}

.invent:hover {
    background: #131313;
}

.predmendg
{
    background: #0a0a0a;
    padding: 9px 12px;
    margin: 0px 4px 5px 3px;
    display: block;
    border-radius: 4px;
}


.predmendr
{
    background: #0a0a0a;
    padding: 9px 12px;
    margin: 0px 4px 5px 3px;
    display: block;
    border-radius: 4px;
}

.predmend
{
    background: #0a0a0a;
    padding: 9px 12px;
    margin: 0px 4px 5px 3px;
    display: block;
    border-radius: 4px;
}
.predmend:hover
{
background: #5a5a5a;		
}


.predmendg:hover
{
background: #193a21;		
}

.predmendr:hover
{
background: #722626;		
}

.buttonred
{
	background: #663030;
    color: #fff;
    padding: 7px 12px;
    margin: 0px 6px 11px 6px;
    border-radius: 4px;
}
.buttonred:hover
{
background: #723434;		
}



.buttongreen2
{
	background: #193a21;
    color: #fff;
    padding: 7px 12px;
    margin: 0px 6px 11px 6px;
    border-radius: 4px;
}
.buttongreen2:hover
{
background: #193420;		
}


.budondell1
{
    display: block;
    text-align: center;
    padding: 10px 0px;
    background: #783838;
}

.budondell1:hover
{
background: #642b2b;		
}

.budondell2
{
    display: block;
    text-align: center;
    padding: 10px 0px;
    background: #4c4c4c;
}

.budondell2:hover
{
background: #2c2c2c;		
}


.mapbuttonred
{
    border: none;
    background: #193a21;
    padding: 5px 17px;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
}


.mapbutton
{
    background: #191919;
    padding: 9px 12px;
    margin: 0px 4px 5px 3px;
    display: block;
    border-radius: 4px;
}

.mapbutton:hover
{
background: #193a21;		
}


.takeall
{
    padding: 1px 8px;
    border-radius: 4px;
    background: #783838;
}

.takeall:hover
{
background: #642b2b;		
}



.opros
{
    display: block;
    background: #191919;
    padding: 7px 0px 7px 5px;
    border-radius: 4px;
    margin: 0px 6px 6px  4px;
    cursor:pointer;
}

.opros:hover
{
  background: #161616;  
    }
    
    
    .opros2
{
    background: #191919;
    padding: 7px 0px 7px 5px;
    border-radius: 4px;
    margin: 0px 6px 6px  4px;
}






.ruletebutton
{
background: #191919;padding: 8px 20px;margin: 6px;border-radius: 4px;cursor: pointer;	
}

.ruletebutton:hover
{
background: #193a21;
}

.blink {
 animation-name: blinker;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-duration: 2s;
  -webkit-animation-name: blinker2;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-duration: 1.5s;
}




.indexblockfight
{
	
	background: #191919;
    margin: 4px;
    color: #ededed;
    border-radius: 4px;
    display: block;
	border: 1px solid #191919;
}

.indexblockfight2
{
	
	background: #191919;
    margin: 4px;
    color: #ededed;
    border-radius: 4px;
    display: block;
	border: 1px solid #191919;
}


.indexblockfight:hover {
    background: #191919;
	border: 1px solid #082716;
	
}

.strelka1
{
background: #121212a8;
    color: #fff;
    margin: 2px 0px 0px 0px;
    padding: 0px 0px;
    border-radius: 4px;
    display: block;

}

.strelka2
{
background: #121212a8;
    color: #fff;
    margin: 2px 0px 0px 0px;
    padding: 0px 0px;
    border-radius: 4px;
    display: block;

}





 
@keyframes blinker {
  from { background: #0e2c15; }
  to { background: #18385a; }
}
 
@-webkit-keyframes blinker {
  from { background: #0e2c15; }
  to { background: #18385a; }
}


.blink2 {
 animation-name: blinker2;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-duration: 2s;
  -webkit-animation-name: blinker2;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-duration: 1.5s;
}



.buttonvhodgp
{
    background: #193a21;
    padding: 10px 0px;
    border-radius: 4px;
    margin: 11px 10px 2px 10px;
    display: block;
    text-align: center;
}

.buttonvhodgp:hover
{
    background: #142e1b;
}


 
@keyframes blinker2 {
  from { background: #191919; }
  to { background: #18385a; }
}
 
@-webkit-keyframes blinker2 {
  from { background: #191919; }
  to { background: #18385a; }
}


.blink3 {
 animation-name: blinker3;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-duration: 2s;
  -webkit-animation-name: blinker3;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-duration: 1.5s;
}
@keyframes blinker3 {
  from { background: #deae43; color: #4c4c4c;}
  to { background: #4c4c4c; color: #d0d0d0;}
}
 
@-webkit-keyframes blinker3 {
  from { background: #deae43; color: #4c4c4c;}
  to { background: #4c4c4c; color: #d0d0d0;}
}



.blink_chat {
 animation-name: blinkerc;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-duration: 2s;
  -webkit-animation-name: blinkerc;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-duration: 2s;
}
 
@keyframes blinkerc {
  from { box-shadow: inset 0px 0px 12px 6px rgb(24 56 90); }
  to { box-shadow: inset 0px 0px 0px rgb(24 56 90); }
}
 
@-webkit-keyframes blinkerc {
  from { box-shadow: inset 0px 0px 12px 6px rgb(24 56 90); }
  to { box-shadow: inset 0px 0px 0px rgb(24 56 90); }
}



.pvpwidth1
{
width:18%	
}


.pvpwidth2
{
width: 82%;	
}

@media screen and (max-width: 380px){
	
	
.pvpwidth1
{
display:none;
}


.pvpwidth2
{
width: 100%;	
}	
	
	
	
.phonenone{
display:none;
   	
}
}

@media screen and (max-width: 500px){
.inputphone100{
width: -webkit-fill-available;	
}
}


@media screen and (max-width: 290px){
.phonenone2{
display:none;  	
}
}

.marginpredmet{
margin: 20% 0;
}
@media screen and (max-width: 365px){
.marginpredmet{
margin: 10% 0;
}
}


@media screen and (max-width: 410px){
.phonenone3{
display:none;
   	
}
}



@media screen and (max-width: 530px){
.phonenone4{
display:none;
   	
}
}
@media screen and (min-width: 530px){
.phonenone5{
display:none;
   	
}
}


	.fight-container-boy {
    display: flex;
    flex-wrap: nowrap;
    background-color: #bababa;
    background-size: contain;
    box-shadow: 1px 2px 5px 0px rgb(10 67 25 / 59%);
    align-items: center;
    justify-content: center;
	color: #1d1d1d;
}

.fight-boy {
    position: relative;
    padding: 2px;
    margin: 0px 3px 0px 3px;
    width: 35%;
}

.fight-boy-center {
}

.strel-flex {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
}

.str-lk {
    margin: 0px 3px 0px 3px;
    display: inline-block;
}


.hp_css {
	display:none;
	position: absolute;
	border: solid 1px #2f0404;
    background: red;
    border-radius: 30px;
    padding: 4px;
    font-size: 10px;
	margin: 22px 0px 0px 9px;
	color:white;
}




.navup
{
	
	
    display: block;
    text-align: center;
    background: #18385a;
    padding: 4px 0px;
    border-radius: 4px;

	
}









.indexbloc {
    background: #191919;
    padding: 9px 0px;
    margin-right: 2px;
    color: #ededed;
    /* border-radius: 4px; */
    display: block;

}
.indexbloc2 {
    background: #a35817;
    padding: 9px 0px;
    margin-right: 2px;
    color: #ededed;
    /* border-radius: 4px; */
    display: block;

}
.indexbloc3 {
    background: #8f490c;
    padding: 9px 0px;
    margin-right: 2px;
    color: #ededed;
    /* border-radius: 4px; */
    display: block;

}

.indexbloc4 {
    background: #8f490c;
    padding: 12px 0px;
    margin-right: 2px;
    color: #ededed;
    /* border-radius: 4px; */
    display: block;
}

.indexbloc3_lock {
    background: #8f490c;
    padding: 1px 0px;
    margin-right: 2px;
    color: #ededed;
    /* border-radius: 4px; */
    display: block;
	/*background: url(/design/img/ivent/lock.png);
	    background-position: 79px 0px;
		background-repeat: no-repeat;
		background-color: #8f490c;*/

}

.indexblockq {
    background: #191919;
    padding: 9px 0px;
    margin: 0px;
    color: #ededed;
    border-radius: 4px;
    display: block;
	width:100%;
}

.flex-container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
}

  .tested{
	width: 50%;
  }












.navup:hover{
	background: #132e4b;
}

.expandableContainer {
    position: relative;
}
.expandableContainer img {
    position: absolute;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    cursor: pointer;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s, width 0.3s, height 0.3s;
    transition: transform 0.3s, opacity 0.3s, width 0.3s, height 0.3s;
}
.expandableContainer img.menu {
    z-index: 100;
    opacity: 1;
    margin-left: -9px;
    margin-top: -9px;
    padding: 1px;
    background: #fff;
    border-radius: 25px;
}
.expandableContainer img.menu.active {
    opacity: 0.8;
    -webkit-transform: scale3d(0.8,0.8,1);
    transform: scale3d(0.8,0.8,1);
}
.expandableContainer img.menu.active + .menuConverted img.option {
    z-index: 110;
}
.expandableContainer img.menu.active + .menuConverted img {
    z-index: 1000;
    height: 32px;
    width: 32px;
}
.expandableContainer img.menu.active + .menuConverted img:hover {
    opacity: 0.9;
    height: 37px !important;
    width: 37px !important;
}

div.expandableContainer.ten img.menu.active + .menuConverted img.option:nth-child(1) {
    -webkit-transform: translate3d(0px, -66px, 0);
    transform: translate3d(0px, -66px, 0);
}
div.expandableContainer.ten img.menu.active + .menuConverted img.option:nth-child(2) {
    -webkit-transform: translate3d(35px, -50px, 0);
    transform: translate3d(35px, -50px, 0);
}
div.expandableContainer.ten img.menu.active + .menuConverted img.option:nth-child(3) {
    -webkit-transform: translate3d(60px, -21px, 0);
    transform: translate3d(60px, -21px, 0);
}
div.expandableContainer.ten img.menu.active + .menuConverted img.option:nth-child(4) {
    -webkit-transform: translate3d(60px, 20px, 0);
    transform: translate3d(60px, 20px, 0);
}
div.expandableContainer.ten img.menu.active + .menuConverted img.option:nth-child(5) {
    -webkit-transform: translate3d(35px, 50px, 0);
    transform: translate3d(35px, 50px, 0);
}
div.expandableContainer.ten img.menu.active + .menuConverted img.option:nth-child(6) {
    -webkit-transform: translate3d(0px, 65px, 0);
    transform: translate3d(0px, 65px, 0);
}
div.expandableContainer.ten img.menu.active + .menuConverted img.option:nth-child(7) {
    -webkit-transform: translate3d(-35px, 50px, 0);
    transform: translate3d(-35px, 50px, 0);
}
div.expandableContainer.ten img.menu.active + .menuConverted img.option:nth-child(8) {
    -webkit-transform: translate3d(-60px, 20px, 0);
    transform: translate3d(-60px, 20px, 0);
}
div.expandableContainer.ten img.menu.active + .menuConverted img.option:nth-child(9) {
    -webkit-transform: translate3d(-60px, -21px, 0);
    transform: translate3d(-60px, -21px, 0);
}
div.expandableContainer.ten img.menu.active + .menuConverted img.option:nth-child(10) {
    -webkit-transform: translate3d(-35px, -51px, 0);
    transform: translate3d(-35px, -51px, 0);
}

div.expandableContainer.nine img.menu.active + .menuConverted img.option:nth-child(1) {
    -webkit-transform: translate3d(0px, -55px, 0);
    transform: translate3d(0px, -55px, 0);
}
div.expandableContainer.nine img.menu.active + .menuConverted img.option:nth-child(2) {
    -webkit-transform: translate3d(35px, -40px, 0);
    transform: translate3d(35px, -40px, 0);
}
div.expandableContainer.nine img.menu.active + .menuConverted img.option:nth-child(3) {
    -webkit-transform: translate3d(55px, -5px, 0);
    transform: translate3d(55px, -5px, 0);
}
div.expandableContainer.nine img.menu.active + .menuConverted img.option:nth-child(4) {
    -webkit-transform: translate3d(45px, 32px, 0);
    transform: translate3d(45px, 32px, 0);
}
div.expandableContainer.nine img.menu.active + .menuConverted img.option:nth-child(5) {
    -webkit-transform: translate3d(20px, 55px, 0);
    transform: translate3d(20px, 55px, 0);
}
div.expandableContainer.nine img.menu.active + .menuConverted img.option:nth-child(6) {
    -webkit-transform: translate3d(-20px, 55px, 0);
    transform: translate3d(-20px, 55px, 0);
}
div.expandableContainer.nine img.menu.active + .menuConverted img.option:nth-child(7) {
    -webkit-transform: translate3d(-45px, 32px, 0);
    transform: translate3d(-45px, 32px, 0);
}
div.expandableContainer.nine img.menu.active + .menuConverted img.option:nth-child(8) {
    -webkit-transform: translate3d(-55px, -5px, 0);
    transform: translate3d(-55px, -5px, 0);
}
div.expandableContainer.nine img.menu.active + .menuConverted img.option:nth-child(9) {
    -webkit-transform: translate3d(-35px, -40px, 0);
    transform: translate3d(-35px, -40px, 0);
}

div.expandableContainer.eight img.menu.active + .menuConverted img.option:nth-child(1) {
    -webkit-transform: translate3d(23px, -45px, 0);
    transform: translate3d(23px, -45px, 0);
}
div.expandableContainer.eight img.menu.active + .menuConverted img.option:nth-child(2) {
    -webkit-transform: translate3d(50px, -20px, 0);
    transform: translate3d(50px, -20px, 0);
}
div.expandableContainer.eight img.menu.active + .menuConverted img.option:nth-child(3) {
    -webkit-transform: translate3d(50px, 20px, 0);
    transform: translate3d(50px, 20px, 0);
}
div.expandableContainer.eight img.menu.active + .menuConverted img.option:nth-child(4) {
    -webkit-transform: translate3d(23px, 45px, 0);
    transform: translate3d(23px, 45px, 0);
}
div.expandableContainer.eight img.menu.active + .menuConverted img.option:nth-child(5) {
    -webkit-transform: translate3d(-23px, 45px, 0);
    transform: translate3d(-23px, 45px, 0);
}
div.expandableContainer.eight img.menu.active + .menuConverted img.option:nth-child(6) {
    -webkit-transform: translate3d(-50px, 20px, 0);
    transform: translate3d(-50px, 20px, 0);
}
div.expandableContainer.eight img.menu.active + .menuConverted img.option:nth-child(7) {
    -webkit-transform: translate3d(-50px, -20px, 0);
    transform: translate3d(-50px, -20px, 0);
}
div.expandableContainer.eight img.menu.active + .menuConverted img.option:nth-child(8) {
    -webkit-transform: translate3d(-23px, -45px, 0);
    transform: translate3d(-23px, -45px, 0);
}

div.expandableContainer.seven img.menu.active + .menuConverted img.option:nth-child(1) {
    -webkit-transform: translate3d(0px, -50px, 0);
    transform: translate3d(0px, -50px, 0);
}
div.expandableContainer.seven img.menu.active + .menuConverted img.option:nth-child(2) {
    -webkit-transform: translate3d(40px, -30px, 0);
    transform: translate3d(40px, -30px, 0);
}
div.expandableContainer.seven img.menu.active + .menuConverted img.option:nth-child(3) {
    -webkit-transform: translate3d(45px, 10px, 0);
    transform: translate3d(45px, 10px, 0);
}
div.expandableContainer.seven img.menu.active + .menuConverted img.option:nth-child(4) {
    -webkit-transform: translate3d(25px, 45px, 0);
    transform: translate3d(25px, 45px, 0);
}
div.expandableContainer.seven img.menu.active + .menuConverted img.option:nth-child(5) {
    -webkit-transform: translate3d(-25px, 45px, 0);
    transform: translate3d(-25px, 45px, 0);
}
div.expandableContainer.seven img.menu.active + .menuConverted img.option:nth-child(6) {
    -webkit-transform: translate3d(-45px, 10px, 0);
    transform: translate3d(-45px, 10px, 0);
}
div.expandableContainer.seven img.menu.active + .menuConverted img.option:nth-child(7) {
    -webkit-transform: translate3d(-40px, -30px, 0);
    transform: translate3d(-40px, -30px, 0);
}

div.expandableContainer.six img.menu.active + .menuConverted img.option:nth-child(1) {
    -webkit-transform: translate3d(0px, -50px, 0);
    transform: translate3d(0px, -50px, 0);
}
div.expandableContainer.six img.menu.active + .menuConverted img.option:nth-child(2) {
    -webkit-transform: translate3d(45px, -20px, 0);
    transform: translate3d(45px, -20px, 0);
}
div.expandableContainer.six img.menu.active + .menuConverted img.option:nth-child(3) {
    -webkit-transform: translate3d(45px, 25px, 0);
    transform: translate3d(45px, 25px, 0);
}
div.expandableContainer.six img.menu.active + .menuConverted img.option:nth-child(4) {
    -webkit-transform: translate3d(0px, 50px, 0);
    transform: translate3d(0px, 50px, 0);
}
div.expandableContainer.six img.menu.active + .menuConverted img.option:nth-child(5) {
    -webkit-transform: translate3d(-45px, 25px, 0);
    transform: translate3d(-45px, 25px, 0);
}
div.expandableContainer.six img.menu.active + .menuConverted img.option:nth-child(6) {
    -webkit-transform: translate3d(-45px, -20px, 0);
    transform: translate3d(-45px, -20px, 0);
}

div.expandableContainer.five img.menu.active + .menuConverted img.option:nth-child(1) {
    -webkit-transform: translate3d(0px, -50px, 0);
    transform: translate3d(0px, -50px, 0);
}
div.expandableContainer.five img.menu.active + .menuConverted img.option:nth-child(2) {
    -webkit-transform: translate3d(50px, -20px, 0);
    transform: translate3d(50px, -20px, 0);
}
div.expandableContainer.five img.menu.active + .menuConverted img.option:nth-child(3) {
    -webkit-transform: translate3d(35px, 40px, 0);
    transform: translate3d(35px, 40px, 0);
}
div.expandableContainer.five img.menu.active + .menuConverted img.option:nth-child(4) {
    -webkit-transform: translate3d(-35px, 40px, 0);
    transform: translate3d(-35px, 40px, 0);
}
div.expandableContainer.five img.menu.active + .menuConverted img.option:nth-child(5) {
    -webkit-transform: translate3d(-50px, -20px, 0);
    transform: translate3d(-50px, -20px, 0);
}

div.expandableContainer.four img.menu.active + .menuConverted img.option:nth-child(1) {
    -webkit-transform: translate3d(40px, -35px, 0);
    transform: translate3d(40px, -35px, 0);
}
div.expandableContainer.four img.menu.active + .menuConverted img.option:nth-child(2) {
    -webkit-transform: translate3d(40px, 35px, 0);
    transform: translate3d(40px, 35px, 0);
}
div.expandableContainer.four img.menu.active + .menuConverted img.option:nth-child(3) {
    -webkit-transform: translate3d(-40px, 35px, 0);
    transform: translate3d(-40px, 35px, 0);
}
div.expandableContainer.four img.menu.active + .menuConverted img.option:nth-child(4) {
    -webkit-transform: translate3d(-40px, -35px, 0);
    transform: translate3d(-40px, -35px, 0);
}

div.expandableContainer.three img.menu.active + .menuConverted img.option:nth-child(1) {
    -webkit-transform: translate3d(0px, -50px, 0);
    transform: translate3d(0px, -50px, 0);
}
div.expandableContainer.three img.menu.active + .menuConverted img.option:nth-child(2) {
    -webkit-transform: translate3d(45px, 25px, 0);
    transform: translate3d(45px, 25px, 0);
}
div.expandableContainer.three img.menu.active + .menuConverted img.option:nth-child(3) {
    -webkit-transform: translate3d(-45px, 25px, 0);
    transform: translate3d(-45px, 25px, 0);
}

div.expandableContainer.two img.menu.active + .menuConverted img.option:nth-child(1) {
    -webkit-transform: translate3d(-55px, 1px, 0);
    transform: translate3d(-55px, 1px, 0);
}
div.expandableContainer.two img.menu.active + .menuConverted img.option:nth-child(2) {
    -webkit-transform: translate3d(55px, 1px, 0);
    transform: translate3d(55px, 1px, 0);
}



.fog-effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    pointer-events: none;
    z-index: 5;
    opacity: 0.5;
    background-image: url(/design/img/pogoda/tuman.png);
    animation: fogAnim 30s infinite linear;
}

@keyframes fogAnim {
    from { background-position: 0 0; }
    to { background-position: 1000px 0; }
}



.fog-effect2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    pointer-events: none;
    z-index: 5;
    opacity: 0.5;
    background-image: url(/design/img/pogoda/water.png);
    animation: fogAnim2 0.3s linear infinite;
	background-size: 66%;
}

@keyframes fogAnim2 {
    from { background-position: -10% -10%; }
    to { background-position: 20% 100%; }
}




.bb-help {     
	display: inline-block;
    margin: 0px 5px; 
	}

.bb-toggle{
    color: #000000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 4px;
    background: #bababa;
    cursor: pointer;
    transition: .2s ease;
    border: none;
    padding: 2px 14px;
    margin: -4px 0px 0px 0px;
}

.bb-toggle .chev{ transition: transform .25s ease; opacity:.85 }

.bb-panel{
	overflow: hidden;
    margin-top: 10px;
    background: #3a3a3a;
    width: 100%;
}


.bb-list{ list-style:none; margin:0; padding:8px; }
.bb-list li{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #2a2a2a;
    padding: 3px 5px;
    border-radius: 4px;
    width: 95%;
}
.bb-list li + li{ margin-top:8px; }

.bb-list code{
    font-size: 13px;
    color: #eaeaea;
    background: #111111;
    padding: 8px 7px;
    border-radius: 4px;
    user-select: text;
    white-space: nowrap;
    overflow: auto;
}

.bb-list .copy{
  flex:0 0 auto; padding:8px 10px; border-radius:8px; border:1px solid #2b2b2b;
  background:#202020; color:#dcdcdc; font-size:13px; cursor:pointer; transition:.2s;
}
.bb-list .copy:hover{ background:#3a3a3a;}
.bb-list .copy:active{ transform: translateY(0); }


.bb-help.open .bb-toggle .chev{ transform: rotate(180deg); }