*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}


body{
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.control_login{
    width: 100vw;
    height: 100vh;
    /* border: 2px solid red; */
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.div_ima{
    width: 50%;
    height: 100vh;
    /* background-color: red; */
    background-image: url(../image/pexels-lena-khrupina-1386611-20871284.jpg);
    /* filter: contrast(); */
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    /* animation:  mudar 5s infinite ; */
    /* background-color: #030914; */
    clip-path: polygon(0% 0%, 100% 0%, 75% 100%, 0% 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
     /* --s: 60px;
  --c1: #02041c;
  --c2: #000527;
  --_g: radial-gradient(
    25% 25% at 25% 25%,
    var(--c1) 99%,
    rgba(0, 0, 0, 0) 101%
  );
  background: var(--_g) var(--s) var(--s) / calc(2 * var(--s))
      calc(2 * var(--s)),
    var(--_g) 0 0 / calc(2 * var(--s)) calc(2 * var(--s)),
    radial-gradient(50% 50%, var(--c2) 98%, rgba(0, 0, 0, 0)) 0 0 / var(--s)
      var(--s),
    repeating-conic-gradient(var(--c2) 0 50%, var(--c1) 0 100%)
      calc(0.5 * var(--s)) 0 / calc(2 * var(--s)) var(--s); */

}

@keyframes mudar {
    0%{
          background-image: url(../image/pexels-sahrul-15969816.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat
    }
    50%{
          background-image: url(../image/pexels-tara-winstead-8386437.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat
    }
    100%{
          background-image: url(../image/pexels-thekameragrapher-15741271.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat
    }
}

.pen{
    width: 300px;
    height: 300px;
    /* background-image: url(../icons/Cream\ &\ Black\ Elegant\ Typography\ Monogram\ Initials\ SR\ Fashion\ Store\ Logo\ \(1\).png); */
    background-position: center;
    background-image: url(../icons/sem.png);
    background-size: cover;
    background-repeat: no-repeat;
    /* background-color: aqua; */
    position: relative;
    left: 12%;
    transform: translate(-50%);
}

form{
    width: 40%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    /* flex-direction: column; */
}

.cofro{
    width: 80%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /* border: 2px solid red; */
    position: relative;
    left: 28%;
    transform: translate(-50%);
}

label{
    width: 80%;
    height: auto;
    /* font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; */
    color: #777777;
    position: relative;
    font-family: Arial, Helvetica, sans-serif;
    /* left: 20%; */
    margin-top: 10px;
    margin-bottom: 10px;
    /* transform: translate(-50%); */
}
input{
    width: 80%;
    height: 40px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: #000527;
     /* left: 30%; */
    /* transform: translate(-25%); */
    border-radius: 30px;
    /* border: 2px solid none; */
    border: none;
    background-color: rgb(240, 240, 240);
    outline: none;
}

input::placeholder{
    font-family: Arial, Helvetica, sans-serif;
    font-size:11px;
    padding-left: 10px;
    font-weight: 300;
}

button{
      width: 50%;
    height: 40px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: #ffff;
     /* left: 30%; */
     margin-top: 30px;
     border-radius: 30px;border: none;
     /* background-color: ; */
     background-color: #1763e7;
    /* transform: translate(-40%); */
}

.txtlmin{
     width: 80%;
    height: auto;
    text-align: start;
    display: flex;
    justify-content: start;
    flex-direction: column;
    /* border: 2px solid red; */
    position: relative;
    /* left: 12%; */
    margin-bottom: 20px;
     /* transform: translate(-40%); */
     color: #1763e7;
     font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

form > .cofro > a{
    /* left: 12%; */
    margin-bottom: 20px;
     /* transform: translate(-50%); */
     margin-top: 10px;
     color: #1763e7;
}