/*
Theme Name: Funktional
Description: Commercial Custom Theme
Author: Sven Gebert
*/

* {margin: 0;padding: 0;outline: none}
html, body { height: 100%; }
body {
font-family: 'Dosis', sans-serif;
background:transparent;
color: #fff;
width:100%;
margin:0;
padding:0;
font-weight:normal;
font-weight:400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
position:relative;
}

a {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out}

a, a:focus { color: #fff; text-decoration:none; outline:none; }
.entry-content a, .entry-content a:focus {color:#a3a3a3;}

.no-touch a:hover { color:#a3a3a3; }
.entry-content a {color: #888;}
.entry-content a:hover { color:#fff; }


hr {
border: solid #333333;
border-width: 1px 0 0;
clear: both;
margin: 0 0 1em;
height: 0; }

/* -------------------------------- Vertical Layout */
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
position:relative;
margin: 0 0 -48px 0;  /* the bottom margin is the negative value of the footer's height */
}

#wrap {
overflow:auto;
}

#footer, #push {
height: 48px; /* .push must be the same height as .footer */
clear:both;
text-align:left;
}

#footer p {color:#a3a3a3; line-height:100%;}


#header {
position:absolute;
top:0;
left:0;
width:100%;
z-index:2;
}

#header.fixed { background:#090909; position:fixed}
.home #header.fixed, .page-template-kontakt-php #header.fixed{ background:transparent}

.home, .page  {
background-attachment: scroll;
background-position: top;
background-repeat: no-repeat;
background-size: contain;
}

.page #primary {margin-bottom:2em;}

#header h1 {font-weight:500;font-size: 1.125em;margin: 0;line-height: 100%;}
#header h1 span {color:#fafafa; display:block; }
#header-inner { padding-top:15px; padding-bottom:10px; }
#primary {position:relative;padding-bottom:em;}

#content { margin-top:69px; padding-bottom:0; } /* 51 + 18 */


/* Type */
h1, h2, h2, h4 {font-weight:400; line-height:1.35em; margin:0}
p {line-height:1.5em}


/* Headlines */
h2.page-title, h2.entry-title {font-size: 1.125em; margin-bottom:1em}
h2.page-title {color:#fff;}
.blog h2.page-title {margin-bottom:1em}

h1 a {color:#888;}

.blog h2 {font-size:1.125em; margin-bottom:0;}
.vcard h2 {font-size:1em; line-height:1.5em; margin-bottom:0.5em;}
.single h2 {font-size:1.125em; margin-bottom:1em}
.blog h2, .single h2 {line-height:20px}
.description p {color: #f5f5f5; font-size: 1em; margin-bottom:1em;}

.large-text p {max-width:700px; font-size: 1.125em; font-weight: 300;margin-bottom: 1em}


/* Overlay style */
.overlay { position: fixed; width: 100%; height: 100%; top: 0; right: 0; background: rgba(17,17,17,0.9); z-index:900}
/* Overlay closing cross */
.overlay #overlay-close { position: absolute; right: 15px; top: 15px; overflow: hidden; border: none; background: transparent; color: #fff; outline: none; z-index: 100;}

[data-icon=H], [data-icon=X] { font-size:1.5em;}
.remote {text-align:right;}
a#trigger-overlay {display:inline-block; color:#fff}
.no-touch a:hover#trigger-overlay{color:#D94943; }
a#overlay-close {display:inline-block;}

/* Menu style */
.overlay nav {text-align: center; position: relative; top: 50%; height: 60%; font-size: 54px; -webkit-transform: translateY(-50%); transform: translateY(-50%);}
.overlay ul { list-style: none; padding: 0; margin: 0 auto; display: inline-block; height: 100%; position: relative;}
.overlay ul li { display: block; height: 20%; height: calc(100% / 5); min-height: 54px; }
.overlay ul li a {font-weight: 300; display: block; color: #fff; -webkit-transition: color 0.2s; transition: color 0.2s; }
.overlay ul li a:hover, .overlay ul li a:focus {color: #D94943;}
.overlay ul li.current-menu-item a {color: #D94943;}
/* Effects */
.overlay-hugeinc {opacity: 0;visibility: hidden;-webkit-transition: opacity 0.5s, visibility 0s 0.5s;transition: opacity 0.5s, visibility 0s 0.5s;}
.overlay-hugeinc.open {opacity: 1;visibility: visible;-webkit-transition: opacity 0.5s;transition: opacity 0.5s;}
.overlay-hugeinc nav {-webkit-perspective: 1200px;perspective: 1200px;}
.overlay-hugeinc nav ul {opacity: 0.4;-webkit-transform: translateY(-25%) rotateX(35deg);transform: translateY(-25%) rotateX(35deg);-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;transition: transform 0.5s, opacity 0.5s;}
.overlay-hugeinc.open nav ul {opacity: 1;-webkit-transform: rotateX(0deg);transform: rotateX(0deg);}
.overlay-hugeinc.close nav ul {-webkit-transform: translateY(25%) rotateX(-35deg);transform: translateY(25%) rotateX(-35deg);}
@media screen and (max-height: 30.5em) { .overlay nav { height: 70%; font-size: 34px; } .overlay ul li { min-height: 34px; } }


/* -------------------------------- TINT */

.tint { position:relative; overflow:hidden}
.tint img, h2.preview-title   {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

.no-touch .tint:hover img {
-webkit-backface-visibility: hidden; /* Fix for transition flickering */
filter: alpha(opacity=70);
opacity:.7;
cursor:pointer;
}

.no-touch .xsingle .tint:hover img {
-webkit-backface-visibility: hidden; /* Fix for transition flickering */
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
filter: alpha(opacity=100);
opacity:1;
}

/* -------------------------------- domo */
.page-template.home #wrap { position:relative;}
.page-template.home #hello   {position: absolute;top: 50%;right:15px;transform: translateY(-50%);}
.page-template.home #hello p a {display:inline-block; border-bottom: 1px solid #a3a3a3;}

/* -------------------------------- blog */

ul#showtime {margin-bottom:1em;}
#showtime h2.entry-title {margin:.5em 0 0; padding-left:5px; display: inline-block}
.format-video .tint img {border-radius:15px;}

/* -------------------------------- blog single */


#aktuell .tint { max-width: 550px; margin-bottom:2em;}


p.caption-small {font-size: 14px;line-height:17px; margin-top:.5em;}

.attachment-medium{width:auto; height:auto; }

.feat-img .attachment-medium{
max-height:500px;}

ul#focus .attachment-medium {
max-height:175px;}

.feat-img {position:relative; margin-bottom:2em;}

.description {position:relative; margin-bottom:2em;}

/* -------------------------------- Info */
#visual {margin-bottom:2em;}
#intro p {margin-bottom:1em;}
.page .entry-content h2 {margin-bottom:1em;}


/* -------------------------------- List */
.list ul {
width: 100%;
max-width:420px;
list-style:none; list-style-position:inside;
margin-bottom:1.5em;
color: #fff;
}

.list ul li { padding-bottom:.5em;margin-bottom:.5em;}
.list  ul li:before { }

/* --------------------------------Impressum */

.imprint p {width: 100%; max-width: 600px; margin-bottom:1em;}


/* -------------------------------- Single NAV */
[data-icon=G]{ font-size:1.75em;}


.meta-nav img { max-width:100px; opacity:.5}

#nextprev a {color:#555;}
#nextprev a:hover, #nextprev a:focus {color:#fff;}
a:hover .meta-nav img, a:focus .meta-nav img {opacity:1;}

#nextprev.fixxed { margin: 0 0 2em; clear:both; }

#nextprev.fixxed span{
display:block;
margin-bottom:0;

}
.single h2.nav {padding-top:.5em;font-size:14px; line-height:16px;}
#nextprev a.all-fixed {position:absolute; top:0; left:50%; text-align:center; margin-left:-22px; width:44px;}
#nextprev a.next-fixed {position:static; float:left; max-width:45%}
#nextprev a.next-fixed span {}

#nextprev a.prev-fixed {position:static; float:right; text-align:right;max-width:45%}
#nextprev a.prev-fixed span {}

#nextprev a.next-fixed h2.nav  {margin-bottom:0;}


/* VIDEO */

video {
width: 100% !important;
height: auto !important;
}

li figcaption {display:block; text-align:center; margin-top:.5em;color: #888;}

.flex-video {
  position: relative;
  padding-top: 1.5625rem;
  padding-bottom: 67.5%;
  height: 0;
  margin-bottom: 1rem;
  overflow: hidden; }
  .flex-video.widescreen {
    padding-bottom: 56.34%; }
  .flex-video.vimeo {
    padding-top: 0; }
  .flex-video iframe,
  .flex-video object,
  .flex-video embed,
  .flex-video video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }


@media only screen and (min-width: 40.063em) {
.row {max-width:100%; padding-left: 35px; padding-right:35px}
.row .row, .row .row .row {padding:0;}

[data-icon=H], [data-icon=X] { font-size:2em;}
.overlay #overlay-close {top: 20px; right: 50px;}

/* Type */
#header h1 {font-size: 1.5em}
#header-inner { padding-top:20px; padding-bottom:10px; }
#content { margin-top:92px; padding-bottom:0; } /* 63 + 24 */

/* Headlines */
h2.page-title, h2.entry-title, .vcard h2 {font-size:1.5em;line-height:28px}
.blog h1.page-title {margin-bottom:1em}

.overlay {width: 50%;}
.home #header.fixed {background:none;}

#xshowtime .tint { max-width:86.6666%;}
#showtime h2.entry-title {margin-bottom:.5em;}

.feat-img .attachment-medium{max-height:575px;}
.meta-nav img {max-width:125px;}
.page-template.home #hello p a {font-size: 1.125em;}

.description {width: 100%; max-width: 650px;}

/* -------------------------------- Single NAV */
[data-icon=G]{font-size:2em; padding-top:.35em}

li figcaption {font-size:1.125em;}
}

@media only screen and (min-width: 64em) {
/* -------------------------------- blog */
.row {max-width:100%; padding-left: 50px; padding-right:50px}
.overlay #overlay-close {top:25px; right: 65px;}

.page-template.home #hello p a {font-size: 1.250em;}

/* Type */
#header h1 {font-size: 1.5em}
#header-inner { padding-top:25px; }
#content { margin-top:100px; padding-bottom:0; } /* 63 + 24 */
.page #content p {font-size: 1.125em;}

.blog h2 {font-size:1.5em;}
.single h2 {font-size: 1.625rem; margin-bottom: 1rem}
.blog h2, .single h2 {line-height:28px}

#showtime .tint {max-width:92%;}

.feat-img .tint {}
ul#focus .attachment-medium {
max-height:300px;}

.feat-img .attachment-medium{
max-height:375px;}

.description { max-width: 750px; margin-bottom:4em;}
.description p {font-size: 1.125em;}

}

@media only screen and (min-width: 75em) {
.row {padding-left: 100px; padding-right:100px}
.overlay #overlay-close {right: 115px;}
}

.cookie-notice-container a.button {
  border: 0;
	color: #777;
  display: inline-block;
  font-size: inherit;
  padding: 0;
  width: auto;
}

.cookie-notice-container a.cn-set-cookie {
	color: tomato;
  font-weight: 700;
  text-decoration: underline;
}

.cookie-notice-container a:hover {
  background: 0 0;
  color: #000;
}