Difference between revisions of "Team:HFUT-China/MainPage/css/headerCss"
| Line 392: | Line 392: | ||
margin-top:0 !important | margin-top:0 !important | ||
} | } | ||
| − | + | header { | |
position:absolute; | position:absolute; | ||
height:48px; | height:48px; | ||
| Line 406: | Line 406: | ||
box-shadow:0 0 10px 0 rgba(0,0,0,0.2) | box-shadow:0 0 10px 0 rgba(0,0,0,0.2) | ||
} | } | ||
| − | + | header .block-context-ui { | |
display:none | display:none | ||
} | } | ||
| − | .header-transparent | + | .header-transparent header { |
background:rgba(0,0,0,0.2) | background:rgba(0,0,0,0.2) | ||
} | } | ||
| − | .scrolled | + | .scrolled header { |
background:white | background:white | ||
} | } | ||
| − | .scrolled | + | .scrolled header .viewport .logo:after { |
right:90px | right:90px | ||
} | } | ||
| − | + | header .viewport { | |
position:static | position:static | ||
} | } | ||
| − | + | header .viewport .logo { | |
position:absolute; | position:absolute; | ||
height:90px; | height:90px; | ||
| Line 431: | Line 431: | ||
overflow:hidden | overflow:hidden | ||
} | } | ||
| − | + | header .viewport .logo a { | |
display:block; | display:block; | ||
text-indent:-9999px; | text-indent:-9999px; | ||
| Line 446: | Line 446: | ||
z-index:3 | z-index:3 | ||
} | } | ||
| − | + | header .viewport .logo:active:after,header .viewport .logo:hover:after,header .viewport .logo:active:before,header .viewport .logo:hover:before { | |
color:#c9ab6c | color:#c9ab6c | ||
} | } | ||
| − | + | header .viewport .logo:after,header .viewport .logo:before { | |
font-family:'icon'; | font-family:'icon'; | ||
position:absolute; | position:absolute; | ||
| Line 462: | Line 462: | ||
z-index:0 | z-index:0 | ||
} | } | ||
| − | .header-transparent | + | .header-transparent header .viewport .logo:after,.header-transparent header .viewport .logo:before { |
color:white | color:white | ||
} | } | ||
| − | + | header .viewport .logo:after { | |
content:"\e603"; | content:"\e603"; | ||
font-size:3em; | font-size:3em; | ||
| Line 471: | Line 471: | ||
top:0 | top:0 | ||
} | } | ||
| − | + | header .viewport .logo:before { | |
content:"\e602"; | content:"\e602"; | ||
font-size:7em; | font-size:7em; | ||
| Line 477: | Line 477: | ||
top:-32px | top:-32px | ||
} | } | ||
| − | + | header .viewport .burger { | |
height:48px; | height:48px; | ||
width:48px; | width:48px; | ||
| Line 486: | Line 486: | ||
cursor:pointer | cursor:pointer | ||
} | } | ||
| − | + | header .viewport .burger span { | |
display:block; | display:block; | ||
height:2px; | height:2px; | ||
| Line 498: | Line 498: | ||
background:white | background:white | ||
} | } | ||
| − | + | header .viewport .burger span.top { | |
top:16px | top:16px | ||
} | } | ||
| − | + | header .viewport .burger span.bottom { | |
bottom:16px | bottom:16px | ||
} | } | ||
| − | + | header .viewport .navigation-wrapper { | |
position:fixed; | position:fixed; | ||
left:100%; | left:100%; | ||
| Line 518: | Line 518: | ||
zoom:1 | zoom:1 | ||
} | } | ||
| − | + | header .viewport .navigation-wrapper:after { | |
content:''; | content:''; | ||
display:table; | display:table; | ||
| Line 525: | Line 525: | ||
visibility:0 | visibility:0 | ||
} | } | ||
| − | + | header .viewport .navigation-wrapper .navigation { | |
width:272px; | width:272px; | ||
min-height:100%; | min-height:100%; | ||
| Line 533: | Line 533: | ||
overflow-y:scroll | overflow-y:scroll | ||
} | } | ||
| − | + | header .viewport .navigation-wrapper .navigation .main-menu { | |
padding-top:7px | padding-top:7px | ||
} | } | ||
| − | + | header .viewport .navigation-wrapper .navigation .block-menu { | |
width:100%; | width:100%; | ||
clear:both | clear:both | ||
} | } | ||
| − | + | 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; | float:left; | ||
width:100% | width:100% | ||
} | } | ||
| − | + | 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; | display:block; | ||
padding:16px 10px; | padding:16px 10px; | ||
| Line 557: | Line 557: | ||
-webkit-backface-visibilty:hidden | -webkit-backface-visibilty:hidden | ||
} | } | ||
| − | + | header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a { | |
padding-left:47px | padding-left:47px | ||
} | } | ||
| − | + | header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a:active { | |
color:#767676 | color:#767676 | ||
} | } | ||
| − | + | header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a:hover { | |
color:#767676 | color:#767676 | ||
} | } | ||
| − | + | 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 | color:white | ||
} | } | ||
| − | + | header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a:before { | |
text-indent:0; | text-indent:0; | ||
font-family:'icon'; | font-family:'icon'; | ||
| Line 589: | Line 589: | ||
-webkit-backface-visibilty:hidden | -webkit-backface-visibilty:hidden | ||
} | } | ||
| − | + | header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a.cart:before { | |
content:"\e604" | content:"\e604" | ||
} | } | ||
| − | + | header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a.user:before { | |
content:"\e605" | content:"\e605" | ||
} | } | ||
| − | + | header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a.login:before { | |
content:"\e605" | content:"\e605" | ||
} | } | ||
| − | + | header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a.logout:before { | |
content:"\ea14" | content:"\ea14" | ||
} | } | ||
| − | + | header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li.cart { | |
position:relative | position:relative | ||
} | } | ||
| − | + | header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li.cart span.item-count { | |
display:block; | display:block; | ||
height:16px; | height:16px; | ||
| Line 621: | Line 621: | ||
left:30px | left:30px | ||
} | } | ||
| − | + | 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% | width:100% | ||
} | } | ||
| − | + | 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; | display:block; | ||
padding:10px 16px; | padding:10px 16px; | ||
| Line 637: | Line 637: | ||
transition:all .3s ease-in-out 0s | transition:all .3s ease-in-out 0s | ||
} | } | ||
| − | + | 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 | color:white | ||
} | } | ||
| − | + | header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li { | |
overflow:hidden; | overflow:hidden; | ||
position:relative | position:relative | ||
} | } | ||
| − | + | header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li .toggler { | |
width:36px; | width:36px; | ||
height:36px; | height:36px; | ||
| Line 651: | Line 651: | ||
top:0 | top:0 | ||
} | } | ||
| − | + | header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li .toggler:before { | |
content:"\e601"; | content:"\e601"; | ||
font-family:'icon'; | font-family:'icon'; | ||
| Line 673: | Line 673: | ||
color:#767676 | color:#767676 | ||
} | } | ||
| − | + | header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li:focus .toggler:before { | |
color:white | color:white | ||
} | } | ||
| − | + | header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li.opened a { | |
color:#c9ab6c | color:#c9ab6c | ||
} | } | ||
| − | + | header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li.opened .toggler:before { | |
-webkit-transform:rotate(-90deg); | -webkit-transform:rotate(-90deg); | ||
-moz-transform:rotate(-90deg); | -moz-transform:rotate(-90deg); | ||
| Line 1,053: | Line 1,053: | ||
right:0 | right:0 | ||
} | } | ||
| − | + | header { | |
height:80px; | height:80px; | ||
background:white; | background:white; | ||
| Line 1,063: | Line 1,063: | ||
transition:all .3s ease-in-out 0s | transition:all .3s ease-in-out 0s | ||
} | } | ||
| − | .menu-opened | + | .menu-opened header { |
-webkit-transform:translate(0px,0); | -webkit-transform:translate(0px,0); | ||
-moz-transform:translate(0px,0); | -moz-transform:translate(0px,0); | ||
| Line 1,069: | Line 1,069: | ||
transform:translate(0px,0) | transform:translate(0px,0) | ||
} | } | ||
| − | .header-transparent | + | .header-transparent header { |
background:rgba(0,0,0,0.2) | background:rgba(0,0,0,0.2) | ||
} | } | ||
| − | .header-transparent | + | .header-transparent header .viewport .logo:after,.header-transparent header .viewport .logo:before { |
color:white | color:white | ||
} | } | ||
| − | .header-transparent | + | .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 | color:white | ||
} | } | ||
| − | .scrolled | + | .scrolled header { |
background:white; | background:white; | ||
height:60px | height:60px | ||
} | } | ||
| − | .scrolled | + | .scrolled header .viewport .logo-scrolled a { |
filter:alpha(opacity=100); | filter:alpha(opacity=100); | ||
-ms-filter:alpha(opacity=@opacity-ie); | -ms-filter:alpha(opacity=@opacity-ie); | ||
| Line 1,089: | Line 1,089: | ||
opacity:1 | opacity:1 | ||
} | } | ||
| − | .scrolled | + | .scrolled header .viewport .logo:before,.scrolled header .viewport .logo:after { |
color:#767676 | color:#767676 | ||
} | } | ||
| − | .scrolled | + | .scrolled header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a { |
margin:14px 5px | margin:14px 5px | ||
} | } | ||
| − | .scrolled | + | .scrolled header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a:before { |
color:#767676 | color:#767676 | ||
} | } | ||
| − | .scrolled | + | .scrolled header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a.login { |
color:#767676 | color:#767676 | ||
} | } | ||
| − | .scrolled | + | .scrolled header .viewport .navigation-wrapper .navigation .block-menu.try-buy-menu ul li a { |
font-size:.875em; | font-size:.875em; | ||
width:auto; | width:auto; | ||
| Line 1,108: | Line 1,108: | ||
padding:6px 13px | padding:6px 13px | ||
} | } | ||
| − | .scrolled | + | .scrolled header .viewport .navigation-wrapper .navigation .block-menu.main-menu { |
padding-top:0 | padding-top:0 | ||
} | } | ||
| − | .scrolled | + | .scrolled header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li a { |
font-size:.875em; | font-size:.875em; | ||
color:#767676; | color:#767676; | ||
| Line 1,117: | Line 1,117: | ||
height:60px | height:60px | ||
} | } | ||
| − | .scrolled | + | .scrolled header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li a:hover { |
color:white | color:white | ||
} | } | ||
| − | .scrolled | + | .scrolled header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li ul li a { |
padding:10px 12px 7px; | padding:10px 12px 7px; | ||
height:auto; | height:auto; | ||
color:white | color:white | ||
} | } | ||
| − | + | header .viewport { | |
max-width:1240px; | max-width:1240px; | ||
height:100%; | height:100%; | ||
| Line 1,132: | Line 1,132: | ||
position:relative | position:relative | ||
} | } | ||
| − | + | header .viewport .burger { | |
display:none | display:none | ||
} | } | ||
| − | + | header .viewport .logo a { | |
width:194px; | width:194px; | ||
height:52px; | height:52px; | ||
| Line 1,142: | Line 1,142: | ||
left:20px | left:20px | ||
} | } | ||
| − | + | header .viewport .navigation-wrapper { | |
position:static; | position:static; | ||
width:auto; | width:auto; | ||
| Line 1,154: | Line 1,154: | ||
overflow-y:inherit | overflow-y:inherit | ||
} | } | ||
| − | + | header .viewport .navigation-wrapper:after { | |
display:none | display:none | ||
} | } | ||
| − | + | header .viewport .navigation-wrapper .navigation { | |
overflow-y:inherit; | overflow-y:inherit; | ||
background:transparent; | background:transparent; | ||
width:auto | width:auto | ||
} | } | ||
| − | + | header .viewport .navigation-wrapper .navigation .block-menu { | |
float:left; | float:left; | ||
width:auto; | width:auto; | ||
clear:none | clear:none | ||
} | } | ||
| − | + | 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; | width:auto; | ||
float:left | float:left | ||
} | } | ||
| − | + | 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 | font-size:1em | ||
} | } | ||
| − | + | header .viewport .navigation-wrapper .navigation .block-menu.main-menu { | |
margin-right:15px; | margin-right:15px; | ||
padding-top:0 | padding-top:0 | ||
} | } | ||
| − | + | header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li { | |
position:relative; | position:relative; | ||
-webkit-transition:all .3s ease-in-out 0s; | -webkit-transition:all .3s ease-in-out 0s; | ||
| Line 1,188: | Line 1,188: | ||
overflow:visible | overflow:visible | ||
} | } | ||
| − | + | header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li .toggler { | |
display:none | display:none | ||
} | } | ||
| − | + | header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li a { | |
color:#767676; | color:#767676; | ||
padding:28px 12px; | padding:28px 12px; | ||
| Line 1,203: | Line 1,203: | ||
font-family:'GothamBook' | font-family:'GothamBook' | ||
} | } | ||
| − | + | header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li a.active:hover { | |
color:white | color:white | ||
} | } | ||
| − | + | header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li a:hover { | |
background:#c9ab6c | background:#c9ab6c | ||
} | } | ||
| − | + | header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li:hover { | |
background:#c9ab6c | background:#c9ab6c | ||
} | } | ||
| − | + | header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li:hover a { | |
color:white; | color:white; | ||
-webkit-transition:none; | -webkit-transition:none; | ||
| Line 1,220: | Line 1,220: | ||
transition:none | transition:none | ||
} | } | ||
| − | + | header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li:hover ul { | |
display:block; | display:block; | ||
top:100%; | top:100%; | ||
| Line 1,229: | Line 1,229: | ||
opacity:1 | opacity:1 | ||
} | } | ||
| − | + | header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li ul { | |
position:absolute; | position:absolute; | ||
top:0; | top:0; | ||
| Line 1,247: | Line 1,247: | ||
z-index:2 | z-index:2 | ||
} | } | ||
| − | + | header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li ul li { | |
float:none | float:none | ||
} | } | ||
| − | + | header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li ul li a { | |
padding:7px 24px; | padding:7px 24px; | ||
height:auto; | height:auto; | ||
| Line 1,257: | Line 1,257: | ||
width:100% | width:100% | ||
} | } | ||
| − | + | header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li ul li a:hover { | |
background:#191919 | background:#191919 | ||
} | } | ||
| − | + | header .viewport .navigation-wrapper .navigation .block-menu.try-buy-menu ul li a { | |
width:auto; | width:auto; | ||
height:34px; | height:34px; | ||
| Line 1,269: | Line 1,269: | ||
text-align:center | text-align:center | ||
} | } | ||
| − | + | header .viewport .navigation-wrapper .navigation .block-menu.try-buy-menu ul li a:hover { | |
background:#fbfbfb; | background:#fbfbfb; | ||
color:#191919 | color:#191919 | ||
} | } | ||
| − | + | header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a { | |
width:32px; | width:32px; | ||
height:30px; | height:30px; | ||
| Line 1,281: | Line 1,281: | ||
padding-left:0 | padding-left:0 | ||
} | } | ||
| − | + | header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a:before { | |
padding:0; | padding:0; | ||
text-align:center; | text-align:center; | ||
| Line 1,288: | Line 1,288: | ||
width:100% | width:100% | ||
} | } | ||
| − | + | header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a.login { | |
text-indent:0; | text-indent:0; | ||
width:auto; | width:auto; | ||
| Line 1,296: | Line 1,296: | ||
color:#767676 | color:#767676 | ||
} | } | ||
| − | + | header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a.login:before { | |
width:32px; | width:32px; | ||
font-size:18px; | font-size:18px; | ||
text-transform:none | text-transform:none | ||
} | } | ||
| − | + | header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li.cart span.item-count { | |
top:31px; | top:31px; | ||
left:27px; | left:27px; | ||
| Line 1,310: | Line 1,310: | ||
transition:all .3s ease-in-out 0s | transition:all .3s ease-in-out 0s | ||
} | } | ||
| − | .scrolled | + | .scrolled header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li.cart span.item-count { |
top:11px | top:11px | ||
} | } | ||
Revision as of 19:53, 12 October 2017
/* #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 }
- page-wrapper {
height:100% }
- 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) }
- 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 } 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) } 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 } header .viewport { position:static } header .viewport .logo { position:absolute; height:90px; width:100px; left:50px; top:20%; margin-top:-24px; z-index:3; overflow:hidden } 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 } header .viewport .logo:active:after,header .viewport .logo:hover:after,header .viewport .logo:active:before,header .viewport .logo:hover:before { color:#c9ab6c } 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 } header .viewport .logo:after { content:"\e603"; font-size:3em; left:0; top:0 } header .viewport .logo:before { content:"\e602"; font-size:7em; left:50px; top:-32px } header .viewport .burger { height:48px; width:48px; position:absolute; right:0; top:0; background:#c9ab6c; cursor:pointer } header .viewport .burger span { display:block; height:2px; width:24px; position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; background:white } header .viewport .burger span.top { top:16px } header .viewport .burger span.bottom { bottom:16px } 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 } header .viewport .navigation-wrapper:after { content:; display:table; clear:both; height:0; visibility:0 } header .viewport .navigation-wrapper .navigation { width:272px; min-height:100%; position:relative; float:right; background:#191919; overflow-y:scroll } header .viewport .navigation-wrapper .navigation .main-menu { padding-top:7px } header .viewport .navigation-wrapper .navigation .block-menu { width:100%; clear:both } 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% } 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 } header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a { padding-left:47px } header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a:active { color:#767676 } header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a:hover { color:#767676 } 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 } 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 } header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a.cart:before { content:"\e604" } header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a.user:before { content:"\e605" } header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a.login:before { content:"\e605" } header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a.logout:before { content:"\ea14" } header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li.cart { position:relative } 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 } 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% } 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 } 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 } header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li { overflow:hidden; position:relative } header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li .toggler { width:36px; height:36px; position:absolute; right:0; top:0 } 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 } header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li:focus .toggler:before { color:white } header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li.opened a { color:#c9ab6c } 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 }
- footer {
background:#191919; padding:1px 0 0; overflow:hidden }
- footer .viewport {
max-width:1340px; margin:auto }
- footer #block-menu-menu-menu-footer-very-bottom {
display:none }
- 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 }
- footer #block-menu-menu-menu-footer-navigation:after {
content:; display:table; clear:both; height:0; visibility:0 }
- footer #block-menu-menu-menu-footer-navigation ul {
text-align:center }
- 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 }
- footer #block-menu-menu-menu-footer-navigation ul li.last {
margin:0 }
- 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 }
- footer #block-menu-menu-menu-footer-navigation ul li a:hover {
color:#c9ab6c }
- footer #block-menu-menu-menu-footer-navigation ul li ul li {
float:none; display:block; margin:0; font-size:.875em }
- footer #block-menu-menu-menu-footer-navigation ul li ul li a {
font-size:1em; margin-bottom:0; color:#767676; position:relative }
- footer #block-menu-menu-menu-footer-navigation ul li ul li a:hover {
color:white }
- 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 }
- 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 }
- footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-twitter:before {
background:#28aae1; content:"\ea91"; color:#191919 }
- footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-twitter:hover:before {
color:white }
- footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-facebook:before {
background:#3460a1; content:"\ea8c"; color:#191919; text-indent:-2px }
- footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-facebook:hover:before {
color:white }
- footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-google:before {
background:#de5543; content:"\ea88"; color:#191919 }
- footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-google:hover:before {
color:white }
- footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-youtube:before {
background:#ee3138; content:"\ea99"; color:#191919 }
- footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-youtube:hover:before {
color:white }
- footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-linkedin:before {
background:#136d9d; content:"\eac9"; color:#191919 }
- footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-linkedin:hover:before {
color:white }
- footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-twitch:before {
background:#65469c; content:"\ea9b"; color:#191919 }
- footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-twitch:hover:before {
color:white }
- footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-pinterest:before {
background:#bd2126; content:"\e900"; color:#191919 }
- footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-pinterest:hover:before {
color:white }
- footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-sketchlab:before {
background:#1caad9; content:"\e901"; color:#191919 }
- footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-sketchlab:hover:before {
color:white }
- footer .logo {
width:183px; height:0; margin:40px auto 100px; background-size:100%; position:relative }
- 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 }
- footer .logo a {
position:absolute; top:0; left:0; right:0; bottom:0; overflow:hidden; text-indent:-9999px; display:none }
- footer .logo a:hover:after,#footer .logo a:hover:before {
color:#c9ab6c }
- 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 }
- 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 }
- footer .block-sitemap {
display:none }
- footer .block-sitemap ul.menu {
zoom:1 }
- footer .block-sitemap ul.menu:after {
content:; display:table; clear:both; height:0; visibility:0 }
- footer .block-sitemap ul.menu li {
width:20%; float:left; padding:20px; height:auto !important }
- 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 }
- footer .block-sitemap ul.menu li ul.menu li {
width:100%; padding:0 }
- 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 } 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 } header .viewport { max-width:1240px; height:100%; padding:0 20px; margin:auto; position:relative } header .viewport .burger { display:none } header .viewport .logo a { width:194px; height:52px; margin-top:0; top:14px; left:20px } 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 } header .viewport .navigation-wrapper:after { display:none } header .viewport .navigation-wrapper .navigation { overflow-y:inherit; background:transparent; width:auto } header .viewport .navigation-wrapper .navigation .block-menu { float:left; width:auto; clear:none } 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 } 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 } header .viewport .navigation-wrapper .navigation .block-menu.main-menu { margin-right:15px; padding-top:0 } 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 } header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li .toggler { display:none } 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' } header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li a.active:hover { color:white } header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li a:hover { background:#c9ab6c } header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li:hover { background:#c9ab6c } 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 } 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 } 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 } header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li ul li { float:none } 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% } header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li ul li a:hover { background:#191919 } 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 } header .viewport .navigation-wrapper .navigation .block-menu.try-buy-menu ul li a:hover { background:#fbfbfb; color:#191919 } 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 } 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% } 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 } header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a.login:before { width:32px; font-size:18px; text-transform:none } 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 }
- 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 }
- page.banner {
padding-top:108px } .header-transparent #page.banner { padding-top:0 }
- commercial_banner {
height:60px; background-color:#c9ab6c; width:100%; z-index:1; position:relative }
- commercial_banner .contextual-links-region {
position:inherit }
- commercial_banner a {
color:#fff; text-align:center }
- commercial_banner p {
width:100%; height:100%; display:table; position:absolute; font-weight:bold }
- commercial_banner p a {
display:table-cell; vertical-align:middle; font-size:3vw; padding:0 30px }
- commercial_banner .close-button {
height:20px; width:20px; position:absolute; box-sizing:border-box; line-height:20px; right:5px; top:5px }
- 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 }
- commercial_banner .close-button:after {
transform:rotate(45deg) } @media(min-width:1025px) { #page.banner { padding-top:140px }
- 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 }
- bannerCookie .message {
flex:1 }
- bannerCookie .message .more {
opacity:.8; display:inline-block; padding:.2em; text-decoration:underline }
- bannerCookie .message .more:hover,#bannerCookie .message .more:active {
text-decoration:none; color:#c9ab6c }
- bannerCookie .button {
display:flex; align-items:center; align-content:space-between }
- bannerCookie .button 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 }
- bannerCookie .button a:hover {
color:#000; background-color:#fff }
