/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
   */
   html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font: normal;
    vertical-align: baseline;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    /* This needs to be set or some font faced fonts look bold on Mac in Chrome/Webkit based browsers. */
    -moz-osx-font-smoothing: grayscale;
    /* Fixes font bold issue in Firefox version 25+ on Mac */
  }

  /* HTML5 display-role reset for older browsers */
  article, aside, details, figcaption, figure, footer, header, hgroup, menu, main, nav, section {
    display: block;
  }

  body, html {
    height: 100%;
    line-height: 1;
    letter-spacing: 1px;
  }

  body {
    background-color: #f2f2f2;
  }

  a {
    text-decoration: none;
  }

  ul {
    list-style: none;
  }

  img {
    vertical-align: top;
  }

  blockquote, q {
    quotes: none;
  }

  blockquote:before, blockquote:after {
    content: '';
    content: none;
  }

  q:before, q:after {
    content: '';
    content: none;
  }

  table {
    border-collapse: collapse;
    border-spacing: 0;
  }

  *, *:before, *:after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  .clearfix {
    clear: both;
  }

  @font-face {
    font-family: "din";
    src: url("/fonts/DINRoundOT.eot?") format("eot"), url("/fonts/DINRoundOT.woff") format("woff"), url("/fonts/DINRoundOT.ttf") format("truetype"), url("/fonts/DINRoundOT.svg#din") format("svg");
  }

  @font-face {
    font-family: "dinM";
    src: url("/fonts/DINRoundOT-Medium.eot?") format("eot"), url("/fonts/DINRoundOT-Medium.woff") format("woff"), url("/fonts/DINRoundOT-Medium.ttf") format("truetype"), url("/fonts/DINRoundOT-Medium.svg#dinM") format("svg");
  }

  @font-face {
    font-family: "dinB";
    src: url("/fonts/DINRoundOT-Black.eot?") format("eot"), url("/fonts/DINRoundOT-Black.woff") format("woff"), url("/fonts/DINRoundOT-Black.ttf") format("truetype"), url("/fonts/DINRoundOT-Black.svg#dinB") format("svg");
  }

  @font-face {
    font-family: "spartanB";
    src: url("/fonts/Spartan-Bold.eot?") format("eot"), url("/fonts/Spartan-Bold.woff") format("woff"), url("/fonts/Spartan-Bold.ttf") format("truetype"), url("/fonts/Spartan-Bold.svg#spartanB") format("svg");
  }

  @font-face {
    font-family: "spartanM";
    src: url("/fonts/Spartan-Medium.eot?") format("eot"), url("/fonts/Spartan-Medium.woff") format("woff"), url("/fonts/Spartan-Medium.ttf") format("truetype"), url("/fonts/Spartan-Medium.svg#spartanM") format("svg");
  }

  @font-face {
    font-family: "spartanR";
    src: url("/fonts/Spartan-Regular.eot?") format("eot"), url("/fonts/Spartan-Regular.woff") format("woff"), url("/fonts/Spartan-Regular.ttf") format("truetype"), url("/fonts/Spartan-Regular.svg#spartanR") format("svg");
  }

  @font-face {
    font-family: "spartanSB";
    src: url("/fonts/Spartan-SemiBold.eot?") format("eot"), url("/fonts/Spartan-SemiBold.woff") format("woff"), url("/fonts/Spartan-SemiBold.ttf") format("truetype"), url("/fonts/Spartan-SemiBold.svg#spartanSB") format("svg");
  }

  @font-face {
    font-family: "RobotoB";
    src: url("/fonts/Roboto-Bold.eot?") format("eot"), url("/fonts/Roboto-Bold.woff") format("woff"), url("/fonts/Roboto-Bold.ttf") format("truetype"), url("/fonts/Roboto-Bold.svg#RobotoB") format("svg");
  }

  @font-face {
    font-family: "RobotoR";
    src: url("/fonts/Roboto-Regular.eot?") format("eot"), url("/fonts/Roboto-Regular.woff") format("woff"), url("/fonts/Roboto-Regular.ttf") format("truetype"), url("/fonts/Roboto-Regular.svg#RobotoR") format("svg");
  }

  @font-face {
    font-family: "RobotoL";
    src: url("/fonts/Roboto-Light.eot?") format("eot"), url("/fonts/Roboto-Light.woff") format("woff"), url("/fonts/Roboto-Light.ttf") format("truetype"), url("/fonts/Roboto-Light.svg#RobotoL") format("svg");
  }

  h1,
  h2,
  h3,
  h4,
  h5 {
    font-family: spartanB !important;
    margin-bottom: 5px;
    color: #383044;
  }

  li {
    font-family: din;
    color: #6b6970;
  }

  p {
    font-family: robotoR;
    font-size: 16px !important;
    line-height: 24px;
    color: #6b6970;
    letter-spacing: 0;
    color: #6b6970;
  }

  @media all and (min-width: 768px) {
    p {
      font-size: 18px !important;
      line-height: 28px;
    }
  }

  label {
    color: #6b6970;
  }

  h1 {
    font-size: 32px;
    line-height: 42px;
  }

  @media all and (min-width: 768px) {
    h1 {
      font-size: 45px;
      line-height: 55px;
    }
  }

  .title {
    font-family: spartanB;
    margin-bottom: 15px;
    color: #383044;
  }

  .slider-title {
    font-family: spartanB;
    margin-bottom: 15px;
    font-size: 36px;
    line-height: 42px;
  }

  @media all and (min-width: 768px) {
    .slider-title {
      font-size: 60px;
      line-height: 70px;
    }
  }

  .sub-title {
    font-family: dinM;
    font-size: 14px;
  }

  @media all and (min-width: 768px) {
    .sub-title {
      font-size: 16px;
    }
  }

  .desc {
    font-size: 18px;
    line-height: 28px;
    margin-bottom: 10px;
  }

  .disclaimer {
    font-size: 12px;
  }

  .f-white {
    color: #ffffff;
  }

  .f-blue {
    color: #383044;
  }

  .f-green {
    color: #00a69c;
  }

  .tagline {
    font-family: dinB;
    padding: 0 15px;
    text-transform: uppercase;
    display: none;
  }

  @media all and (min-width: 768px) {
    .tagline {
      display: block;
    }
  }

  .button-wrapper {
    padding-top: 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  .button-wrapper div, .button-wrapper input {
    font-family: spartanB;
    border-radius: 25px;
    cursor: pointer;
    font-size: 16px;
    text-align: center;
  }

  .button-wrapper div.type1, .button-wrapper input.type1 {
    background-color: #383044;
    color: #ffffff;
    -webkit-box-shadow: 0 1px 10px rgba(136, 136, 136, 0.5);
    box-shadow: 0 1px 10px rgba(136, 136, 136, 0.5);
    border: 2px solid #383044;
    font-size: 12px;
    width: 140px;
    padding: 14px 10px 14px;
  }

  @media only screen and (min-width: 768px) {
    .button-wrapper div.type1, .button-wrapper input.type1 {
      font-size: 16px;
      width: 180px;
      padding: 16px 30px 15px;
    }
  }

  .button-wrapper div.type1:hover, .button-wrapper input.type1:hover {
    border: 2px solid #ffd002;
    color: #000000;
    background-color: #ffffff;
  }

  .button-wrapper div.type1:only-child(), .button-wrapper input.type1:only-child() {
    width: 200px;
  }

  @media only screen and (min-width: 768px) {
    .button-wrapper div.type1:only-child(), .button-wrapper input.type1:only-child() {
      width: 180px;
    }
  }

  .button-wrapper div.type1:nth-child(1), .button-wrapper input.type1:nth-child(1) {
    margin-right: 10px;
    width: 160px;
  }

  @media only screen and (min-width: 768px) {
    .button-wrapper div.type1:nth-child(1), .button-wrapper input.type1:nth-child(1) {
      width: 180px;
    }
  }

  .button-wrapper div.type1:nth-child(n+1), .button-wrapper input.type1:nth-child(n+1) {
    margin-left: 10px;
    width: 160px;
  }

  @media only screen and (min-width: 768px) {
    .button-wrapper div.type1:nth-child(n+1), .button-wrapper input.type1:nth-child(n+1) {
      width: 180px;
    }
  }

  .button-wrapper div.type2, .button-wrapper input.type2 {
    background-color: #00a69c;
    color: #ffffff;
    -webkit-box-shadow: 0 1px 10px rgba(136, 136, 136, 0.5);
    box-shadow: 0 1px 10px rgba(136, 136, 136, 0.5);
    border: 2px solid #00a69c;
    font-size: 14px;
    width: 220px;
    padding: 12px 10px 10px;
  }

  @media only screen and (min-width: 768px) {
    .button-wrapper div.type2, .button-wrapper input.type2 {
      font-size: 16px;
      width: 180px;
      padding: 16px 30px 15px;
    }
  }

  .button-wrapper div.type2:hover, .button-wrapper input.type2:hover {
    border: 2px solid #ffd002;
    color: #000000;
    background-color: #ffffff;
  }

  .button-wrapper div.type3, .button-wrapper input.type3 {
    position: relative;
    width: 185px;
    height: 100px;
  }

  @media only screen and (min-width: 768px) {
    .button-wrapper div.type3, .button-wrapper input.type3 {
      width: 200px;
      height: 100px;
    }
  }

  .button-wrapper div.type3 img, .button-wrapper input.type3 img {
    position: absolute;
    top: 0;
    left: -18px;
  }

  .button-wrapper div.type3 .static, .button-wrapper input.type3 .static {
    display: block;
  }

  .button-wrapper div.type3 .hover, .button-wrapper input.type3 .hover {
    display: none;
  }

  .button-wrapper div.type3:hover .static, .button-wrapper input.type3:hover .static {
    display: none;
  }

  .button-wrapper div.type3:hover .hover, .button-wrapper input.type3:hover .hover {
    display: block;
  }

  .button-wrapper div.type4, .button-wrapper input.type4 {
    background-color: #ffffff;
    color: #000000;
    -webkit-box-shadow: 0 1px 10px rgba(136, 136, 136, 0.5);
    box-shadow: 0 1px 10px rgba(136, 136, 136, 0.5);
    border: 2px solid #ffffff;
    width: 200px;
    padding: 16px 30px 15px;
  }

  .button-wrapper div.type4:hover, .button-wrapper input.type4:hover {
    border: 2px solid #ffd002;
    color: #000000;
    background-color: #ffffff;
  }

  .button-wrapper div.type5, .button-wrapper input.type5 {
    background-color: #d8d8d8;
    color: #ffffff;
    -webkit-box-shadow: 0 1px 10px rgba(136, 136, 136, 0.5);
    box-shadow: 0 1px 10px rgba(136, 136, 136, 0.5);
    border: 2px solid #d8d8d8;
    font-size: 12px;
    width: 240px;
    padding: 14px 10px 14px;
  }

  @media only screen and (min-width: 768px) {
    .button-wrapper div.type5, .button-wrapper input.type5 {
      font-size: 16px;
      width: 240px;
      padding: 16px 30px 15px;
    }
  }

  .slider-wrapper .slick-dots {
    z-index: 9;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    bottom: 50px;
    height: 20px;
  }

  .slider-wrapper .slick-dots li {
    margin: 0 4px;
  }

  .slider-wrapper .slick-dots li button:before {
    content: "";
    font-size: 20px !important;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #d8d8d8;
    border: 1px solid #d8d8d8;
    opacity: 1;
  }

  .slider-wrapper .slick-dots li.slick-active button:before {
    background-color: #ffd002;
    border: 1px solid #ffd002;
  }

  .slider-wrapper .slick-slide {
    outline: none !important;
  }

  .slider-wrapper .slick-list {
    outline: none !important;
  }

  .slider-wrapper .slick-slide:focus {
    outline: none !important;
  }

  .testimonial-container .slick-dots {
    z-index: 9;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    bottom: 20px;
    height: 20px;
  }

  .project-img-slider .slick-slide {
    margin: 0;
  }

  .project-img-slider .slick-dots {
    z-index: 9;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 20px;
  }

  .project-img-slider .slick-dots li {
    margin: 0 4px;
  }

  .project-img-slider .slick-dots li button:before {
    content: "";
    font-size: 6px;
    width: 15px;
    height: 15px;
    background-image: url("/images/icon/dots-blue.png");
    opacity: 0.5;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 15px;
  }

  .project-img-slider .slick-dots li.slick-active button:before {
    opacity: 1;
  }

  .project-img-slider .slick-slide {
    outline: none !important;
  }

  .project-img-slider .slick-list {
    outline: none !important;
  }

  .project-img-slider .slick-slide:focus {
    outline: none !important;
  }

  .project-img-slider .slick-prev {
    left: -40px;
    z-index: 9;
    width: 40px;
    height: 40px;
    background-image: url("/images/icon/prev-blue.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 40px;
    opacity: 0.5;
  }

  .project-img-slider .slick-prev:before {
    content: '';
  }

  .project-img-slider .slick-prev:hover, .project-img-slider .slick-prev:focus, .project-img-slider .slick-prev:active {
    background-image: url("/images/icon/prev-blue.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 40px;
    opacity: 1;
  }

  .project-img-slider .slick-next {
    right: -40px;
    z-index: 9;
    width: 40px;
    height: 40px;
    background-image: url("/images/icon/next-blue.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 40px;
    opacity: 0.5;
  }

  .project-img-slider .slick-next:before {
    content: '';
  }

  .project-img-slider .slick-next:hover, .project-img-slider .slick-next:focus, .project-img-slider .slick-next:active {
    background-image: url("/images/icon/next-blue.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 40px;
    opacity: 1;
  }

  .slick-dotted.slick-slider {
    margin-bottom: 0;
  }

  .slick-slide {
    margin: 0px;
  }

  .slick-slide img {
    width: 100%;
  }

  .slick-slider {
    position: relative;
    display: block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
  }

  .slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
  }

  .slick-list:focus {
    outline: none;
  }

  .slick-list.dragging {
    cursor: pointer;
    cursor: hand;
  }

  .slick-slider .slick-track,
  .slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  .slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block;
  }

  .slick-track:before,
  .slick-track:after {
    display: table;
    content: '';
  }

  .slick-track:after {
    clear: both;
  }

  .slick-loading .slick-track {
    visibility: hidden;
  }

  .slick-slide {
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
  }

  [dir='rtl'] .slick-slide {
    float: right;
  }

  .slick-slide img {
    display: block;
  }

  .slick-slide.slick-loading img {
    display: none;
  }

  .slick-slide.dragging img {
    pointer-events: none;
  }

  .slick-initialized .slick-slide {
    display: block;
  }

  .slick-loading .slick-slide {
    visibility: hidden;
  }

  .slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent;
  }

  .slick-arrow.slick-hidden {
    display: none;
  }

  .client-slider .slick-initialized .slick-slide {
    float: inherit;
    display: inline-block !important;
    vertical-align: middle;
  }

  img {
    vertical-align: top;
    width: 100%;
  }

  .inculab-wrapper {
    overflow-x: hidden;
  }

  .title-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    position: relative;
  }

  .title-wrapper .title {
    width: 100%;
    text-align: left;
  }

  @media only screen and (min-width: 768px) {
    .title-wrapper .title {
      width: 70%;
    }
  }

  .title-wrapper .title:after {
    content: '';
    background: url("../images/icon/title_underline.png");
    background-repeat: no-repeat;
    background-size: 100% 20px;
    display: block;
    height: 20px;
    width: 100%;
    position: relative;
    left: 0px;
    top: -10px;
  }

  @media only screen and (min-width: 768px) {
    .title-wrapper .title:after {
      width: 350px;
      left: 0px;
    }
  }

  @media only screen and (min-width: 768px) {
    .title-wrapper .title.longer:after {
      background-size: 500px 20px;
      width: 500px;
      left: 0px;
    }
  }

  .title-wrapper .title h2 {
    font-family: spartanB;
    text-transform: uppercase;
    font-size: 27px;
    line-height: 35px;
  }

  @media all and (min-width: 768px) {
    .title-wrapper .title h2 {
      font-size: 30px;
      line-height: 40px;
    }
  }

  .title-wrapper .sub-title {
    font-family: spartanM;
    width: 100%;
    color: rgba(177, 179, 182, 0.6);
    position: absolute;
    top: -50px;
    left: 0;
    text-align: left;
  }

  @media only screen and (min-width: 768px) {
    .title-wrapper .sub-title {
      width: 30%;
      text-align: right !important;
      position: relative;
    }
  }

  .back-top {
    position: fixed;
    bottom: 15px;
    right: 15px;
    z-index: 9999;
    height: 60px;
    width: 60px;
    background-image: url("../images/icon/back-top.png");
    background-size: 60px;
    background-repeat: no-repeat;
    cursor: pointer;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    display: none;
  }

  .back-top.scrolled {
    display: block;
  }

  .back-top:hover {
    background-image: url("../images/icon/back-top-hover.png");
  }

  .back-top img {
    width: 60px;
  }

  .nav {
    background-color: transparent;
    padding: 0 25px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: fixed;
    z-index: 9999;
    top: 0;
    width: 100%;
    height: 60px;
  }

  @media all and (min-width: 768px) {
    .nav {
      padding: 0 50px;
      height: unset;
    }
  }

  .nav.scrolled {
    background-color: #ffffff;
    -webkit-transition: background 0.2s linear;
    transition: background 0.2s linear;
    -webkit-box-shadow: 0 5px 10px rgba(136, 136, 136, 0.3);
    box-shadow: 0 5px 10px rgba(136, 136, 136, 0.3);
  }

  .nav.scrolled .logo {
    width: 130px;
  }

  .nav.scrolled .logo .white {
    display: none;
  }

  .nav.scrolled .logo .turquoise {
    display: block;
  }

  .nav.scrolled .nav-toggle .white {
    display: none;
  }

  .nav.scrolled .nav-toggle .turquoise {
    display: block;
  }

  .nav .logo {
    width: 130px;
  }

  .nav .logo .white {
    display: block;
  }

  .nav .logo .turquoise {
    display: none;
  }

  .nav .nav-toggle {
    margin-left: auto;
    cursor: pointer;
    width: 25px;
    z-index: 9999;
    width: 40px;
    height: 45px;
    margin: 0 0 0 auto;
    position: relative;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
  }

  @media all and (min-width: 768px) {
    .nav .nav-toggle {
      display: none;
    }
  }

  .nav .nav-toggle span {
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    background: #ffffff;
    border-radius: 25px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
  }

  .nav .nav-toggle span:nth-child(1) {
    top: 12px;
  }

  .nav .nav-toggle span:nth-child(2), .nav .nav-toggle span:nth-child(3) {
    top: 21px;
  }

  .nav .nav-toggle span:nth-child(4) {
    top: 30px;
  }

  .nav .nav-toggle.open {
    z-index: 9999;
  }

  .nav .nav-toggle.open span {
    height: 2px;
    background: #363143;
  }

  .nav .nav-toggle.open span:nth-child(1) {
    top: 18px;
    width: 0%;
    left: 50%;
  }

  .nav .nav-toggle.open span:nth-child(2) {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }

  .nav .nav-toggle.open span:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }

  .nav .nav-toggle.open span:nth-child(4) {
    top: 18px;
    width: 0%;
    left: 50%;
  }

  .nav .nav-toggle.scrolled span {
    background-color: #363143;
  }

  .nav .navigation-mobile {
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    right: -100%;
    z-index: 99;
    background-color: #ffffff;
    color: #383044;
    -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
  }

  @media all and (min-width: 768px) {
    .nav .navigation-mobile {
      display: none;
    }
  }

  .nav .navigation-mobile .nav-button {
    font-family: spartanB;
    font-size: 22px;
    padding: 5px 0;
    color: #383044;
  }

  .nav .navigation-mobile .nav-button.active {
    color: #ffd002;
  }

  .nav .navigation-mobile .close-menu {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    cursor: pointer;
  }

  .nav .navigation-mobile .mobile-nav-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }

  .nav .navigation-mobile .mobile-nav-wrapper .nav-button {
    text-align: center;
    margin: 15px 15px;
    display: block;
  }

  .nav .navigation-mobile.active {
    right: 0;
  }

  .nav .navigation-desktop {
    display: none;
  }

  @media all and (min-width: 768px) {
    .nav .navigation-desktop {
      display: block;
      margin-left: auto;
    }
  }

  .nav .navigation-desktop .nav-button {
    font-family: spartanM;
  }

  @media all and (min-width: 768px) {
    .nav .navigation-desktop .nav-button {
      font-family: spartanM;
      font-size: 14px;
      text-transform: uppercase;
      margin: 0 14px;
      display: inline-block;
      color: #383044;
    }
  }

  .nav .navigation-desktop .nav-button:hover {
    color: #ffd002;
  }

  .nav .navigation-desktop .nav-button.active {
    color: #ffd002;
  }

  .main-header-slider {
    position: relative;
    width: 100%;
    height: 90vh;
    background-color: #00a69c;
    min-height: 560px;
    position: relative;
  }

  @media only screen and (min-width: 768px) {
    .main-header-slider {
      height: 80vh;
    }
  }

  .main-header-slider .slider-wrapper {
    width: 100%;
    position: relative;
  }

  .main-header-slider .slider-wrapper .slider-container {
    width: 100%;
    position: relative;
    height: 90vh;
    background-position: center;
    background-size: cover;
  }

  @media only screen and (min-width: 768px) {
    .main-header-slider .slider-wrapper .slider-container {
      height: 80vh;
    }
  }

  .main-header-slider .slider-wrapper .slider-container .text-wrapper {
    width: 100%;
    text-align: center;
    position: absolute;
    top: 60%;
    left: 50%;
    -webkit-transform: translate(-50%, -60%);
    transform: translate(-50%, -60%);
  }

  @media only screen and (min-width: 768px) {
    .main-header-slider .slider-wrapper .slider-container .text-wrapper {
      top: 55%;
      left: 50%;
      -webkit-transform: translate(-50%, -55%);
      transform: translate(-50%, -55%);
    }
  }

  .main-header-slider .slider-wrapper .slider-container .text-wrapper .main-title {
    margin: 20px 40px 0 40px;
    width: auto;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    display: inline-block;
  }

  @media only screen and (min-width: 768px) {
    .main-header-slider .slider-wrapper .slider-container .text-wrapper .main-title {
      margin: 20px 0 0 0;
    }
  }

  .main-header-slider .slider-wrapper .slider-container .text-wrapper .main-title:hover {
    cursor: pointer;
    margin-bottom: 20px;
    margin-top: 0px;
    -webkit-transition: 0.5s;
    transition: 0.5s;
  }

  .main-header-slider .slider-wrapper .slider-container .text-wrapper .main-title h2 {
    font-family: SpartanB;
    text-transform: uppercase;
    margin-bottom: 10px;
    color: #ffffff;
  }

  .main-header-slider .slider-wrapper .slider-container .text-wrapper .main-title h3 {
    color: #ffffff;
  }

  .main-header-slider .slider-wrapper .slider-container .text-wrapper .line {
    height: 70px;
    width: 1px;
    margin: 0 auto 20px;
    border: 1px solid white;
  }

  .main-header-slider .slider-wrapper .slider-container .text-wrapper .desc {
    width: 100%;
    font-size: 18px;
    line-height: 24px;
    margin: 0 auto;
    padding: 0 40px;
    font-family: robotoR;
    color: white;
  }

  @media only screen and (min-width: 768px) {
    .main-header-slider .slider-wrapper .slider-container .text-wrapper .desc {
      width: 35%;
    }
  }

  .main-header-slider .slider-wrapper .slider-container .text-wrapper .button-wrapper {
    padding-top: 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  .main-header-slider .slider-wrapper .slider-container .text-wrapper .button-wrapper .button-item {
    margin-bottom: 25px;
  }

/*  .main-header-slider .slider-wrapper .slider-container.bgone {
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(165, 224, 220, 0.85)), to(rgba(0, 166, 156, 0.85))), url("../images/bg/home/bg_1.jpg");
    background-image: linear-gradient(to bottom, rgba(165, 224, 220, 0.85), rgba(0, 166, 156, 0.85)), url("../images/bg/home/bg_1.jpg");
    background-size: cover;
    background-position: 20% center;
  }*/

  @media only screen and (min-width: 768px) {
    .main-header-slider .slider-wrapper .slider-container.bgone {
      background-position: center;
    }
  }

/*  .main-header-slider .slider-wrapper .slider-container.bgtwo {
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(176, 169, 189, 0.8)), to(rgba(80, 64, 109, 0.8))), url("../images/bg/home/bg_2.jpg");
    background-image: linear-gradient(to bottom, rgba(176, 169, 189, 0.8), rgba(80, 64, 109, 0.8)), url("../images/bg/home/bg_2.jpg");
    background-size: cover;
    background-position: 60% center;
  }*/

  @media only screen and (min-width: 768px) {
    .main-header-slider .slider-wrapper .slider-container.bgtwo {
      background-position: top center;
    }
  }

/*  .main-header-slider .slider-wrapper .slider-container.bgthree {
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(175, 175, 181, 0.63)), to(rgba(59, 58, 74, 0.63))), url("../images/bg/home/bg_3.jpg");
    background-image: linear-gradient(to bottom, rgba(175, 175, 181, 0.63), rgba(59, 58, 74, 0.63)), url("../images/bg/home/bg_3.jpg");
  }*/

  @media only screen and (min-width: 768px) {
    .main-header-slider .slider-wrapper .slider-container.bgthree {
      background-size: cover;
      background-position: bottom center;
    }
  }

  .main-header-slider .slider-wrapper .slick-dots {
    bottom: 30px;
  }

  .main-header-slider .navigate {
    position: absolute;
    width: 100%;
    bottom: 60px;
    z-index: 999;
  }

  @media all and (min-width: 768px) {
    .main-header-slider .navigate {
      text-align: right;
      bottom: 20px;
      right: 30px;
    }
  }

  .main-header-slider .navigate img {
    width: 40px;
    opacity: 0.5;
  }

  .main-header-slider .navigate img.pp2 {
    position: absolute;
    left: 90px;
  }

  @media all and (min-width: 768px) {
    .main-header-slider .navigate img.pp2 {
      position: initial;
    }
  }

  .main-header-slider .navigate img.nn2 {
    position: absolute;
    right: 100px;
  }

  @media all and (min-width: 768px) {
    .main-header-slider .navigate img.nn2 {
      position: initial;
    }
  }

  @media (hover: hover) and (pointer: fine) {
    .main-header-slider .navigate img:hover {
      opacity: 1;
    }
  }

  .service-container {
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(165, 224, 220, 0.2)), to(rgba(0, 166, 156, 0.2)));
    background-image: linear-gradient(to bottom, rgba(165, 224, 220, 0.2), rgba(0, 166, 156, 0.2));
    text-align: center;
  }

  .service-container .bg-container {
    width: 100%;
    max-width: 1100px;
  }

  .service-container .bg-container.first {
    padding: 150px 40px 25px;
  }

  @media only screen and (min-width: 768px) {
    .service-container .bg-container.first {
      padding: 150px 0 25px;
    }
  }

  .service-container .bg-container.second {
    padding: 0 40px 50px;
  }

  @media only screen and (min-width: 768px) {
    .service-container .bg-container.second {
      padding: 0 0 50px;
    }
  }

  @media only screen and (min-width: 768px) {
    .service-container .bg-container {
      margin: 0 auto;
      width: 75%;
    }
  }

  .service-container .section-text-wrapper {
    text-align: left;
    padding: 20px 0 0 0;
    width: 90%;
  }

  @media only screen and (min-width: 768px) {
    .service-container .section-text-wrapper {
      width: 60%;
    }
  }

  .service-container .section-text-wrapper .button-wrapper {
    -webkit-box-pack: left;
    -ms-flex-pack: left;
    justify-content: left;
    font-size: 14px;
  }

  .service-container .services-wrapper {
    width: 100%;
    padding: 50px 0 0 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }

  .service-container .services-wrapper .services-item {
    width: 48%;
    padding: 20px 0 0 0;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    cursor: pointer;
  }

  @media only screen and (min-width: 768px) {
    .service-container .services-wrapper .services-item {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 calc(25% - 25px);
      flex: 0 0 calc(25% - 25px);
      margin-bottom: 0;
    }
  }

  .service-container .services-wrapper .services-item:hover {
    background-color: #ffffff;
    border-radius: 8px;
    -webkit-box-shadow: 0 0 20px rgba(136, 136, 136, 0.5);
    box-shadow: 0 0 20px rgba(136, 136, 136, 0.5);
    margin-top: -15px;
    margin-bottom: 15px;
    -webkit-transition: 0.5s;
    transition: 0.5s;
  }

  .service-container .services-wrapper .services-item:hover p {
    color: #4ea29b;
  }

  @media only screen and (min-width: 768px) {
    .service-container .services-wrapper .services-item:hover p {
      word-break: normal;
    }
  }

  .service-container .services-wrapper .services-item img {
    width: 80%;
  }

  .service-container .services-wrapper .services-item p {
    font-family: spartanM;
    text-align: center;
    width: 150px;
    margin: 20px auto 20px;
    line-height: 22px;
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
  }

  @media only screen and (min-width: 768px) {
    .service-container .services-wrapper .services-item p {
      width: unset;
    }
  }

  .service-container .sustainable-title-wrapper {
    padding: 200px 0 50px;
  }

  .service-container .testimonial-wrapper {
    text-align: center;
    background-color: #383044;
    background-image: url("../images/home/testimony_wavy_left_mobile.png"), url("../images/home/testimony_wavy_right.png");
    background-size: 300px;
    background-position: left top, right bottom;
    background-repeat: no-repeat;
    border-radius: 25px;
    -webkit-box-shadow: 0 10px 20px #888888;
    box-shadow: 0 10px 20px #888888;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    margin-top: 20px;
    margin-bottom: 20px;
    cursor: pointer;
    height: 100%;
  }

  @media only screen and (min-width: 768px) {
    .service-container .testimonial-wrapper {
      background-image: url("../images/home/testimony_wavy_left.png"), url("../images/home/testimony_wavy_right.png");
      background-position: left center, right center;
      background-size: 400px;
    }
  }

  .service-container .testimonial-wrapper:hover {
    margin-bottom: 40px;
    margin-top: 0px;
    padding-bottom: 20px;
    -webkit-transition: 0.5s;
    transition: 0.5s;
  }

  @media only screen and (min-width: 768px) {
    .service-container .testimonial-wrapper {
      height: 300px;
    }
  }

  .service-container .testimonial-wrapper .testimonial-item {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }

  @media only screen and (min-width: 768px) {
    .service-container .testimonial-wrapper .testimonial-item {
      height: 300px;
    }
  }

  .service-container .testimonial-wrapper .testimonial-item .client-img-wrapper {
    width: 100%;
    text-align: center;
    margin-top: 50px;
  }

  @media only screen and (min-width: 768px) {
    .service-container .testimonial-wrapper .testimonial-item .client-img-wrapper {
      width: 30%;
      margin: 0 auto;
    }
  }

  .service-container .testimonial-wrapper .testimonial-item .client-img-wrapper .client-img {
    background-color: #ffffff;
    margin: 0 auto;
    height: 150px;
    width: 150px;
    position: relative;
    border-radius: 100px;
    border: 5px solid #ffd002;
  }

  .service-container .testimonial-wrapper .testimonial-item .client-img-wrapper .client-img img {
    width: 80px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }

  .service-container .testimonial-wrapper .testimonial-item .client-comment-wrapper {
    width: 70%;
    text-align: center;
    margin: 50px auto 70px;
  }

  @media only screen and (min-width: 768px) {
    .service-container .testimonial-wrapper .testimonial-item .client-comment-wrapper {
      margin: 0 auto 0;
      width: 70%;
      position: relative;
      height: 260px;
    }
  }

  .service-container .testimonial-wrapper .testimonial-item .client-comment-wrapper .client-comment {
    width: 100%;
    text-align: center;
    color: #84beb8;
  }

  @media only screen and (min-width: 768px) {
    .service-container .testimonial-wrapper .testimonial-item .client-comment-wrapper .client-comment {
      width: 80%;
      text-align: left;
      position: absolute;
      top: 45%;
      -webkit-transform: translateY(-45%);
      transform: translateY(-45%);
    }
  }

  .service-container .testimonial-wrapper .testimonial-item .client-comment-wrapper .client-comment .desc {
    position: relative;
    width: 100%;
    height: 100%;
    margin-bottom: 40px;
    text-align: justify;
  }

  .service-container .testimonial-wrapper .testimonial-item .client-comment-wrapper .client-comment .desc:before {
    content: '';
    background-image: url("../images/icon/testimony_open.png");
    background-repeat: no-repeat;
    height: 35px;
    width: 35px;
    background-size: 35px;
    display: block;
    position: absolute;
    left: -35px;
    top: -20px;
  }

  @media only screen and (min-width: 768px) {
    .service-container .testimonial-wrapper .testimonial-item .client-comment-wrapper .client-comment .desc:before {
      height: 50px;
      width: 50px;
      background-size: 50px;
      left: -60px;
      top: -20px;
    }
  }

  .service-container .testimonial-wrapper .testimonial-item .client-comment-wrapper .client-comment .desc:after {
    content: '';
    background-image: url("../images/icon/testimony_close.png");
    background-repeat: no-repeat;
    height: 35px;
    width: 35px;
    background-size: 35px;
    display: block;
    position: absolute;
    right: -35px;
    bottom: -20px;
  }

  @media only screen and (min-width: 768px) {
    .service-container .testimonial-wrapper .testimonial-item .client-comment-wrapper .client-comment .desc:after {
      height: 50px;
      width: 50px;
      background-size: 50px;
      right: -50px;
      bottom: -20px;
    }
  }

  .service-container .testimonial-wrapper .testimonial-item .client-comment-wrapper .client-comment .title {
    padding: 0;
    height: 100%;
    color: #93bcb7;
    font-family: robotoB;
    margin-bottom: 0;
  }

  @media only screen and (min-width: 768px) {
    .service-container .testimonial-wrapper .testimonial-item .client-comment-wrapper .client-comment .title {
      padding: 0 0 0 30px;
    }
    .service-container .testimonial-wrapper .testimonial-item .client-comment-wrapper .client-comment .title:before {
      content: '/';
      font-size: 26px;
      font-family: robotoR;
      height: 30px;
      width: 30px;
      background-repeat: no-repeat;
      position: relative;
      left: -35px;
    }
  }

  .service-container .testimonial-wrapper .slick-dots {
    position: absolute;
    bottom: 15px;
  }

  .service-container .testimonial-wrapper .slick-dots li button:before {
    color: #ffffff;
    opacity: 1;
    font-size: 7px !important;
  }

  .service-container .testimonial-wrapper .slick-dots li.slick-active button:before {
    color: #ffd002;
  }

  .service-container .client-slider-wrapper {
    width: 80%;
    margin: 50px auto;
  }

  @media only screen and (min-width: 768px) {
    .service-container .client-slider-wrapper {
      margin: 50px auto;
    }
  }

  .service-container .client-slider-wrapper .slider-title {
    font-size: 20px;
    text-align: left;
  }

  .service-container .client-slider-wrapper .client-slider {
    width: 100%;
  }

  .service-container .client-slider-wrapper .client-slider .item {
    width: 33%;
  }

  .service-container .client-slider-wrapper .client-slider .item img {
    width: 90%;
    height: auto;
    margin: 0 auto;
    -o-object-fit: cover;
    object-fit: cover;
  }

  @media only screen and (min-width: 768px) {
    .service-container .client-slider-wrapper .client-slider .item img {
      width: auto;
      height: 200px;
    }
  }

  .service-container .client-slider-wrapper .slick-next:before {
    content: '';
    background-image: url("../images/icon/next-blue.png");
    background-size: 30px;
    height: 30px;
    width: 30px;
    display: block;
  }

  .service-container .client-slider-wrapper .slick-prev:before {
    content: '';
    background-image: url("../images/icon/prev-blue.png");
    background-size: 30px;
    height: 30px;
    width: 30px;
    display: block;
  }

  .service-container .results-title-wrapper {
    padding-top: 100px;
  }

  .getstarted-wrapper {
    background-image: url("../images/bg/home/bg_4.jpg");
    background-size: cover;
    background-position: center center;
    padding: 50px 40px;
  }

  @media only screen and (min-width: 768px) {
    .getstarted-wrapper {
      padding: 50px 0;
    }
  }

  .getstarted-wrapper .getstarted {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    height: 50vh;
    position: relative;
    padding: 0;
  }

  @media only screen and (min-width: 768px) {
    .getstarted-wrapper .getstarted {
      padding: 50px 0;
    }
  }

  .getstarted-wrapper .getstarted .banner-end {
    position: absolute;
    top: 50%;
    left: 0%;
    -webkit-transform: translate(0%, -50%);
    transform: translate(0%, -50%);
  }

  .ourwork-wrapper .banner {
    width: 100%;
    position: relative;
    background-color: #edf8f8;
    height: 45vh;
    position: relative;
  }

  @media only screen and (min-width: 768px) {
    .ourwork-wrapper .banner {
      height: 40vh;
    }
  }

  .ourwork-wrapper .banner .text-wrapper {
    width: 100%;
    text-align: center;
    position: absolute;
    top: 90%;
    left: 50%;
    -webkit-transform: translate(-50%, -90%);
    transform: translate(-50%, -90%);
  }

  @media only screen and (min-width: 768px) {
    .ourwork-wrapper .banner .text-wrapper {
      top: 70%;
      left: 50%;
      -webkit-transform: translate(-50%, -70%);
      transform: translate(-50%, -70%);
    }
  }

  .ourwork-wrapper .banner .text-wrapper h2 {
    font-size: 30px;
    line-height: 40px;
    text-transform: uppercase;
    margin-bottom: 10px;
    color: #383044;
  }

  .ourwork-wrapper .banner .text-wrapper .line {
    height: 70px;
    width: 1px;
    margin: 20px auto;
    border-left: 0.1em solid #383044;
  }

  .ourwork-wrapper .banner .text-wrapper .desc {
    font-size: 18px;
    line-height: 28px;
    margin: 0 auto;
    font-family: robotoR;
    color: #6b6970;
  }

  .ourwork-wrapper .category-filter {
    background-color: #edf8f8;
    padding: 0 0 50px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  .ourwork-wrapper .category-filter .category {
    padding: 5px 20px 5px 10px;
    font-family: spartanM;
    cursor: pointer;
    position: relative;
    font-size: 16px;
    color: #363413;
  }

  .ourwork-wrapper .category-filter .category:first-child {
    padding: 5px 20px 5px 0px;
  }

  .ourwork-wrapper .category-filter .category.active {
    color: #ffd002;
  }

  .ourwork-wrapper .category-filter .category:hover {
    color: #ffd002;
  }

    .ourwork-wrapper .category-filter .category:not(:last-child):after {
      content: "/";
      color: #363413;
      font-size: 30px;
      font-family: robotoT;
      position: absolute;
      top: -2px;
      right: 0;
      height: 12px;
      width: 10px;
    }

  @media only screen and (min-width: 768px) {
    .ourwork-wrapper .category-filter .category:not(:last-child):after {
      content: "/";
      color: #363413;
      font-size: 30px;
      font-family: robotoT;
      position: absolute;
      top: -6px;
      right: 0;
      height: 12px;
      width: 10px;
    }
  }
    .ourwork-wrapper .portfolio-wrapper {
      background-color: #edf8f8;
    }

    .ourwork-wrapper .whatyousee-title-wrapper {
      height: 100%;
      padding: 100px 0 100px 0;
      background-color: #edf8f8;
      position: relative;
    }

    @media only screen and (min-width: 768px) {
      .ourwork-wrapper .whatyousee-title-wrapper {
        height: 50vh;
        padding: 0;
      }
    }

    .ourwork-wrapper .whatyousee-title-wrapper .content {
      width: 100%;
      max-width: 1100px;
      padding: 0 40px;
      margin: 0 auto;
      position: relative;
      height: 100%;
    }

    @media only screen and (min-width: 768px) {
      .ourwork-wrapper .whatyousee-title-wrapper .content {
        width: 85%;
      }
    }

    .ourwork-wrapper .whatyousee-title-wrapper .content .banner-end {
      width: 100%;
    }

    @media only screen and (min-width: 768px) {
      .ourwork-wrapper .whatyousee-title-wrapper .content .banner-end {
        position: absolute;
        top: 50%;
        left: 30%;
        -webkit-transform: translate(-30%, -50%);
        transform: translate(-30%, -50%);
      }
    }

    .ourwork-wrapper .whatyousee-title-wrapper .content .button-wrapper {
      -webkit-box-pack: left;
      -ms-flex-pack: left;
      justify-content: left;
    }

    .portfolio-wrapper {
      width: 100%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      padding: 0 0 0 0;
    }

    @media (min-width: 768px) {
      .portfolio-wrapper {
        padding: 0;
      }
    }

    .portfolio-wrapper .portfolio-item {
      position: relative;
      display: none;
      overflow: hidden;
      cursor: pointer;
    }

    .portfolio-wrapper .portfolio-item:hover .overlay {
      background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(56, 48, 68, 0.9)));
      background-image: linear-gradient(rgba(56, 48, 68, 0.9));
    }

    .portfolio-wrapper .portfolio-item:hover .overlay .text {
      bottom: 50px;
      -webkit-transition: 0.3s;
      transition: 0.3s;
    }

    .portfolio-wrapper .portfolio-item:hover .overlay .text p.sub-title2 {
      display: block;
    }

    .portfolio-wrapper .portfolio-item:hover img {
      -webkit-transform: scale(1.15);
      transform: scale(1.15);
      -webkit-transition: -webkit-transform 0.5s;
      transition: -webkit-transform 0.5s;
      transition: transform 0.5s;
      transition: transform 0.5s, -webkit-transform 0.5s;
      /* Animation */
    }

    @media (min-width: 768px) {
      .portfolio-wrapper .portfolio-item {
        width: 25%;
      }
    }

    .portfolio-wrapper .portfolio-item img {
      -webkit-transition: -webkit-transform 0.5s;
      transition: -webkit-transform 0.5s;
      transition: transform 0.5s;
      transition: transform 0.5s, -webkit-transform 0.5s;
      /* Animation */
      -webkit-box-flex: -1;
      -ms-flex: -1;
      flex: -1;
    }

    .portfolio-wrapper .portfolio-item .overlay {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(56, 48, 68, 0.1)), color-stop(50%, rgba(56, 48, 68, 0.4)), to(#383044));
      background-image: linear-gradient(to bottom, rgba(56, 48, 68, 0.1) 0%, rgba(56, 48, 68, 0.4) 50%, #383044);
    }

    .portfolio-wrapper .portfolio-item .overlay .text {
      position: absolute;
      bottom: 20px;
      left: 30px;
      text-align: left;
      -webkit-transition: 0.3s;
      transition: 0.3s;
    }

    .portfolio-wrapper .portfolio-item .overlay .text p {
      margin-bottom: 5px;
    }

    .portfolio-wrapper .portfolio-item .overlay .text p.title {
      font-size: 16px;
      font-family: spartanB;
      color: #ffffff !important;
      text-shadow: 1px 1px 3px #000000;
    }

    .portfolio-wrapper .portfolio-item .overlay .text p.sub-title {
      font-size: 14px;
      font-family: spartanR !important;
      text-shadow: 1px 1px 3px #000000;
      color: #d8d8d8;
    }

    .portfolio-wrapper .portfolio-item .overlay .text p.sub-title2 {
      display: none;
      font-size: 14px !important;
      font-family: spartanR !important;
      text-shadow: 1px 1px 3px #000000;
      color: #ffd002;
      text-transform: uppercase;
    }

    /*.contact-wrapper .banner {
      height: 50vh;
      background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(165, 224, 220, 0.8)), to(rgba(0, 166, 156, 0.8))), url("../images/bg/contact.jpg");
      background-image: linear-gradient(to bottom, rgba(165, 224, 220, 0.8), rgba(0, 166, 156, 0.8)), url("../images/bg/contact.jpg");
      background-size: cover;
      background-position: center center;
    }*/

    @media only screen and (max-width: 768px) {
      .contact-wrapper .banner .title-wrapper {
        position: relative;
        top: 65%;
        left: 40%;
        -webkit-transform: translate(-40%, -65%);
        transform: translate(-40%, -65%);
        width: 100%;
        padding: 0 40px;
      }
    }

    @media only screen and (min-width: 768px) {
      .contact-wrapper .banner .title-wrapper {
        position: unset;
        top: unset;
        left: unset;
        max-width: 1100px;
        height: 100%;
        margin: auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
      }
    }

    .contact-wrapper .banner .title-wrapper .wrapper {
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
    }

    .contact-wrapper .banner .title-wrapper .wrapper .section-text-wrapper p {
      color: #ffffff;
    }

    .contact-wrapper .content-wrapper {
      background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(165, 224, 220, 0.2)), to(rgba(0, 166, 156, 0.2)));
      background-image: linear-gradient(to bottom, rgba(165, 224, 220, 0.2), rgba(0, 166, 156, 0.2));
    }

    .contact-wrapper .content-wrapper .title {
      padding: 100px 40px 0;
      width: 100%;
      max-width: 1100px;
      margin: 0 auto;
    }

    @media only screen and (min-width: 768px) {
      .contact-wrapper .content-wrapper .title {
        padding: 100px 0 0;
      }
    }

    .contact-wrapper .content-wrapper .title h2 {
      text-transform: capitalize;
    }

    .contact-wrapper .content-wrapper .form-wrapper {
      padding: 50px 40px 50px;
      width: 100%;
      max-width: 1100px;
      margin: 0 auto;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
    }

    @media only screen and (min-width: 768px) {
      .contact-wrapper .content-wrapper .form-wrapper {
        padding: 50px 0;
      }
    }

    .contact-wrapper .content-wrapper .form-wrapper .name, .contact-wrapper .content-wrapper .form-wrapper .phone {
      width: 100%;
      padding-bottom: 25px;
    }

    @media only screen and (min-width: 768px) {
      .contact-wrapper .content-wrapper .form-wrapper .name, .contact-wrapper .content-wrapper .form-wrapper .phone {
        width: 49.5%;
      }
    }

    .contact-wrapper .content-wrapper .form-wrapper .email, .contact-wrapper .content-wrapper .form-wrapper .message {
      width: 100%;
      padding-bottom: 25px;
    }

    .contact-wrapper .content-wrapper .form-wrapper label {
      font-family: spartanR;
      font-size: 14px;
    }

    .contact-wrapper .content-wrapper .form-wrapper label.error {
      font-family: robotoR;
      font-size: 12px;
      font-weight: bold;
      color: red;
      margin-top: 5px;
    }

    .contact-wrapper .content-wrapper .form-wrapper input, .contact-wrapper .content-wrapper .form-wrapper textarea {
      width: 100%;
      height: 50px;
      margin: 5px 0;
      border-radius: 10px;
      border: 1px solid #595b5b;
      outline: none;
      color: #6b696f;
      font-size: 20px;
      padding-left: 10px;
      font-family: robotoL;
    }

    .contact-wrapper .content-wrapper .form-wrapper input.error, .contact-wrapper .content-wrapper .form-wrapper textarea.error {
      border: 1px solid red;
    }

    .contact-wrapper .content-wrapper .form-wrapper textarea {
      height: 200px;
    }

    .contact-wrapper .content-wrapper .form-wrapper .button-wrapper {
      padding-top: 20px;
    }

    .contact-wrapper .address-wrapper {
      padding: 50px 40px 150px;
      width: 100%;
      max-width: 1100px;
      margin: 0 auto;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
    }

    @media only screen and (min-width: 768px) {
      .contact-wrapper .address-wrapper {
        padding: 50px 0 150px;
      }
    }

    .contact-wrapper .address-wrapper .maps {
      width: 100%;
      padding: 50px 0 50px;
      text-align: center;
      border-radius: 25px;
      margin-bottom: 50px;
    }

    @media only screen and (min-width: 768px) {
      .contact-wrapper .address-wrapper .maps {
        width: 70%;
        padding-bottom: 0;
        margin-bottom: 0;
      }
    }

    .contact-wrapper .address-wrapper .maps iframe {
      width: 100%;
      border-radius: 25px;
    }

    .contact-wrapper .address-wrapper .details {
      width: 100%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
    }

    @media only screen and (min-width: 768px) {
      .contact-wrapper .address-wrapper .details {
        width: 30%;
      }
    }

    .contact-wrapper .address-wrapper .details .desc {
      width: 100%;
      margin: 0 auto;
    }

    @media only screen and (min-width: 768px) {
      .contact-wrapper .address-wrapper .details .desc {
        width: 80%;
      }
    }

    .contact-wrapper .address-wrapper .details .desc .location {
      padding-bottom: 50px;
    }

    .contact-wrapper .address-wrapper .details .desc .email a {
      color: #6B6970;
    }

    .contact-wrapper .address-wrapper .details .desc .email a:hover {
      color: #ffd002;
    }

    .services-wrapper .banner {
      width: 100%;
      background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 253, 243, 0.2)), to(#fff3c2));
      background-image: linear-gradient(to bottom, rgba(255, 253, 243, 0.2), #fff3c2);
      position: relative;
    }

    @media only screen and (min-width: 768px) {
      .services-wrapper .banner {
        height: 80vh;
      }
    }

    .services-wrapper .banner .banner-wrapper {
      width: 100%;
      height: 120vh;
      max-width: 1100px;
      margin: 0 auto;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      position: relative;
    }

    .services-wrapper .banner .banner-wrapper.result {
      width: 85%;
    }

    @media only screen and (min-width: 768px) {
      .services-wrapper .banner .banner-wrapper {
        height: 100%;
        width: 85%;
        max-width: 1100px;
      }
    }

    .services-wrapper .banner .banner-wrapper .text-wrapper {
      text-align: center;
      width: 85%;
      margin: auto;
      padding-top: 70px;
    }

    @media only screen and (min-width: 768px) {
      .services-wrapper .banner .banner-wrapper .text-wrapper {
        width: 50%;
        padding-top: 0;
      }
    }

    .services-wrapper .banner .banner-wrapper .text-wrapper .title {
      margin-top: 20px;
      margin-bottom: 20px;
      -webkit-transition: 1s;
      transition: 1s;
      cursor: pointer;
      display: inline-block;
      width: 100%;
    }

    .services-wrapper .banner .banner-wrapper .text-wrapper .title:hover {
      margin-bottom: 40px;
      margin-top: 0px;
      -webkit-transition: 1s;
      transition: 1s;
    }

    .services-wrapper .banner .banner-wrapper .text-wrapper .title h2 {
      color: #383044;
      text-align: left;
      line-height: 70px !important;
      margin-bottom: 0;
    }

    .services-wrapper .banner .banner-wrapper .text-wrapper .title h2 .sub {
      font-size: 15px;
      text-transform: uppercase;
      line-height: 30px;
      font-family: spartanM;
      text-align: left;
    }

    @media only screen and (min-width: 768px) {
      .services-wrapper .banner .banner-wrapper .text-wrapper .title h2 .sub {
        font-size: 34px;
        line-height: 44px;
      }
    }

    .services-wrapper .banner .banner-wrapper .text-wrapper .title h2 .main {
      margin-top: 10px;
      line-height: 44px;
      text-align: left;
    }

    @media only screen and (min-width: 768px) {
      .services-wrapper .banner .banner-wrapper .text-wrapper .title h2 .main {
        margin-top: 20px;
        line-height: 70px;
      }
    }

    .services-wrapper .banner .banner-wrapper .text-wrapper .desc {
      width: 100%;
      margin: 0 auto;
      text-align: left;
    }

    @media only screen and (min-width: 768px) {
      .services-wrapper .banner .banner-wrapper .text-wrapper .desc {
        width: 80%;
        margin: 25px auto 25px 0;
      }
    }

    .services-wrapper .banner .banner-wrapper .text-wrapper .desc p {
      font-size: 18px;
      line-height: 28px;
      font-family: robotoR;
      color: #6b6970;
    }

    .services-wrapper .banner .banner-wrapper .text-wrapper .button-wrapper {
      padding-top: 20px;
      -webkit-box-pack: left;
      -ms-flex-pack: left;
      justify-content: left;
    }

    @media only screen and (min-width: 768px) {
      .services-wrapper .banner .banner-wrapper .text-wrapper .button-wrapper {
        padding-top: 30px;
      }
    }

    .services-wrapper .banner .banner-wrapper .right {
      width: 100%;
      height: 100%;
      padding: 50px 0;
      margin: auto;
      position: relative;
    }

    @media only screen and (min-width: 768px) {
      .services-wrapper .banner .banner-wrapper .right {
        width: 50%;
      }
    }

    .services-wrapper .banner .banner-wrapper .right img {
      width: 100%;
      -webkit-transition: 0.5s;
      transition: 0.5s;
    }

    .services-wrapper .banner .banner-wrapper .right img:hover {
      cursor: pointer;
      margin-bottom: 10px;
      margin-top: -10px;
      -webkit-transition: 0.5s;
      transition: 0.5s;
    }

    @media only screen and (min-width: 768px) {
      .services-wrapper .banner .banner-wrapper .right img {
        position: absolute;
        bottom: 0px;
        left: -100px;
        width: 130%;
      }
    }

    .services-wrapper .banner .quiz-wrapper {
      height: 100vh;
      display: none;
    }

    @media only screen and (min-width: 768px) {
      .services-wrapper .banner .quiz-wrapper {
        height: 100%;
        position: relative;
        display: block;
      }
    }

    .services-wrapper .banner .quiz-wrapper .quiz-item {
      width: 80%;
      position: absolute;
      top: 40%;
      left: 50%;
      -webkit-transform: translate(-50%, -40%);
      transform: translate(-50%, -40%);
    }

    @media only screen and (min-width: 768px) {
      .services-wrapper .banner .quiz-wrapper .quiz-item {
        width: 100%;
        top: 60%;
        left: 50%;
        -webkit-transform: translate(-50%, -60%);
        transform: translate(-50%, -60%);
      }
    }

    .services-wrapper .banner .quiz-wrapper .quiz-item .question h3 {
      color: #383044;
      font-size: 20px;
      line-height: 24px;
      text-align: left;
    }

    @media only screen and (min-width: 768px) {
      .services-wrapper .banner .quiz-wrapper .quiz-item .question h3 {
        font-size: 22px;
        line-height: 34px;
        text-align: center;
      }
    }

    .services-wrapper .banner .quiz-wrapper .quiz-item .button-wrapper {
      -webkit-box-pack: left;
      -ms-flex-pack: left;
      justify-content: left;
    }

    @media only screen and (min-width: 768px) {
      .services-wrapper .banner .quiz-wrapper .quiz-item .button-wrapper {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
      }
    }

    .services-wrapper .banner .quiz-wrapper .quiz-item .button-wrapper div:nth-child(1) {
      margin-right: 10px;
    }

    @media only screen and (max-width: 768px) {
      .services-wrapper .banner .quiz-wrapper .quiz-item .button-wrapper div:nth-child(1) {
        width: 45%;
      }
    }

    .services-wrapper .banner .quiz-wrapper .quiz-item .button-wrapper div:nth-child(2) {
      margin-left: 10px;
    }

    @media only screen and (max-width: 768px) {
      .services-wrapper .banner .quiz-wrapper .quiz-item .button-wrapper div:nth-child(2) {
        width: 45%;
      }
    }

    .services-wrapper .banner .quiz-wrapper .quiz-item .tips {
      width: 100%;
      margin: 0 auto;
    }

    @media only screen and (min-width: 768px) {
      .services-wrapper .banner .quiz-wrapper .quiz-item .tips {
        width: 700px;
      }
    }

    .services-wrapper .banner .quiz-wrapper .quiz-item .tips .desktop {
      display: none;
    }

    .services-wrapper .banner .quiz-wrapper .quiz-item .tips .mobile {
      display: block;
      margin-top: 50px;
    }

    @media only screen and (min-width: 768px) {
      .services-wrapper .banner .quiz-wrapper .quiz-item .tips .desktop {
        display: block;
      }
      .services-wrapper .banner .quiz-wrapper .quiz-item .tips .mobile {
        display: none;
      }
    }

    .services-wrapper .banner .quiz-wrapper .progress {
      width: 80%;
      position: absolute;
      bottom: 25px;
      left: 50%;
      -webkit-transform: translate(-50%, -25px);
      transform: translate(-50%, -25px);
    }

    @media only screen and (min-width: 768px) {
      .services-wrapper .banner .quiz-wrapper .progress {
        width: 500px;
      }
    }

    .services-wrapper .banner .quiz-wrapper .progress p {
      text-align: center;
      font-size: 12px;
      font-family: robotoR;
      color: #6b6970;
    }

    .services-wrapper .banner .quiz-wrapper .progress .bar {
      margin-top: 10px;
      width: 100%;
      background-color: white;
      border-radius: 3px;
    }

    .services-wrapper .banner .quiz-wrapper .progress .progress-bar-fill {
      display: block;
      height: 6px;
      background-color: #ffd002;
      -webkit-transition: width 500ms ease-in-out;
      transition: width 500ms ease-in-out;
      border-radius: 25px;
    }

    .services-wrapper .banner .form.almost-there {
      padding: 100px 0 50px;
      width: 85%;
      height: 100%;
      max-width: 850px;
      margin: auto;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
    }

    .services-wrapper .banner .form.almost-there .title {
      width: 100%;
      padding-bottom: 50px;
    }

    .services-wrapper .banner .form.almost-there .title h2 {
      text-transform: capitalize;
      color: #363143;
    }

    .services-wrapper .banner .form.almost-there .form-wrapper {
      width: 100%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
    }

    .services-wrapper .banner .form.almost-there .form-wrapper .name, .services-wrapper .banner .form.almost-there .form-wrapper .phone, .services-wrapper .banner .form.almost-there .form-wrapper .email, .services-wrapper .banner .form.almost-there .form-wrapper .company {
      width: 100%;
      padding-bottom: 25px;
    }

    @media only screen and (min-width: 768px) {
      .services-wrapper .banner .form.almost-there .form-wrapper .name, .services-wrapper .banner .form.almost-there .form-wrapper .phone, .services-wrapper .banner .form.almost-there .form-wrapper .email, .services-wrapper .banner .form.almost-there .form-wrapper .company {
        width: 49.5%;
      }
    }

    .services-wrapper .banner .form.almost-there .form-wrapper label {
      font-family: spartanR;
      font-size: 14px;
    }

    .services-wrapper .banner .form.almost-there .form-wrapper label.error {
      font-family: robotoR;
      font-size: 12px;
      font-weight: bold;
      color: red;
    }

    .services-wrapper .banner .form.almost-there .form-wrapper input, .services-wrapper .banner .form.almost-there .form-wrapper textarea {
      width: 100%;
      height: 50px;
      margin-top: 5px;
      border-radius: 10px;
      border: 1px solid #595b5b;
      color: #6b696f;
      font-size: 20px;
      padding-left: 10px;
      font-family: robotoL;
    }

    .services-wrapper .banner .form.almost-there .form-wrapper input.error, .services-wrapper .banner .form.almost-there .form-wrapper textarea.error {
      margin-bottom: 10px;
      border: 1px solid red;
    }

    .services-wrapper .banner .form.almost-there .form-wrapper textarea {
      height: 200px;
      resize: none;
    }

    .services-wrapper .banner .form.almost-there .form-wrapper .button-wrapper {
      padding-top: 20px;
    }

    .services-wrapper .banner .form.almost-there .form-wrapper .button-wrapper .submit {
      background-color: #d8d8d8;
      color: #ffffff;
      -webkit-box-shadow: 0 1px 10px rgba(136, 136, 136, 0.5);
      box-shadow: 0 1px 10px rgba(136, 136, 136, 0.5);
      border: 2px solid #d8d8d8;
      font-size: 12px;
      width: 240px;
      padding: 14px 10px 14px;
    }

    @media only screen and (min-width: 768px) {
      .services-wrapper .banner .form.almost-there .form-wrapper .button-wrapper .submit {
        font-size: 16px;
        width: 240px;
        padding: 16px 30px 15px;
      }
    }

    .services-wrapper .banner .form.almost-there .form-wrapper .button-wrapper .submit.active {
      background-color: #383044;
      color: #ffffff;
    }

    .services-wrapper .banner .banner-wrapper.result {
      height: 100%;
    }

    .services-wrapper .banner .banner-wrapper.result .text-wrapper {
      width: 100%;
    }

    @media only screen and (min-width: 768px) {
      .services-wrapper .banner .banner-wrapper.result .text-wrapper {
        width: 60%;
      }
    }

    .services-wrapper .banner .banner-wrapper.result .text-wrapper h2 {
      font-size: 32px;
      line-height: 44px !important;
      text-transform: capitalize;
    }

    .services-wrapper .banner .banner-wrapper.result .text-wrapper h2 span {
      text-transform: capitalize;
      font-size: 32px;
    }

    .services-wrapper .banner .banner-wrapper.result .text-wrapper h2 span.expert {
      color: #ee714e;
    }

    .services-wrapper .banner .banner-wrapper.result .text-wrapper h2 span.apprentice {
      color: #725598;
    }

    .services-wrapper .banner .banner-wrapper.result .text-wrapper h2 span.novice {
      color: #6b6970;
    }

    .services-wrapper .banner .banner-wrapper.result .text-wrapper .desc {
      margin: 25px auto 25px 0;
    }

    .services-wrapper .banner .banner-wrapper.result .text-wrapper .desc p {
      margin-bottom: 20px;
    }

    .services-wrapper .banner .banner-wrapper.result .text-wrapper .button-wrapper {
      width: 100%;
    }

    @media only screen and (max-width: 768px) {
      .services-wrapper .banner .banner-wrapper.result .text-wrapper .button-wrapper .type1, .services-wrapper .banner .banner-wrapper.result .text-wrapper .button-wrapper .type2 {
        width: 140px;
        padding: 13px 10px 11px;
        font-size: 14px !important;
      }
    }

    .services-wrapper .banner .banner-wrapper.result .right {
      width: 100%;
      opacity: 0;
    }

    .services-wrapper .banner .banner-wrapper.result .right.show {
      opacity: 1;
      -webkit-transition: 2s;
      transition: 2s;
    }

    @media only screen and (min-width: 768px) {
      .services-wrapper .banner .banner-wrapper.result .right {
        width: 40%;
      }
    }

    @media only screen and (min-width: 768px) {
      .services-wrapper .banner .banner-wrapper.result .right img {
        top: 50%;
        -webkit-transform: translate(100px, -50%);
        transform: translate(100px, -50%);
      }
    }

    .services-wrapper .covered {
      width: 100%;
      background-color: #edf8f8;
      position: relative;
      padding: 75px 0 0;
    }

    @media only screen and (min-width: 768px) {
      .services-wrapper .covered {
        padding: 100px 0 0;
      }
    }

    .services-wrapper .covered .covered-wrapper {
      width: 85%;
      max-width: 1100px;
      margin: 0 auto;
    }

    .services-wrapper .covered .covered-wrapper .title-wrapper {
      width: 95%;
    }

    .services-wrapper .covered .covered-wrapper .title-wrapper .title {
      display: none;
    }

    .services-wrapper .covered .covered-wrapper .title-wrapper .title:after {
      background-image: none;
    }

    .services-wrapper .covered .covered-wrapper .title-wrapper .sub-title {
      width: 60%;
      text-align: left;
      padding-left: 18px;
      position: relative;
    }

    @media only screen and (min-width: 768px) {
      .services-wrapper .covered .covered-wrapper .title-wrapper .sub-title {
        width: 100%;
      }
    }

    .services-wrapper .covered .covered-wrapper .copy-wrapper {
      width: 95%;
      max-width: 1100px;
      margin: 0 0 0 auto;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
    }

    @media only screen and (min-width: 768px) {
      .services-wrapper .covered .covered-wrapper .copy-wrapper {
        width: 80%;
        margin: 0 auto;
        padding: 50px 0 0;
      }
    }

    .services-wrapper .covered .covered-wrapper .copy-wrapper .title {
      display: inline-block;
      width: 100%;
      margin-top: 20px;
      margin-bottom: 20px;
      cursor: pointer;
      -webkit-transition: 0.5s;
      transition: 0.5s;
    }

    .services-wrapper .covered .covered-wrapper .copy-wrapper .title:hover {
      margin-bottom: 40px;
      margin-top: 0px;
      -webkit-transition: 0.5s;
      transition: 0.5s;
    }

    .services-wrapper .covered .covered-wrapper .copy-wrapper .title h2 {
      font-size: 34px;
      line-height: 42px;
      text-transform: uppercase;
      margin-bottom: 10px;
      color: #383044;
      text-align: left;
    }

    @media only screen and (min-width: 768px) {
      .services-wrapper .covered .covered-wrapper .copy-wrapper .title h2 {
        font-size: 54px;
        line-height: 68px;
        text-align: center;
      }
    }

    .services-wrapper .covered .covered-wrapper .copy-wrapper .desc {
      text-align: center;
      position: relative;
      display: inline-block;
    }

    .services-wrapper .covered .covered-wrapper .copy-wrapper .desc p {
      font-size: 15px !important;
      font-family: spartanM;
      padding: 0 0 0 0;
      padding-bottom: 0 !important;
      text-align: left;
    }

    .services-wrapper .covered .covered-wrapper .copy-wrapper .desc p.border {
      padding: 16px 0 0 0 !important;
      width: 10%;
      text-align: left;
      border-bottom: 3pt solid #ffd002;
      position: relative;
    }

    .services-wrapper .covered .covered-wrapper .copy-wrapper .desc p.border.show:before {
      position: absolute;
      right: 1px;
      bottom: -4px;
      content: '';
      border-top: 20px solid #ffd002;
      border-left: 20px solid transparent;
    }

    .services-wrapper .covered .covered-wrapper .copy-wrapper .desc p.border.show:after {
      position: absolute;
      right: -4px;
      bottom: -4px;
      content: '';
      border-top: 20px solid #edf8f8;
      border-left: 20px solid transparent;
    }

    @media only screen and (min-width: 768px) {
      .services-wrapper .covered .covered-wrapper .copy-wrapper .desc p {
        font-size: 16px;
        padding: 0 55px 10px 25px;
      }
    }

    .services-wrapper .covered .rocket-wrapper {
      background-image: url("../images/services/rocket_mobile.png");
      background-position: 15%;
      background-repeat: no-repeat;
      background-size: cover;
      padding-top: 50px;
      height: 1700px;
    }

    @media only screen and (min-width: 768px) {
      .services-wrapper .covered .rocket-wrapper {
        background-image: url("../images/services/rocket_desktop.png");
        background-size: auto 100%;
        background-position: center;
        height: 2055px;
        padding-top: 130px;
      }
    }

    .services-wrapper .covered .rocket-wrapper .enter-wrapper {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -ms-flex-line-pack: start;
      align-content: flex-start;
      padding-bottom: 75px;
    }

    .services-wrapper .covered .rocket-wrapper .enter-wrapper .left {
      width: 100%;
      padding-left: 90px;
      text-align: left;
    }

    @media only screen and (min-width: 768px) {
      .services-wrapper .covered .rocket-wrapper .enter-wrapper .left {
        width: 50%;
        padding-right: 80px;
      }
    }

    .services-wrapper .covered .rocket-wrapper .enter-wrapper .left .left-wrapper {
      width: 90%;
    }

    @media only screen and (min-width: 768px) {
      .services-wrapper .covered .rocket-wrapper .enter-wrapper .left .left-wrapper {
        width: 60%;
        margin: 0 0 0 auto;
      }
    }

    .services-wrapper .covered .rocket-wrapper .enter-wrapper .left .left-wrapper h3 {
      width: 100%;
      color: #383044;
      font-size: 15px !important;
      line-height: 22px;
      font-family: spartanM;
      padding: 0 0 0 0;
      padding-bottom: 0 !important;
      text-align: left;
    }

    @media only screen and (min-width: 768px) {
      .services-wrapper .covered .rocket-wrapper .enter-wrapper .left .left-wrapper h3 {
        width: 81%;
        line-height: 26px;
        margin: 0 0 0 auto;
        padding-top: 25px;
        font-size: 16px;
        line-height: 22px;
        font-family: spartanSB !important;
      }
    }

    .services-wrapper .covered .rocket-wrapper .enter-wrapper .right {
      width: 100%;
      padding-left: 90px;
    }

    @media only screen and (min-width: 768px) {
      .services-wrapper .covered .rocket-wrapper .enter-wrapper .right {
        width: 50%;
        padding-right: 80px;
      }
    }

    .services-wrapper .covered .rocket-wrapper .enter-wrapper .right .right-wrapper {
      width: 90%;
    }

    @media only screen and (min-width: 768px) {
      .services-wrapper .covered .rocket-wrapper .enter-wrapper .right .right-wrapper {
        width: 60%;
        margin: 0 auto 0 0;
      }
    }

    .services-wrapper .covered .rocket-wrapper .enter-wrapper .right .right-wrapper h2 {
      width: 100%;
      font-size: 24px;
      letter-spacing: 0;
      line-height: 30px;
      padding-top: 25px;
      color: #383044;
    }

    @media only screen and (min-width: 768px) {
      .services-wrapper .covered .rocket-wrapper .enter-wrapper .right .right-wrapper h2 {
        width: 85%;
        font-size: 32px;
        letter-spacing: 0;
        line-height: 44px;
      }
    }

    .services-wrapper .covered .rocket-wrapper .enter-wrapper .right .right-wrapper img {
      width: 200px;
      padding-bottom: 25px;
    }

    .services-wrapper .covered .rocket-wrapper .enter-wrapper .right .right-wrapper h3 {
      width: 85%;
      margin: 0 auto 0 0;
      padding-bottom: 25px;
    }

    .services-wrapper .covered .rocket-wrapper .enter-wrapper .right .right-wrapper p {
      width: 80%;
      margin: 0 auto 0 0;
    }

    .services-wrapper .covered .rocket-wrapper .services-items {
      display: grid;
      grid-template-columns: 100%;
    }

    @media only screen and (min-width: 768px) {
      .services-wrapper .covered .rocket-wrapper .services-items {
        grid-template-columns: 45% 10% 45%;
      }
    }

    .services-wrapper .covered .rocket-wrapper .services-items .left {
      width: 100%;
      padding-left: 90px;
      padding-bottom: 30px;
      text-align: left;
    }

    @media only screen and (min-width: 768px) {
      .services-wrapper .covered .rocket-wrapper .services-items .left {
        width: 60%;
        padding-left: 0;
        padding-bottom: 0;
        margin: 0 0 0 auto;
        text-align: right;
      }
    }

    .services-wrapper .covered .rocket-wrapper .services-items .left h2 {
      width: 100%;
    }

    @media only screen and (min-width: 768px) {
      .services-wrapper .covered .rocket-wrapper .services-items .left h2 {
        width: 70%;
      }
    }

    .services-wrapper .covered .rocket-wrapper .services-items .left img.desktop {
      display: none;
    }

    @media only screen and (min-width: 768px) {
      .services-wrapper .covered .rocket-wrapper .services-items .left img.desktop {
        width: 150px;
        padding-bottom: 25px;
        display: block;
        margin: 0 0 0 auto;
      }
    }

    .services-wrapper .covered .rocket-wrapper .services-items .left img.mobile {
      display: block;
    }

    @media only screen and (min-width: 768px) {
      .services-wrapper .covered .rocket-wrapper .services-items .left img.mobile {
        display: none;
      }
    }

    .services-wrapper .covered .rocket-wrapper .services-items .left h3 {
      width: 100%;
      color: #393044;
      padding-bottom: 15px;
    }

    @media only screen and (min-width: 768px) {
      .services-wrapper .covered .rocket-wrapper .services-items .left h3 {
        padding-bottom: 25px;
        width: 85%;
        margin: 0 0 0 auto;
      }
    }

    .services-wrapper .covered .rocket-wrapper .services-items .left p {
      width: 100%;
    }

    @media only screen and (min-width: 768px) {
      .services-wrapper .covered .rocket-wrapper .services-items .left p {
        width: 80%;
        margin: 0 0 0 auto;
      }
    }

    .services-wrapper .covered .rocket-wrapper .services-items .left .left-wrapper {
      -webkit-transition: 0.5s;
      transition: 0.5s;
    }

    .services-wrapper .covered .rocket-wrapper .services-items .left .left-wrapper:hover {
      cursor: pointer;
      margin-bottom: 10px;
      margin-top: -10px;
      -webkit-transition: 0.5s;
      transition: 0.5s;
    }

    @media only screen and (max-width: 768px) {
      .services-wrapper .covered .rocket-wrapper .services-items .left .left-wrapper .desc {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
      }
      .services-wrapper .covered .rocket-wrapper .services-items .left .left-wrapper .desc img {
        width: 30%;
        height: 100%;
      }
      .services-wrapper .covered .rocket-wrapper .services-items .left .left-wrapper .desc p {
        width: 70%;
        padding-right: 40px;
        font-size: 16px !important;
        line-height: 20px;
      }
    }

    .services-wrapper .covered .rocket-wrapper .services-items .right {
      width: 100%;
      padding-left: 90px;
      padding-bottom: 30px;
      text-align: left;
    }

    @media only screen and (min-width: 768px) {
      .services-wrapper .covered .rocket-wrapper .services-items .right {
        width: 60%;
        padding-left: 0;
        margin: 0 auto 0 0;
        text-align: right;
      }
    }

    .services-wrapper .covered .rocket-wrapper .services-items .right h2 {
      width: 100%;
    }

    @media only screen and (min-width: 768px) {
      .services-wrapper .covered .rocket-wrapper .services-items .right h2 {
        width: 70%;
      }
    }

    .services-wrapper .covered .rocket-wrapper .services-items .right img {
      width: 150px;
      padding-bottom: 25px;
    }

    .services-wrapper .covered .rocket-wrapper .services-items .right img.desktop {
      display: none;
    }

    @media only screen and (min-width: 768px) {
      .services-wrapper .covered .rocket-wrapper .services-items .right img.desktop {
        display: block;
      }
    }

    .services-wrapper .covered .rocket-wrapper .services-items .right img.mobile {
      display: block;
    }

    @media only screen and (min-width: 768px) {
      .services-wrapper .covered .rocket-wrapper .services-items .right img.mobile {
        display: none;
      }
    }

    .services-wrapper .covered .rocket-wrapper .services-items .right h3 {
      width: 100%;
      color: #393044;
      padding-bottom: 15px;
    }

    @media only screen and (min-width: 768px) {
      .services-wrapper .covered .rocket-wrapper .services-items .right h3 {
        padding-bottom: 25px;
        width: 85%;
        margin: 0 auto 0 0;
        text-align: left;
      }
    }

    .services-wrapper .covered .rocket-wrapper .services-items .right p {
      width: 80%;
      margin: 0 auto 0 0;
    }

    @media only screen and (min-width: 768px) {
      .services-wrapper .covered .rocket-wrapper .services-items .right p {
        text-align: left;
      }
    }

    .services-wrapper .covered .rocket-wrapper .services-items .right .right-wrapper {
      -webkit-transition: 0.5s;
      transition: 0.5s;
    }

    .services-wrapper .covered .rocket-wrapper .services-items .right .right-wrapper:hover {
      cursor: pointer;
      margin-bottom: 10px;
      margin-top: -10px;
      -webkit-transition: 0.5s;
      transition: 0.5s;
    }

    @media only screen and (max-width: 768px) {
      .services-wrapper .covered .rocket-wrapper .services-items .right .right-wrapper .desc {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
      }
      .services-wrapper .covered .rocket-wrapper .services-items .right .right-wrapper .desc img {
        width: 30%;
        height: 100%;
      }
      .services-wrapper .covered .rocket-wrapper .services-items .right .right-wrapper .desc p {
        width: 70%;
        padding-right: 40px;
        font-size: 16px !important;
        line-height: 20px;
      }
    }

    .services-wrapper .gotaquestion-wrapper {
      height: 100%;
      padding: 100px 0;
      background-color: #edf8f8;
    }

    @media only screen and (min-width: 768px) {
      .services-wrapper .gotaquestion-wrapper {
        height: 50vh;
        padding: 0;
      }
    }

    .services-wrapper .gotaquestion-wrapper .content {
      width: 100%;
      max-width: 1100px;
      padding: 0 40px;
      margin: 0 auto;
      position: relative;
      height: 100%;
    }

    @media only screen and (min-width: 768px) {
      .services-wrapper .gotaquestion-wrapper .content {
        width: 85%;
        padding: 0;
      }
    }

    .services-wrapper .gotaquestion-wrapper .content .banner-wrapper {
      width: 100%;
    }

    @media only screen and (min-width: 768px) {
      .services-wrapper .gotaquestion-wrapper .content .banner-wrapper {
        position: absolute;
        top: 50%;
        left: 30%;
        -webkit-transform: translate(-30%, -50%);
        transform: translate(-30%, -50%);
      }
    }

    .services-wrapper .gotaquestion-wrapper .content .banner-wrapper .section-text-wrapper {
      width: 85%;
    }

    .services-wrapper .gotaquestion-wrapper .content .banner-wrapper .section-text-wrapper .button-wrapper {
      -webkit-box-pack: left;
      -ms-flex-pack: left;
      justify-content: left;
    }

    .career-wrapper .banner {
      height: 50vh;
      background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(165, 224, 220, 0.8)), to(rgba(0, 166, 156, 0.8))), url("../images/bg/career.jpg");
      background-image: linear-gradient(to bottom, rgba(165, 224, 220, 0.8), rgba(0, 166, 156, 0.8)), url("../images/bg/career.jpg");
      background-size: cover;
      background-position: center center;
    }

    @media only screen and (max-width: 768px) {
      .career-wrapper .banner .title-wrapper {
        position: relative;
        top: 65%;
        left: 40%;
        -webkit-transform: translate(-40%, -65%);
        transform: translate(-40%, -65%);
        width: 100%;
        padding: 0 40px;
      }
    }

    @media only screen and (min-width: 768px) {
      .career-wrapper .banner .title-wrapper {
        position: unset;
        top: unset;
        left: unset;
        max-width: 900px;
        height: 100%;
        margin: auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 0;
      }
    }

    .career-wrapper .banner .title-wrapper h2 {
      color: #ffffff;
    }

    .career-wrapper .banner .title-wrapper .wrapper {
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
    }

    .career-wrapper .banner .title-wrapper .wrapper .section-text-wrapper p {
      color: #ffffff;
    }

    .career-wrapper .content-wrapper {
      background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(165, 224, 220, 0.2)), to(rgba(0, 166, 156, 0.2)));
      background-image: linear-gradient(to bottom, rgba(165, 224, 220, 0.2), rgba(0, 166, 156, 0.2));
    }

    .career-wrapper .content-wrapper .position-wrapper {
      padding: 100px 40px 50px;
      width: 100%;
      max-width: 900px;
      margin: 0 auto;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
    }

    @media only screen and (min-width: 768px) {
      .career-wrapper .content-wrapper .position-wrapper {
        padding: 100px 0 50px;
      }
    }

    .career-wrapper .content-wrapper .position-wrapper .sub-title {
      font-family: robotoR;
      padding-bottom: 10px;
    }

    .career-wrapper .content-wrapper .position-wrapper .position-item {
      width: 100%;
      margin-bottom: 10px;
      cursor: pointer;
    }

    .career-wrapper .content-wrapper .position-wrapper .position-item .title {
      padding: 15px 50px 10px 25px;
      background-color: white;
      border-radius: 10px;
      border-left: 1px solid #595b5b;
      border-top: 1px solid #595b5b;
      border-right: 1px solid #595b5b;
      border-bottom: 1px solid #595b5b;
      margin-bottom: 0;
      position: relative;
      font-size: 18px;
      line-height: 26px;
    }

    .career-wrapper .content-wrapper .position-wrapper .position-item .title:after {
      content: '+';
      display: block;
      font-size: 25px;
      position: absolute;
      right: 10px;
      top: 56%;
      -webkit-transform: translate(-10px, -50%);
      transform: translate(-10px, -50%);
    }

    @media only screen and (min-width: 768px) {
      .career-wrapper .content-wrapper .position-wrapper .position-item .title:after {
        top: 65%;
        -webkit-transform: translate(-10px, -65%);
        transform: translate(-10px, -65%);
      }
    }

    .career-wrapper .content-wrapper .position-wrapper .position-item .title.is-active {
      border-left: 1px solid #595b5b;
      border-top: 1px solid #595b5b;
      border-right: 1px solid #595b5b;
      border-bottom: 0;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }

    .career-wrapper .content-wrapper .position-wrapper .position-item .title.is-active:after {
      content: '-';
    }

    .career-wrapper .content-wrapper .position-wrapper .position-item .description {
      padding: 0 50px;
      background-color: white;
    }

    .career-wrapper .content-wrapper .position-wrapper .position-item .description.is-active {
      padding: 0 50px 15px;
      background-color: white;
      border-radius: 10px;
      border-left: 1px solid #595b5b;
      border-top: 0;
      border-right: 1px solid #595b5b;
      border-bottom: 1px solid #595b5b;
      border-top-left-radius: 0;
      border-top-right-radius: 0;
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;
    }

    .career-wrapper .content-wrapper .position-wrapper .position-item .description .main {
      padding-bottom: 50px;
    }

    .career-wrapper .content-wrapper .position-wrapper .position-item .description h4 {
      font-size: 16px;
      margin-bottom: 10px;
    }

    .career-wrapper .content-wrapper .position-wrapper .position-item .description p {
      padding: 10px 0;
      font-size: 15px;
      line-height: 20px;
    }

    .career-wrapper .content-wrapper .position-wrapper .position-item .description ul {
      padding-bottom: 50px;
    }

    .career-wrapper .content-wrapper .position-wrapper .position-item .description ul li {
      list-style: disc;
      margin: 0 0 0px 50px;
      font-size: 15px;
      font-family: robotoR;
      line-height: 20px;
    }

    .career-wrapper .content-wrapper .position-wrapper .position-item .description .apply {
      font-size: 16px;
      font-family: spartanM;
      font-weight: bold;
      padding: 50px 0 50px;
    }

    .career-wrapper .content-wrapper .position-wrapper .position-item .description .apply span {
      border-bottom: 2px solid #383044;
      display: inline-block;
      padding-bottom: 5px;
      cursor: pointer;
      color: #383044;
    }

    .career-wrapper .content-wrapper .position-wrapper .position-item .description .apply span:hover {
      color: #ffd002;
      border-bottom: 2px solid #ffd002;
    }

    .career-wrapper .content-wrapper .title-wrapper {
      padding: 100px 40px 50px;
      width: 100%;
      max-width: 900px;
      margin: 0 auto;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
    }

    @media only screen and (min-width: 768px) {
      .career-wrapper .content-wrapper .title-wrapper {
        padding: 100px 0 50px;
      }
    }

    .career-wrapper .content-wrapper .form-wrapper {
      padding: 0 40px 100px;
      width: 100%;
      max-width: 900px;
      margin: 0 auto;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      /* Style the arrow inside the select element: */
      /* style the items (options), including the selected item: */
      /* Style items (options): */
      /* Hide the items when the select box is closed: */
    }

    @media only screen and (min-width: 768px) {
      .career-wrapper .content-wrapper .form-wrapper {
        padding: 0 0 100px;
      }
    }

    .career-wrapper .content-wrapper .form-wrapper .name, .career-wrapper .content-wrapper .form-wrapper .phone {
      width: 100%;
      padding-bottom: 25px;
    }

    @media only screen and (min-width: 768px) {
      .career-wrapper .content-wrapper .form-wrapper .name, .career-wrapper .content-wrapper .form-wrapper .phone {
        width: 49.5%;
      }
    }

    .career-wrapper .content-wrapper .form-wrapper .positions, .career-wrapper .content-wrapper .form-wrapper .email, .career-wrapper .content-wrapper .form-wrapper .message {
      width: 100%;
      padding-bottom: 25px;
    }

    .career-wrapper .content-wrapper .form-wrapper .positions {
      position: relative;
    }

    .career-wrapper .content-wrapper .form-wrapper label {
      font-family: spartanR;
      font-size: 14px;
    }

    .career-wrapper .content-wrapper .form-wrapper label.error, .career-wrapper .content-wrapper .form-wrapper label#resume, .career-wrapper .content-wrapper .form-wrapper label#position-error {
      font-family: robotoR;
      font-weight: bold;
      font-size: 12px;
      color: red;
      margin-top: 5px;
    }

    .career-wrapper .content-wrapper .form-wrapper label#resume {
      position: absolute;
      top: 50px;
      left: 0px;
    }

    .career-wrapper .content-wrapper .form-wrapper label#position-error {
      position: absolute;
      top: 72px;
      left: 0px;
    }

    .career-wrapper .content-wrapper .form-wrapper select, .career-wrapper .content-wrapper .form-wrapper input, .career-wrapper .content-wrapper .form-wrapper textarea, .career-wrapper .content-wrapper .form-wrapper .resume {
      width: 100%;
      height: 50px;
      margin: 5px 0;
      border-radius: 10px;
      border: 1px solid #595b5b;
      padding: 0 20px 0 10px;
      outline: 0;
      color: #6b696f;
      font-size: 20px;
      padding-left: 10px;
      font-family: robotoL;
    }

    .career-wrapper .content-wrapper .form-wrapper textarea {
      padding: 20px;
      height: 200px;
    }

    .career-wrapper .content-wrapper .form-wrapper .resume {
      margin: 10px 0 50px;
      background-color: #ffffff;
      position: relative;
      cursor: pointer;
    }

    .career-wrapper .content-wrapper .form-wrapper .resume .title {
      position: absolute;
      top: -20px;
      left: 0px;
    }

    .career-wrapper .content-wrapper .form-wrapper .resume p {
      font-size: 16px;
      font-family: spartanM;
      position: absolute;
      top: 13px;
      left: 30px;
      color: #383044;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 80%;
    }

    .career-wrapper .content-wrapper .form-wrapper .resume:hover {
      color: #f6cf47;
    }

    .career-wrapper .content-wrapper .form-wrapper .resume .resume-error {
      position: absolute;
      bottom: -25px;
      left: 0px;
      color: red;
      font-size: 12px;
      font-family: robotoR;
      font-weight: bold;
    }

    .career-wrapper .content-wrapper .form-wrapper .button-wrapper {
      padding-top: 0;
    }

    .career-wrapper .content-wrapper .form-wrapper .custom-select {
      position: relative;
      margin-top: 5px;
      border: 1px solid #595b5b;
      padding-left: 2px;
      border-radius: 10px;
      background-color: #ffffff;
    }

    .career-wrapper .content-wrapper .form-wrapper .custom-select select {
      display: none;
      /*hide original SELECT element: */
    }

    .career-wrapper .content-wrapper .form-wrapper .select-selected:after {
      position: absolute;
      content: "";
      background-image: url("../images/icon/dropdown.png");
      background-repeat: no-repeat;
      background-size: 19px 11px;
      top: 20px;
      right: 15px;
      width: 19px;
      height: 11px;
    }

    .career-wrapper .content-wrapper .form-wrapper .select-items div, .career-wrapper .content-wrapper .form-wrapper .select-selected {
      color: #000000;
      font-family: spartanM;
      line-height: 25px;
      padding: 15px 15px 10px 10px;
      cursor: pointer;
    }

    .career-wrapper .content-wrapper .form-wrapper .select-items {
      position: absolute;
      background-color: #ffffff;
      border-top: 0;
      border-left: 1px solid #595b5b;
      border-right: 1px solid #595b5b;
      border-bottom: 1px solid #595b5b;
      border-bottom-right-radius: 10px;
      border-bottom-left-radius: 10px;
      width: calc(100% + 2px);
      top: 88%;
      left: -1px;
      right: 0;
      z-index: 99;
      overflow: hidden;
    }

    .career-wrapper .content-wrapper .form-wrapper .select-hide {
      display: none;
    }

    .career-wrapper .content-wrapper .form-wrapper .select-items div:hover, .career-wrapper .content-wrapper .form-wrapper .same-as-selected {
      background-color: #fcf2cc;
    }

    .career-wrapper .content-wrapper .form-wrapper #fileLoader {
      display: none;
    }

    .about-wrapper .banner {
      width: 100%;
      background-color: #edf8f8;
      position: relative;
    }

    @media only screen and (min-width: 768px) {
      .about-wrapper .banner {
        height: 80vh;
      }
    }

    .about-wrapper .banner .banner-wrapper {
      width: 90%;
      height: 100%;
      max-width: 1100px;
      margin: 0 auto;
      position: relative;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
    }

    .about-wrapper .banner .banner-wrapper .text-wrapper {
      text-align: center;
      width: 100%;
      padding: 15vh 0 50px 0;
    }

    @media only screen and (min-width: 768px) {
      .about-wrapper .banner .banner-wrapper .text-wrapper {
        padding-top: 0;
        position: absolute;
        top: 40%;
        left: 0;
        -webkit-transform: translate(0, -40%);
        transform: translate(0, -40%);
      }
    }

    .about-wrapper .banner .banner-wrapper .text-wrapper .title {
      width: 80%;
      margin: 0 auto;
    }

    @media only screen and (min-width: 768px) {
      .about-wrapper .banner .banner-wrapper .text-wrapper .title {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        margin-bottom: 50px;
        width: 100%;
      }
    }

    .about-wrapper .banner .banner-wrapper .text-wrapper .title h2 {
      text-transform: uppercase;
      margin-bottom: 10px;
      color: #383044;
      text-align: center;
      font-size: 30px;
      line-height: 30px;
    }

    @media only screen and (min-width: 768px) {
      .about-wrapper .banner .banner-wrapper .text-wrapper .title h2 {
        text-align: right;
        font-size: 60px;
        line-height: 70px;
      }
    }

    .about-wrapper .banner .banner-wrapper .text-wrapper .title h2 .or {
      font-size: 20px;
      line-height: 40px;
      display: block;
    }

    @media only screen and (min-width: 768px) {
      .about-wrapper .banner .banner-wrapper .text-wrapper .title h2 .or {
        font-size: 36px;
        text-align: center;
        display: inline;
      }
    }

    @media only screen and (min-width: 768px) {
      .about-wrapper .banner .banner-wrapper .text-wrapper .title h2 .second {
        display: block;
      }
    }

    .about-wrapper .banner .banner-wrapper .text-wrapper .desc {
      margin: 30px auto 0 0;
      text-align: center;
    }

    @media only screen and (min-width: 768px) {
      .about-wrapper .banner .banner-wrapper .text-wrapper .desc {
        text-align: left;
        margin: 0 auto 0 0;
      }
    }

    .about-wrapper .banner .banner-wrapper .text-wrapper .desc p {
      font-size: 18px;
      line-height: 26px;
      font-family: robotoR;
      color: #6b6970;
    }

    .about-wrapper .banner .banner-wrapper .text-wrapper .desc p.desktop {
      display: none;
    }

    @media only screen and (min-width: 768px) {
      .about-wrapper .banner .banner-wrapper .text-wrapper .desc p.desktop {
        display: block;
        width: 45%;
      }
    }

    .about-wrapper .banner .banner-wrapper .text-wrapper .desc p.mobile {
      display: block;
      width: 80%;
      margin: 0 auto;
    }

    @media only screen and (min-width: 768px) {
      .about-wrapper .banner .banner-wrapper .text-wrapper .desc p.mobile {
        display: none;
      }
    }

    .about-wrapper .banner .banner-wrapper .hands {
      width: 100%;
      margin: 0 auto;
      margin-top: auto;
    }

    @media only screen and (min-width: 768px) {
      .about-wrapper .banner .banner-wrapper .hands {
        width: 100%;
        margin: 0 auto;
        margin-top: auto;
        position: absolute;
        bottom: 0;
      }
    }

    .about-wrapper .banner .banner-wrapper .hands img {
      width: 100%;
      -webkit-transition: 0.5s;
      transition: 0.5s;
    }

    .about-wrapper .banner .banner-wrapper .hands img:hover {
      cursor: pointer;
      margin-bottom: -10px;
      margin-top: 10px;
      -webkit-transition: 0.5s;
      transition: 0.5s;
    }

    @media only screen and (min-width: 768px) {
      .about-wrapper .banner .banner-wrapper .hands img {
        position: absolute;
        bottom: -1px;
        right: -20%;
        width: calc(80% - 100px);
      }
    }

    .about-wrapper .banner .source {
      font-size: 10px;
      font-family: robotoR;
      color: #d8d8d8;
      position: absolute;
      bottom: 10px;
      right: 100px;
      display: none;
    }

    @media only screen and (min-width: 768px) {
      .about-wrapper .banner .source {
        position: absolute;
        bottom: 10px;
        right: 50px;
        display: block;
      }
    }

    .about-wrapper .statement {
      background-color: #12aca3;
      padding: 50px 0;
      position: relative;
    }

    @media only screen and (min-width: 768px) {
      .about-wrapper .statement {
        padding: 120px 0 50px;
      }
    }

    .about-wrapper .statement .statistics-wrapper {
      width: 100%;
      padding: 0 40px;
      height: 100%;
      max-width: 1100px;
      margin: 0 auto;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      margin-top: -100px;
    }

    @media only screen and (min-width: 768px) {
      .about-wrapper .statement .statistics-wrapper {
        position: absolute;
        margin: 0 auto;
        top: -33%;
        left: 50%;
        -webkit-transform: translate(-50%, -33%);
        transform: translate(-50%, -33%);
      }
    }

    .about-wrapper .statement .statistics-wrapper .statistics-item {
      width: calc(50% - 3px);
      margin-bottom: 6px;
      background-color: white;
      padding: 40px 20px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      border-radius: 10px;
      height: 220px;
      -webkit-box-shadow: 1px 1px 10px 1px #d8d8d8;
      box-shadow: 1px 1px 10px 1px #d8d8d8;
      -webkit-transition: 0.5s;
      transition: 0.5s;
    }

    .about-wrapper .statement .statistics-wrapper .statistics-item:hover {
      cursor: pointer;
      margin-bottom: 10px;
      margin-top: -10px;
      -webkit-transition: 0.5s;
      transition: 0.5s;
    }

    @media only screen and (min-width: 768px) {
      .about-wrapper .statement .statistics-wrapper .statistics-item {
        width: 24%;
        margin-bottom: 0;
      }
    }

    .about-wrapper .statement .statistics-wrapper .statistics-item .number {
      color: #ffd002;
      font-size: 30px;
      font-family: spartanB;
    }

    @media only screen and (min-width: 768px) {
      .about-wrapper .statement .statistics-wrapper .statistics-item .number {
        font-size: 55px;
      }
    }

    .about-wrapper .statement .statistics-wrapper .statistics-item .number span {
      font-size: 24px;
    }

    @media only screen and (min-width: 768px) {
      .about-wrapper .statement .statistics-wrapper .statistics-item .number span {
        font-size: 30px;
      }
    }

    .about-wrapper .statement .statistics-wrapper .statistics-item p {
      width: 100%;
      margin: 0 auto;
      font-size: 14px !important;
      line-height: 20px;
      color: #8f9191;
      text-align: center;
      font-family: robotoR;
      font-weight: bold;
    }

    @media only screen and (min-width: 768px) {
      .about-wrapper .statement .statistics-wrapper .statistics-item p {
        width: 70%;
      }
    }

    .about-wrapper .statement .desc {
      width: 90%;
      margin: 10px auto;
      padding-top: 30px;
      -webkit-transition: 0.5s;
      transition: 0.5s;
    }

    .about-wrapper .statement .desc:hover {
      cursor: pointer;
      margin-bottom: 20px;
      margin-top: 0px;
      -webkit-transition: 0.5s;
      transition: 0.5s;
    }

    @media only screen and (min-width: 768px) {
      .about-wrapper .statement .desc {
        width: 60%;
        padding-top: 0;
      }
    }

    .about-wrapper .statement .desc h3 {
      font-size: 20px !important;
      line-height: 26px;
      text-align: center;
      color: #ffffff;
      letter-spacing: 0px;
    }

    @media only screen and (min-width: 768px) {
      .about-wrapper .statement .desc h3 {
        font-size: 26px;
        line-height: 30px;
      }
    }

    .about-wrapper .allstar {
      background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(165, 224, 220, 0.2)), to(rgba(0, 166, 156, 0.2)));
      background-image: linear-gradient(to bottom, rgba(165, 224, 220, 0.2), rgba(0, 166, 156, 0.2));
      text-align: center;
    }

    .about-wrapper .allstar .allstar-title-wrapper {
      padding: 100px 40px 50px;
      width: 100%;
      max-width: 1100px;
      margin: 0 auto;
    }

    @media only screen and (min-width: 768px) {
      .about-wrapper .allstar .allstar-title-wrapper {
        width: 75%;
      }
    }

    .about-wrapper .allstar .allstar-title-wrapper .section-text-wrapper {
      text-align: left;
      width: 80%;
      margin: 0 auto 0 0;
    }

    .about-wrapper .allstar .dream-team-wrapper {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      margin: 0 auto;
      padding-bottom: 50px;
    }

    @media only screen and (min-width: 768px) {
      .about-wrapper .allstar .dream-team-wrapper {
        width: 80%;
        padding-bottom: 100px;
      }
    }

    .about-wrapper .allstar .dream-team-wrapper .dream-team-item {
      padding: 50px 0 50px 0;
      cursor: pointer;
      border-radius: 15px;
      background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(176, 169, 189, 0.8)), to(rgba(80, 64, 109, 0.9)));
      background-image: linear-gradient(to bottom, rgba(176, 169, 189, 0.8), rgba(80, 64, 109, 0.9));
      -webkit-transition: 0.5s;
      transition: 0.5s;
      width: calc(100% - 60px) !important;
      margin: 0 auto;
    }

    @media only screen and (min-width: 768px) {
      .about-wrapper .allstar .dream-team-wrapper .dream-team-item {
        padding: 50px 0 0 0;
        cursor: pointer;
        border-radius: 15px;
        background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(176, 169, 189, 0.8)), to(rgba(80, 64, 109, 0.9)));
        background-image: linear-gradient(to bottom, rgba(176, 169, 189, 0.8), rgba(80, 64, 109, 0.9));
        -webkit-transition: 0.5s;
        transition: 0.5s;
        width: calc(100% - 60px) !important;
        margin: 0 auto;
      }
    }

    .about-wrapper .allstar .dream-team-wrapper .dream-team-item:hover {
      cursor: pointer;
      margin-bottom: 10px;
      margin-top: -10px;
      -webkit-transition: 0.5s;
      transition: 0.5s;
    }

    @media only screen and (min-width: 768px) {
      .about-wrapper .allstar .dream-team-wrapper .dream-team-item {
        background-image: none;
        width: 18% !important;
      }
    }

    @media only screen and (min-width: 768px) {
      .about-wrapper .allstar .dream-team-wrapper .dream-team-item:hover {
        background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(176, 169, 189, 0.8)), to(rgba(80, 64, 109, 0.9)));
        background-image: linear-gradient(to bottom, rgba(176, 169, 189, 0.8), rgba(80, 64, 109, 0.9));
      }
      .about-wrapper .allstar .dream-team-wrapper .dream-team-item:hover .title h3 {
        color: #ffd002;
        line-height: 25px;
      }
      .about-wrapper .allstar .dream-team-wrapper .dream-team-item:hover .title h3:after {
        border-bottom: 2px solid #ffd002;
      }
      .about-wrapper .allstar .dream-team-wrapper .dream-team-item:hover .desc .static {
        -webkit-transition: visibility 0s, opacity 0.5s linear;
        transition: visibility 0s, opacity 0.5s linear;
        visibility: hidden;
        opacity: 0;
        display: none;
      }
      .about-wrapper .allstar .dream-team-wrapper .dream-team-item:hover .desc .static img {
        height: 0;
      }
      .about-wrapper .allstar .dream-team-wrapper .dream-team-item:hover .desc .alternate {
        color: #ffffff;
        -webkit-transition: visibility 0s, opacity 0.5s linear;
        transition: visibility 0s, opacity 0.5s linear;
        visibility: visible;
        opacity: 1;
      }
    }

    .about-wrapper .allstar .dream-team-wrapper .dream-team-item img {
      width: 50%;
      padding-bottom: 20px;
      margin: 0 auto;
    }

    @media only screen and (min-width: 768px) {
      .about-wrapper .allstar .dream-team-wrapper .dream-team-item img {
        width: 80%;
        padding-bottom: 50px;
      }
    }

    .about-wrapper .allstar .dream-team-wrapper .dream-team-item .title {
      width: 100%;
    }

    .about-wrapper .allstar .dream-team-wrapper .dream-team-item .title h3 {
      text-align: center;
      color: #ffd002;
      font-family: spartanR !important;
      line-height: 25px;
      letter-spacing: 0;
    }

    @media only screen and (min-width: 768px) {
      .about-wrapper .allstar .dream-team-wrapper .dream-team-item .title h3 {
        color: #383404;
      }
    }

    .about-wrapper .allstar .dream-team-wrapper .dream-team-item .title h3:after {
      content: '';
      display: block;
      height: 10px;
      width: 50%;
      margin: 0 auto;
      border-bottom: 2px solid #ffd002;
    }

    @media only screen and (min-width: 768px) {
      .about-wrapper .allstar .dream-team-wrapper .dream-team-item .title h3:after {
        border-bottom: 2px solid #000000;
      }
    }

    .about-wrapper .allstar .dream-team-wrapper .dream-team-item .desc {
      width: 80%;
      margin: 0 auto;
    }

    .about-wrapper .allstar .dream-team-wrapper .dream-team-item .desc .static {
      width: 50px;
      margin: 0 auto;
      margin-top: 10px;
      visibility: hidden;
      opacity: 0;
      display: none;
    }

    @media only screen and (min-width: 768px) {
      .about-wrapper .allstar .dream-team-wrapper .dream-team-item .desc .static {
        display: block;
        visibility: visible;
        opacity: 1;
      }
    }

    .about-wrapper .allstar .dream-team-wrapper .dream-team-item .desc .static img {
      height: 50px;
      padding-bottom: 0;
    }

    .about-wrapper .allstar .dream-team-wrapper .dream-team-item .desc .alternate {
      color: #ffffff;
      visibility: visible;
      opacity: 1;
      line-height: 22px;
      height: 120px;
    }

    @media only screen and (min-width: 768px) {
      .about-wrapper .allstar .dream-team-wrapper .dream-team-item .desc .alternate {
        visibility: hidden;
        opacity: 0;
        height: unset;
      }
    }

    .about-wrapper .allstar .dream-team-wrapper .slick-slide {
      margin: 0 10px;
    }

    .about-wrapper .allstar .dream-team-wrapper .slick-dots {
      bottom: 70px;
    }

    .about-wrapper .allstar .dream-team-wrapper .slick-dots li button:before {
      color: #ffffff;
      opacity: 1;
      font-size: 7px !important;
    }

    .about-wrapper .allstar .dream-team-wrapper .slick-dots li.slick-active button:before {
      color: #ffd002;
    }

    .about-wrapper .allstar .belief-title-wrapper {
      padding: 100px 40px 50px;
      width: 100%;
      max-width: 1100px;
      margin: 0 auto;
    }

    @media only screen and (min-width: 768px) {
      .about-wrapper .allstar .belief-title-wrapper {
        padding: 0 0 50px;
      }
    }

    .about-wrapper .allstar .belief-title-wrapper .title-wrapper {
      padding-bottom: 50px;
    }

    .about-wrapper .allstar .belief-title-wrapper .title-wrapper .title:after {
      content: '';
      display: none;
    }

    .about-wrapper .allstar .belief-title-wrapper .section-text-wrapper .desc {
      font-size: 20px;
      line-height: 30px;
      text-align: left;
      width: 90%;
      margin: 0 auto;
      padding-left: 20px;
      text-align: left;
      -webkit-transition: 0.5s;
      transition: 0.5s;
      position: relative;
    }

    @media only screen and (min-width: 768px) {
      .about-wrapper .allstar .belief-title-wrapper .section-text-wrapper .desc {
        text-align: left;
        padding-left: 0;
      }
    }

    .about-wrapper .allstar .belief-title-wrapper .section-text-wrapper .desc:hover {
      cursor: pointer;
      margin-bottom: 10px;
      margin-top: -10px;
      -webkit-transition: 0.5s;
      transition: 0.5s;
    }

    .about-wrapper .allstar .belief-title-wrapper .section-text-wrapper .desc:before {
      content: '';
      background-image: url("../images/icon/testimony_open_yellow.png");
      background-repeat: no-repeat;
      height: 50px;
      width: 50px;
      background-size: 50px;
      display: block;
      position: absolute;
      left: -35px;
      top: -30px;
    }

    @media only screen and (min-width: 768px) {
      .about-wrapper .allstar .belief-title-wrapper .section-text-wrapper .desc:before {
        left: -60px;
        top: -20px;
      }
    }

    .about-wrapper .allstar .belief-title-wrapper .section-text-wrapper .desc:after {
      content: '';
      background-image: url("../images/icon/testimony_close_yellow.png");
      background-repeat: no-repeat;
      height: 50px;
      width: 50px;
      background-size: 50px;
      display: block;
      position: absolute;
      right: -35px;
      bottom: -30px;
    }

    @media only screen and (min-width: 768px) {
      .about-wrapper .allstar .belief-title-wrapper .section-text-wrapper .desc:after {
        right: -20px;
        bottom: -20px;
      }
    }

    @media only screen and (min-width: 768px) {
      .about-wrapper .allstar .belief-title-wrapper .section-text-wrapper .desc {
        width: 60%;
        margin: 0 auto 0 0;
      }
    }

    .about-wrapper .allstar .belief-title-wrapper .section-text-wrapper .desc span {
      color: #00a69c;
    }

    /*.about-wrapper .allstar .fourI {
      background-image: url("../images/bg/belief.jpg");
      background-size: cover;
      background-repeat: no-repeat;
    }*/

    @media only screen and (min-width: 768px) {
      .about-wrapper .allstar .fourI {
        background-size: 110% 110%;
        background-position: bottom center;
        background-size: cover;
      }
    }

    .about-wrapper .allstar .fourI .fourI-overlay {
      background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(165, 224, 220, 0.5)), to(rgba(0, 166, 156, 0.5)));
      background-image: linear-gradient(to bottom, rgba(165, 224, 220, 0.5), rgba(0, 166, 156, 0.5));
      padding: 50px 0;
      height: 100%;
      width: 100%;
    }

    .about-wrapper .allstar .fourI .fourI-wrapper {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      margin: 0 auto;
      width: 90%;
    }

    @media only screen and (min-width: 768px) {
      .about-wrapper .allstar .fourI .fourI-wrapper {
        width: 70%;
      }
    }

    .about-wrapper .allstar .fourI .fourI-wrapper .fourI-item {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      width: 50%;
      padding-bottom: 25px;
    }

    .about-wrapper .allstar .fourI .fourI-wrapper .fourI-item:nth-child(n+3) {
      margin-top: 50px;
    }

    @media only screen and (min-width: 768px) {
      .about-wrapper .allstar .fourI .fourI-wrapper .fourI-item {
        width: 50%;
      }
      .about-wrapper .allstar .fourI .fourI-wrapper .fourI-item:nth-child(-n+2) {
        padding-bottom: 75px;
      }
      .about-wrapper .allstar .fourI .fourI-wrapper .fourI-item:nth-child(n+3) {
        margin-top: 0;
      }
    }

    .about-wrapper .allstar .fourI .fourI-wrapper .fourI-item .icon {
      width: 100%;
      margin: auto;
    }

    @media only screen and (min-width: 768px) {
      .about-wrapper .allstar .fourI .fourI-wrapper .fourI-item .icon {
        width: 40%;
        text-align: right;
        padding-right: 50px;
      }
    }

    .about-wrapper .allstar .fourI .fourI-wrapper .fourI-item .icon img {
      height: 120px;
      width: auto;
      margin: 20px 0;
    }

    @media only screen and (min-width: 768px) {
      .about-wrapper .allstar .fourI .fourI-wrapper .fourI-item .icon img {
        width: 160px;
        height: auto;
        margin: 0 0 0 auto;
      }
    }

    .about-wrapper .allstar .fourI .fourI-wrapper .fourI-item .content {
      width: 70%;
      margin: auto;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
    }

    .about-wrapper .allstar .fourI .fourI-wrapper .fourI-item .content.desktop {
      display: none;
      padding-left: 20px;
    }

    .about-wrapper .allstar .fourI .fourI-wrapper .fourI-item .content.mobile {
      width: 100%;
      display: block;
    }

    .about-wrapper .allstar .fourI .fourI-wrapper .fourI-item .content.mobile.desc {
      height: 100px;
      width: 80%;
    }

    .about-wrapper .allstar .fourI .fourI-wrapper .fourI-item .content.mobile.desc p {
      text-align: center;
    }

    @media only screen and (min-width: 768px) {
      .about-wrapper .allstar .fourI .fourI-wrapper .fourI-item .content {
        width: 60%;
        padding-left: 0;
      }
      .about-wrapper .allstar .fourI .fourI-wrapper .fourI-item .content.desktop {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
      }
      .about-wrapper .allstar .fourI .fourI-wrapper .fourI-item .content.mobile {
        display: none;
      }
    }

    .about-wrapper .allstar .fourI .fourI-wrapper .fourI-item .content .title {
      color: #ffd002;
      text-align: left;
      height: 70px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
      position: relative;
      width: -webkit-min-content;
      width: -moz-min-content;
      width: min-content;
      margin: 0 auto;
    }

    @media only screen and (min-width: 768px) {
      .about-wrapper .allstar .fourI .fourI-wrapper .fourI-item .content .title {
        height: 60px;
        margin-bottom: 10px;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
      }
    }

    .about-wrapper .allstar .fourI .fourI-wrapper .fourI-item .content .title h3 {
      letter-spacing: 1px;
      text-transform: uppercase;
      font-size: 14px;
      line-height: 20px;
      margin: auto;
      bottom: 0;
      color: #ffd002;
      text-align: center;
    }

    @media only screen and (min-width: 768px) {
      .about-wrapper .allstar .fourI .fourI-wrapper .fourI-item .content .title h3 {
        font-size: 20px;
        line-height: 22px;
        text-align: left;
        margin: unset;
        margin-left: 20px;
      }
    }

    .about-wrapper .allstar .fourI .fourI-wrapper .fourI-item .content .title h3:before {
      content: 'i';
      text-transform: lowercase;
      display: none;
      font-size: 50px;
      text-shadow: 1px 1px 4px #6b6970, -1px -1px 4px #6b6970;
      position: absolute;
      bottom: 14px;
      left: 0px;
    }

    @media only screen and (min-width: 768px) {
      .about-wrapper .allstar .fourI .fourI-wrapper .fourI-item .content .title h3:before {
        display: inline;
        bottom: 9px;
      }
    }

    .about-wrapper .allstar .fourI .fourI-wrapper .fourI-item .content .title h3 span {
      text-shadow: 1px 1px 4px #6b6970, -1px -1px 4px #6b6970;
    }

    .about-wrapper .allstar .fourI .fourI-wrapper .fourI-item .content .title h3 span.mobile {
      font-size: 36px;
      text-transform: lowercase;
    }

    .about-wrapper .allstar .fourI .fourI-wrapper .fourI-item .content .desc {
      width: 100%;
      margin: 0 auto 0 0;
    }

    .about-wrapper .allstar .fourI .fourI-wrapper .fourI-item .content .desc p {
      font-size: 14px;
      font-family: robotoR;
      color: #ffffff;
      text-align: left;
    }

    .about-wrapper .allstar .ready-wrapper {
      padding: 100px 40px;
      width: 100%;
      max-width: 1100px;
      margin: 0 auto;
      text-align: left;
    }

    .about-wrapper .allstar .ready-wrapper .section-text-wrapper {
      padding-top: 20px;
    }

    .about-wrapper .allstar .ready-wrapper .section-text-wrapper a {
      text-decoration: underline;
      color: #6b6970;
    }

    .about-wrapper .allstar .ready-wrapper .section-text-wrapper a:hover {
      color: #ffd002;
    }

    .about-wrapper .allstar .ready-wrapper .section-text-wrapper .button-wrapper {
      -webkit-box-pack: left;
      -ms-flex-pack: left;
      justify-content: left;
    }

    .about-wrapper .allstar .ready-wrapper .section-text-wrapper .button-wrapper a {
      text-decoration: none;
    }

    @media only screen and (min-width: 768px) {
      .fancy-portfolio {
        padding-left: 50px;
      }
    }

    .fancy-portfolio .portfolio-single-container {
      border-radius: 25px;
    }

    .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper {
      margin: 0 auto;
    }

    .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .header-wrapper {
      padding: 50px 25px;
      background-color: #ffffff;
    }

    @media only screen and (min-width: 768px) {
      .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .header-wrapper {
        padding: 50px;
      }
    }

    .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .header-wrapper h2 {
      text-transform: uppercase;
      margin-bottom: 15px;
    }

    .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .header-wrapper h3 {
      text-transform: capitalize;
      margin-bottom: 15px;
      line-height: 26px;
    }

    @media only screen and (min-width: 768px) {
      .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .header-wrapper h3 {
        margin-bottom: 15px;
      }
    }

    .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .header-wrapper h3 span {
      font-family: spartanR;
    }

    .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .header-wrapper h3:after {
      content: '';
      height: 20px;
      width: 100px;
      border-bottom: 2px solid #00a69c;
      display: block;
    }

    @media only screen and (min-width: 768px) {
      .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .header-wrapper h3:after {
        height: 10px;
      }
    }

    .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .header-wrapper .tag {
      font-size: 16px !important;
      line-height: 22px;
      font-family: robotoR;
    }

    @media only screen and (min-width: 768px) {
      .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .header-wrapper .tag {
        font-size: 18px !important;
        line-height: 28px;
      }
    }

    .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .main-banner {
      position: relative;
      overflow: hidden;
      padding-bottom: 50px;
    }

    .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .main-banner .overlay {
      position: absolute;
      /* Sit on top of the page content */
      width: 100%;
      /* Full width (cover the whole page) */
      height: 50%;
      /* Full height (cover the whole page) */
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: -webkit-gradient(linear, left top, left bottom, color-stop(60%, rgba(176, 169, 189, 0)), to(rgba(80, 64, 109, 0.7)));
      background-image: linear-gradient(to bottom, rgba(176, 169, 189, 0) 60%, rgba(80, 64, 109, 0.7));
      z-index: 0;
      /* Specify a stack order in case you're using a different order for other elements */
      cursor: pointer;
      /* Add a pointer on hover */
      -webkit-transition: 1s;
      transition: 1s;
      opacity: 0;
    }

    @media only screen and (min-width: 768px) {
      .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .main-banner .overlay {
        background-image: -webkit-gradient(linear, left top, right top, from(rgba(176, 169, 189, 0.3)), to(rgba(80, 64, 109, 0.7)));
        background-image: linear-gradient(to right, rgba(176, 169, 189, 0.3), rgba(80, 64, 109, 0.7));
        height: 100%;
        /* Full height (cover the whole page) */
      }
    }

    .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .main-banner .overlay.expand {
      -webkit-transition: 1s;
      transition: 1s;
      opacity: 1;
    }

    @media only screen and (min-width: 768px) {
      .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .main-banner {
        padding-bottom: 0;
      }
    }

    .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .main-banner img {
      width: 100%;
      height: 100%;
    }

    .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .main-banner img.desktop {
      display: none;
    }

    .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .main-banner img.mobile {
      display: block;
    }

    @media only screen and (min-width: 768px) {
      .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .main-banner img.desktop {
        display: inline-block;
      }
      .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .main-banner img.mobile {
        display: none;
      }
    }

    .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .main-banner .key {
      width: 80%;
      margin: -100px auto 0;
      cursor: pointer;
      -webkit-transition: 1.5s;
      transition: 1.5s;
      z-index: 9999;
    }

    @media only screen and (min-width: 768px) {
      .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .main-banner .key {
        width: auto;
        position: absolute;
        right: 20px;
        bottom: 50px;
      }
    }

    @media only screen and (min-width: 768px) {
      .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .main-banner .key:hover {
        margin-bottom: 30px;
        -webkit-transition: 1.5s;
        transition: 1.5s;
      }
    }

    .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .main-banner .key p {
      font-size: 14px;
      font-family: spartanB;
      color: #ffffff;
      text-shadow: 1px 1px 2px #000000;
      text-align: center;
      padding-bottom: 10px;
    }

    .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .main-banner .key p.desktop {
      display: none;
    }

    .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .main-banner .key p.mobile {
      display: block;
    }

    @media only screen and (min-width: 768px) {
      .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .main-banner .key p.desktop {
        display: block;
      }
      .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .main-banner .key p.mobile {
        display: none;
      }
    }

    .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .main-banner .key .key-item {
      position: relative;
      padding-bottom: 25px;
    }

    @media only screen and (min-width: 768px) {
      .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .main-banner .key .key-item {
        padding-bottom: 0;
      }
    }

    .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .main-banner .key .key-item .achievement {
      -webkit-filter: drop-shadow(0px 5px 15px #383044);
      filter: drop-shadow(0px 5px 15px #383044);
    }

    .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .main-banner .key .key-item img {
      width: 110px;
      height: 110px;
      margin: 0 auto;
      display: block;
      z-index: 10;
      position: absolute;
      cursor: pointer;
      top: -5px;
      left: -10px;
    }

    @media only screen and (min-width: 768px) {
      .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .main-banner .key .key-item img {
        position: relative;
        top: 0px;
        left: 0px;
      }
    }

    .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .main-banner .key .key-item .content {
      background-color: #ffffff;
      height: 100px;
      width: 90%;
      border-radius: 10px;
      border: 2px solid #00a69c;
      margin: 0 auto 0 35px;
      z-index: 5;
      -webkit-filter: drop-shadow(0 5px 10px #383044);
      filter: drop-shadow(0 5px 10px #383044);
    }

    @media only screen and (min-width: 768px) {
      .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .main-banner .key .key-item .content {
        height: 80%;
        position: absolute;
        top: 10%;
        right: 75px;
        margin: auto;
      }
    }

    .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .main-banner .key .key-item .content .content-wrapper {
      width: 100%;
      height: 100%;
      padding: 10px;
      position: relative;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
    }

    @media only screen and (min-width: 768px) {
      .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .main-banner .key .key-item .content .content-wrapper {
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        padding: 10px 45px 10px 30px;
      }
    }

    .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .main-banner .key .key-item .content .content-wrapper .less {
      font-size: 12px !important;
      font-family: robotoR;
      line-height: 18px;
      text-align: left;
      color: #6b6970;
      text-shadow: none;
      padding-bottom: 0;
      display: block;
      margin: auto 0;
      padding-left: 60px;
    }

    @media only screen and (min-width: 768px) {
      .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .main-banner .key .key-item .content .content-wrapper .less {
        width: 100%;
        line-height: 18px;
        padding-left: 0;
        display: none;
        margin-bottom: 0;
      }
    }

    .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .main-banner .key .key-item .content .content-wrapper p {
      font-size: 14px !important;
      font-family: robotoR;
      line-height: 18px;
      text-align: left;
      color: #6b6970;
      text-shadow: none;
      padding-bottom: 0;
      display: block;
      margin: auto 0;
      padding-left: 60px;
    }

    @media only screen and (min-width: 768px) {
      .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .main-banner .key .key-item .content .content-wrapper p {
        width: 100%;
        line-height: 22px;
        padding-left: 0;
        display: none;
      }
    }

    .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .main-banner .key .key-item .content .content-wrapper p strong {
      color: #383044;
      font-family: spartanB;
      font-size: 18px;
      line-height: 22px;
    }

    .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .main-banner .key .key-item .content .content-wrapper .close {
      width: 30px;
      height: 30px;
      position: absolute;
      left: -15px;
      top: 50%;
      -webkit-transform: translateY(-50%);
      transform: translateY(-50%);
      border: 2px solid #00a69c;
      border-radius: 25px;
      opacity: 0;
    }

    .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .main-banner .key .key-item .content .content-wrapper .close.active {
      opacity: 1;
      -webkit-transition: 0.5s;
      transition: 0.5s;
    }

    .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .main-banner .source {
      font-size: 10px;
      font-family: robotoR;
      color: #6b6970;
      opacity: 0.5;
      position: absolute;
      bottom: 30px;
      left: 50%;
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
      width: -webkit-fit-content;
      width: -moz-fit-content;
      width: fit-content;
      text-align: center;
    }

    @media only screen and (min-width: 768px) {
      .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .main-banner .source {
        position: absolute;
        bottom: 10px;
        right: 50px;
        text-align: right;
        -webkit-transform: unset;
        transform: unset;
        left: unset;
        text-align: right;
      }
    }

    .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .main-content-wrapper {
      width: 100%;
      position: relative;
      padding: 50px 0;
    }

    @media only screen and (min-width: 768px) {
      .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .main-content-wrapper {
        padding: 0;
      }
    }

    .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .main-content-wrapper .main {
      display: grid;
      padding-bottom: 150px;
    }

    .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .main-content-wrapper .main .image {
      height: 100%;
      -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
      order: 2;
    }

    .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .main-content-wrapper .main .image .brief {
      width: 100%;
      height: auto;
      display: block;
      padding: 50px 0;
    }

    @media only screen and (min-width: 768px) {
      .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .main-content-wrapper .main .image .brief {
        padding: 0;
      }
    }

    .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .main-content-wrapper .main .image .brief .desktop {
      display: none;
    }

    @media only screen and (min-width: 768px) {
      .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .main-content-wrapper .main .image .brief .desktop {
        display: block;
      }
    }

    .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .main-content-wrapper .main .image .brief .mobile {
      display: block;
    }

    @media only screen and (min-width: 768px) {
      .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .main-content-wrapper .main .image .brief .mobile {
        display: none;
      }
    }

    .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .main-content-wrapper .main .image .logo {
      width: 20%;
      height: auto;
      display: none;
    }

    @media only screen and (min-width: 768px) {
      .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .main-content-wrapper .main .image .logo {
        height: 300px;
        width: auto;
        position: absolute;
        right: 100px;
        top: 430px;
        display: block;
      }
    }

    .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .main-content-wrapper .main .the-brief {
      -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
      order: 1;
      width: 85%;
      margin: 0 auto;
    }

    @media only screen and (min-width: 768px) {
      .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .main-content-wrapper .main .the-brief {
        position: absolute;
        top: 150px;
        right: 5%;
        width: 45%;
      }
    }

    .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .main-content-wrapper .main .the-brief h3 {
      font-family: spartanB;
      color: #383044;
      margin-bottom: 15px;
    }

    .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .main-content-wrapper .main .the-brief p {
      font-size: 16px;
      line-height: 28px;
      color: #6b6970;
    }

    .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .main-content-wrapper .main .the-brief .logo {
      padding-top: 50px;
      text-align: center;
      display: none;
    }

    @media only screen and (min-width: 768px) {
      .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .main-content-wrapper .main .the-brief .logo {
        display: block;
      }
    }

    .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .main-content-wrapper .main .the-brief .logo img {
      width: 60%;
    }

    .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .main-content-wrapper .main .the-solution {
      -webkit-box-ordinal-group: 4;
      -ms-flex-order: 3;
      order: 3;
      width: 85%;
      margin: 0 auto;
    }

    .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .main-content-wrapper .main .the-solution h3 {
      font-family: spartanB;
      color: #383044;
      margin-bottom: 15px;
    }

    .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .main-content-wrapper .main .the-solution p {
      font-size: 16px;
      line-height: 28px;
      color: #6b6970;
    }

    .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .main-content-wrapper .social {
      position: relative;
    }

    .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .main-content-wrapper .social h3 {
      font-size: 30px;
      color: #ffffff;
      text-align: center;
      margin-bottom: 50px;
    }

    @media only screen and (min-width: 768px) {
      .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .main-content-wrapper .social h3 {
        font-size: 80px;
        margin-bottom: 50px;
      }
    }

    .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .main-content-wrapper .social .main {
      position: absolute;
      top: -20px;
      z-index: 9999;
    }

    .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .main-content-wrapper .social .posts {
      width: 100%;
      margin: 0 auto;
    }

    .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .main-content-wrapper .gif {
      padding-bottom: 100px;
    }

    .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .main-content-wrapper .gif .gif-wrapper {
      width: 90%;
      margin: 0 auto;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
    }

    .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .main-content-wrapper .gif .gif-wrapper .gif-item {
      width: 50%;
    }

    @media only screen and (min-width: 768px) {
      .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .main-content-wrapper .gif .gif-wrapper .gif-item {
        width: 25%;
      }
    }

    .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .gallery {
      background-color: #ffffff;
    }

    .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .gallery .gallery-wrapper {
      width: 90%;
      margin: 0 auto;
      padding: 50px 0 50px;
    }

    @media only screen and (min-width: 768px) {
      .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .gallery .gallery-wrapper {
        padding: 50px 0 100px;
      }
    }

    .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .gallery .gallery-wrapper h3 {
      color: #383044;
      padding-bottom: 15px;
    }

    .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .gallery .gallery-wrapper .gallery-item-wrapper {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
    }

    .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .gallery .gallery-wrapper .gallery-item-wrapper .gallery-item:nth-child(1) {
      width: 90%;
      margin: 0 auto 25px;
    }

    @media only screen and (min-width: 768px) {
      .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .gallery .gallery-wrapper .gallery-item-wrapper .gallery-item:nth-child(1) {
        margin: 0 auto;
        padding-bottom: 50px;
      }
    }

    .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .gallery .gallery-wrapper .gallery-item-wrapper .gallery-item:nth-child(1) .title {
      display: none;
    }

    .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .gallery .gallery-wrapper .gallery-item-wrapper .gallery-item:nth-child(n+2) {
      width: 90%;
      margin: 0 auto 25px;
    }

    @media only screen and (min-width: 768px) {
      .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .gallery .gallery-wrapper .gallery-item-wrapper .gallery-item:nth-child(n+2) {
        width: 50%;
        margin-bottom: 25px;
      }
    }

    .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .gallery .gallery-wrapper .gallery-item-wrapper .gallery-item:nth-child(n+2) .title {
      font-family: robotoR;
      font-size: 14px;
      margin-bottom: 5px;
    }

    @media only screen and (min-width: 768px) {
      .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .gallery .gallery-wrapper .gallery-item-wrapper .gallery-item:nth-child(even) {
        padding-right: 15px;
      }
    }

    @media only screen and (min-width: 768px) {
      .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .gallery .gallery-wrapper .gallery-item-wrapper .gallery-item:nth-child(2n+3) {
        padding-left: 15px;
      }
    }

    .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .video {
      background-color: #FFDCE0;
    }

    .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .video .video-wrapper {
      width: 90%;
      margin: 0 auto;
      padding: 50px 0 100px;
    }

    @media only screen and (min-width: 768px) {
      .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .video .video-wrapper {
        padding: 50px 0 0px;
      }
    }

    .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .video .video-wrapper h3 {
      color: #383044;
      padding-bottom: 15px;
    }

    .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .video .video-wrapper .video-item {
      width: 90%;
      margin: 0 auto;
    }

    .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .video .video-wrapper .video-item iframe {
      width: 100%;
      height: 320px;
    }

    @media only screen and (min-width: 768px) {
      .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .video .video-wrapper .video-item iframe {
        height: 500px;
      }
    }

    .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .video .video-wrapper .slick-next {
      top: unset;
      bottom: -40px;
      right: 10px;
      z-index: 999;
    }

    @media only screen and (min-width: 768px) {
      .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .video .video-wrapper .slick-next {
        right: -50px;
        top: 50%;
        bottom: unset;
      }
    }

    .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .video .video-wrapper .slick-next:before {
      content: '';
      background-image: url("../images/icon/next-blue.png");
      background-size: 40px;
      height: 40px;
      width: 40px;
      display: block;
    }

    .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .video .video-wrapper .slick-prev {
      top: unset;
      bottom: -40px;
      left: -10px;
      z-index: 9999;
    }

    @media only screen and (min-width: 768px) {
      .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .video .video-wrapper .slick-prev {
        left: -70px;
        top: 50%;
        bottom: unset;
      }
    }

    .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .video .video-wrapper .slick-prev:before {
      content: '';
      background-image: url("../images/icon/prev-blue.png");
      background-size: 40px;
      height: 40px;
      width: 40px;
      display: block;
    }

    .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .video .video-wrapper .slick-dots {
      position: absolute;
      bottom: -40px;
    }

    @media only screen and (min-width: 768px) {
      .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .video .video-wrapper .slick-dots {
        bottom: -30px;
      }
    }

    .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .video .video-wrapper .slick-dots li button:before {
      color: #ffffff;
      opacity: 1;
      font-size: 7px;
    }

    .fancy-portfolio .portfolio-single-container .portfolio-single-wrapper .video .video-wrapper .slick-dots li.slick-active button:before {
      color: #ffd002;
    }

    .fancy-portfolio .funfact {
      background-color: #FFDCE0;
      width: 100%;
      cursor: pointer;
      padding-top: 50px;
      padding-bottom: 100px;
    }

    @media only screen and (min-width: 768px) {
      .fancy-portfolio .funfact {
        height: 250px;
        padding-bottom: 0;
        padding-top: 100px;
      }
    }

    .fancy-portfolio .funfact .funfact-wrapper {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      position: relative;
      padding: 0 25px;
      -webkit-transition: 1s;
      transition: 1s;
    }

    .fancy-portfolio .funfact .funfact-wrapper:hover {
      margin-top: -15px;
      margin-bottom: 15px;
      -webkit-transition: 1s;
      transition: 1s;
    }

    @media only screen and (min-width: 768px) {
      .fancy-portfolio .funfact .funfact-wrapper {
        padding: 0 0 0 50px;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
      }
    }

    .fancy-portfolio .funfact .funfact-wrapper .icon {
      -webkit-filter: drop-shadow(0px 5px 15px #383044);
      filter: drop-shadow(0px 5px 15px #383044);
      position: absolute;
      left: 50%;
      top: -50px;
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
    }

    @media only screen and (min-width: 768px) {
      .fancy-portfolio .funfact .funfact-wrapper .icon {
        position: absolute;
        left: -50px;
        top: 55%;
        -webkit-transform: translateY(-53%);
        transform: translateY(-53%);
      }
    }

    .fancy-portfolio .funfact .funfact-wrapper .icon img {
      width: 90px;
    }

    @media only screen and (min-width: 768px) {
      .fancy-portfolio .funfact .funfact-wrapper .icon img {
        width: 120px;
      }
    }

    .fancy-portfolio .funfact .funfact-wrapper .line {
      width: 100px;
      border-top: 3px solid #ffd002;
      margin: auto;
      display: none;
    }

    @media only screen and (min-width: 768px) {
      .fancy-portfolio .funfact .funfact-wrapper .line {
        display: block;
      }
    }

    .fancy-portfolio .funfact .funfact-wrapper .content {
      background-color: white;
      margin: 0;
      padding: 40px 25px;
      border: 3px solid #ffd002;
      border-radius: 25px;
      -webkit-box-shadow: 0 10px 20px #888888;
      box-shadow: 0 10px 20px #888888;
      width: auto;
    }

    @media only screen and (min-width: 768px) {
      .fancy-portfolio .funfact .funfact-wrapper .content {
        margin: 0 50px 0 0;
        padding: 25px 50px 5px 25px;
      }
    }

    .fancy-portfolio .funfact .funfact-wrapper .content .title {
      margin-bottom: 10px;
    }

    .fancy-portfolio .funfact .funfact-wrapper .content .desc {
      border-top: 1px solid black;
      padding-top: 10px;
      font-size: 15px;
      line-height: 20px;
      font-family: spartanR;
      color: #6b6970;
    }

    .fancy-portfolio .talk {
      background-color: #FFDCE0;
      height: 150px;
      padding: 0 25px;
    }

    @media only screen and (min-width: 768px) {
      .fancy-portfolio .talk {
        padding: 50px 100px 0;
      }
    }

    .fancy-portfolio .talk .talk-wrapper {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
    }

    .fancy-portfolio .talk .talk-wrapper .see {
      width: 35%;
      font-size: 16px;
      font-family: robotoR;
      color: #6b6970;
      margin: auto auto auto 0;
      padding-bottom: 5px;
      position: relative;
      display: block;
    }

    @media only screen and (min-width: 768px) {
      .fancy-portfolio .talk .talk-wrapper .see {
        font-size: 18px;
      }
    }

    .fancy-portfolio .talk .talk-wrapper .see:before {
      position: absolute;
      left: 0px;
      top: 25px;
      display: block;
      content: '';
      background-image: url("../images/icon/title_underline_gray.png");
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center right;
      height: 30px;
      width: 140px;
    }

    @media only screen and (min-width: 768px) {
      .fancy-portfolio .talk .talk-wrapper .see:before {
        top: 0px;
        width: 400px;
      }
    }

    .fancy-portfolio .talk .talk-wrapper .button-wrapper {
      padding-top: 0;
    }

    .fancy-portfolio .interested {
      background-color: #363143;
      height: 50vh;
      width: 100%;
    }

    .fancy-portfolio .interested .interested-wrapper {
      width: 80%;
      position: absolute;
      left: 50%;
      top: 50%;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      position: relative;
    }

    .fancy-portfolio .interested .interested-wrapper h2 {
      color: #d8d8d8;
      font-size: 16px;
      padding-bottom: 10px;
    }

    .fancy-portfolio .interested .interested-wrapper .others-wrapper {
      width: 100%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
    }

    .fancy-portfolio .interested .interested-wrapper .others-wrapper .others-item {
      position: relative;
      overflow: hidden;
    }

    .fancy-portfolio .interested .interested-wrapper .others-wrapper .others-item:hover {
      cursor: pointer;
    }

    @media (min-width: 1024px) {
      .fancy-portfolio .interested .interested-wrapper .others-wrapper .others-item {
        -webkit-box-flex: 1;
        -ms-flex: 1 0 33%;
        flex: 1 0 33%;
      }
    }

    .fancy-portfolio .interested .interested-wrapper .others-wrapper .others-item img {
      height: 99%;
    }

    .fancy-portfolio .interested .interested-wrapper .others-wrapper .others-item .overlay {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(56, 48, 68, 0.1)), color-stop(50%, rgba(56, 48, 68, 0.4)), to(#383044));
      background-image: linear-gradient(to bottom, rgba(56, 48, 68, 0.1) 0%, rgba(56, 48, 68, 0.4) 50%, #383044);
      background-size: cover;
    }

    .fancy-portfolio .interested .interested-wrapper .others-wrapper .others-item .overlay .text {
      position: absolute;
      bottom: 10px;
      left: 20px;
      text-align: left;
    }

    .fancy-portfolio .interested .interested-wrapper .others-wrapper .others-item .overlay .text p {
      margin-bottom: 0px;
    }

    .fancy-portfolio .interested .interested-wrapper .others-wrapper .others-item .overlay .text p.title {
      font-size: 16px !important;
      line-height: 18px !important;
      font-family: spartanB;
      color: #ffffff !important;
    }

    .fancy-portfolio .interested .interested-wrapper .others-wrapper .others-item .overlay .text p.sub-title {
      font-size: 14px !important;
      line-height: 18px !important;
      font-family: robotoR;
      color: #d8d8d8;
    }

    .fancy-portfolio .interested .interested-wrapper .others-wrapper .slick-dots {
      position: absolute;
      bottom: -30px;
    }

    .fancy-portfolio .interested .interested-wrapper .others-wrapper .slick-dots li button:before {
      color: #ffffff;
      opacity: 1;
      font-size: 7px !important;
    }

    @media only screen and (min-width: 768px) {
      .fancy-portfolio .interested .interested-wrapper .others-wrapper .slick-dots li button:before {
        font-size: 20px !important;
      }
    }

    .fancy-portfolio .interested .interested-wrapper .others-wrapper .slick-dots li.slick-active button:before {
      color: #ffd002;
    }

    .fancy-portfolio .footer {
      background-color: #ffffff;
      height: 10vh;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
    }

    .fancy-portfolio .footer .prev {
      padding-left: 50px;
      position: relative;
      font-size: 14px;
      font-family: spartanB;
      cursor: pointer;
    }

    @media only screen and (min-width: 768px) {
      .fancy-portfolio .footer .prev {
        font-size: 18px;
        padding-left: 60px;
      }
    }

    .fancy-portfolio .footer .prev a {
      color: #383044;
    }

    .fancy-portfolio .footer .prev:before {
      content: '';
      display: block;
      background-image: url("../images/icon/portfolio_prev_static.png");
      background-size: 35px;
      height: 35px;
      width: 35px;
      position: absolute;
      top: -12px;
      left: 15px;
    }

    @media only screen and (min-width: 768px) {
      .fancy-portfolio .footer .prev:before {
        background-size: 44px;
        height: 44px;
        width: 44px;
        top: -15px;
      }
    }

    .fancy-portfolio .footer .prev:hover a {
      color: #ffd002;
    }

    .fancy-portfolio .footer .prev:hover:before {
      background-image: url("../images/icon/portfolio_prev_hover.png");
    }

    .fancy-portfolio .footer .next {
      padding-right: 50px;
      position: relative;
      font-size: 14px;
      font-family: spartanB;
      cursor: pointer;
      text-align: right;
    }

    @media only screen and (min-width: 768px) {
      .fancy-portfolio .footer .next {
        font-size: 18px;
        padding-right: 60px;
      }
    }

    .fancy-portfolio .footer .next a {
      color: #383044;
    }

    .fancy-portfolio .footer .next:before {
      content: '';
      display: block;
      background-image: url("../images/icon/portfolio_next_static.png");
      background-size: 35px;
      height: 35px;
      width: 35px;
      position: absolute;
      top: -12px;
      right: 15px;
    }

    @media only screen and (min-width: 768px) {
      .fancy-portfolio .footer .next:before {
        background-size: 44px;
        height: 44px;
        width: 44px;
        top: -15px;
      }
    }

    .fancy-portfolio .footer .next:hover a {
      color: #ffd002;
    }

    .fancy-portfolio .footer .next:hover:before {
      background-image: url("../images/icon/portfolio_next_hover.png");
    }

    .fancy-portfolio .fancybox-content {
      background-color: transparent;
    }

    .fancy-portfolio .fancybox-content iframe {
      background-color: transparent;
    }

    .fancybox-slide {
      padding: 0;
    }

    .footer-wrapper {
      background-color: #383044;
    }

    @media only screen and (min-width: 768px) {
      .footer-wrapper {
        padding: 0;
      }
    }

    .footer-wrapper .footer-inner {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      width: 100%;
      padding: 0 40px;
    }

    @media only screen and (min-width: 768px) and (max-width: 1440px) {
      .footer-wrapper .footer-inner {
        width: 85%;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
      }
    }

    @media only screen and (min-width: 1440px) {
      .footer-wrapper .footer-inner {
        width: 70%;
        margin: 0 auto;
        padding: 0;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;

      }
    }

    .footer-wrapper .footer-inner .socmed-wrapper {
      text-align: center;
      -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
      order: 1;
      width: 100%;
      margin: 0 auto;
    }

    @media only screen and (min-width: 768px) {
      .footer-wrapper .footer-inner .socmed-wrapper {
        width: unset;
        margin: 0;
      }
    }

    .footer-wrapper .footer-inner .socmed-wrapper .socmed-inner {
      width: 100%;
      margin: 50px auto 0;
      text-align: left;
      padding-bottom: 50px;
      border-bottom: 1px solid #ffffff;
    }

    @media only screen and (min-width: 768px) {
      .footer-wrapper .footer-inner .socmed-wrapper .socmed-inner {
        margin: 50px 0 0 auto;
        padding-bottom: 0;
        border-bottom: 0;
        width: auto;
        display: inline-block;
      }
    }

    .footer-wrapper .footer-inner .socmed-wrapper .socmed-inner img {
      width: 150px;
      padding: 0 0 10px 0;
    }

    @media only screen and (min-width: 768px) {
      .footer-wrapper .footer-inner .socmed-wrapper .socmed-inner img {
        padding: 0 0 30px 0;
      }
    }

    .footer-wrapper .footer-inner .socmed-wrapper .socmed-inner p {
      color: #d7d7d7;
      font-family: dinB;
      letter-spacing: -1px;
      text-transform: uppercase;
      font-size: 16px !important;
      line-height: 24px  !important;
    }

    .footer-wrapper .footer-inner .border-wrapper {
      display: none;
    }

    @media only screen and (min-width: 768px) {
      .footer-wrapper .footer-inner .border-wrapper {
        -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
        order: 2;
        width: 10%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
      }
    }

    .footer-wrapper .footer-inner .border-wrapper .border {
      width: 50%;
      height: 80%;
    }

    @media only screen and (min-width: 768px) {
      .footer-wrapper .footer-inner .border-wrapper .border {
        text-align: right;
        border-width: 0 1px 0 0;
        border-style: solid;
        -o-border-image: linear-gradient(to right, #ffffff, rgba(0, 0, 0, 0)) 30% 100%;
        border-image: -webkit-gradient(linear, left top, right top, from(#ffffff), to(rgba(0, 0, 0, 0))) 30% 100%;
        border-image: linear-gradient(to right, #ffffff, rgba(0, 0, 0, 0)) 30% 100%;
      }
    }

    .footer-wrapper .footer-inner .gap-wrapper {
      display: none;
    }

    @media only screen and (min-width: 768px) {
      .footer-wrapper .footer-inner .gap-wrapper {
        display: block;
        width: 5%;
        -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
        order: 3;
      }
    }

    .footer-wrapper .footer-inner .visit-us {
      text-align: left;
      margin-top: 25px;
      -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
      order: 1;
    }

    @media only screen and (min-width: 768px) {
      .footer-wrapper .footer-inner .visit-us {
        margin-top: 50px;
        -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
        order: 2;
      }
    }

    .footer-wrapper .footer-inner .visit-us .address-wrapper {
      padding: 0;
      text-align: left;
      width: 100%;
    }

    .footer-wrapper .footer-inner .visit-us .address-wrapper .title {
      color: #00a69c;
      font-family: spartanM;
      margin: 20px 0 5px;
      width: 100%;
    }

    .footer-wrapper .footer-inner .visit-us .address-wrapper p {
      width: 100%;
      color: #ffffff;
      font-family: robotoR;
      font-size: 14px !important;
      line-height: 18px  !important;
    }

    .footer-wrapper .footer-inner .follow-wrapper {
      margin: 0 0 60px 0;
      text-align: left;
    }

    .footer-wrapper .footer-inner .follow-wrapper.column {
      -webkit-box-ordinal-group: 4;
      -ms-flex-order: 3;
      order: 3;
    }

    @media only screen and (min-width: 768px) {
      .footer-wrapper .footer-inner .follow-wrapper {
        margin: 40px auto;
      }
    }

    .footer-wrapper .footer-inner .follow-wrapper.desktop {
      display: none;
    }

    @media only screen and (min-width: 768px) {
      .footer-wrapper .footer-inner .follow-wrapper.desktop {
        display: block;
      }
    }

    .footer-wrapper .footer-inner .follow-wrapper.mobile {
      display: block;
    }

    @media only screen and (min-width: 768px) {
      .footer-wrapper .footer-inner .follow-wrapper.mobile {
        display: none;
      }
    }

    .footer-wrapper .footer-inner .follow-wrapper .title {
      color: #00a69c;
      font-family: spartanM;
      margin: 20px 0 5px;
      width: 100%;
    }

    .footer-wrapper .footer-inner .follow-wrapper .icon img {
      width: 40px;
      margin: 0 auto 0 0;
    }

    @media only screen and (min-width: 768px) {
      .footer-wrapper .footer-inner .follow-wrapper .icon img {
        margin: 0;
      }
    }

    .footer-wrapper .footer-inner .follow-wrapper .icon img.static {
      display: block;
    }

    .footer-wrapper .footer-inner .follow-wrapper .icon img.hover {
      display: none;
    }

    .footer-wrapper .footer-inner .follow-wrapper .icon:hover .static {
      display: none;
    }

    .footer-wrapper .footer-inner .follow-wrapper .icon:hover .hover {
      display: block;
    }

    .footer-wrapper .footer-inner .contacted {
      text-align: left;
      -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
      order: 2;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      margin-top: 25px;
    }

    @media only screen and (min-width: 768px) {
      .footer-wrapper .footer-inner .contacted {
        display: block;
        -webkit-box-ordinal-group: 5;
        -ms-flex-order: 4;
        order: 4;
        margin-top: 50px;
      }
    }

    .footer-wrapper .footer-inner .contacted .contact-wrapper, .footer-wrapper .footer-inner .contacted .career-wrapper {
      width: 100%;
      margin-bottom: 20px;
      text-align: left;
    }

    @media only screen and (min-width: 768px) {
      .footer-wrapper .footer-inner .contacted .contact-wrapper, .footer-wrapper .footer-inner .contacted .career-wrapper {
        margin-bottom: 0;
      }
    }

    .footer-wrapper .footer-inner .contacted .contact-wrapper .title, .footer-wrapper .footer-inner .contacted .career-wrapper .title {
      color: #00a69c;
      font-family: spartanM;
      margin: 20px 0 5px;
    }

    .footer-wrapper .footer-inner .contacted .contact-wrapper p, .footer-wrapper .footer-inner .contacted .career-wrapper p {
      font-family: robotoR;
      font-size: 14px !important;
      line-height: 18px  !important;
    }

    .footer-wrapper .footer-inner .contacted .contact-wrapper p a, .footer-wrapper .footer-inner .contacted .career-wrapper p a {
      color: #ffffff;
    }

    .footer-wrapper .footer-inner .contacted .contact-wrapper p a:hover, .footer-wrapper .footer-inner .contacted .career-wrapper p a:hover {
      color: #ffd002;
      text-decoration: underline;
    }

    @media only screen and (min-width: 768px) {
      .footer-wrapper .footer-inner .contacted .career-wrapper {
        margin-top: 40px;
      }
    }

    .footer-wrapper .copyright {
      width: 100%;
      height: 50px;
      -webkit-box-shadow: 0px -4px 6px rgba(54, 38, 68, 0.75);
      box-shadow: 0px -4px 6px rgba(54, 38, 68, 0.75);
    }

    .footer-wrapper .copyright p {
      padding-top: 10px;
      color: #d8d8d8;
      font-size: 12px !important;
      text-align: center;
    }

    .popup-wrapper {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      z-index: 999999;
      display: none;
      background-image: -webkit-gradient(linear, left top, left bottom, from(#9f9fa6), to(#656470));
      background-image: linear-gradient(to bottom, #9f9fa6, #656470);
      opacity: 1;

    }

    .popup-wrapper.service {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      z-index: 999999;
      display: none;
      background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(159, 159, 166,0.2)), to(rgb(101, 100, 112,0.2)));
      background-image: linear-gradient(to bottom, rgb(159, 159, 166,0.2), rgb(101, 100, 112,0.2));
      opacity: 1;

    }

    .popup-wrapper.active {
      display: block;
    }

    .popup-wrapper .close-popup {
      position: absolute;
      top: 30px;
      width: 30px;
      right: 30px;
      cursor: pointer;
      z-index: 100;
    }

    .popup-wrapper .popup-content {
      width: 100%;
      text-align: center;
      padding: 20px;
      height: 100%;
    }

    @media all and (max-height: 500px) {
      .popup-wrapper .popup-content {
        width: 100%;
        height: 100vh;
        overflow-y: scroll;
      }
    }

    .popup-wrapper .popup-content#loadingMSG, .popup-wrapper .popup-content#successMSG, .popup-wrapper .popup-content#failMSG {
      display: none;
    }

    .popup-wrapper .popup-content#loadingMSG.active, .popup-wrapper .popup-content#successMSG.active, .popup-wrapper .popup-content#failMSG.active {
      display: block;
    }

    .popup-wrapper .popup-content .section-header-wrapper {
      width: 100%;
      position: absolute;
      top: 35%;
      left: 50%;
      -webkit-transform: translate(-50%, -35%);
      transform: translate(-50%, -35%);
    }

    @media all and (min-width: 768px) {
      .popup-wrapper .popup-content .section-header-wrapper {
        width: 80%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
      }
    }

    .popup-wrapper .popup-content .section-header-wrapper .desc-wrapper {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
    }

    @media all and (min-width: 768px) {
      .popup-wrapper .popup-content .section-header-wrapper .desc-wrapper {
        -ms-flex-wrap: unset;
        flex-wrap: unset;
      }
    }

    .popup-wrapper .popup-content .section-header-wrapper .desc-wrapper .gif {
      width: 100%;
      -webkit-box-pack: right;
      -ms-flex-pack: right;
      justify-content: right;
    }

    @media all and (min-width: 768px) {
      .popup-wrapper .popup-content .section-header-wrapper .desc-wrapper .gif {
        text-align: right;
        width: unset;
      }
    }

    .popup-wrapper .popup-content .section-header-wrapper .desc-wrapper .gif img {
      max-width: 300px;
      height: auto;
    }

    @media all and (min-width: 768px) {
      .popup-wrapper .popup-content .section-header-wrapper .desc-wrapper .gif img {
        text-align: right;
      }
    }

    .popup-wrapper .popup-content .section-header-wrapper .desc-wrapper .content {
      width: 90%;
      text-align: left;
      padding: 50px 40px 0;
    }

    @media all and (min-width: 768px) {
      .popup-wrapper .popup-content .section-header-wrapper .desc-wrapper .content {
        padding: 0 0 0 100px;
        margin: auto 0;
        width: unset;
      }
    }

    .popup-wrapper .popup-content .section-header-wrapper .desc-wrapper .content h2 {
      font-size: 38px;
      line-height: 48px;
    }

    @media all and (min-width: 768px) {
      .popup-wrapper .popup-content .section-header-wrapper .desc-wrapper .content h2 {
        font-size: 48px;
        line-height: 58px;
      }
    }

    .popup-wrapper .popup-content .section-header-wrapper .desc-wrapper .content h2 span {
      color: #ffd002;
    }

    .popup-wrapper .popup-content .section-header-wrapper .desc-wrapper .content p {
      font-size: 20px;
      margin-top: 20px;
    }

    .popup-wrapper .popup-content .section-header-wrapper .loading-wrapper {
      width: 100%;
    }

    .lds-spinner {
      color: official;
      display: inline-block;
      position: relative;
      width: 80px;
      height: 80px;
    }

    .lds-spinner div {
      -webkit-transform-origin: 40px 40px;
      transform-origin: 40px 40px;
      -webkit-animation: lds-spinner 1.2s linear infinite;
      animation: lds-spinner 1.2s linear infinite;
    }

    .lds-spinner div:after {
      content: " ";
      display: block;
      position: absolute;
      top: 0px;
      left: 37px;
      width: 4px;
      height: 18px;
      border-radius: 20%;
      background: #383044;
    }

    .lds-spinner div:nth-child(1) {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
      -webkit-animation-delay: -1.1s;
      animation-delay: -1.1s;
    }

    .lds-spinner div:nth-child(2) {
      -webkit-transform: rotate(30deg);
      transform: rotate(30deg);
      -webkit-animation-delay: -1s;
      animation-delay: -1s;
    }

    .lds-spinner div:nth-child(3) {
      -webkit-transform: rotate(60deg);
      transform: rotate(60deg);
      -webkit-animation-delay: -0.9s;
      animation-delay: -0.9s;
    }

    .lds-spinner div:nth-child(4) {
      -webkit-transform: rotate(90deg);
      transform: rotate(90deg);
      -webkit-animation-delay: -0.8s;
      animation-delay: -0.8s;
    }

    .lds-spinner div:nth-child(5) {
      -webkit-transform: rotate(120deg);
      transform: rotate(120deg);
      -webkit-animation-delay: -0.7s;
      animation-delay: -0.7s;
    }

    .lds-spinner div:nth-child(6) {
      -webkit-transform: rotate(150deg);
      transform: rotate(150deg);
      -webkit-animation-delay: -0.6s;
      animation-delay: -0.6s;
    }

    .lds-spinner div:nth-child(7) {
      -webkit-transform: rotate(180deg);
      transform: rotate(180deg);
      -webkit-animation-delay: -0.5s;
      animation-delay: -0.5s;
    }

    .lds-spinner div:nth-child(8) {
      -webkit-transform: rotate(210deg);
      transform: rotate(210deg);
      -webkit-animation-delay: -0.4s;
      animation-delay: -0.4s;
    }

    .lds-spinner div:nth-child(9) {
      -webkit-transform: rotate(240deg);
      transform: rotate(240deg);
      -webkit-animation-delay: -0.3s;
      animation-delay: -0.3s;
    }

    .lds-spinner div:nth-child(10) {
      -webkit-transform: rotate(270deg);
      transform: rotate(270deg);
      -webkit-animation-delay: -0.2s;
      animation-delay: -0.2s;
    }

    .lds-spinner div:nth-child(11) {
      -webkit-transform: rotate(300deg);
      transform: rotate(300deg);
      -webkit-animation-delay: -0.1s;
      animation-delay: -0.1s;
    }

    .lds-spinner div:nth-child(12) {
      -webkit-transform: rotate(330deg);
      transform: rotate(330deg);
      -webkit-animation-delay: 0s;
      animation-delay: 0s;
    }

    @-webkit-keyframes lds-spinner {
      0% {
        opacity: 1;
      }
      100% {
        opacity: 0;
      }
    }

    @keyframes lds-spinner {
      0% {
        opacity: 1;
      }
      100% {
        opacity: 0;
      }
    }