@charset "UTF-8";
/* Welcome to Compass.
* In this file you should write your main styles. (or centralize your imports)
* Import this file using the following HTML or equivalent:
* */
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: inherit;
font-size: 100%;
vertical-align: baseline; }
html {
line-height: 1;
}
ol, ul {
list-style: none; }
table {
border-collapse: collapse;
border-spacing: 0; }
caption, th, td {
text-align: left;
font-weight: normal;
vertical-align: middle; }
q, blockquote {
quotes: none; }
q:before, q:after, blockquote:before, blockquote:after {
content: "";
content: none; }
a img {
border: none; }
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
display: block; }
@font-face {
font-family: 'federal-mono-v2';
src: url("../fonts/federal-mono-v2.woff");
font-weight: normal;
font-style: normal; }
/* GT Haptik Lazer */
@font-face {
font-family: 'GT Haptik Lazer';
src: url("../fonts/haptik/GT-Haptik-Lazer.woff") format("truetype");
font-style: normal;
font-weight: 400; }
@font-face {
font-family: 'GT Haptik Lazer Oblique';
src: url("../fonts/haptik/GT-Haptik-Lazer-Oblique.woff") format("truetype");
font-style: normal;
font-weight: 400; }
@font-face {
font-family: 'GT Haptik Lazer Rotalic';
src: url("../fonts/haptik/GT-Haptik-Lazer-Rotalic.woff") format("truetype");
font-style: normal;
font-weight: 400; }
/* GT Haptik Thin */
@font-face {
font-family: 'GT Haptik Thin';
src: url("../fonts/haptik/GT-Haptik-Thin.woff") format("truetype");
font-style: normal;
font-weight: 400; }
@font-face {
font-family: 'GT Haptik Thin Oblique';
src: url("../fonts/haptik/GT-Haptik-Thin-Oblique.woff") format("truetype");
font-style: normal;
font-weight: 400; }
@font-face {
font-family: 'GT Haptik Thin Rotalic';
src: url("../fonts/haptik/GT-Haptik-Thin-Rotalic.woff") format("truetype");
font-style: normal;
font-weight: 400; }
/* GT Haptik Light */
@font-face {
font-family: 'GT Haptik Light';
src: url("../fonts/haptik/GT-Haptik-Light.woff") format("truetype");
font-style: normal;
font-weight: 400; }
@font-face {
font-family: 'GT Haptik Light Oblique';
src: url("../fonts/haptik/GT-Haptik-Light-Oblique.woff") format("truetype");
font-style: normal;
font-weight: 400; }
@font-face {
font-family: 'GT Haptik Light Rotalic';
src: url("../fonts/haptik/GT-Haptik-Light-Rotalic.woff") format("truetype");
font-style: normal;
font-weight: 400; }
/* GT Haptik Regular */
@font-face {
font-family: 'GT Haptik Regular';
src: url("../fonts/haptik/GT-Haptik-Regular.woff") format("truetype");
font-style: normal;
font-weight: 400; }
@font-face {
font-family: 'GT Haptik Regular Oblique';
src: url("../fonts/haptik/GT-Haptik-Regular-Oblique.woff") format("truetype");
font-style: normal;
font-weight: 400; }
@font-face {
font-family: 'GT Haptik Regular Rotalic';
src: url("../fonts/haptik/GT-Haptik-Regular-Rotalic.woff") format("truetype");
font-style: normal;
font-weight: 400; }
/* GT Haptik Medium */
@font-face {
font-family: 'GT Haptik Medium';
src: url("../fonts/haptik/GT-Haptik-Medium.woff") format("truetype");
font-style: normal;
font-weight: 400; }
@font-face {
font-family: 'GT Haptik Medium Oblique';
src: url("../fonts/haptik/GT-Haptik-Medium-Oblique.woff") format("truetype");
font-style: normal;
font-weight: 400; }
@font-face {
font-family: 'GT Haptik Medium Rotalic';
src: url("../fonts/haptik/GT-Haptik-Medium-Rotalic.woff") format("truetype");
font-style: normal;
font-weight: 400; }
/* GT Haptik Bold */
@font-face {
font-family: 'GT Haptik Bold';
src: url("../fonts/haptik/GT-Haptik-Bold.woff") format("truetype");
font-style: normal;
font-weight: 400; }
@font-face {
font-family: 'GT Haptik Bold Oblique';
src: url("../fonts/haptik/GT-Haptik-Bold-Oblique.woff") format("truetype");
font-style: normal;
font-weight: 400; }
@font-face {
font-family: 'GT Haptik Bold Rotalic';
src: url("../fonts/haptik/GT-Haptik-Bold-Rotalic.woff") format("truetype");
font-style: normal;
font-weight: 400; }
/* GT Haptik Black */
@font-face {
font-family: 'GT Haptik Black';
src: url("../fonts/haptik/GT-Haptik-Black.woff") format("truetype");
font-style: normal;
font-weight: 400; }
@font-face {
font-family: 'GT Haptik Black Oblique';
src: url("../fonts/haptik/GT-Haptik-Black-Oblique.woff") format("truetype");
font-style: normal;
font-weight: 400; }
@font-face {
font-family: 'GT Haptik Black Rotalic';
src: url("../fonts/haptik/GT-Haptik-Black-Rotalic.woff") format("truetype");
font-style: normal;
font-weight: 400; }
/* ——— COLORS, FONTS, ETC. ——— */
/* ––– BASIC STYLING ––– */
body {
font-family: 'gt haptik regular';
font-size: 20px;
background: #000000;
color: #ffffff;
-webkit-font-smoothing: antialiased;
text-align: center;
text-rendering: optimizeLegibility;
font-feature-settings: "kern" 1;
-webkit-font-feature-settings: "kern";
-moz-font-feature-settings: "kern";
-moz-font-feature-settings: "kern=1";
-webkit-font-kerning: normal;
-moz-font-kerning: normal;
font-kerning: normal; }
h1, h2, h3, h4, h5, h6, b {
font-weight: normal; }
a, a:hover, a:active, a:visited {
color: #ffffff;
underline: none; }
/* Code for kerning only
-moz-font-feature-settings:"kern" 1;
-moz-font-feature-settings:"kern=1";
-ms-font-feature-settings:"kern" 1;
-o-font-feature-settings:"kern" 1;
-webkit-font-feature-settings:"kern" 1;
font-feature-settings:"kern" 1;
*/
/* Code for Kerning & Stylistic Alternates
-moz-font-feature-settings:"kern" 1, "ss01" 1;
-moz-font-feature-settings:"kern=1, ss01=1";
-ms-font-feature-settings:"kern" 1, "ss01" 1;
-o-font-feature-settings:"kern" 1, "ss01" 1;
-webkit-font-feature-settings:"kern" 1, "ss01" 1;
font-feature-settings:"kern" 1, "ss01" 1;
*/
body.noscroll {
position: fixed;
overflow-y: scroll;
width: 100%; }
#yopleasewait {
display: block;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: 99999;
background: #000000; }
#yopic img {
display: block;
max-height: 600px;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
text-align: center; }
#yopleasewait .infotext {
display: block;
position: absolute; }
.lazer {
font-family: 'GT Haptik Lazer';
-webkit-font-smoothing: subpixel-antialiased !important; }
.thin {
font-family: 'GT Haptik Thin'; }
.light {
font-family: 'GT Haptik Light'; }
.regular {
font-family: 'GT Haptik Regular'; }
.medium {
font-family: 'GT Haptik Medium'; }
.bold {
font-family: 'GT Haptik Bold'; }
.black {
font-family: 'GT Haptik Black'; }
.lazer-oblique {
font-family: 'GT Haptik Lazer Oblique';
-webkit-font-smoothing: subpixel-antialiased !important; }
.thin-oblique {
font-family: 'GT Haptik Thin Oblique'; }
.light-oblique {
font-family: 'GT Haptik Light Oblique'; }
.regular-oblique {
font-family: 'GT Haptik Regular Oblique'; }
.medium-oblique {
font-family: 'GT Haptik Medium Oblique'; }
.bold-oblique {
font-family: 'GT Haptik Bold Oblique'; }
.black-oblique {
font-family: 'GT Haptik Black Oblique'; }
.lazer-rotalic {
font-family: 'GT Haptik Lazer Rotalic';
-webkit-font-smoothing: subpixel-antialiased !important; }
.thin-rotalic {
font-family: 'GT Haptik Thin Rotalic'; }
.light-rotalic {
font-family: 'GT Haptik Light Rotalic'; }
.regular-rotalic {
font-family: 'GT Haptik Regular Rotalic'; }
.medium-rotalic {
font-family: 'GT Haptik Medium Rotalic'; }
.bold-rotalic {
font-family: 'GT Haptik Bold Rotalic'; }
.black-rotalic {
font-family: 'GT Haptik Black Rotalic'; }
/* ––– LOADING VIEWPORT SIZED STYLESHEETS ——— */
@media only screen {
/* Welcome to Compass.
* In this file you should write your main styles. (or centralize your imports)
* Import this file using the following HTML or equivalent:
* */
/* ——— SITEWIDE ELEMENTS ——— */
body {
padding: 0;
margin: 0; }
a {
text-decoration: underline; }
a:hover {
text-decoration: none; }
.slide {
position: relative;
display: inline-block;
width: 100%; }
.slide {
position: relative;
display: inline-block;
width: 100vw; }
.onevp {
height: 100vh; } }
@media only screen and (device-width: 320px) and (device-height: 480px) and (orientation: landscape) {
.onevp {
height: 320px; } }
@media only screen and (device-width: 320px) and (device-height: 480px) and (orientation: portrait) {
.onevp {
height: 480px; } }
@media only screen and (device-width: 768px) and (device-height: 1024px) and (orientation: landscape) {
.onevp {
height: 768px; } }
@media only screen and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait) {
.onevp {
height: 1024px; } }
@media only screen and (device-width: 560px) and (device-height: 1136px) and (orientation: landscape) {
.onevp {
height: 500px; } }
@media only screen and (device-width: 560px) and (device-height: 1136px) and (orientation: portrait) {
.onevp {
height: 1136px; } }
@media only screen and (device-aspect-ratio: 16 / 9) and (orientation: landscape) {
.onevp {
height: 750px; } }
@media only screen and (device-aspect-ratio: 16 / 9) and (orientation: portrait) {
.onevp {
height: 1334px; } }
@media only screen and (device-aspect-ratio: 667 / 375) and (orientation: landscape) {
.onevp {
height: 1080px; } }
@media only screen and (device-aspect-ratio: 667 / 375) and (orientation: portrait) {
.onevp {
height: 1920px; } }
@media only screen {
.twovp {
height: 200vh; } }
@media only screen and (device-width: 320px) and (device-height: 480px) and (orientation: landscape) {
.twovp {
height: 640px; } }
@media only screen and (device-width: 320px) and (device-height: 480px) and (orientation: portrait) {
.twovp {
height: 960px; } }
@media only screen and (device-width: 768px) and (device-height: 1024px) and (orientation: landscape) {
.twovp {
height: 1536px; } }
@media only screen and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait) {
.twovp {
height: 2048px; } }
@media only screen and (device-width: 560px) and (device-height: 1136px) and (orientation: landscape) {
.twovp {
height: 1000px; } }
@media only screen and (device-width: 560px) and (device-height: 1136px) and (orientation: portrait) {
.twovp {
height: 2272px; } }
@media only screen and (device-aspect-ratio: 16 / 9) and (orientation: landscape) {
.twovp {
height: 1500px; } }
@media only screen and (device-aspect-ratio: 16 / 9) and (orientation: portrait) {
.twovp {
height: 2668px; } }
@media only screen and (device-aspect-ratio: 667 / 375) and (orientation: landscape) {
.twovp {
height: 2160px; } }
@media only screen and (device-aspect-ratio: 667 / 375) and (orientation: portrait) {
.twovp {
height: 3840px; } }
@media only screen {
.threevp {
height: 300vh; } }
@media only screen and (device-width: 320px) and (device-height: 480px) and (orientation: landscape) {
.threevp {
height: 960px; } }
@media only screen and (device-width: 320px) and (device-height: 480px) and (orientation: portrait) {
.threevp {
height: 1440px; } }
@media only screen and (device-width: 768px) and (device-height: 1024px) and (orientation: landscape) {
.threevp {
height: 2304px; } }
@media only screen and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait) {
.threevp {
height: 3072px; } }
@media only screen and (device-width: 560px) and (device-height: 1136px) and (orientation: landscape) {
.threevp {
height: 1500px; } }
@media only screen and (device-width: 560px) and (device-height: 1136px) and (orientation: portrait) {
.threevp {
height: 3408px; } }
@media only screen and (device-aspect-ratio: 16 / 9) and (orientation: landscape) {
.threevp {
height: 2250px; } }
@media only screen and (device-aspect-ratio: 16 / 9) and (orientation: portrait) {
.threevp {
height: 4002px; } }
@media only screen and (device-aspect-ratio: 667 / 375) and (orientation: landscape) {
.threevp {
height: 1080px; } }
@media only screen and (device-aspect-ratio: 667 / 375) and (orientation: portrait) {
.threevp {
height: 5760px; } }
@media only screen {
.whitebg {
background: #ffffff;
color: #000000; }
.whitebg a {
color: #000000; }
.button {
position: absolute;
height: 16px;
width: intrinsic;
top: 30px;
left: 30px;
font-family: 'gt haptik medium';
text-align: left;
font-size: 18px;
z-index: 998; }
.button a {
text-decoration: none;
color: #aaaaaa;
color: rgba(170, 170, 170, 0.3); }
.button:hover, .button:hover a {
color: #aaaaaa; }
.buybutton {
top: 60px;
left: 30px;
z-index: 997; }
.tryandbuy {
position: absolute; }
#alternatebutton {
display: block;
position: fixed;
top: 96px;
left: 30px;
border-radius: 50%;
width: 16px;
height: 16px;
background: transparent;
border: 4px solid rgba(170, 170, 170, 0.3);
text-align: center;
z-index: 999; }
#alternatebutton nav {
margin-top: 0.08em;
margin-right: 0.19em; }
#alternatebutton:hover {
width: 16px;
height: 16px;
background: transparent;
border: 4px solid #aaaaaa;
cursor: pointer;
border-radius: 50%; }
.alternatestoggle {
-moz-font-feature-settings: "kern" 1, "ss01" 1;
-moz-font-feature-settings: "kern=1, ss01=1";
-ms-font-feature-settings: "kern" 1, "ss01" 1;
-webkit-font-feature-settings: "kern" 1, "ss01" 1;
font-feature-settings: "kern" 1, "ss01" 1; }
body.alternatestoggle #alternatebutton {
background: transparent;
border: 4px solid rgba(170, 170, 170, 0.3);
border-radius: 0%; }
body.alternatestoggle #alternatebutton:hover {
background: transparent;
border: 4px solid #aaaaaa;
border-radius: 0%; }
body.alternatestoggle #slogan h2 {
-moz-font-feature-settings: "kern" 1, "ss01" 1;
-moz-font-feature-settings: "kern=1, ss01=1";
-ms-font-feature-settings: "kern" 1, "ss01" 1;
-webkit-font-feature-settings: "kern" 1, "ss01" 1;
font-feature-settings: "kern" 1, "ss01" 1; }
.infotext {
position: absolute;
bottom: 30px;
left: 2%;
right: 2%;
width: 96%;
float: center; }
.infotext p {
margin-bottom: 25px;
font-size: 19.2px;
line-height: 26.4px; }
/* ——— SPECIFIC SECTION ——— */
/* TITLE SECTION */
#slogan {
height: 320px;
margin: auto;
position: absolute;
top: -45%;
left: 0;
bottom: 0;
right: 0;
text-align: center; }
#slogan h2 {
font-family: 'GT Haptik Medium';
font-size: 60px;
text-transform: uppercase;
word-break: break-all; }
#fontnametitle {
display: block;
margin-top: 6px;
font-size: 24px;
clear: both; }
#introtext {
bottom: auto;
top: 38%; }
#yoflag {
height: 180px;
background-image: url("../images/flag.gif");
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
margin: auto;
position: absolute;
top: 800px;
left: 0;
bottom: 0;
right: 0;
text-align: center; }
/* FAMILY SWITCHER SECTION */
#familyswitcher {
position: relative;
width: 100%;
height: 100vh;
margin: auto;
position: absolute;
top: 72px;
left: 0;
bottom: 0;
right: 0;
text-align: center;
font-family: 'GT Haptik Regular'; } }
@media only screen and (device-width: 320px) and (device-height: 480px) and (orientation: landscape) {
#familyswitcher {
height: 320px; } }
@media only screen and (device-width: 320px) and (device-height: 480px) and (orientation: portrait) {
#familyswitcher {
height: 480px; } }
@media only screen and (device-width: 768px) and (device-height: 1024px) and (orientation: landscape) {
#familyswitcher {
height: 768px; } }
@media only screen and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait) {
#familyswitcher {
height: 1024px; } }
@media only screen and (device-width: 560px) and (device-height: 1136px) and (orientation: landscape) {
#familyswitcher {
height: 500px; } }
@media only screen and (device-width: 560px) and (device-height: 1136px) and (orientation: portrait) {
#familyswitcher {
height: 1136px; } }
@media only screen and (device-aspect-ratio: 16 / 9) and (orientation: landscape) {
#familyswitcher {
height: 750px; } }
@media only screen and (device-aspect-ratio: 16 / 9) and (orientation: portrait) {
#familyswitcher {
height: 1334px; } }
@media only screen and (device-aspect-ratio: 667 / 375) and (orientation: landscape) {
#familyswitcher {
height: 1080px; } }
@media only screen and (device-aspect-ratio: 667 / 375) and (orientation: portrait) {
#familyswitcher {
height: 1920px; } }
@media only screen {
.stylechooser {
position: absolute;
display: inline-block;
top: -5px;
height: 100vh;
width: 14%;
color: transparent; } }
@media only screen and (device-width: 320px) and (device-height: 480px) and (orientation: landscape) {
.stylechooser {
height: 320px; } }
@media only screen and (device-width: 320px) and (device-height: 480px) and (orientation: portrait) {
.stylechooser {
height: 480px; } }
@media only screen and (device-width: 768px) and (device-height: 1024px) and (orientation: landscape) {
.stylechooser {
height: 768px; } }
@media only screen and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait) {
.stylechooser {
height: 1024px; } }
@media only screen and (device-width: 560px) and (device-height: 1136px) and (orientation: landscape) {
.stylechooser {
height: 500px; } }
@media only screen and (device-width: 560px) and (device-height: 1136px) and (orientation: portrait) {
.stylechooser {
height: 1136px; } }
@media only screen and (device-aspect-ratio: 16 / 9) and (orientation: landscape) {
.stylechooser {
height: 750px; } }
@media only screen and (device-aspect-ratio: 16 / 9) and (orientation: portrait) {
.stylechooser {
height: 1334px; } }
@media only screen and (device-aspect-ratio: 667 / 375) and (orientation: landscape) {
.stylechooser {
height: 1080px; } }
@media only screen and (device-aspect-ratio: 667 / 375) and (orientation: portrait) {
.stylechooser {
height: 1920px; } }
@media only screen {
.stylechooser:hover {
color: #ffffff; }
.dotcontainer {
display: block;
position: absolute;
font-size: 40px;
width: 100%;
text-align: center;
bottom: 30px; }
.stylename {
font-size: 24px; }
.whitebg .stylechooser:hover .dotcontainer {
color: #000000; }
.familysamples {
top: 20%;
display: block;
font-size: 58px;
padding-bottom: 15px;
bottom: 20%; }
#a0014 {
left: 0; }
#a0014:hover ~ .familysamples {
font-family: 'GT Haptik Lazer';
-webkit-font-smoothing: subpixel-antialiased !important; }
#a1428 {
left: 14%; }
#a1428:hover ~ .familysamples {
font-family: 'GT Haptik Thin'; }
#a2842 {
left: 28%; }
#a2842:hover ~ .familysamples {
font-family: 'GT Haptik Light'; }
#a4257 {
left: 42%; }
#a4257:hover ~ .familysamples {
font-family: 'GT Haptik Regular'; }
#a5771 {
left: 56%; }
#a5771:hover ~ .familysamples {
font-family: 'GT Haptik Medium'; }
#a7186 {
left: 70%; }
#a7186:hover ~ .familysamples {
font-family: 'GT Haptik Bold'; }
#a8600 {
left: 84%;
width: 16%;
margin-left: -8px; }
#a8600:hover ~ .familysamples {
font-family: 'GT Haptik Black'; }
#familyoverview {
height: 550px; }
#linesoftype {
width: 100%;
height: 300px;
padding-bottom: 40px;
margin: auto;
display: block;
position: absolute;
top: 50px;
left: 0;
bottom: 0;
right: 0;
text-align: center;
z-index: 500; }
.lineoftype {
font-size: 30px;
line-height: 41px; }
#lineoflazer {
font-family: 'gt haptik lazer'; }
#lineofthin {
font-family: 'gt haptik thin'; }
#lineoflight {
font-family: 'gt haptik light'; }
#lineofregular {
font-family: 'gt haptik regular'; }
#lineofmedium {
font-family: 'gt haptik medium'; }
#lineofbold {
font-family: 'gt haptik bold'; }
#lineofblack {
font-family: 'gt haptik black'; }
.dstylechooser {
position: absolute;
display: inline-block;
height: 100vh;
width: 33vw;
color: transparent;
top: -80px; } }
@media only screen and (device-width: 320px) and (device-height: 480px) and (orientation: landscape) {
.dstylechooser {
height: 320px; } }
@media only screen and (device-width: 320px) and (device-height: 480px) and (orientation: portrait) {
.dstylechooser {
height: 480px; } }
@media only screen and (device-width: 768px) and (device-height: 1024px) and (orientation: landscape) {
.dstylechooser {
height: 768px; } }
@media only screen and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait) {
.dstylechooser {
height: 1024px; } }
@media only screen and (device-width: 560px) and (device-height: 1136px) and (orientation: landscape) {
.dstylechooser {
height: 500px; } }
@media only screen and (device-width: 560px) and (device-height: 1136px) and (orientation: portrait) {
.dstylechooser {
height: 1136px; } }
@media only screen and (device-aspect-ratio: 16 / 9) and (orientation: landscape) {
.dstylechooser {
height: 750px; } }
@media only screen and (device-aspect-ratio: 16 / 9) and (orientation: portrait) {
.dstylechooser {
height: 1334px; } }
@media only screen and (device-aspect-ratio: 667 / 375) and (orientation: landscape) {
.dstylechooser {
height: 1080px; } }
@media only screen and (device-aspect-ratio: 667 / 375) and (orientation: portrait) {
.dstylechooser {
height: 1920px; } }
@media only screen {
.dstylechooser:hover {
color: #ffffff; }
.ddotcontainer {
display: block;
position: absolute;
font-size: 36px;
width: 33vw;
text-align: center; }
.dstylename {
font-size: 24px;
margin-bottom: -80px; }
.lineofsample {
display: block; }
#d0033 {
left: 0; }
#d3366 {
left: 33%; }
#d3366:hover ~ #lineoflazer {
font-family: 'GT Haptik Lazer Oblique'; }
#d3366:hover ~ #lineofthin {
font-family: 'GT Haptik Thin Oblique'; }
#d3366:hover ~ #lineoflight {
font-family: 'GT Haptik Light Oblique'; }
#d3366:hover ~ #lineofregular {
font-family: 'GT Haptik Regular Oblique'; }
#d3366:hover ~ #lineofmedium {
font-family: 'GT Haptik Medium Oblique'; }
#d3366:hover ~ #lineofbold {
font-family: 'GT Haptik Bold Oblique'; }
#d3366:hover ~ #lineofblack {
font-family: 'GT Haptik Black Oblique'; }
#d6600 {
left: 66%;
width: 34%; }
#d6600:hover ~ #lineoflazer {
font-family: 'GT Haptik Lazer Rotalic'; }
#d6600:hover ~ #lineofthin {
font-family: 'GT Haptik Thin Rotalic'; }
#d6600:hover ~ #lineoflight {
font-family: 'GT Haptik Light Rotalic'; }
#d6600:hover ~ #lineofregular {
font-family: 'GT Haptik Regular Rotalic'; }
#d6600:hover ~ #lineofmedium {
font-family: 'GT Haptik Medium Rotalic'; }
#d6600:hover ~ #lineofbold {
font-family: 'GT Haptik Bold Rotalic'; }
#d6600:hover ~ #lineofblack {
font-family: 'GT Haptik Black Rotalic'; }
#measurementgrids {
height: 650px; }
#measurements {
width: 320px;
margin: auto;
position: absolute;
top: 50px;
left: 0;
bottom: 0;
right: 0;
text-align: center; }
.measurepic {
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
width: 320px;
height: 200px; }
#haptik-KO {
background-image: url(../images/measurements/haptik-measurements-KO.svg); }
#haptik-ait {
background-image: url(../images/measurements/haptik-measurements-ait.svg); }
#designstory {
height: 1000px; }
#story .dstylechooser {
position: absolute;
display: inline-block;
height: 100vh;
width: 15vw;
color: transparent;
top: -80px; } }
@media only screen and (device-width: 320px) and (device-height: 480px) and (orientation: landscape) {
#story .dstylechooser {
height: 320px; } }
@media only screen and (device-width: 320px) and (device-height: 480px) and (orientation: portrait) {
#story .dstylechooser {
height: 480px; } }
@media only screen and (device-width: 768px) and (device-height: 1024px) and (orientation: landscape) {
#story .dstylechooser {
height: 768px; } }
@media only screen and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait) {
#story .dstylechooser {
height: 1024px; } }
@media only screen and (device-width: 560px) and (device-height: 1136px) and (orientation: landscape) {
#story .dstylechooser {
height: 500px; } }
@media only screen and (device-width: 560px) and (device-height: 1136px) and (orientation: portrait) {
#story .dstylechooser {
height: 1136px; } }
@media only screen and (device-aspect-ratio: 16 / 9) and (orientation: landscape) {
#story .dstylechooser {
height: 750px; } }
@media only screen and (device-aspect-ratio: 16 / 9) and (orientation: portrait) {
#story .dstylechooser {
height: 1334px; } }
@media only screen and (device-aspect-ratio: 667 / 375) and (orientation: landscape) {
#story .dstylechooser {
height: 1080px; } }
@media only screen and (device-aspect-ratio: 667 / 375) and (orientation: portrait) {
#story .dstylechooser {
height: 1920px; } }
@media only screen {
#story .dstylechooser:hover {
color: #ffffff; }
#story div.dotcontainer {
height: 1200px;
top: -38px;
font-size: 24px; }
#story .dstylename {
display: none;
font-size: 24px;
margin-bottom: -80px; }
#story {
width: 100vw;
height: 77vh;
margin: auto;
position: absolute;
top: -500px;
left: 0;
bottom: 0;
right: 0;
text-align: center;
font-size: 19.2px;
line-height: 25.2px;
padding-bottom: 0.7vh;
letter-spacing: 0.01em; }
#storyintro {
width: 80vw;
margin: 0 auto; }
#storyuc {
width: 80vw;
margin: 0 auto; }
#storylc {
width: 80vw;
margin: 0 auto; }
#b0014 {
left: 0vw; }
#b0014:hover ~ .storytime {
font-family: 'GT Haptik Lazer';
-webkit-font-smoothing: subpixel-antialiased !important; }
#b1428 {
left: 14vw; }
#b1428:hover ~ .storytime {
font-family: 'GT Haptik Thin'; }
#b2842 {
left: 28vw; }
#b2842:hover ~ .storytime {
font-family: 'GT Haptik Light'; }
#b4257 {
left: 42vw; }
#b4257:hover ~ .storytime {
font-family: 'GT Haptik Regular'; }
#b5771 {
left: 56vw; }
#b5771:hover ~ .storytime {
font-family: 'GT Haptik Medium'; }
#b7186 {
left: 70vw; }
#b7186:hover ~ .storytime {
font-family: 'GT Haptik Bold'; }
#b8600 {
left: 84vw;
width: 16vw; }
#b8600:hover ~ .storytime {
font-family: 'GT Haptik Black'; }
#heart {
position: relative;
display: inline-block; }
#heartimg img {
max-width: 90%;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
text-align: center; }
#fingers {
height: 640px; }
#fingeranims {
width: 88%;
margin: auto;
position: absolute;
top: 50px;
left: 0;
bottom: 0;
right: 0;
text-align: center; }
#fingeranims img {
width: 80%;
padding-left: 0.5%;
padding-right: 0.5%;
margin-bottom: 25px; }
#links {
position: relative;
width: 100%;
height: 400px;
background-color: #000000;
background-position: top center;
background-repeat: no-repeat;
background-size: 175px;
margin: 75px auto;
text-align: center;
background-image: url(../images/hands/thumbsup.jpg); }
#linklist {
position: relative;
width: 80%;
height: 275px;
text-align: center;
position: absolute;
top: 300px;
left: 10%;
bottom: 0;
right: 0;
text-align: center; }
#specimenlink {
margin-right: -10px; }
/* Link Buttons */
.linkbutton {
margin: 0;
width: 80%;
height: 40px;
display: inline-block;
border: #ffffff 1px solid;
padding: 14px 0 0 0;
color: #ffffff;
margin: 10px; }
.linkbutton:hover {
background: #ffffff;
border: #ffffff 1px solid;
color: #000000; }
.buttonhref {
margin: 20px 20px 20px 20px;
float: none;
text-decoration: none;
font-size: 24px;
line-height: 24px; }
.safari .hideyourkids,
.safari div#alternatebutton.hideyourkids {
display: none; }
.safari .hidealternate {
display: none; } }
@media screen and (device-aspect-ratio: 16 / 9) and (orientation: portrait) {
#slogan {
height: 320px;
margin: auto;
position: absolute;
top: -50%;
left: 0;
bottom: 0;
right: 0;
text-align: center; }
#slogan h2 {
font-family: 'GT Haptik Medium';
font-size: 72px;
text-transform: uppercase;
word-break: break-all; }
#fontnametitle {
display: block;
margin-top: 12px;
font-size: 36px;
clear: both; }
#introtext {
bottom: auto;
top: 39.25%; }
#fingers {
height: 1000px; }
#fingeranims {
width: 1000px; }
#yoflag {
height: 180px;
top: 915px;
left: 0;
bottom: 0;
right: 0; } }
@media only screen and (min-width: 768px) {
/* ——— SITEWIDE ELEMENTS ——— */
.infotext p {
margin-bottom: 25px;
font-size: 24px;
line-height: 30px; }
#intro {
height: 1600px; }
#slogan {
height: 400px;
margin: auto;
position: absolute;
top: -60%;
left: 0;
bottom: 0;
right: 0;
text-align: center; }
#slogan h2 {
font-family: 'GT Haptik Medium';
font-size: 120px;
text-transform: uppercase;
word-break: break-all; }
#fontnametitle {
display: block;
margin-top: 14px;
font-size: 44px;
clear: both; }
#yoflag {
height: 400px;
top: 800px;
left: 0;
bottom: 0;
right: 0; }
.dotcontainer {
bottom: 100px; }
/* FAMILY SWITCHER SECTION */
.familysamples {
display: block;
font-size: 110px;
padding-top: 12px; }
#familyoverview {
height: 100vh; } }
@media only screen and (min-width: 768px) and (device-width: 320px) and (device-height: 480px) and (orientation: landscape) {
#familyoverview {
height: 320px; } }
@media only screen and (min-width: 768px) and (device-width: 320px) and (device-height: 480px) and (orientation: portrait) {
#familyoverview {
height: 480px; } }
@media only screen and (min-width: 768px) and (device-width: 768px) and (device-height: 1024px) and (orientation: landscape) {
#familyoverview {
height: 768px; } }
@media only screen and (min-width: 768px) and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait) {
#familyoverview {
height: 1024px; } }
@media only screen and (min-width: 768px) and (device-width: 560px) and (device-height: 1136px) and (orientation: landscape) {
#familyoverview {
height: 500px; } }
@media only screen and (min-width: 768px) and (device-width: 560px) and (device-height: 1136px) and (orientation: portrait) {
#familyoverview {
height: 1136px; } }
@media only screen and (min-width: 768px) and (device-aspect-ratio: 16 / 9) and (orientation: landscape) {
#familyoverview {
height: 750px; } }
@media only screen and (min-width: 768px) and (device-aspect-ratio: 16 / 9) and (orientation: portrait) {
#familyoverview {
height: 1334px; } }
@media only screen and (min-width: 768px) and (device-aspect-ratio: 667 / 375) and (orientation: landscape) {
#familyoverview {
height: 1080px; } }
@media only screen and (min-width: 768px) and (device-aspect-ratio: 667 / 375) and (orientation: portrait) {
#familyoverview {
height: 1920px; } }
@media only screen and (min-width: 768px) {
#linesoftype {
height: 500px;
padding-bottom: 40px;
top: -250px;
left: 0;
bottom: 0;
right: 0; }
.lineoftype {
font-size: 70px;
line-height: 110px; }
.dstylechooser {
top: -90px; }
.dstylename {
margin-bottom: -150px; }
#measurementgrids {
height: 100vh; } }
@media only screen and (min-width: 768px) and (device-width: 320px) and (device-height: 480px) and (orientation: landscape) {
#measurementgrids {
height: 320px; } }
@media only screen and (min-width: 768px) and (device-width: 320px) and (device-height: 480px) and (orientation: portrait) {
#measurementgrids {
height: 480px; } }
@media only screen and (min-width: 768px) and (device-width: 768px) and (device-height: 1024px) and (orientation: landscape) {
#measurementgrids {
height: 768px; } }
@media only screen and (min-width: 768px) and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait) {
#measurementgrids {
height: 1024px; } }
@media only screen and (min-width: 768px) and (device-width: 560px) and (device-height: 1136px) and (orientation: landscape) {
#measurementgrids {
height: 500px; } }
@media only screen and (min-width: 768px) and (device-width: 560px) and (device-height: 1136px) and (orientation: portrait) {
#measurementgrids {
height: 1136px; } }
@media only screen and (min-width: 768px) and (device-aspect-ratio: 16 / 9) and (orientation: landscape) {
#measurementgrids {
height: 750px; } }
@media only screen and (min-width: 768px) and (device-aspect-ratio: 16 / 9) and (orientation: portrait) {
#measurementgrids {
height: 1334px; } }
@media only screen and (min-width: 768px) and (device-aspect-ratio: 667 / 375) and (orientation: landscape) {
#measurementgrids {
height: 1080px; } }
@media only screen and (min-width: 768px) and (device-aspect-ratio: 667 / 375) and (orientation: portrait) {
#measurementgrids {
height: 1920px; } }
@media only screen and (min-width: 768px) {
#measurements {
width: 80vw;
margin: auto;
position: absolute;
top: 100px;
left: 0;
bottom: 0;
right: 0;
text-align: center; }
.measurepic {
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
width: 72vw;
height: 45vw; }
#designstory {
height: 1700px; }
#story div.dotcontainer {
height: 1800px;
top: -95px; }
#story {
width: 100vw;
height: 1500px;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
text-align: center;
font-size: 4.2vh;
line-height: 4.7vh;
padding-bottom: 0.7vh; }
#storyintro {
width: 80vw;
margin: 0 auto; }
#storyuc {
width: 80vw;
margin: 0 auto; }
#storylc {
width: 80vw;
margin: 0 auto; }
#heart {
position: relative;
display: inline-block; }
#heartimg img {
max-height: 600px;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
text-align: center; }
#fingers {
height: 1400px; }
#fingeranims {
width: 88vw;
height: 1200px;
margin: auto;
position: absolute;
top: 5vh;
left: 0;
bottom: 0;
right: 0;
text-align: center; }
#fingeranims img {
width: 70vw;
padding-left: 0.5vw;
padding-right: 0.5vw;
margin-bottom: 5vh; }
/*
#geometricalbeauty h2 {
font-size: 9.5vw;
word-break: normal;
}
.familysamples {
font-size:8vh;
line-height:13vh;
}
/*
body {
// padding:50px;
}
// Sections
.halfwidth {
float:left;
max-width:47%;
margin-right:3%;
}
/* ——— HEADER ——— */
/*
body {
padding:40px;
max-width:80%;
margin:0 auto;
}
#mainNav {
h1 {
float:left;
display:inline;
}
ul, ul li {
display:inline;
}
li {
margin-right:20px;
}
li.active {
border-bottom:1px solid $black;
}
ul#mainNavStructure {
}
ul#mainNavSettings {
float:right;
li {
margin-right:0;
}
}
}*/ }
@media only screen and (min-width: 1025px) {
/* ——— SITEWIDE ELEMENTS ——— */
.infotext {
left: 25%;
right: 25%;
width: 50%; }
.infotext p {
font-size: 24px;
line-height: 30px; }
.tryandbuy {
position: fixed; }
.portraitonly {
display: none; }
.showtouch {
display: none; }
/* ——— SPECIFIC SECTIONS ——— */
/* INTRO SECTION */
#intro {
height: 200vh; } }
@media only screen and (min-width: 1025px) and (device-width: 320px) and (device-height: 480px) and (orientation: landscape) {
#intro {
height: 640px; } }
@media only screen and (min-width: 1025px) and (device-width: 320px) and (device-height: 480px) and (orientation: portrait) {
#intro {
height: 960px; } }
@media only screen and (min-width: 1025px) and (device-width: 768px) and (device-height: 1024px) and (orientation: landscape) {
#intro {
height: 1536px; } }
@media only screen and (min-width: 1025px) and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait) {
#intro {
height: 2048px; } }
@media only screen and (min-width: 1025px) and (device-width: 560px) and (device-height: 1136px) and (orientation: landscape) {
#intro {
height: 1000px; } }
@media only screen and (min-width: 1025px) and (device-width: 560px) and (device-height: 1136px) and (orientation: portrait) {
#intro {
height: 2272px; } }
@media only screen and (min-width: 1025px) and (device-aspect-ratio: 16 / 9) and (orientation: landscape) {
#intro {
height: 1500px; } }
@media only screen and (min-width: 1025px) and (device-aspect-ratio: 16 / 9) and (orientation: portrait) {
#intro {
height: 2668px; } }
@media only screen and (min-width: 1025px) and (device-aspect-ratio: 667 / 375) and (orientation: landscape) {
#intro {
height: 2160px; } }
@media only screen and (min-width: 1025px) and (device-aspect-ratio: 667 / 375) and (orientation: portrait) {
#intro {
height: 3840px; } }
@media only screen and (min-width: 1025px) {
#slogan {
height: 640px;
margin: auto;
position: absolute;
top: -50%;
left: 0;
bottom: 0;
right: 0;
text-align: center; }
#slogan h2 {
font-family: 'GT Haptik Medium';
font-size: 160px;
text-transform: uppercase;
outline: 0px solid transparent;
focus: 0px solid transparent;
word-break: break-all; }
#fontnametitle {
display: block;
margin-top: 12px;
font-size: 72px;
clear: both; }
#introtext {
bottom: auto;
top: 46%; }
#yoflag {
height: 340px;
top: 950px; }
.familysamples {
font-size: 28vh;
line-height: 15vh;
margin-top: 12vh; }
.dotcontainer {
bottom: 50px; }
#familyoverview {
height: 200vh; } }
@media only screen and (min-width: 1025px) and (device-width: 320px) and (device-height: 480px) and (orientation: landscape) {
#familyoverview {
height: 640px; } }
@media only screen and (min-width: 1025px) and (device-width: 320px) and (device-height: 480px) and (orientation: portrait) {
#familyoverview {
height: 960px; } }
@media only screen and (min-width: 1025px) and (device-width: 768px) and (device-height: 1024px) and (orientation: landscape) {
#familyoverview {
height: 1536px; } }
@media only screen and (min-width: 1025px) and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait) {
#familyoverview {
height: 2048px; } }
@media only screen and (min-width: 1025px) and (device-width: 560px) and (device-height: 1136px) and (orientation: landscape) {
#familyoverview {
height: 1000px; } }
@media only screen and (min-width: 1025px) and (device-width: 560px) and (device-height: 1136px) and (orientation: portrait) {
#familyoverview {
height: 2272px; } }
@media only screen and (min-width: 1025px) and (device-aspect-ratio: 16 / 9) and (orientation: landscape) {
#familyoverview {
height: 1500px; } }
@media only screen and (min-width: 1025px) and (device-aspect-ratio: 16 / 9) and (orientation: portrait) {
#familyoverview {
height: 2668px; } }
@media only screen and (min-width: 1025px) and (device-aspect-ratio: 667 / 375) and (orientation: landscape) {
#familyoverview {
height: 2160px; } }
@media only screen and (min-width: 1025px) and (device-aspect-ratio: 667 / 375) and (orientation: portrait) {
#familyoverview {
height: 3840px; } }
@media only screen and (min-width: 1025px) {
#linesoftype {
height: 850px;
padding-bottom: 40px;
top: -200px;
left: 0;
bottom: 0;
right: 0; }
.lineoftype {
font-size: 120px;
line-height: 150px; }
.dstylechooser {
height: 200vh;
top: -200px; } }
@media only screen and (min-width: 1025px) and (device-width: 320px) and (device-height: 480px) and (orientation: landscape) {
.dstylechooser {
height: 640px; } }
@media only screen and (min-width: 1025px) and (device-width: 320px) and (device-height: 480px) and (orientation: portrait) {
.dstylechooser {
height: 960px; } }
@media only screen and (min-width: 1025px) and (device-width: 768px) and (device-height: 1024px) and (orientation: landscape) {
.dstylechooser {
height: 1536px; } }
@media only screen and (min-width: 1025px) and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait) {
.dstylechooser {
height: 2048px; } }
@media only screen and (min-width: 1025px) and (device-width: 560px) and (device-height: 1136px) and (orientation: landscape) {
.dstylechooser {
height: 1000px; } }
@media only screen and (min-width: 1025px) and (device-width: 560px) and (device-height: 1136px) and (orientation: portrait) {
.dstylechooser {
height: 2272px; } }
@media only screen and (min-width: 1025px) and (device-aspect-ratio: 16 / 9) and (orientation: landscape) {
.dstylechooser {
height: 1500px; } }
@media only screen and (min-width: 1025px) and (device-aspect-ratio: 16 / 9) and (orientation: portrait) {
.dstylechooser {
height: 2668px; } }
@media only screen and (min-width: 1025px) and (device-aspect-ratio: 667 / 375) and (orientation: landscape) {
.dstylechooser {
height: 2160px; } }
@media only screen and (min-width: 1025px) and (device-aspect-ratio: 667 / 375) and (orientation: portrait) {
.dstylechooser {
height: 3840px; } }
@media only screen and (min-width: 1025px) {
.dstylename {
margin-bottom: -100px; }
#measurementgrids {
height: 200vh; } }
@media only screen and (min-width: 1025px) and (device-width: 320px) and (device-height: 480px) and (orientation: landscape) {
#measurementgrids {
height: 640px; } }
@media only screen and (min-width: 1025px) and (device-width: 320px) and (device-height: 480px) and (orientation: portrait) {
#measurementgrids {
height: 960px; } }
@media only screen and (min-width: 1025px) and (device-width: 768px) and (device-height: 1024px) and (orientation: landscape) {
#measurementgrids {
height: 1536px; } }
@media only screen and (min-width: 1025px) and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait) {
#measurementgrids {
height: 2048px; } }
@media only screen and (min-width: 1025px) and (device-width: 560px) and (device-height: 1136px) and (orientation: landscape) {
#measurementgrids {
height: 1000px; } }
@media only screen and (min-width: 1025px) and (device-width: 560px) and (device-height: 1136px) and (orientation: portrait) {
#measurementgrids {
height: 2272px; } }
@media only screen and (min-width: 1025px) and (device-aspect-ratio: 16 / 9) and (orientation: landscape) {
#measurementgrids {
height: 1500px; } }
@media only screen and (min-width: 1025px) and (device-aspect-ratio: 16 / 9) and (orientation: portrait) {
#measurementgrids {
height: 2668px; } }
@media only screen and (min-width: 1025px) and (device-aspect-ratio: 667 / 375) and (orientation: landscape) {
#measurementgrids {
height: 2160px; } }
@media only screen and (min-width: 1025px) and (device-aspect-ratio: 667 / 375) and (orientation: portrait) {
#measurementgrids {
height: 3840px; } }
@media only screen and (min-width: 1025px) {
#measurements {
width: 80vw;
margin: auto;
position: absolute;
top: 50px;
left: 0;
bottom: 0;
right: 0;
text-align: center; }
.measurepic {
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
width: 64.8vw;
height: 40.5vw; }
.feature-sets ul {
width: 100vw;
display: block; }
#features li {
margin-top: 5vh;
font-size: 13vh; }
.feature-sets {
float: left;
height: 40vh;
width: 25vw;
text-align: center; }
.feature-sets:nth-child(3n+3) {
clear: both; }
.feature-sets h3 {
float: left; }
#featureshow {
display: block;
height: 100vh;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
text-align: center; }
.dddstylechooser {
position: absolute;
display: inline-block;
top: -13vh;
height: 105vh;
width: 50vw;
color: transparent; }
.dddstylechooser:hover {
color: #000000; }
.dddotcontainer {
display: block;
position: absolute;
font-size: 5vh;
width: 50vw;
bottom: 4.5vh;
text-align: center; }
.dddstylename {
font-size: 3.1vh;
line-height: 0vh;
margin-bottom: 1.5vh; }
#featureoff {
background: transparent;
left: 0vw;
width: 50vw;
display: block; }
#featureoff:hover ~ .feature-sets {
-webkit-font-feature-settings: "calt" 0, "salt" 0, "lnum", "afrc" 0;
-moz-font-feature-settings: "salt" 0;
-moz-font-feature-settings: "salt=0";
-ms-font-feature-settings: "salt" 0;
-webkit-font-feature-settings: "salt" 0;
font-feature-settings: "salt" 0;
color: #000000; }
#featureon {
background: transparent;
left: 50vw;
width: 50vw !important;
display: block;
text-align: center; }
#featureon:hover ~ .feature-sets {
-webkit-font-feature-settings: "calt" 1, "salt" 1;
-moz-font-feature-settings: "salt" 1;
-moz-font-feature-settings: "salt=1";
-ms-font-feature-settings: "salt" 1;
-webkit-font-feature-settings: "salt" 1;
font-feature-settings: "salt" 1;
color: #000000; }
#featureon:hover ~ #feature-tnum {
font-feature-settings: 'tnum';
/* vendor-prefixes */
-moz-font-feature-settings: 'tnum=1';
-ms-font-feature-settings: 'tnum';
-webkit-font-feature-settings: 'tnum';
-o-font-feature-settings: 'tnum'; }
#featureon:hover ~ #feature-case {
font-feature-settings: "case";
/* vendor-prefixes */
-moz-font-feature-settings: "case=1";
-ms-font-feature-settings: "case";
-webkit-font-feature-settings: "case";
-o-font-feature-settings: "case"; }
#featureon:hover ~ #feature-fractions {
font-feature-settings: "frac";
/* vendor-prefixes */
-moz-font-feature-settings: 'frac=1';
-ms-font-feature-settings: "frac";
-webkit-font-feature-settings: "frac";
-o-font-feature-settings: "frac"; }
#featureon:hover ~ #feature-superscript .feature-detail {
font-feature-settings: "sups";
/* vendor-prefixes */
-moz-font-feature-settings: "sups=1";
-ms-font-feature-settings: "sups";
-webkit-font-feature-settings: "sups";
-o-font-feature-settings: "sups"; }
#featureon:hover ~ #feature-cpsp {
font-feature-settings: "cpsp";
/* vendor-prefixes */
-moz-font-feature-settings: "cpsp=1";
-ms-font-feature-settings: "cpsp";
-webkit-font-feature-settings: "cpsp";
-o-font-feature-settings: "cpsp";
-webkit-font-feature-settings: "calt" 0, "salt" 0; }
#links {
position: relative;
width: 400px;
height: 500px;
background-color: #000000;
background-position: top center;
background-repeat: no-repeat;
background-size: 250px;
margin: 100px auto;
text-align: center;
background-image: url(../images/hands/thumbsup.jpg); }
#linklist {
position: relative;
width: 100%;
height: 350px;
text-align: center;
position: absolute;
top: 425px;
left: 10%;
bottom: 0;
right: 0;
text-align: center; }
/* Link Buttons */
.linkbutton {
margin: 0;
width: 80%;
height: 40px;
display: block;
border: #ffffff 1px solid;
padding: 14px 0 0 0;
color: #ffffff; }
.linkbutton:hover {
background: #ffffff;
border: #ffffff 1px solid;
color: #000000; }
.buttonhref {
margin: 20px 20px 20px 20px;
float: none;
text-decoration: none;
font-size: 24px;
line-height: 24px; }
#designstory {
height: 100vh; } }
@media only screen and (min-width: 1025px) and (device-width: 320px) and (device-height: 480px) and (orientation: landscape) {
#designstory {
height: 320px; } }
@media only screen and (min-width: 1025px) and (device-width: 320px) and (device-height: 480px) and (orientation: portrait) {
#designstory {
height: 480px; } }
@media only screen and (min-width: 1025px) and (device-width: 768px) and (device-height: 1024px) and (orientation: landscape) {
#designstory {
height: 768px; } }
@media only screen and (min-width: 1025px) and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait) {
#designstory {
height: 1024px; } }
@media only screen and (min-width: 1025px) and (device-width: 560px) and (device-height: 1136px) and (orientation: landscape) {
#designstory {
height: 500px; } }
@media only screen and (min-width: 1025px) and (device-width: 560px) and (device-height: 1136px) and (orientation: portrait) {
#designstory {
height: 1136px; } }
@media only screen and (min-width: 1025px) and (device-aspect-ratio: 16 / 9) and (orientation: landscape) {
#designstory {
height: 750px; } }
@media only screen and (min-width: 1025px) and (device-aspect-ratio: 16 / 9) and (orientation: portrait) {
#designstory {
height: 1334px; } }
@media only screen and (min-width: 1025px) and (device-aspect-ratio: 667 / 375) and (orientation: landscape) {
#designstory {
height: 1080px; } }
@media only screen and (min-width: 1025px) and (device-aspect-ratio: 667 / 375) and (orientation: portrait) {
#designstory {
height: 1920px; } }
@media only screen and (min-width: 1025px) {
#story div.dstylechooser {
height: 100vh; } }
@media only screen and (min-width: 1025px) and (device-width: 320px) and (device-height: 480px) and (orientation: landscape) {
#story div.dstylechooser {
height: 320px; } }
@media only screen and (min-width: 1025px) and (device-width: 320px) and (device-height: 480px) and (orientation: portrait) {
#story div.dstylechooser {
height: 480px; } }
@media only screen and (min-width: 1025px) and (device-width: 768px) and (device-height: 1024px) and (orientation: landscape) {
#story div.dstylechooser {
height: 768px; } }
@media only screen and (min-width: 1025px) and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait) {
#story div.dstylechooser {
height: 1024px; } }
@media only screen and (min-width: 1025px) and (device-width: 560px) and (device-height: 1136px) and (orientation: landscape) {
#story div.dstylechooser {
height: 500px; } }
@media only screen and (min-width: 1025px) and (device-width: 560px) and (device-height: 1136px) and (orientation: portrait) {
#story div.dstylechooser {
height: 1136px; } }
@media only screen and (min-width: 1025px) and (device-aspect-ratio: 16 / 9) and (orientation: landscape) {
#story div.dstylechooser {
height: 750px; } }
@media only screen and (min-width: 1025px) and (device-aspect-ratio: 16 / 9) and (orientation: portrait) {
#story div.dstylechooser {
height: 1334px; } }
@media only screen and (min-width: 1025px) and (device-aspect-ratio: 667 / 375) and (orientation: landscape) {
#story div.dstylechooser {
height: 1080px; } }
@media only screen and (min-width: 1025px) and (device-aspect-ratio: 667 / 375) and (orientation: portrait) {
#story div.dstylechooser {
height: 1920px; } }
@media only screen and (min-width: 1025px) {
#story div.dotcontainer {
display: none; }
#story {
width: 100vw;
height: 77vh;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
text-align: center;
font-size: 4.2vh;
line-height: 4.7vh;
padding-bottom: 0.7vh; }
#storyintro {
width: 80vw;
margin: 0 auto; }
#storyuc {
width: 80vw;
margin: 0 auto; }
#storylc {
width: 80vw;
margin: 0 auto; }
#fingers {
height: 300vh; } }
@media only screen and (min-width: 1025px) and (device-width: 320px) and (device-height: 480px) and (orientation: landscape) {
#fingers {
height: 960px; } }
@media only screen and (min-width: 1025px) and (device-width: 320px) and (device-height: 480px) and (orientation: portrait) {
#fingers {
height: 1440px; } }
@media only screen and (min-width: 1025px) and (device-width: 768px) and (device-height: 1024px) and (orientation: landscape) {
#fingers {
height: 2304px; } }
@media only screen and (min-width: 1025px) and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait) {
#fingers {
height: 3072px; } }
@media only screen and (min-width: 1025px) and (device-width: 560px) and (device-height: 1136px) and (orientation: landscape) {
#fingers {
height: 1500px; } }
@media only screen and (min-width: 1025px) and (device-width: 560px) and (device-height: 1136px) and (orientation: portrait) {
#fingers {
height: 3408px; } }
@media only screen and (min-width: 1025px) and (device-aspect-ratio: 16 / 9) and (orientation: landscape) {
#fingers {
height: 2250px; } }
@media only screen and (min-width: 1025px) and (device-aspect-ratio: 16 / 9) and (orientation: portrait) {
#fingers {
height: 4002px; } }
@media only screen and (min-width: 1025px) and (device-aspect-ratio: 667 / 375) and (orientation: landscape) {
#fingers {
height: 1080px; } }
@media only screen and (min-width: 1025px) and (device-aspect-ratio: 667 / 375) and (orientation: portrait) {
#fingers {
height: 5760px; } }
@media only screen and (min-width: 1025px) {
#fingeranims {
width: 88vw;
height: 255vh;
margin: auto;
position: absolute;
top: 5vh;
left: 0;
bottom: 0;
right: 0;
text-align: center; } }