/********** w3.css *************************************************************
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
doplneni trid pro w3.css
********************************************************************************/
.w3-fullheight {height: 100vh}   
.w3-images-contain {width:100vmin; height:100vmin}

/*******************************************************************************/



/****** VLASTNI FONTY **********************************************************/
@font-face {
    font-family: "AmalfiCoast"; /* Název, kterým se bude font referencovat */
    src: url("fonts/AmalfiCoastCZ.woff"); /* Cesta k souboru fontu na tvém webserveru */
}

@font-face {
    font-family: "Marcellus SC"; 
    src: url("fonts/Marcellus-SC.woff"); 
}


/************** GOOGLE FONTS ***************************************************/
@import url('https://fonts.googleapis.com/css2?family=Fuzzy+Bubbles&family=Newsreader&family=Noto+Serif+Display&family=Open+Sans:ital@0;1&display=swap');


/*
font-family: 'Fuzzy Bubbles', cursive;
font-family: 'Newsreader', serif;
font-family: 'Noto Serif Display', serif;
font-family: 'Open Sans', sans-serif;
/********* PROMENNE A ANIMACE **************************************************/
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


#loading {
  width: 50px;
  height: 50px;
  position: absolute;
  top:50%; left:50%; margin-left:-25px; margin-top:-25px;    
  animation: pulse 1s infinite;
  z-index:1000

  }
#loading img {width:100%; height:auto;}

@keyframes pulse {
  0% {
    transform: scale(1);
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3));
  }
  50% {
    transform: scale(3);
    filter: drop-shadow(8px 8px 16px rgba(0, 0, 0, 0.3));
  }
  100% {
    transform: scale(1);
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3));
  }
}

/********* ZAKLADNI TRIDY A STYLY **********************************************/

body {font-family:'Open Sans', cursive; box-sizing: border-box; padding:0; margin:0} /*font-family: 'Fuzzy Bubbles'*/
h1 {font-family:inherirt;}
h2 {font-family: "AmalfiCoast", cursive!important}
h3, h4 {font-family:"Marcellus SC", serif!important;}
/*h3 {font-variant: small-caps;}*/

body, html {height: 100%}
/*
body {
    background-image:url(images/pubstella.jpg);
    background-attachment: fixed;
    background-position: center;
}
*/
body > div, body > header, body > footer {background-color:white}

#home, #home h1, #home h2 {font-family: "Marcellus SC", serif!important; /*font-variant: small-caps;*/}
 

#motto {
    width:100vw; top:3vh; padding:0 10px;   
    opacity: 0;
    animation-name: fadeIn;
    animation-duration: 1500ms;
    animation-delay: 1000ms;
    animation-fill-mode: forwards;
    z-index:300
}

#motto div {
    /*text-align:right;*/   
    color:gray;
    font-style:italic; 
    opacity: 0;
    animation-name: fadeIn;
    animation-duration: 500ms;
    animation-delay: 2000ms;
    animation-fill-mode: forwards;
}

#date {
    width:100vw; padding:0 10px;
    padding-bottom:7vh;
    opacity: 0;
    animation-name: fadeIn;
    animation-duration: 1s;
    animation-delay: 3000ms;
    animation-fill-mode: forwards;
    z-index:300
}


/*#logo {position:relative; }*/
#logo_tag {width:44vmin; height:44vmin; top:50%;left:50%; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%)}


@media (orientation: landscape) {
    .w3-images-contain {width:75vmin; height:75vmin }
    #logo_tag {width:33vmin; height:33vmin; top:50%;left:50%; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%)}
    #date {padding-bottom:3vh}
} 



#navbar {display:none; font-family: 'Fuzzy Bubbles'}  /* jQuery zobrazy pri scrollovani*/

.polaroid {display:inline-block; height:150px; padding:10px; box-sizing: border-box;  rotate:0deg; vertical-align:bottom; font-family: 'Fuzzy Bubbles'; cursor: pointer}
.polaroid img {height:100%; width:auto; }

.polaroid[data-rotate="90"], .polaroid[data-rotate="-90"] {width:150px; height:auto}

.polaroid div.date {display:block; position: absolute; bottom:0px; left:50%;  transform:translate(-50%,0%); -ms-transform:translate(-50%,0%); padding:2.5px 5px; margin:0px; color:gray}

#ghost.polaroid {border:1px dashed black; box-shadow:none;  opacity: 0.2; text-align:center}
#ghost.polaroid img { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); max-width:100%}

.polaroid.enlarged {position:fixed; z-index:600 }

@media only screen and (max-width: 640px) {
    .polaroid {height:80px; padding:6px; margin:2px!important}
    .polaroid[data-rotate="90"], .polaroid[data-rotate="-90"] {width:80px; height:auto}
    /*.polaroid img {max-height:80px; width:auto; /*margin:10px*/} /*height:calc(100% - 5px)*/
    .polaroid div.date {font-size:0.4em!important}
    .polaroid.enlarged {padding:12px; }
    .polaroid.enlarged div.date {font-size:0.8em!important}
}



#place a:hover img { position:relative; top:-2px; left:2px; box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;}

p {line-height: 2!important}
p span.quote {
    font-family: 'Fuzzy Bubbles'; 
    display:inline-block; padding:4px 10px; 
    rotate:-1deg;  
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px; 
    background-image: url('images/papir.jpg')
} 
@media only screen and (max-width: 640px) {
	p {line-height: 1.75!important}
}

.bgimg, .bgimg2 {
  min-height: 100%;
  background-position: center;
  background-size: cover;
}

#wedding { min-height: 100vh; background-image:url(/images/eukaliptus2.jpg); background-repeat: no-repeat; background-position: center bottom; background-size: auto 50vh }
#wedding h3 {margin-top:0!important}
#wedding p.title {margin-bottom:0!important}

#wedding > div > div:last-child {padding-bottom: 15vh}

#countdown div {
    position:relative;
    display:inline-block;
    width:4em; height:4em; 
    padding-top:1.2em; margin:1em;
    font-size:1em;
    border-radius:50%; /*border:1px dotted gray;*/
}

#countdown div span:first-child {
    text-align:center; vertical-align: text-top;
    font-family: "AmalfiCoast" 
}
#countdown div span:last-child {
    position:absolute; bottom:-40%; left:50%; transform:translate(-50%,0); font-family: "Marcellus SC"; color:silver
}

@media only screen and (max-width: 640px) {
    #countdown div { font-size:0.8em; }
    #countdown div span:last-child {display:none}
		 #countdown div:last-child {font-size:0.5em;margin-left:0}
		
}


/*
#party-paralax {
    height:33vh; background-color:none;
    background-image:url(images/pubstella.jpg);
    background-attachment: fixed;
    background-position: center;
}
*/
#party-paralax {
    height: 33vh;
    background-image: url(images/pubstella.jpg);
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    z-index:-1;
}



#dressCode .w3-badge {width:50px; height:50px}
@media only screen and (max-width: 640px) {
    #dressCode .w3-badge {width:40px; height:40px}
    #dressCode .w3-badge.w3-margin {margin:5px!important}
}


#money {
    height:10vh;
    background-image:url(images/oldrich-kulhanek-penize.jpg); 
    background-attachment: fixed;
    background-position: center bottom;/*
    background-repeat: no-repeat;
    background-size: contain;*/
}


#RSVP {}
#RSVP h2 {font-family: "Marcellus SC"!important}
#RSVP h3 {font-family: "AmalfiCoast"!important}

/*.bgimg {background-image: url("svatebni-oznameni_blank2.png"); background-size: contain; background-repeat: no-repeat;}

    img#logo {
    width:min(45vw, 45vh); height:min(45vw, 45vh);
    position:absolute; left:calc(52vw - min(45vw, 45vh)/2); top:calc(43vh - min(45vw, 45vh)/2);
     filter: drop-shadow(0px 0px min(1vw, 1vh) rgba(0,0,0,0.65));
     
/*.bgimg2 {background-image: url("/w3images/flowers.jpg")}*/