<label class="modal-btn" for="modal-toggle">Click me</label>  

    <input id="modal-toggle" type="checkbox">
    <label class="modal-backdrop" for="modal-toggle"></label>
    <div class="modal-content">
        <label class="modal-close-btn" for="modal-toggle">
		      <svg width="50" height="50">
            <line x1="10" y1="10" x2="40" y2="40"/>
		        <line x1="40" y1="10" x2="10" y2="40"/>
		      </svg>
	      </label>
        <div class="tabs">
<!--  LOG IN  -->
            <input class="radio" id="tab-1" name="tabs-name" type="radio" checked>
            <label for="tab-1" class="table"><span>Login</span></label>
            <div class="tabs-content">
               <div class="login_socnet">
                   <a href="" class="fa fa-vk" aria-hidden="true"></a>
                   <a href="" class="fa fa-google-plus" aria-hidden="true"></a>
                   <a href="" class="fa fa-facebook" aria-hidden="true"></a>
               </div>
               <form action="">
                   <input type="email" placeholder="Email" required>
                   <input type="password" placeholder="Password" required>
                   <input type="submit" value="Log In">
               </form>
               <form class="forgot-password" action="">
                   <input id="forgot-password-toggle" type="checkbox">
                   <label for="forgot-password-toggle">forgot password?</label>
                   <div class="forgot-password-content">
                       <input type="email" placeholder="enter your email" required>
                       <input type="submit" value="go">
                   </div>
               </form>
            </div>
<!--  SIGN UP  -->
            <input class="radio" id="tab-2" name="tabs-name" type="radio">
            <label for="tab-2" class="table"><span>Sign up</span></label>
            <div class="tabs-content">
                <div class="login_socnet">
                   <a href="" class="fa fa-vk" aria-hidden="true"></a>
                   <a href="" class="fa fa-google-plus" aria-hidden="true"></a>
                   <a href="" class="fa fa-facebook" aria-hidden="true"></a>
               </div>
               <form action="">
                   <input type="email" placeholder="Email" required>
                   <input type="password" placeholder="Password" required>
                   <input type="password" placeholder="Confirm password" required>
                   <input type="submit" value="Sign Up">
               </form>
            </div>
        </div>
    </div>          

@import "compass/reset";
$main-color: #00796B;

/*  START modal-container with login & sign in   */

body {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  font-family: Arial, sans-serif;
}

.modal-btn {
  padding: 5vw;
  color: $main-color;
	font-size: 10vw;
	font-weight: bold;
  outline: solid $main-color 1.5vw;
  cursor: pointer;
}



// START functionality modal-window  
#modal-toggle {
	display: none; // input type="checkbox" hide
}

.modal-content,
.modal-backdrop {
	opacity: 0;
  position: fixed;
	z-index: -1;
	overflow: hidden;
	cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.modal-content {
	top: 0;       //|
	bottom: 0;    //|
	margin: auto; //||| position: fixed to center
	left: 0;      //|
	right: 0;     //|

	height: 550px; //size window
  max-height: 98%; 
	width: 70%; //size window
	max-width: 600px; 
  
  text-align: center;
  
  transform: translateX(125%); //for vizual effect, animation
}

.modal-backdrop {
	left: 0;
	top: 0;
	
  height: 100%; // for old browser
	height: 100vh;
  width: 100%; // for old browser
	width: 100vw;
	
	transform: scale(0); //for vizual effect, animation
}

#modal-toggle:checked ~ .modal-backdrop {
	opacity: 1;
	background-color: rgba(darken($main-color, 10), 0.5);
  z-index: 998;
	transform: scale(1); //for vizual effect, animation
}

#modal-toggle:checked ~ .modal-content {
	opacity: 1;
	background-color: #fff;
	overflow-y: auto;
  overflow-x: hidden;
	pointer-events: auto;
	cursor: auto;
	z-index: 999;
	transform: translateX(0%); //for vizual effect, animation
}

@media (max-width: 600px) {  
	#modal-toggle:checked ~ .modal-backdrop {
		opacity: 0;
	}
	
	.modal-content {
    top: 0;
		left: 0;
		height: 100vh;
    width: 100vw;
	}
}

// START .modal-close-btn  
.modal-close-btn {
  margin-top: 5px;
	display: inline-block;
	cursor: pointer;
	
	svg {
		transition: 0.2s;
		
		line {
			stroke-width: 5px;
			stroke: $main-color;
		}
	}
	
	&:hover svg {
		transform: rotate(90deg);
	}	
}
// END .modal-close-btn  
// END functionality modal-window



/* BASIC FUNCTIONALITY .tabs */
.tabs {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-wrap: wrap;
  margin: 10px 0;
    
  &>.radio {
    display: none;
    
    &:checked + .table + .tabs-content {
      display: block;
    }
  }
  
  &>.table {
    order: -1;
    flex-basis: 50%;
    flex-shrink: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
    
  .tabs-content {
    width: 100%;
    display: none;
  }
}
/* END BASIC FUNCTIONALITY .tabs */



/*  THEME for .tabs with login & sign-in  */
.tabs > {
  .table {
    padding: 20px 0;
    text-align: center;
    border-bottom: solid $main-color 5px;
    color: $main-color;
    cursor: pointer;
  
    span {
      font-weight: 600;
    }
    
    &:hover {
      color: $main-color;
      background: rgba($main-color, 0.2);
    }
  }
    
  .radio:checked + .table {
    color: #fff;
    background: $main-color;
    cursor: auto;
    
    span {
      display: inline-block;
      font-weight: 500;
      transform: scale(1.2);
      transition: 0.1s;
    }
  } 
} 
/*  END THEME for .tabs with login & sign-in  */



/*  START style login & sign up  */
.tabs > .tabs-content {
  .login_socnet {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-wrap: no-wrap;
    justify-content: space-around;
    
    a {
      margin: 20px;
      margin-bottom: 0;
      width: 100%;
      font-size: 60px;
      text-decoration: none;
      transition: 0.2s;
      
      &:hover {
        transform: scale(1.1);
        filter: drop-shadow(1px 3px 2px rgba(0,0,0, 0.2));
      }
    }
    
    .fa-vk {
      color: #7986CB;
    }
    .fa-google-plus {
      color: #E57373;
    }
    .fa-facebook {
      color: #5C6BC0;
    }
  } 
  
  form {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
    
    input {
      padding: 10px;
      margin: 15px 0;
      border: none;
      border-bottom: solid 1px $main-color;
      font-size: 18px;
      letter-spacing: 1px;
      transition: 0.1s;
    
      &:focus {
        transform: translateX(10px);
        outline: none;
      }
    }
  }
    
  input[type="submit"] {
    padding: 15px 0;
    width: 100%;
    background: $main-color;
    color: #fff;
    border: none;
    font-size: 18px;
    cursor: pointer;
  
    &:focus {
      transform: none;
    }
  }
    
  .forgot-password label {
    margin: 0 auto;
    width: 50%;
    color: $main-color;
    text-decoration: none;
    font-size: 12px;
    line-height: 1.5;
    
    &:hover {
      text-decoration: underline;
    }
  }
} 
/*  END style login & sign up  */



// START forgot-password 
.forgot-password {
  #forgot-password-toggle {
    display: none;
  }
  
  .forgot-password-content {
    height: 0;
    width: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    cursor: pointer;
    transition: opacity 0.2s ease-in;
    
    input[type="email"] {
      width: 80%;
      margin-right: 0px;
      border-right: none;
    }
    
    input[type="submit"] {
      width: 20%;
      margin-left: 0px;
    }
  }
  
  #forgot-password-toggle:checked ~ .forgot-password-content {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    opacity: 1;
    width: 100%;
    height: 100%;
    z-index: 999;
    pointer-events: auto;
    cursor: auto;
    visibility: visible;
  }
}
// END forgot-password

// no JS! Pure CSS!!