html { height: 100%; width: 100%; margin: 0 0; padding: 0 0; } body { height: 100%; width: 100%; margin: 0 0; padding: 0 0; font-family: 'HelveticaNeue-UltraLight', 'Yantramanav', sans-serif; font-size: 20px; color: #fff; background-color: #fff; } a { color: #fff; } a:hover { color: #fff; text-decoration: underline; } .stardust { background-image: url("/img/stardust.png"); background-repeat: repeat; background-size: 399px; background-position: center center; } .navIcons div { margin-top: 20px; height: 30px; background-color: clear; background-repeat: no-repeat; background-position: center center; background-size: contain; } .navIcons div:hover { opacity: 0.6; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; filter: alpha(opacity=60); } .linkedinBG { background-image: url("/img/linkedin2x.png"); } .twitterBG { background-image: url("/img/twitter2x.png"); } .githubBG { background-image: url("/img/github2x.png"); } .aurora { background: -webkit-linear-gradient(bottom, rgba(255,255,255,0.3), rgba(0,0,0,0) 100%); background: -moz-linear-gradient(bottom, rgba(255,255,255,0.3), rgba(0,0,0,0) 100%); background: -o-linear-gradient(bottom, rgba(255,255,255,0.3), rgba(0,0,0,0) 100%); background: -ms-linear-gradient(bottom, rgba(255,255,255,0.3), rgba(0,0,0,0) 100%); background: linear-gradient(to top, rgba(255,255,255,0.3), rgba(0,0,0,0) 100%); height: 40%; width: 100%; } .hidden { display: none; } .fixBottom { position: fixed; bottom: 0px; } .hundeepiece { min-height: 100%; } .content { padding-bottom: 60px; } @media (min-width: 960px) { .content { padding-bottom: 7%; } } .center { text-align: center; } .left { float: left; } .right { float: right; } .mainHeader { text-align: center; margin-bottom: 0px; } .sectionHeader { text-align: center; margin-top: 35px; } .pieces { margin-top: 30px; } .piece { margin: 10px; overflow: hidden; background-size: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; } .piece:hover { opacity: 0.7; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter: alpha(opacity=70); } .piece img { width: 100%; height: auto; visibility: hidden; } .linkedVideoLink { display: block; margin-bottom: 30px; } .linkedVideoLink:hover { opacity: 0.7; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter: alpha(opacity=70); } .magnet { background-image: url("/img/magnet.jpg"); } @media (min-width: 760px) { .magnet:hover { background-image: url("/img/magnet.gif"); opacity: 1; -ms-filter: none; filter: none; } } .swyp { background-image: url("/img/swyp.jpg"); } @media (min-width: 760px) { .swyp:hover { background-image: url("/img/swyp.gif"); opacity: 1; -ms-filter: none; filter: none; } } .mosaic { background-image: url("/img/mosaic.jpg"); } @media (min-width: 760px) { .mosaic:hover { background-image: url("/img/mosaic.gif"); opacity: 1; -ms-filter: none; filter: none; } } .checklist { background-image: url("/img/checklist.jpg"); } @media (min-width: 760px) { .checklist:hover { background-image: url("/img/checklist.gif"); opacity: 1; -ms-filter: none; filter: none; } } .dim { opacity: 0.7; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter: alpha(opacity=70); } .dim:hover { opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); } .zbs { z-index: 3; } .share { background-image: url("/img/shareBtn2x.png"); background-size: 15px; background-repeat: no-repeat; width: 15px; height: 15px; display: inline-block; margin-left: 5px; padding-left: 1px; opacity: 1; -ms-filter: none; filter: none; } .share:hover { opacity: 0.7; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter: alpha(opacity=70); } .paused { background: -webkit-linear-gradient(bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.3) 100%); background: -moz-linear-gradient(bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.3) 100%); background: -o-linear-gradient(bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.3) 100%); background: -ms-linear-gradient(bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.3) 100%); background: linear-gradient(to top, rgba(0,0,0,0.2), rgba(0,0,0,0.3) 100%); position: absolute; width: 100%; height: 100%; left: 0%; top: 0%; } .audioBox { width: 100%; margin-top: 25px; } .audioBox p { font-size: 15px; } .controlLayer { opacity: 1; -ms-filter: none; filter: none; height: 128px; position: relative; width: 100%; } .playBtn { background-image: url("/img/playBtn2x.png"); background-repeat: no-repeat; background-size: 128px; background-position: center center; position: absolute; left: 50%; top: 50%; margin-top: -64px; margin-left: -64px; width: 128px; height: 128px; opacity: 1; -ms-filter: none; filter: none; } .playBtn:hover { opacity: 0.7; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter: alpha(opacity=70); } .pauseBtn { background-image: url("/img/pauseBtn2x.png"); background-repeat: no-repeat; background-size: 50px; background-position: center center; position: absolute; right: 0%; bottom: 0%; width: 50px; height: 50px; opacity: 1; -ms-filter: none; filter: none; } .pauseBtn:hover { opacity: 0.7; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter: alpha(opacity=70); } .audio { background-color: rgba(255,255,255,0.1); width: 100%; height: 100%; } .evs { height: 500px; position: relative; background-size: 100%; background-repeat: no-repeat; background-position: center center; background-size: fill; } .evsHeader { color: #fff; background-color: #000; font-size: 36px; } .evsFooter { color: #fff; background-color: #000; position: absolute; bottom: 0; }