/*

TemplateMo 559 Zay Shop

https://templatemo.com/tm-559-zay-shop

---------------------------------------------
Table of contents
------------------------------------------------
1. Typography
2. General
3. Nav
4. Hero Carousel
5. Accordion
6. Shop
7. Product
8. Carousel Hero
9. Carousel Brand
10. Services
11. Contact map
12. Footer
13. Small devices (landscape phones, 576px and up)
14. Medium devices (tablets, 768px and up)
15. Large devices (desktops, 992px and up)
16. Extra large devices (large desktops, 1200px and up)
--------------------------------------------- */

/* TÍPOGRAPHY */

.fs{
  font-family: "Lato", sans-serif;
  font-weight: 900;
  font-style: italic;
  text-align: center;
}

.fs-1 {
	font-family: "Lato", sans-serif;
	font-weight: 400;
	justify-content: center;

}

.fs-2{
	font-family: "Mate SC", serif;
	font-weight: 600;
	font-size: 2em !important;
	text-align: left;
	color: #c6721e;
	text-shadow: 2px 2px 5px #758398;
}

.fs-2_center{
	font-family: "Mate SC", serif;
	font-weight: bolder;
	text-align: center;
	color: #c6721e;
	text-shadow: 2px 1px 1px #000;
	margin-top: 10px;
}


.tangerine-regular {
  font-family: "Tangerine", serif;
  font-weight: 400;
  font-style: normal;
}

.tangerine-regular-card {
  font-family: "Tangerine", serif;
  font-weight: 400;
  font-style: normal;
}

.tangerine-bold {
  font-family: "Tangerine", serif;
  font-weight: 700;
  font-style: normal;
}


.h1 {
  font-family: 'Lato', sans-serif;
  font-size: 48px !important;
  font-weight: 200 !important;
}
.h2 {
  font-family: 'Lato', sans-serif;
  font-size: 30px !important;
  font-weight: 300;
}
.h3 {
  font-family: 'Lato', sans-serif;
  font-size: 22px !important;
}



#text_carousel{
	font-family: 'Lato', sans-serif;
	font-size: 48px !important;
	font-weight: 400;
	color: #fff;
	text-shadow: 1px 1px 2px #758398;
}

#text_carousel2{
	font-family: 'Lato', sans-serif;
	font-size: 48px !important;
	font-weight: 100;
	color: #fff;
	text-shadow: 1px 1px 2px #758398;
}

/* Carousel Hero */
#carousel .carousel-indicators li {
  margin-top: -50px;
  background-color: #59ab6e;
}
#carousel .carousel-control-next i,
#carousel .carousel-control-prev i {
  color: #59ab6e !important;
  font-size: 2.8em !important;
}
/* Carousel Brand */
.carousel .h1 {
  font-size: .5em !important;
  color: #000 !important;
}

/* GENERAL */
.text-light { color: #cfd6e1 !important;}
.text-success { color: #59ab6e !important;}

#logos {
	width: 100%;
}

#logos2 {
	width: 60%;
}

.list-group-horizontal {
	justify-content: center;
}

/* NAV */
.navbar{
	background-color: #c6721e;
}

#nav_top { min-height: 40px;}
#nav_top { display:flex !important; }
#nav_top { align-items:center; }
#nav_top { background-color: #fff}
#main_nav a { color: #fff; font-size: 1.3em !important; font-weight: 500; text-shadow: 2px 2px 5px #000;}
#main_nav a:hover { color: #fff;}
#main_nav .navbar .nav-icon { margin-right: 20px;}
#social_nav a { color: #c6721e; text-shadow: 2px 2px 5px #758398; font-size: 1.2em !important;}
#social_nav { display:flex; }

/* JUMBOTRON */

.jumbotron {
	background-image: url('../img/jumbo4.webp'); 
	background-repeat: no-repeat; 
	background-size: cover;
	background-attachment: fixed;
}
/* DROPDOWNS */
.dropdown-menu li {
	position: relative;
}

.dropdown-menu.show {	
	background-color: #c6721e;
	--
}

.dropdown-menu .dropdown-submenu {
	display: none;
	position: absolute;
	left: 100%;
	top: -7px;
	--bs-body-bg: #c6721e;
	--bs-dropdown-shadow: #fff;
}
.dropdown-menu .dropdown-submenu-left {
	right: 100%;
	left: auto;
}
.dropdown-menu > li:hover > .dropdown-submenu {
	display: block;
}

/* CARDS */

.card_personalizada {
	width: 300px;
	height: 480px;
}

#card-style {
	justify-items: center;
}

#cabildo-card{
	text-align: center;
}

#cabildo-card-border{
	 border-style: solid;
	 border-color: #c6721e;
	 border-width: 5px;
	 box-shadow: 8px 5px 5px silver;
}

/* DIVISION */
#division {
	min-height: 200px;
	background-attachment: fixed;
	background-repeat: no-repeat;
	text-align: center;
	background-color: #c6721e;
	align-content: center;
	margin-top: 10px;
	margin-bottom: 10px;
}


/* HOME HEADING */

#home-heading {
    position: relative;
    min-height: 150px;
    background: url('../img/jumbo4.jpg');
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    text-align: center;
    color: #silver;
}

.dark-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
}

/* FOOTER */

#main-footer {
	background-color: #fff;
	color: #c6721e;
}

#pie-pagina {
	background-color: #000;
	color: #fff;
}

/* X-Small devices (portrait phones, less than 576px)
 No media query for `xs` since this is the default in Bootstrap */

/* Small devices (landscape phones, 576px and up) */

@media (min-width: 576px) {
	.h1 { font-size: 1em !important;}
	#text_carousel_fondoblanco {
		font-family: 'Lato', sans-serif;
		font-size: 24px !important;
		font-weight: 400;
		color: #485775;
		text-shadow: 1px 1px 2px #758398;
	}
}

/* Medium devices (tablets, 768px and up) */

@media (min-width: 768px) {
	#main_nav .navbar-nav {max-width: 450px;}
	.p-mobile {
		font-size: 1.2em !important;
	}
	#text_carousel_fondoblanco {
		font-family: 'Lato', sans-serif;
		font-size: 24px !important;
		font-weight: 400;
		color: #485775;
		text-shadow: 1px 1px 2px #758398;
	}
}

/* Large devices (desktops, 992px and up) */

@media (min-width: 992px) {
	#main_nav .navbar-nav {max-width: 550px;}
	.p-mobile {
		font-size: 1.3em !important;
	}
	#carousel .carousel-item {min-height: 30rem !important;}
		#text_carousel_fondoblanco {
			font-family: 'Lato', sans-serif;
			font-size: 48px !important;
			font-weight: 400;
			color: #485775;
			text-shadow: 1px 1px 2px #758398;
	}
}

/*  Extra large devices (large desktops, 1200px and up) */

@media (min-width: 1200px) {
	#main_nav .navbar-nav {max-width: 680px;}
}


/* XX-Large devices (larger desktops, 1400px and up) */

@media (min-width: 1400px) {}

