Template:HFUT-China/MainPage/css/headerCss

/* #c9ab6c */

• {

-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; margin:0; padding:0; -webkit-font-smoothing:antialiased; -moz-font-smoothing:antialiased; -o-font-smoothing:antialiased; font-smoothing:antialiased } a,input,button,*,a:focus,input:focus,button:focus,*:focus,a:active,input:active,button:active,*:active,a:link,input:link,button:link,*:link,a:visited,input:visited,button:visited,*:visited,a:hover,input:hover,button:hover,*:hover { outline:0 } html { font-size:100% } html,body { min-height:100% } body { position:relative; font-family:arial,sans-serif } a { text-decoration:none } table { width:100% } th,td { padding:14px; vertical-align:middle } tr.odd,tr.even { background-color:transparent; border-bottom:1px solid #e5e5e5; -webkit-transition:all .2s ease-in-out 0s; -moz-transition:all .2s ease-in-out 0s; -o-transition:all .2s ease-in-out 0s; -ms-transition:all .2s ease-in-out 0s; transition:all .2s ease-in-out 0s } thead { background-color:#f0f0f0; border-bottom:1px solid #e5e5e5 } td,th { border-bottom:0 } td,th,td a,th a { color:#626262 } ul.primary { position:fixed; z-index:20; top:150px; left:0; border-bottom:0; padding:0; margin:0; filter:alpha(opacity=60); -ms-filter:alpha(opacity=@opacity-ie); -moz-opacity:.6; -khtml-opacity:.6; opacity:.6; -webkit-transition:opacity .3s ease-in-out 0s; -moz-transition:opacity .3s ease-in-out 0s; -o-transition:opacity .3s ease-in-out 0s; -ms-transition:opacity .3s ease-in-out 0s; transition:opacity .3s ease-in-out 0s } ul.primary:hover,ul.primary:active { filter:alpha(opacity=100); -ms-filter:alpha(opacity=@opacity-ie); -moz-opacity:1; -khtml-opacity:1; opacity:1 } ul.primary li { display:block } ul.primary li a { display:block; background-color:black; color:white; border-width:0; border:0; padding:10px; font-size:10px; height:auto; margin-right:0; text-decoration:none; -webkit-transition:background .3s ease-in-out 0s; -moz-transition:background .3s ease-in-out 0s; -o-transition:background .3s ease-in-out 0s; -ms-transition:background .3s ease-in-out 0s; transition:background .3s ease-in-out 0s } ul.primary li a:hover { background:grey } ul.primary li.active a { background-color:white; color:black; border-width:0; border:0 } body { position:absolute; top:0; left:0; right:0; bottom:0; font-family:'GothamBook'; overflow-x:hidden; max-width:100%; background:#fbfbfb } body.menu-opened { overflow:hidden }

1. page-wrapper {

height:100% }

1. page {

height:100%; max-width:100%; min-width:100%; right:0; padding-top:48px; -webkit-backface-visibilty:hidden; position:relative; -webkit-transition:all .3s ease-in-out 0s; -moz-transition:all .3s ease-in-out 0s; -o-transition:all .3s ease-in-out 0s; -ms-transition:all .3s ease-in-out 0s; transition:all .3s ease-in-out 0s } .header-transparent #page { padding-top:0 } .menu-opened #page { -webkit-transform:translate(-272px,0); -moz-transform:translate(-272px,0); -ms-transform:translate(-272px,0); transform:translate(-272px,0) }

1. main {

height:100%; position:relative; z-index:1 } @media only screen and (min-width:1025px) { #page { padding-top:80px } .header-transparent #page { padding-top:0 } }.background-color-1 { background-color:#000 } .background-color-2 { background-color:#fbfbfb } .background-color-3 { background-color:#229f7d } .background-color-4 { background-color:#c9ab6c } .background-color-5 { background-color:#b91f2f } .background-color-6 { background-color:#191919 } .background-color-7 { background-color:#767676 } .background-color-8 { background-color:#3460a1 } .background-color-9 { background-color:#28aae1 } .background-color-10 { background-color:#136d9d } .background-color-11 { background-color:#de5543 } .background-color-12 { background-color:#ee3138 } .background-color-13 { background-color:#16bbed } .background-color-14 { background-color:#65469c } .background-color-15 { background-color:#f5f5f5 } .background-color-16 { background-color:#fff } .background-color-17 { background-color:#fff } .background-color-18 { background-color:#fff } .background-color-19 { background-color:#fff } .background-color-20 { background-color:#fff } .color-1,.color-1 a { color:#000 } .color-2,.color-2 a { color:#fbfbfb } .color-3,.color-3 a { color:#229f7d } .color-4,.color-4 a { color:#c9ab6c } .color-5,.color-5 a { color:#b91f2f } .color-6,.color-6 a { color:#191919 } .color-7,.color-7 a { color:#767676 } .color-8,.color-8 a { color:#3460a1 } .color-9,.color-9 a { color:#28aae1 } .color-10,.color-10 a { color:#136d9d } .color-11,.color-11 a { color:#de5543 } .color-12,.color-12 a { color:#ee3138 } .color-13,.color-13 a { color:#16bbed } .color-14,.color-14 a { color:#65469c } .color-15,.color-15 a { color:#f5f5f5 } .color-16,.color-16 a { color:#fff } .color-17,.color-17 a { color:#fff } .color-18,.color-18 a { color:#fff } .color-19,.color-19 a { color:#fff } .color-20,.color-20 a { color:#fff } .color-21,.color-21 a { color:#f5a90c } .color-22,.color-22 a { color:#9b38a3 } .color-23,.color-23 a { color:#333 }

.viewport { max-width:1240px; margin:auto; zoom:1; position:relative; min-height:100% } .viewport:after { content:; display:table; clear:both; height:0; visibility:0 } .overflow { overflow:hidden } a { color:#c9ab6c; -webkit-transition:all .3s ease-in-out 0s; -moz-transition:all .3s ease-in-out 0s; -o-transition:all .3s ease-in-out 0s; -ms-transition:all .3s ease-in-out 0s; transition:all .3s ease-in-out 0s } a:hover { color:#191919 } ul.menu { padding:0; margin:0 } ul.menu li { list-style:none; padding:0; margin:0 } h2,h3,h4,p { font-weight:normal } a.form-submit,input.form-submit { background:#c9ab6c; text-transform:uppercase; color:white; padding:10px; margin:5px; border:0; font-family:'GothamBook'; -webkit-transition:all .3s ease-in-out 0s; -moz-transition:all .3s ease-in-out 0s; -o-transition:all .3s ease-in-out 0s; -ms-transition:all .3s ease-in-out 0s; transition:all .3s ease-in-out 0s } a.form-submit:hover,input.form-submit:hover { background:#eee; color:#191919 } a.form-submit.delete-line-item,input.form-submit.delete-line-item { text-transform:none; text-indent:-9999px; background:url(/sites/all/themes/mess/images/delete.png) no-repeat center #dadada; height:24px; width:24px; background-size:100%; padding:0; border:0; -webkit-border-radius:48px; -moz-border-radius:48px; border-radius:48px; -moz-background-clip:padding; -webkit-background-clip:padding-box; background-clip:padding-box; -webkit-transition:background .3s ease-in-out 0s; -moz-transition:background .3s ease-in-out 0s; -o-transition:background .3s ease-in-out 0s; -ms-transition:background .3s ease-in-out 0s; transition:background .3s ease-in-out 0s } a.form-submit.delete-line-item:hover,input.form-submit.delete-line-item:hover { background:url(/sites/all/themes/mess/images/delete.png) no-repeat center #b91f2f; background-size:100% } a.form-submit.checkout-back,input.form-submit.checkout-back,a.form-submit.checkout-cancel,input.form-submit.checkout-cancel { background:#efefef; font-family:'GothamBook'; color:grey } a.form-submit.checkout-back:hover,input.form-submit.checkout-back:hover,a.form-submit.checkout-cancel:hover,input.form-submit.checkout-cancel:hover { background:white; color:#b91f2f }

body.admin-menu { margin-top:0 !important }

1. header {

position:absolute; height:48px; width:100%; top:0; left:0; right:0; background:white; z-index:20; -webkit-backface-visibilty:hidden; -webkit-box-shadow:0 0 10px 0 rgba(0,0,0,0.2); -moz-box-shadow:0 0 10px 0 rgba(0,0,0,0.2); box-shadow:0 0 10px 0 rgba(0,0,0,0.2) }

1. header .block-context-ui {

display:none } .header-transparent #header { background:rgba(0,0,0,0.2) } .scrolled #header { background:white } .scrolled #header .viewport .logo:after { right:90px }

1. header .viewport {

position:static }

1. header .viewport .logo {

position:absolute; height:90px; width:100px; left:50px; top:20%; margin-top:-24px; z-index:3; overflow:hidden }

1. header .viewport .logo a {

display:block; text-indent:-9999px; position:absolute; top:0; left:0; right:0; bottom:0; filter:alpha(opacity=100); -ms-filter:alpha(opacity=@opacity-ie); -moz-opacity:1; -khtml-opacity:1; opacity:1; z-index:3 }

1. header .viewport .logo:active:after,#header .viewport .logo:hover:after,#header .viewport .logo:active:before,#header .viewport .logo:hover:before {

color:#c9ab6c }

1. header .viewport .logo:after,#header .viewport .logo:before {

font-family:'icon'; position:absolute; display:block; -webkit-transition:all .3s ease-in-out 0s; -moz-transition:all .3s ease-in-out 0s; -o-transition:all .3s ease-in-out 0s; -ms-transition:all .3s ease-in-out 0s; transition:all .3s ease-in-out 0s; color:#767676; -webkit-backface-visibilty:hidden; z-index:0 } .header-transparent #header .viewport .logo:after,.header-transparent #header .viewport .logo:before { color:white }

1. header .viewport .logo:after {

content:"\e603"; font-size:3em; left:0; top:0 }

1. header .viewport .logo:before {

content:"\e602"; font-size:7em; left:50px; top:-32px }

1. header .viewport .burger {

height:48px; width:48px; position:absolute; right:0; top:0; background:#c9ab6c; cursor:pointer }

1. header .viewport .burger span {

display:block; height:2px; width:24px; position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; background:white }

1. header .viewport .burger span.top {

top:16px }

1. header .viewport .burger span.bottom {

bottom:16px }

1. header .viewport .navigation-wrapper {

position:fixed; left:100%; z-index:20; top:0; bottom:0; overflow-y:scroll; -webkit-transition:all .3s ease-in-out 0s; -moz-transition:all .3s ease-in-out 0s; -o-transition:all .3s ease-in-out 0s; -ms-transition:all .3s ease-in-out 0s; transition:all .3s ease-in-out 0s; zoom:1 }

1. header .viewport .navigation-wrapper:after {

content:; display:table; clear:both; height:0; visibility:0 }

1. header .viewport .navigation-wrapper .navigation {

width:272px; min-height:100%; position:relative; float:right; background:#191919; overflow-y:scroll }

1. header .viewport .navigation-wrapper .navigation .main-menu {

padding-top:7px }

1. header .viewport .navigation-wrapper .navigation .block-menu {

width:100%; clear:both }

1. header .viewport .navigation-wrapper .navigation .block-menu.try-buy-menu ul li,#header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li {

float:left; width:100% }

1. header .viewport .navigation-wrapper .navigation .block-menu.try-buy-menu ul li a,#header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a {

display:block; padding:16px 10px; height:48px; width:100%; position:relative; -webkit-transition:all .3s ease-in-out 0s; -moz-transition:all .3s ease-in-out 0s; -o-transition:all .3s ease-in-out 0s; -ms-transition:all .3s ease-in-out 0s; transition:all .3s ease-in-out 0s; -webkit-backface-visibilty:hidden }

1. header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a {

padding-left:47px }

1. header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a:active {

color:#767676 }

1. header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a:hover {

color:#767676 }

1. header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a.active,#header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a:focus {

color:white }

1. header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a:before {

text-indent:0; font-family:'icon'; display:block; position:absolute; top:0; left:0; right:0; bottom:0; right:auto; text-align:center; padding:15px; font-size:1.125em; -webkit-transition:all .3s ease-in-out 0s; -moz-transition:all .3s ease-in-out 0s; -o-transition:all .3s ease-in-out 0s; -ms-transition:all .3s ease-in-out 0s; transition:all .3s ease-in-out 0s; -webkit-backface-visibilty:hidden }

1. header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a.cart:before {

content:"\e604" }

1. header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a.user:before {

content:"\e605" }

1. header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a.login:before {

content:"\e605" }

1. header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a.logout:before {

content:"\ea14" }

1. header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li.cart {

position:relative }

1. header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li.cart span.item-count {

display:block; height:16px; width:16px; text-align:center; color:white; background:red; font-size:12px; font-weight:bold; border-radius:16px; letter-spacing:-1px; line-height:150%; text-indent:-1px; position:absolute; top:6px; left:30px }

1. header .viewport .navigation-wrapper .navigation .block-menu.try-buy-menu ul li,#header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li {

width:100% }

1. header .viewport .navigation-wrapper .navigation .block-menu.try-buy-menu ul li a,#header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li a {

display:block; padding:10px 16px; height:36px; width:100%; color:#767676; text-transform:uppercase; -webkit-transition:all .3s ease-in-out 0s; -moz-transition:all .3s ease-in-out 0s; -o-transition:all .3s ease-in-out 0s; -ms-transition:all .3s ease-in-out 0s; transition:all .3s ease-in-out 0s }

1. header .viewport .navigation-wrapper .navigation .block-menu.try-buy-menu ul li a:hover,#header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li a:hover {

color:white }

1. header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li {

overflow:hidden; position:relative }

1. header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li .toggler {

width:36px; height:36px; position:absolute; right:0; top:0 }

1. header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li .toggler:before {

content:"\e601"; font-family:'icon'; display:block; position:absolute; top:0; left:0; right:0; bottom:0; -webkit-transition:all .3s ease-in-out 0s; -moz-transition:all .3s ease-in-out 0s; -o-transition:all .3s ease-in-out 0s; -ms-transition:all .3s ease-in-out 0s; transition:all .3s ease-in-out 0s; -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg); -ms-transform:rotate(90deg); transform:rotate(90deg); text-align:center; line-height:230%; color:#767676 }

1. header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li:focus .toggler:before {

color:white }

1. header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li.opened a {

color:#c9ab6c }

1. header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li.opened .toggler:before {

-webkit-transform:rotate(-90deg); -moz-transform:rotate(-90deg); -ms-transform:rotate(-90deg); transform:rotate(-90deg); color:#c9ab6c }

1. footer {

background:#191919; padding:1px 0 0; overflow:hidden }

1. footer .viewport {

max-width:1340px; margin:auto }

1. footer #block-menu-menu-menu-footer-very-bottom {

display:none }

1. footer #block-menu-menu-menu-footer-navigation {

text-align:center; padding-top:0; zoom:1; height:0; overflow:hidden; -webkit-transition:height .3s ease-in-out 0s; -moz-transition:height .3s ease-in-out 0s; -o-transition:height .3s ease-in-out 0s; -ms-transition:height .3s ease-in-out 0s; transition:height .3s ease-in-out 0s; -webkit-transition:padding .3s ease-in-out 0s; -moz-transition:padding .3s ease-in-out 0s; -o-transition:padding .3s ease-in-out 0s; -ms-transition:padding .3s ease-in-out 0s; transition:padding .3s ease-in-out 0s }

1. footer #block-menu-menu-menu-footer-navigation:after {

content:; display:table; clear:both; height:0; visibility:0 }

1. footer #block-menu-menu-menu-footer-navigation ul {

text-align:center }

1. footer #block-menu-menu-menu-footer-navigation ul li {

display:inline-block; margin:0; vertical-align:top; -webkit-transition:margin .3s ease-in-out 0s; -moz-transition:margin .3s ease-in-out 0s; -o-transition:margin .3s ease-in-out 0s; -ms-transition:margin .3s ease-in-out 0s; transition:margin .3s ease-in-out 0s }

1. footer #block-menu-menu-menu-footer-navigation ul li.last {

margin:0 }

1. footer #block-menu-menu-menu-footer-navigation ul li a {

display:block; text-align:left; color:white; text-transform:uppercase; font-family:'GothamBook'; font-size:1.125em; margin-bottom:35px; padding:8px 10px }

1. footer #block-menu-menu-menu-footer-navigation ul li a:hover {

color:#c9ab6c }

1. footer #block-menu-menu-menu-footer-navigation ul li ul li {

float:none; display:block; margin:0; font-size:.875em }

1. footer #block-menu-menu-menu-footer-navigation ul li ul li a {

font-size:1em; margin-bottom:0; color:#767676; position:relative }

1. footer #block-menu-menu-menu-footer-navigation ul li ul li a:hover {

color:white }

1. footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-pinterest,#footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-sketchlab,#footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-facebook,#footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-twitter,#footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-google,#footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-youtube,#footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-linkedin,#footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-twitch {

padding-right:52px }

1. footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-pinterest:before,#footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-sketchlab:before,#footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-facebook:before,#footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-twitter:before,#footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-google:before,#footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-youtube:before,#footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-linkedin:before,#footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-twitch:before {

display:block; position:absolute; top:0; right:10px; width:32px; height:32px; font-family:'icon'; text-align:center; line-height:32px; -webkit-transition:color .3s ease-in-out 0s; -moz-transition:color .3s ease-in-out 0s; -o-transition:color .3s ease-in-out 0s; -ms-transition:color .3s ease-in-out 0s; transition:color .3s ease-in-out 0s }

1. footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-twitter:before {

background:#28aae1; content:"\ea91"; color:#191919 }

1. footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-twitter:hover:before {

color:white }

1. footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-facebook:before {

background:#3460a1; content:"\ea8c"; color:#191919; text-indent:-2px }

1. footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-facebook:hover:before {

color:white }

1. footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-google:before {

background:#de5543; content:"\ea88"; color:#191919 }

1. footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-google:hover:before {

color:white }

1. footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-youtube:before {

background:#ee3138; content:"\ea99"; color:#191919 }

1. footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-youtube:hover:before {

color:white }

1. footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-linkedin:before {

background:#136d9d; content:"\eac9"; color:#191919 }

1. footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-linkedin:hover:before {

color:white }

1. footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-twitch:before {

background:#65469c; content:"\ea9b"; color:#191919 }

1. footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-twitch:hover:before {

color:white }

1. footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-pinterest:before {

background:#bd2126; content:"\e900"; color:#191919 }

1. footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-pinterest:hover:before {

color:white }

1. footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-sketchlab:before {

background:#1caad9; content:"\e901"; color:#191919 }

1. footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-sketchlab:hover:before {

color:white }

1. footer .logo {

width:183px; height:0; margin:40px auto 100px; background-size:100%; position:relative }

1. footer .logo:after {

content:"Copyright © 2017 All Right Reserved"; display:block; width:320px; position:absolute; top:110%; left:-120px; right:-120px; margin:auto; text-align:center; color:white }

1. footer .logo a {

position:absolute; top:0; left:0; right:0; bottom:0; overflow:hidden; text-indent:-9999px; display:none }

1. footer .logo a:hover:after,#footer .logo a:hover:before {

color:#c9ab6c }

1. footer .logo a:before {

content:"\e602"; font-family:'icon'; position:absolute; color:white; display:block; text-align:center; font-size:8em; left:0; right:0; bottom:-46px; -webkit-transition:all .3s ease-in-out 0s; -moz-transition:all .3s ease-in-out 0s; -o-transition:all .3s ease-in-out 0s; -ms-transition:all .3s ease-in-out 0s; transition:all .3s ease-in-out 0s; -webkit-backface-visibilty:hidden; color:#939598; text-indent:0 }

1. footer .logo a:after {

content:"\e603"; font-family:'icon'; position:absolute; color:white; display:block; text-align:center; font-size:5em; left:0; right:0; bottom:25px; -webkit-transition:all .3s ease-in-out 0s; -moz-transition:all .3s ease-in-out 0s; -o-transition:all .3s ease-in-out 0s; -ms-transition:all .3s ease-in-out 0s; transition:all .3s ease-in-out 0s; -webkit-backface-visibilty:hidden; color:#939598; text-indent:0 }

1. footer .block-sitemap {

display:none }

1. footer .block-sitemap ul.menu {

zoom:1 }

1. footer .block-sitemap ul.menu:after {

content:; display:table; clear:both; height:0; visibility:0 }

1. footer .block-sitemap ul.menu li {

width:20%; float:left; padding:20px; height:auto !important }

1. footer .block-sitemap ul.menu li a {

display:block; padding:5px; margin-bottom:40px; color:white; font-family:'GothamBook'; font-size:1.25em; text-transform:uppercase }

1. footer .block-sitemap ul.menu li ul.menu li {

width:100%; padding:0 }

1. footer .block-sitemap ul.menu li ul.menu li a {

margin-bottom:0; padding:2px 5px; color:#767676; font-size:1em } nav.contextual-navigation { height:64px; zoom:1; text-align:center; position:fixed; left:0; right:0; top:48px; -webkit-transition:all .3s ease-in-out 0s; -moz-transition:all .3s ease-in-out 0s; -o-transition:all .3s ease-in-out 0s; -ms-transition:all .3s ease-in-out 0s; transition:all .3s ease-in-out 0s } nav.contextual-navigation:after { content:; display:table; clear:both; height:0; visibility:0 } nav.contextual-navigation.sticky { top:0; z-index:2 } nav.contextual-navigation .viewport { display:inline-block; position:absolute; left:0; width:100%; height:64px } nav.contextual-navigation .viewport .menu-block-wrapper { width:100%; height:64px } nav.contextual-navigation .viewport h2 { color:#fff; padding:20px 10px; font-size:1.125em; font-family:'GothamBook'; font-weight:normal; float:left } nav.contextual-navigation .viewport ul { zoom:1; float:left; white-space:nowrap } nav.contextual-navigation .viewport ul:after { content:; display:table; clear:both; height:0; visibility:0 } nav.contextual-navigation .viewport ul li { display:inline-block } nav.contextual-navigation .viewport ul li a { display:block; padding:20px 10px; font-size:1.125em; color:white } nav.contextual-navigation .viewport ul li a.active { color:#c9ab6c } nav.contextual-navigation .viewport ul li a.try,nav.contextual-navigation .viewport ul li a.buy { padding:10px; margin:10px 0; width:76px; text-align:center; margin-left:10px } nav.contextual-navigation .viewport ul li a.buy { background:#c9ab6c; color:white } nav.contextual-navigation .viewport ul li a.try { background:white; color:black } @media(min-width:1025px) { body { overflow-x:hidden } body.menu-opened { overflow-x:hidden !important } .menu-opened #page-wrapper #page { right:0 }

1. header {

height:80px; background:white; position:fixed; -webkit-transition:all .3s ease-in-out 0s; -moz-transition:all .3s ease-in-out 0s; -o-transition:all .3s ease-in-out 0s; -ms-transition:all .3s ease-in-out 0s; transition:all .3s ease-in-out 0s } .menu-opened #header { -webkit-transform:translate(0px,0); -moz-transform:translate(0px,0); -ms-transform:translate(0px,0); transform:translate(0px,0) } .header-transparent #header { background:rgba(0,0,0,0.2) } .header-transparent #header .viewport .logo:after,.header-transparent #header .viewport .logo:before { color:white } .header-transparent #header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li a,.header-transparent #header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a:before,.header-transparent #header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a.login { color:white } .scrolled #header { background:white; height:60px } .scrolled #header .viewport .logo-scrolled a { filter:alpha(opacity=100); -ms-filter:alpha(opacity=@opacity-ie); -moz-opacity:1; -khtml-opacity:1; opacity:1 } .scrolled #header .viewport .logo:before,.scrolled #header .viewport .logo:after { color:#767676 } .scrolled #header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a { margin:14px 5px } .scrolled #header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a:before { color:#767676 } .scrolled #header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a.login { color:#767676 } .scrolled #header .viewport .navigation-wrapper .navigation .block-menu.try-buy-menu ul li a { font-size:.875em; width:auto; height:26px; margin:16px 5px; padding:6px 13px } .scrolled #header .viewport .navigation-wrapper .navigation .block-menu.main-menu { padding-top:0 } .scrolled #header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li a { font-size:.875em; color:#767676; padding:20px 12px; height:60px } .scrolled #header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li a:hover { color:white } .scrolled #header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li ul li a { padding:10px 12px 7px; height:auto; color:white }

1. header .viewport {

max-width:1240px; height:100%; padding:0 20px; margin:auto; position:relative }

1. header .viewport .burger {

display:none }

1. header .viewport .logo a {

width:194px; height:52px; margin-top:0; top:14px; left:20px }

1. header .viewport .navigation-wrapper {

position:static; width:auto; background:transparent; float:right; -webkit-transition:margin .3s ease-in-out 0s; -moz-transition:margin .3s ease-in-out 0s; -o-transition:margin .3s ease-in-out 0s; -ms-transition:margin .3s ease-in-out 0s; transition:margin .3s ease-in-out 0s; overflow-y:inherit }

1. header .viewport .navigation-wrapper:after {

display:none }

1. header .viewport .navigation-wrapper .navigation {

overflow-y:inherit; background:transparent; width:auto }

1. header .viewport .navigation-wrapper .navigation .block-menu {

float:left; width:auto; clear:none }

1. header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li,#header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li,#header .viewport .navigation-wrapper .navigation .block-menu.try-buy-menu ul li {

width:auto; float:left }

1. header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li a,#header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a,#header .viewport .navigation-wrapper .navigation .block-menu.try-buy-menu ul li a {

font-size:1em }

1. header .viewport .navigation-wrapper .navigation .block-menu.main-menu {

margin-right:15px; padding-top:0 }

1. header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li {

position:relative; -webkit-transition:all .3s ease-in-out 0s; -moz-transition:all .3s ease-in-out 0s; -o-transition:all .3s ease-in-out 0s; -ms-transition:all .3s ease-in-out 0s; transition:all .3s ease-in-out 0s; height:100% !important; overflow:visible }

1. header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li .toggler {

display:none }

1. header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li a {

color:#767676; padding:28px 12px; height:100%; line-height:150%; -webkit-transition:all .3s ease-in-out 0s; -moz-transition:all .3s ease-in-out 0s; -o-transition:all .3s ease-in-out 0s; -ms-transition:all .3s ease-in-out 0s; transition:all .3s ease-in-out 0s; font-family:'GothamBook' }

1. header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li a.active:hover {

color:white }

1. header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li a:hover {

background:#c9ab6c }

1. header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li:hover {

background:#c9ab6c }

1. header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li:hover a {

color:white; -webkit-transition:none; -moz-transition:none; -ms-transition:none; -o-transition:none; transition:none }

1. header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li:hover ul {

display:block; top:100%; filter:alpha(opacity=100); -ms-filter:alpha(opacity=@opacity-ie); -moz-opacity:1; -khtml-opacity:1; opacity:1 }

1. header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li ul {

position:absolute; top:0; left:0; background:#c9ab6c; filter:alpha(opacity=0); -ms-filter:alpha(opacity=@opacity-ie); -moz-opacity:0; -khtml-opacity:0; opacity:0; display:none; -webkit-transition:all .3s ease-in-out 0s; -moz-transition:all .3s ease-in-out 0s; -o-transition:all .3s ease-in-out 0s; -ms-transition:all .3s ease-in-out 0s; transition:all .3s ease-in-out 0s; z-index:2 }

1. header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li ul li {

float:none }

1. header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li ul li a {

padding:7px 24px; height:auto; color:white; white-space:nowrap; width:100% }

1. header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li ul li a:hover {

background:#191919 }

1. header .viewport .navigation-wrapper .navigation .block-menu.try-buy-menu ul li a {

width:auto; height:34px; margin:22px 5px; padding:9px 13px; background:#c9ab6c; color:white; text-align:center }

1. header .viewport .navigation-wrapper .navigation .block-menu.try-buy-menu ul li a:hover {

background:#fbfbfb; color:#191919 }

1. header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a {

width:32px; height:30px; margin:23px 5px; text-indent:-9999px; text-align:center; padding-left:0 }

1. header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a:before {

padding:0; text-align:center; padding-top:7px; color:#767676; width:100% }

1. header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a.login {

text-indent:0; width:auto; padding:11px 0 0 32px; font-size:11px; text-transform:uppercase; color:#767676 }

1. header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a.login:before {

width:32px; font-size:18px; text-transform:none }

1. header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li.cart span.item-count {

top:31px; left:27px; -webkit-transition:all .3s ease-in-out 0s; -moz-transition:all .3s ease-in-out 0s; -o-transition:all .3s ease-in-out 0s; -ms-transition:all .3s ease-in-out 0s; transition:all .3s ease-in-out 0s } .scrolled #header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li.cart span.item-count { top:11px }

1. footer #block-menu-menu-menu-footer-navigation {

height:auto; padding-top:40px } nav.contextual-navigation { height:64px; zoom:1; text-align:center; position:static } nav.contextual-navigation:after { content:; display:table; clear:both; height:0; visibility:0 } nav.contextual-navigation.sticky.sticky2 { position:fixed; top:60px; left:0; right:0; z-index:2; -webkit-transition:all .3s ease-in-out 0s; -moz-transition:all .3s ease-in-out 0s; -o-transition:all .3s ease-in-out 0s; -ms-transition:all .3s ease-in-out 0s; transition:all .3s ease-in-out 0s } nav.contextual-navigation .viewport { display:inline-block; position:static; left:auto; width:auto } }

}.view-gallery-homepage .item-list ul.pager { display:none } .view-gallery-homepage ul { list-style:none } .view-gallery-homepage .hide { display:none } .view-gallery-homepage .view-content { overflow:hidden } .view-gallery-homepage .view-content .item { float:left; margin:2px; border:1px solid #eee; box-sizing:content-box; overflow:hidden; position:relative }

1. page.banner {

padding-top:108px } .header-transparent #page.banner { padding-top:0 }

1. commercial_banner {

height:60px; background-color:#c9ab6c; width:100%; z-index:1; position:relative }

1. commercial_banner .contextual-links-region {

position:inherit }

1. commercial_banner a {

color:#fff; text-align:center }

1. commercial_banner p {

width:100%; height:100%; display:table; position:absolute; font-weight:bold }

1. commercial_banner p a {

display:table-cell; vertical-align:middle; font-size:3vw; padding:0 30px }

1. commercial_banner .close-button {

height:20px; width:20px; position:absolute; box-sizing:border-box; line-height:20px; right:5px; top:5px }

1. commercial_banner .close-button:before,#commercial_banner .close-button:after {

transform:rotate(-45deg); content:; position:absolute; top:50%; left:50%; margin-top:-2.5px; margin-left:-10px; display:block; height:5px; width:20px; background-color:#fff }

1. commercial_banner .close-button:after {

transform:rotate(45deg) } @media(min-width:1025px) { #page.banner { padding-top:140px }

1. commercial_banner p a {

font-size:1vw } }#bannerCookie { color:#fff; background-color:#000; opacity:.8; left:0; right:0; bottom:0; padding:1em 1.8em; width:100%; flex-direction:row; display:flex; position:fixed; align-items:center; font-size:16px; line-height:1.5em; flex-wrap:nowrap; z-index:9999 }

1. bannerCookie .message {

flex:1 }

1. bannerCookie .message .more {

opacity:.8; display:inline-block; padding:.2em; text-decoration:underline }

1. bannerCookie .message .more:hover,#bannerCookie .message .more:active {

text-decoration:none; color:#c9ab6c }

1. bannerCookie .buttons {

display:flex; align-items:center; align-content:space-between }

1. bannerCookie .buttons a {

min-width:140px; color:#fff; background-color:#c9ab6c; border-color:transparent; flex:1; display:block; padding:.4em .8em; font-size:.9em; font-weight:700; border-width:2px; border-style:solid; text-align:center; white-space:nowrap; cursor:pointer }

1. bannerCookie .buttons a:hover {

color:#000; background-color:#fff }