/* INDEX */
*,
*::before,
*::after {box-sizing: border-box;-webkit-box-sizing: border-box;}
body {font-family:"Sofia";margin: 0;padding: 0; color:purple; background-color:#FFCCFF;background-image:url(imagenes/fondo.jpg);}

html {scroll-behavior: smooth;}

.contenedor-index{padding:0; overflow:hidden}
@media only screen and (max-width: 2560px) {
body{max-width:2560px;}
.contenedor-index{max-width:2560px;}
.icon-bar{display:none; visibility:hidden}
@media only screen and (max-width: 1978px) {
body {max-width:1978px;}
.contenedor-index{max-width:1978px;}
}
@media only screen and (max-width: 1920px) {
body {max-width:1920px;}
.contenedor-index{max-width:1920px;}
@media only screen and (max-width: 1680px) {
body {max-width:1680px;}
.contenedor-index{max-width:1680px;}
}
@media only screen and (max-width: 1600px) {
body {max-width:1600px;}
.contenedor-index{max-width:1600px;}
}
@media only screen and (max-width: 1366px) {
body{max-width:1366px;}
}
@media only screen and (max-width: 1280px) {
body{max-width:1280px;}
}
@media only screen and (max-width: 1093px) {
body{max-width:1093px;}
}
@media only screen and (max-width: 1024px) {
body{max-width:1024px;}
}
@media only screen and (max-width: 912px) {
body{max-width:912px;}
}
@media only screen and (max-width: 820px) {
body{max-width:820px;}


}
@media only screen and (max-width: 768px) {
body{max-width:768px;}
.contenedor-index{max-width:768px;}
}
@media only screen and (max-width: 720px) {
body{max-width:720px;}


}
@media only screen and (max-width: 540px) {
body{max-width:540px;}
.contenedor-index{max-width:540px;}
}
@media only screen and (max-width: 414px) {
body{max-width:414px;}
.contenedor-index{max-width:414px;}
}
@media only screen and (max-width: 412px) {
body{max-width:412px;}
.contenedor-index{max-width:412px;}
}
@media only screen and (max-width: 393px) {
body{max-width:393px;}
.contenedor-index{max-width:393px;}
}
@media only screen and (max-width: 375px) {
body{max-width:375px;}
.contenedor-index{max-width:375px;}
}
@media only screen and (max-width: 360px) {
body{max-width:360px;}
.contenedor-index{max-width:360px;}
}
@media only screen and (max-width: 320px) {
body{max-width:320px;}
.contenedor-index{max-width:320px;}
}
@media only screen and (max-width: 280px) {
body{max-width:280px;}
.contenedor-index{max-width:280px;}
}

/* FIN INDEX */




/* SUPERIOR */


.container{

  display: -webkit-box;
  display: -ms-flexbox;
      display: flex;
    align-items:center;
    justify-content: center;
  
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  overflow: hidden;
  height:auto;
	padding-top:1vw;
	padding-bottom:1vw;
background-color:rgba(255,255,255,0.4);
	
  top:0;
  position:fixed;
 z-index:1;
  transition: 0.2s;


}

.container .navbar {
  display: flex;
  align-items:center;
  justify-content: left;
  width: 100%;
  height: 7vh;
  padding: 0 20px;
  transition: 0.2s;

}
.container .navbar ul {
  display: -webkit-box;
  display: -ms-flexbox;  
  display: inline-flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  transition: 0.2s;

}
.container .navbar ul li a {
  text-decoration: none;
  color:#9966FF;
  font-size: 16px;
  text-transform: uppercase;
  display: block;
  height: 20px;
  line-height: 60px;
  cursor: pointer;
  padding: 0 10px;
  transition: 0.2s;

}
/* hover del menú */
.container .navbar ul li a:hover {
  color:purple;
  border:#0099CC;
  border-bottom:medium;
  border-bottom-style:solid;
  border-bottom-width:thin;
  border-bottom-color:purple;
  transition-property: border-bottom;
  transition: 0.4s all ease;
  font-weight:bold;
}
.container .navbar ul .close {
  display: none;
  text-align: right;
  padding: 10px;
}
.container .navbar ul .close span {
  font-size: 40px;
  display: inline-block;
  border: 1px solid #cccccc;
  padding: 0 10px;
  cursor: pointer;
}
.container .navbar .icon-bar2 {
  padding: 18px 8px;
  width: 50px;
  height: 60px;
  display: none;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  cursor: pointer;
  
}
/* menú hamburguesa */
.container .navbar .icon-bar2 i {
  background-color:purple; /* color de las tres líneas */
  height: 4px; /* grosor de la línea */
}
/*-----------------*/
.navbar ul li:hover .children {
	display:block;
	transition:all 0.3s;
}
.navbar ul li .children {
	display: none;
	background:#FFFFFF;
	position: absolute;
	width: 30%;
	z-index:1000;
}
.navbar ul li .children li {
	display:block;
	overflow: hidden;
	border-bottom: 1px solid rgba(255,255,255,.5);
}
.navbar ul li .children li a {
	display: block;
}
.navbar ul li .children li a span {
	float: right;
	position: relative;
	top:3px;
	margin-right:0;
	margin-left:15px;
}
.navbar ul li .caret {
	position: relative;
	top:3px;
	margin-left:20px;
	margin-right:0px;
}
@media only screen and (max-width: 2560px) {
.container {max-width:2560px;width:100%;padding:1.5vw;}
.container .navbar ul li a {font-size: 2.25em;text-transform: uppercase;text-align:center;display: 
							block;height: 60px;line-height: 50px;cursor: pointer;padding: 0 20px;}
}
@media only screen and (max-width: 1920px) {
.container {max-width:1920px;padding:1.25vw;}
.container .navbar ul li a {font-size: 1.75em;;padding: 0 10px;}
}
@media only screen and (max-width: 1680px) {
.container {max-width:1680px;padding:1vw;}
.container .navbar ul li a {font-size: 1.5em;}
}
@media only screen and (max-width: 1600px) {
.container {max-width:1600px;}
}
@media only screen and (max-width: 1440px) {
.container {height:8%;max-width:1440px;margin-top:0;}
.container .navbar ul li a {font-size: 1.25em;}
}
@media only screen and (max-width: 1366px) {
.container {height:10%;max-width:1366px;}
.container .navbar ul li a {font-size: 1.25em;}
}
@media only screen and (max-width: 1280px) {
.container {height:10%;max-width:1280px;;}
.container .navbar ul li a {font-size: 1.1em;}
}
@media only screen and (max-width: 1093px) {
.container {height:12%;max-width:1093px;}
.container .navbar ul li a {font-size: 1em;}
}

@media only screen and (max-width: 1023px) {

	.navbar ul {
		display:flex;
		flex-direction: column;
		font-size:1.7rem;
		top:0;
		position: fixed;		
		background: #ffffff;
		width: 25rem;
		padding:10rem 0;
		transition: 0.5s all ease;
		}
	.navbar ul li a {
		padding: 1rem;
		margin:1rem 2rem;
		}

	.container .navbar ul .close {display: block;}
		
	.icon-bar2 {display: block;
		}
		
		.container .navbar ._Menus-show {left: 0;}
}
@media only screen and (max-width: 1021px) {
		.container {
					height:10vh;
					margin-top:-2vw;
					/*justify-content: space-between;*/
					z-index:1000;
					}
		
		.container .navbar ul {
					-ms-flex-wrap: nowrap;
					flex-wrap: nowrap;
					position: fixed;
					left: 100%;
					flex-direction: column;
					background: #ffffff;
					width: 100%;
					height: 60%;/*altura del menú responsive*/
					overflow: auto;
					-webkit-transition: left .3s;
					-o-transition: left .3s;
					transition: all .3s;
					z-index:1000;
					}
		.container .navbar ul li a {
					padding: 5px;
					font-size:2em;/*letra del menú desplegable*/
					height: auto;
					line-height: normal;
					}
		.container .navbar ul .close {
					display: block;
					}
		.container .navbar .icon-bar2 {
					display: flex;
					flex-wrap: wrap;
					}
		.container .navbar ._Menus-show {
					left: 0;
					}

}
@media only screen and (max-width: 820px) {
.container {margin-top:-1vw;}

.container .navbar ul {height: 60%;}
}
@media only screen and (max-width: 768px) {
.container {margin-top:-1.5vw;}
.container .navbar ul {height: 60%;}
}
@media only screen and (max-width: 720px) {
.container {margin-top:-2vw;}
.container .navbar ul {height: 60%;}
}
@media only screen and (max-width: 667px) {
.container {padding-top:-1vw;padding-bottom:-3vw;}
.container .navbar ul {height: 70%;}
}
@media only screen and (max-width: 640px) {
.container {padding-top:-1vw;}
.container .navbar ul {height: 90%;}
}
@media only screen and (max-width: 540px) {
.container {margin-top:-1vw;}
.container .navbar ul {height: 60%;}
.container .navbar ul li a {font-size: 1.25em;}
}


/*------------------------*/
@media only screen and (max-width: 432px) {
.container {margin-top:-2vw;}
.container .navbar ul li a {font-size: 1.25em;}
	}
@media only screen and (max-width: 414px) {
.container {margin-top:-2.25vw;}
.container .navbar ul {height: 60%;}
.container .navbar ul li a {font-size: 1.25em;}
	}
@media only screen and (max-width: 412px) {
.container {height:8vh;margin-top:-2vw;}
.container .navbar ul {height: 50%;}
.container .navbar ul li a {font-size: 1.25em;}
	}
@media only screen and (max-width: 393px) {
.container {margin-top:-2vw;}
.container .navbar ul li a {font-size: 1em;}
.container .navbar ul {height: 65%;}
}
@media only screen and (max-width: 360px) {
.container {height:12vh;margin-top:-1.8vw;}
.container .navbar ul {height: 65%;}
}
@media only screen and (max-width: 320px) {
.container {height:10vh;margin-top:-1.5vw;}
.container .navbar .icon-bar2 {padding: 18px 8px;width: 50px;height: 60px;/* altura del menú hamburguesa }
.container .navbar ul {height: 80%;}
.nav-lists .close{font-size:1.25em}
/*#nav-lists{height:100vw}*/
}
@media only screen and (max-width: 280px) {
.container {height:10%}
}