/*!
 * Start Bootstrap - HYPERPRO Deutschland v1.0 (http://www.hyperpro-deutschland.com)
 * Copyright 2016 Rachuj
 */
/*
@import 'https://fonts.googleapis.com/css?family=Montserrat:400,700';
 */

body {
  width: 100%;
  height: 100%;
  font-family: 'Montserrat', Helvetica, Arial, sans-serif;
}
html {
  width: 100%;
  height: 100%;
}

hr {border: 1px solid #6e008d;}


.content-fluid ul {
	font-size: 15px;
	}

@media (min-width: 768px) {
	.content-fluid ul {
		font-size: 20px;
	}
}


#brand {
  text-align:u center;
}

#brand img {
    margin: 1em;
    max-width: 269px;
    width: 100%;
}

#navbar ul {
	letter-spacing: 0.1px;
	text-transform: uppercase;
	}
	
.level-1-nav {
	margin-top: 2em;
	}
	
@media (max-width: 992px) {
	.level-1-nav {
	margin-top: 1.2em;	
	}
}

@media (min-width:768px) and (max-width: 991px) {
	.nav>li>a {
    position: relative;
    display: block;
    padding: 8px 5px;
	}
}

	

#navbar {
    margin-right: 1.5em;
}
	
.navbar-inverse { background-color: #222222}
.navbar-inverse .navbar-nav>.active>a:hover,.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus { background-color: #6E008D}
.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus { background-color: #6e008d}
.dropdown-menu { background-color: #FFFFFF}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { background-color: #6E008D}
.navbar-inverse { background-image: none; }
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { background-image: none; }
.navbar-inverse { border-color: #222222}
.navbar-inverse .navbar-brand { color: #999999}
.navbar-inverse .navbar-brand:hover { color: #FFFFFF}
.navbar-inverse .navbar-nav>li>a { color: #DDDDDD}
.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus { color: #FFFFFF}
.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus { color: #FFFFFF}
.navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus { color: #FFFFFF}
.dropdown-menu>li>a { color: #333333}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { color: #FFFFFF}
.navbar-inverse .navbar-nav>.dropdown>a .caret { border-top-color: #999999}
.navbar-inverse .navbar-nav>.dropdown>a:hover .caret { border-top-color: #FFFFFF}
.navbar-inverse .navbar-nav>.dropdown>a .caret { border-bottom-color: #999999}
.navbar-inverse .navbar-nav>.dropdown>a:hover .caret { border-bottom-color: #FFFFFF}

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

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 35px;
  text-transform: uppercase;
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 1px;
}
@media screen and (max-width: 415px) {
	h1, h2, h3, h4, h5, h6 {
		font-size: 24px;
	}
}



p {
  margin: 0 0 25px;
  font-size: 15px;
  line-height: 1.5;
}

.footer ul {
    font-size: 15px;
}

@media (min-width: 768px) {
    p {
        margin: 0 0 35px;
        font-size: 20px;
        line-height: 1.6;
    }
    .footer ul {
        font-size: 20px;
    }
}
a {
  color: #6e008d;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
a:hover,
a:focus {
  text-decoration: underline;
  color: #6e008d;
}
.light {
  font-weight: 400;
}
.navbar-custom {
  margin-bottom: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  text-transform: uppercase;
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: black;
}
.navbar-custom .navbar-toggle {
  color: white;
  background-color: rgba(255, 255, 255, 0.2);
  font-size: 12px;
}
.navbar-custom .navbar-toggle:focus,
.navbar-custom .navbar-toggle:active {
  outline: none;
}
.navbar-custom .navbar-brand {
  font-weight: 700;
}
.navbar-custom .navbar-brand:focus {
  outline: none;
}
.navbar-custom a {
  color: white;
}
.navbar-custom .nav li a {
  -webkit-transition: background 0.3s ease-in-out;
  -moz-transition: background 0.3s ease-in-out;
  transition: background 0.3s ease-in-out;
}
.navbar-custom .nav li a:hover {
  color: rgba(255, 255, 255, 0.8);
  outline: none;
  background-color: transparent;
}
.navbar-custom .nav li a:focus,
.navbar-custom .nav li a:active {
  outline: none;
  background-color: transparent;
}
.navbar-custom .nav li.active {
  outline: none;
}
.navbar-custom .nav li.active a {
  background-color: rgba(255, 255, 255, 0.3);
}
.navbar-custom .nav li.active a:hover {
  color: white;
}
@media (min-width: 768px) {
  .navbar-custom {
    padding: 20px 0;
    border-bottom: none;
    letter-spacing: 1px;
    background: transparent;
    -webkit-transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
    -moz-transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
    transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
  }
  .navbar-custom.top-nav-collapse {
    padding: 0;
    background: black;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  }
}

/* ------------------------------------------------------------------- */
.indexheader {
	  color: white;
    background-image: url(../Images/front-website.jpg);
    width: 100vw;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom center;
}

.landingpage {
    position: relative;
    height: 100vh;
}

.landingpage-title {
    height: 150px;
    text-align: center;
    transform: translateY(-50%);
    position: absolute;
    top: 50%;
    right: 0;
    bottom: 0;
    left: 0;
}

.landingpage-title h1:nth-child(1) {
    font-weight: 300;
}

.scroll-button {
    width: 55px;
    height: 55px;
    cursor: pointer;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.intro {
  display: table;
	width: 100%;
	height: 100%;
  padding: 100px 0;
  text-align: center;
  color: white;
  background: url(../Images/front-website.jpg) no-repeat bottom center scroll;
  background-color: black;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
}
.intro .intro-body {
  display: table-cell;
  vertical-align: middle;
}
.brand-heading {
    margin: 0;
    padding: 0;
    text-transform: uppercase;
 		font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #fff;
    letter-spacing: 0.2em;
}
.intro-text {
	  letter-spacing: 0.2em;
}
@media (min-width: 768px) {
  .intro {
    height: 100%;
    padding: 0;
  }
	.brand-heading {
    font-size: 80px;
  }
  .intro-text {
    font-size: 26px;
  }
}

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

.btn-circle {
  width: 70px;
  height: 70px;
  margin-top: 15px;
  padding: 7px 16px;
  border: 2px solid white;
  border-radius: 100% !important;
  font-size: 40px;
  color: white;
  background: transparent;
  -webkit-transition: background 0.3s ease-in-out;
  -moz-transition: background 0.3s ease-in-out;
  transition: background 0.3s ease-in-out;
}
.btn-circle:hover,
.btn-circle:focus {
  outline: none;
  color: white;
  background: rgba(255, 255, 255, 0.1);
}
.btn-circle i.animated {
  -webkit-transition-property: -webkit-transform;
  -webkit-transition-duration: 1s;
  -moz-transition-property: -moz-transform;
  -moz-transition-duration: 1s;
}
.btn-circle:hover i.animated {
  -webkit-animation-name: pulse;
  -moz-animation-name: pulse;
  -webkit-animation-duration: 1.5s;
  -moz-animation-duration: 1.5s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
}
@-webkit-keyframes pulse {
  0 {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-moz-keyframes pulse {
  0 {
    -moz-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -moz-transform: scale(1.2);
    transform: scale(1.2);
  }
  100% {
    -moz-transform: scale(1);
    transform: scale(1);
  }
}

.content-section {
  padding-top: 100px;
}

@media (min-width: 767px) {
  .content-section {
    padding-top: 50px;
  }
}

.download-section {
  width: 100%;
  color: white;
  background: url(../Images/springs.png) no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
}

.caption {
    padding: 25px 0;
    height: 100%;
    background: rgba(66,34,78,1.0);
    opacity: 0.9;
}
#map {
  width: 100%;
  height: 200px;
  margin-top: 0px;
}


@media (min-width: 767px) {
  #map {
    height: 400px;
    margin-top: 0px;
  }
}
.btn {
  text-transform: uppercase;
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  border-radius: 0;
}
.btn-default {
  border: 1px solid #fde100;
  color: #fde100;
  background-color: transparent;
}
.btn-default:hover,
.btn-default:focus {
  border: 1px solid #fde100;
  outline: none;
  color: black;
  background-color: #fde100;
}
ul.banner-social-buttons {
  margin-top: 0;
}
@media (max-width: 1199px) {
  ul.banner-social-buttons {
    margin-top: 15px;
  }
}
@media (max-width: 767px) {
  ul.banner-social-buttons li {
    display: block;
    margin-bottom: 20px;
    padding: 0;
  }
  ul.banner-social-buttons li:last-child {
    margin-bottom: 0;
  }
}
::-moz-selection {
  text-shadow: none;
  background: #fcfcfc;
  background: rgba(255, 255, 255, 0.2);
}
::selection {
  text-shadow: none;
  background: #fcfcfc;
  background: rgba(255, 255, 255, 0.2);
}
img::selection {
  background: transparent;
}
img::-moz-selection {
  background: transparent;
}
body {
  webkit-tap-highlight-color: rgba(255, 255, 255, 0.2);
}



/* --- SOCIAL MEDIA ----------------------------------- */
ul.social-share a.facebook:hover {background: #3b5998;}
ul.social-share a.twitter:hover  {background: #55acee;}
ul.social-share a.youtube:hover  {background: #cd201f;}
ul.social-share a.rss:hover      {background: #f26522;}
ul.social-share a.flickr:hover   {background: #ff0084;}

/* --- BUTTON ---------------------------------------- */
.btn-circle {
    color: #fff;
    background-color: #666;
    border-color: #555;
}
 
.btn-circle:hover, .btn-circle:focus, .btn-circle:active, .btn-circle.active, .open > .dropdown-toggle.btn-circle {
    background: rgba(110,0,141,1.0);
}
 
.btn-circle:active, .btn-circle.active {
    background: rgba(110,0,141,1.0);
    box-shadow: none;
}

/* --- BACK TO TOP ------------------------------------ */
.back-to-top {
    cursor: pointer;
    position: fixed;
    bottom: 20px;
    right: 20px;
    display:none;
}

/* --- CONTENT ------------------------------------ */

.content {
    font-size: 15px;
}

.content h1 {
    margin-top: 1.5em;
    border-bottom: 2px solid #6e008d;
}

.container-nav {
	height: 100px;
	} 
   
@media (max-width: 1200px) {
	.container-nav {
	height: 50px;
	} 
}

.page-header {
	text-align: center;
  border-bottom: 2px solid #6e008d;
	}


.content-fluid {
	margin-top: 2em;
	margin-bottom: 2em;
	}
	
.align-center {text-align: center;}
.align-right {text-align: right;}

blockquote {
	border-left: 4px solid  #6e008d;
	}
	
/* --- SUB NAVIGATION & INFOBOX --------------------------------- */
.sub-nav-level-3 {
	border: 1px solid #222;
	border-radius: 5px;
	margin-bottom: 1.5em;
	}

.sub-nav-level-3 h2 {
	text-align: center;
	font-size: 1.5em;
	margin: 0;
	background: #6e008d;
	padding: 0.2em;
  color: white;
	} 
	
.rootline p {
	font-size: 0.8em;
	}
	
.ce-border img, .ce-border iframe {
    border: 2px solid #fdf600;
    padding: 0px;
}

.ce-textpic {
	margin-bottom: 1.5em;
	}
	
.content-fluid h2 {
	padding-left: 0.5em;
	border-left: 1em solid #6e008d;
	}

.content-fluid ul {
    margin: 0 0 25px;
    font-size: 15px;
    line-height: 1.5;
	}	
	
@media (min-width: 768px) {
	.content-fluid ul {
		margin: 0 0 35px;
    font-size: 20px;
    line-height: 1.6;
	}
}


/* --- SHOCK OFFERS --------------------------------------- */

.shock-offers {
	color: white;
  margin: 20px 0 20px 0;
  text-align: center;
  background: url(../Images/shocks_bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center bottom;
}

.shock-offers h2 {
    color: #fff;
    margin: 0;
    line-height: 120px;
}

/* --- SHOCKS LIST   --------------------------------------- */
.layout-2 {
	padding-top: 1em;
	padding-bottom: 1em;
	margin-top: 1em;
	margin-bottom: 1em;
}



.layout-2 h2 {
	font-size: 1.5em;
	margin-top: 30px;
  margin-bottom: 20px;
	}
	
.layout-2 ul {
	font-size: 15px;
	list-style-image: url('../Images/hp-bulletlist.png');
	}

@media (min-width: 768px) {
	.layout-2 ul {
		font-size: 20px;
		list-style-image: url('../Images/hp-bulletlist.png');
	}
}	


/* --- SPRINGS --------------------------------------------- */

.layout-3 {
	padding: 50px 0 20px 0;
	color: white;
	}

.layout-3 h2 {
		font-size: 20px;
	}
.layout-3 p {
	font-size: 16px;
	}

.springs-bg {
		background: url(../Images/Hyperpro_Background_01.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

.list-bg {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top right;
    background-color: #ededed;
    border-top: 2px solid #c3c3c3;
    border-bottom: 2px solid #c3c3c3;
}

.gradient3 {
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,0.5)), to(rgba(0,0,0,0.8)));
    background: -webkit-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.8));
    background: -moz-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.8));
    background: -ms-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.8));
    background: -o-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.8));
}



/* --- GRIDELEMENTS  "PRODUCTS" ------------------------------  */

.img-secondary, 
.img-secondary div.ce-textpic,
.img-secondary .ce-intext.ce-right .ce-gallery, 
.img-primary, 
.img-primary div.ce-textpic, 
.img-primary .ce-intext.ce-right .ce-gallery {
	margin: 0;
	padding: 0;
	}
.img-secondary img {
    height: 110px;
    width: 150px;
    display: block;
    position: relative;
    border: 1px solid #000;
	}
	
.img-primary  {
    height: 330px;
    border: 1px solid #000;
}
.img-primary img {

  }
	
.prod-secondary, .prod-primary {
	padding: 0px;
	mardin: 0px;
	}

.prod-content h2 {
	margin-bottom: 15px;
	font-size: 20px;
	}

.prod-content p {
	font-size: 15px;
	}

.product {
	margin-top: 2em;
	margin-bottom: 2em;
	padding-bottom: 2em;
	border-bottom: 2px solid black;
	}
	
/* --- SECTION2 ------------------------------------------------ */

.section2 {
	background: url(../Images/welcome-bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom center;
  position: relative;
}

.section2 p {
	color: white;
	font-size: 15px;
	}
	
.section2 h1, .section2 h2, .section2 h3, .section2 h4, .section2 h5, .section2 h6 {
	color: white;
	}

@media screen and (max-width: 768px) {
	.section2 h1, .section2 h2, .section2 h3, .section2 h4, .section2 h5, .section2 h6 {
			margin-top: 1.5em;
	}
}

@media screen and (min-width: 992px) {
.section2 .col-md-6 {
    height: 100%;
    position: absolute;
    bottom: 0;
	}
}

@media screen and (min-width: 992px) {
	.section2-image {
    position: absolute;
    bottom: 0;
    left: 30%;
    height: 90%;
    width: auto;
    max-height: 700px;
  }
}

@media screen and (min-width: 992px) {
	.section2-float {
    float: right;
  }
}

.section2 .col-md-5 {
    position: relative;
    height: 100%;
}

@media screen and (min-width: 768px) {
.section3-5, .section2 .col-md-5 {
    padding: 70px 0 70px 0;
    margin: 0 auto;
  }
}

@media screen and (max-width: 991px) {
	.section2-image {
    display: none;
   }
}
/* --- SECTION 3 ------------------------------------------------ */
.section3 p {
	color: white;
	font-size: 15px;
}

.section3 h1, .section3 h2, .section3 h3, .section3 h4, .section3 h5, .section3 h6 {
	color: white;
	}
	
@media screen and (max-width: 768px) {
	.section3 h1, .section3 h2, .section3 h3, .section3 h4, .section3 h5, .section3 h6 {
			margin-top: 1.5em;
	}
}

.no-margin {
	margin: 0; !important
}

.section3-padding {
	padding-bottom: 60px;	
	}

@media screen and (min-width: 768px) {
.section3 {
    padding: 70px 15px 70px 15px;
	}
}
	
/* --- BUTTON WHITE ------------------------------------------------ */
	
.btn-white { 
  color: #FFFFFF; 
  background-color: transparent; 
  border-color: #FFFFFF; 
} 
 
.btn-white:hover, 
.btn-white:focus, 
.btn-white:active, 
.btn-white.active, 
.open .dropdown-toggle.btn-white { 
  color: #FFFFFF; 
  background-color: #6e008d; 
  border-color: #FFFFFF; 
} 
 
.btn-white:active, 
.btn-white.active, 
.open .dropdown-toggle.btn-white { 
  background-image: none; 
} 
 
.btn-white.disabled, 
.btn-white[disabled], 
fieldset[disabled] .btn-white, 
.btn-white.disabled:hover, 
.btn-white[disabled]:hover, 
fieldset[disabled] .btn-white:hover, 
.btn-white.disabled:focus, 
.btn-white[disabled]:focus, 
fieldset[disabled] .btn-white:focus, 
.btn-white.disabled:active, 
.btn-white[disabled]:active, 
fieldset[disabled] .btn-white:active, 
.btn-white.disabled.active, 
.btn-white[disabled].active, 
fieldset[disabled] .btn-white.active { 
  background-color: transparent; 
  border-color: #FFFFFF; 
} 
 
.btn-white .badge { 
  color: transparent; 
  background-color: #FFFFFF; 
}


/* --- FOOTER --------------------------------------------------- */
.site-footer {
    background: #222;
    width: 100%;   
    padding: 0.5em;
    color: rgba(255,255,255,0.8);
    border-top: 4px solid rgba(110,0,141,1.0);
}

.site-footer .allrights {
    color: rgba(255,255,255,0.7);
    padding: 0.5em;
    text-align: center;
    text-transform: uppercase;
}

.site-footer h4 {
    border-bottom: 2px solid #6e008d;
    color: white;
    padding: 0.2em 1em 0.5em 1em;
}

.site-footer ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
}

.site-footer a {color: rgba(255,255,255,0.8);}

.site-footer .social-box a:hover {color: white;}

.site-footer img {
    margin: 0px;
    padding: 0px;
    margin-bottom: 1em;
    width: 80%;
    max-width: 269px; 
}

.site-footer p {
    margin: 0;
}

.social-box {
    font-size: 1.5em;
}

@media (max-width: 991px) {
    .footer h4, .social-box h4 {
        margin-top: 1.5em;
    }
}

.produkte1 {
	  height: 98px;
    width: 100%;
    position: absolute;
    bottom: 0;
	}