/*
CSS Display | WE ARE NERDS
*/

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; }

::-moz-selection { background: #9aa4a3;; color: #f5f5f5; text-shadow: none; }
::selection { background: color:#9aa4a3;; color: #f5f5f5; text-shadow: none; }

img { border: 0; border:none; -ms-interpolation-mode: bicubic; vertical-align: middle; }
div{display:block;}  .clear{clear:both;}

header .maxwidth320 { max-width: 320px; display: block; margin: 0 auto; }
header .maxwidth380 { max-width: 380px; display: block; margin: 0 auto; }
header .maxwidth420 { max-width: 420px; display: block; margin: 0 auto; }
header .maxwidth480 { max-width: 480px; display: block; margin: 0 auto; }

.maxwidth680 {max-width: 680px; }
.maxwidth480 {max-width: 480px; }
.maxwidth260 {max-width: 260px; }
.responsive {width: 100%;}

/* Android */
* { -webkit-tap-highlight-color: rgba(0,0,0,0); }

/* allgemein */

body {
	margin: 0 auto;
	padding: 0;
    width: 100% !important;
    height: 100% !important;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	background:#ffffff;
	overflow-y:scroll;
	line-height:130%;
	color:#1f1f1f;
}

.display_view{display:block;} .mobile_view{display:none;}

/*TYPO*/
a {cursor: pointer; text-decoration:none;}
h1{ font-family: "MisoRegular", sans-serif ; font-size:32px; letter-spacing: 1px; margin:0; line-height:36px; padding: 0 0 0 0; font-weight:light;}
h2{ font-family: "MisoRegular", sans-serif ; letter-spacing:1px; line-height:normal;}

p{font: 15px/18px Arial, Helvetica, sans-serif; line-height:24px;}


.textbox			{width:480px;}

a.cta_black			{
					position:relative;
					display:inline-block;
					-webkit-border-radius: 25px;
					-moz-border-radius: 25px;
					border-radius: 25px;
					background-color: #1f1f1f;
					padding: 15px 35px 15px 35px;
					margin:20px 0 40px 0;
					font-size: 20px;
					color: #fff;
					font-family: "MisoRegular", Arial,sans-serif;
					}

a.cta_weiss		{
					position:relative;
					display:inline-block;
					-webkit-border-radius: 25px;
					-moz-border-radius: 25px;
					border-radius: 25px;
					background-color: #fff;
					padding: 15px 35px 15px 35px;
					margin:20px 0 40px 0;
					font-size: 20px;
					color: #1f1f1f;
					font-family: "MisoRegular", Arial,sans-serif;
					}

a:hover{opacity:0.5;}

header{
	display:block;
	text-align:center;
	margin:0; padding:0;
	position:relative;
	background:#f0ece2;
	width: 100% !important;
	padding:180px 0 180px 0;
	}

header h1{ font-size:72px; color:#1f1f1f; margin: 50px 0 0 0; line-height:100px; padding: 15px 0 0 0;}
header h2{ font-size:14px; color:#1f1f1f; margin: 45px 0 0 0; padding: 10px 0 0 0;}

.wrapper{position:relative; text-align:center; display:block;}
.content{
		position:relative;
    	text-align:left;
		margin:0 auto;
    	padding:0 0 0 30px;
			max-width: 1060px;
			width: 100%;
		overflow:inherit;
}

#about_us   		{background:#ffffff; color:#1f1f1f; height:400px;}
#about_us .content{text-align:left; padding:0 0 0 0; display:inline-block;}
#about_us h1		{display:inline-table; width:480px; margin: 0 0 20px 0; position: relative;}
#about_us p		{position: relative;}
#about_us img		{float:left; margin:0; padding:0; margin-top: 50px;}
#about_us .textbox {display:inline-table;float:right; padding:0; margin:100px 0 0 0;}


#service    		{background:#f0ece2; color:#1f1f1f; margin:0 0 0 0;}
#service .content	{text-align:left; padding: 50px 0 80px 0;}
#service h1 	 	{margin: 60px 0 0 0;}
#service p		 	{display:block;}
#service img		{margin:50px 30px 50px 30px; float:left;}

#work_weiss			{background:#ffffff; margin:0 0 0 0; color:#1f1f1f; height:531px;}
#work_weiss .content{text-align:left; padding:0 0 0 0; display:inline-block;}
#work_weiss h1		{display:inline-table; width:480px; margin: 0 0 20px 0; position: relative;}
#work_weiss p		{position: relative;}
#work_weiss img		{float:right; margin:0; padding:0;}
#work_weiss .textbox{display:inline-table;float:left; padding:0; margin:100px 0 0 30px;}


#work_back			{background:#f0ece2; margin:0 0 0 0; color:#1f1f1f; height:531px;}
#work_back .content{text-align:left; padding:0 0 0 0; display:inline-block;}
#work_back h1		{display:inline-table; width:480px; margin: 0 0 20px 0; position: relative;}
#work_back p		{position: relative;}
#work_back img		{float:left; margin:0; padding:0;}
#work_back .textbox {display:inline-table;float:right; padding:0; margin:100px 0 0 0;}

#contact    		{background:#f0ece2; color:#1f1f1f; margin:40px 0 0 0;}
#contact .content	{text-align:center; padding: 0 0 0 0;display:inline-table;}
#contact h1 	 	{margin: 60px 0 0 0; position: relative;}
#contact p		 	{display:inline-table; width:470px;}
#contact a			{display:inline-table;}
#contact img		{margin:50px 30px 50px 30px; float:left;}

footer				{background:#f0ece2; margin:0 0 0 0; color:#1f1f1f;}
footer .content		{text-align:center; padding: 0 0 80px 0; width:500px; opacity:0.5;}
footer p		 	{display:inline-table; width:470px; font-size:12px;}
footer img			{margin:50px 30px 50px 30px; float:center;}


/*ANIMATION*/

/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade-in {
    opacity:0;  /* make things invisible upon start */
    -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
    -moz-animation:fadeIn ease-in 1;
    animation:fadeIn ease-in 1;

    -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;

    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    animation-duration:1s;
}

.fade-in.one {
-webkit-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
animation-delay: 0.7s;
}

.fade-in.two {
-webkit-animation-delay: 2.2s;
-moz-animation-delay:2.2s;
animation-delay: 2.2s;
}

.fade-in.three {
-webkit-animation-delay: 2.6s;
-moz-animation-delay: 2.6s;
animation-delay: 2.6s;
}