*, *:before, *:after { box-sizing: border-box;padding: 0;margin: 0;}
body { background: linear-gradient(to bottom, #8c7a7a 0%, #af877c 65%, #af877c 100%) fixed; background: url("../images/background.jpg") no-repeat center center fixed; background-size: cover; font: 14px/20px; font-family: 'Charm', cursive; margin-top: 30px; color: #FBDE79;height: 100vh; overflow: hidden;} 
a,a:hover,a:visited{ color: #FBDE79; text-decoration: none; }
*:focus { outline: none; }
b{font-weight: 700;}
canvas {display: block; position: absolute; /* touch-action: none;*/ top: 0;left: 0;}
.overlay { position: fixed; width: 100%; height: 100%; background-color: rgba(40,49,56,0.95); z-index: 10000;top:0;}
.info { text-align: center; position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); text-transform: uppercase; font-weight: 700; letter-spacing: 1px; font-size: 80%; width: 100%; } 
.info { font-size: 20px; text-transform: none; font-family: 'Open Sans';font-weight: 300; }
.info img { margin: 30px 0; }
.info p { font-size: 14px; }
.slide-container { margin: auto; width: 600px; text-align: center; max-width: 100%; } 
.wrapper { padding-top: 40px; padding-bottom: 40px; } 
.wrapper:focus { outline: 0; } 
.clash-card { background: white; width: 300px; display: inline-block; margin: auto; border-radius: 19px; position: relative; text-align: center; box-shadow: -1px 15px 30px -12px black; z-index: 99; }

.barbarian { height: 500px; background: rgb(4, 36, 47); background: linear-gradient(90deg, rgba(4, 36, 47, 1) 0%, rgba(2, 45, 61, 1) 46%, rgba(4, 36, 47, 1) 100%); position: relative; overflow: hidden; } 
.leaf { background-image: url(../images/leaf.png); background-size: contain; background-repeat: no-repeat; width: 100%; height: 100%; position: absolute; top: -20px; } 
.letter-box { position: absolute; top: 30%; width: 100%; font-size: 20px; letter-spacing: 0.5px; }
.invitee { margin-bottom: 25px; font-size: 14px; margin-top: 20px;}
span.personName { font-size: 20px; }
.inviters { font-size: 24px; padding: 20px 0; line-height: 30px; }
.wrap-box { padding: 10px 0 20px 0; } 
.invitation {font-weight: 400; font-size: 18px; letter-spacing: 0.6px; line-height: 24px; }
.label-box, .label-box:hover, .label-box:visited { background-color: #FBDE79; color: rgb(4, 36, 47); font-size: 16px; font-weight: 700; border-radius: 10px; padding: 5px 10px; letter-spacing: 1px; }
sup { text-transform: lowercase; font-size: 12px; top: -5px; position: relative; }
.timeline:before { content: ''; height: 100%; width: 2px; background-color: #FBDE79; display: block; position: absolute; left: 50%; }
.timeline { font-family: 'Open Sans', sans-serif; position: relative;} 
.timeline li { width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; padding: 5px 0;} 
.timeline li>div { width: 50%;} 
.timeline li .left { text-align: right; } 
.timeline li .right { text-align: left; } 
.timeline li .icon { padding: 0 5px;}
.timeline li .icon img { display: unset; padding: 10px;} 
.timeline li .left.icon img{float: right;}
.timeline li .right.icon img{float: left;}
.timeline li .text { font-size: 14px; line-height: 20px;padding: 0 15px;}
.timeline li .text .timeline-title small { font-size: 10px; }
.timeline li .timeline-title img { display: unset; }
.heart img { position: relative; top: 5px; left: 1px;font-size: 12px; width: 14px; text-align: center; margin: 0 auto; }
.i-heart img { font-size: 14px; width: 14px; margin: 0 auto; transform: rotate(180deg); top: -2px; position: relative; left: 1px; }


button.nextBtn, button.prevBtn{ z-index: 99;font-family: 'Charm', cursive;color: #FBDE79;position: absolute; bottom: 0; background-color: transparent; border: none;margin: 15px; font-size: 16px;padding: 0;cursor: pointer;display: flex; align-items: center;}
button.nextBtn {right: 0;}
button.prevBtn {left: 0;}
button.prevBtn img { margin-right: 5px; }
button.nextBtn img { margin-left: 5px; }
.address, .call { font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 20px; }
.days{display: inline-block; background-color: #FBDE79; padding: 15px; color: rgb(4, 36, 47); font-weight: 900; border-radius: 10px; font-size: 30px; margin-bottom: 10px;}
.countdown { line-height: 30px; }
.countdown .last { font-weight: 900; text-transform: uppercase; }
.Hashs { font-family: 'Open sans'; font-size: 14px; line-height: 24px; margin-top: -10px; }
.hideFromUser { height: 0; width: 0; opacity: 0; }
.Hashs span { background-color: #FBDE79; padding: 2px 5px; color: rgb(4, 36, 47); font-size: 10px; font-weight: 700; border-radius: 5px; }

#snackbar { font-family: 'Open Sans', sans-serif; font-size: 12px; visibility: hidden; min-width: 250px; margin-left: -125px; background-color: #333; color: #fff; text-align: center; border-radius: 2px; padding: 16px; position: fixed; z-index: 1; left: 50%; bottom: 30px;} 
#snackbar.show { visibility: visible; -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s; animation: fadein 0.5s, fadeout 0.5s 2.5s; } 
@-webkit-keyframes fadein { from {bottom: 0; opacity: 0;} to {bottom: 30px; opacity: 1;} } 
@keyframes fadein { from {bottom: 0; opacity: 0;} to {bottom: 30px; opacity: 1;} } 
@-webkit-keyframes fadeout { from {bottom: 30px; opacity: 1;} to {bottom: 0; opacity: 0;} } 
@keyframes fadeout { from {bottom: 30px; opacity: 1;} to {bottom: 0; opacity: 0;} }