0

he flotado mi ul y dado a los links de los li, un display:block ya que quiero que cuando hago hover, ocupe todo su contenido de alto, quiero que haga lo mismo con ES/EN/FR, es un ul también pero si lo floto a la izquierda, el logo que esta a la izquierda se moverá. Quiero que quede primero el logo, luego ES/EN/FR y a la derecha flotado mi ul, así que le di position:relative, ahora se ve así pero aun que le de block, no ocupa todo su alto.

introducir la descripción de la imagen aquí

Éste es mi código:

url('../fonts/lato-v14-latin-100.svg#Lato') format('svg'); /* Legacy iOS */
}

/* lato-100italic - latin */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 100;
  src: url('../fonts/lato-v14-latin-100italic.eot'); /* IE9 Compat Modes */
  src: local('Lato Hairline Italic'), local('Lato-HairlineItalic'),
  url('../fonts/lato-v14-latin-100italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/lato-v14-latin-100italic.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/lato-v14-latin-100italic.woff') format('woff'), /* Modern Browsers */
  url('../fonts/lato-v14-latin-100italic.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/lato-v14-latin-100italic.svg#Lato') format('svg'); /* Legacy iOS */
}

/* lato-300 - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/lato-v14-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Lato Light'), local('Lato-Light'),
  url('../fonts/lato-v14-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/lato-v14-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/lato-v14-latin-300.woff') format('woff'), /* Modern Browsers */
  url('../fonts/lato-v14-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/lato-v14-latin-300.svg#Lato') format('svg'); /* Legacy iOS */
}

/* lato-300italic - latin */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/lato-v14-latin-300italic.eot'); /* IE9 Compat Modes */
  src: local('Lato Light Italic'), local('Lato-LightItalic'),
  url('../fonts/lato-v14-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/lato-v14-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/lato-v14-latin-300italic.woff') format('woff'), /* Modern Browsers */
  url('../fonts/lato-v14-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/lato-v14-latin-300italic.svg#Lato') format('svg'); /* Legacy iOS */
}

/* lato-italic - latin */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/lato-v14-latin-italic.eot'); /* IE9 Compat Modes */
  src: local('Lato Italic'), local('Lato-Italic'),
  url('../fonts/lato-v14-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/lato-v14-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/lato-v14-latin-italic.woff') format('woff'), /* Modern Browsers */
  url('../fonts/lato-v14-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/lato-v14-latin-italic.svg#Lato') format('svg'); /* Legacy iOS */
}

/* lato-700 - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/lato-v14-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Lato Bold'), local('Lato-Bold'),
  url('../fonts/lato-v14-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/lato-v14-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/lato-v14-latin-700.woff') format('woff'), /* Modern Browsers */
  url('../fonts/lato-v14-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/lato-v14-latin-700.svg#Lato') format('svg'); /* Legacy iOS */
}

/* lato-900 - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/lato-v14-latin-900.eot'); /* IE9 Compat Modes */
  src: local('Lato Black'), local('Lato-Black'),
  url('../fonts/lato-v14-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/lato-v14-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/lato-v14-latin-900.woff') format('woff'), /* Modern Browsers */
  url('../fonts/lato-v14-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/lato-v14-latin-900.svg#Lato') format('svg'); /* Legacy iOS */
}
/* montserrat-100 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100;
  src: url('../fonts/montserrat-v12-latin-100.eot'); /* IE9 Compat Modes */
  src: local('Montserrat Thin'), local('Montserrat-Thin'),
  url('../fonts/montserrat-v12-latin-100.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/montserrat-v12-latin-100.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/montserrat-v12-latin-100.woff') format('woff'), /* Modern Browsers */
  url('../fonts/montserrat-v12-latin-100.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/montserrat-v12-latin-100.svg#Montserrat') format('svg'); /* Legacy iOS */
}

/* montserrat-100italic - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 100;
  src: url('../fonts/montserrat-v12-latin-100italic.eot'); /* IE9 Compat Modes */
  src: local('Montserrat Thin Italic'), local('Montserrat-ThinItalic'),
  url('../fonts/montserrat-v12-latin-100italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/montserrat-v12-latin-100italic.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/montserrat-v12-latin-100italic.woff') format('woff'), /* Modern Browsers */
  url('../fonts/montserrat-v12-latin-100italic.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/montserrat-v12-latin-100italic.svg#Montserrat') format('svg'); /* Legacy iOS */
}

/* montserrat-200 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/montserrat-v12-latin-200.eot'); /* IE9 Compat Modes */
  src: local('Montserrat ExtraLight'), local('Montserrat-ExtraLight'),
  url('../fonts/montserrat-v12-latin-200.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/montserrat-v12-latin-200.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/montserrat-v12-latin-200.woff') format('woff'), /* Modern Browsers */
  url('../fonts/montserrat-v12-latin-200.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/montserrat-v12-latin-200.svg#Montserrat') format('svg'); /* Legacy iOS */
}

/* montserrat-300 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/montserrat-v12-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Montserrat Light'), local('Montserrat-Light'),
  url('../fonts/montserrat-v12-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/montserrat-v12-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/montserrat-v12-latin-300.woff') format('woff'), /* Modern Browsers */
  url('../fonts/montserrat-v12-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/montserrat-v12-latin-300.svg#Montserrat') format('svg'); /* Legacy iOS */
}

/* montserrat-300italic - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/montserrat-v12-latin-300italic.eot'); /* IE9 Compat Modes */
  src: local('Montserrat Light Italic'), local('Montserrat-LightItalic'),
  url('../fonts/montserrat-v12-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/montserrat-v12-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/montserrat-v12-latin-300italic.woff') format('woff'), /* Modern Browsers */
  url('../fonts/montserrat-v12-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/montserrat-v12-latin-300italic.svg#Montserrat') format('svg'); /* Legacy iOS */
}

/* montserrat-regular - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/montserrat-v12-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Montserrat Regular'), local('Montserrat-Regular'),
  url('../fonts/montserrat-v12-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/montserrat-v12-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/montserrat-v12-latin-regular.woff') format('woff'), /* Modern Browsers */
  url('../fonts/montserrat-v12-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/montserrat-v12-latin-regular.svg#Montserrat') format('svg'); /* Legacy iOS */
}

/* montserrat-500italic - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/montserrat-v12-latin-500italic.eot'); /* IE9 Compat Modes */
  src: local('Montserrat Medium Italic'), local('Montserrat-MediumItalic'),
  url('../fonts/montserrat-v12-latin-500italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/montserrat-v12-latin-500italic.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/montserrat-v12-latin-500italic.woff') format('woff'), /* Modern Browsers */
  url('../fonts/montserrat-v12-latin-500italic.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/montserrat-v12-latin-500italic.svg#Montserrat') format('svg'); /* Legacy iOS */
}

/* montserrat-600 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/montserrat-v12-latin-600.eot'); /* IE9 Compat Modes */
  src: local('Montserrat SemiBold'), local('Montserrat-SemiBold'),
  url('../fonts/montserrat-v12-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/montserrat-v12-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/montserrat-v12-latin-600.woff') format('woff'), /* Modern Browsers */
  url('../fonts/montserrat-v12-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/montserrat-v12-latin-600.svg#Montserrat') format('svg'); /* Legacy iOS */
}

/* montserrat-700italic - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/montserrat-v12-latin-700italic.eot'); /* IE9 Compat Modes */
  src: local('Montserrat Bold Italic'), local('Montserrat-BoldItalic'),
  url('../fonts/montserrat-v12-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/montserrat-v12-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/montserrat-v12-latin-700italic.woff') format('woff'), /* Modern Browsers */
  url('../fonts/montserrat-v12-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/montserrat-v12-latin-700italic.svg#Montserrat') format('svg'); /* Legacy iOS */
}

/* montserrat-700 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/montserrat-v12-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Montserrat Bold'), local('Montserrat-Bold'),
  url('../fonts/montserrat-v12-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/montserrat-v12-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/montserrat-v12-latin-700.woff') format('woff'), /* Modern Browsers */
  url('../fonts/montserrat-v12-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/montserrat-v12-latin-700.svg#Montserrat') format('svg'); /* Legacy iOS */
}

/* montserrat-900 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/montserrat-v12-latin-900.eot'); /* IE9 Compat Modes */
  src: local('Montserrat Black'), local('Montserrat-Black'),
  url('../fonts/montserrat-v12-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/montserrat-v12-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/montserrat-v12-latin-900.woff') format('woff'), /* Modern Browsers */
  url('../fonts/montserrat-v12-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/montserrat-v12-latin-900.svg#Montserrat') format('svg'); /* Legacy iOS */
}

/* ------------------ ESTILOS GENERALES ------------------*/
body{
  font-family: 'Montserrat', sans-serif;
  background-color: #fff;
  overflow-x: hidden;
  color: #4f4e4e;
}


li{
  list-style: none;
}

h1{
  font-family: 'Lato', sans-serif;
  font-size: 15px;
  text-align: center;
  margin-top: 110px;
  text-transform: uppercase;
  letter-spacing: 15px;
  font-weight: 300;
  color: black;
  transition: all 1.3s;
}

h2{
  text-transform: uppercase;
  margin: 20px 0;
}

h2:not(.diferente){
  font-size: 1.7em;
}



h3{
  font-size: 18px;
  font-weight: 900;
  font-style: oblique;
}

p{
  line-height: 30px;
  font-weight: 300;
  font-size: 1.3em;
  letter-spacing: 2px;
  padding: 30px 0;
}

span{
  font-style: oblique;
  font-weight: 400;
}

a{
  color: black;
  font-weight: 300;
  transition: all .2s linear;
}

.boton{
  text-transform: uppercase;
  border: 1px solid black;
  font-size: 1.3em;
  display: block;
  width: 210px;
  text-align: center;
  padding: 5px 10px;
  border-radius: 3px;
  transition: .2s all;
}

.boton:hover{
  transform: scale(1.1);
}

img{
  width: 100%;
  border-radius: 3px;
}

nav a:hover{
  background-color: #e4dada;
}


.fa::before{
  font-size: 28px;
  color: #5c5151;
  margin-top: 20px;
  margin-left: 0;
}

.h2Reducido i::before{
  font-size: 20px;
  margin-right: 10px;
}




.overlay{
  position: fixed;
  width: 100%;
  height: 100vh;
  background-color: black;
  z-index: 999;
}

.containerOverlay{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.spinner {
  width: 30px;
  height: 30px;
  background-color: white;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.4);
  margin: 0 auto;
  animation: rotar .3s linear infinite;
}

@keyframes rotar {
  0%{
    transform: rotate(0deg);
  }
  25%{
    transform: rotate(90deg);
  }
  50%{
    transform: rotate(180deg);
  }
  75%{
    transform: rotate(270deg);
  }
  100%{
    transform: rotate(360deg);
  }
}


/* ------------------ BARRA DE NAVEGACION ------------------*/

nav{
  border-bottom: 2px solid #D8D8D8;
  height: 72px;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #FAFAFA;
  opacity: .9;
  transition: all 1s;
  z-index: 999;
}


nav.oculto{
  transform: translateY(-100px);
}

nav img{
  width: 70px;
  margin: 10px;
  opacity: .6;
}

nav li{
  display: inline-block;
}

nav ul{
  float: right;
  padding: 0;
}

nav a{
  display: block;
  padding: 0px 12px;
  line-height: 70px;
  text-transform: uppercase;
  letter-spacing: 2px;
}





.idiomas{
  position: absolute;
  left: 100px;
  top: 20px;
}

.idiomas li{
  display: inline-block;
}

.idiomas a{
  line-height: 30px;
  display: block;
}






section{
  padding: 80px;
}

/* ------------------ SECTION 0 HERO------------------*/

#hero{
  background: rgba(0,0,0,.1) url('../img/wallpapers/wallpaper_hero.jpg') no-repeat fixed center top / cover;
  width: 100%;
  height: 100vh;
}


/* ------------------ SECTION 1 NOSOTROS------------------*/

.botonBlanco{
  margin: -20px auto 0 auto;
}

#nosotros h2{
  text-align: center;
}




/* ------------------ SECTION 2 NUESTROS PRODUCTOS ------------------*/


.marco{
  text-align: center;
  /*margin: 20px;*/
}

#productos article p {
  padding: 20px;
  font-size: 1.1em;
  line-height: 25px;
}






/* ------------------ SECTION 3 CALIDAD ------------------*/
#video{
  display: block;
  width: 700px;
  height: 400px;
  margin-left: 100px;
  border-radius: 4px;
}


/*//VER ESTO!!!!!!*/

#calidad{
  background: black url('../img/wallpapers/lab2.jpg') no-repeat fixed center bottom / cover;
  width: 100%;
  color: black;
  position: relative;
}

#calidad::before{
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #FFFFFF;
  background-image: linear-gradient(180deg, #FFFFFF 0%, #969bae 50%, #7c7676 100%);
  opacity: .6;
}

#calidad header{
  position: relative;
}







/*.row{
border: 1px solid red;
}

.col-lg-8, .col-lg-4, .col-lg-3, .col-lg-2, .col-12, .col-md-6, .col-md-8, .col-md-4, .col-md-3, .col-lg-12, .col-xl-12, .col-xl-10, .col-xl-3, .col-xl-4, .col-xl-6, .col-lg-4{
border: 1px solid blue;
}

section{
  border: 1px solid green;
}*/
<!DOCTYPE html>
<html lang="es">
<head>
  <title>Central de ingredientes S.L</title>

  <!-- Descripcion en google -->
  <meta name="description" content="Desde 1994 somos tu proveedor de productos lácteos tanto nacional como internacional">

  <!-- Codificación -->
  <meta charset="utf-8">

  <!-- Estilos -->
  <link rel="stylesheet" href="css/font/flaticon.css" type="text/css">
  <link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="css/style.css">

  <!-- Responsive -->
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">

  <!-- Robots -->
  <meta name="robots" content="index,follow">

  <!-- Favicones -->
  <link type="image/png" rel="icon" href="img/favicons/cow-512-231943.png">


</head>
<body>

  <div class="overlay">
    <div class="containerOverlay">
      <div class="spinner"></div>
      <p>Cargando...</p>
    </div>
  </div>

  <header id="hero">
    <div class="container">
      <div class="row">
        <div class="col-xs-12">
          <h1>Central de ingredientes</h1>
        </div>
      </div>
    </div>
  </header>

  <nav>
    <img src="https://cdn.pixabay.com/photo/2016/06/28/17/26/cow-1485012_1280.png" alt="Logo">
    <ul class="idiomas">
      <li><a href="#">EN</a></li>
      <li><a href="#">ES</a></li>
      <li><a href="#">FR</a></li>
    </ul>
    <ul>
      <li><a href="#" class="menu" data-id="#inicio">Inicio</a></li>
      <li><a href="#" class="menu" data-id="#nosotros">Quienes somos</a></li>
      <li><a href="#" class="menu" data-id="#productos">Productos</a></li>
      <li><a href="#" class="menu" data-id="#calidad">Calidad</a></li>
      <li><a href="#" class="menu" data-id="#logística">Logistica</a></li>
      <li><a href="#" class="menu" data-id="#medio_ambiente">Medio ambiente</a></li>
      <li><a href="#" class="menu" data-id="#contacto">Contacto</a></li>
    </ul>
  </nav>

  <main>
    <section id="nosotros">
      <div class="container">
        <div class="row">
          <div class="col-xl-12">
            <header>
              <h2 class="diferente">Somos <span>central de ingredientes</span> desde 1994</h2>
            </header>
          </div>
        </div>
        <div class="row">
          <div class="col-md-6">
            <p>Después de más de 20 años dedicado al sector lácteo, <span>central de ingredientes</span> se ha consolidado en el mercado, destacando tanto por su calidad, seriedad y confiabilidad en la fabricación tanto de preparados lácteos en polvo para chocolatería, como heladería o galletería. Incorporándose posteriormente al grupo su filial <span>Global blends ibérica</span></p>
            <a href="#" class="boton botonBlanco">Contáctanos</a>
          </div>
          <div class="col-md-6">
            <img src="img/wallpapers/grey.jpg" alt="Photo">
          </div>
        </div>
      </div>
    </section>

    <section id="productos">
      <div class="container">
        <div class="row">
          <div class="col-lg-12">
            <header>
              <h2 class="h2Reducido"> <i class="fa flaticon-star"></i>Nuestros <span>productos</span></h2>
              <h3>A strive for the Highest Quality</h3>
              <p>Interfood supplies dairy products and solutions to the dairy industry for various applications like recombined dairy, yoghurt or cheese. The food industry sources with Interfood any application requiring dairy ingredients for example ice cream, beverages, chocolate, bakery or confectionery..</p>
            </header>
          </div>
        </div>
        <div class="ro">
          <div class="col-lg-4">
            <article class="marco">
              <i class="fa flaticon-test-tube"></i>
              <h4>Milkpowders and derivatives</h4>
              <p>Interfood offers you flexible solutions by delivering milkpowders and derivatives in a variety of compositions, origins and packaging according to your requirements.</p>
            </article>
          </div>
          <div class="col-lg-4">
            <article class="marco">
              <i class="fa flaticon-milk-1"></i>
              <h4>Butter</h4>
              <p>Interfood offers you flexible solutions by delivering butter and AMF in a variety of compositions, origins and packaging according to your requirements.</p>
            </article>
          </div>
          <div class="col-lg-4">
            <article class="marco">
              <i class="fa flaticon-analytics"></i>
              <h4>Cheese</h4>
              <p>Cheese is produced throughout the world in wide-ranging flavours, textures and forms. Cheese consists of proteins and fat from milk, usually the milk of cows, buffalos, goats, or sheep..</p>
            </article>
          </div>
        </div>

        <div class="row">
          <div class="col-lg-4">
            <article class="marco">
              <i class="fa flaticon-stars"></i>
              <h4>Dairy proteins</h4>
              <p>Various kinds of proteins have many different applications. For example in sports nutrition, cheese, yogurt, energy bars, drinks and meat to name a few. Proteins are also used as a functional ingredient to stabilize emulsions and for the manufacturing of fat filleds, toppings and foamers.</p>
            </article>
          </div>
          <div class="col-lg-4">
            <article class="marco">
              <i class="fa flaticon-plant"></i>
              <h4>Fatfilled milkpowder</h4>
              <p>A fat filled is an economical replacement of full cream milk powder based on vegetable fat. Interfood has a wide range, either palm or coconut oil based, fat filled milkpowders on offer with proteins starting from 2% up to 26% of protein. </p>
            </article>
          </div>
          <div class="col-lg-4">
            <article class="marco">
              <i class="fa flaticon-like"></i>
              <h4>Infant milkpowder</h4>
              <p>Focusing on business to business, Interfood is able to offer base powders of the highest quality for infant formula, follow on food formula and growing up milk. </p>
            </article>
          </div>

        </div>
        <div class="row">
          <div class="col-xs-12">
            <a href="#" class="boton">Más información</a>
          </div>
        </div>
      </div>

    </section>



    <!--
    <section id="calidad">
    <div class="container">

    <div class="row">
    <div class="col-xl-12">
    <header>
    <h2>Somos [central de ingredientes] desde 1994</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor </p>
  </header>
</div>
</div>

<div class="row">
<div class="col-xl-4">
<p>Después de más de 20 años dedicado al sector lácteo, <span>central de ingredientes</span> se ha consolidado en el mercado, destacando tanto por su calidad, seriedad y confiabilidad en la fabricación tanto de preparados lácteos en polvo para chocolatería, como heladería o galletería. Incorporándose posteriormente al grupo su filial <span>Global blends ibérica</span></p>
<a href="#" class="boton botonBlanco">Contáctanos</a>
</div>

<div class="col-xl-4">
</div>
<div class="col-xl-4">
<p>Después de más de 20 años dedicado al sector lácteo, <span>central de ingredientes</span> se ha consolidado en el mercado, destacando tanto por su calidad, seriedad y confiabilidad en la fabricación tanto de preparados lácteos en polvo para chocolatería, como heladería o galletería. Incorporándose posteriormente al grupo su filial <span>Global blends ibérica</span></p>
<a href="#" class="boton botonBlanco">Contáctanos</a>
</div>
</div>

</div>
</section> -->

<section id="logistica">

  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-4">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
      <div class="col-lg-8">
        <video id="video" controls>
          <source src="video/video.mp4" type="video/mp4">
            <source src="video/video.ogv" type="video/ogg">
              <source src="video/video.webm" type="video/webm">
              </video>

            </div>

          </div>
        </div>
      </section>



    </main>
    <script  src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="js/app.js" charset="utf-8"></script>
  </body>
  </html>

1
  • Hola francisco dwq. La pregunta es correcta y se ajusta bien a la temática y formato del sitio, el ejemplo parece un poco amplio (hay mucho CSS), para próximas publicaciones sería bueno que leyeras ejemplo mínimo verificable. Allí encontrarás cómo crear ejemplos más cortos que ayudarán a los usuarios a definir el problema y encontrar una solución más rápido.
    – Alvaro Montoro
    Commented el 7 feb. 2018 a las 18:49

2 respuestas 2

0

El problema está en esta parte de tu CSS:

.idiomas{
  position: absolute;
  left: 100px;
  top: 20px;
}

.idiomas li{
  display: inline-block;
}

.idiomas a{
  line-height: 30px;
  display: block;
}

Si quieres que los idiomas ocupen todo el alto, manteniendo tu CSS lo más posible, deberías hacer los siguientes cambios:

  • Hacer que .idiomas ocupe todo el alto del contenedor (height:100%) y quitarle el top (o ponerlo a 0)
  • Hacer que los li ocupen el 100% del alto del ul (height:100%)
  • Quitar el line-height de los enlaces

Con esos cambios el código se verá así:

.idiomas{
  position: absolute;
  left: 100px;
  top: 0px;
  height: 100%;
}

.idiomas li{
  display: inline-block;
  height: 100%;
}

.idiomas a{
  display: block;
}

Y ya funciona:

url('../fonts/lato-v14-latin-100.svg#Lato') format('svg'); /* Legacy iOS */
}

/* lato-100italic - latin */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 100;
  src: url('../fonts/lato-v14-latin-100italic.eot'); /* IE9 Compat Modes */
  src: local('Lato Hairline Italic'), local('Lato-HairlineItalic'),
  url('../fonts/lato-v14-latin-100italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/lato-v14-latin-100italic.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/lato-v14-latin-100italic.woff') format('woff'), /* Modern Browsers */
  url('../fonts/lato-v14-latin-100italic.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/lato-v14-latin-100italic.svg#Lato') format('svg'); /* Legacy iOS */
}

/* lato-300 - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/lato-v14-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Lato Light'), local('Lato-Light'),
  url('../fonts/lato-v14-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/lato-v14-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/lato-v14-latin-300.woff') format('woff'), /* Modern Browsers */
  url('../fonts/lato-v14-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/lato-v14-latin-300.svg#Lato') format('svg'); /* Legacy iOS */
}

/* lato-300italic - latin */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/lato-v14-latin-300italic.eot'); /* IE9 Compat Modes */
  src: local('Lato Light Italic'), local('Lato-LightItalic'),
  url('../fonts/lato-v14-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/lato-v14-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/lato-v14-latin-300italic.woff') format('woff'), /* Modern Browsers */
  url('../fonts/lato-v14-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/lato-v14-latin-300italic.svg#Lato') format('svg'); /* Legacy iOS */
}

/* lato-italic - latin */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/lato-v14-latin-italic.eot'); /* IE9 Compat Modes */
  src: local('Lato Italic'), local('Lato-Italic'),
  url('../fonts/lato-v14-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/lato-v14-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/lato-v14-latin-italic.woff') format('woff'), /* Modern Browsers */
  url('../fonts/lato-v14-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/lato-v14-latin-italic.svg#Lato') format('svg'); /* Legacy iOS */
}

/* lato-700 - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/lato-v14-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Lato Bold'), local('Lato-Bold'),
  url('../fonts/lato-v14-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/lato-v14-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/lato-v14-latin-700.woff') format('woff'), /* Modern Browsers */
  url('../fonts/lato-v14-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/lato-v14-latin-700.svg#Lato') format('svg'); /* Legacy iOS */
}

/* lato-900 - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/lato-v14-latin-900.eot'); /* IE9 Compat Modes */
  src: local('Lato Black'), local('Lato-Black'),
  url('../fonts/lato-v14-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/lato-v14-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/lato-v14-latin-900.woff') format('woff'), /* Modern Browsers */
  url('../fonts/lato-v14-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/lato-v14-latin-900.svg#Lato') format('svg'); /* Legacy iOS */
}
/* montserrat-100 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100;
  src: url('../fonts/montserrat-v12-latin-100.eot'); /* IE9 Compat Modes */
  src: local('Montserrat Thin'), local('Montserrat-Thin'),
  url('../fonts/montserrat-v12-latin-100.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/montserrat-v12-latin-100.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/montserrat-v12-latin-100.woff') format('woff'), /* Modern Browsers */
  url('../fonts/montserrat-v12-latin-100.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/montserrat-v12-latin-100.svg#Montserrat') format('svg'); /* Legacy iOS */
}

/* montserrat-100italic - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 100;
  src: url('../fonts/montserrat-v12-latin-100italic.eot'); /* IE9 Compat Modes */
  src: local('Montserrat Thin Italic'), local('Montserrat-ThinItalic'),
  url('../fonts/montserrat-v12-latin-100italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/montserrat-v12-latin-100italic.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/montserrat-v12-latin-100italic.woff') format('woff'), /* Modern Browsers */
  url('../fonts/montserrat-v12-latin-100italic.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/montserrat-v12-latin-100italic.svg#Montserrat') format('svg'); /* Legacy iOS */
}

/* montserrat-200 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/montserrat-v12-latin-200.eot'); /* IE9 Compat Modes */
  src: local('Montserrat ExtraLight'), local('Montserrat-ExtraLight'),
  url('../fonts/montserrat-v12-latin-200.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/montserrat-v12-latin-200.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/montserrat-v12-latin-200.woff') format('woff'), /* Modern Browsers */
  url('../fonts/montserrat-v12-latin-200.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/montserrat-v12-latin-200.svg#Montserrat') format('svg'); /* Legacy iOS */
}

/* montserrat-300 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/montserrat-v12-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Montserrat Light'), local('Montserrat-Light'),
  url('../fonts/montserrat-v12-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/montserrat-v12-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/montserrat-v12-latin-300.woff') format('woff'), /* Modern Browsers */
  url('../fonts/montserrat-v12-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/montserrat-v12-latin-300.svg#Montserrat') format('svg'); /* Legacy iOS */
}

/* montserrat-300italic - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/montserrat-v12-latin-300italic.eot'); /* IE9 Compat Modes */
  src: local('Montserrat Light Italic'), local('Montserrat-LightItalic'),
  url('../fonts/montserrat-v12-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/montserrat-v12-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/montserrat-v12-latin-300italic.woff') format('woff'), /* Modern Browsers */
  url('../fonts/montserrat-v12-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/montserrat-v12-latin-300italic.svg#Montserrat') format('svg'); /* Legacy iOS */
}

/* montserrat-regular - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/montserrat-v12-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Montserrat Regular'), local('Montserrat-Regular'),
  url('../fonts/montserrat-v12-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/montserrat-v12-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/montserrat-v12-latin-regular.woff') format('woff'), /* Modern Browsers */
  url('../fonts/montserrat-v12-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/montserrat-v12-latin-regular.svg#Montserrat') format('svg'); /* Legacy iOS */
}

/* montserrat-500italic - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/montserrat-v12-latin-500italic.eot'); /* IE9 Compat Modes */
  src: local('Montserrat Medium Italic'), local('Montserrat-MediumItalic'),
  url('../fonts/montserrat-v12-latin-500italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/montserrat-v12-latin-500italic.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/montserrat-v12-latin-500italic.woff') format('woff'), /* Modern Browsers */
  url('../fonts/montserrat-v12-latin-500italic.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/montserrat-v12-latin-500italic.svg#Montserrat') format('svg'); /* Legacy iOS */
}

/* montserrat-600 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/montserrat-v12-latin-600.eot'); /* IE9 Compat Modes */
  src: local('Montserrat SemiBold'), local('Montserrat-SemiBold'),
  url('../fonts/montserrat-v12-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/montserrat-v12-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/montserrat-v12-latin-600.woff') format('woff'), /* Modern Browsers */
  url('../fonts/montserrat-v12-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/montserrat-v12-latin-600.svg#Montserrat') format('svg'); /* Legacy iOS */
}

/* montserrat-700italic - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/montserrat-v12-latin-700italic.eot'); /* IE9 Compat Modes */
  src: local('Montserrat Bold Italic'), local('Montserrat-BoldItalic'),
  url('../fonts/montserrat-v12-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/montserrat-v12-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/montserrat-v12-latin-700italic.woff') format('woff'), /* Modern Browsers */
  url('../fonts/montserrat-v12-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/montserrat-v12-latin-700italic.svg#Montserrat') format('svg'); /* Legacy iOS */
}

/* montserrat-700 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/montserrat-v12-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Montserrat Bold'), local('Montserrat-Bold'),
  url('../fonts/montserrat-v12-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/montserrat-v12-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/montserrat-v12-latin-700.woff') format('woff'), /* Modern Browsers */
  url('../fonts/montserrat-v12-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/montserrat-v12-latin-700.svg#Montserrat') format('svg'); /* Legacy iOS */
}

/* montserrat-900 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/montserrat-v12-latin-900.eot'); /* IE9 Compat Modes */
  src: local('Montserrat Black'), local('Montserrat-Black'),
  url('../fonts/montserrat-v12-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/montserrat-v12-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/montserrat-v12-latin-900.woff') format('woff'), /* Modern Browsers */
  url('../fonts/montserrat-v12-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/montserrat-v12-latin-900.svg#Montserrat') format('svg'); /* Legacy iOS */
}

/* ------------------ ESTILOS GENERALES ------------------*/
body{
  font-family: 'Montserrat', sans-serif;
  background-color: #fff;
  overflow-x: hidden;
  color: #4f4e4e;
}


li{
  list-style: none;
}

h1{
  font-family: 'Lato', sans-serif;
  font-size: 15px;
  text-align: center;
  margin-top: 110px;
  text-transform: uppercase;
  letter-spacing: 15px;
  font-weight: 300;
  color: black;
  transition: all 1.3s;
}

h2{
  text-transform: uppercase;
  margin: 20px 0;
}

h2:not(.diferente){
  font-size: 1.7em;
}



h3{
  font-size: 18px;
  font-weight: 900;
  font-style: oblique;
}

p{
  line-height: 30px;
  font-weight: 300;
  font-size: 1.3em;
  letter-spacing: 2px;
  padding: 30px 0;
}

span{
  font-style: oblique;
  font-weight: 400;
}

a{
  color: black;
  font-weight: 300;
  transition: all .2s linear;
}

.boton{
  text-transform: uppercase;
  border: 1px solid black;
  font-size: 1.3em;
  display: block;
  width: 210px;
  text-align: center;
  padding: 5px 10px;
  border-radius: 3px;
  transition: .2s all;
}

.boton:hover{
  transform: scale(1.1);
}

img{
  width: 100%;
  border-radius: 3px;
}

nav a:hover{
  background-color: #e4dada;
}


.fa::before{
  font-size: 28px;
  color: #5c5151;
  margin-top: 20px;
  margin-left: 0;
}

.h2Reducido i::before{
  font-size: 20px;
  margin-right: 10px;
}




.overlay{
  position: fixed;
  width: 100%;
  height: 100vh;
  background-color: black;
  z-index: 999;
}

.containerOverlay{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.spinner {
  width: 30px;
  height: 30px;
  background-color: white;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.4);
  margin: 0 auto;
  animation: rotar .3s linear infinite;
}

@keyframes rotar {
  0%{
    transform: rotate(0deg);
  }
  25%{
    transform: rotate(90deg);
  }
  50%{
    transform: rotate(180deg);
  }
  75%{
    transform: rotate(270deg);
  }
  100%{
    transform: rotate(360deg);
  }
}


/* ------------------ BARRA DE NAVEGACION ------------------*/

nav{
  border-bottom: 2px solid #D8D8D8;
  height: 72px;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #FAFAFA;
  opacity: .9;
  transition: all 1s;
  z-index: 999;
}


nav.oculto{
  transform: translateY(-100px);
}

nav img{
  width: 70px;
  margin: 10px;
  opacity: .6;
}

nav li{
  display: inline-block;
}

nav ul{
  float: right;
  padding: 0;
}

nav a{
  display: block;
  padding: 0px 12px;
  line-height: 70px;
  text-transform: uppercase;
  letter-spacing: 2px;
}





.idiomas{
  position: absolute;
  left: 100px;
  top: 0px;
  height: 100%;
}

.idiomas li{
  display: inline-block;
  height: 100%;
}

.idiomas a{
  display: block;
}






section{
  padding: 80px;
}

/* ------------------ SECTION 0 HERO------------------*/

#hero{
  background: rgba(0,0,0,.1) url('../img/wallpapers/wallpaper_hero.jpg') no-repeat fixed center top / cover;
  width: 100%;
  height: 100vh;
}


/* ------------------ SECTION 1 NOSOTROS------------------*/

.botonBlanco{
  margin: -20px auto 0 auto;
}

#nosotros h2{
  text-align: center;
}




/* ------------------ SECTION 2 NUESTROS PRODUCTOS ------------------*/


.marco{
  text-align: center;
  /*margin: 20px;*/
}

#productos article p {
  padding: 20px;
  font-size: 1.1em;
  line-height: 25px;
}






/* ------------------ SECTION 3 CALIDAD ------------------*/
#video{
  display: block;
  width: 700px;
  height: 400px;
  margin-left: 100px;
  border-radius: 4px;
}


/*//VER ESTO!!!!!!*/

#calidad{
  background: black url('../img/wallpapers/lab2.jpg') no-repeat fixed center bottom / cover;
  width: 100%;
  color: black;
  position: relative;
}

#calidad::before{
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #FFFFFF;
  background-image: linear-gradient(180deg, #FFFFFF 0%, #969bae 50%, #7c7676 100%);
  opacity: .6;
}

#calidad header{
  position: relative;
}







/*.row{
border: 1px solid red;
}

.col-lg-8, .col-lg-4, .col-lg-3, .col-lg-2, .col-12, .col-md-6, .col-md-8, .col-md-4, .col-md-3, .col-lg-12, .col-xl-12, .col-xl-10, .col-xl-3, .col-xl-4, .col-xl-6, .col-lg-4{
border: 1px solid blue;
}

section{
  border: 1px solid green;
}*/
<!DOCTYPE html>
<html lang="es">
<head>
  <title>Central de ingredientes S.L</title>

  <!-- Descripcion en google -->
  <meta name="description" content="Desde 1994 somos tu proveedor de productos lácteos tanto nacional como internacional">

  <!-- Codificación -->
  <meta charset="utf-8">

  <!-- Estilos -->
  <link rel="stylesheet" href="css/font/flaticon.css" type="text/css">
  <link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="css/style.css">

  <!-- Responsive -->
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">

  <!-- Robots -->
  <meta name="robots" content="index,follow">

  <!-- Favicones -->
  <link type="image/png" rel="icon" href="img/favicons/cow-512-231943.png">


</head>
<body>

  <div class="overlay">
    <div class="containerOverlay">
      <div class="spinner"></div>
      <p>Cargando...</p>
    </div>
  </div>

  <header id="hero">
    <div class="container">
      <div class="row">
        <div class="col-xs-12">
          <h1>Central de ingredientes</h1>
        </div>
      </div>
    </div>
  </header>

  <nav>
    <img src="https://cdn.pixabay.com/photo/2016/06/28/17/26/cow-1485012_1280.png" alt="Logo">
    <ul class="idiomas">
      <li><a href="#">EN</a></li>
      <li><a href="#">ES</a></li>
      <li><a href="#">FR</a></li>
    </ul>
    <ul>
      <li><a href="#" class="menu" data-id="#inicio">Inicio</a></li>
      <li><a href="#" class="menu" data-id="#nosotros">Quienes somos</a></li>
      <li><a href="#" class="menu" data-id="#productos">Productos</a></li>
      <li><a href="#" class="menu" data-id="#calidad">Calidad</a></li>
      <li><a href="#" class="menu" data-id="#logística">Logistica</a></li>
      <li><a href="#" class="menu" data-id="#medio_ambiente">Medio ambiente</a></li>
      <li><a href="#" class="menu" data-id="#contacto">Contacto</a></li>
    </ul>
  </nav>

  <main>
    <section id="nosotros">
      <div class="container">
        <div class="row">
          <div class="col-xl-12">
            <header>
              <h2 class="diferente">Somos <span>central de ingredientes</span> desde 1994</h2>
            </header>
          </div>
        </div>
        <div class="row">
          <div class="col-md-6">
            <p>Después de más de 20 años dedicado al sector lácteo, <span>central de ingredientes</span> se ha consolidado en el mercado, destacando tanto por su calidad, seriedad y confiabilidad en la fabricación tanto de preparados lácteos en polvo para chocolatería, como heladería o galletería. Incorporándose posteriormente al grupo su filial <span>Global blends ibérica</span></p>
            <a href="#" class="boton botonBlanco">Contáctanos</a>
          </div>
          <div class="col-md-6">
            <img src="img/wallpapers/grey.jpg" alt="Photo">
          </div>
        </div>
      </div>
    </section>

    <section id="productos">
      <div class="container">
        <div class="row">
          <div class="col-lg-12">
            <header>
              <h2 class="h2Reducido"> <i class="fa flaticon-star"></i>Nuestros <span>productos</span></h2>
              <h3>A strive for the Highest Quality</h3>
              <p>Interfood supplies dairy products and solutions to the dairy industry for various applications like recombined dairy, yoghurt or cheese. The food industry sources with Interfood any application requiring dairy ingredients for example ice cream, beverages, chocolate, bakery or confectionery..</p>
            </header>
          </div>
        </div>
        <div class="ro">
          <div class="col-lg-4">
            <article class="marco">
              <i class="fa flaticon-test-tube"></i>
              <h4>Milkpowders and derivatives</h4>
              <p>Interfood offers you flexible solutions by delivering milkpowders and derivatives in a variety of compositions, origins and packaging according to your requirements.</p>
            </article>
          </div>
          <div class="col-lg-4">
            <article class="marco">
              <i class="fa flaticon-milk-1"></i>
              <h4>Butter</h4>
              <p>Interfood offers you flexible solutions by delivering butter and AMF in a variety of compositions, origins and packaging according to your requirements.</p>
            </article>
          </div>
          <div class="col-lg-4">
            <article class="marco">
              <i class="fa flaticon-analytics"></i>
              <h4>Cheese</h4>
              <p>Cheese is produced throughout the world in wide-ranging flavours, textures and forms. Cheese consists of proteins and fat from milk, usually the milk of cows, buffalos, goats, or sheep..</p>
            </article>
          </div>
        </div>

        <div class="row">
          <div class="col-lg-4">
            <article class="marco">
              <i class="fa flaticon-stars"></i>
              <h4>Dairy proteins</h4>
              <p>Various kinds of proteins have many different applications. For example in sports nutrition, cheese, yogurt, energy bars, drinks and meat to name a few. Proteins are also used as a functional ingredient to stabilize emulsions and for the manufacturing of fat filleds, toppings and foamers.</p>
            </article>
          </div>
          <div class="col-lg-4">
            <article class="marco">
              <i class="fa flaticon-plant"></i>
              <h4>Fatfilled milkpowder</h4>
              <p>A fat filled is an economical replacement of full cream milk powder based on vegetable fat. Interfood has a wide range, either palm or coconut oil based, fat filled milkpowders on offer with proteins starting from 2% up to 26% of protein. </p>
            </article>
          </div>
          <div class="col-lg-4">
            <article class="marco">
              <i class="fa flaticon-like"></i>
              <h4>Infant milkpowder</h4>
              <p>Focusing on business to business, Interfood is able to offer base powders of the highest quality for infant formula, follow on food formula and growing up milk. </p>
            </article>
          </div>

        </div>
        <div class="row">
          <div class="col-xs-12">
            <a href="#" class="boton">Más información</a>
          </div>
        </div>
      </div>

    </section>



    <!--
    <section id="calidad">
    <div class="container">

    <div class="row">
    <div class="col-xl-12">
    <header>
    <h2>Somos [central de ingredientes] desde 1994</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor </p>
  </header>
</div>
</div>

<div class="row">
<div class="col-xl-4">
<p>Después de más de 20 años dedicado al sector lácteo, <span>central de ingredientes</span> se ha consolidado en el mercado, destacando tanto por su calidad, seriedad y confiabilidad en la fabricación tanto de preparados lácteos en polvo para chocolatería, como heladería o galletería. Incorporándose posteriormente al grupo su filial <span>Global blends ibérica</span></p>
<a href="#" class="boton botonBlanco">Contáctanos</a>
</div>

<div class="col-xl-4">
</div>
<div class="col-xl-4">
<p>Después de más de 20 años dedicado al sector lácteo, <span>central de ingredientes</span> se ha consolidado en el mercado, destacando tanto por su calidad, seriedad y confiabilidad en la fabricación tanto de preparados lácteos en polvo para chocolatería, como heladería o galletería. Incorporándose posteriormente al grupo su filial <span>Global blends ibérica</span></p>
<a href="#" class="boton botonBlanco">Contáctanos</a>
</div>
</div>

</div>
</section> -->

<section id="logistica">

  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-4">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
      <div class="col-lg-8">
        <video id="video" controls>
          <source src="video/video.mp4" type="video/mp4">
            <source src="video/video.ogv" type="video/ogg">
              <source src="video/video.webm" type="video/webm">
              </video>

            </div>

          </div>
        </div>
      </section>



    </main>
    <script  src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="js/app.js" charset="utf-8"></script>
  </body>
  </html>

3
  • vale gracias, pero mi idea era hacerlo sin position absolute, no ahy otra forma? Commented el 7 feb. 2018 a las 19:21
  • @franciscodwq podrías quitarle el position:absolute y en su lugar agregarle display: inline-block y float: none (manteniendo el resto de cambios de la respuesta)
    – Alvaro Montoro
    Commented el 7 feb. 2018 a las 19:38
  • Te he colocado otra forma @franciscodwq usando flex-box y align-items: stretch, la revisas y me cuentas. Commented el 7 feb. 2018 a las 23:57
0

Hay una forma de lograrlo, pero usando flexbox tanto en el nav, .idiomas, los li y a y la propiedad que mágicamente hará la magia es align-itemsn: stretch la cual fuerza a los elemento anidados a cubrir todo el alto del contenedor. Algo así:

nav{
  display: flex;
}

nav, .idiomas, .idiomas li, .idiomas a{
  align-items: stretch;      
}

.idiomas, .idiomas li, .idiomas a{
  display: inline-flex;
  align-content: center;
}

.idiomas a{
  align-items: center;
}

Te pongo un ejemplo con tus mismo estilos, agregando los nuevos estilos al final de los tuyos, obviamente modificandolos un poco para poder contrarrestar otros estilos que tienes y que "dificultan" esta solución.

url('../fonts/lato-v14-latin-100.svg#Lato') format('svg'); /* Legacy iOS */
}

/* lato-100italic - latin */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 100;
  src: url('../fonts/lato-v14-latin-100italic.eot'); /* IE9 Compat Modes */
  src: local('Lato Hairline Italic'), local('Lato-HairlineItalic'),
  url('../fonts/lato-v14-latin-100italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/lato-v14-latin-100italic.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/lato-v14-latin-100italic.woff') format('woff'), /* Modern Browsers */
  url('../fonts/lato-v14-latin-100italic.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/lato-v14-latin-100italic.svg#Lato') format('svg'); /* Legacy iOS */
}

/* lato-300 - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/lato-v14-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Lato Light'), local('Lato-Light'),
  url('../fonts/lato-v14-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/lato-v14-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/lato-v14-latin-300.woff') format('woff'), /* Modern Browsers */
  url('../fonts/lato-v14-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/lato-v14-latin-300.svg#Lato') format('svg'); /* Legacy iOS */
}

/* lato-300italic - latin */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/lato-v14-latin-300italic.eot'); /* IE9 Compat Modes */
  src: local('Lato Light Italic'), local('Lato-LightItalic'),
  url('../fonts/lato-v14-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/lato-v14-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/lato-v14-latin-300italic.woff') format('woff'), /* Modern Browsers */
  url('../fonts/lato-v14-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/lato-v14-latin-300italic.svg#Lato') format('svg'); /* Legacy iOS */
}

/* lato-italic - latin */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/lato-v14-latin-italic.eot'); /* IE9 Compat Modes */
  src: local('Lato Italic'), local('Lato-Italic'),
  url('../fonts/lato-v14-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/lato-v14-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/lato-v14-latin-italic.woff') format('woff'), /* Modern Browsers */
  url('../fonts/lato-v14-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/lato-v14-latin-italic.svg#Lato') format('svg'); /* Legacy iOS */
}

/* lato-700 - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/lato-v14-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Lato Bold'), local('Lato-Bold'),
  url('../fonts/lato-v14-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/lato-v14-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/lato-v14-latin-700.woff') format('woff'), /* Modern Browsers */
  url('../fonts/lato-v14-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/lato-v14-latin-700.svg#Lato') format('svg'); /* Legacy iOS */
}

/* lato-900 - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/lato-v14-latin-900.eot'); /* IE9 Compat Modes */
  src: local('Lato Black'), local('Lato-Black'),
  url('../fonts/lato-v14-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/lato-v14-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/lato-v14-latin-900.woff') format('woff'), /* Modern Browsers */
  url('../fonts/lato-v14-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/lato-v14-latin-900.svg#Lato') format('svg'); /* Legacy iOS */
}
/* montserrat-100 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100;
  src: url('../fonts/montserrat-v12-latin-100.eot'); /* IE9 Compat Modes */
  src: local('Montserrat Thin'), local('Montserrat-Thin'),
  url('../fonts/montserrat-v12-latin-100.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/montserrat-v12-latin-100.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/montserrat-v12-latin-100.woff') format('woff'), /* Modern Browsers */
  url('../fonts/montserrat-v12-latin-100.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/montserrat-v12-latin-100.svg#Montserrat') format('svg'); /* Legacy iOS */
}

/* montserrat-100italic - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 100;
  src: url('../fonts/montserrat-v12-latin-100italic.eot'); /* IE9 Compat Modes */
  src: local('Montserrat Thin Italic'), local('Montserrat-ThinItalic'),
  url('../fonts/montserrat-v12-latin-100italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/montserrat-v12-latin-100italic.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/montserrat-v12-latin-100italic.woff') format('woff'), /* Modern Browsers */
  url('../fonts/montserrat-v12-latin-100italic.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/montserrat-v12-latin-100italic.svg#Montserrat') format('svg'); /* Legacy iOS */
}

/* montserrat-200 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/montserrat-v12-latin-200.eot'); /* IE9 Compat Modes */
  src: local('Montserrat ExtraLight'), local('Montserrat-ExtraLight'),
  url('../fonts/montserrat-v12-latin-200.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/montserrat-v12-latin-200.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/montserrat-v12-latin-200.woff') format('woff'), /* Modern Browsers */
  url('../fonts/montserrat-v12-latin-200.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/montserrat-v12-latin-200.svg#Montserrat') format('svg'); /* Legacy iOS */
}

/* montserrat-300 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/montserrat-v12-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Montserrat Light'), local('Montserrat-Light'),
  url('../fonts/montserrat-v12-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/montserrat-v12-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/montserrat-v12-latin-300.woff') format('woff'), /* Modern Browsers */
  url('../fonts/montserrat-v12-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/montserrat-v12-latin-300.svg#Montserrat') format('svg'); /* Legacy iOS */
}

/* montserrat-300italic - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/montserrat-v12-latin-300italic.eot'); /* IE9 Compat Modes */
  src: local('Montserrat Light Italic'), local('Montserrat-LightItalic'),
  url('../fonts/montserrat-v12-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/montserrat-v12-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/montserrat-v12-latin-300italic.woff') format('woff'), /* Modern Browsers */
  url('../fonts/montserrat-v12-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/montserrat-v12-latin-300italic.svg#Montserrat') format('svg'); /* Legacy iOS */
}

/* montserrat-regular - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/montserrat-v12-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Montserrat Regular'), local('Montserrat-Regular'),
  url('../fonts/montserrat-v12-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/montserrat-v12-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/montserrat-v12-latin-regular.woff') format('woff'), /* Modern Browsers */
  url('../fonts/montserrat-v12-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/montserrat-v12-latin-regular.svg#Montserrat') format('svg'); /* Legacy iOS */
}

/* montserrat-500italic - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/montserrat-v12-latin-500italic.eot'); /* IE9 Compat Modes */
  src: local('Montserrat Medium Italic'), local('Montserrat-MediumItalic'),
  url('../fonts/montserrat-v12-latin-500italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/montserrat-v12-latin-500italic.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/montserrat-v12-latin-500italic.woff') format('woff'), /* Modern Browsers */
  url('../fonts/montserrat-v12-latin-500italic.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/montserrat-v12-latin-500italic.svg#Montserrat') format('svg'); /* Legacy iOS */
}

/* montserrat-600 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/montserrat-v12-latin-600.eot'); /* IE9 Compat Modes */
  src: local('Montserrat SemiBold'), local('Montserrat-SemiBold'),
  url('../fonts/montserrat-v12-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/montserrat-v12-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/montserrat-v12-latin-600.woff') format('woff'), /* Modern Browsers */
  url('../fonts/montserrat-v12-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/montserrat-v12-latin-600.svg#Montserrat') format('svg'); /* Legacy iOS */
}

/* montserrat-700italic - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/montserrat-v12-latin-700italic.eot'); /* IE9 Compat Modes */
  src: local('Montserrat Bold Italic'), local('Montserrat-BoldItalic'),
  url('../fonts/montserrat-v12-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/montserrat-v12-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/montserrat-v12-latin-700italic.woff') format('woff'), /* Modern Browsers */
  url('../fonts/montserrat-v12-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/montserrat-v12-latin-700italic.svg#Montserrat') format('svg'); /* Legacy iOS */
}

/* montserrat-700 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/montserrat-v12-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Montserrat Bold'), local('Montserrat-Bold'),
  url('../fonts/montserrat-v12-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/montserrat-v12-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/montserrat-v12-latin-700.woff') format('woff'), /* Modern Browsers */
  url('../fonts/montserrat-v12-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/montserrat-v12-latin-700.svg#Montserrat') format('svg'); /* Legacy iOS */
}

/* montserrat-900 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/montserrat-v12-latin-900.eot'); /* IE9 Compat Modes */
  src: local('Montserrat Black'), local('Montserrat-Black'),
  url('../fonts/montserrat-v12-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/montserrat-v12-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/montserrat-v12-latin-900.woff') format('woff'), /* Modern Browsers */
  url('../fonts/montserrat-v12-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/montserrat-v12-latin-900.svg#Montserrat') format('svg'); /* Legacy iOS */
}

/* ------------------ ESTILOS GENERALES ------------------*/
body{
  font-family: 'Montserrat', sans-serif;
  background-color: #fff;
  overflow-x: hidden;
  color: #4f4e4e;
}


li{
  list-style: none;
}

h1{
  font-family: 'Lato', sans-serif;
  font-size: 15px;
  text-align: center;
  margin-top: 110px;
  text-transform: uppercase;
  letter-spacing: 15px;
  font-weight: 300;
  color: black;
  transition: all 1.3s;
}

h2{
  text-transform: uppercase;
  margin: 20px 0;
}

h2:not(.diferente){
  font-size: 1.7em;
}



h3{
  font-size: 18px;
  font-weight: 900;
  font-style: oblique;
}

p{
  line-height: 30px;
  font-weight: 300;
  font-size: 1.3em;
  letter-spacing: 2px;
  padding: 30px 0;
}

span{
  font-style: oblique;
  font-weight: 400;
}

a{
  color: black;
  font-weight: 300;
  transition: all .2s linear;
}

.boton{
  text-transform: uppercase;
  border: 1px solid black;
  font-size: 1.3em;
  display: block;
  width: 210px;
  text-align: center;
  padding: 5px 10px;
  border-radius: 3px;
  transition: .2s all;
}

.boton:hover{
  transform: scale(1.1);
}

img{
  width: 100%;
  border-radius: 3px;
}

nav a:hover{
  background-color: #e4dada;
}


.fa::before{
  font-size: 28px;
  color: #5c5151;
  margin-top: 20px;
  margin-left: 0;
}

.h2Reducido i::before{
  font-size: 20px;
  margin-right: 10px;
}




.overlay{
  position: fixed;
  width: 100%;
  height: 100vh;
  background-color: black;
  z-index: 999;
}

.containerOverlay{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.spinner {
  width: 30px;
  height: 30px;
  background-color: white;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.4);
  margin: 0 auto;
  animation: rotar .3s linear infinite;
}

@keyframes rotar {
  0%{
    transform: rotate(0deg);
  }
  25%{
    transform: rotate(90deg);
  }
  50%{
    transform: rotate(180deg);
  }
  75%{
    transform: rotate(270deg);
  }
  100%{
    transform: rotate(360deg);
  }
}


/* ------------------ BARRA DE NAVEGACION ------------------*/

nav{
  border-bottom: 2px solid #D8D8D8;
  height: 72px;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #FAFAFA;
  opacity: .9;
  transition: all 1s;
  z-index: 999;
}


nav.oculto{
  transform: translateY(-100px);
}

nav img{
  width: 70px;
  margin: 10px;
  opacity: .6;
}

nav li{
  display: inline-block;
}

nav ul{
  float: right;
  padding: 0;
}

nav a{
  display: block;
  padding: 0px 12px;
  line-height: 70px;
  text-transform: uppercase;
  letter-spacing: 2px;
}





.idiomas{
  position: absolute;
  left: 100px;
  top: 20px;
}

.idiomas li{
  display: inline-block;
}

.idiomas a{
  line-height: 30px;
  display: block;
}






section{
  padding: 80px;
}

/* ------------------ SECTION 0 HERO------------------*/

#hero{
  background: rgba(0,0,0,.1) url('../img/wallpapers/wallpaper_hero.jpg') no-repeat fixed center top / cover;
  width: 100%;
  height: 100vh;
}


/* ------------------ SECTION 1 NOSOTROS------------------*/

.botonBlanco{
  margin: -20px auto 0 auto;
}

#nosotros h2{
  text-align: center;
}




/* ------------------ SECTION 2 NUESTROS PRODUCTOS ------------------*/


.marco{
  text-align: center;
  /*margin: 20px;*/
}

#productos article p {
  padding: 20px;
  font-size: 1.1em;
  line-height: 25px;
}






/* ------------------ SECTION 3 CALIDAD ------------------*/
#video{
  display: block;
  width: 700px;
  height: 400px;
  margin-left: 100px;
  border-radius: 4px;
}


/*//VER ESTO!!!!!!*/

#calidad{
  background: black url('../img/wallpapers/lab2.jpg') no-repeat fixed center bottom / cover;
  width: 100%;
  color: black;
  position: relative;
}

#calidad::before{
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #FFFFFF;
  background-image: linear-gradient(180deg, #FFFFFF 0%, #969bae 50%, #7c7676 100%);
  opacity: .6;
}

#calidad header{
  position: relative;
}

/*Estos son los estilos que agregue*/

html nav{
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  font-size: 0.8em;
}

.idiomas{
  position: static; /*esto es para corregir*/
  float: none; /*lo mismo*/
  margin: 0;
}

.idiomas, .idiomas li, .idiomas a{
  display: inline-flex;
  align-items: stretch;
  align-content: center;
}

.idiomas a{
  align-items: center;
}
<!DOCTYPE html>
<html lang="es">
<head>
  <title>Central de ingredientes S.L</title>

  <!-- Descripcion en google -->
  <meta name="description" content="Desde 1994 somos tu proveedor de productos lácteos tanto nacional como internacional">

  <!-- Codificación -->
  <meta charset="utf-8">

  <!-- Estilos -->
  <link rel="stylesheet" href="css/font/flaticon.css" type="text/css">
  <link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="css/style.css">

  <!-- Responsive -->
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">

  <!-- Robots -->
  <meta name="robots" content="index,follow">

  <!-- Favicones -->
  <link type="image/png" rel="icon" href="img/favicons/cow-512-231943.png">
</head>
<body>

  <div class="overlay">
    <div class="containerOverlay">
      <div class="spinner"></div>
      <p>Cargando...</p>
    </div>
  </div>

  <header id="hero">
    <div class="container">
      <div class="row">
        <div class="col-xs-12">
          <h1>Central de ingredientes</h1>
        </div>
      </div>
    </div>
  </header>

  <nav>
    <img src="https://cdn.pixabay.com/photo/2016/06/28/17/26/cow-1485012_1280.png" alt="Logo">
    <ul class="idiomas">
      <li><a href="#">EN</a></li>
      <li><a href="#">ES</a></li>
      <li><a href="#">FR</a></li>
    </ul>
    <ul>
      <li><a href="#" class="menu" data-id="#inicio">Inicio</a></li>
      <li><a href="#" class="menu" data-id="#nosotros">Quienes somos</a></li>
      <li><a href="#" class="menu" data-id="#productos">Productos</a></li>
      <li><a href="#" class="menu" data-id="#calidad">Calidad</a></li>
      <li><a href="#" class="menu" data-id="#logística">Logistica</a></li>
      <li><a href="#" class="menu" data-id="#medio_ambiente">Medio ambiente</a></li>
      <li><a href="#" class="menu" data-id="#contacto">Contacto</a></li>
    </ul>
  </nav>

  <main>
    <section id="nosotros">
      <div class="container">
        <div class="row">
          <div class="col-xl-12">
            <header>
              <h2 class="diferente">Somos <span>central de ingredientes</span> desde 1994</h2>
            </header>
          </div>
        </div>
        <div class="row">
          <div class="col-md-6">
            <p>Después de más de 20 años dedicado al sector lácteo, <span>central de ingredientes</span> se ha consolidado en el mercado, destacando tanto por su calidad, seriedad y confiabilidad en la fabricación tanto de preparados lácteos en polvo para chocolatería, como heladería o galletería. Incorporándose posteriormente al grupo su filial <span>Global blends ibérica</span></p>
            <a href="#" class="boton botonBlanco">Contáctanos</a>
          </div>
          <div class="col-md-6">
            <img src="img/wallpapers/grey.jpg" alt="Photo">
          </div>
        </div>
      </div>
    </section>

    <section id="productos">
      <div class="container">
        <div class="row">
          <div class="col-lg-12">
            <header>
              <h2 class="h2Reducido"> <i class="fa flaticon-star"></i>Nuestros <span>productos</span></h2>
              <h3>A strive for the Highest Quality</h3>
              <p>Interfood supplies dairy products and solutions to the dairy industry for various applications like recombined dairy, yoghurt or cheese. The food industry sources with Interfood any application requiring dairy ingredients for example ice cream, beverages, chocolate, bakery or confectionery..</p>
            </header>
          </div>
        </div>
        <div class="ro">
          <div class="col-lg-4">
            <article class="marco">
              <i class="fa flaticon-test-tube"></i>
              <h4>Milkpowders and derivatives</h4>
              <p>Interfood offers you flexible solutions by delivering milkpowders and derivatives in a variety of compositions, origins and packaging according to your requirements.</p>
            </article>
          </div>
          <div class="col-lg-4">
            <article class="marco">
              <i class="fa flaticon-milk-1"></i>
              <h4>Butter</h4>
              <p>Interfood offers you flexible solutions by delivering butter and AMF in a variety of compositions, origins and packaging according to your requirements.</p>
            </article>
          </div>
          <div class="col-lg-4">
            <article class="marco">
              <i class="fa flaticon-analytics"></i>
              <h4>Cheese</h4>
              <p>Cheese is produced throughout the world in wide-ranging flavours, textures and forms. Cheese consists of proteins and fat from milk, usually the milk of cows, buffalos, goats, or sheep..</p>
            </article>
          </div>
        </div>

        <div class="row">
          <div class="col-lg-4">
            <article class="marco">
              <i class="fa flaticon-stars"></i>
              <h4>Dairy proteins</h4>
              <p>Various kinds of proteins have many different applications. For example in sports nutrition, cheese, yogurt, energy bars, drinks and meat to name a few. Proteins are also used as a functional ingredient to stabilize emulsions and for the manufacturing of fat filleds, toppings and foamers.</p>
            </article>
          </div>
          <div class="col-lg-4">
            <article class="marco">
              <i class="fa flaticon-plant"></i>
              <h4>Fatfilled milkpowder</h4>
              <p>A fat filled is an economical replacement of full cream milk powder based on vegetable fat. Interfood has a wide range, either palm or coconut oil based, fat filled milkpowders on offer with proteins starting from 2% up to 26% of protein. </p>
            </article>
          </div>
          <div class="col-lg-4">
            <article class="marco">
              <i class="fa flaticon-like"></i>
              <h4>Infant milkpowder</h4>
              <p>Focusing on business to business, Interfood is able to offer base powders of the highest quality for infant formula, follow on food formula and growing up milk. </p>
            </article>
          </div>

        </div>
        <div class="row">
          <div class="col-xs-12">
            <a href="#" class="boton">Más información</a>
          </div>
        </div>
      </div>

    </section>
    

<section id="logistica">

  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-4">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
      <div class="col-lg-8">
        <video id="video" controls>
          <source src="video/video.mp4" type="video/mp4">
            <source src="video/video.ogv" type="video/ogg">
              <source src="video/video.webm" type="video/webm">
              </video>

            </div>

          </div>
        </div>
      </section>



    </main>
    <script  src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="js/app.js" charset="utf-8"></script>
  </body>
  </html>

Flexbox, hoy día es muy compatible y perfecto para soluciones a mano, puedes orientarte sobre sus distintas propiedades aquí:

Flexbox Guide by CSStricks

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.