/* Global Petroline
Author: Dev
Website: https://card.devbook.net
*/
@font-face {
    font-family: 'anderson_groteskregular';
    src: url('../fonts/andersongrotesk-webfont.woff2') format('woff2'),
         url('../fonts/andersongrotesk-webfont.woff') format('woff');
         url('../fonts/AndersonGrotesk.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
}
@font-face {
    font-family: 'anderson_groteskbold';
    src: url('../fonts/andersongrotesk-bold-webfont.woff2') format('woff2'),
         url('../fonts/andersongrotesk-bold-webfont.woff') format('woff');
         url('../fonts/AndersonGrotesk-Bold.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
}
body{
	background: #202020;
	color: #fff;
	font-size: 14px; 
	font-family: 'anderson_groteskregular', sans-serif;
	font-weight:400;
	position: relative;
}

/* General  */
a, a:hover, a:focus{color:#fff; text-decoration: none;}
a:hover{}
a:focus{outline:none}
h1, h2, h3, h4, h5, h6{
	font-family: 'anderson_groteskbold', sans-serif;
	margin:0;
	padding:0;
}
h1{font-size:18px}
h2{font-size:18px}
h3{font-size:18px}
h4{font-size:18px}
h5{font-size:18px}
h6{font-size:18px}
.fsmall {font-size: 12px}
.fmedium {font-size: 14px}
.fbig {font-size: 16px}
.space {letter-spacing: 2px}
/* color */ 
.bg-grey {background-color: #434343}
.bg-black {background-color: #111112}
.bg-green {background-color: #00a66d}
.bg-blue {background-color: #00529b}
.grey {color: #434343}
.black {color: #111112}
.green {color: #00a66d}
.blue {color: #00529b}
.fontbasic {font-family: 'anderson_groteskregular';}
.fontbold {font-family: 'anderson_groteskbold';}
.loader {
	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:100%;
	z-index:9999;
	opacity: 0.7;
	background:#000 url(../images/loader.gif) 50% 50% no-repeat;
}
.decorated{
     overflow: hidden;
     text-align: center;
 }
.decorated > span{
    position: relative;
    display: inline-block;
}
.decorated > span:before, .decorated > span:after{
    content: '';
    position: absolute;
    top: 50%;
    border-bottom: 1px solid;
    width: 576px; /* half of limiter*/
    margin: 0 20px;
    opacity: 0.6;
}
.decorated > span:before{
    right: 100%;
}
.decorated > span:after{
    left: 100%;
}
.small-grid {
	max-width: 80%;
	margin: 0 auto;	
}

/* Header  */
.innerwrap {
	max-width: 1152px;
	margin: 0 auto;
	padding: 0 18px;
}
.topmenu {
	padding-top: 40px;
	padding-bottom: 40px;
	transition: all linear .1s;
	background:#FFF url(../images/bg.jpg);
	background-position: top center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.scrolling {
	padding-top: 18px;
	padding-bottom: 14px;
	transition: all linear .1s;
}
.petroline-logo img {
	width: 340px;
	transition: all linear .1s;
}
.resize img {
	width: 250px;
	transition: all linear .1s;
}
#header{
	background:#000 url(../images/3.jpg);
	background-position: top center;
    background-repeat: no-repeat;
    /* background-attachment: fixed !important; */
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.header-overlay{
	background:rgba(0, 0, 0, 0.5);
	padding:30px 0;	
	height: 100%;	
}
.brand {padding-bottom: 30px;}
.brand .ammolub img {max-height: 35px;}
.brand .flos img {max-height: 45px;}
.brand .hoesch img {max-height: 45px;}
.brand .rascho img {max-height: 30px;} 
.hexagon { 
  height: 80vh;
}		
.main-head img {
	max-height: 270px;
}

/* Products */
#products {
	padding: 58px 0 80px 0;
}
#products .ammolub img {max-height: 30px;}
#products .flos img {max-height: 60px;}
#products .hoesch img {max-height: 45px;}
#products .rascho img {max-height: 30px;} 
	
/* About  */	
#about {
	padding: 58px 0 80px 0;
	background:#FFF url(../images/bg.jpg);
	background-position: top center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.petroline {
	max-width: 800px;
	margin: 0 auto;
	text-align: justify;
}

/* Contact  */
#contact{
	padding: 40px 0;
}	
#contact-area{
	max-width: 640px;
	margin: 0 auto;
}
input { border: 1px solid #fff !important; -webkit-box-shadow: none !important;
box-shadow: none !important; }
#contact-form .form-group{
	margin:0 0 20px;
}
#contact-form .form-control{
	font-size:14px;
	font-weight:400;
	-webkit-border-radius:0px;
	-moz-border-radius:0px;
	border-radius:0px;
}
#contact-form .form-control:focus{
	border-color:#fff;
}
#contact-form input.form-control{
	height:40px;
	line-height:40px !important;
	padding:3px 20px 0;
}
.btn-petro {
	background: #d1d1d1;
	color: #111;
	font-size: 16px;
	padding: 8px 24px;
	-webkit-border-radius:0px;
	-moz-border-radius:0px;
	border-radius:0px;
}

/* Footer  */
#footer{
	padding: 42px 0;
}
#footer p {
	margin-bottom:0px!important; 
	padding: 0; 
	line-height: 18px;
}

#contact h3, .address, #contact-form .form-group{
	text-align:center;
}
#contact-area{
	padding-bottom:20px;
}

/* Start media screen */
@media screen and (max-width: 1023px) {
	
}
@media (max-width: 767px) {
	.small-grid {
		max-width: 100%;	
	}
	.hexagon { 
  		min-height: 600px;
	}	
	.topmenu {
		padding-top: 24px;
		padding-bottom: 24px;
	}
	.scrolling {
		padding-top: 12px;
		padding-bottom: 12px;
	}
	.petroline-logo img {
		width: 200px;
		margin-bottom: 6px;
		margin-top: 2px;
	}
	.resize img {
		width: 180px;
	} 
	.product-list::-webkit-scrollbar {
  		width: 8px;
	}
	.product-list {
  		scrollbar-width: auto;
  		scrollbar-color: #666;
	}
	.product-list::-webkit-scrollbar-track {
  		background: #666;
	}
	.product-list::-webkit-scrollbar-thumb {
  		background-color: #a08b34;
  		border-radius: 6px;
  		border: 2px solid #444;
	}
}
@media screen and (max-width: 380px) {
	.brand {padding-bottom: 20px;}
	.brand .ammolub img {max-height: 30px;}
	.brand .flos img {max-height: 40px;}
	.brand .hoesch img {max-height: 40px;}
	.brand .rascho img {max-height: 25px;} 
	.main-head img {max-height: 180px;}
}