:before,:after {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box 
}
 * {
     margin: 0;
     padding: 0;
     border: 0;
     outline: none 
}
 [class*="fi-"] {
     display: inline;
     width: auto;
     height: auto;
     line-height: inherit;
     vertical-align: baseline;
     background-image: none;
     background-position: 0 0;
     background-repeat: repeat 
}
 [class*="fi-"]:before {
     font-weight: 400;
     font-style: normal;
     text-decoration: inherit 
}
 html {
     height: 100%;
     left: 0;
}
 body {
     height: 100%;
     box-sizing: border-box;
     min-height: 100%;
     min-width: 100%;
     position: relative;
     z-index: 1;
     margin: 0;
     padding: 0;
     overflow: hidden;
}
 body, .preloader {
     background-color: #111111;
}
 input:-webkit-autofill {
     -webkit-box-shadow: 0 0 0 50px #292b2c inset;
     -webkit-text-fill-color: #fff 
}
 input:-webkit-autofill:focus {
     -webkit-box-shadow: 0 0 0 50px #48494a inset;
     -webkit-text-fill-color: #fff 
}
 body > #wrapper {
     height: 100%;
     min-height: 100%;
     width: 100%;
     display: inline-block 
}
 body > .main-container {
     height: 100%;
     min-height: 100%;
     min-width: 100%;
     transition: all .6s ease-in-out;
     -webkit-transition: all .6s ease-in-out;
     -moz-transition: all .6s ease-in-out;
     -o-transition: all .6s ease-in-out;
     z-index: 0;
     overflow: hidden;
     position: initial!important;
     overflow-y: auto;
}
/* body > .main-container:after{
     content: "";
     display: block;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     background-color: #111;
     opacity: 0.4;
     z-index: -1;
     position: absolute;
}
 */
 body > .login-form-container {
     background: none repeat scroll 0 0 rgba(0,0,0,0.8);
     display: none;
     height: 100%;
     min-height: 100%;
     min-width: 308px;
     max-width: 308px;
     width: 100%;
     position: fixed;
     right: -308px;
     top: 0;
     z-index: 0;
     transition: all .6s ease-in-out;
     -webkit-transition: all .6s ease-in-out;
     -moz-transition: all .6s ease-in-out;
     -o-transition: all .6s ease-in-out;
     z-index: 999;
     outline: 1px solid transparent 
}
 body.open-login-form > .login-form-container {
     right: 0 
}
 body.open-login-form > .main-container {
     -webkit-perspective: 1000px;
     perspective: 1000px;
     -ms-transform-origin: 0 50%;
     -o-transform-origin: 0 50%;
     -moz-transform-origin: 0 50%;
     -webkit-transform-origin: 0 50%;
     transform-origin: 0 50%;
     -ms-transform: perspective(1920px) rotate3d(0,1,0,9deg);
     -webkit-transform: perspective(1920px) rotate3d(0,1,0,9deg);
     transform: perspective(1920px) rotate3d(0,1,0,9deg);
     -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
     -ms-backface-visibility: hidden;
     backface-visibility: hidden;
     overflow: hidden;
}
 .btn-open-login-form {
     background: none repeat scroll 0 0 rgba(0,0,0,0.8);
     font-size: 36px;
     left: -54px;
     width:54px;
     padding-top: 6px;
     padding-bottom: 6px;
     position: absolute;
     display: inline-block;
     top: 23%;
     -webkit-border-top-left-radius: 4px;
     -webkit-border-bottom-left-radius: 4px;
     -moz-border-radius-topleft: 4px;
     -moz-border-radius-bottomleft: 4px;
     border-top-left-radius: 4px;
     border-bottom-left-radius: 4px;
     cursor: pointer;
     text-align: center;
}
 #btn-sound {
     margin-top: 60px;
     display: none;
}
 body.error .btn-open-login-form {
     color: red 
}
 .btn-open-login-form i:before, .btn-open-login-form.sound i {
     transition: all 0.3s linear;
}
 .btn-open-login-form:hover i:before, .btn-open-login-form.sound:hover i {
     -webkit-transform: scale(1.05);
     -moz-transform: scale(1.05);
     -ms-transform: scale(1.05);
     -o-transform: scale(1.05);
     transform: scale(1.05);
     opacity: 0.8;
}
 .center {
     clear: both;
     content: "";
     display: block;
     margin: 0 auto;
     max-width: 1020px;
     width: 100%;
     padding: 0 10px;
     box-sizing: border-box;
     text-align: center 
}
 .logotype {
     max-width: 100% 
}
 #wrapper {
     width: 100%;
     height: calc(100% - 90px);
     position: relative;
     display: inline-block 
}
 header {
     position: relative;
     display: inline-block;
     width: 100% 
}
 .site-content {
     position: relative;
     display: inline-block;
     width: 100%;
     left: 0;
     top: 0;
     color: #fff 
}
 .site-content .font-center {
     text-align: center 
}
 .site-content h2,.site-content h3 {
     width: 100%;
     display: block 
}
 .site-content h2.heading {
     font-size: 45px;
     font-weight: lighter 
}
 .site-content .description h3 {
     font-size: 28px;
     font-weight: lighter;
     text-align: center 
}
 .site-content .description p {
     font-size: 16px;
     margin: 0;
     line-height: normal 
}
 .site-content .description ul,.site-content .description ol {
     margin: 5px 0 
}
 .site-content .description p {
     margin-bottom: 10px 
}
 .site-content .description blockquote {
     font-size: 18px;
     font-style: italic;
     margin: .25em 0;
     padding: 1.5em 40px 0;
     line-height: 1.45;
     position: relative;
     text-align: left;
     display: block 
}
 .site-content .description blockquote:before {
     display: block;
     font-family: Georgia,serif;
     content: "\201C";
     font-size: 80px;
     position: absolute;
     left: -5px;
     top: -5px;
     opacity: .85 
}
 .site-content .description blockquote cite {
     font-size: 14px;
     display: block;
     margin-top: 5px;
     opacity: .85 
}
 .site-content .description blockquote cite:before {
     content: "\2014 \2009" 
}
 .site-content p {
     font-size: 16px;
     margin: 0 0 15px;
     line-height: 24px 
}
 footer {
     position: relative;
     top: 0;
     display: inline-block;
     width: 100%;
     color: #fff;
     margin: 25px 0 20px;
}
 footer .center {
     padding: 0 
}
 .company-name {
     width: 100%;
     display: block;
     text-decoration: none;
     font-family: inherit;
     font-weight: 700;
     color: inherit;
     font-size: 16px;
     text-align: center;
     margin: 20px 0 
}
 .logo,.logo-retina {
     font-family: inherit;
     font-weight: 400;
     text-decoration: none;
     margin-left: auto;
     margin-right: auto;
     display: block 
}
 .logo-box {
     padding: 50px 0 30px 
}
 .logo-box img {
     max-width: 100%;
}
 @media only screen and (min-width: 200px) and (max-width: 670px) {
     div.logo-box > img {
         display: block;
         width: 100%;
         height: auto;
    }
}
 .logo.istext {
     max-width: 100%;
     padding: 30px 60px 
}
 .site-title {
     font-family: inherit;
     font-weight: lighter;
     text-align: center;
     padding: 0 0 20px;
     vertical-align: middle 
}
 .login-form {
     display: inline-block;
     margin: 25px 0 0;
     padding: 20px;
     filter: alpha(opacity=50);
     -moz-opacity: .5;
     -khtml-opacity: .5;
     opacity: .5;
     -webkit-transition: opacity .3s ease-in-out;
     -moz-transition: opacity .3s ease-in-out;
     -ms-transition: opacity .3s ease-in-out;
     -o-transition: opacity .3s ease-in-out;
     transition: opacity .3s ease-in-out 
}
 .login-form input[type="text"],.login-form input[type="password"] {
     color: inherit;
     background-color: rgba(113,113,113,0.6);
     background-position: 14px center;
     background-repeat: no-repeat;
     float: left;
     font-family: inherit;
     font-size: 20px;
     font-weight: 400;
     margin: 0 0 10px;
     padding: 5px 16px 5px 40px;
     width: 100%;
     display: block;
     line-height: 28px;
     outline: none;
     max-width: 210px 
}
 .ie8 .login-form input[type="text"],.ie8 .login-form input[type="password"],.ie7 .login-form input[type="text"],.ie7 .login-form input[type="password"] {
     background-color: #717171 
}
 .login-form .licon,.login-form .picon {
     position: relative;
     display: inline-block 
}
 .ie7 .login-form .licon,.ie7 .login-form .picon {
     margin: 8px 0 0 
}
 .login-form .licon:before,.login-form .picon:before {
     position: absolute;
     font-weight: 400;
     font-style: normal;
     font-size: 24px;
     color: inherit;
     display: inline-block;
     top: 7px;
     left: 12px 
}
 .login-form .licon:before {
     content: "\f1fe";
     font-family: "foundation-icons" 
}
 .login-form .picon:before {
     content: "\f16a";
     font-family: "foundation-icons" 
}
 .login-form .licon.error:before,.login-form .picon.error:before {
     content: "\f217";
     font-family: "foundation-icons";
     color: red 
}
 .login-form a.lost-pass {
     float: left;
     display: inline-block;
     text-decoration: none 
}
 .login-form a.lost-pass:hover {
     text-decoration: underline 
}
 .login-form label {
     color: inherit;
     float: left;
     font-family: inherit;
     font-size: 25px;
     padding: 0 0 10px;
     width: 100% 
}
 .login-form input[type="submit"] {
     color: inherit;
     font-size: 20px;
     font-family: inherit;
     background: none;
     cursor: pointer;
     border: 2px solid #fff;
     font-weight: bold;
     margin: 10px 0 0;
     padding: 5px 10px;
     text-align: center;
     float: right;
     display: inline-block 
}
 input[type="submit"] {
     border: 2px solid #fff;
     padding: 5px 10px;
     font-weight: 700;
     margin: 10px 0 0;
     color: inherit;
     font-size: 20px;
     font-family: inherit;
     background: none;
     cursor: pointer;
     transition: all 0.3s linear;
}
 input[type="submit"]:hover{
     background-color: rgba(255, 255, 255, .7);
     color: #222;
}
 .login-form:hover {
     filter: alpha(opacity=100);
     -moz-opacity: 1;
     -khtml-opacity: 1;
     opacity: 1 
}
 .preloader {
     display: block;
     height: 100%;
     position: absolute;
     width: 100%;
     z-index: 99999991 
}
 .preloader i, .preloader img {
     font-size: 56px;
     background: none repeat scroll 0 0 rgba(0,0,0,0);
     display: inline-block;
     left: 50%;
     top: 50%;
     -ms-transform: translate(-50%, -50%);
     -o-transform: translate(-50%, -50%);
     -webkit-transform: translate(-50%, -50%);
     -moz-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
    /*margin: -25px 0 0 -25px;
    */
     position: absolute;
     color: inherit;
     -webkit-animation-name: spin;
     -webkit-animation-duration: 2200ms;
     -webkit-animation-iteration-count: infinite;
     -webkit-animation-timing-function: linear;
     -moz-animation-name: spin;
     -moz-animation-duration: 2200ms;
     -moz-animation-iteration-count: infinite;
     -moz-animation-timing-function: linear;
     -ms-animation-name: spin;
     -ms-animation-duration: 2200ms;
     -ms-animation-iteration-count: infinite;
     -ms-animation-timing-function: linear;
     animation-name: spin;
     animation-duration: 2200ms;
     animation-iteration-count: infinite;
     animation-timing-function: linear 
}
 .site-title, .preloader i, .login-form, .login-form a.lost-pass, .btn-open-login-form, .site-content, .user-content-wrapper, .user-content, footer, .maintenance a{
     color: #ffffff;
}
 @-ms-keyframes spin {
     from {
         -ms-transform: translate(-50%, -50%) rotate(0deg) 
    }
     to {
         -ms-transform: translate(-50%, -50%) rotate(360deg) 
    }
}
 @-moz-keyframes spin {
     from {
         -moz-transform: translate(-50%, -50%) rotate(0deg) 
    }
     to {
         -moz-transform: translate(-50%, -50%) rotate(360deg) 
    }
}
 @-webkit-keyframes spin {
     from {
         -webkit-transform: translate(-50%, -50%) rotate(0deg) 
    }
     to {
         -webkit-transform: translate(-50%, -50%) rotate(360deg) 
    }
}
 @keyframes spin {
     from {
         transform: translate(-50%, -50%) rotate(0deg) 
    }
     to {
         transform: translate(-50%, -50%) rotate(360deg) 
    }
}
 ::-webkit-input-placeholder {
     font-size: 20px;
     color: inherit;
     font-family: inherit;
     opacity: 1 
}
 :-moz-placeholder {
     font-size: 20px;
     color: inherit;
     font-family: inherit;
     opacity: 1 
}
 ::-moz-placeholder {
     font-size: 20px;
     color: inherit;
     font-family: inherit;
     opacity: 1 
}
 :-ms-input-placeholder {
     font-size: 20px;
     color: inherit;
     font-family: inherit;
     opacity: 1 
}
 #vague-svg-blur {
     width: 0;
     height: 0;
     display: inline 
}
 @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
     body.open-login-form > .main-container {
         -ms-transform-origin:0 50%;
         -o-transform-origin: 0 50%;
         -moz-transform-origin: 0 50%;
         -webkit-transform-origin: 0 50%;
         transform-origin: 0 50%;
         -ms-transform: rotateY(0deg);
         -webkit-transform: rotateY(0deg);
         transform: rotateY(0deg) 
    }
    /*body > .main-container{
        overflow-y:scroll!important
    }
    */
     .center {
         max-width: 1004px 
    }
}
 @media screen and (max-width: 1366px) {
     body.open-login-form > .main-container {
         -ms-transform-origin:0 50%;
         -o-transform-origin: 0 50%;
         -moz-transform-origin: 0 50%;
         -webkit-transform-origin: 0 50%;
         transform-origin: 0 50%;
         -ms-transform: rotateY(0deg);
         -webkit-transform: rotateY(0deg);
         transform: rotateY(0deg) 
    }
}
 @media screen and (min-width: 320px) and (max-width: 640px) and (orientation: landscape) {
     #countdown .box-digits {
         padding:30px 16px 
    }
     #countdown .digits {
         height: 120px;
         min-width: 80px 
    }
     #mailchimp-box {
         margin: 40px 0 0 
    }
     footer .social {
         text-align: center 
    }
}
 @media screen and (max-width: 480px) {
    /*body > .main-container{
        overflow-y:scroll!important
    }
    */
    body > .login-form-container {
         background:none repeat scroll 0 0 rgba(0,0,0,1) 
    }
     .center {
         max-width: 460px 
    }
     .site-content h2.heading {
         font-size: 30px;
    }
     .site-content .description h3 {
         font-size: 18px;
    }
     .btn-open-login-form {
         top: 10%;
         font-size: 32px;
         left: -52px;
         width: 52px;
    }
     #btn-sound {
         margin-top:40px;
    }
     body > .login-form-container {
         min-width: 290px;
         max-width: 290px;
         right: -293px;
    }
     .login-form input[type="text"],.login-form input[type="password"] {
         max-width: 170px 
    }
     footer .social {
         text-align: center 
    }
     footer {
        /*padding: 0 0 20px*/
    }
}
 @media screen and (max-width: 360px) {
     .center {
         max-width:340px 
    }
}
 @media screen and (max-width: 320px) {
     .center {
         max-width:300px 
    }
     .site-content h2.heading {
         font-size: 24px 
    }
     .site-content .description h3 {
         font-size: 18px 
    }
     .btn-open-login-form {
         top: 10%;
         font-size: 21px;
         left: -44px;
         width: 44px;
    }
     #btn-sound {
         margin-top:40px;
    }
     body > .login-form-container {
         min-width: 266px;
         max-width: 266px;
         right: -266px 
    }
     .login-form input[type="text"],.login-form input[type="password"] {
         max-width: 170px 
    }
}
 .bg-img{
     width: 100%;
     height: 100%;
     overflow: hidden;
     position: absolute;
     top: 0;
     left: 0;
     z-index: -1;
}
 .bg-img img, .bg-img source{
     position: absolute;
     visibility: visible;
     z-index: -1;
     top: 50%;
     left: 50%;
     -ms-transform: translate(-50%, -50%);
     -o-transform: translate(-50%, -50%);
     -webkit-transform: translate(-50%, -50%);
     -moz-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
     width: auto;
     height: auto;
     min-width: 100%;
     min-height: 100%;
}
 @supports (object-fit: cover){
     .bg-img img, .bg-img source{
         min-height: 100%;
         min-width: 100%;
         object-fit: cover;
         max-width: 100%;
         max-height: 100%;
    }
}
 .login-error{
     margin-bottom: 10px;
     color: red;
     display: inline-block;
}
/*!-------------------------------------------------------------------- STYLES "Outdated Browser" Version: 1.1.2 - 2015 author: Burocratik website: http://www.burocratik.com * @preserve -----------------------------------------------------------------------*/
 #outdated{
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     padding: 10px 0;
     opacity: 0.7;
     text-align: center;
     text-transform: uppercase;
     z-index:1500;
     background-color: #f25648;
     color: #ffffff;
}
 * html #outdated{
    position: absolute;
}
 #outdated h6{
    font-size: 25px;
     line-height: 25px;
     margin: 30px 0 10px;
}
 #outdated p{
    font-size: 12px;
     line-height: 12px;
     margin: 0;
}
 #outdated #btnUpdateBrowser{
     display: block;
     position: relative;
     padding: 10px 20px;
     margin: 30px auto 0;
     width: 230px;
    /*need for IE*/
     color: #ffffff;
     text-decoration: none;
     border: 2px solid #ffffff;
     cursor: pointer;
}
 #outdated #btnUpdateBrowser:hover{
    color: #f25648;
     background-color:#ffffff;
}
 #outdated .last{
    position: absolute;
     top: 10px;
     right: 25px;
     width: 20px;
     height: 20px;
}
 #outdated .last[dir='rtl']{
    right: auto !important;
     left: 25px !important;
}
 #outdated #btnCloseUpdateBrowser{
     display: block;
     position: relative;
     width: 100%;
     height: 100%;
     text-decoration: none;
     color: #ffffff;
     font-size: 36px;
     line-height: 36px;
}
 @supports (transform: translate(0, 0)) {
     #outdated {
         display: none;
    }
}
 @supports (-webkit-transform: translate(0, 0)) {
     #outdated {
         display: none;
    }
}
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
     #outdated {
         display: none;
    }
}