/*
Theme Name: Vital Effect Lohse
Theme URI: http://underscores.dobsondev.com/
Author: Alex Dobson
Author URI: http://dobsondev.com/
Description: SUP?! I'm a theme called <code>Vital Effect Lohse</code> based on <em>underscores</em>. I was created using the DobsonDev Underscores Theme generator script (http://underscores.dobsondev.com/), which creates a theme using Underscores (http://underscores.me/) as a starting base with Foundation included as a great front-end framework. I find this combination extremely powerful and easy to work with. I hope you enjoy your theme!
Version: 1.0.0
License: The MIT License (MIT)
License URI: http://opensource.org/licenses/MIT
Text Domain: velohse
Tags:

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

Vital Effect Lohse is based on Underscores http://underscores.me/, (C) 2012-2017 Automattic, Inc.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------

1.0 Foundation Changes
2.0 Reusable Styles
3.0 Menus
4.0 Accessibility
5.0 Alignments
6.0 Clearings
7.0 Widgets
8.0 Content
  8.1 Posts and pages
  8.2 Asides
  8.3 Comments
9.0 Infinite scroll
10.0 Media
  10.1 Captions
  10.2 Galleries
--------------------------------------------------------------*/

@import url('https://fonts.googleapis.com/css?family=Ubuntu:400,500,700');

/*--------------------------------------------------------------
1.0 Foundation Changes
--------------------------------------------------------------*/

ol, ul {
  margin-left: 2em;
}

/*--------------------------------------------------------------
2.0 Reusable Styles
--------------------------------------------------------------*/

ul.twoCol {
  -moz-column-count: 2;
  -moz-column-gap: 1em;
  -webkit-column-count: 2;
  -webkit-column-gap: 1em;
  column-count: 2;
  column-gap: 1em;
}

ul.threeCol {
  -moz-column-count: 3;
  -moz-column-gap: 1em;
  -webkit-column-count: 3;
  -webkit-column-gap: 1em;
  column-count: 3;
  column-gap: 1em;
}

i.fa-facebook-square,
i.fa-facebook-official,
i.fa-facebook-f,
i.fa-facebook {
  color: #3B5998;
}

i.fa-twitter-square,
i.fa-twitter {
  color: #55ACEE;
}

i.fa-instagram {
  color: #BC2A8D;
}

i.fa-linkedin-square,
i.fa-linkedin {
  color: #0077B5;
}

i.fa-google-plus-square,
i.fa-google-plus {
  color: #D34836;
}

i.fa-youtube-square,
i.fa-youtube-play,
i.fa-youtube {
  color: #E52D27;
}

i.fa-rss-square,
i.fa-rss {
  color: #FF6600;
}

div.div-line {
  width: 50%;
  max-width: 200px;
  margin-top: 13px;
  margin-bottom: 13px;
  border-top: 1px solid #09F;
}

div.div-line.extended {
  width: 75%;
  max-width: 100%;
}

div.div-line.centered {
  margin: 13px auto;
}

div.div-line.white {
  border-top: 1px solid #FFF;
}

div.div-line.black {
  border-top: 1px solid #000;
}

a.btn {
  font-size: 1.15em;
  line-height: 1.05em;
  font-weight: bold;
  text-align: center;
  color: #FFF;
  border-radius: 5px;
  text-decoration: none;
  display: inline-block;
  vertical-align: top;
  text-transform: uppercase;
  -webkit-transition: background .3s ease 0s;
  transition: background .3s ease 0s;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, .5);
  padding: 15px 22px 13px;
  border-bottom: 3px solid #005288;
  background: #09F;
}

a.btn:hover {
  background: #006DB3;
}

/*--------------------------------------------------------------
3.0 Menus
--------------------------------------------------------------*/
nav#top-header-nav ul,
nav#top-header-nav ul ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav#top-header-nav ul li {
  position: relative;
}

nav#top-header-nav ul a {
  padding: 10px 20px;
  display: block;
  text-decoration: none;
}

/* Level 1 Drop Down Menu */
nav#top-header-nav ul > li {
  display: inline-block;
  vertical-align: top;
}

/* Level 2 Drop Down Menu */
nav#top-header-nav ul > li > ul {
  text-align: left;
  width: 175px; /* change value if you want a bigger/smaller menu */
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 9999999;
}

nav#top-header-nav ul > li > ul > li {
  width: 175px; /* change value if you want a bigger/smaller menu */
}

nav#top-header-nav ul > li:hover > ul {
  display: block;
}

/* Level 3 Drop Down Menu */
nav#top-header-nav ul > li > ul > li > ul {
  text-align: left;
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  z-index: 9999999;
}

nav#top-header-nav ul > li > ul > li:hover > ul {
  display: block;
}

/* Small menu. */
.menu-toggle,
.site-navigation.toggled ul {
  display: block;
}

/* Mobile Menu */
@media screen and (max-width: 37.5em) {
  button.menu-toggle,
  nav#top-header-nav.toggled .nav-menu {
    display: block;
    margin: 15px auto;
    font-size: 20px;
  }

  button.menu-toggle {
    border: 5px solid #000;
    border-radius: 15px;
    padding: 15px;
  }

  nav#top-header-nav {
    float: none;
    width: 100%;
    text-align: center;
    padding: 5px 0;
  }

  nav#top-header-nav ul {
    display: none;
  }

  nav#top-header-nav ul {
    float: none;
    position: absolute;
    width: 100%;
    margin: 0;
    z-index: 99;
  }

  nav#top-header-nav ul li {
    position: relative;
    float: none;
    display: block;
    padding: 0;
  }

  /* Level 2 Drop Down Menu */
  nav#top-header-nav ul > li > ul {
    position: relative;
    float: none;
    display: block;
    width: 100%;
    z-index: 999;
    left: 0;
    top: 0;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    box-shadow: none;
  }

  nav#top-header-nav ul.sub-menu {
    width: 100%;
  }

  nav#top-header-nav ul.sub-menu > li {
    width: 100%;
  }

  nav#top-header-nav ul > li > ul li {
    text-align: center;
  }

  /* Level 3 Drop Down Menu */
  nav#top-header-nav ul > li > ul > li > ul {
    position: relative;
    float: none;
    display: block;
    width: 100%;
    z-index: 999;
    left: 0;
    top: 0;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    box-shadow: none;
  }

  nav#top-header-nav ul > li > ul > li > ul li {
    text-align: center;
  }

  nav#top-header-nav ul ul li a {
    float: none;
    width: 100%;
    line-height: normal;
    font-variant: normal;
    font-weight: normal;
    text-transform: none;
  }

  nav#top-header-nav ul li:hover > ul,
  nav#top-header-nav ul li.focus > ul {
    left: auto;
  }

  nav#top-header-nav ul ul li:hover > ul,
  nav#top-header-nav ul ul li.focus > ul {
    left: auto;
  }
} /* End Mobile Menu */

/*
  Full Screen Menu Toggle CSS
  ===> DO NOT TOUCH PREFERABLY BUT YOU MAY NEED TO CHANGE THE 'min-width' VALUE <===
*/
@media screen and (min-width: 40em) {
  .menu-toggle {
    display: none;
  }
  .site-navigation ul {
    display: block;
    left: 0;
  }
}

/* Navigation Arrows */
.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
  margin: 0 0 1.5em;
  overflow: hidden;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
  float: left;
  width: 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
  float: right;
  text-align: right;
  width: 50%;
}

/*--------------------------------------------------------------
4.0 Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers. */
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

.screen-reader-text:hover,
.screen-reader-text:active,
.screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  color: #21759b;
  display: block;
  font-size: 14px;
  font-size: 0.875rem;
  font-weight: bold;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000; /* Above WP toolbar. */
}

/*--------------------------------------------------------------
5.0 Alignments
--------------------------------------------------------------*/
.alignleft {
  display: inline;
  float: left;
  margin-right: 1.5em;
}

.alignright {
  display: inline;
  float: right;
  margin-left: 1.5em;
}

.aligncenter {
  clear: both;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/*--------------------------------------------------------------
6.0 Clearings
--------------------------------------------------------------*/
.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {
  content: "";
  display: table;
}

.clear:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after {
  clear: both;
}

/*--------------------------------------------------------------
7.0 Widgets
--------------------------------------------------------------*/
.widget {
  margin: 0 0 1.5em;
}

/* Make sure select elements fit in widgets. */
.widget select {
  max-width: 100%;
}

/* Search widget. */
.widget_search .search-submit {
  display: none;
}

h1.widget-title {
  font-size: 2rem;
}

/*--------------------------------------------------------------
8.0 Content
--------------------------------------------------------------*/
/*--------------------------------------------------------------
8.1 Posts and pages
--------------------------------------------------------------*/
.sticky {
  display: block;
}

.post.sticky {
  position: relative;
}

.hentry {
  margin: 0 0 1.5em;
}

.byline,
.updated:not(.published) {
  display: none;
}

.single .byline,
.group-blog .byline {
  display: inline;
}

.page-content,
.entry-content,
.entry-summary {
  margin: 1.5em 0 0;
}

.page-links {
  clear: both;
  margin: 0 0 1.5em;
}

/*--------------------------------------------------------------
8.2 Asides
--------------------------------------------------------------*/
.blog .format-aside .entry-title,
.archive .format-aside .entry-title {
  display: none;
}

/*--------------------------------------------------------------
8.3 Comments
--------------------------------------------------------------*/
.comment-content a {
  word-wrap: break-word;
}

.bypostauthor {
  display: block;
}

/*--------------------------------------------------------------
9.0 Infinite scroll
--------------------------------------------------------------*/
/* Globally hidden elements when Infinite Scroll is supported and in use. */
.infinite-scroll .posts-navigation, /* Older / Newer Posts Navigation (always hidden) */
.infinite-scroll.neverending .site-footer { /* Theme Footer (when set to scrolling) */
  display: none;
}

/* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */
.infinity-end.neverending .site-footer {
  display: block;
}

/*--------------------------------------------------------------
10.0 Media
--------------------------------------------------------------*/
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
  border: none;
  margin-bottom: 0;
  margin-top: 0;
  padding: 0;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
  max-width: 100%;
}

/*--------------------------------------------------------------
10.1 Captions
--------------------------------------------------------------*/
.wp-caption {
  margin-bottom: 1.5em;
  max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
  display: block;
  margin: 0 auto;
}

.wp-caption-text {
  text-align: center;
}

.wp-caption .wp-caption-text {
  margin: 0.1em 0;
  font-size: 0.85rem;
  font-style: italic;
}

/*--------------------------------------------------------------
10.2 Galleries
--------------------------------------------------------------*/
.gallery {
  margin-bottom: 1.5em;
}

.gallery-item {
  margin: 1em 0;
  display: inline-block;
  text-align: center;
  vertical-align: top;
  width: 100%;
}

.gallery-columns-2 .gallery-item {
  max-width: 50%;
}

.gallery-columns-3 .gallery-item {
  max-width: 33.33%;
}

.gallery-columns-4 .gallery-item {
  max-width: 25%;
}

.gallery-columns-5 .gallery-item {
  max-width: 20%;
}

.gallery-columns-6 .gallery-item {
  max-width: 16.66%;
}

.gallery-columns-7 .gallery-item {
  max-width: 14.28%;
}

.gallery-columns-8 .gallery-item {
  max-width: 12.5%;
}

.gallery-columns-9 .gallery-item {
  max-width: 11.11%;
}

.gallery-caption {
  display: block;
}

/*--------------------------------------------------------------
# Vital Effect Lohse
--------------------------------------------------------------*/

/* Reusable Styles */

a {
  color: #177ABA;
}

a:focus,
a:hover {
  color: #07609A;
}

h1 {
  font-size: 3rem;
}

h2 {
  font-size: 2.5rem;
}

h3 {
  font-size: 1.9375rem;
}

h4 {
  font-size: 1.5625rem;
}

h5 {
  font-size: 1.25rem;
}

h6 {
  font-size: 1rem;
}

div.div-line.blue {
  border-top: 1px solid #09F;
}

div.div-line.darkblue {
  border-top: 1px solid #000DFF;
}

div.div-line.yellow {
  border-top: 1px solid #FFBC00;
}

div.div-line.orange {
  border-top: 1px solid #FF8E00;
}

a.btn.blue {
  border-bottom: 3px solid #005288;
  background: #09F;
}

a.btn.blue:hover {
  background: #006DB3;
}

a.btn.darkblue {
  border-bottom: 3px solid #010894;
  background: #000DFF;
}

a.btn.darkblue:hover {
  background: #000ABF;
}

a.btn.yellow {
  border-bottom: 3px solid #D59D00;
  background: #FFBC00;
}

a.btn.yellow:hover {
  background: #FFC72A;
}

a.btn.orange {
  border-bottom: 3px solid #D57700;
  background: #FF8E00;
}

a.btn.orange:hover {
  background: #FFA12A;
}

/* HTML */

html {

}

div#page {

}

/* Header */

header#top-header {
  border-bottom: 5px solid #177ABA;
}

header#top-header div.grid-container {

}

header#top-header div#top-header-branding {
  padding-top: 1rem;
  padding-bottom: 1rem;
  border-right: 3px solid #CACACA;
}

header#top-header div#top-header-contact {
  padding-top: 1rem;
  background: #E6E6E6;
}

header#top-header div#top-header-contact i {
  padding-right: 3px;
}

header#top-header div#top-header-contact a {
  color: #07609A;
}

header#top-header nav#top-header-nav {
  text-align: right;
}

/* Menu Styles */

button.menu-toggle {
  border: 1px solid #000;
}

nav#top-header-nav ul {
  padding-top: 1rem;
}

nav#top-header-nav ul li {
  background: none;
}

nav#top-header-nav ul li a {
  color: #054A76;
  text-transform: uppercase;
  font-weight: bolder;
  font-size: 1.25rem;
  padding: 10px;
}

nav#top-header-nav ul > li > ul {
  background: #424242;
}

nav#top-header-nav ul > li > ul {
  width: 250px;
}

nav#top-header-nav ul > li > ul > li {
  width: 250px;
  word-wrap: break-word;
}

nav#top-header-nav ul > li > ul > li a {
  color: #FEFEFE;
  font-size: 1rem;
  white-space: normal;
}

@media screen and (max-width: 39.9375em) {
  nav#top-header-nav ul li {
    background: #424242;
    text-align: center;
  }
}

/* Home Page */

h1#home-page-title {
  font-size: 2.6rem;
}

h2#home-news-and-notices-title {
  font-family: 'Ubuntu', sans-serif;
  font-weight: bold;
  border-bottom: 4px solid #79B444;
  padding-top: 3rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}

/* Site Body */

main.site-main h1.entry-title {
  font-family: 'Ubuntu', sans-serif;
  font-weight: bold;
  border-bottom: 4px solid #79B444;
  padding-top: 1rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}

/* Sidebar */

div#sidebar {
  padding-top: 1.5rem;
}

/* Widgets */

h1.widget-title {
  font-size: 1.75rem;
  font-family: 'Ubuntu', sans-serif;
  font-weight: bolder;
  border-bottom: 1px solid #177ABA;
}

/* Site Footer */

footer#bottom-footer {
  background: #054A76;
  color: #FEFEFE;
  padding-top: 1em;
}

footer#bottom-footer div.bottom-footer-widget h1.widget-title {
  font-weight: bolder;
  color: #FFF;
  border-bottom: 2px solid #79B444;
}

footer#bottom-footer div.bottom-footer-widget ul.menu {
  display: block;
}

footer#bottom-footer div.bottom-footer-widget ul.menu li a {
  color: #EFB100;
  padding: 7px;
}

div#bottom-bar {
  background: #054A76;
  color: #FEFEFE;
}

div#bottom-bar div.site-info {
  text-align: center;
  padding: 1rem;
  border-top: 1px solid #5FA4D1;
}

div#bottom-bar div.site-info a {
  color: #EFB100;
}

/* Plugin Overwrites */

div.soliloquy-container {
  margin: 0 auto;
}

div.wu-copyright {
  display: none;
}

/*--------------------------------------------------------------
# Responsive Design Media Queries
--------------------------------------------------------------*/
@media screen and (max-width: 39.9375em) {} /* Small only */
@media screen and (min-width: 40em) {} /* Medium and up */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {} /* Medium only */
@media screen and (min-width: 64em) {} /* Large and up */
@media screen and (min-width: 64em) and (max-width: 74.9375em) {} /* Large only */