/* * Zetta Menu 1.3.3 * Copyright 2014, nK * 11 August 2014 */ /* ====================== DEFAULT THEME ====================== */ /* ====================== MAIN ====================== */ .zetta-menu { background-color: DarkOrange; padding: 0; margin: 0; display: inline-block; position: relative; border-radius: 0px 66px 200px 0px; -moz-border-radius: 0px 66px 200px 0px; -webkit-border-radius: 0px 66px 200px 0px; border: 0px solid #000000; } .zetta-menu:before, .zetta-menu ul, .zetta-menu li, .zetta-menu div, .zetta-menu a, .zetta-menu label, .zetta-menu input, .zetta-menu textarea { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; outline: none; border: 0; list-style: none; } .zetta-menu a { cursor: pointer; } .zetta-menu h1, .zetta-menu h2, .zetta-menu h3, .zetta-menu h4, .zetta-menu h5, .zetta-menu h6 { font-weight: normal; text-align: center; margin: 0; padding: 15px 0; color: #3598dc; border-bottom: 1px solid #3598dc; } .zetta-menu.zm-full-width { display: block; } .zetta-menu.zm-fixed { position: fixed; top: 0; left: 0; right: 0; } .zetta-menu.zm-fixed.zm-position-left { top: 0; bottom: 0; left: 0; right: auto; } .zetta-menu.zm-fixed.zm-position-right { top: 0; bottom: 0; left: auto; right: 0; } .zetta-menu.zm-fixed.zm-position-bottom { top: auto; bottom: 0; left: 0; right: 0; } .zetta-menu, .zetta-menu a, .zetta-menu a:visited { color: #ffffff; } .zetta-menu > li { display: block; vertical-align: top; float: left; height: 50px; } .zetta-menu > li.zm-right-item { margin-right: 0; float: right; } .zetta-menu > li > a { font-weight: bold; padding: 0 34px; line-height: 50px; } .zetta-menu > li:hover, .zetta-menu > li.zm-active { background-color: #3598dc; } .zetta-menu li { position: relative; cursor: default; } .zetta-menu li > a { text-decoration: none; display: block; } .zetta-menu li > ul, .zetta-menu li > div { z-index: 1; } .zetta-menu.zm-position-left > li, .zetta-menu.zm-position-right > li { position: relative !important; } .zetta-menu.zm-position-left > li, .zetta-menu.zm-position-right > li, .zetta-menu.zm-position-left > li.zm-logo, .zetta-menu.zm-position-right > li.zm-logo { float: none; } .zetta-menu.zm-position-left > li > a .zm-caret, .zetta-menu.zm-position-right > li > a .zm-caret { float: right; } .zetta-menu .fa { font-size: 12pt; letter-spacing: 13px; line-height: inherit; } .zetta-menu .zm-caret { letter-spacing: 0; float: right; margin-left: 15px; } .zetta-menu > li > a .zm-caret { float: none; } .zetta-menu .zm-single-icon { letter-spacing: 0; } .zetta-menu:after { content: ''; display: block; clear: both; } /* ====================== LOGO ====================== */ .zetta-menu > li.zm-logo { float: left; margin-left: 0; font-size: 0; } .zetta-menu > li.zm-logo a { padding: 0; line-height: 0; } .zetta-menu > li.zm-logo img { max-width: 100%; max-height: 100%; border: none; } /* ====================== MENU DROP DOWN ====================== */ .zetta-menu ul, .zetta-menu div.zm-multi-column { position: absolute; display: none; } .zetta-menu ul > li { min-height: 50px; } .zetta-menu ul > li a { padding: 0 20px; line-height: 50px; } .zetta-menu > li > ul, .zetta-menu > li > ul ul, .zetta-menu .zm-multi-column, .zetta-menu .zm-multi-column > ul ul { background-color: #ffffff; color: DarkOrange; } .zetta-menu > li > ul li > a, .zetta-menu > li > ul ul li > a, .zetta-menu .zm-multi-column li > a, .zetta-menu .zm-multi-column > ul ul li > a, .zetta-menu > li > ul li > a:visited, .zetta-menu > li > ul ul li > a:visited, .zetta-menu .zm-multi-column li > a:visited, .zetta-menu .zm-multi-column > ul ul li > a:visited { color: DarkOrange; } .zetta-menu > li > ul li:hover, .zetta-menu > li > ul ul li:hover, .zetta-menu .zm-multi-column li:hover, .zetta-menu .zm-multi-column > ul ul li:hover { background-color: #3598dc; } .zetta-menu > li > ul li:hover > a, .zetta-menu > li > ul ul li:hover > a, .zetta-menu .zm-multi-column li:hover > a, .zetta-menu .zm-multi-column > ul ul li:hover > a, .zetta-menu > li > ul li:hover > a:visited, .zetta-menu > li > ul ul li:hover > a:visited, .zetta-menu .zm-multi-column li:hover > a:visited, .zetta-menu .zm-multi-column > ul ul li:hover > a:visited { color: #ffffff; } .zetta-menu > li > ul, .zetta-menu > li > div.zm-multi-column { top: 100%; left: 0; } .zetta-menu > li > ul ul, .zetta-menu > li > div.zm-multi-column ul { top: 0; left: 100%; } .zetta-menu > li > ul ul.zm-drop-left, .zetta-menu > li > div.zm-multi-column ul.zm-drop-left { left: auto; right: 100%; } .zetta-menu.zm-position-bottom > li > ul, .zetta-menu.zm-position-bottom > li > div.zm-multi-column { top: auto; bottom: 100%; left: 0; } .zetta-menu.zm-position-bottom > li > ul ul, .zetta-menu.zm-position-bottom > li > div.zm-multi-column ul { top: auto; bottom: 0; left: 100%; } .zetta-menu.zm-position-bottom > li > ul ul.zm-drop-left, .zetta-menu.zm-position-bottom > li > div.zm-multi-column ul.zm-drop-left { left: -100%; } .zetta-menu.zm-position-left > li > ul, .zetta-menu.zm-position-left > li > div.zm-multi-column { top: 0; left: 100%; } .zetta-menu.zm-position-left > li > ul ul.zm-drop-left, .zetta-menu.zm-position-left > li > div.zm-multi-column ul.zm-drop-left { top: 0; left: 100%; } .zetta-menu.zm-position-right > li > ul, .zetta-menu.zm-position-right > li > div.zm-multi-column { top: 0; left: auto; right: 100%; } .zetta-menu.zm-position-right > li > ul ul.zm-drop-left, .zetta-menu.zm-position-right > li > div.zm-multi-column ul.zm-drop-left { top: 0; left: auto; right: 100%; } .zetta-menu.zm-position-right > li > ul ul, .zetta-menu.zm-position-right > li > div.zm-multi-column > ul ul { top: 0; left: auto; right: 100%; } .zetta-menu li:hover > ul, .zetta-menu li:hover > div.zm-multi-column, .zetta-menu li:hover > div.zm-multi-column > ul { display: block; } .zetta-menu li > div.zm-multi-column > ul, .zetta-menu.zm-position-bottom li > div.zm-multi-column > ul { left: 0; float: left; } .zetta-menu > li > div.zm-multi-column > ul { position: relative; display: inline-block; } .zetta-menu > li.zm-right-align > ul, .zetta-menu > li.zm-right-align > div.zm-multi-column { left: auto; right: 0; } .zetta-menu.zm-position-left > li.zm-right-align > ul, .zetta-menu.zm-position-left > li.zm-right-align > div.zm-multi-column { left: 100%; right: auto; } .zetta-menu.zm-position-left > li.zm-right-align > ul, .zetta-menu.zm-position-left > li.zm-right-align > div.zm-multi-column { right: 100%; } /* ====================== CONTENT DROP DOWN ====================== */ .zetta-menu > li.zm-content-full { position: static; } .zetta-menu > li.zm-content-full > div { width: 100%; } .zetta-menu > li.zm-content > div, .zetta-menu > li.zm-content-full > div { position: absolute; display: none; left: 0; padding: 15px; background-color: #ffffff; color: DarkOrange; } .zetta-menu > li.zm-content > div ul, .zetta-menu > li.zm-content-full > div ul { display: block; position: relative; min-width: 0; } .zetta-menu > li.zm-content > div ul li a, .zetta-menu > li.zm-content-full > div ul li a, .zetta-menu > li.zm-content > div ul li a:visited, .zetta-menu > li.zm-content-full > div ul li a:visited { text-align: center; padding: 15px 0; line-height: 1; color: DarkOrange; } .zetta-menu > li.zm-content > div ul li:hover, .zetta-menu > li.zm-content-full > div ul li:hover { background-color: transparent; } .zetta-menu > li.zm-content > div ul li:hover a, .zetta-menu > li.zm-content-full > div ul li:hover a, .zetta-menu > li.zm-content > div ul li:hover a:visited, .zetta-menu > li.zm-content-full > div ul li:hover a:visited { color: #3598dc; text-decoration: underline; } .zetta-menu > li.zm-content > div img, .zetta-menu > li.zm-content-full > div img { width: 100%; margin: 15px 0; } .zetta-menu > li.zm-content > div .zm-video, .zetta-menu > li.zm-content-full > div .zm-video { position: relative; padding-bottom: 56.25%; height: 0; margin: 15px 0; overflow: hidden; } .zetta-menu > li.zm-content > div .zm-video > iframe, .zetta-menu > li.zm-content-full > div .zm-video > iframe { position: absolute; left: 0; top: 0; height: 100%; width: 100%; } .zetta-menu > li.zm-content > div input, .zetta-menu > li.zm-content-full > div input, .zetta-menu > li.zm-content > div textarea, .zetta-menu > li.zm-content-full > div textarea { width: 100%; margin-top: 10px; font: inherit; resize: none; padding: 15px; background-color: #eaeaea; color: DarkOrange; } .zetta-menu > li.zm-content > div input.zm-button, .zetta-menu > li.zm-content-full > div input.zm-button, .zetta-menu > li.zm-content > div .zm-button, .zetta-menu > li.zm-content-full > div .zm-button { display: inline-block; text-decoration: none; cursor: pointer; text-align: center; font-weight: normal; background-color: #3598dc; color: #ffffff; padding: 15px; } .zetta-menu > li.zm-content:hover > div, .zetta-menu > li.zm-content-full:hover > div { display: block; } .zetta-menu > li.zm-content > div, .zetta-menu > li.zm-content-full > div { top: 100%; } .zetta-menu.zm-position-bottom > li.zm-content > div, .zetta-menu.zm-position-bottom > li.zm-content-full > div { top: auto; bottom: 100%; } .zetta-menu.zm-position-left > li.zm-content > div, .zetta-menu.zm-position-left > li.zm-content-full > div { top: 0; left: 100%; } .zetta-menu.zm-position-right > li.zm-content > div, .zetta-menu.zm-position-right > li.zm-content-full > div { top: 0; right: 100%; left: auto; } .zetta-menu > li.zm-content.zm-right-align > div, .zetta-menu > li.zm-content-full.zm-right-align > div { left: auto; right: 0; } .zetta-menu.zm-position-left > li.zm-content.zm-right-align > div, .zetta-menu.zm-position-left > li.zm-content-full.zm-right-align > div { left: 100%; right: auto; } /* ====================== GRID SYSTEM ====================== */ .zetta-menu .zm-row { display: block; } .zetta-menu .zm-row .zm-col { display: inline-block; margin-bottom: 5px; padding: 5px; vertical-align: top; float: left; } .zetta-menu .zm-row .zm-col > .zm-grid-wrapper { padding: 15px 20px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background-color: #eaeaea; color: DarkOrange; } .zetta-menu .zm-row .zm-col.c-12 { width: 100%; } .zetta-menu .zm-row .zm-col.c-11 { width: 91.66666666666667%; } .zetta-menu .zm-row .zm-col.c-10 { width: 83.33333333333334%; } .zetta-menu .zm-row .zm-col.c-9 { width: 75%; } .zetta-menu .zm-row .zm-col.c-8 { width: 66.66666666666667%; } .zetta-menu .zm-row .zm-col.c-7 { width: 58.333333333333336%; } .zetta-menu .zm-row .zm-col.c-6 { width: 50%; } .zetta-menu .zm-row .zm-col.c-5 { width: 41.66666666666667%; } .zetta-menu .zm-row .zm-col.c-4 { width: 33.333333333333336%; } .zetta-menu .zm-row .zm-col.c-3 { width: 25%; } .zetta-menu .zm-row .zm-col.c-2 { width: 16.666666666666668%; } .zetta-menu .zm-row .zm-col.c-1 { width: 8.333333333333334%; } .zetta-menu .w-1000 { width: 1000px; } .zetta-menu .w-950 { width: 950px; } .zetta-menu .w-900 { width: 900px; } .zetta-menu .w-850 { width: 850px; } .zetta-menu .w-800 { width: 800px; } .zetta-menu .w-750 { width: 750px; } .zetta-menu .w-700 { width: 700px; } .zetta-menu .w-650 { width: 650px; } .zetta-menu .w-600 { width: 600px; } .zetta-menu .w-550 { width: 550px; } .zetta-menu .w-500 { width: 500px; } .zetta-menu .w-450 { width: 450px; } .zetta-menu .w-400 { width: 400px; } .zetta-menu .w-350 { width: 350px; } .zetta-menu .w-300 { width: 300px; } .zetta-menu .w-250 { width: 250px; } .zetta-menu .w-200 { width: 200px; } .zetta-menu .w-150 { width: 150px; } .zetta-menu .w-100 { width: 100px; } .zetta-menu .w-50 { width: 50px; } /* ====================== SEARCH PLACE ====================== */ .zetta-menu .zm-search { position: relative; overflow: hidden; } .zetta-menu .zm-search form > label { position: absolute; cursor: text; left: 0; top: 0; padding: 0 20px; line-height: 50px; } .zetta-menu .zm-search input { height: 50px; padding: 0 27.5px; font-size: inherit; -webkit-appearance: none; width: 0; opacity: 0.01; color: #ffffff; } .zetta-menu .zm-search input:focus { width: 150px; opacity: 1; } .zetta-menu .zm-search input:focus + label { display: none; } .zetta-menu .zm-search input:focus, .zetta-menu .zm-search input:hover { background-color: #3598dc; } .zetta-menu .zm-search:hover { background-color: #3598dc; } .zetta-menu.zm-position-right .zm-search, .zetta-menu.zm-position-left .zm-search { float: none; } .zetta-menu.zm-position-right .zm-search input, .zetta-menu.zm-position-left .zm-search input { width: 100%; } /* ====================== SHOW EFFECTS ====================== */ /* fade */ .zetta-menu.zm-effect-fade > li > div, .zetta-menu.zm-effect-fade li > ul { display: block; visibility: hidden; opacity: 0; -webkit-transition: opacity .4s ease, visibility .4s linear 0s; -moz-transition: opacity .4s ease, visibility .4s linear 0s; -ms-transition: opacity .4s ease, visibility .4s linear 0s; -o-transition: opacity .4s ease, visibility .4s linear 0s; transition: opacity .4s ease, visibility .4s linear 0s; } .zetta-menu.zm-effect-fade > li:hover > div, .zetta-menu.zm-effect-fade li:hover > ul { visibility: visible; opacity: 1; -webkit-transition: opacity .4s ease; -moz-transition: opacity .4s ease; -ms-transition: opacity .4s ease; -o-transition: opacity .4s ease; transition: opacity .4s ease; } /* slide */ .zetta-menu.zm-effect-slide-top > li > div, .zetta-menu.zm-effect-slide-top li > ul { -webkit-transform: translateY(50px); -moz-transform: translateY(50px); -ms-transform: translateY(50px); -o-transform: translateY(50px); transform: translateY(50px); } .zetta-menu.zm-effect-slide-bottom > li > div, .zetta-menu.zm-effect-slide-bottom li > ul { -webkit-transform: translateY(-50px); -moz-transform: translateY(-50px); -ms-transform: translateY(-50px); -o-transform: translateY(-50px); transform: translateY(-50px); } .zetta-menu.zm-effect-slide-left > li > div, .zetta-menu.zm-effect-slide-left li > ul { -webkit-transform: translateX(50px); -moz-transform: translateX(50px); -ms-transform: translateX(50px); -o-transform: translateX(50px); transform: translateX(50px); } .zetta-menu.zm-effect-slide-right > li > div, .zetta-menu.zm-effect-slide-right li > ul { -webkit-transform: translateX(-50px); -moz-transform: translateX(-50px); -ms-transform: translateX(-50px); -o-transform: translateX(-50px); transform: translateX(-50px); } .zetta-menu.zm-effect-slide-top > li > div, .zetta-menu.zm-effect-slide-bottom > li > div, .zetta-menu.zm-effect-slide-left > li > div, .zetta-menu.zm-effect-slide-right > li > div, .zetta-menu.zm-effect-slide-top li > ul, .zetta-menu.zm-effect-slide-bottom li > ul, .zetta-menu.zm-effect-slide-left li > ul, .zetta-menu.zm-effect-slide-right li > ul { display: block !important; visibility: hidden; opacity: 0; -webkit-transition: opacity 0.4s ease, -webkit-transform 0.4s ease, visibility 0.4s linear 0s; -moz-transition: opacity 0.4s ease, -moz-transform 0.4s ease, visibility 0.4s linear 0s; -ms-transition: opacity 0.4s ease, -ms-transform 0.4s ease, visibility 0.4s linear 0s; -o-transition: opacity 0.4s ease, -o-transform 0.4s ease, visibility 0.4s linear 0s; transition: opacity .4s ease, transform .4s ease, visibility .4s linear 0s; } .zetta-menu.zm-effect-slide-top > li:hover > div, .zetta-menu.zm-effect-slide-bottom > li:hover > div, .zetta-menu.zm-effect-slide-left > li:hover > div, .zetta-menu.zm-effect-slide-right > li:hover > div, .zetta-menu.zm-effect-slide-top li:hover > ul, .zetta-menu.zm-effect-slide-bottom li:hover > ul, .zetta-menu.zm-effect-slide-left li:hover > ul, .zetta-menu.zm-effect-slide-right li:hover > ul { visibility: visible; opacity: 1; -webkit-transform: translate(0); -moz-transform: translate(0); -ms-transform: translate(0); -o-transform: translate(0); transform: translate(0); -webkit-transition: opacity 0.4s ease, -webkit-transform 0.4s ease; -moz-transition: opacity 0.4s ease, -moz-transform 0.4s ease; -ms-transition: opacity 0.4s ease, -ms-transform 0.4s ease; -o-transition: opacity 0.4s ease, -o-transform 0.4s ease; transition: opacity .4s ease, transform .4s ease; } /* ====================== RESPONSIVE ====================== */ @media screen and (max-width: 768px) { /* ====================== MAIN ====================== */ .zetta-menu[class*='zm-response'] > li { position: relative; } .zetta-menu[class*='zm-response'] > li > ul, .zetta-menu[class*='zm-response'] > li > div.zm-multi-column > ul, .zetta-menu[class*='zm-response'] > li > ul ul, .zetta-menu[class*='zm-response'] > li > div.zm-multi-column > ul ul { left: 0; right: 0; width: auto !important; margin-right: 0; } .zetta-menu[class*='zm-response'] > li > ul ul, .zetta-menu[class*='zm-response'] > li > div.zm-multi-column > ul ul { top: 100%; margin-left: 50px !important; } .zetta-menu[class*='zm-response'].zm-position-bottom > li > ul ul, .zetta-menu[class*='zm-response'].zm-position-bottom > li > div.zm-multi-column > ul ul, .zetta-menu[class*='zm-response'].zm-position-bottom > li > ul ul.zm-drop-left, .zetta-menu[class*='zm-response'].zm-position-bottom > li > div.zm-multi-column > ul ul.zm-drop-left { left: 0; top: auto; bottom: 100%; } .zetta-menu[class*='zm-response'].zm-position-left > li > ul, .zetta-menu[class*='zm-response'].zm-position-left > li > div.zm-multi-column > ul, .zetta-menu[class*='zm-response'].zm-position-right > li > ul, .zetta-menu[class*='zm-response'].zm-position-right > li > div.zm-multi-column > ul { top: 100%; left: 0; right: 0; } .zetta-menu[class*='zm-response'].zm-position-left > li > ul ul, .zetta-menu[class*='zm-response'].zm-position-left > li > div.zm-multi-column > ul ul, .zetta-menu[class*='zm-response'].zm-position-right > li > ul ul, .zetta-menu[class*='zm-response'].zm-position-right > li > div.zm-multi-column > ul ul, .zetta-menu[class*='zm-response'].zm-position-left > li > ul ul.zm-drop-left, .zetta-menu[class*='zm-response'].zm-position-left > li > div.zm-multi-column > ul ul.zm-drop-left, .zetta-menu[class*='zm-response'].zm-position-right > li > ul ul.zm-drop-left, .zetta-menu[class*='zm-response'].zm-position-right > li > div.zm-multi-column > ul ul.zm-drop-left { left: 0; right: 0; top: 100%; } .zetta-menu[class*='zm-response'].zm-position-left > li.zm-content > div, .zetta-menu[class*='zm-response'].zm-position-left > li.zm-content-full > div, .zetta-menu[class*='zm-response'].zm-position-right > li.zm-content > div, .zetta-menu[class*='zm-response'].zm-position-right > li.zm-content-full > div { top: 100%; left: 0; right: 0; } .zetta-menu[class*='zm-response'] li > div { top: 100%; left: 0 !important; right: 0; width: auto !important; } .zetta-menu[class*='zm-response'] li > div.zm-multi-column > ul { width: 100% !important; } .zetta-menu[class*='zm-response'] .zm-row .zm-col { display: block; margin-right: 0; width: 100% !important; float: none; } .zetta-menu[class*='zm-response'] .w-50, .zetta-menu[class*='zm-response'] .w-100, .zetta-menu[class*='zm-response'] .w-150, .zetta-menu[class*='zm-response'] .w-200, .zetta-menu[class*='zm-response'] .w-250, .zetta-menu[class*='zm-response'] .w-300, .zetta-menu[class*='zm-response'] .w-350, .zetta-menu[class*='zm-response'] .w-400, .zetta-menu[class*='zm-response'] .w-450, .zetta-menu[class*='zm-response'] .w-500, .zetta-menu[class*='zm-response'] .w-550, .zetta-menu[class*='zm-response'] .w-600, .zetta-menu[class*='zm-response'] .w-650, .zetta-menu[class*='zm-response'] .w-700, .zetta-menu[class*='zm-response'] .w-750, .zetta-menu[class*='zm-response'] .w-800, .zetta-menu[class*='zm-response'] .w-850, .zetta-menu[class*='zm-response'] .w-900, .zetta-menu[class*='zm-response'] .w-950, .zetta-menu[class*='zm-response'] .w-1000 { width: 100%; } /* ====================== SIMPLE ====================== */ .zetta-menu.zm-response-simple > li { position: static; } .zetta-menu.zm-response-simple > li > a { font-size: 0; } .zetta-menu.zm-response-simple > li > a i { letter-spacing: 0; } .zetta-menu.zm-response-simple > li > a .zm-caret { display: none; } .zetta-menu.zm-response-simple > li.zm-logo { display: none; } .zetta-menu.zm-response-simple > li.zm-search { position: relative; } /* ====================== STACK ====================== */ .zetta-menu.zm-response-stack > li { display: block; float: none; } .zetta-menu.zm-response-stack > li.zm-content-full { position: relative; } .zetta-menu.zm-response-stack > li.zm-logo { text-align: center; } .zetta-menu.zm-response-stack > li.zm-logo img { position: relative; } .zetta-menu.zm-response-stack > li.zm-logo, .zetta-menu.zm-response-stack > li.zm-right-item { position: relative; width: 100%; } .zetta-menu.zm-response-stack > li > a .zm-caret { float: right; } .zetta-menu.zm-response-stack .zm-search { float: none; } .zetta-menu.zm-response-stack .zm-search input { width: 100%; } /* ====================== SWITCH ====================== */ .zetta-menu.zm-response-switch > li { display: none; float: none; position: relative; width: 100%; } .zetta-menu.zm-response-switch > li.zm-logo { display: block; } .zetta-menu.zm-response-switch > li.zm-logo img { position: relative; z-index: 1; } .zetta-menu.zm-response-switch:before { font-family: FontAwesome; content: '\f0c9'; position: relative; float: right; cursor: pointer; line-height: 50px; height: 50px; padding: 0 20px; z-index: 2; } .zetta-menu.zm-response-switch:hover:before { opacity: 0; } .zetta-menu.zm-response-switch:hover > li { display: block; } .zetta-menu.zm-response-switch > li > a .zm-caret { float: right; } .zetta-menu.zm-response-switch .zm-search { float: none; } .zetta-menu.zm-response-switch .zm-search input { width: 100%; } /* ====================== RESPONSE MARGIN ====================== */ .zetta-menu.zm-response-margin > li > ul, .zetta-menu.zm-response-margin li > div { margin-left: 50px !important; } }
/* * Zetta Menu 1.3.3 * Copyright 2014, nK * 11 August 2014 */ /* ====================== DARK DEFAULT THEME ====================== */ /* ====================== MAIN ====================== */ .zetta-menu { background-color: DarkOrange; padding: 0; margin: 0; display: inline-block; position: relative; } .zetta-menu:before, .zetta-menu ul, .zetta-menu li, .zetta-menu div, .zetta-menu a, .zetta-menu label, .zetta-menu input, .zetta-menu textarea { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; outline: none; border: 0; list-style: none; } .zetta-menu a { cursor: pointer; } .zetta-menu h1, .zetta-menu h2, .zetta-menu h3, .zetta-menu h4, .zetta-menu h5, .zetta-menu h6 { font-weight: normal; text-align: center; margin: 0; padding: 15px 0; color: #3598dc; border-bottom: 1px solid #3598dc; } .zetta-menu.zm-full-width { display: block; } .zetta-menu.zm-fixed { position: fixed; top: 0; left: 0; right: 0; } .zetta-menu.zm-fixed.zm-position-left { top: 0; bottom: 0; left: 0; right: auto; } .zetta-menu.zm-fixed.zm-position-right { top: 0; bottom: 0; left: auto; right: 0; } .zetta-menu.zm-fixed.zm-position-bottom { top: auto; bottom: 0; left: 0; right: 0; } .zetta-menu, .zetta-menu a, .zetta-menu a:visited { color: #ffffff; } .zetta-menu > li { display: block; vertical-align: top; float: left; height: 50px; } .zetta-menu > li.zm-right-item { margin-right: 0; float: right; } .zetta-menu > li > a { font-weight: normal; padding: 0 20px; line-height: 50px; } .zetta-menu > li:hover, .zetta-menu > li.zm-active { background-color: #3598dc; } .zetta-menu li { position: relative; cursor: default; } .zetta-menu li > a { text-decoration: none; display: block; } .zetta-menu li > ul, .zetta-menu li > div { z-index: 1; } .zetta-menu.zm-position-left > li, .zetta-menu.zm-position-right > li { position: relative !important; } .zetta-menu.zm-position-left > li, .zetta-menu.zm-position-right > li, .zetta-menu.zm-position-left > li.zm-logo, .zetta-menu.zm-position-right > li.zm-logo { float: none; } .zetta-menu.zm-position-left > li > a .zm-caret, .zetta-menu.zm-position-right > li > a .zm-caret { float: right; } .zetta-menu .fa { font-size: 12pt; letter-spacing: 13px; line-height: inherit; } .zetta-menu .zm-caret { letter-spacing: 0; float: right; margin-left: 15px; } .zetta-menu > li > a .zm-caret { float: none; } .zetta-menu .zm-single-icon { letter-spacing: 0; } .zetta-menu:after { content: ''; display: block; clear: both; } /* ====================== LOGO ====================== */ .zetta-menu > li.zm-logo { float: left; margin-left: 0; font-size: 0; } .zetta-menu > li.zm-logo a { padding: 0; line-height: 0; } .zetta-menu > li.zm-logo img { max-width: 100%; max-height: 100%; border: none; } /* ====================== MENU DROP DOWN ====================== */ .zetta-menu ul, .zetta-menu div.zm-multi-column { position: absolute; display: none; } .zetta-menu ul > li { min-height: 50px; } .zetta-menu ul > li a { padding: 0 20px; line-height: 50px; } .zetta-menu > li > ul, .zetta-menu > li > ul ul, .zetta-menu .zm-multi-column, .zetta-menu .zm-multi-column > ul ul { background-color: DarkOrange; color: #ffffff; } .zetta-menu > li > ul li > a, .zetta-menu > li > ul ul li > a, .zetta-menu .zm-multi-column li > a, .zetta-menu .zm-multi-column > ul ul li > a, .zetta-menu > li > ul li > a:visited, .zetta-menu > li > ul ul li > a:visited, .zetta-menu .zm-multi-column li > a:visited, .zetta-menu .zm-multi-column > ul ul li > a:visited { color: #ffffff; } .zetta-menu > li > ul li:hover, .zetta-menu > li > ul ul li:hover, .zetta-menu .zm-multi-column li:hover, .zetta-menu .zm-multi-column > ul ul li:hover { background-color: #3598dc; } .zetta-menu > li > ul, .zetta-menu > li > div.zm-multi-column { top: 100%; left: 0; } .zetta-menu > li > ul ul, .zetta-menu > li > div.zm-multi-column ul { top: 0; left: 100%; } .zetta-menu > li > ul ul.zm-drop-left, .zetta-menu > li > div.zm-multi-column ul.zm-drop-left { left: auto; right: 100%; } .zetta-menu.zm-position-bottom > li > ul, .zetta-menu.zm-position-bottom > li > div.zm-multi-column { top: auto; bottom: 100%; left: 0; } .zetta-menu.zm-position-bottom > li > ul ul, .zetta-menu.zm-position-bottom > li > div.zm-multi-column ul { top: auto; bottom: 0; left: 100%; } .zetta-menu.zm-position-bottom > li > ul ul.zm-drop-left, .zetta-menu.zm-position-bottom > li > div.zm-multi-column ul.zm-drop-left { left: -100%; } .zetta-menu.zm-position-left > li > ul, .zetta-menu.zm-position-left > li > div.zm-multi-column { top: 0; left: 100%; } .zetta-menu.zm-position-left > li > ul ul.zm-drop-left, .zetta-menu.zm-position-left > li > div.zm-multi-column ul.zm-drop-left { top: 0; left: 100%; } .zetta-menu.zm-position-right > li > ul, .zetta-menu.zm-position-right > li > div.zm-multi-column { top: 0; left: auto; right: 100%; } .zetta-menu.zm-position-right > li > ul ul.zm-drop-left, .zetta-menu.zm-position-right > li > div.zm-multi-column ul.zm-drop-left { top: 0; left: auto; right: 100%; } .zetta-menu.zm-position-right > li > ul ul, .zetta-menu.zm-position-right > li > div.zm-multi-column > ul ul { top: 0; left: auto; right: 100%; } .zetta-menu li:hover > ul, .zetta-menu li:hover > div.zm-multi-column, .zetta-menu li:hover > div.zm-multi-column > ul { display: block; } .zetta-menu li > div.zm-multi-column > ul, .zetta-menu.zm-position-bottom li > div.zm-multi-column > ul { left: 0; float: left; } .zetta-menu > li > div.zm-multi-column > ul { position: relative; display: inline-block; } .zetta-menu > li.zm-right-align > ul, .zetta-menu > li.zm-right-align > div.zm-multi-column { left: auto; right: 0; } .zetta-menu.zm-position-left > li.zm-right-align > ul, .zetta-menu.zm-position-left > li.zm-right-align > div.zm-multi-column { left: 100%; right: auto; } .zetta-menu.zm-position-left > li.zm-right-align > ul, .zetta-menu.zm-position-left > li.zm-right-align > div.zm-multi-column { right: 100%; } /* ====================== CONTENT DROP DOWN ====================== */ .zetta-menu > li.zm-content-full { position: static; } .zetta-menu > li.zm-content-full > div { width: 100%; } .zetta-menu > li.zm-content > div, .zetta-menu > li.zm-content-full > div { position: absolute; display: none; left: 0; padding: 15px; background-color: DarkOrange; color: #ffffff; } .zetta-menu > li.zm-content > div ul, .zetta-menu > li.zm-content-full > div ul { display: block; position: relative; min-width: 0; } .zetta-menu > li.zm-content > div ul li a, .zetta-menu > li.zm-content-full > div ul li a, .zetta-menu > li.zm-content > div ul li a:visited, .zetta-menu > li.zm-content-full > div ul li a:visited { text-align: center; padding: 15px 0; line-height: 1; color: #ffffff; } .zetta-menu > li.zm-content > div ul li:hover, .zetta-menu > li.zm-content-full > div ul li:hover { background-color: transparent; } .zetta-menu > li.zm-content > div ul li:hover a, .zetta-menu > li.zm-content-full > div ul li:hover a, .zetta-menu > li.zm-content > div ul li:hover a:visited, .zetta-menu > li.zm-content-full > div ul li:hover a:visited { color: #3598dc; text-decoration: underline; } .zetta-menu > li.zm-content > div img, .zetta-menu > li.zm-content-full > div img { width: 100%; margin: 15px 0; } .zetta-menu > li.zm-content > div .zm-video, .zetta-menu > li.zm-content-full > div .zm-video { position: relative; padding-bottom: 56.25%; height: 0; margin: 15px 0; overflow: hidden; } .zetta-menu > li.zm-content > div .zm-video > iframe, .zetta-menu > li.zm-content-full > div .zm-video > iframe { position: absolute; left: 0; top: 0; height: 100%; width: 100%; } .zetta-menu > li.zm-content > div input, .zetta-menu > li.zm-content-full > div input, .zetta-menu > li.zm-content > div textarea, .zetta-menu > li.zm-content-full > div textarea { width: 100%; margin-top: 10px; font: inherit; resize: none; padding: 15px; background-color: #283847; color: #ffffff; } .zetta-menu > li.zm-content > div input.zm-button, .zetta-menu > li.zm-content-full > div input.zm-button, .zetta-menu > li.zm-content > div .zm-button, .zetta-menu > li.zm-content-full > div .zm-button { display: inline-block; text-decoration: none; cursor: pointer; text-align: center; font-weight: normal; background-color: #3598dc; color: #ffffff; padding: 15px; } .zetta-menu > li.zm-content:hover > div, .zetta-menu > li.zm-content-full:hover > div { display: block; } .zetta-menu > li.zm-content > div, .zetta-menu > li.zm-content-full > div { top: 100%; } .zetta-menu.zm-position-bottom > li.zm-content > div, .zetta-menu.zm-position-bottom > li.zm-content-full > div { top: auto; bottom: 100%; } .zetta-menu.zm-position-left > li.zm-content > div, .zetta-menu.zm-position-left > li.zm-content-full > div { top: 0; left: 100%; } .zetta-menu.zm-position-right > li.zm-content > div, .zetta-menu.zm-position-right > li.zm-content-full > div { top: 0; right: 100%; left: auto; } .zetta-menu > li.zm-content.zm-right-align > div, .zetta-menu > li.zm-content-full.zm-right-align > div { left: auto; right: 0; } .zetta-menu.zm-position-left > li.zm-content.zm-right-align > div, .zetta-menu.zm-position-left > li.zm-content-full.zm-right-align > div { left: 100%; right: auto; } /* ====================== GRID SYSTEM ====================== */ .zetta-menu .zm-row { display: block; } .zetta-menu .zm-row .zm-col { display: inline-block; margin-bottom: 5px; padding: 5px; vertical-align: top; float: left; } .zetta-menu .zm-row .zm-col > .zm-grid-wrapper { padding: 15px 20px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background-color: #283847; color: #3598dc; } .zetta-menu .zm-row .zm-col.c-12 { width: 100%; } .zetta-menu .zm-row .zm-col.c-11 { width: 91.66666666666667%; } .zetta-menu .zm-row .zm-col.c-10 { width: 83.33333333333334%; } .zetta-menu .zm-row .zm-col.c-9 { width: 75%; } .zetta-menu .zm-row .zm-col.c-8 { width: 66.66666666666667%; } .zetta-menu .zm-row .zm-col.c-7 { width: 58.333333333333336%; } .zetta-menu .zm-row .zm-col.c-6 { width: 50%; } .zetta-menu .zm-row .zm-col.c-5 { width: 41.66666666666667%; } .zetta-menu .zm-row .zm-col.c-4 { width: 33.333333333333336%; } .zetta-menu .zm-row .zm-col.c-3 { width: 25%; } .zetta-menu .zm-row .zm-col.c-2 { width: 16.666666666666668%; } .zetta-menu .zm-row .zm-col.c-1 { width: 8.333333333333334%; } .zetta-menu .w-1000 { width: 1000px; } .zetta-menu .w-950 { width: 950px; } .zetta-menu .w-900 { width: 900px; } .zetta-menu .w-850 { width: 850px; } .zetta-menu .w-800 { width: 800px; } .zetta-menu .w-750 { width: 750px; } .zetta-menu .w-700 { width: 700px; } .zetta-menu .w-650 { width: 650px; } .zetta-menu .w-600 { width: 600px; } .zetta-menu .w-550 { width: 550px; } .zetta-menu .w-500 { width: 500px; } .zetta-menu .w-450 { width: 450px; } .zetta-menu .w-400 { width: 400px; } .zetta-menu .w-350 { width: 350px; } .zetta-menu .w-300 { width: 300px; } .zetta-menu .w-250 { width: 250px; } .zetta-menu .w-200 { width: 200px; } .zetta-menu .w-150 { width: 150px; } .zetta-menu .w-100 { width: 100px; } .zetta-menu .w-50 { width: 50px; } /* ====================== SEARCH PLACE ====================== */ .zetta-menu .zm-search { position: relative; overflow: hidden; } .zetta-menu .zm-search form > label { position: absolute; cursor: text; left: 0; top: 0; padding: 0 20px; line-height: 50px; } .zetta-menu .zm-search input { height: 50px; padding: 0 27.5px; font-size: inherit; -webkit-appearance: none; width: 0; opacity: 0.01; color: #ffffff; } .zetta-menu .zm-search input:focus { width: 150px; opacity: 1; } .zetta-menu .zm-search input:focus + label { display: none; } .zetta-menu .zm-search input:focus, .zetta-menu .zm-search input:hover { background-color: #3598dc; } .zetta-menu .zm-search:hover { background-color: #3598dc; } .zetta-menu.zm-position-right .zm-search, .zetta-menu.zm-position-left .zm-search { float: none; } .zetta-menu.zm-position-right .zm-search input, .zetta-menu.zm-position-left .zm-search input { width: 100%; } /* ====================== SHOW EFFECTS ====================== */ /* fade */ .zetta-menu.zm-effect-fade > li > div, .zetta-menu.zm-effect-fade li > ul { display: block; visibility: hidden; opacity: 0; -webkit-transition: opacity .4s ease, visibility .4s linear 0s; -moz-transition: opacity .4s ease, visibility .4s linear 0s; -ms-transition: opacity .4s ease, visibility .4s linear 0s; -o-transition: opacity .4s ease, visibility .4s linear 0s; transition: opacity .4s ease, visibility .4s linear 0s; } .zetta-menu.zm-effect-fade > li:hover > div, .zetta-menu.zm-effect-fade li:hover > ul { visibility: visible; opacity: 1; -webkit-transition: opacity .4s ease; -moz-transition: opacity .4s ease; -ms-transition: opacity .4s ease; -o-transition: opacity .4s ease; transition: opacity .4s ease; } /* slide */ .zetta-menu.zm-effect-slide-top > li > div, .zetta-menu.zm-effect-slide-top li > ul { -webkit-transform: translateY(50px); -moz-transform: translateY(50px); -ms-transform: translateY(50px); -o-transform: translateY(50px); transform: translateY(50px); } .zetta-menu.zm-effect-slide-bottom > li > div, .zetta-menu.zm-effect-slide-bottom li > ul { -webkit-transform: translateY(-50px); -moz-transform: translateY(-50px); -ms-transform: translateY(-50px); -o-transform: translateY(-50px); transform: translateY(-50px); } .zetta-menu.zm-effect-slide-left > li > div, .zetta-menu.zm-effect-slide-left li > ul { -webkit-transform: translateX(50px); -moz-transform: translateX(50px); -ms-transform: translateX(50px); -o-transform: translateX(50px); transform: translateX(50px); } .zetta-menu.zm-effect-slide-right > li > div, .zetta-menu.zm-effect-slide-right li > ul { -webkit-transform: translateX(-50px); -moz-transform: translateX(-50px); -ms-transform: translateX(-50px); -o-transform: translateX(-50px); transform: translateX(-50px); } .zetta-menu.zm-effect-slide-top > li > div, .zetta-menu.zm-effect-slide-bottom > li > div, .zetta-menu.zm-effect-slide-left > li > div, .zetta-menu.zm-effect-slide-right > li > div, .zetta-menu.zm-effect-slide-top li > ul, .zetta-menu.zm-effect-slide-bottom li > ul, .zetta-menu.zm-effect-slide-left li > ul, .zetta-menu.zm-effect-slide-right li > ul { display: block !important; visibility: hidden; opacity: 0; -webkit-transition: opacity 0.4s ease, -webkit-transform 0.4s ease, visibility 0.4s linear 0s; -moz-transition: opacity 0.4s ease, -moz-transform 0.4s ease, visibility 0.4s linear 0s; -ms-transition: opacity 0.4s ease, -ms-transform 0.4s ease, visibility 0.4s linear 0s; -o-transition: opacity 0.4s ease, -o-transform 0.4s ease, visibility 0.4s linear 0s; transition: opacity .4s ease, transform .4s ease, visibility .4s linear 0s; } .zetta-menu.zm-effect-slide-top > li:hover > div, .zetta-menu.zm-effect-slide-bottom > li:hover > div, .zetta-menu.zm-effect-slide-left > li:hover > div, .zetta-menu.zm-effect-slide-right > li:hover > div, .zetta-menu.zm-effect-slide-top li:hover > ul, .zetta-menu.zm-effect-slide-bottom li:hover > ul, .zetta-menu.zm-effect-slide-left li:hover > ul, .zetta-menu.zm-effect-slide-right li:hover > ul { visibility: visible; opacity: 1; -webkit-transform: translate(0); -moz-transform: translate(0); -ms-transform: translate(0); -o-transform: translate(0); transform: translate(0); -webkit-transition: opacity 0.4s ease, -webkit-transform 0.4s ease; -moz-transition: opacity 0.4s ease, -moz-transform 0.4s ease; -ms-transition: opacity 0.4s ease, -ms-transform 0.4s ease; -o-transition: opacity 0.4s ease, -o-transform 0.4s ease; transition: opacity .4s ease, transform .4s ease; } /* ====================== RESPONSIVE ====================== */ @media screen and (max-width: 768px) { /* ====================== MAIN ====================== */ .zetta-menu[class*='zm-response'] > li { position: relative; } .zetta-menu[class*='zm-response'] > li > ul, .zetta-menu[class*='zm-response'] > li > div.zm-multi-column > ul, .zetta-menu[class*='zm-response'] > li > ul ul, .zetta-menu[class*='zm-response'] > li > div.zm-multi-column > ul ul { left: 0; right: 0; width: auto !important; margin-right: 0; } .zetta-menu[class*='zm-response'] > li > ul ul, .zetta-menu[class*='zm-response'] > li > div.zm-multi-column > ul ul { top: 100%; margin-left: 50px !important; } .zetta-menu[class*='zm-response'].zm-position-bottom > li > ul ul, .zetta-menu[class*='zm-response'].zm-position-bottom > li > div.zm-multi-column > ul ul, .zetta-menu[class*='zm-response'].zm-position-bottom > li > ul ul.zm-drop-left, .zetta-menu[class*='zm-response'].zm-position-bottom > li > div.zm-multi-column > ul ul.zm-drop-left { left: 0; top: auto; bottom: 100%; } .zetta-menu[class*='zm-response'].zm-position-left > li > ul, .zetta-menu[class*='zm-response'].zm-position-left > li > div.zm-multi-column > ul, .zetta-menu[class*='zm-response'].zm-position-right > li > ul, .zetta-menu[class*='zm-response'].zm-position-right > li > div.zm-multi-column > ul { top: 100%; left: 0; right: 0; } .zetta-menu[class*='zm-response'].zm-position-left > li > ul ul, .zetta-menu[class*='zm-response'].zm-position-left > li > div.zm-multi-column > ul ul, .zetta-menu[class*='zm-response'].zm-position-right > li > ul ul, .zetta-menu[class*='zm-response'].zm-position-right > li > div.zm-multi-column > ul ul, .zetta-menu[class*='zm-response'].zm-position-left > li > ul ul.zm-drop-left, .zetta-menu[class*='zm-response'].zm-position-left > li > div.zm-multi-column > ul ul.zm-drop-left, .zetta-menu[class*='zm-response'].zm-position-right > li > ul ul.zm-drop-left, .zetta-menu[class*='zm-response'].zm-position-right > li > div.zm-multi-column > ul ul.zm-drop-left { left: 0; right: 0; top: 100%; } .zetta-menu[class*='zm-response'].zm-position-left > li.zm-content > div, .zetta-menu[class*='zm-response'].zm-position-left > li.zm-content-full > div, .zetta-menu[class*='zm-response'].zm-position-right > li.zm-content > div, .zetta-menu[class*='zm-response'].zm-position-right > li.zm-content-full > div { top: 100%; left: 0; right: 0; } .zetta-menu[class*='zm-response'] li > div { top: 100%; left: 0 !important; right: 0; width: auto !important; } .zetta-menu[class*='zm-response'] li > div.zm-multi-column > ul { width: 100% !important; } .zetta-menu[class*='zm-response'] .zm-row .zm-col { display: block; margin-right: 0; width: 100% !important; float: none; } .zetta-menu[class*='zm-response'] .w-50, .zetta-menu[class*='zm-response'] .w-100, .zetta-menu[class*='zm-response'] .w-150, .zetta-menu[class*='zm-response'] .w-200, .zetta-menu[class*='zm-response'] .w-250, .zetta-menu[class*='zm-response'] .w-300, .zetta-menu[class*='zm-response'] .w-350, .zetta-menu[class*='zm-response'] .w-400, .zetta-menu[class*='zm-response'] .w-450, .zetta-menu[class*='zm-response'] .w-500, .zetta-menu[class*='zm-response'] .w-550, .zetta-menu[class*='zm-response'] .w-600, .zetta-menu[class*='zm-response'] .w-650, .zetta-menu[class*='zm-response'] .w-700, .zetta-menu[class*='zm-response'] .w-750, .zetta-menu[class*='zm-response'] .w-800, .zetta-menu[class*='zm-response'] .w-850, .zetta-menu[class*='zm-response'] .w-900, .zetta-menu[class*='zm-response'] .w-950, .zetta-menu[class*='zm-response'] .w-1000 { width: 100%; } /* ====================== SIMPLE ====================== */ .zetta-menu.zm-response-simple > li { position: static; } .zetta-menu.zm-response-simple > li > a { font-size: 0; } .zetta-menu.zm-response-simple > li > a i { letter-spacing: 0; } .zetta-menu.zm-response-simple > li > a .zm-caret { display: none; } .zetta-menu.zm-response-simple > li.zm-logo { display: none; } .zetta-menu.zm-response-simple > li.zm-search { position: relative; } /* ====================== STACK ====================== */ .zetta-menu.zm-response-stack > li { display: block; float: none; } .zetta-menu.zm-response-stack > li.zm-content-full { position: relative; } .zetta-menu.zm-response-stack > li.zm-logo { text-align: center; } .zetta-menu.zm-response-stack > li.zm-logo img { position: relative; } .zetta-menu.zm-response-stack > li.zm-logo, .zetta-menu.zm-response-stack > li.zm-right-item { position: relative; width: 100%; } .zetta-menu.zm-response-stack > li > a .zm-caret { float: right; } .zetta-menu.zm-response-stack .zm-search { float: none; } .zetta-menu.zm-response-stack .zm-search input { width: 100%; } /* ====================== SWITCH ====================== */ .zetta-menu.zm-response-switch > li { display: none; float: none; position: relative; width: 100%; } .zetta-menu.zm-response-switch > li.zm-logo { display: block; } .zetta-menu.zm-response-switch > li.zm-logo img { position: relative; z-index: 1; } .zetta-menu.zm-response-switch:before { font-family: FontAwesome; content: '\f0c9'; position: relative; float: right; cursor: pointer; line-height: 50px; height: 50px; padding: 0 20px; z-index: 2; } .zetta-menu.zm-response-switch:hover:before { opacity: 0; } .zetta-menu.zm-response-switch:hover > li { display: block; } .zetta-menu.zm-response-switch > li > a .zm-caret { float: right; } .zetta-menu.zm-response-switch .zm-search { float: none; } .zetta-menu.zm-response-switch .zm-search input { width: 100%; } /* ====================== RESPONSE MARGIN ====================== */ .zetta-menu.zm-response-margin > li > ul, .zetta-menu.zm-response-margin li > div { margin-left: 50px !important; } }
/* * Zetta Menu 1.3.2 * Copyright 2014, nK * 13 June 2014 */ /* ====================== IMPRESSIVE THEME ====================== */ /* ====================== MAIN ====================== */ .zetta-menu { background-color: #ffffff; padding: 10px; margin: 0; display: inline-block; position: relative; } .zetta-menu:before, .zetta-menu ul, .zetta-menu li, .zetta-menu div, .zetta-menu a, .zetta-menu label, .zetta-menu input, .zetta-menu textarea { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; outline: none; border: 0; list-style: none; } .zetta-menu a { cursor: pointer; } .zetta-menu h1, .zetta-menu h2, .zetta-menu h3, .zetta-menu h4, .zetta-menu h5, .zetta-menu h6 { font-weight: normal; text-align: center; margin: 0; padding: 9px 0; color: #555555; border-bottom: 1px solid #555555; } .zetta-menu.zm-full-width { display: block; } .zetta-menu.zm-fixed { position: fixed; top: 0; left: 0; right: 0; } .zetta-menu.zm-fixed.zm-position-left { top: 0; bottom: 0; left: 0; right: auto; } .zetta-menu.zm-fixed.zm-position-right { top: 0; bottom: 0; left: auto; right: 0; } .zetta-menu.zm-fixed.zm-position-bottom { top: auto; bottom: 0; left: 0; right: 0; } .zetta-menu, .zetta-menu a, .zetta-menu a:visited { color: #555555; } .zetta-menu > li { display: block; vertical-align: top; float: left; height: 39px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .zetta-menu > li.zm-right-item { margin-right: 0; float: right; } .zetta-menu > li > a { font-weight: bold; padding: 0 14px; line-height: 39px; } .zetta-menu > li:hover, .zetta-menu > li.zm-active { background-color: #3598dc; } .zetta-menu > li:hover > a, .zetta-menu > li.zm-active > a, .zetta-menu > li:hover > a:visited, .zetta-menu > li.zm-active > a:visited { color: #ffffff; } .zetta-menu li { position: relative; cursor: default; } .zetta-menu li > a { text-decoration: none; display: block; } .zetta-menu li > ul, .zetta-menu li > div { z-index: 1; } .zetta-menu.zm-position-left > li, .zetta-menu.zm-position-right > li { position: relative !important; } .zetta-menu.zm-position-left > li, .zetta-menu.zm-position-right > li, .zetta-menu.zm-position-left > li.zm-logo, .zetta-menu.zm-position-right > li.zm-logo { float: none; } .zetta-menu.zm-position-left > li > a .zm-caret, .zetta-menu.zm-position-right > li > a .zm-caret { float: right; } .zetta-menu .fa { font-size: 12pt; letter-spacing: 13px; line-height: inherit; } .zetta-menu .zm-caret { letter-spacing: 0; float: right; margin-left: 9px; } .zetta-menu > li > a .zm-caret { float: none; } .zetta-menu .zm-single-icon { letter-spacing: 0; } .zetta-menu:after { content: ''; display: block; clear: both; } /* ====================== LOGO ====================== */ .zetta-menu > li.zm-logo { float: left; margin-left: 0; font-size: 0; } .zetta-menu > li.zm-logo a { padding: 0; line-height: 0; } .zetta-menu > li.zm-logo img { max-width: 100%; max-height: 100%; border: none; } /* ====================== MENU DROP DOWN ====================== */ .zetta-menu ul, .zetta-menu div.zm-multi-column { position: absolute; display: none; } .zetta-menu ul { padding: 10px; } .zetta-menu ul > li { min-height: 39px; } .zetta-menu ul > li a { padding: 0 14px; line-height: 39px; } .zetta-menu > li > ul, .zetta-menu > li > ul ul, .zetta-menu .zm-multi-column, .zetta-menu .zm-multi-column > ul ul { background-color: #ffffff; color: #555555; -webkit-box-shadow: inset 0px 0px 0px 1px #eeeeee; -moz-box-shadow: inset 0px 0px 0px 1px #eeeeee; box-shadow: inset 0px 0px 0px 1px #eeeeee; } .zetta-menu > li > ul li, .zetta-menu > li > ul ul li, .zetta-menu .zm-multi-column li, .zetta-menu .zm-multi-column > ul ul li { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .zetta-menu > li > ul li > a, .zetta-menu > li > ul ul li > a, .zetta-menu .zm-multi-column li > a, .zetta-menu .zm-multi-column > ul ul li > a, .zetta-menu > li > ul li > a:visited, .zetta-menu > li > ul ul li > a:visited, .zetta-menu .zm-multi-column li > a:visited, .zetta-menu .zm-multi-column > ul ul li > a:visited { color: #555555; } .zetta-menu > li > ul li:hover, .zetta-menu > li > ul ul li:hover, .zetta-menu .zm-multi-column li:hover, .zetta-menu .zm-multi-column > ul ul li:hover { background-color: #eeeeee; } .zetta-menu > li > ul, .zetta-menu > li > div.zm-multi-column { top: 100%; left: 0; } .zetta-menu > li > ul ul, .zetta-menu > li > div.zm-multi-column ul { top: 0; left: 100%; } .zetta-menu > li > ul ul.zm-drop-left, .zetta-menu > li > div.zm-multi-column ul.zm-drop-left { left: auto; right: 100%; } .zetta-menu.zm-position-bottom > li > ul, .zetta-menu.zm-position-bottom > li > div.zm-multi-column { top: auto; bottom: 100%; left: 0; } .zetta-menu.zm-position-bottom > li > ul ul, .zetta-menu.zm-position-bottom > li > div.zm-multi-column ul { top: auto; bottom: 0; left: 100%; } .zetta-menu.zm-position-bottom > li > ul ul.zm-drop-left, .zetta-menu.zm-position-bottom > li > div.zm-multi-column ul.zm-drop-left { left: -100%; } .zetta-menu.zm-position-left > li > ul, .zetta-menu.zm-position-left > li > div.zm-multi-column { top: 0; left: 100%; } .zetta-menu.zm-position-left > li > ul ul.zm-drop-left, .zetta-menu.zm-position-left > li > div.zm-multi-column ul.zm-drop-left { top: 0; left: 100%; } .zetta-menu.zm-position-right > li > ul, .zetta-menu.zm-position-right > li > div.zm-multi-column { top: 0; left: auto; right: 100%; } .zetta-menu.zm-position-right > li > ul ul.zm-drop-left, .zetta-menu.zm-position-right > li > div.zm-multi-column ul.zm-drop-left { top: 0; left: auto; right: 100%; } .zetta-menu.zm-position-right > li > ul ul, .zetta-menu.zm-position-right > li > div.zm-multi-column > ul ul { top: 0; left: auto; right: 100%; } .zetta-menu li:hover > ul, .zetta-menu li:hover > div.zm-multi-column, .zetta-menu li:hover > div.zm-multi-column > ul { display: block; } .zetta-menu li > div.zm-multi-column > ul, .zetta-menu.zm-position-bottom li > div.zm-multi-column > ul { left: 0; float: left; } .zetta-menu > li > div.zm-multi-column > ul { position: relative; display: inline-block; } .zetta-menu > li.zm-right-align > ul, .zetta-menu > li.zm-right-align > div.zm-multi-column { left: auto; right: 0; } .zetta-menu.zm-position-left > li.zm-right-align > ul, .zetta-menu.zm-position-left > li.zm-right-align > div.zm-multi-column { left: 100%; right: auto; } .zetta-menu.zm-position-left > li.zm-right-align > ul, .zetta-menu.zm-position-left > li.zm-right-align > div.zm-multi-column { right: 100%; } /* ====================== CONTENT DROP DOWN ====================== */ .zetta-menu > li.zm-content-full { position: static; } .zetta-menu > li.zm-content-full > div { width: 100%; } .zetta-menu > li.zm-content > div, .zetta-menu > li.zm-content-full > div { position: absolute; display: none; left: 0; padding: 9px 14px; background-color: #ffffff; color: #555555; -webkit-box-shadow: inset 0px 0px 0px 1px #eeeeee; -moz-box-shadow: inset 0px 0px 0px 1px #eeeeee; box-shadow: inset 0px 0px 0px 1px #eeeeee; } .zetta-menu > li.zm-content > div ul, .zetta-menu > li.zm-content-full > div ul { display: block; position: relative; min-width: 0; -webkit-box-shadow: 0px 0px 0px 1px #eeeeee; -moz-box-shadow: 0px 0px 0px 1px #eeeeee; box-shadow: 0px 0px 0px 1px #eeeeee; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .zetta-menu > li.zm-content > div ul li a, .zetta-menu > li.zm-content-full > div ul li a, .zetta-menu > li.zm-content > div ul li a:visited, .zetta-menu > li.zm-content-full > div ul li a:visited { text-align: center; padding: 9px 0; line-height: 1; color: #555555; } .zetta-menu > li.zm-content > div ul li:hover, .zetta-menu > li.zm-content-full > div ul li:hover { background-color: transparent; } .zetta-menu > li.zm-content > div ul li:hover a, .zetta-menu > li.zm-content-full > div ul li:hover a, .zetta-menu > li.zm-content > div ul li:hover a:visited, .zetta-menu > li.zm-content-full > div ul li:hover a:visited { color: #555555; text-decoration: underline; } .zetta-menu > li.zm-content > div img, .zetta-menu > li.zm-content-full > div img { width: 100%; margin: 9px 0; } .zetta-menu > li.zm-content > div .zm-video, .zetta-menu > li.zm-content-full > div .zm-video { position: relative; padding-bottom: 56.25%; height: 0; margin: 9px 0; overflow: hidden; } .zetta-menu > li.zm-content > div .zm-video > iframe, .zetta-menu > li.zm-content-full > div .zm-video > iframe { position: absolute; left: 0; top: 0; height: 100%; width: 100%; } .zetta-menu > li.zm-content > div input, .zetta-menu > li.zm-content-full > div input, .zetta-menu > li.zm-content > div textarea, .zetta-menu > li.zm-content-full > div textarea { width: 100%; margin-top: 10px; font: inherit; resize: none; padding: 12px; background-color: #eeeeee; color: #555555; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .zetta-menu > li.zm-content > div input:hover, .zetta-menu > li.zm-content-full > div input:hover, .zetta-menu > li.zm-content > div textarea:hover, .zetta-menu > li.zm-content-full > div textarea:hover { -webkit-box-shadow: #eeeeee; -moz-box-shadow: #eeeeee; box-shadow: #eeeeee; } .zetta-menu > li.zm-content > div input.zm-button, .zetta-menu > li.zm-content-full > div input.zm-button, .zetta-menu > li.zm-content > div .zm-button, .zetta-menu > li.zm-content-full > div .zm-button { display: inline-block; text-decoration: none; cursor: pointer; text-align: center; font-weight: normal; background-color: #3598dc; color: #555555; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding: 12px; } .zetta-menu > li.zm-content > div input.zm-button:hover, .zetta-menu > li.zm-content-full > div input.zm-button:hover, .zetta-menu > li.zm-content > div .zm-button:hover, .zetta-menu > li.zm-content-full > div .zm-button:hover { color: #ffffff; } .zetta-menu > li.zm-content:hover > div, .zetta-menu > li.zm-content-full:hover > div { display: block; } .zetta-menu > li.zm-content > div, .zetta-menu > li.zm-content-full > div { top: 100%; } .zetta-menu.zm-position-bottom > li.zm-content > div, .zetta-menu.zm-position-bottom > li.zm-content-full > div { top: auto; bottom: 100%; } .zetta-menu.zm-position-left > li.zm-content > div, .zetta-menu.zm-position-left > li.zm-content-full > div { top: 0; left: 100%; } .zetta-menu.zm-position-right > li.zm-content > div, .zetta-menu.zm-position-right > li.zm-content-full > div { top: 0; right: 100%; left: auto; } .zetta-menu > li.zm-content.zm-right-align > div, .zetta-menu > li.zm-content-full.zm-right-align > div { left: auto; right: 0; } .zetta-menu.zm-position-left > li.zm-content.zm-right-align > div, .zetta-menu.zm-position-left > li.zm-content-full.zm-right-align > div { left: 100%; right: auto; } /* ====================== GRID SYSTEM ====================== */ .zetta-menu .zm-row { display: block; } .zetta-menu .zm-row .zm-col { display: inline-block; margin-bottom: 5px; padding: 5px; vertical-align: top; float: left; } .zetta-menu .zm-row .zm-col > .zm-grid-wrapper { padding: 14px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background-color: #eeeeee; color: #555555; } .zetta-menu .zm-row .zm-col.c-12 { width: 100%; } .zetta-menu .zm-row .zm-col.c-11 { width: 91.66666666666667%; } .zetta-menu .zm-row .zm-col.c-10 { width: 83.33333333333334%; } .zetta-menu .zm-row .zm-col.c-9 { width: 75%; } .zetta-menu .zm-row .zm-col.c-8 { width: 66.66666666666667%; } .zetta-menu .zm-row .zm-col.c-7 { width: 58.333333333333336%; } .zetta-menu .zm-row .zm-col.c-6 { width: 50%; } .zetta-menu .zm-row .zm-col.c-5 { width: 41.66666666666667%; } .zetta-menu .zm-row .zm-col.c-4 { width: 33.333333333333336%; } .zetta-menu .zm-row .zm-col.c-3 { width: 25%; } .zetta-menu .zm-row .zm-col.c-2 { width: 16.666666666666668%; } .zetta-menu .zm-row .zm-col.c-1 { width: 8.333333333333334%; } .zetta-menu .w-1000 { width: 1000px; } .zetta-menu .w-950 { width: 950px; } .zetta-menu .w-900 { width: 900px; } .zetta-menu .w-850 { width: 850px; } .zetta-menu .w-800 { width: 800px; } .zetta-menu .w-750 { width: 750px; } .zetta-menu .w-700 { width: 700px; } .zetta-menu .w-650 { width: 650px; } .zetta-menu .w-600 { width: 600px; } .zetta-menu .w-550 { width: 550px; } .zetta-menu .w-500 { width: 500px; } .zetta-menu .w-450 { width: 450px; } .zetta-menu .w-400 { width: 400px; } .zetta-menu .w-350 { width: 350px; } .zetta-menu .w-300 { width: 300px; } .zetta-menu .w-250 { width: 250px; } .zetta-menu .w-200 { width: 200px; } .zetta-menu .w-150 { width: 150px; } .zetta-menu .w-100 { width: 100px; } .zetta-menu .w-50 { width: 50px; } /* ====================== SEARCH PLACE ====================== */ .zetta-menu .zm-search { position: relative; overflow: hidden; } .zetta-menu .zm-search form > label { position: absolute; cursor: text; left: 0; top: 0; padding: 0 14px; line-height: 39px; } .zetta-menu .zm-search input { height: 39px; padding: 0 21.5px; font-size: inherit; -webkit-appearance: none; width: 0; opacity: 0.01; color: #ffffff; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .zetta-menu .zm-search input:focus { width: 150px; opacity: 1; } .zetta-menu .zm-search input:focus + label { display: none; } .zetta-menu .zm-search input:focus, .zetta-menu .zm-search input:hover { background-color: #eeeeee; color: #555555; } .zetta-menu .zm-search:hover { background-color: #eeeeee; color: #555555; } .zetta-menu.zm-position-right .zm-search, .zetta-menu.zm-position-left .zm-search { float: none; } .zetta-menu.zm-position-right .zm-search input, .zetta-menu.zm-position-left .zm-search input { width: 100%; } /* ====================== SHOW EFFECTS ====================== */ /* fade */ .zetta-menu.zm-effect-fade > li > div, .zetta-menu.zm-effect-fade li > ul { display: block; visibility: hidden; opacity: 0; -webkit-transition: opacity .4s ease, visibility .4s linear 0s; -moz-transition: opacity .4s ease, visibility .4s linear 0s; -ms-transition: opacity .4s ease, visibility .4s linear 0s; -o-transition: opacity .4s ease, visibility .4s linear 0s; transition: opacity .4s ease, visibility .4s linear 0s; } .zetta-menu.zm-effect-fade > li:hover > div, .zetta-menu.zm-effect-fade li:hover > ul { visibility: visible; opacity: 1; -webkit-transition: opacity .4s ease; -moz-transition: opacity .4s ease; -ms-transition: opacity .4s ease; -o-transition: opacity .4s ease; transition: opacity .4s ease; } /* slide */ .zetta-menu.zm-effect-slide-top > li > div, .zetta-menu.zm-effect-slide-top li > ul { -webkit-transform: translateY(50px); -moz-transform: translateY(50px); -ms-transform: translateY(50px); -o-transform: translateY(50px); transform: translateY(50px); } .zetta-menu.zm-effect-slide-bottom > li > div, .zetta-menu.zm-effect-slide-bottom li > ul { -webkit-transform: translateY(-50px); -moz-transform: translateY(-50px); -ms-transform: translateY(-50px); -o-transform: translateY(-50px); transform: translateY(-50px); } .zetta-menu.zm-effect-slide-left > li > div, .zetta-menu.zm-effect-slide-left li > ul { -webkit-transform: translateX(50px); -moz-transform: translateX(50px); -ms-transform: translateX(50px); -o-transform: translateX(50px); transform: translateX(50px); } .zetta-menu.zm-effect-slide-right > li > div, .zetta-menu.zm-effect-slide-right li > ul { -webkit-transform: translateX(-50px); -moz-transform: translateX(-50px); -ms-transform: translateX(-50px); -o-transform: translateX(-50px); transform: translateX(-50px); } .zetta-menu.zm-effect-slide-top > li > div, .zetta-menu.zm-effect-slide-bottom > li > div, .zetta-menu.zm-effect-slide-left > li > div, .zetta-menu.zm-effect-slide-right > li > div, .zetta-menu.zm-effect-slide-top li > ul, .zetta-menu.zm-effect-slide-bottom li > ul, .zetta-menu.zm-effect-slide-left li > ul, .zetta-menu.zm-effect-slide-right li > ul { display: block !important; visibility: hidden; opacity: 0; -webkit-transition: opacity 0.4s ease, -webkit-transform 0.4s ease, visibility 0.4s linear 0s; -moz-transition: opacity 0.4s ease, -moz-transform 0.4s ease, visibility 0.4s linear 0s; -ms-transition: opacity 0.4s ease, -ms-transform 0.4s ease, visibility 0.4s linear 0s; -o-transition: opacity 0.4s ease, -o-transform 0.4s ease, visibility 0.4s linear 0s; transition: opacity .4s ease, transform .4s ease, visibility .4s linear 0s; } .zetta-menu.zm-effect-slide-top > li:hover > div, .zetta-menu.zm-effect-slide-bottom > li:hover > div, .zetta-menu.zm-effect-slide-left > li:hover > div, .zetta-menu.zm-effect-slide-right > li:hover > div, .zetta-menu.zm-effect-slide-top li:hover > ul, .zetta-menu.zm-effect-slide-bottom li:hover > ul, .zetta-menu.zm-effect-slide-left li:hover > ul, .zetta-menu.zm-effect-slide-right li:hover > ul { visibility: visible; opacity: 1; -webkit-transform: translate(0); -moz-transform: translate(0); -ms-transform: translate(0); -o-transform: translate(0); transform: translate(0); -webkit-transition: opacity 0.4s ease, -webkit-transform 0.4s ease; -moz-transition: opacity 0.4s ease, -moz-transform 0.4s ease; -ms-transition: opacity 0.4s ease, -ms-transform 0.4s ease; -o-transition: opacity 0.4s ease, -o-transform 0.4s ease; transition: opacity .4s ease, transform .4s ease; } .zetta-menu > li + li { margin-left: 10px; } .zetta-menu.zm-position-left > li + li, .zetta-menu.zm-position-right > li + li { margin-left: 0; margin-top: 10px; } .zetta-menu > li > ul > li + li, .zetta-menu > li > ul ul > li + li, .zetta-menu .zm-multi-column ul > li + li { margin-top: 10px; } /* ====================== MAIN ROUNDED CORNERS ====================== */ .zetta-menu { -webkit-border-radius: 5px 5px 5px 5px; -moz-border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px; } /* ====================== DROP ROUNDED CORNERS ====================== */ .zetta-menu > li > ul, .zetta-menu > li > ul ul, .zetta-menu > li > div, .zetta-menu .zm-multi-column > ul ul { -webkit-border-radius: 5px 5px 5px 5px; -moz-border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px; } /* ====================== ARROWS ====================== */ .zetta-menu > li > ul:before, .zetta-menu > li > .zm-multi-column:before, .zetta-menu > .zm-content > div:before { content: ''; position: absolute; left: 0; top: 0; border-left: 0 solid transparent; border-right: 0 solid transparent; border-bottom: 0 solid #bbbbbb; } .zetta-menu > li > ul li > ul:before, .zetta-menu > li > .zm-multi-column li > ul:before, .zetta-menu > .zm-content > div li > ul:before { content: ''; position: absolute; left: 0; top: 0; border-top: 0 solid transparent; border-bottom: 0 solid transparent; border-right: 0 solid #bbbbbb; } .zetta-menu > li > ul li > ul.zm-drop-left:before, .zetta-menu > li > .zm-multi-column li > ul.zm-drop-left:before, .zetta-menu > .zm-content > div li > ul.zm-drop-left:before { left: auto; right: 0; border-left: 0 solid #bbbbbb; border-right: none; } .zetta-menu > li.zm-right-align > ul:before, .zetta-menu > li.zm-right-align > .zm-multi-column:before, .zetta-menu > li.zm-right-align.zm-content > div:before { left: auto; right: 0; } .zetta-menu.zm-position-bottom > li > ul:before, .zetta-menu.zm-position-bottom > li > .zm-multi-column:before, .zetta-menu.zm-position-bottom > .zm-content > div:before { top: auto; bottom: 0; border-bottom: none; border-top: 0 solid #bbbbbb; } .zetta-menu.zm-position-bottom > li > ul li > ul:before, .zetta-menu.zm-position-bottom > li > .zm-multi-column li > ul:before, .zetta-menu.zm-position-bottom > .zm-content > div li > ul:before { top: auto; bottom: 0; } .zetta-menu.zm-position-left > li > ul:before, .zetta-menu.zm-position-left > li > .zm-multi-column:before, .zetta-menu.zm-position-left > .zm-content > div:before { top: 0; left: 0; border-left: none; border-top: 0 solid transparent; border-bottom: 0 solid transparent; border-right: 0 solid #bbbbbb; } .zetta-menu.zm-position-right > li > ul:before, .zetta-menu.zm-position-right > li > .zm-multi-column:before, .zetta-menu.zm-position-right > .zm-content > div:before, .zetta-menu.zm-position-right > li > ul li > ul:before, .zetta-menu.zm-position-right > li > .zm-multi-column li > ul:before, .zetta-menu.zm-position-right > .zm-content > div li > ul:before { top: 0; right: 0; left: auto; border-right: none; border-top: 0 solid transparent; border-bottom: 0 solid transparent; border-left: 0 solid #bbbbbb; } /* ====================== RESPONSIVE ====================== */ @media screen and (max-width: 768px) { /* ====================== MAIN ====================== */ .zetta-menu[class*='zm-response'] > li { position: relative; } .zetta-menu[class*='zm-response'] > li > ul, .zetta-menu[class*='zm-response'] > li > div.zm-multi-column > ul, .zetta-menu[class*='zm-response'] > li > ul ul, .zetta-menu[class*='zm-response'] > li > div.zm-multi-column > ul ul { left: 0; right: 0; width: auto !important; margin-right: 0; } .zetta-menu[class*='zm-response'] > li > ul ul, .zetta-menu[class*='zm-response'] > li > div.zm-multi-column > ul ul { top: 100%; margin-left: 39px !important; } .zetta-menu[class*='zm-response'].zm-position-bottom > li > ul ul, .zetta-menu[class*='zm-response'].zm-position-bottom > li > div.zm-multi-column > ul ul, .zetta-menu[class*='zm-response'].zm-position-bottom > li > ul ul.zm-drop-left, .zetta-menu[class*='zm-response'].zm-position-bottom > li > div.zm-multi-column > ul ul.zm-drop-left { left: 0; top: auto; bottom: 100%; } .zetta-menu[class*='zm-response'].zm-position-left > li > ul, .zetta-menu[class*='zm-response'].zm-position-left > li > div.zm-multi-column > ul, .zetta-menu[class*='zm-response'].zm-position-right > li > ul, .zetta-menu[class*='zm-response'].zm-position-right > li > div.zm-multi-column > ul { top: 100%; left: 0; right: 0; } .zetta-menu[class*='zm-response'].zm-position-left > li > ul ul, .zetta-menu[class*='zm-response'].zm-position-left > li > div.zm-multi-column > ul ul, .zetta-menu[class*='zm-response'].zm-position-right > li > ul ul, .zetta-menu[class*='zm-response'].zm-position-right > li > div.zm-multi-column > ul ul, .zetta-menu[class*='zm-response'].zm-position-left > li > ul ul.zm-drop-left, .zetta-menu[class*='zm-response'].zm-position-left > li > div.zm-multi-column > ul ul.zm-drop-left, .zetta-menu[class*='zm-response'].zm-position-right > li > ul ul.zm-drop-left, .zetta-menu[class*='zm-response'].zm-position-right > li > div.zm-multi-column > ul ul.zm-drop-left { left: 0; right: 0; top: 100%; } .zetta-menu[class*='zm-response'].zm-position-left > li.zm-content > div, .zetta-menu[class*='zm-response'].zm-position-left > li.zm-content-full > div, .zetta-menu[class*='zm-response'].zm-position-right > li.zm-content > div, .zetta-menu[class*='zm-response'].zm-position-right > li.zm-content-full > div { top: 100%; left: 0; right: 0; } .zetta-menu[class*='zm-response'] li > div { top: 100%; left: 0 !important; right: 0; width: auto !important; } .zetta-menu[class*='zm-response'] li > div.zm-multi-column > ul { width: 100% !important; } .zetta-menu[class*='zm-response'] .zm-row .zm-col { display: block; margin-right: 0; width: 100% !important; float: none; } .zetta-menu[class*='zm-response'] .w-50, .zetta-menu[class*='zm-response'] .w-100, .zetta-menu[class*='zm-response'] .w-150, .zetta-menu[class*='zm-response'] .w-200, .zetta-menu[class*='zm-response'] .w-250, .zetta-menu[class*='zm-response'] .w-300, .zetta-menu[class*='zm-response'] .w-350, .zetta-menu[class*='zm-response'] .w-400, .zetta-menu[class*='zm-response'] .w-450, .zetta-menu[class*='zm-response'] .w-500, .zetta-menu[class*='zm-response'] .w-550, .zetta-menu[class*='zm-response'] .w-600, .zetta-menu[class*='zm-response'] .w-650, .zetta-menu[class*='zm-response'] .w-700, .zetta-menu[class*='zm-response'] .w-750, .zetta-menu[class*='zm-response'] .w-800, .zetta-menu[class*='zm-response'] .w-850, .zetta-menu[class*='zm-response'] .w-900, .zetta-menu[class*='zm-response'] .w-950, .zetta-menu[class*='zm-response'] .w-1000 { width: 100%; } /* ====================== SIMPLE ====================== */ .zetta-menu.zm-response-simple > li { position: static; } .zetta-menu.zm-response-simple > li > a { font-size: 0; } .zetta-menu.zm-response-simple > li > a i { letter-spacing: 0; } .zetta-menu.zm-response-simple > li > a .zm-caret { display: none; } .zetta-menu.zm-response-simple > li.zm-logo { display: none; } .zetta-menu.zm-response-simple > li.zm-search { position: relative; } /* ====================== STACK ====================== */ .zetta-menu.zm-response-stack > li { display: block; float: none; } .zetta-menu.zm-response-stack > li + li { margin-left: 0; margin-top: 10px; } .zetta-menu.zm-response-stack > li.zm-content-full { position: relative; } .zetta-menu.zm-response-stack > li.zm-logo { text-align: center; } .zetta-menu.zm-response-stack > li.zm-logo img { position: relative; } .zetta-menu.zm-response-stack > li.zm-logo, .zetta-menu.zm-response-stack > li.zm-right-item { position: relative; width: 100%; } .zetta-menu.zm-response-stack > li > a .zm-caret { float: right; } .zetta-menu.zm-response-stack .zm-search { float: none; } .zetta-menu.zm-response-stack .zm-search input { width: 100%; } /* ====================== SWITCH ====================== */ .zetta-menu.zm-response-switch > li { display: none; float: none; position: relative; width: 100%; } .zetta-menu.zm-response-switch > li + li { margin-left: 0; margin-top: 10px; } .zetta-menu.zm-response-switch > li.zm-logo { display: block; } .zetta-menu.zm-response-switch > li.zm-logo img { position: relative; z-index: 1; } .zetta-menu.zm-response-switch:before { font-family: FontAwesome; content: '\f0c9'; position: relative; float: right; cursor: pointer; line-height: 39px; height: 39px; padding: 0 14px; z-index: 2; } .zetta-menu.zm-response-switch:hover:before { opacity: 0; } .zetta-menu.zm-response-switch:hover > li { display: block; } .zetta-menu.zm-response-switch > li > a .zm-caret { float: right; } .zetta-menu.zm-response-switch .zm-search { float: none; } .zetta-menu.zm-response-switch .zm-search input { width: 100%; } /* ====================== RESPONSE MARGIN ====================== */ .zetta-menu.zm-response-margin > li > ul, .zetta-menu.zm-response-margin li > div { margin-left: 39px !important; } }
/* * Zetta Menu 1.3.2 * Copyright 2014, nK * 13 June 2014 */ /* ====================== INSPIRE THEME ====================== */ /* ====================== MAIN ====================== */ .zetta-menu { background-color: #34495e; padding: 0 5px; margin: 0; display: inline-block; position: relative; } .zetta-menu:before, .zetta-menu ul, .zetta-menu li, .zetta-menu div, .zetta-menu a, .zetta-menu label, .zetta-menu input, .zetta-menu textarea { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; outline: none; border: 0; list-style: none; } .zetta-menu a { cursor: pointer; } .zetta-menu h1, .zetta-menu h2, .zetta-menu h3, .zetta-menu h4, .zetta-menu h5, .zetta-menu h6 { font-weight: normal; text-align: center; margin: 0; padding: 15px 0; color: #3498db; border-bottom: 1px solid #3498db; } .zetta-menu.zm-full-width { display: block; } .zetta-menu.zm-fixed { position: fixed; top: 0; left: 0; right: 0; } .zetta-menu.zm-fixed.zm-position-left { top: 0; bottom: 0; left: 0; right: auto; } .zetta-menu.zm-fixed.zm-position-right { top: 0; bottom: 0; left: auto; right: 0; } .zetta-menu.zm-fixed.zm-position-bottom { top: auto; bottom: 0; left: 0; right: 0; } .zetta-menu, .zetta-menu a, .zetta-menu a:visited { color: #ffffff; } .zetta-menu > li { display: block; vertical-align: top; float: left; height: 50px; } .zetta-menu > li.zm-right-item { margin-right: 0; float: right; } .zetta-menu > li > a { font-weight: normal; padding: 0 20px; line-height: 50px; } .zetta-menu > li:hover, .zetta-menu > li.zm-active { background-color: #3498db; } .zetta-menu > li:hover > a, .zetta-menu > li.zm-active > a, .zetta-menu > li:hover > a:visited, .zetta-menu > li.zm-active > a:visited { color: #34495e; } .zetta-menu li { position: relative; cursor: default; } .zetta-menu li > a { text-decoration: none; display: block; } .zetta-menu li > ul, .zetta-menu li > div { z-index: 1; } .zetta-menu.zm-position-left > li, .zetta-menu.zm-position-right > li { position: relative !important; } .zetta-menu.zm-position-left > li, .zetta-menu.zm-position-right > li, .zetta-menu.zm-position-left > li.zm-logo, .zetta-menu.zm-position-right > li.zm-logo { float: none; } .zetta-menu.zm-position-left > li > a .zm-caret, .zetta-menu.zm-position-right > li > a .zm-caret { float: right; } .zetta-menu .fa { font-size: 12pt; letter-spacing: 13px; line-height: inherit; } .zetta-menu .zm-caret { letter-spacing: 0; float: right; margin-left: 15px; } .zetta-menu > li > a .zm-caret { float: none; } .zetta-menu .zm-single-icon { letter-spacing: 0; } .zetta-menu:after { content: ''; display: block; clear: both; } .zetta-menu li, .zetta-menu li > a, .zetta-menu input, .zetta-menu textarea, .zetta-menu .zm-button { -webkit-transition: all 0.35s; -moz-transition: all 0.35s; -ms-transition: all 0.35s; -o-transition: all 0.35s; transition: all 0.35s; } /* ====================== LOGO ====================== */ .zetta-menu > li.zm-logo { float: left; margin-left: 0; font-size: 0; } .zetta-menu > li.zm-logo a { padding: 0; line-height: 0; } .zetta-menu > li.zm-logo img { max-width: 100%; max-height: 100%; border: none; } /* ====================== MENU DROP DOWN ====================== */ .zetta-menu ul, .zetta-menu div.zm-multi-column { position: absolute; display: none; } .zetta-menu ul { padding: 5px 0; } .zetta-menu ul > li { min-height: 50px; } .zetta-menu ul > li a { padding: 0 20px; line-height: 50px; } .zetta-menu > li > ul, .zetta-menu > li > ul ul, .zetta-menu .zm-multi-column, .zetta-menu .zm-multi-column > ul ul { background-color: #2c3e50; color: #ffffff; -webkit-box-shadow: inset 0px 0px 1px 1px #273646; -moz-box-shadow: inset 0px 0px 1px 1px #273646; box-shadow: inset 0px 0px 1px 1px #273646; } .zetta-menu > li > ul li > a, .zetta-menu > li > ul ul li > a, .zetta-menu .zm-multi-column li > a, .zetta-menu .zm-multi-column > ul ul li > a, .zetta-menu > li > ul li > a:visited, .zetta-menu > li > ul ul li > a:visited, .zetta-menu .zm-multi-column li > a:visited, .zetta-menu .zm-multi-column > ul ul li > a:visited { color: #ffffff; } .zetta-menu > li > ul li:hover, .zetta-menu > li > ul ul li:hover, .zetta-menu .zm-multi-column li:hover, .zetta-menu .zm-multi-column > ul ul li:hover { background-color: #273646; } .zetta-menu > li > ul li:hover > a, .zetta-menu > li > ul ul li:hover > a, .zetta-menu .zm-multi-column li:hover > a, .zetta-menu .zm-multi-column > ul ul li:hover > a, .zetta-menu > li > ul li:hover > a:visited, .zetta-menu > li > ul ul li:hover > a:visited, .zetta-menu .zm-multi-column li:hover > a:visited, .zetta-menu .zm-multi-column > ul ul li:hover > a:visited { color: #3498db; } .zetta-menu > li > ul, .zetta-menu > li > div.zm-multi-column { top: 100%; left: 0; } .zetta-menu > li > ul ul, .zetta-menu > li > div.zm-multi-column ul { top: 0; left: 100%; } .zetta-menu > li > ul ul.zm-drop-left, .zetta-menu > li > div.zm-multi-column ul.zm-drop-left { left: auto; right: 100%; } .zetta-menu.zm-position-bottom > li > ul, .zetta-menu.zm-position-bottom > li > div.zm-multi-column { top: auto; bottom: 100%; left: 0; } .zetta-menu.zm-position-bottom > li > ul ul, .zetta-menu.zm-position-bottom > li > div.zm-multi-column ul { top: auto; bottom: 0; left: 100%; } .zetta-menu.zm-position-bottom > li > ul ul.zm-drop-left, .zetta-menu.zm-position-bottom > li > div.zm-multi-column ul.zm-drop-left { left: -100%; } .zetta-menu.zm-position-left > li > ul, .zetta-menu.zm-position-left > li > div.zm-multi-column { top: 0; left: 100%; } .zetta-menu.zm-position-left > li > ul ul.zm-drop-left, .zetta-menu.zm-position-left > li > div.zm-multi-column ul.zm-drop-left { top: 0; left: 100%; } .zetta-menu.zm-position-right > li > ul, .zetta-menu.zm-position-right > li > div.zm-multi-column { top: 0; left: auto; right: 100%; } .zetta-menu.zm-position-right > li > ul ul.zm-drop-left, .zetta-menu.zm-position-right > li > div.zm-multi-column ul.zm-drop-left { top: 0; left: auto; right: 100%; } .zetta-menu.zm-position-right > li > ul ul, .zetta-menu.zm-position-right > li > div.zm-multi-column > ul ul { top: 0; left: auto; right: 100%; } .zetta-menu li:hover > ul, .zetta-menu li:hover > div.zm-multi-column, .zetta-menu li:hover > div.zm-multi-column > ul { display: block; } .zetta-menu li > div.zm-multi-column > ul, .zetta-menu.zm-position-bottom li > div.zm-multi-column > ul { left: 0; float: left; } .zetta-menu > li > div.zm-multi-column > ul { position: relative; display: inline-block; } .zetta-menu > li.zm-right-align > ul, .zetta-menu > li.zm-right-align > div.zm-multi-column { left: auto; right: 0; } .zetta-menu.zm-position-left > li.zm-right-align > ul, .zetta-menu.zm-position-left > li.zm-right-align > div.zm-multi-column { left: 100%; right: auto; } .zetta-menu.zm-position-left > li.zm-right-align > ul, .zetta-menu.zm-position-left > li.zm-right-align > div.zm-multi-column { right: 100%; } /* ====================== CONTENT DROP DOWN ====================== */ .zetta-menu > li.zm-content-full { position: static; } .zetta-menu > li.zm-content-full > div { width: 100%; } .zetta-menu > li.zm-content > div, .zetta-menu > li.zm-content-full > div { position: absolute; display: none; left: 0; padding: 15px 20px; background-color: #2c3e50; color: #ffffff; -webkit-box-shadow: inset 0px 0px 1px 1px #273646; -moz-box-shadow: inset 0px 0px 1px 1px #273646; box-shadow: inset 0px 0px 1px 1px #273646; } .zetta-menu > li.zm-content > div ul, .zetta-menu > li.zm-content-full > div ul { display: block; position: relative; min-width: 0; -webkit-box-shadow: inset 0px 0px 1px 1px #273646; -moz-box-shadow: inset 0px 0px 1px 1px #273646; box-shadow: inset 0px 0px 1px 1px #273646; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .zetta-menu > li.zm-content > div ul li a, .zetta-menu > li.zm-content-full > div ul li a, .zetta-menu > li.zm-content > div ul li a:visited, .zetta-menu > li.zm-content-full > div ul li a:visited { text-align: center; padding: 15px 0; line-height: 1; color: #ffffff; } .zetta-menu > li.zm-content > div ul li:hover, .zetta-menu > li.zm-content-full > div ul li:hover { background-color: transparent; } .zetta-menu > li.zm-content > div ul li:hover a, .zetta-menu > li.zm-content-full > div ul li:hover a, .zetta-menu > li.zm-content > div ul li:hover a:visited, .zetta-menu > li.zm-content-full > div ul li:hover a:visited { color: #3498db; text-decoration: underline; } .zetta-menu > li.zm-content > div img, .zetta-menu > li.zm-content-full > div img { width: 100%; margin: 15px 0; } .zetta-menu > li.zm-content > div .zm-video, .zetta-menu > li.zm-content-full > div .zm-video { position: relative; padding-bottom: 56.25%; height: 0; margin: 15px 0; overflow: hidden; } .zetta-menu > li.zm-content > div .zm-video > iframe, .zetta-menu > li.zm-content-full > div .zm-video > iframe { position: absolute; left: 0; top: 0; height: 100%; width: 100%; } .zetta-menu > li.zm-content > div input, .zetta-menu > li.zm-content-full > div input, .zetta-menu > li.zm-content > div textarea, .zetta-menu > li.zm-content-full > div textarea { width: 100%; margin-top: 10px; font: inherit; resize: none; padding: 15px; background-color: #273646; color: #ffffff; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: inset 0px 0px 0px 1px transparent; -moz-box-shadow: inset 0px 0px 0px 1px transparent; box-shadow: inset 0px 0px 0px 1px transparent; } .zetta-menu > li.zm-content > div input:hover, .zetta-menu > li.zm-content-full > div input:hover, .zetta-menu > li.zm-content > div textarea:hover, .zetta-menu > li.zm-content-full > div textarea:hover { background-color: #273646; -webkit-box-shadow: inset 0px 0px 0px 1px #3498db; -moz-box-shadow: inset 0px 0px 0px 1px #3498db; box-shadow: inset 0px 0px 0px 1px #3498db; } .zetta-menu > li.zm-content > div input.zm-button, .zetta-menu > li.zm-content-full > div input.zm-button, .zetta-menu > li.zm-content > div .zm-button, .zetta-menu > li.zm-content-full > div .zm-button { display: inline-block; text-decoration: none; cursor: pointer; text-align: center; font-weight: normal; background-color: #3498db; color: #ffffff; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding: 15px; } .zetta-menu > li.zm-content > div input.zm-button:hover, .zetta-menu > li.zm-content-full > div input.zm-button:hover, .zetta-menu > li.zm-content > div .zm-button:hover, .zetta-menu > li.zm-content-full > div .zm-button:hover { color: #34495e; } .zetta-menu > li.zm-content:hover > div, .zetta-menu > li.zm-content-full:hover > div { display: block; } .zetta-menu > li.zm-content > div, .zetta-menu > li.zm-content-full > div { top: 100%; } .zetta-menu.zm-position-bottom > li.zm-content > div, .zetta-menu.zm-position-bottom > li.zm-content-full > div { top: auto; bottom: 100%; } .zetta-menu.zm-position-left > li.zm-content > div, .zetta-menu.zm-position-left > li.zm-content-full > div { top: 0; left: 100%; } .zetta-menu.zm-position-right > li.zm-content > div, .zetta-menu.zm-position-right > li.zm-content-full > div { top: 0; right: 100%; left: auto; } .zetta-menu > li.zm-content.zm-right-align > div, .zetta-menu > li.zm-content-full.zm-right-align > div { left: auto; right: 0; } .zetta-menu.zm-position-left > li.zm-content.zm-right-align > div, .zetta-menu.zm-position-left > li.zm-content-full.zm-right-align > div { left: 100%; right: auto; } /* ====================== GRID SYSTEM ====================== */ .zetta-menu .zm-row { display: block; } .zetta-menu .zm-row .zm-col { display: inline-block; margin-bottom: 5px; padding: 5px; vertical-align: top; float: left; } .zetta-menu .zm-row .zm-col > .zm-grid-wrapper { padding: 15px 20px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background-color: #273646; color: #3498db; -webkit-box-shadow: inset 0px 0px 1px 1px #273646; -moz-box-shadow: inset 0px 0px 1px 1px #273646; box-shadow: inset 0px 0px 1px 1px #273646; } .zetta-menu .zm-row .zm-col.c-12 { width: 100%; } .zetta-menu .zm-row .zm-col.c-11 { width: 91.66666666666667%; } .zetta-menu .zm-row .zm-col.c-10 { width: 83.33333333333334%; } .zetta-menu .zm-row .zm-col.c-9 { width: 75%; } .zetta-menu .zm-row .zm-col.c-8 { width: 66.66666666666667%; } .zetta-menu .zm-row .zm-col.c-7 { width: 58.333333333333336%; } .zetta-menu .zm-row .zm-col.c-6 { width: 50%; } .zetta-menu .zm-row .zm-col.c-5 { width: 41.66666666666667%; } .zetta-menu .zm-row .zm-col.c-4 { width: 33.333333333333336%; } .zetta-menu .zm-row .zm-col.c-3 { width: 25%; } .zetta-menu .zm-row .zm-col.c-2 { width: 16.666666666666668%; } .zetta-menu .zm-row .zm-col.c-1 { width: 8.333333333333334%; } .zetta-menu .w-1000 { width: 1000px; } .zetta-menu .w-950 { width: 950px; } .zetta-menu .w-900 { width: 900px; } .zetta-menu .w-850 { width: 850px; } .zetta-menu .w-800 { width: 800px; } .zetta-menu .w-750 { width: 750px; } .zetta-menu .w-700 { width: 700px; } .zetta-menu .w-650 { width: 650px; } .zetta-menu .w-600 { width: 600px; } .zetta-menu .w-550 { width: 550px; } .zetta-menu .w-500 { width: 500px; } .zetta-menu .w-450 { width: 450px; } .zetta-menu .w-400 { width: 400px; } .zetta-menu .w-350 { width: 350px; } .zetta-menu .w-300 { width: 300px; } .zetta-menu .w-250 { width: 250px; } .zetta-menu .w-200 { width: 200px; } .zetta-menu .w-150 { width: 150px; } .zetta-menu .w-100 { width: 100px; } .zetta-menu .w-50 { width: 50px; } /* ====================== SEARCH PLACE ====================== */ .zetta-menu .zm-search { position: relative; overflow: hidden; } .zetta-menu .zm-search form > label { position: absolute; cursor: text; left: 0; top: 0; padding: 0 20px; line-height: 50px; } .zetta-menu .zm-search input { height: 50px; padding: 0 27.5px; font-size: inherit; -webkit-appearance: none; width: 0; opacity: 0.01; color: #34495e; } .zetta-menu .zm-search input:focus { width: 150px; opacity: 1; } .zetta-menu .zm-search input:focus + label { display: none; } .zetta-menu .zm-search input:focus, .zetta-menu .zm-search input:hover { background-color: #3498db; color: #34495e; } .zetta-menu .zm-search:hover { background-color: #3498db; color: #34495e; } .zetta-menu.zm-position-right .zm-search, .zetta-menu.zm-position-left .zm-search { float: none; } .zetta-menu.zm-position-right .zm-search input, .zetta-menu.zm-position-left .zm-search input { width: 100%; } /* ====================== SHOW EFFECTS ====================== */ /* fade */ .zetta-menu.zm-effect-fade > li > div, .zetta-menu.zm-effect-fade li > ul { display: block; visibility: hidden; opacity: 0; -webkit-transition: opacity .4s ease, visibility .4s linear 0s; -moz-transition: opacity .4s ease, visibility .4s linear 0s; -ms-transition: opacity .4s ease, visibility .4s linear 0s; -o-transition: opacity .4s ease, visibility .4s linear 0s; transition: opacity .4s ease, visibility .4s linear 0s; } .zetta-menu.zm-effect-fade > li:hover > div, .zetta-menu.zm-effect-fade li:hover > ul { visibility: visible; opacity: 1; -webkit-transition: opacity .4s ease; -moz-transition: opacity .4s ease; -ms-transition: opacity .4s ease; -o-transition: opacity .4s ease; transition: opacity .4s ease; } /* slide */ .zetta-menu.zm-effect-slide-top > li > div, .zetta-menu.zm-effect-slide-top li > ul { -webkit-transform: translateY(50px); -moz-transform: translateY(50px); -ms-transform: translateY(50px); -o-transform: translateY(50px); transform: translateY(50px); } .zetta-menu.zm-effect-slide-bottom > li > div, .zetta-menu.zm-effect-slide-bottom li > ul { -webkit-transform: translateY(-50px); -moz-transform: translateY(-50px); -ms-transform: translateY(-50px); -o-transform: translateY(-50px); transform: translateY(-50px); } .zetta-menu.zm-effect-slide-left > li > div, .zetta-menu.zm-effect-slide-left li > ul { -webkit-transform: translateX(50px); -moz-transform: translateX(50px); -ms-transform: translateX(50px); -o-transform: translateX(50px); transform: translateX(50px); } .zetta-menu.zm-effect-slide-right > li > div, .zetta-menu.zm-effect-slide-right li > ul { -webkit-transform: translateX(-50px); -moz-transform: translateX(-50px); -ms-transform: translateX(-50px); -o-transform: translateX(-50px); transform: translateX(-50px); } .zetta-menu.zm-effect-slide-top > li > div, .zetta-menu.zm-effect-slide-bottom > li > div, .zetta-menu.zm-effect-slide-left > li > div, .zetta-menu.zm-effect-slide-right > li > div, .zetta-menu.zm-effect-slide-top li > ul, .zetta-menu.zm-effect-slide-bottom li > ul, .zetta-menu.zm-effect-slide-left li > ul, .zetta-menu.zm-effect-slide-right li > ul { display: block !important; visibility: hidden; opacity: 0; -webkit-transition: opacity 0.4s ease, -webkit-transform 0.4s ease, visibility 0.4s linear 0s; -moz-transition: opacity 0.4s ease, -moz-transform 0.4s ease, visibility 0.4s linear 0s; -ms-transition: opacity 0.4s ease, -ms-transform 0.4s ease, visibility 0.4s linear 0s; -o-transition: opacity 0.4s ease, -o-transform 0.4s ease, visibility 0.4s linear 0s; transition: opacity .4s ease, transform .4s ease, visibility .4s linear 0s; } .zetta-menu.zm-effect-slide-top > li:hover > div, .zetta-menu.zm-effect-slide-bottom > li:hover > div, .zetta-menu.zm-effect-slide-left > li:hover > div, .zetta-menu.zm-effect-slide-right > li:hover > div, .zetta-menu.zm-effect-slide-top li:hover > ul, .zetta-menu.zm-effect-slide-bottom li:hover > ul, .zetta-menu.zm-effect-slide-left li:hover > ul, .zetta-menu.zm-effect-slide-right li:hover > ul { visibility: visible; opacity: 1; -webkit-transform: translate(0); -moz-transform: translate(0); -ms-transform: translate(0); -o-transform: translate(0); transform: translate(0); -webkit-transition: opacity 0.4s ease, -webkit-transform 0.4s ease; -moz-transition: opacity 0.4s ease, -moz-transform 0.4s ease; -ms-transition: opacity 0.4s ease, -ms-transform 0.4s ease; -o-transition: opacity 0.4s ease, -o-transform 0.4s ease; transition: opacity .4s ease, transform .4s ease; } /* ====================== MAIN ROUNDED CORNERS ====================== */ .zetta-menu { -webkit-border-radius: 5px 5px 5px 5px; -moz-border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px; } /* ====================== DROP ROUNDED CORNERS ====================== */ .zetta-menu > li > ul, .zetta-menu > li > ul ul, .zetta-menu > li > div, .zetta-menu .zm-multi-column > ul ul { -webkit-border-radius: 5px 5px 5px 5px; -moz-border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px; } /* ====================== DROP MARGIN ====================== */ .zetta-menu > li > ul, .zetta-menu > li > div { margin-top: 6px; } .zetta-menu > li > ul:after, .zetta-menu > li > div:after { content: ''; position: absolute; width: 100%; height: 6px; top: -6px; left: 0; } .zetta-menu > li > ul li > ul, .zetta-menu > li > div li > ul { margin-left: 6px; } .zetta-menu > li > ul li > ul:after, .zetta-menu > li > div li > ul:after, .zetta-menu > li > ul li > ul.zm-drop-left:after, .zetta-menu > li > div li > ul.zm-drop-left:after { content: ''; position: absolute; width: 6px; height: 100%; top: 0; left: -6px; } .zetta-menu > li > ul li > ul.zm-drop-left, .zetta-menu > li > div li > ul.zm-drop-left { margin-left: auto; margin-right: 6px; } .zetta-menu > li > ul li > ul.zm-drop-left:after, .zetta-menu > li > div li > ul.zm-drop-left:after { right: -6px; left: auto; } .zetta-menu.zm-position-bottom > li > ul, .zetta-menu.zm-position-bottom > li > div { margin-top: 0; margin-bottom: 6px; } .zetta-menu.zm-position-bottom > li > ul:after, .zetta-menu.zm-position-bottom > li > div:after { height: 6px; top: auto; bottom: -6px; left: 0; } .zetta-menu.zm-position-left > li > ul, .zetta-menu.zm-position-left > li > div, .zetta-menu.zm-position-left > li > ul.zm-drop-left, .zetta-menu.zm-position-left > li > div.zm-drop-left { margin-left: 6px; } .zetta-menu.zm-position-left > li > ul:after, .zetta-menu.zm-position-left > li > div:after, .zetta-menu.zm-position-left > li > ul.zm-drop-left, .zetta-menu.zm-position-left > li > div.zm-drop-left { width: 6px; height: 100%; top: 0; left: -6px; bottom: auto; } .zetta-menu.zm-position-right > li > ul, .zetta-menu.zm-position-right > li > div { margin-left: 0; margin-right: 6px; } .zetta-menu.zm-position-right > li > ul:after, .zetta-menu.zm-position-right > li > div:after { width: 6px; height: 100%; top: 0; right: -6px; left: auto; bottom: auto; } .zetta-menu.zm-position-right > li > ul ul li > ul, .zetta-menu.zm-position-right > li > div ul li > ul { margin-left: 0; margin-right: 6px; } .zetta-menu.zm-position-right > li > ul ul li > ul:after, .zetta-menu.zm-position-right > li > div ul li > ul:after { width: 6px; height: 100%; top: 0; right: -6px; left: auto; bottom: auto; } /* ====================== ARROWS ====================== */ .zetta-menu > li > ul:before, .zetta-menu > li > .zm-multi-column:before, .zetta-menu > .zm-content > div:before { content: ''; position: absolute; left: 23px; top: -5px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid #273646; } .zetta-menu > li > ul li > ul:before, .zetta-menu > li > .zm-multi-column li > ul:before, .zetta-menu > .zm-content > div li > ul:before { content: ''; position: absolute; left: -5px; top: 23px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-right: 5px solid #273646; } .zetta-menu > li > ul li > ul.zm-drop-left:before, .zetta-menu > li > .zm-multi-column li > ul.zm-drop-left:before, .zetta-menu > .zm-content > div li > ul.zm-drop-left:before { left: auto; right: -5px; border-left: 5px solid #273646; border-right: none; } .zetta-menu > li.zm-right-align > ul:before, .zetta-menu > li.zm-right-align > .zm-multi-column:before, .zetta-menu > li.zm-right-align.zm-content > div:before { left: auto; right: 23px; } .zetta-menu.zm-position-bottom > li > ul:before, .zetta-menu.zm-position-bottom > li > .zm-multi-column:before, .zetta-menu.zm-position-bottom > .zm-content > div:before { top: auto; bottom: -5px; border-bottom: none; border-top: 5px solid #273646; } .zetta-menu.zm-position-bottom > li > ul li > ul:before, .zetta-menu.zm-position-bottom > li > .zm-multi-column li > ul:before, .zetta-menu.zm-position-bottom > .zm-content > div li > ul:before { top: auto; bottom: 23px; } .zetta-menu.zm-position-left > li > ul:before, .zetta-menu.zm-position-left > li > .zm-multi-column:before, .zetta-menu.zm-position-left > .zm-content > div:before { top: 23px; left: -5px; border-left: none; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-right: 5px solid #273646; } .zetta-menu.zm-position-right > li > ul:before, .zetta-menu.zm-position-right > li > .zm-multi-column:before, .zetta-menu.zm-position-right > .zm-content > div:before, .zetta-menu.zm-position-right > li > ul li > ul:before, .zetta-menu.zm-position-right > li > .zm-multi-column li > ul:before, .zetta-menu.zm-position-right > .zm-content > div li > ul:before { top: 23px; right: -5px; left: auto; border-right: none; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 5px solid #273646; } /* ====================== RESPONSIVE ====================== */ @media screen and (max-width: 768px) { /* ====================== MAIN ====================== */ .zetta-menu[class*='zm-response'] > li { position: relative; } .zetta-menu[class*='zm-response'] > li > ul, .zetta-menu[class*='zm-response'] > li > div.zm-multi-column > ul, .zetta-menu[class*='zm-response'] > li > ul ul, .zetta-menu[class*='zm-response'] > li > div.zm-multi-column > ul ul { left: 0; right: 0; width: auto !important; margin-right: 0; } .zetta-menu[class*='zm-response'] > li > ul ul, .zetta-menu[class*='zm-response'] > li > div.zm-multi-column > ul ul { top: 100%; margin-left: 50px !important; } .zetta-menu[class*='zm-response'].zm-position-bottom > li > ul ul, .zetta-menu[class*='zm-response'].zm-position-bottom > li > div.zm-multi-column > ul ul, .zetta-menu[class*='zm-response'].zm-position-bottom > li > ul ul.zm-drop-left, .zetta-menu[class*='zm-response'].zm-position-bottom > li > div.zm-multi-column > ul ul.zm-drop-left { left: 0; top: auto; bottom: 100%; } .zetta-menu[class*='zm-response'].zm-position-left > li > ul, .zetta-menu[class*='zm-response'].zm-position-left > li > div.zm-multi-column > ul, .zetta-menu[class*='zm-response'].zm-position-right > li > ul, .zetta-menu[class*='zm-response'].zm-position-right > li > div.zm-multi-column > ul { top: 100%; left: 0; right: 0; } .zetta-menu[class*='zm-response'].zm-position-left > li > ul ul, .zetta-menu[class*='zm-response'].zm-position-left > li > div.zm-multi-column > ul ul, .zetta-menu[class*='zm-response'].zm-position-right > li > ul ul, .zetta-menu[class*='zm-response'].zm-position-right > li > div.zm-multi-column > ul ul, .zetta-menu[class*='zm-response'].zm-position-left > li > ul ul.zm-drop-left, .zetta-menu[class*='zm-response'].zm-position-left > li > div.zm-multi-column > ul ul.zm-drop-left, .zetta-menu[class*='zm-response'].zm-position-right > li > ul ul.zm-drop-left, .zetta-menu[class*='zm-response'].zm-position-right > li > div.zm-multi-column > ul ul.zm-drop-left { left: 0; right: 0; top: 100%; } .zetta-menu[class*='zm-response'].zm-position-left > li.zm-content > div, .zetta-menu[class*='zm-response'].zm-position-left > li.zm-content-full > div, .zetta-menu[class*='zm-response'].zm-position-right > li.zm-content > div, .zetta-menu[class*='zm-response'].zm-position-right > li.zm-content-full > div { top: 100%; left: 0; right: 0; } .zetta-menu[class*='zm-response'] li > div { top: 100%; left: 0 !important; right: 0; width: auto !important; } .zetta-menu[class*='zm-response'] li > div.zm-multi-column > ul { width: 100% !important; } .zetta-menu[class*='zm-response'] .zm-row .zm-col { display: block; margin-right: 0; width: 100% !important; float: none; } .zetta-menu[class*='zm-response'] .w-50, .zetta-menu[class*='zm-response'] .w-100, .zetta-menu[class*='zm-response'] .w-150, .zetta-menu[class*='zm-response'] .w-200, .zetta-menu[class*='zm-response'] .w-250, .zetta-menu[class*='zm-response'] .w-300, .zetta-menu[class*='zm-response'] .w-350, .zetta-menu[class*='zm-response'] .w-400, .zetta-menu[class*='zm-response'] .w-450, .zetta-menu[class*='zm-response'] .w-500, .zetta-menu[class*='zm-response'] .w-550, .zetta-menu[class*='zm-response'] .w-600, .zetta-menu[class*='zm-response'] .w-650, .zetta-menu[class*='zm-response'] .w-700, .zetta-menu[class*='zm-response'] .w-750, .zetta-menu[class*='zm-response'] .w-800, .zetta-menu[class*='zm-response'] .w-850, .zetta-menu[class*='zm-response'] .w-900, .zetta-menu[class*='zm-response'] .w-950, .zetta-menu[class*='zm-response'] .w-1000 { width: 100%; } /* ====================== SIMPLE ====================== */ .zetta-menu.zm-response-simple > li { position: static; } .zetta-menu.zm-response-simple > li > a { font-size: 0; } .zetta-menu.zm-response-simple > li > a i { letter-spacing: 0; } .zetta-menu.zm-response-simple > li > a .zm-caret { display: none; } .zetta-menu.zm-response-simple > li.zm-logo { display: none; } .zetta-menu.zm-response-simple > li.zm-search { position: relative; } /* ====================== STACK ====================== */ .zetta-menu.zm-response-stack > li { display: block; float: none; } .zetta-menu.zm-response-stack > li.zm-content-full { position: relative; } .zetta-menu.zm-response-stack > li.zm-logo { text-align: center; } .zetta-menu.zm-response-stack > li.zm-logo img { position: relative; } .zetta-menu.zm-response-stack > li.zm-logo, .zetta-menu.zm-response-stack > li.zm-right-item { position: relative; width: 100%; } .zetta-menu.zm-response-stack > li > a .zm-caret { float: right; } .zetta-menu.zm-response-stack .zm-search { float: none; } .zetta-menu.zm-response-stack .zm-search input { width: 100%; } /* ====================== SWITCH ====================== */ .zetta-menu.zm-response-switch > li { display: none; float: none; position: relative; width: 100%; } .zetta-menu.zm-response-switch > li.zm-logo { display: block; } .zetta-menu.zm-response-switch > li.zm-logo img { position: relative; z-index: 1; } .zetta-menu.zm-response-switch:before { font-family: FontAwesome; content: '\f0c9'; position: relative; float: right; cursor: pointer; line-height: 50px; height: 50px; padding: 0 20px; z-index: 2; } .zetta-menu.zm-response-switch:hover:before { opacity: 0; } .zetta-menu.zm-response-switch:hover > li { display: block; } .zetta-menu.zm-response-switch > li > a .zm-caret { float: right; } .zetta-menu.zm-response-switch .zm-search { float: none; } .zetta-menu.zm-response-switch .zm-search input { width: 100%; } /* ====================== RESPONSE MARGIN ====================== */ .zetta-menu.zm-response-margin > li > ul, .zetta-menu.zm-response-margin li > div { margin-left: 50px !important; } }
/* * Zetta Menu 1.3.3 * Copyright 2014, nK * 11 August 2014 */ /* ====================== METRO THEME ====================== */ /* ====================== MAIN ====================== */ .zetta-menu { padding: 0; margin: 0; display: inline-block; position: relative; } .zetta-menu:before, .zetta-menu ul, .zetta-menu li, .zetta-menu div, .zetta-menu a, .zetta-menu label, .zetta-menu input, .zetta-menu textarea { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; outline: none; border: 0; list-style: none; } .zetta-menu a { cursor: pointer; } .zetta-menu h1, .zetta-menu h2, .zetta-menu h3, .zetta-menu h4, .zetta-menu h5, .zetta-menu h6 { font-weight: normal; text-align: center; margin: 0; padding: 10px; color: #ffffff; border-bottom: 1px solid #ffffff; } .zetta-menu.zm-full-width { display: block; } .zetta-menu.zm-fixed { position: fixed; top: 0; left: 0; right: 0; } .zetta-menu.zm-fixed.zm-position-left { top: 0; bottom: 0; left: 0; right: auto; } .zetta-menu.zm-fixed.zm-position-right { top: 0; bottom: 0; left: auto; right: 0; } .zetta-menu.zm-fixed.zm-position-bottom { top: auto; bottom: 0; left: 0; right: 0; } .zetta-menu, .zetta-menu a, .zetta-menu a:visited { color: #ffffff; } .zetta-menu > li { display: block; vertical-align: top; float: left; height: 44px; -webkit-box-shadow: inset 0 0 0 2px #ffffff; -moz-box-shadow: inset 0 0 0 2px #ffffff; box-shadow: inset 0 0 0 2px #ffffff; } .zetta-menu > li.zm-right-item { margin-right: 0; float: right; } .zetta-menu > li > a { font-weight: normal; padding: 0 34px; line-height: 44px; } .zetta-menu > li:hover, .zetta-menu > li.zm-active { background-color: #ffffff; } .zetta-menu > li:hover > a, .zetta-menu > li.zm-active > a, .zetta-menu > li:hover > a:visited, .zetta-menu > li.zm-active > a:visited { color: #3598dc; } .zetta-menu li { position: relative; cursor: default; } .zetta-menu li > a { text-decoration: none; display: block; } .zetta-menu li > ul, .zetta-menu li > div { z-index: 1; } .zetta-menu.zm-position-left > li, .zetta-menu.zm-position-right > li { position: relative !important; } .zetta-menu.zm-position-left > li, .zetta-menu.zm-position-right > li, .zetta-menu.zm-position-left > li.zm-logo, .zetta-menu.zm-position-right > li.zm-logo { float: none; } .zetta-menu.zm-position-left > li > a .zm-caret, .zetta-menu.zm-position-right > li > a .zm-caret { float: right; } .zetta-menu .fa { font-size: 12pt; letter-spacing: 13px; line-height: inherit; } .zetta-menu .zm-caret { letter-spacing: 0; float: right; margin-left: 10px; } .zetta-menu > li > a .zm-caret { float: none; } .zetta-menu .zm-single-icon { letter-spacing: 0; } .zetta-menu:after { content: ''; display: block; clear: both; } .zetta-menu li, .zetta-menu li > a, .zetta-menu input, .zetta-menu textarea, .zetta-menu .zm-button { -webkit-transition: color 400ms, background-color 400ms, -webkit-box-shadow 400ms, width 400ms, text-shadow 400ms; -moz-transition: color 400ms, background-color 400ms, -moz-box-shadow 400ms, width 400ms, text-shadow 400ms; -ms-transition: color 400ms, background-color 400ms, box-shadow 400ms, width 400ms, text-shadow 400ms; -o-transition: color 400ms, background-color 400ms, box-shadow 400ms, width 400ms, text-shadow 400ms; transition: color 400ms, background-color 400ms, box-shadow 400ms, width 400ms, text-shadow 400ms; } /* ====================== LOGO ====================== */ .zetta-menu > li.zm-logo { float: left; margin-left: 0; font-size: 0; } .zetta-menu > li.zm-logo a { padding: 0; line-height: 0; } .zetta-menu > li.zm-logo img { max-width: 100%; max-height: 100%; border: none; } /* ====================== MENU DROP DOWN ====================== */ .zetta-menu ul, .zetta-menu div.zm-multi-column { position: absolute; display: none; } .zetta-menu ul { padding: 10px; } .zetta-menu ul > li { min-height: 44px; } .zetta-menu ul > li a { padding: 0 34px; line-height: 44px; } .zetta-menu > li > ul, .zetta-menu > li > ul ul, .zetta-menu .zm-multi-column, .zetta-menu .zm-multi-column > ul ul { background-color: rgba(25, 97, 146, 0.6); } .zetta-menu > li > ul li, .zetta-menu > li > ul ul li, .zetta-menu .zm-multi-column li, .zetta-menu .zm-multi-column > ul ul li { -webkit-box-shadow: inset 0 0 0 2px #ffffff; -moz-box-shadow: inset 0 0 0 2px #ffffff; box-shadow: inset 0 0 0 2px #ffffff; } .zetta-menu > li > ul li:hover, .zetta-menu > li > ul ul li:hover, .zetta-menu .zm-multi-column li:hover, .zetta-menu .zm-multi-column > ul ul li:hover { background-color: #ffffff; } .zetta-menu > li > ul li:hover > a, .zetta-menu > li > ul ul li:hover > a, .zetta-menu .zm-multi-column li:hover > a, .zetta-menu .zm-multi-column > ul ul li:hover > a, .zetta-menu > li > ul li:hover > a:visited, .zetta-menu > li > ul ul li:hover > a:visited, .zetta-menu .zm-multi-column li:hover > a:visited, .zetta-menu .zm-multi-column > ul ul li:hover > a:visited { color: #3598dc; } .zetta-menu > li > ul, .zetta-menu > li > div.zm-multi-column { top: 100%; left: 0; } .zetta-menu > li > ul ul, .zetta-menu > li > div.zm-multi-column ul { top: 0; left: 100%; } .zetta-menu > li > ul ul.zm-drop-left, .zetta-menu > li > div.zm-multi-column ul.zm-drop-left { left: auto; right: 100%; } .zetta-menu.zm-position-bottom > li > ul, .zetta-menu.zm-position-bottom > li > div.zm-multi-column { top: auto; bottom: 100%; left: 0; } .zetta-menu.zm-position-bottom > li > ul ul, .zetta-menu.zm-position-bottom > li > div.zm-multi-column ul { top: auto; bottom: 0; left: 100%; } .zetta-menu.zm-position-bottom > li > ul ul.zm-drop-left, .zetta-menu.zm-position-bottom > li > div.zm-multi-column ul.zm-drop-left { left: -100%; } .zetta-menu.zm-position-left > li > ul, .zetta-menu.zm-position-left > li > div.zm-multi-column { top: 0; left: 100%; } .zetta-menu.zm-position-left > li > ul ul.zm-drop-left, .zetta-menu.zm-position-left > li > div.zm-multi-column ul.zm-drop-left { top: 0; left: 100%; } .zetta-menu.zm-position-right > li > ul, .zetta-menu.zm-position-right > li > div.zm-multi-column { top: 0; left: auto; right: 100%; } .zetta-menu.zm-position-right > li > ul ul.zm-drop-left, .zetta-menu.zm-position-right > li > div.zm-multi-column ul.zm-drop-left { top: 0; left: auto; right: 100%; } .zetta-menu.zm-position-right > li > ul ul, .zetta-menu.zm-position-right > li > div.zm-multi-column > ul ul { top: 0; left: auto; right: 100%; } .zetta-menu li:hover > ul, .zetta-menu li:hover > div.zm-multi-column, .zetta-menu li:hover > div.zm-multi-column > ul { display: block; } .zetta-menu li > div.zm-multi-column > ul, .zetta-menu.zm-position-bottom li > div.zm-multi-column > ul { left: 0; float: left; } .zetta-menu > li > div.zm-multi-column > ul { position: relative; display: inline-block; } .zetta-menu > li.zm-right-align > ul, .zetta-menu > li.zm-right-align > div.zm-multi-column { left: auto; right: 0; } .zetta-menu.zm-position-left > li.zm-right-align > ul, .zetta-menu.zm-position-left > li.zm-right-align > div.zm-multi-column { left: 100%; right: auto; } .zetta-menu.zm-position-left > li.zm-right-align > ul, .zetta-menu.zm-position-left > li.zm-right-align > div.zm-multi-column { right: 100%; } /* ====================== CONTENT DROP DOWN ====================== */ .zetta-menu > li.zm-content-full { position: static; } .zetta-menu > li.zm-content-full > div { width: 100%; } .zetta-menu > li.zm-content > div, .zetta-menu > li.zm-content-full > div { position: absolute; display: none; left: 0; padding: 10px; background-color: rgba(25, 97, 146, 0.6); } .zetta-menu > li.zm-content > div ul, .zetta-menu > li.zm-content-full > div ul { display: block; position: relative; min-width: 0; -webkit-box-shadow: inset 0 0 0 2px #ffffff; -moz-box-shadow: inset 0 0 0 2px #ffffff; box-shadow: inset 0 0 0 2px #ffffff; } .zetta-menu > li.zm-content > div ul li a, .zetta-menu > li.zm-content-full > div ul li a, .zetta-menu > li.zm-content > div ul li a:visited, .zetta-menu > li.zm-content-full > div ul li a:visited { text-align: center; padding: 10px; line-height: 1; } .zetta-menu > li.zm-content > div ul li:hover, .zetta-menu > li.zm-content-full > div ul li:hover { background-color: transparent; } .zetta-menu > li.zm-content > div ul li:hover a, .zetta-menu > li.zm-content-full > div ul li:hover a, .zetta-menu > li.zm-content > div ul li:hover a:visited, .zetta-menu > li.zm-content-full > div ul li:hover a:visited { text-decoration: underline; } .zetta-menu > li.zm-content > div img, .zetta-menu > li.zm-content-full > div img { width: 100%; margin: 10px 0; } .zetta-menu > li.zm-content > div .zm-video, .zetta-menu > li.zm-content-full > div .zm-video { position: relative; padding-bottom: 56.25%; height: 0; margin: 10px 0; overflow: hidden; } .zetta-menu > li.zm-content > div .zm-video > iframe, .zetta-menu > li.zm-content-full > div .zm-video > iframe { position: absolute; left: 0; top: 0; height: 100%; width: 100%; } .zetta-menu > li.zm-content > div input, .zetta-menu > li.zm-content-full > div input, .zetta-menu > li.zm-content > div textarea, .zetta-menu > li.zm-content-full > div textarea { width: 100%; margin-top: 10px; font: inherit; resize: none; padding: 12.5px 34px; background-color: transparent; color: #ffffff; -webkit-box-shadow: inset 0 0 0 2px #ffffff; -moz-box-shadow: inset 0 0 0 2px #ffffff; box-shadow: inset 0 0 0 2px #ffffff; } .zetta-menu > li.zm-content > div input:focus, .zetta-menu > li.zm-content-full > div input:focus, .zetta-menu > li.zm-content > div textarea:focus, .zetta-menu > li.zm-content-full > div textarea:focus { background-color: #ffffff; color: #3598dc; } .zetta-menu > li.zm-content > div input.zm-button, .zetta-menu > li.zm-content-full > div input.zm-button, .zetta-menu > li.zm-content > div .zm-button, .zetta-menu > li.zm-content-full > div .zm-button { display: inline-block; text-decoration: none; cursor: pointer; text-align: center; font-weight: normal; padding: 12.5px 34px; } .zetta-menu > li.zm-content > div input.zm-button:hover, .zetta-menu > li.zm-content-full > div input.zm-button:hover, .zetta-menu > li.zm-content > div .zm-button:hover, .zetta-menu > li.zm-content-full > div .zm-button:hover { color: #3598dc; background-color: #ffffff; } .zetta-menu > li.zm-content:hover > div, .zetta-menu > li.zm-content-full:hover > div { display: block; } .zetta-menu > li.zm-content > div, .zetta-menu > li.zm-content-full > div { top: 100%; } .zetta-menu.zm-position-bottom > li.zm-content > div, .zetta-menu.zm-position-bottom > li.zm-content-full > div { top: auto; bottom: 100%; } .zetta-menu.zm-position-left > li.zm-content > div, .zetta-menu.zm-position-left > li.zm-content-full > div { top: 0; left: 100%; } .zetta-menu.zm-position-right > li.zm-content > div, .zetta-menu.zm-position-right > li.zm-content-full > div { top: 0; right: 100%; left: auto; } .zetta-menu > li.zm-content.zm-right-align > div, .zetta-menu > li.zm-content-full.zm-right-align > div { left: auto; right: 0; } .zetta-menu.zm-position-left > li.zm-content.zm-right-align > div, .zetta-menu.zm-position-left > li.zm-content-full.zm-right-align > div { left: 100%; right: auto; } /* ====================== GRID SYSTEM ====================== */ .zetta-menu .zm-row { display: block; } .zetta-menu .zm-row .zm-col { display: inline-block; margin-bottom: 5px; padding: 5px; vertical-align: top; float: left; } .zetta-menu .zm-row .zm-col > .zm-grid-wrapper { padding: 13px; -webkit-box-shadow: inset 0 0 0 2px #ffffff; -moz-box-shadow: inset 0 0 0 2px #ffffff; box-shadow: inset 0 0 0 2px #ffffff; } .zetta-menu .zm-row .zm-col.c-12 { width: 100%; } .zetta-menu .zm-row .zm-col.c-11 { width: 91.66666666666667%; } .zetta-menu .zm-row .zm-col.c-10 { width: 83.33333333333334%; } .zetta-menu .zm-row .zm-col.c-9 { width: 75%; } .zetta-menu .zm-row .zm-col.c-8 { width: 66.66666666666667%; } .zetta-menu .zm-row .zm-col.c-7 { width: 58.333333333333336%; } .zetta-menu .zm-row .zm-col.c-6 { width: 50%; } .zetta-menu .zm-row .zm-col.c-5 { width: 41.66666666666667%; } .zetta-menu .zm-row .zm-col.c-4 { width: 33.333333333333336%; } .zetta-menu .zm-row .zm-col.c-3 { width: 25%; } .zetta-menu .zm-row .zm-col.c-2 { width: 16.666666666666668%; } .zetta-menu .zm-row .zm-col.c-1 { width: 8.333333333333334%; } .zetta-menu .w-1000 { width: 1000px; } .zetta-menu .w-950 { width: 950px; } .zetta-menu .w-900 { width: 900px; } .zetta-menu .w-850 { width: 850px; } .zetta-menu .w-800 { width: 800px; } .zetta-menu .w-750 { width: 750px; } .zetta-menu .w-700 { width: 700px; } .zetta-menu .w-650 { width: 650px; } .zetta-menu .w-600 { width: 600px; } .zetta-menu .w-550 { width: 550px; } .zetta-menu .w-500 { width: 500px; } .zetta-menu .w-450 { width: 450px; } .zetta-menu .w-400 { width: 400px; } .zetta-menu .w-350 { width: 350px; } .zetta-menu .w-300 { width: 300px; } .zetta-menu .w-250 { width: 250px; } .zetta-menu .w-200 { width: 200px; } .zetta-menu .w-150 { width: 150px; } .zetta-menu .w-100 { width: 100px; } .zetta-menu .w-50 { width: 50px; } /* ====================== SEARCH PLACE ====================== */ .zetta-menu .zm-search { position: relative; overflow: hidden; } .zetta-menu .zm-search form > label { position: absolute; cursor: text; left: 0; top: 0; padding: 0 34px; line-height: 44px; } .zetta-menu .zm-search input { height: 44px; padding: 0 40.5px; font-size: inherit; -webkit-appearance: none; width: 0; opacity: 0.01; } .zetta-menu .zm-search input:focus { width: 180px; opacity: 1; } .zetta-menu .zm-search input:focus + label { display: none; } .zetta-menu .zm-search input:focus, .zetta-menu .zm-search input:hover { background-color: #ffffff; color: #3598dc; } .zetta-menu .zm-search:hover { background-color: #ffffff; color: #3598dc; } .zetta-menu.zm-position-right .zm-search, .zetta-menu.zm-position-left .zm-search { float: none; } .zetta-menu.zm-position-right .zm-search input, .zetta-menu.zm-position-left .zm-search input { width: 100%; } /* ====================== SHOW EFFECTS ====================== */ /* fade */ .zetta-menu.zm-effect-fade > li > div, .zetta-menu.zm-effect-fade li > ul { display: block; visibility: hidden; opacity: 0; -webkit-transition: opacity .4s ease, visibility .4s linear 0s; -moz-transition: opacity .4s ease, visibility .4s linear 0s; -ms-transition: opacity .4s ease, visibility .4s linear 0s; -o-transition: opacity .4s ease, visibility .4s linear 0s; transition: opacity .4s ease, visibility .4s linear 0s; } .zetta-menu.zm-effect-fade > li:hover > div, .zetta-menu.zm-effect-fade li:hover > ul { visibility: visible; opacity: 1; -webkit-transition: opacity .4s ease; -moz-transition: opacity .4s ease; -ms-transition: opacity .4s ease; -o-transition: opacity .4s ease; transition: opacity .4s ease; } /* slide */ .zetta-menu.zm-effect-slide-top > li > div, .zetta-menu.zm-effect-slide-top li > ul { -webkit-transform: translateY(50px); -moz-transform: translateY(50px); -ms-transform: translateY(50px); -o-transform: translateY(50px); transform: translateY(50px); } .zetta-menu.zm-effect-slide-bottom > li > div, .zetta-menu.zm-effect-slide-bottom li > ul { -webkit-transform: translateY(-50px); -moz-transform: translateY(-50px); -ms-transform: translateY(-50px); -o-transform: translateY(-50px); transform: translateY(-50px); } .zetta-menu.zm-effect-slide-left > li > div, .zetta-menu.zm-effect-slide-left li > ul { -webkit-transform: translateX(50px); -moz-transform: translateX(50px); -ms-transform: translateX(50px); -o-transform: translateX(50px); transform: translateX(50px); } .zetta-menu.zm-effect-slide-right > li > div, .zetta-menu.zm-effect-slide-right li > ul { -webkit-transform: translateX(-50px); -moz-transform: translateX(-50px); -ms-transform: translateX(-50px); -o-transform: translateX(-50px); transform: translateX(-50px); } .zetta-menu.zm-effect-slide-top > li > div, .zetta-menu.zm-effect-slide-bottom > li > div, .zetta-menu.zm-effect-slide-left > li > div, .zetta-menu.zm-effect-slide-right > li > div, .zetta-menu.zm-effect-slide-top li > ul, .zetta-menu.zm-effect-slide-bottom li > ul, .zetta-menu.zm-effect-slide-left li > ul, .zetta-menu.zm-effect-slide-right li > ul { display: block !important; visibility: hidden; opacity: 0; -webkit-transition: opacity 0.4s ease, -webkit-transform 0.4s ease, visibility 0.4s linear 0s; -moz-transition: opacity 0.4s ease, -moz-transform 0.4s ease, visibility 0.4s linear 0s; -ms-transition: opacity 0.4s ease, -ms-transform 0.4s ease, visibility 0.4s linear 0s; -o-transition: opacity 0.4s ease, -o-transform 0.4s ease, visibility 0.4s linear 0s; transition: opacity .4s ease, transform .4s ease, visibility .4s linear 0s; } .zetta-menu.zm-effect-slide-top > li:hover > div, .zetta-menu.zm-effect-slide-bottom > li:hover > div, .zetta-menu.zm-effect-slide-left > li:hover > div, .zetta-menu.zm-effect-slide-right > li:hover > div, .zetta-menu.zm-effect-slide-top li:hover > ul, .zetta-menu.zm-effect-slide-bottom li:hover > ul, .zetta-menu.zm-effect-slide-left li:hover > ul, .zetta-menu.zm-effect-slide-right li:hover > ul { visibility: visible; opacity: 1; -webkit-transform: translate(0); -moz-transform: translate(0); -ms-transform: translate(0); -o-transform: translate(0); transform: translate(0); -webkit-transition: opacity 0.4s ease, -webkit-transform 0.4s ease; -moz-transition: opacity 0.4s ease, -moz-transform 0.4s ease; -ms-transition: opacity 0.4s ease, -ms-transform 0.4s ease; -o-transition: opacity 0.4s ease, -o-transform 0.4s ease; transition: opacity .4s ease, transform .4s ease; } .zetta-menu > li + li { margin-left: 7px; } .zetta-menu.zm-position-left > li + li, .zetta-menu.zm-position-right > li + li { margin-left: 0; margin-top: 7px; } .zetta-menu > li > ul > li + li, .zetta-menu > li > ul ul > li + li, .zetta-menu .zm-multi-column ul > li + li { margin-top: 7px; } /* ====================== DROP ROUNDED CORNERS ====================== */ .zetta-menu > li > ul, .zetta-menu > li > ul ul, .zetta-menu > li > div, .zetta-menu .zm-multi-column > ul ul { -webkit-border-radius: 10px 10px 10px 10px; -moz-border-radius: 10px 10px 10px 10px; border-radius: 10px 10px 10px 10px; } /* ====================== DROP MARGIN ====================== */ .zetta-menu > li > ul, .zetta-menu > li > div { margin-top: 10px; } .zetta-menu > li > ul:after, .zetta-menu > li > div:after { content: ''; position: absolute; width: 100%; height: 10px; top: -10px; left: 0; } .zetta-menu > li > ul li > ul, .zetta-menu > li > div li > ul { margin-left: 20px; } .zetta-menu > li > ul li > ul:after, .zetta-menu > li > div li > ul:after, .zetta-menu > li > ul li > ul.zm-drop-left:after, .zetta-menu > li > div li > ul.zm-drop-left:after { content: ''; position: absolute; width: 20px; height: 100%; top: 0; left: -20px; } .zetta-menu > li > ul li > ul.zm-drop-left, .zetta-menu > li > div li > ul.zm-drop-left { margin-left: auto; margin-right: 20px; } .zetta-menu > li > ul li > ul.zm-drop-left:after, .zetta-menu > li > div li > ul.zm-drop-left:after { right: -20px; left: auto; } .zetta-menu.zm-position-bottom > li > ul, .zetta-menu.zm-position-bottom > li > div { margin-top: 0; margin-bottom: 10px; } .zetta-menu.zm-position-bottom > li > ul:after, .zetta-menu.zm-position-bottom > li > div:after { height: 10px; top: auto; bottom: -10px; left: 0; } .zetta-menu.zm-position-left > li > ul, .zetta-menu.zm-position-left > li > div, .zetta-menu.zm-position-left > li > ul.zm-drop-left, .zetta-menu.zm-position-left > li > div.zm-drop-left { margin-left: 10px; } .zetta-menu.zm-position-left > li > ul:after, .zetta-menu.zm-position-left > li > div:after, .zetta-menu.zm-position-left > li > ul.zm-drop-left, .zetta-menu.zm-position-left > li > div.zm-drop-left { width: 10px; height: 100%; top: 0; left: -10px; bottom: auto; } .zetta-menu.zm-position-right > li > ul, .zetta-menu.zm-position-right > li > div { margin-left: 0; margin-right: 10px; } .zetta-menu.zm-position-right > li > ul:after, .zetta-menu.zm-position-right > li > div:after { width: 10px; height: 100%; top: 0; right: -10px; left: auto; bottom: auto; } .zetta-menu.zm-position-right > li > ul ul li > ul, .zetta-menu.zm-position-right > li > div ul li > ul { margin-left: 0; margin-right: 20px; } .zetta-menu.zm-position-right > li > ul ul li > ul:after, .zetta-menu.zm-position-right > li > div ul li > ul:after { width: 20px; height: 100%; top: 0; right: -20px; left: auto; bottom: auto; } /* ====================== RESPONSIVE ====================== */ @media screen and (max-width: 768px) { /* ====================== MAIN ====================== */ .zetta-menu[class*='zm-response'] > li { position: relative; } .zetta-menu[class*='zm-response'] > li > ul, .zetta-menu[class*='zm-response'] > li > div.zm-multi-column > ul, .zetta-menu[class*='zm-response'] > li > ul ul, .zetta-menu[class*='zm-response'] > li > div.zm-multi-column > ul ul { left: 0; right: 0; width: auto !important; margin-right: 0; } .zetta-menu[class*='zm-response'] > li > ul ul, .zetta-menu[class*='zm-response'] > li > div.zm-multi-column > ul ul { top: 100%; margin-left: 44px !important; } .zetta-menu[class*='zm-response'].zm-position-bottom > li > ul ul, .zetta-menu[class*='zm-response'].zm-position-bottom > li > div.zm-multi-column > ul ul, .zetta-menu[class*='zm-response'].zm-position-bottom > li > ul ul.zm-drop-left, .zetta-menu[class*='zm-response'].zm-position-bottom > li > div.zm-multi-column > ul ul.zm-drop-left { left: 0; top: auto; bottom: 100%; } .zetta-menu[class*='zm-response'].zm-position-left > li > ul, .zetta-menu[class*='zm-response'].zm-position-left > li > div.zm-multi-column > ul, .zetta-menu[class*='zm-response'].zm-position-right > li > ul, .zetta-menu[class*='zm-response'].zm-position-right > li > div.zm-multi-column > ul { top: 100%; left: 0; right: 0; } .zetta-menu[class*='zm-response'].zm-position-left > li > ul ul, .zetta-menu[class*='zm-response'].zm-position-left > li > div.zm-multi-column > ul ul, .zetta-menu[class*='zm-response'].zm-position-right > li > ul ul, .zetta-menu[class*='zm-response'].zm-position-right > li > div.zm-multi-column > ul ul, .zetta-menu[class*='zm-response'].zm-position-left > li > ul ul.zm-drop-left, .zetta-menu[class*='zm-response'].zm-position-left > li > div.zm-multi-column > ul ul.zm-drop-left, .zetta-menu[class*='zm-response'].zm-position-right > li > ul ul.zm-drop-left, .zetta-menu[class*='zm-response'].zm-position-right > li > div.zm-multi-column > ul ul.zm-drop-left { left: 0; right: 0; top: 100%; } .zetta-menu[class*='zm-response'].zm-position-left > li.zm-content > div, .zetta-menu[class*='zm-response'].zm-position-left > li.zm-content-full > div, .zetta-menu[class*='zm-response'].zm-position-right > li.zm-content > div, .zetta-menu[class*='zm-response'].zm-position-right > li.zm-content-full > div { top: 100%; left: 0; right: 0; } .zetta-menu[class*='zm-response'] li > div { top: 100%; left: 0 !important; right: 0; width: auto !important; } .zetta-menu[class*='zm-response'] li > div.zm-multi-column > ul { width: 100% !important; } .zetta-menu[class*='zm-response'] .zm-row .zm-col { display: block; margin-right: 0; width: 100% !important; float: none; } .zetta-menu[class*='zm-response'] .w-50, .zetta-menu[class*='zm-response'] .w-100, .zetta-menu[class*='zm-response'] .w-150, .zetta-menu[class*='zm-response'] .w-200, .zetta-menu[class*='zm-response'] .w-250, .zetta-menu[class*='zm-response'] .w-300, .zetta-menu[class*='zm-response'] .w-350, .zetta-menu[class*='zm-response'] .w-400, .zetta-menu[class*='zm-response'] .w-450, .zetta-menu[class*='zm-response'] .w-500, .zetta-menu[class*='zm-response'] .w-550, .zetta-menu[class*='zm-response'] .w-600, .zetta-menu[class*='zm-response'] .w-650, .zetta-menu[class*='zm-response'] .w-700, .zetta-menu[class*='zm-response'] .w-750, .zetta-menu[class*='zm-response'] .w-800, .zetta-menu[class*='zm-response'] .w-850, .zetta-menu[class*='zm-response'] .w-900, .zetta-menu[class*='zm-response'] .w-950, .zetta-menu[class*='zm-response'] .w-1000 { width: 100%; } /* ====================== SIMPLE ====================== */ .zetta-menu.zm-response-simple > li { position: static; } .zetta-menu.zm-response-simple > li > a { font-size: 0; } .zetta-menu.zm-response-simple > li > a i { letter-spacing: 0; } .zetta-menu.zm-response-simple > li > a .zm-caret { display: none; } .zetta-menu.zm-response-simple > li.zm-logo { display: none; } .zetta-menu.zm-response-simple > li.zm-search { position: relative; } /* ====================== STACK ====================== */ .zetta-menu.zm-response-stack > li { display: block; float: none; } .zetta-menu.zm-response-stack > li + li { margin-left: 0; margin-top: 7px; } .zetta-menu.zm-response-stack > li.zm-content-full { position: relative; } .zetta-menu.zm-response-stack > li.zm-logo { text-align: center; } .zetta-menu.zm-response-stack > li.zm-logo img { position: relative; } .zetta-menu.zm-response-stack > li.zm-logo, .zetta-menu.zm-response-stack > li.zm-right-item { position: relative; width: 100%; } .zetta-menu.zm-response-stack > li > a .zm-caret { float: right; } .zetta-menu.zm-response-stack .zm-search { float: none; } .zetta-menu.zm-response-stack .zm-search input { width: 100%; } /* ====================== SWITCH ====================== */ .zetta-menu.zm-response-switch > li { display: none; float: none; position: relative; width: 100%; } .zetta-menu.zm-response-switch > li + li { margin-left: 0; margin-top: 7px; } .zetta-menu.zm-response-switch > li.zm-logo { display: block; } .zetta-menu.zm-response-switch > li.zm-logo img { position: relative; z-index: 1; } .zetta-menu.zm-response-switch:before { font-family: FontAwesome; content: '\f0c9'; position: relative; float: right; cursor: pointer; line-height: 44px; height: 44px; padding: 0 34px; z-index: 2; } .zetta-menu.zm-response-switch:hover:before { opacity: 0; } .zetta-menu.zm-response-switch:hover > li { display: block; } .zetta-menu.zm-response-switch > li > a .zm-caret { float: right; } .zetta-menu.zm-response-switch .zm-search { float: none; } .zetta-menu.zm-response-switch .zm-search input { width: 100%; } /* ====================== RESPONSE MARGIN ====================== */ .zetta-menu.zm-response-margin > li > ul, .zetta-menu.zm-response-margin li > div { margin-left: 44px !important; } }
/* * Zetta Menu 1.3.3 * Copyright 2014, nK * 11 August 2014 */ /* ====================== MIRACLE THEME ====================== */ /* ====================== MAIN ====================== */ .zetta-menu { background-color: #3598dc; padding: 0; margin: 0; display: inline-block; position: relative; } .zetta-menu:before, .zetta-menu ul, .zetta-menu li, .zetta-menu div, .zetta-menu a, .zetta-menu label, .zetta-menu input, .zetta-menu textarea { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; outline: none; border: 0; list-style: none; } .zetta-menu a { cursor: pointer; } .zetta-menu h1, .zetta-menu h2, .zetta-menu h3, .zetta-menu h4, .zetta-menu h5, .zetta-menu h6 { font-weight: normal; text-align: center; margin: 0; padding: 11px 0; color: #124466; border-bottom: 1px solid #124466; } .zetta-menu.zm-full-width { display: block; } .zetta-menu.zm-fixed { position: fixed; top: 0; left: 0; right: 0; } .zetta-menu.zm-fixed.zm-position-left { top: 0; bottom: 0; left: 0; right: auto; } .zetta-menu.zm-fixed.zm-position-right { top: 0; bottom: 0; left: auto; right: 0; } .zetta-menu.zm-fixed.zm-position-bottom { top: auto; bottom: 0; left: 0; right: 0; } .zetta-menu, .zetta-menu a, .zetta-menu a:visited { color: #124466; } .zetta-menu > li { display: block; vertical-align: top; float: left; height: 42px; -webkit-box-shadow: inset -1px 0 0 0 #1f78b5, 1px 0 0 0 #3598dc; -moz-box-shadow: inset -1px 0 0 0 #1f78b5, 1px 0 0 0 #3598dc; box-shadow: inset -1px 0 0 0 #1f78b5, 1px 0 0 0 #3598dc; } .zetta-menu > li.zm-right-item { margin-right: 0; float: right; } .zetta-menu > li > a { font-weight: bold; -webkit-text-shadow: 1px 1px 0px #60aee4; -moz-text-shadow: 1px 1px 0px #60aee4; text-shadow: 1px 1px 0px #60aee4; padding: 0 16px; line-height: 42px; } .zetta-menu > li:hover > a, .zetta-menu > li.zm-active > a, .zetta-menu > li:hover > a:visited, .zetta-menu > li.zm-active > a:visited { color: #e4e4e4; -webkit-text-shadow: 1px 1px 0px #217ebd; -moz-text-shadow: 1px 1px 0px #217ebd; text-shadow: 1px 1px 0px #217ebd; } .zetta-menu li { position: relative; cursor: default; } .zetta-menu li > a { text-decoration: none; display: block; } .zetta-menu li > ul, .zetta-menu li > div { z-index: 1; } .zetta-menu.zm-position-left > li, .zetta-menu.zm-position-right > li { position: relative !important; } .zetta-menu.zm-position-left > li, .zetta-menu.zm-position-right > li, .zetta-menu.zm-position-left > li.zm-logo, .zetta-menu.zm-position-right > li.zm-logo { float: none; } .zetta-menu.zm-position-left > li > a .zm-caret, .zetta-menu.zm-position-right > li > a .zm-caret { float: right; } .zetta-menu .fa { font-size: 12pt; letter-spacing: 13px; line-height: inherit; } .zetta-menu .zm-caret { letter-spacing: 0; float: right; margin-left: 11px; } .zetta-menu > li > a .zm-caret { float: none; } .zetta-menu .zm-single-icon { letter-spacing: 0; } .zetta-menu:after { content: ''; display: block; clear: both; } .zetta-menu li, .zetta-menu li > a, .zetta-menu input, .zetta-menu textarea, .zetta-menu .zm-button { -webkit-transition: color 0.2s, background-color 0.2s, -webkit-box-shadow 0.2s, width 0.2s, text-shadow 0.2s; -moz-transition: color 0.2s, background-color 0.2s, -moz-box-shadow 0.2s, width 0.2s, text-shadow 0.2s; -ms-transition: color 0.2s, background-color 0.2s, box-shadow 0.2s, width 0.2s, text-shadow 0.2s; -o-transition: color 0.2s, background-color 0.2s, box-shadow 0.2s, width 0.2s, text-shadow 0.2s; transition: color 0.2s, background-color 0.2s, box-shadow 0.2s, width 0.2s, text-shadow 0.2s; } /* ====================== LOGO ====================== */ .zetta-menu > li.zm-logo { float: left; margin-left: 0; font-size: 0; } .zetta-menu > li.zm-logo a { padding: 0; line-height: 0; } .zetta-menu > li.zm-logo img { max-width: 100%; max-height: 100%; border: none; } /* ====================== MENU DROP DOWN ====================== */ .zetta-menu ul, .zetta-menu div.zm-multi-column { position: absolute; display: none; } .zetta-menu ul > li { min-height: 42px; } .zetta-menu ul > li a { padding: 0 16px; line-height: 42px; } .zetta-menu > li > ul, .zetta-menu > li > ul ul, .zetta-menu .zm-multi-column, .zetta-menu .zm-multi-column > ul ul { background-color: #e4e4e4; color: #727272; -webkit-box-shadow: 0px 0px 0px 1px #d5d5d5; -moz-box-shadow: 0px 0px 0px 1px #d5d5d5; box-shadow: 0px 0px 0px 1px #d5d5d5; -webkit-text-shadow: 1px 1px 0px #fcfcfc; -moz-text-shadow: 1px 1px 0px #fcfcfc; text-shadow: 1px 1px 0px #fcfcfc; } .zetta-menu > li > ul li, .zetta-menu > li > ul ul li, .zetta-menu .zm-multi-column li, .zetta-menu .zm-multi-column > ul ul li { -webkit-box-shadow: inset 0px 1px 0px 0px #fcfcfc, 0px -1px 0px 0px #d5d5d5; -moz-box-shadow: inset 0px 1px 0px 0px #fcfcfc, 0px -1px 0px 0px #d5d5d5; box-shadow: inset 0px 1px 0px 0px #fcfcfc, 0px -1px 0px 0px #d5d5d5; } .zetta-menu > li > ul li > a, .zetta-menu > li > ul ul li > a, .zetta-menu .zm-multi-column li > a, .zetta-menu .zm-multi-column > ul ul li > a, .zetta-menu > li > ul li > a:visited, .zetta-menu > li > ul ul li > a:visited, .zetta-menu .zm-multi-column li > a:visited, .zetta-menu .zm-multi-column > ul ul li > a:visited { color: #727272; } .zetta-menu > li > ul li:hover, .zetta-menu > li > ul ul li:hover, .zetta-menu .zm-multi-column li:hover, .zetta-menu .zm-multi-column > ul ul li:hover { background-color: #ededed; } .zetta-menu > li > ul, .zetta-menu > li > div.zm-multi-column { top: 100%; left: 0; } .zetta-menu > li > ul ul, .zetta-menu > li > div.zm-multi-column ul { top: 0; left: 100%; } .zetta-menu > li > ul ul.zm-drop-left, .zetta-menu > li > div.zm-multi-column ul.zm-drop-left { left: auto; right: 100%; } .zetta-menu.zm-position-bottom > li > ul, .zetta-menu.zm-position-bottom > li > div.zm-multi-column { top: auto; bottom: 100%; left: 0; } .zetta-menu.zm-position-bottom > li > ul ul, .zetta-menu.zm-position-bottom > li > div.zm-multi-column ul { top: auto; bottom: 0; left: 100%; } .zetta-menu.zm-position-bottom > li > ul ul.zm-drop-left, .zetta-menu.zm-position-bottom > li > div.zm-multi-column ul.zm-drop-left { left: -100%; } .zetta-menu.zm-position-left > li > ul, .zetta-menu.zm-position-left > li > div.zm-multi-column { top: 0; left: 100%; } .zetta-menu.zm-position-left > li > ul ul.zm-drop-left, .zetta-menu.zm-position-left > li > div.zm-multi-column ul.zm-drop-left { top: 0; left: 100%; } .zetta-menu.zm-position-right > li > ul, .zetta-menu.zm-position-right > li > div.zm-multi-column { top: 0; left: auto; right: 100%; } .zetta-menu.zm-position-right > li > ul ul.zm-drop-left, .zetta-menu.zm-position-right > li > div.zm-multi-column ul.zm-drop-left { top: 0; left: auto; right: 100%; } .zetta-menu.zm-position-right > li > ul ul, .zetta-menu.zm-position-right > li > div.zm-multi-column > ul ul { top: 0; left: auto; right: 100%; } .zetta-menu li:hover > ul, .zetta-menu li:hover > div.zm-multi-column, .zetta-menu li:hover > div.zm-multi-column > ul { display: block; } .zetta-menu li > div.zm-multi-column > ul, .zetta-menu.zm-position-bottom li > div.zm-multi-column > ul { left: 0; float: left; } .zetta-menu > li > div.zm-multi-column > ul { position: relative; display: inline-block; } .zetta-menu > li.zm-right-align > ul, .zetta-menu > li.zm-right-align > div.zm-multi-column { left: auto; right: 0; } .zetta-menu.zm-position-left > li.zm-right-align > ul, .zetta-menu.zm-position-left > li.zm-right-align > div.zm-multi-column { left: 100%; right: auto; } .zetta-menu.zm-position-left > li.zm-right-align > ul, .zetta-menu.zm-position-left > li.zm-right-align > div.zm-multi-column { right: 100%; } /* ====================== CONTENT DROP DOWN ====================== */ .zetta-menu > li.zm-content-full { position: static; } .zetta-menu > li.zm-content-full > div { width: 100%; } .zetta-menu > li.zm-content > div, .zetta-menu > li.zm-content-full > div { position: absolute; display: none; left: 0; padding: 11px 16px; background-color: #e4e4e4; color: #727272; -webkit-box-shadow: 0px 0px 0px 1px #d5d5d5; -moz-box-shadow: 0px 0px 0px 1px #d5d5d5; box-shadow: 0px 0px 0px 1px #d5d5d5; } .zetta-menu > li.zm-content > div ul, .zetta-menu > li.zm-content-full > div ul { display: block; position: relative; min-width: 0; -webkit-box-shadow: 0px 0px 0px 1px #d5d5d5; -moz-box-shadow: 0px 0px 0px 1px #d5d5d5; box-shadow: 0px 0px 0px 1px #d5d5d5; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; } .zetta-menu > li.zm-content > div ul li a, .zetta-menu > li.zm-content-full > div ul li a, .zetta-menu > li.zm-content > div ul li a:visited, .zetta-menu > li.zm-content-full > div ul li a:visited { text-align: center; padding: 11px 0; line-height: 1; color: #727272; -webkit-text-shadow: 1px 1px 0px #fcfcfc; -moz-text-shadow: 1px 1px 0px #fcfcfc; text-shadow: 1px 1px 0px #fcfcfc; } .zetta-menu > li.zm-content > div ul li:hover, .zetta-menu > li.zm-content-full > div ul li:hover { background-color: transparent; } .zetta-menu > li.zm-content > div ul li:hover a, .zetta-menu > li.zm-content-full > div ul li:hover a, .zetta-menu > li.zm-content > div ul li:hover a:visited, .zetta-menu > li.zm-content-full > div ul li:hover a:visited { color: #124466; text-decoration: underline; } .zetta-menu > li.zm-content > div img, .zetta-menu > li.zm-content-full > div img { width: 100%; margin: 11px 0; } .zetta-menu > li.zm-content > div .zm-video, .zetta-menu > li.zm-content-full > div .zm-video { position: relative; padding-bottom: 56.25%; height: 0; margin: 11px 0; overflow: hidden; } .zetta-menu > li.zm-content > div .zm-video > iframe, .zetta-menu > li.zm-content-full > div .zm-video > iframe { position: absolute; left: 0; top: 0; height: 100%; width: 100%; } .zetta-menu > li.zm-content > div input, .zetta-menu > li.zm-content-full > div input, .zetta-menu > li.zm-content > div textarea, .zetta-menu > li.zm-content-full > div textarea { width: 100%; margin-top: 10px; font: inherit; resize: none; padding: 11px; background-color: #ededed; color: #124466; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; -webkit-box-shadow: inset 0px 0px 0px 1px #d5d5d5; -moz-box-shadow: inset 0px 0px 0px 1px #d5d5d5; box-shadow: inset 0px 0px 0px 1px #d5d5d5; } .zetta-menu > li.zm-content > div input:hover, .zetta-menu > li.zm-content-full > div input:hover, .zetta-menu > li.zm-content > div textarea:hover, .zetta-menu > li.zm-content-full > div textarea:hover { background-color: #ededed; -webkit-box-shadow: #3598dc; -moz-box-shadow: #3598dc; box-shadow: #3598dc; } .zetta-menu > li.zm-content > div input.zm-button, .zetta-menu > li.zm-content-full > div input.zm-button, .zetta-menu > li.zm-content > div .zm-button, .zetta-menu > li.zm-content-full > div .zm-button { display: inline-block; text-decoration: none; cursor: pointer; text-align: center; font-weight: bold; background-color: #217ebd; color: #124466; -webkit-text-shadow: 1px 1px 0px #60aee4; -moz-text-shadow: 1px 1px 0px #60aee4; text-shadow: 1px 1px 0px #60aee4; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; padding: 11px; } .zetta-menu > li.zm-content > div input.zm-button:hover, .zetta-menu > li.zm-content-full > div input.zm-button:hover, .zetta-menu > li.zm-content > div .zm-button:hover, .zetta-menu > li.zm-content-full > div .zm-button:hover { color: #e4e4e4; -webkit-text-shadow: 1px 1px 0px #217ebd; -moz-text-shadow: 1px 1px 0px #217ebd; text-shadow: 1px 1px 0px #217ebd; } .zetta-menu > li.zm-content:hover > div, .zetta-menu > li.zm-content-full:hover > div { display: block; } .zetta-menu > li.zm-content > div, .zetta-menu > li.zm-content-full > div { top: 100%; } .zetta-menu.zm-position-bottom > li.zm-content > div, .zetta-menu.zm-position-bottom > li.zm-content-full > div { top: auto; bottom: 100%; } .zetta-menu.zm-position-left > li.zm-content > div, .zetta-menu.zm-position-left > li.zm-content-full > div { top: 0; left: 100%; } .zetta-menu.zm-position-right > li.zm-content > div, .zetta-menu.zm-position-right > li.zm-content-full > div { top: 0; right: 100%; left: auto; } .zetta-menu > li.zm-content.zm-right-align > div, .zetta-menu > li.zm-content-full.zm-right-align > div { left: auto; right: 0; } .zetta-menu.zm-position-left > li.zm-content.zm-right-align > div, .zetta-menu.zm-position-left > li.zm-content-full.zm-right-align > div { left: 100%; right: auto; } /* ====================== GRID SYSTEM ====================== */ .zetta-menu .zm-row { display: block; } .zetta-menu .zm-row .zm-col { display: inline-block; margin-bottom: 5px; padding: 5px; vertical-align: top; float: left; } .zetta-menu .zm-row .zm-col > .zm-grid-wrapper { padding: 11px 16px; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; background-color: #ededed; color: #727272; -webkit-box-shadow: inset 0px 0px 0px 1px #d5d5d5; -moz-box-shadow: inset 0px 0px 0px 1px #d5d5d5; box-shadow: inset 0px 0px 0px 1px #d5d5d5; -webkit-text-shadow: 1px 1px 0px #fcfcfc; -moz-text-shadow: 1px 1px 0px #fcfcfc; text-shadow: 1px 1px 0px #fcfcfc; } .zetta-menu .zm-row .zm-col.c-12 { width: 100%; } .zetta-menu .zm-row .zm-col.c-11 { width: 91.66666666666667%; } .zetta-menu .zm-row .zm-col.c-10 { width: 83.33333333333334%; } .zetta-menu .zm-row .zm-col.c-9 { width: 75%; } .zetta-menu .zm-row .zm-col.c-8 { width: 66.66666666666667%; } .zetta-menu .zm-row .zm-col.c-7 { width: 58.333333333333336%; } .zetta-menu .zm-row .zm-col.c-6 { width: 50%; } .zetta-menu .zm-row .zm-col.c-5 { width: 41.66666666666667%; } .zetta-menu .zm-row .zm-col.c-4 { width: 33.333333333333336%; } .zetta-menu .zm-row .zm-col.c-3 { width: 25%; } .zetta-menu .zm-row .zm-col.c-2 { width: 16.666666666666668%; } .zetta-menu .zm-row .zm-col.c-1 { width: 8.333333333333334%; } .zetta-menu .w-1000 { width: 1000px; } .zetta-menu .w-950 { width: 950px; } .zetta-menu .w-900 { width: 900px; } .zetta-menu .w-850 { width: 850px; } .zetta-menu .w-800 { width: 800px; } .zetta-menu .w-750 { width: 750px; } .zetta-menu .w-700 { width: 700px; } .zetta-menu .w-650 { width: 650px; } .zetta-menu .w-600 { width: 600px; } .zetta-menu .w-550 { width: 550px; } .zetta-menu .w-500 { width: 500px; } .zetta-menu .w-450 { width: 450px; } .zetta-menu .w-400 { width: 400px; } .zetta-menu .w-350 { width: 350px; } .zetta-menu .w-300 { width: 300px; } .zetta-menu .w-250 { width: 250px; } .zetta-menu .w-200 { width: 200px; } .zetta-menu .w-150 { width: 150px; } .zetta-menu .w-100 { width: 100px; } .zetta-menu .w-50 { width: 50px; } /* ====================== SEARCH PLACE ====================== */ .zetta-menu .zm-search { position: relative; overflow: hidden; } .zetta-menu .zm-search form > label { position: absolute; cursor: text; left: 0; top: 0; padding: 0 16px; line-height: 42px; -webkit-text-shadow: 1px 1px 0px #60aee4; -moz-text-shadow: 1px 1px 0px #60aee4; text-shadow: 1px 1px 0px #60aee4; } .zetta-menu .zm-search input { height: 42px; padding: 0 23.5px; font-size: inherit; -webkit-appearance: none; width: 0; opacity: 0.01; color: #3598dc; -webkit-box-shadow: inset 0px 0px 0px 1px #d5d5d5; -moz-box-shadow: inset 0px 0px 0px 1px #d5d5d5; box-shadow: inset 0px 0px 0px 1px #d5d5d5; } .zetta-menu .zm-search input:focus { width: 150px; opacity: 1; } .zetta-menu .zm-search input:focus + label { display: none; } .zetta-menu .zm-search input:focus, .zetta-menu .zm-search input:hover { background-color: #ededed; color: #124466; } .zetta-menu .zm-search:hover { background-color: #ededed; color: #124466; } .zetta-menu.zm-position-right .zm-search, .zetta-menu.zm-position-left .zm-search { float: none; } .zetta-menu.zm-position-right .zm-search input, .zetta-menu.zm-position-left .zm-search input { width: 100%; } /* ====================== SHOW EFFECTS ====================== */ /* fade */ .zetta-menu.zm-effect-fade > li > div, .zetta-menu.zm-effect-fade li > ul { display: block; visibility: hidden; opacity: 0; -webkit-transition: opacity .4s ease, visibility .4s linear 0s; -moz-transition: opacity .4s ease, visibility .4s linear 0s; -ms-transition: opacity .4s ease, visibility .4s linear 0s; -o-transition: opacity .4s ease, visibility .4s linear 0s; transition: opacity .4s ease, visibility .4s linear 0s; } .zetta-menu.zm-effect-fade > li:hover > div, .zetta-menu.zm-effect-fade li:hover > ul { visibility: visible; opacity: 1; -webkit-transition: opacity .4s ease; -moz-transition: opacity .4s ease; -ms-transition: opacity .4s ease; -o-transition: opacity .4s ease; transition: opacity .4s ease; } /* slide */ .zetta-menu.zm-effect-slide-top > li > div, .zetta-menu.zm-effect-slide-top li > ul { -webkit-transform: translateY(50px); -moz-transform: translateY(50px); -ms-transform: translateY(50px); -o-transform: translateY(50px); transform: translateY(50px); } .zetta-menu.zm-effect-slide-bottom > li > div, .zetta-menu.zm-effect-slide-bottom li > ul { -webkit-transform: translateY(-50px); -moz-transform: translateY(-50px); -ms-transform: translateY(-50px); -o-transform: translateY(-50px); transform: translateY(-50px); } .zetta-menu.zm-effect-slide-left > li > div, .zetta-menu.zm-effect-slide-left li > ul { -webkit-transform: translateX(50px); -moz-transform: translateX(50px); -ms-transform: translateX(50px); -o-transform: translateX(50px); transform: translateX(50px); } .zetta-menu.zm-effect-slide-right > li > div, .zetta-menu.zm-effect-slide-right li > ul { -webkit-transform: translateX(-50px); -moz-transform: translateX(-50px); -ms-transform: translateX(-50px); -o-transform: translateX(-50px); transform: translateX(-50px); } .zetta-menu.zm-effect-slide-top > li > div, .zetta-menu.zm-effect-slide-bottom > li > div, .zetta-menu.zm-effect-slide-left > li > div, .zetta-menu.zm-effect-slide-right > li > div, .zetta-menu.zm-effect-slide-top li > ul, .zetta-menu.zm-effect-slide-bottom li > ul, .zetta-menu.zm-effect-slide-left li > ul, .zetta-menu.zm-effect-slide-right li > ul { display: block !important; visibility: hidden; opacity: 0; -webkit-transition: opacity 0.4s ease, -webkit-transform 0.4s ease, visibility 0.4s linear 0s; -moz-transition: opacity 0.4s ease, -moz-transform 0.4s ease, visibility 0.4s linear 0s; -ms-transition: opacity 0.4s ease, -ms-transform 0.4s ease, visibility 0.4s linear 0s; -o-transition: opacity 0.4s ease, -o-transform 0.4s ease, visibility 0.4s linear 0s; transition: opacity .4s ease, transform .4s ease, visibility .4s linear 0s; } .zetta-menu.zm-effect-slide-top > li:hover > div, .zetta-menu.zm-effect-slide-bottom > li:hover > div, .zetta-menu.zm-effect-slide-left > li:hover > div, .zetta-menu.zm-effect-slide-right > li:hover > div, .zetta-menu.zm-effect-slide-top li:hover > ul, .zetta-menu.zm-effect-slide-bottom li:hover > ul, .zetta-menu.zm-effect-slide-left li:hover > ul, .zetta-menu.zm-effect-slide-right li:hover > ul { visibility: visible; opacity: 1; -webkit-transform: translate(0); -moz-transform: translate(0); -ms-transform: translate(0); -o-transform: translate(0); transform: translate(0); -webkit-transition: opacity 0.4s ease, -webkit-transform 0.4s ease; -moz-transition: opacity 0.4s ease, -moz-transform 0.4s ease; -ms-transition: opacity 0.4s ease, -ms-transform 0.4s ease; -o-transition: opacity 0.4s ease, -o-transform 0.4s ease; transition: opacity .4s ease, transform .4s ease; } .zetta-menu { background: -moz-linear-gradient(top, #3598dc 0%, #1f78b5 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3598dc), color-stop(100%, #1f78b5)); background: -webkit-linear-gradient(top, #3598dc 0%, #1f78b5 100%); background: -o-linear-gradient(top, #3598dc 0%, #1f78b5 100%); background: -ms-linear-gradient(top, #3598dc 0%, #1f78b5 100%); background: linear-gradient(to bottom, #3598dc 0%, #1f78b5 100%); } .zetta-menu.zm-position-right, .zetta-menu.zm-position-left { background: -moz-linear-gradient(left, #3598dc 0%, #1f78b5 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%, #3598dc), color-stop(100%, #1f78b5)); background: -webkit-linear-gradient(left, #3598dc 0%, #1f78b5 100%); background: -o-linear-gradient(left, #3598dc 0%, #1f78b5 100%); background: -ms-linear-gradient(left, #3598dc 0%, #1f78b5 100%); background: linear-gradient(to right, #3598dc 0%, #1f78b5 100%); } .zetta-menu.zm-position-right > li, .zetta-menu.zm-position-left > li { -webkit-box-shadow: inset 0 -1px 0 0 #1f78b5, 0 1px 0 0 #3598dc; -moz-box-shadow: inset 0 -1px 0 0 #1f78b5, 0 1px 0 0 #3598dc; box-shadow: inset 0 -1px 0 0 #1f78b5, 0 1px 0 0 #3598dc; } /* ====================== DROP MARGIN ====================== */ .zetta-menu > li > ul, .zetta-menu > li > div { margin-top: 1px; } .zetta-menu > li > ul:after, .zetta-menu > li > div:after { content: ''; position: absolute; width: 100%; height: 1px; top: -1px; left: 0; } .zetta-menu > li > ul li > ul, .zetta-menu > li > div li > ul { margin-left: 1px; } .zetta-menu > li > ul li > ul:after, .zetta-menu > li > div li > ul:after, .zetta-menu > li > ul li > ul.zm-drop-left:after, .zetta-menu > li > div li > ul.zm-drop-left:after { content: ''; position: absolute; width: 1px; height: 100%; top: 0; left: -1px; } .zetta-menu > li > ul li > ul.zm-drop-left, .zetta-menu > li > div li > ul.zm-drop-left { margin-left: auto; margin-right: 1px; } .zetta-menu > li > ul li > ul.zm-drop-left:after, .zetta-menu > li > div li > ul.zm-drop-left:after { right: -1px; left: auto; } .zetta-menu.zm-position-bottom > li > ul, .zetta-menu.zm-position-bottom > li > div { margin-top: 0; margin-bottom: 1px; } .zetta-menu.zm-position-bottom > li > ul:after, .zetta-menu.zm-position-bottom > li > div:after { height: 1px; top: auto; bottom: -1px; left: 0; } .zetta-menu.zm-position-left > li > ul, .zetta-menu.zm-position-left > li > div, .zetta-menu.zm-position-left > li > ul.zm-drop-left, .zetta-menu.zm-position-left > li > div.zm-drop-left { margin-left: 1px; } .zetta-menu.zm-position-left > li > ul:after, .zetta-menu.zm-position-left > li > div:after, .zetta-menu.zm-position-left > li > ul.zm-drop-left, .zetta-menu.zm-position-left > li > div.zm-drop-left { width: 1px; height: 100%; top: 0; left: -1px; bottom: auto; } .zetta-menu.zm-position-right > li > ul, .zetta-menu.zm-position-right > li > div { margin-left: 0; margin-right: 1px; } .zetta-menu.zm-position-right > li > ul:after, .zetta-menu.zm-position-right > li > div:after { width: 1px; height: 100%; top: 0; right: -1px; left: auto; bottom: auto; } .zetta-menu.zm-position-right > li > ul ul li > ul, .zetta-menu.zm-position-right > li > div ul li > ul { margin-left: 0; margin-right: 1px; } .zetta-menu.zm-position-right > li > ul ul li > ul:after, .zetta-menu.zm-position-right > li > div ul li > ul:after { width: 1px; height: 100%; top: 0; right: -1px; left: auto; bottom: auto; } /* ====================== ARROWS ====================== */ .zetta-menu > li > ul:before, .zetta-menu > li > .zm-multi-column:before, .zetta-menu > .zm-content > div:before { content: ''; position: absolute; left: 23px; top: 0px; border-left: 0px solid transparent; border-right: 0px solid transparent; border-bottom: 0px solid #727272; } .zetta-menu > li > ul li > ul:before, .zetta-menu > li > .zm-multi-column li > ul:before, .zetta-menu > .zm-content > div li > ul:before { content: ''; position: absolute; left: 0px; top: 23px; border-top: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid #727272; } .zetta-menu > li > ul li > ul.zm-drop-left:before, .zetta-menu > li > .zm-multi-column li > ul.zm-drop-left:before, .zetta-menu > .zm-content > div li > ul.zm-drop-left:before { left: auto; right: 0px; border-left: 0px solid #727272; border-right: none; } .zetta-menu > li.zm-right-align > ul:before, .zetta-menu > li.zm-right-align > .zm-multi-column:before, .zetta-menu > li.zm-right-align.zm-content > div:before { left: auto; right: 23px; } .zetta-menu.zm-position-bottom > li > ul:before, .zetta-menu.zm-position-bottom > li > .zm-multi-column:before, .zetta-menu.zm-position-bottom > .zm-content > div:before { top: auto; bottom: 0px; border-bottom: none; border-top: 0px solid #727272; } .zetta-menu.zm-position-bottom > li > ul li > ul:before, .zetta-menu.zm-position-bottom > li > .zm-multi-column li > ul:before, .zetta-menu.zm-position-bottom > .zm-content > div li > ul:before { top: auto; bottom: 23px; } .zetta-menu.zm-position-left > li > ul:before, .zetta-menu.zm-position-left > li > .zm-multi-column:before, .zetta-menu.zm-position-left > .zm-content > div:before { top: 23px; left: 0px; border-left: none; border-top: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid #727272; } .zetta-menu.zm-position-right > li > ul:before, .zetta-menu.zm-position-right > li > .zm-multi-column:before, .zetta-menu.zm-position-right > .zm-content > div:before, .zetta-menu.zm-position-right > li > ul li > ul:before, .zetta-menu.zm-position-right > li > .zm-multi-column li > ul:before, .zetta-menu.zm-position-right > .zm-content > div li > ul:before { top: 23px; right: 0px; left: auto; border-right: none; border-top: 0px solid transparent; border-bottom: 0px solid transparent; border-left: 0px solid #727272; } /* ====================== RESPONSIVE ====================== */ @media screen and (max-width: 768px) { /* ====================== MAIN ====================== */ .zetta-menu[class*='zm-response'] > li { position: relative; } .zetta-menu[class*='zm-response'] > li > ul, .zetta-menu[class*='zm-response'] > li > div.zm-multi-column > ul, .zetta-menu[class*='zm-response'] > li > ul ul, .zetta-menu[class*='zm-response'] > li > div.zm-multi-column > ul ul { left: 0; right: 0; width: auto !important; margin-right: 0; } .zetta-menu[class*='zm-response'] > li > ul ul, .zetta-menu[class*='zm-response'] > li > div.zm-multi-column > ul ul { top: 100%; margin-left: 42px !important; } .zetta-menu[class*='zm-response'].zm-position-bottom > li > ul ul, .zetta-menu[class*='zm-response'].zm-position-bottom > li > div.zm-multi-column > ul ul, .zetta-menu[class*='zm-response'].zm-position-bottom > li > ul ul.zm-drop-left, .zetta-menu[class*='zm-response'].zm-position-bottom > li > div.zm-multi-column > ul ul.zm-drop-left { left: 0; top: auto; bottom: 100%; } .zetta-menu[class*='zm-response'].zm-position-left > li > ul, .zetta-menu[class*='zm-response'].zm-position-left > li > div.zm-multi-column > ul, .zetta-menu[class*='zm-response'].zm-position-right > li > ul, .zetta-menu[class*='zm-response'].zm-position-right > li > div.zm-multi-column > ul { top: 100%; left: 0; right: 0; } .zetta-menu[class*='zm-response'].zm-position-left > li > ul ul, .zetta-menu[class*='zm-response'].zm-position-left > li > div.zm-multi-column > ul ul, .zetta-menu[class*='zm-response'].zm-position-right > li > ul ul, .zetta-menu[class*='zm-response'].zm-position-right > li > div.zm-multi-column > ul ul, .zetta-menu[class*='zm-response'].zm-position-left > li > ul ul.zm-drop-left, .zetta-menu[class*='zm-response'].zm-position-left > li > div.zm-multi-column > ul ul.zm-drop-left, .zetta-menu[class*='zm-response'].zm-position-right > li > ul ul.zm-drop-left, .zetta-menu[class*='zm-response'].zm-position-right > li > div.zm-multi-column > ul ul.zm-drop-left { left: 0; right: 0; top: 100%; } .zetta-menu[class*='zm-response'].zm-position-left > li.zm-content > div, .zetta-menu[class*='zm-response'].zm-position-left > li.zm-content-full > div, .zetta-menu[class*='zm-response'].zm-position-right > li.zm-content > div, .zetta-menu[class*='zm-response'].zm-position-right > li.zm-content-full > div { top: 100%; left: 0; right: 0; } .zetta-menu[class*='zm-response'] li > div { top: 100%; left: 0 !important; right: 0; width: auto !important; } .zetta-menu[class*='zm-response'] li > div.zm-multi-column > ul { width: 100% !important; } .zetta-menu[class*='zm-response'] .zm-row .zm-col { display: block; margin-right: 0; width: 100% !important; float: none; } .zetta-menu[class*='zm-response'] .w-50, .zetta-menu[class*='zm-response'] .w-100, .zetta-menu[class*='zm-response'] .w-150, .zetta-menu[class*='zm-response'] .w-200, .zetta-menu[class*='zm-response'] .w-250, .zetta-menu[class*='zm-response'] .w-300, .zetta-menu[class*='zm-response'] .w-350, .zetta-menu[class*='zm-response'] .w-400, .zetta-menu[class*='zm-response'] .w-450, .zetta-menu[class*='zm-response'] .w-500, .zetta-menu[class*='zm-response'] .w-550, .zetta-menu[class*='zm-response'] .w-600, .zetta-menu[class*='zm-response'] .w-650, .zetta-menu[class*='zm-response'] .w-700, .zetta-menu[class*='zm-response'] .w-750, .zetta-menu[class*='zm-response'] .w-800, .zetta-menu[class*='zm-response'] .w-850, .zetta-menu[class*='zm-response'] .w-900, .zetta-menu[class*='zm-response'] .w-950, .zetta-menu[class*='zm-response'] .w-1000 { width: 100%; } /* ====================== SIMPLE ====================== */ .zetta-menu.zm-response-simple > li { position: static; } .zetta-menu.zm-response-simple > li > a { font-size: 0; } .zetta-menu.zm-response-simple > li > a i { letter-spacing: 0; } .zetta-menu.zm-response-simple > li > a .zm-caret { display: none; } .zetta-menu.zm-response-simple > li.zm-logo { display: none; } .zetta-menu.zm-response-simple > li.zm-search { position: relative; } /* ====================== STACK ====================== */ .zetta-menu.zm-response-stack > li { display: block; float: none; } .zetta-menu.zm-response-stack > li.zm-content-full { position: relative; } .zetta-menu.zm-response-stack > li.zm-logo { text-align: center; } .zetta-menu.zm-response-stack > li.zm-logo img { position: relative; } .zetta-menu.zm-response-stack > li.zm-logo, .zetta-menu.zm-response-stack > li.zm-right-item { position: relative; width: 100%; } .zetta-menu.zm-response-stack > li > a .zm-caret { float: right; } .zetta-menu.zm-response-stack .zm-search { float: none; } .zetta-menu.zm-response-stack .zm-search input { width: 100%; } /* ====================== SWITCH ====================== */ .zetta-menu.zm-response-switch > li { display: none; float: none; position: relative; width: 100%; } .zetta-menu.zm-response-switch > li.zm-logo { display: block; } .zetta-menu.zm-response-switch > li.zm-logo img { position: relative; z-index: 1; } .zetta-menu.zm-response-switch:before { font-family: FontAwesome; content: '\f0c9'; position: relative; float: right; cursor: pointer; line-height: 42px; height: 42px; padding: 0 16px; z-index: 2; } .zetta-menu.zm-response-switch:hover:before { opacity: 0; } .zetta-menu.zm-response-switch:hover > li { display: block; } .zetta-menu.zm-response-switch > li > a .zm-caret { float: right; } .zetta-menu.zm-response-switch .zm-search { float: none; } .zetta-menu.zm-response-switch .zm-search input { width: 100%; } /* ====================== RESPONSE MARGIN ====================== */ .zetta-menu.zm-response-margin > li > ul, .zetta-menu.zm-response-margin li > div { margin-left: 42px !important; } }
EMLAK ARA
Emlak Durumu
Kategori
İl / İlçe / Semt
Fiyat Aralığı -
m² Aralığı -
Para Birimi
Kimden
Sıralama
Resimli İlanlar
  • Slide 2 Caption
PROJE VİTRİNİ

EMLAK HABER
DÖVİZ BİLGİLERİ
ALIŞ SATIŞ
2.6008 2.6055
2.7956 2.8006
3.8401 3.8601
VİTRİN İLANLARI
ACİL İLANLAR
YENİ İLANLAR