#activity {
    height: 90%;
}

/*IMAGES*/

#images {
    height: 96%;
    background-color: #fff;
    text-align: center;
}

#images img {
    width: auto;
    height: 80%;
    border: 1px dashed #f4ac42;
}

.imageTitle {
    height: 8%;
    vertical-align: middle;
    padding: 2%;
    text-align: center;
    color: #32343a;
    background-color: #f4ac42;
}

#imagesHolder {
    margin-top: 1%;
    height: 66%;
}

#imagesHolder .col:first-child {
    padding-right: 1%;
}

.imageAndTitle {
    display: none;
    height: 100%;
    text-align: center;
}

/*NAV*/

.navbtn {
    width: 8em;
    height: 3em;
    background-repeat: no-repeat;
    background-size: 33px;
}

#prevBtn {
    float: right;
    background-image: url('../images/arrowLeft.png');
    background-position: 0.3em center;
}

#nextBtn {
    background-image: url('../images/arrowRight.png');
    background-position: 5.7em center;
}


/*OPTION BUTTONS*/

#buttonList {
    margin: auto;
    text-align: center;
}

.optionButton {
    margin: 0.2em 0.1em;
    padding: 1em;
}

#imageTitle {
    margin-top: 0;
    margin-bottom: 0;
}

.chosenButton, .chosenButton:hover {
    background-color: #f4ac42;
}


/*RESULTS
*/

#resultsTitle, #resultsHolder {
    display: none;
}

#imageResults, #results, #userAnswers {
    height: 100%;
}

#imageResults li, #results li, #userAnswers li {
    font-family: 'Open Sans', sans-serif;
   list-style-type: none;
    color: rgba(61, 60, 60, 1.00);
    border-bottom: 1px dashed #f4ac42;
    height: 17%;
    padding: 0.5em 0;
}
#imageResults li {
    
    text-align: center;
}

#resultsHolder {
    height: 80%;
    display: none;
}

#resultsTitle {
    margin: 1% auto;
    border-bottom: 1px dashed #4d505b!important;
    background: #f4ac42;
}

#resultsTitle h1 {
    color: #4d505b;
}

.resultsImage {
    height: 100%;
}

#restartButton {
    float: right;
}


/* ----------- Large Display ----------- */

@media screen and (min-width: 1920px) and (min-height: 1080px) {
    /* Styles */
}


/* ----------- Laptop HiDPI screen ----------- */

@media screen and (min-width: 1440px) and (min-height: 900px) {
    /* Styles */
}


/* ----------- Laptop ----------- */

@media screen and (min-width: 1366px) and (min-height: 768px) {
    /* Styles */
    #navButtonRight{
    	margin-top: 0.5%;
    }
    #resultsTitle h1 {
        font-size: 1.5em !important;
    }
    #resultsTitle {
        height: 3em;
    }
    #restartButton {
        margin: 0;
    }
}


/* ----------- Laptop MDPI screen ----------- */

@media screen and (min-width: 1280px) and (min-height: 800px) {
    /* Styles */
}


/* ----------- iPad ----------- */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
    /* Styles */
    #resultsTitle h1 {
        font-size: 1.5em !important;
    }
    #resultsTitle {
        height: 3em;
    }
    #restartButton {
        margin: 0;
    }
    #buttonList{
        width: 80%;
    }

}


/* ----------- iPhone 5 ----------- */

@media only screen and (min-device-width: 568px) and (min-device-height: 320px) {
    /* Styles */
}