/*
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;
}


.bIntro .bIn,
.bUl .bIn {
	padding: 4rem 1.3rem;
}

.bAcc .bIn {
	padding: 4rem 1.3rem 4rem 3.7rem;
}

.bAbs {
	position: absolute;
	z-index: 1;
	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;
	line-height: 1.3;}

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

ul {
	padding-left: 1.4rem;
}

strong {
	font-weight: 800;
}

/* ===========================================================================
	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;
}

.smallOnly {
	display: none;
}

.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; }

.noMaxWidth {
	max-width: none;
	background-color: #000;
}

.noMaxWidth h2 {
	color: #fff;
}

.noMaxWidth p {
	color: #f49800;
}

.smallIntro p {
	background-color: #f49800;
	display: inline-block;
	font-size: 1rem !important;
	padding: 0.4rem 1rem;
	font-weight: 800;
	color: #fff;
	border-radius: 1rem 0;
	margin-bottom: 1rem;
}

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

/* p a, */
a.aFX {
  color: #d5d5d5;
  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: #d5d5d5;
  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);
}

/* ===========================================================
	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%;
}

/* ===========================================================================
	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 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 {
	color: #6e6e6e;
	font-size: 1.1rem;
}

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

/* ===========================================================
	Bar
============================================================== */

.bBar {
	position: fixed;
	z-index: 999;
	background-color: #000;
}

.bBar .bIn {
	padding: 0 8rem;
	background-color: #000;
}

.headerContact p {
	font-size: 1.2rem;
	text-align: center;
}

.headerContact {
	position: relative;
	padding: 1rem 0;
}

.bBar .highlight {
	color: #f49800;
	background-color: #000;
	padding: 0.5rem 0.6rem;
	border-radius: 0.7rem 0 0.7rem 0;
	border: 1px solid #f49800;
}

/* ===========================================================
	Logo
============================================================== */

.bLogo .bIn {
	padding: 8rem 0 0 0;
}

.bLogo svg {
	max-width: 11.6rem;
	position: relative;
	top: -2rem;
	margin: 0 auto;
	position: relative;
	text-align: center;
	display: block;
}

/* ===========================================================
	Intro
============================================================== */

.bIntro h2 {
	margin-bottom: 1.3rem;
}

.bIntro p,
.bUl li {
	font-size: 1.8rem;
	max-width: 100%;
}

.bIntro svg#logoBW {
	max-width: 9rem;
	margin-bottom: 0.6rem;
}

.bIntro svg#phoneIco {
	max-width: 2.8rem;
	display: inline-block;
	position: relative;
	top: 0.6rem;
	border-radius: 0 0 0 50%;
	background-color: #f49800;
}

.bIntro svg#phoneIco .iconColor {
	fill: #fff;
}

.bIntro .tel {
	margin-bottom: 2.4rem;
	font-size: 1.8rem;
	color: #f49800;
}

/* ===========================================================
	We
============================================================== */

.bWe {
	overflow: hidden;
}

.bWe .bAbs {
	position: relative;

	background: rgb(34,193,195);
	background: -moz-linear-gradient(50deg, rgba(34,193,195,1) 0%, rgba(244,152,0,0.5032606792717087) 55%);
	background: -webkit-linear-gradient(50deg, rgba(34,193,195,1) 0%, rgba(244,152,0,0.5032606792717087) 55%);
	background: linear-gradient(50deg, rgba(34,193,195,1) 0%, rgba(244,152,0,0.5032606792717087) 55%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#22c1c3",endColorstr="#f49800",GradientType=1);

}

.bWe .bIn {
  background-color: transparent;
  background: rgb(0,0,0);
  padding: 5rem 1.3rem;
}

.bWe h2 {
	line-height: 1.2;
	color: #fff;
	text-shadow: 40px 0px 90px #fff;
}

.bWe p {

}

.bWe p.intro {
	margin: 2rem 0 0 0;
	color: #fff;
}

.bWe .bAbs video {
	opacity: 0.55;
}

.highlight {
	color: #f49800;
}

/* ===========================================================
	Mag
============================================================== */

.bMag .magTxt {
	padding: 5rem 0;
}

.bMag .magTxt h2 {
	font-size: 2.4rem;
}

/* ===========================================================
	Ul
============================================================== */

.bUl,
.bUl .bIn {
	background-color: #f49800;
}

.bUl li {
	font-size: 1.8rem;
}

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

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

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

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

.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 #f1f1f1;
}

.icoOut svg {
	fill: #f1f1f1;
}

.bSocial ul {
	list-style: none;
}

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

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

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

.bFoot li {
	display: inline-block;
	padding-right: 2rem;
}

.bFoot li:last-child {
	padding-right: 0;
}

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

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

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

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

.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 #d5d5d5;
    text-align: center;
    line-height: 2.3rem;
}

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

.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%);
}

.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: 0rem;
	display: inline-block;
	margin-right: 1rem;
}

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


/* ===========================================================
	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: 0;
	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);
	z-index: 9999;
}

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

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

.bOff {
	color: #fff;
}

.bOff h3,
.bOff h4,
.bOff h5,
.bOff h6 {
	color: #f49800;
	margin-top: 2rem;
}

.bOff .bIn {
	opacity: 0;
}

.st8DataNavOpen .bOff.bPolicy .bIn,
.st8ImprintNavOpen .bOff.bImprint .bIn {
	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;
	}

	.bIntro .bIn,
	.bUl .bIn,
	.bAcc .bIn {
		padding: 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;
		line-height: 1.3;
	}

	p, a, li {
														/* <------------ copy font */
	}

	/* ===========================================================
		Helpers
	============================================================== */

	.smallOnly {
		display: block;
	}

	.smallIntro p {
		font-size: 1.3rem !important;
		padding: 0.4rem 1rem;
		border-radius: 1rem 0;
	}

	/* ===========================================================
		Bar
	============================================================== */

	.headerContact p {
		text-align: left;
	}

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

	.bHead .bIn {

	}

	/* ===========================================================
		We
	============================================================== */

	.bWe p {
		max-width: 100%;
	}

	.bWe .bIn {
	  padding: 8rem;
	}

	/* ===========================================================
		Intro
	============================================================== */

	.bIntro p,
	.bUl li {
		font-size: 2rem;
		max-width: 100%;
	}

	/* ===========================================================
		Mag
	============================================================== */

	.bMag .magTxt {
		padding: 2.2rem 2.2rem 0 0;
	}

	.bMag .magTxt h2,
	.bMag .magTxt p {
		font-size: 1.4rem;
	}

}








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

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

	.outlineTxt {
		-webkit-background-clip: text;
		-webkit-text-stroke: 1px #fff;
		-webkit-text-fill-color: transparent;
		font-size: inherit;
	}

	/* ===========================================================
		Logo
	============================================================== */

	.bLogo .bIn {
		padding: 8rem 8rem 0rem 8rem;
	}

	.bLogo svg {
		max-width: 10rem;
		float: right;
		position: relative;
		top: -2rem;
	}

	/* ===========================================================
		We
	============================================================== */

	.bWe {
		overflow: hidden;
	}

	.bWe .bAbs {
		position: absolute;

		background: rgb(34,193,195);
		background: -moz-linear-gradient(50deg, rgba(34,193,195,1) 0%, rgba(244,152,0,0.5032606792717087) 55%);
		background: -webkit-linear-gradient(50deg, rgba(34,193,195,1) 0%, rgba(244,152,0,0.5032606792717087) 55%);
		background: linear-gradient(50deg, rgba(34,193,195,1) 0%, rgba(244,152,0,0.5032606792717087) 55%);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#22c1c3",endColorstr="#f49800",GradientType=1);

	}

	.bWe .bIn {
	  background-color: transparent;
	  background: rgb(0,0,0);
	  background: -moz-radial-gradient(circle, rgba(0,0,0,0.5844931722689075) 0%, rgba(148,187,233,0) 59%);
	  background: -webkit-radial-gradient(circle, rgba(0,0,0,0.5844931722689075) 0%, rgba(148,187,233,0) 59%);
	  background: radial-gradient(circle, rgba(0,0,0,0.5844931722689075) 0%, rgba(148,187,233,0) 59%);
	  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#94bbe9",GradientType=1);
	  padding: 0 8rem;
	}

	.bWe h2 {
		line-height: 1.2;
		color: #fff;
		text-shadow: 320px 0px 30px #fff;
		font-size: 4rem;
		margin-top: 6.2rem;
	}

	.bWe p {
		max-width: 60%;
	}

	.bWe p.intro {
		margin: 2rem 0 8rem 0;
		color: #fff;
	}

	.bWe .bAbs video {
		opacity: 0.55;
	}

	.highlight {
		color: #f49800;
		background-color: #000;
		padding: 0.5rem 0.6rem;
		border-radius: 0.7rem 0 0.7rem 0;
	}

	/* ===========================================================
		Mag
	============================================================== */

	.bMag .magTxt {
		padding: 6rem 2rem 0 0;
	}

	.bMag .magTxt h2 {
		font-size: 3rem;
	}

}



@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
	============================================================================== */

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

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

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

	h1 {
		font-size: 16rem;
	}

	h2 {
		font-size: 5rem;
		line-height: 1.3;
	}

	p, a, li {
														/* <------------ copy font */
	}

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

	/* ===========================================================
		Logo
	============================================================== */

	.bLogo {
		position: absolute;
		left: 0;
		width: 100%;
		position: fixed;
		z-index: 1000;
		background: rgb(241,241,241);
		background: -moz-linear-gradient(45deg, rgba(241,241,241,0) 60%, rgba(241,241,241,1) 100%);
		background: -webkit-linear-gradient(45deg, rgba(241,241,241,0) 60%, rgba(241,241,241,1) 100%);
		background: linear-gradient(45deg, rgba(241,241,241,0) 60%, rgba(241,241,241,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f1f1f1",endColorstr="#f1f1f1",GradientType=1);
	}

	.bLogo .bIn {
		background-color: transparent;
		padding: 8rem 8rem 0rem 8rem;
	}

	.bLogo svg {
		max-width: 14rem;
		position: relative;
		top: -2rem;
	}

	/* ===========================================================
		We
	============================================================== */

	.bWe {
	/*
	  border-left: 8rem solid #f1f1f1;
	  border-right: 8rem solid #f1f1f1;
	  */
	}

	.bWe .bIn {
		padding: 4rem 8rem 6rem 8rem;
	}

	.bWe p {
		max-width: 33%;
	}

	.bWe h2 {
		margin-top: 14.5rem;
	}

	/* ===========================================================
		Intro
	============================================================== */

	.bIntro p {
		font-size: 3rem;
		max-width: 86%;
	}

	/* ===========================================================
		Mag
	============================================================== */

	.bMag .magTxt {
		padding: 3rem;
	}

	.bMag .magTxt h2,
	.bMag .magTxt p {
		font-size: 1.4rem;
	}

	/* ===========================================================
		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;
	}

}

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

	.bWe h2 {
		margin-top: 23.5rem;
	}

}

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

	.bWe h2 {
		margin-top: 28rem;
		font-size: 6rem;
	}

	.bMag .magTxt h2,
	.bMag .magTxt p {
		font-size: 1.6rem;
	}

}

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

	.bWe h2 {
		margin-top: 40rem;
	}

	.bMag .magTxt h2,
	.bMag .magTxt p {
		font-size: 1.8rem;
	}

}