/*
Basic input element using psuedo classes
*/




		@media (max-width:576px){ 
		
			input,
			
			label,
			 {
			  font-family: 'Ubuntu', sans-serif;
			  display: block;
			  margin: 10px;
			  padding: 5px;
			  border: none;
			  font-size: 22px;
			}
			
			textarea:focus,
			input:focus {
			  outline: 0;
			}
			/* Question */
			
			input.question,
			textarea.question {
			  text-align:center;
			  font-size: 24px;
			  font-weight: 300;
			  border-radius: 2px;
			  margin: 0;
			  border: none;
			  width: 100%;
			  background: rgba(0, 0, 0, 0);
			  transition: padding-top 0.2s ease, margin-top 0.2s ease;
			  overflow-x: hidden; /* Hack to make "rows" attribute apply in Firefox. */
			}
			input.question_not,
			textarea.question_not {
			  text-align:center;
			  font-size: 24px;
			  font-weight: 300;
			  border-radius: 2px;
			  margin: 0;
			  border: none;
			  width: 100%;
			  background: rgba(0, 0, 0, 0);
			  transition: padding-top 0.2s ease, margin-top 0.2s ease;
			  overflow-x: hidden; /* Hack to make "rows" attribute apply in Firefox. */
			}			
			/* Underline and Placeholder */
			
			input.question + label,
			textarea.question + label {
			  display: block;
			  position: relative;
			  white-space: nowrap;
			  padding: 0;
			  margin: 1px;
			  width: 100%;
			  border-top: 1px solid red;
			  -webkit-transition: width 0.4s ease;
			  transition: width 0.4s ease;
			  height: 0px;
			  width:60%;
			  margin-left:auto;
			  margin-right:auto;
			}
			input.question_not + label,
			textarea.question_not + label {
			  display: block;
			  position: relative;
			  white-space: nowrap;
			  padding: 0;
			  margin: 1px;
			  width: 100%;
			  border-top: 1px solid red;
			  -webkit-transition: width 0.4s ease;
			  transition: width 0.4s ease;
			  height: 0px;
			  width:60%;
			  margin-left:auto;
			  margin-right:auto;
			}			
			input.question:focus + label,
			textarea.question:focus + label {
			  width: 100%;
			}
			input.question_not:focus + label,
			textarea.question_not:focus + label {
			  width: 100%;
			}
			
			input.question:focus,
			input.question:valid {
			  padding-top: 0px;
			}
			input.question_not:focus,
			input.question_not:valid {
			  padding-top: 0px;
			}
			
			textarea.question:valid,
			textarea.question:focus {
			  margin-top: 35px;
			}
			textarea.question_not:valid,
			textarea.question_not:focus {
			  margin-top: 35px;
			}
			
			input.question:focus + label > span,
			input.question:valid + label > span {
			  top: -60px;
			  font-size: 15px;
			  color: #333;
			}
			input.question_not:focus + label > span,
			input.question_not:valid + label > span {
			  top: -60px;
			  font-size: 15px;
			  color: #333;
			}
			
			textarea.question:focus + label > span,
			textarea.question:valid + label > span {
			  top: -60px;
			  font-size: 15px;
			  color: #333;
			}
			textarea.question_not:focus + label > span,
			textarea.question_not:valid + label > span {
			  top: -60px;
			  font-size: 15px;
			  color: #333;
			}
			
			input.question:valid + label,
			textarea.question:valid + label {
			  border-color: green;
			}
			input.question_not:valid + label,
			textarea.question_not:valid + label {
			  border-color: green;
			}			
			input.question:invalid,
			textarea.question:invalid {
			  box-shadow: none;
			}
			input.question_not:invalid,
			textarea.question_not:invalid {
			  box-shadow: none;
			}			
			input.question + label > span,
			textarea.question + label > span {
			  font-weight: 300;
			  margin: 0;
			  position: absolute;
			  color: #8F8F8F;
			  font-size: 25px;
			  top: -40px;
			  left: 0px;
			  z-index: -1;
			  -webkit-transition: top 0.2s ease, font-size 0.2s ease, color 0.2s ease;
			  transition: top 0.2s ease, font-size 0.2s ease, color 0.2s ease;
			}
			input.question_not + label > span,
			textarea.question_not + label > span {
			  font-weight: 300;
			  margin: 0;
			  position: absolute;
			  color: #8F8F8F;
			  font-size: 25px;
			  top: -40px;
			  left: 0px;
			  z-index: -1;
			  -webkit-transition: top 0.2s ease, font-size 0.2s ease, color 0.2s ease;
			  transition: top 0.2s ease, font-size 0.2s ease, color 0.2s ease;
			}
			
			input[type=submit] {
			  -webkit-transition: opacity 0.2s ease, background 0.2s ease;
			  transition: opacity 0.2s ease, background 0.2s ease;
			  display: block;
			  opacity: 0;
			  margin: 10px 0 0 0;
			  padding: 10px;
			  cursor: pointer;
			}
			
			input[type=submit]:hover {
			  background: #EEE;
			}
			
			input[type=submit]:active {
			  background: #999;
			}
			
			input.question:valid ~ input[type="submit"], textarea.question:valid ~ input[type="submit"] {
			  -webkit-animation: appear 1s forwards;
			  animation: appear 1s forwards;
			}
			input.question_not:valid ~ input[type="submit"], textarea.question_not:valid ~ input[type="submit"] {
			  -webkit-animation: appear 1s forwards;
			  animation: appear 1s forwards;
			}			
			input.question:invalid ~ input[type="submit"], textarea.question:invalid ~ input[type="submit"] {
			  display: none;
			}
			input.question_not:invalid ~ input[type="submit"], textarea.question_not:invalid ~ input[type="submit"] {
			  display: none;
			}
			input:-webkit-autofill{-webkit-box-shadow: 0 0 0 30px white inset !important;}
			
			@-webkit-keyframes appear {
			  100% {
			    opacity: 1;
			  }
			}
			
			@keyframes appear {
			  100% {
			    opacity: 1;
			  }
			}
		
		
			.modal_textarea{padding-top:4px;}
		
		}
		
		
		@media (min-width:577px){
			input,
			
			label,
			 {
			  font-family: 'Ubuntu', sans-serif;
			  display: block;
			  margin: 10px;
			  padding: 5px;
			  border: none;
			  font-size: 22px;
			}
			
			textarea:focus,
			input:focus {
			  outline: 0;
			}
			/* Question */
			
			input.question,
			textarea.question {
			  text-align:center;
			  font-size: 35px;
			  font-weight: 300;
			  border-radius: 2px;
			  margin: 0;
			  border: none;
			  width: 100%;
			  background: rgba(0, 0, 0, 0);
			  transition: padding-top 0.2s ease, margin-top 0.2s ease;
			  overflow-x: hidden; /* Hack to make "rows" attribute apply in Firefox. */
			}
			input.question_not,
			textarea.question_not {
			  text-align:center;
			  font-size: 35px;
			  font-weight: 300;
			  border-radius: 2px;
			  margin: 0;
			  border: none;
			  width: 100%;
			  background: rgba(0, 0, 0, 0);
			  transition: padding-top 0.2s ease, margin-top 0.2s ease;
			  overflow-x: hidden; /* Hack to make "rows" attribute apply in Firefox. */
			}
			/* Underline and Placeholder */
			
			

			input.question + label,
			textarea.question + label {
			  display: block;
			  position: relative;
			  white-space: nowrap;
			  padding: 0;
			  margin: 1px;
			  width: 100%;
			  border-top: 1px solid red;
			  -webkit-transition: width 0.4s ease;
			  transition: width 0.4s ease;
			  height: 0px;
			  width:55%;
			  margin-left:auto;
			  margin-right:auto;

			}
			

			input.question_not + label,
			textarea.question_not + label {
			  display: block;
			  position: relative;
			  white-space: nowrap;
			  padding: 0;
			  margin: 1px;
			  width: 100%;
			  border-top: 1px solid red;
			  -webkit-transition: width 0.4s ease;
			  transition: width 0.4s ease;
			  height: 0px;
			  width:55%;
			  margin-left:auto;
			  margin-right:auto;

			}
			input.question:focus + label,
			textarea.question:focus + label {
			  width: 100%;
			}
			input.question_not:focus + label,
			textarea.question_not:focus + label {
			  width: 100%;
			}			
			input.question:focus,
			input.question:valid {
			  padding-top: 0px;
			}
			input.question_not:focus,
			input.question_not:valid {
			  padding-top: 0px;
			}			
			textarea.question:valid,
			textarea.question:focus {
			  margin-top: 35px;
			}
			textarea.question_not:valid,
			textarea.question_not:focus {
			  margin-top: 35px;
			}			
			input.question:focus + label > span,
			input.question:valid + label > span {
			  top: -85px;
			  font-size: 22px;
			  color: #333;
			}
			
			textarea.question_not:focus + label > span,
			textarea.question_not:valid + label > span {
			  top: -100px;
			  font-size: 22px;
			  color: #333;
			}
			
			input.question:valid + label,
			textarea.question:valid + label {
			  border-color: green;
			}
			input.question_not:valid + label,
			textarea.question_not:valid + label {
			  border-color: green;
			}			
			input.question:invalid,
			textarea.question:invalid {
			  box-shadow: none;
			}
			input.question_not:invalid,
			textarea.question_not:invalid {
			  box-shadow: none;
			}			
			input.question + label > span,
			textarea.question + label > span {
			  font-weight: 300;
			  margin: 0;
			  position: absolute;
			  color: #8F8F8F;
			  font-size: 36px;
			  top: -66px;
			  left: 0px;
			  z-index: -1;
			  -webkit-transition: top 0.2s ease, font-size 0.2s ease, color 0.2s ease;
			  transition: top 0.2s ease, font-size 0.2s ease, color 0.2s ease;
			}
			input.question_not + label > span,
			textarea.question_not + label > span {
			  font-weight: 300;
			  margin: 0;
			  position: absolute;
			  color: #8F8F8F;
			  font-size: 36px;
			  top: -66px;
			  left: 0px;
			  z-index: -1;
			  -webkit-transition: top 0.2s ease, font-size 0.2s ease, color 0.2s ease;
			  transition: top 0.2s ease, font-size 0.2s ease, color 0.2s ease;
			}			
			input[type=submit] {
			  -webkit-transition: opacity 0.2s ease, background 0.2s ease;
			  transition: opacity 0.2s ease, background 0.2s ease;
			  display: block;
			  opacity: 0;
			  margin: 10px 0 0 0;
			  padding: 10px;
			  cursor: pointer;
			}
			
			input[type=submit]:hover {
			  background: #EEE;
			}
			
			input[type=submit]:active {
			  background: #999;
			}
			
			input.question:valid ~ input[type="submit"], textarea.question:valid ~ input[type="submit"] {
			  -webkit-animation: appear 1s forwards;
			  animation: appear 1s forwards;
			}
			input.question_not:valid ~ input[type="submit"], textarea.question_not:valid ~ input[type="submit"] {
			  -webkit-animation: appear 1s forwards;
			  animation: appear 1s forwards;
			}
			
			input.question:invalid ~ input[type="submit"], textarea.question:invalid ~ input[type="submit"] {
			  display: none;
			}
			input.question_not:invalid ~ input[type="submit"], textarea.question_not:invalid ~ input[type="submit"] {
			  display: none;
			}			
			@-webkit-keyframes appear {
			  100% {
			    opacity: 1;
			  }
			}
			
			@keyframes appear {
			  100% {
			    opacity: 1;
			  }
			}
		
			.modal_textarea{padding-top:24px;}

		}