body,html{
    padding:0;
    margin:0;
    background-color:white;
}

@font-face{
    font-family: CustomCalibri;
    src:url("fonts/Calibri.eot"); /*For ie browser*/
}

@font-face{ 
    font-family: CustomCalibri;
    src:url("fonts/Calibri.ttf"); /*For other browsers*/
}

*{
    font-family: CustomCalibri, Arial, sans-serif;
    perspective: 3000px;
}

#tingheader{
background-color:#c7d54f;
padding:10px;
}

#cardcontainer{
    height:100vh;
    width:100vw;
    display:flex;
    align-items:center;
    justify-content:space-around;
    flex-direction: column;
}

#card{
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently*/
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    cursor:pointer;
    display:flex;
    box-shadow: 0px 0px 0px 20px #c7d54f,
    0px 0px 5px 21px #777;
    background-color:#c7d54f;
    height:50vmin;
    width:80vmin;
    flex-direction: column;
    transform-style: preserve-3d;
    transition:background-color .5s, box-shadow .5s, transform 1s;
}

#card.clicked{
    transform:rotateY(180deg) !important;
}

.text, .borderline, #tinglogo, #text{
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

#clickformore{
    flex-direction: column;
    width:80vmin;
    display:flex;
    align-items:center;
    position:absolute;
    margin-top:calc(53vmin + 20px);
}


#clickformore img{
    height:5vmin;
}

#backface{
    display:flex;
    position:absolute;
    height:50vmin;
    width:80vmin;
    background-color:transparent;
    opacity:1;
    z-index:99999;
    transform: rotateY(180deg) translateZ(1px);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    justify-items:center;
    align-items:center;
    flex-direction: column;
}

#backface img{
    margin-top:20px;
}

#backface h1{
    color:white;
    font-size:4vmin;
    align-self: flex-start;
    margin-bottom:2px;
    margin-top:9vmin;
}

#backface span{
    color:#888;
    font-size:2vmin;
    z-index:999;
}


#tinglogo{
    display:flex;
    height:50px;
    width:50px;
    position:absolute;
    align-self:center;
    margin-top:calc(50vmin - 30px);
    background-color:#c7d54f;
    transition:background-color .5s;
}

#tinglogo img{
    height:40px;
    width:40px;
    margin-left:5px;
    margin-top:5px;
}

#reloadbtn{
    display:flex;
    align-items:center;
    justify-content:center;
    height:10vmin;
    max-height:60px;
    width:calc(80vmin + 40px);
    border-radius:0.3em;
    background:#c7d54f;
    box-shadow: 0px 0px 5px #555;
    font-size:3vmin;
    cursor:pointer;
    transition:all .2s;
    color:white !important;
}

#reloadbtn:hover{
    box-shadow:0px 0px 0px #555,
    inset 0px 0px 7px #666;
}

#text span{
    display:block;
    font-size:6vmin;
    color:white;
    padding:20px;
    font-weight:lighter;
}

#bottomano{
    color:white;
    position:absolute;
    font-size:3.5vmin;
    margin-top:calc(50vmin - 7vmin);
    margin-left:55vmin;
}

@keyframes rotate{
    0%{
        transform: rotateY(0deg);
    }
    100%{
        transform: rotateY(360deg);
    }
}

#card svg{
    position:absolute;
}

#lineone{
    transform-origin:top;
    position:absolute;
    transform:scaleY(1);
    width:3px;
    height:50vmin;
}

#linethree{
    transform-origin:bottom;
    position:absolute;
    transform:scaleY(1);
    width:3px;
    height:50vmin;
    margin-left:calc(80vmin - 3px);
}

#linetwo{
    transform-origin:right;
    position:absolute;
    transform:scaleX(1);
    width:80vmin;
    height:3px;
}



#linefour{
    transform-origin:left;
    position:absolute;
    transform:scaleX(1);
    margin-top:calc(50vmin - 3px);
    width:80vmin;
    height:3px;
}

#card:hover #lineone,#card:hover #linethree{
    transform:scaleY(0);
}

#card:hover #linetwo,#card:hover #linefour{
    transform:scaleX(0);
}

.borderline{
    background:white;
}

.quote i{
    font-size: 4vmin;
}

.secondcolor{
    background-color:#0e6068 !important;
    box-shadow: 0px 0px 0px 20px #0e6068,
    0px 0px 5px 21px #777 !important;
}

.secondcolorlogo{
    background-color:#0e6068 !important;
}

.spinner{
    animation: spin 1s;
}

/*.spinner::before{
    animation: spinbackface 1s;
}*/

@keyframes spin{
    from{
        transform:rotateY(0deg);
    }
    to{
        transform:rotateY(360deg);
    }
}

.share{
    position:absolute;
    top: 37vmin;
    font-size: 3vmin;
    display: flex;
    align-self: center;
    justify-self: center;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    color: white;
    padding: 0.2vmin 1vmin;
    border: 1px solid white;
    border-radius: 0.3em;
    background-color:transparent;
    transition:all 0.2s;
}

.share:hover{
    background-color: rgba(255,255,255,0.3);
    border:2px solid white;
}


#displayhelp{
    position:absolute;
    color:#666666;
    bottom:0px;
    right:20px;
    text-decoration:none;
    font-size:7vmin;
    z-index:4;
    cursor:pointer;
}

#blackoverlay{
    display:none;
    height:100%;
    width:100%;
    background-color:rgba(0,0,0,0.5);
    position:fixed;
    top:0px;
    left:0px;
    z-index:99;
}

#helpcontent{
    width:calc(90% - 3vmin);
    position: fixed;
    top:25%;
    left:2.5%;
    border:3px solid white;
    display:none;
    background-color:#c7d54f;
    z-index:100;
    padding:6vmin;
}
#helpcontent h1{
    font-size:6vmin;
    color:white;
    text-align:center;
}

#content2, #content1{
    padding: 10vmin 0vmin;
}

#content1 h4, #content2 h4, #content1 h3, #content2 h3{
    font-size: 2vmin;
}

#content1 h1{
    font-size:6vmin;
    color:#c7d54f;
    text-align:center;
}

#content1 h2{
    color:#c7d54f !important;
    text-align:center;
}

#content1 h4{
    text-align:center;
}

#helpcontent span{
    display:block;
    width:100%;
    font-size:5vmin;
    text-align:center;
    color:white;
}


#closebtn{
    display:none;
    cursor:pointer;
    font-size:5vmin;
    position: fixed;
    color:white;
    top:calc(25% - 5vmin);
    left:1vmin;
    z-index:100;
}

h2{
    display: block;
    margin: 0 auto;
    max-width: 600px;
    font-weight: normal;
    color:white;
    margin-bottom:2vmin;
}

h4{
    display: block;
    margin: 0 auto;
    max-width: 600px;
    font-weight: normal;
    text-align:block;
}

#helpcontent hr{
    border:3px solid white;
    box-shadow:none;
    outline:none;
    border-radius:100%;
}

footer{
    background-color:#212121;
    padding:1vmin 15vmin;
    display:flex;
}

#footercol1 img{display:block;}

.footercol{
    color: #808080 !important;
    padding:2%;
    position:relative;
    display:inline-block;
    width:33%;
    min-width:312px;
}

#lowerfooter{
    background-color:#282828;
    height:60px;
    display:flex;
    justify-content: space-between;
    padding-left:calc(15vmin + 2%);
    padding-right:calc(15vmin + 2%);
    line-height:60px;
    color:#808080;
}

#footerlinks{
    display:inline-flex;
}


#footerlinks a{
    text-decoration: none;
    margin-left:10px;
    transition: all 0.3s;
    color:#808080;
}

#footerlinks a:hover{
    color:#ffffff;
}

#footercol1img{
    display:flex;
    justify-content: space-around;
}

#footercol1img img{
    display:inline-block;
    max-width:20%;
    height:auto;
    object-fit:contain;
}


.contactelem{
    word-wrap: none;
    display:block;
    color:#808080 !important;
    font-size:1.2em;
    text-decoration: none;
    transition: all 0.3s;
}


a.contactelem:hover{
    color:#c7d54f !important;
}

.contactelem i{
    color:#c7d54f;
    margin-right:10px;
}

#contactform{
    padding: 12px 27px;
    background-color:#c7d54f;
    text-decoration: none;
    color:white;
    transition: all 0.3s;
}

#contactform:hover{
    background-color:#666666;
}

#cfcon{
    margin-top:18px;
    margin-bottom:20px;
}

@media(max-width:1350px) and (orientation: portrait){
    .footercol{
        color: #808080 !important;
        padding:2%;
        position:relative;
        display:block !important;
        min-width:100%;
    }

    footer{
        flex-direction: column;
        padding-bottom:3vmin;
    }

    #lowerfooter{
        text-align:center;
        height:auto;
        padding:0;
        flex-direction: column;
    }

    #footerlinks{
        display:block;
    }

    #content2, #content1{
        padding: 25vmin 2vmin;
    }

    #content1 h4, #content2 h4, #content1 h2, #content2 h2{
        font-size: 3vmin;
    }
}

#footercol2 a{
    color:#0e6068;
    text-decoration-color:#c7d54f;
    transition:all 0.3s;
    animation: flashlink 2s infinite;
} 

#footercol2 a:hover{
    color:#c7d54f;
    text-decoration-color:#0e6068;
}

@keyframes flashlink{
    100%{
        text-decoration-color:#0e6068;
    }
    50%{
        text-decoration-color:#c7d54f;
    }
    0%{
        text-decoration-color:#0e6068;
    }
}