* { outline: none; box-sizing: border-box; font-family:'Open Sans',Calibri, sans-serif;} 

body { background:#999;}

main { background:#999; color: #eee; position: relative;}

main .dynamicbg	  { position: absolute; top: 90px; left: 0px; background: url(../images/bg/about.png) no-repeat; width: 100%; height: 100%;opacity: 0.2;} 
main .about-us 	  { position: absolute; top: 90px; left: 0px; background: url(../images/bg/about.png) no-repeat; width: 100%; height: 100%;opacity: 1.0;} 
main .contact-us  { position: absolute; top: 90px; left: 0px; background: url(../images/bg/contact.png) no-repeat; width: 100%; height: 100%;} 
main .project-list,   
main .downloads   { position: absolute;    top: 0;    left: 0px;    background: url(../images/bg/downloads.png) no-repeat;    width: 100%;    height: 949px;} 
main .ball-valves { position: absolute; top: 90px; left: 0px; background: url(../images/bg/about.png) no-repeat; width: 100%; height: 100%; opacity: 0.2; } 


.ballvalve-inset { position: absolute; right: -20px; top: 130px; width: 70%;} 
.topentryballvalve-inset { position: absolute; right: -120px; top:0px; width: 70%;} 
.trunion-inset { position: absolute; right: -50px; top:130px; width: 70%;} 
.gateglobe-inset { position: absolute; right: -50px; top:170px; width: 70%;} 
.knifegate-inset { position: absolute; right: -150px; top:130px; width: 70%;} 
.butterflyvalve-inset { position: absolute; right: -190px; top:0px; width: 70%;} 
.electricactuators-inset{ position: absolute; right: -250px; top:200px; width: 70%;} 
.pneumaticactuator-inset{ position: absolute; right: -250px; top:170px; width: 70%;} 
.cpanel-inset{ position: absolute; right: -70px; top:290px; width: 70%;z-index: 100;}
.home-inset{ position: absolute; right: -270px; top:-42px; width: 70%;z-index: 40; height: 548px; width: 453px; overflow: hidden;}  

.floatright { float: right; position: absolute;}
.text-center { text-align: center!important;}


.symbol { background: url(../images/symbol.png) no-repeat right center;}
.about-us-symbol { background: url(../images/symbol.png) no-repeat right center;}
.ball-valves-symbol{ background: url(../images/bg/ballvalves.png) no-repeat right center;}

.hp_opener { position: relative; top: 0px; left: 0;    padding: 50px 0;}

.download-item { padding: 10px 0 10px; border-bottom: 1px dotted #ccc;}
.project-item { padding: 10px 10px 0px; border-bottom: 1px dotted #ccc; }

.entry { padding-bottom: 10px; } 
.entry strong { color: #fff!important;}

.contractor.entry,
.client.entry { color: #fc0;}

.nopad { margin: auto; padding: 0;}


img { max-width: 100%; height: auto!important;}

section.page_content {
    padding-top: 20px;
	overflow-x: hidden;
}

a {
    color: #000;
    text-decoration: none;
}

a:hover, a:focus {
    color: #fc0;
    text-decoration: underline;
}

.bootstrap-dialog .modal-header.bootstrap-dialog-draggable { cursor: move; }

.ruler {
    width: 100%;
    height: 43px;
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    background: url(../images/ruler.png) repeat-x 0 -3px;
	opacity: .3;
}

header { background: #666 url(../images/page_bg.png) repeat-x; padding: 25px 0 20px; position: relative;z-index:50;}
header div.title { color: #212E84; font-family:'Open Sans',Calibri, sans-serif; font-size: 50px; padding: 10px 0; text-transform:uppercase;}

.logo { display: inline-block; position: relative; z-index: 51; padding: 0 20px 0px; margin-top: -7px;}
.corner { background: url(../images/corner.png) no-repeat; position: absolute; right:0; top:0; width:1200px;height:333px ;z-index: 50; pointer-events: none;}

nav { color: #333; position: relative; z-index:2; }
.navwrap { display: inline;}
.navblock {border-left: 1px solid #fff; margin-left: 35px; position: relative;}
.nav-icon { position: absolute; left:-35px; top: 5px;display: inline-block; width: 30px; height: 25px; background: url(../images/icon_menu.png) no-repeat; vertical-align:middle; margin-right: 3%; cursor: pointer; }
nav .nav-item {     display: inline-block;
    vertical-align: middle;
     }
.navblock .nav-item {
    padding-right: 35px;
    display: inline-block;
    vertical-align: middle;
    margin: 0 0 5px 10px;
}
.navblock .nav-item.withgap { padding-top: 15px;}
nav .nav-item a { font-size: 14px; color:#333; text-decoration:none; padding:5px 5px 5px; display: inline-block;  
	width: 168px;    
	background: url(../images/navbutbg_off.png) no-repeat;
	}
nav .nav-item a.active,
nav .nav-item a:hover { background: url(../images/navbutbg.png) no-repeat;color: #fff!important;}

.title {
    padding: 5px 10px 5px 20px;
    font-size: 20px;
    border-bottom: 1px solid #fff;
    margin-bottom: 10px;
    margin-left: -10px;
}

.clients { padding: 0 0  0 10px;}

.obsrtl {
	unicode-bidi: bidi-override;
	direction: rtl;
}

.content.copy.block {
   
    margin: auto;
    line-height: 1.5em;
    padding: 40px 0;
	
}



.mt { margin-top: 60px;}


.row { padding: 30px 0; margin: 0}
.item.row { padding: 0;}
.profile.row { border-bottom:1px solid #eee; margin: 0;  padding: 20px 0!important }
.contact.row { border-bottom:1px solid #ccc; margin: 0;  padding: 10px 0; }

.banner { padding: 10px 0; margin-top: 0;}
.banner .inset   { display: inline-block; float: left; margin-right: 40px; vertical-align: middle; padding: 10px 0;}
.banner .inset img  { max-width: 180px;}
.banner .message { color:#fff; font-size: 32px;  display: table;}
.banner.light .message { color:#212E84; font-size: 32px;}

.copy p.firstline { font-size: 13px; font-weight:bold;}
.copy p { font-size: 13px; }
.copy p.shout { font-size: 24px;  font-weight: normal;}
.copy a { color: #fff;}
.copy a:hover { color: #fc6;}

small, .small {
    font-size: 85%!important;
}

.contact-block { background: #f3f3f3; font-size: 20px; color: #000;}
.contact-block .inner { padding: 10px;}
.contact-block .inner > div { padding: 5px 0 5px;}
.contact-block .inner > div.shoutloud { font-size: 32px; color: #000;}

.contactpanel { color:#fff;}
.contactpanel .inner {padding: 20px;}
.contactpanel label { font-weight: normal; text-align: left!important;}

.contactpanel h2 {
    padding-bottom: 14px;
}

#enq_submit {
    background: #07664C;
    border-radius: 7px;
    color: #ffffff;
    font-size: 24px;
    padding: 5px 40px;
    border: none;
}
#enq_submit:hover { opacity: 0.9;}

.quotebox { background: #07664C url(../images/quotes_bg.png) center center no-repeat; background-size: contain;}
.quotebox .inner { padding: 20px; ; text-align: center;width: 99%; vertical-align: middle; display:inline-block; }
.quotebox:before { content:' '; display:inline-block; width:1%; height:336px;    vertical-align: middle;}
.quotebox .inner span { font-size:32px; color: #fff; vertical-align:middle; }


.copywrite p, .copywrite a {
    font-size: 12px;
    line-height: 1.5em;
    color: #eee;
}

.contact .bod h3{     margin-top: 0;}

.flush { padding: 0;}

.border-l {border-left: 1px solid #ccc;}


.blue { color: #212E84!important;}
.green {color: #07664C!important;}

footer { background:none; color: #eee; font-size: 10px; line-height: 1.35em;  width: 100%; bottom:0; left:0; }

.footernav { margin: auto ;  font-size: 12px; padding:10px; }
.footernav .nav-item { color: #aaa; padding: 0 5px;}
.footernav .nav-item a  { font-size: 12px; color: #ccc; background: none!important; width:auto!important; padding: initial;}
.footernav .nav-item a:hover { color: #fff!important;}

footer a  {  color: #eee;}
footer a:hover  {  color: #fff;}

footer .totop { float: right;}
footer .row {     margin-bottom: 0; padding: 0 0 10px }

#dots { position: absolute; right: 40px; bottom: 30px;z-index: 0;}

#panel {
    position: absolute;
    left: 0;
    bottom: 30px;
    z-index: 0;
    /*background: rgb(173, 173, 173);*/
	background: #fff;
    width: 180px;
    /* height: 98px; */
    text-align: left;
    border-radius: 0 50px 50px 0;
    display: block;
    padding-right: 44px;
}
#panel img { padding: 0;}

.greenbg { background:#07664C;  color: #fff;}
.redbg { background: #961F1F; color: #fff;}
.row.lgrey { background: #eee;; margin-bottom: 0;  padding-top: 20px;}
.row.grey { background:#f6f6f6; margin-bottom: 0;  padding: 0;}
.row.dgrey { background:#e6e6e6; margin-bottom: 0; padding: 0;}
.row.dgrey .row {
    padding: 20px 0 0;
}


.greenbg h2 { margin-bottom:20px;}
.greenbg p { color: #F5f5f5!important;}

.redbg h2 { margin-bottom:20px;}
.redbg p { color: #F2DEDE!important;}

.modalvideo,
.videoWrapper {
/*	background:#000;*/
	position: relative;
	margin: auto;
	text-align: center;
}
.videoWrapper:before {
	content:' ';
	display: block;
	cursor: pointer;
	click-events: passthru;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.75) url(../images/video_overlay.png) center center no-repeat;
}
.videoWrapper.large:before {
	content:' ';
	display: block;
	cursor: pointer;
	position: absolute;
	click-events: passthru;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.75) url(../images/video_overlay_lrg.png) center center no-repeat;
}

.videoWrapper.none:before {
	content:' ';
	display: block;
	cursor: pointer;
	position: absolute;
	click-events: passthru;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background:none;
}

.modalvideo {
	height:0;
	padding-top: 125px;
	padding-bottom: 200px;
}
.modalvideo iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;	
}

.modaltitle {
    font-size: 24px;
    vertical-align: middle;
}

.modallogo {
    width: 100px;
    display: inline-block;
    margin-right: 20px;
}

.caption {
    font-size: 14px;
    color: #000;
    font-weight: bold;
    padding: 10px 0;
}
.btn-close { float:right;}
.btn-default { float:left;}

h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child { padding-top: 0; margin-top: 0;}

.active { color: #07664C!important;}

.videoitem { margin: 10px 0;}

.item.row .bod,  
.item.row .details { margin: 10px 0;}

/* ######################### */

.ytp-chrome-top,
.ytp-gradient-top { display: none!important;}

.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	
}

.close {
    float: right;
    font-size: 32px;
    font-weight: 300;
    line-height: 1;
    color: #fff;
    text-shadow: 0 1px 0 #000; 
    filter: alpha(opacity=20);
    opacity: .5;
}

.close:hover, .close:focus {
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    filter: alpha(opacity=50);
    opacity: 1;
}

.form-group {
		margin-bottom: 0;
	}
	
	
.logo .ukpv_badge {
    max-width: 80px;
    margin: 0 20px;
    vertical-align: middle;
}	


.page_content .ukpv_badge {
    position: absolute;    
    right: 54px;
    top: 100px;
}

div#ukpvbadge { display: none;}

@media (max-width: 1200px) { 
.banner.light .message,
.banner .message { font-size: 28px; }
}



@media (max-width: 1024px) { 

	 nav {
		margin-top: 40px;
	}
	
	.home-inset{ position: absolute; right: -320px; top:-42px; width: 70%;z-index: 40; height: 548px; width: 453px; overflow: hidden;}  
	
	.page_content .ukpv_badge {
		position: absolute;
		right: 54px;
		bottom: -100px;
		top: initial;
	}
	
}

@media (max-width: 960px) { 
 .banner.light .message,
 .banner .message { font-size: 24px; }
 
  .videoWrapper.large:before {
		background: rgba(0,0,0,0.75) url(../images/video_overlay.png) center center no-repeat;
	}
  .contact-block .inner > div.shoutloud {
		font-size: 24px;
		color: #000;
  }

}


@media (max-width: 768px) {  
	.banner.light .message,
	.banner .message { font-size: 24px; }
	.nav-icon {
	    float: left;
	}
	
	
		.quotebox .inner span { font-size:28px; color: #fff; vertical-align:middle; }

	.navwrap {
		display: table;
		margin: 0;
	    width: 80%;
	}
	
	div#ukpvbadge {
		position: absolute;
		left: 0;
		bottom: -88px;
		display: block;
		width: 100%;
	}
	.logo .ukpv_badge {
		max-width: 80px;
		margin: 0 20px;
		vertical-align: middle;
		position: absolute;
		right: -74px;
		top: -12px;
	}
	

}


@media (max-width: 768px) {  

	header div.title { font-size: 40px;}
	nav {
    	margin-top: 0;
	}
	
	header div.title,
	.logo {
		 float: none;
		text-align: center;
	}
		
	.nav-item {
		padding-right: 6%;
		display: block;
		vertical-align: middle;
		margin: 0 0 5px 0;
	}
	.banner.light .message,
	.banner .message { font-size: 20px; } 
	.banner .inset {
		display: inline-block;
		/* float: left; */
		margin-right: 40px;
		vertical-align: middle;
		padding: 10px 0;
		text-align: center;
		width: 100%;
	}
	.banner .inset img  { max-width: 100%;}
	
	.copy p.shout {
		font-size: 18px;
		color: #666;
		font-weight: bold;
	}
	
	.footernav .nav-item { color: #aaa; padding: 0 5px; display: inline-block;  vertical-align:middle;} 
	.footernav .nav-item a  { font-size: 12px; color: #ccc;}
	
	.quotebox { background-size: 90%;}

	.quotebox .inner span { font-size:24px; color: #fff; vertical-align:middle; }

	.banner .inset   { display: inline-block; float: none; margin: auto; vertical-align: middle; padding: 10px 0; width: 100%; text-align:center;}
	.banner .inset img  {  width: 100%; height:auto!important;}
	.copy p.firstline { font-size: 16px; color: #111; font-weight:bold;}
	.copy p { font-size: 14px; }
	
	.copy p br { display: none;}
	
	.contact-block .inner > div.shoutloud {
		font-size: 18px;
		color: #000;
	}	
  
  	
	
	.contactpanel label {
		font-weight: normal;
		text-align: left!important;
		margin: 0;
	}
	
	.formError .formErrorContent {
		position: relative;
		color: rgb(255, 255, 255);
		letter-spacing: 0.1em;
		font-size: 11px;
		background: rgb(71, 124, 180);
		padding: 4px 2%;
		border-radius: 6px;
	}
	
	header nav {
/*		position: fixed; */
		top: 0;
		left: 0;
		background: #f5f5f5;
		padding: 10px;
		width: 100%;
	/*	border-bottom: 1px solid #ccc;*/
	}
	
	.navwrap { display: none;}
	
	header nav:hover .navwrap { display: table;}
	
	
	
	.nav-icon { cursor: pointer;}
	
	main .dynamicbg { opacity: 0.1;}
	
	.content.copy.block {
		padding: 0px 40px;
		    min-height: 1025px;
	}
	
	.imgbox  { position: static;width: auto!important;}
	
	footer { padding-bottom: 150px;}
	
	.no-tablet { display: none;}
	
	.page_content .ukpv_badge { display: none;}
	
	
	
	.col-xs-12.col-sm-3.col-md-3.col-lg-2.no-mob {
		margin-top: -420px;
	}
	
}

@media (max-width: 500px) { 
	.no-mob { display: none;}

	
	
	
}