html, body, div, p, ul, ol, li, footer, form, input,textarea, img, header, article,main, aside {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
  }
  body {
    background: url(../img/main-bg.jpg) no-repeat center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    height: auto;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    font-family: arial,helvetica,sans-serif;
    text-rendering: geometricPrecision;
}
video {
   position: absolute;
   top: 0;
   left: 0;
   width: auto;
   height: 100vh;
}
video img{
   position: absolute;
   top: 0;
   left: 0;
   width: auto;
   height: 100vh;
}
.lp-positioned-content{
   position: static;
   overflow: visible;
   margin-left: 0;
   width: 100%;
}
.lp-element .lp-pom-root{
   width: 100%;
   height: 100%;
}
#lp-code-232{
   position: static!important;
height: 100%!important;
   width: 100%!important;
}
#lp-pom-root{
   background: none;
}
div.lp-pom-root .lp-element.lp-code{
   overflow: visible;
   position: static;
}
#lp-pom-block-231{
   display: none;
}
  #lp-pom-root-color-overlay{
     display: none;
 }

.header {
    margin: 0 auto;

}

.footer, .header, .service {
    max-width: 1280px;
}

.form {
    width: 360px;
 position: absolute;
    top: 20%;
    left: 10%;

}
.reg-form {

   padding-bottom: 15px;
     border-radius: 10px;
    background: rgba(255,255,255,.5);
    position: relative;
   padding-top: 5px;
}
.logobox {
    width: 100%;
    height: 130px;
      line-height: 130px;
      text-align: center;
    background: linear-gradient(to right,#2456b5,#127fd9,#2456b5);
}
.pop-plakat .logobox {
      padding: 20px;
      text-align: center;
      line-height: unset;

}

.message {
    display: none;
}
.invalid-required .required, .invalid-required .validator, .invalid-required .message.required{
    display: block;
}
.invalid-pattern .pattern, .invalid-pattern .validator, .invalid-pattern .message.pattern{
    display: block;
}
.invalid-exists .exists, .invalid-exists .validator, .invalid-exists .message.exists{
    display: block;
}
[class*=invalid-] .server,//will not work in IE6
{
    display: none;
}




.pop-plakat {

   z-index: 2;
   background: #fff;
   text-align: center;

}
.pop-plakat .logobox p{
   font-size: 36px;
   color:#fff;
   text-align: center;


}
.pop-plakat img {
   width: 80%;
   margin: 20px auto 40px;
}
.pop-plakat p.warning{
   font-size: 20px;
   color:#000;
   width: 80%;
   font-family: arial,sans-serif;
   margin: 0 auto;

}
.pop-plakat p.warning span.red-txt{
   text-transform: uppercase;
   color:red;
   font-weight: bold;

}
.pop-plakat .ok{
   font-size: 20px;
    font-family: Myriad,sans-serif;
    color: #fff;
    width: 70%;
    height: 50px;
    cursor: pointer;
    margin: 40px auto;
    border-radius: 5px;
    line-height: 50px;
    text-decoration: none;
    background-image: -moz-linear-gradient(90deg,#429f04 0,#8ccd27 100%);
    background-image: -webkit-linear-gradient(90deg,#429f04 0,#8ccd27 100%);
    background-image: -ms-linear-gradient(90deg,#429f04 0,#8ccd27 100%);
    box-shadow: 0 3px 5px 0 rgba(0,0,0,.078);
    text-shadow: 1px 1px 3px #666;
}
.logo {
    display: block;
    margin: 40px auto;

}
.login{
   position: absolute;
   right: 35px;
   top: 35px;
   color:#fff;
   font-family: Arial, sans-serif;
}
.login a{
   text-transform: uppercase;
   font-weight: bold;
   color:#fff;
   margin-top: 35px;
}
.stepform{
   margin-top: 30px;
}
.stepform__title {
    padding: 30px 0 0;
    font: 36px Arial,sans-serif;
    text-align: center;
}
.steps-round {
    text-align: center;
}



.step-item {
    vertical-align: middle;
    display: inline-block;
    position: relative;
    width: 10px;
    height: 10px;
    margin-right: 20px;

    border-radius: 50%;

    background: gray;

}
.active-step {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    font: 24px Arial,sans-serif;

    background: #93ccc9;

}
.step-item:last-child {
   margin-right: 0;
}
.registration-form {
    margin-top: 0;
}

.registration-form {
    width: 100%;

    margin: 10px auto 0;
}
.login-form .unknown-error, .registration-form .unknown-error {
    display: none;
}
#regform, .login-form, .registration-form, .second {
    position: relative;
}
.registration-form .step.current {
    width: 70%;
    margin: 0 auto;
    display: block;
}

.registration-form .step {
    display: none;
}
button, input, optgroup, option, select, textarea {
    overflow: hidden;
    width: 287px;
    font-size: 16px;
    color: #000;
    height: 43px;
    vertical-align: middle;
    border-style: solid;
    border-width: 1px;
    border-color: #ccc;
    border-radius: 5px;
    padding-left: 20px;
    box-sizing: border-box;
}
.fieldname {

    clear: both;


}

.field{
   margin-bottom: 15px;
   position: relative;
}
.form-age {
   text-align: center;

}
.form-age select{
   display: inline-block;
   width: auto;
   margin-right: 20px;

}
.form-age select:last-child{

   margin-right: 0;

}
 .fieldname {
    position: relative;
    display: block;
    margin:30px auto 0;
    text-align: center;
    line-height: 35px;
    font-size: 29px;
    font-weight: bold;
}
.fieldname-sm {
   position: relative;
   display: block;
   margin:10px auto 30px;
   text-align: center;
   line-height: 35px;
   font-size: 22px;

}
button[type=submit] {
    display: block;
    width: 100%;
    height: 47px;
    margin: 0 auto;
    border-radius: 5px;
    line-height: 42px;
    text-decoration: none;
    background: #7fbdb9;
    box-shadow: 0 3px 5px 0 rgba(0,0,0,.078);
    text-shadow: 1px 1px 3px #666;
}

.next, button[type=submit] {
    font-size: 20px;
    font-family: Myriad,sans-serif;
    color: #fff;
    cursor: pointer;
}


#circleG{
	width:82px;
	margin:10px auto 0;
   display: none;
}

.circleG{
	background-color:#93ccc9;
	float:left;
	height:18px;
	margin-left:9px;
	width:18px;
	animation-name:bounce_circleG;
		-o-animation-name:bounce_circleG;
		-ms-animation-name:bounce_circleG;
		-webkit-animation-name:bounce_circleG;
		-moz-animation-name:bounce_circleG;
	animation-duration:2.24s;
		-o-animation-duration:2.24s;
		-ms-animation-duration:2.24s;
		-webkit-animation-duration:2.24s;
		-moz-animation-duration:2.24s;
	animation-iteration-count:infinite;
		-o-animation-iteration-count:infinite;
		-ms-animation-iteration-count:infinite;
		-webkit-animation-iteration-count:infinite;
		-moz-animation-iteration-count:infinite;
	animation-direction:normal;
		-o-animation-direction:normal;
		-ms-animation-direction:normal;
		-webkit-animation-direction:normal;
		-moz-animation-direction:normal;
	border-radius:12px;
		-o-border-radius:12px;
		-ms-border-radius:12px;
		-webkit-border-radius:12px;
		-moz-border-radius:12px;
}

#circleG_1{
	animation-delay:0.45s;
		-o-animation-delay:0.45s;
		-ms-animation-delay:0.45s;
		-webkit-animation-delay:0.45s;
		-moz-animation-delay:0.45s;
}

#circleG_2{
	animation-delay:1.05s;
		-o-animation-delay:1.05s;
		-ms-animation-delay:1.05s;
		-webkit-animation-delay:1.05s;
		-moz-animation-delay:1.05s;
}

#circleG_3{
	animation-delay:1.35s;
		-o-animation-delay:1.35s;
		-ms-animation-delay:1.35s;
		-webkit-animation-delay:1.35s;
		-moz-animation-delay:1.35s;
}



@keyframes bounce_circleG{
	0%{}

	50%{
		background-color:rgb(255,255,255);
	}

	100%{}
}

@-o-keyframes bounce_circleG{
	0%{}

	50%{
		background-color:rgb(255,255,255);
	}

	100%{}
}

@-ms-keyframes bounce_circleG{
	0%{}

	50%{
		background-color:rgb(255,255,255);
	}

	100%{}
}

@-webkit-keyframes bounce_circleG{
	0%{}

	50%{
		background-color:rgb(255,255,255);
	}

	100%{}
}

@-moz-keyframes bounce_circleG{
	0%{}

	50%{
		background-color:rgb(255,255,255);
	}

	100%{}
}

.next {
    background: #e23313;
    border: none;
    padding: 5px 20px 10px;
    border-radius: 5px;
    position: relative;
}


.validator-wrapper {
    position: absolute;
    left: 0;
    top: -20px;
    z-index: 1;
}
button, input, optgroup, option, select, textarea {
    overflow: hidden;
    width: 287px;
    font-size: 16px;
    color: #000;
    height: 43px;
    vertical-align: middle;
    border-style: solid;
    border-width: 1px;
    text-align: center;
    border-color: #ccc;
    border-radius: 5px;
    padding-left:0;
    box-sizing: border-box;
}
input.txt, select , input[type=password]{
    overflow: hidden;
    width: 100%  ;
    font-size: 16px;
    color: #606060;
    height: 43px;
    vertical-align: middle;
    border-style: solid;
    background: transparent;
    border-width: 2px;
    border-color: #7fbdb9;
    border-radius: 5px;
    box-sizing: border-box;
}
.validator {
    width: 100%;
    display: none;
}
.validator .shadow {
    width: 100%;
    height: 20px;
    position: absolute;
    margin-top: 3px;
}
.validator .content-container {
    position: relative;
    height: 20px;

}
.validator .shadow .shadow-arrow, .validator-wrapper .arrow {
    position: absolute;
    top: 0;
    left: -20px;
    width: 0;
    height: 0;
}
.validator-wrapper .arrow {
    border-left: 10px solid transparent;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid #FFFED8;
}

.field .message, .registration-form [class*=invalid-] .exists {
    display: none;
}
.trm-and-cond{
   width: 80%;
   margin: 20px auto;
   text-align: center;
}
.black-box {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    background: rgba(0,0,0,.82);
    z-index: 10;
    display: none;
}
.login_popup {
    position: absolute;
    left: 50%;
    top: 50%;
    padding-bottom: 30px;
    margin-left: -240px;
    margin-top: -390px;
    border-radius: 20px 0 20px 20px;
    background: #FFF;
    width: 480px;
    display: none;
    z-index: 1000;
}
.close_button {
    position: fixed;
    top: 2%;
    right: 40px;
    margin-left: -11px;
    width: 22px;
    height: 32px;
    cursor: pointer;
    z-index: 1200;
    display: block;
}
.dev-left {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.dev {
    position: absolute;
    top: 17px;
    width: 37px;
    border: 1px solid #ed592f;
}
.dev-right {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.popupTitle {
    text-align: center;
    padding: 30px 0;
    font-size: 24px;
    font-family: Arial;
    color: #264481;
}
.login_popup h1 {
    display: none;
    text-align: center;
}
.login-form {
    width: 360px;
    margin: 0 auto;
    position: relative;
}

#regform, .login-form, .registration-form, .second {
    position: relative;
}
.login-form .unknown-error, .registration-form .unknown-error {
    display: none;
}
.login-form .fieldname {
    width: 100px;
    height: 18px;
    clear: both;
    text-align: right;
}


.login-form .fieldname label {
    font-family: Arial;
    float: left;
    font-size: 18px;
    line-height: 2;
    text-align: left;
    color: #363636;
}

.login-form .fieldname label {
    width: 90px;
    height: 18px;
    padding: 0;
    line-height: 24px;
    text-align: right;
}
.login-form .field {
    height: 40px;

}

.login-form .field input {
    width: 244px;
    height: 40px;
    display: block;
    margin: 0 auto;
    border-radius: 3px;
}

.login-form .field input {
    height: 40px;
    font-size: 15px;
    width: 252px;
    color: #000;
    border-radius: 10px;
}


.login-form .validator-wrapper {
    position: absolute;
    left: -188px;
    top: 11px;
    z-index: 1;
    color: #000;
}
.validator {
    width: 100%;
    display: none;
}
.validator .shadow {
    width: 100%;
    height: 20px;
    position: absolute;
    margin-top: 3px;
    display: none;
}


.validator .shadow .shadow-arrow, .validator-wrapper .arrow {
    position: absolute;
    top: 0;
    left: -20px;
    width: 0;
    height: 0;
}
.validator .content-container {
    position: relative;
    height: 20px;
    color:red;
    background-color: none;
}
.validator-wrapper .arrow {
    border-left: 10px solid transparent;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid #FFFED8;
}
.validator .shadow .shadow-arrow, .validator-wrapper .arrow {
    position: absolute;
    top: 0;
    left: -20px;
    width: 0;
    height: 0;
    display: none;
}
#login_btn {
    background-image: -webkit-linear-gradient(90deg,#429f04 0,#8ccd27 100%);
    background-image: -moz-linear-gradient(90deg,#429f04 0,#8ccd27 100%);
    background-image: -o-linear-gradient(90deg,#429f04 0,#8ccd27 100%);
    background-image: -ms-linear-gradient(90deg,#429f04 0,#8ccd27 100%);
    background-image: linear-gradient(90deg,#429f04 0,#8ccd27 100%);
    border-radius: 5px;
    width: 360px;
    box-shadow: none;
    height: 50px!important;
    margin: 3px 0 0 -1px;
    cursor: pointer;
    border: 0;
    color:#fff;
    font-size: 20px;
    font-family: Arial;
}
#login_btn, .footer a {
    text-transform: uppercase;
}


@media only screen and (max-width:600px){
   body{
      height: 100vh;
      width: 100vw;
      overflow: hidden;
      background: url(../img/mobile-bg.jpg) no-repeat left top/cover;
   }
   video{
      display: none;

   }
   #lp-pom-root{
      background: none;
   }
   .logo{
      margin: 30px auto;
   }
   .login{

      left: 15px;
      top: 15px;
      right: auto;
   }
   .form{
      min-width: unset;
      width: 90%;
      left: 5%;
      margin-top: 40px;
      margin-bottom: 50px;
      top: 0;
   }
   .logobox{
      height: auto;
      line-height: 120px;
   }
   .pop-plakat .logobox p{
      font-size: 25px;
   }
   .pop-plakat img{
      margin-bottom: 30px;
   }
   .pop-plakat .ok{
      margin: 30px auto;
   }
   .registration-form{
      width: 100%;

   }
   .registration-form .step.current{
      width: 90%;
   }
   .validator-wrapper{
      right: 0;
      top: -20px;
   }
   button[type=submit]{
      width: 80%;
   }
   .form-age select {
       display: block;
       width: 100%;
       margin-right: 0;
       position: relative;
   }
   .form-age label{
      display: inline-block;
   }
   .pop-plakat p.warning{
      font-size: 17px;
   }
   .login_popup{
      margin: 0;
      left: 5%;
      top: 30px;
      width: 90%;
   }
   .close_button {
       position: absolute;
       top: 2%;
       right: 15px;
   }
   .login-form{
      width: 100%;
   }
   .login-form .field input{
      width: 90%;
   }
   #login_btn{
      width: 90%;
      margin: 0 auto;
      display: block;
   }
   .active-step{
      width: 10px;
      height: 10px;
      line-height: 35px;
      font-size: 20px;
   }
   .step-item{
      margin-right: 15px;
   }
}