/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
/* stylelint-disable*/
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section{display:block}html{line-height:1}body{line-height:inherit}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
/* stylelint-enable */

html {
  font-size: 1.125em;     /*18px / 16px = 1.125em*/
  line-height: 1.222em;   /*22px is 1 gridline at 18px | 22px / 18px = 1.222em*/
  background-color: #FFFFFF;
  color: #000000;
  font-family: -apple-system, 'Quicksand', Helvetica, sans-serif;
}

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

b {
  font-weight: 700;
}

img {
  display: block;
  max-width: 100%;
  border: 0;
}

#verdin-logo {
  width: 11.11111em; /*200px | 200/18=11.11111em*/
  display: block;
  margin: 0 auto;
  padding-bottom: 0.305556em; /*5.5px/18px=0.305556em*/
} 

#page,
#home-page {
  padding: 1.222em 0.91666667em; /*one gridline and 16.5px to achieve minor third: (4/3) (22/16.5px)*/
}

#gallery-page {
  padding: 1.222em 4%;
}

#menu-button {
  position: absolute;
  margin-top: -0.3333333em;
  right: 0.91666667em; /*16.5px from right*/
  height: 2.44444444em; /*44px*/
  width: 2.44444444em; /*44px*/
  background: url("../images/menu_icon.svg") no-repeat;
  background-size: 2.2222222em; /*40px*/
  background-position: 50%;
  font-size: 100%;
  padding: 0;
  border: 0;
  -webkit-appearance: none;
  -webkit-box-sizing: border-box; /* For legacy WebKit based browsers */
  -moz-box-sizing: border-box; /* For legacy (Firefox <29) Gecko based browsers */
  box-sizing: border-box;
}

#home-collage {
  margin-left: -0.91666667em; /*Makes image full bleed. 16.5px | 16.5/18=0.91666667em*/
  margin-right: -0.91666667em;
}

#navfoot,
#home-navfoot {
  display: block;
  visibility: hidden;
  width: 100%;
  text-align: center;
}

#navfoot li,
#home-navfoot li {
  padding: 0;
}

#social-media {
  margin-top: -0.6111111em;  /* 11px | 11/18=0.6111111 */
  visibility: visible;
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
}

#social-media figure {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  height: auto;
  width: auto;
}

#social-media img {
  height: 1.9444444em; /*35px | 35/18=1.944444em*/
  width: 1.9444444em; /*35px | 35/18=1.944444em*/
  padding: 0.277777778em; /*5px on each side | 5/18=0.277777778em*/
}

#gallery-page #social-media {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.7);
}

.pop-up-parent {
  position: absolute;
  width: 100vw;
  height: 100vh;
  left: 0;
  top: 0;
  z-index: 5;
}

.pop-up-parent figure {
  position: fixed;
  height: 100%;
  width: 100%;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background-color: rgba(0, 0, 0, 0.7);
}

.pop-up-image {
  position: fixed;
  max-width: 100%;
  max-height: 70%;
  left:50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.pop-up-close,
.pop-up-next,
.pop-up-back {
  position: fixed;
  color: white;
  font-weight: 700;
}

.pop-up-close {
  font-size: 1.8333333em;
  padding: 0.484848em;
  top:0;
  right:0;
}

.pop-up-next,
.pop-up-back {
  bottom: 5%;
}

.pop-up-next {
  right: 2%;
}

.pop-up-back {
  left: 2%;
}

.material-icons.md-48 { 
  font-size: 2.666667em; 
}

.hidden {
  visibility: hidden;
  display: none;
  position: absolute;
}

.visible {
  visibility: visible;
  display: block;
  position: static;
}

#navbar {
  text-align: center;
  padding: 2.44444444em 0 1.222222em 0; /*44px top, 22px bottom (2 gridlines and 1 gridline)*/
}

#navbar a {
  display: block;
  padding: 0.61111111em 0; /*11px and 0*/
}

li {
  padding-bottom: 0.611111111em; /*11px, half gridline*/
}

.content-tier {
  padding: 0.6111111em 0 0 1.22222em;
}

#package-info,
#contact-info {
  padding-top: 1.22222em;
}

#gallery {
  margin-top: 1.22222em;
  overflow: visible;
}

#gallery li {
  position: relative;
  width: 48%;
  float: left;
  padding: 0;
  margin-bottom: 10%;
}

#gallery figure {
  width: 100%;
}

#gallery img {
  object-fit: cover;
  height: 13.888889em; /*250px*/
  width: 100%;
  border-radius: 0.2777778em;
  transition: all .4s;
}

#gallery .shadow {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  width: 90%;
  height: 85%;
  bottom: 0;
  background: transparent;
  box-shadow: 0 0.444444em 1.666667em rgba(0,0,0,0.6); /*0 8px 30px*/
  z-index: -1;
}

#gallery li:nth-child(2n+1) {
  margin-right: 4%;
}

#gallery li:last-child {
  margin-bottom: 5em;
}

label,
#code-submit,
#photos-submit,
#quince-submit,
#wedding-submit,
textarea {
  display: block;
  width: 100%;
  font-family: inherit;
  font-size: 100%;
  padding: 0;
  border: 0;
  -webkit-appearance: none;
  -webkit-box-sizing: border-box; /* For legacy WebKit based browsers */
  -moz-box-sizing: border-box; /* For legacy (Firefox <29) Gecko based browsers */
  box-sizing: border-box;
}

#code-text {
  font-family: -apple-system, Helvetica, sans-serif;
  font-weight: 900;
  font-size: 1.424em; /*25.629px*/
}

.address,
.date,
.person-name {
  font-family: -apple-system,'Quicksand', Helvetica, sans-serif;
}

#code-text,
#name-text,
.address,
.date,
.person-name {
  height: 2em;
  width: 100%;
  border: 0;
  padding: 0;
  background: #f7f7f7;
  resize: none;
  color: #000000;
  border-radius: 0.0877924586em; /*2px | 2/22.781=0.0877924586em*/
  text-align: center;
}

#name-text,
.address,
.date,
.person-name {
  font-size: 1.266em; /*22.781px*/
}

textarea {
  height: 5.2675475177em; /*120px | 120/22.781=5.2675475177em*/
  width: 100%;
  resize: none;
  font-size: 1.266em; /*22.781px*/
  text-align: center;
  background: #fafafa;
  color: #000000;
}

#chambelanes li,
#damas li {
  width: 49%;
  float: left;
}

#chambelanes li:nth-child(2n+1),
#damas li:nth-child(2n+1) {
  margin-right: 2%;
}

#code-submit,
#photos-submit,
#quince-submit,
#wedding-submit {
  font-size: 1.8020454554em; /*39.645px / 22px = 1.8020454554em*/
  height: 1.891789633em; /*75px / 39.645px = 1.891789633em*/
  max-height: 1.891789633em; /*75px / 39.645px = 1.891789633em*/
  margin-top: 0.3279102031em; /*13px / 39.654px = 0.3279102031em*/
  background: #00D9B3;
  color: #FFFFFF;
  border-radius: 0.0616583633em; /*2px | 2/32.4368=0.0616583633em*/
  font-weight: 400;
}

#quince-submit,
#wedding-submit {
  background: #4CB3E4;
}

#controls {
  padding: 1.2222em 0;
}

.img-choose {
  position: relative;
}

.picker {
  position: absolute;
  left: 0;
  width: 1.388888889em; /*25px | 25/18=1.388888889em*/
}

.picker label {
  cursor: pointer;
  position: absolute;
  width: 1.388888889em; /*25px | 25/18=1.388888889em*/
  height: 1.388888889em; /*25px | 25/18=1.388888889em*/
  top: 0;
  left: 0;
  background: #FFFFFF;
}

.picker label:after {
  opacity: 0.2;
  content: '';
  position: absolute;
  width: 0.5em; /*9px | 9/18=0.5em*/
  height: 0.27777778em; /*5px | 5/18=0.27777778em*/
  background: transparent;
  top: 0.3333333em; /*6px | 6/18=0.33333em*/
  left: 0.38888889em; /*7px | 7/18=0.3888889em*/
  border: 0.1666667em solid #00D9B3; /*3px | 3/18=0.166667em*/
  border-top: none;
  border-right: none;
  transform: rotate(-45deg);
}

.picker label:hover::after {
  opacity: 0.5;
}

.picker input[type=checkbox]:checked + label:after {
  opacity: 1;
}

#details-banner {
  position: fixed;
  display: block;
  width: 100vw;
  height: 2.22222222em; /*40px | 40/18=2.2222222em*/
  z-index: 2;
  top: 0;
  left: 0;
  background-color: #00D9B3;
  color: #FFFFFF;
  box-shadow: 0 0.22222222em 0.44444444em rgba(0,0,0,0.26);/*The shadow of the navigation bar 4px down, 8px blur radius*/
}

#selected-info {
  margin-left: 1.1111111em; /*10px | 10/9(?)=1.111111em*/
  line-height: 4.444444em; /*40px | 40/9=4.4444444em*/
  font-size: 0.5em; /*9px | 9/18=0.5em*/
}

#number-selected {
  font-size: 2em; /*18px | 18/9=2em*/
}

#finish-selection a {
  float: right;
  height: 2.1428571429em; /*30px | 30/14(?)=2.1428571429em*/
  margin-right: 0.7142857143em; /*10px | 10/14=0.7142857143em*/
  margin-top: 0.3571428571em; /*5px | 5/14=0.3571428571em*/
  font-weight: 500;
  line-height: 2.1428571429em; /*30px | 30/14(?)=2.1428571429em*/
  font-size: 0.77777778em; /*14px | 14/18=0.77777778em*/
  padding: 0 0.3571428571em 0 0.3571428571em; /*5px | 5/14=0.3571428571em*/
  border-radius: 0.1428571429em; /*2px | 2/14=0.1428571429em*/
  background-color: #00D9B3;
}

#details-banner,
#finish-selection {
  -webkit-backdrop-filter: blur(10px);
  background: rgba(0,217,179, 0.8);
}

.register-button a {
  display: block;
  font-size: 1.265611111em; /*22.781px | 22.781/18=1.265611111em*/
  padding: 1.097405733em 0; /*25px | 25/22.781=1.097405733em*/
  border-radius: 0.087792459em; /*2px | 2/22.781=0.087792459em*/
  color: #FFFFFF;
  background: #4CB3E4;
  text-align: center;
}

.required-star {
  color: #F44336;
}

/* 480px @ 16px/em*/
/* Based on an 4 column grid with 16px gutters*/
@media screen and (min-width: 30em) {
  #page,
  #home-page {
    padding-left: 3.33333333%;
    padding-right: 3.33333333%;
  }

  #home-collage {
    margin: 0;
  }

  #menu-button {
    right: 3.333334%;
  }

  #selected-info {
    margin-left: 3.33333333%;
  }

  #finish-selection a {
    margin-right: 3.33333333%;
  }

  #gallery img {
    height: 13.8888889em;
  }
}

/* 600px @ 16px/em*/
/* Based on an 8 column grid with 16px gutters*/
@media screen and (min-width: 37.5em) {
  #page,
  #home-page {
    padding-left: 2.66667%;
    padding-right: 2.66667%;
  }
  
  #gallery-page {
    padding-left: 2%;
    padding-right: 2%;
  }

  #menu-button {
    right: 2.66667%;
  }

  #selected-info {
    margin-left: 2.66667%;
  }

  #finish-selection a {
    margin-right: 2.66667%;
  }

  #gallery li:nth-child(n) {
    width: 32%;
    margin-right: 2%;
    margin-bottom: 4%;
  }

  #gallery li:nth-child(3n) {
    margin-right: 0;
  }

  #gallery li:last-child {
    margin-bottom: 0;
  }

  .pop-up-next {
    right: 20%;
  }
  
  .pop-up-back {
    left: 20%;
  }
}

/* 840px @ 16px/em*/
/* Based on a 12 column grid with 24px gutters*/
@media screen and (min-width: 52.5em) {
  #page {
    padding-left: 19.04762%;
    padding-right: 19.04762%;
  }

  #gallery-page {
    padding-left: 2%;
    padding-right: 2%;
  }

  #home-page {
    padding-left: 2.85714%;
    padding-right: 2.85714%;
  }

  #navbar,
  #menu-button {
    visibility: hidden;
    position: absolute;
  }

  #navfoot {
    position: absolute;
    visibility: visible;
    padding-top: 1.222222em;
    width: calc(100% - 38.09524% - 1.22222em);
  }

  #home-navfoot {
    visibility: visible;
    padding-top: 1.222222em;
    width: 100%;
  }

  #gallery-page #social-media {
    position: static;
    width: auto;
    left: auto;
    bottom: auto;
    width: 20%;
    float: left;
    text-align: center;
    background: none;
    -webkit-backdrop-filter: blur(0);
    backdrop-filter: blur(0);
  }

  #gallery-page #navfoot {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.7);
  }

  #navfoot li,
  #home-navfoot li {
    width: 20%;
    float: left;
    text-align: center;
  }

  #gallery img:hover {
    box-shadow: 0 12px 40px rgba(0,0,0,0.4);
  }

  #selected-info {
    margin-left: 19.04762%;
  }

  #finish-selection a {
    margin-right: 19.04762%;
  }

  #gallery li:nth-child(n) {
    width: 23.5%;
    margin-right: 2%;
  }

  #gallery li:nth-child(4n) {
    margin-right: 0;
  }

  #gallery li:last-child {
    margin-bottom: 3em;
  }

  .pop-up-next {
    right: 30%;
  }
  
  .pop-up-back {
    left: 30%;
  }
}

/* 960px @ 16px/em*/
/* Based on a 12 column grid with 24px gutters*/
@media screen and (min-width: 60em) {
  #gallery img {
    height: 19.444444em;
  }
}

/* 1440px @ 16px/em*/
/* Based on a 12 column grid with 24px gutters*/
@media screen and (min-width: 90em) {
  #page {
    padding-left: 26.25%;
    padding-right: 26.25%;
  }

  #home-page {
    padding-left: 1.66667%;
    padding-right: 1.66667%;
  }

  #navfoot {
    width: calc(100% - 52.5% - 1.22222em);
  }

  #home-navfoot {
    width: calc(100% - 3.33334% - 1.22222em);
  }

  #selected-info {
    margin-left: 26.25%;
  }

  #finish-selection a {
    margin-right: 26.25%;
  }

  #gallery img {
    height: 22.222222em;
  }
}

/* 1920px @ 16px/em*/
/* Based on a 12 column grid with 24px gutters*/
@media screen and (min-width: 120em) {
  #home-page {
    padding-left: 17.708333%;
    padding-right: 17.708333%;
  }

  #gallery img {
    height: 25em;
  }
}