@import url(https://fonts.googleapis.com/css?family=Roboto:400,700);

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: #fff;
  background-color: #FFFFFF;   /*#444*/
  font: 0/1 'Roboto', sans-serif;
  text-align: center;
    height:100%;
}

.container {
  margin: 0 auto;
  padding: 20px 5px;
}

}



h1 {
  margin: 0 5px 15px;
  font-size: 25px;
  line-height: 1.2;
/*  text-transform: uppercase;  */

/*  text-shadow: 0 0 20px #000; */
}

p {
  margin: 0 5px 5px;
  font-size: 16px;
  line-height: 0.5;
  color: black;
/*  text-transform: uppercase;
  text-shadow: 0 0 20px #000; */
}

.marvel {
  color: #007283;  /*c00*/
}

.header {
  border: 1px solid white;
  padding: 15px;
  color: black;

}

.menu {
  width: 25%;
  float: left;
  padding: 15px;

}

.main {
  width: 75%;
  float: left;
  padding: 15px;
  border: 1px solid red;
}



input {
  position: absolute;
  left: -9999px;
}

label {
  display: inline-block;
  position: relative;
/*  width: 300px; */
  margin: 5px;
 padding: 10px 3px 0px 35px;
/*  background-color: #000; */
  font-size: 13px;
/*  white-space: nowrap; */
  cursor: pointer;
  color: black;
}

label::before {
  content: '';
  display: block;
  position: absolute;
  top: 10px;
  left: 10px;
  width: 18px;
  height: 18px;
/*  border: 2px solid #fff; */
  background-color: #444;
}

.filter-display {
  font-size: 18px;
  padding: 0.5em;
  border: 1px solid #CCC;
  color: blue;
}

input:focus + label {
  outline: 1px solid #fff;
}

input:checked + label::before {
  background-color: #c00;
}

/* width is controlled here and in media queries to ensure that there's always an even number of columns (prevents orphans) */
.characters {
  display: inline-block;
  width: 240px;
  list-style-type: none;
  margin: 15px -5px 0;
  padding: 0;
}

.characters li {
  display: inline-block;
  position: relative;
  margin: 10px;
  padding: 0;
  width: 100px;
  height: 100px;
}

.characters h2 {
  display: none;
  position: absolute;
  z-index: 2;
  top: 70px;
  left: 0px;
  right: 0px;
  margin: 0;
  padding: 4px;
/*  border: 1px solid #fff; */
  color: #fff;
  background-color: #007283;
  font-size: 14px;
  font-weight: normal;
}

.characters img {
  width: 100px;
  height: 100px;
  border: 4px solid #fff;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 0 20px #000;
  opacity: .25;
  transform: scale(.5);
}


#todos:checked ~ .characters [data-teams~="todos"] h2,
#declaracion:checked ~ .characters [data-teams~="declaracion"] h2,
#rezago:checked ~ .characters [data-teams~="rezago"] h2,
#administrativo:checked ~ .characters [data-teams~="administrativo"] h2,
#jurisdiccional:checked ~ .characters [data-teams~="jurisdiccional"] h2,
#ejecutivo:checked ~ .characters [data-teams~="ejecutivo"] h2,
#legislativo:checked ~ .characters [data-teams~="legislativo"] h2,
#poderes:checked ~ .characters [data-teams~="poderes"] h2,
#administrativa:checked ~ .characters [data-teams~="administrativa"] h2,
#civil:checked ~ .characters [data-teams~="civil"] h2,
#penal:checked ~ .characters [data-teams~="penal"] h2,
#laboral:checked ~ .characters [data-teams~="laboral"] h2,
#mixtas:checked ~ .characters [data-teams~="mixtas"] h2,
#empresas:checked ~ .characters [data-teams~="empresas"] h2,
#osc:checked ~ .characters [data-teams~="osc"] h2,
#educativas:checked ~ .characters [data-teams~="educativas"] h2,
#relaciones:checked ~ .characters [data-teams~="relaciones"] h2 {
  display: block;
}

#todos:checked ~ .characters [data-teams~="todos"] img,
#declaracion:checked ~ .characters [data-teams~="declaracion"] img,
#rezago:checked ~ .characters [data-teams~="rezago"] img,
#administrativo:checked ~ .characters [data-teams~="administrativo"] img,
#jurisdiccional:checked ~ .characters [data-teams~="jurisdiccional"] img,
#ejecutivo:checked ~ .characters [data-teams~="ejecutivo"] img,
#legislativo:checked ~ .characters [data-teams~="legislativo"] img,
#poderes:checked ~ .characters [data-teams~="poderes"] img,
#administrativa:checked ~ .characters [data-teams~="administrativa"] img,
#civil:checked ~ .characters [data-teams~="civil"] img,
#penal:checked ~ .characters [data-teams~="penal"] img,
#laboral:checked ~ .characters [data-teams~="laboral"] img,
#mixtas:checked ~ .characters [data-teams~="mixtas"] img,
#empresas:checked ~ .characters [data-teams~="empresas"] img,
#osc:checked ~ .characters [data-teams~="osc"] img,
#educativas:checked ~ .characters [data-teams~="educativas"] img,
#relaciones:checked ~ .characters [data-teams~="relaciones"] img {
  -webkit-animation: avatar .3s forwards;
          animation: avatar .3s forwards;
}

/* fade in and expand image to full size, with a slight bounce */
@-webkit-keyframes avatar {
  70% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes avatar {
  70% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@media only screen and (min-width: 500px) {
  .characters {
    width: 480px;
  }
}

@media only screen and (min-width: 740px) {
  .characters {
    width: 720px;
  }

  h1 {
    font-size: 60px;
  }
}

@media only screen and (min-width: 980px) {
  .characters {
    width: 960px;
  }
}