@import url('https://fonts.googleapis.com/css?family=Montserrat');
html {
    height: 100%;
}

body {
    height: 10;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
    /*background: #207ce5;*/
    font-family: 'Montserrat', sans-serif;
    /*background: url(../images/background.jpg) no-repeat center center fixed;*/
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1978bc+0,2299d1+24,53bbe2+40,6bc4e2+52,7fc7e0+62,7fbfda+74,5497c1+88,3f80b6+100 */
    background: #1978bc;
    /* Old browsers */
    background: -moz-linear-gradient(-45deg, #1978bc 0%, #2299d1 24%, #53bbe2 40%, #6bc4e2 52%, #7fc7e0 62%, #7fbfda 74%, #5497c1 88%, #3f80b6 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, #1978bc 0%, #2299d1 24%, #53bbe2 40%, #6bc4e2 52%, #7fc7e0 62%, #7fbfda 74%, #5497c1 88%, #3f80b6 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, #1978bc 0%, #2299d1 24%, #53bbe2 40%, #6bc4e2 52%, #7fc7e0 62%, #7fbfda 74%, #5497c1 88%, #3f80b6 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#1978bc', endColorstr='#3f80b6', GradientType=1);
    /* IE6-9 fallback on horizontal gradient */
    /*-moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;*/
}

.login-form {
    width: 350px;
    height: 400px;
    margin: 0 auto;
    position: relative;
    -moz-perspective: 800px;
    -webkit-perspective: 800px;
    perspective: 800px;
}

form[role=login],
#recoverForm {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 30%;
    left: 0;
    color: #9a9595;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f2f5f6+0,e3eaed+37,c8d7dc+100;Grey+3D+%234 */
    background: linear-gradient(to bottom,  #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    padding: 26px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}

form[role=login] img,
#recoverForm img {
    display: block;
    margin: 0 auto;
    height: 80px;
    margin-bottom: 35px;
}

form[role=login]>div,
#recoverForm>div {
    text-align: center;
}


/** Animations **/

.flip-area .flip-element {
    /* Enabling 3d space for the transforms */
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    /* When the forms are flipped, they will be hidden */
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* Enabling a smooth animated transition */
    -moz-transition: 0.8s;
    -webkit-transition: 0.8s;
    transition: 0.8s;
    /* Configure a keyframe animation for Firefox */
    -moz-animation: pulse 2s infinite;
    /* Configure it for Chrome and Safari */
    -webkit-animation: pulse 2s infinite;
}

.flip-element:nth-of-type(2) {
    z-index: 1;
    opacity: 0;
    /* Rotating the recover password form by default */
    -moz-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.flip-area.flipped .flip-element:nth-of-type(1) {
    opacity: 0;
    /**
	 * Rotating the login form when the
	 * flipped class is added to the container
	 */
    -moz-transform: rotateY(-180deg);
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}

.flip-area.flipped .flip-element:nth-of-type(2) {
    opacity: 1;
    /* Rotating the recover div into view */
    -moz-transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
}


/** modal window **/

.modal-header {
    background: #1287c7;
    color: #fff;
    border-radius: 6px 6px 0 0;
}

button.close {
    color: #fff;
}