/* codeworkers 2021
COLORS
#808080
#B2B2B2
#404040
#666
#ddd
#CB505E
#efefef
*/

/* ###      Default      ### */
/* ### for mobile phones ### */
/* ### max-width:839px   ### */
* {
    box-sizing:border-box;
	border : 0;
	margin : 0;
	padding: 0;
}
.responsive{width: 100%; height: auto;}
.responsive_max{max-width: 100%; height: auto; padding: 0.5em;}
.responsive_max_nopad{max-width: 100%; height: auto;}

img{
  filter: alpha(opacity=80);
  -moz-opacity: 0.8;
  opacity: 0.8;
}
a:hover img{
  filter: alpha(opacity=100);
  -moz-opacity: 1;
  opacity: 1;
}
a{cursor: pointer;}
a.close{display: none;}
a.block{display: block;}
a:link,
a:visited,
a:active{
	color: #B2B2B2;
	line-height: 1.4em;
	text-decoration: none;
}
a.underline:link,
a.underline:visited,
a.underline:active{
	text-decoration: underline;
}
a:hover{
	color: #404040;
}
a.download{
    background: #B2B2B2 url(images/3d-garage/free_sticker.png) no-repeat;
    background-position: 99% 5%;
	color: #fff;
    height: 65px;
	padding: 5px;
	margin: 15px 5px 10px 0;
    width: auto;
	display: block;
}
a.download:hover{
    background: #CB505E url(images/3d-garage/free_sticker_red.png) no-repeat;
    background-position: 99% 5%;
}
a.footer:link,
a.footer:visited,
a.footer:active{
	color: #ddd;
	line-height: 1.4em;
	text-decoration: none;
}
a.footer:hover{
	color: #fff;
}
h1,h2,h3{
	line-height: 1.4em;
	font-size: 1.4em;
	font-style: normal;
	font-weight: bold;
}
.nonbold{
	font-weight: normal;
}
h2{font-size: 1.0em;}
h3{font-size: 0.9em;}
span{white-space: nowrap;}
p.max{padding: 0.5em 0 0.5em 0;}
div.clear{clear: both;}

body{
	background: #ddd url(images/informationsgrafik-bg_01.png) no-repeat center center fixed;
	background-size: cover;
	color: #808080;
	font-family: 'Trebuchet MS', Verdana, Arial, Sans-Serif;
	font-size: 1.0em;
	line-height: 1.4em;
}
#header{
	background: #666;
    width: 100%;
}
.side{
	clear: both;
    float: left;
	height: 28px;
    width: 0%;
}
.main{
	border-left: 1px solid #B2B2B2;
	border-right: 1px solid #B2B2B2;
    float: left;
    padding: 15px;
    width: 100%;
	/*non sticky menu*/
	margin-top: 0px;
	/*non sticky menu*/
}

#cw{background: #ddd url(images/cat-codeworkers.png) no-repeat;}
#ig{background: #ddd url(images/cat-infografik.png) no-repeat;}
#fa{background: #ddd url(images/cat-frei-arbeit.png) no-repeat;}
#rd{background: #ddd url(images/cat-rd-garage.png) no-repeat;}
#error{background: #ddd url(images/cat-404.png) no-repeat;}
#intro{
	float: left;
	margin: 95px  0 10px 10px;
	padding: 5px;
	width: 100%;
	min-height: 6.6em;
}
ul.min{ margin-top: -0.7em;}
ul#menu{
	font-size: 1em;
	list-style-type: none;
	margin: 0px auto;
	text-transform: uppercase;
}
ul#menu li{
	border-right: 1px solid #fff;
	border-bottom: 1px solid #B2B2B2;
	height: 40px;
	white-space: nowrap;
}
ul#menu li a{
	color: #fff;
	display: block;
    width: 100%;
	float: left;
	height: 40px;
	padding: 12px 20px 0 20px;
	text-decoration: none;
}
ul#menu li a:hover{
	background: #ddd;
	color: #808080;
}
ul#menu li.active{
	background: #ddd;
	border: 1px solid #B2B2B2;
	border-bottom: none;
	padding:12px 20px 0 20px;
	display: none;
}
#contentfull{
	background-color:#efefef;
	border: 1px solid #B2B2B2;
	float: left;
	height: auto;
	padding: 5px;
	position:relative;
	text-align: left;
	width: 100%;
}
.contentblock{
	color: #404040;
	float: left;
	padding: 5px;
    width: 100%;
}
.contentblock h2{
	background: #ddd url(images/hamburg.gif) repeat-y;
	padding: 5px;
	text-align: right;
}
.contentblock h3{
	background: #fff;
	padding: 5px;
}
.block{
	height: auto;
	margin: 5px;
	padding: 10px;
}
.block_auto{
	float: left;
	height: auto;
	margin: 5px;
	padding: 10px;
}
.textblocksized{
	float: left;
	height: auto;
	width: 100%;
}
.textblocksized ul{
	list-style-type: square;
	padding: 15px 0 2px 15px;
}
.textblocksized_50{
	float: left;
	height: auto;
	padding: 5px;
	width: 50%;
}
.imageblock{
	float: left;
	margin-bottom: 15px;
	width: 100%;
}

/* ### start Freie Arbeiten ### */
.blocksized_50{
	float: left;
	height: auto;
	padding: 5px 5px 15px 5px;
	overflow: hidden;
	width: 50%;
}
.blocksized_50 p{
	width: 90%;
}
.blocksized_50 h2{
	padding:15px 0 0 0;
	width: 90%;
}
.blocksized_50 img{
	border: 1px solid #666;
	filter: alpha(opacity=90);
	-moz-opacity: 0.9;
	margin: 0 5px 5px 0;
	opacity: 0.9;
}
.blocksized_50 img:hover{
	filter: alpha(opacity=100);
	-moz-opacity: 1.0;
	opacity: 1.0;
}
.blocksized_50 ul{
	list-style-type: square;
	padding: 0 0 5px 15px;
}
.zoom img{	
	-moz-transition: all 1.8s;
	-webkit-transition: all 1.8s;
	transition: all 1.8s;
}
.zoom:hover img{
	cursor: crosshair;
	border: 1px solid #666;
	transform: scale(2) translate(-25%, -25%);
}
.zoom_ge img{	
	-moz-transition: all 1.8s;
	-webkit-transition: all 1.8s;
	transition: all 1.8s;
}
.zoom_ge:hover img{
	cursor: crosshair;
	border: 1px solid #666;
	transform: scale(2) translate(-12%, -16%);
}
.block_th{
	height: auto;
	padding: 20px 0 0 0;
	width: 95%;
}
.blocksized_100{
	float: left;
	height: auto;
	padding: 5px 5px 15px 5px;
	width: 100%;
}
.blocksized_100 h2{
	padding:15px 0 0 0;
	width: 90%;
}
button.vimeo{
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath fill='%23eee' d='M11.109 17.625l7.562-3.906-7.562-3.953v7.859zM14 4.156c5.891 0 9.797 0.281 9.797 0.281 0.547 0.063 1.75 0.063 2.812 1.188 0 0 0.859 0.844 1.109 2.781 0.297 2.266 0.281 4.531 0.281 4.531v2.125s0.016 2.266-0.281 4.531c-0.25 1.922-1.109 2.781-1.109 2.781-1.062 1.109-2.266 1.109-2.812 1.172 0 0-3.906 0.297-9.797 0.297v0c-7.281-0.063-9.516-0.281-9.516-0.281-0.625-0.109-2.031-0.078-3.094-1.188 0 0-0.859-0.859-1.109-2.781-0.297-2.266-0.281-4.531-0.281-4.531v-2.125s-0.016-2.266 0.281-4.531c0.25-1.937 1.109-2.781 1.109-2.781 1.062-1.125 2.266-1.125 2.812-1.188 0 0 3.906-0.281 9.797-0.281v0z'%3E%3C/path%3E%3C/svg%3E") no-repeat 1em center #666;
	background-size: 3.5em;
	border-radius: 0.75em;
	color: #B2B2B2;
	cursor: pointer;
	height: 4.25em;	
	margin: 20px 0 0 0;
	padding: 0 0 0 5.5em;
	text-align: left;
	transition: background-color 0.3s;
	-webkit-appearance: none;
	width: 11.5em;
}
button.vimeo:hover{
	background-color: #CB505E;
}
button.vimeo a{
	color: #efefef;
}
button.vimeo a:hover{
    background: #CB505E;
}

/* ### end Freie Arbeiten ### */

.flow{
	float: left;
	padding: 5px;
}
video{
    height: auto;
	max-width: 594px;
    width: 100%;
}

div.hr{ height: 5px; background: #fff url(images/hamburg.gif) no-repeat; clear: both; margin: 5px 0 5px 0;}
div.hr hr{ display: none;}

img.vromborder{
	border: 1px solid #B2B2B2;
	float: left;
	margin: 10px 20px 25px 0;
}
.margin{
	margin: 8px 0 0 0;
}
#footer{
	background: #666;
	border: 1px solid #666;
	color:#ddd;
	float: left;
	margin: 0px auto;
	min-height: 40px;
	padding: 10px;
	text-align: center;
    width: 100%;
}

/* ### start gallery ### */
.close{cursor:pointer;}
a.responsive{padding: 4px 4px 0 4px;}
.overlay{
	background-image:url(images/animation.gif);
	border:1px solid #B2B2B2;
	padding:10px;
	z-index:500;
	display:none;
}
#thumbs_box{display: none;}
#small_screen_box{
	display: block;
}
.small_screen{
	padding:5px;
	background-image:url(images/animation.gif);
	border:1px solid #B2B2B2;
}
/* ### end gallery ### */

/* ### Media Queries ### */
/* ###  for desktop  ### */
@media all and (min-width:840px){
	#header {
		/*sticky menu*/
		margin-top: 0;
		opacity: 0.9;
		position: fixed;
		z-index: 10;
		/*sticky menu*/
	}
	.side{width: 5%;}
    .main{width: 90%;}
    #footer{width: 90%;}
	#intro{margin: 0px  0 10px 165px; width: 80%;}
	ul#menu{display: flex;}
	ul#menu li.active{display: flex;}
	.contentblock{width: 50%;}
	.textblocksized{width: 40%;}
	.imageblock{float: right; width: 50%;}

	/*sticky menu*/
	.main{margin-top: 40px;}
	.main_sub{margin-top: 40px;}
	/*sticky menu*/

	/*gallery*/
	#overlay{display: none;}
	#thumbs_box{display: block;}
	.thumb_row{display: flex; }
	#small_screen_box{display: none;}
	/*gallery*/
}
@media all and (min-width:1024px){
	.side{width: 10%;}
    .main{width: 80%;}
    #footer {width: 80%;}
}
@media all and (min-width:1200px){
    #reeper_bg {background: #efefef url(images/reeper_bg.jpg) no-repeat; background-position: 100% 100%;}
}
@media all and (min-width:1600px){
	.side{width: 15%;}
    .main{width: 70%;}
    #footer{width: 70%;}
}
@media all and (min-width:1921px){
	.side{width: 288px;}
    .main{width: 1440px;}
    #footer{width: 1440px;}
}