@import url(fonts.css);
:root {
    --black-color: #222222;
    --margin: 2em;
    --padding: 1.5em;
    --menu-width: 12rem;
    --shadow: 0em 0em 0.6em rgba(0, 0, 0, 0.3);
    --white-transparent-color: rgba(255, 255, 255, 0.9);
}

@keyframes slideInFromLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInFromRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

html,
body {
    min-height: 100%;
    margin: 0;
}

body {
    color: var(--black-color);
    display: flex;
    justify-content: center;
    font-family: 'Cinzel';
    font-size: 1.2rem;
}

#container {
    width: 100%;
    background-image: url('../images/background-no-repeat.svg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position-x: center;
    display: flex;
    flex-direction: column;
}

.note {
    margin-top: var(--margin);
    margin-right: var(--menu-width);
    width: 100%;
}

#header .note,
.note .container {
    background-color: var(--white-transparent-color);
    padding: var(--padding);
    box-sizing: border-box;
    text-align: right;
}

#header .container {
    flex: 1;
}

#header a {
    text-decoration: none;
    color: inherit;
}

#contact {
    width: 100%;
    min-width: 5rem;
}

.note:first-child {
    margin-top: 0;
}

.note h1 {
    font-family: 'Great Vibes';
    font-size: 3.5rem;
    font-weight: normal;
    margin-top: 0;
    margin-bottom: 0.2em;
}

.note h2 {
    margin-top: 2em;
    margin-bottom: 0.2em;
}

.note .grid {
    display: block;
}

.note .grid.openingHours .grid-item:nth-child(2n - 1) {
    font-weight: 600;
    margin-top: 1rem;
}

.note .grid.pricelist .grid-item:nth-child(3n-2) {
    font-weight: 600;
}

.note .grid.pricelist .grid-item {
    margin-bottom: 1rem;
}

.note .grid.pricelist {
    margin-bottom: 1rem;
    display: grid;
    grid-template-columns: 1.5fr 0.5fr 0.5fr;
}

.note p:last-child {
    margin-bottom: 0;
}

.container .salon {
	height: 200pt;
	background-image: url('../images/salon.jpg');
	background-repeat: no-repeat;
	background-size: cover;
}

.content.team {
    min-width: none;
}

.teamGrid {
    display: flex;
    flex-direction: column;
}

.team-image,
.teamGrid .grid-item {
    width: auto;
    height: 25rem;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: var(--padding);
}

.team-image {
	background-size: contain;
	height: 12rem;
}

.teamGrid .grid-item:last-child {
    margin-bottom: 0rem;
}

#header {
    display: flex;
    justify-content: right;
}

#header .note {
    margin-right: 0;
    box-shadow: none;
}

#header .logo {
    background-image: url('../images/background-no-repeat.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 30%;
    position: absolute;
    height: 12rem;
    left: 0;
}

#header nav {
    font-family: 'Great Vibes';
    font-size: 2em;
    font-weight: normal;
    display: flex;
    background-color: var(--white-transparent-color);
    padding-bottom: 2rem;
    padding-right: 2rem;
    padding-left: 2rem;
}

#header nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    width: 100%;
}

#header nav ul li {
    display: flex;
}

#header nav ul li a {
    text-decoration: none;
    background-color: var(--black-color);
    color: white;
    padding: 0.1em 0.3em 0 0.3em;
    display: flex;
    width: 3em;
    justify-content: center;
}

#header nav ul li:first-child a {
    margin-right: 1rem;
}

#header h1 {
    font-size: 4rem;
    margin: 0;
    line-height: 4.2rem;
}

#header h2 {
    font-family: 'Cinzel';
    font-weight: normal;
    margin: 0;
    font-size: 1.2rem;
}

#contact .phonenumber {
    font-size: 2em;
}

.note a {
    color: var(--black-color);
}

@media (min-width: 100rem) {
    #container {
        width: 60%;
    }
}

@media (min-width: 55rem) {
     :root {
        --shadow: 0.15em 0.15em 0.6em rgba(0, 0, 0, 0.3);
    }
    .note {
        width: 40rem;
    }
    #container {
        margin-left: var(--margin);
        margin-right: var(--margin);
        align-items: flex-end;
        background-size: contain;
    }
    #header {
        animation: 0.5s ease-out 0s 1 slideInFromLeft;
    }
    #header .container {
        transform: rotate(-3.5deg);
        display: flex;
    }
    #header .note {
        box-shadow: var(--shadow);
        background-image: none;
    }
    #header h1 {
        font-size: 5rem;
        line-height: inherit;
    }
    #content {
        animation: 0.5s ease-out 0.1s 1 slideInFromRight;
    }
    #content .container {
        transform: rotate(-1deg);
    }
    #contact {
        animation: 0.5s ease-out 0.2s 1 slideInFromLeft;
        width: auto;
    }
    #contact .container {
        transform: rotate(-0.5deg);
    }
    #container {
        margin-bottom: var(--margin);
        margin-top: var(--margin);
    }
    #header nav {
        width: var(--menu-width);
        background-color: transparent;
        padding-bottom: 0;
        padding-right: 0;
        padding-left: 0;
    }
    #header nav ul {
        flex-direction: column;
        justify-content: center;
    }
    #header nav ul li a {
        transition: 0.1s ease-in-out;
        box-shadow: var(--shadow);
        justify-content: flex-start;
        margin-top: 0.2em;
        padding: 0.1em 0.5em;
    }
    #header nav ul li a:hover {
        width: 4em;
    }
    #header nav ul li:first-child a {
        margin-top: 0;
    }
    #header .note,
    .note .container {
        box-shadow: var(--shadow);
    }
    .note .grid {
        display: grid;
        grid-template-columns: 1.5fr 1fr;
    }
    .note .grid.pricelist {
        display: grid;
        grid-template-columns: 1.5fr 0.3fr 0.3fr;
    }
    .note .grid.openingHours .grid-item:nth-child(2n - 1) {
        margin-top: 0rem;
    }
    .note .grid.pricelist .grid-item {
        margin-bottom: 0;
    }
	
	.salon,
	.team-image,
    .teamGrid .grid-item {
        filter: grayscale(100%);
        transition-property: filter;
        transition-duration: 0.5s;
    }
	
	.salon:hover,
	.team-image:hover,
    .teamGrid .grid-item:hover {
        filter: grayscale(0%);
    }
}

@media (min-width: 40rem) {
    .teamGrid {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
	
	.team-image,
    .teamGrid .grid-item {
        height: 20rem;
        border: 1rem solid white;
        margin-bottom: 1rem;
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
    }
	
    .teamGrid .grid-item:nth-child(2n) {
        margin-left: 1rem;
    }
    #header .logo {
        position: relative;
        height: auto;
        background-color: var(--white-transparent-color);
    }
    #header {
        justify-content: space-between;
    }
}