/*
	Theme Name: Webtutorium
	Theme URI: http://www.alsterpixel.de
	Description: A Child Theme for the Gensis Framework, by Studiopress.
	Author: Enrico Lauterschlag
	Author URI: http://www.studiopress.com/
	Version: 0.1
	Tags: the child of genesis

	Template: genesis
*/

/* # Table of Contents
- Legal Notice
- Load fonts
- Defaults
	- Typographical Elements
	- Headings
	- Objects
	- Forms
	- Tables
	- Misc
- Structure and Layout
	- Site Containers
	- Column Widths and Positions
- Common Classes
	- Author box
	- Avatar
	- Genesis
	- Search Form
	- Titles
	- WordPress
- Widgets
	- Tag Clouds
- Skip Links
- Site Header
	- Title Area
	- Widget Area
- Site Navigation
	- Accessible Menu
	- Site Header Navigation
	- Primary and Secondary Navigation
- Content Area
	- Entries
	- Entry Meta
	- Table of Contents
	- Pagination
	- Comments
- Sidebars
- Site Footer
- Media Queries
	- Max-width: 1280px
	- Max-width: 1023px
	- Max-width: 880px
- Print Styles
- Includes
	- Back to Top Button
	- Featured Content
	- Archive Description
- Custom Sidebar
- Custom Styles
*/

/* ==========================================================================
   Legal notice
   ========================================================================== */

/*
 * This CSS file contains excerpts or all instructions from the normalize.css
 * by Nicolas Gallagher and Jonathan Neal and the style.css from the HTML5 boilerplate.
 * Both are licensed under the MIT license and the corresponding copyright and permission
 * notices now follows.
 */

/*! Copyright (c) HTML5 Boilerplate */
/*! Copyright (c) Nicolas Gallagher and Jonathan Neal */

/*
 * Permission is hereby granted, free of charge, to any person obtaining a copy of
 * this software and associated documentation files (the "Software"), to deal in
 * the Software without restriction, including without limitation the rights to
 * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
 * of the Software, and to permit persons to whom the Software is furnished to do
 * so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 */

/* ==========================================================================
   Load fonts
   ========================================================================== */

/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v20-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
      url('../fonts/roboto-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('../fonts/roboto-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
      url('../fonts/roboto-v20-latin-regular.woff') format('woff'), /* Modern Browsers */
      url('../fonts/roboto-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
      url('../fonts/roboto-v20-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
  font-display: swap;
}

/* roboto-italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/roboto-v20-latin-italic.eot'); /* IE9 Compat Modes */
  src: local(''),
      url('../fonts/roboto-v20-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('../fonts/roboto-v20-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
      url('../fonts/roboto-v20-latin-italic.woff') format('woff'), /* Modern Browsers */
      url('../fonts/roboto-v20-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
      url('../fonts/roboto-v20-latin-italic.svg#Roboto') format('svg'); /* Legacy iOS */
  font-display: swap;
}

/* roboto-700 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/roboto-v20-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
      url('../fonts/roboto-v20-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('../fonts/roboto-v20-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
      url('../fonts/roboto-v20-latin-700.woff') format('woff'), /* Modern Browsers */
      url('../fonts/roboto-v20-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
      url('../fonts/roboto-v20-latin-700.svg#Roboto') format('svg'); /* Legacy iOS */
  font-display: swap;
}

/* icon font created with fontello and icons from iconmonstr */
@font-face {
  font-family: 'frontend-icons';
  font-weight: normal;
  font-style: normal;
  src: url('../fonts/frontend-icons.eot');
  src: local(''),
       url('../fonts/frontend-icons.eot?#iefix') format('embedded-opentype'),
       url('../fonts/frontend-icons.woff2') format('woff2'),
       url('../fonts/frontend-icons.woff') format('woff'),
       url('../fonts/frontend-icons.ttf') format('truetype'),
       url('../fonts/frontend-icons.svg?#frontend-icons') format('svg');
}

/* ==========================================================================
   Defaults
   ========================================================================== */

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
   background: #b3d4fc;
   text-shadow: none;
}

::selection {
   background: #b3d4fc;
   text-shadow: none;
}

/* ## Typographical Elements
--------------------------------------------- */

html {
    color: #fff;
    font-size: 1.2em;
    font-family: 'Roboto', sans-serif;
    line-height: 1.6;
    text-align: left;
    -webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS. */
}

body {
	background: #555 url(../img/layout/lines-diagonal.png);
  margin: 0; /* Remove the margin in all browsers. */
}

body.modal-open {
  overflow: hidden;
}

a {
	color:#ff6f00;
  background-color: transparent; /* Remove the gray background on active links in IE 10. */
}

a:hover {
	text-decoration: none;
}

p {
  margin: 0 0 24px;
}

/*
 * A better looking default horizontal rule
 */

hr {
  box-sizing: content-box; /* Add the correct box sizing in Firefox. */
  overflow: visible; /* Show the overflow in Edge and IE. */
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

pre {
  font-family: monospace, monospace; /* Correct the inheritance and scaling of font size in all browsers. */
  font-size: 1em; /* Correct the odd `em` font sizing in all browsers. */
}

abbr[title] {
  border-bottom: none; /* Remove the bottom border in Chrome 57- */
  text-decoration: underline; /* Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */
  text-decoration: underline dotted; /* Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp {
  font-family: monospace, monospace; /* Correct the inheritance and scaling of font size in all browsers. */
  font-size: 1em; /* Correct the odd `em` font sizing in all browsers. */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* ## Headings
--------------------------------------------- */

h1,
h2,
h3,
h4 {
  text-align: left;
	color: #444;
  line-height: 1.1;
	font-weight: 700;
  margin: 40px 0;
}

h1 {
  font-size: 2em;
  text-align: center;
  margin-top: 0;
}

h2 {
  font-size: 1.8em;
}

h3,
h4 {
  margin: 0 0 24px;
}

h3 {
  font-size: 1.4em;
}

h4 {
  font-size: 1.2em;
}

/* ## Objects
--------------------------------------------- */

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

figure {
  margin: 0 0 24px;
}

figure img {
	width: 100%;
  height: 100%;
}

figure figcaption {
  padding: 10px;
  font-style: italic;
  font-size: 0.8em;
  text-align: center;
  border-right: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

.right,
.left {
  max-width: 300px;
}

.right {
	float: right;
	margin: 24px 0 24px 24px;
}

.left {
  float: left;
  margin: 24px 24px 24px 0;
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* ## Forms
--------------------------------------------- */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
  resize: vertical; /* Allow only vertical resizing of textareas */
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* ## Tables
--------------------------------------------- */

table {
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
  margin: 0 0 24px;
}

tbody {
	border-bottom: 1px solid #ccc;
}

td,
th {
	text-align: left;
	border: 1px solid #ccc;
	padding: 4px 8px;
}

th {
	background-color: #333;
	color: #fff;
}

tr:nth-child(even) {
	background-color: #f5f5f5;
}

/* ## Misc
--------------------------------------------- */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/* ==========================================================================
   Structure and Layout
   ========================================================================== */

.site-inner {
	background-color: #333;
	width: 1280px;
	margin: 0 auto;
}

.sidebar-content-wrap {
  display: grid;
  grid-template-areas:
    "header content"
    "header footer";
  grid-template-columns: 300px auto;
}

.site-header {
  width: 300px;
  background: #333;
  box-sizing: border-box;
  grid-area: header;
}

.title-area {
  padding: 40px;
}

.title-area img {
  display: block;
  margin: 0 auto;
}

.site-title{
	font-size: 1.8em;
	font-weight: 700;
	margin: 20px 0 7px;
	color: #ff6f00;
}

.site-title a{
	text-decoration: none;
  display: block;
  text-align: center;
}

.site-title a:hover {
  color: #fff;
}

.site-description {
	font-size: 0.9em;
	font-weight: normal;
	color: #fff;
	margin: 0;
  text-align: center;
}

.site-navigation {
  border-top: 1px solid #555;
  border-bottom: 1px solid #555;
}

.site-content {
  background-color: #fff;
  color: #444;
  width: 980px;
  padding: 40px 80px;
  display: block; /* Render the `main` element consistently in IE. */
  box-sizing: border-box;
  grid-area: content;
}

.entry-header {
  margin: -40px -80px 40px;
}

.entry-footer p {
  margin-bottom: 0;
}

.entry-footer .entry-author-link,
.entry-footer .entry-author-time {
  margin-left: 5px;
}

.site-footer {
	padding: 40px 80px;
	font-size: 0.8em;
	border-top: 1px solid #ccc;
  grid-area: footer;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

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

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

.site-footer a{
	font-weight:bold;
}

.site-footer p {
  margin:0;
}

/* ==========================================================================
   Common Classes
   ========================================================================== */

/* ## Frontend Icon Font
--------------------------------------------- */

[class^="icon-"]:before, [class*=" icon-"]:before {
 font-family: "frontend-icons";
 font-style: normal;
 font-weight: normal;
 display: inline-block;
 text-decoration: inherit;
 width: 1em;
 margin-right: .2em;
 text-align: center;
 /* For safety - reset parent styles, that can break glyph codes*/
 font-variant: normal;
 text-transform: none;
 /* fix buttons height, for twitter bootstrap */
 line-height: 1em;
 /* Animation center compensation - margins should be symmetric */
 /* remove if not needed */
 margin-left: .2em;
 /* Font smoothing. That was taken from TWBS */
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

.icon-twitter:before { content: '\e800'; }
.icon-user:before { content: '\e801'; }
.icon-video-camera:before { content: '\e802'; }
.icon-xing:before { content: '\e803'; }
.icon-youtube-play-button:before { content: '\e804'; }
.icon-instagram:before { content: '\e805'; }
.icon-usergroup:before { content: '\e806'; }
.icon-phone:before { content: '\e807'; }
.icon-location-marker:before { content: '\e808'; }
.icon-arrow-right:before { content: '\e809'; }
.icon-x-mark:before { content: '\e80a'; }
.icon-menu:before { content: '\e80b'; }
.icon-home:before { content: '\e80c'; }
.icon-whatsapp:before { content: '\e80d'; }
.icon-globe:before { content: '\e80e'; }
.icon-preferences:before { content: '\e80f'; }
.icon-calendar:before { content: '\e810'; }
.icon-heart:before { content: '\e811'; }
.icon-plus:before { content: '\e812'; }
.icon-star:before { content: '\e813'; }
.icon-education:before { content: '\e814'; }
.icon-arrow-left:before { content: '\e815'; }
.icon-power-on-off:before { content: '\e816'; }
.icon-book:before { content: '\e817'; }
.icon-checkmark:before { content: '\e818'; }
.icon-cookie:before { content: '\e819'; }
.icon-dislike:before { content: '\e81a'; }
.icon-eye:before { content: '\e81b'; }
.icon-facebook:before { content: '\e81c'; }
.icon-like:before { content: '\e81d'; }
.icon-linkedin:before { content: '\e81e'; }
.icon-mail:before { content: '\e81f'; }
.icon-modified-time:before { content: '\e820'; }
.icon-rss:before { content: '\e821'; }
.icon-search:before { content: '\e822'; }
.icon-shield:before { content: '\e823'; }
.icon-speech-bubble:before { content: '\e824'; }

/* ==========================================================================
   Notification Box
   ========================================================================== */

.notification-box{
	border:1px solid #ccc;
	margin: 40px 0;
	position:relative;
}

.notification-box .notification-box-title{
	color:#fff;
	padding:3px 20px;
  margin-bottom:0px;
  font-size:inherit;
  line-height:inherit;
  font-weight:700;
  display: inline-block;
}

.notification-box.info .notification-box-title {
    background-color: #333;
}

.notification-box.warning .notification-box-title {
    background-color: #cc0000;
}

.notification-box .notification-box-content {
  padding:24px 40px 40px;
  margin-bottom:0px;
}

.notification-box .notification-box-content p:last-of-type {
  margin-bottom:0px;
}

.notification-box .button {
  margin-bottom:0px;
}

/* ==========================================================================
   Vertical Menu
   ========================================================================== */

.vsmenu{
	list-style: none;
	margin:0;
	padding:0;
  font-size: 0.8em;
}

.vsmenu > li{
	padding: 0px;
	position: relative;
  border-bottom:1px solid #555;
}

.vsmenu > li:last-of-type{
  border-bottom:none;
}

.vsmenu > li > ul{
	list-style: none;
	padding-left: 0px;
	margin:0;
  display:none;
}
.vsmenu > li > ul > li > ul{
	list-style: none;
	padding-left: 0px;
	margin:0;
}
.vsmenu > li > ul > li{
	margin-top:0px;
	position: relative;
	line-height: 35px;
  background-color:#3d464d;
}
.vsmenu > li > a{
	text-decoration: none;
	color:#fff;
	padding: 10px 40px;
	display: block;
}

.vsmenu > li > a:hover,
.vsmenu li > a.active {
	background-color: #4E5962;
}

.vsmenu > li > ul > li > a{
	color:#fff;
	text-decoration: none;
	display: block;
	padding-left: 60px;
}

.vsmenu > li > ul > li > a:hover,
.vsmenu > li > ul > li > a.active {
	background-color: #5F6D78;
}

.vsmenu > li > ul > li > ul > li > a{
	color:#fff;
	text-decoration: none;
	display: block;
	padding-left: 80px;
}

.caret {
	position: absolute;
  display: inline-block;
  width: 0px;
  height: 0px;
  vertical-align: top;
  border-top: 4px solid #fff;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  content: "";
  right:40px;
  top:17px;
}

/* ==========================================================================
   Widgets
   ========================================================================== */

.widget{
	font-size:0.8em;
	padding:40px;
	border-bottom:1px solid #555;
}

.widget.eyecatcher {
  background: #ff6f00 url(../img/layout/lines-vertical.png);
}

.widget.ueber img {
  margin:-40px -40px 40px;
  width:300px;
}

.widget h2 {
	margin:0 0 24px;
  font-size:1.4em;
  font-weight: 700;
	color:#fff;
}

.widget p:last-of-type{
  margin-bottom:0;
}

.widget a {
	color:#fff;
	text-decoration:none;
}

.widget a:hover {
	text-decoration:underline;
}

.widget ul{
	padding-left:20px;
  margin-bottom:0;
}

.widget .button {
  margin-bottom:0;
}

.call-to-action{
	color:#fff;
	font-weight:bold;
	background-color:#ff6f00;
	padding:20px 80px;
}

.button {
	background-color: #ffc22c;
	box-shadow: none;
	color: #000 !important;
	cursor: pointer;
	padding: 12px 24px;
	margin: 20px 0 20px 0;
	display:block;
	text-align:center;
	text-decoration:none;
}

.button:hover,
.button-close.button:hover {
	background-color: #ffad01;
	text-decoration:none !important;
}

.button-close {
  border-style: none;
  background: none;
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1;
}

.button-close line {
    stroke: #444;
    stroke-width: 2px !important;
}

.button-close.button {
  position: relative;
  top:auto;
  right:auto;
  background-color: #ffc22c;
  font-family: 'Roboto', sans-serif;
}

.button-close:hover,
.button-close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.iframe{
	width:640px;
	height:360px;
}

/* ==========================================================================
   Author box modal
   ========================================================================== */

.author-modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.6); /* Black w/ opacity */
}

.author-modal-content {
  background-color: #fefefe;
  width: 60%;
  max-width: 860px;
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}

.author-modal .wrap {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-areas:
    "author-image author-text"
    "author-image author-button";
}

.author-modal-image {
  grid-area: author-image;
}

.author-modal-image img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

.author-modal-text {
  padding:20px;
  position: relative;
  grid-area: author-text;
}

.author-modal .button {
  margin: 0;
  width: 100%;
  grid-area: author-button;
}

/* ==========================================================================
   Product-Tile
   ========================================================================== */

.product-list {
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap:20px;
}

.product-container {
  border:1px solid #ccc;
  margin:40px 0;
  position: relative;
}

.product-list .product-container {
  margin:0;
}

.product-container .product-content-image-wrap {
  display:grid;
  grid-template-columns: 1fr 3fr;
  padding:40px;
}

.product-list .product-container .product-content-image-wrap {
  grid-template-columns: 1fr;
  padding:20px;
}

.product-container .product-image {
  text-align: center;
}

.product-container .product-image img {
  width: 100%;
  max-height: 205px;
  object-fit: contain;
}

.product-container .product-content {
  padding-left:20px;
}

.product-list .product-container .product-content {
  padding-left:0;
  margin:20px 0 40px;
}

.product-container .product-title {
  font-size:1.2em;
  line-height:1.1;
	font-weight: 700;
}

.product-list .product-container .product-title {
  font-size:1em;
}

.product-container .product-price {
  color:#990000;
}

.product-container .product-price-notice {
  font-size: 0.8em;
  font-weight:normal;
  font-style:italic;
  display:block;
}

.product-container .button {
  margin:0;
}

.product-list .button {
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  box-sizing: border-box;
  margin-top:24px;
}

.amazon-legal-notice {
  font-size: 0.8em;
  font-style: italic;
  margin:-16px 0 24px;
}

.amazon-legal-notice.list {
  margin-top:20px;
}

/* ==========================================================================
   Advertising
   ========================================================================== */

.adsense-display,
.adsense-inline {
  margin:40px 0 0;
}

.adsense-display {
  max-height:90px !important;
}

.entry-content .adsense-display {
  margin: 0 0 40px !important;
}

.adsense-inline {
  margin-bottom:40px;
}

/* ==========================================================================
   Youtube Video List
   ========================================================================== */

.youtube-video-list{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap:5px;
  margin:40px 0;
}

.youtube-video {
  position:relative;
}

.youtube-video.first{
  grid-column: 1 / -1;
}

.youtube-video-thumbnail{
  width:100%;
  height:100%;
  object-fit: cover;
}

.youtube-video-content {
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  display: grid;
  grid-template-rows: max-content auto max-content;
}

.youtube-video-title {
  font-size:0.9em;
  overflow:hidden;
  font-weight:normal;
  text-shadow: 1px 1px #000;
  padding:10px;
  margin:0;
}

.youtube-video-title a {
  text-decoration:none;
  color:#fff;
}

.youtube-click-area {
  position: relative;
  cursor:pointer;
}

.youtube-video-play-button {
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  font-size: 48px;
  color: #000;
  opacity: 0.8;
}

.youtube-click-area:hover .youtube-video-play-button {
  color: #ff0000;
}

.youtube-video.first .youtube-video-play-button{
  font-size: 64px;
}

.youtube-video-attribution {
  font-size:0.8em;
  font-style: italic;
  padding:10px;
  background: rgba(0,0,0,.6);
  margin-bottom:0;
  color:#fff;
  width:100%;
  box-sizing: border-box;
}

.youtube-video-attribution a {
  color:#fff;
}

.youtube-video-legal {
  position:absolute;
  top:0;
  left:0;
  color:#fff;
  width:100%;
  height:100%;
  background: rgba(0,0,0,.8);
  display:none;
}

.youtube-video-legal-text {
  margin-bottom:0;
  width:100%;
  padding:30px 40px;
  box-sizing: border-box;
  text-align: center;
  z-index:1;
  font-size: 0.8em;
}

.youtube-video.first .youtube-video-legal-text {
  font-size: 1em;
  padding: 80px;
}

.youtube-video-buttons {
  margin: 0 auto;
  position:absolute;
  bottom:0;
  font-size: 0.8em;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
}

.youtube-video.first .youtube-video-buttons {
  font-size: 1em;
}

.youtube-video-buttons .button {
  display: inline-block;
  margin: 0;
  border-right: 1px solid #fff;
  grid-column: auto;
}

.youtube-video .button-close line {
    stroke: #fff;
}

.youtube-video iframe {
  width:100%;
  display:none;
  border:0;
}

/* ==========================================================================
   Klaro Cookie Consent
   ========================================================================== */

.klaro {
  font-size:0.8em;
}

.klaro.cm-as-context-notice {
  height: 100%;
}

.klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider,
.klaro .context-notice .cm-list-input:checked + .cm-list-label .slider,
.klaro .cookie-notice .cm-list-input:checked + .cm-list-label .slider {
 background-color: #1a936f;
}

.klaro .cookie-modal .cm-list-input.half-checked:checked + .cm-list-label .slider,
.klaro .context-notice .cm-list-input.half-checked:checked + .cm-list-label .slider,
.klaro .cookie-notice .cm-list-input.half-checked:checked + .cm-list-label .slider {
 opacity: 0.6;
}

.klaro .cookie-modal .cm-list-input.half-checked:checked + .cm-list-label .slider::before,
.klaro .context-notice .cm-list-input.half-checked:checked + .cm-list-label .slider::before,
.klaro .cookie-notice .cm-list-input.half-checked:checked + .cm-list-label .slider::before,
.klaro .cookie-modal .cm-list-input.only-required + .cm-list-label .slider::before,
.klaro .context-notice .cm-list-input.only-required + .cm-list-label .slider::before,
.klaro .cookie-notice .cm-list-input.only-required + .cm-list-label .slider::before {
 -ms-transform: translateX(10px);
 transform: translateX(10px);
}

.klaro .cookie-modal .cm-list-input.only-required + .cm-list-label .slider,
.klaro .context-notice .cm-list-input.only-required + .cm-list-label .slider,
.klaro .cookie-notice .cm-list-input.only-required + .cm-list-label .slider {
 background-color: #24cc9a;
 opacity: 0.8;
}

.klaro .cookie-modal .cm-list-input.required:checked + .cm-list-label .slider,
.klaro .context-notice .cm-list-input.required:checked + .cm-list-label .slider,
.klaro .cookie-notice .cm-list-input.required:checked + .cm-list-label .slider {
 background-color: #24cc9a;
 opacity: 0.8;
 cursor: not-allowed;
}

.klaro .cookie-modal .cm-list-input,
.klaro .context-notice .cm-list-input,
.klaro .cookie-notice .cm-list-input {
 position: absolute;
 top: 0;
 left: 0;
 opacity: 0;
 width: 40px;
 height: 20px;
}

.klaro .cookie-modal .cm-list-title,
.klaro .context-notice .cm-list-title,
.klaro .cookie-notice .cm-list-title {
 font-size: 0.9em;
 font-weight: 700;
}

.klaro .cookie-modal .cm-list-description,
.klaro .context-notice .cm-list-description,
.klaro .cookie-notice .cm-list-description {
 font-size: 0.9em;
 padding-top: 4px;
}

.klaro .cookie-modal .cm-list-label .cm-switch,
.klaro .context-notice .cm-list-label .cm-switch,
.klaro .cookie-notice .cm-list-label .cm-switch {
 position: absolute;
 left: 0;
 height: 20px;
}

.klaro .cookie-modal .cm-list-label .slider,
.klaro .context-notice .cm-list-label .slider,
.klaro .cookie-notice .cm-list-label .slider {
 background-color: #ccc;
 position: absolute;
 cursor: pointer;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 transition: 0.4s;
 width: 40px;
 display: inline-block;
}

.klaro .cookie-modal .cm-list-label .slider::before,
.klaro .context-notice .cm-list-label .slider::before,
.klaro .cookie-notice .cm-list-label .slider::before {
 background-color: #fff;
 position: absolute;
 content: '';
 height: 10px;
 width: 10px;
 left: 5px;
 bottom: 5px;
 transition: 0.4s;
}

.klaro .cookie-modal .cm-list-label .slider.round,
.klaro .context-notice .cm-list-label .slider.round,
.klaro .cookie-notice .cm-list-label .slider.round {
 border-radius: 30px;
}

.klaro .cookie-modal .cm-list-label .slider.round::before,
.klaro .context-notice .cm-list-label .slider.round::before,
.klaro .cookie-notice .cm-list-label .slider.round::before {
 border-radius: 50%;
}

.klaro .cookie-modal .cm-list-label input:checked + .slider::before,
.klaro .context-notice .cm-list-label input:checked + .slider::before,
.klaro .cookie-notice .cm-list-label input:checked + .slider::before {
 -ms-transform: translateX(20px);
 transform: translateX(20px);
}

.klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider::before,
.klaro .context-notice .cm-list-input:checked + .cm-list-label .slider::before,
.klaro .cookie-notice .cm-list-input:checked + .cm-list-label .slider::before {
 -ms-transform: translateX(20px);
 transform: translateX(20px);
}

.klaro .cookie-modal a,
.klaro .context-notice a,
.klaro .cookie-notice a {
 color:#ff6f00;
}

.klaro .cookie-modal a:hover,
.klaro .context-notice a:hover,
.klaro .cookie-notice a:hover {
 text-decoration:none;
}

.klaro .cookie-modal h1,
.klaro .cookie-modal h2,
.klaro .context-notice h1,
.klaro .context-notice h2,
.klaro .cookie-notice h1,
.klaro .cookie-notice h2 {
 text-align:center !important;
 margin:0 !important;
}

.klaro .cookie-modal h1.title {
 padding: 0 20px 20px 0 !important
}

.klaro .cookie-modal p,
.klaro .cookie-modal h1,
.klaro .cookie-modal h2,
.klaro .cookie-modal ul,
.klaro .cookie-modal li,
.klaro .context-notice p,
.klaro .context-notice h1,
.klaro .context-notice h2,
.klaro .context-notice ul,
.klaro .context-notice li,
.klaro .cookie-notice p,
.klaro .cookie-notice h1,
.klaro .cookie-notice h2,
.klaro .cookie-notice ul,
.klaro .cookie-notice li {
 display: block;
 text-align: left;
 margin: 0;
 padding: 0;
 margin-top: 0.7em;
 color: #444;
}

.klaro .cookie-modal .cm-link,
.klaro .context-notice .cm-link,
.klaro .cookie-notice .cm-link {
 vertical-align: middle;
}

.klaro .cookie-modal .cm-btn,
.klaro .context-notice .cm-btn,
.klaro .cookie-notice .cm-btn,
.klaro .cookie-modal .cm-link,
.klaro .context-notice .cm-link,
.klaro .cookie-notice .cm-link {
 color: #000;
 background-color: #ffc22c;
 padding: 12px 24px;
 margin:0;
 border-style: none;
 font-weight:700;
 width:100%;
 font-size: 1em;
 line-height: 1;
 cursor: pointer;
 text-align: center;
 box-sizing: border-box;
}

.klaro .cookie-modal .cm-btn:hover,
.klaro .context-notice .cm-btn:hover,
.klaro .cookie-notice .cm-btn:hover,
.klaro .cookie-modal .cm-link:hover,
.klaro .context-notice .cm-link:hover,
.klaro .cookie-notice .cm-link:hover {
  background-color: #ffad01;
}

.klaro .cookie-modal .cm-btn:disabled,
.klaro .context-notice .cm-btn:disabled,
.klaro .cookie-notice .cm-btn:disabled {
 opacity: 0.5;
}

.klaro .cookie-modal .cm-btn.cm-btn-info,
.klaro .cookie-modal .cm-link.cn-learn-more,
.klaro .context-notice .cm-btn.cm-btn-info,
.klaro .context-notice .cm-link.cn-learn-more,
.klaro .cookie-notice .cm-btn.cm-btn-info,
.klaro .cookie-notice .cm-link.cn-learn-more {
  background-color: #ccc;
  font-weight:inherit;
  border-right:1px solid #fff;
  text-decoration: none;
}

.klaro .cookie-modal .cm-btn.cm-btn-info:hover,
.klaro .cookie-modal .cm-link.cn-learn-more:hover,
.klaro .context-notice .cm-btn.cm-btn-info:hover,
.klaro .context-notice .cm-link.cn-learn-more:hover,
.klaro .cookie-notice .cm-btn.cm-btn-info:hover,
.klaro .cookie-notice .cm-link.cn-learn-more:hover {
  background-color: #ccc;
}

.klaro .context-notice {
 border: 1px solid #c8c8c8;
 padding: 12px;
 height: 100%;
}

.klaro .context-notice p {
 text-align: center;
 padding-top: 0;
 margin-top: 0;
}

.klaro .context-notice p.cm-buttons {
 margin-top: 12px;
}

.klaro .context-notice .cm-btn {
  width:inherit;
  margin-left:5px;
}

.klaro .cookie-modal {
 width: 100%;
 height: 100%;
 position: fixed;
 overflow: hidden;
 left: 0;
 top: 0;
 z-index: 1000;
}

.klaro .cookie-modal.cm-embedded {
 position: relative;
 height: inherit;
 width: inherit;
 left: inherit;
 right: inherit;
 z-index: 0;
}

.klaro .cookie-modal.cm-embedded .cm-modal.cm-klaro {
 position: relative;
 -ms-transform: none;
     transform: none;
}

.klaro .cookie-modal .cm-bg {
 background: rgba(0, 0, 0, 0.6);
 height: 100%;
 width: 100%;
 position: fixed;
 top: 0;
 left: 0;
}

.klaro .cookie-modal .cm-modal.cm-klaro {
 background-color: #fff;
 color: #444;
 z-index: 1001;
 box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.2), 5px 5px 10px 0 rgba(0, 0, 0, 0.19);
 width: 100%;
 max-height: 98%;
 top: 50%;
 -ms-transform: translateY(-50%);
     transform: translateY(-50%);
 position: fixed;
 overflow: auto;
}

@media (min-width: 660px) {
 .klaro .cookie-modal .cm-modal.cm-klaro {
   position: relative;
   margin: 0 auto;
   max-width: 640px;
   height: auto;
   width: auto;
 }
}

.klaro .cookie-modal .cm-modal .hide {
 border-style: none;
 background: none;
 cursor: pointer;
 position: absolute;
 top: 20px;
 right: 20px;
 z-index: 1;
}

.klaro .cookie-modal .cm-modal .hide line {
 stroke: #444;
 stroke-width: 2px !important;
}

.klaro .cookie-modal .cm-modal .cm-footer-buttons {
 display: flex;
 flex-flow: row;
 justify-content: space-between;
}

.klaro .cookie-modal .cm-modal .cm-footer .cm-powered-by {
 font-size: 0.8em;
 padding-top: 4px;
 text-align: right;
 padding-right: 8px;
}

.klaro .cookie-modal .cm-modal .cm-footer .cm-powered-by a {
 color: #5c5c5c;
 color: var(--dark2, #5c5c5c);
}

.klaro .cookie-modal .cm-modal .cm-header {
 border-bottom: 1px solid #5c5c5c;
 padding: 20px;
}

.klaro .cookie-modal .cm-modal .cm-body {
 padding: 20px;
}

.klaro .cookie-modal .cm-modal .cm-body ul {
 display: block;
}

.klaro .cookie-modal .cm-modal .cm-body span {
 display: inline-block;
 width: auto;
}

.klaro .cookie-modal .cm-modal .cm-body ul.cm-services {
  margin-top:0;
}

.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose .cm-services .cm-content,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose .cm-services .cm-content {
 margin-left: -40px;
 display: none;
}

.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose .cm-services .cm-content.expanded,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose .cm-services .cm-content.expanded {
 margin-top: 10px;
 display: block;
}

.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-service,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose {
 position: relative;
 line-height: 20px;
 vertical-align: middle;
 padding-left: 60px;
 min-height: 40px;
}

.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service:first-child,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose:first-child,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-service:first-child,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose:first-child {
 margin-top: 0;
}

.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service p,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose p,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-service p,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose p {
 margin-top: 0;
}

.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service p.purposes,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose p.purposes,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-service p.purposes,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose p.purposes {
 color: #a0a0a0;
 font-size: 0.8em;
}

.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service.cm-toggle-all,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose.cm-toggle-all,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-service.cm-toggle-all,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose.cm-toggle-all {
 border-top:1px solid #5c5c5c;
 padding-top: 20px;
 margin-top:20px;
}

.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service span.cm-opt-out,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service span.cm-required,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose span.cm-opt-out,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose span.cm-required,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-service span.cm-opt-out,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-service span.cm-required,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose span.cm-opt-out,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose span.cm-required {
 color: #5c5c5c;
 padding-left: 0.2em;
 font-size: 0.8em;
}

.klaro .cookie-notice:not(.cookie-modal-notice) {
 background-color: #fff;
 z-index: 999;
 position: fixed;
 width: 100%;
 bottom: 0;
 right: 0;
}

.klaro .cookie-notice:not(.cookie-modal-notice).cn-embedded {
 position: relative;
 height: inherit;
 width: inherit;
 left: inherit;
 right: inherit;
 bottom: inherit;
 z-index: 0;
}

.klaro .cookie-notice:not(.cookie-modal-notice).cn-embedded .cn-body {
 padding-top: 0.5em;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body {
 bottom:0;
 padding:0;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body img {
  margin:0 auto;
  display:block;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body h1 {
  padding: 20px 0;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body p {
 margin: 0;
 padding: 20px;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body p p {
 padding: 0;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-learn-more,
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons {
 display: inline-block;
}

@media (min-width: 1024px) {
 .klaro .cookie-notice:not(.cookie-modal-notice) {
   position: fixed;
   position: var(--notice-position, fixed);
   right: 20px;
   right: var(--notice-right, 20px);
   left: auto;
   left: var(--notice-left, auto);
   bottom: 20px;
   bottom: var(--notice-bottom, 20px);
   top: auto;
   top: var(--notice-top, auto);
   max-width: 400px;
   max-width: var(--notice-max-width, 400px);
   box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.2), 5px 5px 10px 0 rgba(0, 0, 0, 0.19);
 }
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.klaro .cookie-modal-notice {
 background-color: #fff;
 color: #444;
 z-index: 1001;
 box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.2), 5px 5px 10px 0 rgba(0, 0, 0, 0.19);
 width: 100%;
 max-height: 98%;
 top: 50%;
 -ms-transform: translateY(-50%);
     transform: translateY(-50%);
 position: fixed;
 overflow: auto;
 padding: 0;
}

@media (min-width: 400px) {
 .klaro .cookie-modal-notice {
   position: relative;
   margin: 0 auto;
   max-width: 600px;
   height: auto;
   width: auto;
 }
}

.klaro .cookie-modal-notice .cn-ok {
 display: grid;
 grid-template-columns: 1fr 1fr;
}

.klaro .cookie-notice-hidden {
 display: none !important;
}

.klaro .cookie-modal-notice p {
  padding:20px;
  margin:0;
}

.klaro .cookie-modal-notice h1 {
  padding:20px 0;
}

.klaro .cookie-modal-notice .cookie-modal-icon {
  display: block;
  font-size: 72px;
  color: #000;
  text-align: center;
  line-height: 1em;
}

.klaro .cookie-modal-notice .icon-cookie::before {
  margin: 0;
}

.klaro .cookie-modal-notice p p {
  padding:0;
  margin:0;
}

.cookie-consent-button {
  position:fixed;
  bottom:20px;
  left:20px;
  cursor:pointer;
  border-radius:50%;
  background-color: #ffc22c;
  padding:0 14.4px;
}

.cookie-consent-button:hover {
  background-color: #ffad01;
}

.cookie-consent-button .icon-cookie {
  font-size: 48px;
  color: #000;
}

.cookie-consent-button .icon-cookie::before {
  margin: 0;
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden,
[hidden] {
  display: none !important;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
  visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
  content: " "; /* 1 */
  display: table; /* 2 */
}

.clearfix:after {
  clear: both;
}

/* ==========================================================================
   Media Queries for Responsive Design.
   ========================================================================== */

@media only screen and (max-width: 1280px) {
	hr {
		margin: 30px 30px;
	}

	.site-inner {
		width: 960px;
	}

  .title-area{
		width:50%;
	}

  .site-title{
		font-size:1.6em;
	}

	.site-description{
		font-size:0.8em;
	}

	#left{
		width:240px;
	}

	#right{
		width: 720px;
	}

	#content{
		padding:20px 40px 20px 40px;
		font-size:0.9em;
	}

	.vsmenu{
		width:100%;
	}

	.vsmenu.vs_codecanyon > li > a{
		font-size: 0.8em;
		padding: 6px 20px;
	}

	.vsmenu.vs_codecanyon  > li > ul > li > a{
		font-size: 0.7em;
		padding:10px 30px 10px 30px;
		line-height:1.2;
	}

	.vsmenu.vs_codecanyon  > li > ul > li > ul > li > a{
		font-size: 0.6em;
		padding:10px 40px 10px 40px;
		line-height:1.2;
	}

	.caret {
		right:20px;
		top:17px;
	}

	.widget{
		padding: 0 20px 20px;
		font-size:0.7em;
	}

	.widget h2 {
		font-size:1.5em;
	}

	.widget img{
		width:200px;
	}

	.site-info{
		width:40%;
		left:40px;
		top:20px;
	}

	.site-info p{
		font-size:0.8em;
	}

	.call-to-action{
		padding:20px 40px;
	}

	.picture-right,
	.picture-left{
	  width:280px;
	}

}

@media only screen and (max-width: 1023px) {
	hr{
		display:none;
	}

	.cookieNotice{
		padding:10px 20px;
	}

	.site-inner {
		width: 760px;
	}

	header{
		height:140px;
	}

	header .information{
		float:none;
		width:100%;
		text-align:center;
	}

	header .information img {
		float:none;
		margin-left:auto;
		margin-right:auto;
		margin-bottom:20px;
	}

	#left{
		float:none;
		width:100%;
		padding-bottom: 0;
	}

	#right{
		float:none;
		width: 100%;
	}

	.vsmenu{
		padding:5px 0;
	}

	.vsmenu.vs_codecanyon > li > a{
		padding: 6px 20px;
	}

	.vsmenu.vs_codecanyon  > li > ul > li > a{
		padding:10px 50px 10px 30px;
	}

	.vsmenu.vs_codecanyon  > li > ul > li > ul > li > a{
		padding:10px 60px 10px 40px;
	}

	.widget{
		color:#000;
		border-bottom:none;
		border-top:1px solid #ccc;
		padding-bottom:40px;
	}

	.widget a {
		color:#000;
	}

}

@media only screen and (max-width: 767px) {
	h1{
		font-size:1.6em;
	}

	h2{
		font-size:1.2em;
	}

	.site-inner {
		width: 100%;
	}

	#header{
		margin-bottom:20px;
	}

	#content{
		width: 90%;
		padding:0 5% 0 5%;
		font-size:0.9em;
	}

	footer{
		font-size:0.7em;
	}

	.site-info{
		display:none;
	}

	.iframe{
		width:320px;
		height:180px;
	}

	.picture-right,
	.picture-left{
		float:none;
		margin:0 0 20px 0;
		width:400px;
	}

}

@media only screen and (max-width: 600px) {
	.right,
	.left{
		float:none;
		margin:0 0 20px 0;
	}

	.picture-right,
	.picture-left{
		width:300px;
	}

	.product-tile img {
		margin-top: 60px;
	}

	.product-tile h3 {
		margin-top: 20px;
	}
}

@media only screen and (max-width: 400px) {
	header{
		height:200px;
	}
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
  *,
  *::before,
  *::after {
    background: #fff !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }

  abbr[title]::after {
    content: " (" attr(title) ")";
  }

  /*
   * Don't show links that are fragment identifiers,
   * or use the `javascript:` pseudo protocol
   */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }

  pre {
    white-space: pre-wrap !important;
  }

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

  /*
   * Printing Tables:
   * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
   */
  thead {
    display: table-header-group;
  }

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

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

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