@import url('/site/css/albano.css');
@import url('/site/css/navigation.css');
@import url('/site/css/cart.css');

html, body, *, form, form * {
	font-family:var(--font);
	color:var(--black);
}

h1,h2,h3,h4,h5 {
	color:var(--black-title);
}

html {
	background:var(--light);
}

.bag-foot-icons {
	display:flex;
	flex-direction:row;
	margin:-4px;
}
	.bag-foot-icons > span {
		display:flex;
		flex-direction:column;
		align-items:center;
		justify-content:center;
		flex:1;
		line-height:1;
		text-align:center;
		font-size:12px;
		padding:12px 8px;
		margin:4px;
		cursor:pointer;
		background:#f7f8f9;
	}
	.bag-foot-icons > span:hover {
		background:#f2f3f4;
	}
		.bag-foot-icons > span i {
			font-size:14px;
			margin-bottom:3px;
			color:var(--albano);
		}

.user-account {
	padding:15px 0;
}
	.user-account h3 {
		display:block;
	}
	.user-account span {
		display:block;
		font-size:14px;
		color:var(--yellow);
	}
	.user-account strong {
		display:block;
		font-size:14px;
	}
	.user-account p {
		display:block;
		font-size:12px;
	}
	.user-account a {
		display:inline-block;
		color:var(--albano);
		font-size:12px;
		padding:5px 0;
	}

.w {
	width:90%;
	max-width:1200px;
	margin:0 auto;
}

.e {
	display:block;
	content:"";
	clear:both;
}
.dynamic-content {
	max-width:800px;
	margin:0 auto;
}
	.dynamic-content p {
		text-align:justify;
		line-height:1.5;
	}
	.dynamic-content.dynamic-content-center,
	.dynamic-content.dynamic-content-center * {
		text-align:center;
	}
.banners {}
	.banner {
		background:no-repeat center center;
		background-size:cover;
		position:relative;
	}
	.banner.banner-wide {
		max-height:300px;
		overflow:hidden;
	}
		.banner .banner-wrap {
			line-height:0;
			max-width:1200px;
			margin:0 auto;
		}
			.banner .banner-wrap img {
				width:100%;
			}
		.banner a {
			display:block;
			position:absolute;
			left:0;
			right:0;
			bottom:0;
			top:0;
		}
		.banner .video-background {
			display:flex;
		    position:absolute;
		    left:0;
		    right:0;
		    bottom:0;
		    top:0;
		    width:100%;
		    height:100%;
		    align-items:center;
		    justify-content:center;
		    overflow:hidden;
		}
			.banner .video-background iframe {
				width:100%;
				height:2000px;
			}
.copy {
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	position:relative;
}
	.copy a {
		color:#fff;
		font-size:14px;
	}
	.copy span {
		color:#fff;
		margin-top:6px;
		font-size:12px;
	}
	.agencia-plane-icon {
		line-height:0;
		position:absolute;
		left:0;
		top:50%;
		font-size: 20px !important;
	}

.newsletter-wrap {
	padding:60px 0;
} 
	.newsletter-wrap .w {} 
	.newsletter {
		position:relative;
		padding-right:310px;
		max-width:500px;
		margin:0 auto;
	}
		.newsletter h4 {
			display:block;
			font-weight:bold;
			font-size:28px;
			color:#fff;
			max-width:600px;
		} 
		.newsletter p {
			display:block;
			font-size:16px;
			color:#fff;
			max-width:600px;
		} 
		.newsletter form {
			display:block;
			position:absolute;
			display:flex;
			flex-direction:column;
			align-items:flex-start;
			right:0;
			top:50%;
			margin-top:-30px;
		}
			.newsletter form input {
				background:#fff;
				border-radius:100px;
				padding:12px 0;
				text-indent:20px;
				width:300px;
				margin-bottom:10px;
			}
			.newsletter form button {
				background:var(--albano);
				color:#fff;
				border-radius:100px;
				padding:12px 20px;
			}
.footer {
	background:var(--albano);
	padding:60px 0;
}

	.footer h4 {
		display:block;
		color:#fff;
		font-weight:bold;
		text-transform:uppercase;
		font-size:20px;
	}
	.footer .footer-body {
		display:flex;
		flex-direction:row;
		margin:30px 0;
		justify-content:space-between;
	}
		.bodegas {
			margin:-15px;
		}
		.bodegas:after {
			display:block;
			content:"";
			clear:both;
		}
			.bodegas .bodegas-column {
				display:block;
				float:left;
			}
			.bodegas .bodega {
				display:block;
				padding:15px;
			}
				.bodegas .bodega strong {
					display:block;
					font-weight:bold;
					color:#fff;
					font-size:16px;
					margin-bottom:10px;
				}
				.bodegas .bodega span {
					display:block;
					color:#fff;
					font-size:13px;
					opacity:0.8;
					margin-top:5px;
				}
				.bodegas .bodega span a {
					color:inherit;
				}
				.bodegas .bodega span:empty {
					display:none;
				}
				.bodegas .bodega > a {
					display:block;
					color:#fff;
					font-size:13px;
					opacity:0.9;
					margin-top:5px;
				}
				.bodegas .bodega > a:hover {
					opacity:1;
				}

		.contact-data {
			width:220px;
		}
			.contact-data strong {
				display:block;
				font-weight:bold;
				color:#fff;
				font-size:16px;
				margin-bottom:10px;
				text-transform:uppercase;
			}
			.contact-data span {
				display:block;
				color:#fff;
				font-size:13px;
				opacity:0.8;
				margin-top:5px;
			}
			.contact-data span:empty {
				display:none;
			}
			.contact-data .social-links {
				margin-top:25px;
			}
				.contact-data .social-links a {
					display:inline-block;
					border-radius:50%;
					background:var(--yellow);
					font-size:20px;
					margin-right:6px;
					color:#fff;
					line-height:0;
					padding:15px 0;
					width:30px;
					text-align:center;
				}
				.contact-data .social-links a:last-child {
					margin-right:0
				}
				.contact-data .social-links a:hover {
					background:var(--yellow-active);
				}

.product {
	display:block;
}
.product.product-static {
	float:none;
	width:auto;
}
	.product .wrap {
		margin:0 10px;
		background:#fff;
	}
	.product .image {
		display:block;
		overflow:hidden;
		border-bottom:1px solid var(--grey);
		position:relative;
	}
		.product .image > div:first-child {
			background:no-repeat center center;
			background-size:cover;
			line-height:0;
			width:100%;
			transition:0.3s ease;
			transform:scale(0.8);
		}
		.product .image:hover > div:first-child {
			transform:scale(0.9);
		}
		.product .image img {
			width:100%;
		}
		.sale {
			display:block;
			position:absolute;
			line-height:1 !important;
			width:auto !important;
			right:0;
			top:0;
			color:#fff;
			background:var(--offer) !important;
			text-transform:uppercase;
			letter-spacing:1px;
			font-weight:bold;
			padding:6px 10px;
    		font-size:15px;
			transform:scale(1) !important;
			z-index:10;
		}
			.sale:after {
				display:inline-block;
				font-size:inherit;
				content:"SALE";
			}
		.heart {
			display:flex;
			position:absolute;
			left:0;
			top:0;
			width:36px;
			height:36px;
			align-items:center;
			justify-content:center;
			z-index:10;
			cursor:pointer;
			font-size:16px;
			color:var(--silver);
			transition:0.3s ease;
		}
		.heart.heart-inline {
			font-size:20px;
		    border-radius:50%;
		    color:var(--grey) !important;
		    padding:0;
		    left:auto;
		    right:100%;
		    margin-right:10px;
		    height:27px;
		    width:20px;
		}
		.heart.heart-inline:hover {
		    color:var(--albano) !important;
		}
		.heart.selected,
		.heart.selected:hover {
		    color:var(--heart) !important;
		}
		.heart:hover {
		    color:var(--grey);
		}
			.heart:after {
				display:block;
				content:"\f004";
				z-index:11;
				font-weight:900;
				font-family:"Font Awesome 5 Free";
				-moz-osx-font-smoothing:grayscale;
			    -webkit-font-smoothing:antialiased;
			    display:inline-block;
			    font-style:normal;
			    font-variant:normal;
			    text-rendering:auto;
			    line-height:1;
			    transition:0.3s ease opacity;
			    pointer-events:none;
			}
	.product .details {
		padding:20px 20px;
		text-align:center;
	}
		.product .details .name {
			display:block;
			text-align:center;
			color:var(--black-active);
			font-size:13px;
		}
			.product .details .name:hover {
				color:var(--black);
			}
		.product .details .price {
			display:block;
			text-align:center;
			font-weight:bold;
			margin-top:15px;
			font-size:18px;
			color:var(--albano);
		}
		.product .details .price.price-warned {
			color:var(--offer);
		}
		.product .details .price-offer {
			display:inline-block;
			text-align:center;
			position:relative;
			font-weight:bold;
			font-size:14px;
			color:var(--yellow);
		}
			.product .details .price-offer:before {
				display:block;
				content:"";
				border-top:1px solid var(--yellow);
				position:absolute;
				left:-5px;
				right:-5px;
				top:50%;
				transform:rotate(7deg);
			}

.section {
	padding:60px 0;
}
	.section .head {
		margin-bottom:40px;
	}
	.section.section-main .head {
		margin-bottom:20px;
	}
		.section .head h2 {
			color:var(--black-active);
		    font-weight:bold;
		    text-transform:uppercase;
		    font-size:20px;
		    letter-spacing:4px;
		}
		.section.section-main .head h2 {
			text-align:center;
			font-size:20px;
		}
	.section .body {
		display:flex;
		flex-direction:row;
		align-items:flex-start;
	}
		.section .body .filter {
			display:block;
			width:300px;
			padding-right:50px;
			box-sizing:border-box;
		}
		.section .body .products {
			display:block;
			flex:1;
		}
			.section .body .products .results {}
				.section .body .products .results .product {
					float:left;
					width:33.333%;
					padding:10px 0;
				}
				.section .body .products .results.results-column-1 .product {
					float:none;
					width:auto;
				}
				.section .body .products .results.results-column-2 .product {
					width:50%;
				}
				.section .body .products .results.results-column-3 .product {
					width:33.33333%;
				}
				.section .body .products .results.results-column-4 .product {
					width:25%;
				}
				.section .body .products .results:after {
					display:block;
					content:"";
					clear:both;
				}

.loader-box {
	position:relative;
}
	.loader-box:after {
		display:block;
		content:"";
		position:absolute;
		opacity:0;
		left:0;
		right:0;
		top:0;
		bottom:0;
		border-radius:inherit;
		z-index:10;
		background:inherit;
	    backdrop-filter:blur(0);
	    transition:0.3s ease all;
	    pointer-events:none;
	}
	.loader-box:before {
		color:var(--yellow);
		display:block;
		content:"\f110";
		position:absolute;
		opacity:0;
		left:50%;
		top:50%;
		-webkit-animation:fa-spin 1s steps(8) infinite;
		animation:fa-spin 1s steps(8) infinite;
		z-index:11;
		font-weight:900;
		font-family:"Font Awesome 5 Free";
		-moz-osx-font-smoothing:grayscale;
	    -webkit-font-smoothing:antialiased;
	    display:inline-block;
	    font-style:normal;
	    font-variant:normal;
	    text-rendering:auto;
	    line-height:1;
	    transition:0.3s ease opacity;
	    pointer-events:none;
	}
	.loader-box.loader-box-active:after {
		opacity:0.7;
	    pointer-events:inherit;
	    backdrop-filter:blur(10px);
	}
	.loader-box.loader-box-active:before {
		opacity:1;
	}

.menu-button {
	display:none;
}
/* Mobile version */
@media only screen and (max-width:480px), only screen and (max-device-width:480px) {
	.section {
		display:30px 0;
	}
	.bag-position {
	    position: fixed !important;
	    right: 0;
	    left: 0;
	    top: 50px;
	    z-index: 1000;
	    bottom: 0px;
	}
		.cart .bag-wrap {
		    height: 100%;
		}
			.bag {
			    height: 100%;
			}

	.navigation-bar {
	    height:80px;
	}
	.navigation .logo {
	    font-size:18px;
	}
	.navigation .menu {
	    display:flex;
	    flex-direction:column;
	    position:fixed;
	    left:0;
	    right:0;
	    top:80px;
	    background:#fff;
	    border-top:1px solid #dde8f3;
	}
		.navigation .menu a {
		    font-size:14px;
		    padding:0 27px;
		    transition:0.2s;
		    pointer-events:none;
		    opacity:0;
		}
		.navigation .menu.open a {
		    padding:30px 27px;
		    pointer-events:all;
		    opacity:1;
		}
	.newsletter form {
	    position: relative;
	    margin-top: 30px;
	}
	.newsletter {
	    padding-right: 0;
	    width: 80%;
	}
	.footer .footer-body {
	    flex-direction: column;
	}
	.bodegas .bodegas-column {
	    float: none;
	    display: flex;
	    flex-direction: row;
	}
		.bodegas .bodega {
		    flex: 1;
		}
	.contact-data {
	    width: auto;
	    margin-top: 30px;
	}
	.catalog-filter {
		position: fixed;
	    left: -300px;
	    top: 80px;
	    bottom: 0;
	    background: #fff;
	    z-index: 10000000;
	    padding: 40px;
	    transition:0.3s;
	}
	.catalog-filter.open {
		left:0;
	}
	.stdin-modal .stdin-modal-content {
	    padding: 20px;
	}
	.menu-button {
		display: flex;
	    padding:0 0;
	    height: 40px;
	    width:30px;
	    align-items: center;
	    justify-content: center;
	    margin-left: 20px;
	    font-size:26px;
	}
		.menu-button .fa-bars {
			display:block;
		}
		.menu-button .fa-times {
			display:none;
		}
		.menu-button.open .fa-bars {
			display:none;
		}
		.menu-button.open .fa-times {
			display:block;
		}
	.agencia-plane-icon {
	    position:relative;
	    line-height:1;
	    margin-top:20px;
	}

	.navigation .menu a b {
	    position: relative;
	    left: auto;
	    margin-left: unset;
	    bottom: auto;
	    display: inline-block;
	    margin-left: 20px;
	    display:none;
	}
	.navigation .menu.open a b {
	    display:inline-block;
	}
	.navigation .menu a b:after {
	    left: 0;
	    top: 50%;
	    margin-top: -4px;
	}
}