@import url('https://fonts.googleapis.com/css?family=Alegreya+Sans:100,100i,300,300i,400,400i,500,500i,700,700i,800,800i,900,900i');

/*! normalize.css v1.1.2 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}html,button,input,select,textarea{font-family:sans-serif}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}h2{font-size:1.5em;margin:.83em 0}h3{font-size:1.17em;margin:1em 0}h4{font-size:1em;margin:1.33em 0}h5{font-size:.83em;margin:1.67em 0}h6{font-size:.67em;margin:2.33em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}blockquote{margin:1em 40px}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}p,pre{margin:1em 0}code,kbd,pre,samp{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:0.9em}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:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}dl,menu,ol,ul{margin:1em 0}dd{margin:0 0 0 40px}menu,ol,ul{padding:0 0 0 40px}nav ul,nav ol{list-style:none;list-style-image:none}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure{margin:0}form{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0;white-space:normal;*margin-left:-7px}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;*overflow:visible}button[disabled],html input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;*height:13px;*width: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-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}

 /* ==========================================================================
   HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}
ul,li{
	padding:0;margin:0;
}
body {
    font-size: 1em;
    line-height: 1.4;
}
::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}
::selection {
    background: #b3d4fc;
    text-shadow: none;
}
hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}
img {
    vertical-align: middle;
}
fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}
textarea {
    resize: vertical;
}
.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}


/* ==========================================================================
   custom styles
   ========================================================================== */
   @font-face {
     font-family: 'bozon';
     src: url("Bozon-Regular.eot");
     src: url("Bozon-Regular.eot") format("embedded-opentype"), url("Bozon-Regular.woff") format("woff");
     font-weight: normal;
     font-style: normal;
   }

   @font-face {
     font-family: 'bozon-extrabold';
     src: url("Bozon-ExtraBold.eot");
     src: url("Bozon-ExtraBold.eot") format("embedded-opentype"), url("Bozon-ExtraBold.woff") format("woff");
     font-weight: normal;
     font-style: normal;
   }

   @font-face {
     font-family: 'bozon-bold';
     src: url("Bozon-Bold.eot");
     src: url("Bozon-Bold.eot") format("embedded-opentype"), url("Bozon-Bold.woff") format("woff");
     font-weight: normal;
     font-style: normal;
   }
strong{
  font-family: 'bozon-bold';
  color: #2b8197;
  font-size: 1.2em;
  line-height: 2em;
}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
body {
  font-family: 'bozon','Alegreya Sans', Helvetica, Arial, sans-serif;
  font-size: 18px;
  line-height: 24px;
  /*overflow:hidden;*/
  background:#f6f6f6;
  overflow-x: auto;
  overflow-y: scroll;

}
h1,
h2,
h3,
h4 {
  font-family: 'bozon-extrabold','Alegreya Sans', Helvetica, Arial, sans-serif;
}
button,input,select {
  font-family: 'bozon-bold','Alegreya Sans', Helvetica, Arial, sans-serif;
}
a:hover, a:active, a:focus, object, embed {
  outline: 0;
}
a{
	color: #2b8197;
	text-decoration: none;
}
a:hover{
	color: #888;
}
html,
body {
   margin:0;
   padding:0;
   height:100%;
   text-align: center;
}
#logo{
    height: 11em;
    width: auto;
    padding: 4em;
}
table{
  text-align: left;
  margin:0 auto;
  border:2px solid #b3b3b3;
  }

table tr:first-of-type{
  background: #b3b3b3;
}
table td{
  border-right: 2px solid #b3b3b3
}
table tr:not(:first-of-type):hover{
  background:#e1e1e1;
}
button{
  border-radius: 2em;
border: none;
background:#2b8197;
color:#fff;
padding:10px 20px;
}
button:hover{
  background: #888;
}
  #main{
  width:100%;
  max-width:900px;
  margin:0 auto;
}
.hides{
  width:0px;
  opacity: 0;
  position:absolute;
}
td, th{
  padding:10px;
}
.alignrigh{text-align: right;}
.counterValue{
  background:#2b8197;
  border-radius: 2em;
  padding:5px 10px;
  color: #fff;
  cursor: help;
}
label{
	-webkit-user-select: none; /* webkit (safari, chrome) browsers */
    -moz-user-select: none; /* mozilla browsers */
    -khtml-user-select: none; /* webkit (konqueror) browsers */
    -ms-user-select: none; /* IE10+ */
}
.drop-area{
	border: 16px solid #22a7ff;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 30;
background: #2e3336e6;
padding: 2em;
margin: 2em;
text-align: center;
top:0;
opacity:1;
pointer-events:none;
}
.drop-area.show{
	top:0;
	/*pointer-events:auto;*/
	opacity:1;
}
.drop-area span{
	margin: 0 auto;
display: inline-block;
position: relative;
font-size: 3em;
color: #fff;
font-weight: 300;
top: 45%;
}


#processWrapper{
	position: relative;
width: 100%;
top: 25px;
}
.progress{
	position: absolute;
height: 20px;
background: #555;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
padding: 10px;
box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
z-index: 13;
width: 100%;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
color:#fff;
}
.progress:before{
	content: attr(data-pct);/*"Uploding";*/
position: absolute;
top: -45px;
left: 0;
width: 100%;
text-align: center;
color:#656565;
}
.progress > span {
  display: block;
height: 6px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: #22a7ff;
background-image: linear-gradient( center bottom, rgb(43,194,83) 37%, rgb(84,240,84) 69% );
box-shadow: inset 0 2px 9px rgba(255,255,255,0.3), inset 0 -2px 6px rgba(0,0,0,0.4);
position: relative;
z-index: 58;
top: -3px;
}




#maincontainer > *{
 /*  display: inline-block;
    height: 100%;
    width: 100%;
    overflow: auto;
    padding: 0;
    position: absolute;*/
}
#maincontainer > .show{
	z-index:1;
}
#maincontainer > * aside#project-col{
	display:none;
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
#loader,
.loader {
  -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    animation: 1s linear 0s normal none infinite running spin;
    border-color: white rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.2);
    border-image: none;
    border-radius: 50%;
    border-style: solid;
    border-width: 0.25rem;
    display: none;
    height: 24px;
    margin: 0 13px;
    position: relative;
    top: 7px;
    width: 24px;
}
#loader.show,
.loader.show{
	display:inline-block;
}
body > .row.header > header > .contentWidth{
	z-index:2;
}
body > .row.header > header nav > ul{
	padding:2em;
	line-height:0;
}
body > #maincontainer footer nav > ul{
	margin:1em 0 1em 1em;
	line-height:0;
}
body > .row.header > header nav > ul a{
	padding:1em;
	color:#aaa;
  border-bottom:2px solid #fff;
}
body > .row.header > header nav > ul a:hover{
	color:#2b8197;
	border-bottom:2px solid #2b8197;
}
body > .row.header > header nav > ul i{
  padding: 1em 1em 1em 1em;
line-height: 0;
color: #aaa;
display: inline;
margin-right: -1em;
}
body > .row.header > header nav > ul i:hover{
  color:#2b8197;
  cursor:pointer;
}
body > #maincontainer footer nav > ul a{
	padding:1em;
	color:#222;
}
body > #maincontainer footer a{
	padding:1em 0;
	color:#222;
}
body > #maincontainer footer nav > ul a:hover{
	color:#ababab;
}
body > .row.header > header nav > ul li,
body > #maincontainer footer nav > ul li{
	display:inline-block;
}
body > .row.header > header nav > ul li+li{
	margin-left:.5em;
}
body > #maincontainer footer nav > ul li+li{
	margin-left:0em;
}

body > .row.header > header nav{
	display: inline-block;
    position: absolute;
    right: 0;
    top:20%;
}
body > #maincontainer footer nav{
	display: inline-block;
    position: absolute;
    right: 0;
    top:0;
}
body > .row.header{
  background:#fff;
  padding: 0 1em;
}
#logoWrapper{
	font-size: 2em;
	margin: .67em 0;
}
body > .row.header > header #logoWrapper{
	display: block;
	margin: 0 auto;
	padding: 1.2em;
	text-align: center;
}
body > #maincontainer footer .logoSmall{
	display: inline-block;
}
body > .row.header > header #logoWrapper img{
	height:4em;
	width:auto;
	padding:0 /*2em*/;
}
body > #maincontainer footer .logoSmall svg{
	height:2em;
	width:auto;
	padding:0 1em;
}
body > #maincontainer footer hr{
  border-top-color: #222;
  margin:1em;
}
body > #maincontainer footer p{
  margin: 0 1em;
}
@media only screen and (max-width: 750px) {
  body > .row.header > header #logoWrapper, body > #maincontainer footer .logoSmall {
    text-align: center;
    width: 100%;

    }
    body > .row.header > header nav,
    body > #maincontainer footer nav {
      position: relative;
      width: 100%;
      text-align: center;
  }
  body > .row.header > header nav > ul{
    line-height: 2em;
    width: 100%;
    margin: 0em;
  }
  body > #maincontainer footer nav > ul{
    line-height: 1em;
    width: 100%;
    margin: 0em;
  }
  body > .row.header > header nav > ul li,
  body > #maincontainer footer nav > ul li{
    margin: .6em 0;
  }
  body > .row.header > header nav > ul li + li,
  body > #maincontainer footer nav > ul li + li {
    margin-left: 0;
}
body > #maincontainer footer nav{
  margin-top: 1em;
}
body > #maincontainer footer{
  padding-bottom: 0em;
}
body > #maincontainer footer p{
  width: 100%;
  margin: 0;
  padding: 0 1em;
  text-align: center;
  }
  body > #maincontainer footer .slinks {
    float: none;
    width: 100%;
    margin: 1em 0!important;
    text-align: center;
  }
}
*[name=login_form]{
	display:block;
	margin:1em auto;
	width:300px;
}
form#login{
  width: 100%;
  max-width: 500px;
  margin: 0 auto;;
}
form#login input{
  width:100%;
  margin-bottom: 1em;
padding: .8em;
}
*[name=login_form] input,
form input[type="password"]{
	width:100%;
	margin-bottom:1em;
	padding:.8em;
  margin-top: 1em;
text-align: center;
}
form input[type="submit"]{
	margin: 1em 0 4em;
font-size: 1.3em;
padding: .5em 1.7em;
border-radius: 2em;
background: #2b8197;
border: none;
color: #fff;
}
.contentWidth{
	margin: 0 auto;
    max-width: 1440px;
    position: relative;
    padding: 0 1.4em;
}
.contentWidth.maxWidth{
    max-width: 1363px;
}
.contentWidth.minWidth{
    max-width: 900px;
}
.contentWidth.pwWidth{
    max-width: 500px;
}
div.bg_big{
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: .4;
}
.hide{
	display:none;
}
.freeze{
	overflow:hidden;
	width:100%;
	height:100%;
}
.mask{
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background:#000;
	opacity:0;
	visibility: hidden;
	pointer-events:none;
	cursor:pointer;
}
.mask.show{
	opacity: .5;
    pointer-events: auto;
    visibility: visible;
    z-index: 5;
}
.fullWidth{
	background-image: url('https://2017.marco.wtf/img/g0060392-1.jpg');
min-height: 400px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;

}
.center{
	text-align:center;
}
.slinks{
	margin-top: 1em; /*-1.1em;*/
}
.slinks .fa-envelope-o{
  bottom: 2px;
position: relative;
}
.view-admin dt{
	font-weight:bold;
}
.view-admin dd{
	margin: 0 0 1.4em;
}
.view-admin textarea{
	width: 100%;
height: 420px;
padding: 1em;
border: 2px solid #dbdbdb;

}
.view-admin .thxTxt{
	padding: 1em 0 0 1em;
	background:#fff;
	border: 2px solid #dbdbdb;
}
.view-admin .thxTxt textarea{
	border:none;
	padding-left:0;
	margin: 0;
}
.hint{
	font-size:.8em;
	color:#aaa;
}
.view-admin input[type=text]{
	width:100%;
	padding:.5em;
}
#imgList{
	border: 1px solid #a5a5a5;
padding: 1em;
}
#imgList li{
  display: inline-block;
margin: 0 20px 20px 0;
}
#imgList li.center{
	display:block;
	line-height: 3;
padding: 2em 1em 1em;
}
#imgList li img{
  width:120px;
  height:auto;
}
body > #maincontainer footer .slinks{
  float:right;
  margin-right: .6em;
  margin-top:-0.6em;
  display:inline-block;
}
body > #maincontainer footer p{
	display:inline-block;
}
body > #maincontainer footer .social_links{
  background: none;
color: #222;
width: auto;
height: auto;
padding: 0.6em;
margin: 0;
font-size: 1em;
}
body > #maincontainer footer .social_links:hover{
  color:#ababab;
}
body > #maincontainer footer .logoSmall:hover #Marco path{
  fill:#ababab;
}
.social_links{
	background: #000;
color: #fff;
border-radius: 100%;
vertical-align: baseline;
width: 1.8em;
height: 1.8em;
display: inline-block;
text-align: center;
border-radius: 32px;
padding: .2em;
margin: 0 .4em;
font-size: 1.2em;
}
#modalbox{
	display:block;
	width:90%;
	max-width:1200px;
	height:90vh;
	position:fixed;
	top:5vh;
	left:5%;
	background: #444;
	overflow: auto;
	z-index: 10;
}
#modalbox.hide{
	display:none;
}
#modalbox.small{
	max-width:400px;
  max-height:400px;
  top:50%;
  left:50%;
  -moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
#modalbox #imgBox,
#modalbox #imgBoxSimple{
	position:absolute;
	top:10px;
	bottom:50px;
	left:10px;
	right:10px;
	overflow-y:auto;
	text-align: center;
}
#modalbox #imgBox img,
#modalbox #imgBoxSimple img{
	width:220px;
	height:auto;
	cursor:pointer;
}
#modalbox #imgBox img.use{
	opacity:0.5;
	background:#c25;
}
#modalbox .modalButtons{
	position:absolute;
	bottom:10px;
	right: 10px;
}
#modalbox #chooseLayout{
	text-align:center;
}
#modalbox #chooseLayout img{
	width:220px;
	height:auto;
}

#modalbox #imgBoxMulti table img{
	width:200px;
	height:auto;
}
#modalbox #linkBox{
  position:absolute;
  top:10px;
  bottom:50px;
  left:10px;
  right:10px;
  overflow-y:auto;
  text-align: center;
}
#editPost dt{
display:inline-block;
width:20%;
margin-bottom: 1.5em;
vertical-align: top;
}
#editPost dd{
display:inline-block;
width:70%;
margin-bottom: 1em;
vertical-align: top;
position: relative;
}
#editPost dd input{
  width:100%;
  padding:2%;
  margin-top: -2%;
  margin-bottom:2em;
}
#editPost dd select{
  padding:2% 8% 2% 2%;
  margin-top: -2%;
  margin-bottom:4%;
}
#editPost dd > ul {
  margin-top: -3%;
  margin-bottom: 8%;
}
#editPost dd > ul li{
  display: inline-block;
  margin-right: .3em;

}
#editPost #headerSimu{
  display:block;
  width:100%;
  padding-bottom:60%;
  height: auto;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #ccc;
  cursor:pointer;
}
#editPost textarea{
width: 100%;
  padding: 20px;
background: inherit;
border: 2px solid #ddd;
}
#editPost #editControls{
  position: fixed;
left: 0;
bottom: 0;
width: 100%;
z-index: 1;
display: block;
padding: 1em;
background: #444;
text-align: center;
}
#editPost #addCreditImg{
  position: absolute;
right: 61px;
padding: 15px 10px 10px 10px;
background: #2b8197;
border: none;
height: 61px;
width: 61px;
color: #fff;
bottom: 2em;
}
#editPost #clearCreditImg{
  position: absolute;
right: 0;
padding: 15px 10px 10px 10px;
background: #880000;
border: none;
height: 61px;
width: 61px;
color: #fff;
bottom: 2em;
}
#editPost #addCreditImg:hover,
#editPost #clearCreditImg:hover{
  background:#ccc;
}
iframe.preview{
  width:50%!important;
  display:inline-block;
  float:right;
}
iframe.preview ~ textarea {
  width:50%!important;
  display:inline-block;
  float:left;
}
body > .row > header{
	background: #fff;
}
footer{
  background:#444;
  padding: 2em 0;
}
#adminMenu{
  position: relative;
top:0;
text-align: right;
background: #444;
max-width: 100%;
}
#adminMenu li{
  display:inline-block;
  padding:10px;
}
#adminMenu li a{
  padding: .5em;
border: none !important;
margin: 0 0 0 -1em;
}
#searchbox{
  position: absolute;
right: 3.7em;
top: .9em;
max-width: 800px;
overflow: hidden;
display: block;
vertical-align: baseline;
line-height: 0;
-webkit-transition: all .6s ease;
-moz-transition: all .6s ease;
-ms-transition: all .6s ease;
-o-transition: all .6s ease;
transition: all .6s ease;
}
#searchbox input{
  padding: .4em .6em;
  width: 600px;
}
#searchbox input:focus {
    outline: none!important;
    border:1px solid #eee;
}
#searchbox.hide{
  display:block;
  max-width:0;
}
#livesearch{
  max-height: 300px;
overflow-y: auto;
max-width: 700px;
}
#livesearch a{
	display:block;
  background: #fff;
  white-space: nowrap;
  width: 100%;
display: inline-block;
border:none;
}

#livesearch a:hover{
  border:none;
}
#livesearch a.selected{
  background:#2b8197;
  color:#fff;
  border:none;
}
#livesearch a i{
  line-height: 0;
  margin-right: 10px;
}


.headerImg{
height: 30em;
width: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-image: url('https://2017.marco.wtf/img/s1.png');
}

.headerImg.broken{
  text-align: center;
  padding: 4em 1em 6em;
  font-size: 3em;
  height: 9em;
  color: #fff;
  font-weight: bold;
  background-image: none;
  background-color: #2b8197;
}

.postlist .headerImg{
  width: 100%;
  height: auto;
  padding-bottom: 60%;
}
.collums_left,
.collums_right{
	width:47%;
	float:left;
	position:relative;
}.collums_left{
	margin-right:4%;
}
.collums_right{

}
.collums_left img,
.collums_right img{
	width:100%;
	height:auto;
}
hr.devider{
	clear: both;
top: 2em;
position: inherit;
content: ".";
margin: 3em 0;
}
iframe{
	border:none;
}
.row{
	padding: 2em 1em;
}
#maincontainer .row.you .contentWidth > p{
  max-width:630px;
  margin: 0 auto 1.4em;
}
.row.you{
  background:url('https://2017.marco.wtf/img/about-you-5.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: relative;
}
.row.you .contentWidth{
  z-index: 1;
}
.row.you .credit,
.credit{
  z-index: 1;
  background-color: rgba(0,0,0,0.5);
  color: rgba(255,255,255,0.6)!important;/*white!important;*/
  text-decoration: none;
  padding: 4px 6px;
  font-size: .8em;
  line-height: 1.2;
  display: inline-block;
  border-radius: 3px;
  position: absolute;
  right: 1em;
  bottom: 1em;
  cursor:pointer;
}
.row.you .credit:hover,
.credit:hover{
  color: rgba(255,255,255,1)!important;/*white!important;*/
}
.row.you .credit span,
.credit span{
  max-width: 0;
overflow: hidden;
display: inline-block;
height: 21px;
top: 4px;
cursor:pointer;
position: relative;
z-index: 2;
}
.row.you .credit:hover span,
.credit:hover span{
  max-width:2000px;
  margin: 0 0 0 4px;
}
.row.you .overlay{
    background: rgba(255,255,255,.5);
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.row.shortOnMobile{
  max-height:500px;
  overflow: hidden;
  position: relative;
  -webkit-transition: max-height .4s ease;
  -moz-transition: max-height .4s ease;
  -ms-transition: max-height .4s ease;
  -o-transition: max-height .4s ease;
  transition: max-height .4s ease;
}
.row.shortOnMobile.full{
  max-height:20000px;
  padding-bottom: 220px;
}
.row.more{
  display:none;
}
.row.shortOnMobile.full .more{
  background:none;
}
.row.shortOnMobile .more span{
  color:#7cbfe1;

}
.row.shortOnMobile .more{
  position: absolute;
    cursor:pointer;
  bottom: 0;
  left:0;
  width:100%;
  height:300px;
  display: block;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f6f6f6+0,f6f6f6+100&0+0,1+31 */
background: -moz-linear-gradient(top, rgba(246,246,246,0) 0%, rgba(246,246,246,1) 31%, rgba(246,246,246,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(246,246,246,0) 0%,rgba(246,246,246,1) 31%,rgba(246,246,246,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(246,246,246,0) 0%,rgba(246,246,246,1) 31%,rgba(246,246,246,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00f6f6f6', endColorstr='#f6f6f6',GradientType=0 ); /* IE6-9 */
padding: 170px 0 80px;
text-align: center;
}
.row.shortOnMobile.akzent .more{
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#d4d4d4+0,d4d4d4+100&0+0,1+25 */
background: -moz-linear-gradient(top, rgba(212,212,212,0) 0%, rgba(212,212,212,1) 25%, rgba(212,212,212,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(212,212,212,0) 0%,rgba(212,212,212,1) 25%,rgba(212,212,212,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(212,212,212,0) 0%,rgba(212,212,212,1) 25%,rgba(212,212,212,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00d4d4d4', endColorstr='#d4d4d4',GradientType=0 ); /* IE6-9 */
}
.row:not(.you):after{
	content: ".";
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

/* wenn zwei gleiche reihen hintereinander kommen, unterteile sie mit einer horizontalen linie */
.row:not(.akzent)+.row:not(.akzent) .contentWidth{
	border-top: 1px solid #d8d8d8;
padding-top:1em;

}
.row.akzent{
	background: #d4d4d4;
}
.row.akzent .devider{
	border-top-color: #aaa8a8;
}
#maincontainer p{
	margin: 0 0 1.4em 0;
}
#latestTracks{
	padding: 1em;
background: #fff;
font-size: .8em;
font-weight: 300;
height: 700px;
text-align:center;
}
#latestTracks .loader{
	border-color: black rgba(0,0,0, .2) rgba(0,0,0, 0.2);
z-index: 2;
position: absolute;
top: 50%;
margin:0;
}
#latestTracks ul{
	max-height:600px;
overflow-y: auto;
list-style: none;
margin: 1em 0 0;
text-align:left;
}
#latestTracks ul li{
	margin:2px 0;
}
#latestTracks ul li a{
width: calc(67% - 37px);
display: inline-block;
white-space: nowrap;
margin: 0 0 0 7px;
overflow: hidden;
vertical-align: middle;
}
#latestTracks ul li .date{
	float:right;
	top: 3px;
position: relative;
}
#latestTracks img{
  width: 34px;

  height: 34px;
}
#latestTracks .img{
	width: 34px;
height: 34px;
display: inline-block;
color:#fff;
padding: 3px;
text-align: center;

/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#cbebf4+0,0fb4e7+100 */
background: #cbebf4; /* Old browsers */
background: -moz-linear-gradient(-45deg, #cbebf4 0%, #0fb4e7 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #cbebf4 0%,#0fb4e7 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #cbebf4 0%,#0fb4e7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cbebf4', endColorstr='#0fb4e7',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */



}
#latestTracks #more{
	position: absolute;
bottom: 0;
width: 100%;
left: 0;
text-align: center;

/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+98&0+0,1+65 */
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 65%, rgba(255,255,255,1) 98%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 65%,rgba(255,255,255,1) 98%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 65%,rgba(255,255,255,1) 98%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
padding: 42px 0 10px;
}
.videoPlaceholder{
  clear: both;
  text-align: center;
  /*min-height: 300px;*/
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
  padding-bottom:56.25%; /* (höhe / breite) * 100%*/
}
.videoPlaceholder .play{
  background:none;
  border:none;
  font-size:4em;
  color:#fff;
  position:absolute;
  top:0;bottom:0;left:0;right:0;
  padding:0;
  margin:0;
  width:100%;
  background:rgba(0,0,0,0.23);
}
.videoPlaceholder .play:hover{
  -moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}
.number{
  font-weight:600;
  font-size:1.2em;
}
.button,
.cta{
  color: #ffffff;
      background: #ff6b5a;
      border-radius: 100px;
      padding: 5px 18px;
      margin: 5px;
      display: inline-block;
      font-size: .9em;
}
.cta{
  margin-left:auto;
  margin-right:auto;
  display:table;
}
.button.mailme{
  display:none;
}
.button:hover,
.cta:hover{
  color: #ffffff;
      background: #888;
}


#maincontainer > div > article .postlist li a.label{
  border-width: 0px !important;
border-color: rgba(0,0,0,0);
border-radius: 42px;
font-size: 16px;
background-color: #7a7a7a;
color:#fff;
padding: 0.3em 1em !important;
margin: 0 5px;
}

#maincontainer > div > article .postlist li a.tags{
font-size: 20px;
color: #7a7a7a;
padding: 0;
margin: 0;
border-bottom: 1px solid #d5d5d5;
display: inline-block;
}
#maincontainer > div > article .postlist li a.tags:hover{
	color: #2b8197;
}

#maincontainer > div > article > *{
	max-width:800px;
	margin: auto;
	padding: 0 20px;
	display:block;

}
#maincontainer > div > article > h1{
  margin-top:1em;
  text-align:center;
}
#maincontainer > div > article > .postmeta{
  text-align:center;
  margin-top:0;
  line-height:2em;
}
#maincontainer > div > article .postmeta a{
  border-width: 0px !important;
border-color: rgba(0,0,0,0);
border-radius: 42px;
font-size: 16px;
background-color: #7a7a7a;
color:#fff;
padding: 0.3em 1em !important;
margin: 0 5px;
}
#maincontainer > div > article > pre{
	margin: 0 auto 20px;
	padding: 0 20px;
}
#maincontainer > div > article > ul,
#maincontainer > div > article > ol
{
	padding-left:40px;
}
#maincontainer > div > article > blockquote.variation p
{
	margin-left: -13px !important;
	padding-left: 11px;
}
#maincontainer > div > article > section{
	line-height:1.6;
	font-size:1.2em;
	font-weight:100;
}
#maincontainer > div > article > section img{
	width:100%;
	height:auto;
}
article + article:before{
	content:"• • •";
	text-align:center;
	display:block;
	margin-bottom:45px;
	font-size: 1.6em;
	font-weight: 400;
}
#maincontainer > div > article a {
    border-bottom: 2px solid #c8c8c8;
    text-decoration: none;
}
#maincontainer > div > article p:not(.postmeta),
textarea{
	margin: 1em auto 2em;
  font-family: 'Georgia',serif;
font-size: .9em;
line-height: 1.7em;
}
figure img{
	width:100%;
	height:auto;
}
figure figcaption{
	color:#888;
	font-size:0.8em;
	margin-top:10px;
}
figure figcaption {
  pointer-events: none;
}
figure figcaption a {
  pointer-events: all;
}
.justified figure figcaption ,
.inlinegal figure figcaption {
	display:none;
}
.inlinegal figure{
	height:inherit;

}

figure figcaption:empty{
	margin:0;
}
.left-out,
.right-out{
	width: 43%;
	padding-bottom: 10px;
}
.left-out{
	margin-left: -160px;
	float: left;
    margin-right: 30px;
}
.right-out{
	margin-right: -160px;
	float: right;
    margin-left: 30px;
}
.overlap{
	max-width:1020px!important;
/*	margin-left:-160px;*/
}
figure.overlap{
	max-width:1040px!important;
}/*
blockquote{
	font-style:italic;
	font-weight:400;
	border-left: 3px solid rgba(0, 0, 0, 0.8);
    margin-left: -23px;
    padding-bottom: 3px;
    padding-left: 20px;
}*/
blockquote p{
    font-size: 1.5em;
    font-weight: 100;
    font-style: italic;
    width: 80%;
    margin: 50px auto;
    border: none;
    padding: 0;
}
blockquote.variation p{
	width:100%;
	font-size: 1em;
    font-style: italic;
	font-weight: 400;
	border-left: 3px solid rgba(0, 0, 0, 0.8);
	margin-left: -23px!important;
	padding-bottom: 3px;
	padding-left: 20px;
}/*
blockquote{
	font-size:1.5em;
	font-weight:100;
	font-style:italic;
	width:80%;
	margin:50px auto;
	border:none;
	padding:0;
}*/

@media only screen and (max-width: 1020px) {
	.left-out,.right-out{
		margin-left: 0px;
		width: 100%;
		float: none;
	    margin-right: 30px;
	    padding-bottom: 10px;
	    padding-top: 10px;
	}
	.overlap{
		width:100%;
		margin-left:0;
	}
	blockquote{
		margin-left: -14px;
    	padding-left: 11px;
	}
  #maincontainer .row.you .contentWidth blockquote{
    margin: auto;
  }
}

form[name='comment_form'] input[type='text'],
form[name='comment_form'] input[type='email']{
	width:100%;
	padding:2%;
	margin-bottom:1em;
}
form[name='comment_form'] textarea{
	width:100%;
	padding:2%;
	margin-top:0;
	font-family: 'bozon','Alegreya Sans', Helvetica, Arial, sans-serif;
}
form[name='comment_form'] #companyWrapper{
	width:0px;height:0;	overflow:hidden;
}
form[name='comment_form'] input[type='submit']{
  color: #ffffff;
      background: #ff6b5a;
      border-radius: 100px;
      padding: 11px 24px;
      margin: 5px;
      display: inline-block;
      border-width: 0;
}
form[name='comment_form'] input[type='submit']:hover{
  color: #ffffff;
      background: #888;
}
form[name='comment_form'] input[type='checkbox']{
  width: 30px; /*Desired width*/
  height: 30px; /*Desired height*/
  cursor: pointer;
  vertical-align: text-bottom;
}
.allow-cookie-message{
  max-width: 400px;
  position:fixed;
  top:50%;
  left:50%;
  background:#ccc;
  padding:2em;
  z-index:6;
  line-height: 1.4;
  -moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.allow-cookie-message h4{
  margin-top:.2em;
}
.allow-cookie-message button{
  width:100%;
  margin:0 0 .5em;
}
.view-datenschutz ul{
margin:0 0 1em;
padding: 0 0 0 1em;
}
.view-datenschutz ul li{
  margin:.3em 0 0 ;
}
.view-datenschutz h3{
  margin: 3em 0 0 0;
}
.view-datenschutz #maincontainer p{
  margin:1em 0 0em;
}
.view-about h2.moin{
  margin-top: 0;
}
.view-about h2:after{
	content: " ";
width: 40px;
height: 0;
border-top: 4px solid #ff6b5a;
display: block;
margin-top: 10px;
}
.contentWidth.center {
  text-align: center;
}
.view-about.center h2,
.view-about .center h2{
  text-align: center;
}
.view-about.center h2:after,
.view-about .center h2:after{
margin: 10px auto;
}
.view-about blockquote p{
  width:100%;
}
#comments{
	max-width: 800px;
	padding:20px;
margin: 0 auto;
}
#comments ul{
	list-style:none;

}
#comments ul:not(:empty){
	padding-bottom:2em;
	margin-bottom:2em;
	border-bottom:1px solid #888;
}
#comments ul li{
	padding:1em;
	margin: 1em 0;
	background:#fff;
	word-wrap: break-word;
}

#comments ul li.new{
  -webkit-animation: newComment 6s;  /* Safari 4.0 - 8.0 */
  -webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
  animation: newComment 6s;
  animation-fill-mode: forwards;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes newComment {
  0% {background:#fff;}
  7% {background: #fceba4;}
  100% {background:#fff;}
}

@keyframes newComment {
	0% {background:#fff;}
  7% {background: #fceba4;}
  100% {background:#fff;}
}


.view-images #imgOverview{

}
.view-images #imgOverview li{
	display:inline-block;
	width:300px;
	height:450px;
	background:#fff;
	margin:0 1em 1em 0;
	padding:0.3em;
	vertical-align:top;
}
.view-images #imgOverview li .thumb{
	background-size:contain;
	background-repeat:no-repeat;
	background-position: center center;
	width:280px;
	height:280px;
	display:block;
}

#maincontainer > div > article > .postlist{
  padding: 0;
margin: 40px 0 0;

}
.postlist li{
  display: inline-block;
margin: 0 40px 40px 0;
color: #aaa;
font-weight: 300;
line-height: 1.4em;
width: 313px;
height: 360px;
background: #fff;
overflow: hidden;
}
.postlist li a{
  position: relative;
}
.postlist li a:hover{
  opacity:0.7;
}
.postlist li a .status{
  position: absolute;
  top:20px;
  left:10px;
  z-index: 1;
}
.postlist li .meta{
  padding:20px 10px 10px;
  text-align:center;
  position: relative;
}
.postlist li .editLink{
  position:absolute;
  top:-33px;
  right:10px;
}
.postlist li:nth-child(3n){
  margin-left:0;
}
.postlist li:nth-child(3n+3){
  margin-right:0;
}
#maincontainer > div > article .postlist li a{
	border: none;
}
.postlist li.private{
	opacity:.6;
}
.postlist h2{
  margin: 0.1em 0;
font-size: 1.2em;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tags a.label{
	border-bottom: none;
text-decoration: none;
background: #96adc0;
padding: 1px 9px;
border-radius: 4px;
margin: 0 2px;
box-shadow: 0px 0px 18px -11px #444;
color: #fff;
font-weight: 300;
}
.paging{
	text-align:center;
}
.paging > p{
	font-size:1em;
}
#maincontainer > div > article .paging > p > a,
#maincontainer > div > article .paging > p > span{
	padding: 9px 20px;
	text-decoration: none;
	border: none;
	background: #d6eaf3;
	display: inline-block;
	line-height: 1.2em;
	text-align: center;
	margin:8px;
}
#maincontainer > div > article .paging > p > span{
	background: #ccc;
	color:#aaa;
	opacity:0.2;
}
iframe{
	background:#333;
}

/* ANIMATION */
button,tr,a,
.mask,
.postlist li a,
.videoPlaceholder .play,
.button,
.cta,
form[name='comment_form'] input[type='submit'],
body > .row.header > header nav > ul a,
body > #maincontainer footer nav > ul a,
body > #maincontainer footer .social_links,
body > #maincontainer footer .logoSmall:hover #Marco path,
.row.you .credit span,
.credit span,
body > .row.header > header nav > ul i,
#editPost #addCreditImg,
#editPost #clearCreditImg,
#auswahlGrid li .select:not(.disabled) span.hover,
.lg-sub-html button.select span.hover,
#auswahlGrid li .img .hoverImg,
.lg-inner .lg-item img
{
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}





/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (max-width: 1035px) {
  .postlist{
    display: grid!important;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-column-gap: 40px;
  }
  .postlist li{
    width: 100%;/*98 %*/
    grid-column: span 1;
    display:inline-block;
    height:auto;
    overflow:auto;
    padding-bottom:1em;
  }
}

@media only screen and (max-width: 800px) {
  .button,
  .cta {

      margin-left: auto;
      margin-right:auto;
      display: table;

  }
	  .collums_left,
  .collums_right{
  	float:none;
  	width:100%;
  }
  #portrait{
    max-width:290px;
  }
  #portrait_wrapper{
    max-width:290px;
    margin:auto;
  }
  #portrait_wrapper .credit{
    font-size: .64em;
    padding: 0px 6px 4px;
    }
    #portrait_wrapper .credit span{
      top:7px;
    }
  .slinks {
    margin-top:1em;
    margin-bottom:1em;
}
.social_links {
    margin: 0.4em .4em;
}
.view-about h2{
  text-align: center;
}
.view-about h2:after{

margin: 10px auto;

}
  #latestTracks {
	max-height:400px;
	}
	#latestTracks ul{
		max-height:300px;
	}
	.row:not(.akzent) + .row:not(.akzent) {
	    padding-top: 0em;
	}
}

@media only screen and (min-width: 600px) and (max-width: 1035px) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .postlist{
    display:-ms-grid!important;
    -ms-grid-columns:1fr 1fr;
  }
  .postlist li{width: 98%;}
  .postlist li:nth-child(2n+2){margin-left:2%;}
  .postlist li:nth-child(2n){-ms-grid-column:1;}
  .postlist li:nth-child(2n+2){-ms-grid-column:2;}
  .postlist li:nth-child(3n), .postlist li:nth-child(4n){-ms-grid-row:2;}
  .postlist li:nth-child(5n), .postlist li:nth-child(6n){-ms-grid-row:3;}
  .postlist li:nth-child(7n), .postlist li:nth-child(8n){-ms-grid-row:4;}
  .postlist li:nth-child(9n), .postlist li:nth-child(10n){-ms-grid-row:5;}
  .postlist li:nth-child(11n), .postlist li:nth-child(12n){-ms-grid-row:6;}
}

@media only screen and (max-width: 600px) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .postlist{



  }

  .postlist li{width: 98%;}
}




/*@media only print and (-o-min-device-pixel-ratio: 5/4),
       only print and (-webkit-min-device-pixel-ratio: 1.25),
       only print and (min-resolution: 120dpi) {*/
@media print {
    body{
    	font-size:14px;
    }
	body > #maincontainer footer{
		position: relative;
		text-align: center;
	}
	body > #maincontainer footer a.logoSmall[href]:after,
	#logoWrapper a[href]:after{
        content: "";
    }
    body > #maincontainer footer .slinks a[href]:after {
        content: "(" attr(href) ")";
    }
	body > #maincontainer footer nav,
	body > .row.header > header nav{
		display:none;
	}
	body > .row.header{
		text-align: center;
	}
	form[name="comment_form"]{
		display:none;
	}
	.headerImg{
		display:none;
	}
	#portrait_wrapper ~ .slinks .social_links{
    display: block;
    margin: .4em;
    text-align: left;
    font-size: .8em;
    width: 100%;
	}

	#portrait_wrapper ~ .slinks .social_links:after{
float:left;
display:inline-block;
    position: absolute;
    content: "\00a0 \00a0  →  \00a0 \00a0 " attr(href);
	}

	.videoPlaceholder{
		display:block;
	}
	.videoPlaceholder:after{
		content: "Video: " attr(data-src);

	}
	.more span{
		display:none;
	}
	#latestTracks{
		height:6cm;
		overflow:hidden;
	}
	.row.you .credit{
		display:none;
	}
}

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

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    * {

        color: #222 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }
    *:not(.videoPlaceholder){
    	background: transparent !important;
    }

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

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

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

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

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

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

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

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 1.7cm 0.8cm;
    }

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

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