html, body, .main {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    padding: 0; margin: 0;
	overflow: hidden;
	
    /* background: #a3000a; */
}

 .main {background: #0095c8;}
div {
	position: absolute;
}
img {
	width: 100%;
	height: auto;
}
.port {
	display: none;
}
.land {
	display: block;
}


.close {
	top: 0;
	right: 0;
	width: 70px;
	height: 70px;
}
.close img {
	width: 44px;
	height: 44px;
    position: absolute;
    right: 0;
}
.mainLastFrame {
    width: 100vw;
    height: 80vh;
}
.header {
    width: 100vw;
	height: 50vh;
	/* border: 1px dashed; */
}

.logo1 {
	width: 28.8%;
	top: 3.85%;
	right: 9%;
}
.head {
	width: 42%;
	top: 17%;
	left: 11%;
}
.subHead {
	width: 25.35%;
	top: 50%;
	left: 10.75%;
}

.BringTxt {
    width: 38%;
    top: 23%;
    right: 14.5%;
}
.logo {
    width: 28.8%;
    top: 15%;
    left: 18%;
}

.butterfly {
	width: 7.94%;
	top: 55.5%;
	right: 28.5%;
}
.cta {
    width: 19.8%;
    right: 9.5%;
    top: 75.5%;
}

.dogImg {
    width: 41%;
    top: 24%;
    left: 13%;
}
.catImg {
    width: 41%;
    top: 24%;
    right: 13%;
}

.hotspot {
    width: 100vw;
	height: 100vh;
	z-index: 2;
}
.hotspotDesc {
	z-index: 2;
}
.hotSpots {
	pointer-events: all;
    width: 2.5%;
	height: 7%;
	z-index: 2;
}
.hotSpot1 {
	pointer-events: all;
    top: 57%;
    left: 31%;
}
.hotSpot2 {
	pointer-events: all;
    top: 58%;
    left: 39%;
}
.hotSpot3 {
	pointer-events: all;
    top: 71%;
    left: 26%;
}
.hotSpot4 {
	pointer-events: all;
    top: 67%;
    left: 38%;
}
.hotSpot5 {
	pointer-events: all;
    top: 60%;
    left: 62%;
}
.hotSpot6 {
	pointer-events: all;
    top: 56%;
    left: 71%;
}
.hotSpot7 {
	pointer-events: all;
    top: 71%;
    left: 59.2%;
}
.hotSpot8 {
	pointer-events: all;
    top: 67%;
    left: 70%;
}

.hotspotClose {
	width: 35px;
	top: 2%;
    right: 2%;
}
.hotspotDesc1 {
	width: 29vw;
	top: 1%;
	left: 33%;
}
.hotspotDesc2 {
	width: 27vw;
	top: 0%;
	left: 43%;
}
.hotspotDesc3 {
	width: 32vw;
	top: 6%;
	left: 28%;
}
.hotspotDesc4 {
	width: 32vw;
	top: 2%;
	left: 40%;
}


/* border: 1px dashed; */
.greenGrass {
    width: 170%;
    left: -41%;
    bottom: -59%;
}

.productLabel {
	cursor: pointer
}
.active {
	visibility: visible;
	opacity: 1;
}
.swiperShape, .hotSpot, .hotspotClose {
	pointer-events: auto !important;
	cursor: pointer !important;
}
.swiperShape {
	width: 100vw;
	height: 50vh;
	top: 25vh;
	/* border: 1px dashed; */
}
.swiper-container {
	width: 100%;
	height: 100%;
	overflow: visible;
}
.productLabel {
	font-size: 1.4rem;
	font-family: MYRIADPRO-COND;
	color: #494848;
	right: 20px;
	text-decoration: underline;
}
.swiper-slide {
	text-align: center;
	width: 100% !important;
}
.swiper-button-prev, .swiper-button-next {
	width: 50px;
	height: 50px;
	background-image: none;
	outline: none;
	pointer-events: auto;
	top: 74%;
	flex-direction: column;
	color: transparent;
}
.swiper-button-next img, .swiper-button-prev img {
	width: 30px;
	height: 30px;
}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
    left: 0px;
    right: auto;
}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
    right: 0px;
    left: auto;
}
p {
	margin-top: 0px;
	margin-bottom: 0px;
}
.overuse {
	width: 97%;
	position: fixed;
	bottom: 0%;
	height: 12vh;
	z-index: 20;
	background: #fff;
	font-size: 1rem;
	font-family: Myriad-Pro-Semibold-Condensed;
	color: #494848;
	margin-top: 10px;
	left: 0%;
	padding: 20px;
	overflow-y: scroll;
	overflow-x: hidden;
	z-index: 9999;
	pointer-events: auto !important;
	-webkit-overflow-scrolling: touch !important;
}
.fontsemi {
	font-family: 'Myriad-Pro-Semibold-Condensed';
}
.firstHeading {
	font-size: 1.4rem;
}
.legal-txt {
	width: 95%;
	line-height: 1;
}
.overuse::-webkit-scrollbar-track {
	-webkit-box-shadow: 0 0 1px rgba(204, 204, 204, 1);
	border-radius: 10px;
	background-color: #F5F5F5;
}
.overuse::-webkit-scrollbar {
	width: 12px;
}
.overuse::-webkit-scrollbar-thumb {
	border-radius: 10px;
	-webkit-box-shadow: 0 0 1px rgba(204, 204, 204, 1);
	background-color: #ccc;
}


@media screen and (min-width:1025px) {
	.overuse {
		height: calc(2.5vh + 40px);
		padding-bottom: 50px;
	}
	.productLabel {
		font-size: 18px;
	}
}

@media screen and (max-width:1024px) and (orientation: landscape) {
	.close img {
		width: 22px;
		height: 22px;
	}
	.mainLastFrame {
		height: 78vh;
	}
	.overuse {
		width: 93%;
		height: 10vh;
		font-size: 14px;
	}
	.firstHeading, .productLabel {
		font-size: 1.3rem;
	}
	.dogImg {
		width: 50%;
		top: 36%;
		left: 5%;
	}
	.catImg {
		width: 50%;
		top: 36%;
		right: 5%;
	}
	.hotSpots {
		width: 3.6%;
		height: 6%;
	}

	.hotSpot1 {
		top: 60%;
		left: 27%;
	}
	.hotSpot2 {
		top: 60%;
		left: 36%;
	}
	.hotSpot3 {
		top: 70.5%;
		left: 21%;
	}
	.hotSpot4 {
		top: 70%;
		left: 35%;
	}
	.hotSpot5 {
		top: 62%;
		left: 65%;
	}
	.hotSpot6 {
		top: 59%;
		left: 75%;
	}
	.hotSpot7 {
		top: 71%;
		left: 61.2%;
	}
	.hotSpot8 {
		top: 67%;
		left: 74%;
	}
	
	.hotspotClose {
		width: 25px;
		top: 2%;
		right: 2%;
	}
	.hotspotDesc1 {
		width: 32vw;
		top: 22%;
		left: 32%;
	}
	.hotspotDesc2 {
		width: 35vw;
		top: 15%;
		left: 40%;
	}
	.hotspotDesc3 {
		width: 34vw;
		top: 26%;
		left: 26%;
	}
	.hotspotDesc4 {
		width: 36vw;
		top: 20%;
		left: 39%;
	}	

	.greenGrass {
		width: 180%;
		left: -46%;
		bottom: -28%;
	}
	.logo1 {
		width: 35%;
		top: 2.7%;
		right: 0.35%;
	}
	.BringTxt {
		width: 46%;
		top: 20%;
		right: 7%;
	}
	.head {
		width: 51%;
		top: 16%;
		left: 2%;
	}
	.subHead {
		width: 31%;
		top: 43%;
		left: 2%;
	}
	.logo {
		width: 35%;
		top: 14%;
		left: 11%;
	}
	.butterfly {
		width: 9.3%;
		top: 52%;
		right: 24%;
	}
	.cta {
		width: 23%;
		top: 70%;
		right: 2%;
	}
}

@media screen and (max-width:500px) and (orientation: landscape) {
	.head {
		top: 10%;
	}
	.dogImg, .catImg {
		top: 27%;
	}
	.greenGrass {
		bottom: -45%;
	}
	.overuse {
		width: 91.3%;
	}

	.hotspotDesc1 {
		width: 33vw;
		top: 8%;
		left: 31%;
	}
	.hotspotDesc2 {
		top: 0%;
	}
	.hotspotDesc3 {
		width: 36vw;
		top: 10%;
		left: 24%;
	}
	.hotspotDesc4 {
		width: 38vw;
		top: 5%;
		left: 38%;
	}
}

@media screen and (max-width:1024px) and (orientation: portrait) {
	.close img {
		width: 22px;
		height: 22px;
	}
	.port {
		display: block;
	}
	.land {
		display: none;
	}
	.swiperShape {
		top: 25vh;
	}
	.overuseHeading {
		width: 100%;
	}
	.overuse {
		height: 15vh;
		width: 90%;
		padding-right: 20px;
		font-size: 14px;
	}
	.firstHeading, .productLabel {
		font-size: 1rem;
	}
	.greenGrass {
		width: 300%;
		left: -105%;
		bottom: -30%;
	}
	.logo1, .logo {
		width: 50%;
		top: 0%;
		left: 25%;
	}
	.BringTxt {
		width: 57%;
		top: 32%;
		right: 22%;
	}
	.head {
		width: 67%;
		top: 32%;
		left: 17%;
	}
	.cta {
		width: 48.5%;
		right: 26.5%;
		top: 53%;
	}
	.butterfly {
		width: 17%;
		top: 69%;
		right: 7%;
	}
	.hotspot {
		left: 0vw;
		top: 0vh;
	}
	.hotSpots {
		width: 9%;
		height: 8%;
	}
	.hotSpot1 {
		top: 63%;
		left: 36%;
	}
	.hotSpot2 {
		top: 63%;
    	left: 65%;
	}
	.hotSpot3 {
		top: 77%;
    	left: 30%;
	}
	.hotSpot4 {
		top: 75%;
    	left: 63%;
	}
	.hotSpot5, .hotSpot6, .hotSpot7, .hotSpot8 {
		display: none !important;
	}
	.hotSpot5 {
		top: 58%;
		left: 28%;
	}
	.hotSpot6 {
		top: 60%;
		left: 70%;
	}
	.hotSpot7 {
		top: 76%;
		left: 28%;
	}
	.hotSpot8 {
		top: 74%;
		left: 67%;
	}
	
	.hotspotClose {
		width: 30px;
		top: 0%;
		right: 0%;
	}
	.hotspotDesc1 {
		width: 45vw;
		top: 23%;
		left: 44%;
	}
	.hotspotDesc2 {
		width: 45vw;
		top: 23%;
		left: 27%;
	}
	.hotspotDesc3 {
		width: 50vw;
		top: 25%;
		left: 25%;
	}
	.hotspotDesc4 {
		width: 50vw;
		top: 22%;
		left: 30%;
	}
}

@media screen and (max-width:768px) and (min-width:766px) and (orientation: portrait) {
	.overuse {
		font-size: 14px;
	}
	.firstHeading, .productLabel {
		font-size: 0.9rem;
	}
}

@media screen and (max-width:375px) and (orientation: portrait) {
	.mainLastFrame {
		height: 86vh;
	}
	.swiperShape {
		top: 33vh;
	}
	.overuse {
		width: 85%;
		height: 7vh;
		font-size: 14px;
	}
	.firstHeading, .productLabel {
		font-size: 0.9rem;
	}
	.greenGrass {
		bottom: -20%;
	}

	.hotSpots {
		height: 6%;
	}
	.hotSpot1 {
		top: 60%;
    	left: 36%;
	}
	.hotSpot2 {
		top: 62%;
    	left: 70%;
	}
	.hotSpot3 {
		top: 71%;
    	left: 33%;
	}
	.hotSpot4 {
		top: 68%;
    	left: 65%;
	}
	.hotSpot5 {
		top: 57%;
		left: 27%;
	}
	.hotSpot6 {
		top: 58%;
		left: 66%;
	}
	.hotSpot7 {
		top: 69%;
		left: 27%;
	}
	.hotSpot8 {
		top: 67%;
		left: 65%;
	}
	
	.hotspotClose {
		width: 20px;
		top: 0%;
		right: 0%;
	}
	.hotspotDesc1 {
		top: 36%;
		left: 42%;
	}
	.hotspotDesc2 {
		top: 33%;
		left: 28%;
	}
	.hotspotDesc3 {
		top: 36%;
		left: 26%;
	}
	.hotspotDesc4 {
		top: 35%;
		left: 30%;
	}
}