body {margin: 0; padding: 0; background: #E6E5E2; font-family: 'Maven Pro', sans-serif; xbackground-image: url(/grafik/bg_wood1.jpg);}

#name{
width: 500px; height: 500px;
-webkit-border-radius: 255px 255px 255px 255px;
border-radius: 255px 255px 255px 255px;
background-color: rgba(10, 120, 135, 5);
color: rgba(10, 120, 135, 5);
}

#page{
position: absolute;
top: 50%;
left: 50%;
width: 850px;  /* // Inhalts Breite */
height: 500px;   /* // Inhalts Höhe  */
margin-top: -250px;  /* //Höhe /2 */
margin-left: -425px;   /* //Breite /2  */
-webkit-box-shadow: 0 0 10px 0 #CDCAC3;
box-shadow: 0 0 10px 0 #CDCAC3;
x-webkit-box-shadow: 0 0 10px 0 #000;
xbox-shadow: 0 0 10px 0 #000;
background: #F2F1EE;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}

#page:hover {background: #fff;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}



#circle{position: relative; z-index: 2; height: 200px; width: 200px; margin: 30px auto; background-color: #038CB9; opacity: 0.24; -moz-border-radius: 999px 999px; -webkit-border-radius: 999px 999px;}
h1#jens-plachetka{position: relative; z-index: 99; margin: 90px auto 0 auto; text-align: center; width: 810px; font-size: 3.25em; font-family: 'Pacifico', cursive; font-weight: normal; boxrder-top: 2px solid #000; boxrder-bottom: 2px solid #000; color: #006B73;}
.headimg {width: 810px; height: 260px; backgxround: #E6E5E2; border-top: 2px solid #000; border-bottom: 2px solid #000;}
.box {float: left; margin: 20px 0 0 20px; -moz-transition: all 0.5s linear; -webkit-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear; }
ul#navi{float: left; clear: left; width: 810px; margin: 0 20px 0 20px; padding: 0 0 1px 0; border-bottom: 2px solid #000; list-style: none;}
ul#navi li{ xfloat: left; margin: 1px 0 0 0; display: block; border-right: 1px solid #fff;}
#navi li a{margin: 0 0 0 0; padding: 10px 20px 10px 20px; display: block; background: #E6E5E2; background: #000; color: #fff;}

.social {width: 810px; padding: 0; backgrxound: red;}
.social ul{float: left; width: 100%; margin: 0 0 0 130px; padding: 0; list-style: none; text-align: center;}
.social ul li{float: left; margin-right: 100px;}
.social li a {float: left; width: 150px; height: 50px;}
.social li a span{float: left; position: relative; top: 15px; left: 55px; margin: 0; padding: 0;}

.icon {float: left; -webkit-border-radius: 90px; border-radius: 90px; text-align: center;}
#icon_mail {text-align: center;width: 50px; height: 50px; background: url(grafik/icon_mail_hover.png) center center no-repeat #E6E5E2; -moz-transition: all 0.5s linear; -webkit-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear;}
#icon_mail:hover {width: 50px; height: 50px; background: url(grafik/icon_mail2.png) center center no-repeat #571C17; -moz-transition: all 0.5s linear; -webkit-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear;}
#icon_facebook {text-align: center;width: 50px; height: 50px; background: url(grafik/icon_fb_hover.png) center center no-repeat #E6E5E2; -moz-transition: all 0.5s linear; -webkit-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear;}
#icon_facebook:hover {width: 50px; height: 50px; background: url(grafik/icon_fb.png) center center no-repeat #172C57; -moz-transition: all 0.5s linear; -webkit-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear;}
#icon_twitter {text-align: center;width: 50px; height: 50px; background: url(grafik/icon_twitter_hover.png) center center no-repeat #E6E5E2; -moz-transition: all 0.5s linear; -webkit-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear;}
#icon_twitter:hover {width: 50px; height: 50px; background: url(grafik/icon_twitter.png) center center no-repeat #175357; -moz-transition: all 0.5s linear; -webkit-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear;}
#icon_projects {text-align: center;width: 50px; height: 50px; background: url(grafik/icon_projects_hover.png) center center no-repeat #E6E5E2; -moz-transition: all 0.5s linear; -webkit-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear;}
#icon_projects:hover {width: 50px; height: 50px; background: url(grafik/icon_projects.png) center center no-repeat #4F1845; -moz-transition: all 0.5s linear; -webkit-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear;}


address {float: left; width: 770px; margin: 0 20px 0 20px; padding: 20px; border-bottom: 2px solid #000; font-size: 0.85em; font-weight: normal; text-transform: uppercase; font-style: normal; text-align: center;}

a {font-weight: bold; font-size: .95em; color: #000; text-decoration: none; text-transform: uppercase;}
.social, .social a{coxlor: #fff;}

/* SLIDER */

#slidebox {float: left; width: 810px; margin: 20px 0 0 20px; padding: 0 0 20px 0; border-bottom: 1px solid #000;}
ul#slider {float: left; margin: 0; padding: 0; text-align: center;}
.bx-wrapper{position:relative;zoom:1;margin:0 auto 60px;padding:0}
.bx-wrapper img{max-width:100%;display:block}
.bx-wrapper .bx-viewport{backxground:#fff}
.bx-wrapper .bx-pager,.bx-wrapper .bx-controls-auto{position:absolute;bottom:-30px;width:100%}
.bx-wrapper .bx-loading{min-height:50px;height:100%;width:100%;position:absolute;top:0;left:0;z-index:2000}
.bx-wrapper .bx-pager{text-align:center;font-size:.85em;font-family:Arial;font-weight:700;color:#666;padding-top:20px}
.bx-wrapper .bx-pager .bx-pager-item,.bx-wrapper .bx-controls-auto .bx-controls-auto-item{zoom:1;display:inline}
.bx-wrapper .bx-pager.bx-default-pager a{background:#666;text-indent:-9999px;display:block;width:10px;height:10px;outline:0;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;margin:0 5px}
.bx-wrapper .bx-pager.bx-default-pager a:hover,.bx-wrapper .bx-pager.bx-default-pager a.active{background:#000}
.bx-wrapper .bx-prev{left:-60px;background:url(/grafik/prev.png) no-repeat}
.bx-wrapper .bx-next{right:-60px;background:url(/grafik/next.png) no-repeat}
.bx-wrapper .bx-controls-direction a{position:absolute;top:50%;margin-top:-30px;outline:0;width:20px;height:65px;text-indent:-9999px;z-index:9999}
.bx-wrapper .bx-controls-direction a.disabled{display:none}
.bx-wrapper .bx-controls-auto{text-align:center}
.bx-wrapper .bx-controls-auto .bx-start{display:block;text-indent:-9999px;width:10px;height:11px;outline:0;margin:0 3px}
.bx-wrapper .bx-controls-auto .bx-start:hover,.bx-wrapper .bx-controls-auto .bx-start.active{background-position:-86px 0}
.bx-wrapper .bx-controls-auto .bx-stop{display:block;text-indent:-9999px;width:9px;height:11px;outline:0;margin:0 3px}
.bx-wrapper .bx-controls-auto .bx-stop:hover,.bx-wrapper .bx-controls-auto .bx-stop.active{background-position:-86px -33px}
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager{text-align:left;width:80%}
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto{right:0;width:35px}
.bx-wrapper .bx-caption{position:absolute;bottom:0;left:0;background:rgba(80,80,80,0.75);width:100%}
.bx-wrapper .bx-caption span{color:#fff;font-family:Arial;display:block;font-size:.85em;padding:10px}
.bx-wrapper .bx-prev:hover,.bx-wrapper .bx-next:hover{background-position: 0 -70px}

/*RESPONSIVE 480, 260*/

@media only screen and (max-width:  1068px) {
#page {top: 0; left: 0; min-height: 580px; position: relative; width: 400px; margin: 20px auto 0 auto; padding: 0 0 0 0;
-webkit-box-shadow: 0 0 0 0 #CDCAC3;
box-shadow: 0 0 0 0 #CDCAC3;
x-webkit-box-shadow: 0 0 0 0 #000;
xbox-shadow: 0 0 0 0 #000;
}
h1#jens-plachetka {width: 100%; margin: 80px 0 0 0; padding: 0;font-size: 2.55em;}
.headimg {width: 360px; margin: 20px 0 0 20px; padding: 0;}
.social {float: left; width: 380px; margin: 20px 0 20px 20px; padding: 0; left: 0;}
address {width: 320px;}
.social ul{margin: 0 0 0 0; padding: 0;  dixsplay: none;}
.social ul li{margin: 0 20px 20px 20px; padding: 0;}
.social ul li a{margin: 0; padding: 0; width: 80px;}
.social ul li a span{display: none;}
#slidebox {width: 360px; margin: 0 0 0 20px; padding:20px 0 20px 0;}
.bx-wrapper .bx-prev{left:-30px;background:url(/grafik/prev.png) no-repeat}
.bx-wrapper .bx-next{right:-30px;background:url(/grafik/next.png) no-repeat}
.bx-wrapper {width: 300px; min-height: 70px;}
}

@media only screen and (max-width: 400px) {
body {background: #fff;}
#page {top: 0; left: 0; width: 100%; margin: 0; padding: 0 0 0 0;
-webkit-box-shadow: 0 0 0 0 #CDCAC3;
box-shadow: 0 0 0 0 #CDCAC3;
x-webkit-box-shadow: 0 0 0 0 #000;
xbox-shadow: 0 0 0 0 #000;
background: #FFFFFF;
}
h1#jens-plachetka {width: 100%; margin: 80px 0 0 0; padding: 0;font-size: 2.55em;}
.headimg {width: 100%; margin: 20px 0 0 0; padding: 0;}
.social {fxloat: left; width: 100%; margin: 20px 0 20px 0; padding: 0; left: 0;}
address {width: 100%; margin: 20px 0 0 0; padding: 0 0 20px 0;}
.social ul{float: left; margin: 0 0 0 0; padding: 0;  dixsplay: none;}
.social ul li{margin: 0 15px 20px 15px; padding: 0;}
.social ul li a{margin: 0; padding: 0; width: 40px;}
.social ul li a span{display: none;}
.box {float: left;}
#slidebox {width: 100%; margin: 0; padding:20px 0 20px 0;}
.bx-wrapper .bx-prev{left:0;background:url(/grafik/prev.png) no-repeat}
.bx-wrapper .bx-next{right:0;background:url(/grafik/next.png) no-repeat}
.bx-wrapper {width: 80%; min-height: 70px; mxargin: 20px;}
}