/********* Wrappers: *************************/
/* sets dimensions for main content areas */

/** Everything Wrapper **/
/**{*/
/*font-family: 'Oswald', sans-serif;*/
/*}*/

.everything-wrapper {
    width: 100vw;
    height: 100vh;
    position: relative;
    background-color: #EF5350;
}

/** Header Wrapper **/
.header-wrapper {
    height: 6%;
    width: 100%;
    position: relative;
    background-color: #D32F2F;
    max-height: 220px;
    font-family: 'Oswald', sans-serif;
}

/** Wheel Wrapper **/
.wheel-content-wrapper {
    height: 85%;
    width: 100%;
    position: relative;
    background-color: #FFFFFF;
}

/** Footer Wrapper **/
.footer-wrapper {
    height: 10%;
    width: 100%;
    background-color: #EF5350;
    margin: auto;
    box-sizing: border-box;
    position: relative;
    font-size: 0;
}

/** Modal Wrapper (hidden) **/
.modal-wrapper {
    box-sizing: border-box;
    display: none;
    position: absolute;
    overflow-y: auto;
    width: 90%;
    height: 90%;
    left: 5%;
    top: 5%;
    padding: 5%;
    border: 1px solid black;
    background-color: lightgray;
}

/** Wheel Wrapper (displayed) **/
.modal-wrapper.display {
    display: inherit;
}

/** Footer Button Wrappers **/
.help-button-wrapper,
.location-button-wrapper,
.settings-button-wrapper,
.photo-button-wrapper {
    width: 33.3%;
    display: inline-block;
    margin: auto;
    position: relative;
    font-size: initial;
}

/*********** Header content *************/
/* Header content broken into sub-sections */

/** Title and Logo **/

.dice-logo {
    height: 30%;
    display: inline-block;
    position: relative;
    top: 29%;
}

.main-title {
    display: inline-block;
    color: white;
    position: absolute;
    bottom: 12%;
}

.header-logo {
    height: 50%;
    min-height: 111px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    min-width: 206px;
}

/** Title **/
.header-title {
    display: inline-block;
    background-color: #F44336;
    font-family: 'Oswald', sans-serif;
    color: white;
    position: absolute;
    left: 45%;
    transform: translate(-50%, -50%);
    top: 87%;
    height: 44%;
    width: auto
}

/*********** Main Wheel content *************/
/* Main content broken into sub-sections */

/** Wheel **/
.wheel {
    position: relative;
    height: 100%;
    width: 100%;
    font-size: 0;
    background-image: url('assets/background3.jpg');
}

div.wheel-left {
    display: inline-block;
    width: 50%;
    position: relative;
    height: 100%;
    font-size: initial;
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, 0.8);
}

div.wheel-right {
    display: inline-block;
    width: 50%;
    height: 100%;
    position: relative;
    font-size: initial;
    vertical-align: top;
    background-color: rgba(255, 255, 255, 0.8);
}

.restaurant {
    display: block;
    width: 100%;
    padding: 0.5em;
    border: 1px solid black;
    position: relative;
    box-sizing: border-box;
    margin: auto;
    text-align: center;
}

.restaurant-name {
    font-weight: bold;
}

/** Help modal styling. **/
#help-modal-wrapper {
    padding-right: 5%;
    padding-left: 5%;
    font-family: 'Quicksand', sans-serif;
}

.product-name {
    font-weight: bold;
    font-style: italic;
}

/** Test Display for button generated food type **/
#display-food-type {
    border: 1px solid black;
    height: 15%;
    width: 90%;
    text-align: center;
    text-transform: capitalize;
    margin: 0 5%;
    position: relative;
}

/** Settings modal and its divs. **/
#settings-modal-wrapper hr {
    width: 90%;
}

#settings-model-wrapper button {
    align-self: center;
}

#settings-left {
    float: left;
}

#settings-right {
    float: right;
}

.settings-column {
    width: 40%;
    margin-left: 5%;
    margin-right: 5%;
}

.settings-column p {
    text-transform: capitalize;
}

/* For photos modal. */
#photos-modal-wrapper img {
    width: 20%;
    height: auto;
}

/* for wheel */
#color-wheel {
    display: inline-block;
    border-radius: 100%; /* Make this a circular element. */
    width: 70%;
    margin: 0 15%;
    position: absolute;
    -webkit-transition: -webkit-transform 2s ease-out;
}

/*********** Footer content *************/
/* Footer content broken into sub-sections */

/** Location Button **/
#location-zip-button {
    background: #E53935;
    height: 9%;
    width: 39%;
    border: white;
    box-shadow: 12px 10px 5px #EF5350;
    border-radius: 5px;
    position: relative;
    top: 15%;
    right: 41%;
    display: inline-block;
}

#location-container {
    position: absolute;
    height: 86%;
    width: 93%;
    top: 23%;
    left: 32%;
}

.userZip,
#location-current-button {
    width: 40%;
    height: 15%;
    border-radius: 6px;
    border: white;
    background: white;
    color: grey;
    text-align: center;
    font-family: 'Quicksand', sans-serif;
}

hr {
    width: 18%;
    display: inline-block;
}

#location-modal-wrapper {
    font-family: 'Quicksand', sans-serif;
}

#location-ok-button,
#help-ok-button,
#settings-ok-button,
#photos-ok-button {
    position: absolute;
    right: 5%;
    bottom: 5%;
    width: 8%;
    height: 10%;
    border-radius: 7px;
    border: white;
    background: #C62828;
    color: white;
    font-family: 'Oswald', sans-serif;
    font-size: 159%;
    cursor: pointer;

}

#help-modal-wrapper, #location-modal-wrapper, #settings-modal-wrapper {
    border-radius: 10px;
    background: #FFCDD2;
    box-shadow: 16px 16px 5px #808080;
}

/** Settings Button **/
#settings-modal-wrapper {
    font-family: 'Quicksand', sans-serif;
}

/** Camera Button **/
.camera-button-wrapper {
    background-color: lightslategrey;
}

/** photo Button **/
.photo-button-wrapper {
    background-color: yellow;
}

/** Direction Button **/
.direction-button-wrapper {
    background-color: lightslategrey;
}

.bottom-icons {
    width: 10%;
    height: auto;
    position: relative;
    display: block;
    margin: 0 auto;
    vertical-align: center;
    top: 30%;
}

/** Exit Button **/
.exit-button-wrapper {
    background-color: yellow;
}

/* Float Clearfix
=============================== */

.group::after {
    content: " ";
    display: table;
    clear: both;
}

/* Media Queries
=============================== */

@media screen and (max-width: 500px) {
    .header-wrapper,
    .wheel-content-wrapper,
    .wheel,
    .footer-wrapper,
    .restaurant {
        display: block;
        width: 100vw;
        margin: auto;
        padding: 0;
    }

    .everything-wrapper {
        /*height: 100vh;*/
        margin: 0;
        width: 100vw;

    }

    #photos-modal-wrapper img {
        width: 25%;
        height: auto;
    }

    #div-wheel-left,
    #div-wheel-right {
        width: 100%;
    }

    .wheel {
        height: 100%;
        box-sizing: border-box;
        position: relative;
    }

    #div-wheel-right {
        height: 60%;
        box-sizing: border-box;
    }

    #div-wheel-left {
        height: 40%;
    }

    #display-food-type, #spin-button {
        margin: 0;
    }

    #display-food-type {
        height: 20%;
        width: 100%;
    }

    #color-wheel {
        height: 80%;
        width: auto;
        margin: 0 27.5%;
    }

    .footer-wrapper {
        max-height: 30px;
    }

    .restaurant {
        height: 20%;
        box-sizing: border-box;
    }

    .restaurant p, .restaurant button {
        margin: 0;
    }

    .wheel-content-wrapper {
        height: 80%;
    }

    #help-modal-wrapper p {
        font-size: 75%;
    }
    .bottom-icons {
        width: 25%;
        height: auto;
        position: relative;
        display: block;
        margin: 33px auto;
        vertical-align: center;
        top: 30%;
    }
}