/* Reset */

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; } 
ol, ul { list-style:none; }
a { outline:0; }


/* Pocket Grid  */

.block-group, .block, .block-group:after, .block:after, .block-group:before, .block:before {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box; }
.block-group { *zoom:1; }
.block-group:before, .block-group:after { display:table; content:""; line-height:0; }
.block-group:after { clear:both; } 
.block-group { list-style-type:none; padding:0; margin:0; }
.block-group > .block-group { clear:none; float:left; margin:0 !important; }
.block { float:left; width:100%; }


 /* Dropdown Button */
.dropbtn { background-color: transparent; color: #111; padding-right: 10px; font-size: 36px; border: none; cursor: pointer; }
.dropbtn:hover, .dropbtn:focus { background-color: transparent; }
.dropdown { position: relative; display: inline-block; }
.dropdown-content { display: none; position: absolute; right:0; font-size: 20px; background-color: #fff; min-width: 220px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; }
.dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; }
.dropdown-content a:hover {background-color: #ddd;}
.show {display:block;} 



/* css  */

@font-face { font-family: opensans-regular; src: url(../fonts/opensans-regular.woff2); src: url(../fonts/opensans-regular.woff); }

@font-face { font-family: opensans-condensed; src: url(../fonts/opensans-condensed-300.woff2); src: url(../fonts/opensans-condensed-300.woff); }

body { font-family: opensans-regular, sans-serif; background:#fff; color:#333; }



/* Mobile First  - screen <400px */

body { margin:0 auto; max-width:400px; }

#wrapper { margin:0 10px 50px 10px; }

#navbar-vend { position:fixed; top:0; z-index:160; background:#fff; border-bottom:1px solid #ddd; height:45px; max-width:480px; width:96%; }
.navbar-vend-left { float:left; width:76%; padding:16px 0 0 8px; font-size:20px; font-weight:600; }
.navbar-vend-right { float:right; width:19%; padding-right:4px; text-align:right; font-size:36px; cursor:pointer }

b { font-weight:600; color:#111; }

.clear { clear: both; }
.orange { color:#df7402; }
.canvas { margin-top:60px; }

a, a:link, a:visited, a:active { text-decoration:none; color:#404040; }
a:hover { color:#404040; }

img.scale-b0-center { max-width:100%; height:auto; border:0; display:block; margin-left:auto; margin-right:auto; margin-top:20px; }

.centre-align { text-align:center; }

h1 { font-size:24px; line-height:28px; margin:40px 0 2px 0; padding:4px 0 8px 0; font-weight:bold; }

p { font-size:14px; line-height:19px;}
p.one { font-size:24px; line-height:28px; margin:40px 0 2px 0; padding:4px 0 8px 0; font-weight:bold; }
p.two { font-size:15px; margin:0 6%; }

.subtitle01 { font-size:16px; line-height:20px; margin-top:32px; font-weight:bold; }





@media only screen and (min-width:400px) {

body { max-width:760px; padding:0 20px; }

#navbar-vend { max-width:740px; width:100%; height:54px; }

.canvas { margin-top:66px; }

p { font-size:18px; line-height:24px; }
p.two { font-size:19px;  margin:0 18%; }

.subtitle01 { font-size:24px; line-height:24px; margin-top:44px; }

}