* { margin: 0; padding: 0; }

  body { font-family: 'Inria Serif', serif; font-size: 1.3em; }

  #help { background: #F8E71C; border: 1px dashed #ccc; font-family: monospace; margin: 1.11em; padding: 1.11em 2.22em; }
  #help * { background: #F8E71C; }
  #help p { margin-bottom: 1em; }

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

  #frame { margin: 0 auto; max-width: 1361px; width: 100%; }

  #contact_top { background: #8C9800; padding: 0.4em 0; text-align: center; width: 100%; }
  #contact_top p.smaller { color: white; font-size: 0.9em; line-height: 130%; }
  #contact_top p.smaller span { display: inline-block; margin-right: 20px; }
  #contact_top p.smaller a { color: white; text-decoration: none; }
  #contact_top p.smaller a.button { border: 1px solid white; color: white; display: inline-block; margin-right: 10px; padding: 5px; text-decoration: none; }
  #contact_top p.smaller a.button:hover { background: white; color: black; }

  span.phone-icon { background: url('../images/phone-icon.png') center left no-repeat; padding-left: 21px; }
  span.map-icon { background: url('../images/map-icon.png') center left no-repeat; padding-left: 15px; }

  /* Banner */

  #banner { text-align: center; width: 100%; }
  #banner img { margin-top: 12px; max-width: 450px; width: 90%; }


  /* Nav */

  #nav { margin-bottom: 36px; width: 100%; }
  #nav div.inner { background: url('images/dots-on-white.png') top left repeat-x; padding-top: 18px; }
  #nav div.dots { background: url('images/dots-on-white.png') bottom left repeat-x; padding-top: 16px; max-width: 882px; margin: 0 auto; width: 100%; }
  #nav p { display: none; }
  #nav ul { list-style: none; text-align: center; }
  #nav ul li { display: inline-block; font-size: 0.8em; margin-left: 11px; margin-right: 11px; }
  #nav ul li a { color: #606060; text-decoration: none; text-transform: uppercase; }
  #nav ul li a:hover { color: #8C9800; }


  /* Strapline */

  #strapline { color: #606060; margin-left: auto; margin-top: 20px; margin-right: auto; text-transform: uppercase; text-align: center; width: 90%; }
  #strapline h1 { font-weight: normal; font-size: 2em; letter-spacing: 2px; margin-bottom: 11px; }
  #strapline h1 span { color: #8C9800; }
  #strapline p { color: color: #606060; font-size: 0.95em; letter-spacing: 1px; line-height: 190%; }

    @media screen and (max-width: 400px) {
      #strapline h1 { font-size: 1em; }
      #strapline p { font-size: 0.8em; }
    }

    /* Slideshow */

    div.bx-wrapper, .bx-wrapper
    {
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        border: 0 !important;
        box-shadow: none;
    }





  /* Portlets */

  #portlets { margin-top: 50px; padding: 0; text-align: center; width: 100%; }
  #portlets div.inner { }
  #portlets div.inner > div.box { background: url('images/dots-on-white.png') bottom left repeat-x; color: #334B58; display: inline-block; font-size: 0.8em; margin: 0; padding-bottom: 18px; position: relative; text-align: center; vertical-align: top; width: 31%; }
  #portlets div.inner > div.box img { display: block; width: 100%; }
  #portlets div.inner > div.box a { text-decoration: none; }
  #portlets div.inner > div.box a:hover h3 { color: #8C9800; font-size: 0.9em; }
  #portlets div.inner > div.box h3 { background: url('images/dots-on-white.png') top left repeat-x; color: #888; display: block; font-size: 1em; font-weight: normal; padding-top: 18px; margin-top: 28px; text-decoration: none; text-transform: uppercase; width: 100%; }
  #portlets div.inner > div.box.s1 { margin-left: 3.5%; margin-right: 3.5%;  }

  div.overlay { background: rgba(10,30,46,0.65); color: white; display: block; display: none; font-size: 0.8em; height: 58%; margin-left: 10%; line-height: 150%; margin-top: 10%; position: absolute; width: 80%; }
  div.overlay div { margin: 2em; display: table; }
  div.overlay div p { font-size: 1.3em; font-weight: lighter; line-height: 180%; display: table-cell; vertical-align: middle; text-align: center;  }

    @media screen and (max-width: 500px) {
      #portlets div.inner > div { margin-top: 25px !important; margin-left: 0 !important; width: 100% !important; }
      #portlets div.inner > div.s1 { margin-left: 0; margin-right: 0 !important;  }
      #portlets div.inner > div.s2 { margin-right: 0 !important; }
      #portlets div.inner { width: 90%; }
      div.overlay { height: auto; width: 82%; }
    }


  /* Video */

  #video { background: #626363; margin-bottom: 30px; margin-top: 36px; width: 100%; }
  #video div.inner { }
  #video div.left_video { display: inline-block; vertical-align: bottom; width: 49.5%; }
  #video div.right_video { display: inline-block; margin-left: 1%; vertical-align: bottom; width: 49.5%; }
  #video div div iframe { vertical-align: bottom; }

	/* Map */

	#map { margin-top: 30px; position: relative; width: 100%; }


  /* Grape */

  #grape { margin-top: 30px; position: relative; width: 100%; }
  #grape > div { }
  #grape img { width: 100%; }

  #slate { background: rgba(10,30,46,0.35); padding: 20px; position: absolute;  text-align: center; top: 50%; left: 50%; max-width: 882px; transform: translate(-50%, -50%); width: 100%;  }
  #slate h4 { color: white; font-size: 1.6em; font-weight: lighter; margin-bottom: 0.5em; text-transform: uppercase; }
  #slate h5 { color: #8C9800; font-size: 1.1em; font-weight: lighter; text-transform: uppercase; }

  @media screen and (max-width: 1380px) {
    #slate h4 { font-size: 1.5em; }
    #slate h5 { font-size: 0.8em; }
  }

  @media screen and (max-width: 1000px) {
    #slate { transform: translate(-50%, -50%); width: 100%; }
    #slate h4 { font-size: 1.5em; }
    #slate h5 { font-size: 0.8em; }
  }

  @media screen and (max-width: 780px) {
    #grape { display: none; }
  }


  /* Content */

  #content { color: #686A6A; line-height: 200%; margin-top: 35px; text-align: center; width: 100%; }
  #content h2 { color: #8C9800; font-size: 1.3em; font-weight: normal; letter-spacing: 1px; margin-bottom: 0.5em; }
  #content h3 { color: #8C9800; font-size: 1em; font-weight: normal; letter-spacing: 1px; margin-bottom: 0.5em; }
  #content p { font-size: 0.8em; font-weight: normal; line-height: 175%; margin-bottom: 0.8em; }
  #content p a { color: inherit; }

  @media screen and (max-width: 400px) {
    #content div.inner { width: 90%; }
  }


  /* About Us page */

  div.col { display: inline-block; vertical-align: top; width: 47.5%; }
  div.col.left { margin-right: 5%; }
  div.col h2 { border-bottom: 2px dotted #626363; border-top: 2px dotted #626363; color: #626363 !important; display: block; padding: 0.5em 0; margin-bottom: 25px; margin-top: 15px; text-decoration: none; width: 100%; }
  div.col p { color: #686A6A; font-size: 0.9em; line-height: 170%; text-align: justify; }
  div.col img { max-width: 300px; text-align: center; width: 80%; }

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

      div.col { display: inline-block; margin: 10px 2.5% !important; width: 95%; }

    }


/* Form */

    form { text-align: center; }
    form * { margin: 0; }
    fieldset { border: 1px solid #ccc; margin-bottom: 20px; margin-top: 20px; padding: 20px; }
    fieldset dl { margin-bottom: 5px; margin-left: 29%; width: 49%; }
    fieldset dl dt { display: inline-block; font-size: .9em; padding-right: 2%; text-align: right; width: 34%; }
    fieldset dl dd { display: inline-block; text-align: left; width: 55%; }
    fieldset dl dd input, fieldset dl dd select { width: 100%; }


  /* Footer */

  #footer { background: #8C9800; color: white; font-weight: 300; margin-top: 35px; padding: 25px 0; text-align: center; }
  #footer h2 { font-weight: 300; margin-bottom: 1em; }
  #footer h2 a { color: white; }
  #footer p { font-size: 0.8em; line-height: 150%; margin-bottom: 0.7em; }
  #footer p a { color: white; }