body {
   background: #343a40;
   color: white;
   font-family: 'Playfair Display', serif;
 }
 .centrardatos {
   margin: 40px;
   padding:  10px 10px 10px;
   text-align: justify;
 }
 .datasheet { /*
   margen de las fichas de jugadores
   */
   margin: auto;
   padding:20px 20px;
   width: 65%;
   height: 25%;
   float: right;
 }
 .margen {
   border: 5px solid #870B0B;
   padding: 10px;
 }
 /*********************
 barra de redes sociales
 ********************/

 .social-bar{
   position: fixed;
   right: 0;
   top: 35%;
   font-size: 1.5rem;
   display: flex;
   flex-direction: column;
   align-items: flex-end;
   z-index: 100;
 }
 .icon{
   color: white;
   text-decoration: none;
   padding: 0.7rem;
   display: flex;
   transition: All .5s;
 }
 .icon-facebook {
   background: #2E64FE;
 }
 .icon-twitter {
   background: #2E9AFE;
 }
 .icon-mail4 {
   background: #088A85;
 }
 .icon-instagram {
   background: #2E2E2E;
 }
 .icon-whatsapp {
   background: #04B431;
 }
 .icon-youtube {
   background: red;
 }
 /************
 imagen de inicio bandera
 *************/
 .enter {
   margin-left: auto;
   padding: 20px 50px 0px;
   display: block;
   width: 80px;
   height: 55px;
 }
 /***********************
  imagenes de GKU de inicio
 ***********************/
 .gkuteam{
   border-radius: 50%;
   height: 140px;
   width: 140px;
   align: center;
 }
 .gkuteam:hover{
 transform:scale(2.0);
 border-radius: none;
 transition: 1.5s;

 }
/***********************
centrado de logo en index
***********************/
 .centrado{
     margin: auto;
     display: block;
     width: 40%;
     height: 40%;
     padding: 2px 0px 0px;
 }
 /*******************
 centrado de imagenes para jugadores
 **********************/
 .center {
   width: 270px;
   height: 350px;
 }
 .center2 {
   width: 340px;
   height: 250px;
   padding: 20px;
 }

 /***********************
  imagenes height
  *********************/
  .brenda{
    width: 200px;
    height: 250px;
  }

 /**********************
  header
 ************************/

  .centrado2 {
  opacity: 1;
  margin: auto;
  display: block;
  width: 200px;
  height: 30%;
  float: center;

  }
  @media screen and (max-width: 800px) {
    .centrado2{
      float: center;
      display: block;
      width: 30%;
      height: 30%;
    }
  }
  .lenguaje{ /**clase para el cambio de idiomas */
    text-decoration: none;
    color: black;
    margin: auto;
    padding: 10px;

  }
  @media screen and (max-width: 800px) {
    .lenguaje{
      width: 10px;
      height: 10px;
      margin: auto;
      padding: 10px;
    }
  }
/***********************
aqui modifique los inconos de imagen
de la pag contacto
***********************/

h3 { /* letra de titulos */
  color: black;
  font-style: italic;
  font-size: 25px;
  font-family: 'Playfair Display';
  text-decoration: none;
}
h1 {
  color: black;
  font-style: italic;
  font-family: 'Playfair Display';
  text-decoration: none;

}
h2 {
  font-family: 'Playfair Display';
  text-decoration: none;
}
.form-control {
   background: white;
   color: black;
   padding: 10px;
 }
 form textarea {
   width: 20em;
   color: red;
 }

 .form-send {
 border:none;
 border-radius: 10px;
 background-color: #870B0B;
 height: 40px;
 width: 70px;
 color: #fff;
}
  #wrapper {
    max-width: 940px;
    padding: 0 0 40px;
}
#primary{
  width: 50%;
  float: left;
  padding: 10px 40px;
}
#secundary{
  width: 50%;
  float: right;
  padding: 10px 40px;
}
.contact-info a {
  display: block;
  min-height: 20px;
  padding: 0 0 0 30px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  margin: 0 0 10px;
}
.contact-info li.Phone a {
  background-image: url('../img/phone.png');
}
.contact-info li.email a {
  background-image: url('../img/mail.png');
}
.contact-info li.twitter a {
  background-image: url('../img/twitter.png');
}
.contact-info li.Facebook a {
  background-image: url('../img/facebook.png');
}

/**********************
pie de paginas,
alineacion de las imagenes de facebook
y Twitter
********************/
footer{
  font-size: 0.75em;
  text-align: center;
  padding-top:50px;
  color: black;
  clear: both;
  background:white;
}
.social-icon {
  width: 40px;
  height: 40px;
  margin: 0 5px;
  text-align: center;
}
.imgfooter{
  text-align: right;
  max-width: 40%;
  max-height: 50%;
}
/*******************
prueba de nav
********************/

header {
  width: 100%;
  overflow: hidden;
  background: white;
  border-bottom: 4px solid red; /*este es el color del border*/
  margin-bottom: ;
  font-family: 'Merriweather', serif;
  padding: 30px 10px;
}
.wrapper {
  width: 90%;
  max-width: 1000px;
  margin: auto;
  overflow: hidden;
  text-align: center;
}
header .logo{
  color: black;
  font-size: 30px;
  text-align: center;
  padding: 10px;
}
header nav{
  text-align: center;
  line-height: 20px;
  text-decoration: none;
}
header nav a {
  display: inline-block;
  color: black;
  text-decoration: none;
  padding: 20px 20px;
  line-height: none;
  font-size: 20px;
  text-align: right;
  transition: All 500ms ease;
  -webkit-transition: All 500ms ease;
  -o-transition:All 500ms ease;
}

  ul ol{
    list-style: none;
}

  .nav > li{
    text-decoration: none;
    list-style: none;
    padding: 5px;
}

 .nav li ul{
   list-style: none;
   display: none;
   position: absolute ;
   min-width: 10px;
}
.nav li a {
  font-family: 'Merriweather', serif;
  display: inline-block;
  color: black;
  text-decoration: none;
  padding: 25px 20px;
  line-height: none;
  font-size: 20px;
  font-weight: ;
  text-align: right;
  transition: All 500ms ease;
  -webkit-transition: All 500ms ease;
  -o-transition:All 500ms ease;

}
  .nav li:hover > ul {
    display: block;

  }
header .nav a:hover {/**color del circulo al seleccionar una dirección**/
  background: #870B0B;
  border-radius: 70px;
  text-decoration: none;
  color: white;
}
header nav a:hover {/**color del circulo al seleccionar una dirección**/
  background: #870B0B;
  border-radius: 70px;
  text-decoration: none;
  color: white;
}
/*********************
en esta clase hacemos que se navegue
durante la investigación
^*************************/
.header2 {
  position: fixed;
  height: 200px;
}
.header2 .logo{
  line-height: 100px;
  font-size: 20px;
  padding: 10px 10px;
}
.header2 nav {
  line-height: 100px;
}
@@media screen and (max-width: 800px) {
  header .logo,
  header nav{
    width: 100%;
    text-align: center;
    line-height: 100px;
  }
  .header2 {
    height: auto;
  }
  .header2 .logo
  .header2 .nav {
    line-height: 40px;
  }
}
.dropbtn {
  background-color:white;
  color: black;
  padding: 16px;
  font-size: 20px;
  border: none;

}

.dropdown {
  position: relative;
  display: inline-block;
  transition: All 500ms ease;
  -webkit-transition: All 500ms ease;
  -o-transition:All 500ms ease;
}

.dropdown-content {
  display: none;
  position: absolute;
  font-size: 15px;
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 5px 5px;
  text-decoration:none;
  font-size: 10px;
}

.dropdown-content a:hover {background-color: #870B0B}

.dropdown:hover .dropdown-content {
  display: block;
  border: none;
}

.dropdown:hover .dropbtn {
  background: #870B0B;
  color: white;
  border-radius: 70px;
}

.dropbtn {
  background-color:white;
  color: black;
  padding: 16px;
  font-size: 20px;
  border: none;

}
/**************
dropdown de languages
**************/

.drop {
  position: relative;
  display: inline-block;
  transition: All 500ms ease;
  -webkit-transition: All 500ms ease;
  -o-transition:All 500ms ease;
}

.drop-content {
  display: none;
  position: absolute;
  font-size: 15px;
  z-index: 1;
}

.drop-content a {
  color: black;
  padding: 10px 5px;
  text-decoration:none;
  font-size: 10px;
}

.drop-content a:hover {background-color: none}

.drop:hover .drop-content {
  display: block;
  border: none;
}

.drop:hover .dropbutn {
  background:white;
  color: black;
  border-radius: 70px;
}
.dropbutn {
  background-color:white;
  color: black;
  padding: 12px;
  font-size: 20px;
  border: none;

}

@media screen and (max-width: 950px){
  .carousel-inner,
  .w-75{
    width: 450px;
    height: 250px;
  }
}

@media screen and(max-width: 800px){
  header nav{
    position: fixed;
  }
}

/******
imagenes de promesas
*******/
.image.fit {
  display: block;
  margin: 2.5rem 0;
  width: 100%;

}
  .image.fit:first-child {
    margin-top: 0;
  }

  .image.fit img {
    width: 100%;
  }

  .box {
    border: solid 2px;
    margin-bottom: 2rem;
    padding: 1.5rem;
  }

    .box > :last-child,
    .box > :last-child > :last-child,
    .box > :last-child > :last-child > :last-child {
      margin-bottom: 0;
    }

    .box.alt {
      border: 0;
      border-radius: 0;
      padding: 0;
    }

  .box {
    border-color: #eeeeee;
  }
  .row.gtr-50 {
    margin-top: 0;
    margin-left: -0.75rem;
  }

    .row.gtr-50 > * {
      padding: 0 0 0 0.75rem;
    }

    .row.gtr-50.gtr-uniform {
      margin-top: -0.75rem;
    }

      .row.gtr-50.gtr-uniform > * {
        padding-top: 0.75rem;
      }

  .row {
    margin-top: 0;
    margin-left: -1.5rem;
  }

    .row > * {
      padding: 0 0 0 1.5rem;
    }

    .row.gtr-uniform {
      margin-top: -1.5rem;
    }

      .row.gtr-uniform > * {
        padding-top: 1.5rem;
      }

      .row > .col-4 {
        width: 33.33333%;
      }

      .row > .col-4-xlarge {
        width: 33.33333%;
      }

      .row > .col-4-large {
        width: 33.33333%;
      }
      .row > .col-4-medium {
        width: 33.33333%;
      }

      .row > .col-4-small {
        width: 33.33333%;
      }

      .row > .col-4-xsmall {
        width: 33.33333%;
      }

      .row > .col-4-xxsmall {
        width: 33.33333%;
      }