body, html {
  height: 100%;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

h1 {
    font-family: 'Comforter';
    font-size: 80px;
    height:160px;
    color: #ffffff;
    margin-bottom:10vh;
}
h2 {
    font-size: 25px;
    color: #ffffff;
}

* {
  box-sizing: border-box;
}

.bg-image {
  /* The image used */
  background-image: url("data:image/jpeg;base64,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");
  
  /* Add the blur effect */
  filter: blur(4px);
  -webkit-filter: blur(4px);
  box-shadow: inset 0 0 0 1000px rgba(255,255,255,.4);
  
  /* Full height */
  height: 100%; 
  
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Position text in the middle of the page/image */
.bg-text {
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
  color: white;
  font-weight: bold;
  border: 3px solid #f1f1f1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 80%;
  padding: 20px;
  text-align: center;
}








$primary: #11998e;
$secondary: #38ef7d;
$white: #fff;
$gray: #9b9b9b;
.form__group {
  position: relative;
  padding: 15px 0 0;
  margin-top: 10px;
  width: 50%;
}

.form__field {
  font-family: inherit;
  width: 100%;
  border: 0;
  border-bottom: 2px solid $gray;
  outline: 0;
  font-size: 1.3rem;
  color: $white;
  padding: 7px 0;
  /*background: transparent;*/
  transition: border-color 0.2s;
  background: rgba(204, 204, 204, 0.9);

  &::placeholder {
    color: transparent;
  }

  &:placeholder-shown ~ .form__label {
    font-size: 1.3rem;
    cursor: text;
    top: 20px;
  }
}

.form__label {
  position: absolute;
  top: 0;
  display: block;
  transition: 0.2s;
  font-size: 1rem;
  color: $gray;
}

.form__field:focus {
  ~ .form__label {
    position: absolute;
    top: 0;
    display: block;
    transition: 0.2s;
    font-size: 1rem;
    color: $primary;
    font-weight:700;    
  }
  padding-bottom: 6px;  
  font-weight: 700;
  border-width: 3px;
  border-image: linear-gradient(to right, $primary,$secondary);
  border-image-slice: 1;
}
/* reset input */
.form__field{
  &:required,&:invalid { box-shadow:none; }
}
/* demo */
body {
  font-family: 'Poppins', sans-serif; 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  font-size: 1.5rem;
  /*background-color:#222222;*/
}








/* ---------- Fog ---------- */
.fogwrapper {
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
  -webkit-filter: blur(1px) grayscale(1.8) saturate(1.2) sepia(0.5);
  filter: blur(1px) grayscale(1.8) saturate(1.2) sepia(0.2) brightness(5%)
}
#foglayer_01, #foglayer_02, #foglayer_03 {
  height: 100%;
  position: absolute; 
  width: 200%;
}

#fogOverlay {
  opacity: 1;
  transition: opacity 4s; 
}

#fogOverlay.fade {
    opacity:0;
}

#foglayer_01 .image01, #foglayer_01 .image02,
#foglayer_02 .image01, #foglayer_02 .image02,
#foglayer_03 .image01, #foglayer_03 .image02 {
  float: left;
  height: 100%;
  width: 50%;
  filter: invert(300%);
}
#foglayer_01 {
  -webkit-animation: foglayer_01_opacity 10s linear infinite, foglayer_moveme 15s linear infinite;
  -moz-animation: foglayer_01_opacity 10s linear infinite, foglayer_moveme 15s linear infinite;
  animation: foglayer_01_opacity 10s linear infinite, foglayer_moveme 15s linear infinite;
}
#foglayer_02, #foglayer_03 {
  -webkit-animation: foglayer_02_opacity 21s linear infinite, foglayer_moveme 13s linear infinite;
  -moz-animation: foglayer_02_opacity 21s linear infinite, foglayer_moveme 13s linear infinite;
  animation: foglayer_02_opacity 21s linear infinite, foglayer_moveme 13s linear infinite;
}

/* ---------- Moving Fog ---------- */
/*
  'size: cover' || 'size: 100%'; results remain the same
  'attachment: scroll' can be added or removed; results remain the same
  'attachment: fixed' causing unexpected results in Chrome
  'repeat-x' || 'no-repeat'; results remain the same
*/ 
#foglayer_01 .image01, #foglayer_01 .image02 {
  background: url("https://raw.githubusercontent.com/danielstuart14/CSS_FOG_ANIMATION/master/fog1.png") center center/cover no-repeat transparent;
}
#foglayer_02 .image01, #foglayer_02 .image02,
#foglayer_03 .image01, #foglayer_03 .image02{
  background: url("https://raw.githubusercontent.com/danielstuart14/CSS_FOG_ANIMATION/master/fog2.png") center center/cover no-repeat transparent;
}

/* ---------- Keyframe Layer 1 ---------- */
@-webkit-keyframes foglayer_01_opacity {
  0% { opacity: .1; }
  22% { opacity: .5; }
  40% { opacity: .28; }
  58% { opacity: .4; }
  80% { opacity: .16; }
  100% { opacity: .1; }
}
@-moz-keyframes foglayer_01_opacity {
  0% { opacity: .1; }
  22% { opacity: .5; }
  40% { opacity: .28; }
  58% { opacity: .4; }
  80% { opacity: .16; }
  100% { opacity: .1; }
}
@-o-keyframes foglayer_01_opacity {
  0% { opacity: .1; }
  22% { opacity: .5; }
  40% { opacity: .28; }
  58% { opacity: .4; }
  80% { opacity: .16; }
  100% { opacity: .1; }
}
@keyframes foglayer_01_opacity {
  0% { opacity: .1; }
  22% { opacity: .5; }
  40% { opacity: .28; }
  58% { opacity: .4; }
  80% { opacity: .16; }
  100% { opacity: .1; }
}
/* ---------- Keyframe Layer 2 ---------- */
@-webkit-keyframes foglayer_02_opacity {
  0% { opacity: .5; }
  25% { opacity: .2; }
  50% { opacity: .1; }
  80% { opacity: .3; }
  100% { opacity: .5; }
}
@-moz-keyframes foglayer_02_opacity {
  0% { opacity: .5; }
  25% { opacity: .2; }
  50% { opacity: .1; }
  80% { opacity: .3; }
  100% { opacity: .5; }
}
@-o-keyframes foglayer_02_opacity {
  0% { opacity: .5; }
  25% { opacity: .2; }
  50% { opacity: .1; }
  80% { opacity: .3; }
  100% { opacity: .5; }
}
@keyframes foglayer_02_opacity {
  0% { opacity: .5; }
  25% { opacity: .2; }
  50% { opacity: .1; }
  80% { opacity: .3; }
  100% { opacity: .5; }
}
/* ---------- Keyframe Layer 3 ---------- */
@-webkit-keyframes foglayer_03_opacity {
  0% { opacity: .8 }
  27% { opacity: .2; }
  52% { opacity: .6; }
  68% { opacity: .3; }
  100% { opacity: .8; }
}
@-moz-keyframes foglayer_03_opacity {
  0% { opacity: .8 }
  27% { opacity: .2; }
  52% { opacity: .6; }
  68% { opacity: .3; }
  100% { opacity: .8; }
}
@-o-keyframes foglayer_03_opacity {
  0% { opacity: .8 }
  27% { opacity: .2; }
  52% { opacity: .6; }
  68% { opacity: .3; }
  100% { opacity: .8; }
}
@keyframes foglayer_03_opacity {
  0% { opacity: .8; }
  27% { opacity: .2; }
  52% { opacity: .6; }
  68% { opacity: .3; }
  100% { opacity: .8; }
}
/* ---------- Keyframe moveMe ---------- */
@-webkit-keyframes foglayer_moveme {
  0% { left: 0; }
  100% { left: -100%; }
}
@-moz-keyframes foglayer_moveme {
  0% { left: 0; }
  100% { left: -100%; }
}
@-o-keyframes foglayer_moveme {
  0% { left: 0; }
  100% { left: -100%; }
}
@keyframes foglayer_moveme {
  0% { left: 0; }
  100% { left: -100%; }
}

@media only screen
  and (min-width: 280px)
  and (max-width: 767px) {
    #foglayer_01 .image01, #foglayer_01 .image02,
    #foglayer_02 .image01, #foglayer_02 .image02,
    #foglayer_03 .image01, #foglayer_03 .image02 {
      width: 100%;
    }
  }
  
  
/*======================== RESPONE AFTER LOGIN ======================= */
.loginResponse {
    border: 1px solid #f1f1f1;
    background-color: rgba(0,0,0, 0.4); /*rgba(1, 204, 220, 0.6);*/
    box-shadow: 0px 0px 5px #f1f1f1;
    /*color: #03d0ff;*/
    text-shadow: 2px 1px #00040a;
    transition: 0.5s;
    cursor: pointer;
    margin: 3vh;
    padding: 2vh;
}
.loginResponse:before {
    /*content: '';
    position: absolute;
    width: 0;
    height: calc(100% - 44px);
    border-left: 1px solid;
    border-right: 2px solid;
    border-bottom-right-radius: 3px;
    border-top-right-radius: 3px;
    left: 0;
    top: 50%;
    transform: translate(0,-50%);
    height: 20px;
    content: '';
    position: absolute;
    width: 0;
    height: calc(40% - 44px);
    border-left: 1px solid;
    border-right: 2px solid;
    border-bottom-right-radius: 3px;
    border-top-right-radius: 3px;
    left: 2.55vw;
    top: 70%;
    transform: translate(0,-50%);*/
}

/*======================== Input Text Block ======================= */
.inputText {
    padding: 15px 10px; 
    line-height: 110%;
    border: 14px solid #9b9b9b;
    outline: 0;
    font-size: 1.3rem;
    color: #fff;
    border: 0;
    transition: border-color 0.2s;
    background: rgba(204, 204, 204, 0.9);
}

/*======================== toggleHideDivs ======================= */

.hide {
    transform: translate(calc(-250% ), 0) !important;
    transition-duration: 1s;
}

.hidden {
  position: absolute;
  animation: slidein 1s ease-in-out;
  z-index: 1;
}

@keyframes slidein {
  0% {
    top: -1900px;
  }
  100% {
    top: 50%;
  }
}