/* ==========================================================================
   Shay Rahman
   ========================================================================== */
html{overflow-x:hidden}

body {
	width: 100vw;
	margin: 0 auto;
	background-color: #000000;
}

.contentFx {
	/*height: 425vh;*/
	width: 100vw;
	margin: 0 auto;
	
}


.logoFlowWrp a { position: absolute;  z-index: 2;}
.logoFlowWrp img {  width: 200px; padding: 20px ;}

.intro {
	/*height: 100vh;
	width: 100vw;*/
	position: relative;
  	height: 640px;
	background-image:url("../img/bgBnnr1.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top center;
	background-attachment: fixed;
	overflow: hidden;
	text-align: center;
}

.titleBnr {
	font-size: 20px;
	position: absolute;
	text-align: center;
	top: -20%;
	padding-top: 350px;
	width: 100%;
	z-index: 2;
	font-family: 'Cabin', sans-serif;
}

.titleBnr p { font-family: 'Cabin', sans-serif; font-size: 20px; font-weight: bold; margin:0; letter-spacing: 3px; color: #ffffff;}
.titleBnr h1 { font-family: 'Cabin', sans-serif; font-size: 180px; margin: 0; line-height: 190px; font-weight: 700; color: #ffffff;}
.colFlow { color: #f0b24e !important;}

.bnnr { margin: 0; padding: 0; }

.imgStation { 
	position: absolute;
	z-index: 4;
	height: 100%;
}
.imgStation2, .imgStation3 { 
	position: absolute;
	z-index: 3;
	height: 100%;
}
.imgStation4 { 
	position: absolute;
	z-index: 1;
	height: 100%;
}

.stationBg1 { width: 100vw; background-position: center; background-size: cover; position: absolute; bottom: 0; }
.stationBg2 { width: 100vw; background-position: center; background-size: cover; position: absolute; bottom: 20px; }
.stationBg3 { width: 100vw; background-position: center; background-size: cover; position: absolute; bottom: 10px; }
.stationBg4 { width: 100vw; background-position: center; background-size: cover; position: absolute; bottom: 10px; }

.lineTitle { width: 100px; padding: 2px; background-color: #9bb746; margin: 0 auto;   }

.btnWrpClick { 
	display: block; font-family: 'Cabin', sans-serif;
	color: #ffffff; border: 1px solid #ffffff;
	width: 180px; margin: 20px auto; font-size: 12px; }

.btnWrpClick a{
	display: block;
	text-decoration: none;
	padding: 10px 0; color: #ffffff;
	transition: .5s ease;
}

.btnWrpClick a:hover { background-color: #9bb746;}

/*---- 2nd Wrp----*/
.compFx { padding: 150px 0; position: relative; z-index: 1;}

.titleCompFx {
	width: 70vw;
	margin: 0 auto;
	padding: 20vh 0;
	text-align: center;
	color: #ffffff;
	font-family: 'Cabin', sans-serif;
	letter-spacing: 3px;
}

.titleCompFx h1 { font-size: 22px; font-weight: 700;}
.titleCompFx p { font-size: 16px; font-weight: 400; line-height: 30px }

.imgCompFx {
		position:absolute; z-index: -1; top: 50px; 
		right: 0;  background-size: cover; background-position: center; 
		width: 100vw;}

.imgCompFx2 {
		position:absolute; z-index: -1; top: -20px; 
		right: 0;  background-size: cover; background-position: center; 
		width: 100vw; }

.oilFxBg1 { width: 100vw;}
.oilFxBg2 { width: 100vw; opacity: 0.5;}


.tColorOrg { color: #f0b24e; font-weight: bold;}

.wrpTop {position: relative; margin-bottom: 500px; background-color: #2e2e2e; overflow: hidden;}

/*---- 3rd Wrp----*/
.productWrp { padding: 10vh 0; width: 70vw; margin: 0 auto; background-color: #2e2e2e;}



/*---- 4th Wrp----*/
.ourServicesWrp { padding: 150px 0;}

.gridserv { 
	display: grid; 
	grid-template-columns: repeat(auto-fit, minmax(400px,1fr));
	background-color: #2e2e2e;
}
.box1serv { display: block; background: url("../img/thumb1img.jpg") center center; height: 320px; background-size: cover; }
.box2serv { display: block; background: url("../img/thumb2img.jpg") center center; height: 320px; background-size: cover; }
.box3serv { display: block; background: url("../img/thumb3img.jpg") center center; height: 320px; background-size: cover; }
.box4serv { display: block; background: url("../img/thumb4img.jpg") center center; height: 320px; background-size: cover; }
.box5serv { display: block; background: url("../img/thumb5img.jpg") center center; height: 320px; background-size: cover; }
.box6serv { display: block; background: url("../img/thumb6img.jpg") center center; height: 320px; background-size: cover; }

.thumbWrp { display: block; padding: 0; text-decoration: none;}
.thumbWrp h3 { 
	font-family: 'Cabin', sans-serif; font-size: 26px; 
	text-align: center; color: #ffffff; padding: 18vh 0; margin: auto;
	letter-spacing: 3px;}

.thumbWrp:hover { background: rgb(23, 23, 23, 0.9); height: 100%; transition: .5s ease;}

/*.thumbWrp { height: 200px;}*/


/*---- 5th Wrp----*/
.partnersWrp { width: 70vw; margin: 0 auto;}

.gridserv2 { 
	display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
	margin: 60px 0;
}
.box1serv2 img { width: 200px;}

.gridserv4 { 
	display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
	margin: 10px 0;
}
.box1serv4 img { width: 200px;}



/*---- 6th Wrp----*/
.footerWrp { 
	padding: 20vh 0; background-color: #000000; 
	background: url("../img/footbg.jpg") center top no-repeat; 
	background-size: cover; position: fixed; z-index: -1;
	bottom: 0; width: 100%;
}

.logoFoot { display: block; padding: 40px 0;}
.logoFoot img { width: 180px; }
.logoFoot h4 { font-size: 12px; margin: 0px; color: #9bb746;}
.footTextWrp { width: 70vw; margin: 0 auto; text-align: center; font-family: 'Cabin', sans-serif; color: #ffffff;}
.footTextWrp p { font-size: 12px;}
.footTextWrp span { font-size: 10px;}
.footTextWrp span a { color: #ffffff; text-decoration: none;}

.tFootMail { font-size: 20px; color: #ffffff; text-decoration: none; font-family:sans-serif;}
.tFootMail:hover, .footTextWrp span a:hover, .infoMenuRight h3 a:hover { color: #9bb746; transition: .5s ease;}


/*--- Btn up ----*/
.boxGoUp { display:block; text-align:center; position:fixed; z-index:30; right:0; bottom: 20px; margin-top:7px; }
.boxGoUp a { padding:12px 15px; background-color:#000000; color:#ffffff; font-size:21px; font-weight:bold;}
.boxGoUp a:hover, .boxGoUp a:focus { background-color:#6f6f6f; color:#ffffff; transition: .5s ease;}

/*--- Menu ----*/
.menuRight {
	font-size:30px; color: #ffffff;
	cursor:pointer; position: fixed;
	z-index: 30; top: 26px; right: 15px;
	display: block; background-color: #000000;
	padding: 10px 12px 3px 12px;
}

.infoMenuRight { position: absolute; right: 74px; top: 24px; z-index: 30;}
.infoMenuRight h3 { color: #ffffff; font-family: sans-serif;	}
.infoMenuRight h3 a { text-decoration: none; color: #ffffff;}

.overlay {
  height: 0%;
  width: 100%;
  position: fixed;
  z-index: 31;
  top: 0;
  left: 0;
  background-color: rgb(0,0,0);
  overflow-y: hidden;
  transition: 0.5s;
}

.overlay-content {
  position: relative;
  top: 25%;	
  width: 100%;
  text-align: center;
  margin-top: 30px;
  font-family: 'Cabin', sans-serif;	
  overflow-x:hidden; 
}

.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 40px;
  letter-spacing: 3px;	
  color: #9bb746;
  display: block;	
  transition: 0.3s;	
}

.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}

.overlay a.currentS { color: #f0b24e;}

.overlay .closebtn {
  position: absolute;
  top: 25px;
  right: 15px;
  font-weight: 200;	
  font-size: 30px;
}

/*---- Subpage----*/
.bnnrSub1 { 
	background: url("../img/bgBnnrSub1.jpg") top center; 
	background-size: cover; height: 300px; width: 100vw;
	position: relative; background-attachment: fixed;}

.bnnrSub2 { 
	background: url("../img/bgBnnrSub2.jpg") top center; 
	background-size: cover; height: 300px; width: 100vw;
	position: relative; background-attachment: fixed;}

.bnnrSub3 { 
	background: url("../img/bgBnnrSub3.jpg") top center; 
	background-size: cover; height: 300px; width: 100vw;
	position: relative; background-attachment: fixed;}

.bnnrSub4 { 
	background: url("../img/bgBnnrSub4.jpg") top center; 
	background-size: cover; height: 300px; width: 100vw;
	position: relative; background-attachment: fixed;}

.bnnrSub5 { 
	background: url("../img/bgBnnrSub5.jpg") top center; 
	background-size: cover; height: 300px; width: 100vw;
	position: relative; background-attachment: fixed;}

.bnnrSub6 { 
	background: url("../img/bgBnnrSub6.jpg") top center; 
	background-size: cover; height: 300px; width: 100vw;
	position: relative; background-attachment: fixed;}

.bnnrSub7 { 
	background: url("../img/bgBnnrSub7.jpg") top center; 
	background-size: cover; height: 300px; width: 100vw;
	position: relative; background-attachment: fixed;}

.bnnrSub8 { 
	background: url("../img/bgBnnrSub8.jpg") top center; 
	background-size: cover; height: 300px; width: 100vw;
	position: relative; background-attachment: fixed;}

.bnnrSub9 { 
	background: url("../img/bgBnnrSub9.jpg") top center; 
	background-size: cover; height: 300px; width: 100vw;
	position: relative; background-attachment: fixed;}

.bnnrSub10 { 
	background: url("../img/bgBnnrSub10.jpg") top center; 
	background-size: cover; height: 300px; width: 100vw;
	position: relative; background-attachment: fixed;}

.compFx2 {  position: relative; z-index: 1;}

.titleCompFx2 {
	width: 70vw;
	margin: 0 auto;
	padding: 20vh 0;
	text-align: center;
	color: #ffffff;
	font-family: 'Cabin', sans-serif;
	letter-spacing: 3px;
}

.titleCompFx2 h1 { font-size: 22px; font-weight: 700;}
.titleCompFx2 h3 { font-size: 18px; font-weight: 700; color: #9bb746;}
.titleCompFx2 p { font-size: 16px; font-weight: 400; line-height: 30px }

.wrpContSub{ width: 70vw; margin: 0 auto;}
.gridserv3 { 
	display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
	margin: 60px 0;
}
.box1Cont { width: 100%; text-align: left}
.box1Cont h2 { font-size: 18px;}
.box1Cont p { font-size: 12px;}
.box1Cont a { font-size: 14px;}
.box1Cont span { font-size: 10px;}

.linkSubWrp { font-family: 'Cabin', sans-serif; color: #ffffff; width: 70vw; margin: 0 auto; padding: 20px 0; font-size: 14px; color: #9bb746;}
.linkSubWrp a { text-decoration: none; color: #ffffff; padding: 0 10px;}
.linkSubWrp a:hover { color: #9bb746; transition: .5s ease;}

.pddWrp { padding: 30px 20px 0 30px;}
.pddWrp2 { margin-bottom: 50px;}

.linkSubClick { text-decoration: none; color: #ffffff;}
.linkSubClick:hover { color: #9bb746; transition: .5s ease;}

.videoWrp { width: 560px; height: 315px; margin: 0 auto;}