/* amatic-sc-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Amatic SC';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/amatic-sc-v26-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
         url('../fonts/amatic-sc-v26-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
  }
  
  /* amatic-sc-700 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Amatic SC';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/amatic-sc-v26-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
         url('../fonts/amatic-sc-v26-latin-700.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
  }
  

*, html {
    scroll-behavior: smooth !important;
    margin:0;
    padding:0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
ul {
    padding:1em;
}
body {
    margin:0;
    padding:0;
    background-color: #f3d291;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
body > section:first-of-type {
    margin-top:0px;
}
body > section {
    margin:.8em;
    margin-bottom:2em;
    overflow:hidden;
}
header {
    position: fixed;
    width: 100%;
    top:0;
    margin:0;
    z-index: 100;
}
nav {
    background-color: #f2d8a3;
    padding:.8em;
    align-items: center;
}
nav .brand {
    justify-content: flex-start;
}
a {
    text-decoration: underline dotted;
    color: #333;
}
a:hover {
    color: #f2d8a3;
}
nav .brand a {
    text-decoration: none;
}

nav .brand a:hover {
    color:#000000;
}

nav .brand h1 {
    font-family: "Amatic SC", cursive;
    font-size: 2.6em;
    text-transform: uppercase;
}
h2 {
    text-align: center;
    font-family: "Amatic SC", cursive;
    font-size: 2em;
    text-transform: uppercase;
}
h3 {
    font-family: "Amatic SC", cursive;
    font-size: 1.6em;
    font-weight: 800;
    text-transform: uppercase;
}
.menu-items {
    transition: all 0.4s ease;
    margin-top:1.5em;
}
nav .menu-items ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
nav .menu-items ul li {
    display: block;
    width:100%;
}
nav .menu-items ul li a {
    display: block;
    border-radius: .5em;
    padding: .5em .5em;
    color:black;
    text-decoration: none;
}
nav .menu-items ul li a:hover {
    color:black;
    background-color: #ca9a93;
}

#menu-btn {
    display: block;
    user-select: none;
}

#dates {
    padding-bottom: 2em;
}

.spacer {
    width:100%;
    height:12px;
    margin:0;
    padding:0;
    border:none;
    background-color: transparent;
    background-image:url('../img/spacer.opt.svg');
    background-position:bottom left;
    background-size:100% 12px;
    background-repeat:repeat no-repeat;
}
.splitter {
    width: 100%;
    height: 24px;
    margin: 0;
    border:none;
    background-size:100% 24px;
    background-position:bottom left;
    background-repeat:repeat no-repeat;
}
.splitter.bottom {
    position: absolute;
    bottom: 0;
}
.splitter.top {
    position: absolute;
    top: 0;
}
.splitter.top.yellowish {
    background-image:url('../img/splitter.top.yellowish.svg');
    background-color: transparent;
}
.splitter.bottom.yellowish {
    background-image:url('../img/splitter.bottom.yellowish.svg');
    background-color: transparent;
}
.splitter.top.redish {
    background-image:url('../img/splitter.top.redish.svg');
    background-color: transparent;
}
.splitter.bottom.redish {
    background-image:url('../img/splitter.bottom.redish.svg');
    background-color: transparent;
}
.splitter.top.orangeish {
    background-image:url('../img/splitter.top.orangeish.svg');
    background-color: transparent;
}
.splitter.bottom.orangeish {
    background-image:url('../img/splitter.bottom.orangeish.svg');
    background-color: transparent;
}
.splitter.top.greenish {
    background-image:url('../img/splitter.top.greenish.svg');
    background-color: transparent;
}
.splitter.bottom.greenish {
    background-image:url('../img/splitter.bottom.greenish.svg');
    background-color: transparent;
}
.greenish {
    background-color: #918051;
}
.redish {
    background-color: #ca9a93;
}
.orangeish {
    background-color: #d4a979;
}
.yellowish {
    background-color: #f2d8a3;
}       
.mask1 {
    float:left;
    -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20width%3D%221.5625in%22%20height%3D%221.7385in%22%20version%3D%221.1%22%20viewBox%3D%220%200%2039.687%2044.158%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%3Cg%20transform%3D%22translate(-64.518%2017.911)%22%3E%0A%20%20%3Cpath%20d%3D%22m71.683-8.1662c-2.4881%203.7825-3.8271%206.3853-5.9257%2011.129-2.0986%204.7435-1.5082%2011.901%201.5898%2016.332%203.0981%204.4312%209.0104%207.1823%2014.453%206.9374s10.237-3.8993%2014.308-8.5272c4.071-4.6279%208.2317-12.63%208.0936-18.644-0.13803-6.0146-2.9159-11.205-6.9374-14.164-4.0215-2.9592-9.3601-3.3915-14.019-2.1679-4.6592%201.2236-9.0742%205.3228-11.562%209.1053z%22%2F%3E%0A%20%20%3Cpath%20d%3D%22m71.683-8.1662c-2.4881%203.7825-3.8271%206.3853-5.9257%2011.129-2.0986%204.7435-1.5082%2011.901%201.5898%2016.332%203.0981%204.4312%209.0104%207.1823%2014.453%206.9374s10.237-3.8993%2014.308-8.5272c4.071-4.6279%208.2317-12.63%208.0936-18.644-0.13803-6.0146-2.9159-11.205-6.9374-14.164-4.0215-2.9592-9.3601-3.3915-14.019-2.1679-4.6592%201.2236-9.0742%205.3228-11.562%209.1053z%22%2F%3E%0A%20%3C%2Fg%3E%0A%3C%2Fsvg%3E');
    mask-image: url('data:image/svg+xml,%3Csvg%20width%3D%221.5625in%22%20height%3D%221.7385in%22%20version%3D%221.1%22%20viewBox%3D%220%200%2039.687%2044.158%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%3Cg%20transform%3D%22translate(-64.518%2017.911)%22%3E%0A%20%20%3Cpath%20d%3D%22m71.683-8.1662c-2.4881%203.7825-3.8271%206.3853-5.9257%2011.129-2.0986%204.7435-1.5082%2011.901%201.5898%2016.332%203.0981%204.4312%209.0104%207.1823%2014.453%206.9374s10.237-3.8993%2014.308-8.5272c4.071-4.6279%208.2317-12.63%208.0936-18.644-0.13803-6.0146-2.9159-11.205-6.9374-14.164-4.0215-2.9592-9.3601-3.3915-14.019-2.1679-4.6592%201.2236-9.0742%205.3228-11.562%209.1053z%22%2F%3E%0A%20%20%3Cpath%20d%3D%22m71.683-8.1662c-2.4881%203.7825-3.8271%206.3853-5.9257%2011.129-2.0986%204.7435-1.5082%2011.901%201.5898%2016.332%203.0981%204.4312%209.0104%207.1823%2014.453%206.9374s10.237-3.8993%2014.308-8.5272c4.071-4.6279%208.2317-12.63%208.0936-18.644-0.13803-6.0146-2.9159-11.205-6.9374-14.164-4.0215-2.9592-9.3601-3.3915-14.019-2.1679-4.6592%201.2236-9.0742%205.3228-11.562%209.1053z%22%2F%3E%0A%20%3C%2Fg%3E%0A%3C%2Fsvg%3E');
    mask-repeat: no-repeat;
    mask-size: 100%;
    margin-right: 2em;
    width:8em;
    z-index: 1;
}

.splitter-img {
    margin:0;
    padding:0;
    overflow: hidden;
    max-height:28em;
}

.splitter-img > img {                
    width:100%;
}

#head-img, #inter {
    margin:0;
    padding:0;
    overflow: hidden;
    max-height:28em;
}

#head-img img {
    margin-top:80px;
    width:100%;
}

#inter {
    position: relative;
}
#inter img {
    margin-top:-50px;
    width:100%;
}

#container {
    background-color: #d4a979;
    width: 100%;
}

section {
    clear:both;
    position:relative;
    padding:1em;                
    scroll-margin-top: 110px;
}
    
nav {
    display:flex;
    flex-wrap: wrap;
    align-items: center;
}

.menu-cbtn {
    margin-left: auto;
    margin-right: 0;
    cursor: pointer;
}

.menu-cbtn span {
    display: block;
    width: 33px;
    height: 4px;
    margin-bottom: 5px;
    position: relative;
    
    background: #000000;
    border-radius: 3px;
    
    z-index: 1;
    
    transform-origin: 4px 0px;
    
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                opacity 0.55s ease;
}

.menu-cbtn span:first-child
{
    transform-origin: 0% 0%;
}

.menu-cbtn span:nth-last-child(1)
{
    transform-origin: 0% 100%;
}

.menu-cbtn.open span {           
    transform: rotate(45deg) translate(-4px, -3px);
}

.menu-cbtn.open span:nth-last-child(2)
{
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
}

.menu-cbtn.open span:nth-last-child(1)
{
    transform: rotate(-45deg) translate(0, -2px);
}

.sm-hide {
    display: none;
}

p:first-child {
    margin-top:0px;
}

p {
    margin-top:0.8em;
}

#info li {
    padding-bottom:.5em;
}

#info h2 {
    margin-top:1em;
}

#info h2:first-of-type {
    margin-top:0;
}

.show-more {
    font-family: "Amatic SC", cursive;
    font-size: 1.5em;
    font-weight: bold;
    margin-top:1.5em;
    display:inline-block;
    background:#ca9a93;
    color:black;
    padding:1.4em;
    border-radius: 66% 34% 66% 34% / 68% 52% 48% 32%;
}

.show-more-sm {
    font-family: "Amatic SC", cursive;
    font-weight: bold;
    font-size: 1.2em;
    bottom:0;
    margin-top:1.5em;
    display:inline-block;
    background:#ca9a93;
    color:black;
    padding:.8em;
    border-radius: 51% 49% 53% 47% / 48% 61% 39% 52% ;
}

a.show-more, a.show-more-sm {
    text-decoration: none;
}

a:hover.show-more, a:hover.show-more-sm {
    color:#e6c3be;
}

.hidden {
    display:none;
}

#info-more, #info-even-more {  
    margin-top:1.5em;
    scroll-margin-top: 120px;
}

.date-container {
    width:70%;
    display:grid;
    gap: 1rem;
    grid-template-columns: repeat(1, 1fr);
    margin:1em auto 0 auto;
}

.date {          
    position:relative;      
    background-color:#e6c3be;
    border-radius: 1em;
    min-height:6rem;
    text-align: center;
    border-radius: 33% 37% 35% 32% / 19% 12% 20% 14%;
    display: flex;
    flex-direction: column;
    align-self: stretch;
}

.date .info {
    flex-grow: 1;
    padding: 1em 1em 0 1em;
}

.date .buttons {
    width: 100%;
    padding:0 1em 1em 1em;
}

.date .info img {
    display: inline-block;
    width: 2.5em;
    margin-bottom: 0.5em;
}

.date .info h3 {
    font-size: 1.8em;
}

.date .buttons a {
    display: inline-block;   
    text-wrap: nowrap;          
}

.date .buttons a:not(:first-child) {
    margin-top: 0.8em;
}

.gallery {             
    margin:0;
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    margin-top:1em;
}

.gallery img {
    position:relative;
    display: block;
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    padding:1em;
    text-align: center;
    border-radius: 50%;
}

form {
    padding:0;
    margin:0;
}

form div {
    margin-bottom:.5em;
}

form div.note {
    font-size: .8em;
    margin: .4em .2em .2em .2em;
}

label {
    display:block;
    margin-bottom: .3em;
    margin-left: .2em;
}

input[type="checkbox"] + label {
	display:inline-block;
}

input[type="text"], input[type="email"], input[type="tel"] {
    display:block;
    padding: .4em .8em;
    border: 1px solid;
    border-radius: .5em;
    border-color: hsl(222, 13.9%, 85.9%);
    font-size: 1em;
    width:100%;
}

input[type="submit"] {
    border:none;
    font-family: "Amatic SC", cursive;
    font-weight: bold;
    font-size: 1.5em;
}

@media (max-width:839px) {
    nav .menu-items {                    
        flex-basis: 100%;   
        left: 0%;
        transition: transform 0.3s linear;
    }
}
@media (min-width:690px) {    
    .date-container {
        width: 100%;
        grid-template-columns: repeat(2, 1fr);
    }
    .gallery {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width:840px) {
    nav .menu-items {
        display: block;
        margin-top: 0;
        margin-left: auto;
        margin-right: 0;
    }
    nav .menu-items ul li {
        display: inline;
        position: relative;
    }
    nav .menu-items ul li a {
        display: inline-block;
        position: relative;
    }
    .menu-cbtn {
        display: none;
    }
    .sm-hide {
        display:block;
    }  
    .date-container {
        width: 100%;
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width:1280px)  { 
    #container {
        width: 1280px;
        margin:0 auto;
    }

    header {
        position: fixed;
        width: 1280px;
        top:0;
        margin:0;
        z-index: 100;
    }

    #head-img img {
        margin-top:-70px;
        width:100%;
    }

    .nav-menu {
        justify-content: flex-end;
        display: inline-block;
    }
    .date-container {
        grid-template-columns: repeat(4, 1fr);
    }
    .gallery {
        grid-template-columns: repeat(4, 1fr);
    }
}