@font-face {
  font-family: titulos;
  src: url(../font/chalet.otf) format("opentype");
}
@font-face {
  font-family: menus;
  src: url(../font/mistral.ttf) format("opentype");
}

@font-face {
  font-family: textos;
  src: url(../font/helvetica.ttf) format("opentype");
}

html, body{
  font-family: textos,  sans-serif;

}

h1, h2, h3, h4, h5, h6, button {
  font-family: titulos,  sans-serif;
}

button{
  font-size: 20px;
  
}
.textomenus{
  font-family: titulos,  sans-serif;
  font-size: 20px;

}

  .colorVerde{
   	 background-color: rgb(149,193,31);
   	 color: rgb(77,77,77);
  }
  .txtColorVerde{
   	 color: rgb(149,193,31);
  }

.colorGris{
	background-color: rgb(77,77,77);
	color:white;
}

.txtColorGris{
   color: rgb(77,77,77);
}

.imgRedonda{
	   /* cambia estos dos valores para definir el tamaño de tu círculo */
    height: 150px;
    width: 150px;
    /* los siguientes valores son independientes del tamaño del círculo */
    background-repeat: no-repeat;
    background-position: 50%;
    border-radius: 50%;
    background-size: 100% auto;
}

.colorFace{
color: white;
}
.colorFace:hover{
color: gray;
}

.colorTwitter{
color: white;
}
.colorTwitter:hover{
color: cyan;
}

.colorLinkEdin{
color: white;
}
.colorLinkEdin:hover{
color: blue;
}

.colorYouTube{
color: white;
}
.colorYouTube:hover{
color:red;
}

 .slideanim {visibility:hidden;}
  .slide {
      animation-name: slide;
      -webkit-animation-name: slide;
      animation-duration: 1s;
      -webkit-animation-duration: 1s;
      visibility: visible;
  }

 #modal00 {
    position:absolute;
    z-index:100004;
}