*, *:after, *:before {
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  box-sizing:border-box;
  -webkit-font-smoothing:antialiased;
  margin:0; padding:0;
}
/*
@font-face {font-family:'Liter'; src:url(Literata-Light.ttf);}
@font-face {font-family:'ExtraLiter'; src:url(Literata-ExtraLight.ttf);}
*/
@font-face {font-family:'Open Sans'; src:url(OpenSans-Regular.ttf);}
:root {
  font-size:16px;
  --gray:#F5F5F5;
  --black:#353A36;
  --blue:#A3BCC9;
  --pink:#CCA196;
  --body:'Open Sans', Serif;
  --headline:'Open Sans', Serif;
  /*--body:'Liter', Serif;
  --headline:'Literata', Serif;*/
}
html {background:var(--gray); overflow-x:hidden;}
body {
  min-height:100vh;
  display:flex;
  width:100%; overflow-x:hidden;
  align-items:center;
  justify-content:flex-start;
  flex-flow:column wrap;
  background:var(--gray);
  font:1rem/1.2rem var(--body);
  padding:0; margin:0;
}
a {
  color:inherit;
  font-style:inherit;
  text-decoration:none;
  cursor:pointer;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
}
nav, main, footer {width:100%; max-width:1004px;}

header {
  width:100%;
  display:flex; justify-content:center; align-content:flex-start; align-items:flex-start;
  flex-flow:row wrap;
  padding:1.5rem 1rem 1rem;
  color:white;
  position:relative;
}
header.home {
  background:url(jam.jpg) no-repeat;
  background-position:bottom 15% center;
  background-size:cover;
  height:100vh; min-height:38rem;
  margin-bottom:-2rem;
}
header.gallery {
  height:100vh; min-height:20rem;
  margin-bottom:-2rem;
}
header.venue {
  background:url(img-inn-edit.jpg) no-repeat;
  background-position:bottom 15% center;
  background-size:cover;
  height:75vh; min-height:26rem; max-height:740px;
  margin-bottom:-2rem;
}

header nav {
  min-height:75px;
  margin:0 0 1rem;
  padding:1rem;
  position:relative;
  background:rgba(255, 255, 255, 0.9); color:var(--black);
  display:flex;justify-content:space-between; align-content:center; align-items:center;
  text-transform:uppercase;
  text-align:center;
  font-size: 20px;
  box-shadow:rgba(33, 35, 38, 0.4) 0px 10px 10px -10px;
  /*-webkit-mask-image:radial-gradient(circle at 1.5rem 1.5rem, transparent 1.5rem, red 0);
  mask-image:radial-gradient(circle at 1.5rem 1.5rem, transparent 1.5rem, white 0);
  -webkit-mask-position:-1.5rem -1.5rem;
  mask-position:-1.5rem -1.5rem;
  -webkit-mask-repeat:repeat;
  mask-repeat:repeat;*/
  z-index:1;
  transition:1s all ease-in-out;
}

header nav:hover {
  background:white;
}

header img {
  width:70px; height:70px;
  animation:24s spin linear infinite;
  margin:0 1rem;
}
header.gallery nav {}
header.gallery nav:hover {background:rgba(255,255,255,1);}
header.home nav {margin:0 0 35vh;}
header nav a {padding:0rem 0rem; width:140px;}
header nav a:hover, header nav a.selected {text-decoration:underline; text-underline-position: under;}
header nav a.title {font-size:1.7rem; line-height:1.7rem; padding:1rem 4rem; width:auto;}
header nav a.title.selected {text-decoration:none;}

h1,h2,h3,h4 {
  font-family:var(--headline);
/*  text-transform:uppercase;*/
  font-weight:300;
  text-align:center;
}
h1 {font-size:7rem; line-height:6rem; margin-top:-1rem; padding:0 0.25rem;}
h2 {font-size:5rem; line-height:5rem; width:100%;}
h3 {font-size:3rem; line-height:3rem; width:100%;}
h4 {font-size:2rem; line-height:3rem; width:100%; max-width:70%; margin:0 auto 1.25rem;}

header div {display:flex;justify-content:space-between; align-content:center; align-items:center; max-width:600px; flex-grow:1;}

header.home div {
  max-width:unset; justify-content:center; flex-basis:100%;
}
header.home div h2 {
  width:auto;
}
header.home h4 {line-height:2rem; margin:1rem 0;}

main {
  background:white;
  text-align:center;
  padding:3rem 2rem 0;
  z-index:1;
  display:flex; flex-flow:column wrap; flex-grow:1;
}

main div img {width:100%;}
main h3 {margin:1rem 0 2rem;}
main a {text-decoration:underline;}
main a:hover {text-decoration:none; color:white; background:var(--pink);}

footer {background:white; margin-bottom:0; min-height:25vh; display:flex; justify-content:center; align-items:center; flex-flow:row nowrap; text-align:center; font-size:0.8rem; padding:5rem 2rem; border-bottom:0.75rem solid var(--pink); z-index:1;}
@keyframes spin {
  0% {transform:none;}
  50% {transform:rotate(180deg);}
  100% {transform:rotate(360deg);}
}
footer img {
  width:100px; height:100px;
  animation:24s spin linear infinite;
  margin:0 4rem;
}
footer p {padding:1rem; max-width:280px; position:relative;}

footer p:before {
  content:'';
  position:absolute;
  height:3rem;
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;
  top:-2rem;
  margin:0 auto;
  width:224px;
}
footer p:first-of-type:before {background-image:url(icon-mountain.svg);}
footer p:last-of-type:before {background-image:url(icon-celebrate.svg);}

footer a {text-decoration:underline;}
footer a:hover {text-decoration:none; background:var(--pink); color:white;}

/* gallery city */
/*
input[type=radio] {
  height:0;
  opacity:0;
  width:0;
}
input[type=radio]:checked ~ .slide {
  transform:translate3d(100%, 0, 0);
}
input[type=radio]:checked + .slide {
  opacity:1;
  transform:translate3d(0, 0, 0);
  z-index:1;
}
input[type=radio]:checked + .slide + .nav {
  z-index:1;
  transition:none;
}
.slider {
  height:100%;
  overflow:hidden;
  width:100%; max-width:unset;
  position:absolute; top:0; z-index:0;
}
.slider div.slide {
  height:100%;
  opacity:0;
  position:absolute;
  top:0;
  left:0;
  z-index:0;
  transform:translate3d(-100%, 0, 0);
  transition:all 1s ease;
  width:100%; max-width:unset;
}
/* gallery slides */
/*
.slider div.slide:nth-of-type(1) {
  background:url(img5.jpg) no-repeat;
  background-position:bottom 55% center;
  background-size:cover;
}
.slider div.slide:nth-of-type(2) {
  background:url(img1.jpg) no-repeat;
  background-position:bottom 55% center;
  background-size:cover;
}
.slider div.slide:nth-of-type(3) {
  background:url(img3.jpg) no-repeat;
  background-position:bottom 55% center;
  background-size:cover;
}
.slider div.slide:nth-of-type(4) {
  background:url(img4.jpg) no-repeat;
  background-position:bottom 55% center;
  background-size:cover;
}
.slider div.slide:nth-of-type(5) {
  background:url(img6.jpg) no-repeat;
  background-position:bottom 55% center;
  background-size:cover;
}
.slider div.slide:nth-of-type(6) {
  background:url(img2.jpg) no-repeat;
  background-position:bottom 55% center;
  background-size:cover;
}
.slider .nav {
  position:fixed;
  padding:20px;
  top:42%;
  transform:translate3d(0, -50%, 0);
  width:98%; left:1%;
  z-index:0;
}
.slider .prev {
  cursor:pointer;
  float:left;
}
.slider .prev::after {
  border-top:2px solid white;
  border-left:2px solid white;
  border-radius:1px;
  content:"";
  display:block;
  transform:rotate(-45deg);
  height:60px; width:60px;
}
.slider .next {
  cursor:pointer;
  float:right;
}
.slider .next::before {
  border-top:2px solid white;
  border-right:2px solid white;
  border-radius:1px;
  content:"";
  display:block;
  transform:rotate(45deg);
  height:60px; width:60px;
}
*/
/* form city */

form {
  display:flex; flex-flow:row wrap; justify-content:space-between;align-items:flex-start;
  background:white; border-radius:20px; padding:2rem 2rem 3rem;
  font-size:1.2rem;
}
form input,
form textarea {
  width:100%;
  padding:1rem 0.5rem 1rem 0;
  margin:0 0 1rem;
  font-family:var(--body);
  font-size:inherit;
  border-radius:0;
  border:none;
  border-bottom:1px solid;
}
form input:focus,
form textarea:focus {
  outline:none;
  border-bottom:2px solid var(--blue);
  transform:translateY(-1px);
}
form textarea {
  min-height:8rem;
}
form input.half {
  width:49%;
}
form input[type=submit],
a.button {
  cursor:pointer; margin:2rem 0 0;
  background:#FEF1ED;
  border:1px solid;
  position:relative;
  overflow:hidden;
  border:1px solid var(--black);
  background-color:white;
  border:1px solid rgba(0, 0, 0, 0.4);
  border-radius:0px;
  box-shadow:rgba(0, 0, 0, 0.02) 0 1px 3px 0;
  box-sizing:border-box;
  color:rgba(0, 0, 0, .9);
  cursor:pointer;
  display:inline-flex;
  min-height:3rem;
  text-decoration:none;
  padding:calc(.875rem - 1px) calc(1.5rem - 1px);
  text-align:center; justify-content:center;
  -webkit-appearance: none;
}
a.button {margin:1rem 0 0;}
form input[type=submit]:hover,
form input[type=submit]:focus,
form input[type=submit]:active,
a.button:hover,
a.button:focus,
a.button:active {
  border-color:rgba(0, 0, 0, 0.95);
  box-shadow:rgba(0, 0, 0, 0.1) 0 4px 12px;
  color:rgba(0, 0, 0, 0.65);
}
form input[type=submit]:hover,
a.button:hover {
  transform:translateY(-1px);
  background:var(--pink); border-color:var(--pink); color:white;
}
form input[type=submit]:active,
a.button:active {
  background-color:var(--blue);
  color:white;
  border-color:rgba(0, 0, 0, 0.15);
  box-shadow:rgba(0, 0, 0, 0.06) 0 2px 4px;
  transform:translateY(0);
}
.toggle {
  margin:1rem 0 2.5rem;
  box-sizing:border-box;
  display:flex;
  flex-flow:row wrap;
  justify-content:flex-start;
  align-items:center;
  align-content:center;
  width:49%;
}
.toggle input {
  width:0;
  height:0;
  position:fixed;
  left:-9999px;
  -webkit-appearance: none;
}
.toggle input + label {
  margin:0;
  padding:0.75rem 2rem;
  box-sizing:border-box;
  position:relative;
  display:inline-flex;
  justify-content:center;
  border:solid 1px;
  border-radius:0px;
  background-color:white;
  font-size:1rem;
  line-height:1.4rem;
  text-align:center;
  box-shadow:0 0 0 rgba(255, 255, 255, 0);
  transition:border-color 0.15s ease-out, color 0.25s ease-out, background-color 0.15s ease-out, box-shadow 0.15s ease-out;
  font-family:var(--body);
  cursor:pointer;
  flex-grow:1;
  -webkit-appearance: none;
}
.toggle input + label:first-of-type {
  border-right:none;
}
.toggle input + label:last-of-type {
  border-left:none;
}
.toggle input:hover + label {
  border-color:var(--pink);
  color:white;
  background:var(--pink);
}
.toggle input:checked + label {
  background-color:var(--blue);
  color:#FFF;
  border-color:var(--blue);
}
.toggle input:focus + label {
  outline:dotted 1px #CCC;
  outline-offset:0.45rem;
}
form .attending {
  font-family:inherit;
  display:flex; flex-flow:row wrap;
}
form .attending p,
form .toggle p {
  width:100%; max-width:unset;
  text-align:center;
  margin:1rem 0 1.5rem;
}
.alert_success {display:none; width:100%;}

main iframe {width:100%; margin:0 0 2rem;}
main p {max-width:70%; margin:0 auto 1rem;}

/* media queries city */

@media (max-width:1440px) {
  header.home nav {margin:0 0 25vh;}
}
@media (max-width:1024px) {
  header.home, header.gallery {height:90vh; padding:1rem;}
  header nav a.title {padding:0.5rem 1rem; font-size:1.3rem;}
  main, footer {margin:0 1rem; width:auto;}
  .toggle {width:100%;}
  form {padding:2.5rem 1rem 1rem;}
  footer p:before {
    width:100%; left:0;
  }
}
@media (max-width:768px) {
  header.home {background-position:center; min-height:28rem;}
  header.home nav {margin:0 0 10vh;}
  header.home div {display:none;}
  header nav {flex-flow:row wrap; justify-content:space-around;}
  header nav a {padding:0.5rem 1rem; width:auto;}
  header nav a.title {font-size:1.4rem; order:-1; width:100%; padding:0.5rem;}
  footer {padding:4rem 1rem 2rem;}
  form .attending,
  form .party {
    flex-flow:row wrap;
    width:100%;
  }
  .toggle {
    margin:0 0 1.5rem;
  }
  .toggle input + label {
    padding:0.75rem 0.25rem;
    margin:1rem 0;
    width:100%;
    flex-basis:100%;
    display:flex;
    justify-content:center;
    align-items:center;
  }
  .toggle input + label:first-of-type {
    border-right:1px solid;
    margin:1rem 0 0;
  }
  .toggle input + label:first-of-type,
  .toggle input + label:last-of-type {
    border-radius:0px;
  }
  .toggle input + label:last-of-type {
    margin:1rem 0;
    border-left:1px solid;
  }
  .toggle input + label:nth-of-type(3) {
    margin:0 0 2rem;
  }
  .toggle p {
    width:100%;
    flex-basis:100%;
    display:flex;
    margin-top:1rem;
    justify-content:center;
  }
}
@media (max-width:640px) {
  h4 {max-width:unset;}
  header.home {height:80vh; padding:1.5rem 1rem 0;}
  header.gallery {height:90vh; padding:1.5rem 1rem 0;}
  header.venue {height:60vh;}
  header.home nav {margin:0 0 15vh;}
  header nav a {padding:0.1rem 0.5rem 0; font-size:0.8rem;}
  main {padding:2rem 1rem 1rem;}
  main p {max-width:unset; margin:0 1rem 1rem;}
  footer {flex-flow:column wrap; padding:0; width:-webkit-fill-available;}
  footer p {padding:2rem 0; margin:4rem 0 0;}
  footer img {margin:0;}
}

@media (max-width:480px) {
  header nav a {width:50%;}
  header nav a#headdude {
    width:100%;
    height:72px;
    width: 100%;
    height: 44px;
    margin-top: -28px;
    z-index: 0;
  }
  header nav a:nth-of-type(1),
  header nav a:nth-of-type(4){
    padding-right:50px;
    z-index: 1;
  }
  header nav a:nth-of-type(2),
  header nav a:nth-of-type(5){
    padding-left:50px;
    z-index: 1;
  }
  header.home nav {
    margin: 0px 0 30vh;
  }
}
@media (max-width:480px) and (hover:none) {
  .toggle {margin:1rem 0; align-items:flex-start; align-content:flex-start;}
  .slider .nav {position:absolute; top:48%;}
}

.bss-slides{
  background: #000;
  position: relative;
  display: block;    
  height:100%;
  overflow:hidden;
  width:100%; max-width:unset;
  position:absolute; top:0; z-index:0;
}

.bss-slides:focus{
 outline: 0;
}

.bss-slides figure{
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.bss-slides figure:nth-of-type(1){
  background-image:url(img5.jpg);
  background-position: top right 40%;
}
.bss-slides figure:nth-of-type(2){background-image:url(img1.jpg)}
.bss-slides figure:nth-of-type(3){background-image:url(img3.jpg)}
.bss-slides figure:nth-of-type(4){background-image:url(img4.jpg)}
.bss-slides figure:nth-of-type(5){
  background-image:url(img6.jpg);
  background-position: top 20% center;
}
.bss-slides figure:nth-of-type(6){
  background-image:url(img2.jpg);
  background-position: top 30% center;
}
  
.bss-slides figure:first-child{
  position: relative;
}

.bss-slides figure img{
  opacity: 0;
  -webkit-transition: opacity 1.2s;
  transition: opacity 1.2s;
  position: relative;
/*-webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  */
}

.bss-slides .bss-show {
  z-index: 3;
}

.bss-slides .bss-show img{
  opacity: 1;
 /* -webkit-backface-visibility: hidden;
  backface-visibility: hidden;*/
}

.bss-slides figcaption{
  position: absolute;
  font-family: sans-serif;
  font-size: .8em;
  bottom: .75em;
  right: .35em;
  padding: .25em;
  color: #fff;
  background: #000;
  background: rgba(0,0,0, .25);
  border-radius: 2px;
  opacity: 0;
  -webkit-transition: opacity 1.2s;
  transition: opacity 1.2s;
}

.bss-slides .bss-show figcaption{
  z-index: 2;
  opacity: 1;
}

.bss-slides figcaption a{
  color: #fff;    
}

.bss-next, .bss-prev{
  color: #fff;
  position: absolute;
  background: #000;
  background: rgba(0,0,0, .6);
  top: 50%;
  z-index: 4;
  font-size: 2em;
  margin-top: -1.2em;
  opacity: .5;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.bss-next:hover, .bss-prev:hover{
  cursor: pointer;
  opacity: 1;
}

.bss-next{
  right: 0;
  padding: 10px 5px 15px 10px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}

.bss-prev{
  left: 0;
  padding: 10px 10px 15px 5px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

.bss-fullscreen{
  display: block;
  width: 24px;
  height: 24px;    
  background: rgba(0,0,0,.3) url(https://leemark.github.io/better-simple-slideshow/img/arrows-alt_ffffff_64.png); 
  -webkit-background-size: contain; 
  background-size: contain;
  position: absolute;
  top: 5px;
  left: 5px;   
  cursor: pointer;    
  opacity: .3;
} 

.bss-fullscreen:hover{
  opacity: .8;   
}

:-webkit-full-screen .bss-fullscreen{
    background: rgba(0,0,0,.4) url(https://leemark.github.io/better-simple-slideshow/img/compress_ffffff_64.png);
    -webkit-background-size: contain;
    background-size: contain;
}

:-moz-full-screen .bss-fullscreen{
    background: rgba(0,0,0,.4) url(https://leemark.github.io/better-simple-slideshow/img/compress_ffffff_64.png);
    background-size: contain;
}

:-ms-fullscreen .bss-fullscreen{
    background: rgba(0,0,0,.4) url(https://leemark.github.io/better-simple-slideshow/img/compress_ffffff_64.png);
    background-size: contain;
}

:full-screen .bss-fullscreen{
    background: rgba(0,0,0,.4) url(https://leemark.github.io/better-simple-slideshow/img/compress_ffffff_64.png);
    -webkit-background-size: contain;
    background-size: contain;
}

:-webkit-full-screen .bss-fullscreen{
    background: rgba(0,0,0,.4) url(https://leemark.github.io/better-simple-slideshow/img/compress_ffffff_64.png);
    -webkit-background-size: contain;
    background-size: contain;
}

:-moz-full-screen .bss-fullscreen{
    background: rgba(0,0,0,.4) url(https://leemark.github.io/better-simple-slideshow/img/compress_ffffff_64.png);
    background-size: contain;
}

:-ms-fullscreen .bss-fullscreen{
    background: rgba(0,0,0,.4) url(https://leemark.github.io/better-simple-slideshow/img/compress_ffffff_64.png);
    background-size: contain;
}

:fullscreen .bss-fullscreen{
    background: rgba(0,0,0,.4) url(https://leemark.github.io/better-simple-slideshow/img/compress_ffffff_64.png);
    -webkit-background-size: contain;
    background-size: contain;
}