* 		{ box-sizing: border-box; }
body 		{ font-family: Tahoma, Verdana, Segoe, sans-serif; font-size: 14px; background: #aaa; padding: 15px; text-align: center; }
.logo_ddbb 	{ width: 100%; height: 90px; border-radius: 5px; margin: 0px auto; position: relative; width: 262px; height: 89px;
    background: url(../logo_ddbb_300.png) no-repeat center center; }
.headline	{ margin: 5px auto; padding: 10px; background: #c10000; color:white; border-radius: 5px; width:265px;  }
.nav 		{ margin: 5px auto; padding: 5px 0 5px; font-weight: bold; background: #EEDDEE; border-radius: 5px; width:265px; }
.nav li 	{ display: inline-block; list-style-type: none; font-size: 0.75em; margin: 0 8px; color: #c10000; position: relative; cursor: pointer; }
.nav li:hover   { color:black;}
.nav li:after 	{ content: ""; position: absolute; bottom: 0; left: 0; width: 20px; border-bottom: 2px solid #c10000; transition: all ease-in 0.25s; }
.nav li:hover:after { width: 100%;border-bottom: 2px solid black;}

.wrapper 	{ width: 250px; height: 620px; margin: 15px auto; perspective: 600px; text-align: left; }
.rec-prism 	{ width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transform: translateZ(-100px); transition: transform 0.5s ease-in; }
.face 		{ position: absolute; width: 250px; height: 650px; padding: 20px; background: rgba(255, 255, 255, 1.00); border: 3px solid #c10000; border-radius: 5px; }
.face .content 	{ color: #666; }
.face .content h2 { font-size: 1.2em; color: #c10000; }
.face .content .field-wrapper { margin-top: 30px; position: relative; }
.face .content .field-wrapper label { position: absolute; pointer-events: none; font-size: 0.85em; top: 40%; left: 0; transform: translateY(-50%); transition: all ease-in 0.25s; color: #999999; }
.face .content .field-wrapper input[type=text], .face .content .field-wrapper input[type=password], .face .content .field-wrapper input[type=submit], .face .content .field-wrapper textarea {
    -webkit-appearance: none; appearance: none; }
.face .content .field-wrapper input[type=text]:focus, .face .content .field-wrapper input[type=password]:focus, .face .content .field-wrapper input[type=submit]:focus, .face .content .field-wrapper textarea:focus {
    outline: none; }
.face .content .field-wrapper input[type=text], .face .content .field-wrapper input[type=password], .face .content .field-wrapper textarea {
    width: 100%;  border: none; background: transparent; line-height: 2em; border-bottom: 1px solid #c10000; color: #666; }
.face .content .field-wrapper input[type=text]::-webkit-input-placeholder, .face .content .field-wrapper input[type=password]::-webkit-input-placeholder, .face .content .field-wrapper textarea::-webkit-input-placeholder { opacity: 0; }
.face .content .field-wrapper input[type=text]::-moz-placeholder, .face .content .field-wrapper input[type=password]::-moz-placeholder, .face .content .field-wrapper textarea::-moz-placeholder { opacity: 0; }
.face .content .field-wrapper input[type=text]:-ms-input-placeholder, .face .content .field-wrapper input[type=password]:-ms-input-placeholder, .face .content .field-wrapper textarea:-ms-input-placeholder { opacity: 0; }
.face .content .field-wrapper input[type=text]:-moz-placeholder, .face .content .field-wrapper input[type=password]:-moz-placeholder, .face .content .field-wrapper textarea:-moz-placeholder { opacity: 0; }
.face .content .field-wrapper input[type=text]:focus + label, .face .content .field-wrapper input[type=text]:not(:placeholder-shown) + label, .face .content .field-wrapper input[type=password]:focus + label, .face .content .field-wrapper input[type=password]:not(:placeholder-shown) + label, .face .content .field-wrapper textarea:focus + label, .face .content .field-wrapper textarea:not(:placeholder-shown) + label {
    top: -35%;  color: black; }

.face .content .field-wrapper select {-webkit-appearance: none; appearance: none; }
.face .content .field-wrapper select:focus { outline: none; }
.face .content .field-wrapper select { width: 100%;  border: none; background: transparent; line-height: 2em; border-bottom: 1px solid #c10000; color: #666; }
.face .content .field-wrapper select::-webkit-input-placeholder { opacity: 0; }
.face .content .field-wrapper select::-moz-placeholder { opacity: 0; }
.face .content .field-wrapper select:-ms-input-placeholder { opacity: 0; }
.face .content .field-wrapper select:-moz-placeholder { opacity: 0; }
.face .content .field-wrapper select:focus + label, .face .content .field-wrapper select:not(:placeholder-shown) + label { top: -35%;  color: black; }


.face .content .field-wrapper input[type=submit] { -webkit-appearance: none; appearance: none; cursor: pointer; width: 100%; background: #c10000;
    line-height: 2em; color: #fff; border: 1px solid #c10000; border-radius: 5px; padding: 5px; }
.face .content .field-wrapper input[type=submit]:hover { opacity: 0.85; }
.face .content .field-wrapper input[type=submit]:active { transform: scale(0.96); }
.face .content .field-wrapper textarea { resize: none; line-height: 1em; }
.face .content .field-wrapper textarea:focus + label, .face .content .field-wrapper textarea:not(:placeholder-shown) + label { top: -25%; }
.face .thank-you-msg 	   { position: absolute; width: 200px; height: 130px; text-align: center; font-size: 2em; color: #c10000; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); }
.face .thank-you-msg:after { position: absolute; width: 50px; height: 25px; content: ""; border: 10px solid #c10000; border-right: 0; border-top: 0;
    left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%) rotate(0deg) scale(0); transform: translate(-50%, -50%) rotate(0deg) scale(0);
    -webkit-animation: success ease-in 0.15s forwards; animation: success ease-in 0.15s forwards; animation-delay: 2.5s; }
.face-front 	{ transform: rotateY(0deg) translateZ(125px); }
.face-top 	{ height: 250px; transform: rotateX(90deg) translateZ(125px); }
.face-back 	{ transform: rotateY(180deg) translateZ(125px); }
.face-right 	{ transform: rotateY(90deg) translateZ(125px); }
.face-left 	{ transform: rotateY(-90deg) translateZ(125px); }
.face-bottom 	{ height: 250px; transform: rotateX(-90deg) translateZ(225px); }
.psw, .signup, .singin { display: block; margin: 10px 0; font-size: 0.75em; text-align: center; border-radius: 45%;  background: #EEDDEE; color: #C10000; cursor: pointer; }
small 		{ font-size: 0.7em; }
@-webkit-keyframes success {
  from {
    -webkit-transform: translate(-50%, -50%) rotate(0) scale(0);
  }
  to {
    -webkit-transform: translate(-50%, -50%) rotate(-45deg) scale(1);
  }
}

.info, .success, .warning, .error, .validation {
	width:265px; border: 1px solid #c10000; margin: 10px auto; padding: 15px 10px 15px 50px;	border-radius: 5px;
	background-repeat: no-repeat; background-position: 10px center;
}
.info 	 { color: #00529B; background-color: #BDE5F8; background-image: url('/graphics/messageicons/info.png'); }
.success { color: #4F8A10; background-color: #DFF2BF; background-image: url('/graphics/messageicons/success.png'); }
.warning { color: #9F6000; background-color: #FEEFB3; background-image: url('/graphics/messageicons/warning.png'); }
.error   { color: #900008; background-color: #FF8787; background-image: url('/graphics/messageicons/error.png'); }
.validation{ color: #D63301;background-color: #FFCCBA;background-image: url('/graphics/messageicons/error.png'); }

.form-link-a     {position: absolute; font-size: 0.85em; top: -10px; left: 80px; transform: translateY(-50%); transition: all ease-in 0.25s; color: #999999; text-decoration:none;padding:1px 4px 1px 4px;background:#35b3dc;color:white;border-radius:5px;}