.container {
  max-width: 900px;
  margin: 0 auto; }

body {
  background-color: #fff;
  font-family: "sofiapro", sans-serif; }

a {
  text-decoration: none;
  color: #000; }
  a:visited {
    color: #000; }

*:focus {
  outline: none; }

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

audio, canvas, video {
  display: inline-block; }

audio:not([controls]) {
  display: none;
  height: 0; }

[hidden] {
  display: none; }

html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%; }

a:focus {
  outline: thin dotted; }

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

h1 {
  font-size: 2em; }

abbr[title] {
  border-bottom: 1px dotted; }

b, strong {
  font-weight: 700; }

dfn {
  font-style: italic; }

mark {
  background: #ff0;
  color: #000; }

code, kbd, pre, samp {
  font-family: monospace, serif;
  font-size: 1em; }

pre {
  white-space: pre-wrap;
  word-wrap: break-word; }

q {
  quotes: \201C \201D \2018 \2019; }

small {
  font-size: 80%; }

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  top: -.5em; }

sub {
  bottom: -.25em; }

img {
  border: 0; }

svg:not(:root) {
  overflow: hidden; }

fieldset {
  border: 1px solid silver;
  margin: 0 2px;
  padding: .35em .625em .75em; }

button, input, select, textarea {
  font-family: inherit;
  font-size: 100%;
  margin: 0; }

button, input {
  line-height: normal; }

button, html input[type=button],
input[type=reset], input[type=submit] {
  -webkit-appearance: button;
  cursor: pointer; }

button[disabled], input[disabled] {
  cursor: default; }

input[type=checkbox], input[type=radio] {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0; }

input[type=search] {
  -webkit-appearance: textfield;
  -webkit-box-sizing: content-box;
  box-sizing: content-box; }

input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none; }

textarea {
  overflow: auto;
  vertical-align: top; }

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

body, figure {
  margin: 0; }

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

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0; }

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

header {
  position: relative; }

.overlay {
  position: fixed;
  width: 100%;
  height: 100vh;
  background-color: #fff;
  z-index: 999;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out; }
  .overlay.overlay-visible {
    visibility: visible;
    opacity: 0.5; }

.header-wrapper {
  position: absolute;
  background-color: #fff;
  width: 240px;
  height: 60px;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
  z-index: 99999;
  top: 170px;
  left: -90px;
  position: fixed;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between; }
  .header-wrapper.push {
    left: 390px;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out; }
    @media (max-width: 780px) {
      .header-wrapper.push {
        left: 210px;
        -webkit-transition: all 0.4s ease-in-out;
        transition: all 0.4s ease-in-out; } }
  @media (max-width: 780px) {
    .header-wrapper {
      top: 70px;
      left: -30px;
      width: 120px; } }

.header-title {
  padding-left: 20px; }
  @media (max-width: 780px) {
    .header-title {
      padding-left: 0; } }

.header-name {
  font-size: 22px;
  font-weight: normal;
  color: #000; }
  @media (max-width: 780px) {
    .header-name {
      display: none; } }

.hamburger {
  display: block;
  background-color: transparent;
  padding: 0;
  border: none !important;
  -webkit-box-shadow: none !important;
          box-shadow: none !important; }

.hamburger-box {
  width: 60px;
  height: 60px;
  display: block;
  position: relative;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
  cursor: pointer; }

.hamburger-inner {
  display: block;
  position: absolute;
  z-index: 9999999;
  background-color: #000;
  height: 2px;
  width: 20px;
  right: 20px;
  -webkit-transition: -webkit-transform 0.4s ease-out;
  transition: -webkit-transform 0.4s ease-out;
  transition: transform 0.4s ease-out;
  transition: transform 0.4s ease-out, -webkit-transform 0.4s ease-out; }
  .hamburger-inner:nth-child(1) {
    top: 20px; }
  .hamburger-inner:nth-child(2) {
    top: 27px;
    opacity: 1;
    -webkit-transition: opacity 0ms linear 0.2s, -webkit-transform 0.4s ease-out;
    transition: opacity 0ms linear 0.2s, -webkit-transform 0.4s ease-out;
    transition: transform 0.4s ease-out, opacity 0ms linear 0.2s;
    transition: transform 0.4s ease-out, opacity 0ms linear 0.2s, -webkit-transform 0.4s ease-out; }
  .hamburger-inner:nth-child(3) {
    bottom: 24px; }
  .active .hamburger-inner:nth-child(1) {
    -webkit-animation: burger-open-top 0.4s ease-out forwards;
            animation: burger-open-top 0.4s ease-out forwards; }
  .active .hamburger-inner:nth-child(2) {
    opacity: 0;
    -webkit-transition: opacity 0ms linear 0.2s, -webkit-transform 0.4s ease-out;
    transition: opacity 0ms linear 0.2s, -webkit-transform 0.4s ease-out;
    transition: transform 0.4s ease-out, opacity 0ms linear 0.2s;
    transition: transform 0.4s ease-out, opacity 0ms linear 0.2s, -webkit-transform 0.4s ease-out; }
  .active .hamburger-inner:nth-child(3) {
    -webkit-animation: burger-open-bot 0.4s ease-out forwards;
            animation: burger-open-bot 0.4s ease-out forwards; }
  .closing .hamburger-inner:nth-child(1) {
    -webkit-animation: burger-close-top 0.4s ease-out forwards;
            animation: burger-close-top 0.4s ease-out forwards; }
  .closing .hamburger-inner:nth-child(3) {
    -webkit-animation: burger-close-bot 0.4s ease-out forwards;
            animation: burger-close-bot 0.4s ease-out forwards; }

@-webkit-keyframes burger-open-top {
  50% {
    -webkit-transform: translate3d(0, 7px, 0);
            transform: translate3d(0, 7px, 0); }
  100% {
    -webkit-transform: translate3d(0, 7px, 0) rotate(45deg);
            transform: translate3d(0, 7px, 0) rotate(45deg); } }

@keyframes burger-open-top {
  50% {
    -webkit-transform: translate3d(0, 7px, 0);
            transform: translate3d(0, 7px, 0); }
  100% {
    -webkit-transform: translate3d(0, 7px, 0) rotate(45deg);
            transform: translate3d(0, 7px, 0) rotate(45deg); } }

@-webkit-keyframes burger-open-bot {
  50% {
    -webkit-transform: translate3d(0, -7px, 0);
            transform: translate3d(0, -7px, 0); }
  100% {
    -webkit-transform: translate3d(0, -7px, 0) rotate(-45deg);
            transform: translate3d(0, -7px, 0) rotate(-45deg); } }

@keyframes burger-open-bot {
  50% {
    -webkit-transform: translate3d(0, -7px, 0);
            transform: translate3d(0, -7px, 0); }
  100% {
    -webkit-transform: translate3d(0, -7px, 0) rotate(-45deg);
            transform: translate3d(0, -7px, 0) rotate(-45deg); } }

@-webkit-keyframes burger-close-top {
  0% {
    -webkit-transform: translate3d(0, 7px, 0) rotate(45deg);
            transform: translate3d(0, 7px, 0) rotate(45deg); }
  50% {
    -webkit-transform: translate3d(0, 7px, 0) rotate(0deg);
            transform: translate3d(0, 7px, 0) rotate(0deg); }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); } }

@keyframes burger-close-top {
  0% {
    -webkit-transform: translate3d(0, 7px, 0) rotate(45deg);
            transform: translate3d(0, 7px, 0) rotate(45deg); }
  50% {
    -webkit-transform: translate3d(0, 7px, 0) rotate(0deg);
            transform: translate3d(0, 7px, 0) rotate(0deg); }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); } }

@-webkit-keyframes burger-close-bot {
  0% {
    -webkit-transform: translate3d(0, -7px, 0) rotate(-45deg);
            transform: translate3d(0, -7px, 0) rotate(-45deg); }
  50% {
    -webkit-transform: translate3d(0, -7px, 0) rotate(0deg);
            transform: translate3d(0, -7px, 0) rotate(0deg); }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); } }

@keyframes burger-close-bot {
  0% {
    -webkit-transform: translate3d(0, -7px, 0) rotate(-45deg);
            transform: translate3d(0, -7px, 0) rotate(-45deg); }
  50% {
    -webkit-transform: translate3d(0, -7px, 0) rotate(0deg);
            transform: translate3d(0, -7px, 0) rotate(0deg); }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); } }

.header-logo {
  display: none; }
@media (max-width: 780px) {
  .header-logo {
    display: block; } }

.logo {
  display: block;
  cursor: pointer;
  background-color: transparent;
  padding: 0;
  border: none !important;
  -webkit-box-shadow: none !important;
          box-shadow: none !important; }

.logo-box {
  width: 60px;
  height: 60px;
  display: block;
  position: relative;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg); }
.logo-box img {
  height: 40px; }

.side-nav-wrapper {
  position: relative; }

.side-nav-inner {
  position: absolute;
  position: fixed;
  z-index: 9999;
  background-color: #000;
  width: 480px;
  height: 100vh;
  overflow: scroll;
  top: 0;
  left: -480px;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out; }
@media (max-width: 780px) {
  .side-nav-inner {
    left: -240px;
    width: 240px;
    -webkit-transition: all 0.4s ease-in-out;
            transition: all 0.4s ease-in-out; } }
  .side-nav-inner.open {
    left: 0;
    -webkit-transition: all 0.4s ease-in-out;
            transition: all 0.4s ease-in-out; }

.nav-title-projects,
.nav-title-contact {
  font-size: 22px;
  position: relative;
  margin-top: 20px; }

.hr-projects,
.hr-contact {
  width: 40px;
  border-bottom: 2px solid #fff; }

.hr-contact {
  margin: 40px 0px 0px 0px; }

.side-nav-items {
  list-style: none;
  padding: 80px;
  margin: 0; }
.side-nav-items .side-nav-itemLink {
  color: #fff; }
@media (max-width: 780px) {
  .side-nav-items {
    padding: 40px; } }

.side-nav-item {
  width: 50%;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out; }
@media (min-width: 1040px) {
  .side-nav-item:hover {
   margin-left: 10px;
  -webkit-transition-timing-function: ease-in-out;
          transition-timing-function: ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
          transition: all 0.2s ease-in-out; } }
@media (max-width: 780px) {
  .side-nav-item {
    width: 100%; } }

.nav-title-contact {
  margin-top: 20px;
  margin-bottom: 0; }

.nav-title {
  font-size: 16px;
  margin: 20px 0px 0px 0px;
  line-height: 24px; }

.nav-description {
  font-size: 14px;
  margin: 0; }

.nav-title,
.nav-description,
.nav-title-projects,
.nav-title-contact {
  font-weight: normal; }

.project-gallery-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -moz-animation: fadein 0.8s ease-in-out;
  /* Firefox */
  -webkit-animation: fadein 0.8s ease-in-out;
  /* Safari and Chrome */
  -o-animation: fadein 0.8s ease-in-out;
  /* Opera */ }
  @media (max-width: 780px) {
    .project-gallery-container {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column; } }

@keyframes fadein {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@-webkit-keyframes fadein {
  /* Safari and Chrome */
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

.section-column {
  width: calc(50% - 5px);
  margin-bottom: 10px; }
.section-column:nth-child(7), .section-column:nth-child(8) {
  margin-bottom: 0; }
@media (max-width: 780px) {
  .section-column {
    width: 100%; }
  .section-column:nth-child(3), .section-column:nth-child(4) {
    margin-bottom: 10px; }
  .section-column:last-child {
    margin-bottom: 0; } }

.left {
  margin-right: 5px; }
@media (max-width: 780px) {
  .left {
    margin-right: 0; } }

.right {
  margin-left: 5px; }
@media (max-width: 780px) {
  .right {
    margin-left: 0; } }

.index-item-image-wrapper {
  position: relative; }
.index-item-image-wrapper img {
  width: 100%;
  display: block;
    -webkit-transition: all 0.4s ease-in-out;
            transition: all 0.4s ease-in-out; }
@media (min-width: 1040px) {
  .index-item-image-wrapper img:hover {
    -webkit-transition: all 0.4s ease-in-out;
            transition: all 0.4s ease-in-out;
    opacity: 0.5; } }

figcaption {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between; }
  figcaption .index-item-title,
  figcaption .index-item-description {
    margin: 0;
    position: absolute;
    font-size: 14px; }
  figcaption .index-item-title {
    bottom: 40px;
    left: 80px; }
  @media (max-width: 780px) {
    figcaption .index-item-title {
      left: 40px; } }
    figcaption .index-item-description {
      bottom: 40px;
      right: 80px; }
  @media (max-width: 780px) {
    figcaption .index-item-description {
      right: 40px; } }

.white-text {
  color: #fff; }

.site-page,
.contact-page {
  -moz-animation: fadein 0.8s ease-in-out;
  /* Firefox */
  -webkit-animation: fadein 0.8s ease-in-out;
  /* Safari and Chrome */
  -o-animation: fadein 0.8s ease-in-out;
  /* Opera */ }

@keyframes fadein {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@-webkit-keyframes fadein {
  /* Safari and Chrome */
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

.cover-image-wrapper,
.single-image-wrapper,
.video-wrapper,
.double-image-wrapper {overflow-x: ;
  margin-bottom: 10px; }

.cover-image-inner img,
.single-image-wrapper img,
.double-image-wrapper img,
.website-image-inner img {
  width: 100%;
  display: block; }

.square-image img,
.square-image iframe,
.website-image-inner img {
  border-radius: 20px; }
@media (max-width: 780px) {
  .square-image img,
  .square-image iframe,
  .website-image-inner img {
    border-radius: 10px; } }

.double-image-wrapper {
  width: 100%; }
.double-image-wrapper .double-image-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row; }
.double-image-wrapper .double-image-inner .double-image {
  width: calc(50% - 5px);
  margin-right: 10px; }
.double-image-wrapper .double-image-inner .double-image:last-child {
  margin-right: 0px; }
@media (max-width: 780px) {
  .double-image-wrapper .double-image-inner .double-image {
    width: 100%;
    margin-bottom: 10px; }
  .double-image-wrapper .double-image-inner .double-image:last-child {
    margin-bottom: 0; } }
@media (max-width: 780px) {
  .double-image-wrapper .double-image-inner {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column; } }




.four-images-inner {
  display: flex;
}

.four-images-inner > .square-image {
  width: calc(25% - 5px);
}

.four-images-wrapper + .four-images-wrapper {
  padding-top: 0;
  padding-bottom: 0;
}


@media (max-width: 780px) {

  .four-images-inner {
  display: flex;
  flex-direction: column;
  row-gap: 10px;
}
  .four-images-inner > .square-image {
    width: 100%;
  }
}

.four-images-wrapper,
.double-square-image-wrapper,
.website-image-wrapper {
  padding: 40px; }

.square-image,
.website-image-inner {
  padding: 40px 0px 0px 0px; }

.square-image,
.website-image-inner:first-child {
  padding: 0px; }

@media (max-width: 780px) {
  .four-images-wrapper,
  .double-square-image-wrapper,
  .website-image-wrapper {
    padding: 20px; }

    .four-images-inner > .square-image {
      padding: 10px 0px 0px 0px;
    }
    .four-images-inner .square-image:first-child {
      padding-top: 0;
    }
  .square-image,
  .website-image-inner {
    padding: 20px 0px 0px 0px; }}

.double-square-image-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row; }
@media (max-width: 780px) {
  .double-square-image-inner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column; } }

.square-image {
  width: 50%;
  margin-right: 40px; }
.square-image:last-child {
  margin-right: 0; }
.square-image img {
  width: 100%;
  display: block; }
@media (max-width: 780px) {
  .square-image {
    width: 100%;
    margin-right: 0; } }

.text-content-inner {
  padding: 80px 320px 40px 320px; }
.text-content-inner .project-description {
  margin: 0;
  font-size: 16px;
  line-height: 24px; }
.text-content-inner .project-subDescription {
  margin-top: 20px;
  margin-bottom: 0;
  font-size: 14px; }
@media (max-width: 780px) {
  .text-content-inner {
    padding: 40px 40px 20px 40px; } }

.site-footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 40px 110px; }
.site-footer a {
  font-size: 14px;
  color: #000; }
@media (max-width: 780px) {
  .site-footer {
    padding: 20px 75px 40px 75px; } }

.arrow {
  position: relative; }
.arrow .arrow-inner .arrow-left {
  position: absolute;
  height: 10px;
  width: 20px;
  top: -15px;
  left: -30px;
  -webkit-transition: all 0.2s ease-in-out;
          transition: all 0.2s ease-in-out; }
@media (min-width: 1040px) {
  .arrow .arrow-inner .arrow-left.move-left {
    left: -40px;
    -webkit-transition: all 0.2s ease-in-out;
            transition: all 0.2s ease-in-out; } }

.arrow .arrow-inner .arrow-right {
  position: absolute;
  height: 10px;
  width: 20px;
  top: -15px;
  left: 40px;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out; }
@media (min-width: 1040px) {
  .arrow .arrow-inner .arrow-right.move-right {
    left: 50px;
    -webkit-transition: all 0.2s ease-in-out;
            transition: all 0.2s ease-in-out; } }

.contact-page-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row; }
@media (max-width: 780px) {
 .contact-page-wrapper {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column; } }

.profile-image {
  height: 100vh; }

.profile-image,
.contact-section-wrapper {
  width: 50%; }
@media (max-width: 780px) {
  .profile-image,
  .contact-section-wrapper {
    width: 100%; } }

.profile-image {
  background-image: url("./../assets/elements/rickstorm_001.jpg");
  background-size: cover;
  background-position: center; }

.contact-section-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  padding: 80px; }
@media (max-width: 780px) {
  .contact-section-wrapper {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    padding: 40px; } }

.social-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  list-style: none;
  padding: 0;
  margin: 0;
  height: 25px; }

.social-icon {
  width: 25px;
  margin-right: 10px; }
.social-icon:last-child {
  margin-right: 0; }

.hr {
  width: 40px;
  border-bottom: 2px solid black;
  margin: 40px 0px 0px 0px; }

.contact-information-title {
  font-size: 22px;
  margin: 20px 0px 0px 0px;
  font-weight: normal; }

.email,
.phone {
  margin: 20px 0px 0px 0px;
  font-size: 14px; }
.email a,
.phone a {
  font-size: 16px; }

@font-face {
  font-family: 'sofiapro';
  src: url("../fonts/sofiapro.eot");
  src: url("../fonts/sofiapro.eot?#iefix") format("embedded-opentype"), url("../fonts/sofiapro.woff") format("woff"), url("../fonts/sofiapro.woff2") format("woff2"), url("../fonts/sofiapro.ttf") format("truetype");
  font-weight: normal;
  font-style: normal; }