@import url(//fonts.googleapis.com/css?family=Lato:300,700,900);
@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);

/* login-problems (mac) when de-activating user-select with wildcard selector * */
html {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: -moz-none;
  -o-user-select: none;
  user-select: none;
}

input[type=text],input[type=password] {
  font-family: 'Lato', sans-serif;
  font-size:16px;
  text-decoration:none;
  color:#dfdfdf;
  border:1px solid #fff;
  padding:12px 16px;
  cursor:pointer;
  letter-spacing:2px;
  text-align:center;
  display:block;
  margin: 20px auto;
  -webkit-transition:.4s background ease;
  -moz-transition:.4s background ease;
  -o-transition:.4s background ease;
  transition:.4s background ease;
  border-radius: 3px;
  
  background:rgba(0,0,0,0.25) !important;
  background:rgba(255,255,255,0.15) !important;
  
  border: none;
}

input:hover,input:focus {
    color:#333;
    background:rgba(0,0,0,0.35) !important;
    background:rgba(255,255,255,0.35) !important;
    
}

/* workaround to remmove standard yellow background-color from autofilled fields in chrome */
/* input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset !important; } */
/* workaround to get transparent backgrounds and text-color to work: http://stackoverflow.com/a/32505530 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-transition: "color 9999s ease-out, background-color 9999s ease-out";
    -webkit-transition-delay: 9999s;
    -webkit-text-fill-color: #dfdfdf;;
    background-color:rgba(255,255,255,0.35) !important;
}



/* GENERAL STYLES
================================================== */
html {
    height:100%;
    overflow: hidden !important;
}

body {
    background: #222;
    font:15px/23px 'Lato', sans-serif;
    margin:0;
    padding:0;
    height:100%;
    width:100%;
    -webkit-font-smoothing:antialiased;
    -webkit-text-size-adjust:100%;
    cursor: default;
    color: #eee;
}

p {
    font-size:20px;
    line-height:140%;
    text-align:center;
    cursor: default;
}

ul li {
    display:inline-block;
    list-style:none;
    padding-right: 10px;
}

.wrapper {
    z-index:600;
    position:relative
}

.pattern {
    background-image:url(/_files/imgs/login.pattern_black90.png);
    background-repeat:repeat;
    background-attachment:scroll;
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    opacity:0.4;
}

.divider {
    background:url(/_files/imgs/login.divider3.png) center center no-repeat;
    text-align:center;
    color: white;
    padding: 20px 0px;
    
    display:block;
    width:300px;
    height:35px;
    margin:0px auto
}

#login {
  -webkit-transition:.4s background ease;
  -moz-transition:.4s background ease;
  -o-transition:.4s background ease;
  transition:.4s background ease;
}

#colorize {
    font-family: 'Lato', sans-serif;
    font-weight: 300 !important;
    font-size:30px;
    letter-spacing: -2px;
    
    color:#ec9457; /* cda25f f1c40f */
    text-align:center;
    display:inline-block;

    background-attachment:scroll;
    background-repeat:repeat-x;
    background-position:top center;
    cursor: default;
    
    margin: 5px 0px 30px 0px;
}



/* BIG VIDEO BACKGROUND
================================================== */
.big-background {
    z-index:550;
    text-align:center;
    height:100%;
    min-height:100%;
    position:relative;
    overflow:hidden
}

.big-background .big-background-container {
    width:830px;
    max-width:100%;
    display:inline-block;
    position:absolute;
    top:45%;
    left:50%;
    -webkit-transform:translate(-50%,-45%);
    -moz-transform:translate(-50%,-45%);
    -ms-transform:translate(-50%,-45%);
    -o-transform:translate(-50%,-45%);
    transform:translate(-50%,-45%)
}

.big-background-title {
    font-family: 'Lato', sans-serif;
    font-weight:600 !important;
    font-size:91px;
    letter-spacing:-4px;
    line-heigth: 1nw;
    color:#fff;
    text-align:center;
    margin-top:0px;
    margin-bottom:28px;
    padding-top:9px;
    display:inline-block;
    background-attachment:scroll;
    background-repeat:repeat-x;
    background-position:top center;
    cursor: default;
}

a.big-background-btn {
    font-family: inherit;
    font-size:16px;
    text-decoration:none;
    color:#fff;
    background:transparent;
    border:2px solid rgba(255, 255, 255, 0.22);
    padding:10px 16px;
    cursor:pointer;
    letter-spacing:2px;
    text-align:center;
    display:inline-block;
    -webkit-transition:.4s background ease;
    -moz-transition:.4s background ease;
    -o-transition:.4s background ease;
    transition:.4s background ease;
    border-radius: 1px;
    
    background:rgba(255,255,255,0.15);
    /*border: none;*/
    margin-top: 10px;
}

.big-background-btn:hover {
    color:#fff;
    background:rgba(255,255,255,0.35)
}

.big-background-default-image {
    background: url(/_files/imgs/login.backgrounds/hero16.jpg);
    background-size: cover;
    background-repeat:no-repeat;
    background-position:center center;
    width:100%;
    height:100%;
    z-index:0;
    backface-visibility:hidden
}


input[type=text],input[type=password],.big-background-btn {
  /*
  -webkit-border-radius: 32px / 54px  !important;
  border-radius: 32px / 54px !important;
  */
  -webkit-border-radius: 10px / 4px  !important;
  border-radius: 10px / 4px !important;
  outline: none !important;
}

.forgotpwd { transition: all 0.6s ease; }
.forgotpwd--hidden { opacity:0 !important; }
a.forgotpwd {
  opacity:0.5;color:#F2F2F2;font-family:inherit;font-size:85%;font-weight:700;line-height:1.6;text-decoration: none;letter-spacing:0.05em; 
}
a.forgotpwd:hover { opacity:1; }
.footerwrap {
  background:transparent;opacity:0.5;height:80px;width:100%;position:fixed;bottom:0;padding-top:5px; transition: all 0.6s ease;
}
.footerwrap--hidden { opacity:0 !important; }
.footer, .footer a {
  color:#F2F2F2;font-family:inherit;font-size:85%;font-weight:900;line-height:1.6;text-decoration: none;
}
.left {
  float:left;margin-left:90px;text-align:left;
}
.right {
  float:right;margin-right:90px;text-align:right;
}
.iconpos {
  margin: -12px 0px 0px 2px;
}
.devbg {
  background: #030e03;
  padding: 6px 13px;
  border-radius: 15px;
}



/* SPINNER
================================================== */
  .sp {
    width: 50px;
    height: 50px;
    clear: both;
    margin: 0px auto;
  }
  .sp--xs { width: 18px; height: 18px; }
  .sp--s { width: 28px; height: 28px; }
  .sp--sm { width: 36px; height: 36px; }
  .sp--m { width: 50px; height: 50px; }
  .sp--l { width: 80px; height: 80px; }
  .sp--xl { width: 110px; height: 110px; }
  
  .sp-circle {
    border: 14px rgba(236, 148, 87, 0.26) solid;
    border-top: 14px #ff954c solid;
    border-radius: 50%;
    -webkit-animation: spCircRot 1s infinite linear;
    animation: spCircRot 1.4s infinite linear;
  }
  .sp-circle--xs { border-width: 4px; border-top-width: 4px; }
  .sp-circle--s { border-width: 8px; border-top-width: 8px; }
  .sp-circle--sm { border-width: 10px; border-top-width: 10px; }
  .sp-circle--m { border-width: 14px; border-top-width: 14px; }
  .sp-circle--l { border-width: 17px; border-top-width: 17px; }
  .sp-circle--xl { border-width: 22px; border-top-width: 22px; }
  
  .sp-circle--color-white {
    border-color: rgba(255, 255, 225, 0.3);
    border-top-color: rgba(255, 255, 225, 1);
  }
  .sp-circle--color-blue {
    border-color: rgba(26, 147, 222, 0.26);
    border-top-color: rgba(26, 147, 222, 1);
  }
  .sp-circle--color-normal,
  .sp-circle--color-orange {
    border-color: rgba(236, 148, 87, 0.26);
    border-top-color: #ff954c;
  }
  
  .sp-circle--speed-slow { animation: spCircRot 1.9s infinite linear; }
  .sp-circle--speed-normal { animation: spCircRot 1.4s infinite linear; }
  .sp-circle--speed-fast { animation: spCircRot 1s infinite linear; }
  .sp-circle--speed-faster { animation: spCircRot 0.7s infinite linear; }
  .sp-circle--speed-fastest { animation: spCircRot 0.5s infinite linear; }
  
  @-webkit-keyframes spCircRot {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(359deg); }
  }
  @keyframes spCircRot {
    from { transform: rotate(0deg); }
    to { transform: rotate(359deg); }
  }



/* MEDIA QUERIES
================================================== */

@media screen and (max-width: 768px) {}
@media screen and (max-width: 480px) {
    .big-background-title {
        font-size:68px
    }
    #colorize {
        font-size:26px
    }
    input[type=text],input[type=password] {
        padding: 10px 4px;
    }
    /*.player{ display: none;}  -> If you want to remove the video bg on a specific viewport w/o plugin*/
    
    .left {
        float:none;margin:0px;text-align:center;
    }
    .right {
        float:none;margin:0px;text-align:center;
    }
}
@media screen and (max-width: 360px) {}
@media screen and (max-width: 320px) {}