@viewport {
    zoom: 1.0;
    width: extend-to-zoom;
}

@-ms-viewport {
    width: extend-to-zoom;
    zoom: 1.0;
}

:root {
    overflow: hidden;
    -webkit-overflow-srolling: touch;
}

.hAS-shadow {
    box-shadow: 11px 4px 17px 1px #00000054;
}

.skillColor {
    color: #f1d6a3;
}

body {
    overflow: hidden;
    -webkit-overflow-srolling: touch;
    text-align: center;
    color: #b3b0ab;
    background-color: #7290ad;
    height: 100vh;
    transition: background-color 1s;
}

div.facebookLike {
    opacity: 1.0;
    width: 256px;
    background: #0c4ae4;
    bottom: 4px;
    position: absolute;
    border-radius: 50px;
    padding: 20px;
    left: 20vw;
    box-shadow: 0px 0px 28px 1px blue;
}

div.facebookLike:hover {
    background: #22222240;
}

.fbMagIch {
    position: absolute;
    display: block;
    bottom: 20px;
    left: 20px;
}

div#einID {
    /* font-family: 'Chicle', cursive; */
    position: absolute;
    top: 50%;
    margin-top: -164px;
    left: 50%;
    margin-left: -200px;
    font-family: 'Coda', cursive;
    text-shadow: 14px 22px 17px #0000004d;
    color: beige;
    padding: 40px;
    border-radius: 40px;
    text-align: center;
    font-size: 2.5vw;
    opacity: 0.05;
    transition: opactiy 1s;
}

div#einID h1 {
    font-family: 'Coda', cursive;
    font-size: 4rem;
}

div#einID h2 {
    font-family: 'Chicle', cursive;
    font-size: 4rem;
}

.color1 {
    background-color: #7290ad;
    transition: backgroun-color 1s;
}

.color2 {
    background-color: darkgreen;
    transition: background-color 1s;
}

.color3 {
    background-color: dodgerblue;
    transition: background-color 1s;
}

.color4 {
    background-color: #302b31;
    transition: background-color 1s;
}

.color5 {
    background-color: rgba(192, 155, 87, 0.87);
    transition: background-color 1s;
}

div#menuDiv,
#menuDiv2,
#menuDiv3,
#menuDiv4 {
    position: absolute;
    /*           background: radial-gradient(rgb(10, 141, 10) 5%, rgba(143, 143, 40, 0.685) 15%, rgb(46, 87, 46) 60%); */
    background-color: #92664670;
    box-shadow: 8px 1px 63px 1px;
}

#formSkills {
    display: none;
    margin: 30px;
}

div#menuDiv:focus {
    background: #b53636;
}

div#menuDiv {
    font-size: 52px;
    left: 0;
    top: 0;
    border-bottom-right-radius: 40px;
}

#homeSymbol:hover,
#kontaktSymbol:hover,
#infoSymbol:hover,
#galerieSymbol:hover {
    color: white;
    transition: color .3s;
}

div#menuDiv2 {
    right: 0;
    top: 0;
    border-bottom-left-radius: 40px;
}

div#menuDiv3 {
    right: 0;
    bottom: 0;
    border-top-left-radius: 40px;
}

div#menuDiv4 {
    left: 0;
    bottom: 0;
    border-top-right-radius: 40px;
}

.divMenu {
    background-color: #92664670;
    width: 100px;
    height: 100px;
    font-size: 1rem;
    transition: width .6s, height .6s, background-color 1s, transform 1s, font-size .6s, margin 1s, border-radius 3s;
    top: auto;
    bottom: auto;
}

.divMenuBig {
    margin: 8vw;
    background-color: burlywood;
    width: 80vw;
    height: 80vh;
    transform: rotate(2deg);
    font-size: 1rem;
    border-radius: 40px 40px 40px 40px;
    transition: width .3s, height .3s, background-color 1s, transform 1s, font-size 1s, margin 1s, border-radius 3s;
}

fieldset {
    margin: 20px;
    padding: 20px;
    border-radius: 27px;
    pointer-events: auto;
}

div#kontaktSymbol {
    font-size: 56px;
    width: 100%;
    height: 100%;
    border-bottom-left-radius: 40px;
    transition: display 1s;
}

div#infoSymbol {
    font-size: 56px;
    width: 100%;
    height: 100%;
    border-top-left-radius: 40px;
    transition: display 1s;
}

div#galerieSymbol {
    font-size: 56px;
    border-top-left-radius: 40px;
    transition: display 1s;
}


/* iPad Mini landscape  */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
    div#einID {
        /* font-family: 'Chicle', cursive; */
        font-family: 'Coda', cursive;
        text-shadow: 14px 22px 17px #0000004d;
        color: beige;
        text-align: center;
        font-size: 2.5vw;
        opacity: 0.05;
        transition: opactiy 1s;
    }
    .w3-input {
        font-size: 1.6rem;
        padding: 16px;
        display: block;
        border: none;
        border-bottom: 22px solid #cdc;
        width: 100%;
    }
    div.facebookLike {
        opacity: 1.0;
        width: 256px;
        background: #0c4ae4;
        bottom: 4px;
        position: absolute;
        border-radius: 50px;
        padding: 20px;
        left: 20vw;
        box-shadow: 0px 0px 28px 1px blue;
    }
    div.facebookLike:hover {
        background: #22222240;
    }
    .fbMagIch {
        position: absolute;
        display: block;
        bottom: 20px;
        left: 20px;
    }
    div#einID {
        /* font-family: 'Chicle', cursive; */
        position: absolute;
        top: 50%;
        margin-top: -164px;
        left: 50%;
        margin-left: -200px;
        font-family: 'Coda', cursive;
        text-shadow: 14px 22px 17px #0000004d;
        color: beige;
        padding: 40px;
        border-radius: 40px;
        text-align: center;
        font-size: 2.5vw;
        opacity: 0.05;
        transition: opactiy 1s;
    }
    div#einID h1 {
        font-family: 'Coda', cursive;
        font-size: 4rem;
    }
    div#einID h2 {
        font-family: 'Chicle', cursive;
        font-size: 4rem;
    }
    .color1 {
        background-color: #7290ad;
        transition: backgroun-color 1s;
    }
    .color2 {
        background-color: darkgreen;
        transition: background-color 1s;
    }
    .color3 {
        background-color: dodgerblue;
        transition: background-color 1s;
    }
    .color4 {
        background-color: #302b31;
        transition: background-color 1s;
    }
    .color5 {
        background-color: rgba(192, 155, 87, 0.87);
        transition: background-color 1s;
    }
    div#menuDiv,
    #menuDiv2,
    #menuDiv3,
    #menuDiv4 {
        position: absolute;
        /*           background: radial-gradient(rgb(10, 141, 10) 5%, rgba(143, 143, 40, 0.685) 15%, rgb(46, 87, 46) 60%); */
        background-color: #92664670;
        box-shadow: 8px 1px 63px 1px;
    }
    #formSkills {
        display: none;
        margin: 30px;
    }
    div#menuDiv:focus {
        background: #b53636;
    }
    div#menuDiv {
        font-size: 52px;
        left: 0;
        top: 0;
        border-bottom-right-radius: 40px;
    }
    div#menuDiv2 {
        right: 0;
        top: 0;
        border-bottom-left-radius: 40px;
    }
    div#menuDiv3 {
        right: 0;
        bottom: 0;
        border-top-left-radius: 40px;
    }
    div#menuDiv4 {
        left: 0;
        bottom: 0;
        border-top-right-radius: 40px;
    }
    .divMenu {
        background-color: #92664670;
        width: 100px;
        height: 100px;
        font-size: 1rem;
        transition: width .6s, height .6s, background-color 1s, transform 1s, font-size .6s, margin 1s, border-radius 3s;
        top: auto;
        bottom: auto;
    }
    .divMenuBig {
        margin: 8vw;
        background-color: burlywood;
        width: 80vw;
        height: 80vh;
        transform: rotate(2deg);
        font-size: 1rem;
        border-radius: 40px 40px 40px 40px;
        transition: width .3s, height .3s, background-color 1s, transform 1s, font-size 1s, margin 1s, border-radius 3s;
    }
    fieldset {
        margin: 20px;
        padding: 20px;
        border-radius: 27px;
        pointer-events: auto;
    }
    div#kontaktSymbol {
        font-size: 56px;
        width: 100%;
        height: 100%;
        border-bottom-left-radius: 40px;
        transition: display 1s;
    }
    div#infoSymbol {
        font-size: 56px;
        width: 100%;
        height: 100%;
        border-top-left-radius: 40px;
        transition: display 1s;
    }
    div#galerieSymbol {
        font-size: 56px;
        border-top-left-radius: 40px;
        transition: display 1s;
    }
}


/* iPad Mini portrait  */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {
    div#einID {
        /* font-family: 'Chicle', cursive; */
        font-family: 'Coda', cursive;
        text-shadow: 14px 22px 17px #0000004d;
        color: beige;
        opacity: 0.05;
        transition: opactiy 1s;
    }
    .w3-padding-16 {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
    .w3-input {
        font-size: 1.4rem;
        padding: 18px;
        display: block;
        border: none;
        border-bottom: 14px solid #cdc;
        width: 100%;
    }
    div.facebookLike {
        opacity: 1.0;
        width: 256px;
        background: #0c4ae4;
        bottom: 4px;
        position: absolute;
        border-radius: 50px;
        padding: 20px;
        left: 20vw;
        box-shadow: 0px 0px 28px 1px blue;
    }
    div.facebookLike:hover {
        background: #22222240;
    }
    .fbMagIch {
        position: absolute;
        display: block;
        bottom: 20px;
        left: 20px;
    }
    div#einID {
        /* font-family: 'Chicle', cursive; */
        position: absolute;
        top: 50%;
        margin-top: -164px;
        left: 50%;
        margin-left: -200px;
        font-family: 'Coda', cursive;
        text-shadow: 14px 22px 17px #0000004d;
        color: beige;
        padding: 40px;
        border-radius: 40px;
        text-align: center;
        font-size: 2.5vw;
        opacity: 0.05;
        transition: opactiy 1s;
    }
    div#einID h1 {
        font-family: 'Coda', cursive;
        font-size: 4rem;
    }
    div#einID h2 {
        font-family: 'Chicle', cursive;
        font-size: 4rem;
    }
    .color1 {
        background-color: #7290ad;
        transition: backgroun-color 1s;
    }
    .color2 {
        background-color: darkgreen;
        transition: background-color 1s;
    }
    .color3 {
        background-color: dodgerblue;
        transition: background-color 1s;
    }
    .color4 {
        background-color: #302b31;
        transition: background-color 1s;
    }
    .color5 {
        background-color: rgba(192, 155, 87, 0.87);
        transition: background-color 1s;
    }
    div#menuDiv,
    #menuDiv2,
    #menuDiv3,
    #menuDiv4 {
        position: absolute;
        /*           background: radial-gradient(rgb(10, 141, 10) 5%, rgba(143, 143, 40, 0.685) 15%, rgb(46, 87, 46) 60%); */
        background-color: #92664670;
        box-shadow: 8px 1px 63px 1px;
    }
    #formSkills {
        display: none;
        margin: 30px;
    }
    div#menuDiv:focus {
        background: #b53636;
    }
    div#menuDiv {
        font-size: 52px;
        left: 0;
        top: 0;
        border-bottom-right-radius: 40px;
    }
    div#menuDiv2 {
        right: 0;
        top: 0;
        border-bottom-left-radius: 40px;
    }
    div#menuDiv3 {
        right: 0;
        bottom: 0;
        border-top-left-radius: 40px;
    }
    div#menuDiv4 {
        left: 0;
        bottom: 0;
        border-top-right-radius: 40px;
    }
    .divMenu {
        background-color: #92664670;
        width: 100px;
        height: 100px;
        font-size: 1rem;
        transition: width .6s, height .6s, background-color 1s, transform 1s, font-size .6s, margin 1s, border-radius 3s;
        top: auto;
        bottom: auto;
    }
    .divMenuBig {
        margin: 8vw;
        background-color: burlywood;
        width: 80vw;
        height: 80vh;
        transform: rotate(2deg);
        font-size: 1rem;
        border-radius: 40px 40px 40px 40px;
        transition: width .3s, height .3s, background-color 1s, transform 1s, font-size 1s, margin 1s, border-radius 3s;
    }
    fieldset {
        margin: 20px;
        padding: 20px;
        border-radius: 27px;
        pointer-events: auto;
    }
    div#kontaktSymbol {
        font-size: 56px;
        width: 100%;
        height: 100%;
        border-bottom-left-radius: 40px;
        transition: display 1s;
    }
    div#infoSymbol {
        font-size: 56px;
        width: 100%;
        height: 100%;
        border-top-left-radius: 40px;
        transition: display 1s;
    }
    div#galerieSymbol {
        font-size: 56px;
        border-top-left-radius: 40px;
        transition: display 1s;
    }
}


/* iPhone 5 & 5S  landscape */

@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: landscape) {
    p {
        margin: 0;
    }
    div#kontaktSymbol {
        font-size: 46px;
    }
    div#menuDiv {
        font-size: 46px;
    }
    .divMenu {
        width: 75px;
        height: 75px;
    }
    .w3-padding-16 {
        padding-top: 2px !important;
        padding-bottom: 2px !important;
    }
    h2 {
        font-size 1rem;
    }
    .w3-input {
        font-size: 0.9rem;
        padding: 2px;
        display: block;
        border: none;
        border-bottom: 1px solid #ccc;
        width: 100%;
        height: 24px;
    }
    fieldset {
        font-size: 1rem;
        margin: 10px;
        padding: 10px;
        border-radius: 27px;
        pointer-events: auto;
    }
    div.facebookLike {
        opacity: 1.0;
        width: 256px;
        background: #0c4ae4;
        bottom: 4px;
        position: absolute;
        border-radius: 50px;
        padding: 20px;
        left: 20vw;
        box-shadow: 0px 0px 28px 1px blue;
    }
    div.facebookLike:hover {
        background: #22222240;
    }
    .fbMagIch {
        position: absolute;
        display: block;
        bottom: 20px;
        left: 20px;
    }
    div#einID {
        /* font-family: 'Chicle', cursive; */
        position: absolute;
        top: 50%;
        margin-top: -164px;
        left: 50%;
        margin-left: -200px;
        font-family: 'Coda', cursive;
        text-shadow: 14px 22px 17px #0000004d;
        color: beige;
        padding: 40px;
        border-radius: 40px;
        text-align: center;
        font-size: 2.5vw;
        opacity: 0.05;
        transition: opactiy 1s;
    }
    div#einID h1 {
        font-family: 'Coda', cursive;
        font-size: 4rem;
    }
    div#einID h2 {
        font-family: 'Chicle', cursive;
        font-size: 4rem;
    }
    .color1 {
        background-color: #7290ad;
        transition: backgroun-color 1s;
    }
    .color2 {
        background-color: darkgreen;
        transition: background-color 1s;
    }
    .color3 {
        background-color: dodgerblue;
        transition: background-color 1s;
    }
    .color4 {
        background-color: #302b31;
        transition: background-color 1s;
    }
    .color5 {
        background-color: rgba(192, 155, 87, 0.87);
        transition: background-color 1s;
    }
    div#menuDiv,
    #menuDiv2,
    #menuDiv3,
    #menuDiv4 {
        position: absolute;
        /*           background: radial-gradient(rgb(10, 141, 10) 5%, rgba(143, 143, 40, 0.685) 15%, rgb(46, 87, 46) 60%); */
        background-color: #92664670;
        box-shadow: 8px 1px 63px 1px;
    }
    #formSkills {
        display: none;
        margin: 30px;
    }
    div#menuDiv:focus {
        background: #b53636;
    }
    div#menuDiv {
        font-size: 52px;
        left: 0;
        top: 0;
        border-bottom-right-radius: 40px;
    }
    div#menuDiv2 {
        right: 0px;
        top: 0px;
        border-bottom-left-radius: 40px;
    }
    div#menuDiv3 {
        right: 0;
        bottom: 0;
        border-top-left-radius: 40px;
    }
    div#menuDiv4 {
        left: 0;
        bottom: 0;
        border-top-right-radius: 40px;
    }
    .divMenu {
        background-color: #92664670;
        width: 100px;
        height: 100px;
        font-size: 1rem;
        transition: width .6s, height .6s, background-color 1s, transform 1s, font-size .6s, margin 1s, border-radius 3s;
        top: auto;
        bottom: auto;
    }
    .divMenuBig {
        margin: 8vw;
        background-color: burlywood;
        width: 74vw;
        height: 80vh;
        transform: rotate(2deg);
        font-size: .75rem;
        border-radius: 40px 40px 40px 40px;
        transition: width .3s, height .3s, background-color 1s, transform 1s, font-size 1s, margin 1s, border-radius 3s;
    }
    fieldset {
        margin: 20px;
        padding: 20px;
        border-radius: 27px;
        pointer-events: auto;
    }
    div#kontaktSymbol {
        font-size: 56px;
        width: 100%;
        height: 100%;
        border-bottom-left-radius: 40px;
        transition: display 1s;
    }
    div#infoSymbol {
        font-size: 56px;
        width: 100%;
        height: 100%;
        border-top-left-radius: 40px;
        transition: display 1s;
    }
    div#galerieSymbol {
        font-size: 56px;
        border-top-left-radius: 40px;
        transition: display 1s;
    }
}


/* iPhone 5 & 5S  Portrait */

@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: portrait) {
    div#menuDiv {
        font-size: 46px;
    }
    .divMenuBig {
        margin: 9vw;
    }
    .divMenu {
        width: 75px;
        height: 75px;
    }
    .w3-padding-16 {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }
    .w3-input {
        font-size: 1.2rem;
        padding: 12px;
        display: block;
        border: none;
        border-bottom: 9px solid #cdc;
        width: 100%;
    }
    div.facebookLike {
        opacity: 1.0;
        width: 256px;
        background: #0c4ae4;
        bottom: 4px;
        position: absolute;
        border-radius: 50px;
        padding: 20px;
        left: 20vw;
        box-shadow: 0px 0px 28px 1px blue;
    }
    div.facebookLike:hover {
        background: #22222240;
    }
    .fbMagIch {
        position: absolute;
        display: block;
        bottom: 20px;
        left: 20px;
    }
    div#einID {
        font-family: 'Chicle', cursive;
        position: absolute;
        top: 50%;
        margin-top: -210px;
        left: 50%;
        margin-left: -170px;
        font-family: 'Coda', cursive;
        text-shadow: 14px 22px 17px #0000004d;
        color: beige;
        padding: 40px;
        border-radius: 40px;
        text-align: center;
        font-size: 2.5rem;
        opacity: 0.05;
        transition: opactiy 1s;
    }
    div#einID h1 {
        font-family: 'Coda', cursive;
        font-size: 4rem;
    }
    div#einID h2 {
        font-family: 'Chicle', cursive;
        font-size: 4rem;
    }
    .color1 {
        background-color: #7290ad;
        transition: backgroun-color 1s;
    }
    .color2 {
        background-color: darkgreen;
        transition: background-color 1s;
    }
    .color3 {
        background-color: dodgerblue;
        transition: background-color 1s;
    }
    .color4 {
        background-color: #302b31;
        transition: background-color 1s;
    }
    .color5 {
        background-color: rgba(192, 155, 87, 0.87);
        transition: background-color 1s;
    }
    div#menuDiv,
    #menuDiv2,
    #menuDiv3,
    #menuDiv4 {
        position: absolute;
        /*           background: radial-gradient(rgb(10, 141, 10) 5%, rgba(143, 143, 40, 0.685) 15%, rgb(46, 87, 46) 60%); */
        background-color: #92664670;
        box-shadow: 8px 1px 63px 1px;
    }
    #formSkills {
        display: none;
        margin: 30px;
    }
    div#menuDiv:focus {
        background: #b53636;
    }
    div#menuDiv {
        font-size: 36px;
        left: 0;
        top: 0;
        border-bottom-right-radius: 40px;
    }
    div#menuDiv2 {
        right: 0;
        top: 0;
        border-bottom-left-radius: 40px;
    }
    div#menuDiv3 {
        right: 0;
        bottom: 0;
        border-top-left-radius: 40px;
    }
    div#menuDiv4 {
        left: 0;
        bottom: 0;
        border-top-right-radius: 40px;
    }
    .divMenu {
        background-color: #92664670;
        width: 80px;
        height: 80px;
        font-size: 1rem;
        transition: width .6s, height .6s, background-color 1s, transform 1s, font-size .6s, margin 1s, border-radius 3s;
        top: auto;
        bottom: auto;
    }
    .divMenuBig {
        margin: 8vw;
        background-color: burlywood;
        width: 80vw;
        height: 80vh;
        transform: rotate(2deg);
        font-size: 0.6rem;
        border-radius: 40px 40px 40px 40px;
        transition: width .3s, height .3s, background-color 1s, transform 1s, font-size 1s, margin 1s, border-radius 3s;
    }
    fieldset {
        margin: 20px;
        padding: 20px;
        border-radius: 27px;
        pointer-events: auto;
    }
    div#kontaktSymbol {
        font-size: 36px;
        width: 100%;
        height: 100%;
        border-bottom-left-radius: 40px;
        transition: display 1s;
    }
    div#formKontakt {
        margin-top: 20px;
    }
    div#infoSymbol {
        font-size: 36px;
        width: 100%;
        height: 100%;
        border-top-left-radius: 40px;
        transition: display 1s;
    }
    div#galerieSymbol {
        font-size: 36px;
        border-top-left-radius: 40px;
        transition: display 1s;
    }
}


/* ----------- Galaxy S3 ----------- */


/* Portrait and Landscape */

@media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 2) {
    div.facebookLike {
        opacity: 1.0;
        width: 256px;
        background: #0c4ae4;
        bottom: 4px;
        position: absolute;
        border-radius: 50px;
        padding: 20px;
        left: 20vw;
        box-shadow: 0px 0px 28px 1px blue;
    }
    div.facebookLike:hover {
        background: #22222240;
    }
    .fbMagIch {
        position: absolute;
        display: block;
        bottom: 20px;
        left: 20px;
    }
    div#einID {
        /* font-family: 'Chicle', cursive; */
        position: absolute;
        top: 50%;
        margin-top: -164px;
        left: 50%;
        margin-left: -200px;
        font-family: 'Coda', cursive;
        text-shadow: 14px 22px 17px #0000004d;
        color: beige;
        padding: 40px;
        border-radius: 40px;
        text-align: center;
        font-size: 2.5vw;
        opacity: 0.05;
        transition: opactiy 1s;
    }
    div#einID h1 {
        font-family: 'Coda', cursive;
        font-size: 4rem;
    }
    div#einID h2 {
        font-family: 'Chicle', cursive;
        font-size: 4rem;
    }
    .color1 {
        background-color: #7290ad;
        transition: backgroun-color 1s;
    }
    .color2 {
        background-color: darkgreen;
        transition: background-color 1s;
    }
    .color3 {
        background-color: dodgerblue;
        transition: background-color 1s;
    }
    .color4 {
        background-color: #302b31;
        transition: background-color 1s;
    }
    .color5 {
        background-color: rgba(192, 155, 87, 0.87);
        transition: background-color 1s;
    }
    div#menuDiv,
    #menuDiv2,
    #menuDiv3,
    #menuDiv4 {
        position: absolute;
        /*           background: radial-gradient(rgb(10, 141, 10) 5%, rgba(143, 143, 40, 0.685) 15%, rgb(46, 87, 46) 60%); */
        background-color: #92664670;
        box-shadow: 8px 1px 63px 1px;
    }
    #formSkills {
        display: none;
        margin: 30px;
    }
    div#menuDiv:focus {
        background: #b53636;
    }
    div#menuDiv {
        font-size: 52px;
        left: 0;
        top: 0;
        border-bottom-right-radius: 40px;
    }
    div#menuDiv2 {
        right: 0;
        top: 0;
        border-bottom-left-radius: 40px;
    }
    div#menuDiv3 {
        right: 0;
        bottom: 0;
        border-top-left-radius: 40px;
    }
    div#menuDiv4 {
        left: 0;
        bottom: 0;
        border-top-right-radius: 40px;
    }
    .divMenu {
        background-color: #92664670;
        width: 100px;
        height: 100px;
        font-size: 1rem;
        transition: width .6s, height .6s, background-color 1s, transform 1s, font-size .6s, margin 1s, border-radius 3s;
        top: auto;
        bottom: auto;
    }
    .divMenuBig {
        margin: 8vw;
        background-color: burlywood;
        width: 80vw;
        height: 80vh;
        transform: rotate(2deg);
        font-size: 1rem;
        border-radius: 40px 40px 40px 40px;
        transition: width .3s, height .3s, background-color 1s, transform 1s, font-size 1s, margin 1s, border-radius 3s;
    }
    fieldset {
        margin: 20px;
        padding: 20px;
        border-radius: 27px;
        pointer-events: auto;
    }
    div#kontaktSymbol {
        font-size: 56px;
        width: 100%;
        height: 100%;
        border-bottom-left-radius: 40px;
        transition: display 1s;
    }
    div#infoSymbol {
        font-size: 56px;
        width: 100%;
        height: 100%;
        border-top-left-radius: 40px;
        transition: display 1s;
    }
    div#galerieSymbol {
        font-size: 56px;
        border-top-left-radius: 40px;
        transition: display 1s;
    }
}


/* Portrait */

@media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait) {
    div.facebookLike {
        opacity: 1.0;
        width: 256px;
        background: #0c4ae4;
        bottom: 4px;
        position: absolute;
        border-radius: 50px;
        padding: 20px;
        left: 20vw;
        box-shadow: 0px 0px 28px 1px blue;
    }
    div.facebookLike:hover {
        background: #22222240;
    }
    .fbMagIch {
        position: absolute;
        display: block;
        bottom: 20px;
        left: 20px;
    }
    div#einID {
        /* font-family: 'Chicle', cursive; */
        position: absolute;
        top: 50%;
        margin-top: -164px;
        left: 50%;
        margin-left: -200px;
        font-family: 'Coda', cursive;
        text-shadow: 14px 22px 17px #0000004d;
        color: beige;
        padding: 40px;
        border-radius: 40px;
        text-align: center;
        font-size: 2.5vw;
        opacity: 0.05;
        transition: opactiy 1s;
    }
    div#einID h1 {
        font-family: 'Coda', cursive;
        font-size: 4rem;
    }
    div#einID h2 {
        font-family: 'Chicle', cursive;
        font-size: 4rem;
    }
    .color1 {
        background-color: #7290ad;
        transition: backgroun-color 1s;
    }
    .color2 {
        background-color: darkgreen;
        transition: background-color 1s;
    }
    .color3 {
        background-color: dodgerblue;
        transition: background-color 1s;
    }
    .color4 {
        background-color: #302b31;
        transition: background-color 1s;
    }
    .color5 {
        background-color: rgba(192, 155, 87, 0.87);
        transition: background-color 1s;
    }
    div#menuDiv,
    #menuDiv2,
    #menuDiv3,
    #menuDiv4 {
        position: absolute;
        /*           background: radial-gradient(rgb(10, 141, 10) 5%, rgba(143, 143, 40, 0.685) 15%, rgb(46, 87, 46) 60%); */
        background-color: #92664670;
        box-shadow: 8px 1px 63px 1px;
    }
    #formSkills {
        display: none;
        margin: 30px;
    }
    div#menuDiv:focus {
        background: #b53636;
    }
    div#menuDiv {
        font-size: 52px;
        left: 0;
        top: 0;
        border-bottom-right-radius: 40px;
    }
    div#menuDiv2 {
        right: 0;
        top: 0;
        border-bottom-left-radius: 40px;
    }
    div#menuDiv3 {
        right: 0;
        bottom: 0;
        border-top-left-radius: 40px;
    }
    div#menuDiv4 {
        left: 0;
        bottom: 0;
        border-top-right-radius: 40px;
    }
    .divMenu {
        background-color: #92664670;
        width: 100px;
        height: 100px;
        font-size: 1rem;
        transition: width .6s, height .6s, background-color 1s, transform 1s, font-size .6s, margin 1s, border-radius 3s;
        top: auto;
        bottom: auto;
    }
    .divMenuBig {
        margin: 8vw;
        background-color: burlywood;
        width: 80vw;
        height: 80vh;
        transform: rotate(2deg);
        font-size: 1rem;
        border-radius: 40px 40px 40px 40px;
        transition: width .3s, height .3s, background-color 1s, transform 1s, font-size 1s, margin 1s, border-radius 3s;
    }
    fieldset {
        margin: 20px;
        padding: 20px;
        border-radius: 27px;
        pointer-events: auto;
    }
    div#kontaktSymbol {
        font-size: 56px;
        width: 100%;
        height: 100%;
        border-bottom-left-radius: 40px;
        transition: display 1s;
    }
    div#infoSymbol {
        font-size: 56px;
        width: 100%;
        height: 100%;
        border-top-left-radius: 40px;
        transition: display 1s;
    }
    div#galerieSymbol {
        font-size: 56px;
        border-top-left-radius: 40px;
        transition: display 1s;
    }
}


/* Landscape */

@media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape) {
    div.facebookLike {
        opacity: 1.0;
        width: 256px;
        background: #0c4ae4;
        bottom: 4px;
        position: absolute;
        border-radius: 50px;
        padding: 20px;
        left: 20vw;
        box-shadow: 0px 0px 28px 1px blue;
    }
    div.facebookLike:hover {
        background: #22222240;
    }
    .fbMagIch {
        position: absolute;
        display: block;
        bottom: 20px;
        left: 20px;
    }
    div#einID {
        /* font-family: 'Chicle', cursive; */
        position: absolute;
        top: 50%;
        margin-top: -164px;
        left: 50%;
        margin-left: -200px;
        font-family: 'Coda', cursive;
        text-shadow: 14px 22px 17px #0000004d;
        color: beige;
        padding: 40px;
        border-radius: 40px;
        text-align: center;
        font-size: 2.5vw;
        opacity: 0.05;
        transition: opactiy 1s;
    }
    div#einID h1 {
        font-family: 'Coda', cursive;
        font-size: 4rem;
    }
    div#einID h2 {
        font-family: 'Chicle', cursive;
        font-size: 4rem;
    }
    .color1 {
        background-color: #7290ad;
        transition: backgroun-color 1s;
    }
    .color2 {
        background-color: darkgreen;
        transition: background-color 1s;
    }
    .color3 {
        background-color: dodgerblue;
        transition: background-color 1s;
    }
    .color4 {
        background-color: #302b31;
        transition: background-color 1s;
    }
    .color5 {
        background-color: rgba(192, 155, 87, 0.87);
        transition: background-color 1s;
    }
    div#menuDiv,
    #menuDiv2,
    #menuDiv3,
    #menuDiv4 {
        position: absolute;
        /*           background: radial-gradient(rgb(10, 141, 10) 5%, rgba(143, 143, 40, 0.685) 15%, rgb(46, 87, 46) 60%); */
        background-color: #92664670;
        box-shadow: 8px 1px 63px 1px;
    }
    #formSkills {
        display: none;
        margin: 30px;
    }
    div#menuDiv:focus {
        background: #b53636;
    }
    div#menuDiv {
        font-size: 52px;
        left: 0;
        top: 0;
        border-bottom-right-radius: 40px;
    }
    div#menuDiv2 {
        right: 0;
        top: 0;
        border-bottom-left-radius: 40px;
    }
    div#menuDiv3 {
        right: 0;
        bottom: 0;
        border-top-left-radius: 40px;
    }
    div#menuDiv4 {
        left: 0;
        bottom: 0;
        border-top-right-radius: 40px;
    }
    .divMenu {
        background-color: #92664670;
        width: 100px;
        height: 100px;
        font-size: 1rem;
        transition: width .6s, height .6s, background-color 1s, transform 1s, font-size .6s, margin 1s, border-radius 3s;
        top: auto;
        bottom: auto;
    }
    .divMenuBig {
        margin: 8vw;
        background-color: burlywood;
        width: 80vw;
        height: 80vh;
        transform: rotate(2deg);
        font-size: 1rem;
        border-radius: 40px 40px 40px 40px;
        transition: width .3s, height .3s, background-color 1s, transform 1s, font-size 1s, margin 1s, border-radius 3s;
    }
    fieldset {
        margin: 20px;
        padding: 20px;
        border-radius: 27px;
        pointer-events: auto;
    }
    div#kontaktSymbol {
        font-size: 56px;
        width: 100%;
        height: 100%;
        border-bottom-left-radius: 40px;
        transition: display 1s;
    }
    div#infoSymbol {
        font-size: 56px;
        width: 100%;
        height: 100%;
        border-top-left-radius: 40px;
        transition: display 1s;
    }
    div#galerieSymbol {
        font-size: 56px;
        border-top-left-radius: 40px;
        transition: display 1s;
    }
}


/* ----------- Galaxy S4, S5 and Note 3 ----------- */


/* Portrait and Landscape //
@media screen 
and (device-width: 320px) 
and (device-height: 640px) 
and (-webkit-device-pixel-ratio: 3) {

} */


/* Portrait */

@media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) {
    div#einID {
        /* font-family: 'Chicle', cursive; */
        font-family: 'Coda', cursive;
        text-shadow: 14px 22px 17px #0000004d;
        color: beige;
        margin: 28vw 2vh;
        padding: 40px;
        border-radius: 40px;
        text-align: center;
        font-size: 2.5vw;
        opacity: 0.05;
        transition: opactiy 1s;
    }
}


/* Landscape */

@media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) {
    div#einID {
        /* font-family: 'Chicle', cursive; */
        font-family: 'Coda', cursive;
        text-shadow: 14px 22px 17px #0000004d;
        color: beige;
        margin: 28vw 2vh;
        padding: 40px;
        border-radius: 40px;
        text-align: center;
        font-size: 2.5vw;
        opacity: 0.05;
        transition: opactiy 1s;
    }
}


/* ----------- Galaxy S6 ----------- */


/* Portrait and Landscape */

@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 4) {
    div.facebookLike {
        opacity: 1.0;
        width: 256px;
        background: #0c4ae4;
        bottom: 4px;
        position: absolute;
        border-radius: 50px;
        padding: 20px;
        left: 20vw;
        box-shadow: 0px 0px 28px 1px blue;
    }
    div.facebookLike:hover {
        background: #22222240;
    }
    .fbMagIch {
        position: absolute;
        display: block;
        bottom: 20px;
        left: 20px;
    }
    div#einID {
        /* font-family: 'Chicle', cursive; */
        position: absolute;
        top: 50%;
        margin-top: -164px;
        left: 50%;
        margin-left: -200px;
        font-family: 'Coda', cursive;
        text-shadow: 14px 22px 17px #0000004d;
        color: beige;
        padding: 40px;
        border-radius: 40px;
        text-align: center;
        font-size: 2.5vw;
        opacity: 0.05;
        transition: opactiy 1s;
    }
    div#einID h1 {
        font-family: 'Coda', cursive;
        font-size: 4rem;
    }
    div#einID h2 {
        font-family: 'Chicle', cursive;
        font-size: 4rem;
    }
    .color1 {
        background-color: #7290ad;
        transition: backgroun-color 1s;
    }
    .color2 {
        background-color: darkgreen;
        transition: background-color 1s;
    }
    .color3 {
        background-color: dodgerblue;
        transition: background-color 1s;
    }
    .color4 {
        background-color: #302b31;
        transition: background-color 1s;
    }
    .color5 {
        background-color: rgba(192, 155, 87, 0.87);
        transition: background-color 1s;
    }
    div#menuDiv,
    #menuDiv2,
    #menuDiv3,
    #menuDiv4 {
        position: absolute;
        /*           background: radial-gradient(rgb(10, 141, 10) 5%, rgba(143, 143, 40, 0.685) 15%, rgb(46, 87, 46) 60%); */
        background-color: #92664670;
        box-shadow: 8px 1px 63px 1px;
    }
    #formSkills {
        display: none;
        margin: 30px;
    }
    div#menuDiv:focus {
        background: #b53636;
    }
    div#menuDiv {
        font-size: 52px;
        left: 0;
        top: 0;
        border-bottom-right-radius: 40px;
    }
    div#menuDiv2 {
        right: 0;
        top: 0;
        border-bottom-left-radius: 40px;
    }
    div#menuDiv3 {
        right: 0;
        bottom: 0;
        border-top-left-radius: 40px;
    }
    div#menuDiv4 {
        left: 0;
        bottom: 0;
        border-top-right-radius: 40px;
    }
    .divMenu {
        background-color: #92664670;
        width: 100px;
        height: 100px;
        font-size: 1rem;
        transition: width .6s, height .6s, background-color 1s, transform 1s, font-size .6s, margin 1s, border-radius 3s;
        top: auto;
        bottom: auto;
    }
    .divMenuBig {
        margin: 8vw;
        background-color: burlywood;
        width: 80vw;
        height: 80vh;
        transform: rotate(2deg);
        font-size: 1rem;
        border-radius: 40px 40px 40px 40px;
        transition: width .3s, height .3s, background-color 1s, transform 1s, font-size 1s, margin 1s, border-radius 3s;
    }
    fieldset {
        margin: 20px;
        padding: 20px;
        border-radius: 27px;
        pointer-events: auto;
    }
    div#kontaktSymbol {
        font-size: 56px;
        width: 100%;
        height: 100%;
        border-bottom-left-radius: 40px;
        transition: display 1s;
    }
    div#infoSymbol {
        font-size: 56px;
        width: 100%;
        height: 100%;
        border-top-left-radius: 40px;
        transition: display 1s;
    }
    div#galerieSymbol {
        font-size: 56px;
        border-top-left-radius: 40px;
        transition: display 1s;
    }
}


/* Portrait */

@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 4) and (orientation: portrait) {
    div.facebookLike {
        opacity: 1.0;
        width: 256px;
        background: #0c4ae4;
        bottom: 4px;
        position: absolute;
        border-radius: 50px;
        padding: 20px;
        left: 20vw;
        box-shadow: 0px 0px 28px 1px blue;
    }
    div.facebookLike:hover {
        background: #22222240;
    }
    .fbMagIch {
        position: absolute;
        display: block;
        bottom: 20px;
        left: 20px;
    }
    div#einID {
        /* font-family: 'Chicle', cursive; */
        position: absolute;
        top: 50%;
        margin-top: -164px;
        left: 50%;
        margin-left: -200px;
        font-family: 'Coda', cursive;
        text-shadow: 14px 22px 17px #0000004d;
        color: beige;
        padding: 40px;
        border-radius: 40px;
        text-align: center;
        font-size: 2.5vw;
        opacity: 0.05;
        transition: opactiy 1s;
    }
    div#einID h1 {
        font-family: 'Coda', cursive;
        font-size: 4rem;
    }
    div#einID h2 {
        font-family: 'Chicle', cursive;
        font-size: 4rem;
    }
    .color1 {
        background-color: #7290ad;
        transition: backgroun-color 1s;
    }
    .color2 {
        background-color: darkgreen;
        transition: background-color 1s;
    }
    .color3 {
        background-color: dodgerblue;
        transition: background-color 1s;
    }
    .color4 {
        background-color: #302b31;
        transition: background-color 1s;
    }
    .color5 {
        background-color: rgba(192, 155, 87, 0.87);
        transition: background-color 1s;
    }
    div#menuDiv,
    #menuDiv2,
    #menuDiv3,
    #menuDiv4 {
        position: absolute;
        /*           background: radial-gradient(rgb(10, 141, 10) 5%, rgba(143, 143, 40, 0.685) 15%, rgb(46, 87, 46) 60%); */
        background-color: #92664670;
        box-shadow: 8px 1px 63px 1px;
    }
    #formSkills {
        display: none;
        margin: 30px;
    }
    div#menuDiv:focus {
        background: #b53636;
    }
    div#menuDiv {
        font-size: 52px;
        left: 0;
        top: 0;
        border-bottom-right-radius: 40px;
    }
    div#menuDiv2 {
        right: 0;
        top: 0;
        border-bottom-left-radius: 40px;
    }
    div#menuDiv3 {
        right: 0;
        bottom: 0;
        border-top-left-radius: 40px;
    }
    div#menuDiv4 {
        left: 0;
        bottom: 0;
        border-top-right-radius: 40px;
    }
    .divMenu {
        background-color: #92664670;
        width: 100px;
        height: 100px;
        font-size: 1rem;
        transition: width .6s, height .6s, background-color 1s, transform 1s, font-size .6s, margin 1s, border-radius 3s;
        top: auto;
        bottom: auto;
    }
    .divMenuBig {
        margin: 8vw;
        background-color: burlywood;
        width: 80vw;
        height: 80vh;
        transform: rotate(2deg);
        font-size: 1rem;
        border-radius: 40px 40px 40px 40px;
        transition: width .3s, height .3s, background-color 1s, transform 1s, font-size 1s, margin 1s, border-radius 3s;
    }
    fieldset {
        margin: 20px;
        padding: 20px;
        border-radius: 27px;
        pointer-events: auto;
    }
    div#kontaktSymbol {
        font-size: 56px;
        width: 100%;
        height: 100%;
        border-bottom-left-radius: 40px;
        transition: display 1s;
    }
    div#infoSymbol {
        font-size: 56px;
        width: 100%;
        height: 100%;
        border-top-left-radius: 40px;
        transition: display 1s;
    }
    div#galerieSymbol {
        font-size: 56px;
        border-top-left-radius: 40px;
        transition: display 1s;
    }
}


/* Landscape */

@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 4) and (orientation: landscape) {
    div.facebookLike {
        opacity: 1.0;
        width: 256px;
        background: #0c4ae4;
        bottom: 4px;
        position: absolute;
        border-radius: 50px;
        padding: 20px;
        left: 20vw;
        box-shadow: 0px 0px 28px 1px blue;
    }
    div.facebookLike:hover {
        background: #22222240;
    }
    .fbMagIch {
        position: absolute;
        display: block;
        bottom: 20px;
        left: 20px;
    }
    div#einID {
        /* font-family: 'Chicle', cursive; */
        position: absolute;
        top: 50%;
        margin-top: -164px;
        left: 50%;
        margin-left: -200px;
        font-family: 'Coda', cursive;
        text-shadow: 14px 22px 17px #0000004d;
        color: beige;
        padding: 40px;
        border-radius: 40px;
        text-align: center;
        font-size: 2.5vw;
        opacity: 0.05;
        transition: opactiy 1s;
    }
    div#einID h1 {
        font-family: 'Coda', cursive;
        font-size: 4rem;
    }
    div#einID h2 {
        font-family: 'Chicle', cursive;
        font-size: 4rem;
    }
    .color1 {
        background-color: #7290ad;
        transition: backgroun-color 1s;
    }
    .color2 {
        background-color: darkgreen;
        transition: background-color 1s;
    }
    .color3 {
        background-color: dodgerblue;
        transition: background-color 1s;
    }
    .color4 {
        background-color: #302b31;
        transition: background-color 1s;
    }
    .color5 {
        background-color: rgba(192, 155, 87, 0.87);
        transition: background-color 1s;
    }
    div#menuDiv,
    #menuDiv2,
    #menuDiv3,
    #menuDiv4 {
        position: absolute;
        /*           background: radial-gradient(rgb(10, 141, 10) 5%, rgba(143, 143, 40, 0.685) 15%, rgb(46, 87, 46) 60%); */
        background-color: #92664670;
        box-shadow: 8px 1px 63px 1px;
    }
    #formSkills {
        display: none;
        margin: 30px;
    }
    div#menuDiv:focus {
        background: #b53636;
    }
    div#menuDiv {
        font-size: 52px;
        left: 0;
        top: 0;
        border-bottom-right-radius: 40px;
    }
    div#menuDiv2 {
        right: 0;
        top: 0;
        border-bottom-left-radius: 40px;
    }
    div#menuDiv3 {
        right: 0;
        bottom: 0;
        border-top-left-radius: 40px;
    }
    div#menuDiv4 {
        left: 0;
        bottom: 0;
        border-top-right-radius: 40px;
    }
    .divMenu {
        background-color: #92664670;
        width: 100px;
        height: 100px;
        font-size: 1rem;
        transition: width .6s, height .6s, background-color 1s, transform 1s, font-size .6s, margin 1s, border-radius 3s;
        top: auto;
        bottom: auto;
    }
    .divMenuBig {
        margin: 8vw;
        background-color: burlywood;
        width: 80vw;
        height: 80vh;
        transform: rotate(2deg);
        font-size: 1rem;
        border-radius: 40px 40px 40px 40px;
        transition: width .3s, height .3s, background-color 1s, transform 1s, font-size 1s, margin 1s, border-radius 3s;
    }
    fieldset {
        margin: 20px;
        padding: 20px;
        border-radius: 27px;
        pointer-events: auto;
    }
    div#kontaktSymbol {
        font-size: 56px;
        width: 100%;
        height: 100%;
        border-bottom-left-radius: 40px;
        transition: display 1s;
    }
    div#infoSymbol {
        font-size: 56px;
        width: 100%;
        height: 100%;
        border-top-left-radius: 40px;
        transition: display 1s;
    }
    div#galerieSymbol {
        font-size: 56px;
        border-top-left-radius: 40px;
        transition: display 1s;
    }
}

::-webkit-scrollbar {
    width: 0px;
    /* remove scrollbar space */
    background: transparent;
    /* optional: just make scrollbar invisible */
}

::-webkit-scrollbar-thumb {
    top: 20px;
    bottom: 20px;
}

.noselect {
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently
                                    supported by Chrome and Opera */
}