/* * Amazium V1.3 * Copyright 2012, Mike Ballan * www.amazium.co.uk */ /***** Reset & Basics *****/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; } body { line-height:1; } ol, ul { list-style:none; } blockquote, q { quotes:none; } blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; } table { border-collapse:collapse; border-spacing:0; } /***** Basic Styles *****/ html { height:100%; -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; color:#222; font:16px Arial; } body { height:100%; margin:0; padding:0; background:#fff; overflow:hidden; color:#000; } * { -webkit-user-drag:none; -webkit-font-smoothing:antialiased; } body.env-prod * { cursor:none !important; } *:focus { outline:none !important; } /***** Typography *****/ @font-face { font-family:'Joy'; src:url("joy-sans.eot"); src:url("joy-sans.eot?#iefix") format("embedded-opentype"), url("joy-sans.woff") format("woff"), url("joy-sans.ttf") format("truetype"), url("joy-sans.svg") format("svg"); } h1, h2, h3, h4, h5, h6 { margin:0; padding:0; font-family:Joy, Arial, sans-serif; font-weight:normal; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight:inherit; } h1 { margin:0 0 10px 0; padding:0; font-size:36px; line-height:40px; color:#333; } h2 { margin:0 0 10px 0; padding:0; font-size:30px; line-height:34px; color:#333; } h3 { margin:0 0 10px 0; padding:0; font-size:24px; line-height:28px; color:#333; } h4 { margin:0 0 10px 0; padding:0; font-size:18px; line-height:22px; color:#333; } h5 { margin:0 0 10px 0; padding:0; font-size:14px; line-height:16px; color:#333; } h6 { margin:0 0 10px 0; padding:0; font-size:12px; line-height:16px; color:#333; } p { margin:0; padding:0 0 10px 0; line-height:20px; } strong { font-weight:bold; color:#333; } em { font-style:italic; color:#666; } small { font-size:80%; } sup, sub { height:0; line-height:5px; vertical-align:baseline; _vertical-align:bottom; position:relative; font-size:80%; } sup { bottom:5px; } sub { top:5px; } code, pre { padding:0 3px 2px; color:#333; font-size:11px; } code { padding:0 4px 2px 4px; background-color:#000; border:1px solid #000; color:#f1f1f1; } /***** Lists *****/ ul, ol { margin-bottom:20px; } ul li { margin:0 0 5px 0; padding:0 0 0 18px; line-height:18px; } ul ul, ul ol { margin:5px 0 5px 0; } ol ol, ol ul { margin:5px 0 5px 20px; } ul ul li, ul ol li, ol ol li, ol ul li { margin:0 0 6px 0; } ul.square, ul.square ul { list-style:square outside; } ul.circle, ul.circle ul { list-style:circle outside; } ul.disc, ul.disc ul { list-style:disc outside; } ul.square li, ul.circle li, ul.disc li { margin:0 0 5px 15px; padding:0; line-height:18px; background:none; } ol { margin:0 0 20px 20px; list-style:decimal; } ol li { margin:0 0 5px 0; padding:0; line-height:18px; } /***** Blockquotes *****/ blockquote, blockquote p { font-size:12px; line-height:24px; color:#777; font-style:italic; } blockquote { margin:10px 0 15px 0; padding:0 0 0 5px; border-left:1px solid #747474; } blockquote cite { display:block; font-size:12px; color:#555; } blockquote cite:before { content:"\2014 \0020"; } blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { color:#555; } blockquote span { width:15px; display:inline-block; } hr { margin:20px 0 20px 0; border:0; border-top:1px solid #999; height:2px; width:100%; text-align:left; } /***** Links *****/ a:link { color:#333; text-decoration:none; outline:0; transition-property:color .1s linear 0s; -moz-transition:color .1s linear 0s; -webkit-transition:color .1s linear 0s; -o-transition:color .1s linear 0s; } a:visited { color:#333; text-decoration:none; outline:0; } a:active { color:#333; text-decoration:none; outline:0; } a:hover { color:#999; text-decoration:underline; outline:0; } a:focus { -moz-outline-style:none; } /***** Images iFrames & Videos *****/ img { border:0; -ms-interpolation-mode:bicubic; image-rendering:optimizeQuality; } .max-img { width:100%; height:auto; } .media { position:relative; margin:0 0 15px 0; padding-bottom:51%; padding-top:30px; height:0; overflow:hidden; border:1px solid #ccc; } .media iframe, .media object, .media embed { position:absolute; top:0; left:0; width:100%; height:100%; } /***** Buttons *****/ a.btn, .btn { margin:5px 0 5px 0; padding:4px 25px 4px 10px; display:inline-block; color:#fff; border:1px solid #000; background:#000 url(../images/btn-arrow.png) no-repeat right; cursor:pointer; } a:hover.btn { text-decoration:none; border:1px solid #000; color:#666; background:#000 url(../images/btn-arrow.png) no-repeat right; } /***** Forms *****/ #stylized-form { margin:10px 0 20px 0; padding:20px; background-color:#f4f4f4; -webkit-border-radius:4px; -moz-border-radius:4px; } .wrapper-block label { padding:0; display:block; font-weight:bold; text-align:right; width:140px; float:left; } .wrapper-block [type="text"] { font-size:12px; padding:4px 2px; border:solid 1px #bbbbbb; width:200px; margin:2px 0 15px 10px; } .wrapper-block select { font-size:12px; padding:2px; border:solid 1px #bbbbbb; margin:2px 0 15px 10px; } .wrapper-block [type="radio"] { line-height:16px; margin:0 2px 15px 10px; } .wrapper-block [type="checkbox"] { line-height:16px; margin:0 2px 15px 10px; } .wrapper-block textarea { padding:4px 2px; border:solid 1px #bbbbbb; width:200px; margin:2px 0 15px 10px; font:12px "Century Gothic", "Trebuchet MS", Helvetica, sans-serif; } .wrapper-inline label { padding:0; display:block; font-weight:bold; text-align:right; width:140px; float:left; } .wrapper-inline [type="text"] { font-size:12px; padding:4px 2px; border:solid 1px #bbbbbb; width:200px; margin:2px 0 15px 10px; float:left; } .wrapper-inline select { font-size:12px; padding:4px 2px; border:solid 1px #bbbbbb; margin:2px 0 15px 10px; float:left; } .wrapper-inline [type="radio"] { line-height:16px; margin:0 2px 15px 10px; float:left; } .wrapper-inline [type="checkbox"] { line-height:16px; margin:0 2px 15px 10px; float:left; } .wrapper-inline textarea { padding:4px 2px; border:solid 1px #bbbbbb; width:140px; margin:2px 0 15px 10px; font:12px "Century Gothic", "Trebuchet MS", Helvetica, sans-serif; float:left; } a.btn-form, input.btn-form { margin:5px 0 5px 150px; padding:4px 28px 4px 8px; display:inline-block; font-size:11px; color:#fff; border:1px solid #444; background:#333 url(../images/btn-arrow.png) no-repeat right; border-radius:4px; -webkit-border-radius:4px; -moz-border-radius:4px; cursor:pointer; } .small-label { display:block; font-size:10px; font-weight:normal; color:#666; text-align:right; width:140px; } /***** Tables *****/ table { margin:0 0 20px 0; width:100%; } table th { padding:10px 8px 10px 8px; background-color:#e2e2e2; color:#333; font-weight:bold; border:1px solid #999; } table td { padding:10px 8px 10px 8px; background-color:#e2e2e2; color:#333; border:1px solid #999; } table tr.even td { background-color:#fff; } table tr.odd td { background-color:#f3f3f3; } table td.highlight { color:#FFF; font-weight:bold; } table tr td.highlight { background-color:#333; } /***** Global Classes *****/ .img-left { float:left; margin:0 30px 30px 0; border:none; } .img-right { float:right; margin:0 0 30px 30px; border:none; } .clear { clear:both; } .float-left { float:left; } .float-right { float:right; } .text-big { color:#a2bd30; font-weight:bold; line-height:26px; } .text-left { text-align:left; } .text-right { text-align:right; } .text-center { text-align:center; } .text-justify { text-align:justify; } .normal { font-weight:normal; } .bold { font-weight:bold; } .italic { font-style:italic; } .underline { border-bottom:1px solid; } .highlight { color:#ff8814; } .intro { font-size:130%; line-height:130%; } .nopadding { padding:0; } .noindent { margin-left:0; padding-left:0; } .nobullet { list-style:none; list-style-image:none; } .block { display:block; } .hidden { display:none; } .hide { display:none; } .loading { display:none; margin-left:-40px; } .loading div { background:#fff; width:10px; height:10px; float:left; margin:10px 5px; border:2px solid #ff8814; opacity:0.1; -webkit-border-radius:100%; -moz-border-radius:100%; border-radius:100%; -moz-animation:load 1s infinite linear; -webkit-animation:load 1s infinite linear; } .loading div:nth-child(1) { -moz-animation-delay:.1s; -webkit-animation-delay:.1s; } .loading div:nth-child(2) { -moz-animation-delay:.25s; -webkit-animation-delay:.25s; } .loading div:nth-child(3) { -moz-animation-delay:.4s; -webkit-animation-delay:.4s; } .loading div:nth-child(4) { -moz-animation-delay:.55s; -webkit-animation-delay:.55s; } @-moz-keyframes load { 0% { opacity:1; } 100% { opacity:0.1; } } @-webkit-keyframes load { 0% { opacity:1; } 100% { opacity:0.1; } } /*.tooltip { background:rgba(255, 136, 20, 0.9); position:absolute; padding:8px 12px; color:#fff; font:24px/1.2 Joy; text-align:center; box-shadow:0 1px 5px rgba(0, 0, 0, 0.3); z-index:9997; width:250px; } .tooltip::after { content:""; position:absolute; border:10px solid transparent; border-bottom-color:rgba(255, 136, 20, 0.9); top:-20px; left:50%; margin-left:-10px; }*/ /***** Main styles *****/ #clear-session { height:0; width:0; border:none; opacity:0; position:absolute; left:-100%; top:-100%; } #screensaver { height:100%; width:100%; position:fixed; top:0; left:0; background:#fff; font:40px/1.5 Joy; text-align:center; z-index:999999; } #screensaver h1 { margin-bottom:40px; font-size:60px; } #screensaver p { margin-bottom:20px; } #screensaver video { width:100%; height:auto; } #screensaver .text { position:absolute; top:0; width:1200px; margin:270px 0 0 -600px; left:50%; padding:80px 0 70px; border-radius:50px; background:linear-gradient(to bottom right, rgba(255, 179, 0, 0.95), rgba(255, 119, 0, 0.95)); text-align:center; font:150px Joy; color:#fff; box-shadow:0 0 100px rgba(0, 0, 0, 0.4); } #screensaver .text h1 { font-size:185px; color:#fff; margin:0; line-height:1.2; } #screensaver .text h2 { font-size:115px; color:#fff; margin:0; line-height:1.2; } #screensaver .text p { margin:0; line-height:1.2; } #error-message { height:100%; width:100%; position:fixed; top:0; left:0; background:#fff; z-index:9999999; display:none; } #error-message .text { position:absolute; top:0; width:1040px; margin:200px 0 0 -600px; left:50%; padding:80px; border-radius:50px; background:linear-gradient(to bottom right, rgba(255, 179, 0, 0.95), rgba(255, 119, 0, 0.95)); text-align:center; font:120px Joy; color:#fff; } #error-message .text p { margin:0; line-height:1; margin-bottom:0.5em; } #error-message .text p.small { margin:0; line-height:1.3; font-size:0.5em; } #wrapper { height:100%; margin-left:auto; margin-right:auto; position:relative; overflow:visible; } #wrapper:before, #wrapper:after { content:" "; display:table; } #wrapper:after { clear:both; } #logo { background:url(../images/logo.jpg) no-repeat center; background-size:contain; display:block; font-size:0; width:100%; margin:30px 0;} #left-col .nav { margin:20px 0 0; padding:0; display:none; } #left-col .nav li { margin-top:10px; list-style:none; background:#eee; color:#000; padding:9px 10px 5px; font:normal 16px/1.2 Joy; -webkit-transition:all 0.2s; } #left-col .nav li.active { background:linear-gradient(to bottom right, #ffb300, #ff7700); color:#fff; } #left-col .frame-qr p { font:16px Joy; padding:0 10px; margin:50px 0 0; text-align:center; } #landing { padding-top:10px; overflow:auto; box-sizing:border-box; height:100%; overflow:hidden; } #landing > div { position:relative; height:45%; width:17.5%; background-color:#eee; border-radius:18px; background-position:center calc(50% - 30px); background-repeat:no-repeat; margin-top:20px; margin-bottom:20px; } #landing > div.map { background-image:url(/images/icons/map.png); } #landing > div.style { background-image:url(/images/icons/style.png); } #landing > div.store { background-image:url(/images/icons/shop.png); } #landing > div.competitions-offers { background-image:url(/images/icons/competitions-offers.png); } #landing > div.events { background-image:url(/images/icons/events.png); } #landing > div.giftcards { background-image:url(/images/icons/giftcards.png); } #landing > div.feedback { background-image:url(/images/icons/tellintu.png); } #landing > div.jobs { background-image:url(/images/icons/jobs.png); } #landing > div.community { background-image:url(/images/icons/community.png); } #landing > div.videos { background-image:url(/images/icons/videos.png); } #landing > div.family { background-image:url(/images/icons/family.png); } #landing > div span { display:block; position:absolute; left:10px; right:10px; bottom:10px; border-radius:10px; background:linear-gradient(to bottom right, rgb(255, 179, 0), rgb(255, 119, 0)); color:#000; font:20px/2 Joy; text-align:left; padding:3px 0 0 15px; } #landing > div span i { padding:12px 10px 0 0; float:right; margin:0; font-size:17px; } #main { background:#eee; display:none; margin-top:30px; position:relative; height:94%; } #main header { background:linear-gradient(to bottom right, #ffb300, #ff7700); overflow:visible; position:relative; z-index:9998; } #main header .header-top { overflow:auto; } #main header h2 { font:30px/1 Joy; margin:0; padding:9px 10px 6px; float:left; color:#fff; } #main header .history { float:left; padding:2px; display:none; } #main header .history i { color:#ffa200; padding:10px 13px 7px; background:#fff; float:left; margin:2px; font-size:20px; transition:background 0.2s; } #main header .history i.disabled { background:rgba(255, 255, 255, 0.5); } #main header .subnav { width:100%; background:#eee; float:left; font:16px Joy; overflow:visible; display:none; } #main header .subnav ul { float:left; margin:0; padding:0; } #main header .subnav ul li { padding:0; height:45px; line-height:47px; margin:0 25px 0 14px; color:#222; display:inline-block; } #main header .subnav ul li img { vertical-align:middle; } #main header .subnav .search { float:right; margin:4px 4px 2px; } #main header .subnav .search .field { background:#fff; font:18px Joy; border:none; float:left; padding:10px 10px 9px; width:200px; } #main header .subnav .search .submit { padding:0; margin:-2px; border:0; background:transparent; float:left; } #main header .subnav .search .submit i { color:#fff; padding:9px 13px 8px; background:linear-gradient(to bottom right, #ffb300, #ff7700); float:left; margin:2px 2px 2px 0; font-size:20px; } #main header .subnav .account { float:right; position:absolute; right:10px; top:16px; padding:0; margin:0; color:#fff; } #main header .subnav .account li { float:left; line-height:1; padding:0; margin:0 10px 0 0; } #main header .subnav .account li:not(:last-child)::after { content:"|"; margin-left:10px; } #main header .subnav-store .basket { background: url(/images/bag-icon-color.png) no-repeat top left; display: inline-block; height: 25px; width: 17px; overflow:hidden; text-align: center; line-height: 32px; font-size: 11px; font-weight: bold; color: #eee; letter-spacing: -1px; padding-right: 1px; float:left; margin:8px 5px 0 0; } #main header .subnav-store .basket:empty { background-image: url(/images/bag-icon.png); } #main header .subnav-gallery { height:0 !important; } #main header .subnav-gallery ul { float:right !important; margin-top:-45px !important; } #main header .subnav-gallery li { background:rgba(255, 255, 255, 0.5); color:#ff8814 !important; font-weight:bold; margin:4px 4px 0 0 !important; float:left; padding:11px 15px 8px !important; height:18px; } #main header .subnav-gallery li.active { background:#fff; } #main header .subnav-gallery .add-photo { background:#fff; font-size:24px; padding:8px 13px 11px !important; } #main header .subnav-videos { position:absolute; right:0; top:0; width:auto; background:transparent; color:#fff; margin:12px 20px 0 0; } #main header .subnav-videos img { vertical-align:middle; margin-top:-4px; } #main header .subnav-videos .centre { display:inline-block; } #main header .subnav-videos .centre::first-letter { text-transform:uppercase; } #main header .subnav-map .active { font-weight:bold; } #main header .subnav-map .map-categories { float:right; background:#fff; font:18px Joy; border:none; padding:13px 5px 9px; width:200px; margin:0 20px 0 0; cursor:none !important; } #main header .subnav-map .selectric-map-categories { margin:4px 0; z-index:10; } #main header .subnav-map .selectric-map-categories .label { padding:10px 10px 9px; } #main .loading { position:absolute; left:50%; top:50%; } #main .content { overflow:scroll; border:2px solid #eee; border-top:none; box-sizing:border-box; height:100%; } #main .content::-webkit-scrollbar { display:none; } #main .content #frame { width:100% !important; height:100% !important; border:none; background:#eee; float:left; } #main .content #frame::-webkit-scrollbar { display:none; } #main .content [id$=_wrapper] { display:none; } #main .gallery { width:100%; overflow:scroll; text-align:center; } #main .gallery::-webkit-scrollbar { display:none; } #main .gallery .zoom { position:fixed; top:0; right:0; bottom:0; left:0; background:rgba(150, 150, 150, 0.9); text-align:left; font:20px Joy; z-index:9998; display:none; } #main .gallery .zoom .photo-wrapper { position:absolute; left:50%; top:50%; height:641px; width:532px; background:#fff; margin:-320px 0 0 -266px; box-shadow:0 0 75px rgba(0, 0, 0, 0.2); } #main .gallery .zoom .photo-wrapper img { width:480px; margin:35px 25px 28px; background:#000; text-align:center; overflow:hidden; position:relative; } #main .gallery .zoom .likes { margin-left:25px; } #main .gallery .zoom .likes i { font-size:60px; color:rgba(0, 0, 0, 0.2); vertical-align:middle; margin-right:15px; } #main .gallery .zoom .likes span { color:#fff; font-weight:bold; margin-left:-50px; } #main .gallery .zoom .date { float:right; margin:18px 26px 0 0; color:#222; } #main .gallery .zoom .close { position:absolute; top:-20px; right:-20px; color:#fff; background:#333; border-radius:100%; height:40px; width:40px; font-size:18px; line-height:40px; text-align:center; } #main .gallery .photo { height:397px; width:330px; background:#fff; display:inline-block; margin:20px; text-align:left; color:#222; font-family:Joy; border-bottom:2px solid #ddd; } #main .gallery .photo img { width:301px; margin:21px 15px 15px 15px; } #main .gallery .photo .likes { margin-left:15px; font-weight:bold; color:#888; } #main .gallery .photo .likes i { font-size:35px; vertical-align:middle; margin-right:10px; color:rgba(0, 0, 0, 0.2); } #main .gallery i.liked { color:#ff8814 !important; } #main .videos { text-align:center; } #main .videos .title { margin-top:50px; font:26px Joy; } #main .videos .main { height:550px; width:734px; margin:30px auto 20px; display:block; border:10px solid #000; background:#000; } #main .videos .thumbs { white-space:nowrap; width:1000px; margin:0 auto 20px; display:block; overflow-x:scroll; } #main .videos .thumbs::-webkit-scrollbar { display:none; } #main .videos .thumbs li { display:inline-block; margin:0 10px; padding:20px 0 17px; background:#000; position:relative; white-space:nowrap; } #main .videos .thumbs li img { width:230px; height:129px; } #main .videos .thumbs li span { background:linear-gradient(to bottom right, rgba(255, 179, 0, 0.9), rgba(255, 119, 0, 0.9)); padding:5px 10px; position:absolute; left:0; bottom:0; right:0; white-space:normal; text-align:left; color:#fff; } #main .community { width:100%; overflow:hidden; height:100%; } #main .community .nav { position:absolute; top:50%; font-size:36px; width:30px; height:30px; line-height:34px; color:#eee; background:#ccc; padding:20px; border-radius:100%; } #main .community .nav.prev { left:30px; display:none; } #main .community .nav.next { right:30px; } #main .community .stats { display:inline-block; margin:50px 92px; width:394px; text-align:left; float:left; } #main .community .stats .source { height:100px; width:100px; font-size:60px; line-height:105px; text-align:center; background:linear-gradient(to bottom right, rgba(255, 179, 0, 0.9), rgba(255, 119, 0, 0.9)); color:#fff; margin-right:20px; float:left; border-radius:100%; } #main .community .stats p { font:16px/1.2 Joy; padding:0; } #main .community .stats p:first-of-type { margin-top:22px; } #main .community .stats.active p { color:#ff8814; } #main .community .feed-item { width:850px; background:#eee; height:500px; padding:10px; margin:90px auto 0; text-align:left; position:relative; opacity:0; } #main .community .feed-item .details { width:320px; background:#fff; color:#222; padding:10px; margin-right:10px; float:left; border-radius:3px; position:relative; } #main .community .feed-item:not(.with-media) .details { margin-left:255px; } #main .community .feed-item.with-media .details::after { content:""; position:absolute; border:10px solid transparent; border-left-color:#fff; right:-20px; top:10px; } #main .community .feed-item .details img { width:48px; float:left; margin-right:10px; } #main .community .feed-item .details p { padding-bottom:7px; } #main .community .feed-item .details .name { float:left; clear:right; width:260px; font-weight:bold; } #main .community .feed-item .details .time { float:left; clear:right; color:#aaa; font-size:12px; } #main .community .feed-item .details .text { float:left; clear:both; font-size:14px; padding-bottom:5px; } #main .community .feed-item .details ul { float:left; clear:both; width:100%; margin:0; font-size:14px; overflow-y:scroll; } #main .community .feed-item .details ul::-webkit-scrollbar { display:none; } #main .community .feed-item .details li { padding:10px 0 0; border-top:1px solid #ccc; overflow:auto; word-break:break-all; } #main .community .feed-item .image { float:right; width:500px; height:500px; background-size:contain; background-position:top left; background-repeat:no-repeat; } #main .community .feed-item .image iframe, #main .community .feed-item .image video { width:100%; height:100%; } #main .community .feed-wrapper { width:50%; height:calc(100% - 210px); overflow-y:scroll; overflow-x:hidden; float:left; } #main .community .feed-wrapper::-webkit-scrollbar { display:none; } #main .community .feed-wrapper:nth-child(2) { clear:left; } #main .community .feed-wrapper:last-child { float:right; } #main .community .item { margin:10px; background:#fff; color:#222; padding:10px 10px 0; border:2px solid #eee; border-radius:5px; position:relative; min-height:13px; list-style:none; overflow:auto; } #main .community .item:last-child { margin-bottom:0; } #main .community .item .source { background:linear-gradient(to bottom right, #ffb300, #ff7700); color:#fff; width:40px; text-align:center; line-height:40px; font-size:25px; position:absolute; top:0; left:-60px; } #main .community .item .byline { font:20px Joy; } #main .community .item .byline .handle { color:#ccc; } #main .community .item .qr { float:right; margin:-10px -10px 5px 0; clear:both; } #main .community .item .yt-wrapper { position:relative; } #main .community .item .yt-wrapper::after { content:""; position:absolute; top:50%; left:50%; margin:-30px 0 0 -42px; height:60px; width:85px; background:url(/images/yt-btn.svg); } #main .community .item img:not(.qr) { width:100%; display:block; } #main .community .item video { width:100%; } #main .community .item iframe { width:100%; height:270px; display:block; } #main .you-are-here { position:absolute; z-index:9999; display:none; } #main .map-marker { position:absolute; top:75px; left:0; opacity:0; height:53px; width:36px; margin:-52px 0 0 -18px; z-index:1; } #main .map-marker .shadow { position:absolute; bottom:-2px; left:-5px; background:url(/images/map-marker-shadow.png); height:40px; width:46px; -webkit-transform-origin:center bottom; z-index:-1; } #main .map-marker.terminal { height:44px; margin:-58px 0 0 -29px; z-index:0; -webkit-animation:marker-bounce 0.75s infinite alternate cubic-bezier(.51,.02,.53,.99); } @-webkit-keyframes marker-bounce { 0% { -webkit-transform:translateY(-8px); } 100% { -webkit-transform:translateY(0); } } #main .store-list { margin:0 10px; text-align:center; height:400px; overflow-y:scroll; } #main .store-list::-webkit-scrollbar { display:none; } #main .store-list li { padding:10px; margin:0; width:12.5%; box-sizing:border-box; text-align:center; height:100px; display:inline-block; } #main .competitions-offers { padding-top:220px; height:100%; background:#fff; } #main .comp-offers-btn { position:relative; height:45%; background-color:#eee; border-radius:18px; background-position:center calc(50% - 30px); background-repeat:no-repeat; } #main .comp-offers-btn.competitions { background-image:url(/images/icons/competitions.png); } #main .comp-offers-btn.offers { background-image:url(/images/icons/offers.png); } #main .comp-offers-btn span { display:block; position:absolute; left:10px; right:10px; bottom:10px; border-radius:10px; background:linear-gradient(to bottom right, rgb(255, 179, 0), rgb(255, 119, 0)); color:#000; font:20px/2 Joy; text-align:left; padding:3px 0 0 15px; } #main .comp-offers-btn span i { padding:12px 10px 0 0; float:right; margin:0; font-size:17px; } #social { overflow:hidden; display:none; margin-top:30px; position:relative; height:94%; } #social header { height:45px; font:15px Joy; background:#fff; position:relative; z-index:1; } #social header h2 { display:inline; font-size:inherit; } #social header ul { display:inline; } #social header li { display:inline; list-style:none; margin:0 0 0 12px; padding:0; color:#777; } #social header li i { color:#ff8814; } #social .feed { overflow-y:scroll; overflow-x:hidden; box-sizing:border-box; height:94%; padding:0; margin:0; } #social .feed::-webkit-scrollbar { display:none; } #social .item { margin:10px 0 10px 60px; background:#fff; color:#222; padding:10px 10px 0; border:2px solid #eee; border-radius:5px; position:relative; min-height:13px; } #social .item:last-child { margin-bottom:0; } #social .item:before { content:""; position:absolute; border:10px solid transparent; border-right-color:#eee; left:-20px; top:10px; } #social .item:after { content:""; position:absolute; border:10px solid transparent; border-right-color:#fff; left:-17px; top:10px; } #social .item .source { background:linear-gradient(to bottom right, #ffb300, #ff7700); color:#fff; width:40px; text-align:center; line-height:40px; font-size:25px; position:absolute; top:0; left:-60px; } #social .item .byline { font:17px Joy; } #social .item .byline .handle { font-size:15px; color:#ccc; } #social .item .qr { float:right; margin:-15px -10px 5px 0; clear:both; } #social .item .yt-wrapper { position:relative; } #social .item .yt-wrapper::after { content:""; position:absolute; top:50%; left:50%; margin:-30px 0 0 -42px; height:60px; width:85px; background:url(/images/yt-btn.svg); } #social .item img:not(.qr) { width:100%; display:block; } #social .item video { width:100%; } #social .item iframe { width:100%; height:270px; display:block; } #social .new-tweet { padding-bottom:10px; position:relative; background:#fff; z-index:1; overflow:hidden; } #social .new-tweet .item { margin-bottom:10px; padding-bottom:10px; } #social .new-tweet .item textarea { font:300 17px Joy; background:transparent; padding:10px; margin:0; border:none; position:absolute; top:0; left:0; width:100%; height:100%; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; resize:none; transition:all 0.2s; } #social .new-tweet .item pre { font:300 17px Joy; color:transparent; min-height:22px; margin:0; padding:0; white-space:pre-wrap; word-wrap:break-word; } #social .new-tweet .item .tooltip { bottom:-83px; left:50%; margin-left:-145px; } #social .new-tweet .expanded { position:relative; text-align:right; overflow:hidden; height:0; opacity:0; -moz-transition:height 0.1s, opacity 0.2s 0.1s; -webkit-transition:height 0.1s, opacity 0.2s 0.1s; transition:height 0.1s, opacity 0.2s 0.1s; } #social .new-tweet .expanded.visible { height:40px; opacity:1; } #social .new-tweet .expanded .add-tweet { background:#ff8814; border:none; padding:2px 0 0 10px; font:18px/1.6 Joy; color:#fff; margin:0 0 0 20px; } #social .new-tweet .expanded .add-tweet i { background:#ff8814; padding:2px 8px 0 0; margin:-2px 0 0 10px; font-size:20px; vertical-align:middle; position:relative; } #social .new-tweet .expanded .add-photo { background:#ff8814; padding:4px 9px 4px 10px; margin:0 0 0 2px !important; color:#fff; float:left; border:none; font-size:20px; margin:0; } #social .new-tweet .expanded .preview { height:55px; float:left; display:none; } #social .new-tweet .expanded .loading { bottom:5px; position:absolute; left:50%; } #social .tooltip { top:105px; left:50%; margin-left:-110px; } #camera { position:fixed; top:0; right:0; bottom:0; left:0; background:rgba(150, 150, 150, 0.9); display:none; z-index:9998; } #camera .frame { position:absolute; left:50%; top:50%; height:641px; width:532px; background:#fff; margin:-375px 0 0 -266px; box-shadow:0 0 75px rgba(0, 0, 0, 0.2); } #camera .frame .video-wrapper { width:480px; height:480px; margin:35px 0 0 25px; background:#000; text-align:center; overflow:hidden; position:relative; } #camera .frame .video-wrapper video { height:480px; margin-left:-80px; } #camera .frame .video-wrapper .preview { position:absolute; top:0; right:0; bottom:0; left:0; display:none; transition:background-image 0.2s; background:url(/images/camera-loading.gif) no-repeat center; -moz-transition:background-image 0.2s; -webkit-transition:background-image 0.2s; transition:background-image 0.2s; } #camera .cancel { position:absolute; top:-20px; right:-20px; color:#fff; background:#333; border-radius:100%; height:40px; width:40px; font-size:18px; line-height:40px; text-align:center; } #camera nav { margin:23px; text-align:right; } #camera nav i { background:#ff8814; color:#fff; height:80px; width:80px; line-height:80px; text-align:center; font-size:40px; border-radius:100%; margin:0 0 0 10px; display:inline-block; } #camera nav i.accept { display:none; } #camera nav i.decline { display:none; } #camera .flash { position:absolute; top:0; right:0; bottom:0; left:0; background:rgba(255, 255, 255, 0.5); display:none; } #qr { position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(255, 255, 255, 0.75); display:flex; align-items:center; justify-content:center; z-index:-100; opacity:0; } #qr .popup { background:#fff; box-shadow:0 0 30px rgba(0, 0, 0, 0.25); padding: 50px; display:inline-block; width:20vw; position:relative; } #qr .popup img { width: 100%; margin-bottom:40px; } #qr .popup p { font-size:1.5em; line-height: 1.2; } #qr .popup .url { font-weight:bold; margin:0; word-wrap:break-word; } #qr .popup .close { color:#fff; background:#000; top:-1em; right:-1em; font-size:2em; height:2em; width:2em; text-align:center; line-height:2em; border-radius:100%; position:absolute; } .tooltip { position:absolute; z-index:9999; display:none; } .tooltip.search { top:100px; left:1315px; } .tooltip.map-scroll { top:775px; left:1315px; } .tooltip.community-next { top:525px; left:1355px; } .tooltip.store-basket.hide-portrait { top:108px; left:1025px; } .tooltip.qr { margin:-15px 0 0 -50px; display:block !important; } .snowflake-close { position:absolute; opacity:0.5; height:200px; width:200px; z-index:999999; } .snowflake-close .close-btn { position:absolute; left:47px; top:45px; } .snowflake-close .close-background { position:absolute; } .snowflake-close .close-background.depth-1 { -webkit-animation:snowflake-rotate 4000ms linear infinite; left:12.5%; top:12.5%; height:75%; width:75%; opacity:0.75; } .snowflake-close .close-background.depth-2 { -webkit-animation:snowflake-rotate 8000ms linear infinite; left:0; top:0; height:100%; width:100%; opacity:0.33; } .snowflake-close.close-top { top:-50px; right:-50px; } .snowflake-close.close-bottom { bottom:-50px; left:-50px; } @-webkit-keyframes snowflake-rotate { 0% { -webkit-transform:rotate(0deg); } 100% { -webkit-transform:rotate(360deg); } } /***** Dev debug overrides *****/ /*body.env-dev * { cursor: default !important; }*/