@font-face{font-family:roboto;src:url(roboto.woff) format("woff")}
body,html{font-size:100%;margin:0;font-family:roboto,Helvetica,Arial,sans-serif}
body{line-height:24px;color:#333;background-color:#fff;overflow-x:hidden}
h2,h3,h4{color:#555;margin-top:10px;margin-bottom:10px}
a{color:#069;transition:all 150ms ease-in-out;text-decoration:none}
a:hover{background:#5cc}
img{border:0;vertical-align:middle}
input,textarea{font-family:inherit;font-size:inherit;line-height:inherit;color:inherit}
input{line-height:normal}
input[type=submit]{cursor:pointer}
fieldset{padding:.35em .625em .75em;margin:0 2px;border:silver solid 1px}
textarea{overflow:auto}
.top{font-size:26px;position:sticky;bottom:40px;--offset:100px;margin-top:calc(100vh + var(--offset));margin-left:95%}
.dreh{transform:rotate(270deg);width:22px;height:22px;float:left;color:#4f2}
*{box-sizing:border-box}
:after,:before{box-sizing:border-box}
a:focus,a:hover{color:#252;text-decoration:underline}
a:focus{outline:thin dotted}
p{margin:0 0 10px}
ul{margin-top:0;margin-bottom:10px;list-style:none}
.text-center{text-align:center}
.row{margin-right:-15px;margin-left:-15px}
.col-md-12,.col-md-4,.col-sm-12,.col-sm-6{position:relative;min-height:1px;padding-right:15px;padding-left:15px}
.profile-content{width:90%;margin-left:40px}
@media (min-width:768px) {
.col-sm-12,.col-sm-6{float:left}
.col-sm-12{width:100%}
.col-sm-6{width:50%}
}
@media (min-width:992px) {
.col-md-12,.col-md-4{float:left}
.col-md-12{width:100%}
.col-md-4{width:33.3%}
}
fieldset{min-width:0;padding:0;margin:0;border:0}
.row:after,.row:before{display:table;content:" "}
.row:after{clear:both}
a:focus{outline:0}
img{border:0}
input,textarea{font-size:100%;margin:0;vertical-align:baseline}
input{line-height:normal}
input[type=submit]{cursor:pointer}
textarea{overflow:auto;vertical-align:top}
.banner-bg,.main-content{float:right;width:77%;padding:20px}
@media screen and (max-width:1290px) {
.banner-bg,.main-content{width:78%}
}
@media screen and (max-width:992px) {
.banner-bg,.main-content{width:100%}
}
hr{position:relative;width:100%;height:4px;background:#ddd;margin-top:40px;margin-bottom:0}
section{padding-top:20px;max-width:95%;min-height:80vh}
.profile-image{border:15px double #888;border-radius:50%;overflow:hidden;margin:2px 2px 9px 9px;width:160px;height:160px}
.profile-image img{width:100%}
h3.profile-title{margin-bottom:5px;color:#fff;font-size:18px}
.social-icons{margin:50px 0 0 -10px;padding:1px;background:#222;top:5px;z-index:101}
.social-icons img{width:20px}
.social-icons ul{margin-left:-20px}
.social-icons li{display:inline;margin-right:8px}
.social-icons a{font-size:18px;color:#fff}
.social-icons a:hover{color:#282e35}
.banner-bg{padding:260px 80px;position:relative;background:url(../img/7.jpg);background-repeat:no-repeat;background-position:center;background-size:cover;z-index:2}
.welcome-text{position:relative;top:-80px;z-index:4}
.welcome-text h2{font-size:35px;color:#fff;margin-bottom:25px}
.welcome-text h5{font-size:22px;color:#fff}
.about-image{overflow:hidden;border:4px solid #ddd;margin-bottom:20px}
.about-image img{width:100%;display:block}
.project-item{width:33%;margin-bottom:2px;overflow:hidden;position:relative;float:left}
.project-item img{width:98%;display:block}
.project-item:hover .project-hover{top:0;opacity:1;visibility:visible}
.project-hover{position:absolute;width:100%;height:100%;top:40px;left:0;background:#008;opacity:0;transition:all .2s linear}
.project-hover .inside{position:absolute;width:100%;left:0;bottom:0;padding:20px}
.project-hover h5{font-size:16px;margin-bottom:15px}
.project-hover h5 a{color:#fff}
.project-hover p{color:#fff;font-size:13px;line-height:20px}
.contact-form{margin-top:40px}
.contact-form input,.contact-form textarea{width:100%;outline:0;border:1px solid #777;padding:6px;color:#666;margin-bottom:10px}
.contact-form input:focus,.contact-form textarea:focus{outline:0}
.contact-form .button{width:auto;background:#366;color:#fff;border-radius:5px}
#footer p.copyright-text{margin:40px 0;font-size:13px}
header{padding:15px 20px;width:99%;background:#333;margin:0 10px 0 0;min-height:10vh;z-index:100;overflow-y:scroll}

nav {float:right; margin:-13rem 0 0; z-index:99; background:none; width:120px; height:10px}   /*    
nav{text-align:right;float:right;margin:-12rem 0 0;z-index:99;background:#500;width:160px}    */

.drehen{transition:all .5s;display:inline-block;text-rendering:auto;font-size:24px;font-weight:900;color:#fff}
.drehen:hover{transform:rotate(900deg)}
label{display:inline-block;color:#fff;background:#158;padding:.2rem .5rem; margin:2rem 0}
#menu{visibility:hidden;transition:all 1s;opacity:0;margin-left:50px}
#menu ul{display:inline-block;background:#333;padding:5px;width:90%}
#menu li{list-style-type:none;margin:.2rem 0 0 -50px;padding:0;width:140px}
#menu li a{display:block;text-align:left;text-decoration:none;color:#fff;border-radius:4px;font-size:110%}
#menu li a:hover{background:#1ec81eb3}
input[type=checkbox]{display:none}
input[type=checkbox]:checked~#menu{visibility:visible;opacity:1;margin-top:1.5rem;margin-left:22px}

@media (min-width:1024px) {
header{position:fixed;width:22%;min-height:100vh;z-index:100;overflow-y:scroll}
nav{margin:.5rem 20px;width:180px}
.profile-content{width:90%;margin-left:2px}
#menu{transition:none;visibility:visible;opacity:1;margin-top:5px;margin-left:0px}
#menu ul{background:0}
#menu li{display:block;margin:0;width:150px}
#menu li a{width:100%;padding:4px 12px}
label{display:none}
input[type=checkbox]:checked~#menu{margin-top:0;margin-left:0}
.social-icons{margin:180px 0 0 -10px;z-index:101}

}