/*
Aqui puedes agregar tus propios estilos
*/

/* Extra small devices (phones, less than 768px) */
@media (max-width: 768px) {
  .ocultar {
    display: none;
  }
  .text-right {
    text-align: center;
  }
  h1 {
    font-size: 36px !important;
  }
  h2 {
    font-size: 24px !important;
  }
  h3 {
    font-size: 21px !important;
  }
  #fijo {
    display: none;
  }
  .nomargentop {
    text-align: center !important;
  }
  .lead {
    font-size: 14px !important;
  }
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .ocultar {
    display: none;
  }
  h1 {
    font-size: 36px !important;
  }
  h1 small {
    font-size: 55% !important;
  }
  h2 {
    font-size: 24px !important;
  }
  h3 {
    font-size: 21px !important;
  }
  .lead {
    font-size: 12px !important;
  }
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .ocultar {
    display: none;
  }
  h1 {
    font-size: 48px !important;
  }
  h1 small {
    font-size: 55% !important;
  }
  h2 {
    font-size: 30px !important;
  }
  h3 {
    font-size: 24px !important;
  }
  .lead {
    font-size: 14px !important;
  }
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .ocultar {
    display: none;
  }
  h1 {
    font-size: 48px !important;
  }
  h1 small {
    font-size: 55% !important;
  }
  h2 {
    font-size: 30px !important;
  }
  h3 {
    font-size: 24px !important;
  }
  .lead {
    font-size: 16px !important;
  }
}

/* general */
body {
  font-family: serif !important;
  color: #505050 !important;
}

h1 {
  margin-bottom: 5px !important;
}

h2 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

h3 {
  margin-top: 0 !important;
  margin-bottom: 30px !important;
}

.nomargentop {
  margin-top: 0 !important;
}

hr.peq {
  border: 0;
  height: 1px;
  background-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 0.1),
    rgba(0, 0, 0, 0)
  );
  width: 60%;
}

.container-fluid {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

header,
#colonia,
#compite,
#aporte,
#muestra,
footer {
  padding-top: 50px !important;
  padding-bottom: 20px;
}

#explica {
  padding-bottom: 20px;
}

#colonia {
  background-color: #f2f2f2;
  padding-top: 20px;
}

#compite {
  background-color: #e6e6e6;
}

#muestra {
  background-color: #cccccc;
}

#aporte {
  background-color: #f2f2f2;
}

footer {
  background-color: #666;
  color: white;
  padding-top: 40px !important;
}

footer a {
  color: #bfbc9c;
}

footer a:link {
  text-decoration: none;
}

footer a:hover {
  color: white;
  text-decoration: none;
}

footer a:visited,
footer a:active {
  color: #8bb0be;
  text-decoration: none;
}

/*padding bottom*/
.center-block {
  margin-bottom: 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

svg {
  margin-bottom: 20px;
}

/* fixed */
#fijo {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  background-color: #666;
  z-index: 1000;
  height: auto;
  width: auto;
  color: #fff;
  transition: transform 0.25s ease-in-out;
  padding: 10px 0 3px 0;
}

#fijo svg {
  margin-bottom: 0;
}

.headroom--pinned {
  transform: translateY(-100%);
}

.headroom--unpinned {
  transform: translateY(0);
}

/* visualizacion */

#visualizacion {
  height: 500px;
  width: 100%;
  font: 10px serif;
}

.node rect {
  fill-opacity: 0.7;
  shape-rendering: crispEdges;
  stroke-width: 0;
}

.node text {
  text-shadow: 0 0 0 #fff;
}

.link {
  fill: none;
  stroke: #000;
  stroke-opacity: 0.2;
}