@font-face {
 font-family:SourceSansPro-Regular;
 src:url(../font/SourceSansPro-Regular.ttf)
}
@font-face {
 font-family:SourceSansPro-Bold;
 src:url(../font/SourceSansPro-Bold.ttf)
}
@font-face {
 font-family:SourceSansPro-SemiBold;
 src:url(../font/SourceSansPro-SemiBold.ttf)
}
@font-face {
 font-family:JosefinSans-Bold;
 src:url(../font/JosefinSans-Bold.ttf)
}
* {
 margin:0;
 padding:0;
 box-sizing:border-box
}
body,
html {
 height:100%;
 font-family:SourceSansPro-Regular,sans-serif
}
a {
 font-family:SourceSansPro-Regular;
 font-size:14px;
 line-height:1.7;
 color:#666;
 margin:0;
 transition:all .4s;
 -webkit-transition:all .4s;
 -o-transition:all .4s;
 -moz-transition:all .4s
}
a:focus {
 outline:none!important
}
a:hover {
 text-decoration:none
}
h1,
h2,
h3,
h4,
h5,
h6 {
 margin:0
}
p {
 font-family:SourceSansPro-Regular;
 font-size:14px;
 line-height:1.7;
 color:#666;
 margin:0
}
ul,
li {
 margin:0;
 list-style-type:none
}
input {
 outline:none;
 border:none
}
textarea {
 outline:none;
 border:none
}
textarea:focus,

input::-webkit-input-placeholder {
 color:#4b2354
}
input:-moz-placeholder {
 color:#4b2354
}
input::-moz-placeholder {
 color:#4b2354
}
input:-ms-input-placeholder {
 color:#4b2354
}
textarea::-webkit-input-placeholder {
 color:#4b2354
}
textarea:-moz-placeholder {
 color:#4b2354
}
textarea::-moz-placeholder {
 color:#4b2354
}
textarea:-ms-input-placeholder {
 color:#4b2354
}
button {
 outline:none!important;
 border:none;
 background:0 0
}
button:hover {
 cursor:pointer
}
iframe {
 border:none!important
}
.txt1 {
 font-family:SourceSansPro-Regular;
 font-size:16px;
 line-height:1.4;
 color:#999
}
.txt2 {
 font-family:SourceSansPro-Regular;
 font-size:16px;
 line-height:1.4;
 color:#4b2354
}
.hov1:hover {
 color:#4b2354;
 text-decoration:underline
}
.container {
 width:100%;
 min-height:100vh;
 display:-webkit-box;
 display:-webkit-flex;
 display:-moz-box;
 display:-ms-flexbox;
 display:flex;
 flex-wrap:wrap;
 justify-content:center;
 align-items:center;
 padding:15px;
 background-repeat:no-repeat;
 background-size:cover;
 background-position:center;
 position:relative;
 z-index:1
}
/*.container::before {*/
/* content:"";*/
/* display:block;*/
/* position:absolute;*/
/* z-index:-1;*/
/* width:100%;*/
/* height:100%;*/
/* top:0;*/
/* left:0;*/
/* background:rgba(93,84,240,0.05);*/
/* background:-webkit-linear-gradient(left,rgba(0,168,255,0.5),rgba(185,0,255,0.05));*/
/* background:-o-linear-gradient(left,rgba(0,168,255,0.5),rgba(185,0,255,0.05));*/
/* background:-moz-linear-gradient(left,rgba(0,168,255,0.5),rgba(185,0,255,0.05));*/
/* background:linear-gradient(left,rgba(0,168,255,0.5),rgba(185,0,255,0.05));*/
/* pointer-events:none*/
/*}*/
.wrap{
 width:390px;
 background:#ffffffc7;
 border-radius:10px;
 overflow:hidden;
 box-shadow:0 3px 20px 0 rgba(0,0,0,.1);
 -moz-box-shadow:0 3px 20px 0 rgba(0,0,0,.1);
 -webkit-box-shadow:0 3px 20px 0 rgba(0,0,0,.1);
 -o-box-shadow:0 3px 20px 0 rgba(0,0,0,.1);
 -ms-box-shadow:0 3px 20px 0 rgba(0,0,0,.1)
}
.login100-form {
 width:100%
}
.login100-form-title {
 display:block;
 font-family:SourceSansPro-Bold;
 font-size:30px;
 color:#4b2354;
 line-height:1.2;
 text-align:center
}
.wrap-input100 {
 width:100%;
 position:relative;
 background-color:#fff;
 border-radius:20px
}
.input100 {
 font-family:SourceSansPro-Bold;
 font-size:16px;
 color:#4b2354;
 line-height:1.2;
 display:block;
 width:100%;
 height:62px;
 background:0 0;
 padding:0 20px 0 23px
}
.focus-input100 {
 display:block;
 position:absolute;
 width:100%;
 height:100%;
 top:0;
 left:0;
 pointer-events:none;
 border-radius:20px;
 box-shadow:0 5px 30px 0 rgba(0,0,0,.1);
 -moz-box-shadow:0 5px 30px 0 rgba(0,0,0,.1);
 -webkit-box-shadow:0 5px 30px 0 rgba(0,0,0,.1);
 -o-box-shadow:0 5px 30px 0 rgba(0,0,0,.1);
 -ms-box-shadow:0 5px 30px 0 rgba(0,0,0,.1);
 -webkit-transition:all .4s;
 -o-transition:all .4s;
 -moz-transition:all .4s;
 transition:all .4s
}
.input100:focus+.focus-input100 {
 box-shadow:0 5px 30px 0 rgba(0,0,0,.2);
 -moz-box-shadow:0 5px 30px 0 rgba(0,0,0,.2);
 -webkit-box-shadow:0 5px 30px 0 rgba(0,0,0,.2);
 -o-box-shadow:0 5px 30px 0 rgba(0,0,0,.2);
 -ms-box-shadow:0 5px 30px 0 rgba(0,0,0,.2)
}
.container-form-btn {
 width:100%;
 display:-webkit-box;
 display:-webkit-flex;
 display:-moz-box;
 display:-ms-flexbox;
 display:flex;
 flex-wrap:wrap;
 justify-content:center
}
.login100-form-btn {
 display:-webkit-box;
 display:-webkit-flex;
 display:-moz-box;
 display:-ms-flexbox;
 display:flex;
 justify-content:center;
 align-items:center;
 padding:0 20px;
 min-width:160px;
 height:50px;
 background-color:#bd59d4;
 border-radius:25px;
 font-family:SourceSansPro-SemiBold;
 font-size:14px;
 color:#fff;
 line-height:1.2;
 text-transform:uppercase;
 -webkit-transition:all .4s;
 -o-transition:all .4s;
 -moz-transition:all .4s;
 transition:all .4s;
 box-shadow:0 10px 30px 0 rgba(189,89,212,.5);
 -moz-box-shadow:0 10px 30px 0 rgba(189,89,212,.5);
 -webkit-box-shadow:0 10px 30px 0 rgba(189,89,212,.5);
 -o-box-shadow:0 10px 30px 0 rgba(189,89,212,.5);
 -ms-box-shadow:0 10px 30px 0 rgba(189,89,212,.5)
}
.login100-form-btn:hover {
 background-color:#4b2354;
 box-shadow:0 10px 30px 0 rgba(189,89,212,.8);
 -moz-box-shadow:0 10px 30px 0 rgba(189,89,212,.8);
 -webkit-box-shadow:0 10px 30px 0 rgba(189,89,212,.8);
 -o-box-shadow:0 10px 30px 0 rgba(189,89,212,.8);
 -ms-box-shadow:0 10px 30px 0 rgba(189,89,212,.8)
}
.validate-input {
 position:relative
}
.alert-validate .focus-input100 {
 box-shadow:0 5px 30px 0 rgba(250,66,81,.1);
 -moz-box-shadow:0 5px 30px 0 rgba(250,66,81,.1);
 -webkit-box-shadow:0 5px 30px 0 rgba(250,66,81,.1);
 -o-box-shadow:0 5px 30px 0 rgba(250,66,81,.1);
 -ms-box-shadow:0 5px 30px 0 rgba(250,66,81,.1)
}
.alert-validate::before {
 content:attr(data-validate);
 display:-webkit-box;
 display:-webkit-flex;
 display:-moz-box;
 display:-ms-flexbox;
 display:flex;
 align-items:center;
 position:absolute;
 width:100%;
 min-height:62px;
 background-color:#fff;
 border-radius:20px;
 top:0;
 left:0;
 padding:0 45px 0 22px;
 pointer-events:none;
 font-family:SourceSansPro-Bold;
 font-size:16px;
 color:#fa4251;
 line-height:1.2
}
.btn-hide-validate {
 font-family:Material-Design-Iconic-Font;
 font-size:15px;
 color:#fa4251;
 cursor:pointer;
 display:-webkit-box;
 display:-webkit-flex;
 display:-moz-box;
 display:-ms-flexbox;
 display:flex;
 align-items:center;
 justify-content:center;
 position:absolute;
 height:62px;
 top:0;
 right:23px
}
.rs1-alert-validate.alert-validate::before {
 background-color:#fff
}
.true-validate::after {
 content:"\f269";
 font-family:Material-Design-Iconic-Font;
 font-size:15px;
 color:#57b846;
 display:-webkit-box;
 display:-webkit-flex;
 display:-moz-box;
 display:-ms-flexbox;
 display:flex;
 align-items:center;
 justify-content:center;
 position:absolute;
 height:62px;
 top:0;
 right:23px
}
.login100-social-item {
 font-size:25px;
 color:#3b5998;
 display:-webkit-box;
 display:-webkit-flex;
 display:-moz-box;
 display:-ms-flexbox;
 display:flex;
 justify-content:center;
 align-items:center;
 width:50px;
 height:50px;
 border-radius:50%;
 background-color:#fff;
 margin:5px;
 box-shadow:0 5px 20px 0 rgba(0,0,0,.1);
 -moz-box-shadow:0 5px 20px 0 rgba(0,0,0,.1);
 -webkit-box-shadow:0 5px 20px 0 rgba(0,0,0,.1);
 -o-box-shadow:0 5px 20px 0 rgba(0,0,0,.1);
 -ms-box-shadow:0 5px 20px 0 rgba(0,0,0,.1)
}
.login100-social-item img {
 width:26px
}
.login100-social-item:hover {
 color:#3b5998;
 box-shadow:0 5px 20px 0 rgba(0,0,0,.2);
 -moz-box-shadow:0 5px 20px 0 rgba(0,0,0,.2);
 -webkit-box-shadow:0 5px 20px 0 rgba(0,0,0,.2);
 -o-box-shadow:0 5px 20px 0 rgba(0,0,0,.2);
 -ms-box-shadow:0 5px 20px 0 rgba(0,0,0,.2)
}
@media(max-width:480px) {
 .wrap2 {
  padding-left:15px;
  padding-right:15px
 }
}


@mixin btn-border-drawing($color: #ccc, $hover: black, $width: 2px, $vertical: top, $horizontal: left, $duration: 0.25s) {
  box-shadow: inset 0 0 0 $width $color;
  color: $color;
  transition: color $duration $duration/3;
  position: relative;
  
  &::before,
  &::after {
    border: 0 solid transparent;
    box-sizing: border-box;
    content: '';
    pointer-events: none;
    position: absolute;
    width: 0; height: 0;
    
    #{$vertical}: 0; 
    #{$horizontal}: 0;
  }

  &::before {
    $h-side: if($horizontal == 'left', 'right', 'left');
    
    border-#{$vertical}-width: $width;
    border-#{$h-side}-width: $width;
  }
  
  &::after {
    $v-side: if($vertical == 'top', 'bottom', 'top');
    
    border-#{$v-side}-width: $width;
    border-#{$horizontal}-width: $width;
  }
  
  &:hover {
    color: $hover;
    
    &::before,
    &::after {
      border-color: $hover;
      transition: border-color 0s, width $duration, height $duration;
      width: 100%;
      height: 100%;
    }
    
    &::before { transition-delay: 0s, 0s, $duration; }
    
    &::after { transition-delay: 0s, $duration, 0s; }
  }
}

.draw-border {
  @include btn-border-drawing(#58afd1, #ffe593, 4px, bottom, right);
}

//=== Button styling, semi-ignore
.btn {
  background: none;
  border: none;
  cursor: pointer;
  line-height: 1.5;
  font: 700 1.2rem 'Roboto Slab', sans-serif;
  padding: 1em 2em;
  letter-spacing: 0.05rem;
  
  &:focus { outline: 2px dotted #55d7dc; }
}

//=== Pen styling, ignore
body { 
  background: #1f1a25;
  display: flex; 
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}