/*Flecha para hacer la pagina hacia arriba*/
.ir-arriba {
	display: none;
	background-repeat: no-repeat;
	font-size: 22px;
	cursor: pointer;
	position: fixed;
	bottom: 10px;
	/* right:10px; */
	left: 10px;
	z-index: 2;
}

/* Empieza el social top de redes sociales */
.social-bar {
	position: fixed;
	left: 0;
	top: 65%;
	font-size: 1rem;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	z-index: 100;
}

.icon {
	color: white;
	text-decoration: none;
	padding: 0.6rem;
	display: flex;
	transition: all 0.5s;
	opacity: 30%;
}

.icon-facebook {
	background: #2e406e;
}

.icon-youtube {
	background: #e83028;
}

.icon-instagram {
	background: #3f60a5;
}

.icon:first-child {
	border-radius: 0 1rem 0 0;
}

.icon:last-child {
	border-radius: 0 0 1rem 0;
}

.icon:hover {
	padding-left: 3rem;
	padding-right: 1rem;
	border-radius: 0 1rem 1rem 0;
	box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.42);
	opacity: 100%;
	color: white;
	font-size: 1.5rem;
}

@media screen and (max-width: 800px) {
	.social-bar {
		display: none;
	}
}
















:root {
	--bgColor: #00415a;
	--primaryColor: black;
	--colorHover: #dc3545;
	--sizeButton: 55px;
	--sizeButtonItem: 50px;
	--sizeIcons: 25px;
	--widthContent: 200px;
	--heightContent: 130px;
}

* {
	margin: 0;
	padding: 0;
}
.menu-content-default {
   width: var(--widthContent);
   height: var(--heightContent);
   position: fixed;
   bottom: 13px;
   transform: translateX(-50%);
   z-index: 100;
}
@media (max-width: 1920px) {
   .menu-content {
      left: 97.5%;
   }
}
@media (max-width: 1600px) {
   .menu-content {
      left: 97%;
   }
}
@media (max-width: 1199.98px) {
   .menu-content {
      left: 97%;
   }
}
@media (max-width: 991.98px) {
   .menu-content {
      left: 97%;
   }
}
@media (max-width: 767.98px) {
   .menu-content {
      left: 96%;
   }
}
@media (max-width: 576px) {
   .menu-content {
      left: 90%;
   }
}
@media (max-width: 275px) {
   .menu-content {
      left: 90.5%;
   }
}

.menu-default {
   background-repeat: no-repeat;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	cursor: pointer;
	position: fixed;
	bottom: 0;
	left: 70px;
	transition: transform 300ms;
   color: #fff;
   font-size: 25px;
}
.menu-item-prin {
	width: var(--sizeButton);
	height: var(--sizeButton);
	background: #3f60a5;;
}

.menu-item {
	width: var(--sizeButtonItem);
	height: var(--sizeButtonItem);
	background: var(--primaryColor);
}

.menu-item-input {
	width: 65px;
	display: none;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	position: fixed;
	bottom: 0;
	left: 70px;
	transition: transform 300ms;
   text-align: center;
}

.menu-item:hover {
	background: var(--colorHover);
   color: #fff;
}

.menu-item img {
	width: var(--sizeIcons);
	transition: transform 300ms;
}

#menu {
	z-index: 10;
}

.menu-active #menu img {
	transform: rotate(45deg);
}

.menu-active .menu-item:nth-child(2) {
	transform: translateY(-60px);
}

.menu-active .menu-item:nth-child(3) {
	transform: translateY(-115px);
}

.menu-active .menu-item:nth-child(4) {
	transform: translateY(-170px);
}

.menu-active .menu-item:nth-child(5) {
	transform: translateY(-225px);
}

.menu-active .menu-item:nth-child(6) {
	transform: translateX(-55px);
}

.menu-active .menu-item:nth-child(7) {
	transform: translateX(-110px);
}

.menu-active .menu-item-input:nth-child(8) {
	transform: translateX(-185px);
	display: flex;
}

.menu-active .menu-item-input:nth-child(9) {
	transform: translateX(-265px);
	display: flex;
}


.main-content {
	width: 100%;
	min-height: 200vh;
	display: flex;
	justify-content: center;
	align-items: center;
}

.main-content h1 {
	text-align: center;
	color: #fff;
	font-weight: 300;
	font-size: 3em;
}