/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

img {
    width: 100%;
    vertical-align: top;
}

body {
    font-family: 'Dosis', sans-serif;
    font-family: 'Montserrat', sans-serif;
    font-family: 'Roboto', sans-serif;
}

/* desktop css */

#container {
    background-color: #F5F5F5;
}

#navlogo {
    width: 12.583958333333333%;
    background-color: #474323;
    padding-left: 15px;
    padding-top: 15px;
}

nav {
    width: 100%;
    background-color: #474323;
    display: flex;
    justify-content: flex-end;
    padding-right: 10px;
}

#header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #474323;
}

#about {
    display: flex;
    justify-content: space-around;
    padding-top: 30px;
    padding-bottom: 30px;
}

#left {
    width: 48.75%;
    background-color: #C2895E;
}

#right {
    width: 51.458333333333333%;
    background-color: #C2895E;
    padding-top: 70px;
    padding-left: 50px;
    padding-right: 50px;
}

h2 {
    color: #240F0A;
    font-family: 'Dosis', sans-serif;
    font-size: 25px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

#ourmenu {
    margin: auto;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding-bottom: 20px;
    padding-top: 50px;
    padding-left: 100px;
    padding-right: 100px;
}

.col {
    width: 21.270347222222222%;
    padding: 30px;
}

.col2 {
    width: 25.625%;
    padding: 30px;
}

.col3 {
    width: 25.625%;
    padding: 30px;
}


#foodcolumns {
    display: flex;
    justify-content: center;
}

#menubutton {
    width: 12.232361111111111%;
    display: flex;
    justify-content: center;
    margin: auto;
}

#learnmorebutton {
    width: 25%;
    display: flex;
    justify-content: center;
    margin:auto;
    padding: 25px;
}

#hourslocation {
    display: flex;
    justify-content: space-around;
    padding-bottom: 30px;
    padding-top: 80px;
}

#left1 {
    width: 39.791666666666667%;
    background-color: #9B532B;
    padding: 70px;
}

#right1 {
    width: 63.680555555555556%;
}

#addressicon {
    width: 3.666666666666667%;
    display: inline-block;
}

#clockicon {
    width: 4.584583333333333%;
    display: inline-block;
}

#footer {
    background-color: #474323;
    display: flex;
    justify-content: space-between;
    padding: 20px;
    align-items: center;
}

#left2 {
    padding: 10px;
}

#middle {
    width: 29.791666666666667%;
}

#coffeecup {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#locationmap {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#iconset {
    width: 60%;
    margin-top: 20px;
}

/* menu */

.beveragestitle {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

h2.beveragestitle {
    color: #240F0A;
    font-family: 'Dosis', sans-serif;
    font-size: 40px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

#beveragemenu {
    display: flex;
    justify-content: space-evenly;
    padding: 30px;
    padding-bottom: 50px;
}

#sweettreatsmenu {
    display: flex;
    justify-content: space-evenly;
    padding: 30px;
    padding-bottom: 50px;
}

#lightbitesmenu {
    display: flex;
    justify-content: space-evenly;
    padding: 30px;
    padding-bottom: 50px;
}

.lightbitestitlenames {
    text-align: center;
    background: #C2895E;
    padding: 15px;
    margin-bottom: 30px;
}

.titlenames {
    text-align: center;
    background: #474323;
    padding: 15px;
    margin-bottom: 30px;
}

.sweetstitlenames {
    text-align: center;
    background: #874C20;
    padding: 15px;
    margin-bottom: 30px;
}



a {
    color: #F5F5F5;
    font-family: 'Dosis', sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    padding: 16px;
    text-decoration: none;
}

p.about {
    color: #F5F5F5;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 20px;
}

h2.about {
    color: #F5F5F5;
    font-family: 'Dosis', sans-serif;
    font-size: 25px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 20px;
}


h2.menucaption {
    color: #F4DFC9;
    font-family: 'Dosis', sans-serif;
    font-size: 30px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

h2.menu {
    color: #240F0A;
    font-family: 'Dosis', sans-serif;
    font-size: 40px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 20px;
}

p.menu {
    color: #240F0A;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: 27px; /* 158.824% */
}

p.menupage {
    color: #240F0A;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.line {
    border-top: 1px solid #240F0A;
    width: 100%;
    margin-top: 15px;
    margin-bottom: 15px;
}

h2.menutitle {
    color: #9B532B;
    font-family: 'Dosis', sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 7px;
}

h2.caption {
    color: #240F0A;
    text-align: center;
    font-family: 'Dosis', sans-serif;
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    padding: 15px;
}

h2.locationhours {
    color: #F5F5F5;
    font-family: 'Dosis', sans-serif;
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 20px;
}

p.location {
    color: #F5F5F5;
    font-family: 'Montserrat', sans-serif;
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    display: inline;
}

p.hours {
    color: #F5F5F5;
    font-family: 'Montserrat', sans-serif;
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    display: inline-block;
}

h2.footercaption {
    color: #F5F5F5;
    font-family: 'Dosis', sans-serif;
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 6px;
}

p.footerp {
    color: #F5F5F5;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    /* margin-bottom: 30px; */
}

#contactus {
    margin-top: 20px;
}

#contactmap {
        width: 100%;
        height: 100%;
        object-fit: cover;
}

p.gathering {
    color: #F5F5F5;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 20px;
}

#leftimage {
    width: 56.736111111111111%;
}

/* about */

#ourstory {
    margin: auto;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding-bottom: 20px;
    padding-top: 55px;
    padding-left: 100px;
    padding-right: 100px;
}

h2.storytitle {
    margin-bottom: 20px;
}

p.story {
    color: #240F0A;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 27px; /* 168.75% */
}

#care {
    display: flex;
    justify-content: space-around;
    padding-top: 30px;
    padding-bottom: 40px;
}

#right4 {
    width: 51.458333333333333%;
    background-color: #C2895E;
    padding-top: 70px;
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 50px;
}

#left4 {
    width: 48.75%;
    background-color: #C2895E;
}

#coffeecare {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#gatheringplace {
    margin: auto;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding-bottom: 50px;
    padding-top: 10px;
    padding-left: 100px;
    padding-right: 100px;
}

#gatheringimage {
    padding-bottom: 15px;
}

/* contact */

#contactus1 {
    display: flex;
    justify-content: space-around;
    background-color: #C2895E;
    margin-top:50px;
    margin-bottom: 50px;
}

#left3 {
    width: 43.611111111111111%;
}

#phoneicon {
    width: 3.958333333333333%;
    float: left;
    margin-right: 20px;
}

#mailicon {
    width: 3.958333333333333%;
    float: left;
    margin-right: 20px;
}

#addressicon2 {
    width: 3.958333333333333%;
    float: left;
    margin-right: 20px;
}

#right3 {
    width: 59.861111111111111%;
    padding: 100px;
}

h2.contacttitle {
    color: #F5F5F5;
    font-family: 'Dosis', sans-serif;
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 20px;
}

p.contacttext {
    display: inline-block;
    color: #F5F5F5;
    font-family: 'Montserrat', sans-serif;
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 20px;
}


/* tablet size */

@media screen and (max-width: 834px){


    #left {
        width: 48.920863309352518%;
        background-color: #C2895E;
    }

    h2.about {
        color: #F5F5F5;
        font-family: 'Dosis', sans-serif;
        font-size: 27px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }

    p.about {
        color: #F5F5F5;
        font-family: 'Montserrat', sans-serif;
        font-size: 17px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

    p.menu {
        color: #240F0A;
        text-align: center;
        font-family: 'Montserrat', sans-serif;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 26px; /* 162.5% */
    }

    h2.caption {
        color: #240F0A;
        font-family: 'Dosis', sans-serif;
        font-size: 24px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }

    #menubutton {
        width: 20.023980815347722%;
        display: flex;
        justify-content: center;
        margin: auto;
        padding-top: 20px;
    }

    #learnmorebutton {
        width: 40.146282973621103%;
        display: flex;
        justify-content: center;
        margin: auto;
        padding: 25px;
        padding-bottom: 50px;
    }    

    #navlogo {
        width: 21.727697841726619%;
    }

    a {
        color: #F5F5F5;
        font-family: 'Dosis', sans-serif;
        font-size: 25px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        margin-right: 20px;
        padding-right: 10px;
    }

    nav {
        width: 100%;
        background-color: #474323;
        display: flex;
        justify-content: flex-end;
    }    

    .col {
        width: 35.500719424460432%;
        padding: 30px;
    }
    
    #foodcolumns {
        display: flex;
        flex-wrap: wrap;
    }

    #ourmenu {
        margin: auto;
        display: flex;
        align-items: center;
        flex-direction: column;
        padding-bottom: 20px;
        padding-top: 20px;
        padding-left: 100px;
        padding-right: 100px;
    }

    #hourslocation {
        display: flex;
        justify-content: space-around;
        padding-bottom: 30px;
        padding-top: 60px;
    }

    p.location {
        color: #F5F5F5;
        font-family: 'Montserrat', sans-serif;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        display: inline;
    }
    
    p.hours {
        color: #F5F5F5;
        font-family: 'Montserrat', sans-serif;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        display: inline-block;
    }    

    h2.locationhours {
        color: #F5F5F5;
        font-family: 'Dosis', sans-serif;
        font-size: 28px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        margin-bottom: 20px;
    }

    #addressicon {
        width: 5.666666666666667%;
        display: inline-block;
    }
    
    #clockicon {
        width: 7.584583333333333%;
        display: inline-block;
    }

    #right1 {
        width: 63.680555555555556%;
    }

    h2.footercaption {
        color: #F5F5F5;
        font-family: 'Dosis', sans-serif;
        font-size: 24px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        margin-bottom: 6px;
    }

    #left2 {
        width: 31.5310551558753%;
    }

    #iconset {
        width: 40.429256594724221%;
    }

    p.footerp {
        color: #F5F5F5;
        font-family: 'Montserrat', sans-serif;
        font-size: 15px;
        font-style: normal;
        font-weight: 300;
        line-height: normal;
        /* margin-bottom: 30px; */
    }

    /* menu */

    #beveragemenu {
        display: flex;
        flex-wrap: wrap;
    }

    #sweettreatsmenu {
        display: flex;
        flex-wrap: wrap;
    }

    #lightbitesmenu {
        display: flex;
        flex-wrap: wrap;
    }

    .col2 {
        width: 41.244604316546763%;
        padding: 30px;
    }

    .col3 {
        width: 91.247002398081535%;
    }

    #lightbites {
        height: 356px;
    }

    #lightbiteshero {
            width: 100%;
            height: 100%;
            object-fit: cover;
    }

    #sweettreats {
        height: 356px;
    }

    #sweettreatshero {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    #heromenuimage {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* contact */

    #right3 {
        width: 59.861111111111111%;
        padding: 50px;
    }

    #phoneicon {
        width: 5.958333333333333%;
        float: left;
        margin-right: 20px;
    }
    
    #mailicon {
        width: 5.958333333333333%;
        float: left;
        margin-right: 20px;
    }
    
    #addressicon2 {
        width: 3.958333333333333%;
        float: left;
        margin-right: 20px;
    }
    
   

}

/* phone */
@media screen and (max-width: 550px) {

  #navlogo {
        width: 28.851025641025641%;
    }

    #about {
        display: flex;
        flex-direction: column-reverse;
        padding-top: 0px;
    }

    #left {
        width: 100%;
    }

    #right {
        width: 100%;
        box-sizing: border-box;
        padding-bottom: 40px;
    }

    #foodcolumns {
        display: block;
        padding-left: 10%;
        padding-right: 10%;
    }
    
    .col {
        width: 100%;
        box-sizing: border-box;
    }

    #heroimage {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    #hero {
        height: 390px;
    }

    #menubutton {
        width: 33.4%;
        display: flex;
        justify-content: center;
        margin: auto;
        padding-top: 20px;
        padding-bottom: 2px;
    }

    #learnmorebutton {
        width: 35.6%;
        display: flex;
        justify-content: center;
        margin: auto;
        padding: 25px;
    }    

    #hourslocation {
        display: flex;
        flex-direction: column-reverse;
        padding-bottom: 0px;
    }

    #right1 {
        width: 100%;
    }

    #left1 {
        width: 100%;
        padding: 0px;
        box-sizing: border-box;
        padding: 60px;
    }

    #footer {
        display: block;
        width: 100%;
        padding: 0%;
        box-sizing: border-box;
        padding: 40px;
    }

    #middle {
        width: 100%;
    }

    #right2 {
        width: 100%;
    }

    #left2 {
        width: 57.664%;
        margin: auto;
    }

    #middle {
        margin-bottom: 20px;
    }

    #addressicon {
        margin-bottom: 20px;
        margin-right: 10px;
        width: 4.842%;
    }

    h2.locationhours {
        margin-bottom: 40px;
    }

    #clockicon {
        width: 5.842%;
        margin-right: 10px;
    }

    /* menu */

   .col2 {
        width: 91.247002398081535%;
   }

   #care {
        display: flex;
        flex-direction: column-reverse;
   }

   #right4 {
    width: 100%;
    box-sizing: border-box;
   }

   #left {
    height: 400px;
   }

   #abouthero {
    height: 400px;
   }

   #aboutheropic {
    width: 100%;
    height: 100%;
    object-fit: cover;
   }

   #gatheringimage {
    width: 100%;
    height: 400px;
    object-fit: cover;
   }

   #gathering {
    width: 100%;
    height: 100%;
    object-fit: cover;
   }

    /* about */

    #contactus1 {
        display: flex;
        flex-direction: column-reverse;
    }

    #phoneicon {
        width: 7.958333333333333%;
        float: left;
        margin-right: 20px;
    }
    
    #mailicon {
        width: 7.958333333333333%;
        float: left;
        margin-right: 20px;
    }
    
    #addressicon2 {
        width: 5.958333333333333%;
        float: left;
        margin-right: 20px;
    }

    #right3 {
        width: 59.861111111111111%;
        padding: 90px;
    }

    #left3 {
        width: 100%;
    }

    #contacthero {
        height: 400px;
    }

    #contactheropic {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    #contactus1 {
        display: flex;
        justify-content: space-around;
        background-color: #C2895E;
        margin-top:20px;
        margin-bottom: 20px;
    }

    a {
        color: #F5F5F5;
        font-family: 'Dosis', sans-serif;
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        margin-right: 20px;
        padding-right: 10px;
    }

    



}