html,
body {
    overscroll-behavior-y: contain;
}

html {
  font-size: 1.74vh;
}

body {
  margin: 0 auto;
  line-height: 1;
  color: rgb(14,16,51);  
  text-align: center;
  font-family: 'Roboto', sans-serif;
}

.main-table-aligner {
  display: flex;
  flex-direction: column;
  justify-content: center;  
}

#ascensorBuilding {
  background: url(/app/images/invitation2/zita7/bg.png) top left repeat;
  background-size: 27rem;
}

@media screen and (min-width:0\0) {
  /* 
  IE9 and IE10 rule sets go here
  in IE 10 justify-content: center; moves content to bottom
   */
  .main-table-aligner {
    justify-content: inherit;
  }
}

.main-table-border {
  margin: auto;
  width: 34.5rem;
  max-width: 100vw; 
  
  display: flex;
  flex-direction: row;
  align-items: center;
  box-shadow: 10px 10px 5px rgba(0, 0, 0, .3);
}


.main-table {
  height: 50rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* iPhone scroll stuck fix */
  flex:1;
}

.main-table-inner {
  height: 100%;
  display: flex;
  flex-direction: row;
}
.content-border {
  width: 100%;
  height: 100%;
}

.cover {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

.cover-inner {
  min-height: min-content; /* For Samsung Internet Browser to not collapse the long page content */ 
  flex: 1;
  display: flex;
  flex-direction: column;

  padding-top: 2.3rem;
  padding-bottom: 2.3rem;

  background-image: url(/app/images/invitation2/zita7/bg_cloud.svg),
    url(/app/images/invitation2/zita7/bg_cloud_rev.svg),
    url(/app/images/invitation2/zita7/bg_791.jpg);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-attachment: local, local, local;
  background-position: right 1rem center, left 1rem bottom 2.5rem, center;
  background-size: 10rem, 10rem, cover;
}



.vertical-separator {
  min-height: 1.4rem;
}

.ascensorBuilding-save-the-date .cover-inner {
  padding-bottom: 5.3rem;
}

.countdown-header {  
  font-family: 'Pacifico', cursive;
  font-size: 2.5rem;
}

.main-text, .nav-link {
  font-size: 0.94rem;
  line-height: 1.6rem;
  letter-spacing: 0.32rem;
  margin: auto;  
  text-transform: uppercase;
}
.main-text {  
  width: 100%; /* IE11 */
}
.main-text-bi {
  font-weight: 900;
  font-style: italic;
}
.cover-text {
  line-height: 1.92rem;  
}
.placeholder {
  flex:1
}
.placeholder-double {
  flex:2
}

.names-holder {
  min-height: min-content; /* For Samsung Internet Browser to not collapse */
  background: url(/app/images/invitation2/zita7/cover_heart.svg)
    center no-repeat;
  background-size: 100% 100%;
  padding: 3rem 0rem 15rem;
  height: 31rem;
  margin: 0rem 1rem 1rem;
}

.names {
  font-family: 'Pacifico', cursive;
  width: 100%;
  margin: 0.5rem auto;
  line-height: 1.85rem;  
  max-width: 25rem;
  
  display: flex;
  flex-direction: column;
  justify-content: center;  
  color: white;
}
.name-1 {
  font-size: 2.5rem;
}
.name-2 {
  line-height: 0.75rem;
  font-size: 2rem; 
}
.name-and {
  line-height: 2.5rem;
  font-size: 1.7rem;  
  padding-right: 2.75rem;
}

.button-row {
  min-height: min-content; /* For Samsung Internet Browser to not collapse */
  flex:1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.button-row-pt {
  padding-top: 0.65rem;
}
.button-row-pb {
  padding-bottom: 1.5rem;
}

.nav-column {
  z-index: 20;
  position: absolute;
}

.simplebar-mask {
  /* ToDo: DANGER! This is needed for the anchor's wind to be behind the text on the last page. Any harm in simplebar?? 
  If this causes any problem we should put the wind into separate image/div and position that next to the arrow
  */
  z-index: auto !important;  
}

.content-main {
  z-index: 30;  
}

.nav-column a.next, .nav-column a.prev {
  display: block;
  width: 6.5rem;
  height: 4.8rem;  
  background-repeat: no-repeat;    
  background-size: 100%;
  background-position: center;
}

.nav-column-left {
  left: 0;
}
.nav-column-right {
  right: 0;
}
.main-table-border {
  position: relative;
}

.nav-column a.next {
  background-image: url('/app/images/invitation2/zita7/button_right.png');
}
.nav-column a.prev {
  background-image: url('/app/images/invitation2/zita7/button_left.png');
}
  
a:link, a:visited, a:hover, a:active, #submit {
  color: rgb(14,16,51);  
}

.nav-icon {
  height: 3.125rem;
}

.nav-item {
  padding-left: 1rem;
  padding-right: 1rem;
}

.content {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.content-inner {
  min-height: min-content; /* For Samsung Internet Browser to not collapse the long page content */ 
  flex: 1;
  display: flex;
  flex-direction: column;
  background-image: url(/app/images/invitation2/zita7/bg_cloud.svg),
    url(/app/images/invitation2/zita7/bg_cloud_rev.svg),
    url(/app/images/invitation2/zita7/bg_791.jpg);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-attachment: local, local, local;
  background-position: right 2rem top 4rem, center bottom 9rem, center;
  background-size: 10rem, 10rem, cover;
  
  padding: 0rem 4.5rem 2.5rem;
  
}

#main-table-4 .content-inner {
  background: url(/app/images/invitation2/zita7/bg_791.jpg) center/cover no-repeat local;
}

.content-inner-border {
  flex: 1;
  display: flex;
  flex-direction: column;
  
  background-image: url('/app/images/invitation2/zita7/logo_home.svg');
  background-repeat: no-repeat;
  background-attachment: local;
  background-position: center top 1.5rem;
  background-size: auto 4.5rem;
  padding-top: 8rem;
}

#content-1 .content-inner-border  {
  background-size: auto 5.75rem;
}
#content-2 .content-inner-border  {
  background-image: url('/app/images/invitation2/zita7/logo_party.svg');
}
#content-3 .content-inner-border  {
  background-image: url('/app/images/invitation2/zita7/logo_location.svg');
  background-size: auto 5rem;
}
#content-4 .content-inner-border {
  background-image: url('/app/images/invitation2/zita7/logo_rsvp.svg');
}

.content-main {
  flex: 1;
  display: flex;
  justify-content: center;
  
  align-items: center;
  flex-direction: column;
  padding-bottom: 5rem;
}

.nav_row {
  padding-bottom: 10px;
}

a.nice-button, #submit {
  display: flex;
  align-items: center;
  justify-content: center;
  background: url(/app/images/invitation2/zita7/button_text.png) no-repeat center/100% 100% transparent;
  letter-spacing: 0.32rem;
  font-weight: 900;
  font-size: 0.9rem;
  text-transform: uppercase;
  min-height: 5.4375rem;
  min-width: 14.876rem;
  padding: 1.75rem 3.55rem 0rem;
}
.button-arrow {
  width: 1.4rem;
}  
#submit {  
  border: 0px;
  cursor: pointer;
}

textarea, input, select {
  width: 100%;
}
textarea, input, select {
  border: 2px solid #E39587;
  border-radius: 4px;
}
textarea:focus, input:focus, select:focus {
  outline: none;
  border: 2px solid #D76D75;
  font-size: 0.9rem;
}

label {
  font-weight: 900;
  font-style: italic;  
}


a, #submit {
  
  text-decoration: none;
  -moz-transition: 100ms ease-in;
  -o-transition: 100ms ease-in;
  -webkit-transition: 100ms ease-in;
  -ms-transition: 100ms ease-in;
  transition: 100ms ease-in;
  
}

a:hover, a:focus, #submit:hover, #submit:focus  {
  text-decoration: none;
}

.nav-link {
  font-size: 0.9rem;
  line-height: normal;
  text-transform: uppercase;
}

.selected {
  opacity: 0.5;
}
.nav-link:hover {
  opacity: 0.5;
}

.icon {
  width: 100%;
  text-align: center;
}

.my-py-2 {
  padding-bottom: 0.5rem !important;
  padding-top: 0.5rem !important;
}

#rsvp_thanks, .survey {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

/* FIX countdown width on rsvp_thanks layer and in IE10  */
#rsvp, #rsvp_thanks {
  width:100%;
}

/*--------------------------
-- COUNTER
----------------------------*/

#countdown-wrap {
  width: 100%;
  padding: 1.5rem 0.56rem;
}
#countdown {
  width: 100%;
  list-style: none;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  padding-inline-start: 0px;
  margin-bottom: 0px;
}

.timeblock {
  background:url('/app/images/invitation2/zita7/countdown_holder.png') center top no-repeat;
  background-size: 100%; /* it was streched in chrome on huawei p10 lite */ 
  padding-top: 0.75rem;
  margin: 0.25rem;
  width: 6.5rem;
}


.number {
  display: block;
  line-height: 3rem;
  font-size: 1.875rem;
  font-weight: 900;
  font-style: italic;
}

.title {
  display: block;  
  font-family: 'Pacifico', cursive;
  font-size: 1.725rem;
}

/* rotate info: https://stackoverflow.com/questions/28741562/rotate-text-and-shrink-its-container-to-the-new-width */

.container {
    position: relative;
    display: inline-block;
    height: 4rem;
    min-width: 30px;
}

.rotate {
    text-align: right;
    height: 23px;
    line-height: 0px;
    width: 9.25rem;
    position: absolute;
    bottom: -5.8rem;
    left: 0.3rem;
    transform: rotate(-65deg) translate(-30px,-15px);
    transform-origin: top left;
}


/* IPhone X type very high screens */
@media screen and (max-aspect-ratio: 1/2) {
  html {
    font-size: 1.24vh;
  }
}

/*
  Make the size bigger on very small / landscape screens and when the keyboard is active on mobile
*/
@media (max-height:500px) {
  html {
    font-size: 2.48vmax;
  }
  .main-table {
    height: 100vh;    
  }
}

/*
  Names holder v2 - recolorable girl and boy hair
*/
.names-holder-main {
  position: relative;
}
.names-holder-v2 {
  background: none;
  position: relative;
}
.names-holder-bg {
  position: absolute;
  left: 0; 
  right: 0; 
  margin-left: auto; 
  margin-right: auto;
}
.names-holder-bg svg {
  height: 31rem;
}
.names-holder-bg svg .cls-girl-hair {
  fill: #56311b;
}
.names-holder-bg svg .cls-boy-hair {
  fill: #56311b;
}


/* ------------------------------------------------------------------------------------ 
-- Demo
------------------------------------------------------------------------------------*/
.demo_header {
  text-align: center;
  padding: 10px;
  color: #ffffff;
  background-color: #000000;
  z-index: 100;
  position: absolute;
  width: 100%;
  opacity: 0.7;
  top: 0px;
}

.demo_header a {
  text-decoration: underline;
  -moz-transition: 500ms ease-in;
  -o-transition: 500ms ease-in;
  -webkit-transition: 500ms ease-in;
  -ms-transition: 500ms ease-in;
  transition: 500ms ease-in;
  color: rgb(248, 227, 240);
  margin: 0px 7px 5px 7px;
  white-space: nowrap;
  display: inline-block;
}

.demo_header a:hover {
  color: rgb(238, 72, 127);
}


@media print {
  @page {
    margin: 0px;
  }
  #cover-holder {
    page-break-before: always;
    break-before: page;
  }
  .main-table-aligner {
    width: 100vw;
    height: 100vh;
    page-break-after: always;
    break-after: page;
  }
  .main-table-border {
    margin: 0px;
    height: 100%;
    width: 100%; 
    background-position: right 2rem top 4rem, center bottom 4rem, center;
  }  
  .main-table {
    height: 100%;
  }  
  .button-row, .nav_row, .print-hide {
    display: none;
  }  
  .nav-column {
    visibility: hidden;
  }
  html {
    font-size: 32px;
  }
  
  /* Turn off background */
  #ascensorBuilding {
    background: none;
  }
  .main-table-border, #cover-holder .main-table-border {
    background-image: url(/app/images/invitation2/zita7/bg_cloud.svg),
      url(/app/images/invitation2/zita7/bg_cloud_rev.svg);
    background-repeat: no-repeat, no-repeat;
    background-attachment: local, local;
    background-position: right 2rem top 4rem, center bottom 4rem;   
    background-size: 10rem, 10rem;    
  }    
  #cover-holder .main-table-border {
    background-position:  right 1rem center, left 1rem bottom 2.5rem;
  }
}