@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed|Roboto:300,400,500,700');
	body {
		letter-spacing: -1px;
	}
	
	.img-card-container {
		overflow: hidden;
		height: 154px;
	}
	
	.TopLogo {
		padding-top: 10px;
	}
	
	.ReSize {
		font-size: 15px;
	}
	
	.hideme {
		opacity: 0;
	}
	
	.facTex {
		position: absolute;
		top: 100px;
		left: 100px;
	}
	
	tabs .tab a:hover,
	.tabs .tab a.active {
		background-color: #bbdefb;
	}
	
	.carousel .indicators .indicator-item {
		background-color: green!important;
	}
	
	.input-field .prefix.active {
		color: #e1123f!important;
	}
	
	.navFix {
		width: 204px!important;
		top: 64px!important;
	}
	
	.navbar-fixed nav .nav-wrapper ul li a {
		color: #e1123f!important;
	}
	
	.imgFix {
		width: 50%;
	}
	
	.separator {
		padding-left: 60px;
	}
	
	.fixwidth {
		width: 242px!important;
	}
	
	.cardVacante {
		height: 300px!important;
		overflow-x: hidden;
		overflow-y: scroll;
	}
	
	.fixcontrolV {
		padding-left: 100px!important;
	}
	
	.spaceTop {
		margin-top: 50px!important;
	}
	
	.rightText {
		text-align: right;
	}
	
	.icoGreen {
		color: green!important;
	}
	
	.SubTitle {
		font-size: 19px;
		font-weight: 400;
	}
	
	.pagination li.active {
		background-color: #e1123f!important;
	}
	
	.dropdown-content li>a,
	.dropdown-content li>span {
		font-size: 16px;
		color: #e1123f!important;
	}
	
	.whiteIco {
		color: white;
	}
	
	.footerText {
		font-size: 12.5px;
	}
	/*botones*/
	
	.btn,
	.btn-large {
		background-color: #e1123f!important;
	}
	
	.boton1 {
		background-color: #e65100!important;
	}
	
	.boton2 {
		background-color: #2e7d32!important;
	}
	
	.boton3 {
		background-color: #0091ea!important;
	}
	
	.tap-target {
		background-color: #455a64!important;
	}
	
	nav {
		background-color: #fff!important;
	}
	
	.news-headlines li {
		border: 0!important;
	}
	
	a {
		color: darkred;
	}
	
	.icomenu {
		color: black;
	}
	
	.btnspace {
		margin-left: 10px;
	}
	
	.btnspaceB {
		margin-bottom: 10px;
	}
	/*tabs---*/
	
	.tabssize {
		height: 100px!important;
	}
	/*table striped color*/
	
	table.striped>tbody>tr:nth-child(odd) {
		background-color: #bbd1ea!important;
	}
	
	.botom_sp {
		padding-bottom: 40px;
	}
	/*icons control volumétrico*/
	
	.icoRsize {
		width: 150px!important;
		display: inline!important;
	}
	
	.card .card-reveal {
		padding: 16px!important;
	}
	/*icons social N*/
	
	.ico1 {
		color: dodgerblue;
	}
	
	.ico2 {
		color: deepskyblue;
	}
	
	.ico3 {
		color: orangered;
	}
	
	.ico4 {
		color: #006fa6;
	}
	/*misión visión styles*/
	
	.card_size {
		height: 270px;
	}
	
	.card_us {
		background-color: #ef5350!important;
	}
	
	.resizeP {
		font-size: 16px;
	}
	/*slides news*/
	
	.hero {
		width: 100%;
		height: 139px;
		overflow: hidden;
		position: relative;
		background-image: url('../img/onexpo.png');
		padding: 5px 0 5px 0;
	}
	
	.text1 {
		background-color: rgba(86, 86, 86, 0.8);
		width: auto;
		color: white;
		font-size: 20px;
		margin: 0 5px 0 5px;
	}
	
	.hero2 {
		background-image: url('../img/onexpo.png');
	}
	
	.hero3 {
		background-image: url('../img/onexpo.png');
	}
	
	.hero4 {
		background-image: url('../img/onexpo.png');
	}
	/*mini slider*/
	
	.carousel.carousel-slider .carousel-item p {
		font-size: 18px;
	}
	
	.heroS1 {
		background-image: url('../img/sm11.png');
		background-repeat: no-repeat;
	}
	
	.heroS2 {
		background-image: url('../img/sm2.png');
		background-repeat: no-repeat;
	}
	
	.resizeSlider {
		height: 215px!important;
	}
	/*fix formularios dropdown btn mobile*/
	
	.fix-form-button {
		min-height: 40px;
	}
	/*nav-bar mobile*/
	
	#sidenav-overlay {
		z-index: 1!important;
	}
	/*blog*/
	
	.cardBlog {
		height: 370px;
		overflow: hidden;
	}
	
	.BlogNota {
		height: 200px;
		overflow: hidden;
	}
	
	.card .card-action a:not(.btn):not(.btn-large):not(.btn-large):not(.btn-floating) {
		color: #e1123f!important;
		text-transform: inherit!important;
	}
	/*btn chat*/
	
	.btn-floating {
		width: 100px!important;
		height: 100px!important;
	}
	/*styles carga formularios*/
	
	.sk-cube-grid {
		width: 40px;
		height: 40px;
		margin: 100px auto;
	}
	
	.sk-cube-grid .sk-cube {
		width: 33%;
		height: 33%;
		background-color: #e1123f;
		float: left;
		-webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
		animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
	}
	
	.sk-cube-grid .sk-cube1 {
		-webkit-animation-delay: 0.2s;
		animation-delay: 0.2s;
	}
	
	.sk-cube-grid .sk-cube2 {
		-webkit-animation-delay: 0.3s;
		animation-delay: 0.3s;
	}
	
	.sk-cube-grid .sk-cube3 {
		-webkit-animation-delay: 0.4s;
		animation-delay: 0.4s;
	}
	
	.sk-cube-grid .sk-cube4 {
		-webkit-animation-delay: 0.1s;
		animation-delay: 0.1s;
	}
	
	.sk-cube-grid .sk-cube5 {
		-webkit-animation-delay: 0.2s;
		animation-delay: 0.2s;
	}
	
	.sk-cube-grid .sk-cube6 {
		-webkit-animation-delay: 0.3s;
		animation-delay: 0.3s;
	}
	
	.sk-cube-grid .sk-cube7 {
		-webkit-animation-delay: 0s;
		animation-delay: 0s;
	}
	
	.sk-cube-grid .sk-cube8 {
		-webkit-animation-delay: 0.1s;
		animation-delay: 0.1s;
	}
	
	.sk-cube-grid .sk-cube9 {
		-webkit-animation-delay: 0.2s;
		animation-delay: 0.2s;
	}
	
	@-webkit-keyframes sk-cubeGridScaleDelay {
		0%,
		70%,
		100% {
			-webkit-transform: scale3D(1, 1, 1);
			transform: scale3D(1, 1, 1);
		}
		35% {
			-webkit-transform: scale3D(0, 0, 1);
			transform: scale3D(0, 0, 1);
		}
	}
	
	@keyframes sk-cubeGridScaleDelay {
		0%,
		70%,
		100% {
			-webkit-transform: scale3D(1, 1, 1);
			transform: scale3D(1, 1, 1);
		}
		35% {
			-webkit-transform: scale3D(0, 0, 1);
			transform: scale3D(0, 0, 1);
		}
	}
	/*load formularios*/
	
	.loadMensaje {
		color: dodgerblue;
		font-size: 30px;
	}
	
	.missing {
		border-bottom: 1px solid red!important;
	}
	
	.hide-element {
		display: none;
	}
	
	.sucesstyle {
		color: #56ab2f;
		font-size: 30px;
	}
	
	.errorstyle {
		color: red;
		font-size: 30px;
	}
	
	.negative {
		color: red!important;
	}
	
	.exmargin {
		margin-bottom: 40px;
	}
	
	.borderEgas {
		border: 1px solid lightslategray;
	}
	
	.desabilitado {
		color: #a0a0a0;
		pointer-events: none;
	}
	/*media querys*/
	/*mobile*/
	
	@media only screen and (max-width: 600px) {
		.infoUs {
			text-align: center;
		}
		.address {
			text-align: center;
		}
		.Rcard1 {
			height: 322px!important;
		}
		.Rcard2 {
			height: 380px!important;
		}
		.btnMobile {
			font-size: 9px!important;
		}
		#help {
			display: none;
			position: absolute;
			width: 200px!important;
			padding: 5px;
			border: 1px solid #E0EEEE;
			background-color: #F0FFFF;
			font-size: 12px;
			top: 350px;
			left: calc(50% - 100px);
			z-index: 999;
		}
		.sliderFix {
			height: 350px!important;
		}
		.indicators {
			top: 323px!important;
			z-index: 999!important;
		}
		.smallTitle {
			font-size: 19px!important;
		}
		.smallSubtile {
			font-size: 16px!important;
		}
		.btnslider {
			margin-top: 70px;
		}
		.imgefecti {
			width: 300px!important;
		}
		.sesionBtn {
			margin-top: 10px;
		}
		.hero5 {
			background: url('../img/registro_m.png') no-repeat;
			background-size: 100%;
		}
		.hero6 {
			background: url('../img/confirmar_m.png') no-repeat;
			background-size: 100%;
		}
		.hero7 {
			background: url('../img/bajar_m.png') no-repeat;
			background-size: 100%;
		}
		.hero8 {
			background: url('../img/up_m.png') no-repeat;
			background-size: 100%;
		}
		.hero9 {
			background: url('../img/info_m.png') no-repeat;
			background-size: 100%;
		}
		.carTitle {
			color: red;
			font-size: 18px!important;
		}
		.carText {
			font-size: 13px!important;
		}
		.superTitle {
			font-size: 18px!important;
		}
		.cvLogo {
			width: 50%;
		}
		.cvLofoFix {
			text-align: center;
		}
		.secondLevel {
			margin-left: 20px;
		}
		.suiteText {
			font-size: 25px;
			line-height: 26px;
			color: lightslategray;
			padding-top: 25px!important;
		}
		.suiteMargin {
			margin-top: 28px;
		}
		.hightFix {
			height: 180px;
		}
		.valign-wrapper {
			display: -webkit-flex!important;
			display: -ms-flexbox!important;
			display: flex!important;
			-webkit-align-items: center!important;
			-ms-flex-align: center!important;
			align-items: center!important;
			justify-content: center!important;
		}
		.modal.modal-fixed-footer {
			padding: 0!important;
			height: 35%!important;
		}
	}
	/*desktop hd*/
	
	@media only screen and (min-width: 993px) and (max-width: 1280px) {
		.fixMargin {
			margin-right: 3px!important;
		}
		body {
			font-size: 14px;
		}
		.address {
			text-align: center;
		}
		.CardRsize {
			height: 437px!important;
		}
		.infoUs {
			text-align: left;
		}
		#help {
			display: none;
			position: absolute;
			width: 350px!important;
			padding: 5px;
			border: 1px solid #E0EEEE;
			background-color: #F0FFFF;
			font-size: 12px;
			top: 50px;
			left: calc(35% - 175px);
			z-index: 999;
		}
		.icoRsize {
			width: 100px!important;
			display: inline!important;
		}
		.card .card-reveal {
			padding: 5px!important;
		}
		.customWIdeControl {
			margin: 0;
			width: 100%;
		}
		.fixBtnBottom {
			padding-top: 61px!important;
		}
		.containerPlus {
			width: 80%;
			margin-left: 10%;
		}
		.sliderFix {
			height: 550px!important;
		}
		.indicators {
			z-index: 999!important;
		}
		.btnslider {
			margin-top: 130px;
		}
		.imgefecti {
			width: 410px!important;
		}
		.slider1 {
			height: 250px!important;
		}
		.sesionBtn {
			padding-top: 13px;
		}
		.hero5 {
			background: url('../img/registro_hd.png') no-repeat;
			background-size: 100%;
		}
		.hero6 {
			background: url('../img/confirmar_hd.png') no-repeat;
			background-size: 100%;
		}
		.hero7 {
			background: url('../img/bajar_hd.png') no-repeat;
			background-size: 100%;
		}
		.hero8 {
			background: url('../img/up_hd.png') no-repeat;
			background-size: 100%;
		}
		.hero9 {
			background: url('../img/info_hd.png') no-repeat;
			background-size: 100%;
		}
		.carTitle {
			color: red;
			font-size: 21px!important;
		}
		.carText {
			font-size: 17px!important;
		}
		.superTitle {
			font-size: 25px!important;
		}
		.cvLogo {
			width: 50%;
		}
		.cvLofoFix {
			text-align: center;
		}
		#userInfo {
			width: 374px;
			height: 600px;
			position: absolute;
			top: 56px;
			right: 0px;
			background-color: white;
			z-index: 999;
			border: 1px solid #e1123f;
			overflow: hidden;
		}
		#userData {
			width: 100%;
			height: 564px;
			overflow-y: scroll;
			padding: 5px;
		}
		#userData table tr th {
			text-align: right;
		}
		.suiteText {
			font-size: 40px;
			line-height: 39px;
			color: lightslategray;
			padding-top: 25px!important;
		}
		.suiteMargin {
			margin-top: 14px;
		}
		.greenDots {
			z-index: 999!important;
			top: 387px!important;
			background-color: white;
		}
		.greenDots li {
			margin: 5px 4px!important;
		}
	}
	/*desktop hd+*/
	
	@media only screen and (min-width: 1281px) {
		.fixMargin {
			margin-right: 3px!important;
		}
		body {
			font-size: 16px;
		}
		.address {
			text-align: center;
		}
		.CardRsize {
			height: 437px!important;
		}
		.infoUs {
			text-align: left;
		}
		#help {
			display: none;
			position: absolute;
			width: 350px!important;
			padding: 5px;
			border: 1px solid #E0EEEE;
			background-color: #F0FFFF;
			font-size: 12px;
			top: 50px;
			left: calc(30% - 175px);
			z-index: 999;
		}
		.customWIdeControl {
			margin: 0 16% 0 16%;
			width: 68%;
		}
		.force100 {
			width: 100%!important;
		}
		.containerPlus {
			width: 80%;
			margin-left: 10%;
		}
		.tabSpace {
			margin-left: 260px;
		}
		.sliderFix {
			height: 550px!important;
		}
		.indicators {
			z-index: 999!important;
		}
		.btnslider {
			margin-top: 130px;
		}
		.imgefecti {
			width: 600px!important;
		}
		.sesionBtn {
			padding-top: 13px;
		}
		.hero5 {
			background-position: 0 -127px;
		}
		.hero5 {
			background: url('../img/registro_fhd.png') no-repeat;
			background-size: 100%;
		}
		.hero6 {
			background: url('../img/confirmar_fhd.png') no-repeat;
			background-size: 100%;
		}
		.hero7 {
			background: url('../img/bajar_fhd.png') no-repeat;
			background-size: 100%;
		}
		.hero8 {
			background: url('../img/up_fhd.png') no-repeat;
			background-size: 100%;
		}
		.hero9 {
			background: url('../img/info_fhd.png') no-repeat;
			background-size: 100%;
		}
		.carTitle {
			color: red;
			font-size: 30px!important;
		}
		.carText {
			font-size: 20px!important;
		}
		.superTitle {
			font-size: 40px!important;
		}
		.cvLogo {
			width: 38%;
		}
		.cvLofoFix {
			text-align: center;
		}
		#userInfo {
			width: 374px;
			height: 600px;
			position: absolute;
			top: 56px;
			right: 0px;
			background-color: white;
			z-index: 999;
			border: 1px solid #e1123f;
			overflow: hidden;
		}
		#userData {
			width: 100%;
			height: 564px;
			overflow-y: scroll;
			padding: 5px;
		}
		#userData table tr th {
			text-align: right;
		}
		.suiteText {
			font-size: 40px;
			line-height: 39px;
			color: lightslategray;
			padding-top: 25px!important;
		}
		.suiteMargin {
			margin-top: 14px;
		}
		.greenDots {
			z-index: 999!important;
			top: 387px!important;
			background-color: white;
		}
		.greenDots li {
			margin: 5px 4px!important;
		}
		.modal.modal-fixed-footer {
			padding: 0!important;
			height: 60%!important;
		}
		.modal{
			    width: 47%!important;
		}
	}
	/*ipad*/
	
	@media only screen and (min-width: 601px) and (max-width:992px) {
		.fixMargin {
			margin-right: 3px!important;
		}
		.CardRsize {
			height: 421px!important;
		}
		.infoUs {
			text-align: left;
		}
		#help {
			display: none;
			position: absolute;
			width: 200px!important;
			padding: 5px;
			border: 1px solid #E0EEEE;
			background-color: #F0FFFF;
			font-size: 12px;
			top: 215px;
			left: calc(40% - 175px);
			z-index: 999;
		}
		.Rimg {
			width: 250px;
		}
		.customWIdeControl {
			margin: 0;
			width: 100%;
		}
		.force100 {
			width: 100%!important;
		}
		.sliderFix {
			height: 550px!important;
		}
		.indicators {
			z-index: 999!important;
		}
		.btnslider {
			margin-top: 130px;
		}
		.imgefecti {
			width: 410px!important;
		}
		.sesionBtn {
			margin-top: 10px;
		}
		.hero5 {
			background: url('../img/registro_t.png') no-repeat;
			background-size: 100%;
		}
		.hero6 {
			background: url('../img/confirmar_t.png') no-repeat;
			background-size: 100%;
		}
		.hero7 {
			background: url('../img/bajar_t.png') no-repeat;
			background-size: 100%;
		}
		.hero8 {
			background: url('../img/up_t.png') no-repeat;
			background-size: 100%;
		}
		.hero9 {
			background: url('../img/info_t.png') no-repeat;
			background-size: 100%;
		}
		.carTitle {
			color: red;
			font-size: 23px!important;
		}
		.carText {
			font-size: 16px!important;
		}
		.superTitle {
			font-size: 30px!important;
		}
		.cvLogo {
			width: 50%;
		}
		.cvLofoFix {
			text-align: center;
		}
		.secondLevel {
			margin-left: 20px;
		}
		.suiteText {
			font-size: 30px;
			line-height: 39px;
			color: lightslategray;
			padding-top: 25px!important;
		}
		.suiteMargin {
			margin-top: 14px;
		}
		.greenDots {
			z-index: 999!important;
			top: 387px!important;
			background-color: white;
		}
		.greenDots li {
			margin: 5px 4px!important;
		}
		.modal.modal-fixed-footer {
			padding: 0!important;
			height: 40%!important;
		}
	}
	
	.card.small .card-image+.card-content,
	.card.medium .card-image+.card-content,
	.card.large .card-image+.card-content {
		max-height: 100%!important;
	}
	/*featrure discovery*/
	
	#feature-circle {
		position: fixed;
		text-align: center;
		padding-top: 13px;
		color: white;
		width: 80px;
		height: 80px;
		bottom: 15px;
		right: 15px;
		border-radius: 50%;
		cursor: pointer;
		z-index: 997;
		font-size: 16px;
	}
	
	#feature-content {
		position: fixed;
		width: 400px;
		height: 400px;
		bottom: 0;
		right: 0;
		z-index: 998;
	}
	
	#close-feature {
		position: fixed;
		background-color: white;
		color: #455a64;
		text-align: center;
		padding-top: 0px;
		width: 25px;
		height: 25px;
		bottom: 15px;
		right: 15px;
		border-radius: 50%;
		cursor: pointer;
		z-index: 999;
	}
	
	#feature-back-animation {
		position: fixed;
		z-index: 998;
		background-color: white;
		border-radius: 50%;
		animation-name: feature;
		animation-duration: 2s;
		animation-iteration-count: infinite;
	}
	
	@keyframes feature {
		from {
			background-color: white;
			opacity: 0.5;
			width: 25px;
			height: 25px;
			bottom: 15px;
			right: 15px;
		}
		to {
			background-color: white;
			bottom: 3px;
			right: 3px;
			opacity: 0;
			width: 50px;
			height: 50px;
		}
	}
	/*slider volumétrico index*/


	.modal {
		will-change: visibility, opacity;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		-ms-flex-pack: center;
		justify-content: center;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		overflow-y: auto;
		overflow-x: hidden;
		z-index: 1000;
		visibility: hidden;
		opacity: 0;
		-webkit-transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
		transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
		-webkit-transition-delay: $modal-delay;
		transition-delay: $modal-delay;
	}
	.modal--active {
		visibility: visible;
		opacity: 1;
	}
	.modal--align-top {
		-webkit-box-align: start;
		-webkit-align-items: flex-start;
		-ms-flex-align: start;
		align-items: flex-start;
	}
	.modal__bg {
		background: transparent;
	}
	.modal__dialog {
		max-width: 600px;
		padding: 1.2rem;
	}
	.modal__content {
		will-change: transform, opacity;
		position: relative;
		padding: 2.4rem;
		background: #fff;
		background-clip: padding-box;
		box-shadow: 0 12px 15px 0 rgba(0,0,0,0.25);
		opacity: 0;
		-webkit-transition: all 0.25s cubic-bezier(0.23, 1, 0.32, 1);
		transition: all 0.25s cubic-bezier(0.23, 1, 0.32, 1);
	}
	.modal__content--active {
		opacity: 1;
	}
	.modal__close {
		z-index: 1100;
		cursor: pointer;
	}
	.modal__trigger {
		position: relative;
		display: inline-block;
		padding: 1.2rem 2.4rem;
		color: #fff;
		line-height: 1;
		cursor: pointer;
		background: #4C9BD6;
		box-shadow: 0 2px 5px 0 rgba(0,0,0,0.26);
		-webkit-tap-highlight-color: rgba(0,0,0,0);
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		-webkit-transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
		transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
	}
	.modal__trigger--active {
		z-index: 10;
	}
	.modal__trigger:hover {
		background: green;
	}
	#modal__temp {
		will-change: transform, opacity;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: #DADDDE;
		-webkit-transform: none;
		transform: none;
		opacity: 1;
		-webkit-transition: opacity 0.1s ease-out, -webkit-transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
		transition: opacity 0.1s ease-out, -webkit-transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
		transition: opacity 0.1s ease-out, transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
		transition: opacity 0.1s ease-out, transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
	}

	body {
		height: 100vh;
	}
	img {
		max-width: 100%;
	}
	.demo-btns header {
		padding: 7vh 10vw;
		background: #ffebee;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
	}
	.demo-btns header h1 {
		margin: 0;
		color: rgba(0,0,0,0.54);
		font-weight: 300;
	}
	.demo-btns .info {
		background: #fff;
		padding: 3vh 10vw;
		height: 70vh;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-flex-flow: column wrap;
		-ms-flex-flow: column wrap;
		flex-flow: column wrap;
	}
	.demo-btns p {
		text-align: center;
		color: #fff;
	}
	.demo-btns .link {
		font-size: 20px;
	}
	.demo-btns .modal__trigger {
		margin-right: 3px;
	}
	@media (max-width: 640px) {
		.demo-btns .modal__trigger {
			margin-bottom: 0.8rem;
		}
	}
	.demo-close {
		position: absolute;
		top: 0;
		right: 0;
		margin: 1.2rem;
		padding: 0.6rem;
		background: rgba(0,0,0,0.3);
		border-radius: 50%;
		-webkit-transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
		transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
	}
	.demo-close svg {
		width: 24px;
		fill: #fff;
		pointer-events: none;
		vertical-align: top;
	}
	.demo-close:hover {
		background: rgba(0,0,0,0.6);
	}
	/* Estilos para el modal */
	#modal-container {
		display: none;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		max-width: 90%; /* Ancho máximo del 90% del viewport width */
		width: 800px; /* Ancho fijo en píxeles, ajusta según sea necesario */
		max-height: 80vh; /* Altura máxima del 80% del viewport height */
		overflow: auto;
		background-color: #fff;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
		z-index: 1000;
		text-align: center; /* Centrar el contenido */
	}


	/* Estilos para el fondo oscurecido */
	#overlay {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.8);
		z-index: 999;
	}

	/* Estilos para el contenido del modal */
	.modal-content {
		text-align: left; /* Alineación del texto */
	}

	/* Estilos para la imagen dentro del modal */
	.modal-content img {
		width: 100%;
		height: 100%;
		object-fit: contain; /* Ajusta la imagen manteniendo la relación de aspecto sin estirarse */
	}