html { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
*, *:before, *:after { -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit; }
html { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }

body, html {
	margin: 0;
	padding: 0;
	font: 14px "metropolisregular", "sans-serif";
}

body {
	background: white url(../images/bg-tile.jpg) top left repeat !important;
	
overflow: hidden;

}

a { text-decoration: none; }


/*		WRAPPER
 *		contains entire page
 */
 
		.wrapper {
			width: 5166px;
			height: 3726px;

   position: relative;
     overflow: hidden;
    /* Prevent native touch events on Windows */
    -ms-touch-action: none;
    /* Prevent the callout on tap-hold and text selection */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    /* Prevent text resize on orientation change, useful for web-apps */
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    -o-text-size-adjust: none;
    text-size-adjust: none;
		}

		.tile {
			width: 861px;
			height: 1242px;
			position: absolute;
			background-position: top left;
			background-repeat: no-repeat;
			z-index: 0;
		}
		
		.tile1 {
			background-image: url(./../images/tile1.jpg);
			top: 0px;
			left: 0px;
		}

		.tile2 {
			background-image: url(./../images/tile2.jpg);
			top: 1242px;
			left: 0px;
		}

		.tile3 {
			background-image: url(./../images/tile3.jpg);
			top: 2484px;
			left: 0px;
		}

		.tile4 {
			background-image: url(./../images/tile4.jpg);
			top: 0px;
			left: 861px;
		}

		.tile5 {
			background-image: url(./../images/tile5.jpg);
			top: 1242px;
			left: 861px;
		}

		.tile6 {
			background-image: url(./../images/tile6.jpg);
			top: 2484px;
			left: 861px;
		}

		.tile7 {
			background-image: url(./../images/tile7.jpg);
			top: 0px;
			left: 1722px;
		}

		.tile8 {
			background-image: url(./../images/tile8.jpg);
			top: 1242px;
			left: 1722px;
		}

		.tile9 {
			background-image: url(./../images/tile9.jpg);
			top: 2484px;
			left: 1722px;
		}

		.tile10 {
			background-image: url(./../images/tile10.jpg);
			top: 0px;
			left: 2583px;
		}

		.tile11 {
			background-image: url(./../images/tile11.jpg);
			top: 1242px;
			left: 2583px;
		}

		.tile12 {
			background-image: url(./../images/tile12.jpg);
			top: 2484px;
			left: 2583px;
		}

		.tile13 {
			background-image: url(./../images/tile13.jpg);
			top: 0px;
			left: 3444px;
		}

		.tile14 {
			background-image: url(./../images/tile14.jpg);
			top: 1242px;
			left: 3444px;
		}

		.tile15 {
			background-image: url(./../images/tile15.jpg);
			top: 2484px;
			left: 3444px;
		}

		.tile16 {
			background-image: url(./../images/tile16.jpg);
			top: 0px;
			left: 4305px;
		}

		.tile17 {
			background-image: url(./../images/tile17.jpg);
			top: 1242px;
			left: 4305px;
		}

		.tile18 {
			background-image: url(./../images/tile18.jpg);
			top: 2484px;
			left: 4305px;
		}


		.splashscreen {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			background: white url(./../images/background.jpg) center center no-repeat;
			background-size: contain;	
			text-align: center;
		}
		
		.splashscreen #enter {			
			background: #538ad7 url(./../images/texture-center.png) center center no-repeat;
			border-radius: 50px;
			font-size: 43px;
			color: #ffffff;
			padding: 8px 16px;
			transition: background-color 0.5s ease;
			-webkit-box-shadow: -1px 0px 16px -4px rgba(0,0,0,0.75);
			-moz-box-shadow: -1px 0px 16px -4px rgba(0,0,0,0.75);
			box-shadow: -1px 0px 16px -4px rgba(0,0,0,0.75);
			position: absolute;
			top: 50%;
			left: 50%;
			width: 150px;
			height: 70px;
			margin: -35px 0 0 -75px;
		}

		.splashscreen #enter:hover {
			background-color: #ee7991;
			cursor: pointer;
		}


/*
 *		SECTION CONTAINER
 *		individual sections: entrance, pier, flag etc
 */
 
 		.section_container {
 			width: 1024px;
 			height: 768px;
 			position: absolute;
 		}
 		
		.section_container#entrance { top: 2643px; left: 928px; }
		.section_container#pier { top: 1480px; left: 977px; }
		.section_container#flag { top: 364px; left: 1583px; }
		.section_container#hut { top: 460px; left: 3171px; }
		.section_container#underwater { top: 2159px; left: 3073px; }

/*
 *		SECTION TITLE
 *		mascot for each section: bell, lamp, flag etc
 */
 
		.section_title {
			position: absolute;
			top: 0;
			left: 0;
			width: 245px;
			height: 214px;
			z-index: 20;
			font: 32px "caveat_brushregular";
			text-align: center;
			padding-top: 167px;
			color: #ffffff;
		}

		#entrance .section_title { background: url(../images/bell.png) top left no-repeat; }
		#pier .section_title { background: url(../images/pier.png) top left no-repeat; }
		#flag .section_title { background: url(../images/flag.png) top left no-repeat; }
		#hut .section_title { background: url(../images/hut.png) top left no-repeat; }
		#underwater .section_title { background: url(../images/underwater.png) top left no-repeat; }


/*
 *		SECTION CONTENT
 *		e.g. facts, photos, favourites etc
 */
 
		.section_content_container {
			height: 662px;
			width: 1024px;
		}

		
		.prev_item, 
		.next_item {
			width: 56px;
			height: 56px;
			font-size: 23px;
			border: 0;
			color: #ffffff;
			cursor: pointer;
			background: #538ad7 url(./../images/texture-center.png) center center no-repeat;
			border-radius: 50%;
			position: absolute;
			bottom: 20px;
			transition: background-color 0.5s ease;
		}
		
		.prev_item { left: 170px; }
		.next_item { right: 162px; }

		.prev_item:hover, 
		.next_item:hover {
			cursor: pointer;
			background-color: #ee7991;
		}

		.section_content .section_content_title {
			height: 150px;
			font: 44px "caveat_brushregular";
			overflow: hidden;
			width: 100%;
			padding: 40px 120px 0 120px;
			color: #3a79d1;
			text-align: center;
		}
		
		
/*
 *		ROUND SECTION
 *		facts, photos, favourites
 */
		
		.section_content.round {
			width: 454px !important;
			height: 454px !important;
			background: #fff7dd url(./../images/texture-center.png) center center no-repeat;
			border-radius: 50%;
			margin-top: 140px;
			margin-left: 270px;
			-webkit-box-shadow: 0px 0px 32px 0px rgba(0,0,0,0.75);
			-moz-box-shadow: 0px 0px 32px 0px rgba(0,0,0,0.75);
			box-shadow: 0px 0px 32px 0px rgba(0,0,0,0.75);			
		}
		
		.section_content.round .section_content_item_container {
			height: 454px;
			padding: 20px 40px 0 40px;
			text-align: center;
			color: #3a79d1;
			display: flex;
			align-items: center;
		}
		
		.slide_heading {
			font: 44px "caveat_brushregular";
			color: #3a79d1;
			margin-bottom: 20px;
		}
		
		.left {
			text-align: left;
		}
		
		.left img {
			width: 100px;
			float: left;
			margin-right: 20px;
		}
		
		.page_item a {
			color: #000000;
			font-weight: bold;
		}
		
		.slide_large_text {
			margin-bottom: 10px;
			font-size: 20px;
		}

		.slide_text {
			font-size: 16px;
		}
				


		.section_content.round .section_content_item_container.photos .page_item {
			width: 348px !important;
			text-align: center;
		}

/*	
 *		FULL SECTION
 *		games
 */
 
 		.section_content.full {
 			width: 989px !important;
 			height: 621px !important;
 			margin: 17px;
			background: #06b2b8 url(./../images/texture-full.png) center center no-repeat;
			border-radius: 20px; 
			text-align: center;			
 		}

		.section_content.full .section_content_title {
 			padding-left: 200px;
 			width: 100% !important;
 			color: #ffffff;
		}
		
		.gameframe {
			border: 0;
			width: 610px;
			height: 500px;
			margin: -30px 0 0 90px;
		}

 		
/*
 *		SECTION NAVIGATION
 *		links to each section_content: facts, photos, favourites, games
 */
 
		.section_navigation {
			position: absolute;
			right: 0;
			bottom: 0;
			width: 100%;
			height: 106px;
			z-index: 5;
			background-color: rgba(0,0,0,0.15);
			border-radius: 20px;
		}

		.section_navigation ul {
			margin: 0;
			padding: 0;
			list-style-type: none;
			text-align: center;
		}

		.section_navigation ul li {
			display: inline-block;
			margin: 30px 0;
			padding: 0;
			height: 46px;
		}
		
		.section_navigation ul li a {			
			background: #fff7dd url(./../images/texture-center.png) center center no-repeat;
			border-radius: 50px;
			text-align: center;
			font: 15px "metropolisbold";
			padding: 13px 25px;
			margin: 0 13px;
			transition: background-color 0.5s ease;
			height: 46px;
			color: #558bd7;
			display: block;
		}

		.section_navigation ul li a:hover {
			cursor: pointer;
			background-color: #ee7991;
			color: #ffffff;
		}
 		
 		.section_navigation ul li a.active {
			background-color: #ee7991;
			color: #ffffff;
		}
		
		
/*		SCREEN BUTTON
 *		buttons to switch between screens, entrance, pier, flag etc
 */
		.screen_button {
			position: absolute;
			top: 363px;
			z-index: 3000;
		}

		.screen_button.prev { left: 0; }
		.screen_button.next { right: 0; }

		.screen_button a {
			padding: 13px 25px;
			color: #558bd7;
			font: 15px "metropolisbold";
			background: #fff7dd url(./../images/texture-center.png) center center no-repeat;
			border-radius: 50px;
			transition: background-color 0.5s ease;
			-webkit-box-shadow: 0px 0px 18px 0px rgba(0,0,0,0.75);
			-moz-box-shadow: 0px 0px 18px 0px rgba(0,0,0,0.75);
			box-shadow: 0px 0px 18px 0px rgba(0,0,0,0.75);
		}

		.screen_button a:hover {
			background-color: #ee7991;
			color: #ffffff;
		}

/*		PHOTO AND VIDEO GALLERY
 *
 */
 

		
		.gallery_thumbnail a {
 			float: left;
			width: 162px;
 			height: 122px;
			position: relative;
			margin: 0 3px 6px 3px;
 		}	
 
  		.gallery_thumbnail a img {
 			width: 162px;
 			height: 122px;
			border-radius: 8px;
		}		

 		.gallery_thumbnail a .arrows {
 			position: absolute;
 			z-index: 50;
 			top: 10px;
 			right: 10px;
 			color: #ffffff;
 			font-size: 20px;
 		}	
 		
 		
 		
 		
 		.helper#around_pier {
 			position: absolute;
 			z-index: 2000;
 			font: 44px "caveat_brushregular";
			text-align: left;
			left: 850px;
			top: 160px;
 		}
 		
 		.helper#activities {
 			position: absolute;
 			z-index: 2000;
 			font: 44px "caveat_brushregular";
			text-align: center;
			left: 800px;
			top: 550px;
 		}