/* YUI 3.5.0 reset.css (http://developer.yahoo.com/yui/3/cssreset/) - http://cssreset.com */
html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}input,textarea,select{*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}

html, body {  font-family: "Changa", "Maven Pro", arial, verdana, serif; font-size: 16px; color:#285faa; line-height: 180%;  }



.red { color: #e91935; }
.blue { color:#285faa; }
.bg-red { background-color: #e91935; }
.bg-blue { background-color: #285faa; }
strong { font-weight: bold; }
a { text-decoration: none; color: inherit; }

.container { max-width: 1200px; margin: 0 auto;  }

h2 { font-size: 42px; text-transform: uppercase; font-weight: bold; text-align: center; }


header { background:#285faa; color: white; position: relative; overflow: auto; }
header .logo { float: left; }
header .logo img { height: 100px; width: auto; }
header nav { float: left; line-height: 100px;}
header nav ul li { display: inline; font-size: 18px; font-weight: bold; margin: 0 5px; }
header nav.menu { margin-left: 50px; }
header nav.right { float: right; }
header nav.right ul li a { background: #e91935; padding: 10px 20px; border-radius: 10px; }
header a { color: white; }

main img { max-width: 100%; }

#intro { margin-top: 50px; }
#story { text-align: center; }
#story h2, .page h2 { margin-bottom: 30px; }
#story p, .page p { font-size: 21px; margin: 30px auto; line-height: 36px; max-width: 800px; }

#menus { margin: 0; background: #285faa; padding: 30px 0 50px 0; }
#menus .clear { clear: both; margin-bottom: 50px; } 
#menus h2 { text-align: center; color: white;  }
#menus .menu h3 { text-transform: uppercase; }
#menus .container { box-shadows: 0px 0px 20px #6d6d6d7a;  }
#menus .row { position: relative; overflow: auto; padding: 50px 20px; }
#menus .row.nopadding { padding: 10px 20px; }
#menus .row.sub { padding: 10px 20px; }
#menus .row .col { float: left; width: calc(33% - 40px); padding: 0 20px; }
#menus .row.cols2 .col { float: left; width: calc(50% - 40px); padding: 0 20px; }
#menus .menu h3, #menus h3.menu-title { color:#285faa; color: white; font-size: 26px; padding: 10px; text-transform: uppercase; }
#menus h3.menu-title { text-align: center; }
#menus .menu > ul { margin: 0px 0; font-size: 14px; background: white; padding: 5px 15px; }
#menus .menu ul li {  margin: 10px 0; position: relative; overflow: auto; }
#menus .menu ul li .title { float: left; max-width: calc(100% - 50px); font-weight: bold; text-transform: uppercase; }
#menus .menu ul li .title.bg { background-color: #285faa; color: white; padding: 5px 10px;  }
#menus .menu ul li .title span { font-weight: normal; text-transform:none;  }
#menus .menu.wdesc ul li .title span { display: block;  }
#menus .menu ul li .price { float: right;  }

.fineprint { padding-top: 20px; text-align: center; }
.fineprint p { margin: 20px auto; color: white; max-width: 800px; }

#location { background-color: #285faa; color: white; text-align: center; margin-top: -30px; }
#location .container, #services .container, #story .container, #gallery .container { padding: 100px 50px; }
#location iframe { margin-top: 50px; width: 100%; margin-bottom: 20px; }

#services h2, #gallery h2 {  margin-bottom: 50px; }
#services { text-align: center; }
#services h3 { font-style: italic;  margin:0; }
#services h3, #services h4 { font-size: 22px; }
#services h4 { font-weight: bold; }
#services ul { position: relative; overflow: auto; margin-top: 50px; }
#services ul li { float: left; width: calc(33% - 20px); padding: 10px;  }
#services ul li i { display: block; width: 150px; height: 150px; margin: 0 auto 20px auto; background: url(imgs/icon-plate.svg) center center no-repeat;  background-size: contain; border: 3px solid #285faa; border-radius: 50%; }
#services ul li:nth-child(1) i { background-position: center -10px; }
#services ul li:nth-child(2) i { background-image: url(imgs/icon-food-pack.svg);}
#services ul li:nth-child(3) i { background-image: url(imgs/icon-plate-cover.svg); }
#services ul li p { padding: 20px; font-size: 16px; }
#services .list { font-size: 32px; line-height: 200%; text-transform: uppercase;  }
h2.join-team { margin-top: 30px; text-decoration: underline; }

#gallery  { background: url(imgs/white_wall_hash.png); }
#gallery .list { position: relative; overflow: auto; }
#gallery .list img { width: 400px; height: 400px; object-fit: cover; float: left; }
#gallery .list img.last { display: none; }

.page { margiN: 100px 0; }
form label { display: block; }
form input[type=text], form textarea { padding: 15px; width: calc(100% - 30px); }
form input[type=submit] { padding: 15px 30px; cursor:pointer; }

.alert { padding: 10px 20px; }
.alert.error { background: #ffe9e9; color: red; }
.alert.success { background: #eaffe9; color: #3aa943; }

a.back-to-top { display: inline-block; width: 48px; height: 48px; background: url(imgs/icon-up.png) center center no-repeat; background-color: #e91935;  background-size: 50%; border-radius: 50%; position: fixed;z-index: 9999; bottom: 20px; right:20px; cursor: pointer;  }  

footer { background: #285faa; color: white; padding: 50px 0; }
a.icon { display: inline-block; width: 64px; height: 64px; background: url(imgs/icon-fb.png) center center no-repeat; background-size: contain;  }
a.icon.insta { background-image: url(imgs/icon-instagram.png); }
footer .container { overflow: auto; } 
footer .icon { margin-left: 20px; }
footer .col { float: left; width: 75%; padding: 1px 0; }
footer .col.right { width: 25%; text-align: right; }

@media only screen and (max-width: 1300px) {
    #gallery .container { max-width: 900px; padding: 50px 0; margin: 0 auto; }
    #gallery .list img { width: 300px; height: 300px; object-fit: cover; float: left; }
}

@media only screen and (max-width: 900px) {
    #gallery .container { max-width: 600px; }
    #gallery .list img { width: 300px; height: 300px;  }
    #gallery .list img.last { display: block; }
}

@media only screen and (max-width: 600px) {
    #gallery .container { max-width: 100%; }
    #gallery .list img { width: 50%;  }
}


@media only screen and (max-width: 450px) {
    #gallery .list img { width: 50%; height: 200px; }
}

@media only screen and (max-width: 350px) {
    #gallery .list img { width: 100%; height: auto; }
}
/* gallery - end */


@media only screen and (max-width: 1200px) {
    .container { margin: 0 50px; }
}

@media only screen and (max-width: 990px) {
    header { padding: 30px 0 40px 0; }
    header nav.right { float: none; clear: both; margin: 0 auto; width: 100%; text-align: center;  line-height: 100%;  }
}

@media only screen and (max-width: 767px) {
    header { text-align: center; }
    header .logo { float: none; }
    header nav { display: block; width: 100%; margin:0 !important; line-height: 140% !important; padding: 20px 0; }
    header nav.right { padding: 20px 0 0 0; }
    #menus .row .col, #menus .row.cols2 .col { float: none; width: auto; padding: 0 20px; }
    #services ul { max-width: 300px; margin: 50px auto 20px auto;  padding:0; }
    #services ul li { float: none; width: auto; padding: 10px; margin:0;  }

    footer .col { float: none; width: 100%;  }
    footer .col.right { width: 100%; text-align: left; margin-top: 20px;}
    footer .icon { margin: 0 20px 0 0; }
}

@media only screen and (max-width: 450px) {
    h2 { line-height: 100%; }
    .container { margin: 0 20px; }
    #menus .row { padding: 50px 0; }
    #location .container, #services .container, #story .container, #gallery .container { padding: 70px 20px; }
    #services .list { line-height: 100%; }
    #services .list p { margin: 30px 0; }
}