/*     
    Name: _variables.scss    
    Author: Zakaria El Khachia
    Client:
*/
/* Colors */
/* Fonts */
/* Transforms */
/* Breakpoints */
/*     
    Name: _animations.scss    
    Author: Zakaria El Khachia
    Client:
*/
/* Reveal Content */
@import "vendors/bootstrap.min.css";
.reveal-x {
  opacity: 0;
  transform: translateX(-70px);
  transition: 0.75s transform cubic-bezier(0.32, 1.01, 0.35, 1.01), 0.5s opacity 0.1s;
  will-change: transform;
}

.reveal-y {
  opacity: 0;
  transform: translateY(100px);
  transition: 0.75s transform cubic-bezier(0.32, 1.01, 0.35, 1.01), 0.5s opacity 0.1s;
  will-change: transform;
}

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

/* Reveal Text */
.reveal-text,
.reveal-text::after {
  animation-delay: var(--animation-delay, 2s);
  animation-iteration-count: var(--iterations, 1);
  animation-duration: var(--duration, 800ms);
  animation-fill-mode: both;
  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;
  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;
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
  animation-name: text-revealer;
}

@keyframes clip-text {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}
@keyframes text-revealer {
  0%, 50% {
    transform-origin: 0 50%;
  }
  60%, 100% {
    transform-origin: 100% 50%;
  }
  60% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}
@keyframes slideLink {
  0% {
    opacity: 0;
    left: -2rem;
  }
  20% {
    opacity: 1;
    left: 0rem;
  }
  80% {
    opacity: 1;
    left: 0rem;
  }
  100% {
    left: 2rem;
    opacity: 0;
  }
}
@keyframes chevronBounce {
  0% {
    transform: translateY(0%);
  }
  50% {
    transform: translateY(20%);
  }
  100% {
    transform: translateY(0%);
  }
}
@keyframes spinLoader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes fadeChevron {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes slideChevron {
  0% {
    transform: translate3d(-50%, 0, 0);
    opacity: 0;
  }
  15% {
    transform: translate3d(0%, 0, 0);
    opacity: 1;
  }
  85% {
    transform: translate3d(0%, 0, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(50%, 0, 0);
    opacity: 0;
  }
}
@keyframes slideChevronVertical {
  0% {
    transform: translate3d(0, -50%, 0) rotate(90deg);
    opacity: 0;
  }
  35% {
    transform: translate3d(0%, 0, 0) rotate(90deg);
    opacity: 1;
  }
  65% {
    transform: translate3d(0%, 0, 0) rotate(90deg);
    opacity: 1;
  }
  100% {
    transform: translate3d(0, 50%, 0) rotate(90deg);
    opacity: 0;
  }
}
@keyframes waddle {
  0% {
    transform: rotate(15deg);
  }
  50% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(15deg);
  }
}
/* 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: " ";
  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;
}

* {
  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 {
  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 {
  box-sizing: inherit;
}

html,
body {
  width: 100%;
  height: 100%;
  font-family: "ceraRegular", Arial, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  font-weight: normal;
  line-height: 1.5;
  color: #101010;
  background-color: #ffffff;
}

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

/* Anchor */
a {
  text-decoration: none;
  font-weight: 400;
  transition: 0.25s ease;
  color: #101010;
}
a:hover {
  opacity: 1 !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "ceraBold", Arial, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  line-height: 1.2;
  font-weight: normal;
}

@media screen and (max-width : 600px) {
  h1 {
    letter-spacing: -1px;
  }
}

@media screen and (max-width : 600px) {
  h2 {
    letter-spacing: -1px;
  }
}

@media screen and (max-width : 600px) {
  h3 {
    letter-spacing: -1px;
  }
}

h3 {
  line-height: 1.4;
}

b, strong {
  font-family: "ceraBold", Arial, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
}

i {
  font-style: italic;
}

/*     
    Name: _typo.scss    
    Author: Zakaria El Khachia
    Client: Zakaria Elk
*/
/* Font Name */
@font-face {
  font-family: "ceraBold";
  src: url("../fonts/cerapro/cerapro-bold.woff") format("woff");
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: "ceraMedium";
  src: url("../fonts/cerapro/cerapro-medium.woff") format("woff");
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: "ceraRegular";
  src: url("../fonts/cerapro/cerapro-regular.woff") format("woff");
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: "ceraLight";
  src: url("../fonts/cerapro/cerapro-light.woff") format("woff");
  font-style: normal;
  font-weight: normal;
}
/* Responsive font sizes */
.size-1 {
  font-size: 36px;
}
@media (min-width: 320px) {
  .size-1 {
    font-size: calc(34.5px + 100vw * 0.0046875);
  }
}
@media (min-width: 1600px) {
  .size-1 {
    font-size: 42px;
  }
}

.size-2, .error-wrapper .error-txt, .maintenance-container .maintenance-message h1, .headline {
  font-size: 32px;
}
@media (min-width: 320px) {
  .size-2, .error-wrapper .error-txt, .maintenance-container .maintenance-message h1, .headline {
    font-size: calc(31px + 100vw * 0.003125);
  }
}
@media (min-width: 1600px) {
  .size-2, .error-wrapper .error-txt, .maintenance-container .maintenance-message h1, .headline {
    font-size: 36px;
  }
}

.size-3, #work .hero-content .banner-txt h1, #work-list .project-container .project-text .project-title, #about .about-container .footer-outro, #home-welcome .welcome-content .welcome-statement div.dynamic-welcome {
  font-size: 24px;
}
@media (min-width: 320px) {
  .size-3, #work .hero-content .banner-txt h1, #work-list .project-container .project-text .project-title, #about .about-container .footer-outro, #home-welcome .welcome-content .welcome-statement div.dynamic-welcome {
    font-size: calc(22px + 100vw * 0.00625);
  }
}
@media (min-width: 1600px) {
  .size-3, #work .hero-content .banner-txt h1, #work-list .project-container .project-text .project-title, #about .about-container .footer-outro, #home-welcome .welcome-content .welcome-statement div.dynamic-welcome {
    font-size: 32px;
  }
}

.size-4, #work .next-post-nav .next-label,
#work div[role=link] .next-label, #work .section-chapter .section-title, #work .hero-content .banner-txt .desc, #work-list .project-container .project-text .desc, #about .about-container .intro, #home-welcome .welcome-content .welcome-statement div.static-welcome p {
  font-size: 21px;
}
@media (min-width: 320px) {
  .size-4, #work .next-post-nav .next-label,
  #work div[role=link] .next-label, #work .section-chapter .section-title, #work .hero-content .banner-txt .desc, #work-list .project-container .project-text .desc, #about .about-container .intro, #home-welcome .welcome-content .welcome-statement div.static-welcome p {
    font-size: calc(20.25px + 100vw * 0.00234375);
  }
}
@media (min-width: 1600px) {
  .size-4, #work .next-post-nav .next-label,
  #work div[role=link] .next-label, #work .section-chapter .section-title, #work .hero-content .banner-txt .desc, #work-list .project-container .project-text .desc, #about .about-container .intro, #home-welcome .welcome-content .welcome-statement div.static-welcome p {
    font-size: 24px;
  }
}

.size-5, #work .next-post-nav .next-link,
#work div[role=link] .next-link, #work .section-chapter .info-content-block, #work .section-chapter .subsection-title, #work .hero-content .cover-container .project-meta .meta-element .meta-content, #work .hero-content .cover-container .project-meta .meta-element .meta-label, #about .about-container .contact-info .email, .nav-wrapper .nav-container .nav-menu a, header .top-header .logo-link a .bottom-part, header .top-header .logo-link a .top-part, html,
body {
  font-size: 18px;
}
@media (min-width: 320px) {
  .size-5, #work .next-post-nav .next-link,
  #work div[role=link] .next-link, #work .section-chapter .info-content-block, #work .section-chapter .subsection-title, #work .hero-content .cover-container .project-meta .meta-element .meta-content, #work .hero-content .cover-container .project-meta .meta-element .meta-label, #about .about-container .contact-info .email, .nav-wrapper .nav-container .nav-menu a, header .top-header .logo-link a .bottom-part, header .top-header .logo-link a .top-part, html,
  body {
    font-size: calc(17.25px + 100vw * 0.00234375);
  }
}
@media (min-width: 1600px) {
  .size-5, #work .next-post-nav .next-link,
  #work div[role=link] .next-link, #work .section-chapter .info-content-block, #work .section-chapter .subsection-title, #work .hero-content .cover-container .project-meta .meta-element .meta-content, #work .hero-content .cover-container .project-meta .meta-element .meta-label, #about .about-container .contact-info .email, .nav-wrapper .nav-container .nav-menu a, header .top-header .logo-link a .bottom-part, header .top-header .logo-link a .top-part, html,
  body {
    font-size: 21px;
  }
}

.size-6, #work .section-chapter .post-link, #work .section-chapter .visual-content .wp-caption-text {
  font-size: 14px;
}
@media (min-width: 320px) {
  .size-6, #work .section-chapter .post-link, #work .section-chapter .visual-content .wp-caption-text {
    font-size: calc(13px + 100vw * 0.003125);
  }
}
@media (min-width: 1600px) {
  .size-6, #work .section-chapter .post-link, #work .section-chapter .visual-content .wp-caption-text {
    font-size: 18px;
  }
}

.size-7 {
  font-size: 12px;
}
@media (min-width: 320px) {
  .size-7 {
    font-size: calc(11.5px + 100vw * 0.0015625);
  }
}
@media (min-width: 1600px) {
  .size-7 {
    font-size: 14px;
  }
}

@media screen and (max-width : 1280px) {
  .size-1 {
    font-size: 32px;
  }
}
@media screen and (max-width : 1280px) and (min-width: 320px) {
  .size-1 {
    font-size: calc(31px + 100vw * 0.003125);
  }
}
@media screen and (max-width : 1280px) and (min-width: 1600px) {
  .size-1 {
    font-size: 36px;
  }
}
@media screen and (max-width : 1280px) {
  .size-2, .error-wrapper .error-txt, .maintenance-container .maintenance-message h1, .headline {
    font-size: 28px;
  }
}
@media screen and (max-width : 1280px) and (min-width: 320px) {
  .size-2, .error-wrapper .error-txt, .maintenance-container .maintenance-message h1, .headline {
    font-size: calc(27px + 100vw * 0.003125);
  }
}
@media screen and (max-width : 1280px) and (min-width: 1600px) {
  .size-2, .error-wrapper .error-txt, .maintenance-container .maintenance-message h1, .headline {
    font-size: 32px;
  }
}
@media screen and (max-width : 1280px) {
  .size-3, #work .hero-content .banner-txt h1, #work-list .project-container .project-text .project-title, #about .about-container .footer-outro, #home-welcome .welcome-content .welcome-statement div.dynamic-welcome {
    font-size: 24px;
  }
}
@media screen and (max-width : 1280px) and (min-width: 320px) {
  .size-3, #work .hero-content .banner-txt h1, #work-list .project-container .project-text .project-title, #about .about-container .footer-outro, #home-welcome .welcome-content .welcome-statement div.dynamic-welcome {
    font-size: calc(23px + 100vw * 0.003125);
  }
}
@media screen and (max-width : 1280px) and (min-width: 1600px) {
  .size-3, #work .hero-content .banner-txt h1, #work-list .project-container .project-text .project-title, #about .about-container .footer-outro, #home-welcome .welcome-content .welcome-statement div.dynamic-welcome {
    font-size: 28px;
  }
}
@media screen and (max-width : 1280px) {
  .size-4, #work .next-post-nav .next-label,
  #work div[role=link] .next-label, #work .section-chapter .section-title, #work .hero-content .banner-txt .desc, #work-list .project-container .project-text .desc, #about .about-container .intro, #home-welcome .welcome-content .welcome-statement div.static-welcome p {
    font-size: 21px;
  }
}
@media screen and (max-width : 1280px) and (min-width: 320px) {
  .size-4, #work .next-post-nav .next-label,
  #work div[role=link] .next-label, #work .section-chapter .section-title, #work .hero-content .banner-txt .desc, #work-list .project-container .project-text .desc, #about .about-container .intro, #home-welcome .welcome-content .welcome-statement div.static-welcome p {
    font-size: calc(20.25px + 100vw * 0.00234375);
  }
}
@media screen and (max-width : 1280px) and (min-width: 1600px) {
  .size-4, #work .next-post-nav .next-label,
  #work div[role=link] .next-label, #work .section-chapter .section-title, #work .hero-content .banner-txt .desc, #work-list .project-container .project-text .desc, #about .about-container .intro, #home-welcome .welcome-content .welcome-statement div.static-welcome p {
    font-size: 24px;
  }
}
@media screen and (max-width : 1280px) {
  .size-5, #work .next-post-nav .next-link,
  #work div[role=link] .next-link, #work .section-chapter .info-content-block, #work .section-chapter .subsection-title, #work .hero-content .cover-container .project-meta .meta-element .meta-content, #work .hero-content .cover-container .project-meta .meta-element .meta-label, #about .about-container .contact-info .email, .nav-wrapper .nav-container .nav-menu a, header .top-header .logo-link a .bottom-part, header .top-header .logo-link a .top-part, html,
  body {
    font-size: 18px;
  }
  .size-6, #work .section-chapter .post-link, #work .section-chapter .visual-content .wp-caption-text {
    font-size: 16px;
  }
  .size-7 {
    font-size: 14px;
  }
}
@media screen and (max-width : 1140px) {
  .size-1 {
    font-size: 32px;
  }
}
@media screen and (max-width : 1140px) and (min-width: 320px) {
  .size-1 {
    font-size: calc(31px + 100vw * 0.003125);
  }
}
@media screen and (max-width : 1140px) and (min-width: 1600px) {
  .size-1 {
    font-size: 36px;
  }
}
@media screen and (max-width : 1140px) {
  .size-2, .error-wrapper .error-txt, .maintenance-container .maintenance-message h1, .headline {
    font-size: 24px;
  }
}
@media screen and (max-width : 1140px) and (min-width: 320px) {
  .size-2, .error-wrapper .error-txt, .maintenance-container .maintenance-message h1, .headline {
    font-size: calc(22px + 100vw * 0.00625);
  }
}
@media screen and (max-width : 1140px) and (min-width: 1600px) {
  .size-2, .error-wrapper .error-txt, .maintenance-container .maintenance-message h1, .headline {
    font-size: 32px;
  }
}
@media screen and (max-width : 1140px) {
  .size-3, #work .hero-content .banner-txt h1, #work-list .project-container .project-text .project-title, #about .about-container .footer-outro, #home-welcome .welcome-content .welcome-statement div.dynamic-welcome {
    font-size: 21px;
  }
}
@media screen and (max-width : 1140px) and (min-width: 320px) {
  .size-3, #work .hero-content .banner-txt h1, #work-list .project-container .project-text .project-title, #about .about-container .footer-outro, #home-welcome .welcome-content .welcome-statement div.dynamic-welcome {
    font-size: calc(20.25px + 100vw * 0.00234375);
  }
}
@media screen and (max-width : 1140px) and (min-width: 1600px) {
  .size-3, #work .hero-content .banner-txt h1, #work-list .project-container .project-text .project-title, #about .about-container .footer-outro, #home-welcome .welcome-content .welcome-statement div.dynamic-welcome {
    font-size: 24px;
  }
}
@media screen and (max-width : 1140px) {
  .size-4, #work .next-post-nav .next-label,
  #work div[role=link] .next-label, #work .section-chapter .section-title, #work .hero-content .banner-txt .desc, #work-list .project-container .project-text .desc, #about .about-container .intro, #home-welcome .welcome-content .welcome-statement div.static-welcome p {
    font-size: 18px;
  }
}
@media screen and (max-width : 1140px) and (min-width: 320px) {
  .size-4, #work .next-post-nav .next-label,
  #work div[role=link] .next-label, #work .section-chapter .section-title, #work .hero-content .banner-txt .desc, #work-list .project-container .project-text .desc, #about .about-container .intro, #home-welcome .welcome-content .welcome-statement div.static-welcome p {
    font-size: calc(17.25px + 100vw * 0.00234375);
  }
}
@media screen and (max-width : 1140px) and (min-width: 1600px) {
  .size-4, #work .next-post-nav .next-label,
  #work div[role=link] .next-label, #work .section-chapter .section-title, #work .hero-content .banner-txt .desc, #work-list .project-container .project-text .desc, #about .about-container .intro, #home-welcome .welcome-content .welcome-statement div.static-welcome p {
    font-size: 21px;
  }
}
@media screen and (max-width : 1140px) {
  .size-5, #work .next-post-nav .next-link,
  #work div[role=link] .next-link, #work .section-chapter .info-content-block, #work .section-chapter .subsection-title, #work .hero-content .cover-container .project-meta .meta-element .meta-content, #work .hero-content .cover-container .project-meta .meta-element .meta-label, #about .about-container .contact-info .email, .nav-wrapper .nav-container .nav-menu a, header .top-header .logo-link a .bottom-part, header .top-header .logo-link a .top-part, html,
  body {
    font-size: 18px;
  }
  .size-6, #work .section-chapter .post-link, #work .section-chapter .visual-content .wp-caption-text {
    font-size: 16px;
  }
  .size-7 {
    font-size: 14px;
  }
}
@media screen and (max-width : 991px) {
  .size-1 {
    font-size: 42px;
  }
}
@media screen and (max-width : 991px) and (min-width: 320px) {
  .size-1 {
    font-size: calc(40.5px + 100vw * 0.0046875);
  }
}
@media screen and (max-width : 991px) and (min-width: 1600px) {
  .size-1 {
    font-size: 48px;
  }
}
@media screen and (max-width : 991px) {
  .size-2, .error-wrapper .error-txt, .maintenance-container .maintenance-message h1, .headline {
    font-size: 36px;
  }
}
@media screen and (max-width : 991px) and (min-width: 320px) {
  .size-2, .error-wrapper .error-txt, .maintenance-container .maintenance-message h1, .headline {
    font-size: calc(34.5px + 100vw * 0.0046875);
  }
}
@media screen and (max-width : 991px) and (min-width: 1600px) {
  .size-2, .error-wrapper .error-txt, .maintenance-container .maintenance-message h1, .headline {
    font-size: 42px;
  }
}
@media screen and (max-width : 991px) {
  .size-3, #work .hero-content .banner-txt h1, #work-list .project-container .project-text .project-title, #about .about-container .footer-outro, #home-welcome .welcome-content .welcome-statement div.dynamic-welcome {
    font-size: 24px;
  }
}
@media screen and (max-width : 991px) and (min-width: 320px) {
  .size-3, #work .hero-content .banner-txt h1, #work-list .project-container .project-text .project-title, #about .about-container .footer-outro, #home-welcome .welcome-content .welcome-statement div.dynamic-welcome {
    font-size: calc(21px + 100vw * 0.009375);
  }
}
@media screen and (max-width : 991px) and (min-width: 1600px) {
  .size-3, #work .hero-content .banner-txt h1, #work-list .project-container .project-text .project-title, #about .about-container .footer-outro, #home-welcome .welcome-content .welcome-statement div.dynamic-welcome {
    font-size: 36px;
  }
}
@media screen and (max-width : 600px) {
  .size-1 {
    font-size: 42px;
  }
}
@media screen and (max-width : 600px) and (min-width: 320px) {
  .size-1 {
    font-size: calc(40.5px + 100vw * 0.0046875);
  }
}
@media screen and (max-width : 600px) and (min-width: 1600px) {
  .size-1 {
    font-size: 48px;
  }
}
@media screen and (max-width : 600px) {
  .size-2, .error-wrapper .error-txt, .maintenance-container .maintenance-message h1, .headline {
    font-size: 36px;
  }
}
@media screen and (max-width : 600px) and (min-width: 320px) {
  .size-2, .error-wrapper .error-txt, .maintenance-container .maintenance-message h1, .headline {
    font-size: calc(34.5px + 100vw * 0.0046875);
  }
}
@media screen and (max-width : 600px) and (min-width: 1600px) {
  .size-2, .error-wrapper .error-txt, .maintenance-container .maintenance-message h1, .headline {
    font-size: 42px;
  }
}
@media screen and (max-width : 600px) {
  .size-3, #work .hero-content .banner-txt h1, #work-list .project-container .project-text .project-title, #about .about-container .footer-outro, #home-welcome .welcome-content .welcome-statement div.dynamic-welcome {
    font-size: 24px;
  }
  .size-4, #work .next-post-nav .next-label,
  #work div[role=link] .next-label, #work .section-chapter .section-title, #work .hero-content .banner-txt .desc, #work-list .project-container .project-text .desc, #about .about-container .intro, #home-welcome .welcome-content .welcome-statement div.static-welcome p {
    font-size: 21px;
  }
  .size-5, #work .next-post-nav .next-link,
  #work div[role=link] .next-link, #work .section-chapter .info-content-block, #work .section-chapter .subsection-title, #work .hero-content .cover-container .project-meta .meta-element .meta-content, #work .hero-content .cover-container .project-meta .meta-element .meta-label, #about .about-container .contact-info .email, .nav-wrapper .nav-container .nav-menu a, header .top-header .logo-link a .bottom-part, header .top-header .logo-link a .top-part, html,
  body {
    font-size: 18px;
  }
  .size-6, #work .section-chapter .post-link, #work .section-chapter .visual-content .wp-caption-text {
    font-size: 14px;
  }
  .size-7 {
    font-size: 12px;
  }
}
/*     
    Name: _helpers.scss    
    Author: Zakaria El Khachia
    Client: Zakaria Elk
*/
/**
 * 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 {
  opacity: 1;
  visibility: visible;
}

.is-hidden {
  opacity: 0;
  visibility: hidden;
}

.highlight {
  font-family: "ceraBold", Arial, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
}

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

.full-background {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.highlight {
  font-family: "ceraBold", Arial, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
}

.highlight-u {
  font-family: "ceraBold", Arial, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  text-decoration: underline;
}

.d-table {
  height: 100%;
  display: table;
}

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

.no-scroll {
  overflow: hidden;
}

/*     
    Name: _media.scss    
    Author: Zakaria El Khachia
    Client:
*/
/*     
    Name: _header.scss    
    Author: Zakaria El Khachia
    Client:
*/
header {
  position: relative;
  width: 100%;
  padding: 2rem 3rem;
  transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  z-index: 20;
}
@media screen and (max-width : 1280px) {
  header {
    padding: 2rem 3rem;
  }
}
@media screen and (max-width : 1140px) {
  header {
    padding: 1.5rem 2rem;
  }
}
@media screen and (max-width : 991px) {
  header {
    padding: 1.5rem 3rem;
  }
}
@media screen and (max-width : 600px) {
  header {
    position: absolute;
    padding: 2rem 2rem 1rem;
  }
}
header.scrolled .top-header {
  align-items: flex-start;
}
header .top-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
header .top-header .logo-link {
  align-self: center;
  color: #ffffff;
}
header .top-header .logo-link a {
  font-weight: normal;
}
header .top-header .logo-link a .top-part {
  font-family: "ceraBold", Arial, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  display: block;
  line-height: 1;
}
header .top-header .logo-link a .bottom-part {
  font-family: "ceraRegular", Arial, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  white-space: nowrap;
  position: absolute;
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
header .top-header .logo-link a .bottom-part.scrolled {
  opacity: 0;
}
@media screen and (max-width : 600px) {
  header .top-header .logo-link a .bottom-part.scrolled {
    opacity: 0;
  }
}
@media screen and (max-width : 600px) {
  header .top-header .logo-link a .bottom-part.scrolled:after {
    width: 0%;
  }
}

/*     
    Name: _footer.scss    
    Author: Zakaria El Khachia
    Client:
*/
/*     
    Name: _nav.scss    
    Author: Zakaria El Khachia
    Client:
*/
/* Nav Toggle */
/* Nav Menu */
@media screen and (max-width : 600px) {
  .nav-wrapper {
    right: 2rem;
    transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  }
}
.nav-wrapper .nav-container .nav-menu a {
  text-transform: lowercase;
  position: relative;
  font-family: "ceraRegular", Arial, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  overflow: hidden;
  display: flex;
  align-items: center;
  row-gap: 1rem;
  flex-direction: row;
  padding: 0;
  z-index: 30;
  transition: all 0.2s cubic-bezier(0.39, 0.575, 0.565, 1);
}
@media screen and (max-width : 991px) {
  .nav-wrapper .nav-container .nav-menu a {
    right: 0;
  }
}
@media screen and (max-width : 600px) {
  .nav-wrapper .nav-container .nav-menu a {
    display: none;
  }
}
.nav-wrapper .nav-container .nav-menu a .icon {
  margin: 5px 5px 0 0;
}
.nav-wrapper .nav-container .nav-menu a span {
  display: flex;
  align-items: center;
}
.nav-wrapper .nav-container .nav-menu a .chevron {
  width: 22px;
  height: 23px;
  margin-left: 5px;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  overflow: hidden;
}
.nav-wrapper .nav-container .nav-menu a .chevron path {
  fill: #ffffff;
}
.nav-wrapper .nav-container .nav-menu a .chevron .chevron-bg {
  transform: translate3d(-100%, 0, 0);
  transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.nav-wrapper .nav-container .nav-menu a .chevron .chevron-triangle {
  transform: translate3d(-100%, 0, 0);
  transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.nav-wrapper .nav-container .nav-menu a:hover {
  transform: skewX(-10deg);
  text-decoration: underline;
}
.nav-wrapper .nav-container .nav-menu a:hover:before {
  transform: translate3d(0%, 0, 0);
}
.nav-wrapper .nav-container .nav-menu a:hover .chevron .chevron-bg {
  transform: translate3d(0%, 0, 0);
}
.nav-wrapper .nav-container .nav-menu a:hover .chevron .chevron-triangle {
  transform: translate3d(0%, 0, 0);
}

/*     
    Name: _common.scss    
    Author: Zakaria El Khachia
    Client:
*/
.page-content {
  width: 100%;
  height: 100%;
}
.content-wrapper {
  margin-left: 120px;
}
.content-wrapper section {
  padding-top: 140px;
  padding-bottom: 140px;
}

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

.boxed {
  padding-left: 3rem;
  padding-right: 3rem;
  max-width: 1480px;
  margin: auto;
  display: block;
}
@media screen and (max-width : 1140px) {
  .boxed {
    padding-left: 2rem;
    padding-right: 2rem;
    max-width: 100%;
  }
}
@media screen and (max-width : 991px) {
  .boxed {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}
@media screen and (max-width : 600px) {
  .boxed {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

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

.intro {
  margin-bottom: 1rem;
}

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

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

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

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

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

.col-1 {
  flex-basis: 8.3333333333%;
}

@media screen and (max-width : 991px) {
  .col-1 {
    flex-basis: 100%;
  }
}
.col-2 {
  flex-basis: 16.6666666667%;
}

@media screen and (max-width : 991px) {
  .col-2 {
    flex-basis: 100%;
  }
}
.col-3 {
  flex-basis: 25%;
}

@media screen and (max-width : 991px) {
  .col-3 {
    flex-basis: 100%;
  }
}
.col-4 {
  flex-basis: 33.3333333333%;
}

@media screen and (max-width : 991px) {
  .col-4 {
    flex-basis: 100%;
  }
}
.col-5 {
  flex-basis: 41.6666666667%;
}

@media screen and (max-width : 991px) {
  .col-5 {
    flex-basis: 100%;
  }
}
.col-6 {
  flex-basis: 50%;
}

@media screen and (max-width : 991px) {
  .col-6 {
    flex-basis: 100%;
  }
}
.col-7 {
  flex-basis: 58.3333333333%;
}

@media screen and (max-width : 991px) {
  .col-7 {
    flex-basis: 100%;
  }
}
.col-8 {
  flex-basis: 66.6666666667%;
}

@media screen and (max-width : 991px) {
  .col-8 {
    flex-basis: 100%;
  }
}
.col-9 {
  flex-basis: 75%;
}

@media screen and (max-width : 991px) {
  .col-9 {
    flex-basis: 100%;
  }
}
.col-10 {
  flex-basis: 83.3333333333%;
}

@media screen and (max-width : 991px) {
  .col-10 {
    flex-basis: 100%;
  }
}
.col-11 {
  flex-basis: 91.6666666667%;
}

@media screen and (max-width : 991px) {
  .col-11 {
    flex-basis: 100%;
  }
}
.col-12 {
  flex-basis: 100%;
}

@media screen and (max-width : 991px) {
  .col-12 {
    flex-basis: 100%;
  }
}
/* Isotop Masonry */
/* Grid Item Sizer*/
.grid-sizer,
.grid-item {
  width: 47%;
}

.gutter-sizer {
  width: 6%;
}

/* Grid Item */
.grid-item {
  float: right;
  margin-bottom: 5rem;
}

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

.col {
  position: relative;
  width: 50%;
}
.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%;
}

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

/*     
    Name: _home.scss    
    Author: TrioTech
    Client:
*/
#loader {
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: #ffffff;
  opacity: 1;
  z-index: 5;
  transition: all 0.5s ease;
}
#loader.off {
  opacity: 0;
  visibility: hidden;
}
#loader .loader-content {
  position: absolute;
  width: 50px;
  height: 50px;
  border-width: 5px 5px 5px 5px;
  border-color: #101010;
  border-style: solid;
  border-radius: 50%;
  border-right-color: #ffffff;
  background-color: #ffffff;
  top: calc(50% - 25px);
  left: calc(50% - 25px);
  animation: spinLoader 1s ease-in-out infinite;
}

.no-scroll {
  overflow: hidden;
}

.img-modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
}

.img-modal.is-open {
  display: block;
}

.img-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
}

.img-modal__figure {
  position: absolute;
  inset: 0;
  margin: 0;
  display: grid;
  place-items: center;
  padding: 4vh 4vw;
}

.img-modal__img {
  max-width: 92vw;
  max-height: 92vh;
  width: auto;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}

.img-modal__close {
  position: fixed;
  top: 16px;
  right: 20px;
  font-size: 32px;
  line-height: 1;
  color: #ffffff;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 10000;
}

.img-modal__close:hover {
  opacity: 0.8;
}

/*     
    Name: _slider.scss    
    Author: Zakaria El Khachia
    Client:
*/
/* Classic Slider */
.slider-container {
  width: 100%;
  height: 100%;
  padding-bottom: 50%;
  position: relative;
  overflow: hidden;
}
@media screen and (max-width : 1280px) {
  .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%;
  transition: 0.5s 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 #f9f9f9;
  width: 2.5rem;
  height: 2.5rem;
  display: inline-block;
  cursor: pointer;
  z-index: 2;
  transition: all cubic-bezier(0.645, 0.045, 0.355, 1) 0.25s;
  outline: none;
}
@media screen and (max-width : 991px) {
  .slider-nav button {
    background-size: 15px;
    width: 40px;
    height: 40px;
  }
}
@media screen and (max-width : 600px) {
  .slider-nav button {
    background-size: 10px;
    width: 30px;
    height: 30px;
  }
}
.slider-nav .__prev {
  transform: rotate(-180deg);
}
.slider-nav .is-off {
  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 screen and (max-width : 1280px) {
  .moving-slider {
    width: 100%;
    height: 100%;
  }
}
@media screen and (max-width : 991px) {
  .moving-slider {
    float: none;
    margin: auto;
  }
}
.moving-slider .slider-content {
  height: 80vh;
  position: relative;
  overflow: hidden;
}
@media screen and (max-width : 1280px) {
  .moving-slider .slider-content {
    height: 60vh;
  }
}
@media screen and (max-width : 991px) {
  .moving-slider .slider-content {
    height: 40vh;
  }
}
@media 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;
  transition: opacity 750ms linear, transform 5s 0.75s linear;
  will-change: opacity, transform;
  width: calc(100% + 7em);
}
.moving-slider .slider-content .slide.displayed {
  opacity: 1;
  transform: translate(5em, 0);
  transition: opacity 750ms linear, transform 15s linear;
}

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

/*     
    Name: _welcome.scss    
    Author: Zakaria El Khachia
    Client: Zakaria Elk
*/
.mobile-avatar {
  display: none;
}
@media screen and (max-width : 991px) {
  .mobile-avatar {
    display: block;
    opacity: 0;
    position: relative;
    width: 100px;
    height: 100px;
    float: right;
    margin: 0rem 2rem 3rem;
    transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  }
}

.ripple-overlay {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 0%;
  position: relative;
  background-color: rgba(0, 0, 0, 0.3);
  backdrop-filter: saturate(180%) blur(10px);
}

.side-visual {
  width: 28%;
  height: 56%;
  min-width: 300px;
  min-height: 600px;
  position: relative !important;
  opacity: 0;
  transition: all 1s ease;
  background-color: transparent;
  background-size: cover;
  background-repeat: no-repeat;
}
@media screen and (max-width : 1480px) {
  .side-visual {
    min-width: 350px;
    min-height: 450px;
  }
}
@media screen and (max-width : 1280px) {
  .side-visual {
    width: 450px;
    height: 450px;
    min-width: 300px;
    min-height: 400px;
  }
}
@media screen and (max-width : 1140px) {
  .side-visual {
    width: 350px;
    height: 350px;
    min-width: 250px;
    min-height: 350px;
  }
}
@media screen and (max-width : 991px) {
  .side-visual {
    display: none;
    width: 250px;
    height: 350px;
    min-width: 250px;
    min-height: 250px;
    max-width: 250px;
    max-height: 250px;
  }
}
@media screen and (max-width : 600px) {
  .side-visual {
    display: none;
    width: 150px;
    height: 150px;
    min-width: 150px;
    min-height: 150px;
    max-width: 150px;
    max-height: 150px;
  }
}
.side-visual.on {
  opacity: 1;
}
.side-visual img {
  width: 100%;
  height: auto;
  right: -100px;
}
.side-visual canvas {
  height: 100%;
  display: block;
}
.side-visual.scrolled {
  top: 40%;
  right: -80px;
  transform: translateY(-40%);
}

.home-hero-wrapper {
  position: relative;
  margin-bottom: 130px;
}
@media screen and (max-width : 1480px) {
  .home-hero-wrapper {
    margin-bottom: 110px;
  }
}
@media screen and (max-width : 1280px) {
  .home-hero-wrapper {
    margin-bottom: 100px;
  }
}
@media screen and (max-width : 1140px) {
  .home-hero-wrapper {
    margin-bottom: 80px;
  }
}
@media screen and (max-width : 991px) {
  .home-hero-wrapper {
    margin-top: 120px;
    margin-bottom: 0px;
    row-gap: 1rem;
    justify-content: flex-end;
  }
}
@media screen and (max-width : 600px) {
  .home-hero-wrapper {
    row-gap: 1rem;
    justify-content: flex-end;
  }
}

#home-welcome {
  position: relative;
}
#home-welcome .welcome-content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}
#home-welcome .welcome-content .welcome-statement {
  width: 100%;
  padding: 0 2rem 0 0;
  z-index: 1;
  position: relative;
}
@media screen and (max-width : 600px) {
  #home-welcome .welcome-content .welcome-statement {
    padding: 0;
  }
}
#home-welcome .welcome-content .welcome-statement div {
  position: relative;
}
#home-welcome .welcome-content .welcome-statement div.dynamic-welcome {
  display: none;
  font-family: "ceraRegular", Arial, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  letter-spacing: -1px;
  margin-bottom: 0.3rem;
}
@media screen and (max-width : 1280px) {
  #home-welcome .welcome-content .welcome-statement div.dynamic-welcome {
    margin-bottom: 0.1rem;
  }
}
@media screen and (max-width : 991px) {
  #home-welcome .welcome-content .welcome-statement div.dynamic-welcome {
    height: auto;
    overflow: visible;
    margin-bottom: 1rem;
  }
}
#home-welcome .welcome-content .welcome-statement div.dynamic-welcome {
  margin-bottom: 0.5rem;
}
#home-welcome .welcome-content .welcome-statement div.dynamic-welcome span i {
  font-style: normal;
}
#home-welcome .welcome-content .welcome-statement div.dynamic-welcome span i.left-eye {
  transform: rotate(-15deg);
  transform-origin: 100% 0%;
}
#home-welcome .welcome-content .welcome-statement div.dynamic-welcome span i.right-eye {
  transform: rotate(15deg);
  transform-origin: 160% 210%;
}
#home-welcome .welcome-content .welcome-statement div.static-welcome {
  margin-bottom: 1rem;
}
@media screen and (max-width : 991px) {
  #home-welcome .welcome-content .welcome-statement div.static-welcome {
    overflow: visible;
  }
}
@media screen and (max-width : 600px) {
  #home-welcome .welcome-content .welcome-statement div.static-welcome {
    width: 100%;
  }
}
#home-welcome .welcome-content .welcome-statement div.static-welcome p {
  line-height: 150%;
  font-family: "ceraRegular", Arial, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
}
#home-welcome .welcome-content .welcome-statement div.static-welcome a {
  font-family: "ceraBold", Arial, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
}
#home-welcome .welcome-content .welcome-statement div span {
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
@media screen and (max-width : 991px) {
  #home-welcome .welcome-content .welcome-statement div span {
    line-height: 1.1;
  }
}
#home-welcome .welcome-content .welcome-statement .link-container {
  display: flex;
  flex-direction: row;
  -moz-column-gap: 1rem;
       column-gap: 1rem;
  margin-top: 2rem;
}
#home-welcome .welcome-content .welcome-statement .link-container .hero-link {
  position: relative;
  font-family: "ceraRegular", Arial, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  text-decoration: underline;
  display: block;
  opacity: 0;
}
#home-welcome .welcome-content .welcome-statement .link-container .hero-link:hover {
  transform: translate3d(0.2rem, 0, 0) skewX(-10deg);
}
@media screen and (max-width : 991px) {
  #home-welcome .welcome-content .welcome-statement .link-container .hero-link:hover {
    transform: translate3d(0rem, 0.6rem, 0) skewX(-10deg);
  }
}
@media screen and (max-width : 991px) {
  #home-welcome .welcome-content .welcome-statement .link-container .hero-link {
    transform: translate3d(0rem, 0.6rem, 0);
  }
}
#home-welcome .welcome-content .welcome-statement.on span {
  opacity: 1;
}

.home-work-list {
  opacity: 0;
  transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

/*     
    Name: _about.scss    
    Author: Zakaria El Khachia
    Client: Zakaria Elk
*/
#about {
  width: 100%;
  height: auto;
  display: table;
}
#about .about-container {
  max-width: 100%;
  padding: 140px 0 120px 0;
  display: flex;
  flex-direction: column;
  row-gap: 2rem;
  margin: 0 auto;
  text-align: center;
  background-color: #f9f9f9;
  border-radius: 0 0 10px 10px;
}
@media screen and (max-width : 600px) {
  #about .about-container {
    padding: 2rem;
    text-align: left;
  }
}
#about .about-container .footer-outro {
  padding: 0;
}
@media screen and (max-width : 600px) {
  #about .about-container .footer-outro {
    font-size: 21px;
  }
}
#about .about-container .footer-outro p {
  margin-bottom: 2rem;
  text-align: center;
}
#about .about-container .intro {
  line-height: 1.5;
  text-align: center;
  display: inline-block;
}
@media screen and (max-width : 600px) {
  #about .about-container .intro {
    text-align: left;
    font-size: 21px;
  }
}
#about .about-container .intro .mark {
  font-family: "ceraBold", Arial, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  transition: all 0.5s ease 1s;
}
#about .about-container .intro .guitar {
  transform-origin: center;
  animation: waddle 1.2s infinite;
  display: inline-block;
  font-size: 1.7rem;
  padding-left: 0.2rem;
}
@media screen and (max-width : 991px) {
  #about .about-container .intro br {
    display: none;
  }
}
#about .about-container .contact-info {
  display: block;
  margin: auto;
  text-align: center;
}
#about .about-container .contact-info .email {
  text-decoration: underline;
  transition: all 0.2s cubic-bezier(0.39, 0.575, 0.565, 1);
  display: block;
}
#about .about-container .contact-info .email:hover {
  transform: skewX(-10deg);
}
#about .about-container .contact-info .social {
  margin-top: 1rem;
}
#about .about-container .contact-info .social a {
  padding: 0 0.5rem;
}
#about .about-container .contact-info .social a:hover img {
  transform: scale(1.05);
}
#about .about-container .contact-info .social a img {
  width: 40px;
  height: 40px;
  transition: all 0.3s ease;
}
#about.on .about-container .intro .mark {
  font-family: "ceraBold", Arial, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
}

/*     
    Name: _work.scss    
    Author: Zakaria El Khachia
    Client:
*/
@media screen and (max-width : 600px) {
  #work-list .boxed-wide {
    padding-left: 0;
    padding-right: 0;
  }
}
#work-list {
  /* Project Container */
}
#work-list .project-container {
  width: 100%;
  margin: 100px auto;
  display: flex;
  align-items: center;
}
@media screen and (max-width : 991px) {
  #work-list .project-container {
    margin: 100px auto;
  }
}
@media screen and (max-width : 600px) {
  #work-list .project-container {
    margin: 60px auto;
  }
}
@media screen and (max-width : 991px) {
  #work-list .project-container {
    display: block;
  }
}
#work-list .project-container:first-child {
  margin-top: 0;
}
@media screen and (max-width : 991px) {
  #work-list .project-container:first-child {
    padding-top: 0px;
  }
}
#work-list .project-container:first-child .project-text {
  opacity: 1;
}
#work-list .project-container.inverted {
  flex-direction: row-reverse;
}
@media screen and (max-width : 991px) {
  #work-list .project-container.inverted {
    flex-direction: unset;
  }
}
#work-list .project-container.inverted .project-text {
  padding-right: 3rem;
  padding-left: 0;
}
@media screen and (max-width : 1280px) {
  #work-list .project-container.inverted .project-text {
    padding-right: 2.5rem;
  }
}
#work-list .project-container {
  /* Project Visual */
}
#work-list .project-container .project-visual {
  width: 60%;
  height: 100%;
  margin: auto;
  display: block;
  position: relative;
  box-sizing: content-box;
  cursor: pointer;
}
@media screen and (max-width : 991px) {
  #work-list .project-container .project-visual {
    width: 100%;
  }
}
@media screen and (max-width : 600px) {
  #work-list .project-container .project-visual {
    padding-bottom: 0;
    transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  }
}
#work-list .project-container .project-visual a {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
#work-list .project-container .project-visual a:first-child:after {
  display: none;
}
#work-list .project-container .project-visual a:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 1;
  background-color: #101010;
  transition: all 1.5s cubic-bezier(0.19, 1, 0.22, 1);
}
@media screen and (max-width : 991px) {
  #work-list .project-container .project-visual a:after {
    display: none;
  }
}
#work-list .project-container .project-visual a.on:after {
  width: 0;
}
#work-list .project-container .project-visual a.on h3 {
  opacity: 1;
}
#work-list .project-container .project-visual img {
  position: relative;
  transition: all 0.6s cubic-bezier(0.39, 0.575, 0.565, 1);
}
#work-list .project-container .project-visual img.img-1 {
  opacity: 1;
}
@media screen and (max-width : 991px) {
  #work-list .project-container .project-visual img.img-1 {
    width: 100%;
    height: 100%;
    display: block;
    -o-object-fit: cover;
       object-fit: cover;
  }
}
#work-list .project-container .project-visual img.img-2 {
  left: 0;
  top: 0;
  opacity: 0;
  position: absolute;
}
@media screen and (max-width : 991px) {
  #work-list .project-container .project-visual img.img-2 {
    display: none;
  }
}
#work-list .project-container .project-visual canvas {
  padding-bottom: 30px;
  position: absolute;
  top: 0;
  left: 0;
}
@media screen and (max-width : 991px) {
  #work-list .project-container .project-visual canvas {
    display: none;
  }
}
#work-list .project-container .project-visual {
  /* Hover Status on Work Item */
}
#work-list .project-container {
  /* Project Text */
}
#work-list .project-container .project-text {
  width: 40%;
  padding-left: 3rem;
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  transition: transform 0.6s ease, opacity 0.3s ease 0.1s;
}
#work-list .project-container .project-text.on {
  opacity: 1;
  transform: translate3d(0, 0px, 0);
}
@media screen and (max-width : 1280px) {
  #work-list .project-container .project-text {
    padding-left: 2.5rem;
  }
}
@media screen and (max-width : 991px) {
  #work-list .project-container .project-text {
    width: 100%;
    padding: 1rem 0;
  }
}
@media screen and (max-width : 600px) {
  #work-list .project-container .project-text {
    padding: 1.2rem 0;
  }
}
#work-list .project-container .project-text .project-title {
  color: #ffffff;
  cursor: pointer;
}
#work-list .project-container .project-text .desc {
  margin: 0.5rem 0 1.5rem;
}
@media screen and (max-width : 991px) {
  #work-list .project-container .project-text .desc {
    max-width: 60%;
    margin: 0.35rem 0 1rem;
  }
}
@media screen and (max-width : 600px) {
  #work-list .project-container .project-text .desc {
    max-width: 100%;
  }
}
#work-list .project-container .project-text .project-tags {
  font-size: 14px;
  max-width: 100%;
  font-style: italic;
  color: #8b8b8b;
}
#work-list .project-container .project-text .project-tags a {
  color: #8b8b8b;
}
#work-list .project-container .project-text .project-tags a:hover {
  color: #101010;
}
@media screen and (max-width : 600px) {
  #work-list .project-container .project-text .project-tags {
    font-size: 12px;
  }
}
#work-list .project-container .project-text .project-action {
  padding: 0.4rem 0.7rem;
  background: #101010;
  color: #ffffff;
  transition: all 0.6s cubic-bezier(0.075, 0.82, 0.165, 1);
}
#work-list .project-container .project-text .project-action.dark {
  background-color: #ffffff;
  color: #101010;
}
#work-list .project-container .project-text .project-action:after {
  content: ">";
  position: absolute;
  visibility: hidden;
  vertical-align: middle;
  margin-left: 0.6rem;
}
#work-list .project-container {
  /* project-container hover */
}
#work-list .project-container:hover .project-visual img.img-1, #work-list .project-container:focus .project-visual img.img-1 {
  opacity: 0;
}
@media screen and (max-width : 991px) {
  #work-list .project-container:hover .project-visual img.img-1, #work-list .project-container:focus .project-visual img.img-1 {
    opacity: 1;
  }
}
#work-list .project-container:hover .project-visual img.img-2, #work-list .project-container:focus .project-visual img.img-2 {
  opacity: 1;
}
@media screen and (max-width : 991px) {
  #work-list .project-container:hover .project-visual img.img-2, #work-list .project-container:focus .project-visual img.img-2 {
    opacity: 0;
  }
}
#work-list .project-container:hover .project-text .project-action, #work-list .project-container:focus .project-text .project-action {
  padding-right: 2rem;
}
#work-list .project-container:hover .project-text .project-action:after, #work-list .project-container:focus .project-text .project-action:after {
  visibility: visible;
  display: inline-block;
  animation: slideChevron 1.2s ease-out infinite;
}

/*     
    Name: _single-work.scss    
    Author: Zakaria El Khachia
    Client:
*/
#work {
  /* 1. Project Hero */
}
#work .project-hero {
  width: 100%;
  padding-bottom: 120px;
}
@media screen and (max-width : 1140px) {
  #work .project-hero {
    padding-bottom: 60px;
  }
}
@media screen and (max-width : 991px) {
  #work .project-hero {
    padding-bottom: 60px;
  }
}
@media screen and (max-width : 600px) {
  #work .project-hero {
    padding-top: 120px;
    padding-bottom: 20px;
  }
}
#work .hero-content {
  width: 100%;
  height: 100%;
}
#work .hero-content .container-l {
  width: 100%;
  height: 100%;
}
@media screen and (max-width : 991px) {
  #work .hero-content .container-l {
    align-content: center;
  }
}
#work .hero-content .banner-txt {
  align-self: center;
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  transition: transform 0.6s ease, opacity 0.3s ease 0.1s;
  padding-right: 2rem;
}
@media screen and (max-width : 991px) {
  #work .hero-content .banner-txt {
    margin-bottom: 4rem;
    padding-right: 0;
  }
}
#work .hero-content .banner-txt.on {
  opacity: 1;
  transform: translate3d(0, 0px, 0);
}
#work .hero-content .banner-txt h1 {
  margin-bottom: 0.6rem;
}
#work .hero-content .banner-txt .desc {
  width: 90%;
  max-width: 500px;
  line-height: 150%;
  margin-bottom: 20px;
}
@media screen and (max-width : 1280px) {
  #work .hero-content .banner-txt .desc {
    margin-bottom: 15px;
  }
}
@media screen and (max-width : 600px) {
  #work .hero-content .banner-txt .desc {
    width: 100%;
    max-width: 100%;
  }
}
#work .hero-content .banner-txt .discover {
  position: relative;
  font-family: "ceraRegular", Arial, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  text-decoration: underline;
  display: block;
  transition: all 0.3s ease;
}
#work .hero-content .banner-txt .discover:hover {
  transform: translate3d(0.2rem, 0, 0) skewX(-10deg);
}
#work .hero-content .banner-txt .discover span {
  transform: rotate(90deg);
}
#work .hero-content .cover-container {
  margin: auto;
}
#work .hero-content .cover-container .cover-visual {
  align-self: center;
  width: auto;
  position: relative;
  overflow: hidden;
  display: flex;
  margin-bottom: 1.8rem;
}
@media screen and (max-width : 1140px) {
  #work .hero-content .cover-container .cover-visual {
    margin-bottom: 0.75rem;
  }
}
@media screen and (max-width : 991px) {
  #work .hero-content .cover-container .cover-visual {
    height: auto;
    margin-bottom: 4rem;
  }
}
#work .hero-content .cover-container .cover-visual:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  background-color: #ffffff;
  transition: all 0.7s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#work .hero-content .cover-container .cover-visual.on:after {
  transform: translate3d(100%, 0, 0);
}
#work .hero-content .cover-container .cover-visual img {
  width: 100%;
  height: 100%;
  margin: auto;
  -o-object-fit: cover;
     object-fit: cover;
}
@media screen and (max-width : 1140px) {
  #work .hero-content .cover-container .cover-visual img {
    max-height: 360px;
  }
}
@media screen and (max-width : 991px) {
  #work .hero-content .cover-container .cover-visual img {
    height: auto;
  }
}
#work .hero-content .cover-container .project-meta {
  row-gap: 2rem;
}
@media screen and (max-width : 991px) {
  #work .hero-content .cover-container .project-meta {
    row-gap: 1.5rem;
  }
}
#work .hero-content .cover-container .project-meta .meta-element {
  display: flex;
  flex-direction: column;
  row-gap: 0.3rem;
}
#work .hero-content .cover-container .project-meta .meta-element .meta-content {
  font-family: "ceraBold", Arial, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
}
#work .hero-content .cover-container .project-meta .meta-element .meta-content.site-link a {
  display: inline-block;
  transition: all 0.4s cubic-bezier(0.39, 0.575, 0.565, 1);
}
#work .hero-content .cover-container .project-meta .meta-element .meta-content.site-link a:after {
  content: "_";
  display: inline-block;
  vertical-align: top;
  margin-left: -4px;
  animation: fadeChevron 1s infinite;
}
#work .hero-content .cover-container .project-meta .meta-element .meta-content.site-link a:hover, #work .hero-content .cover-container .project-meta .meta-element .meta-content.site-link a:focus {
  text-decoration: underline;
}
#work .hero-content .cover-container .project-meta .meta-element .meta-content .site-link-note {
  font-size: 14px;
  max-width: 200px;
  margin-top: 0.4rem;
  font-style: italic;
  font-family: "ceraRegular", Arial, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  color: #666666;
}
@media screen and (max-width : 600px) {
  #work .hero-content .cover-container .project-meta .meta-element .meta-content .site-link-note {
    font-size: 12px;
    margin-top: 0.2rem;
  }
}
#work .hero-content .scroll-indic {
  position: absolute;
  font-family: "ceraBold", Arial, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  font-style: normal;
  font-size: 1.2rem;
  right: 3rem;
  bottom: 1rem;
  transform-origin: center;
  transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  opacity: 1;
  animation: slideChevronVertical 1.2s ease infinite;
}
#work .hero-content .scroll-indic.scrolled {
  opacity: 0;
  visibility: hidden;
}
#work {
  /* 2. Project Body - Main blocks */
}
#work .project-content {
  padding: 0;
}
@media screen and (max-width : 991px) {
  #work .project-content {
    padding: 0px;
  }
}
@media screen and (max-width : 600px) {
  #work .project-content {
    padding: 0px;
  }
}
@media screen and (max-width : 991px) {
  #work .project-content .container-l {
    display: block;
  }
}
#work .project-content .container-l .menu-wrapper {
  position: relative;
  height: 100%;
}
@media screen and (max-width : 991px) {
  #work .project-content .container-l .menu-wrapper {
    display: none;
  }
}
#work .project-content .container-l .menu-wrapper .project-scrolling-menu {
  position: sticky;
  top: 0px;
  left: 100px;
  transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
#work .project-content .container-l .menu-wrapper .project-scrolling-menu.sticky {
  position: sticky;
  top: 120px;
}
@media screen and (max-width : 1280px) {
  #work .project-content .container-l .menu-wrapper .project-scrolling-menu.sticky {
    top: 50px;
  }
}
@media screen and (max-width : 1140px) {
  #work .project-content .container-l .menu-wrapper .project-scrolling-menu.sticky {
    top: 30px;
  }
}
#work .project-content .container-l .menu-wrapper .project-scrolling-menu .nav-item-container, #work .project-content .container-l .menu-wrapper .project-scrolling-menu .nav-item-chapter {
  padding: 0.2rem 0;
}
@media screen and (max-width : 1140px) {
  #work .project-content .container-l .menu-wrapper .project-scrolling-menu .nav-item-container, #work .project-content .container-l .menu-wrapper .project-scrolling-menu .nav-item-chapter {
    padding: 0.175rem 0;
  }
}
#work .project-content .container-l .menu-wrapper .project-scrolling-menu .nav-item-container a, #work .project-content .container-l .menu-wrapper .project-scrolling-menu .nav-item-chapter a {
  opacity: 0.75;
  transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
#work .project-content .container-l .menu-wrapper .project-scrolling-menu .nav-item-container.top-level, #work .project-content .container-l .menu-wrapper .project-scrolling-menu .nav-item-chapter.top-level {
  margin-top: 1.25rem;
}
@media screen and (max-width : 1140px) {
  #work .project-content .container-l .menu-wrapper .project-scrolling-menu .nav-item-container.top-level, #work .project-content .container-l .menu-wrapper .project-scrolling-menu .nav-item-chapter.top-level {
    margin-top: 1rem;
  }
}
#work .project-content .container-l .menu-wrapper .project-scrolling-menu .nav-item-container.top-level a, #work .project-content .container-l .menu-wrapper .project-scrolling-menu .nav-item-chapter.top-level a {
  cursor: auto;
  text-indent: -10px;
  display: block;
  font-family: "ceraBold", Arial, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
}
#work .project-content .container-l .menu-wrapper .project-scrolling-menu .nav-item-container.top-level:first-child, #work .project-content .container-l .menu-wrapper .project-scrolling-menu .nav-item-chapter.top-level:first-child {
  margin-top: 0;
}
#work .project-content .container-l .menu-wrapper .project-scrolling-menu .nav-item-container.active a, #work .project-content .container-l .menu-wrapper .project-scrolling-menu .nav-item-chapter.active a {
  opacity: 1;
  font-family: "ceraBold", Arial, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
}
@media screen and (max-width : 991px) {
  #work .project-content .container-l .page-body-content {
    width: 100%;
  }
}
#work {
  /* 3. Flexible composer components */
}
#work .section-chapter {
  max-width: 800px;
  padding-top: 60px;
  padding-bottom: 60px;
}
@media screen and (max-width : 1480px) {
  #work .section-chapter {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}
@media screen and (max-width : 1280px) {
  #work .section-chapter {
    max-width: 700px;
    padding-top: 30px;
    padding-bottom: 30px;
  }
}
@media screen and (max-width : 1140px) {
  #work .section-chapter {
    max-width: 600px;
  }
}
@media screen and (max-width : 991px) {
  #work .section-chapter {
    max-width: 100%;
    padding-top: 40px;
    padding-bottom: 40px;
  }
}
#work .section-chapter .section-title {
  text-align: left;
  margin-bottom: 24px;
}
@media screen and (max-width : 1280px) {
  #work .section-chapter .section-title {
    margin-bottom: 22px;
  }
}
@media screen and (max-width : 1140px) {
  #work .section-chapter .section-title {
    margin-bottom: 20px;
  }
}
@media screen and (max-width : 600px) {
  #work .section-chapter .section-title {
    margin-bottom: 16px;
  }
}
#work .section-chapter .section-title:after {
  content: "";
  display: inline-block;
  vertical-align: top;
  margin-left: -4px;
  animation: fadeChevron 1s infinite;
}
#work .section-chapter .section-title.active:after {
  content: "_";
  opacity: 1;
}
#work .section-chapter .subsection-title {
  font-family: "ceraBold", Arial, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  text-align: left;
  margin: 18px 0;
  display: inline-block;
}
@media screen and (max-width : 1280px) {
  #work .section-chapter .subsection-title {
    margin: 14px 0;
  }
}
@media screen and (max-width : 1140px) {
  #work .section-chapter .subsection-title {
    margin: 12px 0;
  }
}
@media screen and (max-width : 991px) {
  #work .section-chapter .subsection-title {
    margin: 0.75rem 0;
  }
}
#work .section-chapter .subsection-title:after {
  content: "";
  display: block;
  background-color: #101010;
  width: 100%;
  height: 0px;
  margin-top: 0px;
}
#work .section-chapter p {
  margin-bottom: 1.2rem;
}
#work .section-chapter ol, #work .section-chapter ul {
  margin-left: 1rem;
  margin-bottom: 2rem;
}
#work .section-chapter ol li, #work .section-chapter ul li {
  margin-bottom: 0.75rem;
  list-style-position: outside;
}
#work .section-chapter ul {
  list-style: disc;
}
#work .section-chapter .info-content-block {
  margin-bottom: 48px;
}
@media screen and (max-width : 991px) {
  #work .section-chapter .info-content-block {
    margin-bottom: 36px;
  }
}
#work .section-chapter .visual-content {
  margin-top: 1rem;
  margin-bottom: 2rem;
}
@media screen and (max-width : 1280px) {
  #work .section-chapter .visual-content {
    margin-top: 0.75rem;
    margin-bottom: 1.5rem;
  }
}
@media screen and (max-width : 600px) {
  #work .section-chapter .visual-content {
    margin-top: 0.5rem;
    margin-bottom: 1rem;
  }
}
#work .section-chapter .visual-content .wp-caption {
  width: 100% !important;
}
#work .section-chapter .visual-content img {
  max-width: 1140px;
  width: 100%;
  height: auto;
  margin: auto;
  display: block;
  padding: 1rem;
  background-color: #f9f9f9;
  box-shadow: 1px 1px 3px 2px #f3f3f3;
  opacity: 0;
  transition: all 0.4s ease 0.2s;
}
#work .section-chapter .visual-content img.mobile {
  width: 50% !important;
}
#work .section-chapter .visual-content img:last-child {
  margin-bottom: 0rem;
}
@media screen and (max-width : 600px) {
  #work .section-chapter .visual-content img {
    box-shadow: 1px 1px 3px 2px #f3f3f3;
  }
}
#work .section-chapter .visual-content img.on {
  opacity: 1;
}
#work .section-chapter .visual-content .wp-video {
  opacity: 0;
  transition: all 0.4s ease 0.2s;
}
#work .section-chapter .visual-content .wp-video.on {
  opacity: 1;
}
#work .section-chapter .visual-content .wp-caption-text {
  font-family: "ceraRegular", Arial, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  margin-top: 0.5rem;
  margin-bottom: 0;
  display: block;
  color: #666666;
  text-align: left;
}
#work .section-chapter table {
  margin: 2rem 0;
}
@media screen and (max-width : 1280px) {
  #work .section-chapter table {
    margin: 1.8rem 0;
  }
}
@media screen and (max-width : 1140px) {
  #work .section-chapter table {
    margin: 1.6rem 0;
  }
}
#work .section-chapter table tbody tr td {
  border: 1px #101010 solid;
  padding: 0.5rem;
  font-family: "ceraRegular", Arial, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  vertical-align: middle;
}
#work .section-chapter table tbody tr:first-child td {
  padding: 1rem;
  font-family: "ceraBold", Arial, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  background-color: #f9f9f9;
  text-align: center;
  vertical-align: middle;
}
#work .section-chapter .post-link {
  color: #666666;
  text-decoration: underline;
  margin-top: 0.5rem;
  display: block;
  transition: all 0.3s ease;
}
#work .section-chapter .post-link:hover {
  color: #101010;
  transform: translate3d(0.2rem, 0, 0) skewX(-10deg);
}
#work .section-chapter .statement-block {
  display: block;
  padding: 1.4rem 1.6rem 2rem 1.6rem;
  border-left: 6px solid #000000;
  background: #f9f9f9;
  margin-bottom: 40px;
}
@media screen and (max-width : 991px) {
  #work .section-chapter .statement-block {
    padding: 1.5rem;
  }
}
#work .section-chapter .statement-block p {
  margin-bottom: 0;
}
#work .section-chapter .statement-block b {
  font-family: "ceraBold", Arial, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
}
#work .carousel-chapter {
  max-width: 800px;
  margin-top: 80px;
  margin-bottom: 80px;
}
@media screen and (max-width : 1280px) {
  #work .carousel-chapter {
    max-width: 700px;
    margin-bottom: 100px;
  }
}
@media screen and (max-width : 1140px) {
  #work .carousel-chapter {
    max-width: 600px;
    margin-bottom: 80px;
  }
}
#work .carousel-chapter .carousel-desc {
  margin-bottom: 18px;
}
@media screen and (max-width : 1280px) {
  #work .carousel-chapter .carousel-desc {
    margin-bottom: 14px;
  }
}
@media screen and (max-width : 1140px) {
  #work .carousel-chapter .carousel-desc {
    margin-bottom: 12px;
  }
}
#work {
  /* 4. Next/Prev Links */
}
#work .next-post-nav,
#work div[role=link] {
  display: flex;
  margin: auto;
  padding: 180px 0;
  justify-content: center;
}
@media screen and (max-width : 600px) {
  #work .next-post-nav,
  #work div[role=link] {
    padding: 100px 0;
  }
}
#work .next-post-nav .next-link,
#work div[role=link] .next-link {
  margin: 0rem;
  align-self: center;
  color: #101010 !important;
}
#work .next-post-nav .next-link:after,
#work div[role=link] .next-link:after {
  content: ">";
  align-self: flex-end;
  margin: 0 1rem;
}
#work .next-post-nav .next-label,
#work div[role=link] .next-label {
  position: relative;
  overflow: hidden;
  display: block;
  text-transform: capitalize;
  padding: 0rem 0.4rem;
  line-height: 1.3;
  font-family: "ceraBold", Arial, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  transition: all 0.4s cubic-bezier(0.39, 0.575, 0.565, 1);
}
@media screen and (max-width : 600px) {
  #work .next-post-nav .next-label,
  #work div[role=link] .next-label {
    width: 60%;
  }
}
#work .next-post-nav .next-label:before,
#work div[role=link] .next-label:before {
  content: "";
  position: absolute;
  top: 0%;
  left: 0%;
  transform: translate3d(-110%, 0, 0);
  width: 100%;
  z-index: -1;
  height: 100%;
  background-color: #101010;
  transition: all 0.3s ease;
}
@media screen and (max-width : 991px) {
  #work .next-post-nav .next-label:before,
  #work div[role=link] .next-label:before {
    height: 2px;
    top: 92%;
  }
}
#work .next-post-nav:hover .next-label,
#work div[role=link]:hover .next-label {
  color: #ffffff;
}
@media screen and (max-width : 991px) {
  #work .next-post-nav:hover .next-label,
  #work div[role=link]:hover .next-label {
    color: #ffffff;
  }
}
#work .next-post-nav:hover .next-label:before,
#work div[role=link]:hover .next-label:before {
  transform: translate3d(0%, 0, 0);
}

.maintenance-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #101010;
  color: #ffffff;
  padding: 2rem;
  text-align: center;
}
.maintenance-container .maintenance-message {
  max-width: 600px;
}
.maintenance-container .maintenance-message .signature {
  margin-top: 2rem;
  text-align: right;
  font-style: italic;
  font-size: 1rem;
}

@media (max-width: 600px) {
  .maintenance-container .maintenance-message h1 {
    font-size: 28px;
  }
  .maintenance-container .maintenance-message .signature {
    font-size: 18px;
  }
}
/*     
    Name: _404.scss    
    Author: Zakaria El Khachia
    Client:
*/
.error-wrapper {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
}
.error-wrapper .error-txt {
  max-width: 800px;
  margin: auto;
  display: block;
  font-family: "ceraLight", Arial, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
}
.error-wrapper .error-txt a {
  font-family: "ceraBold", Arial, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  text-decoration: underline;
}/*# sourceMappingURL=main.css.map */