/*!
 * Tube & Wire - Mobile Version of website


 */

html,
body {
    height: 100%;
}



.carousel {
	margin-top:117px;
    height: 25%;
}

.carousel-indicators	{
	visibility:hidden;
	}

.item,
.active,
.carousel-inner {

    height: 100%;
}

.drop{	
box-shadow: 0 3px 3px 0 rgba(50, 50, 50, 0.59); }

.navbar {
	background-color:#333399;
	font-family:'Average Sans', sans-serif, Arial,Helvetica,sans-serif;
    font-size: 1em;
    padding: 3px 12px;
    text-decoration: none;
	border-bottom:3px white solid;
	padding-bottom:20px;
	box-shadow: 0 3px 3px 0 rgba(50, 50, 50, 0.59);
	
	}
	
.navbar-nav {
	padding-top:0px;
		}
		
.ql-brdr {
	border:4px solid white;
	}		

	
.navbar .navbar-nav > li > a {
  color: white;
  font-family: 'Lato', sans-serif;
  font-weight:900;
  font-size:1.0em;

  font-weight:700;
  text-transform:none;
  letter-spacing:0px;
  text-shadow: 1px 1px 0 #333;
  
}

.navbar .navbar-nav > li > a:hover {
	color:#cc0000;
}

.navbar-brand {
	min-height:90px;

	}
	
p {

	font-family:'Average Sans', sans-serif, Arial,Helvetica,sans-serif;
	font-size:14px;
	color:#666666;
	}
	
h1 {
	font-family:'Average Sans', sans-serif, Arial,Helvetica,sans-serif;
	color:#333399;
	border-bottom:2px #FF0000 solid;
	padding-bottom:5px;
	font-size:23px;
	}	
	
h2 {
	font-family:'Average Sans', sans-serif, Arial,Helvetica,sans-serif;
	color:#333399;
	padding-bottom:5px;
	font-size:19px;
	}	
	
span.blue {
	font-family:'Average Sans', sans-serif, Arial,Helvetica,sans-serif;
	color:#333399;
	font-weight:bold;
	
	}	
	
#grey {

	background-color:#e4e4e6;
	padding-top:20px;
	padding-bottom:20px;

	}	
	
.blue-btn {
	background-color:#344794;
	border:none;
	font-family:'Average Sans', sans-serif, Arial,Helvetica,sans-serif;
	}
	
	
.innershadow {
	-webkit-box-shadow: inset 0px 0px 11px -1px rgba(0,0,0,0.75);
	-moz-box-shadow: inset 0px 0px 11px -1px rgba(0,0,0,0.75);
	box-shadow: inset 0px 0px 11px -1px rgba(0,0,0,0.75);
}		
		

/* Background images are set within the HTML using inline CSS, not here */

.fill {
    width: 100%;
    height: 100%;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
	 text-shadow: 1px 1px 0 #333;
}

#ftr {
	padding-top:30px;
	padding-bottom:0px;
	background-color:#333399;
	border-top:3px solid white;
}


.ftr-bdr {

	border-top: 1px #FFFFFF solid;
	padding-top:10px;
	background-color:#333333;
	
	
	}


p.ftr-text {
	color:#FFFFFF;
	text-shadow: 1px 1px 0 #333;
	}
	
p.ftr-text a {
	color:#FF0000;
	
	
	}
	
.navbar-brand {
	max-width:80%;
	}	
	
h1 {
	font-family:'Average Sans', sans-serif, Arial,Helvetica,sans-serif;
	color:#333399;
	border-bottom:2px #FF0000 solid;
	padding-bottom:5px;
	font-size:24px;
	}		

h3 {
	font-family:'Average Sans', sans-serif, Arial,Helvetica,sans-serif;
	color:#333399;
	border-bottom:3px solid #333399;
	padding-bottom:10px;
	font-weight:800;
	font-size:23px;

	}
	
h5 {
	font-family:'Average Sans', sans-serif, Arial,Helvetica,sans-serif;
	color:#FF0000;
	border-top:3px #333399 solid;
	padding-top:10px;
	font-size:24px;
	margin-top:30px;
	}	
	
.image-bg-fluid-height,
.image-bg-fixed-height {
    text-align: center;
    -webkit-background-size: 100%;
    -moz-background-size: 100;
    background-size: 100%;
    -o-background-size: 100%;
	margin-top:110px;

	border-bottom:7px solid #e4e4e6;
	box-shadow: 0 3px 3px 0 rgba(50, 50, 50, 0.59);
}

.image-bg-fluid-height {
	/*background: no-repeat center center scroll;*/
    padding: 45px 0;
}

.image-bg-fixed-height {
	/*background:  no-repeat center center scroll;*/
    height: 100px;
}

.img-center {
	margin: 0 auto;
	
}	

.contact-form {
	border: #354ba0 1px dotted;
	padding:20px;
	}
	
.top-pad {
	padding-top:30px;
	}	

.shadow {
    box-shadow: 0 3px 3px 0 rgba(50, 50, 50, 0.59);
}


/* inner page headers */



#about			{ background-image:url(../img/banner-about-sm.jpg); }
#contact		{ background-image:url(../img/banner-about-sm.jpg); }
#products 		{ background-image:url(../img/banner-products-sm.jpg);  }
#bespoke		{ background-image:url(../img/banner-bespoke-sm.jpg); }
#capabilities	{ background-image:url(../img/banner-gallery-sm.jpg); }
#gallery		{ background-image:url(../img/banner-capabilities-sm.jpg); }
#casestudies	{ background-image:url(../img/banner-casestudies-sm.jpg); }


.index-rhs-title {
	width:100%;
	height:49px;
	border:1px #FFFFFF solid;
	background-image:url(../img/specialistsin.jpg);
	background-position:10px center;
	background-repeat:no-repeat;
	margin-top:20px;
	background-color:#ed1c24;
}
	
.index-rhs-inside-lhs{
	width:50%;
	height:65px;
	float:left;
	padding-left:40px;
	padding-top:15px;
	padding-right:10px;
	background-color:#e6e7e8;
	border:#FFFFFF 1px solid;
	font-size:0.93em;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	background-repeat:no-repeat;
	
}

#red.index-rhs-inside-lhs{
background-image:url(../img/tick-red.jpg);
background-position:left center;
color:#333333;
}

.end {
	margin-bottom:30px;
	}


.index-pad-rhs {
	margin-bottom:60px;
	}


@media (min-width:520px){


.carousel {
	margin-top:100px;
    height: 35%;
}

/*.image-bg-fluid-height,
.image-bg-fixed-height {
    text-align: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
	margin-top:110px;
}*/

.image-bg-fluid-height,
.image-bg-fixed-height {
    text-align: center;
    -webkit-background-size: 70%;
    -moz-background-size: 70%;
    background-size: 70%;
    -o-background-size: 70%;
	margin-top:110px;
	border-bottom:7px solid #e4e4e6;
	box-shadow: 0 3px 3px 0 rgba(50, 50, 50, 0.59);
}

.image-bg-fluid-height {
	background: url('http://lorempixel.com/g/1920/500/') no-repeat center center scroll;
    padding: 90px 0;
}

.image-bg-fixed-height {
	background: url('http://lorempixel.com/g/1920/500/') no-repeat center center scroll;
    height: 450px;
}

.img-center {
	margin: 0 auto;
}

#about			{ background-image:url(../img/banner-about-sm.jpg); }
#contact		{ background-image:url(../img/banner-about-sm.jpg); }
#products 		{ background-image:url(../img/banner-products-sm.jpg);  }
#bespoke		{ background-image:url(../img/banner-bespoke-sm.jpg); }
#capabilities	{ background-image:url(../img/banner-gallery-sm.jpg); }
#gallery		{ background-image:url(../img/banner-capabilities-sm.jpg); }
#casestudies	{ background-image:url(../img/banner-casestudies-sm.jpg); }


.index-rhs-title {
	width:100%;
	height:49px;
	border:1px #FFFFFF solid;
	background-image:url(../img/specialistsin.jpg);
	background-position:10px center;
	background-repeat:no-repeat;
	margin-top:20px;
	background-color:#ed1c24;
}
	
.index-rhs-inside-lhs{
	width:50%;
	height:65px;
	float:left;
	padding-left:40px;
	padding-top:15px;
	padding-right:10px;
	background-color:#e6e7e8;
	border:#FFFFFF 1px solid;
	font-size:0.95em;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	background-repeat:no-repeat;
}

#red.index-rhs-inside-lhs{
background-image:url(../img/tick-red.jpg);
background-position:left center;
color:#333333;
}

}

@media(min-width:768px) {


body {
    
	background-image:url(../img/bg-sm.jpg);
	background-position:center;
	background-repeat:repeat-y;
}


.body-section {
	padding-top:35px;	
	padding-bottom:35px;	

}


.navbar .navbar-nav > li > a {
  color: white;
  font-family: 'Lato', sans-serif;
  font-weight:900;
  font-size:0.8em;
  margin-top:0px;
  font-weight:700;
  text-transform:none;
  letter-spacing:0px;
  text-shadow: 1px 1px 0 #333;
  
}

.navbar .navbar-nav > li > a:hover {
	color:#cc0000;
}

.carousel {
	margin-top:160px;
    height: 35%;
}

h3 {
	font-family:'Average Sans', sans-serif, Arial,Helvetica,sans-serif;
	color:#333399;
	border-bottom:3px solid #333399;
	padding-bottom:10px;
	font-weight:800;
	font-size:18px;

	}
	
	
	.ftr-bdr {

	border-top:none;
	padding-top:0px;
	background-color:#333399;
	
	
	}
	
h1 {
	font-family:'Average Sans', sans-serif, Arial,Helvetica,sans-serif;
	color:#333399;
	border-bottom:2px #FF0000 solid;
	padding-bottom:5px;
	font-size:24px;
	}		
	
.image-bg-fluid-height,
.image-bg-fixed-height {
    text-align: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
	margin-top:160px;
	max-height:120px;
}		

.image-bg-fluid-height {
	background: url('http://lorempixel.com/g/1920/500/') no-repeat center center scroll;
    padding: 100px 0;
}

.image-bg-fixed-height {
	background: url('http://lorempixel.com/g/1920/500/') no-repeat center center scroll;
    height: 450px;
}

#about			{ background-image:url(../img/banner-about-md.jpg); }
#contact		{ background-image:url(../img/banner-about-md.jpg); }
#products 		{ background-image:url(../img/banner-products-md.jpg);  }
#bespoke		{ background-image:url(../img/banner-bespoke-md.jpg); }

#gallery		{ background-image:url(../img/banner-capabilities-md); }
#capabilities	{ background-image:url(../img/banner-gallery-md.jpg); }


#casestudies	{ background-image:url(../img/banner-casestudies-md.jpg); }


.index-rhs-title {
	width:282px;
	height:49px;
	border:1px #FFFFFF solid;
	background-image:url(../img/specialistsin.jpg);
	background-position:10px center;
	background-repeat:no-repeat;
	margin-top:20px;
	background-color:#ed1c24;
}
	
.index-rhs-inside-lhs{
	width:141px;
	height:65px;
	float:left;
	padding-left:40px;
	padding-top:15px;
	padding-right:10px;
	background-color:#e6e7e8;
	border:#FFFFFF 1px solid;
	font-size:0.8em;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	background-repeat:no-repeat;
}

#red.index-rhs-inside-lhs{
background-image:url(../img/tick-red.jpg);
background-position:left center;
color:#333333;
}



}


@media(min-width:992px) {


body {
    height: 100%;
	background-image:url(../img/bg-md.jpg);
	background-position:center;
	background-repeat:repeat-y;
}


.carousel {
	margin-top:180px;
    height: 35%;
}


.navbar .navbar-nav > li > a {
  color: white;
  font-family: 'Lato', sans-serif;
  font-weight:900;
  font-size:1.1em;
  margin-top:15px;
  font-weight:700;
  text-transform:none;
  letter-spacing:0px;
  text-shadow: 1px 1px 0 #333;
  
}

.navbar .navbar-nav > li > a:hover {
	color:#cc0000;
}	

h3 {
	font-family:'Average Sans', sans-serif, Arial,Helvetica,sans-serif;
	color:#333399;
	border-bottom:3px solid #333399;
	padding-bottom:10px;
	font-weight:800;
	font-size:23px;

	}
	
	h1 {
	font-family:'Average Sans', sans-serif, Arial,Helvetica,sans-serif;
	color:#333399;
	border-bottom:2px #FF0000 solid;
	padding-bottom:5px;
	font-size:29px;
	}	
	
		.ftr-bdr {

	border-top:none;
	padding-top:0px;
	background-color:#333399;
	
	
	}
	
.body-section {
	padding-top:65px;	
	padding-bottom:65px;	

}

.image-bg-fluid-height,
.image-bg-fixed-height {
    text-align: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
	margin-top:180px;
}	


#about			{ background-image:url(../img/banner-about-md.jpg); }
#contact		{ background-image:url(../img/banner-about-md.jpg); }
#products 		{ background-image:url(../img/banner-products-md.jpg);  }
#bespoke		{ background-image:url(../img/banner-bespoke-md.jpg); }

#gallery		{ background-image:url(../img/banner-capabilities-md); }
#capabilities	{ background-image:url(../img/banner-gallery-md.jpg); }


#casestudies	{ background-image:url(../img/banner-casestudies-md.jpg); }


.index-rhs-title {
	width:348px;
	height:49px;
	border:1px #FFFFFF solid;
	background-image:url(../img/specialistsin.jpg);
	background-position:10px center;
	background-repeat:no-repeat;
	background-color:#ed1c24;
	margin-top:20px;
}
	
.index-rhs-inside-lhs{
	width:174px;
	height:68px;
	float:left;
	padding-left:40px;
	padding-top:15px;
	padding-right:10px;
	background-color:#e6e7e8;
	border:#FFFFFF 1px solid;
	font-size:1em;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	background-repeat:no-repeat;
}

#red.index-rhs-inside-lhs{
background-image:url(../img/tick-red.jpg);
background-position:left center;
color:#333333;
}


}


@media(min-width:1200px) {


body {
    height: 100%;
	background-image:url(../img/bg-lg.jpg);
	background-position:center;
	background-repeat:repeat-y;
}

p {

	font-family:'Average Sans', sans-serif, Arial,Helvetica,sans-serif;
	font-size:16px;
	}

.carousel {
	margin-top:115px;
    height: 37%;
}


.navbar-brand {
	min-height:90px;

	}
	
.navbar .navbar-nav > li > a {
  color: white;
  font-family: 'Lato', sans-serif;
  font-weight:900;
  font-size:1em;
  margin-top:25px;
  font-weight:700;
  text-transform:none;
  letter-spacing:0px;
  text-shadow: 1px 1px 0 #333;
  
}

.navbar .navbar-nav > li > a:hover {
	color:#cc0000;
}	

h1 {
	font-family:'Average Sans', sans-serif, Arial,Helvetica,sans-serif;
	color:#333399;
	border-bottom:2px #FF0000 solid;
	padding-bottom:5px;
	font-size:24px;
	margin-bottom:30px;
	}	
	
		.ftr-bdr {

	border-top:none;
	padding-top:0px;
	background-color:#333399;
	
	
	}
	
.image-bg-fluid-height,
.image-bg-fixed-height {
    text-align: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
	margin-top:110px;
}

.image-bg-fluid-height {
	background: no-repeat center center scroll;
    padding: 180px 0;
}

.image-bg-fixed-height {
	background: url('http://lorempixel.com/g/1920/500/') no-repeat center center scroll;
    height: 440px;
}

.img-center {
	margin: 0 auto;
}



/* inner page headers */



#about			{ background-image:url(../img/banner-about-xl.jpg); }
#contact		{ background-image:url(../img/banner-about-xl.jpg); }
#products 		{ background-image:url(../img/banner-products-xl.jpg); background-position:left;  }
#bespoke		{ background-image:url(../img/banner-bespoke-xl.jpg); }
#capabilities	{ background-image:url(../img/banner-gallery-xl.jpg); }
#gallery		{ background-image:url(../img/banner-capabilities-xl.jpg); }
#casestudies	{ background-image:url(../img/banner-casestudies-xl.jpg); }		

.index-rhs-title {
	width:348px;
	height:49px;
	border:1px #FFFFFF solid;
	background-image:url(../img/specialistsin.jpg);
	background-position:10px center;
	background-repeat:no-repeat;
	margin-top:20px;
	background-color:#ed1c24;
}
	
.index-rhs-inside-lhs{
	width:174px;
	height:68px;
	float:left;
	padding-left:40px;
	padding-top:15px;
	padding-right:10px;
	background-color:#e6e7e8;
	border:#FFFFFF 1px solid;
	font-size:1em;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	background-repeat:no-repeat;
}

#red.index-rhs-inside-lhs{
background-image:url(../img/tick-red.jpg);
background-position:left center;
color:#333333;
}



}