.flex-container {
    height: 500px;
    width: 100%;
    display: -webkit-flex;
    /* Safari */
    display: flex;
    overflow: hidden;
  }

  
.flex-title {
  color: #f1f1f1;
  position: relative;
  font-size: 3vw;
  margin: auto;
  text-align: center;
  transform: rotate(90deg);
  top: 15%;
  -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-about {
  opacity: 0;
  color: #f1f1f1;
  position: relative;
  width: 70%;
  font-size: 2vw;
  padding: 1%;
  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;
}

.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;
}

.flex-about-home { opacity: 0; }

@media screen and (max-width: 768px) {
  .flex-container { flex-direction: column; }
  .flex-title { transform: rotate(0deg) !important; }
  .flex-about {
    padding: 0%;
    border: 0px solid #f1f1f1;
  }
  .flex-slide {
    overflow: auto;
    overflow-x: hidden;
  }
  .flex-slide p { font-size: 2em; }
  .flex-slide ul li { font-size: 2em; }

  .flex-title-home {
    transform: rotate(90deg);
    top: 15%;
    -moz-animation: homeFlextitle;
    -moz-animation-duration: 3s;
    -moz-animation-iteration-count: 1;
    -moz-animation-delay: 0s;
    -webkit-animation: homeFlextitle;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-delay: 0s;
    animation: homeFlextitle;
    animation-duration: 3s;
    animation-iteration-count: 1;
    animation-delay: 0s;
  }

  .flex-about-home {
    -moz-animation: flexAboutHome;
    -moz-animation-duration: 3s;
    -moz-animation-iteration-count: 1;
    -moz-animation-delay: 0s;
    -webkit-animation: flexAboutHome;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-delay: 0s;
    animation: flexAboutHome;
    animation-duration: 3s;
    animation-iteration-count: 1;
    animation-delay: 0s;
  }

  .home {
    -moz-animation: aboutFlexSlide;
    -moz-animation-duration: 3s;
    -moz-animation-iteration-count: 1;
    -moz-animation-delay: 0s;
    -webkit-animation: aboutFlexSlide;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-delay: 0s;
    animation: aboutFlexSlide;
    animation-duration: 3s;
    animation-iteration-count: 1;
    animation-delay: 0s;
  }
}
  
.flex-slide:hover {
  -webkit-flex-grow: 6;
  flex-grow: 6;
}

.home {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/c1.jpg");
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
}

.about {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 
      url("../images/c2.jpg");
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
}

.work {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 
      url("../images/c3.jpg");
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
}

.contact {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 
    url("../images/c4.jpg");
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
}

.distribution {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 
    url("../images/c5.jpg");
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
}

.pricing {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 
    url("../images/c6.jpg");
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
}

.company {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 
    url("../images/c7.jpg");
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
}


.training1 {
  background: url("../images/t1.jpg");
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
}

.training2 {
  background: url("../images/t2.jpg");
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
}

.training3 {
  background: url("../images/t3.jpg");
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
}

.training4 {
  background: url("../images/t4.jpg");
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
}

.training5 {
  background: url("../images/t5.jpg");
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
}

.training6 {
  background: url("../images/t6.jpg");
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
}

.training7 {
  background: url("../images/t7.jpg");
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
}
  
@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;
  }
}
  
@keyframes 
homeFlextitle {  
  0% {
      transform: rotate(90deg);
      top: 15%;
  }
  50% {
    transform: rotate(0deg);
    top: 15%;
  }
  100% {
    transform: rotate(90deg);
    top: 15%;
  }
}
  
  
@keyframes 
flexAboutHome {  
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}