|
|
| Line 1: |
Line 1: |
| − | <style type="text/css">
| |
| − | .unselect { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none;}
| |
| − | .ir { font: 0/0 a; text-shadow: none; color: transparent;}
| |
| − | .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
| |
| − | .clearfix { display: inline-block;}
| |
| − | html[xmlns] .clearfix { display: block;}
| |
| − | * html .clearfix { height: 1%;}
| |
| − | .middleHack { zoom: 1;}
| |
| − | .ib { display: -moz-inline-stack !important; display: inline-block !important; vertical-align: top;}
| |
| − | .ibIe { display: inline !important; zoom: 1;}
| |
| − | .lt-ie8 .ib { display: inline !important; zoom: 1;}
| |
| − | .bgCover { -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
| |
| − | .clear { clear: both; display: block;}
| |
| − | .translate3d { -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); transform: translate3d(0,0,0);}
| |
| − | .translate { -webkit-transform: translate(0,0); -moz-transform: translate3d(0,0); -ms-transform: translate3d(0,0); -o-transform: translate3d(0,0); transform: translate3d(0,0);}
| |
| − | .noflick { -webkit-backface-visibility: hidden;}
| |
| − | a img { border: none;}
| |
| − | .overflow { overflow: hidden;}
| |
| − | .bgwidth { width: 100%;}
| |
| − | .bgheight { height: 100%;}
| |
| − | aside { width: 260px; background: url("") no-repeat top left #141311; position: absolute; top: 0; left: 0; bottom: 0; z-index: 1; -webkit-transition: all 200ms ease-out; -moz-transition: all 200ms ease-out; -ms-transition: all 200ms ease-out; -o-transition: all 200ms ease-out; transition: all 200ms ease-out; -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); transform: translate3d(0,0,0);}
| |
| − | aside #mobileMenuButton { position: absolute; top: 12px; left: 212px; z-index: 10000; display: none; padding: 6px; background: url("../num/4.png") repeat top left transparent;}
| |
| − | aside #mobileMenuButton span { width: 25px; height: 4px; display: block; background: #FFFFFF; -moz-box-shadow: 0px 0px 6px rgba(0,0,0,0.6); -webkit-box-shadow: 0px 0px 6px rgba(0,0,0,0.6); box-shadow: 0px 0px 6px rgba(0,0,0,0.6); margin-top: 3px; -webkit-transition: all 200ms ease-out; -moz-transition: all 200ms ease-out; -ms-transition: all 200ms ease-out; -o-transition: all 200ms ease-out; transition: all 200ms ease-out;}
| |
| − | aside #mobileMenuButton span:first-child { margin-top: 0;}
| |
| − | aside #logo { text-indent: -6000px; margin: 80px 32px 50px 32px; display: block;}
| |
| − | aside #logo img { display: block; width: 100%; }
| |
| − | aside .separator { background: url("../num/separator.jpg") no-repeat top left transparent; display: block; zoom: 1; background-position: -23px -296px; width: 143px; height: 3px; text-indent: -6000px; text-align: left; margin: 25px auto;}
| |
| − | aside nav { padding: 0 40px;}
| |
| − | aside nav a { color: #ddd7d7; font-family: 'Open Sans', Arial, Helvetica, Sans-serif, Verdana, Tahoma;line-height: 40px; text-align: center; text-decoration: none; font-size: 23px; display: block; letter-spacing: 2px;}
| |
| − | aside nav a .text { font-size: 16px;font-family: "Open Sans"; display: inline-block; position: relative; line-height: normal;}
| |
| − | aside nav a .text span { background: url("../num/15.png") no-repeat top left transparent; display: block; zoom: 1; background-position: -23px -296px; width: auto; height: 3px; text-indent: -6000px; text-align: left; position: absolute; bottom: -2px; left: 50%; right: 50%; opacity: 0; filter: alpha(opacity=0); -webkit-transition: all 200ms ease-out; -moz-transition: all 200ms ease-out; -ms-transition: all 200ms ease-out; -o-transition: all 200ms ease-out; transition: all 200ms ease-out;}
| |
| − | aside nav a.selected .text span { left: 0%; right: 2%; opacity: 1; filter: alpha(opacity=100);}
| |
| − | aside .contact { font-family: 'freight-big-pro'; font-size: 24px; font-weight: 400; font-style: italic; text-align: center; display: block; margin: 0 40px; text-decoration: none; color: #ffffff;}
| |
| − | aside .bottom { position: absolute; bottom: 7px; left: 0; right: 0;}
| |
| − | aside .bottom .social { text-align: center;}
| |
| − | aside .bottom .social a { display: inline-block; border: 2px solid #ffffff; margin: 0 1px; margin-bottom: 3px; position: relative; width: 24px; height: 25px; -webkit-transition: all 200ms ease-out; -moz-transition: all 200ms ease-out; -ms-transition: all 200ms ease-out; -o-transition: all 200ms ease-out; transition: all 200ms ease-out;}
| |
| − | .no-touch aside nav a:hover { color: #FFFFFF;}
| |
| − | .no-touch aside nav a.selected:hover { color: #ddd7d7;}
| |
| − | body.opened aside { left: 0px;}
| |
| − | body.opened aside #mobileMenuButton span { opacity: 0; filter: alpha(opacity=0);}
| |
| − | body.opened aside #mobileMenuButton span:first-child { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translate(0px,7px) rotate(45deg); -moz-transform: translate(0px,7px) rotate(45deg); -ms-transform: translate(0px,7px) rotate(45deg); -o-transform: translate(0px,7px) rotate(45deg); transform: translate(0px,7px) rotate(45deg);}
| |
| − | body.opened aside #mobileMenuButton span:last-child { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translate(0px,-7px) rotate(-45deg); -moz-transform: translate(0px,-7px) rotate(-45deg); -ms-transform: translate(0px,-7px) rotate(-45deg); -o-transform: translate(0px,-7px) rotate(-45deg); transform: translate(0px,-7px) rotate(-45deg);}
| |
| − | body.opened #content { left: 100px; opacity: 0.2 !important; pointer-events: none;}
| |
| | | | |
| − | body {
| |
| − | background: #2d2c41;
| |
| − | font-family: 'Open Sans', Arial, Helvetica, Sans-serif, Verdana, Tahoma;
| |
| − | }
| |
| − |
| |
| − | ul {
| |
| − | list-style-type: none;
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − | /* ----------------------------
| |
| − | menu
| |
| − | -----------------------------*/
| |
| − |
| |
| − | .accordion {
| |
| − | width: 100%;
| |
| − | max-width: 360px;
| |
| − | background: #303030;
| |
| − | -webkit-border-radius: 4px;
| |
| − | -moz-border-radius: 4px;
| |
| − | border-radius: 4px;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | .accordion .link {
| |
| − | cursor: pointer;
| |
| − | display: block;
| |
| − | padding: 10px 10px 10px 40px;
| |
| − | color: #FFF;
| |
| − | font-size: 17px;
| |
| − | font-weight: 700;
| |
| − | border-bottom: 1px solid #CCC;
| |
| − | position: relative;
| |
| − | font-family: 'Open Sans', Arial, Helvetica, Sans-serif, Verdana, Tahoma;
| |
| − |
| |
| − |
| |
| − | }
| |
| − |
| |
| − | .accordion li:last-child .link {
| |
| − | border-bottom: 0;
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − | .accordion li.open .link {
| |
| − | color: #FFE153;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | .submenu {
| |
| − | display: none;
| |
| − | background: #444359;
| |
| − | font-size: 5px;
| |
| − | }
| |
| − |
| |
| − | .submenu li {
| |
| − | border-bottom: 1px solid #4b4a5e;
| |
| − | }
| |
| − |
| |
| − | .submenu a {
| |
| − | display: block;
| |
| − | text-decoration: none;
| |
| − | color: #d9d9d9;
| |
| − | }
| |
| − |
| |
| − | .submenu a:hover {
| |
| − | background: #b63b4d;
| |
| − | color: #FFF;
| |
| − | }
| |
| − | #menuHome {
| |
| − | color: #FFF;
| |
| − | font-size: 17px;
| |
| − | margin-right: 60px;
| |
| − | }
| |
| − | #menuHome:hover{
| |
| − | color: #FFE153;
| |
| − | }
| |
| − | /*menu css over*/
| |
| − |
| |
| − | #content #homeIndex { position: absolute; top: 0; left: 0; right: 0; bottom: 0;}
| |
| − | #content #homeIndex .contentInner { position: absolute; top: 0; left: 0; right: 0; bottom: 0;}
| |
| − | #content #homeIndex a { overflow: hidden;}
| |
| − | #content #homeIndex a img.fullBg { display: block; position: absolute; top: 0; left: 0; display: none;}
| |
| − | #content #homeIndex a .overlay { display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #262626; opacity: 0.5; filter: alpha(opacity=50); -webkit-transition: all 200ms ease-out; -moz-transition: all 200ms ease-out; -ms-transition: all 200ms ease-out; -o-transition: all 200ms ease-out; transition: all 200ms ease-out; z-index: 1;}
| |
| − | #content #homeIndex a .title { position: absolute; top: 50%; left: 50%; z-index: 10; -webkit-backface-visibility: hidden;}
| |
| − | #content #homeIndex a video { position: absolute; left: 0; right: 0; opacity: 0; filter: alpha(opacity=0);}
| |
| − | #content #homeIndex a .gallery { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; filter: alpha(opacity=0);}
| |
| − | #content #homeIndex a .gallery img { display: block; position: absolute; top: 0; left: 0; z-index: 2;}
| |
| − | #content #homeIndex a .gallery img.active { z-index: 4;}
| |
| − | #content #homeIndex a .gallery img.lastActive { z-index: 3;}
| |
| − | #content #homeIndex .beer { position: absolute; top: 0; left: 0; bottom: 0; width: 44%; background: url("../pic/bg_beer.jpg") repeat center center #f2f2f2;}
| |
| − | #content #homeIndex .beer .overlay { opacity: 0.2; filter: alpha(opacity=20);}
| |
| − | #content #homeIndex .beer span { display: block;}
| |
| − | #content #homeIndex .beer .middle { width: 100%; display: inline-block; vertical-align: middle; line-height: normal;}
| |
| − | #content #homeIndex .beer .title { background: url("../pic/sprite.png") no-repeat top left transparent; display: block; zoom: 1; background-position: 0px 0px; width: 221px; height: 225px; text-indent: -6000px; text-align: left; position: relative; top: auto; left: auto; margin: 0 auto; margin-bottom: 50px;}
| |
| − | #content #homeIndex .beer .swipe { overflow: hidden; visibility: hidden; position: relative;}
| |
| − | #content #homeIndex .beer .swipe .swipe-wrap { overflow: hidden; position: relative;}
| |
| − | #content #homeIndex .beer .swipe .swipe-wrap div { float: left; width: 100%; position: relative;}
| |
| − | #content #homeIndex .beer .swipe .swipe-wrap div img { width: 20%; height: 20%; display: block; margin: 0 auto; max-height: 80%;}
| |
| − | #content #homeIndex .beer:hover .overlay { opacity: 0; filter: alpha(opacity=0);}
| |
| − | #content #homeIndex .experience { position: absolute; top: 0; left: 44%; right: 0; height: 50%; background: url("../pic/bg_experience.jpg") no-repeat center center #f2f2f2; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
| |
| − | #content #homeIndex .experience .title { background: url("../pic/sprite.png") no-repeat top left transparent; display: block; zoom: 1; background-position: -260px -4px; width: 289px; height: 140px; text-indent: -6000px; text-align: left; margin-left: -145px; margin-top: -70px;}
| |
| − | #content #homeIndex .ambassador { position: absolute; top: 50%; left: 44%; right: 28%; bottom: 0; background: url("../pic/bg_ambassador.jpg") no-repeat center center #f2f2f2; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
| |
| − | #content #homeIndex .ambassador .title { background: url("../pic/sprite.png") no-repeat top left transparent; display: block; zoom: 1; background-position: -578px -4px; width: 274px; height: 157px; text-indent: -6000px; text-align: left; margin-top: -78px; margin-left: -137px;}
| |
| − | #content #homeIndex .social { position: absolute; top: 50%; left: 72%; right: 0; bottom: 0; background: url("../pic/bg_social.jpg") no-repeat center center #f2f2f2; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
| |
| − | #content #homeIndex .social .title { background: url("../pic/sprite.png") no-repeat top left transparent; display: block; zoom: 1; background-position: -892px 0px; width: 250px; height: 144px; text-indent: -6000px; text-align: left; margin-top: -72px; margin-left: -125px;}
| |
| − | .no-touch #content #homeIndex a:hover .overlay { opacity: 0; filter: alpha(opacity=0);}
| |
| − | .touch #content #homeIndex a.beer .overlay { opacity: 0; filter: alpha(opacity=0); display: none;}
| |
| − |
| |
| − | * { margin: 0; padding: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
| |
| − | .no-touch * { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
| |
| − | div,h1,h2,h3,h4,span,p,img,a { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
| |
| − | a { color: #FFFFFF; text-decoration: underline;}
| |
| − | .fa { text-shadow: rgba(0,0,0,0.01) 0 0 1px; -webkit-text-stroke: 0.10px;}
| |
| − | img { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-drag: none; user-drag: none;}
| |
| − | html,body { min-height: 100%; width: 100%; height: 100%; background: #000000 ; color: #ffffff; overflow: hidden; font-family: 'din-condensed-web'; font-size: 14px; font-weight: 400;}
| |
| − | #content { position: absolute; left: 260px; top: 0; right: 0; height: 100%; overflow: hidden; -webkit-transition: all 200ms ease-out; -moz-transition: all 200ms ease-out; -ms-transition: all 200ms ease-out; -o-transition: all 200ms ease-out; transition: all 200ms ease-out; -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); transform: translate3d(0,0,0);}
| |
| − | .fullBg { position: absolute; top: 0; left: 0; display: none;}
| |
| − | .fullBg.display { display: block;}
| |
| − | .layoutHide { position: absolute; top: 0; left: 0; bottom: 0; width: 0%; background: #000000; z-index: 40; -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); transform: translate3d(0,0,0); -webkit-backface-visibility: hidden; background: url(".../.../static/img/layout_hide.jpg") repeat top left transparent;}
| |
| − |
| |
| − | @media screen and (max-height: 780px) { html body aside #logo { margin-top: 50px; margin-bottom: 30px; }
| |
| − | html body aside nav a { line-height: 35px; font-size: 18px; }
| |
| − | html body aside .separator { margin: 20px auto; }
| |
| − | html body aside .contact { font-size: 18px; }
| |
| − | }
| |
| − | @media screen and (max-height: 680px) { html body aside #logo { margin-top: 20px; margin-bottom: 20px; }
| |
| − | html body aside nav a { line-height: 31px; font-size: 18px; }
| |
| − | html body aside .separator { margin: 10px auto; }
| |
| − | }
| |
| − | @media screen and (max-width: 1050px) { html aside { width: 200px; }
| |
| − | html aside #logo { margin-left: 20px; margin-right: 20px; }
| |
| − | html #content { left: 200px; }
| |
| − | }
| |
| − | @media screen and (max-width: 1200px) { html #content #homeIndex a .title { -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -ms-transform: scale(0.7); -o-transform: scale(0.7); transform: scale(0.7); }
| |
| − | html #content #homeIndex .beer .title { margin-bottom: 20px; }
| |
| − | html #content #homeIndex .beer { background-size: 150%; }
| |
| − | }
| |
| − | @media screen and (max-width: 900px) { html #content #homeIndex .experience { height: 40%; }
| |
| − | html #content #homeIndex .ambassador { top: 40%; right: 0; bottom: auto; height: 30%; }
| |
| − | html #content #homeIndex .social { left: 44%; top: 70%; }
| |
| − | }
| |
| − |
| |
| − | @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) { html .beerDetails .middle { -webkit-transform: translate(0,0) scale(0.9); -moz-transform: translate(0,0) scale(0.9); -ms-transform: translate(0,0) scale(0.9); -o-transform: translate(0,0) scale(0.9); transform: translate(0,0) scale(0.9); }
| |
| − | }
| |
| − |
| |
| − |
| |
| − | @media screen and (max-width: 700px) { html #awwwards { display: none; }
| |
| − | html aside { left: -200px; }
| |
| − | html aside #mobileMenuButton { display: block; }
| |
| − | html #content { left: 0; right: auto; width: 100%; }
| |
| − | }
| |
| − |
| |
| − | </style>
| |