@import url('https://fonts.googleapis.com/css?family=Anton|Anonymous+Pro:400,700');

html,
body,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
body,
body div,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
figure,
footer,
header,
menu,
nav,
section,
time,
mark,
audio,
video,
details,
span,
summary {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 80%;
    vertical-align: baseline;
    background: transparent;
}

/*body,*/
/*body,
.portal-wrap {
  background-color: white !important; 
}*/

/* consider resetting the default cursor: https://gist.github.com/murtaugh/5247154 */
article,
aside,
figure,
footer,
header,
nav,
section,
details,
summary {
    display: block;
}

/* Responsive images and other embedded objects
   Note: keeping IMG here will cause problems if you're using foreground images as sprites.
   If this default setting for images is causing issues, you might want to replace it with a .responsive class instead. */
img,
object,
embed {
    max-width: 100%;
}

/* force a vertical scrollbar to prevent a jumpy page */
html {
    overflow-y: scroll;
}

/* we use a lot of ULs that aren't bulleted. 
  don't forget to restore the bullets within content. */
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

del {
    text-decoration: line-through;
}

abbr[title],
dfn[title] {
    border-bottom: 1px dotted #000;
    cursor: help;
}

/* tables still need cellspacing="0" in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

th {
    font-weight: bold;
    vertical-align: bottom;
}

td {
    font-weight: normal;
    vertical-align: top;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

input,
select {
    vertical-align: middle;
}

pre {
    white-space: pre;
    /* CSS2 */

    white-space: pre-wrap;
    /* CSS 2.1 */

    white-space: pre-line;
    /* CSS 3 (and 2.1 as well, actually) */

    word-wrap: break-word;
    /* IE */

}

input[type="radio"] {
    vertical-align: text-bottom;
}

input[type="checkbox"] {
    vertical-align: bottom;
}

.ie7 input[type="checkbox"] {
    vertical-align: baseline;
}

.ie6 input {
    vertical-align: text-bottom;
}

select,
input,
textarea {
    font: 99% sans-serif;
}

table {
    font-size: inherit;
    font: 100%;
}

small {
    font-size: 85%;
}

strong {
    font-weight: bold;
}

td,
td img {
    vertical-align: top;
}

/* Make sure sup and sub don't screw with your line-heights
  gist.github.com/413930 */
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

/* standardize any monospaced elements */
pre,
code,
kbd,
samp {
    font-family: monospace, sans-serif;
}

/* hand cursor on clickable elements */
.clickable,
label,
input[type=button],
input[type=submit],
input[type=file],
button {
    cursor: pointer;
}

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button,
input,
select,
textarea {
    margin: 0;
}

/* make buttons play nice in IE */
button,
input[type=button] {
    width: auto;
    overflow: visible;
}

/* scale images in IE7 more attractively */
.ie7 img {
    -ms-interpolation-mode: bicubic;
}

/* prevent BG image flicker upon hover 
   (commented out as usage is rare, and the filter syntax messes with some pre-processors)
.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}
*/
/* let's clear some floats */
.clearfix:before,
.clearfix:after {
    content: "\0020";
    display: block;
    height: 0;
    overflow: hidden;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    zoom: 1;
}

/* Global */
* {
    box-sizing: border-box;
}

.chromeframe {
    position: absolute;
    top: 0;
}

/* Colors */
/* Mixins */
.edgeTOedge {
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}

.fixedFull {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

/* Global */
html {
    overflow: hidden;
    /* think about this... */
}

html.scroll {
    overflow-y: auto;
}

body {
    background-color: white;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

a:focus {
    outline: none;
}

.home-wrap {
    position: fixed;
    /*  display: inline-table;*/
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
}

.portal-wrap {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 3000;
    display: none;
    opacity: 0;
    -webkit-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
}

.portal-wrap.reveal {
    display: flex;
    opacity: 1;
}

.portal-wrap.fade-out {
    opacity: 0;
}

.portal-wrap iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: white;
}

.about-main {
    justify-content: center;
}

.about-project-left {
    float: left;
    width: calc(100%/3);
    min-height: 100%;
    overflow: auto;
    /*background-color: #ef497b;*/
    position: relative;
}

.project-right {
    float: left;
    width: calc(100%*2/3);
    min-height: 100%;
    overflow-y: scroll !important;
}

/*.about-right, .about-left {
    width:50%;
}*/

.about-right {
    width: 60%;
    padding: 40px;
    text-align: center;
}


.title-wrap a {
    text-decoration: none;
    margin: 10px;
    color: white;
}

.about-text {
    padding: 20px;
    top: 15%;
    width: 100%;
    height: auto;
    background-color: #999999;
    position: absolute;
    background: transparent;
}

.project-content {
    padding: 20px;
    display: inline-block;
    /*    position: sticky;*/
    clear: both;
    width: 100%;
    /*height: 100%;*/

}

.full-content-container,
.vertical-left,
.vertical-right,
.container-iframe-outer {
    padding: 20px;
    width: 100%;

}

.about-me {
    padding: 40px;
    width: 100%;
}

.about-me-text {
    /*padding: 40px;*/
    width: 60%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    /*border-bottom: 10pt solid black;*/
}

.center {
    text-align: center;
}


.st0 {
    opacity: 0.7;
    fill: #3AC6F4;
}

.st1 {
    fill: white;
}

.st2 {
    fill: black;
    /*stroke: #FFFFFF;
    stroke-width: 6.4054;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10;*/
}

.st3 {
    fill: none;
    stroke: white;
    stroke-width: 7;
    stroke-linejoin: round;
    stroke-miterlimit: 10;
}

#underline {
    position: relative;
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    -webkit-animation: uline 2.5s linear forwards;
    animation: uline 2.5s linear forwards;
}

@-webkit-keyframes uline {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes uline {
    to {
        stroke-dashoffset: 0;
    }
}

.logo-scale {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*z-index: -1;*/
}

.about-right {
    display: flex;
    max-height: fit-content;
    align-self: center;
    justify-content: center;
    /*    position: absolute;
    top: 10%;
    left: 50%;*/
    /*border-bottom: 10pt solid black;*/
}

.logo-scale svg {
    width: 100%;
    max-height: 80%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*animation: thump 1.0s 1000 linear*/
}

/**/

.about-text p,
p {
    font-family: 'Anonymous Pro', monospace;
    font-size: 18pt;
}

p.small {
    font-size: calc(1.4vw)
}

.about-me-text h1 {
    text-align: center;
}

.caption {
    font-weight: 700;
}

.vertical-left img {
    width: 50%;
    height: auto;
    float: left;
}

.vertical-left p {
    width: 100%;
    float: left;
    padding-bottom: 10px;
    /*border-bottom: 10pt solid #ef497b;*/

}

.p-container-left {
    display: inline-block;
    width: 50%;
    padding-left: 20px;
}

.p-container-right {
    display: inline-block;
    width: 50%;
    padding-right: 20px;
}


mark {
    font-family: 'Anton', sans-serif;
    /*  font-weight: 300;*/
    text-transform: uppercase;
    font-size: 3vw;
}


.vertical-right img {
    width: 50%;
    height: auto;
    float: right;
}

.vertical-right p {
    padding-right: 20px;
    width: 100%;
    float: right;
    padding-bottom: 10px;
    /*border-bottom: 10pt solid #ef497b;*/
}

.full-content-container {
    clear: both;
    position: relative;
    z-index: 0;
}

.full-content-container img {
    width: 100%;
    vertical-align: bottom;
}

.full-content p {
    padding: 20px;
    color: white;
}

.full-content-title {
    width: 100%;
    /*background-color: #ef497b;*/
    /*position: absolute;
    height: 15%;*/
    /*bottom: 0;*/
    /*    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;*/
    padding: 10px;
    z-index: 20;
}

/*.full-content-title:hover {
    opacity: 0;
}*/

.vertical-left {
    float: left;
}

.vertical-right {
    float: right;
}

h1 {
    font-family: 'Anton', sans-serif;
    text-transform: uppercase;
    font-size: calc(8.2vw*.8);
    font-weight: normal;
    line-height: 1;
    margin-top: calc((1 - 1) * 0.5em);
}

.about-text h1 {
    color: white;
}

h1.black {
    color: black;
}

h1.white {
    color: white;
}


.container-iframe {
    overflow: hidden;
    padding-top: 56.25%;
    position: relative;
    /*margin: 20px;*/
}

.container-iframe iframe {
    border: 0;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}


.preloader {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 5000;
    background-color: black;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.preloader.charms {
    background-color: #f0aead;
}

.preloader.store {
    background-color: #008af6;
}

.preloader.videos {
    background-color: #00b87c;
}

.preloader.rhymes {
    background-color: #ff005c;
}

.preloader.commercials {
    background-color: #f2fe68;
}

.preloader.contact {
    background-color: #ff6ccf;
}

.preloader .preloader-wrap {
    position: absolute;
    width: 66.666666%;
    height: 100%;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
}

@media screen and (orientation: portrait) {
    .preloader .preloader-wrap {
        width: 100%;
        height: 66.666666%;
    }
}


#og {
    -webkit-animation: thump 1.0s infinite linear;
    animation: thump 1.0s infinite linear;
    font-size: 120px;
}

#og::before {
    height: 32px;
    width: 32px;
    background-image: url(https://s3.amazonaws.com/geletina-images/new-logo.svg);
}

.preloader img {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    height: 60%;
    width: auto;
    -webkit-animation: thump 1.0s infinite linear;
    animation: thump 1.0s infinite linear;
}

.preloader img.hideMe {
    display: none !important;
}

.thump {
    -webkit-animation: thump 1.0s infinite linear;
    animation: thump 1.0s infinite linear;
}

@-webkit-keyframes thump {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes thump {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.back {
    z-index: 8000;
    position: fixed;
    top: 0;
    padding-top: 40px;
    left: 0;
    padding-left: 20px;
    font-smoothing: antialiased;
    text-decoration: none;
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: transform 0.3s ease;
}

.back svg {
    width: 40px;
}


#white {
    fill: white;
}


.back.hider {
    -webkit-transform: translateX(-100px);
    -ms-transform: translateX(-100px);
    transform: translateX(-100px);
}

.back.black {
    color: black;
}

.close {
    position: fixed;
    top: 10px;
    right: 24px;
    z-index: 5000;
    cursor: pointer;
    font-family: arial;
    font-size: 50px;
    color: black;
    background-color: transparent;
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: transform 0.3s ease;
}

.close.no-animate {
    -webkit-transition: none 0.0s linear;
    transition: none 0.0s linear;
}

.close.hider {
    -webkit-transform: translateX(100px);
    -ms-transform: translateX(100px);
    transform: translateX(100px);
}

.close.white {
    color: white;
    font-smoothing: antialiased;
}

.portals {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.portals.top-left {
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
}

.portals.top-center {
    -webkit-transform-origin: top center;
    -ms-transform-origin: top center;
    transform-origin: top center;
}

.portals.top-right {
    -webkit-transform-origin: top right;
    -ms-transform-origin: top right;
    transform-origin: top right;
}

.portals.bottom-left {
    -webkit-transform-origin: bottom left;
    -ms-transform-origin: bottom left;
    transform-origin: bottom left;
}

.portals.bottom-center {
    -webkit-transform-origin: bottom center;
    -ms-transform-origin: bottom center;
    transform-origin: bottom center;
}

.portals.bottom-right {
    -webkit-transform-origin: bottom right;
    -ms-transform-origin: bottom right;
    transform-origin: bottom right;
}

.portals.center-left {
    -webkit-transform-origin: center left;
    -ms-transform-origin: center left;
    transform-origin: center left;
}

.portals.center-right {
    -webkit-transform-origin: center right;
    -ms-transform-origin: center right;
    transform-origin: center right;
}

.portals section {
    position: relative;
    float: left;
    display: block;
    width: calc(100%/3);
    height: 50%;
}

@media screen and (orientation: portrait) {
    .portals section {
        width: 50%;
        height: 34%;
    }
}

.portals-type {
    z-index: 8;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/*#hardware {
  
}*/

.portals-type .hardware,
.hardware-bg {
    background-color: #ef497b;
}

.hardware-border {
    border-bottom: 10pt solid #ef497b;
}

.portals-type .software,
.software-bg {
    background-color: #71D9B3;
    /*80F7D0*/
}

.software-border {
    border-bottom: 10pt solid #71D9B3;
}

.portals-type .still-motion,
.still-motion-bg {
    background-color: #F2FE68;
}

.still-motion-border {
    border-bottom: 10pt solid #F2FE68;
}

.portals-type .materials,
.materials-bg {
    background-color: #8A92A0;
}

.materials-border {
    border-bottom: 10pt solid #8A92A0;
}

.portals-type .web-mobile,
.web-mobile-bg {
    background-color: #f0aead;
}

.web-mobile-border {
    border-bottom: 10pt solid #f0aead;
}

.portals-type .about,
.about-bg {
    background-color: #3AC6F4;
}

.about-border {
    border-bottom: 10pt solid #3AC6F4;
}

.portals-type section:nth-child(n+7) {
    background-color: black;
}

.portals-type .title {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    height: 100%;
    width: auto;
    z-index: 100;
}

@media screen and (max-aspect-ratio: 3/2) {
    .portals-type .title {
        width: 100%;
        height: auto;
    }
}

@media screen and (max-aspect-ratio: 1/1) {
    .portals-type .title {
        height: 100%;
        width: auto;
    }
}

@media screen and (max-aspect-ratio: 2/3) {
    .portals-type .title {
        width: 100%;
        height: auto;
    }
}


/*@media screen   
  and (min-device-width: 300px) 
  and (max-device-width: 375px) 
  and (orientation: portrait){
  .about-project-left {
    min-width: 100%;
    height: auto;
    clear: both;
    display: none;
  }

  .about-text{
    top: 10 %;
  }

  .project-right {
    width: 100%;
  }

  .portal-wrap {
    position: relative;
  }

  html {
    overflow-y: scroll;
  }
  
}*/


/*@media (max-device-height: 600px) {
  .about-project-left {
    min-width: 100%;
    height: auto;
    clear: both;
    display: none;
  }

  .about-text{
    top: 10 %;
  }

  .project-right {
    width: 100%;
  }

  .portal-wrap .individual {
    position: relative;
  }

  html {
    overflow-y: scroll;
  }

  .full-content-title {
    height: 30%;
  }*/

/*.project-content {
    padding: 40px 20px 20px 20px;
  }

  .full-content-container, .vertical-left, .vertical-right {
    padding-top: 20px;
  }*/

/*#back {
  color: black;
  } */

/*  p {
    font-size: 8pt;
  }
  
}
*/
@media only screen and (min-width : 601px) and (max-width : 1024px) {
    .about-me-text {
        width: 80%;
    }
}

@media screen and (max-width: 600px),
(max-height: 500px) and (orientation: landscape) {
    .about-project-left {
        min-width: 100%;
        height: auto;
        clear: both;
        display: none;
    }

    .portal-wrap.reveal {
        flex-wrap: wrap;
    }

    #about-text {
        display: none;
    }

    .about-right,
    .about-left {
        width: 100%;
        position: relative;
        /*display: inline-block;*/
        text-align: center;
        justify-content: center;

    }

    .p-container-right,
    .p-container-left,
    .vertical-right img,
    .vertical-left img {
        width: 100%;
        padding: 0px;
    }


    /*.full-content-container,
    .vertical-left,
    .vertical-right,
    .container-iframe-outer {
        padding: 20px 10px 20px 10px;

    }*/

    #og {
        font-size: 100px;
    }

    /*ul.icons {
    justify-content: center;    
    }*/


    .about-right {
        align-self: flex-end;
    }

    .logo-scale svg {
        max-height: 100%;
        top: 100%;
    }

    .project-right {
        width: 100%;
    }

    .portal-wrap .individual {
        position: relative;
    }

    html {
        overflow-y: scroll;
    }

    .full-content-title {
        height: 30%;
    }

    p {
        font-size: 13pt;
    }

    .about-me-text {
        width: 80%;
    }
}


.portals-type.zooming,
.portals-type.zoom {
    cursor: default;
}

.portals-type.zooming section:not(.active),
.portals-type.zoom section:not(.active) {
    visibility: hidden;
}

.portals-images {
    pointer-events: none;
    z-index: 10;
}

.portals-images .images {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    /*overflow: hidden;*/
    -webkit-transition: opacity 0.6s ease;
    transition: opacity 0.6s ease;
}

.portals-images .home-image {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    background-position: center center;
    background-size: cover;
}

.portals-images .home-image img {
    display: none;
}

.portals-images .hover .images,
.portals-images .active .images {
    display: none;
}

.portals-images.zoom .images {
    opacity: 0;
}

.portal-nav {
    display: none;
}

.video-projects {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    background-color: black;
    /* one item */
}

.video-projects.noHover li {
    pointer-events: none !important;
}

.video-projects li {
    display: block;
    position: relative;
    float: left;
    width: 100%;
    height: 100%;
    cursor: pointer;
    overflow: hidden;
}



.video-projects .title-wrap {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 20%;
    top: 40%;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 8.2vw;
    line-height: 8.2vw;
    color: white;
    text-transform: uppercase;
    z-index: 2;
}

.video-projects .images {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-projects [data-img], #whatever{
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    float: left;
}

.video-projects [data-video-title] {
    text-align: center;
    font-family: 'Anton', sans-serif;
    text-transform: uppercase;
}

.video-projects [data-video-title]:after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 0.95em;
    height: 0.95em;
    /*background-image: url('../img/svg/playhead.svg');*/
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
    opacity: 0;
}

.video-projects [data-video-title]:hover {
    color: rgb(0, 0, 0);
}

/*.video-projects [data-video-title]:hover:after {
  opacity: 1;
}
.video-projects [data-img]:first-child:nth-last-child(1) {
  width: 100%;
}
.video-projects [data-img]:first-child:nth-last-child(2),
.video-projects [data-img]:first-child:nth-last-child(2) ~ [data-img] {
  width: 50%;
}
.video-projects [data-img]:first-child:nth-last-child(3),
.video-projects [data-img]:first-child:nth-last-child(3) ~ [data-img] {
  width: 33.3333%;
}
.video-projects [data-img]:first-child:nth-last-child(4),
.video-projects [data-img]:first-child:nth-last-child(4) ~ [data-img] {
  width: 50%;
  height: 50%;
}
.video-projects [data-img]:first-child:nth-last-child(5),
.video-projects [data-img]:first-child:nth-last-child(5) ~ [data-img] {
  width: 20%;
}
.video-projects [data-img]:first-child:nth-last-child(6),
.video-projects [data-img]:first-child:nth-last-child(6) ~ [data-img] {
  width: 33.3333%;
  height: 50%;
}*/
.video-projects .preload {
    display: none !important;
}

.video-wrapper {
    position: fixed;
    z-index: 20;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: none;
    background-color: white;
}

.video-wrapper .video-player {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1080px;
    max-width: 90%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background-color: black;
}

.video-wrapper .video-player.black {
    background-color: black;
}

.video-wrapper .video-player:before {
    content: "";
    display: block;
    padding-top: 56.25%;
    /* 16:9 aspect ratio */

}

.video-wrapper .video-player iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.no-flash {
    position: absolute;
    width: 100%;
    font-size: 32px;
    line-height: 36px;
    color: white;
    z-index: 60;
    left: 0;
    bottom: 32px;
    text-align: center;
}

.no-flash a {
    color: white;
}

.no-flash.black {
    color: black;
}

.no-flash.black a {
    color: black;
}

.products {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    z-index: 10;
    padding: 0 70px 0 70px;
    text-align: center;
    font-size: 0;
}

.products a {
    position: relative;
    display: inline-block;
    width: 28%;
    margin-top: 48px;
    cursor: pointer;
    text-align: left;
}

.products a:nth-child(3n+2) {
    margin-right: 8%;
    margin-left: 8%;
}

.products a:before {
    content: "";
    display: block;
    padding-top: 100%;
    /* square aspect ratio */

}

.products a img {
    position: absolute;
    top: 0;
    height: auto;
}

.products .flipper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.products .flipper section {
    float: left;
    height: 100%;
}

.products #lamp .images img:first-child {
    display: block;
    opacity: 1 !important;
}

.products #lamp .images img:last-child {
    display: none;
    opacity: 0 !important;
}

.products #lamp .images.on img:first-child {
    display: none;
    opacity: 0 !important;
}

.products #lamp .images.on img:last-child {
    display: block;
    opacity: 1 !important;
}

.clouds {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    min-height: 320px;
    z-index: 0;
    overflow: hidden;
    background-color: #557CAC;
    background-size: cover;
    background-position: top left;
}

.clouds.night {
    background-color: black;
    background-image: url('./../../static/img/clouds/starfield.jpg');
}

.clouds.night .cloud {
    opacity: 0.25;
}

.clouds.night .cloud:last-child {
    opacity: 0.3;
}

.clouds .cloud {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-size: cover;
    background-position: top left;
}

.clouds .cloud.level-one {
    background-image: url(./../../static/img/clouds/cloud_1b.png);
}

.clouds .cloud.level-one.animate {
    -webkit-animation: cloudpan 460s 0s infinite linear;
    animation: cloudpan 460s 0s infinite linear;
}

.clouds .cloud.level-two {
    background-image: url(./../../static/img/clouds/cloud_1a.png);
}

.clouds .cloud.level-two.animate {
    -webkit-animation: cloudpan 300s 0s infinite linear;
    animation: cloudpan 300s 0s infinite linear;
}

.clouds .cloud:after {
    display: block;
    position: relative;
    left: 100%;
    width: 100%;
    height: 100%;
    background-size: inherit;
    background-position: inherit;
    background-image: inherit;
    content: ' ';
}

.clouds img {
    display: none;
}

@-webkit-keyframes cloudpan {
    from {
        -webkit-transform: translateX(0) translateZ(0);
        transform: translateX(0) translateZ(0);
    }

    to {
        -webkit-transform: translateX(-100%) translateZ(0);
        transform: translateX(-100%) translateZ(0);
    }
}

@keyframes cloudpan {
    from {
        -webkit-transform: translateX(0) translateZ(0);
        transform: translateX(0) translateZ(0);
    }

    to {
        -webkit-transform: translateX(-100%) translateZ(0);
        transform: translateX(-100%) translateZ(0);
    }
}

.text {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    cursor: default;
}

.text.clear {
    background: none;
}

a.animated-underline,
a.animated-underline:visited {
    color: #3731DB;
    /*#5662FF*/
    text-decoration: none;
}

a.animated-underline {
    background-image: linear-gradient(white, white);
    background-repeat: no-repeat;
    background-size: 100% 0.2em;
    background-position: 0% 0%;
    transition: background-size 0.25s ease-in;

}

a.animated-underline:hover {
    background-size: 100% 100%;
}

a {
    color: white;
    text-decoration: none;
}


.text a:hover {
    text-decoration: none;
}

.text em {
    position: relative;
    font-style: normal;
}

.text em:after {
    position: absolute;
    content: '';
    display: block;
    width: 100%;
    height: 0.08em;
    left: 0;
    bottom: 0.01em;
    background-color: white;
}

.text a:hover em:after {
    display: none;
}

.text .text-wrap {
    font-size: 3vw;
    -webkit-font-smoothing: antialiased;
    color: white;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    position: absolute;
    width: 90%;
    height: 100%;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
}

@media screen and (orientation: portrait) {
    .text .text-wrap {
        width: 100%;
        height: 66.666666%;
    }
}

.text .text-wrap p {
    margin-bottom: 2.5vw;
}


.text img {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    height: 100%;
    width: auto;
}

ul.icons {
    display: flex;
    /*align-items: center;*/
    justify-content: center;
}


ul.icons li {
    /*display: flex;*/
    /*align-items: center;*/
    /*justify-content: center;*/
    width: 40px;
    margin: 0 10px;
}

ul.icons li a {
    /*display: flex;*/
    /*align-items: center;*/
    /*justify-content: center;*/
    height: 100%;
    width: 100%;
}

ul.icons li a img.social {
    width: 100%;
    position: relative;
}

.icon {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 32px;
}

.icon.github::before {
    width: 2px;
    height: 2px;
    box-shadow: 33px 2px #333, 6px 2px #333, 8px 2px #333, 10px 2px #333, 12px 2px #333, 14px 2px #333, 16px 2px #333, 18px 2px #333, 20px 2px #333, 22px 2px #333, 24px 2px #333, 26px 2px #333, 28px 2px #333, 30px 2px #333, 2px 4px #333, 4px 4px #333, 6px 4px #333, 8px 4px #333, 10px 4px #fff, 12px 4px #333, 14px 4px #333, 16px 4px #333, 18px 4px #333, 20px 4px #333, 22px 4px #333, 24px 4px #333, 26px 4px #333, 28px 4px #fff, 30px 4px #333, 32px 4px #333, 2px 6px #333, 4px 6px #333, 6px 6px #333, 8px 6px #333, 10px 6px #fff, 12px 6px #fff, 14px 6px #333, 16px 6px #333, 18px 6px #333, 20px 6px #333, 22px 6px #333, 24px 6px #333, 26px 6px #fff, 28px 6px #fff, 30px 6px #333, 32px 6px #333, 2px 8px #333, 4px 8px #333, 6px 8px #333, 8px 8px #333, 10px 8px #fff, 12px 8px #fff, 14px 8px #fff, 16px 8px #fff, 18px 8px #fff, 20px 8px #fff, 22px 8px #fff, 24px 8px #fff, 26px 8px #fff, 28px 8px #fff, 30px 8px #333, 32px 8px #333, 2px 10px #333, 4px 10px #333, 6px 10px #333, 8px 10px #fff, 10px 10px #fff, 12px 10px #fff, 14px 10px #fff, 16px 10px #fff, 18px 10px #fff, 20px 10px #fff, 22px 10px #fff, 24px 10px #fff, 26px 10px #fff, 28px 10px #fff, 30px 10px #fff, 32px 10px #333, 2px 12px #333, 4px 12px #333, 6px 12px #333, 8px 12px #fff, 10px 12px #fff, 12px 12px #fff, 14px 12px #fff, 16px 12px #fff, 18px 12px #fff, 20px 12px #fff, 22px 12px #fff, 24px 12px #fff, 26px 12px #fff, 28px 12px #fff, 30px 12px #fff, 32px 12px #333, 2px 14px #333, 4px 14px #333, 6px 14px #333, 8px 14px #fff, 10px 14px #fff, 12px 14px #fff, 14px 14px #fff, 16px 14px #fff, 18px 14px #fff, 20px 14px #fff, 22px 14px #fff, 24px 14px #fff, 26px 14px #fff, 28px 14px #fff, 30px 14px #fff, 32px 14px #333, 2px 16px #333, 4px 16px #333, 6px 16px #333, 8px 16px #fff, 10px 16px #fff, 12px 16px #fff, 14px 16px #fff, 16px 16px #fff, 18px 16px #fff, 20px 16px #fff, 22px 16px #fff, 24px 16px #fff, 26px 16px #fff, 28px 16px #fff, 30px 16px #fff, 32px 16px #333, 2px 18px #333, 4px 18px #333, 6px 18px #333, 8px 18px #333, 10px 18px #fff, 12px 18px #fff, 14px 18px #fff, 16px 18px #fff, 18px 18px #fff, 20px 18px #fff, 22px 18px #fff, 24px 18px #fff, 26px 18px #fff, 28px 18px #fff, 30px 18px #333, 32px 18px #333, 2px 20px #333, 4px 20px #333, 6px 20px #333, 8px 20px #333, 10px 20px #333, 12px 20px #fff, 14px 20px #fff, 16px 20px #fff, 18px 20px #fff, 20px 20px #fff, 22px 20px #fff, 24px 20px #fff, 26px 20px #fff, 28px 20px #333, 30px 20px #333, 32px 20px #333, 2px 22px #333, 4px 22px #fff, 6px 22px #fff, 8px 22px #333, 10px 22px #333, 12px 22px #333, 14px 22px #333, 16px 22px #fff, 18px 22px #fff, 20px 22px #fff, 22px 22px #fff, 24px 22px #333, 26px 22px #333, 28px 22px #333, 30px 22px #333, 32px 22px #333, 2px 24px #333, 4px 24px #333, 6px 24px #333, 8px 24px #fff, 10px 24px #333, 12px 24px #333, 14px 24px #fff, 16px 24px #fff, 18px 24px #fff, 20px 24px #fff, 22px 24px #fff, 24px 24px #fff, 26px 24px #333, 28px 24px #333, 30px 24px #333, 32px 24px #333, 2px 26px #333, 4px 26px #333, 6px 26px #333, 8px 26px #333, 10px 26px #fff, 12px 26px #fff, 14px 26px #fff, 16px 26px #fff, 18px 26px #fff, 20px 26px #fff, 22px 26px #fff, 24px 26px #fff, 26px 26px #333, 28px 26px #333, 30px 26px #333, 32px 26px #333, 2px 28px #333, 4px 28px #333, 6px 28px #333, 8px 28px #333, 10px 28px #333, 12px 28px #333, 14px 28px #fff, 16px 28px #fff, 18px 28px #fff, 20px 28px #fff, 22px 28px #fff, 24px 28px #fff, 26px 28px #333, 28px 28px #333, 30px 28px #333, 32px 28px #333, 2px 30px #333, 4px 30px #333, 6px 30px #333, 8px 30px #333, 10px 30px #333, 12px 30px #333, 14px 30px #fff, 16px 30px #fff, 18px 30px #fff, 20px 30px #fff, 22px 30px #fff, 24px 30px #fff, 26px 30px #333, 28px 30px #333, 30px 30px #333, 32px 30px #333, 4px 32px #333, 6px 32px #333, 8px 32px #333, 10px 32px #333, 12px 32px #333, 14px 32px #333, 16px 32px #333, 18px 32px #333, 20px 32px #333, 22px 32px #333, 24px 32px #333, 26px 32px #333, 28px 32px #333, 30px 32px #333;
}

@-moz-document url-prefix() {
    .icon.github::before {
        -webkit-box-shadow: 4px 2px 0 0.020em #333, 6px 2px 0 0.020em #333, 8px 2px 0 0.020em #333, 10px 2px 0 0.020em #333, 12px 2px 0 0.020em #333, 14px 2px 0 0.020em #333, 16px 2px 0 0.020em #333, 18px 2px 0 0.020em #333, 20px 2px 0 0.020em #333, 22px 2px 0 0.020em #333, 24px 2px 0 0.020em #333, 26px 2px 0 0.020em #333, 28px 2px 0 0.020em #333, 30px 2px 0 0.020em #333, 2px 4px 0 0.020em #333, 4px 4px 0 0.020em #333, 6px 4px 0 0.020em #333, 8px 4px 0 0.020em #333, 10px 4px 0 0.020em #fff, 12px 4px 0 0.020em #333, 14px 4px 0 0.020em #333, 16px 4px 0 0.020em #333, 18px 4px 0 0.020em #333, 20px 4px 0 0.020em #333, 22px 4px 0 0.020em #333, 24px 4px 0 0.020em #333, 26px 4px 0 0.020em #333, 28px 4px 0 0.020em #fff, 30px 4px 0 0.020em #333, 32px 4px 0 0.020em #333, 2px 6px 0 0.020em #333, 4px 6px 0 0.020em #333, 6px 6px 0 0.020em #333, 8px 6px 0 0.020em #333, 10px 6px 0 0.020em #fff, 12px 6px 0 0.020em #fff, 14px 6px 0 0.020em #333, 16px 6px 0 0.020em #333, 18px 6px 0 0.020em #333, 20px 6px 0 0.020em #333, 22px 6px 0 0.020em #333, 24px 6px 0 0.020em #333, 26px 6px 0 0.020em #fff, 28px 6px 0 0.020em #fff, 30px 6px 0 0.020em #333, 32px 6px 0 0.020em #333, 2px 8px 0 0.020em #333, 4px 8px 0 0.020em #333, 6px 8px 0 0.020em #333, 8px 8px 0 0.020em #333, 10px 8px 0 0.020em #fff, 12px 8px 0 0.020em #fff, 14px 8px 0 0.020em #fff, 16px 8px 0 0.020em #fff, 18px 8px 0 0.020em #fff, 20px 8px 0 0.020em #fff, 22px 8px 0 0.020em #fff, 24px 8px 0 0.020em #fff, 26px 8px 0 0.020em #fff, 28px 8px 0 0.020em #fff, 30px 8px 0 0.020em #333, 32px 8px 0 0.020em #333, 2px 10px 0 0.020em #333, 4px 10px 0 0.020em #333, 6px 10px 0 0.020em #333, 8px 10px 0 0.020em #fff, 10px 10px 0 0.020em #fff, 12px 10px 0 0.020em #fff, 14px 10px 0 0.020em #fff, 16px 10px 0 0.020em #fff, 18px 10px 0 0.020em #fff, 20px 10px 0 0.020em #fff, 22px 10px 0 0.020em #fff, 24px 10px 0 0.020em #fff, 26px 10px 0 0.020em #fff, 28px 10px 0 0.020em #fff, 30px 10px 0 0.020em #fff, 32px 10px 0 0.020em #333, 2px 12px 0 0.020em #333, 4px 12px 0 0.020em #333, 6px 12px 0 0.020em #333, 8px 12px 0 0.020em #fff, 10px 12px 0 0.020em #fff, 12px 12px 0 0.020em #fff, 14px 12px 0 0.020em #fff, 16px 12px 0 0.020em #fff, 18px 12px 0 0.020em #fff, 20px 12px 0 0.020em #fff, 22px 12px 0 0.020em #fff, 24px 12px 0 0.020em #fff, 26px 12px 0 0.020em #fff, 28px 12px 0 0.020em #fff, 30px 12px 0 0.020em #fff, 32px 12px 0 0.020em #333, 2px 14px 0 0.020em #333, 4px 14px 0 0.020em #333, 6px 14px 0 0.020em #333, 8px 14px 0 0.020em #fff, 10px 14px 0 0.020em #fff, 12px 14px 0 0.020em #fff, 14px 14px 0 0.020em #fff, 16px 14px 0 0.020em #fff, 18px 14px 0 0.020em #fff, 20px 14px 0 0.020em #fff, 22px 14px 0 0.020em #fff, 24px 14px 0 0.020em #fff, 26px 14px 0 0.020em #fff, 28px 14px 0 0.020em #fff, 30px 14px 0 0.020em #fff, 32px 14px 0 0.020em #333, 2px 16px 0 0.020em #333, 4px 16px 0 0.020em #333, 6px 16px 0 0.020em #333, 8px 16px 0 0.020em #fff, 10px 16px 0 0.020em #fff, 12px 16px 0 0.020em #fff, 14px 16px 0 0.020em #fff, 16px 16px 0 0.020em #fff, 18px 16px 0 0.020em #fff, 20px 16px 0 0.020em #fff, 22px 16px 0 0.020em #fff, 24px 16px 0 0.020em #fff, 26px 16px 0 0.020em #fff, 28px 16px 0 0.020em #fff, 30px 16px 0 0.020em #fff, 32px 16px 0 0.020em #333, 2px 18px 0 0.020em #333, 4px 18px 0 0.020em #333, 6px 18px 0 0.020em #333, 8px 18px 0 0.020em #333, 10px 18px 0 0.020em #fff, 12px 18px 0 0.020em #fff, 14px 18px 0 0.020em #fff, 16px 18px 0 0.020em #fff, 18px 18px 0 0.020em #fff, 20px 18px 0 0.020em #fff, 22px 18px 0 0.020em #fff, 24px 18px 0 0.020em #fff, 26px 18px 0 0.020em #fff, 28px 18px 0 0.020em #fff, 30px 18px 0 0.020em #333, 32px 18px 0 0.020em #333, 2px 20px 0 0.020em #333, 4px 20px 0 0.020em #333, 6px 20px 0 0.020em #333, 8px 20px 0 0.020em #333, 10px 20px 0 0.020em #333, 12px 20px 0 0.020em #fff, 14px 20px 0 0.020em #fff, 16px 20px 0 0.020em #fff, 18px 20px 0 0.020em #fff, 20px 20px 0 0.020em #fff, 22px 20px 0 0.020em #fff, 24px 20px 0 0.020em #fff, 26px 20px 0 0.020em #fff, 28px 20px 0 0.020em #333, 30px 20px 0 0.020em #333, 32px 20px 0 0.020em #333, 2px 22px 0 0.020em #333, 4px 22px 0 0.020em #fff, 6px 22px 0 0.020em #fff, 8px 22px 0 0.020em #333, 10px 22px 0 0.020em #333, 12px 22px 0 0.020em #333, 14px 22px 0 0.020em #333, 16px 22px 0 0.020em #fff, 18px 22px 0 0.020em #fff, 20px 22px 0 0.020em #fff, 22px 22px 0 0.020em #fff, 24px 22px 0 0.020em #333, 26px 22px 0 0.020em #333, 28px 22px 0 0.020em #333, 30px 22px 0 0.020em #333, 32px 22px 0 0.020em #333, 2px 24px 0 0.020em #333, 4px 24px 0 0.020em #333, 6px 24px 0 0.020em #333, 8px 24px 0 0.020em #fff, 10px 24px 0 0.020em #333, 12px 24px 0 0.020em #333, 14px 24px 0 0.020em #fff, 16px 24px 0 0.020em #fff, 18px 24px 0 0.020em #fff, 20px 24px 0 0.020em #fff, 22px 24px 0 0.020em #fff, 24px 24px 0 0.020em #fff, 26px 24px 0 0.020em #333, 28px 24px 0 0.020em #333, 30px 24px 0 0.020em #333, 32px 24px 0 0.020em #333, 2px 26px 0 0.020em #333, 4px 26px 0 0.020em #333, 6px 26px 0 0.020em #333, 8px 26px 0 0.020em #333, 10px 26px 0 0.020em #fff, 12px 26px 0 0.020em #fff, 14px 26px 0 0.020em #fff, 16px 26px 0 0.020em #fff, 18px 26px 0 0.020em #fff, 20px 26px 0 0.020em #fff, 22px 26px 0 0.020em #fff, 24px 26px 0 0.020em #fff, 26px 26px 0 0.020em #333, 28px 26px 0 0.020em #333, 30px 26px 0 0.020em #333, 32px 26px 0 0.020em #333, 2px 28px 0 0.020em #333, 4px 28px 0 0.020em #333, 6px 28px 0 0.020em #333, 8px 28px 0 0.020em #333, 10px 28px 0 0.020em #333, 12px 28px 0 0.020em #333, 14px 28px 0 0.020em #fff, 16px 28px 0 0.020em #fff, 18px 28px 0 0.020em #fff, 20px 28px 0 0.020em #fff, 22px 28px 0 0.020em #fff, 24px 28px 0 0.020em #fff, 26px 28px 0 0.020em #333, 28px 28px 0 0.020em #333, 30px 28px 0 0.020em #333, 32px 28px 0 0.020em #333, 2px 30px 0 0.020em #333, 4px 30px 0 0.020em #333, 6px 30px 0 0.020em #333, 8px 30px 0 0.020em #333, 10px 30px 0 0.020em #333, 12px 30px 0 0.020em #333, 14px 30px 0 0.020em #fff, 16px 30px 0 0.020em #fff, 18px 30px 0 0.020em #fff, 20px 30px 0 0.020em #fff, 22px 30px 0 0.020em #fff, 24px 30px 0 0.020em #fff, 26px 30px 0 0.020em #333, 28px 30px 0 0.020em #333, 30px 30px 0 0.020em #333, 32px 30px 0 0.020em #333, 4px 32px 0 0.020em #333, 6px 32px 0 0.020em #333, 8px 32px 0 0.020em #333, 10px 32px 0 0.020em #333, 12px 32px 0 0.020em #333, 14px 32px 0 0.020em #333, 16px 32px 0 0.020em #333, 18px 32px 0 0.020em #333, 20px 32px 0 0.020em #333, 22px 32px 0 0.020em #333, 24px 32px 0 0.020em #333, 26px 32px 0 0.020em #333, 28px 32px 0 0.020em #333, 30px 32px 0 0.020em #333;
    }
}

footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
    /*   border-top: 10pt solid white;*/
    padding: 20px 0 20px 0;
    z-index: 1000;
}


@media screen and (max-aspect-ratio: 1/1) {
    .text img {
        width: 100%;
        height: auto;
    }
}

.text .email {
    font-size: 9vw;
    width: 100%;
    height: 200px;
    line-height: 200px;
    color: white;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    text-align: center;
    text-transform: lowercase;
    pointer-events: none;
    display: none;
}

.credit {
    font-size: 1.3vw;
    position: fixed;
    bottom: 30px;
    width: 100%;
    text-align: center;
    color: white;
}

.contact-images {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.contact-images .center-fix {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    overflow: hidden;
}

.contact-images img {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    min-height: 50%;
    min-width: 50%;
}

.commercial-projects .commercial-logo {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    height: 3em;
    width: auto;
    opacity: 0;
    pointer-events: none;
}

.charms-stills {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 10;
}

.charms-stills.hide {
    display: none;
}

.charms-stills li {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    overflow: hidden;
}

.charms-stills li:not(:first-child) {
    display: none;
}

.charms-stills img {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    min-height: 50%;
    min-width: 50%;
    height: auto;
}

.charms-projects {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 20;
    cursor: pointer;
}

.charms-projects.hide {
    display: none;
}

.charms-projects.dontclick {
    pointer-events: none;
    cursor: default;
}

.charms-projects li {
    display: block;
    float: left;
    height: 100%;
}

.charms-video-wrapper {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

.charms-video-wrapper iframe {
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.charms-cover {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

.charms-still {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 70;
    background-position: center;
    background-size: cover;
    pointer-events: none;
}

.charms-still.hide {
    display: none;
}

.charms-still img {
    display: none;
}

.charms-heart,
.charms-mask {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 60;
    pointer-events: none;
}

.charms-heart.hide,
.charms-mask.hide {
    opacity: 0;
}

.charms-heart .heart-wrap,
.charms-mask .heart-wrap {
    position: absolute;
    width: 66.666666%;
    height: 100%;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
}

@media screen and (orientation: portrait) {

    .charms-heart .heart-wrap,
    .charms-mask .heart-wrap {
        width: 100%;
        height: 66.666666%;
    }
}

.charms-heart img,
.charms-mask img {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    height: 100%;
    width: auto;
}

@media screen and (max-aspect-ratio: 1/1) {

    .charms-heart img,
    .charms-mask img {
        width: 100%;
        height: auto;
    }
}

.charms-heart .charms-title,
.charms-mask .charms-title {
    position: fixed;
    letter-spacing: -1px;
    color: white;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    font-size: 80px;
    font-size: 16vh;
}

@media screen and (orientation: landscape) {

    .charms-heart .charms-title,
    .charms-mask .charms-title {
        top: 78%;
    }
}

@media screen and (max-aspect-ratio: 1380/930) {

    .charms-heart .charms-title,
    .charms-mask .charms-title {
        top: 73%;
        padding-top: 5%;
    }
}

@media screen and (max-aspect-ratio: 1260/930) {

    .charms-heart .charms-title,
    .charms-mask .charms-title {
        font-size: 10vw;
        padding-top: 25%;
        top: 46%;
    }
}

@media screen and (max-aspect-ratio: 930/930) {

    .charms-heart .charms-title,
    .charms-mask .charms-title {
        top: 50%;
    }
}

@media screen and (max-aspect-ratio: 750/930) {

    .charms-heart .charms-title,
    .charms-mask .charms-title {
        top: 53%;
    }
}

.charms-heart.thump img {
    -webkit-animation: thump 1.0s infinite linear;
    animation: thump 1.0s infinite linear;
}

.charms-mask {
    z-index: 80;
}

.charms-mask .mask-border {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    outline: 2000px solid white;
}

/*@font-face {
    font-family: 'lovevideo';
    src: url('./font/lovevideo.eot');
    src: url('./font/lovevideo.eot?#iefix') format('embedded-opentype'), url('./font/lovevideo.woff') format('woff'), url('./font/lovevideo.ttf') format('truetype'), url('./font/lovevideo.svg#lovevideo') format('svg');
    font-weight: normal;
    font-style: normal;
}*/

body.player-body {
    background-color: white;
}

.video-curtain {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 100;
}

.pause {
    display: none;
}

.video-js {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    cursor: pointer;
}

.video-js.black {
    background-color: black;
}

.video-js.vjs-fullscreen {
    background-color: black;
}

/* === Video Player Overrides === */
.vjs-default-skin .vjs-big-play-button {
    display: none !important;
}

.vjs-default-skin .vjs-control-bar {
    bottom: 0;
    width: 100%;
    height: 55px;
    background: transparent;
    display: block;
}

.vjs-default-skin .vjs-current-time,
.vjs-default-skin .vjs-time-divider,
.vjs-default-skin .vjs-duration,
.vjs-default-skin .vjs-remaining-time,
.vjs-default-skin .vjs-volume-control,
.vjs-default-skin .vjs-mute-control {
    display: none !important;
}

.vjs-default-skin .vjs-play-control {
    visibility: visible;
    position: absolute;
    width: 80px;
    height: 100%;
    bottom: -55px;
    -webkit-transition: bottom 0.3s ease;
    transition: bottom 0.3s ease;
}

.vjs-default-skin.activated .vjs-play-control {
    bottom: 0;
}

.vjs-default-skin .vjs-play-control:before {
    display: none;
}

.vjs-default-skin .vjs-play-control .vjs-control-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.3);
}

.vjs-default-skin .vjs-play-control .vjs-control-content:after {
    font-family: 'lovevideo';
    line-height: 55px;
    font-size: 24px;
    font-weight: normal;
    font-smoothing: antialiased;
    text-transform: uppercase;
    color: white;
    content: '\2588';
}

.vjs-default-skin.vjs-paused .vjs-play-control .vjs-control-content:after {
    content: '\25BA';
}

.vjs-default-skin .vjs-play-control .vjs-control-text {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

/* Progress Bar */
.vjs-default-skin .vjs-progress-control {
    position: fixed;
    top: auto;
    left: 80px;
    right: 80px;
    bottom: 0px;
    height: 55px;
    background: none;
}

/* Video Track */
.vjs-default-skin .vjs-progress-holder {
    position: absolute;
    left: 0;
    bottom: -55px;
    width: 100%;
    height: 100%;
    -webkit-transition: bottom 0.3s ease;
    transition: bottom 0.3s ease;
    background: rgba(0, 0, 0, 0.3);
}

.vjs-default-skin .vjs-progress-holder:after {
    display: block;
    width: 100%;
    height: 3px;
    background-color: rgba(0, 0, 0, 0.35);
    top: 0;
    left: 0;
    margin-top: 25px;
    content: '';
}

.vjs-default-skin.activated .vjs-progress-holder {
    -webkit-transition: bottom 0.3s ease;
    transition: bottom 0.3s ease;
    bottom: 0;
}

.vjs-default-skin .vjs-play-progress {
    background: transparent;
}

.vjs-default-skin .vjs-load-progress {
    background: white;
    top: 25px !important;
    height: 3px !important;
}

.vjs-default-skin .vjs-seek-handle {
    width: 3px;
    height: 25px;
    margin-top: 15px;
    background: white;
}

.vjs-default-skin .vjs-seek-handle:before {
    content: '';
    display: none !important;
}

.vjs-default-skin .vjs-fullscreen-control {
    position: fixed;
    top: auto;
    right: 0;
    bottom: -55px;
    width: 80px;
    height: 55px;
    line-height: 55px;
    text-indent: -9999px;
    background-color: rgba(0, 0, 0, 0.3);
    display: block;
    -webkit-transition: bottom 0.3s ease;
    transition: bottom 0.3s ease;
}

.vjs-default-skin .vjs-fullscreen-control:after {
    font-family: 'lovevideo';
    font-size: 24px;
    font-weight: normal;
    font-smoothing: antialiased;
    text-transform: uppercase;
    color: white;
    content: '\2197';
}

.vjs-default-skin.activated .vjs-fullscreen-control {
    -webkit-transition: bottom 0.3s ease;
    transition: bottom 0.3s ease;
    bottom: 0;
}

.vjs-default-skin .vjs-poster {
    background-size: cover !important;
    background-position: top center;
}

.vjs-default-skin .vjs-loading-spinner {
    display: none !important;
}