/* ==========================================================================
MASTER NAV
==========================================================================*/

#logo {
display: block;
height: 107px;
width: 262px;
background: url("../../images/JohnsonOil-Logo.svg") no-repeat;
background-size: 262px;
position: absolute;
z-index: 999;
cursor: pointer;
margin: -70px 0 0 20px;
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
-ms-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out;
}

/* when rollover nav item */
#link_logo_home,
#link_logo_home {
background-image:none;
}

/* basic setup */
nav {
display: block;
height: 146px;
font-size: 1em;
margin: auto;
background: #fff;
font-family: "OpenSansLight", sans-serif;
border-bottom: 1px solid #dedede;
}

nav.fixed {
position: fixed;
z-index: 10;
/* opacity: 0.95; */
opacity: 1;
}

/* nav shadows */
.shadow {
-moz-box-shadow: 0px 1px 15px rgba(100, 100, 100, 0.3);
-webkit-box-shadow: 0px 1px 15px rgba(100, 100, 100, 0.3);
box-shadow: 0px 10px 15px rgba(100, 100, 100, 0.3);
}

nav.fixed,
nav.fixed div {
height: 50px;
}

nav div {
max-width: 1400px;
height: 123px;
margin: auto;
position: relative;
}

nav.fixed{
background: #fff;
height:146px;
}




/* ==========================================================================
Top Navigation - Phone Numbers
========================================================================== */
#topnav {
z-index: 5;
top: 10px;
height: 20px;
margin: 0 auto;
max-width: 1380px;
/* border:  1px solid #ff0000; */
}

#topnav #content {
margin: 0 auto;
text-align: right;
float: right;
width: 1100px;
height: 20px;
right: 10px;
/* border:  1px solid #58bd14; */
}

#topnav ul li.topNavUL a {
text-decoration: none;
line-height: 0px;
padding: 0 0px;
margin:0;
color: #777;
-webkit-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
-ms-transition: all .1s ease-out;
-o-transition: all .1s ease-out;
transition: all .1s ease-out;
}

#topnav li {
color: #4e4d4c;
display: inline-block;
right: 100px;
font-family: "OpenSansLight", sans-serif;
margin-left: 50px;
}

#topnav li.number,
#topnav li.emergency {
color: #000;
font-family: "OpenSansLight", sans-serif;
font-size: .9em;
line-height: 1em;
margin-left: 15px;
}

#topnav li.number b,
#topnav li.emergency b {
font-family: "latoblack", sans-serif;
}

#topnav li.number a:link,
#topnav li.number a:active,
#topnav li.number a:visited {
color: #4d4d4f;
margin-top:0;
font-weight: regular;
text-decoration: none;
}

#topnav li.number a:hover {
color: #0582c0;
text-decoration: none;
}


#topnav li.emergency a:link,
#topnav li.emergency a:active,
#topnav li.emergency a:visited {
color: #0582c0;
margin-top:0;
font-weight: regular;
text-decoration: none;
}

#topnav li.emergency a:hover {
color: #4d4d4f;
text-decoration: none;
}

@media only screen and (max-width: 74em) {
#topnav {
display:none;
}
}





/* ==========================================================================
Button Panel For Mobile
========================================================================== */
.buttonpanel {
display: none;
}


@media only screen and (max-width: 74em) {
.buttonpanel {
display: inline-block;
width: 100%;
clear: both;
margin: 0;
padding: 0;
margin-top: 90px;
}

.buttonlink {
float: left;
width: 25%;
margin: 0;
padding: 0;
height: 70px;
/* background: #ce8888; */
-webkit-transition: 0.25s;
-moz-transition: 0.25s;
-o-transition: 0.25s;
transition: 0.25s;
cursor: pointer;
}

.buttonlink p {
font-size: 1.1em;
line-height: .5em;
text-align: center;
color: #58585b;
margin-bottom: .5em;
cursor: pointer;
display: inline-block;
margin: 0 auto;
}

.buttonlink .content {
position: relative;
top: 50%;
transform: translateY(-50%);
margin: 0 auto;
text-align: center;
color: #000;
}

.buttonlink:hover {
display: inline-block;
width: 25%;
margin: 0;
padding: 0;
height: 70px;
background: #f9f9f9;
}

.buttonlink:hover p {
color: #00833e;
}
}


@media only screen and (max-width: 50em) {
.buttonlink {
display: inline-block;
width: 50%;
margin: 0;
padding: 0;
height: 100px;
-webkit-transition: 0.25s;
-moz-transition: 0.25s;
-o-transition: 0.25s;
transition: 0.25s;
}

.buttonlink p {
font-size: 1.1em;
line-height: .5em;
text-align: center;
color: #58585b;
margin-bottom: .5em;
cursor: pointer;
display: block;
}

.buttonlink:hover {
display: inline-block;
width: 50%;
margin: 0;
padding: 0;
height: 100px;
background: #f9f9f9;
cursor: pointer;
}
}


/* ==========================================================================
Dropdown Navigation
========================================================================== */

/* the main nav ul setup */
.primary-nav ul {
text-align: right;
z-index: 99999;
/* border: 1px solid#ffcc00; */
}

/* control just the main ul nav */
.primary-nav ul.main {
margin-top: 70px;
}

/* the main nav li links setup */
.primary-nav ul li {
font-size: 1.1em;
font-family: "OpenSansLight", sans-serif;
cursor: pointer;
-webkit-transition: padding .05s linear;
-moz-transition: padding .05s linear;
-ms-transition: padding .05s linear;
-o-transition: padding .05s linear;
transition: padding .05s linear;
}

/* the class when there is a dropdown */
.primary-nav ul li.drop {
position: relative;
}

.primary-nav ul > li {
display: inline-block;
}

/* Controls the main nav link items */
.primary-nav ul li a {
text-decoration: none;
line-height: 50px;
padding: 0 20px 17px 20px;
height: 50px;
color: #594a42;
-webkit-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
-ms-transition: all .1s ease-out;
-o-transition: all .1s ease-out;
transition: all .1s ease-out;
cursor: pointer;
}

.primary-nav ul li a:hover {
color: #eee;
}



/* the triangle on the dropdown */
.dropOut .triangle {
width: 0;
height: 0;
position: absolute;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid #00833e;
top: -7px;
left: 50%;
margin-left: -8px;
}

/* the dropdown container */
.dropdownContain {
width: 260px;
position: absolute;
z-index: 2;
left: 50%;
margin-left: -130px; /* half of width to center it */
top: -800px;
}

/* controls the drop down part */
.dropOut {
width: 260px;
background: #00833e;
/* border: 1px solid #dedede; */
float: left;
position: relative;
margin-top: 0px;
opacity: 0;
content: "";
display: table;
clear: both;
/* end modern clearfix */
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
-ms-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out;
/* box-shadow: 1px 1px 10px #000; */
}

.dropOut ul {
float: left;
padding: 10px 0;
}

/* controls the link state of the dropdown */
.dropOut ul li {
text-align: left;
float: left;
width: 200px;
padding: 0px 15px 0px 0px;
margin: 0px 10px;
color: #fff;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-transition: background .2s ease-out;
-moz-transition: background .2s ease-out;
-ms-transition: background .2s ease-out;
-o-transition: background .2s ease-out;
transition: background .2s ease-out;
}

.primary-nav ul li .dropOut ul li a {
font-size: .8em;
text-align: left;
float: left;
width: 240px;
height: 50px;
padding: 0 0 0 15px;
margin:0;
color: #fff;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-transition: background .2s ease-out;
-moz-transition: background .2s ease-out;
-ms-transition: background .2s ease-out;
-o-transition: background .2s ease-out;
transition: background .2s ease-out;
cursor: pointer;
}

/* controls the hover state of the dropdown */
.primary-nav ul li .dropOut ul li:hover a {
background: #fff;
color:#00833e;
width: 240px;
height: 50px;
padding: 0 0 0 15px;
margin:0;
cursor: pointer;
}

/* Main Navigation Over Color */
.primary-nav ul li:hover a { color: #ada09a;height: 200px; }


/* Main Navigation Active Color - goes on href */
.primary-nav ul a#active {
cursor: pointer;
background-image:url("../../images/nav-indicator-arrow.svg");
background-position: 50% 31px;
background-repeat: no-repeat;
color: #007294;
text-decoration: none;
}

/* controls the dropdown itself */
.primary-nav ul li:hover .dropdownContain {
top: 45px;
}

.primary-nav ul li:hover .dropOut {
opacity: 1;
margin-top: 8px;
}

/* END Drop Down Setup ==========================================================================*/





/* hide mobile nav --------------------------------------------------------- */
#to-nav,
.mobile-nav {
display: none;
}




/* ==========================================================================
In-Between Phone & Tablet
========================================================================== */
@media only screen and (max-width: 74em) {

#logo {
display: block;
height: 70px;
width: 170px;
background: url("../../images/JohnsonOil-Logo-Sm.svg") no-repeat;
background-size: 170px;
position: absolute;
z-index: 999;
cursor: pointer;
margin: 5px 0 0 20px;
}

nav div { width:100%; }
nav.inworks, nav.inworks div { height:80px; }
.primary-nav { display:none; }
nav.fixed {position: fixed;z-index: 10;opacity: 0.95;}

/* Start Navigation Hamburger Icon */
#hamburger {margin: 0 20px 0 0;width: 35px;height: 35px;float: right;margin-top:30px;-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);-webkit-transition: .5s ease-in-out;-moz-transition: .5s ease-in-out;-o-transition: .5s ease-in-out;transition: .5s ease-in-out;cursor: pointer;}
#hamburger span {display: block;position: absolute;height: 3px;width: 100%;background: #ccc;border-radius: 8px;opacity: 1;left: 0;-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);-webkit-transition: .25s ease-in-out;-moz-transition: .25s ease-in-out;-o-transition: .25s ease-in-out;transition: .25s ease-in-out;}
#hamburger span:nth-child(1) {top: 0px;}
#hamburger span:nth-child(2),#hamburger span:nth-child(3) {top: 10px;}
#hamburger span:nth-child(4) {top: 20px;}
#hamburger.open span:nth-child(1) {top: 0;width: 0%;left: 50%;}
#hamburger.open span:nth-child(2) {-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);background:#ff0000;}
#hamburger.open span:nth-child(3) {-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);background:#ff0000;}
#hamburger.open span:nth-child(4) {top: 0;width: 0%;left: 50%;}
/* End Navigation Hamburger Icon */

.mobile-nav { width:100%; background:#fff; color:#FFF; padding:10px 0 0 0; }
.mobile-nav div { width:100%; margin:0 auto; }
.nav-hide { display:none; }
.nav-show { display:table; }
nav .mobile-nav a { float:left; width:100%; font-family: "OpenSansLight", sans-serif; margin-top:0px; border-right:none; color:#000; text-shadow: none;text-decoration:none; text-align: center; padding: 20px 0 20px 0;border-bottom: 1px solid #ddd; }
nav .mobile-nav a:last-child {border-bottom: none;}
nav .mobile-nav .home { margin-left:0; }
nav #build {padding-left: 0px;}
nav .mobile-nav a .title { margin-left:0;margin-bottom: 0; }
nav .mobile-nav a:hover,
nav .mobile-nav a.active{ color: #0582c0;background-image:none; background-position: 0 0; background-repeat: no-repeat; }
nav .mobile-nav a#active{ color: #0582c0;background-image:none; background-position: 0 0; background-repeat: no-repeat; }

nav #home {margin-left: 0px;}
ul.main {margin-top: 0px;}
/* change color of background for phone numbers */
nav .mobile-nav a.emergency { background-color: #00833e;color:#fff;cursor: pointer; }
nav .mobile-nav a:hover.emergency { background-color: #9fafa1;color:#000;cursor: pointer; }
nav .mobile-nav a.background { background-color: #f1f1f1;cursor: pointer; }
}/* end media query */

@media only screen and (max-width: 35em) {
/* hide phone numbers on small screens */
nav .mobile-nav a.background { display:none; }
}/* end phone media query */