@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}
@-webkit-keyframes pulsate {
    0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;transform: rotate(45deg);}
    50% {opacity: 1.0;transform: rotate(45deg);}
    100% {-webkit-transform: scale(1.8, 1.8); opacity: 0.0;transform: rotate(45deg);}
}
		@font-face { font-family: 'Myriad Web Pro';
		             src: url('/fonts/MyriadWebPro.ttf') format('truetype'); }
		body {
			font-family: 'Myriad Web Pro';
		}
		.field{
			margin-bottom: 15px;
		}
		input[type=password], input[type=text]{
			margin-top:25px;
				width:80%;
				border:0;
				border-radius:0;
				border-bottom: 2pt solid rgb(160,160,160);
				padding:5px;
		}
		label{
			    position: absolute;
			    left:10%;
			    color: rgb(160,160,160);
			    margin-top: -20px;
			    pointer-events: none;
			    transition: all 0.2s ease;
			    -webkit-transition: all 0.2s ease;
			    -moz-transition: all 0.2s ease;
			    -o-transition: all 0.2s ease;
			    font-size: 13px;
		}

		input[type=password]:focus ~ label, input[type=text]:focus ~ label, input[type=password]:valid ~ label, input[type=text]:valid ~ label{
			margin-top:-50px;
			font-size: 10px;
		}
		input[type=password]:focus, input[type=text]:focus, input[type=password]:valid, input[type=text]:valid{
				border-bottom: 2pt solid #ef2010;
				outline:none;
		}
		input[type=submit] {
			margin-top:10px;
			height:40px;
			width:50%;
			border:0;
			-webkit-appearance: none;
			color: rgb(240,240,240);
			background: #ef2010;
			border-radius: 60px;
			transition: all .3s ease;
		}
		input:invalid {
			outline: none;
			box-shadow:none;
		}
		#infoicon {
			position:absolute;
			top:283px;
			right:11%;
			background: url('/img/info-button.png') center center no-repeat;
			background-size:20px 20px;
			width:32px;
			height:32px;
		}

.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 320px;
    background-color: rgb(160,160,160);
    color: #fff;
    text-align: center;
    padding: 5px 5px;
    border-radius: 6px;
    position: absolute;
    z-index: 1;
    bottom: 30px;
    left:-280px;
    float:left;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity:1;
}
#error {
	position: absolute;
	top:0px;
	left:0%;
	width:100%;
	text-align:center;
	color: #fff;
	background-color:#FF2010;
	line-height:60px;
	height:60px;
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
     overflow:hidden;
}
#error .close {
	display:none;
}

#error #error_count {
	float:right;
	margin-right:15px;
	border-radius:50%;
	background: rgba(0,0,0,.4);
	width:24px;
	height:24px;
	color: #FF2010;
	line-height: 24px;
	position:absolute;
	top:18px;
	right:10px;
}
#error #error-list {
	list-style-type:none;
}
#error #error-list li {
	line-height: 40px;
    width: 100%;
    margin-left: -5%;
    border-bottom: 1pt solid rgba(240,240,240,.2);
}
#error_arrow {
	height: 10px;
	width:10px;
	border:0;
	border-right: 2pt solid rgb(140,140,140);
	border-bottom: 2pt solid rgb(140,140,140);
	transform: rotate(90deg);
	position:absolute;
	top:60px;
	left:calc(50% - 10px);
	z-index:5;
    -webkit-animation: pulsate 1s ease-out;
    -webkit-animation-iteration-count: infinite; 

}
@media ( min-width : 768px) {
#error {
	position: absolute;
	top:60px;
	left:15%;
	width:70%;
	text-align:center;
	color: #fff;
	background-color:#FF2010;
	line-height:60px;
	height:25%;
	  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}
#error .close {
    position: absolute;
    right: 10px;
    top: 10px;
    color: #FF2010;
    font-size: 18px;
    display: inline;
    background: rgba(128, 9, 0,0.4);
    border-radius: 50%;
    height: 30px;
    width: 30px;
    line-height: 26px;

	font-weight:bold;
}
#error_arrow {
	display:none;
}
#error #error_count {
	display:none;
}
}