@charset 'utf-8'; /*—~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~.
—                                                         ▓▓╗  ▓▓╗  ▓▓▓▓▓▓╗  ▓▓▓▓▓╗  ▓▓▓▓▓▓╗   ▓▓▓▓▓▓╗ ▓▓▓▓▓▓╗
░                                                         ▓▓║  ▓▓║ ▓▓╔════╝ ▓▓╔══▓▓╗ ▓▓╔══▓▓╗ ▓▓╔════╝ ▓▓╔══▓▓╗
▒                                                         ▓▓▓▓▓▓▓║ ▓▓▓▓▓╗   ▓▓▓▓▓▓▓║ ▓▓║  ▓▓║ ▓▓▓▓▓╗   ▓▓▓▓▓▓╔╝
▓                                                         ▓▓╔══▓▓║ ▓▓╔══╝   ▓▓╔══▓▓║ ▓▓║  ▓▓║ ▓▓╔══╝   ▓▓╔══▓▓╗
█                                                         ▓▓║  ▓▓║  ▓▓▓▓▓▓╗ ▓▓║  ▓▓║ ▓▓▓▓▓▓╔╝ ╚▓▓▓▓▓▓╗ ▓▓║  ▓▓║
—                                                         ╚═╝  ╚═╝  ╚═════╝ ╚═╝  ╚═╝ ╚═════╝   ╚═════╝ ╚═╝  ╚═╝
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ G E N E R A L.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

body.nav-open {
	overflow: hidden;
}
.header {
    position: fixed;
    width: 100%;
    z-index: 50;
}
.home .fixed-header {
    position: fixed;
    width: 100%;
    z-index: 50;
}
.header{
	position: fixed;
	background: #FFF;
	min-height: 3em;
}
.header {
	padding: 1rem 0;
}
.header + .space {
	height: 4em;
}
.header ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	text-align: center;
}
.logo img{
	max-width: 100px;
}
.nav {
	padding-top: 5rem;
}
.device {
	z-index: -1000;
	display: block;
	visibility: hidden;
	width: 0px;
	height: 0px;
	pointer-events: none;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ LOGO */

.logo {
    width: 100%;
    text-align: center;
	padding: 1em 0 .5em 0;
}
.logo img{
    width: 100%;
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ N A V I G A T I O N.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.nav {
	z-index : 99;
	position: fixed;
	overflow: hidden;
	overflow-y: auto;
	width: 100%;
	height: 100%;
	right: 0;
	/*top: 5rem;*/
	padding-left: 2rem;
	padding-right: 2rem;
	background: hsla(255, 100%, 100%, 1);
	transform: translateX(100%);
	will-change: transform;
	pointer-events: none;
	-webkit-overflow-scrolling: touch;
}
.nav a {
	position: relative;
    padding: 5px 0;
    display: block;
    text-align: right;
    text-decoration: none;
	color:#000;
    font-size: 1.8rem;
    line-height: 2.4rem;
	font-weight: 300;
}

.nav li:last-child {
	padding-right: 0;
}
.nav li:first-child {
	padding-left: 0;
}
.nav-open .fixed-header .nav a,
.nav-open .nav a,
.nav a:hover{
	/*color:#000;*/
}
.nav-open .nav {
	transform: none;
	pointer-events: auto;
	opacity: 1;
}
.nav-animate .nav {
	transition: transform 0.1s ease-in;
	/*transition: opacity 0.2s ease-in;*/
}
.nav-open.nav-animate .nav {
	transition: transform 0.3s ease-out;
	/*transition: opacity 0.2s ease-out;*/
}
.nav > ul > li {
	margin-bottom: .5rem;
} 
.nav a, .wpml-ls a {
	display: inline-block;
	position: relative;
	text-decoration: none;
	color: inherit;
	cursor: pointer !important;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.nav .current-menu-item a,
.nav a:hover{
	opacity: 0.7;
}
/*
.nav .current-menu-item a::after, 
.nav a::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #000;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}
.nav .current-menu-item a::after  {
  transform: scaleX(1);
  transform-origin: bottom left;
}
.nav a:hover:after {
  transform: scaleX(1);
  transform-origin: bottom left;
}
*/

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~ SUB-MENUS */
.nav .sub-menu {
	overflow: hidden;
	max-height: 0px;
	transition: max-height 500ms ease;
}
.nav .sub-menu.collapsed {
	max-height: 100vh;
	transition: max-height 1.25s ease;
}
.nav .sub-menu li {
}
.nav .sub-menu a {
	text-transform: lowercase;
	white-space: nowrap;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~ BURGER BUTTON */
.burger {
	z-index: 101;
	position: absolute;
	right: 0;
	top: 15px;
}
.burger button {
	position: relative;
	display: block;
	width: 3em;
	height: 3rem;
	margin: 0;
	padding: 0;
	outline: none;
	border: none;
	cursor: pointer;
	background: none;
	box-shadow: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	-o-appearance: none;
	appearance: none;
	pointer-events: auto;
}
.burger span {
	display: block;
	position: absolute;
	height: 1px;
	width: 40%;
	top: 50%;
	left: 30%;
	border-radius: 1px;
	background: #000;
	transform: rotate(0deg);
	transition: all .25s ease-in-out;
}
html:not(.no-touchevents) .burger span:not(:nth-child(3)) {
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1);
}
.burger span:nth-child(1) {
	margin-top: -7px;
}
.burger span:nth-child(4) {
	margin-top: 7px;
}
/* Opened */
.nav-open .burger {
	/*position: fixed;*/
}
.nav-open .burger span {
	/*background: #000;*/
}
.nav-open .burger span:nth-child(1), .nav-open .burger span:nth-child(4)  {
	width: 0;
	margin-top: 0;
	left: 50%;
}
.nav-open .burger span:nth-child(2) {
	transform: rotate(45deg);
}
.nav-open .burger span:nth-child(3) {
	transform: rotate(-45deg);
}

/*~~~~~~~~~~~~~~~~~~~~~~ L A N G U A G E */
.wpml-ls {
	z-index: 100;
	position: absolute;
	right: 15px;
	opacity: 0;
	pointer-events: none;
	transform: translateX(-.5em);
	transition: transform .1s ease-in 0s, opacity .1s ease-in 0s;
}
.nav-open .wpml-ls {
	opacity: 1;
	pointer-events: auto;
	transform: translateX(0);
	transition: transform .1s ease-in .17s, opacity .1s ease-in .17s;
}
.wpml-ls ul {
	flex-direction: row;
}
.wpml-ls li::before {
	content: '';
	display: inline-block;
	width: 1px;
	height: .65em;
	margin-right: -.25em;
	background-color: hsla(33, 48%, 75%, 1);
}
.wpml-ls li:first-child::before {
	display: none;
}


/*~~~~~~~~~~~~~ P H O N E  —  P O R T R A I T  |  1  ⟾  7 3 6.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
@media only screen and (max-width: 736px) {
	.device {
		content: 'phone-portrait';
	}
}

/*~~~~~~~ P H O N E  —  L A N D S C A P E  |  4 3 3  ⟾  7 3 6.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
@media only screen and (min-width: 433px) {
	.device {
		content: 'phone-landscape';
	}
}


/*~~~~~~~ T A B L E T  —  P O R T R A I T  |  7 3 7  ⟾  8 0 0.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
@media only screen and (min-width: 737px) {
	.device {
		content: 'tablet-portrait';
	}
	.header{
		min-height: 5em;
		padding: 0;
	}
	.header ul {
		text-align: right;
	}
	.header + .space {
		height: 7em;
	}
	.logo {
		padding: 2.5em 0 1.5em 0;
	}
	.logo img{
		max-width: 140px;
	}
	.burger {
		top: 45px;
		right: 30px;
	}
	.nav {
		width: 300px;
		padding : 0 3rem;
	}
}


/*~~~ T A B L E T  —  L A N D S C A P E  |  8 0 0  ⟾  1 0 2 4.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
@media only screen and (min-width: 801px) {
	.device {
		content: 'tablet-landscape';
	}
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~ M O N I T O R  |  1 0 2 5  ⟾  ∞.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ MONITOR */
@media only screen and (min-width: 1025px) {
	.device {
		content: 'monitor';
	}
}

/*~~~~~~~~~~~~~~~~~~~~~~~ MONITOR LAPTOP */
@media only screen and (max-width: 1022px) {

}

@media only screen and (min-width: 1340px) {
	.device {
		content: 'monitor-laptop';
	}
}

/*~~~~~~~~~~~~~~~~~~~~~~~~ MONITOR LARGE */
@media only screen and (min-width: 1540px) {
	.device {
		content: 'monitor-large';
	}
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~ MONITOR WIDE */
@media only screen and (min-width: 1860px) {
	.device {
		content: 'monitor-wide';
	}
}

/*~~~~~~~~~~~~~~~~~~~~~~~~ MONITOR GIANT */
@media only screen and (min-width: 2440px) {
	.device {
		content: 'monitor-giant';
	}
}





/*—~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/