/*   Styles /// Mobile First   */

/*   H E A D E R   */

header {
	display: none;
	position: fixed;
	left: 0;
	top: -10vh;
	width: 100%;
	height: 20vh;
	background-color: rgba(255, 255, 255, 1.0);
	-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2);
    -ms-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2);
    -o-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2);
	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2);
	text-align: center;
	z-index: 1000;
}

#dynamic-desktop-header { }

.desktop-header-up {
	top: -30vh;
}

.mobile-header {
	position: fixed;
	left: 0;
	top: -17.5vh;
	width: 100%;
	height: 27.5vh;
	background-color: rgba(255, 255, 255, 1.0);
	-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2);
    -ms-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2);
    -o-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2);
	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2);
	text-align: center;
	z-index: 1000;
}

.mobile-logo-container {
	position: absolute;
	left: 33%;
	top: 7.5%;
	width: 34%;
	z-index: 100;
}

.mobile-logo-container img {
	width: 100%;
}

/*   END – H E A D E R   */

/*   - - - - - - - - - - - - - - - - - - - - -    */

/*   M O B I L E  M E N U   */

/* Menu Burger Button */

.burger-menu {
  position: fixed; 
  top: 1.5vh;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 84px;
  height: 45px;
  text-align: center;
  z-index: 2000;
}

.burger-menu.active {
  top: 70vh;
}

/* Mobile Menu Items /// S T Y L E  C */

.mobile-menu-container {
  	position: fixed; 
  	top: -100vh;
	left: -1vw;
  	width: 102vw;
	height: 100vh;
  	text-align: center;
  	background-color: rgba(255, 255, 255, 1.0);
  	z-index: 1500;
	-webkit-opacity: 0.0;
  	-moz-opacity: 0.0;
  	-ms-opacity: 0.0;
  	-o-opacity: 0.0;
	opacity: 0.0;
}

.mobile-menu-container-visible {
	top: 0;
	-webkit-opacity: 1.0;
  	-moz-opacity: 1.0;
  	-ms-opacity: 1.0;
  	-o-opacity: 1.0;
	opacity: 1.0;
}

.mobile-menu-background {
	position: fixed;
	left: -1vw;
  	bottom: -28vh;
  	width: 102vw;
	height: 25vh;
	background: url(../img/background/mobilemenu_background_portrait.svg) no-repeat bottom right/cover;
	-webkit-opacity: 0.0;
  	-moz-opacity: 0.0;
  	-ms-opacity: 0.0;
  	-o-opacity: 0.0;
	opacity: 0.0;
	z-index: 1750;
}

@media only screen and (orientation: landscape) {
	.mobile-menu-background {
		background: url(../img/background/mobilemenu_background_landscape.svg) no-repeat bottom right/cover; }
}

.mobile-menu-background-visible {
	bottom: 0;
	-webkit-opacity: 1.0;
  	-moz-opacity: 1.0;
  	-ms-opacity: 1.0;
  	-o-opacity: 1.0;
	opacity: 1.0;
}

.mobile-menu-space-top {
	width: 100%;
	height: 12.5vh;
}

.mobile-menu-item {
	display: inline-block;
	width: 100%;
	height: 7.5vh;
	margin: 0.5vh 0;
	text-align: center;
	-webkit-opacity: 1.0;
  	-moz-opacity: 1.0;
  	-ms-opacity: 1.0;
  	-o-opacity: 1.0;
	opacity: 1.0;
}

.mobile-menu-item-closed {
	-webkit-transform: translateY(10vh);
	-moz-transform: translateY(10vh);
	-ms-transform: translateY(10vh);
	-o-transform: translateY(10vh);
	transform: translateY(10vh);
	-webkit-opacity: 0.0;
  	-moz-opacity: 0.0;
  	-ms-opacity: 0.0;
  	-o-opacity: 0.0;
	opacity: 0.0;
}

.mobile-menu-link {
	font-family: 'medium';
	font-size: 5.0vw;
  	letter-spacing: 0.2rem;
  	line-height: 100%; 
  	font-style: normal;
	font-weight: normal;
	text-transform: uppercase;
	color: rgba(0, 0, 0, 1.0);
	margin: auto;
}



/* IDs Mobile Menu Items */

#mobile-menu-item-1 { }

#mobile-menu-item-2 { }

#mobile-menu-item-3 { }

#mobile-menu-item-4 { }

#mobile-menu-item-5 { }

#mobile-menu-item-contact { }


/*   Hamburger Menu   */

.hamburger-elements {
	position: absolute;
	left: 50%;
	width: 60px;
	height: 15px;
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	transform: translateX(-50%);
}

.hamburger-element-1 {
	top: 0;
	background: url(../img/background/burgerimage_01.svg) no-repeat center center/cover;
}

.hamburger-element-2 {
	top: 12px;
	background: url(../img/background/burgerimage_02.svg) no-repeat center center/cover;
}

.hamburger-element-3 {
	top: 30px;
	background: url(../img/background/burgerimage_03.svg) no-repeat center center/cover;
	-webkit-opacity: 1.0;
  	-moz-opacity: 1.0;
  	-ms-opacity: 1.0;
  	-o-opacity: 1.0;
	opacity: 1.0;
}

.hamburger-element-4 {
	top: 30px;
	background: url(../img/background/burgerimage_04.svg) no-repeat center center/cover;
	-webkit-opacity: 0.0;
  	-moz-opacity: 0.0;
  	-ms-opacity: 0.0;
  	-o-opacity: 0.0;
	opacity: 0.0;
}

.hamburger-element-1-active {
	left:  15%;
	transform: rotate(30deg);
}

.hamburger-element-2-active {
	top: 0;
	left: 15%;
	transform: rotate(-30deg);
}

.hamburger-element-3-active {
	-webkit-opacity: 0.0;
  	-moz-opacity: 0.0;
  	-ms-opacity: 0.0;
  	-o-opacity: 0.0;
	opacity: 0.0;
}

.hamburger-element-4-active {
	-webkit-opacity: 1.0;
  	-moz-opacity: 1.0;
  	-ms-opacity: 1.0;
  	-o-opacity: 1.0;
	opacity: 1.0;
}

/*   END – Hamburger Menu   */

/*   END – M O B I L E  M E N U   */


/*   - - - - - - - - - - - - - - - - - - - - -    */


/*   D E S K T O P  M E N U   */

/* Logotype Desktop */

.desktop-custom-logotype {
  position: absolute; 
  bottom: 1.5vh;
  left: 4.0vw;
  height: 7vh;
  z-index: 1100;
}

.desktop-item-container {
  position: absolute; 
  bottom: 2vh;
  right: 5vw;
  z-index: 1100;
  text-align: right;
}

.desktop-item-container li {
  display: inline-block;
}

.desktop-menu-link {
	font-family: 'regular';
	font-size: 11px;
  	letter-spacing: 0.1rem;
  	line-height: 100%; 
  	font-style: normal;
	font-weight: normal;
	text-transform: uppercase;
	color: rgba(0, 0, 0, 1.0);
	margin: 0 0 0 20px;
	opacity: 0.5;
}

.desktop-menu-link:hover {
	opacity: 1.0;
}


/*   H E R O  C O N T A I N E R  */

.hero-container {
	position: relative;
	width: 100%;
  	height: 100vh;
	text-align: center;
  	background-color: rgba(255, 255, 255, 1.0);
}

/*   END – H E R O  C O N T A I N E R   */


/*   - - - - - - - - - - - - - - - - - - - - -    */


/*   C O N T E N T  C O N T A I N E R  */


.content-container {
	position: relative;
	width: 100%;
	text-align: center;
}

.content-container-socialmedia {
	position: relative;
	width: 100vw;
	height: 60vh;
	text-align: center;
	background: url(../img/background/background_socialmedia_landscape.jpg) no-repeat center center/cover;
}

.content-container-banner {
	position: relative;
	width: 100vw;
	text-align: center;
    background: url(../img/background/background_market.jpg) no-repeat center center/cover;
}

.content-container-banner-store {
	position: relative;
	width: 100vw;
	text-align: center;
    background: url(../img/promotionimages/promotion_fachl_mainz.jpg) no-repeat center center/cover;
}

/*   C O N T E N T  Sections  */

/* Produkte */
#content-section-1 {
	background-color: rgba(248, 247, 247, 1.0);
}

/* Kleinserein */
#content-section-2 {
	background-color: rgba(255, 255, 255, 1.0);
}

/* Imageslider */
#content-section-3 {
	background-color: rgba(255, 255, 255, 1.0);
}

/* Qualität */
#content-section-4 {
	background-color: rgba(248, 247, 247, 1.0);
}

/* Märkte */
#content-section-5 {
	background-color: rgba(255, 255, 255, 1.0);
}

/* About */
#content-section-6 {
	background-color: rgba(255, 255, 255, 1.0);
}

/* Produkte Beschreibungen */
#product-description {
	background-color: rgba(248, 247, 247, 1.0);
}

/* Produkte Übersicht */
#product-overview {
	background-color: rgba(255, 255, 255, 1.0);
}

/* Contact */
.contactBastianMail { }

/* Contact Request */
.contactBastianRequest { }

/* Phonecall */
.contactBastianPhonecall { }

/* Footer */
footer {
	position: relative;
	width: 100%;
	min-height: 70vh;
	padding: 15vh 0;
	text-align: center;
	background-color: rgba(245, 243, 241, 1.0);
	background: url(../img/background/background_footer_landscape.svg) no-repeat bottom right/cover;
}

/*   END – C O N T E N T  C O N T A I N E R   */


/*   - - - - - - - - - - - - - - - - - - - - -    */


/*   I M A G E S */

/* Illustration */

.illustration-image {
  display: block;
  width: 100%;
  margin: auto;
}

.hover-illustration-container {
  display: block;
  width: 74%;
  margin: auto;
}

.hover-illustration-container img {
  width: 100%;
}

.hover-illustration-image-overlay {
  position: absolute;
  left: 13%;
  top: 0;
  width: 74%;
  opacity: 0.0;
}

.hover-illustration-image-overlay:hover {
  opacity: 1.0;
}

.hover-illustration-image-overlay img {
  width: 100%;
}

/* Content Image */

.content-image { 
    width: 100%;
}

.content-image-50 { 
    width: 50%;
}

.content-image-60 { 
    width: 60%;
}

.content-image-75 { 
    width: 75%;
}

/* Mood Image */

.mood-image {
  width: 80%;
  margin: auto;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  -o-border-radius: 12px;
  border-radius: 12px;
}

/* Product icons */

.product-icon-container {
  display: inline-block;
  width: 260px;
  margin: auto;
  margin-left: 10px;
  margin-right: 10px;
  text-align: center;
}

.product-icon-wrapper {
  margin: auto;
  width: 260px;
}

.product-icon-wrapper img {
  width: 100%;
}

.product-icon-textwrapper {
  width: 220px;
  margin: auto;
  text-align: center;
}

/* Credit Image */

.brandCreditImage { 
    height: 250px;
	margin-right: -10px;
}

/*   END – I M A G E S   */


/*   - - - - - - - - - - - - - - - - - - - - -    */


/*   T E X T  */

/* Text Container */

.text-wrapper {
  width: 85%;
  max-width: 620px;
  position: relative;
  margin: auto;
}

.text-wrapper-legal {
  width: 90%;
  max-width: 620px;
  position: relative;
  margin-left: 5%;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}


/*   END – T E X T   */


/*   - - - - - - - - - - - - - - - - - - - - -    */


/*   T Y P O G R A P H Y  */

.titel {
  font-family: 'light';
  font-style: normal;
  font-size: 24px;
  letter-spacing: 0.25rem;
  line-height: 130%; 
  text-transform: uppercase;
}

.lead {
  font-family: 'light';
  font-style: normal;
  font-size: 14px;
  letter-spacing: 0.15rem; 
  line-height: 160%;
  text-transform: uppercase;
}

.infotext {
  font-size: 16px;
  letter-spacing: 0.05rem;
  line-height: 170%;
  font-family: 'light';
  font-style: normal; }

.icontext {
  font-size: 11px;
  line-height: 160%;
  font-family: 'regular';
  font-weight: normal;
  color: rgba(0, 0, 0, 1.0);
  text-transform: uppercase;
  letter-spacing: 0.15rem; }

.contacttext {
  display: block;
  font-family: 'regular';
  font-weight: normal;
  font-size: 14px;
  line-height: 160%;
  letter-spacing: 0.15rem;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 1.0);
}

.footertext {
  display: block;
  font-family: 'regular';
  font-weight: normal;
  font-size: 11px;
  line-height: 160%;
  letter-spacing: 0.15rem;
  text-transform: uppercase;
  color: rgba(165, 163, 161, 1.0);
  margin: 40px 10px 0 10px;
}

.contacttext:hover  {
  color: rgba(165, 163, 161, 1.0);
}

.footertext:hover {
  color: rgba(0, 0, 0, 1.0);
}


/* Weigths */

.negative {
  letter-spacing: 0.11rem;
  color: rgba(255, 255, 255, 1.0);
}

.bold {
  font-family: 'regular';
}

.bold-versal {
  font-family: 'regular';
}


/* Colors */

.color-white {
	color: rgba(255, 255, 255, 1.0);
}

.color-black {
	color: rgba(0, 0, 0, 1.0);
}

.color-gray-01 {
	color: rgba(105, 103, 101, 1.0);
}

.color-gray-02 {
	color: rgba(135, 133, 131, 1.0);
}

.color-gray-03 {
	color: rgba(165, 163, 161, 1.0);
}

.color-jv-red {
	color: rgba(230, 0, 70, 1.0);
}

/* Hintegrundfarben */

.background-color-white {
	background-color: rgba(255, 255, 255, 1.0);
}
.background-color-gray {
	background-color: rgba(248, 247, 247, 1.0);
}
.background-color-gray-dark {
	background-color: rgba(49, 48, 48, 1.0);
}
.background-color-black {
	background-color: rgba(0, 0, 0, 1.0);
}


/*   END – T Y P O G R A P H Y   */

/*   - - - - - - - - - - - - - - - - - - - - -    */


/*   V I D E O  */

/*   END – V I D E O   */


/*   - - - - - - - - - - - - - - - - - - - - -    */


/*  S L I D E S H O W  */

/*  Simple Hero Slider — mobile first */

#slideshow {
  position: absolute;
  bottom: 15%;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#slideshow > div {
  position: absolute;
  bottom: 0;
  left: 0;
}

#slideshow img {
  width: 220%;
	-webkit-transform: translateX(-27.5%);
	-moz-transform: translateX(-27.5%);
	-ms-transform: translateX(-27.5%);
	-o-transform: translateX(-27.5%);
	transform: translateX(-27.5%);
}

/*   H E R O  S L I D E S H O W */


/*   - - - - - - - - - - - - - - - - - - - - -    */


/*   I C O N S */


.iconWrapper {
  width: 85%;
  max-width: 620px;
  position: relative;
  text-align: center;
  margin: auto;
}

.iconSize-45 {
  width: 45px;
  margin: 0 10px;
}

.iconSize-90 {
  width: 90px;
  margin: 0 5px;
}

.iconSize-180 {
  width: 180px;
}

.iconSize-300 {
  width: 300px;
}


/*   END – I C O N S   */


/*   - - - - - - - - - - - - - - - - - - - - -    */


/* B U T T O N S */

/* Button Positiv */

.button  {
  display: inline-block;
  padding: 10px 15px 12px 15px;
  font-family: 'regular';
  font-size: 12px;
  line-height: 100%;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  -webkit-border-radius: 18px;
  -moz-border-radius: 18px;
  -ms-border-radius: 18px;
  -o-border-radius: 18px;
  border-radius: 18px; }

.button:hover  {
  cursor: pointer; }


/* Button Colors */

.button-color-gray {
  border: 1px solid rgba(175, 173, 171, 1.0);
  background-color: rgba(175, 173, 171, 1.0);
  color: rgba(255, 255, 255, 1.0);
}

.button-color-gray:hover {
  border: 1px solid rgba(135, 133, 131, 1.0);
  background-color: rgba(135, 133, 131, 1.0);
  color: rgba(255, 255, 255, 1.0);
}

.button-color-white {
  border: 1px solid rgba(255, 255, 255, 1.0);
  background-color: rgba(255, 255, 255, 0.0);
  color: rgba(255, 255, 255, 1.0);
}

.button-color-white:hover {
  border: 1px solid rgba(255, 255, 255, 1.0);
  background-color: rgba(255, 255, 255, 1.0);
  color: rgba(0, 0, 0, 1.0);
}


/*   END – B U T T O N S  */

/*   - - - - - - - - - - - - - - - - - - - - -    */


/*   S P A C E R */

/*   Padding */

.padd-imageslider {
	padding: 10vh 0 0 0;
}

.padd-10-0-vh {
	padding: 10vh 0 0 0;
}

.padd-0-15-vh {
	padding: 0 0 15vh 0;
}

.padd-15-0-vh {
	padding: 15vh 0 0 0;
}

.padd-10-10-vh {
	padding: 10vh 0;
}

.padd-10-15-vh {
	padding: 10vh 0 15vh 0;
}

.padd-15-10-vh {
	padding: 15vh 0 10vh 0;
}

.padd-15-15-vh {
	padding: 15vh 0;
}

.padd-15-20-vh {
	padding: 15vh 0 20vh 0;
}

.padd-20-20-vh {
	padding: 20vh 0;
}

.padd-15-5-vh {
	padding: 15vh 0 5vh 0;
}

/*   Margin */

.space-top-5 {
  margin-top: 5px;
}

.space-top-10 {
  margin-top: 10px;
}

.space-top-15 {
  margin-top: 15px;
}

.space-top-20 {
  margin-top: 20px;
}

.space-top-30 {
  margin-top: 30px;
}

.space-top-40 {
  margin-top: 40px;
}

.space-top-45 {
  margin-top: 45px;
}

.space-top-60 {
  margin-top: 60px;
}

.space-top-75 {
  margin-top: 75px;
}

.space-top-33-percent {
  margin-top: 33%;
}

.space-top-15vh {
  margin-top: 15vh;
}

/*   END – S P A C E R   */


/*   - - - - - - - - - - - - - - - - - - - - -    */


/*   U X – E L E M E N T S */

.link:hover {
	cursor: pointer;
}

.link-hover-50:hover {
	cursor: pointer;
	opacity: 0.5;
}

.link-red:hover {
	color: rgba(230, 0, 70, 1.0);
	cursor: pointer;
}

.mobile-break {
	display: inline-block;
}

/*   Icon Scrollhinweis */

.scrollhinweis-container {
	position: absolute;
	left: 0;
	bottom: -33vh;
	margin: auto;
	width: 100%;
	height: 50vh;
	background: url(../img/uximages/gradient_bottom.png) no-repeat bottom center/cover;
	text-align: center;
}

.icon-scrollhinweis {
	margin: auto;
	margin-top: 10vh;
	height: 100px;
	width: 100px;
	background: url(../img/icons/icon_touch.svg) no-repeat center center/cover;
	opacity: 1.0;
}

@media only screen and (orientation: landscape) { 
	.icon-scrollhinweis {
		margin-top: 20vh; }
}

@media only screen and (min-width: 1170px) { 
	.icon-scrollhinweis {
  		background: url(../img/icons/icon_scroll.svg) no-repeat center center/cover; }
}

.scrollhinweis-container-on {
	bottom: 0;
}


/*   Icon Swipehinweis */

.swipehinweis-container {
	display: none;
	position: absolute;
	left: 0;
	bottom: -50vh;
	margin: auto;
	width: 100%;
	height: 50vh;
	background: url(../img/uximages/gradient_bottom.png) no-repeat bottom center/cover;
	text-align: center;
}

.icon-swipehinweis {
	margin: auto;
	margin-top: 10vh;
	height: 90px;
	width: 150px;
	margin-top: 27.5vh;
	background: url(../img/icons/icon_drag_swipe.svg) no-repeat center center/cover;
	opacity: 1.0;
}

/*
@media only screen and (orientation: landscape) { 
	.icon-swipehinweis {
		margin-top: 20vh; }
}
*/

@media only screen and (min-width: 1170px) { 
	.swipehinweis-container {
  		display: block; }
}

.swipehinweis-container-on {
	bottom: 0;
}

/*   Shift Animation*/

.shift-10vh {
	-webkit-transform: translateY(10vh);
	-moz-transform: translateY(10vh);
	-ms-transform: translateY(10vh);
	-o-transform: translateY(10vh);
	transform: translateY(10vh);
	opacity: 0.0;
}

/*   END – U X – E L E M E N T S   */


/*   - - - - - - - - - - - - - - - - - - - - -    */


/*   A N I M A T I O N S  */


/*  Hover Icons  */

.hover-icon:hover {
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.2); }


/*  Hover Images  */

.hover-image:hover {
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -ms-transform: scale(1.05);
  -o-transform: scale(1.05);
  transform: scale(1.05); }


/*   inView Elements */

.animationElement {
  	transition: transform .6s .0s ease-in-out;
  	-webkit-animation-fill-mode: forwards;
  	animation-fill-mode: forwards;
  	-webkit-opacity: 0;
  	-moz-opacity: 0;
  	-ms-opacity: 0;
  	-o-opacity: 0;
  	opacity: 0; }

.inView {
	-webkit-opacity: 1.0;
  	-moz-opacity: 1.0;
  	-ms-opacity: 1.0;
  	-o-opacity: 1.0;
  	opacity: 1.0;
    -webkit-transition: all 0.6s ease-in-out;
  	-moz-transition: all 0.6s ease-in-out;
  	-ms-transition: all 0.6s ease-in-out;
  	-o-transition: all 0.6s ease-in-out;
  	transition: all 0.6s ease-in-out; }

@-webkit-keyframes pulse {
  10% {
    opacity: 1; }
  20% {
    opacity: 0.5; }
  30% {
    opacity: 1; }
  40% {
    opacity: 0.5; }
  50% {
    opacity: 1; }
  60% {
    opacity: 0.5; }
  70% {
    opacity: 1; }
  80% {
    opacity: 0.5; }
  90% {
    opacity: 1; }
  100% {
    opacity: 0; } }
	
@keyframes pulse {
  10% {
    opacity: 1; }
  20% {
    opacity: 0.5; }
  30% {
    opacity: 1; }
  40% {
    opacity: 0.5; }
  50% {
    opacity: 1; }
  60% {
    opacity: 0.5; }
  70% {
    opacity: 1; }
  80% {
    opacity: 0.5; }
  90% {
    opacity: 1; }
  100% {
    opacity: 0; } }

/*   Shift Elements  */

.shiftView {
	transform: translateY(10vh);
}


/*   END – A N I M A T I O N S   */


/*   - - - - - - - - - - - - - - - - - - - - -    */


/*   T R A N S I T I O N S  */

/*   Cubic  */

.trans-cubic-250 {
	-webkit-transition: all 0.25s cubic-bezier(0.87, -0.41, 0.19, 1.44);
	-moz-transition: all 0.25s cubic-bezier(0.87, -0.41, 0.19, 1.44);
	-ms-transition: all 0.25s cubic-bezier(0.87, -0.41, 0.19, 1.44);
	-o-transition: all 0.25s cubic-bezier(0.87, -0.41, 0.19, 1.44);
	transition: all 0.25s cubic-bezier(0.87, -0.41, 0.19, 1.44);
}

.trans-cubic-500 {
	-webkit-transition: all 0.5s cubic-bezier(0.87, -0.41, 0.19, 1.44);
	-moz-transition: all 0.5s cubic-bezier(0.87, -0.41, 0.19, 1.44);
	-ms-transition: all 0.5s cubic-bezier(0.87, -0.41, 0.19, 1.44);
	-o-transition: all 0.5s cubic-bezier(0.87, -0.41, 0.19, 1.44);
	transition: all 0.5s cubic-bezier(0.87, -0.41, 0.19, 1.44);
}

.trans-cubic-750 {
	-webkit-transition: all 0.75s cubic-bezier(0.87, -0.41, 0.19, 1.44);
	-moz-transition: all 0.75s cubic-bezier(0.87, -0.41, 0.19, 1.44);
	-ms-transition: all 0.75s cubic-bezier(0.87, -0.41, 0.19, 1.44);
	-o-transition: all 0.75s cubic-bezier(0.87, -0.41, 0.19, 1.44);
	transition: all 0.75s cubic-bezier(0.87, -0.41, 0.19, 1.44);
}

.trans-cubic-1000 {
	-webkit-transition: all 1.0s cubic-bezier(0.87, -0.41, 0.19, 1.44);
	-moz-transition: all 1.0s cubic-bezier(0.87, -0.41, 0.19, 1.44);
	-ms-transition: all 1.0s cubic-bezier(0.87, -0.41, 0.19, 1.44);
	-o-transition: all 1.0s cubic-bezier(0.87, -0.41, 0.19, 1.44);
	transition: all 1.0s cubic-bezier(0.87, -0.41, 0.19, 1.44);
}

.trans-cubic-1500 {
	-webkit-transition: all 1.5s cubic-bezier(0.87, -0.41, 0.19, 1.44);
	-moz-transition: all 1.5s cubic-bezier(0.87, -0.41, 0.19, 1.44);
	-ms-transition: all 1.5s cubic-bezier(0.87, -0.41, 0.19, 1.44);
	-o-transition: all 1.5s cubic-bezier(0.87, -0.41, 0.19, 1.44);
	transition: all 1.5s cubic-bezier(0.87, -0.41, 0.19, 1.44);
}

/*   Ease  */

.ease-100 {
    -webkit-transition: all 0.1s ease-in-out;
  	-moz-transition: all 0.1s ease-in-out;
  	-ms-transition: all 0.1s ease-in-out;
  	-o-transition: all 0.1s ease-in-out;
  	transition: all 0.1s ease-in-out;
}

.ease-250 {
    -webkit-transition: all 0.25s ease-in-out;
  	-moz-transition: all 0.25s ease-in-out;
  	-ms-transition: all 0.25s ease-in-out;
  	-o-transition: all 0.25s ease-in-out;
  	transition: all 0.25s ease-in-out;
}

.ease-500 {
    -webkit-transition: all 0.5s ease-in-out;
  	-moz-transition: all 0.5s ease-in-out;
  	-ms-transition: all 0.5s ease-in-out;
  	-o-transition: all 0.5s ease-in-out;
  	transition: all 0.5s ease-in-out;
}

.ease-750 {
    -webkit-transition: all 0.75s ease-in-out;
  	-moz-transition: all 0.75s ease-in-out;
  	-ms-transition: all 0.75s ease-in-out;
  	-o-transition: all 0.75s ease-in-out;
  	transition: all 0.75s ease-in-out;
}

.ease-1000 {
    -webkit-transition: all 1.0s ease-in-out;
  	-moz-transition: all 1.0s ease-in-out;
  	-ms-transition: all 1.0s ease-in-out;
  	-o-transition: all 1.0s ease-in-out;
  	transition: all 1.0s ease-in-out;
}

.ease-2000 {
    -webkit-transition: all 2.0s ease-in-out;
  	-moz-transition: all 2.0s ease-in-out;
  	-ms-transition: all 2.0s ease-in-out;
  	-o-transition: all 2.0s ease-in-out;
  	transition: all 2.0s ease-in-out;
}

/*   END – T R A N S I T I O N S   */


/*   - - - - - - - - - - - - - - - - - - - - -    */


/*   - - - - - - - - - - - - - - - - - - - - -    */


/*   M E D I A  Q U E R I E S /// Mobile First  */

/* Switch Mobile Menu to Desktop Menu  */

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

	.mobile-header, .burger-menu {
  		display: none; }

	header  {
  		display: block; }
	}


/*   - - - - - - - - - - - - - - - - - - - - -    */


/* Default View /// Portrait View /// Smartphone  */

/* Portrait View /// Tablet Portrait */

@media only screen and (min-width: 600px) and (orientation: portrait) { 

	.mobile-header {
		top: -10vh;
		height: 17vh; }
	
	.mobile-logo-container {
		left: 37.5%;
		top: 7.5%;
		width: 25%; }

	.burger-menu {
  		top: 1vh; }

	.mobile-menu-link {
		font-family: 'regular';
		font-size: 3.0vw; }
	
	#slideshow {
  		bottom: 6%; }

	#slideshow img {
		width: 200%;
		-webkit-transform: translateX(-25%);
		-moz-transform: translateX(-25%);
		-ms-transform: translateX(-25%);
		-o-transform: translateX(-25%);
		transform: translateX(-25%); }
	
	.illustration-image, .hover-illustration-container {
  		width: 60%; }
	.hover-illustration-image-overlay {
		left: 20%;
  		width: 60%; }
	
	.padd-imageslider {
		padding: 7vh 0 0 0; }
	
	/* Typography */
	
	.titel {
    	font-size: 30px;
		line-height: 125%; }
   	.lead {
    	font-size: 16px;
    	line-height: 155%;}
   	.infotext {
		letter-spacing: 0.045rem;
		line-height: 165%; }
   	.negative {
    	letter-spacing: 0.08rem; }
   	.bold {
    	letter-spacing: 0.04rem; }
	.footertext {
  		display: inline-block; }
	
	.mobile-break {
		display: none; }
}


/* Landscape View */

/*  Simple Hero Slider — mobile first */
@media only screen and (orientation: landscape) {
	
	#slideshow {
  		bottom: 0; }

	#slideshow img {
  		width: 100%;
		-webkit-transform: translateX(0);
		-moz-transform: translateX(0);
		-ms-transform: translateX(0);
		-o-transform: translateX(0);
		transform: translateX(0); }
}


/* Landscape View /// Small Desktop and Tablet Landscape */

@media only screen and (min-width: 850px) and (orientation: landscape) {
	
	.mobile-header {
		top: -10vh;
		height: 21vh; }
	
	.burger-menu {
  		top: 2.5vh; }

	.mobile-logo-container {
		left: 41%;
		top: 16%;
		width: 18%; }
	
	.mobile-menu-link {
		font-family: 'regular';
		font-size: 3.0vh; }
	.illustration-image, .hover-illustration-container {
  		width: 50%; }
	.hover-illustration-image-overlay {
		left: 25%;
  		width: 50%; }
	
	/* Product Icons */
	
	.product-icon-container {
  		display: inline-block;
  		width: 220px;
  		margin-left: 0;
  		margin-right: 0; }
	
	.product-icon-wrapper {
  		width: 220px; }
	
	/* Typography */
	
	.titel {
    	font-size: 30px;
		line-height: 125%; }
   	.lead {
		font-size: 16px;
		line-height: 155%; }
   	.infotext {
		letter-spacing: 0.045rem; 
		line-height: 165%; }
   	.negative {
    	letter-spacing: 0.08rem; }
   	.bold {
    	letter-spacing: 0.04rem; }
	.footertext {
  		display: inline-block; }
	
	.mobile-break {
		display: none; }
}


/* Portrait View /// Tablet Portrait iPad Pro */

@media only screen and (min-width: 1000px) and (orientation: portrait) {
	
	.mobile-header {
		top: -10vh;
		height: 16vh; }
	
	.burger-menu {
  		top: 1.5vh; }

	.illustration-image, .hover-illustration-container {
  		width: 50%; }
	
	.hover-illustration-image-overlay {
		left: 20%;
  		width: 60%; }
	
	/* Product Icons */
	
	.product-icon-container {
  		display: inline-block;
  		width: 300px;
  		margin-left: 32px;
  		margin-right: 20px; }
	
	.product-icon-wrapper {
  		width: 300px; }
	
	.padd-imageslider {
		padding: 7vh 0 0 0; }
	
	/* Typography */
	
	.titel {
    	font-size: 36px;
		line-height: 120%; }
   	.infotext {
		font-size: 17px;
		line-height: 160%;
		letter-spacing: 0.045rem; }
   	.negative {
    	letter-spacing: 0.06rem; }
   	.bold {
    	letter-spacing: 0.04rem; }
}



/* Landscape View /// Desktop */

@media only screen and (min-width: 1170px) {
	
	.illustration-image, .hover-illustration-container {
  		width: 50%; }
	
	.hover-illustration-image-overlay {
		left: 25%;
  		width: 50%; }
	
	.mobile-logo-container {
		left: 45%;
		top: 6%;
		width: 10%; }
	
	#slideshow {
  		bottom: -1%; }
	
	/* Typography */
	
	.titel {
    	font-size: 36px;
		line-height: 125%; }
   	.infotext  {
		line-height: 160%;
		letter-spacing: 0.045rem; }
   	.negative {
    	letter-spacing: 0.06rem; }
   	.bold {
		letter-spacing: 0.03rem; }
}

/*   - - - - - - - - - - - - - - - - - - - - -    */

/* Special Devices */

@media only screen and (min-height: 800px) and (orientation: landscape) {
	
	#slideshow {
  		bottom: 7.5%; }
}

/* Landscape View /// Tablet Landscape iPads */

@media only screen and (aspect-ratio: 4/3) {
	.mobile-logo-container {
		top: 15%; }
	
	#slideshow {
  		bottom: 7.5%; }
}

@media only screen and (aspect-ratio: 1024/768) {
	.mobile-logo-container {
		left: 41%;
		top: 7.5%;
		width: 18%; }
	
	#slideshow {
  		bottom: 7.5%; }
}

@media only screen and (aspect-ratio: 1366/1024) {
	.mobile-logo-container {
		left: 43%;
		top: 7.5%;
		width: 14%; }
	
	#slideshow {
  		bottom: 7.5%; }
	
	#slideshow img {
		width: 120%;
		-webkit-transform: translateX(-7.5%);
		-moz-transform: translateX(-7.5%);
		-ms-transform: translateX(-7.5%);
		-o-transform: translateX(-7.5%);
		transform: translateX(-7.5%); }
}

/* Landscape View /// Smartphone */

@media only screen and (orientation: landscape) and (max-width: 850px) {
	
	.mobile-header {
		top: -10vh;
		height: 25vh; }
	
	.mobile-logo-container {
		left: 45%;
		top: 3.75%;
		width: 10%; }

	.mobile-menu-space-top {
		width: 100%;
		height: 15vh; }

	.mobile-menu-item {
		width: 49%;
		height: 7.5vh;
		margin: 3vh 0;
		text-align: center; }
	
	.mobile-menu-link {
		font-size: 5.0vh; }
	
	.illustration-image, .hover-illustration-container {
  		width: 50%; }
	.hover-illustration-image-overlay {
		left: 25%;
  		width: 50%; }
	
	/* Typography */
	.footertext {
  		display: inline-block; }
}

/* Portrait View /// iPhone SE */

@media only screen and (orientation: portrait) and (max-width: 320px) {
	.mobile-header {
		top: -14vh;
		height: 26vh; }
}

@media only screen and (orientation: landscape) and (max-width: 600px) {
	
	.mobile-header {
		top: -10vh;
		height: 28vh; }
	
	.burger-menu {
  		top: 1.5vh; }

	.illustration-image, .hover-illustration-container {
  		width: 50%; }
	.hover-illustration-image-overlay {
		left: 25%;
  		width: 50%; }
	
	/* Typography */
	.footertext {
  		display: inline-block; }
}

@media only screen and (orientation: landscape) and (max-width: 900px) {

	.content-container-socialmedia {
		height: 100vh; }
}


/* DELET BEFORE LAUNCH */

/* Steuerung Mobile Header */

.mobile-dynamic-header { }

/*Dynamic Burger Menu { }*/

.mobile-header-up {
	top: -30vh;
}