@charset "utf-8";
article,aside,figcaption,figure,footer,header,main,hgroup,nav,section,time,ul,ol,li,h1,h2,h3{ display: block; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-box-sizing: border-box; }
html,body,div,main,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input,textarea,span{margin: 0; padding: 0; -moz-box-sizing: border-box; box-sizing: border-box; }
table, tr, tr{ -moz-box-sizing: border-box; box-sizing: border-box; -webkit-box-sizing: border-box; }
input, textarea, select, button, body{  }
*{
    font-kerning: normal;
    -webkit-font-kerning: normal;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    z-index: : 1;
 }
a, select, option{ cursor: pointer; }
ul.reset{ list-style: none; }
a:link, a:visited, .anim, img
{
    -webkit-transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
    -moz-transition:    color 0.2s ease, background 0.2s ease, border-color 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
    -ms-transition:     color 0.2s ease, background 0.2s ease, border-color 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
    -o-transition:      color 0.2s ease, background 0.2s ease, border-color 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
    transition:         color 0.2s ease, background 0.2s ease, border-color 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
}
a:link, a:visited
{
    color: #398dd8;
    text-decoration: none;
}
a:hover
{
    text-decoration: none;
}
a:active{ outline: none; }
.clear{ clear: both; }
.bg_noimage{ background-image: none; }
.dnone{ display: none; }
.center{ text-align: center; }
input:disabled{ cursor: not-allowed; }
input::-moz-focus-inner{border:0;padding:0;}
button::-moz-focus-inner{border:0;padding:0;}
select::-moz-focus-inner{border:0;padding:0;}
textarea::-moz-focus-inner{border:0;padding:0;}
option::-moz-focus-inner{border:0;padding:0;}


input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button,
input[type="number"],
input[type="number"]:hover,
input[type="number"]:focus { -moz-appearance: textfield; -webkit-appearance: none;  }

input[type="date"]{ text-align: center; }

input[type="number"]:hover,
input[type="date"]:hover,
input[type="text"]:hover,
input[type="password"]:hover,
textarea:hover
{
    -moz-user-focus: none !important;
    border-color: #111111;
    color: #555555;
    background-color: #FFFFFF;
    cursor: pointer;
    outline: none;
}
input[type]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus
{
    -moz-user-focus: none !important;
    border-color: #111111;
    color: #000000;
    background-color: #FFFFFF;
    cursor: text;
    outline: none;
}

input[type="number"][disabled="disabled"],
input[type="date"][disabled="disabled"],
input[type="text"][disabled="disabled"],
input[type="password"][disabled="disabled"],
textarea[disabled="disabled"],
input[type="text"][readonly="readonly"],
input[type="password"][readonly="readonly"],
textarea[readonly="readonly"]{ cursor: text; outline: none; }

body.landing
{
    --landing-width: 980px;
    --landing-nav-height: 6vh;
    --landing-font-size: 16px;
    --landing-color-header: #217ac3;
    --landing-color-header-text: #FFFFFF;
    --landing-color-simple-text: #262626;
    --landing-base-z-index: 20;

    --landing-color-gray: #E6E6E6;
}


body.landing
{
    background: #FFFFFF url(../img/spacer.png) 50% 50% no-repeat;
    background-size: cover;
    position:   relative;
    font-family: 'Open Sans',Arial,sans-serif;
    font-size:  var(--landing-font-size);
    overflow:   scroll;
    overflow-x: hidden;
}

/*********************************/

#login{ display: none; }

/*********************************/

.landing h1{ font-size: calc( var(--landing-font-size) * 1.8 ) }
.landing h2{ font-size: calc( var(--landing-font-size) * 1.2 ) }

.landing header,
.landing section,
.landing footer{ width: 100vw; padding: 0 calc( (( 100vw - var(--landing-width) )/2) ); padding-bottom: 0px; }

/*********************************/

.landing header               { z-index: calc( var(--landing-base-z-index) + 10 ); background: var(--landing-color-header); }
.landing section              { z-index: calc( var(--landing-base-z-index) - 5 );  background: #FFFFFF; padding-top: calc( var(--landing-nav-height) ); padding-bottom: calc( var(--landing-nav-height) ); }
.landing section#main         { background: var(--landing-color-header); min-height: 50vh; }
.landing section#about        { background: #FFFFFF; min-height: 50vh; }
.landing section#rules        { background: var(--landing-color-gray); min-height: 50vh; }
.landing section#price        { background: var(--landing-color-header); min-height: 5vh; }
.landing section#contacts     { background: #FFFFFF; min-height: 50vh; }
.landing section#login        { background: #FFFFFF; min-height: 50vh; }
.landing section#lostpassword { background: #FFFFFF; min-height: 50vh; }
.landing section#register     { background: #FFFFFF; min-height: 50vh; }
.landing footer               { z-index: 100;  background: #FFFFFF; min-height: 10vh; padding-top: 2vw; padding-bottom: 2vw; }

/*********************************/

.landing header, .landing section#main{  }

/*********************************/

.landing header{     height: var(--landing-nav-height); position: fixed; top: 0px; left: 0px; }
.landing header nav{ height: var(--landing-nav-height); padding-top: calc( (var(--landing-nav-height) - ( var(--landing-font-size) * 1.2 ))/2 ); }
.landing header nav ul{ display: block; width: var(--landing-width); list-style: none;  }
.landing header nav ul li{ display: block; float: right; text-align: center; padding: 0px 0px 0px calc( var(--landing-font-size)*2 ); }
.landing header nav ul li a{ color: var(--landing-color-header-text); }
.landing header nav ul li[data-role="main"] { float: left; text-align: left; padding: 0px calc( var(--landing-font-size)*2) 0px 0px; }
.landing header nav ul li[data-role="about"]{  }
.landing header nav ul li[data-role="price"]{  }
.landing header nav ul li[data-role="rules"]{  }
.landing header nav ul li[data-role="login"]{ text-align: right; }

/*********************************/

.landing section#main{ padding-bottom: 1vh; }
.landing section#main .frame{ border-top: 1px solid var(--landing-color-header-text); padding: 30px 0px 0px 0px; }
.landing section#main .frame .description{ background: var(--landing-color-header) url("../img/image_01.png") no-repeat 100% 100%; min-height: 510px; padding: 0px 430px 0px 0px; text-align: center; position: relative; }
.landing section#main h1{ margin: 10px 0px 2vh 0px; text-align: center; color: var(--landing-color-header-text); }
.landing section#main .description p{ text-align: justify; text-indent: 2vw; text-align: justify; line-height: calc( var(--landing-font-size) * 2); font-size: calc( var(--landing-font-size) * 1.2 ); color: var(--landing-color-header-text); }
.landing section#main .description a.button{ display: inline-block; padding: 20px 10px 20px 10px; width: 40%; margin: 30px 10px; font-size: calc( var(--landing-font-size) * 1.1 ); color: var(--landing-color-header-text); background: var(--landing-color-header); border: 3px solid var(--landing-color-header-text); border-radius: 20px; text-align: center; }
.landing section#main .description a.button:hover{ color: var(--landing-color-header); background: var(--landing-color-header-text); text-align: center; }
.landing section#main .description a.button.try         { color: var(--landing-color-header); background: var(--landing-color-header-text); }
.landing section#main .description a.button.try:hover   { color: var(--landing-color-header-text); background: var(--landing-color-header); }

.landing section#main .description .rotate_frame { position: absolute; width: 140px; bottom: 40px; right: 120px; }
.landing section#main .description .rotate_frame img { width: 100%; }

.landing section#main .description .rotate_frame{
        --rotation-angle: 8deg;
        animation: spin 3s linear infinite normal ;
}
@keyframes spin
{
    0%{   transform: rotate(0deg); }
    25%{  transform: rotate( calc(var(--rotation-angle)*-1) ); }
    50%{  transform: rotate(0deg); }
    75%{  transform: rotate( var(--rotation-angle) ); }
    100%{ transform: rotate(0deg); }
 }

/**/

/*********************************/

.landing #about{  }
.landing #about h2{ text-align: center; font-size: calc( var(--landing-font-size) * 2); color: var(--landing-color-simple-text); padding: 0px 0px 2vh 0px; }
.landing #about .description{ line-height: calc( var(--landing-font-size) * 2); font-size: calc( var(--landing-font-size) * 1.3); }
.landing #about .description p{ text-align: justify; text-indent: 2vw; }


.landing #about .functions{ width: var(--landing-width); border: none; z-index: var(--landing-base-z-index); }
.landing #about .functions .frame
{
    --functions-count: 4;
    --paddin-side: 15px;
}
.landing #about .functions .frame
{
    display: block;
    width: calc( var(--landing-width) / var(--functions-count) );
    float: left;
    border: none;
    background: none;
    padding: var(--paddin-side) calc(var(--paddin-side) / 2 );
    padding-bottom: calc( (var(--paddin-side) / 3) );
    margin: 0px;
    text-align: center;
    z-index: calc( var(--landing-base-z-index) + 1 );
}
.landing #about .functions .frame{ padding-left: 0px; padding-right: var(--paddin-side); }
.landing #about .functions .frame + .frame{          padding-left: calc( (var(--paddin-side) / 7) * 3 ); padding-right: calc( (var(--paddin-side) / 7) * 4 ); }
.landing #about .functions .frame + .frame + .frame{ padding-left: calc( (var(--paddin-side) / 7) * 4 ); padding-right: calc( (var(--paddin-side) / 7) * 3 );  }
.landing #about .functions .frame + .frame + .frame + .frame{ padding-right: 0px; padding-left: var(--paddin-side); }

.landing #about .functions .frame .function{ --function-width: calc( ( var(--landing-width) / var(--functions-count) ) - var(--paddin-side) );  }
.landing #about .functions .frame .function{ display: block; position: relative; width: var(--function-width); padding: 20px 20px 20px 20px; margin: 0px; border: 1px solid var(--landing-color-simple-text); }
.landing #about .functions .frame .function h3{ margin-bottom: var(--landing-font-size); font-size: calc( var(--landing-font-size) * 1.2 ); color: var(--landing-color-simple-text); }
.landing #about .functions .frame .function .icon{ padding: 10px; text-align: center; }
.landing #about .functions .frame .function .icon img{  width: calc( (var(--function-width)/5)*2 ); }
.landing #about .functions .frame .function p{ text-align: center; text-align-last: center; font-size: calc( var(--landing-font-size) * 1 ); color: var(--landing-color-simple-text); }

.landing #about .functions .frame:hover                 { z-index: calc( var(--landing-base-z-index) + 2 ); }
.landing #about .functions .frame:hover .function       { border-color: var(--landing-color-header); cursor: pointer; box-shadow: 0px 0px var(--paddin-side) var(--landing-color-header); }
.landing #about .functions .frame:hover .function h3    { color: var(--landing-color-header); }
.landing #about .functions .frame:hover .function p     { color: var(--landing-color-header); }
.landing #about .functions .frame:hover .function img   { filter: invert(40%) sepia(31%) saturate(1771%) hue-rotate(172deg) brightness(95%) contrast(91%); }

/*********************************/
.landing section#rules{ }
.landing section#rules h2{ text-align: center; font-size: calc( var(--landing-font-size) * 2); color: var(--landing-color-simple-text); padding: 0px 0px 2vh 0px; }
.landing section#rules .description{ line-height: calc( var(--landing-font-size) * 2); font-size: calc( var(--landing-font-size) * 1.3); }
.landing section#rules .description p{ text-align: justify; text-indent: 2vw; }
.landing section#rules .description ul
{
    list-style: circle;
    list-style-position: outside;
    margin-top: 2vh;
    margin-left: calc( var(--landing-font-size) * 4);
    z-index: calc( var(--landing-base-z-index) + 1 );
}
.landing section#rules .description ul li{ display: list-item; margin-left: 0px; padding-left: calc( var(--landing-font-size) * 1); padding-bottom: calc( var(--landing-font-size) / 2); z-index: calc( var(--landing-base-z-index) + 2 ); }
.landing section#rules .description ul li:last-of-type{ padding-bottom: none; }
/*********************************/
.landing section#price{ color: var(--landing-color-header-text); }
.landing section#price h2{ text-align: center; font-size: calc( var(--landing-font-size) * 2); color: var(--landing-color-header-text); padding: 0px 0px 2vh 0px; }
.landing section#price .description{ line-height: calc( var(--landing-font-size) * 2); font-size: calc( var(--landing-font-size) * 1.3); }
.landing section#price .description p{ text-align: justify; text-indent: 2vw; }

.landing section#price .functions{ width: var(--landing-width); border: none; z-index: var(--landing-base-z-index); }
.landing section#price .functions .frame
{
    --functions-count: 2;
    --paddin-side: 10px;
}
.landing section#price .functions .frame
{
    display: block;
    width: calc( var(--landing-width) / var(--functions-count) );
    float: left;
    border: none;
    background: none;
    padding: var(--paddin-side);
    padding-bottom: var(--paddin-side) );
    margin: 0px;
    text-align: center;
    z-index: calc( var(--landing-base-z-index) + 1 );
}
.landing section#price .functions .frame{ padding-left: 0px; padding-right: var(--paddin-side); }
.landing section#price .functions .frame:first-of-type{ padding-left: none; padding-right: var(--paddin-side); }
.landing section#price .functions .frame:last-of-type{ padding-right: none; padding-left: var(--paddin-side); }

.landing #price .functions .frame .function{ --function-width: calc( ( var(--landing-width) / var(--functions-count) ) - var(--paddin-side) );  }
.landing #price .functions .frame .function{ display: block; position: relative; width: var(--function-width); padding: 20px 20px 20px 20px; margin: 0px; border: 1px solid #FFFFFF; }
.landing #price .functions .frame .function h3{ margin-bottom: var(--landing-font-size); font-size: calc( var(--landing-font-size) * 1.2 ); color: #FFFFFF; }
.landing #price .functions .frame .function .icon{ float: left; width: calc( (var(--function-width)/6)*1 ); overflow: hidden; }
.landing #price .functions .frame .function .icon img{  width: 100%;  }
.landing #price .functions .frame .function p{ float: right; width: calc( (var(--function-width)/6)*4 ); text-align: justify; text-align-last: left; font-size: calc( var(--landing-font-size) * 1 ); color: #FFFFFF; }

/*********************************/
.landing section#contacts{ }
.landing section#contacts h2{ text-align: center; font-size: calc( var(--landing-font-size) * 2); color: var(--landing-color-simple-text); padding: 0px 0px 2vh 0px; }
.landing section#contacts .description{ line-height: calc( var(--landing-font-size) * 2); font-size: calc( var(--landing-font-size) * 1.3); }
.landing section#contacts .description p{ text-align: justify; text-indent: 2vw; }
/*********************************/

.landing .loginform
{
    --loginform-width: calc( var(--landing-width) / 2 );
    --loginform-top-margin: 20vh;
}
.landing .loginform  { width: var(--loginform-width); margin: var(--loginform-top-margin) calc( (var(--landing-width) - var(--loginform-width))/2 ); margin-bottom: var(--loginform-top-margin); text-align: center;  }
.landing .loginform  input[type="text"],
.landing .loginform  input[type="password"]{ width: 100%; font-size: calc( var(--landing-font-size) * 1.2 ); padding: 15px; margin: 5px 0px 5px 0px; }
.landing .loginform  button[type="submit"]{ width: 100%; font-size: calc( var(--landing-font-size) * 1.2 ); padding: 15px; margin: 5px 0px 5px 0px; cursor: pointer; }
.landing .loginform  p{ text-align: center; display: inline-block; margin-top: 15px; }

.landing footer{ padding-top: 5vh; padding-bottom: 5vh; }