/*
Custom CSS for Wepa Mach M!t
Author: Andrea Nepori;
Version: 1.0;
*/


/****** Typography ******/


body {
	color: #002841;
}

h2 {
	font-weight: 200;
}

.site {
    overflow-x: hidden;
}

/*****JUMBOTRON****/

.jumbotron {
	
	padding: 0;
}

.hero-left {
	background-color: #002841;

	height: 100vh;

}

.hero-right {
	height: 100vh;
	background: url('../img/hero-right.jpg') no-repeat center;
	background-size: cover;
}

/****** PAGE WRAPPER ******/

#page-wrapper{
	margin-top: 140px;
}

#page-wrapper h2 {
	margin-top: 3rem;
	margin-bottom: 2rem;
}

.error-404 {
	height: 80vh;
}

/****** BUttons ******/

.btn-primary {
    color: #00dcb0;
    background-color: #002841;
    border-color: #002841;
    transition: transform .3s ease-out;
    outline: none!important;

}

.btn-primary:hover, .btn-primary:active {
    color: #00dcb0!important;
    background-color: #002841!important;
    border-color: #002841!important;
    transform: translateY(5px);
    outline: none!important;
}

.btn {
	padding: 0.9rem 1.2rem;
    border-radius: 1rem;
}

/****** Jumbotron ******/


.jumbotron h1{
	font-weight: 200;
	font-size: 4.2em;
	line-height: 1em;
	letter-spacing: -5px;
	color: #44dfbb;
}

@media (min-width: 576px) {
    	.jumbotron h1{
			font-size: 4.6em;
		}
    }
@media (min-width: 768px) {
		.jumbotron h1{
			font-size: 4.8em;
		}
    
     }
@media (min-width: 992px) {
		.jumbotron h1{
			font-size: 5em;
		}
    
     }
@media (min-width: 1200px) {
		.jumbotron h1{
			font-size: 5.4em;
		}
    
     }
@media (min-width: 1400px) {
		.jumbotron h1{
			font-size: 6em;
		}
    
     }


.fw-light {font-weight: 300;}

.fw-normal {font-weight: normal;}	

.fw-bold {font-weight: bold;}

.header-logos {
	position: absolute;
	top: 0;
	z-index: 1000;
	width: 100%;
	padding: 1em 0;
}

.logo-left{
	max-width: 80px;
}

.logo-right{
	max-width: 100%;
}


@media (min-width: 768px) {
    .logo-left{
	max-width: 100px;
}

.logo-right{
	max-width: 200px;
}
     }


.hero__scroll {
    position: absolute;
    bottom: 15px;
    width: 300px;
    margin: auto;
    display: block;
    cursor: pointer;
    padding-bottom: 5px;
    left: 0;
    right: 0;
    text-transform: uppercase;

}

.hero-chevron {
	max-width: 50px;
	-webkit-animation: pulse 2s infinite;
            animation: pulse 2s infinite;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); }
  50% {
    -webkit-transform: translate(0, 10px);
            transform: translate(0, 10px); }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); } }

@keyframes pulse {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); }
  50% {
    -webkit-transform: translate(0, 10px);
            transform: translate(0, 10px); }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); } }

.hero-je {
	text-transform: uppercase;
	color: #00dcb0;
	font-size: 1.4rem;
	margin-bottom: 1rem;
	font-weight: normal;
	letter-spacing: 4px;
	display: block;
}

/****** PRODUCTS ******/

#products {
	padding: 5rem 0 5em;
	min-height: 100vh;
	background: url('../img/products-bg-mobile.jpg') no-repeat center;
	background-size: cover;
	position: relative;

}


#products-mobile {
	padding: 5em 0 5em;
	position: relative;
	background: #EBEAEB;
}

.wrapper-products h2 {
	font-size: 1.7rem;

}

.wrapper-products a, .wrapper-products a:visited{
	color: #002841!important;
	text-decoration: none;
}

.wrapper-products a:hover, .wrapper-products a:active {
	color: #00dcb0!important;

}



@media (min-width: 768px) {
	#products {
	padding: 7em 0 5em;
	background: url('../img/products-bg.jpg') no-repeat center;
	background-size: cover;
 }

	.wrapper-products h2{
	font-size: 2rem; }

	.wrapper-products {
	margin: -3rem 0;
}

}
    
@media (min-width: 1549px) {

	.wrapper-products h2{
	font-size: 2.3rem; }	

}

.wrapper-products h2 {
	color: #002841;
}

.wald-streife{
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 110px;
	background: url('../img/wald.png') repeat-x bottom;
	background-size: contain;
}

/******* UMWELT LISTE *******/

#umwelt-liste{
	background: #00dcb0;
	padding: 0em 0 3em;
}




.umwelt-number {
	width: 60px;
	line-height: 60px;
	background: white;
	border-radius: 50%;
	font-size: 2rem;
	padding-left: 5px;
	color: #00d6af;
	text-align: center;
	position: absolute;
	top: -70px;
	left: 28px;
}

@media (min-width: 576px) {
    
   	.umwelt-number {
	width: 60px;
	line-height: 60px;
	background: white;
	border-radius: 50%;
	font-size: 2em;
	padding-left: 5px;
	color: #00d6af;
	text-align: center;	
    position: absolute;
    top: 10px;
    left: 20px;
}

    }



#umwelt-liste .row {
	padding-top: 3rem;
	padding-bottom: 3rem; 
}

.umwelt-intro h2 {
	color: white;
	font-size: 1.5rem;
}

.a-underline, .a-underline:active {

}

.a-underline:visited, .a-underline:hover {
	color: white!important;
}


.umwelt-image {
 
}

@media (min-width: 768px) {

.umwelt-image {
  min-height: 60vh;
}

    
    }

    

.umwelt-text h3 {
	color: white;
	font-weight: normal;
	margin-top: 1rem;
    margin-bottom: 2rem;
   
}

.umwelt-text p {
	color: white;
	font-size: 18px;

}

@media (min-width: 576px) {

	.umwelt-intro h2 {

	font-size: 2.3rem;
	}

	.umwelt-text h3 {
		font-size: 1.8rem;
	}

	.umwelt-text p {

	font-size: 22px;

	}
    
}

a.umwelt-link {
	color:#002841!important;
	text-decoration: none;
	cursor: pointer;
}

.btn-umwelt {
    color: #00dcb0!important;
    font-size: 1.2rem;
    padding: 0.7rem 3rem;
    font-weight: 200;
}

.chevron {
	max-width: 30px;
	margin-top: 1rem;
}

.umwelt-text-inner {
 
}



.row-2 img{
	max-width: 100%;
}

.row-5 img{ 
		max-width: 80%;
	}

.row-6 img {
		max-width: 80%;
}

.row-4 img {max-height: 350px;}


@media (min-width: 576px) {

	.row-5 img {
	max-width: 400px;
}

	.row-2 img{
	max-width: 400px;
}

	.row-4 img {
	max-height: 450px;
}


	.row-6 img {
	max-width: 300px;	
}
    
    }




/****** ICONS *******/

#icons {
	background-color: #002841;
	padding: 4rem 0 5rem;
	color: white;

}

#icons h2 {
	font-size: 1.7rem;
}


@media (min-width: 768px) {

	#icons {

	padding: 7rem 0 5rem;

}

	#icons h2 {
	font-size: 2.3rem;
	margin-bottom: 3rem;
}
    
     }


#icons h5 {
	font-weight: 200;
}

.single-icon {
	padding-top: 3rem;
	padding-bottom: 3rem;
}

.single-icon img{
	max-width: 300px;
	margin-bottom: 2rem;
	transition: transform 500ms;

}

.single-icon img:hover{
	transform: translateY(-8px);
}

.single-icon h5{
	color: #00dcb0;
}

.single-icon a{
	color: white;
}

a.icon-byline{
	text-decoration: none;
}

.modal-content{
	max-width: 400px;
	background: #00dcb0;
	color: #002841;
	padding: 2rem 1rem 0.7rem;  
	border-radius: 1rem;	
}

h2.modal-title {
	line-height: 1;
	font-size: 1.5em;

}

.modal-header {
	border-bottom: none;
}

.modal .close {
    
    font-size: 2.2rem;
    font-weight: 200;
    line-height: 1;
    color: #002841;
    text-shadow: none;
    opacity: 1;
    max-width: 20px;
    position: absolute;
    right: 15px;
    top: 15px;
    padding: 0;
}

/****** Carousel Produkte *****/

#carousel-produkte{
	min-height: 140vh;
	color:#002841;  
}

.produkte-title h2 {
	font-size: 1.7rem;
}

@media (min-width: 768px) {

	#carousel-produkte{
	min-height: 80vh;
	color:#002841;  
}

	.produkte-title h2 {
	font-size: 2.3rem;
}

    
     }


.carousel-item img {
	max-height: 300px;
}


.carousel-item h2 {
	font-weight: normal;
	margin-bottom: 1.5rem;
}

.carousel-item h3 {
	font-weight: 200;
	margin-bottom: 1.5rem;
	text-transform: uppercase;
	font-size: 1.5rem;
}

.carousel-item h4 {
	font-weight: 700;
	margin-bottom: 1rem;
	font-size: 1.2rem;
}


.produkte-title {
    padding: 7rem 0 0;
    text-transform: uppercase;
}

.carousel-control-next, .carousel-control-prev {
	opacity: 1;
}


.carousel-control-next-icon {
	background-image: url('../img/arrow-next.png');

}

.carousel-control-prev-icon {
	background-image: url('../img/arrow-prev.png');
}

.carousel-control-prev-icon, .carousel-control-next-icon {

    width: 30px;
    height: 30px;

}

.carousel-inner > .item > img, .carousel-inner > .item > a > img{
    margin:auto;
}

/****** KOOPERATION *****/

#kooperation a {
	color: white;
	border-bottom: 1px solid white;

}

#kooperation a:hover, #kooperation a:active {
	color: white;
	border-bottom: none;
	text-decoration: none;

}


#kooperation h2, #kooperation p{
	color: white;
}

.kooperation-left {
	background: #002841;
	padding: 7rem 0;
}

.kooperation-left img {
	max-width: 300px;
	    margin-top: 3rem;
}


.kooperation-right {
	min-height: 60vh;
	background: url('../img/kooperation-wald.jpg');
	background-size: cover;
}


@media (min-width: 768px) {

	.text-75{
		max-width: 75%;
	}
    
     }


/****** FAQ ******/

#faq {
	padding: 6em 0;
	background-size: ;
}

#faq h2 {
	margin-bottom: 2rem;
}


#faq .question {
	margin-bottom: 0;
	text-transform: uppercase;
}


/****** TFABL ******/

.tfabl-left {
	min-height: 60vh;
	background: url('../img/tfabl-hero.jpg')	center;
	background-size: cover;
}


.tfabl-right {
	background: #002841;
	padding: 7rem 0;
}

#tfabl a {
	color: white;
	border-bottom: 1px solid white;

}

.tfabl-right img{
	max-width: 400px;
	margin-top: 3rem;
}

#tfabl a:hover, #tfabl a:active {
	color: white;
	border-bottom: none;
	text-decoration: none;

}

#tfabl h2 {
	text-transform: uppercase;
}

#tfabl h2, #tfabl p{
	color: white;
}


/****** KONTAKT ******/

#kontakt{
	background-color: #00dcb0;
	padding: 6rem 0 4rem;
	color: #002841;
}

#kontakt img {
	max-width: 200px;
	margin-bottom: 3em;
}

#kontakt h2{
	text-transform: uppercase;
	margin-bottom: 3rem;
}

#kontakt p{
	margin-bottom: 2rem;
}

@media (min-width: 768px) {

	#kontakt h2{
	font-size: 2.3em;
	}

	#kontakt p{
	font-size: 20px;
	}
    
}



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

footer {
	padding: 6em 0;
}

footer a {
    color: #002841;
    text-decoration: none;
    background-color: transparent;
}

footer a:hover, footer a:active {
    color: #002841;
    text-decoration: underline;
    background-color: transparent;
}

footer h2 {
	margin-bottom: 2em;
}

#wrapper-footer-full, #wrapper-footer {
	background-color: #00dcb0;
	color: #002841;
	font-weight: 200;
}

.social-icons i {
    margin-right: 0.5em;
}

.logo-footer {
	margin-bottom: 2rem;
	max-width: 200px;
}

/****** COOKIE BAR ******/

button#catapultCookie {

    padding: 9px 16px 7px;
    line-height: 1.5rem;
    border-radius: 10px;
}

#catapult-cookie-bar a {
    text-decoration: underline;
}


#catapult-cookie-bar {
	text-align: center;
}

#catapult-cookie-bar {
	right: auto!important;
	left: 50%;
	transform: translateX(-50%);
	}

@media (min-width: 768px) {
	
	#catapult-cookie-bar {
	right: 20px!important;
	left: auto!important;
	transform: none;
	}

}



/*


@media (orientation: landscape) {
  .site {
    display:none;
  }
}

*/