@charset "UTF-8";
/*
 Theme Name: Web Agency G
 Theme URI: http://Gradivni.com
 Author: Gradivni.com
 Author URI: http://Gradivni.com
 Description: Based on Underscore starter theme, incl. SASS!
 Version: 1.0.0
 License: Private (Not GNU)!
 License URI: -
 Text Domain: web-agency-g
 Tags: Super great!
 Web Agency G is based on Underscores http://underscores.me/, (C) 2012-2016 Automattic, Inc.
 Underscores is distributed under the terms of the GNU GPL v2 or later.
 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:
 ----------------------------------------------------------------
 "global_variables"
 "global_mixins"
 1.0 - Normalize/Reset (_normalize/reset.scss)
 "global_defaults"
 2.0 - Typography (_typography.scss)
 3.0 - Elements (_elements.scss)
 4.0 - Forms (_forms.scss)
 5.0 - Navigation
 5.1 - Links (moved to _global.scss)
 5.2 - Menus (_navigation.scss)
 6.0 - Accessibility (_a11y.scss)
 7.0 - Alignments (_alignments.scss)
 8.0 - Clearings (_clearings.scss)
 9.0 - Widgets (_widgets.scss)
 10.0 - Content (_site.scss)
 10.1 - Posts and pages (_content_posts.scss)
 10.2 - Asides (_content_asides.scss)
 10.3 - Comments (_content_comments.scss)
 11.0 - Infinite scroll (_infinite-scroll.scss)
 12.0 - Media (_media.scss)
 # Normalize
 # Typography
 # Elements
 # Forms
 # Navigation
 ## Links
 ## Menus
 # Accessibility
 # Alignments
 # Clearings
 # Widgets
 # Content
 ## Posts and pages
 ## Comments
 # Infinite scroll
 # Media
 ## Captions
 ## Galleries
 --------------------------------------------------------------*/
/*--------------------------------------------------------------
 # Global variables, mixins
 --------------------------------------------------------------*/
/*
 // Small devices (tablets, 768px and up)
 // used in _responsive_grid.scss
 //$screen-sm-min: 768px; // bootstrap 3
 //$screen-small-min: (768/$base-font-size-in-pixels)em; // $desired-width / $base-font-size-in-pixels = ? EM
 $screen-small-min: 768px;
 $screen-small-max: 991px;
 //$screen-small-min: 40em; // 648px is the breakpoint for 40em (1em=16.2px), even when changing the body font-size!
 // Medium devices (desktops, 992px and up)
 //$screen-md-min: 992px; // bootstrap 3
 //$screen-medium-min: (992/$base-font-size-in-pixels)em;
 $screen-medium-min: 992px;
 // Large devices (large desktops, 1200px and up)
 //$screen-lg-min: 1200px; // bootstrap 3
 //$screen-large-min: (1200/$base-font-size-in-pixels)em;
 $screen-large-min: 1200px;
 // Parametrized Layout (optional)
 // Supported Values for $layout:
 //  null | content-sidebar | sidebar-content
 //$site-layout: null !default;
 //$site-layout: sidebar-content; // parametrized layout
 */
/*
 // Here we define the lower and upper bounds for each media size
 $small-range: (0em, 40em); // 0, 640px
 $medium-range: (40.063em, 64em); // 641px, 1024px
 $large-range: (64.063em, 90em); // 1025px, 1440px
 $xlarge-range: (90.063em, 120em); // 1441px, 1920px
 $xxlarge-range: (120.063em); // 1921px
 // Media Queries
 $screen: "only screen" !default;
 $landscape: "#{$screen} and (orientation: landscape)" !default;
 $portrait: "#{$screen} and (orientation: portrait)" !default;
 $small-up: $screen !default;
 $small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})" !default;
 $medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})" !default;
 $medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})" !default;
 $large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})" !default;
 $large-only: "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})" !default;
 $xlarge-up: "#{$screen} and (min-width:#{lower-bound($xlarge-range)})" !default;
 $xlarge-only: "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})" !default;
 $xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})" !default;
 $xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})" !default;
 //// Usage:
 // @media ($medium-only) { ... }
 //// Generates (via PHP):
 // @media ("only screen and (min-width:lower-bound(40.063em, 64em)) and (max-width:upper-bound(40.063em, 64em))") {}
 */
/*
 @mixin font-size($sizeValue: 1) {
 font-size: ($sizeValue * 16) * 1px;
 font-size: $sizeValue * 1rem;
 }
 */
/*
 body:before {
 background-color: #FCF8E3;
 border-bottom: 1px solid #FBEED5;
 border-left: 1px solid #FBEED5;
 color: #C09853;
 font: small-caption;
 padding: 3px 6px;
 position: absolute;
 right: 0;
 top: 0;
 z-index: 100;
 }
 */
/*--------------------------------------------------------------
 # (Normalize.css or Reset.css) - used with Global.css styles
 --------------------------------------------------------------*/
html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
body {
  margin: 0;
}
article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary {
  display: block;
}
audio, canvas, progress, video {
  display: inline-block;
  vertical-align: baseline;
}
audio:not([controls]) {
  display: none;
  height: 0;
}
[hidden], template {
  display: none;
}
a {
  background-color: transparent;
}
a:active, a:hover {
  outline: 0;
}
abbr[title] {
  border-bottom: 1px dotted;
}
b, strong {
  font-weight: bold;
}
dfn {
  font-style: italic;
}
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
mark {
  background: #ff0;
  color: #000;
}
small {
  font-size: 80%;
}
sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
img {
  border: 0;
}
svg:not(:root) {
  overflow: hidden;
}
figure {
  margin: 1em 40px;
}
hr {
  box-sizing: content-box;
  height: 0;
}
pre {
  overflow: auto;
}
code, kbd, pre, samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
button, input, optgroup, select, textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}
button {
  overflow: visible;
}
button, select {
  text-transform: none;
}
button, html input[type="button"], input[type="reset"], input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}
button[disabled], html input[disabled] {
  cursor: default;
}
button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
input {
  line-height: normal;
}
input[type="checkbox"], input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}
legend {
  border: 0;
  padding: 0;
}
textarea {
  overflow: auto;
}
optgroup {
  font-weight: bold;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
td, th {
  padding: 0;
}
/*--------------------------------------------------------------
 # Global libraries, animations and more?
 --------------------------------------------------------------*/
/* Grow */
.hvr-grow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
/* Pulse Grow */
@-webkit-keyframes hvr-pulse-grow {
  to {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}
@keyframes hvr-pulse-grow {
  to {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}
.hvr-pulse-grow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
}
.hvr-pulse-grow:hover, .hvr-pulse-grow:focus, .hvr-pulse-grow:active {
  -webkit-animation-name: hvr-pulse-grow;
  animation-name: hvr-pulse-grow;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}
/* Wobble Horizontal */
@-webkit-keyframes hvr-wobble-horizontal {
  16.65% {
    -webkit-transform: translateX(8px);
    transform: translateX(8px);
  }
  33.3% {
    -webkit-transform: translateX(-6px);
    transform: translateX(-6px);
  }
  49.95% {
    -webkit-transform: translateX(4px);
    transform: translateX(4px);
  }
  66.6% {
    -webkit-transform: translateX(-2px);
    transform: translateX(-2px);
  }
  83.25% {
    -webkit-transform: translateX(1px);
    transform: translateX(1px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes hvr-wobble-horizontal {
  16.65% {
    -webkit-transform: translateX(8px);
    transform: translateX(8px);
  }
  33.3% {
    -webkit-transform: translateX(-6px);
    transform: translateX(-6px);
  }
  49.95% {
    -webkit-transform: translateX(4px);
    transform: translateX(4px);
  }
  66.6% {
    -webkit-transform: translateX(-2px);
    transform: translateX(-2px);
  }
  83.25% {
    -webkit-transform: translateX(1px);
    transform: translateX(1px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
.hvr-wobble-horizontal {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
}
.hvr-wobble-horizontal:hover, .hvr-wobble-horizontal:focus, .hvr-wobble-horizontal:active {
  -webkit-animation-name: hvr-wobble-horizontal;
  animation-name: hvr-wobble-horizontal;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}
/* Sweep To Right */
@-moz-keyframes dropHeader {
  0% {
    -moz-transform: translateY(-80px);
  }
  100% {
    -moz-transform: translateY(0);
  }
}
@-webkit-keyframes dropHeader {
  0% {
    -webkit-transform: translateY(-80px);
  }
  100% {
    -webkit-transform: translateY(0);
  }
}
@keyframes dropHeader {
  0% {
    transform: translateY(-80px);
  }
  100% {
    transform: translateY(0);
  }
}
@-webkit-keyframes swing {
  15% {
    -webkit-transform: translateX(5px);
    transform: translateX(5px);
  }
  30% {
    -webkit-transform: translateX(-5px);
    transform: translateX(-5px);
  }
  50% {
    -webkit-transform: translateX(3px);
    transform: translateX(3px);
  }
  65% {
    -webkit-transform: translateX(-3px);
    transform: translateX(-3px);
  }
  80% {
    -webkit-transform: translateX(2px);
    transform: translateX(2px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes swing {
  5% {
    -webkit-transform: translateX(5px);
    transform: translateX(5px);
  }
  10% {
    -webkit-transform: translateX(-5px);
    transform: translateX(-5px);
  }
  20% {
    -webkit-transform: translateX(3px);
    transform: translateX(3px);
  }
  25% {
    -webkit-transform: translateX(-3px);
    transform: translateX(-3px);
  }
  30% {
    -webkit-transform: translateX(2px);
    transform: translateX(2px);
  }
  40, 100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@-moz-keyframes comeDown {
  100% {
    transform: translateY(0px);
  }
}
@-webkit-keyframes comeDown {
  100% {
    -webkit-transform: translateY(0px);
  }
}
@keyframes comeDown {
  100% {
    transform: translateY(0px);
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-ms-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/*
 Features:
 - ability to switch easily between fixed PX values and %-percentage values (fixed-width vs fluid)
 */
/*
 Update 2016.08:
 // https://github.com/marvin1023/sassCore/blob/master/core/_grid.scss
 // $gridPercentSwitch: false !default;
 Features:
 - ability to switch easily between fixed PX values and %-percentage values (fixed-width vs fluid)
 */
/*
 $fg-column: 60px;
 $fg-gutter: 25px;
 $fg-max-columns: 12;
 */
/*
 div.c1 {
 @include mx-flex-grid(12); // 12 or 24
 @include mx-flex-gutter(); // disable for first (left) column
 }
 */
/* Set default margins at left/right when in mobile or browsers which don't support media queries */
/*
 .c,
 .site-header,
 .site-content,
 .slider-area,
 .site-footer {
 margin-left: 2%;
 margin-right: 2%;
 }
 .c {
 @include mxClearfix();
 background: #ddd;
 padding: 20px 0;
 .cc1 {
 background: #eee;
 //	@include mx-flex-grid(6);
 //	@include mx-flex-gutter(); // disable for first (left) column
 }
 .cc2 {
 //	@include mx-flex-grid(18);
 //@include mx-flex-gutter(); // disable for first (left) column
 //@include mxClearfix();
 background: #ccc;
 padding: 20px 0;
 .cc21 {
 //	@include mx-flex-grid(6);
 //@include mx-flex-gutter(); // disable for first (left) column
 background: #fff;
 min-height: 80px;
 }
 .cc22 {
 //	@include mx-flex-grid(12);
 //	@include mx-flex-gutter(); // disable for first (left) column
 background: #aaa;
 min-height: 80px;
 padding: 20px;
 }
 .cc23 {
 //	@include mx-flex-grid(6);
 //	@include mx-flex-gutter(); // disable for first (left) column
 background: #fff;
 min-height: 80px;
 }
 }
 }
 */
/* Extra small devices (phones, less than 768px) */
/* No media query under this width is the default in Bootstrap */
/*
 // Small devices (tablets, 768px and up)
 @media (min-width: $screen-small-min) {
 .c,
 .site-header,
 .site-content,
 .slider-area,
 .site-footer {
 width: 740px;
 margin-left: auto;
 margin-right: auto;
 }
 .site-content {
 .content-area {
 @include mx-flex-grid(18);
 @include mx-flex-gutter(); // disable for first (left) column
 float: right;
 }
 .widget-area {
 @include mx-flex-grid(6);
 //@include mx-flex-gutter(); // disable for first (left) column
 }
 }
 .c {
 .cc1 {
 @include mx-flex-grid(6);
 @include mx-flex-gutter(); // disable for first (left) column
 }
 .cc2 {
 @include mx-flex-grid(18);
 //@include mx-flex-gutter(); // disable for first (left) column
 //@include mxClearfix();
 .cc21 {
 @include mx-flex-grid(6);
 //@include mx-flex-gutter(); // disable for first (left) column
 }
 .cc22 {
 @include mx-flex-grid(12);
 @include mx-flex-gutter(); // disable for first (left) column
 }
 .cc23 {
 @include mx-flex-grid(6);
 @include mx-flex-gutter(); // disable for first (left) column
 }
 }
 }
 }
 // Medium devices (desktops, 992px and up)
 @media (min-width: $screen-medium-min) {
 .c,
 .site-header,
 .site-content,
 .slider-area,
 .site-footer {
 width: 960px;
 }
 }
 // Large devices (large desktops, 1200px and up)
 @media (min-width: $screen-large-min) {
 .c,
 .site-header,
 .site-content,
 .slider-area,
 .site-footer {
 width: 1170px;
 }
 }
 */
/*--------------------------------------------------------------
 # Global.css styles - used with (Normalize.css or Reset.css)
 --------------------------------------------------------------*/
html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*, *:before, *:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}
html {
  font-size: 62.5%;
  /* Corrects text resizing oddly in IE6/7 when body font-size is set using em units http://clagnut.com/blog/348/#c790 */
  overflow-y: scroll;
  /* Keeps page centered in all browsers regardless of content height */
  -webkit-text-size-adjust: 100%;
  /* Prevents iOS text size adjust after orientation change, without disabling user zoom */
  -ms-text-size-adjust: 100%;
  /* www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ */
}
::selection {
  background: #ffb7b7;
}
::-moz-selection {
  background: #ffb7b7;
}
/*
 a {
 text-decoration: none;
 }
 body,
 button,
 input,
 select,
 textarea {
 @include mxFontSize();
 line-height: $body-vspacing;
 }
 */
/*** Global defaults ***/
/*--------------------------------------------------------------
 5.1 Links
 (moved to _global.scss - should be set as earlier as possible)
 --------------------------------------------------------------*/
a {
  color: #ef202a;
  text-decoration: none;
  /*
   &:visited {
   color: $color__link-visited;
   }
   */
}
a:hover, a:focus, a:active {
  color: #9a0b12;
}
a:focus {
  outline: thin dotted;
}
a:hover, a:active {
  outline: 0;
}
a a:focus {
  background-color: #ffbf47;
  outline: 3px solid #ffbf47;
}
a:active {
  padding-top: 2px;
}
a {
  color: #ef202a;
}
a:visited {
  color: #ef202a;
}
a:hover, a:focus, a:active {
  color: #9a0b12;
}
/* END 5.1 Links */
h1 {
  margin: 1.2em 0 0.6em 0;
}
h2 {
  margin: 0.8em 0 0.4em 0;
}
h3 {
  margin: 0.6em 0 0.3em 0;
}
h4 {
  margin: 0.4em 0 0.2em 0;
}
.responsiveVideoFrame {
  float: none;
  clear: both;
  width: 100%;
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 proportion */
  padding-bottom: 58%;
  padding-top: 25px;
  height: 0;
}
.responsiveVideoFrame iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@media print {
  p a:after {
    content: " (" attr(href) ")";
  }
}
body, button, input, select, textarea {
  color: #303030;
  font-family: 'Open Sans', Ubuntu, Arial, sans-serif;
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 1.6;
}
p {
  margin: 0;
}
dfn, cite, em, i {
  font-style: italic;
}
blockquote {
  margin: 0 1.5em;
}
address {
  margin: 0 0 1.5em;
}
pre {
  background: #eee;
  font-family: "Courier 10 Pitch", Courier, monospace;
  font-size: 15px;
  font-size: 1.5rem;
  line-height: 1.6;
  margin-bottom: 1.6em;
  max-width: 100%;
  overflow: auto;
  padding: 1.6em;
}
code, kbd, tt, var {
  font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
  font-size: 15px;
  font-size: 1.5rem;
}
abbr, acronym {
  border-bottom: 1px dotted #666;
  cursor: help;
}
mark, ins {
  background: #fff9c0;
  text-decoration: none;
}
big {
  font-size: 125%;
}
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
  box-sizing: inherit;
}
body {
  background: #fff;
  /* Fallback for when there is no custom background color defined. */
}
blockquote, q {
  quotes: "" "";
}
blockquote:before, q:before, blockquote:after, q:after {
  content: "";
}
hr {
  background-color: #ccc;
  border: 0;
  height: 1px;
  margin-bottom: 1.5em;
}
ul, ol {
  margin: 0 0 1.5em 3em;
}
ul {
  list-style: disc;
}
ol {
  list-style: decimal;
}
li > ul, li > ol {
  margin-bottom: 0;
  margin-left: 1.5em;
}
dt {
  font-weight: bold;
}
dd {
  margin: 0 1.5em 1.5em;
}
img {
  height: auto;
  /* Make sure images are scaled correctly. */
  max-width: 100%;
  /* Adhere to container width. */
}
table {
  margin: 0 0 1.5em;
  width: 100%;
}
button, input[type="button"], input[type="reset"], input[type="submit"] {
  border: 1px solid;
  border-color: #ccc #ccc #bbb;
  border-radius: 3px;
  background: #e6e6e6;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 15px 17px rgba(255, 255, 255, 0.5), inset 0 -5px 12px rgba(0, 0, 0, 0.05);
  color: rgba(0, 0, 0, .8);
  font-size: 12px;
  font-size: 1.2rem;
  line-height: 1;
  padding: 0.6em 1em 0.4em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}
button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover {
  border-color: #ccc #bbb #aaa;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 15px 17px rgba(255, 255, 255, 0.8), inset 0 -5px 12px rgba(0, 0, 0, 0.02);
}
button:active, input[type="button"]:active, input[type="reset"]:active, input[type="submit"]:active, button:focus, input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus {
  border-color: #aaa #bbb #bbb;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.5), inset 0 2px 5px rgba(0, 0, 0, 0.15);
}
input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], textarea {
  color: #666;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 3px;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="number"]:focus, input[type="tel"]:focus, input[type="range"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="week"]:focus, input[type="time"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="color"]:focus, textarea:focus {
  color: #111;
}
select {
  border: 1px solid #ccc;
}
textarea {
  width: 100%;
}
/*--------------------------------------------------------------
 ## Links
 --------------------------------------------------------------*/
/*--------------------------------------------------------------
 (moved to _global.scss - should be set as earlier as possible)
 --------------------------------------------------------------*/
/*
 a {
 color: $color__link;
 text-decoration: none;
 //border-bottom: 2px solid #a959c3;
 //text-shadow: 0 0 2px #999;
 &:visited {
 color: $color__link-visited;
 }
 &:hover,
 &:focus,
 &:active {
 color: $color__link-hover;
 //text-decoration: underline;
 //border-bottom: 2px solid #a959c3;
 //text-shadow: 0 0 2px #999;
 }
 &:focus {
 outline: thin dotted;
 }
 &:hover,
 &:active {
 outline: 0;
 }
 }
 */
/*--------------------------------------------------------------
 ## Menus
 --------------------------------------------------------------*/
/*
 .main-navigation {
 clear: both;
 display: block;
 //float: left;
 //width: 100%;
 ul {
 display: none;
 list-style: none;
 margin: 0;
 padding-left: 0;
 // submenus
 ul {
 box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
 float: left;
 position: absolute;
 top: 1.5em;
 left: -999em;
 z-index: 99999;
 ul {
 left: -999em;
 top: 0;
 }
 li {
 &:hover > ul,
 &.focus > ul {
 left: 100%;
 }
 }
 a {
 width: 200px;
 }
 :hover > a,
 .focus > a {
 }
 a:hover,
 a.focus {
 }
 }
 li:hover > ul,
 li.focus > ul {
 left: auto;
 }
 }
 li {
 float: left;
 position: relative;
 &:hover > a,
 &.focus > a {
 }
 }
 a {
 display: block;
 text-decoration: none;
 }
 .current_page_item > a,
 .current-menu-item > a,
 .current_page_ancestor > a,
 .current-menu-ancestor > a {
 }
 }
 */
/* Small menu. */
/*
 .menu-toggle,
 .main-navigation.toggled ul {
 display: block;
 }
 @media screen and (min-width: 37.5em) {
 .menu-toggle {
 display: none;
 }
 .main-navigation ul {
 display: block;
 }
 }
 */
.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%;
}
/*
 .site-main .comment-navigation,
 .site-main .paging-navigation,
 .site-main .post-navigation {
 margin: 0 0 1.5em;
 overflow: hidden;
 }
 .comment-navigation .nav-previous,
 .paging-navigation .nav-previous,
 .post-navigation .nav-previous {
 float: left;
 width: 50%;
 }
 .comment-navigation .nav-next,
 .paging-navigation .nav-next,
 .post-navigation .nav-next {
 float: right;
 text-align: right;
 width: 50%;
 }
 */
/*--------------------------------------------------------------
 5.0 Navigation
 --------------------------------------------------------------*/
/*--------------------------------------------------------------
 (moved to _global.scss - should be set as earlier as possible)
 5.1 Links
 --------------------------------------------------------------*/
/*--------------------------------------------------------------
 5.2 Menus
 --------------------------------------------------------------*/
/*
 Planning:
 - no JS
 --- mobile
 --- bp-menu-480 - single-row menu (multiple rows should also work, but not intended to be used)
 - JS
 --- mobile
 --- bp-menu-480
 - other breakpoints (if necessary)
 - ...
 .main-navigation { // #site-navigation
 .menu { // #primary-menu
 //ul.nav-menu, // the classname was used for default case, but then moved out of th UL... OR added by JS...? Better don't use it!
 */
.main-navigation {
  margin: 0.5em 0 0 0;
  font-size: 16px;
  font-size: 1.6rem;
}
.main-navigation .menu {
  background: #474747;
  background: #131d27;
  margin: 0.5em 0 0 0;
}
@media all and (min-width: 640px) {
  .main-navigation {
    background: #474747;
    background: #131d27;
    margin: 0.5em 0 0 0;
  }
  .main-navigation .menu {
    background: none;
    margin: 0 0 0 0;
  }
}
@media all and (min-width: 768px) {
}
.menu-toggle {
  cursor: pointer;
  display: none;
  margin: 0 auto;
  position: relative;
  /*
   float: right;
   margin-right: 15px;
   margin-top: 8px;
   margin-bottom: 8px;
   */
  max-width: 100px;
  padding: 9px 10px;
  background-color: transparent;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
  color: #fff;
  text-align: center;
  min-height: 55px;
  background: #999;
  background: #000;
  background: #131d27;
  box-shadow: none;
}
.menu-toggle:hover {
  box-shadow: none;
  background: #cf171f;
}
.menu-toggle span {
  display: block;
  height: 8px;
  margin-top: 6px;
  background: transparent;
  border-top: 2px solid #fff;
  border-bottom: 2px solid #fff;
}
.menu-toggle span:after {
  content: '';
  display: block;
  height: 2px;
  margin-top: 10px;
  background: transparent;
  border-top: 2px solid #fff;
}
.main-navigation ul {
  margin: 0 0 0 0;
  list-style: none;
  padding-left: 0;
}
.main-navigation .menu li {
  position: relative;
  display: block;
}
.main-navigation ul.menu > li {
  border-top: 1px solid #888;
}
.main-navigation ul.menu > li:last-child {
  border-bottom: 1px solid #888;
}
.main-navigation .menu li a {
  display: block !important;
  text-decoration: none;
  padding: 5px 5px 5px 5px;
  font-weight: bold;
  text-transform: uppercase;
  -webkit-transition: color 300ms, background-color 300ms;
  -moz-transition: color 300ms, background-color 300ms;
  -o-transition: color 300ms, background-color 300ms;
  transition: color 300ms, background-color 300ms;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  background: transparent;
  color: #fff;
}
.main-navigation .menu li li a {
  text-transform: none;
  padding-left: 25px;
}
.main-navigation .menu li li li a {
  padding-left: 45px;
}
.main-navigation .menu li.current-menu-item > a, .main-navigation .menu li.current-menu-ancestor > a, .main-navigation .menu li.current-menu-parent > a {
  background: #ad030a;
  color: #fff;
}
.main-navigation .menu li a:hover {
  background: #cf171f;
  color: #fff;
}
/*
 .main-navigation .menu li.current-menu-item,
 .main-navigation .menu li.current-menu-ancestor,
 .main-navigation .menu li.current-menu-parent {
 // Links - 3 cases: default A, current A and hovered A (which can be current or not) + keep in mind next levels
 //// No more like that!? Use direct child(ren) instead
 a {
 //background: #131313;
 //color: #aaaaaa;
 //background: #477b19; // 4c6c11, 4a7b1f
 //color: #fff;
 }
 // next levels:
 // remember to reset the values above if necessary
 // Show next level (only, but still disable the children levels)
 li a {
 //background: #252525; // reset
 //color: #868686; // reset
 //background: #131313; // reset
 //color: #aaaaaa; // reset
 }
 li.current-menu-item,
 li.current-menu-ancestor,
 li.current-menu-parent {
 a {
 //background: #252525; // reset
 //color: #868686; // reset
 //background: #131313; // reset
 //color: #aaaaaa; // reset
 }
 // next levels
 li.current-menu-item a,
 li.current-menu-ancestor a,
 li.current-menu-parent a {
 //background: #131313;
 //color: #aaaaaa;
 }
 // Hover set after current_active class, so that the hover also affects the .current-item
 a:hover {
 //background: #131313;
 //color: #aaaaaa;
 //background: #477b19;
 //color: #fff;
 }
 }
 // Hover set after current_active class, so that the hover also affects the .current-item
 a:hover {
 //background: #252525; // reset
 //color: #868686; // reset
 //background: #131313; // reset
 //color: #aaaaaa; // reset
 }
 }
 */
.main-navigation .menu li.menu-item-has-children > a:after {
  content: " »";
}
/*
 .main-navigation li.current-menu-item-manual {
 a,
 a:hover {
 background: #131313;
 color: #aaaaaa;
 }
 }
 */
.main-navigation-JS .menu-toggle {
  display: block;
}
.main-navigation-JS ul.menu {
  display: none;
}
@media all and (min-width: 640px) {
  .main-navigation-JS .menu-toggle {
    display: none;
  }
  .main-navigation-JS ul.menu {
    display: block;
  }
}
.main-navigation-JS.toggled ul.menu {
  display: block;
}
.main-navigation-JS ul.menu li.menu-item-has-children .itemToggle {
  position: absolute;
  display: block;
  right: 5px;
  top: 5px;
  width: 1.55em;
  width: 2em;
  text-align: center;
  background: #888;
  color: #fff;
  cursor: pointer;
  font-size: inherit;
}
.main-navigation-JS ul.menu li.menu-item-has-children .itemToggle:after {
  content: "+";
}
.main-navigation-JS ul.menu li.menu-item-has-children .itemToggleCollapse:after {
  content: "-";
}
.main-navigation-JS ul.menu li.menu-item-has-children .itemToggle:hover {
  background: #ccc;
  color: #333;
}
@media all and (min-width: 640px) {
  .main-navigation-JS ul.menu li.menu-item-has-children .itemToggle {
    display: none;
  }
}
@media all and (min-width: 640px) {
  .menu-toggle {
    margin: 0;
  }
  .main-navigation .menu li {
    float: left;
  }
  .main-navigation ul.menu > li {
    border-top: 0;
  }
  .main-navigation ul.menu > li:last-child {
    border-bottom: 0;
  }
  .main-navigation .menu ul {
    display: none;
    float: left;
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 9992;
  }
  .main-navigation ul.menu ul, .main-navigation ul.menu ul a {
    width: 260px;
  }
  .main-navigation ul.menu li ul {
    /*
     visibility: hidden; // hides sub-menu
     opacity: 0;
     z-index: -1;
     transform: translateY(-2em);
     transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
     */
  }
  .main-navigation ul.menu li:hover ul {
    /*
     visibility: visible; // shows the menu
     opacity: 1;
     z-index: 1;
     transform: translateY(0%);
     transition-delay: 0s, 0s, 0.3s; // this removes the transition delay so the menu will be visible while the other styles transition
     */
    /*
     -moz-animation: fadeInUp .3s ease-in;
     -webkit-animation: fadeInUp .3s ease-in;
     animation: fadeInUp .3s ease-in;
     */
    -moz-animation: flipInX 0.3s ease-in;
    -webkit-animation: flipInX 0.3s ease-in;
    animation: flipInX 0.3s ease-in;
  }
  .main-navigation ul.menu li > ul {
    display: none !important;
  }
  .main-navigation ul.menu li:hover > ul {
    display: block !important;
  }
  .main-navigation ul.menu ul ul {
    left: 100%;
    top: 0;
  }
  .main-navigation .menu {
    padding-left: 0px;
    transition: 0.3s padding 0.6s linear;
  }
  .main-navigation .menu ul {
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    background: #474747;
  }
  .main-navigation .menu li {
    border-right: 1px solid #999;
  }
  .main-navigation .menu li:nth-of-type(1) {
    border-left: 1px solid #999;
  }
  .main-navigation .menu li a {
    border-radius: 0px;
    display: inline-block;
    margin: 0;
    padding: 14px 5px 13px 5px;
    min-height: 48px;
    font-size: 13px;
    font-size: 1.3rem;
    color: #fff;
    /*
     //hvr-sweep-to-right
     display: inline-block;
     vertical-align: middle;
     -webkit-transform: translateZ(0);
     transform: translateZ(0);
     box-shadow: 0 0 1px rgba(0, 0, 0, 0);
     -webkit-backface-visibility: hidden;
     backface-visibility: hidden;
     -moz-osx-font-smoothing: grayscale;
     position: relative;
     -webkit-transition-property: color;
     transition-property: color;
     -webkit-transition-duration: 0.3s;
     transition-duration: 0.3s;
     */
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    /*
     display: inline-block;
     vertical-align: middle;
     -webkit-transform: translateZ(0);
     transform: translateZ(0);
     box-shadow: 0 0 1px rgba(0, 0, 0, 0);
     -webkit-backface-visibility: hidden;
     backface-visibility: hidden;
     -moz-osx-font-smoothing: grayscale;
     position: relative;
     overflow: hidden;
     */
  }
  .main-navigation .menu li a:before {
    /*
     content: "";
     position: absolute;
     z-index: -1;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: $bg-color-hover;
     -webkit-transform: scaleX(0);
     transform: scaleX(0);
     -webkit-transform-origin: 0 50%;
     transform-origin: 0 50%;
     -webkit-transition-property: transform;
     transition-property: transform;
     -webkit-transition-duration: 0.3s;
     transition-duration: 0.3s;
     -webkit-transition-timing-function: ease-out;
     transition-timing-function: ease-out;
     */
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #cf171f;
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: 50%;
    transform-origin: 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    /*
     content: "";
     position: absolute;
     z-index: -1;
     left: 0;
     right: 100%;
     top: 0;
     background: $bg-color-hover;
     height: 4px;
     -webkit-transition-property: right;
     transition-property: right;
     -webkit-transition-duration: 0.3s;
     transition-duration: 0.3s;
     -webkit-transition-timing-function: ease-out;
     transition-timing-function: ease-out;
     */
  }
  .main-navigation .menu li a:hover, .main-navigation .menu li a:focus, .main-navigation .menu li a:active {
    color: white;
  }
  .main-navigation .menu li a:hover:before, .main-navigation .menu li a:focus:before, .main-navigation .menu li a:active:before {
    /*
     -webkit-transform: scaleX(1);
     transform: scaleX(1);
     */
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    /*
     right: 0;
     */
  }
  .main-navigation .menu li li, .main-navigation .menu li li:nth-of-type(1) {
    border-left: 0;
    border-right: 0;
  }
  .main-navigation .menu li li a {
    padding: 10px 15px 9px 15px;
    min-height: 45px;
    border-top: 1px solid #ccc;
  }
  .main-navigation .menu li.current-menu-item > a, .main-navigation .menu li.current-menu-ancestor > a, .main-navigation .menu li.current-menu-parent > a {
    background: #ad030a;
    color: #fff;
  }
  .main-navigation .menu li a:hover {
    background: transparent;
  }
  .main-navigation.fixedMenu {
    margin-top: 0;
    position: fixed;
    top: 0px;
    left: 0;
    right: 0;
    z-index: 9991;
    opacity: 0.8;
  }
  .main-navigation.fixedMenu .menu {
    padding-left: 180px;
    transition: 0.3s padding 1.2s linear;
  }
  .main-navigation.fixedMenu .menu li a {
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    padding: 8px 15px 7px 15px;
    min-height: 41px;
  }
  .main-navigation.notFixedMenu .menu li a {
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
  }
}
@media all and (min-width: 768px) {
  .main-navigation .menu li a {
    padding: 17px 10px 16px 10px;
    min-height: 56px;
    font-size: 14px;
    font-size: 1.4rem;
  }
}
@media all and (min-width: 992px) {
  .main-navigation .menu li a {
    padding: 22px 15px 21px 15px;
    min-height: 69px;
    font-size: 16px;
    font-size: 1.6rem;
  }
}
/*
 @include mxMQ($bp-nav-top-menu-768) {
 // on the same row with .site-branding
 .main-navigation {
 //float: right;
 //clear: none; // reset
 //width: auto; // reset
 //width: 52%;
 }
 .main-navigation ul {
 //float: right;
 }
 .main-navigation li a {
 padding: 22px 10px;
 }
 .main-navigation ul ul {
 //top: 60px;
 top: 64px; // reset
 }
 } //@include mxMQ($bp-nav-top-menu-768)
 @include mxMQ($bp-nav-top-menu-992) {
 // on the same row with .site-branding
 .main-navigation {
 //float: right;
 //clear: none; // reset
 //width: auto; // reset
 //width: 62%;
 }
 .main-navigation ul {
 //float: right;
 }
 .main-navigation li a {
 padding: 22px 20px; // reset padding-left
 }
 // next levels offset for mobiles - most probably should be overwritten
 .main-navigation li li a {
 padding: 10px 20px; // reset padding-left
 }
 .main-navigation li li li a {
 padding: 10px 20px; // reset padding-left
 }
 .main-navigation ul ul {
 //top: 60px;
 //top: 64px; // reset
 }
 .main-navigation ul ul a {
 width: 280px;
 }
 } //@include mxMQ($bp-nav-top-menu-992)
 */
/*
 * Animations
 */
@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}
@-webkit-keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotateX(-10deg);
  }
  70% {
    -webkit-transform: perspective(400px) rotateX(10deg);
  }
  100% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
}
@-moz-keyframes flipInX {
  0% {
    -moz-transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
  40% {
    -moz-transform: perspective(400px) rotateX(-10deg);
  }
  70% {
    -moz-transform: perspective(400px) rotateX(10deg);
  }
  100% {
    -moz-transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
}
@-o-keyframes flipInX {
  0% {
    -o-transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
  40% {
    -o-transform: perspective(400px) rotateX(-10deg);
  }
  70% {
    -o-transform: perspective(400px) rotateX(10deg);
  }
  100% {
    -o-transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
}
@keyframes flipInX {
  0% {
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotateX(-10deg);
  }
  70% {
    transform: perspective(400px) rotateX(10deg);
  }
  100% {
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
}
.flipInX {
  -webkit-backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  -moz-backface-visibility: visible !important;
  -moz-animation-name: flipInX;
  -o-backface-visibility: visible !important;
  -o-animation-name: flipInX;
  backface-visibility: visible !important;
  animation-name: flipInX;
}
/* 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: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: 1.4rem;
  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. */
}
/* Do not show the outline on the skip link target. */
#content[tabindex="-1"]:focus {
  outline: 0;
}
.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;
}
.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;
  table-layout: fixed;
}
.clear:after, .entry-content:after, .comment-content:after, .site-header:after, .site-content:after, .site-footer:after {
  clear: both;
}
.widget {
  margin: 0 0 1.5em;
  /* Make sure select elements fit in widgets. */
}
.widget select {
  max-width: 100%;
}
.widget-area .widget:nth-child(1) h2 {
  margin-top: 0;
}
/*--------------------------------------------------------------
 ## Posts and pages
 --------------------------------------------------------------*/
.sticky {
  display: block;
}
.hentry {
  margin: 0 0 1.5em;
}
.byline {
  display: none;
}
.published:not(.updated) {
  display: none;
}
/* default:
 .updated:not(.published) {
 display: none;
 }
 */
.single .byline, .group-blog .byline {
  display: inline;
}
.page-content, .entry-content, .entry-summary {
  margin: 1em 0 0;
}
.entry-content > ul, .entry-content > ol, .entry-content > table, .entry-content p {
  margin: 0 0 1em 0;
}
.entry-content ul ul, .entry-content ul ol, .entry-content ol ul, .entry-content ol ol {
  margin-bottom: 0;
  margin-left: 0;
}
.entry-content ul li, .entry-content ol li {
  margin: 0.2em 0;
}
.entry-content .stTitle2 {
  font-size: 1.4em;
  color: #33c;
}
.page-links {
  clear: both;
  margin: 0 0 1.5em;
}
/*--------------------------------------------------------------
 ## Comments
 --------------------------------------------------------------*/
.comment-content a {
  word-wrap: break-word;
}
.bypostauthor {
  display: block;
}
/* Globally hidden elements when Infinite Scroll is supported and in use. */
.infinite-scroll .posts-navigation, .infinite-scroll.neverending .site-footer {
  /* Older / Newer Posts Navigation (always hidden) */
  /* 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;
}
.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%;
}
/*--------------------------------------------------------------
 ## Captions
 --------------------------------------------------------------*/
.wp-caption {
  margin-bottom: 1.5em;
  max-width: 100%;
}
.wp-caption img[class*="wp-image-"] {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.wp-caption .wp-caption-text {
  margin: 0.8075em 0;
}
.wp-caption-text {
  text-align: center;
}
/*--------------------------------------------------------------
 ## Galleries
 --------------------------------------------------------------*/
.gallery {
  margin-bottom: 1.5em;
}
.gallery-item {
  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;
}
.mfp-bg {
  background: #444;
  opacity: 0.6;
}
/*
 .mfp-arrow {
 cursor: pointer;
 }
 .mfp-arrow:hover {
 background: #222;
 }
 */
button.mfp-close, button.mfp-close:hover, button.mfp-close:focus, button.mfp-close:active, button.mfp-arrow, button.mfp-arrow:hover, button.mfp-arrow:focus, button.mfp-arrow:active {
  box-shadow: none;
}
.mfp-arrow, button.mfp-arrow {
  cursor: pointer;
  width: 68px;
}
.mfp-arrow-left, button.mfp-arrow-left {
  left: 0;
  background: url("assets/img/mfp/image-preview-arrow-prev.png") no-repeat scroll 10px center rgba(0, 0, 0, 0.1);
}
.mfp-arrow-left:hover, button.mfp-arrow-left:hover {
  background: url("assets/img/mfp/image-preview-arrow-prev.png") no-repeat scroll -90px center rgba(0, 0, 0, 0.3);
}
.mfp-arrow-left:after, .mfp-arrow-left .mfp-a {
  border-right: 0;
}
.mfp-arrow-left:before, .mfp-arrow-left .mfp-b {
  border-right: 0;
}
.mfp-arrow-right, button.mfp-arrow-right {
  right: 0;
  background: url("assets/img/mfp/image-preview-arrow-next.png") no-repeat scroll 10px center rgba(0, 0, 0, 0.1);
}
.mfp-arrow-right:hover, button.mfp-arrow-right:hover {
  background: url("assets/img/mfp/image-preview-arrow-next.png") no-repeat scroll -90px center rgba(0, 0, 0, 0.3);
}
.mfp-arrow-right:after, .mfp-arrow-right .mfp-a {
  border-left: 0;
}
.mfp-arrow-right:before, .mfp-arrow-right .mfp-b {
  border-left: 0;
}
/*
 @media all and (max-width: 900px) {
 .mfp-arrow {
 -webkit-transform: scale(0.75);
 transform: scale(0.75); }
 .mfp-arrow-left {
 -webkit-transform-origin: 0;
 transform-origin: 0; }
 .mfp-arrow-right {
 -webkit-transform-origin: 100%;
 transform-origin: 100%; }
 }
 */
.mfp-preloader {
  background-repeat: no-repeat;
  background-image: url('data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==');
  background-position: center center;
  padding: 45px 0 0 0;
}
/*
 .content-area {
 padding: 20px;
 background: #eee;
 color: #222;
 }
 */
.mfp-content img.mfp-img {
  border: 10px solid #fff;
  padding: 0 0;
}
.mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close {
  font-size: 36px;
  font-size: 3.6rem;
  top: -36px;
  right: -10px;
  opacity: 1;
  filter: alpha(opacity=100);
  top: -22px;
  right: -16px;
  background: #fff;
  background: rgba(233, 233, 233, 0.85);
  color: #232323;
  box-shadow: 0px 0px 1px 1px rgba(50, 50, 50, 0.3);
  -webkit-box-shadow: 0px 0px 1px 1px rgba(50, 50, 50, 0.3);
  -moz-box-shadow: 0px 0px 1px 1px rgba(50, 50, 50, 0.3);
  width: auto;
  width: 33px;
  padding: 0;
  line-height: 1;
  line-height: 33px;
  height: 33px;
  text-align: center;
  border-radius: 33px;
  -o-border-radius: 33px;
  -ms-border-radius: 33px;
  -moz-border-radius: 33px;
  -webkit-border-radius: 33px;
  top: -12px;
  right: -10px;
}
.mfp-image-holder .mfp-close:hover, .mfp-iframe-holder .mfp-close:hover {
  background: rgba(255, 255, 255, 1.0);
  box-shadow: 0px 0px 1px 1px rgba(50, 50, 50, 0.5);
  -webkit-box-shadow: 0px 0px 1px 1px rgba(50, 50, 50, 0.5);
  -moz-box-shadow: 0px 0px 1px 1px rgba(50, 50, 50, 0.5);
}
.mfp-content .mfp-bottom-bar {
  background: #fff;
  min-height: 40px;
}
.mfp-content .mfp-bottom-bar .mfp-title {
  padding-left: 10px;
  padding-top: 8px;
  padding-bottom: 8px;
  color: #333;
  font-size: 16px;
  font-size: 1.6rem;
}
.mfp-content .mfp-bottom-bar .mfp-counter {
  padding-right: 10px;
  padding-top: 8px;
  padding-bottom: 8px;
  color: #333;
}
/*
 // add spinner indicator instead of “Loading…” text or both? - http://codepen.io/dimsemenov/pen/aKwxt, http://codepen.io/dimsemenov/pen/HdjtL
 .mfp-preloader {
 width: 30px;
 height: 30px;
 background-color: #FFF;
 opacity: 0.65;
 margin: 0 auto;
 -webkit-animation: rotateplane 1.2s infinite ease-in-out;
 animation: rotateplane 1.2s infinite ease-in-out;
 }
 @-webkit-keyframes rotateplane {
 0% { -webkit-transform: perspective(120px) }
 50% { -webkit-transform: perspective(120px) rotateY(180deg) }
 100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
 }
 @keyframes rotateplane {
 0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg) }
 50% { transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) }
 100% { transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg) }
 }
 */
/**
 About fonts:
 These declarations define different font files, so (even they are the same family) they are different fonts! 
 @font-face {
 font-family: 'PT Sans Narrow';
 font-style: normal;
 font-weight: 400;
 }
 @font-face {
 font-family: 'PT Sans Narrow';
 font-style: normal;
 font-weight: 700;
 }
 Tests:
 If we have only defined 1st declaration, then when we specify BOLD text - we'll have bold-ed text!
 If we have defined 1st and 2nd declaration, then when we specify BOLD text - we'll have different font for bold-ed text, which for this particular font is double or greater bold-ed than previous example! For this font it's very unusual to have such big contrast/difference, so it's not recommended to use it (without tests)! 
 'Open Sans' - Italic seems exactly the same as regular font, styled as italic!!! The bold and bold+italic are a bit bolder than bold-ing the regular font!
 More tests:
 There is confirmed style-difference between automatically styled to bold/italic and especially designed font for this particular style!
 We can omit different fonts for bold/italic/bold+italic to make page load faster, but for better design requirements we better load different fonts for these styles!
 **/
/*** Download Google Web Fonts?
 https://github.com/majodev/google-webfonts-helper
 - https://google-webfonts-helper.herokuapp.com/
 // new fonts ideas can be found: http://www.font2web.com/ - Last converted
 ***/
/**** Open Sans ****/
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans/open-sans-v13-cyrillic_latin-regular.eot');
  src: local('Open Sans'), local('OpenSans'), url('../fonts/open-sans/open-sans-v13-cyrillic_latin-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/open-sans/open-sans-v13-cyrillic_latin-regular.woff2') format('woff2'), url('../fonts/open-sans/open-sans-v13-cyrillic_latin-regular.woff') format('woff'), url('../fonts/open-sans/open-sans-v13-cyrillic_latin-regular.ttf') format('truetype'), url('../fonts/open-sans/open-sans-v13-cyrillic_latin-regular.svg#OpenSans') format('svg');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/open-sans/open-sans-v13-cyrillic_latin-italic.eot');
  src: local('Open Sans Italic'), local('OpenSans-Italic'), url('../fonts/open-sans/open-sans-v13-cyrillic_latin-italic.eot?#iefix') format('embedded-opentype'), url('../fonts/open-sans/open-sans-v13-cyrillic_latin-italic.woff2') format('woff2'), url('../fonts/open-sans/open-sans-v13-cyrillic_latin-italic.woff') format('woff'), url('../fonts/open-sans/open-sans-v13-cyrillic_latin-italic.ttf') format('truetype'), url('../fonts/open-sans/open-sans-v13-cyrillic_latin-italic.svg#OpenSans') format('svg');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/open-sans/open-sans-v13-cyrillic_latin-700.eot');
  src: local('Open Sans Bold'), local('OpenSans-Bold'), url('../fonts/open-sans/open-sans-v13-cyrillic_latin-700.eot?#iefix') format('embedded-opentype'), url('../fonts/open-sans/open-sans-v13-cyrillic_latin-700.woff2') format('woff2'), url('../fonts/open-sans/open-sans-v13-cyrillic_latin-700.woff') format('woff'), url('../fonts/open-sans/open-sans-v13-cyrillic_latin-700.ttf') format('truetype'), url('../fonts/open-sans/open-sans-v13-cyrillic_latin-700.svg#OpenSans') format('svg');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/open-sans/open-sans-v13-cyrillic_latin-700italic.eot');
  src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'), url('../fonts/open-sans/open-sans-v13-cyrillic_latin-700italic.eot?#iefix') format('embedded-opentype'), url('../fonts/open-sans/open-sans-v13-cyrillic_latin-700italic.woff2') format('woff2'), url('../fonts/open-sans/open-sans-v13-cyrillic_latin-700italic.woff') format('woff'), url('../fonts/open-sans/open-sans-v13-cyrillic_latin-700italic.ttf') format('truetype'), url('../fonts/open-sans/open-sans-v13-cyrillic_latin-700italic.svg#OpenSans') format('svg');
}
/**** PT Sans Narrow ****/
@font-face {
  font-family: 'PT Sans Narrow';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/pt-sans-narrow/pt-sans-narrow-v7-cyrillic_latin-regular.eot');
  src: local('PT Sans Narrow'), local('PTSans-Narrow'), url('../fonts/pt-sans-narrow/pt-sans-narrow-v7-cyrillic_latin-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/pt-sans-narrow/pt-sans-narrow-v7-cyrillic_latin-regular.woff2') format('woff2'), url('../fonts/pt-sans-narrow/pt-sans-narrow-v7-cyrillic_latin-regular.woff') format('woff'), url('../fonts/pt-sans-narrow/pt-sans-narrow-v7-cyrillic_latin-regular.ttf') format('truetype'), url('../fonts/pt-sans-narrow/pt-sans-narrow-v7-cyrillic_latin-regular.svg#PTSansNarrow') format('svg');
}
/*
 @font-face {
 font-family: 'PT Sans Narrow';
 font-style: normal;
 font-weight: 700;
 src: url('../fonts/pt-sans-narrow/pt-sans-narrow-v7-cyrillic_latin-700.eot'); // IE9 Compat Modes
 src: local('PT Sans Narrow Bold'), local('PTSans-NarrowBold'),
 url('../fonts/pt-sans-narrow/pt-sans-narrow-v7-cyrillic_latin-700.eot?#iefix') format('embedded-opentype'), // IE6-IE8
 url('../fonts/pt-sans-narrow/pt-sans-narrow-v7-cyrillic_latin-700.woff2') format('woff2'), // Super Modern Browsers
 url('../fonts/pt-sans-narrow/pt-sans-narrow-v7-cyrillic_latin-700.woff') format('woff'), // Modern Browsers
 url('../fonts/pt-sans-narrow/pt-sans-narrow-v7-cyrillic_latin-700.ttf') format('truetype'), // Safari, Android, iOS
 url('../fonts/pt-sans-narrow/pt-sans-narrow-v7-cyrillic_latin-700.svg#PTSansNarrow') format('svg'); // Legacy iOS
 }
 */
/**** Ubuntu Condensed ****/
@font-face {
  font-family: 'Ubuntu Condensed';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/ubuntu-condensed/ubuntu-condensed-v7-latin_cyrillic-regular.eot');
  /* IE9 Compat Modes */
  src: local('Ubuntu Condensed'), local('UbuntuCondensed-Regular'), url('../fonts/ubuntu-condensed/ubuntu-condensed-v7-latin_cyrillic-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/ubuntu-condensed/ubuntu-condensed-v7-latin_cyrillic-regular.woff2') format('woff2'), url('../fonts/ubuntu-condensed/ubuntu-condensed-v7-latin_cyrillic-regular.woff') format('woff'), url('../fonts/ubuntu-condensed/ubuntu-condensed-v7-latin_cyrillic-regular.ttf') format('truetype'), url('../fonts/ubuntu-condensed/ubuntu-condensed-v7-latin_cyrillic-regular.svg#UbuntuCondensed') format('svg');
  /* IE6-IE8 */
  /* Super Modern Browsers */
  /* Modern Browsers */
  /* Safari, Android, iOS */
  /* Legacy iOS */
}
/*
 http://fontawesome.io/
 Version 4.6.3 (2016.07)
 One Font, 634 Icons
 http://fontawesome.io/cheatsheet/
 http://fontawesome.io/get-started/ - Download or use CDN
 */
/*
 // Commented out the query strings like "v=#{$fa-version}"
 @font-face {
 font-family: 'FontAwesome';
 src: url('../fonts/font-awesome/fontawesome-webfont.eot?v=#{$fa-version}');
 src: url('../fonts/font-awesome/fontawesome-webfont.eot?#iefix&v=#{$fa-version}') format('embedded-opentype'),
 url('../fonts/font-awesome/fontawesome-webfont.woff2?v=#{$fa-version}') format('woff2'),
 url('../fonts/font-awesome/fontawesome-webfont.woff?v=#{$fa-version}') format('woff'),
 url('../fonts/font-awesome/fontawesome-webfont.ttf?v=#{$fa-version}') format('truetype'),
 url('../fonts/font-awesome/fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular') format('svg');
 //	src: url('../fonts/font-awesome/FontAwesome.otf') format('opentype'); // used when developing fonts
 font-weight: normal;
 font-style: normal;
 }
 */
@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/font-awesome/fontawesome-webfont.eot');
  src: url('../fonts/font-awesome/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/font-awesome/fontawesome-webfont.woff2') format('woff2'), url('../fonts/font-awesome/fontawesome-webfont.woff') format('woff'), url('../fonts/font-awesome/fontawesome-webfont.ttf') format('truetype'), url('../fonts/font-awesome/fontawesome-webfont.svg#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Usage - check CSS file OR http://fontawesome.io/examples/
 There are animations, rotations and more...
 Accessibility-Minded: http://fontawesome.io/accessibility/ and https://cdn.fontawesome.com/help#qa-autoa11y
 <a class="btn btn-primary" href="#navigation-main">
 <i class="fa fa-bars" aria-hidden="true" title="Skip to main navigation"></i>
 <span class="sr-only">Skip to main navigation</span>
 </a>
 <div class="input-group margin-bottom-sm">
 <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw" aria-hidden="true"></i></span>
 <input class="form-control" type="text" placeholder="Email address">
 </div>
 <div class="input-group">
 <span class="input-group-addon"><i class="fa fa-key fa-fw" aria-hidden="true"></i></span>
 <input class="form-control" type="password" placeholder="Password">
 </div>
 */
.customFontAwesomeClass {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.customFontAwesomeClass:before {
  content: "\f003";
  padding-right: 0.3em;
}
.customFontAwesomeClass2 a:before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f003";
  padding-right: 0.3em;
}
/* DEFAULT CLASSES:
 .fa {
 display: inline-block;
 font: normal normal normal 14px/1 FontAwesome;
 font-size: inherit;
 text-rendering: auto;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 }
 // makes the font 33% larger relative to the icon container
 .fa-lg {
 font-size: 1.33333333em;
 line-height: 0.75em;
 vertical-align: -15%;
 }
 .fa-3x {
 font-size: 3em;
 }
 .fa-5x {
 font-size: 5em;
 }
 .fa-spin {
 -webkit-animation: fa-spin 2s infinite linear;
 animation: fa-spin 2s infinite linear;
 }
 .fa-pulse {
 -webkit-animation: fa-spin 1s infinite steps(8);
 animation: fa-spin 1s infinite steps(8);
 }
 @-webkit-keyframes fa-spin {
 0% {
 -webkit-transform: rotate(0deg);
 transform: rotate(0deg);
 }
 100% {
 -webkit-transform: rotate(359deg);
 transform: rotate(359deg);
 }
 }
 @keyframes fa-spin {
 0% {
 -webkit-transform: rotate(0deg);
 transform: rotate(0deg);
 }
 100% {
 -webkit-transform: rotate(359deg);
 transform: rotate(359deg);
 }
 }
 .fa-camera-retro:before {
 content: "\f083";
 }
 .fa-thumbs-o-up:before {
 content: "\f087";
 }
 .fa-external-link:before {
 content: "\f08e";
 }
 */
/*
 http://time2travel.bg/
 Backgrounds:
 #81d742 - light green (Text: #ffffff)
 #dd3333 - red
 #30d1d1 - light blue (twitter?)
 #dd890b - light brown
 #8224e3 - violet
 #ef4572 - pink
 #1e73be - blue
 #cf4d35 - red-to-brown (also good for titles on #fff background and buttons)
 ? #eeee22 - very light yellow (not enough contrast to #fff texts...)
 https://www.liquidweb.com
 #53b3e8 - light blue
 #67c5f0 - light blue...
 #e65c1c - orange
 #ed202a - red
 #cf30a0 - violet (фон?)
 #fcd220 - green
 //OTHER:
 #0f75bf - (dark) blue (pastel)
 #0093d8 - light blue (pastel)
 - 0393d9
 - 27aae0, 27abdb, 27aae0, 24ace0, 23ace2
 #022d41 - blue (dark)
 #0695d6 - blue (light)
 #078c4b - dark green	(pastel - light blue+light green)
 #80c141 - light green (pastel)
 - 37b74a, 38b54f, 3bb44a, 3ab54d, 38b54d
 - 7ec346
 #d04d55 - red (pastel)
 - bf1e2d, bd202b, c11b27, c21b2c
 #f8931d - orange (pastel)
 - fb921d
 - fa9d36, fc9c35, f9a137, f79f35
 #f67e1f - dark orange (pastel - orange+yellow)
 #ffc20f - yellow (pastel)
 - fdc20e
 #2d2d2d - gray
 #1e1e1e - gray (dark)
 https://violleta.com/
 #fc0 - yellow
 #yt_mainmenu ul.navi>li.level1.active:nth-of-type(1){
 background:#fc0;
 background-image:-moz-linear-gradient(top,#ffcc00,#e2a715);
 background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffcc00),color-stop(1,#e2a715));
 filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffcc00',EndColorStr='#e2a715');
 -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffcc00', EndColorStr='#e2a715')";
 }
 #f90 - orange
 #ff9900,#ca6c18
 #e00000 - red
 #e00000,#a81317
 #f6d - pink
 #ff66dd,#b45e91
 #c0a - violet
 #cc00aa,#7f1863
 #1aa1ee - blue
 #1aa1ee,#2d77a4
 #390 - green
 #339900,#166b2e
 #ab0 - light green
 #aabb00, #6d7e21
 Background/Color:
 #323a45/#e74c34 - menu --- http://www.djesur.com
 #005ea5/#fff - 100% width (responsive) box
 #dee0e2/#454a4c - links (#171819 hover) - (border-top: 10px solid #005ea5) - (Heading: #0b0c0c; heading's border-bottom: 1px solid #bfc1c3; - like a delimiter line)
 #323a45/#bdc3c7 - links; #fff - headings/text (pre-final footer) --- http://www.djesur.com
 #292f38/#bdc3c7 - text or links (final footer) --- http://www.djesur.com
 #yt_header #yt_logo {
 animation: 1s ease 1s normal forwards 1 running comeDown;
 transform: translate(0px, -200px);
 }
 #yt_spotlight0 ul.menu {
 animation: 1s ease 2s normal forwards 1 running comeDown;
 transform: translate(0px, -200px);
 }
 #yt_header .yt-socialbt{
 -webkit-transform:translate(0,-200px);
 -moz-transform:translate(0,-200px);
 -ms-transform:translate(0,-200px);
 -o-transform:translate(0,-200px);
 transform:translate(0,-200px);
 animation:1s ease 3s normal forwards 1 comeDown;
 -webkit-animation:3s ease 1s normal forwards 1 comeDown;
 }
 #yt_header ul.blank {
 animation: 1s ease 4s normal forwards 1 running comeDown;
 transform: translate(0px, -200px);
 }
 */
/******************
 * Common elements - boxes, dialogs, icons and more
 */
h1.page-title, .hentry h1, .hentry h2, .hentry h3, .hentry h4, .hentry h5, .hentry h6 {
  color: #1a2a55;
  color: #0093d8;
  font-family: 'PT Sans Narrow', 'Open Sans', 'Ubuntu Condensed', Ubuntu, Arial, sans-serif;
  font-weight: 400;
  line-height: 130%;
}
h1.page-title, .hentry h1 {
  font-size: 2.5em;
}
.hentry h2 {
  font-size: 2em;
}
.hentry h3 {
  font-size: 1.7em;
}
.content-area button, .widget-area button, .content-area html input[type="button"], .widget-area html input[type="button"], .content-area input[type="reset"], .widget-area input[type="reset"], .content-area input[type="submit"], .widget-area input[type="submit"] {
  padding: 10px 20px;
  background: #ad030a;
  color: #fff;
  box-shadow: none;
  border: 0;
}
.content-area button:hover, .widget-area button:hover, .content-area html input[type="button"]:hover, .widget-area html input[type="button"]:hover, .content-area input[type="reset"]:hover, .widget-area input[type="reset"]:hover, .content-area input[type="submit"]:hover, .widget-area input[type="submit"]:hover {
  background: #cf171f;
  box-shadow: none;
}
.content-area button, .content-area html input[type="button"], .content-area input[type="reset"], .content-area input[type="submit"] {
  padding: 20px 40px;
  font-size: 120%;
}
.content-area input[type="text"]:focus, .widget-area input[type="text"]:focus, .content-area input[type="email"]:focus, .widget-area input[type="email"]:focus, .content-area input[type="search"]:focus, .widget-area input[type="search"]:focus, .content-area textarea:focus, .widget-area textarea:focus {
  border-color: #66afe9;
  outline: 0;
  box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.25), 0 0 7px rgba(106, 178, 238, 0.75);
}
.widget-area ul, .widget-area ol {
  margin-left: 0;
  padding-left: 0;
}
.widget-area li {
  list-style-type: none;
  margin-left: 0;
}
.widget-area li a:before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  content: "\f0a4";
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-right: 10px;
  color: #888;
  width: 22px;
}
.widget-area li a:hover:before {
  color: #444;
}
/* Boxes */
.box_c:before, .box_container:before, .box_c:after, .box_container:after {
  content: '';
  display: table;
  table-layout: fixed;
}
.box_c:after, .box_container:after {
  clear: both;
}
/* box_12 - 2 columns */
.box_c .box_12, .box_container .box_12 {
  float: left;
  width: 48%;
  margin-left: 4%;
}
.box_c .box_12:nth-of-type(1), .box_container .box_12:nth-of-type(1) {
  margin-left: 0%;
}
.box_12 {
  /*border: 3px solid #eeeeee;*/
  border: 2px solid #ddd;
  border: 2px solid #494949;
  border: 1px solid #404040;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  box-shadow: 5px 5px 5px #777;
  /*  box-shadow: h-shadow v-shadow blur spread color inset; */
  background: #eee;
  background: #292929;
  background: #494949;
  background: #323a45;
  color: #fff;
  color: #d2d2d2;
  color: #bdc3c7;
  padding: 1.6% 1.6% 1.6% 1.6%;
  font-size: 13px;
  font-size: 1.3rem;
}
.box_12 h1, .box_12 h2, .box_12 h3, .box_12 h4, .box_12 h5, .box_12 h6 {
  color: #fff;
}
.box_12 h2 {
  display: block;
  text-align: center;
  font-size: 24px;
  font-size: 2.4rem;
}
.box_12 h3 {
  font-size: 20px;
  font-size: 2rem;
}
.box_12 a {
  color: #ef202a;
}
.box_12 a:hover {
  color: #f8555c;
  text-decoration: underline;
}
.box_12 .quickLinks {
  display: block;
  text-align: center;
}
.box_12 .line {
  display: block;
  background: #aaa;
  background: #888;
  height: 1px;
  line-height: 1px;
  overflow: hidden;
  width: 30%;
  margin: 0 auto;
}
.box_12 ul {
  margin-left: 0;
}
/* shorten_url styles */
.shorten_url {
  /*
   padding: 10px 10px 10px 10px;
   border: 1px solid #AAAAAA;
   background-color: #EEEEEE;
   */
  padding: 10px 10px;
  border: 1px solid #ccc;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  background-color: #eee;
}
/*
 // different backgrounds for home and inner pages?
 body,
 .site {
 background: #131313;
 color: #4f4f4f;
 }
 .site_home {
 background: #212121 url('/wp-content/themes/natural-stones-3/assets/img/body-back.jpg') repeat center 0;
 color: #a8a8a8;
 padding: 0 0 30px 0;
 }
 .site {
 padding: 30px 0;
 }
 */
.top-level-block-elements1, .site-header .quickContact, .site-header .site-branding, .main-navigation, .site-content .content-area, .site-content .content-area-full-width, .site-content .widget-area, .site-footer, .top-level-block-elements2 {
  padding-left: 1%;
  padding-right: 1%;
}
.site-header .site-branding:before, .main-navigation:before, .site-content .content-area:before, .site-content .content-area-full-width:before, .site-header .site-branding:after, .main-navigation:after, .site-content .content-area:after, .site-content .content-area-full-width:after {
  content: '';
  display: table;
  table-layout: fixed;
}
.site-header .site-branding:after, .main-navigation:after, .site-content .content-area:after, .site-content .content-area-full-width:after {
  clear: both;
}
.site-footer {
  background: #474747;
  background: #232323;
  color: #bbb;
  padding-top: 1em;
  padding-bottom: 4em;
}
.quickContact {
  background: #efefef;
  background: #e1e4ed;
  border-bottom: 1px solid #dde;
  padding-top: 5px;
  padding-bottom: 5px;
}
.quickContact:before, .quickContact:after {
  content: '';
  display: table;
  table-layout: fixed;
}
.quickContact:after {
  clear: both;
}
.quickContact ul {
  margin: 0;
  padding: 0;
}
.quickContact ul li {
  display: inline-block;
  list-style-type: none;
  padding-right: 15px;
  /*
   padding-right: 10px;
   // 2017.02.19 - disable delimiters and leave enough space between items
   border-left: 1px solid #aaa;
   padding-left: 10px;
   &:first-child {
   border-left: 0;
   padding-left: 0;
   }
   */
  transform: translate(0px, -198px);
  -moz-animation-name: dropHeader;
  -moz-animation-iteration-count: 1;
  -moz-animation-timing-function: ease-out;
  -moz-animation-duration: 1.6s;
  -moz-animation-delay: 2s;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-name: dropHeader;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-duration: 1.6s;
  -webkit-animation-delay: 2s;
  -webkit-animation-fill-mode: forwards;
  animation-name: dropHeader;
  animation-iteration-count: 1;
  animation-timing-function: ease-out;
  animation-duration: 1.2s;
  animation-delay: 0s;
  animation-fill-mode: forwards;
}
.quickContact ul li:nth-of-type(2) {
  animation-delay: 0.4s;
  animation-duration: 0.8s;
}
.quickContact ul li:nth-of-type(3) {
  animation-delay: 0.8s;
  animation-duration: 0.8s;
}
.quickContact ul li:nth-of-type(4) {
  animation-delay: 1.2s;
  animation-duration: 0.8s;
}
.quickContact ul li:nth-of-type(5) {
  animation-delay: 1.6s;
  animation-duration: 1.2s;
}
.quickContact ul li a {
  color: #446;
}
.quickContact ul li a:hover {
  color: #ef202a;
}
/*
 // Originally we set the icons within the links, so they change their style on Hover/Active...
 .website-development-email a:before,
 //...but later we removed the links and set ":before" to the class...
 .website-development-email:before,
 */
.website-development-email:before, .website-development-phone:before, .website-development-mobile:before, .website-development-viber:before, .website-development-skype:before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-right: 0.3em;
  color: #2b8cc4;
}
.website-development-email:before {
  content: "\f003";
}
.website-development-phone:before {
  content: "\f095";
}
.website-development-mobile:before {
  content: "\f10b";
  font-size: 125%;
}
.website-development-viber:before {
  content: "\f10b";
  font-size: 125%;
}
.website-development-skype:before {
  content: "\f17e";
  font-size: 115%;
}
a.external:after {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f08e";
  padding-left: 0.3em;
}
@keyframes kenburns {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  95% {
    transform: scale3d(1.3, 1.3, 1.3) translate3d(-190px, -120px, 0px);
    animation-timing-function: ease-in;
    opacity: 1;
  }
  100% {
    transform: scale3d(1.6, 1.6, 1.6) translate3d(-170px, -100px, 0px);
    opacity: 0;
  }
}
.site-branding {
  margin-top: 0.5em;
}
.site-branding .logoWebAgency {
  display: block;
  float: left;
  /*
   -moz-animation-name: dropHeader;
   -moz-animation-iteration-count: 1;
   -moz-animation-timing-function: ease-out;
   -moz-animation-duration: 1.6s;
   -moz-animation-delay: 2s;
   -moz-animation-fill-mode: forwards;
   -webkit-animation-name: dropHeader;
   -webkit-animation-iteration-count: 1;
   -webkit-animation-timing-function: ease-out;
   -webkit-animation-duration: 1.6s;
   -webkit-animation-delay: 2s;
   -webkit-animation-fill-mode: forwards;
   animation-name: dropHeader;
   animation-iteration-count: 1;
   animation-timing-function: ease;
   animation-duration: 1.6s;
   animation-delay: 2s;
   animation-fill-mode: forwards;
   */
}
.site-branding .logoWebAgency img {
  display: block;
  margin: 0 auto;
  padding: 5px 5px 5px 0;
}
.site-branding .logoWebAgency:hover img {
  transform: rotate(-3deg);
  animation: kenburns 20s infinite;
}
.site-branding .logoWebAgency.fixedLogo {
  margin-top: 0;
  position: fixed;
  top: 0px;
  left: 0;
  z-index: 9999;
  left: 1%;
  margin-top: 0px;
  opacity: 0;
  animation: 0.6s ease 1.3s normal forwards 1 running fadeIn;
  width: auto;
  margin-right: 0;
  background: #fff;
}
.site-branding .logoWebAgency.fixedLogo img {
  margin: 0;
  max-height: 41px;
  padding-left: 5px;
}
.site-branding .logoWebAgency.fixedLogo2 {
  opacity: 1;
}
.site-branding .site-title {
  clear: both;
  font-size: 20px;
  font-size: 2rem;
  line-height: 120%;
  /*
   // delay between repeating?? - http://stackoverflow.com/a/17447235/3205524
   -webkit-animation: swing 3s ease;
   animation: swing 3s ease;
   -webkit-animation-iteration-count: infinite;
   animation-iteration-count: infinite; // 1, infinite
   -webkit-animation-delay: 4s;
   animation-delay: 4s; // initial delay
   @include mxMQ($bp-768) {
   //width: 700px;
   //margin: 0 auto;
   //float: left;
   //margin: 0 40px 0 0;
   }
   //http://stackoverflow.com/questions/20052672/pause-animation-on-hover
   &:hover
   {
   -webkit-animation-play-state: paused;
   -moz-animation-play-state: paused;
   //-o-animation-play-state: paused;
   animation-play-state: paused;
   }
   */
}
.site-branding .site-description {
  font-size: 16px;
  font-size: 1.6rem;
}
/*
 .menu-toggle-custom {
 float: right;
 margin-top: 0.5em;
 @include mxMQ($bp-768) {
 display: none;
 //width: 700px;
 //margin: 0 auto;
 //float: right;
 //margin: 0 40px 0 0;
 }
 } //.menu-toggle-custom
 */
.breadcrumbs {
  text-align: justify;
}
.hentry {
  text-align: justify;
}
.hentry .entryImage {
  border: 4px solid #ddd;
}
.hentry .entryImage img {
  display: block;
  max-width: 100%;
  height: auto;
}
.hentry .entryImage:hover, .hentry .entryImage:hover img {
  border-color: #aaa;
}
.hentry .entry-footer .cat-links:after, .hentry .entry-footer .tags-links:after {
  content: "; ";
}
@media all and (min-width: 480px) {
  .entryImage {
    float: left;
    width: 200px;
    margin: 8px 25px 4px 0;
  }
}
@media all and (min-width: 768px) {
}
@media all and (min-width: 992px) {
  .entryImage {
    width: 250px;
  }
}
@media all and (min-width: 1200px) {
  .entryImage {
    width: 300px;
  }
}
.portfolio_projects_1 {
  /*
   &:hover .entryImage { // combined with JS effect...
   max-height: 400px;
   transition: max-height 0.35s ease-in;
   }
   */
  /*
   // Expanding effect Disabled on Hover and instead could be added "quick-view" onClick?
   // edit: we can use it, but we may need to scroll to the top of the image, so 90% height is fully visible!
   .entryImage:hover {
   overflow-y: auto;
   max-height: 700px; // we may need to adjust that based on user's screen size...
   //max-height: 90%; // we may need to adjust that based on user's screen size...
   transition: width 0.15s ease-in, max-height 0.35s ease-in;
   width: 100%; // also adjust the width for even better preview!
   }
   */
  /*
   & .entryImage::before,
   & .entryImage::after {
   //display: none;
   display: block;
   content: " ";
   //min-width: 1000px;
   //min-height: 1000px;
   height: 25px;
   width: 100%;
   position: absolute;
   z-index: 1;
   opacity: 1;
   transition: opacity 0.35s ease-out 1s;
   }
   & .entryImage::before {
   top: 0;
   left: 0;
   background: rgba(0, 0, 0, 0.5);
   //background: rgba(200, 54, 54, 0.4);
   }
   & .entryImage::after {
   bottom: 0;
   left: 0;
   background: rgba(0, 0, 0, 0.5);
   //background: rgba(200, 54, 54, 0.4);
   }
   &:hover .entryImage::before,
   &:hover .entryImage::after {
   //display: none;
   opacity: 0;
   transition: opacity 0.1s ease-in;
   }
   */
  /*
   &:hover .entryImage::before {
   //display: none;
   display: block;
   content: " ";
   min-width: 1000px;
   min-height: 1000px;
   position: absolute;
   z-index: 1;
   top: 0;
   left: 0;
   background: rgba(0, 0, 0, 0.5);
   //background: rgba(200, 54, 54, 0.5);
   }
   &:hover .entryImage::after {
   //display: none;
   display: block;
   content: " ";
   width: 30px;
   height: 30px;
   position: absolute;
   z-index: 2;
   top: 50%;
   left: 50%;
   margin-top: -15px;
   margin-left: -15px;
   background: #f00;
   }
   &:hover .entryImage:hover::before,
   &:hover .entryImage:hover::after {
   display: none;
   }
   */
}
.portfolio_projects_1 .entryImage {
  position: relative;
  width: 66%;
  min-height: 250px;
  max-height: 250px;
  overflow: hidden;
  transition: width 0.05s ease-out, max-height 0.15s ease-out;
}
.portfolio_projects_1 .entryImage::before {
  display: block;
  content: " ";
  left: 50%;
  top: 50%;
  height: 50px;
  width: 50px;
  margin-top: -25px;
  margin-left: -25px;
  position: absolute;
  z-index: 1;
  border: 4px solid #fff;
  background: rgba(0, 0, 0, 0.5);
  opacity: 1;
  transition: opacity 0.35s ease-out 1s;
}
.portfolio_projects_1:hover .entryImage::before {
  opacity: 0;
  transition: opacity 0.1s ease-in;
}
.widget-area input[type="search"] {
  max-width: 100%;
}
.comments-area input[type="text"], .comments-area input[type="email"], .comments-area input[type="url"], .comments-area input[type="password"], .comments-area input[type="search"], .comments-area input[type="number"], .comments-area input[type="tel"], .comments-area input[type="range"], .comments-area input[type="date"], .comments-area input[type="month"], .comments-area input[type="week"], .comments-area input[type="time"], .comments-area input[type="datetime"], .comments-area input[type="datetime-local"], .comments-area input[type="color"], .comments-area textarea {
  max-width: 100%;
}
.site-footer a {
  color: #ef202a;
}
.site-footer a:hover {
  color: #f8555c;
}
h1.entry-title, h1.page-title {
  margin-top: 0;
}
.brdcr_navxt {
  padding: 0 0 20px 0;
}
.home .breadcrumbs {
  display: none;
}
.cat-links, .tags-links {
  font-size: 14px;
  font-size: 1.4rem;
}
.widgetLatestPosts ul {
  margin: 0;
  padding: 0;
}
.widgetLatestPosts li {
  list-style-type: none;
  margin: 0;
  padding: 10px 0 12px 0;
  border-top: 1px solid #ccc;
}
.widgetLatestPosts li:nth-child(1) {
  border-top: 0;
  padding-top: 0;
}
.widgetLatestPosts li:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}
.widgetLatestPosts li a::before {
  display: none;
}
.widgetLatestPosts li .item .itemImage {
  border: 2px solid #ddd;
}
.widgetLatestPosts li .item .itemImage:hover {
  border: 2px solid #aaa;
}
.widgetLatestPosts li .item .itemImage img {
  display: block;
  width: 100%;
  height: auto;
}
.widgetLatestPosts li .item .itemText {
  line-height: 120%;
}
.widgetLatestPosts li .item .itemText h4 {
  margin: 0;
  font-size: 14px;
  font-size: 1.4rem;
  font-weight: normal;
}
.widgetLatestPosts li .item .itemText .itemDate {
  display: block;
  font-size: 13px;
  font-size: 1.3rem;
  color: #777;
}
@media all and (min-width: 320px) {
  .widgetLatestPosts li {
    padding: 10px 0 13px 0;
  }
  .widgetLatestPosts li .item:before, .widgetLatestPosts li .item:after {
    content: '';
    display: table;
    table-layout: fixed;
  }
  .widgetLatestPosts li .item:after {
    clear: both;
  }
  .widgetLatestPosts li .item .itemImage {
    float: left;
    width: 22.6993865031%;
    margin-top: 5px;
  }
  .widgetLatestPosts li .item .itemTextWithImage {
    float: left;
    width: 74.2331288344%;
    margin-left: 3.0674846626%;
  }
}
@media all and (min-width: 480px) {
}
@media all and (min-width: 768px) {
}
/*
 @include mxMQ($bp-768) {
 // Latest Post Widget
 .widgetLatestPosts li .item .itemImage {
 float: none;
 width: 100%;
 margin: 0;
 }
 }
 @include mxMQ($bp-992) {
 // Latest Post Widget
 .widgetLatestPosts li .item .itemImage {
 float: left;
 width: 30%; // fluid width
 margin: 5px 12px 0 0;
 }
 }
 */
.widgetWebDesignSeoProjects ul {
  margin: 0;
  padding: 0;
}
.widgetWebDesignSeoProjects li {
  list-style-type: none;
  margin: 0;
  /*
   //padding: 10px 0 12px 0;
   border-top: 1px solid #ccc;
   */
  padding: 15px 0 17px 0;
}
/*
 .widgetWebDesignSeoProjects li:nth-child(1) {
 border-top: 0; // reset - remove separator for first item
 padding-top: 0; // reset - remove offset-top for first item
 }
 .widgetWebDesignSeoProjects li:last-child {
 margin-bottom: 0;
 padding-bottom: 0;
 }
 */
.widgetWebDesignSeoProjects li a::before {
  display: none;
}
.widgetWebDesignSeoProjects li .item .itemImage {
  border: 2px solid #ddd;
}
.widgetWebDesignSeoProjects li .item .itemImage:hover {
  border: 2px solid #aaa;
}
.widgetWebDesignSeoProjects li .item .itemImage img {
  display: block;
  width: 100%;
  height: auto;
}
.widgetWebDesignSeoProjects li .item .itemText {
  line-height: 120%;
}
.widgetWebDesignSeoProjects li .item .itemText h3 {
  margin: 0;
  font-size: 14px;
  font-size: 1.4rem;
  font-weight: normal;
}
.widgetWebDesignSeoProjects li .item .itemText .itemDate {
  display: block;
  font-size: 13px;
  font-size: 1.3rem;
  color: #777;
}
@media all and (min-width: 320px) {
}
@media all and (min-width: 480px) {
  .widgetWebDesignSeoProjects:before, .widgetWebDesignSeoProjects:after {
    content: '';
    display: table;
    table-layout: fixed;
  }
  .widgetWebDesignSeoProjects:after {
    clear: both;
  }
  .widgetWebDesignSeoProjects li {
    float: left;
    width: 48.4662576687%;
    margin-left: 3.0674846626%;
  }
  .widgetWebDesignSeoProjects li:nth-child(1) {
    margin-left: 0;
  }
}
@media all and (min-width: 768px) {
  .widgetWebDesignSeoProjects li {
    float: left;
    width: 31.2883435583%;
  }
}
@media all and (min-width: 992px) {
}
@media all and (min-width: 1200px) {
  .widgetWebDesignSeoProjects li {
    float: left;
    width: 22.6993865031%;
  }
}
/*
 @include mxMQ($bp-768) {
 // Widget Web Design and SEO Projects
 .widgetWebDesignSeoProjects li .item .itemImage {
 float: none;
 width: 100%;
 margin: 0;
 }
 }
 @include mxMQ($bp-992) {
 // Widget Web Design and SEO Projects
 .widgetWebDesignSeoProjects li .item .itemImage {
 float: left;
 width: 30%; // fluid width
 margin: 5px 12px 0 0;
 }
 }
 */
@media all and (min-width: 768px) {
  .inCaseWeNeedThis {
    width: 740px;
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
  }
  .site-content .content-area, .site-content .content-area-full-width, .site-content .widget-area {
    margin-top: 2em;
  }
  .site-content .content-area {
    float: left;
    float: left;
    width: 65.6441717791%;
    padding-right: 0;
  }
  .site-content .widget-area {
    float: right;
    float: left;
    width: 31.2883435583%;
    margin-left: 3.0674846626%;
    padding-left: 0;
  }
}
@media all and (min-width: 992px) {
  /*
   .site-header,
   .site-content,
   .site-content-footer,
   .slider-area,
   .site-footer {
   width: 960px;
   }
   */
  .logoWebAgency {
    float: left;
    float: left;
    width: 31.2883435583%;
    max-width: 600px;
    margin: 0;
    margin: 0 0 0 0;
  }
  .site-branding .site-title {
    clear: none;
  }
  .site-branding .site-title, .site-branding .site-description {
    float: left;
    float: left;
    width: 65.6441717791%;
    margin-left: 3.0674846626%;
  }
}
@media all and (min-width: 1200px) {
  /*
   .site-header,
   .site-content,
   .site-content-footer,
   .slider-area,
   .site-footer {
   width: 1170px;
   }
   */
  .top-level-block-elements1, .site-header .quickContact, .site-header .site-branding, .main-navigation, .site-content .content-area, .site-content .content-area-full-width, .site-content .widget-area, .site-footer, .top-level-block-elements2 {
    padding-left: 3%;
    padding-right: 3%;
  }
  .site-content .content-area {
    padding-right: 0;
  }
  .site-content .widget-area {
    padding-left: 0;
  }
  .site-branding .site-title {
    font-size: 24px;
    font-size: 2.4rem;
  }
}
@media all and (min-width: 1600px) {
  /*
   .site-header,
   .site-content,
   .site-content-footer,
   .slider-area,
   .site-footer {
   width: 1470px;
   }
   */
  /*
   // Content
   .site-content {
   .content-area { // #primary
   width: 74.88%;
   margin-left: 1.53%;
   float: right;
   }
   .widget-area { // #secondary
   float: left;
   width: 23.59%;
   }
   }
   */
  .site-branding .site-title {
    font-size: 28px;
    font-size: 2.8rem;
  }
}
#toc_container {
  display: none;
}
@media all and (min-width: 992px) {
  #toc_container {
    display: block;
    position: fixed;
    bottom: 3%;
    right: 3%;
    opacity: 1;
    width: 25%;
    -webkit-box-shadow: 6px 6px 5px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 6px 6px 5px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 6px 6px 5px 0px rgba(0, 0, 0, 0.75);
    border-width: 2px;
  }
  #toc_container.contracted {
    animation-name: blinkBackground;
    animation-duration: 1400ms;
    animation-iteration-count: 2;
    animation-timing-function: linear;
    animation-delay: 600ms;
  }
  #toc_container .toc_list .toc_number:after {
    content: ".";
  }
}
/* =Navigation - pagination
 -------------------------------------------------------------- */
.paginationTop {
  margin-bottom: 20px;
}
.paginationBottom {
  margin-top: 25px;
}
.pagination .screen-reader-text {
  display: none;
}
.pagination .nav-links .page-numbers {
  display: inline-block;
  margin: 1px 5px 1px 0;
  padding: 4px 10px;
  background: #607625;
  color: #fff;
}
.pagination .nav-links a.page-numbers:hover {
  background: #555;
  color: #fff;
}
.pagination .nav-links .current {
  background: #bd3829;
  font-weight: bold;
}
@keyframes flash {
  0%, 50%, 100% {
    opacity: 1;
  }
  20%, 30%, 70%, 80% {
    opacity: 0;
  }
}
@keyframes blinkBackground {
  0%, 25% {
    background-color: #f9f9f9;
  }
  45%, 55% {
    background-color: #ddd;
  }
  75%, 100% {
    background-color: #f9f9f9;
  }
}
.macbookBack .macbook .macbookShape {
  display: block;
  background-color: #082746;
  background-image: linear-gradient(70deg, transparent 67%, rgba(255, 255, 255, .05) 67%, rgba(255, 255, 255, .025)), linear-gradient(#ddd 11px, transparent 11px), linear-gradient(#132d4e, #4f7d90);
  border-radius: 8px 8px 0 0;
  box-shadow: inset 0 1px 1px 1px #000, inset 0 0 0 9px #111, 0 0 0 1px #ccc, 0 0 1px 2px rgba(0, 0, 0, .4), 0 0 50px rgba(0, 0, 0, .3), 0 0 100px rgba(0, 0, 0, .5), 0 0 200px rgba(0, 0, 0, .5);
  width: 150px;
  height: 100px;
  margin: -50px -75px;
  position: relative;
  top: 50%;
  left: 50%;
}
.macbookBack .macbook .macbookShape:before {
  background-color: #222;
  border-radius: 100%;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .1), -13px 96px 0 -1px #888, -13px 97px 0 -1px #888, -11px 97px 0 #888, -9px 97px 0 #888, -7px 97px 0 #888, -5px 97px 0 #888, -3px 97px 0 #888, -1px 97px 0 #888, 1px 97px 0 #888, 3px 97px 0 #888, 5px 97px 0 #888, 7px 97px 0 #888, 9px 97px 0 #888, 11px 97px 0 #888, 13px 97px 0 -1px #888, 13px 96px 0 -1px #888, 80px 99px 0 -1px #666, 81px 99px 0 -1px #666, 82px 99px 0 -1px #666, 83px 99px 0 -1px #666, 84px 99px 0 -1px #666, 85px 99px 0 -1px #666;
  content: '';
  height: 3px;
  left: 50%;
  margin-left: -2px;
  position: absolute;
  top: 3px;
  width: 3px;
  z-index: 1;
}
.macbookBack .macbook .macbookShape:after {
  background-color: #ddd;
  background-image: linear-gradient(left, rgba(0, 0, 0, .3), rgba(255, 255, 255, .4) 2%, rgba(255, 255, 255, .1) 5%, rgba(0, 0, 0, .2) 95%, rgba(255, 255, 255, .2) 98%, rgba(0, 0, 0, .4));
  border-bottom: 3px solid rgba(102, 102, 102, .75);
  border-radius: 0 0 4px 4px;
  box-shadow: 0 3px 7px rgba(0, 0, 0, .1);
  content: '';
  height: 7px;
  left: -22px;
  position: absolute;
  right: -22px;
  top: 100%;
}
/*
 .widget-area {
 ul {
 list-style: none;
 margin: 0;
 }
 // overwrite widget margin bottom!
 .widget {
 margin-bottom: 0;
 margin-top: 1.5em;
 &:first-child {
 margin-top: 0;
 }
 }
 .widget .widget-title {
 font-weight: bold;
 padding: 1px 0px 10px 14px;
 text-transform: uppercase;
 @include mxFontSize(18);
 color: #fff;
 }
 //menu selector could be any widget - .widget_nav_menu
 .widget_nav_menu,
 .widget {
 ul.menu {
 li {
 margin-top: 5px;
 a {
 display: block;
 background: #484848;
 background: #4c6c11; // alternative 1
 background: #477b19; // alternative 2 // 4a7b1f
 padding: 12px 14px;
 color: #fff;
 @include mxFontSize(13);
 text-transform: uppercase;
 @include mxLinksTransition();
 font-weight: bold;
 }
 a:hover {
 //background: #fff;
 //color: #2c2c2c;
 background: #73A319;
 background: #6e9f13;
 //background: #68a334; // 4b811c, 477b19, 5a9228, 68a334
 background: #5fa323; // 5fa323
 //color: #fff;
 }
 // 2nd+ levels:
 ul {
 display: none;
 li {
 //border-top: 1px solid #626262;
 padding: 2px 0 2px 20px;
 a {
 display: inline; // reset
 background: none; // reset
 padding: 0; // reset
 color: #929292; // 626262
 @include mxFontSize(14);
 text-transform: none; // reset
 font-weight: normal; // reset
 }
 a:hover {
 background: none; // reset
 color: #a2a2a2; // reset
 }
 }
 li:first-child {
 border-top: 0;
 }
 }
 }
 li.current-menu-item,
 li.current-menu-ancestor,
 li.current-menu-parent {
 a,
 a:hover {
 background: #fff;
 color: #2c2c2c;
 }
 // 2nd+ levels:
 // remember to reset the values above if necessary
 // Show next level (only, but still disable the children levels)
 ul {
 display: block;
 // hide deeper levels (it seems equal to adding & > ul to the above):
 ul {
 display: none;
 }
 }
 }
 li.menu-item-has-children {
 & > a:after {
 content: " »"; // add plus sign to show there are children items // or add additional element  <span class="toggle-children">+</span> to toggle the children items
 }
 }
 li.current-menu-item,
 li.current-menu-ancestor,
 li.current-menu-parent,
 li.menu-item-has-children {
 // 2nd+ levels:
 ul {
 li {
 a,
 a:hover {
 background: none; // reset
 color: #929292; // 626262 // reset
 }
 a:hover {
 color: #b9b9b9;
 }
 a:before {
 content: '- ';
 }
 }
 li.current-menu-item {
 a,
 a:hover {
 background: none; // reset
 color: #929292; // 626262 // reset
 }
 a,
 a:hover {
 color: #b9b9b9;
 }
 }
 }
 }
 }
 }
 }
 // add spinner indicator instead of "Loading..." text or both?
 .mfp-preloader {
 background-repeat: no-repeat;
 background-image: url('data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==');
 background-position: center center;
 padding: 45px 0 0 0;
 }
 */
/*
 // add spinner indicator instead of "Loading..." text or both? - http://codepen.io/dimsemenov/pen/aKwxt, http://codepen.io/dimsemenov/pen/HdjtL
 .mfp-preloader {
 width: 30px;
 height: 30px;
 background-color: #FFF;
 opacity: 0.65;
 margin: 0 auto;
 -webkit-animation: rotateplane 1.2s infinite ease-in-out;
 animation: rotateplane 1.2s infinite ease-in-out;
 }
 @-webkit-keyframes rotateplane {
 0% { -webkit-transform: perspective(120px) }
 50% { -webkit-transform: perspective(120px) rotateY(180deg) }
 100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
 }
 @keyframes rotateplane {
 0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg) }
 50% { transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) }
 100% { transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg) }
 }
 */