body {
    font-family: "Open Sans", Helvetica, Verdana, sans-serif !important;
    background-image: url('../img/main.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
	color: white;
}

.loaderArea {   
	
	overflow: hidden;
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: center;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 100000;
}

.loader {
	position: absolute;
	/*left: 50%;
	top: 50%;*/
}

.spiner {
	animation: animate 2s infinite linear;
}

@keyframes animate {
	0% {
		transform: rotate(0);
	}

	100% {
		transform: rotate(360deg);
	}
}


#top {
min-height: 100vh;  
 /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+74,2989d8+100,000000+100&0+0,1+100 */
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.74) 74%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.74) 74%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.74) 74%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}

.black {
padding-top: 70px;
background-color: rgba(75, 75, 75, 0.6) !important;	
}

#wrapper-top, #wrapper-bottom {
    display: block;
    height: 13.5rem;
}

h1 {
    text-align: center;
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.2;
}

p.subtitle {
    text-align: center;
      font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
}

h2 {
    text-align: center;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.4;
}

h2#obrab {
    margin-bottom: 220px;
    font-size: 2rem;
}

h2.step {
	font-size: 2rem;
    font-weight: 600;
    line-height: 1.2;
	margin-bottom: 3.2rem;
}

p.go-btn {
	cursor: pointer;
    display: inline-block;
    text-align: center;
	background-color: #2cafd4;
    border-radius: 50px;
    padding: 1rem 1.875rem;
    font-size: 1.25rem;
    font-weight: 400;
    box-shadow: none;
}

#quiz {
    text-indent: 10px;
    display:none;
}

#prev {
    display:none;
}

#start {
    display:none;
    width: 90px;
}

input[type="checkbox"],
input[type="radio"] {
    /* display: none;*/
}

label {
	margin: 0;
	cursor: pointer;
}

ul.questions {
	list-style-type: none;
	margin-bottom: 35px;
}

@keyframes WARNING {
	0% {border: 2px solid rgba(255, 0, 0, 1);}
	50% {border: 2px solid rgba(255, 0, 0, 0.5);}
	100% {border: 2px solid rgba(255, 0, 0, 0.1);}
	
}

ul.danger span {	
  animation-name: WARNING;
  animation-duration: 1s;
}

ul.questions li>label {
	line-height: 2rem;
	font-size: 1.2rem;
	display: flex;
	align-items: center;
	margin-bottom: 0px;
}
 ul.questions li {
      margin-bottom: 10px;  
    }
    

a.button-next {
	display: inline-block;
	padding: .75rem 1.375rem;
	background-color: rgba(255, 255, 255, 0.7);
	color: black;
	border-radius: 5px;
    text-decoration: none;
}
a.button-next:hover {
   background-color: rgba(255, 255, 255, 1); 
}


a.button-prev {
	display: inline-block;
	padding: .75rem 1.375rem;
	background-color: rgba(125, 125, 125, 0.7);
	color: white;
	border-radius: 5px;
    text-decoration: none;	
}
a.button-prev:hover {
    background-color: rgba(125, 125, 125, 1);
}

input.submit-btn {
   display: inline-block;
	padding: .75rem 1.375rem;
	background-color: rgba(255, 255, 255, 0.7);
	color: black;
	border-radius: 5px;
    text-decoration: none;	 
}

input.submit-btn:hover {
   background-color: rgba(255, 255, 255, 1);
}

div.button-prev img{
	width: 35px;
}

div.button-next a{
	color: black;
    text-decoration: none;
    
}

form div.step {
		display:none;
	}

form input[type=submit] {
		display:none;
	}


.talign {
    padding-left: 40px;
    position: fixed;
    bottom: 150px;
}


.progress-bar {
    position: relative;
}

.progress-bar .progress-value{
    font-size: 17px;
    font-weight: bold;
    color: #555;
    position: absolute;
    bottom: -35px;
    right: 27px;
}

@media (min-width: 320px) {
	/* Стили для устройств с шириной viewport, находящейся в диапазоне 320px - 374px */
	#wrapper-top, #wrapper-bottom {
		height: 20px;
	}
	
	.black {
		padding-top: 35px;
	}
	
	h1 {
		font-size: 1.9rem;
	}
	
	p.subtitle {
		font-size: 0.8rem;
	}
	
	h2 {
		font-size: 1.2rem;
	}
	
	h2.step {
		font-size: 1.6rem;
		margin-bottom: 1.5rem;
	}
	
	h2.step:last-child {
		font-size: 1.3rem;
		margin-bottom: 1.3rem;
	}
	
	ul.questions {
		padding: 0 !important;
	}
	
	ul.questions li>label {
    line-height: 1.2rem;
		font-size: 1rem;
        margin-bottom: 0;
	}
    
     ul.questions li {
      margin-bottom: 10px;  
    }
  
	
	.progress {
		margin-bottom: 35px;
		widows: 100%;
	}
	
	.talign {
    padding-left: 0px;
    position: relative;
	bottom: 0;
}
}

@media (min-width: 375px) {
	/* Стили для устройств с шириной viewport, находящейся в диапазоне 374px - 424px */
  
}

@media (min-width: 425px) {
	/* Стили для устройств с шириной viewport, находящейся в диапазоне 425px - 767px */
    
}

@media (min-width: 768px) {
	/* Стили для устройств с шириной viewport, находящейся в диапазоне 768px - 991px */
	
}

/* Устройства со средним экраном (ноутбуки и компьютеры, 992px и выше) */

@media (min-width: 992px) {
	/* Стили для устройств с шириной viewport, находящейся в диапазоне 992px - 1199px */
	.black {
padding-top: 70px;
background-color: rgba(75, 75, 75, 0.6) !important;	
}

#wrapper-top, #wrapper-bottom {
    display: block;
    height: 8rem;
}

h1 {
    text-align: center;
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.2;
}

p.subtitle {
    text-align: center;
      font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
}

h2 {
    text-align: center;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.4;
}

h2.step {
	font-size: 2rem;
    font-weight: 600;
    line-height: 1.2;
	margin-bottom: 3.2rem;
}


	ul.questions {
		padding-left: 40px !important;
	}
	
    ul.questions li {
      margin-bottom: 10px;  
    }
    ul.questions li>label {
	line-height: 2rem;
	font-size: 1.2rem;
	display: flex;
	align-items: center;
	margin-bottom: 0;
}

/* Устройства с большим экраном (компьютеры, 1200px и выше) */

@media (min-width: 1200px) {
	/* Стили для устройств с шириной viewport >1200px */
	#wrapper-top, #wrapper-bottom {
    display: block;
    height: 8rem;
}
	
	.phone-input {
		padding-left: 40px;
		padding-left: 40px;
	}
	
.talign {
    padding-left: 40px;
}
	
}

@media (min-width: 1600px) {
	/* Стили для устройств с шириной viewport >1200px */
	#wrapper-top, #wrapper-bottom {
    display: block;
    height: 13.5rem;
}
	
	
.talign {
    padding-left: 40px;
    position: fixed;
    bottom: 150px;
}
	
}