.flex-container {
    /* position: absolute; */
    height: 100vh;
    width: 100%;
    display: -webkit-flex;
    /* Safari */
    display: flex;
    overflow: hidden;
    z-index: 9999;
  }
  @media screen and (max-width: 768px) {
    .flex-container {
      flex-direction: column;
    }
  }
  
  .flex-title {
    color: #f1f1f1;
    position: relative;
    font-size: 4.2vw;
    margin: auto;
    text-align: center !important;
    transform: rotate(90deg);
    /* top: 15% !important; */
    top: 26.5%;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
  }
  
  .flex-title.force15 {
    transform: rotate(0deg) !important;
    top: 15% !important;
  }
  .contact-flex .flex-title {
    line-height: 80px;
  }
  @media screen and (max-width: 768px) {
    .flex-title {
      transform: rotate(0deg) !important;
    }
  }
  
  .flex-about {
    background: rgba(0, 0, 0, 0.2);
    opacity: 0;
    color: #f1f1f1;
    position: relative;
    width: 70%;
    font-size: 1.5vw;
    padding: 5%;
    top: 20%;
    border: 2px solid #f1f1f1;
    border-radius: 10px;
    line-height: 1.3;
    margin: auto;
    text-align: left;
    transform: rotate(0deg);
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
  }
  @media screen and (max-width: 768px) {
    .flex-about {
      padding: 10px;
      border: 0px solid #f1f1f1;
    }
  }
  
  .flex-slide {
    -webkit-flex: 1;
    /* Safari 6.1+ */
    -ms-flex: 1;
    /* IE 10 */
    flex: 1;
    cursor: pointer;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
  }
  @media screen and (max-width: 768px) {
    .flex-slide {
      overflow: auto;
      overflow-x: hidden;
    }
  }
  
  @media screen and (max-width: 768px) {
    .flex-slide p {
      font-size: 3em;
    }
    .flex-title {
        font-size: 10vw;
    }
  }
  
  @media screen and (max-width: 768px) {
    .flex-slide ul li {
      font-size: 2em;
    }
  }
  
  .flex-slide:hover {
    -webkit-flex-grow: 3;
    flex-grow: 3;
  }
  
  .home-flex {
    height: 100vh;
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../images/bg-2.jpeg);
    background-size: cover;
    background-position: center center;
    /* background-attachment: fixed; */
  }
  @media screen and (min-width: 768px) {
    .home-flex {
      animation: aboutFlexSlide 3s 1;
      animation-delay: 0s;
    }
  }
  
  @keyframes aboutFlexSlide {
    0% {
      -webkit-flex-grow: 1;
      flex-grow: 1;
    }
    50% {
      -webkit-flex-grow: 3;
      flex-grow: 3;
    }
    100% {
      -webkit-flex-grow: 1;
      flex-grow: 1;
    }
  }
  @media screen and (min-width: 768px) {
    .flex-title-home {
      transform: rotate(90deg);
      top: 15%;
      animation: aboutFlexSlide 3s 1;
      animation-delay: 0s;
    }
  }
  
  @keyframes homeFlextitle {
    0% {
      transform: rotate(90deg);
      top: 15%;
    }
    50% {
      transform: rotate(0deg);
      top: 15%;
    }
    100% {
      transform: rotate(90deg);
      top: 15%;
    }
  }
  .flex-about-home {
    opacity: 0;
  }
  @media screen and (min-width: 768px) {
    .flex-about-home {
      animation: aboutFlexSlide 3s 1;
      animation-delay: 0s;
    }
  }
  
  @keyframes flexAboutHome {
    0% {
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  .about-flex {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../images/bg-4.jpeg);
    background-size: cover;
    background-position: center center;
    /* background-attachment: fixed; */
  }
  
  .contact-form-flex {
    width: 100%;
  }
  
  .contact-flex {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../images/bg-3.jpeg);
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
  }
  
  .work-flex {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../images/bg-1.jpeg);
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
  }
  
  .spinner-flex {
    position: fixed;
    top: 0;
    left: 0;
    background: #222;
    height: 100%;
    width: 100%;
    z-index: 11;
    margin-top: 0;
    color: #fff;
    font-size: 1em;
  }
  
  .cube1, .cube2 {
    background-color: #fff;
    width: 15px;
    height: 15px;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: sk-cubemove 1.8s infinite ease-in-out;
    animation: sk-cubemove 1.8s infinite ease-in-out;
  }
  
  .cube2 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
  }
  
  @-webkit-keyframes sk-cubemove {
    25% {
      -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
    }
    50% {
      -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
    }
    75% {
      -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
    }
    100% {
      -webkit-transform: rotate(-360deg);
    }
  }
  @keyframes sk-cubemove {
    25% {
      transform: translateX(42px) rotate(-90deg) scale(0.5);
      -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
    }
    50% {
      transform: translateX(42px) translateY(42px) rotate(-179deg);
      -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
    }
    50.1% {
      transform: translateX(42px) translateY(42px) rotate(-180deg);
      -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
    }
    75% {
      transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
      -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
    }
    100% {
      transform: rotate(-360deg);
      -webkit-transform: rotate(-360deg);
    }
  }

  .flex-title-transport {
    top: 26% !important;
  }
  .about-flex:hover .flex-title-transport {
    top: 15% !important;
  }
  .flex-title-factoraje {
    top: 26% !important;
  }
  .work-flex:hover .flex-title-factoraje {
    top: 15% !important;
  }