@import url('https://fonts.googleapis.com/css2?family=Ropa+Sans:ital@0;1&display=swap');

body {
	font-family: 'Ropa Sans', 'Trebuchet MS', Arial, sans-serif;
	font-size: 17px;
	color: #333333;  /* default font-color */
	line-height: 1.6em;
	font-weight: 400;
	letter-spacing: 0.25px;

	/* BG orig */
	background-color: #dcdcdc;
	/*background: url(../img/bg_green.jpg);
	background-position: center top;
	background-repeat: no-repeat;*/

	/* BG my cover */
	/*background: url(../img/bg_green.jpg) no-repeat fixed center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;*/

	/* BG tumblr */
	/*background: url(../img/bg_green.jpg);
	background-position: fixed;
	background-size: cover;
	background-position: 50% 50%;*/
}

.bg_overlayer {
	/*background: url(../img/bg_triangles.png) no-repeat fixed center top;*/
}

.container {
	background-color: #FFF;
	/*border-left: 22px solid #FFF;
	border-right: 20px solid #FFF;*/
	/*margin-left: 25px;
	margin-right: 20px;*/
	padding-left: 26px;
	padding-right: 21px;
}

.color1 {
	color: #f2c80a; /* new yellow */
}

.color2 {
	color: #429da2; /* new petrol */
}

i {
	font-style: italic;
}

b, strong {
	font-weight: 700;
}

h1, h2, h3, h4, h5, h5, h6 {
	font-family: inherit;
	color: #333333;
	line-height: 1.0em;
	text-transform: uppercase;
	margin: 0;
	padding: 0;
	display: inline-block;
}

h1 {
	font-weight: 500;
	font-size: 1.95em;
	letter-spacing: 1.25px;
	margin-bottom: 18px;
	max-width: 624px; /* Before: 603 */
}

h1 p {
	display: inline;
}

h1 i {
	font-style: italic;
}

h1.work_archive {
	margin-top: 23px;
}

h1 a:link, h1 a:visited {
	color: #f2c80a; /* new yellow */
	text-decoration: none;
}

h1 a:link.color2, h1 a:visited.color2 {
	color: #429da2; /* new petrol */
}

h1 a:hover, h1 a:focus, h1 a:active {
		text-decoration: underline;
}

h2, h3 {
	font-weight: 500;
	font-size: 1.8em;
	letter-spacing: 0.9px;
	margin-top: 16px;
	margin-bottom: 16px;
}

h3 {
	font-size: 1.4em;
	padding-top: 0.15em;
	padding-top: 0.15em;
}

h2.more {
	margin-top: 36px;
	/*margin-bottom: 15px;*/
}

a:link, a:visited {
	font-family: inherit;
	text-decoration: none;
	/*color: #f2c80a; /* new yellow */
	color: #429da2; /* new petrol */
	/*font-weight: bold;*/
}

a:hover, a:focus, a:active {
	text-decoration: underline;
}

#bold_highlight, .bold_highlight {
	font-family: inherit;
	color: #7a5b7e;
	font-weight: bold;
	text-decoration: none;
}

nav {
	padding-top: 34px;
}

nav p {
	text-align: center;
	margin-bottom: 18px;
	/*width: 210px;*/
	/*font-size:1.005em;*/
	/*line-height: 1.7em;
	letter-spacing: 0.17ex;*/
}

nav p.about {
	margin-bottom: 25px;
}

.logo {
	text-align: center;
	margin: 0 0 18px 0;
}

.logo img {
	width: 98px;
}

.iconbar {
	text-align: center;
	width: 100%; /*203px;*/
}

.iconbar p {
	margin-bottom: 3px;
}

.iconbar .row_two {
	/*font-size: 30px;*/
}

.iconbar a {
	color: #484848; /*#333333;*/
	font-size: 26px; /* control icon-size (FontAwesome) */
	/*letter-spacing: 0.3ex;*/
	margin: 0 3px 0 3px;
}

.hide {
	display: none !important;
}

.content {
	float: right !important;
	padding-top: 35px;
}

ul.work li {
	width: 198px;
	min-height: 159px; /* DIESE Zeile ist von mir und war notwendig, dass die li-Boxen immer schön links-bündig angezeigt werden - auch bei zwei-zeiligen Titeln! */
	display: inline;
	float: left;
	margin-right: 15.3px;
	margin-bottom: 1em;
	padding-bottom: 8px;
	background-color: transparent;
	text-align: center;
	border: none;
}

/*ul.work li {   B A C K U P
font-family: 'Droid Sans', sans-serif;
/*font-size: 1.5em;
letter-spacing: 0.05em;
width: 200px;
display: inline;
float: left;
margin-right: 13px;
margin-bottom: 1.6em;
/*background-color: #DDD;
text-align: center;
}*/

ul.work li:hover {
	background-color: #f2c80a; /* new yellow */
}

ul.work_archive li:hover {
	background-color: #429da2; /* new petrol */
}

ul.work li a:link, ul.work li a:visited {
	font-family: inherit;
	line-height: 1.15em;
	color: #333333;  /* default font-color */
	/*letter-spacing: 0.05em;
	font-weight: normal;
	text-decoration: none;
	text-transform: none;
	color: #333333;
	background-color: transparent;
	display: block;*/
	/*border: 1px solid #CCC;*/
}

ul.work li a:hover, ul.work li a:focus, ul.work li a:active {
	color: #FFF; /*#b1cd25; /*#b1cd25;*/
	text-decoration: underline;
}

/*ul.work li:hover a h4 {
	color: #1495bb;
	text-shadow: 0px 1px #AAA;
}*/

ul.work li a img {
	width: 198px;
	margin-bottom: 2.5px;
}

.sidebar {
	position: fixed;
}

.footer {
	clear: both;
	display: block;
	text-align: right;
	color: #aaaaaa;
	font-size: 0.9em;
	margin: 0 13px 0 0;
	padding: 2em 0 0.5em 0;
	/*clear: both;
	display: block;
	height: 2.4em;
	color: #aaaaaa;
	text-align: right;
	padding-top: 2em;
	padding-right: 12px;
	font-size: 0.9em;*/
}

.workcontent {
	width: 609px;
}

.workcontent img.hero_img {
	width: 624px;
	/*border: 1px solid #e8e8e8;*/
}

.noborder {
	border: none !important;
}

iframe.vimeo {
	width: 625px;  /* breite stimmt nicht mit .workcontent überein, da nur so diese ansicht gleich breit wie die thumb-übersicht auf der startseite ist.. */
	height: 352px;
	/*border: 1px solid #00FF00;*/
}

.jobsearch_msg {
	margin-top: 10px;
	margin-bottom: 39px;
}

.workcontent p {
	width: 625px;
}

/*.workcontent ul {
	margin-top: 7px;
}*/

.workcontent ul.work {
	width: 640px;  /* für die 'More'-Gallery-Thumbs */
}

.workcontent ul.info li {
	margin-bottom: 0.3em;
	line-height: 1.3em;
}

.workcontent ul li span {
	font-weight: 700;
	display: inline-block;
	width: 7ex;
	text-transform: uppercase;
}

.vip_msg {
	width: 100%;
	padding-left: 10px;
	padding-right: 0px;
	margin-top: 1em;
	margin-bottom: 1.4em;
	text-shadow:none;
	border-left: 6px solid #fa4b2a;
}

.indent_entry {
	text-indent: 0.75em;
	font-size: 0.75em;
	vertical-align: middle;
	margin-right: 0.5em;
}

.backToTop {
	clear: both;
	text-align: right;
	margin: 0 14px 0 0;
	padding: 0;
}

.backToTop i, .about i {
	font-size: 0.8em;  /* control Font Awesome icon-size ! */
}

/* Back to top arrow: https://codepen.io/rdallaire/pen/apoyx */
#return-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #202020;
    background: rgba(15, 15, 15, 0.7);
    width: 40px;
    height: 40px;
    display: block;
    text-decoration: none;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    display: none;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
		z-index: 999;
}
#return-to-top i {
    color: #fff;
    margin: 0;
    position: relative;
    left: 11px;
    top: 11px;
    font-size: 19px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#return-to-top:hover {
    background: rgba(32, 32, 32, 0.9);
}
#return-to-top:hover i {
    color: #fff;
    top: 5px;
}




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

/* Larger than standard 960 (devices and browsers) */
@media only screen and (min-width: 960px) {

}

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {
	body {
		font-size: 14px;
	}

	.container {
		padding-left: 0px;
		padding-right: 0px;
	}

	h1 {
		font-size: 1.9em;
	}

	h2 {
		font-size: 1.65em;
	}

	nav p {
		font-size: 1.0em;
	}

	.content {
		padding-top: 28px;
		padding-right: 15px;
	}

	.footer {
		padding-right: 26px;
		font-size: 0.9em;
	}

}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
	.container {
		padding-left: 0px;  /*28px;*/
		padding-right: 0px; /*18px;*/
	}

	nav {
		padding-top: 27px;
		margin-left: 14px;
	}

	nav p {
		/*width: 160px;*/
		font-size: 1.0em;
	}

	.logo img {
		width: 90px;
	}

	.iconbar {
		text-align: center;
		width: 100%;
		margin-top: 0.9em;
		font-size: 31px; /* control icon-size (FontAwesome) */
		/*letter-spacing: 0.3ex;*/
	}

	.iconbar p {
		margin-bottom: 8px;
	}

	.iconbar .row_two {
		font-size: 27px;
	}

	iframe.vimeo {
		width: 496px;  /* breite stimmt nicht mit .workcontent überein, da nur so diese ansicht gleich breit wie die thumb-übersicht auf der startseite ist.. */
		height: 279px;
		/*border: 1px solid #00FF00;*/
	}

	h1 {
		max-width: 495px; /* 477px; */
		letter-spacing: 0.9px;
		margin-bottom: 12px;
	}

	h1.work_archive {
		margin-top: 7px;
	}

	h2 {
		margin-bottom: 12px;
	}

	.workcontent {
		width: 475px;
		/*margin-right: 40px;*/
	}

	.workcontent p {
		width: 496px;
		margin-bottom: 14px;
	}

	.workcontent img.hero_img {
		width: 495px;
	}

	.jobsearch_msg {
		margin-top: 8px;
		margin-bottom: 31px;
	}

	.workcontent ul.work {
		width: 507px;  /* für die 'More'-Gallery-Thumbs */
	}

	ul, ol {
		margin-bottom: 16px;
	}

	ul.work li {
		width: 159px;
		min-height: 133px;
		margin-right: 10px;
		margin-bottom: 10px;
	}

	ul.work li a:link, ul.work li a:visited {
		font-size: 13.4px;
	}

	ul.work li a img {
		width: 159px;
		margin-bottom: 0px;
	}

	.footer {
		padding-right: 10px;
		font-size: 0.9em;
	}

	/* Back to top arrow: https://codepen.io/rdallaire/pen/apoyx */
	#return-to-top i {
	    left: 12px;
	    top: 13px;
	    font-size: 19px;
	}
	#return-to-top:hover i {
	    top: 5px;
	}
}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
	.content {
		padding-left: 0;
		padding-top: 0;
		padding-right: 0;
		float: none;
	}

	.sidebar {
		position: inherit;
	}
}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
	body {
		font-size: 1.3em;
		line-height: 1.5em;
	}

	nav {
		padding-left: 75px;
		padding-right: 75px;
		padding-top: 25px;
	}

	h1 {
		font-size: 1.8em;
		max-width: 477px;
		letter-spacing: 0.9px;
		margin-left: 20px;
		margin-bottom: 12px;
	}

	h2, h3 {
		font-size: 1.5em;
		letter-spacing: 0.6px;
		margin-left: 20px;
    /*margin-top: 16px;
    margin-bottom: 16px;*/
	}

	.iconbar {
		margin-top: 0px;
		margin-left: 4px;
		margin-bottom: 36px;
	}

	.iconbar a {
		font-size: 37px;
		letter-spacing: 9px;
		line-height: 47px;
	}

	.jobsearch_msg {
		padding-left: 20px;
	}

	.workcontent {
		width: 420px;
	}

	.workcontent img.hero_img {
		width: 420px;
		border: none;
		/*border-top: 1px solid #e8e8e8;
		border-bottom: 1px solid #e8e8e8;*/
	}

	iframe.vimeo {
		width: 420px;
		height: 236px;
	}

	ul.info, .workcontent p, .vip_msg {
		width: 380px;
		padding-left: 20px;
	}

	.workcontent ul.work {
		width: 420px;  /* für die 'More'-Gallery-Thumbs */
	}

	ul.work li {
		width: 184px;
		min-height: 184px;
		margin-left: 17px;
		margin-right: 1px;
		margin-bottom: 15px;
		padding-bottom: 7px;
	}

	ul.work li a {
		width: 184px;
	}

	ul.work li a img {
		width: 184px;
		margin-bottom: 0px;
	}

	.footer {
		font-size: 0.7em;
		text-align: center;
		margin: 0;
		padding: 2em 0 0.5em 0;
	}

	/* Back to top arrow: https://codepen.io/rdallaire/pen/apoyx */
	#return-to-top i {
	    left: 11px;
	    top: 8px;
	    font-size: 19px;
	}
	#return-to-top:hover i {
	    top: 2px;
	}
}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
	body {
		font-size: 1.3em;
		line-height: 1.5em;
	}

	nav {
		padding-left: 35px;
		padding-right: 35px;
		padding-top: 25px;
	}

	h1 {
		font-size: 1.8em;
		max-width: 477px;
		letter-spacing: 0.9px;
		margin-left: 10px;
		margin-bottom: 12px;
	}

	h2, h3 {
		font-size: 1.5em;
		letter-spacing: 0.6px;
		margin-left: 10px;
    /*margin-top: 16px;
    margin-bottom: 16px;*/
	}

	.iconbar {
		margin-top: 0px;
		margin-left: 4px;
		margin-bottom: 36px;
	}

	.iconbar a {
		font-size: 37px;
		letter-spacing: 6px;
		line-height: 47px;
	}

	.jobsearch_msg {
		padding-left: 10px;
	}

	.workcontent {
		width: 300px;
	}

	.workcontent img.hero_img {
		width: 300px;
		border: none;
		/*border-top: 1px solid #e8e8e8;
		border-bottom: 1px solid #e8e8e8;*/
	}

	iframe.vimeo {
		width: 300px;
		height: 169px;
	}

	ul.info, .workcontent p, .vip_msg {
		width: 280px;
		padding-left: 10px;
	}

	.workcontent ul.work {
		width: 300px;  /* für die 'More'-Gallery-Thumbs */
	}

	ul.work li {
		width: 134px;
		height: 116px;
		/*min-height: 170px;*/
		margin-left: 10px;
		margin-right: 1px;
		margin-bottom: 10px;
		padding-bottom: 5px;
	}

	ul.work li a:link, ul.work li a:visited {
		letter-spacing: 0em;
	}

	ul.work li a {
		width: 134px;
	}

	ul.work li a img {
		width: 134px;
		margin-bottom: -2px;
	}

	.footer {
		font-size: 0.7em;
		text-align: center;
		margin: 0;
		padding: 2em 0 0.5em 0;
	}

	/* Back to top arrow: https://codepen.io/rdallaire/pen/apoyx */
	#return-to-top i {
	    left: 11px;
	    top: 8px;
	    font-size: 19px;
	}
	#return-to-top:hover i {
	    top: 2px;
	}
}

/*!
 * Bootstrap v2.3.1
 *
 * Copyright 2012 Twitter, Inc
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Designed and built with all the love in the world @twitter by @mdo and @fat.
 */
.clearfix{zoom:1;}
.clearfix:before, .clearfix:after{display:table;content:"";line-height:0;}
.clearfix:after{clear:both;}
.hide-text{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0;}
.input-block-level{display:block;width:100%;min-height:30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.popover{font-size:14px; letter-spacing: 0.2ex;}
.popover{position:absolute;top:0;left:0;z-index:1010;display:none;max-width:276px;padding:1px;text-align:left;background-color:#f7f7f7;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;border:1px solid #ccc;border:1px solid rgba(0, 0, 0, 0.2);-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);-moz-box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);white-space:normal;}.popover.top{margin-top:-10px;}
.popover.right{margin-left:10px;}
.popover.bottom{margin-top:10px;}
.popover.left{margin-left:-10px;}
.popover-title{margin:0;padding:4px 6px;font-size:11px;font-weight:normal;line-height:14px;background-color:#f7f7f7;border-bottom:1px solid #ebebeb;-webkit-border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;border-radius:5px 5px 0 0;}.popover-title:empty{display:none;}
.popover-content{padding:4px 6px;}
.popover .arrow, .popover .arrow:after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid;}
.popover .arrow{border-width:11px;}
.popover .arrow:after{border-width:10px;content:"";}
.popover.top .arrow{left:50%;margin-left:-11px;border-bottom-width:0;border-top-color:#999;border-top-color:rgba(0, 0, 0, 0.25);bottom:-11px;}
.popover.top .arrow:after{bottom:1px;margin-left:-10px;border-bottom-width:0;border-top-color:#f7f7f7;}
.popover.right .arrow{top:50%;left:-11px;margin-top:-11px;border-left-width:0;border-right-color:#999;border-right-color:rgba(0, 0, 0, 0.25);}
.popover.right .arrow:after{left:1px;bottom:-10px;border-left-width:0;border-right-color:#f7f7f7;}
.popover.bottom .arrow{left:50%;margin-left:-11px;border-top-width:0;border-bottom-color:#999;border-bottom-color:rgba(0, 0, 0, 0.25);top:-11px;}
.popover.bottom .arrow:after{top:1px;margin-left:-10px;border-top-width:0;border-bottom-color:#f7f7f7;}
.popover.left .arrow{top:50%;right:-11px;margin-top:-11px;border-right-width:0;border-left-color:#999;border-left-color:rgba(0, 0, 0, 0.25);}
.popover.left .arrow:after{right:1px;border-right-width:0;border-left-color:#f7f7f7;bottom:-10px;}