html,body{text-align:center;height:100%;line-height:1.6em; margin:0;font-family:Georgia,"Times New Roman",serif;box-sizing:border-box}
img{vertical-align:middle}
/* fade image in after load */
.lazyload,.lazyloading{opacity:0;}
.lazyloaded {opacity:1; -webkit-transition:opacity 300ms; transition:opacity 300ms;}
.nowrap{white-space:nowrap}
.intro h2{margin:65px auto; font-weight:normal}
#footer{font-size:12px; vertical-align:bottom; position:relative; z-index:20;-webkit-transition:all 2s;transition:all 2s; margin:0}
#footer img{position:relative; margin-top:-3em}
#footer.reach{margin-top:-20%}
#footer.reach div:first-child{bottom:18.5em}
#footer.reach div:nth-child(2){bottom:14em}
#footer div{bottom:0; position:absolute; width:100%; text-align:center; z-index:21; color:#666;-webkit-transition:all 2s; transition:all 2s}
#footer div:first-child{-webkit-transition:all 1s;transition:all 1s}
.controler{opacity:0.7; position:absolute; left:50%; -ms-transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);transform:translateX(-50%); text-align:center; z-index:200}
#playlist{display:none; padding:5px; background:#666; list-style:none; width:290px; margin:0 auto; border-radius:5px}
#playlist li{margin:3px; color:#FFF}
#playlist li.active{font-weight:bold}
#playlist li.active a:before{content:""; display:inline-block; width:0; height:0; border-style:solid; border-width:4px 0 4px 6px;border-color:transparent transparent transparent #fff; margin-right:0.2em}
#playlist li a{text-decoration:none; color:#FFF}
.controler:hover #playlist{display:block}
.splashbg{width:100%; height:100%; background:url(/images/photos/switzerland_trip_2015-270.jpg) no-repeat center center; background-size:cover; position:fixed; left:0; top:0; -webkit-filter:grayscale(80%); filter:grayscale(80%);}
.splash{padding:4em 0;}
.splashtitle, .splashfooter{width:100%; text-shadow:1px 1px 1px #FFF; z-index:20; position:relative;}
.splashtitle{margin:1em 0; text-shadow:1px 1px 1px rgba(0,0,0,0.6);}
.invitation, .ceremony{position:relative; display:block; text-decoration:none;}
.splashspacer>img{width:50%; max-width:512px; margin:7% auto;}
.invitation>b, .ceremony>b{z-index:20; position:relative; font-family:Allura; font-weight:normal; font-size:24pt; width:100%; display:block; position:absolute; text-align:center; color:#FFF;text-shadow:1px 1px 1px rgba(0,0,0,0.6);}
.invitation>b{top:3%;}
.invitation>img{position:absolute; max-width:512px; width:50%; box-shadow:0 1px 4px rgba(0,0,0,0.5); border:0;}
.invitation>img:nth-child(6){-webkit-transform: translate(-30%,30%) rotate(-25deg); transform: translate(-30%,30%) rotate(-25deg) z-index:1;}
.invitation>img:nth-child(5){-webkit-transform: translate(-40%,30%) rotate(-15deg); transform: translate(-40%,30%) rotate(-15deg); z-index:2;}
.invitation>img:nth-child(4){-webkit-transform: translate(-50%,30%) rotate(-5deg); transform: translate(-50%,30%) rotate(-5deg); z-index:3;}
.invitation>img:nth-child(3){-webkit-transform: translate(-60%,30%) rotate(5deg); transform: translate(-60%,30%) rotate(5deg); z-index:4;}
.invitation>img:nth-child(2){-webkit-transform: translate(-70%,30%) rotate(15deg); transform: translate(-70%,30%) rotate(15deg); z-index:5;}
.invitation>img:nth-child(1){-webkit-transform: translate(-80%,30%) rotate(25deg); transform: translate(-80%,30%) rotate(25deg); z-index:6;}
.invitation:hover>img{-webkit-transition:all 0.5s; transition: all 0.5s;}
.invitation:hover>img:nth-child(6){-webkit-transform:scale(0.75, 0.75) translate(-30%,30%) rotate(-25deg); transform:scale(0.75, 0.75) translate(-30%,30%) rotate(-25deg); -webkit-filter: blur(2.5px); filter: blur(2.5px);}
.invitation:hover>img:nth-child(5){-webkit-transform:scale(0.8, 0.8) translate(-40%,30%) rotate(-15deg); transform:scale(0.8, 0.8) translate(-40%,30%) rotate(-15deg); -webkit-filter: blur(2px); filter: blur(2px);}
.invitation:hover>img:nth-child(4){-webkit-transform:scale(0.85, 0.85) translate(-50%,30%) rotate(-5deg); transform:scale(0.85, 0.85) translate(-50%,30%) rotate(-5deg); -webkit-filter: blur(1.5px); filter: blur(1.5px); box-shadow:0 1px 6px rgba(0,0,0,0.6);}
.invitation:hover>img:nth-child(3){-webkit-transform:scale(0.9, 0.9) translate(-60%,30%) rotate(5deg); transform:scale(0.9, 0.9) translate(-60%,30%) rotate(5deg); -webkit-filter: blur(1px); filter: blur(1px); box-shadow:0 1px 7px rgba(0,0,0,0.7);}
.invitation:hover>img:nth-child(2){-webkit-transform:scale(0.95, 0.95) translate(-70%,30%) rotate(15deg); transform:scale(0.95, 0.95) translate(-70%,30%) rotate(15deg); -webkit-filter: blur(0.5px); filter: blur(0.5px); box-shadow:0 2px 8px rgba(0,0,0,0.8);}
.invitation:hover>img:nth-child(1){-webkit-transform:translate(-80%,30%) rotate(25deg); transform:translate(-80%,30%) rotate(25deg); box-shadow:0 3px 8px rgba(0,0,0,0.9);}

.ceremony>b{bottom:3%;}
.ceremony>img{position:absolute; max-width:512px; width:50%; box-shadow:0 1px 4px rgba(0,0,0,0.5); border:0;}
.ceremony>img:nth-child(6){-webkit-transform: translate(-80%,30%) rotate(-25deg); transform: translate(-80%,30%) rotate(-25deg) z-index:1;}
.ceremony>img:nth-child(5){-webkit-transform: translate(-70%,30%) rotate(-15deg); transform: translate(-70%,30%) rotate(-15deg); z-index:2;}
.ceremony>img:nth-child(4){-webkit-transform: translate(-60%,30%) rotate(-5deg); transform: translate(-60%,30%) rotate(-5deg); z-index:3;}
.ceremony>img:nth-child(3){-webkit-transform: translate(-50%,30%) rotate(5deg); transform: translate(-50%,30%) rotate(5deg); z-index:4;}
.ceremony>img:nth-child(2){-webkit-transform: translate(-40%,30%) rotate(15deg); transform: translate(-40%,30%) rotate(15deg); z-index:5;}
.ceremony>img:nth-child(1){-webkit-transform: translate(-30%,30%) rotate(25deg); transform: translate(-30%,30%) rotate(25deg); z-index:6;}
.ceremony:hover>img{-webkit-transition:all 0.5s; transition: all 0.5s;}
.ceremony:hover>img:nth-child(6){-webkit-transform:scale(0.75, 0.75) translate(-120%,30%) rotate(-25deg); transform:scale(0.75, 0.75) translate(-120%,30%) rotate(-25deg); -webkit-filter: blur(2.5px); filter: blur(2.5px);}
.ceremony:hover>img:nth-child(5){-webkit-transform:scale(0.8, 0.8) translate(-102%,30%) rotate(-15deg); transform:scale(0.8, 0.8) translate(-102%,30%) rotate(-15deg); -webkit-filter: blur(2px); filter: blur(2px);}
.ceremony:hover>img:nth-child(4){-webkit-transform:scale(0.85, 0.85) translate(-84%,30%) rotate(-5deg); transform:scale(0.85, 0.85) translate(-84%,30%) rotate(-5deg); -webkit-filter: blur(1.5px); filter: blur(1.5px); box-shadow:0 1px 6px rgba(0,0,0,0.6);}
.ceremony:hover>img:nth-child(3){-webkit-transform:scale(0.9, 0.9) translate(-66%,30%) rotate(5deg); transform:scale(0.9, 0.9) translate(-66%,30%) rotate(5deg); -webkit-filter: blur(1px); filter: blur(1px); box-shadow:0 1px 7px rgba(0,0,0,0.7);}
.ceremony:hover>img:nth-child(2){-webkit-transform:scale(0.95, 0.95) translate(-48%,30%) rotate(15deg); transform:scale(0.95, 0.95) translate(-48%,30%) rotate(15deg); -webkit-filter: blur(0.5px); filter: blur(0.5px); box-shadow:0 2px 8px rgba(0,0,0,0.8);}
.ceremony:hover>img:nth-child(1){-webkit-transform:translate(-30%,30%) rotate(25deg); transform:translate(-30%,30%) rotate(25deg); box-shadow:0 3px 8px rgba(0,0,0,0.9);}

.gallery{margin:20px 0}
.gallery img{margin:2px 0}
.s-hide{display:none!important}
.fullwidth{width:100%}
.halfwidth{width:50%}
.onethirds{width:33%}
.cell{display:table-cell;text-align:center; vertical-align:top}
.clear{clear:both;display:table}
.banquet{margin:20px}
.banquet img{width:80%;margin:5px auto;border:none}
p{margin-left:5%; margin-right:5%}
.amp{font-family:Rochester; font-size:20pt; line-height:1.8em}
.sans{font-family:Arial, Helvetica, sans-serif}
.clickphoto{font-family:"Times New Roman", serif; font-size:13px; text-decoration:underline}
.signature{text-align:right}
#welcomeScene{position:relative}
h1{color:#FFF;text-align:center;font-family:Allura;font-size:55pt;font-weight:400}
.starting{width:100%;color:#FFF;position:absolute;text-align:center;z-index:10}
.starting h1{margin:140px 0 50px}
.intro,.thankyou,.metCelebration{padding:30px 0;position:relative;background:#FFF; z-index:10}
#parallax{width:100%;height:100%;max-width:1800px;max-height:1080px;overflow:hidden;position:relative;box-shadow:1px 2px 5px rgba(0,0,0,0.5) inset;vertical-align:middle;margin:50px auto 20px}
img.parallax-layer{width:110%}
.parallax-layer{left:0;right:0;bottom:0;top:0;position:absolute}
.caroleo{left:0;bottom:0;right:auto;top:auto}
.parallax-layer p{color:#FFF;font-weight:lighter;font-size:24pt;margin-top:20%;text-shadow:1px 1px 1px rgba(4,112,180,0.8);opacity:.65}
#parallax a.fb{text-decoration:none;color:#3B5998;background:#FFF;display:inline-block;padding:3px 20px 3px 5px;position:absolute;right:0;bottom:20px;border-radius:5px 0 0 5px;box-shadow:-1px 2px 2px rgba(4,112,180,0.8)}
.milestone{list-style:none;display:inline-block;margin:20px auto;text-align:left}
.swiper-container{width:100%;}
.swiper-slide{text-align:center;font-size:18px}
.swiper-slide img{width:auto;height:auto;max-width:100%;max-height:100%;-ms-transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);transform:translate(-50%,-50%);position:absolute;left:50%;top:50%}
.swiper-button-black{opacity:.6}
.swiper-button-black:hover{opacity:1}
.dialog a{color:#000}
.modalbg{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,0);z-index:99999;-moz-transition:all 2s ease-out;-webkit-transition:all 2s ease-out;-o-transition:all 2s ease-out;transition:all 2s ease-out;-webkit-transition-delay:.2s;-moz-transition-delay:.2s;-o-transition-delay:.2s;-transition-delay:.2s;display:block;pointer-events:none}
.modalbg .dialog{width:80%;max-height:90%;max-width:600px;box-sizing:border-box;position:relative;top:-3000px;margin:0 auto;padding:30px 15px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;background:#fff;box-shadow:0 0 10px rgba(0,0,0,0.8);-moz-box-shadow:0 0 10px rgba(0,0,0,0.8);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.8); line-height:1.5em}
.modalbg:target{display:block;height:100%;pointer-events:auto;background:rgba(255,255,255,0.8);-moz-transition:all .5s ease-out;-webkit-transition:all .5s ease-out;-o-transition:all .5s ease-out;transition:all .5s ease-out}
.modalbg:target .dialog{top:50%;-ms-transform:translateY(-50%);-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);transform:translateY(-50%);-moz-transition:all .8s ease-out;-webkit-transition:all .8s ease-out;-o-transition:all .8s ease-out;transition:all .8s ease-out;-webkit-transition-delay:.4s;-moz-transition-delay:.4s;-o-transition-delay:.4s;-transition-delay:.4s}
.dialog a.close{background:#000;color:#FFF;font-family:arial;font-size:24px;line-height:24px;position:absolute;right:-12px;text-align:center;top:-10px;width:24px;height:24px;text-decoration:none;font-weight:700;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;box-shadow:0 0 10px rgba(0,0,0,0.8);-moz-box-shadow:0 0 10px rgba(0,0,0,0.8);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.8);-moz-transition:all .5s ease-out;-webkit-transition:all .5s ease-out;-o-transition:all .5s ease-out;transition:all .5s ease-out;-webkit-transition-delay:.2s;-moz-transition-delay:.2s;-o-transition-delay:.2s;-transition-delay:.2s}
.dialog a.close:hover{background:#C00;-moz-transition:all .5s ease-out;-webkit-transition:all .5s ease-out;-o-transition:all .5s ease-out;transition:all .5s ease-out}

#start{background:url(/images/wedding/wedding-3.jpg) no-repeat center center; background-size:cover; height:1280px;}
.wedding{padding-top:3em; text-align:center;}
.wedding h1{color:#FFF;}
.openingImages{max-width:900px; width:100%; margin:0 auto; text-align:center; position:relative;}
.circle{border-radius:50%; position:absolute; box-shadow:0 0 4px rgba(0,0,0,0.4);}
.openingImages .circle:nth-child(1){margin-top:20%; width:30%; left:8%;}
.openingImages .circle:nth-child(2){margin-top:30%; width:35%; right:8%;}
.openingImages .circle:nth-child(3){width:50%; position:relative;}
.preparation{position:relative;}
.preparation .row{position:relative; height:200px; margin:-180px 0 -20px; white-space:nowrap; overflow:hidden;}
.preparation .row img{display:inline-block; height:95%; margin:4px 0; box-shadow:0 0 4px rgba(0,0,0,0.7); border:8px solid #EEE; position:relative; box-sizing:border-box}
.bridehouse{position:relative;}
.bridehouse .grid .halfwidth{float:left; border:5px solid #FFF; box-sizing:border-box;}
.bridehouse .circle{width:30%; max-width:500px; left:35%; top:50%; margin-top:-15%;}
.col-3{text-align:center;}
.col-3 .onethirds:nth-child(1){float:left;}
.col-3 .onethirds:nth-child(2){float:right;}
.col-3 .onethirds{position:relative;}
.photopaper{text-align:center; position:relative; padding:50px 0; overflow:hidden;}
.photopaper img{border:8px solid #EEE; box-sizing:border-box; box-shadow:0 2px 4px rgba(0,0,0,0.4); position:relative; width:80%;}
.photopaper img:nth-child(1){left:-3%; -ms-transform:rotate(7deg); -webkit-transform:rotate(7deg); transform:rotate(7deg); z-index:4;}
.photopaper img:nth-child(2){left:2%; top:-3%; -ms-transform:rotate(-7deg); -webkit-transform:rotate(-7deg); transform:rotate(-7deg);z-index:3;}
.photopaper img:nth-child(3){left:3%; -ms-transform:rotate(9deg); -webkit-transform:rotate(9deg); transform:rotate(9deg);z-index:1}
.photopaper img:nth-child(4){left:-2%; top:-5%; -ms-transform:rotate(-4deg); -webkit-transform:rotate(-4deg); transform:rotate(-4deg);z-inde:2;}
.photopaper img:nth-child(5){left:-3%; -ms-transform:rotate(5deg); -webkit-transform:rotate(5deg); transform:rotate(5deg); z-index:4;}
.photopaper img:nth-child(6){left:2%; top:-3%; -ms-transform:rotate(-3deg); -webkit-transform:rotate(-3deg); transform:rotate(-3deg);z-index:3;}
.photopaper img:nth-child(7){left:3%; -ms-transform:rotate(2deg); -webkit-transform:rotate(2deg); transform:rotate(2deg);z-index:1}
.photopaper img:nth-child(8){left:-2%; top:-5%; -ms-transform:rotate(-4deg); -webkit-transform:rotate(-4deg); transform:rotate(-4deg);z-inde:2;}
.enlargegroup, .bi-direct, .clshow{margin:90px 0;}
.clshow img{margin:0 -6%; width:55%; position:relative;}
.combine{text-align:center; margin:40px 0;}
.combine img{position:relative;}
.combine img:first-child{position:absolute;}
.enlargegroup img:nth-child(1){margin-top:2%;}
.enlargegroup img:nth-child(2){margin-top:-2%;}
.enlargegroup img{box-sizing:border-box; border:8px solid #EEE; box-shadow:0 2px 2px rgba(0,0,0,0.4);}
.parallel{margin:40px 0; overflow:hidden;}
.parallel.col-3 .clipParallelogram{width:37%; margin:0 -7%;}
.clipParallelogram{-webkit-clip-path: polygon(0% 100%, 30% 0%, 100% 0%, 70% 100%); clip-path: polygon(0% 100%, 30% 0%, 100% 0%, 70% 100%); -webkit-clip-path: url('#polygon-clip-rhomboid'); clip-path: url('#polygon-clip-rhomboid'); /* Firefox needs this path */}
.col-3 .clipParallelogram:nth-child(1){margin-left:5%; margin-right:-5%;}
.col-3 .clipParallelogram:nth-child(2){margin-left:-5%; margin-right:5%;}
.textWidth{max-width:720px; box-sizing:border-box;}
.paper{padding:1em; margin:-4em auto 4em; position:relative;
background: rgb(255,255,255);
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(229,229,229,1) 100%);
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 );
}
.paper:before, .paper:after{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  box-shadow: 0 15px 10px rgba(0,0,0,0.5);
  transform: rotate(-3deg);
}
.paper:after
{
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}
.paperShadow{position:relative;max-width:720px; margin:auto;}
.paperShadow:before, .paperShadow:after{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 80%;
  left: 10px;
  width: 50%;
  top: 20px;
  max-width:300px;
  background: #777;
  box-shadow: 0 -15px 10px rgba(0,0,0,0.5);
  transform: rotate(1deg);
}
.paperShadow:after
{
  transform: rotate(-1deg);
  right: 10px;
  left: auto;
}
.ruled{font-family:Rochester; font-size:20px; text-align:left; line-height:2em; margin:3.6em 2em; padding-bottom:1em;
background-image: -webkit-linear-gradient(rgba(200, 200, 200, 0.2) 0.1em, transparent 0.1em);
background-image: -moz-linear-gradient(rgba(200, 200, 200, 0.2) 0.1em, transparent 0.1em);
background-image: -ms-linear-gradient(rgba(200, 200, 200, 0.2) 0.1em, transparent 0.1em);
background-image: linear-gradient(rgba(200, 200, 200, 0.2) 0.1em, transparent 0.1em);
background-size: 100% 2em}
.ruled p{margin:2em auto; text-indent:2em;}
.loader{position:relative; box-sizing:border-box; width:100vw; height:70vh; top:0; left:0;}
.loader-ball:before{content:""; position:absolute; width:50px; height:50px; top:50%; left:50%; transform:translate(-50%,-50%); background-color:#FFF; border-radius:50%; z-index:1; animation:kick 0.5s infinite alternate ease-in both; box-shadow:-5px -5px 10px 0 #AAA inset;}
.loader-ball:after{content:""; position:absolute; background-color:rgba(0,0,0,.3); border-radius:50%;    width:45px; height:20px; top:calc(50% + 10px); left:50%; transform:translateX(-50%); z-index:0; animation:shadow 0.5s infinite alternate ease-out both;}
@keyframes shadow {
	0%{background-color:rgba(0,0,0,0);transform:scale(0)}
	40%{background-color:rgba(0,0,0,0);transform:scale(0)}
	95%{background-color:rgba(0,0,0,.75);transform:scale(1)}
	100%{background-color:rgba(0,0,0,.75);transform:scale(1)}
}
@keyframes kick {
	0%{transform:translateY(-80px) scaleX(.95)}
	90%{border-radius:50%}
	100%{transform:translateY(0) scaleX(1);border-radius:50% 50% 20% 20%}
}

@media (min-width:1680px) {
.s-hide{display:inline!important}
}
@media (min-width:1368px) {
.banquet img{width:auto}
#footer.reach div:first-child{bottom:30.5em}
#footer.reach div:nth-child(2){bottom:26em}
.preparation .row{height:280px; margin:-260px 0 -20px;}
}
@media (max-width:1280px) {
.starting h1{margin:80px 0 40px}
body{font-size:90%}
#parallax{max-height:768px}
.portrait{width:49%}
#footer.reach div:first-child{bottom:24.5em}
#footer.reach div:nth-child(2){bottom:20em}
.splashspacer>img{margin:8% auto;}
}
@media (max-width:1024px) {
body{font-size:80%}
#parallax{max-height:560px}
#footer.reach div:first-child{bottom:20.5em}
#footer.reach div:nth-child(2){bottom:16em}
.splashspacer>img{margin:9% auto;}
}
@media (max-width:768px) {
.starting h1{margin:80px 0 20px}
img.parallax-layer{width:1280px}
body{font-size:70%}
.banquet img{width:90%}
#footer.reach div:first-child{bottom:18.5em}
#footer.reach div:nth-child(2){bottom:14em}
#start{height:768px; background-image:url(/images/wedding/1024/wedding-3.jpg)}
.preparation .row{height:100px; margin:-80px 0 -20px;}
.preparation .row img{border-width:4px;}
.paper{padding:0; background:none; margin:2em auto;}
.paper:before, .paper:after, .paperShadow:before, .paperShadow:after{display:none;}
.invitation>b, .ceremony>b{font-size:18pt;}
.splashspacer>img{margin:10% auto;}
}
@media (max-width:460px) {
h1{font-size:36pt;}	
.splashfooter{padding-top:3em;}
#audio{-ms-transform:scale(0.6,0.6); -webkit-transform:scale(0.6,0.6); transform:scale(0.6,0.6)}
#playlist{width:170px}
.starting h1{margin:50px 0 20px;font-size:36pt}
#parallax{max-height:500px}
img.parallax-layer{width:860px}
.banquet img{width:98%}
.swiper-button-black,.swiper-button-white{-ms-transform:scale(0.5,0.5);-webkit-transform:scale(0.5,0.5);transform:scale(0.5,0.5)}
.modalbg .dialog{width:90%}
#footer.reach div:first-child{bottom:12.5em}
#footer.reach div:nth-child(2){bottom:8em}
#footer{display:table-cell; min-height:13em}
}
@media only screen and (max-height:360px){
.dialog .content{max-height:240px; overflow:auto}
}