8889841c /**/ /* defaults */ /**/ .sky-mega-menu, .sky-mega-menu * { margin: 0; padding: 0; outline: none; border: 0; background: none; } .sky-mega-menu { font-family: 'Open Sans', sans-serif; } /**/ /* Hover color */ /**/ .sky-mega-menu li:hover > a, .sky-mega-menu li.current-navigation > a { background: rgba(90,90,90,.3); color: #fff; } .sky-mega-menu li li.current-navigation a { background: rgba(90,90,90,0); } .sky-mega-menu li li.current-navigation:hover a { background: rgba(90,90,90,.3); } .sky-mega-menu li > div.background-menu-image-1{ background-position:bottom right; background-size:cover; background-image:url('../images/menu-1.png') } .sky-mega-menu li > div.background-menu-image-2{ background-position:bottom right; background-size:cover; background-image:url('../images/menu-2.png') } .grey-menu-background{ background: rgba(20,20,20,0.9); -webkit-transition : all 0.3s ease-out; -moz-transition : all 0.3s ease-out; -o-transition :all 0.3s ease-out; transition : all 0.3s ease-out; } .cbp-af-header.cbp-af-header-shrink.grey-menu-background{ background: rgba(20,20,20,0.85); -webkit-transition : all 0.3s ease-out; -moz-transition : all 0.3s ease-out; -o-transition :all 0.3s ease-out; transition : all 0.3s ease-out; } /**/ /* level 1 */ /**/ .sky-mega-menu { position: relative; z-index: 999; font-size: 0; line-height: 0; text-align: right; } .sky-mega-menu:after { content: ''; display: table; clear: both; } .sky-mega-menu li { position: relative; display: inline-block; float:left; padding: 0px; border-style: solid; border-color: rgba(30,30,30,0); font-size: 13px; letter-spacing:2px; text-transform:uppercase; line-height: 45px; text-align: left; white-space: nowrap; } .sky-mega-menu li a { display: block; padding: 0 18px; text-decoration: none; color: #fff; font-weight:600; transition: background 0.4s, color 0.4s; -o-transition: background 0.4s, color 0.4s; -ms-transition: background 0.4s, color 0.4s; -moz-transition: background 0.4s, color 0.4s; -webkit-transition: background 0.4s, color 0.4s; } .sky-mega-menu li > div { position: absolute; z-index: 1000; padding:20px 20px; top: 100%; left: -9999px; margin-top: 10px; background-color: rgba(20,20,20,1); box-shadow: 0 0 8px rgba(0,0,0,.3); opacity: 0; -o-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -webkit-transform-origin: 0% 0%; -o-transition: -o-transform 0.1s, opacity 0.1s; -ms-transition: -ms-transform 0.1s, opacity 0.1s; -moz-transition: -moz-transform 0.1s, opacity 0.1s; -webkit-transition: -webkit-transform 0.1s, opacity 0.1s; } .sky-mega-menu li > div:after { content: ''; position: absolute; bottom: 100%; left: 0; width: 100%; height: 10px; background: transparent; } .sky-mega-menu li > div:before { content: ''; position: absolute; bottom: 100%; left: 24px; border-right: 5px solid transparent; border-bottom: 5px solid rgba(20,20,20,1); border-left: 5px solid transparent; } .sky-mega-menu li:hover > div { left: 0; opacity: 1; -webkit-transform: translate(0, 0); } .sky-mega-menu .right { float: none; border-right-width: 0; } .sky-mega-menu .right > div { -o-transform-origin-x: 100%; -ms-transform-origin-x: 100%; -moz-transform-origin-x: 100%; -webkit-transform-origin-x: 100%; } .sky-mega-menu .right:hover > div { right: 0; left: auto; } .sky-mega-menu .right:hover > div:before { right: 24px; left: auto; } .sky-mega-menu .switcher { display: none; } .sky-mega-menu .right.left > div { -o-transform-origin-x: 0%; -ms-transform-origin-x: 0%; -moz-transform-origin-x: 0%; -webkit-transform-origin-x: 0%; } .sky-mega-menu .right.left:hover > div { left: 0; right: auto; } .sky-mega-menu .right.left:hover > div:before { left: 24px; right: auto; } /**/ /* level 2+ */ /**/ .sky-mega-menu li li p { letter-spacing:3px; font-weight:600; font-size:11px; text-transform:uppercase; padding-bottom:10px; margin-bottom:10px; border-bottom:1px solid rgba(80,80,80,.9); } .sky-mega-menu li li p.in-column { padding-top:15px; } .sky-mega-menu li li { display: block; float: none; border-width: 0; border-top-width: 1px; line-height: 21px; white-space: normal; } .sky-mega-menu li li:first-child { border-top: 0; } .sky-mega-menu li li a { padding-top: 6px; padding-bottom: 6px; font-size: 10px; letter-spacing:2px; padding-left:0; font-weight:500; -webkit-transition : all 0.3s ease-out; -moz-transition : all 0.3s ease-out; -o-transition :all 0.3s ease-out; transition : all 0.3s ease-out; } .sky-mega-menu li li:hover a { padding-left:12px; } .sky-mega-menu li li > div { top: 0; margin: 0 0 0 8px; } .sky-mega-menu li li > div:after { top: 0; right: 100%; bottom: auto; left: auto; width: 8px; height: 100%; } .sky-mega-menu li li > div:before { top: 22px; right: 100%; bottom: auto; left: auto; border-top: 5px solid transparent; border-right: 5px solid rgba(20,20,20,0.9); border-bottom: 5px solid transparent; } .sky-mega-menu li li:hover > div { left: 100%; } .sky-mega-menu .right li > div { margin: 0 8px 0 0; -o-transform-origin-x: 100%; -ms-transform-origin-x: 100%; -moz-transform-origin-x: 100%; -webkit-transform-origin-x: 100%; } .sky-mega-menu .right li > div:after { right: auto; left: 100%; } .sky-mega-menu .right li > div:before { right: auto; left: 100%; border-right: none; border-left: 5px solid rgba(20,20,20,0.9); } .sky-mega-menu .right li:hover > div { right: 100%; left: auto; } .sky-mega-menu .right.left li > div { -o-transform-origin-x: 0%; -ms-transform-origin-x: 0%; -moz-transform-origin-x: 0%; -webkit-transform-origin-x: 0%; } .sky-mega-menu .right.left:hover li > div { left: 100%; right: auto; top:-20px; } .sky-mega-menu .right.left:hover li > div:before { display:none; } /**/ /* positions */ /**/ .sky-mega-menu-fixed { position: fixed; top: 0; left: 0; width: 100%; } .sky-mega-menu-pos-bottom li > div { top: auto; bottom: 100%; margin: 0 0 8px; -o-transform-origin-y: 100%; -ms-transform-origin-y: 100%; -moz-transform-origin-y: 100%; -webkit-transform-origin-y: 100%; } .sky-mega-menu-pos-bottom li > div:after { top: 100%; bottom: auto; } .sky-mega-menu-pos-bottom li > div:before { top: 100%; bottom: auto; border-top: 5px solid rgba(255,255,255,0.9); border-right: 5px solid transparent; border-bottom: none; border-left: 5px solid transparent; } .sky-mega-menu-pos-bottom li li > div { top: auto; bottom: 0; } .sky-mega-menu-pos-bottom li li > div:before { top: auto; bottom: 22px; } .sky-mega-menu-pos-bottom.sky-mega-menu-fixed { top: auto; bottom: 0; } .sky-mega-menu-pos-left li, .sky-mega-menu-pos-right li { display: block; float: none; border-width: 0; border-top-width: 1px; } .sky-mega-menu-pos-left li:first-child, .sky-mega-menu-pos-right li:first-child { border-top: 0; } .sky-mega-menu-pos-left li > div, .sky-mega-menu-pos-right li > div { top: 0; } .sky-mega-menu-pos-left li > div { margin: 0 0 0 8px; } .sky-mega-menu-pos-right li > div { margin: 0 8px 0 0; -o-transform-origin-x: 100%; -ms-transform-origin-x: 100%; -moz-transform-origin-x: 100%; -webkit-transform-origin-x: 100%; } .sky-mega-menu-pos-left li > div:after, .sky-mega-menu-pos-right li > div:after { top: 0; bottom: auto; width: 8px; height: 100%; } .sky-mega-menu-pos-left li > div:after { right: 100%; left: auto; } .sky-mega-menu-pos-right li > div:after { right: auto; left: 100%; } .sky-mega-menu-pos-left li > div:before, .sky-mega-menu-pos-right li > div:before { top: 22px; bottom: auto; border-top: 5px solid transparent; border-bottom: 5px solid transparent; } .sky-mega-menu-pos-left li > div:before { right: 100%; left: auto; border-right: 5px solid rgba(255,255,255,0.9); } .sky-mega-menu-pos-right li > div:before { right: auto; left: 100%; border-left: 5px solid rgba(255,255,255,0.9); } .sky-mega-menu-pos-left li:hover > div { left: 100%; } .sky-mega-menu-pos-right li:hover > div { right: 100%; left: auto; } .sky-mega-menu-pos-left .bottom > div, .sky-mega-menu-pos-right .bottom > div { top: auto; bottom: 0; -o-transform-origin-y: 100%; -ms-transform-origin-y: 100%; -moz-transform-origin-y: 100%; -webkit-transform-origin-y: 100%; } .sky-mega-menu-pos-left .bottom > div:before, .sky-mega-menu-pos-right .bottom > div:before { top: auto; bottom: 22px; } .sky-mega-menu-pos-right li li > div { margin: 0 8px 0 0; -o-transform-origin-x: 100%; -ms-transform-origin-x: 100%; -moz-transform-origin-x: 100%; -webkit-transform-origin-x: 100%; } .sky-mega-menu-pos-right li li > div:after { right: auto; left: 100%; } .sky-mega-menu-pos-right li li > div:before { right: auto; left: 100%; border-right: none; border-left: 5px solid rgba(255,255,255,0.9); } .sky-mega-menu-pos-right li li:hover > div { right: 100%; left: auto; } .sky-mega-menu-pos-left.sky-mega-menu-fixed { top: 0; right: auto; bottom: 0; left: 0; width: auto; } .sky-mega-menu-pos-right.sky-mega-menu-fixed { top: 0; right: 0; bottom: 0; left: auto; width: auto; } /**/ /* animations */ /**/ .sky-mega-menu-anim-slide li > div { -o-transform: translate(0, 60px); -ms-transform: translate(0, 60px); -moz-transform: translate(0, 60px); -webkit-transform: translate(0, 60px); } .sky-mega-menu-pos-bottom.sky-mega-menu-anim-slide li > div { -o-transform: translate(0, -60px); -ms-transform: translate(0, -60px); -moz-transform: translate(0, -60px); -webkit-transform: translate(0, -60px); } .sky-mega-menu-anim-slide li:hover > div { -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -moz-transform: translate(0, 0); -webkit-transform: translate(0, 0); } .sky-mega-menu-anim-scale li > div { -o-transform: scale(0, 0); -ms-transform: scale(0, 0); -moz-transform: scale(0, 0); -webkit-transform: scale(0, 0); } .sky-mega-menu-anim-scale li:hover > div { -o-transform: scale(1, 1); -ms-transform: scale(1, 1); -moz-transform: scale(1, 1); -webkit-transform: scale(1, 1); } .sky-mega-menu-anim-flip { perspective: 2000px; -o-perspective: 2000px; -moz-perspective: 2000px; -webkit-perspective: 2000px; } .sky-mega-menu-anim-flip li > div { transform-style: preserve-3d; -o-transform: preserve-3d; -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform: rotateX(-75deg); -o-transform: rotateX(-75deg); -moz-transform: rotateX(-75deg); -webkit-transform: rotateX(-75deg); } .sky-mega-menu-anim-flip li:hover > div { transform: rotateX(0deg); -o-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -webkit-transform: rotateX(0deg); } /**/ /* grid */ /**/ .sky-mega-menu .grid-column { float: left; padding-left:20px; border-color: #d9d9d9; border-left-width: 0; border-left-style: solid; } .sky-mega-menu .grid-column:first-child { margin-left: 0; border-left: 0; padding-left:0; } .sky-mega-menu .grid-column2, .sky-mega-menu .grid-container2 { width: 174px; } .sky-mega-menu .grid-column3, .sky-mega-menu .grid-container3 { width: 271px; } .sky-mega-menu .grid-column4, .sky-mega-menu .grid-container4 { width: 368px; } .sky-mega-menu .grid-column5, .sky-mega-menu .grid-container5 { width: 465px; } .sky-mega-menu .grid-column6, .sky-mega-menu .grid-container6 { width: 562px; } .sky-mega-menu .grid-column7, .sky-mega-menu .grid-container7 { width: 659px; } .sky-mega-menu .grid-column8, .sky-mega-menu .grid-container8 { width: 756px; } .sky-mega-menu .grid-column9, .sky-mega-menu .grid-container9 { width: 853px; } .sky-mega-menu .grid-column10, .sky-mega-menu .grid-container10 { width: 950px; } .sky-mega-menu .grid-column11, .sky-mega-menu .grid-container11 { width: 1047px; } .sky-mega-menu .grid-column12, .sky-mega-menu .grid-container12 { width: 1144px; } /**/ /* icons */ /**/ .sky-mega-menu li a > .fa { display: inline-block; float: left; width: 12px; margin: 0 10px 0 -4px; font-size: 12px; line-height: inherit; text-align: center; font-weight:400; } .sky-mega-menu li a > .fa-single { float: none; margin: 0; } .sky-mega-menu li a > .fa-indicator { position: relative; top: -1px; float: none; display: inline-block; vertical-align: middle; width: auto; margin: 0 -10px 0 10px; font-size: 9px; line-height: 1; text-align: right; } .sky-mega-menu li li a > .fa-indicator { top: 0; float: right; display: block; line-height: inherit; } .sky-mega-menu li li a > .fa-text-icon { display: block; float: left; width: 10px; padding-right:5px; margin: 0 10px 0 0; font-size: 10px; line-height: inherit; text-align: center; font-weight:100; } /**/ /* forms */ /**/ .sky-mega-menu form fieldset { display: block; padding: 25px 30px; } .sky-mega-menu form fieldset + fieldset { border-top: 1px solid rgba(0,0,0,.1); } .sky-mega-menu form section { margin-bottom: 20px; } .sky-mega-menu form .input, .sky-mega-menu form .textarea, .sky-mega-menu form .radio, .sky-mega-menu form .checkbox, .sky-mega-menu form .button { position: relative; display: block; } .sky-mega-menu form .input input, .sky-mega-menu form .textarea textarea { display: block; box-sizing: border-box; -moz-box-sizing: border-box; width: 100%; height: 34px; padding: 8px 10px; outline: none; border: none; border-radius: 0; background: #fff; font: 12px/19px 'Open Sans', Helvetica, Arial, sans-serif; color: #404040; appearance: normal; -moz-appearance: none; -webkit-appearance: none; transition: border-color 0.3s; -o-transition: border-color 0.3s; -ms-transition: border-color 0.3s; -moz-transition: border-color 0.3s; -webkit-transition: border-color 0.3s; } .sky-mega-menu form .textarea textarea { height: auto; resize: none; } .sky-mega-menu form .button { float: right; height: 34px; overflow: hidden; margin-left: 20px; padding: 0 20px; outline: none; border: 0; background-color: #333; font: 300 11px/34px 'Open Sans', Helvetica, Arial, sans-serif; text-transform:uppercase; letter-spacing:2px; color: #fff; cursor: pointer; -webkit-transition : all 0.3s ease-out; -moz-transition : all 0.3s ease-out; -o-transition :all 0.3s ease-out; transition : all 0.3s ease-out; } .sky-mega-menu form .button:hover { background-color: #222; } .sky-mega-menu form .fa-append { position: absolute; top: 5px; right: 5px; width: 29px; height: 29px; padding-left: 3px; border-left: 1px solid #666; font-size: 15px; line-height: 29px; text-align: center; color: #ccc; } .sky-mega-menu form .input .fa-append + input, .sky-mega-menu form .textarea .fa-append + textarea { padding-right: 46px; } .sky-mega-menu form .row { margin: 0 -15px; } .sky-mega-menu form .row:after { content: ''; display: table; clear: both; } .sky-mega-menu form .col { float: left; min-height: 1px; padding-right: 15px; padding-left: 15px; box-sizing: border-box; -moz-box-sizing: border-box; } .sky-mega-menu form .col-6 { width: 50%; } .sky-mega-menu form .input:hover input, .sky-mega-menu form .textarea:hover textarea, .sky-mega-menu form .checkbox:hover i { border-color: #666; } .sky-mega-menu form .button:hover { opacity: 1; } .sky-mega-menu form .input input:focus, .sky-mega-menu form .textarea textarea:focus, .sky-mega-menu form .checkbox input:focus + i { border-color: #666; } .sky-mega-menu .search { border-left: 0; } .sky-mega-menu .search .input { margin: 3px 3px 3px 3px; } .sky-mega-menu .search .input input { width: 240px; padding-right: 65px; } .sky-mega-menu .search .button { position: absolute; top: 0; right: 0; margin: 0; } /**/ /* phone */ /**/ @media screen and (max-width: 1000px) { body { -webkit-text-size-adjust: none; } .sky-mega-menu li { background: rgba(20,20,20,1); } .sky-mega-menu li li{ background: rgba(20,20,20,0); } .sky-mega-menu .right.left:hover > div { right: 0; left: 50px; } .sky-mega-menu .right.left:hover > div:before { right: 24px; left: auto; } .sky-mega-menu .right.left:hover li > div { left: 50px; right: auto; top:25px; width:calc(100% - 70px); } .sky-mega-menu .grid-column:first-child { padding-top:0; } .sky-mega-menu .grid-column { padding-left:0; padding-top:20px; } .sky-mega-menu .grid-column { float: none; width: auto; margin: 0; border: 0; border-top: 1px solid #d9d9d9; } .sky-mega-menu .grid-column:first-child { border-top: 0; } .sky-mega-menu form fieldset { display: block; padding: 15px 20px; } .sky-mega-menu form section { margin-bottom: 10px; } .sky-mega-menu form .row { margin: 0 -10px; } .sky-mega-menu form .col { padding-right: 10px; padding-left: 10px; } .sky-mega-menu-response-to-stack > li { display: block; float: none; border: 0; border-top: 1px solid #d9d9d9; } .sky-mega-menu-response-to-stack > li:first-child { border-top: 0; } .sky-mega-menu-response-to-switcher > li { display: none; float: none; border: 0; } .sky-mega-menu-response-to-switcher > .switcher { display: block; float:right; } .sky-mega-menu-response-to-switcher:hover > li { display: block; border-top: 1px solid #d9d9d9; } .sky-mega-menu-response-to-switcher:hover > .switcher { display: none; } .sky-mega-menu-response-to-stack li > div, .sky-mega-menu-response-to-stack li > [class^="grid-container"], .sky-mega-menu-response-to-switcher li > div, .sky-mega-menu-response-to-switcher li > [class^="grid-container"] { top: 100%; bottom: auto; width: auto; margin: 8px 0 0 0; -o-transform-origin: 0 0; -ms-transform-origin: 0 0; -moz-transform-origin: 0 0; -webkit-transform-origin: 0 0; } .sky-mega-menu-response-to-stack li > div:after, .sky-mega-menu-response-to-switcher li > div:after { top: auto; right: auto; bottom: 100%; left: 0; width: 100%; height: 8px; } .sky-mega-menu-response-to-stack li > div:before, .sky-mega-menu-response-to-switcher li > div:before { display: none; } .sky-mega-menu-response-to-stack li a > .fa, .sky-mega-menu-response-to-switcher li a > .fa { margin: 0 15px 0 0; } .sky-mega-menu-response-to-stack li:hover > div, .sky-mega-menu-response-to-stack li:hover > [class^="grid-container"], .sky-mega-menu-response-to-switcher li:hover > div, .sky-mega-menu-response-to-switcher li:hover > [class^="grid-container"] { right: 0; left: 51px; } .sky-mega-menu-response-to-stack li li > div, .sky-mega-menu-response-to-switcher li li > div { top: 100%; width: auto; margin: 8px 0 0 0; } .sky-mega-menu-response-to-stack li li > div:after, .sky-mega-menu-response-to-switcher li li > div:after { top: auto; right: auto; bottom: 100%; left: 0; width: 100%; height: 8px; } .sky-mega-menu-response-to-stack li li:hover > div, .sky-mega-menu-response-to-switcher li li:hover > div { right: 0; left: 51px; } .sky-mega-menu-response-to-stack .search .input input, .sky-mega-menu-response-to-switcher .search .input input { width: 100%; } .sky-mega-menu-response-to-icons li { position: static; font-size: 0; } .sky-mega-menu-response-to-icons li a { padding: 0 10px; } .sky-mega-menu-response-to-icons li > div, .sky-mega-menu-response-to-icons li > [class^="grid-container"] { width: 100%; } .sky-mega-menu-response-to-icons li > div:before { display: none; } .sky-mega-menu-response-to-icons li a > .fa { margin: 0; } .fa-indicator { position: absolute; display: block; right:5px; top:50%; margin-top:-3px; line-height: 6px; font-size: 6px; color:#f1f1f1; z-index:2; } .sky-mega-menu-response-to-icons li li { position: relative; font-size: 13px; } .sky-mega-menu-response-to-icons li li > div, .sky-mega-menu-response-to-icons .right li > div { top: 100%; margin: 8px 0 0 0; } .sky-mega-menu-response-to-icons li li > div:after, .sky-mega-menu-response-to-icons .right li > div:after { top: auto; right: auto; bottom: 100%; left: 0; width: 100%; height: 8px; } .sky-mega-menu-response-to-icons li li:hover > div, .sky-mega-menu-response-to-icons .right li:hover > div { right: 0; left: 41px; width: auto; } .sky-mega-menu-response-to-icons li li a > .fa { margin-right: 10px; } .sky-mega-menu-response-to-icons li li a > .fa-indicator { margin-right: 0px; } .sky-mega-menu-response-to-icons.sky-mega-menu-anim-flip li li > div { top: 100%; margin: 8px 0 0 0; transform: rotateX(0deg); -moz-transform: rotateX(0deg); -webkit-transform: rotateX(0deg); } .sky-mega-menu-pos-bottom.sky-mega-menu-response-to-icons li li > div { top: auto; bottom: 100%; margin: 0 0 8px 0; } .sky-mega-menu-pos-bottom.sky-mega-menu-response-to-icons li li > div:after { top: 100%; bottom: auto; } }