html { 
    background-color: black;
    }

body {
      margin: 0px;
      padding: 0px;   
  }

/* Video de Index*/
    .header {
      height: 100vh;
      display: flex;
      align-items: center;
      color: #fff;
    }
  
    .content {
      max-width: 40rem;
      padding-left: 1rem;
      padding-right: 1rem;
      margin: auto;
      text-align: left;
    }
    
    .header-video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      overflow: hidden;
    }
    
    .header-video video {
      min-width: 100%;
      min-height: 100%;
    }
    
    .header-overlay {
      height: 100vh;
      width: 100vw;
      position: absolute;
      top: 0;
      left: 0;
      background: #303952;
      z-index: 1;
      opacity: .10;
    }
    
    .header-content {
      z-index: 1;  
    }
    
    .header-content h1 {
      font-size: 70px;
      margin-bottom: 0;
      font-family: 'Lobster'!important;
      color: #650000 !important;
    }
    
    .header-content p {
      font-size: 1.5rem;
      display: block;
      padding-bottom: 2rem;
      font-family: 'Montserrat'!important;
      color: #650000 !important;
    }
    
 /* Menu */ 
  .navbar,.navbar-dropdown, .navbar-item{
      background-color: rgb(0, 0, 0, 0.7) !important;
      font-family: 'Montserrat', sans-serif;
      font-size: 1.0em;
      color: white;
  }
  
  a.navbar-item:hover{
      /*color:#880909 !important;*/
      color:rgb(190, 14, 14) !important;
  }
  
  .navbar-menu{
  background-color: transparent!important;
  }

/*Menu mi Cuenta*/
.breadcrumb a:hover {
  color: brown !important;
}
.breadcrumb a {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9em;
  color: white !important;

}

  /*Inicio Formularios*/
  .input{
    padding: .8em 1em;
    background-color: #ffffff17;
    border-radius: 5px;
    border: none;
    color: white;
    font-family: 'Montserrat', sans-serif;
  }

  .input::placeholder {
    color: rgba(245, 245, 245, 0.432);
    font-size: 0.8rem;
    font-style: normal;
    font-family: 'Montserrat', sans-serif;
  }

  .label {
    color: whitesmoke;
    display: block;
    font-size: 1rem;
    font-weight: 600;
    font-style: normal;
    font-family: 'Montserrat', sans-serif;
  }

  .input,.textarea {
    background-color: #ffffff17;
    border-color: #ffffff17;
    color:white;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: 600;
    font-style: normal;
    font-family: 'Montserrat', sans-serif;
  }
  
  .checkbox:hover, .radio:hover {
    color: brown !important;
    font-family: 'Montserrat', sans-serif;
  }

  .select select{
    border-color: red;
    background-color: #ffffff17;
    border-color: #ffffff17;
    font-size: 1em;
    font-weight: 300;
    font-style: normal;
    color: whitesmoke;
    font-size: 0.8rem;
    font-style: normal;
    font-family: 'Montserrat', sans-serif;
  }
.input:hover,.is-hovered.input, .is-hovered.textarea, .select select.is-hovered, .select select:hover, .textarea:hover{
  background-color: #ffffff17;  
  background: brown!important;
  font-family: 'Montserrat', sans-serif;
  }


 /*Parallax HISTORIA LUD*/
.contenedor{
  max-width: 1080;
  margin: auto;
}

.bloque h1 {
  margin: 0px;
  text-align: center;
  font-size: 60px;
  color: white;
  line-height: 600px;
}

.bloque h2{
  font-size: 24px;
  text-align: center;
  padding-bottom: 15px;
  color: whitesmoke;
  padding-top: 20px;
  padding-left: 30px;
  padding-right: 30px;
}

.bloque p{
  font-size: 18px;
  text-align: justify;
  padding-bottom: 15px;
  padding-left: 30px;
  padding-right: 30px;
}

.bloque.parallax{
  height: 600px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

.parallax.cover-1{
  background-image: url(../images/tinoskyred.jpg);
  padding-top: 20px;
}

.parallax.cover-2{
  background-image: url(../images/felipeausenciored.png);
}

.parallax.cover-3{
  background-image: url(../images/feregrino_04Red.png);
}

/*PARALLAX AMAM*/
.parallax.cover-4{
  background-image: url(../images/red_alonso_rosado.jpg);
}
.parallax.cover-5{
  background-image: url(../images/red_alonsohijo.jpg);
}
.parallax.cover-6{
  background-image: url(../images/red_feregrinohnos.jpg);
}.parallax.cover-7{
  background-image: url(../images/red_moon.jpg);
}
.parallax.cover-8{
  background-image: url(../images/red_antoniomarquez.jpg);
}
.parallax.cover-9{
  background-image: url(../images/red_franciscogonzalez.jpg);
}
.parallax.cover-10{
  background-image: url(../images/red_sakakura.jpg);
}
.parallax.cover-11{
  background-image: url(../images/red_jesustellez.jpg);
}

/*HISTORIA*/
.hist {
  width: 95%;  
  padding: auto;
  /*margin-left: 40px;*/
}

.column-text p{
  margin-top: 90px;
}

.hero-body-hist {
  background-color: rgb(255, 0, 0,0.3);
  margin-top: 50px;
  padding: 3%;
}

.hero-body-hist p,
.hero-body-hist h1,
.hero-body-hist h2{
  color: rgb(255, 255, 255) !important;
  margin: 20px;
}
.firma{
  color: black !important;
  font-style: oblique;
  margin: 20px;
  text-shadow: 2px 2px 3px black;
  margin-left: 40%;
}

.titulo{
  color: black !important;
  font-style: oblique;
  font-size: 30px;
  margin: 20px;
  text-shadow: 2px 2px 3px black;
  margin-left: 20px;
}

.tinovideo{
  height: 700px;
  width: 350px;
  margin: auto;
  }
  
/*Negritas*/
 #negritas b {
  color: black !important;  
 } 

.hero-body-hist li{
  color: rgb(255, 255, 255) !important;
  margin-left: 40px;
}

/*IMAGEN DE HISTORIA*/
.cuadro:hover {
  border-radius: 0%;
  -webkit-border-radius: 0%;
  box-shadow: 0px 0px 15px 15px rgb(236, 115, 30);
  -webkit-box-shadow: 0px 0px 15px 15px rgb(236, 115, 30);
}

/*CARDS- TARJETAS MAESTROS*/
.card {
  display: grid;
  grid-template-columns: 300px;
  grid-template-rows: 210px 210px 80px;
  grid-template-areas: "image" "text" "stats";
  background: black;
  box-shadow: 3px 3px 15px rgba(243, 7, 7, 0.9);
  font-family: roboto;
  text-align: center;
  transition: 0.5s ease;
  cursor: pointer;
  margin: auto;
}

.card-text {
  grid-area: text;
  margin: 10px;
}

.card-text p {
  color: grey;
  font-size:15px;
  font-weight: 300;
}
.card-text h2 {  
  font-size:24px;
}
.card-stats {
  grid-area: stats; 
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  background: rgb(255, 0, 0,0.3);
}
.card-stats .stat {
  padding:10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: white;
}
.card-stats .border {
  border-left: 1px solid rgb(0, 0, 0);
  border-right: 1px solid rgb(0, 0, 0);
}
.card-stats .value{
  font-size: 20px;
  font-weight: 300;
}
.card-stats .value sup{
  font-size:12px;
}
.card-stats .type{
  font-size:11px;
  font-weight: 300;
  text-transform: uppercase;
}
.card:hover {
  transform: scale(1.15);
  box-shadow: 5px 5px 15px rgb(236, 115, 30);
}

/*TABLA DE GRADUACION*/
.table-container {
  margin-top: 60px;
  margin-left: 10%;
  margin-right: 10%;
}

.table {
  background: url(../images/hf.JPG) no-repeat center center fixed;
  background-size: cover; 
  background-color: rgb(0, 0, 0,0.7) ;
  color:rgb(236, 115, 30) !important;
  }

.table tr,
.table th {
  color: rgb(236, 115, 30) !important;
  text-align: left;
}

/*CREDO*/
.video {
  width: 700px;  
  margin-left: 25%;
 
}
  
/*GALERIA*/
.img-gallery{
  width: 80%;
  margin: 50px auto 50px;
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
  gap: 30px;
}
.img-gallery img{
  width: 100%;
  cursor: pointer;
  transition: 1s;
}
.img-gallery img:hover{
  transform: scale(1.2);
}
.ful-img{
  width: 100%;
  height: 100vh;
  background-color: rgb(255, 0, 0,0.3);
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 99;
}
.ful-img span{
  position: absolute;
  top: 5%;
  right: 5%;
  font-size: 30px;
  color: #fff;
  cursor: pointer;
}
.ful-img img{
  width: 90%;
  max-width: 600px;
}

/* RESPONSIVOS */  

  /*mobile: up to 768px*/
  @media (min-width: 240px) and (max-width: 500px) {
    .logo {
        margin-top: 0px;
        margin-left: 48px;
    }
    .logo img {
        width: 80% !important;
    }
}
  @media (min-width: 501px) and (max-width: 767px) {
      .logo {
          margin-top: 0px;
          margin-left: 48px;
      }
      .logo img {
          width: 50% !important;
      }
  }
  
  /*tablet: from 769px*/
  @media (min-width: 768px) and (max-width: 1023px) {
      .logo {
          margin-top: 0px;
          margin-left: 87px;
      }
      .logo img {
          width: 80% !important;
      }
  }
  
  /*desktop: from 1024px*/
  @media (min-width: 1024px) and (max-width: 1215px) {
   
  }
  
  /*widescreen: from 1216px*/
  @media (min-width: 1216px) and (max-width: 1407px) {
   
  }
  /*fullhd: from 1408px*/
  @media (min-width: 1408px){
   
  }