@charset "IBM437";

@-moz-keyframes caret {
	50% {
	    opacity: 0.1;
	    transform: scaleY(0.8);
	}
}

.fancyInput {
    display: inline-block;
    font-family: OpenSans-Light,"Trebuchet MS",Arial,Helvetica,sans-serif;
    letter-spacing: -1px;
    position: relative;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.6);
    white-space: nowrap;
    width: auto;
}

.fancyInput *:-moz-placeholder {
    color: rgba(0, 0, 0, 0);
}

.fancyInput *::-moz-placeholder {
    color: rgba(0, 0, 0, 0);
}

.fancyInput.textarea {
    overflow: auto;
    white-space: normal;
}

.fancyInput input, .fancyInput textarea {
    -moz-box-sizing: border-box;
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: 0 none;
    color: rgba(0, 0, 0, 0);
    font-family: OpenSans-Light,"Trebuchet MS",Arial,Helvetica,sans-serif;
    font-size: inherit;
    left: 0;
    letter-spacing: -1px;
    outline: 0 none;
    padding-bottom: 0;
    padding-left: inherit;
    padding-right: inherit;
    padding-top: inherit;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 2;
}

.fancyInput input {
    height: 80px;
    left: -1px;
    padding-right: 0;
    top: 1px;
}

.fancyInput textarea {
    height: 100%;
    overflow: hidden;
    word-break: break-all;
}

.fancyInput > div {
    display: inline-block;
    position: relative;
}

.fancyInput > div:before {
    content: attr(data-placeholder);
    left: -20px;
    opacity: 0;
    position: absolute;
    transition: all 0.3s ease-out 0s;
}

.fancyInput > div.empty:before {
    left: 0;
    opacity: 0.2;
}

.fancyInput input:focus ~ div.empty:before {
    opacity: 0.1;
}

.fancyInput.textarea > div {
}

.fancyInput *:focus ~ .caret, .fancyInput *:focus ~ div .caret {
    animation: 0.4s ease 40ms normal none infinite caret;
    box-shadow: 0 0 8px #FFFFFF;
    opacity: 0.8;
}

.fancyInput .caret {
    -moz-user-select: none;
    background: none repeat scroll 0 0 #FFFFFF;
    border-radius: 4px 4px 4px 4px;
    display: inline-block;
    font-weight: 400;
    margin-left: -3px;
    min-height: 34px;
    opacity: 0;
    width: 3px;
}

.fancyInput span:not(.deleted) ~ .caret {
    margin: 0;
    position: absolute;
}

.fancyInput > div span {
    display: inline-block;
    position: relative;
    transition: all 100ms cubic-bezier(0, 0.6, 0.55, 1.4) 0s;
}

.fancyInput > input[type="password"] + div span:empty:after {
    content: "●";
    display: inline;
}

.fancyInput > div .deleted {
    opacity: 0;
    transform: translateX(12px);
    transition: all 140ms ease 0s;
}

.fancyInput > div span.state1 {
    transform: translateY(-25px) rotateX(90deg);
}

.fancyInput > div span.state2 {
    transform: translateY(25px) rotateX(90deg);
}

.effect2 .fancyInput > div span.state1, .effect2 .fancyInput > div span.state2 {
    transform: translateX(10px) scale(1.8);
}

.effect3 .fancyInput > div span {
    transition: all 200ms cubic-bezier(0, 0.6, 0.55, 1.4) 0s;
}

.effect3 .fancyInput > div span.state1, .effect3 .fancyInput > div span.state2 {
    opacity: 0;
    transform: scale(0.4);
}

.effect4 .fancyInput > div span {
    transition-duration: 150ms;
}

.effect4 .fancyInput > div span.state1, .effect4 .fancyInput > div span.state2 {
    opacity: 0;
    transform: translateY(-60px);
}

.effect5 .fancyInput > div span {
    transition-duration: 150ms;
}

.effect5 .fancyInput > div span.state1, .effect5 .fancyInput > div span.state2 {
    opacity: 0;
    transform: translateX(-30px);
}

.fancyInput {
    background: url("../images/isearch-bg.png") repeat scroll 50% 50% rgba(0, 0, 0, 0);
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);
    color: #FFFFFF;
    font-size: 25px;
    font-weight: 400;
    height: 34px;
    outline: medium none;
    overflow: hidden;
    padding: 20px;
    text-align: left;
    text-shadow: 0 0 6px rgba(215, 83, 205, 0.7);
    width: 95%;
}