/*
    #ced322 verde logo
    #26b3d8 azul logo
    verde greenyellow
    #e9665663
    #26b3d8
*/
body{
  font-family: Arial, Helvetica, sans-serif;
  /* background-color: #000000; */
}

/* Scroll Effect */
/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}
/* End Scroll Effect */
/* Header */
.mas-header{
  background-color: #26b3d8;
  position: fixed;
  width: 100%;
  z-index: 200;
}
/* End Header */
/* button menu */
.mas-btnmenu{
  display: block;
  text-align: center;
  font-size: 28px;
  background-color: rgba(255, 255, 255, 0);
  border:0;
}

.mas-btnmenu:hover{
  border: 1px solid;
  border-color:linear-gradient(to left, #26b3d8,#ced322, #e9665663);
  border-radius: 3px;
  background-color: #ced322;
  color: white;
}
.menu-close{
  display: block;
  float: right;
  right: 0%;
  background-color: rgba(255, 255, 255, 0);
  border: 0;
  color: #818181;
}
/* End Button Menus */

/* Cover Menu */
.container-menu{
  display: block;
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  top:0%;
  left:0%;
  z-index: 1000000050;
}
/* End Cover Menu */

/* Menu */
.sidenav {
  height: 100%;
  width: 230px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgb(255, 255, 255);
  overflow-x: hidden;
  padding-top: 20px;
}
.list-group::before{
  background-color: rgba(0, 0, 0, 0);
}
.list-group-item{
  background-color: rgba(255, 255, 255, 0.048);
  color: rgb(228, 236, 114);
}
.sidenav>ul>li>a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.main {
  margin-left: 160px; /* Same as the width of the sidenav */
  font-size: 28px; /* Increased text to enable scrolling */
  padding: 0px 10px;
}

.btn-menusocial{
  display: block;
  width: 60px;
  height: 60px;
  font-size: 28px;
  /* background-color: rgba(255, 204, 255, 0); */
  border: 0;
}

.btn-menusocial:hover{
  font-size: 30.5px;
}
span[class=tooltiptext] {
  visibility: visible;
}

.mas-imgmenulogo{
  width: 145px;
  height: 47px;
}


/* End Menu */
section[class="mas-principal"]{
  display: block;
  height: 500px;
  overflow: hidden;
}
/* carousel */
.mySlides {
  display:none;
}

.mySlides-opacityinit{
 animation-name: opacitys;
 animation-duration: 4s;
 animation-fill-mode: forwards;
}
@keyframes opacitys {
  from{opacity:0.1}
  to{opacity:0.5} 
}

.mas-principal-text {
  font-weight: bold;
  font-size: 38px;
  color: rgb(0, 0, 0);
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  animation-name: txtprincipal;
  animation-duration: 3s;
  animation-fill-mode: forwards;
  
}
@keyframes txtprincipal{
  from{opacity: 0; transform: translate(0%, 0%);}
  to{opacity: 1; transform: translate(-50%, -50%);}
}
/* end carousel */

/* Sections */
.mas-hrsection{
  background-color: #c5c5c5;
  margin-left: 5px;
  margin-right: 5px;
  padding: 3px;
}
.mas-section{
  display: block;
  width: 100%;
  height: auto;
}
.mas-wearetextcard{
  text-align: center;
  color: #c5c5c5;
  font-weight: bold;
  font-size: 18px;
}
.card{
  height: auto;
  z-index: 120;
}
.card-container{
  height: 0;
  position: absolute;
  visibility: hidden;
  background-color: #ffffff;
  z-index: 120;
  
}
.card-container-animation{
 
  animation-name: cardheight;
  animation-duration: 4s;
  animation-fill-mode: forwards;
  z-index: 120;
}

@keyframes cardheight {
  from{height:1%; opacity: 0; padding: 0px; background-color: rgb(255, 255, 255); color: black; border:0; border-radius: 0px; text-shadow: 0px 0 0 #fff, -0px 0 0 #fff, 0 0px 0 #fff, 0 -0px 0 #fff, 0px 0px #fff, -0px -0px 0 #fff, 0px -0px 0 #fff, -0px 0px 0 #fff;}
  to{height:100%; opacity: 1; padding: 5px; background-color: rgba(0, 0, 0, 0.459);color: white; border: 1 px;border-radius: 3.5px; text-shadow: 1px 0 0 #26b3d8, -1px 0 0 #26b3d8, 0 1px 0 #26b3d8, 0 -1px 0 #26b3d8, 0.5px 0.5px #26b3d8, -0.5px -0.5px 0 #26b3d8, 0.5px -0.5px 0 #26b3d8, -0.5px 0.5px 0 #26b3d8;} 
}
.card-txtcontainer{
  font-size: 16px;
  text-align: center;
  font-style: italic;
}
.card:hover{
  background-color: rgb(255, 255, 249);
  outline: none;
    border-color: #9ecaed;
    box-shadow: 0 0 10px #9ecaed;
}
/* End Sections */

/* Tooltips */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -60px;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
/* En Tooltips */
/* Submit */
.mas-btnsubmit{
  float: right;
}
/* End Submit */
/* Media Queries */
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
  .mas-principal-text{
    font-size: 18px;
  }

  section[class="mas-principal"]{
    height: 267px;
  }
  .mas-principal-text {
    top: 20%;
  }
  #mas-mediasocial{
    left: 0%;
    float: right;
    width: auto;
    position: absolute;
    padding-top: 20px;
  }

  #mas-mediasocial .btn-menusocial{
    display: inline-block;
    font-size: 20px;
  }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {}
/* End MediaQueries */