html, body, .main {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0;
    padding: 0;
    background:#fff !important;
    overflow: hidden;
}
div {
    position: absolute;
}
img {
    width: 100%;
    height: auto !important;
}

.bg {
	width: 100%;
	height: 100%;
	background: url('../images/slideFirstLand11.jpg');
	background-size: cover;
	cursor: pointer;
}
.bganimation {
	animation: panning 4s linear;
	animation-fill-mode: forwards;
}
@keyframes panning {
	0% {
		background-position: 0% 0%;
	}
	100% {
		background-position: 100% 0%;
	}
}
.footer {
	width: 100%;
	height: 8%;
	background: #fff;
	left: 0;
	bottom: 0;
	z-index: 9;
}
.freshtxt {
	width: 20%;
	right: 3%;
	top: 55%;
	transform: translateY(-50%);
}
.logo {
	width: 6%;
	top: -55%;
	left: 3%;
}
.freshtxt img, .logo img {
	width: 100%;
}
.morningtxt {
	/*width: 40%;*/
	width: 15%;
	right: 6%;
	top: 30%;
	transform: translateY(-50%);
}
.smooth {
	/*width: 40%;*/
	width: 25%;
	right: 1%;
	top: 37%;
	transform: translateY(-50%);
}
.itsspook {
	/*width: 40%;*/
	width: 15%;
	right: 6%;
	top: 45%;
	transform: translateY(-50%);
}
.pickupCta {
	width: 25%;
	padding: 5%;
	left: 0%;
	top: 33%;
	pointer-events: auto !important;
}
.ribbon {
	width: 35%;
	left: 1%;
	top: 27%;
}
.pickup {
	width: 15%;
	left: 10%;
	top: 40%;
}
.morningtxt img, .smooth img, .itsspook img, .ribbon img, .pickup img, .pickupCta img {
	width: 100%;
}
.undertone-marker {
	background-position-y: 14px !important;
}
.close {
	width: 70px;
	height: 70px;
	z-index: 999;
	right: 0px;
	top: 0px;
	padding: 1% 1%;
	cursor: pointer;
	text-align: right;
}
.close img {
	width: 37%;
}

@media screen and (orientation: portrait) {
	.bg {
		background: url('../images/slideFirst11.jpg');
		background-size: cover;
	}
	.morningtxt {
		top: auto;
		width: 35%;
		bottom: 82vh;
		left: 50%;
		transform: translateX(-50%);
	}
	.smooth {
		top: auto;
		width: 66%;
		bottom: 75vh;
		left: 50%;
		transform: translateX(-50%);
	}
	.itsspook {
		top: auto;
		width: 35%;
		bottom: 70vh;
		left: 50%;
		transform: translateX(-50%);
	}
	.ribbon {
		width: 100%;
		left: 50%;
		bottom: 74vh;
		top: auto;
		transform: translateX(-50%);
	}
	.pickup {
		width: 40%;
		left: 30%;
		top: auto;
		bottom: 71vh;
	}
	.pickupCta {
		width: 65%;
		padding: 2% 6%;
		left: 50%;
		bottom: 55vh;
		top: auto;
		transform: translateX(-50%);
	}
	.close img {
		width: 37%;
	}
	.freshtxt {
		width: 50%;
	}
	.logo {
		width: 18%;
		top: -65%;
	}
}
@media screen and (max-width: 1024px) and (min-width: 1020px) and (orientation: portrait) {
	.morningtxt {
		width: 60%;
	}
	.logo {
		width: 30%;
	}
}
@media screen and (max-width: 400px) and (orientation: portrait) {
	.morningtxt {
		width: 35%;
	}
	.smooth {
		width: 66%;
		right: 24%;
		top: auto;
		bottom: 73vh;
	}
	.itsspook {
		width: 35%;
		right: 32%;
		top: auto;
		bottom: 68vh;
	}
	.ribbon {
		bottom: 80vh;
		width: 76%;
	}
	.pickupCta {
		width: 57%;
		bottom: 57vh;
	}
	.pickup {
		bottom: 76vh;
    }
    .logo {
        width: 22%;
        top: -95%;
    }
}
@media screen and (max-width: 300px) and (orientation: portrait) {
    .pickupCta {
        bottom: 61vh;
    }
    .logo {
        top: -55%;
    }
}
@media only screen and (max-width: 1024px) and (min-width: 1020px) and (orientation: landscape) {
	.logo {
		width: 14%;
		top: -60%;
	}
	.ribbon {
		top: 21%;
	}
	.pickupCta {
		top: 28%;
	}
	.morningtxt {
		top: 25%;
		transform: translateY(-50%);
	}
	.pickup {
		top: 31%;
	}
	.itsspook {
		top: 39%;
	}
	.smooth {
		top: 32%;
	}
}
@media only screen and (max-width: 540px) and (orientation: landscape){
    .pickup {
        top: 35%;
    }    
    .logo {
        width: 10%;
        top: -65%;
    }
}
@media only screen and (max-width: 500px) and (orientation: landscape){
    .footer {
        height: 9%;
    }
    .logo {
        width: 10%;
        top: -95%;
    }
}
/*XS Max*/
/*@media only screen and (min-width: 795px) and (max-width: 798px) and (orientation: landscape){
    .slide1{ background-position: 0px -100px;}
    .slide2{background-position: 0px -100px; }
}*/
/*S8+*/
/*@media only screen and (min-width: 805px) and (max-width: 810px) and (orientation: landscape) {
    .slide1{ background-position: 0px -100px;}
    .slide2{background-position: 0px -100px; }
}*/