.playingCard
{
    background-color: #7d3e69;
    width: 35%;
    position: absolute;
    border: #000000;
    border-style: solid;
    display: none;
}
.categories div {
    width: auto;
    margin-left: 5%;
    margin-right: 5%;
    border-radius: 12px;
    margin-bottom: 3%;
    border: solid;
    border-color: #ededed;
}

.character {
    background-color: #f9e85f;
}

.location {
    background-color: #53a5e0;
}

.object {
    background-color: #ec8c23;
}

.APF {
    background-color: #e62e2d;
}

.different {
    background-color: #71e862;
}

span.iconL {
    float: left;
    margin-left: 6%;
    padding-top: 2%;
}

span.iconR {
    float: right;
    margin-right: 6%;
    padding-top: 2%;
}

.location .iconL, .location .iconR, .object .iconL, .object .iconR, .different .iconL, .different .iconR {
    padding-top: 1%;
}
.APF .iconL, .APF .iconR {
    padding-top: 2%;
}

.character img {
    width: 72%;
}
.categories {
    text-align: center;
}

.categories div label {
    font-size: xx-large;
}

.pCardLogo {
    text-align: center;
    padding: 5%;
}
.pCardLogo img {
    text-align: center;
    width: 28%;
}
body {
    background: radial-gradient(black 15%, transparent 16%) 0 0, radial-gradient(black 15%, transparent 16%) 8px 8px, radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px, radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
    background-color: #181818;
    background-size: 16px 16px;
}

@media all and (orientation: landscape){
    #clock 
    {
        position: absolute;
        right: 0%;
        top: 7%;
        margin-left: -465px;
        width: auto;
        height: 200px;
        text-align: center;
    }
    .cards {
        left: 23%;
        position: absolute;
        top: -30%;
    }

    #logo {
        left: 41%;
        position: absolute;
        top: 28%;
    }
    .playingCard
    {
        width: 39%;
        position: absolute;
        left: 32%;
        top: 10%;
        max-width: 35%;
    }
}

@media all and (orientation: landscape) and (min-width: 1000px) {
    #clock 
    {
        position: absolute;
        right: 0%;
        top: 7%;
        margin-left: -465px;
        width: auto;
        height: 200px;
        text-align: center;
    }
    .cards {
        left: 29%;
        position: absolute;
        top: -10%;
    }

    #logo {
        left: 41%;
        position: absolute;
        top: 28%;
    }
    .playingCard
    {
        width: 39%;
        position: absolute;
        left: 35%;
        top: 22%;
        width: 33%;
        max-width: 25%;
    }
}

@media all and (orientation: portrait) {
    .cards {
        left: 23%;
        position: absolute;
        top: 20%;
    }

    #clock {
        position: absolute;
        top: 75%;
        width: auto;
        height: 200px;
        text-align: center;
        left: 35%;
    }

    #logo {
        left: 38%;
        position: absolute;
        top: 35%;
    }
    .playingCard
    {
        width: 36%;
        position: absolute;
        left: 31%;
        margin-top: 55%;
    }
}
/* count down */
@import url('https://fonts.googleapis.com/css?family=Roboto+Slab');



.card {
    position: absolute;
}

.num {
    position:relative;
    display:inline-block;
    width:140px;
    height:200px;
    font: 140px 'Roboto Slab', sans-serif;
    color:#404040;
    background:rgba(90,90,90,1);
    border:solid 3px #404040;
    box-sizing:border-box;
    border-radius:18px;
}

.colon {
    position:relative;
    display:inline-block;
    font: 140px 'Roboto Slab', sans-serif;
    top:-60px;
    left:-2px;
    color:#404040;
}

.base span {
    position:absolute;
    display:block;
    width:100%;
}

.upper {
    position:absolute;  
    width:100%;
    height:50%;
    background:linear-gradient(0deg, rgba(200,200,200,1), rgba(255,255,255,1) 15%);
    border-radius:15px 15px 0 0;  
    box-shadow: inset 0 1px 8px rgba(0,0,0,.1);
    overflow:hidden;
    border-bottom:solid 1px rgba(0,0,0,.5);
    box-sizing:border-box;
}

.lower {
    position:absolute;
    top:50%;
    width:100%;
    height:50%;
    background:linear-gradient(180deg, rgba(200,200,200,1), rgba(255,255,255,1) 15%);
    border-radius:0 0 15px 15px;  
    box-shadow: inset 0 -3px 5px rgba(0,0,0,.2);
    overflow:hidden;
    border-top:solid 1px #ddd;
    box-sizing:border-box;
}

.lower span {
    position:relative;
    top:-100%;
}