@charset  "utf-8";

@font-face {font-family:"Merriweather Extra Bold"; src:url("../fonts/MerriweatherSans-ExtraBold-webfont.ttf") format("truetype")}
@font-face {font-family:"Merriweather Bold"; src:url("../fonts/merriweathersans-bold-webfont.ttf") format("truetype")}
@font-face {font-family:"Merriweather Light"; src:url("../fonts/merriweathersans-light-webfont.ttf") format("truetype")}
@font-face {font-family:"Merriweather Regular"; src:url("../fonts/merriweathersans-regular-webfont.ttf") format("truetype")}


/* apply a natural box layout model to all elements */
body {
    margin: 0
}

strong {
    font-family: "Merriweather Bold";
    color: black;
}

ul {
    list-style-type: none;
    padding: 0px;
    margin-left: 3px;
    width: 100%;
    font-family: "Merriweather Regular";
    font-size: 1.1em;
}

#disclaimer {
    width: 90%;
    max-width: 729px;
    margin: 0 auto;
    font-family: "Merriweather Regular";
    font-size: 0.8em
}

ul li {
    width: 100%;
    display: inline-block;
    border-bottom: 1px dotted #999;
    box-sizing: border-box;
    padding-top: 10px;
    padding-bottom: 10px;
}

.circle {
    border-radius: 50%;
    width: 50px;
    height: 50px;
    text-align: center;
    float: right;
    font-size: 1.5em;
    line-height: 50px;
    color: white!important;
}

.points {
    background-color: #e912aa; 
    color: white;
    margin-bottom: 30px;
}

.twitter {
    background: url(../images/icons/twitter.svg) no-repeat;
    margin-left: 4px;
    margin-top: 5px;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    float: left;
    cursor: pointer;
}

.facebook {
    background: url(../images/icons/facebook.svg) no-repeat;
    margin-left: 4px;
    margin-top: 5px;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    float: left;
    cursor: pointer;
}

.subjectlist ul li:hover {
    background-color: #92af3d;
}

.subject li {
    text-align: left!important;
}

.pez-container {
    width: 100%;
    position: relative;
}

.pez-box {
    width: 100%;
    max-width: 729px;
    margin: 0 auto;
    display: inline-block;
    margin-bottom: 20px;
}

.subjecticator {
    width: 90%;
    max-width: 729px;
    margin: 0 auto;
}

#subjecticator {
    width: 100%;
    height: 30px;
    border-radius: 5px;
    font-family: "Merriweather Regular";
    font-size: 1.1em;
    line-height: 30px;
}

.subjectlist {
    width: 100%;
}

#switchbox {
    width: 90%;
    max-width: 300px;
    margin: 0 auto;
}

.pez_header {
    width: 100%;
    max-width: 729px;
    margin: 0 auto;
}

.pez_header img {
    width: 100%;
}

#router {
    width: 100%;
    height: 20px;
}

.conti {
    width: 50%;
    float: left;
}

.conti img {
    width: 100%;
    height: auto;
    cursor: pointer;
}

#routelabel {
    font-family: "Merriweather Bold";
}


.pez-key-box {
    display: inline-block;
    position: relative;
    width: 100%;
}

.pez_excape_pod {
    font-family: "Merriweather Regular";
    color: #666;
    margin-left: 30px;
    margin-top: 20px;
}

.pez_ranking_holder {
    margin-top: 20px;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    width: 93%;
    height: 40px;
    font-family: "Merriweather Regular";
    color: #666;
    font-size: .9em;
    border-bottom: dashed 1px #999
}

.cbox {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    line-height: 30px;
    text-align: center;
    color: #fff;
    float: left
}

.cb {
    background-color: #E6EF9C;
    color: black
}

.pez_heading_holder {
    height: 30px;
    border-bottom: dashed 1px #fff;
    font-family: "Merriweather Bold";
    color: black
}

.pez_key_box_heading {
    float: left;
    left: 60px;
    font-size: 1em
}

.subhead {
    float: left;
    position: absolute;
    left: 50px
}

.plus {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    line-height: 30px;
    text-align: center;
    background-image: url(../images/open.png);
    float: right;
    cursor: pointer;
}

.minus {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    line-height: 30px;
    text-align: center;
    background-image: url(../images/close.png);
    float: right;
    cursor: pointer
}

.extra_hide {
    width: 100%;
    height: 0;
    background-color: #fff;
    margin-top: -10px;
    visibility: hidden;
    display: none;
}

.extra_display {
    -webkit-animation: suburb_box_display .6s;
    -moz-animation: suburb_box_display .6s;
    animation: suburb_box_display .6s;
    display: inline-block;
    width: 100%;
    margin-top: -10px;
    box-sizing: border-box;
    padding: 15px;
    font-family: "Merriweather Regular";
    font-size: 1em;
    line-height: 1.5em;
    color: #666666;
}

@-webkit-keyframes suburb_box_display {
    0% {
        opacity: 0;
        height: 0;
        visibility: visible
    }

    60% {
        opacity: 1;
        height: 240px
    }

    100% {
        height: 200px;
    }
}

@-moz-keyframes suburb_box_display {
    0% {
        opacity: 0;
        height: 0;
        visibility: visible
    }

    60% {
        opacity: 1;
        height: 140px
    }

    100% {
        height: 100px;
    }
}

@keyframes suburb_box_display {
    0% {
        opacity: 0;
        height: 0;
        visibility: visible
    }

    60% {
        opacity: 1;
        height: 140px
    }

    100% {
        height: 100px;
    }
}

h2 {
    text-align: center;
}

li {
    list-style-type: none;
}

/* Mobile styles */
@media only screen and (max-width: 610px) {
    .nambie {
        width: 100%;
        box-sizing: border-box;
        padding: 10px;
        display: inline-block;
        white-space: normal;
        min-height: 40px;
        font-family: "Merriweather Regular";
        font-size: 0.8em;
        border-bottom: dashed 1px black;
        line-height: 1.2em;
    }
    .companies {
        width: 100%;
        box-sizing: border-box;
        padding: 10px;
        display: inline-block;
        white-space: normal;
        min-height: 40px;
        font-family: "Merriweather Regular";
        font-size: 0.8em;
        line-height: 1.2em;
    }
    .pez_key_box_heading {
        font-size: 1em;
        margin-top: 3px;
    }
}

.solo {
    border-bottom: dashed 1px #000;
    width: 100%;
    display: inline-block;
    margin-bottom: 10px;
}


/* Desktop styles */
@media only screen and (min-width: 611px) {
    .companies {
        width: 100%;
        box-sizing: border-box;
        padding: 10px;
        display: inline-block;
        min-height: 40px;
        white-space: normal;
        font-family: "Merriweather Regular";
        font-size: 1.2em;
        line-height: 1.2em;
    }   
    .nambie {
        width: 100%;
        box-sizing: border-box;
        padding: 10px;
        display: inline-block;
        min-height: 40px;
        white-space: normal;
        font-family: "Merriweather Regular";
        font-size: 1.2em;
        border-bottom: dashed 1px black;
        line-height: 1.2em;
    }   
    .pez_key_box_heading {
        font-size: 1.3em
    }
}