/*!
Theme Name: Ranelf Theme
Theme URI: http://underscores.me/
Author: Andreas Martinsson
Author URI: http://amkreativ.se
Description: Description
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ranelf
Tags:

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

Ranelf Theme 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:
----------------------------------------------------------------
# Normalize
# Typography
# Elements
# Forms
# Navigation
	## Links
	## Menus
# Accessibility
# Alignments
# Clearings
# Widgets
# Content
    ## Posts and pages
	## Asides
	## Comments
# Infinite scroll
# Media
	## Captions
	## Galleries

/* Fonts */
@import url(https://fonts.googleapis.com/css?family=Abel);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic);
/*--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/
@import "https://fonts.googleapis.com/css?family=Kaushan+Script";
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; }

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
body,
button,
input,
select,
textarea {
  color: #404040;
  font-family: sans-serif;
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.5; }

h1, h2, h3, h4, h5, h6 {
  clear: both; }

p {
  margin-bottom: 1.5em; }

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: 0.9375rem;
  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: 0.9375rem; }

abbr, acronym {
  border-bottom: 1px dotted #666;
  cursor: help; }

mark, ins {
  background: #fff9c0;
  text-decoration: none; }

big {
  font-size: 125%; }

/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/
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, blockquote:after, q:before, 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%; }

/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Links
--------------------------------------------------------------*/
a {
  color: royalblue; }
  a:visited {
    color: purple; }
  a:hover, a:focus, a:active {
    color: midnightblue; }
  a:focus {
    outline: thin dotted; }
  a:hover, a:active {
    outline: 0; }

/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/
body {
  -webkit-font-smoothing: antialiased; }

.site-header {
  position: relative;
  background-color: #eee;
  width: 100%; }

.wrapper {
  background-size: 100%;
  max-width: 1000px;
  margin: 0 auto 20px; }

.contact-me {
  text-align: center;
  padding-top: 40px; }
  .contact-me h1 {
    font-family: 'Kaushan Script', cursive;
    color: #fff;
    font-size: 36px; }
    @media screen and (min-width: 40em) {
      .contact-me h1 {
        font-size: 50px; } }
  .contact-me p {
    padding: 20px;
    font-family: 'Open Sans';
    margin: 0 auto;
    color: #fff;
    max-width: 500px; }

.button-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center; }
  .button-container button.clickme {
    font-family: 'Abel';
    font-weight: 700;
    background-color: #AF67EF;
    background: linear-gradient(135deg, #7a8ff6 7%, #f57af1 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    color: #fff;
    border: 2px solid #fff;
    border-radius: 5px;
    padding: 15px 40px;
    font-size: 30px;
    width: 80%;
    max-width: 400px; }
    .button-container button.clickme:nth-child(2) {
      margin-top: 20px; }
    .button-container button.clickme:hover {
      border: 2px solid #333; }

.contact {
  padding-top: 40px;
  padding-bottom: 40px; }
  .contact-section {
    background-color: #333;
    padding: 15px; }
  .contact-inner {
    box-shadow: 0 3px 6px black;
    border: 3px dashed #AF67EF;
    background-color: #fff;
    padding: 40px 0;
    border-radius: 10px;
    margin: 40px 0;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    flex-direction: column; }
    @media screen and (min-width: 40em) {
      .contact-inner {
        flex-direction: row; } }
  .contact-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-family: 'Abel';
    padding-left: 40px;
    width: 100%; }
    @media screen and (min-width: 40em) {
      .contact-left {
        width: 50%; } }
    .contact-left h2 {
      font-size: 30px;
      color: #AF67EF;
      padding: 0;
      margin: 0; }
    .contact-left span {
      font-size: 24px;
      float: left;
      width: 100%; }
  .contact-right {
    display: flex;
    flex-direction: column;
    padding: 20px;
    font-family: 'Abel';
    width: 100%;
    border-left: 1px solid #ccc;
    align-items: center;
    justify-content: center; }
    @media screen and (min-width: 40em) {
      .contact-right {
        width: 50%; } }
    .contact-right button {
      font-family: 'Abel';
      font-weight: 700;
      background-color: #AF67EF;
      background: linear-gradient(135deg, #7a8ff6 7%, #f57af1 100%);
      /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
      color: #fff;
      border: 2px solid #fff;
      border-radius: 5px;
      padding: 15px 40px;
      font-size: 25px;
      width: 100%;
      max-width: 70vw; }
      @media screen and (min-width: 40em) {
        .contact-right button {
          max-width: 400px; } }
      .contact-right button:nth-child(2) {
        margin-top: 20px; }
      .contact-right button:hover {
        border: 2px solid #333; }
    .contact-right h2 {
      font-size: 30px;
      color: #AF67EF;
      padding: 0;
      margin: 0; }

.welcome {
  background-size: 100%;
  padding: 60px 0px;
  color: #fff;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7a8ff6+7,f57af1+100 */
  background: #7a8ff6;
  /* Old browsers */
  background: -moz-linear-gradient(-45deg, #7a8ff6 7%, #f57af1 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, #7a8ff6 7%, #f57af1 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, #7a8ff6 7%, #f57af1 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7a8ff6', endColorstr='#f57af1',GradientType=1 );
  /* IE6-9 fallback on horizontal gradient */ }
  .welcome h1 {
    transition: font 0.3s ease;
    margin: 0;
    font-size: 30px;
    font-family: 'Abel'; }
  .welcome p {
    text-align: justify;
    text-justify: inter-word;
    max-width: 300px;
    font-family: 'Open Sans';
    font-size: 14px; }
    @media screen and (min-width: 60em) {
      .welcome p {
        max-width: 450px; } }
  .welcome h1.greeting {
    padding-top: 300px;
    font-family: 'Kaushan Script', cursive;
    font-weight: 200; }
    @media screen and (min-width: 35em) {
      .welcome h1.greeting {
        padding-top: 0; } }

.greeting-image {
  background-image: url(img/thin2.png);
  background-position: right top;
  background-repeat: no-repeat;
  background-color: #7a8ff6;
  background-size: contain;
  background-size: 600px; }
  @media screen and (min-width: 40em) {
    .greeting-image {
      background-size: 1000px; } }
  @media screen and (min-width: 60em) {
    .greeting-image {
      background-position: right center;
      background-size: contain; } }

.hijack {
  background-image: url(img/blurry.jpg);
  background-size: 100%; }

.services {
  display: flex;
  flex-direction: column;
  padding: 40px; }
  .services .service {
    font-family: 'Open Sans';
    text-align: justify;
    position: relative; }
  .services button {
    float: left;
    clear: both;
    padding: 10px 20px;
    margin-top: 20px;
    color: #fff;
    font-family: "Open Sans";
    font-size: 18px;
    background-color: #AF67EF;
    border: none;
    width: 100%;
    margin-left: 0%;
    margin-bottom: 50px;
    transition: all 0.2s ease;
    border-left: 0px solid #fff;
    border-right: 0px solid #fff; }
  .services button:hover {
    transition: all 0.2s ease;
    border-left: 5px solid #fff;
    border-right: 5px solid #fff; }
  .services button:active {
    background-color: #EF547C;
    border-left: 5px solid #fff;
    border-right: 5px solid #fff; }
  .services button:focus {
    outline: 0; }
  .services .description {
    padding-top: 20px; }
  .services .image {
    position: relative;
    width: 60%;
    margin-left: 20%;
    border-radius: 400px; }
    .services .image img {
      width: 100%;
      height: auto;
      padding: 0;
      margin: 0;
      border-radius: 400px;
      transition: all 0.2s ease;
      border: 0px solid #B842B7; }
    .services .image img:hover {
      border: 10px solid #AF67EF;
      cursor: pointer; }
    .services .image img:active {
      border: 15px solid #EF547C; }
    .services .image span.title {
      position: absolute;
      font-family: 'Abel';
      text-shadow: 0px 0px 10px #323232;
      color: #fff;
      width: 100%;
      display: block;
      text-align: center;
      top: 42%;
      font-size: 24px;
      height: 0;
      pointer-events: none; }

.entry-header {
  width: 100%;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: #222;
  height: 30px;
  font-family: 'Abel'; }
  .entry-header a {
    text-decoration: none;
    color: #222; }
  .entry-header a:visited {
    color: #222; }
  .entry-header a:hover {
    color: #B884F3; }
  .entry-header h2 {
    float: left;
    margin: 0;
    font-size: 22px; }
  .entry-header .entry-meta {
    float: right;
    margin-top: 5px; }

.entry-content {
  clear: both; }

.menu-toggle {
  height: 50px;
  width: 50px;
  background-color: #eee;
  box-shadow: none;
  border: none;
  border-radius: 0px;
  margin-top: 15px;
  position: absolute;
  right: 0;
  top: 0;
  margin-right: 15px;
  padding: 0;
  outline: none; }
  .menu-toggle span {
    position: absolute;
    margin: 0;
    padding: 0;
    display: block;
    background-color: #A266F5;
    width: 30px;
    height: 5px;
    left: 10px; }
  .menu-toggle span.bar1 {
    top: 12px; }
  .menu-toggle span.bar2 {
    top: 22px; }
  .menu-toggle span.bar3 {
    top: 32px; }

.menu-toggle:hover {
  box-shadow: none; }
  .menu-toggle:hover span {
    background-color: #f57af1; }

.menu-toggle:active {
  box-shadow: none; }

.postcontent {
  width: 100%;
  float: left; }
  .postcontent p {
    margin: 0;
    font-family: 'Open Sans';
    text-align: justify;
    text-justify: inter-word;
    margin-bottom: 20px; }

.postimage {
  width: 100%;
  float: right; }
  .postimage img {
    width: 100%; }

.entry-footer {
  margin-bottom: 50px; }

.edit-link {
  float: right; }
  .edit-link a {
    font-family: 'Abel';
    text-decoration: none;
    color: #222; }
  .edit-link a:visited {
    color: #222; }
  .edit-link a:hover {
    color: #B884F3; }

.nav-links .nav-previous a {
  border-style: solid;
  border-width: 1px;
  border-color: #222;
  padding: 15px; }
.nav-links .nav-next a {
  border-style: solid;
  border-width: 1px;
  border-color: #222;
  padding: 15px; }
.nav-links a {
  font-family: 'Abel';
  text-decoration: none;
  color: #222; }
.nav-links a:visited {
  color: #222; }
.nav-links a:hover {
  color: #B884F3; }

.site-branding {
  float: left; }
  .site-branding h1 {
    font-family: 'Abel';
    font-size: 28px;
    padding-top: 2px; }
    .site-branding h1 a {
      transition: all 0.5s ease;
      text-decoration: none;
      color: #222; }
    .site-branding h1 a:visited {
      color: #222; }
    .site-branding h1 a:hover {
      color: #B884F3;
      transition: all 0.1s ease; }

.site-footer {
  background: #7a8ff6;
  /* Old browsers */
  background: -moz-linear-gradient(-45deg, #7a8ff6 7%, #f57af1 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, #7a8ff6 7%, #f57af1 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, #7a8ff6 7%, #f57af1 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7a8ff6', endColorstr='#f57af1',GradientType=1 );
  /* IE6-9 fallback on horizontal gradient */ }

.footer-box {
  width: 33.3333%;
  float: left;
  padding-top: 20px;
  font-family: 'Abel';
  color: #fff;
  margin-bottom: 20px; }
  .footer-box a {
    text-decoration: none;
    color: #ccc; }
  .footer-box a:visited {
    color: #fff; }
  .footer-box a:hover {
    color: #fff; }
  .footer-box a:hover::before {
    margin-bottom: 3px;
    margin-right: 5px;
    border-radius: 10px;
    width: 5px;
    height: 5px;
    display: inline-block;
    content: "";
    background-color: #fff;
    margin-left: -10px; }
  .footer-box ul {
    margin: 0;
    padding: 0;
    list-style-type: none; }
  .footer-box .webdesign {
    max-height: 100px; }

.main-navigation {
  display: block;
  float: left;
  background-color: #eee; }
  .main-navigation .nav-menu {
    font-family: 'Abel'; }
    .main-navigation .nav-menu ul {
      right: 0; }
    .main-navigation .nav-menu li {
      width: 100%; }
      .main-navigation .nav-menu li a {
        font-size: 20px;
        color: #A266F5;
        padding: 15px 0px; }
      .main-navigation .nav-menu li a:hover {
        color: #f57af1; }
  .main-navigation ul {
    display: none;
    list-style: none;
    margin: 0;
    padding-left: 0; }
    .main-navigation ul ul {
      box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
      float: left;
      position: absolute;
      top: 1.5em;
      left: -999em;
      z-index: 99999; }
      .main-navigation ul ul ul {
        left: -999em;
        top: 0; }
      .main-navigation ul ul li:hover > ul, .main-navigation ul ul li.focus > ul {
        left: 100%; }
      .main-navigation ul ul a {
        width: 200px; }
    .main-navigation ul li:hover > ul,
    .main-navigation ul li.focus > ul {
      left: auto; }
  .main-navigation li {
    float: left;
    position: relative; }
  .main-navigation a {
    display: block;
    text-decoration: none; }
  .main-navigation .current_page_item {
    color: #222;
    background-color: #ddd; }
    .main-navigation .current_page_item a {
      color: #111; }

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

@media screen and (min-width: 35em) {
  .welcome {
    transition: all 0.2s ease;
    padding: 100px 50px; }
    .welcome h1 {
      font-size: 40px; }

  .services {
    padding: 0;
    width: 100%; }
    .services .service {
      margin: 20px; }
      .services .service .image {
        width: 30%;
        margin-left: 0%;
        padding: 20px;
        float: left; }
      .services .service span.title {
        width: 100%;
        margin-left: -20px; }
      .services .service .description {
        padding-top: 0px;
        float: left;
        clear: both; }
      .services .service .blurb {
        padding: 20px;
        float: right;
        width: 70%;
        height: 45%; }
      .services .service button {
        width: auto; }
      .services .service button:hover {
        border: none;
        background-color: #EF547C; }

  .postcontent {
    width: 64%; }

  .postimage {
    width: 33%; } }
@media screen and (min-width: 52em) {
  .services {
    flex-flow: row; }
    .services .service {
      width: 33%; }
      .services .service .image {
        width: 80%;
        margin: 10%; }
      .services .service .blurb {
        clear: both;
        width: 100%;
        float: left;
        text-align: center;
        padding-top: 0;
        position: relative;
        height: 55%; }
      .services .service button {
        clear: both;
        float: left;
        bottom: 0;
        position: absolute;
        width: 60%;
        margin-left: -73.75%; }
      .services .service .description {
        text-align: justify; }
    .services .service:first-child {
      margin-left: 0px; }
    .services .service:last-child {
      margin-right: 0px; }

  .menu-toggle {
    display: none; }

  .main-navigation ul {
    display: block; }

  .welcome {
    padding: 100px; }
    .welcome h1 {
      font-size: 60px; }
    .welcome p {
      font-size: 16px; }

  .main-navigation {
    float: right; }
    .main-navigation .nav-menu li {
      width: auto; }
      .main-navigation .nav-menu li a {
        padding: 30px 10px;
        color: #888;
        font-size: 16px; }
      .main-navigation .nav-menu li a:hover {
        color: #555;
        background-color: #ddd; } }
@media screen and (min-width: 80em) {
  .welcome h1 {
    font-size: 90px; }
  .welcome p {
    font-size: 16px; } }
.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%; }

.offer-header {
  padding-top: 20px;
  text-align: center;
  font-family: "Kaushan Script";
  font-size: 24px;
  color: #666; }

.offers {
  display: flex;
  flex-direction: column; }
  .offers .offer {
    margin-top: 20px;
    width: 100%;
    background-color: #fff;
    height: auto;
    padding-bottom: 100px;
    padding-left: 20px;
    padding-right: 20px; }
    .offers .offer .offer-image {
      position: relative;
      width: 100%;
      padding: 20px; }
      .offers .offer .offer-image img {
        width: 100%;
        border-radius: 400px;
        transition: all 0.2s ease;
        background-color: #ccc;
        background: url(img/bg.svg);
        border: 0px solid #B842B7; }
      .offers .offer .offer-image img:hover {
        border: 10px solid #AF67EF;
        cursor: pointer; }
      .offers .offer .offer-image img:active {
        border: 15px solid #EF547C; }
      .offers .offer .offer-image span.title {
        margin-left: 0px;
        position: absolute;
        color: #fff;
        top: 43%;
        left: 0;
        width: 100%;
        text-align: center;
        font-size: 24px;
        font-family: "Abel";
        text-shadow: 0px 0px 10px #323232;
        pointer-events: none; }
    .offers .offer .offer-info {
      margin-top: 20px;
      padding-bottom: 80px;
      text-align: justify;
      word-wrap: break-word;
      width: 100%;
      position: relative; }
      .offers .offer .offer-info span {
        clear: both;
        display: block;
        font-family: "Open Sans"; }
      .offers .offer .offer-info button {
        bottom: -60px;
        left: 0;
        width: 100%;
        position: absolute;
        clear: both;
        padding: 10px 20px;
        margin-top: 20px;
        color: #fff;
        font-family: "Open Sans";
        font-size: 18px;
        background-color: #AF67EF;
        border: none;
        margin-left: 0%;
        padding-right: 20px;
        transition: all 0.2s ease;
        border-left: 0px solid #fff;
        border-right: 0px solid #fff; }

.youtube {
  height: 555px; }
  .youtube iframe {
    float: left; }
  .youtube .videoinfo {
    margin-top: 20px;
    margin-left: 0px;
    padding-left: 20px;
    float: left;
    width: 100%;
    border-left: 1px solid #fff;
    height: 250px; }
    .youtube .videoinfo h3 {
      font-family: 'Abel';
      font-size: 28px;
      font-weight: 800; }
    .youtube .videoinfo span {
      font-family: "Open Sans";
      font-size: 16px; }

@media screen and (min-width: 60em) {
  .youtube {
    height: 315px; }
    .youtube .videoinfo {
      margin-top: 0px;
      margin-left: 20px;
      width: 300px;
      height: 315px; } }
.grey {
  background-color: #666;
  color: #fff;
  -webkit-box-shadow: inset 0px 0px 78px -18px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: inset 0px 0px 78px -18px rgba(0, 0, 0, 0.75);
  box-shadow: inset 0px 0px 78px -18px rgba(0, 0, 0, 0.75); }

.white {
  background-color: #fff;
  color: #333; }

.box {
  font-family: "Open Sans";
  width: 100%;
  padding: 40px 0px;
  padding-bottom: 50px;
  padding-top: 50px; }
  .box h1, .box h2, .box h3, .box h4 {
    margin: 0;
    padding: 0;
    margin-bottom: 20px; }
  .box h2 {
    font-family: "Abel";
    font-weight: 200;
    font-size: 36px;
    margin-bottom: 50px; }
  .box h3 {
    font-family: "Montserrat";
    font-weight: 200;
    font-weight: 24px; }
  .box p {
    margin-bottom: 10px;
    font-family: "Open Sans";
    max-width: 700px;
    text-align: justify; }
    .box p:last-child {
      margin-bottom: 50px; }
  .box ul {
    margin-left: 40px;
    max-width: 560px;
    padding: 0; }
  .box table {
    font-family: "Open Sans"; }
    .box table th {
      float: left;
      margin-bottom: 20px;
      font-size: 18px; }

@media screen and (min-width: 35em) {
  .left {
    width: 50%; }

  .right {
    width: 50%; }

  .offers .offer {
    padding-bottom: 0;
    width: 100%; }
    .offers .offer .offer-image {
      width: 33%;
      float: left; }
    .offers .offer .offer-info {
      width: 66%;
      padding-left: 20px;
      padding-right: 20px;
      float: left; }
      .offers .offer .offer-info button {
        width: auto;
        margin-left: 20px; } }
@media screen and (min-width: 52em) {
  .offers {
    flex-direction: row;
    margin-bottom: 100px; }
    .offers .offer {
      width: 33%; }
      .offers .offer .offer-image {
        width: 100%; }
      .offers .offer .offer-info {
        height: 55%;
        width: 100%; }
        .offers .offer .offer-info button {
          bottom: 0;
          width: 70%;
          margin: 15%; } }
.gallery {
  padding-top: 20px;
  background-color: #fff;
  display: flex;
  flex-flow: column; }

.gallery-image {
  position: relative;
  background-color: #f00;
  overflow: hidden;
  margin-bottom: 20px; }
  .gallery-image img {
    width: 100%;
    margin-bottom: -10px; }
  .gallery-image a:hover span {
    background-color: rgba(0, 0, 0, 0.5);
    padding-bottom: 10px; }
  .gallery-image a:hover span::before {
    background-color: rgba(255, 255, 255, 0.1); }
  .gallery-image span {
    transition: all 0.2s ease;
    font-family: "Abel";
    font-weight: 800;
    position: absolute;
    width: 100%;
    text-align: center;
    bottom: 0;
    left: 0;
    font-size: 24px;
    background-color: rgba(0, 0, 0, 0.3);
    color: #fff; }
  .gallery-image span::before {
    transition: all 0.2s ease;
    width: 100%;
    height: 700px;
    bottom: 100%;
    background-color: rgba(255, 255, 255, 0);
    content: "";
    position: absolute;
    display: block; }

/*
@media screen and (min-width: 35em) {
	
}
*/
@media screen and (min-width: 35em) {
  .gallery {
    flex-flow: row; }

  .gallery-image {
    margin: 20px; }

  .gallery-image:first-child {
    margin-left: 0; }

  .gallery-image:last-child {
    margin-right: 0; } }
.modal {
  position: fixed;
  top: 0;
  background-color: rgba(0, 0, 0, 0.5);
  width: 100vw;
  height: 100vh;
  padding: 20px; }
  .modal .modal-content {
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    position: relative;
    background-color: #fff;
    height: 100%;
    max-width: 600px;
    margin: 0 auto; }
    .modal .modal-content .modal-image {
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      position: relative;
      overflow: hidden;
      background: #7a8ff6;
      /* Old browsers */
      background: -moz-linear-gradient(-45deg, #7a8ff6 7%, #f57af1 100%);
      /* FF3.6-15 */
      background: -webkit-linear-gradient(-45deg, #7a8ff6 7%, #f57af1 100%);
      /* Chrome10-25,Safari5.1-6 */
      background: linear-gradient(135deg, #7a8ff6 7%, #f57af1 100%);
      /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7a8ff6', endColorstr='#f57af1',GradientType=1 );
      /* IE6-9 fallback on horizontal gradient */ }
      .modal .modal-content .modal-image img {
        height: auto;
        margin-bottom: -10px;
        width: 100%; }
      .modal .modal-content .modal-image h2 {
        width: 100%;
        background-color: rgba(0, 0, 0, 0.3);
        text-shadow: 0px 0px 30px rgba(0, 0, 0, 0.5);
        position: absolute;
        font-family: "Abel";
        color: #fff;
        font-size: 36px;
        padding: 0;
        margin: 0;
        bottom: 0;
        padding: 0 20px;
        font-weight: 300; }
      .modal .modal-content .modal-image .x {
        position: absolute;
        color: #fff;
        font-size: 36px;
        font-family: "Open Sans";
        font-weight: 800;
        top: 0;
        right: 0;
        padding: 0 15px;
        text-shadow: 0px 0px 30px rgba(0, 0, 0, 0.5);
        background-color: transparent;
        border: none; }
      .modal .modal-content .modal-image .x:hover {
        color: #AAA; }
    .modal .modal-content .modal-info {
      padding-left: 20px;
      padding-right: 20px; }
      .modal .modal-content .modal-info h3 {
        font-family: "Open Sans";
        font-weight: 300;
        font-size: 18px;
        padding: 0;
        margin: 0;
        margin-top: 15px;
        color: #666; }
      .modal .modal-content .modal-info span {
        font-family: "Open Sans";
        padding-top: 10px;
        font-size: 14px;
        display: block;
        max-width: 600px; }

.content-area {
  padding-top: 50px; }

@media screen and (min-width: 35em) {
  .modal .modal-content .modal-image h2 {
    font-size: 48px; } }
/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers. */
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden; }
  .screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    color: #21759b;
    display: block;
    font-size: 14px;
    font-size: 0.875rem;
    font-weight: bold;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
    /* Above WP toolbar. */ }

/* Do not show the outline on the skip link target. */
#content[tabindex="-1"]:focus {
  outline: 0; }

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

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

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

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

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

/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
.widget {
  margin: 0 0 1.5em;
  /* Make sure select elements fit in widgets. */ }
  .widget select {
    max-width: 100%; }

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

.hentry {
  margin: 0 0 1.5em; }

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

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

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

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

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

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

.bypostauthor {
  display: block; }

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

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

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

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

/*--------------------------------------------------------------
## 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; }

.memes {
  background-color: #f00; }