/* ––––––––––––––––––––––––––––––––––––––––––––––––––
megamenu.js STYLE STARTS HERE
–––––––––––––––––––––––––––––––––––––––––––––––––– */

#upper_nav ul {
top:0;
right:0;
position:absolute;
text-align: right;
/*padding-right: 30px;*/
width:70%;
font-size: 0;
margin:0 auto!important;
padding:0!important;
list-style:none;
}

#upper_nav li{
		display: inline-block;
		vertical-align:top;
		padding:0!important;
		margin:0!important;
}	
#upper_nav li a{
	color: #FFF !important;
	display:block!important;
	text-decoration:none!important;
	/*padding: 30px 0 30px;*/
	font-size: 15px;
	width:150px;
	text-align:center;
	font-weight: 300;
	padding:0;
	margin:0 0 0!important;
	list-style-type: none;
}
	
#upper_nav li a:hover{
		text-decoration:none!important;}

#upper_nav li.cart a{
  padding:20px 0 20px;margin:0;
  background:rgba(255,255,255,.2);
}
#upper_nav li.cart a:hover{
  background: rgba(255,255,255,.4);
}

#upper_nav li.contact a{
  padding: 30px 0 30px;
	margin:0;
  background:#192f60;
}
#upper_nav li.contact a:hover{
  background: rgba(255,255,255,.4);
}

#upper_nav li a:after {
font-size:10px;letter-spacing:1px;
color:rgba(255,255,255,0.5); }

#upper_nav li.cart a:after {
    content: 'CART';
    display: block;
}
	
#upper_nav li.contact a:after {
    content: 'CONTACT';
    display: block;
}
@media only screen and (max-width:959px) {
.logo-area img { width:70%;}	
#upper_nav li a { width:120px;}
#upper_nav li.contact a{
  padding: 20px 0 20px;}
#upper_nav li.cart { display:none;}
}

.menu-container {
    width: 100%;
    margin: 0 auto;
    /*background: #e9e9e9;*/
}

a.menu-mobile { text-decoration:none;}
.menu-mobile {
    display: none;
    padding: 22px 20px 19px;
}

.menu-mobile:after {
    content: "\f394";
    font-family: "Ionicons";
    font-size:2.1rem;
    padding: 0;
    float: right;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-25%);
    -ms-transform: translateY(-25%);
    transform: translateY(-25%);
}

.menu-dropdown-icon:before {
    content: "\f489";
    font-family: "Ionicons";
    display: none;
    cursor: pointer;
    float: right;
    padding: 1.52em 2em;
    background: #192f60;
    color: #fff;
}

.menu {
	margin: 0 auto 10px;
	width:70%;
}

.menu > ul {
    margin: 0 auto;
    width: 100%;
    list-style: none;
    padding: 0;
    position: relative;
    /* IF .menu position=relative -> ul = container width, ELSE ul = 100% width */
    box-sizing: border-box;
}

@media only screen and (max-width: 1300px) {
.menu {width:80%;}
.logo-area {width:80%;}
}

@media only screen and (max-width: 1200px) {
.menu {width:90%;}
.logo-area {width:80%;}
}

@media only screen and (max-width: 1100px) {
.menu { width:98%;}
.logo-area {width:80%;}
}

@media only screen and (max-width: 1020px) {
.menu { width:100%;}
.logo-area {width:90%;}
}

@media only screen and (max-width: 959px) {
.menu { width:100%;}
.logo-area {width:90%;margin: 10px auto 10px;}
.logo-area img {width:195px;}
}

.menu > ul:before,
.menu > ul:after {
    content: "";
    display: table;
}

.menu > ul:after {
    clear: both;
}

.menu > ul > li {
    float: left;
    /*background: #e9e9e9;*/
    background:rgba(255,255,255,0.0);
    padding: 0;
    margin: 0;
    /*width:12.5%;*/
    width: calc(100% / 6);
}

.menu > ul > li span {
font-size:10px;letter-spacing:1px;
color:rgba(255,255,255,0.6);
display:block;
}

@media only screen and (max-width: 959px) {
.menu > ul > li span {
display:none;
}
}
.menu > ul > li a {
    text-decoration: none;
    padding: 1.5em 0;
	text-align:center;
    display: block;
	color:#fff;
	font-size:15px;
}

.menu > ul > li:hover {
    /*background: #f0f0f0;*/
	background:rgba(255,255,255,0.2);
}

.menu > ul > li > ul {
    display: none;
    width: 100%;
    /*background:rgba(25,47,96,0.9);*/
	background:rgba(25,47,96,0.9);
    padding: 20px;
    position: absolute;
    z-index: 99;
    left: 0;
    margin: 0;
    list-style: none;
    box-sizing: border-box;
}

.menu > ul > li > ul:before,
.menu > ul > li > ul:after {
    content: "";
    display: table;
}

.menu > ul > li > ul:after {
    clear: both;
}

.menu > ul > li> ul > li:hover {
  background:rgba(255,255,255,0.3); 
}

.menu > ul > li> ul > li { 
padding-left:15px; }

.menu > ul > li.com > ul > li {
    margin: 0;
    padding-bottom: 0;
    list-style: none;
    /*width: 25%;*/
	width: 22%;
    margin-right: 3%;
    background: none;
    float: left;
}

.menu > ul > li.com > ul > li a {
color:#192f60;
}

.menu > ul > li.tech > ul > li {
    margin: 0;
    padding-bottom: 0;
    list-style: none;
    /*width: 25%;*/
	width: 30%;
    margin-right: 3%;
    background: none;
    float: left;
}

.menu > ul > li.tech > ul > li a {
color:#192f60;
}
.menu > ul > li > ul > li a {
    color: #fff;
    padding: .2em 0;
    width: 95%;
    display: block;
	text-align:left;
    border-bottom: 1px solid #ccc;
}

.menu > ul > li > ul > li > ul {
    display: block;
    padding: 0;
    margin: 10px 0 0;
    list-style: none;
    box-sizing: border-box;
}

.menu > ul > li > ul > li > ul:before,
.menu > ul > li > ul > li > ul:after {
    content: "";
    display: table;
}

.menu > ul > li > ul > li > ul:after {
    clear: both;
}

.menu > ul > li > ul > li > ul > li {
    float: left;
    width: 100%;
    padding: 10px 0;
    margin: 0;
    /*font-size: .8em;*/
}

.menu > ul > li > ul > li > ul > li a {
    border: 0;
}

.menu > ul > li > ul.normal-sub {
    width: 300px;
    left: auto;
    padding: 10px 20px;
}

.menu > ul > li > ul.normal-sub > li {
    width: 100%;
}

.menu > ul > li > ul.normal-sub > li a {
    border: 0;
    padding: 1em 0;
}



/* Mobile style's */

@media only screen and (max-width: 959px) {
    .menu-container {
        width: 100%;
        /* background: #f0f0f0; */
        background:rgba(255,255,255,0.8);
        /* box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; */
    }
    .menu-mobile {
        display: block;
    }
    .menu-dropdown-icon:before {
        display: block;
    }
    .menu > ul {
        display: none;
        position: absolute;
		background: rgba(255, 255, 255, 0.9);
        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;

    }
    .menu > ul > li {
        width: 100%;
        float: none;
        display: block;
    }
    .menu > ul > li a {
        padding: 1.5em;
        width: 100%;
		text-align:left;
        display: block;
		color:#003;
    }
    .menu > ul > li > ul {
        position: relative;
		background:rgba(25,47,96,0.9);
		padding: 20px 20px 20px 10px;
    }
	
	.menu > ul > li:hover {
    background: #f0f0f0;
	/*background:rgba(255,255,255,0.8);*/
}
	
    .menu > ul > li > ul.normal-sub {
        width: 100%;
    }

    .menu > ul > li.com > ul > li {
        float: none;
        width: 100%;
        margin-top: 20px;
    }
	.menu > ul > li.tech > ul > li {
        float: none;
        width: 100%;
        margin-top: 20px;
    }
	
    .menu > ul > li > ul.normal-sub > li {
        float: none;
        width: 100%;
        margin-top: 0px;
    }	
    .menu > ul > li > ul > li:first-child {
        margin: 0;
    }
    .menu > ul > li > ul > li > ul {
        position: relative;
    }
    .menu > ul > li > ul > li > ul > li {
        float: none;
    }
    .menu .show-on-mobile {
        display: block;
        z-index: 999;
    }
}

.company-menu { 
	background:url(../img/menu-company-back.jpg) no-repeat!important;
	color:rgba(255,255,255,1.0);
	font-size:24px;
	padding:20px 0 0 30px;
	line-height:1.5;
	height:180px;
}
.strength-menu { 
	background:url(../img/menu-tech-back.jpg) no-repeat!important;
	color:rgba(255,255,255,1.0);
	font-size:24px;
	padding:20px 0 0 30px;
	line-height:1.5;
	height:180px;
	margin-left:30px;
}
.works-menu { 
	background:url(../img/menu-works-back.jpg) no-repeat!important;
	color:rgba(255,255,255,1.0);
	font-size:24px;
	padding:20px 0 0 30px;
	line-height:1.5;
	height:250px;
}
.company-menu span,
.strength-menu span,
.works-menu span
 { color:rgba(255,255,255,0.8);font-size:12px;display:block;text-indent:1em;letter-spacing:1px; }

@media only screen and (max-width: 748px) {
.company-menu { 
	background:none!important;
	font-size:18px;
	padding:0 0 0 0;
	line-height:1.5;
	color:#fff;
	height:auto!important;
}
.strength-menu { 
	background:none!important;
	font-size:18px;
	padding:0 0 0 0;
	line-height:1.5;
	color:#fff;
	height:auto!important;
}
.works-menu { 
	display:none;
}
.company-menu span,
.strength-menu span,
.works-menu span { color:#888;display: inline-block!important;}
}



.menu-sub { position:relative;height:50px;}
.menu-sub { 
	background:rgba(255,255,255,1.0);/*width:90%!important;*/
	padding-left:10px!important;
	margin-bottom:15px!important;
}
.menu-sub:hover { 
	background:rgba(255,255,255,0.8);
}

.menu-sub::after {
    content: ' ';
    position: absolute;
    top:20px;
    right:15px;
    display: block;
    width:6px;
    height:6px;
    border: 0px;
    border-top: solid 1px #003;
    border-right: solid 1px #003;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}


.works-sub { position:relative;height:70px;}
.works-sub { 
	background:rgba(255,255,255,1.0);/*width:90%!important;*/
	padding-left:85px!important;
	line-height:3;
	margin-bottom:20px!important;
	overflow: hidden;
}
.works-sub:hover { 
	display:block;
	background:rgba(255,255,255,0.9);
}
.works-sub::after {
    content: ' ';
    position: absolute;
    top:30px;
    right:15px;
    display: block;
    width:6px;
    height:6px;
    border: 0px;
    border-top: solid 1px #003;
    border-right: solid 1px #003;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

.works-sub::before {
    content: ' ';
    position: absolute;
    top:0;
    left:0px;
width: 70px;
    height: 70px;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;filter: grayscale(0);
    transition: all .3s ease-out;
}

.works-sub.goku::before {
background:url(../img/goku-menu.jpg) no-repeat!important;
}
.works-sub.itabane::before {
background:url(../img/itabane-menu.jpg) no-repeat!important;
}
.works-sub.cone::before {
background:url(../img/cone-menu.jpg) no-repeat!important;
}
.works-sub.frame::before {
background:url(../img/frame-menu.jpg) no-repeat!important;
}
.works-sub.busbar::before {
background:url(../img/busbar-menu.jpg) no-repeat!important;
}
.works-sub.laser::before {
background:url(../img/laser-menu.jpg) no-repeat!important;
}
.works-sub.press::before {
background:url(../img/press-menu.jpg) no-repeat!important;
}
.works-sub.mage::before {
background:url(../img/mage-menu.jpg) no-repeat!important;
}

.works-sub:hover::before {
filter: grayscale(100%);
left:-6px;
    -moz-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}



@media only screen and (max-width:767px) {
#upper_nav li.contact a{
padding: 20px 0 18px;
margin:0;
background:#192f60;
}
}