* { box-sizing: border-box; }

body {
	margin: 0;
	padding: 0;
	overflow: hidden;
}

.overlapper {
	position: absolute;
	height: auto;
	width: 100%;
	top: 35px;
	bottom: 0;
	left: 780px;
	right: 0;
}

#island {
	position: absolute;
	height: auto;
	width: 45%;
	top: 35px;
	bottom: 0;
	left: 180px;
	right: 0;
}


video { 
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: -100;
	transform: translateX(-50%) translateY(-50%);
	transition: 1s opacity;
}

.yaso {
  opacity: 0;
  transform: scale(10);
  transition: all 0.3s ease-in-out 0.2s;
}

:hover .yaso{
  opacity: 1;
  transform: scale(1);
  transition: all 0.3s ease-in-out 0.1s;
}

.overlapper1 {
	position: absolute;
	height: auto;
	top: 35px;
	bottom: 0;
	left: 180px;
	right: 0;
}

#pic1 {
	position: absolute;
	left: 908px;
	top: -47px;
}

.pilot {
  opacity: 0;
  transform: scale(10);
  transition: all 0.3s ease-in-out 0.2s;
}

:hover .pilot{
  opacity: 1;
  transform: scale(1);
  transition: all 0.3s ease-in-out 0.1s;
}

#pic2 {
	position: absolute;
	left: 98px;
	top: 27px;
}

#insta {
	position: absolute;
	height: auto;
	width: 35%;
	top: 35px;
	bottom: 12px;
	right: 298px;
}

.adventure {
  opacity: 0;
  transform: scale(10);
  transition: all 0.3s ease-in-out 0.2s;
}

:hover .adventure{
  opacity: 1;
  transform: scale(1);
  transition: all 0.3s ease-in-out 0.1s;
}

#pic3 {
	position: absolute;
	left: 78px;
	bottom: -227px;
}

.colors {
  opacity: 0;
  transform: scale(10);
  transition: all 0.3s ease-in-out 0.2s;
}

:hover .colors{
  opacity: 1;
  transform: scale(1);
  transition: all 0.3s ease-in-out 0.1s;
}

#pic4 {
	position: absolute;
	left: 818px;
	top: 97px;
}

#pushcart {
	position: absolute;
	height: auto;
	width: 55%;
	top: 35px;
	bottom: 12px;
	right: 298px;
}

.cloth {
  opacity: 0;
  transform: scale(10);
  transition: all 0.3s ease-in-out 0.2s;
}

:hover .cloth{
  opacity: 1;
  transform: scale(1);
  transition: all 0.3s ease-in-out 0.1s;
}

#pic5 {
	position: absolute;
	left: 718px;
	top: -20px;
}

.amazing {
  opacity: 0;
  transform: scale(10);
  transition: all 0.3s ease-in-out 0.2s;
}

:hover .amazing{
  opacity: 1;
  transform: scale(1);
  transition: all 0.3s ease-in-out 0.1s;
}

#pic6 {
	position: absolute;
	left: 718px;
	top: -20px;
}

#shack {
	position: absolute;
	height: auto;
	width: 45%;
	top: 35px;
	bottom: 12px;
	right: 298px;
}

.gary {
  opacity: 0;
  transform: scale(10);
  transition: all 0.3s ease-in-out 0.2s;
}

:hover .gary{
  opacity: 1;
  transform: scale(1);
  transition: all 0.3s ease-in-out 0.1s;
}

#pic7 {
	position: absolute;
	left: 818px;
	top: 222px;
}

#pool {
	position: absolute;
	height: auto;
	width: 45%;
	top: 35px;
	bottom: 12px;
	right: 298px;
}

.pooltime {
  opacity: 0;
  transform: scale(10);
  transition: all 0.3s ease-in-out 0.2s;
}

:hover .pooltime{
  opacity: 1;
  transform: scale(1);
  transition: all 0.3s ease-in-out 0.1s;
}

#pic8 {
	position: absolute;
	left: 818px;
	top: 102px;
}


.wow {
  opacity: 0;
  transform: scale(10);
  transition: all 0.3s ease-in-out 0.2s;
}

:hover .wow{
  opacity: 1;
  transform: scale(1);
  transition: all 0.3s ease-in-out 0.1s;
}

#pic10 {
	position: absolute;
	right: 728px;
	top: -22px;
}

#sunset {
	position: absolute;
	height: auto;
	width: 55%;
	top: 35px;
	bottom: 12px;
	right: 298px;
}

.keys {
  opacity: 0;
  transform: scale(10);
  transition: all 0.3s ease-in-out 0.2s;
}

:hover .keys{
  opacity: 1;
  transform: scale(1);
  transition: all 0.3s ease-in-out 0.1s;
}

#pic9 {
	position: absolute;
	right: -148px;
	top: 89px;
}

.love {
  opacity: 0;
  transform: scale(10);
  transition: all 0.3s ease-in-out 0.2s;
}

:hover .love{
  opacity: 1;
  transform: scale(1);
  transition: all 0.3s ease-in-out 0.1s;
}

#lovee {
	position: absolute;
	right: 648px;
	top: 89px;
}

#ppl {
	position: absolute;
	height: auto;
	width: 55%;
	top: 35px;
	bottom: 12px;
	right: 298px;
}

.mango {
  opacity: 0;
  transform: scale(10);
  transition: all 0.3s ease-in-out 0.2s;
}

:hover .mango{
  opacity: 1;
  transform: scale(1);
  transition: all 0.3s ease-in-out 0.1s;
}

#pic12 {
	position: absolute;
	right: 68px;
	top: 9px;
}


#craft {
	position: absolute;
	height: auto;
	width: 35%;
	top: 35px;
	bottom: 12px;
	right: 298px;
}

#jump {
	position: absolute;
	height: auto;
	width: 55%;
	top: 35px;
	bottom: 12px;
	right: 298px;
}

.marley {
  opacity: 0;
  transform: scale(10);
  transition: all 0.3s ease-in-out 0.2s;
}

:hover .marley{
  opacity: 1;
  transform: scale(1);
  transition: all 0.3s ease-in-out 0.1s;
}

#pic16 {
	position: absolute;
	right: 868px;
	top: 208px;
}

#vinyl {
	position: absolute;
	height: auto;
	width: 55%;
	top: 35px;
	bottom: 12px;
	right: 298px;
}

#flava {
	position: absolute;
	height: auto;
	width: 55%;
	top: 35px;
	bottom: 12px;
	right: 298px;
}

.pro {
  opacity: 0;
  transform: scale(10);
  transition: all 0.3s ease-in-out 0.2s;
}

:hover .pro{
  opacity: 1;
  transform: scale(1);
  transition: all 0.3s ease-in-out 0.1s;
}

#pic18 {
	position: absolute;
	right: 868px;
	top: 58px;
}

#nelson {
	position: absolute;
	height: auto;
	width: 35%;
	top: 35px;
	bottom: 12px;
	right: 298px;
}

.shades {
  opacity: 0;
  transform: scale(10);
  transition: all 0.3s ease-in-out 0.2s;
}

:hover .shades{
  opacity: 1;
  transform: scale(1);
  transition: all 0.3s ease-in-out 0.1s;
}

#pic20 {
	position: absolute;
	right: 868px;
	top: 58px;
}

#blue {
	position: absolute;
	height: auto;
	width: 55%;
	top: 35px;
	bottom: 12px;
	right: 298px;
}

#smile {
	position: absolute;
	height: auto;
	width: 55%;
	top: 35px;
	bottom: 12px;
	right: 298px;
}

.phone {
  opacity: 0;
  transform: scale(10);
  transition: all 0.3s ease-in-out 0.2s;
}

:hover .phone{
  opacity: 1;
  transform: scale(1);
  transition: all 0.3s ease-in-out 0.1s;
}

#pic21 {
	position: absolute;
	right: 868px;
	top: 88px;
}

.cloudz {
  opacity: 0;
  transform: scale(10);
  transition: all 0.3s ease-in-out 0.2s;
}

:hover .cloudz{
  opacity: 1;
  transform: scale(1);
  transition: all 0.3s ease-in-out 0.1s;
}

#pic22 {
	position: absolute;
	right: 868px;
	top: 198px;
}

#clouds {
	position: absolute;
	height: auto;
	width: 55%;
	top: 35px;
	bottom: 12px;
	right: 298px;
}

#food {
	position: absolute;
	height: auto;
	width: 35%;
	top: 35px;
	bottom: 12px;
	right: 298px;
}


.nice {
  opacity: 0;
  transform: scale(10);
  transition: all 0.3s ease-in-out 0.2s;
}

:hover .nice {
  opacity: 1;
  transform: scale(1);
  transition: all 0.3s ease-in-out 0.1s;
}

#pic23 {
	position: absolute;
	right: 868px;
	top: 298px;
}


#shadows {
	position: absolute;
	height: auto;
	width: 55%;
	top: 35px;
	bottom: 12px;
	right: 298px;
}

.leave {
  opacity: 0;
  transform: scale(10);
  transition: all 0.3s ease-in-out 0.2s;
}

:hover .leave {
  opacity: 1;
  transform: scale(1);
  transition: all 0.3s ease-in-out 0.1s;
}


#pic25 {
	position: absolute;
	right: 868px;
	top: 298px;
}