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


/* 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%;
}

.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:#1f1f1f;
	width: 100% !important;
    
	}

header img{margin:180px 0 0 0;}
header h1{ font-size:72px; color:#FFFFFF; margin: 50px 0 0 0; line-height:100px; padding: 15px 0 200px 0;}
header h2{ font-size:14px; color:#FFFFFF; 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;
		width:1060px;
		overflow:inherit;
		
    	
}

#about_us   		{background:#ffffff; margin:60px 0 0 0; color:#1f1f1f; height:300px;}


#about_us h1		{display:inline-block; width:480px; margin: 0 0 20px 20px; position:relative;float:left;}
#about_us p 		{display:inline-block; width:480px; margin:0 0 0 20px; position: relative; float:left;}
#about_us img		{ position:relative; float:right; margin: 15px 170px 0 0; }
#about_us .content	{ height:301px; }

#service    		{background:#1f1f1f; color:#ffffff; margin:0 0 0 0;}
#service .content	{text-align:center; padding: 50px 0 80px 0;}
#service h1 	 	{margin: 60px 0 0 0;}
#service p		 	{display:inline-table; width:470px;}
#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:#1f1f1f; margin:0 0 0 0; color:#ffffff; 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:#ffffff; color:#1f1f1f; margin:40px 0 0 0;}
#contact .content	{text-align:center; padding: 0 0 80px 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:#1f1f1f; margin:0 0 0 0; color:#ffffff;}
footer .content		{text-align:center; padding: 50px 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;
}