/*
Theme Name: Afri AI
Author: WvonZ | Wallek von Zitzewitz Werbeagentur GmbH
Version: 1.2
Author URI: http://www.wvonz.com/
Description: Dieses responsive Theme und alle enthaltenen Templates sind exklusiv für die AI-Website von afri.
Tags: afri, Cola, erfrischend, anders, Pop-Kultur, Koffein, Energy, Energydrink, AI, KI, A.I., K.I., Wallek von Zitzewitz, WvonZ
*/

/*#pinfo {
    display: none;
    position: fixed;
    bottom: 0;
    right: 0;
    padding: 10px 20px;
    border-radius: 8px;
    background-color: rgba(255,0,0,0.4);
    color: #fff;
    font-size: 11px;
    line-height: 16px;
    z-index: 1005;
}*/

/*----------------------------------Fonts----------------------------------*/
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/roboto-v30-latin-regular.woff2') format('woff2'), 
       url('fonts/roboto-v30-latin-regular.woff') format('woff');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/roboto-v30-latin-700.woff2') format('woff2'), 
       url('fonts/roboto-v30-latin-700.woff') format('woff');
}
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/roboto-condensed-v25-latin-regular.woff2') format('woff2'), 
       url('fonts/roboto-condensed-v25-latin-regular.woff') format('woff');
}
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/roboto-condensed-v25-latin-700.woff2') format('woff2'), 
       url('fonts/roboto-condensed-v25-latin-700.woff') format('woff');
}
@font-face {
  font-family: 'Veneer';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/Veneer.woff2') format('woff2'), 
       url('fonts/Veneer.woff') format('woff');
}


/*----------------------------------Main----------------------------------*/
* {
	outline-width: 0;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
body {
	font-family: "Roboto", Helvetica, Arial, sans-serif;
    background-color: #000;
}
body.fixed {
    position: fixed;
}
.clearfix {
	float: none;
	clear: both;
}
.wrapper {
    position: relative;
	max-width: 1250px;
	padding: 0 25px;
	margin: 0 auto;
}
.innerwrapper {
    position: relative;
	max-width: 1000px;
	padding: 0;
	margin: 0 auto;
}
h1 {
    font-family: "Veneer", "Roboto", Helvetica, Arial, sans-serif;
    font-size: 44px;
    line-height: 48px;
    margin: 0 0 26px 0;
    color: #fff;
}
h2 {
    margin: 0 0 12px 0;
    font-family: "Roboto Condensed", Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 17px;
    text-transform: uppercase;
    color: #fff;
}
a {
	text-decoration: none;
	color: #000;
}
a:hover {
	color: #867d73;
}
em, italic {
    font-style: italic;
}
strong, b {
    font-weight: 700;
}
p {
    margin: 0 0 16px 0;
}
.cta {
    display: inline-block;
    padding: 14px 40px 8px 40px;
    margin: 25px 0 25px 0;
    border-radius: 30px;
    background-color: #af0000;
    color: #fff;
    font-family: "Veneer", "Roboto", Helvetica, Arial, sans-serif;
    font-size: 22px;
    line-height: 22px;
    text-transform: uppercase;
    -webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
    cursor: pointer;
}
.cta:hover {
    background-color: #fff;
    color: #000;
}
ol, ul {
    margin: 0 0 0 22px;
}

/*----------------------------------Header----------------------------------*/

/*----------Top-Header----------*/
#topheader {
    position: fixed;
    width: 100%;
    top: 0;
    display: none;
    z-index: 1000;
}
#topheader.open {
    position: fixed;
    width: 100%;
    display: block;
}
#ai_container {
    width: calc(100% - 250px);
    height: 200px;
    margin: 0 0 0 150px;
}
#ai_palm {
    padding: 0 40px 0 0;
    width: 76px;
    height: 140px;
    margin: 30px 0 0 0;
    background-repeat: no-repeat;
    background-position: center center;
    float: left;
}
#ai_text {
    width: calc(100% - 130px);
    padding: 30px 0 0 0;
    float: left;
}
#ai_block {
    padding: 10px 0;
}
#ai_headline {
    margin: 0 0 -15px 0;
}
#ai_intro {
    font-size: 14px;
    line-height: 20px;
    color: #fff;
}
#ai_intro h1 {
    margin: 0 0 0 0;
}
#ai_intro a {
    color: #fff;
    text-decoration: underline;
}
#ai_intro a:hover {
    color: #000;
    text-decoration: none;
}
#ai_right {
    text-align: right;
    font-family: Courier, serif;
    font-size: 15px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
    vertical-align: bottom;
}
#ai_prompts {
    position: absolute;
    width: 180px;
    right: 20px;
    bottom: -10px;
    margin: 0 0 30px 0;
    color: rgba(255,255,255,0.5);
    cursor: pointer;
}
#ai_prompts:hover {
    color: #000;
}
#ai_prompts.off {
    display: none;
}
#ai_select_smart {
    display: none;
}
#ai_trigger {
    position: absolute;
    width: 60px;
    height: 42px;
    left: 50%;
    margin: -1px 0 0 -30px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    cursor: pointer;
    opacity: 1;
    -webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
#ai_trigger:hover {
    opacity: 0.8;
}
#ai_themes form {
    margin: -10px 0 0 0;
}
#ai_select {
    display: block;
    font-size: 13px;
    height: 30px;
    margin: 0 0 3px 0;
    padding: 0 35px 0 13px;
    border-radius: 5px;
    font-family: "Roboto", Helvetica, Arial, sans-serif;
    color: #fff;
    background-color: #222;
    border: none;
    -moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
    background-image: url("images/DoubleArrow.svg");
    background-repeat: no-repeat;
    background-position: right +10px center;
}
#ai_close {
    position: absolute;
    width: 13px;
    height: 13px;
    top: 20px;
    right: 25px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    background-image: url("images/Close.svg");
    opacity: 1;
    -webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
    cursor: pointer;
}
#ai_close:hover {
    opacity: 0.7;
}

/*----------Main-Header----------*/
header {
	width: 100%;
}
#logo_circle {
    position: fixed;
    width: 140px;
    height: 140px;
    margin: -28px 0 0 -20px;
    display: block;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.5);
    box-shadow: 5px 5px 10px rgba(0,0,0,0.7);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    z-index: 1001;
    -webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
#logo_darker {
    position: absolute;
    display: block;
    border-radius: 50%;
    width: 138px;
	height: 138px;
    margin: 1px 0 0 1px;
    background-color: rgba(0,0,0,0.4);
    -webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
#logo_circle:hover #logo_darker {
    background-color: rgba(0,0,0,0);
}
#logo {
    position: absolute;
    display: block;
    width: 100px;
	height: 100px;
    margin: 30px 0 0 20px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    filter: drop-shadow(0px 0px 3px rgb(0,0,0,0.9));
    -webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
#logo_circle.open {
    width: 200px;
    height: 200px;
    margin: 120px 0 0 -40px;
}
#logo_circle.open #logo_darker {
    width: 198px;
	height: 198px;
}
#logo_circle.open #logo {
    width: 160px;
	height: 160px;
    margin: 22px 0 0 20px;
}
#header_bar {
    top: 0;
    position: fixed;
    width: 100%;
    height: 75px;
    background-color: #000;
    border-bottom: 1px solid #222;
    -webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
    z-index: 1000;
}
#header_bar.open {
    top: 200px;
}
.headerspace {
    width: 100%;
    height: 75px;
    -webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.headerspace.open {
    height: 275px;
}

/*----------Menu----------*/
#smartmenu {
    display: none;
}
#menu {
    margin: 29px 0 0 0;
    font-family: "Veneer", "Roboto", Helvetica, Arial, sans-serif;
    float: right;
}
#menu ul li {
    margin: 0 0 0 25px;
    list-style: none;
    float: left;
}
#menu ul li a {
    padding: 0 0 22px 0;
    color: #fff;
    font-size: 22px;
    -webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}
#menu ul li a:hover {
    opacity: 0.6;
}
#menu ul li .sub-menu {
    display: none;
    position: absolute;
    top: 75px;
    margin: 0 0 0 -17px;
    padding: 5px 0 6px 0 !important;
    background-color: #32353a;
    box-shadow: 2px 5px 8px rgba(0,0,0,0.5);
    z-index: 999;
}
#menu ul li .sub-menu li {
    margin: 0;
    padding: 0 15px 0 15px;
    -webkit-transition: ease all 0.3s;
	-moz-transition: ease all 0.3s;
	transition: ease all 0.3s;
    float: none;
    clear: both;
}
#menu ul li .sub-menu li a {
    display: block;
    padding: 8px 0 6px 0;
    font-family: "Roboto Condensed", Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 13px;
    line-height: 15px;
    text-transform: uppercase;
}
#menu ul li .sub-menu li:hover {
    background-color: #000;
}
#menu ul li .sub-menu li:hover a {
    opacity: 1;
}
#hamburger {
    display: none;
}
.grey {color: #bbb;}
.yellow {color: #ff0;}
.orange {color: #e0770e;}
.red {color: #dd0200;}

/*----------------------------------Content----------------------------------*/
img.alignright {float: right; margin: 0 0 1em 1em;}
img.alignleft {float: left; margin: 0 1em 1em 0;}
img.aligncenter {display: block; margin-left: auto; margin-right: auto;}
.alignright {float: right; }
.alignleft {float: left; }
.aligncenter {display: block; margin-left: auto; margin-right: auto;}
input:focus, select:focus, textarea:focus, button:focus {outline: none;}


/*----------------------------------Modules----------------------------------*/

/*----------1-Spalter & 2-Spalter----------*/
.module.col1, .module.col2 {
    padding: 100px 0 10px 0;
    -moz-hyphens: auto;
    -o-hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}
.module.col1 a, .module.col2 a {
    color: #fff;
}
.module.col1 a:hover, .module.col2 a:hover {
    color: #af0000;
}

/*----------Hero-Slider----------*/
.slider {
    position: relative;
    margin: 0 auto;
    max-width: 1800px;
}
.slider .royalSlider {
    position: relative;
    width: 100%;
    max-height: 1050px;
}
.new_slider_desktop .royalSlider {
    position: relative;
    width: 100%;
    max-height: 1120px;
}
.new_slider_mobile {
    display: none;
}
.slider .blend {
    margin: 0;
    padding: 0;
}
.slider .slide_image {
    position: relative;
}
.slider.wrap .wrapper {
    max-width: 100%;
    padding: 0;
}
.hero_headline {
    position: absolute;
    top: 9%;
    left: 4%;
    z-index: 800;
}
.hero_head {
    display: block;
    font-family: "Veneer", "Roboto", Helvetica, Arial, sans-serif;
    font-size: clamp(30px, 3.8vw, 60px);
    line-height: auto;
    color: #fff;
    text-transform: uppercase;
    white-space: nowrap;
    transform: rotate(-3deg);
}
.hero_text {
    display: inline-block;
    padding: 17px 20px 0 20px;
    background-color: rgba(0,0,0,0.8);
}
.hero_head:nth-child(2) .hero_text {
    margin: 0 0 0 10%;
    padding: 16px 20px 0 20px;
}
.hero_text, .hero_text h1, .hero_text p {
    margin: 0;
    font-size: clamp(30px, 3.8vw, 60px);
    line-height: auto;
}
.hero_packshot {
    position: absolute;
    max-width: 231px;
    width: 16%;
    height: 100%;
    z-index: 20;
    left: 6%;
    bottom: 0;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom -50% left;
}
.bottom_blend {
    position: absolute;
    display: block;
    bottom: 0;
    width: 100%;
    height: 75px;
    background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
    z-index: 100;
}

/*----------Home | Story----------*/
.story {
    position: relative;
    display: block;
    width: 100%;
    padding: 80px 0 80px 0;
    color: #cbcbcb;
}
.story_content {
    max-width: 1000px;
    margin: 0 auto;
    max-height: 103px;
    overflow: hidden;
    font-size: 16px;
    line-height: 25px;
    -webkit-transition: all 0.8s ease-in-out;
	-moz-transition: all 0.8s ease-in-out;
	transition: all 0.8s ease-in-out;
}
h1.story_head {
    width: 100%;
    color: #fff;
    text-align: center;
    margin: 0;
}
.style_description {
    width: 100;
    text-align: center;
    /*color: #af0000;*/
    color: #555;
    font-size: 13px;
    line-height: 16px;
    margin: 0 0 30px 0;
    text-transform: uppercase;
}
.story.open .story_content {
    height: auto;
    max-height: 1800px;
    padding: 0 0 30px 0;
}
.story_left {
    width: 48%;
    float: left;
}
.story_right {
    width: 48%;
    float: right;
}
.more_blend {
    position: absolute;
    bottom: 60px;
    width: 100%;
    height: 100px;
    background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
    -webkit-transition: all 0.8s ease-in-out;
	-moz-transition: all 0.8s ease-in-out;
	transition: all 0.8s ease-in-out;
    z-index: 10;
}
.story.open .more_blend {
    opacity: 0;
}
.more_text {
    position: absolute;
    margin: 20px 0 0 0;
    width: 100%;
    left: 0; right: 0;
    text-align: center;
    display: block;
    font-family: "Roboto Condensed", Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #af0000;
    text-transform: uppercase;
    cursor: pointer;
    z-index: 11;
}
.story.open .more_text {
    display: none;
}
.less_text {
    position: absolute;
    margin: -10px 0 0 0;
    width: 100%;
    left: 0; right: 0;
    text-align: center;
    display: none;
    font-family: "Roboto Condensed", Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #af0000;
    text-transform: uppercase;
    cursor: pointer;
    z-index: 11;
}
.story.open .less_text {
    display: inline-block;
}
.more_text:hover, .less_text:hover {
    color: #bdbebf;
}

/*----------Home | Links----------*/
.module.home_links {
    width: 100%;
    padding: 100px 0 150px 0;
}
.link_container {
    display: table;
    width: 100%;
}
.link_outer {
    width: 33.33%;
    float: left;
}
.link_box {
    position: relative;
    display: block;
    width: 80%;
    margin: 0 auto;
    max-width: 256px;
    text-align: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}
.link_box:before {
    content: '';
    display: block;
    padding-top: 100%;
}
.link_darker {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    background-color: #000;
    opacity: 0.3;
    -webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.link_box:hover .link_darker {
    opacity: 0.5
}
.link_title_box {
    position: absolute;
    display: table;
    top: 0;
    height: 50px;
    width: 100%;
}
.link_title {
    position: relative;
    display: table-cell;
    width: 100%;
    color: #fff;
    font-family: "Veneer", "Roboto", Helvetica, Arial, sans-serif;
    font-size: clamp(14px, 2vw, 17px);
    line-height: 1.3em;
    text-transform: uppercase;
    vertical-align: middle;
    text-shadow: 0px 0px 3px rgb(0,0,0,0.9);
}
.link_icon {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 68px;
    height: 68px;
    margin: 0 0 0 -34px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    -webkit-transition: ease all 0.3s;
	-moz-transition: ease all 0.3s;
	-ms-transition: ease all 0.3s;
	-o-transition: ease all 0.3s;
	transition: ease all 0.3s;
}
.link_box:hover .link_icon {
    color: #ccc;
    width: 130px;
    height: 130px;
    margin: 0 0 0 -65px;
}

/*----------Home | Product-Slider----------*/
.product_slider {
    position: relative;
    margin: 0 auto 90px auto;
    max-width: 1800px;
}
.product_slider .royalSlider {
    position: relative;
    width: 100%;
    max-height: 900px;
}
.product_slider .blend {
    margin: 0;
    padding: 0;
}
.product_slider .slide_image {
    position: relative;
}
.product_slider.wrap .wrapper {
    max-width: 100%;
    padding: 0;
}
.prod_table {
    position: relative;
    padding: 80px 0;
    width: 100%;
}
.prod_table .product_row {
    position: relative;
    width: 110%;
    left: -10%;
}
.prod_table .product_hero {
    position: absolute;
    width: 80%;
    max-width: 1200px;
    left: -10%;
    z-index: 8;
}
.prod_table .products_background {
    top: 0;
    margin: 5% 0 0 0;
}
.prod_table .products_background:before {
    content: '';
    display: block;
    padding-top: 75%;
}
.prod_table .prod_text {
    position: absolute;
    right: 0;
    display: table;
    width: 60%;
    max-width: 500px;
    z-index: 9;
}
.prod_table .prod_text_inner {
    display: table-cell;
    vertical-align: bottom;
    padding-bottom: 7%;
}
.prod_table .prod_head {
    margin: 0;
    font-family: "Veneer", "Roboto", Helvetica, Arial, sans-serif;
    color: #fff;
    font-size: 40px; /*clamp(30px, 2.5vw, 40px);*/
    line-height: normal;
    text-transform: uppercase;
    text-shadow: 0px 0px 3px rgb(0,0,0,0.9);
}
.prod_table .prod_short {
    color: #e1e1e1;
    font-size: 16px;
    line-height: 25px;
    text-shadow: 0px 0px 3px rgb(0,0,0,0.9);
}
.product_slider .rsDefault.rsHor .rsArrowLeft {
    left: 30px;
    top: 0;
}
.product_slider .rsDefault.rsHor .rsArrowRight {
    right: 30px;
    top: 0;
}

/*----------Home | Theme-Auswahl----------*/
.module.carousel {
    padding: 70px 0 100px 0;
}
.theme_box {
    position: relative;
    margin: 0 0.5%;
    text-align: center;
    padding: 30px 0;
    overflow: hidden;
}
.theme_thumb {
    display: block;
    width: 62%;
    margin: 0 auto 18px auto;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    -webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}
.theme_thumb:before {
    content: '';
    display: block;
    padding-top: 100%;
}
.theme_title {
    margin: 0 0 1px 0;
    font-family: "Veneer", "Roboto", Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    color: #fff;
    font-size: 24px;
    -webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}
.theme_description {
    font-size: 17px;
    color: #aaa;
}
.slick-dots {
    display: none !important;
}
a.theme_box:hover .theme_thumb {
    /*box-shadow: inset 0 0 0 1px #aaa;*/
    box-shadow: 0 0 50px rgba(255,0,0,0.8);
}
a.theme_box:hover .theme_title {
    color: #af0000;
}
.slick-arrow {
    z-index: 55;
}

/*----------Home | World-Auswahl----------*/
.world_chooser {
    margin: 100px 0 50px 0;
}
.world_head {
    margin: 2px 2% 0 0;
    width: 13%;
    height: 100px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top center;
    float: left;
}
.world_thumb {
    width: 7%;
    margin: 0 1%;
    padding-bottom: 7%;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    float: left;
}
.world_thumb.match {
    border: 1px dashed #fff;
    box-shadow: inset 0 0 0 5px #000;
}
.world_thumb:hover {
    box-shadow: inset 0 0 0 5px #fff;
}

/*----------2-Spalter | Kritik----------*/
.module.critic {
    padding: 100px 0 10px 0
}
.left {
    width: 48%;
    float: left;
}
.right {
    width: 48%;
    float: right;
}
.module.critic .left {
    width: 40%;
    float: left;
}
.module.critic .right {
    width: 56%;
    float: right;
}
.critic_head {
    margin: 10px 0 30px 0;
}
.left img {
    max-width: 100%;
    height: auto;
    border: 1px solid #555;
}
.critic_text {
    color: #aaa;
    font-size: 16px;
    line-height: 23px;
}

/*----------Gallery----------*/
.module.gallery {
    padding: 30px 0;
}
.the_gallery {
    padding: 50px 0 80px 0;
}
.gallery_img {
    width: calc(31.3333%);
    padding: 1%;
    max-width: calc(31.3333%);
    display: flex;
    justify-content: center;
    align-items: center;
}
.gallery_img img {
    width: 100%;
    height: auto;
    border: 1px solid #333;
    border-radius: 8px;
}

/*----------Video----------*/
.ai_video {
    position: relative;
    width: 100%;
    max-height: 1050px;
}
video {
    position: relative;
    max-height: 1050px !important;
    background-color: #000;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
}
.fashion_video .wp-video {
    width: 540px !important;
    margin: 0 auto;
}


/*----------------------------------Products----------------------------------*/

/*----------Single----------*/
.prod_single {
    padding: 80px 0;
}
.product_hero {
    position: relative;
    width: 100%;
}
.product_hero:before {
    content: '';
    display: block;
    padding-top: 76%;
}
.products_packshot {
    position: absolute;
    top: 0;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    z-index: 5;
}
.products_packshot:before {
    content: '';
    display: block;
    padding-top: 75%;
}
.products_background {
    position: absolute;
    top: 0;
    margin: 5% 0 0 0;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    z-index: 4;
}
.products_background:before {
    content: '';
    display: block;
    padding-top: 75%;
}
.prod_text {
    width: 100%;
    padding: 80px 0;
}
.prod_head {
    margin: 0 0 20px 0;
    font-family: "Veneer", "Roboto", Helvetica, Arial, sans-serif;
    color: #fff;
    font-size: 40px;
    line-height: 48px;
    text-transform: uppercase;
}
.prod_long {
    color: #fff;
    font-size: 16px;
    line-height: 25px;
}
.prod_ingredients {
    padding: 50px 0;
    color: #999;
    max-width: 625px;
    font-size: 14px;
    line-height: 20px;
}
.ingredients_top {
    margin: 0 0 40px 0;
}
.ingredients_bottom {
    font-family: "Roboto Condensed", Helvetica, Arial, sans-serif;
    font-size: 13px;
    line-height: 18px;
}
.ingredients_table {
    margin: 0 0 15px 0;
}
.ingredients_row {
    width: 100%;
    border-bottom: 1px solid #999;
}
.ingredients_row:last-child {
    border-bottom: none;
}
.ingredients_description {
    width: 35%;
    padding: 12px 0 12px 0;
    font-weight: 700;
    float: left;
}
.ingredients_value {
    width: 61%;
    padding: 12px 0 12px 3%;
    border-left: 1px solid #999;
    float: left;
}
#paginationbox {
    padding: 40px 0 0 0;
    width: 100%;
    font-family: "Veneer", "Roboto", Helvetica, Arial, sans-serif;
    color: #fff;
    text-transform: uppercase;
}
.pagination_link {
    width: 33.333%;
    color: #fff;
}
.pagination_link.left {
    text-align: left;
    float: left;
}
.pagination_center {
    width: 33.333%;
    text-align: center;
    float: left;
}
.pagination_link.right {
    text-align: right;
    float: left;
}
.pagination_link:hover, 
.pagination_link:hover .grey, 
.pagination_link:hover .yellow, 
.pagination_link:hover .orange, 
.pagination_link:hover .red {
    color: #999;
}


/*----------Archive----------*/
.prod_archive {
    position: relative;
    padding: 80px 0;
    width: 100%;
}
.product_row {
    position: relative;
    width: 110%;
    left: -10%;
}
.prod_archive .product_hero {
    position: relative;
    width: 65%;
    float: left;
}
.prod_archive .products_background {
    top: 0;
    margin: 5% 0 0 0;
}
.prod_archive .products_background:before {
    content: '';
    display: block;
    padding-top: 75%;
}
.prod_archive .prod_text {
    display: table;
    width: 35%;
    height: 100%;
    float: right;
}
.prod_archive .prod_text_inner {
    display: table-cell;
    vertical-align: bottom;
}
.prod_head {
    margin: 0;
    font-family: "Veneer", "Roboto", Helvetica, Arial, sans-serif;
    color: #fff;
    font-size: clamp(30px, 2.5vw, 40px);
    line-height: normal;
    text-transform: uppercase;
}
.prod_archive .prod_short {
    color: #e1e1e1;
    font-size: 16px;
    line-height: 25px;
}

/*----------------------------------Marke----------------------------------*/
.brand_img {
    position: relative;
    width: auto;
    height: auto;
    margin: 0 auto 90px auto;
    max-width: 1800px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
.brand_img img {
    width: 100%;
    height: auto;
    max-width: 1800px;
}
.family_img {
    position: absolute;
    right: 4%;
    bottom: 0;
    width: 50%;
    height: 63%;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom +4px right;
}
.small_family {
    right: 3%;
    width: 30%;
    height: 63%;
}
.fake_box {
    padding: 40px 0 80px 0;
}
.fake_history {
    color: #bbb;
    font-size: 16px;
    line-height: 22px;
}
.module.timeline {
    padding: 50px 0;
}
.timeline_box {
    position: relative;
    max-width: 700px;
}
.milestones_box {
    position: relative;
    padding: 0 0 70px 0;
    border-left: 5px solid #fff;
}
.milestones_box:last-child {
    border-left: 5px solid #000;
}
.timeline_head {
    margin: 0 0 50px 0;
}
.milestones_head {
    position: relative;
    left: -15px;
}
.m_dot {
    position: relative;
    top: -15px;
    width: 16px;
    height: 16px;
    margin: 10px 0 0 0;
    border-radius: 50%;
    border: 4px solid #000;
    background-color: #fff;
    float: left;
    z-index: 5;
}
.m_year {
    position: relative;
    top: -10px;
    margin: 0 0 0 10px;
    line-height: 40px;
    float: left;
}
.m_text {
    position: relative;
    margin: 0 0 20px 20px;
    color: #bbb;
    font-size: 16px;
    line-height: 22px;
    z-index: 5;
}

/*----------------------------------Text Subpages----------------------------------*/
.bg_img_fix {
    position: fixed;
    top: 75px;
    left: 0;
    right: 0;
    bottom: 1px;
    width: 100%;
    height: auto;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    z-index: -1;
    /*filter: blur(6px);*/
}
.stretch_page {
    position: relative;
    top: 0;
    width: 100%;
    min-height: calc(100vh - 350px);
}
.bg_dark {
    width: 90%;
    max-width: 900px;
    margin: 70px auto 70px auto;
    padding: 6% 4% 5% 4%;
    border-radius: 10px;
    background-color: rgba(0,0,0,0.85);
}
.bg_dark a {
    color: #bbb;
    text-decoration: underline;
}
.bg_dark a:hover {
    color: #fff;
}
.bg_dark ul {
    padding: 0 0 0 18px;
}
.bg_dark ul li {
    margin: 0 0 5px 0;
}
.col_1_1 {
    margin: 0 0 20px 0;
    color: #bbb;
    font-size: 15px;
    line-height: 22px;
}
.col_1_1.short {
    max-width: 625px;
    -moz-hyphens: none;
    -o-hyphens: none;
    -webkit-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
}
.col_1_2, .col_2_2 {
    margin: 0;
    color: #bbb;
    font-size: 15px;
    line-height: 22px;
}
.module.acc {
    margin: 25px 0 30px 0;
    color: #bbb;
    font-size: 15px;
    line-height: 22px;
}
.acc_head {
    height: 45px;
    margin: 0 0 18px 0;
    cursor: pointer;
}
.acc_plus {
    width: 45px;
    height: 45px;
    margin: 0 15px 0 0;
    border-radius: 5px;
    box-shadow: inset 0 0 0 2px #e3e3e3;
    float: left;
    background-image: url("images/FlagPlus.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-color: #000;
}
.acc_head.open .acc_plus {
    background-color: #e3e3e3;
    background-image: url("images/FlagMinus.svg");
}
.acc_head:hover .acc_plus {
    background-color: #e3e3e3;
}
.acc_head.open:hover .acc_plus {
    background-color: #000;
}
.acc_flag {
    width: 30px;
    height: 20px;
    margin: 12px 10px 0 0;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    float: left;
}
.acc_square {
    width: 30px;
    height: 30px;
    margin: 7px 10px 0 0;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    float: left;
}
.acc_title {
    display: block;
    width: auto;
    padding: 13px 0 0 0;
    font-family: "Veneer", "Roboto", Helvetica, Arial, sans-serif;
    font-size: 18px;
    color: #fff;
    text-transform: uppercase;
    float: left;
}
.acc_head:hover .acc_title {
    opacity: 0.7;
}
.acc_text {
    margin: 0 0 0 60px;
    padding: 0 0 30px 0;
    display: none;
}
.acc_text strong {
    color: #fff;;
}
.acc_text strong {
    color: #fff;;
}
.acc_text h2 strong {
    color: #777;
}
.wp-video, .wp-video:hover, .wp-video:active, .wp-video:focus {
    border: none;
    -moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
}
.mejs-container, .mejs-container:hover, .mejs-container:active, .mejs-container:focus {
    border: none !important;
    -moz-appearance: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
    background: #000 !important;
}
#video {
    outline: none;
}
*:focus{
    background: none;
    border: 0px;
    outline: none;
}
.mejs-container:focus {
    outline:1px solid #000;
    box-shadow:0 0 2px 1px rgba(0, 0, 0, 1)
}

/*----------------------------------Forms----------------------------------*/
form {
    max-width: 600px;
}
.contactform input, .formfix input {
    width: 96%;
    height: 40px;
    padding: 0 2%;
    margin: 15px 0 3px 0;
    border-radius: 5px;
    font-family: "Roboto", Helvetica, Arial, sans-serif;
    color: #000;
    background-color: rgba(255,255,255,0.8);
    font-size: 14px;
    line-height: 17px;
    box-shadow: inset 0 0 0 1px #000;
    border: none;
    -moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
}
.contactform textarea, .formfix textarea {
    width: 96%;
    height: 150px;
    padding: 2%;
    margin: 15px 0 3px 0;
    border-radius: 5px;
    font-family: "Roboto", Helvetica, Arial, sans-serif;
    color: #000;
    background-color: rgba(255,255,255,0.8);
    font-size: 14px;
    line-height: 17px;
    box-shadow: inset 0 0 0 1px #000;
    border: none;
    -moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
}
.contactform input[type="submit"], .formfix input[type="submit"] {
    -moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
    width: auto;
    position: relative;
    display: inline-block;
    background-color: #af0000;
    color: #fff;
    font-weight: 700;
    padding: 14px 40px 28px 40px;
}
.contactform input[type="submit"]:hover, .formfix input[type="submit"]:hover {
    background-color: #fff;
    color: #000;
}
.contactform input[type="submit"]:disabled, .formfix input[type="submit"]:disabled {
	opacity: 0.3;
}
.contactform input[type="checkbox"], .formfix input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 8px 5px -2px 0;
    background-color: #000;
	border: 1px solid #fff;
	border-radius: 2px;
	display: inline-block;
	cursor: pointer;
}
.contactform input[type="checkbox"]:checked, .formfix input[type="checkbox"]:checked {
	background-color: #00b515;
	-moz-box-shadow: inset 0 0 0 2px #00b515;
	-webkit-box-shadow: inset 0 0 0 2px #00b515;
	box-shadow: inset 0 0 0 2px #000;
}
.contactform select, .formfix select {
    width: 100%;
    height: 40px;
    margin: 15px 0 3px 0;
    border-radius: 5px;
    font-family: "Roboto", Helvetica, Arial, sans-serif;
    color: #000;
    background-color: rgba(255,255,255,0.8);
    font-size: 14px;
    line-height: 17px;
    box-shadow: inset 0 0 0 1px #000;
    border: none;
}
span.wpcf7-list-item {
	margin: 0 !important;
}
input.wpcf7-not-valid, textarea.wpcf7-not-valid {
	box-shadow: inset 0 0 0 2px #f00;
}
.wpcf7-validation-errors {
	display: none !important;
}
.wpcf7-mail-sent-ok {
	border: 1px solid #e30613 !important;
}
.wpcf7-response-output {
	border: none !important;
	color: #00cb0e !important;
	display: block !important;
	margin: 15px 0 0 0 !important;
	padding: 0 !important;
	float: none !important;
	clear: both !important;
	text-align: left;
}
/*----------Placeholder-----------*/
input::-webkit-input-placeholder {color: #777;}
::-webkit-input-placeholder {color: #777;} 
:-moz-placeholder {color: #777;}  
::-moz-placeholder {color: #777;}   
:-ms-input-placeholder {color: #777;}   
::-ms-input-placeholder {color: #777;}  
::placeholder {color: #777;} 

/*----------------------------------Prompts----------------------------------*/
.prompt {
    display: none;
    position: absolute;
    width: 80%;
    padding: 12px 16px 10px 18px;
    background-color: rgba(175,0,0,0.85);
    border-radius: 12px;
    color: #fff;
    font-family: Courier, serif;
    font-size: 15px;
    line-height: 20px;
    -moz-hyphens: auto;
    -o-hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    z-index: 999;
}
.prompts_on {
    display: none;
}
.homemenu .prompts_on {
    display: block;
}
.prompts_on a {
    cursor: pointer;
}
.prompt_close {
    position: absolute;
    width: 20px;
    height: 20px;
    top: -7px;
    right: -7px;
    border: 1px solid #7c7c7c;
    border-radius: 50%;
    background-image: url("images/Close.svg");
    background-repeat: no-repeat;
    background-size: 40%;
    background-position: center center;
    background-color: #af0000;
    cursor: pointer;
    -webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.prompt_close:hover {
    background-color: #000;
}
.prompt.logo_prompt {
    top: 105px;
    left: 9%;
    max-width: 250px;
    -webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
    z-index: 999;
}
.prompt.logo_prompt.open {
    top: 240px;
}
.prompt.hero_img_prompt {
    bottom: 30%;
    right: 10%;
    max-width: 470px;
}
.prompt.hero_txt_prompt {
    top: 22%;
    left: 10%;
    max-width: 470px;
}
.prompt.story_prompt {
    top: 60px;
    right: 1%;
    max-width: 470px;
}
.prompt.link_img_prompt {
    top: 90px;
    left: 20%;
    max-width: 300px;
}
.prompt.products_prompt {
    bottom: 90px;
    left: 30%;
    max-width: 400px;
}

/*----------------------------------Freigabeplan----------------------------------*/
.lightgrey {
    width: 100%;
    height: auto;
    padding: 100px 0 50px 0;
    background-color: #f1f2f7;
}
.plan_head {
    position: relative;
    top: 0;
    left: 0;
    margin: 0 0 60px 0;
}
.h2_black {
    font-size: 24px;
    color: #000;
}
.plantitle {
    font-size: clamp(30px, 3.8vw, 40px);
    padding: 0 0 20px 0;
}
.plantitle .hero_text {
    padding: 14px 17px 0 17px;
}
.list_prev {
    width: 100%;
    margin-bottom: 50px;
    color: #606062;
}
.list_entry {
    display: table;
    padding: 1% 2%;
    width: 96%;
    margin-bottom: 15px;
    border-radius: 10px;
    box-shadow: 0 3px 5px rgba(0,0,0,0.1);
    background-color: #fff;
}
.list_pic {
    display: table-cell;
    width: 7%;
    vertical-align: middle;
}
.list_img {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    border: 1px solid #e7e4e7;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
.list_text {
    display: table-cell;
    width: 38%;
    padding: 0 1%;
    vertical-align: middle;
}
.list_title {
    font-family: "Veneer", "Roboto", Helvetica, Arial, sans-serif;
    font-size: 30px;
    line-height: 30px;
    margin: 0 0 1px 0;
}
.list_description {
    font-size: 15px;
}
.list_date {
    display: table-cell;
    width: 14%;
    padding: 0 1%;
    vertical-align: middle;
}
.list_kw {
    text-align: center;
    font-family: "Veneer", "Roboto", Helvetica, Arial, sans-serif;
    font-size: 30px;
    line-height: 30px;
    margin: 0 0 1px 0;
}
.list_year {
    text-align: center;
    font-size: 12px;
    line-height: 12px;
    color: #aaa;
}
.list_links {
    display: table-cell;
    width: 30%;
    font-size: 13px;
    padding: 0 1%;
    vertical-align: middle;
}
.list_website_link {
    margin: 0 0 5px 0;
}
.list_website_link a, .list_some_link a {
    color: #1877F2;
    font-size: 13px;
}
.list_website_link a:hover, .list_some_link a:hover {
    color: #000;
}
.list_free {
    display: table-cell;
    width: 15%;
    text-align: left;
    vertical-align: middle;
    font-size: 13px;
    color: #aaa;
}
.free_head {
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
}
.free {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin: 3px 3px -3px 0;
    background-image: url("images/free.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}
.notfree {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin: 4px 3px -4px 0;
    background-image: url("images/notfreefree.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}

/*----------------------------------Social Media----------------------------------*/
.divider {
    width: 100%;
    height: 1px;
    margin: 0 0 30px 0;
    background-color: #ccc;
    box-shadow: 0 1px 0 0 #fff;
}
.some_week_img {
    position: relative;
    width: 100%;
    max-width: 512px;
    margin: 0 0 7% 0;
}
.some_week_img img {
    width: 100%;
    height: auto;
}
.some_week_img img:before {
    content: '';
    display: block;
    padding-top: 100%;
}
.some_profile {
    position: relative;
    width: 100%;
    max-width: 512px;
    margin: 0 0 7% 0;
}
.some_profile img {
    width: 100%;
    height: auto;
}
.some_profile img:before {
    content: '';
    display: block;
    padding-top: 100%;
}
.og_thumb {
    position: relative;
    width: 100%;
    max-width: 512px;
    margin: 0 0 7% 0;
}
.og_thumb img {
    width: 100%;
    height: auto;
}
.og_thumb img:before {
    content: '';
    display: block;
    padding-top: 56.25%;
}
.row_1_3 {
    width: 31.333%;
    margin: 0 3% 0 0;
    float: left;
}
.row_2_3 {
    width: 31.333%;
    margin: 0 3% 0 0;
    float: left;
}
.row_3_3 {
    width: 31.333%;
    margin: 0;
    float: right;
}
.some_image {
    position: relative;
    width: 31.33333%;
    max-width: 512px;
    margin: 0 3% 3% 0;
    float: left;
}
.some_image:nth-child(3n+4) {
    margin: 0 0 3% 0;
}
.some_image img {
    width: 100%;
    height: auto;
}
.some_image img:before {
    content: '';
    display: block;
    padding-top: 100%;
}
.some_comments {
    display: block;
    margin: 20px 0 50px 0;
    font-size: 16px;
    line-height: 26px;
}
.some_comment {
    margin: -8px 0 20px 0;
    font-size: 16px;
    line-height: 26px;
}
.some_comment br {
    margin: 0 0 6px 0;
}
.gallery_image {
    position: relative;
    width: 24%;
    max-width: 512px;
    margin: 0 0.5% 1% 0.5%;
    float: left;
}
.gallery_image img {
    width: 100%;
    height: auto;
}
.gallery_image img:before {
    content: '';
    display: block;
    padding-top: 100%;
}


/*----------------------------------Footer----------------------------------*/
footer {
    border-top: 1px solid #444;
	padding: 62px 0 58px 0;
}
footer p {
    margin: 0;
}
footer .copyright {
	color: #6c6c6c;
    font-family: "Roboto Condensed", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 16px;
    float: left;
}
footer .footer_links {
	float: right;
}
footer .footer_links .link {
    margin: 0 0 0 20px;
    font-family: "Roboto Condensed", Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 16px;
    color: #8d8d8d;
    text-transform: uppercase;
	float: left;
}
footer .footer_links .link:hover {
    color: #fff;
}