@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,800,700&subset=latin,cyrillic-ext);

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont862f.eot?v=4.1.0');
  src: url('../fonts/fontawesome-webfontd41d.eot?#iefix&v=4.1.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont862f.woff?v=4.1.0') format('woff'), url('../fonts/fontawesome-webfont862f.ttf?v=4.1.0') format('truetype'), url('../fonts/fontawesome-webfont862f.svg?v=4.1.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}


.overlay{
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin: auto;
    -webkit-animation: overlay 0.5s ease-out forwards;
    -moz-animation: overlay 0.5s ease-out forwards;
    -mos-animation: overlay 0.5s ease-out forwards;
    -o-animation: overlay 0.5s ease-out forwards;
    animation: overlay 0.5s ease-out forwards;
    cursor: pointer;
    z-index: 0;
}

#wrapper{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin: auto;
    display: none;
    overflow:hidden;
	z-index:99999;
}

#modal{
    position:absolute;
    margin:0 auto;
    top:20%;
    left:20%;
    width:60%;
    height:60%;
    font-family: 'Open Sans';
    -webkit-perspective:1000px;
    -moz-perspective:1000px;
    -mos-perspective:1000px;
    -o-perspective:1000px;
    perspective:1000px;
}

/* input */

.feedback input{
    position:relative;
    width:70%;
    border:none;
    background-color: rgba(255,255,255,0.25);
    color:#fff;
    font-size: 14px;
    padding:5px 45px 5px 10px;
    margin:0.125em;
    float:none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -mos-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

.feedback input:focus{
    background-color: rgba(255,255,255,0.5);
    outline:none;
}
::-webkit-input-placeholder { /* WebKit browsers */
    color:#fff;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:#fff;
    opacity:1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:#fff;
    opacity:1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:#fff;
}

#login[required] + label {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 0;
}

#login[required] + label:before {
    content: "\f007";
    font-family: FontAwesome;
	font-style: normal;
	font-weight: normal;
    position: absolute;
    top:0px;
    left: -35px;
    font-size: 20px;
    color: rgba(255, 255, 255,0.5);
}

#login[required]:focus + label:before {
    color: rgba(255, 255, 255,1);
}

#login[required]:not(:focus):valid + label:before {
    content: "\f00c";
    font-family: FontAwesome;
	font-style: normal;
	font-weight: normal;
    color: #fff;
    position: absolute;
    top:0px;
    left: -35px;
    font-size: 20px;
}

#password[required] + label {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 0;
}

#password[required] + label:before {
    content: "\f023";
    font-family: FontAwesome;
	font-style: normal;
	font-weight: normal;
    position: absolute;
    top:0px;
    left: -35px;
    font-size: 20px;
    color: rgba(255, 255, 255,0.5);
}

#password[required]:focus + label:before {
    color: rgba(255, 255, 255,1);
}

#password[required]:not(:focus):valid + label:before {
    content: "\f00c";
    font-family: FontAwesome;
	font-style: normal;
	font-weight: normal;
    color: #fff;
    position: absolute;
    top:0px;
    left: -35px;
    font-size: 20px;
}

#confirmpassword[required] + label {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 0;
}

#confirmpassword[required] + label:before {
    content: "\f023";
    font-family: FontAwesome;
	font-style: normal;
	font-weight: normal;
    position: absolute;
    top:0px;
    left: -35px;
    font-size: 20px;
    color: rgba(255, 255, 255,0.5);
}

#confirmpassword[required]:focus + label:before {
    color: rgba(255, 255, 255,1);
}

#confirmpassword[required]:not(:focus):valid + label:before {
    content: "\f00c";
    font-family: FontAwesome;
	font-style: normal;
	font-weight: normal;
    color: #fff;
    position: absolute;
    top:0px;
    left: -35px;
    font-size: 20px;
}

#email[required] + label {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 0;
}

#email[required] + label:before {
    content: "\f0e0";
    font-family: FontAwesome;
	font-style: normal;
	font-weight: normal;
    position: absolute;
    top:0px;
    left: -35px;
    font-size: 20px;
    color: rgba(255, 255, 255,0.5);
}

#email[required]:focus + label:before {
    color: rgba(255, 255, 255,1);
}

#email[required]:not(:focus):valid + label:before {
    content: "\f00c";
    font-family: FontAwesome;
	font-style: normal;
	font-weight: normal;
    color: #fff;
    position: absolute;
    top:0px;
    left: -35px;
    font-size: 20px;
}

#phone[required] + label {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 0;
}

#phone[required] + label:before {
    content: "\f095";
    font-family: FontAwesome;
	font-style: normal;
	font-weight: normal;
    position: absolute;
    top:0px;
    left: -35px;
    font-size: 20px;
    color: rgba(255, 255, 255,0.5);
}

#phone[required]:focus + label:before {
    color: rgba(255, 255, 255,1);
}

#phone[required]:not(:focus):valid + label:before {
    content: "\f00c";
    font-family: FontAwesome;
	font-style: normal;
	font-weight: normal;
    color: #fff;
    position: absolute;
    top:0px;
    left: -35px;
    font-size: 20px;
}

.feedback textarea{
    position:relative;
    width:70%;
    border:none;
    background-color: rgba(255,255,255,0.25);
    color:#fff;
    font-size: 14px;
    padding:0.5em;
    margin:0.125em;
    float:none;
    resize: none;
    height: 6.25em;
    font-family: 'Open Sans';
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -mos-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
	left: -2px;
}

.feedback textarea:focus{
    background-color: rgba(255,255,255,0.5);
    outline:none;
}

#submit{
    font-size:2em !important;
    cursor:pointer;
    margin:0.0625em !important;
	padding:10px;
	left: -2px;
}

#submit:hover{
    background-color: #84b712;
}

#submit:focus{
    background-color: #fdaf00 !important;
}

/* Sign In form */

.sign-in #modal .left, .sign-in #modal .right{
    position:relative;
    width:50%;
    min-width: 10.63em;
    height:100%;
    min-height: 15em;
    float:left;
    text-align:center;
    color:#fff;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    overflow: hidden;
}

.sign-in #modal .left{
    background:#03658C;
    -webkit-transform-origin: 100% 50%;
    -moz-transform-origin: 100% 50%;
    -o-transform-origin: 100% 50%;
    -ms-transform-style: 100% 50%;
    transform-origin: 100% 50%;
    -webkit-animation: rotatel 0.5s ease-out forwards;
    -moz-animation: rotatel 0.5s ease-out forwards;
    -mos-animation: rotatel 0.5s ease-out forwards;
    -o-animation: rotatel 0.5s ease-out forwards;
    animation: rotatel 0.5s ease-out forwards;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
}

/* Mobile */
@media screen and (max-width:800px){

    .sign-in #modal{
        top:0%;
        left:0%;
        width:100%;
        height:100%;
    }

    .sign-in #modal .left,.sign-in #modal .right{
        width:100% !important;
        height:50% !important;
        min-height: 16em !important;
    }

    .sign-in #modal .left{
        -webkit-transform-origin: 50% 100% !important;
        -moz-transform-origin: 50% 100% !important;
        -o-transform-origin: 50% 100% !important;
        -ms-transform-style: 50% 100% !important;
        transform-origin: 50% 100% !important;
        -webkit-animation: rotatet 0.5s ease-out forwards !important;
        -moz-animation: rotatet 0.5s ease-out forwards !important;
        -mos-animation: rotatet 0.5s ease-out forwards !important;
        -o-animation: rotatet 0.5s ease-out forwards !important;
        animation: rotatet 0.5s ease-out forwards !important;
    }

    .sign-in #modal .right{
        -webkit-transform-origin: 50% 0% !important;
        -moz-transform-origin: 50% 0% !important;
        -o-transform-origin: 50% 0% !important;
        -ms-transform-style: 50% 0% !important;
        transform-origin: 50% 0% !important;
        -webkit-animation: rotateb 0.5s ease-out forwards !important;
        -moz-animation: rotateb 0.5s ease-out forwards !important;
        -mos-animation: rotateb 0.5s ease-out forwards !important;
        -o-animation: rotateb 0.5s ease-out forwards !important;
        animation: rotateb 0.5s ease-out forwards !important;
    } 
}

.sign-in #modal .left .lock{
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
    width:6em;
    height:8em;
    -webkit-transition:all 0.25s ease;
    -moz-transition:all 0.25s ease;
    -mos-transition:all 0.25s ease;
    -o-transition:all 0.25s ease;
    transition:all 0.25s ease;
    cursor: pointer;
    z-index: 2;
}

.sign-in #modal .left .lock .tips {
    position: absolute;
    top: -50%;
    width:12em;
    left:-55%;
    background: #fff;
    color: #555;
    padding: 0.25em;
    -webkit-transform-origin: 50% 100%;
    -moz-transform-origin: 50% 100%;
    -o-transform-origin: 50% 100%;
    -ms-transform-style: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-animation:scale-tips 1s ease forwards;
    -moz-animation:scale-tips 1s ease forwards;
    -mos-animation:scale-tips 1s ease forwards;
    -o-animation:scale-tips 1s ease forwards;
    animation:scale-tips 1s ease forwards;
    display: none;
}

.sign-in #modal .left .lock .tips:before{
    position:absolute;
    content: '';
    width: 0; 
	height: 0;
    left:45%;
    bottom: -0.6em;
	border-left: 0.625em solid transparent;
	border-right: 0.625em solid transparent;
	border-top: 0.625em solid #fff;
}

.sign-in #modal .left .lock .top{
    position:relative;
    width:60%;
    height:40%;
    left:15%;
    -webkit-border-top-left-radius: 100%;
    -webkit-border-top-right-radius: 100%;
    -moz-border-radius-topleft: 100%;
    -moz-border-radius-topright: 100%;
    border-top-left-radius: 100%;
    border-top-right-radius: 100%;
    border:0.35em solid #bbbbbb;
    border-bottom: none;
    -webkit-transition:all 0.15s ease;
    -moz-transition:all 0.15s ease;
    -mos-transition:all 0.15s ease;
    -o-transition:all 0.15s ease;
    transition:all 0.15s ease;
}

.sign-in #modal .left .lock .top:before{
    position:absolute;
    content:'';
    right:-0.5em;
    bottom:0em;
    left:-0.5em;
    top:-0.5em;
    -webkit-border-top-left-radius: 100%;
    -webkit-border-top-right-radius: 100%;
    -moz-border-radius-topleft: 100%;
    -moz-border-radius-topright: 100%;
    border-top-left-radius: 100%;
    border-top-right-radius: 100%;
    border:0.25em solid #fff;
    border-bottom: none;
    -webkit-transition:all 0.15s ease;
    -moz-transition:all 0.15s ease;
    -mos-transition:all 0.15s ease;
    -o-transition:all 0.15s ease;
    transition:all 0.15s ease;
}

.open-little{
    -webkit-transform: rotate(-10deg) translate(-5%,0%);
    -moz-transform: rotate(-10deg) translate(-5%,0%);
    -mos-transform: rotate(-10deg) translate(-5%,0%);
    -o-transform: rotate(-10deg) translate(-5%,0%);
    transform: rotate(-10deg) translate(-5%,0%);
}

.open-middle{
    -webkit-transform: rotate(-20deg) translate(-10%,-10%);
    -moz-transform: rotate(-20deg) translate(-10%,-10%);
    -mos-transform: rotate(-20deg) translate(-10%,-10%);
    -o-transform: rotate(-20deg) translate(-10%,-10%);
    transform: rotate(-20deg) translate(-10%,-10%);
}

.open-full{
    -webkit-transform: rotate(-30deg) translate(-10%,-20%);
    -moz-transform: rotate(-30deg) translate(-10%,-20%);
    -mos-transform: rotate(-30deg) translate(-10%,-20%);
    -o-transform: rotate(-30deg) translate(-10%,-20%);
    transform: rotate(-30deg) translate(-10%,-20%);
}

.active{
    -webkit-transform: scale(1.1,1.1);
    -moz-transform: scale(1.1,1.1);
    -mos-transform: scale(1.1,1.1);
    -o-transform: scale(1.1,1.1);
    transform: scale(1.1,1.1);
}

.sign-in #modal .left .lock .bottom{
    position:relative;
    width:100%;
    height:60%;
    background: #dcbb3b; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNkY2JiM2IiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNkMWM2MjIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(left,  #dcbb3b 50%, #e1d620 50%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(50%,#dcbb3b), color-stop(50%,#e1d620)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  #dcbb3b 50%,#e1d620 50%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  #dcbb3b 50%,#e1d620 50%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  #dcbb3b 50%,#e1d620 50%); /* IE10+ */
    background: linear-gradient(to right,  #dcbb3b 50%,#e1d620 50%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dcbb3b', endColorstr='#e1d620',GradientType=1 ); /* IE6-8 */
    -webkit-border-radius: 10%;
    -moz-border-radius: 10%;
    border-radius: 10%;
}

.sign-in #modal .left .lock .bottom:after{
    position: absolute;
    content: '';
    width: 100%;
    height: 0.5em;
    left:0;
    bottom:-1.5em;
    background: rgba(0,0,0,0.15);
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
}

.sign-in #modal .left .lock .bottom .corner:before {
    position: absolute;
    content: '';
    left:3em;
    top:0;
    width: 0em;
    height: 0em;
	border-right: 2em solid transparent;
	border-top: 2em solid #dcbb3b;
}

.sign-in #modal .left .lock .bottom .keyhole{
    position:absolute;
    left:50%;
    top:50%;
    width:1.25em;
    height:1.25em;
    background:#a28629;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    transform:translate(-50%,-80%);
}

.sign-in #modal .left .lock .bottom .keyhole:before{
    position:absolute;
    content:'';
    bottom:-1em;
    left:0.35em;
    width:0.5em;
    height:1.25em;
    background:#a28629;
}

.lock-animation{
    -webkit-animation:scale 1s ease forwards;
    -moz-animation:scale 1s ease forwards;
    -mos-animation:scale 1s ease forwards;
    -o-animation:scale 1s ease forwards;
    animation:scale 1s ease forwards;
}

.left-animation{
    position: absolute;
    top: 0em;
    right: 0em;
    bottom: 0em;
    left: 0em;
    -webkit-animation:bgleft 1s ease forwards;
    -moz-animation:bgleft 1s ease forwards;
    -mos-animation:bgleft 1s ease forwards;
    -o-animation:bgleft 1s ease forwards;
    animation:bgleft 1s ease forwards;
}

.sign-in #modal .right{
    background:#4B9EBF;
    -webkit-transform-origin: 0% 50%;
    -moz-transform-origin: 0% 50%;
    -o-transform-origin: 0% 50%;
    -ms-transform-style: 0% 50%;
    transform-origin: 0% 50%;
    -webkit-animation: rotater 0.5s ease-out forwards;
    -moz-animation: rotaterr 0.5s ease-out forwards;
    -mos-animation: rotater 0.5s ease-out forwards;
    -o-animation: rotater 0.5s ease-out forwards;
    animation: rotater 0.5s ease-out forwards;
}

.sign-in #modal .right .close {
    position: absolute;
    right: 1em;
    top: 1em;
    width: 2em;
    height: 2em;
    z-index: 2;
    cursor: pointer;
}

.sign-in #modal .right .close:before, .close:after {
    position: absolute;
    left: 1em;
    content: ' ';
    height: 2em;
    width: 2px;
    background-color: rgba(255,255,255,0.5);
}

.sign-in #modal .right .close:hover:before, .close:hover:after {
    background-color: rgba(255,255,255,1);
}

.sign-in #modal .right .close:before {
    -webki-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -mos-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

.sign-in #modal .right .close:after {
    -webki-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -mos-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.sign-in #modal .right .container{
    position:relative;
    top:50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -mos-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

.sign-in #modal .right .container a, .sign-in #modal .left a {
    color: rgba(255,255,255,0.75);
    text-decoration: none;
}

.sign-in #modal .right .container a:hover, .sign-in #modal .left a:hover {
    color: rgba(255,255,255,1);
}

/*Animation*/

@-webkit-keyframes scale{
    0%, 20%, 50%, 80%, 100%    {-webkit-transform: scale(1,1);}
    40%                        {-webkit-transform: scale(1.1,1.1);}
    60%                        {-webkit-transform: scale(1.05,1.05);}
}
@-moz-keyframes scale{
    0%, 20%, 50%, 80%, 100%    {-moz-transform: scale(1,1);}
    40%                        {-moz-transform: scale(1.1,1.1);}
    60%                        {-moz-transform: scale(1.05,1.05);}
}
@-mos-keyframes scale{
    0%, 20%, 50%, 80%, 100%    {-mos-transform: scale(1,1);}
    40%                        {-mos-transform: scale(1.1,1.1);}
    60%                        {-mos-transform: scale(1.05,1.05);}
}
@-o-keyframes scale{
    0%, 20%, 50%, 80%, 100%    {-o-transform: scale(1,1);}
    40%                        {-o-transform: scale(1.1,1.1);}
    60%                        {-o-transform: scale(1.05,1.05);}
}
@keyframes scale{
    0%, 20%, 50%, 80%, 100%    {transform: scale(1,1);}
    40%                        {transform: scale(1.1,1.1);}
    60%                        {transform: scale(1.05,1.05);}
}


@-webkit-keyframes scale-tips{
    0%                         {-webkit-transform: scale(0,0);}
    20%                        {-webkit-transform: scale(1.1,1.1);}
    40%                        {-webkit-transform: scale(1.05,1.05);}
    30%, 50%, 100%             {-webkit-transform: scale(1,1);}
}
@-moz-keyframes scale-tips{
    0%                         {-moz-transform: scale(0,0);}
    20%                        {-moz-transform: scale(1.1,1.1);}
    40%                        {-moz-transform: scale(1.05,1.05);}
    30%, 50%, 100%             {-moz-transform: scale(1,1);}
}
@-mos-keyframes scale-tips{
    0%                         {-mos-transform: scale(0,0);}
    20%                        {-mos-transform: scale(1.1,1.1);}
    40%                        {-mos-transform: scale(1.05,1.05);}
    30%, 50%, 100%             {-mos-transform: scale(1,1);}
}
@-o-keyframes scale-tips{
    0%                         {-o-transform: scale(0,0);}
    20%                        {-o-transform: scale(1.1,1.1);}
    40%                        {-o-transform: scale(1.05,1.05);}
    30%, 50%, 100%             {-o-transform: scale(1,1);}
}
@keyframes scale-tips{
    0%                         {transform: scale(0,0);}
    20%                        {transform: scale(1.1,1.1);}
    40%                        {transform: scale(1.05,1.05);}
    30%, 50%, 100%             {transform: scale(1,1);}
}

@-webkit-keyframes bgleft{
    0%, 20%, 50%, 80%, 100%    {background: #03658C;}
    40%,60%                    {background: #FF5126;}
}
@-moz-keyframes bgleft{
    0%, 20%, 50%, 80%, 100%    {background: #03658C;}
    40%,60%                    {background: #FF5126;}
}
@-mos-keyframes bgleft{
    0%, 20%, 50%, 80%, 100%    {background: #03658C;}
    40%,60%                    {background: #FF5126;}
}
@-o-keyframes bgleft{
    0%, 20%, 50%, 80%, 100%    {background: #03658C;}
    40%,60%                    {background: #FF5126;}
}
@keyframes bgleft{
    0%, 20%, 50%, 80%, 100%    {background: #03658C;}
    40%,60%                    {background: #FF5126;}
}

@-webkit-keyframes rotatel{
    0%      {-webkit-transform:rotate3d(0,1,0,90deg);}
    100%    {-webkit-transform:rotate3d(0,1,0,0deg);}
}
@-moz-keyframes rotatel{
    0%      {-moz-transform:rotate3d(0,1,0,90deg);}
    100%    {-moz-transform:rotate3d(0,1,0,0deg);}
}
@-mos-keyframes rotatel{
    0%      {-mos-transform:rotate3d(0,1,0,90deg);}
    100%    {-mos-transform:rotate3d(0,1,0,0deg);}
}
@-o-keyframes rotatel{
    0%      {-o-transform:rotate3d(0,1,0,90deg);}
    100%    {-o-transform:rotate3d(0,1,0,0deg);}
}
@keyframes rotatel{
    0%      {transform:rotate3d(0,1,0,90deg);}
    100%    {transform:rotate3d(0,1,0,0deg);}
}

@-webkit-keyframes rotater{
    0%      {-webkit-transform:rotate3d(0,1,0,-90deg);}
    100%    {-webkit-transform:rotate3d(0,1,0,0deg);}
}
@-moz-keyframes rotater{
    0%    {-moz-transform:rotate3d(0,1,0,-90deg);}
    100%    {-moz-transform:rotate3d(0,1,0,0deg);}
}
@-mos-keyframes rotater{
    0%      {-mos-transform:rotate3d(0,1,0,-90deg);}
    100%    {-mos-transform:rotate3d(0,1,0,0deg);}
}
@-o-keyframes rotater{
    0%      {-o-transform:rotate3d(0,1,0,-90deg);}
    100%    {-o-transform:rotate3d(0,1,0,0deg);}
}
@keyframes rotater{
    0%      {transform:rotate3d(0,1,0,-90deg);}
    100%    {transform:rotate3d(0,1,0,0deg);}
}

@-webkit-keyframes rotatet{
    0%      {-webkit-transform:rotate3d(1,0,0,-90deg);}
    100%    {-webkit-transform:rotate3d(1,0,0,0deg);}
}
@-moz-keyframes rotatet{
    0%      {-moz-transform:rotate3d(1,0,0,-90deg);}
    100%    {-moz-transform:rotate3d(1,0,0,0deg);}
}
@-mos-keyframes rotatet{
    0%      {-mos-transform:rotate3d(1,0,0,-90deg);}
    100%    {-mos-transform:rotate3d(1,0,0,0deg);}
}
@-o-keyframes rotatet{
    0%      {-o-transform:rotate3d(1,0,0,-90deg);}
    100%    {-o-transform:rotate3d(1,0,0,0deg);}
}
@keyframes rotatet{
    0%      {transform:rotate3d(1,0,0,-90deg);}
    100%    {transform:rotate3d(1,0,0,0deg);}
}

@-webkit-keyframes rotateb{
    0%      {-webkit-transform:rotate3d(1,0,0,90deg);}
    100%    {-webkit-transform:rotate3d(1,0,0,0deg);}
}
@-moz-keyframes rotateb{
    0%      {-moz-transform:rotate3d(1,0,0,90deg);}
    100%    {-moz-transform:rotate3d(1,0,0,0deg);}
}
@-mos-keyframes rotateb{
    0%      {-mos-transform:rotate3d(1,0,0,90deg);}
    100%    {-mos-transform:rotate3d(1,0,0,0deg);}
}
@-o-keyframes rotateb{
    0%      {-o-transform:rotate3d(1,0,0,90deg);}
    100%    {-o-transform:rotate3d(1,0,0,0deg);}
}
@keyframes rotateb{
    0%      {transform:rotate3d(1,0,0,90deg);}
    100%    {transform:rotate3d(1,0,0,0deg);}
}

@-webkit-keyframes overlay{
    0%    {    background:rgba(0,0,0,0);}
    100%  {    background:rgba(0,0,0,0.75);}
}
@-moz-keyframes overlay{
    0%    {    background:rgba(0,0,0,0);}
    100%  {    background:rgba(0,0,0,0.75);}
}
@-mos-keyframes overlay{
    0%    {    background:rgba(0,0,0,0);}
    100%  {    background:rgba(0,0,0,0.75);}
}
@-o-keyframes overlay{
    0%    {    background:rgba(0,0,0,0);}
    100%  {    background:rgba(0,0,0,0.75);}
}
@keyframes overlay{
    0%    {    background:rgba(0,0,0,0);}
    100%  {    background:rgba(0,0,0,0.75);}
}


/* Sign Up form */

.sign-up #modal .left, .sign-up #modal .right{
    position:relative;
    width:50%;
    min-width: 10.63em;
    height:100%;
    min-height: 15em;
    float:left;
    text-align:center;
    color:#fff;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    overflow: hidden;
}

.sign-up #modal .left{
    background:#03658C;
    -webkit-transform-origin: 100% 50%;
    -moz-transform-origin: 100% 50%;
    -o-transform-origin: 100% 50%;
    -ms-transform-style: 100% 50%;
    transform-origin: 100% 50%;
    -webkit-animation: rotatel 0.5s ease-out forwards;
    -moz-animation: rotatel 0.5s ease-out forwards;
    -mos-animation: rotatel 0.5s ease-out forwards;
    -o-animation: rotatel 0.5s ease-out forwards;
    animation: rotatel 0.5s ease-out forwards;
}

/* Mobile */
@media screen and (max-width:800px){

    .sign-up #modal{
        top:0%;
        left:0%;
        width:100%;
        height:100%;
    }

    .sign-up #modal .left,.sign-up #modal .right{
        width:100% !important;
        height:50% !important;
        min-height: 16em !important;
    }

    .sign-up #modal .left{
        -webkit-transform-origin: 50% 100% !important;
        -moz-transform-origin: 50% 100% !important;
        -o-transform-origin: 50% 100% !important;
        -ms-transform-style: 50% 100% !important;
        transform-origin: 50% 100% !important;
        -webkit-animation: rotatet 0.5s ease-out forwards !important;
        -moz-animation: rotatet 0.5s ease-out forwards !important;
        -mos-animation: rotatet 0.5s ease-out forwards !important;
        -o-animation: rotatet 0.5s ease-out forwards !important;
        animation: rotatet 0.5s ease-out forwards !important;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        cursor: default;
    }

    .sign-up #modal .right{
        -webkit-transform-origin: 50% 0% !important;
        -moz-transform-origin: 50% 0% !important;
        -o-transform-origin: 50% 0% !important;
        -ms-transform-style: 50% 0% !important;
        transform-origin: 50% 0% !important;
        -webkit-animation: rotateb 0.5s ease-out forwards !important;
        -moz-animation: rotateb 0.5s ease-out forwards !important;
        -mos-animation: rotateb 0.5s ease-out forwards !important;
        -o-animation: rotateb 0.5s ease-out forwards !important;
        animation: rotateb 0.5s ease-out forwards !important;
        overflow: hidden;
    } 
}

.sign-up #modal .left .user{
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
    width:7em;
    height:8em;
    -webkit-transition:all 0.25s ease;
    -moz-transition:all 0.25s ease;
    -mos-transition:all 0.25s ease;
    -o-transition:all 0.25s ease;
    transition:all 0.25s ease;
    z-index: 2;
}

.sign-up #modal .left .user .tips {
    position: absolute;
    top: -60%;
    width:12em;
    left:-40%;
    background: #fff;
    color: #555;
    padding: 0.25em;
    -webkit-transform-origin: 50% 100%;
    -moz-transform-origin: 50% 100%;
    -o-transform-origin: 50% 100%;
    -ms-transform-style: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-animation:scale-tips 1s ease forwards;
    -moz-animation:scale-tips 1s ease forwards;
    -mos-animation:scale-tips 1s ease forwards;
    -o-animation:scale-tips 1s ease forwards;
    animation:scale-tips 1s ease forwards;
    display: none;
}

.sign-up #modal .left .user .tips:before{
    position:absolute;
    content: '';
    width: 0; 
	height: 0;
    left:45%;
    bottom: -0.6em;
	border-left: 0.625em solid transparent;
	border-right: 0.625em solid transparent;
	border-top: 0.625em solid #fff;
}

.sign-up #modal .left .user .head{
    position:absolute;
    left:10%;
    top:-15%;
    border:0.5em solid #03658C;
    width:80%;
    height:70%;
    background:#fff;
    -webkit-border-radius:100%;
    -moz-border-radius:100%;
    border-radius:100%;
    z-index:2;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -mos-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    background: #ede9dc; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNlZGU5ZGMiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNlZGVkZWQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(left,  #ede9dc 50%, #ededed 50%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(50%,#ede9dc), color-stop(50%,#ededed)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  #ede9dc 50%,#ededed 50%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  #ede9dc 50%,#ededed 50%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  #ede9dc 50%,#ededed 50%); /* IE10+ */
    background: linear-gradient(to right,  #ede9dc 50%,#ededed 50%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ede9dc', endColorstr='#ededed',GradientType=1 ); /* IE6-8 */
}

.sign-up #modal .left .user .body-user{
    position:absolute;
    bottom:0;
    width:100%;
    height:65%;
    background:#fff;
    -webkit-border-radius: 100%;
    -webkit-border-bottom-right-radius: 50%;
    -webkit-border-bottom-left-radius: 50%;
    -moz-border-radius: 100%;
    -moz-border-radius-bottomright: 50%;
    -moz-border-radius-bottomleft: 50%;
    border-radius: 100%;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
    background: #dcbb3b; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNkY2JiM2IiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNkMWM2MjIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(left,  #dcbb3b 50%, #e1d620 50%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(50%,#dcbb3b), color-stop(50%,#e1d620)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  #dcbb3b 50%,#e1d620 50%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  #dcbb3b 50%,#e1d620 50%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  #dcbb3b 50%,#e1d620 50%); /* IE10+ */
    background: linear-gradient(to right,  #dcbb3b 50%,#e1d620 50%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dcbb3b', endColorstr='#e1d620',GradientType=1 ); /* IE6-8 */
}

.sign-up #modal .left .user .body-user:after{
    position: absolute;
    content: '';
    width: 100%;
    height: 0.5em;
    left:0;
    bottom:-1.5em;
    background: rgba(0,0,0,0.15);
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
}

.sign-up #modal .right{
    background:#4B9EBF;
    -webkit-transform-origin: 0% 50%;
    -moz-transform-origin: 0% 50%;
    -o-transform-origin: 0% 50%;
    -ms-transform-style: 0% 50%;
    transform-origin: 0% 50%;
    -webkit-animation: rotater 0.5s ease-out forwards;
    -moz-animation: rotaterr 0.5s ease-out forwards;
    -mos-animation: rotater 0.5s ease-out forwards;
    -o-animation: rotater 0.5s ease-out forwards;
    animation: rotater 0.5s ease-out forwards;
}

.sign-up #modal .right .close {
    position: absolute;
    right: 1em;
    top: 1em;
    width: 2em;
    height: 2em;
    z-index: 2;
    cursor: pointer;
}

.sign-up #modal .right .close:before, .close:after {
    position: absolute;
    left: 1em;
    content: ' ';
    height: 2em;
    width: 2px;
    background-color: rgba(255,255,255,0.5);
}

.sign-up #modal .right .close:hover:before, .close:hover:after {
    background-color: rgba(255,255,255,1);
}

.sign-up #modal .right .close:before {
    -webki-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -mos-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

.sign-up #modal .right .close:after {
    -webki-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -mos-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.sign-up #modal .right .container{
    position:relative;
    top:50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -mos-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

/* feedback */

.feedback #modal .left, .feedback #modal .right{
    position:relative;
    width:50%;
    min-width: 10.63em;
    min-height: 17em;
    height:100%;
    float:left;
    text-align:center;
    color:#fff;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.feedback #modal .left{
    background:#03658C;
    -webkit-transform-origin: 100% 50%;
    -moz-transform-origin: 100% 50%;
    -o-transform-origin: 100% 50%;
    -ms-transform-style: 100% 50%;
    transform-origin: 100% 50%;
    -webkit-animation: rotatel 0.5s ease-out forwards;
    -moz-animation: rotatel 0.5s ease-out forwards;
    -mos-animation: rotatel 0.5s ease-out forwards;
    -o-animation: rotatel 0.5s ease-out forwards;
    animation: rotatel 0.5s ease-out forwards;
}

/* Mobile */
@media screen and (max-width:800px){

    .feedback #modal{
        top:0%;
        left:0%;
        width:100%;
        height:100%;
    }

    .feedback #modal .left,.feedback #modal .right{
        width:50% !important;
        height:50% !important;
        min-height: 16em !important;
    }

    .feedback #modal .left{
        -webkit-transform-origin: 50% 100% !important;
        -moz-transform-origin: 50% 100% !important;
        -o-transform-origin: 50% 100% !important;
        -ms-transform-style: 50% 100% !important;
        transform-origin: 50% 100% !important;
        -webkit-animation: rotatet 0.5s ease-out forwards !important;
        -moz-animation: rotatet 0.5s ease-out forwards !important;
        -mos-animation: rotatet 0.5s ease-out forwards !important;
        -o-animation: rotatet 0.5s ease-out forwards !important;
        animation: rotatet 0.5s ease-out forwards !important;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        cursor: default;
    }

    .feedback #modal .right{
        -webkit-transform-origin: 50% 0% !important;
        -moz-transform-origin: 50% 0% !important;
        -o-transform-origin: 50% 0% !important;
        -ms-transform-style: 50% 0% !important;
        transform-origin: 50% 0% !important;
        -webkit-animation: rotateb 0.5s ease-out forwards !important;
        -moz-animation: rotateb 0.5s ease-out forwards !important;
        -mos-animation: rotateb 0.5s ease-out forwards !important;
        -o-animation: rotateb 0.5s ease-out forwards !important;
        animation: rotateb 0.5s ease-out forwards !important;
    } 
}

.feedback #modal .left .letter{
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        width: 8em;
        height: 5em;
        z-index: 1;
        background:#ceaf39;
         -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        -o-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
        transform-style: preserve-3d;
}

.feedback #modal .left .letter:before{
        position: absolute;
        content: '';
        width: 100%;
        height: 0.25em;
        left:0;
        bottom:-1.5em;
        background: rgba(0,0,0,0.15);
        -webkit-border-radius: 100%;
        -moz-border-radius: 100%;
        border-radius: 100%;
}

.feedback #modal .left .letter .corner-top{
        position:absolute;
        top:0em;
        left:0em;
        width: 0; 
        height: 0; 
        border-left: 4em solid transparent;
        border-right: 4em solid transparent;
        border-top: 2.5em solid #e6db26;
        -webkit-transform-origin: 50% 0%;
        -moz-transform-origin: 50% 0%;
        -mos-transform-origin: 50% 0%;
        -o-transform-origin: 50% 0%;
        transform-origin: 50% 0%;
        -webkit-transform:rotate3d(1,0,0,0deg) translate3d(0%,0%,1px) ;
        -moz-transform:rotate3d(1,0,0,0deg) translate3d(0%,0%,1px) ;
        -mos-transform:rotate3d(1,0,0,0deg) translate3d(0%,0%,1px) ;
        -o-transform:rotate3d(1,0,0,0deg) translate3d(0%,0%,1px) ;
        transform:rotate3d(1,0,0,0deg) translate3d(0%,0%,1px) ;
        z-index:2;
        -webkit-transition: all 0.25s ease;
        -moz-transition: all 0.25s ease;
        -mos-transition: all 0.25s ease;
        -o-transition: all 0.25s ease;
        transition: all 0.25s ease;
}

.open-corner{
    -webkit-transform:rotate3d(1,0,0,180deg) !important;
    -moz-transform:rotate3d(1,0,0,180deg) !important;
    -mos-transform:rotate3d(1,0,0,180deg) !important;
    -o-transform:rotate3d(1,0,0,180deg) !important;
    transform:rotate3d(1,0,0,180deg) !important;
}

.feedback #modal .left .papper{
    position:absolute;
    left:10%;
    bottom:0;
    width:80%;
    height:100%;
    background:rgba(242,242,242,1);
    z-index:3;
    -webkit-transform:translate3d(0%,0%,0px);
    -moz-transform:translate3d(0%,0%,0px);
    -mos-transform:translate3d(0%,0%,0px);
    -o-transform:translate3d(0%,0%,0px);
    transform:translate3d(0%,0%,0px);
    -webkit-transition: all 0.25s ease 0.25s;
    -moz-transition: all 0.25s ease 0.25s;
    -mos-transition: all 0.25s ease 0.25s;
    -o-transition: all 0.25s ease 0.25s;
    transition: all 0.25s ease 0.25s;
}

.papper-up{
    -webkit-transform:translate3d(0%,-40%,1px) !important;
    -moz-transform:translate3d(0%,-40%,1px) !important;
    -mos-transform:translate3d(0%,-40%,1px) !important;
    -o-transform:translate3d(0%,-40%,1px) !important;
    transform:translate3d(0%,-40%,1px) !important;
}

.feedback #modal .left .text{
    position:relative;
    width:10px;
    margin:5px 5px 0px 5px;
    float:left;
    height:4px;
    background: #ccc;
    display: none;
}

.feedback #modal .left .text:nth-child(2n){
    width:20px;
}

.feedback #modal .left .text:nth-child(3n){
    width:15px;
}

.feedback #modal .left .text:nth-child(4n){
    width:17px;
}

.feedback #modal .left .letter .corner-right{
    position:absolute;
    top:0em;
    right:0em;
    width: 0; 
    height: 0; 
    border-right: 4em solid #e1d620;
    border-top: 2.5em solid transparent;
    border-bottom: 2.5em solid transparent;
    z-index:4;
    -webkit-transform:translate3d(0%,0%,1px);
    -moz-transform:translate3d(0%,0%,1px);
    -mos-transform:translate3d(0%,0%,1px);
    -o-transform:translate3d(0%,0%,1px);
    transform:translate3d(0%,0%,1px);
}

.feedback #modal .left .letter .corner-bottom{
    position:absolute;
    bottom:0em;
    left:0em;
    width: 0; 
    height: 0; 
    border-left: 4em solid transparent;
    border-right: 4em solid transparent;
    border-bottom: 2.5em solid #d7b636;
    z-index:4;
    -webkit-transform:translate3d(0%,0%,1px);
    -moz-transform:translate3d(0%,0%,1px);
    -mos-transform:translate3d(0%,0%,1px);
    -o-transform:translate3d(0%,0%,1px);
    transform:translate3d(0%,0%,1px);
}

.feedback #modal .left .letter .corner-left{
    position:absolute;
    bottom:0em;
    left:0em;
    width: 0; 
    height: 0; 
    border-left: 4em solid #dcbb3b;
    border-top: 2.5em solid transparent;
    border-bottom: 2.5em solid transparent;
    z-index:4;
    -webkit-transform:translate3d(0%,0%,1px);
    -moz-transform:translate3d(0%,0%,1px);
    -mos-transform:translate3d(0%,0%,1px);
    -o-transform:translate3d(0%,0%,1px);
    transform:translate3d(0%,0%,1px);
}

.feedback #modal .right{
    background:#4B9EBF;
    -webkit-transform-origin: 0% 50%;
    -moz-transform-origin: 0% 50%;
    -o-transform-origin: 0% 50%;
    -ms-transform-style: 0% 50%;
    transform-origin: 0% 50%;
    -webkit-animation: rotater 0.5s ease-out forwards;
    -moz-animation: rotaterr 0.5s ease-out forwards;
    -mos-animation: rotater 0.5s ease-out forwards;
    -o-animation: rotater 0.5s ease-out forwards;
    animation: rotater 0.5s ease-out forwards;
}

.feedback #modal .right .close {
    position: absolute;
    right: 1em;
    top: 1em;
    width: 2em;
    height: 2em;
    z-index: 2;
    cursor: pointer;
}

.feedback #modal .right .close:before, .close:after {
    position: absolute;
    left: 1em;
    content: ' ';
    height: 2em;
    width: 2px;
    background-color: rgba(255,255,255,0.5);
}

.feedback #modal .right .close:hover:before, .close:hover:after {
    background-color: rgba(255,255,255,1);
}

.feedback #modal .right .close:before {
    -webki-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -mos-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

.feedback #modal .right .close:after {
    -webki-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -mos-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.feedback #modal .right .container{
    position:relative;
    top:50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -mos-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
	width:100%;
}


/* forgot password */

.forgot #modal .left, .forgot #modal .right{
    position:relative;
    width:50%;
    min-width: 10.63em;
    min-height: 12em;
    height:100%;
    float:left;
    text-align:center;
    color:#fff;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.forgot #modal .left{
    background:#03658C;
    -webkit-transform-origin: 100% 50%;
    -moz-transform-origin: 100% 50%;
    -o-transform-origin: 100% 50%;
    -ms-transform-style: 100% 50%;
    transform-origin: 100% 50%;
    -webkit-animation: rotatel 0.5s ease-out forwards;
    -moz-animation: rotatel 0.5s ease-out forwards;
    -mos-animation: rotatel 0.5s ease-out forwards;
    -o-animation: rotatel 0.5s ease-out forwards;
    animation: rotatel 0.5s ease-out forwards;
}

/* Mobile */
@media screen and (max-width:800px){

    .forgot #modal{
        top:0%;
        left:0%;
        width:100%;
        height:100%;
    }

    .forgot #modal .left,.forgot #modal .right{
        width:50% !important;
        height:50% !important;
        min-height: 16em !important;
    }

    .forgot #modal .left{
        -webkit-transform-origin: 50% 100% !important;
        -moz-transform-origin: 50% 100% !important;
        -o-transform-origin: 50% 100% !important;
        -ms-transform-style: 50% 100% !important;
        transform-origin: 50% 100% !important;
        -webkit-animation: rotatet 0.5s ease-out forwards !important;
        -moz-animation: rotatet 0.5s ease-out forwards !important;
        -mos-animation: rotatet 0.5s ease-out forwards !important;
        -o-animation: rotatet 0.5s ease-out forwards !important;
        animation: rotatet 0.5s ease-out forwards !important;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        cursor: default;
    }

    .forgot #modal .right{
        -webkit-transform-origin: 50% 0% !important;
        -moz-transform-origin: 50% 0% !important;
        -o-transform-origin: 50% 0% !important;
        -ms-transform-style: 50% 0% !important;
        transform-origin: 50% 0% !important;
        -webkit-animation: rotateb 0.5s ease-out forwards !important;
        -moz-animation: rotateb 0.5s ease-out forwards !important;
        -mos-animation: rotateb 0.5s ease-out forwards !important;
        -o-animation: rotateb 0.5s ease-out forwards !important;
        animation: rotateb 0.5s ease-out forwards !important;
    } 
}
@media screen and (max-width:480px){
	.feedback #modal .left, .feedback #modal .right {width: 100% !important; height: 50% !important;}
}
.forgot #modal .left .letter{
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        width: 8em;
        height: 5em;
        z-index: 1;
        background:#ceaf39;
         -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        -o-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
        transform-style: preserve-3d;
}

.forgot #modal .left .letter:before{
        position: absolute;
        content: '';
        width: 100%;
        height: 0.25em;
        left:0;
        bottom:-1.5em;
        background: rgba(0,0,0,0.15);
        -webkit-border-radius: 100%;
        -moz-border-radius: 100%;
        border-radius: 100%;
}

.forgot #modal .left .letter .corner-top{
        position:absolute;
        top:0em;
        left:0em;
        width: 0; 
        height: 0; 
        border-left: 4em solid transparent;
        border-right: 4em solid transparent;
        border-top: 2.5em solid #e6db26;
        -webkit-transform-origin: 50% 0%;
        -moz-transform-origin: 50% 0%;
        -mos-transform-origin: 50% 0%;
        -o-transform-origin: 50% 0%;
        transform-origin: 50% 0%;
        -webkit-transform:rotate3d(1,0,0,0deg) translate3d(0%,0%,1px) ;
        -moz-transform:rotate3d(1,0,0,0deg) translate3d(0%,0%,1px) ;
        -mos-transform:rotate3d(1,0,0,0deg) translate3d(0%,0%,1px) ;
        -o-transform:rotate3d(1,0,0,0deg) translate3d(0%,0%,1px) ;
        transform:rotate3d(1,0,0,0deg) translate3d(0%,0%,1px) ;
        z-index:2;
        -webkit-transition: all 0.25s ease;
        -moz-transition: all 0.25s ease;
        -mos-transition: all 0.25s ease;
        -o-transition: all 0.25s ease;
        transition: all 0.25s ease;
}

.forgot #modal .left .papper{
    position:absolute;
    left:10%;
    bottom:0;
    width:80%;
    height:100%;
    background:rgba(242,242,242,1);
    z-index:3;
    -webkit-transform:translate3d(0%,0%,0px);
    -moz-transform:translate3d(0%,0%,0px);
    -mos-transform:translate3d(0%,0%,0px);
    -o-transform:translate3d(0%,0%,0px);
    transform:translate3d(0%,0%,0px);
    -webkit-transition: all 0.25s ease 0.25s;
    -moz-transition: all 0.25s ease 0.25s;
    -mos-transition: all 0.25s ease 0.25s;
    -o-transition: all 0.25s ease 0.25s;
    transition: all 0.25s ease 0.25s;
}

.forgot #modal .left .text{
    position:relative;
    width:10px;
    margin:5px 5px 0px 5px;
    float:left;
    height:4px;
    background: #ccc;
    display: none;
}

.forgot #modal .left .text:nth-child(2n){
    width:20px;
}

.forgot #modal .left .text:nth-child(3n){
    width:15px;
}

.forgot #modal .left .text:nth-child(4n){
    width:17px;
}

.forgot #modal .left .letter .corner-right{
    position:absolute;
    top:0em;
    right:0em;
    width: 0; 
    height: 0; 
    border-right: 4em solid #e1d620;
    border-top: 2.5em solid transparent;
    border-bottom: 2.5em solid transparent;
    z-index:4;
    -webkit-transform:translate3d(0%,0%,1px);
    -moz-transform:translate3d(0%,0%,1px);
    -mos-transform:translate3d(0%,0%,1px);
    -o-transform:translate3d(0%,0%,1px);
    transform:translate3d(0%,0%,1px);
}

.forgot #modal .left .letter .corner-bottom{
    position:absolute;
    bottom:0em;
    left:0em;
    width: 0; 
    height: 0; 
    border-left: 4em solid transparent;
    border-right: 4em solid transparent;
    border-bottom: 2.5em solid #d7b636;
    z-index:4;
    -webkit-transform:translate3d(0%,0%,1px);
    -moz-transform:translate3d(0%,0%,1px);
    -mos-transform:translate3d(0%,0%,1px);
    -o-transform:translate3d(0%,0%,1px);
    transform:translate3d(0%,0%,1px);
}

.forgot #modal .left .letter .corner-left{
    position:absolute;
    bottom:0em;
    left:0em;
    width: 0; 
    height: 0; 
    border-left: 4em solid #dcbb3b;
    border-top: 2.5em solid transparent;
    border-bottom: 2.5em solid transparent;
    z-index:4;
    -webkit-transform:translate3d(0%,0%,1px);
    -moz-transform:translate3d(0%,0%,1px);
    -mos-transform:translate3d(0%,0%,1px);
    -o-transform:translate3d(0%,0%,1px);
    transform:translate3d(0%,0%,1px);
}

.forgot #modal .right{
    background:#4B9EBF;
    -webkit-transform-origin: 0% 50%;
    -moz-transform-origin: 0% 50%;
    -o-transform-origin: 0% 50%;
    -ms-transform-style: 0% 50%;
    transform-origin: 0% 50%;
    -webkit-animation: rotater 0.5s ease-out forwards;
    -moz-animation: rotaterr 0.5s ease-out forwards;
    -mos-animation: rotater 0.5s ease-out forwards;
    -o-animation: rotater 0.5s ease-out forwards;
    animation: rotater 0.5s ease-out forwards;
}

.forgot #modal .right .close {
    position: absolute;
    right: 1em;
    top: 1em;
    width: 2em;
    height: 2em;
    z-index: 2;
    cursor: pointer;
}

.forgot #modal .right .close:before, .close:after {
    position: absolute;
    left: 1em;
    content: ' ';
    height: 2em;
    width: 2px;
    background-color: rgba(255,255,255,0.5);
}

.forgot #modal .right .close:hover:before, .close:hover:after {
    background-color: rgba(255,255,255,1);
}

.forgot #modal .right .close:before {
    -webki-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -mos-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

.forgot #modal .right .close:after {
    -webki-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -mos-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.forgot #modal .right .container{
    position:relative;
    top:50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -mos-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

/*  btn */

/*#sign-in, #sign-up, #feedback, #forgot {
    position: relative;
    background:#03658C;
    padding:0.25em 0.25em 0.25em  0.25em ;
    display: inline-block;
    color: #fff;
    text-decoration: none;
    font-family: 'Open sans';
    border-right:1.75em solid #4B9EBF;
    white-space: nowrap;
    cursor: pointer;
}

#sign-in:after{
    position: relative;
    content:'';
    content: "\f023";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    font-size: 1em;
    right:-1.35em;
    bottom:0em;
    color:rgba(255,255,255,.5);
}

#sign-up:hover:after{
    color:rgba(255,255,255,1);
}

#sign-up:after{
    position: relative;
    content:'';
    content: "\f007";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    font-size: 1em;
    right:-1.5em;
    bottom:0em;
    color:rgba(255,255,255,.5);
}

#sign-in:hover:after{
    color:rgba(255,255,255,1);
}

#feedback:after{
    position: relative;
    content:'';
    content: "\f0e0";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    font-size: 1em;
    right:-1.6em;
    bottom:0em;
    color:rgba(255,255,255,.5);
}

#feedback:hover:after{
    color:rgba(255,255,255,1);
}
#forgot:after{
    position: relative;
    content:'';
    content: "\f023";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    font-size: 1em;
    right:-1.4em;
    bottom:0em;
    color:rgba(255,255,255,.5);
}

#forgot:hover:after{
    color:rgba(255,255,255,1);
}
*/

#sbutton {
    position: absolute;
    right: -2.5em;
    bottom:-2.5em;
    background: #03658C;
    color:#555;
    width:5em;
    height:5em;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    z-index:0;
    cursor:pointer;
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -mos-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
}

#sbutton:before {
    position: absolute;
    content: '\f09a';
    font-family: FontAwesome;
    font-weight: normal;
    font-size: 2em;
    left:0.75em;
    top:0.5em;
    color:#fff;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -mos-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

#sbutton:after {
    position: absolute;
    content: '\f023';
    font-family: FontAwesome;
    font-weight: normal;
    font-size: 2em;
    right:0.7em;
    bottom:0.5em;
    color:#fff;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(135deg);
    -mos-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
}

#sbutton:hover {
    -webkit-transform: scale(1.5,1.5);
    -moz-transform: scale(1.5,1.5);
    -mos-transform: scale(1.5,1.5);
    -o-transform: scale(1.5,1.5);
    transform: scale(1.5,1.5);
}

.container-social{
    position:absolute;
    white-space: nowrap;
    left:50%;
    top:150%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -mos-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    overflow: hidden;
    display: none;
}

.container-social .soc a{
    width:3em;
    height:3em;
    display:block;
    text-decoration: none;
}

.social{
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -mos-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}

.no-social{
    -webkit-transform: rotate(180deg) scale(1.1,1.1) !important;
    -moz-transform: rotate(180deg) scale(1.1,1.1) !important;
    -mos-transform: rotate(180deg) scale(1.5,1.1) !important;
    -o-transform: rotate(180deg) scale(1.1,1.1) !important;
    transform: rotate(180deg) scale(1.1,1.1) !important;
}

.no-social:hover{
    -webkit-transform: rotate(180deg) scale(1.5,1.5) !important;
    -moz-transform: rotate(180deg) scale(1.5,1.5) !important;
    -mos-transform: rotate(180deg) scale(1.5,1.5) !important;
    -o-transform: rotate(180deg) scale(1.5,1.5) !important;
    transform: rotate(180deg) scale(1.5,1.5) !important;
}

.container-social h2 {
    font-weight: 300;
    font-size: 2em;
    border-bottom: 1px solid #fff;
    padding-bottom: 0.25em;
    color: rgba(255, 255, 255, 0.75);
    -webkit-margin-before: 0em;
    -webkit-margin-after: 0.25em;
}

.soc {
    position:relative;
    display: inline-block;
    width:3em;
    height:3em;
    background:#fff;
    overflow: hidden;
    -webkit-animation: soc 0.5s ease forwards;
    -moz-animation: soc 0.5s ease forwards;
    -mos-animation: soc 0.5s ease forwards;
    -o-animation: soc 0.5s ease forwards;
    animation: soc 0.5s ease forwards;
    -webkit-transform: translateY(150%);
    -moz-transform: translateY(150%);
    -mos-transform: translateY(150%);
    -o-transform: translateY(150%);
    transform: translateY(150%);
}

.soc:nth-child(2){
    -webkit-animation-delay:0.55s;
    -moz-animation-delay:0.55s;
    -mos-animation-delay:0.55s;
    -o-animation-delay:0.55s;
    animation-delay:0.55s;
}

.soc:nth-child(3){
    -webkit-animation-delay:0.65s;
    -moz-animation-delay:0.65s;
    -mos-animation-delay:0.65s;
    -o-animation-delay:0.65s;
    animation-delay:0.65s;
}

.soc:nth-child(4){
    -webkit-animation-delay:0.75s;
    -moz-animation-delay:0.75s;
    -mos-animation-delay:0.75s;
    -o-animation-delay:0.75s;
    animation-delay:0.75s;
}

.soc:nth-child(5){
    -webkit-animation-delay:0.85s;
    -moz-animation-delay:0.85s;
    -mos-animation-delay:0.85s;
    -o-animation-delay:0.85s;
    animation-delay:0.85s;
}

@-webkit-keyframes soc {
    0%     {-webkit-transform: translateY(150%);}
    100%   {-webkit-transform: translateY(0%);}
}

@-moz-keyframes soc {
    0%     {-moz-transform: translateY(150%);}
    100%   {-moz-transform: translateY(0%);}
}

@-mos-keyframes soc {
    0%     {-mos-transform: translateY(150%);}
    100%   {-mos-transform: translateY(0%);}
}

@-o-keyframes soc {
    0%     {-o-transform: translateY(150%);}
    100%   {-o-transform: translateY(0%);}
}

@keyframes soc {
    0%     {transform: translateY(150%);}
    100%   {transform: translateY(0%);}
}

.fb:before, .gplus:before, .twitter:before, .vk:before {
    position: absolute;
    font-family: 'FontAwesome';
	font-style: normal;
	font-weight: normal;
    font-size: 2.5em;
    color: #4B9EBF;
    -webkit-transition: all 0.15s ease;
    -moz-transition: all 0.15s ease;
    -mos-transition: all 0.15s ease;
    -o-transition: all 0.15s ease;
    transition: all 0.15s ease;
}

.fb:before {
    left:0.3em;;
    top:0.15em;
    content: '\f09a';
}


.fb:hover:before, .gplus:hover:before, .twitter:hover:before, .vk:hover:before {
    color: #555;
}


.gplus:before {
    left:0.15em;;
    top:0.15em;
    content: '\f0d5';
}

.twitter:before {
    left:0.15em;;
    top:0.15em;
    content: '\f099';
}

.vk:before {
    left:0.05em;;
    top:0.1em;
    content: '\f189';
}
.start-clicks {	
	text-align: center;
    padding: 10px;
    font-size: 23px;
	line-height:34px;
}