@import "https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700&display=swap";
@import url('https://fonts.googleapis.com/css?family=Montserrat|Quicksand');

*{
    font-family: 'quicksand',Arial, Helvetica, sans-serif;
    box-sizing: border-box;
}

body{
    background:#fff;
}

.form-modal{
    position:relative;
    width:450px;
    height:auto;
    margin-top:4em;
    left:50%;
    transform:translateX(-50%);
    background:#fff;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
    box-shadow:0 3px 20px 0px rgba(0, 0, 0, 0.1)
}

.form-modal button{
    cursor: pointer;
    position: relative;
    text-transform: capitalize;
    font-size:1em;
    z-index: 2;
    outline: none;
    background:#fff;
    transition:0.2s;
}

.form-modal .btn{
    border-radius: 20px;
    border:none;
    font-weight: bold;
    font-size:1.2em;
    padding:0.8em 1em 0.8em 1em!important;
    transition:0.5s;
    border:1px solid #99ffcc;
    margin-bottom:0.5em;
    margin-top:0.5em;
}

.form-modal .login , .form-modal .signup{
    background:#003333;
    color:#fff;
}

.form-modal .login:hover , .form-modal .signup:hover{
    background:#222;
}

.form-toggle{
    position: relative;
    width:100%;
    height:auto;
}

.form-toggle button{
    width:50%;
    float:left;
    padding:1.5em;
    margin-bottom:1.5em;
    border:none;
    transition: 0.2s;
    font-size:0.9em;
    font-weight: bold;
    transition: 0.5;
   
}

.form-toggle button:nth-child(1){
    border-bottom-right-radius: 0px;
}

.form-toggle button:nth-child(2){
    border-bottom-left-radius: 0px;
}

#login-toggle{
    background:#000;
    color:#ffff;
}


#login-toggle:active{
    background:#000;
    color:#ffff;
}


#login-toggle:hover{
    background:#000;
    color:#ffff;
}
.form-modal form{
    position: relative;
    width:90%;
    height:auto;
    left:50%;
    transform:translateX(-50%);  
}

#login-form , #signup-form{
    position:relative;
    width:100%;
    height:auto;
    padding-bottom:1em;
}

#signup-form{
    display: none;
}


#login-form button , #signup-form button{
    width:100%;
    margin-top:0.5em;
    padding:0.6em;
}

.form-modal input{
    position: relative;
    width:100%;
    font-size:1em;
    padding:1.2em 1.7em 1.2em 1.7em;
    margin-top:0.6em;
    margin-bottom:0.6em;
    border-radius: 20px;
    border:none;
    background:#eee;
    outline:none;
    font-weight: bold;
    transition:0.4s;
}

.form-modal input:focus , .form-modal input:active{
    transform:scaleX(1.02);
}

.form-modal input::-webkit-input-placeholder{
    color:#222;
}


.form-modal p{
    font-size:16px;
    font-weight: bold;
}

.form-modal p a{
    color:#57b846;
    text-decoration: none;
    transition:0.2s;
}

.form-modal p a:hover{
    color:#222;
}


.form-modal i {
    position: absolute;
    left:10%;
    top:50%;
    transform:translateX(-10%) translateY(-50%); 
}

.fa-google{
    color:#dd4b39;
}

.fa-linkedin{
    color:#3b5998;
}

.fa-windows{
    color:#0072c6;
}

.-box-sd-effect:hover{
    box-shadow: 0 4px 8px hsla(210,2%,84%,.2);
}

@media only screen and (max-width:500px){
    .form-modal{
        width:100%;
    }
}

@media only screen and (max-width:400px){
    .ii{
        display: none!important;
    }
}




   .thin-btn-bold{

  border: solid 1px #333333;
  background: transparent;
  color: #333;
 align-self: center;
  padding:5px 6px;
  margin: 0 1rem;
  transition: all 0.5s ease;
  color: #41403E;
  font-size: 25px;
  letter-spacing: 1px;
  outline: none;
  box-shadow: 20px 38px 34px -26px rgba(0, 0, 0, 0.2);
  border-radius: 0px;
  cursor: pointer;  display: inline-block;
}
   
    .thin-btn{

  border: solid 1px #333333;
  background: transparent;
  color: #333;
 align-self: center;
  padding:5px 6px;
  margin: 0 1rem;
  transition: all 0.5s ease;
  color: #41403E;
  font-size: 12px;
  letter-spacing: 1px;
  outline: none;
  box-shadow: 20px 38px 34px -26px rgba(0, 0, 0, 0.2);
  border-radius: 0px;
  cursor: pointer;  display: inline-block;
}
        
.plane-btn{

  border: none;
  background: #cccccc;
  color: #333;
 align-self: center;
  padding:5px 6px;
  margin: 0 1rem;
  transition: all 0.5s ease;
  color: #41403E;
  font-size: 10px;
  letter-spacing: 1px;
  outline: none;
  box-shadow: 20px 38px 34px -26px rgba(0, 0, 0, 0.2);
  border-radius: 0px;
  cursor: pointer;  display: inline-block;
}

  
.label-btn{

  background: #cccccc;
 align-self: center;
  padding:5px 6px;
  margin: 0 1rem;
  transition: all 0.5s ease;
  color: #41403E;
  font-size: 10px;
  letter-spacing: 1px;
  outline: none;
  cursor: pointer;
  box-shadow: 20px 38px 34px -26px rgba(0, 0, 0, 0.2);
  border-radius: 0px;
   border: 0px;
}
   
.outline-rounded-btn{

  border: solid 0.5px #333;
  background: transparent;
 align-self: center;
  padding:5px 6px;
  margin: 0 1rem;
  transition: all 0.5s ease;
  color: #41403E;
  font-size: 10px;
  letter-spacing: 1px;
  outline: none;
  cursor: pointer;
  box-shadow: 20px 38px 34px -26px rgba(0, 0, 0, 0.2);
  border-radius: 9px;  display: inline-block;
}

.outline-btn{

  border: solid 0.5px #41403E;
  background: transparent;
 align-self: center;
  padding:5px 6px;
  margin: 0 1rem;
  transition: all 0.5s ease;
  color: #41403E;
  font-size: 10px;
  letter-spacing: 1px;
  outline: none;
  cursor: pointer;
  box-shadow: 20px 38px 34px -26px rgba(0, 0, 0, 0.2);
  border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;  display: inline-block;
}

    
.dotted-btn{

  border: dotted 0.5px #41403E;
  background: transparent;
 align-self: center;
  padding:5px 6px;
  margin: 0 1rem;
  transition: all 0.5s ease;
  color: #41403E;
  font-size: 10px;
  letter-spacing: 1px;
  outline: none;
  cursor: pointer;
  box-shadow: 20px 38px 34px -26px rgba(0, 0, 0, 0.2);
  border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;  display: inline-block;
}

.dotted-btn-white{

  border: dotted 0.5px #fff;
  background: transparent;
 align-self: center;
  padding:5px 6px;
  margin: 0 1rem;
  transition: all 0.5s ease;
  color: #fff;
  font-size: 10px;
  letter-spacing: 1px;
  outline: none;
  cursor: pointer;
  box-shadow: 20px 38px 34px -26px rgba(0, 0, 0, 0.2);
  border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;  display: inline-block;
}
#btn-dark{color: #003333;}

    .bt-shake {
      position: relative;
      animation-name: shakeAnim;
      animation-duration: 1s;
      animation-iteration-count: infinite;
      animation-timing-function: ease-in;
    }

    @keyframes shakeAnim {
      0% {
        left: 0
      }
      10% {
        left: -3px
      }
      20% {
        left: 3px
      }
      30% {
        left: -10px
      }
      40% {
        left: 8px
      }
      50% {
        left: -5px
      }
      60% {
        left: 3px
      }
      70% {
        left: 0
      }
    }