/**
* Meterlube CSS
*/

/***************************************************************************************
* BODY ELEMENTS
***************************************************************************************/

body {background:#222222; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-weight:400}
div {}
hr {}
img {}
a {}

/***************************************************************************************
* HEADINGS
***************************************************************************************/

/* All Headings */
h1, h2, h3, h4, h5, h6 {font-weight:900; font-family: 'Open Sans Condensed', Arial, Helvetica, sans-serif; color:#0097BF}

/* Individual Headings */
h1 {}
h2 {}
h3 {}
h4 {}
h5 {}
h6 {}

/***************************************************************************************
* PARAGRAPHS
***************************************************************************************/

/* First Paragraph */
p {}

/* Seccond Paragraph */
abbr {}
b {}

/* Blockquote */
blockquote {}
cite {}

/* Third Paragraph */
dfn {}
del {}
em {}
i {}
strong {font-weight:700}
ins {}
small {}

/* Quote */
q {}

/* Fourth Paragraph */
sub {}
sup {}

/***************************************************************************************
* LISTS
***************************************************************************************/

/* All Lists */
dl, ol, ul {}

/* Definition Lists */
dl {}
dt {}
dd {}

/* Ordered Lists */
ol {}
ol li {list-style:inside}

/* Unordered Lists */
ul {}
ul li {list-style:inside}

/***************************************************************************************
* FORMS
***************************************************************************************/

form {}
fieldset {}
legend {}
label {}

/* Inputs */
input {}
textarea {}

/* Other */
select {}
optgroup {}

/***************************************************************************************
* TABLES
***************************************************************************************/

table {}
caption {}
tr {}

/* Head */
thead {}
th {}

/* Body */
tbody {}
td {}

/* Foot */
tfoot {}

/***************************************************************************************
* OTHER
***************************************************************************************/

address {}
code {}
samp {}
pre {}

kbd {}
var {}





/***************************************************************************************
* ELEMENTS
***************************************************************************************/

.bar{background: #24363d; 
background: -moz-linear-gradient(top,  #24363d 0%, #222222 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#24363d), color-stop(100%,#222222)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #24363d 0%,#222222 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #24363d 0%,#222222 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #24363d 0%,#222222 100%); /* IE10+ */
background: linear-gradient(to bottom,  #24363d 0%,#222222 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#24363d', endColorstr='#222222',GradientType=0 ); /* IE6-9 */
min-height:45px;
}
.top-bar{margin-bottom:0!important; background:none}
.top-bar li{font-size:1em; text-transform:uppercase}
.top-bar-section ul{background:none}
.top-bar-section ul .dropdown{background:#222}
.top-bar .title-area{display:none}
#nav li{list-style:none!important}
.top-bar-section li a:not(.button){background:none}
.top-bar-section li a:not(.button):hover{background: #24363d}
.top-bar-section ul li.active > a,.top-bar-section li.active a:not(.button):hover{background: #222}
.top-bar-section .has-dropdown > a:after{margin-right:7px}
.top-bar-section > ul > .divider, .top-bar-section > ul > [role="separator"],.top-bar-section .divider{border:none; border-right:1px solid #C6CCDD!important }
.top-bar-section > ul > .divider, .top-bar-section > ul > [role="separator"]{ border-bottom:1px solid #C6CCDD!important }
#inner .top-bar .title-area{display:block}
#inner .top-bar .title-area img{max-height:40px; margin-top:2px}


#logo{padding:1em 0 0; display:block; position:relative; z-index:98; float:left}

#splash{ height:590px; background: #0097C1; /*background:url(../images/splash-bg.png) no-repeat center bottom #0097C1*/; overflow:hidden; position:relative }
#splash h1{text-align:right; color:#EAF8FF; font-size:2em; font-weight:400; text-shadow:1px 0 0 #1C7DAA; margin:2em 0 0.5em}
#splash h1 strong{font-weight:900}
#splash .container{width:55%; float:right;}
#splash .container .button{width:80%; float:right; border-radius:15px; background:#6AC6DF; padding:0.1em 0.3em; font-size:2em; line-height:1.2; font-family: 'Open Sans Condensed'}
#splash .container .button:hover{background:#FFF; color:#0097C1}

.cogs{display:block}
.cogs li{list-style:none;position:absolute;  }
#splash .cogs li.one{ left:42%; bottom:-21em; max-width:300px}
#splash .cogs li.two{ left:15%; bottom:-21em;}
#splash .cogs li.three{ left:-27%; bottom:-21em;}
#splash .cogs li.four{ left:97%; bottom:-13em;}
#splash .cogs li.five{ left:124%; bottom:-19em; max-width:200px}
#splash .cogs li.six{ left:71.5%; bottom:-16em;}
#splash .cogs li.seven{ left:-3%; bottom:-8em; max-width:300px}



#pipe{position:absolute; left:50%; top:-65px; margin-left:-190px; z-index:3}
#drip{position:absolute; left:50%; top:428px; margin-left:-90.5px; z-index:2}
#pipe-end{width:26px; background:#222; border-radius:0.5em; position:absolute; top:450px; left:50%; height:18px; margin-left:-94px}


#splash.inner{height:190px}
#splash.inner #pipe{top:-420px}
#splash.inner #drip{top:0}

#splash.inner .cogs li.seven{bottom:-8em; left:27%; max-width:150px}
#splash.inner .cogs li.six{ left:40.5%; bottom:-14em;}
#splash.inner .cogs li.four{left:66%}
#splash.inner .cogs li.three{bottom:-19em; left:94%}

.content{background:#FFF; padding:1em 0}
.content.light-blue{background:#E9F8FF}




.vertical-tabs .content{background:url(../images/tabs-bg.jpg) no-repeat top right; overflow:hidden}
.vertical-tabs .content .button{margin:0}

.button.industry-news{margin:1em 0 0}

.news-list{}
.news-list h4{margin-bottom:0}
.news-list .date{color:#FF7F00; font-family: 'Open Sans Condensed'; font-weight:900; font-size:1.2em}

#suppliers{text-align:center; padding:1em 0}


#footer{ padding:2em 0; overflow:hidden; position:relative}
#footer a:hover{text-decoration:underline}
#footer h6{color:#FFF; font-size:2em; margin-bottom:0}
#footer p, #footer li, #footer a{color:#FFF}
#footer .cogs li.one{ left:auto; bottom:-9em; max-width:300px; right:-10%;}

#copyright{font-size:0.9em; margin:2em 0 0}

#map-container{width:100%; height:250px; border-bottom:2px solid #ccc; }
#map-container img{max-width:none}

#news-sidebar li{list-style:none}
#news-sidebar li h4{margin-bottom:0}
#news-sidebar p.category{margin:0}
#news-sidebar p.date{margin:0 0 0.5em; font-size:0.9em;}

.news-article .title{margin-bottom:0}
.news-article .date{margin-top:0}
.date{color:#FF7F00; font-weight:700}

#lumatic{margin:1.5em 0 0}


.vertical-tabs .content p{font-size:0.85em}

@media screen and (max-width: 768px) {
	#logo{display:none}
	.top-bar .title-area{display:block}
	.top-bar .title-area img{max-height:40px; margin-top:2px; margin-left:1em}
	
	.bar{min-height:10px}
	
	#splash{height:auto; background-size:contain}
	#splash .container{width:auto; text-align:center}
	#splash h1{font-size:1.4em; text-align:center; margin:0.7em 1em;}
	#splash .container .button{font-size:1.4em; float:none; width:100%; margin-bottom:2em}
	
	#drip,#pipe{display:none}
	#splash .cogs li{list-style:none;position:absolute; max-width:220px!important; bottom:-8em!important  }
	#splash .cogs li.three, #splash .cogs li.five{max-width:170px!important; bottom:-3em!important}
	#splash .cogs li.three{left:-10%}
	#splash .cogs li.five{left:93%}
	
	#footer{padding-bottom:8em}
	#footer .cogs li.one{left:50%; margin-left:-150px; bottom:-11em}
	#footer .addthis_toolbox a{margin-bottom:1em}
	
	.vertical-tabs .content{background:none}
}




/***************************************************************************************
* CLASSES
***************************************************************************************/
.button{font-weight:400}
.addthis_counter a{color:#111!important}
.pdf{ background:url(../images/pdficon.png) no-repeat; padding-left:3.8em; min-height:68px; display:block; }
.pdf a,a.pdf{color:#222!important;} 
.pdf a:hover,a.pdf:hover{color:#E4424A!important}
.video-container, .media_embed {height: 0;overflow: hidden;padding-bottom: 56.25%;padding-top: 30px;position: relative; margin-bottom:1em}
.video-container iframe, .video-container object, .video-container embed, .media_embed iframe, .media_embed object, .media_embed embed {height: 100%;left: 0;position: absolute;top: 0;width: 100%;}
.hidden{display:none}
.success{background:#32B481; color:#FFF; padding:0.5em; border-radius:0.5em}

/***************************************************************************************
* FOUNDATION OVERWRITES
***************************************************************************************/
.section-container.vertical-tabs > section > .title a, .section-container.vertical-tabs > .section > .title a{color: #FFF; background:#0097BF; font-family: 'Open Sans Condensed'; font-weight:900; font-size:1.2em}
.section-container.vertical-tabs > section > .content{border-left:none}
.section-container.vertical-tabs > section.active > .title, .section-container.vertical-tabs > .section.active > .title{border-right:none}
.section-container.vertical-tabs > section.active, .section-container.vertical-tabs > .section.active{padding-left:17em}
[data-section="vertical-tabs"] > section.active > [data-section-title], [data-section="vertical-tabs"] > section.active > .title, [data-section="vertical-tabs"] > .section.active > [data-section-title], [data-section="vertical-tabs"] > .section.active > .title, [data-section="vertical-tabs"] > .active[data-section-region] > [data-section-title], [data-section="vertical-tabs"] > .active[data-section-region] > .title, .section-container.vertical-tabs > section.active > [data-section-title], .section-container.vertical-tabs > section.active > .title, .section-container.vertical-tabs > .section.active > [data-section-title], .section-container.vertical-tabs > .section.active > .title, .section-container.vertical-tabs > .active[data-section-region] > [data-section-title], .section-container.vertical-tabs > .active[data-section-region] > .title{width:17em}
[data-section="vertical-tabs"] > section > [data-section-title], [data-section="vertical-tabs"] > section > .title, [data-section="vertical-tabs"] > .section > [data-section-title], [data-section="vertical-tabs"] > .section > .title, [data-section="vertical-tabs"] > [data-section-region] > [data-section-title], [data-section="vertical-tabs"] > [data-section-region] > .title, .section-container.vertical-tabs > section > [data-section-title], .section-container.vertical-tabs > section > .title, .section-container.vertical-tabs > .section > [data-section-title], .section-container.vertical-tabs > .section > .title, .section-container.vertical-tabs > [data-section-region] > [data-section-title], .section-container.vertical-tabs > [data-section-region] > .title{width:17em}
.section-container.vertical-tabs > section.active > .title a, .section-container.vertical-tabs > .section.active > .title a{color:#0097BF; background:#FFF}



/***************************************************************************************
* ANIMATIONS
***************************************************************************************/

.drip {
  -moz-animation: drip 2s infinite ease-in;
  -o-animation: drip 2s infinite ease-in;
  -webkit-animation: drip 2s infinite ease-in;
  animation: drip 2s infinite ease-in;
  display: inline-block;
}
.dripinner {
  -moz-animation: dripinner 2s infinite ease-in;
  -o-animation: dripinner 2s infinite ease-in;
  -webkit-animation: dripinner 2s infinite ease-in;
  animation: dripinner 2s infinite ease-in;
  display: inline-block;
}
.spin {
  -moz-animation: spin 15s infinite linear;
  -o-animation: spin 15s infinite linear;
  -webkit-animation: spin 15s infinite linear;
  animation: spin 15s infinite linear;
  display: inline-block;
}
.reverse-spin {
  -moz-animation: reverse-spin 10s infinite linear;
  -o-animation: reverse-spin 10s infinite linear;
  -webkit-animation: reverse-spin 10s infinite linear;
  animation: reverse-spin 10s infinite linear;
  display: inline-block;
}
@-moz-keyframes spin {
  0% {
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -moz-transform: rotate(359deg);
    -o-transform: rotate(359deg);
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@-webkit-keyframes spin {
  0% {
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -moz-transform: rotate(359deg);
    -o-transform: rotate(359deg);
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@-o-keyframes spin {
  0% {
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -moz-transform: rotate(359deg);
    -o-transform: rotate(359deg);
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@-ms-keyframes spin {
  0% {
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -moz-transform: rotate(359deg);
    -o-transform: rotate(359deg);
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@keyframes spin {
  0% {
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -moz-transform: rotate(359deg);
    -o-transform: rotate(359deg);
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}


@-moz-keyframes reverse-spin {
  0% {
    -moz-transform: rotate(359deg);
    -o-transform: rotate(359deg);
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }

  100% {
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
@-webkit-keyframes reverse-spin {
  0% {
    -moz-transform: rotate(359deg);
    -o-transform: rotate(359deg);
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }

  100% {
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
@-o-keyframes reverse-spin {
  0% {
    -moz-transform: rotate(359deg);
    -o-transform: rotate(359deg);
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }

  100% {
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
@-ms-keyframes reverse-spin {
  0% {
    -moz-transform: rotate(359deg);
    -o-transform: rotate(359deg);
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }

  100% {
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
@keyframes reverse-spin {
  0% {
    -moz-transform: rotate(359deg);
    -o-transform: rotate(359deg);
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }

  100% {
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

/** Drip**/

@-moz-keyframes drip {
0% {top:418px;}
70% {top:448px;}
100% {top:590px;}
}
@-webkit-keyframes drip {
0% {top:418px;}
70% {top:448px;}
100% {top:590px;}
}
@-o-keyframes drip {
0% {top:418px;}
70% {top:448px;}
100% {top:590px;}
}
@-ms-keyframes drip {
0% {top:418px;}
70% {top:448px;}
100% {top:590px;}
}
@keyframes drip {
0% {top:418px;}
70% {top:448px;}
100% {top:590px;}
}


@-moz-keyframes dripinner {
0% {top:60px;}
70% {top:80px;}
100% {top:180px;}
}
@-webkit-keyframes dripinner {
0% {top:60px;}
70% {top:80px;}
100% {top:180px;}
}
@-o-keyframes dripinner {
0% {top:60px;}
70% {top:80px;}
100% {top:180px;}
}
@-ms-keyframes dripinner {
0% {top:60px;}
70% {top:80px;}
100% {top:180px;}
}
@keyframes dripinner {
0% {top:60px;}
70% {top:80px;}
100% {top:180px;}
}