/* Fonts */
@import url('https://fonts.googleapis.com/css?family=Fredoka+One');

/* General */
html,body
{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 
}

/* Contacts */
textarea {
    background-color: #ededed;
    border-radius: 1px;
    border-width: 0;
    border-top-width: 1px;
    font-size: 11pt;
    height: 100px;
    outline: none;
    overflow: auto;
    padding-left: 6px;
    resize: none;
    width: 280px;
}

.contactInput {
    background-color: #ededed; 
    border-radius: 1px;
    border-width: 0;
    font-size: 11pt;
    height: 30px;
    outline: none;
    padding-left: 6px;
    width: 280px;
}

.blackbtn {
    background-color: rgb(40, 45, 50);
    border-width: 0;
    border-radius: 1px;
    color: #efefef;
    height: 37.5px;
    width: 280px;
}

/* Header */
h6 {
    margin: 20px;
}

.icons {
    height: 37px;
}

/* Margins */
.m5 {
    margin: 5px;
}

.m10 {
    margin: 10px;
}

.m15 {
    margin: 15px;
}

.m20 {
    margin: 20px;
}

/* Background */
.bg {
    background: linear-gradient(70deg, rgba(40,40,40,1) 5%, rgba(26,26,26,1) 40%, rgba(26,26,26,1) 60%, rgba(40,40,40,1) 95%);
	width: 100%;
	height: 100%;
}

.whitetxt {
    color: #ededed;
}

/* Big screens */
@media screen and (min-width: 450px) {
    /* Header animation */
    .h1flicker {
        font-family: 'Fredoka One';
        font-size: 4em;
        text-align: center;
        white-space: nowrap;
        line-height: 1;
        margin: 0;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
        position: absolute;
        color: #ededed;
        text-shadow: -1px -1px 0 rgba(255, 255, 255, 0.4), 1px -1px 0 rgba(255, 255, 255, 0.4), -1px 1px 0 rgba(255, 255, 255, 0.4), 1px 1px 0 rgba(255, 255, 255, 0.4), 0 -2px 8px, 0 0 2px, 0 0 5px #ffffff, 0 0 15px #efefef, 0 0 2px #ededed, 0 2px 3px #000;
        letter-spacing: -.0005em;
        word-spacing: .625em;
        -webkit-text-size-adjust: 60%;
                text-size-adjust: 60%;
                
    }
    .h1flicker::before {
        content: attr(data-heading);
        position: absolute;
        overflow: hidden;
        color: #ededed;
        width: 100%;
        z-index: 5;
        text-shadow: none;
        /* left: 0%; */
        text-align: left;
        -webkit-animation: flicker 3s linear infinite;
                animation: flicker 3s linear infinite;
    }

    /* Phone image adjustment */
    .phoneIMGreduction {
        height: 650px;
    }

    /* White quad sticker */
    .stickerone {
        outline: none;    
        height: 300px;
        width:  300px;
        background-color: #ededed;
        -webkit-clip-path: polygon(0 25%, 100% 20%, 100% 80%, 0 75%);
                clip-path: polygon(0 25%, 100% 20%, 100% 80%, 0 75%);
    }
}

/* Small screens */
@media screen and (max-width: 450px) {
    /* Header animation */
    .h1flicker {
        font-family: 'Fredoka One';
        font-size: 12vw;
        text-align: center;
        white-space: nowrap;
        line-height: 1;
        margin: 0;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
        position: absolute;
        color: #ededed;
        text-shadow: -.8px -.8px 0 rgba(255, 255, 255, 0.4), .8px -.8px 0 rgba(255, 255, 255, 0.4), -.8px .8px 0 rgba(255, 255, 255, 0.4), .8px .8px 0 rgba(255, 255, 255, 0.4), 0 -1px 6px, 0 0 1px, 0 0 4px #ffffff, 0 0 10px #efefef, 0 0 1px #ededed, 0 1px 2px #000;
        letter-spacing: -.0005em;
        word-spacing: .625em;
    }
    .h1flicker::before {
        content: attr(data-heading);
        position: absolute;
        overflow: hidden;
        color: #ededed;
        width: 100%;
        z-index: 5;
        text-shadow: none;
        text-align: left;
        -webkit-animation: flicker 3s linear infinite;
                animation: flicker 3s linear infinite;
    }

    /* Phone image adjustment */
    .phoneIMGreduction {
        width: 70vw;
    }

    /* White quad sticker */
    .stickerone {
        outline: none;    
        height: 80vw;
        width: 60vw;
        background-color: #ededed;
        -webkit-clip-path: polygon(0 25%, 100% 20%, 100% 80%, 0 75%);
                clip-path: polygon(0 25%, 100% 20%, 100% 80%, 0 75%);
    }

    .scaledAt90 {
        transform: scale(.9);
    }
}

/* Disables cursor variation */
.defaultcursor {
    cursor: default;
}

/* Disables the ability to drag images */
.userdrag {
    -webkit-user-drag: none;  /* Chrome & all */
    -moz-user-drag: none;     /* Firefox all */
    -ms-user-drag: none;      /* IE 10+ */
    user-select: none;
}

/* Disables the ability to select text */
.userselect {
    -webkit-user-select: none;  /* Chrome & all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none; 
}

@keyframes flicker {
    0%, 19.99%, 22%, 62.99%, 64%, 64.99%, 70%, 100% {
      opacity: .99;
      text-shadow: -1px -1px 0 rgba(255, 255, 255, 0.4), 1px -1px 0 rgba(255, 255, 255, 0.4), -1px 1px 0 rgba(255, 255, 255, 0.4), 1px 1px 0 rgba(255, 255, 255, 0.4), 0 -2px 8px, 0 0 2px, 0 0 5px #ffffff, 0 0 15px #efefef, 0 0 2px #ededed, 0 2px 3px #000;
    }
    20%, 21.99%, 63%, 63.99%, 65%, 69.99% {
      opacity: .4;
      text-shadow: none;
    }
}

@-webkit-keyframes flicker {
    0%, 19.99%, 22%, 62.99%, 64%, 64.99%, 70%, 100% {
        opacity: .99;
        text-shadow: -1px -1px 0 rgba(255, 255, 255, 0.4), 1px -1px 0 rgba(255, 255, 255, 0.4), -1px 1px 0 rgba(255, 255, 255, 0.4), 1px 1px 0 rgba(255, 255, 255, 0.4), 0 -2px 8px, 0 0 2px, 0 0 5px #ffffff, 0 0 15px #efefef, 0 0 2px #ededed, 0 2px 3px #000;
    }
    20%, 21.99%, 63%, 63.99%, 65%, 69.99% {
        opacity: 0.4;
        text-shadow: none;
    }
}