body{
	margin: 0;
}

* { 
	box-sizing:border-box; 
	font-family: 'Open Sans', sans-serif;
}

body{
	background: url('wallpaper.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
}

#center{
	height: 100%;
	width: 100%;
}

#logo{
	position: absolute;
	top: 10px;
	left: 50%;
	margin-left: -145px;
}

#center-div{
	display: none;
	position: absolute;
	width: 500px;
	max-height: 676px;
	background: white;
	box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
	text-align: center;
}

#inner-div{
	padding: 30px;
}

#char-count{
	text-align: right;
	color: #757575;
	font-size: 12px;
	margin-top: 5px;
}

#char-count.exceeded{
	color: red;
}

#error{
	text-align: center;
	display: none;
	color: red;
}

.colorLine{
	width: 100%;
	height: 4px;
	background-color: green;
	animation: colorLine 10s infinite;
}

.will-reply{
	margin-top: 7px;
}

/*@keyframes colorLine {
	12%   { background-color: #9400D3; }
	25%  { background-color: #4B0082; }
	37%  { background-color: #0000FF; }
	50% { background-color: #00FF00; }
	62% { background-color: #FFFF00; }
	75% { background-color: #FF7F00; }
	87% { background-color: #FF0000; }
	100% { background-color: #9400D3; }
}*/

input, textarea, button{
	font-family: 'Open Sans', sans-serif;
	width: 100%;
}

.group{
	position: relative;
	margin-top: 20px;
}

label{
	font-family: 'Open Sans', sans-serif;
}

textarea{
	box-sizing: border-box;
	overflow-x: hidden;
	resize: none;
	outline: none;
	min-height: 100px;
	max-height: 426px;
	border: 1px solid rgb(169, 169, 169);
	border-radius: 4px;
	transition: border-bottom 0.5s ease;
	padding: 5px;
}

textarea:focus{
	border-bottom: 3px solid #5264AE;
}

button{
    color: #ffffff;
    background-color: #48c9b0;
    border-color: #48c9b0;
	border: 0;
	padding: 10px;
	border-radius: 4px;
	width: 100%;
	transition: 0.3s;
	margin-top: 15px;
}

button:focus{
	outline: none;
}

button:hover{
	background-color: #3fb19b;
	transition: 0.3s;
	cursor: pointer;
}

button.hide{
	width: 0px;
	padding: 0px;
	margin: 0 auto;
}

input 				{
	margin: 0 auto;
	font-size:18px;
	padding:10px 10px 10px 5px;
	display:block;
	width: 100%;
	border:none;
	border-bottom:1px solid #757575;
}
input:focus 		{ outline:none; }

/* LABEL ======================================= */
label 				 {
  color:#999; 
  font-size:18px;
  font-weight:normal;
  position:absolute;
  pointer-events:none;
  left:5px;
  top:10px;
  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;
  font-size:14px;
  color:#5264AE;
}

/* BOTTOM BARS ================================= */
.bar 	{ position:relative; display:block; width: 100%;}
.bar:before, .bar:after 	{
  content:'';
  height:2px; 
  width:0;
  bottom:1px; 
  position:absolute;
  background:#5264AE; 
  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%;
}

/* HIGHLIGHTER ================================== */
.highlight {
  position:absolute;
  height:60%; 
  width:100px; 
  top:25%; 
  left:0;
  pointer-events:none;
  opacity:0.5;
}

/* active state */
input:focus ~ .highlight {
  -webkit-animation:inputHighlighter 0.3s ease;
  -moz-animation:inputHighlighter 0.3s ease;
  animation:inputHighlighter 0.3s ease;
}

/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
	from { background:#5264AE; }
  to 	{ width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
	from { background:#5264AE; }
  to 	{ width:0; background:transparent; }
}
@keyframes inputHighlighter {
	from { background:#5264AE; }
  to 	{ width:0; background:transparent; }
}

.grecaptcha-badge {
    display: none;
}

/* ---------- Circle ----------------- */

.checkmark-circle {
  display: none;
  width: 50px;
  height: 50px;
  position: relative;
  vertical-align: top;
}
.checkmark-circle .background {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #2EB150;
  position: absolute;
}
.checkmark-circle .checkmark {
  border-radius: 5px;
}
.checkmark-circle .checkmark.draw:after {
  -webkit-animation-delay: 100ms;
  -moz-animation-delay: 100ms;
  animation-delay: 100ms;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease;
  -moz-animation-timing-function: ease;
  animation-timing-function: ease;
  -webkit-animation-name: checkmark;
  -moz-animation-name: checkmark;
  animation-name: checkmark;
  -webkit-transform: scaleX(-1) rotate(135deg);
  -moz-transform: scaleX(-1) rotate(135deg);
  -ms-transform: scaleX(-1) rotate(135deg);
  -o-transform: scaleX(-1) rotate(135deg);
  transform: scaleX(-1) rotate(135deg);
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.checkmark-circle .checkmark:after {
  opacity: 1;
  height: 25px;
  width: 12.5px;
  -webkit-transform-origin: left top;
  -moz-transform-origin: left top;
  -ms-transform-origin: left top;
  -o-transform-origin: left top;
  transform-origin: left top;
  border-right: 5px solid white;
  border-top: 5px solid white;
  border-radius: 2.5px !important;
  content: '';
  left: 8.33333px;
  top: 25px;
  position: absolute;
}

@-webkit-keyframes checkmark {
  0% {
    height: 0;
    width: 0;
    opacity: 1;
  }
  20% {
    height: 0;
    width: 12.5px;
    opacity: 1;
  }
  40% {
    height: 25px;
    width: 12.5px;
    opacity: 1;
  }
  100% {
    height: 25px;
    width: 12.5px;
    opacity: 1;
  }
}
@-moz-keyframes checkmark {
  0% {
    height: 0;
    width: 0;
    opacity: 1;
  }
  20% {
    height: 0;
    width: 12.5px;
    opacity: 1;
  }
  40% {
    height: 25px;
    width: 12.5px;
    opacity: 1;
  }
  100% {
    height: 25px;
    width: 12.5px;
    opacity: 1;
  }
}
@keyframes checkmark {
  0% {
    height: 0;
    width: 0;
    opacity: 1;
  }
  20% {
    height: 0;
    width: 12.5px;
    opacity: 1;
  }
  40% {
    height: 25px;
    width: 12.5px;
    opacity: 1;
  }
  100% {
    height: 25px;
    width: 12.5px;
    opacity: 1;
  }
}



/* Mobile */
@media screen and (max-width: 500px) {
	#center-div{
		width: 100%;
	}
	
	#inner-div{
		padding: 30px 10px;
	}
}