
/* Animated CSS3 Mega Menu - Responsive */

.menu input#dropdown, .menu label {
     display: none;
     position: absolute;
     top: 5px;
     right: 14px;
     width: 46px;
     height: 35px;
}

.menu input#dropdown {
     opacity: 0;
}

.menu label {
     background: #222 url('/assets/images/2014/icon_list.png') no-repeat center;
     webkit-border-radius: 3px;
     -moz-border-radius: 3px;
     border-radius: 3px;
}

.menu label:hover {
     cursor: pointer;
}

.menu input#dropdown:checked ~ label {
     -webkit-box-shadow: inset 0 0 28px #2A2A2A, inset 0 0 6px #1A1A1A;
     -moz-box-shadow: inset 0 0 28px #2A2A2A, inset 0 0 6px #1A1A1A;
     box-shadow: inset 0 0 28px #2A2A2A, inset 0 0 6px #1A1A1A;
}

.menu input#dropdown:checked ~ ul {
     display: block;
}

.menu h2.dropdown {
     display: none;
     position: absolute;
     top: 9px;
     left: 14px;
     margin: 0;
     font: normal 25px "BebasNeue";
     color: #FFF;
}
@media only screen and (max-width: 1024px) {

.menu {
     width: 96%;
}

.menu ul ul {
     margin: 0;
}

.menu .mega_menu {
     width: auto;
     margin: 0;
}
}
@media only screen and (max-width: 768px) {

/* Header */

.menu input, .menu label, .menu h2.dropdown {
     display: block;
}

.menu {
     width: 62%;
     min-height: 45px;
     height: 100%;
     overflow: hidden;
     position: relative;
}

.menu ul {
     display: none;
     width: 100%;
     margin: 45px 0 0 0;
     padding: 0;
     float: none;
     z-index: 10;
}

.menu ul > li {
     float: none;
}

.menu ul li a {
     width: auto;
     height: 38px;
     padding-left: 5%;
     font-size: 22px;
     line-height: 40px;
}

.menu ul ul, .menu .mega_menu {
     display: block;
     position: static;
     visibility: visible;
     opacity: 1;
     margin: 0;
     font-size: 0;
     overflow: hidden;
     border: none;
     -webkit-box-shadow: none;
     -moz-box-shadow: none;
     box-shadow: none;
}

.menu ul ul li {
     width: 25%;
     float: left;
}

.menu ul ul li a {
     width: auto;
     padding: 0;
     text-align: center;
     color: #FFF;
     border: none;
}

.menu ul ul li:hover a {
     background: #282828;
}

.menu ul ul ul, .menu ul ul li a i {
     display: none;
}

.menu .mega_menu .one, .menu .mega_menu .one_half, .menu .mega_menu .one_thirds, .menu .mega_menu .two_thirds, .menu .mega_menu .one_fourth, .menu .mega_menu .three_fourths {
     display: inline-block;
     vertical-align: top;
     padding: 0 0 12px;
     float: none;
}

.menu .mega_menu {
     width: auto !important;
}

.menu .mega_menu .portfolio li, .menu .mega_menu .list {
     margin: 0;
     width: 48%;
     margin: 0 1% 2%;
}

div.search-box {
     display: none;
     visibility: hidden;
     height: 0px;
     margin: 0px;
     padding: 0;
     width: 0px;
}
}
@media only screen and (max-width: 480px) {

.menu {
     width: 96%;
}

div.search-box {
     display: none;
     visibility: hidden;
     height: 0px;
     margin: 0px;
     padding: 0;
     width: 0px;
}
}
@media only screen and (max-width: 320px) {

.menu {
     width: 96%;
}

.menu .mega_menu img, .menu .mega_menu a.image {
     width: 100%;
     margin: 0;
}

.menu .mega_menu ol.portfolio li a img {
     height: 80px;
}

nav.menu:nth-child(3n) {
     width: 0px;
     display: none;
     height: 0px;
     visibility: hidden;
}

div.search-box {
     display: none;
     visibility: hidden;
     height: 0px;
     margin: 0px;
     padding: 0;
     width: 0px;
}
}
