body,h1,h2{font-family: "Oxygen", sans-serif}
html,body{min-height:100vh;background-position: center;background-size: cover;width:100%;}
p {line-height: 2}
a{text-decoration:none;}
textarea{width:100%!important;}
.bgimg-home,.bgimg-us,.bgimg-wedding,.bgimg-rsvp{background-size:cover;width:100%}
.bgimg-home {background-position: center;background-image: url("images/background/[R&M]Wedding.jpg")}
.bgimg-us {height:calc(100vh - 96px);width:100vw;background-position:center;background-image: url("images/background/[R&M]R&M.JPG")}
.bgimg-wedding{background-position: center;background-image: url("images/background/[R&M]WeddingReception.jpg");}
.bgimg-rsvp{background-position: center;background-image: url("images/background/[R&M]Flower.jpg");}
.bgimg-admin{background-position: center;background-image: url("images/background/[R&M]Admin.jpg");}
.display-bottom-wide{position:absolute;left:15%;bottom:7.5%;right:15%;padding:8px;}
.display-middle-wide{position:absolute;left:15%;bottom:25%;right:15%;padding:8px;}
.display-middle{position:absolute;left:15%;bottom:10%;right:15%;padding:8px;}
.display-top-wide{position:absolute;left:15%;top:7.5%;right:15%;padding:8px;}
.bg-op-6{background-color: rgba(0, 0, 0, 0.6);}
.padding-large{padding:64px;}
.padding-side{padding-left:64px;padding-right:64px;}
.display-none{display:none;}
.w3-container{padding:0;}
.large {font-size: 18px!important;}
.comm {border-radius:16px;color:white;padding-left:16px;padding-right:16px;text-align:left;max-width:900px;margin:auto;}
.like{position:absolute;left:25px;top:0;}
.kpi{display:inline-block;width:100px;height:100px;margin:8px;vertical-align: middle;}
.kpi-invite{display:inline-block;padding:16px;margin:8px;}
.black{background-color:black;}
.mi{height:16px;line-height:16px;font-size:16px;}

.img-star{width:100%;max-width:400px;}
.round-btn{font-size:48px!important;height:80px;width:80px;padding:16px;background-color: rgba(0, 0, 0, 0.7);border-radius:50%;color:white;}
.round-btn-small{font-size:48px!important;border-radius:50%;color:white}
.nocss-btn{ background-color:white;padding:0;margin:0}
.btn{background-color:white;opacity: 0.7;filter: alpha(opacity=70);color:#000;font-size:32px!important;padding:0;margin:8px 0;}
.btn-wedding{padding:16px 16px;width:250px}
.fixdl{position:fixed;bottom:60px;left:20px;}
.fixdl2{position:fixed;bottom:60px;left:50%;right:50%}
.full{width: 100%!important;padding:0!important} 
.w60 {width:60px;}

.opaque{opacity:1!important;filter: alpha(opacity=100)!important;}
.w3-button:hover{color:#fff!important;background-color:darkgray!important}

.next {position: absolute;right: 25px;top: 45%;color: #000;font-size: 35px;font-weight: bold;z-index:1000;}
.previous {position: absolute;left: 25px;top: 45%;color: #000;font-size: 35px;font-weight: bold;z-index:1000;}
.z1000{z-index:1000;}
.left{float:left}
.right{float:right}

.exif-3{transform: rotate(180deg);z-index:-1}
.exif-6{transform: rotate(90deg);z-index:-1}
.exif-8{transform:rotate(90deg);z-index:-1;}

#onesignal-bell-container.onesignal-reset .onesignal-bell-launcher-inactive {opacity: 1!important;}

/*lazyload*/
.channel {
  opacity: 0;
  visibility: hidden;
}
.channel.visible {
  opacity: 1;
  visibility: visible;
} 

/*textarea*/
textarea {outline:none;resize:none;overflow:auto;}

/*input file*/
.label-file {cursor: pointer;color: #00b1ca;font-weight: bold;}
.label-file:hover {color: #25a5c4;}
.input-file {display: none;}

/*image gallery*/
.gallery {margin-top: 1px; margin-bottom:1px;width:32vw;max-width: 300px;max-height:344px;background-color:white;color:black;display:inline-block;}
.gallery2 {width:32vw;height:32vw;max-height:300px;max-width:300px;background-size: cover;background-position: center;}
.gallery-zoom {min-width:320px;margin:auto;height:50vh;background-size: cover;background-position: center;}
.paysage{max-width:calc(16/9*50vh);} .paysage-90{max-width:calc(16/9*50vh)!important;}
.portrait{max-width:calc(9/16*50vh);} .portrait-90{max-width:50vh!important;}
.gallery-comment {max-width:100vw;height:calc(50vh - 95px);overflow-x:none;overflow-y:auto}
.gallery-modal{width:100%;background-size: cover;background-position: center;}
.desc {text-align: center;}

/* Full-width input fields */
input[type=text], input[type=password] {width: 100%;padding: 12px 20px;margin: 8px 0;display: inline-block;border: 1px solid #ccc;box-sizing: border-box;}
.form {max-width:300px;width:33%!important;margin:8px!important;display:inline-block}
.invite{width:30px!important;}

/* Set a style for all buttons */
button {background-color: #4CAF50;color:white;padding: 14px 20px;margin: 8px 0;border: none;cursor: pointer;width: 100%;}
button:hover {opacity: 0.8;}

/* Extra styles for the cancel button */
.cancelbtn {width: auto;padding: 10px 18px;background-color: #f44336;}

/* Center the image and position the close button */
.imgcontainer {text-align: center;margin: 24px 0 12px 0;position: relative;}
img.avatar {width: 40%;border-radius: 50%;}
.container {padding: 16px;}
span.psw {float: right;padding-top: 16px;}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 43;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
	padding-top: 60px;
}

/* Modal Content/Box */
.modal-content {
    margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
    width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button (x) */
.close {
    position: absolute;
    right: 25px;
    top: 0;
    color: #000;
    font-size: 35px;
    font-weight: bold;
}

.close:hover,.close:focus {color: red;cursor: pointer;}

/* Add Zoom Animation */
.animate {-webkit-animation: animatezoom 0.6s;animation: animatezoom 0.6s}
@-webkit-keyframes animatezoom {from {-webkit-transform: scale(0)} to {-webkit-transform: scale(1)}}  
@keyframes animatezoom {from {transform: scale(0)} to {transform: scale(1)}}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {display: block;float: none;}
    .cancelbtn {width: 100%;}
}

@media screen and (max-width: 601px),screen and (max-height: 1024px) {
	.display-bottom-wide{left:0%;bottom:10%;right:0%;}
	.display-top-wide{left:0%;top:10%;right:0%;}
	.padding-large {padding: 16px;}
	.padding-side{padding-left:16px;padding-right:16px;}
	p {line-height: 1.5}
}

@media screen and (max-width: 600px) {
.btn-wedding{padding:8px 8px;}
/*.gallery2 {width:336px;height:336px;}*/
}

@media screen and (max-width: 400px),screen and (max-height: 600px) {
	.display-bottom-wide{left:0%;bottom:10%;right:0%;font-size:9px;}
	.display-top-wide{left:0%;top:10%;right:0%;font-size:9px;}
	.padding-large {padding: 16px;}
	.padding-side{padding-left:16px;padding-right:16px;}
	h1{font-size:18px;}h2{font-size:15px}
	.w3-jumbo{font-size:32px!important}
	.w3-large, body{font-size:9px!important}
	p {line-height: 1.5}
	.w3-xlarge{font-size: 12px!important;}
	.bgimg-us {height:calc(100vh - 94px);}
}
@media screen and (min-width: 401px) and (max-width: 600px),screen and (min-height: 601px) and (max-height: 800px) {
	.display-bottom-wide{left:0%;bottom:8%;right:0%;font-size:12px;}
	.display-top-wide{left:0%;top:8%;right:0%;font-size:12px;}
	.padding-large {padding: 32px;}
	.padding-side{padding-left:32px;padding-right:32px;}
	h1{font-size:24px;}h2{font-size:20px}
	.w3-jumbo{font-size:48px!important}
	.w3-large, body {font-size:12px!important}
	p {line-height: 1.5}
	.w3-xlarge {font-size:16px!important;}
	.bgimg-us {height:calc(100vh - 94px);}
}