article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:0.67em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace, serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:none;margin:0;padding:0}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}body{margin:0 0 0 0;padding:0 0 0 0;font-family:Arial, Helvetica, sans-serif;font-size:12px;color:#333333}ul,li,dt,dd,dl,span,p,h1,h2,h3,h4,a,img,form,figure,figcaption,iframe,address,menu{padding:0;margin:0;border:none;color:inherit;text-decoration:none;list-style:none;font-size:inherit;font-weight:normal;font-style:normal}input,textarea,select{outline:none;resize:none;border:none}select:disabled,input:disabled{background-color:#FAFAFA}


.body, body, html {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  position: relative;
}

.header {
  width: 426px;
  height: 100%;
  position: absolute;
  background: #5C2E90;
  color:#FFF;
  font-family: 'dosislight', 'verdana';
  animation-duration: .45s;
  animation-delay: 1s;
  animation-fill-mode: both;
  animation-name: header;
  z-index: 99;
}

.header .container {
  font-weight: normal;
  font-size: 42px;
  font-family: 'dosisextralight', 'verdana';
  line-height: 46px;
  position: absolute;
  box-sizing: border-box;
  top:50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  left:0;
  right: 0;
  margin:0 auto;
  display: inline;
  max-width: 80%;
}

.header .container .content {
  position: relative;
  width: 100%;
  text-align: center;
}

.header .container .heading {
  display: inline-block;
  margin:0 auto;
  text-align: left;
}

.header .heading span {
  color:#FEAC00;
  text-align: left;
  display: block;
}

.header .copyright {
  font-size: 14px;
  position: absolute;
  bottom: 15px;
  left: 15px;
}

.header + .main {
  margin-left: 426px;
}

.main {
    display: block;
    height: 100%;
    position: relative;
}

.main .content {
  width: 260px;
  height: auto;
  left:20%;
  top:50%;
  margin-top: -215px;
  position: absolute;
  height: 430px;
}

.main .form {
  width: 100%;
  margin-top: 60px;
}

.main .form .form-row {
  width: 100%;
  margin-bottom: 30px;
  position: relative;
}

.main .form label {
  width: 100%;
  display: block;
  font-family: 'dosissemibold', 'verdana';
  font-size: 14px;
  line-height: 18px;
}

.main .form input[type="text"],
.main .form input[type="password"] {
  width: 100%;
  background: transparent;
  border:none;
  border-bottom: solid 1px #E1E1E1;
  height: 40px;
  font-family: 'dosismedium', 'verdana';
  font-size: 16px;
}

.main .form .efeito {
  display: block;
  position: absolute;
  width: 0;
  height: 1px;
  left:0;
  bottom: 0;
  z-index: 8;
  background: #5C2E90;
  transition: all ease .2s;
}

.main .form input:focus {
  color: #5C2E90;
}

.main .form input:focus + .efeito {
  width: 100%;
}

.main .form button {
  border:none;
  background:#FEAC00;
  height: 40px;
  line-height: 40px;
  padding:0 20px;
  color:#000000;
  font-size: 17px;
  font-family: 'dosismedium', 'verdana';
  float: right;
  transition: all ease .15s;
  outline: none;
}

.main .form button:hover {
  transform: scale(1.05);
}

.main .form button:active {
  transform: scale(0.98);
  opacity: 0.8;
}


/* Animações */
.header {
  animation-duration: .45s;
  animation-delay: 1s;
  animation-fill-mode: both;
  animation-name: header;
  -moz-animation-duration: .45s;
  -moz-animation-delay: 1s;
  -moz-animation-fill-mode: both;
  -moz-animation-name: header;
  -webkit-animation-duration: .45s;
  -webkit-animation-delay: 1s;
  -webkit-animation-fill-mode: both;
  -webkit-animation-name: header;
}

.header .container {
    opacity: 0;
    -webkit-animation:title forwards .45s .25s;
}

@-webkit-keyframes header {
    0% { width: 100%; }
}

@-moz-keyframes header {
    0% { width: 100%; }
}

@keyframes header {
    0% { width: 100%; }
}

@-webkit-keyframes title {
    0% { opacity:1;  
         -webkit-transform: translateY(-65%);
         -ms-transform: translateY(-65%);
         transform: translateY(-65%);
    }

    100% {
      opacity: 1;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
    }
}

@-moz-keyframes title {
    0% { opacity:1;  
         -webkit-transform: translateY(-65%);
         -ms-transform: translateY(-65%);
         transform: translateY(-65%);
    }

    100% {
      opacity: 1;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
    }
}

@keyframes title {
    0% { opacity:1;  
         -webkit-transform: translateY(-65%);
         -ms-transform: translateY(-65%);
         transform: translateY(-65%);
    }

    100% {
      opacity: 1;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
    }
}


/* Mobile */
@media only screen and (max-width : 600px) {

.header {
  width: 100%;
  animation-duration: .45s;
  animation-delay: 1s;
  animation-fill-mode: both;
  animation-name: header;
  z-index: 99;
}

.header + .main {
  margin-left: auto;
}

.main {
    z-index: 99;
    position: absolute;
    width: 100%;
    top:0;
    left:0;
    -webkit-animation:main-mobile both .45s 1s;
}

.main .content {
  width: 100%;
  height: auto;
  left:0;
  top:50px;
  margin-top: 0;
  position: absolute;
  height: 430px;
  padding:20%;
  box-sizing: border-box;
}

.main .content img {
  width: 100%;
}

.main .form label {
  color:#FFF;
}

.main .form .efeito {
  background: #FEAC00;
}

.header .container {
  font-size: 24px;
  -webkit-animation:title forwards .45s .25s, title-mobile .35s .85s forwards;
  -moz-animation:title forwards .45s .25s, title-mobile .35s .85s forwards;
  animation:title forwards .45s .25s, title-mobile .35s .85s forwards;
  font-family: 'dosismedium', 'Verdana';
  line-height: 28px;
  margin-left: 0;
  width: 100%;
  max-width: 100%;
}

.main .form input[type="text"],
.main .form input[type="password"] {
  color:#FFF;
}

.main .form input:focus {
  color: #FEAD01;
}

.main .form button {
  display: block;
  width: 100%;
}

@-webkit-keyframes title-mobile {
    100% {
     top:5%;
     -webkit-transform: translateY(-20%);
      -ms-transform: translateY(-20%);
      transform: translateY(-20%);
    }
}

@-moz-keyframes title-mobile {
    100% {
     top:5%;
     -webkit-transform: translateY(-20%);
      -ms-transform: translateY(-20%);
      transform: translateY(-20%);
    }
}

@keyframes title-mobile {
    100% {
     top:5%;
     -webkit-transform: translateY(-20%);
      -ms-transform: translateY(-20%);
      transform: translateY(-20%);
    }
}

@-webkit-keyframes main-mobile {
    0% {
     opacity: 0;
    }
}

}