/**************************************************\
	
	Colors on the page:
	
	Kackbraun: 			#5a5038		Logo Löwenkopf / Footer BG
	Lightgray: 			#f5f5f5		Backgound Body
	Border Colors:	rgba(136, 136, 136, 0.15) ;
	
\**************************************************/


/**************************************************\
    
    Fonts

\**************************************************/

/* raleway-regular - latin */
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/raleway-v12-latin-regular.eot'); /* IE9 Compat Modes */
    src: local('Raleway'), local('Raleway-Regular'),
         url('../fonts/raleway-v12-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/raleway-v12-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/raleway-v12-latin-regular.woff') format('woff'), /* Modern Browsers */
         url('../fonts/raleway-v12-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/raleway-v12-latin-regular.svg#Raleway') format('svg'); /* Legacy iOS */
  }
  /* raleway-500 - latin */
  @font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/raleway-v12-latin-500.eot'); /* IE9 Compat Modes */
    src: local('Raleway Medium'), local('Raleway-Medium'),
         url('../fonts/raleway-v12-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/raleway-v12-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/raleway-v12-latin-500.woff') format('woff'), /* Modern Browsers */
         url('../fonts/raleway-v12-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/raleway-v12-latin-500.svg#Raleway') format('svg'); /* Legacy iOS */
  }
  /* raleway-600 - latin */
  @font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/raleway-v12-latin-600.eot'); /* IE9 Compat Modes */
    src: local('Raleway SemiBold'), local('Raleway-SemiBold'),
         url('../fonts/raleway-v12-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/raleway-v12-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/raleway-v12-latin-600.woff') format('woff'), /* Modern Browsers */
         url('../fonts/raleway-v12-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/raleway-v12-latin-600.svg#Raleway') format('svg'); /* Legacy iOS */
  }
  /* raleway-700 - latin */
  @font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/raleway-v12-latin-700.eot'); /* IE9 Compat Modes */
    src: local('Raleway Bold'), local('Raleway-Bold'),
         url('../fonts/raleway-v12-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/raleway-v12-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/raleway-v12-latin-700.woff') format('woff'), /* Modern Browsers */
         url('../fonts/raleway-v12-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/raleway-v12-latin-700.svg#Raleway') format('svg'); /* Legacy iOS */
  }

/**************************************************\
    
    Generall Settings

\**************************************************/

html { 
	-webkit-box-sizing: border-box; 
		 -moz-box-sizing: border-box; 
					box-sizing: border-box; 
}
*, *:before, *:after { 
	-webkit-box-sizing: inherit; 
		 -moz-box-sizing: inherit; 
					box-sizing: inherit;
}
body {
	width: 100%;
	height: 100%;
	background-color: #f5f5f5;
	font-size: 1rem;
	font-family: 'Raleway', sans-serif;
	line-height: 1.7;	
	word-wrap: break-word;
}

a {
    color:#888;
    text-decoration-line: none;
		-webkit-transition: all 0.25s ease;
			 -moz-transition: all 0.25s ease;
				-ms-transition: all 0.25s ease;
				 -o-transition: all 0.25s ease;
						transition: all 0.25s ease;
    outline: 0;
}

img { max-width: 100%; height: auto; border: 0; }

ol, ul { padding:0; }


/******  Font Settings  ******/

h1 { font-size: 24px; font-weight: 400; color: #000; text-transform: uppercase; }
h1 span {width: 100%; display: block; margin: 0 0 -0.5rem; font-size: 24px; }
h2 { font-size: 20px; font-weight: 400; color: #000; text-transform: uppercase;}
h3 { font-size: 20px; font-weight: 400; color: #000; text-transform: uppercase; }

#produkte h2 {
    text-align: center;
}

p {
    margin: 1rem 0;
	text-align: left;
}

/******  Clearfix  ******/

.cf:after,
.box-img-text:after ,
.container:after,
.box-img-text .align_left:after,
.box-img-text .align_right:after {
	content: ""; 
	clear: both; 
	display: block; 
	visibility: hidden; 
	height: 0; 
}
.clear { clear: both; }

/******  Helper Classes  ******/

.row {	margin-left: 1rem; margin-right: 1rem; }
@media (min-width : 768px) {
    .row {  margin-left: 2rem; margin-right: 2rem; }
}
.mt_20 { margin-top: 20px!important;}
.mt_30 { margin-top: 30px!important;}
.mt_50 { margin-top: 50px!important; }
.mt_100 { margin-top: 100px!important; }
.mb_20 { margin-bottom: 20px!important; }
.mb_50 { margin-bottom: 50px!important; }
.mb_100 { margin-bottom: 100px!important; }
.pt_50 { padding-top: 50px; }
.m_30 { margin: 2em; }
.p_0 { padding: 0!important; }
.pl_0 { padding-left:0; }
.pl_20 {padding-left: 20px;}
.pl_30 {padding-left: 30px;}
.ml_20 { margin-left:20px; }
.tac { text-align: center; }
.tal { text-align: left; }
.tar { text-align: right!important; }
.fl { float: left; }
.nomargin { margin: 0!important;}
.nopadding { padding: 0!important;}

.proz_40 h1 { font-size: 32px; text-align: left; }
.proz_40 p { line-height: 1.8; }

.hidden-element {
    opacity: 0;
}

.before-heading {
    display: block;
    margin: 10px 0;
    font-size: 16px;
    font-style: italic;
    font-weight: bold;
    color: #999;
}

/* Lines */
.line { width: 40px; border-bottom: 2px solid #333; }
.line_2 { width: 40px; border-bottom: 2px solid #333; display: block; margin: 30px auto; }


/**************************************************\
	Main Section
\**************************************************/


.wrapper { max-width:1170px; margin:0 auto; background-color:#FFF; }

.wrapper_2 { max-width: 700px; margin: 0 auto; }

.teaser { width: 70%; margin-left: 15%; }
.teaser p { text-align: center; }

@media (min-width : 1170px) {
	.wrapper {
		 margin:3rem auto 1rem;
	}
}


.about_wrap { max-width:1000px; margin:50px auto 0 auto; }
.about_inner_1 { float:left; max-width:450px; padding: 1.75em 0 0 0; }
.about_inner_2 { float:left; max-width:450px; margin-left:2em; margin-right:20px; }

/**************************************************\
	Alert-Box
\**************************************************/

.alert-box {
	background: rgba(238,238,238,0.9);
	padding: 3rem;
	width: 75%;
	margin: -10rem auto 0;
	text-align: center;
}
.alert-box p {
	text-align: center;
}
.alert-box a {
	color: #ca2217;
}

@media (min-width: 768px) {
	.alert-box {
		width: 45%;
	}
}



/**************************************************\
	Kontakt
\**************************************************/


.contact { max-width: 780px;
    margin: 0 auto;
    padding: 30px;
	margin-top: 0px
	}
	
.contact label {  
    font-family:  'Raleway', sans-serif;
    font-size: 14px;
    line-height: 28px;
    margin-bottom: 0;
	display: inline-block;
    max-width: 100%;
}
.contact input[type="text"], textarea{ 
    font-family:  'Raleway', sans-serif;
	width: 100%;
    background-color: #f4f4f4;
    border: none;
    border-radius: 0;
    color: #888888;
    font-size: 14px;
    line-height: 22px;
    padding: 10px 14px;
    margin-bottom: 12px;
    margin-top: 12px;
    outline: 0;
}
.contact textarea { 
    height:200px; 
}	

.contact input[type="submit"] {
    font-family:  'Raleway', sans-serif;
    background-color: #68b32e;
    width: 25%;
    min-width: 100px;
    height: 50px;
    float: right;
    font-size: 16px;
    line-height: 32px;
    color: #fff;
    margin:30px 0;
    border: none;
    border-radius: 0;
    transition: all 0.5s;
}

.contact input[type="submit"]:hover {
    background-color: rgba(90,80,56,0.5);
}
/**************************************************\
	Header Navigation
\**************************************************/


header nav { border-top: 1px solid rgba(140, 140, 140, 0.15); padding: 30px 0;}
header nav ul li { display: inline-block; margin: 0 20px; text-transform: uppercase; position: relative; }
header nav ul { margin:0 auto; display:inline-block; }
header nav a { color:#333; text-decoration:none; font-size: 13px; font-weight: 600; text-transform: uppercase; }
header nav a:hover { color:#ca2217; }
header nav a:active { color:#999; }



/**************************************************\
	Header
\**************************************************/

   
header{
        text-align: center;            
        background: #FFF;
        color: #000;
				border-bottom:1px solid rgba(136, 136, 136, 0.15);
        -webkit-transition: all 0.4s ease;
        transition: all 0.4s ease;
}
    

header img {
  width: 400px;
  margin:60px 0;
  transition: all 0.6s ease;
}        
    
/**************************************************\
	Slider
\**************************************************/


.hero {
  /**************************************************       Zwei Ausnahme Breakpoints
    \**************************************************/
  /* Breakpoint max-mobile-landscape */
  /* Breakpoint max-mobile-portrait */
  /* Breakpoint mobile-landscape */
  /* Breakpoint tablet-portrait */
  /* Breakpoint tablet-landscape */
  /* Breakpoint laptop */ }
  .hero h2 {
    position: absolute;
    top: 20%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 8vw;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase; }
  .hero a.button {
    display: block;
    position: absolute;
    left: 50%;
    bottom: 10%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%); }
  @media (max-height: 780px) and (orientation: landscape) {
    .hero a.button {
      font-size: 0.875rem;
      padding: 0.75rem 1rem; } }
  @media (max-height: 780px) and (orientation: portrait) {
    .hero a.button {
      font-size: 0.875rem;
      padding: 0.75rem 1rem; } }
  @media (min-width: 425px) {
    .hero h2 {
      top: 30%; }
    .hero a.button {
      bottom: 25%; } }
  @media (min-width: 768px) {
    .hero {
      /* Breakpoint portrait */ }
      .hero h2 {
        top: 50%;
        font-size: 4vw; }
      .hero a.button {
        bottom: 15%; } }
  @media (min-width: 768px) and (orientation: portrait) {
    .hero a.button {
      bottom: 15%;
      font-size: 0.875rem;
      padding: 0.75rem 1rem; } }
  @media (min-width: 1024px) {
    .hero {
      /* Breakpoint portrait */ }
      .hero a.button {
        bottom: 25%; } }
  @media (min-width: 1024px) and (orientation: portrait) {
    .hero a.button {
      bottom: 15%; } }
  @media (min-width: 1440px) {
    .hero h2 {
      font-size: 5rem; } }

#mainslider {
  position: relative; }
  #mainslider ul {
    display: none;
    text-align: center;
    /* Breakpoint tablet-portrait */
    /* Breakpoint tablet-landscape */ }
    #mainslider ul li {
      display: inline-block;
      position: relative;
      margin: 0 0.5rem;
      padding: 0; }
      #mainslider ul li g {
        opacity: 0.5; }
      #mainslider ul li.slick-current g {
        opacity: 0.95; }
      #mainslider ul li.slick-current circle {
        fill: #2f3f52; }
      #mainslider ul li:hover {
        cursor: pointer; }
        #mainslider ul li:hover g {
          opacity: 0.875; }
    #mainslider ul svg {
      display: block;
      margin: 0 auto;
      max-width: 4rem; }
    @media (min-width: 768px) {
      #mainslider ul {
        display: block;
        position: absolute;
        top: 15%;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        width: 75%;
        max-width: 30rem;
        /* Breakpoint portrait */ } }
  @media (min-width: 768px) and (orientation: portrait) {
    #mainslider ul {
      top: 15%; } }
    @media (min-width: 1024px) {
      #mainslider ul {
        top: 25%;
        /* Breakpoint portrait */ } }
  @media (min-width: 1024px) and (orientation: portrait) {
    #mainslider ul {
      top: 15%; } }
    @media (min-width: 1024px) {
        #mainslider ul svg {
          max-width: 5rem; } }		

/**************************************************\
	Content
\**************************************************/

.content {
	padding: 0 2rem;
}

#produkte  h1{
    text-align: center;
}

.embed-container {
  position: relative; 
  padding-bottom: 56.25%; /* ratio 16x9 */
  height: 0; 
  overflow: hidden; 
  width: 100%;
  height: 100%;
}
.embed-container iframe {

  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
}


/* ========== Produkt Einzelansicht ========== */

.product_wrap .products {
    position: relative;
    overflow: hidden;
    margin-bottom: 30px;
    margin-top: 30px;
}
.product_wrap.two .products{
    margin-top: 0;
}

.product_wrap .products img {
    max-width: 100%;
}
/*.product_wrap .products:hover img {
    -webkit-transform: scale3d(1.1, 1.1, 1);
    transform: scale3d(1.1, 1.1, 1);
}*/
.product_wrap .products img {
    position: relative;
    -webkit-transform: translate3d(0, 0, 0) rotate3d(1, 1, 1, 0deg) scale3d(1, 1, 1);
    transform: translate3d(0, 0, 0) rotate3d(1, 1, 1, 0deg) scale3d(1, 1, 1);
    transition: .3s all;
    width: 100%;
}
.product_wrap .products .layer {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    opacity: 0;
    left: 0;
    -webkit-transition: 0.3s all;
    -o-transition: 0.3s all;
    transition: 0.3s all;
    background-color: rgba(255, 255, 255, 0.7);
}
.product_wrap .products .layer .layer-inner {
    position: absolute;
    width: 100%;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.product_wrap .products:hover .layer {
    opacity: 0.8;
}
.product_wrap .products .layer h3 {
    text-align: center;
    zoom: 1;
    filter: alpha(opacity=0);
    -webkit-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
    -webkit-transform: translate(0, 10px);
    -moz-transform: translate(0, 10px);
    -ms-transform: translate(0, 10px);
    -o-transform: translate(0, 10px);
    transform: translate(0, 15px);
    -webkit-transition: all .15s 75ms cubic-bezier(.2, .45, .44, .93);
    -moz-transition: all .15s 75ms cubic-bezier(.2, .45, .44, .93);
    -o-transition: all .15s 75ms cubic-bezier(.2, .45, .44, .93);
    transition: all .15s 75ms cubic-bezier(.2, .45, .44, .93);
}
.product_wrap .products:hover .layer h3 {
    zoom: 1;
    filter: alpha(opacity=100);
    -webkit-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
    -webkit-transition: all .3s .1s cubic-bezier(.455, .03, .515, .955);
    -moz-transition: all .3s .1s cubic-bezier(.455, .03, .515, .955);
    -o-transition: all .3s .1s cubic-bezier(.455, .03, .515, .955);
    transition: all .3s .1s cubic-bezier(.455, .03, .515, .955);
}
.product_wrap .products .layer h3 a,
.product_wrap .products .layer h3 {
    text-decoration: none;
    font-size: 18px;
    line-height: 20px;
    font-weight: 400;
    color: #333;
    font-family: 'Poppins', sans-serif;
}
.product_wrap .products .layer h3.symbol-layer {
    font-size: 29px;
}

/* push Productimages on the right side really to right  */

.wrapper div.proz_60 img {
	float: right;
}


section > div {
    padding: 0 1em;
}
section>div.row {
	padding: 0;
}

/******  Benefits Box  ******/

.benefits-box-left{ padding: 0 80px 0 0; position: relative; text-align: right; min-height: 100px; }
.benefits-box-left p { text-align: right; font-size: 14px; }
.benefits-box-left-icon { left: auto; right: 0; display: block; position: absolute; }
.benefits-box-right { padding: 0 0 0 80px; position: relative; text-align: left; min-height: 100px; }
.benefits-box-right p { text-align: left; font-size: 14px; }
.benefits-box-right-icon { right: auto; left: 0; display: block; position: absolute; }

/******  Show more procts  ******/
#moreProducts {
	margin-top: 3rem;
	padding-top: 1rem;
	border-top: 1px solid rgba(136, 136, 136, 0.15);
}



/**************************************************\
	Footer
\**************************************************/


.footer { max-width:1170px; margin:0 auto; margin-top:50px; }
.footer-wrapper{ background:#eee; color:#000; }
.footer .col1-3 { text-align:center; padding:20px; }

/* Links */

.footer-wrapper a {
  color: #888;
  text-decoration-line: none;
}
.footer-wrapper a:hover {
	color: #000;
}

/* Footer Navigation */

.footer-nav {
	padding: 2rem 0 1rem;
	background-color: #f5f5f5;
	text-align: center;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.0625rem;
}

.footer-nav a:hover {
	color: #000;
}





/**************************************************\
	Media Queries - Mobile First
\**************************************************/


    /* Small Devices, Tablets  */
    @media (min-width : 768px) {
    .col1-3 { float: left; width: 33.33%; }
	.footer .footer_left, .footer .footer_right { padding: 5rem; }
	.footer .footer_center { padding:80px 30px; }	

    .proz_30 { float: left; width: 30%; padding: 0 2rem; }
    .proz_40 { float: left; width: 40%; padding: 0 2rem; }
    .proz_50 { float: left; width: 50%; }
    .proz_60 { float: left; width: 60%; padding: 0 2rem; }
    .proz_70 { float: left; width: 70%; padding: 0 2rem; }
	
	.col-md-4 {
	width:32%; 
	float:left;
}

.col-md-4:nth-of-type(3n+1)	{ margin-right: 1%; }
.col-md-4:nth-of-type(3n+2)	{ margin-left: 1%; margin-right: 1%; }
.col-md-4:nth-of-type(3n+3)	{ margin-left: 1%; }
	
    }