@import url('animate.css');
@font-face {font-family: 'CamptonBook';src: url('fonts/campton-book.woff2') format('woff2'), url('fonts/campton-book.woff') format('woff');font-weight: normal;font-style: normal;}
@font-face {font-family: 'CamptonMedium';src: url('fonts/campton-medium.woff2') format('woff2'), url('fonts/campton-medium.woff') format('woff');font-weight: normal;font-style: normal;}

*, input, button, img  {-webkit-border-radius: 0px;-moz-border-radius: 0px;border-radius: 0px;outline:none;outline:none;-webkit-border-radius: 0px;-moz-border-radius: 0px;border-radius: 0px;-webkit-appearance: none;outline:none !important;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;
                   -webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none; user-select: none;  }
body {
    height:100%;
    padding: 0px !important;margin: 0px !important;
    color: #FFF;background:#000;
    font-family: 'CamptonBook';overflow:hidden;
}
#main {height:100%;width:100vw;}
#main .content {
    display: flex;
    align-items: center;
    height: 100%;
    width: 100vw;
    justify-content: center;align-items:center;
    flex-direction: column;
}
#predark, #dark, #light, #red, #notmobile, #landscape {width:inherit;height:inherit;display:none;position:absolute;left:0px;top:0px;overflow:hidden;}
.p {width:100vw;height:75%;display:flex;flex-direction:column;text-align:center;justify-content:space-between;align-items:center;align-content:center;}

#predark {color:#666;text-align:center;background:url(../img/bg.png?v3);background-size:10%;} h1 {color:#c92a1f;font-size:2em;}
#notmobile {color:#EEE;} #notmobile .p {justify-content:center;}
.logo {
    background-color: #c92a1f;
    -webkit-mask: url(../img/heart.svg) no-repeat center;
    mask: url(../img/heart.svg) no-repeat center;
    -webkit-mask-size: 100%;
    mask-size: 100%;
    width: 25vw;
    height: 25vw;
    margin: 0px auto;
    animation: heartbeat 1s infinite;
    margin-bottom: -10px;
}

#predark h1 {color:maroon;opacity:.4;} 
#predark .logo {background-color:maroon;opacity:.4;}
#dark {background:rgba(255,255,255,.98) url(../img/bg.png?v3);background-size:10%;}

.light_on {background:transparent url(../img/light-button.svg) no-repeat center center;background-size:contain; min-height:150px; border:0px;width:30%;position:relative;max-width:155px;min-width:120px;z-index:9;}
.light_on img {
    width: 100%;
    z-index:9;
}
.light_on:after {content:'';width:100%;height:0px;box-shadow: 0 0 50px 15px #FF5733;display:block;animation: light 2s infinite ease-in-out;
    border-radius: 10%;transform:rotate(-90deg); z-index:-1;position:absolute;bottom:50%;left:0px; }


.light_on:not(:disabled):active {transform:scale(.98);}
.light_on:disabled {opacity:.8;}

@keyframes light {
    0% {transform: scale( 1 ) rotate(-90deg);}
    50% {transform: scale( .5 ) rotate(-90deg);}
    100% {transform: scale( 1 ) rotate(-90deg);}
}

@keyframes heartbeat {
    0% {transform: scale( .98 );}
    20% {transform: scale( 1 );}
    40% {transform: scale( .98 );}
    60% {transform: scale( 1 );}
    80% {transform: scale( .98 );}
    100% {transform: scale( .98 );}
}

#light {background:#FFF;} #red {background:#c92a1f;}
#landscape {background:#d2d5d7 url(../img/rotate-phone-2.png) center center no-repeat;background-size:25%;}

@media screen and (orientation:landscape)  {
   body:not(.lightOn) #landscape {display:block;}
}
:root {
    touch-action: pan-x pan-y;
    height: 100%;
}