/*===== GOOGLE FONTS =====*/
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap");

/*===== VARIABLES CSS =====*/
:root{
  /*===== Colores =====*/
  --first-color: #10a6a5;
  --first-color-dark: #333;
  --first-color-light: #A49EAC;
  --first-color-lighten: #F2F2F2;

  /*===== Font and typography =====*/
  --body-font: 'Open Sans', sans-serif;
  --h1-font-size: 1.5rem;
  --normal-font-size: .938rem;
  --small-font-size: .813rem;
}

@media screen and (min-width: 768px){
  :root{
    --normal-font-size: 1rem;
    --small-font-size: .875rem;
  }
}

/*===== BASE =====*/
*,::before,::after{
  box-sizing: border-box;
}

body{
  margin: 0;
  padding: 0;
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  color: var(--first-color-dark);
}

h1{
  margin: 0;
}

a{
  text-decoration: none;
}

img{
  max-width: 100%;
  height: auto;
  display: block;
}

/*===== LOGIN =====*/
.login{
  display: grid;
  grid-template-columns: 100%;
  height: 100vh;
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}

.login__content{
  display: grid;
}

.login__img{
  justify-self: center;
}

.login__img img{
  width: 310px;
  margin-top: 1.5rem;
}

.login__forms{
  position: relative;
  height: 368px;
}

.login__registre, .login__create{
  position: absolute;
  bottom: 4rem;
  width: 100%;
  background-color: var(--first-color-lighten);
  padding: 2rem 1rem;
  border-radius: 1rem;
  text-align: center;
  box-shadow: 0 8px 20px rgba(35,0,77,.2);
  animation-duration: .4s;
  animation-name: animate-login;
}

@keyframes animate-login{
  0%{
    transform: scale(1,1);
  }
  50%{
    transform: scale(1.1,1.1);
  }
  100%{
    transform: scale(1,1);
  }
}

.login__title{
  font-size: var(--h1-font-size);
  margin-bottom: 2rem;
}

.login__box{
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: .5rem;
  padding: 1.125rem 1rem;
  background-color: #FFF;
  margin-top: 1rem;
  border-radius: .5rem;
}

.login__icon{
  font-size: 1.5rem;
  color: var(--first-color);
}

.login__input{
  border: none;
  outline: none;
  font-size: var(--normal-font-size);
  font-weight: 700;
  color: var(--first-color-dark);
}

.login__input::placeholder{
  font-size: var(--normal-font-size);
  font-family: var(--body-font);
  color: var(--first-color-light);
}

.login__button{
display: block;
    padding: 1rem;
    width: 100%;
    margin: 1rem 0px;
    background-color: var(--first-color);
    color: #FFF;
    font-weight: 600;
    text-align: center;
    border-radius: .5rem;
    transition: .3s;
    border: none;
}

.login__button:hover{
  background-color: var(--first-color-dark);
}

.login__account, .login__signin, .login__signup{
  font-weight: 600;
  font-size: var(--small-font-size);
}

.login__account{
  color: var(--first-color-dark);
}

.login__signin, .login__signup{
  color: var(--first-color);
  cursor: pointer;
}

.login__social{
  margin-top: 2rem;
}

.login__social-icon{
  font-size: 1.5rem;
  color: var(--first-color-dark);
  margin: 0 1.5rem;
}

/*Show login*/
.block{
  display: block;
}

/*Hidden login*/
.none{
  display: none;
}

/* header */
.btmnavbar{width:100%;background: #fff;;overflow:hidden;position: fixed;bottom:0;}
.header {width: 100%;z-index: 3;max-width:930px;margin:auto;}
.header .logo img{width:35px;height:35px;margin-top:5px;border-radius:50%}
.header ul { margin: 0; padding: 0; list-style: none; overflow: hidden;text-align:center;} 
.header li a {font-weight:bold; line-height:30px;display: block;   padding: 10px 10px; text-decoration: none;color:#999;text-transform: uppercase;width:20%;float:left} 
.header .logo { display: block; float: left; font-size: 2em; padding: 10px 20px; text-decoration: none; } 
.header ul.menu  li a:active{color:red;}
 
/* menu btn */ 
.header .menu-btn { display: none; } 
.header .menu-btn:checked ~ .menu { max-height: 240px; } 
.header .menu-btn:checked ~ .menu-icon .navicon { background: transparent; } 
.header .menu-btn:checked ~ .menu-icon .navicon:before { transform: rotate(-45deg); } 
.header .menu-btn:checked ~ .menu-icon .navicon:after { transform: rotate(45deg); } 
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before, .header .menu-btn:checked ~ .menu-icon:not(.steps) 
.navicon:after { top: 0; }
.header li img{display:none;}
.jssorl-009-spin img {animation-name: jssorl-009-spin;animation-duration: 2000.6s;animation-iteration-count: infinite;animation-timing-function: linear;}
@keyframes jssorl-009-spin {from { transform: rotate(0deg); }to { transform: rotate(360deg); }}
.jssora061 {display:block;position:absolute;cursor:pointer;}
.jssora061 .a {fill:none;stroke:#fff;stroke-width:360;stroke-linecap:round;}
.jssora061:hover {opacity:.8;}
.jssora061.jssora061dn {opacity:.5;}
.jssora061.jssora061ds {opacity:.3;pointer-events:none;}
#jssor_1{position:relative;margin:0 auto;top:0px;left:0px;width:1000px;height:450px;overflow:hidden;visibility:hidden;z-nidex:99}
.sld{cursor:default;position:relative;top:0px;left:0px;width:1000px;height:450px;overflow:hidden;}
.outerwrapper{background:#fff;width:930px;margin:50px auto;border-radius:5px;overflow:hidden;
padding:0px;border:1px solid #eee;-webkit-box-shadow:0px 0px 20px 0px rgba(0, 0, 0, 0.07);
-moz-box-shadow:0px 0px 20px 0px rgba(0, 0, 0, 0.07);box-shadow:0px 0px 20px 0px rgba(0, 0, 0, 0.07);}
.formleft{width:300px;float:left;font-size:11px;border-radius:0px;}
.haedmini{width:100%;padding:4px 0px;display:table;overflow:hidden;}
.haedmini .log1{width:25px;height:25px;margin-right:10px;background:#ddd;float:;border-radius:100%;
margin-top:3px;margin-left:15px;margin-right:12px;}
.errornotif{width:90%;margin:10px auto;margin-top:-15px;padding:5px 6px;text-align:center;background:#FDE18F;border-radius:5px;
position:relative;}
.wdht{width:90%;margin:5px auto;}
.pdngbtm{margin-top:10px;}
.keluar{font-weight:bold;padding:8px 10px;margin-bottom:10px;}
.lbox {width:40px;float:left;text-align:center;}
.rbox{float:left;width:70%;margin-left:10px;}
.rbox h2, .rbox p{margin:0px;}
.rbox h2{font-size:14px;}
.rbox p{font-size:11px;color:#444;}
.isileft{width:95%;margin:auto;}
.isi2{width:90%;margin:auto;padding:5px 0px;}
.gambartop{width:100%;text-align:center;margin-top:20px;}
.gambartop img{width:70%;}
.rightform{width:628px;float:left;}
.rightform img{width:100%;padding:0px;}
.isileft p{margin:0px 0px;text-align:center;color:#444}
.mobilelogo{display:none;}


@media (min-width: 48em) {
  .header li {
    float: left;
  }
  .header li a {
    padding: 20px 10px;
  }
  .header .menu {
    clear: none;
    float: right;
    max-height: none;
  }
  .header .menu-icon {
    display: none;
  }
  .header li a:active{color:red;}
}
.log2, .cls, .navbarmini1{display:none;}
.cebok{width;100%;padding:4px 0px;overflow:hidden;margin-bottom:9px;display:none;}
#rememberMe{margin-right:7px;;float:left;margin-top:-0.px;}

/* ===== MEDIA QUERIES =====*/
@media screen and (min-width: 576px){
  .login__forms{
    width: 348px;
    justify-self: center;
  }
}

@media screen and (min-width: 1024px){
  .login{
    height: 100vh;
    overflow: hidden;
  }

  .login__content{
    grid-template-columns: repeat(2, max-content);
    justify-content: center;
    align-items: center;
    margin-left: 10rem;
  }

  .login__img{
    display: flex;
    width: 600px;
    height: 588px;
    background-color: var(--first-color-lighten);
    border-radius: 1rem;
    padding-left: 1rem;
  }

  .login__img img{
    width: 390px;
    margin-top: 0;
  }

  .login__registre, .login__create{
    left: -11rem;
  }

  .login__registre{
    bottom: -2rem;
  }

  .login__create{
    bottom: -5.5rem;
  }
}