@charset "utf-8";
/* CSS Document
font-family: 'Lato', sans-serif;
font-family: 'Oswald', sans-serif;
font-family: 'Bebas Neue';

	Color wall  theme:  
	////////////////////// 
dark turqueise #002F2F
meddle turqueise #008080
light turquese #00c0c0
*/ 
html{
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	
	scroll-behavior: smooth;
}
body{
	margin: 0;
	padding: 0;
	font-family: 'Montserrat', sans-serif;
	scroll-behavior: smooth;
	overflow-x: hidden;
}
.re{
	font-size: 15px;
font-family: 'Lato', sans-serif;
	font-weight: 200;
	color: #000;
}
/* Estilo para Webkit (Chrome, Safari) */
html::-webkit-scrollbar {
  display: none
}
html::-webkit-scrollbar-track {
    background: transparent; /* Color del fondo de la scrollbar */
}
html::-webkit-scrollbar-thumb {
    background: #fff; /* Color del "pulgar" de la scrollbar */
    border-radius: 6px; /* Bordes redondeados */
	box-shadow: 0px 0px 0px 0px #aaa;
	transition: 1s ease;
}
html::-webkit-scrollbar-thumb:hover {
    background: #eee; /* Color cuando se pasa el ratón */
} 
 
/*████ keyframes for moves ████████████████████████████████████████████████████████*/
@keyframes x {
  0% {
	 opacity: 0;
	  margin-top: 33px;
  }  
  100%{ 
	  opacity: 1;
	  margin-top: 0;
  }
}
@keyframes sideNavAnimation{
	0%{ 
		margin-left: 0vw; 
	} 
	100%{ 
		 margin-left: 100vw;  
	}
}
@keyframes sideNavContentAnimation{
	0%{ 
		opacity: 0; 
	}
	70%{ 
		  opacity: 0;  
	} 
	100%{ 
		  opacity: 1;  
	}
}
.SEO{
	display: none;
	height: 0px;
}

/*████ Start Desktop version  █████████████████████████████████████████████████████*/
/*##########################################################
 0.0 header
##########################################################*/ 
#header {
            position: fixed; /* Make the header fixed */
            top: -10vh; /* Start off-screen (hidden) */
            left: 0;
            right: 0;
            height: 10vh;
            background-color: #fff;
			border-bottom: 1px solid #eee; 
            transition: top 0.3s; /* Smooth transition for the header */
			z-index: 2;
			padding: 0 10vw;
	display: inline-flex;
	box-shadow: 1px 1px 121px 3px #ddd;
        }
.logotype{
	display: inline-flex; 
	height: 10vh;
	width: auto;
	margin: 0;
	padding: 0 13px;
}
.imgLogotype{
	width: 6vh;
	height: 6vh;  
	border-radius: 8px; 
	margin: 2vh 13px 2vh 0;
}
.nameLogotype{ 
	font-family: "Rubik";
	color: #002F2F;
	font-size: 33px;
	margin: auto 0;
}

/*##########################################################
 0.0 Top
##########################################################*/ 
 
#sideNav{ 
		display: none; 
	}	 
#top{
	width: 100%;
	height: auto; 
	border-bottom: 1px solid #eee;
	background-color: #f6f6f6;
}
.topHeader{
	margin: 0 10%;
	width: 80%;
	height: auto; 
	display: block;
}
.topHeaderItem{
	width: auto;
	height: auto;
	display: inline-flex;
	padding: 8px;
	float: right;
	text-decoration: none;
	background-color: #fff;
	border-radius: 13px;
	margin: 1vh 3px;
	box-shadow: 1px 1px 5px 1px #ccc;
}
.topHeaderItem img{
	width: 21px;
	height: 21px;
	margin: 5px;
}
.topHeaderItem p{
	margin: 5px;
	color: #333;
}
.bottomHeader{
	margin: 0 0% 0 0%;
	width: 100%;
	height: auto;  
	background-color: #fff;
	display: inline-flex;
}  
.desktopMenu{ 
	width: auto;
	height: auto; 
	position: relative;
	float: right;
	display: inline-flex; 
	margin: auto 0 auto auto;  
	}
a.dropbtn{ 
	transform: scale(1,1);
	font-family: 'Rubik';
	letter-spacing: 1px; 
	font-size: 17px;
	font-weight: 500;
	color:  #002F2F;
	height:40px;
	margin:  5px 21px;
	padding: 5px 0px;
	text-decoration: none;
	width: auto;
	}
.dropbtn{
	display: inline-flex;
}
.dropbtn p{  
	margin: auto;
	padding: auto;
	}
.dropbtn img{ 
	width: 21px;
	height:21px;
	margin: auto 5px;
	padding: auto;
	}
.dropdown-content{
	text-align: left; 
	display: none;
	position: absolute;
	height: auto;
	background-color: #fff; 
	left: -8px;
	top: 3px;
	animation: 0.5s ease x;
	z-index: 1;
}
.dropdown-content a{  
	margin: 13px;
	padding: 8px 3px 0px 3px;
	width: auto;
	height: 30px; 
	text-align: left;
	text-decoration: none;
	color: #000;
	transition: .5s ease;   
	animation: zoom 1s ease;
	border-bottom: 1px solid #fff;
	display: inline-flex;
}
.dropdown-content a:hover{
	background-color: #eee;
	border-bottom: 1px solid #008080;
} 
.dropdown-content img{
	width: 33px;
	height: 21px;
	margin: 0 5px;
}
.dropdown-content p{
	margin: 0 auto 20px auto;
	font-size: 17px;
}
.dropbtn:hover + .dropdown-content {
  display: inline-grid;
}
.dropdown-content:hover{
	 display: inline-grid
} 
#mobileMenu{
	display: none;
}	 
/* menu icons */
.menuIcons{
	width: 80%;
	height: auto;
	margin: auto; 
	display: inline-flex;
}  
.menuIconsBox{
	width: auto;
	height: auto;
	display: inline-flex; 
}
a.menuIconsItem{
	width: auto;
	height: auto; 
	margin: 0px 8px;
	text-align: center;
	text-decoration: none; 
	color: #999;
	font-family: "Rubik";
	padding: 3px 13px;
}
a.menuIconsItem:hover{
	text-decoration: none;
	color: #00c0c0;
	background-color: #eee;
	border-radius: 13px;
}
.menuIconsItem img{
	width: 7vh;
	height: 7vh;
}
 

/*##########################################################*/
 /*   0.1 items  */
/*##########################################################*/	
.items{
	width: 100%;
	height: auto;
}
.titleItems{	 
	
	position: relative;
	color: #008080;  
	font-family: "Rubik";
	font-weight: 500; 
	font-size:33px;
	margin: 1 3% 0 3%; 	
}
.itemsInside{
	width: 90%;
	height: auto; 
	margin: 2% 5%;	 
}
.item{
	text-decoration: none;
	border-radius: 21px; 
	display: flex;
	width: 100%
}
.itemImg{
	width: 50%;
	height: 466px;
}
.itemContent{
	width: 50%;
}
.itemTitle{
	position: relative;
	color: #008080;  
	font-family: "Rubik";
	font-weight: 500; 
	font-size:21px;
	margin: 0 3%; 	
}
.text{
	position: relative;
	color: #002f2f;   
	font-weight: 500; 
	font-size:21px;
	margin: 0 3%;  
	transition: 1s ease all;
	opacity: 0;
	height: 0;
}
.icons{
	display: flex;
	width: 100%;
}
.icons img{
	width: 33px;
	height: 33px;
	margin: 0% 0% 3% 3%;
} 
.icons p{
	position: relative;
	color: #002f2f;  
	font-weight: 500; 
	font-size:21px;
	margin: 0% 0% 3% 1%;
}
.open{
	width: auto;
	height: 70px;	
	font-size: 21px;
	color: #008080;
	background-color: #eee;
	outline: 0px solid #fff;
	border:0px solid #fff;
	margin: 40px auto;
	border-radius: 33px;
	cursor: pointer;
	padding: 13px;
	transition: 1s ease;
}
.open:hover{
	background-color: #ccc;
	color: #00c0c0;
}
#viewer{
	width: 100%;
	height: 100%; 
	display:none;
	z-index: -9;
	position: fixed;
	top: 0;
	left: 0;
	overflow-y: scroll;
	overflow-x: hidden;
	background-color: #fff;
}
.closeViewer{
	width: 100%;
	height: 10vh; 
	position: fixed;
	background-color: white;
	border-bottom: 1px solid #aaa;
}
.closeViewer a{
	width: 10vh;
	height: 10vh; 
	right: 2vw;
	position: absolute;
	text-align: center;
	font-size: 33px;
	font-family: "Rubik";
	color: #008080;
	cursor: pointer;
	text-decoration: none;
}
.viewerInside{
	display: flex;
    flex-wrap: wrap; /* Permite que los elementos envuelvan hacia abajo */
    max-width: 100%; /* Ancho máximo del contenedor */
    gap: 0px; /* Espacio entre los elementos */
}
.viewerItem{
	flex: 2 2 calc(50% - 10px); /* Cada elemento ocupará el 50% del ancho menos el espacio del gap */
    box-sizing: border-box; /* Incluye el padding y el borde dentro del ancho */
    text-align: center; /* Centra el texto */
	padding: 0 0px;
}
.viewerItem img{
	width: 100vh;
	height: 90vh;
}
.boxFlex{
			width: 100%;
			height: auto;
			display: flex;
		}	
.itemFlex{
			width: 50%;
			height: auto;
		}
.slider {
    width: 400px;
	margin: 0 5%;	
	height: 400px;
    overflow: hidden; 
	border-radius: 13px;
}
.slides {
    display: flex;
    transition: transform 0.5s ease-in-out;
	height: 400px;
}
.slides img {
    width: 100%;
    height: 100%;
	border-radius: 13px;
}

/*##########################################################*/
 /*   0.0 Index */
/*##########################################################*/	
.index{
	width: 100%;
	height: 75vh;
	background-image: url("../../index.jpg");
	background-size: 100vw 100vh;
	position: relative;
	padding-top: 20vh;
}
.indexMotor{
	width: 80vw;
	height: auto;
	background-color: white;
	border-radius: 21px;
	margin: 10vh 10vw;
	position: absolute; 
}
.indexTitle{
	width: 100%;
	height: 8vh;
	background-color: #fff;
	border-bottom: 1px solid #aaa;
	margin: 0;  
	border-top-left-radius: 21px;
	border-top-right-radius: 21px; 
	padding: 0;
}
.indexTitle p{ 
	color: #007bff; 
	position: relative;
	font-weight: 900; 
	font-size: 21px;
	margin-left: 13px;
	top: 13px; 
}
.indexGears{
	width: 100%;
	height: auto; 
	display: inline-flex;
}
.indexItem{
	width: 25%;
	height: 30vh; 
	display: inline-grid; 
}
.indexItem p{	 
	position: relative;
	color: #666;  
	font-family: "Rubik";
	font-weight: 500; 
	font-size: 21px; 
}
.indexItem img{	 
	width: 21px;
	height: 21px;
	margin: 21px 5px 21px 13px; 
}  
.indexItem input{
	height: 10vh; 
	position: relative;
	margin-left: 2%;
	margin-top: -70px;
	width: 90%;
	border: 1px solid #aaa;
	border-radius: 13px;
	color: #666;
	font-size: 17px;
	padding-left: 13px;
	transition:  1s ease;
}
.indexItem input:focus{
	outline: solid 1px #007bff;
}
.indexGears button{
	height: 8vh;
	margin: auto;
    display: none; 
    width: auto;
    padding: 13px 21px; 
    background-color: #008080;
    color: #fff;
    border: none;
    cursor: pointer;
    border-radius: 21px;
	transition: 1s ease;
	font-weight: 400;
	font-size: 21px;
	font-family: "Rubik";
	
}
.indexGears button:hover{
	height: 8vh;
	margin: auto;
	
    display: block; 
    width: auto;
    padding: 13px 21px; 
    background-color: #005C5C;
    color: #fff;
    border: none;
    cursor: pointer;
    border-radius: 21px;
	
	font-weight: 400;
	font-size: 21px;
	font-family: "Rubik";
	
}
/* The container must be positioned relative: */
.custom-select {
  position: relative; 
	width: 96%;
	margin-top: -70px;
}
.custom-select select {
  display: none; /*hide original SELECT element: */
	z-index: 0;
	border: 1px solid #aaa;  
	  
}
.select-selected { 
	border-radius: 13px; 
	
  background-color: #fff;
	color: #333; 
	position: relative;
	margin-left: 2%;
	margin-top: 0px; 
	border: 1px solid #aaa;  
	font-size: 17px;
	padding-left: 13px;
	padding-top: 21px;
	height: 7vh;
	transition:  1s ease;
 	z-index: 0; 
	
}
/* Style the arrow inside the select element: */
.select-selected:after {
  position: absolute;
  content: "";
  top: 14px;
  right: 10px; 
  height: 100%;  
	border: 0px solid #aaa; 
	margin-left: 2%;
	margin-top: 0px; 
	border-radius: 13px;
	color: #666;
	font-size: 17px;
	padding-left: 13px;
	transition:  1s ease;	z-index: 0;width: 100%;
}
/* Point the arrow upwards when the select box is open (active): */
.select-selected.select-arrow-active:after {  	
	border: 0px solid #aaa;
  top: 7px;
}
/* style the items (options), including the selected item: */
.select-items div,.select-selected {
  color: #666; 
  cursor: pointer; 
height: 30px;
	padding: 15px;
	z-index: 1;
}
/* Style items (options): */
.select-items {
  position: absolute;
  top: 50px;
  left: 2%;
  right: 0; 
	border: 0px solid #aaa;	 
		background-color: #EDF4F4;	
	z-index: 2;
}
/* Hide the items when the select box is closed: */
.select-hide {
  display: none;
}
.select-items div:hover, .same-as-selected {
  background-color: #fff;
}

/*##########################################################*/
 /*   0.0 Calendar  */
/*##########################################################*/	
#calendar0{
	display: none;
	z-index: -1;
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	background-image: -o-linear-gradient(37rad,rgba(185,155,215,0.8),rgba(255,255,255,0.5), rgba(112,187,214,0.61)); /*Opera*/
		background-image: -moz-linear-gradient(37rad,rgba(185,155,215,0.8),rgba(255,255,255,0.5), rgba(112,187,214,0.61)); /*Firefox*/
		background-image: -webkit-linear-gradient(37rad,rgba(185,155,215,0.8),rgba(255,255,255,0.5), rgba(112,187,214,0.61)); /*Safari & Chrome*/
		background-image: -ms-linear-gradient(37rad,rgba(185,155,215,0.8),rgba(255,255,255,0.5), rgba(112,187,214,0.61));/*IE/*/
	    
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
}
.titleCalendar{
	width: 100vw;
	height: 10vh;
	background-color:  #EDF4F4;
	display: inline-flex;
}
.titleCalendar p{
	width: 80vw;
	height: 10vh; 
	color: #007bff; 
	position: relative;
	font-weight: 900; 
	font-size: 21px; 
	padding-left: 10vw;
}
.titleCalendarClose{
	width: 20vw;
	height: 10vh; 
	color: #666; 
	position: relative;
	font-weight: 900; 
	font-family: "Rubik";
	font-size: 21px; 
	padding-top: 13px;
}
.calendar {
    width: 35vw;
    margin: 1vh 32.5vw;
    border: 1px solid #ccc;
	border-radius: 21px;
    padding: 20px;
	background-color: white;
}
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.header h4{
	color: #aaa;
	font-size: 21px;
}
.header button{
	font-family: "Rubik";
	 background-color:  #EDF4F4; /* Color de fondo */
            color: #00c0c0; /* Color del texto */
            border: none; /* Sin borde */
            border-radius: 33px; /* Bordes redondeados */
            padding: 10px 20px; /* Espaciado interno */
            font-size: 33px; /* Tamaño de la fuente */
            cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
            transition: background-color 0.3s ease; /* Efecto de transición */
}
.days {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}
.day {
    width: 5vw;
    text-align: center;
}
.dates {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
}
.date {
    width: 5vw;
    height: 5vw;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
}
.date:hover {
    background-color: #f0f0f0;
}
 


/*##########################################################*/
 /*   0.1 Footer  */
/*##########################################################*/		
.footer{  
		width: 97vw;
		height: auto; 
		background-color: #EDF4F4;	
	margin: 1vh 1vw;
	border-radius: 13px;
	}		
.box_footer_son {
		margin-top: 13px; 
	}
.box_footer_son a{
	margin: 5px 0;
	color: blue;
		text-decoration: none;
	}
.title{
	color: #000;
	font-family: "Rubik";
}
.box_footer_son img{
	width: 233px;
	height: 233px;
	}
.box_footer_father{
	display: inline-flex;
	width: 100%;
	height: auto;
		}
.box_footer_son{
	display: inline-grid;
	width: 20%;
	margin: 2.5%;
	height: auto;
		}
.div-flex{
	display: inline-flex;
}
.flex{
	display: inline-flex;
}
.div-flex img{
	width: 36px;
	height: 36px;
	margin: 1px;
}
.div-flex a{ 
	text-decoration: none;
	margin: 8px  ;
}

/*##########################################################*/
 /*   0.1 Bottoms  */
/*##########################################################*/	
.bottom{ 
	border-top: 2px solid  #D5E5E5;
	width: 80vw;
	height: auto;
	margin: 0 10vw;
	text-align: center;
	padding: 13px;
}
 



/*##########################################################*/
 /*   0.1 Cart  */
/*##########################################################*/	
.cart{
	width: 100px;
	height: 100px;
	position: fixed;
	background-image: linear-gradient(#00c0c0,#008080);
	bottom: 10%;
	right: 0;
	z-index: 99;
	text-decoration: none;
	border-bottom-left-radius: 13px;
	border-top-left-radius: 13px;
	text-align: center; 
}
.count{
	font-size: 21px;
	font-weight: 900; 
	margin-left: 45px;
	margin-top: 35px;
	position: absolute;
	color: goldenrod;
}
.cart img{
	width: 55px;
	height: 55px;
	margin-top: 21%;
}









/* Mobile V 0.0.1  */
@media (max-width: 767px){
/*##########################################################
 0.0 header
##########################################################*/ 
#header {
            position: fixed; /* Make the header fixed */
            top: -10vh; /* Start off-screen (hidden) */
            left: 0;
            right: 0;
            height: 10vh;
            background-color: #fff;
			border-bottom: 1px solid #eee; 
            transition: top 0.3s; /* Smooth transition for the header */
		 
			padding: 0 0vw;
			display: inline-flex;
        }
 
/*##########################################################
 0.0 top
##########################################################*/ 
#top{
	width: 100%;
	height: auto;
	padding: 13px 0 0 0 ;
	border-bottom: 1px solid #eee;
}
.topHeader{
	width: 100%;
	height: 10vh;
	margin: 0; 
	border-bottom: 1px solid #eee;
	display: inline-flex;
	background-color: #fff;
	position: absolute;
	top: 0; 
	
}
.topHeaderItem{
		display: none;
	height: 0;
	}	
.bottomHeader{
	margin: 0 0% 0 0%;
	width: 100%;
	height: 100%; 
	display: inline-flex; 
}	
.desktopMenu{  
	display:none;  
}	  
#mobileMenu{  
	display: flex;
	margin: auto 1% auto auto;
	padding: 0;
	text-decoration: none;
	position: absolute; 
	right: 2vw;
	top: 1vh;
	width: 8vh;
	height: 8vh;
}	
#menu{
	border-radius: 5px;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	}	
	
/* menu icons */
.menuIcons{
	width: 95%;
	height: auto;
	margin: auto;  
	padding-top: 13px;
	margin-top: 6vh;
	padding-bottom: -5vh;
	overflow-x: scroll;
	display: inline-flex;  
} 
/* Estilo para Webkit (Chrome, Safari) */
.menuIcons::-webkit-scrollbar {
    height: 5px;
}
.menuIcons::-webkit-scrollbar-track {
    background: transparent; /* Color del fondo de la scrollbar */
}
.menuIcons::-webkit-scrollbar-thumb {
    background: #fff; /* Color del "pulgar" de la scrollbar */
    border-radius: 6px; /* Bordes redondeados */
	box-shadow: 1px 1px 5px 3px #aaa;
	transition: 1s ease;
	width: 3px;
}
.menuIcons::-webkit-scrollbar-thumb:hover {
    background: #eee; /* Color cuando se pasa el ratón */
} 		
.menuIconsBox{
	width: 100%;
	height: auto;
} 
a.menuIconsItem{
	width: 25%;
	height: auto; 
	margin: 5px 8px;
	text-align: center;
	text-decoration: none;  
	padding:  3px;
}
a.menuIconsItem:hover{
	text-decoration: none;
	color: #00c0c0;
	background-color: #eee;
	border-radius: 13px;
}	
a.menuIconsItem p{ 
	margin: 0px ; 
	padding: 0px;
}
.menuIconsItem img{
	width: 6vh;
	height: 6vh;
	margin: 0px;
	}
 	
/*SIDENAV for mobile*/	
#sideNav{
		width: 100%;
		height: 100%; 
		display: block;
		position: fixed; 
		top: 0;
	    transition:  0.3s ease;
		background-color: #fff;
	   margin-left: 100vw;
	}	
#sideNavContent{
		width: 100%;
		height: 100%;   
		background-color: transparent; 
	}
.sideNavInside{
		width: 100%;
		height: 100%;
		margin: 0; 
		overflow: hidden; 
		background-color: transparent;
	}
.sideNavTop{
		width: 100%;
		height: auto;
		background-image: linear-gradient(rgba(255,255,255,1),rgba(255,255,255,1));
		backdrop-filter: blur(2px);
		overflow-y: hidden;
	}
.sideNavTopBar{
		width: auto;
		height: auto; 
		margin: 8px;
		float: right;
		overflow-y: hidden;
		display: inline-flex;
	}
.sideNavTopBarBall{
		width: 33px;
		height: 33px;
		float: right;
		background-image: linear-gradient(0rad,#ccc,#eee);
		border-radius: 50%;
		margin: 5px;
	}
.sideNavTopBarCloseBall{
		margin: 8px 5px 5px 5px;
		width: 33px;
		height: 33px;
		float: right;
		background-image: linear-gradient(45rad,#c90000,#d90000);
		border-radius: 5px;
		text-decoration: none;
	display: flex;
	}
.sideNavTopBarCloseBall p{ 
		margin: 1px auto auto auto;
	 	color: white;
		display: block;
	    font-size: 1.5em;
		font-weight: 600;	
	}	
.sideNavBody{ 
	width: 200%;
		height: auto;
		background-color: transparent;
		display:inline-flex;
		border-top: 1px solid #ddd;
		overflow-y: hidden; 
	}
.sideNavimg{
		width: 30vh;
		height:30vh;
	margin: 8px auto 0 auto;
	} 	
#sideNaveFirstMenu{
		width: 100%;
		height:100vh;
		background-color: #eee; 
		position: relative;
		overflow: hidden;
	}
.sideNavItem{  
		height: 60px;
		display: flex;
		text-decoration: none; 
		overflow-y: hidden; 
	margin:  0px 21px;
	padding: 0px;
	}
.sideNavItem img{
		overflow-y: hidden;
		width: 21px;
		height: 21px;
		padding: 5px 5px;
	}
.sideNavItem p{
		margin-top: 8px;
		overflow-y: hidden;
		color: #666;
		padding: -1px 5px 0px 5px;
		font-weight: 700;
		font-size: 17px;
		font-family: 'Rubik', sans-serif;
	} 
.sideNavActualItem{
		width: 99%; 
		height: 50px;
		display: inline-flex;
		margin: 3px 0px;
		padding: 5px;
		background-color: white;
		text-decoration: none; 
		overflow-y: hidden;
		border-radius: 8px;
	}
.sideNavActualItem img{
		overflow-y: hidden;
		width: 33px;
		height: 33px;
		padding: 5px 5px;
	}
.sideNavActualItem p{	
		margin-top: 8px;
		overflow-y: hidden;
		color: #333;
		padding: -1px 5px 0px 5px;
		font-weight: 700;
		font-size: 21px;
		font-family: 'Rubik', sans-serif;
	} 
.sideNavActualItem p:hover{
		color: green;
		transition: ease 1s; 
	}
.sideNavItem p:hover{
		color: #999; 
		transition: ease 1s;
	}
/*   Sub Menu */
#sideNavSecondMenu{ 
		width: 100%;
		height:100vh;
		background-color: #fff; 
		position: relative;
		left: 0%;
		transition: 0.15s ease;
		overflow: hidden;
	}
#sideNavSecondMenuInsideOne{
			width: 100%;  
		height: auto;
		display: none;
		margin: 0px;
		text-decoration: none; 
		overflow: hidden;  
	} 
#sideNavSecondMenuInsideTwo{
			width: 100%;  
		height: auto;
		display: none;
		margin: 0px;
		text-decoration: none; 
		overflow: hidden; 
	} 
#sideNavSecondMenuInsideThree{
			width: 100%;  
		height: auto;
		display: none;
		margin: 0px;
		text-decoration: none; 
		overflow: hidden; 
	} 
/* ##### */
.sideNavSecondMenuItem{
		margin: 0;
		background-color: #eee;
		height: auto;
		width: 100%; 
		padding: 3px; 
		overflow-y: hidden;
		display: inline-flex;
		text-decoration: none;
		border-bottom: 1px #ddd solid;
	} 
.icon{
		width: auto; 
		height: auto; 
		padding: 0;
	}
.icon img{  
		width: 33px;
		height: 33px;
		display: block;
		margin: auto auto auto auto;
		
	}
.sideNavSecondMenuItem img{
		  width: 33px;
	 	 height: 33px;
		 margin: 8px;
	}
.sideNavSecondMenuItem h4{ 
		 color: #777;
		 margin: auto 13px;
		 padding-left: 1px;
		 font-weight: 700;
		 font-size: 21px;
	}
.option{ 
		 color: #777;
		 margin: auto 13px;
		 padding-left: 1px;
		 font-weight: 700;
		 font-size: 21px;
	}
.sideNavSecondMenuActualItem{
		margin: auto 0; 
		height: auto;
		width: 100%; 
		padding:13px 8px; 
		overflow-y: hidden;
		display: inline-flex;
		text-decoration: none;
		border-bottom: 1px #ddd solid; 
	} 
.sideNavSecondMenuActualItem img{
		  width: 33px;
	 	 height: 33px;
		 margin: 8px;
	}
.sideNavSecondMenuActualItem h4{ 
		 color: #777;
		 margin: auto 13px;
		 padding-left: 1px;
		 font-weight: 700;
		 font-size: 21px;
	} 
/* Language */	
a.dropbtn{ 
	transform: scale(1,1);
	font-family: 'Rubik';
	letter-spacing: 1px; 
	font-size: 17px;
	font-weight: 500;
	color:  #002F2F;
	height:40px;
	margin:  5px 21px;
	padding: 5px 0px;
	text-decoration: none;
	width: auto;
	}
.languaje{
	width: 100vw; 
	}	
.dropbtn{
	display: inline-flex;
	width: 100vw; 
}
.dropbtn p{  
	margin: auto;
	padding: auto;
	}
.dropbtn img{ 
	width: 21px;
	height:21px;
	margin: auto 5px;
	padding: auto;
	}
.dropdown-content{
	text-align: left; 
	display: none;
	position: absolute;
	height: auto;
	width: 75%;
	background-color: #fefefe;
	border-radius: 21px;
	left: 13px;
	top: 233px;
	animation: 0.5s ease x;
	z-index: 1;
}
.dropdown-content a{  
	margin: 13px;
	padding: 8px 3px 0px 3px;
	width: auto;
	height: 30px; 
	text-align: left;
	text-decoration: none;
	color: #000;
	transition: .5s ease;   
	animation: zoom 1s ease;
	border-bottom: 1px solid #ddd;
	display: inline-flex;
}
.dropdown-content a:hover{
	background-color: #eee;
	border-bottom: 1px solid #008080;
} 
.dropdown-content img{
	width: 33px;
	height: 21px;
	margin: 0 5px;
}
.dropdown-content p{
	margin: auto 0px;
	font-size: 17px;
}
.dropbtn:hover + .dropdown-content {
  display: inline-grid;
}
.dropdown-content:hover{
	 display: inline-grid
} 	
 

/*##########################################################*/
 /*   0.1 items  */
/*##########################################################*/	
.items{
	width: 100%;
	height: auto;
	margin: 0;
	margin-bottom: -233px;
}
.titleItems{	 
	
	position: relative;
	color: #008080;  
	font-family: "Rubik";
	font-weight: 500; 
	font-size:33px;
	margin: 1 3% 0 3%; 	
}
.itemsInside{
	width: 90%;
	height: auto; 
	margin: 2% 5%;	 
}
.item{
	text-decoration: none;
	border-radius: 21px; 
	display: grid;
	width: 100%
}
.itemImg{
	width: 100%;
	height: 266px;
}
.itemContent{
	width: 100%;
}
.itemTitle{
	position: relative;
	color: #008080;  
	font-family: "Rubik";
	font-weight: 500; 
	font-size:21px;
	margin: 0 3%; 	
}
.text{
	position: relative;
	color: #002f2f;   
	font-weight: 500; 
	font-size:21px;
	width: 100%;
	overflow-wrap: break-word;
	margin: 0%; 
}
.icons{
	display: flex;
	width: 100%;
}
.icons img{
	width: 33px;
	height: 33px;
	margin: 0% 0% 3% 3%;
} 
.icons p{
	position: relative;
	color: #002f2f;  
	font-weight: 500; 
	font-size:21px;
	margin: 0% 0% 3% 1%;
}	

#viewer{
	width: 100%;
	height: 100%; 
	display:none;
	z-index: -9;
	position: fixed;
	top: 0;
	left: 0;
	overflow-y: scroll;
	overflow-x: hidden;
	background-color: #fff;
}
.closeViewer{
	width: 100%;
	height: 10vh; 
	position: fixed;
	background-color: white;
	border-bottom: 1px solid #aaa;
}
.closeViewer a{
	width: 10vh;
	height: 10vh; 
	right: 2vw;
	position: absolute;
	text-align: center;
	font-size: 33px;
	font-family: "Rubik";
	color: #008080;
	cursor: pointer;
	text-decoration: none;
}
.viewerInside{
	display: flex;
    flex-wrap: wrap; /* Permite que los elementos envuelvan hacia abajo */
    max-width: 100%; /* Ancho máximo del contenedor */
    gap: 0px; /* Espacio entre los elementos */
}
.viewerItem{
	flex: 1 1 calc(100% - 10px); /* Cada elemento ocupará el 50% del ancho menos el espacio del gap */
    box-sizing: border-box; /* Incluye el padding y el borde dentro del ancho */
    text-align: center; /* Centra el texto */
	padding: 0 0px;
}
.viewerItem img{
	width: 100%;
	height: 100vh;
}	
.boxFlex{
			width: 100%;
			height: auto;
			display: grid; 
		}	
.itemFlex{
			width: 100%;
			height: auto;
		}
.slider {
    width: 100%;
	margin: 0;	
	height: auto;
    overflow: hidden; 
	border-radius: 13px;
	margin-bottom: 233px;
}
.slides {
    display: flex;
    transition: transform 0.5s ease-in-out;
	height: auto;
}
.slides img {
    width: 100%;
    height: 100%;
	border-radius: 13px;
}
	 
	/*##########################################################*/
 /*   0.1 Index */
/*##########################################################*/	
.index{
	width: 100%;
	height: 80vh;
	background-image: url("../../indexM.jpg");
	background-size: cover;
	position: relative; 
	
	padding-top: 20vh;
}
.indexMotor{
	width: 100vw;
	height: auto;
	background-color: rgba(255,255,255,0.89);
	border-radius: 0px;
	margin: -4vh 0%;
	position: relative;
	padding-bottom: 10vh;
}
.indexTitle{
	width: 100%;
	height: 8vh;
	background-color: transparent; 
	margin: 0;  
	border-top-left-radius: 0px;
	border-top-right-radius: 0px; 
	padding: 0;
}
.indexTitle p{ 
	color: #007bff; 
	position: relative;
	font-weight: 900; 
	font-size: 21px;
	margin-left: 13px;
	top: 13px; 
}
.indexGears{
	width: 100%;
	height: 100%; 
	display: inline-grid;
}
.indexItem{
	width: 100%;
	height: 100%; 
	display: inline-grid; 
}
.flex{
	width: 100%;
	height: 40px; 
	padding: auto;
	margin: 0;
	}	
.indexItem p{	 
	position: relative;
	color: #666;  
	font-family: "Rubik";
	font-weight: 500; 
	font-size: 21px; 
	margin: auto 3px auto 3px ; 
}
.indexItem img{	 
	width: 21px;
	height: 21px;
	margin: auto 3px auto 21px ; 
}  
.indexItem input{
	height: 50px; 
	position: relative;
	margin-left: 2%;
	margin-top: 0px;
	width: 90%;
	border: 1px solid #aaa;
	border-radius: 13px;
	color: #666;
	font-size: 17px;
	padding-left: 13px;
	transition:  1s ease;
}
.indexItem input:focus{
	outline: solid 1px #007bff;
}
.indexGears button{
	height: 8vh;
	margin: auto;
    display: none; 
    width: auto;
    padding: 13px 21px; 
    background-color: #008080;
    color: #fff;
    border: none;
    cursor: pointer;
    border-radius: 21px;
	transition: 1s ease;
	font-weight: 400;
	font-size: 21px;
	font-family: "Rubik";
	margin-top: 2vh;
	
}
.indexGears button:hover{
	height: 8vh;
	margin: auto;
	
	margin-top: 2vh;
    display: block; 
    width: auto;
    padding: 13px 21px; 
    background-color: #005C5C;
    color: #fff;
    border: none;
    cursor: pointer;
    border-radius: 21px;
	
	font-weight: 400;
	font-size: 21px;
	font-family: "Rubik";
	
}
/* The container must be positioned relative: */
.custom-select {
  position: relative; 
	width: 96%;
	
	margin-top: 0px;
}
.custom-select select {
  display: none; /*hide original SELECT element: */
	z-index: 0;
	border: 1px solid #aaa;  
}
.select-selected { 
	border-radius: 13px; 
	 
	 background-color: #fff;
	color: #333; 
	position: relative;
	margin-left: 2%;
	margin-top: 0px; 
	border: 1px solid #aaa;  
	font-size: 17px;
	padding-left: 13px;
	padding-top: 21px;
	height: 5vh;
	transition:  1s ease;
 	z-index: 0; 
}
/* Style the arrow inside the select element: */
.select-selected:after {
  position: absolute;
  content: "";
  top: 14px;
  right: 10px; 
  height: 100%;  
	border: 0px solid #aaa; 
	margin-left: 2%;
	margin-top: 0px; 
	border-radius: 13px;
	color: #666;
	font-size: 17px;
	padding-left: 13px;
	transition:  1s ease;	z-index: 0;width: 100%;
}
/* Point the arrow upwards when the select box is open (active): */
.select-selected.select-arrow-active:after {  	
	border: 0px solid #aaa;
  top: 7px;
}
/* style the items (options), including the selected item: */
.select-items div,.select-selected {
  color: #666;
  padding: 33px 16px auto 16px;
  border: 1px solid transparent;
	border: 1px solid #aaa;
  cursor: pointer;	z-index: 0;
}
/* Style items (options): */
.select-items {
  position: absolute;  
  left: 2%;
  right: 0; 
	border: 0px solid #aaa;
}
/* Hide the items when the select box is closed: */
.select-hide {
  display: none;
}
.select-items div:hover, .same-as-selected { 
}


/*##########################################################*/
 /*   0.0 Calendar  */
/*##########################################################*/	
#calendar0{
	display: none;
	z-index: -1;
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	background-image: -o-linear-gradient(37rad,rgba(185,155,215,0.8),rgba(255,255,255,0.5), rgba(112,187,214,0.61)); /*Opera*/
		background-image: -moz-linear-gradient(37rad,rgba(185,155,215,0.8),rgba(255,255,255,0.5), rgba(112,187,214,0.61)); /*Firefox*/
		background-image: -webkit-linear-gradient(37rad,rgba(185,155,215,0.8),rgba(255,255,255,0.5), rgba(112,187,214,0.61)); /*Safari & Chrome*/
		background-image: -ms-linear-gradient(37rad,rgba(185,155,215,0.8),rgba(255,255,255,0.5), rgba(112,187,214,0.61));/*IE/*/
	    
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
}
.titleCalendar{
	width: 100vw;
	height: 10vh;
	background-color:  #EDF4F4;
	display: inline-flex;
}
.titleCalendar p{
	width: 95vw;
	height: 10vh; 
	color: #007bff; 
	position: relative;
	font-weight: 900; 
	font-size: 17px; 
	padding-left: 3vw;
}
.titleCalendarClose{
	width: 5vw;
	height: 10vh; 
	color: #666; 
	position: relative;
	font-weight: 900; 
	font-family: "Rubik";
	font-size: 21px; 
	padding-top: 13px;
}
.calendar {
    width: 100%;
    margin: 0vh 0vw;
    border: 1px solid #ccc;
	border-radius: 21px;
    padding: 0px;
	background-color: #f9f9f9;
}
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
	background-color: #fff;
}	
.header h4{
	color: #aaa;
}	
.header button{
	font-family: "Rubik";
	 background-color:  #EDF4F4; /* Color de fondo */
            color: #00c0c0; /* Color del texto */
            border: none; /* Sin borde */
            border-radius: 33px; /* Bordes redondeados */
            padding: 10px 20px; /* Espaciado interno */
            font-size: 33px; /* Tamaño de la fuente */
            cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
            transition: background-color 0.3s ease; /* Efecto de transición */
}
.days {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}
.day {
    width: 14%;
    text-align: center;
}
.dates {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
}
.date {
    width: 14%;
    height: 14%;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
}
.date:hover {
    background-color: #f0f0f0;
}
	
	
 
/*██████████████████████████████████████████████████████████*/
 /*   0.0 Footer  */
/*██████████████████████████████████████████████████████████*/
.footer{ 
		width: 96vw;
		height: auto; 
		background-color: #EDF4F4;	
	margin: 1vh 1vw;
	border-radius: 13px;
	}		
	.box_footer_father{
	display: inline-grid;
	width: 100%;
	height: auto;
		padding: 1% 10%;
		}
	.box_footer_son{
	display: inline-grid;
	width: 100%;
	margin: 0%;
	height: auto;
		}			
	.box_footer_son a{
	margin: 8px;
		font-size: 18px;
	}
	/*##########################################################*/
 /*   0.1 Bottoms  */
/*##########################################################*/	
.bottom{ 
	border-top: 2px solid  #D5E5E5;
	width: 85%;
	height: auto;
	margin: 0 5%;
	text-align: center;
	padding: 13px;
}
 
 
/*##########################################################*/
 /*   0.1 Cart  */
/*##########################################################*/	
.cart{
	width: 80px;
	height: 80px;
	position: fixed;
	background-image: linear-gradient(#00c0c0,#008080);
	bottom: 0%;
	right: 0;
	z-index: 99;
	text-decoration: none;
	border-bottom-left-radius: 0px;
	border-top-left-radius: 13px;
	border-top-right-radius: 0px;
	text-align: center; 
}
.count{
	font-size: 21px;
	font-weight: 900; 
	margin-left: 35px;
	margin-top: 30px;
	position: absolute;
	color: goldenrod;
}
.cart img{
	width: 55px;
	height: 55px;
	margin-top: 21%;
}

 




}