/* =============================================================================
  	Editor: Shay Rahman
	Website: Duopax
   ========================================================================== */  

/*@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,700,700i');*/

html,body{
	width:100%;
	height:100%;
	background-color: #09093c !important;
}


/* =============================================================================
  	Global styles
   ========================================================================== */

::selection { background:#ed5900; color:#ffffff; }
::-moz-selection { background:#ed5900; color:#ffffff;}
::-webkit-selection {background:#ed5900; color:#ffffff;}

/* =============================================================================
  	Font
   ========================================================================== */

/*@font-face {
    font-family: 'cocogooseregular';
    src: url('../font/cocogoose_pro-trial.woff2') format('woff2'),
         url('../font/cocogoose_pro-trial.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

.fontTitle { font-family: 'cocogooseregular'; }

font-family: 'Oswald', sans-serif;*/


.pddTop1 { padding-top: 100px;}
.pddBtm1 { padding-bottom: 100px;}


/* =============================================================================
  	Navbar
   ========================================================================== */


.fixLogo { width: 200px;}

.navbar-nav .nav-item .nav-link{
	padding: 30px 30px !important;
	font-size: 20px;
    font-weight: 200;
    letter-spacing: 1px;
    color: #ffffff !important;
	font-family: 'Oswald', sans-serif;
}
.navbar-nav .nav-item .nav-link:hover, .navbar-dark .navbar-nav .active > .nav-link { color:#5ba8dc !important; }
.navbar-dark .navbar-toggler { border-color: #fff !important; color: #fff !important;}

.fixDrop { border-radius: 0 !important; padding: 0 !important;}
.fixDrop a {  
	border-bottom: 1px solid #fdcd31 !important;
	padding: 8px  18px !important;
}
.fixDrop a:hover {
	color: #fdcd31 !important; background-color: #1a1560;
	transition: background 0.45s, color 0.45s, border 0.45s, box-shadow 0.45s;
}
	
 .shrink {
    padding-top: 0;
    padding-bottom: 0;
    background-color: #1a1560; transition: background 0.45s, color 0.45s, border 0.45s, box-shadow 0.45s;
}

.btnNorm { font-family: 'Oswald', sans-serif;
	display: block; background-color: #fdcd31; padding: 10px 20px !important;
	border-radius: 0 !important; color: #000000 !important; font-weight: bold !important;
}
.btnNorm:hover { 
	transition: background 0.45s, color 0.45s, border 0.45s, box-shadow 0.45s;
	background-color: #fd9b31;
}

/* =============================================================================
  	Slider
   ========================================================================== */
.carousel-indicators { bottom:20px !important;}
.carousel-indicators.sldCircle li { height: 10px; width: 10px; border-radius: 13px; background-color: #ffffff;}
.carousel-indicators.sldCircle .active { background-color: #5ba8dc ;}

.fixIndi { bottom:0px !important;}
.fixTopArrow { margin-top: 170% !important;}

.carousel-caption { bottom:65px !important; top:28% !important; text-align: left !important; }
.carousel-caption h2 { 
	font-size: 80px; text-align: left; width: 300px;
	font-family: 'Oswald', sans-serif; font-weight: normal; /*word-spacing: -20px;*/
	line-height: 80px;  text-shadow: 0px 0px 3px #000000; 
	opacity: 0;
  	-webkit-transition: opacity .5s .25s ease-out;
  	transition: opacity .5s .25s ease-out;
}

.carousel-caption h2.is-visible { opacity: 1;}

.carousel-caption a:hover, .carousel-caption a:active, .carousel-caption a:focus,
.sldrMain a:hover, .sldrMain a:active, .sldrMain a:focus
{
	color: #ffffff; text-decoration: none; 
	transition: background 0.45s, color 0.45s, border 0.45s, box-shadow 0.45s;
	cursor: pointer;
}
.carousel-control .arrowLeft, .carousel-control .arrowRight 
	{ position:absolute; top:50%; z-index:5; display:inline-block;}

.sldrMain p { text-align: center;}
.sldrMain a {
	color: #ffffff; cursor:pointer;
	font-size: 14px; width: 140px; padding: 15px 0; margin: 15px auto 0 auto;
	text-align: center; text-decoration: underline; text-shadow: none !important; font-weight: 700;
}

.carousel, .carousel-inner, .carousel-inner .carousel-item { height: 650px;}
.carousel-item.sldrMain:nth-child(1) { background:url("../img/banner1.jpg") no-repeat center; background-size: cover;}
.carousel-item.sldrMain:nth-child(2) { background:url("../img/banner2.jpg") no-repeat center; background-size: cover;}
.carousel-item.sldrMain:nth-child(3) { background:url("../img/banner3.jpg") no-repeat center; background-size: cover;}

/* =============================================================================
  	About Us
   ========================================================================== */

.fontTitle { font-family: 'Oswald', sans-serif; }

.wrpAbout { 
	padding: 200px 0 400px 0; background: url("../img/bgAbout.jpg") bottom center #09093c;
	background-size: cover; 
}

.wrpAbout h1, .wrpAboutSub h1, .wrpVMision h1 { font-size: 50px; text-align: left; color: #5ba8dc; font-weight: 300; font-family: 'Oswald', sans-serif; 
	opacity: 0;
	-webkit-transition: opacity .5s .25s ease-out;
  	transition: opacity .5s .25s ease-out; }

.wrpAbout p, .wrpAboutSub p, .wrpVMision p { 
	color: #fff; font-size: 16px; 
	font-family: "Helvetica Neue", "sans-serif";
	font-weight: 300; text-align: justify;
	opacity: 0;
	-webkit-transition: opacity .5s .45s ease-out;
  	transition: opacity .5s .45s ease-out; 
}

.wrpAbout a {
	color: #ffffff; cursor:pointer;
	font-size: 14px; width: 140px; padding: 15px 0;
	margin: 15px auto 0 auto;
	text-align: left; text-decoration: underline;
	text-shadow: none !important; font-weight: 700;
	opacity: 0;
	-webkit-transition: opacity .5s .55s ease-out;
  	transition: opacity .5s .55s ease-out;
}

.wrpAbout a:hover
{
	color: #ffffff; text-decoration: none; 
	transition: background 0.45s, color 0.45s, border 0.45s, box-shadow 0.45s;
	cursor: pointer;
}

.wrpAbout h1.is-visible, .wrpAbout p.is-visible, .wrpAbout a.is-visible  { opacity: 1;}
.wrpAboutSub h1.is-visible, .wrpAboutSub p.is-visible  { opacity: 1;}
.wrpVMision h1.is-visible,  .wrpVMision p.is-visible { opacity: 1;}
.wrpAboutSub.is-visible { opacity: 1;}

.wrpAboutSub { 
	padding: 10px 0 200px 0; background: url("../img/bgAbout.jpg") bottom center;
	background-size: cover; opacity: 0;
	-webkit-transition: opacity .5s .55s ease-out;
  	transition: opacity .5s .55s ease-out;
}

.wrpVMision { padding: 50px 0 100px 0;}


/* =============================================================================
  	Services
   ========================================================================== */

.wrpServices { 
	padding: 150px 0 150px 0;
	background-size: cover; background-color: #09093c;
}

.wrpServices h1 {font-size: 50px; text-align: left; color: #5ba8dc; font-weight: 300; font-family: 'Oswald', sans-serif;
		opacity: 0;
	-webkit-transition: opacity .5s .25s ease-out;
  	transition: opacity .5s .25s ease-out;
}

.wrpServices h1.is-visible  { opacity: 1;}


/*4links Box*/
.wrpImgBox { 
	overflow: hidden; margin: 0; position: relative; opacity: 0;
	-webkit-transition: opacity .5s .45s ease-out;
  	transition: opacity .5s .45s ease-out;
}
.wrpImgBox.is-visible  { opacity: 1;}

.wrpImgBox figure {
	position: relative;
	z-index: 1;
	/*display: inline-block;*/
	overflow: hidden;
	margin: -0.135em;
	text-align: center;
	cursor: pointer; 
	background-color:#c3e7ff;
	height: 360px;
}
.wrpImgBox figure img { 
	position: relative; display: block; min-height: 100%;
}
.wrpImgBox figure figcaption {
	padding: 2px;
	color: #ffffff;
	/*text-shadow:2px 2px 4px #494747;*/
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.wrpImgBox figure figcaption, .wrpImgBox figure a
{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.wrpImgBox figure a { z-index: 1000; white-space: nowrap; opacity: 0;}
.wrpImgBox figure p { font-size: 26px; color: #0a0043; font-weight: 500;}

figure.effOv img {
	-webkit-transition: opacity 0.35s;
	-webkit-transform: 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: scale(1.12);
	transform: scale(1.12);
}

figure.effOv:hover img { opacity: 0.1; -webkit-transform: scale(1); transform: scale(1);}
figure.effOv figcaption { padding: 110px 30px 20px 30px;}
figure.effOv figcaption::before {
	position: absolute;
	top: 30px;
	right: 30px;
	bottom: 30px;
	left: 30px; 
	/*border: 2px solid #112347;*/
	content: '';
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}

figure.effOv figcaption::before, figure.effOv p { opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}

figure.effOv h2 { padding: 0 0 20px 0; font-weight:300; font-size:30px; font-family: 'Oswald', sans-serif;  }
figure.effOv p { margin: 0 auto; max-width: 200px; -webkit-transform: scale(1.5); transform: scale(1.5);}
figure.effOv:hover figcaption::before, 
figure.effOv:hover p { 
	opacity: 1; -webkit-transform: scale(1); transform: scale(1);}

.boxViewMore { 
	font-family: 'Oswald', sans-serif; 
	font-weight: 300;
}


.thumbFix { width: 100px; height: 100px; margin: 8px auto 10px auto;}

/*--- Sub Services ----*/

.wrpServNav { 
	padding: 10px 0 200px 0; background: url("../img/bgServ-Nav.jpg") bottom center;
	background-size: cover; opacity: 0;
	-webkit-transition: opacity .5s .55s ease-out;
  	transition: opacity .5s .55s ease-out;
}

.wrpServComm { 
	padding: 10px 0 200px 0; background: url("../img/bgServ-Com.jpg") bottom center;
	background-size: cover; opacity: 0;
	-webkit-transition: opacity .5s .55s ease-out;
  	transition: opacity .5s .55s ease-out;
}

.wrpServAuto {
	padding: 10px 0 100px 0; background: url("../img/bgServ-Auto.jpg") top center;
	background-size: cover; opacity: 0;
	-webkit-transition: opacity .5s .55s ease-out;
  	transition: opacity .5s .55s ease-out;
}

.wrpServValve {
	padding: 100px 0 200px 0; background: url("../img/bgServ-Valve.jpg") top center;
	background-size: cover; opacity: 0;
	-webkit-transition: opacity .5s .55s ease-out;
  	transition: opacity .5s .55s ease-out;
}

.wrpServPip {
	padding: 100px 0 200px 0; background: url("../img/bgServ-Piping.jpg") top center;
	background-size: cover; opacity: 0;
	-webkit-transition: opacity .5s .55s ease-out;
  	transition: opacity .5s .55s ease-out;
}

.wrpServComm h1, .wrpServAuto h1, .wrpServValve h1, .wrpServPip h1, .wrpServNav h1 { font-size: 50px; text-align: left; color: #5ba8dc; font-weight: 300; font-family: 'Oswald', sans-serif; 
	opacity: 0;
	-webkit-transition: opacity .5s .25s ease-out;
  	transition: opacity .5s .25s ease-out; }

.wrpServComm p, .wrpServAuto p, .wrpServValve p, .wrpServPip p, .wrpServNav p { 
	color: #fff; font-size: 16px; 
	font-family: "Helvetica Neue", "sans-serif";
	font-weight: 300; text-align: justify;
	opacity: 0;
	-webkit-transition: opacity .5s .45s ease-out;
  	transition: opacity .5s .45s ease-out; 
}

.wrpServComm.is-visible, .wrpServComm h1.is-visible, .wrpServComm p.is-visible  { opacity: 1;}
.wrpServAuto.is-visible, .wrpServAuto h1.is-visible, .wrpServAuto p.is-visible  { opacity: 1;}
.wrpServValve.is-visible, .wrpServValve h1.is-visible, .wrpServValve p.is-visible  { opacity: 1;}
.wrpServPip.is-visible, .wrpServPip h1.is-visible, .wrpServPip p.is-visible  { opacity: 1;}
.wrpServNav.is-visible, .wrpServNav h1.is-visible, .wrpServNav p.is-visible  { opacity: 1;}


/* =============================================================================
  	Contact
   ========================================================================== */


.wrpContact { 
	padding: 200px 0 400px 0; background: url("../img/bgContact.jpg") bottom center;
	background-size: cover; 
}

.wrpContact h1 { font-size: 50px; text-align: left; color: #5ba8dc; 
	font-weight: 300; font-family: 'Oswald', sans-serif; 
	opacity: 0;
	-webkit-transition: opacity .5s .25s ease-out;
  	transition: opacity .5s .25s ease-out;
}

.wrpContact h1.is-visible, .wrpContact p.is-visible   { opacity: 1;}

.wrpContact p { 
	color: #ffffff; font-size: 14px; 
	font-family: "Helvetica Neue", "sans-serif";
	font-weight: 300; text-align: left;
	opacity: 0;
	-webkit-transition: opacity .5s .35s ease-out;
  	transition: opacity .5s .35s ease-out;
}

.wrpContact a {
	color: #ffffff; cursor:pointer;
	font-size: 14px; width: 140px; padding: 15px 0;
	margin: 15px auto 0 auto;
	text-align: left; text-decoration: underline;
	text-shadow: none !important; font-weight: 700;
}

.wrpContact a:hover, .wrpContactSub a:hover
{
	color: #ffffff; text-decoration: none; 
	transition: background 0.45s, color 0.45s, border 0.45s, box-shadow 0.45s;
	cursor: pointer;
}

.wrpContact span, .wrpContactSub2 span { padding-left: 16px; display: block;}

.tFoot { font-size: 12px; color: #ffffff; text-align: center; padding-top: 130px;}
.tFootSub { font-size: 12px; color: #ffffff; text-align: center; padding-top: 100px;}

.wrpContactSub { background-color:#09093c; padding: 100px 0; }
.wrpContactSub2 { 
	padding: 200px 0 400px 0; background: url("../img/bgContact.jpg") bottom center;
	background-size: cover;
	
}
.wrpContactSub h1, .wrpContactSub2 h1 { font-size: 50px; text-align: left; color: #5ba8dc; 
	font-weight: 300; font-family: 'Oswald', sans-serif; 
	opacity: 0;
	-webkit-transition: opacity .5s .25s ease-out;
  	transition: opacity .5s .25s ease-out;
}
.wrpContactSub p, .wrpContactSub2 p { 
	color: #ffffff; font-size: 14px; 
	font-family: "Helvetica Neue", "sans-serif";
	font-weight: 300; text-align: left;
	opacity: 0;
	-webkit-transition: opacity .5s .35s ease-out;
  	transition: opacity .5s .35s ease-out;
}
.wrpContactSub a, .wrpContactSub2 a {
	color: #ffffff; cursor:pointer;
	font-size: 14px; width: 140px; padding: 15px 0;
	margin: 15px auto 0 auto;
	text-align: left; text-decoration: underline;
	text-shadow: none !important; font-weight: 700;
}

.wrpContactSub h1.is-visible, .wrpContactSub p.is-visible, .wrpContactSub a.is-visible   { opacity: 1;}
.wrpContactSub2 h1.is-visible, .wrpContactSub2 p.is-visible, .wrpContactSub2 a.is-visible   { opacity: 1;}

/*--- 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;}


/* =============================================================================
  	Sub page
   ========================================================================== */

.wrpBnnImg { padding-top: 26.25%; content: ""; width: 100%; display: block; height: 400px;}
.wrpBnnMap { width: 100%; display: block; height: 500px; padding-top: 120px; background-color: #09093c;}

.bgSubBanner { background: url("../img/banner1.jpg") top center no-repeat; background-size: cover;}
.bgSubBanner2 { background: url("../img/subBgbanner1.jpg") top center no-repeat; background-size: cover;}

.breadFix { 
	background-color:#09093c !important; 
	font-family: 'Catamaran', sans-serif; font-size: 12px;
	font-weight: 400; padding: 10px 0px !important;
}
.breadFix li a { color: #ffffff !important;}
.breadFix li a:hover { color: #177abc !important; text-decoration: none;}

.breadFix .breadcrumb-item.active { color: #ffffff !important;}

.imgFixBnr { width: 100px;}
.fixlist { color: #2FAAE1; padding-right: 10px;}