ul {
        margin: 0;
      }
      .nav__nav {
        will-change: transform;
        left: 0;
        width: 100%;
        z-index: 1;
        background: #1a1a1a;
        -webkit-transform: translateY(-100%);
                transform: translateY(-100%);
        transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1);
      }
      .nav--active {
        -webkit-transform: translateY(0);
                transform: translateY(0);
      }
      .nav__list {
        display: flex;
      }
      .nav__item {
        flex: 1;
        position: relative;
        transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1);
      }
      .nav__item:hover {
        opacity: 0.75;
      }
      .nav__thumb {
        display: block;
        height: 120px;
        background: #dc143c;
        transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1);
      }
      .nav__thumb:before {
        content: attr(data-letter);
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
        font-size: 70px;
        text-transform: uppercase;
                opacity: 0;
    color: #000;
      }
      .nav__label {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
        text-transform: uppercase;
    color: LIGHTBLUE;
    margin: 0;
    LETTER-SPACING: 4PX;
    FONT-WEIGHT: 400;        
        margin: 0;
              TEXT-ALIGN: CENTER;
    font-size: 20px;
      }
      @media (max-width: 850px) {
        .nav__label {
          font-size: 14px;
        }
      }
      @media (max-width: 720px) {
        .nav__label {
          display: none;
        }
        .nav__thumb {
          height: 90px;
        }
        .nav__thumb:before {
          font-size: 32px;
          opacity: 0.7;
        }
      }
      
      
      
      
      .tab__page {
        min-height: 800px;
        will-change: transform;
        -webkit-perspective: 400px;
                perspective: 400px;
        overflow: hidden;
        transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1);
      }
      
      @media (max-width: 768px){
            .tab__page {
                height:900px;
            }
            }
      
      
      .tab__section {
        will-change: transform;
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
        min-height: 700px;
        overflow: hidden;
        display: flex;
        justify-content: center;
        text-align: center;
        background: #fff;
        -webkit-transform: translateX(100%);
                transform: translateX(100%);
        transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1);
      }
      
      @media (max-width: 768px){
            .tab__section {
                height:800px;
            }
            }
      
      .section--hidden {
        -webkit-transform: translateX(-100%);
                transform: translateX(-100%);
      }
      .section--active {
        -webkit-transform: translateX(0) rotateY(0);
                transform: translateX(0) rotateY(0);
        z-index: 2;
      }
      .tab__section:before {
        content: attr(data-letter);
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
        font-size: 75vh;
        text-transform: uppercase;
    opacity: 0;
    color: #000;
    z-index: -1;
      }
      .section__wrapper {
        width: 100%;
           max-width: 1000px;
    padding: 51px 0vw;
}
      
      .section__title {
        margin: 0 0 25px 0;
        font-size: 3.5em;
    color: lightblue;
    font-weight: 100;

      }
      .tab__section p {
        margin: 0 0 25px 0;
        font-size: 20px;
      }
      .tab__section p:last-child {
        margin-bottom: 0;
      }
      
.color1 {
  background: #bdc3c7;
}
.color2 {
  background: #4c9fca;
}
.color3 {
  background: #3292c3;
}
.color4 {
  background: #1984bb;
}
.color5 {
  background: #0077b4;
}
.color6 {
  background: #66add2;
}


      
h4.text-image-tab {
font-weight: 100;
    margin-top: -14px;
color: black;
    font-size: 15px;
}


.jumbotron h1{
    font-size: 49px;
    font-weight: 100;
        margin-top: 48px;
}

.jumbotron h3{
    font-size: 40px;
    font-weight: 100;
}

.jumbotron {
    padding-left:5px!important;
    padding-right:10px!important;
}




    
    div.tab--footer{
	top: 162px;
    position: relative;
}

div.footer-tab-hover:hover {
    border: 2px solid white;
    border-radius: 25px;
}






  a.mainbtn {
  padding: 1.7rem 3rem 1.7rem 3rem;
      margin-left: 3%;
    color: lightgrey;
  font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 3px;  position: relative;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  outline: none;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
  transition: all .3s ease-in-out;
}

a.mainbtn:before {
  content: '';
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
a.mainbtn:after {
  content: '';
  display: inline-block;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 6%;
  background: #fff;
  transition: all .3s ease-in-out;
}
  
  a.main--focused {
  background: #337ab7;
}
  a.main--focused:before {
  transition: all .7s ease-out;
  opacity: 0;
  border: 2px solid #fff;
  border-radius: 3px;
  -webkit-transform: scale(1.2, 1.6);
          transform: scale(1.2, 1.6);
  visibility: hidden;
}
  a.main--focused:hover {
  background: #337ab7;
}
  a.main--focused:hover:before {
  visibility: visible;
  opacity: 1;
  border: 3px solid #fff;
  -webkit-transform: scale(1);
          transform: scale(1);
  z-index: 1;
}

@-webkit-keyframes scale {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
    z-index: 1;
  }
  30% {
    opacity: 0.5;
    -webkit-transform: scale(1.3, 1.6);
            transform: scale(1.3, 1.6);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.6, 1.9);
            transform: scale(1.6, 1.9);
  }
}
@keyframes scale {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
    z-index: 1;
  }
  30% {
    opacity: 0.5;
    -webkit-transform: scale(1.3, 1.6);
            transform: scale(1.3, 1.6);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.6, 1.9);
            transform: scale(1.6, 1.9);
  }
}