view-project-3
/* Home ---------------------------------------------------------------------------- */

#view-home {
	background: #000;
}

#square-home .content {
	margin-top: 15.5%;
	margin-left: 5%;
	width: 90%;
	color: #fff;
}

#square-home h1 {
    text-transform: uppercase;
    color:#000;
	font-size: 3.4em;
}
#square-home h1 span{
    color:#fff;
}
#square-home .copy-text {
	margin-top: 10.6%;
}

/* the next button for touch devices is part of the home view */
#btn-next-touch {
	display: none;
	position: absolute;
	right: 20px;
}

/* project  ---------------------------------------------------------------------------- */

/* styles for all projects (css classes) */
.view-project {
	background: #000;
	color:#fff;
}

.square-project .content {
	margin-left: 5%;
	width: 90%;
}

.square-project .copy-text {
	margin-top: 10.6%;
}

.square-project-0 h2 {
	font-size: 2.5em;
	line-height: 1.3333333333em;
}
#square-project-0 h1 span{
    color:#E49202;
}

#view-project-0 h1 {
	font-size: 3.8em;
	line-height: 1.1em;
}

#view-project-0 .content {
	text-align: right;
}
#square-contact .mail{
    color:#E49202;
}
#square-contact .mail:hover{
    color:#000;
}
#square-contact .city p{
    margin-top: 0px;
}
.award {
	position: absolute;
	background-image: url(../img/views/award_white.gif);
	background-size: 100% 100%;
	text-align: center;
	width: 40%;
	height: 10.625%;
	padding-top: 2%;
}

.award-1 {
	/* top:69.9%; */
	top:69.9%;
	left: 5%
}

.award-2 {
	top:69.9%;
	right: 10%
}

.award-3 {
	top: 84.9%;
	left: 5%;
}

.award-4 {
	/* top: 84.9%; */
	top: 84.9%;
	right: 10%;
}

.kb-hint {
	position: absolute;
	top: 97%;
	left: 2%;
	letter-spacing: 0;
}

.link-button {
	position: absolute;
	background-image: url(../img/views/link_button_black.gif);
	background-size: 100% 100%;
	width: 30.3125%;
	height: 7.8125%;
	padding-top: 2.3%;
	padding-left: 3.5%;
	/* top:86.4%; */
	top:86.4%;
	left:55%;
	cursor: hand;
	cursor: pointer;
}

.appstore-button-de {
	background-image: url(../img/views/appstore_button_de.png);
	width: 29.375%;
	height: 8.75%;
	/* top:85.8%; */
	top:86.4%;
	left:55.4%;
}

.appstore-button-en {
	background-image: url(../img/views/appstore_button_en.png);
	width: 29.375%;
	height: 8.75%;
	top:86.4%;
	left:55.4%;
}

.link-button-text {
	color: white;
}

.square-project .content {
	text-align: left;
	margin-top: 25.5%;
}

/* project1 */

#view-project-1 {
	background-color: #d8d8d8;
	color: #000;
}

/* project2 */

#view-project-2 {
	background-color: #ADADAD;
	color: #000;
}
#view-project-3 {
	background-color: #d8d8d8;
	color: #000;
}
.square .content {
	margin-top: 15%;
}
#view-project-0 .square .content{
    margin-top: 15.5%;
}
.square .image-box {
	top: 40%;
	left: -40%;
	width: 175%;
}



/* Portfolio  ---------------------------------------------------------------------------- */

.view-portfolio {
	background: #fefefe;
}

#view-portfolio-0 {
	background: #000;
	color:#fff;
}

.square-portfolio .content {
	margin-left: 5%;
	margin-top: 15.5%;
	width: 90%;
}

#view-portfolio-0 .content {
	margin-top: 25.5%;
	text-align: right;
}

#view-portfolio-0 .copy-text {
	margin-top: 2.9em;
}

.square-portfolio .copy-text {
	margin-top: 0.7em;
}

.square-portfolio-0 h2 {
	line-height: 1.3em;
}

#square-portfolio-1 h2, #square-portfolio-2 h2, #square-portfolio-3 h2 {
	font-family: "Atlas Typewriter Web", sans-serif;
	font-weight: 900;
	font-size: 6.5em;
	line-height: 1.076923077em;
}


/* About (shared styles) ---------------------------------------------------------------------------- */

.media-buttons {
	position: absolute;
	left: 5%;
	margin-top: 11%;
	width:179px;
}

.media-button {
	width:50px;
	margin-right: 13px;
	float: left;
	cursor: hand;
	cursor: pointer;
}

.media-buttons .last-child {
	margin-right: 0;
}

.media-button img {
	vertical-align: bottom; /* avoids extra space for <a> below image */
}

/* about 0 ---------------------------------------------------------------------------- */

#view-about-0 {
	background: #000;
	color:#fff;
}

#view-about-0 .content {
	margin-left: 5%;
	margin-top: 30.5%;
	width: 90%;
	text-align: right;
}

#view-about-0 .copy-text {
	margin-top: 2.9em;
}

.square-about-0 h2 {
	line-height: 1.3em;
}

/* persons  ---------------------------------------------------------------------------- */


#view-client {
	background-color: #898989;
	background-position: right top;
	background-repeat: no-repeat;
	background-size:auto 100%;
}

#square-client .content {
	text-align: left;
	color: #FFF;
	margin-left: 5%;
	width: 80%;
	margin-top: 14.5%;
}

#square-client h2 {
	font-size: 1.75em;
	margin-bottom: 1.1em;
	text-transform: uppercase;;
}

#square-client .copy-text {
	color: #FFF;
	line-height: 1.5em;
	margin-top: 3.8%;
}

#layer-client h2 {
	font-size: 1.75em;
	margin-bottom: 1.1em;
	text-transform: uppercase;
}

#layer-client p {
	margin-bottom: 1em;
}

#view-client .image-box {
	height: 100%;
	width:100%;
}

#view-client .image-box img {
	display: block;
	position: absolute;
	height: 100%;
	right: 0;
	max-width: none;
}

/* author  ---------------------------------------------------------------------------- */

#view-author {
	background-color: #898989;
	background-position: left top;
	background-repeat: no-repeat;
	background-size: auto 100%;
}

#square-author .content {
	text-align: left;
	color: #FFF;
	margin-left: 5%;
	width: 80%;
	margin-top: 14.8%;
}

#square-author h2 {
	font-size: 1.75em;
	margin-bottom: 1.1em;
	text-transform: uppercase;
}

#square-author .copy-text {
	color: #FFF;
	line-height: 1.5em;
}

#layer-author h2 {
	font-size: 1.75em;
	margin-bottom: 1.1em;
	text-transform: uppercase;
}

#layer-author p {
	margin-bottom: 1em;
}

#view-author .image-box img {
/*	
	max-width: none;
        max-height: 100%;
        display: block;*/
width:100%;
height: 100%;

}


/* Twitter  ---------------------------------------------------------------------------- */

#view-twitter {
	background: #000;
}

#twitter-text {
	position: absolute;
	padding-left: 5%;
	padding-right: 5%;
	top: 10%;
        width: 100%;
	color:#fff;
	text-align: right;
}

#twitter-text h1 {
	font-size: 2.5em;
	letter-spacing: 0;
	line-height: 1.3em;
	text-align: left;
	padding-top: 10%;
	margin-bottom: 2%;
}

#square-twitter a, a:visited, a:active {
	color:#fff;
}

#square-twitter .content {
	height: 100%;
}

#square-twitter .image-box {
	top: 15%;
	left: 5%;
	width:18.75%
}


/* contact  ---------------------------------------------------------------------------- */

#square-contact p {
	margin-top: 1.5em;
}

#square-contact h1 {
	font-family: "Atlas Typewriter Web", sans-serif;
	font-weight: 900;
	font-size: 6em;
	line-height:1em;
	color: #000;
	margin-top: 16.8%;
	margin-bottom: 0;
}

#square-contact .copy-text {

}

#square-contact .content {
	margin-left: 5%;
}

#square-contact a, a:visited, a:active {
	color:#000;
}

/* impressum (Layer)  ---------------------------------------------------------------------------- */

#impressum {
	background-color: #adadad;
	z-index: 401;
	text-align: center;
	overflow: hidden;
}

#impressum h2 {
	font-size: 1em;
	text-transform: uppercase;
	margin: 0 0 1em 0;
}

#impressum h3, #impressum p {
	font-size: 0.75em;
}

#impressum h3 {
	margin: 1em 0 0 0;
}

.impressum-cover {
	position:absolute;
	width:100%;
	height:150%; /* some extra space for buggy ipod */
	background-color: #adadad;
	z-index:400;
	left:0px;
	top:0px;
}


@media all and (max-width:1200px){
.image-box.full-height img{
       display:none!important;
}
}