body { padding: 0; margin: 0; background: #000000; color: #fff3d8; }
form{ margin: 0; padding: 0; border: none; }

#wrapper { text-align: center; }
.col { width: 100%; background: #287183; /*#287183; #225b6e; #174b5b;*/ margin: 0 auto;}
.menu {
    min-width: 430px; z-index: 3; height: 100px;
    position: fixed; top: 0; left: 0px; right: 0px; margin-bottom: 200px;
    background: #287183; border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.menu ul { margin: 0; padding: 40px 0; list-style-type: none;}
.menu ul li { display: inline; }
.menu a {
    text-decoration: none; font-family: "Raleway", sans-serif; font-weight: 800;
    font-size: 20px; color: #fff3d8; padding: 10px 20px; }
.menu a:active { color: #faf6ee;}

#tw68 img { width: 70%; height: auto; max-height: 200px;}
#tw68 { background: #287183; font-size:18px; margin: 100px 15% 1% 15%; }
#tw68 *{ position: relative; z-index: 2; }

#skills { position: relative; z-index: 2;}
#skills {background: #dad4c5; padding-bottom: 50px;}
#skills h1{color: #4e4e4e; font-size: 50px;}
#skills p{color: #4e4e4e; font-size: 18px; margin: 0 15%;}
#skills .start{background: #287183;}
#skills ul{font-size: 0px; margin: 2% 15% 0 15%; padding: 0; list-style-type: none;}
#skills ul li{font-size: 18px; border-right: 1px solid #e8e1d0;border-bottom: 1px solid #e8e1d0;
    background: #746f3a; display: inline-block; font-family: 'Open Sans', sans-serif;
    font-weight: 400; margin: 0; padding: 5px 10px;
}

.avail { position: relative; z-index: 2; }
.avail {background: #e8e1d0; padding-bottom: 50px;}
.avail img {padding:0; margin: 0;}
.avail h1{position: relative; top:-25px; font-size: 50px; color: #4e4e4e;}
.avail div{font-size: 24px; color: #4e4e4e;}
.avail div span {font-size: 24px; color: #225b6e; font-weight: 900}
.avail a{font-size: 24px; color: #e8e1d0; text-decoration: none;
    padding: 0 30px; background: #746f3a;
}

/*Circle*/
.avail .circc{position: relative; top:-25px; width: 150px; height: 150px; margin: 0px auto 20px auto;}
.avail .circborder{
    position: relative;text-align: center;width: 150px;height: 150px;border-radius: 50%;
    background-color:#225b6e;
    background-image:
            linear-gradient(91deg, transparent 50%, #a19e8f 50%),
            linear-gradient(90deg, #a19e8f 50%, transparent 50%);
}
.avail .circ{
    position: relative;top: 3px;left: 3px;text-align: center;
    width: 144px;height: 144px;border-radius: 50%;background-color: #e8e1d0;font-size: 70px;
}
.avail .circvalue{top: 25px; left: 5px; position: relative; font-size: 50px;}

/*#myCanvas, #myCanvas2{*/
canvas[id^="cv"]{
    z-index: 0;
    position: fixed;
    top: 0;
    left: 0;
    color: white;
}

.overlay{
    position: relative;
}
#contactc *{
    position: relative;
    z-index: 2;
}
#contactc {background: #174b5b;}
#contactc h1{position: relative; padding: 0; margin: 0; font-size: 50px;}

#contactf{ width:100%; border: none; padding:0; margin: 0 auto; box-sizing: border-box; }
#contactf fieldset{ border: none;}
#contactf ul{ position: relative; margin: 0; padding: 0; list-style-type: none;}
#contactf ul li{ border: none; margin-top: 10px;}
#contactf input{
    border:none; margin: 0; padding: 0px; width: 60%; background: #e8e1d0;
    line-height:45px; height: 45px; font-size: 25px; font-family: "Open Sans"; font-weight: 100; color: #4e4e4e;
    box-sizing: border-box;
    -ms-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
#contactf textarea{
    border: 0;
    width: 60%;
    height: 120px;
    padding: 5px;
    background: #e8e1d0;
    font-size: 26px;
    font-family: "Open Sans";
    font-weight: 100;
    color: #4e4e4e;
    box-sizing: border-box;
    -ms-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
#sendbutton {
    margin-bottom: 50px;
    background: #174b5b;
    line-height: 18px;
    height: 55px;
    width: 200px;
    border: 1px solid #e8e1d0;
    color: #e8e1d0;
    cursor: pointer;
    font-size: 18px;
    font-family: "Open Sans";
    font-weight: 400;
}

#sendbutton:hover{
    background: #0e3643;
}

#sendfb{
    display: none;
    color: #4e4e4e;
    background-color: #faf6ee;
    border: 1px solid rgba(175, 175, 175, 0.32) ;
    font-size: 22px;
    margin: 0 auto;
    top: -220px;
    padding: 20px 0;
    position: relative;
    text-align: center;
    width: 400px;
}

.where *{ position: relative;  z-index: 2;}
.where { min-height: 200px; background: #0e3643; padding: 50px 0; }
.where .contaclbl {position: relative; font-size: 50px; line-height: 55px; }
.where .adress {position: relative; font-size: 18px; line-height: 55px; }
.where .dec {unicode-bidi: bidi-override; direction: rtl}
.where .np {display: none;}

.ralewaythin { font-family: 'Raleway', sans-serif; font-weight: 100; color: #e8e1d0 }
.ralewaynormal { font-family: 'Raleway', sans-serif; font-weight: 800; color: #e8e1d0 }
/* opensanslight: Funtioniert nicht in Chrome! */
.opensanslight { font-family: 'Open Sans', sans-serif; font-weight: 300; }
.opensansnormal { font-family: 'Open Sans', sans-serif; font-weight: 400; }
.clearfix { clear: both; }

@media only screen and (max-width: 1024px) {
}
@media only screen and (max-width: 800px) {
    #skills h1{font-size: 37px;}
    #skills ul li{font-size: 15px;}
    #sendfb{width: 300px;}
}
@media only screen and (max-width: 430px) {
    .where .contaclbl { font-size: 40px; line-height: 45px;}
    .menu { min-width: 320px}
    .menu ul li { display: block; }
    .menu ul { margin: 10px 0 0 0; padding: 10px 0;  }
    .avail h1{font-size: 45px;}
    .avail a{padding: 0;}
}
@media only screen and (max-width: 380px) {
    #contactf input, #contactf textarea  {width: 200px;}
    .where .contaclbl { font-size: 30px; line-height: 35px;}
}

@media only screen and (max-width: 320px) {
    .avail h1{font-size: 35px;}
    #skills h1{font-size: 24px}
    #skills ul li{font-size: 12px;}
    #contactc {font-size: 40px; line-height: 45px; }
    #contactc input, #contactc textarea{font-size: 16px;}
    .menu { position: fixed; min-width: inherit; top: 0; }
    .menu ul li { display: block; }
    .menu a {
        text-decoration: none;
        font-family: "Raleway", serif;
        color: #fff3d8;
        padding: 0;
        text-align: left;
    }
    .where .contaclbl { font-size: 25px; line-height: 35px; }
    .where .adress { font-size: 14px; line-height: 25px; }
    #contactf div {
        width:auto;
    }
    #sendfb{font-size: 15px; line-height: 15px; width: 200px!important;}
}