/*     
    Name: _variables.scss    
    Author: Zakaria El Khachia
    Project: CanLife
*/
/* Colors */
/* Fonts */
/* Transforms */
/* Breakpoints */
/*     
    Name: _animations.scss    
    Author: Zakaria El Khachia
    Project: CanLife
*/
.highlight {
  position: relative;
  white-space: nowrap;
}

.highlight::before {
  content: attr(data-highlight);
  position: absolute;
  color: #bf1e2d;
  width: 0%;
  overflow: hidden;
  white-space: nowrap;
  -webkit-transition: width 1.5s cubic-bezier(0.19, 1, 0.22, 1);
  transition: width 1.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.highlight:hover::before, .highlight.active::before {
  width: 100%;
}

.highlight-u {
  color: #bf1e2d;
  text-decoration: underline;
}

/* Reveal Content */
.reveal-x {
  opacity: 0;
  -webkit-transform: translateX(-70px);
          transform: translateX(-70px);
  -webkit-transition: 0.5s opacity 0.1s, 2s -webkit-transform cubic-bezier(0.32, 1.01, 0.35, 1.01);
  transition: 0.5s opacity 0.1s, 2s -webkit-transform cubic-bezier(0.32, 1.01, 0.35, 1.01);
  transition: 2s transform cubic-bezier(0.32, 1.01, 0.35, 1.01), 0.5s opacity 0.1s;
  transition: 2s transform cubic-bezier(0.32, 1.01, 0.35, 1.01), 0.5s opacity 0.1s, 2s -webkit-transform cubic-bezier(0.32, 1.01, 0.35, 1.01);
  will-change: transform;
}

.reveal-y {
  opacity: 0;
  -webkit-transform: translateY(100px);
          transform: translateY(100px);
  -webkit-transition: 0.5s opacity 0.1s, 2s -webkit-transform cubic-bezier(0.32, 1.01, 0.35, 1.01);
  transition: 0.5s opacity 0.1s, 2s -webkit-transform cubic-bezier(0.32, 1.01, 0.35, 1.01);
  transition: 2s transform cubic-bezier(0.32, 1.01, 0.35, 1.01), 0.5s opacity 0.1s;
  transition: 2s transform cubic-bezier(0.32, 1.01, 0.35, 1.01), 0.5s opacity 0.1s, 2s -webkit-transform 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);
}

/* 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;
}

@-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(-100%);
            transform: translateY(-100%);
    opacity: 0;
  }
  33% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
    opacity: 1;
  }
  66% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
    opacity: 0;
  }
}

@keyframes chevronBounce {
  0% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
    opacity: 0;
  }
  33% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
    opacity: 1;
  }
  66% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
    opacity: 0;
  }
}

@-webkit-keyframes spinBoth {
  0% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
  50% {
    -webkit-transform: rotate(720deg);
            transform: rotate(720deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}

@keyframes spinBoth {
  0% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
  50% {
    -webkit-transform: rotate(720deg);
            transform: rotate(720deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}

@-webkit-keyframes spin30 {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(30deg);
            transform: rotate(30deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}

@keyframes spin30 {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(30deg);
            transform: rotate(30deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}

/* 

0. scale 1 rotate 0             0
1. scale 1.05 rotate 0          5% 
2. scale 1 rotate 0             10%
3. scale 1 rotate 360           20%
4. scale 1 rotate 360 pause     40%
5. scale 1.05 rotate 360 pause  45%
5. scale 1 rotate 360 pause     50%
7. scale 1 rotate 720           60%
8. scale 1 rotate 720 pause     90%
9. scale 1 rotate 0             100%


*/
@-webkit-keyframes spinLogo {
  0% {
    -webkit-transform: scale(1) rotate(0deg);
            transform: scale(1) rotate(0deg);
  }
  7% {
    -webkit-transform: scale(1) rotate(0deg);
            transform: scale(1) rotate(0deg);
  }
  11% {
    -webkit-transform: scale(1.1) rotate(0deg);
            transform: scale(1.1) rotate(0deg);
  }
  15% {
    -webkit-transform: scale(1) rotate(0deg);
            transform: scale(1) rotate(0deg);
  }
  30% {
    -webkit-transform: scale(1) rotate(360deg);
            transform: scale(1) rotate(360deg);
  }
  32% {
    -webkit-transform: scale(1) rotate(360deg);
            transform: scale(1) rotate(360deg);
  }
  50% {
    -webkit-transform: scale(1) rotate(-360deg);
            transform: scale(1) rotate(-360deg);
  }
  70% {
    -webkit-transform: scale(1) rotate(0deg);
            transform: scale(1) rotate(0deg);
  }
  100% {
    -webkit-transform: scale(1) rotate(0deg);
            transform: scale(1) rotate(0deg);
  }
}
@keyframes spinLogo {
  0% {
    -webkit-transform: scale(1) rotate(0deg);
            transform: scale(1) rotate(0deg);
  }
  7% {
    -webkit-transform: scale(1) rotate(0deg);
            transform: scale(1) rotate(0deg);
  }
  11% {
    -webkit-transform: scale(1.1) rotate(0deg);
            transform: scale(1.1) rotate(0deg);
  }
  15% {
    -webkit-transform: scale(1) rotate(0deg);
            transform: scale(1) rotate(0deg);
  }
  30% {
    -webkit-transform: scale(1) rotate(360deg);
            transform: scale(1) rotate(360deg);
  }
  32% {
    -webkit-transform: scale(1) rotate(360deg);
            transform: scale(1) rotate(360deg);
  }
  50% {
    -webkit-transform: scale(1) rotate(-360deg);
            transform: scale(1) rotate(-360deg);
  }
  70% {
    -webkit-transform: scale(1) rotate(0deg);
            transform: scale(1) rotate(0deg);
  }
  100% {
    -webkit-transform: scale(1) rotate(0deg);
            transform: scale(1) rotate(0deg);
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    visibility: visible;
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    visibility: visible;
    opacity: 1;
  }
}

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes fade-in-right {
  from {
    opacity: 0;
    -webkit-transform: translateX(-15px);
            transform: translateX(-15px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@keyframes fade-in-right {
  from {
    opacity: 0;
    -webkit-transform: translateX(-15px);
            transform: translateX(-15px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@-webkit-keyframes fade-in-bottom {
  from {
    opacity: 0;
    -webkit-transform: translateY(-15px);
            transform: translateY(-15px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes fade-in-bottom {
  from {
    opacity: 0;
    -webkit-transform: translateY(-15px);
            transform: translateY(-15px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@-webkit-keyframes grow-right {
  from {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  to {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
}

@keyframes grow-right {
  from {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  to {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
}

@-webkit-keyframes grow-bottom {
  from {
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
  }
  to {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
}

@keyframes grow-bottom {
  from {
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
  }
  to {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
}

/* 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,
.clearfix:after {
  content: "\0020";
  display: block;
  height: 0;
  overflow: hidden;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  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: _typo.scss    
    Author: Zakaria El Khachia
    Project: CanLife
*/
/* Font Name */
@font-face {
  font-family: "Avenir-Bold-Italic";
  src: url("../../src/fonts/avenir/AvenirNext-BoldItalic.woff") format("woff");
  font-style: italic;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@font-face {
  font-family: "Avenir-Bold";
  src: url("../../src/fonts/avenir/AvenirNext-Bold.woff") format("woff");
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@font-face {
  font-family: "Montserrat-SemiBold";
  src: url("../../src/fonts/montserrat/Montserrat-SemiBold.woff") format("woff");
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@font-face {
  font-family: "Montserrat-Regular";
  src: url("../../src/fonts/montserrat/Montserrat-Regular.woff") format("woff");
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Responsive font sizes */
.size-1, #welcome .welcome-content .mission-statement-content h2, #contact .contact-content p {
  font-size: 48px;
}

@media (min-width: 320px) {
  .size-1, #welcome .welcome-content .mission-statement-content h2, #contact .contact-content p {
    font-size: calc(45.5px + 100vw * 0.00781);
  }
}

@media (min-width: 1600px) {
  .size-1, #welcome .welcome-content .mission-statement-content h2, #contact .contact-content p {
    font-size: 58px;
  }
}

@media only screen and (max-width: 1440px) {
  .size-1, #welcome .welcome-content .mission-statement-content h2, #contact .contact-content p {
    font-size: 42px;
  }
}

@media only screen and (max-width: 1440px) and (min-width: 320px) {
  .size-1, #welcome .welcome-content .mission-statement-content h2, #contact .contact-content p {
    font-size: calc(40.5px + 100vw * 0.00469);
  }
}

@media only screen and (max-width: 1440px) and (min-width: 1600px) {
  .size-1, #welcome .welcome-content .mission-statement-content h2, #contact .contact-content p {
    font-size: 48px;
  }
}

@media only screen and (max-width: 991px) {
  .size-1, #welcome .welcome-content .mission-statement-content h2, #contact .contact-content p {
    font-size: 32px;
  }
}

@media only screen and (max-width: 991px) and (min-width: 320px) {
  .size-1, #welcome .welcome-content .mission-statement-content h2, #contact .contact-content p {
    font-size: calc(29.5px + 100vw * 0.00781);
  }
}

@media only screen and (max-width: 991px) and (min-width: 1600px) {
  .size-1, #welcome .welcome-content .mission-statement-content h2, #contact .contact-content p {
    font-size: 42px;
  }
}

@media only screen and (max-width: 600px) {
  .size-1, #welcome .welcome-content .mission-statement-content h2, #contact .contact-content p {
    font-size: 26px;
  }
}

@media only screen and (max-width: 600px) and (min-width: 320px) {
  .size-1, #welcome .welcome-content .mission-statement-content h2, #contact .contact-content p {
    font-size: calc(25.5px + 100vw * 0.00156);
  }
}

@media only screen and (max-width: 600px) and (min-width: 1600px) {
  .size-1, #welcome .welcome-content .mission-statement-content h2, #contact .contact-content p {
    font-size: 28px;
  }
}

.size-2, #services .services-content .services-list h3 {
  font-size: 36px;
}

@media (min-width: 320px) {
  .size-2, #services .services-content .services-list h3 {
    font-size: calc(33px + 100vw * 0.00937);
  }
}

@media (min-width: 1600px) {
  .size-2, #services .services-content .services-list h3 {
    font-size: 48px;
  }
}

@media only screen and (max-width: 1440px) {
  .size-2, #services .services-content .services-list h3 {
    font-size: 28px;
  }
}

@media only screen and (max-width: 1440px) and (min-width: 320px) {
  .size-2, #services .services-content .services-list h3 {
    font-size: calc(26px + 100vw * 0.00625);
  }
}

@media only screen and (max-width: 1440px) and (min-width: 1600px) {
  .size-2, #services .services-content .services-list h3 {
    font-size: 36px;
  }
}

@media only screen and (max-width: 600px) {
  .size-2, #services .services-content .services-list h3 {
    font-size: 24px;
  }
}

@media only screen and (max-width: 600px) and (min-width: 320px) {
  .size-2, #services .services-content .services-list h3 {
    font-size: calc(22.5px + 100vw * 0.00469);
  }
}

@media only screen and (max-width: 600px) and (min-width: 1600px) {
  .size-2, #services .services-content .services-list h3 {
    font-size: 30px;
  }
}

.size-3 {
  font-size: 28px;
}

@media (min-width: 320px) {
  .size-3 {
    font-size: calc(26px + 100vw * 0.00625);
  }
}

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

@media only screen and (max-width: 1440px) {
  .size-3 {
    font-size: 30px;
  }
}

@media only screen and (max-width: 1440px) and (min-width: 320px) {
  .size-3 {
    font-size: calc(28.5px + 100vw * 0.00469);
  }
}

@media only screen and (max-width: 1440px) and (min-width: 1600px) {
  .size-3 {
    font-size: 36px;
  }
}

@media only screen and (max-width: 600px) {
  .size-3 {
    font-size: 26px;
  }
}

@media only screen and (max-width: 600px) and (min-width: 320px) {
  .size-3 {
    font-size: calc(24.5px + 100vw * 0.00469);
  }
}

@media only screen and (max-width: 600px) and (min-width: 1600px) {
  .size-3 {
    font-size: 32px;
  }
}

.size-4, .headline, #services .services-content .services-txt .service .service-intro, #contact .contact-content h4 {
  font-size: 24px;
}

@media (min-width: 320px) {
  .size-4, .headline, #services .services-content .services-txt .service .service-intro, #contact .contact-content h4 {
    font-size: calc(23px + 100vw * 0.00313);
  }
}

@media (min-width: 1600px) {
  .size-4, .headline, #services .services-content .services-txt .service .service-intro, #contact .contact-content h4 {
    font-size: 28px;
  }
}

@media only screen and (max-width: 1440px) {
  .size-4, .headline, #services .services-content .services-txt .service .service-intro, #contact .contact-content h4 {
    font-size: 20px;
  }
}

@media only screen and (max-width: 1440px) and (min-width: 320px) {
  .size-4, .headline, #services .services-content .services-txt .service .service-intro, #contact .contact-content h4 {
    font-size: calc(19px + 100vw * 0.00313);
  }
}

@media only screen and (max-width: 1440px) and (min-width: 1600px) {
  .size-4, .headline, #services .services-content .services-txt .service .service-intro, #contact .contact-content h4 {
    font-size: 24px;
  }
}

@media only screen and (max-width: 600px) {
  .size-4, .headline, #services .services-content .services-txt .service .service-intro, #contact .contact-content h4 {
    font-size: 18px;
  }
}

@media only screen and (max-width: 600px) and (min-width: 320px) {
  .size-4, .headline, #services .services-content .services-txt .service .service-intro, #contact .contact-content h4 {
    font-size: calc(17px + 100vw * 0.00313);
  }
}

@media only screen and (max-width: 600px) and (min-width: 1600px) {
  .size-4, .headline, #services .services-content .services-txt .service .service-intro, #contact .contact-content h4 {
    font-size: 22px;
  }
}

.size-5, .intro, #work .project-grid .grid-item .item-content-block .item-title, #contact .contact-content a {
  font-size: 18px;
}

@media (min-width: 320px) {
  .size-5, .intro, #work .project-grid .grid-item .item-content-block .item-title, #contact .contact-content a {
    font-size: calc(17px + 100vw * 0.00313);
  }
}

@media (min-width: 1600px) {
  .size-5, .intro, #work .project-grid .grid-item .item-content-block .item-title, #contact .contact-content a {
    font-size: 22px;
  }
}

@media only screen and (max-width: 1440px) {
  .size-5, .intro, #work .project-grid .grid-item .item-content-block .item-title, #contact .contact-content a {
    font-size: 16px;
  }
}

@media only screen and (max-width: 1440px) and (min-width: 320px) {
  .size-5, .intro, #work .project-grid .grid-item .item-content-block .item-title, #contact .contact-content a {
    font-size: calc(15px + 100vw * 0.00313);
  }
}

@media only screen and (max-width: 1440px) and (min-width: 1600px) {
  .size-5, .intro, #work .project-grid .grid-item .item-content-block .item-title, #contact .contact-content a {
    font-size: 20px;
  }
}

@media only screen and (max-width: 600px) {
  .size-5, .intro, #work .project-grid .grid-item .item-content-block .item-title, #contact .contact-content a {
    font-size: 14;
  }
}

@media only screen and (max-width: 600px) and (min-width: 320px) {
  .size-5, .intro, #work .project-grid .grid-item .item-content-block .item-title, #contact .contact-content a {
    font-size: calc(13px + 100vw * 0.00313);
  }
}

@media only screen and (max-width: 600px) and (min-width: 1600px) {
  .size-5, .intro, #work .project-grid .grid-item .item-content-block .item-title, #contact .contact-content a {
    font-size: 18px;
  }
}

.size-6, html,
body, #work .project-grid .grid-item .item-content-block .item-details p {
  font-size: 14px;
}

@media (min-width: 320px) {
  .size-6, html,
  body, #work .project-grid .grid-item .item-content-block .item-details p {
    font-size: calc(13.5px + 100vw * 0.00156);
  }
}

@media (min-width: 1600px) {
  .size-6, html,
  body, #work .project-grid .grid-item .item-content-block .item-details p {
    font-size: 16px;
  }
}

.size-7, .nav-wrapper .nav-menu a, .language-switcher .lang-content a.zh, .side-info .side-info-content, #welcome .welcome-content .mission-statement-content .scroll-bottom, #work .project-grid .grid-item .item-content-block .item-category {
  font-size: 12px;
}

@media (min-width: 320px) {
  .size-7, .nav-wrapper .nav-menu a, .language-switcher .lang-content a.zh, .side-info .side-info-content, #welcome .welcome-content .mission-statement-content .scroll-bottom, #work .project-grid .grid-item .item-content-block .item-category {
    font-size: calc(11.5px + 100vw * 0.00156);
  }
}

@media (min-width: 1600px) {
  .size-7, .nav-wrapper .nav-menu a, .language-switcher .lang-content a.zh, .side-info .side-info-content, #welcome .welcome-content .mission-statement-content .scroll-bottom, #work .project-grid .grid-item .item-content-block .item-category {
    font-size: 14px;
  }
}

/*     
    Name: _base.scss    
    Author: Zakaria El Khachia
    Project: CanLife
*/
/**
 * 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%;
  font-family: "Montserrat-Regular", "Microsoft YaHei", "WenQuanYi Micro Hei", Arial, sans-serif;
  font-weight: normal;
  line-height: 1.2;
  color: #0d0d0d;
  -webkit-font-kerning: none;
          font-kerning: none;
  min-height: 100%;
}

html:lang(zh),
body:lang(zh) {
  letter-spacing: 0.05rem;
}

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

/* Anchor */
a {
  text-decoration: none;
  font-family: "Avenir-Bold-Italic", "Microsoft YaHei", "WenQuanYi Micro Hei", Arial, sans-serif;
  font-weight: 400;
  -webkit-transition: 0.25s ease;
  transition: 0.25s ease;
}

a:hover {
  opacity: 1 !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-transform: capitalize;
  font-family: "Avenir-Bold-Italic", "Microsoft YaHei", "WenQuanYi Micro Hei", Arial, sans-serif;
  text-transform: uppercase;
}

h3 {
  line-height: 1.4;
}

img {
  width: 100%;
}

/*     
    Name: _helpers.scss    
    Author: Zakaria El Khachia
    Project: CanLife
*/
/**
 * Clear inner floats
 */
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  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;
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}

.is-hidden {
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}

.is-off {
  display: none;
}

.is-on {
  display: block;
}

.mainFontItalic {
  font-family: "Avenir-Bold-Italic", "Microsoft YaHei", "WenQuanYi Micro Hei", Arial, sans-serif;
}

.textFontNormal {
  font-family: "Montserrat-Regular", "Microsoft YaHei", "WenQuanYi Micro Hei", Arial, sans-serif;
}

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

.full-background, .footer-content .footer-block-container .block-item a.linkedin:after, #welcome, #services, #contact {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

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

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

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

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

.no-scroll {
  overflow: hidden;
}

.highlight-color {
  color: #bf1e2d;
}

.highlight-txt-font {
  font-family: "Montserrat-SemiBold", "Microsoft YaHei", "WenQuanYi Micro Hei", Arial, sans-serif;
}

/*     
    Name: _media.scss    
    Author: Zakaria El Khachia
    Project: CanLife
*/
/*     
    Name: _header.scss    
    Author: Zakaria El Khachia
    Project: CanLife
*/
header {
  position: fixed;
  width: 100%;
  height: 160px;
  z-index: 3;
  -webkit-transition: all 0.5s cubic-bezier(0.23, 0.79, 0.18, 0.64);
  transition: all 0.5s cubic-bezier(0.23, 0.79, 0.18, 0.64);
}

@media only screen and (max-width: 600px) {
  header {
    position: absolute;
  }
}

header.intersected {
  background-color: #ffffff;
  -webkit-transform: translateY(-10px);
          transform: translateY(-10px);
  height: 130px;
}

@media only screen and (max-width: 991px) {
  header.intersected {
    -webkit-transform: none;
            transform: none;
    height: 130px;
  }
}

header .top-header {
  position: relative;
  padding: 0px 100px;
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

header .logo-link {
  width: 200px;
  top: 40px;
  position: absolute;
  -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);
  z-index: 1000;
}

@media only screen and (max-width: 991px) {
  header .logo-link {
    top: 50px;
    left: 50px;
  }
}

@media only screen and (max-width: 600px) {
  header .logo-link {
    width: 50%;
    max-width: 200px;
    top: 40px;
    left: 40px;
  }
}

header .logo-link img {
  position: absolute;
  top: 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);
}

header .logo-link img.logo-white {
  opacity: 1;
}

header .logo-link img.logo-dark {
  opacity: 0;
}

header .logo-link.intersected {
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
  top: 35px;
}

header .logo-link.intersected .logo-white {
  opacity: 0;
}

header .logo-link.intersected .logo-dark {
  opacity: 1;
}

/*     
    Name: _footer.scss    
    Author: Zakaria El Khachia
    Project: CanLife
*/
footer {
  padding: 80px 100px 50px;
  background: #0d0d0d;
  position: relative;
  z-index: 1;
}

@media only screen and (max-width: 991px) {
  footer {
    padding: 60px 50px 50px;
  }
}

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

.footer-top .logo-wrapper {
  min-width: 240px;
  max-width: 300px;
}

@media only screen and (max-width: 991px) {
  .footer-top .logo-wrapper {
    margin-bottom: 3rem;
    min-width: 180px;
    max-width: 240px;
  }
}

.footer-top .logo-wrapper img {
  width: 100%;
}

.footer-content {
  width: 100%;
  color: #ffffff;
  font-family: "Avenir-Bold-Italic", "Microsoft YaHei", "WenQuanYi Micro Hei", Arial, sans-serif;
  margin: 1rem auto 5rem;
}

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

@media only screen and (max-width: 991px) {
  .footer-content .footer-block-container .block-item {
    -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
  }
}

@media only screen and (max-width: 600px) {
  .footer-content .footer-block-container .block-item {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
  }
}

.footer-content .footer-block-container .block-item:nth-child(1) {
  margin-left: 20%;
}

@media only screen and (max-width: 991px) {
  .footer-content .footer-block-container .block-item:nth-child(1) {
    margin-left: 0;
  }
}

.footer-content .footer-block-container .block-item:nth-child(3) {
  padding-left: 100px;
}

@media only screen and (max-width: 991px) {
  .footer-content .footer-block-container .block-item:nth-child(3) {
    padding-left: 0px;
  }
}

.footer-content .footer-block-container .block-item p {
  margin-bottom: 2rem;
  line-height: 1.6;
}

.footer-content .footer-block-container .block-item a {
  color: #ffffff;
  line-height: 1.9;
  display: block;
  text-transform: uppercase;
}

.footer-content .footer-block-container .block-item a.linkedin:after {
  content: "";
  background-image: url("../img/svg/linkedin.svg");
  width: 25px;
  height: 25px;
  display: inline-block;
  vertical-align: top;
  margin-left: 10px;
}

.footer-content .footer-block-container .block-item a.active, .footer-content .footer-block-container .block-item a:hover {
  color: #d73241;
}

.footer-content .footer-block-container .block-item a.active span[data-index]:before, .footer-content .footer-block-container .block-item a:hover span[data-index]:before {
  color: #d73241;
}

.footer-content .footer-block-container .block-item a.active span:after, .footer-content .footer-block-container .block-item a:hover span:after {
  background: #d73241;
}

.footer-content .footer-block-container .block-item .contact-info {
  margin-top: 1rem;
}

.footer-content .footer-block-container .block-item .contact-info a {
  font-family: "Montserrat-SemiBold", "Microsoft YaHei", "WenQuanYi Micro Hei", Arial, sans-serif;
  text-transform: initial;
}

.footer-bottom div {
  font-size: 12px;
}

.footer-bottom .copyright {
  color: #ffffff;
}

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

.footer-bottom .top-top {
  text-align: right;
}

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

.footer-bottom .top-top .to-top {
  color: #ffffff;
  font-size: 12px;
  font-family: "Montserrat-Regular", "Microsoft YaHei", "WenQuanYi Micro Hei", Arial, sans-serif;
  cursor: pointer;
}

.footer-bottom .top-top .to-top img {
  width: 10px;
  margin-left: 0.6rem;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  -webkit-transform-origin: center;
          transform-origin: center;
}

/*     
    Name: _nav.scss    
    Author: Zakaria El Khachia
    Project: CanLife
*/
/* Nav Menu */
.nav-wrapper {
  position: absolute;
  top: 60px;
  right: 100px;
}

.nav-wrapper .nav-menu a {
  margin-right: 5rem;
  color: #ffffff;
  text-transform: uppercase;
  position: relative;
  display: inline-block;
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}

.nav-wrapper .nav-menu a:after {
  content: "";
  width: 0px;
  height: 0.09rem;
  background-color: #ffffff;
  display: block;
  margin-top: 1rem;
  margin-left: -0.7rem;
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
  -webkit-transform: skew(-20deg);
          transform: skew(-20deg);
}

.nav-wrapper .nav-menu a:hover, .nav-wrapper .nav-menu a.active {
  opacity: 1;
}

.nav-wrapper .nav-menu a:hover:after, .nav-wrapper .nav-menu a.active:after {
  width: 125%;
  background-color: #bf1e2d;
}

.nav-wrapper .nav-menu a.inactive {
  opacity: 0.7;
}

.nav-wrapper .nav-menu a:last-child {
  margin-right: 0;
}

.nav-wrapper.intersected .nav-menu a {
  color: #0d0d0d;
}

.nav-wrapper.intersected .nav-menu a:hover, .nav-wrapper.intersected .nav-menu a.active {
  color: #bf1e2d;
}

.nav-wrapper.intersected .nav-menu a:hover:after, .nav-wrapper.intersected .nav-menu a.active:after {
  background-color: #bf1e2d;
}

@media only screen and (max-width: 991px) {
  .nav-wrapper {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
    -webkit-transition: all 0.5s cubic-bezier(0.04, 0.43, 0.21, 1.03);
    transition: all 0.5s cubic-bezier(0.04, 0.43, 0.21, 1.03);
    width: 100vw;
    height: 100vh;
    display: table;
    text-align: center;
    background: #ffffff;
    background-blend-mode: multiply;
    z-index: 100;
    overflow: hidden;
  }
  .nav-wrapper .nav-container {
    width: 100%;
    height: 100%;
    position: relative;
    display: table;
  }
  .nav-wrapper.nav-open {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  .nav-wrapper .nav-menu {
    height: 100%;
    width: 100%;
    vertical-align: middle;
    display: table-cell;
    margin: 0;
    padding: 0;
  }
  .nav-wrapper .nav-menu a {
    font-size: 4rem;
    color: #121212;
    -webkit-transition: all 250ms ease-in;
    transition: all 250ms ease-in;
    opacity: 0.9;
    text-decoration: none;
    padding: space(m)/2 space(l);
    width: 100%;
    display: block;
    text-align: left;
    margin-bottom: 40px;
    left: 50px;
  }
}

@media only screen and (max-width: 991px) and (max-width: 600px) {
  .nav-wrapper .nav-menu a {
    font-size: 2.6rem;
    margin-bottom: 30px;
  }
}

@media only screen and (max-width: 991px) {
  .nav-wrapper .nav-menu a:after {
    display: none;
  }
  .nav-wrapper .nav-menu a:hover, .nav-wrapper .nav-menu a.active {
    opacity: 100%;
    color: #bf1e2d;
  }
  .nav-wrapper .nav-menu a:first-child {
    margin-top: 0;
  }
  .nav-wrapper .nav-menu a:last-child {
    margin-bottom: 0;
  }
  .nav-wrapper.intersected .nav-menu a {
    color: #ffffff;
  }
  .nav-wrapper.intersected .nav-menu a:hover, .nav-wrapper.intersected .nav-menu a.active {
    color: #bf1e2d;
  }
}

/* Nav Toggle */
.burger-menu {
  position: fixed;
  width: 30px;
  height: 26px;
  cursor: pointer;
  top: 50px;
  right: 50px;
  -webkit-transition: all 0.5s cubic-bezier(0.23, 0.79, 0.18, 0.64);
  transition: all 0.5s cubic-bezier(0.23, 0.79, 0.18, 0.64);
  z-index: 1000;
  display: none;
}

@media only screen and (max-width: 991px) {
  .burger-menu {
    display: block;
  }
}

@media only screen and (max-width: 600px) {
  .burger-menu {
    top: 40px;
    right: 40px;
  }
}

.burger-menu span {
  width: 100%;
  background-color: #ffffff;
  height: 2px;
  border-radius: 20px;
  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(1) {
  top: 11px;
}

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

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

.burger-menu.open span {
  width: 100%;
  background-color: #121212;
  -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 span:nth-child(1) {
  -webkit-transform: translate(6px, -4px) rotate(-45deg);
          transform: translate(6px, -4px) rotate(-45deg);
}

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

.burger-menu.open span:nth-child(2) {
  -webkit-transform: translate(6px, 4px) rotate(45deg);
          transform: translate(6px, 4px) rotate(45deg);
}

@media only screen and (max-width: 600px) {
  .burger-menu.open span:nth-child(2) {
    -webkit-transform: translate(-4px, 4px) rotate(45deg);
            transform: translate(-4px, 4px) rotate(45deg);
  }
}

.burger-menu:hover span {
  width: 100% !important;
}

@media only screen and (max-width: 991px) {
  .burger-menu.intersected span {
    background-color: #bf1e2d;
  }
  .burger-menu.intersected.open span {
    background-color: #ffffff;
  }
}

@media only screen and (max-width: 600px) {
  .burger-menu.intersected.open {
    -webkit-transform: translate(32px, -15px);
            transform: translate(32px, -15px);
  }
}

/*     
    Name: _common.scss    
    Author: Zakaria El Khachia
    Project: CanLife
*/
main {
  position: relative;
}

.site-wrapper {
  width: 100%;
  height: 100%;
}

.content section {
  position: relative;
}

.content section .section-content {
  width: 65%;
  margin: auto;
  padding-top: 240px;
  padding-bottom: 240px;
  display: table;
  z-index: 2;
}

@media only screen and (max-width: 991px) {
  .content section .section-content {
    padding: 300px 100px;
    width: 100%;
  }
}

@media only screen and (max-width: 600px) {
  .content section .section-content {
    width: 100%;
    padding: 200px 50px;
  }
}

#particles-js {
  width: 100%;
  height: 100%;
  position: absolute;
  background: #bf1e2d;
}

.dark-section,
.light-section {
  width: 100%;
  position: relative;
}

.light-section {
  background-image: url("../img/png/particles-bg.png");
  background-size: 100%;
  background-repeat: repeat;
}

.boxed {
  padding-left: 70px;
  padding-right: 70px;
}

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

.headline {
  color: #0d0d0d;
  position: relative;
  margin-left: -3rem;
  float: left;
}

@media only screen and (max-width: 991px) {
  .headline {
    margin-left: 6rem;
    margin-bottom: 2rem;
    float: right;
  }
}

.headline[data-index]::before {
  content: attr(data-index);
  display: block;
  color: #d73241;
  top: -4.5rem;
  right: 0.5rem;
  position: absolute;
  font-size: 10rem;
  opacity: 0.2;
}

.intro {
  padding: 0;
  width: 100%;
  max-width: 800px;
  display: block;
  margin: 140px auto 0;
  font-family: "Montserrat-Regular", "Microsoft YaHei", "WenQuanYi Micro Hei", Arial, sans-serif;
  line-height: 1.8;
}

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

@media only screen and (max-width: 600px) {
  .intro {
    margin: 120px auto 0;
    word-break: break-all;
  }
}

/*     
    Name: _grid.scss    
    Author: Zakaria El Khachia
    Project: CanLife
*/
/* 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-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: 991px) {
  .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: 991px) {
  .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: 991px) {
  .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: 991px) {
  .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: 991px) {
  .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: 991px) {
  .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: 991px) {
  .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: 991px) {
  .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: 991px) {
  .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: 991px) {
  .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: 991px) {
  .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: 991px) {
  .col-12 {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
  }
}

/* Isotop Masonry */
/* Grid Item Sizer*/
.grid-sizer,
.grid-item {
  width: 47%;
}

@media only screen and (max-width: 991px) {
  .grid-sizer,
  .grid-item {
    width: 100%;
  }
}

.gutter-sizer {
  width: 6%;
}

/* Grid Item */
/* 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%;
}

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

/*     
    Name: _home.scss    
    Author: TrioTech
    Project: CanLife
*/
#loader {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  position: fixed;
  z-index: 5;
  -webkit-transition: all 1s cubic-bezier(0.1, 0.57, 0.21, 1.03);
  transition: all 1s cubic-bezier(0.1, 0.57, 0.21, 1.03);
  display: none;
}

#loader .loader-content {
  width: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-150px, -50%);
          transform: translate(-150px, -50%);
  text-align: center;
  -webkit-transition: opacity 0.2s ease-in-out;
  transition: opacity 0.2s ease-in-out;
}

#loader .loader-content .loader-logo {
  width: 100%;
}

#loader .loader-content .progress {
  width: 300px;
  height: 10px;
  margin-top: 2rem;
}

#loader .loader-content .progress svg {
  width: 300px;
  height: 10px;
  display: block;
}

/*     
    Name: _svg.scss    
    Author: Zakaria El Khachia
    Project: CanLife
*/
.logo-svg {
  fill: #ffffff;
}

.logo-svg.intersected {
  fill: #d73241;
}

#OUTLINES {
  -webkit-animation: spinLogo 12s cubic-bezier(0.65, 0.05, 0.36, 1) infinite;
          animation: spinLogo 12s cubic-bezier(0.65, 0.05, 0.36, 1) infinite;
  -webkit-transform-origin: 36px;
          transform-origin: 36px;
}

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

/*     
    Name: _langSwitcher.scss    
    Author: Zakaria El Khachia
    Project: CanLife
*/
.language-switcher {
  position: absolute;
  right: 100px;
  top: 0;
  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);
  opacity: 1;
  visibility: visible;
}

@media only screen and (max-width: 991px) {
  .language-switcher {
    padding-top: 100px;
    right: 50px;
  }
}

@media only screen and (max-width: 600px) {
  .language-switcher {
    display: none;
  }
}

.language-switcher.hide {
  opacity: 0;
  visibility: hidden;
}

.language-switcher .stroke-1 {
  width: 1px;
  height: 47%;
  display: block;
  background-color: #ffffff;
  -webkit-transition: all 0.5s cubic-bezier(0.13, 0.92, 0.18, 0.95);
  transition: all 0.5s cubic-bezier(0.13, 0.92, 0.18, 0.95);
}

@media only screen and (max-width: 991px) {
  .language-switcher .stroke-1 {
    height: 40%;
  }
}

@media only screen and (max-height: 700px) {
  .language-switcher .stroke-1 {
    display: none;
  }
}

.language-switcher .lang-content {
  position: absolute;
  width: 50px;
  left: -24px;
  top: 47%;
  display: block;
  margin: 0.3rem auto;
}

.language-switcher .lang-content a {
  color: #ffffff;
  position: relative;
  display: block;
  text-align: center;
}

.language-switcher .lang-content a.zh {
  font-family: "Avenir-Bold-Italic", "Microsoft YaHei", "WenQuanYi Micro Hei", Arial, sans-serif;
  font-weight: bold;
}

.language-switcher .lang-content a.active {
  color: #bf1e2d;
}

.language-switcher .lang-content .stroke-2 {
  width: 1px;
  height: 0.5rem;
  display: block;
  background-color: #ffffff;
  margin: 0.3rem auto;
}

.language-switcher.intersected .lang-content a {
  color: #d73241;
}

.language-switcher.intersected .lang-content a.active {
  color: #bf1e2d;
}

.language-switcher.intersected .stroke-2 {
  background-color: #bf1e2d;
}

.mobile-language-switcher {
  display: none;
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}

@media only screen and (max-width: 600px) {
  .mobile-language-switcher {
    display: block;
    position: absolute;
    bottom: 90px;
    left: 40px;
  }
}

.mobile-language-switcher a {
  color: #ffffff;
  position: relative;
  display: inline-block;
  text-align: center;
}

.mobile-language-switcher a.zh {
  font-size: 11px;
  font-family: "Avenir-Bold-Italic", "Microsoft YaHei", "WenQuanYi Micro Hei", Arial, sans-serif;
  font-weight: bold;
}

.mobile-language-switcher a.active {
  color: #bf1e2d;
}

.mobile-language-switcher .stroke {
  width: 10px;
  height: 1px;
  display: inline-block;
  background-color: #ffffff;
}

/*     
    Name: _sideModule.scss    
    Author: Zakaria El Khachia
    Project: CanLife
*/
.side-info {
  position: absolute;
  height: 100vh;
  top: 0;
  right: 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);
  opacity: 1;
  visibility: visible;
  z-index: 1000;
}

@media only screen and (max-width: 600px) {
  .side-info {
    display: none;
  }
}

.side-info.hide {
  opacity: 0;
  visibility: hidden;
}

.side-info .side-info-content {
  width: 200px;
  top: 50%;
  right: 50px;
  position: absolute;
  display: inline-block;
  -webkit-transform: rotate(-90deg) translate(50%);
          transform: rotate(-90deg) translate(50%);
  -webkit-transform-origin: top right;
          transform-origin: top right;
  -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;
  font-family: "Avenir-Bold", "Microsoft YaHei", "WenQuanYi Micro Hei", Arial, sans-serif;
  color: #ffffff;
  opacity: 0.8;
}

.side-info .side-info-content .info-1:after {
  content: "";
  width: 50px;
  height: 0.1rem;
  display: inline-block;
  background-color: #ffffff;
  margin: 0 6px;
  -webkit-transform: skew(-45deg);
          transform: skew(-45deg);
}

.side-info.intersected .side-info-content {
  color: #0d0d0d;
}

.side-info.intersected .side-info-content .info-1:after {
  background-color: #0d0d0d;
}

.side-info.intersected .side-info-content .date {
  color: #bf1e2d;
}

@media only screen and (max-width: 991px) {
  .side-info .indicator-content {
    left: 50px;
  }
}

/*     
    Name: _indicator.scss    
    Author: Zakaria El Khachia
    Project: CanLife
*/
.indicator {
  position: absolute;
  height: 100vh;
  top: 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);
  opacity: 1;
  visibility: visible;
}

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

.indicator.hide {
  opacity: 0;
  visibility: hidden;
}

.indicator .indicator-content {
  top: 50%;
  left: 50px;
  -webkit-transform: translate(-50%);
          transform: translate(-50%);
  position: absolute;
}

.indicator a {
  width: 2px;
  height: 18px;
  background: #ffffff;
  display: block;
  margin: 0 auto;
  text-align: center;
  -webkit-transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
  will-change: transform;
  opacity: 0.8;
}

.indicator a.active {
  width: 4px;
  opacity: 1;
  background: #bf1e2d;
}

.indicator.intersected a {
  background: #121212;
}

.indicator.intersected a.active {
  background: #bf1e2d;
}

@media only screen and (max-width: 991px) {
  .indicator .indicator-content {
    left: 50px;
  }
}

/*     
    Name: _welcome.scss    
    Author: Zakaria El Khachia
    Project: CanLife
*/
#welcome {
  width: 100%;
  height: 100vh;
  background-image: url("../img/png/banner.png");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

#welcome .video-overlay {
  width: 100vw;
  height: 100vh;
  position: absolute;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  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);
}

#welcome .video-overlay.on {
  opacity: 1;
  visibility: visible;
}

#welcome .welcome-content {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

#welcome .welcome-content:after {
  width: 100%;
  height: 100%;
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.2);
  background-blend-mode: multiply;
}

#welcome .welcome-content .video-player {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background-size: cover;
  -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);
}

#welcome .welcome-content .video-player.off {
  opacity: 0;
  visibility: hidden;
}

#welcome .welcome-content .video-player-button {
  width: 40px;
  height: 40px;
  position: absolute;
  bottom: 40px;
  right: 100px;
  -webkit-transform: translateX(10px);
          transform: translateX(10px);
  padding: 10px;
  background-color: transparent;
  border: 3px solid #ffffff;
  border-radius: 50%;
  cursor: pointer;
  z-index: 1;
  opacity: 0.9;
}

@media only screen and (max-width: 600px) {
  #welcome .welcome-content .video-player-button {
    display: none;
  }
}

#welcome .welcome-content .video-player-button .play {
  width: 11px;
  margin: auto 0 auto 3px;
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
  -webkit-transform-origin: center;
          transform-origin: center;
}

#welcome .welcome-content .video-player-button .play path {
  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);
}

#welcome .welcome-content .video-player-button .pause {
  width: 12px;
  margin: auto;
}

#welcome .welcome-content .video-player-button .pause rect {
  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);
  width: 3px;
  height: 100%;
}

#welcome .welcome-content .mission-overlay {
  position: absolute;
}

#welcome .welcome-content .mission-statement {
  width: 75%;
  max-width: 1190px;
  position: absolute;
  top: 50%;
  left: 100px;
  padding: 80px 0;
  z-index: 2;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

@media only screen and (max-width: 1440px) {
  #welcome .welcome-content .mission-statement {
    max-width: 991px;
  }
}

@media only screen and (max-width: 991px) {
  #welcome .welcome-content .mission-statement {
    padding: 60px 0;
    -webkit-transform: translateY(-40%);
            transform: translateY(-40%);
  }
}

@media only screen and (max-width: 600px) {
  #welcome .welcome-content .mission-statement {
    width: 100%;
    left: 0;
  }
}

#welcome .welcome-content .mission-statement-content {
  width: 100%;
  max-width: 1080px;
  margin: auto 80px;
}

@media only screen and (max-width: 1440px) {
  #welcome .welcome-content .mission-statement-content {
    max-width: 991px;
  }
}

@media only screen and (max-width: 991px) {
  #welcome .welcome-content .mission-statement-content {
    width: 70%;
    margin: auto 20px;
  }
}

@media only screen and (max-width: 600px) {
  #welcome .welcome-content .mission-statement-content {
    width: 100%;
    margin: 0;
    padding: 0 40px;
  }
}

#welcome .welcome-content .mission-statement-content h2 {
  display: block;
  line-height: 1.5;
  color: #ffffff;
  margin-bottom: 1rem;
}

@media only screen and (max-width: 991px) {
  #welcome .welcome-content .mission-statement-content h2 {
    font-size: 3rem;
  }
}

@media only screen and (max-width: 600px) {
  #welcome .welcome-content .mission-statement-content h2 {
    font-size: 2.5rem;
  }
}

#welcome .welcome-content .mission-statement-content .scroll-bottom {
  color: #ffffff;
  text-transform: uppercase;
  display: inline-block;
}

#welcome .welcome-content .mission-statement-content .scroll-bottom .chevron {
  width: 9px;
  margin-left: 5px;
}

#welcome .welcome-content .mission-statement-content .scroll-bottom .chevron path {
  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);
}

#welcome .welcome-content .mission-statement-content .scroll-bottom:hover {
  color: #bf1e2d;
}

#welcome .welcome-content .mission-statement-content .scroll-bottom:hover .chevron path {
  fill: #bf1e2d;
}

/*     
    Name: _about.scss    
    Author: Zakaria El Khachia
    Project: CanLife
*/
#about .intro .brand {
  color: #d73241;
  font-family: "Avenir-Bold-Italic", "Microsoft YaHei", "WenQuanYi Micro Hei", Arial, sans-serif;
  text-transform: uppercase;
}

#about .bg-visual {
  position: absolute;
  width: 150px;
  bottom: 0;
  right: 100px;
}

/*     
    Name: _portfolio.scss    
    Author: Zakaria El Khachia
    Project: CanLife
*/
#work {
  background-color: #0e0e0e;
  color: #ffffff;
  padding-bottom: 240px;
  overflow: hidden;
  background-image: url("../img/svg/cursive-bg-work.svg");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: 0 180px;
}

#work .section-project {
  padding: 0 100px;
  position: relative;
}

@media only screen and (max-width: 991px) {
  #work .section-project {
    padding: 0;
  }
}

#work .section-content {
  padding-top: 280px;
  padding-bottom: 180px;
}

#work .top-content {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

@media only screen and (max-width: 991px) {
  #work .top-content {
    display: inline-block;
  }
}

#work .top-content .headline {
  color: #ffffff;
}

#work .top-content .headline[data-index]::before {
  color: #bf1e2d;
  opacity: 0.7;
  z-index: -1;
}

#work .top-content .intro span {
  background-color: #bf1e2d;
  color: #ffffff;
  padding: 0 5px;
}

#work .project-grid {
  width: 100%;
  margin: auto;
  position: relative;
  overflow: hidden;
}

@media only screen and (max-width: 991px) {
  #work .project-grid {
    position: relative;
    width: calc(100% - 200px);
    margin: -100px auto 0;
    padding: 0px;
    display: block;
  }
}

@media only screen and (max-width: 600px) {
  #work .project-grid {
    width: calc(100% - 100px);
  }
}

#work .project-grid .grid-item:nth-child(3) {
  margin-bottom: 6rem;
}

@media only screen and (max-width: 991px) {
  #work .project-grid .grid-item:nth-child(3) {
    margin-bottom: 0;
  }
}

#work .project-grid .grid-item:last-child {
  margin-bottom: 0;
}

#work .project-grid .grid-item .item-content-block {
  padding: 20px 10px 0 10px;
}

@media only screen and (max-width: 991px) {
  #work .project-grid .grid-item .item-content-block {
    padding: 20px 0 0;
  }
}

#work .project-grid .grid-item .item-content-block .item-category {
  color: #eeeeee;
}

#work .project-grid .grid-item .item-content-block .item-title {
  padding: 15px 0 25px;
}

#work .project-grid .grid-item .item-content-block .item-details {
  width: 80%;
}

@media only screen and (max-width: 1440px) {
  #work .project-grid .grid-item .item-content-block .item-details {
    width: 100%;
  }
}

#work .project-grid .grid-item .item-content-block .item-details p {
  line-height: 1.5;
}

#work .project-grid .grid-item .item-content-block .item-details p span {
  color: #d73241;
  font-family: "Montserrat-SemiBold", "Microsoft YaHei", "WenQuanYi Micro Hei", Arial, sans-serif;
}

/*     
    Name: _services.scss    
    Author: Zakaria El Khachia
    Project: CanLife
*/
#services {
  width: 100%;
  height: 100%;
}

#services .single-service {
  height: 100%;
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

#services .single-service:after {
  width: 100%;
  height: 100%;
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.5);
}

#services .single-service .headline {
  opacity: 0;
}

#services .single-service .headline.fixme {
  position: fixed;
  -webkit-transform: translate(100px, 100px);
          transform: translate(100px, 100px);
}

#services .single-service:first-child .headline {
  opacity: 1;
}

#services .section-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
}

#services .section-bg img {
  position: absolute;
}

#services .section-content {
  position: relative;
}

@media only screen and (max-width: 991px) {
  #services .services-content {
    width: 100%;
    padding-top: 0rem;
  }
}

@media only screen and (max-width: 600px) {
  #services .services-content {
    padding-top: 60px;
  }
}

#services .services-content .services-list {
  width: 40%;
  padding-top: 50px;
  padding-left: 30px;
}

@media only screen and (max-width: 991px) {
  #services .services-content .services-list {
    width: 100%;
    min-height: 50px;
    padding: 0;
  }
}

#services .services-content .services-list.fixme {
  position: fixed;
  -webkit-transform: translate(100px, 100px);
          transform: translate(100px, 100px);
}

#services .services-content .services-list h3 {
  line-height: 1.6;
  opacity: 0.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);
  cursor: pointer;
}

@media only screen and (max-width: 991px) {
  #services .services-content .services-list h3 {
    font-size: 2rem;
    opacity: 0;
    visibility: hidden;
    display: none;
  }
  #services .services-content .services-list h3.active {
    -webkit-animation: fadeIn 0.3s ease-out 0s forwards;
            animation: fadeIn 0.3s ease-out 0s forwards;
    opacity: 1;
    display: block;
  }
}

#services .services-content .services-list h3.active {
  opacity: 1;
}

#services .services-content .services-txt {
  padding-top: 50px;
  padding-left: 100px;
  width: 40%;
  max-width: 600px;
}

@media only screen and (max-width: 991px) {
  #services .services-content .services-txt {
    width: 100%;
    max-width: 400px;
    padding: 0;
    margin-top: 30px;
    display: block;
  }
}

@media only screen and (max-width: 600px) {
  #services .services-content .services-txt {
    margin-top: 20px;
  }
}

#services .services-content .services-txt .service .service-intro {
  line-height: 1.4;
  margin-bottom: 3rem;
}

@media only screen and (max-width: 991px) {
  #services .services-content .services-txt .service .service-intro {
    margin-bottom: 1rem;
  }
}

#services .services-content .services-txt .service .service-intro a {
  font-family: "Montserrat-SemiBold", "Microsoft YaHei", "WenQuanYi Micro Hei", Arial, sans-serif;
  color: #bf1e2d;
  text-decoration: underline;
}

#services .services-content .services-txt .service .service-detail p {
  margin-bottom: 1rem;
}

/*     
    Name: _contact.scss    
    Author: Zakaria El Khachia
    Project: CanLife
*/
#contact {
  background-image: url("../img/svg/cursive-bg-contact.svg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 0;
  background-color: #ffffff;
}

#contact .contact-content {
  padding: 240px 100px;
}

@media only screen and (max-width: 600px) {
  #contact .contact-content {
    padding: 240px 50px;
  }
}

#contact .contact-content h4 {
  font-family: "Avenir-Bold-Italic", "Microsoft YaHei", "WenQuanYi Micro Hei", Arial, sans-serif;
  text-transform: capitalize;
  color: #d73241;
}

#contact .contact-content p {
  font-family: "Montserrat-SemiBold", "Microsoft YaHei", "WenQuanYi Micro Hei", Arial, sans-serif;
  line-height: 1.35;
  margin: 40px 0;
}

#contact .contact-content a {
  font-family: "Avenir-Bold", "Microsoft YaHei", "WenQuanYi Micro Hei", Arial, sans-serif;
  color: #d73241;
}
/*# sourceMappingURL=main.css.map */