@import './normalize.css';

/*
0  - 28  33
34 - 62  67
68 - 96  0
*/

@keyframes slidy {
    0% {
        left: 0%;
    }
    28% {
        left: 0%;
    }
    33% {
        left: -100%;
    }
    62% {
        left: -100%;
    }
    67% {
        left: -200%;
    }
    96% {
        left: -200%;
    }
    100% {
        left: 0%;
    }
}
@font-face {
    font-family: 'Myriad Pro Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Myriad Pro Regular'), url('./myriadpro-regular.woff') format('woff');
    /*  swap tells the browser that text using the font should be displayed immediately using a system font. */
    font-display: swap;
}

/* Style all font awesome icons */
/* .fa {
    padding: 20px;
    font-size: 30px;
    width: 50px;
    text-align: center;
    text-decoration: none;
} */

/* Add a hover effect if you want */
/* .fa:hover {
    opacity: 0.7;
} */

/* Set a specific color for each brand */

/* Facebook */
/* .fa-facebook {
    background: #3b5998;
    color: white;
} */

html {
    box-sizing: border-box;
    background-color: #f1eee8;
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: Myriad Pro Regular, sans-serif;
    font-style: normal;
    font-weight: 400;
    /* font-size: calc(0.6em + 1vw); */
    text-size-adjust: auto;
    color: #603813;
}
*,
*:before,
*:after {
    box-sizing: inherit;
}
body {
    margin: 0;
    padding: 0;
}
h1,
h2 {
    display: none !important;
}
a.normal-link {
    color: #2772b0;
    /* color: #8b5e3c; */
    text-decoration: none;
}
p {
    padding-left: 0.2em;
    padding-right: 1em;
}
img {
    border: 0; /* Prevent IE9 (and earlier) from displaying a border around the image when the image is a link. */
}
div#slider img {
    width: 100%;
    /* border: 0; Prevent IE9 (and earlier) from displaying a border around the image when the image is a link. */
}
.instagram {
    /* width: 100px;
    height: 100px; */
    /* background: #f09433;
    background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    background: -webkit-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 ); */

    /* More modern gradient for 2018 */
    background: radial-gradient(circle farthest-corner at 35% 90%, #fec564, transparent 50%),
        radial-gradient(circle farthest-corner at 0 140%, #fec564, transparent 50%),
        radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, transparent 50%),
        radial-gradient(ellipse farthest-corner at 20% -50%, #5258cf, transparent 50%),
        radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, transparent 50%),
        radial-gradient(ellipse farthest-corner at 60% -20%, #893dc2, transparent 50%),
        radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, transparent),
        linear-gradient(#6559ca, #bc318f 30%, #e33f5f 50%, #f77638 70%, #fec66d 100%);
    /* border-radius: 30%; */
}
.facebook,
.instagram,
.twitter,
.pinterest {
    border-radius: 30%;
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: bottom;
}

/* MENU */
/* MENU FLEXBOX */
nav {
    background-color: #e1dacd;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0;
    min-width: 0px;
}
ul.menu {
    display: flex;
    flex-flow: row wrap;
    margin: 0;
    list-style-type: none;
    align-items: center;
    /* this makes even spacing between and around items */
    justify-content: space-around;
    /* next calculate suitable space above and below menu texts based on viewport height or width (whichever is smaller) */
    /* 2px is minimum padding, rest gradually increases padding when viewport height&width increases */
    padding: calc(2px + 20 * ((100vmin - 200px) / 1000)) 0;
}
li.menu {
    align-items: center;
    padding: 2px 4px;
    border: 1px solid white;
}
.menu a {
    /* first "a" child of "menu"-class item */
    /* color: #2772b0; */
    color: #8b5e3c;
    font-size: calc(12px + 10 * ((100vw - 320px) / 1280));
    text-decoration: none;
}
/* MENU */

/* MAIN CONTENT CONTAINER */
.main-content {
    width: 100%;
    /* height: 600vh; */
    /* height: 6000px; */
    padding: 0;
    height: 100%;
    justify-content: center;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 0.5em;
    background-color: #faf0b6;
    grid-area: wrapper;
    min-width: 0px;
}
/* MAIN CONTENT CONTAINER */

/* MAIN IMAGE SLIDESHOW */
div#slider {
    overflow: hidden;
}
div#slider figure picture {
    width: calc(100% / 3);
    float: left;
}
div#slider figure {
    position: relative;
    width: 300%;
    margin: 0;
    left: 0;
    animation: 15s slidy infinite;
    /* animation: 15s slidy 0; */
}
/* Container holding the main image, the texts and logo */
.main-image-container {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    position: relative;
    text-align: center;
    color: white;
    min-width: 0px;
}
/* .main-image {
	max-width: 75em;
	max-width: 1200px;
} */
/* MAIN IMAGE SLIDESHOW */

/* FOOTER */
.footer-text {
    text-align: center;
    /* font-size: 1.2em; */
    font-size: calc(10px + 10 * ((100vw - 320px) / 1280));
    color: #8b5e3c;
}
/* FOOTER */

/* THUMBNAILS FLEXBOX */
/* MOBILE (<480px, i.e. NO MEDIA QUERY needed) */
ul.thumbnail {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between; /* this stretches items and makes even spacing between */
    align-items: top;
}
.thumbnail li {
    margin: 1vw 0;
    border: white;
    border-style: solid;
    border-width: 1px;
    /* width: 100%; */
}
/* Container holding thumbnail image and the texts */
.thumbnail-container {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    position: relative;
    text-align: left;
    color: white;
    /* width: 100%; */
}
.thumbnail-title {
    /* font-family: Myriad Pro Regular, sans-serif; */
    /* font-style: normal; */
    border: 0;
    padding: 0;
    /* font-size: calc(0.6em + 6vw); */
    /* font-size: calc(12px + 3vw); */
    font-size: calc(18px + 15 * ((100vw - 320px) / 1280));
    text-shadow: 1px 1px #2a2a2a;
    color: rgb(255, 239, 239);
}
.thumbnail-text {
    /* font-family: Myriad Pro Regular, sans-serif; */
    /* font-style: normal; */
    /* font-weight: 400; */
    font-size: 1em;
    text-transform: none;
    line-height: 1.3;
    /* color: #000; */
    color: #603813;
}
/* Bottom center text inside thumbnail container */
.bottom-center {
    position: absolute;
    top: 61%;
    left: 50%;
    transform: translate(-50%, -39%);
    white-space: nowrap;
}
/* next makes image fill container and not overflow if browser zoomed... */
img {
    max-width: 100%;
}
/* MOBILE (<480px, i.e. NO MEDIA QUERY needed) */

/* MEDIA QUERIES */
/* TABLET AND MOBILE LANDSCAPE */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    html {
        margin: 0% 2%;
        line-height: 1.5em;
    }
    .main-content {
        padding: 0;
    }
    .thumbnail ul {
        flex-flow: row wrap;
    }
    .thumbnail li {
        flex: 0 0 49%;
        margin-right: 0.2em;
        border: unset;
    }
    .thumbnail li:last-child {
        margin-right: 0;
    }
    .thumbnail-title {
        font-size: calc(12px + 15 * ((100vw - 320px) / 1280));
        text-shadow: 1px 1px #2a2a2a;
    }
    /* Bottom center text inside thumbnail container */
    .bottom-center {
        position: absolute;
        top: 61%;
        left: 50%;
        transform: translate(-50%, -39%);
        white-space: nowrap;
    }
}

/* DESKTOP I */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
    html {
        margin: 0% 4%;
    }
    .main-content {
        height: 6000px;
        padding: 0;
    }
    li.menu {
        border: none;
    }
    ul.thumbnail {
        flex-flow: row wrap;
    }
    li.thumbnail {
        flex: 0 0 32%;
        margin-right: 0.4em;
        border: unset;
    }
    li.thumbnail:last-child {
        margin-right: 0;
    }
    .thumbnail-title {
        font-size: calc(12px + 15 * ((100vw - 320px) / 1280));
        text-shadow: 1px 1px #2a2a2a;
    }
    /* Bottom center text inside thumbnail container */
    .bottom-center {
        position: absolute;
        top: 61%;
        left: 50%;
        transform: translate(-50%, -39%);
        white-space: nowrap;
    }
}
/* DESKTOP II */
@media only screen and (min-width: 1024px) and (max-width: 1199px) {
    html {
        margin: 0% 4%;
    }
    .main-content {
        height: 6000px;
        padding: 0;
    }
    li.menu {
        border: none;
    }
    ul.thumbnail {
        flex-flow: row wrap;
    }
    li.thumbnail {
        flex: 0 0 32%;
        margin-right: 0.4em;
        border: unset;
    }
    li.thumbnail:last-child {
        margin-right: 0;
    }
    .thumbnail-title {
        font-size: calc(12px + 15 * ((100vw - 320px) / 1280));
        text-shadow: 1px 1px #2a2a2a;
    }
    /* Bottom center text inside thumbnail container */
    .bottom-center {
        position: absolute;
        top: 61%;
        left: 50%;
        transform: translate(-50%, -39%);
        white-space: nowrap;
    }
}
/* LARGE DESKTOP */
@media only screen and (min-width: 1200px) {
    html {
        margin: 0% 10vw;
    }
    .main-content {
        height: 6000px;
        padding: 0;
    }
    li.menu {
        border: none;
    }
    ul.thumbnail {
        flex-flow: row nowrap;
    }
    li.thumbnail {
        /* flex: 0 0 32%; */
        flex: unset;
        margin-right: 0.4em;
        border: unset;
        width: calc(100% / 6);
    }
    li.thumbnail:last-child {
        margin-right: 0;
    }
    .thumbnail-title {
        font-size: calc(12px + 10 * ((100vw - 320px) / 1280));
        padding-bottom: 0.3em;
        text-shadow: 1px 1px #2a2a2a;
    }
    /* Bottom center text inside thumbnail container */
    .bottom-center {
        position: absolute;
        top: 61%;
        left: 50%;
        transform: translate(-50%, -39%);
        white-space: nowrap;
    }
}

/* HUGE DESKTOP -> limit max font sizes to prevent text growing over picture */
@media screen and (min-width: 1440px) {
    .thumbnail-title {
        font-size: 28px;
        /* text-shadow: 1px 1px #2a2a2a; */
    }
}