@media only screen and (max-width: 950px) {
	.segment.us{
		height: 650px;
		align-items: center;
		justify-content: center;
	}

	.segment.home{
		height: 565px;
	}

	#vid-pre {
	    position: absolute;
	    top: 0;
	    left: 0;
	    transform: translateX(-30%);
	    width: 240%;
	    height: 100%;
	    border: 0;
	}

	#vid-pre.clipped{
		width: 100%;
		transform: none;
	}

	.segment.us>.container{
		height: 85%;
	}

	.story-item.right{
		height: 350px;
	}

	.story-item.right .qt-holder{
		height: 100%;
	}


	.grid-sizer, .grid-item{
		width: 50%;
	}

	.grid-item--width2 { width:  50%; }
	.grid-item--width3 { width:  50%; }
	.grid-item--width4 { width: 100%; height: 430px; }

	#vid-pre-box{
		width: 100%;
		height: auto;
	}

	.grid-item.wide{ width: 50%; }

	.navbar.navigation{
		gap: 35px;
	}

	.navbar.socmed{
		gap: 15px;
		width: 20%;
	}

	.navbar.navigation{
		width: 68%;
	}

	.timeline-circ{
		width: 110px;
		height: 110px;
	}

	.segment.messages{
		height: 750px;
	}
}

@media only screen and (max-width: 850px) {
	.navbar.socmed{
		display: none;
	}

	.navbar.navigation{
		width: 90%;
	}

	.navbar.navigation{
		gap: 50px;
	}

	.title.name{
		font-size: 110px;
	}

	.segment.us{
		padding-left: 0;
		padding-right: 0;
		height: 900px;
		flex-direction: column;
		padding: 20px 40px;
	}

	.segment.us>.container{
		width: 60%;
	}

	.segment.us>.container.left{
		height: 45%;
		width: 70%;
		margin-top: 20px;
	}

	.segment.us>.container.right{
		height: 50%;
		width: 100%;
		display: flex;
		gap: 15px;
		padding: 0px;
		margin-bottom: 5px;
	}

	.socmed-mock{
		width: 100%;
		height: 50%;
	}

	.story-timeline-item{
		width: 90%;
	}

	.segment.the-wedding{
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		height: 1400px;
		padding: 50px;
	}

	.invitation-item.maps, .invitation-item.detail{
		width: 100%;
	}

	.invitation-item.maps{
		order: 1;
		padding-top: 25px;
		height: 45%;
	}

	.invitation-item.detail{
		height: 55%;
	}

	.story-item.right .qt-holder{
		padding: 25px;
	}

	.qt-holder .row.two, .qt-src{
		font-size: 13px;
		font-style: italic;
	}

	.qt-holder .row.three{
		margin-top: 10px;
	}

	.navbar.logo{
		font-size: 14px;
	}

	.grid-item.wide .img-holder{
		width: 100%;
	}

	.grid-item-container{
		position: relative;
		overflow: hidden;
	}

	.grid-item.wide .text-holder{
		position: absolute;
		right: -100%;
		height: 100%;
		background: rgba(255,255,255,.9);
		transition: all .5s;
		width: 80%;
	}

	.grid-item.wide .desc-holder{
		background:rgba(255,255,255,.7);
	}

	.grid-item.wide:hover .text-holder{
		right: 0;
	}

	.timer-item{
		width: 130px;
		height: 70%;
	}

	.title.name{
		font-size: 100px;
	}

	.title.quote{
		width: 70%;
		margin: auto;
		text-align: center;
	}

	.title.date{
		margin-top: 20px;
	}

	.progress-wrap {
	    height: 80px;
	    width: 80px;
	}

	.progress-wrap::after {
	    line-height: 80px;
	    font-size: 22px;
	    height: 80px;
	    width: 80px;
	}

	.music-control{
		width: 80px;
		height: 80px;
	}

	.text-holder-welcome{
		left: 35%;
		top: 65%;
	}

	.text-holder-welcome>.top{
		font-size: 37px;
	}

	.segment.messages{
		gap:  15px;
		height: 850px;
	}

	.message-item{
		width: 290px;
		margin-right: 15px;
		margin-bottom: 15px;
	}
}

@media only screen and (max-width: 750px) {
	.timeline-content{
		width: 65%;
	}

	.timer-item{
		width: 120px;
	}

	#vid-pre-box{
		width: 110%;
		height: auto;
	}

	.text-holder-welcome{
		left: 50%;
		width: 100%;
		height: 180px;
		background: rgba(255,255,255, .2);
	}

	.text-holder-welcome>.top{
		font-size: 26px;
		padding: 10px;
		height: 50%;
	}

	.text-holder-welcome>.bottom{
		font-size: 14px;
		height: 25%;
	}

	#button-open{
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.text-holder-welcome>.marks{
		font-size: 12px;
		height: 25%;
	}

	.welcome-page .bg.overlay{
		filter: grayscale(.4);
	}

}


@media only screen and (max-width: 650px) {
	.segment.nav{
		flex-direction: column;
		height: 55px;
	}

	.progress-wrap {
	    height: 70px;
	    width: 70px;
	}

	.music-control{
		width: 70px;
		height: 70px;
	}

	.progress-wrap::after {
	    line-height: 70px;
	    font-size: 22px;
	    height: 70px;
	    width: 70px;
	}

	.segment.home{
		height: 450px;
		border: 0px;
	}

	.navbar.logo{
		width: 100%;
		height: 100%;
		font-size: 18px;
	}

	.title.name{
		font-size: 65px;
	}

	.segment.us{
		padding: 20px 20px;
		background: white;
	}

	.segment.pictures{
		background: white;
		margin-top: 30px;
	}

	.carousel-nav{
		right: 5px;
		top: 50%;
		transform: translateY(-50%);
		height: 300px;
		opacity: 0.5;
	}

	.carousel-nav-arrow{
		height: 55px;
	}

	.carousel-nav-num-item{
		font-size: 12px;
	}

	.carousel-nav-arrow:hover, .carousel-nav-num-item:hover{
		font-size: 16px;
	}

	.carousel-nav-num-item.swiper-pagination-bullet-active{
		font-size: 16px;
	}

	.title.date, .title.quote{
		font-size: 11px;
	}

	.title.date{
		margin-top: 0px;
	}

	.mouse-scroll-icon-holder{
		display: none;
	}

	.segment.us>.container.left{
		width: 100%;
		order: 3;
		height: 50%;
		margin-top: 20px;
	}

	.segment.us>.container.right{
		height: 45%;
		margin-bottom: 5px;
	}

	.socmed-mock{
		width: 100%;
	}

	.socmed.text-holder{
		font-size: 11px;
	}

	.socmed.pp{
		width: 50px;
		height: 50px;
	}

	.socmed.name-top{
		font-size: 13px;
	}

	.socmed.name-bottom{
		font-size: 11px;
	}

	.socmed.name-holder{
		height:40%;
	}

	.socmed.text-holder{
		height: 60%;
	}

	.segment-title{
		font-size: 16px;
	}

	.timeline-circ{
		width: 80px;
		height: 80px;
	}

	.story-timeline-item{
		width: 100%;
	}

	.timeline-marker{
		width: 120px;
	}

	.timeline-content{
		width: 65%;
	}

	.timeline-content-wrapper{
		padding: 15px;
	}

	.timeline-content-item.text, .timeline-content-item.date{
		font-size: 12px;
		text-align: center;
		justify-content: center;
	}

	.story-container{
		padding: 10px;
	}

	.segment.pictures .qt-holder{
		font-size: 12px;
	}

	.segment.pictures .qt-holder .qt-sign{
		font-size: 22px;
	}

	.grid-item{
		height: 200px;
		width: 50%;
		padding: 4px;
		border-radius: 0px;
	}

	.grid-item-container{
		padding: 0;
		border-radius: 0px;
	}

	.grid-item--height2 { height: 200px; }
	.grid-item--height3 { height: 200px; }
	.grid-item--height4 { height: 200px; }


	.grid-item--width2 { width:  50%; }
	.grid-item--width3 { width:  50%; }
	.grid-item--width4 { width:  100%; height: 300px;}

	.grid-item.wide .desc-holder{
		height: 25px;
	}

	.desc-holder{
		font-size: 12px;
	}

	.grid-item.wide .text-holder h1{
		font-size: 14px;
	}

	.grid-item.wide .text-holder span{
		font-size: 10px;
	}

	.segment.timer-wedding .segment-title{
		font-size: 55px;
	}

	.timer-item{
		width: 90px;
		height: 60%;
	}

	.timer-holder{
		gap: 10px;
		height: 220px;
	}

	.timer-num{
		font-size: 30px;
	}

	.timer-label{
		font-size: 15px;
	}

	.title.date{
		font-size: 15px;
	}

	.post-carousel-container-swiper{
		box-shadow: none;
	}

	.socmed-post.caption{
		font-size: 13px;
	}

	.segment.the-wedding{
		padding: 20px;
		height: 1200px;
	}

	.agenda-location{
		font-size: 16px;
	}

	.agenda-location-address{
		font-size: 11px;
		padding: 0;
	}

	.agenda-title{
		font-size: 55px;
	}

	.invitation-item .segment-title{
		font-size: 16px;
	}

	.invitation-item-detail.address{
		padding: 15px;
		font-size: 11px;
	}

	.segment.story{
		padding-bottom: 60px;
	}

	.segment.register .title-text-holder{
		font-size: 50px;
	}

	.registration-item.rsvp{
		width: 95%;
		height: 450px;
		margin-top: 50px;
	}

	.segment.register .segment-title{
		height: 100px;
	}

	.segment.register{
		height: 700px;
	}

	.footer-item.label{
		font-size: 16px;
	}

	.footer-item.date, .footer-item.quote{
		font-size: 11px;
		text-align: center;
	}

	.footer-item.quote{
		font-size: 10px;
	}

	.footer-item.marks{
		font-size: 11px;
	}

	.view-map{
		width: 50%;
	}

	.story-item.right{
		height: 330px;
	}

	.progress-wrap{
		right: 30px;
	}

	.music-control{
		left: 30px;
	}

	#vid-pre {
	    position: absolute;
	    top: 0;
	    left: 0;
	    transform: translateX(-25%);
	    width: 210%;
	    height: 100%;
	    border: 0;
	}

	#vid-pre.clipped{
		width: 100%;
		transform: none;
	}

	.message-page-holder{
		height: 95%;
	}

	.segment.messages{
		gap:  5px;
		padding: 5px;
		height: 900px;
	}

	.message-item{
		width: 45%;
		margin-right: 5px;
		margin-bottom: 5px;
		height: 200px;
	}

	.message-name{
		font-size: 23px;
		font-weight: bold;
	}

	.message-text{
		font-size: 11px;
	}

}

@media only screen and (max-width: 480px) {
    .title.date.timer{
		margin-bottom: 15px;
	}

	.grid-item--width4 { width:  100%;height: 250px; }
	.overlay.pict{
		font-size: 55px;
	}

	#vid-pre-box{
		width: 115%;
		transform: translateX(-5%);
	}

	.segment.timer-wedding, .overlay.pict.story{
		background-attachment: unset;
	}

	.overlay.pict.story{
		background: url("../pict/pre/LNK_1255-mobile.jpg");
		background-size: cover;
		background-position: 50% 50%;
	}

	.timer-item{
		width: 95px;
		height: 50%;
	}

	.timer-label{
		font-size: 13px;
	}

	.timer-holder{
		gap: 15px;
	}

	.segment.timer-wedding{
		height: 450px;
	}

	#vid-pre {
	    position: absolute;
	    top: 0;
	    left: 0;
	    transform: translateX(-25%);
	    width: 228%;
	    height: 100%;
	    border: 0;
	}

	#vid-pre.clipped{
		width: 100%;
		transform: none;
	}
}

@media only screen and (max-width: 400px) {

	.segment.timer-wedding .segment-title{
		//height: 80px;
	}

	.timeline-content{
		width: 60%;
	}

	.view-map{
		height: 38px;
	}

	.text-holder-welcome{
		height: 150px;
	}

	.text-holder-welcome>.top{
		font-size: 22px;
		padding: 10px;
		height: 50%;
	}

	.text-holder-welcome>.bottom{
		font-size: 12px;
		height: 25%;
	}

	.text-holder-welcome>.marks{
		font-size: 12px;
		height: 25%;
	}
}

@media only screen and (max-width: 375px) {
	#vid-pre-box{
		width: 110%;
	}

	.grid-item--width4{
		height: 220px;
	}
}