/* Настольные компьютеры и ноутбуки ----------- */
@media only screen  and (min-width: 640px) {
  div.group label{
    font-size: 12px;
  }
  .formdiv{
    width: 500px;
    height: 400px;
    position: fixed;
    top: 25%;
    left: 33%;
    margin: -125px 0 0 -125px;
    background-image: url(./image-front/convert.png);
    background-repeat: repeat-x; 
    background-size: 100%;
}
.group{
  position: relative;
  margin-bottom: 30px;
  top: 165px;
  left: 35px;
}
.group-age{
  position: relative;
  top: 113px;
  left: 175px;
}
.group-city{
  position: relative;
  top: 105px; 
}
.group-become{
  position: relative;
  top: 53px;
  left: 175px;
  color: #5264AE;
}
.group-textA{
  position: relative;
  top: 55px;
}
.group-mail{
position: relative;
left: 100px;
top: 80px;
}
.group-gmail{
position: relative;
top: -55px;
left: 270px;

}
.email_input{
color: #c1272d;
font-size: 13px;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
padding: 0px;
display: block;
width: 100%;
max-width: 180px;
border: none;
border-bottom: 1px solid darkblue;
background-color: transparent;
}
.textA{
  top: -27px;
  font-size: 16px;
  font-family: 'Brush Script MT', cursive;
  font-style: initial;
  color: #5264AE;
  background: linear-gradient(45deg, #0B2349 33%, #0D61BC 66%, #8AA9D6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

}
.textArea_input{
  background-color: transparent;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; 
  width: 225px;
  height: 60px;
  resize: none;
}

input{
 color: #c1272d;
font-size: 14px;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
padding: 0px;
display: block;
width: 100%;
max-width: 115px;
border: none;
border-bottom: 1px solid darkblue;
background-color: transparent; 
}
input:focus {
  outline: none;
}
select{
  color: #c1272d;
  font-size: 13px;
  font-family: 'Brush Script MT', cursive;
  padding: 0px;
  display: block;
  max-width: 150px;
  border: none;
  border-bottom: 1px solid darkblue;
  background-color: transparent; 
}

label {
  color: #5264AE;
  font-family: 'Brush Script MT', cursive;
  font-size: 16px;
  position: absolute;
  pointer-events: none;
  left: 10px;
  top: 0px;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
}

/* active state */
input:focus ~ label, input:valid ~ label {
  top: -20px;
  left: 0px;
  font-size: 12px;
  font-family: 'Brush Script MT', cursive;
  font-style: initial;
  color: #5264AE;
  background: linear-gradient(45deg, #0B2349 33%, #0D61BC 66%, #8AA9D6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* BOTTOM BARS ================================= */
.bar {
  position: relative;
  display: block;
  width: 115px;
}
.bar:before {
  content: "";
  height: 2px;
  width: 0;
  bottom: 0;
  position: absolute;
  background:linear-gradient(0.25turn,#e66465, #9198e5);
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
}

.bar:after{
  content: "";
  height: 2px;
  width: 0;
  bottom: 0;
  position: absolute;
  background:linear-gradient(0.25turn, #9198e5,#e66465);
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
}

.bar:before {
  left: 50%;
}
.bar:after {
  right: 50%;
}

/* active state */
input:focus ~ .bar:before,
input:focus ~ .bar:after {
  width: 50%;
}
      
    }
@media only screen  and (min-width: 800px) {
    div.group label{
        font-size: 12px;
      }
      .formdiv{
        width: 500px;
        height: 400px;
        position: fixed;
        top: 25%;
        left: 38%;
        margin: -125px 0 0 -125px;
        background-image: url(./image-front/convert.png);
        background-repeat: repeat-x; 
        background-size: 100%;
    }
    .group{
      position: relative;
      margin-bottom: 30px;
      top: 165px;
      left: 35px;
  }
  .group-age{
      position: relative;
      top: 113px;
      left: 175px;
  }
  .group-city{
      position: relative;
      top: 105px; 
  }
  .group-become{
      position: relative;
      top: 53px;
      left: 175px;
      color: #5264AE;
  }
  .group-textA{
      position: relative;
      top: 55px;
  }
  .group-mail{
    position: relative;
    left: 100px;
    top: 100px;
  }
  .group-gmail{
    position: relative;
    top: -55px;
    left: 270px;
    
  }
  .email_input{
    color: #c1272d;
    font-size: 13px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    padding: 0px;
    display: block;
    width: 100%;
    max-width: 180px;
    border: none;
    border-bottom: 1px solid darkblue;
    background-color: transparent;
  }
  .textA{
      top: -27px;
      font-size: 16px;
      font-family: 'Brush Script MT', cursive;
      font-style: initial;
      color: #5264AE;
      background: linear-gradient(45deg, #0B2349 33%, #0D61BC 66%, #8AA9D6);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;

  }
  .textArea_input{
      background-color: transparent;
      font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; 
      width: 225px;
      height: 60px;
      resize: none;
    }
  
  input{
     color: #c1272d;
    font-size: 14px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    padding: 0px;
    display: block;
    width: 100%;
   max-width: 115px;
    border: none;
    border-bottom: 1px solid darkblue;
    background-color: transparent; 
  }
  input:focus {
      outline: none;
    }
    select{
      color: #c1272d;
      font-size: 13px;
      font-family: 'Brush Script MT', cursive;
      padding: 0px;
      display: block;
      max-width: 150px;
      border: none;
      border-bottom: 1px solid darkblue;
      background-color: transparent; 
    }
  
    label {
      color: #5264AE;
      font-family: 'Brush Script MT', cursive;
      font-size: 16px;
      position: absolute;
      pointer-events: none;
      left: 10px;
      top: 0px;
      transition: 0.2s ease all;
      -moz-transition: 0.2s ease all;
      -webkit-transition: 0.2s ease all;
    }
    
    /* active state */
    input:focus ~ label, input:valid ~ label {
      top: -20px;
      left: 0px;
      font-size: 12px;
      font-family: 'Brush Script MT', cursive;
      font-style: initial;
      color: #5264AE;
      background: linear-gradient(45deg, #0B2349 33%, #0D61BC 66%, #8AA9D6);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  
    /* BOTTOM BARS ================================= */
    .bar {
      position: relative;
      display: block;
      width: 115px;
    }
    .bar:before {
      content: "";
      height: 2px;
      width: 0;
      bottom: 0;
      position: absolute;
      background:linear-gradient(0.25turn,#e66465, #9198e5);
      transition: 0.2s ease all;
      -moz-transition: 0.2s ease all;
      -webkit-transition: 0.2s ease all;
    }
  
    .bar:after{
      content: "";
      height: 2px;
      width: 0;
      bottom: 0;
      position: absolute;
      background:linear-gradient(0.25turn, #9198e5,#e66465);
      transition: 0.2s ease all;
      -moz-transition: 0.2s ease all;
      -webkit-transition: 0.2s ease all;
    }
  
    .bar:before {
      left: 50%;
    }
    .bar:after {
      right: 50%;
    }
    
    /* active state */
    input:focus ~ .bar:before,
    input:focus ~ .bar:after {
      width: 50%;
    }
      
    }
@media only screen  and (min-width: 1024px) {
    div.group label{
        font-size: 12px;
      }
      .formdiv{
        width: 500px;
        height: 400px;
        position: fixed;
        top: 25%;
        left: 38%;
        margin: -125px 0 0 -125px;
        background-image: url(./image-front/convert.png);
        background-repeat: repeat-x; 
        background-size: 100%;
    }
    .group{
      position: relative;
      margin-bottom: 30px;
      top: 165px;
      left: 35px;
  }
  .group-age{
      position: relative;
      top: 113px;
      left: 175px;
  }
  .group-city{
      position: relative;
      top: 105px; 
  }
  .group-become{
      position: relative;
      top: 53px;
      left: 175px;
      color: #5264AE;
  }
  .group-textA{
      position: relative;
      top: 55px;
  }
  .group-mail{
    position: relative;
    left: 100px;
    top: 100px;
  }
  .group-gmail{
    position: relative;
    top: -55px;
    left: 270px;
    
  }
  .email_input{
    color: #c1272d;
    font-size: 13px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    padding: 0px;
    display: block;
    width: 100%;
    max-width: 180px;
    border: none;
    border-bottom: 1px solid darkblue;
    background-color: transparent;
  }
  .textA{
      top: -27px;
      font-size: 16px;
      font-family: 'Brush Script MT', cursive;
      font-style: initial;
      color: #5264AE;
      background: linear-gradient(45deg, #0B2349 33%, #0D61BC 66%, #8AA9D6);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;

  }
  .textArea_input{
      background-color: transparent;
      font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; 
      width: 225px;
      height: 60px;
      resize: none;
    }
  
  input{
     color: #c1272d;
    font-size: 14px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    padding: 0px;
    display: block;
    width: 100%;
   max-width: 115px;
    border: none;
    border-bottom: 1px solid darkblue;
    background-color: transparent; 
  }
  input:focus {
      outline: none;
    }
    select{
      color: #c1272d;
      font-size: 13px;
      font-family: 'Brush Script MT', cursive;
      padding: 0px;
      display: block;
      max-width: 150px;
      border: none;
      border-bottom: 1px solid darkblue;
      background-color: transparent; 
    }
  
    label {
      color: #5264AE;
      font-family: 'Brush Script MT', cursive;
      font-size: 16px;
      position: absolute;
      pointer-events: none;
      left: 10px;
      top: 0px;
      transition: 0.2s ease all;
      -moz-transition: 0.2s ease all;
      -webkit-transition: 0.2s ease all;
    }
    
    /* active state */
    input:focus ~ label, input:valid ~ label {
      top: -20px;
      left: 0px;
      font-size: 12px;
      font-family: 'Brush Script MT', cursive;
      font-style: initial;
      color: #5264AE;
      background: linear-gradient(45deg, #0B2349 33%, #0D61BC 66%, #8AA9D6);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  
    /* BOTTOM BARS ================================= */
    .bar {
      position: relative;
      display: block;
      width: 115px;
    }
    .bar:before {
      content: "";
      height: 2px;
      width: 0;
      bottom: 0;
      position: absolute;
      background:linear-gradient(0.25turn,#e66465, #9198e5);
      transition: 0.2s ease all;
      -moz-transition: 0.2s ease all;
      -webkit-transition: 0.2s ease all;
    }
  
    .bar:after{
      content: "";
      height: 2px;
      width: 0;
      bottom: 0;
      position: absolute;
      background:linear-gradient(0.25turn, #9198e5,#e66465);
      transition: 0.2s ease all;
      -moz-transition: 0.2s ease all;
      -webkit-transition: 0.2s ease all;
    }
  
    .bar:before {
      left: 50%;
    }
    .bar:after {
      right: 50%;
    }
    
    /* active state */
    input:focus ~ .bar:before,
    input:focus ~ .bar:after {
      width: 50%;
    }
      
    }

    @media only screen and (min-width : 1280px) {
      .formdiv{
        width: 550px;
        height: 400px;
        position: fixed;
        top: 25%;
        left: 38%;
        margin: -125px 0 0 -125px;
        background-image: url(./image-front/convert.png);
        background-repeat: repeat-x; 
        background-size: 100%;
    }

        div.group label{
            font-size: 12px;
          }

          .group{
            position: relative;
            margin-bottom: 30px;
            top: 175px;
            left: 40px;
        }
        .group-age{
            position: relative;
            top: 123px;
            left: 190px;
        }
        .group-city{
            position: relative;
            top: 115px; 
        }
        .group-become{
            position: relative;
            top: 62px;
            left: 190px;
            color: #5264AE;
        }
        .group-textA{
            position: relative;
            top: 70px;
        }
        .group-mail{
          position: relative;
          left: 120px;
          top: 170px;
        }
        .group-gmail{
          position: relative;
          top: -55px;
          left: 300px;
          
        }
        .email_input{
          color: #c1272d;
          font-size: 13px;
          font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
          padding: 0px;
          display: block;
          width: 100%;
          max-width: 200px;
          border: none;
          border-bottom: 1px solid darkblue;
          background-color: transparent;
        }
        .textA{
            top: -27px;
            font-size: 16px;
            font-family: 'Brush Script MT', cursive;
            font-style: initial;
            color: #5264AE;
            background: linear-gradient(45deg, #0B2349 33%, #0D61BC 66%, #8AA9D6);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;

        }
        .textArea_input{
            background-color: transparent;
            font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; 
            width: 250px;
            height: 80px;
            resize: none;
          }
        
        input{
           color: #c1272d;
          font-size: 14px;
          font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
          padding: 0px;
          display: block;
          width: 100%;
         max-width: 125px;
          border: none;
          border-bottom: 1px solid darkblue;
          background-color: transparent; 
        }
        input:focus {
            outline: none;
          }
          select{
            color: #c1272d;
            font-size: 15px;
            font-family: 'Brush Script MT', cursive;
            padding: 0px;
            display: block;
            max-width: 150px;
            border: none;
            border-bottom: 1px solid darkblue;
            background-color: transparent; 
          }
        
          label {
            color: #5264AE;
            font-family: 'Brush Script MT', cursive;
            font-size: 16px;
            position: absolute;
            pointer-events: none;
            left: 10px;
            top: 0px;
            transition: 0.2s ease all;
            -moz-transition: 0.2s ease all;
            -webkit-transition: 0.2s ease all;
          }
          
          /* active state */
          input:focus ~ label, input:valid ~ label {
            top: -20px;
            left: 0px;
            font-size: 12px;
            font-family: 'Brush Script MT', cursive;
            font-style: initial;
            color: #5264AE;
            background: linear-gradient(45deg, #0B2349 33%, #0D61BC 66%, #8AA9D6);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }
        
          /* BOTTOM BARS ================================= */
          .bar {
            position: relative;
            display: block;
            width: 125px;
          }
          .bar:before {
            content: "";
            height: 2px;
            width: 0;
            bottom: 0;
            position: absolute;
            background:linear-gradient(0.25turn,#e66465, #9198e5);
            transition: 0.2s ease all;
            -moz-transition: 0.2s ease all;
            -webkit-transition: 0.2s ease all;
          }
        
          .bar:after{
            content: "";
            height: 2px;
            width: 0;
            bottom: 0;
            position: absolute;
            background:linear-gradient(0.25turn, #9198e5,#e66465);
            transition: 0.2s ease all;
            -moz-transition: 0.2s ease all;
            -webkit-transition: 0.2s ease all;
          }
        
          .bar:before {
            left: 50%;
          }
          .bar:after {
            right: 50%;
          }
          
          /* active state */
          input:focus ~ .bar:before,
          input:focus ~ .bar:after {
            width: 50%;
          }

    }

    @media only screen and (min-width : 1600px) {
      .formdiv{
        width: 600px;
        height: 500px;
        position: fixed;
        top: 20%;
        left: 40%;
        margin: -125px 0 0 -125px;
        background-image: url(./image-front/convert.png);
        background-repeat: repeat-x; 
        background-size: 100%;
    }
    
        
        div.group label{
            font-size: 14px;
          }
          .group{
            position: relative;
            margin-bottom: 30px;
            top: 195px;
            left: 40px;
        }
        .group-age{
            position: relative;
            top: 139px;
            left: 200px;
        }
        .group-city{
            position: relative;
            top: 130px; 
        }
        .group-become{
            position: relative;
            top: 75px;
            left: 200px;
            color: #5264AE;
        }
        .group-textA{
            position: relative;
            top: 80px;
        }
        .group-mail{
          position: relative;
          left: 140px;
          top: 240px;
        }
        .group-gmail{
          position: relative;
          top: -50px;
          left: 350px;
          
        }
        .email_input{
          color: #c1272d;
          font-size: 13px;
          font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
          padding: 0px;
          display: block;
          width: 100%;
          max-width: 200px;
          border: none;
          border-bottom: 1px solid darkblue;
          background-color: transparent;
        }
        .textA{
            top: -27px;
            font-size: 16px;
            font-family: 'Brush Script MT', cursive;
            font-style: initial;
            color: #5264AE;
            background: linear-gradient(45deg, #0B2349 33%, #0D61BC 66%, #8AA9D6);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .textArea_input{
          background-color: transparent;
          font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; 
          width: 300px;
          height: 80px;
          resize: none;
        }
        
        input{
           color: #c1272d;
          font-size: 16px;
          font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
          padding: 0px;
          display: block;
          width: 100%;
         max-width: 150px;
          border: none;
          border-bottom: 1px solid darkblue;
          background-color: transparent; 
        }
        input:focus {
            outline: none;
          }
          select{
            color: #c1272d;
            font-size: 15px;
            font-family: 'Brush Script MT', cursive;
            padding: 0px;
            display: block;
            max-width: 150px;
            border: none;
            border-bottom: 1px solid darkblue;
            background-color: transparent; 
          }
        
          label {
            color: #5264AE;
            font-family: 'Brush Script MT', cursive;
            font-size: 16px;
            position: absolute;
            pointer-events: none;
            left: 10px;
            top: 0px;
            transition: 0.2s ease all;
            -moz-transition: 0.2s ease all;
            -webkit-transition: 0.2s ease all;
          }
          
          /* active state */
          input:focus ~ label, input:valid ~ label {
            top: -20px;
            left: 0px;
            font-size: 16px;
            font-family: 'Brush Script MT', cursive;
            font-style: initial;
            color: #5264AE;
            background: linear-gradient(45deg, #0B2349 33%, #0D61BC 66%, #8AA9D6);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }
        
          /* BOTTOM BARS ================================= */
          .bar {
            position: relative;
            display: block;
            width: 150px;
          }
          .bar:before {
            content: "";
            height: 2px;
            width: 0;
            bottom: 0;
            position: absolute;
            background:linear-gradient(0.25turn,#e66465, #9198e5);
            transition: 0.2s ease all;
            -moz-transition: 0.2s ease all;
            -webkit-transition: 0.2s ease all;
          }
        
          .bar:after{
            content: "";
            height: 2px;
            width: 0;
            bottom: 0;
            position: absolute;
            background:linear-gradient(0.25turn, #9198e5,#e66465);
            transition: 0.2s ease all;
            -moz-transition: 0.2s ease all;
            -webkit-transition: 0.2s ease all;
          }
        
          .bar:before {
            left: 50%;
          }
          .bar:after {
            right: 50%;
          }
          
          /* active state */
          input:focus ~ .bar:before,
          input:focus ~ .bar:after {
            width: 50%;
          }

    }
    @media only screen and (min-width : 1700px) {

        div.group label{
            font-size: 16px;
          }
          .formdiv{
            width: 650px;
            height: 500px;
            position: fixed;
            top: 20%;
            left: 39%;
            margin: -125px 0 0 -125px;
            background-image: url(./image-front/convert.png);
            background-repeat: repeat-x; 
            background-size: 100%;
        }
        
            
            div.group label{
                font-size: 16px;
              }
              .group{
                position: relative;
                margin-bottom: 30px;
                top: 205px;
                left: 45px;
            }
            .group-age{
                position: relative;
                top: 149px;
                left: 220px;
            }
            .group-city{
                position: relative;
                top: 140px; 
            }
            .group-become{
                position: relative;
                top: 85px;
                left: 220px;
                color: #5264AE;
            }
            .group-textA{
                position: relative;
                top: 100px;
            }
            .group-mail{
              position: relative;
              left: 170px;
              top: 300px;
            }
            .group-gmail{
              position: relative;
              top: -40px;
              left: 350px;
              
            }
            .email_input{
              color: #c1272d;
              font-size: 13px;
              font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
              padding: 0px;
              display: block;
              width: 100%;
              max-width: 250px;
              border: none;
              border-bottom: 1px solid darkblue;
              background-color: transparent;
            }
            .textA{
                top: -27px;
                font-size: 16px;
                font-family: 'Brush Script MT', cursive;
                font-style: initial;
                color: #5264AE;
                background: linear-gradient(45deg, #0B2349 33%, #0D61BC 66%, #8AA9D6);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }
            .textArea_input{
              background-color: transparent;
              font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; 
              width: 300px;
              height: 90px;
              resize: none;
            }
            
            input{
               color: #c1272d;
              font-size: 16px;
              font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
              padding: 0px;
              display: block;
              width: 100%;
             max-width: 160px;
              border: none;
              border-bottom: 1px solid darkblue;
              background-color: transparent; 
            }
            input:focus {
                outline: none;
              }
              select{
                color: #c1272d;
                font-size: 15px;
                font-family: 'Brush Script MT', cursive;
                padding: 0px;
                display: block;
                max-width: 150px;
                border: none;
                border-bottom: 1px solid darkblue;
                background-color: transparent; 
              }
            
              label {
                color: #5264AE;
                font-family: 'Brush Script MT', cursive;
                font-size: 16px;
                position: absolute;
                pointer-events: none;
                left: 10px;
                top: 0px;
                transition: 0.2s ease all;
                -moz-transition: 0.2s ease all;
                -webkit-transition: 0.2s ease all;
              }
              
              /* active state */
              input:focus ~ label, input:valid ~ label {
                top: -20px;
                left: 0px;
                font-size: 16px;
                font-family: 'Brush Script MT', cursive;
                font-style: initial;
                color: #5264AE;
                background: linear-gradient(45deg, #0B2349 33%, #0D61BC 66%, #8AA9D6);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
              }
            
              /* BOTTOM BARS ================================= */
              .bar {
                position: relative;
                display: block;
                width: 155px;
              }
              .bar:before {
                content: "";
                height: 2px;
                width: 0;
                bottom: 0;
                position: absolute;
                background:linear-gradient(0.25turn,#e66465, #9198e5);
                transition: 0.2s ease all;
                -moz-transition: 0.2s ease all;
                -webkit-transition: 0.2s ease all;
              }
            
              .bar:after{
                content: "";
                height: 2px;
                width: 0;
                bottom: 0;
                position: absolute;
                background:linear-gradient(0.25turn, #9198e5,#e66465);
                transition: 0.2s ease all;
                -moz-transition: 0.2s ease all;
                -webkit-transition: 0.2s ease all;
              }
            
              .bar:before {
                left: 50%;
              }
              .bar:after {
                right: 50%;
              }
              
              /* active state */
              input:focus ~ .bar:before,
              input:focus ~ .bar:after {
                width: 50%;
              }
    }