.hero {
    background: url("/img/hero.png");
    background-size: cover;
    background-position: center;
    height: 400px;
}

/* WELCOME MAIN */

.welcome {
    color: white;
    position: absolute;
    top: calc(50vh - 100px);
    height: 200px;
    min-width: 300px;
    max-width: 400px;
    width: 90%;
    border: 2px solid black;
    -webkit-box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.5);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
    padding: 30px;
    background-color: rgba(0, 0, 0, 0.4);
    font-weight: bolder;
    font-size: 23px;
}

.welcomeArrow {
    position: absolute;
    top: calc(100vh - 90px);
    left: calc(50vw - 30px);
    -webkit-perspective: 200px;
    perspective: 200px;
}

.welcomeArrow img {
    height: 60px;
    -webkit-filter: invert(1);
    filter: invert(1);
}

/* CONTENT */

.photo {
    box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, 0.2);
}

.content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.contentInsert {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.contentInsert > img {
    border-radius: 5px;
    margin-right: 20px;
}

.content > * {
    margin: 20px;
    margin-left: 0px;
}

.content .map {
    max-height: 350px;
    border: 2px black solid;
    margin-bottom: 100px;
}

.content .icon {
    height: 1em;
    margin-right: 5px;
}

.content .icon:after {
    content: " : ";
    display: block;
}

.content a {
    text-decoration: underline;
    font-style: italic;
}

.promo {
    background-color: #5e5e5e;
    color: white;
    padding: 20px;
	font-size: 30px;
	width: 100%;
	border-radius: 10px;
    font-weight: bolder;
    text-align: center;
}

.promo:nth-of-type(even) {
    background-color: #fefefe;
    color: #5e5e5e;
}

/* PRESENTATION */

.presentationContainer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-left: 20px;
    padding-right: 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.presentation {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 80%;
    max-width: 800px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 30px;
    padding-left: 0px;
    padding-right: 0px;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
}

.presentationContainer:nth-child(even) .presentation {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
    -ms-flex-flow: row-reverse;
    flex-flow: row-reverse;
}

.presentation .heading {
    font-size: 30px;
    font-weight: bolder;
    display: inline;
}

.presentation .heading::after {
    content: "\A";
    white-space: pre;
}

.presentation > * {
    margin: 20px;
}

.presentation > .mediaContainer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: auto;
    min-width: 170px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    min-height: 300px;
    min-width: 300px;
}

.presentation > .mediaContainer > .media {
    width: 100%;
    height: auto;
    border-radius: 20px;
}

.presentation > .mediaContainer > .map {
    border-radius: 20px;
    width: 100%;
    height: 100%;
    border: 2px black solid;
}

.presentation > p {
    width: 100%;
}

/* OFFER */

.offerContainer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
	margin-top: 20px;
}

.offer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-left: 30px;
	margin-right: 30px;
}

.offerTile {
    width: 15%;
    height: 100%;
    max-height: 400px;
    max-width: 300px;
    min-width: 200px;
    border-radius: 10px;
    background-color: #5e5e5e;
    box-shadow: 20px 20px 10px 10px rgba(0, 0, 0, 0.3);
    color: white;
    font-weight: bold;
    padding: 20px;
	padding-bottom: 70px;
	padding-top: 60px;
    text-align: center;
    margin: 20px;
    margin-bottom: 40px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
	justify-content: space-evenly;
    transition: all 0.5s;
}
.offerTile:nth-child(even) {
    background-color: #fefefe;
    color: rgb(83, 83, 83);
}

.offerTile > h1 {
	height: 1.5rem;
	font-size: 170%;
}

.offerTile:hover,
.offerTile:focus {
    box-shadow: 20px 20px 10px 10px rgba(0, 0, 0, 0.3);
    transition: all 0.5s;
    transform: scale(1.05);
}

.offerTile img {
    transition: all 0.5s;
    filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.4));
}

.offerTile:hover img,
.offerTile:focus img {
    transform: scale(1.2) translate(0, 10px) rotateX(0deg);
    filter: drop-shadow(20px 20px 20px rgba(0, 0, 0, 0.4));
    transition: all 0.5s;
}

/* ARTICLE MAIN */

.mainArticle {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.mainArticleText {
    display: block;
    width: 80%;
    max-width: 800px;
    line-height: 1.2rem;
    padding: 30px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/* SLIDE */

.slideOnView {
    -webkit-animation: slideOnView 1s;
    animation: slideOnView 1s;
    -webkit-animation-iteration-count: initial;
    animation-iteration-count: initial;
}

.slideOnView:nth-of-type(even) {
    -webkit-animation: slideOnViewOpposite 1s;
    animation: slideOnViewOpposite 1s;
}

.hiddenFromView {
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
    opacity: 0;
}

.delayOnView {
    -webkit-animation: delayOnView 5s;
    animation: delayOnView 5s;
    color: white;
    -webkit-animation-iteration-count: initial;
    animation-iteration-count: initial;
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
}

@-webkit-keyframes slideOnView {
    from {
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        -webkit-transform: translate(-400px, 0px);
        transform: translate(-400px, 0px);
        opacity: 0;
    }
    to {
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        -webkit-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
        opacity: 1;
    }
}

@keyframes slideOnView {
    from {
        -webkit-transform: translate(-400px, 0px);
        transform: translate(-400px, 0px);
        opacity: 0;
    }
    to {
        -webkit-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
        opacity: 1;
    }
}

@-webkit-keyframes slideOnViewOpposite {
    from {
        -webkit-transform: translate(400px, 0px);
        transform: translate(400px, 0px);
        opacity: 0;
    }
    to {
        -webkit-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
        opacity: 1;
    }
}

@keyframes slideOnViewOpposite {
    from {
        -webkit-transform: translate(400px, 0px);
        transform: translate(400px, 0px);
        opacity: 0;
    }
    to {
        -webkit-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
        opacity: 1;
    }
}

@-webkit-keyframes delayOnView {
    0% {
        opacity: 0;
    }
    90% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes delayOnView {
    0% {
        opacity: 0;
    }
    90% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* MOBILE */

@media (max-width: 800px) {
	.offerContainer {
		width: calc(100% - 10px);
		margin-left: 5px;
	}

    .offerTile {
        font-size: 1.2rem;
        width: 100%;
        height: 100%;
        padding-bottom: 80px;
        margin-bottom: 40px;
    }

    .welcomeArrow {
        position: absolute;
        top: calc(100vh - 170px);
    }

    .contentInsert div {
        white-space: wrap;
        font-size: 1.2rem;
    }

    .contentInsert > img {
        margin-bottom: 20px;
        position: relative;
        left: 50%;
        -webkit-transform: translate(-50%);
        transform: translate(-50%);
    }

    /* PRESENTATION */

    :root {
        --max-presentation-width: 100%;
    }

    .presentationContainer:nth-child(even) .presentation {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .presentation {
        width: 100%;
        max-width: 540px;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        text-align: left;
    }

    .presentation > p {
        max-width: 100%;
        font-size: 1.2rem;
    }

    .presentation > * {
        margin: initial;
        margin-bottom: 20px;
    }

    .presentation > .mediaContainer {
        width: 100%;
        min-height: 250px;
        min-width: 250px;
    }

    .presentation > .mediaContainer > .media {
        max-width: 100%;
    }

    .presentation > .mediaContainer > .map {
        height: 400px;
        margin-left: 20px;
        margin-right: 20px;
    }
}