/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/drop_examples.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
/* commom style for all browsers */
.menu-container{ background: #038ECD; padding: 6px; width: 100%; z-index:1000;}
.fixed-menu{ position: fixed; top: 70px;}
.container4 { 
text-align:center; border:0px solid #000000; /*border-width:5px 1px 1px 1px;*/ height:30px;
margin:0 0 20px 0; /* for this demo only */
}
.menu4 {
width:970px; font-size:13px; text-transform:uppercase; margin:0 auto; height:28px;
}
.menu4 ul {
margin:0;margin-left:0px;padding:0px;list-style:none; position: relative;
}
.menu4 ul li {
float:left; /*position:relative;*/ padding-left:0px; 
}
/*.menu4 ul li ul a
{
border-left:5px solid #FFFFFF!important;
}
.menu4 ul li ul a:hover
{
border-left:5px solid #FFCC00!important;
}*/
.menu4 ul li a{}
.menu4 ul li a.last{background-image:none;}
.menu4 ul li a, .menu4 ul li a:visited {color: #ffffff; display: block; line-height: 28px; padding: 0 0 0 19px; text-align: center; text-decoration: none; overflow: hidden;}

@media screen and (-webkit-min-device-pixel-ratio:0) {
.menu4 ul li a, .menu4 ul li a:visited{ padding: 0 0 0 18px;}
}

.menu4 ul li a span {position: relative; display: inline-block; -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition: transform 0.3s;}

.menu4 ul li a span::before {position: absolute; top: 100%; content: attr(data-hover); -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); transform: translate3d(0,0,0);}

.menu4 ul li a:hover span,
.menu4 ul li a:focus span {-webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); transform: translateY(-100%); }
/*
* html .menu4 ul li a, .menu4 ul li a:visited {
width:100px; w\idth:70px;
}*/

.menu4 ul li ul {
visibility:hidden; position:absolute; top:0; left:8px !important; height:0; overflow:hidden;
background:none;
 z-index:1000;
}
.menu4 table {
margin:-1px; border-collapse:collapse; font-size:1em;
}

/* fist line style for IE7 and non-IE browsers and the second line for IE5.5 and IE6 */
.menu4 ul li:hover a,
.menu4 ul li a:hover,
.menu4 ul li a.active{color: #EDEB18; text-decoration:none;}
.menu4 ul li:hover ul,
.menu4 ul li a:hover ul {
visibility:visible; width:950px; margin-left:8px; height:auto; position:absolute; top:28px; left:-12px; border:0px solid #000000; overflow:visible;
}
.menu4 ul li:hover ul li a,
.menu4 ul li a:hover ul li a {
display:block; border:0px solid #00FF33; text-align:left; text-decoration:none; color:#333333; height:auto; line-height:1.3em; padding:8px; width:110px; w\idth:190px;opacity:0.8;filter:alpha(opacity=80); text-transform: capitalize;
}
.menu4 ul li:hover ul li a.drop,
.menu4 ul li a:hover ul li a.drop {
display:block; color:#ffffff; height:auto; line-height:1.35em;  padding-top:5px; padding-bottom:5px; width:170px; width:125px;
}
.menu4 ul li:hover ul li ul,
.menu4 ul li a:hover ul li a ul {
visibility:hidden; position:absolute; top:0; left:0; height:0; overflow:hidden;
}
.menu4 ul li:hover ul li a:hover,
.menu4 ul li a:hover ul li a:hover {
color:#333333!important; text-decoration:none;
background:#f1f1f1!important; 
}
.menu4 ul li:hover ul li:hover ul,
.menu4 ul li a:hover ul li a:hover ul {
visibility:visible; position:absolute; top:0; color:#000; left:145px!important; height:auto; border:0px solid #000000;
background:url('images/spacer.gif') !important; width:180px!important;
padding-top:5px!important; z-index:1000!important;
padding-bottom:5px!important
}
.menu4 ul li:hover ul li:hover ul.left,
.menu4 ul li a:hover ul li a:hover ul.left {
left:-166px;
}
.menu4 ul li:hover ul li:hover ul li,
.menu4 ul li a:hover ul li a:hover ul li
{
background: none!important;
}
.menu4 ul li:hover ul li:hover ul li a,
.menu4 ul li a:hover ul li a:hover ul li a {
text-decoration:none!important;
display:block; color:#ffffff!important; height:auto; line-height:1.2em;  padding-top:4px; padding-bottom:7px; width:170px; w\idth:140px;
background-color:#302105;
}
* html .menu4 ul li a:hover ul li a:hover ul li a { padding-top:5px; padding-bottom:5px;}

.menu4 ul li:hover ul li:hover ul li:hover a,
.menu4 ul li a:hover ul li a:hover ul li a:hover {
color:#000000!important; text-decoration:underline;
background:none!important;
text-decoration:none!important;
}

#about-sub{background: url(../images/about-sub-bg.png) no-repeat; width: 930px; padding: 18px 10px 4px; position: relative; display: inline-block; -moz-box-shadow: 0px 2px 0px #000000; /* FF3.5+ */ -webkit-box-shadow: 1px 0px 2px 0px #000000; /* Saf3.0+, Chrome */ box-shadow: 0px 2px 0px #000000; /* Opera 10.5, IE 9.0 */}
#about-sub .box{width: 203px; float: left; margin-left: 10px; }
/*#about-sub .box:first-child{width: 244px; margin-left: 0;}*/

#product-sub{background: url(../images/product-sub-bg.png) no-repeat; width: 930px; padding: 18px 10px 4px; position: relative; display: inline-block; -moz-box-shadow: 0px 2px 0px #000000; /* FF3.5+ */ -webkit-box-shadow: 1px 0px 2px 0px #000000; /* Saf3.0+, Chrome */ box-shadow: 0px 2px 0px #000000; /* Opera 10.5, IE 9.0 */}
#product-sub .box{width: 295px; float: left; margin-right: 10px; }
#product-sub .box a{width: 285px;}
#product-sub .box:last-child{width: 300px; margin-right: 0;}
#product-sub #tab{position: relative; display: inline-block; margin-bottom: 20px;}
#product-sub .tab{font-size: 20px; text-transform: capitalize; display: inline;}
#product-sub .tab a{color: #255265 !important; width: auto; display: inline; padding: 9px 15px 13px;}
#product-sub .tab a:hover, #product-sub .tab a.active{color: #255265; background: url(../images/product-arrow.png) no-repeat center bottom transparent;}



#design-sub{background: url(../images/design-sub-bg.png) no-repeat; width: 930px; padding: 18px 10px 4px; position: relative; display: inline-block; -moz-box-shadow: 0px 2px 0px #000000; /* FF3.5+ */ -webkit-box-shadow: 1px 0px 2px 0px #000000; /* Saf3.0+, Chrome */ box-shadow: 0px 2px 0px #000000; /* Opera 10.5, IE 9.0 */}
#design-sub .box{width: 280px; float: left; margin-right: 10px; }
#design-sub .box a{width: 315px;}
#design-sub .box:last-child{width: 330px; margin-right: 0;}

#web-sub{background: url(../images/development-sub-bg.png) no-repeat; width: 930px; padding: 18px 10px 4px; position: relative; display: inline-block; -moz-box-shadow: 0px 2px 0px #000000; /* FF3.5+ */ -webkit-box-shadow: 1px 0px 2px 0px #000000; /* Saf3.0+, Chrome */ box-shadow: 0px 2px 0px #000000; /* Opera 10.5, IE 9.0 */}
#web-sub .box{width: 325px; float: left; margin-right: 10px; }
#web-sub .box a{width: 315px;}
#web-sub .box:last-child{width: 330px; margin-right: 0;}

#mobile-sub{background: url(../images/mobile-sub-bg.png) no-repeat; width: 930px; padding: 18px 10px 4px; position: relative; display: inline-block; -moz-box-shadow: 0px 2px 0px #000000; /* FF3.5+ */ -webkit-box-shadow: 1px 0px 2px 0px #000000; /* Saf3.0+, Chrome */ box-shadow: 0px 2px 0px #000000; /* Opera 10.5, IE 9.0 */}
#mobile-sub .box{width: 325px; float: left; margin-right: 10px; }
#mobile-sub .box a{width: 315px;}
#mobile-sub .box:last-child{width: 330px; margin-right: 0;}

#seo-sub{background: url(../images/seo-sub-bg.png) no-repeat; width: 930px; padding: 18px 10px 4px; position: relative; display: inline-block; -moz-box-shadow: 0px 2px 0px #000000; /* FF3.5+ */ -webkit-box-shadow: 1px 0px 2px 0px #000000; /* Saf3.0+, Chrome */ box-shadow: 0px 2px 0px #000000; /* Opera 10.5, IE 9.0 */}
#seo-sub .box{width: 325px; float: left; margin-right: 10px; }
#seo-sub .box a{width: 315px;}
#seo-sub .box:last-child{width: 330px; margin-right: 0;}

#seo-sub2{background: url(../images/seo-sub-bg2.png) no-repeat; width: 930px; padding: 18px 10px 4px; position: relative; display: inline-block; -moz-box-shadow: 0px 2px 0px #000000; /* FF3.5+ */ -webkit-box-shadow: 1px 0px 2px 0px #000000; /* Saf3.0+, Chrome */ box-shadow: 0px 2px 0px #000000; /* Opera 10.5, IE 9.0 */}
#seo-sub2 .box{width: 325px; float: left; margin-right: 10px; }
#seo-sub2 .box a{width: 315px;}
#seo-sub2 .box:last-child{width: 330px; margin-right: 0;}

#seo-sub3{background: url(../images/seo-sub-bg3.png) no-repeat; width: 930px; padding: 18px 10px 4px; position: relative; display: inline-block; -moz-box-shadow: 0px 2px 0px #000000; /* FF3.5+ */ -webkit-box-shadow: 1px 0px 2px 0px #000000; /* Saf3.0+, Chrome */ box-shadow: 0px 2px 0px #000000; /* Opera 10.5, IE 9.0 */}
#seo-sub3 .box{width: 325px; float: left; margin-right: 10px; }
#seo-sub3 .box a{width: 315px;}
#seo-sub3 .box:last-child{width: 330px; margin-right: 0;}

#hire-sub{background: url(../images/hire-sub-bg.png) no-repeat; width: 930px; padding: 18px 10px 4px; position: relative; display: inline-block; -moz-box-shadow: 0px 2px 0px #000000; /* FF3.5+ */ -webkit-box-shadow: 1px 0px 2px 0px #000000; /* Saf3.0+, Chrome */ box-shadow: 0px 2px 0px #000000; /* Opera 10.5, IE 9.0 */}
#hire-sub .box{width: 300px; float: left; margin-right: 10px; }
#hire-sub .box a{width: 285px;}
#hire-sub .box:last-child{width: 295px; margin-right: 0;}

#portfolio-sub{background: url(../images/portfolio-sub-bg.png) no-repeat; width: 930px; padding: 18px 10px 4px; position: relative; display: inline-block; -moz-box-shadow: 0px 2px 0px #000000; /* FF3.5+ */ -webkit-box-shadow: 1px 0px 2px 0px #000000; /* Saf3.0+, Chrome */ box-shadow: 0px 2px 0px #000000; /* Opera 10.5, IE 9.0 */}
#portfolio-sub .box{width: 325px; float: left; margin-right: 10px; }
#portfolio-sub .box a{width: 315px;}
#portfolio-sub .box:last-child{width: 330px; margin-right: 0;}

@media only screen and (min-width:960px) and (max-width:1180px) {

}

@media only screen and (min-width: 768px) and (max-width: 959px) {
.menu4{display: none; position: relative; margin: 54px 0 10px -150px;}
}

@media only screen and (min-width: 640px) and (max-width: 767px) {
.menu4{display: none; position: relative; margin: 54px 0 10px 0; left: -180px; width: 620px; font-size: 12px;}
.menu4 ul li a, .menu4 ul li a:visited{padding: 0 14px 0 0;}
.menu4 ul li ul{left: 0 !important;}
.menu4 ul li a.last{padding-right: 0;}
.menu4 ul li:hover ul, .menu4 ul li a:hover ul{width: 620px; margin-left: 0px;}
#about-sub, #web-sub, #mobile-sub, #portfolio-sub, #design-sub, #seo-sub {width: 600px;}
#about-sub .box{width: 168px;}
#design-sub .box{width: 290px;}
#web-sub .box{width: 290px;}
#mobile-sub .box{width: 290px;}
#portfolio-sub .box{width: 290px;}
#seo-sub .box{width: 290px;}
}

@media only screen and (min-width: 480px) and (max-width: 639px) {
.menu4{display: none; position: relative; margin: 54px 0 10px 0; left: -224px; width: 460px; height: auto;}
.menu4 ul li a, .menu4 ul li a:visited{padding: 0; text-align: left;}
.menu4 ul li a.last{padding-right: 0;}
#about-sub, #web-sub, #mobile-sub, #portfolio-sub, #design-sub, #seo-sub{width: 460px; background: none; padding: 0; box-shadow:none;}
#about-sub .box{width: 460px; margin-left: 0;}
#about-sub .box a{width: 444px; margin-left: 0;}
#about-sub .box:first-child{display: none;}
#web-sub .box{width: 460px; margin-right: 0;}
#web-sub .box a{width: 444px; margin-right: 0;}
#mobile-sub .box{width: 460px; margin-right: 0;}
#mobile-sub .box a{width: 444px; margin-right: 0;}
#portfolio-sub .box{width: 460px; margin-right: 0;}
#portfolio-sub .box a{width: 444px; margin-right: 0;}
#design-sub .box{width: 460px; margin-right: 0;}
#design-sub .box a{width: 444px; margin-right: 0;}
#seo-sub .box{width: 460px; margin-right: 0;}
#seo-sub .box a{width: 444px; margin-right: 0;}
.menu4 ul li{float: none;}
.menu4 ul li:hover ul, .menu4 ul li a:hover ul{left: 0; position: relative; margin-left: 0; top: 0; width: 460px;}
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
.menu4{display: none; position: relative; margin: 54px 0 10px 0; left: 0px; width: 300px; height: auto; z-index: 100;}
.menu4 ul li a, .menu4 ul li a:visited{padding: 0; text-align: left;}
.menu4 ul li a.last{padding-right: 0;}
#about-sub, #web-sub, #mobile-sub, #portfolio-sub, #design-sub, #seo-sub{width: 300px; background: none; padding: 0; box-shadow:none;}
#about-sub .box{width: 300px; margin-left: 0;}
#about-sub .box a{width: 284px; margin-left: 0;}
#about-sub .box:first-child{display: none;}
#web-sub .box{width: 300px; margin-right: 0;}
#web-sub .box a{width: 284px; margin-right: 0;}
#mobile-sub .box{width: 300px; margin-right: 0;}
#mobile-sub .box a{width: 284px; margin-right: 0;}
#portfolio-sub .box{width: 300px; margin-right: 0;}
#portfolio-sub .box a{width: 284px; margin-right: 0;}
#design-sub .box{width: 300px; margin-right: 0;}
#design-sub .box a{width: 284px; margin-right: 0;}
#seo-sub .box{width: 300px; margin-right: 0;}
#seo-sub .box a{width: 284px; margin-right: 0;}
.menu4 ul li{float: none;}
.menu4 ul li:hover ul, .menu4 ul li a:hover ul{left: 0; position: relative; margin-left: 0; top: 0; width: 300px;}
}