.clients { width: 100%; float: left; text-align: center; }
.clients.spacing { padding: 60px 0; }
.clients ul { width: 100%; float: left; margin: 0; padding: 0; }
.clients ul li { width: 16.66666%; float: left; margin: 0; margin-left: -1px; padding: 20px; border: 1px solid #eee; list-style: none; -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -ms-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; }
.clients ul li:hover { box-shadow: 5px 20px 50px 5px rgba(0, 0, 0, 0.1); position: relative; z-index: 2; }
* {font-family: bebas neue;}
.contenedor{
    position: relative;
    display: inline-block;
    text-align: center;
}
 
.texto-encima{
    position: absolute;
    top: 10px;
    left: 10px;
    padding-right: 10px;
}
.centrado{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.fb,.tw,.go{height: 55px;
width: 55px;
background: url(img/redes.png) no-repeat;
text-indent: -999px;
overflow: hidden;
}
.fb{background-position: -110px 0px}
.go {background-position: -55px 0px}
/********************\
  $Reset ☰
\********************/
* {
  box-sizing:border-box;
}
a {
  text-decoration:none;
}
/*Damos estilos al menú*/
.nav {
  position:absolute;
  width:200px;
  height:100vh;
  top:0;
  right:-220px;
  padding-top:47px;
  background-color: rgba(29, 33, 32, 1);
  transition:all .5s ease; 
  z-index: 11;
}
.nav a:hover{color:white; font-weight: bold}
   /*Estilos de los li del menú*/
   .nav__item {
     display:block;
     width:96%;
     margin:0 auto;
     line-height:2;
     position:relative;
     background-color:transparent;
     font-family: 'Lato', sans-serif;
     text-align:center;
     color:rgba(221, 231, 228, 1);
   }
       /*Damos colocamos el triangulo negro a la pestaña del menú dónde nos encontramos actualmente*/
       .current:before {
          content:"";
          width:0;
          height:0;
          position:absolute; /*Le damos al before una posición absoluta relativa al li que lo contiene*/
          border-top:17px solid transparent;
          border-left:15px solid #1D2120;
          border-bottom:17px solid transparent;
          top:0px;
          right:-15px; /*Lo posicionamos -15px a la derecha de su contenedor*/
          z-index:4; /*le otorgamos un z-index alto para que se posicione arriba de otros elementeos*/
       }
  /*Estos son los estilos de la hamburguesa del menú que abre y cierra el mismo*/
  .menu-toogle {
    position:absolute; /*Lo posicionamos absolutamente para poder darle una posición y poder moverlo según el menú esté abierto o cerrado*/
    width: 35px;
    line-height:1.1;
    text-align:center;
    top:50px; /*Le damos una posición top y left en donde queramos que se encuentre la hamburguesa del menú*/
    right: 8px; 
    border-radius:3px;
    transition: all .5s ease; /*Añadimos una transición para que realice un desplazamineto suave*/
    z-index:10;
  }
    /*Añadimos la haburguesa y le damos unos estilos*/
    .menu-toogle::before {
      content:"☰";
      font-size:32px;
      color:red;
    }

/* Le damos unos estilos al contenedor principal*/
.main-w {
  width:100%;
  height:100vh;
  transition: all .5s ease;
}   
    .header-w figure {
      width:100%;
      height:150px;
      text-align:center;
      position:relative;
    }
        .header-w figure:before {
          content:"O";
          width:15px;
          height:15px;
          position:absolute;
          background-color:white;
          border-radius:100%;
          color:#A9BC00;
          font-size:120%;
          font-wheight:bolder;
          font-family:verdana;
          right:42vw;
          top:9vw;     
        }
        .header-w figure:after {
          content:"O";
          width:15px;
          height:15px;
          position:absolute;
          background-color:white;
          border-radius:100%;
          color:#A9BC00;
          font-size:120%;
          font-wheight:bolder;
          font-family:verdana;
          right:50.8vw;
          top:9vw; 
        }
    .featured-img {
      margin:3em 6vw 0 0;
      border:4px solid white;
      border-radius:100%;
    }
    .header-w__description {
      width:80%;
      height:auto;
      margin:0 auto;
      padding:1em;
      line-height:2;
      text-align:center;
      color:rgba(33, 36, 8, 1);
    }
        .header-w__title
        {
          font-size:300%;
          font-family:Lobster;
          margin:1em 0 0 0;
        }
        .header-w__title2 {
          font-size:250%;
          font-family:Lobster;
          margin:0;
        }
    .paragraph {
      width:80%;
      margin:0 auto;
      text-align:center;
      font-family:'Source Sans Pro', sans-serif;
    }

    /*Estos son los estilos que le dan la funcionalidad al menú*/
    /*El checkbox según esté activado o no hará que el menú aparezca o desaparezca*/
    .checkbox {
      display:none; /*Ocultamos el checkbox pues no nos interesa que se vea*/
    }
    .checkbox:checked ~ .nav {
      right:0px; /*Le quitamos el left negativo para que el menú vuelva a su posición original*/
      position:fixed; /* Fijamos el menú lateral para que se desplace cuando hagamos scroll*/
    }
    .checkbox:checked ~ .main-w {
      margin-right:200px; /*Cuando el checkbox asigna un margen al contenedor principal para que se desplace junto con el menú*/
    }
    .checkbox:checked ~ .menu-toogle { 
      right:208px;
      position:fixed; /*Fijamos la hamburgues para que se desplace junto con el menú*/
    }
    .jumbotron
    {
      background: #ffffff;
    }
    .slide-box
    {
      position: relative;
      z-index: 1;
    }
    .wp-post-image
    {
      border-radius: 3px;
      margin-left: 1rem;
     margin-right: 1rem;
     font-size: 1.1rem;
      width: 150px;
      height: 70px;
      position: relative;
      z-index: 1;
    }
    .jumbotron {
      text-align: center;
      padding: 20px 0px;
      min-height: 200px;
      margin-bottom: 0px;
      position: relative;
      background-repeat: no-repeat;
      background-position: center center;
      background-size: cover;
  }
.bg-cover
  {
    background-image: url("../img/about-us.jpg");
  }
  .bg-cover2
  {
    background-image: url("../img/infografi2.jpg");
  }
  .bg-cover3
  {
    background-image: url("../img/header-3.jpg");
  }
  .jumbotron .page-header {
    margin: 0;
    position: relative;
    z-index: 2;
}
    .jumbotron .page-header h1 {
      font-size: 72px;
      line-height: 85px;
      color: #fff;
      font-family: 'FuturaStd-Bold';
      margin: 0 0 65px;
      padding: 0 10%;
      text-transform: uppercase;
  }
  .jumbotron .page-header small {
    display: block;
    color: #fecb00;
    font-size: 21px;
    font-family: OpenSans;
    padding-top: 40px;
}
    .multi-item-carousel .carousel-inner > .carousel-item {
      transition: 500ms ease-in-out left;
      position: relative;
    overflow: hidden;
    height: 75px;
    }
    .multi-item-carousel .carousel-inner .active.left {
      left: -33%;
    }
    .multi-item-carousel .carousel-inner .active.right {
      left: 33%;
    }
    .multi-item-carousel .carousel-inner .next {
      left: 33%;
    }
    .multi-item-carousel .carousel-inner .prev {
      left: -33%;
    }
    @media all and (transform-3d), (-webkit-transform-3d) {
      .multi-item-carousel .carousel-inner > .carousel-item {
        transition: 500ms ease-in-out left;
        transition: 500ms ease-in-out all;
        -webkit-backface-visibility: visible;
                backface-visibility: visible;
        -webkit-transform: none!important;
                transform: none!important;
      }
    }
    .carousel-control-prev-icon,
.carousel-control-next-icon {
  height: 100px;
  width: 100px;
  background-image: none;
}

.carousel-control-next-icon:after
{
  content: '>';
  font-size: 55px;
  color: red;
}

.carousel-control-prev-icon:after {
  content: '<';
  font-size: 55px;
  color: red;
}
    
    h1 {
      color: white;
      font-size: 2.25em;
      text-align: center;
      margin-top: 1em;
      margin-bottom: 2em;
      text-shadow: 0px 2px 0px #000000;
    }