* {
	font-family: 'Roboto', sans-serif!important;
	font-weight: 400!important;
	position: relative;
	margin: 0;
	padding: 0;
	outline: none!important;
}

/*GENERAL CONTAINER*/
#general_container {
	width: 100%;
	height: 100vh;
	display: flex;
}

/*FORM CONTAINER*/
#form_container {
	width: 35%;
	height: 100%;
	background: url(../../../assets/img/login/bg_general.png) center no-repeat;
    background-size: cover;
    position: absolute;
    z-index: 5;
    animation: inside_l cubic-bezier(0.5, 1.12, 1, 1) .5s;
}

#form_container .container_form {
    margin: 10em 0 0 50px;
}

/*Header*/
#form_container .header {
	width: 100%;
	height: 170px;
	display: flex;
	align-items: center;
	padding: 0 0 0 50px;
    box-sizing: border-box;
}

#form_container .header .logo {
	width: 199px;
	height: 98px;
	background: url(../../../assets/img/login/logotipo.png) center no-repeat;
	background-size: cover;
	animation: show_left ease-in-out .3s;
}

/*Header Form*/
#form_container .header.for_form {
	padding: 0;
	max-height: 100px;
}

#form_container h1 {
	color: #a6a6a6;
	margin-bottom: 60px;
    letter-spacing: -2px;
	font-family: 'Montserrat', sans-serif;
	animation: show_left cubic-bezier(0.68,-0.17, 0.44, 1.05) .6s;
}

#form_container h1 {
	color: #a6a6a6;
}

#form_container h1:first-line {
	color: #5f5f5f;
}

/*Form*/
#form_container .form .box input {
	width: 100%;
    margin-bottom: 10px;
    border-radius: 5px;
    border: 0;
    background-color: white;
    box-shadow: 0 15px 50px #d16b2036;
    -moz-box-shadow: 0 15px 50px #d16b2036;
    height: 70px;
    padding: 0 25px;
    padding-top: 0px;
    font-size: 20px;
    color: #ff8001;
    box-sizing: border-box;
    transition: all cubic-bezier(0, 0, 0.2, 1.03) .2s;
}

#form_container input::placeholder {
	font-size: 15px;
	color: #ffc183;
}

.input_move {
    padding-top: 20px!important;
    transition: all cubic-bezier(0, 0, 0.2, 1.03) .2s;
}

.input_move::placeholder {
    color: transparent!important;
}

.box.username {
	animation: show_left cubic-bezier(0.68,-0.17, 0.44, 1.05) .7s;
}

#form_container .box.u_box:before {
    content: "Usuario";
    color: #ffc183;
    font-size: 15px;
    margin-left: 25px;
    transform: translateY(10px);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;
    transition: all cubic-bezier(0, 0, 0.2, 1.03) .2s;
}

.box.password {
	animation: show_left cubic-bezier(0.68,-0.17, 0.44, 1.05) .8s;
}

#form_container .box.p_box:before {
    content: "Contraseña";
    color: #ffc183;
    font-size: 15px;
    margin-left: 25px;
    transform: translateY(10px);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;
    transition: all cubic-bezier(0, 0, 0.2, 1.03) .2s;
}

.username-i {
    padding-top: 20px!important;
    transition: all cubic-bezier(0, 0, 0.2, 1.03) .2s;
}

.send {
    background-color: #a8c335;
    color: white;
    font-size: 15px;
    border: none;
    padding: 20px;
    width: 160px;
    cursor: pointer;
    border-radius: 15px;
    margin-top: 20px;
    transition: all ease-in-out .2s;
    animation: show_left cubic-bezier(0.68,-0.17, 0.44, 1.05) 1s;
}

.send:hover {
	width: 200px;
    padding-right: 60px;
	transition: all ease-in-out .2s;
}

.send:hover:after {
    content: "";
    width: 25px;
    height: 22px;
    position: absolute;
    transform: translate(15px,-1px);
    background: url(../../../assets/img/login/login_arrow.png) center no-repeat;
    background-size: cover;
    animation: show_send cubic-bezier(0.68,-0.17, 0.44, 1.05) .4s;
}

/*Images Form*/
.images_before {
    width: 100%;
    position: absolute;
    left: -50px;
    bottom: -15em;
    height: 700px;
}

.images_before * {
	position: absolute;
	z-index: 6;
}

#forma_cero {
    bottom: 0;
    animation: show ease-in-out 5s;
}

#forma_uno {
    bottom: 0;
    right: 5em;
    animation: move_forma cubic-bezier(0.79,-0.18, 0.46, 1.1) 4s;
}

#forma_dos {
    bottom: 5em;
    right: -1em;
    animation: move_forma cubic-bezier(0.79,-0.18, 0.46, 1.1) 10s;
}

#forma_tres {
    right: -4em;
    top: 22em;
    animation: move_forma cubic-bezier(0.79,-0.18, 0.46, 1.1) 15s;
}

#forma_cuatro {
    top: 0;
    right: 0;
    animation: move_forma cubic-bezier(0.79,-0.18, 0.46, 1.1) 20s;
}

#forma_cinco {
    bottom: 0;
    right: -12em;
    animation: move_forma cubic-bezier(0.79,-0.18, 0.46, 1.1) 8s;
}

/*BACKGROUND CONTAINER*/
#bg_container {
	width: 100%;
	height: 100%;
	background-color: red;
	display: flex;
}

#txt_bg {
    right: 0;
    bottom: 4em;
    z-index: 8;
    position: absolute;
    display: flex;
    align-items: center;
}

#txt_bg p {
	color: white;
	animation: show_left cubic-bezier(0.68,-0.17, 0.44, 1.05) 1s;
}

#txt_bg .colbg {
    background-color: white;
    width: 5px;
    height: 70px;
    margin-left: 20px;
    animation: show ease-in-out .5s;
}

#blank_space {
	width: 30%;
	height: 100%;
}

#wallpaper {
	width: 70%;
	height: 100%;
	background: url(../../../assets/img/login/cover.jpg) center no-repeat;
	background-size: cover;
}

/*RESPONSIVE*/
@media (max-width: 1600px) {
	#form_container {
		width: 40%;
	}
}

@media (max-width: 1440px) {
	#form_container .container_form {
   		margin: 70px 0 0 50px;
	}

	.images_before {
	    bottom: -7em;
	    height: 550px;
	}
}

@media (max-width: 1280px) {
	#form_container .container_form {
    	margin: 30px 0 0 50px;
	}
}

@media (max-width: 1024px) {
	#form_container {
	    width: 50%;
	}
}


/*ANIMATIONS*/
@keyframes show {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes inside_l {
	from {
		transform: translateX(-5em);
	}
	to {
		transform: translateX(0);
	}
}

@keyframes show_left {
	from {
		opacity: 0;
		transform: translateX(-5em);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes move_forma {
	0% {
		opacity: 0;
	    transform: translate(-10px,20px);
	}
	25% {
		opacity: 1;
	}
	100% {
		transform: translate(0,0);
	}
}

@keyframes show_send {
	from {
		opacity: 0;
		transform: translate(-15px,-1px);
	}
	to {
		opacity: 1;
		transform: translate(15px,-1px);
	}
}

@media (max-width: 500px) {
    #form_container .header {
        padding: 0 0 0 25px;
    }
    #bg_container {
        display: none;
    }
    #form_container {
        width: 100%;
        background: white;
    }
    .images_before {
        display: none;
    }
    #form_container .container_form {
        margin: 0 auto;
        width: 90%;
    }
    #form_container h1 {
        font-size: 25px;
        margin-bottom: 0;
    }
}