@import url(http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css);
.side-nav a:hover, .menu__item:hover, .social-media a:hover img, .m1r:hover, .m1r:active, .button--toggle:active, .button--toggle:hover, .button--refresh:active, .button--refresh:hover, .button:hover, .link--end a:hover, a:hover {
  transition: 0.2s linear;
  -moz-transition: 0.2s linear; /* FF3.7+ */
  -o-transition: 0.2s linear; /* Opera 10.5 */
  -webkit-transition: 0.2s linear; /* Saf3.2+, Chrome */
}

.button {
  border-radius: 80px;
  /* future proofing */
  -khtml-border-radius: 80px;
}

/*---Set Up------------------------------------*/
html, body {
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  font-family: "Work Sans", Verdana, sans-serif;
  color: #111;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  margin: 0px;
  background-color: #eee;
  padding: 0px;
  height: 100%;
}
@media (max-width: 768px) {
  html, body {
    font-size: 14px;
    line-height: 1.3;
    font-weight: 400;
  }
}

/* @font-face {
	font-family: 'Nanum Myeongjo';
	src: url('../fonts/NanumMyeongjoBold.eot');
	src: url('../fontsNanumMyeongjoBold.eot?#iefix') format('embedded-opentype'),
		url('../fontsNanumMyeongjoBold.woff') format('woff'),
		url('../fontsNanumMyeongjoBold.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
} */
/* @import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);*/
.center {
  text-align: center;
}

.center--left {
  text-align: center;
}
@media (max-width: 768px) {
  .center--left {
    text-align: left;
  }
}

.right {
  text-align: right;
}

.left {
  text-align: left;
}

/*---Links------------------------------------*/
a:link {
  text-decoration: none;
  color: #111;
}
a:visited {
  color: #111;
}
a:hover {
  color: rgba(17, 17, 17, 0.3);
}
a:active {
  color: rgba(17, 17, 17, 0.3);
}

.link--end a:link {
  text-decoration: none;
  color: #111;
  padding: 0 0 3px 0;
  border-bottom: 2px solid #111;
}
.link--end a:visited {
  color: #111;
}
.link--end a:hover {
  color: rgba(17, 17, 17, 0.7);
  border-bottom: 2px solid rgba(17, 17, 17, 0.7);
}
.link--end a:active {
  color: rgba(17, 17, 17, 0.7);
}

.link--darkpink a:link {
  color: #e39398 !important;
}
.link--darkpink a:visited {
  color: #e39398 !important;
}
.link--darkpink a:hover {
  color: rgba(227, 147, 152, 0.7) !important;
}
.link--darkpink a:active {
  color: rgba(227, 147, 152, 0.7) !important;
}

/*---Content------------------------------------*/
.content--first {
  width: 100%;
  margin: -100px 0 0 0;
  padding: 150px 0 0 0;
}

.content {
  width: 100%;
}

.column--single {
  width: 80%;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .column--single {
    width: 90%;
  }
}

.column--half {
  width: 50%;
  float: left;
}
@media (max-width: 768px) {
  .column--half {
    width: 100%;
  }
}

.column--half-static {
  width: 50%;
  float: left;
}

.column--et-refresh {
  max-width: 60px;
  float: left;
  margin-top: 45px;
  margin-right: 20px;
}
@media (max-width: 768px) {
  .column--et-refresh {
    margin-left: calc(50% - 40px);
    margin-right: calc(50% - 40px);
    order: 2;
  }
}

.column--half-et {
  width: calc(50% - 35px);
  float: left;
}
@media (max-width: 768px) {
  .column--half-et {
    width: 100%;
  }
}

.column--half-br-static {
  width: 49.8%; /* for browsers without calc() */
  width: calc(50% - 1px);
  float: left;
}

.column--half-br-static:first-of-type {
  border-right: 2px solid #fff;
}

.column--half-br:first-of-type {
  border-right: 2px solid #fff;
}

.column--half-br {
  width: 49.8%; /* for browsers without calc() */
  width: calc(50% - 1px);
  float: left;
}
@media (max-width: 768px) {
  .column--half-br {
    width: 100%;
    padding-top: 60px;
  }
}

@media (max-width: 768px) {
  .column--half-br:first-of-type {
    border-right: 0px solid #fff;
    border-bottom: 2px solid #fff;
    padding: 0 0 60px 0;
  }
}

.column--half-br-fluid {
  width: 49.8%; /* for browsers without calc() */
  width: calc(50% - 1px);
  float: left;
}
@media (max-width: 768px) {
  .column--half-br-fluid {
    width: 100%;
  }
}

.column--half-br-fluid:first-of-type {
  border-right: 2px solid #fff;
}
@media (max-width: 768px) {
  .column--half-br-fluid:first-of-type {
    border-right: 0px solid #fff;
  }
}

.column--half-right {
  width: 40%;
  margin: 0 0 0 10%;
  float: left;
}
@media (max-width: 768px) {
  .column--half-right {
    width: 100%;
  }
}

.column--half-left {
  width: 40%;
  margin: 0 10% 0 0;
  float: left;
}
@media (max-width: 768px) {
  .column--half-left {
    width: 100%;
  }
}

.column--one-third {
  width: 33.333%;
  float: left;
}
@media (max-width: 768px) {
  .column--one-third {
    width: 100%;
  }
}

.column--one-third-static {
  width: 33.333%;
  float: left;
}

.column--two-thirds {
  width: 66.666%;
  float: left;
}
@media (max-width: 768px) {
  .column--two-thirds {
    width: 100%;
  }
}

.column--two-thirds-static {
  width: 66.666%;
  float: left;
}

.column--three-fourths {
  width: 75%;
  float: left;
}

.column--one-fourth {
  width: 25%;
  float: left;
}

.flex--center {
  display: flex;
  align-items: center;
}

/*---Rules------------------------------------*/
.rule {
  border-bottom: 2px solid #fff;
}

/*---Flex------------------------------------*/
.expressive-wrapper {
  display: flex;
}
@media (max-width: 768px) {
  .expressive-wrapper {
    flex-direction: column;
  }
}

.flex-h-center {
  display: flex;
  align-items: center;
}

/*---Z-index------------------------------------*/
.top {
  position: relative;
  z-index: 3;
}

/* White Container */
.arrow-container-white {
  margin: 0 20px;
  position: relative;
  width: 80%;
  height: auto;
  background-color: #fff;
}

.white-tri-right.left-top:after {
  content: " ";
  position: absolute;
  width: 0;
  height: 0;
  left: -20px;
  right: auto;
  top: 0px;
  bottom: auto;
  border: 22px solid;
  border-color: #fff transparent transparent transparent;
}

.white-tri-right.right-top:after {
  content: " ";
  position: absolute;
  width: 0;
  height: 0;
  left: auto;
  right: -20px;
  top: 0px;
  bottom: auto;
  border: 20px solid;
  border-color: #fff transparent transparent transparent;
}

/* Yellow Container */
.arrow-container-yellow {
  margin: 0 20px;
  position: relative;
  width: 80%;
  height: auto;
  background-color: #ffce00;
}

.yellow-tri-right.left-top:after {
  content: " ";
  position: absolute;
  width: 0;
  height: 0;
  left: -20px;
  right: auto;
  top: 0px;
  bottom: auto;
  border: 22px solid;
  border-color: #ffce00 transparent transparent transparent;
}

.yellow-tri-right.right-top:after {
  content: " ";
  position: absolute;
  width: 0;
  height: 0;
  left: auto;
  right: -20px;
  top: 0px;
  bottom: auto;
  border: 20px solid;
  border-color: #ffce00 transparent transparent transparent;
}

.abbrev-text-box {
  font-size: 3em;
  font-weight: 600;
}

.arrow-container-contents p {
  -webkit-margin-before: 0em !important;
  -webkit-margin-after: 0em !important;
}

.light {
  background-color: #fff;
}

.dark {
  background-color: #111;
}

.lightpink {
  background-color: #fcdfeb;
}

.mediumpink {
  background-color: #f3c8d4;
}

.yellow {
  background-color: #ffce00;
}

.darkyellow {
  background-color: #ffad00;
}

.lightblue {
  background-color: #93d6de;
}

.blue {
  background-color: #45c0c9;
}

.mediumblue {
  background-color: #0babaf;
}

.darkblue {
  background-color: #047272;
}

.green {
  background-color: #57c17b;
}

.darkgreen {
  background-color: #0a6024;
}

.split-bg {
  background: linear-gradient(to right, #fcdfeb 0%, #fcdfeb 50%, #ffce00 50%, #ffce00 100%);
}

.bg--about {
  background-image: url("../images/bg--about.svg");
  background-size: 100% auto;
  background-repeat: repeat-y;
  background-color: #93d6de;
}

.button {
  font-weight: 600;
  background: #111;
  color: #fff !important;
  padding: 20px 30px;
}
.button:hover {
  background: rgba(17, 17, 17, 0.6);
}

.button--refresh {
  background: #fff;
  max-height: 60px;
  border-radius: 50px;
  /* future proofing */
  -khtml-border-radius: 50px;
  box-shadow: 5px 5px 0px 0px rgba(153, 102, 0, 0.75);
}
.button--refresh:hover {
  background: rgba(227, 147, 152, 0.6);
}
.button--refresh:active {
  background: rgba(227, 147, 152, 0.6);
  box-shadow: 0px 0px 0px 0px rgba(153, 102, 0, 0.75); /* IE 9 */ /* Chrome, Safari, Opera */
  transform: rotate(-45deg);
}

.button--toggle {
  background: #fff;
  padding: 5px 10px;
  max-width: 70%;
  width: 150px;
  margin: 0 auto;
  border-radius: 50px;
  /* future proofing */
  -khtml-border-radius: 50px;
  box-shadow: 5px 5px 0px 0px rgba(153, 102, 0, 0.75);
}
.button--toggle:hover {
  background: rgba(227, 147, 152, 0.6);
}
.button--toggle:active {
  background: rgba(227, 147, 152, 0.6);
  box-shadow: 0px 0px 0px 0px rgba(153, 102, 0, 0.75);
}

.button--toggle-current {
  background: rgba(227, 147, 152, 0.6);
}

/*---Clear------------------------------------*/
.clear {
  clear: both;
  padding-bottom: 50px;
}

.dashes--flex {
  display: flex;
  flex-wrap: wrap;
}

.dashes--flex-item {
  align-items: stretch;
}

.center-align {
  margin-right: auto;
  margin-left: auto;
}

.w5 {
  width: var(--width-5);
}

.w6 {
  width: var(--width-6);
}

.dib {
  display: inline-block;
}

.cf {
  zoom: 1;
}

.cf:before, .cf:after {
  content: " ";
  display: table;
}

.cf:after {
  clear: both;
}

.pointer {
  cursor: pointer;
}

.m1r {
  margin: 0 10px 0 10px;
  background: #ffad00;
  width: 60px;
  height: 60px;
  text-align: center;
  font-size: 30px;
  line-height: 2;
  border-radius: 50px;
  /* future proofing */
  -khtml-border-radius: 50px;
  box-shadow: 5px 5px 0px 0px rgba(153, 102, 0, 0.75);
}
.m1r:active {
  background: rgba(153, 102, 0, 0.75);
  box-shadow: 0px 0px 0px 0px rgba(153, 102, 0, 0.75); /* IE 9 */ /* Chrome, Safari, Opera */
  transform: rotate(-45deg);
}
@media (max-width: 1200px) {
  .m1r {
    width: 50px;
    height: 50px;
    font-size: 25px;
  }
}

.m1r:hover {
  background: #fff;
}

.br {
  border-right: solid #fff;
  border-right-width: 2px;
}

.faces-display {
  font-size: 100px;
}

.f1 {
  font-size: 3rem;
}

.f2 {
  font-size: 2.25rem;
}

.f3 {
  font-size: 1.5rem;
}

.f4 {
  font-size: 1.25rem;
}

.f5 {
  font-size: 1rem;
}

.f6 {
  font-size: 0.875rem;
}

.f7 {
  font-size: 0.75rem;
}

.bg-black {
  background-color: black;
}

.white {
  background-color: #fff;
}

.en-faces {
  font-weight: 500;
}

.img--100 img {
  width: 100%;
}

.img--80 img {
  width: 80%;
}

.img--middle {
  vertical-align: middle;
}

.img--140px img {
  max-width: 80%;
  width: 140px;
}

.img--icon {
  width: 20px;
  height: auto;
}

.img--minirule {
  max-width: 60px;
  height: auto;
}

.spacer--tiny {
  padding: 15px 0;
}
@media (max-width: 768px) {
  .spacer--tiny {
    padding: 5px 0;
  }
}

.spacer--small {
  padding: 30px 0;
}
@media (max-width: 768px) {
  .spacer--small {
    padding: 15px 0;
  }
}

.spacer--medium {
  padding: 60px 0;
}
@media (max-width: 768px) {
  .spacer--medium {
    padding: 30px 0;
  }
}

.spacer--large {
  padding: 90px 0;
}
@media (max-width: 768px) {
  .spacer--large {
    padding: 45px 0;
  }
}

.spacer--left {
  padding-left: 3%;
  float: right;
}
@media (max-width: 768px) {
  .spacer--left {
    padding-left: 0;
    float: left;
  }
}

.spacer--small-mobile {
  padding: 0px;
}
@media (max-width: 768px) {
  .spacer--small-mobile {
    padding: 15px 0;
    float: left;
  }
}

.spacer--medium-mobile {
  padding: 0px;
}
@media (max-width: 768px) {
  .spacer--medium-mobile {
    padding: 30px 0;
    float: left;
  }
}

/*---Text Colors------------------------------------*/
.text--light {
  color: #fff;
}

.text--lightgray {
  color: #ccc;
}

.text--blue {
  color: #047272;
}

.text--lightpink {
  color: #fcdfeb;
}

.text--darkpink {
  color: #e39398;
}

.text--yellow {
  color: #ffce00;
}

.text--brown {
  color: #d88f0e;
}

.text--darkgreen {
  color: #0a6024;
}

.text--lightgray {
  color: #ccc;
}

/*---Typeface------------------------------------*/
.serif {
  font-family: "Bitter", Georgia, serif;
}

.kr-sans {
  font-family: "source-han-sans-korean", "Noto Sans KR", "Noto Sans", AppleGothic, Dotum, sans-serif;
  font-weight: 500;
}

.kr-sans-bold {
  font-family: "source-han-sans-korean", "Noto Sans KR", "Noto Sans", AppleGothic, Dotum, sans-serif;
  font-weight: 700;
}

.kr-serif {
  font-family: "Nanum Myeongjo", AppleMyungjo, Batang;
  font-weight: 700;
}

.bold {
  font-weight: 600;
}

.black {
  font-weight: 700;
}

/*---Headers and Captions------------------------------------*/
h1 {
  font-size: 60px;
  line-height: 1;
  font-weight: 700;
}
@media (max-width: 768px) {
  h1 {
    font-size: 30px;
  }
}

h2 {
  font-size: 30px;
  font-weight: 600;
}
@media (max-width: 768px) {
  h2 {
    font-size: 20px;
  }
}

h3 {
  font-size: 20px;
  font-weight: 600;
}
@media (max-width: 900px) {
  h3 {
    font-size: 18px;
  }
}
@media (max-width: 768px) {
  h3 {
    font-size: 16px;
  }
}

.weight--400 {
  font-weight: 400 !important;
}

@media (max-width: 768px) {
  .nav--top {
    font-size: 12px;
  }
}

.dash-eg {
  font-size: 50px;
  line-height: 1.2;
}
@media (max-width: 768px) {
  .dash-eg {
    font-size: 30px;
  }
}

.caption {
  font-size: 14px;
}
@media (max-width: 768px) {
  .caption {
    font-size: 12px;
  }
}

.caption--max-width {
  font-size: 14px;
  max-width: 370px;
}

.caps {
  text-transform: uppercase;
  letter-spacing: 0.2em;
}
@media (max-width: 768px) {
  .caps {
    letter-spacing: 0.1em;
  }
}

.h3-responsive {
  font-size: 20px;
  font-weight: 600;
}
@media (max-width: 900px) {
  .h3-responsive {
    font-size: 16px;
  }
}
@media (max-width: 768px) {
  .h3-responsive {
    font-size: 10px;
  }
}

/*---Other------------------------------------*/
.no-break {
  word-break: keep-all;
}

.no-orphan {
  white-space: nowrap;
}

/*---Rotated------------------------------------*/
.rotate {
  /* Safari */
  -webkit-transform: rotate(-90deg);
  /* Firefox */
  -moz-transform: rotate(-90deg);
  /* IE */
  -ms-transform: rotate(-90deg);
  /* Opera */
  -o-transform: rotate(-90deg);
  /* Internet Explorer */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

@media (max-width: 768px) {
  .timeline-descriptor {
    display: none;
  }
}

/* The actual timeline (the vertical ruler) */
.timeline {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}

/* The actual timeline (the vertical ruler) */
.timeline::after {
  content: "";
  position: absolute;
  width: 2px;
  background-color: white;
  top: 175px;
  bottom: calc(10vh - 50px);
  left: 50%;
  margin-left: -1px;
  border-radius: 5px;
  animation: opac 2s;
}
@media (max-width: 768px) {
  .timeline::after {
    width: 0px;
  }
}

@keyframes opac {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* Container around content */
.container-timeline {
  padding: 10px 40px;
  position: relative;
  width: 50%;
  box-sizing: border-box;
  max-width: 600px;
}
@media (max-width: 768px) {
  .container-timeline {
    width: 100%;
    padding-left: 25px;
    padding-right: 25px;
  }
}

/* The circles on the timeline */
.container-timeline::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  right: -5px;
  background-color: white;
  top: 47px;
  border-radius: 50%;
  z-index: 1;
  transition: 0s linear;
  animation: animatezoom 0.5s;
}
@media (max-width: 768px) {
  .container-timeline::after {
    width: 0px;
    height: 0px;
    right: 0px;
  }
}

@keyframes animatezoom {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}
/* Fix the circle for containers on the right side */
.right-timeline::after {
  left: -5px;
}
@media (max-width: 768px) {
  .right-timeline::after {
    left: 0px;
  }
}

/* Place the container to the left */
.left-timeline {
  left: 0;
  margin-top: -10vh;
}
@media (max-width: 768px) {
  .left-timeline {
    margin-top: 0;
  }
}

/* Place the container to the right */
.right-timeline {
  left: 50%;
}
@media (max-width: 768px) {
  .right-timeline {
    left: 0%;
  }
}

.timeline .Hieroglyphs,
.timeline .Carolingian,
.timeline .Metal,
.timeline .Renaissance,
.timeline .Realist,
.timeline .Modernist,
.Post {
  margin-top: -10vh;
}
@media (max-width: 768px) {
  .timeline .Hieroglyphs,
  .timeline .Carolingian,
  .timeline .Metal,
  .timeline .Renaissance,
  .timeline .Realist,
  .timeline .Modernist,
  .Post {
    margin-top: 0;
  }
}

/* Add arrows to the left container (pointing right) */
.left-timeline::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 42px;
  width: 0;
  z-index: 1;
  right: 30px;
  border: medium solid #ffce00;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent #ffce00;
}
@media (max-width: 768px) {
  .left-timeline::before {
    right: 15px;
    border: medium solid #fcdfeb;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent #F6BF0E;
  }
}

/* Add arrows to the right container (pointing left) */
.right-timeline::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 42px;
  width: 0;
  z-index: 1;
  left: 30px;
  border: medium solid #fcdfeb;
  border-width: 10px 10px 10px 0;
  border-color: transparent #fcdfeb transparent transparent;
}
@media (max-width: 768px) {
  .right-timeline::before {
    left: 15px;
    border: medium solid #ffce00;
    border-width: 10px 10px 10px 0;
    border-color: transparent #f3c8d4 transparent transparent;
  }
}

/* The actual content */
.content-timeline {
  position: relative;
  border-radius: 12px;
  background: #fff;
}

.milestone-content {
  padding: 30px 40px;
}

.bottom-br {
  border-bottom: 2px solid #047272;
  padding: 0 0 5px 0;
}

.lightpink .milestone-img {
  background: #fcdfeb;
  border-radius: 12px 12px 0 0;
  padding: 1em 0;
}
@media (max-width: 768px) {
  .lightpink .milestone-img {
    background: #f3c8d4;
  }
}

.yellow .milestone-img {
  background: #ffce00;
  border-radius: 12px 12px 0 0;
  padding: 1em 0;
}
@media (max-width: 768px) {
  .yellow .milestone-img {
    background: #F6BF0E;
  }
}

.about-wrap {
  width: 100%;
  min-height: 100%;
  padding-top: 100px;
  line-height: 1.6;
}

.about-container {
  position: relative;
  z-index: 2;
  background: #fff;
  width: 80%;
  max-width: 685px;
  padding: 100px;
  margin: 0 auto;
}
@media (max-width: 1200px) {
  .about-container {
    width: 70%;
    padding: 50px 7%;
  }
}
@media (max-width: 768px) {
  .about-container {
    width: 70%;
    padding: 30px 10%;
  }
}

.about-link a {
  border-bottom: 1px solid;
}

.headshot img {
  width: 100px;
  padding: 15px 0 5px 0;
}

.social-media a:link {
  text-decoration: none;
}
.social-media a:link img {
  height: 15px;
  width: auto;
  padding: 5px 0 0 0;
}
.social-media a:hover img {
  opacity: 0.6;
  filter: alpha(opacity=60);
}

/*---Footer------------------------------------*/
footer {
  color: #fff;
  padding: 20px 0;
}

.header-index {
  width: 100%;
  background-image: url("../images/index/index-header-bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 10% 0 5% 0;
}
.header-index img {
  width: 28%;
  max-width: 480px;
}
@media (max-width: 768px) {
  .header-index img {
    width: 40%;
    max-width: 480px;
    padding: 50px 0 20px 0;
  }
}

.header-wrap {
  width: 80%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 100px 0 0 0;
}

.header-container {
  position: relative;
  z-index: 2;
  background: #fff;
  width: 80%;
  padding: 50px;
  margin: 0 auto;
  box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.4);
}
@media (max-width: 1200px) {
  .header-container {
    width: 70%;
    padding: 50px 15%;
  }
}
@media (max-width: 768px) {
  .header-container {
    width: 60%;
    padding: 30px 20%;
  }
}

.header-content {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
}

.header-section-title {
  position: absolute;
  margin: 20px 0 0 -4%;
  left: 0px;
  font-weight: 700;
}
@media (max-width: 1200px) {
  .header-section-title {
    margin: 20px 0 0 -5%;
  }
}
@media (max-width: 768px) {
  .header-section-title {
    margin: 44px 0 0 -6%;
  }
}

.header-section-title-conno {
  position: absolute;
  margin: 37px 0 0 -6%;
  left: 0px;
  font-weight: 700;
}
@media (max-width: 1200px) {
  .header-section-title-conno {
    margin: 37px 0 0 -6.8%;
  }
}
@media (max-width: 768px) {
  .header-section-title-conno {
    margin: 58px 0 0 -8.4%;
  }
}

.header-section-number {
  font-size: 20px;
  font-weight: 600;
  border-bottom: 3px solid #111;
}

.header-section-desc {
  font-family: "Bitter", Georgia, serif;
  font-size: 23px;
}
@media (max-width: 768px) {
  .header-section-desc {
    font-size: 16px;
  }
}

.hero--wrap {
  display: flex;
  align-items: center;
  background: #ffce00;
}
@media (max-width: 768px) {
  .hero--wrap {
    flex-wrap: wrap;
  }
}

.hero--left {
  width: 50%;
  background-image: url("../images/index/bg-header.jpg");
  background-size: cover;
}
@media (max-width: 768px) {
  .hero--left {
    width: 100%;
  }
}
.hero--left img {
  width: 60%;
  padding: 25% 20% 20% 20%;
  margin: 20px auto auto auto;
  height: auto;
}

.hero--right {
  width: 50%;
  background: #ffce00;
}
@media (max-width: 768px) {
  .hero--right {
    width: 100%;
    padding: 10vh 0;
  }
}
.hero--right p {
  margin: 0 auto;
  max-width: 600px;
  padding: 0 50px 15px 50px;
}
@media (max-width: 1200px) {
  .hero--right p {
    padding: 0 50px 10px 50px;
  }
}

.hero--text {
  font-size: 2.5em;
  line-height: 140%;
}
@media (max-width: 1200px) {
  .hero--text {
    font-size: 2em;
  }
}
@media (max-width: 768px) {
  .hero--text {
    font-size: 2em;
  }
}

.menu {
  color: #fff;
}

.menu__section_title {
  text-transform: uppercase;
  font-size: 1.5em;
  font-weight: 600;
  letter-spacing: 0.15em;
  padding: 1em 0;
  border-bottom: 1px solid #fff;
  margin: 0 0 2em 0;
  text-align: left;
}
@media (max-width: 768px) {
  .menu__section_title {
    font-size: 1.25em;
  }
}

.menu__item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  color: #fff;
  line-height: 0;
}
.menu__item:hover {
  opacity: 0.6;
  filter: alpha(opacity=60);
}
.menu__item img {
  width: 60px;
  height: auto;
  padding: 0 2em 0 0;
}
@media (max-width: 768px) {
  .menu__item img {
    width: 50px;
    padding: 0 1em 0 0;
  }
}
.menu__item .menu__arrow {
  font-size: 3em;
  justify-self: right;
}
@media (max-width: 768px) {
  .menu__item .menu__arrow {
    font-size: 2em;
  }
}
.menu__item a:link {
  color: #fff !important;
  text-decoration: none;
}
.menu__item a:visited {
  color: #fff;
}
.menu__item a:hover {
  color: #777;
}
.menu__item a:active {
  color: #777;
}

.menu__left {
  display: flex;
  align-items: center;
}

.menu__title {
  font-size: 2.5em;
  letter-spacing: 0.02em;
  text-transform: none;
  color: #fff;
}
@media (max-width: 768px) {
  .menu__title {
    font-size: 1.75em;
  }
}

/* DROPDOWN */
[v-cloak] {
  display: none;
}

.pointer {
  cursor: pointer;
}

.relative {
  position: relative;
}

.z4 {
  z-index: 4;
}

.z0 {
  z-index: 0;
}

.dropdown {
  width: 80vw;
  padding: 70px 10vw 100px 0;
  position: absolute;
  z-index: -1;
  left: -34vw;
  top: -20px;
  height: calc(100vh - 140px);
  background-color: #111;
  transition: opacity 1s;
  overflow: auto;
}
@media (max-width: 768px) {
  .dropdown {
    width: 100vw;
    padding: 70px 0vw 100px 0;
  }
}
@media (min-width: 1200px) {
  .dropdown {
    width: 60vw;
    padding: 70px 20vw;
  }
}
.dropdown .menu .spacer--tiny {
  padding: 0 !important;
}
.dropdown .menu .spacer--small {
  padding: 30px 0 0 0;
}
.dropdown .menu__section_title {
  font-size: 1em;
}
.dropdown .menu__title, .dropdown .menu__arrow {
  font-size: 1.75em;
}
.dropdown .menu__icon img {
  width: 50px;
  padding: 0 1em 0 0;
}

.drop-enter-active, .drop-leave-active {
  transition: top 0.3s;
}

.drop-enter, .drop-leave-to {
  top: -100vh;
  transition-timing-function: ease-in;
}

/*---Navigation------------------------------------*/
nav {
  position: fixed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 96%;
  margin: 0 auto;
  padding: 20px 2% 0 2%;
}
@media (max-width: 768px) {
  nav {
    padding: 10px 2% 0 2%;
  }
}

nav a:link {
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 2px;
}
nav a:visited {
  color: #fff;
}

.nav__logo {
  max-width: 190px;
  height: auto;
}

.side-nav-left {
  height: 150px;
  width: 250px;
  position: fixed;
  bottom: 30px;
  left: -90px;
  z-index: 3;
  font-weight: 600;
}
@media (max-width: 768px) {
  .side-nav-left {
    display: none;
  }
}

.side-nav-right {
  height: 150px;
  width: 250px;
  position: fixed;
  bottom: 30px;
  right: -90px;
  z-index: 3;
  font-weight: 600;
}
@media (max-width: 768px) {
  .side-nav-right {
    display: none;
  }
}

.side-nav a:link {
  font-size: 14px;
  color: #fff;
}
.side-nav a:visited {
  color: #fff;
}
.side-nav a:hover {
  color: rgba(255, 255, 255, 0.6);
}
.side-nav a:active {
  color: rgba(255, 255, 255, 0.6);
}/*# sourceMappingURL=style.css.map */