/* 
Theme Name: ZRCL 2021
Version: 
Description: RHO
Author: ROMAN HOSPENTHAL aka RHO
Author URI: http://www.rhodesign.ch/
*/

@import 'css/grid.css';
@import 'css/reset.css';
@import 'css/woocommercestyle.css';




.section{display: block; overflow: hidden}


.animation {-moz-transform: translate3d(0px, 80px, 0px);-webkit-transform: translate3d(0px,80px, 0px);transform: translate3d(0px, 80px, 0px);
-webkit-transition:-webkit-transform 1s;
transition:transform 1s
}


.move-up {-moz-transform: translate3d(0, 0, 0);-webkit-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0); 

-webkit-transition:-webkit-transform 1s;
transition:transform 1s
}





/* ------------------------------------------------------------ *\
	Fonts
\* ------------------------------------------------------------ */
/* lato-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/lato-v24-latin-300.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('fonts/lato-v24-latin-300.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* lato-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/lato-v24-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('fonts/lato-v24-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* lato-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/lato-v24-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('fonts/lato-v24-latin-700.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* lato-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  src: url('fonts/lato-v24-latin-900.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('fonts/lato-v24-latin-900.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}




/* ------------------------------------------------------------ *\
	Global Styles
\* ------------------------------------------------------------ */
html, body {width:100%;height:100%; -webkit-text-size-adjust: 100% !important;}
body {font-family: 'Lato', Arial, serif; font-weight: 300; font-size: 20px; line-height: 28px; color: #000; text-align:center; background: #FFF;}


/* Images & Links */
a {color: #333;text-decoration:none; border-bottom: 1px solid #000;}
a:hover {color: #000;text-decoration:none;border-bottom: none;}
a img {border: none;outline: none;}

::selection {background: #dadada; /* Safari */}
::-moz-selection {background: #dadada; /* Firefox */}



/* ------------------------------------------------------------ *\
	Main Containers
\* ------------------------------------------------------------ */
#wrap { width: 100%;text-align: left; height:auto !important;height:100%;min-height: 100%;position:relative;z-index:0;}
#main { overflow: auto; padding-bottom:200px; width: 100%; margin: 0px auto;}

.full {width: 100%;}
.ninety {width: 98%;}
.inner {max-width: 1440px;}
.outher {max-width: 1800px;}

@media (max-width: 1520px) {
.inner {width: 94%;}
.ninety {width: 100%;}
}

.white {background: #FFF;}
.lightgrey {background: #efefef; }
.lightgrey2 {background: #dadada; }

.paddingbottom55 {padding-bottom: 55px !important;}
.paddingtop30 {padding-top: 30px !important;}
.paddingtop100 {padding-top: 100px !important;}
.marginbottom25 {margin-bottom: 25px !important;}
.marginbottom55 {margin-bottom: 55px !important;}
.margintop2 {margin-top: 2px  !important;}

.margincenter {margin: 0 auto !important;}
.textcenter {text-align: center !important;}
.overflow {display: block;}

.left {float: left; }
.right {float: right; }

@media (max-width: 767px) {
.paddingbottom55 {padding-bottom: 30px !important;}
.marginbottom55 {margin-bottom: 30px !important;}
}




/* ------------------------------------------------------------ *\
	Headlines & Type
\* ------------------------------------------------------------ */	
h1 {text-align: center; font-size: 50px; line-height: 60px; text-transform: uppercase; padding: 30px 0; font-weight: 700; letter-spacing: 0.08em; }
h2 {font-size: 40px; line-height: 46px; color: #000; font-weight: 700; padding: 0; margin: 0 0 30px 0; text-transform: uppercase; text-align: center; letter-spacing: 0.08em;}
h3 {font-size: 24px; line-height: 28px; color: #000; font-weight: 700; padding: 0; margin: 0 0 10px 0; text-transform: uppercase; letter-spacing: 0.08em;}
h2.untertitel {text-align: center; font-size: 30px; line-height: 36px; text-transform: uppercase; font-weight: 700; letter-spacing: 0.08em;}

strong {font-family: 'Lato', Arial, serif; font-weight: 700;}	

@media (max-width: 921px) {
h1 {font-size: 35px; line-height: 45px; padding: 20px 0; letter-spacing: 0.06em; }
h2 {font-size: 35px; line-height: 42px; margin: 0 0 20px 0; letter-spacing: 0.06em;}
h3 {font-size: 22px; line-height: 26px; letter-spacing: 0.06em;}
h2.untertitel {font-size: 24px; line-height: 32px; letter-spacing: 0.06em;}
}

@media (max-width: 767px) {
h1 {font-size: 30px; line-height: 40px; padding: 15px 0; letter-spacing: 0.04em; }
}





/* ------------------------------------------------------------ *\
	Sprachwechsler
\* ------------------------------------------------------------ */
#sprachwechsler {position: absolute; top:5px; right: 60px; width: auto; z-index: 99999;}
#sprachwechsler ul{margin:0; padding:0; text-align: right;}
#sprachwechsler ul li{ display: inline; font-size: 15px; color: #000; line-height: 12px; padding:0 0 3px 0; margin: 0 15px 0 0;}
#sprachwechsler ul li:last-child{  margin-right: 15px;}
#sprachwechsler ul li a{text-decoration: none; border-bottom: none; color: #000;}
#sprachwechsler ul li a:hover{border-bottom: 1px solid #000;}

li span.icl_lang_sel_current {border-bottom: 1px solid #000;}
li a span.icl_lang_sel_current {border-bottom: 1px solid transparent;}

@media (max-width: 991px) {
#sprachwechsler {position: absolute; top:25px; right: 100px; width: auto; z-index: 99999;}
#sprachwechsler ul li{ font-size: 13px;  margin: 0 13px 0 0;}
}


/* ------------------------------------------------------------ *\
	Sprachwechsler
\* ------------------------------------------------------------ */
.topheadnavigation {position: absolute; top:10px; right: 60px; width: auto; z-index: 99999;}
.topheadnavigation ul{margin:0; padding:0; text-align: right;}
.topheadnavigation ul li{ display: inline; font-size: 15px; color: #000; line-height: 12px; padding:0 0 3px 0; margin: 0 15px 0 0;}
.topheadnavigation ul li:last-child{  margin-right: 15px;}
.topheadnavigation ul li a{text-decoration: none; border-bottom: none; color: #000; text-transform: uppercase}
.topheadnavigation ul li a:hover{border-bottom: 1px solid #000;}

.topheadnavigation ul li:last-of-type{margin-left:25px;}
li.menu-item-language-current {border-bottom: 1px solid #000;}

@media (max-width: 991px) {
.topheadnavigation {position: absolute; top:25px; right: 100px; width: auto; z-index: 99999;}
.topheadnavigation ul li{ font-size: 13px;  margin: 0 13px 0 0;}
}


.topheadsearch {position: absolute; top:15px; right: 315px; }
.woocommerce-product-search {
    overflow: hidden;
    display: flex;
}

.woocommerce-product-search input {

    border: 1px solid #fff;
    padding: 2px 10px;
    font-size: 14px;
    font-weight: 300;
    width: 150px;

}

.woocommerce-product-search button {
    font-size: 14px;
    background-color: #efefef;
    color: #333;
    border: 1px solid #fff;
    padding: 2px 5px;
    font-weight: 300;
    margin-left: 2px;
}

#header .topheadsearch.js-cloned {display: none; }
@media (max-width: 991px) {
#header .topheadsearch {display: none; }
#nav-mobile .topheadsearch {display: block; position: static; top:15px; right: 315px; margin: 20px 0;}
#nav-mobile .topheadsearch .woocommerce-product-search input {width: 100%; padding: 10px;}
}

/* ------------------------------------------------------------ *\
	Warenkorb im Header
\* ------------------------------------------------------------ */
.headcart {position: absolute; right: 100px; top: 5px; display: inline-block; height: 22px;}
.headcart a {padding: 7px 0 0 36px; background: url(images/kd_web_icons_wk-01.png) no-repeat top left; background-size: 25px 29px !important; font-size: 15px; line-height: 12px; color: #000; text-transform: uppercase; text-decoration: none; border-bottom: none;}
.headcart a:hover {background: url(images/kd_web_icons_wk-02.png) no-repeat top left; background-size: 25px 29px !important;color: #787878;}
.headcart a.cartfull {background: url(images/kd_web_icons_wk-03.png) no-repeat top left;	color: #37b44b ;}
.headcart a.cartfull:hover {background: url(images/kd_web_icons_wk-04.png) no-repeat top left;	color: #287d32 ;}




/* ------------------------------------------------------------ *\
	Header
\* ------------------------------------------------------------ */
.menubar { margin: 0 auto; padding: 0; position: relative; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s; border-bottom: 2px solid #fff !important;}
.menubar.stuck {position: fixed;top: 0px; overflow: visible!important; z-index: 88888;}

#header {height: 100px;	margin: 0 auto;  position: relative; padding: 0;  -moz-transition: all .5s ease;-webkit-transition: all .5s ease;-o-transition: all .5s ease;transition: all .5s ease; }
#header .logo{text-indent:100%; white-space:nowrap; overflow:hidden; display:block; position: absolute; width: 118px;height: 118px; top: 9px; left: 0; -moz-transition: all .5s ease;-webkit-transition: all .5s ease;-o-transition: all .5s ease;transition: all .5s ease; background: url(images/logo.svg) no-repeat center; background-size:100%; z-index: 99999; border-bottom: none;}
.no-svg .logo { background-image: url(images/logo.png) no-repeat; }

#header.tiny .logo {width: 82px;height: 82px; }

@media (max-width: 991px) {
#header {height: 80px;	}
#header .logo{width: 90px;height: 90px; }
#header.tiny .logo {width: 62px; height: 62px; }
}









/* ------------------------------------------------------------ *\
	Menu
\* ------------------------------------------------------------ */
/*** ESSENTIAL STYLES SUCKERFISH***/
#hauptnavigation .menu, #hauptnavigation .menu * {margin: 0;padding: 0;list-style: none;}
#hauptnavigation .menu li {position: relative;}
#hauptnavigation .menu ul {position: absolute; display: none;top: 100%;z-index: 99;}
#hauptnavigation .menu > li {float: left;}
#hauptnavigation .menu li:hover > ul,.menu li.sfHover > ul {display: block;}
#hauptnavigation .menu a {display: block;position: relative;}
#hauptnavigation .menu ul ul {top: 0; left: 100%;}

/*** SKIN ***/
#hauptnavigation .menu {position: absolute; top: 60px; right: 0; }
#hauptnavigation .menu li {white-space: nowrap; *white-space: normal; -webkit-transition: background .1s; transition: background .1s; z-index: 9999;}
#hauptnavigation .menu li a {letter-spacing: 0.05em; color: #000;  margin: 0 ;display: block; text-decoration: none; border-bottom: none; text-transform: uppercase; margin-left: 30px; padding: 0 0 14px 0; zoom: 1; text-decoration: none; border-bottom: none;}
#hauptnavigation .menu li a:hover {color:#888; }
li.current_page_item a, li.current_page_parent a {color: #000 !important; font-weight: 400; }

/*** SUBMENU ***/
#hauptnavigation .menu ul {min-width: 260px; *width: 260px;  padding: 20px; zoom: 1; background: #efefef;}
#hauptnavigation .menu ul li {border-bottom: 1px solid #939292 }
#hauptnavigation .menu ul li a {font-size: 18px; line-height: 22px; color: #000 !important; padding: 4px 0; margin-left: 10px; font-weight: 300;}
#hauptnavigation .menu ul li a:hover {color: #888 !important; padding-left: 7px;}
#hauptnavigation ul.sub-menu li.current_page_item a {color: #000 !important; font-weight: 400; padding-left: 7px;}

#hauptnavigation .menu ul li.current_page_parent a {}

#hauptnavigation .submenutoggle {
display: none;
}


/* ------------------------------------------------------------ *\
	Mobile Menu
\* ------------------------------------------------------------ */
nav#nav-mobile {display: none; z-index: 99999 !important; width: 100%; background: #efefef; margin-bottom: 2px;    }
#nav-mobile .menu {position: static; top: 0px; right: 0px; padding: 15px 0; }
#nav-mobile .menu > li {position: relative; border-bottom: 1px solid #999; padding: 10px 0;}
#nav-mobile .menu ul {position: static; top: 0; filter: alpha(opacity=100);opacity: 1.0;   }
#nav-mobile .menu a {text-decoration: none; border-bottom: none;  }

nav#nav-mobile ul#menu-hauptnavigation,
nav#nav-mobile ul#menu-hauptnavigation-en{
position: relative; 
list-style-type: none; 
left: 0; right: 0; 
margin-left: auto; 
margin-right: auto; 
text-align: left; 
width:90%;
}

nav#nav-mobile li {display: block; margin: 0; }
nav#nav-mobile li:first-child {}
nav#nav-mobile li:last-child {}

nav#nav-mobile ul li a {
display: inline-block; 
color:#000; 
padding: 8px 0; 
margin-left: 0px !important; 
font-weight: 700;
width: -webkit-calc(100% - 40px);
width:    -moz-calc(100% - 40px);
width:         calc(100% - 40px);
}

nav#nav-mobile ul li a:hover {color: #666; }
nav#nav-mobile li.current-menu-item a, nav#nav-mobile li.current-page-parent a{color: #666; }

nav#nav-mobile ul li ul { width: 100% !important; display: block; padding: 0 0 25px 0;  box-sizing: border-box;}
nav#nav-mobile ul li ul li{ padding: 0px; width: 100%;}
nav#nav-mobile ul li ul li a{display: block; color:#000 !important; padding: 7px 0 7px 0; font-size: 18px; font-weight: 400; }
nav#nav-mobile ul li ul li a:hover{color:#666 !important;  }
nav#nav-mobile ul li ul li.current-menu-item a {color:#666 !important;  }



/*  + - */
nav#nav-mobile .submenutoggle { display: block;cursor: pointer; position: absolute; top: 14px; right: 0; height: 20px; width: 20px;}

nav#nav-mobile .submenutoggle:before {content: "";position: absolute;display: block;right: 0px; top: 50%; width: 20px; height: 2px; background: #000;transform: rotate(0deg);transform-origin: center;-webkit-transition: all .5s ease;-moz-transition: all .5s ease;-o-transition: all .5s ease;-ms-transition: all .5s ease;transition: all .5s ease;}
nav#nav-mobile .submenutoggle:after {content: "";position: absolute;display: block;margin: auto; right: 0px; top: 1px; bottom: 0;width: 20px; height: 2px; background: #000; transform: rotate(90deg);transform-origin: center;-webkit-transition: all .5s ease;-moz-transition: all .5s ease;-o-transition: all .5s ease;-ms-transition: all .5s ease;transition: all .5s ease;}

nav#nav-mobile .submenutoggle.toggled:before {}
nav#nav-mobile .submenutoggle.toggled:after {display: none }


/* ------------------------------------------------------------ *\
	Toggle Menu
\* ------------------------------------------------------------ */
#toggle-menu {display: none; position: absolute; top: 34px;right: 0;vertical-align: top; width: 30px; height: 30px; cursor: pointer; z-index: 999999;overflow: hidden; }
#toggle-menu span { display: block; width: 30px; height: 2px; background: #000;position: absolute; left: 0;-webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s;-ms-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s;-ms-transition: -webkit-transform 0.5s ease-in-out, background 0.5s ease-in-out, top 0.25s ease-in-out 0.5s, opacity 0.25s ease-in-out 0.5s, width 0.25s ease-in-out 0s;-webkit-transition: -webkit-transform 0.5s ease-in-out, background 0.5s ease-in-out, top 0.25s ease-in-out 0.5s, opacity 0.25s ease-in-out 0.5s, width 0.25s ease-in-out 0s; -moz-transition: -moz-transform 0.5s ease-in-out, background 0.5s ease-in-out, top 0.25s ease-in-out 0.5s, opacity 0.25s ease-in-out 0.5s, width 0.25s ease-in-out 0s;transition: transform 0.5s ease-in-out, background 0.5s ease-in-out, top 0.25s ease-in-out 0.5s, opacity 0.25s ease-in-out 0.5s, width 0.25s ease-in-out 0s; -webkit-transform-origin: center; -moz-transform-origin: center; transform-origin: center;}

#toggle-menu span.top {top: 0px;}
#toggle-menu span.middle {top: 7px;}
#toggle-menu span.bottom { top: 14px;}

#toggle-menu.is-active {}
#toggle-menu.is-active span { background: #000 !important;-webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -ms-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; -ms-transition: -webkit-transform 0.5s ease-in-out 0.3s, background 0.5s ease-in-out 0.3s, top 0.25s ease-in-out, opacity 0.25s ease-in-out, width 0.25s ease-in-out 0.25s; -webkit-transition: -webkit-transform 0.5s ease-in-out 0.3s, background 0.5s ease-in-out 0.3s, top 0.25s ease-in-out, opacity 0.25s ease-in-out, width 0.25s ease-in-out 0.25s;-moz-transition: -moz-transform 0.5s ease-in-out 0.3s, background 0.5s ease-in-out 0.3s, top 0.25s ease-in-out, opacity 0.25s ease-in-out, width 0.25s ease-in-out 0.25s; transition: transform 0.5s ease-in-out 0.3s, background 0.5s ease-in-out 0.3s, top 0.25s ease-in-out, opacity 0.25s ease-in-out, width 0.25s ease-in-out 0.25s;}

#toggle-menu.is-active span.top,
#toggle-menu.is-active span.middle { top: 10px; width: 30px;-webkit-transform: rotate(135deg);-moz-transform: rotate(135deg);-ms-transform: rotate(135deg);transform: rotate(135deg);}
#toggle-menu.is-active span.middle {opacity: 0;}
#toggle-menu.is-active span.bottom {top: 10px; width: 30px;-webkit-transform: rotate(225deg);-moz-transform: rotate(225deg);-ms-transform: rotate(225deg);transform: rotate(225deg);}


@media (max-width: 1100px) {
.menu li a {margin-left: 22px; padding: 0 0 14px 0; font-size: 18px; line-height: 22px;}
.menu ul li a {font-size: 16px; line-height: 20px; color: #000 !important; margin-left: 10px;}
}

@media (max-width: 991px) {
#hauptnavigation {display: none;}
#toggle-menu {display: block;}
nav#nav-mobile {display: block;  }
}






/* ------------------------------------------------------------ *\
	Content
\* ------------------------------------------------------------ */
.content { margin: 0 auto; padding: 0; margin: 0;}	
.content p{margin: 0px;padding: 0px 0px 30px 0px;}
.content img {width: 100%; height: auto;}

.content ul {margin: 0 0 40px 0;}
.content ul li { padding:7px 0;border-bottom: 1px solid #B4B4B4;}

.content a {color: #333;}
.content a:hover {color: #000;}

.lead {font-size: 32px; line-height: 38px; color: #000; padding: 0; text-align: center; text-transform: uppercase; letter-spacing: 0.08em}



a.button{background: #3c3c3c; color: #FFF; text-align: center; text-transform: uppercase; padding: 10px 35px; font-size: 26px; text-decoration: none; border-bottom: none;}
a.button:hover {background: #000; color: #FFF;}



.iframe-responsive {overflow:hidden; padding-bottom:50%;position:relative;height:0; }
.iframe-responsive iframe{left:0;top:0;height:100%;width:100%; position:absolute;display:block;}
iframe, object, embed {display:block; width: 100%; height: 450px;}

.responsive-video {position: relative;padding-bottom: 56%; /* 16:9 */height: 0;}
.responsive-video iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}



.traceform {width: 40%; margin: 0 auto 50px auto;}
form.traceabilityQuery {text-align: center;	 margin: 01 auto; width: auto !important;}
form.traceabilityQuery input{	padding: 10px 20px; border: 1 px solid #c1c1c1; font-size: 32px; line-height: 38px;color: #000;  text-align: center; text-transform: uppercase; letter-spacing: 0.08em;display: block;margin: 0 auto 10px auto;width: 100%;box-sizing: border-box;}
form.traceabilityQuery input:hover{	 border: 1 px solid #000 !important; }
form.traceabilityQuery input:focus{	 border: 1 px solid #000 !important; }
input.traceabilitySubmit {background: #3c3c3c; border: 1px solid #3c3c3c;-webkit-border-radius: 14px;-moz-border-radius: 14px;border-radius: 14px;color: #FFF !important; text-align: center; text-transform: uppercase; padding: 0; font-size: 26px; letter-spacing: 0.08em;width: 100%;display: block;margin: 0;cursor:pointer;}
input.traceabilitySubmit:hover {background: #000; border: 1px solid #000;}



@media (max-width: 991px) {
.lead {font-size: 28px; line-height: 34px; letter-spacing: 0.06em}

.traceform {width: 60%; margin: 0 auto 50px auto;}
form.traceabilityQuery input{	font-size: 28px; line-height: 34px; letter-spacing: 0.06em; }
input.traceabilitySubmit {font-size: 22px; letter-spacing: 0.06em;}
}

@media (max-width: 767px) {
lead {font-size: 26px; line-height: 32px; letter-spacing: 0.04em}
.traceform {width: 80%; margin: 0 auto 50px auto;}
form.traceabilityQuery input{	padding: 8px 16px; font-size: 24px; line-height: 30px; letter-spacing: 0.06em; }
input.traceabilitySubmit {font-size: 20px; letter-spacing: 0.06em;}
}






/* **************************************************
			    		TRACKONG ON HOME
************************************************** */
.tracking {padding: 2% 0 1% 0}

/*.tracking {background-image:url(images/bg_trackme.png)}*/

.trackme {margin: 0 auto; font-size: 32px; line-height: 38px;color: #000;  padding: 0; text-align: center; text-transform: uppercase; letter-spacing: 0.08em}
.trackme a{background: #333; color: #FFF; border: 2px solid #fff; text-align: center; text-transform: uppercase; padding: 10px 35px; font-size: 26px; text-decoration: none; border-bottom: none; -webkit-border-radius: 30px;-moz-border-radius: 30px;border-radius: 30px; -webkit-transition: all .5s ease;-moz-transition: all .5s ease;-o-transition: all .5s ease;-ms-transition: all .5s ease;transition: all .5s ease;}
.trackme a:hover {background: #000; color: #FFF; }

@media (max-width: 991px) {
.trackme {font-size: 28px; line-height: 34px; letter-spacing: 0.06em}
.trackme a{ padding: 8px 30px; font-size: 22px;}
.tracking {padding: 6% 0 2% 0}
}

@media (max-width: 767px) {
.trackme {font-size: 22px; line-height: 28px; letter-spacing: 0.06em}
.trackme a{ padding: 8px 25px; font-size: 20px;}
}




/* **************************************************
			    		NEWS
************************************************** */

/* NEWS ON PAGE NEWS */
.newsblock {overflow: hidden; margin: 0 0 40px 0; padding: 0 0 30px 0; border-bottom: 1px solid #b4b4b4;}
.anreisser h2, .anreisser h2 a {font-size: 20px; line-height: 28px; text-transform: uppercase; font-weight: 700; letter-spacing: 0.08em; padding: 0; margin: 0 0 10px 0; color: #000; text-align: left; text-decoration: none; border-bottom: none;  }
.anreisser p {padding: 0 0 15px 0; font-size: 18px; line-height: 24px;}
.anreisser a.more {
background: #3c3c3c; color: #FFF; text-align: center; text-transform: uppercase; padding: 5px 20px; 
font-size: 16px; text-decoration: none;border-bottom: none;
-webkit-border-radius: 14px;-moz-border-radius: 14px;border-radius: 14px;
-webkit-transition: all .5s ease;-moz-transition: all .5s ease;-o-transition: all .5s ease;-ms-transition: all .5s ease;transition: all .5s ease;
}
.anreisser a.more:hover {background: #000;}




/* NEWS FLOATED ON SINGLE*/
.newsbeitrag {padding: 0; overflow: hidden; position: relative; height: auto; }
.newsbeitrag img {display: block;position: relative; width: 100% !important; height: auto;}

.newsbeitrag .mask {position:absolute; top: 0%;left: 0%; background: #000; display: inline-block; height: 100%; width: 100%; opacity: 0; visibility:hidden;-webkit-transition: all 600ms ease-out;  -moz-transition: all 600ms ease-out;  -o-transition: all 600ms ease-out;  -ms-transition: all 600ms ease-out; transition: all 600ms ease-out;}
.newsbeitrag:hover .mask {opacity:0.8;visibility:visible;}

.morecontent {position: absolute; padding: 0; width: 80%; text-align: center; margin-left: auto; margin-right: auto; left: 0; right: 0; top: 15px; }
.morecontent .titel{ opacity: 1; font-size: 20px; line-height: 28px; color: #FFF; font-weight: 700; text-transform: uppercase}

@media (max-width: 767px) {
.newsbeitrag { margin-bottom: 25px }
}



/* **************************************************
			    		STARTSEITE BLOCKS
************************************************** */
.box {overflow: hidden; margin-bottom: 25px !important; }
.box img{width: 100%; height: auto; display: block;}


/* ICONS FACHGEBIETE */
.boxocontent {padding: 0; overflow: hidden; position: relative; height: auto; margin: 0; }
.boxocontent img {display: block;position: relative; -webkit-transition: all .5s ease;-moz-transition: all .5s ease;-o-transition: all .5s ease;-ms-transition: all .5s ease;transition: all .5s ease;}
.boxocontent:hover img {-moz-transform:scale(1.1); -webkit-transform:scale(1.1);-o-transform:scale(1.1);-ms-transform: scale(1.1);transform: scale(1.1);}

.boxocontent .vcenter {position: absolute;top: 50%;-webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);transform: translateY(-50%); z-index: 99999;left:0; right: 0; margin: 0 auto; text-align: center; padding: 0 20px; font-size: 24px; line-height: 30px; color: #FFF; font-weight: 400; text-transform: uppercase;}
.boxoverlay {background: #23282D;position:absolute; top: 0%;left: 0%; display: inline-block; height: 100%; width: 100%;visibility:visible;zoom: 1;filter: alpha(opacity=50);opacity: 0.5;z-index: 99995;-webkit-transition: all .5s ease;  -moz-transition: all .5s ease;  -o-transition: all .5s ease;  -ms-transition: all .5s ease;  transition: all .5s ease;}

.boxocontent:hover .boxoverlay,
.boxocontent:hover .vcenter {visibility:hidden; opacity: 0;}

@media (max-width: 767px) {
.boxocontent .vcenter {font-size: 20px; line-height: 26px;}
}




.store {margin-bottom: 30px !important; }
.store .storename {font-weight: 400;}
.store p {padding-bottom: 0px !important;}







/* **************************************************
			    		PAGE DEALERS WITH ACF MAP
************************************************** */
.acf-map {width: 100%; height: 520px;   }
.marker {}
.markerinfo {font-size: 14px; line-height: 18px; color: #000;}
.markerinfo h4{font-size: 14px; line-height: 18px; color: #000; font-weight: 700; padding: 0 0 5px 0; text-transform: uppercase; letter-spacing: 0.02em}
.markerinfo p{margin: 0px  !important; padding: 0px 0px 15px 0px !important;}
.gm-style-iw-c, .gm-style-iw {width: 250px; }

@media (max-width: 767px) {
.acf-map {height: 460px; }
}

@media (max-width: 599px) {
.acf-map {height: 380px; }
}

@media (max-width: 479px) {
.acf-map {height: 300px; }
}




/* **************************************************
			    		GALERIE
************************************************** */
ul.gallery {}
ul.gallery li {float: left;  padding:0; width: 18%; margin-right: 2.5% !important; margin-bottom: 2.5% !important; background: #23282D}
ul.gallery li img {display: block; width: 100%; -o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;}
ul.gallery li img:hover {filter: alpha(opacity=50);-moz-opacity:0.50;-khtml-opacity: 0.50;opacity: 0.50;}
ul.gallery:after { content: ""; display: table;clear: both; }

@media (min-width: 768px) {
ul.gallery li:nth-of-type(5n) {margin-right: 0% !important;}
}
@media only screen and (min-width : 480px) and (max-width: 767px) {
ul.gallery li {width: 31%; margin-right: 3.5% !important; margin-bottom: 3.5% !important; }
ul.gallery li:nth-of-type(3n) {margin-right: 0% !important;}
}

@media (max-width: 479px) {
ul.gallery li {width: 48%; margin-right: 4% !important; margin-bottom: 4% !important; }
ul.gallery li:nth-of-type(2n) {margin-right: 0% !important;}
}



table{width: 100% !important;	border-spacing:0px !important; margin-bottom: 30px;}
table td{border-spacing:0px !important;vertical-align:top; font-size: 17px;line-height: 21px; border-bottom: 1px solid #c1c1c1; padding: 10px 10px 10px 0;}




/* ------------------------------------------------------------ *\
	SHOP SIDEBAR
\* ------------------------------------------------------------ */
.shopsidebar h4 {
font-size: 16px; 
line-height: 22px; 
color: #000; 
font-weight: 700; 
padding: 0; 
margin: 0 0 5px 0; 
padding: 0 0 5px 0;
text-transform: uppercase; 
letter-spacing: 0.08em;
border-bottom: 1px solid #efefef;
}

.shopmenu-container { margin: 25px 0}
ul.shopmenu { margin-bottom: 0px}
ul.shopmenu li {padding: 0; border-bottom: 0px}
ul.shopmenu li a {font-size: 0.8em; line-height: 1.4; text-decoration: none; border-bottom: none; display: block;}
ul.shopmenu li ul.sub-menu {padding-left: 20px; margin-bottom: 0}
ul.shopmenu li ul.sub-menu li {padding: 0; text-decoration: none}

ul.shopmenu li.current-menu-item a { font-weight: 700}
ul.shopmenu a.active { font-weight: 700}


.filter-toggle,
.categories-toggle {font-size: 20px; line-height: 28px; color: #000 !important; font-weight: 700; text-decoration: none !important; display: none; text-align: center; padding-bottom: 20px;}


@media (max-width: 991px) {
.filter-toggle, .categories-toggle {display: block;}
.widget-woof {display: none; margin-top: 15px; }
.shopmenu-container {display: none; margin-top: 15px; }

.woof_container_inner_color, .woof_container_inner_size {text-align: center;}
}







/* **************************************************
			    		ISOTOPE
************************************************** */
/* Isotope Basics */
.isotope-item {z-index: 2;}
.isotope-hidden.isotope-item {pointer-events: none;z-index: 1;}
.isotope,.isotope .isotope-item {-webkit-transition-duration: 0.7s;-moz-transition-duration: 0.7s;transition-duration: 0.7s;}
.isotope {-webkit-transition-property: height, width;-moz-transition-property: height, width;transition-property: height, width;}
.isotope .isotope-item {-webkit-transition-property: -webkit-transform, opacity;-moz-transition-property: -moz-transform, opacity;transition-property: transform, opacity;}



/* Isotope Filter */
ul.projects-filter { width: 100%;  list-style-type: none; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 25px;}
ul.projects-filter li { margin: 0 15px 15px 0; border-bottom: 0px !important; padding: 0;}
ul.projects-filter a {
display: inline-block;
vertical-align: middle;
text-align: center;
cursor: pointer;
text-decoration: none; border-bottom: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 10px 20px;
font-size: 18px;
line-height: 1;
-webkit-transition: all .4s, color .4s, border-color .4s;
-o-transition: all .4s, color .4s, border-color .4s;
transition: all .4s, color .4s, border-color .4s;	
border-radius: 50px;
margin-top: 0px;
border: 2px solid #000;
background: transparent;
}
ul.projects-filter a:hover {border: 2px solid #efefef ;}
ul.projects-filter a.selected {color: #FFF;border: 2px solid #000 ;background: #000 ;}






ul.projects-filter-tax { width: 100%;  list-style-type: none; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 25px;}
ul.projects-filter-tax li { margin: 0 15px 15px 0; border-bottom: 0px !important; padding: 0;}
ul.projects-filter-tax a {
display: inline-block;
vertical-align: middle;
text-align: center;
cursor: pointer;
text-decoration: none; border-bottom: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 10px 20px;
font-size: 18px;
line-height: 1;
-webkit-transition: all .4s, color .4s, border-color .4s;
-o-transition: all .4s, color .4s, border-color .4s;
transition: all .4s, color .4s, border-color .4s;	
border-radius: 50px;
margin-top: 0px;
border: 2px solid #000;
background: transparent;
}
ul.projects-filter-tax a:hover {border: 2px solid #efefef ;}
ul.projects-filter-tax a.selected {color: #FFF;border: 2px solid #000 ;background: #000 ;}






/* **************************************************
			    		Modul Produkte
************************************************** */

.card{height:100%;position:relative; background: #FFF;
border: 1px solid #efefef;-o-transition: .2s all ease;-ms-transition: .2s all ease;-moz-transition: .2s all ease;-webkit-transition: .2s all ease;transition: .2s all ease;	
display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;isolation:isolate;
}

.card:hover { -webkit-box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);}

.card .card__image{}
.card .card__image img{}


.card .card__content{ background: #efefef; text-align: center; padding: 25px 15px;
-webkit-box-flex:1;-ms-flex:1 1;flex:1 1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;
}

.card h2 { font-size: 14px; line-height: 20px; font-weight: 700; margin-bottom: 0;}

.card .card__link{position:absolute;top:0;left:0;right:0;bottom:0; text-decoration: none; border-bottom: none;}








/* **************************************************
			    		FOOTER
************************************************** */

.footer {width: 100%;height: 200px; overflow: hidden; clear:both; background: #efefef; position: relative; margin: -200px auto 0 auto; display: block; z-index: 9999;}
.footercontent {margin: 0 auto;overflow: hidden;display: block; padding: 40px 0 0 0;text-align: left;z-index: 99999 !important;color: #000;}

.footercontent a {color: #000; text-decoration: none; border-bottom: none;}
.footercontent a:hover {color: #333;}


.socialicons {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end;}
a.facebook, 
a.vimeo, 
a.instagram,
a.youtube, 
a.linkedin 
{margin-left: 20px; width: 40px; height: 40px; background-size: 100%;text-indent: -9999px !important; display: block;}

a.facebook:hover, 
a.vimeo:hover, 
a.instagram:hover,
a.youtube:hover, 
a.linkedin:hover {opacity: .8;}



a.facebook {background: url(images/icon_facebook.png) no-repeat top;}
a.vimeo {background: url(images/icon_vimeo.png) no-repeat top;}
a.instagram {background: url(images/icon_instagram.png) no-repeat top;}
a.youtube {background: url(images/icon_youtube.png) no-repeat top;}
a.linkedin {background: url(images/icon_linkedin.png) no-repeat top;}


.footer .footer-nav { margin-top: 30px;}
.footer .footer-nav ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center;  }
.footer .footer-nav li { margin-right: 30px; }
.footer .footer-nav a { font-size: 20px; line-height: 28px; color: #000; text-decoration: none; border-bottom: none;}
.footer .footer-nav a:hover { color: #636363; text-decoration: none;border-bottom: none; }
.footer .footer-nav li.current_page_item a { color: #636363; text-decoration: none;border-bottom: none; }

@media (max-width: 767px) {
#footer {height: 320px;}

}







/* **************************************************
			    		Start Floats
************************************************** */
.alignleft{float: left;margin: 0 22px 22px 0;}
.alignright{float: right;margin: 0;}
.aligncenter{margin-left: auto !important;margin-right: auto !important; }








/* **************************************************
			    		Slider
************************************************** */

/* Browser Resets */
.flex-container a:active, .flexslider a:active {outline: none;}
.slides,.flex-control-nav,.flex-direction-nav {margin: 0; padding: 0; list-style: none;}

/* FlexSlider Necessary Styles
*********************************/
.flexslider {margin: 0; padding: 0;}
.flexslider .slides > li, .flexslider2 .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img, .flexslider2 .slides img {width: 100%; display: block;}
.flex-pauseplay span {text-transform: capitalize;}

/* Clearfix for the .slides element */
.slides:after {content: "\0020"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} html[xmlns] .slides {display: block;} * html .slides {height: 1%;}

/* No JavaScript Fallback - If you are not using another script, such as Modernizr, make sure you include js that eliminates this class on page load */
.no-js .slides > li:first-child {display: block;}



/* FlexSlider Theme
*********************************/
.flexslider { margin: 0 auto;  position: relative;  zoom: 1; width: 100%; display: block; clear: both; }
.flexslider .slides { zoom: 1; }

/* Direction Nav */
.flex-direction-nav {*height: 0; z-index: 99999 !important; }
.flex-direction-nav a  { text-decoration:none; border-bottom:none;display: block; width: 50px; height: 50px; margin: -25px 0 0; position: absolute; top: 50%; z-index: 10; overflow: hidden; cursor: pointer; text-indent: -300% !important;white-space: nowrap;overflow: hidden; }
.flex-direction-nav .flex-prev { background: url(images/slider-left.png) no-repeat top; background-size: 100%; left: 30px; }
.flex-direction-nav .flex-next { background: url(images/slider-right.png) no-repeat top; background-size: 100%; right: 30px; }

.flex-prev:hover, .flex-next:hover {background-position: bottom;}

/* Control Nav - PAGINATION*/
.flex-control-nav {width: 100%; margin: 0 auto; position: relative; left: auto; right: auto; bottom: 0; text-align: center;margin-top: 20px;}
.flex-control-nav li {margin: 0 5px; display: inline-block; zoom: 1; *display: inline;;}
.flex-control-nav li:first-child {}
.flex-control-nav li a {width: 15px; height: 15px;display: block; background: url(images/pagination.png) no-repeat bottom; background-size: 15px 34px; cursor: pointer; text-indent: -9999px;}
.flex-control-nav li a:hover {background-position: top;}
.flex-control-nav li a.flex-active {background-position: top !important; cursor: default;}

.caption {
position: absolute; 
top: 2.5%; 
right: -100px;
background: #000; 
padding: 1% 2%; 

-webkit-border-top-left-radius: 30px;
-webkit-border-bottom-left-radius: 30px;
-moz-border-radius-topleft: 30px;
-moz-border-radius-bottomleft: 30px;
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;

color: #FFF;
text-transform: uppercase;
letter-spacing: 0.08em
}


.caption{opacity:0;}
.flex-active-slide .caption{
opacity:1;
right: 0px;
transition:all .5s ease;
transition-delay: 1s;

}




@media (max-width: 767px) {
.flex-direction-nav a  { width: 40px; height: 40px; margin: -20px 0 0; }
.flex-direction-nav .flex-prev { left: 20px; }
.flex-direction-nav .flex-next { right: 20px; }
.caption {top: 3%; padding: 2% 4%; letter-spacing: 0.06em; font-size: 16px;}
}
@media (max-width: 599px) {
.flex-direction-nav a  { width: 30px; height: 30px; margin: -15px 0 0; }
.flex-direction-nav .flex-prev { left: 10px; }
.flex-direction-nav .flex-next { right: 10px; }
.caption {top: 3%; padding: 1.5% 4%; letter-spacing: 0.06em; font-size: 14px;}
}





/* **************************************************
			    		SMOOTH LINKS
************************************************** */
#hauptnavigation li a,
#footernavigation ul li a,
.footerblock a {
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
/* ...and now for the proper property */
transition:.5s;
}











form#mc-embedded-subscribe-form input{padding: 10px; width:100%; border:1px solid #b4b4b4; color:#000; box-sizing: border-box; margin: 0 !important;font-family: 'Lato', Arial, serif; font-weight: 300; font-size: 20px; line-height: 28px;color: #000;border-radius: 0px;}
.mc-field-group {padding-bottom: 10px !important;}
form#mc-embedded-subscribe-form input[type=submit] { background: #3c3c3c; border: 1px solid #3c3c3c;color: #FFF !important; text-align: center; text-transform: uppercase; padding: 0; font-size: 26px; letter-spacing: 0.08em;font-weight: normal;font-weight: 300; width: auto;padding: 10px; margin: 0;cursor:pointer;border-radius: 0px;height: auto;}
form#mc-embedded-subscribe-form input[type=submit]:hover {background: #000; border: 1px solid #000;}












/* **************************************************
			    		CONTACT FORM 7
************************************************** */
div.wpcf7 {	width: 100% !important; margin: 0;	padding: 0 !important;}

.wpcf7 form input, .wpcf7 form textarea { padding: 10px; width:100%; box-sizing: border-box; margin: 0; 
font-family: 'Lato', Arial, serif; font-weight: 300; font-size: 20px; line-height: 28px;color: #000; background: #FFF;border: 1px solid #b4b4b4;margin: 0 0 15px 0;
-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;-ms-transition: all 0.5s ease;transition: all 0.5s ease;}
.wpcf7-form input:hover, .wpcf7-form textarea:hover {outline:none;border:1px solid #3c3c3c;}
.wpcf7-form input:focus, .wpcf7-form textarea:focus {outline:none;border:1px solid #3c3c3c;}

::-webkit-input-placeholder { opacity: 1;}
::-moz-placeholder { opacity: 1;}
:-ms-input-placeholder { opacity: 1;}
:-moz-placeholder { opacity: 1;}
input[placeholder] {opacity: 1;}

.wpcf7 form textarea {height: 220px; margin-bottom: 30px !important}

.wpcf7-form input[type=submit] { background: #3c3c3c; border: 1px solid #3c3c3c;color: #FFF !important; text-align: center; text-transform: uppercase; padding: 0; font-size: 26px; letter-spacing: 0.08em;width: auto;padding: 10px; margin: 0;cursor:pointer;}
.wpcf7-form input[type=submit]:hover {background: #000; border: 1px solid #000;}


div.wpcf7-response-output { margin: 0 0 20px 0;	padding: 0; color: #000; font-size: 18px;}
div.wpcf7 .screen-reader-response {	position: absolute;	overflow: hidden;	clip: rect(1px, 1px, 1px, 1px);	height: 1px;	width: 1px;	margin: 0;	padding: 0;	border: 0;}

div.wpcf7-mail-sent-ok,
div.wpcf7-mail-sent-ng,
div.wpcf7-spam-blocked,
div.wpcf7-validation-errors {border: 0px !important; padding: 0px !important;  font-size: 24px; line-height: 28px; color: #000; font-weight: 700; padding: 0; margin: 0 0 10px 0; }

div.wpcf7-mail-sent-ok {}
div.wpcf7-mail-sent-ng {}
div.wpcf7-spam-blocked {}
div.wpcf7-validation-errors {}


span.wpcf7-form-control-wrap {	position: relative;}
span.wpcf7-not-valid-tip {color: #c70031;	font-size: 14px !important;	display: block; margin: -15px 0 10px 0!important ;}
.use-floating-validation-tip span.wpcf7-not-valid-tip { 	position: absolute;	top: 20%;	left: 20%;	z-index: 100;	border: 1px solid #ff0000;	background: #fff;	padding: .2em .8em;}
span.wpcf7-list-item {margin-left: 0.5em;}
.wpcf7-display-none { display: none;}
div.wpcf7 .placeheld {color: #000;}
div.wpcf7 img.ajax-loader { border: none;vertical-align: middle;margin-left: 4px;display: none;}
div.wpcf7 div.ajax-error { display: none;}

.checktext {color: #386e63; font-weight: 500; }
.wpcf7-checkbox {margin: 10px 0 40px 0; display: block; overflow: hidden; }
.wpcf7-list-item {display: inline; margin: 0 25px;}
.wpcf7-list-item input{ width: auto !important; margin: 0px 5px 0 0 !important; }
.wpcf7-list-item-label {font-size: 16px; color: #386e63;}

input[type=checkbox]{-ms-transform: scale(1.2); -moz-transform: scale(1.2); -webkit-transform: scale(1.2);-o-transform: scale(1.2);background: #FFF;border: 1px solid #FFF; margin-left: 2px;}






/* ------------------------------------------------------------ *\
	Section Accordion
\* ------------------------------------------------------------ */
.accordioncontainer {display: block; clear: both; margin-bottom: 40px; }
/* Accordion Trigger */
.accordion-trigger {display: table !important; table-layout: fixed !important; cursor: pointer; display: block; width: 100%; clear: both; position: relative; padding-bottom: 10px;padding-top: 10px; border-bottom: 1px solid #efefef; -webkit-transition: all 500ms ease-out;  -moz-transition: all 500ms ease-out;  -o-transition: all 500ms ease-out;  -ms-transition: all 500ms ease-out;  transition: all 500ms ease-out;}

/* Accordion Trigger Aktiv */
.accordion-trigger-active { }

/* WOHNUNGEN  BUTTON + x */
.accordion-trigger-open:before {content: "";position: absolute;display: block;right: 20px; top: 50%; width: 18px; height: 0; border-top: 1px solid rgba(0,0,0,1);transform: rotate(0deg);transform-origin: center;-webkit-transition: all .5s ease;-moz-transition: all .5s ease;-o-transition: all .5s ease;-ms-transition: all .5s ease;transition: all .5s ease;}
.accordion-trigger-open:after {content: "";position: absolute;display: block;margin: auto; right: 20px; top: 1px; bottom: 0;width: 18px; height: 0; border-top: 1px solid rgba(0,0,0,1); transform: rotate(90deg);transform-origin: center;-webkit-transition: all .5s ease;-moz-transition: all .5s ease;-o-transition: all .5s ease;-ms-transition: all .5s ease;transition: all .5s ease;}

.accordion-trigger:hover .accordion-trigger-open:before {border-top: 1px solid rgba(153,153,153,1); }
.accordion-trigger:hover .accordion-trigger-open:after {border-top: 1px solid rgba(153,153,153,1); }

.accordion-trigger-active .accordion-trigger-open:before {border-top: 1px solid rgba(153,153,153,1);transform: rotate(45deg);}
.accordion-trigger-active .accordion-trigger-open:after {border-top: 1px solid rgba(153,153,153,1);transform: rotate(-45deg); }

/* Accordion Content */
.accordion-content {background: #efefef; font-weight: 300; padding: 20px;-webkit-animation:fadeOut .8s ease-out;animation:fadeOut .8s ease-out}
.accordion-content.open {-webkit-animation:fadeIn .8s ease-out;animation:fadeIn .8s ease-out}