-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstyle.css
2 lines (2 loc) · 20.9 KB
/
style.css
1
2
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}body{background:#000;font-family:"Open Sans",sans-serif;color:#444;margin:0;padding:90px 0 0}@media screen and (min-width: 768px){body{padding-top:108px}}img{display:block;width:100%;height:auto}h1{font-size:1.4375rem;margin-bottom:0.625rem}@media screen and (min-width: 768px){h1{font-size:1.875rem}}.contain{max-width:68em;margin-left:auto;margin-right:auto;padding:0 10px}.contain::after{clear:both;content:"";display:table}@media screen and (min-width: 68em){.contain{padding:0}}.pin{display:inline-block;width:14px;height:18px;position:relative;top:4px;background:url(images/pin.svg) left bottom;background-repeat:no-repeat;background-size:contain}.button{margin-right:20px;background:#fab515;color:#fff;text-shadow:0px 1px 3px rgba(0,0,0,0.3);box-shadow:0px 1px 3px rgba(0,0,0,0.3);text-decoration:none;font-size:1.125rem;padding:15px 50px;display:inline-block;-webkit-transition:all 0.25s;-moz-transition:all 0.25s;transition:all 0.25s;position:relative;border-radius:5px}@media screen and (min-width: 768px){.button{font-size:1.25rem}}.button.email{margin-right:0}.button:hover{-webkit-transform:translateY(-3px);-moz-transform:translateY(-3px);-ms-transform:translateY(-3px);-o-transform:translateY(-3px);transform:translateY(-3px);box-shadow:0px 3px 3px rgba(0,0,0,0.3)}.button:active{-webkit-transform:translateY(1px);-moz-transform:translateY(1px);-ms-transform:translateY(1px);-o-transform:translateY(1px);transform:translateY(1px);box-shadow:0px 0px 0px rgba(0,0,0,0.3)}header{background:#000;width:100%;position:absolute;top:0;z-index:1}.logo{display:block;background:url(images/logo.png) no-repeat;background-size:contain;width:80px;height:65px;text-indent:-9999px;float:left}@media screen and (min-width: 768px){.logo{width:100px;height:78px}}.primary{float:left}.primary ul{color:white;list-style-type:none;margin:0;padding:0;padding-left:5px}@media screen and (min-width: 768px){.primary ul{padding-left:20px}}.primary ul li{float:left;margin-top:15px;margin-left:8px}@media screen and (min-width: 768px){.primary ul li{margin-top:20px;margin-left:30px}}.primary ul li a{padding:10px;color:#fff;text-decoration:none;font-size:1.125rem}@media screen and (min-width: 768px){.primary ul li a{font-size:1.25rem}}.primary ul li a:hover{color:#fab515}.social{float:right;display:none}@media screen and (min-width: 768px){.social{display:block}}.social ul{list-style-type:none;margin:0;padding:0}.social ul li{float:left;margin-top:10px;margin-left:20px}.social ul li a{text-indent:-9999px;color:#fff;background:#fff;background-position:center center;background-repeat:no-repeat;background-size:contain;text-decoration:none;font-size:1.25rem;display:block;width:50px;height:50px;border-radius:100%}.social ul li a.facebook{background-image:url(images/social/facebook.svg)}.social ul li a.twitter{background-image:url(images/social/twitter.svg)}.social ul li a.youtube{background-image:url(images/social/youtube.svg)}.social ul li a.instagram{background-image:url(images/social/instagram.svg)}.social ul li a:hover{background-color:#fab515}.social.mobile-social{padding-top:10px;text-align:center;background:white;display:block;float:none}.social.mobile-social::after{clear:both;content:"";display:table}.social.mobile-social ul li{float:none;display:inline-block}.social.mobile-social ul li:first-of-type{margin-left:0}@media screen and (min-width: 500px){.social.mobile-social ul li a{width:70px;height:70px}}.social.mobile-social p{font-size:1.25rem}.pianos{background:#28d2ff;position:relative;height:91.38889vw;overflow:hidden}@media screen and (min-width: 768px){.pianos{height:52.22222vw}}.slide-wrap{width:100%;height:100%;position:absolute;top:0;left:0}.slide{float:left;position:relative;height:100%}.slide-1,.slide-2,.slide-3,.slide-4,.slide-5{position:absolute;top:0;left:0;height:100%}.slide-1{width:100%}.slide-1 .slide{width:100%}.index-1{z-index:1}.slide-2{width:200%}.slide-2 .slide{width:50%}.index-2{z-index:2}.slide-3{width:300%}.slide-3 .slide{width:33.33333%}.index-3{z-index:3}.slide-4{width:400%}.slide-4 .slide{width:25%}.index-4{z-index:4}.slide-5{width:500%}.slide-5 .slide{width:20%}.index-5{z-index:5}.switcher-center{position:absolute;top:0;left:0;width:100%}.switcher{margin:0 auto;position:relative}.switcher .previous,.switcher .next{text-indent:-9999px;cursor:pointer;position:absolute;top:50px;left:5px;width:30px;height:30px;padding:10px;border-radius:100%;color:#fff;text-shadow:0px 1px 3px rgba(0,0,0,0.3);box-shadow:0px 1px 3px rgba(0,0,0,0.3);background:#fab515 url(images/arrow-previous.svg) center center no-repeat;background-size:contain}.switcher .next{left:auto;right:5px;background-image:url(images/arrow-next.svg)}@media screen and (min-width: 330px){.switcher .previous,.switcher .next{width:40px;height:40px;top:60px}}@media screen and (min-width: 460px){.switcher .previous,.switcher .next{width:60px;height:60px;top:80px}}@media screen and (min-width: 550px){.switcher{width:550px}}.pianos .slide-wrap-slowest{pointer-events:none}.pianos .slide-wrap.slide-wrap-slowest>div{-webkit-transition-delay:0.5s;-moz-transition-delay:0.5s;transition-delay:0.5s;-webkit-transition:-webkit-transform 1.25s ease-in-out;-moz-transition:-moz-transform 1.25s ease-in-out;transition:transform 1.25s ease-in-out}.pianos .slide-wrap.slide-wrap-slow>div{-webkit-transition:-webkit-transform 1s ease-in-out;-moz-transition:-moz-transform 1s ease-in-out;transition:transform 1s ease-in-out}.pianos .slide-wrap.slide-wrap-fast>div{-webkit-transition:-webkit-transform 0.75s ease-in-out;-moz-transition:-moz-transform 0.75s ease-in-out;transition:transform 0.75s ease-in-out}.pianos.canada-place .slide-wrap>div{-webkit-transform:translateX(0%);-moz-transform:translateX(0%);-ms-transform:translateX(0%);-o-transform:translateX(0%);transform:translateX(0%)}.pianos.strathcona .slide-wrap>div{-webkit-transform:translateX(-33.33333%);-moz-transform:translateX(-33.33333%);-ms-transform:translateX(-33.33333%);-o-transform:translateX(-33.33333%);transform:translateX(-33.33333%)}.pianos.chinatown .slide-wrap>div{-webkit-transform:translateX(-66.66667%);-moz-transform:translateX(-66.66667%);-ms-transform:translateX(-66.66667%);-o-transform:translateX(-66.66667%);transform:translateX(-66.66667%)}.scroll{background:url(images/scroll.svg) top left;background-size:contain;width:391px;padding:20px 30px;margin:20px auto}.scroll h3{text-align:center;margin:0}.scroll p{margin:0.5em 0 0;text-align:center}.scroll a{color:#444}.scroll .button{float:none;display:inline-block;margin-right:0;margin-top:10px;color:#fff;font-size:1.125rem;padding:10px 25px}@media screen and (max-width: 400px){.scroll{font-size:0.8rem;width:90%;padding:20px 20px;margin:0px auto}.scroll .button{font-size:1rem}}.scene{height:100%;background-position:center bottom;background-size:cover}.scene.canada-place{background-image:url(images/pianos/canada-place.svg)}.scene.canada-place-piano{background-image:url(images/pianos/canada-place-piano.svg)}.scene.cambie-bridge{background-image:url(images/pianos/cambie-bridge.svg)}.scene.cambie-bridge-piano{background-image:url(images/pianos/generic-piano.svg)}.scene.strathcona{background-image:url(images/pianos/strathcona.svg)}.scene.strathcona-piano{background-image:url(images/pianos/strathcona-piano.svg)}.scene.chinatown{background-image:url(images/pianos/chinatown.svg)}.scene.chinatown-piano{background-image:url(images/pianos/chinatown-piano.svg)}.scene.canada-place-piano,.scene.cambie-bridge-piano,.scene.strathcona-piano,.scene.chinatown-piano{position:absolute;left:0;top:0;height:100%;width:100%}.tagline{display:none}.keys{background:#eee;height:25vw}.content{float:left;display:block;margin-right:2.35765%;width:100%}.content:last-child{margin-right:0}@media screen and (min-width: 768px){.content{float:left;display:block;margin-right:2.35765%;width:48.82117%}.content:last-child{margin-right:0}}.content p:first-of-type{margin-top:0}.gallery{margin-top:20px;float:left;display:block;margin-right:2.35765%;width:100%}.gallery:last-child{margin-right:0}@media screen and (min-width: 768px){.gallery{margin-top:0;float:left;display:block;margin-right:2.35765%;width:48.82117%}.gallery:last-child{margin-right:0}}.gallery-video{display:none}@media screen and (min-width: 768px){.gallery-video{display:block}}.gallery-video .player{background:#000;position:relative;padding-bottom:56.25%;height:0;overflow:hidden;max-width:100%}.gallery-video .player iframe,.gallery-video .player object,.gallery-video .player embed{position:absolute;top:0;left:0;width:100%;height:100%}.gallery-video .videos a{margin-top:2.35765%;float:left;display:block;margin-right:2.35765%;width:31.76157%}.gallery-video .videos a:last-child{margin-right:0}.gallery-video .videos a:nth-child(3n){margin-right:0}.gallery-video .videos a:nth-child(3n+1){clear:left}.gallery-video .videos a:last-child{display:none}@media screen and (min-width: 960px){.gallery-video .videos a{float:left;display:block;margin-right:2.35765%;width:18.11388%}.gallery-video .videos a:nth-child(3n){margin-right:2.35765%}.gallery-video .videos a:nth-child(3n+1){clear:none}.gallery-video .videos a:last-child{margin-right:0}.gallery-video .videos a:nth-child(5n){margin-right:0}.gallery-video .videos a:nth-child(5n+1){clear:left}.gallery-video .videos a:last-child{display:block}}.gallery-video .videos a.active,.gallery-video .videos a:hover{opacity:0.3}.gallery-photo img{display:block;margin-bottom:2.35765%;float:left;display:block;margin-right:2.35765%;width:48.82117%}.gallery-photo img:last-child{margin-right:0}.gallery-photo img:nth-child(2n){margin-right:0}.gallery-photo img:nth-child(2n+1){clear:left}@media screen and (min-width: 768px){.gallery-photo img{float:left;display:block;margin-right:2.35765%;width:23.23176%}.gallery-photo img:nth-child(2n){margin-right:2.35765%}.gallery-photo img:nth-child(2n+1){clear:none}.gallery-photo img:last-child{margin-right:0}.gallery-photo img:nth-child(4n){margin-right:0}.gallery-photo img:nth-child(4n+1){clear:left}}.about,.support,.sponsors-wrap{padding:10px 0 15px}@media screen and (min-width: 960px){.about,.support,.sponsors-wrap{padding:30px 0 50px}}.about,.sponsors-wrap{background:#fff}.about{background:#fff url(images/notes-bg.svg)}.support{background:#28d2ff;color:#fff}.sponsors{margin-top:2em}.sponsor{text-align:center;margin-bottom:2.35765%;float:left;display:block;margin-right:2.35765%;width:48.82117%}.sponsor:last-child{margin-right:0}.sponsor:nth-child(2n){margin-right:0}.sponsor:nth-child(2n+1){clear:left}@media screen and (min-width: 768px){.sponsor{float:left;display:block;margin-right:2.35765%;width:23.23176%}.sponsor:nth-child(2n){margin-right:2.35765%}.sponsor:nth-child(2n+1){clear:none}.sponsor:last-child{margin-right:0}.sponsor:nth-child(4n){margin-right:0}.sponsor:nth-child(4n+1){clear:left}}.sponsor a{color:#444;text-decoration:none;-webkit-perspective:1000px;-moz-perspective:1000px;perspective:1000px}.sponsor a span{position:relative;display:inline-block;padding:10px 14px;background:#fff;-webkit-transition:-webkit-transform 0.3s;-moz-transition:-moz-transform 0.3s;transition:transform 0.3s;-webkit-transform-origin:50% 0%;-moz-transform-origin:50% 0%;-ms-transform-origin:50% 0%;-o-transform-origin:50% 0%;transform-origin:50% 0%;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;-o-transform-style:preserve-3d;transform-style:preserve-3d}.sponsor a span::before{border-radius:4px;position:absolute;top:100%;left:0;padding:10px 14px;background:#fab515;color:#fff;text-shadow:0px 1px 3px rgba(0,0,0,0.3);box-shadow:0px 1px 3px rgba(0,0,0,0.3);content:attr(data-hover);-webkit-transition:background 0.3s;-moz-transition:background 0.3s;transition:background 0.3s;-webkit-transform:rotateX(-90deg);-moz-transform:rotateX(-90deg);-ms-transform:rotateX(-90deg);-o-transform:rotateX(-90deg);transform:rotateX(-90deg);-webkit-transform-origin:50% 0%;-moz-transform-origin:50% 0%;-ms-transform-origin:50% 0%;-o-transform-origin:50% 0%;transform-origin:50% 0%}.sponsor a:hover span,.sponsor a:focus span{-webkit-transform:rotateX(90deg) translateY(-22px);-moz-transform:rotateX(90deg) translateY(-22px);-ms-transform:rotateX(90deg) translateY(-22px);-o-transform:rotateX(90deg) translateY(-22px);transform:rotateX(90deg) translateY(-22px)}.sponsor a:hover span::before,.sponsor a:focus span::before{background:#fab515;text-shadow:0px 1px 3px rgba(0,0,0,0.3);box-shadow:0px 1px 3px rgba(0,0,0,0.3)}footer{text-align:center;padding:20px 0;background-color:#000;color:#fff}footer ul{list-style-type:none;padding:0;margin:0;display:inline-block}footer ul li:first-of-type,footer ul li:nth-child(2){display:inline-block;margin-bottom:15px}footer ul li:first-of-type:after{content:' · '}@media screen and (max-width: 350px){footer ul li:last-of-type{font-size:0.875rem}}@media screen and (min-width: 768px){footer ul li{display:inline-block}footer ul li:after{content:' · '}footer ul li:last-of-type:after{content:none}}footer a{color:#fff}footer a:hover{color:#fab515}.support .content,.scroll,.primary{-webkit-transform:translate3d(0, 0, 0)}.keys{position:relative;background-color:white;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.keys .back-drop{z-index:0;width:100%;position:absolute;background-color:black;height:89.33333%}.keys .key{float:left;height:100%;width:8.33333%;position:relative;cursor:pointer}.keys .key .key-white{z-index:1;margin-right:5%;height:100%;width:95%}.keys .key .key-white .top{display:block;position:relative;background-color:#F8F0E6;height:85%;width:100%;-webkit-transition:all 0.2s;-moz-transition:all 0.2s;transition:all 0.2s}.keys .key .key-white .top:after{-webkit-transition:all 0.2s;-moz-transition:all 0.2s;transition:all 0.2s;content:" ";height:100%;width:100%;position:absolute;background:-webkit-linear-gradient(#e4d2cd, #F8F0E6);background:linear-gradient(#e4d2cd, #F8F0E6);opacity:0}.keys .key .key-white:after{content:" ";display:block;background-color:#E1CFC9;height:8.33333%;width:95%;position:absolute;border:0px solid;border-bottom-left-radius:6px;border-bottom-right-radius:6px;bottom:8.33333%;-webkit-transition:all 0.2s;-moz-transition:all 0.2s;transition:all 0.2s}.keys .key .key-white:active .top,.keys .key .key-white.active .top{height:93.33333%;background-color:#e4d2cd}.keys .key .key-white:active .top:after,.keys .key .key-white.active .top:after{opacity:1}.keys .key .key-white:active:after,.keys .key .key-white.active:after{height:6.25%;bottom:4.16667%}.keys .key .key-white .letter{color:black;font-size:2vw;position:absolute;bottom:5.55556%;left:0;right:0;text-align:center;vertical-align:middle;-webkit-transition:opacity 0.3s;-moz-transition:opacity 0.3s;transition:opacity 0.3s;opacity:0}.keys .key .key-black{height:68.33333%;width:46.66667%;position:absolute;left:74.16667%;top:0;z-index:2;background-color:#323232;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;transition:all 0.3s}.keys .key .key-black:after{-webkit-transition:all 0.3s;-moz-transition:all 0.3s;transition:all 0.3s;content:" ";position:absolute;width:100%;height:10%;bottom:0;background-color:#1A1818}.keys .key .key-black:before{-webkit-transition:all 0.2s;-moz-transition:all 0.2s;transition:all 0.2s;content:" ";height:100%;width:100%;position:absolute;background:-webkit-linear-gradient(#323232, #494242);background:linear-gradient(#323232, #494242);opacity:1}.keys .key .key-black:active,.keys .key .key-black.active{background-color:#1A1818}.keys .key .key-black:active:after,.keys .key .key-black.active:after{height:10px}.keys .key .key-black:active:before,.keys .key .key-black.active:before{opacity:0}.keys .key .key-black .letter{color:#F8F0E6;font-size:1.8vw;position:absolute;bottom:15%;left:0;right:0;text-align:center;vertical-align:middle;-webkit-transition:opacity 0.2s,bottom 0.3s;-moz-transition:opacity 0.2s,bottom 0.3s;transition:opacity 0.2s,bottom 0.3s;opacity:0}.keys .keyboard{cursor:pointer;background-image:url("images/keyboard.svg");background-size:36px 36px;background-repeat:no-repeat;background-position:center center;text-indent:-9999px;background-color:transparent;border-radius:5px;-webkit-transition:opacity 0.3s;-moz-transition:opacity 0.3s;transition:opacity 0.3s;position:absolute;right:10px;border:none;bottom:-12%;height:40px;width:60px;opacity:.6;display:none}.keys .keyboard:focus{outline:none}@media screen and (min-width: 768px){.keys .keyboard{display:block}}.keys.show-hints .key .key-white .letter,.keys.show-hints .key .key-black .letter{opacity:1}.keys.show-hints .key .key-white:active .letter,.keys.show-hints .key .key-white.active .letter,.keys.show-hints .key .key-black:active .letter,.keys.show-hints .key .key-black.active .letter{opacity:0}.keys.show-hints .key .key-black:active .letter,.keys.show-hints .key .key-black.active .letter{bottom:6.66667%}.keys.show-hints .keyboard{opacity:1}.notesContainer{width:50%;height:100%;top:0;left:25%;position:absolute}@media screen and (min-width: 768px){.notesContainer{width:30%;left:35%}}.notesContainer>div{position:absolute;width:4vw;height:4vw;bottom:30vw;-webkit-animation-name:fade,drop;-moz-animation-name:fade,drop;animation-name:fade,drop;-webkit-animation-timing-function:linear,linear;-moz-animation-timing-function:linear,linear;animation-timing-function:linear,linear;-webkit-animation-iteration-count:1,1;-moz-animation-iteration-count:1,1;animation-iteration-count:1,1;-webkit-animation-duration:normal,normal;-moz-animation-duration:normal,normal;animation-duration:normal,normal;-webkit-animation-duration:6s,6s;-moz-animation-duration:6s,6s;animation-duration:6s,6s;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;animation-fill-mode:forwards}@media screen and (min-width: 768px){.notesContainer>div{width:2.5vw;height:2.5vw;bottom:15vw}}.notesContainer>div>img{position:absolute;width:100px;height:100px;-webkit-animation-name:clockwiseSpin;-moz-animation-name:clockwiseSpin;animation-name:clockwiseSpin;-webkit-animation-timing-function:ease-in-out;-moz-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-iteration-count:infinite;-moz-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-direction:alternate;-moz-animation-direction:alternate;animation-direction:alternate;-webkit-animation-duration:4s;-moz-animation-duration:4s;animation-duration:4s;-webkit-transform-origin:50% -100%;-moz-transform-origin:50% -100%;-ms-transform-origin:50% -100%;-o-transform-origin:50% -100%;transform-origin:50% -100%}@-webkit-keyframes fade{0%{opacity:1}95%{opacity:1}100%{opacity:0}}@-moz-keyframes fade{0%{opacity:1}95%{opacity:1}100%{opacity:0}}@keyframes fade{0%{opacity:1}95%{opacity:1}100%{opacity:0}}@-webkit-keyframes drop{0%{-webkit-transform:translate(0px, 0px)}100%{-webkit-transform:translate(0px, -100vw)}}@-moz-keyframes drop{0%{-moz-transform:translate(0px, 0px)}100%{-moz-transform:translate(0px, -100vw)}}@keyframes drop{0%{-webkit-transform:translate(0px, 0px);-moz-transform:translate(0px, 0px);-ms-transform:translate(0px, 0px);-o-transform:translate(0px, 0px);transform:translate(0px, 0px)}100%{-webkit-transform:translate(0px, -100vw);-moz-transform:translate(0px, -100vw);-ms-transform:translate(0px, -100vw);-o-transform:translate(0px, -100vw);transform:translate(0px, -100vw)}}@media screen and (min-width: 768px){@-webkit-keyframes drop{0%{-webkit-transform:translate(0px, 0px)}100%{-webkit-transform:translate(0px, -50vw)}}@-moz-keyframes drop{0%{-moz-transform:translate(0px, 0px)}100%{-moz-transform:translate(0px, -50vw)}}@keyframes drop{0%{-webkit-transform:translate(0px, 0px);-moz-transform:translate(0px, 0px);-ms-transform:translate(0px, 0px);-o-transform:translate(0px, 0px);transform:translate(0px, 0px)}100%{-webkit-transform:translate(0px, -50vw);-moz-transform:translate(0px, -50vw);-ms-transform:translate(0px, -50vw);-o-transform:translate(0px, -50vw);transform:translate(0px, -50vw)}}}@-webkit-keyframes clockwiseSpin{0%{-webkit-transform:rotate(-50deg)}100%{-webkit-transform:rotate(50deg)}}@-moz-keyframes clockwiseSpin{0%{-moz-transform:rotate(-50deg)}100%{-moz-transform:rotate(50deg)}}@keyframes clockwiseSpin{0%{-webkit-transform:rotate(-50deg);-moz-transform:rotate(-50deg);-ms-transform:rotate(-50deg);-o-transform:rotate(-50deg);transform:rotate(-50deg)}100%{-webkit-transform:rotate(50deg);-moz-transform:rotate(50deg);-ms-transform:rotate(50deg);-o-transform:rotate(50deg);transform:rotate(50deg)}}@-webkit-keyframes counterclockwiseSpinAndFlip{0%{-webkit-transform:scale(-1, 1) rotate(50deg)}100%{-webkit-transform:scale(-1, 1) rotate(-50deg)}}@-moz-keyframes counterclockwiseSpinAndFlip{0%{-moz-transform:scale(-1, 1) rotate(50deg)}100%{-moz-transform:scale(-1, 1) rotate(-50deg)}}@keyframes counterclockwiseSpinAndFlip{0%{-webkit-transform:scale(-1, 1) rotate(50deg);-moz-transform:scale(-1, 1) rotate(50deg);-ms-transform:scale(-1, 1) rotate(50deg);-o-transform:scale(-1, 1) rotate(50deg);transform:scale(-1, 1) rotate(50deg)}100%{-webkit-transform:scale(-1, 1) rotate(-50deg);-moz-transform:scale(-1, 1) rotate(-50deg);-ms-transform:scale(-1, 1) rotate(-50deg);-o-transform:scale(-1, 1) rotate(-50deg);transform:scale(-1, 1) rotate(-50deg)}}
/*# sourceMappingURL=style.css.map */