/*
Theme Name: Sendekultur Custom
Theme URI: http://www.sendekultur.de/
Author: Benjamin Buck
Author URI: http://www.sendekultur.de/
Description: Sendekultur Custom Theme, developed in 2020
Version: 1.0
Text Domain: sendekultur
*/

/*

 ┌────────────────────────────────────────────────────────────────────────────┐
 │ Copyright (C) 2020 sendekultur                                             │
 │                                                                            │
 │ sendekultur uses third-party libraries or other resources that may         │
 │ be distributed under different licensees.                                  │
 │                                                                            │
 │ In the event that we accidentally failed to contain a required notice,     │
 │ please bring it to our attention through any of the ways detailed here:    │
 │                                                                            │
 │ >> buck[at]sendekultur.de                                                  │
 │ >> sendekultur.de                                                          │
 └────────────────────────────────────────────────────────────────────────────┘
 
*/

a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:circle}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

* {
    -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;	
}

html {
	font-size: 62.5% !important; /* Results in 1rem = 10px */
}

body {
	color: #181818;
	background: #f1f1f1 !important;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, div {
    display: block;
}

textarea:focus, input:focus { outline: none; }

input { -webkit-appearance: none; }

img {
    width: 100%;
    height: auto;
    display: block;
}

a {
	display: inline-block;
	color: inherit;
}

/* ===========================================================================
	DEBUG MODE 
============================================================================== */

.debugMode .b1, .debugMode .b2, .debugMode .b3, .debugMode .b4, .debugMode .b5, .debugMode .b6, .debugMode .b7, .debugMode .b8, .debugMode .b9, .debugMode .b10, .debugMode .b11, .debugMode .b12 {
	border: 0.1px solid #8ee78e;
}

/* ===========================================================================
	GRID 
============================================================================== */

.b1, .b2, .b3, .b4, .b5, .b6, .b7, .b8, .b9, .b10, .b11, .b12,.slider,
.b1:before, .b2:before, .b3:before, .b4:before, .b5:before, .b6:before, .b7:before, .b8:before, .b9:before, .b10:before, .b11:before, .b12:before,#units:before,
.b1:after, .b2:after, .b3:after, .b4:after, .b5:after, .b6:after, .b7:after, .b8:after, .b9:after, .b10:after, .b11:after, .b12:after, #units:after {
    float:left;
    width: 100%;
    content:"";
    display:table;
    *zoom:1;
}

.b1{width: 8.33333333333%;}.b2{width: 16.6666666667%;}.b10{width: 83.3333333333%;}.b11{width: 91.6666666667%;}.b12{width: 100%;}

.b1, .b2, .b3, .b4, .b5, .b6, .b7, .b8, .b9, .b10, .b11, .b12, {
	width: 100%;
}

/* ===========================================================================
	SITEWIDE STRUCTURE
============================================================================== */

#units,
.bOut,
.bIn,
.bAbs,
.bRel {
	position: relative;
	left: 0;
	z-index: 100;
    width: 100%;
    height: auto;
	float: none;
}

#units {
	z-index: inherit;
}

.bOut {
	background-color: #f1f1f1;
}

.bIn {
	max-width: 1360px;
	margin: 0 auto;
	padding: 1.3rem;
	background-color: #f1f1f1;
}

.bInTall {
	padding: 3rem 1.3rem;
}

.bStage,
.bStage .bIn {
	background-color: transparent;
}

.bStage.bOut {
	bottom: 0;
}

.bAbs {
	position: absolute;
	z-index: 200;
	bottom: 0;
}

/* ===========================================================================
	SITEWIDE TYPOGRAPHY
============================================================================== */

h1, h2, h3, h4, h5, h6,
p, a, li,
label {
	line-height: 1.45em;
	font-family: Arial, sans-serif;
	font-size: 1.7rem;								/* <------------ base font */
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 800;								/* <------------ head font */
}

h1 {
	font-size: 2.4rem;
}

h2 {
	font-size: 2.4rem;
}

p, a, li {
	font-weight: 300;								/* <------------ copy font */
}

ul {
	padding-left: 1.4rem;
}

/* ===========================================================================
	SITEWIDE HELPERS
============================================================================== */

.transition {
	-webkit-transition: 	all 300ms ease;
	-moz-transition: 		all 300ms ease;
	-ms-transition: 		all 300ms ease;
	-o-transition: 			all 300ms ease;
	transition: 			all 300ms ease;
}

/* center vertically */
.centerChildVertically {
	position: relative;
	height: 100%;
	width: 100%;
	display: inherit;
}
.vCentered {
	position: absolute;
	top: 50%;
	width: 100%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
}
/* center vertically end */

.z100 { z-index: 100; }
.z200 { z-index: 200; }
.z300 { z-index: 300; }
.z400 { z-index: 400; }
.z500 { z-index: 500; }
.z600 { z-index: 600; }
.z700 { z-index: 700; }
.z800 { z-index: 800; }
.z900 { z-index: 900; }

.fw100 { font-weight: 100; }
.fw300 { font-weight: 300; }
.fw600 { font-weight: 600; }
.fw800 { font-weight: 800; }

/* ===========================================================================
	Link Hover, animated underline
============================================================================== */

/* p a, */
a.aFX {
  color: red;
  position: relative;
  -moz-transition: ease-out 0.3s 0.1s;
  -o-transition: ease-out 0.3s 0.1s;
  -webkit-transition: ease-out 0.3s;
  -webkit-transition-delay: 0.1s;
  transition: ease-out 0.3s 0.1s;
  text-decoration: none;
}

/* p a::after, */
a.aFX::after {
  height: 1px;
  width: 100%;
  background: red;
  content: "";
  position: absolute;
  left: 0px;
  bottom: 0;
  -moz-transform: scaleX(0);
  -ms-transform: scaleX(0);
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

/* p a:hover::after, */
a.aFX:hover::after {
  -moz-transform: scaleX(1);
  -ms-transform: scaleX(1);
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

/* ===========================================================================
	SITEWIDE rippleClick (click .rippleClick -> show .rippleCage & .rippleCage .circle for 700ms)
============================================================================== */

.rippleClick .rippleCage {
  display: block;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  position: absolute;
  overflow: hidden;
    height: 100%;
    width: 100%;
    top: 0;
    z-index: 3000;
}

.circle {
  display: block;
  position: absolute;
  background: rgba(0, 0, 0, 0.075);
  border-radius: 50%;
  -webkit-transform: scale(0);
          transform: scale(0);
}
.circle.animate {
  -webkit-animation: effect 0.65s linear;
          animation: effect 0.65s linear;
}

@-webkit-keyframes effect {
  100% {
    opacity: 0;
    -webkit-transform: scale(2.5);
            transform: scale(2.5);
  }
}

@keyframes effect {
  100% {
    opacity: 0;
    -webkit-transform: scale(2.5);
            transform: scale(2.5);
  }
}

/* ===========================================================================
	SITEWIDE check boxes (checkbox -> switch)	https://codepen.io/crookoo/pen/YzyWyaM
============================================================================== */

input[type="checkbox"] {
  display: none;
}

input[type="checkbox"] + label {
  position: relative;
  display: inline-flex;
  cursor: pointer;
  font-family: sans-serif;
  line-height: 1.3;
}

input[type="checkbox"] + label:before {
  width: 30px;
  height: 15px;
  border-radius: 15px;
  border: 2px solid #ddd;
  background-color: #181818;
  content: "";
  margin-right: 8px;
  transition: background-color 0.5s linear;
}

input[type="checkbox"] + label:after {
  width: 15px;
  height: 15px;
  border-radius: 15px;
  background-color: #fff;
  content: "";
  transition: margin 0.1s linear;
  box-shadow: 0px 0px 5px #aaa;
  position: absolute;
  left: 2px;
  top: 2px;
}

input[type="checkbox"]:checked + label:before {
  background-color: #00eca6;
}

input[type="checkbox"]:checked + label:after {
  margin: 0 0 0 15px;
}

/* ===========================================================================
	SITEWIDE seeFX
============================================================================== */

.fxBySee {

	-webkit-transition: 	all 300ms ease;
	-moz-transition: 		all 300ms ease;
	-ms-transition: 		all 300ms ease;
	-o-transition: 			all 300ms ease;
	transition: 			all 300ms ease;
}

.fxBySee.seeFX {
	
}

/* ===========================================================================
	SITEWIDE loader
============================================================================== */

.loader-08 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
    width: 10rem;
    height: 10rem;
    margin: 0 auto;
}
.loader-08:before, .loader-08:after {
  content: '';
  width: inherit;
  height: inherit;
  border-radius: 50%;
  background-color: currentcolor;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-animation: loader-08 2.0s infinite ease-in-out;
          animation: loader-08 2.0s infinite ease-in-out;
}
.loader-08:after {
  -webkit-animation-delay: -1.0s;
          animation-delay: -1.0s;
}

@-webkit-keyframes loader-08 {
  0%,
	100% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  50% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes loader-08 {
  0%,
	100% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  50% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

/* ===========================================================================
	SITEWIDE Gradient Text, inspired by https://codepen.io/caseycallow/pen/yMNqPY
============================================================================== */

.gradientTxt {
	color: #f35626;
	background-image: -webkit-linear-gradient(92deg, #f35626, #feab3a);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-animation: hue 10s infinite linear;
}

@-webkit-keyframes hue {
  from {
    -webkit-filter: hue-rotate(0deg);
  }
  to {
    -webkit-filter: hue-rotate(-360deg);
  }
}

/* ===========================================================================
	SITEWIDE Outline Text
============================================================================== */

.outlineTxt {
	-webkit-background-clip: text;
	-webkit-text-stroke: 1px #181818;
	-webkit-text-fill-color: transparent;
}

/* ===========================================================================
	RESPONSIVE IFRAMES 
============================================================================== */

.elasticFrame {
	position: relative;
	padding-bottom: 55%;
	padding-top: 15px;
	height: 0;
	overflow: hidden;
}

.elasticFrame iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* ===========================================================================
	STAGES 
============================================================================== */

.bStage .bAbs,
.bStage .bIn {
	height: 100%;
}

.bStage,
.bStage .bRel {
	background-color: #000;
}

.bStage img {
	max-width: 100rem;
	margin: 4rem auto;
}

/* ===========================================================================
	MODULES 
============================================================================== */

/* ===========================================================
	Brand
============================================================== */

.bBrand {
	position: fixed;
	z-index: 300;
}

.bBrand .centerChildVertically {
	height: 2.4rem;
}

.bBrand svg {
    width: 2.4rem;
    display: inline-block;
    position: absolute;
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
}

.st8sec1 .bBrand svg {
    fill: #d40000;
}

.st8sec2 .bBrand svg {
    fill: #d40000;
}

.st8sec3 .bBrand svg {
    fill: #d40000;
}

.bBrand img {
    max-width: 8.6rem;
}

.bBrand h2 {
	font-size: 2.4rem;
	margin-left: 3rem;
	color: #d40000;
}

/* ===========================================================
	Head 
============================================================== */

.bHead .bIn {
	padding-bottom: 0;
}

/* ===========================================================
	Social 
============================================================== */

.bSocial,
.bSocial .bIn {
    background-color: #c9c9c7;
}

.bSocial .line {
    border: none;
    height: .1rem;
    width: 100%;
    position: relative;
    top: 1.5rem;
    z-index: 1;
    background-color: #181818;
}

.bSocial ul {
	display: inline-block;
	width: auto;
    padding: 0 2rem 0 0;
    z-index: 2;
    position: relative;
    background-color: #c9c9c7;
}

.bSocial li {
	display: inline-block;
	margin-right: 1.5rem;
}

.bSocial li:last-child {
	margin-right: 0;
}

.icoOut {
    width: 28px;
    height: 28px;
    display: inline-block;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    border: 1px solid #181818;
}

.bSocial ul {
	list-style: none;
}

/* ===========================================================================
	LAYER CHARTS
============================================================================== */

.bLayerCharts .bIn {
	background-color: transparent;
}

.bLayerCharts .fixed {
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    width: 100%;
}

/* ===========================================================
	Foot 
============================================================== */

.bFoot,
.bFoot .bIn {
	background-color: #181818;
	color: #f8f8f8;
}

.bFoot ul {
	list-style: none;
	padding-left: 0;
	text-align: center;
}

/* ===========================================================
	Rotated Text 
============================================================== */

.rotator {
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 999;
}

.rotateHelper {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
    
	-moz-transform-origin: 0 0; /* Drehpunkt ist obern links */
	-ms-transform-origin: 0 0;
	-o-transform-origin: 0 0;
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
	
    position: absolute;
    top: -2rem;
    left: 1.6rem;
    width: 34rem;
    text-align: right;
}

.rotated {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
    
	-moz-transform-origin: 50% 50%; /* Drehpunkt ist mitte mitte */
	-ms-transform-origin: 50% 50%;
	-o-transform-origin: 50% 50%;
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
}

/* ===========================================================================
	ITEMS 
============================================================================== */

/* ===========================================================
	ACC 
============================================================== */

ul.accOutta {
	list-style: none;
	max-width: 60rem;
    margin: 0 auto;
    padding-left: 0;
}

.accItem {
    border-bottom: 1px solid #181818;
}

.accItem:last-child { border-bottom: none; }

.accUI {
	position: relative;
	width: 100%;
	top: 0;
	left: 0;
	padding: 1.3rem 0 1.2rem 0;
}

.accUI:hover {
	cursor: pointer;
}

.accState {
    position: absolute;
    right: 0;
    top: 1.1rem;
	overflow: hidden;
	z-index: 100;
	height: 2.5rem;
	padding: 0;
}

.accTitle {
	-webkit-transform: 		translate(-2.6rem, 0);
	-moz-transform:    		translate(-2.6rem, 0);
	-ms-transform:     		translate(-2.6rem, 0);
	-o-transform:      		translate(-2.6rem, 0);
	transform:         		translate(-2.6rem, 0);
	padding-right: 2.6rem;	
}

.accBody {
	padding-right: 5rem;
}

.accTools {
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid #181818;
    text-align: center;
    line-height: 2.3rem;
}

.uiOpenAcc, .uiCloseAcc {
	display: block;
	position: relative;
	font-size: 1rem;
}

.uiOpenAcc {
	-webkit-transform: 		translate(0, 0);
	-moz-transform:    		translate(0, 0);
	-ms-transform:     		translate(0, 0);
	-o-transform:      		translate(0, 0);
	transform:         		translate(0, 0);
}

.accOpen .uiOpenAcc {
	-webkit-transform: 		translate(0, 400%);
	-moz-transform:    		translate(0, 400%);
	-ms-transform:     		translate(0, 400%);
	-o-transform:      		translate(0, 400%);
	transform:         		translate(0, 400%);
}

.uiCloseAcc {
	-webkit-transform: 		translate(0, -400%);
	-moz-transform:    		translate(0, -400%);
	-ms-transform:     		translate(0, -400%);
	-o-transform:      		translate(0, -400%);
	transform:         		translate(0, -400%);
	color: red;
}

.accOpen .uiCloseAcc {
	-webkit-transform: 		translate(0, -100%);
	-moz-transform:    		translate(0, -100%);
	-ms-transform:     		translate(0, -100%);
	-o-transform:      		translate(0, -100%);
	transform:         		translate(0, -100%);	
}

.hideAccBody { display: none; }

.accBody hr {
    border: 0.1px solid transparent;
    margin: 0 0 1.4rem 0;
    display: block;
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
}

.accIco {
	position: relative;
	top: -0.2rem;
	display: inline-block;
	margin-right: 1rem;
}

.accOpen .accIco {
	color: red;
	-moz-transform: rotate(400deg);
	-ms-transform: rotate(400deg);
	-o-transform: rotate(400deg);
	-webkit-transform: rotate(400deg);	
	transform: rotate(400deg);
}

/* ===========================================================
	Txt Mask, inspired by https://codepen.io/daiquiri/pen/GWpPKP
============================================================== */

.bTxtMask .media {
  background-position: center;
  background-size: cover;
  height: 100%;
  position: absolute;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  width: 100%;
  
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.bTxtMask figure {
  height: 370px;
  overflow: hidden;
  position: relative;
}

.bTxtMask figcaption {
  color: #252830;
  height: calc(100% - 30px);
  left: 0;
    margin: 0 auto;
    position: relative;
  top: 0;
  width: 100%;
}

.bTxtMask svg {
  height: inherit;
  width: 100%;
}

.bTxtMask svg text {
  text-anchor: middle;
}

.bTxtMask svg #alpha {
  fill: white;
}

.bTxtMask svg .title {
  font-size: 28px;
  font-family: "arial";
  font-weight: 800;
  letter-spacing: 5px;
}

.bTxtMask svg #base {
  fill: white;
/*   -webkit-mask: url(#mask); */
  mask: url(#mask);
}

/* ===========================================================
	Image Map
============================================================== */

.bImgMap .bRel {
	height: 100%;
	overflow: hidden;
}

.bImgMap .mapMeta .mapMetaIn {
    padding: 2rem;
    position: relative;
    border: 1px solid #fff;
	max-width: 25rem;
    margin: 0 auto;
}

.bImgMap .mapMeta {	/* receives inline top & left Position (in %) */
	position: absolute;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    
/*     padding: 0 15%; */
    
    max-width: 100%;
    width: 100%;
    
	-webkit-transition: 	-webkit-transform 300ms ease;
	-moz-transition: 		-moz-transform 300ms ease;
	-ms-transition: 		-ms-transform 300ms ease;
	-o-transition: 			-o-transform 300ms ease;
	transition: 			transform 300ms ease;
}

@media screen and (max-width: 1099px){
	
	.bImgMap .mapMeta {
		left: 0 !important;
	    transform: scale(0);
	}
	
	.bImgMap .seeMapMeta .mapMeta {
	    transform: scale(1);
	}
	
}

.bImgMap .mapTarget {
    width: 4rem;
    height: 4rem;
    margin-left: -2rem; /* minus half of width to center it */
    margin-top: -2rem; /* minus half of height to center it */
    position: absolute;
}

.bImgMap .pulse {
	display: block;
	border-radius: 50%;
	background: none;
	border: 2px solid #ffffff78;
	cursor: pointer;
	box-shadow: 0 0 0 rgba(255,255,255, 0.4);

	z-index: 1;
	animation: pulse 2s infinite;
}

.bImgMap.seeingMapMeta .mapTarget {
	background: rgba(255, 255, 255, 0.26);
	border: none;
    width: 1rem;
    height: 1rem;
    margin-left: -0.5rem; /* minus half of width to center it */
    margin-top: -0.5rem; /* minus half of height to center it */	
}

.bImgMap .seeMapMeta .pulse {
	background: #fff;
    width: 1rem;
    height: 1rem;
    margin-left: -0.5rem; /* minus half of width to center it */
    margin-top: -0.5rem; /* minus half of height to center it */
}

.bImgMap .pulse:hover {
	animation: none;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(255,255,255, 0.4);
  }
  70% {
      -webkit-box-shadow: 0 0 0 10px rgba(255,255,255,44, 0);
  }
  100% {
      -webkit-box-shadow: 0 0 0 0 rgba(255,255,255, 0);
  }
}
@keyframes pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(255,255,255, 0.4);
    box-shadow: 0 0 0 0 rgba(209, 209, 209, 0.4);
  }
  70% {
      -moz-box-shadow: 0 0 0 10px rgba(255,255,255, 0);
      box-shadow: 0 0 0 10px rgba(209, 209, 209, 0);
  }
  100% {
      -moz-box-shadow: 0 0 0 0 rgba(255,255,255, 0);
      box-shadow: 0 0 0 0 rgba(209, 209, 209, 0);
  }
}

.bImgMap .mapTarget.targetCentering {
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.bImgMap .pulse {
  animation: pulse 2s infinite;
}


.bImgMap .mapLine {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  
  display: none;
}

.bImgMap .mapLine.showMapMetaLine {
	display: none;
}

.bImgMap .mapLine svg {
  width: 100%;
  height: 100%;
}

.bImgMap .mapMeta h3,
.bImgMap .mapMeta p {
	color: #fff;
}

.bImgMap .mapMeta p {
	font-size: 1.2rem;
}

.bImgMap .mapMetaBigType h3 {
	font-size: 5rem;
    line-height: 1;	
}

.closeMeta {
    color: #fff;
    position: absolute;
    top: 0.7rem;
    right: 1.2rem;
    font-weight: 800;
    font-size: 1.8rem;
}

/* ===========================================================
	SCALE IMAGES.scrollScaleImg WHILE SCROLLING 
============================================================== */

.scrollScaleImgOutta {
	overflow: hidden;
	position: relative;
	background-color: #181818;
}

.scrollScaleImg {
    transform: scale(1.18);
}

/* ===========================================================
	OFF CANVAS 
============================================================== */

#mask {
    bottom: 0;
    width: 100%;
    height: 0;
    position: fixed;
    pointer-events: none;
    overflow: hidden;
    background-color: #21262b;
    z-index: 1100;
    opacity: 0.4;
}

.st8NavOpen #mask,
.st8BlownOpen #mask {
    height: 100%;
    opacity: 0.95;
    pointer-events: inherit;
}

.bOff {
    background-color: transparent;
    position: fixed;
    z-index: 500;
    width: 100%;
    height: 100%;
    top: 0;
    -webkit-transform: translate(0, -5000px);
    -moz-transform: translate(0, -5000px);
    -ms-transform: translate(0, -5000px);
    -o-transform: translate(0, -5000px);
    transform: translate(0, -5000px);
    
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
}

.st8DataNavOpen .bOff.bPolicy,
.st8ImprintNavOpen .bOff.bImprint  {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
}

.st8DataNavOpen .bOff.bPolicy,
.st8ImprintNavOpen .bOff.bImprint {
	overflow: auto;
}

.bOff,
.bOff .bIn {
	background-color: inherit;	
	background-color: transparent;
	min-height: inherit;
}

/* ===========================================================
	lightbox (click .blowUp -> show .blownUp) 
============================================================== */

.bBlownStage {
    z-index: 1;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    background-color: transparent;
}

.st8BlownOpen .bBlownStage {
    z-index: 1200; 
    background-color: transparent;
}

.bBlownStage .bIn {
    background-color: transparent;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

.blowHovr {
	opacity: 0.6;
}

.hovrIco {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: red;
}

.blownUpOtta {
	display: none;
	position: absolute;
}

.blownUpOtta.blown {
	display: block;
}

.bBlownStage img {
    transform: scale(0.94);
    background-color: #1b1b1b;
    opacity: 0;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
}

.bBlownStage img.fxedIn {
	transform: scale(1);
    opacity: 1;
}











@media screen and (min-width: 550px){


	/* ===========================================================================
		GRID 
	============================================================================== */

	.b3{width: 50%;}.b4{width: 33.3333333333%;}.b5{width: 41.6666666667%;}.b6{width: 50%;}.b7{width: 58.3333333333%;}.b8{width:66.6666666667%;}.b9{width: 75%;}
	
	.gridStrips .b3:first-child {
		padding-left: 0;
		padding-right: 1.5rem;
	}
	
	.gridStrips .b3:nth-child(2) {
		padding-left: 1.5rem;
		padding-right: 0;		
	}
	
	.gridStrips .b3:nth-child(3) {
		padding-left: 0;
		padding-right: 1.5rem;		
	}
	
	.gridStrips .b3:last-child {
		padding-left: 1.5rem;
		padding-right: 0;		
	}

	.gridStrips .b4 {
		padding: 0 1rem;	
	}
	
	.gridStrips .b4:first-child {
		padding-left: 0;
		padding-right: 2rem;
	}
	
	.gridStrips .b4:last-child {
		padding-left: 2rem;
		padding-right: 0;		
	}
	
	.gridStrips .b6:first-child {
		padding-right: 1.5rem;
	}
	
	.gridStrips .b6:last-child {
		padding-left: 1.5rem;
	}
	
	/* ===========================================================================
		SITEWIDE STRUCTURE
	============================================================================== */
	
	.bIn {
		padding: 8rem;
	}
	
	.bInTall {
		padding: 5.5rem 8rem;
	}
	
	/* ===========================================================================
		SITEWIDE TYPOGRAPHY
	============================================================================== */
	
	h1, h2, h3, h4, h5, h6,
	p, a, li,
	label {
		line-height: 1.45em;
		font-size: 1.6rem;								/* <------------ base font */
	}
	
	h1, h2, h3, h4, h5, h6 {
		font-weight: 800;								/* <------------ head font */
	}
	
	h1 {
		font-size: 3rem;
	}
	
	h2 {
		font-size: 3rem;
	}
	
	p, a, li {
														/* <------------ copy font */
	}

}






@media screen and (min-width: 1100px){

	/* ===========================================================================
		GRID 
	============================================================================== */
	
	.b3{width: 25%;}.b4{width: 33.3333333333%;}.b5{width: 41.6666666667%;}.b6{width: 50%;}.b7{width: 58.3333333333%;}.b8{width:66.6666666667%;}.b9{width: 75%;}

	.gridStrips .b3:first-child {
		padding-right: 2.2rem;
	}
	
	.gridStrips .b3:nth-child(2) {
		padding-left: 0.75rem;
		padding-right: 1.5rem;		
	}
	
	.gridStrips .b3:nth-child(3) {
		padding-left: 1.5rem;
		padding-right: 0.75rem;		
	}
	
	.gridStrips .b3:last-child {
		padding-left: 2.2rem;
		padding-right: 0;		
	}

	.gridStrips .b4 {
		padding: 0 1rem;	
	}
	
	.gridStrips .b4:first-child {
		padding-left: 0;
		padding-right: 2rem;
	}
	
	.gridStrips .b4:last-child {
		padding-left: 2rem;
		padding-right: 0;		
	}
	
	.gridStrips .b6:first-child {
		padding-right: 1.5rem;
	}
	
	.gridStrips .b6:last-child {
		padding-left: 1.5rem;
	}
	
	/* ===========================================================================
		SITEWIDE STRUCTURE
	============================================================================== */

	#units {
	    padding-top: 14.4rem;
	}
	
	/* ===========================================================================
		SITEWIDE TYPOGRAPHY
	============================================================================== */
	
	h1, h2, h3, h4, h5, h6,
	p, a, li,
	label {
		line-height: 1.45em;
		font-size: 1.6rem;								/* <------------ base font */
	}
	
	h1, h2, h3, h4, h5, h6 {
		font-weight: 800;								/* <------------ head font */
	}
	
	h1 {
		font-size: 16rem;
	}
	
	h2 {
		font-size: 6rem;
	}
	
	p, a, li {
														/* <------------ copy font */
	}
	
	/* ===========================================================================
		MODULES 
	============================================================================== */

	/* ===========================================================
		Brand
	============================================================== */

	.bBrand .bIn {
	    padding-top: 7rem;
	    padding-bottom: 7rem;
	}
	
	.bBrand .centerChildVertically {
		height: 3.5rem;
	}
	
	.bBrand svg {
	    width: 8.5rem;
	}
	
	.bBrand h2 {
	    line-height: 1.3em;
		font-size: 1.6rem;
		margin-left: 10.6rem;
	}

	/* ===========================================================
		Social 
	============================================================== */
	
	.bSocial .line {
	    height: .1rem;
	    top: 2rem;
	}
	
	.bSocial ul {
	    padding: 0 2rem 0 0;
	}
	
	.bSocial li {
		margin-right: 1.5rem;
	}
	
	.bSocial li:last-child {
		margin-right: 0;
	}
	
	.icoOut {
	    width: 35px;
	    height: 35px;
	}
	
	/* ===========================================================
		Image Map
	============================================================== */
	
	.bImgMap .mapMeta {	/* receives inline top & left Position (in %) */
		position: absolute;
	    -webkit-transform: translateY(-50%);
	    -moz-transform: translateY(-50%);
	    -ms-transform: translateY(-50%);
	    -o-transform: translateY(-50%);
	    transform: translateY(-50%);
	    
	    max-width: 25rem;
	}
	
	.bImgMap .mapMeta {
	    padding: 0;
	}
	
	.bImgMap .mapMeta .mapMetaIn {
		padding: 2rem;
		border: none;
	}

	.bImgMap .mapMeta.showMapMetaBorder .mapMetaIn {
		border: 1px solid #fff;
		padding: 2rem;
		margin: 0 !important;
	}
	
	.bImgMap .mapTarget {
	    width: 0.2rem;
	    height: 0.2rem;
	    margin-left: -0.1rem; /* minus half of width to center it */
	    margin-top: -0.1rem; /* minus half of height to center it */
	    position: absolute;
	    opacity: 0;
	}
	
	.bImgMap .seeMapMeta .pulse {
		background: #fff;
	    width: 0.2rem;
	    height: 0.2rem;
	    margin-left: -0.1rem; /* minus half of width to center it */
	    margin-top: -0.1rem; /* minus half of height to center it */
	}
	
	.bImgMap .mapLine {
	  position: absolute;
	  width: 100%;
	  height: 100%;
	  top: 0;
	  left: 0;
	  
	  display: none;
	}
	
	.bImgMap .mapLine.showMapMetaLine {
		display: block;
	}
	
	.bImgMap .mapLine svg {
	  width: 100%;
	  height: 100%;
	}
	
	.bImgMap .mapMeta h3,
	.bImgMap .mapMeta p {
		color: #fff;
	}
	
	.bImgMap .mapMeta p {
		font-size: 1.2rem;
	}
	
	.bImgMap .mapMetaBigType h3 {
		font-size: 9rem;
	    line-height: 1;	
	}
	
	.closeMeta {
		display: none;
	}
		
}