@font-face {
	font-family: 'conthrax';
	src: url('conthrax.otf') format('opentype'); 
	}

@font-face {
   font-family: 'montserrat';
   src: url('montserrat.otf') format('opentype');
	font-weight: normal;
   }

@font-face {
   font-family: 'montserrat';
   src: url('montserrat-bold.otf') format('opentype');
   font-weight: bold;
   }



body {
   font-family: 'montserrat', sans-serif;
   background-color: #000000;
   }


.mySlides {
	  position: relative;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  display: block !important; 
  height: 0;
  overflow: hidden;
	}

.mySlides.active {
  opacity: 1;
  height: auto;
	max-height: 99vh;
}

.lang-es { display: inherit; }
body[data-lang="es"] .lang-es { display: inherit; }
body[data-lang="es"] .lang-en { display: none; }

.lang-en { display: none; }
body[data-lang="en"] .lang-es { display: none; }
body[data-lang="en"] .lang-en { display: inherit; }


.langicon {
   margin-top: 5px;
   margin-right: 5px;
   float: right;
   cursor: pointer;
	opacity: 0.4;
   }

.langicon:hover {
   filter: drop-shadow(0 0 10px white);
	opacity: 1;
   }

.langicon.active {
	filter: drop-shadow(0 0 5px white);
	opacity: 1;
	}

.divisor {
	box-shadow: 0px 5px 5px #002030 inset, 0px -5px 5px #001010 inset;
	background-color: #000505;
	height: 20px;
	}

.azulito {
	color: #aaffff;
	}

.bold {
	font-weight: bold
	}

.title1 {
	color: #aaffff;
	text-shadow: 0 0 5px black;
	}

.title2 {
   color: #00aaaa;
   text-shadow: 0 0 5px black;
   }

.topshadow {
	box-shadow: 0 2px 5px #000000;
	}

.menulogo {
	float: left
	}


.iconlinks {
	margin-right: 10px;
	color: #004444;
	}

.menuitem {
	xfloat: left;
	text-decoration: none;
	margin-left: 20px;
	margin-right: 20px;
	padding-right: 5px;
	padding-left: 5px;
	color: #aaffff;
	}


.menulinks {
	margin-top: 10px;
	text-align: center;
	}

.menuitem:hover, .menuitem.active, .menuitem.active:hover {
	background-color: #008888 !important;
	border-radius: 5px;	
	color: #ffffff;
	}

.slidetitles {	
	margin-top: 2em
	}

.slidetitleint { 
	padding-left: 2em;
	}

.slidetitlesec { 
   margin-top: 4em;
   }

.slidetitle {
	margin: 30px;
	margin-top: calc(1vw + 40px);
	margin-bottom: 0px;
	font-size: 3vw;	
	font-family: 'conthrax',  sans-serif;
	color: #aaffff;
	text-shadow: 0 0 5px black
	}

.w3-display-topmiddle {
	min-width: max-content;
	}

.slidesubtitle {
   color: #00aaaa;
   text-shadow: 0 0 5px black
   }

.aboutlogo {
	padding-top: 50px;
	padding-bottom: 50px;
	background: #000000;
	background: linear-gradient(180deg,rgba(0, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
	}

#nosotros {
	padding-bottom: 5em;
	background: #000b14;
	color: white
	}

.imgabout {
	border: solid 1px #000000;
   border-radius: 10px 10px 10px 10px;
	box-shadow: 0 0 10px #111122;
	opacity: 0.9;
	}

.imgabout:hover {
   box-shadow: 0 0 20px #222233;
	opacity: 1;
   }


#soluciones {
	background: #000b14;
	background: linear-gradient(180deg,rgba(0, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
	}


.cardsoluciones {	
	border: solid 1px #004444;
	border-radius: 10px 10px 10px 10px;
	background-color: #ddffff;
	}

.cardsoluciones:hover {
	box-shadow: 0 0 10px #004444;
	background-color: #aaffff;
	}

.cs-body {
	font-size: 0.9em
	}

.cs-container {
	margin-left: 20%; 
	margin-right: 20%;
	}

.cardsolucionesbody {
	margin: 10px;
	min-height: 200px;
	color: black;
	font-size: 0.9em;
	}

.cardsolucionesfoot {
	min-height: 50px;
	text-align: center;
	}

.imgsoluciones {
	border-radius: 8px 8px 0 0;
	}


.vermas {
	border-radius: 5px;
	padding-top: 0px;
	padding-bottom: 3px;
	background-color: #ccffff !important;
	color: #000b18 !important;
	border: solid 1px #00cccc;
	font-weight: bold;
	}

.vermas:hover {
	background-color: #000b18 !important;
	color: #00ffff !important;
	border: solid 1px #008888;
	}



#contact {
	 color: white;
	background: #000b18;
   background: linear-gradient(180deg,rgba(0, 128, 128, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
	}

footer {
	color: white;
   background: #000b18;
	}




.solutions-wrapper {
    position: relative;
    overflow: hidden;
    transition: height 0.5s ease;
}

.solutions-container {
	transition: transform 0.5s ease;
	   width: 100%;
   padding: 10px


	}
.details-container {
	width: 100%;
	padding: 10px
	}

.details-container {
    position: absolute;
    top: 0;
    left: 100%;
	padding-top: 40px;
	xdisplay: none;
	opacity: 0.1;
	transition: opacity 0.9s ease-in-out;
}

.details-container.show {
	opacity: 1;
	left: 0;
	}

.details-container.hide {
	
   }