
/***************************************
****************************************
               General
****************************************
****************************************/
body {
	position: absolute;
	margin-left: -470px;
	left: 50%;
	width: 986px;
}
.navbar li a span {
	font-size: 1em;
	color: #888888;
	padding-right: 8px;
}
body .icono a {
	font-size: 1.2em;
	color: #fff;
	padding-bottom: 18px;
	padding-right: 20px;
	padding-top: 13px;
	padding-left: 20px;
	background-color: #C8C8C8;
	text-decoration: none;
	margin-left: 893px;
	margin-top: 0px;
	position: absolute;
}

body .icono a:hover {
	font-size: 1.2em;
	color: #FFFFFF;
	padding-bottom: 18px;
	padding-right: 20px;
	padding-top: 13px;
	padding-left: 20px;
	background-color: #000;
	text-decoration: none;
	margin-left: 893px;
}

/*************************************** 
  Fixed elements / NAVIGATION BAR 
****************************************/
.container{
	width: 100%;
	max-width: 1000px;
	margin:0 auto;
	overflow: hidden;
	position: relative;
}
.bar1 {
	position:fixed;
	z-index: 101;
	width: 100%;
	max-width: 986px;
	height: 54px;
	background-color: rgba(255, 255, 255, 0);
	text-align: right;
	padding: 2px 0px;
	top: 0px;
	border-bottom-style: dotted;
	border-width: 0px;
	border-color: #888888;
}
.bar1 ul li {
	display: inline;
	background-color: rgba(255, 255, 255, 0.9);
	padding-bottom: 10px;
	padding-right: 10px;
	padding-top: 30px;
	padding-left: 5px;
}
.navbar {
	margin-top: 22px;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 0.9em;
	margin-right: -15px;
	position: relative;
	padding-bottom: 17px;	
}
.background {
	position: fixed;
	z-index: -50;
	opacity: 0.4;
	top: 0px;
	left: 0%;
	width:100%;
    height:100%;
    background: url(../img/fondo/image2.jpg) no-repeat fixed center;
    background: rgb(0,0,0,0.5);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    animation: animacionColor 60s infinite;
}
.background1 {
	position: fixed;
	z-index: -50;
	opacity: 0.3;
	top: 0px;
	left: 0%;
	width:100%;
    height:100%;
    background: url(../img/fondo/image6.jpg) no-repeat fixed center;
    background: rgb(0,0,0,0.5);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    animation: animacionColor 60s infinite;
}
.background2 {
	position: fixed;
	z-index: -50;
	opacity: 0.4;
	top: 0px;
	left: 0%;
	width:100%;
    height:100%;
    background: url(../img/fondo/image5.jpg) no-repeat fixed center;
    background: rgb(0,0,0,0.5);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    animation: animacionColor 60s infinite;
}
.background3 {
	position: fixed;
	z-index: -50;
	opacity: 0.4;
	top: 0px;
	left: 0%;
	width:100%;
    height:100%;
    background: url(../img/fondo/image3.jpg) no-repeat fixed center;
    background: rgb(0,0,0,0.5);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    animation: animacionColor 60s infinite;
}
.img3 {
	width: 990px;
	height: auto;
	opacity: 0.5;
}
.logomco {
	float: left;
	margin-top: -15px;
	margin-left: 3px;
	width: 109px;
	height: 65px;
	z-index: 200;
}



/************************
    Animated languages
*************************/

.pruebaidiomas {
	clip:rect(0 21px 21px 0);
	position: absolute;
	top: 32px;
	left: 120px;
	display: inline;
	overflow: visible;
}
#idiomas {
	margin-left: 2px;
	color: #515151;
  	font-family: Century Gothic;
  	font-size: 0.9em;
  	text-decoration: none;
}
#idiomas:hover {
	margin-left: -18px;
	transition: 0.4s ease-in-out;
}

/****************************
      static languages
*****************************/

.languages {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 0.7em;
	margin-left: 83px;
	position: relative;
	top: -36px;
	text-align: left;
	display: none;
	overflow: hidden;
}
#de, #es {
	color: #888888;
	text-decoration: none;
}
#de:hover, #es:hover {
	color: #181818;
	text-decoration: none;
}
#werk, #profil, #kontakt {
	padding-left: 15px;
	padding-top: 50px;
	padding-right: 15px;
	padding-bottom: 5px;
	text-decoration: none;
	color: #888888;
	font-family: fuente;
	font-size: 1.2em;
}
@font-face {
	font-family: fuente;
	src: url(../fonts/duepuntozero_regular.otf);
}
#werk:hover , #profil:hover , #kontakt:hover {
	color: #181818;
	transition: 0.2s ease-in-out;
}




/*************************************** 
   mobile elements / NAVIGATION BAR 2
****************************************/
.content {
	position: relative;

}
.bar2 ul li {
	display: inline;
}
.bar2 {
	z-index: 1;
	position: relative;
	width: 100%;
	height: 50px;
	margin-bottom: 10px;
	text-align: center;
	padding: 2px 19px;
	top: 50px;
	left: 0px;
}
.navbar2 {
	margin-top: 25px;
	font-family: fuente;
	font-size: 1.1em;
	margin-right: 75px;
	position: relative;
}
#allewerke, #architektur, #design, #dmodelle {
	padding-left: 15px;
	padding-top: 50px;
	padding-right: 15px;
	padding-bottom: 5px;
	text-decoration: none;
	color: #888888;
}
#allewerke:hover {
	color: #F47D43;
	transition: 0.4s ease-in-out;
}
#architektur:hover {
	color: #E8D100;
	transition: 0.4s ease-in-out;
}
#design:hover {
	color: #39D1B4;
	transition: 0.4s ease-in-out;
}
#dmodelle:hover {
	color: #E66565;
	transition: 0.4s ease-in-out;
}
/*************************
        Pictures
**************************/

.image {
	position: relative;
	top: 47px;
	height: auto;
	margin-bottom: 55px;	
}
.containerarq {
	display: inline-block;
  	position: relative;
  	max-width: 326px;
  	width: 100%;
  	height: 218px;
  	margin: 0px;
  	color: rgba(0,0,0,0.4);
  	background: #333;
  	transition: all 0.5s ease-out;
  	perspective: 1800;
  	perspective-origin: top;
  	text-decoration: none;
}
.containerdes {
	display: inline-block;
  	position: relative;
  	max-width: 326px;
  	width: 100%;
  	height: 218px;
  	margin: 0px;
  	color: rgba(0,0,0,0.4);
  	background: #333;
  	transition: all 0.5s ease-out;
  	perspective: 1800;
  	perspective-origin: top;
  	text-decoration: none;
}
.container3d {
	display: inline-block;
  	position: relative;
  	max-width: 326px;
  	width: 100%;
  	height: 218px;
  	margin: 0px;
  	color: rgba(0,0,0,0.4);
  	background: #333;
  	transition: all 0.5s ease-out;
  	perspective: 1800;
  	perspective-origin: top;
  	text-decoration: none;
}
.containerarq600 {
	display: inline-block;
  	position: relative;
  	max-width: 326px;
  	width: 100%;
  	height: 436px;
  	margin: 0px;
  	color: rgba(0,0,0,0.4);
  	background: #333;
  	transition: all 0.5s ease-out;
  	perspective: 1800;
  	perspective-origin: top;
  	text-decoration: none;
}
.containerdes600 {
	display: inline-block;
  	position: relative;
  	max-width: 326px;
  	width: 100%;
  	height: 436px;
  	margin: 0px;
  	color: rgba(0,0,0,0.4);
  	background: #333;
  	transition: all 0.5s ease-out;
  	perspective: 1800;
  	perspective-origin: top;
  	text-decoration: none;
}
.container3d600 {
	display: inline-block;
  	position: relative;
  	max-width: 326px;
  	width: 100%;
  	height: 436px;
  	margin: 0px;
  	color: rgba(0,0,0,0.4);
  	background: #333;
  	transition: all 0.5s ease-out;
  	perspective: 1800;
  	perspective-origin: top;
  	text-decoration: none;
}
.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: 326px;
  	position: absolute;
  	top: 0;
  	left: 0;
  	color: #808080;
  	padding: 0px;
  	height: 218px;
  	transform: rotateX(0deg); 
  	transform-origin: top;	
  	transition: all 1s ease;
}
.photo600 {
	max-width: 326px;
  	width: 100%;
  	position: absolute;
  	top: 0;
  	left: 0;
  	background-color: whiteSmoke;
  	color: #808080;
  	padding: 0px;
  	height: 436px;
  	transform: rotateX(0deg); 
  	transform-origin: top;	
  	transition: all 1s ease;
}
#slideshow-inner ul li img {
  	width: 990px;
  	height: 495px;
	z-index: 50;
}
img {
  	width: 326px;
  	height: 218px;
	z-index: 50;
}
.img2 {
	width: 326px;
	height: 436px;
}
.containerarq:hover .photo {
  	transform: rotateX(36deg);
  	transition: all 0.4s ease;
 	box-shadow: 0 6px 5px rgba(0,0,0,0.2);	
 	opacity: 0.3;
}
.containerarq:hover {
 	background-color: #FFF24D;
   	transition: background 0.45s ease-in;
}
.containerdes:hover .photo {
  	transform: rotateX(36deg);
  	transition: all 0.4s ease;
 	box-shadow: 0 6px 5px rgba(0,0,0,0.2);	
 	opacity: 0.3;
}
.containerdes:hover {
 	background-color: #39D1B4;
  	transition: background 0.45s ease-in;
}
.container3d:hover .photo {
  	transform: rotateX(36deg);
  	transition: all 0.4s ease;
 	box-shadow: 0 6px 5px rgba(0,0,0,0.2);	
 	opacity: 0.3;
}
.container3d:hover {
 	background-color: #E66565;
  	transition: background 0.45s ease-in;
}
.containerarq600:hover .photo600 {
  	transform: rotateX(28deg);
  	transition: all 0.4s ease;
 	box-shadow: 0 6px 5px rgba(0,0,0,0.2);	
 	opacity: 0.3;
}
.containerarq600:hover {
 	background-color: #FFD602;
  	transition: background 0.45s ease-in;
}
.containerdes600:hover .photo600 {
  	transform: rotateX(28deg);
  	transition: all 0.4s ease;
 	box-shadow: 0 6px 5px rgba(0,0,0,0.2);	
 	opacity: 0.3;
}
.containerdes600:hover {
 	background-color: #39D1B4;
  	transition: background 0.45s ease-in;
}
.container3d600:hover .photo600 {
  	transform: rotateX(28deg);
  	transition: all 0.4s ease;
 	box-shadow: 0 6px 5px rgba(0,0,0,0.2);	
 	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:0px;
   	height:52px;
   	width:100%;
   	background-color: #FFFFFF;
   	color: #888888;
   	border-top-style: solid;
	border-width: 1px;
	border-color: #888888;
	margin-right: 25px;
	opacity: 0.7;	
}


/**************************
***************************
         PROJECT1
***************************
***************************/
.project1 {
	margin-top: 80px;
}
.imagegallery {
	width: 990px;
	height: 566px;
	overflow-x: scroll;
	overflow-y: hidden;
	white-space: nowrap;
} 
.imagegallery img {
	width: auto;
	height: 100%;
	max-height: 560px;
}
.textproject {
	position: relative;
	top: 70px;
	width: 100%;
	height: 20px;
	text-align: left;
	font-family: Century Gothic;
	font-size: 1em;
	border-bottom-style: solid;
	border-width: 1px;
	border-color: #888888;
	padding-bottom: 16px;
	margin-bottom: 0px;
}
.title .textproject strong {
	color: black;
}
.title {
	margin-top: 20px;
}
/*****************************
******************************
           PROFIL
******************************
******************************/
.profil {
	position: relative;
	margin-bottom: 35px;
}
.profil img {
	margin-top: 80px;
	position: relative;
	width: 330px;
	height: 100%;
	left: 660px;
	margin-bottom: -30px;
}
.box1 {
	position: relative;
	padding-bottom: 80px;
	background: #E66565;
	color: #FFFFFF;
	width: 660px;
	font-family: Century Gothic;
	font-size: 1.5em;
}
.box1 p {
	padding-left: 5px;
}
.box2 {
	position: relative;
	color: #E66565;
	font-size: 1.4em;
	left: 660px;
	width: 330px;
	font-family: Century Gothic;
}
.box3 {
	position: relative;
	left:330px;
	font-family: Century Gothic;
	font-size: 0.8em;
	background-color: #E66565;
	padding: 10px;
	width: 310px;
	text-align: justify; 
}
.box4 {
	position: relative;
	left: 0px;
	font-family: Century Gothic;
	font-size: 1.2em;
	color: #E66565;
	margin-top: 70px;
}
.box5 {
	visibility: visible;
	display: block;
	position: relative;
	width: 325px;
	color: #E66565;
	font-family: Century Gothic;
	font-size: 0.7em;
	text-align: right;
	padding-right: 5px;
	margin-bottom: -295px;
}
.box5 p:nth-child(2) {
	margin-top: 71px;
}
.box5 p:nth-child(3) {
	margin-top: 85px;
}
.box5 p:nth-child(4) {
	margin-top: 52px;
}
.box6 {
	visibility: visible;
	display: inline-block;
	position: relative;
	width: 650px;
	height: auto;
	left: 330px;
	background-color: #E66565;
	font-size: 0.8em;
	font-family: Century Gothic;
	padding-left: 10px;
	padding-top: 1px;
}
.box6handy {
	visibility: hidden;
	display: none;
}
.box6 strong {
	color: black;
}
.box7 {
	position: relative;
	left: 0px;
	font-family: Century Gothic;
	font-size: 1.2em;
	color: #E66565;
	margin-top: 70px;
}
.web {
	padding-right: 10px;
	text-decoration: none;
	color: #FC9D9D;
	float: right;
}
.web:hover {
	text-decoration: underline;
	font-weight: bold;
}
.box8 {
	visibility: visible;
	display: block;
	position: relative;
	width: 325px;
	background-color: #E66565;
	font-family: Century Gothic;
	font-size: 0.7em;
	text-align: right;
	padding-right: 5px;
	padding-bottom: 25px;
	padding-top: 4px;
	margin-bottom: -205px;
}
.box8 p:nth-child(2) {
	margin-top: 37px;
}
.box8 p:nth-child(3) {
	margin-top: 68px;
}
.box9 {
	visibility: visible;
	display: inline-block;
	position: relative;
	width: 655px;
	height: auto;
	left: 330px;
	color: #E66565;
	font-size: 0.8em;
	font-family: Century Gothic;
	padding-left: 10px;
	padding-top: 1px;
}
.box9handy {
	visibility: hidden;
	display: none;
}
.title strong {
	color: #E66565;
}
p strong {
	color:#E66565;
}
.box10 {
	position: relative;
	left: 0px;
	font-family: Century Gothic;
	font-size: 1.2em;
	color: #E66565;
	margin-top: 90px;
}
.box11 {
	visibility: visible;
	display: block;
	position: relative;
	width: 325px;
	color: #E66565;
	font-family: Century Gothic;
	font-size: 0.7em;
	text-align: right;
	padding-right: 5px;
	padding-bottom: 0px;
	margin-bottom: -445px;
	-webkit-margin-bottom: -645px;
}


.box11 p:nth-child(2) {
	margin-top: 185px;
}
.box11 p:nth-child(3) {
	margin-top: 83px;
}
.box12 strong {
	color: black;
}
.box12 {
	visibility: visible;
	display: inline-block;
	position: relative;
	width: 650px;
	height: auto;
	left: 330px;
	background-color: #E66565;
	font-size: 0.8em;
	font-family: Century Gothic;
	padding-left: 10px;
	padding-top: 106px;
}
.box12handy {
	visibility: hidden;
	display: none;
}
.box13 {
	position: relative;
	left: 0px;
	font-family: Century Gothic;
	font-size: 1.2em;
	color: #E66565;
	margin-top: 70px;
	margin-bottom: 40px;
}
.box14 {
	position: relative;
	width: 170px;
	color: #E66565;
	font-family: Century Gothic;
	font-size: 0.7em;
	text-align: right;
	padding-right: 5px;
	padding-bottom: 8px;
	margin-right: 5px;
	margin-bottom: -674px;
}
.box15 {
	position: relative;
	width: 155px;
	background-color: #E66565;
	height: 700px;
	left: 175px;
	margin-bottom: -540px;
}
#programs {
	height: 625px;
	width: 125px;
	left: 15px;
	margin-top: 35px;
}
.box16 {
	position: relative;
	left: 350px;
	font-family: Century Gothic;
	font-size: 1.2em;
	color: #E66565;
	margin-bottom: 20px;
}
.box17 {
	visibility: visible;
	display: block;
	position: relative;
	width: 145px;
	color: #E66565;
	font-family: Century Gothic;
	font-size: 0.7em;
	text-align: right;
	padding-right: 5px;
	padding-bottom: 8px;
	left: 370px;
	margin-bottom: -140px;
}
.box17es {
	position: relative;
	width: 145px;
	color: #E66565;
	font-family: Century Gothic;
	font-size: 0.7em;
	text-align: right;
	padding-right: 5px;
	padding-bottom: 8px;
	left: 370px;
	margin-bottom: -150px;
}
.box17 p:nth-child(2) {
	margin-top: 32px;
}
.box17 p:nth-child(3) {
	margin-top: 30px;
}
.box18 {
	visibility: visible;
	display: inline-block;
	position: relative;
	width: 450px;
	height: auto;
	left: 530px;
	background-color: #E66565;
	font-size: 0.8em;
	font-family: Century Gothic;
	padding-left: 10px;
	padding-top: 3px;
	padding-bottom: 4px;
}
.box18handy {
	visibility: hidden;
	display: none;
}
.box19 {
	position: relative;
	left: 410px;
	font-family: Century Gothic;
	font-size: 1.2em;
	color: #E66565;
	margin-top: 131px;
}
.box20 {
	position: relative;
	width: 460px;
	height: auto;
	left: 530px;
	background-color: #E66565;
	font-size: 0.8em;
	font-family: Century Gothic;
	padding-left: 0px;
	padding-top: 3px;
	padding-bottom: 80px;
	margin-bottom: -25px;
}
.box21 {
	position: relative;
	font-family: Century Gothic;
	font-size: 1.2em;
	color: #E66565;
	left: 350px;
}
.box22 {
	position: relative;
	background-color: #E66565;
	width: 200px;
	height: 150px;
	left: 330px;
	margin-bottom: -135px;
}
.box23 {
	position: relative;
	width: 505px;
	height: auto;
	left: 380px;
	color: #E66565;
	font-size: 0.8em;
	font-family: Century Gothic;
	padding-left: 162px;
	padding-top: 3px;
	padding-bottom: 4px;
	margin-bottom: 140px;
}

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

.centrar {
	position: relative;
	top: 350px;
	left: 50%;
	margin-top: -380px;
	margin-left: -738px;
	margin-bottom: 1200px;
}
.texto p {
	font-size: 35px;
	font-family: Century Gothic, sans-serif;
	font-weight: bold;
	color: #FF9B9B;
}

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

.kreis1 {
	position: absolute;
	width: 50px;
	height: 50px;
	background-color: #FF9B9B;
	border-radius: 25px;
	top:484px;
	left: 420px;
	z-index: -8;
	transform: rotate(-8deg);
	-webkit-transform: rotate(-8deg); /* Chrome, Safari, Opera */
	-moz-transform: rotate(-8deg); /* Mozilla */
	-ms-transform: rotate(-8deg); /* Explorer */
}
.texto {
	position: relative;
	top: 75px;
	left:403px;
	text-shadow: 2px 2px 0px #949494;
	z-index: -1;
	transform: rotate(-10deg);
	-webkit-transform: rotate(-10deg); /* Chrome, Safari, Opera */
	-moz-transform: rotate(-10deg); /* Mozilla */
	-ms-transform: rotate(-10deg); /* Explorer */
}


/*************
    INHALT
**************/


.bigbox {
	position: absolute;
	height: 250px;
	width: 560px;
	opacity: 0.8;
	top: 250px;
	left:435px;
	z-index: 100;
}
.bigbox:hover + .kreis1 {
	left: 242px;
	top: 197px;
	background-color: #e66665;
	border-radius: 0px;
	width: 990px;
	height: 375px;
	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 */
}
.bigbox:hover + .kreis1 + .texto {
	left:564px;
	top: 210px;
	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 */
}
.bigbox:hover + .kreis1 + .texto + .kreis2 {
	top: 520px;
	left: 1200px;
	background-color: #FF9B9B;
	transition: 1s ease-in-out;
	-webkit-transition: 1s ease-in-out; /* Chrome, Safari, Opera */
	-moz-transition: 1s ease-in-out; /* Mozilla */
	-ms-transition: 1s ease-in-out; /* Explorer */
	transition-delay: 0.2s;
	-webkit-transition-delay: 0.2s; /* Chrome, Safari, Opera */
	-moz-transition-delay: 0.2s; /* Mozilla */
	-ms-transition-delay: 0.2s; /* Explorer */
}
.bigbox:hover + .kreis1 + .texto + .kreis2 + .kreis3 {
	top: 540px;
	left: 1190px;
	background-color: #FF9B9B;
	transition: 1s ease-in-out;
	-webkit-transition: 1s ease-in-out; /* Chrome, Safari, Opera */
	-moz-transition: 1s ease-in-out; /* Mozilla */
	-ms-transition: 1s ease-in-out; /* Explorer */
	transition-delay: 0.4s;
	-webkit-transition-delay: 0.4s; /* Chrome, Safari, Opera */
	-moz-transition-delay: 0.4s; /* Mozilla */
	-ms-transition-delay: 0.4s; /* Explorer */
}
.bigbox:hover + .kreis1 + .texto + .kreis2 + .kreis3 + .kreis4 {
	top: 550px;
	left: 1170px;
	background-color: #FF9B9B;
	transition: 1s ease-in-out;
	-webkit-transition: 1s ease-in-out; /* Chrome, Safari, Opera */
	-moz-transition: 1s ease-in-out; /* Mozilla */
	-ms-transition: 1s ease-in-out; /* Explorer */
	transition-delay: 0.6s;
	-webkit-transition-delay: 0.6s; /* Chrome, Safari, Opera */
	-moz-transition-delay: 0.6s; /* Mozilla */
	-ms-transition-delay: 0.6s; /* Explorer */
}
.box {
	margin-top: 10px;
	line-height: 10px;
	text-align: right;
	padding: 3px 3px;
	border-radius: 5px;
	font-family: Century Gothic;
	font-size: 0.9em;
}
.box:hover {
	background-color: #A84040;
}
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 {
	margin: 0px 10px 0px 10px;
	width: 420px;
	height: 35px;
	background-color: #d8d8d8;
	color: #7A7A7A;
	border-radius: 8px;
	font-size: 80%;
	text-indent: 10px;
	text-align: center;
	font-family: Century Gothic;
}
#message {
	margin: 0px 10px 0px 10px;
	width: 420px;
	height: 135px;
	background-color: #d8d8d8;
	color: #7A7A7A;
	border-radius: 8px;
	font-size: 80%;
	text-indent: 10px;
	text-align: center;
	font-family: Century Gothic;
}
#absenden {
	position: absolute;
	top: 250px;
	left: 0px;
	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 */
}

/*************
 kreis extra
 *************/

.kreis2 {
	position: absolute;
	width: 14px;
	height: 14px;
	background-color: #ffffff;
	border-radius: 7px;
	top:520px;
	left: 1230px;
	z-index: -3;
}
.kreis3 {
	position: absolute;
	width: 14px;
	height: 14px;
	background-color: #ffffff;
	border-radius: 7px;
	top:560px;
	left: 1220px;
	z-index: -3;
}
.kreis4 {
	position: absolute;
	width: 14px;
	height: 14px;
	background-color: #ffffff;
	border-radius: 7px;
	top:572px;
	left: 1200px;
	z-index: -3;
	margin-bottom: 200px;
}


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

@media screen and (-webkit-min-device-pixel-ratio:0) {
    .box11 {margin-bottom: -437px;}
    .box5 {margin-bottom: -285px;}
    .box8 {margin-bottom: -197px;}
    .box14 {margin-bottom: -630px;}
    #programs {
	height: 585px;
	width: 125px;
	left: 15px;
	margin-top: 35px;}
	.box15 {margin-bottom: -525px;}
	#name, #email {width: 418px;}
	#message {width: 418px;}
}

