::after, ::before { line-height: normal; }

/* <<< Reset CSS >>> */
body {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 18px;
  color: #6c757d;
  line-height: 1.5;
  background-color: #fff;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

ol:after,
ul:after {
  content: "";
  display: block;
  line-height: 0;
  clear: both;
  overflow: hidden;
  height: 0;
}

pre {
  border-left: 10px solid #ccc;
  max-width: 500px;
}

/* <<< Headings >>> */
h1 { font-size: 40px; }
h2 { font-size: 32px; }
h3 { font-size: 28px; }
h4 { font-size: 24px; }
h5 { font-size: 20px; }
h6 { font-size: 16px; }
p, .font-weight-light { font-weight: 300; }

<div id="reading-panel">
                    <div class="insp-reading">
						
												
							<style>
							#reading-panel {
								position: relative;
								width: 567px;
								height: 379px;
								margin-left: 18px;
								margin-top: -6px;
								background: transparent url(https://d2urhn0mmik6is.cloudfront.net/site/r66/imgs/insp-copy-back.png) no-repeat 0 0;
								padding-top: 23px;
								padding-left: 27px;
								padding-right: 23px;
							}
							.btn-receive-more {
								width: 30%;
								margin: 0 auto;
								position: absolute;
								bottom: 18px;
								width: 162px;
								left: calc(50% - 81px);
							}
							</style>						
							<h3>Decisions</h3>
							<p>If you have ever served on a committee, you will appreciate this observation by American novelist Fletcher Knebel: “A decision is what a man makes when he can’t get anyone to serve on a committee.” Committees can be very valuable, of course, as long as they are necessary and consist of the right people.</p><p>For the Christian, there is no such thing as solitary decision-making, as living life alone. Every decision is always made by a committee of four: the Christian plus the Father, Son, and Holy Spirit. If you are facing a difficult decision today, call your committee together and ask their advice—they are always available.</p><p>Decide on the road to new life. Discover God’s counsel . . . on Route 66.</p>
						
                    </div>
                    <div class="btn-receive-more">
                        <a href="#" class="connect-button" onclick="tp.remindme.show({'email_code':'Route-66', 'text_group':'Route-66', h1:'Receive More Messages</span>', css_class:'tv-remindme'}); return false;">Receive More Messages</a>
                    </div>
                </div>



/* <<< WP-Image Hack >>> */
img {
  border: 0;
  height: auto;
  max-width: 100%;
}

/* <<< anchor >>> */
a {
  color: #99ccff;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

a:hover {
  color: green;
  text-decoration: none;
}

a:focus {
  outline: 0;
  color: green;
}

/* <<< btn override >>> */
.btn {
  white-space: normal;
  cursor: pointer;
  font-size: 18px;
  padding: 12px 35px;
  border-radius: 0;
}

/* <<< btn-primary >>> */
.btn-primary {
  color: #fff;
  background-color: #356ba2;
  border-color: transparent;
}

.btn-primary.active, .btn-primary:active, .btn-primary.focus, .btn-primary:focus, .btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover, .btn-primary:hover {
  color: #fff;
  background-color: #99ccff;
  border-color: transparent;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active {
  background-color: #99ccff;
  border-color: transparent;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus {
  -webkit-box-shadow: none;
  box-shadow: none;
}

.form-control {
  width: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
  -webkit-background-clip: padding-box;
  height: 50px;
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid #fff;
  font-size: 18px;
  color: #fff;
  padding-left: 15px;
  padding-right: 15px;
}

.form-control::-webkit-input-placeholder { color: white; }
.form-control:-moz-placeholder { color: white; }
.form-control::-moz-placeholder { color: white; }
.form-control:-ms-input-placeholder { color: white; }

.form-control:focus {
  border-bottom: 1px solid #356ba2;
  outline: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
  background-color: transparent;
  color: #fff;
}

textarea.form-control {
  min-height: 150px;
  padding: 10px 10px 10px 10px;
}

/* <<< Global >>> */
.container { max-width: 1150px; }
.container-2 { max-width: 1250px; }

/* <<< outer >>> */
#outer {
  position: relative;
  width: 100%;
  min-height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

@media (max-width: 991px) {
  #outer { display: block; }
}

/* <<< Header >>> */
.header {
  position: fixed;
  right: 0;
  width: 26%;
  height: 100%;
  background-color: #356ba2;
  overflow-y: auto;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
}

@media (max-width: 991px) {
  .header {
    position: fixed;
    right: -100%;
    top: 0;
    bottom: 0;
    width: 300px;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

@media (max-width: 575px) {
  .header { width: 100%; }
}

.header.open { right: 0; }
.design { color: #fff; }

.design a {
  color: #fff;
  text-decoration: none;
}

.design a:hover { color: #99ccff; }

/* <<< Mobile Menu button >>> */
.navbar-button {
  width: 50px;
  height: 47px;  
  padding: 0;
  margin: 0;
  outline: 0;
  border: 0;
  z-index: 9;
  -webkit-box-shadow: none;
  box-shadow: none;
  position: fixed;
  top: 0px;
  right: 0px;
  background-color: #fff;
  padding: 10px;
  border-radius: 0;
  display: none;
  -webkit-box-shadow: 0px 5px 10px 0px rgba(50, 50, 50, 0.3);
  box-shadow: 0px 5px 10px 0px rgba(50, 50, 50, 0.3);
}

@media (max-width: 991px) {
  .navbar-button {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.navbar-button:focus {
  border: 0;
  outline: 0;
  -webkit-box-shadow: 0px 5px 10px 0px rgba(50, 50, 50, 0.3);
  box-shadow: 0px 5px 10px 0px rgba(50, 50, 50, 0.3);
}

.navbar-button .menu_icon {
  margin: 0;
  padding-top: 1px;
  float: left;
  width: 25px;
  height: 22px;
  position: relative;
  cursor: pointer;
}

.navbar-button .menu_icon .icon-bar {
  display: block;
  position: absolute;
  opacity: 1;
  width: 25px;
  height: 3px;
  background-color: #6699cc;
  margin: 0 auto;
  left: 0;
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}

.navbar-button .menu_icon .icon-bar:nth-child(1) {
  top: 10px;
  -webkit-transform: rotate(145deg);
  /* WebKit */
  /* Mozilla */
  /* Opera */
  /* Internet Explorer */
  transform: rotate(140deg);
  /* CSS3 */
}

.navbar-button .menu_icon .icon-bar:nth-child(2) {
  top: 8px;
  opacity: 0;
  left: -10px;
}

.navbar-button .menu_icon .icon-bar:nth-child(3) {
  top: 10px;
  -webkit-transform: rotate(-145deg);
  /* WebKit */
  /* Mozilla */
  /* Opera */
  /* Internet Explorer */
  transform: rotate(-140deg);
  /* CSS3 */
}

.navbar-button.collapsed .icon-bar {
  -webkit-transform: rotate(0deg);
  /* WebKit */
  /* Mozilla */
  /* Opera */
  /* Internet Explorer */
  transform: rotate(0deg);
  /* CSS3 */
}

.navbar-button.collapsed .icon-bar:nth-child(1) {
  top: 0;
  -webkit-transform: rotate(0deg);
  /* WebKit */
  /* Mozilla */
  /* Opera */
  /* Internet Explorer */
  transform: rotate(0deg);
  /* CSS3 */
}

.navbar-button.collapsed .icon-bar:nth-child(2) {
  top: 10px;
  left: 0;
  opacity: 1;
}

.navbar-button.collapsed .icon-bar:nth-child(3) {
  top: 20px;
  -webkit-transform: rotate(0deg);
  /* WebKit */
  /* Mozilla */
  /* Opera */
  /* Internet Explorer */
  transform: rotate(0deg);
  /* CSS3 */
}

/* <<< Navigation >>> */
.navbar {
  padding: 0;
  margin-bottom: 0;
}

.navbar .navbar-collapse {
  display: flex;
  height: 100% !important;
  padding-left: 61px;
  padding-right: 61px;
}

@media (max-width: 1366px) {
  .navbar .navbar-collapse {
    padding-left: 31px;
    padding-right: 21px;
  }
}

.navbar .navbar-nav { position: relative; }

@media (max-height: 580px) {
  .navbar .navbar-nav { padding-top: 30px; }
}

.navbar .navbar-collapse::before {
  content: '';
  position: absolute;
  width: 1px;
  background-color: #fff;
  height: 100%;
  top: 0;
}

.navbar .navbar-nav > .nav-item {
  font-weight: 500;
  font-size: 18px;
  background-image: url(../img/menu-item-bg.png);
  background-position: left center;
  background-repeat: no-repeat;
  min-height: 82px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-left: 66px;
  margin-bottom: 38px;
}

@media (max-width: 1366px) {
  .navbar .navbar-nav > .nav-item {
    font-size: 16px;
    padding-left: 53px;
  }
}

.navbar .navbar-nav > .nav-item .icn {
  padding-right: 20px;
  display: inline-block;
}

@media (max-width: 1366px) {
  .navbar .navbar-nav > .nav-item .icn { padding-right: 10px; }
}

.navbar .navbar-nav > .nav-item:last-child { margin-bottom: 0; }

.navbar .navbar-nav > .nav-item:hover > a.nav-link,
.navbar .navbar-nav > .nav-item.active > a.nav-link,
.navbar .navbar-nav > .nav-item.current-menu-ancestor > a.dropdown-toggle {
  background-color: transparent;
  outline: 0;
  color: #99ccff;
  transition: all 0.3s ease;
}

.navbar .navbar-nav > .nav-item > a.nav-link {
  color: #fff;
  -webkit-transition: all 0s ease-in-out;
  transition: all 0s ease-in-out;
  padding: 0;
}

.navbar .navbar-nav > .nav-item > a.nav-link.current { color: #99ccff; }

.navbar .navbar-nav > .nav-item > a.nav-link.dropdown-toggle::after {
  content: '';
  vertical-align: middle;
}

@media (max-width: 767px) {
  .navbar .navbar-nav > .nav-item > a.nav-link.dropdown-toggle::after { display: none; }
}

@media (max-width: 767px) {
  .navbar .navbar-nav > .nav-item > a.nav-link {
    padding: 10px;
    color: #fff;
  }
}

.navbar .navbar-nav > .nav-item ul.dropdown-menu {
  padding: 0;
  width: auto;
  border-radius: 0;
  border: 0;
  margin: 0;
}

.navbar .navbar-nav > .nav-item ul.dropdown-menu .nav-item {
  font-size: 16px;
  font-weight: 300;
}

.navbar .navbar-nav > .nav-item ul.dropdown-menu .nav-item > a.dropdown-item {
  border-bottom: 0;
  color: #fff;
  padding: 5px;
}

@media (max-width: 767px) {
  .navbar .navbar-nav > .nav-item ul.dropdown-menu .nav-item > a.dropdown-item {
    padding-left: 20px;
  }
}

.navbar .navbar-nav > .nav-item ul.dropdown-menu .nav-item > a.dropdown-item.dropdown-toggle {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-align: center;
  -webkit-box-align: center;
          align-items: center;
}

.navbar .navbar-nav > .nav-item ul.dropdown-menu .nav-item > a.dropdown-item.dropdown-toggle::after {
  height: 2px !important;
  background-color: cyan;
  opacity: 1;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  border: 0;
  margin-left: 10px;
  display: block;
}

@media (max-width: 767px) {
  .navbar .navbar-nav > .nav-item ul.dropdown-menu .nav-item > a.dropdown-item.dropdown-toggle::after {
    display: none;
  }
}

.navbar .navbar-nav > .nav-item ul.dropdown-menu .nav-item:hover > a,
.navbar .navbar-nav > .nav-item ul.dropdown-menu .nav-item.active > a,
.navbar .navbar-nav > .nav-item ul.dropdown-menu .nav-item.current-menu-ancestor > a.dropdown-toggle {
  font-weight: 500;
  color: #fff;
  background-color: lightblue;
}

.navbar .navbar-nav > .nav-item ul.dropdown-menu .nav-item:hover > a.dropdown-toggle::after {
  opacity: 1;
}

.navbar .navbar-nav > .nav-item ul.dropdown-menu .nav-item ul.dropdown-menu {
  padding: 0;
}

@media (max-width: 767px) {
  .navbar .navbar-nav .caret::before {
    margin-left: 10px;
    font-size: 26px;
    content: '\f107';
    font-family: "fontawesome";
    vertical-align: middle;
  }
  .navbar .navbar-nav .caret.caret-open::before {
    content: '\f106';
  }
}

@media only screen and (min-width: 768px) {
  /**:: First Dropdown ::**/
  .navbar .navbar-collapse ul li {
    position: relative;
  }
  .navbar .navbar-collapse ul li:hover > ul {
    display: block;
  }
  .navbar .navbar-collapse ul ul {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 250px;
    display: none;
    background-color: dodgerblue;
  }
  /**:: Second Dropdown ::**/
  .navbar .navbar-collapse ul ul li {
    position: relative;
  }
  .navbar .navbar-collapse ul ul li:hover > ul {
    display: block;
  }
  .navbar .navbar-collapse ul ul ul {
    position: absolute;
    top: 0;
    left: 100%;
    min-width: 250px;
    display: none;
    background-color: aqua;
  }
  /**:: Third Dropdown ::**/
  .navbar .navbar-collapse ul ul ul li {
    position: relative;
  }
  .navbar .navbar-collapse ul ul ul li:hover ul {
    display: block;
  }
  .navbar .navbar-collapse ul ul ul ul {
    position: absolute;
    top: 0;
    left: -100%;
    min-width: 250px;
    display: none;
    z-index: 1;
    background-color: bisque;
  }
  /**:: Fourth Dropdown ::**/
  .navbar .navbar-collapse ul ul ul ul li {
    position: relative;
  }
  .navbar .navbar-collapse ul ul ul ul li:hover ul {
    display: block;
  }
  .navbar .navbar-collapse ul ul ul ul ul {
    position: absolute;
    top: 0;
    left: -100%;
    min-width: 250px;
    display: none;
    z-index: 1;
    background-color: fuchsia;
  }
}

@media (max-width: 991px) {
  .navbar .navbar-nav {
    padding-top: 5px;
    margin-bottom: 0;
  }

  .navbar .navbar-collapse { padding-left: 0; }
  .navbar .navbar-collapse::before { height: 0; }

  .navbar .navbar-nav > .nav-item {
    min-height: 45px;
    margin-bottom: 10px;
    background-size: contain;
  }

  .navbar .navbar-nav > .nav-item { padding-left: 30px; }
  .nav-link .fa-2x { font-size: 1.2em; }  
}

/* <<< content-box >>> */
#content-box {
  overflow: hidden;
  width: calc(74% + 1px);
}

@media (max-width: 991px) {
  #content-box { width: 100%; }
}

.section {
  height: 100vh;
  min-height: 700px;
  display: flex;
  align-items: center;
}

/* <<< Banner side >>> */
.banner-section {
  position: relative;
  text-align: center;
  background-color: #99ccff;
  padding-top: 121px;
  align-items: flex-start;
}

.bg-blue-transparent { background-color: rgb(102 153 204 / 0.8); }

.banner-section .logo-fa {  
  color: #fff;
  max-width: 400px;
  margin-left: 5px;
  padding-top: 43px;
  padding-bottom: 35px;
  font-size: 32px;
  margin-bottom: 60px;
}

@media (max-width: 991px) {
  .banner-section .logo-fa { margin: 0 auto 30px; }
}

@media (max-width: 767px) {
  .banner-section .logo-fa {
    font-size: 28px;
    padding-top: 20px;
    padding-bottom: 15px;
  }
}

.banner-section .logo-fa span {
  font-size: 38px;
  display: block;
  text-transform: uppercase;
  margin-bottom: 17px;
}

@media (max-width: 767px) {
  .banner-section .logo-fa span {
    font-size: 32px;
    margin-bottom: 10px;
  }
}

.banner-section .simple {
  color: #fff;
  display: inline-block;
  margin: auto;
  margin-left: 97px;
  padding: 33px 68px 34px 68px;
}

@media (max-width: 991px) {
  .banner-section .simple { margin-left: 0; }
}

@media (max-width: 767px) {
  .banner-section .simple { padding: 16px 34px 17px 34px; }
}

.banner-section .simple p {
  margin-bottom: 0;
  font-size: 22px;
}

@media (max-width: 991px) {
  .banner-section .simple p { font-size: 20px; }
}

@media (max-width: 575px) {
  .banner-section .simple p { font-size: 18px; }
}

/* <<< Work Side >>> */
.work-section {
  padding-top: 90px!important;
  padding-bottom: 90px!important;
  min-height: 850px;
  background-color: #6699cc;
}

.work-section .container { max-width: 1242px; }

.tm-work-item-inner {
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 30px;
}

@media (max-width: 767px) {
  .work-section .item {
    text-align: center;
    margin-bottom: 30px;
  }
}

.work-section .item.one { margin-top: 80px; }

@media (max-width: 767px) {
  .work-section .item.one { margin-top: 0;}
}

.work-section .item.two { margin-top: 161px; }

@media (max-width: 767px) {
  .work-section .item.two { margin-top: 0; }
}

.work-section .item .icn {
  width: 119px;
  height: 119px;
  display: block;
  border: 1px solid #fff;
  border-radius: 100%;
  color: #fff;
  font-size: 32px;
  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;
  text-transform: uppercase;
  margin-bottom: 30px;
}

@media (max-width: 767px) {
  .work-section .item .icn { margin: 0 auto 20px; }
}

.work-section .item h3 {
  color: #ffccff;
  text-transform: uppercase;
  font-size: 27px;
  letter-spacing: -1px;
  margin-bottom: 9px;
}

.work-section .item p {
  color: #fff;
  line-height: 31px;
  margin-bottom: 0;
}

.work-section .title {
  margin-top: 5px;
  margin-left: 1px;
  border-bottom: 1px solid #fff;
}

.work-section .title h2 {
  color: #fff;
  font-size: 32px;
  margin-bottom: 12px;
}

/* <<< Gallery section >>> */
.gallery-slider figure {
	position: relative;
	float: left;
  overflow: hidden;
  margin: 0;
  max-width: 200px;
	height: auto;
	background: #3085a3;
	text-align: center;
	cursor: pointer;
}

.gallery-slider figure img {
	position: relative;
	display: block;
	min-height: 100%;
	max-width: 100%;
	opacity: 0.8;
}

.gallery-slider figure figcaption {
	padding: 1em;
	color: #fff;
	text-transform: uppercase;
	font-size: 1.25em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.gallery-slider figure figcaption::before,
.gallery-slider figure figcaption::after {
	pointer-events: none;
}

.gallery-slider figure figcaption,
.gallery-slider figure figcaption > a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.gallery-slider figure figcaption > a {
	z-index: 1000;
	text-indent: 200%;
	white-space: nowrap;
	font-size: 0;
	opacity: 0;
}

.gallery-slider figure h2 {
	word-spacing: -0.15em;
  font-weight: 300;
  font-size: 28px;
}

.gallery-slider figure h2 span {
	font-weight: 800;
}

.gallery-slider figure h2,
.gallery-slider figure p {
	margin: 0;
}

.gallery-slider figure p {
	letter-spacing: 1px;
	font-size: 68.5%;
}

.gallery-section {
  background-color: #99ccff;
}

.gallery-section .title {
  padding-right: 13px;
  margin-bottom: 80px;
}

/*---------------*/
/***** Julia *****/
/*---------------*/

figure.effect-julia {
	background: #2f3238;
}

figure.effect-julia img {
	-webkit-transition: opacity 1s, -webkit-transform 1s;
	transition: opacity 1s, transform 1s;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

figure.effect-julia figcaption {
	display: flex;
  align-items: center;
}

figure.effect-julia h2 {
	position: relative;
	padding: 0.5em 0;
}

figure.effect-julia p {
	display: inline-block;
	margin: 0 0 0.25em;
	padding: 0.4em 1em;
	background: rgba(255,255,255,0.9);
	color: #2f3238;
	text-transform: none;
	font-weight: 500;
	font-size: 75%;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(-360px,0,0);
	transform: translate3d(-360px,0,0);
}

figure.effect-julia p:first-child {
	-webkit-transition-delay: 0.15s;
	transition-delay: 0.15s;
}

figure.effect-julia p:nth-of-type(2) {
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}

figure.effect-julia p:nth-of-type(3) {
	-webkit-transition-delay: 0.05s;
	transition-delay: 0.05s;
}

figure.effect-julia:hover p:first-child {
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
}

figure.effect-julia:hover p:nth-of-type(2) {
	-webkit-transition-delay: 0.05s;
	transition-delay: 0.05s;
}

figure.effect-julia:hover p:nth-of-type(3) {
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}

figure.effect-julia:hover img {
	opacity: 0.4;
	-webkit-transform: scale3d(1.1,1.1,1);
	transform: scale3d(1.1,1.1,1);
}

figure.effect-julia:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

@media (max-width: 767px) {
  .gallery-section .title { margin-bottom: 40px; }
}

.gallery-section .title h2 { color: #006699; }
.gallery-section .slick-list { margin-bottom: 40px; }

.gallery-section .item {
  text-align: center;
  margin: 5px;
}

.gallery-section .slick-dots {
  position: unset;
  bottom: 0;
}

.gallery-section .slick-dots li {
  background-color: #6699cc;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  margin: 0 10px;
  transition: all 0.3s ease;
}

.gallery-section .slick-dots li.slick-active,
.gallery-section .slick-dots li:hover {
  background-color: #006699;
}

.gallery-section .slick-dots li button { display: none; }

.contact-section {
  background-color: #6699cc;
  flex-direction: column;
  justify-content: center;
}

.contact-section .title { margin-bottom: 50px; }

.contact-section .title h3 {
  color: #fff;
  font-size: 34px;
}

.contact-section .contact-form .form-group { margin-bottom: 24px; }
.tm-contact-item-inner { max-width: 360px; }
.tm-contact-item-inner-2 { max-width: 330px; }

.tm-contact-item-inner,
.tm-contact-item-inner-2 {
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 767px) {
  .contact-section .contact-details { margin-bottom: 30px; }
}

.contact-section .contact-details p {
  color: #fff;
  line-height: 31px;
  margin-bottom: 38px;
}

.contact-section .contact-details ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

.contact-section .contact-details ul li {
  color: #fff;
  margin-bottom: 4px;
}

.contact-section .contact-details ul li .icn {
  margin-right: 10px;
  display: inline-block;
  width: 30px;
  text-align: center;
}

.contact-section .contact-details ul li .lbl {
  display: inline-block;
  max-width: 55px;
  width: 100%;
}

.contact-section .contact-details ul li a {
  color: #fff;
  text-decoration: none;
}

.contact-section .contact-details ul li a:hover { color: #99ccff; }
.contact-section .map { text-align: center; }

.map-outer{
  position:relative;
  height:400px;
  width:100%;
}

.gmap-canvas {
  overflow:hidden;
  background:none!important;
  height:400px;
  width:100%;
}

/* <<< footer >>> */
.footer {
  position: relative;
  background-color: #6699cc;
  color: #fff;
  padding-top: 15px;
  padding-bottom: 15px;
  position: static;
  margin-top: 30px;
  /* <<< Dummy Side >>> */
}

@media (min-height: 600px){  
  .contact-section { position: relative; }

  .footer {
    position: absolute;
    bottom: 0;
    left: 60px;
  }
}

@media (max-width: 1300px) {
  .contact-section {
    height: auto;
    min-height: 100vh;
    padding-top: 50px;
  }

  .contact-form,
  .contact-details {
    width: 50%;
  }

  .map { width: 100%; }
}

.container {
  padding-left: 50px;
  padding-right: 50px;
}
.container-2 { max-width: 1250px; }

@media (max-width: 1800px) {
  .footer { left: 15px; }
  .container-2 { max-width: 1150px; }
}

@media (max-width: 1733px) {
  .footer {
    left: 0;
    padding-top: 30px;
  }
}

.parallax-window { background: transparent; }

@media (max-width: 991px) {
  .section {
    height: auto;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .banner-section { padding-top: 0; }
  .contact-section { padding-bottom: 0; }
}

@media (max-width: 620px) {
  .contact-form, .contact-details { width: 100%; }

  .contact-details { margin-bottom: 50px!important; }
}







/* =================================================================== 
 * Calvin Main Stylesheet
 * Template Ver. 1.0.0
 * 10-07-2020
 * ------------------------------------------------------------------
 *
 * TOC:
 * # settings and variables
 *      ## fonts
 *      ## colors
 *      ## vertical spacing and typescale
 *      ## grid variables
 *  # normalize
 *  # basic/base setup styles
 *      ## media
 *      ## typography resets
 *      ## links
 *      ## inputs
 *  # Grid v3.0.0
 *      ## medium screen devices
 *      ## tablets
 *      ## mobile devices
 *      ## small mobile devices <= 400px
 *  # block grids
 *      ## block grids - medium screen devices
 *      ## block grids - tablets
 *      ## block grids - mobile devices 
 *      ## block grids - small mobile devices <= 400px
 *  # MISC
 *  # custom grid, block grid STACK breakpoints
 *  # base style overrides
 *      ## links
 *  # typography & general theme styles
 *      ## lists
 *      ## responsive video container
 *      ## floated image
 *      ## tables
 *      ## spacing
 *  # preloader
 *      ## page loaded
 *  # forms
 *      ## style placeholder text
 *      ## change autocomplete styles in Chrome 
 *  # buttons
 *  # additional components
 *      ## additional typo styles
 *      ## skillbars
 *      ## alert box
 *      ## pagination
 *  # common and reusable styles
 *      ## animation stuff
 *      ## close button for search & mobile nav
 *      ## bricks masonry
 *      ## masonry entries
 *  # site header
 *      ## header logo
 *      ## main navigation
 *      ## header-toggle
 *      ## header-search
 *      ## search triggers
 *  # hero
 *      ## hero slider
 *      ## hero social
 *      ## hero slider nav arrows
 *  # content wrap
 *      ## pageheader
 *      ## content media
 *      ## content entry header
 *      ## content primary
 *  # footer
 *      ## footer main
 *      ## footer bottom
 *      ## go top
 *  # blog styles and blog components
 *      ## blog comments 
 *
 * ------------------------------------------------------------------ */


/* ===================================================================
 * # settings and variables
 *
 * ------------------------------------------------------------------- */

/* ------------------------------------------------------------------- 
 * ## fonts
 * ------------------------------------------------------------------- */
 @import url("https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=DM+Serif+Text&family=Inter:wght@300;400;500;600;700&display=swap");

 :root {
     --font-1: "Inter", sans-serif;
     --font-2: "DM Serif Text", serif;
     --font-3: "DM Serif Display", serif;
 
     /* monospace
      */
     --font-mono: Consolas, "Andale Mono", Courier, "Courier New", monospace;
 }
 
 /* ------------------------------------------------------------------- 
  * ## colors
  * ------------------------------------------------------------------- */
 :root {
 
     /* color-1(#0A369D)
      * color-2(#C1292E)
      */
     --color-1: hsla(222, 88%, 33%, 1);
     --color-2: hsla(358, 65%, 46%, 1);
 
     /* theme color variations
      */
     --color-1-lighter: hsla(222, 88%, 53%, 1);
     --color-1-light  : hsla(222, 88%, 43%, 1);
     --color-1-dark   : hsla(222, 88%, 23%, 1);
     --color-1-darker : hsla(222, 88%, 13%, 1);
     --color-2-lighter: hsla(358, 65%, 66%, 1);
     --color-2-light  : hsla(358, 65%, 56%, 1);
     --color-2-dark   : hsla(358, 65%, 36%, 1);
     --color-2-darker : hsla(358, 65%, 26%, 1);
 
     /* feedback colors
      * color-error(#ffd1d2), color-success(#c8e675), 
      * color-info(#d7ecfb), color-notice(#fff099)
      */
     --color-error          : hsla(359, 100%, 91%, 1);
     --color-success        : hsla(76, 69%, 68%, 1);
     --color-info           : hsla(205, 82%, 91%, 1);
     --color-notice         : hsla(51, 100%, 80%, 1);
     --color-error-content  : hsla(359, 50%, 50%, 1);
     --color-success-content: hsla(76, 29%, 28%, 1);
     --color-info-content   : hsla(205, 32%, 31%, 1);
     --color-notice-content : hsla(51, 30%, 30%, 1);
 
     /* shades 
      * generated using 
      * Tint & Shade Generator 
      * (https://maketintsandshades.com/)
      */
     --color-black  : #000000;
     --color-gray-19: #0a0a0a;
     --color-gray-18: #141414;
     --color-gray-17: #1e1e1e;
     --color-gray-16: #282828;
     --color-gray-15: #323333;
     --color-gray-14: #3b3d3d;
     --color-gray-13: #454747;
     --color-gray-12: #4f5151;
     --color-gray-11: #595b5b;
     --color-gray-10: #636565;
     --color-gray-9 : #737474;
     --color-gray-8 : #828484;
     --color-gray-7 : #929393;
     --color-gray-6 : #a1a3a3;
     --color-gray-5 : #b1b2b2;
     --color-gray-4 : #c1c1c1;
     --color-gray-3 : #d0d1d1;
     --color-gray-2 : #e0e0e0;
     --color-gray-1 : #eff0f0;
     --color-white  : #ffffff;
 
     /* text
      */
     --color-text: var(--color-gray-16);
     --color-text-dark: var(--color-black);
     --color-text-light: var(--color-gray-7);
     --color-placeholder: var(--color-gray-7);
 
     /* buttons
      */
     --color-btn: var(--color-gray-3);
     --color-btn-text: var(--color-black);
     --color-btn-hover: var(--color-black);
     --color-btn-hover-text: var(--color-white);
     --color-btn-primary: var(--color-black);
     --color-btn-primary-text: var(--color-white);
     --color-btn-primary-hover: var(--color-gray-16);
     --color-btn-primary-hover-text: var(--color-white);
     --color-btn-stroke: var(--color-black);
     --color-btn-stroke-text: var(--color-black);
     --color-btn-stroke-hover: var(--color-black);
     --color-btn-stroke-hover-text: var(--color-white);
 
     /* others
      */
     --color-bg: var(--color-gray-1);
     --color-border: #eeeeee;
 }
 
 /* ------------------------------------------------------------------- 
  * ## vertical spacing and typescale
  * ------------------------------------------------------------------- */
 :root {
 
     /* spacing
      * base font size: 18px 
      * vertical space unit : 32px
      */
     --base-size: 62.5%;
     --base-font-size: 1.8rem;
     --space: 3.2rem;
 
     /* vertical spacing 
      */
     --vspace-0_125: calc(0.125 * var(--space));
     --vspace-0_25 : calc(0.25 * var(--space));
     --vspace-0_5  : calc(0.5 * var(--space));
     --vspace-0_75 : calc(0.75 * var(--space));
     --vspace-0_875: calc(0.875 * var(--space));
     --vspace-1    : calc(var(--space));
     --vspace-1_25 : calc(1.25 * var(--space));
     --vspace-1_5  : calc(1.5 * var(--space));
     --vspace-1_75 : calc(1.75 * var(--space));
     --vspace-2    : calc(2 * var(--space));
     --vspace-2_5  : calc(2.5 * var(--space));
     --vspace-3    : calc(3 * var(--space));
     --vspace-3_5  : calc(3.5 * var(--space));
     --vspace-4    : calc(4 * var(--space));
     --vspace-4_5  : calc(4.5 * var(--space));
     --vspace-5    : calc(5 * var(--space));
 
     /* type scale
      * ratio 1:2 | base: 18px
      * -------------------------------------------------------
      *
      * --text-display-3 = (77.40px)
      * --text-display-2 = (64.50px)
      * --text-display-1 = (53.75px)
      * --text-xxxl      = (44.79px)
      * --text-xxl       = (37.32px)
      * --text-xl        = (31.10px)
      * --text-lg        = (25.92px)
      * --text-md        = (21.60px)
      * --text-size      = (18.00px) BASE
      * --text-sm        = (15.00px)
      * --text-xs        = (12.50px)
      *
      * -------------------------------------------------------
      */
     --text-scale-ratio: 1.2;
     --text-size       : var(--base-font-size);
     --text-xs         : calc((var(--text-size) / var(--text-scale-ratio)) / var(--text-scale-ratio));
     --text-sm         : calc(var(--text-xs) * var(--text-scale-ratio));
     --text-md         : calc(var(--text-sm) * var(--text-scale-ratio) * var(--text-scale-ratio));
     --text-lg         : calc(var(--text-md) * var(--text-scale-ratio));
     --text-xl         : calc(var(--text-lg) * var(--text-scale-ratio));
     --text-xxl        : calc(var(--text-xl) * var(--text-scale-ratio));
     --text-xxxl       : calc(var(--text-xxl) * var(--text-scale-ratio));
     --text-display-1  : calc(var(--text-xxxl) * var(--text-scale-ratio));
     --text-display-2  : calc(var(--text-display-1) * var(--text-scale-ratio));
     --text-display-3  : calc(var(--text-display-2) * var(--text-scale-ratio));
 
     /* default button height
      */
     --vspace-btn: var(--vspace-2);
 }
 
 /* on mobile devices below 600px
  */
 @media screen and (max-width: 600px) {
     :root {
         --base-font-size: 1.7rem;
         --space: 2.8rem;
     }
 }
 
 /* ------------------------------------------------------------------- 
  * ## grid variables
  * ------------------------------------------------------------------- */
 :root {
 
     /* widths for rows and containers
      */
     --width-full    : 100%;
     --width-max     : 1200px;
     --width-wide    : 1400px;
     --width-wider   : 1600px;
     --width-widest  : 1800px;
     --width-narrow  : 1000px;
     --width-narrower: 800px;
     --width-grid-max: var(--width-max);
 
     /* gutters
      */
     --gutter-lg : 2.4rem;
     --gutter-md : 2rem;
     --gutter-mob: 1rem;
 }
 
 
 /* ==========================================================================
  * # normalize
  * normalize.css v8.0.1 | MIT License |
  * github.com/necolas/normalize.css
  *
  * -------------------------------------------------------------------------- */
 
 /* ------------------------------------------------------------------- 
  * ## document
  * ------------------------------------------------------------------- */
 
 /* 1. Correct the line height in all browsers.
  * 2. Prevent adjustments of font size after orientation changes in iOS.*/
 
 html {
     line-height: 1.15;
     /* 1 */
     -webkit-text-size-adjust: 100%;
     /* 2 */
 }
 
 /* ------------------------------------------------------------------- 
  * ## sections
  * ------------------------------------------------------------------- */
 
 /* Remove the margin in all browsers. */
 
 body {
     margin: 0;
 }
 
 /* Render the `main` element consistently in IE. */
 
 main {
     display: block;
 }
 
 /* Correct the font size and margin on `h1` elements within `section` and
  * `article` contexts in Chrome, Firefox, and Safari. */
 
 h1 {
     font-size: 2em;
     margin: 0.67em 0;
 }
 
 /* ------------------------------------------------------------------- 
  * ## grouping
  * ------------------------------------------------------------------- */
 
 /* 1. Add the correct box sizing in Firefox.
  * 2. Show the overflow in Edge and IE. */
 
 hr {
     -webkit-box-sizing: content-box;
     box-sizing: content-box;
     /* 1 */
     height: 0;
     /* 1 */
     overflow: visible;
     /* 2 */
 }
 
 /* 1. Correct the inheritance and scaling of font size in all browsers.
  * 2. Correct the odd `em` font sizing in all browsers. */
 
 pre {
     font-family: monospace, monospace;
     /* 1 */
     font-size: 1em;
     /* 2 */
 }
 
 /* ------------------------------------------------------------------- 
  * ## text-level semantics
  * ------------------------------------------------------------------- */
 
 /* Remove the gray background on active links in IE 10. */
 
 a {
     background-color: transparent;
 }
 
 /* 1. Remove the bottom border in Chrome 57-
  * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */
 
 abbr[title] {
     border-bottom: none;
     /* 1 */
     text-decoration: underline;
     /* 2 */
     -webkit-text-decoration: underline dotted;
     text-decoration: underline dotted;
     /* 2 */
 }
 
 /* Add the correct font weight in Chrome, Edge, and Safari. */
 
 b, strong {
     font-weight: bolder;
 }
 
 /* 1. Correct the inheritance and scaling of font size in all browsers.
  * 2. Correct the odd `em` font sizing in all browsers. */
 
 code, kbd, samp {
     font-family: monospace, monospace;
     /* 1 */
     font-size: 1em;
     /* 2 */
 }
 
 /* Add the correct font size in all browsers. */
 
 small {
     font-size: 80%;
 }
 
 /* Prevent `sub` and `sup` elements from affecting the line height in
  * all browsers. */
 
 sub, sup {
     font-size: 75%;
     line-height: 0;
     position: relative;
     vertical-align: baseline;
 }
 
 sub {
     bottom: -0.25em;
 }
 
 sup {
     top: -0.5em;
 }
 
 /* ------------------------------------------------------------------- 
  * ## embedded content
  * ------------------------------------------------------------------- */
 
 /* Remove the border on images inside links in IE 10. */
 
 img {
     border-style: none;
 }
 
 /* ------------------------------------------------------------------- 
  * ## forms
  * ------------------------------------------------------------------- */
 
 /* 1. Change the font styles in all browsers.
  * 2. Remove the margin in Firefox and Safari. */
 
 button, input, optgroup, select, textarea {
     font-family: inherit;
     /* 1 */
     font-size: 100%;
     /* 1 */
     line-height: 1.15;
     /* 1 */
     margin: 0;
     /* 2 */
 }
 
 /* Show the overflow in IE.
  * 1. Show the overflow in Edge. */
 
 button, input {
     /* 1 */
     overflow: visible;
 }
 
 /* Remove the inheritance of text transform in Edge, Firefox, and IE.
  * 1. Remove the inheritance of text transform in Firefox. */
 
 button, select {
     /* 1 */
     text-transform: none;
 }
 
 /* Correct the inability to style clickable types in iOS and Safari. */
 
 button, [type="button"], [type="reset"], [type="submit"] {
     -webkit-appearance: button;
 }
 
 /* Remove the inner border and padding in Firefox. */
 
 button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
     border-style: none;
     padding: 0;
 }
 
 /* Restore the focus styles unset by the previous rule. */
 
 button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {
     outline: 1px dotted ButtonText;
 }
 
 /* Correct the padding in Firefox. */
 
 fieldset {
     padding: 0.35em 0.75em 0.625em;
 }
 
 /* 1. Correct the text wrapping in Edge and IE.
  * 2. Correct the color inheritance from `fieldset` elements in IE.
  * 3. Remove the padding so developers are not caught out when they zero out
  *    `fieldset` elements in all browsers. */
 
 legend {
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     /* 1 */
     color: inherit;
     /* 2 */
     display: table;
     /* 1 */
     max-width: 100%;
     /* 1 */
     padding: 0;
     /* 3 */
     white-space: normal;
     /* 1 */
 }
 
 /* Add the correct vertical alignment in Chrome, Firefox, and Opera. */
 
 progress {
     vertical-align: baseline;
 }
 
 /* Remove the default vertical scrollbar in IE 10+. */
 
 textarea {
     overflow: auto;
 }
 
 /* 1. Add the correct box sizing in IE 10.
  * 2. Remove the padding in IE 10. */
 
 [type="checkbox"], [type="radio"] {
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     /* 1 */
     padding: 0;
     /* 2 */
 }
 
 /* Correct the cursor style of increment and decrement buttons in Chrome. */
 
 [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
     height: auto;
 }
 
 /* 1. Correct the odd appearance in Chrome and Safari.
  * 2. Correct the outline style in Safari. */
 
 [type="search"] {
     -webkit-appearance: textfield;
     /* 1 */
     outline-offset: -2px;
     /* 2 */
 }
 
 /* Remove the inner padding in Chrome and Safari on macOS. */
 
 [type="search"]::-webkit-search-decoration {
     -webkit-appearance: none;
 }
 
 /* 1. Correct the inability to style clickable types in iOS and Safari.
  * 2. Change font properties to `inherit` in Safari. */
 
 ::-webkit-file-upload-button {
     -webkit-appearance: button;
     /* 1 */
     font: inherit;
     /* 2 */
 }
 
 /* ------------------------------------------------------------------- 
  * ## interactive
  * ------------------------------------------------------------------- */
 
 /* Add the correct display in Edge, IE 10+, and Firefox. */
 
 details {
     display: block;
 }
 
 /* Add the correct display in all browsers. */
 
 summary {
     display: list-item;
 }
 
 /* ------------------------------------------------------------------- 
  * ## misc
  * ------------------------------------------------------------------- */
 
 /* Add the correct display in IE 10+. */
 
 template {
     display: none;
 }
 
 /* Add the correct display in IE 10. */
 
 [hidden] {
     display: none;
 }
 
 
 /* ===================================================================
  * # basic/base setup styles
  *
  * ------------------------------------------------------------------- */
 html {
     font-size: 62.5%;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
 }
 
 *, *::before, *::after {
     -webkit-box-sizing: inherit;
     box-sizing: inherit;
 }
 
 body {
     font-weight: normal;
     line-height: 1;
     word-wrap: break-word;
     -moz-font-smoothing: grayscale;
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
     -webkit-overflow-scrolling: touch;
     -webkit-text-size-adjust: none;
 }
 
 /* ------------------------------------------------------------------- 
  * ## media
  * ------------------------------------------------------------------- */
 svg, img, video embed, iframe, object {
     max-width: 100%;
     height: auto;
 }
 
 /* ------------------------------------------------------------------- 
  * ## typography resets
  * ------------------------------------------------------------------- */
 div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, th, td {
     margin: 0;
     padding: 0;
 }
 
 p {
     font-size: inherit;
     text-rendering: optimizeLegibility;
 }
 
 em, i {
     font-style: italic;
     line-height: inherit;
 }
 
 strong, b {
     font-weight: bold;
     line-height: inherit;
 }
 
 small {
     font-size: 60%;
     line-height: inherit;
 }
 
 ol, ul {
     list-style: none;
 }
 
 li {
     display: block;
 }
 
 /* ------------------------------------------------------------------- 
  * ## links
  * ------------------------------------------------------------------- */
 a {
     text-decoration: none;
     line-height: inherit;
 }
 
 a img {
     border: none;
 }
 
 /* ------------------------------------------------------------------- 
  * ## inputs
  * ------------------------------------------------------------------- */
 fieldset {
     margin: 0;
     padding: 0;
 }
 
 input[type="email"], 
 input[type="number"], 
 input[type="search"], 
 input[type="text"], 
 input[type="tel"], 
 input[type="url"], 
 input[type="password"], 
 textarea {
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
 }
 
 
 /* ===================================================================
  * # Grid v3.0.0
  *
  *   -----------------------------------------------------------------
  * - Grid breakpoints are based on MAXIMUM WIDTH media queries, 
  *   meaning they apply to that one breakpoint and ALL THOSE BELOW IT.
  * - Grid columns without a specified width will automatically layout 
  *   as equal width columns.
  * ------------------------------------------------------------------- */
 
 /* rows
  * ------------------------------------- */
 .row {
     width: 92%;
     max-width: var(--width-grid-max);
     margin: 0 auto;
     display: -ms-flexbox;
     display: -webkit-box;
     display: flex;
     -ms-flex-flow: row wrap;
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;
     flex-flow: row wrap;
 }
 
 .row .row {
     width: auto;
     max-width: none;
     margin-left: calc(var(--gutter-lg) * -1);
     margin-right: calc(var(--gutter-lg) * -1);
 }
 
 /* columns
  * -------------------------------------- */
 .column {
     -ms-flex: 1 1 0%;
     -webkit-box-flex: 1;
     flex: 1 1 0%;
     padding: 0 var(--gutter-lg);
 }
 
 .collapse>.column, .column.collapse {
     padding: 0;
 }
 
 /* flex row containers utility classes
  */
 .row.row-wrap {
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
 }
 
 .row.row-nowrap {
     -ms-flex-wrap: none;
     flex-wrap: nowrap;
 }
 
 .row.row-y-top {
     -ms-flex-align: start;
     -webkit-box-align: start;
     align-items: flex-start;
 }
 
 .row.row-y-bottom {
     -ms-flex-align: end;
     -webkit-box-align: end;
     align-items: flex-end;
 }
 
 .row.row-y-center {
     -ms-flex-align: center;
     -webkit-box-align: center;
     align-items: center;
 }
 
 .row.row-stretch {
     -ms-flex-align: stretch;
     -webkit-box-align: stretch;
     align-items: stretch;
 }
 
 .row.row-baseline {
     -ms-flex-align: baseline;
     -webkit-box-align: baseline;
     align-items: baseline;
 }
 
 .row.row-x-left {
     -ms-flex-pack: start;
     -webkit-box-pack: start;
     justify-content: flex-start;
 }
 
 .row.row-x-right {
     -ms-flex-pack: end;
     -webkit-box-pack: end;
     justify-content: flex-end;
 }
 
 .row.row-x-center {
     -ms-flex-pack: center;
     -webkit-box-pack: center;
     justify-content: center;
 }
 
 /* flex item utility alignment classes
  */
 .align-center {
     margin: auto;
     -webkit-align-self: center;
     -ms-flex-item-align: center;
     -ms-grid-row-align: center;
     align-self: center;
 }
 
 .align-left {
     margin-right: auto;
     -webkit-align-self: center;
     -ms-flex-item-align: center;
     -ms-grid-row-align: center;
     align-self: center;
 }
 
 .align-right {
     margin-left: auto;
     -webkit-align-self: center;
     -ms-flex-item-align: center;
     -ms-grid-row-align: center;
     align-self: center;
 }
 
 .align-x-center {
     margin-right: auto;
     margin-left: auto;
 }
 
 .align-x-left {
     margin-right: auto;
 }
 
 .align-x-right {
     margin-left: auto;
 }
 
 .align-y-center {
     -webkit-align-self: center;
     -ms-flex-item-align: center;
     -ms-grid-row-align: center;
     align-self: center;
 }
 
 .align-y-top {
     -webkit-align-self: flex-start;
     -ms-flex-item-align: start;
     align-self: flex-start;
 }
 
 .align-y-bottom {
     -webkit-align-self: flex-end;
     -ms-flex-item-align: end;
     align-self: flex-end;
 }
 
 /* large screen column widths 
  */
 .large-1 {
     -ms-flex: 0 0 8.33333%;
     -webkit-box-flex: 0;
     flex: 0 0 8.33333%;
     max-width: 8.33333%;
 }
 
 .large-2 {
     -ms-flex: 0 0 16.66667%;
     -webkit-box-flex: 0;
     flex: 0 0 16.66667%;
     max-width: 16.66667%;
 }
 
 .large-3 {
     -ms-flex: 0 0 25%;
     -webkit-box-flex: 0;
     flex: 0 0 25%;
     max-width: 25%;
 }
 
 .large-4 {
     -ms-flex: 0 0 33.33333%;
     -webkit-box-flex: 0;
     flex: 0 0 33.33333%;
     max-width: 33.33333%;
 }
 
 .large-5 {
     -ms-flex: 0 0 41.66667%;
     -webkit-box-flex: 0;
     flex: 0 0 41.66667%;
     max-width: 41.66667%;
 }
 
 .large-6 {
     -ms-flex: 0 0 50%;
     -webkit-box-flex: 0;
     flex: 0 0 50%;
     max-width: 50%;
 }
 
 .large-7 {
     -ms-flex: 0 0 58.33333%;
     -webkit-box-flex: 0;
     flex: 0 0 58.33333%;
     max-width: 58.33333%;
 }
 
 .large-8 {
     -ms-flex: 0 0 66.66667%;
     -webkit-box-flex: 0;
     flex: 0 0 66.66667%;
     max-width: 66.66667%;
 }
 
 .large-9 {
     -ms-flex: 0 0 75%;
     -webkit-box-flex: 0;
     flex: 0 0 75%;
     max-width: 75%;
 }
 
 .large-10 {
     -ms-flex: 0 0 83.33333%;
     -webkit-box-flex: 0;
     flex: 0 0 83.33333%;
     max-width: 83.33333%;
 }
 
 .large-11 {
     -ms-flex: 0 0 91.66667%;
     -webkit-box-flex: 0;
     flex: 0 0 91.66667%;
     max-width: 91.66667%;
 }
 
 .large-12 {
     -ms-flex: 0 0 100%;
     -webkit-box-flex: 0;
     flex: 0 0 100%;
     max-width: 100%;
 }
 
 /* ------------------------------------------------------------------- 
  * ## medium screen devices
  * ------------------------------------------------------------------- */
 @media screen and (max-width: 1200px) {
     .row .row {
         margin-left: calc(var(--gutter-md) * -1);
         margin-right: calc(var(--gutter-md) * -1);
     }
     .column {
         padding: 0 var(--gutter-md);
     }
     .medium-1 {
         -ms-flex: 0 0 8.33333%;
         -webkit-box-flex: 0;
         flex: 0 0 8.33333%;
         max-width: 8.33333%;
     }
     .medium-2 {
         -ms-flex: 0 0 16.66667%;
         -webkit-box-flex: 0;
         flex: 0 0 16.66667%;
         max-width: 16.66667%;
     }
     .medium-3 {
         -ms-flex: 0 0 25%;
         -webkit-box-flex: 0;
         flex: 0 0 25%;
         max-width: 25%;
     }
     .medium-4 {
         -ms-flex: 0 0 33.33333%;
         -webkit-box-flex: 0;
         flex: 0 0 33.33333%;
         max-width: 33.33333%;
     }
     .medium-5 {
         -ms-flex: 0 0 41.66667%;
         -webkit-box-flex: 0;
         flex: 0 0 41.66667%;
         max-width: 41.66667%;
     }
     .medium-6 {
         -ms-flex: 0 0 50%;
         -webkit-box-flex: 0;
         flex: 0 0 50%;
         max-width: 50%;
     }
     .medium-7 {
         -ms-flex: 0 0 58.33333%;
         -webkit-box-flex: 0;
         flex: 0 0 58.33333%;
         max-width: 58.33333%;
     }
     .medium-8 {
         -ms-flex: 0 0 66.66667%;
         -webkit-box-flex: 0;
         flex: 0 0 66.66667%;
         max-width: 66.66667%;
     }
     .medium-9 {
         -ms-flex: 0 0 75%;
         -webkit-box-flex: 0;
         flex: 0 0 75%;
         max-width: 75%;
     }
     .medium-10 {
         -ms-flex: 0 0 83.33333%;
         -webkit-box-flex: 0;
         flex: 0 0 83.33333%;
         max-width: 83.33333%;
     }
     .medium-11 {
         -ms-flex: 0 0 91.66667%;
         -webkit-box-flex: 0;
         flex: 0 0 91.66667%;
         max-width: 91.66667%;
     }
     .medium-12 {
         -ms-flex: 0 0 100%;
         -webkit-box-flex: 0;
         flex: 0 0 100%;
         max-width: 100%;
     }
 }
 
 /* ------------------------------------------------------------------- 
  * ## tablets
  * ------------------------------------------------------------------- */
 @media screen and (max-width: 800px) {
     .row {
         width: 90%;
     }
     .tab-1 {
         -ms-flex: 0 0 8.33333%;
         -webkit-box-flex: 0;
         flex: 0 0 8.33333%;
         max-width: 8.33333%;
     }
     .tab-2 {
         -ms-flex: 0 0 16.66667%;
         -webkit-box-flex: 0;
         flex: 0 0 16.66667%;
         max-width: 16.66667%;
     }
     .tab-3 {
         -ms-flex: 0 0 25%;
         -webkit-box-flex: 0;
         flex: 0 0 25%;
         max-width: 25%;
     }
     .tab-4 {
         -ms-flex: 0 0 33.33333%;
         -webkit-box-flex: 0;
         flex: 0 0 33.33333%;
         max-width: 33.33333%;
     }
     .tab-5 {
         -ms-flex: 0 0 41.66667%;
         -webkit-box-flex: 0;
         flex: 0 0 41.66667%;
         max-width: 41.66667%;
     }
     .tab-6 {
         -ms-flex: 0 0 50%;
         -webkit-box-flex: 0;
         flex: 0 0 50%;
         max-width: 50%;
     }
     .tab-7 {
         -ms-flex: 0 0 58.33333%;
         -webkit-box-flex: 0;
         flex: 0 0 58.33333%;
         max-width: 58.33333%;
     }
     .tab-8 {
         -ms-flex: 0 0 66.66667%;
         -webkit-box-flex: 0;
         flex: 0 0 66.66667%;
         max-width: 66.66667%;
     }
     .tab-9 {
         -ms-flex: 0 0 75%;
         -webkit-box-flex: 0;
         flex: 0 0 75%;
         max-width: 75%;
     }
     .tab-10 {
         -ms-flex: 0 0 83.33333%;
         -webkit-box-flex: 0;
         flex: 0 0 83.33333%;
         max-width: 83.33333%;
     }
     .tab-11 {
         -ms-flex: 0 0 91.66667%;
         -webkit-box-flex: 0;
         flex: 0 0 91.66667%;
         max-width: 91.66667%;
     }
     .tab-12 {
         -ms-flex: 0 0 100%;
         -webkit-box-flex: 0;
         flex: 0 0 100%;
         max-width: 100%;
     }
     .hide-on-tablet {
         display: none;
     }
 }
 
 /* ------------------------------------------------------------------- 
  * ## mobile devices
  * ------------------------------------------------------------------- */
 @media screen and (max-width: 600px) {
     .row {
         width: 100%;
         padding-left: 6vw;
         padding-right: 6vw;
     }
     .row .row {
         margin-left: calc(var(--gutter-mob) * -1);
         margin-right: calc(var(--gutter-mob) * -1);
         padding-left: 0;
         padding-right: 0;
     }
     .column {
         padding: 0 var(--gutter-mob);
     }
     .mob-1 {
         -ms-flex: 0 0 8.33333%;
         -webkit-box-flex: 0;
         flex: 0 0 8.33333%;
         max-width: 8.33333%;
     }
     .mob-2 {
         -ms-flex: 0 0 16.66667%;
         -webkit-box-flex: 0;
         flex: 0 0 16.66667%;
         max-width: 16.66667%;
     }
     .mob-3 {
         -ms-flex: 0 0 25%;
         -webkit-box-flex: 0;
         flex: 0 0 25%;
         max-width: 25%;
     }
     .mob-4 {
         -ms-flex: 0 0 33.33333%;
         -webkit-box-flex: 0;
         flex: 0 0 33.33333%;
         max-width: 33.33333%;
     }
     .mob-5 {
         -ms-flex: 0 0 41.66667%;
         -webkit-box-flex: 0;
         flex: 0 0 41.66667%;
         max-width: 41.66667%;
     }
     .mob-6 {
         -ms-flex: 0 0 50%;
         -webkit-box-flex: 0;
         flex: 0 0 50%;
         max-width: 50%;
     }
     .mob-7 {
         -ms-flex: 0 0 58.33333%;
         -webkit-box-flex: 0;
         flex: 0 0 58.33333%;
         max-width: 58.33333%;
     }
     .mob-8 {
         -ms-flex: 0 0 66.66667%;
         -webkit-box-flex: 0;
         flex: 0 0 66.66667%;
         max-width: 66.66667%;
     }
     .mob-9 {
         -ms-flex: 0 0 75%;
         -webkit-box-flex: 0;
         flex: 0 0 75%;
         max-width: 75%;
     }
     .mob-10 {
         -ms-flex: 0 0 83.33333%;
         -webkit-box-flex: 0;
         flex: 0 0 83.33333%;
         max-width: 83.33333%;
     }
     .mob-11 {
         -ms-flex: 0 0 91.66667%;
         -webkit-box-flex: 0;
         flex: 0 0 91.66667%;
         max-width: 91.66667%;
     }
     .mob-12 {
         -ms-flex: 0 0 100%;
         -webkit-box-flex: 0;
         flex: 0 0 100%;
         max-width: 100%;
     }
     .hide-on-mobile {
         display: none;
     }
 }
 
 /* ------------------------------------------------------------------- 
  * ## small mobile devices <= 400px
  * ------------------------------------------------------------------- */
 @media screen and (max-width: 400px) {
     .row .row {
         margin-left: 0;
         margin-right: 0;
     }
     .column {
         -ms-flex: 0 0 100%;
         -webkit-box-flex: 0;
         flex: 0 0 100%;
         max-width: 100%;
         margin-left: 0;
         margin-right: 0;
         padding: 0;
     }
     .hide-on-mobile-small {
         display: none;
     }
 }
 
 
 /* ===================================================================
  * # block grids
  *
  * -------------------------------------------------------------------
  * Equally-sized columns define at parent/row level.
  * ------------------------------------------------------------------- */
 .block-large-1-8>.column {
     -ms-flex: 0 0 12.5%;
     -webkit-box-flex: 0;
     flex: 0 0 12.5%;
     max-width: 12.5%;
 }
 
 .block-large-1-6>.column {
     -ms-flex: 0 0 16.66667%;
     -webkit-box-flex: 0;
     flex: 0 0 16.66667%;
     max-width: 16.66667%;
 }
 
 .block-large-1-5>.column {
     -ms-flex: 0 0 20%;
     -webkit-box-flex: 0;
     flex: 0 0 20%;
     max-width: 20%;
 }
 
 .block-large-1-4>.column {
     -ms-flex: 0 0 25%;
     -webkit-box-flex: 0;
     flex: 0 0 25%;
     max-width: 25%;
 }
 
 .block-large-1-3>.column {
     -ms-flex: 0 0 33.33333%;
     -webkit-box-flex: 0;
     flex: 0 0 33.33333%;
     max-width: 33.33333%;
 }
 
 .block-large-1-2>.column {
     -ms-flex: 0 0 50%;
     -webkit-box-flex: 0;
     flex: 0 0 50%;
     max-width: 50%;
 }
 
 .block-large-full>.column {
     -ms-flex: 0 0 100%;
     -webkit-box-flex: 0;
     flex: 0 0 100%;
     max-width: 100%;
 }
 
 /* ------------------------------------------------------------------- 
  * ## block grids - medium screen devices
  * ------------------------------------------------------------------- */
 @media screen and (max-width: 1200px) {
     .block-medium-1-8>.column {
         -ms-flex: 0 0 12.5%;
         -webkit-box-flex: 0;
         flex: 0 0 12.5%;
         max-width: 12.5%;
     }
     .block-medium-1-6>.column {
         -ms-flex: 0 0 16.66667%;
         -webkit-box-flex: 0;
         flex: 0 0 16.66667%;
         max-width: 16.66667%;
     }
     .block-medium-1-5>.column {
         -ms-flex: 0 0 20%;
         -webkit-box-flex: 0;
         flex: 0 0 20%;
         max-width: 20%;
     }
     .block-medium-1-4>.column {
         -ms-flex: 0 0 25%;
         -webkit-box-flex: 0;
         flex: 0 0 25%;
         max-width: 25%;
     }
     .block-medium-1-3>.column {
         -ms-flex: 0 0 33.33333%;
         -webkit-box-flex: 0;
         flex: 0 0 33.33333%;
         max-width: 33.33333%;
     }
     .block-medium-1-2>.column {
         -ms-flex: 0 0 50%;
         -webkit-box-flex: 0;
         flex: 0 0 50%;
         max-width: 50%;
     }
     .block-medium-full>.column {
         -ms-flex: 0 0 100%;
         -webkit-box-flex: 0;
         flex: 0 0 100%;
         max-width: 100%;
     }
 }
 
 /* ------------------------------------------------------------------- 
  * ## block grids - tablets
  * ------------------------------------------------------------------- */
 @media screen and (max-width: 800px) {
     .block-tab-1-8>.column {
         -ms-flex: 0 0 12.5%;
         -webkit-box-flex: 0;
         flex: 0 0 12.5%;
         max-width: 12.5%;
     }
     .block-tab-1-6>.column {
         -ms-flex: 0 0 16.66667%;
         -webkit-box-flex: 0;
         flex: 0 0 16.66667%;
         max-width: 16.66667%;
     }
     .block-tab-1-5>.column {
         -ms-flex: 0 0 20%;
         -webkit-box-flex: 0;
         flex: 0 0 20%;
         max-width: 20%;
     }
     .block-tab-1-4>.column {
         -ms-flex: 0 0 25%;
         -webkit-box-flex: 0;
         flex: 0 0 25%;
         max-width: 25%;
     }
     .block-tab-1-3>.column {
         -ms-flex: 0 0 33.33333%;
         -webkit-box-flex: 0;
         flex: 0 0 33.33333%;
         max-width: 33.33333%;
     }
     .block-tab-1-2>.column {
         -ms-flex: 0 0 50%;
         -webkit-box-flex: 0;
         flex: 0 0 50%;
         max-width: 50%;
     }
     .block-tab-full>.column {
         -ms-flex: 0 0 100%;
         -webkit-box-flex: 0;
         flex: 0 0 100%;
         max-width: 100%;
     }
 }
 
 /* ------------------------------------------------------------------- 
  * ## block grids - mobile devices 
  * ------------------------------------------------------------------- */
 @media screen and (max-width: 600px) {
     .block-mob-1-8>.column {
         -ms-flex: 0 0 12.5%;
         -webkit-box-flex: 0;
         flex: 0 0 12.5%;
         max-width: 12.5%;
     }
     .block-mob-1-6>.column {
         -ms-flex: 0 0 16.66667%;
         -webkit-box-flex: 0;
         flex: 0 0 16.66667%;
         max-width: 16.66667%;
     }
     .block-mob-1-5>.column {
         -ms-flex: 0 0 20%;
         -webkit-box-flex: 0;
         flex: 0 0 20%;
         max-width: 20%;
     }
     .block-mob-1-4>.column {
         -ms-flex: 0 0 25%;
         -webkit-box-flex: 0;
         flex: 0 0 25%;
         max-width: 25%;
     }
     .block-mob-1-3>.column {
         -ms-flex: 0 0 33.33333%;
         -webkit-box-flex: 0;
         flex: 0 0 33.33333%;
         max-width: 33.33333%;
     }
     .block-mob-1-2>.column {
         -ms-flex: 0 0 50%;
         -webkit-box-flex: 0;
         flex: 0 0 50%;
         max-width: 50%;
     }
     .block-mob-full>.column {
         -ms-flex: 0 0 100%;
         -webkit-box-flex: 0;
         flex: 0 0 100%;
         max-width: 100%;
     }
 }
 
 /* ------------------------------------------------------------------- 
  * ## block grids - small mobile devices <= 400px
  * ------------------------------------------------------------------- */
 @media screen and (max-width: 400px) {
     .stack>.column {
         -ms-flex: 0 0 100%;
         -webkit-box-flex: 0;
         flex: 0 0 100%;
         max-width: 100%;
         margin-left: 0;
         margin-right: 0;
         padding: 0;
     }
 }
 
 
 /* ===================================================================
  * # MISC
  *
  * ------------------------------------------------------------------- */
 .h-group:after {
     content: "";
     display: table;
     clear: both;
 }
 
 /* misc helper classes
  */
 .is-hidden {
     display: none;
 }
 
 .is-invisible {
     visibility: hidden;
 }
 
 .h-screen-reader-text {
     clip: rect(1px, 1px, 1px, 1px);
     -webkit-clip-path: inset(50%);
     clip-path: inset(50%);
     height: 1px;
     width: 1px;
     margin: -1px;
     overflow: hidden;
     padding: 0;
     border: 0;
     position: absolute;
 }
 
 .h-antialiased {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }
 
 .h-overflow-hidden {
     overflow: hidden;
 }
 
 .h-remove-top {
     margin-top: 0;
 }
 
 .h-remove-bottom {
     margin-bottom: 0;
 }
 
 .h-add-half-bottom {
     margin-bottom: var(--vspace-0_5) !important;
 }
 
 .h-add-bottom {
     margin-bottom: var(--vspace-1) !important;
 }
 
 .h-no-border {
     border: none;
 }
 
 .h-full-width {
     width: 100%;
 }
 
 .h-text-center {
     text-align: center;
 }
 
 .h-text-left {
     text-align: left;
 }
 
 .h-text-right {
     text-align: right;
 }
 
 .h-pull-left {
     float: left;
 }
 
 .h-pull-right {
     float: right;
 }
 
 
 /* ===================================================================
  * # custom grid, block grid STACK breakpoints
  *
  * ------------------------------------------------------------------- */
 @media screen and (max-width: 1000px) {
     .w-1000-stack, .block-1000-stack>.column {
         -ms-flex: 0 0 100%;
         -webkit-box-flex: 0;
         flex: 0 0 100%;
         max-width: 100%;
     }
 }
 
 @media screen and (max-width: 700px) {
     .w-700-stack, .block-700-stack>.column {
         -ms-flex: 0 0 100%;
         -webkit-box-flex: 0;
         flex: 0 0 100%;
         max-width: 100%;
     }
 }
 
 @media screen and (max-width: 500px) {
     .w-500-stack, .block-500-stack>.column {
         -ms-flex: 0 0 100%;
         -webkit-box-flex: 0;
         flex: 0 0 100%;
         max-width: 100%;
     }
 }
 
 
 /* ===================================================================
  * # base style overrides
  *
  * ------------------------------------------------------------------- */
 html {
     font-size: var(--base-size);
 }
 
 html, body {
     height: 100%;
 }
 
 body {
     background: var(--color-bg);
     font-family: var(--font-1);
     font-size: var(--text-size);
     font-style: normal;
     font-weight: normal;
     line-height: var(--vspace-1);
     color: var(--color-text);
     margin: 0;
     padding: 0;
 }
 
 /* ------------------------------------------------------------------- 
  * ## links
  * ------------------------------------------------------------------- */
 a {
     color: var(--color-1);
     -webkit-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
 }
 
 a:hover, a:focus, a:active {
     color: var(--color-2);
 }
 
 a:hover, a:active {
     outline: 0;
 }
 
 /* ===================================================================
  * # typography & general theme styles
  * 
  * ------------------------------------------------------------------- */
 
 /* type scale - ratio 1:2 | base: 18px
  * -------------------------------------------------------------------
  * --text-display-3 = (77.40px)
  * --text-display-2 = (64.50px)
  * --text-display-1 = (53.75px)
  * --text-xxxl      = (44.79px)
  * --text-xxl       = (37.32px)
  * --text-xl        = (31.10px)
  * --text-lg        = (25.92px)
  * --text-md        = (21.60px)
  * --text-size      = (18.00px) BASE
  * --text-sm        = (15.00px)
  * --text-xs        = (12.50px)
  * -------------------------------------------------------------------- */
 
 h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
     font-weight: 400;
     font-style: normal;
     color: var(--color-text-dark);
     -webkit-font-variant-ligatures: common-ligatures;
     font-variant-ligatures: common-ligatures;
     text-rendering: optimizeLegibility;
 }
 
 h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 {
     font-family: var(--font-2);
 }
 
 h6, .h6 {
     font-family: var(--font-1);
 }
 
 h1, .h1 {
     margin-top: var(--vspace-3);
     margin-bottom: var(--vspace-0_75);
 }
 
 h2, .h2, h3, .h3, h4, .h4 {
     margin-top: var(--vspace-2_5);
     margin-bottom: var(--vspace-0_5);
 }
 
 h5, .h5, h6, .h6 {
     margin-top: var(--vspace-1_5);
     margin-bottom: var(--vspace-0_5);
 }
 
 h1, .h1 {
     font-size: var(--text-display-1);
     line-height: calc(var(--vspace-1_75) + var(--vspace-0_125));
 }
 
 @media screen and (max-width: 600px) {
     h1, .h1 {
         font-size: var(--text-xxxl);
         line-height: var(--vspace-1_75);
     }
 }
 
 h2, .h2 {
     font-size: var(--text-xxl);
     line-height: calc(var(--vspace-1_25) + var(--vspace-0_125));
 }
 
 h3, .h3 {
     font-size: var(--text-xl);
     line-height: var(--vspace-1_25);
 }
 
 h4, .h4 {
     font-size: var(--text-lg);
     line-height: var(--vspace-1);
 }
 
 h5, .h5 {
     font-size: var(--text-md);
     line-height: calc(0.875 * var(--space));
 }
 
 h6, .h6 {
     font-size: var(--text-sm);
     font-weight: 600;
     line-height: var(--vspace-0_75);
     text-transform: uppercase;
     letter-spacing: .2em;
 }
 
 .lead, .attention-getter {
     font-weight: 300;
     font-size: var(--text-md);
     line-height: calc(1.125 * var(--space));
     color: var(--color-text-dark);
 }
 
 @media screen and (max-width: 400px) {
     .lead, .attention-getter {
         font-size: calc(var(--text-size) * 1.0556);
     }
 }
 
 figure img, p img {
     margin: 0;
     vertical-align: bottom;
 }
 
 em, i, strong, b {
     font-size: inherit;
     line-height: inherit;
 }
 
 em, i {
     font-family: var(--font-1);
     font-style: italic;
 }
 
 strong, b {
     font-family: var(--font-1);
     font-weight: 600;
     color: var(--color-text-dark);
 }
 
 small {
     font-size: var(--text-sm);
     font-weight: 500;
     line-height: var(--vspace-0_5);
 }
 
 blockquote {
     margin: 0 0 var(--vspace-1) 0;
     padding: var(--vspace-1) var(--vspace-1_5);
     border-left: 4px solid black;
     position: relative;
 }
 
 @media screen and (max-width: 400px) {
     blockquote {
         padding: var(--vspace-0_75) var(--vspace-0_75);
     }
 }
 
 blockquote p {
     font-family: var(--font-1);
     font-size: var(--text-lg);
     font-weight: 400;
     font-style: normal;
     line-height: var(--vspace-1_25);
     color: var(--color-text-dark);
     padding: 0;
 }
 
 blockquote cite {
     display: block;
     font-family: var(--font-1);
     font-weight: 400;
     font-size: var(--text-sm);
     line-height: var(--vspace-0_75);
     font-style: normal;
 }
 
 blockquote cite:before {
     content: "\2014 \0020";
 }
 
 blockquote cite, 
 blockquote cite a, 
 blockquote cite a:visited {
     color: var(--color-text-light);
     border: none;
 }
 
 figure {
     display: block;
     margin-left: 0;
     margin-right: 0;
 }
 
 figure img+figcaption {
     margin-top: var(--vspace-1);
 }
 
 figcaption {
     font-size: var(--text-sm);
     text-align: center;
     margin-bottom: 0;
 }
 
 var, kbd, samp, code, pre {
     font-family: var(--font-mono);
 }
 
 pre {
     padding: var(--vspace-0_75) var(--vspace-1) var(--vspace-1);
     background: var(--color-gray-1);
     overflow-x: auto;
 }
 
 code {
     font-size: var(--text-sm);
     line-height: 1.6rem;
     margin: 0 .2rem;
     padding: calc(((var(--vspace-1) - 1.6rem) / 2) - .1rem) calc(.8rem - .1rem);
     white-space: nowrap;
     background: var(--color-gray-1);
     border: 1px solid var(--color-gray-3);
     color: var(--color-text);
     border-radius: 3px;
 }
 
 pre>code {
     display: block;
     white-space: pre;
     line-height: var(--vspace-1);
     padding: 0;
     margin: 0;
     border: none;
 }
 
 del {
     text-decoration: line-through;
 }
 
 abbr {
     font-family: var(--font-1);
     font-weight: 400;
     font-variant: small-caps;
     text-transform: lowercase;
     letter-spacing: .1em;
 }
 
 abbr[title], dfn[title] {
     border-bottom: 1px dotted;
     cursor: help;
     text-decoration: none;
 }
 
 mark {
     background: var(--color-notice);
     color: var(--color-black);
 }
 
 hr {
     border: solid var(--color-border);
     border-width: .1rem 0 0;
     clear: both;
     margin: var(--vspace-2) 0 calc(var(--vspace-2) - .1rem);
     height: 0;
 }
 
 hr.fancy {
     border: none;
     margin: var(--vspace-2) 0;
     height: var(--vspace-1);
     text-align: center;
 }
 
 hr.fancy::before {
     content: "*****";
     letter-spacing: .3em;
 }
 
 /* ------------------------------------------------------------------- 
  * ## 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: 1.6rem 0 1.6rem 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: var(--vspace-0_25);
     height: var(--vspace-0_25);
     border-radius: 50%;
     background: var(--color-1-dark);
     position: absolute;
     left: -.9em;
     top: .65em;
     vertical-align: middle;
 }
 
 dt {
     margin: 0;
     color: var(--color-1);
 }
 
 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.h-pull-right {
     margin: var(--vspace-0_5) 0 var(--vspace-0_5) 2.8rem;
 }
 
 img.h-pull-left {
     margin: var(--vspace-0_5) 2.8rem var(--vspace-0_5) 0;
 }
 
 /* ------------------------------------------------------------------- 
  * ## tables
  * ------------------------------------------------------------------- */
 
 table {
     border-width: 0;
     width: 100%;
     max-width: 100%;
     font-family: var(--font-1);
     border-collapse: collapse;
 }
 
 th, td {
     padding: var(--vspace-0_5) 3.2rem calc(var(--vspace-0_5) - .1rem);
     text-align: left;
     border-bottom: 1px solid var(--color-border);
 }
 
 th {
     padding: var(--vspace-0_5) 3.2rem;
     color: var(--color-text-dark);
     font-family: var(--font-1);
     font-weight: 600;
 }
 
 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
  * ------------------------------------------------------------------- */
 fieldset, button, .btn {
     margin-bottom: var(--vspace-0_5);
 }
 
 input, 
 textarea, 
 select, 
 pre, 
 blockquote, 
 figure, 
 figcaption, 
 table, 
 p, 
 ul, 
 ol, 
 dl, 
 form, 
 img, 
 .video-container, 
 .ss-custom-select {
     margin-bottom: var(--vspace-1);
 }
 
 
 /* =================================================================== 
  * # preloader
  *
  * ------------------------------------------------------------------- */
 #preloader {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     display: -ms-flexbox;
     display: -webkit-box;
     display: flex;
     -ms-flex-flow: row wrap;
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;
     flex-flow: row wrap;
     -ms-flex-pack: center;
     -webkit-box-pack: center;
     justify-content: center;
     -ms-flex-line-pack: center;
     align-content: center;
     background: black;
     z-index: 500;
     height: 100vh;
     width: 100%;
     opacity: 1;
 }
 
 .no-js #preloader, .oldie #preloader {
     display: none;
 }
 
 #loader {
     width: var(--vspace-1_5);
     height: var(--vspace-1_5);
     padding: 0;
     opacity: 1;
 }
 
 #loader:before {
     content: "";
     border-top: 4px solid rgba(255, 255, 255, 0.15);
     border-right: 4px solid rgba(255, 255, 255, 0.15);
     border-bottom: 4px solid rgba(255, 255, 255, 0.15);
     border-left: 4px solid white;
     -webkit-animation: load 1.1s infinite linear;
     animation: load 1.1s infinite linear;
     display: block;
     border-radius: 50%;
     width: var(--vspace-1_5);
     height: var(--vspace-1_5);
 }
 
 @-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);
     }
 }
 
 /* ------------------------------------------------------------------- 
  * ## page loaded
  * ------------------------------------------------------------------- */
 .ss-loaded #preloader {
     opacity: 0;
     visibility: hidden;
     -webkit-transition: all .6s .9s ease-in-out;
     transition: all .6s .9s ease-in-out;
 }
 
 .ss-loaded #preloader #loader {
     opacity: 0;
     -webkit-transition: opacity .6s ease-in-out;
     transition: opacity .6s ease-in-out;
 }
 
 
 /* ===================================================================
  * # 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 {
     --input-height: var(--vspace-2);
     --input-line-height: var(--vspace-1);
     --input-vpadding: calc((var(--input-height) - var(--input-line-height)) / 2);
     display: block;
     height: var(--input-height);
     padding: var(--input-vpadding) 0 calc(var(--input-vpadding) - .1rem);
     border: 0;
     outline: none;
     color: var(--color-text);
     font-family: var(--font-1);
     font-size: calc(var(--text-size) * 0.7778);
     line-height: var(--input-line-height);
     max-width: 100%;
     background: transparent;
     border-bottom: 1px solid var(--color-gray-8);
     -webkit-transition: all .3s ease-in-out;
     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 var(--color-black);
     border-right: 2px solid var(--color-black);
     content: '';
     display: block;
     height: 8px;
     width: 8px;
     margin-top: -7px;
     pointer-events: none;
     position: absolute;
     right: 2.4rem;
     top: 50%;
     -webkit-transition: all 0.15s ease-in-out;
     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: var(--color-black);
     border-bottom: 2px solid var(--color-black);
 }
 
 label, legend {
     font-family: var(--font-1);
     font-weight: 700;
     font-size: var(--text-sm);
     line-height: var(--vspace-0_5);
     margin-bottom: var(--vspace-0_5);
     color: var(--color-text-dark);
     display: block;
 }
 
 input[type="checkbox"], input[type="radio"] {
     display: inline;
 }
 
 label>.label-text {
     display: inline-block;
     margin-left: 1rem;
     font-family: var(--font-1);
     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: var(--color-placeholder);
 }
 
 :-ms-input-placeholder {
     /* Internet Explorer 10-11 */
     color: var(--color-placeholder);
 }
 
 ::-ms-input-placeholder {
     /* Microsoft Edge */
     color: var(--color-placeholder);
 }
 
 ::placeholder {
     /* Most modern browsers support this now. */
     color: var(--color-placeholder);
 }
 
 .placeholder {
     color: var(--color-placeholder) !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: var(--color-1);
     -webkit-transition: background-color 5000s ease-in-out 0s;
     transition: background-color 5000s ease-in-out 0s;
 }
 
 
 /* ===================================================================
  * # buttons
  *
  * ------------------------------------------------------------------- */
 .btn, 
 button, 
 input[type="submit"], 
 input[type="reset"], 
 input[type="button"] {
     --btn-height: var(--vspace-btn);
     display: inline-block;
     font-family: var(--font-1);
     font-weight: 400;
     font-size: var(--text-xs);
     text-transform: uppercase;
     letter-spacing: .4em;
     height: var(--btn-height);
     line-height: calc(var(--btn-height) - .4rem);
     padding: 0 3.2rem;
     margin: 0 .4rem 1.6rem 0;
     color: var(--color-btn-text);
     text-decoration: none;
     text-align: center;
     white-space: nowrap;
     cursor: pointer;
     -webkit-transition: all .3s;
     transition: all .3s;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     background-color: var(--color-btn);
     border: 0.2rem solid var(--color-btn);
 }
 
 .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: var(--color-btn-hover);
     border-color: var(--color-btn-hover);
     color: var(--color-btn-hover-text);
     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: var(--color-btn-primary);
     border-color: var(--color-btn-primary);
     color: var(--color-btn-primary-text);
 }
 
 .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: var(--color-btn-primary-hover);
     border-color: var(--color-btn-primary-hover);
     color: var(--color-btn-primary-hover-text);
 }
 
 /* button modifiers
  * ------------------------------------------------- */
 .btn.h-full-width, button.h-full-width {
     width: 100%;
     margin-right: 0;
 }
 
 .btn--small, button.btn--small {
     --btn-height: calc(var(--vspace-btn) - 1.6rem);
 }
 
 .btn--medium, button.btn--medium {
     --btn-height: calc(var(--vspace-btn) + .8rem);
 }
 
 .btn--large, button.btn--large {
     --btn-height: calc(var(--vspace-btn) + 1.6rem);
 }
 
 .btn--stroke, button.btn--stroke {
     background: transparent !important;
     border: 0.2rem solid var(--color-btn-stroke);
     color: var(--color-btn-stroke-text);
 }
 
 .btn--stroke:hover, button.btn--stroke:hover {
     background: var(--color-btn-stroke-hover) !important;
     border: 0.2rem solid var(--color-btn-stroke-hover);
     color: var(--color-btn-stroke-hover-text);
 }
 
 .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:first-letter {
     float: left;
     font-family: var(--font-1);
     font-weight: 700;
     font-size: calc(3 * var(--space));
     line-height: 1;
     padding: 0 0.125em 0 0;
     text-transform: uppercase;
     background: transparent;
     color: var(--color-text-dark);
 }
 
 /* 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:
  *
  * <figure class="pull-quote">
  *		<blockquote>
  *			<p></p>
  *		</blockquote>
  * </figure>
  *
  * --------------------------------------------------------------------- */
 .pull-quote {
     position: relative;
     padding: 0;
     margin-top: 0;
     text-align: center;
     background-color: var(--color-gray-1);
 }
 
 .pull-quote blockquote {
     border: none;
     margin: 0 auto;
     max-width: 62rem;
     padding-top: var(--vspace-4);
     padding-bottom: var(--vspace-2);
     position: relative;
 }
 
 .pull-quote blockquote p {
     font-weight: 400;
     color: var(--color-text-dark);
 }
 
 .pull-quote blockquote:before {
     content: "";
     display: block;
     height: var(--vspace-1_25);
     width: var(--vspace-1_25);
     background-repeat: no-repeat;
     background: center center;
     background-size: contain;
     background-image: url(../images/icons/icon-quote.svg);
     -webkit-transform: translate3d(-50%, 0, 0);
     transform: translate3d(-50%, 0, 0);
     position: absolute;
     top: var(--vspace-1_5);
     left: 50%;
 }
 
 /** 
  * 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: var(--vspace-1) 0;
 }
 
 .stats-tabs li {
     display: inline-block;
     margin: 0 1.6rem var(--vspace-0_5) 0;
     padding: 0 1.5rem 0 0;
     border-right: 1px solid var(--color-border);
 }
 
 .stats-tabs li:last-child {
     margin: 0;
     padding: 0;
     border: none;
 }
 
 .stats-tabs li a {
     display: inline-block;
     font-size: var(--text-lg);
     font-family: var(--font-1);
     font-weight: 700;
     line-height: var(--vspace-1_5);
     border: none;
     color: var(--color-black);
 }
 
 .stats-tabs li a:hover {
     color: var(--color-1);
 }
 
 .stats-tabs li a em {
     display: block;
     margin: 0;
     font-family: var(--font-1);
     font-size: var(--text-sm);
     line-height: var(--vspace-0_5);
     font-weight: normal;
     font-style: normal;
     color: var(--color-text-light);
 }
 
 /* ------------------------------------------------------------------- 
  * ## skillbars
  * ------------------------------------------------------------------- */
 .skill-bars {
     list-style: none;
     margin: var(--vspace-2) 0 var(--vspace-1);
 }
 
 .skill-bars li {
     height: .4rem;
     background: var(--color-gray-3);
     width: 100%;
     margin-bottom: calc(var(--vspace-2) - .4rem);
     padding: 0;
     position: relative;
 }
 
 .skill-bars li strong {
     position: absolute;
     left: 0;
     top: calc((var(--vspace-1) * 1.25) * -1);
     font-family: var(--font-1);
     font-weight: 500;
     color: white;
     text-transform: uppercase;
     letter-spacing: .2em;
     font-size: calc(var(--text-size) * 0.7778);
     line-height: calc(0.75 * var(--space));
 }
 
 .skill-bars li .progress {
     background: var(--color-black);
     position: relative;
     height: 100%;
 }
 
 .skill-bars li .progress span {
     position: absolute;
     right: 0;
     top: calc((var(--vspace-1) + .8rem)* -1);
     display: block;
     font-family: var(--font-1);
     color: white;
     font-size: 1rem;
     line-height: 1;
     background: var(--color-black);
     padding: calc(0.25 * var(--space)) calc(0.25 * var(--space));
     border-radius: 4px;
 }
 
 .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: var(--color-black, var(--color-black));
     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: var(--vspace-0_75) 4rem var(--vspace-0_75) 3.2rem;
     margin-bottom: var(--vspace-1);
     border-radius: 4px;
     font-family: var(--font-1);
     font-weight: 500;
     font-size: var(--text-sm);
     line-height: var(--vspace-0_75);
     opacity: 1;
     visibility: visible;
     position: relative;
 }
 
 .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: var(--color-error);
     color: var(--color-error-content);
 }
 
 .alert-box--error .alert-box__close::before, 
 .alert-box--error .alert-box__close::after {
     background-color: var(--color-error-content);
 }
 
 .alert-box--success {
     background-color: var(--color-success);
     color: var(--color-success-content);
 }
 
 .alert-box--success .alert-box__close::before, 
 .alert-box--success .alert-box__close::after {
     background-color: var(--color-success-content);
 }
 
 .alert-box--info {
     background-color: var(--color-info);
     color: var(--color-info-content);
 }
 
 .alert-box--info .alert-box__close::before, 
 .alert-box--info .alert-box__close::after {
     background-color: var(--color-info-content);
 }
 
 .alert-box--notice {
     background-color: var(--color-notice);
     color: var(--color-notice-content);
 }
 
 .alert-box--notice .alert-box__close::before, 
 .alert-box--notice .alert-box__close::after {
     background-color: var(--color-notice-content);
 }
 
 .alert-box.hideit {
     opacity: 0;
     visibility: hidden;
     -webkit-transition: all .5s;
     transition: all .5s;
 }
 
 /* -------------------------------------------------------------------
  * ## pagination
  * ------------------------------------------------------------------- */
 .pgn {
     --pgn-num-height: calc(var(--vspace-1) + .4rem);
     margin: var(--vspace-1_5) auto var(--vspace-2);
     text-align: center;
 }
 
 .pgn ul {
     display: -ms-inline-flexbox;
     display: -webkit-inline-box;
     display: inline-flex;
     -ms-flex-flow: row wrap;
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;
     flex-flow: row wrap;
     -ms-flex-pack: center;
     -webkit-box-pack: center;
     justify-content: center;
     list-style: none;
     margin-left: 0;
     padding: 0 8.8rem;
     text-align: center;
     position: relative;
 }
 
 .pgn ul li {
     margin: 0;
     padding: 0;
 }
 
 .pgn__num, .pgn__prev, .pgn__next {
     position: relative;
 }
 
 .pgn__num::after, .pgn__prev::after, .pgn__next::after {
     content: "";
     display: block;
     background-color: black;
     height: 2px;
     width: 0;
     -webkit-transition: width, .3s, ease-in-out;
     transition: width, .3s, ease-in-out;
     position: absolute;
     left: 0;
     bottom: 0;
 }
 
 .pgn__num {
     font-family: var(--font-1);
     font-weight: 400;
     font-size: var(--text-size);
     line-height: var(--vspace-1);
     display: inline-block;
     padding: .2rem 1.2rem;
     height: var(--pgn-num-height);
     margin: .2rem .4rem;
     color: var(--color-text-dark);
     -webkit-transition: all, .3s, ease-in-out;
     transition: all, .3s, ease-in-out;
 }
 
 .pgn__num:not(.dots):hover {
     color: black;
 }
 
 .pgn__num:not(.dots):hover::after {
     width: 100%;
 }
 
 .pgn .current {
     background-color: var(--color-gray-18);
     color: var(--color-white);
 }
 
 .pgn .current::after {
     display: none;
 }
 
 .pgn .current:hover {
     color: white;
 }
 
 .pgn .disabled, 
 .pgn .inactive, 
 .pgn .inactive:hover {
     opacity: 0.4;
     cursor: default;
 }
 
 .pgn .disabled::after, 
 .pgn .inactive::after, 
 .pgn .inactive:hover::after {
     display: none;
 }
 
 .pgn__prev, .pgn__next {
     font-family: var(--font-1);
     font-weight: 400;
     font-size: var(--text-size);
     color: black;
     display: -ms-inline-flexbox;
     display: -webkit-inline-box;
     display: inline-flex;
     -ms-flex-flow: row wrap;
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;
     flex-flow: row wrap;
     -ms-flex-pack: center;
     -webkit-box-pack: center;
     justify-content: center;
     -ms-flex-align: center;
     -webkit-box-align: center;
     align-items: center;
     height: var(--pgn-num-height);
     line-height: var(--vspace-1);
     padding: 0;
     margin: 0;
     opacity: 1;
     cursor: pointer;
     -webkit-transition: all, .3s, ease-in-out;
     transition: all, .3s, ease-in-out;
     position: absolute;
     top: 50%;
     -webkit-transform: translate3d(0, -50%, 0);
     transform: translate3d(0, -50%, 0);
 }
 
 .pgn__prev:hover, .pgn__next:hover {
     color: black;
 }
 
 .pgn__prev:hover::after, 
 .pgn__next:hover::after {
     width: 100%;
 }
 
 .pgn__prev svg, .pgn__next svg {
     height: 2.4rem;
     width: 2.4rem;
     -webkit-transition: all, .3s, ease-in-out;
     transition: all, .3s, ease-in-out;
 }
 
 .pgn__prev svg path, 
 .pgn__next svg path {
     fill: var(--color-text-dark);
 }
 
 .pgn__prev:hover svg path, 
 .pgn__prev:focus svg path, 
 .pgn__next:hover svg path, 
 .pgn__next:focus svg path {
     fill: white;
 }
 
 .pgn__prev {
     left: 0;
 }
 
 .pgn__next {
     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 6.4rem;
     }
     .pgn__num {
         margin: .2rem .2rem;
     }
 }
 
 
 /* ===================================================================
  * # common and reusable styles
  *
  * ------------------------------------------------------------------- */
 .wide {
     max-width: var(--width-wide);
 }
 
 .narrow {
     max-width: 800px;
 }
 
 .sticky-block {
     position: -webkit-sticky;
     position: sticky;
     top: 2rem;
 }
 
 /* ------------------------------------------------------------------- 
  * ## animation stuff
  * ------------------------------------------------------------------- */
 .animate-this {
     opacity: 0;
     visibility: hidden;
 }
 
 .no-js .animate-this, 
 .no-cssanimations .animate-this {
     opacity: 1;
     visibility: visible;
 }
 
 .animated {
     -webkit-animation-duration: 1s;
     animation-duration: 1s;
     -webkit-animation-fill-mode: both;
     animation-fill-mode: both;
     -webkit-animation-name: fadeInUp;
     animation-name: fadeInUp;
     -webkit-animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1);
     animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1);
 }
 
 /* fade in up */
 
 @-webkit-keyframes fadeInUp {
     from {
         opacity: 0;
         visibility: hidden;
         -webkit-transform: translate3d(0, 20%, 0);
         transform: translate3d(0, 20%, 0);
     }
     to {
         opacity: 1;
         visibility: visible;
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
     }
 }
 
 @keyframes fadeInUp {
     from {
         opacity: 0;
         visibility: hidden;
         -webkit-transform: translate3d(0, 20%, 0);
         transform: translate3d(0, 20%, 0);
     }
     to {
         opacity: 1;
         visibility: visible;
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
     }
 }
 
 /* ------------------------------------------------------------------- 
  * ## close button for search & mobile nav
  * ------------------------------------------------------------------- */
 .s-header__overlay-close {
     font: 0/0 a;
     text-shadow: none;
     color: transparent;
     display: block;
     width: 50px;
     height: 50px;
     margin-left: -25px;
     -webkit-transform: scale(0.85);
     transform: scale(0.85);
     position: absolute;
     top: var(--vspace-1);
     left: 50%;
 }
 
 .s-header__overlay-close:hover {
     -webkit-transform: scale(1);
     transform: scale(1);
 }
 
 .s-header__overlay-close::before, 
 .s-header__overlay-close::after {
     content: '';
     display: inline-block;
     width: 2px;
     height: 24px;
     top: 13px;
     left: 24px;
     background-color: white;
     position: absolute;
 }
 
 .s-header__overlay-close::before {
     -webkit-transform: rotate(45deg);
     transform: rotate(45deg);
 }
 
 .s-header__overlay-close::after {
     -webkit-transform: rotate(-45deg);
     transform: rotate(-45deg);
 }
 
 /* ------------------------------------------------------------------- 
  * ## bricks masonry
  * ------------------------------------------------------------------- */
 .s-bricks {
     --brick-padding: 4rem;
     padding-top: var(--vspace-4);
     padding-bottom: var(--vspace-2_25);
     background-color: white;
 }
 
 .s-bricks--half-top-padding {
     padding-top: var(--vspace-2);
 }
 
 .s-bricks .masonry {
     max-width: 1520px;
     width: 94%;
     margin: 0 auto var(--vspace-2);
     overflow: hidden;
 }
 
 .s-bricks .pagination {
     margin-top: 6rem;
 }
 
 .bricks-wrapper {
     position: relative;
     margin-top: calc(var(--brick-padding) * -1);
 }
 
 .bricks-wrapper .lines {
     width: 100%;
     height: 100%;
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     width: 100%;
     height: 100%;
 }
 
 .bricks-wrapper .lines span {
     height: 100%;
     width: 1px;
     background-color: var(--color-border);
     position: absolute;
     top: 0;
     bottom: 0;
 }
 
 .bricks-wrapper .lines span:nth-child(1) {
     left: 25%;
 }
 
 .bricks-wrapper .lines span:nth-child(2) {
     left: 50%;
 }
 
 .bricks-wrapper .lines span:nth-child(3) {
     left: 75%;
 }
 
 .bricks-wrapper .grid-sizer, .bricks-wrapper .brick {
     width: 25%;
 }
 
 .bricks-wrapper .brick {
     float: left;
     padding: var(--brick-padding) var(--brick-padding) 0;
     border-top: 1px solid var(--color-border);
 }
 
 /* ------------------------------------------------------------------- 
  * ## masonry entries 
  * ------------------------------------------------------------------- */
 .bricks-wrapper .entry__thumb {
     overflow: hidden;
     position: relative;
 }
 
 .bricks-wrapper .entry__thumb img {
     vertical-align: bottom;
     -webkit-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
     margin: 0;
 }
 
 .bricks-wrapper .entry__thumb .thumb-link::before {
     z-index: 1;
     content: "";
     display: block;
     background: rgba(0, 0, 0, 0.5);
     opacity: 0;
     visibility: hidden;
     width: 100%;
     height: 100%;
     -webkit-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
     position: absolute;
     top: 0;
     left: 0;
 }
 
 .bricks-wrapper .entry__thumb .thumb-link::after {
     z-index: 1;
     display: block;
     content: "...";
     font-family: georgia, serif;
     font-size: 3.2rem;
     height: 90px;
     width: 90px;
     letter-spacing: .2rem;
     line-height: 90px;
     margin-left: -45px;
     margin-top: -45px;
     text-align: center;
     color: white;
     opacity: 0;
     visibility: hidden;
     -webkit-transform: scale(0.5);
     transform: scale(0.5);
     -webkit-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
     position: absolute;
     left: 50%;
     top: 50%;
 }
 
 .bricks-wrapper .entry__thumb:hover .thumb-link::before {
     opacity: 1;
     visibility: visible;
 }
 
 .bricks-wrapper .entry__thumb:hover .thumb-link::after {
     opacity: 1;
     visibility: visible;
     -webkit-transform: scale(1);
     transform: scale(1);
 }
 
 .bricks-wrapper .entry__thumb:hover .thumb-link img {
     -webkit-transform: scale(1.05);
     transform: scale(1.05);
 }
 
 .bricks-wrapper .entry__text {
     padding: 2.8rem 0 3.6rem;
 }
 
 .bricks-wrapper .entry__title {
     font-size: var(--text-xl);
     font-weight: 400;
     line-height: calc(var(--vspace-1) + var(--vspace-0_125));
     margin-top: 0;
     margin-bottom: calc(0.375 * var(--space));
 }
 
 .bricks-wrapper .entry__title a, 
 .bricks-wrapper .entry__title a:visited {
     color: black;
 }
 
 .bricks-wrapper .entry__title a:hover, 
 .bricks-wrapper .entry__title a:focus {
     color: rgba(0, 0, 0, 0.8);
 }
 
 .bricks-wrapper .entry__meta {
     font-family: var(--font-1);
     font-weight: 400;
     font-size: calc(var(--text-size) * 0.7778);
     line-height: var(--vspace-0_75);
     margin-bottom: var(--vspace-0_75);
 }
 
 .bricks-wrapper .entry__meta a {
     color: var(--color-text-light);
 }
 
 .bricks-wrapper .entry__meta a:focus, 
 .bricks-wrapper .entry__meta a:hover {
     color: black;
 }
 
 .bricks-wrapper .entry__meta .byline, 
 .bricks-wrapper .entry__meta .cat-links {
     display: inline-block;
 }
 
 .bricks-wrapper .entry__meta .byline {
     margin-right: .8rem;
 }
 
 .bricks-wrapper .entry__meta .cat-links a::after {
     content: ", ";
 }
 
 .bricks-wrapper .entry__meta .cat-links a:last-child::after {
     display: none;
 }
 
 .bricks-wrapper .entry__excerpt {
     font-size: 1.5rem;
     line-height: 1.733;
 }
 
 .bricks-wrapper .entry__excerpt p {
     margin-bottom: var(--vspace-0_75);
 }
 
 .bricks-wrapper .entry__more-link {
     display: inline-block;
     font-size: calc(var(--text-size) * 0.6111);
     text-transform: uppercase;
     letter-spacing: .15em;
     color: black;
     border-bottom: 1px solid transparent;
 }
 
 .bricks-wrapper .entry__more-link:hover, 
 .bricks-wrapper .entry__more-link:focus {
     border-bottom: 1px solid black;
 }
 
 /* ------------------------------------------------------------------- 
  * responsive:
  * common and reusable styles
  * ------------------------------------------------------------------- */
 @media screen and (max-width: 1500px) {
     .s-bricks {
         --brick-padding: 3.4rem;
     }
 }
 
 @media screen and (max-width: 1400px) {
     .s-bricks {
         --brick-padding: 4rem;
     }
     .bricks-wrapper .lines span:nth-child(1) {
         left: 33.3333%;
     }
     .bricks-wrapper .lines span:nth-child(2) {
         left: 66.6666%;
     }
     .bricks-wrapper .lines span:nth-child(3) {
         display: none;
     }
     .bricks-wrapper .grid-sizer, .bricks-wrapper .brick {
         width: 33.3333%;
     }
 }
 
 @media screen and (max-width: 1200px) {
     .s-bricks {
         --brick-padding: 3.2rem;
     }
 }
 
 @media screen and (max-width: 1040px) {
     .s-bricks {
         --brick-padding: 4rem;
     }
     .bricks-wrapper .lines span:nth-child(1) {
         left: 50%;
     }
     .bricks-wrapper .lines span:nth-child(2) {
         display: none;
     }
     .bricks-wrapper .grid-sizer, .bricks-wrapper .brick {
         width: 50%;
     }
 }
 
 @media screen and (max-width: 800px) {
     .s-bricks {
         --brick-padding: 3.2rem;
     }
 }
 
 @media screen and (max-width: 640px) {
     .s-bricks {
         --brick-padding: 4rem;
     }
     .s-bricks .masonry {
         max-width: 500px;
     }
     .bricks-wrapper .lines {
         display: none;
     }
     .bricks-wrapper .grid-sizer, .bricks-wrapper .brick {
         width: 100%;
     }
 }
 
 @media screen and (max-width: 420px) {
     .s-bricks .masonry {
         width: 100%;
     }
     .bricks-wrapper .brick {
         padding-right: 8vw;
         padding-left: 8vw;
     }
     .bricks-wrapper .entry__title {
         font-size: calc(var(--text-size) * 1.648);
     }
 }
 
 
 /* ===================================================================
  * # site header
  *
  * ------------------------------------------------------------------- */
 .s-header {
     --header-height: 8.8rem;
     --logo-width: 96px;
     --logo-height: 24px;
     z-index: 100;
     background-color: rgba(0, 0, 0, 0.1);
     width: 100%;
     height: var(--header-height);
     border-bottom: 1px solid rgba(255, 255, 255, 0.05);
     display: -ms-flexbox;
     display: -webkit-box;
     display: flex;
     -ms-flex-align: center;
     -webkit-box-align: center;
     align-items: center;
     position: absolute;
     top: 0;
     left: 0;
 }
 
 .s-header--opaque {
     background-color: black;
 }
 
 /* -------------------------------------------------------------------
  * ## header logo
  * ------------------------------------------------------------------- */
 .s-header__logo {
     z-index: 101;
     margin: 0;
     -webkit-transform: translateY(-50%);
     transform: translateY(-50%);
     position: absolute;
     top: calc(50% - 6px);
     left: 4rem;
 }
 
 .s-header__logo a {
     display: block;
     margin: 0;
     padding: 0;
     outline: 0;
     border: none;
     -webkit-transition: all .3s;
     transition: all .3s;
 }
 
 .s-header__logo img {
     width: var(--logo-width);
     height: var(--logo-height);
     margin: 0;
     vertical-align: bottom;
 }
 
 /* -------------------------------------------------------------------
  * ## main navigation
  * ------------------------------------------------------------------- */
 .s-header__navigation {
     max-width: var(--width-wide);
     height: auto;
     padding: var(--gutter-lg);
     -ms-flex-align: center;
     -webkit-box-align: center;
     align-items: center;
     position: relative;
 }
 
 .s-header__nav-wrap {
     margin-right: auto;
 }
 
 .s-header__nav-wrap .s-header__nav-heading {
     font-family: var(--font-1);
     font-weight: 400;
     font-size: calc(var(--text-size) * 0.7778);
     letter-spacing: .4em;
     margin-top: var(--vspace-3);
     color: rgba(255, 255, 255, 0.5);
     text-align: center;
 }
 
 .s-header__nav-wrap .s-header__nav-heading, 
 .s-header__nav-wrap .close-mobile-menu {
     display: none;
 }
 
 .s-header--opaque .s-header__nav-wrap {
     margin: 0 auto;
 }
 
 .s-header__nav {
     list-style: none;
     margin: 0;
     padding: 0;
     font-family: var(--font-1);
     font-weight: 600;
     font-size: 1.5rem;
 }
 
 .s-header__nav li {
     display: inline-block;
     position: relative;
     padding: 0 1rem;
 }
 
 .s-header__nav li.has-children {
     padding-right: 2rem;
 }
 
 .s-header__nav li a {
     display: block;
     color: white;
     line-height: var(--header-height);
     position: relative;
 }
 
 .s-header__nav li.has-children>a::after {
     border-bottom: 1px solid white;
     border-right: 1px solid white;
     content: '';
     display: block;
     height: 5px;
     width: 5px;
     margin-top: -4px;
     pointer-events: none;
     -webkit-transform-origin: 66% 66%;
     transform-origin: 66% 66%;
     -webkit-transform: rotate(45deg);
     transform: rotate(45deg);
     -webkit-transition: all .3s;
     transition: all .3s;
     position: absolute;
     right: -1.2rem;
     top: calc(50% + 2px);
 }
 
 .s-header__nav li:hover>a, .s-header__nav li:focus>a {
     color: white;
 }
 
 .s-header__nav li:hover li, .s-header__nav li:focus li {
     background: transparent;
 }
 
 .s-header__nav li.current>a {
     color: white;
     font-weight: 300;
 }
 
 .s-header__nav li ul {
     z-index: 200;
     font-size: 1.4rem;
     font-weight: 400;
     margin: 0;
     padding: 1.8rem 0;
     background: #222222;
     border-radius: 0 0 4px 4px;
     -webkit-transform: translate3d(0, 15px, 0);
     transform: translate3d(0, 15px, 0);
     opacity: 0;
     visibility: hidden;
     -webkit-transition: all .5s;
     transition: all .5s;
     position: absolute;
     top: calc(100% - 1px);
     left: 0;
 }
 
 .s-header__nav li ul ul {
     position: absolute;
     top: 0;
     left: 100%;
     left: calc(100% + 1px);
     border-radius: 0 0 4px 4px;
     padding-top: 1.2rem;
 }
 
 .s-header__nav li ul li {
     display: block;
     text-align: left;
     padding: 0;
     margin: 0;
     min-height: 3.2rem;
     width: 100%;
 }
 
 .s-header__nav li ul li a {
     display: block;
     white-space: nowrap;
     padding: .7rem 3rem .7rem 2rem;
     font-family: var(--font-1);
     line-height: 1.8rem;
     color: rgba(255, 255, 255, 0.7);
 }
 
 .s-header__nav li ul li a:hover, .s-header__nav li ul li a:focus {
     color: white;
 }
 
 .s-header__nav li:hover>ul {
     opacity: 1;
     visibility: visible;
     -webkit-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
 }
 
 /* ------------------------------------------------------------------- 
  * ## header-toggle
  * ------------------------------------------------------------------- */
 .s-header__toggle-menu {
     display: none;
     width: 48px;
     height: 48px;
     -webkit-transform: translateY(-50%);
     transform: translateY(-50%);
     position: absolute;
     right: 4rem;
     top: 50%;
 }
 
 .s-header__toggle-menu span {
     display: block;
     background-color: white;
     font: 0/0 a;
     text-shadow: none;
     color: transparent;
     width: 28px;
     height: 2px;
     margin-top: -1px;
     position: absolute;
     right: 10px;
     top: 50%;
     bottom: auto;
     left: auto;
 }
 
 .s-header__toggle-menu span::before, 
 .s-header__toggle-menu span::after {
     content: '';
     width: 100%;
     height: 100%;
     position: absolute;
     background-color: inherit;
     left: 0;
 }
 
 .s-header__toggle-menu span::before {
     top: -10px;
 }
 
 .s-header__toggle-menu span::after {
     bottom: -10px;
 }
 
 /* ------------------------------------------------------------------- 
  * ## header-search
  * ------------------------------------------------------------------- */
 .s-header__search {
     z-index: 300;
     display: block;
     background: rgba(0, 0, 0, 0.3);
     opacity: 0;
     visibility: hidden;
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     width: 100%;
     height: 100%;
     -webkit-transition: all .3s .5s;
     transition: all .3s .5s;
 }
 
 .s-header__search .s-header__overlay-close {
     margin-top: -23px;
     top: 50%;
     right: 4rem;
     left: auto;
 }
 
 .s-header__search-inner {
     background-color: black;
     height: var(--header-height);
     width: 100%;
     -webkit-transform: translateY(-200%);
     transform: translateY(-200%);
     -webkit-transition: -webkit-transform 0.5s 0.3s cubic-bezier(0, 0.55, 0.45, 1);
     transition: -webkit-transform 0.5s 0.3s cubic-bezier(0, 0.55, 0.45, 1);
     transition: transform 0.5s 0.3s cubic-bezier(0, 0.55, 0.45, 1);
     transition: transform 0.5s 0.3s cubic-bezier(0, 0.55, 0.45, 1), -webkit-transform 0.5s 0.3s cubic-bezier(0, 0.55, 0.45, 1);
     -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
     box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
     position: absolute;
     top: 0;
     left: 0;
 }
 
 .s-header__search-form {
     width: 100%;
     padding: 0 var(--gutter-lg);
     margin: 0;
 }
 
 .s-header__search-form label {
     margin: 0;
 }
 
 .s-header__search-form input[type="search"] {
     --input-height: var(--header-height);
     background-color: transparent;
     color: white;
     height: auto;
     width: 100%;
     font-family: var(--font-1);
     font-weight: 400;
     font-size: var(--text-md);
     line-height: 1;
     border: transparent;
     margin: 0;
 }
 
 .s-header__search-form input[type="search"]::-webkit-search-decoration, 
 .s-header__search-form input[type="search"]::-webkit-search-cancel-button, 
 .s-header__search-form input[type="search"]::-webkit-search-results-button, 
 .s-header__search-form input[type="search"]::-webkit-search-results-decoration {
     -webkit-appearance: none;
 }
 
 .s-header__search-form input[type="search"]::-webkit-input-placeholder {
     color: white;
     opacity: 1;
 }
 
 .s-header__search-form input[type="search"]:-moz-placeholder {
     color: white;
     opacity: 1;
 }
 
 .s-header__search-form input[type="search"]::-moz-placeholder {
     color: white;
     opacity: 1;
 }
 
 .s-header__search-form input[type="search"]:-ms-input-placeholder {
     color: white;
     opacity: 1;
 }
 
 .s-header__search-form input[type="search"].placeholder {
     color: white;
     opacity: 1;
 }
 
 .s-header__search-form input[type="search"]:focus {
     outline: none;
     color: white;
 }
 
 .s-header__search-form input[type="submit"] {
     display: none;
 }
 
 body.search-is-visible {
     overflow: hidden;
 }
 
 .search-is-visible .s-header__search {
     -webkit-transition: all .3s;
     transition: all .3s;
     opacity: 1;
     visibility: visible;
 }
 
 .search-is-visible .s-header__search-inner {
     -webkit-transform: none;
     transform: none;
 }
 
 /* -------------------------------------------------------------------
  * ## search triggers
  * ------------------------------------------------------------------- */
 .s-header__search-trigger {
     width: 4rem;
     height: 4rem;
     display: -ms-flexbox;
     display: -webkit-box;
     display: flex;
     -ms-flex-align: center;
     -webkit-box-align: center;
     align-items: center;
     -ms-flex-pack: center;
     -webkit-box-pack: center;
     justify-content: center;
     -webkit-transform: translateY(-50%);
     transform: translateY(-50%);
     position: absolute;
     top: 50%;
     right: 4.4rem;
 }
 
 .s-header__search-trigger svg {
     height: 2.4rem;
     width: 2.4rem;
 }
 
 .s-header__search-trigger svg path {
     fill: white;
 }
 
 /* ------------------------------------------------------------------- 
  * responsive:
  * header
  * ------------------------------------------------------------------- */
 @media screen and (max-width: 1700px) {
     .s-header:not(.s-header--opaque) .s-header__navigation {
         margin-left: calc(var(--logo-width) + 5.2rem);
     }
 }
 
 @media screen and (max-width: 1400px) {
     .s-header__search-form {
         padding: 0 calc(var(--gutter-lg) + 3rem) 0 var(--gutter-lg);
     }
 }
 
 @media screen and (min-width: 901px) {
     .s-header__nav li.has-children:hover>a::after, 
     .s-header__nav li.has-children:focus>a::after {
         -webkit-transform: rotate(225deg);
         transform: rotate(225deg);
     }
     .s-header__nav li ul {
         display: block !important;
     }
 }
 
 @media screen and (max-width: 900px) {
     .s-header__logo {
         left: 4.4rem;
     }
     .s-header__nav-wrap {
         --color-border: var(--color-gray-1);
         z-index: 300;
         background-color: black;
         opacity: 0;
         visibility: hidden;
         position: fixed;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
         width: 100%;
         height: 100%;
         margin: 0;
         border: none;
         overflow-y: auto;
     }
     .s-header__nav-wrap .s-header__nav-heading, 
     .s-header__nav-wrap .close-mobile-menu {
         display: block;
     }
     .s-header__nav {
         counter-reset: ctr;
         font-family: var(--font-1);
         font-weight: 600;
         font-size: var(--text-md);
         margin: var(--vspace-2_5) 6rem var(--vspace-1);
         border-bottom: 1px dotted rgba(255, 255, 255, 0.05);
     }
     .s-header__nav>li::before {
         content: counter(ctr, decimal-leading-zero);
         counter-increment: ctr;
         display: inline;
         font-family: var(--font-1);
         font-weight: 300;
         font-size: var(--text-xs);
         color: rgba(255, 255, 255, 0.25);
         position: absolute;
         left: 0;
         top: 1.9em;
     }
     .s-header__nav li {
         display: block;
         padding: 0;
         text-align: left;
         position: relative;
     }
     .s-header__nav li ul {
         display: none;
         position: static;
         -webkit-box-shadow: none;
         box-shadow: none;
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
         opacity: 1;
         visibility: visible;
         background-color: transparent;
         padding: 0 0 2rem 0;
         -webkit-transition: none !important;
         transition: none !important;
     }
     .s-header__nav li.has-children>a::after {
         top: var(--vspace-1_25);
     }
     .s-header__nav li.has-children>a.sub-menu-is-open::after {
         -webkit-transform: rotate(225deg);
         transform: rotate(225deg);
     }
     .s-header__nav li ul li a {
         padding: .8rem 1.6rem .8rem 2.8rem;
     }
     .s-header__nav li.current a {
         font-weight: 600;
     }
     .s-header__nav>li {
         border-top: 1px dotted rgba(255, 255, 255, 0.05);
     }
     .s-header__nav>li a {
         line-height: var(--vspace-2_5);
         padding-left: 2.6rem;
     }
     .s-header__toggle-menu {
         display: block;
     }
     .s-header__search-trigger {
         top: calc(50% + 1px);
         right: calc(4rem + 5rem);
     }
     .s-header__search-trigger svg {
         height: 2.5rem;
         width: 2.5rem;
     }
     body.nav-wrap-is-visible {
         overflow: hidden;
     }
     .nav-wrap-is-visible .s-header__nav-wrap {
         opacity: 1;
         visibility: visible;
     }
 }
 
 @media screen and (max-width: 600px) {
     .s-header__logo {
         left: 3.6rem;
     }
     .s-header__toggle-menu {
         right: 2.8rem;
     }
     .s-header__search-trigger {
         right: calc(2.8rem + 5rem);
     }
 }
 
 @media screen and (max-width: 500px) {
     .s-header__nav {
         margin: var(--vspace-2_5) 4rem var(--vspace-1);
     }
 }
 
 @media screen and (max-width: 400px) {
     .s-header__logo {
         left: 2.8rem;
     }
     .s-header__nav-wrap .s-header__nav-heading {
         font-size: calc(var(--text-size) * 0.7778);
     }
     .s-header__nav>li::before {
         top: 1.4em;
     }
     .s-header__nav li.has-children>a::after {
         top: var(--vspace-1);
     }
     .s-header__nav>li a {
         line-height: calc(var(--vspace-2) + var(--vspace-0_125));
     }
     .s-header__toggle-menu {
         right: 2rem;
     }
     .s-header__search .s-header__overlay-close {
         right: 3rem;
     }
     .s-header__search-trigger {
         right: calc(2rem + 5rem);
     }
 }
 
 @media screen and (max-width: 360px) {
     .s-header__nav {
         margin: var(--vspace-2_5) 2.8rem var(--vspace-1);
     }
 }
 
 
 /* ===================================================================
  * # hero
  *
  * ------------------------------------------------------------------- */
 .s-hero {
     width: 100%;
     height: 100vh;
     min-height: calc(25.5 * var(--space));
     background-color: #151515;
     overflow: hidden;
     position: relative;
 }
 
 /* -------------------------------------------------------------------
  * ## hero slider
  * ------------------------------------------------------------------- */
 .s-hero__slider {
     position: relative;
 }
 
 .s-hero__slider .slick-dots {
     display: block;
     list-style: none;
     width: 92%;
     max-width: var(--width-wide);
     padding: 0 3.2rem;
     margin-left: 0;
     margin-top: -15vh;
     margin-left: auto;
     margin-right: auto;
     position: relative;
 }
 
 .s-hero__slider .slick-dots li {
     display: inline;
     padding-left: 0;
     margin-right: .8rem;
 }
 
 .s-hero__slider .slick-dots li::after {
     content: "";
     display: inline-block;
     width: 0;
     height: 1px;
     background-color: rgba(255, 255, 255, 0.5);
     -webkit-transform: translateY(-4px);
     transform: translateY(-4px);
     -webkit-transition: width 0.3s cubic-bezier(0.21, 0.97, 0.75, 0.85);
     transition: width 0.3s cubic-bezier(0.21, 0.97, 0.75, 0.85);
 }
 
 .s-hero__slider .slick-dots li button {
     display: inline-block;
     background: transparent;
     border: none;
     margin: 0;
     padding: .4rem;
     line-height: var(--vspace-1);
     height: auto;
     color: white;
     position: relative;
 }
 
 .s-hero__slider .slick-dots li button::before {
     content: "0";
 }
 
 .s-hero__slider .slick-dots li:nth-child(n+10) button::before {
     content: none;
 }
 
 .s-hero__slider .slick-dots li.slick-active::after {
     width: 32px;
     margin: 0 10px 0 4px;
 }
 
 .s-hero__slider .s-hero__slide {
     height: 100vh;
     min-height: calc(25.5 * var(--space));
     position: relative;
 }
 
 .s-hero__slide-bg {
     display: block;
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     width: 100%;
     height: 100%;
     background-size: cover;
     background-position: center center;
     background-repeat: no-repeat;
 }
 
 .s-hero__slide-bg::before {
     content: "";
     display: block;
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.4);
 }
 
 .s-hero__slide-bg::after {
     content: "";
     display: block;
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     width: 100%;
     height: 100%;
     background: -webkit-gradient(linear, left top, left bottom, color-stop(45%, rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.78)));
     background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.78) 100%);
     opacity: 0.2;
 }
 
 .s-hero__slide-content {
     height: 100%;
     max-width: var(--width-wide);
     padding-top: calc(6 * var(--space));
     padding-bottom: 20vh;
     position: relative;
 }
 
 .s-hero__slide-content>.column {
     -webkit-align-self: flex-end;
     -ms-flex-item-align: end;
     align-self: flex-end;
     -ms-flex: 0 0 55%;
     -webkit-box-flex: 0;
     flex: 0 0 55%;
     max-width: 55%;
 }
 
 .s-hero__slide-meta {
     font-weight: 400;
     font-size: var(--text-sm);
     line-height: var(--vspace-0_75);
     color: white;
     margin-bottom: var(--vspace-0_5);
 }
 
 .s-hero__slide-meta .cat-links, .s-hero__slide-meta .byline {
     display: inline-block;
     margin: 0 .8rem;
 }
 
 .s-hero__slide-meta .cat-links a::after {
     content: ", ";
 }
 
 .s-hero__slide-meta .cat-links a:last-child::after {
     display: none;
 }
 
 .s-hero__slide-meta a, .s-hero__slide-meta .author {
     font-weight: 300;
     color: rgba(255, 255, 255, 0.7);
 }
 
 .s-hero__slide-text {
     font-family: var(--font-3);
     font-size: 8.8rem;
     font-weight: 400;
     line-height: 1.091;
     letter-spacing: -.01em;
     color: white;
     margin-top: 0;
     text-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     position: relative;
 }
 
 .s-hero__slide-text a {
     color: white;
 }
 
 /* ------------------------------------------------------------------- 
  * ## hero social
  * ------------------------------------------------------------------- */
 .s-hero__social {
     font-size: var(--text-xs);
     font-weight: 400;
     color: white;
     text-align: right;
     position: absolute;
     right: 4rem;
     bottom: 15vh;
 }
 
 .s-hero__social p {
     line-height: 1;
     margin: 0;
     position: relative;
     -webkit-transform: rotate(90deg);
     transform: rotate(90deg);
 }
 
 .s-hero__social span {
     display: block;
     width: 1px;
     height: 3.6rem;
     background-color: white;
     margin: 3.6rem auto 4.8rem;
 }
 
 .s-hero__social-icons {
     list-style: none;
     margin-left: 0;
     font-size: 2.4rem;
 }
 
 .s-hero__social-icons li {
     padding-left: 0;
     margin-bottom: var(--vspace-0_75);
     text-align: center;
 }
 
 .s-hero__social-icons a {
     color: white;
 }
 
 .s-hero__social-icons a svg {
     -webkit-transform: scale(0.85);
     transform: scale(0.85);
     -webkit-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
 }
 
 .s-hero__social-icons a:hover svg, .s-hero__social-icons a:focus svg {
     -webkit-transform: scale(1);
     transform: scale(1);
 }
 
 /* ------------------------------------------------------------------- 
  * ## hero slider nav arrows
  * ------------------------------------------------------------------- */
 .s-hero__nav-arrows {
     z-index: 2;
     display: -ms-flexbox;
     display: -webkit-box;
     display: flex;
     position: absolute;
     right: 0;
     bottom: 0;
 }
 
 .s-hero__nav-arrows button {
     height: var(--vspace-1_75);
     width: var(--vspace-2);
     background-color: white;
     border-color: white;
     padding: 0;
     margin: 0;
     display: -ms-flexbox;
     display: -webkit-box;
     display: flex;
     -ms-flex-align: center;
     -webkit-box-align: center;
     align-items: center;
     -ms-flex-pack: center;
     -webkit-box-pack: center;
     justify-content: center;
 }
 
 .s-hero__nav-arrows button svg {
     height: 1.5rem;
     width: 1.5rem;
 }
 
 .s-hero__nav-arrows button svg path {
     fill: black;
 }
 
 .s-hero__nav-arrows button:hover, 
 .s-hero__nav-arrows button:focus {
     background-color: black;
     border-color: black;
 }
 
 .s-hero__nav-arrows button:hover svg path, 
 .s-hero__nav-arrows button:focus svg path {
     fill: white;
 }
 
 /* ------------------------------------------------------------------- 
  * responsive:
  * hero
  * ------------------------------------------------------------------- */
 @media screen and (max-width: 1600px) {
     .s-hero__slide-content>.column {
         -ms-flex: 0 0 50vw;
         -webkit-box-flex: 0;
         flex: 0 0 50vw;
         max-width: 50vw;
     }
     .s-hero__slide-text {
         font-size: 8rem;
     }
 }
 
 @media screen and (max-width: 1400px) {
     .s-hero__slide-text {
         font-size: 7.8rem;
     }
 }
 
 @media screen and (max-width: 1200px) {
     .s-hero__slider .slick-dots {
         padding: 0 2.4rem;
     }
     .s-hero__slide-content>.column {
         -ms-flex: 0 0 55vw;
         -webkit-box-flex: 0;
         flex: 0 0 55vw;
         max-width: 55vw;
     }
     .s-hero__slide-text {
         font-size: 7rem;
     }
 }
 
 @media screen and (max-width: 1000px) {
     .s-hero__slide-content>.column {
         -ms-flex: 0 0 70vw;
         -webkit-box-flex: 0;
         flex: 0 0 70vw;
         max-width: 70vw;
     }
     .s-hero__slide-text {
         font-size: 6.8rem;
     }
     .s-hero__social-icons li {
         margin-bottom: var(--vspace-0_5);
     }
 }
 
 @media screen and (max-width: 800px) {
     .s-hero__slider .slick-dots {
         padding: 0 3rem;
     }
     .s-hero__slide-text {
         font-size: 6rem;
     }
 }
 
 @media screen and (max-width: 600px) {
     .s-hero__slider .slick-dots {
         padding: 0 2.4rem;
     }
     .s-hero__slide-content>.column {
         -ms-flex: 0 0 75vw;
         -webkit-box-flex: 0;
         flex: 0 0 75vw;
         max-width: 75vw;
     }
     .s-hero__slide-text {
         font-size: 5.4rem;
     }
     .s-hero__social {
         font-size: 1.3rem;
         right: 2.8rem;
     }
     .s-hero__social-icons z {
         font-size: 1rem;
     }
 }
 
 @media screen and (max-width: 500px) {
     .s-hero__slider .slick-dots {
         padding: 0 2rem;
     }
     .s-hero__slide-meta {
         font-size: var(--text-sm);
     }
     .s-hero__slide-text {
         font-size: 4.6rem;
     }
     .s-hero__social {
         right: 1.6rem;
     }
 }
 
 @media screen and (max-width: 400px) {
     .s-hero__slider .slick-dots {
         padding: 0 1rem;
     }
     .s-hero__slide-content {
         padding-bottom: 24vh;
     }
     .s-hero__slide-content>.column {
         -ms-flex: 0 0 100%;
         -webkit-box-flex: 0;
         flex: 0 0 100%;
         max-width: 100%;
     }
     .s-hero__slide-text {
         font-size: 4.2rem;
     }
     .s-hero__nav-arrows button {
         height: var(--vspace-1_5);
         width: var(--vspace-1_75);
     }
     .s-hero__nav-arrows button svg {
         height: 1.2rem;
         width: 1.2rem;
     }
 }
 
 
 /* ===================================================================
  * # content wrap
  *
  * ------------------------------------------------------------------- */
 .s-content {
     --row-max-width: 1400px;
     background-color: white;
     padding-top: calc(5.5 * var(--space));
 }
 
 .s-content--no-top-padding {
     padding-top: 0;
 }
 
 .s-content .row {
     max-width: var(--row-max-width);
 }
 
 .s-content__entry {
     padding-bottom: var(--vspace-4);
 }
 
 .s-content__blocks h4 {
     margin-top: 0;
 }
 
 .s-content__form {
     margin-top: var(--vspace-2);
 }
 
 /* ------------------------------------------------------------------- 
  * ## pageheader
  * ------------------------------------------------------------------- */
 .s-pageheader {
     text-align: center;
 }
 
 .s-pageheader .row {
     max-width: 900px;
 }
 
 .s-pageheader .page-title {
     font-size: var(--text-display-2);
     line-height: calc(var(--vspace-2) + var(--vspace-0_125));
     margin-top: 0;
     margin-bottom: var(--vspace-1);
 }
 
 .s-pageheader .page-title__small-type {
     display: block;
     font-family: var(--font-1);
     font-weight: 400;
     font-size: calc(var(--text-size) * 0.8889);
     line-height: var(--vspace-0_75);
     color: var(--color-text-light);
 }
 
 /* ------------------------------------------------------------------- 
  * ## content media
  * ------------------------------------------------------------------- */
 .s-content__media {
     max-width: 1080px;
     margin: 0 auto var(--vspace-2_5);
     position: relative;
 }
 
 .s-content__media img {
     vertical-align: bottom;
     margin-bottom: 0;
 }
 
 /* ------------------------------------------------------------------- 
  * ## content entry header
  * ------------------------------------------------------------------- */
 .s-content__entry-header {
     margin-top: var(--vspace-3);
     margin-bottom: var(--vspace-3);
 }
 
 .s-content__title {
     margin-top: 0;
     letter-spacing: -.01em;
     text-align: center;
 }
 
 /* ------------------------------------------------------------------- 
  * ## content primary
  * ------------------------------------------------------------------- */
 .s-content__primary {
     display: -ms-flexbox;
     display: -webkit-box;
     display: flex;
     -ms-flex-flow: row nowrap;
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;
     flex-flow: row nowrap;
     -ms-flex-align: start;
     -webkit-box-align: start;
     align-items: flex-start;
     -ms-flex-pack: center;
     -webkit-box-pack: center;
     justify-content: center;
 }
 
 .s-content__primary img {
     margin: var(--vspace-1) 0 var(--vspace-1);
 }
 
 .s-content__entry-content {
     -ms-flex: 1 1 0%;
     -webkit-box-flex: 1;
     flex: 1 1 0%;
     padding: 0 4.8rem;
     border-right: 1px solid var(--color-border);
     border-left: 1px solid var(--color-border);
 }
 
 .s-content__page-content {
     max-width: 900px;
 }
 
 .s-content__entry-meta, .s-content__pagenav {
     -ms-flex: 0 0 210px;
     -webkit-box-flex: 0;
     flex: 0 0 210px;
     max-width: 210px;
     position: -webkit-sticky;
     position: sticky;
     top: 4rem;
 }
 
 /* entry meta
  * ------------------------------------------------ */
 .s-content__entry-meta {
     -ms-flex-order: -1;
     -webkit-box-ordinal-group: 0;
     order: -1;
     font-size: calc(var(--text-size) * 0.7778);
     font-weight: 300;
     line-height: calc(0.625 * var(--space));
     padding-right: 2.8rem;
 }
 
 .s-content__entry-meta a {
     color: var(--color-text);
 }
 
 .s-content__entry-meta a:focus, 
 .s-content__entry-meta a:hover {
     color: black;
 }
 
 .s-content__entry-meta .byline span, 
 .s-content__entry-meta .meta-blk span {
     font-size: calc(var(--text-size) * 0.6111);
     font-weight: 600;
     line-height: calc(0.375 * var(--space));
     text-transform: uppercase;
     letter-spacing: .05em;
     color: black;
 }
 
 .s-content__entry-meta .bytext, 
 .s-content__entry-meta .tagtext {
     display: block;
 }
 
 .s-content__entry-meta .entry-author {
     margin-bottom: var(--vspace-0_5);
 }
 
 .s-content__entry-meta .avatar {
     max-width: var(--vspace-5);
     margin: var(--vspace-0_25) 0 var(--vspace-0_25) 0;
 }
 
 .s-content__entry-meta .entry-cat-links {
     margin-bottom: var(--vspace-0_75);
 }
 
 .s-content__entry-meta .cat-links a::after {
     content: ", ";
 }
 
 .s-content__entry-meta .cat-links a:last-child::after {
     display: none;
 }
 
 .s-content__entry-meta .entry-tags a {
     margin-right: .4rem;
 }
 
 /* page nav
  * ------------------------------------------------ */
 .s-content__pagenav {
     font-size: var(--text-md);
     font-weight: 300;
     line-height: var(--vspace-1);
     padding-left: 3.2rem;
 }
 
 .s-content__pagenav>div {
     margin-bottom: var(--vspace-1_5);
 }
 
 .s-content__pagenav a {
     color: var(--color-text-light);
 }
 
 .s-content__pagenav a:hover, 
 .s-content__pagenav a:focus {
     color: black;
 }
 
 .s-content__pagenav span {
     display: block;
     font-size: var(--text-xs);
     font-weight: 600;
     line-height: var(--vspace-0_5);
     text-transform: uppercase;
     letter-spacing: .2em;
     color: black;
     margin-bottom: var(--vspace-0_5);
 }
 
 /* ------------------------------------------------------------------- 
  * responsive:
  * content
  * ------------------------------------------------------------------- */
 @media screen and (max-width: 1400px) {
     .s-content__entry-content {
         padding: 0 2rem;
         border: none;
     }
     .s-content__entry-meta, .s-content__pagenav {
         -ms-flex: 0 0 200px;
         -webkit-box-flex: 0;
         flex: 0 0 200px;
         max-width: 200px;
     }
     .s-content__entry-meta .avatar {
         max-width: 155px;
     }
     .s-content__pagenav {
         font-size: calc(var(--text-size) * 1.0556);
     }
 }
 
 @media screen and (max-width: 1300px) {
     .s-content__entry-content {
         padding: 0;
     }
     .s-content__entry-meta, .s-content__pagenav {
         -ms-flex: 0 0 190px;
         -webkit-box-flex: 0;
         flex: 0 0 190px;
         max-width: 190px;
     }
     .s-content__entry-meta .avatar {
         max-width: 145px;
     }
 }
 
 @media screen and (max-width: 1200px) {
     .s-content:not(.s-content--no-top-padding) {
         padding-top: calc(5 * var(--space));
     }
     .s-content__primary {
         display: block;
         padding: 0 5vw;
     }
     .s-content__entry-content {
         -ms-flex: 0 0 100%;
         -webkit-box-flex: 0;
         flex: 0 0 100%;
         max-width: 100%;
         margin-bottom: var(--vspace-1_5);
     }
     .s-content__entry-meta, .s-content__pagenav {
         position: static;
         top: auto;
     }
     .s-content__entry-meta {
         display: -ms-flexbox;
         display: -webkit-box;
         display: flex;
         max-width: none;
         padding-right: 0;
     }
     .s-content__entry-meta .entry-author {
         -ms-flex: 0 0 160px;
         -webkit-box-flex: 0;
         flex: 0 0 160px;
         max-width: 160px;
         padding-right: 4rem;
     }
     .s-content__entry-meta .avatar {
         max-width: calc(3.125 * var(--space));
     }
     .s-content__entry-meta .meta-bottom {
         margin-top: var(--vspace-0_25);
     }
     .s-content__pagenav {
         display: -ms-flexbox;
         display: -webkit-box;
         display: flex;
         font-size: var(--text-md);
         padding-top: var(--vspace-1);
         padding-left: 0;
         margin-top: var(--vspace-1_5);
         border-top: 1px solid var(--color-border);
         max-width: none;
     }
     .s-content__pagenav>div {
         -ms-flex: 0 0 50%;
         -webkit-box-flex: 0;
         flex: 0 0 50%;
         max-width: 50%;
         padding-right: 3.2rem;
         margin-bottom: 0;
     }
     .s-pageheader .page-title {
         font-size: var(--text-display-1);
         line-height: calc(var(--vspace-1_75) + var(--vspace-0_125));
     }
 }
 
 @media screen and (max-width: 1000px) {
     .s-content__entry-header {
         margin-top: var(--vspace-2);
         margin-bottom: var(--vspace-2);
     }
     .s-content__primary {
         padding: 0;
     }
 }
 
 @media screen and (max-width: 600px) {
     .s-pageheader .page-title {
         font-size: var(--text-xxxl);
         line-height: var(--vspace-1_75);
         margin-bottom: 0;
     }
 }
 
 @media screen and (max-width: 550px) {
     .s-content__pagenav {
         display: block;
     }
     .s-content__pagenav>div {
         max-width: none;
     }
     .s-content__pagenav>div:first-child {
         margin-bottom: var(--vspace-1);
     }
 }
 
 @media screen and (max-width: 400px) {
     .s-content:not(.s-content--no-top-padding) {
         padding-top: var(--vspace-4_5);
     }
     .s-content__media {
         margin-bottom: var(--vspace-1_5);
     }
     .s-content__entry-header {
         margin-top: var(--vspace-1_5);
         margin-bottom: var(--vspace-1_5);
     }
 }
 
 /* ===================================================================
  * # footer
  *
  * ------------------------------------------------------------------- */
 .s-footer {
     padding-top: var(--vspace-4);
     padding-bottom: var(--vspace-2);
     font-size: var(--text-sm);
     line-height: calc(0.8125 * var(--space));
     color: var(--color-gray-14);
 }
 
 .s-footer .row {
     max-width: 1400px;
 }
 
 .s-footer a {
     color: black;
 }
 
 .s-footer h5 {
     font-family: var(--font-1);
     font-size: var(--text-xs);
     font-weight: 400;
     text-transform: uppercase;
     letter-spacing: .2em;
     padding-bottom: var(--vspace-0_75);
     margin-bottom: var(--vspace-0_75);
     margin-top: 0;
     border-bottom: 1px solid var(--color-gray-2);
 }
 
 .s-footer ul {
     margin-left: 0;
 }
 
 .s-footer li {
     padding-left: 0;
 }
 
 /* ------------------------------------------------------------------- 
  * ## footer main
  * ------------------------------------------------------------------- */
 .s-footer__main {
     padding-bottom: var(--vspace-0_5);
 }
 
 .s-footer__main ul li {
     list-style: none;
 }
 
 .s-footer__main ul a {
     color: var(--color-gray-14);
 }
 
 .s-footer__main ul a:hover, .s-footer__main ul a:focus {
     color: black;
 }
 
 /* footer subscribe
  * -------------------------------------- */
 .s-footer__subscribe {
     margin-left: auto;
 }
 
 .s-footer__subscribe p {
     margin-bottom: var(--vspace-0_5);
 }
 
 .s-footer__subscribe .subscribe-form {
     --color-btn: black;
     --color-btn-hover: var(--color-gray-16);
 }
 
 .s-footer__subscribe .subscribe-form #mc-form {
     padding: 0;
 }
 
 .s-footer__subscribe .subscribe-form input[type="email"] {
     --input-height: vspace(1.75);
     background-color: transparent;
     border: 1px solid var(--color-text);
     padding: .8rem 2rem;
     width: 100%;
     text-align: center;
     margin-bottom: var(--vspace-0_5);
 }
 
 .s-footer__subscribe .subscribe-form input[type="submit"] {
     --btn-height: calc(var(--vspace-btn) - .8rem);
     margin-right: 0;
     width: 100%;
     color: white;
 }
 
 .s-footer__subscribe .subscribe-form .subscribe-message {
     font-family: var(--font-1);
     font-size: var(--text-sm);
     color: black;
 }
 
 .s-footer__subscribe .subscribe-form .subscribe-message i {
     color: black;
     margin-right: .4rem;
 }
 
 /* ------------------------------------------------------------------- 
  * ## footer bottom
  * ------------------------------------------------------------------- */
 
 /* copyright
  * -------------------------------------- */
 .ss-copyright {
     color: var(--color-gray-8);
 }
 
 .ss-copyright span {
     display: inline-block;
     font-size: calc(var(--text-size) * 0.7222);
     line-height: var(--vspace-0_75);
 }
 
 .ss-copyright span::after {
     content: "|";
     display: inline-block;
     padding: 0 1rem 0 1.2rem;
     color: rgba(0, 0, 0, 0.2);
 }
 
 .ss-copyright span:last-child::after {
     display: none;
 }
 
 /* ------------------------------------------------------------------- 
  * ## go top
  * ------------------------------------------------------------------- */
 .ss-go-top {
     z-index: 2;
     opacity: 0;
     visibility: hidden;
     -webkit-transform: translate3d(0, 200%, 0);
     transform: translate3d(0, 200%, 0);
     -webkit-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
     transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
     position: fixed;
     bottom: 7.2rem;
     right: 4rem;
 }
 
 .ss-go-top a {
     display: -ms-flexbox;
     display: -webkit-box;
     display: flex;
     -ms-flex-align: center;
     -webkit-box-align: center;
     align-items: center;
     -ms-flex-pack: center;
     -webkit-box-pack: center;
     justify-content: center;
     text-decoration: none;
     border: none;
     height: 6.4rem;
     width: 6.4rem;
     border-radius: 50%;
     background-color: var(--color-gray-2);
     -webkit-transition: all .3s;
     transition: all .3s;
     position: relative;
 }
 
 .ss-go-top a:hover, .ss-go-top a:focus {
     background-color: black;
 }
 
 .ss-go-top a:hover svg path, .ss-go-top a:focus svg path {
     fill: white;
 }
 
 .ss-go-top svg {
     height: 1.2rem;
     width: 1.2rem;
 }
 
 .ss-go-top svg path {
     fill: black;
 }
 
 .ss-go-top.link-is-visible {
     opacity: 1;
     visibility: visible;
     -webkit-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
 }
 
 /* responsive:
  * footer
  * ------------------------------------------------------------------- */
 @media screen and (max-width: 1200px) {
     .s-footer__subscribe {
         margin-left: 0;
     }
 }
 
 @media screen and (max-width: 800px) {
     .s-footer {
         padding-bottom: var(--vspace-1_5);
     }
     .ss-go-top {
         bottom: 5.2rem;
     }
     .ss-go-top a {
         height: 5.6rem;
         width: 5.6rem;
     }
 }
 
 @media screen and (max-width: 600px) {
     .s-footer__bottom {
         padding-bottom: .8rem;
     }
     .ss-copyright span {
         display: block;
     }
     .ss-copyright span::after {
         display: none;
     }
     .ss-go-top {
         right: 3.2rem;
     }
 }
 
 
 /* ===================================================================
  * # blog styles and blog components
  *
  * ------------------------------------------------------------------- */
 
 /* -------------------------------------------------------------------
  * ## blog comments 
  * ------------------------------------------------------------------- */
 .comments-wrap {
     padding-bottom: var(--vspace-4);
     background-color: white;
 }
 
 .comments-wrap h3 {
     text-align: center;
     margin-top: 0;
     margin-bottom: var(--vspace-0_5);
 }
 
 .comments-wrap h3 span {
     display: block;
     font-family: var(--font-1);
     font-weight: 400;
     font-size: calc(var(--text-size) * 0.8889);
     line-height: var(--vspace-0_75);
     color: var(--color-text-light);
     margin-top: calc(0.125 * var(--space));
 }
 
 /* comments
  * -------------------------------------------------- */
 #comments {
     padding-top: var(--vspace-0_5);
     padding-bottom: var(--vspace-0_5);
     max-width: 980px;
 }
 
 #comments ol, #comments ul {
     list-style: none;
 }
 
 .commentlist {
     margin: var(--vspace-2) 0 var(--vspace-1_5);
     padding: 0;
 }
 
 .commentlist>.comment {
     position: relative;
     list-style: none;
     margin: 0;
     padding: 2rem 0 0 0;
     padding-left: 14%;
 }
 
 .comment__avatar {
     position: absolute;
     left: 0;
     display: block;
 }
 
 .comment__avatar img {
     height: var(--vspace-2);
     width: var(--vspace-2);
     border-radius: 100%;
     vertical-align: bottom;
 }
 
 .comment__info {
     position: relative;
 }
 
 .comment__info .comment__author {
     font-weight: 600;
     font-size: var(--text-size);
     line-height: var(--vspace-1);
     font-style: normal;
     color: black;
 }
 
 .comment__meta {
     font-style: normal;
     line-height: var(--vspace-0_75);
     display: block;
     color: var(--color-text-light);
     text-align: right;
     width: 150px;
     position: absolute;
     top: 0;
     right: 0;
 }
 
 .comment__meta .comment__time {
     font-size: calc(var(--text-size) * 0.7778);
     text-transform: uppercase;
     letter-spacing: .1rem;
     color: var(--color-text-light);
 }
 
 .comment__meta .comment__reply a {
     font-size: var(--text-xs);
     font-family: var(--font-1);
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: .2rem;
     color: black;
 }
 
 .comment__text {
     clear: both;
     margin: var(--vspace-0_5) 0 0 0;
     padding: 0 175px 0 0;
 }
 
 .comment ul.children {
     margin: 0;
     padding: 0;
 }
 
 .comment ul.children li {
     padding-left: 5%;
     margin-top: calc(var(--vspace-1) + 2rem);
     border-left: 1px solid var(--color-border);
 }
 
 /* comments form
  * ---------------------------- */
 .comments-wrap .comment-respond {
     max-width: 900px;
     margin-top: var(--vspace-2);
 }
 
 .comment-respond form {
     padding-top: var(--vspace-1_75);
 }
 
 /* ------------------------------------------------------------------- 
  * responsive:
  * comments
  * ------------------------------------------------------------------- */
 @media screen and (max-width: 1200px) {
     #comments, .comments-wrap .comment-respond {
         max-width: none;
         padding-right: 5vw;
         padding-left: 5vw;
     }
 }
 
 @media screen and (max-width: 1000px) {
     #comments, .comments-wrap .comment-respond {
         padding-right: 0;
         padding-left: 0;
     }
     .comment__avatar img {
         height: var(--vspace-1_75);
         width: var(--vspace-1_75);
     }
     .comment__meta {
         text-align: left;
         width: auto;
         position: static;
     }
     .comment__meta .comment__time, .comment__meta .comment__reply {
         display: inline-block;
     }
     .comment__meta .comment__time {
         margin-right: 12px;
     }
     .comment__text {
         padding: 0;
     }
     .comments-wrap .comment-respond {
         margin-top: var(--vspace-1_5);
     }
 }
 
 @media screen and (max-width: 800px) {
     .comments-wrap {
         padding-bottom: var(--vspace-3);
     }
     .comment__avatar img {
         margin-top: 0;
         height: var(--vspace-1_5);
         width: var(--vspace-1_5);
     }
 }
 
 @media screen and (max-width: 600px) {
     #comments, .comments-wrap .comment-respond {
         padding-right: 6vw;
         padding-left: 6vw;
     }
     .commentlist>.comment {
         padding-top: 0;
         padding-left: 0;
     }
     .comment__avatar {
         display: none;
     }
     .comment ul.children li {
         margin-top: calc(var(--vspace-1) + 0rem);
     }
 }
 
 @media screen and (max-width: 500px) {
     .comment ul.children li {
         border-left: none;
     }
 }
 
 @media screen and (max-width: 400px) {
     .comment-respond form {
         padding-top: var(--vspace-1);
     }
 }