/* =============================================================================
   HTML5 Boilerplate CSS: h5bp.com/css
   ========================================================================== */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
html, button, input, select, textarea {color: #333; }
body { margin: 0 auto; font-size: 1em; line-height: 1.4; }

::-moz-selection { background: #F98C06; color: #fff; text-shadow: none; }
::selection { background: #F98C06; color: #fff; text-shadow: none; }

a { color: #333;  }
a:visited { text-decoration: none;color: inherit }
a:hover { text-decoration: none   }
a:focus { outline: thin dotted; }
a:hover, a:active { outline: 0; }

abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; color: #666 }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; font-family: Futura, sans-serif }

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

ul, ol { margin: 1em 0; padding:0px;list-style: none}
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }

img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle;width: 100% }

svg:not(:root) { overflow: hidden; }

figure { margin: 0; }

form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
label {display: block}
legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
button, input { line-height: normal; }
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
button[disabled], input[disabled] { cursor: default; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; resize: vertical; }
input:valid, textarea:valid {  }
input:invalid, textarea:invalid { background-color: #f0dddd; }

table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }

.chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; }

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }


/*jQuery mobile additions for icons*/

/* loading icon */
.ui-icon-loading {
    background: url(images/ajax-loader.gif);
    background-size: 46px 46px;
}


/* START HOBEL THEME */
html {font-family: Times, serif;}
html::-webkit-scrollbar { width: 0 !important }

a {text-decoration: none}
header,.about {
    background: white;
    text-transform: uppercase;
    max-width: 250px;
    color: #333;
    margin:1em 0 0 0; 
    font-size: 80%;
}

footer {position: absolute; bottom: 1.5em;right: 5%;color: #F66801;letter-spacing: .075em;font-size: .75em}
footer a {text-decoration: none;opacity: .75;}
footer a:hover {opacity: 1;}

nav {margin-left: 1em}
a.homelink {font-weight: bold;font-style: normal}
nav ul li a span.active, nav ul li a:hover span {background: rgba(0,0,0,.85);color: white}
nav ul li a span {transition:all 0.2s ease-in-out;padding: .35em}


header {margin-left: -10px;}



.about {margin-bottom: 4em}
h1 {font-size: 1.75em;font-weight: lighter; margin-bottom: 0;margin-top: 0;}
#title {font-size: 1.275em;line-height: 1.75em}
nav ul {list-style: none;margin-top: 1em}
h1 a, nav ul li a {text-decoration: none}
nav ul li:first-child, nav ul li:last-child {margin-left: -1em;}
nav ul li {margin:1.125em 0;}
nav ul li a {display: block}
 
    h2#photo-title,h4#photo-location {
        position: absolute;
        text-transform: uppercase;
        letter-spacing: 1px;
        opacity: .9;
        display: block; 
    }
    h2#photo-title {
        left: 5.375%;
        top: -60px;
        font-size: 18px;
        font-weight: lighter;
    }
    h4#photo-location {
        left: 5.375%;
        top:-20px;
        margin: 0;
        font: bold 10px "Helvetica Neue",Arial,Helvetica,Geneva,sans-serif;
    }

.ui-collapsible {position: absolute;top:10px;background: white;opacity: 1;z-index: 1;width: 95%;}
.ui-collapsible.uico {top: -10px;padding-top: 3px}
.ui-collapsible-content {
margin: 0 10px;
padding: 0px 12px 10px;
height: 480px
}
img.homebild {margin: 120px 0 0 0}
.ui-collapsible-heading .ui-btn-inner, .ui-collapsible-heading .ui-btn-icon-left .ui-btn-inner {padding-left: 20px;}
.photoset {margin-top: 4em;}
.photoset li {width: 140px;margin: 0px 10px 10px 0px;float: left}
.wrap {margin: 0 auto; width: 90%}
.ui-btn-inner {white-space: normal;}

.contact {margin-top: 5em;font-size: 1.25em}

.flex-container {margin-top: 8em}
.flexslider {border: none}


.ui-collapsbile {max-width: 250px}



.contact a {color: #ECECEC;}
.contact a.onwhite {color: orange}
.contact p {margin: 0;padding: 1em 0;}
.fullscreen {position: fixed;top: 1.5%;right: 60px; width: 32px;opacity: .5;}

svg {margin: .2em 0 -.2em 1em}

.kontakt-box p a {line-height: 2.5em}

#message {transition:.625s all linear}

.about a {border-bottom: 1px solid #999999;transition:.3s all linear}
.about a:hover {border-bottom: 1px solid black}


.fullscreen {display: none}


.obar ul {display: none;margin:0 2em 0 0}


.outerflip {
	background: white;
	position: relative;
	width: 56px;
	height: 38px;
	border-radius: 5px;
	transition: all .38s ease-in-out;
	transform:scale(0.66);
}
.middleflip {
	background:black;
	position: absolute;
	width: 34px;
	height:22px;
	top:50%;
	left:50%;
	transform: rotate(-45deg);
	border-radius: 3px;
	transition: all .54s ease-in-out;
	margin-left: -17px;
	margin-top: -11px;
}
.innerflip {
	background:white;
	position: absolute;
	width: 14px;
	height: 20px;
	top:50%;
	left:50%;
	transform: rotate(45deg);
	border-radius: 2px;
	transition: all .75s ease-in-out;
	margin-left: -7px;
	margin-top: -10px;
}

.outerflip:hover, #title:hover .outerflip {transform: rotate(180deg);transform-style: preserve-3d;background: #474747}
.outerflip:hover .middleflip, #title:hover .middleflip  {transform: rotate(315deg);background: #ECEBE7}
.outerflip:hover .innerflip, #title:hover .innerflip  {transform: rotate(225deg);background: #474747}

.outerflip.footflip {background: black;}
.middleflip.footflip {background: white;}
.innerflip.footflip {background: black;}

.outerflip.footflip:hover {background: #FCBD28}
.outerflip.footflip:hover .middleflip.footflip {background: #F98C06}
.outerflip.footflip:hover .innerflip.footflip {background: #F66801}














/* 672px view */
@media only screen and (min-width: 42em) {
    .wrap {width: 100%;margin: 0}
    img.homebild {background: #000 url(img/Homebild2.jpg) center center fixed no-repeat; width: 100%;z-index: -9990;margin: 0;}
    #portfolio {background: black}
    body {min-height: 300px }
    .about, .kontakt-box {text-align: right; position: fixed; top: 64%; right: 0; margin: 1.5em 2em 0 2em;padding: 2em 72px 2em 2em;line-height: 1.625em}
    .kontakt-box {top: 40%;}
    h2#photo-title, h4#photo-location {position: absolute: 50px;top:100%;opacity: 1;color: #333;left: 60px}
    .ui-collapsible {margin: -10px 48px;width: 230px;}
    .ui-collapsible-heading .ui-btn-inner, .ui-collapsible-heading .ui-btn-icon-left .ui-btn-inner {padding-left: 30px;}
    header, .about {opacity: .75;}
    #portfolio header, #contact header {opacity: 1;}
    .flex-container {margin: 0}
    .contact {margin: 4em 0 0 0;font-size: 1.75em}
    .da-thumbs {width:670px;margin: 180px 0 0 50px;}
    .da-thumbs li img {width: 180px;}
    header, .about {opacity: .65;transition: 0.3s all linear;margin: -1em}
    header:hover, .about:hover {opacity: .9;}
    .ui-collapsible-content {margin: 0 10px 10px;padding: 0px 12px 10px;height: auto;}
    footer {right: 60px}
    .contact-details {position: absolute; top: 55%; left: 48px;background: white;opacity: .8;padding: 1.5em}
    .ui-collapsible.uico {top: 7px;}

}
/* 1024px view */
@media only screen and (min-width: 64em) {
    html {background: black}
    .fullscreen {display: block}
    .ui-collapsible {z-index: 100;position: fixed}
    h2#photo-title, h4#photo-location {top: 70%;color: white;text-shadow: 1px 1px 3px black;transition: 0.3s all linear;}
    h2#photo-title:hover, h4#photo-location:hover {background:black;padding: .75em;font-size: 1.25em}
    .kontakt-box {transition: .3s all linear;padding: 5em 72px 7em 7em}
    .kontakt-box:hover {font-size: .875em;top:10%;}
    

    
    .ui-body-c {background: black}
    header,.about {margin-top:0}
    .touchslider-viewport {background:cover;-moz-background:cover;width:auto;height:64em;overflow:hidden}
    .contact, .contact p a {color: white;opacity: .95;font-size: 1.25em;}
    .da-thumbs {width:984px;}
    .da-thumbs li img {width: 210px;}
    footer a {color: white;bottom: -1em;}
    .kontakt-box p a {line-height: 1.25em}
	.home-collapsible .ui-collapsible-content {display: block}

}
@media only screen and (min-width: 65em) {
    nav ul li {margin: .375em 0;}
    nav ul li:last-child {margin-top: 1em}
    nav ul li:first-child {margin-bottom: 1em}
}
@media only screen and (min-width:110em) {

	.flex-container {margin-top: -5em}
}

@media screen and (min-width: 934px) and (max-height:640px) {
	.flex-container {width: 96.75%;}
}