﻿/* NAVIGATION */

nav {
	float:right;
	margin-top:10%;
}



.flags a {
color:#ffffff;
text-decoration:none;
}

.flags {
position:absolute;
top:20px;
width:auto;
color:#ffffff;
font-size:12px;
display:block;
right: 1%;
text-align:center;
}



.navigation {
	width: 1025px;
	margin: auto;
}

 
nav ul li {
	list-style:none;
	background:#ffffff;
	color:#495157;
	font-size:20px;
	font-weight:300;
	height: 65px;
	width:580px;
	margin-bottom:5px;
}
 
 
i.fa {
    font-size: 45px;
    text-align: center;
    top:10px;
    position:relative;
    width: 70px;
   }
   
i.fa-star {
    font-size: 35px;
    top:8px;
   }
   
i.fa-search, i.fa-cog {
    font-size: 30px;
    top:5px;
   }
   
   
   nav ul li span {
	padding: 19px;
	border-left: 1px solid #495157;
	vertical-align:middle;
	display: inline-block;
}

	nav ul li a {
	color:#495157;
	text-decoration:none;
	display:block;
}

	nav ul li a:hover {
	color:#db0030;
	transition: ease-in 0.5s; 
}



/* GENERAL */

html {
height: 100%;
}


body {
    font-family: 'Open Sans', sans-serif;
	color:#495157;
	border-top:6px solid #db0030;
	padding:0;
	margin:0;
	height: 100%;
	
}

.clearfix {
	clear:both;
}


header {
	background-image:url('../img/sicherheitsventile-hintergrund.jpg');
	background-repeat:no-repeat;
	background-size: auto;
}



/* CONTENT / SECTIONS */


#product {
	float:left;
	margin-top:45px;

}


section, .container {
	text-align:center;
	font-size:15px;
	line-height:23px;
	width:60%;
	margin:auto;
}


h1, h2, h4 {
	color:#db0030;
	font-size:33px;
	font-weight:400;
	padding:0px;
	margin-bottom:30px;
	line-height:33px !important;

}

h5 {
color:#495157;
	font-size:28px;
	font-weight:400;
	padding:0px;
	margin: 15px 0px;
	line-height:33px !important;

}

h4 {
	color:#495157;
	margin: 60px 0 45px 0px;
	}


 
h3 {
	color:#db0030;
	font-size:25px;
	font-weight:400;
	padding:0px;
	margin-bottom:10px;
}


a.more-link {
	line-height:40px;
	color:#495157 ;
}



strong {
	font-weight:600;
}

.column-4 {
	margin-top:40px;
}




section ul li {
	padding:0px;
	margin:0 0 5px 0;
	list-style:none;
}


section ul li:before {
font-size: 20px;
margin-right: 5px;
  font-family: 'FontAwesome';
	color:#db0030;
  content: "\f105";
  vertical-align: top;
	}
	
section ul li p {
display: inline-block;
width: 74%;
padding: 0px;
margin: 0px;
}




.img-container {
    float: left;
    width: 25%;
}

.abbinder {
	margin-top:45px;
		background-image:url('../img/hintergrund-abbinder.jpg');
	background-repeat:no-repeat;
	background-size: cover;
	color:#ffffff;
	padding:5px 0;
	width:100%;
}


.abbinder h2 {
	color:#ffffff;
}

.column-5 {
    margin: 50px auto;
    width: 63%;
  }
  
  
  .column-2 {
    margin: 50px auto;
    width: 100%;
  }
  
  
  
 .column-content-3 {
	text-align:left !important;
	float:left;
	margin-right:20px;
	width:31%;
}



 .column-content-3 img {
	width:100%;
}
  
.column-content-5 {
float: left;
max-width: 24%;
margin-right: 35px;
text-align: left;
}

.column-content-2 img {
	float:left;
	margin-right:15px;
}



.column-content-2 {
float: left;
text-align: left;
width: 50%;
}



section.grey {
	background:#edf2f6;
	width:100%;
	padding:8px 0px;
	margin:50px 0px;
}


.full-img {
	margin:20px auto;
}


.btn {
	padding:15px 40px;
	color:#495157;
	float:right;
	background:#ffffff;
	font-size: 18px;
	font-weight: 400;
	margin-top: 30px;
	}
	
	
.btn a:hover {
	color:#db0030;
	transition: ease-in 0.5s; 
	}

	
	.btn a {
	color:#495157;
	text-decoration:none;
}
	
.call-to-action .content {
	float:left;
	text-align:left !important;
	margin: 25px 0;
}

.call-to-action .container {

}


.call-to-action .content h2 {
margin: 0px 0px 20px 0px;
}



/* TO TOP BUTTON */

.fa-angle-up {
	font-size:35px !important;
	color:#ffffff !important;
	top: 5px !important;
	width: 50px !important;
	position: absolute  !important;
}

.fa-angle-up a {
	color:#ffffff !important;
}


#scroll-to-top {
	background:#495157;
    position:fixed;
    right:15px;
    bottom:15px;
    cursor:pointer;
    width:50px;
    display:none;
    height:50px;
    -webkit-border-radius:60px;
    -moz-border-radius:60px;
    border-radius:60px
}


#scroll-to-top:hover {
    background-color:#db0030;
	transition: ease-in 0.5s; 
    
}


   
/* FOOTER */

footer {
	margin-top:50px;
	padding:15px 0px 10px 0;
	background:#e8edf1;
	font-size:12px;
	line-height:16px;
}

footer a {
color:#495157;
text-decoration:none;
	}



#footer-container {
	width:430px;
	margin:auto;
}

#logo {
	width:125px;
	float:left;
}

#footer-content {
	float:right;
	margin-top:6px;
}


/* RESPONSIVE DESIGN */


@media (max-width: 1630px) and (min-width:1025px) {
section ul li p {
    display: inline-block;
    width: 65%;
}

section, .container {
	width:85%;
}

.column-5 {
    width: 85%;
}

.column-content-5 {
    max-width: 20%;
}

}




@media (max-width: 1024px) {


.flags {
display:none;
}


header {
	background:none;
	margin-bottom: 30px;
}


#product img {
	width:95%;
	margin:auto;
}


nav {
	float:none;
	margin-top:7%;
	padding-bottom:20px;
	border-bottom:1px dotted #495157;
}


.navigation {
	width: 90%;
}

ul {
	padding:0px;
}



i.fa {
font-size: 35px;
top: 8px;
width: 45px;
}


 
nav ul li {
	font-size:18px;
	height: 55px;
	width:100%;
	border:1px solid #495157;
}


.zweizeilig {
	height: 74px !important;
}


nav ul li span {
	padding:18px 0px 16px 12px;
	line-height: 20px;
	width: 79%;
	}

#product {
	float:none;
	margin-top:25px;
}


i.fa-star {
    font-size: 30px;
    top:6px;
   }
   
i.fa-search, i.fa-cog {
    font-size: 25px;
    top:4px;
   }
   
   
h1, h2, h4, h5 {
	font-size:27px;
	line-height:33px !important;
	margin-bottom:20px;
	-ms-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}  


h4 {
	margin: 35px 0 45px 0px;
} 

.call-to-action .content {
	text-align:center !important;
}

.call-to-action .btn {
	margin-top: 0px;
	margin-bottom:35px;
}


   
   
section, .container, .column-5 {
	width:90%;
}


.column-4 {
    margin-top: 5px;
}

.img-container {
    float: left;
    width: 50%;
    margin-bottom:10px;
}

.description {
	line-height: 15px;
	font-size: 12px;
}


.abbinder {
    margin-top: 35px;
    background-image: none;
    background-color:#db0030;

}


.column-2 {
    margin: 30px auto;
    width: 100%;
}



.column-content-5 {
    float: none;
    width: 100%;
    max-width:100%;
    margin:auto !important;
padding-bottom: 20px;
    margin-right:0px;
    text-align:center;
}


.column-content-2 {
    float: none;
    width: 100%;
    margin-bottom:10px;
}

.column-content-2 .description {
    font-size: 15px !important;
    line-height: 23px !important;
}

.column-content-2 ul {
	margin:15px 0;
}

.column-content-2 img {
	float: none;
margin: auto;
text-align: center;
width: auto;
display: block;
}


.column-content-5:last-of-type {
padding-bottom:0px;
}



.column-content-3 {
width:90%;
margin-right:0px;
margin:auto;
float:none;
margin-bottom:40px;	
}


.full-img {
	width:100%;
}

footer {
    margin-top: 30px;
    padding: 15px;
}

#footer-content {
    float: none;
    margin-top: 6px;
    text-align: center;
    width: 100%;
    font-size: 13px;
    line-height: 20px;
    }
    
    #logo {
    width: 125px;
    margin:auto;
    float:none;
}

#footer-container {
	width:100%;
	margin:auto;
}
    
    }
