@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wdth,wght@0,75,300..800;1,75,300..800&family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&display=swap');

/* WP Fixes */
.parallax_area {
		height: unset;
}

.grid__cell {
	flex-basis: auto !important;
}

.grid__cell .wp-block-group .wp-block-columns {
		width: 100%;
}

@media only screen and (max-width: 880px) {
		.wrap > .grid-cell > .wp-block-group > .wp-block-columns {
		width: 90vw;
				left: 5vw;
				position: relative;
				flex-grow:0
	}
		
		.wrap > .grid-cell > .wp-block-group > .wp-block-columns.full_mobile {
				width: 100%;
				left: 0;
		}
}

.wp-block-button button a[href],
a.wp-block-button__link[href] {
		color:#000;
}

.maxwidth-fix {
    margin-right: auto;
    margin-left: auto;
    width: 90vw;
}

.maxwidth-fix.maxwidth--l {
    max-width: 992px;
}

.navbar--fixed + main {
	    padding-top: 96px;
}

.show__menu:checked ~ nav {
	left: -5vw;
}

.navbar nav::before {
		left: auto;
}

.show__menu:checked ~ nav ul{
	 flex-direction: column;
		justify-content: start;
		width: 90vw;
}

.show__menu:checked ~ nav label.toggle__nav {
				right: 5vw !important;
}

.show__menu:checked ~ nav ul li,
.show__menu:checked ~ nav ul li a {
	color: #000 !important;
}

iframe,
.vimeo-embed { width: 100% !important; }

/* Style */
body, main {
  background-color: #0e0f16;
  color: #ffffff;
  font-family: 'Open Sans',sans-serif;
}

.backdrop {
		background-color: rgba(0,229,172,0.34);
		padding: 24px;
}

.borderline--left{
		padding-left: 24px;
		border-left: 1px solid #fff;
}

.borderline--right{
		padding-right: 24px;
		border-right: 1px solid #fff;
}

header.navbar, .header {
		background-color: #0e0f16;
		padding: 48px 0;
}

header.navbar .custom-logo{
		max-height:48px;
}

header.navbar .menu {
		list-style-type: none;
    display: flex;
    width: 100%;
    justify-content: end;
		font-weight: bold;
		font-family: 'Open Sans';
		font-stretch: condensed;
		text-transform: uppercase;
		color: #fff;
}

@media only screen and (min-width: 781px) {
.menu-header-container {
		height:96px;
		}
}

.navbar nav label.toggle__nav .menu_icon {
	color: #fff;
		stroke: #fff;
}

.show__menu:checked ~ nav label.toggle__nav .menu_icon {
	color: #000;
		stroke: #000;
}

.navbar nav label.toggle__nav {
    top: 48px;
}

.navbar nav::before {
		z-index: 0;
}

footer, .footer {
		background-color: #191A23;
		padding: 48px 0;
}

footer .menu, .footer .menu {
		list-style-type: none;
    display: flex;
    width: 100%;
    justify-content: end;
		font-weight: bold;
		font-family: 'Open Sans';
		font-stretch: condensed;
		text-transform: uppercase;
		color: #fff;
		gap:12px;
}


header.navbar .menu a, footer .menu a, .footer .menu a {
		color: #fff;
}

.some_bar {
		display: none;
}

@media only screen and (min-width: 781px) {
		.some_bar {
				position: absolute;
				right: 0;
				width: 48px;
				font-size: 16px;
				line-height: 24px;
				display: inline-block;
				vertical-align: top;
				z-index:4;
				top: 24px;
		}
}

.content-related {
		background-color: #25262F;
		padding-top: 32px;
		padding-bottom: 32px;
}

.specs {
		width: 100%;
}

.specs p {
		margin:0;
}


.button, button, .btn, .wp-block-button__link, html input[type=button], input[type=reset], input[type=submit] {
		background-color: #00E5C4;
		border-radius:0 ;
		color: #0E0F16;
		font-weight: bold;
		font-family: 'Open Sans';
		font-stretch: condensed;
		text-transform: uppercase;
		border: none;
		padding: 12px;
}

@media only screen and (max-width: 683.99px) {
	.grid__cell--xxs-hidden { display: none !important;}
}

@media only screen and (min-width: 684px) and (max-width: 879.99px) {
	.grid__cell--s-hidden { display: none !important;}
}

@media only screen and (min-width: 880px) and (max-width: 1135.99px) {
	.grid__cell--m-hidden { display: none !important;}
}

@media only screen and (min-width: 1136px) and (max-width: 1359.99px) {
	.grid__cell--l-hidden { display: none !important;}
}

@media only screen and (min-width: 1360px) and (max-width: 1519.99px) {
	.grid__cell--xl-hidden { display: none !important;}
}

@media only screen and (min-width: 1520px) {
	.grid__cell--xxl-hidden { display: none !important;}
}

/*$breakpoint--xxs:         400px; // between 320 - 480
$breakpoint--xs:          540px; // between 480 - 600
$breakpoint--s:           684px; // between 600 - 768
$breakpoint--m:           880px; // between 768 - 992
$breakpoint--l:           1136px; // between 992 - 1280
$breakpoint--xl:          1360px; // between 1280 - 1440
$breakpoint--xxl:         1520px; // between 1440 - 1600
$breakpoint--xxxl:        1600px + $spacing--xxxl; // 1600 + basesize * 4
*/

/* ----- Typography ----- */
.wp-block-post-title {
		display: none;
		visibility: hidden;
}

h1, h2, h3, h4, h5 {
		color: #ffffff;
  	font-family: 'Red Hat Display',sans-serif;
		text-transform: uppercase;
		font-weight: bold;
}

h5 {
		font-weight: 100;
}

h3 + h3,
h6 + h2,
h6 + h3 {
	margin-top:0;
}

.spot-color,
li.wp-social-link,
a[href]{
	color: #00E5C4;
}

li.wp-social-link {
	background-color: transparent !important;
}

.hl-thin {
	font-weight:100;
}

.statement {
		font-weight:100;
		font-family: 'Open Sans';
		font-stretch: condensed;
}

h4 {
		font-size:12px;
		line-height: 16px;
		font-weight: bold;
}

@media only screen and (min-width: 880px) {
		h1 {font-size:32px;line-height: 42px;}
		h2 {font-size:24px;line-height: 32px;}
		h3 {font-size:20px;line-height: 28px;}
		h4 {font-size:12px;line-height: 16px;}
		.statement {font-size: 20px;line-height: 28px;}
}

@media only screen and (min-width: 1136px) {
		h1 {font-size:48px;line-height: 52px;}
		h2 {font-size:32px;line-height: 42px;}
		h3 {font-size:24px;line-height: 32px;}
		h4 {font-size:16px;line-height: 20px;}
		.statement {font-size: 24px;line-height: 32px;}
}

@media only screen and (min-width: 1360px) {
		h1 {font-size:54px;line-height: 72px;}
		h2 {font-size:40px;line-height: 52px;}
		h3 {font-size:24px;line-height: 32px;}
		h4 {font-size:16px;line-height: 20px;}
		.statement {font-size: 30px;line-height: 48px;}
}



h6 {
		text-transform: uppercase;
		letter-spacing: 0.2rem;
}

/* ------ Forms ------- */
form p { margin:0}
form .form_row {
		display: flex;
		gap: 10px;
}

label {
		font-size: 12px;
		color:#00E5C4;
		font-family: 'Red Hat Display',sans-serif;
		text-transform: uppercase;
		font-weight: bold;
		margin-bottom: 8px;
}

input[type=text], input[type=password], input[type=search], input[type=email], input[type=url], input[type=tel], input[type=date], input[type=time], input[type=number], input[type=file], select, textarea {
		background-color: rgba(14,15,22,0.4);
		border: 1px solid #00E5C4;
}

/* ----- Custom Blocks CSS ----- */
.cover-image {
    display: block;
    width: 100%;
    height: 100%;
    background-size: cover;
    min-width:10px;
    min-height:10px;
}

.repeat-image {
    display: block;
    width: 100%;
    height: 100%;
    min-width:10px;
    min-height:10px;
}

.overflow--img {
    width: 100%;
    background-size: cover;
		background-position: center center;
}

.overflow--img--overlay {
    width: 100%;
    height: 100%;
}

.image-parallax_Yes {
		background-size: auto 100vh;
}

.wrap--overflow {
	background-size: cover;
}

.wrap--overflow .is-layout-flex {
		width: 100%;
}

.wrap--overflow.fade-Yes::before {
	content: "";
	position: absolute;
		width: 100%;
		height: 100%;
		top:0;
		left:0;
	background: #00000050;
background: linear-gradient(180deg,rgba(14, 15, 22, 0.5) 0%, rgba(14, 15, 22, 1) 100%);
}

/*@media only screen and (max-width: 781px) {
		.grid__cell--overflow ,.overflow-aside {
			display: none;
		}*/

@media only screen and (max-width: 781px) {
		.overflow-aside {
			display: none;
		}
		
		.wrap--overflow .grid__cell {
			margin-right: auto !important;
    	margin-left: auto !important;
    	width: 90vw !important;
			max-width: 90vw !important;
		}
}

@media only screen and (min-width: 781px) {
    .some_bar {
        z-index: 6;
    }
}