@font-face {
    font-family: 'Avenir';
    font-display: swap;
    src: url('../fonts/AvenirNext-Regular.woff2');
}

@font-face {
    font-family: 'HelveticaNeue';
    font-display: swap;
    src: url('../fonts/HelveticaNeue-Medium.woff2');
}

@font-face {
    font-family: 'HelveticaNeue';
    font-display: swap;
    src: url('../fonts/HelveticaNeue-Bold.woff2');
    font-weight: bold;
}
*{
	outline: none;
}
/* estilos generales */
html{
	background-color:#eee;
	overflow-x: hidden!important;
    overflow-y: scroll!important;
    font-family: 'Avenir', -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
}
body{
	overflow-x: hidden!important;
}
body.white{
	background-color: white;
}
h1,
h2,
h3,
h4,
h5 {
    font-family: 'HelveticaNeue', -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
    font-weight: bold;
    color: #3F4044;
}

h2 {
    font-weight: bold!important;
}

h4,
h5 {
    font-weight: 400!important;
}
p {
    font-size: 1.2rem!important;
    line-height: 1.4rem;
}
/* navbar */
nav{
	background-color: #291C38;
	color: white;
	position: fixed;
	top: 0;
	z-index: 100;
	padding-top: 0px!important;
	transition: background .3s ease;
}
nav.bg-transparent{
	background-color: transparent;
}
nav .container{
	width: 85%;
}
nav .brand-logo{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}
nav ul a{
	color: rgba(255,255,255,0.5);
	transition: color .3s ease;
}
nav.white-text ul a{
	color: rgba(255,255,255,1);
	transition: color .3s ease;
}
nav ul a.active{
	color: #ff304b;
	text-shadow: 0 0 2px rgba(255,255,255,0.15);
}
nav ul a.btn{
	margin:0 6px!important;
	padding: 0 24px!important;
	font-size: 14px;
}
/*fin navbar */

/*inicio sidenav */
ul.sidenav li.logo{
	height: 100px;
    display: flex;
    align-items: center;
}
ul.sidenav li.logo a{
	margin:auto;
	padding: 0px;
}
ul.sidenav li.separator{
	height: 1px;
    margin: 0px 32px;
    background: rgba(0,0,0,0.1);
}
/* fin sidenav */
/* estilos botones */
.btn, .btn:focus{
	background-color: #5B348A;
	border-radius: 5px;
	color: #ffffff;
	text-transform: capitalize;
}
.btn:hover{
	background-color: #5B348A;
}
.btn-secondary, .btn-secondary:focus{
	color:#5B348A!important;
	border:1px solid #5B348A!important;
	background-color: transparent!important;
	box-shadow: unset!important;
	border-color: #5B348A!important;
}
.btn-secondary.white, .btn-secondary.white:focus{
	color:#FFFFFF!important;
	border:1px solid #FFFFFF!important;
	background-color: transparent!important;
	box-shadow: unset!important;
	border-color: #FFFFFF!important;
}
.btn-midelivery, .btn-midelivery:hover, .btn-midelivery:focus{
	background: rgb(230, 27, 114);
    background: -moz-linear-gradient(45deg, rgba(230, 27, 114, 1) 0%, rgba(255, 90, 53, 1) 100%);
    background: -webkit-linear-gradient(45deg, rgba(230, 27, 114, 1) 0%, rgba(255, 90, 53, 1) 100%);
    background: linear-gradient(45deg, rgba(230, 27, 114, 1) 0%, rgba(255, 90, 53, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#e61b72', endColorstr='#ff5a35', GradientType=1);
}
.btn-success, .btn-success:hover, .btn-success:focus{
	background-color: #33DDA2!important;
	color: white!important;
}
.btn-danger, .btn-danger:hover, .btn-danger:focus{
	background-color: #DD4033!important;
	color: white!important;
}
.btn-transparent, .btn-transparent:focus{
	background: rgba(255,255,255,0.3)!important;
	transition: all .3s ease;
}
.btn-transparent.active{
	background: rgba(255,255,255,1)!important;
	color: #27233a!important;
}
.btn-transparent:hover{
	background: rgba(255,255,255,0.6)!important;
	color: #666!important;
}
.landing .btn{
	padding: 0 1.4rem!important;
    margin: 10px 5px;
    border-radius: 5px;
    font-size: 14px;
}
.landing .btn-primary{
	background: rgb(54, 50, 74) !important;
    border: 1px solid white;
}
.landing .btn-transparent{
    background-color: transparent!important;
    border: 1px solid white;
    box-shadow: unset!important;
    color: white;
}
.landing .btn-transparent:hover{
	background-color: white!important;
    color: #5B348A!important;
}
/* footer */
footer {
    background: #2A1D3A;
    background-repeat: no-repeat;
    background-size: cover;
    display: flow-root;
    padding-top: 64px;
    margin-top: 100px;
}


footer a.crealab {
    color: #E65064!important
}

footer a,
footer p {
    font-size: 12px!important;
    color: #ACABAA!important;
}

footer p.footer-title {
    text-transform: uppercase;
    font-size: 13px!important;
    font-weight: bold;
    color: #d8d8d8!important;
}
/* fin footer */

/* fin estilos botones */
body section:first-of-type {
	margin-top: 56px;
}

/* fin estilos generales */

/* helper para validaciones frontend, se pone un msj por defecto que no es visible */
span.helper-text.error{
	color: #F44336;
	opacity: 1;
}
input ~ span.helper-text, textarea ~ span.helper-text, select ~ span.helper-text{
	opacity: 0;
}
input[required].invalid ~ span.helper-text, textarea[required].invalid ~ span.helper-text, select[required].invalid ~ span.helper-text{
	opacity: 1;
	color: red;
}
/* fin helper validaciones */

/* buttons */

/* fin buttons */