@font-face{
  font-family: "Montserrat";
  src: url( "/fonts/montserrat.eot" );
  src: url( "/fonts/montserrat.eot?#iefix" )format( "embedded-opentype" ),
       url( "/fonts/montserrat.woff" )format( "woff" ),
       url( "/fonts/montserrat.woff2" )format( "woff2" ),
       url( "/fonts/montserrat.ttf" )format( "truetype" ),
       url( "/fonts/montserrat.svg#Montserrat" )format( "svg" );
  font-weight:normal;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family: "Montserrat";
  src: url( "/fonts/montserrat-bold.eot" );
  src: url( "/fonts/montserrat-bold.eot?#iefix" )format( "embedded-opentype" ),
       url( "/fonts/montserrat-bold.woff" )format( "woff" ),
       url( "/fonts/montserrat-bold.woff2" )format( "woff2" ),
       url( "/fonts/montserrat-bold.ttf" )format( "truetype" ),
       url( "/fonts/montserrat-bold.svg#Montserrat Bold" )format( "svg" );
  font-weight:bold;
  font-style:bold;
  font-display:swap;
}

@font-face{
  font-family: "Montserrat";
  src: url( "/fonts/montserrat-light.eot" );
  src: url( "/fonts/montserrat-light.eot?#iefix" )format( "embedded-opentype" ),
       url( "/fonts/montserrat-light.woff" )format( "woff" ),
       url( "/fonts/montserrat-light.woff2" )format( "woff2" ),
       url( "/fonts/montserrat-light.ttf" )format( "truetype" ),
       url( "/fonts/montserrat-light.svg#Montserrat Bold" )format( "svg" );
  font-weight:200;
  font-style:200;
  font-display:swap;
}

html, body
{
  font-family:Montserrat, Verdana, Helvetica, Arial, sans-serif;
  font-size:14px;
  font-weight:normal;
  color:black;
  -webkit-text-size-adjust:100%;
  letter-spacing:1;
/*  background-color:#e5e2d8;*/
  line-height:1.5;
}

@import url( 'https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap' );
*{
  margin: 0;
  padding: 0;
  outline: none;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body
{
  display:flex;
/*  align-items:center;
  justify-content:center;*/
  min-height:100vh;
  padding:10px;
  background:linear-gradient( 115deg, #56d8e4 10%, #9f01ea 90% );
}

table, tr, td { margin:0px; padding:0px; border-spacing:0px; }
img { display:inline-block; border:0px; text-align:left; }
a { text-decoration:none; color:black; }

.container
{
  max-width: 400px;
  background: #fff;
  width: 400px;
  padding: 25px 40px 10px 40px;
  box-shadow: 0px 0px 10px rgba( 0, 0, 0, 0.1 );
}

.container .text
{
  text-align:left;
  margin-top:20px;
  font-size:38px;
  font-weight:600;
  font-family:'Poppins', sans-serif;
  background:-webkit-linear-gradient( right, #56d8e4, #9f01ea, #56d8e4, #9f01ea );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.container form { padding-top:15px; }

.container form .form-row
{
  display:flex;
  margin:32px 0;
}

form .form-row .input-data
{
  width:100%;
  height:40px;
/*  margin:0 20px;*/
  position:relative;
}

form .form-row .textarea { height:70px; }

.input-data input,
select,
.textarea textarea
{
  display:block;
  width:100%;
  height:100%;
  border:none;
  font-size:17px;
  border-bottom:2px solid rgba( 0, 0, 0, 0.12 );
}

.input-data input:valid ~ label, .textarea textarea:valid ~ label,
/*.input-data input:not([value='']) ~ label, .textarea textarea:not([value='']) ~ label,*/
.input-data input:focus ~ label, .textarea textarea:focus ~ label
{
  transform:translateY( -20px );
  font-size:14px;
  color:#3498db;
}

.Blue
{
  transform:translateY( -20px );
  font-size:14px !important;
  color:#3498db;
}

.textarea textarea { resize:none; padding-top:10px; }

.input-data label
{
  position:absolute;
  pointer-events:none;
  bottom:10px;
  font-size:16px;
  transition:all 0.3s ease;
}

.textarea label
{
  width:100%;
  bottom:40px;
  background:#fff;
}

.input-data .underline
{
  position:absolute;
  bottom:0;
  height:2px;
  width:100%;
}

.input-data .underline:before
{
  position:absolute;
  content:"";
  height:2px;
  width:100%;
  background:#3498db;
  transform:scaleX( 0 );
  transform-origin:center;
  transition:transform 0.3s ease;
}

input[type=date] { color:#e0e0e0; }

.input-data input:focus ~ .underline:before,
.input-data input:valid ~ .underline:before,
select:focus ~ .underline:before,
select:valid ~ .underline:before,
.textarea textarea:focus ~ .underline:before,
.textarea textarea:valid ~ .underline:before { transform:scale( 1 ); }

/*.input-data input:focus ~ .underline:before,
.input-data input:not([value='']) ~ .underline:before,
select:focus ~ .underline:before,
.textarea textarea:focus ~ .underline:before { transform:scale( 1 ); }*/

.submit-btn .input-data
{
  overflow:hidden;
  height:45px !important;
  width:30% !important;
}

.submit-btn .input-data .inner
{
  height:100%;
  width:300%;
  position:absolute;
  left:-100%;
  background:-webkit-linear-gradient( right, #56d8e4, #9f01ea, #56d8e4, #9f01ea );
  transition:all 0.4s;
}

.submit-btn .input-data:hover .inner { left:0px; }

.submit-btn .input-data input
{
  background:none;
  border:none;
  color:#fff;
  font-size:17px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:1px;
  cursor:pointer;
  position:relative;
  z-index:2;
}

@media ( max-width: 700px )
{
  .container .text { font-size:30px; }
  .container form { padding: 10px 0 0 0; }
  .container form .form-row { display:block; }
  form .form-row .input-data { margin:35px 0 !important; }
  .submit-btn .input-data { width:40% !important; }
}