* { margin: 0; padding: 0; }

     body { font-family: 'Work Sans', sans-serif; }

     h1, h2 { font-weight: bold; text-transform: uppercase; }
     h1, h2, h3 { margin-bottom: 15px; }
     h1.lined, h2.lined { border-bottom: 2px solid #3A3A3C; border-top: 2px solid #3A3A3C; color: #3A3A3C; display: inline-block; margin-bottom: 1em; padding: 3px 0 4px 0; }
     h1.gold, h2.gold, p.gold { color: #A19160; text-transform: uppercase; }

     h1 a, h2 a, h3 a { color: inherit; text-decoration: none; }

     table { border-collapse: collapse; margin-bottom: 1em; width: 100%; }
     tr { border-top: 1px solid #ccc; border-right: 1px solid #ccc; }
     th, td { border-left: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 5px; text-align: left; }

     div.mtop { margin-top: 20px !important; }

     #frame { width: 100%; }

     div.inner { margin: 0 auto; max-width: 1000px; width: 100%; }

/* Banner */

     #banner 
     { 
       /* background: #3A3A3C url('images/JUBILEEBUNTING2.png') top center no-repeat; */
       background: #3A3A3C;
       background-size: contain;
       position: relative; 
       text-align: center; 
     }
     #banner h1 { display: inline-block; margin-top: 40px; }
     #banner h1 img { width: 185px; }
     #banner #badge { display: inline-block; margin-top: 20px; position: absolute; width: 120px; }
     #banner #badge img { width: 100%; }

/* Navigation */

     #nav { background: #3A3A3C; padding: 1.5em 0; text-align: center; }
     #nav ul { line-height: 145%; list-style: none; }
     #nav ul li { display: inline-block; font-size: 0.8em; letter-spacing: 0.25em; margin: 0 10px; text-transform: uppercase; }
     #nav ul li a { color: #FAFAFA; text-decoration: none; }
     #nav ul li a:hover { color: #8FC53C; }
     #nav p { display: none; }

/* Slides */

     #slides { margin-bottom: 1em; width: 100%; }
     #slides img { width: 100%; }
     #slides ul { list-style: none; }
     #slides ul li img { width: 100%; }

/* Content */

    .content { background: white; }
    .content div.inner { background: white; }
    .content div.inner div.padd { padding: 1em; }
    .content p { line-height: 150%; margin-bottom: 0.8em; }
    .content div.wide { width: 100%; }
    .fleft { float: left; margin: 0 1em 1em 0; }
    .fright { float: right; margin: 0 1em 1em 0; }

    hr { margin: 2em 0; }

/* Strapline */

  #strapline { background: #F4AF13; margin: 20px 0; padding: 51px 0; text-align: center; width: 100%; }
  #strapline img { display: inline-block; width: 100%; }

 /* Strapline 2 */

    #strapline2 { background: white; text-align: center; width: 100%; }
    #strapline2 img { display: inline-block; width: 100%; }

/* Carousel */

        #pump__range { text-align: center; width: 100%; }
        #pumps { display: inline-block !important; margin: 0 auto; max-width: 600px; padding-top: 10px; width: 100%; }
        #pumps div { padding: 25px 0 15px 0; margin: 0; text-align: center; }
        #pumps div img { display: inline-block; text-align: center; width: 80% !important; }
        #pumps div.text { padding: 0; display: none; text-align: center; }
        #pumps div.text h4 { color: #A79569; font-size: 0.7em; margin-top: 0; text-transform: uppercase; }
        #pumps div.text h3 { color: #373738; font-size: 0.9em; text-transform: uppercase; }
        div.slick-current div.text { display: block !important; }
        .slick-center { -webkit-transform: scale(1.25); -moz-transform: scale(1.30); transform: scale(1.30); transition: 0.5s; }
        .slick-track { padding-bottom: 20px; }
        .slick-arrow { height: 91px; width: 70px;  }
        .slick-prev { background: transparent url('images/left.png') top left no-repeat !important; left: -80px; }
        .slick-next { background: transparent url('images/right.png') top left no-repeat !important; right: -80px; }


/* Eviivo */

  #eviivo { background: #3A3A3C; color: white; margin-bottom: 20px; margin-top: -21px; padding: 0 0 15px 0; position: relative; text-align: center; width: 100%; }
  #eviivo * { margin: 0; padding: 0; }
  #eviivo div.inner { margin: 0 auto !important; max-width: 1000px; width: 90%; }
  #eviivo div.inner div { display: inline-block; margin: 10px; padding: 0; vertical-align: top; }
  #eviivo div div dl { color: white; display: inline-block; margin-right: 5px; margin-top: 8px; }
  #eviivo div.inner h2 { display: inline-block; font-size: 1em; font-weight: normal; margin-top: 26px; }
  #startDate { background: white url('scripts/datepicker/date.png') 97% 3px no-repeat; padding: 4px; }
  #endDate { background: white url('scripts/datepicker/date.png') 97% 3px no-repeat; padding: 4px; }
  #submit { background: 0 !important; color: white !important; font-size: 1em; display: inline-block; margin: 18px 0 0 6px; padding: 4px; vertical-align: bottom;  }

/* Shop */

        img.shop__beer__image { float: right; }

/* History timeline */

    #history_wrapper { background: #063542; padding: 20px 0 50px 0; }
    #history { color: white; display: inline-block; margin: 0 auto; position: relative;  width: 90%; }
    div.item { min-height: 200px; border-bottom: 1px dotted #918934; margin: 10px; } /* was 240 */
    div.item h4 { border-bottom: 1px dotted #918934; font-size: 1.1em; padding-bottom: 5px; }
    div.item p { color: white; font-size: 0.8em; margin-top: 15px; }
    div.customNavigation { position: relative; }
    a.btn.play { display: none; }
    a.btn.stop { display: none; }
    a.btn.prev, a.btn.next { display: block; height: 35px; position: absolute; width: 35px; }
    a.btn.prev { background: url('images/old/arrow_left.png') top left no-repeat; bottom: -40px; left: 5%; text-indent: -5000px; }
    a.btn.next { background: url('images/old/arrow_right.png') top left no-repeat; bottom: -40px; right: 5%; text-indent: -5000px; }
    ol.wedge { list-style: none; width: 100%; }
    ol.wedge li { display: inline-block; width: 30%; }
    ol.wedge li a { background: #093542; outline: 4px solid #BEBC95; color: white; display: inline-block; font-size: 0.8em; padding: 18px 0 15px 0; display: block; text-align: center; text-decoration: none; }
    ol.wedge li a:hover { background: #014C6C; }

/* Random pub on homepage */

        #random__pub { background: #373738; }
        div.random__pub__text { color: #A79569; display: inline-block; text-align: center; vertical-align: top; width: 50%; }
        div.random__pub__text div { line-height: 145%; margin: 2em; }
        div.random__pub__image { display: inline-block; vertical-align: bottom; width: 50%; }
        div.random__pub__image img { display: block; width: 100%; }


/* Highlight section on home page (christmas/seasonal events etc) */

        #highlight { background: #DE3425; }
        #highlight_right { display: inline-block; vertical-align: top; width: 50%; }
        #highlight_right div { color: white; line-height: 145%; margin: 2em; text-align: center; }
        #highlight_right div a { color: #333; }
        #highlight_right div p { margin-bottom: 1em; }
        #highlight_left { display: inline-block; vertical-align: top; width: 50%; }
        #highlight_left img { display: block; width: 100%; }

        @media screen and (max-width: 700px) {
          #highlight_right, #highlight_left { width: 100%; }
        }


/* Map */

        #map { width: 100%; }
        #map img { display: block; width: 100%; }

          div.info_window { max-width: 250px; }
          div.info_window img { float: left; margin: 0 10px 5px 0; width: 75px; }
          div.info_window h4 { font-size: 1.1em; margin-bottom: 5px; }
          div.info_window p { margin-bottom: 10px; }

/* Find a pub */

        #find__a__pub { background: #8FC53C; padding: 2em 0; text-align: center; width: 100%; }
        #find__a__pub h3 { border-bottom: 3px solid #373738; border-top: 3px solid #373738; color: #373738; display: inline-block; font-size: 1.3em; text-transform: uppercase; }
        #find__a__pub h4 { color: #373738; font-size: 1em; line-height: 150%; margin-top: -20px; text-transform: uppercase; }
        #find__a__pub h4 a { color: white; }

/* Our History */

        #our__history { background: white; padding: 2em 0; text-align: center; width: 100%; }
        #our__history h3 { border-bottom: 3px solid #373738; border-top: 3px solid #373738; color: #373738; display: inline-block; font-size: 1.3em; text-transform: uppercase; }
        #our__history h4 { color: #A79569; font-size: 1em; margin-bottom: 1em; text-transform: uppercase; }
        #our__history h4 a { color: white; }
        #our__history p { color: #A79569; font-size: 0.8em; text-transform: uppercase; }
        #our__history img { width: 100%; }

/* Portlets */

        #portlets { background: #373738; width: 100%; }
        #portlets div.box { display: inline-block; text-align: center; vertical-align: top; width: 33.33%; }
        #portlets div.box.one { background: #8FC53C; }
        #portlets div.box.two { background: #373738; }
        #portlets div.box.three { background: #A79569; }
        #portlets div.box div { margin: 1.5em; vertical-align: top; }
        #portlets div.box div h3 { border-bottom: 3px solid #373738; border-top: 3px solid #373738; color: #373738; display: inline-block; font-size: 1.3em; margin-bottom: 1em; text-transform: uppercase; }
        #portlets div.box div h4 { color: white; font-size: 1em; margin-bottom: 1em; text-transform: uppercase; }
        #portlets div.box div p { color: red; font-size: 1em; margin-bottom: 1em; text-transform: uppercase; }
        #portlets div.box div p a { color: white; font-size: 0.7em; text-decoration: none; }
        #portlets div.box.one div p { color: #373738; }
        #portlets div.box.two div h3 { border-bottom: 3px solid white; border-top: 3px solid white; color: white; }
        #portlets div.box.two div h4 { color: #A79569; }
        #portlets div.box.two div p { color: #ccc; }
        #portlets div.box.three div p { color: #373738; }
        #portlets div.box.three div p.links a { color: #373738 !important; }

/* Join Us */

        #join__us { background: white; padding: 2em 0; text-align: center; width: 100%; }
        #join__us h3 { border-bottom: 3px solid #373738; border-top: 3px solid #373738; color: #373738; display: inline-block; font-size: 1.3em; text-transform: uppercase; }
        #join__us h4 { color: #A79569; font-size: 1em; margin-bottom: 1em; text-transform: uppercase; }
        #join__us h4 a { color: white; }
        #join__us p { color: #A79569; font-size: 0.8em; text-transform: uppercase; }

/* Brewing Process START */

        p.staging { display: none; }

        .process__number__top { background: white; border: 1px solid #093542; margin-right: 10px; padding: 5px; }
        .process__number__top.on { background: #093542; color: white; }

        #brewing__process__frame { position: relative; }
        #brewing__process__frame a { background: transparent; position: absolute; text-align: center; }
        #brewing__process__frame a span {
        background: white; display: inline-block; padding: 5px; min-width: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px;
        position: relative; top: 50%; text-align: center; transform: translateY(-50%);
        }

        #brewing__process__content { background: #093542; bottom: 15px; height: 110px; position: absolute; right: 20px; width: 550px; }
        #brewing__process__content div { color: #A29062; line-height: 140%; margin: 10px; }
        #brewing__process__content div span {
        background: white; color: black !important; display: inline-block; margin-right: 7px; padding: 5px; text-align: center; min-width: 20px;
        -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px;
        }
        #brewing__process__content div strong { color: white; }

        #brewing__process__one { height: 40px; right: 20px; top: 440px; width: 45px; }
        #brewing__process__two { height: 80px; right: 80px; top: 290px; width: 60px; }
        #brewing__process__three { height: 90px; right: 70px; top: 435px; width: 95px; }
        #brewing__process__four { height: 60px; right: 175px; top: 465px; width: 90px; }
        #brewing__process__five { height: 80px; right: 180px; top: 300px; width: 60px; }
        #brewing__process__six { height: 80px; right: 305px; top: 470px; width: 185px; }
        #brewing__process__seven { height: 40px; left: 400px; top: 465px; width: 40px; }
        #brewing__process__eight { height: 100px; left: 245px; top: 485px; width: 100px; }
        #brewing__process__nine { height: 95px; left: 62px; top: 485px; width: 155px; }
        #brewing__process__ten { height: 75px; left: 55px; top: 605px; width: 195px; }
        #brewing__beers__and__videos { margin-top: 20px; }
        #brewing__beers { display: inline-block; vertical-align: top; width: 40%; }
        #brewing__beers p { margin-left: 25px; }
        #brewing__video { display: inline-block; vertical-align: top; width: 60%; }
        #brewing__beers img { display: inline-block; width: 30%; }

/* Brewing Process END */

/* Map on our pubs page */

        #map-canvas { height: 400px; margin-bottom: 0px; margin-top: 15px; }
        #list_of_pubs { display: inline-block; vertical-align: top; width: 100%; }
        #feature__intro { display: inline-block; float: right; text-align: right; vertical-align: top; width: 37%; }
        #feature__intro img { max-width: 100%; }
        #feature__intro h3 { font-weight: lighter; margin-bottom: 10px; }
        #feature__intro p { font-size: 0.8em; margin-bottom: 10px; }

/* List of pubs */

        ul.list_of_pubs { display: inline-block; font-size: 0.8em; list-style: none; margin-right: 1.3%; vertical-align: top; width: 32.3%; }
        ul.list_of_pubs.last { margin-right: 0; }
        ul.list_of_pubs li { margin-bottom: 5px; }
        ul.list_of_pubs li a { color: #3A3A3C; text-decoration: none; }
        ul.list_of_pubs li a:hover { border-bottom: 1px solid #3A3A3C; }

/* Beer page import CSS */

        dl.clip { clear: both; float: left; margin-bottom: 20px; position: relative; width: 100%; }
        dl.clip dd.image { float: left; margin-right: 1%; width: 20%; }
        dl.clip dd.image img { margin-top: 0px; width: 100%; }
        dl.clip > dt { background: #A19160; color: white; float: left; font-size: 1.4em; margin-bottom: 10px; padding: .5em 0 .5em 1%; width: 99%; }
        dl.clip dd.text { color: #093542; float: left; margin-top: 15px; width: 70%; }

        .fluid-width-video-wrapper { margin: 55px 0 20px 0; }

        dl.clip dd.text p { font-size: 1em; margin-bottom: .9em; }
        dl.clip dd.text p a { color: #093542; text-decoration: none; }
        dl.clip dd.beer__button { float: left; text-align: right; width: 100%; }
        a.tasting__notes__link { background: url('images/old/arrow-down.png') top right no-repeat; color: #093542; padding: 3px 30px 6px 0; text-decoration: none; }
        a.tasting__notes__link.down { background: url('images/old/arrow-up.png') top right no-repeat; padding: 3px 30px 6px 0; }
        .tastingside { float: left; margin-right: 1%; width: 47%;}
        .tastingside img { margin: 15px 0; max-width: 300px; width: 90%; }
        .tastingside form { border: none; }
        .tastingside form fieldset { border: none; }
        .tastingside form fieldset dl { margin-top: 10px; }
        .tastingside form fieldset dl dt { font-weight: normal; }
        .tastingside form fieldset dl dd { margin-bottom: 4px; }

/* Homepage vacancies */

  .vacant { display: inline-block; text-align: center; vertical-align: top; width: 33.33%; }
  .vacant div { margin: 10px; }
  .vacant div img.photo { width: 100%; }


/* Pub page NEED TO SORT */

#pub_key { background: #8FC53C; line-height: 140%; margin-bottom: 15px; margin-top: 5px; padding-bottom: 1em;  width: 100%; }
h3.pub_title { background: #928A34; color: white; margin-bottom: 10px; margin-top: 10px; padding: 5px 10px; text-transform: uppercase; }
h3.pub_title.aright { text-align: right; }

.back_and_map { margin-bottom: 20px; width: 100%; }
.button { background: #093542; outline: 3px solid #BEBC95; color: white; display: inline-block; margin-bottom: 8px; padding: 8px 0; text-align: center; text-decoration: none; width: 100%; }
.button:hover { background: #014C6C; }

#mini_map { display: block; height: 300px; margin-top: 10px; width: 100%; }
#mini_map iframe { height: 300px; }

div.pub_text { color: #294E47; display: inline-block; line-height: 150%; margin: 20px 0 0 0; width: 55%; }

#more_pub_text { display: none; }

.page_text { display: inline-block; padding-top: 20px !important; margin-top: 20px; width: 100%; }
.page_text h2 { color: #3A3A3C; font-weight: lighter; margin-bottom: 15px; }
.page_text h2.larger { margin-top: 25px; }
.page_text h3 { color: #3A3A3C; font-weight: bold; margin-bottom: 15px; }
.page_text hr { display: inline-block; margin: 10px 0; width: 100%; }
.page_text p { color: #003542; margin-bottom: 15px; }
.page_text a { color: #093542; font-weight: bold; text-decoration: none; }
.page_text img.fleft { float: left; margin: 5px 15px 20px 0; max-width: 50%; }
.page_text img.fright { float: right; margin: 5px 15px 20px 0; max-width: 50%; }
.page_text #include__tasting__notes { margin-bottom: 15px; }

    #map_buttons { margin-bottom: 10px; margin-top: 15px; width: 100%; }
    #map_buttons div { background: #A19160; display: inline-block; height: 300px; max-height: 80px; margin-right: 0.9%; vertical-align: top; width: 32.3%; }
    #map_buttons div.blue { background: #003542; }
    #map_buttons div h3 { color: white; font-size: 0.95em; font-weight: lighter; margin: 12px 0 0 12px; text-transform: uppercase; }
    #map_buttons div img.100 { width: 100%; }
    #map_buttons div img.mobile { display: none; }
    #map_buttons div form { margin: 12px 0 0 12px; }
    #map_buttons div form select { width: 90%; }
    #map_buttons div.first { background: #093542 !important; }
    #map_buttons div.last { margin-right: 0; }

/* Pub Information (divs) */

    #pub_info { display: inline-block; vertical-align: top; width: 40%; }
    #pub_info div { display: inline-block; vertical-align: top; margin: 20px 0 0 20px; width: 100%;  }
    #pub_info div h4 { color: #294E47; font-weight: lighter; text-transform: uppercase; }
    #pub_info div a { color: white; }
    #pub_info div p { color: white; font-size: 0.9em; }

/* Pub Categories (icons on the right-hand-side) */

    #pub_cats { display: inline-block; margin-bottom: 20px; padding-top: 20px; vertical-align: top; text-align: center; width: 30%; }
    #pub_cats ul { list-style: none; }
    #pub_cats ul li { margin-top: 5px; text-align: left; width: 100%; }
    #pub_cats ul li a { color: white; font-size: 0.8em; text-decoration: none; }
    #pub_cats ul li img { display: inline-block; margin: 0 5px 0 0; vertical-align: middle; }

/* Pub main image */

    div.pub_slideshow { display: inline-block; margin-bottom: 20px; vertical-align: top; width: 50%; }
    div.pub_slideshow img { width: 100%; }

/* Pub Thumnails */

    div.pub_thumbs { display: inline-block; margin-bottom: 20px; width: 49.3%; }
    div.pub_thumbs div { display: inline-block; margin-bottom: 4px; margin-left: 1.25%; vertical-align: top; width: 32%; }
    div.pub_thumbs div img { width: 100%; }
    a.pub_thumbs_button { display: none; }
    div.hidden__gap { display: none; height: 45px; width: 100%; }
    .portlet_beers { width: 100%; }
    .portlet_beers img { border: 1px solid #ccc; display: inline-block; margin-right: 2%; width: 17%; }

/* News */

     h3 span.news__date { float: right; font-family: Georgia; font-size: 0.7em; font-weight: normal; margin-right: 10px; }

/* Social */

     #social { padding: 2em 0; text-align: center; width: 100%; }
     #social img { width: 40px; }

/* Footer */

     #footer { background: #3A3A3C; padding: 1em 0; position: relative; text-align: center; }
     #footer img { width: 125px; }
     #footer p.burger { display: none !important; }
     #footer ul { display: inline-block; line-height: 150%; list-style: none; margin: 0.8em 0; padding: 0 25%; width: 50%; }
     #footer ul li { display: inline-block; font-size: 0.8em; letter-spacing: 0.25em; margin: 0 10px; text-transform: uppercase; }
     #footer ul li a { color: #FAFAFA; text-decoration: none; }
     #footer ul li a:hover { color: #8FC53C; }
     #footer p { color: #A19160; display: inline-block; font-size: 0.7em; letter-spacing: 0.25em; margin: 1em 0; text-transform: uppercase; }


/* CLASSES */

  .cyellow { color: gold !important; }

/* 700 */

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

        #banner h1 img { width: 125px; }
        #banner #badge { width: 85px; }
        #nav ul { display: none; margin-top: 1em; }
        #nav ul li { margin: 0; width: 100%; }
        #nav p { display: block; }

        .slick-prev { display: none !important; }
        .slick-next { display: none !important; }

        div.random__pub__text { width: 100%; }
        div.random__pub__image { width: 100%; }

/* Map Buttons */

        #map_buttons div { height: auto; margin-bottom: 3px; min-height: 0; margin-right: 0; width: 100%; }
        #map_buttons div img { display: none; }
        #map_buttons div img.mobile { display: block; width: 100%; }
        #map_buttons div.last { padding: 10px 0 10px 0; }
        #map_buttons div.last form { margin: 0; }
        #map_buttons div.last form select { margin-left: 5%; }
        #map_buttons div.last h3 { display: none; }

/* Pub Info */

    	#pub_info { display: inline-block; vertical-align: top; width: 70%; }
    	#pub_info div { display: inline-block; vertical-align: top; margin: 10px 0 10px 15px; width: 95%;  }
    	#pub_info div h4 { color: #294E47; font-weight: lighter; text-transform: uppercase; }
    	#pub_info div p { color: white; font-size: 0.9em;  }
    	div.pub_slideshow { display: inline-block; margin-bottom: 10px; vertical-align: top; width: 100%; }
    	a.pub_thumbs_button { display: block; }
    	div.pub_thumbs { width: 100%; }
    	#brewing__beers img { display: inline-block; width: 60px !important; }
        div.pub_text { margin-left: 3%; width: 90%; }

        #footer ul { padding: 0; width: 100%; }
        #footer ul li { margin: 0; width: 100%; }

    }

/* Misc */

	.w100 { width: 100%; }

/* 600 */

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

        img.shop__beer__image { width: 100%; }

        #brewing__process__content { background: #093542; bottom: -10px; min-height: 115px; left: 4px; padding: 10px 0; position: relative; right: 0; width: 96.5%; }

        #brewing__process__one { height: 31px; right: 2%; top: 40%; width: 31px; }
        #brewing__process__two { height: 31px; right: 9%; top: 27%; width: 31px; }
        #brewing__process__three { height: 31px; right: 8%; top: 45%; width: 31px;}
        #brewing__process__four { height: 31px; right: 14%; top: 47%; width: 31px; }
        #brewing__process__five { height: 31px; right: 18%; top: 28%; width: 31px; }
        #brewing__process__six { height: 31px; right: 40%; top: 49%; width: 62px; }
        #brewing__process__seven { height: 31px; left: 400px; top: 465px; width: 31px; }
        #brewing__process__eight { height: 31px; left: 28%; right: auto; top: 50%; width: 31px; }
        #brewing__process__nine { height: 31px; left: 10%; right: auto; top: 50%; width: 31px; }
        #brewing__process__ten { height: 31px; left: 14%; right: auto; top: 58%; width: 31px; }

    }

/* 500 */

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

        #portlets div.box { width: 100%; }
        div.padd { margin-left: 5%; padding: 0 !important; width: 90%; }
        ul.list_of_pubs { margin: 0; width: 100%; }
        img.fleft, img.fright { margin: 10px 0; width: 100%; }
        #pumps div.text h4 { font-size: 0.6em; }
        #pumps div.text h3 { font-size: 0.5em; }
        span.news__date { clear: left; display: block; float: none !important; margin-top: 5px; }

    }