@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700|Playfair+Display:700i');
@import url(reset.css);

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block
}

body {
    line-height: 1
}

ol,
ul {
    list-style: none
}

blockquote,
q {
    quotes: none
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

.button,
a,
nav ul li a {
    text-decoration: none
}

.logo,
nav,
nav ul li {
    float: left
}

.clear {
    clear: both
}

body {
    font: 13px/22px 'Open Sans', sans-serif;
    color: #78797b
}

a,
nav ul li,
nav ul li a {
    color: #c9627e
}

.wrapper {
    width: 1080px;
    margin: auto
}

p {
    margin: 0 0 14px
}

header {
    background: url(../images/kurzhaarfrisur.webp) center center/cover no-repeat;
    height: 90vh
}

.header {
    height: 100px
}

nav {
    margin: 20px 0 0
}

.logo {
    margin: 20px 100px 0 0
}

nav ul li {
    margin: 22px 20px 0 0;
    font: 400 16px/22px 'Open Sans', sans-serif
}

nav ul li a.active {
    border-bottom: 2px solid #c9627e
}

nav ul li a {
    padding: 0 0 33px
}

.box {
    color: #fff;
    padding: 50px
}

h1 {
    color: #c3506f;
    font: 28px/44px 'Playfair Display', serif;
    font-style: italic
}

h2 {
    font: 28px/36px 'Playfair Display', serif;
    font-style: italic
}

.button {
    font: 16px/22px 'Playfair Display', serif;
    font-style: italic;
    color: #fff;
    border: 2px solid #c3506f;
    padding: 8px 25px
}

.inhalt h2 {
    color: #c85f7b
}

.box_wrap {
    display: none
}

.inhalt {
    padding: 30px
}

.inhalt h2 {
    font: 700 24px/28px 'Playfair Display', serif
}

.inhalt tr.rosa {
    background: #9f9f9f;
    color: #fff
}

.inhalt td {
    width: 20%;
    padding: 0 8px
}

.inhalt td:first-child {
    width: 40% !important
}

.inhalt td.right {
    text-align: right
}

.size {
    font-size: 14px;
    font-weight: 700;
    color: #C85F7B;
    padding: 15px 8px 10px !important
}

@media screen and (max-width:1080px) {
    .wrapper {
        width: 100%
    }

    .box {
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        padding: 5%
    }

    .logo {
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        padding: 0 0 0 5%;
        margin: 20px 8% 0 0
    }

    nav ul li {
        margin: 22px 15px 0 0;
        font-size: 14px
    }
}

@media screen and (max-width:870px) {
    .menu {
        height: auto !important;
        position: relative !important;
        top: 0 !important
    }

    header {
        height: 100% !important
    }
}

@media screen and (max-width:460px) {
    body {
        font: 16px/24px "Open Sans", sans-serif
    }

    .box img {
        width: 90%
    }
}

* {
    margin: 0;
    padding: 0
}

body {
    width: 100%;
    height: 100%;
    overflow-x: hidden
}

.navi-toggle > span {
    display: none
}

.menu {
    position: absolute;
    top: 100px;
    left: 0;
    background: rgba(0, 0, 0, .35);
    width: 775px;
    height: 90vh;
    transform: translate3d(0, 0, 0)
}

.menu label.menu-toggle {
    position: absolute;
    right: -60px;
    width: 60px;
    height: 60px;
    line-height: 0;
    display: block;
    padding: 0;
    text-indent: -9999px;
    background: url(../images/menu-bars.png) no-repeat rgba(0, 0, 0, .35)
}

.menu-checkbox {
    display: none
}

@media screen and (max-width:930px) {
    .menu {
        width: 100%
    }

    .menu label.menu-toggle {
        display: none
    }

    nav {
        position: fixed;
        z-index: 999999;
        height: 100%;
        background: #c3506f;
        right: 0;
        margin: 0;
        transform: translate3d(240px, 0, 0)
    }

    nav label.navi-toggle {
        position: absolute;
        right: 240px;
        width: 80px;
        height: 80px;
        line-height: 0;
        top: 10px;
        display: block;
        padding: 0;
        text-indent: -9999px;
        background: url(../images/menu.jpg) no-repeat
    }

    nav ul {
        width: 240px;
        padding: 20px 0
    }

    nav ul li {
        float: none;
        font-size: 18px;
        line-height: 26px;
        margin: 20px 0 20px 40px
    }

    nav ul li a {
        padding: 0;
        color: #fff
    }
}