@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800,900');

body {
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    font-size: 15px;
    line-height: 1.7;
    color: #1f2029;
    overflow-x: hidden;
}
a {
    cursor: pointer;
    transition: all 200ms linear;
}
a:hover {
    text-decoration: none;
}
.section {
    position: relative;
    width: 100%;
    display: block;
}
.full-height {
    min-height: 100vh;
}

/* Tarjeta de login */
.card-3d-wrap {
    position: relative;
    width: 440px;
    max-width: 100%;
    height: 270px;
    margin-top: 20px;
}
.card-3d-wrapper {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.card-front {
    width: 100%;
    height: 100%;
    background-color: #ededed;
    background-image: url('../img/pat.svg');
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: 300%;
    position: absolute;
    border-radius: 6px;
    left: 0;
    top: 0;
}
.center-wrap {
    position: absolute;
    width: 100%;
    padding: 0 35px;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: 20;
    display: block;
}

/* Campos del formulario */
.form-group {
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
}
.form-style {
    padding: 13px 20px;
    padding-left: 55px;
    height: 48px;
    width: 100%;
    font-weight: 500;
    border-radius: 4px;
    font-size: 14px;
    line-height: 22px;
    letter-spacing: 0.5px;
    outline: none;
    color: #c4c3ca;
    background-color: #1f2029;
    border: none;
    transition: all 200ms linear;
    box-shadow: 0 4px 8px 0 rgba(21,21,21,.2);
}
.form-style:focus,
.form-style:active {
    border: none;
    outline: none;
    box-shadow: 0 4px 8px 0 rgba(21,21,21,.2);
}
.input-icon {
    position: absolute;
    top: 0;
    left: 18px;
    height: 48px;
    font-size: 24px;
    line-height: 48px;
    text-align: left;
    color: #898987;
    transition: all 200ms linear;
}
.form-group input:-ms-input-placeholder  { color: #c4c3ca; opacity: 0.7; transition: all 200ms linear; }
.form-group input::-moz-placeholder      { color: #c4c3ca; opacity: 0.7; transition: all 200ms linear; }
.form-group input:-moz-placeholder       { color: #c4c3ca; opacity: 0.7; transition: all 200ms linear; }
.form-group input::-webkit-input-placeholder { color: #c4c3ca; opacity: 0.7; transition: all 200ms linear; }
.form-group input:focus:-ms-input-placeholder  { opacity: 0; transition: all 200ms linear; }
.form-group input:focus::-moz-placeholder      { opacity: 0; transition: all 200ms linear; }
.form-group input:focus:-moz-placeholder       { opacity: 0; transition: all 200ms linear; }
.form-group input:focus::-webkit-input-placeholder { opacity: 0; transition: all 200ms linear; }

/* Botón */
.btn {
    border-radius: 4px;
    height: 44px;
    width: 100%;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    transition: all 200ms linear;
    padding: 0 30px;
    letter-spacing: 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: none;
    background-color: #898987;
    color: #03050d;
    box-shadow: 0 8px 24px 0 rgba(255,235,167,.2);
}
.btn:active,
.btn:focus {
    background-color: #030408;
    color: #898987;
    box-shadow: 0 8px 24px 0 rgba(16,39,112,.2);
}
.btn:hover {
    background-color: #010204;
    color: #898987;
    box-shadow: 0 8px 24px 0 rgba(16,39,112,.2);
}

/* Logo opcional */
.logo {
    position: absolute;
    top: 30px;
    right: 30px;
    display: block;
    z-index: 100;
    transition: all 250ms linear;
}
.logo img {
    height: 26px;
    width: auto;
    display: block;
}