/*     
    Name: _variables.scss    
    Author: Zakaria El Khachia
    Client:
*/
/* Colors */
/* Fonts */
/* Transforms */
/* Breakpoints */
/*     
    Name: _animations.scss    
    Author: Zakaria El Khachia
    Client:
*/
.reveal-x {
  opacity: 0;
  -webkit-transform: translateX(-50px);
          transform: translateX(-50px);
  -webkit-transition: all 0.6s cubic-bezier(0.32, 1.01, 0.35, 1.01);
  transition: all 0.6s cubic-bezier(0.32, 1.01, 0.35, 1.01);
  will-change: transform;
}

.reveal-y {
  opacity: 0;
  -webkit-transform: translateY(50px);
          transform: translateY(50px);
  -webkit-transition: all 0.6s cubic-bezier(0.32, 1.01, 0.35, 1.01);
  transition: all 0.6s cubic-bezier(0.32, 1.01, 0.35, 1.01);
  will-change: transform;
}

.reveal-anim {
  -webkit-transition: 0.5s opacity 0.1s, 0.75s -webkit-transform cubic-bezier(0.32, 1.01, 0.35, 1.01);
  transition: 0.5s opacity 0.1s, 0.75s -webkit-transform cubic-bezier(0.32, 1.01, 0.35, 1.01);
  transition: 0.75s transform cubic-bezier(0.32, 1.01, 0.35, 1.01), 0.5s opacity 0.1s;
  transition: 0.75s transform cubic-bezier(0.32, 1.01, 0.35, 1.01), 0.5s opacity 0.1s, 0.75s -webkit-transform cubic-bezier(0.32, 1.01, 0.35, 1.01);
}

.mask-x {
  position: relative;
  overflow: hidden;
  display: inline-table !important;
}

.mask-x:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  top: 0;
  left: 0;
  -webkit-transform: translateX(0);
          transform: translateX(0);
  -webkit-transition: 1.2s all cubic-bezier(0.37, 0.67, 0.24, 0.89);
  transition: 1.2s all cubic-bezier(0.37, 0.67, 0.24, 0.89);
}

.mask-x.active:after {
  -webkit-transition: 0.9s all cubic-bezier(0.19, 1, 0.22, 1);
  transition: 0.9s all cubic-bezier(0.19, 1, 0.22, 1);
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
}

@-webkit-keyframes clip-text {
  from {
    -webkit-clip-path: inset(0 100% 0 0);
            clip-path: inset(0 100% 0 0);
  }
  to {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
}

@keyframes clip-text {
  from {
    -webkit-clip-path: inset(0 100% 0 0);
            clip-path: inset(0 100% 0 0);
  }
  to {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
}

@-webkit-keyframes text-revealer {
  0%,
  50% {
    -webkit-transform-origin: 0 50%;
            transform-origin: 0 50%;
  }
  60%,
  100% {
    -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
  }
  60% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
  100% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
}

@keyframes text-revealer {
  0%,
  50% {
    -webkit-transform-origin: 0 50%;
            transform-origin: 0 50%;
  }
  60%,
  100% {
    -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
  }
  60% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
  100% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
}

@-webkit-keyframes slideLink {
  0% {
    opacity: 0;
    left: -2rem;
  }
  20% {
    opacity: 1;
    left: 0rem;
  }
  80% {
    opacity: 1;
    left: 0rem;
  }
  100% {
    left: 2rem;
    opacity: 0;
  }
}

@keyframes slideLink {
  0% {
    opacity: 0;
    left: -2rem;
  }
  20% {
    opacity: 1;
    left: 0rem;
  }
  80% {
    opacity: 1;
    left: 0rem;
  }
  100% {
    left: 2rem;
    opacity: 0;
  }
}

@-webkit-keyframes chevronBounce {
  0% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
  50% {
    -webkit-transform: translateY(20%);
            transform: translateY(20%);
  }
  100% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}

@keyframes chevronBounce {
  0% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
  50% {
    -webkit-transform: translateY(20%);
            transform: translateY(20%);
  }
  100% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}

@-webkit-keyframes scaleSlow {
  0% {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes scaleSlow {
  0% {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  50% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
}

@keyframes pulse {
  0% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  50% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
}

/* Functions */
/* Mixins */
/*
    HTML5 Reset :: reset.css
    ----------------------------------------------------------
    We have learned much from/been inspired by/taken code where offered from:

    Eric Meyer                  :: http://ericmeyer.com
    HTML5 Doctor                :: http://html5doctor.com
    and the HTML5 Boilerplate   :: http://html5boilerplate.com

-------------------------------------------------------------------------------*/
/* Let's default this puppy out
-------------------------------------------------------------------------------*/
html,
body,
body div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

article,
aside,
figure,
footer,
header,
hgroup,
nav,
section {
  display: block;
}

/* Responsive images and other embedded objects
   Note: keeping IMG here will cause problems if you're using foreground images as sprites.
   If this default setting for images is causing issues, you might want to replace it with a .responsive class instead. */
img,
object,
embed {
  max-width: 100%;
}

/* force a vertical scrollbar to prevent a jumpy page */
/* we use a lot of ULs that aren't bulleted.
  don't forget to restore the bullets within content. */
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  text-decoration: none;
}

del {
  text-decoration: line-through;
}

abbr[title],
dfn[title] {
  border-bottom: 1px dotted #000;
  cursor: help;
}

/* tables still need cellspacing="0" in the markup */
th {
  font-weight: bold;
  vertical-align: bottom;
}

td {
  font-weight: normal;
  vertical-align: top;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

input,
select {
  vertical-align: middle;
}

pre {
  white-space: pre;
  /* CSS2 */
  white-space: pre-wrap;
  /* CSS 2.1 */
  white-space: pre-line;
  /* CSS 3 (and 2.1 as well, actually) */
  word-wrap: break-word;
  /* IE */
}

input[type="radio"] {
  vertical-align: text-bottom;
}

input[type="checkbox"] {
  vertical-align: bottom;
  *vertical-align: baseline;
}

select,
input,
textarea {
  font: 99% sans-serif;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  font-size: inherit;
}

/* Accessible focus treatment
    people.opera.com/patrickl/experiments/keyboard/test
a:hover,
a:focus,
a:active {
  outline: none;
}*/
small {
  font-size: 85%;
}

strong,
th {
  font-weight: bold;
}

td,
td img {
  vertical-align: top;
}

/* Make sure sup and sub don't screw with your line-heights
    gist.github.com/413930 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* standardize any monospaced elements */
pre,
code,
kbd,
samp {
  font-family: monospace, sans-serif;
}

/* hand cursor on clickable elements */
.clickable,
input[type="button"],
input[type="submit"],
button {
  cursor: pointer;
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  /* Style clickable inputs in iOS */
}

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button,
input,
select,
textarea {
  margin: 0;
}

/* make buttons play nice in IE */
/* button {width: auto; overflow: visible;} */
button::-moz-focus-inner,
input::-moz-focus-inner {
  /* Inner padding and border oddities in FF3/4 */
  padding: 0;
  border: 0;
}

/* let's clear some floats */
.clearfix:before, .page-content:before,
.clearfix:after,
.page-content:after {
  content: "\0020";
  display: block;
  height: 0;
  overflow: hidden;
}


.clearfix:after,
.page-content:after {
  clear: both;
}

.clearfix, .page-content {
  zoom: 1;
}

/* new Linux- and Windows-friendly sans-serif font stack: http://mky.be/fontstack */
body {
  font: 16px Helmet, Freesans, sans-serif;
}

body,
html {
  width: 100%;
  height: 100%;
}

a,
button {
  cursor: pointer;
}

button {
  border: 0;
  padding: 0;
  margin: 0;
}

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

/*::-moz-selection{background: #fcd700; color: #fff; text-shadow: none;}
::selection {background: #fcd700; color: #fff; text-shadow: none;}*/
/*a:link {-webkit-tap-highlight-color: #fcd700;}*/
input,
select {
  -webkit-appearance: none;
  border-radius: 0px;
}

h1,
h2,
h3,
h4,
h5,
h6,
a,
p,
span,
li,
q,
th,
td,
input,
div {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
}

input,
button {
  outline: none;
}

/*     
    Name: _base.scss    
    Author: Zakaria El Khachia
    Client:
*/
/**
 * Set up a decent box model on the root element
 */
html {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

/**
 * Make all elements from the DOM inherit from the parent box-sizing
 * Since `*` has a specificity of 0, it does not override the `html` value
 * making all elements inheriting from the root box-sizing value
 * See: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
 */
*,
*::before,
*::after {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}

html,
body {
  width: 100%;
  height: 100%;
  color: #333333;
  font-family: "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  font-weight: normal;
  line-height: 1.5;
}

/**
 * Basic styles for Main
 */
header,
main,
footer {
  width: 100%;
}

/* Anchor */
a {
  text-decoration: none;
  color: #1f1f1f;
  font-family: "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  -webkit-transition: 0.25s ease;
  transition: 0.25s ease;
}

a:hover {
  opacity: 1 !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-transform: capitalize;
  font-weight: bold;
}

h3 {
  line-height: 1.4;
}

/*     
    Name: _typo.scss    
    Author: Zakaria El Khachia
    Client:
*/
/* Font Name */
@font-face {
  font-family: "rational-book";
  src: url("../../assets/fonts/rational/rational-book.woff") format("woff");
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@font-face {
  font-family: "rational-bold";
  src: url("../../assets/fonts/rational/rational-bold.woff") format("woff");
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@font-face {
  font-family: "rational-extra-bold";
  src: url("../../assets/fonts/rational/rational-extra-bold.woff") format("woff");
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.font-zh {
  font-family: "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
}

.font-en {
  font-family: "rational-bold", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
}

.font-en-normal {
  font-family: "rational-bold", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
}

/* Responsive font sizes */
.size-1 {
  font-size: 64px;
}

@media (min-width: 320px) {
  .size-1 {
    font-size: calc(58.5px + 100vw * 0.01719);
  }
}

@media (min-width: 1600px) {
  .size-1 {
    font-size: 86px;
  }
}

.size-2, footer .footer-top .question, #single-product .hero-txt .headline, #single-news .hero-txt .hero-intro, #about .offices .office-item .office-name, #about .offices .offices-content a, #contact .contact-info .info-container h3 {
  font-size: 48px;
}

@media (min-width: 320px) {
  .size-2, footer .footer-top .question, #single-product .hero-txt .headline, #single-news .hero-txt .hero-intro, #about .offices .office-item .office-name, #about .offices .offices-content a, #contact .contact-info .info-container h3 {
    font-size: calc(46px + 100vw * 0.00625);
  }
}

@media (min-width: 1600px) {
  .size-2, footer .footer-top .question, #single-product .hero-txt .headline, #single-news .hero-txt .hero-intro, #about .offices .office-item .office-name, #about .offices .offices-content a, #contact .contact-info .info-container h3 {
    font-size: 56px;
  }
}

.size-3, .headline, .section-title, .testimonials .testimonial-text h2, #single-product .slogan .slogan-wrapper .slogan-top, #single-product .slogan .slogan-wrapper .slogan-bottom span, #contact .form-headline {
  font-size: 36px;
}

@media (min-width: 320px) {
  .size-3, .headline, .section-title, .testimonials .testimonial-text h2, #single-product .slogan .slogan-wrapper .slogan-top, #single-product .slogan .slogan-wrapper .slogan-bottom span, #contact .form-headline {
    font-size: calc(33px + 100vw * 0.00937);
  }
}

@media (min-width: 1600px) {
  .size-3, .headline, .section-title, .testimonials .testimonial-text h2, #single-product .slogan .slogan-wrapper .slogan-top, #single-product .slogan .slogan-wrapper .slogan-bottom span, #contact .form-headline {
    font-size: 48px;
  }
}

.size-4, footer .footer-top .col-wrapper .col a, .news .news-text .news-date div, .projects .item-content-block .item-title, .products .item-content-block .item-title, #home .news .news-text .news-date div, #single-project .project-intro .intro-container .project-intro-wrapper .project-intro, #single-product .product-intro .intro-container .product-intro-wrapper .product-intro, #single-product .slogan .slogan-wrapper .slogan-bottom, #single-product .product-specs .specs-item .specs-content h4, #single-news .hero-txt .news-date div, #single-news .news-article .article-content .heading-block, #single-news .news-article-navigation .news-nav-title h4 {
  font-size: 21px;
}

@media (min-width: 320px) {
  .size-4, footer .footer-top .col-wrapper .col a, .news .news-text .news-date div, .projects .item-content-block .item-title, .products .item-content-block .item-title, #home .news .news-text .news-date div, #single-project .project-intro .intro-container .project-intro-wrapper .project-intro, #single-product .product-intro .intro-container .product-intro-wrapper .product-intro, #single-product .slogan .slogan-wrapper .slogan-bottom, #single-product .product-specs .specs-item .specs-content h4, #single-news .hero-txt .news-date div, #single-news .news-article .article-content .heading-block, #single-news .news-article-navigation .news-nav-title h4 {
    font-size: calc(18.75px + 100vw * 0.00703);
  }
}

@media (min-width: 1600px) {
  .size-4, footer .footer-top .col-wrapper .col a, .news .news-text .news-date div, .projects .item-content-block .item-title, .products .item-content-block .item-title, #home .news .news-text .news-date div, #single-project .project-intro .intro-container .project-intro-wrapper .project-intro, #single-product .product-intro .intro-container .product-intro-wrapper .product-intro, #single-product .slogan .slogan-wrapper .slogan-bottom, #single-product .product-specs .specs-item .specs-content h4, #single-news .hero-txt .news-date div, #single-news .news-article .article-content .heading-block, #single-news .news-article-navigation .news-nav-title h4 {
    font-size: 30px;
  }
}

.size-5, footer .footer-top .answer, .section-intro, .testimonials .testimonial-text .testimonial-desc, .page-intro .intro-content, #single-project .project-intro .intro-container .project-intro-wrapper .project-subintro, #single-project .project-intro .testimonial-container .testimonial, #single-product .product-intro .intro-container .product-intro-wrapper .product-subintro, #single-product .posters .posters-wrapper .poster-content h5, #about .overview .intro, #about .overview .overview-desc .item h4, #about .services .intro, #about .services .service-grid .service-item .item-content h4, #about .offices .office-item .office-desc {
  font-size: 18px;
}

@media (min-width: 320px) {
  .size-5, footer .footer-top .answer, .section-intro, .testimonials .testimonial-text .testimonial-desc, .page-intro .intro-content, #single-project .project-intro .intro-container .project-intro-wrapper .project-subintro, #single-project .project-intro .testimonial-container .testimonial, #single-product .product-intro .intro-container .product-intro-wrapper .product-subintro, #single-product .posters .posters-wrapper .poster-content h5, #about .overview .intro, #about .overview .overview-desc .item h4, #about .services .intro, #about .services .service-grid .service-item .item-content h4, #about .offices .office-item .office-desc {
    font-size: calc(16.5px + 100vw * 0.00469);
  }
}

@media (min-width: 1600px) {
  .size-5, footer .footer-top .answer, .section-intro, .testimonials .testimonial-text .testimonial-desc, .page-intro .intro-content, #single-project .project-intro .intro-container .project-intro-wrapper .project-subintro, #single-project .project-intro .testimonial-container .testimonial, #single-product .product-intro .intro-container .product-intro-wrapper .product-subintro, #single-product .posters .posters-wrapper .poster-content h5, #about .overview .intro, #about .overview .overview-desc .item h4, #about .services .intro, #about .services .service-grid .service-item .item-content h4, #about .offices .office-item .office-desc {
    font-size: 24px;
  }
}

.size-6, html,
body, .stats .single-stat .stat-desc, #single-project .project-intro .testimonial-container .author, #single-product .product-intro .testimonial-container .testimonial, #single-product .product-intro .testimonial-container .author, #single-news .news-article .article-content .paragraph-block, #single-news .news-article-navigation .news-nav-title .next-post-excerpt, #single-news .news-article-navigation .news-nav-title .txt-btn, #about .overview .overview-desc .item p, #contact .form-container .field p {
  font-size: 14px;
}

@media (min-width: 320px) {
  .size-6, html,
  body, .stats .single-stat .stat-desc, #single-project .project-intro .testimonial-container .author, #single-product .product-intro .testimonial-container .testimonial, #single-product .product-intro .testimonial-container .author, #single-news .news-article .article-content .paragraph-block, #single-news .news-article-navigation .news-nav-title .next-post-excerpt, #single-news .news-article-navigation .news-nav-title .txt-btn, #about .overview .overview-desc .item p, #contact .form-container .field p {
    font-size: calc(13px + 100vw * 0.00313);
  }
}

@media (min-width: 1600px) {
  .size-6, html,
  body, .stats .single-stat .stat-desc, #single-project .project-intro .testimonial-container .author, #single-product .product-intro .testimonial-container .testimonial, #single-product .product-intro .testimonial-container .author, #single-news .news-article .article-content .paragraph-block, #single-news .news-article-navigation .news-nav-title .next-post-excerpt, #single-news .news-article-navigation .news-nav-title .txt-btn, #about .overview .overview-desc .item p, #contact .form-container .field p {
    font-size: 18px;
  }
}

.size-7, .nav-wrapper .nav-links .nav-item span, .download-btn, .projects .item-content-block .item-details, #about .services .service-grid .service-item .item-content p, #about .team .member-item .member-content h5, #contact .form-container .field input,
#contact .form-container .field textarea {
  font-size: 14px;
}

@media only screen and (max-width: 1330px) {
  .size-1 {
    font-size: 56px;
  }
}

@media only screen and (max-width: 1330px) and (min-width: 320px) {
  .size-1 {
    font-size: calc(54px + 100vw * 0.00625);
  }
}

@media only screen and (max-width: 1330px) and (min-width: 1600px) {
  .size-1 {
    font-size: 64px;
  }
}

@media only screen and (max-width: 1330px) {
  .size-2, footer .footer-top .question, #single-product .hero-txt .headline, #single-news .hero-txt .hero-intro, #about .offices .office-item .office-name, #about .offices .offices-content a, #contact .contact-info .info-container h3 {
    font-size: 36px;
  }
}

@media only screen and (max-width: 1330px) and (min-width: 320px) {
  .size-2, footer .footer-top .question, #single-product .hero-txt .headline, #single-news .hero-txt .hero-intro, #about .offices .office-item .office-name, #about .offices .offices-content a, #contact .contact-info .info-container h3 {
    font-size: calc(33px + 100vw * 0.00937);
  }
}

@media only screen and (max-width: 1330px) and (min-width: 1600px) {
  .size-2, footer .footer-top .question, #single-product .hero-txt .headline, #single-news .hero-txt .hero-intro, #about .offices .office-item .office-name, #about .offices .offices-content a, #contact .contact-info .info-container h3 {
    font-size: 48px;
  }
}

@media only screen and (max-width: 1330px) {
  .size-3, .headline, .section-title, .testimonials .testimonial-text h2, #single-product .slogan .slogan-wrapper .slogan-top, #single-product .slogan .slogan-wrapper .slogan-bottom span, #contact .form-headline {
    font-size: 28px;
  }
}

@media only screen and (max-width: 1330px) and (min-width: 320px) {
  .size-3, .headline, .section-title, .testimonials .testimonial-text h2, #single-product .slogan .slogan-wrapper .slogan-top, #single-product .slogan .slogan-wrapper .slogan-bottom span, #contact .form-headline {
    font-size: calc(26px + 100vw * 0.00625);
  }
}

@media only screen and (max-width: 1330px) and (min-width: 1600px) {
  .size-3, .headline, .section-title, .testimonials .testimonial-text h2, #single-product .slogan .slogan-wrapper .slogan-top, #single-product .slogan .slogan-wrapper .slogan-bottom span, #contact .form-headline {
    font-size: 36px;
  }
}

@media only screen and (max-width: 1330px) {
  .size-4, footer .footer-top .col-wrapper .col a, .news .news-text .news-date div, .projects .item-content-block .item-title, .products .item-content-block .item-title, #home .news .news-text .news-date div, #single-project .project-intro .intro-container .project-intro-wrapper .project-intro, #single-product .product-intro .intro-container .product-intro-wrapper .product-intro, #single-product .slogan .slogan-wrapper .slogan-bottom, #single-product .product-specs .specs-item .specs-content h4, #single-news .hero-txt .news-date div, #single-news .news-article .article-content .heading-block, #single-news .news-article-navigation .news-nav-title h4 {
    font-size: 21px;
  }
}

@media only screen and (max-width: 1330px) and (min-width: 320px) {
  .size-4, footer .footer-top .col-wrapper .col a, .news .news-text .news-date div, .projects .item-content-block .item-title, .products .item-content-block .item-title, #home .news .news-text .news-date div, #single-project .project-intro .intro-container .project-intro-wrapper .project-intro, #single-product .product-intro .intro-container .product-intro-wrapper .product-intro, #single-product .slogan .slogan-wrapper .slogan-bottom, #single-product .product-specs .specs-item .specs-content h4, #single-news .hero-txt .news-date div, #single-news .news-article .article-content .heading-block, #single-news .news-article-navigation .news-nav-title h4 {
    font-size: calc(20.25px + 100vw * 0.00234);
  }
}

@media only screen and (max-width: 1330px) and (min-width: 1600px) {
  .size-4, footer .footer-top .col-wrapper .col a, .news .news-text .news-date div, .projects .item-content-block .item-title, .products .item-content-block .item-title, #home .news .news-text .news-date div, #single-project .project-intro .intro-container .project-intro-wrapper .project-intro, #single-product .product-intro .intro-container .product-intro-wrapper .product-intro, #single-product .slogan .slogan-wrapper .slogan-bottom, #single-product .product-specs .specs-item .specs-content h4, #single-news .hero-txt .news-date div, #single-news .news-article .article-content .heading-block, #single-news .news-article-navigation .news-nav-title h4 {
    font-size: 24px;
  }
}

@media only screen and (max-width: 1330px) {
  .size-5, footer .footer-top .answer, .section-intro, .testimonials .testimonial-text .testimonial-desc, .page-intro .intro-content, #single-project .project-intro .intro-container .project-intro-wrapper .project-subintro, #single-project .project-intro .testimonial-container .testimonial, #single-product .product-intro .intro-container .product-intro-wrapper .product-subintro, #single-product .posters .posters-wrapper .poster-content h5, #about .overview .intro, #about .overview .overview-desc .item h4, #about .services .intro, #about .services .service-grid .service-item .item-content h4, #about .offices .office-item .office-desc {
    font-size: 21px;
  }
  .size-6, html,
  body, .stats .single-stat .stat-desc, #single-project .project-intro .testimonial-container .author, #single-product .product-intro .testimonial-container .testimonial, #single-product .product-intro .testimonial-container .author, #single-news .news-article .article-content .paragraph-block, #single-news .news-article-navigation .news-nav-title .next-post-excerpt, #single-news .news-article-navigation .news-nav-title .txt-btn, #about .overview .overview-desc .item p, #contact .form-container .field p {
    font-size: 16px;
  }
  .size-7, .nav-wrapper .nav-links .nav-item span, .download-btn, .projects .item-content-block .item-details, #about .services .service-grid .service-item .item-content p, #about .team .member-item .member-content h5, #contact .form-container .field input,
  #contact .form-container .field textarea {
    font-size: 14px;
  }
}

/*     
    Name: _helpers.scss    
    Author: Zakaria El Khachia
    Client:
*/
/**
 * Clear inner floats
 */

.clearfix:after,
.page-content:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix, .page-content {
  display: inline-block;
}

html[xmlns] .clearfix, html[xmlns] .page-content {
  display: block;
}

* html .clearfix, * html .page-content {
  height: 1%;
}

.absolute-center {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.fixed-center {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.neg-z-index {
  z-index: -1;
}

.pos-z-index {
  z-index: 1;
}

.is-visible, .nav-wrapper .nav-links .nav-item:hover > span, #single-product .download-btn.sticky, #about .offices .office-item.active .office-bg,
#about .offices .office-item.active .office-name,
#about .offices .office-item.active .office-desc {
  opacity: 1;
  visibility: visible;
}

.is-hidden, .nav-wrapper .nav-links .nav-item span, #single-product .download-btn, #about .offices .office-item .office-bg {
  opacity: 0;
  visibility: hidden;
}

.ft-en {
  font-family: "rational-bold", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
}

.ft-zh {
  font-family: "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
}

.parallax-background, #single-news .bg, #about .offices .office-item .office-bg, #contact .contact-info {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

@media only screen and (max-width: 768px) {
  .parallax-background, #single-news .bg, #about .offices .office-item .office-bg, #contact .contact-info {
    background-attachment: unset;
  }
}

.full-background, .video-module .video-cover, .testimonials .testimonial-media, .news .news-cover, #home main .welcome, #home .news .news-cover, #single-product .bg {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.contain-background {
  background-size: contain;
  background-repeat: no-repeat;
}

.background-100 {
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
}

.bg-white {
  background-color: #ffffff;
}

.bg-yellow {
  background-color: #ffb400;
}

.bg-dark {
  background-color: #1f1f1f;
}

.bg-gray {
  background-color: #f9f9f9;
}

.highlight {
  color: #ffb400;
  -webkit-transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.highlight-u {
  color: #ffb400;
  text-decoration: underline;
  -webkit-transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.highlight-txt {
  font-family: "rational-bold", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  font-weight: bold;
  -webkit-transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.highlight-bg {
  background: #ffb400;
  background-position: top;
  color: #1f1f1f;
  padding: 4px 4px 2px;
  margin: 0 4px;
  font-family: "rational-bold", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
}

.d-table, .testimonials .testimonial-text, .news .news-text, #home .news .news-text {
  height: 100%;
  display: table;
}

.v-middle {
  display: table-cell;
  vertical-align: middle;
  height: 100%;
}

.no-scroll {
  overflow: hidden;
}

/* Transition CSS FORMAT */
/* Reveal Text */
.reveal-text,
.reveal-text::after {
  -webkit-animation-delay: var(--animation-delay, 2s);
          animation-delay: var(--animation-delay, 2s);
  -webkit-animation-iteration-count: var(--iterations, 1);
          animation-iteration-count: var(--iterations, 1);
  -webkit-animation-duration: var(--duration, 800ms);
          animation-duration: var(--duration, 800ms);
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
          animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.reveal-text {
  --animation-delay: var(--delay, 0);
  --animation-duration: var(--duration, 800ms);
  --animation-iterations: var(--iterations, 1);
  position: relative;
  -webkit-animation-name: clip-text;
          animation-name: clip-text;
  white-space: nowrap;
  opacity: 1 !important;
}

.reveal-text::after {
  content: "";
  position: absolute;
  z-index: 999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: white;
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
          transform-origin: 0 50%;
  pointer-events: none;
  -webkit-animation-name: text-revealer;
          animation-name: text-revealer;
}

/*     
    Name: _media.scss    
    Author: Zakaria El Khachia
    Client:
*/
/*     
    Name: _header.scss    
    Author: Zakaria El Khachia
    Client:
*/
header {
  position: fixed;
  width: 120px;
  height: 100%;
  top: 0;
  z-index: 2;
  /* Nav Open With Observer */
}

header.observer .logo-wrapper {
  width: 120px;
}

header.observer .logo-wrapper svg {
  margin: 1rem 0;
}

@media only screen and (max-width: 768px) {
  header {
    width: 90px;
  }
}

@media only screen and (max-width: 600px) {
  header {
    width: 100%;
    height: 70px;
    -webkit-transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
    transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  }
  header.observer {
    background-color: #f9f9f9;
  }
  header.observer .burger-menu {
    top: 51% !important;
  }
}

header.h-open {
  z-index: 1;
}

header.h-open .logo-wrapper {
  -webkit-transform: translate3d(10px, 20px, 0) !important;
          transform: translate3d(10px, 20px, 0) !important;
}

header.h-open .logo-wrapper svg,
header.h-open .social {
  fill: #ffffff;
}

header.h-open .burger-menu span {
  background-color: #ffffff;
}

header .logo-wrapper {
  width: 120px;
  z-index: 2;
  position: absolute;
  -webkit-transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

@media only screen and (max-width: 768px) {
  header .logo-wrapper {
    width: 140px;
  }
}

@media only screen and (max-width: 600px) {
  header .logo-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    top: 0;
    bottom: 0;
    margin-left: 1rem;
  }
  header .logo-wrapper svg {
    width: 100%;
    margin: auto;
  }
}

header .logo-wrapper svg {
  width: 100%;
  display: block;
  margin: 2rem;
  z-index: 5;
  text-align: center;
  fill: #ffffff;
  -webkit-transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

header .logo-wrapper svg .logo-symbol {
  width: 100%;
  position: relative;
}

header .logo-wrapper svg .logo-txt {
  -webkit-transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  position: relative;
}

header .logo-wrapper svg.observer {
  fill: #1f1f1f;
}

@media only screen and (max-width: 600px) {
  header .logo-wrapper svg.observer {
    width: 105px;
    margin: 0.2rem 1rem;
  }
}

header .logo-wrapper svg.observer .logo-txt {
  opacity: 0;
  visibility: hidden;
}

@media only screen and (max-width: 600px) {
  header .logo-wrapper svg.observer .logo-txt {
    opacity: 1;
    visibility: visible;
  }
}

@media only screen and (max-width: 768px) {
  header .logo-wrapper svg.observer {
    margin: 1.5rem 0;
  }
}

@media only screen and (max-width: 600px) {
  header .logo-wrapper svg.observer {
    margin: 1rem 0;
  }
}

header .logo-wrapper svg:nth-child(2) {
  display: none;
}

header .burger-menu span {
  background-color: #ffffff;
}

header .burger-menu span.observer {
  background-color: #1f1f1f;
}

header .social-wrapper {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  z-index: 2;
  cursor: pointer;
  opacity: 0;
  -webkit-transform: translate3d(-50%, 0, 0);
          transform: translate3d(-50%, 0, 0);
  -webkit-transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

@media only screen and (max-width: 600px) {
  header .social-wrapper {
    position: fixed;
    bottom: 2em;
    left: 3rem;
    z-index: 0;
    opacity: 0;
    visibility: hidden;
  }
}

header .social-wrapper:hover + .qr-code {
  opacity: 1;
  visibility: visible;
}

header .social-wrapper .social {
  width: 30px;
  fill: #ffffff;
  -webkit-transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

header .social-wrapper .social.observer path {
  fill: #1f1f1f;
}

@media only screen and (max-width: 600px) {
  header .social-wrapper .social.observer {
    opacity: 0;
    visibility: hidden;
  }
}

header .qr-code {
  position: absolute;
  left: 75px;
  bottom: 65px;
  width: 200px;
  height: auto;
  opacity: 0;
  visibility: hidden;
  z-index: 1;
  -webkit-transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

header.h-open .logo-wrapper svg {
  fill: #ffffff;
}

header.h-open .logo-wrapper svg.observer {
  fill: #ffffff;
}

header.h-open .social-wrapper .social path {
  fill: #ffffff;
}

header.h-open .social-wrapper .social.observer path {
  fill: #ffffff;
}

header.h-open .burger-menu span {
  background-color: #ffffff;
}

header.h-open .burger-menu span.observer {
  fill: #ffffff;
}

header.light-mode {
  background-color: #ffffff;
  /* Nav Open in Light Mode */
}

header.light-mode .burger-menu span {
  background-color: #1f1f1f;
}

header.light-mode .logo-wrapper svg {
  width: 90px;
  margin: 1rem;
  fill: #1f1f1f;
}

@media only screen and (max-width: 768px) {
  header.light-mode .logo-wrapper svg {
    margin: 1rem 0;
  }
  header.light-mode .logo-wrapper svg .logo-symbol {
    -webkit-transform: scale(1.5) translateX(-18px);
            transform: scale(1.5) translateX(-18px);
  }
  header.light-mode .logo-wrapper svg .logo-txt {
    opacity: 0;
    visibility: hidden;
  }
}

@media only screen and (max-width: 600px) {
  header.light-mode .logo-wrapper svg {
    margin: 0;
  }
  header.light-mode .logo-wrapper svg .logo-symbol {
    -webkit-transform: scale(1) translateX(0);
            transform: scale(1) translateX(0);
  }
  header.light-mode .logo-wrapper svg .logo-txt {
    opacity: 1;
    visibility: visible;
  }
}

header.light-mode .social {
  fill: #1f1f1f;
}

header.light-mode .social path {
  fill: #1f1f1f;
}

header.light-mode.h-open .logo-wrapper svg {
  fill: #ffffff;
}

header.light-mode.h-open .social {
  fill: #ffffff;
}

header.light-mode.h-open .burger-menu span {
  background-color: #ffffff;
}

/*     
    Name: _footer.scss    
    Author: Zakaria El Khachia
    Client:
*/
footer {
  position: relative;
  padding-left: 120px;
  height: auto;
  display: block;
  color: #ffffff;
  font-family: "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  z-index: 0;
  overflow: hidden;
}

@media only screen and (max-width: 768px) {
  footer {
    padding-left: 90px;
  }
}

@media only screen and (max-width: 600px) {
  footer {
    padding-left: 0;
  }
}

footer .footer-top {
  position: relative;
  background: #1f1f1f;
  padding: 8rem 4rem 4rem;
  display: block;
  text-align: center;
}

@media only screen and (max-width: 600px) {
  footer .footer-top {
    padding: 4rem 1rem;
  }
}

footer .footer-top:before {
  content: "";
  display: block;
  top: -15px;
  right: 0;
  position: absolute;
  width: 0;
  height: 0;
  border-bottom: 15px solid #ffb400;
  border-left-color: transparent;
  border-left-style: solid;
  border-left-width: 700px;
}

footer .footer-top > :nth-child(-n + 3) {
  position: relative;
  z-index: 2;
}

footer .footer-top .question {
  font-weight: bold;
}

footer .footer-top .answer {
  width: 80%;
  max-width: 400px;
  margin: 3rem auto 5rem;
  display: block;
}

footer .footer-top .col-wrapper {
  width: 90%;
  max-width: 600px;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

footer .footer-top .col-wrapper .col {
  text-align: center;
}

footer .footer-top .col-wrapper .col span {
  color: #ffb400;
  display: block;
  margin-bottom: 1rem;
}

footer .footer-top .col-wrapper .col a {
  color: #ffffff;
  display: block;
}

footer .footer-top .col-wrapper .col a:hover {
  color: #ffb400;
}

footer .footer-top #footer-shape {
  height: 80%;
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  display: block;
  margin: auto;
}

footer .footer-top #footer-shape #star-2 {
  opacity: 0;
}

footer .footer-bottom {
  background: #000000;
  width: 100%;
  height: 100%;
  padding: 2rem 3rem;
  font-size: 12px;
  display: table;
  font-family: "rational-book", Arial, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  color: #9f9f9f;
}

@media only screen and (max-width: 600px) {
  footer .footer-bottom {
    padding: 1rem;
  }
}

footer .footer-bottom .social-footer {
  display: none;
}

@media only screen and (max-width: 600px) {
  footer .footer-bottom .social-footer {
    display: block;
    width: 100%;
    height: 60px;
    padding: 1rem 0;
    z-index: 10000;
  }
}

footer .footer-bottom .social-footer .social {
  fill: #ffffff;
  width: 2rem;
  display: block;
  margin: auto;
}

footer .footer-bottom .social-footer .qr-code {
  position: absolute;
  left: 50%;
  bottom: 30%;
  -webkit-transform: translate(-50%, 20%);
          transform: translate(-50%, 20%);
  width: 200px;
  height: auto;
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

footer .footer-bottom .social-footer .qr-code.visible {
  opacity: 1;
  visibility: visible;
}

footer .footer-bottom .col-wrapper .col p {
  display: block;
  margin: auto;
}

footer .footer-bottom .col-wrapper .col:nth-child(2) {
  text-align: right;
}

@media only screen and (max-width: 600px) {
  footer .footer-bottom .col-wrapper .col {
    width: 100%;
    text-align: center;
  }
  footer .footer-bottom .col-wrapper .col:nth-child(2) {
    margin-top: 0.5rem;
    text-align: center;
  }
}

footer .to-top {
  position: absolute;
  right: 1rem;
  bottom: 20rem;
  color: #ffffff;
  font-family: "rational-bold", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  scroll-behavior: smooth;
}

@media only screen and (max-width: 600px) {
  footer .to-top {
    display: none;
  }
}

/*     
    Name: _nav.scss    
    Author: Zakaria El Khachia
    Client:
*/
/* Nav Toggle */
.burger-menu {
  position: absolute;
  width: 30px;
  height: 24px;
  cursor: pointer;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -15px);
          transform: translate(-50%, -15px);
  z-index: 2;
  -webkit-transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

@media only screen and (max-width: 600px) {
  .burger-menu {
    top: 50%;
    -webkit-transform: translate(-50%, -11px);
            transform: translate(-50%, -11px);
    left: calc(100% - 2.5rem);
    width: 26px;
  }
}

.burger-menu span {
  width: 100%;
  background-color: #ffffff;
  height: 2px;
  display: block;
  position: absolute;
  -webkit-transition: all 0.25s ease-out;
  transition: all 0.25s ease-out;
  -webkit-transform-origin: right;
          transform-origin: right;
}

.burger-menu span:nth-child(2) {
  width: 80%;
  top: 11px;
}

.burger-menu span:nth-child(3) {
  width: 60%;
  bottom: 0;
}

@media only screen and (max-width: 600px) {
  .burger-menu span:nth-child(2), .burger-menu span:nth-child(3) {
    width: 100%;
  }
}

.burger-menu.open {
  z-index: 2;
}

.burger-menu.open span {
  width: 100% !important;
  -webkit-transform-origin: right;
          transform-origin: right;
  background-color: color(sec);
}

.burger-menu.open span:nth-child(1) {
  -webkit-transform: rotate(-45deg) translate3d(0, 0, 0);
          transform: rotate(-45deg) translate3d(0, 0, 0);
}

.burger-menu.open span:nth-child(2) {
  opacity: 0;
}

.burger-menu.open span:nth-child(3) {
  margin-top: 0;
  bottom: 1px;
  -webkit-transform: rotate(45deg) translate3d(0, 0, 0);
          transform: rotate(45deg) translate3d(0, 0, 0);
}

@media only screen and (max-width: 600px) {
  .burger-menu.open span:nth-child(1) {
    -webkit-transform: rotate(-45deg) translate(-1px, 1px);
            transform: rotate(-45deg) translate(-1px, 1px);
  }
  .burger-menu.open span:nth-child(3) {
    margin-top: 0;
    bottom: 1px;
    -webkit-transform: rotate(45deg) translate(-1px, -1px);
            transform: rotate(45deg) translate(-1px, -1px);
  }
}

@media (min-width: 800px) {
  .burger-menu.open:hover span:nth-child(1) {
    -webkit-transform: rotate(0) translate3d(3px, 10px, 0);
            transform: rotate(0) translate3d(3px, 10px, 0);
    -webkit-transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  }
  .burger-menu.open:hover span:nth-child(3) {
    -webkit-transform: rotate(0) translate3d(3px, -10px, 0);
            transform: rotate(0) translate3d(3px, -10px, 0);
    -webkit-transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  }
}

.burger-menu:hover span:nth-child(2),
.burger-menu:hover span:nth-child(3) {
  width: 100% !important;
}

/* Nav Menu */
.nav-wrapper {
  width: 100%;
  height: 100%;
  position: fixed;
  background: #101010;
  opacity: 1;
  z-index: 1;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
  -webkit-transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
  transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.nav-wrapper.nav-open {
  -webkit-transform: translateX(0);
          transform: translateX(0);
  -webkit-transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
  transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
  background-blend-mode: multiply;
}

.nav-wrapper.nav-open .nav-links {
  opacity: 1;
}

.nav-wrapper.nav-open .nav-footer .nav-lang-switch {
  opacity: 1;
}

.nav-wrapper .nav-container {
  width: 100%;
  height: 100%;
  position: relative;
}

.nav-wrapper .nav-links {
  position: absolute;
  width: 100%;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  margin: auto;
  display: block;
  text-align: center;
  -webkit-transition: all 0.5s ease 0.2s;
  transition: all 0.5s ease 0.2s;
  opacity: 0;
}

@media only screen and (max-width: 600px) {
  .nav-wrapper .nav-links {
    top: 55%;
  }
}

.nav-wrapper .nav-links .nav-item {
  position: relative;
  font-size: 36px;
  line-height: 82px;
  display: inline-block;
  color: #ffffff;
  font-weight: bold;
  margin-right: 6%;
}

@media (min-width: 320px) {
  .nav-wrapper .nav-links .nav-item {
    font-size: calc(33px + 100vw * 0.00937);
  }
}

@media (min-width: 1600px) {
  .nav-wrapper .nav-links .nav-item {
    font-size: 48px;
  }
}

.nav-wrapper .nav-links .nav-item:last-child {
  margin-right: 0;
}

@media only screen and (max-width: 1330px) {
  .nav-wrapper .nav-links .nav-item {
    display: table;
    margin: 0 auto 2rem;
  }
  .nav-wrapper .nav-links .nav-item:last-child {
    margin: 0 auto;
  }
}

@media only screen and (max-width: 768px) {
  .nav-wrapper .nav-links .nav-item {
    margin: auto;
  }
  .nav-wrapper .nav-links .nav-item:last-child {
    margin: auto;
  }
}

@media only screen and (max-width: 600px) {
  .nav-wrapper .nav-links .nav-item {
    margin: auto 0 auto 1.8rem;
  }
  .nav-wrapper .nav-links .nav-item:last-child {
    margin: auto 0 auto 1.8rem;
  }
}

.nav-wrapper .nav-links .nav-item span {
  position: absolute;
  left: -1rem;
  bottom: -4rem;
  color: #ffb400;
  -webkit-transition: slideLink 1s cubic-bezier(0.075, 0.82, 0.165, 1), opacity 0.25s cubic-bezier(0.19, 1, 0.22, 1);
  transition: slideLink 1s cubic-bezier(0.075, 0.82, 0.165, 1), opacity 0.25s cubic-bezier(0.19, 1, 0.22, 1);
}

@media only screen and (max-width: 1330px) {
  .nav-wrapper .nav-links .nav-item span {
    bottom: -3rem;
  }
}

.nav-wrapper .nav-links .nav-item span:after {
  content: "";
  background-image: url("../img/svg/arrow-nav.svg");
  background-size: 100%;
  background-repeat: no-repeat;
  width: 30px;
  height: 30px;
  display: inline-block;
  position: absolute;
  margin-left: 10px;
  top: 50%;
  -webkit-transform: translateY(-4px);
          transform: translateY(-4px);
}

.nav-wrapper .nav-links .nav-item:hover {
  color: #ffb400;
}

.nav-wrapper .nav-links .nav-item:hover > span {
  -webkit-animation: 2s cubic-bezier(0.165, 0.84, 0.44, 1) forwards slideLink;
          animation: 2s cubic-bezier(0.165, 0.84, 0.44, 1) forwards slideLink;
  left: 0rem;
}

@media only screen and (max-width: 768px) {
  .nav-wrapper .nav-links .nav-item:hover > span {
    opacity: 0;
    visibility: hidden;
  }
}

.nav-wrapper .nav-footer {
  position: absolute;
  width: 95%;
  bottom: 0;
  padding: 1.5rem;
  display: block;
  margin: auto;
  left: 0;
  right: 0;
}

.nav-wrapper .nav-footer .social {
  left: 0.5rem;
  bottom: 1.1rem;
  position: absolute;
}

.nav-wrapper .nav-footer .btn {
  position: relative;
  margin: auto;
}

.nav-wrapper .nav-footer .nav-lang-switch {
  position: absolute;
  bottom: 2.4rem;
  right: 2rem;
  opacity: 0;
  -webkit-transition: all 0.5s ease 0.5s;
  transition: all 0.5s ease 0.5s;
}

.nav-wrapper .nav-footer .nav-lang-switch > * {
  margin: 0;
}

.nav-wrapper .nav-footer .nav-lang-switch > * + * {
  margin-left: 8px;
}

.nav-wrapper .nav-footer .nav-lang-switch a {
  color: #ffffff;
  font-weight: bold;
  display: inline;
}

@media only screen and (max-width: 600px) {
  .nav-wrapper .nav-footer .nav-lang-switch {
    top: 50%;
    right: 20px;
    -webkit-transform: translateY(50%);
    transform: translateY(-60px);
    position: fixed;
  }
  .nav-wrapper .nav-footer .nav-lang-switch a {
    display: block;
    margin: 0 0 1rem 0;
    text-align: center;
  }
}

/*     
    Name: _common.scss    
    Author: Zakaria El Khachia
    Client:
*/
.page-content {
  width: 100%;
  height: 100%;
}

.content-wrapper {
  margin-left: 120px;
  overflow: hidden;
}

@media only screen and (max-width: 768px) {
  .content-wrapper {
    margin-left: 90px;
  }
}

@media only screen and (max-width: 600px) {
  .content-wrapper {
    margin-left: 0;
  }
}

.content-wrapper section {
  position: relative;
  padding-top: 160px;
  padding-bottom: 160px;
}

@media only screen and (max-width: 1330px) {
  .content-wrapper section {
    padding-top: 120px;
    padding-bottom: 120px;
  }
}

.boxed {
  padding-left: 4rem;
  padding-right: 4rem;
}

@media only screen and (max-width: 1330px) {
  .boxed {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}

@media only screen and (max-width: 600px) {
  .boxed {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.full {
  padding-left: 0px;
  padding-right: 0px;
}

.headline {
  display: inline-block;
  margin-bottom: 1.2rem;
}

.intro-text {
  width: 50%;
}

@media only screen and (max-width: 600px) {
  .intro-text {
    width: 100%;
  }
}

.section-intro {
  margin: 2rem 0 4rem 2rem;
}

@media only screen and (max-width: 768px) {
  .section-intro {
    margin: 2rem 0 4rem;
  }
}

.diagonal-dark {
  background: #1f1f1f;
  margin: 15px auto;
}

.diagonal-dark:before {
  content: "";
  display: block;
  top: -15px;
  right: 0;
  position: absolute;
  width: 0;
  height: 0;
  border-bottom: 15px solid #1f1f1f;
  border-left: 1600px solid transparent;
}

.diagonal-dark:after {
  content: "";
  display: block;
  bottom: -15px;
  right: 0;
  position: absolute;
  width: 0;
  height: 0;
  z-index: 1;
  border-top: 15px solid #1f1f1f;
  border-right: 1600px solid transparent;
}

.diagonal-gray {
  background: #f9f9f9;
  margin: 15px auto;
}

.diagonal-gray:before {
  content: "";
  display: block;
  top: -15px;
  right: 0;
  position: absolute;
  width: 0;
  height: 0;
  border-bottom: 15px solid #f9f9f9;
  border-left: 1600px solid transparent;
}

.diagonal-gray:after {
  content: "";
  display: block;
  bottom: -15px;
  right: 0;
  position: absolute;
  width: 0;
  height: 0;
  z-index: 1;
  border-top: 15px solid transparent;
  border-right: 1600px solid transparent;
}

.left-m img,
.right-m img {
  width: 100%;
}

.bg-shape {
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: -6rem;
  right: -16rem;
  opacity: 0.1;
  z-index: -1;
  fill: #b1b1b1;
}

@media only screen and (max-width: 600px) {
  .bg-shape {
    width: 150%;
    height: 150%;
    bottom: -10rem;
    right: -10rem;
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
  }
}

.bg-shape #bg-02 {
  opacity: 0;
}

.filter-bg {
  position: absolute;
  background-color: #1f1f1f;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0.3;
  background-blend-mode: multiply;
}

.filter-dark {
  position: absolute;
  background-color: #1f1f1f;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0.6;
  background-blend-mode: multiply;
}

/*     
    Name: _grid.scss    
    Author: Zakaria El Khachia
    Client:
*/
/* Grid System */
.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: 0 auto;
  max-width: 1140px;
}

.container-s {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: 0 auto;
  max-width: 800px;
}

.container-l {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: 0 auto;
  max-width: 100%;
}

.col-1 {
  -ms-flex-preferred-size: 8.33333%;
      flex-basis: 8.33333%;
}

@media only screen and (max-width: 768px) {
  .col-1 {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
  }
}

.col-2 {
  -ms-flex-preferred-size: 16.66667%;
      flex-basis: 16.66667%;
}

@media only screen and (max-width: 768px) {
  .col-2 {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
  }
}

.col-3 {
  -ms-flex-preferred-size: 25%;
      flex-basis: 25%;
}

@media only screen and (max-width: 768px) {
  .col-3 {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
  }
}

.col-4 {
  -ms-flex-preferred-size: 33.33333%;
      flex-basis: 33.33333%;
}

@media only screen and (max-width: 768px) {
  .col-4 {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
  }
}

.col-5 {
  -ms-flex-preferred-size: 41.66667%;
      flex-basis: 41.66667%;
}

@media only screen and (max-width: 768px) {
  .col-5 {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
  }
}

.col-6 {
  -ms-flex-preferred-size: 50%;
      flex-basis: 50%;
}

@media only screen and (max-width: 768px) {
  .col-6 {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
  }
}

.col-7 {
  -ms-flex-preferred-size: 58.33333%;
      flex-basis: 58.33333%;
}

@media only screen and (max-width: 768px) {
  .col-7 {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
  }
}

.col-8 {
  -ms-flex-preferred-size: 66.66667%;
      flex-basis: 66.66667%;
}

@media only screen and (max-width: 768px) {
  .col-8 {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
  }
}

.col-9 {
  -ms-flex-preferred-size: 75%;
      flex-basis: 75%;
}

@media only screen and (max-width: 768px) {
  .col-9 {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
  }
}

.col-10 {
  -ms-flex-preferred-size: 83.33333%;
      flex-basis: 83.33333%;
}

@media only screen and (max-width: 768px) {
  .col-10 {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
  }
}

.col-11 {
  -ms-flex-preferred-size: 91.66667%;
      flex-basis: 91.66667%;
}

@media only screen and (max-width: 768px) {
  .col-11 {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
  }
}

.col-12 {
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
}

@media only screen and (max-width: 768px) {
  .col-12 {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
  }
}

/* Floated Columns */
.col-wrapper {
  position: relative;
}

.col {
  position: relative;
  width: calc(100% * 1 / 2);
}

.col:nth-child(2n + 1) {
  clear: both;
  float: left;
}

.col:nth-child(2n + 2) {
  clear: none;
  float: right;
}

/* Col Padding */
.left-t,
.left-m {
  padding-right: 5%;
}

@media only screen and (max-width: 768px) {
  .left-t,
  .left-m {
    padding-right: 0;
  }
}

.right-t,
.right-m {
  padding-left: 5%;
}

@media only screen and (max-width: 768px) {
  .right-t,
  .right-m {
    padding-left: 0;
  }
}

/*     
    Name: _home.scss    
    Author: TrioTech
    Client:
*/
.loader {
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  top: 0;
  left: 0;
}

.loader .bg-yellow {
  background-color: #ffb400;
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: 12;
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transform-origin: left center;
          transform-origin: left center;
}

.loader .bg-gray {
  background-color: #333333;
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: 11;
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transform-origin: left center;
          transform-origin: left center;
}

.loader .bg-gray.off,
.loader .bg-yellow.off {
  -webkit-transform: translate3d(100%, 0, 0);
          transform: translate3d(100%, 0, 0);
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.loader .loader-container {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-animation: pulse 2s ease infinite;
          animation: pulse 2s ease infinite;
  z-index: 15;
}

.loader .loader-container svg {
  width: 250px;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

@media only screen and (max-width: 600px) {
  .loader .loader-container svg {
    width: 160px;
  }
}

.loader .loader-container.active svg {
  -webkit-animation: play1 2.8s steps(46) infinite;
          animation: play1 2.8s steps(46) infinite;
}

@-webkit-keyframes play1 {
  100% {
    background-position-y: -32425px;
  }
}

@keyframes play1 {
  100% {
    background-position-y: -32425px;
  }
}

@-webkit-keyframes play {
  100% {
    background-position-y: -17992px;
  }
}

@keyframes play {
  100% {
    background-position-y: -17992px;
  }
}

/*     
    Name: _button.scss    
    Author: Zakaria El Khachia
    Client:
*/
/* Button */
svg,
.label,
.arrow {
  pointer-events: none;
}

.btn {
  width: 160px;
  height: 56px;
  display: block;
  background: none;
  overflow: hidden;
  position: relative;
  /* Yellow Button */
  /* Dark Button */
  /* White Button */
  /* Button Hover */
}

@media only screen and (max-width: 600px) {
  .btn {
    width: 140px;
    height: 48px;
  }
}

.btn svg {
  position: absolute;
}

.btn.yellow {
  /* Hover - Focus */
}

.btn.yellow .btn-main {
  stroke: #ffb400;
}

.btn.yellow .btn-box,
.btn.yellow #rec {
  fill: #ffb400;
}

.btn.yellow .arrow path {
  fill: #1f1f1f;
}

.btn.yellow .label {
  color: #ffb400;
}

.btn.yellow:hover .arrow path, .btn.yellow.active .arrow path {
  fill: #ffffff;
}

.btn.yellow:hover .label, .btn.yellow.active .label {
  color: #ffffff;
}

.btn.dark {
  /* Hover - Focus */
}

.btn.dark .btn-main {
  stroke: #1f1f1f;
}

.btn.dark .btn-box,
.btn.dark #rec {
  fill: #1f1f1f;
}

.btn.dark .arrow path {
  fill: #ffffff;
}

.btn.dark .label {
  color: #1f1f1f;
}

.btn.dark:hover .label, .btn.dark.active .label {
  color: #ffffff;
}

.btn.white {
  /* Hover - Focus */
}

.btn.white .btn-main {
  stroke: #ffffff;
}

.btn.white .btn-box,
.btn.white #rec {
  fill: #ffffff;
}

.btn.white .arrow path {
  fill: #1f1f1f;
}

.btn.white .label {
  color: #ffffff;
}

.btn.white:hover .label, .btn.white.active .label {
  color: #1f1f1f;
}

.btn .label-center {
  position: absolute;
  display: block;
  margin: auto;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-28px, -11px);
          transform: translate(-28px, -11px);
  text-align: center;
  font-size: 14px;
}

.btn .arrow {
  position: absolute;
  top: 50%;
  right: 15px;
  width: 25px;
  -webkit-transform: translateY(-6px);
          transform: translateY(-6px);
  -webkit-transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.btn .btn-main {
  fill: none;
  stroke-miterlimit: 10;
  stroke-width: 2px;
}

.btn #rect {
  width: 35%;
  -webkit-transition: width 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: width 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.btn .arrow {
  left: 15px;
  -webkit-transition: left 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: left 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

@media only screen and (max-width: 600px) {
  .btn .arrow {
    left: 13px;
  }
}

.btn .arrow path {
  -webkit-transition: fill 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: fill 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.btn .arrow.arrow-video {
  left: 23px;
  -webkit-transform: translateY(-10px);
          transform: translateY(-10px);
}

.btn .label {
  position: absolute;
  display: block;
  margin: auto;
  width: 65%;
  top: 50%;
  left: 37%;
  -webkit-transform: translate(-4px, -13px);
          transform: translate(-4px, -13px);
  text-align: center;
  font-size: 16px;
  -webkit-transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

@media only screen and (max-width: 600px) {
  .btn .label {
    font-size: 14px;
  }
}

.btn:hover #rect, .btn.active #rect {
  width: 100%;
}

.btn:hover .arrow, .btn.active .arrow {
  left: 25px;
}

.btn:hover .arrow.arrow-video, .btn.active .arrow.arrow-video {
  left: 30px;
}

.btn.btn-video {
  position: absolute;
  display: block;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 2;
}

/* Text Button */
.txt-btn {
  position: relative;
  font-weight: 600;
  -webkit-transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.txt-btn .arrow {
  position: absolute;
  margin-left: 0.7rem;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  -webkit-transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.txt-btn:hover {
  color: #ffb400;
}

.txt-btn:hover .arrow {
  margin-left: 0.8rem;
}

/* Single Arrow */
.arrow {
  width: 28px;
  height: auto;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
}

.arrow.left {
  -webkit-transform: rotate(-180deg);
          transform: rotate(-180deg);
}

.arrow.top {
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
}

.arrow.bottom {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

.arrow.white path {
  fill: #ffffff !important;
}

.arrow.dark path {
  fill: #000000 !important;
}

.arrow.yellow path {
  fill: #ffb400 !important;
}

/* Action wrapper - For Buttons */
.action {
  cursor: pointer;
}

/* Download Button */
.download-btn {
  padding: 1rem 2rem;
  background-color: #ffb400;
  color: #1f1f1f;
  text-align: center;
  font-weight: bold;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  z-index: 1;
  -webkit-transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.download-btn svg {
  display: inline-block;
  vertical-align: middle;
  fill: #1f1f1f;
  width: 15px;
  margin: 0 0 0 10px;
  -webkit-transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.download-btn:hover {
  background-color: #1f1f1f;
  color: #ffb400;
}

.download-btn:hover svg {
  fill: #ffb400;
}

/* Scroll Down Button */
.scroll-wrapper {
  position: absolute;
  bottom: 2.6rem;
  left: 50%;
}

.scroll-wrapper .scroll-down {
  width: 0;
  height: 0;
  position: absolute;
  bottom: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 10px solid #ffb400;
  margin: auto;
  cursor: pointer;
  -webkit-transition: 0.5s opacity 0.1s, 0.75s -webkit-transform cubic-bezier(0.32, 1.01, 0.35, 1.01);
  transition: 0.5s opacity 0.1s, 0.75s -webkit-transform cubic-bezier(0.32, 1.01, 0.35, 1.01);
  transition: 0.75s transform cubic-bezier(0.32, 1.01, 0.35, 1.01), 0.5s opacity 0.1s;
  transition: 0.75s transform cubic-bezier(0.32, 1.01, 0.35, 1.01), 0.5s opacity 0.1s, 0.75s -webkit-transform cubic-bezier(0.32, 1.01, 0.35, 1.01);
  -webkit-animation: chevronBounce 0.75s 1s infinite;
          animation: chevronBounce 0.75s 1s infinite;
}

/*     
    Name: _nav.scss    
    Author: Zakaria El Khachia
    Client:
*/
.video-wrapper {
  position: relative;
  overflow: hidden;
}

.video-modal {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  z-index: 1000;
  display: table;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: rgba(2, 2, 2, 0.88);
  -webkit-transition: 0.25s all ease-out;
  transition: 0.25s all ease-out;
}

.close-modal {
  position: absolute;
  top: 30px;
  right: 25px;
  z-index: 2;
  cursor: pointer;
}

.close-modal:hover span:first-child {
  -webkit-transform: rotate(0) translate3d(2px, 11px, 0px);
          transform: rotate(0) translate3d(2px, 11px, 0px);
}

.close-modal:hover span:last-child {
  -webkit-transform: rotate(0) translate3d(2px, -11px, 0px);
          transform: rotate(0) translate3d(2px, -11px, 0px);
}

.close-modal span {
  width: 31px;
  height: 2px;
  background: #fff;
  -webkit-transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  -webkit-transform-origin: right;
          transform-origin: right;
  display: block;
}

.close-modal span:first-child {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  margin-bottom: 20px;
}

.close-modal span:last-child {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

.video-modal-inner {
  width: 100%;
  height: 100%;
  display: table-cell;
  vertical-align: middle;
}

.player {
  width: 90%;
  border: 5px solid rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
          box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  background: #000;
  position: relative;
  font-size: 0;
  overflow: hidden;
  margin: auto;
}

/* This css is only applied when fullscreen is active. */
.player:-webkit-full-screen {
  max-width: none;
  width: 100%;
}
.player:-moz-full-screen {
  max-width: none;
  width: 100%;
}
.player:-ms-fullscreen {
  max-width: none;
  width: 100%;
}
.player:fullscreen {
  max-width: none;
  width: 100%;
}

.player:-webkit-full-screen {
  max-width: none;
  width: 100%;
}

.player__video {
  width: 100%;
  max-height: 100vh;
}

.player__button {
  background: none;
  border: 0;
  line-height: 1;
  color: white;
  text-align: center;
  outline: 0;
  padding: 0;
  cursor: pointer;
  max-width: 50px;
}

.player__button:focus {
  border-color: #ffc600;
}

.player__slider {
  width: 10px;
  height: 30px;
}

.player__controls {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  bottom: 0;
  width: 100%;
  -webkit-transform: translateY(100%) translateY(-5px);
          transform: translateY(100%) translateY(-5px);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  background: rgba(0, 0, 0, 0.1);
}

.player:hover .player__controls {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.player:hover .progress {
  height: 15px;
}

.player__controls > * {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.progress {
  -webkit-box-flex: 10;
      -ms-flex: 10;
          flex: 10;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
  height: 5px;
  -webkit-transition: height 0.3s;
  transition: height 0.3s;
  background: rgba(0, 0, 0, 0.5);
  cursor: ew-resize;
}

.progress__filled {
  width: 50%;
  background: #ffc600;
  -webkit-box-flex: 0;
      -ms-flex: 0;
          flex: 0;
  -ms-flex-preferred-size: 50%;
      flex-basis: 50%;
}

/* unholy css to style input type="range" */
input[type="range"] {
  -webkit-appearance: none;
  background: transparent;
  width: 100%;
  margin: 0 5px;
}

input[type="range"]:focus {
  outline: none;
}

input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0 0 1px rgba(13, 13, 13, 0);
          box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0 0 1px rgba(13, 13, 13, 0);
  background: rgba(255, 255, 255, 0.8);
  border-radius: 1.3px;
  border: 0.2px solid rgba(1, 1, 1, 0);
}

input[type="range"]::-webkit-slider-thumb {
  height: 15px;
  width: 15px;
  border-radius: 50px;
  background: #ffc600;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -3.5px;
  -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
          box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
}

input[type="range"]:focus::-webkit-slider-runnable-track {
  background: #bada55;
}

input[type="range"]::-moz-range-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0 0 1px rgba(13, 13, 13, 0);
  background: #ffffff;
  border-radius: 1.3px;
  border: 0.2px solid rgba(1, 1, 1, 0);
}

input[type="range"]::-moz-range-thumb {
  box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(13, 13, 13, 0);
  height: 15px;
  width: 15px;
  border-radius: 50px;
  background: #ffc600;
  cursor: pointer;
}

/* Video Module */
.video-module {
  width: 100%;
  height: 100%;
  background-color: #111111;
}

.video-module .video-cover {
  width: 100%;
  height: 70vh;
  max-height: 500px;
}

.video-module .video-cover.full-cover {
  height: 80vh;
  margin: auto;
  max-height: unset;
}

/*     
    Name: _slider.scss    
    Author: Zakaria El Khachia
    Client:
*/
/* Classic Slider */
.slider-container {
  width: 100%;
  height: 100%;
  padding-bottom: 50%;
  position: relative;
  overflow: hidden;
}

@media only screen and (max-width: 1330px) {
  .slider-container {
    padding-bottom: 60%;
  }
}

.slider-container .slider-overlay {
  width: 100%;
  height: 100%;
  background: black;
  background-blend-mode: multiply;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.1;
  z-index: 1;
}

.slider-container .slider {
  position: absolute;
  background: black;
  margin: 0;
  padding: 0;
  left: 0;
  list-style: none;
  width: 100%;
  height: 100%;
  -webkit-transition: 0.5s -webkit-transform cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: 0.5s -webkit-transform cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: 0.5s transform cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: 0.5s transform cubic-bezier(0.165, 0.84, 0.44, 1), 0.5s -webkit-transform cubic-bezier(0.165, 0.84, 0.44, 1);
}

.slider-container .slider .slide {
  width: 100%;
  height: 100%;
  display: block;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
}

.slider-container .slider .slide .slide-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.slider-nav {
  position: relative;
  display: block;
  text-align: left;
  margin-top: 1rem;
}

.slider-nav button {
  background-image: url("../img/svg/chevron.svg");
  background-size: 20px;
  background-position: 55% 50%;
  background-repeat: no-repeat;
  border: 1px solid #1f1f1f;
  width: 2.5rem;
  height: 2.5rem;
  display: inline-block;
  cursor: pointer;
  z-index: 2;
  -webkit-transition: all cubic-bezier(0.645, 0.045, 0.355, 1) 0.25s;
  transition: all cubic-bezier(0.645, 0.045, 0.355, 1) 0.25s;
  outline: none;
}

.slider-nav button:hover {
  background-color: color(sec);
  background-image: url("../img/svg/chevron-b.svg");
}

@media only screen and (max-width: 768px) {
  .slider-nav button {
    background-size: 15px;
    width: 40px;
    height: 40px;
  }
}

@media only screen and (max-width: 600px) {
  .slider-nav button {
    background-size: 10px;
    width: 30px;
    height: 30px;
  }
}

.slider-nav .__prev {
  -webkit-transform: rotate(-180deg);
          transform: rotate(-180deg);
  background-color: #1f1f1f;
}

.slider-nav .__next {
  background-color: #1f1f1f;
}

.slider-nav .is-off {
  background-color: color(sec);
  background-image: url("../img/svg/chevron-b.svg");
}

/* Auto Moving Slider */
.moving-slider {
  width: 90%;
  height: 100%;
  position: relative;
  margin-right: -70px;
  float: right;
}

@media only screen and (max-width: 1330px) {
  .moving-slider {
    width: 100%;
    height: 100%;
  }
}

@media only screen and (max-width: 768px) {
  .moving-slider {
    float: none;
    margin: auto;
  }
}

.moving-slider .slider-content {
  height: 80vh;
  position: relative;
  overflow: hidden;
}

@media only screen and (max-width: 1330px) {
  .moving-slider .slider-content {
    height: 60vh;
  }
}

@media only screen and (max-width: 768px) {
  .moving-slider .slider-content {
    height: 40vh;
  }
}

@media only screen and (max-width: 600px) {
  .moving-slider .slider-content {
    height: 35vh;
    max-height: 300px;
  }
}

.moving-slider .slider-content .slide {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 100%;
  left: -5em;
  opacity: 0;
  position: absolute;
  top: 0;
  -webkit-transition: opacity 750ms linear, -webkit-transform 5s 0.75s linear;
  transition: opacity 750ms linear, -webkit-transform 5s 0.75s linear;
  transition: opacity 750ms linear, transform 5s 0.75s linear;
  transition: opacity 750ms linear, transform 5s 0.75s linear, -webkit-transform 5s 0.75s linear;
  will-change: opacity, transform;
  width: calc(100% + 7em);
}

.moving-slider .slider-content .slide.displayed {
  opacity: 1;
  -webkit-transform: translate(5em, 0);
          transform: translate(5em, 0);
  -webkit-transition: opacity 750ms linear, -webkit-transform 15s linear;
  transition: opacity 750ms linear, -webkit-transform 15s linear;
  transition: opacity 750ms linear, transform 15s linear;
  transition: opacity 750ms linear, transform 15s linear, -webkit-transform 15s linear;
}

/*     
    Name: _gallery.scss    
    Author: Zakaria El Khachia
*/
.gallery {
  background-color: #111111;
}

.gallery.dark {
  background-color: #1f1f1f;
}

.gallery.light {
  background-color: #f9f9f9;
}

.gallery.white {
  background-color: #ffffff;
}

.gallery .masonry-grid {
  margin: 0 auto;
}

/*     
    Name: _testimonials.scss    
    Author: Zakaria El Khachia
    Client:
*/
.testimonials {
  background-color: #f9f9f9;
}

.testimonials .intro {
  margin-bottom: 3rem;
}

@media only screen and (max-width: 600px) {
  .testimonials .intro {
    margin-bottom: 0;
  }
}

.testimonials .intro-txt {
  max-width: 400px;
}

.testimonials .testimonial-text {
  margin: 0 auto;
  width: 80%;
}

@media only screen and (max-width: 768px) {
  .testimonials .testimonial-text {
    margin-top: 1rem;
    width: 100%;
  }
}

.testimonials .testimonial-text.f-width {
  text-align: center;
  max-width: 650px;
}

@media only screen and (max-width: 1330px) {
  .testimonials .testimonial-text.f-width {
    max-width: 550px;
  }
}

.testimonials .testimonial-text.s-width {
  max-width: 500px;
  min-width: 300px;
}

.testimonials .testimonial-text h2 {
  margin-bottom: 2rem;
}

.testimonials .testimonial-text .testimonial-desc {
  position: relative;
  line-height: 1.7;
  margin-bottom: 1.5rem;
  width: 100%;
}

.testimonials .testimonial-text .testimonial-desc:before {
  content: "";
  position: absolute;
  display: block;
  top: -1rem;
  left: -3rem;
  width: 30px;
  height: 33px;
  background-image: url("../img/svg/quote-icon.svg");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
}

@media only screen and (max-width: 768px) {
  .testimonials .testimonial-text .testimonial-desc:before {
    top: -2.5rem;
    left: -3.5rem;
    opacity: 0;
  }
}

@media only screen and (max-width: 600px) {
  .testimonials .testimonial-text .testimonial-desc:before {
    top: -3rem;
    left: -0.5rem;
    width: 30px;
    height: 33px;
  }
}

.testimonials .testimonial-text .testimonial-author {
  position: relative;
  color: #666666;
}

.testimonials .testimonial-text .testimonial-author:before {
  content: "";
  position: absolute;
  display: block;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  left: -4rem;
  width: 40px;
  height: 1px;
  background-color: #666666;
}

@media only screen and (max-width: 600px) {
  .testimonials .testimonial-text .size-5, .testimonials .testimonial-text footer .footer-top .answer, footer .footer-top .testimonials .testimonial-text .answer, .testimonials .testimonial-text .section-intro, .testimonials .testimonial-text .testimonial-desc, .testimonials .testimonial-text .page-intro .intro-content, .page-intro .testimonials .testimonial-text .intro-content, .testimonials .testimonial-text #single-project .project-intro .intro-container .project-intro-wrapper .project-subintro, #single-project .project-intro .intro-container .project-intro-wrapper .testimonials .testimonial-text .project-subintro, .testimonials .testimonial-text #single-project .project-intro .testimonial-container .testimonial, #single-project .project-intro .testimonial-container .testimonials .testimonial-text .testimonial, .testimonials .testimonial-text #single-product .product-intro .intro-container .product-intro-wrapper .product-subintro, #single-product .product-intro .intro-container .product-intro-wrapper .testimonials .testimonial-text .product-subintro, .testimonials .testimonial-text #single-product .posters .posters-wrapper .poster-content h5, #single-product .posters .posters-wrapper .poster-content .testimonials .testimonial-text h5, .testimonials .testimonial-text #about .overview .intro, #about .overview .testimonials .testimonial-text .intro, .testimonials .testimonial-text #about .overview .overview-desc .item h4, #about .overview .overview-desc .item .testimonials .testimonial-text h4, .testimonials .testimonial-text #about .services .intro, #about .services .testimonials .testimonial-text .intro, .testimonials .testimonial-text #about .services .service-grid .service-item .item-content h4, #about .services .service-grid .service-item .item-content .testimonials .testimonial-text h4, .testimonials .testimonial-text #about .offices .office-item .office-desc, #about .offices .office-item .testimonials .testimonial-text .office-desc {
    font-size: 16px;
  }
}

.testimonials .testimonial-media {
  position: relative;
  overflow: hidden;
  margin-bottom: 3rem;
}

@media only screen and (max-width: 768px) {
  .testimonials .testimonial-media {
    margin-top: 5rem;
    margin-bottom: 0rem;
  }
}

.testimonials .testimonial-media:before {
  content: "";
  display: block;
  padding-top: 65%;
}

@media only screen and (max-width: 600px) {
  .testimonials .testimonial-media:before {
    padding-top: 80%;
  }
}

.testimonials .testimonial-media.video:after {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background-color: #000000;
  top: 0;
  left: 0;
  opacity: 0.1;
  background-blend-mode: multiply;
}

.testimonials .testimonial-media img {
  width: 100%;
}

/*     
    Name: _intro.scss    
    Author: Zakaria El Khachia
*/
@media only screen and (max-width: 600px) {
  .page-intro {
    padding-top: 140px !important;
  }
}

.page-intro .intro-content {
  margin: 5rem auto;
  max-width: 600px;
}

@media only screen and (max-width: 768px) {
  .page-intro .intro-content {
    margin: 2rem auto;
  }
}

@media only screen and (max-width: 600px) {
  .page-intro .intro-content {
    margin: 1rem auto;
  }
}

.page-intro .intro-content .highlight {
  font-weight: 600;
}

.page-intro .more-projects {
  margin: 5rem 0;
  float: right;
}

@media only screen and (max-width: 768px) {
  .page-intro .more-projects {
    margin: 2rem 0;
    float: left;
  }
}

@media only screen and (max-width: 600px) {
  .page-intro .more-projects {
    margin: 1rem auto 0;
    float: left;
  }
}

/*     
    Name: _news-archive.scss    
    Author: Zakaria El Khachia
*/
.news.archive {
  padding-top: 60px;
}

.news .left-m a {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  overflow: hidden;
}

.news .news-article {
  margin-bottom: 100px;
}

.news .news-article:last-child {
  margin-bottom: 0;
}

.news .news-article:hover .news-cover {
  -webkit-transform: scale3d(1.05, 1.05, 1.05);
          transform: scale3d(1.05, 1.05, 1.05);
}

.news .news-article:hover .txt-btn {
  color: #ffb400;
}

.news .news-article:hover .txt-btn .arrow {
  margin-left: 0.8rem;
}

.news .news-cover {
  width: 100%;
  position: relative;
  overflow: hidden;
  -webkit-transform: scale3d(1, 1, 1);
          transform: scale3d(1, 1, 1);
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.news .news-cover:before {
  content: "";
  display: block;
  padding-top: 65%;
}

@media only screen and (max-width: 768px) {
  .news .news-text {
    margin-top: 1rem;
    padding: 0;
  }
}

.news .news-text .news-date div {
  letter-spacing: 0.01rem;
  padding: 0.1rem 0.4rem 0.1rem 0.6rem;
  display: inline-block;
  vertical-align: middle;
  font-family: "rational-bold", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
}

.news .news-text .news-date .date-m {
  color: #1f1f1f;
  border-bottom: 2px solid #1f1f1f;
}

.news .news-text .news-date .date-d {
  color: #ffb400;
  border-bottom: 2px solid #ffb400;
}

.news .news-text .news-date span {
  font-size: 0.7rem;
  font-family: "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  margin-left: 3px;
  display: inline-block;
  vertical-align: middle;
}

.news .news-text h3 {
  margin: 2rem 0 1rem;
}

.news .news-text p {
  margin-bottom: 2rem;
  max-width: 600px;
}

/*     
    Name: _masonry-grid.scss    
    Author: Zakaria El Khachia
    Client:
*/
.masonry-grid {
  width: 100%;
  margin: 5rem auto 0;
  /* Grid Item */
  /* Clearfix */
  /* Content Item */
}

.masonry-grid.mini {
  margin: 2rem auto 0;
}

.masonry-grid .grid-sizer,
.masonry-grid .grid-item {
  width: 47%;
}

.masonry-grid .grid-sizer:nth-child(3),
.masonry-grid .grid-item:nth-child(3) {
  margin-top: 2rem;
}

.masonry-grid .gutter-sizer {
  width: 6%;
}

.masonry-grid .grid-item {
  margin-bottom: 5rem;
}

.masonry-grid .grid-item:last-child {
  margin-bottom: 0;
}

@media only screen and (max-width: 600px) {
  .masonry-grid .grid-item:last-child {
    margin-bottom: 5rem;
  }
}

@media only screen and (max-width: 768px) {
  .masonry-grid {
    margin: 0 auto;
  }
  .masonry-grid .grid-sizer,
  .masonry-grid .grid-item {
    width: 100%;
  }
  .masonry-grid .gutter-sizer {
    width: 0%;
  }
  .masonry-grid .grid-item .headline {
    margin-left: 0%;
  }
}

.masonry-grid:after {
  content: "";
  display: block;
  clear: both;
}

.masonry-grid .content-item {
  display: block;
  position: relative;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

.masonry-grid .content-item figure {
  width: 100%;
  height: 100%;
  position: relative;
}

.masonry-grid .content-item figure:after {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  background-color: #000000;
  background-blend-mode: multiply;
  opacity: 0.4;
  -webkit-transition: opacity 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.masonry-grid .content-item figure img {
  width: 100%;
  min-height: 350px;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

@media only screen and (max-width: 1330px) {
  .masonry-grid .content-item figure img {
    min-height: 280px;
  }
}

.masonry-grid .content-item:hover figure:after {
  opacity: 0;
}

@media only screen and (max-width: 600px) {
  .projects .grid-item {
    margin-bottom: 2rem;
  }
}

.projects .item-content-block {
  position: absolute;
  width: 85%;
  left: 10%;
  bottom: 20%;
  display: block;
  margin: auto;
  color: #ffffff;
  -webkit-transform: translateZ(50px);
          transform: translateZ(50px);
}

@media only screen and (max-width: 768px) {
  .projects .item-content-block {
    width: 85%;
    max-width: 500px;
    left: 10%;
    bottom: 12%;
  }
}

@media only screen and (max-width: 600px) {
  .projects .item-content-block {
    width: 80%;
    max-width: 500px;
    left: 0%;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
}

.projects .item-content-block .item-title {
  color: #ffb400;
  margin-bottom: 1rem;
}

@media only screen and (max-width: 600px) {
  .projects .item-content-block .item-title {
    font-size: 24px;
  }
}

@media only screen and (max-width: 600px) {
  .projects .item-content-block .item-details {
    color: #1f1f1f;
    color: #ffffff;
    text-align: left;
    font-size: 16px;
    font-weight: bold;
  }
}

.projects .item-content-block .item-logo {
  max-width: 120px;
  max-height: 140%;
  position: absolute;
  right: 0.8rem;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

@media only screen and (max-width: 600px) {
  .projects .item-content-block .item-logo {
    display: block;
    position: relative;
    max-height: 65px;
    right: 0;
  }
}

@media only screen and (max-width: 600px) {
  .products .grid-item {
    margin-bottom: 3rem;
  }
}

.products .item-content-block {
  position: absolute;
  width: 80%;
  max-width: 500px;
  top: 60%;
  left: 0;
  right: 0;
  -webkit-transform: translateY(-50%) translateZ(50px);
          transform: translateY(-50%) translateZ(50px);
  display: block;
  margin: auto;
  color: #ffffff;
}

@media only screen and (max-width: 600px) {
  .products .item-content-block {
    text-align: center;
    width: 92%;
  }
}

.products .item-content-block .item-title {
  display: block;
  margin-bottom: 1.5rem;
}

.products .item-content-block .item-title:after {
  content: "";
  width: 60px;
  height: 1px;
  background-color: #ffffff;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 0 1rem;
  display: none;
}

@media only screen and (max-width: 600px) {
  .products .item-content-block .item-title:after {
    display: none;
  }
}

.products .item-content-block .item-logo {
  max-width: 140px;
  max-height: 100px;
  display: block;
}

@media only screen and (max-width: 600px) {
  .products .item-content-block .item-logo {
    display: block;
    margin: 1rem auto 0;
    max-width: 100px;
  }
}

/*     
    Name: _stats.scss    
    Author: Zakaria El Khachia
*/
@media only screen and (max-width: 1330px) {
  .stats .boxed {
    padding-left: 0.5rem;
    padding-right: 1rem;
  }
}

.stats .single-stat {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  margin: 1rem 0;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.stats .single-stat.col-6 {
  margin-bottom: 4rem;
}

@media only screen and (max-width: 768px) {
  .stats .single-stat {
    margin-bottom: 4rem;
  }
  .stats .single-stat:last-child {
    margin-bottom: 0;
  }
}

.stats .single-stat .stat-content {
  padding: 0 1rem;
}

.stats .single-stat .stat-number {
  position: relative;
  font-size: 4.5rem;
  font-family: "rational-bold", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  color: #ffb400;
  text-align: center;
  height: 80px;
  width: 100%;
  display: inline-block;
}

@media only screen and (max-width: 1330px) {
  .stats .single-stat .stat-number {
    font-size: 4rem;
    height: 80px;
  }
}

@media only screen and (max-width: 768px) {
  .stats .single-stat .stat-number {
    font-size: 5rem;
    height: 120px;
  }
}

@media only screen and (max-width: 600px) {
  .stats .single-stat .stat-number {
    font-size: 4rem;
    height: 100px;
  }
}

.stats .single-stat .stat-number span {
  margin: 0px 5px;
  font-size: 24px;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-12px);
          transform: translateY(-12px);
}

@media only screen and (max-width: 1330px) {
  .stats .single-stat .stat-number span {
    font-size: 24px;
    margin: 0px 2px;
  }
}

@media only screen and (max-width: 768px) {
  .stats .single-stat .stat-number span {
    margin: 0 -2px;
  }
}

.stats .single-stat .stat-number img {
  max-height: 150px;
  width: auto;
  margin: 1rem;
  position: relative;
}

.stats .single-stat .stat-desc {
  line-height: 1.6;
  text-align: center;
  max-width: 240px;
  margin: 1rem auto 0;
}

.stats.dark {
  background-color: #1f1f1f;
}

.stats.dark .stat-desc {
  color: #ffffff;
}

.stats.light {
  background-color: #f9f9f9;
}

.stats.light .stat-desc {
  color: #1f1f1f;
}

/*     
    Name: _home.scss    
    Author: Zakaria El Khachia
    Client:
*/
#home {
  /* Section 02 - Home Hero */
  /* Main Module */
  /* Section 02 - Projects */
  /* Section 04 - News */
}

#home header .logo-wrapper {
  width: 120px;
}

@media only screen and (max-width: 600px) {
  #home header .logo-wrapper {
    margin-left: 2rem;
    margin-top: 1.5rem;
  }
}

@media only screen and (max-width: 600px) {
  #home header .logo-wrapper svg {
    margin: auto;
  }
}

@media only screen and (max-width: 600px) {
  #home header .burger-menu {
    top: 60px;
  }
}

@media only screen and (max-width: 600px) {
  #home header .social-wrapper {
    opacity: 1;
    visibility: visible;
  }
}

#home header .social-wrapper .social path {
  fill: #ffffff;
}

#home header .social-wrapper .social.observer path {
  fill: #1f1f1f;
}

@media only screen and (max-width: 768px) {
  #home header.observer .logo-wrapper {
    margin-left: -13px;
  }
}

@media only screen and (max-width: 600px) {
  #home header.observer .logo-wrapper {
    margin-left: 1.5rem;
    margin-top: 0;
    width: 90px;
  }
}

#home header.h-open .social-wrapper .social path {
  fill: #ffffff;
}

#home header.h-open .social-wrapper .social.observer path {
  fill: #ffffff;
}

#home .scroll-wrapper {
  -webkit-transform: translateX(-66px);
          transform: translateX(-66px);
}

@media only screen and (max-width: 600px) {
  #home .scroll-wrapper {
    -webkit-transform: translateX(-12px);
            transform: translateX(-12px);
    left: 100%;
    bottom: 2.5rem;
    opacity: 1;
  }
}

#home .welcome-video-wrapper {
  position: relative;
  overflow: hidden;
}

#home .welcome-video-wrapper .bg {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#home .welcome-video-wrapper .bg .bg-video-player {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

@media only screen and (max-width: 768px) {
  #home .welcome-video-wrapper .bg .bg-video-player {
    display: none;
  }
}

#home .welcome-video-wrapper .hero-content {
  width: calc(100% - 120px);
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
}

@media only screen and (max-width: 600px) {
  #home .welcome-video-wrapper .hero-content {
    width: 85%;
    left: 0;
    right: 0;
    margin: auto;
  }
}

#home .welcome-video-wrapper .lang-switch {
  position: absolute;
  bottom: 2.4rem;
  right: 2rem;
  opacity: 0;
  -webkit-transition: 0.5s opacity 0.1s, 0.75s -webkit-transform cubic-bezier(0.32, 1.01, 0.35, 1.01);
  transition: 0.5s opacity 0.1s, 0.75s -webkit-transform cubic-bezier(0.32, 1.01, 0.35, 1.01);
  transition: 0.75s transform cubic-bezier(0.32, 1.01, 0.35, 1.01), 0.5s opacity 0.1s;
  transition: 0.75s transform cubic-bezier(0.32, 1.01, 0.35, 1.01), 0.5s opacity 0.1s, 0.75s -webkit-transform cubic-bezier(0.32, 1.01, 0.35, 1.01);
}

#home .welcome-video-wrapper .lang-switch > * {
  margin: 0;
}

#home .welcome-video-wrapper .lang-switch > * + * {
  margin-left: 8px;
}

@media only screen and (max-width: 600px) {
  #home .welcome-video-wrapper .lang-switch {
    right: 0;
    bottom: 1rem;
    display: none;
  }
}

#home .welcome-video-wrapper .lang-switch a {
  color: #ffffff;
  font-weight: bold;
  display: inline;
}

#home .welcome-video-wrapper .mission-stat {
  position: absolute;
  margin-left: 90px;
  top: 50%;
  left: 0px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  color: #ffffff;
}

@media only screen and (max-width: 768px) {
  #home .welcome-video-wrapper .mission-stat {
    margin-left: 0px;
  }
}

#home .welcome-video-wrapper .mission-stat.active * {
  -webkit-transform: translate3d(0, 0px, 0);
          transform: translate3d(0, 0px, 0);
  opacity: 1;
}

#home .welcome-video-wrapper .mission-stat.active p {
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
}

#home .welcome-video-wrapper .mission-stat.active h1 {
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}

#home .welcome-video-wrapper .mission-stat.active a {
  -webkit-transition-delay: 0.7s;
          transition-delay: 0.7s;
  -webkit-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

#home .welcome-video-wrapper .mission-stat * {
  -webkit-transition: 0.5s opacity 0.1s, 0.75s -webkit-transform cubic-bezier(0.32, 1.01, 0.35, 1.01);
  transition: 0.5s opacity 0.1s, 0.75s -webkit-transform cubic-bezier(0.32, 1.01, 0.35, 1.01);
  transition: 0.75s transform cubic-bezier(0.32, 1.01, 0.35, 1.01), 0.5s opacity 0.1s;
  transition: 0.75s transform cubic-bezier(0.32, 1.01, 0.35, 1.01), 0.5s opacity 0.1s, 0.75s -webkit-transform cubic-bezier(0.32, 1.01, 0.35, 1.01);
  -webkit-transform: translate3d(0, 30px, 0);
          transform: translate3d(0, 30px, 0);
}

#home .welcome-video-wrapper .mission-stat p {
  opacity: 0;
  color: #ffffff;
}

#home .welcome-video-wrapper .mission-stat h1 {
  opacity: 0;
  margin: 1rem 0;
}

#home .welcome-video-wrapper .mission-stat h1 p {
  opacity: 1;
}

#home .welcome-video-wrapper .mission-stat a {
  opacity: 0;
  color: #ffffff;
  -webkit-transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

#home .welcome-video-wrapper .mission-stat a .arrow {
  margin-left: 0.6rem;
  top: 3px;
  -webkit-transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

#home .welcome-video-wrapper .mission-stat a:hover {
  color: #ffb400;
}

#home .welcome-video-wrapper .mission-stat a:hover .arrow {
  margin-left: 0.8rem;
}

#home .welcome-video-wrapper .mission-stat a:hover .arrow path {
  fill: #ffb400 !important;
}

#home main {
  position: relative;
}

@media only screen and (max-width: 600px) {
  #home main {
    margin-top: 0px;
  }
}

#home main .welcome {
  width: 100%;
  height: 100%;
  position: relative;
  height: 100vh;
}

#home #home-projects {
  position: relative;
  overflow: hidden;
}

#home #home-projects .project-grid {
  margin: 0 auto;
  /* 2nd grid item top offset */
}

#home #home-projects .project-grid article:nth-child(3) {
  margin-top: 2rem;
  -webkit-transition: cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: cubic-bezier(0.165, 0.84, 0.44, 1);
}

#home #home-projects .more-projects {
  float: right;
}

@media only screen and (max-width: 768px) {
  #home #home-projects .more-projects {
    float: none;
    margin: 4rem auto;
  }
}

@media only screen and (max-width: 600px) {
  #home #home-projects .more-projects {
    margin: 0rem auto;
  }
}

#home .news .intro {
  margin-bottom: 2rem;
}

#home .news .news-grid:hover .news-cover {
  -webkit-transform: scale3d(1.05, 1.05, 1.05);
          transform: scale3d(1.05, 1.05, 1.05);
}

#home .news .news-grid:hover .txt-btn {
  color: #ffb400;
}

#home .news .news-grid:hover .txt-btn .arrow {
  margin-left: 0.8rem;
}

#home .news .news-cover {
  width: 100%;
  position: relative;
  overflow: hidden;
}

#home .news .news-cover:before {
  content: "";
  display: block;
  padding-top: 65%;
}

@media only screen and (max-width: 768px) {
  #home .news .news-text {
    margin-top: 1rem;
    padding: 0;
  }
}

#home .news .news-text .news-date div {
  letter-spacing: 0.01rem;
  padding: 0.1rem 0.4rem 0.1rem 0.6rem;
  display: inline-block;
  vertical-align: middle;
  font-family: "rational-bold", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
}

#home .news .news-text .news-date .date-m {
  color: #1f1f1f;
  border-bottom: 2px solid #1f1f1f;
}

#home .news .news-text .news-date .date-d {
  color: #ffb400;
  border-bottom: 2px solid #ffb400;
}

#home .news .news-text .news-date span {
  font-size: 0.7rem;
  font-family: "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  margin-left: 3px;
  display: inline-block;
  vertical-align: middle;
}

#home .news .news-text h3 {
  margin: 2.5rem 0 1rem;
}

#home .news .news-text p {
  margin-bottom: 1.5rem;
  max-width: 600px;
}

/*     
    Name: _projects.scss    
    Author: Zakaria El Khachia
    Client:
*/
#projects .page-intro {
  padding-bottom: 0;
}

@media only screen and (max-width: 600px) {
  #projects .page-intro {
    padding-bottom: 3rem;
  }
}

#projects .projects {
  padding-top: 0;
}

.projects {
  position: relative;
  overflow: hidden;
}

.projects .bg-shape {
  fill: #ffb400;
  top: -30%;
  right: -20%;
}

.projects .bg-shape #bg-02 {
  opacity: 0;
}

/* Intro Item */
.intro-item {
  position: relative;
  display: block;
  margin-bottom: 3rem;
}

.intro-item .intro {
  width: 90%;
  max-width: 500px;
}

@media only screen and (max-width: 768px) {
  .intro-item .intro {
    width: 60%;
  }
}

@media only screen and (max-width: 600px) {
  .intro-item .intro {
    width: 90%;
    margin-left: 0;
  }
}

/* Media Queries */
@media (max-width: 1170px) {
  .project-grid .grid-sizer,
  .project-grid .grid-item {
    width: 48%;
  }
  .project-grid .gutter-sizer {
    width: 3%;
  }
}

@media (max-width: 991px) {
  .project-grid .grid-sizer,
  .project-grid .grid-item {
    width: 100%;
  }
  .project-grid .gutter-sizer {
    width: 0%;
  }
  .project-grid .grid-item .headline {
    margin-left: 0%;
  }
}

/*     
    Name: _single-project.scss    
    Author: Zakaria El Khachia
    Client:
*/
#single-project {
  /* Hero Module */
  /* Project Intro Module */
}

#single-project .video-wrapper {
  position: relative;
  overflow: hidden;
}

#single-project .bg {
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#single-project .bg .filter-bg {
  position: absolute;
  background-color: #000000;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0.5;
  background-blend-mode: multiply;
}

#single-project .bg .bg-video-player {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

@media only screen and (max-width: 768px) {
  #single-project .bg .bg-video-player {
    display: none;
  }
}

#single-project .hero-content {
  position: absolute;
  width: 100%;
  height: 100%;
  right: 0;
  top: 0;
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
  -webkit-transition: 0.3s opacity ease;
  transition: 0.3s opacity ease;
}

#single-project .hero-content.scale {
  -webkit-animation: scaleSlow 3s forwards;
          animation: scaleSlow 3s forwards;
}

#single-project .hero-txt {
  position: absolute;
  width: 100%;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  text-align: center;
}

#single-project .hero-txt .project-logo {
  width: 140px;
  margin: auto;
  display: block;
}

#single-project .hero-txt .project-title {
  margin: 3rem auto;
  color: #ffffff;
}

@media only screen and (max-width: 1330px) {
  #single-project .hero-txt .project-title {
    margin: 1rem auto;
  }
}

@media only screen and (max-width: 600px) {
  #single-project .hero-txt .project-title {
    font-size: 3rem;
  }
}

#single-project .hero-txt .video-player-button {
  width: 50px;
  height: 50px;
  background-color: #1f1f1f;
  border-radius: 50%;
  border: 4px solid #ffb400;
  overflow: hidden;
  position: relative;
  display: block;
  margin: 2rem auto;
}

#single-project .hero-txt .video-player-button svg {
  width: 10px;
  height: 15px;
  position: absolute;
  left: 50%;
  top: 50%;
  fill: #ffb400;
  -webkit-transform: translate(-4px, -8px);
          transform: translate(-4px, -8px);
  opacity: 1;
  visibility: visible;
}

#single-project .hero-txt .video-player-button svg.play path {
  fill: #f9f9f9;
}

#single-project .hero-txt .video-player-button svg.pause path {
  fill: #f9f9f9;
}

#single-project .hero-txt .video-player-button svg.is-off {
  opacity: 0;
  visibility: hidden;
}

#single-project .hero-txt .button-label {
  font-size: 14px;
  color: #ffb400;
  text-align: center;
  margin: 0.6rem 0;
  display: none;
}

#single-project .hero-txt .project-meta-container {
  background-color: #ffffff;
  padding: 1.5rem 3rem;
  -webkit-box-shadow: 4px 5px 7px #1d1d1df5;
          box-shadow: 4px 5px 7px #1d1d1df5;
  margin: 2rem auto;
  display: inline-block;
  font-size: 14px;
  position: relative;
}

@media only screen and (max-width: 600px) {
  #single-project .hero-txt .project-meta-container {
    background-color: transparent;
    -webkit-box-shadow: none;
            box-shadow: none;
    padding: 0;
    color: #ffffff;
  }
}

#single-project .hero-txt .project-meta-container .meta-content {
  display: inline-block;
  font-weight: bold;
}

#single-project .hero-txt .project-meta-container .meta-content:after {
  content: "/";
  display: inline-block;
  vertical-align: middle;
  margin: 0 1.5rem;
  color: #1f1f1f;
}

@media only screen and (max-width: 600px) {
  #single-project .hero-txt .project-meta-container .meta-content:after {
    color: #ffffff;
    margin: 0 0.8rem;
  }
}

#single-project .hero-txt .project-meta-container .meta-content:last-child:after {
  display: none;
}

#single-project .project-intro {
  background-color: #f9f9f9;
}

#single-project .project-intro .intro-container {
  max-width: 991px;
  margin: auto;
}

@media only screen and (max-width: 768px) {
  #single-project .project-intro .intro-container {
    padding: 0 3rem;
  }
}

#single-project .project-intro .intro-container .project-mascot img {
  width: 100%;
  max-width: 400px;
  margin: -3rem auto 2rem;
  display: block;
}

@media only screen and (max-width: 1330px) {
  #single-project .project-intro .intro-container .project-mascot img {
    max-width: 350px;
    display: block;
  }
}

@media only screen and (max-width: 768px) {
  #single-project .project-intro .intro-container .project-mascot img {
    float: none;
    margin: 0 auto 2rem;
    padding-right: 0;
  }
}

#single-project .project-intro .intro-container .project-intro-wrapper {
  padding-left: 30px;
  margin: 2rem auto 0;
  max-width: 800px;
}

@media only screen and (max-width: 768px) {
  #single-project .project-intro .intro-container .project-intro-wrapper {
    padding: 0;
    max-width: 500px;
    margin: auto;
    text-align: left;
  }
}

#single-project .project-intro .intro-container .project-intro-wrapper .project-intro {
  font-weight: bold;
  margin: 0 auto;
}

#single-project .project-intro .intro-container .project-intro-wrapper .project-subintro {
  margin-top: 3rem;
}

#single-project .project-intro .testimonial-container {
  margin: auto;
  display: block;
  max-width: 600px;
  margin-top: 5rem;
  line-height: 1.8;
  padding: 2rem;
  text-align: center;
  background-color: #ffffff;
  -webkit-box-shadow: 10px 7px 10px #cccccc;
          box-shadow: 10px 7px 10px #cccccc;
}

@media only screen and (max-width: 768px) {
  #single-project .project-intro .testimonial-container {
    position: relative;
  }
}

#single-project .project-intro .testimonial-container .testimonial {
  color: #000000;
  margin-bottom: 1rem;
  font-size: bold;
}

#single-project .project-intro .testimonial-container .testimonial:before {
  content: "";
  position: absolute;
  display: block;
  top: -1rem;
  left: -1rem;
  width: 40px;
  height: 43px;
  background-image: url("../img/svg/quote-icon.svg");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
}

@media only screen and (max-width: 768px) {
  #single-project .project-intro .testimonial-container .testimonial:before {
    left: -0.5rem;
  }
}

@media only screen and (max-width: 600px) {
  #single-project .project-intro .testimonial-container .testimonial:before {
    top: -1rem;
    left: -0.5rem;
    width: 30px;
    height: 33px;
  }
}

#single-project .project-intro .testimonial-container .author {
  color: #1f1f1f;
}

#single-project .download-btn {
  position: absolute;
  top: 15%;
  right: 0;
}

@media only screen and (max-width: 768px) {
  #single-project .download-btn {
    top: 5%;
    right: 0;
  }
}

@media only screen and (max-width: 600px) {
  #single-project .download-btn {
    top: 2%;
    right: 0;
  }
}

#single-project .more-projects {
  margin: -2rem 0px;
  display: block;
  float: right;
}

@media only screen and (max-width: 768px) {
  #single-project .more-projects {
    margin: -0.5rem auto 0;
    float: none;
  }
}

@media only screen and (max-width: 600px) {
  #single-project .more-projects {
    margin: 1rem auto 0;
  }
}

/*     
    Name: _products.scss    
    Author: Zakaria El Khachia
    Client:
*/
#products .page-intro {
  padding-bottom: 0;
}

@media only screen and (max-width: 600px) {
  #products .page-intro {
    padding-bottom: 5rem;
  }
}

#products .products.top-grid {
  padding-top: 0;
}

/*     
    Name: _single-product.scss    
    Author: Zakaria El Khachia
    Client:
*/
#single-product {
  /* Hero Module */
  /* Intro Module */
  /* Slogan Module */
  /* Specs Module */
  /* Posters Module */
  /* Download Module */
}

#single-product .product-hero {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

#single-product .video-wrapper {
  position: relative;
  overflow: hidden;
}

#single-product .bg {
  width: 100%;
  height: 100vh;
}

#single-product .bg .filter-bg {
  position: absolute;
  background-color: #000000;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0.5;
  background-blend-mode: multiply;
}

#single-product .bg .bg-video-player {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

@media only screen and (max-width: 768px) {
  #single-product .bg .bg-video-player {
    display: none;
  }
}

#single-product .hero-content {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0;
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
  -webkit-transition: 0.3s opacity ease;
  transition: 0.3s opacity ease;
}

#single-product .hero-content.scale {
  -webkit-animation: scaleSlow 3s forwards;
          animation: scaleSlow 3s forwards;
}

#single-product .hero-txt {
  position: absolute;
  width: 100%;
  top: 45%;
  left: 120px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  text-align: left;
}

@media only screen and (max-width: 768px) {
  #single-product .hero-txt {
    left: 0px;
    padding: 0 2rem;
  }
}

#single-product .hero-txt .headline {
  margin: auto;
  color: #ffffff;
  display: block;
}

@media only screen and (max-width: 600px) {
  #single-product .hero-txt .headline {
    font-size: 2rem;
    display: block;
  }
}

#single-product .hero-txt .prod-logo {
  width: 180px;
  margin-bottom: 2rem;
  display: block;
  position: relative;
}

@media only screen and (max-width: 600px) {
  #single-product .hero-txt .prod-logo {
    width: 100px;
  }
}

#single-product .hero-txt .prod-logo:before {
  margin-right: 2rem;
  content: "";
  position: absolute;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  top: calc(50% - 1px);
  height: 2px;
  width: 55vw;
  -webkit-transform-origin: right center;
          transform-origin: right center;
  left: -54vw;
  background-color: #fff;
  opacity: 0.5;
}

@media only screen and (max-width: 600px) {
  #single-product .hero-txt .prod-logo:before {
    width: 40px;
  }
}

#single-product .hero-txt .prod-logo img {
  width: 100%;
  margin-left: 2rem;
}

@media only screen and (max-width: 600px) {
  #single-product .hero-txt .prod-logo img {
    margin-left: 0;
  }
}

#single-product .product-intro {
  background-color: #ffffff;
}

#single-product .product-intro .intro-container {
  max-width: 991px;
  margin: auto;
}

@media only screen and (max-width: 768px) {
  #single-product .product-intro .intro-container {
    padding: 0 3rem;
  }
}

#single-product .product-intro .intro-container .product-intro-wrapper {
  padding-left: 30px;
  margin: 2rem auto 0;
  max-width: 800px;
}

@media only screen and (max-width: 768px) {
  #single-product .product-intro .intro-container .product-intro-wrapper {
    padding: 0;
    max-width: 500px;
    margin: auto;
    text-align: left;
  }
}

#single-product .product-intro .intro-container .product-intro-wrapper .product-intro {
  font-weight: bold;
  margin: 0 auto;
}

#single-product .product-intro .intro-container .product-intro-wrapper .product-subintro {
  margin-top: 3rem;
}

#single-product .product-intro .testimonial-container {
  margin: auto;
  display: block;
  max-width: 600px;
  margin-top: 5rem;
  line-height: 1.8;
  padding: 2rem;
  text-align: center;
  background-color: #ffffff;
  -webkit-box-shadow: 10px 7px 10px #cccccc;
          box-shadow: 10px 7px 10px #cccccc;
}

@media only screen and (max-width: 768px) {
  #single-product .product-intro .testimonial-container {
    position: relative;
  }
}

#single-product .product-intro .testimonial-container .testimonial {
  color: #000000;
  margin-bottom: 1rem;
  font-size: bold;
}

#single-product .product-intro .testimonial-container .testimonial:before {
  content: "";
  position: absolute;
  display: block;
  top: -1rem;
  left: -1rem;
  width: 40px;
  height: 43px;
  background-image: url("../img/svg/quote-icon.svg");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
}

@media only screen and (max-width: 768px) {
  #single-product .product-intro .testimonial-container .testimonial:before {
    left: -0.5rem;
  }
}

@media only screen and (max-width: 600px) {
  #single-product .product-intro .testimonial-container .testimonial:before {
    top: -1rem;
    left: -0.5rem;
    width: 30px;
    height: 33px;
  }
}

#single-product .product-intro .testimonial-container .author {
  color: #1f1f1f;
}

#single-product .slogan {
  z-index: 0;
}

#single-product .slogan .slogan-link {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

#single-product .slogan .slogan-link .slogan-wrapper {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  color: #ffffff;
  margin: auto;
  text-align: center;
}

#single-product .slogan .slogan-link:hover .slogan-top,
#single-product .slogan .slogan-link:hover .slogan-bottom {
  color: #ffb400;
}

#single-product .slogan .slogan-link:hover .slogan-top .highlight,
#single-product .slogan .slogan-link:hover .slogan-bottom .highlight {
  color: #ffffff;
}

#single-product .slogan .slogan-link:hover .arrow {
  -webkit-transform: translateX(0.4rem);
          transform: translateX(0.4rem);
}

#single-product .slogan .slogan-link:hover .arrow path {
  fill: #ffffff !important;
}

#single-product .slogan .slogan-wrapper {
  color: #ffffff;
  margin: auto;
  display: block;
  text-align: center;
}

#single-product .slogan .slogan-wrapper .slogan-top {
  display: inline-block;
  margin-top: -1.5rem;
  -webkit-transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

#single-product .slogan .slogan-wrapper .slogan-bottom {
  display: inline-block;
  vertical-align: middle;
  margin-bottom: -1.5rem;
  -webkit-transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

#single-product .slogan .slogan-wrapper .slogan-bottom .arrow {
  display: inline-block;
  vertical-align: middle;
  width: 30px;
  margin-left: 0.3rem;
  -webkit-transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

#single-product .product-specs .headline {
  display: block;
  margin-bottom: 6rem;
  text-align: center;
}

@media only screen and (max-width: 768px) {
  #single-product .product-specs .headline {
    margin-bottom: 5rem;
  }
}

#single-product .product-specs .specs-item {
  margin-bottom: 5rem;
}

@media only screen and (max-width: 768px) {
  #single-product .product-specs .specs-item {
    margin-bottom: 8rem;
  }
}

#single-product .product-specs .specs-item .specs-visual {
  width: 100%;
  max-width: 500px;
  padding: 0 2rem;
  float: right;
}

@media only screen and (max-width: 1330px) {
  #single-product .product-specs .specs-item .specs-visual {
    max-width: 400px;
  }
}

@media only screen and (max-width: 768px) {
  #single-product .product-specs .specs-item .specs-visual {
    max-width: unset;
    float: none;
    margin: 0 0 4rem 0;
    padding: 0 4rem;
    display: block;
  }
}

#single-product .product-specs .specs-item .specs-content {
  padding: 0 2rem;
}

@media only screen and (max-width: 768px) {
  #single-product .product-specs .specs-item .specs-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 0 4rem;
  }
}

@media only screen and (max-width: 768px) {
  #single-product .product-specs .specs-item .specs-content .specs-txt {
    display: block;
    margin: 0;
  }
}

#single-product .product-specs .specs-item .specs-content h4 {
  margin-bottom: 1rem;
}

@media only screen and (max-width: 768px) {
  #single-product .product-specs .specs-item .specs-content h4 {
    margin-bottom: 1.5rem;
  }
}

@media only screen and (max-width: 600px) {
  #single-product .product-specs .specs-item .specs-content h4 {
    margin-bottom: 2rem;
  }
}

#single-product .product-specs .specs-item .specs-content h4:after {
  content: "";
  display: block;
  width: 30px;
  height: 2px;
  margin-top: 12px;
  background-color: #1f1f1f;
  -webkit-transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -webkit-box-shadow: 1px 1px 3px #c1c1c1;
          box-shadow: 1px 1px 3px #c1c1c1;
}

#single-product .product-specs .specs-item .specs-content .specs-details {
  margin-top: 2rem;
  line-height: 1.8;
}

#single-product .product-specs .specs-item .specs-content .specs-details p,
#single-product .product-specs .specs-item .specs-content .specs-details li {
  margin-bottom: 0.6rem;
}

#single-product .posters .posters-wrapper .poster-content {
  padding-right: 3rem;
}

@media only screen and (max-width: 768px) {
  #single-product .posters .posters-wrapper .poster-content {
    max-width: 450px;
    padding: 0;
  }
}

@media only screen and (max-width: 600px) {
  #single-product .posters .posters-wrapper .poster-content {
    max-width: 100%;
  }
}

#single-product .posters .posters-wrapper .poster-content img {
  width: 100%;
  -webkit-transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -webkit-box-shadow: 5px 6px 10px #a5a5a5;
          box-shadow: 5px 6px 10px #a5a5a5;
}

#single-product .posters .posters-wrapper .poster-content h5 {
  margin: 1rem auto 3rem;
  text-align: center;
}

@media only screen and (max-width: 768px) {
  #single-product .posters .posters-wrapper .poster-content h5 {
    font-size: 1.5rem;
  }
}

@media only screen and (max-width: 600px) {
  #single-product .posters .posters-wrapper .poster-content h5 {
    font-size: 1.3rem;
  }
}

#single-product .posters .posters-wrapper .poster-content h5:after {
  content: "";
  opacity: 0;
  width: 1px;
  height: 2px;
  background-color: #ffb400;
  margin: 10px auto;
  display: block;
  -webkit-transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

#single-product .posters .posters-wrapper .poster-content:hover img {
  -webkit-transform: scale(1.01);
          transform: scale(1.01);
}

#single-product .posters .posters-wrapper .poster-content:hover h5:after {
  content: "";
  opacity: 1;
  width: 30px;
}

#single-product .download-btn {
  position: fixed;
  top: 60%;
  right: 0;
  font-size: 16px;
  padding: 16px 22px;
  -webkit-transform: translate3d(92px, 0, 0);
          transform: translate3d(92px, 0, 0);
  -webkit-transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  display: block;
  z-index: 0;
}

#single-product .download-btn:hover {
  -webkit-transform: translate3d(0px, 0, 0);
          transform: translate3d(0px, 0, 0);
  background-color: #ffb400;
  color: #ffffff;
}

#single-product .download-btn:hover svg {
  fill: #1f1f1f;
}

#single-product .download-btn svg {
  width: 18px;
  margin: 0 16px 0 0;
}

/*     
    Name: _single-news.scss    
    Author: Zakaria El Khachia
*/
#single-news {
  /* Intro Module */
}

#single-news .news-hero {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  -webkit-transform: scale(1.02);
          transform: scale(1.02);
  -webkit-transition: 0.3s opacity ease;
  transition: 0.3s opacity ease;
  -webkit-animation: scaleSlow 6s forwards;
          animation: scaleSlow 6s forwards;
}

#single-news .bg {
  width: 100%;
  height: 70vh;
}

#single-news .bg .filter-bg {
  position: absolute;
  background-color: #1d1d1d;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0.5;
  background-blend-mode: multiply;
}

#single-news .hero-content {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0;
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
  -webkit-transition: 0.3s opacity ease;
  transition: 0.3s opacity ease;
}

#single-news .hero-content.scale {
  -webkit-animation: scaleSlow 6s forwards;
          animation: scaleSlow 6s forwards;
}

#single-news .hero-txt {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  margin: auto;
  display: block;
  -webkit-transform: translate(-35%, -50%);
          transform: translate(-35%, -50%);
  text-align: left;
}

@media only screen and (max-width: 768px) {
  #single-news .hero-txt {
    width: 80%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
}

#single-news .hero-txt .news-date div {
  letter-spacing: 0.01rem;
  padding: 0.1rem 0.4rem 0.1rem 0.6rem;
  display: inline-block;
  vertical-align: middle;
  font-family: "rational-bold", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
}

#single-news .hero-txt .news-date .date-m {
  color: #ffffff;
  border-bottom: 2px solid #ffffff;
}

#single-news .hero-txt .news-date .date-d {
  color: #ffb400;
  border-bottom: 2px solid #ffb400;
}

#single-news .hero-txt .news-date span {
  font-size: 0.7rem;
  font-family: "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  margin-left: 3px;
  display: inline-block;
  vertical-align: middle;
}

#single-news .hero-txt .hero-intro {
  color: #ffffff;
  width: 75%;
  min-width: 550px;
  max-width: 850px;
  font-family: "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  margin-top: 2rem;
}

@media only screen and (max-width: 600px) {
  #single-news .hero-txt .hero-intro {
    min-width: 300px;
    max-width: 400px;
    font-size: 2rem;
  }
}

#single-news .news-article .article-content {
  width: 80%;
  max-width: 768px;
  margin: auto;
  display: block;
}

@media only screen and (max-width: 600px) {
  #single-news .news-article .article-content {
    width: 100%;
  }
}

#single-news .news-article .article-content .heading-block {
  margin-bottom: 3rem;
  font-weight: bold;
  margin: 0 auto 3rem;
}

@media only screen and (max-width: 600px) {
  #single-news .news-article .article-content .heading-block {
    font-size: 1.2rem;
  }
}

#single-news .news-article .article-content .paragraph-block {
  padding-left: 3rem;
  margin: 0 auto 6rem;
}

#single-news .news-article .article-content .paragraph-block img {
  height: auto;
  margin: 1rem 0;
}

@media only screen and (max-width: 600px) {
  #single-news .news-article .article-content .paragraph-block {
    padding: 0;
    margin: 0 auto;
  }
}

#single-news .news-article .article-content .download-btn {
  margin: 6rem auto 0;
  display: table;
  text-align: center;
}

#single-news .news-article-navigation {
  display: block;
}

#single-news .news-article-navigation .article-navigation-content {
  width: 80%;
  max-width: 768px;
  display: table;
  margin: auto;
  clear: both;
}

#single-news .news-article-navigation .news-nav-label {
  float: left;
  font-weight: bold;
  margin-top: 4px;
  color: #000000;
}

@media only screen and (max-width: 600px) {
  #single-news .news-article-navigation .news-nav-label {
    float: none;
    margin-bottom: 2rem;
    text-align: center;
  }
}

#single-news .news-article-navigation .news-nav-label:after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background-color: #000000;
  margin-top: 4px;
}

@media only screen and (max-width: 600px) {
  #single-news .news-article-navigation .news-nav-label:after {
    display: block;
    width: 20px;
    margin: 4px auto 0;
  }
}

#single-news .news-article-navigation .news-nav-title {
  float: left;
  width: 80%;
  max-width: 500px;
  margin-left: 4rem;
  color: #000000;
}

@media only screen and (max-width: 600px) {
  #single-news .news-article-navigation .news-nav-title {
    float: none;
    width: 100%;
  }
}

#single-news .news-article-navigation .news-nav-title:hover .txt-btn {
  color: #ffb400;
}

#single-news .news-article-navigation .news-nav-title:hover .txt-btn .arrow {
  margin-left: 1rem;
}

#single-news .news-article-navigation .news-nav-title h4 {
  font-weight: bold;
  margin-bottom: 1rem;
}

#single-news .news-article-navigation .news-nav-title .txt-btn {
  display: block;
  margin-top: 2rem;
}

@media only screen and (max-width: 600px) {
  #single-news .news-article-navigation .news-nav-title .txt-btn {
    text-align: left;
  }
}

#single-news .video-module {
  padding: 0;
}

#single-news .video-module .video-cover.full-cover {
  height: 60vh;
  min-height: 500px;
}

/*     
    Name: _about.scss    
    Author: Zakaria El Khachia
    Client:
*/
#about .overview {
  background-color: #f9f9f9;
}

#about .overview .intro {
  width: 70%;
  max-width: 768px;
  text-align: left;
  margin-bottom: 5rem;
}

@media only screen and (max-width: 768px) {
  #about .overview .intro {
    margin: 0 auto 5rem;
    text-align: center;
  }
}

@media only screen and (max-width: 600px) {
  #about .overview .intro {
    width: 100%;
    text-align: left;
  }
}

#about .overview .overview-visual {
  padding-right: 50px;
}

@media only screen and (max-width: 768px) {
  #about .overview .overview-visual {
    padding-right: 0;
    margin-bottom: 3rem;
  }
}

#about .overview .overview-visual img {
  max-width: 400px;
  width: 80%;
  margin: auto;
  display: block;
}

@media only screen and (max-width: 768px) {
  #about .overview .overview-visual img {
    max-width: 300px;
  }
}

#about .overview .overview-desc {
  padding-left: 50px;
}

@media only screen and (max-width: 768px) {
  #about .overview .overview-desc {
    padding-left: 3rem;
  }
}

@media only screen and (max-width: 600px) {
  #about .overview .overview-desc {
    padding-left: 2rem;
  }
}

#about .overview .overview-desc .item {
  position: relative;
  margin-bottom: 2rem;
  padding-left: 2rem;
}

@media only screen and (max-width: 768px) {
  #about .overview .overview-desc .item {
    margin: 3rem 0;
    display: table;
  }
  #about .overview .overview-desc .item:last-child {
    margin-bottom: 0;
  }
}

#about .overview .overview-desc .item:before {
  content: "";
  position: absolute;
  width: 3rem;
  height: 3rem;
  top: 0;
  left: -40px;
  background-size: 100%;
  background-repeat: no-repeat;
}

#about .overview .overview-desc .item:nth-child(1):before {
  background-image: url("../img/svg/overview-icon-01.svg");
}

#about .overview .overview-desc .item:nth-child(2):before {
  background-image: url("../img/svg/overview-icon-02.svg");
}

#about .overview .overview-desc .item:nth-child(3):before {
  background-image: url("../img/svg/overview-icon-03.svg");
}

#about .overview .overview-desc .item h4 {
  font-weight: normal;
  margin-bottom: 6px;
}

#about .services {
  background-color: #1f1f1f;
  color: #ffffff;
}

#about .services .intro {
  width: 70%;
  max-width: 768px;
  text-align: left;
  margin-right: 0rem;
  margin-bottom: 5rem;
  display: block;
}

@media only screen and (max-width: 768px) {
  #about .services .intro {
    margin: 0 auto 5rem;
    text-align: center;
  }
}

@media only screen and (max-width: 600px) {
  #about .services .intro {
    width: 100%;
    text-align: left;
  }
}

#about .services .service-grid {
  margin-top: 2rem;
}

#about .services .service-grid .service-item {
  margin-bottom: 5rem;
}

#about .services .service-grid .service-item .item-content {
  position: relative;
  padding-left: 3rem;
}

@media only screen and (max-width: 600px) {
  #about .services .service-grid .service-item .item-content {
    padding-left: 0rem;
    padding-right: 0rem;
  }
}

#about .services .service-grid .service-item .item-content:before {
  content: "";
  position: relative;
  display: inline-block;
  max-width: 4.5rem;
  width: 20%;
  height: 5rem;
  background-size: 100%;
  background-repeat: no-repeat;
}

@media only screen and (max-width: 600px) {
  #about .services .service-grid .service-item .item-content:before {
    width: 5rem;
    display: block;
  }
}

#about .services .service-grid .service-item .item-content .content-txt {
  display: inline-block;
  vertical-align: top;
  padding-left: 2rem;
  width: 75%;
}

@media only screen and (max-width: 600px) {
  #about .services .service-grid .service-item .item-content .content-txt {
    width: 100%;
    display: block;
    padding-left: 0;
  }
}

#about .services .service-grid .service-item .item-content h4 {
  margin-bottom: 1rem;
}

#about .services .service-grid .service-item:nth-child(1) .item-content:before {
  background-image: url("../img/svg/service-01.svg");
}

#about .services .service-grid .service-item:nth-child(2) .item-content:before {
  background-image: url("../img/svg/service-02.svg");
}

#about .services .service-grid .service-item:nth-child(3) .item-content:before {
  background-image: url("../img/svg/service-03.svg");
}

#about .services .service-grid .service-item:nth-child(4) .item-content:before {
  background-image: url("../img/svg/service-04.svg");
}

#about .services .service-grid .service-item:nth-child(5) .item-content:before {
  background-image: url("../img/svg/service-05.svg");
}

#about .services .service-grid .service-item:nth-child(6) .item-content:before {
  background-image: url("../img/svg/service-06.svg");
}

#about .portfolio .logo-wrapper .logo-item {
  margin-bottom: 100px;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

@media only screen and (max-width: 768px) {
  #about .portfolio .logo-wrapper .logo-item {
    -ms-flex-preferred-size: 33.33%;
        flex-basis: 33.33%;
  }
}

@media only screen and (max-width: 600px) {
  #about .portfolio .logo-wrapper .logo-item {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
  }
}

#about .portfolio .logo-wrapper .logo-item img {
  max-width: 130px;
  max-height: 130px;
  width: 100%;
  margin: auto;
  display: block;
}

#about .team {
  background-color: #f9f9f9;
}

#about .team .member-item {
  padding: 0 2rem;
  margin-bottom: 6rem;
  cursor: pointer;
}

#about .team .member-item:nth-last-child(1), #about .team .member-item:nth-last-child(2), #about .team .member-item:nth-last-child(3) {
  margin-bottom: 0;
}

@media only screen and (max-width: 768px) {
  #about .team .member-item:nth-last-child(2), #about .team .member-item:nth-last-child(3) {
    margin-bottom: 6rem;
  }
}

@media only screen and (max-width: 768px) {
  #about .team .member-item .member-content {
    max-width: 400px;
  }
}

#about .team .member-item .member-content .member-img-container {
  position: relative;
  overflow: hidden;
}

#about .team .member-item .member-content .member-img-container:hover .member-img-fun {
  opacity: 1;
}

#about .team .member-item .member-content .member-img {
  width: 100%;
}

#about .team .member-item .member-content .member-img-fun {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  opacity: 0;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

#about .team .member-item .member-content h5 {
  font-family: "rational-bold", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  text-transform: uppercase;
  margin: 0.5rem;
}

@media only screen and (max-width: 768px) {
  #about .team .member-item .member-content h5 {
    margin: 1rem auto 0.5rem;
    font-size: 18px;
    text-align: center;
  }
}

@media only screen and (max-width: 600px) {
  #about .team .member-item .member-content h5 {
    font-size: 16px;
  }
}

#about .team .member-item .member-content p {
  margin-left: 1rem;
}

@media only screen and (max-width: 768px) {
  #about .team .member-item .member-content p {
    margin-left: 0;
    text-align: center;
  }
}

#about .offices {
  width: 100%;
  height: 100vh;
}

@media only screen and (max-width: 768px) {
  #about .offices {
    height: 100%;
  }
}

#about .offices .boxed {
  width: 100%;
  height: 100%;
}

#about .offices .offices-wrapper {
  width: 100%;
  height: 100%;
}

#about .offices .office-item {
  width: 100%;
  height: 100%;
  color: #ffffff;
  padding: 0 60px;
  margin-top: 100px;
}

@media only screen and (max-width: 768px) {
  #about .offices .office-item {
    visibility: visible;
    opacity: 1;
    padding: 0 20px;
    margin: 0 auto 4rem;
  }
}

#about .offices .office-item .office-bg {
  width: 100%;
  height: 100vh;
  -webkit-transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
}

@media only screen and (max-width: 768px) {
  #about .offices .office-item .office-bg {
    visibility: visible;
    opacity: 1;
    height: 100%;
  }
}

#about .offices .office-item .filter-dark {
  visibility: hidden;
  z-index: -1;
}

@media only screen and (max-width: 768px) {
  #about .offices .office-item .filter-dark {
    z-index: 0;
  }
}

#about .offices .office-item .office-content {
  width: 100%;
  display: block;
  position: relative;
  overflow: hidden;
}

@media only screen and (max-width: 768px) {
  #about .offices .office-item .office-content {
    height: auto;
  }
}

#about .offices .office-item .office-name {
  font-family: "rational-bold", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  display: block;
  margin-bottom: 1rem;
  opacity: 1;
  -webkit-transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  text-align: center;
  cursor: pointer;
}

@media only screen and (max-width: 768px) {
  #about .offices .office-item .office-name {
    color: #ffb400;
    opacity: 1;
  }
}

#about .offices .office-item .office-name:after {
  content: "";
  display: block;
  width: 0%;
  height: 4px;
  margin: 8px auto 0;
  background-color: #ffb400;
  -webkit-transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

@media only screen and (max-width: 768px) {
  #about .offices .office-item .office-name:after {
    margin: 6px auto;
    width: 50px;
  }
}

#about .offices .office-item .office-name:hover, #about .offices .office-item .office-name:focus {
  color: #ffb400;
  opacity: 1;
}

#about .offices .office-item .office-name:hover:after, #about .offices .office-item .office-name:focus:after {
  width: 50px;
}

#about .offices .office-item .office-desc {
  width: 100%;
  opacity: 1;
  margin-top: 2rem;
  text-align: left;
  -webkit-transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

@media only screen and (max-width: 768px) {
  #about .offices .office-item .office-desc {
    opacity: 1;
  }
}

#about .offices .office-item .office-desc p {
  text-shadow: 3px 3px 7px #1f1f1f;
}

#about .offices .office-item.active .filter-dark {
  visibility: visible;
}

#about .offices .office-item.active .office-name {
  color: #ffb400;
}

#about .offices .office-item.active .office-name:after {
  width: 50px;
}

#about .offices .offices-content {
  position: absolute;
  top: 50%;
  left: 20%;
  -webkit-transform: translate(-20%, -50%);
          transform: translate(-20%, -50%);
}

@media only screen and (max-width: 768px) {
  #about .offices .offices-content {
    width: 100%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
}

#about .offices .offices-content a {
  font-family: "rational-bold", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  color: #ffffff;
  display: block;
  margin-bottom: 1rem;
}

@media only screen and (max-width: 768px) {
  #about .offices .offices-content a {
    font-size: 4rem;
    text-align: center;
  }
}

@media only screen and (max-width: 600px) {
  #about .offices .offices-content a {
    font-size: 3rem;
  }
}

#about .offices .offices-content a:after {
  content: "";
  display: block;
  width: 0%;
  height: 4px;
  margin-top: 0.6rem;
  background-color: #ffb400;
  -webkit-transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

@media only screen and (max-width: 768px) {
  #about .offices .offices-content a:after {
    margin: 6px auto;
  }
}

#about .offices .offices-content a:hover, #about .offices .offices-content a:focus, #about .offices .offices-content a.active {
  color: #ffb400;
}

#about .offices .offices-content a:hover:after, #about .offices .offices-content a:focus:after, #about .offices .offices-content a.active:after {
  width: 50px;
}

/*     
    Name: _contact.scss    
    Author: Zakaria El Khachia
    Client:
*/
#contact {
  /* Contact Form  */
  /* Contact Info */
}

#contact .form-wrapper {
  padding-top: 220px;
}

#contact .form-headline {
  text-align: center;
  margin-bottom: 4rem;
}

#contact iframe {
  width: 70%;
  max-width: 768px;
  height: 100vh;
  left: 50%;
  -webkit-transform: translateX(-60%);
          transform: translateX(-60%);
  display: block;
  position: relative;
}

@media (max-width: 1140px) {
  #contact iframe {
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}

@media only screen and (max-width: 768px) {
  #contact iframe {
    width: 100%;
  }
}

@media only screen and (max-width: 600px) {
  #contact iframe {
    height: 180vh;
  }
}

#contact .form-container {
  width: 80%;
  max-width: 500px;
  margin: auto;
}

#contact .form-container .field {
  width: 100%;
  margin-bottom: 2rem;
  position: relative;
  display: block;
}

#contact .form-container .field p {
  color: #666666;
  position: absolute;
  display: inline-block;
  vertical-align: middle;
  margin-right: 2rem;
  left: 2.5rem;
  top: 50%;
  -webkit-transform: translateY(-12px);
          transform: translateY(-12px);
  -webkit-transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}

@media only screen and (max-width: 600px) {
  #contact .form-container .field p {
    left: 1.5rem;
  }
}

#contact .form-container .field input,
#contact .form-container .field textarea {
  display: inline-block;
  vertical-align: middle;
  width: 100%;
  min-height: 60px;
  padding: 2rem;
  background-color: #ffffff;
  color: #1f1f1f;
  border: none;
  resize: none;
  -webkit-transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

@media only screen and (max-width: 600px) {
  #contact .form-container .field input,
  #contact .form-container .field textarea {
    padding: 1rem;
  }
}

#contact .form-container .field input:focus,
#contact .form-container .field textarea:focus {
  outline: none;
}

#contact .form-container .field input.clicked,
#contact .form-container .field textarea.clicked {
  -webkit-box-shadow: 7px 7px 7px #f1f1f1;
          box-shadow: 7px 7px 7px #f1f1f1;
}

#contact .form-container .field input.clicked + p,
#contact .form-container .field textarea.clicked + p {
  left: -4rem;
  color: #1f1f1f;
}

@media only screen and (max-width: 600px) {
  #contact .form-container .field input.clicked + p,
  #contact .form-container .field textarea.clicked + p {
    left: -2.5rem;
  }
}

#contact .form-container .submit {
  margin: 4rem auto 0;
  display: block;
  position: relative;
  overflow: hidden;
}

#contact .form-container .submit input {
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  position: absolute;
}

#contact .contact-info {
  width: 100%;
  height: 100vh;
}

@media only screen and (max-width: 768px) {
  #contact .contact-info {
    height: auto;
  }
}

#contact .contact-info .info-container {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  text-align: left;
}

@media only screen and (max-width: 768px) {
  #contact .contact-info .info-container {
    position: relative;
    text-align: center;
    margin-bottom: 100px;
  }
}

#contact .contact-info .info-container h3 {
  font-family: "rational-bold", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  color: #ffffff;
  display: block;
  margin-bottom: 2rem;
}

#contact .contact-info .info-container h3:after {
  content: "";
  display: block;
  margin: 0.6rem 0 0;
  width: 50px;
  height: 4px;
  background-color: #ffb400;
  -webkit-transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

@media only screen and (max-width: 768px) {
  #contact .contact-info .info-container h3:after {
    margin: 0.6rem auto 0;
  }
}

#contact .contact-info .info-container h3.active {
  color: #ffb400;
}

#contact .contact-info .info-container p {
  color: #ffffff;
}

#contact .contact-info .info-container p a {
  color: #ffffff;
}

#contact .contact-info .info-container .map-link {
  margin-top: 2rem;
  display: block;
  color: #ffb400;
  cursor: pointer;
}

@media only screen and (max-width: 768px) {
  #contact .contact-info .info-container .map-link {
    margin-left: -1rem;
  }
}
/*# sourceMappingURL=main.css.map */