/* *{
    box-sizing: border-box;
    outline: 1px solid red;
   } */

/*.elementor-widget-container {
    display: flex;
    flex-wrap:wrap;
    justify-content:center;

    h5 {
        display: none;
    }
}*/

:root{
    --form-height:550px;
    --form-width: 900px;
    /*  Sea Green */
    --left-color: #9fdeaf;
    /*  Light Blue  */
    --right-color: #96dbe2;
  }
  
  .container-item{
    width: var(--form-width);
    height: var(--form-height);
    position: relative;
    margin: auto;
    box-shadow: 2px 10px 40px rgba(22,20,19,0.4);
    border-radius: 10px;
    margin-top: 50px;
  }
  /* 
  ----------------------
        Overlay
  ----------------------
  */
  .overlay{
    width: 100%; 
    height: 100%;
    position: absolute;
    z-index: 100;
    background-image: linear-gradient(to right, var(--left-color), var(--right-color));
    border-radius: 10px;
    color: white;
    clip: rect(0, 385px, var(--form-height), 0);
  }
  
  .open-sign-up{
      animation: slideleft 1s linear forwards;
  }
  
  .open-sign-in{
      animation: slideright 1s linear forwards;
  }
  
  .overlay .sign-in, .overlay .sign-up{
    /*  Width is 385px - padding  */
    --padding: 50px;
    width: calc(485px - var(--padding) * 2);
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding: 0px var(--padding);
    text-align: center;
  }
  
  .overlay .sign-in{
    float: left;
  }
  
  .overlay-text-left-animation{
      animation: text-slide-in-left 1s linear;
  }
  .overlay-text-left-animation-out{
      animation: text-slide-out-left 1s linear;
  }
  
  .overlay .sign-up{
    float:right;
    overflow: auto;
  }
  
  .overlay-text-right-animation{
      animation: text-slide-in-right 1s linear;
  }
  
  .overlay-text-right-animation-out{
      animation: text-slide-out-right 1s linear;
  }
  
  
  .overlay h1{
    margin: 0px 5px;
    font-size: 2.1rem;
  }
  
  .overlay p{
    margin: 20px 0px 30px;
    font-weight: 200;
  }

  #register {
    display: none;
  }

  @media(max-width:767px) {

    .overlay {
      display: none;
    }
    #register {
      display: block;
    }
    .container-item {
        width:100%
    }
    
    div#sign-in-info {
        padding: 0;
        --padding: 0;
    }
    
    div#forget-password-info {
        width:100%;
    }

    .form .sign-up {
      padding: 20px 0!important;
      width: 100%!important;
    }
  }
  /* 
  ------------------------
        Buttons
  ------------------------
  */
  .switch-button, .control-button {
    cursor: pointer;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 165px;
    height: 40px;
    font-size: 14px;
    text-transform: uppercase;
    background: none;
    border-radius: 20px;
    color: white;
  }
  
  .switch-button{
    border: 2px solid;
  }
  
  .control-button {
    border: none;
    margin-top: 15px;
  }
  
  .switch-button:focus, .control-button:focus{
    outline:none;
  }
  
  .control-button.up{
    background-color: var(--left-color);
  }
  
  .control-button.in{
    background-color: var(--right-color);
  }

  .control-button.reset{
    background-color: var(--right-color);
  }
  
  /* 
  --------------------------
        Forms
  --------------------------
  */
  .form{
    width: 100%; 
    height: 100%;
    position: absolute;
    border-radius: 10px;
  }
  
  .form .sign-in, .form .sign-up, .form .forget-password{
    height:auto;

    --padding: 50px;
    position:absolute;
      /*  Width is 100% - 385px - padding  */
    width: calc(var(--form-width) - 285px - var(--padding) * 2);
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding: 0px var(--padding);
    text-align: center;
  }
  
  /* Sign in is initially not displayed */
  .form .sign-in{
    display: none;
  }
  
  .form .sign-in{
    left:0;
  }
  
  .form .sign-up{
    right: 0;
    overflow: auto;
    padding:20px;
    justify-content:start;
  }
  
  .form-right-slide-in{
    animation: form-slide-in-right 1s;
  }
  
  .form-right-slide-out{
    animation: form-slide-out-right 1s;
  }
  
  .form-left-slide-in{
    animation: form-slide-in-left 1s;
  }
  
  .form-left-slide-out{
    animation: form-slide-out-left 1s;
  }
  
  .form .sign-in h1{
    color: var(--right-color);
    margin: 0;
  }
  
  .form .sign-up h1{
    color: var(--left-color);
    margin: 0;
  }
  
  .social-media-buttons{
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 15px;
  }
  
  .social-media-buttons .icon{
    width: 40px;
    height: 40px;
    border: 1px solid #dadada;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px 7px;
  }
  
  .small{
    font-size: 13px;
    color: grey;
    font-weight: 200;
    margin: 5px;
  }
  
  #sign-in-form input ,   #sign-in-form select , #sign-up-form input,   #sign-up-form select {
    margin: 12px;
    font-size: 14px;
    padding: 15px;
    width: 260px;
    font-weight: 300;
    border: none;
    background-color: #e4e4e494;
    font-family: 'Helvetica Neue', sans-serif;
    letter-spacing: 1.5px;
    padding-left: 20px;
  }
  
  #sign-in-form input::placeholder{
    letter-spacing: 1px;
  }
  
  .forgot-password{
    font-size: 12px;
    display: inline-block;
    border-bottom: 2px solid #efebeb;
    padding-bottom: 3px;
  }
  
  .forgot-password:hover{
    cursor: pointer;
  }

  
#forget-password-form input {
  margin: 12px;
  font-size: 14px;
  padding: 15px;
  width: 260px;
  font-weight: 300;
  border: none;
  background-color: #e4e4e494;
  font-family: 'Helvetica Neue', sans-serif;
  letter-spacing: 1.5px;
  padding-left: 20px;
}

#forget-password-form input::placeholder {
  letter-spacing: 1px;
}

  /* 
  ---------------------------
      Animation
  ---------------------------
  */
  @keyframes slideright{
    0%{
      clip: rect(0, 385px, var(--form-height), 0);
    }
    30%{
          clip: rect(0, 480px, var(--form-height), 0);
    }
    /*  we want the width to be slightly larger here  */
    50%{
       clip: rect(0px, calc(var(--form-width) / 2 + 480px / 2), var(--form-height), calc(var(--form-width) / 2 - 480px / 2));
    }
    80%{
           clip: rect(0px, var(--form-width), var(--form-height), calc(var(--form-width) - 480px));
    }
    100%{
       clip: rect(0px, var(--form-width), var(--form-height), calc(var(--form-width) - 385px));
    }
  }
  
  @keyframes slideleft{
    100%{
      clip: rect(0, 385px, var(--form-height), 0);
    }
    70%{
          clip: rect(0, 480px, var(--form-height), 0);
    }
    /*  we want the width to be slightly larger here  */
    50%{
       clip: rect(0px, calc(var(--form-width) / 2 + 480px / 2), var(--form-height), calc(var(--form-width) / 2 - 480px / 2));
    }
    30%{
           clip: rect(0px, var(--form-width), var(--form-height), calc(var(--form-width) - 480px));
    }
    0%{
       clip: rect(0px, var(--form-width), var(--form-height), calc(var(--form-width) - 385px));
    }
  }
  
  @keyframes text-slide-in-left{
    0% {
      padding-left: 20px;
    }
    100% {
      padding-left: 50px;
    }
  }
  
  @keyframes text-slide-in-right{
    0% {
      padding-right: 20px;
    }
    100% {
      padding-right: 50px;
    }
  }
  
  @keyframes text-slide-out-left{
    0% {
      padding-left: 50px;
    }
    100% {
      padding-left: 20px;
    }
  }
  
  @keyframes text-slide-out-right{
    0% {
      padding-right: 50px;
    }
    100% {
      padding-right: 20px;
    }
  }
  
  @keyframes form-slide-in-right{
    0%{
      padding-right: 100px;
    }
    100%{
      padding-right: 50px;
    }
  }
  
  @keyframes form-slide-in-left{
    0%{
      padding-left: 100px;
    }
    100%{
      padding-left: 50px;
    }
  }
  
  @keyframes form-slide-out-right{
    0%{
      padding-right: 50px;
    }
    100%{
      padding-right: 80px;
    }
  }
  
  @keyframes form-slide-out-left{
    0%{
      padding-left: 50px;
    }
    100%{
      padding-left: 80px;
    }
  }
  

#wpum-submit-login-form {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
}

#wpum-submit-login-form fieldset {
    width:100%;
}

.wpum-form fieldset input.input-text {
    border-radius: 25px;
    width: 80%;
    height: 50px;
    padding-left: 20px;
    margin-top: 1rem;
}

.wpum-template input[name='submit_login'].button {
    background-color: rgb(51, 51, 51);
    width: 150px;
    border-radius: 50px;
}

.wpum-template input[name='submit_login'].button:hover {
    background: linear-gradient(to right, rgb(138, 4, 4), rgb(255, 42, 42));
}

.fieldset-username,
.fieldset-password,
.fieldset-remember {
    text-align: center;
}


.single-lp_course #popup-content .wp-video {
    margin:auto;
}

.mejs-controls {
    display: none!important;
}