.contenedor {
    height: 520px;
    width: 420px;
    margin: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-perspective: 1000px;
    perspective: 1000px;
    z-index: 99;
}

.contenedor .MensajeBienvenida {
    position: absolute;
    top: 20px;
    text-align: center;
    font-size: 1.3em;
    font-weight: bold;
}

.contenedor .container {
    position: absolute;
    width: 100%;
    height: 90%;
    margin: auto;
    padding: 5px;
    background: #fff;
    border-radius: 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-transform: translateY(0deg);
    transform: translateY(0deg);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    border-radius: 30px;
    -webkit-box-shadow: 0 4px 10px var(--colorprimary);
    box-shadow: 0 4px 10px var(--colorprimary);
    -webkit-transition: -webkit-transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: -webkit-transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.contenedor .iniciosesion {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: auto;
}

.contenedor .iniciosesion form {
    width: 90%;
    margin: 0 auto;
}

.contenedor .olvidocontrasena {
    width: 100%;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    height: auto;
}

.contenedor .olvidocontrasena form {
    width: 90%;
    margin: 0 auto;
}

#flip {
    display: none;
    z-index: 100;
}

.contenedor #flip:checked~.iniciosesion {
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}

.contenedor #flip:checked~.olvidocontrasena {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
}

.btnolvidolacontrasena {
    text-align: center;
    font-weight: bold;
    text-decoration: underline;
    padding: 20px;
    margin-top: -10px;
    color: var(--colorprimary);
}

.btnolvidolacontrasena label {
    cursor: pointer;
}

.contenedor h2 {
    text-align: center;
    padding: 10px;
    color: #000;
    font-size: 1.5em;
}

.contenedor h1.olvidotitulo {
    font-size: 18pt;
}

.contenedor hr {
    width: 90%;
    margin: 0 auto;
    color: var(--colorprimary);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-text-fill-color: #000;
    box-shadow: 0 0 0px 1000px transparent inset;
    -webkit-transition: background-color 5000s ease-in-out 0s;
    transition: background-color 5000s ease-in-out 0s;
}

.contenedor .formulario {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: auto;
}

.contenedor form select,
.contenedor form input {
    width: 90%;
    margin: auto;
    color: #000;
}


/*Botones*/

.botonatras {
    position: absolute;
    color: var(--colorprimary);
    font-size: 2em;
    text-shadow: -1px -1px 0 var(--colorsecundary), 1px -1px 0 var(--colorsecundary), -1px 1px 0 var(--colorsecundary), 1px 1px 0 var(--colorsecundary), 2px 2px 0 #000;
    top: 10px;
    left: 10px;
}

.botones {
    text-align: center;
    width: 300px;
    margin: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.botoninicio {
    width: 200px;
    height: 40px;
    overflow: hidden;
    background-color: #3c8504;
    cursor: pointer;
    color: #fff;
    text-shadow: 1px 1px 2px #000;
    font-size: 18px;
    font-weight: bold;
    position: relative;
    border-radius: 50px;
}

.botoninicio:after {
    font-family: "tabler-icons";
    content: '\fc76';
    font-size: 30px;
    left: 50%;
    top: 50%;
    position: absolute;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.botoninicio:hover:after {
    top: -50%;
}

.botoninicio:before {
    content: "Ingresar";
    font-size: 18px;
    position: absolute;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    top: 160%;
    left: 50%;
}

.botoninicio:hover:before {
    top: 50%;
}

.botoncontra {
    width: 200px;
    height: 40px;
    overflow: hidden;
    background-color: #3c8504;
    cursor: pointer;
    color: #fff;
    text-shadow: 1px 1px 2px #000;
    font-size: 18px;
    font-weight: bold;
    position: relative;
    border-radius: 50px;
}

.botoncontra:after {
    font-family: "tabler-icons";
    content: '\eae2';
    font-size: 30px;
    left: 50%;
    top: 50%;
    position: absolute;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.botoncontra:hover:after {
    top: -50%;
}

.botoncontra:before {
    content: "Validar";
    font-size: 18px;
    position: absolute;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    top: 160%;
    left: 50%;
}

.botoncontra:hover:before {
    top: 50%;
}

.botonrecuperar {
    width: 200px;
    height: 40px;
    overflow: hidden;
    background-color: #3c8504;
    cursor: pointer;
    color: #fff;
    text-shadow: 1px 1px 2px #000;
    font-size: 18px;
    font-weight: bold;
    position: relative;
    border-radius: 50px;
}

.botonrecuperar:after {
    font-family: "tabler-icons";
    content: '\fea8';
    font-size: 30px;
    left: 50%;
    top: 50%;
    position: absolute;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.botonrecuperar:hover:after {
    top: -50%;
}

.botonrecuperar:before {
    content: "Recuperar Ingreso";
    font-size: 18px;
    position: absolute;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    top: 160%;
    left: 50%;
}

.botonrecuperar:hover:before {
    top: 50%;
}


/*--------------------*/

.grupo {
    margin: auto;
    padding: 10px;
    padding-bottom: 0;
    margin-bottom: 15px;
    width: 100%;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    z-index: 1;
}

.grupo .icono {
    position: absolute;
    right: 30px;
    font-family: "tabler-icons";
    font-weight: 900;
    cursor: pointer;
}

.grupo .icono::after {
    font-size: 1.3em;
    content: '\ea9a';
}

.grupo .icono.hide::after {
    font-size: 1.3em;
    content: '\ecf0';
}

.formulario__input {
    width: 100%;
    position: relative;
    padding: 5px 5px 2px 0;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #000;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    font-size: 1em;
}

.formulario__label {
    position: absolute;
    z-index: -2;
    width: 87%;
    -webkit-transition: all 0.1s ease;
    transition: all 0.1s ease;
    font-size: 1em;
}

.formulario__input:focus {
    border-bottom: 1px solid var(--colorprimary);
}

.formulario__input:focus+.formulario__label {
    margin-top: -40px;
    margin-left: 0;
    font-size: 1em;
    color: var(--colorprimary);
    font-weight: bold;
}

.formulario__select {
    position: relative;
    width: 100%;
    padding: 5px 5px 2px 0;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #000;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    color: #000;
    z-index: 10;
    cursor: pointer;
    font-size: 1em;
}

.formulario__select:focus {
    border-bottom: 1px solid var(--colorprimary);
}

.formulario__select:focus+.formulario__label {
    font-weight: bold;
}

.formulario__select option {
    color: #000;
}

.fijar {
    margin-top: -40px;
    margin-left: 0;
    font-size: 1em;
    color: var(--colorprimary);
    font-weight: bold;
}

.switche {
    margin: 5px auto;
    width: 90%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.switche label {
    text-align: center;
    font-size: 0.8em;
}

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}


/* Hide default HTML checkbox */

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}


/* The slider */

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #aaa;
    -webkit-box-shadow: 0 2px 4px #000 inset;
    box-shadow: 0 2px 4px #000 inset;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: #fff;
    -webkit-box-shadow: 2px 2px 4px #000;
    box-shadow: 2px 2px 4px #000;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked+.slider {
    background-color: var(--colorprimary);
    -webkit-box-shadow: 0 2px 4px #000 inset;
    box-shadow: 0 2px 4px #000 inset;
}

input:focus+.slider {
    -webkit-box-shadow: 0 2px 4px #000 inset;
    box-shadow: 0 2px 4px #000 inset;
}

input:checked+.slider:before {
    -webkit-transform: translateX(26px);
    transform: translateX(26px);
    -webkit-box-shadow: -2px 2px 4px #000;
    box-shadow: -2px 2px 4px #000;
}


/* Rounded sliders */

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}


/*-------------------------------------------*/

@media screen and (max-width:460px) {
    .grupo {
        width: 100%;
        margin: 5px 0 5px -15px;
    }
    .contenedor {
        width: 90%;
        max-width: 420px;
    }
    .formulario__label {
        width: 85%;
    }
    .botones {
        width: 90%;
        margin: auto;
    }
}


/*@media screen and (max-width:390px){
    .contenedor .container form{
        margin: -5%;
        margin-top: 5px;
    }
    .contenedor .container form .formulario__label{
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }
    .contenedor{
        height: 75vh;
    }
}*/