body {
	font-family: Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;	
}

.black {
	background: #000;
	padding: 20px 20px 10px 20px;
}
.white {
	background: #fff;
	padding: 30px 20px 20px 20px;
}
.btn {
	font-family: 'Foo-Regular';
	text-decoration: none;
	color: #fff;
	padding: 12px 20px;
	font-size: 2vw;
	border-radius: 10px;
	background-color: #666666;		
	position: relative;
	border-bottom: 1px solid rgba(255,255,255,0.2);
	display: inline-block;
	margin-bottom: 40px;
	cursor:pointer;
	/*background-size: cover !important;
	background: url(../img/but_fon.jpg) no-repeat !important;*/
	text-shadow: 2px 3px 9px #100773;
	transition: all 0.5s ease;
	letter-spacing: 2px;
	text-transform: uppercase;	
	border: 4px solid #000;
	max-width: 35vw;
 /* font-size: 4vh;
    line-height: 3vh;
    padding: 3vh;
    color: #bdf8ff;*/
}

	
.btn:hover {
	box-shadow: 0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2);
	color: #fff;
	transform: scale3d(1.05, 1.05, 1.05);
}

.shield {
	border-radius: 5px 5px 35px 35px;	
	padding-left: 25px;
	padding-right: 25px;
}

.criss-cross {
	border-radius: 35px 5px;	
}


.rectangular {
	border-radius: 10px / 35px;
}

.one-corner {
	border-radius: 5px 5px 35px 5px;
	padding-right: 25px;
}

.pressure {
}



.btn:active {
	top: 7px;
	box-shadow: 0 2px 0 #393939, 0px 4px 4px rgba(0,0,0,0.4), inset 0px 2px 5px rgba(0,0,0,0.2);	
}

.red {	
	background-color: #c34747;	
	box-shadow: 0 5px 5px #853232, 0 9px 0 #5e2525, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2);
}

.red:hover {
	box-shadow: 0 5px 5px #853232, 0 9px 0 #5e2525, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2);
}

.red:active {
	box-shadow: 0 2px 0 #5e2525, 0px 4px 4px rgba(0,0,0,0.4), inset 0px 2px 5px rgba(0,0,0,0.2);
}

.orange {	
	background-color: #c37846;	
	box-shadow: 0 5px 5px #855031, 0 9px 0 #5e3a25, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2);
}

.orange:hover {
	box-shadow: 0 5px 5px #855031, 0 9px 0 #5e3a25, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2);	
}

.orange:active {

    box-shadow: 0 5px 5px #3d8313, 0 9px 0 #075c06, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2);
    border: 2px solid #4fe75f;	
}

.green {	
background: rgb(34,193,195);
background: linear-gradient(281deg, rgba(34,193,195,1) 0%, rgba(35,192,167,1) 5%, rgba(40,189,65,1) 14%, rgba(43,156,113,1) 23%, rgba(68,192,132,1) 24%, rgba(76,192,78,1) 58%, rgba(82,192,73,1) 68%, rgba(58,154,49,1) 70%, rgba(84,192,72,1) 75%, rgba(90,191,67,1) 78%, rgba(68,166,37,1) 79%, rgba(121,191,67,1) 100%);

    box-shadow: 0 5px 5px #3d8313, 0 9px 0 #075c06, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2);
    border: 2px solid #4fe75f;
}

.green:hover {
	box-shadow: 0 5px 5px #508530, 0 9px 0 #385e25, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2);
}

.green:active {
	box-shadow: 0 2px 0 #385e25, 0px 4px 4px rgba(0,0,0,0.4), inset 0px 2px 5px rgba(0,0,0,0.2);	
}

.pink {
	box-shadow: 0 5px 5px #782d54, 0 9px 0 #5e254c, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2);
	background-color: #d7298b;
}

.pink:hover {
	box-shadow: 0 5px 5px #782d54, 0 9px 0 #5e254c, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2);
}

.pink:active {
	box-shadow: 0 2px 0 #5e254c, 0px 4px 4px rgba(0,0,0,0.3), inset 0px 2px 5px rgba(0,0,0,0.2);
}

.blue {
	background: #2a8ad8;
	box-shadow: 0 5px 5px #364a8e, 0 9px 0 #25325e, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2);
}

.blue:hover {
	box-shadow: 0 5px 5px #364a8e, 0 9px 0 #25325e, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2);
}
.blue:active {
	box-shadow: 0 2px 0 #25325e, 0px 4px 4px rgba(0,0,0,0.3), inset 0px 2px 5px rgba(0,0,0,0.2);
}

.purple {
	background-color: #8a26d3;
	box-shadow: 0 5px 5px #54307b, 0 9px 0 #3f255e, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2);
}

.purple:hover {
	box-shadow: 0 5px 5px #54307b, 0 9px 0 #3f255e, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2);
}

.purple:active {
	box-shadow: 0 2px 0 #42255e, 0px 4px 4px rgba(0,0,0,0.3), inset 0px 2px 5px rgba(0,0,0,0.2);
}

/*GLOW*/
.f1 {
   /* font-size: 42px;*/
    padding: 15px 30px;
	margin-top:400px;
	/*font-family: 'Rubik Mono One', sans-serif;*/
}
.f2 {
    font-size: 32px;
    padding: 10px 25px;
	margin-top:100px;
	/*font-family: 'Russo One', sans-serif;*/
}

.glow-on-hover {
    border: none;
    outline: none;
    color: #bdf8ff;
   /* background: #111;*/
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 10px;
	clear:both;
	text-align:center;

}
.glow-on-hover:before {
    content: '';
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top: -7px;
    left:-7px;
    background-size: 400%;
    z-index: -1;
    filter: blur(15px);
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    animation: glowing 20s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    border-radius: 10px;
}

.glow-on-hover:active {
    color: #fff
}

.glow-on-hover:active:after {
    background: transparent;
	
}

.glow-on-hover:hover:before {
    opacity: 1;
}
/**/
.glow-on-hover:hover:after {
/*	background-position:-50px -20px;*/
	-webkit-box-shadow: 0px 0px 0px 0px #141CFF;
	box-shadow: 0px 0px 0px 0px #141CFF;
	
	background: rgb(188,255,248);
background:linear-gradient(180deg, rgb(255 255 255) 0%, rgb(155 223 255) 11%, rgb(28 116 208) 45%, rgb(23 106 204) 56%, rgb(32 105 203) 66%, rgb(64 110 230) 79%, rgb(84 125 238) 90%, rgb(97 187 255) 100%);
	
		-webkit-animation: neon6 0s ease-in-out  alternate;
  -moz-animation: neon6 0s ease-in-out  alternate;
  animation: neon6 0s ease-in-out  alternate;
}

.glow-on-hover:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;

/*	background: url(../img/but_long_fon.jpg) bottom no-repeat !important;*/
   
background: rgb(188,255,248);
background: linear-gradient(180deg, rgba(188,255,248,1) 0%, rgba(129,190,219,1) 11%, rgba(25,97,172,1) 45%, rgba(7,74,153,1) 56%, rgba(21,80,159,1) 66%, rgba(36,87,220,1) 79%, rgba(45,96,233,1) 90%, rgba(50,156,236,1) 100%);

   left: 0;
    top: 0;
    border-radius: 7px;
/*	-webkit-box-shadow: 0px 3px 25px 15px #141CFF;
	box-shadow: 0px 3px 25px 15px #141CFF;*/
	-webkit-animation: neon6 2.5s ease-in-out infinite alternate;
  -moz-animation: neon6 2.5s ease-in-out infinite alternate;
  animation: neon6 2.5s ease-in-out infinite alternate;
	
}

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}

@keyframes neon6 {
  from {
    box-shadow: 0 0 10px #00059e, 0 0 10px #00059e, 0 0 20px #00059e, 0 0 20px #141CFF, 0 0 35px #141CFF, 0 0 40px #141CFF, 0 0 50px #141CFF, 0 0 70px #141CFF;
  }
  to {
    box-shadow: 0 0 5px #00059e, 0 0 5px #00059e, 0 0 10px #00059e, 0 0 10px #141CFF, 0 0 20px #141CFF, 0 0 20px #141CFF, 0 0 25px #141CFF, 0 0 35px #141CFF;
  }
}


/*START*/
.btn-start {
font-family: 'Foo-Regular';
    text-decoration: none;
    height: 200px;
    width: 200px;
    cursor: pointer;
    margin: 0 auto;
    position: relative;
    bottom: 75px;
}
.btn-start .outerst {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 20px;
    /* background: #c0d5ea; */
    border-radius: 14px;
    -webkit-border-radius: 180px;
    -moz-border-radius: 14px;
    box-shadow: inset rgb(0 0 0 / 100%) 0px 5px 15px;
    -webkit-box-shadow: inset rgb(0 0 0 / 100%) 0px 5px 15px;
    -moz-box-shadow: inset rgb(0 0 0 / 100%) 0px 5px 15px;
    -webkit-transform: perspective(500px) rotateX(35deg);
    -moz-transform: perspective(500px) rotateX(35deg);
    border: 4px solid #5d7386;
    /* -webkit-box-shadow: #3f44cf 0px 5px 25px; */
    /* background: rgb(158,202,223); */
    /* background: linear-gradient(180deg, rgb(103 168 198) 10%, rgba(192,213,234,1) 100%); */
    background: rgb(158,202,223);
    background: linear-gradient(180deg, rgba(158,202,223,1) 10%, rgb(79 101 119) 55%, rgb(233 239 244) 100%);
}
.btn-start .outerst .height {
	position: relative;
    height: 100%;
    margin-top: -35px;
    padding-bottom: 25px;
    /* background: #ba2020; */
    border-radius: 16px;
    -webkit-border-radius: 180px;
    -moz-border-radius: 16px;
    box-shadow: rgba(0,0,0,0.85) 0px 1px 1px, inset rgba(0,0,0,0.35) 0px -2px 8px;
    -webkit-box-shadow: rgb(0 0 0 / 0.3) 0px 8px 3px, inset rgba(0,0,0,0.8) 0px -2px 8px;
    -moz-box-shadow: rgba(0,0,0,0.85) 0px 1px 1px, inset rgba(0,0,0,0.35) 0px -2px 8px;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    background: rgb(186,32,32);
    background: linear-gradient(90deg, rgba(186,32,32,1) 10%, rgb(127 18 50) 21%, rgba(209,72,84,1) 32%, rgb(184 15 19) 40%, rgb(186 23 5) 42%, rgb(181 29 11) 45%, rgb(173 23 11) 48%, rgb(197 40 16) 72%, rgb(169 36 12) 73%, rgb(215 90 9) 79%, rgb(174 27 27) 88%, rgb(203 68 18) 100%);
}       
.btn-start:hover .outerst .height {
margin-top: -10px;
    padding-bottom: 10px;
    box-shadow: rgba(0,0,0,0.25) 0px 2px 2px 4px, inset rgba(0,0,0,0.35) 0px -2px 6px;
    background: rgb(186,32,32);
    background: linear-gradient(90deg, rgba(186,32,32,1) 10%, rgb(127 18 50) 21%, rgba(209,72,84,1) 32%, rgb(184 15 19) 40%, rgb(186 23 5) 42%, rgb(181 29 11) 45%, rgb(173 23 11) 48%, rgb(197 40 16) 72%, rgb(169 36 12) 73%, rgb(215 90 9) 79%, rgb(174 27 27) 88%, rgb(203 68 18) 100%);
}
.btn-start:active .outerst .height {
	margin-top: 0px;
	padding-bottom: 0px;
}
.btn-start .outerst .height .innerst {
 line-height: 4.3em;
    font-size: 3.2em;
    letter-spacing: .05em;
    position: relative;
    height: 100%;
    text-align: center;
    text-shadow: #0000009c 0px 2px 1px;
    /* background: #44d135; */
    background: -moz-linear-gradient(top, #ff936b 0%, #dc3535 100%);
    /* background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff936b), color-stop(100%,#dc3535)); */
    /* background: -webkit-linear-gradient(top, #ff936b 0%,#dc3535 100%); */
    background: linear-gradient(top, #ff936b 0%,#dc3535 100%);
    border-radius: 180px;
    -webkit-border-radius: 180px;
    -moz-border-radius: 180px;
    box-shadow: inset rgba(255,255,255,0.85) 0px 0px 1px;
    -webkit-box-shadow: inset rgb(251 255 181) 0px 0px 5px;
    -moz-box-shadow: inset rgba(255,255,255,0.85) 0px 0px 1px;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    background: rgb(220,53,53);
    background: linear-gradient(180deg, rgb(248 104 104) 10%, rgb(214 53 53) 70%, rgb(255 113 60) 100%);
    color: #fff;
}
.btn-start:hover .outerst .height .innerst{
	text-shadow: #000000 0px 1px 1px;
	/*background: #dc3535; 
	background: -moz-linear-gradient(top, #ff936b 0%, #dc3535 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff936b), color-stop(100%,#dc3535));
    background: -webkit-linear-gradient(top, #ff936b 0%,#dc3535 100%);
    background: linear-gradient(top, #ff936b 0%,#dc3535 100%);*/
}
.btn-start:active .outerst .height .innerst{
	text-shadow: #319926 0px 1px 0px;
	border-radius: 180px;
	-webkit-border-radius: 180px;
	-moz-border-radius: 180px;
	box-shadow: inset rgba(0,0,0,0.9) 0px 0px 8px;
	-webkit-box-shadow: inset rgba(0,0,0,0.9) 0px 0px 8px;
	-moz-box-shadow: inset rgba(0,0,0,0.9) 0px 0px 8px;
	    background: #44d135;
    background: -moz-linear-gradient(top, #ff936b 0%, #dc3535 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff936b), color-stop(100%,#dc3535));
    background: -webkit-linear-gradient(top, #ff936b 0%,#dc3535 100%);
    background: linear-gradient(top, #ff936b 0%,#dc3535 100%);
}
/**/

.btn-grad-orange {background-image: linear-gradient(to right, #FF8008 0%, #FFC837  51%, #FF8008  100%)}
.btn-grad-orange {
	margin: 10px;
    padding: 15px 45px;
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: white;
	box-shadow: 0px 6px 0 #da710a, 0px 12px 4px rgba(0,0,0,0.3), inset 0px 2px 5px rgba(0,0,0,0.2);
   /* box-shadow: 0 5px 1px 3px #a05916;*/
    border-radius: 10px;
    display: inline-block;
    font-size: 3vh;
	font-family: 'Foo-Regular';
	max-width: 35vw;
	display: inline-block;
	position: relative;
	    text-shadow: 0 2px 2px rgb(0 0 0 / 0.5);
		cursor: pointer
}
.btn-grad-orange:active {
	box-shadow: 0px 6px 0 #da710a, 0px 12px 4px rgba(0,0,0,0.3), inset 0px 2px 5px rgba(0,0,0,0.2);
}
        
.btn-grad-orange:hover:active {
	top:10px;
}
 
.btn-grad-orange:hover {
            background-position: right center; /* change the direction of the change here */
            color: #fff;
            text-decoration: none;
			top:0px;
}
/**/


.input_check .close {background-image: linear-gradient(to right, #FF8008 0%, #FFC837  51%, #FF8008  100%)}
.input_check .close {
	margin: 10px;
    padding: 15px 45px;
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: white;
	box-shadow: 0px 6px 0 #da710a, 0px 12px 4px rgba(0,0,0,0.3), inset 0px 2px 5px rgba(0,0,0,0.2);
   /* box-shadow: 0 5px 1px 3px #a05916;*/
    border-radius: 10px;
    display: inline-block;
    font-size: 3vh;
	font-family: 'Foo-Regular';
	max-width: 35vw;
	display: inline-block;
	position: relative;
	    text-shadow: 0 2px 2px rgb(0 0 0 / 0.5);
		cursor: pointer
}
.input_check .close:active {
	box-shadow: 0px 6px 0 #da710a, 0px 12px 4px rgba(0,0,0,0.3), inset 0px 2px 5px rgba(0,0,0,0.2);
}
        
.input_check .close:hover:active {
	top:10px;
}
 
.input_check .close:hover {
            background-position: right center; /* change the direction of the change here */
            color: #fff;
            text-decoration: none;
			top:0px;
}

/**/

.btn-grad-green {background-image: linear-gradient(to right, #b7f400 0%, #08dc8d 51%, #72ff08 100%);}
.btn-grad-green {
	    margin: 10px;
    padding: 15px 45px;
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: white;
    box-shadow: 0px 6px 0 #1ea206, 0px 12px 4px rgba(0,0,0,0.3), inset 0px 2px 5px rgba(0,0,0,0.2);
    /* box-shadow: 0 5px 1px 3px #a05916; */
    border-radius: 10px;
    display: inline-block;
    font-size: 3vh;
    font-family: 'Foo-Regular';
    max-width: 35vw;
    display: inline-block;
    position: relative;
    text-shadow: 0 2px 2px rgb(0 0 0 / 0.5);
}
.btn-grad-green:active {
	box-shadow: 0px 6px 0 #da710a, 0px 12px 4px rgba(0,0,0,0.3), inset 0px 2px 5px rgba(0,0,0,0.2);
}
        
.btn-grad-green:hover:active {
	top:10px;
}
 
.btn-grad-green:hover {
            background-position: right center; /* change the direction of the change here */
            color: #fff;
            text-decoration: none;
			top:0px;
}


/**/
.wrong {background-image: linear-gradient(to right, #ff42a2 0%, #dc5008 51%, #ff3cd3 100%);}
.wrong {
    margin: 10px;
    padding: 15px 45px;
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: white;
    box-shadow: 0px 6px 0 #a2065a, 0px 12px 4px rgba(0,0,0,0.3), inset 0px 2px 5px rgba(0,0,0,0.2);
    box-shadow: 0 5px 1px 3px #a05916;
    border-radius: 10px;
    display: inline-block;
    font-size: 3vh;
    font-family: 'Foo-Regular';
    max-width: 35vw;
    display: inline-block;
    position: relative;
    text-shadow: 0 2px 2px rgb(0 0 0 / 0.5);
}
.wrong:active {
    box-shadow: 0px 6px 0 #da710a, 0px 12px 4px rgba(0,0,0,0.3), inset 0px 2px 5px rgba(0,0,0,0.2);
}

.wrong:hover:active {
    top:10px;
}

.wrong:hover {
    background-position: right center; /* change the direction of the change here */
    color: #fff;
    text-decoration: none;
    top:0px;
}
/**/



.button .btn-start {display:none}
#button10 .btn-start {display:block}
#button10 .glow-on-hover {display:none}

#button74 .btn-start,
#button84 .btn-start,
#button93 .btn-start,
#button104 .btn-start,
#button122 .btn-start,
#button134 .btn-start,
#button142 .btn-start,
#button165 .btn-start,
#button182 .btn-start,
#button200 .btn-start,
#button213 .btn-start,
#button215 .btn-start,
#button230 .btn-start,
#button238 .btn-start,
#button239 .btn-start,
#button248 .btn-start,
#button255 .btn-start,
#button263 .btn-start,
#button271 .btn-start,
#button284 .btn-start,
#button285 .btn-start,
#button299 .btn-start,
#button311 .btn-start,
#button322 .btn-start,
#button335 .btn-start,
#button397 .btn-start,
#button401 .btn-start
{display:block !important}

#button74 .glow-on-hover,
#button84 .glow-on-hover,
#button93 .glow-on-hover,
#button104 .glow-on-hover,
#button122 .glow-on-hover,
#button134 .glow-on-hover,
#button142 .glow-on-hover,
#button165 .glow-on-hover,
#button182 .glow-on-hover,
#button200 .glow-on-hover,
#button213 .glow-on-hover,
#button215 .glow-on-hover,
#button230 .glow-on-hover,
#button238 .glow-on-hover,
#button239 .glow-on-hover,
#button248 .glow-on-hover,
#button255 .glow-on-hover,
#button263 .glow-on-hover,
#button271 .glow-on-hover,
#button284 .glow-on-hover,
#button285 .glow-on-hover,
#button299 .glow-on-hover,
#button311 .glow-on-hover,
#button322 .glow-on-hover,
#button335 .glow-on-hover,
#button397 .glow-on-hover,
#button401 .glow-on-hover
{display:none !important}