* {
    margin: 0;
    height: auto;
    width: 100%;
}

html {
    height: 100%;
}

@font-face {
    font-family: "bebasneue";
    src: url(fonts/bebasneue.woff) format("woff"), url(fonts/bebasneue.ttf) format("truetype"), url(fonts/bebasneue.eot) format("embedded-opentype");
    /* <-- CHECK THIS */
    font-weight: bold;
}

body {
    background: #222;
    /*#333333*/
    font-family: Arial, Helvetica, sans-serif;
    font-size: 100%;
    min-height: 100%;
    overflow-x: hidden;
    height: 100%;
    color: #EFEFEF;
}

#wrapper {
    min-height: 100%;
}

h1,
h2,
h3,
h4 {
    font-family: "bebasneue", Tahoma, Arial !important;
    font-weight: bold;
    text-transform: uppercase;
    line-height: 1.15em;
    text-align: center;
}

h1 b {
    color: #F70400;
}

#overflowprotection {
    overflow-x: hidden;
    min-height: 100%;
}


/* prevents unwanted horizontal scrolling on small screens */

#ghost,
.ghost {
    display: none;
}


/* provides a hidden preview image for sites like Facebook to pull */

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

a:hover,
a:focus {
    color: #FF9933;
}

fieldset {
    width: auto;
}

legend {
    font-family: "bebasneue", Tahoma, Arial !important;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 2em;
    width: auto;
    margin-left: .5em;
}

#legendInside {
    font-family: "bebasneue", Tahoma, Arial !important;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 2em;
    text-align: center;
}

.cursor {
    cursor: pointer;
}

.inline {
    display: inline;
}

.center_text {
    text-align: center;
}

.left_text {
    text-align: left;
}

.right_text {
    text-align: right;
}

.swatch1 {
    color: #920000 !important;
}

.swatch1:hover {
    color: #ff6600 !important;
}

.swatch2 {
    color: #F70400;
}

.swatch3 {
    color: #ff9900;
}

.swatch4 {
    color: #989798;
    font-size: .9em;
}

.white_text {
    color: #fff !important;
}

.white_text:hover {
    color: #ff6600 !important;
}

.red_bg {
    background-color: #920000;
}

.pad {
    padding: 1em;
}

.ceiling {
    margin-top: 0.5em;
}

.clearfloats {
    clear: both;
}


/* prevents floats from having display issues */

.content {
    width: 95%;
    height: auto;
    max-width: 50em;
    display: block;
    margin: 76px auto 0;
    padding: .5em 0 .5em;
}

.content.no-margin {
    margin: 0 auto 0;
}

.content2 {
    width: 95%;
    height: auto;
    max-width: 50em;
    display: block;
    margin: 76px auto 0;
    padding: 3em 0 .5em;
}

.content_amazon {
    width: 95%;
    height: auto;
    max-width: 90%;
    display: block;
    margin: 0 auto;
    padding: .5em 0 .5em;
}

#footer {
    margin-top: -11.5em;
    /* makes it so that the footer isn't off the page when there's little content */
}

#footroom {
    height: 11em;
    /* makes space for the footer */
}

#footer2 {
    margin-top: -230px;
    /* makes it so that the footer isn't off the page when there's little content */
}

#footroom2 {
    height: 230px;
    /* makes space for the footer */
}

.footer {
    width: 95%;
    height: auto;
    max-width: 50em;
    display: block;
    margin: 0 auto;
    text-align: center;
    padding: .5em 0 .5em;
    z-index: 2;
}

.footer_buy {
    width: 95%;
    height: 230px;
    max-width: 50em;
    display: block;
    margin: 0 auto;
    text-align: center;
    padding: .5em 0 .5em;
    z-index: 2;
}

#how h1,
#how h2,
#how h3,
#how h4,
#middle h1,
#middle h2,
#middle h3,
#middle h4 {
    text-align: center;
}

#how * {
    width: 100%;
}

#orarrows {
    margin: 0 0 -4em;
}

.free-shipping {
    position: relative;
    width: auto;
    max-width: 700px;
    text-align: center;
    margin: 16px auto;
}


.product {
    margin: 1em auto 2em;
    position: relative;
    width: auto;
    padding: 20px;
    max-width: 98%;
    min-width: 0;
}

.product legend {
    color: white;
}

#exclusive {
    display: inline;
    color: #F70400;
    cursor: pointer;
}

#info {
    display: block;
    font-family: Tahoma, Arial, helvetica, sans-serif;
    padding: 1em;
    margin: -2em auto 0;
    text-transform: none;
    color: white;
    width: 90%;
}

#info b {
    color: #F70400;
}

iframe {
    position: relative;
    padding: 0;
    margin: 0;
    width: auto;
    height: auto;
}

iframe[name='google_conversion_frame'] {
    display: none;
}

.special {
    font-size: 1.5em;
}

.big {
    font-size: 1.5em;
    font-weight: bold;
}

.small {
    font-size: .9em;
    line-height: 1.1em;
}

#mc_embed_signup {
    padding: 1em 0;
}

.contents {
    margin: .5em auto;
    color: black;
    max-width: 30em;
    width: 90%;
}

.woodbox {
    background: url(http://www.explodingkittens.com/img/wood_bg.jpg);
    margin-top: 66px;
    background-repeat: repeat;
    padding: 2em 0 .5em;
    background-position: center;
    position: relative;
    overflow: visible;
}

.red {
    background-color: #6E0308;
    color: white;
    position: relative;
    z-index: 2;
}

.red a {
    color: #F70400;
}

.red a:hover,
.red a:focus {
    color: white;
}

.white {
    background-color: #fff;
    color: #323232;
    position: relative;
}

.white a {
    color: #323232;
}

.white a:hover,
.white a:focus {
    color: #FF9933;
}

.black {
    background-color: #323232;
    color: #fff;
    position: relative;
}

.black a {
    color: #fff;
}

.black a:hover,
.black a:focus {
    color: #FF9933;
}

#redtop {
    background: url(img/redtop.png);
    background-repeat: repeat-x;
    z-index: 2;
}

#redbot {
    background: url(img/redbot.png);
    background-position: bottom;
    background-repeat: repeat-x;
}

.bebas {
    font-family: "bebasneue", Tahoma, Arial !important;
    font-weight: bold;
    text-transform: uppercase;
    line-height: 1.15em;
    text-align: center;
    font-size: 1.1em;
}


/* >>> anchors <<< */

#ik {
    padding-top: 100px;
    margin-top: -100px;
}

#first_edition {
    background-color: #383838;
}

#oatmeal {
    background-color: #5E2424;
}

#setup,
#overview,
#your_turn,
#example,
#quick_reference,
#nope,
#stealing,
#special_combos {
    margin: 1.5em auto;
}


/* >>> end anchors <<< */

#kkp {
    position: fixed;
    float: right;
    z-index: 2000;
}


/* >>> MOBILE <<< */

@media screen {
    .salebanner_dec {
        background-color: #003300;
        border-bottom-style: solid;
        border-bottom-color: darkgreen;
        height: 30px;
        width: 100%;
        padding-top: 2px;
    }
    .salebanner_dec h2 {
        letter-spacing: .04em;
    }
    h1 {
        font-size: 3em;
        line-height: 1em;
    }
    h2 {
        font-size: 1.75em;
    }
    h3 {
        font-size: 1.5em;
    }
    h4 {
        font-size: 1.25em;
    }
    p {
        font-size: 1em;
        line-height: 1.25em;
        margin: .5em 0;
    }
    ul {
        padding: 0 0 0 1em;
    }
    ol {
        padding: 0 0 0 1em;
    }
    li {
        margin: .75em 0 0 .25em;
        width: 95%;
    }
    .half {
        width: 100%;
        display: block;
        float: none;
    }
    #middle:before {
        content: "";
        display: block;
        padding-top: 50%;
        /* helps put things in the middle S/O to http://www.mademyday.de/css-height-equals-width-with-pure-css.html*/
    }
    #middle {
        width: 95%;
        max-width: 40em;
        position: relative;
        display: block;
        margin: 0 auto;
    }
    #wcontainer {
        height: auto;
        margin: 0 0 .5em;
    }
    #container {
        height: auto;
        padding-top: 1em;
        overflow: hidden;
    }
    #container_amazon {
        height: auto;
        padding-top: 1em;
    }
    #kkp {
        background-image: url(/img/kkp_badge_50.png);
        width: 50px;
        height: 50px;
        bottom: 60px;
        right: 10px;
    }
    /* vv ## NAVIGATION ## vv */
    #ontop,
    .top {
        display: none;
    }
    #bar {
        height: 3em;
        position: fixed;
        bottom: 0;
        background-image: url(img/mgradredmini.png);
        /* mini light to dark gradient for mobile */
        background-color: #700309;
        overflow: hidden;
        z-index: 5;
    }
    #ontopIKPREORDER {
        display: none;
    }
    #barIKPREORDER {
        display: none;
    }
    #barIKPREORDERm {
        bottom: 0;
        width: 100%;
        height: 1.5em;
        position: fixed;
        margin: 0 auto 3em;
        background-color: #1a82a9;
        font-family: "bebasneue", Tahoma, Arial !important;
        font-weight: bold;
    }
    #barIKPREORDERm p {
        width: 100%;
        margin: 0 auto;
        padding: .2em 0;
        text-align: center;
        text-shadow: 0.5px 0.5px 0.5px rgba(0, 0, 0, 0.75);
        font-size: 1em;
    }
    #barIKPREORDERm a {
        color: #FFFFFF;
    }
    #barIKPREORDERm a:hover,
    #barIKPREORDER a:focus {
        color: #febe40;
    }
    #nav {
        height: 3em;
        position: fixed;
        bottom: 0;
        overflow: hidden;
        z-index: 5;
    }
    .navbutton:hover,
    .navbutton:focus,
    .top:hover,
    .top:focus {
        color: #FF9933;
    }
    .navbutton {
        text-transform: uppercase;
        font-size: 1.25em;
        text-align: center;
        height: 100%;
        padding: .75em 0 0;
        font-family: "bebasneue", Tahoma, Arial !important;
        font-weight: bold;
    }
    .nav {
        float: left;
        width: 20%;
        height: 100%;
    }
    /* ^^ ## NAVIGATION ## ^^ */
    .monly {
        display: block;
        margin: 0 auto;
    }
    /* hides stuff that we don't want in non-mobile views */
    .nmonly {
        display: none;
    }
    /* hides stuff that we don't want in mobile views */
    #vlogo {
        width: 90%;
        display: block;
        margin: 0 auto;
        max-width: 16em;
        float: none;
    }
    #minivlogo {
        width: 40%;
        display: block;
        padding: .1em 0;
        margin: 0 auto;
        max-width: 9em;
        float: none;
    }
    #minihlogo {
        width: 90%;
        display: block;
        padding: .25em 0 0;
        margin: 0 auto -.5em;
        max-width: 25em;
        float: none;
    }
    .minisocial {
        float: none;
        width: 100%;
        margin: .25em 0 0;
        padding: 0 0 .25em;
        text-align: center;
    }
    .minisocial img {
        width: 1.75em !important;
        padding: 0 .05em;
        vertical-align: middle;
    }
    /* vv ## RESPONSIVE VIDEO ## vv */
    #videobox:before {
        content: "";
        display: block;
        padding-top: 56.25%;
        /* results in videobox ratio of 16:9 S/O to http://www.mademyday.de/css-height-equals-width-with-pure-css.html*/
    }
    #videobox {
        width: 95%;
        max-width: 25em;
        position: relative;
        display: block;
        margin: .5em auto 1em;
        z-index: 1;
    }
    #videobox img {
        position: absolute;
        top: 0;
        left: 0;
        height: 105%;
        width: 100%;
    }
    #videobox iframe {
        position: absolute;
        top: 5.25%;
        left: 3.25%;
        height: 93%;
        width: 93%;
    }
    .tagline {
        display: block;
        float: none;
        width: 90%;
        min-width: 10em;
        text-align: center;
        margin: 0 auto .5em;
    }
    .tagline h1 {
        font-size: 3.35em;
        line-height: .9em;
        text-align: center;
    }
    .tagline h2 {
        font-size: 1.5em;
        line-height: 1em;
    }
    .tagline h3 {
        font-size: 1.35em;
        line-height: 1.2em;
    }
    .tagline h4 {
        font-size: .9em;
        line-height: 1.2em;
    }
    .tagline h1,
    .tagline h2,
    .tagline h3,
    .tagline h4 {
        text-align: center !important;
    }
    .tagline img {
        float: none;
        margin-left: auto;
        margin-right: auto;
    }
    /* ^^ ## RESPONSIVE VIDEO ## ^^ */
    /* vv ## HOME PAGE ## vv */
    #barIKPREORDER {
        display: none;
    }
    #cards {
        width: 85%;
        display: block;
        max-width: 30em;
        margin: 0 auto;
    }
    .what {
        width: 100%;
        float: none;
    }
    .ages {
        display: none;
    }
    .mages {
        width: 50%;
        max-width: 10em;
        display: block;
        margin: .5em auto;
    }
    #numberone {
        max-width: 20em;
        width: 45%;
    }
    .numberone {
        margin: 0 auto;
        display: block;
    }
    .numberone img {
        width: 48%;
        max-width: 10em;
        padding: .25em 1%;
    }
    /* ^^ ## HOME PAGE ## ^^ */
    /* vv ## BUY ## vv */
    .sale {
        margin: 0;
        top: 8%;
        left: 15px;
        float: left;
        position: absolute;
        background-image: url(/img/sale_tag.png);
        background-repeat: no-repeat;
        width: 100px;
        height: 72px;
        z-index: 1;
    }
    #amazon_icon {
        width: 1.2em;
    }
    #orderpng {
        width: 80%;
        max-width: 17em;
    }
    #gettheapp {
        width: 43%;
        margin: 0;
        max-width: 7.6em;
    }
    #getthecards {
        width: 52%;
        margin: 0;
        max-width: 9em;
    }
    .product img {
        float: none;
        display: block;
        width: 60%;
        max-width: 20em;
        margin: 0 auto;
        height: auto;
    }
    .oatmeal {
        background: url(/img/order/oatmeal.png) no-repeat 25% 0;
        background-size: 75% auto;
        min-height: 7.75em;
        font-size: 1.25em;
    }
    .description {
        float: none;
        display: block;
        margin: 1em auto 0;
        width: 100%;
    }
    .description h3,
    h4 {
        text-align: left !important;
    }
    .bb {
        display: block;
        z-index: 1;
        width: 290px;
        margin: 1em auto 0;
    }
    #downarrow {
        display: none;
    }
    .sidearrow {
        display: none;
    }
    .codearrow {
        display: none;
    }
    #eyes_blink_on_black {
        display: none;
    }
    #eyes_blink_on_black2 {
        display: none;
    }
    #order {
        float: none;
        background: none;
        text-align: center;
        display: block;
        width: 100%;
        position: relative;
    }
    #order a:hover,
    #order a:focus {
        color: #FF9933;
    }
    .order2 {
        color: #de5638;
        float: none;
        background: none;
        text-align: center;
        display: block;
        width: 100%;
    }
    #order2 {
        float: none;
        background: none;
        text-align: center;
        display: block;
        width: 100%;
    }
    #order2 h1 h2 h3 {
        width: 100%;
        padding: 0 0 0 0;
    }
    #order2 h2 {
        width: 100%;
        padding: 0 0;
    }
    #order2 h3 {
        width: 100%;
        padding: 0 0;
    }
    #order2 h3 a {
        color: #FF9933;
    }
    #order2 h3 a:hover {
        color: white;
    }
    /* This is very specific and ugly, I'm sorry. */
    #preorder {
        float: left;
        display: block;
        margin: 0 auto;
        width: 100%;
    }
    #preorder h3 {
        width: 100%;
    }
    #preorder h3 a {
        color: #FF9933;
    }
    #preorder h3 a:hover {
        color: white;
    }
    #ordernow {
        width: 70%;
        padding: 0 0;
        margin: 0 auto;
    }
    .amazon {
        width: 90%;
        float: left;
        display: block;
        margin: .5em 5%;
    }
    .amazon .original {
        color: #F70400;
    }
    .amazon .nsfw {
        color: white;
    }
    .amazon a:hover,
    .amazon a:focus {
        color: #FF9933;
    }
    .amazon_icon2 {
        text-align: left;
        background: url(/img/amazon_icon.png) no-repeat 0 0;
        background-size: 30px 30px;
        padding-left: 40px;
        margin-top: 0.5em;
    }
    .amazon_icon2 a {
        color: #ff9900;
    }
    .amazon_icon2 a:hover {
        color: #fff;
    }
    /* vv ## BUY ON AMAZON ## vv */
    #buy_amazon {
        text-align: center;
    }
    #buy_amazon_header img {
        width: 10%;
    }
    #buy_amazon img {
        width: auto !important;
    }
    #buy_amazon_header h1 {
        font-size: 2em;
    }
    #select_region {
        display: none;
    }
    .amazon_region_left {
        width: 50px;
    }
    /* vv ## AMAZON DISAMBIGUATION ## vv */
    .icon_disam {
        width: 7%;
        max-width: 2em;
    }
    .disam h1 {
        color: #00bfff;
    }
    .amazon_region_disam {
        float: left;
        width: 45%;
        padding: .5em 2.5%;
    }
    /* ^^ ## AMAZON DISAMBIGUATION ## ^^ */
    /* ^^ ## BUY ON AMAZON ## ^^ */
    #clockdiv {
        font-family: "bebasneue", Georgia, serif;
        color: #F70400;
        display: block;
        width: 80%;
        max-width: 30em;
        margin: .25em auto 0;
    }
    #clockdiv div>div {
        float: left;
        width: 3.5em;
        color: white;
        margin-top: -.25em;
        text-align: center;
    }
    .days,
    .hours,
    .minutes,
    .seconds {
        text-align: center;
        font-size: 2em;
    }
    #countdown {
        height: 3em;
        display: block;
        padding: .5em .25em;
        width: 14.5em;
        background-color: #F70400;
        margin: .5em auto .25em;
    }
    /* ^^ ## BUY ## ^^ */
    /* vv ## RULES ## vv */
    #ekrules {
        color: #dd2227;
        font-size: 3.5em;
    }
    #ikrules {
        color: #1882a9;
        font-size: 3.5em;
    }
    #button_align {
        width: 100%;
        text-align: center;
    }
    .ikrules_button {
        background-color: #fff;
        border-color: #ccc;
        color: #323232;
        border-style: solid;
        border-radius: 4px;
        margin: 0 auto;
        cursor: pointer;
        display: inline-block;
        font-family: "bebasneue", Tahoma, Arial !important;
        font-size: 1.5em;
        font-weight: bold;
        padding: .25em;
        text-align: center;
        text-decoration: none;
        text-transform: uppercase;
        min-width: 170px;
        max-width: 30%;
    }
    .ekrules_button {
        background-color: #fff;
        border-color: #ccc;
        color: #323232;
        border-style: solid;
        border-radius: 4px;
        margin: 0 auto .25em auto;
        cursor: pointer;
        display: inline-block;
        font-family: "bebasneue", Tahoma, Arial !important;
        font-size: 1.5em;
        font-weight: bold;
        padding: .25em;
        text-align: center;
        text-decoration: none;
        text-transform: uppercase;
        min-width: 170px;
        max-width: 30%;
    }
    /* .ikrules_button:active {background-color: #00b7e4; border-color: #00b7e4 ;color: #fff;}
.ekrules_button:active {background-color: #dd2227; border-color: #dd2227; color: #fff;} */
    .ikrules_button:hover {
        background-color: #00b7e4;
        color: #fff;
        border-color: #00b7e4;
    }
    .ekrules_button:hover {
        background-color: #dd2227;
        color: #fff;
        border-color: #dd2227;
    }
    .ikrules_button_active {
        background-color: #00b7e4;
        border-color: #00b7e4;
        color: #fff;
    }
    .ekrules_button_active {
        background-color: #dd2227;
        border-color: #dd2227;
        color: #fff;
    }
    #ikanchor:hover {
        color: #1882a9;
    }
    .rule,
    .rulepic {
        width: 90%;
        display: block;
        float: none;
        padding: .5em 0;
    }
    .ruleIndent {
        text-indent: -1.5em;
        margin-left: 1.5em;
        width: 93%;
    }
    #rulenote ul {
        margin-left: 1em;
        width: 98%;
    }
    #ekrulescontent {
        width: 95%;
        height: auto;
        max-width: 50em;
        display: block;
        margin: 0 auto;
        padding: .5em 0 .5em;
    }
    #ikrulescontent {
        width: 95%;
        height: auto;
        max-width: 50em;
        display: block;
        margin: 0 auto;
        padding: .5em 0 .5em;
    }
    #setup img,
    #overview img,
    #your_turn img,
    #quick_reference img,
    #stealing img,
    #special_combos img {
        height: auto;
        display: block;
        margin: -.5em auto;
        max-height: 8em;
        max-width: 100%;
        width: auto;
    }
    #example img {
        height: auto;
        display: inline-block;
        margin: .25em auto;
        max-height: 8em;
        max-width: 100%;
        width: auto;
    }
    #rulenote legend,
    #cardnote legend,
    #codenote legend {
        font-size: 1.75em;
    }
    #rulenote {
        background-color: #fff5e3;
        width: 90%;
        display: block;
        margin: 1em auto;
    }
    #rulenoteIK {
        background-color: #ceecf4;
        width: 90%;
        display: block;
        margin: 1em auto;
    }
    #rulenoteGRAD {
        background-image: url(img/iksetup/ik_quickref_CoS_BG.png);
        background-size: cover;
        background-repeat: no-repeat;
        width: 90%;
        display: block;
        margin: 1em auto;
    }
    #rulenote legend img,
    #cardnote legend img,
    #codenote legend img {
        display: none;
    }
    #cardnote {
        width: 90%;
        background-color: #FFFEFE;
        display: block;
        margin: 1em auto;
    }
    #codenote {
        width: 80%;
        background-color: #161616;
        display: block;
        margin: 1em auto;
        border-color: #f89621;
        padding: 1em .5em 2em 1em;
    }
    #codenote ul li {
        margin: 0 -1em 0 0;
        padding: .5em 0;
    }
    .count {
        font-size: .7em;
        color: #FF9933;
    }
    #special_combos {
        background-color: #f2f2f2;
    }
    #quick_reference {
        background-color: #f2f2f2;
    }
    #special_combos h3 {
        font-size: 1.75em;
        color: #FF9933;
    }
    #special_combos_p {
        text-align: center;
        width: 60%;
        margin: 0 auto;
    }
    .countIK {
        font-size: .7em;
        color: #1782a9;
    }
    /* ^^ ## RULES ## ^^ */
    /* vv ## CONTACT ## vv */
    #social {
        width: 90%;
        max-width: 25em;
        padding: 1em .5em;
        margin: .5em auto;
        display: block;
    }
    #faq ul,
    #faq li {
        list-style-type: none;
    }
    /*no bullets*/
    #faq h1 {
        text-align: left;
        margin: 0 0 -.5em;
    }
    .q {
        color: #F70400;
        font-family: "bebasneue", Tahoma, Arial !important;
        font-weight: bold;
        font-size: 1.5em;
        padding: .75em .25em .25em;
    }
    /*format for frequently asked QUESTIONS*/
    #iosapp {
        width: 85%;
        max-width: 30em;
        text-align: center;
        padding: .5em 1em 1em;
        margin: 2em auto 1em;
        font-size: 1.25em;
        display: block;
    }
    #business {
        width: 85%;
        max-width: 30em;
        text-align: center;
        padding: .5em 1em 1em;
        margin: 2em auto 1em;
        font-size: 1.25em;
        display: block;
    }
    /* ^^ ## CONTACT ## ^^ */
    /* vv ## MEOW ## vv */
    #meow {
        padding: 1em;
        margin: 1em auto;
    }
    #meow h2 {
        color: #F70400;
        padding: .25em .5em;
        text-align: left;
    }
    #meow img {
        height: auto;
        display: block;
        margin: 0 auto;
        max-height: 15em;
        max-width: 90%;
        width: auto;
    }
    /* ^^ ## MEOW ## ^^ */
    #mspace {
        height: 3em;
    }
}


/* >>> END OF MOBILE STYLES <<< */


/* >>> NON-MOBILE (desktop) <<< */

@media screen and (min-width: 40em) {
    .salebanner_dec {
        background-color: #003300;
        border-bottom-style: solid;
        border-bottom-color: darkgreen;
        height: 40px;
        width: 100%;
        padding-top: 4px;
    }
    .salebanner_dec h2 {
        letter-spacing: .04em;
    }
    h1 {
        font-size: 4.5em;
        line-height: 1em;
    }
    h2 {
        font-size: 2em;
    }
    h3 {
        font-size: 1.5em;
    }
    h4 {
        font-size: 1.25em;
    }
    p {
        font-size: 1em;
        line-height: 1.35em;
    }
    ul {
        padding: 0;
    }
    ol {
        padding: 0 1em;
    }
    li {
        margin: .75em 0 .75em .5em;
    }
    .half {
        width: 50%;
        float: left;
    }
    .rule {
        width: auto;
        max-width: 60%;
        float: left;
    }
    .rulepic {
        width: 40%;
        float: left;
    }
    #middle:before {
        content: "";
        display: block;
        padding-top: 25%;
        /* helps put things in the middle S/O to http://www.mademyday.de/css-height-equals-width-with-pure-css.html*/
    }
    #middle {
        width: 95%;
        max-width: 50em;
        position: relative;
        display: block;
        margin: 0 auto;
    }
    #kkp {
        background-image: url(/img/kkp_badge_125.png);
        width: 125px;
        height: 125px;
        top: 130px;
        right: 30px;
    }
    /* vv ## NAVIGATION ## vv */
    #ontop {
        z-index: 10;
        width: 100%;
        height: 6.5em;
        position: relative;
        display: block;
        margin: 0 auto;
        background-image: url(img/gradred.png);
        /* dark to light gradient for non-mobile */
        background-color: #700309;
        font-family: "bebasneue", Tahoma, Arial !important;
        font-weight: bold;
    }
    #ontop img {
        width: 5em;
        height: auto;
        margin: -1em auto 0;
        display: block;
    }
    #ontopBuy {
        z-index: 10;
        width: 100%;
        height: 9.2em;
        position: relative;
        display: block;
        margin: 0 auto;
        background-image: url(img/gradred.png);
        /* dark to light gradient for non-mobile */
        background-color: #700309;
        font-family: "bebasneue", Tahoma, Arial !important;
        font-weight: bold;
    }
    #ontopBuy img {
        width: 5em;
        height: auto;
        margin: -1em auto 0;
        display: block;
    }
    .top {
        text-transform: uppercase;
        font-size: 1.5em;
        text-align: center;
        padding: 1.75em 0 0;
        float: left;
        display: block;
        width: 20%;
        height: 2.5em;
        overflow: visible;
    }
    #ontopIKPREORDER {
        width: 100%;
        height: 2.7em;
        position: relative;
        display: block;
        margin: 1.5em auto 0;
        background-color: #1a82a9;
        font-family: "bebasneue", Tahoma, Arial !important;
        font-weight: bold;
    }
    #ontopIKPREORDER p {
        width: 100%;
        margin: 0 auto;
        padding: .22em 0;
        text-align: center;
        text-shadow: 0.5px 0.5px 0.5px rgba(0, 0, 0, 0.75);
        font-size: 1.5em;
    }
    #ontopIKPREORDER a {
        color: #FFFFFF;
    }
    #ontopIKPREORDER a:hover,
    #ontopIKPREORDER a:focus {
        color: #febe40;
    }
    #topnav {
        max-width: 40em;
        width: 95%;
        height: 5em;
        top: 0;
        left: 0;
        right: 0;
        margin: 0 auto;
        /* this is tricky, but it should effectively center the div for most browsers, may fail IE8 */
    }
    #bar {
        height: 3em;
        position: fixed;
        top: 0;
        background: #700309;
        background-image: url(img/gradredmini.png);
        /* mini dark to light gradient for non-mobile */
        overflow: hidden;
        width: 100%;
        font-family: "bebasneue", Tahoma, Arial !important;
        font-weight: bold;
    }
    #barIKPREORDERm {
        display: none;
    }
    #barIKPREORDER {
        display: block;
    }
    #barIKPREORDER {
        width: 100%;
        height: 2.7em;
        position: fixed;
        margin: 3em auto 0;
        background-color: #1a82a9;
        font-family: "bebasneue", Tahoma, Arial !important;
        font-weight: bold;
    }
    #barIKPREORDER p {
        width: 100%;
        margin: 0 auto;
        padding: .4em 0;
        text-align: center;
        text-shadow: 0.5px 0.5px 0.5px rgba(0, 0, 0, 0.75);
        font-size: 1.25em;
    }
    #barIKPREORDER a {
        color: #FFFFFF;
    }
    #barIKPREORDER a:hover,
    #barIKPREORDER a:focus {
        color: #febe40;
    }
    #nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        margin: 0 auto;
        /* this is tricky, but it should effectively center the div for most browsers, may fail IE8 */
        overflow: hidden;
        max-width: 40em;
        height: 3em;
    }
    .navbutton {
        height: 100%;
        padding: .75em 0 0;
    }
    /* ^^ ## NAVIGATION ## ^^ */
    #wcontainer {
        height: auto;
        display: block;
        margin: 0 auto;
        padding: 1em 0 2.5em;
        max-width: 50em;
        overflow: hidden;
    }
    #wcontainer2 {
        height: auto;
        display: block;
        margin: 0 auto;
        padding: 3em 0 5em;
        max-width: 50em;
        overflow: hidden;
    }
    #container {
        height: auto;
        display: block;
        margin: 0 auto ;
        padding: 1em 0;
        max-width: 50em;
        overflow: visible;
    }
    #container_amazon {
        height: auto;
        display: block;
        margin: 0 auto;
        padding: 1em 0;
        max-width: 80%;
        overflow: hidden;
    }
    .monly {
        display: none;
    }
    /* hides stuff that we don't want in non-mobile views */
    .nmonly {
        display: block;
        width: auto;
        position: relative;
        height: auto;
        margin: 0 auto;
    }
    /* hides stuff that we don't want in mobile views */
    .woodbox {
        padding: 0;
        overflow: visible;
    }
    /* vv ## RESPONSIVE VIDEO ## vv */
    #videobox {
        float: left;
        width: 56%;
        margin: .5em 2% .5em 3%;
        z-index: 1;
    }
    .tagline {
        width: 36%;
        display: block;
        float: left;
        margin: 1em 3% 0 0;
    }
    .tagline h1 {
        font-size: 3.5em;
        line-height: .9em;
    }
    .tagline h2 {
        font-size: 1.7em;
        line-height: 1em;
    }
    .tagline h3 {
        font-size: 1.5em;
        line-height: 1.2em;
    }
    .tagline h4 {
        font-size: 1em;
        line-height: 1.2em;
    }
    .tagline img {
        height: auto;
    }
    .tagline h1,
    .tagline h2,
    .tagline h3,
    .tagline h4 {
        text-align: center;
    }
    .tagline2 {
        width: 25%;
        display: block;
        float: left;
        margin: 1em 0 0 0;
    }
    /* ^^ ## RESPONSIVE VIDEO ## ^^ */
    .floath {
        float: right;
        width: 35%;
        height: 100%;
        font-family: "bebasneue", Tahoma, Arial !important;
        font-weight: bold;
        font-size: 3em;
        text-align: center;
        color: white;
    }
    /* vv ## HOME PAGE ## vv */
    #cards {
        width: 65%;
        display: block;
        float: left;
        margin: 0 -5% 0 0;
    }
    #numberone {
        width: 40%;
        display: block;
        float: left;
        height: auto;
        margin: .75em 0 0;
    }
    .numberone {
        display: none;
    }
    #blinking_cat {
        background: url(http://www.explodingkittens.com/img/cat.png) no-repeat 0 0;
        background-size: 280px;
        width: 280px;
        height: 150px;
        position: absolute;
        top: -6.5em;
        right: 15%;
        z-index: 1;
    }
    #blinking_cat_eyes {
        position: absolute;
        width: 25%;
        height: auto;
        top: 45px;
        left: 70px;
    }
    #open_cat_mouth {
        position: absolute;
        width: 10%;
        height: auto;
        top: 67px;
        left: 95px;
        display: none;
    }
    .what {
        width: 80%;
        float: left;
    }
    .ages {
        width: 20%;
        display: inline-block;
        float: left;
    }
    .mages {
        display: none;
    }
    #downarrow {
        margin: -2em 0 -2em 35%;
        z-index: 1;
        width: 40%;
        display: block;
        height: auto;
    }
    /* ^^ ## HOME PAGE ## ^^ */
    /* vv ## BUY ## vv */
    .top_padding {
        top: 24px;
    }
    .sale {
        margin: 0;
        top: 10%;
        left: -15px;
        float: left;
        position: absolute;
        background-image: url(img/sale_tag.png);
        background-repeat: no-repeat;
        width: 100px;
        height: 72px;
        z-index: 1;
    }
    .product img {
        float: left;
        width: 40%;
        margin: 0 auto;
        height: auto;
    }
    .description {
        float: left;
        display: block;
        margin: 0 0 0 4%;
        width: 56%;
    }
    .bb {
        display: block;
        width: 290px;
        margin: 1em 0 0;
    }
    #eyes_blink_on_black {
        display: block;
        top: 45%;
        left: 29%;
        margin: -4.25em 0 0 -2em;
        position: absolute;
        width: 2.5em;
        height: auto;
        z-index: 1;
    }
    #eyes_blink_on_black2 {
        display: block;
        top: 45%;
        left: 22%;
        margin: -4.25em 0 0 -2em;
        position: absolute;
        width: 2.5em;
        height: auto;
        z-index: 1;
    }
    #order {
        width: 100%;
        max-width: 50em;
        background: url(http://www.explodingkittens.com//img/shipping_box.png) no-repeat 10% 0;
        background-size: 37.5%;
        height: 16em;
    }
    #order h1 {
        text-align: left;
        width: 55%;
        padding: .5em 0 0 45%;
    }
    #order h2 {
        text-align: left;
        width: 55%;
        padding: 0 0 0 45%;
    }
    #order h3 {
        text-align: left;
        width: 55%;
        padding: 0 0 0 45%;
    }
    #order h3 a {
        color: #FF9933;
    }
    #order h3 a:hover {
        color: white;
    }
    /* This is very specific and ugly, I'm sorry. */
    .order2 {
        display: none;
    }
    #order2 {
        width: 100%;
        max-width: 50em;
        background: url(http://www.explodingkittens.com/img/shipping_box.png) no-repeat 0 0;
        background-size: 35%;
        margin: 5em auto 0;
        height: 16em;
    }
    #order2 h1 {
        text-align: left;
        width: 55%;
        padding: .25em 0 0 39%;
    }
    #order2 h2 {
        text-align: left;
        width: 55%;
        padding: 0 0 0 39%;
    }
    #order2 h3 {
        text-align: left;
        width: 55%;
        padding: 0 0 0 39%;
    }
    #order2 h3 a {
        color: #FF9933;
    }
    #order2 h3 a:hover {
        color: white;
    }
    /* This is very specific and ugly, I'm sorry. */
    #preorderBG {
        margin: -17% 5% 0 -50%;
        height: 437px;
        width: 503px;
        background: url(img/imploding_cat.png) no-repeat;
        background-size: 100%;
        background-position: right bottom;
        overflow: visible;
        float: right;
    }
    #preorder {
        float: left;
        display: block;
        margin: 0 0 0 4%;
        width: 56%;
    }
    #preorder h3 {
        width: 100%;
    }
    #ordernow {
        width: 50%;
        padding: 2em 0 0 50%;
    }
    .amazon {
        width: 30%;
        margin: 1.5em 1.5%;
    }
    /* ^^ ## BUY ## ^^ */
    /* vv ## RULES ## vv */
    #rulenote legend,
    #cardnote legend,
    #codenote legend {
        font-size: 2em;
    }
    #rulenote legend img {
        max-height: 1em;
        margin: 0;
        width: auto;
        display: inline-block;
    }
    #cardnote legend img {
        max-height: 1.25em;
        margin: -.1em 0;
        width: auto;
        display: inline-block;
    }
    .sidearrow {
        margin: -.5em auto;
        padding: 0 20%;
        z-index: 1;
        width: 40%;
        display: block;
        height: auto;
    }
    .codearrow {
        margin: 0 auto 0 1em;
        padding: none;
        z-index: 1;
        width: 100%;
        display: block;
        height: auto;
    }
    #codenote {
        width: 80%;
        background-color: #161616;
        display: block;
        margin: 1em auto;
        border-color: #f89621;
        border-style: solid;
    }
    #codenote ul li {
        margin: 0 -1em 0 1em;
        padding: .5em 0;
    }
    .ikrules_button {
        margin: 0 auto 0 1em;
    }
    .ekrules_button {
        margin: 0 1em 0 auto;
    }
    /* ^^ ## RULES ## ^^ */
    /* vv ## CONTACT ## vv */
    .q {
        font-size: 2em;
    }
    /* ^^ ## CONTACT ## ^^ */
    /* vv ## BUY ON AMAZON ## vv */
    #buy_amazon {
        text-align: center;
    }
    #buy_amazon_header {
        margin-bottom: 2em;
    }
    #buy_amazon_header h2 {
        font-size: 3em;
        padding-right: 0.25em;
    }
    #buy_amazon_header h1 {
        font-size: 6em;
        padding-right: 0.15em;
    }
    #buy_amazon_header img {
        display: inline !important;
    }
    .amazon_region_left {
        float: left;
        width: 280px;
    }
    .amazon_region_left h1 {
        margin-top: .5em;
        font-size: 4em;
    }
    .amazon_region_right {
        float: left;
        width: auto;
        margin-bottom: 1em;
    }
    .amazon_region_right img {
        padding-right: 1.5em;
    }
    #buy_amazon hr {
        border: 0;
        border-bottom: 1px dashed #444;
        margin: 2em 0;
    }
    /* vv ## AMAZON DISAMBIGUATION ## vv */
    .icon_disam {
        width: 10%;
        max-width: 4.5em;
    }
    .amazon_region_disam {
        padding: 0 2.5% 2em;
    }
    /* ^^ ## AMAZON DISAMBIGUATION ## ^^ */
    /* ^^ ## BUY ON AMAZON ## ^^ */
}


/* unique code form styles */

#thanks_form label {
    font-family: "bebasneue", Tahoma, Arial !important;
    font-weight: bold;
    text-transform: uppercase;
    line-height: 1.15em;
    text-align: center;
}

.thanks_form_input {
    font-family: "bebasneue", Tahoma, Arial !important;
    font-size: 1.15em;
    font-weight: bold;
    padding: 0;
    text-align: center;
}

.thanks_form_input input {
    width: 100%;
}

.thanks_form_button {
    clear: both;
    background-color: #f89621;
    border: none;
    border-radius: 4px;
    margin: 0 auto 0;
    color: #323232;
    cursor: pointer;
    display: block;
    font-family: "bebasneue", Tahoma, Arial !important;
    font-size: 1.5em;
    font-weight: bold;
    padding: .25em;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    min-width: 170px;
    max-width: 50%;
}

.thanks_form_button:hover {
    background-color: #febe40;
    color: #323232;
}

.thanks_form_button:active {
    background-color: #febe40;
    color: #323232;
}

#thanks_form_errors {
    background-color: #b62126;
    border: none;
    border-radius: 4px;
    color: #FFFFFF;
    margin: 1em auto 1em;
    display: block;
    font-family: "bebasneue", Tahoma, Arial !important;
    font-size: 1.5em;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    min-width: 170px;
    max-width: 98.25%;
}

.flexbox {
    display: flex;
    display: -webkit-flex;
    flex-flow: row wrap;
    -webkit-flex-flow: row wrap;
    justify-content: space-between;
    -webkit-justify-content: space-between;
}

.flexbox div {
    text-align: center;
    margin: 1.15em auto 0;
    max-width: 170px;
}

#support {
    width: 85%;
    max-width: 30em;
    text-align: center;
    padding: .5em 1em 1em;
    margin: 2em auto 1em;
    font-size: 1.25em;
    display: block;
}


/* App page styles */

#app2_header img,
#how_containerimg,
#how2 img,
#download img,
#app_credits img {
    width: auto !important;
}

#app2_header_container {
    background-color: #990000;
    width: 100%;
    margin-top: 76px;
    padding-top: 20px;
}

#app2_header {
    background: url(/img/app2/header.png) no-repeat top center;
    width: 800px;
    height: 600px;
    margin: 0 auto;
    position: relative;
}

#download_apple {
    position: absolute;
    left: 370px;
    bottom: 60px;
}

#download_android {
    position: absolute;
    left: 530px;
    bottom: 60px;
}

#android_presents {
    position: absolute;
    bottom: -10px;
    left: 370px;
}

#how_container {
    width: 100% !important;
    background: #fff;
    text-align: center;
}

#download_container {
    background: #222;
    text-align: center;
    padding: 1em 0;
}

#gameplay_video {
    margin-left: -50px;
    margin-bottom: 25px;
}

#android_container {
    background: #222;
    text-align: center;
}

#app_countdown {
    font-size: 30pt;
    margin: 0.25em 0em .25em 0.25em;
    color: #99CC33;
}

#app_credits {
    border-top: 2px dotted #990000;
    background: #222;
    margin-top: 25px;
    padding: 20px 0;
    margin-bottom: 0;
}

#app_credits h2 {
    margin-top: 1em;
    margin-bottom: 0.25em;
}

.generic_container {
    width: 100% !important;
    background: #fff;
    text-align: center;
}

.generic {
    width: 900px;
    margin: 0 auto;
}

.generic h1,
.generic h2 {
    color: #000;
}

#soundboard2 {
    width: 920px;
    margin: 0 auto;
}

#soundboard2 h3 {
    text-align: left;
    color: #ccc;
}

#soundboard2 h4 {
    background: url(/img/soundboard/sound_icon_red.png) no-repeat 0 0;
    padding-left: 25px;
    color: #990000 !important;
    text-align: left;
    line-height: 1.5em;
}

#soundboard2 table {
    width: 900px;
    margin: 0 auto;
}

#soundboard2 td {
    border: 1px dashed #ccc;
    padding: 0.5em;
    text-align: left;
    margin: 5px;
    vertical-align: top;
}


/* Matt's CSS classes - don't touch */

.ghost {
    display: none !important;
}

.faint_border {
    border: 1px solid #ccc;
}