@import "https://fonts.googleapis.com/css?family=Ubuntu:300, 400, 500, 700";
*, *:after, *:before {
  margin: 0;
  padding: 0;
}

.svg-container {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: -1;
}

svg path {
  transition: .1s;
}
svg:hover path {
  d: path("M 800 300 Q 400 250 0 300 L 0 0 L 800 0 L 800 300 Z");
}

body {
  background: #fff;
  color: #333;
  font-family: 'Titillium Web', sans-serif;
  position: relative;
}

h3 {
  font-weight: 400;
}



main {
  background: linear-gradient(to bottom, #ffffff 0%, #dddee1 100%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  padding: 5vh 0 0vh;
  position: relative;
  text-align: center;
  overflow: hidden;
}
main::after {

  content: '';
  position: absolute;
  top: calc(10vh + 1.618em);
  bottom: 0;
  left: 50%;
  width: 2px;
  height: 100%;
}

footer {
  background: #dddee1;
  padding: 5vh 0;
  text-align: center;
  position: relative;
}

small {
  opacity: .5;
  font-weight: 300;
}
small a {
  color: inherit;
}

#encabezado{

  color:white;  /*color de la fuente*/
  text-align: left; /*alineación del texto*/
  padding: 6px;  /*tamaño del fondo*/
  border-radius: 0px 30px 30px 0px; /*ángulos de las 4 esquinas del borde/fondo*/  
  background-color: #0094b4;
}

header {

  text-align: center;
  width: 100%;
  height: auto;
  background-size: cover;
  background-attachment: fixed;
  position: relative;
  overflow: hidden;
  border-radius: 0 0 85% 85% / 30%;
}
header .overlay{
  width: 100%;
  height: 100%;
  padding: 50px;
  color: #FFF;
  text-shadow: 1px 1px 1px #333;
  background-image: linear-gradient( 135deg, #e3e3e2 10%, #e3e3e2 100%);
  
}
/*precarga*/
    .loader-page {
      position: fixed;
      z-index: 25000;
      background: #0AE;
      left: 0px;
      top: 0px;
      height: 100%;
      width: 100%;
      display: flex;
      align-items: center;
      text-align: center;
      justify-content: center;
      transition:all .3s ease;
    }
    .group {
      position: relative;
      display: inline-block;
      line-height: 16px;
    }

    .bigSqr {
      position: relative;
      display: inline-block;
      width: 40px;
      height: 40px;
      overflow: hidden;
      -webkit-transform-origin: bottom left;
      transform-origin: bottom left;
      -webkit-animation: bigSqrShrink 1s linear infinite;
      animation: bigSqrShrink 1s linear infinite;
    }

    .square {
      position: absolute;
      width: 20px;
      height: 20px;
      background: #FFF;
    }

    .first {
      left: 0px;
      top: 20px;
    }

    .second {
      left: 20px;
      top: 20px;
      -webkit-animation: drop2 1s linear infinite;
      animation: drop2 1s linear infinite;
    }

    .third {
      left: 0px;
      top: 0px;
      -webkit-animation: drop3 1s linear infinite;
      animation: drop3 1s linear infinite;
    }

    .fourth {
      left: 20px;
      top: 0px;
      -webkit-animation: drop4 1s linear infinite;
      animation: drop4 1s linear infinite;
    }

    .text {
      line-height: 16px;
      font-family: "Open Sans", "Roboto", Arial, sans-serif;
      font-weight: 400;
      color: #FFF;
      display: block;
      margin: 10px auto;
      padding: 3px;
    }

    @-webkit-keyframes bigSqrShrink {
      0% {
        -webkit-transform: scale(1);
        transform: scale(1);
      }
      90% {
        -webkit-transform: scale(1);
        transform: scale(1);
      }
      100% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
      }
    }

    @keyframes bigSqrShrink {
      0% {
        -webkit-transform: scale(1);
        transform: scale(1);
      }
      90% {
        -webkit-transform: scale(1);
        transform: scale(1);
      }
      100% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
      }
    }
    @-webkit-keyframes drop2 {
      0% {
        -webkit-transform: translateY(-50px);
        transform: translateY(-50px);
      }
      25% {
        -webkit-transform: translate(0);
        transform: translate(0);
      }
      100% {
        -webkit-transform: translate(0);
        transform: translate(0);
      }
    }
    @keyframes drop2 {
      0% {
        -webkit-transform: translateY(-50px);
        transform: translateY(-50px);
      }
      25% {
        -webkit-transform: translate(0);
        transform: translate(0);
      }
      100% {
        -webkit-transform: translate(0);
        transform: translate(0);
      }
    }
    @-webkit-keyframes drop3 {
      0% {
        -webkit-transform: translateY(-50px);
        transform: translateY(-50px);
      }
      50% {
        -webkit-transform: translate(0);
        transform: translate(0);
      }
      100% {
        -webkit-transform: translate(0);
        transform: translate(0);
      }
    }
    @keyframes drop3 {
      0% {
        -webkit-transform: translateY(-50px);
        transform: translateY(-50px);
      }
      50% {
        -webkit-transform: translate(0);
        transform: translate(0);
      }
      100% {
        -webkit-transform: translate(0);
        transform: translate(0);
      }
    }
    @-webkit-keyframes drop4 {
      0% {
        -webkit-transform: translateY(-50px);
        transform: translateY(-50px);
      }
      75% {
        -webkit-transform: translate(0);
        transform: translate(0);
      }
      100% {
        -webkit-transform: translate(0);
        transform: translate(0);
      }
    }
    @keyframes drop4 {
      0% {
        -webkit-transform: translateY(-50px);
        transform: translateY(-50px);
      }
      75% {
        -webkit-transform: translate(0);
        transform: translate(0);
      }
      100% {
        -webkit-transform: translate(0);
        transform: translate(0);
      }
    }