.mod-cf:before,
.mod-cf:after {
    content: " ";
    display: table;
}
.mod-cf:after {
    clear: both;
}
.mod-cf {
    *zoom: 1;
}

#mod-app img {
    padding-bottom: 0;
}

#mod-logo,
#mod-scene {
    display: none;
}

.mod-target .mod-info {
    display: none;
    padding: 0.5em 0;
}

.mod-master.active .mod-info {
    display: block;
}

.mod-target .mod-info h3 {
    display: none;
}

.mod-target .mod-info img {
    float: left;
    margin: 0 10px 5px 0;
    margin: 0 1rem 0.5rem 0;
}
.mod-target .mod-info ul {
    list-style: none;
    margin-left: 0;
}
.mod-target .mod-info p:last-child {
    margin-bottom: 0;
}
.mod-target .mod-info li:last-child {
    padding-bottom: 0;
}

#mod-masters {
    list-style: none;
    margin: 0;
    padding: 0;
}
#mod-masters .mod-menu a {
    background: #3b4d33;
    position: relative;
    display: block;
    color: #b7ba9f;
    padding: 0.5em 22px;
    text-decoration: none;
    font-family: "Bebas Neue", Arial, Helvetica, Sans-serif;
    font-size: 24px;
    font-size: 1.75rem;
}

.mod-master .mod-menu a:after {
    content: '';
    display: block;
    background: url('../img/sprite.png') 0 0 no-repeat;
    position: absolute;
    top: 2px;
    left: 88%;
    height: 46px;
}

#mod-insect .mod-menu a:after {
    width: 66px;
    background-position: 0 0;
    margin-left: -33px; /* offset to center (half width) */
}
#mod-snake .mod-menu a:after {
    width: 70px;
    background-position: -71px 0;
    margin-left: -35px; /* offset to center (half width) */
}
#mod-bug .mod-menu a:after {
    width: 67px;
    background-position: -145px 0;
    margin-left: -33px; /* offset to center (half width) */
}
#mod-goldenrod .mod-menu a:after {
    width: 79px;
    background-position: -215px 0;
    margin-left: -39px; /* offset to center (half width) */
}
#mod-chameleon .mod-menu a:after {
    width: 48px;
    background-position: -297px 0;
    margin-left: -24px; /* offset to center (half width) */
}
#mod-toad .mod-menu a:after {
    width: 51px;
    background-position: -349px 0;
    margin-left: -25px; /* offset to center (half width) */
}
#mod-beetle .mod-menu a:after {
    width: 38px;
    background-position: -406px 0;
    margin-left: -19px; /* offset to center (half width) */
}
#mod-butterfly .mod-menu a:after {
    width: 49px;
    background-position: -448px 0;
    margin-left: -25px; /* offset to center (half width) */
}
#mod-spider .mod-menu a:after {
    width: 64px;
    background-position: -502px 0;
    margin-left: -32px; /* offset to center (half width) */
}
#mod-caterpillar .mod-menu a:after {
    width: 65px;
    background-position: -571px 0;
    margin-left: -32px; /* offset to center (half width) */
}
#mod-katydid .mod-menu a:after {
    width: 69px;
    background-position: -640px 0;
    margin-left: -35px; /* offset to center (half width) */
}
#mod-mantis .mod-menu a:after {
    width: 45px;
    background-position: -715px 0;
    margin-left: -22px; /* offset to center (half width) */
}

#mod-masters .mod-menu a:hover,
#mod-masters .mod-menu a.active {
    color: #fff;
}

.main p.mod-small {
    font-size: 14px;
    font-size: .85rem;
    line-height: 17px;
    line-height: 1.1rem;
    margin-top: 1em;
}

.mod-hide-on-mobile,
.mod-close {
    display: none;
}

@media (min-width: 48em) {
    #mod-app {
        padding-bottom: 100px;
        background: #3b4d33;
    }
    #mod-container {
        position: relative;
        max-width: 1175px;
    }
    #mod-logo {
        background: url('../img/logo.png') no-repeat;
        background-size: 100%;
        width: 18.8%;
        height: 0;
        padding-top: 26.2%;
        position: absolute;
        left: 41%;
        top: 5%;
        overflow: hidden;
        display: block;
    }
    .lt-ie9 #mod-logo {
        display: none; /* background size doesn't work in ie8 and below so hide it */
    }
    #mod-scene {
        display: block;
    }
    .mod-master {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-size: 100%;
        background-repeat: no-repeat;
    }
    .mod-target {
        position: absolute;
        cursor: pointer;
        z-index: 50; /* needed to make clickable over .mod-master */
        /* IE doesn't play well with empty elements so we give it a transparent background to make it clickable */
        background: transparent 0 0 repeat scroll url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBR‌​AA7');
    }
    .mod-master.active .mod-target {
        z-index: 51; /* allow info window to always appear over other targets */
    }
    .mod-target .mod-info {
        width: 350px;
        background: #fff;
        position: relative;
        left: -370px;
        top: 40%;
        z-index: 60;
        cursor: auto;
        padding: 10px 15px;
        padding: 0.5rem 1rem;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
    }
    .mod-open-right .mod-target .mod-info {
        left: 135px;
    }
    .mod-target .mod-info:before {
        content: '';
        display: block;
        width: 30px;
        height: 31px;
        background: url('../img/sprite.png') -770px 0 no-repeat;
        position: absolute;
        top: -9px;
        right: -20px;
    }
    .mod-open-right .mod-target .mod-info:before {
        right: auto;
        left: -20px;
        background-position: -810px 0;
    }

    .mod-animate-on .mod-target .mod-info {
        /* starting point */
        -webkit-transform: translate3d(-300px, 0, 0);
        -moz-transform: translate3d(-300px, 0, 0);
        transform: translate3d(-300px, 0, 0);
    }
    .mod-animate-on .mod-master.active .mod-info {
        -webkit-transform: translate3d(0, 0, 0);
        -webkit-animation: slideInRight .1s ease-in-out;

        -moz-transform: translate3d(0, 0, 0);
        -moz-animation: slideInRight .1s ease-in-out;

        transform: translate3d(0, 0, 0);
        animation: slideInRight .1s ease-in-out;
    }

    .mod-animate-on .mod-open-right .mod-target .mod-info {
        /* starting point */
        -webkit-transform: translate3d(300px, 0, 0);
        -moz-transform: translate3d(300px, 0, 0);
        transform: translate3d(300px, 0, 0);
    }
    .mod-animate-on .mod-master.active.mod-open-right .mod-info {
        -webkit-transform: translate3d(0, 0, 0);
        -webkit-animation: slideInLeft .1s ease-in-out;

        -moz-transform: translate3d(0, 0, 0);
        -moz-animation: slideInLeft .1s ease-in-out;

        transform: translate3d(0, 0, 0);
        animation: slideInLeft .1s ease-in-out;
    }

    .mod-target .mod-info h3 {
        display: block;
        font-size: 20px;
        font-size: 1.25rem;
        color: #000;
    }
    .mod-target .mod-info img {
        display: none;
    }
    .mod-target .mod-info p,
    .mod-target .mod-info li {
        font-size: 14px;
        font-size: .85rem;
        line-height: 17px;
        line-height: 1.1rem;
    }
    .mod-target .mod-close {
        display: block;
        width: 12px;
        height: 0;
        padding-top: 12px;
        overflow: hidden;
        background: url('../img/sprite.png') -850px 0 no-repeat;
        position: absolute;
        top: 15px;
        top: 1rem;
        right: 15px;
        right: 1rem;
        cursor: pointer;
    }
    #mod-masters .mod-menu a {
        position: absolute;
        bottom: -100px;
        width: 8.3%; /* 100 / number of items */
        height: 100px;
        padding: 60px 0 0;
        font-size: 14px;
        font-size: .85rem;
        line-height: 16px;
        line-height: 1rem;
        text-align: center;
        z-index: 45; /* allow info window to show above it */
    }
    .mod-master .mod-menu a:after {
        top: 9px;
        left: 50%;
    }
    /* masters */
    #mod-insect .mod-menu a {
        left: 0;
    }
    #mod-insect .mod-target {
        height: 10%;
        width: 12%;
        bottom: 52%;
        left: 67%;
    }
    .mod-images-on #mod-insect.active {
        background-image: url('../img/masters/insect.png');
    }

    #mod-snake .mod-menu a {
        left: 8.3%;
    }
    #mod-snake .mod-target {
        height: 21%;
        width: 23%;
        bottom: 69%;
        left: 60%;
    }
    #mod-snake .mod-info {
        top: 15%;
    }
    .mod-images-on #mod-snake.active {
        background-image: url('../img/masters/snake.png');
    }

    #mod-bug .mod-menu a {
        left: 16.6%;
    }
    #mod-bug .mod-target {
        height: 20%;
        width: 9%;
        bottom: 57%;
        left: 88%;
    }
    .mod-images-on #mod-bug.active {
        background-image: url('../img/masters/bug.png');
    }

    #mod-goldenrod .mod-menu a {
        left: 25%;
    }
    #mod-goldenrod .mod-info {
        left: 155px;
    }
    #mod-goldenrod .mod-target {
        height: 13%;
        width: 13%;
        bottom: 14%;
        left: 23%;
    }
    .mod-images-on #mod-goldenrod.active {
        background-image: url('../img/masters/goldenrod.png');
    }

    #mod-chameleon .mod-menu a {
        left: 33.3%;
    }
    #mod-chameleon .mod-target {
        height: 23%;
        width: 10%;
        bottom: 15%;
        left: 39%;
    }
    .mod-images-on #mod-chameleon.active {
        background-image: url('../img/masters/chameleon.png');
    }

    #mod-toad .mod-menu a {
        left: 41.6%;
    }
    #mod-toad .mod-target {
        height: 15%;
        width: 15%;
        bottom: 8%;
        left: 67%;
    }
    #mod-toad .mod-info {
        top: 15%;
    }
    .mod-images-on #mod-toad.active {
        background-image: url('../img/masters/toad.png');
    }

    #mod-beetle .mod-menu a {
        left: 50%; /* each offset based on width of each item */
    }
    #mod-beetle .mod-target {
        height: 13%;
        width: 9%;
        bottom: 18%;
        left: 90%;
    }
    .mod-images-on #mod-beetle.active {
        background-image: url('../img/masters/beetle.png');
    }

    #mod-butterfly .mod-menu a {
        left: 58.3%;
    }
    #mod-butterfly .mod-info {
        left: 165px;
    }
    #mod-butterfly .mod-info {
        top: 25%;
    }
    #mod-butterfly .mod-target {
        height: 23%;
        width: 14%;
        bottom: 0%;
        left: 4%;
    }
    .mod-images-on #mod-butterfly.active {
        background-image: url('../img/masters/butterfly.png');
    }

    #mod-spider .mod-menu a {
        left: 66.6%;
    }
    #mod-spider .mod-info {
        left: 90px;
    }
    #mod-spider .mod-target {
        height: 11%;
        width: 7%;
        bottom: 88%;
        left: 15%;
        z-index: 55; /* make this appear above the mantis that overlaps it */
    }
    .mod-images-on #mod-spider.active {
        background-image: url('../img/masters/spider.png');
    }

    #mod-caterpillar .mod-menu a {
        left: 75%;
    }
    #mod-caterpillar .mod-target {
        height: 7%;
        width: 7%;
        bottom: 81%;
        left: 90%;
    }
    .mod-images-on #mod-caterpillar.active {
        background-image: url('../img/masters/caterpillar.png');
    }

    #mod-katydid .mod-menu a {
        left: 83.3%;
    }
    #mod-katydid .mod-info {
        left: 165px;
    }
    #mod-katydid .mod-target {
        height: 12%;
        width: 14%;
        bottom: 45%;
        left: 4%;
    }
    .mod-images-on #mod-katydid.active {
        background-image: url('../img/masters/katydid.png');
    }

    #mod-mantis .mod-menu a {
        left: 91.6%;
    }
    #mod-mantis .mod-target {
        height: 16%;
        width: 10%;
        bottom: 74%;
        left: 7%;
    }
    .mod-images-on #mod-mantis.active {
        background-image: url('../img/masters/mantis.png');
    }
    /* end masters */

    .mod-images-on #mod-masters .mod-master.active {
        background-color: rgba(0, 0, 0, .5);/
    }
    .lt-ie9 .mod-images-on #mod-masters .mod-master.active {
        background-image: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBR‌​AA7'); /* background size doesn't work in ie8 and below so hide it */
    }

    .mod-hide-on-mobile {
        display: block;
    }
    span.mod-hide-on-mobile {
        display: inline;
    }
    .mod-hide-on-desktop {
        display: none;
    }
    /* pre-load images that appear on click */
    #mod-app:after {
        display: none;
        content:
            url('../img/masters/insect.png')
            url('../img/masters/snake.png')
            url('../img/masters/bug.png')
            url('../img/masters/goldenrod.png')
            url('../img/masters/chameleon.png')
            url('../img/masters/toad.png')
            url('../img/masters/beetle.png')
            url('../img/masters/butterfly.png')
            url('../img/masters/spider.png')
            url('../img/masters/caterpillar.png')
            url('../img/masters/katydid.png')
            url('../img/masters/mantis.png');
    }
}
@-webkit-keyframes slideInRight {
    0%    {-webkit-transform: translate3d(-300px, 0, 0);}
    100%  {-webkit-transform: translate3d(0, 0, 0);}
}
@-moz-keyframes slideInRight {
    0%    {-moz-transform: translate3d(-300px, 0, 0);}
    100%  {-moz-transform: translate3d(0, 0, 0);}
}
@keyframes slideInRight {
    0%    {transform: translate3d(-300px, 0, 0);}
    100%  {transform: translate3d(0, 0, 0);}
}
@-webkit-keyframes slideInLeft {
    0%    {-webkit-transform: translate3d(300px, 0, 0);}
    100%  {-webkit-transform: translate3d(0, 0, 0);}
}
@-moz-keyframes slideInLeft {
    0%    {-moz-transform: translate3d(300px, 0, 0);}
    100%  {-moz-transform: translate3d(0, 0, 0);}
}
@keyframes slideInLeft {
    0%    {transform: translate3d(300px, 0, 0);}
    100%  {transform: translate3d(0, 0, 0);}
}

@media
only screen and (-webkit-min-device-pixel-ratio: 1.3),
only screen and (min--moz-device-pixel-ratio: 1.3),
only screen and (-o-min-device-pixel-ratio: 1.3 / 1),
only screen and (min-resolution: 125dpi),
only screen and (min-resolution: 1.3dppx) {
    .mod-master .mod-menu a:after {
        background-image: url('../img/sprite2x.png');
        -webkit-background-size: 760px 46px;
        background-size: 760px 46px
    }
}