/******************************************************************

	

	

	@ Item          REFRAME - Personal One Page HTML Template

	@ Version       1.1

	@ Author		Avanzare

	@ Website		http://themeforest.net/user/avanzare 

	



 ******************************************************************





	-----------------------------

	----- TABLE OF CONTENTS -----

	-----------------------------

	

	--  1. Typography

    --  2. Basics

	--  3. Forms

	--  4. Loading Screen

	--  5. UI Components

	--  6. Menu

	--  7. Ultility

	--  8. Skeleton Components

    --  9. Background Components

    --  10. Plugins

 

 

 ******************************************************************/



/** 1. TYPOGRAPHY

*******************************************************************/



html {

  font-size: 10px;

  font-size: calc(100vw / 192);

}



@media (max-width: 800px) {

  html {

    font-size: 8px;

  }

}



@media (max-width: 500px) {

  html {

    font-size: 6px;

  }

}



body {

  font-size: 1.4rem;

  font-family: "Source Sans Pro", sans-serif;

  font-weight: 300;



  color: #adadad;

  background: #212121;



  -webkit-font-smoothing: antialiased;

}



body.cursor-hidden::-webkit-scrollbar {

  display: none;

}



body.cursor-hidden {

  -ms-overflow-style: none;

  scrollbar-width: none;

}



h1,

h2,

h3,

h4,

h5,

h6 {

  letter-spacing: -0.005em;

  line-height: 1.1em;

  margin-top: 0em;

  margin-bottom: 0;

  font-weight: 300;

  font-family: "Source Sans Pro", sans-serif;

}



h1 {

  font-size: 10rem;

  line-height: 1em;

  font-weight: 200;

}



h2 {

  font-size: 6.5rem;

  font-weight: 200;

}



h3 {

  font-size: 5rem;

}



h4 {

  font-size: 4rem;

}



h5 {

  font-size: 3.4rem;

  line-height: 1.18em;

}



h6 {

  font-size: 3rem;

  font-weight: 500;

}



p {

  font-size: 3.4rem;

  line-height: 1.4em;

  letter-spacing: -0.005em;

  font-weight: 300;

  margin-top: 0;

  margin-bottom: 0rem;

  color: #adadad;

  font-family: "Source Sans Pro", sans-serif;

}



p.small {

  font-size: 2.1rem;

  line-height: 1.48em;

  letter-spacing: 0;

  font-weight: 400;

}



p.tag {

  font-size: 1.3rem;

  letter-spacing: 0.14em;

  font-weight: 700;

  color: #adadad;

}



a,

a:hover,

a:focus {

  cursor: pointer;

  -webkit-transition: all 150ms ease;

  -o-transition: all 150ms ease;

  transition: all 150ms ease;

  text-decoration: none;

  outline: none !important;

  outline-color: unset !important;

  -webkit-tap-highlight-color: transparent;

  -webkit-touch-callout: none;

  -webkit-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  user-select: none;

  color: #fff;

}



span {

  color: #adadad;

}



::-moz-selection {

  background: none;

  color: #fdc60c;

}



::selection {

  background: none;

  color: #fdc60c;

}



::-moz-selection {

  background: none;

  color: #fdc60c;

}



/** 2. Basics

*****************************************************************/



img,

svg {

  vertical-align: middle;

}



button {

  -webkit-tap-highlight-color: transparent;

  -webkit-touch-callout: none;

  -webkit-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  user-select: none;

  background: none;

  border: none;

  color: #fff;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  cursor: pointer;

  -ms-flex-wrap: wrap;

  flex-wrap: wrap;

  font-size: 3.4rem;

  -webkit-box-align: center;

  -ms-flex-align: center;

  align-items: center;

  line-height: 1.4em;

  font-weight: 300;

  letter-spacing: -0.005em;

  font-family: inherit;

  padding: 0;

  margin: 0;

  height: 8.7rem;

}



button.button-filled {

  background: #161616;

  padding: 0 4.5rem;

  border-radius: 200px;

}



button.button-border {

  border: 0.1rem solid #fff;

  border-radius: 200px;

  padding: 0 4.5rem;

}



button.button-filled span.icon,

button.button-border span.icon {

  font-size: 2.1rem;

  color: #fff;

}



button .button-text {

  font-size: 3.4rem;

  color: #fff;

}



ul.default-list {

  list-style: none;

  padding: 0;

  margin: 0;

}



ul.default-list li {

  font-size: 2.1rem;

  line-height: 6.5rem;

}



ul.icon-list span,

ul.icon-list p {

  display: inline-block;

}



ul.icon-list span {

  margin-right: 1.8rem;

}



ul.icon-list.icon-filled span {

  background: #181818;

  width: 5rem;

  height: 5rem;

  border-radius: 100%;

  text-align: center;

  line-height: 5rem;

}



table {

  width: 100%;

  border-collapse: collapse;

}



table tr {

  position: relative;

}



table th {

  text-align: left;

  margin-bottom: 1rem;

}



table tbody tr {

  border-bottom: 0.1rem solid rgba(255, 255, 255, 0.2);

}



table tbody td {

  padding: 4rem 0 2.2rem;

  position: relative;

}



table tbody tr:first-child td {

  padding-top: 3rem;

}



html.no-cursor {

  cursor: none !important;

}



html.no-cursor *:hover {

  cursor: none !important;

}



.embed-wrapper {

  position: relative;

  float: none;

  clear: both;

  width: 100%;

  height: 0;

  padding-bottom: 56%;

}



.embed-wrapper iframe {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

}



canvas {

  position: fixed;

  z-index: -1;

}



.mobile br {

  display: none;

}



/** 3. Forms

*****************************************************************/



form {

  position: relative;

}



input,

textarea {

  display: block;

  width: 100%;

  background: none;

  border: none;

  border-bottom: 0.1rem solid #fff;

  font-size: 3.4rem;

  letter-spacing: -0.005em;

  line-height: 1.4em;

  font-weight: 300;

  border-radius: 0;

  padding: 0;

  color: #fff;

  font-family: "Source Sans Pro", sans-serif;

}



input {

  padding-bottom: 2rem;

}



textarea {

  height: 14rem;

}



input:focus,

textarea:focus {

  outline: none;

}



input.error,

textarea.error {

  border-color: #ff5252;

}



form ::-webkit-input-placeholder {

  color: #fff;

  opacity: 1;

}



form ::-moz-placeholder {

  color: #fff;

  opacity: 1;

}



form :-ms-input-placeholder {

  color: #fff;

  opacity: 1;

}



form ::-ms-input-placeholder {

  color: #fff;

  opacity: 1;

}



form ::placeholder {

  color: #fff;

  opacity: 1;

}



form .hpc {

  opacity: 0;

  width: 0;

  height: 0;

  pointer-events: none;

  z-index: -999;

  position: absolute;

  display: none;

}



form .button-area {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  margin: 0;

  padding: 0;

  -ms-flex-wrap: wrap;

  flex-wrap: wrap;

  -webkit-box-align: center;

  -ms-flex-align: center;

  align-items: center;

  -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;

}



form .success-box {

  position: absolute;

  z-index: -100;

  background: #181818;

  width: 100%;

  height: 100%;

  top: 0;

  left: 0;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -ms-flex-wrap: wrap;

  flex-wrap: wrap;

  -webkit-box-orient: horizontal;

  -webkit-box-direction: normal;

  -ms-flex-direction: row;

  flex-direction: row;

  -webkit-box-align: center;

  -ms-flex-align: center;

  align-items: center;

  opacity: 0;

  pointer-events: none;

  -webkit-box-pack: center;

  -ms-flex-pack: center;

  justify-content: center;

  -webkit-transition: 0.3s ease;

  -o-transition: 0.3s ease;

  transition: 0.3s ease;

}



form.success .success-box {

  z-index: 100;

  opacity: 1;

  pointer-events: all;

}



form .success-box p {

  color: #37dd5e;

}



form .success-box .icon-button {

  color: #37dd5e;

  border-color: #37dd5e;

}



input:-webkit-autofill,

input:-webkit-autofill:hover,

input:-webkit-autofill:focus,

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: #fff;

  -webkit-box-shadow: 0 0 0px 1000px #161616 inset;

  -webkit-transition: background-color 5000s ease-in-out 0s;

  transition: background-color 5000s ease-in-out 0s;

}



/** 4. Loading Screen

*****************************************************************/



.loading-screen {

  position: fixed;

  width: 100%;

  height: 100%;

  top: 0;

  z-index: 200;

  left: 0;

  background: #161616;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -ms-flex-wrap: wrap;

  flex-wrap: wrap;

  -webkit-box-orient: vertical;

  -webkit-box-direction: normal;

  -ms-flex-direction: column;

  flex-direction: column;

  -webkit-box-pack: center;

  -ms-flex-pack: center;

  justify-content: center;

  -webkit-box-align: center;

  -ms-flex-align: center;

  align-items: center;

  will-change: transform;

}



.loading-screen .inner,

.loading-content .inner {

  overflow: hidden;

}



.loading-screen .text-box,

.loading-content .text-box {

  overflow: hidden;

  margin-bottom: 0.6rem;

}



.loading-screen .line-frame,

.loading-content .line-frame {

  overflow: hidden;

  height: 1px;

  width: 100%;

  position: relative;

}



.loading-screen .line,

.loading-content .line {

  position: absolute;

  width: 100%;

  height: 100%;

  -webkit-transform: translate(-50%, -50%);

  -ms-transform: translate(-50%, -50%);

  transform: translate(-50%, -50%);

  background: rgba(255, 255, 255, 0.6);

  -webkit-animation-name: loader_animation;

  animation-name: loader_animation;

  will-change: transform;

  -webkit-animation-duration: 2s;

  animation-duration: 2s;

  -webkit-animation-iteration-count: infinite;

  animation-iteration-count: infinite;

  -webkit-animation-play-state: running;

  animation-play-state: running;

  -webkit-animation-timing-function: cubic-bezier(0.4, 0.1, 0.2, 1);

  animation-timing-function: cubic-bezier(0.4, 0.1, 0.2, 1);

}



@-webkit-keyframes loader_animation {

  0% {

    -webkit-transform: translate3d(-100%, 0, 0);

    transform: translate3d(-100%, 0, 0);

  }



  48% {

    -webkit-transform: translateZ(0);

    transform: translateZ(0);

  }



  52% {

    -webkit-transform: translateZ(0);

    transform: translateZ(0);

  }



  to {

    -webkit-transform: translate3d(100%, 0, 0);

    transform: translate3d(100%, 0, 0);

  }

}



@keyframes loader_animation {

  0% {

    -webkit-transform: translate3d(-100%, 0, 0);

    transform: translate3d(-100%, 0, 0);

  }



  48% {

    -webkit-transform: translateZ(0);

    transform: translateZ(0);

  }



  52% {

    -webkit-transform: translateZ(0);

    transform: translateZ(0);

  }



  to {

    -webkit-transform: translate3d(100%, 0, 0);

    transform: translate3d(100%, 0, 0);

  }

}



/** 5. UI Components

*****************************************************************/



.scroll-bar {

  position: fixed;

  top: 0;

  z-index: 11;

  right: 0;

  -webkit-appearance: none;

  -moz-appearance: none;

  appearance: none;

  width: 2px;

  height: 100%;

  border: none;

  background: rgba(255, 255, 255, 0.2);

  display: none;

}



.scroll-bar .inner {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  border-radius: 30px;

  height: 10%;

  background: #fff;

  display: none;

}



.scroll-progress {

  position: fixed;

  top: 0;

  z-index: 11;

  right: 0;

  -webkit-appearance: none;

  -moz-appearance: none;

  appearance: none;

  width: 2px;

  height: 100%;

  border: none;

  background: rgba(255, 255, 255, 0.2);

}



.scroll-progress .inner {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 0;

  background: #fff;

}



.c_cursor_outer {

  width: 50px;

  height: 50px;

  position: fixed;

  top: 0;

  left: 0;

  z-index: 1000;

  border-radius: 100%;

  pointer-events: none;

  overflow: hidden;

}



.c_cursor_outer .bg {

  left: 0;

  top: 0;

  bottom: 0;

  right: 0;

  position: absolute;

  border: 1px solid #f68722;

  z-index: 1000;

  border-radius: 100%;

  pointer-events: none;

}



.c_cursor_outer .circle {

  width: 0;

  height: 0;

  position: absolute;

  border: 1px solid #f68722;

  z-index: 1000;

  top: 50%;

  left: 50%;

  opacity: 0;

  background: none;

  border-radius: 100%;

  -webkit-transform: translate(-50%, -50%);

  -ms-transform: translate(-50%, -50%);

  transform: translate(-50%, -50%);

  pointer-events: none;

}



.c_cursor_inner {

  width: 6px;

  height: 6px;

  position: fixed;

  z-index: 1000;

  top: 0;

  left: 0;

  background: #f68722;

  border-radius: 100%;

  pointer-events: none;

}



@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {

  .c_cursor_inner,

  .c_cursor_outer {

    display: none;

  }

}



.provoke-scroll-bottom {

  position: fixed;

  right: 6rem;

  bottom: 9rem;

  width: 1px;

  opacity: 0;

  z-index: 3;

  pointer-events: none;

  -webkit-transition: 0.4s ease;

  -o-transition: 0.4s ease;

  transition: 0.4s ease;

}



.provoke-scroll-bottom.is-active {

  opacity: 1;

}



.provoke-scroll-bottom .fill {

  position: relative;

  overflow: hidden;

  width: 100%;

  height: 5rem;

  background: rgba(255, 255, 255, 0.2);

}



.provoke-scroll-bottom .fill .inner {

  position: absolute;

  width: 100%;

  height: 100%;

  background: #fff;

}



.provoke-scroll-bottom .text {

  position: relative;

  margin-top: 1rem;

}



.provoke-scroll-bottom p {

  -webkit-transform: rotate(90deg);

  -ms-transform: rotate(90deg);

  transform: rotate(90deg);

  -webkit-transform-origin: center center;

  -ms-transform-origin: center center;

  transform-origin: center center;

}



/* Mobile */



/* .mobile .c_cursor_inner,

.mobile .c_cursor_outer {

  display: none;

  opacity: 0;

  width: 0;

  height: 0;

} */



/** 6. Menu

*******************************************************************/



.m-menu-button {

  position: fixed;

  right: 6rem;

  top: 6rem;

  z-index: 60;

  cursor: pointer;

  -webkit-tap-highlight-color: transparent;

  -webkit-touch-callout: none;

  -webkit-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  user-select: none;

}



.m-menu-button:after {

  content: "";

  position: absolute;

  left: 50%;

  top: 50%;

  border-radius: 100%;

  width: 7rem;

  height: 7rem;

  -webkit-transform: translate(-50%, -50%);

  -ms-transform: translate(-50%, -50%);

  transform: translate(-50%, -50%);

}



.m-menu-button .burger .line {

  height: 0.1rem !important;

  width: 2.6rem;

  display: block;

  margin-bottom: 0.7rem;

  background: #fff;

  -webkit-transition: 0.25s ease;

  -o-transition: 0.25s ease;

  transition: 0.25s ease;

}



.m-menu-button:hover .burger .line {

  background: #e3af00;

}



.m-menu-button .burger .line:last-child {

  margin-bottom: 0rem;

}



.m-menu {

  position: fixed;

  right: 0;

  width: 24%;

  z-index: 10;

  top: 0;

  height: 100%;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

  -ms-flex-align: center;

  align-items: center;

  -webkit-box-pack: center;

  -ms-flex-pack: center;

  justify-content: center;

  background: #181818;

}



@media (max-width: 800px) {

  .m-menu {

    width: 70%;

  }

}



.m-menu .m-menu-inner {

  position: relative;



  width: 80%;

  height: 80%;

  left: 20%;



  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: center;

  -ms-flex-pack: center;

  justify-content: center;

}



.m-menu .head {

  overflow: hidden;

}



.m-menu .m-menu-inner .main-items {

  list-style: none;

  margin: 0;

  padding: 0;

  -webkit-tap-highlight-color: transparent;

  -webkit-touch-callout: none;

  -webkit-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  user-select: none;

}



.m-menu .m-menu-inner .main-items > li {

  margin: 1.1rem 0;

  padding: 0;

  overflow: hidden;

}



.mobile .m-menu .m-menu-inner .main-items > li {

  margin: 1.6rem 0;

}



.m-menu .m-menu-inner .main-items > li:first-child {

  margin-top: 0;

}



.m-menu .m-menu-inner .main-items > li:last-child {

  margin-bottom: 1.3rem;

}



.m-menu .m-menu-inner .main-items > li p {

  display: inline-block;

  letter-spacing: 0;

  -webkit-transition: 0.2s ease;

  -o-transition: 0.2s ease;

  transition: 0.2s ease;

}



.m-menu .m-menu-inner .main-items > li span {

  display: inline-block;

  color: #adadad;

  font-size: 2.1rem;

  border-radius: 100%;

  padding-right: 2.6rem;

  height: 4.8rem;

  position: relative;

  text-align: center;

  line-height: 5rem;

  -webkit-transition: 0.2s ease;

  -o-transition: 0.2s ease;

  transition: 0.2s ease;

}



.m-menu .m-menu-inner .main-items > li a.is-active span,

.m-menu .m-menu-inner .main-items > li a:hover span {

  color: #fff;

}



.m-menu .m-menu-inner .main-items > li a.is-active span:after {

  content: "";

  position: absolute;

  left: 0;

  top: 0;

  right: 0;

  bottom: 0;

  border-radius: 100%;

  z-index: -2;

  top: 0;

}



.m-menu .m-menu-inner .main-items > li a {

  display: block;

  color: #fff;

}



.m-menu .m-menu-inner .main-items li:hover p,

.m-menu .m-menu-inner .main-items a.is-active p {

  color: #fdc60c;

}



.m-menu .m-menu-inner .social-items {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -ms-flex-wrap: wrap;

  flex-wrap: wrap;

  -webkit-tap-highlight-color: transparent;

  -webkit-touch-callout: none;

  -webkit-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  user-select: none;

}



.socialmedia_icons {

  width: 19px;

  height: 19px;

  color: #adadad;

  /* Use 'color' instead of 'fill' */

  transition: color 0.3s ease;

  margin-bottom: 10px;

}



a:hover .socialmedia_icons {

  color: #f68722;

}



.m-menu .m-menu-inner .social-items > * {

  margin-right: 2rem;

  margin-bottom: 0;

}



.m-menu .m-menu-inner .social-items .item {

  overflow: hidden;

}



.m-menu .m-menu-inner .social-items a {

  width: 3.6rem;

  height: 3.6rem;

  line-height: 3.6rem;

  text-align: center;

  font-size: 2rem;

  display: block;

}



.m-menu .m-menu-inner .social-items a:hover span {

  color: #fdc60c;

}



.menu-overlay {

  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  cursor: pointer;

  z-index: -100;

  background: rgba(0, 0, 0, 0);

  -webkit-tap-highlight-color: transparent;

  -webkit-touch-callout: none;

  -webkit-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  user-select: none;

}



/** 7. Ultility

*****************************************************************/



.noselect {

  -webkit-touch-callout: none;

  -webkit-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  user-select: none;

}



.img-responsive {

  max-width: 100%;

  height: auto;

}



.color-white {

  color: #fff;

}



.text-center {

  text-align: center;

}



.text-start {

  text-align: start;

}



.text-end {

  text-align: end;

}



.text-bold {

  font-weight: bold;

}



.text-italic {

  font-style: italic;

}



.text-underline {

  text-decoration: underline;

}



.text-linetrough {

  text-decoration: line-through;

}



.text-highlight {

  background: rgba(0, 0, 0, 0.25);

  padding: 0 0.6rem;

}



.flex-break {

  -ms-flex-preferred-size: 100%;

  flex-basis: 100%;

  height: 0;

  margin: 0 !important;

}



/** Margin **/



.m-b-0 {

  margin-bottom: 0rem !important;

}



.m-b-0-5 {

  margin-bottom: 0.5rem !important;

}



.m-b-1 {

  margin-bottom: 1rem !important;

}



.m-b-1-5 {

  margin-bottom: 1.5rem !important;

}



.m-b-2 {

  margin-bottom: 2rem !important;

}



.m-b-2-5 {

  margin-bottom: 2.5rem !important;

}



.m-b-3 {

  margin-bottom: 3rem !important;

}



.m-b-4 {

  margin-bottom: 4rem !important;

}



.m-b-5 {

  margin-bottom: 5rem !important;

}



.m-b-6 {

  margin-bottom: 6rem !important;

}



.m-b-7 {

  margin-bottom: 7rem !important;

}



.m-b-8 {

  margin-bottom: 8rem !important;

}



.m-b-9 {

  margin-bottom: 9rem !important;

}



.m-b-10 {

  margin-bottom: 10rem !important;

}



.m-t-0 {

  margin-top: 0rem !important;

}



.m-t-0-5 {

  margin-top: 0.5rem !important;

}



.m-t-1 {

  margin-top: 1rem !important;

}



.m-t-1-5 {

  margin-top: 1.5rem !important;

}



.m-t-2 {

  margin-top: 2rem !important;

}



.m-t-2-5 {

  margin-top: 2.5rem !important;

}



.m-t-3 {

  margin-top: 3rem !important;

}



.m-t-4 {

  margin-top: 4rem !important;

}



.m-t-5 {

  margin-top: 5rem !important;

}



.m-t-6 {

  margin-top: 6rem !important;

}



.m-t-7 {

  margin-top: 7rem !important;

}



.m-t-8 {

  margin-top: 8rem !important;

}



.m-t-9 {

  margin-top: 9rem !important;

}



.m-t-10 {

  margin-top: 10rem !important;

}



.m-r-0 {

  margin-right: 0rem !important;

}



.m-r-0-5 {

  margin-right: 0.5rem !important;

}



.m-r-1 {

  margin-right: 1rem !important;

}



.m-r-1-5 {

  margin-right: 1.5rem !important;

}



.m-r-2 {

  margin-right: 2rem !important;

}



.m-r-2-5 {

  margin-right: 2.5rem !important;

}



.m-r-3 {

  margin-right: 3rem !important;

}



.m-r-4 {

  margin-right: 4rem !important;

}



.m-r-5 {

  margin-right: 5rem !important;

}



.m-r-6 {

  margin-right: 6rem !important;

}



.m-r-7 {

  margin-right: 7rem !important;

}



.m-r-8 {

  margin-right: 8rem !important;

}



.m-r-9 {

  margin-right: 9rem !important;

}



.m-r-10 {

  margin-right: 10rem !important;

}



.m-l-0 {

  margin-left: 0rem !important;

}



.m-l-0-5 {

  margin-left: 0.5rem !important;

}



.m-l-1 {

  margin-left: 1rem !important;

}



.m-l-1-5 {

  margin-left: 1.5rem !important;

}



.m-l-2 {

  margin-left: 2rem !important;

}



.m-l-2-5 {

  margin-left: 2.5rem !important;

}



.m-l-3 {

  margin-left: 3rem !important;

}



.m-l-4 {

  margin-left: 4rem !important;

}



.m-l-5 {

  margin-left: 5rem !important;

}



.m-l-6 {

  margin-left: 6rem !important;

}



.m-l-7 {

  margin-left: 7rem !important;

}



.m-l-8 {

  margin-left: 8rem !important;

}



.m-l-9 {

  margin-left: 9rem !important;

}



.m-l-10 {

  margin-left: 10rem !important;

}



/** 8. Skeleton Components

*****************************************************************/



#main {

  position: fixed;

  width: 100vw;

  top: 0;

  left: 0;

  height: 100vh;

  overflow: hidden;

}



.right-content {

  position: fixed;

  width: 100%;

  overflow: auto;

  height: 100%;

  z-index: 1;

}



.right-content .inner-content {

  position: relative;

  width: 50%;

  left: 50%;

}



_:-ms-fullscreen,

:root .right-content .inner-content {

  position: fixed;

}



.left-content {

  position: fixed;

  height: 100%;

  width: 50%;

  top: 0%;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-pack: center;

  -ms-flex-pack: center;

  justify-content: center;

  -webkit-box-align: center;

  -ms-flex-align: center;

  align-items: center;

  z-index: 2;

  -webkit-perspective: 38rem;

  perspective: 38rem;

}



.left-content .inner-content {

  position: relative;

  width: 100%;

  height: 100%;

  /* width: 26vw;

    height: 32vw; */

  -webkit-transform: rotateY(5deg);

  transform: rotateY(5deg);

}



.left-content .inner-content .picture-box {

  position: absolute;

  height: 100%;

  width: 100%;

  left: 0;

  overflow: hidden;

  top: 0;

}



.left-content .inner-content .picture {

  background-size: cover;

  background-position: center center;

  background-repeat: no-repeat;

  position: absolute;

  height: 100%;

  width: 100%;

  left: 0;

  top: 0px;

}



.left-content .inner-content canvas {

  position: absolute;

  width: 100%;

  height: 100%;

  top: 1px;

  z-index: 3;



  left: 0;

}



.left-content .inner-content .frame {

  position: absolute;

  height: 100%;

  width: 100%;

  top: 0;

  left: 0;

  z-index: -2;

  border: 1px solid #fff;

}



.left-content .inner-content .frame.frame-1 {

  opacity: 0.25;

  -webkit-transform: translate(-2rem, 2rem);

  -ms-transform: translate(-2rem, 2rem);

  transform: translate(-2rem, 2rem);

}



.left-content .inner-content .frame.frame-2 {

  opacity: 0.15;

  -webkit-transform: translate(-4rem, 4rem);

  -ms-transform: translate(-4rem, 4rem);

  transform: translate(-4rem, 4rem);

}



.left-content .inner-content .frame.frame-3 {

  opacity: 0.05;

  -webkit-transform: translate(-6rem, 6rem);

  -ms-transform: translate(-6rem, 6rem);

  transform: translate(-6rem, 6rem);

}



.left-content .inner-content .name {

  position: absolute;

  left: 4rem;

  bottom: 3rem;

  z-index: 10;

}



.left-content .inner-content .name p {

  letter-spacing: 0.02em;

  font-weight: 300;

}



.left-content .inner-content .name .seperator-line {

  margin-top: 0.6rem;

}



.section-container {

  max-width: 70rem;

}



.section-container .section {

  position: relative;

  width: 100%;

}



.section-container .section.height-100 {

  min-height: 100vh;

}



.section-container .section.y-center {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

  -ms-flex-align: center;

  align-items: center;

}



_:-ms-fullscreen,

:root .section-container .section.y-center .container {

  position: absolute;

  top: 50%;

  -webkit-transform: translateY(-50%);

  -ms-transform: translateY(-50%);

  transform: translateY(-50%);

}



.section-container .section .container {

  display: block;

  width: 100%;

}



/* Mobile Mode */



.mobile .left-content {

  width: 100%;

}



.mobile .left-content .inner-content {

  position: absolute;

  width: 100%;

  height: 100%;

  -webkit-transform: rotateY(0deg);

  transform: rotateY(0deg);

}



.mobile .left-content .inner-content .frame {

  display: none !important;

}



.mobile .right-content .inner-content {

  padding-top: 100vh;

}



@media (max-width: 800px) {

  .mobile .right-content .inner-content {

    position: relative;

    width: 80%;

    left: 10%;

  }

}



.mobile .left-content .inner-content:after {

  position: absolute;

  content: "";

  left: 0;

  top: 0;

  z-index: -15;

  background: transparent;

  width: 100%;

  height: 100%;

}



/* @media (min-width: 801px) {

  .mobile .left-content .inner-content:after {

  transform: translate(-50%, -50%);

  transition: transform 0.8s ease, opacity 0.4s ease;

  }

} */



.mobile .left-content .inner-content .name {

  left: 50%;

  bottom: 50%;

  -webkit-transform: translate(-50%, 50%);

  -ms-transform: translate(-50%, 50%);

  transform: translate(-50%, 50%);

}



.mobile .left-content .inner-content .name p {

  font-size: 4rem;

}



.mobile .section-container {

  max-width: 60rem;

  margin: 0 auto;

}



/** 9. Background Components

*******************************************************************/



.bg-bubbles {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  opacity: 0.4;

  z-index: -1;

}



.bg-bubbles.white {

  opacity: 0.1;

}



.bg-bubbles li {

  position: absolute;

  list-style: none;

  display: block;

  width: 40px;

  height: 40px;

  background-color: rgba(0, 0, 0, 0.15);

  bottom: -160px;

  -webkit-animation: square 25s infinite;

  animation: square 25s infinite;

  -webkit-transition-timing-function: linear;

  -o-transition-timing-function: linear;

  transition-timing-function: linear;

}



.bg-bubbles.white li {

  background-color: rgba(255, 255, 255, 0.15);

}



.bg-bubbles li:nth-child(1) {

  left: 10%;

}



.bg-bubbles li:nth-child(2) {

  left: 20%;

  width: 80px;

  height: 80px;

  -webkit-animation-delay: 2s;

  animation-delay: 2s;

  -webkit-animation-duration: 17s;

  animation-duration: 17s;

}



.bg-bubbles li:nth-child(3) {

  left: 25%;

  -webkit-animation-delay: 4s;

  animation-delay: 4s;

}



.bg-bubbles li:nth-child(4) {

  left: 40%;

  width: 60px;

  height: 60px;

  -webkit-animation-duration: 22s;

  animation-duration: 22s;

  background-color: rgba(0, 0, 0, 0.25);

}



.bg-bubbles.white li:nth-child(4) {

  background-color: rgba(255, 255, 255, 0.25);

}



.bg-bubbles li:nth-child(5) {

  left: 70%;

}



.bg-bubbles li:nth-child(6) {

  left: 80%;

  width: 120px;

  height: 120px;

  -webkit-animation-delay: 3s;

  animation-delay: 3s;

  background-color: rgba(0, 0, 0, 0.2);

}



.bg-bubbles.white li:nth-child(6) {

  background-color: rgba(255, 255, 255, 0.2);

}



.bg-bubbles li:nth-child(7) {

  left: 32%;

  width: 160px;

  height: 160px;

  -webkit-animation-delay: 7s;

  animation-delay: 7s;

}



.bg-bubbles li:nth-child(8) {

  left: 55%;

  width: 20px;

  height: 20px;

  -webkit-animation-delay: 15s;

  animation-delay: 15s;

  -webkit-animation-duration: 40s;

  animation-duration: 40s;

}



.bg-bubbles li:nth-child(9) {

  left: 25%;

  width: 10px;

  height: 10px;

  -webkit-animation-delay: 2s;

  animation-delay: 2s;

  -webkit-animation-duration: 40s;

  animation-duration: 40s;

  background-color: rgba(0, 0, 0, 0.3);

}



.bg-bubbles.white li:nth-child(9) {

  background-color: rgba(255, 255, 255, 0.3);

}



.bg-bubbles li:nth-child(10) {

  left: 90%;

  width: 160px;

  height: 160px;

  -webkit-animation-delay: 11s;

  animation-delay: 11s;

}



@-webkit-keyframes square {

  0% {

    -webkit-transform: translateY(0);

    transform: translateY(0);

  }



  100% {

    -webkit-transform: translateY(-700px) rotate(600deg);

    transform: translateY(-700px) rotate(600deg);

  }

}



@keyframes square {

  0% {

    -webkit-transform: translateY(0);

    transform: translateY(0);

  }



  100% {

    -webkit-transform: translateY(-700px) rotate(600deg);

    transform: translateY(-700px) rotate(600deg);

  }

}



.bg-color {

  position: fixed;

  width: 100vw;

  height: 100vh;

  top: 0;

  z-index: -6;



  left: 0;

}



#main > canvas {

  z-index: -5;

  top: 0;

  left: 0;

}



/** 10. Plugins

*******************************************************************/



/* Slider */



.slick-slider {

  position: relative;



  display: block;

  -webkit-box-sizing: border-box;

  box-sizing: border-box;



  -webkit-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  user-select: none;



  -webkit-touch-callout: none;

  -khtml-user-select: none;

  -ms-touch-action: pan-y;

  touch-action: pan-y;

  -webkit-tap-highlight-color: transparent;

}



.slick-list {

  position: relative;



  display: block;

  overflow: hidden;



  margin: 0;

  padding: 0;

}



.slick-list.dragging {

  cursor: pointer;

  cursor: -webkit-grabbing;

  cursor: grabbing;

}



.slick-slider .slick-track,

.slick-slider .slick-list {

  -webkit-transform: translate3d(0, 0, 0);

  -ms-transform: translate3d(0, 0, 0);

  transform: translate3d(0, 0, 0);

}



.slick-track {

  position: relative;

  top: 0;

  left: 0;



  display: block;

  margin-left: auto;

  margin-right: auto;

}



.slick-track:before,

.slick-track:after {

  display: table;



  content: "";

}



.slick-track:after {

  clear: both;

}



.slick-loading .slick-track {

  visibility: hidden;

}



.slick-slide {

  display: none;

  float: left;



  height: 100%;

  min-height: 1px;

}



[dir="rtl"] .slick-slide {

  float: right;

}



.slick-slide img {

  display: block;

}



.slick-slide.slick-loading img {

  display: none;

}



.slick-slide.dragging img {

  pointer-events: none;

}



.slick-initialized .slick-slide {

  display: block;

}



.slick-loading .slick-slide {

  visibility: hidden;

}



.slick-vertical .slick-slide {

  display: block;



  height: auto;



  border: 1px solid transparent;

}



.slick-arrow.slick-hidden {

  display: none;

}



.slick-slider .item:focus {

  outline: none !important;

}



.slick-dots {

  position: absolute;

  bottom: -8rem;



  display: block;



  width: 100%;

  padding: 0;

  margin: 0;



  list-style: none;



  text-align: center;

}



.slick-dots li {

  width: 16px;

  height: 16px;

  border-radius: 100%;

  display: inline-block;

  margin: 0 6px;

  position: relative;

  cursor: pointer;

}



.slick-dots li:after {

  cursor: pointer;

  content: "";

  position: absolute;

  width: 4px;

  height: 4px;

  left: 50%;

  top: 50%;

  -webkit-transform: translate(-50%, -50%);

  -ms-transform: translate(-50%, -50%);

  transform: translate(-50%, -50%);

  border-radius: 100%;

  background: rgba(255, 255, 255, 0.5);

  -webkit-transition: 0.15s ease;

  -o-transition: 0.15s ease;

  transition: 0.15s ease;

  opacity: 1;

}



.slick-dots li.slick-active,

.slick-dots li:hover {

  border: 1px solid rgb(255 255 255 / 60%);

}



.slick-dots li.slick-active:after,

.slick-dots li:hover:after {

  background: rgba(255, 255, 255, 0);

}



.slick-dots li button {

  display: none;

}



/* Panel */



.open-options-panel {

  position: fixed;

  left: 0;

  top: 10rem;

  cursor: pointer;

  z-index: 10;

  background: #272727;

  width: 5rem;

  line-height: 5rem;

  text-align: center;

  height: 5rem;

  color: #fff;

  -webkit-transition: 0.2s ease;

  -o-transition: 0.2s ease;

  transition: 0.2s ease;

}



.open-options-panel:hover {

  width: 6.5rem;

}



.open-options-panel span {

  font-size: 1.7rem;

  opacity: 0.7;

  -webkit-transition: 0.2s ease;

  -o-transition: 0.2s ease;

  transition: 0.2s ease;

  color: #fff;

  line-height: inherit;

}



.options-panel {

  position: fixed;

  left: 0;

  top: 0;

  opacity: 0;



  z-index: -10000;

  width: 100%;

  height: 100%;

}



.options-panel .close-button {

  cursor: pointer;

  position: absolute;

  left: 6rem;

  top: 6rem;



  z-index: 11111;

  font-size: 2.1rem;

  color: #fff;

  opacity: 0.7;

}



.options-panel .close-button:after {

  content: "";

  cursor: pointer;

  position: absolute;

  left: 50%;

  top: 50%;

  width: 10rem;

  border-radius: 100%;

  z-index: -2;

  height: 10rem;

  -webkit-transform: translate(-50%, -50%);

  -ms-transform: translate(-50%, -50%);

  transform: translate(-50%, -50%);

}



.options-panel .panel {

  position: absolute;

  max-width: 61.8%;

  top: 0;

  right: 0;

  opacity: 0;

  overflow: auto;

  height: 100%;

  padding: 12rem 16rem;

  z-index: 10;

  background: #272727;

}



.options-panel .panel-overlay {

  position: absolute;

  background: #212121;

  opacity: 0.96;

  width: 100%;

  height: 100%;

  left: 0;

  cursor: pointer;

  top: 0;

  z-index: 5;

}



.options-panel .headline p {

  color: #fff;

  display: inline-block;

}



.options-panel .options {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -ms-flex-wrap: wrap;

  flex-wrap: wrap;

  margin-top: 2.5rem;

  -webkit-box-orient: horizontal;

  -webkit-box-direction: normal;

  -ms-flex-direction: row;

  flex-direction: row;

  gap: 1rem;

}



.options-panel .options .option {

  cursor: pointer;

}



.options-panel .options .color {

  border-radius: 100%;

  height: 5rem;

  overflow: hidden;

  position: relative;

  -webkit-transition: 0.15s;

  -o-transition: 0.15s;

  transition: 0.15s;

  border: 1px solid rgba(255, 255, 255, 0);

  width: 5rem;

}



.options-panel .options .color.active {

  border-color: #fff;

}



.options-panel .options .color .bg {

  position: absolute;

  left: 50%;

  top: 50%;

  -webkit-transform: translate(-50%, -50%);

  -ms-transform: translate(-50%, -50%);

  transform: translate(-50%, -50%);

  width: 3.2rem;

  border-radius: 100%;

  height: 3.2rem;

}



.options-panel .button {

  border: 1px solid rgba(255, 255, 255, 0);

  height: 5rem;

  border-radius: 10rem;

  line-height: 5rem;

  padding: 0 2.6rem;

}



.options-panel .button.active {

  border-color: #fff;

  height: 5rem;

  border-radius: 10rem;

  line-height: 5rem;

  padding: 0 2.6rem;

}



.options-panel .button p {

  color: #fff;

  line-height: inherit;

}



/* Lightbox */



.goverlay {

  background: rgba(22, 22, 22, 0.95) !important;

}



.gslide-media {

  -webkit-box-shadow: none !important;

  box-shadow: none !important;

}



.gslide-image img {

  max-height: 86vh;

}



.glightbox-container {

  z-index: 500 !important;

}



.glightbox-container .gprev,

.glightbox-container .gclose,

.glightbox-container .gnext {

  z-index: 40 !important;

  -webkit-tap-highlight-color: transparent;

  -webkit-touch-callout: none;

  -webkit-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  user-select: none;

}



.glightbox-container .gnext {

  -webkit-transition: 0.2s ease;

  -o-transition: 0.2s ease;

  transition: 0.2s ease;

  position: fixed;

  padding: 0 !important;

  top: 50%;

  right: 6rem;

  -webkit-transform: translateY(-50%);

  -ms-transform: translateY(-50%);

  transform: translateY(-50%);

  width: unset !important;

  height: unset !important;

  background-color: rgba(0, 0, 0, 0) !important;

  opacity: 1 !important;

  display: block;

}



.glightbox-container .gprev {

  -webkit-transition: 0.2s ease;

  -o-transition: 0.2s ease;

  transition: 0.2s ease;

  position: fixed;

  padding: 0 !important;

  top: 50%;

  left: 6rem;

  -webkit-transform: translateY(-50%);

  -ms-transform: translateY(-50%);

  transform: translateY(-50%);

  width: unset !important;

  height: unset !important;

  background-color: rgba(0, 0, 0, 0) !important;

  opacity: 1 !important;

  display: block;

}



.glightbox-container .gclose {

  -webkit-transition: 0.2s ease;

  -o-transition: 0.2s ease;

  padding: 0 !important;

  transition: 0.2s ease;

  opacity: 1 !important;

  width: unset !important;

  height: unset !important;

  top: 6rem !important;

  left: 6rem !important;

  right: unset !important;

  position: fixed;

  display: block;

  background-color: rgba(0, 0, 0, 0) !important;

}



.glightbox-container .gbtn span {

  vertical-align: middle;

  display: inline-block;

  -webkit-transition: 0.2s ease;

  -o-transition: 0.2s ease;

  transition: 0.2s ease;

  font-size: 2.1rem;

}



.glightbox-container .gbtn:focus-visible {

  outline: none !important;

}



.glightbox-container .gbtn:hover span {

  color: #fdc60c;

}



.glightbox-container .gbtn span:after {

  position: absolute;

  content: "";

  width: 10rem;

  height: 10rem;

  border-radius: 100%;

  left: 50%;

  top: 50%;

  -webkit-transform: translate(-50%, -50%);

  -ms-transform: translate(-50%, -50%);

  transform: translate(-50%, -50%);

}



.glightbox-closing .gclose,

.glightbox-closing .gnext,

.glightbox-closing .gprev,

.glightbox-closing .info-button,

.glightbox-container .gnext.disabled,

.glightbox-container .gprev.disabled {

  opacity: 0 !important;

}



.glightbox-container .info-button {

  position: fixed;

  top: 5rem;

  cursor: pointer;

  z-index: 100;

  right: 5rem;

}



.glightbox-container .info {

  position: fixed;

  left: 0;

  top: 0;

  z-index: 90;

  bottom: 0;

  width: 61.8%;

  background: #212121;

  display: flex;

  align-items: center;

  justify-content: center;

  transform: translateX(-100%);

}



.glightbox-container .info-overlay {

  position: fixed;

  left: 100%;

  width: 100%;

  height: 100%;

  cursor: pointer;

  top: 0;

  z-index: 80;

  opacity: 0;

  background: rgba(24, 24, 24, 0.4);

}



.glightbox-container .info .info-container {

  max-width: 76rem;

  padding: 0 6rem;

  opacity: 0;

  transition: 0.3s ease-in-out;

}



.mbl-tree {

  display: none;

}



/* updated styles */



@media (max-width: 810px) {

  .glightbox-container .info {

    width: 100%;

  }

}



.logo {

  position: fixed;

  left: 24px;

  top: 24px;

  z-index: 1;

}



@media (max-width: 600px) {

  .logo {

    width: 150px;

  }

}



@media (max-width: 576px) {

  .mbl-tree {

    display: flex;

    justify-content: center;

    align-items: center;

    width: 100%;

    height: 100%;



    img {

      transform: scale(0.3);

    }

  }



  .socialmedia_icons {

    width: 12px;

    height: 12px;

    margin-bottom: 0;

  }



  #three-scene {

    display: none;

  }



  .m-menu-button {

    top: 30px;

    right: 24px;

  }

}