.megamenu{margin-bottom:0px;padding:0;width:100%;list-style:none;display:inline-block;position:relative;font-size:15px} .megamenu li{margin-bottom:-5px;display:inline} .megamenu>li>a{float:left;padding:6px 16px;text-decoration:none;text-transform:capitalize;font-size:1em; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .megamenu>li.active>a{color:#00405d;} .megamenu>li.right{float:right} .megamenu .dropdown,.megamenu .dropdown li .dropdown{list-style:none;margin:0;padding:0;display:none;position:absolute;z-index:999;width:160px;border:solid 1px rgba(0,0,0,0.1);background:#fff} .megamenu .dropdown{top:59px} .megamenu .dropdown li .dropdown{left:160px;top:inherit} .megamenu .dropdown li{clear:both;width:100%;border-bottom:solid 1px rgba(0,0,0,0.1)} .megamenu .dropdown li:last-child{border-bottom:0} .megamenu .dropdown li a{float:left;width:100%;padding:10px 25px;text-decoration:none;display:block;border:0 none;font-size:14px;color:#444;background:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;transition:color .4s ease-in-out;-moz-transition:color .4s ease-in-out;-webkit-transition:color .4s ease-in-out;-o-transition:color .4s ease-in-out} .megamenu .dropdown li:hover>a{background:#dbdbdb} .megamenu>li>.megapanel{position:absolute;display:none;background:#ffffff;box-shadow: 0px 2px 4px #777; width:100.2%;top:33px;left:0px;z-index:99;padding:20px 30px 20px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box} .megamenu .megapanel ul{margin:0;padding:0} .megamenu .megapanel img{width:100%;border:solid 1px #dedede;cursor:pointer;-webkit-transition:border .3s linear;-moz-transition:border .3s linear;-o-transition:border .3s linear;transition:border .3s linear}.megamenu .megapanel img:hover{border:solid 1px #777}.megamenu form.contact input,.megamenu form.contact textarea{font-family:Calibri,Arial;font-size:16px;color:#444;outline:0} .megamenu form.contact input[type="text"], .megamenu form.contact textarea{resize:none;width:100%;margin:10px 0;padding:5px 10px;border:solid 1px #dedede;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-transition:border .3s linear;-moz-transition:border .3s linear;-o-transition:border .3s linear;transition:border .3s linear} .megamenu form.contact input[type="text"]{height:40px} .megamenu form.contact input[type="text"]:focus, .megamenu form.contact textarea:focus{border:solid 1px #999} .megamenu form.contact input[type="submit"]{width:100px;height:35px;border:0;color:#fff;cursor:pointer;background:#999} .megapanel .row{width:100%;margin-top:15px} .megapanel .row:first-child{margin-top:0} .megapanel .row:before,.megapanel .row:after{display:table;content:"";line-height:0} .megapanel .row:after{clear:both} .megapanel .row .col1,.megapanel .row .col2,.megapanel .row .col3,.megapanel .row .col4,.megapanel .row .col5,.megapanel .row .col6{display:block;width:100%;min-height:20px;float:left;margin-left:2.127659574468085%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box} .megapanel .row [class*="col"]:first-child{margin-left:0} .megapanel .row .col1{width:14.893617021276595%} .megapanel .row .col2{width:31.914893617021278%} .megapanel .row .col3{width:48.93617021276595%} .megapanel .row .col4{width:65.95744680851064%} .megapanel .row .col5{width:82.97872340425532%} .megapanel .row .col6{width:100%} .megamenu>li.showhide{display:none;width:100%;height:50px;cursor:pointer;color:#555;background:#eee;background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VlZWVlZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkYmRiZGIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);background:-moz-linear-gradient(top,#eee 0,#dbdbdb 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#eee),color-stop(100%,#dbdbdb));background:-webkit-linear-gradient(top,#eee 0,#dbdbdb 100%);background:-o-linear-gradient(top,#eee 0,#dbdbdb 100%);background:-ms-linear-gradient(top,#eee 0,#dbdbdb 100%);background:linear-gradient(to bottom,#eee 0,#dbdbdb 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee',endColorstr='#dbdbdb',GradientType=0)} .megamenu>li.showhide span.title{margin:15px 0 0 25px;float:left}.megamenu>li.showhide span.icon1:after{position:absolute;content:"";right:25px;top:15px;height:3px;width:25px;font-size:50px;border-top:3px solid #333;border-bottom:3px solid #333;z-index:1} .megamenu>li.showhide span.icon2:after{position:absolute;content:"";right:25px;top:27px;height:3px;width:25px;font-size:50px;border-top:3px solid #333;border-bottom:3px solid #333;z-index:1} .skyblue,.skyblue>li.showhide{ } .skyblue li>a,.skyblue>li.showhide span{color:#555} .skyblue>li:hover>a,.skyblue .dropdown li:hover>a{color:#555; background:#ffffff;}. skyblue .megapanel img:hover,.skyblue form.contact input[type="text"]:focus,.skyblue form.contact textarea:focus{} .skyblue form.contact input[type="submit"]{background:#00405d;text-transform:uppercase;} @media(max-width:1024px){ .megamenu>li>a { padding: 8px 16px; } } @media(max-width:800px){ .megamenu>li>a { padding: 8px 8px; } } @media(max-width:768px){ .megamenu>li{display:block;width:100%;border-bottom:solid 1px rgba(0,0,0,0.1);box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box} .megamenu>li:hover,.megamenu>li.active{border-top:0} .megamenu>li>a{padding:15px 25px} .megamenu>li:hover>a,.megamenu>li.active>a{padding:15px 25px} .megamenu a{width:100%;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box} .megamenu .dropdown,.megamenu .dropdown li .dropdown{width:100%;display:none;left:0;border-left:0;position:static;border:0;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box} .megamenu .dropdown li{background:#fff!important;border:0} .megamenu .dropdown>li>a{padding-left:40px!important} .megamenu>li>.megapanel{position:static;margin-top:50px} .megapanel .row [class*="col"]{float:none;display:block;width:100%;margin-left:0;margin-top:15px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box} .megapanel .row:first-child [class*="col"]:first-child{margin-top:0} .megapanel .row{margin-top:0}.black{background:#222} .megamenu>li.showhide span.title { margin: 10px 0 0 15px; } .megamenu>li.showhide span.icon1:after { top: 12px; right:15px; } .megamenu>li.showhide span.icon2:after { top:23px; right:15px; } .megamenu>li.showhide { height: 40px; } } /* start megamenu colors */ .skyblue li a.color1:hover{ background:#EF5F21; color: #ffffff; } .skyblue li a.color2:hover{ background:#589D3E; color: #ffffff; } .skyblue li a.color3:hover{ background:#00ACED; color: #ffffff; } .skyblue li a.color4:hover{ background:#D61F85; color: #ffffff; } .skyblue li a.color5:hover{ background:#F89F1B; color: #ffffff; } .skyblue li a.color6:hover{ background:#00677C; color: #ffffff; } .skyblue li a.color7:hover{ background:#D5331D; color: #ffffff; } .skyblue li a.color8:hover{ background:#00405d; color: #ffffff; } .skyblue li a.color9:hover{ background:#9CB43A; color: #ffffff; } .skyblue li a.color10:hover{ background:#26BC85; color: #ffffff; } /*-- responsive-design-starts-here --*/ @media screen and (max-width: 1366px) { .megamenu>li>a { padding: 6px 15px; } .megamenu>li>.megapanel { top: 30px; } } @media screen and (max-width: 1280px) { .megamenu>li>a { padding: 6px 14px; } } @media screen and (max-width: 1024px) { .megamenu>li>a { padding: 6px 7px; } .megamenu>li>.megapanel { width: 111.2%; left: -50px; } } @media screen and (max-width: 800px) { .megamenu>li>a { padding: 6px 4px; } .megamenu>li>.megapanel { width: 100%; left: 3px; } } @media screen and (max-width: 768px) { .megapanel .row .col1, .megapanel .row .col2, .megapanel .row .col3, .megapanel .row .col4, .megapanel .row .col5, .megapanel .row .col6{ min-height:0; } }