@import url("carrito.css");

:root {
  --bg-color-1: #f57c00; /* color naranja */
}

#cargador{
	position: fixed;
	background: black;
	height: 100vh!important;
	width: 100%!important;
	z-index: 200;
	overflow: hidden;
	justify-content: center;
	align-items: center;
	display: flex;
	z-index: 9999;
}
.fondo-cargador {
	width: 100%;
	position: absolute;
	background: #000c;
	height: 100%;
	top: 0px;
	display: flex;
	align-items: center;
	justify-content: center;
	left: 0;
}

@font-face {
font-family: 'KlavikaMedium-Italic';
font-style: normal;
font-weight: normal;
src: local('assets/fonts/klavika/KlavikaMedium-Italic'), url('KlavikaMedium-Italic.woff') format('woff');
}


@font-face {
font-family: 'KlavikaMedium-TF';
font-style: normal;
font-weight: normal;
src: local('../fonts/klavika/KlavikaMedium-TF'), url('../fonts/klavika/KlavikaMedium-TF.woff') format('woff');
}


@font-face {
font-family: 'KlavikaRegular-TF';
font-style: normal;
font-weight: normal;
src: local('KlavikaRegular-TF'), url('KlavikaRegular-TF.woff') format('woff');
}


@font-face {
font-family: 'KlavikaLight-Plain';
font-style: normal;
font-weight: normal;
src: local('../fonts/klavika/KlavikaLight-Plain'), url('../fonts/klavika/KlavikaLight-Plain.woff') format('woff');
}


@font-face {
font-family: 'KlavikaLight-Italic';
font-style: normal;
font-weight: normal;
src: local('KlavikaLight-Italic'), url('KlavikaLight-Italic.woff') format('woff');
}


@font-face {
font-family: 'Klavika Bold Bold';
font-style: normal;
font-weight: normal;
src: local('Klavika Bold Bold'), url('KlavikaBoldBold.woff') format('woff');
}


@font-face {
font-family: 'Klavika Bold Bold Italic';
font-style: normal;
font-weight: normal;
src: local('Klavika Bold Bold Italic'), url('KlavikaBoldBoldItalic.woff') format('woff');
}

body{
	/* font-family: 'KlavikaMedium-TF'; */
	font-family: 'KlavikaLight-Plain';
	overflow-x: hidden;
}
body.modal-open {
	overflow-x: hidden;
}

a{ outline:none!important; }

main{
	overflow-x: hidden;
}
p{
	font-family: 'KlavikaLight-Plain';
	color: #2E2E2E;
}
strong, b{
	font-family: 'KlavikaMedium-TF';
}
header .cintillo{
	background: rgba(245,116,23,1);
	background: -moz-linear-gradient(left, rgba(245,116,23,1) 0%, rgba(209,60,112,1) 100%);
	background: -webkit-gradient(left top, right top, color-stop(0%, rgba(245,116,23,1)), color-stop(100%, rgba(209,60,112,1)));
	background: -webkit-linear-gradient(left, rgba(245,116,23,1) 0%, rgba(209,60,112,1) 100%);
	background: -o-linear-gradient(left, rgba(245,116,23,1) 0%, rgba(209,60,112,1) 100%);
	background: -ms-linear-gradient(left, rgba(245,116,23,1) 0%, rgba(209,60,112,1) 100%);
	background: linear-gradient(to right, rgba(245,116,23,1) 0%, rgba(209,60,112,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f57417', endColorstr='#d13c70', GradientType=1 );
}

header .cintillo p{
	font-family: 'KlavikaMedium-TF';
	letter-spacing: 1px;
}
h1,h2,h3,h4,h5{
	font-family: 'KlavikaMedium-TF';
	letter-spacing: 1px;
}
ul li{
	font-family: 'KlavikaLight-Plain';
}
ul li a{
	color: #2E2E2E;
}
ul li a:hover{
	color: var(--bg-color-1);
}
table.table thead th {
	font-family: 'KlavikaMedium-TF';
}
.btn{
	font-family: 'KlavikaMedium-TF';
}

/* FORM CONTROL */
.form-control{
	font-family: 'KlavikaLight-Plain';
}
.md-form.md-outline.form-lg label {
	font-family: 'KlavikaLight-Plain'!important;
	font-size: 1em;
}
.md-form.md-outline.form-lg .form-control.form-control-lg {
	border-bottom: 2px solid var(--bg-color-1);;
}
.md-form.md-outline input[type="text"]:focus:not([readonly]), .md-form.md-outline input[type="password"]:focus:not([readonly]), .md-form.md-outline input[type="email"]:focus:not([readonly]), .md-form.md-outline input[type="url"]:focus:not([readonly]), .md-form.md-outline input[type="time"]:focus:not([readonly]), .md-form.md-outline input[type="date"]:focus:not([readonly]), .md-form.md-outline input[type="datetime-local"]:focus:not([readonly]), .md-form.md-outline input[type="tel"]:focus:not([readonly]), .md-form.md-outline input[type="number"]:focus:not([readonly]), .md-form.md-outline input[type="search-md"]:focus:not([readonly]), .md-form.md-outline input[type="search"]:focus:not([readonly]), .md-form.md-outline textarea.md-textarea:focus:not([readonly]) {
	border-color: var(--bg-color-1);;
	-webkit-box-shadow: inset 0 0 0 1px var(--bg-color-1);;
	box-shadow: inset 0 0 0 1px var(--bg-color-1);;
}
.md-form.md-outline input[type="text"]:focus:not([readonly]) + label, .md-form.md-outline input[type="password"]:focus:not([readonly]) + label, .md-form.md-outline input[type="email"]:focus:not([readonly]) + label, .md-form.md-outline input[type="url"]:focus:not([readonly]) + label, .md-form.md-outline input[type="time"]:focus:not([readonly]) + label, .md-form.md-outline input[type="date"]:focus:not([readonly]) + label, .md-form.md-outline input[type="datetime-local"]:focus:not([readonly]) + label, .md-form.md-outline input[type="tel"]:focus:not([readonly]) + label, .md-form.md-outline input[type="number"]:focus:not([readonly]) + label, .md-form.md-outline input[type="search-md"]:focus:not([readonly]) + label, .md-form.md-outline input[type="search"]:focus:not([readonly]) + label, .md-form.md-outline textarea.md-textarea:focus:not([readonly]) + label {
	color: #f57c00;
}
/* FORM CONTROL */

::placeholder {
  font-family: 'KlavikaLight-Plain';
  font-size: .9em;
}

.mini-cabecera{
	background: linear-gradient(to right, rgb(245, 116, 23) 0%, rgb(209, 60, 112) 100%);
	color: white;
	font-family: 'KlavikaMedium-TF';
}

.seccion{
	padding: 60px 0px;
}
.text-orange{
	color: var(--bg-color-1)!important;
}
.bg-orange{
	background: var(--bg-color-1);
}
.bg-negro{
	background: #161616;
}
.bg-negro p{
	color: #fff;
}
.bg-negro-dos{
	background: #282828;
}
.degradado-1{
	background: rgba(245,116,23,1);
	background: -moz-linear-gradient(left, rgba(245,116,23,1) 0%, rgba(209,60,112,1) 100%);
	background: -webkit-gradient(left top, right top, color-stop(0%, rgba(245,116,23,1)), color-stop(100%, rgba(209,60,112,1)));
	background: -webkit-linear-gradient(left, rgba(245,116,23,1) 0%, rgba(209,60,112,1) 100%);
	background: -o-linear-gradient(left, rgba(245,116,23,1) 0%, rgba(209,60,112,1) 100%);
	background: -ms-linear-gradient(left, rgba(245,116,23,1) 0%, rgba(209,60,112,1) 100%);
	background: linear-gradient(to right, rgba(245,116,23,1) 0%, rgba(209,60,112,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f57417', endColorstr='#d13c70', GradientType=1 );
}
.espacio{
	margin-top: -73px;
}
.rgba-black-strong, .rgba-black-strong::after {
	background-color: rgba(0, 0, 0, 0.15);
}

.btn-light {
	border-radius: 0px;
}

.bg-secondary {
	background-color: #6c757d !important;
}


/* LOGO */
.logo {
	position: absolute;
	left: 0px;
	right: 0px;
	margin: 0 auto;
}
.logo a{
	margin: 0px;
}


/* Panel de Compras */
#panelModalCarro .modal-header {
	border-bottom: 1px solid #393939!important;
	text-transform: uppercase;
	letter-spacing: 1px;
}
#panelModalCarro .subtitulo{
	letter-spacing: 1px;
}
.tituloi{
	text-transform: uppercase;
	font-size: 16px;
}
/* Fin Panel de Compras */



/* Sidebar */
#slide-out .button-collapse{
	display: flex!important;
	justify-content: flex-end;
	margin: 10px;
	height: auto;
}
#slide-out{
	background-color: #1c1b1b;
}
#slide-out .button-collapse i{
	color: #fff;
	font-size: 24px;
}
.side-nav .collapsible a {
	font-size: .9rem;
	text-transform: uppercase;
	letter-spacing: 1px;
}
.side-nav .social {
	border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.side-nav .collapsible-body a {
	color: #808080;
}
.side-nav .collapsible li a:hover {
	color: var(--bg-color-1);;
}
/* Fin Sidebar */


/* Modal Login y Registro */
.md-form .prefix.active {
	color: #f57c00;
}

.md-form input:not([type]), 
.md-form input[type="text"]:not(.browser-default), 
.md-form input[type="password"]:not(.browser-default), 
.md-form input[type="email"]:not(.browser-default), 
.md-form input[type="url"]:not(.browser-default), 
.md-form input[type="time"]:not(.browser-default), 
.md-form input[type="date"]:not(.browser-default), 
.md-form input[type="datetime"]:not(.browser-default), 
.md-form input[type="datetime-local"]:not(.browser-default), 
.md-form input[type="tel"]:not(.browser-default), 
.md-form input[type="number"]:not(.browser-default), 
.md-form input[type="search"]:not(.browser-default), 
.md-form input[type="phone"]:not(.browser-default), 
.md-form input[type="search-md"], 
.md-form textarea.md-textarea {
	border-bottom: 1px solid #525252;
}

#modalLogin .modal-footer {
	border-top: 1px solid #525252;
}

.modalOscuro .modal-footer {
	border-top: 1px solid #525252;
}

#modalLogin .md-form .form-control {
	color: #b7b7b7;
}

.swal-text {
  text-align: center;
}


/* Menu */
#sumaTotalCantidad{
	position: absolute;
	margin-left: 14px;
	margin-top: -5px;
	height: 20px;
	width: 20px;
	align-items: center;
	display: flex;
	justify-content: center;
}

.dropdown-menu .dropdown-item:active{
	background-color: var(--bg-color-1)!important;
}
.dropdown-menu .dropdown-item:hover{
	background-color: var(--bg-color-1)!important;
}

.navbar .button-collapse i {
	color: #212121;
	font-size: 24px;
}
.navbar .iconos-menu{
	z-index: 9;
}
.button-collapse{
	z-index: 9;
}
.iconos-menu .dropdown-toggle::after {
	margin-left: 0em;
}
.navbar .iconos-menu a:hover i{
	color: #f57c00;
}
.navbar .iconos-menu a i{
	font-size: 24px;
}
a.text-light:hover, a.text-light:focus {
	color: #f57c00 !important;
}
.carrito-btn{
	vertical-align: bottom;
}
/* Fin Menu */



/* Slider */
#slider-home{
	background: #161616;
}

.slide .banner .imagen{
	width: 100%;
	height: 580px;
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	justify-content: center;
}
.slide .banner .marco{
	border: solid 3px #fff;
}
.slide .banner .titulo{
	font-family: 'KlavikaLight-Plain';
	color: white;
	text-align: center;
	background: #00000080; 
	line-height: 20px;
}
.slide .banner .titulo span{
	font-family: 'KlavikaMedium-TF';
	color: white;
}
/* Fin Slider */


/* Introduccion Home */
#introduccion{
	z-index: 1;
	position: relative;
}
/* Fin Introduccion Home */


/* Categoria Home */
.categoria-caja{
	position: absolute;
	height: 100%;
	top: 0px;
	width: 100%;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.categoria-caja .info{
	display: grid;
	text-align: center;
}
.categoria-caja .info span{
	text-transform: uppercase;
	color: white;
	font-size: 1.1em;
	letter-spacing: 1px;
}
.categoria-caja .info .btn{
	letter-spacing: 1px;
}
/* Fin Categoria Home */


/* Servicios Home */
.servicio-caja{
	display: -webkit-flex;
	justify-content: center;
	display: flex;
	align-items: end;
}
.servicio-caja p{
	color: #fff;
}
/* Fin Servicio Home */




/* Categorias */
#categorias h1{
	text-transform: uppercase;
}

.bg-dark p{
	color: #fff;
}

/* Subcateogirias */
.subcategoria .caja .titulo{
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #f57c00;
}
.subcategoria .caja .precio{
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #ffffffab;
}


.breadcrumb li a{
	color: #989898;
	text-transform: uppercase;
	font-size: .8em;
}
.breadcrumb li a:hover{
	color: #fff;
}
.breadcrumb .active{
	color: #f57c00;
	text-transform: uppercase;
	font-size: .8em;
}

.detalles .btn-outline-light {
	color: #e0e0e0d6 !important;
	background-color: transparent !important;
	border: 2px solid #e0e0e040 !important;
}
.carousel-indicators li{
	background-color:transparent !important;
}

#categorias .carousel-thumbnails .carousel-indicators > li {
	margin: 0px 20px;
}
#categorias .formato{
	color: #f57c00;
	text-transform: uppercase;
}



.carrovacio {
	letter-spacing: 1px;
}


/* Footer */
footer{
	padding-top: 60px;
	padding-bottom: 10px;
}
footer h5{
	text-transform: uppercase;
	margin-bottom: 15px;
}
footer ul li{
	line-height: 30px;
}
footer .tarjetas {
	padding:0px;
	list-style: none;
}
footer .tarjetas li {
	display: inline-block;
	font-size: 2em;
	margin-right: 10px;
}
/* Fin Footer */


@media (max-width: 991.98px) {
	.banner .imagen {
    	height: 80vh;
    }

	.banner .titulo {
	    bottom: -20px;
	}

	#panelModalCarro .modal-dialog{
		height: 100%;
		/* margin: 0px; */
		margin-left: auto;
	}

	#panelModalCarro .modal-content{
		height: 100%;
	}
}

@media (max-width: 767.98px) {
	.espacio{
		margin-top: 0px;
	}
}