@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

body {
	background-color: #F4F6F6;
}
.navbar-brand {
	font-family: 'Roboto';
	font-weight: bold;
	color: #7952B3!important;
}
.navbar {
	display: block;
}
.navbar img {
	max-height: 2em;
}
.header {
	min-height: 60vh;
	background-image: url("../img/header.jpg");
	background-position: center bottom;
	background-size: cover;
	background-repeat: no-repeat;
	display: flex;
	justify-content: center;
	align-items: center;
}
.header h1 {
	color: #FFF;
	font-family: 'Roboto';
	font-weight: bold;
	text-shadow: 0 0 15px #202020;
}
.seleccionar_empresa .empresa {
	display: flex;
	align-items: center;
	flex-direction: column;
	background-color: #FFF;
	border: 1px solid #e3e8e8;
	cursor: pointer;
}
.seleccionar_empresa .empresa img {
	display: block;
	margin: 0 auto;
}
.seleccionar_empresa .empresa p {
	font-family: 'Roboto';
	color: #000;
}

.contenedor_recarga {
	background-color: #FFF;
	border: 1px solid #e3e8e8;
	margin: 2em 0;
	padding: 2em;
}
.contenedor_recarga h1 {
	font-family: 'Roboto';
	text-align: center;
}
.contenedor_recarga h2 {
	font-family: 'Roboto';
	font-weight: lighter;
	text-align: center;
}
.input_blank {
	padding: .5em;
	text-align: center;
	border: none;
	display: block;
	margin: 0 auto;
	border-bottom: 2px solid #e3e8e8;
	transition: all .5s;
	font-family: 'Roboto';
	font-weight: 500;
	color: #7952B3;
}
.input_blank:focus {
	border: none;
	outline: none;
	border-bottom: 2px solid #7952B3;
	transition: all .5s;
}
.input_blank:invalid {
	box-shadow: none;
	outline: none;
	border: none;
	border-bottom: 2px solid red;
	transition: all .5s;
}
button {
	width: 50%;
	padding: 1em;
	font-family: 'Roboto';
	font-weight: bold;
	padding: .5em 0;
	display: block;
	margin: 2em auto;
	border: none;
	background-color: #7952B3;
	color: #FFF;
	transition: all .5s;
}
button:hover {
	background-color: #6A44A4;
}


.inputphone {
	border: 2px solid #e3e8e8;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}
.inputphone input {
	width: 100%;
	border: none;
	outline: none;
	padding: .5em 0;
}

h5 {
	font-family: 'Roboto';
	font-weight: 500;
}
.roboto {
	font-family: 'Roboto';
}
.hr {
	padding-bottom: 1em;
	margin-bottom: 1em;
	border-bottom: 2px solid #e3e8e8;
}
.justify-content-right {
	justify-content: right;
}
.input {
	padding: .5em 0;
}
.input input {
	width: 100%;
	outline: none;
	border: none;
	border-bottom: 2px solid #e3e8e8;
	padding: .5em 0;
	font-family: 'Roboto';
	color: #000;
	transition: all .5s;
}
.input input::placeholder {
	color: rgba(0,0,0,.5);
}
.input input:focus {
	border: none;
	outline: none;
	border-bottom: 2px solid #7952B3;
	transition: all .5s;
}
.input input:invalid {
	box-shadow: none;
	outline: none;
	border: none;
	border-bottom: 2px solid red;
	transition: all .5s;
}
.error {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background-color: rgba(121,82,179,.95);
	z-index: 999999999999;
	font-family: "Roboto";
	color: #FFF;
	padding: 1.5em;
}
.error p {
	margin: 0;
}
@media (min-width: 992px){
	.header h1 {
		font-size: 3vw;
	}
	.seleccionar_empresa .empresa {
		margin: 3vw;
		border-radius: .5vw;
	}
	.contenedor_recarga {
		border-radius: .5vw;
	}
	.seleccionar_empresa .empresa p {
		font-size: 1.5vw;
	}
	.input_blank {
		font-size: 4vw;
		width: 50%;
	}
	button {
		font-size: 2vw;
		border-radius: .5vw;
	}
	.contenedor_recarga h2 {
		font-size: 1.5vw;
	}
	.seleccionar_empresa .empresa img {
		width: 90%;
	}
}
@media (max-width: 991px){
	.header h1 {
		font-size: 10vw;
		padding: 0 4vw;
		text-align: center;
	}
	.seleccionar_empresa .empresa {
		margin: 6vw;
		border-radius: 2vw;
	}
	.seleccionar_empresa .empresa p {
		font-size: 4.5vw;
	}
	.contenedor_recarga {
		border-radius: 2vw;
	}
	.input_blank {
		font-size: 12vw;
		width: 90%;
	}
	button {
		font-size: 6vw;
		border-radius: 1.5vw;
	}
	.contenedor_recarga h2 {
		font-size: 4vw;
	}
	.seleccionar_empresa .empresa img {
		width: 75%;
	}
}