
/*****************************
******************************
******************************
******************************
           IPHONE
******************************
******************************
******************************
******************************/




@media only screen and (max-width: 480px) {

body {
	margin-left: 0px;
	max-width: 480px;
	width: 100%;
	padding: 0;
	left: 0%;
}


/*************************************** 
  Fixed elements / NAVIGATION BAR 
****************************************/
.container{
	width: 100%;
	max-width: 480px;
	margin:0 auto;
	overflow: hidden;
	position: relative;

}
.bar1 {
	position:fixed;
	z-index: 101;
	width: 100%;
	max-width: 480px;
	height: 96px;
	background-color: rgba(255, 255, 255, 0.7);
	text-align: center;
	padding: 0px 0px;
	top: 0px;
	border-bottom-style: none;
	border-width: 1px;
	border-color: #888888;
	margin-left: 0;
	padding-right: 0px;
}
.bar1 ul li {
	display: inline;
	background-color: rgba(255, 255, 255, 0);
	padding-bottom: 0px;
	padding-right: 0px;
	padding-top: 0px;
	padding-left: 0px;
}
.navbar {
	margin-top: 0px;
	font-family: verdana;
	font-size: 1.0em;
	margin-right: 0px;
	position: relative;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-top: 5px;
	padding-bottom: 20px;
	text-align: center;
	float: none;
	left: 0;
	width: 100%;
}
.background {
	position: fixed;
	z-index: -50;
	opacity: 0.5;
	top: 120px;
}
.img3 {
	opacity: 0;
	width: 100%;
}
.logomco {
	float: none;
	width: 92px;
	height: 55px;
	background-color: #000000;
	padding-left: 39%;
	padding-right: 41%;
	padding-top: 0px;
	margin-left: 0px;
	margin-top: 0;
}
/************************
    Animated languages
*************************/
.pruebaidiomas {
	display: none;
	overflow: hidden;
}
/****************************
      static languages
*****************************/
.languages {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 0.8em;
	margin-left: 0%;
	position: relative;
	top: -100px;
	text-align: left;
	display: block;
	overflow: visible;
	left: -15px;
	float: left;
	width: 20%;
}
#de, #es {
	color: #FFFFFF;
}
#de:hover, #es:hover {
	color: #ABE2FF;
}
#werk, #profil, #kontakt {
	padding-left: 10px;
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 0px;
	text-decoration: none;
	color: #888888;
}
#werk:hover , #profil:hover , #kontakt:hover {
	color: #181818;
	transition: 0.2s ease-in-out;
}



/*************************************** 
   mobile elements / NAVIGATION BAR 2
****************************************/
.content {
	position: relative;
	width: 100%;
	margin: auto;
}
.bar2 ul li {
	display: block;
	margin-top: 21px;
}
.bar2 {
	padding: 0px 0px;
	top: 50px;
	height: 0px;
	margin-bottom: 200px;
	z-index: 50;
	position: relative;
	width: 100%;
	text-align: center;
	left: -6%;
}
.navbar2 {
	margin-top: 65px;
	font-family: fuente;
	font-size: 1.2em;
	margin-left: 0;
	position: relative;
	width: 100%;
}
#allewerke {
	padding-top: 11px;
	padding-bottom: 11px;
	padding-right: 48%;
	padding-left: 59%;
	background-color: #C6C6C6;
	border-radius: 0px;
	text-decoration: none;
	margin-right: 0%;
	margin-left: -17%;
	color: #FFF;
}
#architektur {
	padding-top: 11px;
	padding-bottom: 11px;
	padding-right: 52%;
	padding-left: 51%;
	background-color: #C6C6C6;
	border-radius: 0px;
	text-decoration: none;
	margin-right: 0%;
	margin-left: -15%;
	color: #FFF;
}
#design{
	padding-top: 11px;
	padding-bottom: 11px;
	padding-right: 51%;
	padding-left: 50%;
	background-color: #C6C6C6;
	border-radius: 0px;
	text-decoration: none;
	margin-right: 0%;
	margin-left: -10%;
	color: #FFF;
}
#dmodelle {
	padding-top: 11px;
	padding-bottom: 11px;
	padding-right: 50%;
	padding-left: 50%;
	background-color: #C6C6C6;
	border-radius: 0px;
	text-decoration: none;
	margin-right: 0%;
	margin-left: -13%;
	color: #FFF;
}
#allewerke:hover {
	color: #FFFFFF;
	background-color: #F47D43;
	transition: 0.4s ease-in-out;
}
#architektur:hover {
	color: #FFFFFF;
	background-color: #E8D100;
	transition: 0.4s ease-in-out;
}
#design:hover {
	color: #FFFFFF;
	background-color: #39D1B4;
	transition: 0.4s ease-in-out;
}
#dmodelle:hover {
	color: #FFFFFF;
	background-color: #E66565;
	transition: 0.4s ease-in-out;
}
/*************************
        Pictures
**************************/
.image {
	position: relative;
	top: 10px;
	height: auto;
	left: 0;
	margin: 20px 0 0 0;
	padding: 0;
	display: block;
	text-align: center;
	width: 100%;
}
.containerarq {
	display: inline-block;
  	position: relative;
  	max-width: 480px;
  	width: 100%;
  	max-height: 320px;
  	height: 0px;
  	margin: 0px;
  	color: rgba(0,0,0,0.4);
  	background: #FFF24D;
  	transition: all 0.5s ease-out;
  	perspective: 1800;
  	perspective-origin: top;
  	text-decoration: none;
  	padding-bottom: 80%;
}
.containerdes {
	display: inline-block;
  	position: relative;
  	max-width: 480px;
  	width: 100%;
  	max-height: 320px;
  	height: 0;
  	margin: 0px;
  	color: rgba(0,0,0,0.4);
  	background: #39D1B4;
  	transition: all 0.5s ease-out;
  	perspective: 1800;
  	perspective-origin: top;
  	text-decoration: none;
  	padding-bottom: 80%;
}
.container3d {
	display: inline-block;
  	position: relative;
  	max-width: 480px;
  	width: 100%;
  	max-height: 320px;
  	height: 0;
  	margin: 0px;
  	color: rgba(0,0,0,0.4);
  	background: #E66565;
  	transition: all 0.5s ease-out;
  	perspective: 1800;
  	perspective-origin: top;
  	text-decoration: none;
  	padding-bottom: 80%;
}
.containerarq600 {
	display: inline-block;
  	position: relative;
  	max-width: 480px;
  	width: 100%;
  	max-height: 642px;
  	height: 0;
  	margin: 0px;
  	color: rgba(0,0,0,0.4);
  	background: #FFF24D;
  	transition: all 0.5s ease-out;
  	perspective: 1800;
  	perspective-origin: top;
  	text-decoration: none;
  	padding-bottom: 149%;
}
.containerdes600 {
	display: inline-block;
  	position: relative;
  	max-width: 480px;
  	width: 100%;
  	max-height: 642px;
  	height: 0;
  	margin: 0px;
  	color: rgba(0,0,0,0.4);
  	background: #39D1B4;
  	transition: all 0.5s ease-out;
  	perspective: 1800;
  	perspective-origin: top;
  	text-decoration: none;
  	padding-bottom: 149%;
}
.container3d600 {
	display: inline-block;
  	position: relative;
  	max-width: 480px;
  	width: 100%;
  	max-height: 642px;
  	height: 0;
  	margin: 0px;
  	color: rgba(0,0,0,0.4);
  	background: #E66565;
  	transition: all 0.5s ease-out;
  	perspective: 1800;
  	perspective-origin: top;
  	text-decoration: none;
  	padding-bottom: 149%;
}
.text {
 	position: absolute;
 	bottom: 0;
  	left: 0;
  	padding: 13px 20px;
  	color: #515151;
  	font-family: Century Gothic;
  	font-size: 0.8em;
}
strong {
 	 color: black;
 	 font-size: 1.2em;
}
.photo {
	max-width: 480px;
	width: 100%;
	max-height: 320px;
	height: 100%;
  	position: absolute;
  	top: 0;
  	left: 0;
  	color: #808080;
  	padding: 0px;
  	
  	transform: rotateX(0deg); 
  	transform-origin: top;	
  	transition: all 1s ease;
}
.photo600 {
	max-width: 480px;
  	width: 100%;
  	max-height: 642px;
  	height: 0;
  	position: absolute;
  	top: 0;
  	left: 0;
  	background-color: whiteSmoke;
  	color: #808080;
  	padding: 0px;
  	padding-bottom: 133%;
  	transform: rotateX(0deg); 
  	transform-origin: top;	
  	transition: all 1s ease;
}
.img2 {
	max-width: 480px;
	max-height: 642px;
	width: 100%;
	height: auto;
}
.image img {
  	max-width: 480px;
  	width: 100%;
  	max-height: 642px;
  	height: auto;
	z-index: 50;
}
.containerarq:hover .photo {
  	transform: rotateX(0deg);
  	transition: all 0.4s ease;
 	box-shadow: 0 0px 0px rgba(0,0,0,0);	
 	opacity: 0.3;
}
.containerarq:hover {
 	background-color: #FFF24D;
   	transition: background 0.45s ease-in;
}

.containerdes:hover .photo {
  	transform: rotateX(0deg);
  	transition: all 0.4s ease;
 	box-shadow: 0 0px 0px rgba(0,0,0,0);	
 	opacity: 0.3;
}
.containerdes:hover {
 	background-color: #39D1B4;
  	transition: background 0.45s ease-in;
}
.container3d:hover .photo {
  	transform: rotateX(0deg);
  	transition: all 0.4s ease;
 	box-shadow: 0 0px 0px rgba(0,0,0,0);	
 	opacity: 0.3;
}
.container3d:hover {
 	background-color: #E66565;
  	transition: background 0.45s ease-in;
}
.containerarq600:hover .photo600 {
  	transform: rotateX(0deg);
  	transition: all 0.4s ease;
 	box-shadow: 0 0px 0px rgba(0,0,0,0);	
 	opacity: 0.3;
}
.containerarq600:hover {
 	background-color: #FFD602;
  	transition: background 0.45s ease-in;
}
.containerdes600:hover .photo600 {
  	transform: rotateX(0deg);
  	transition: all 0.4s ease;
 	box-shadow: 0 0px 0px rgba(0,0,0,0);	
 	opacity: 0.3;
}
.containerdes600:hover {
 	background-color: #39D1B4;
  	transition: background 0.45s ease-in;
}
.container3d600:hover .photo600 {
  	transform: rotateX(0deg);
  	transition: all 0.4s ease;
 	box-shadow: 0 0px 0px rgba(0,0,0,0);	
 	opacity: 0.3;
}
.container3d600:hover {
 	background-color: #E66565;
  	transition: background 0.45s ease-in;
}

/**********************
       Footer
**********************/
footer {
	clear: both;
	text-align: center;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 0.6em;
	z-index: 101;
	margin-bottom: 0px;
	text-align: center;
	padding: 10px 0px;
	position:relative;
   	left:0px;
   	bottom:-70px;
   	height:135px;
   	width:100%;
   	background-color: #FFFFFF;
   	color: #888888;
   	border-top-style: dotted;
	border-width: 1px;
	border-color: #888888;
	margin-right: 0px;
	opacity: 0.7;	
	margin-top: 50px;
}
/**************************
***************************
         PROJECT1
***************************
***************************/
.project1 {
	margin-top: 175px;
	margin-left: 0px;
	margin-bottom: 100px;
}
.imagegallery {
	width: 480px;
	height: 430px;
	overflow-x: scroll;
	overflow-y: hidden;
	white-space: nowrap;
} 
.imagegallery img {
	width: auto;
	height: 100%;
	max-height: 415px;
}
.textproject {
	position: relative;
	top: 90px;
	width: 90%;
	height: 0px;
	text-align: center;
	font-family: Century Gothic;
	font-size: 1em;
	padding-bottom: 30px;
	padding-top: 2px;
	margin-bottom: 0px;
	border-style: solid;
	border-width: 1px;
	border-color: #888888;
	border-radius: 16px;
	margin: auto;
}
.title .textproject strong {
	color: black;
}

/*****************************
******************************
           PROFIL
******************************
******************************/

.profil img {
	margin-top: 110px;
	width: 100%;
	max-width: 480px;
	left: 0px;
}
.box1 {
	width: 100%;
	margin-left: 0px;
}
.box1 p {
		margin-left: 2%;
}
.box2 {
	width: 100%;
	left: 2%;
	position: relative;
	color: #E66565;
	font-size: 1.4em;
	font-family: Century Gothic;
}
.box3 {
	width: 94%;
	left:0px;
	position: relative;
	font-family: Century Gothic;
	font-size: 0.8em;
	background-color: #E66565;
	padding: 3%;
	text-align: justify; 
}
.box4 {
	left: 2%;
	padding-bottom: 0px;
}
.box5 {
	visibility: hidden;
	display: none;
	position: relative;
	width: 33%;
	color: #E66565;
	font-family: Century Gothic;
	font-size: 0.7em;
	text-align: right;
	padding-right: 2%;
	margin-bottom: -325px;
}
.box5 p:nth-child(2) {
	margin-top: 87px;
}
.box5 p:nth-child(3) {
	margin-top: 102px;
}
.box5 p:nth-child(4) {
	margin-top: 71px;
}
.box6 {
	visibility: hidden;
	display: none;
}
.box6handy {
	visibility: visible;
	display: inline-block;
	position: relative;
	width: 96%;
	height: auto;
	left: 0;
	background-color: #E66565;
	font-size: 0.8em;
	font-family: Century Gothic;
	padding: 2%;
}
.fechas {
	color: #FC9D9D;
}
.box6 strong {
	color: black;
	width: 100%;
	left: 0;
}
.box6handy strong {
	color: black;
	width: 100%;
	left: 0;
}
.web {
	padding-right: 2%;
	text-decoration: none;
	color: #FC9D9D;
	float: right;
}
.box7 {
	left: 2%;
}
.box8 {
	visibility: hidden;
	display: none;
}
.box8 p:nth-child(2) {
	margin-top: 37px;
}
.box8 p:nth-child(3) {
	margin-top: 90px;
}
.box9 {
	visibility: hidden;
	display: none;
}
.box9handy {
	visibility: visible;
	display: inline-block;
	position: relative;
	width: 96%;
	height: auto;
	left: 0;
	color: #000;
	background-color: #E66565;
	font-size: 0.8em;
	font-family: Century Gothic;
	padding: 2%;
}
.box9handy p strong {
	color: #000;
}
.box10 {
	position: relative;
	left: 2%;
	font-family: Century Gothic;
	font-size: 1.2em;
	color: #E66565;
	margin-top: 70px;
}
.box11 {
	visibility: hidden;
	display: none;
	width: 35%;
	margin-bottom: -558px;
	left: 0px;
}
.box11 p:nth-child(2) {
	margin-top: 285px;
}
.box11 p:nth-child(3) {
	margin-top: 147px;
}
.box12 {
	visibility: hidden;
	display: none;
}
.box12handy {
	visibility: visible;
	display: inline-block;
	position: relative;
	width: 96%;
	height: auto;
	left: 0;
	background-color: #E66565;
	font-size: 0.8em;
	font-family: Century Gothic;
	padding: 2%;
}
.box12handy p strong {
	color: #000;
}
.box13 {
	position: relative;
	left: 2%;
	font-family: Century Gothic;
	font-size: 1.2em;
	color: #E66565;
	margin-top: 70px;
}
.box14 {
	position: relative;
	width: 48%;
	color: #E66565;
	font-family: Century Gothic;
	font-size: 0.7em;
	text-align: right;
	padding-right: 0;
	padding-bottom: 0;
	margin-right: 0;
	margin-bottom: -645px;
}
.box15 {
	position: relative;
	width: 50%;
	background-color: #E66565;
	height: 700px;
	left: 50%;
	margin-bottom: 60px;
}
#programs {
	height: 628px;
	width: 74%;
	left: 13%;
	margin-top: 6%;
}
.box16 {
	position: relative;
	left: 2%;
	font-family: Century Gothic;
	font-size: 1.2em;
	color: #E66565;
	margin-bottom: 0px;
}
.box17 {
	visibility: hidden;
	display: none;
}
.box18 {
	visibility: hidden;
	display: none;
}
.box18handy {
	visibility: visible;
	display: block;
	position: relative;
	width: 96%;
	height: auto;
	left: 0;
	background-color: #E66565;
	font-size: 0.8em;
	font-family: Century Gothic;
	padding: 2%;
	margin-top: 6px;
}
.box19 {
	position: relative;
	left: 2%;
	font-family: Century Gothic;
	font-size: 1.2em;
	color: #E66565;
	margin-top: 70px;
}
.box20 {
	position: relative;
	width: 96%;
	height: auto;
	left: 0;
	background-color: #E66565;
	font-size: 0.8em;
	font-family: Century Gothic;
	padding-left: 2%;
	padding-right: 2%;
	padding-top: 2%;
	padding-bottom: 40px;
	margin-bottom: 70px;
}
.box21 {
	position: relative;
	font-family: Century Gothic;
	font-size: 1.2em;
	color: #E66565;
	left: 2%;
}
.box22 {
	position: relative;
	background-color: #E66565;
	width: 40%;
	height: 150px;
	left: 0;
	margin-bottom: -135px;
}
.box23 {
	position: relative;
	width: 58%;
	height: auto;
	left: 40%;
	color: #E66565;
	font-size: 0.8em;
	font-family: Century Gothic;
	padding-left: 2%;
	padding-top: 3px;
	padding-bottom: 0px;
	margin-bottom: 0px;
}

/*************************
**************************
         KONTAKT
**************************
**************************/

/***********
 TRANSITION 
************/

.texto {
	top: -500px;
	left:-50%;
	position: relative;
	text-shadow: 0px 0px 0px #949494;
	z-index: 10;
	margin: auto;
	transform: none;
	-webkit-transform: none; /* Chrome, Safari, Opera */
	-moz-transform: none; /* Mozilla */
	-ms-transform: none; /* Explorer */
}
.texto p {
	font-size: 1.7em;
	font-family: Century Gothic, sans-serif;
	font-weight: bold;
	color: #FF9B9B;
}
.bigbox:hover + .kreis1 + .texto {
	left:-50%;
	top: -500px;
	text-shadow: 0px 0px 0px #949494;
	transform: rotate(0deg);
	-webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
	-moz-transform: rotate(0deg); /* Mozilla */
	-ms-transform: rotate(0deg); /* Explorer */
	transition: 0.5s ease-in-out;
	-webkit-transition: 0.5s ease-in-out; /* Chrome, Safari, Opera */
	-moz-transition: 0.5s ease-in-out; /* Mozilla */
	-ms-transition: 0.5s ease-in-out; /* Explorer */
}
/*************
    INHALT
**************/

.centrar {
	position: relative;
	margin: auto;
	width: 100%;
	max-width: 480px;
	text-align: center;
	height: auto;
	margin-bottom: 340px;
}
.bigbox {
	position: relative;
	opacity: 0.8;
	width: 100%;
	top: -150px;
	left:-50%;
	z-index: 100;
}
.box {
	position: relative;
	text-align: center;
	margin-top: 20px;
	line-height: 20px;
	text-align: center;
	padding: 0px 0px;
	border-radius: 5px;
	font-family: Century Gothic;
	font-size: 0.9em;
	width: 100%;
}
.box:hover {
	background-color: #A84040;
	padding-bottom:2%;
}
input#name:focus {
	box-shadow: 0px 0px 12px #e66565;
	background: #ffffff;
}
input#email:focus {
	box-shadow: 0px 0px 12px #e66565;
	background: #ffffff;
}
input#message:focus {
	box-shadow: 0px 0px 12px #e66565;
	background: #ffffff;
}
#name, #email {
	left: 50%;
	width: 90%;
	height: 35px;
	background-color: #d8d8d8;
	color: #7A7A7A;
	border-radius: 8px;
	font-size: 100%;
	text-indent: 10px;
	text-align: center;
	font-family: Century Gothic;
}
#message {
	left: 50%;
	width: 90%;
	height: 135px;
	background-color: #d8d8d8;
	color: #7A7A7A;
	border-radius: 8px;
	font-size: 100%;
	text-indent: 10px;
	text-align: center;
	font-family: Century Gothic;
	padding: 0px;
}
#absenden {
	position: relative;
	top: 30px;
	left: 0%;
	height: 100px;
	width: 100px;
	color: #FFFFFF;
	font-family: Century Gothic;
	font-size: 100%;
	background-color: #FF9B9B;
	border-radius: 50px;
	box-shadow: 0px 0px 6px #555555;
	border-style: solid;
	border-width: 0px;
	cursor: pointer;
	opacity: 0.8;
	padding-bottom: 5px;
}
#absenden:hover {
	background-color: #e66565;
	border-style: solid;
	border-width: 1px;
	transition: 0.5s;
	-webkit-transition: 0.5s; /* Chrome, Safari, Opera */
	-moz-transition: 0.5s; /* Mozilla */
	-ms-transition: 0.5s; /* Explorer */
	transform: rotate(-15deg);
	-webkit-transform: rotate(-15deg); /* Chrome, Safari, Opera */
	-moz-transform: rotate(-15deg); /* Mozilla */
	-ms-transform: rotate(-15deg); /* Explorer */
}
.kreis1 {
	visibility: hidden;
	display: none;
}
.kreis2 {
	visibility: hidden;
	display: none;
}
.kreis3 {
	visibility: hidden;
	display: none;
}
.kreis4 {
	visibility: hidden;
	display: none;
}

/********** GOOGLE CHROME ADJUST ********/

@media screen and (-webkit-min-device-pixel-ratio:0) {

    .box14 {margin-bottom: -620px;}
    #programs {height: 580px;
    	margin-top: 18%;
}
}