header{
	width: 100%;
	height: 50px;display: flex;
	flex-wrap: wrap;
	position: absolute;
	top: 0;
	left: 0;
	background: #fff;
	box-shadow: 5px 0px 15px #991313;
	z-index: 5000;
} 

nav{	
	width: 70%;
	height: 100%;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	align-items: center;
	justify-content: space-evenly;
	border-right: 1px solid #991313;
	border-bottom: none;
}
a{  
	text-decoration: none;
	color: #991313;
	cursor: url(../img/pointer1.png), auto;
}
.contenedorswitch{
	width: 29.7%;
	height: 100%;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.switch{
	background: #991313;
	border-radius: 1000px;
	border: none;
	position: relative;
	cursor: pointer;
	display: -webkit-box;
	display: -ms-flexbox;
	outline: none;
	cursor: url(../img/pointer1.png), auto;
}
.switch::after {
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	position: absolute;
	background: #F1F1F1;
	top: 0;
	bottom: unset;
	border-radius: 100px;
	-webkit-transition: .3s ease all;
	transition: .3s ease all;
	-webkit-box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.2);
			box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.2);
}

.switch.active {
	background: #020003;
	color: #1ABC9C;
}

.switch.active::after {
	bottom: 0;
	top: unset;
	background: #1ABC9C;
	-webkit-box-shadow: 0px 0px 2px 2px rgba(255, 255, 255, 0.2);
			box-shadow: 0px 0px 2px 2px rgba(255, 255, 255, 0.2);
}

.switch span {
	width: 20px;
	height: 20px;
	line-height: 20px;
	display: block;
	background: none;
	color: #fff;
}

@media(prefers-color-scheme: dark) {

    body.dark header{
		background: #020003;
	}
	body.dark nav{
		background: #020003;
		border-right: 1px solid #1ABC9C;
		border-bottom: none;
	} 
	body.dark a{
		color: #fff;
		cursor: url(../img/pointer2.png), auto;
	}
	body.dark .contenedorswitch{
		background: #020003;
	}
	body.dark header{
		box-shadow: 5px 0px 15px #1ABC9C;
	}
	body.dark .switch{
		cursor: url(../img/pointer2.png), auto;
	}
}


/*--------------------------------escritorio-----------------------------------*/

@media(min-width: 1023px ){
	header{
		width: 50px;
		height: 100%;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		background: #fff;
		box-shadow: 5px 0px 15px #991313;
		z-index: 5000;
	} 
	
	nav{	
		width: 100%;
		height: 70%;
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
		align-items: center;
		justify-content: space-evenly;
		border-bottom: 1px solid #991313;
		border-right: none;
	}
	.contenedorswitch{
		width: 100%;
		height: 30%;
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	@media(prefers-color-scheme: dark) {

		body.dark nav{
			background: #020003;
			border-bottom: 1px solid #1ABC9C;
			border-right: none;
		} 
	}

}