/* =================================================================== 
 *
 *  Epitome Main Stylesheet
 *  Template Ver. 1.0.0
 *  04-22-2019
 *  ------------------------------------------------------------------
 *
 *  TOC:
 *  # base style overrides
 *     ## links
 *  # typography & general theme styles
 *    ## Lists
 *    ## responsive video container
 *    ## floated image
 *    ## tables
 *    ## Spacing 
 *    ## pace.js styles - minimal
 *  # preloader
 *  # forms 
 *    ## Style Placeholder Text
 *    ## Change Autocomplete styles in Chrome
 *  # buttons
 *  # additional components
 *    ## additional typo styles 
 *    ## skillbars
 *    ## alert box 
 *    ## pagination 
 *  # Common and Reusable Styles
 *  # header 
 *    ## header logo
 *    ## main navigation
 *    ## menu trigger
 *  # intro 
 *  # about
 *    ## timeline
 *  # services
 *  # CTA
 *  # works
 *  # testimonials
 *  # contact
 *  # footer
 *    ## copyright
 *    ## go to top
 *  # IE10/IE11 Specific
 *
 * =================================================================== */



/* ===================================================================
 * # base style overrides
 *
 * ------------------------------------------------------------------- */
html {
  font-size: 10px;
}

@media screen and (max-width:400px) {
  html {
    font-size: 9.411764705882353px;
  }

}


html,
body {
  height: 100%;
}

body {
  background: #050505;
  font-family: "Lora", serif;
  font-size: 1.7rem;
  font-style: normal;
  font-weight: normal;
  line-height: 1.882;
  color: #000000;
  margin: 0;
  padding: 0;
}

/* ------------------------------------------------------------------- 
 * ## links
 * ------------------------------------------------------------------- */
a {
  color: #2949fd;
  transition: all 0.3s ease-in-out;
}

a:hover,
a:focus,
a:active {
  color: #000000;
}

a:hover,
a:active {
  outline: 0;
}



/* ===================================================================
 * # typography & general theme styles
 * 
 * ------------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
   font-family: "Dela Gothic One", sans-serif;
  font-weight: 500;
  font-style: normal;
  color: #000000;
  /* font-variant-ligatures: common-ligatures;
  text-rendering: optimizeLegibility; */
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4 {
  margin-top: 6rem;
  margin-bottom: 1.6rem;
}

@media screen and (max-width:600px) {

  h1,
  .h1,
  h2,
  .h2,
  h3,
  .h3,
  h4,
  .h4 {
    margin-top: 6rem;
  }
}

h5,
.h5,
h6,
.h6 {
  margin-top: 4.8rem;
  margin-bottom: 1.2rem;
}

@media screen and (max-width:600px) {

  h5,
  .h5,
  h6,
  .h6 {
    margin-top: 4rem;
    margin-bottom: 0.8rem;
  }

}

h1,
.h1 {
  font-size: 3.6rem;
  line-height: 1.222;
  letter-spacing: -.1rem;
}

@media screen and (max-width:600px) {

  h1,
  .h1 {
    font-size: 3.3rem;
    letter-spacing: -.07rem;
  }

}

h2,
.h2 {
  font-size: 3rem;
  line-height: 1.2;
}

h3,
.h3 {
  font-size: 2.4rem;
  line-height: 1.1667;
}

h4,
.h4 {
  font-size: 2.1rem;
  line-height: 1.286;
}

h5,
.h5 {
  font-size: 1.8rem;
  line-height: 1.333;
}

h6,
.h6 {
  font-size: 1.6rem;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: .16rem;
}

p img {
  margin: 0;
}

p.lead {
  font-family: "Lora", serif;
  font-weight: 300;
  font-size: 2.4rem;
  line-height: 1.833;
  margin-bottom: 3.6rem;
  color: #000000;
}

@media screen and (max-width:1200px) {
  p.lead {
    font-size: 2.2rem;
  }

}

em,
i,
strong,
b {
  font-size: inherit;
  line-height: inherit;
}

em,
i {
  font-family: "Lora", serif;
  font-style: italic;
}

strong,
b {
  font-family: "Lora", serif;
  font-weight: 700;
}

small {
  font-size: 1.2rem;
  line-height: inherit;
}

blockquote {
  margin: 4rem 0;
  padding-left: 4.8rem;
  position: relative;
}

blockquote:before {
  content: "\201C";
  font-size: 11.2rem;
  line-height: 0px;
  margin: 0;
  color: rgba(0, 0, 0, 0.2);
  font-family: arial, sans-serif;
  position: absolute;
  top: 4.8rem;
  left: 0;
}

blockquote p {
  font-family: "Frank Ruhl Libre", serif;
  font-weight: 400;
  padding: 0;
  font-size: 2.1rem;
  line-height: 1.905;
  color: #000000;
}

blockquote cite {
  display: block;
  font-family: "Montserrat", sans-serif;
  font-size: 1.4rem;
  font-style: normal;
  line-height: 1.429;
}

blockquote cite:before {
  content: "\2014 \0020";
}

blockquote cite,
blockquote cite a,
blockquote cite a:visited {
  color: #7e7e7e;
  border: none;
}

abbr {
  font-family: "Lora", serif;
  font-weight: 700;
  font-variant: small-caps;
  text-transform: lowercase;
  letter-spacing: .05rem;
  color: #7e7e7e;
}

var,
kbd,
samp,
code,
pre {
  font-family: Consolas, "Andale Mono", Courier, "Courier New", monospace;
}

pre {
  padding: 2.4rem 3.2rem 3.2rem;
  background: #e0e0e0;
  overflow-x: auto;
}

code {
  font-size: 1.4rem;
  margin: 0 .2rem;
  padding: .4rem .8rem;
  white-space: nowrap;
  background: #e0e0e0;
  border: 1px solid #c3c3c3;
  color: #000000;
  border-radius: 3px;
}

pre>code {
  display: block;
  white-space: pre;
  line-height: 2;
  padding: 0;
  margin: 0;
}

pre.prettyprint>code {
  border: none;
}

del {
  text-decoration: line-through;
}

abbr[title],
dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
  text-decoration: none;
}

mark {
  background: #fff099;
  color: #000000;
}

hr {
  border: solid #e0e0e0;
  border-width: 1px 0 0;
  clear: both;
  margin: 2.4rem 0 1.6rem;
  height: 0;
}

/* ------------------------------------------------------------------- 
 * ## Lists
 * ------------------------------------------------------------------- */
ol {
  list-style: decimal;
}

ul {
  list-style: disc;
}

li {
  display: list-item;
}

ol,
ul {
  margin-left: 1.6rem;
}

ul li {
  padding-left: .4rem;
}

ul ul,
ul ol,
ol ol,
ol ul {
  margin: .8rem 0 .8rem 1.6rem;
}

ul.disc li {
  display: list-item;
  list-style: none;
  padding: 0 0 0 .8rem;
  position: relative;
}

ul.disc li::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2949fd;
  position: absolute;
  left: -16px;
  top: 11px;
  vertical-align: middle;
}

dt {
  margin: 0;
  color: #2949fd;
}

dd {
  margin: 0 0 0 2rem;
}

/* ------------------------------------------------------------------- 
 * ## responsive video container
 * ------------------------------------------------------------------- */
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed,
.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ------------------------------------------------------------------- 
 * ## floated image
 * ------------------------------------------------------------------- */
img.pull-right {
  margin: 1.2rem 0 0 2.8rem;
}

img.pull-left {
  margin: 1.2rem 2.8rem 0 0;
}

/* ------------------------------------------------------------------- 
 * ## tables
 * ------------------------------------------------------------------- */
table {
  border-width: 0;
  width: 100%;
  max-width: 100%;
  font-family: "Lora", serif;
  border-collapse: collapse;
}

th,
td {
  padding: 1.5rem 3.2rem;
  text-align: left;
  border-bottom: 1px solid #e0e0e0;
}

th {
  color: #000000;
  font-family: "Lora", serif;
  font-weight: 700;
}

th:first-child,
td:first-child {
  padding-left: 0;
}

th:last-child,
td:last-child {
  padding-right: 0;
}

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ------------------------------------------------------------------- 
 * ## Spacing 
 * ------------------------------------------------------------------- */
button,
.btn {
  margin-bottom: 1.6rem;
}

fieldset {
  margin-bottom: 1.6rem;
}

input,
textarea,
select,
pre,
blockquote,
figure,
table,
p,
ul,
ol,
dl,
form,
.video-container,
.ss-custom-select {
  margin-bottom: 3.2rem;
}

/* ------------------------------------------------------------------- 
 * ## pace.js styles - minimal
 * ------------------------------------------------------------------- */
.pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.pace-inactive {
  display: none;
}

.pace .pace-progress {
  background: #2949fd;
  position: fixed;
  z-index: 501;
  top: 0;
  right: 100%;
  width: 100%;
  height: 4px;
}

.oldie .pace {
  display: none;
}



/* =================================================================== 
 * # preloader
 *
 * ------------------------------------------------------------------- */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #050505;
  z-index: 500;
  height: 100vh;
  width: 100%;
}

.no-js #preloader,
.oldie #preloader {
  display: none;
}

#loader {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 60px;
  height: 60px;
  padding: 0;
  margin-left: -30px;
  margin-top: -30px;
}

#loader:before {
  content: "";
  border-top: 6px solid rgba(255, 255, 255, 0.1);
  border-right: 6px solid rgba(255, 255, 255, 0.1);
  border-bottom: 6px solid rgba(255, 255, 255, 0.1);
  border-left: 6px solid #2949fd;
  -webkit-animation: load 1.1s infinite linear;
  animation: load 1.1s infinite linear;
  display: block;
  border-radius: 50%;
  width: 60px;
  height: 60px;
}

@-webkit-keyframes load {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }

}

@keyframes load {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }

}



/* ===================================================================
 * # forms 
 *
 * ------------------------------------------------------------------- */
fieldset {
  border: none;
}

input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  display: block;
  height: 6.4rem;
  padding: 1.6rem 0 1.5rem;
  border: 0;
  outline: none;
  color: #000000;
  font-family: "Montserrat", sans-serif;
  font-size: 1.6rem;
  line-height: 3.2rem;
  max-width: 100%;
  background: transparent;
  border-bottom: 1px solid #c3c3c3;
  transition: all .3s ease-in-out;
}

.ss-custom-select {
  position: relative;
  padding: 0;
}

.ss-custom-select select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-indent: 0.01px;
  text-overflow: '';
  margin: 0;
  line-height: 3rem;
  vertical-align: middle;
}

.ss-custom-select select option {
  padding-left: 2rem;
  padding-right: 2rem;
}

.ss-custom-select select::-ms-expand {
  display: none;
}

.ss-custom-select::after {
  border-bottom: 2px solid #000000;
  border-right: 2px solid #000000;
  content: '';
  display: block;
  height: 8px;
  width: 8px;
  margin-top: -7px;
  pointer-events: none;
  position: absolute;
  right: 2.4rem;
  top: 50%;
  transition: all 0.15s ease-in-out;
  -webkit-transform-origin: 66% 66%;
  transform-origin: 66% 66%;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

textarea {
  min-height: 25.6rem;
}

input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  color: #000000;
  border-bottom: 1px solid #000000;
}

label,
legend {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  margin-bottom: .8rem;
  line-height: 1.714;
  color: #000000;
  display: block;
}

input[type="checkbox"],
input[type="radio"] {
  display: inline;
}

label>.label-text {
  display: inline-block;
  margin-left: 1rem;
  font-family: "Montserrat", sans-serif;
  line-height: inherit;
}

label>input[type="checkbox"],
label>input[type="radio"] {
  margin: 0;
  position: relative;
  top: .2rem;
}

/* ------------------------------------------------------------------- 
 * ## Style Placeholder Text
 * ------------------------------------------------------------------- */
::-webkit-input-placeholder {

  /* WebKit, Blink, Edge */
  color: #8c8c8c;
}

:-moz-placeholder {

  /* Mozilla Firefox 4 to 18 */
  color: #8c8c8c;
  opacity: 1;
}

::-moz-placeholder {

  /* Mozilla Firefox 19+ */
  color: #8c8c8c;
  opacity: 1;
}

:-ms-input-placeholder {

  /* Internet Explorer 10-11 */
  color: #8c8c8c;
}

::-ms-input-placeholder {

  /* Microsoft Edge */
  color: #8c8c8c;
}

::placeholder {

  /* Most modern browsers support this now. */
  color: #8c8c8c;
}

.placeholder {
  color: #8c8c8c !important;
}

/* ------------------------------------------------------------------- 
 * ## Change Autocomplete styles in Chrome
 * ------------------------------------------------------------------- */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus input:-webkit-autofill,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: #2949fd;
  transition: background-color 5000s ease-in-out 0s;
}



/* ===================================================================
 * # buttons
 *
 * ------------------------------------------------------------------- */
.btn,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  display: inline-block;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: .5rem;
  height: 6rem;
  line-height: 5.6rem;
  padding: 0 3.2rem;
  margin: 0 .4rem 1.6rem 0;
  color: #000000;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: all .3s ease-in-out;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #d3d3d3;
  border: 0.2rem solid #d3d3d3;
}

.btn:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.btn:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
  background-color: #c3c3c3;
  border-color: #c3c3c3;
  color: #000000;
  outline: 0;
}

/* button primary
 * ------------------------------------------------- */
.btn.btn--primary,
button.btn--primary,
input[type="submit"].btn--primary,
input[type="reset"].btn--primary,
input[type="button"].btn--primary {
  background: #000000;
  border-color: #000000;
  color: #ffffff;
}

.btn.btn--primary:hover,
button.btn--primary:hover,
input[type="submit"].btn--primary:hover,
input[type="reset"].btn--primary:hover,
input[type="button"].btn--primary:hover,
.btn.btn--primary:focus,
button.btn--primary:focus,
input[type="submit"].btn--primary:focus,
input[type="reset"].btn--primary:focus,
input[type="button"].btn--primary:focus {
  background: #2949fd;
  border-color: #2949fd;
}

/* button modifiers
 * ------------------------------------------------- */
.btn.full-width,
button.full-width {
  width: 100%;
  margin-right: 0;
}

.btn--medium,
button.btn--medium {
  height: 6.4rem !important;
  line-height: 6rem !important;
}

.btn--large,
button.btn--large {
  height: 6.8rem !important;
  line-height: 6.4rem !important;
}

.btn--stroke,
button.btn--stroke {
  background: transparent !important;
  border: 0.2rem solid #000000;
  color: #000000;
}

.btn--stroke:hover,
button.btn--stroke:hover {
  background: #000000 !important;
  border: 0.2rem solid #000000;
  color: #ffffff;
}

.btn--pill,
button.btn--pill {
  padding-left: 3.2rem !important;
  padding-right: 3.2rem !important;
  border-radius: 1000px !important;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}



/* =================================================================== 
 * # additional components
 *
 * ------------------------------------------------------------------- */

/* ------------------------------------------------------------------- 
 * ## additional typo styles 
 * ------------------------------------------------------------------- */

/* drop cap 
 * ----------------------------------------------- */
.drop-cap:first-letter {
  float: left;
  margin: 0;
  padding: 1.6rem .8rem 0 0;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 8.4rem;
  line-height: 6rem;
  text-indent: 0;
  background: transparent;
  color: #000000;
}

/* line definition style 
 * ----------------------------------------------- */
.lining dt,
.lining dd {
  display: inline;
  margin: 0;
}

.lining dt+dt:before,
.lining dd+dt:before {
  content: "\A";
  white-space: pre;
}

.lining dd+dd:before {
  content: ", ";
}

.lining dd+dd:before {
  content: ", ";
}

.lining dd:before {
  content: ": ";
  margin-left: -0.2em;
}

/* dictionary definition style 
 * ----------------------------------------------- */
.dictionary-style dt {
  display: inline;
  counter-reset: definitions;
}

.dictionary-style dt+dt:before {
  content: ", ";
  margin-left: -0.2em;
}

.dictionary-style dd {
  display: block;
  counter-increment: definitions;
}

.dictionary-style dd:before {
  content: counter(definitions, decimal) ". ";
}

/** 
 * Pull Quotes
 * -----------
 * markup:
 *
 * <aside class="pull-quote">
 *    <blockquote>
 *      <p></p>
 *    </blockquote>
 *  </aside>
 *
 * --------------------------------------------------------------------- */
.pull-quote {
  position: relative;
  padding: 2.4rem 3.2rem 2.4rem 0px;
}

.pull-quote:before,
.pull-quote:after {
  height: 1em;
  position: absolute;
  font-size: 11.2rem;
  font-family: Arial, Sans-Serif;
  color: rgba(0, 0, 0, 0.2);
}

.pull-quote:before {
  content: "\201C";
  top: -3.4rem;
  left: 0;
}

.pull-quote:after {
  content: '\201D';
  bottom: 3.4rem;
  right: 0;
}

.pull-quote blockquote {
  margin: 0;
  padding-left: 4.8rem;
  padding-right: 0;
  position: relative;
}

.pull-quote blockquote p {
  font-family: "Frank Ruhl Libre", serif;
  font-weight: 400;
  padding: 0;
  font-size: 2.1rem;
  line-height: 1.905;
  color: #000000;
}

.pull-quote blockquote:before {
  content: none;
}

/** 
 * Stats Tab
 * ---------
 * markup:
 *
 * <ul class="stats-tabs">
 *    <li><a href="#">[value]<em>[name]</em></a></li>
 *  </ul>
 *
 * Extend this object into your markup.
 *
 * --------------------------------------------------------------------- */
.stats-tabs {
  padding: 0;
  margin: 3.2rem 0;
}

.stats-tabs li {
  display: inline-block;
  margin: 0 1.6rem 3.2rem 0;
  padding: 0 1.5rem 0 0;
  border-right: 1px solid #d3d3d3;
}

.stats-tabs li:last-child {
  margin: 0;
  padding: 0;
  border: none;
}

.stats-tabs li a {
  display: inline-block;
  font-size: 2.5rem;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  border: none;
  color: #000000;
}

.stats-tabs li a:hover {
  color: #2949fd;
}

.stats-tabs li a em {
  display: block;
  margin: .8rem 0 0 0;
  font-family: "Montserrat", sans-serif;
  font-size: 1.5rem;
  font-weight: normal;
  font-style: normal;
  color: #7e7e7e;
}

/* ------------------------------------------------------------------- 
 * ## skillbars
 * ------------------------------------------------------------------- */
.skill-bars {
  list-style: none;
  margin: 6.8rem 0 3.2rem;
}

.skill-bars li {
  height: .4rem;
  background: #c3c3c3;
  width: 100%;
  margin-bottom: 6.8rem;
  padding: 0;
  position: relative;
}

.skill-bars li strong {
  position: absolute;
  left: 0;
  top: -4rem;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  color: #000000;
  text-transform: uppercase;
  letter-spacing: .2rem;
  font-size: 1.4rem;
  line-height: 2.4rem;
}

.skill-bars li .progress {
  background: #000000;
  position: relative;
  height: 100%;
}

.skill-bars li .progress span {
  position: absolute;
  right: 0;
  top: -3.6rem;
  display: block;
  font-family: "Montserrat", sans-serif;
  color: #ffffff;
  font-size: 1.1rem;
  line-height: 1;
  background: #000000;
  padding: .8rem .8rem;
  border-radius: 3px;
}

.skill-bars li .progress span::after {
  position: absolute;
  left: 50%;
  bottom: -10px;
  margin-left: -5px;
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-top-color: #000000;
  content: "";
}

.skill-bars li .percent5 {
  width: 5%;
}

.skill-bars li .percent10 {
  width: 10%;
}

.skill-bars li .percent15 {
  width: 15%;
}

.skill-bars li .percent20 {
  width: 20%;
}

.skill-bars li .percent25 {
  width: 25%;
}

.skill-bars li .percent30 {
  width: 30%;
}

.skill-bars li .percent35 {
  width: 35%;
}

.skill-bars li .percent40 {
  width: 40%;
}

.skill-bars li .percent45 {
  width: 45%;
}

.skill-bars li .percent50 {
  width: 50%;
}

.skill-bars li .percent55 {
  width: 55%;
}

.skill-bars li .percent60 {
  width: 60%;
}

.skill-bars li .percent65 {
  width: 65%;
}

.skill-bars li .percent70 {
  width: 70%;
}

.skill-bars li .percent75 {
  width: 75%;
}

.skill-bars li .percent80 {
  width: 80%;
}

.skill-bars li .percent85 {
  width: 85%;
}

.skill-bars li .percent90 {
  width: 90%;
}

.skill-bars li .percent95 {
  width: 95%;
}

.skill-bars li .percent100 {
  width: 100%;
}

/* ------------------------------------------------------------------- 
 * ## alert box 
 * ------------------------------------------------------------------- */
.alert-box {
  padding: 2.4rem 4rem 2.4rem 3.2rem;
  position: relative;
  margin-bottom: 3.2rem;
  border-radius: 3px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.6;
}

.alert-box__close {
  position: absolute;
  display: block;
  right: 1.6rem;
  top: 1.6rem;
  cursor: pointer;
  width: 12px;
  height: 12px;
}

.alert-box__close::before,
.alert-box__close::after {
  content: '';
  position: absolute;
  display: inline-block;
  width: 2px;
  height: 12px;
  top: 0;
  left: 5px;
}

.alert-box__close::before {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.alert-box__close::after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.alert-box--error {
  background-color: #ffd1d2;
  color: #dd4043;
}

.alert-box--error .alert-box__close::before,
.alert-box--error .alert-box__close::after {
  background-color: #dd4043;
}

.alert-box--success {
  background-color: #c8e675;
  color: #637533;
}

.alert-box--success .alert-box__close::before,
.alert-box--success .alert-box__close::after {
  background-color: #637533;
}

.alert-box--info {
  background-color: #d5ebfb;
  color: #387fb2;
}

.alert-box--info .alert-box__close::before,
.alert-box--info .alert-box__close::after {
  background-color: #387fb2;
}

.alert-box--notice {
  background-color: #fff099;
  color: #827217;
}

.alert-box--notice .alert-box__close::before,
.alert-box--notice .alert-box__close::after {
  background-color: #827217;
}

/* -------------------------------------------------------------------
 * ## pagination 
 * ------------------------------------------------------------------- */
.pgn {
  margin: 3.2rem auto;
  text-align: center;
}

.pgn ul {
  display: inline-block;
  list-style: none;
  margin-left: 0;
  position: relative;
  padding: 0 6rem;
}

.pgn ul li {
  display: inline-block;
  margin: 0;
  padding: 0;
}

.pgn__num {
  font-family: "Lora", serif;
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 3.2rem;
  display: inline-block;
  padding: .2rem 1.2rem;
  height: 3.6rem;
  margin: .2rem .2rem;
  color: #000000;
  border-radius: 4px;
  transition: all, .3s, ease-in-out;
}

.pgn__num:hover {
  background: #d3d3d3;
  color: #000000;
}

.pgn .current,
.pgn .current:hover {
  background-color: #2949fd;
  color: white;
}

.pgn .inactive,
.pgn .inactive:hover {
  opacity: 0.4;
  cursor: default;
}

.pgn__prev,
.pgn__next {
  display: block;
  background-repeat: no-repeat;
  background-size: 24px 11px;
  background-position: center;
  height: 3.6rem;
  width: 4.8rem;
  line-height: 2rem;
  border-radius: 3px;
  padding: 0;
  margin: 0;
  opacity: 1;
  font: 0/0 a;
  text-shadow: none;
  color: transparent;
  transition: all, .2s, ease-in-out;
  position: absolute;
  top: 50%;
  -webkit-transform: translate3d(0, -50%, 0);
  transform: translate3d(0, -50%, 0);
}

.pgn__prev:hover,
.pgn__next:hover {
  background-color: #d3d3d3;
}

.pgn__prev {
  background-image: url("../images/icons/icon-arrow-left.svg");
  left: 0;
}

.pgn__next {
  background-image: url("../images/icons/icon-arrow-right.svg");
  right: 0;
}

.pgn__prev.inactive,
.pgn__next.inactive {
  opacity: 0.4;
  cursor: default;
}

.pgn__prev.inactive:hover,
.pgn__next.inactive:hover {
  background-color: transparent;
}

/* ------------------------------------------------------------------- 
 * responsive:
 * pagination
 * ------------------------------------------------------------------- */
@media screen and (max-width:600px) {
  .pgn ul {
    padding: 0 5.2rem;
  }

}



/* ===================================================================
 * # Common and Reusable Styles
 *
 * ------------------------------------------------------------------- */
.wide {
  max-width: 1400px;
}

.narrow {
  max-width: 1000px;
}

.heading-block {
  position: relative;
}

.heading-block--center {
  max-width: 940px;
  text-align: center;
}

.section-heading {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 1.7rem;
  line-height: 1.176;
  text-transform: uppercase;
  letter-spacing: .5rem;
  margin-top: 0;
  padding-top: 3.2rem;
  margin-bottom: 8rem;
  position: relative;
}

.section-heading::before {
  content: "";
  display: block;
  width: 150px;
  height: 2px;
  background-color: #2949fd;
  position: absolute;
  top: 0;
  left: 0;
}

.section-heading--centerbottom {
  text-align: center;
  padding-top: 0;
  padding-bottom: 3.2rem;
}

.section-heading--centerbottom::before {
  margin-left: -75px;
  top: auto;
  bottom: 0;
  left: 50%;
}

.section-desc {
  font-family: "Frank Ruhl Libre", serif;
  font-size: 5.4rem;
  font-weight: 400;
  line-height: 1.259;
  letter-spacing: -0.05rem;
  color: #000000;
}

.item-title {
  font-family: "Frank Ruhl Libre", serif;
  font-size: 3.6rem;
  font-weight: 500;
  line-height: 1.222;
  margin-top: 0;
  color: #000000;
}

.ss-dark .section-heading,
.ss-dark .section-desc {
  color: #ffffff;
}

/* ------------------------------------------------------------------- 
 * responsive:
 * common and reusable styles
 * ------------------------------------------------------------------- */
@media screen and (max-width:1200px) {
  .item-title {
    font-size: 3rem;
  }

}

@media screen and (max-width:1024px) {
  .heading-block {
    max-width: 800px;
  }

  .section-desc {
    font-size: 4.8rem;
  }

}

@media screen and (max-width:800px) {
  .heading-block {
    max-width: 600px;
  }

  .section-heading {
    font-size: 1.6rem;
    padding-top: 0;
    padding-bottom: 3.2rem;
    text-align: center;
  }

  .section-heading::before {
    top: auto;
    bottom: 0;
    left: 50%;
    margin-left: -75px;
  }

}

@media screen and (max-width:600px) {
  .section-heading {
    margin-bottom: 6.8rem;
  }

  .section-desc {
    font-size: 4rem;
  }

}

@media screen and (max-width:400px) {
  .section-desc {
    font-size: 3.4rem;
  }

  .item-title {
    font-size: 2.8rem;
  }

}



/* ===================================================================
 * # header 
 *
 * ------------------------------------------------------------------- */
.s-header {
  position: absolute;
  top: 2rem;
  left: 0;
  width: 100%;
  height: 78px;
  text-align: center;
  z-index: 100;
}

.s-header.sticky {
  background-color: #0505059d;
  backdrop-filter: blur(10px) ;
  position: fixed;
  top: 0;
  left: 0;
}

/* -------------------------------------------------------------------
 * ## header logo
 * ------------------------------------------------------------------- */
.header-logo {
  display: inline-block;
  margin: 6px 0 0 0;
  padding: 0;
  -webkit-transform: translate3d(0, -50%, 0);
  transform: translate3d(0, -50%, 0);
  position: absolute;
  top: 50%;
  left: 40px;
}

.header-logo a {
  display: block;
  margin: 0;
  padding: 0;
  outline: 0;
  border: none;
  transition: all .3s;
}

.header-logo img {
  width: 80px;
  
}

.tech-stack-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.tech-stack-list li {
 border: 2px solid #000000;
  
  padding: 20px 25px;
  margin: 5px;
  font-size: 17px;
  font-weight: bold;
  color: #333;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

.tech-stack-list li:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0,0,0,0.15);
  background-color: #2949fd;
  border: 2px solid #2949fd;
  cursor: pointer;
  color: #fff;
}

/* -------------------------------------------------------------------
 * ## main navigation
 * ------------------------------------------------------------------- */
.header-nav-wrap {
  display: inline-block;
}

.header-nav-wrap ul {
  display: inline-block;
  list-style: none;
  margin-left: 0;
  margin-top: 18px;
}

.header-nav-wrap li {
  display: inline-block;
  padding-left: 0;
}

.header-nav-wrap li a {
  display: block;
  line-height: calc(78px - (18px * 2));
}

.header-main-nav {
  font-family: "Montserrat", sans-serif;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .3rem;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 0 4px;
  z-index: 2;
  position: static;
}

.header-main-nav li {
  margin: 0 2rem;
}

.header-main-nav a {
  color: rgba(255, 255, 255, 0.5);
  position: relative;
}

.header-main-nav a:hover,
.header-main-nav a:focus,
.header-main-nav a:active {
  color: #ffffff;
}

.header-main-nav .current a {
  color: #ffffff;
}

.header-social {
  font-size: 1.8rem;
  margin: 0;
  position: absolute;
  top: 0;
  right: 40px;
  font-family: "Montserrat", sans-serif;
}

.header-social li {
  margin-right: 1rem;
}

.header-social li:last-child {
  margin-right: 0;
}

.header-social li a {
  color: #ffffff;
}

/* ------------------------------------------------------------------- 
 * ## menu trigger
 * ------------------------------------------------------------------- */
.header-menu-toggle {
  display: none;
  height: 42px;
  width: 42px;
  line-height: 42px;
  font-family: "Lora", serif;
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: .2rem;
  color: rgba(255, 255, 255, 0.5);
  transition: all .3s;
  position: absolute;
  right: 32px;
  top: 18px;
}

.header-menu-toggle:hover,
.header-menu-toggle:focus {
  color: #ffffff;
}

.header-menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  margin-top: -1px;
  background-color: #ffffff;
  transition: all .5s;
  font: 0/0 a;
  text-shadow: none;
  color: transparent;
  position: absolute;
  top: 50%;
  left: 9px;
  right: auto;
  bottom: auto;
}

.header-menu-toggle span::before,
.header-menu-toggle span::after {
  content: '';
  width: 100%;
  height: 100%;
  background-color: inherit;
  position: absolute;
  left: 0;
  transition: all .5s;
}

.header-menu-toggle span::before {
  top: -9px;
}

.header-menu-toggle span::after {
  bottom: -9px;
}

.header-menu-toggle.is-clicked span {
  background-color: rgba(255, 255, 255, 0);
  transition: all .1s;
}

.header-menu-toggle.is-clicked span::before,
.header-menu-toggle.is-clicked span::after {
  background-color: white;
}

.header-menu-toggle.is-clicked span::before {
  top: 0;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}

.header-menu-toggle.is-clicked span::after {
  bottom: 0;
  -webkit-transform: rotate(225deg);
  transform: rotate(225deg);
}

/* ------------------------------------------------------------------- 
 * responsive:
 * header
 * ------------------------------------------------------------------- */
@media screen and (max-width:1200px) {
  .header-main-nav {
    font-size: 12px;
  }

  .header-main-nav li {
    margin: 0 1.4rem;
  }

}

@media screen and (max-width:1000px) {
  .s-header {
    text-align: right;
  }

  .header-nav-wrap {
    margin-right: 36px;
  }

  .header-nav-wrap .header-social {
    display: none;
  }

}

@media screen and (max-width:800px) {
  .s-header {
    background-color: #050505;
    position: fixed;
    top: 0;
  }

  .header-logo img {
    width: 50px;
    
  }

  .header-nav-wrap {
    display: none;
    text-align: left;
    height: auto;
    width: 100%;
    background-color: #050505;
    padding: 120px 44px 64px;
  }

  .header-nav-wrap .header-main-nav {
    display: block;
    padding-left: 0;
    height: auto;
    margin: 0 0 4rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
  }

  .header-nav-wrap .header-main-nav li {
    display: block;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }

  .header-nav-wrap .header-main-nav li a {
    padding: 18px 0;
    line-height: 20px;
  }

  .header-nav-wrap .header-social {
    display: block;
    position: static;
  }

  .header-nav-wrap .header-social li {
    font-size: 1.8rem;
    margin-right: 1.6rem;
  }

  .header-nav-wrap .header-social li a {
    line-height: 36px;
  }

  .header-menu-toggle {
    display: block;
  }

}

@media screen and (max-width:600px) {
  .header-logo {
    left: 35px;
  }

}

/* -------------------------------------------------------------------
 * make sure the menu is visible on larger screens
 * ------------------------------------------------------------------- */
@media only screen and (min-width:801px) {
  .header-nav-wrap {
    display: block !important;
  }

}



/* ===================================================================
 * # intro 
 *
 * ------------------------------------------------------------------- */

.s-intro::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: radial-gradient(circle at 50% 50%,
      #0000 0,
      #0000 2px,
      hsl(0 0 4%) 2px);
  background-size: 8px 8px;
  --f: blur(1em) brightness(6);
  animation: hii 10s linear infinite;
}

@keyframes hii {
  0% {
    backdrop-filter: var(--f) hue-rotate(0deg);
  }

  to {
    backdrop-filter: var(--f) hue-rotate(360deg);
  }
}

.s-intro {
  width: 100%;
  height: 100vh;
  min-height: 792px;
  position: relative;
  --c: #09f;
  background-color: #000;
  background-image: radial-gradient(4px 100px at 0px 235px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 235px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 117.5px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 252px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 252px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 126px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 150px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 150px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 75px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 253px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 253px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 126.5px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 204px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 204px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 102px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 134px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 134px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 67px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 179px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 179px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 89.5px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 299px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 299px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 149.5px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 215px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 215px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 107.5px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 281px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 281px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 140.5px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 158px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 158px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 79px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 210px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 210px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 105px, var(--c) 100%, #0000 150%);
  background-size:
    300px 235px,
    300px 235px,
    300px 235px,
    300px 252px,
    300px 252px,
    300px 252px,
    300px 150px,
    300px 150px,
    300px 150px,
    300px 253px,
    300px 253px,
    300px 253px,
    300px 204px,
    300px 204px,
    300px 204px,
    300px 134px,
    300px 134px,
    300px 134px,
    300px 179px,
    300px 179px,
    300px 179px,
    300px 299px,
    300px 299px,
    300px 299px,
    300px 215px,
    300px 215px,
    300px 215px,
    300px 281px,
    300px 281px,
    300px 281px,
    300px 158px,
    300px 158px,
    300px 158px,
    300px 210px,
    300px 210px,
    300px 210px;
  animation: hi 150s linear infinite;
}

@keyframes hi {
  0% {
    background-position:
      0px 220px,
      3px 220px,
      151.5px 337.5px,
      25px 24px,
      28px 24px,
      176.5px 150px,
      50px 16px,
      53px 16px,
      201.5px 91px,
      75px 224px,
      78px 224px,
      226.5px 350.5px,
      100px 19px,
      103px 19px,
      251.5px 121px,
      125px 120px,
      128px 120px,
      276.5px 187px,
      150px 31px,
      153px 31px,
      301.5px 120.5px,
      175px 235px,
      178px 235px,
      326.5px 384.5px,
      200px 121px,
      203px 121px,
      351.5px 228.5px,
      225px 224px,
      228px 224px,
      376.5px 364.5px,
      250px 26px,
      253px 26px,
      401.5px 105px,
      275px 75px,
      278px 75px,
      426.5px 180px;
  }

  to {
    background-position:
      0px 6800px,
      3px 6800px,
      151.5px 6917.5px,
      25px 13632px,
      28px 13632px,
      176.5px 13758px,
      50px 5416px,
      53px 5416px,
      201.5px 5491px,
      75px 17175px,
      78px 17175px,
      226.5px 17301.5px,
      100px 5119px,
      103px 5119px,
      251.5px 5221px,
      125px 8428px,
      128px 8428px,
      276.5px 8495px,
      150px 9876px,
      153px 9876px,
      301.5px 9965.5px,
      175px 13391px,
      178px 13391px,
      326.5px 13540.5px,
      200px 14741px,
      203px 14741px,
      351.5px 14848.5px,
      225px 18770px,
      228px 18770px,
      376.5px 18910.5px,
      250px 5082px,
      253px 5082px,
      401.5px 5161px,
      275px 6375px,
      278px 6375px,
      426.5px 6480px;
  }
}

.intro-content {
  height: 100%;
  max-width: 1140px;
  z-index: 2;
  padding-top: 20vh;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
}

.intro-pic {
  background-color: #02182c;
  background-repeat: no-repeat;
  background-position: top center;
  background-image: url(../images/hero-pic.jpg);
  background-size: cover;
  position: absolute;
  top: 20%;
  right: 0;
  bottom: 0;
  left: 50%;
}

.intro-pic::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000000;
  opacity: .2;
}

.intro-grid {
  background-image: url(../images/pattern-dot-grid.svg);
  background-size: 24px 24px;
  opacity: .15;
  position: absolute;
  top: 30%;
  right: 0;
  bottom: 0;
  left: 30%;
}

.intro-text {
  -webkit-transform: translate3d(0, -3.6rem, 0);
  transform: translate3d(0, -3.6rem, 0);
  position: static;
  z-index: 1;
}

.intro-text h3 {
  font-family: "Montserrat", sans-serif;
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 1.333;
  color: #2949fd;
  margin-top: 0;
}

.intro-text h1 {
  font-size: 7.8rem;
  font-weight: 500;
  line-height: 1.179;
  color: #ffffff;
  margin-top: 0;
}

.intro-scroll {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 2;
  text-transform: uppercase;
  letter-spacing: .3rem;
  position: absolute;
  bottom: 8rem;
  left: 24px;
  z-index: 1;
}

.intro-scroll a {
  display: inline-block;
  color: rgba(255, 255, 255, 0.3);
  position: relative;
  padding-right: 8.8rem;
}

.intro-scroll a::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  height: 1px;
  width: 72px;
  background-color: #2949fd;
}

/* ------------------------------------------------------------------- 
 * responsive:
 * intro
 * ------------------------------------------------------------------- */
@media screen and (max-width:1400px) {
  .intro-text h3 {
    font-size: 2.2rem;
  }

  .intro-text h1 {
    font-size: 7.2rem;
  }

}

@media screen and (max-width:1200px) {
  .intro-content {
    max-width: 1000px;
  }

  .intro-text h3 {
    font-size: 2rem;
  }

  .intro-text h1 {
    font-size: 7rem;
  }

}

@media screen and (max-width:1024px) {
  .s-intro {
    max-height: 800px;
  }

  .intro-text h1 {
    font-size: 6.2rem;
  }

}

@media screen and (max-width:900px) {
  .intro-text h1 {
    font-size: 6rem;
  }

  .intro-text br {
    display: none;
  }

}

@media screen and (max-width:800px) {
  .intro-content {
    width: 88%;
    padding-top: 8rem;
  }

  .intro-pic {
    top: 12%;
    left: 40%;
  }

  .intro-pic::before {
    opacity: .4;
  }

  .intro-grid {
    top: 20%;
    opacity: .1;
  }

  .intro-text h3 {
    font-size: 1.8rem;
  }

  .intro-text h1 {
    font-size: 5.6rem;
  }

}

@media screen and (max-width:700px) {
  .intro-text h1 {
    font-size: 5rem;
  }

  .intro-pic {
    left: 30%;
  }

  .intro-grid {
    left: 15%;
  }

}

@media screen and (max-width:600px) {
  .s-intro {
    max-height: none;
  }

  .intro-content {
    width: auto;
  }

  .intro-pic {
    left: 20%;
  }

  .intro-grid {
    left: 10%;
  }

  .intro-text {
    -webkit-transform: translate3d(0, -4.8rem, 0);
    transform: translate3d(0, -4.8rem, 0);
  }

  .intro-text h1 {
    font-size: 4.8rem;
  }

  .intro-scroll {
    font-size: 1.1rem;
    left: 30px;
  }

}

@media screen and (max-width:400px) {
  .s-intro {
    min-height: 656px;
  }

  .intro-text h1 {
    font-size: 4.5rem;
  }

}

@media screen and (max-width:350px) {
  .intro-text h1 {
    font-size: 4.2rem;
  }

}



/* ===================================================================
 * # about
 *
 * ------------------------------------------------------------------- */
.s-about {
  padding-top: 19.2rem;
  padding-bottom: 16.8rem;
  background-color: #ffffff;
}

.s-about .row {
  max-width: 1140px;
}

.s-about>[class*="about-"] {
  margin-bottom: 15.2rem;
}

.s-about>[class*="about-"]:last-child {
  margin-bottom: 0;
}

.about-me__text {
  -webkit-columns: 2 360px;
  -moz-columns: 2 360px;
  columns: 2 360px;
  column-gap: 64px;
}

.about-me__buttons {
  margin-top: 4.8rem;
}

.about-me__buttons .column:first-child {
  padding-right: 32px;
}

.about-me__buttons .column:last-child {
  padding-left: 32px;
}

/* -------------------------------------------------------------------
 * ## timeline
 * ------------------------------------------------------------------- */
.about-experience__timeline {
  margin-top: 1.6rem;
}

.about-experience__timeline .column:first-child {
  padding-right: 40px;
}

.about-experience__timeline .column:last-child {
  padding-left: 40px;
}

.timeline {
  padding-top: 4.8rem;
  position: relative;
}

.timeline::before {
  content: "";
  display: block;
  width: 1px;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.12);
  position: absolute;
  left: 0;
  top: 0;
}

.timeline::after {
  content: "";
  display: block;
  width: 5.6rem;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.12);
  position: absolute;
  left: 1px;
  top: 0;
}

.timeline__icon-wrap {
  display: block;
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.25);
  position: absolute;
  top: -2.2rem;
  left: 5.6rem;
}

.timeline__icon {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
  position: absolute;
  left: 50%;
  top: 50%;
}

.timeline__icon--work {
  background-image: url(../images/icons/icon-briefcase.svg);
}

.timeline__icon--education {
  background-image: url(../images/icons/icon-education.svg);
}

.timeline__block {
  position: relative;
  padding-left: 5.6rem;
  padding-bottom: .8rem;
  margin-top: 2.8rem;
  min-height: 35.6rem;
}

.timeline .timeline__block:last-child {
  padding-bottom: 0;
}

.timeline__bullet {
  content: "";
  display: block;
  width: 3px;
  height: 4.8rem;
  background-color: #000000;
  position: absolute;
  left: -1px;
  top: 8px;
}

.timeline__header {
  margin-bottom: 3.2rem;
}

.timeline__header .timeline__timeframe,
.timeline__header h5 {
  font-family: "Montserrat", sans-serif;
}

.timeline__header .timeline__timeframe {
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.714;
  text-transform: uppercase;
  letter-spacing: .3rem;
  margin-bottom: .8rem;
  color: #000000;
}

.timeline__header h3 {
  margin-bottom: 0;
}

.timeline__header h5 {
  font-size: 2.1rem;
  font-weight: 400;
  line-height: 1.333;
  margin-top: 0;
}

/* ------------------------------------------------------------------- 
 * responsive:
 * about
 * ------------------------------------------------------------------- */
@media screen and (max-width:1200px) {
  .s-about {
    padding-top: 17.2rem;
    padding-bottom: 15.6rem;
  }

  .about-experience__timeline .column:first-child {
    padding-right: 30px;
  }

  .about-experience__timeline .column::last-child {
    padding-left: 30px;
  }

  .timeline::after {
    width: 4.4rem;
  }

  .timeline__icon-wrap {
    left: 4.4rem;
  }

  .timeline__block {
    padding-left: 4.4rem;
  }

  .timeline__header h5 {
    font-size: 1.8rem;
  }

}

@media screen and (max-width:1024px) {
  .about-me__text {
    column-gap: 40px;
  }

  .about-me__buttons .column:first-child {
    padding-right: 20px;
  }

  .about-me__buttons .column:last-child {
    padding-left: 20px;
  }

  .about-experience__timeline .column:first-child {
    padding-right: 16px;
  }

  .about-experience__timeline .column:last-child {
    padding-left: 16px;
  }

}

@media screen and (max-width:900px) {
  .s-about .row {
    max-width: 700px;
  }

  .about-me__buttons .column:first-child {
    padding-right: 16px;
  }

  .about-me__buttons .column:last-child {
    padding-left: 16px;
  }

  .about-experience__timeline .column {
    -webkit-flex: 0 0 100%;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }

  .about-experience__timeline .column:first-child {
    margin-bottom: 9.6rem;
  }

  .timeline::after {
    width: 5.6rem;
  }

  .timeline__icon-wrap {
    left: 5.6rem;
  }

  .timeline__block {
    min-height: 0;
    padding-left: 5.6rem;
  }

}

@media screen and (max-width:800px) {
  .s-about {
    padding-top: 16rem;
  }

  .s-about .row {
    max-width: 600px;
  }

}

@media screen and (max-width:600px) {

  .about-me__buttons .column:first-child,
  .about-experience__timeline .column:first-child {
    padding-right: 10px;
  }

  .about-me__buttons .column:last-child,
  .about-experience__timeline .column:last-child {
    padding-left: 10px;
  }

  .timeline::after {
    width: 4.4rem;
  }

  .timeline__icon-wrap {
    left: 4.4rem;
  }

  .timeline__block {
    padding-left: 4.4rem;
  }

  .timeline__header h5 {
    font-size: 1.8rem;
  }

}

@media screen and (max-width:400px) {
  .s-about>[class*="about-"] {
    margin-bottom: 14rem;
  }

  .about-me__buttons .column:first-child,
  .about-experience__timeline .column:first-child {
    padding-right: 0;
  }

  .about-me__buttons .column:last-child,
  .about-experience__timeline .column:last-child {
    padding-left: 0;
  }

  .timeline::after {
    width: 2.8rem;
  }

  .timeline__icon-wrap {
    left: 2.8rem;
  }

  .timeline__block {
    padding-left: 2.8rem;
  }

}



/* ===================================================================
 * # services
 *
 * ------------------------------------------------------------------- */
.s-services {
  padding-top: 19.2rem;
  padding-bottom: 16rem;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-image: url(../images/services-bg.jpg);
  color: rgba(255, 255, 255, 0.7);
  position: relative;
}

.s-services .shadow-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: .3;
  background: radial-gradient(circle, rgba(0, 0, 0, 0) 0%, black 80%);
}

.s-services::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #050505;
  opacity: .85;
}

.s-services h4 {
  font-weight: 400;
  color: #ffffff;
}

.s-services a {
  color: #2949fd;
}

.s-services a:hover,
.s-services a:focus,
.s-services a:active {
  color: #ffffff;
}

.services-list {
  max-width: 1240px;
  margin-top: 8.8rem;
  counter-reset: ctr;
  position: relative;
}

.services-list .item-service {
  margin-bottom: 2.4rem;
  padding: 0 30px;
  min-height: 44.8rem;
}

.services-list .item-service__content {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 3.6rem;
}

.services-list .item-service__content::before {
  display: block;
  content: counter(ctr, decimal-leading-zero) ".";
  counter-increment: ctr;
  margin-bottom: 4.8rem;
  font-family: "Montserrat", sans-serif;
  font-weight: 300;
  font-size: 8rem;
  line-height: 1;
  color: #2949fd;
}

/* ------------------------------------------------------------------- 
 * responsive:
 * services
 * ------------------------------------------------------------------- */
@media screen and (max-width:1400px) {
  .services-list .item-service {
    padding: 0 20px;
  }

  .services-list .item-service__content::before {
    font-size: 7.2rem;
  }

}

@media screen and (max-width:1200px) {
  .services-list {
    max-width: 900px;
  }

  .services-list .item-service__content::before {
    font-size: 6.8rem;
  }

}

@media screen and (max-width:800px) {
  .s-services {
    padding-top: 16rem;
    padding-bottom: 16rem;
  }

  .services-list {
    max-width: 600px;
    margin-top: 8rem;
  }

  .services-list .item-service {
    padding: 0 16px;
    min-height: 0;
  }

  .services-list .item-service__content::before {
    font-size: 5.4rem;
  }

}

@media screen and (max-width:600px) {
  .services-list .item-service {
    padding: 0 10px;
  }

}

@media screen and (max-width:400px) {
  .services-list .item-service {
    padding: 0;
  }

  .services-list .item-service__content::before {
    font-size: 4.8rem;
  }

}



/* ===================================================================
 * # CTA
 *
 * ------------------------------------------------------------------- */
.s-cta {
  padding-top: 13.5rem;
  padding-bottom: 13.6rem;
  background-color: #000000;
  border-top: 1px solid rgba(255, 255, 255, 0.03);
  font-size: 2.4rem;
  line-height: 1.833;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
}

.s-cta a {
  color: #ffffff;
}

.s-cta a:hover,
.s-cta a:focus,
.s-cta a:active {
  color: #2949fd;
}

.s-cta .section-desc {
  margin-top: 0;
}

.cta-content {
  max-width: 800px;
}

.cta-content .btn {
  max-width: 600px;
  background-color: #2949fd;
  border: 0.2rem solid #2949fd;
}

.cta-content .btn:hover,
.cta-content .btn:focus {
  background-color: #ffffff;
  border: 0.2rem solid #ffffff;
  color: #000000;
}

/* ------------------------------------------------------------------- 
 * responsive:
 * cta
 * ------------------------------------------------------------------- */
@media screen and (max-width:800px) {
  .s-cta {
    font-size: 2.2rem;
  }

  .cta-content {
    max-width: 600px;
  }

}

@media screen and (max-width:600px) {
  .s-cta {
    font-size: 2rem;
  }

}

@media screen and (max-width:600px) {
  .s-cta {
    font-size: 1.8rem;
  }

}



/* ===================================================================
 * # works
 *
 * ------------------------------------------------------------------- */
.s-works {
  padding-top: 19.2rem;
  padding-bottom: 16rem;
  background-color: #ffffff;
}

.masonry-wrap {
  width: 89%;
  max-width: 1400px;
  margin-top: 11.2rem;
  margin-right: auto;
  margin-left: auto;
}

.masonry .grid-sizer,
.masonry__brick {
  width: 50%;
}

.masonry__brick {
  float: left;
  padding: 0 30px;
  margin-bottom: 60px;
}

.item-folio {
  text-align: center;
  padding: 60px;
  background-color: #EFEFEF;
  transition: all 0.5s ease-in-out;
}

/* item-folio thumb
 * -------------------------------------- */
.item-folio__thumb {
  position: relative;
  overflow: hidden;
}

.item-folio__thumb .thumb-link {
  display: block;
  position: relative;
}

.item-folio__thumb .thumb-link::before,
.item-folio__thumb .thumb-link::after,
.item-folio__thumb .thumb-link .item-folio__project-link {
  transition: all 0.5s ease-in-out;
}

.item-folio__thumb .thumb-link::before {
  display: block;
  content: "";
  background-color: rgba(0, 0, 0, 0.7);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
}

.item-folio__thumb .thumb-link::after {
  display: block;
  content: "";
  width: 3.6rem;
  height: 3.6rem;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 80%;
  background-image: url(../images/icons/icon-plus.svg);
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
  z-index: 2;
  position: absolute;
  top: 50%;
  left: 50%;
}

.item-folio__thumb img {
  vertical-align: bottom;
}

.item-folio__thumb .item-folio__project-link {
  display: block;
  width: 6.4rem;
  height: 6.4rem;
  background-color: #2949fd;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 30%;
  background-image: url(../images/icons/icon-link.svg);
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
  z-index: 2;
  position: absolute;
  bottom: 0;
  right: 0;
}

/* item-folio thumb on hover 
 * ----------------------------------------------- */
.item-folio__thumb:hover a::before,
.item-folio__thumb:hover a::after {
  opacity: 1;
  visibility: visible;
}

.item-folio__thumb:hover .item-folio__project-link {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/* item-folio text
 * ------------------------------------------------ */
.item-folio__text {
  margin-top: 8.92%;
}

.item-folio__text,
.item-folio__title,
.item-folio__cat {
  display: inline-block;
}

.item-folio__title,
.item-folio__cat {
  font-family: "Montserrat", sans-serif;
  font-size: 1.7rem;
  margin-top: 0;
  margin-bottom: 0;
  line-height: 2rem;
}

.item-folio__title {
  font-weight: 500;
  color: #000000;
}

.item-folio__cat {
  font-weight: 300;
  color: rgba(0, 0, 0, 0.7);
}

.item-folio__cat::before {
  content: "-";
  margin: 0 .4rem;
}

.item-folio__caption {
  display: none;
}

/* ------------------------------------------------------------------- 
 * responsive:
 * works
 * ------------------------------------------------------------------- */
@media screen and (max-width:1200px) {
  .masonry__brick {
    padding: 0 24px;
    margin-bottom: 48px;
  }

  .item-folio {
    padding: 48px;
  }

  .item-folio__thumb .thumb-link::after {
    width: 3rem;
    height: 3rem;
  }

  .item-folio__thumb .item-folio__project-link {
    width: 5.6rem;
    height: 5.6rem;
  }

  .item-folio__title,
  .item-folio__cat {
    font-size: 1.5rem;
  }

}

@media screen and (max-width:1024px) {
  .masonry__brick {
    padding: 0 20px;
    margin-bottom: 40px;
  }

  .item-folio {
    padding: 40px;
  }

}

@media screen and (max-width:900px) {
  .masonry__brick {
    padding: 0 16px;
    margin-bottom: 32px;
  }

  .item-folio {
    padding: 32px;
  }

}

@media screen and (max-width:800px) {
  .s-works {
    padding-top: 16rem;
  }

  .masonry-wrap {
    margin-top: 7.2rem;
  }

  .masonry .grid-sizer,
  .masonry__brick {
    width: 100%;
  }

  .masonry__brick {
    float: none;
    margin-bottom: 60px;
  }

  .item-folio {
    padding: 8.92% 8.92% 8.92%;
  }

  .item-folio__thumb .thumb-link::after {
    width: 3.6rem;
    height: 3.6rem;
  }

  .item-folio__thumb .item-folio__project-link {
    width: 6.4rem;
    height: 6.4rem;
  }

  .item-folio__title,
  .item-folio__cat {
    font-size: 1.7rem;
  }

}

@media screen and (max-width:600px) {
  .masonry-wrap {
    width: auto;
    padding-left: 25px;
    padding-right: 25px;
  }

  .masonry__brick {
    padding: 0 10px;
    margin-bottom: 44px;
  }

  .item-folio__thumb .thumb-link::after {
    width: 3rem;
    height: 3rem;
  }

  .item-folio__thumb .item-folio__project-link {
    width: 5.6rem;
    height: 5.6rem;
  }

  .item-folio__title,
  .item-folio__cat {
    font-size: 1.5rem;
  }

}

@media screen and (max-width:500px) {
  .masonry__brick {
    margin-bottom: 3.6rem;
  }

}

@media screen and (max-width:400px) {
  .masonry__brick {
    padding: 0;
    margin-bottom: 3.2rem;
  }

}



/* ===================================================================
 * # testimonials
 *
 * ------------------------------------------------------------------- */
.s-testimonials {
  padding-top: 18.4rem;
  padding-bottom: 16rem;
  background-color: #efefef;
}

.testimonials {
  position: relative;
}

.testimonials p {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: 4rem;
  line-height: 1.8;
  color: #000000;
}

.testimonials__slider {
  position: relative;
}

.testimonials__slider .slick-slide {
  outline: none;
}

.testimonials__slider .slick-dots {
  display: block;
  list-style: none;
  padding: 0;
  margin: 0;
  position: absolute;
  bottom: 3.6rem;
  right: 4rem;
}

.testimonials__slider .slick-dots li {
  display: inline-block;
  width: 27px;
  height: 27px;
  margin: 0;
  padding: 9px;
  cursor: pointer;
}

.testimonials__slider .slick-dots li button {
  display: block;
  width: 10px;
  height: 10px;
  line-height: 10px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font: 0/0 a;
  text-shadow: none;
  color: transparent;
}

.testimonials__slider .slick-dots li button:hover,
.testimonials__slider .slick-dots li button:focus {
  outline: none;
}

.testimonials__slider .slick-dots li.slick-active button,
.testimonials__slider .slick-dots li:hover button {
  background: #2949fd;
}

.testimonials__slide {
  position: relative;
}

.testimonials__info {
  height: 7.2rem;
  margin-top: 8rem;
  padding-left: 10rem;
  position: relative;
}

.testimonials__avatar {
  width: 7.2rem;
  height: 7.2rem;
  border-radius: 100%;
  outline: none;
  position: absolute;
  top: 0;
  left: 0;
}

.testimonials__cite {
  display: block;
}

.testimonials__cite strong,
.testimonials__cite span {
  font-family: "Montserrat", sans-serif;
  font-style: normal;
}

.testimonials__cite strong {
  font-size: 2.4rem;
  line-height: 1.5;
}

.testimonials__cite span {
  display: block;
  font-size: 1.8rem;
  line-height: 1.333;
  color: rgba(0, 0, 0, 0.7);
}

/* ------------------------------------------------------------------- 
 * responsive:
 * testimonials
 * ------------------------------------------------------------------- */
@media screen and (max-width:1400px) {
  .testimonials p {
    font-size: 3.8rem;
  }

}

@media screen and (max-width:1200px) {
  .testimonials {
    max-width: 1000px;
  }

  .testimonials p {
    font-size: 3.6rem;
  }

  .testimonials__info {
    height: 6.8rem;
    padding-left: 9.4rem;
  }

  .testimonials__avatar {
    width: 6.8rem;
    height: 6.8rem;
  }

  .testimonials__cite strong {
    font-size: 2.2rem;
  }

  .testimonials__cite span {
    font-size: 1.7rem;
  }

}

@media screen and (max-width:1000px) {
  .testimonials {
    max-width: 800px;
  }

  .testimonials p {
    font-size: 3.2rem;
  }

  .testimonials__cite strong {
    font-size: 2rem;
  }

  .testimonials__cite span {
    font-size: 1.6rem;
  }

}

@media screen and (max-width:900px) {
  .testimonials p {
    font-size: 3rem;
  }

}

@media screen and (max-width:800px) {
  .s-testimonials {
    padding-top: 16rem;
    text-align: center;
  }

  .testimonials p {
    font-size: 2.8rem;
  }

  .testimonials__slider .slick-dots {
    margin-top: 4rem;
    position: static;
  }

  .testimonials__info {
    display: inline-block;
    height: 6.4rem;
    padding-left: 9rem;
  }

  .testimonials__avatar {
    width: 6.4rem;
    height: 6.4rem;
  }

  .testimonials__cite strong {
    font-size: 1.8rem;
  }

  .testimonials__cite span {
    font-size: 1.6rem;
  }

}

@media screen and (max-width:600px) {
  .s-testimonials {
    padding-top: 13.6rem;
    padding-bottom: 13.6rem;
  }

  .testimonials p {
    font-size: 2.6rem;
  }

}

@media screen and (max-width:400px) {
  .testimonials p {
    font-size: 2.4rem;
  }

}



/* ===================================================================
 * # contact
 *
 * ------------------------------------------------------------------- */
.s-contact {
  padding-top: 18.4rem;
  padding-bottom: 6.4rem;
  background-color: #050505;
}

.contact-main a {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: inline-block;
}

.contact-main a:hover,
.contact-main a:focus,
.contact-main a:active {
  color: #2949fd;
  border-bottom: 1px solid white;
}

.contact-email {
  font-family: "Montserrat", sans-serif;
  font-size: 6rem;
  font-weight: 400;
  line-height: 1;
  margin: 5.6rem 0 8rem;
}

.contact-infos {
  margin-top: 12.8rem;
  font-family: "Frank Ruhl Libre", serif;
  font-weight: 400;
  font-size: 4.2rem;
  line-height: 1.333;
}

.contact-infos .column {
  margin-bottom: 1.6rem;
}

.contact-infos h4 {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: 2.4rem;
  line-height: 1.333;
  margin-top: 0;
  margin-bottom: .8rem;
  color: rgba(255, 255, 255, 0.35);
}

.contact-infos a {
  color: #ffffff;
}

.contact-infos a:hover,
.contact-infos a:focus,
.contact-infos a:active {
  color: #2949fd;
}

.contact-social ul {
  list-style: none;
  margin-left: 0;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
}

.contact-social ul li {
  padding-left: 0;
}

.contact-social ul li::before {
  content: "/";
  color: #ffffff;
  margin-left: 4px;
  margin-right: 4px;
}

.contact-social ul li:first-child::before {
  display: none;
}

/* ------------------------------------------------------------------- 
* responsive:
* contact
* ------------------------------------------------------------------- */
@media screen and (max-width:1300px) {
  .contact-email {
    font-size: 10rem;
  }

  .contact-infos {
    font-size: 4rem;
  }

  .contact-infos h4 {
    font-size: 2rem;
  }

}

@media screen and (max-width:1200px) {
  .contact-email {
    font-size: 9rem;
  }

  .contact-infos {
    margin-top: 9.6rem;
  }

}

@media screen and (max-width:1024px) {
  .contact-email {
    font-size: 7.2rem;
  }

  .contact-infos {
    font-size: 3.8rem;
  }

  .contact-infos h4 {
    font-size: 1.8rem;
  }

}

@media screen and (max-width:800px) {
  .s-contact {
    padding-top: 16rem;
  }

  .contact-email {
    font-size: 9vw;
  }

  .contact-infos {
    font-size: 3.6rem;
  }

}

@media screen and (max-width:600px) {
  .contact-social ul li {
    margin-right: 1.2rem;
  }

  .contact-social ul li::before {
    display: none;
  }

}

@media screen and (max-width:400px) {
  .contact-infos {
    font-size: 3rem;
  }

}



/* ===================================================================
 * # footer
 *
 * ------------------------------------------------------------------- */
footer {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2;
  padding-top: 0;
  padding-bottom: 6.4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.3);
  position: relative;
}

footer a,
footer a:visited {
  color: #ffffff;
}

/* ------------------------------------------------------------------- 
 * ## copyright
 * ------------------------------------------------------------------- */
.ss-copyright {
  margin-top: 2rem;
  padding-right: 80px;
}

.ss-copyright span {
  font-size: 14px;
  display: inline-block;
}

.ss-copyright span::after {
  content: "|";
  display: inline-block;
  padding: 0 1rem 0 1.2rem;
  color: rgba(255, 255, 255, 0.1);
}

.ss-copyright span:last-child::after {
  display: none;
}

/* ------------------------------------------------------------------- 
 * ## go to top
 * ------------------------------------------------------------------- */
.ss-go-top {
  position: absolute;
  top: -1px;
  right: 6rem;
  z-index: 2;
}

.ss-go-top a {
  display: block;
  background: rgba(255, 255, 255, 0.05);
  text-decoration: none;
  margin: 0;
  padding: 0;
  border: 0 none;
  height: 60px;
  width: 60px;
  line-height: 60px;
  text-align: center;
  color: white;
  text-transform: uppercase;
  transition: all .3s;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url(../images/icons/icon-arrow-up.svg);
  background-size: 10px 16px;
  position: relative;
}

.ss-go-top a:hover,
.ss-go-top a:focus {
  background-color: #2949fd;
  color: #ffffff;
}

.ss-go-top::before {
  content: "";
  display: block;
  width: 1px;
  height: 100px;
  background-color: rgba(255, 255, 255, 0.05);
  position: absolute;
  top: -115px;
  left: 50%;
}

.ss-go-top::after {
  content: "back to top";
  display: block;
  float: left;
  width: 120px;
  font-size: 1.2rem;
  line-height: 30px;
  text-transform: uppercase;
  letter-spacing: .2rem;
  color: rgba(255, 255, 255, 0.15);
  transition: all 0.5s;
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
  -webkit-transform-origin: left bottom;
  -ms-transform-origin: left bottom;
  transform-origin: left bottom;
  position: absolute;
  left: calc(30px + 15px);
  top: -165px;
}

/* ------------------------------------------------------------------- 
 * responsive:
 * footer
 * ------------------------------------------------------------------- */
@media screen and (max-width:1200px) {
  .ss-go-top {
    right: 3rem;
  }

}

@media screen and (max-width:900px) {
  .ss-go-top {
    right: 0;
  }

  .ss-go-top::before,
  .ss-go-top::after {
    display: none;
  }

}

@media screen and (max-width:600px) {
  .ss-copyright {
    margin-top: 9rem;
    padding: 0;
    text-align: center;
  }

  .ss-copyright span {
    display: block;
  }

  .ss-copyright span::after {
    display: none;
  }

  .ss-go-top {
    right: 50%;
    margin-right: -30px;
  }

}

@media screen and (max-width:400px) {
  .ss-copyright span {
    font-size: 13px;
  }

}



/* ===================================================================
 * # IE10/IE11 Specific
 *
 * ------------------------------------------------------------------- */
html[data-useragent*='MSIE 10.0'] .ss-go-top::before,
html[data-useragent*='MSIE 10.0'] .ss-go-top::after,
html[data-useragent*='rv:11.0'] .ss-go-top::before,
html[data-useragent*='rv:11.0'] .ss-go-top::after {
  display: none;
}

/*# sourceMappingURL=main.css.map */