@charset "utf-8";
/* CSS Document */

:root {
  --main: #333333;
  --green: #37b44a;
  --beige: #ffed99;
  --white: #fff;
  --lime: #555555;
  --dgreen: #006065;
  --gray: #e0e0e0;
  --dgray: #555555;
}


html, body {
        margin: 0;
        padding: 0;
        /* overflow: hidden; */
}

.center h2 {
    color: var(--white);
    font-size: 3.8rem;
    font-weight: 700;
}

.center h3 {
	color: var(--white);
    font-size: 1.8rem;
    font-weight: 600;
}

.center h2 span {
    color: var(--green);
}

#option1,#option2,#option3,#option4,#option5,#option6,#option7,#option8,#option9,#option10,#option11,#option12,#checker100{
	display: none;
}

.time, .checker, .next, .counter, .forma, .contacts, .result, .question {
	display: none;
}

a {
    color: var(--green);
}

a:hover {
    color: var(--lime);
    text-decoration: none !important;
}


.quizbtn {
    text-decoration: none;
    font-size: 1.6rem;
    color: var(--white);
    background: var(--green);
    padding: 18px 30px;
	width:100%;
    border: 2px solid var(--lime);
    border-radius: 10px;
    cursor: pointer;
	position:relative;
	overflow:hidden;
	transition: all 500ms ease;
	margin: 5px auto 20px;
}

.quizbtn:before {
    position: absolute;
    content: '';
    width: 0%; height: 100%;
    background: var(--white);
    top: 0;  left: auto; right: 0;
    z-index: -1;
    transition: all 500ms ease;
}
  
.quizbtn:hover{
    color: var(--green); 
    box-shadow:none;
	background: var(--white);
    &:before{
      position: absolute;
      content: '';
      width: 100%; height: 100%;
      background: var(--white);
      top: 0; left: 0; right: 0;
      z-index: -1;
    } 
} 


a.quizbtn:hover {
	color: var(--green);
    text-decoration: none !important;
}

.quizbtn.short {
	width: 50% !important;
}

.quizbtn.new {
    margin-top: 40px;
}

.question {
    font-size: 2.8rem;
	line-height: 3.4rem;
    font-weight: bold;
    color: var(--white);
    margin-bottom: 1rem;
	margin-top: 0rem;
}

.result {
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--white);
    margin-bottom: 1rem;
}

.result span {
    color: var(--lime);
	font-size: 2.7rem;
}

.nom {
	border-radius: 50%;
    background: var(--green);
    padding: 3px 15px;
    font-weight: bold;
    width: 20px;
    font-size: 39px;
}

.parent {
    width: 100%;
	height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: auto;
	background-image: url("../images/bg2.jpg");
	background-size: cover;
}

.header {
    padding: 20px 10%;
    background: var(--white);
}

.web {
    float: right;
    font-size: 1.4rem;
    color: var(--green);
    margin: 20px auto;
	font-weight: 600;
}

.center {
    max-width: 1127px;
	margin-top: 5em;
    margin-bottom: 10em;
    margin-left: auto!important;
    margin-right: auto!important;
    text-align: center;
	vertical-align: middle;
	padding: 0 10px;
}

#startscreen {
    margin-top: 10%;
}

.fon {
    background: url(../images/seed.png) no-repeat;
    min-height: 500px;
}

.roundtext {
    background: var(--lime);
    height: 400px;
    width: 400px;
    border-radius: 50%;
    right: 5%;
    position: absolute;
	padding: 25% 0%;
	opacity: 0.9;
}

.roundtext span {
	font-size: 1.5rem;
    padding: 0;
    text-align: center;
	color: var(--green);
}

.counter {
    font-size: 1.6rem;
    color: var(--white);
    bottom: 15px;
    right: 15px;
    position: absolute;
}

.forma {
    font-size: 1.6rem;
    background: var(--white);
    padding: 50px;
    border-radius: 10px;
}

.forma input {
	width:100% !important;
}

.forma .quizbtn {
	margin-top: 52px !important;
}

.forma label {
	float: left;
}

.center input[type="text"] {
	font-size: 1.6rem;
    color: var(--dgray);
    background: var(--gray);
    padding: 18px 30px;
    width: 45%;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    transition: all 500ms ease;
    margin: 5px auto 20px;
	border: none;
}

.center input[type="checkbox"] {
	font-size: 1.4rem;
    padding: 10px;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    transition: all 500ms ease;
    margin: 10px;
    border: 2px solid var(--white);
    width: 35px !important;
    height: 35px;
	display: inline-block;
    vertical-align: sub;
}

.contacts {
	color: var(--white);
}

.contacts h2 {
    font-family: 'OCROne';
	font-size: 3.5rem;
    margin-bottom: 2rem;
}

.contacts div {
	font-size: 1.6rem;
	/* text-align: left; */
}

.contacts span{
	color: var(--lime);
}

.save {
	position: absolute;
	left: -10000px;
}

hr {
	margin-bottom: 2rem;
    border-top: 2px solid var(--white);
}

#checker div {
    color: var(--white);	
	text-align: left;
}

#checker label {
    font-size: 1rem;
    display: inline-block;
    vertical-align: super;
	width: 85%;
}

small {
	font-size: 1.6rem;
}

small span {
	font-size: 1.6rem !important;
	font-weight: bold;
}

@media only screen and (max-width: 767px) {
	h2 { font-size: 3em; }
	.quizbtn:hover { color: var(--white); background-color: var(--green); }

}