/*
 * *****************************************************************
 * Site Name:
 * Author:
 * 
 * Stylesheet: Main Stylesheet
 * 
 * Here's where the magic happens. Here, you'll see we are calling in
 * the separate media queries. The base mobile goes outside any query
 * and is called at the beginning, after that we call the rest
 * of the styles inside media queries.
 * *****************************************************************
 */
/*
 * ! normalize.css 2012-07-07T09:50 UTC - http://github.com/necolas/normalize.css
 */
/*
 * ==========================================================================
 * HTML5 display definitions
 * ==========================================================================
 */
/*
 * 
 * * Corrects `block` display not defined in IE6/7/8/9 & FF3.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
  display: block; }

/*
 * 
 * * Corrects `inline-block` display not defined in IE6/7/8/9 & FF3.
 */
audio,
canvas,
video {
  display: inline-block;
  *display: inline;
  *zoom: 1; }

/*
 * 
 * * Prevents modern browsers from displaying `audio` without controls.
 * * Remove excess height in iOS5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0; }

/*
 * 
 * * Addresses styling for `hidden` attribute not present in IE7/8/9, FF3, S4.
 * * Known issue: no IE6 support.
 */
[hidden] {
  display: none; }

/*
 * ==========================================================================
 * Base
 * ==========================================================================
 */
/*
 * 
 * * 1. Corrects text resizing oddly in IE6/7 when body `font-size` is set using
 * *    `em` units.
 * * 2. Prevents iOS text size adjust after orientation change, without disabling
 * *    user zoom.
 */
html {
  font-size: 100%;
    /*
   * 1
   */
  -webkit-text-size-adjust: 100%;
    /*
   * 2
   */
  -ms-text-size-adjust: 100%;
    /*
   * 2
   */ }

/*
 * 
 * * Addresses `font-family` inconsistency between `textarea` and other form
 * * elements.
 */
html,
button,
input,
select,
textarea {
  font-family: sans-serif; }

/*
 * 
 * * Addresses margins handled incorrectly in IE6/7.
 */
body {
  margin: 0; }

/*
 * ==========================================================================
 * Links
 * ==========================================================================
 */
/*
 * 
 * * Addresses `outline` inconsistency between Chrome and other browsers.
 */
a:focus {
  outline: thin dotted; }

/*
 * 
 * * Improves readability when focused and also mouse hovered in all browsers.
 * * people.opera.com/patrickl/experiments/keyboard/test
 */
a:active,
a:hover {
  outline: 0; }

/*
 * ==========================================================================
 * Typography
 * ==========================================================================
 */
/*
 * 
 * * Addresses font sizes and margins set differently in IE6/7.
 * * Addresses font sizes within `section` and `article` in FF4+, Chrome, S5.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0; }

h2 {
  font-size: 1.5em;
  margin: 0.83em 0; }

h3 {
  font-size: 1.17em;
  margin: 1em 0; }

h4 {
  font-size: 1em;
  margin: 1.33em 0; }

h5 {
  font-size: 0.83em;
  margin: 1.67em 0; }

h6 {
  font-size: 0.75em;
  margin: 2.33em 0; }

/*
 * 
 * * Addresses styling not present in IE7/8/9, S5, Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted; }

/*
 * 
 * * Addresses style set to `bolder` in FF3+, S4/5, Chrome.
 */
b,
strong {
  font-weight: bold; }

blockquote {
  margin: 1em 40px; }

/*
 * 
 * * Addresses styling not present in S5, Chrome.
 */
dfn {
  font-style: italic; }

/*
 * 
 * * Addresses styling not present in IE6/7/8/9.
 */
mark {
  background: yellow;
  color: black; }

/*
 * 
 * * Addresses margins set differently in IE6/7.
 */
p,
pre {
  margin: 1em 0; }

/*
 * 
 * * Corrects font family set oddly in IE6, S4/5, Chrome.
 * * en.wikipedia.org/wiki/User:Davidgothberg/Test59
 */
code,
kbd,
pre,
samp {
  font-family: monospace, serif;
  _font-family: 'courier new', monospace;
  font-size: 1em; }

/*
 * 
 * * Improves readability of pre-formatted text in all browsers.
 */
pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word; }

/*
 * 
 * * Addresses CSS quotes not supported in IE6/7.
 */
q {
  quotes: none; }

/*
 * 
 * * Addresses `quotes` property not supported in S4.
 */
q:before,
q:after {
  content: '';
  content: none; }

small {
  font-size: 75%; }

/*
 * 
 * * Prevents `sub` and `sup` affecting `line-height` in all browsers.
 * * gist.github.com/413930
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

/*
 * ==========================================================================
 * Lists
 * ==========================================================================
 */
/*
 * 
 * * Addresses margins set differently in IE6/7.
 */
dl,
menu,
ol,
ul {
  margin: 1em 0; }

dd {
  margin: 0 0 0 40px; }

/*
 * 
 * * Addresses paddings set differently in IE6/7.
 */
menu,
ol,
ul {
  padding: 0 0 0 40px; }

/*
 * 
 * * Corrects list images handled incorrectly in IE7.
 */
nav ul,
nav ol {
  list-style: none;
  list-style-image: none; }

/*
 * ==========================================================================
 * Embedded content
 * ==========================================================================
 */
/*
 * 
 * * 1. Removes border when inside `a` element in IE6/7/8/9, FF3.
 * * 2. Improves image quality when scaled in IE7.
 * *    code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
 */
img {
  border: 0;
    /*
   * 1
   */
  -ms-interpolation-mode: bicubic;
    /*
   * 2
   */ }

/*
 * 
 * * Corrects overflow displayed oddly in IE9.
 */
svg:not(:root) {
  overflow: hidden; }

/*
 * ==========================================================================
 * Figures
 * ==========================================================================
 */
/*
 * 
 * * Addresses margin not present in IE6/7/8/9, S5, O11.
 */
figure {
  margin: 0; }

/*
 * ==========================================================================
 * Forms
 * ==========================================================================
 */
/*
 * 
 * * Corrects margin displayed oddly in IE6/7.
 */
form {
  margin: 0; }

/*
 * 
 * * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid silver;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em; }

/*
 * 
 * * 1. Corrects color not being inherited in IE6/7/8/9.
 * * 2. Corrects text not wrapping in FF3.
 * * 3. Corrects alignment displayed oddly in IE6/7.
 */
legend {
  border: 0;
    /*
   * 1
   */
  padding: 0;
  white-space: normal;
    /*
   * 2
   */
  *margin-left: -7px;
    /*
   * 3
   */ }

/*
 * 
 * * 1. Corrects font size not being inherited in all browsers.
 * * 2. Addresses margins set differently in IE6/7, FF3+, S5, Chrome.
 * * 3. Improves appearance and consistency in all browsers.
 */
button,
input,
select,
textarea {
  font-size: 100%;
    /*
   * 1
   */
  margin: 0;
    /*
   * 2
   */
  vertical-align: baseline;
    /*
   * 3
   */
  *vertical-align: middle;
    /*
   * 3
   */ }

/*
 * 
 * * Addresses FF3/4 setting `line-height` on `input` using `!important` in the
 * * UA stylesheet.
 */
button,
input {
  line-height: normal; }

/*
 * 
 * * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 * *    and `video` controls.
 * * 2. Corrects inability to style clickable `input` types in iOS.
 * * 3. Improves usability and consistency of cursor style between image-type
 * *    `input` and others.
 * * 4. Removes inner spacing in IE7 without affecting normal text inputs.
 * *    Known issue: inner spacing remains in IE6.
 */

input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
    /*
   * 2
   */
  cursor: pointer;
    /*
   * 3
   */
  *overflow: visible;
    /*
   * 4
   */ }

/*
 * 
 * * Re-set default cursor for disabled elements.
 */
button[disabled],
input[disabled] {
  cursor: default; }

/*
 * 
 * * 1. Addresses box sizing set to content-box in IE8/9.
 * * 2. Removes excess padding in IE8/9.
 * * 3. Removes excess padding in IE7.
 * *    Known issue: excess padding remains in IE6.
 */
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
    /*
   * 1
   */
  padding: 0;
    /*
   * 2
   */
  *height: 13px;
    /*
   * 3
   */
  *width: 13px;
    /*
   * 3
   */ }

/*
 * 
 * * 1. Addresses `appearance` set to `searchfield` in S5, Chrome.
 * * 2. Addresses `box-sizing` set to `border-box` in S5, Chrome (include `-moz`
 * *    to future-proof).
 */
input[type="search"] {
  -webkit-appearance: textfield;
    /*
   * 1
   */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
    /*
   * 2
   */
  box-sizing: content-box; }

/*
 * 
 * * Removes inner padding and search cancel button in S5, Chrome on OS X.
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

/*
 * 
 * * Removes inner padding and border in FF3+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0; }

/*
 * 
 * * 1. Removes default vertical scrollbar in IE6/7/8/9.
 * * 2. Improves readability and alignment in all browsers.
 */
textarea {
  overflow: auto;
    /*
   * 1
   */
  vertical-align: top;
    /*
   * 2
   */ }

/*
 * ==========================================================================
 * Tables
 * ==========================================================================
 */
/*
 * 
 * * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0; }

/*
 * *****************************************************************
 * CUSTOMIZED RESET VALUES
 * I added these extra styles as a more personalized reset. Feel free
 * to remove them if you like or add your own. If you want to update
 * the normalize styles, make sure to edit from this point up.
 * *****************************************************************
 */
p {
  -webkit-hyphens: auto;
  -epub-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto; }

b,
strong,
.strong {
  font-weight: bold; }

dfn,
em,
.em {
  font-style: italic; }

small,
.small {
  font-size: 75%; }

ul,
ol {
  padding: 0;
  list-style-type: none; }

dd {
  margin: 0; }

.sidebar ul,
.sidebar ol,
.commentlist {
  list-style: none; }

/*
 * *****************************************************************
 * Site Name:
 * Author:
 * 
 * Stylesheet: Mixins & Constants Stylesheet
 * 
 * This is where you can take advantage of Sass' great features:
 * Mixins & Constants. I won't go in-depth on how they work exactly,
 * there are a few articles below that will help do that. What I will
 * tell you is that this will help speed up simple changes like
 * changing a color or adding CSS3 techniques gradients.
 * 
 * A WORD OF WARNING: It's very easy to overdo it here. Be careful and
 * remember less is more.
 * 
 * *****************************************************************
 */
/*
 * ********************
 * CLEARFIXIN'
 * ********************
 */
.clearfix {
  zoom: 1; }
  .clearfix:before,
  .clearfix:after {
    content: "";
    display: table; }
  .clearfix:after {
    clear: both; }

/*
 * ********************
 * TOOLS
 * ********************
 */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.image-replacement {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden; }

/*
 * ********************
 * COLORS
 * Need help w/ choosing your colors? Try this site out:
 * http://0to255.com/
 * ********************
 */
/*
 * 
 * Here's a great tutorial on how to
 * use color variables properly:
 * http://sachagreif.com/sass-color-variables/
 */
/*
 * ********************
 * TYPOGRAPHY
 * ********************
 */
/*
 * To embed your own fonts, use this syntax
 * and place your fonts inside the
 * library/fonts folder. For more information
 * on embedding fonts, go to:
 * http://www.fontsquirrel.com/
 * Be sure to remove the comment brackets.
 */
/*
 * @font-face {
 * font-family: 'Font Name';
 * src: url('https://berlingegenrechts.de/wp-content/uploads/wp-sass-cache/library/fonts/font-name.eot');
 * src: url('https://berlingegenrechts.de/wp-content/uploads/wp-sass-cache/library/fonts/font-name.eot#iefix') format('embedded-opentype'),
 * url('https://berlingegenrechts.de/wp-content/uploads/wp-sass-cache/library/fonts/font-name.woff') format('woff'),
 * url('https://berlingegenrechts.de/wp-content/uploads/wp-sass-cache/library/fonts/font-name.ttf') format('truetype'),
 * url('https://berlingegenrechts.de/wp-content/uploads/wp-sass-cache/library/fonts/font-name.svg#font-name') format('svg');
 * font-weight: normal;
 * font-style: normal;
 * }
 */
/*
 * 
 * use the best ampersand
 * http://simplebits.com/notebook/2008/08/14/ampersands-2/
 */
span.amp {
  font-family: Baskerville, 'Goudy Old Style', Palatino, 'Book Antiqua', serif !important;
  font-style: italic; }

.text-left {
  text-align: left; }

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

.text-right {
  text-align: right; }

.alert-help,
.alert-info,
.alert-error,
.alert-success {
  margin: 10px;
  padding: 5px 18px;
  border: 1px solid; }

.alert-help {
  border-color: #e8dc59;
  background: #ebe16f; }

.alert-info {
  border-color: #bfe4f4;
  background: #d5edf8; }

.alert-error {
  border-color: #f8cdce;
  background: #fbe3e4; }

.alert-success {
  border-color: #deeaae;
  background: #e6efc2; }

/*
 * ********************
 * TRANSITION
 * ********************
 */
/*
 * 
 * I totally rewrote this to be cleaner and easier to use.
 * You'll need to be using Sass 3.2+ for these to work.
 * Thanks to @anthonyshort for the inspiration on these.
 * USAGE: @include transition(all 0.2s ease-in-out);
 */
/*
 * ********************
 * CSS3 GRADIENTS
 * Be careful with these since they can
 * really slow down your CSS. Don't overdue it.
 * ********************
 */
/*
 * @include css-gradient(#dfdfdf,#f8f8f8);
 */
/*
 * ********************
 * BOX SIZING
 * ********************
 */
/*
 * @include box-sizing(border-box);
 */
/*
 * NOTE: value of "padding-box" is only supported in Gecko. So
 * probably best not to use it. I mean, were you going to anyway?
 */
/*
 * ********************
 * BUTTONS
 * ********************
 */
.button,
.button:visited {
  font-family: 'PT Sans', Helvetica, Calibri, Arial, sans-serif;
  border: 1px solid #be0d37;
  border-top-color: #db0f3f;
  border-left-color: #db0f3f;
  padding: 4px 12px;
  color: #ffed00;
  display: inline-block;
  font-size: 11px;
  font-weight: bold;
  text-decoration: none;
  text-shadow: 0 1px rgba(0, 0, 0, 0.75);
  cursor: pointer;
  margin-bottom: 20px;
  line-height: 21px;
  border-radius: 4px;
  background-color: #e40f42;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f01d4f), to(#e40f42));
  background-image: -webkit-linear-gradient(top, #f01d4f, #e40f42);
  background-image: -moz-linear-gradient(top, #f01d4f, #e40f42);
  background-image: -o-linear-gradient(top, #f01d4f, #e40f42);
  background-image: linear-gradient(to bottom, #f01d4f, #e40f42); }
  .button:hover,
  .button:visited:hover,
  .button:focus,
  .button:visited:focus {
    color: #ffed00;
    border: 1px solid #be0d37;
    border-top-color: #9d0a2d;
    border-left-color: #9d0a2d;
    background-color: #cc0e3b;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#e40f42), to(#cc0e3b));
    background-image: -webkit-linear-gradient(top, #e40f42, #cc0e3b);
    background-image: -moz-linear-gradient(top, #e40f42, #cc0e3b);
    background-image: -o-linear-gradient(top, #e40f42, #cc0e3b);
    background-image: linear-gradient(to bottom, #e40f42, #cc0e3b); }
  .button:active,
  .button:visited:active {
    background-color: #f01d4f;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#e40f42), to(#f01d4f));
    background-image: -webkit-linear-gradient(top, #e40f42, #f01d4f);
    background-image: -moz-linear-gradient(top, #e40f42, #f01d4f);
    background-image: -o-linear-gradient(top, #e40f42, #f01d4f);
    background-image: linear-gradient(to bottom, #e40f42, #f01d4f); }

.blue-button,
.blue-button:visited {
  border-color: #1472ad;
  text-shadow: 0 1px 1px #1472ad;
  background-color: #1681c4;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#1990db), to(#1681c4));
  background-image: -webkit-linear-gradient(top, #1990db, #1681c4);
  background-image: -moz-linear-gradient(top, #1990db, #1681c4);
  background-image: -o-linear-gradient(top, #1990db, #1681c4);
  background-image: linear-gradient(to bottom, #1990db, #1681c4);
  box-shadow: inset 0 0 3px #59b3ec; }
  .blue-button:hover,
  .blue-button:visited:hover,
  .blue-button:focus,
  .blue-button:visited:focus {
    border-color: #116396;
    background-color: #1472ad;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#1784c9), to(#1472ad));
    background-image: -webkit-linear-gradient(top, #1784c9, #1472ad);
    background-image: -moz-linear-gradient(top, #1784c9, #1472ad);
    background-image: -o-linear-gradient(top, #1784c9, #1472ad);
    background-image: linear-gradient(to bottom, #1784c9, #1472ad); }
  .blue-button:active,
  .blue-button:visited:active {
    background-color: #1990db;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#1681c4), to(#1990db));
    background-image: -webkit-linear-gradient(top, #1681c4, #1990db);
    background-image: -moz-linear-gradient(top, #1681c4, #1990db);
    background-image: -o-linear-gradient(top, #1681c4, #1990db);
    background-image: linear-gradient(to bottom, #1681c4, #1990db); }

/*
 * 
 * BASE (MOBILE) SIZE
 * This are the mobile styles. It's what people see on their phones. If
 * you set a great foundation, you won't need to add too many styles in
 * the other stylesheets. Remember, keep it light: Speed is Important.
 */
/*
 * *****************************************************************
 * Site Name:
 * Author:
 * 
 * Stylesheet: Base Mobile Stylesheet
 * 
 * Be light and don't over style since everything here will be
 * loaded by mobile devices. You want to keep it as minimal as
 * possible. This is called at the top of the main stylsheet
 * and will be used across all viewports.
 * 
 * *****************************************************************
 */
/*
 * ********************
 * GENERAL STYLES
 * ********************
 */
body {
  font-family: 'PT Sans', Helvetica, Calibri, Arial, sans-serif;
  font-size: 100%;
  line-height: 1.5;
  color: #565656;
  background-size: cover; }

a {
  color: inherit;
  background: inherit;
  text-decoration: none;
  border-bottom: 2px solid #ffed00; }

a[rel="home"],
.smwidgetlink,
.article-header a {
  border-bottom: 0; }

/*
 * *******************
 * WORDPRESS BODY CLASSES
 * style a page via class
 * *******************
 */

/*
 * for sites that are read right to left (i.e. hebrew)
 */

/*
 * home page
 */

/*
 * blog template page
 */

/*
 * archive page
 */

/*
 * date archive page
 */

/*
 * replace the number to the corresponding page number
 */

/*
 * search page
 */

/*
 * search result page
 */

/*
 * no results search page
 */

/*
 * individual paged search (i.e. body.search-paged-3)
 */

/*
 * 404 page
 */

/*
 * single post page
 */

/*
 * individual post page by id (i.e. body.postid-73)
 */

/*
 * individual paged single (i.e. body.single-paged-3)
 */

/*
 * attatchment page
 */

/*
 * individual attatchment page (i.e. body.attachmentid-763)
 */

/*
 * style mime type pages
 */

/*
 * author page
 */

/*
 * user nicename (i.e. body.author-samueladams)
 */

/*
 * paged author archives (i.e. body.author-paged-4) for page 4
 */

/*
 * category page
 */

/*
 * individual category page (i.e. body.category-6)
 */

/*
 * replace the number to the corresponding page number
 */

/*
 * tag page
 */

/*
 * individual tag page (i.e. body.tag-news)
 */

/*
 * replace the number to the corresponding page number
 */

/*
 * custom page template page
 */

/*
 * individual page template (i.e. body.page-template-contact-php
 */

/*
 * replace the number to the corresponding page number
 */

/*
 * parent page template
 */

/*
 * child page template
 */

/*
 * replace the number to the corresponding page number
 */

/*
 * if user is logged in
 */

/*
 * paged items like search results or archives
 */

/*
 * individual paged (i.e. body.paged-3)
 */
/*
 * ********************
 * LAYOUT & GRID STYLES
 * ********************
 */
.wrap {
  width: 96%;
  margin: 0 auto; }

/*
 * ********************
 * LINK STYLES
 * ********************
 */
a,
a:visited {
  color: #f01d4f;
    /*
   * on hover
   */
    /*
   * on click
   */
    /*
   * mobile tap color
   */ }
  a:hover,
  a:visited:hover,
  a:focus,
  a:visited:focus {
    color: #d10e3c; }

  a:link,
  a:visited:link {
        /*
     * 
     * this highlights links on iPhones/iPads.
     * so it basically works like the :hover selector
     * for mobile devices.
     */
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.3); }

/*
 * *****************************************************************
 * H1, H2, H3, H4, H5 STYLES
 * *****************************************************************
 */
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5 {
  font-family: 'PT Sans', Helvetica, Calibri, Arial, sans-serif;
  text-rendering: optimizelegibility;
  font-weight: 700;
    /*
   * 
   * if you're going to use webfonts, be sure to check your weights
   * http://css-tricks.com/watch-your-font-weight/
   */
    /*
   * removing text decoration from all headline links
   */ }
  h1 a,
  .h1 a,
  h2 a,
  .h2 a,
  h3 a,
  .h3 a,
  h4 a,
  .h4 a,
  h5 a,
  .h5 a {
    text-decoration: none; }

h1,
.h1 {
  font-size: 2.5em;
  line-height: 1.333em; }

h2,
.h2 {
  font-size: 1.75em;
  line-height: 1.4em;
  margin-bottom: 0.375em; }

h3,
.h3 {
  font-size: 1.125em; }

h4,
.h4 {
  font-size: 1.1em;
  font-weight: 700; }

h5,
.h5 {
  font-size: 0.846em;
  line-height: 2.09em;
  text-transform: uppercase;
  letter-spacing: 2px; }

/*
 * ********************
 * HEADER STYLES
 * ********************
 */


#header-image {
  width: 100%;
  height: auto;
  margin-top: 30px; }

/*
 * ********************
 * NAVIGATION STYLES
 * ********************
 */
/*
 * 
 * all navs have a .nav class applied via
 * the wp_menu function; this is so we can
 * easily write one group of styles for
 * the navs on the site so our css is cleaner
 * and more scalable.
 */
.nav {
  border: 0px;
  background: transparent;
    /*
   * end .menu li
   */
    /*
   * highlight current page
   */
    /*
   * end current highlighters
   */ }
  .nav li {
        /*
     * 
     * so you really have to rethink your dropdowns for mobile.
     * you don't want to have it expand too much because the
     * screen is so small. How you manage your menu should
     * depend on the project. Here's some great info on it:
     * http://www.alistapart.com/articles/organizing-mobile/
     */ }
    .nav li a {
      display: block;
      text-decoration: none;
      padding: 10px 10px;
      background-color: #ffed00;
      border-bottom: 1px solid #cccccc;
      color: #333333;
            /*
       * 
       * remember this is for mobile ONLY, so there's no need
       * to even declare hover styles here, you can do it in
       * the style.scss file where it's relevant. We want to
       * keep this file as small as possible!
       */ }

        .nav li ul.sub-menu li a,
        .nav li ul.children li a {
          padding-left: 30px; }



/*
 * end .nav
 */
/*
 * ********************
 * POSTS & CONTENT STYLES
 * ********************
 */
#content {
  margin-top: 2.2em; }



/*
 * end .hentry
 */




/*
 * want to style individual post classes? Booya!
 */

/*
 * post by id (i.e. post-3)
 */
.post,
article.page {
  border-top: solid 20px #ffed00;
  background: white;
  padding: 0px 20px;
  margin-bottom: 40px; }

/*
 * general post style
 */

/*
 * general article on a page style
 */

/*
 * general style on an attatchment
 */

/*
 * sticky post style
 */

/*
 * hentry class
 */

/*
 * style by category (i.e. category-videos)
 */

/*
 * style by tag (i.e. tag-news)
 */
/*
 * post meta
 */
.byline {
  color: #999999; }


/*
 * entry content
 */
.entry-content {
    /*
   * 
   * image alignment on a screen this size may be
   * a bit difficult. It's set to start aligning
   * and floating images at the next breakpoint,
   * but it's up to you. Feel free to change it up.
   */ }






  .entry-content dd {
    margin-left: 0;
    font-size: 0.9em;
    color: #787878;
    margin-bottom: 1.5em; }
  .entry-content img {
    margin: 0 0 1.5em 0;
    max-width: 100%;
    height: auto; }


  .entry-content video,
  .entry-content object {
    max-width: 100%;
    height: auto; }
  .entry-content pre {
    background: #eeeeee;
    border: 1px solid #cecece;
    padding: 10px; }

/*
 * end .entry-content
 */
.wp-caption {
  background: #eeeeee;
  padding: 5px;
    /*
   * images inside wp-caption
   */ }
  .wp-caption img {
    margin-bottom: 0;
    width: 100%; }
  .wp-caption p.wp-caption-text {
    font-size: 0.85em;
    margin: 4px 0 7px;
    text-align: center; }

/*
 * end .wp-caption
 */
/*
 * image gallery styles
 */



/*
 * end .gallery
 */
/*
 * gallery caption styles
 */





/*
 * *****************************************************************
 * PAGE NAVI STYLES
 * *****************************************************************
 */
.page-navigation,
.wp-prev-next {
  margin: 1.1em 0 2.2em; }

.bones_page_navi {
    /*
   * current page link
   */
    /*
   * end .bones_page_navi .bpn-current
   */
    /*
   * common styles for page-navi links
   */
    /*
   * remove the bg on end links
   */
    /*
   * previous link
   */
    /*
   * next page link
   */
    /*
   * first page link
   */
    /*
   * last page link
   */ }
  .bones_page_navi li {
    float: left;
    margin-left: 10px; }
    .bones_page_navi li a {
      padding: 3px 6px;
      display: block;
      text-decoration: none;
      position: relative; }
      .bones_page_navi li a:hover,
      .bones_page_navi li a:focus {
        color: #f01d4f;
        text-decoration: underline; }
  .bones_page_navi li.bpn-current {
    padding: 3px 6px;
    border-bottom: 2px solid #f01d4f;
    position: relative; }
    .bones_page_navi li.bpn-current a {
            /*
       * hovering on current page link
       */ }

  .bones_page_navi li.bpn-prev-link,
  .bones_page_navi li.bpn-next-link {
    font-weight: 700; }
    .bones_page_navi li.bpn-prev-link a,
    .bones_page_navi li.bpn-next-link a {
      padding: 0; }
  .bones_page_navi li.bpn-prev-link a:hover,
  .bones_page_navi li.bpn-next-link a:hover,
  .bones_page_navi li.bpn-first-page-link a:hover,
  .bones_page_navi li.bpn-last-page-link a:hover {
    background: none; }





/*
 * end .bones_page_navi
 */
/*
 * fallback previous & next links
 */

  .wp-prev-next .prev-link {
    float: left; }
  .wp-prev-next .next-link {
    float: right; }

/*
 * end .wp-prev-next
 */
/*
 * *****************************************************************
 * COMMENT STYLES
 * *****************************************************************
 */
/*
 * h3 comment title
 */
#comments {
    /*
   * number of comments span
   */ }




.commentlist {
    /*
   * general comment classes
   */
    /*
   * vcard
   */
    /*
   * end .commentlist .vcard
   */
    /*
   * comment meta
   */
    /*
   * comment content
   */
    /*
   * end .commentlist .comment_content
   */
    /*
   * comment reply link
   */
    /*
   * end .commentlist .comment-reply-link
   */ }
  .commentlist li {
    position: relative;
    clear: both;
    overflow: hidden;
    list-style-type: none;
    margin-bottom: 1.5em;
    padding: 0.734em 10px;
        /*
     * end .commentlist li ul.children
     */ }
    .commentlist li:last-child {
      margin-bottom: 0; }
    .commentlist li ul.children {
      margin: 0;
            /*
       * variations
       */
            /*
       * change number for different depth
       */ }


  .commentlist li[class*=depth-] {
    margin-top: 1.1em; }
  .commentlist li.depth-1 {
    margin-left: 0;
    margin-top: 0; }
  .commentlist li:not(.depth-1) {
    margin-right: -10px;
    margin-left: -10px;
    margin-top: 0;
    padding-bottom: 0; }



  .commentlist .odd {
    background: #eeeeee; }
  .commentlist .even {
    background: #fefefe; }





  .commentlist .vcard {
    margin-left: 50px; }
    .commentlist .vcard cite.fn {
      font-weight: 700;
      font-style: normal; }
    .commentlist .vcard time {
      float: right; }
      .commentlist .vcard time a {
        color: #999999;
        text-decoration: none; }
        .commentlist .vcard time a:hover {
          text-decoration: underline; }
    .commentlist .vcard img.avatar {
      position: absolute;
      left: 10px;
      padding: 2px;
      border: 1px solid #cecece;
      background: white; }


  .commentlist .comment_content {
    margin-left: 50px; }
    .commentlist .comment_content p {
      margin: 0.734em 0 1.5em;
      font-size: 1em;
      line-height: 1.5em; }
  .commentlist .comment-reply-link {
    text-decoration: none;
    float: right;
    background: #4598bb;
    padding: 3px 5px;
    color: white;
    opacity: 0.65;
    margin-bottom: 10px;
    font-weight: 700;
    font-size: 0.9em; }
    .commentlist .comment-reply-link:hover,
    .commentlist .comment-reply-link:focus {
      opacity: 1; }

/*
 * end .commentlist
 */
/*
 * *****************************************************************
 * COMMENT FORM STYLES
 * *****************************************************************
 */
.respond-form {
  margin: 1.5em 10px;
  padding-bottom: 2.2em; }
  .respond-form form {
    margin: 0.75em 0; }
    .respond-form form li {
      list-style-type: none;
      clear: both;
      margin-bottom: 0.734em; }
      .respond-form form li label,
      .respond-form form li small {
        display: none; }
    .respond-form form input[type=text],
    .respond-form form input[type=email],
    .respond-form form input[type=url],
    .respond-form form textarea {
      padding: 3px 6px;
      background: #efefef;
      border: 2px solid #cecece;
      line-height: 1.5em;
            /*
       * form validation
       */
      &: invalid;
      &-outline: none;
      &-border-color: #fbc2c4;
      &-background-color: #f6e7eb;
      &--webkit-box-shadow: none;
      &--moz-box-shadow: none;
      &--ms-box-shadow: none;
      &-box-shadow: none; }
      .respond-form form input[type=text]:focus,
      .respond-form form input[type=email]:focus,
      .respond-form form input[type=url]:focus,
      .respond-form form textarea:focus {
        background: white; }
    .respond-form form input[type=text],
    .respond-form form input[type=email],
    .respond-form form input[type=url] {
      max-width: 400px;
      min-width: 250px; }
    .respond-form form textarea {
      resize: none;
      width: 97.3%;
      height: 150px; }

/*
 * comment submit button
 */

/*
 * comment form title
 */
#comment-form-title {
  margin: 0 0 1.1em; }

/*
 * cancel comment reply link
 */


/*
 * logged in comments
 */

/*
 * allowed tags
 */
#allowed_tags {
  margin: 1.5em 10px 0.734em 0; }

/*
 * no comments
 */
.nocomments {
  margin: 0 20px 1.1em; }

/*
 * ********************
 * SIDEBARS & ASIDES
 * ********************
 */
.sidebar,
#sidebar {
  padding: 0px 20px 10px 20px;
  border-top: 20px solid #ffed00;
  background: white; }


    .widget ul li {
            /*
       * deep nesting
       */ }


/*
 * ********************
 * FOOTER STYLES
 * ********************
 */
.footer {
  clear: both; }

/*
 * 
 * if you checked out the link above:
 * http://www.alistapart.com/articles/organizing-mobile/
 * you'll want to style the footer nav
 * a bit more in-depth. Remember to keep
 * it simple because you'll have to
 * override these styles for the desktop
 * view.
 */


/*
 * end .footer-links
 */

/*
 * 
 * LARGER MOBILE DEVICES
 * This is for devices like the Galaxy Note or something that's
 * larger than an iPhone but smaller than a tablet. Let's call them
 * tweeners.
 */
@media only screen and (min-width: 481px) {
  /*
 * *****************************************************************
 * Site Name:
 * Author:
 * 
 * Stylesheet: 481px and Up Stylesheet
 * 
 * This stylesheet is loaded for larger devices. It's set to
 * 481px because at 480px it would load on a landscaped iPhone.
 * This isn't ideal because then you would be loading all those
 * extra styles on that same mobile connection.
 * 
 * A word of warning. This size COULD be a larger mobile device,
 * so you still want to keep it pretty light and simply expand
 * upon your base.scss styles.
 * 
 * *****************************************************************
 */
#searchform > .screen-reader-text {
  display: none; }

a.smwidgetlink {
  border-bottom: 0;
  font-size: 200%;
  color: #333333; }

/*
 * ********************
 * NAVIGATION STYLES
 * ********************
 */

/*
 * .menu is clearfixed inside mixins.scss
 */
.menu {
    /*
   * end .menu ul
   */ }
  .menu ul {
        /*
     * end .menu ul li
     */
        /*
     * highlight current page
     */
        /*
     * end current highlighters
     */ }
    .menu ul li {
            /*
       * 
       * plan your menus and drop-downs wisely.
       */ }
      .menu ul li a {
                /*
         * 
         * you can use hover styles here even though this size
         * has the possibility of being a mobile device.
         */ }



/*
 * end .menu
 */
/*
 * ********************
 * POSTS & CONTENT STYLES
 * ********************
 */
/*
 * entry content
 */
.entry-content {
    /*
   * at this larger size, we can start to align images
   */ }
  .entry-content .alignleft,
  .entry-content img.alignleft {
    margin-right: 1.5em;
    display: inline;
    float: left; }
  .entry-content .alignright,
  .entry-content img.alignright {
    margin-left: 1.5em;
    display: inline;
    float: right; }
  .entry-content .aligncenter,
  .entry-content img.aligncenter {
    margin-right: auto;
    margin-left: auto;
    display: block;
    clear: both; }

/*
 * end .entry-content
 */
/*
 * ********************
 * FOOTER STYLES
 * ********************
 */
/*
 * 
 * check your menus here. do they look good?
 * do they need tweaking?
 */


/*
 * end .footer-links
 */ }

/*
 * 
 * TABLET & SMALLER LAPTOPS
 * This is the average viewing window. So Desktops, Laptops, and
 * in general anyone not viewing on a mobile device. Here's where
 * you can add resource intensive styles.
 */
@media only screen and (min-width: 768px) {
  /*
 * *****************************************************************
 * Site Name:
 * Author:
 * 
 * Stylesheet: Grid Stylesheet
 * 
 * I've seperated the grid so you can swap it out easily. It's
 * called at the top the style.scss stylesheet.
 * 
 * There are a ton of grid solutions out there. You should definitely
 * experiment with your own. Here are some recommendations:
 * 
 * http://gridsetapp.com - Love this site. Responsive Grids made easy.
 * http://susy.oddbird.net/ - Grids using Compass. Very elegant.
 * http://gridpak.com/ - Create your own responsive grid.
 * 
 * The grid below is a combination of the 1140 grid and Twitter Boostrap.
 * I liked 1140 but Boostrap's grid was way more detailed so I merged them
 * together, let's see how this works out. If you want to use 1140, the original
 * values are commented out on each line.
 * 
 * *****************************************************************
 */
.onecol {
  width: 5.801%; }

/*
 * 4.85%;  } /* grid_1
 */
.twocol {
  width: 14.365%; }

/*
 * 13.45%; } /* grid_2
 */
.threecol {
  width: 22.928%; }

/*
 * 22.05%; } /* grid_3
 */
.fourcol {
  width: 31.492%; }

/*
 * 30.75%; } /* grid_4
 */
.fivecol {
  width: 40.055%; }

/*
 * 39.45%; } /* grid_5
 */
.sixcol {
  width: 48.619%; }

/*
 * 48%;    } /* grid_6
 */
.sevencol {
  width: 57.182%; }

/*
 * 56.75%; } /* grid_7
 */
.eightcol {
  width: 65.746%; }

/*
 * 65.4%;  } /* grid_8
 */
.ninecol {
  width: 74.309%; }

/*
 * 74.05%; } /* grid_9
 */
.tencol {
  width: 82.873%; }

/*
 * 82.7%;  } /* grid_10
 */
.elevencol {
  width: 91.436%; }

/*
 * 91.35%; } /* grid_11
 */
.twelvecol {
  width: 100%; }

/*
 * 100%;   } /* grid_12
 */
.onecol,
.twocol,
.threecol,
.fourcol,
.fivecol,
.sixcol,
.sevencol,
.eightcol,
.ninecol,
.tencol,
.elevencol,
.twelvecol {
  position: relative;
  float: left;
  margin-left: 2.762%; }

.first {
  margin-left: 0; }

.last {
  float: right; }

/*
 * *****************************************************************
 * Site Name:
 * Author:
 * 
 * Stylesheet: Tablet & Small Desktop Stylesheet
 * 
 * Here's where you can start getting into the good stuff.
 * This size will work on iPads, other tablets, and desktops.
 * So you can start working with more styles, background images,
 * and other resources. You'll also notice the grid starts to
 * come into play. Have fun!
 * 
 * *****************************************************************
 */
/*
 * ********************
 * GENERAL STYLES
 * ********************
 */

/*
 * ********************
 * LAYOUT & GRID STYLES
 * ********************
 */
.wrap {
  max-width: 1140px; }

/*
 * ********************
 * HEADER STYLES
 * ********************
 */


/*
 * ********************
 * NAVIGATION STYLES
 * ********************
 */
.nav {
  border: 0;
    /*
   * end .menu ul li
   */
    /*
   * highlight current page
   */
    /*
   * end current highlighters
   */ }
  .nav li {
    float: left;
    position: relative;
    margin-right: 20px;
    font-weight: 700;
    text-transform: uppercase;
        /*
     * 
     * plan your menus and drop-downs wisely.
     */
        /*
     * showing sub-menus
     */ }
    .nav li a {
      border-bottom: 0;
            /*
       * 
       * you can use hover styles here even though this size
       * has the possibility of being a mobile device.
       */ }
      .nav li a:hover,
      .nav li a:focus {
        background-color: #fff02e; }
    .nav li ul.sub-menu,
    .nav li ul.children {
      margin-top: 0;
      border-top: 0;
      position: absolute;
      display: none;
      z-index: 8999;
      font-weight: normal;
            /*
       * highlight sub-menu current page
       */ }
      .nav li ul.sub-menu li,
      .nav li ul.children li {
                /*
         * 
         * if you need to go deeper, go nuts
         * just remember deeper menus suck
         * for usability. k, bai.
         */ }
        .nav li ul.sub-menu li a,
        .nav li ul.children li a {
          padding-left: 10px;
          border-right: 0;
          display: block;
          background: #333333;
          color: white; }
          .nav li ul.sub-menu li a:hover,
          .nav li ul.children li a:hover,
          .nav li ul.sub-menu li a:focus,
          .nav li ul.children li a:focus {
            background: #4d4d4d; }
          .nav li ul.sub-menu li:last-child a,
          .nav li ul.children li:last-child a {
            border-bottom: 0; }
    .nav li:hover ul {
      top: auto;
      display: block; }


/*
 * end .nav
 */
/*
 * ********************
 * SIDEBARS & ASIDES
 * ********************
 */
.sidebar {
  margin-top: 2.2em; }

.widgettitle {
  border-bottom: 2px solid #444444;
  margin-bottom: 0.75em; }

.widget {
  padding: 0 10px;
  margin: 2.2em 0; }
    .widget ul li {
      margin-bottom: 0.75em;
            /*
       * deep nesting
       */ }
      .widget ul li ul {
        margin-top: 0.75em;
        padding-left: 1em; }

/*
 * links widget
 */




/*
 * meta widget
 */




/*
 * pages widget
 */




/*
 * recent-posts widget
 */




/*
 * archives widget
 */






/*
 * tag-cloud widget
 */







/*
 * calendar widget
 */












/*
 * category widget
 */













/*
 * recent-comments widget
 */





/*
 * search widget
 */



/*
 * text widget
 */



/*
 * ********************
 * FOOTER STYLES
 * ********************
 */
/*
 * 
 * you'll probably need to do quite a bit
 * of overriding here if you styled them for
 * mobile. Make sure to double check these!
 */
    .footer-links ul li {
            /*
       * 
       * be careful with the depth of your menus.
       * it's very rare to have multi-depth menus in
       * the footer.
       */ }


/*
 * end .footer-links
 */ }

/*
 * 
 * DESKTOP
 * This is the average viewing window. So Desktops, Laptops, and
 * in general anyone not viewing on a mobile device. Here's where
 * you can add resource intensive styles.
 */
@media only screen and (min-width: 1030px) {
  /*
 * *****************************************************************
 * Site Name:
 * Author:
 * 
 * Stylesheet: Desktop Stylsheet
 * 
 * This is the desktop size. It's larger than an iPad so it will only
 * be seen on the Desktop.
 * 
 * *****************************************************************
 */ }

/*
 * 
 * LARGE VIEWING SIZE
 * This is for the larger monitors and possibly full screen viewers.
 */
@media only screen and (min-width: 1240px) {
  /*
 * *****************************************************************
 * Site Name:
 * Author:
 * 
 * Stylesheet: Super Large Monitor Stylesheet
 * 
 * You can add some advanced styles here if you like. This kicks in
 * on larger screens.
 * 
 * *****************************************************************
 */ }

/*
 * 
 * RETINA (2x RESOLUTION DEVICES)
 * This applies to the retina iPhone (4s) and iPad (2,3) along with
 * other displays with a 2x resolution. You can also create a media
 * query for retina AND a certain size if you want. Go Nuts.
 */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
  /*
 * *****************************************************************
 * Site Name:
 * Author:
 * 
 * Stylesheet: Retina Screens & Devices Stylesheet
 * 
 * When handling retina screens you need to make adjustments, especially
 * if you're not using font icons. Here you can add them in one neat
 * place.
 * 
 * *****************************************************************
 */
/*
 * 
 * 
 * EXAMPLE
 * Let's say you have an image and you need to make sure it looks ok
 * on retina screens. Let's say we have an icon which dimension are
 * 24px x 24px. In your regular stylesheets, it would look something
 * like this:
 * 
 * .icon {
 * width: 24px;
 * height: 24px;
 * background: url(https://berlingegenrechts.de/wp-content/uploads/wp-sass-cache/img/test.png) no-repeat;
 * }
 * 
 * For retina screens, we have to make some adjustments, so that image
 * doesn't look blurry. So, taking into account the image above and the
 * dimensions, this is what we would put in our retina stylesheet:
 * 
 * .icon {
 * background: url(https://berlingegenrechts.de/wp-content/uploads/wp-sass-cache/img/test@2x.png) no-repeat;
 * background-size: 24px 24px;
 * }
 * 
 * So, you would create the same icon, but at double the resolution, meaning
 * it would be 48px x 48px. You'd name it the same, but with a @2x at the end
 * (this is pretty standard practice). Set the background image so it matches
 * the original dimensions and you are good to go.
 */ }

/*
 * 
 * iPHONE 5 MEDIA QUERY
 * Want to get fancy for no good reason? Knock yourself out.
 */
@media (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2) {
   }

/*
 * 
 * PRINT STYLESHEET
 * Feel free to customize this. Remember to add things that won't make
 * sense to print at the bottom. Things like nav, ads, and forms should
 * be set to display none.
 */
@media print {
  /*
 * *****************************************************************
 * Site Name:
 * Author:
 * 
 * Stylesheet: Print Stylesheet
 * 
 * This is the print stylesheet. There's probably not a lot
 * of reasons to edit this stylesheet. If you want to
 * though, go for it.
 * 
 * *****************************************************************
 */
* {
  background: transparent !important;
  color: black !important;
  text-shadow: none !important;
  filter: none !important;
  -ms-filter: none !important; }

a,
a:visited {
  color: #444444 !important;
  text-decoration: underline; }
  a:after,
  a:visited:after {
    content: " (" attr(href) ")"; }
  a abbr[title]:after,
  a:visited abbr[title]:after {
    content: " (" attr(title) ")"; }

.ir a:after,
a[href^="javascript:"]:after,
a[href^="#"]:after {
  content: ""; }

pre,
blockquote {
  border: 1px solid #999999;
  page-break-inside: avoid; }

thead {
  display: table-header-group; }

tr,
img {
  page-break-inside: avoid; }

img {
  max-width: 100% !important; }

@page {
  margin: 0.5cm; }
p,
h2,
h3 {
  orphans: 3;
  widows: 3; }

h2,
h3 {
  page-break-after: avoid; }

.sidebar,
.page-navigation,
.wp-prev-next,
.respond-form,
nav {
  display: none; } }