.page-container {
width: 1180px;
margin: 0 auto;
}
.flexbox {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: flex;
}
.row {
margin: 1em 0;
}
.row:after {
content: "";
display: table;
clear: both;
} [class*="span"] {
margin-left: 2%;
float: left;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
[class*="span"]:first-child {
margin-left: 0;
}
.prototype [class*="span"] {
background: #ececec;
border-radius: 4px;
padding: 15px;
text-align: center;
}
.span1 {
width: 6.5%;
}
.span2 {
width: 15%;
}
.span3 {
width: 23.5%;
}
.span4 {
width: 32%;
}
.span5 {
width: 40.5%;
}
.span6 {
width: 49%;
}
.col7 {
width: 57.5%;
}
.span8 {
width: 66%;
}
.span9 {
width: 74.5%;
}
.span10 {
width: 83%;
}
.span11 {
width: 91.5%;
}
.span12 {
width: 100%;
float: none;
} @media only screen and (max-width : 1200px) {
.page-container {
width: 960px;
}
} @media only screen and (max-width : 990px) {
.page-container {
width: 738px;
}
}  @media only screen and (max-width : 767px) {
.page-container {
width: 96%;
}
.row {
margin: 0;
}
[class*="span"] {
margin: 15px 0;
float: none;
width: 100%;
}
.flexbox {
display: block;
}
}body{ width:100%; margin:0; padding:0}.wrap{ width:1180px; margin:0 auto}.flexbox{ display:-webkit-flex; display:flex}.row{ margin:20px 0} .row:after{ content:""; display:table; clear:both}[class*="span"]{ margin-right:2%; float:left; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box} [class*="span"]:last-child{ margin-right:0} .prototype [class*="span"]{ background:#ececec; border-radius:4px; padding:15px; text-align:center}.span1{ width:6.5%}.span2{ width:15%}.span3{ width:23.5%}.span4{ width:32%}.span5{ width:40.5%}.span6{ width:49%}.col7{ width:57.5%}.span8{ width:66%}.span9{ width:74.5%}.span10{ width:83%}.span11{ width:91.5%}.span12{ width:100%; float:none}@media only screen and (max-width:1200px){ .wrap{ width:960px}}@media only screen and (max-width:1024px){ .wrap{ width:760px}}@media only screen and (max-width:767px){ .wrap{ width:96%} .row{ margin:0} [class*="span"]{ margin:15px 0; float:none; width:100%}} html { font-size: 62.5%; }
body { font-size: 1.5em; line-height: 1.6; font-weight: 400; font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #222; } h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 2rem; font-weight: 300; }
h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }
@media (min-width: 550px) { h1 { font-size: 5.0rem; } h2 { font-size: 4.2rem; } h3 { font-size: 3.6rem; } h4 { font-size: 3.0rem; } h5 { font-size: 2.4rem; } h6 { font-size: 1.5rem; } }
p { margin-top: 0; } a { color: #1EAEDB; }
a:hover { color: #0FA0CE; } .button, button, input[type="submit"], input[type="reset"], input[type="button"] { display: inline-block; height: 38px; padding: 0 30px; color: #555; text-align: center; font-size: 11px; font-weight: 600; line-height: 38px; letter-spacing: .1rem; text-transform: uppercase; text-decoration: none; white-space: nowrap; background-color: transparent; border-radius: 4px; border: 1px solid #bbb; cursor: pointer; box-sizing: border-box; }
.button:hover, button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover, .button:focus, button:focus, input[type="submit"]:focus, input[type="reset"]:focus, input[type="button"]:focus { color: #333; border-color: #888; outline: 0; }
.button.button-primary, button.button-primary, input[type="submit"].button-primary, input[type="reset"].button-primary, input[type="button"].button-primary { color: #FFF; background-color: #33C3F0; border-color: #33C3F0; }
.button.button-primary:hover, button.button-primary:hover, input[type="submit"].button-primary:hover, input[type="reset"].button-primary:hover, input[type="button"].button-primary:hover, .button.button-primary:focus, button.button-primary:focus, input[type="submit"].button-primary:focus, input[type="reset"].button-primary:focus, input[type="button"].button-primary:focus { color: #FFF; background-color: #1EAEDB; border-color: #1EAEDB; } input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea, select { height: 38px; padding: 6px 10px; background-color: #fff; border: 1px solid #D1D1D1; border-radius: 4px; box-shadow: none; box-sizing: border-box; }
input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
textarea { min-height: 65px; padding-top: 6px; padding-bottom: 6px; }
input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="text"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="password"]:focus, textarea:focus, select:focus { border: 1px solid #33C3F0; outline: 0; }
label, legend { display: block; margin-bottom: .5rem; font-weight: 600; }
fieldset { padding: 0; border-width: 0; }
input[type="checkbox"], input[type="radio"] { display: inline; }
label > .label-body { display: inline-block; margin-left: .5rem; font-weight: normal; } ul { list-style: circle inside; }
ol { list-style: decimal inside; }
ol, ul { padding-left: 0; margin-top: 0; }
ul ul, ul ol, ol ol, ol ul { margin: 1.5rem 0 1.5rem 3rem; font-size: 90%; }
li { margin-bottom: 1rem; } code { padding: .2rem .5rem; margin: 0 .2rem; font-size: 90%; white-space: nowrap; background: #F1F1F1; border: 1px solid #E1E1E1; border-radius: 4px; }
pre > code { display: block; padding: 1rem 1.5rem; white-space: pre; } th, td { padding: 12px 15px; text-align: left; border-bottom: 1px solid #E1E1E1; }
th:first-child, td:first-child { padding-left: 0; }
th:last-child, td:last-child { padding-right: 0; } button, .button { margin-bottom: 1rem; }
input, textarea, select, fieldset { margin-bottom: 1.5rem; }
pre, blockquote, dl, figure, table, p, ul, ol, form { margin-bottom: 2.5rem; } .u-full-width { width: 100%; box-sizing: border-box; }
.u-max-full-width { max-width: 100%; box-sizing: border-box; }
.u-pull-right { float: right; }
.u-pull-left { float: left; } hr { margin-top: 3rem; margin-bottom: 3.5rem; border-width: 0; border-top: 1px solid #E1E1E1; } .container:after, .row:after, .u-cf { content: ""; display: table; clear: both; }@import url("https://fonts.googleapis.com/css?family=Raleway:900,600");  .clear:after {
content: " ";
clear: both;
height: 0px;
width: 0px;
display: table-cell;
}
[class*="span"] {
margin-left: 0px !important;
}
body {
font-family: 'Arial', Helvetica, sans-serif;
font-size: 13px;
color: #444;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a,a:visited{
color: #006bc4;
text-decoration: none;
}
h1 {
font-size: 30px;
font-weight: 800;
color: #005dab;
}
h2, h3 {
font-size: 26px;
font-weight: 800;
color: #005dab;
}
.clearfix:after {
content: " ";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
.row {
margin: 0px;
}
.top-header {
background: #4c4949;
color: #a9a9a9;
font-size: 13px;
padding: 8px 0px;
}
.top-header .follow-us {
text-align: right;
}
.top-header .follow-us a{
color: #959595;
}
.top-header .follow-us .fa {
font-size: 20px;
}
.main-header {
background: #005dab;
color: #a9a9a9;
}
.main-header .logo {
margin: 40px 0px;
}
.main-header .search .submit, .main-header .search label {
display: none;
}
.main-header .search{
margin-top: 56px;
position: relative;
margin-right: 2%;
}
.main-header .search .search-input{
position: relative;
}
.main-header .search input[type="text"]{
width: 100%;
border-radius: 11px;
height: 43px;
border: 0px;
}
.search .fa-search { 
position: absolute;
top: 10px;
right: 20px;
font-size: 20px;
}
.main-header .telephone {
margin: 40px 0px;
float: right;
}
.main-header .telephone a{
display: block;
text-align: right;
font-size: 22px;
text-decoration: none;
color: #fff;
}
.main-header .telephone a i {
margin-right: 10px;
}
.menu-header {
background: #707070; }
.search:after{
content: '';
height: 20px;
width: 20px;
background-color: red;
}
.menu-header .main-menu{
display: block;
}
.menu-header .menu {
list-style: none;
margin-bottom: 0px;
}
.menu-header .menu li {
display: inline-block;
margin-bottom: 0px;
text-transform: uppercase;
width: 16.3%;
text-align: center;
}
.menu-header .menu li:last-child {
margin-right: 0px;
}
.menu-header .menu li a{
color: #fff;
text-decoration: none;
padding: 13px;
font-size: 16px;
font-weight: lighter;
display: block;
}
.menu-header .menu li:hover a, .menu-header .menu .current_page_item a, .menu-header .menu .current_page_item {
background: #7d7d7d;
}
.mobile-menu-button{
display: none;
text-align: center;
}
.mobile-menu-button:hover{
background: #7d7d7d;
}
.mobile-menu-button i.fa{
color: #FFF;
font-size: 25px;
padding: 10px 0px;
line-height: 25px;
}
.page-content{
margin-top: 15px;
margin-bottom: 20px;
}
.page-content iframe{
width: 100%;
}
.products .patterned, .category .patterned{
padding-top: 40px;
}
{
padding-top: 40px;
}
.patterned {
background-image: url(//www.fluidcontrols.co.uk/wp-content/themes/fluidcontrols/images/assets/pattern.png);
border-top: 1px solid #eaeaea;
padding-bottom: 35px;
border-bottom: 1px solid #eaeaea;
}
.product{
overflow: hidden;
}
.product img{
width: 100%;
display: block;
}
.products-column{
margin: 0px 5px;
}
.product{
margin-bottom: 20px;
position: relative;
}
.product-name{
text-align: center;
background-color: #005DAB;
color: #fff;
padding: 10px 0px;
font-size: 16px;
line-height: 20px; 
}
.product-name.short-included{  }
.product-details{
position: absolute;
width: 100%;
bottom: 0px;
}
.product-short-desc{
background-color: #055190;
opacity: 0;
padding: 10px 20px;
color: #fff;
display: none;
-webkit-transition: opacity 0.2s, -webkit-transform 0.35s;
transition: opacity 0.2s, transform 0.35s;
-webkit-transform: translate3d(0,40px,0);
transform: translate3d(0,40px,0);
}
.product:hover .product-short-desc, 
.product:hover .product-name.short-included{
display: block;
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
-webkit-transition-duration: 0.35s;
transition-duration: 0.35s;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
opacity: 1;
}
.products-slider .product-nav{
position: absolute;
font-size: 110px;
color: #005dab;
top: 115px;
}
.products-slider .product-prev {
left: -100px;
cursor: pointer;
}
.products-slider .product-next {
right: -100px;
cursor: pointer;
}
.patterned h3 {
text-align: center;
margin: 40px 0px 20px;	
}
.patterned h3 a{
text-decoration: none;
}
.patterned img {
width: auto;
height: 100%;
margin: auto;
}
.product-image {
height: 160px;
width: 100%;
overflow: hidden;
background-color: #fff;
padding-bottom: 45px;
}
.product-image.slider{
margin-bottom: 0px;
}
.product-list img{
width: 100%;
height: auto;
}
.cat-product{
margin-bottom: 20px;
}
.cat-product h3,.patterned .sidebar h3 {
text-align: left;
margin: 0px 0px 20px;	
}
.cat-product  .product-button{
text-align: center;
background-color: #D0D0D0;
}
.cat-product .product-button a {
display: block;
padding: 10px;
text-decoration: none;
color: inherit; }
.product-view, .sidebar{
margin-top: 20px;
}
.product-description ul{
list-style: none;
margin-left: 20px;
}
.product-description li:before{
font: normal 14px/1 FontAwesome;
content: "\f14a";
margin: 0 5px 0 -20px;
}
.product-view .product-image img{
width: 100%;
}
.product-view .pdf-download{
background-color: #D1D1D1;
margin-bottom: 10px;
}
.product-view .pdf-download i{
font-size: 16px;
padding-right: 5px;
}
.product-view .pdf-download a{
color: inherit;
padding: 10px;
display: block;
text-decoration: none;
}
.product-view .pdf-download:hover{
background-color: #B7B7B7;
}
.product-download-section{
margin-top: 20px;
}
.supplier-logo {
text-align: center;
}
.sidebar-products-list i{
margin-right: 10px;
}
.sidebar-products-list ul{
list-style: none;
margin-bottom: 0px;
}
.sidebar-products-list li{
margin-bottom: 5px;
}
.sidebar-products-list h3{
font-weight: 600;
color: #fff;
margin-bottom: 10px;
}
.sidebar{
padding: 20px 25px;
color: #fff;
background-color: #6F6F6F;
background-image: url(//www.fluidcontrols.co.uk/wp-content/themes/fluidcontrols/images/assets/sidebar-bg.png);
}
.sidebar a{
color: #fff;
text-decoration: none;
}
.sidebar #search-2 label{
display: inline-block;
}
.question{
margin-top: 25px; padding: 25px;
}
.footer-question{
background-image: url(//www.fluidcontrols.co.uk/wp-content/themes/fluidcontrols/images/assets/sidebar-bg.png);
}
.question h3, .sidebar h3{
color: #fff;
font-weight: 600;
}
.question .question-details{
color: #fff;
}
.question .question-input{
padding: 20px 0px;
}
.question input, .sidebar #search-2 input{
width: 100%;
border-radius: 0px;
background-color: #919191;
border:	none;
}
.question input:last-child{
margin-bottom: 0px;
color: #fff;
}
.question .wpcf7 p{
margin-bottom: 15px;
}
.question .wpcf7-form{
margin-bottom: 0px;
}
.question textarea{
width: 100%;
margin-bottom: 0px;
height: 143px;
border-radius: 0px;
color: #fff;
background-color: #919191;
border: none;
}
.question .question-textarea, .question .question-submit{
padding-top: 20px;
}
.question input[type="submit"], .sidebar #search-2 input[type="submit"]{
width: 100%;
margin-bottom: 0px;
padding: 0px;
background-color: #363636;
color: #fff;
border: none;
border-radius: 0px;
}
.sidebar .question{
padding: 0px;
margin-top: 0px;
}
.sidebar .question-input, .sidebar .question-details{
padding: 0px;
}
.sidebar .question .question-submit input{
height: 38px;
}
.question ::-webkit-input-placeholder {
color: #fff;
}
.question :-moz-placeholder { color: #fff;  
}
.question ::-moz-placeholder { color: #fff;  
}
.question :-ms-input-placeholder {  
color: #fff;  
}
.enquirey-title{
width: 100px;
float: left;
}
.wpcf7 input {
margin-bottom: 0px;
}
.wpcf7 .wpcf7-text{
height: 30px;
}
.footer-question h3 {
position: absolute;
}
.footer-question .textwidget > p {
width: 23%;
padding-top: 40px;
display: block;
float: left;
margin-right: 15px;
color: #fff;
}
.footer-question .wpcf7 {
width: 75%;
display: inline-block;
height: 160px;
}
.footer-question .question-input {
display: inline-block;
width: 32%;
margin-right: 20px;
vertical-align: top;
padding: 0px 0px 20px;
}
.footer-question .wpcf7-form div + p {
width: 55%;
display: inline-block;
margin-bottom: 0px;
}
.footer-question input[type="submit"] {
margin-left: 10px;
height: 143px;
}
.footer-question .wpcf7-form p + p {
display: inline-block;
vertical-align: top;
}
.question-input input {
height: 38px !important;
}
.search-page .page-title{
margin-top: 15px;
}
.news-block{
margin-bottom: 20px;
}
.news-block h3 {
margin: 40px 0px 20px;	
}
.news-block a{
text-decoration: none;
}
.news-block .news-title {
display: block;
font-size: 18px;
text-decoration: none;
}
.news-block a.readmore{
display: block;
}
.footer{
background-color: #353535;
color: #fff;
padding: 10px 0px;
border-top: 25px solid #d2d2d2;
}
.footer h3{
color: #FFF;
font-weight: normal;
}
.footer ul{
list-style: none;
}
.footer ul li{
margin-bottom: 0px;
}
.footer .popular-products a{
color: #fff;
text-decoration: none;
}
.footer a{
color: inherit;
}
.footer ul.tweets li{
margin-bottom: 10px;
}
.tweets a {
color: #73BDFB;
}  @media(max-width: 1400px){
.products-slider .product-prev{
left: -50px;
}
.products-slider .product-next{
right: -50px;
}
}
@media only screen and (max-width: 1230px )and(min-width: 1200px){
.wrap {
width: 1130px;
}
}
@media only screen and (max-width: 1200px){
.menu-header .menu li a{
padding: 13px 0px;
}
.menu-header .menu li {
width: 15.9%;
}
.product-image{
height: 130px;
}
}
@media only screen and (max-width: 1064px){
.main-header .logo, .main-header .logo img{
width: 100%;
}
.main-header .telephone a{
font-size: 18px;
}
.menu-header .menu li a{
font-size: 12px;
}
.menu-header .menu li{
width: 12.9%;
}
.product-image{
height: 102px;
}
.mobile-trigger{
background: green;
}
.product-name.short-included {
-webkit-transform: translate3d(0,80px,0);
transform: translate3d(0,80px,0);
}
.page-template-page-products .product-name.short-included {
-webkit-transform: translate3d(0,180px,0);
transform: translate3d(0,180px,0);
}
} @media only screen and (max-width: 959px) {
.menu-header .menu li {
width: 15.9%;
}
} @media only screen and (min-width: 768px) and (max-width: 959px) {
} @media only screen and (max-width: 767px) {
.top-header .span6{
width: 50%;
float: left;
margin: 0px;
}
.main-header .span4{
margin-top: 0px;
}
.main-header .span4.header-logo, .main-header .span4.telephone{
float: left;
width: 50%;
}
.main-header .span4.telephone{
margin-top: 30px;
margin-bottom: 0px;
}
.main-header .span4.search{
float: left;
width: 100%;
}
.main-header .search form{
margin: 0px;
}
.main-header .search input[type="text"]{
width: 100%;
margin: 0px;
}
.main-header .logo{
margin: 0px;
text-align: center;
padding-top: 20px;
}
.main-header .logo, .main-header .logo img{
width: 100%;
}
.mobile-menu-button{
display: block;
}
.menu-header .main-menu{
display: none;
border-top: 2px solid #4C4949;
}
.menu-header .menu li{
width: 100%;
}
.product-name-wrap{
display: none;
}
.product-name.short-included {
-webkit-transform: translate3d(0,60px,0);
transform: translate3d(0,60px,0);
}
} @media only screen and (min-width: 480px) and (max-width: 767px) {
} @media only screen and (max-width: 479px) {
.top-header .span6{
width: 100%;
float: none;
margin: 0px;
text-align: center;
}
.top-header .span6.follow-us{
margin-top: 10px;
}
.main-header .span4.header-logo, .main-header .span4.telephone{
float: none;
width: 100%;
}
.main-header .span4.telephone{
margin:10px 0px;
}
.main-header .telephone a{
text-align: center;
}
.main-header .logo, .main-header .logo img{
width: auto;
}
.header-slider{
display: none;
}
}
@media only screen and (max-width: 330px) {
.header-slider{
display: none;
}
}