/*-----------------------------------------------------------------------------
Museum  Site Style Sheet 

version:   2.0
author:    Bam, v1.0 - Danny Murphy - Western Australian Museum
email:     onlineservices@museum.wa.gov.au
website:   http://www.museum.wa.gov.au
-----------------------------------------------------------------------------*/
* 		{ -webkit-user-select: none; user-select: none; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

html	{ }

.links	{ display: none; }

body				{ font-family: 'BrandonTextWeb-Regular',sans-serif;  font-size: 18px; }
/*
h1,h2,h3,h4,h5,h6, 
.title				{ font-family: 'OFL Sorts Mill Goudy TT', serif; }
*/

/* Fonts */

@font-face {font-family: 'BrandonTextWeb-Bold';src: url('../webfonts/3128CA_0_0.eot');src: url('../webfonts/3128CA_0_0.eot?#iefix') format('embedded-opentype'),url('../webfonts/3128CA_0_0.woff2') format('woff2'),url('../webfonts/3128CA_0_0.woff') format('woff'),url('../webfonts/3128CA_0_0.ttf') format('truetype');}


@font-face {font-family: 'BrandonTextWeb-Regular';src: url('../webfonts/3128CA_1_0.eot');src: url('../webfonts/3128CA_1_0.eot?#iefix') format('embedded-opentype'),url('../webfonts/3128CA_1_0.woff2') format('woff2'),url('../webfonts/3128CA_1_0.woff') format('woff'),url('../webfonts/3128CA_1_0.ttf') format('truetype');}


/* Headings
-------------------------------------------------------------- */
h1,h2,h3,h4,h5,h6 	{ font-weight: normal; color: #111; font-family: 'BrandonTextWeb-Bold',sans-serif;}
h1 					{ font-size: 4rem; line-height: 1; margin-bottom: 0.1em; text-transform: uppercase; clear: both; }
h2 					{ font-size: 3rem; line-height: 1; margin-bottom: 0.3em; }
h3 					{ font-size: 1.5em; line-height: 1; margin-top: 2em; margin-bottom: 0.3em; }
h4 					{ font-size: 1.2em; line-height: 1.25; margin-bottom: 0.3em; }
h5 					{ font-size: 1em; margin-bottom: 1.5em; }
h6 					{ font-size: 1em; }



/* Tables
-------------------------------------------------------------- */
table       		{ margin-bottom: 1.4em; width:100%; font-size: 1.2em; }
th          		{ font-weight: normal; }
thead th 			{ background: transparent; text-align: left; color: rgb(10.9.5); font-weight: normal; white-space: nowrap; border-bottom: 1px solid white; }
thead th a			{ color: rgb(10,9,5); border-bottom-color: white; text-decoration: none; }
thead th a:hover	{ color: rgb(10,9,5); }
thead th a:active,
thead th a:focus	{ color: rgb(10,9,5); background: transparent; }
thead th a img		{ margin-left: 10px;}
th,td,caption 		{ padding: 0.8em; vertical-align: top; font-size: 0.9em; }
tr.even td  		{ background-color:#efefef; }
tr:hover td			{ background-color:rgb(215, 226, 234); }
tfoot       		{ font-style: italic; }
caption     		{ background: #eee; }
td					{ border-bottom: 1px solid #dedede; line-height: 1.3em;}
td p				{ margin-bottom: 0; }


/* Use this if you use span-x classes on th/td. */
table .last 		{ padding-right:0; }

.views-field-field-panel-number-value,
.views-field-field-arrival-year-value,
.views-field-field-ship-name-value { text-align: right; }

#admin-menu	{ visibility: hidden; display: none; }

#views-exposed-form-wam-browse-names-kiosk-page { clear: both; }


body {margin:0 auto; background-color:#FFFEFE; margin-bottom: 10vh;}
.wrapper {margin: 20px auto; width: 80vw;}
.kiosk .wrapper {margin: 0; border: 0;}
#keyboard {
	display: inline-block;
    text-align: center;
	padding: 0;
	list-style: none;
	margin:auto;
}
#keyboard li {
	float: left;
	margin: 0 10px 10px 0;
	width: 3vw;
	height: 3.5vw;
	line-height: 4vw;
	text-align: center;
	background: #fff;
	border: 1px solid #e8e8e8;
    box-shadow: 5px 5px 0px #e8e8e8;
	font-size: 1.2em;
}
.capslock, .tab, .left-shift {
	clear: left;
}
#keyboard .tab, #keyboard .delete {
	width: 70px;
}
#keyboard .capslock {
	width: 80px;
}
#keyboard .return {
	width: 156px;
}
#keyboard .left-shift {
	width: 95px;
}
#keyboard .right-shift {
	width: 141px;
}
#keyboard .left-delete {
	width: 71px;
}
#keyboard .right-delete {
	width: 100px;
}
.lastitem {
	margin-right: 0;
}
.uppercase {
	text-transform: uppercase;
}
#keyboard .space {
	width: 100%;
}
.on {
	display: none;
}
#keyboard li:hover {
	position: relative;
	top: 1px;
	left: 1px;
	border-color: #e5e5e5;
	cursor: pointer;
	box-shadow: 5px 5px #272727;
}


blockquote 						{ margin:1.5em 0; }
#footerpush 					{ display:none; }

#searchlist li 					{ margin:3px 0; }

#views-exposed-form-wam-browse-names-kiosk-page {}


/*#container2 					{ overflow: hidden; position: absolute; top: 360px; left: 36px; }
/* input 						{ width: 692px; margin: 0 0 5px; padding: 0 10px; font: 1.5em/2 Verdana, Sans-Serif; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; height: 54px; } */
input							{ margin: 1rem 0; font-size: 26px; padding: 0 10px; width: 101%;
    height: 4rem; line-height: 55px; text-align: left; border: #cccccc solid 1px; box-shadow: 5px 5px #e8e8e8;}
input[type="submit"] 			{padding: 0; width: 203px; height: 4rem;text-align: center; 
    background-color: #2d9221; color: white; box-shadow: 5px 5px #cbe3cb;border-top: 2px solid #29971c;}
input[type="image"] 			{ padding: 5px; }
.form-item 						{display: inline;}
li 								{display: inline-block;}
.views-field-title 				{font-weight: bold;}
.views-field-body 				{display: none;}
.views-row-last 				{
	margin: 0 0 4rem 0;    width: 100%;}

	.item-list  					{margin: 2rem 0;}

	.search-passengers .views-exposed-form .views-exposed-widget {display: inline-block;}
	.search-passengers {text-align: center;}
	.search-passengers .views-table {text-align: left;}
	#container2 					{float: left;width: 100%;display: flex;
    align-items: center;
    justify-content: center;}

	thead 							{background-color: #1a052a;color:white;}
	.views-table thead th a 						{color:white;}

	label							{ font-weight: bold; margin-top: 20px; display: block; }

	#search-start					{ display: none;}/*not sure where this button is coming from?*/
	#search-start a					{ font-size: 18px; padding: 12px 30px 11px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; background-color: #F3FAFF; border: #BBCEDB solid 1px; color: #2899d5; text-decoration: none; }
	#search-start a:hover 			{ position: relative; top: 1px; left: 1px;  background-color: #2899d5; color: white; }

	#back-button					{ display: none;}/*not sure where this button is coming from?*/
	#back-button a					{ font-size: 18px; padding: 12px 30px 11px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; background-color: #F3FAFF; border: #BBCEDB solid 1px; color: #2899d5; text-decoration: none; }
	#back-button a:hover 			{ position: relative; top: 1px; left: 1px;  background-color: #2899d5; color: white; }




	.empty-text						{ text-align: center; padding-top: 4em; font-weight: bold; font-size: 2em; }

	.button							{ clear: both; padding-top: 4em; text-align: center; } 
	.button a,
	.button a:visited				{ font-size: 18px; padding: 12px 30px 11px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; background-color: #2899d5;  border: #BBCEDB solid 1px;  color: white; text-decoration: none; }
	.button a:hover 				{ position: relative; top: 1px; left: 1px; background-color: #F3FAFF; color: #2899d5; }


	p								{ margin: 0; line-height: 1.3em; }
	p.small							{ font-size: 1.1em !important; clear: both; position: absolute; top: 600px; left: 34px;  }
	a,
	a:active,
	a:visited						{ color: rgb(0,34,53); }
	.quote_close					{ position: relative; top: -5px; left: 0; }
	form							{ margin:2rem 0; }
	h2 								{ }


	#searchmenu						{ padding: 20px 0 0 0; }
	#searchmenu h2 					{ }
	#searchmenu h2 span				{ }
	#searchmenu p					{ margin-left: 0; padding-bottom: 6px; }

	#searchmenu li.leftcol,
	#searchmenu li.rightcol			{ width: 43%; float: left; background: #e3eaef; margin: 50px 0 50px 30px; border: solid 8px #fff; box-shadow: 3px 3px 10px #89a3b1; -moz-border-radius: 25px; -webkit-border-radius: 25px; border-radius: 25px; }
	#searchmenu li.leftcol:hover,
	#searchmenu li.rightcol:hover	{ position: relative; top: 1px; left: 1px; background: white; }
	#searchmenu li.leftcol h2,
	#searchmenu li.rightcol h2		{ width: 300px; margin: 40px 20px 20px; }
	#searchmenu li.leftcol p,
	#searchmenu li.rightcol p		{ margin-left: 70px; padding-bottom: 100px; }

	.browse-letters 				{ margin-left: 0 !important; overflow: hidden; }
	.browse-letters a				{ width: 60px; height: 60px; text-align: center; line-height: 60px; display: block; float: left; margin: 0 10px 10px 0; padding: 0; }
	.browse-letters a:nth-child(13n)		{ margin-right: 0; }
	.browse-letters a:hover 		{ position: relative; top: 1px; left: 1px; }

/*
.pager							{ position: absolute; top: 614px; left: 30px; font-size: 1em; }*/
.pager 							{margin: 3rem 0;}
.pager li						{ }
.pager .pager-ellipsis,
.pager .pager-current,	
.pager a						{ padding: 1rem 1rem 1rem; margin-right:0.5rem; color: #000;text-decoration: none; font-weight:bold;border: 1px solid #e8e8e8;
    box-shadow: 5px 5px 0px #e8e8e8;}
.pager a:hover					{ position: relative; top: 1px; left: 1px; }
.pager .pager-current			{ background-color: #1a052a; color: white; padding: 1.3rem; border:0;}
.pager .pagemore				{ border: 1px solid #e8e8e8;
    box-shadow: 5px 5px 0px #e8e8e8;}
.pager-first,
.pager-last						{ display: none; }*/

#searchlist						{ margin: 0 !important; padding: 0; }
#searchlist li 					{ margin: 0 !important; border-bottom: 1px solid white; }
#searchlist li:first-child		{ border-top: 1px solid white; }
#searchlist li a 				{ font-size: 18px; display: block; padding: 14px 10px 13px; text-decoration: none; }
#searchlist li a:hover			{ background: #b2c4d0; color: black; }
#searchlist li a span			{ float: right; text-decoration: none; color: rgb(50,50,50); }

#extralinks						{ position: absolute; top: 50px; right: 42px; color: rgb(60,60,60); }
#extralinks a					{ padding: 8px 15px 7px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; background-color: #fff; border: #BBCEDB solid 1px; color: 2899d5; text-decoration: none; }
#extralinks a:hover				{ background-color: #2899d5; border: #fcfdfe solid 1px; color: white; }

#data-location					{ position: absolute; top: 80px; right: 44px; font-size: 24px !important; font-weight: bold !important; margin: 0 !important; }
#data-location.big				{ font-size: 52px !important; color: #2899d5; text-transform: uppercase; }
#data-panel						{ position: absolute; top: 80px; right: 34px; font-size: 128px !important; margin: 0 !important; color: #2899d5; }
#data-panel span				{ font-size: 24px !important; position: absolute; top: 60px; right: 10px; color: rgb(90,90,90); }
#data-name						{ font-size: 28px !important;  color: #2899d5; font-weight: bold !important; margin-bottom: 0 !important; margin-top: 17px; }
#data-dob						{ margin-top: 0; margin-bottom: 10px; }
#data-ship						{ font-size: 24px !important; margin-bottom: 0; margin-top: 15px; }
#data-ship span					{ font-size: 15px !important; }
#data-transit					{ margin-top: 0; }
#data-history					{ width: 70%; }

.box							{ display: none; }

.box2							{     float: right;
    width: 35%;
    text-align: center;
    border: 1px solid #dadada;
    padding: 2rem 1rem;
    border-radius: 4px;}
.box2 p							{ width: auto; }
.box2 .location					{ font-size: 1.7em; font-weight: bold; line-height: 1; margin-bottom: 0; }
.box2 .panelno					{ line-height: 1; margin-bottom: 0; margin-bottom: 1rem;}
.box2 .panelno span				{ font-size: 2rem;}


.data							{float:left; width: 65%;}
.data h1						{ text-transform: none; font-weight: bold; font-size: 2.2em; padding-bottom: 5px; }
.data p							{ padding-bottom: 1em; line-height: 1.5rem;}
.data .shipname					{ }

.story							{ width: 100%; }
.scroll							{ float:left;width:100%;}
.scroll	h2						{ font-size: 1.2em; font-weight: normal; text-transform: uppercase; }
.scroll::-webkit-scrollbar 			{ width: 30px; }
.scroll::-webkit-scrollbar-track 	{ }
.scroll::-webkit-scrollbar-thumb 	{ border-radius: 30px; height: 30px; width: 30px; background: rgba(0, 90, 128, 0.6) url(../images/arrows.png) 0 50% no-repeat; }

#comments		{ padding-top: 2em; margin-bottom: 2rem; float: left; width: 100%;} 
#comments ul	{ list-style: none; }
#comments li	{ border-bottom: solid 1px white; margin-bottom: 1em; padding: 0.5em 0 1em; }
.subline		{ font-size: 90%; font-weight: bold; }


.share,
#edit-preview,
.attachments,
.collapsed	{ display: none; }

.commentbutton:active,
.commentbutton:visited,
.commentbutton	{ text-decoration: none; display: inline-block;
	background: rgba(0, 0, 0, 1);
	color: white;
	padding: 1em 3em 1em 3em;
	box-shadow: 
	border: 0;
	box-shadow: 0.4rem 0.4rem 0 #27a7ea;
margin-top: 1rem; */ }

.commentbutton:active { background-color: rgb(0,34,53); }

#commentarea 	{
	position: relative;
	background: white;
	z-index: 100;
	padding: 2rem;
	margin: auto;
	box-shadow: 0px 2px 19px 6px rgba(27, 27, 27, 0.61);
	border-radius: 1rem;
	max-width: 80%;}
	.commentoff		{ display: none; }
	.commentclose	{ position: absolute; top: 26px; right: 30px; width: 26px; height: 26px; text-indent: -9999px; background: url(../images/close.gif);  }

	#commentthankyou	{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(255,255,255,0.8); z-index: 3000; }
	.thankyou			{ width: 66%; height: 36%; margin: 7em auto 1em; background: white; padding: 1em; box-shadow: 0 0 3px 3px rgba(50,50,50,0.2); position: relative; }
	.thankyouclose		{ position: absolute; top: 20px; right: 20px; width: 26px; height: 26px; text-indent: -9999px; background: url(../images/close.gif);  }


	.box-inner		{}

	.box-inner #edit-comment-wrapper	{ }
	.box-inner #edit-comment			{ font-size: 1.4em; font-size: 1.4em;
		border: #cccccc solid 1px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border-radius: 5px;
	}

	.form-textarea{
		width: 100%;
	}

	.hidden-captcha {display:none;}


	/*timeout overlay info*/

	.row {width: 80%;margin: auto;}

	#pop-up {
		position: absolute;
		z-index: 250;
		background: rgba(255, 255, 255, 0.77);
		background-image: url(../images/lscape_bg.jpg);
		transition-duration: 2s;
		width: 100%;
		height: 100%;
		display: none;
		top: 0;
		left:0;

	}

	.modal {
		width: 100%;
		margin: auto;
		float:left;
		background: white; 
		min-height: 80vh;
		margin-top: 10vh;
		padding: 1rem;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		
	}

	#pop-up .modal {
		border: 5px solid #000;
    	border-radius: 0;
    	position: relative;
	}

	#pop-up {}

	#pop-up .views-exposed-widget{
		display: inline-block;
	}

	.active-screen #pop-up{
		transition-duration: 2s;
		transition: 2s;
		animation-duration: 3s;
		animation-name: hide;
		animation-fill-mode: forwards;
	}

	.inactive-screen #pop-up{
		animation-duration: 3s;
		animation-name: show;
		animation-fill-mode: forwards;
		display: inline;
		position: fixed;
	}

	.inactive-screen{;width: 100%;}
	.inactive-screen .wrapper {}

	#close-pop-up {
		float:right;
		width: 26px;
		height: 26px;
		text-indent: -9999px;
		background: url(../images/close.gif);
	}


.kiosk-menu {
	position: fixed;
    z-index: 98;
    width: 100%;
    bottom: 0;
    left: 0;
    border-top: 2px solid #e8e8e8;
}

 .go-back{
 	width: 50%;
    padding: 2rem;
    float: left;
    text-align: center;
 }

 .go-back a {
 	display: inline-block;
    vertical-align: middle;
    margin: 0 0 1rem 0;
    padding: 0.85em 1em;
    -webkit-appearance: none;
    border: 1px solid transparent;
    border-radius: 0;
    transition: background-color 0.25s ease-out,color 0.25s ease-out;
    font-size: 0.9rem;
    line-height: 1;
    text-align: center;
    cursor: pointer;
    background-color: #1a052a;
    color: #fefefe;
    box-shadow: 5px 5px 0 #ed145a;
    font-size: 1.4rem;
    text-decoration: none;
    width: 15vw;
 }

 .new-search{
 	width: 50%;
    padding: 2rem;
    float: left;
    text-align: center;
 }

 .new-search a {
 	    display: inline-block;
    vertical-align: middle;
    margin: 0 0 1rem 0;
    padding: 0.85em 1em;
    -webkit-appearance: none;
    border: 1px solid transparent;
    border-radius: 0;
    transition: background-color 0.25s ease-out,color 0.25s ease-out;
    font-size: 0.9rem;
    line-height: 1;
    text-align: center;
    cursor: pointer;
    background-color: #1a052a;
    color: #fefefe;
    box-shadow: 5px 5px 0 #ed145a;
    font-size: 1.4rem;
    text-decoration: none;
    width: 15vw;
 }

	#mapOverlay {
	transition-duration: 2s;
    width: 100%;
    z-index: 99;
    position: absolute;
    padding: 0;
    margin: auto;
    top: 0;
    max-width: 100%;
    background: rgba(255,255,255,0.75);
    height: 100vh;
 
	}

	.flex-centered{
		   display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    height: 100%;
    left: 0;	
background: rgba(255,255,255,0.75);
    width: 100%;
}

	.map-wrapper {
	background: black;
    width: 80%;
    box-shadow: #e8e8e8 10px 10px 0px;
        position: relative;
	}


	.open-map {
		background: #000;
		color: white;
		padding: 1rem 1.5rem;
		display: inline-block;
		box-shadow: 0.4rem 0.4rem 0 #27a7ea;

	}

	.ww-search {
		text-align: center;
		float:left;
		width: 100%;
	}

	@keyframes show {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;

		}
	}

	@keyframes hide{
		0 {
			opacity: 1;

		}

		99% {
			opacity: 0;

		}

		100% {
			display: none;
		}
	}

	.just-loaded #pop-up{display: none;}

	.hide {
		display: none;
	}

	.visible {
		display: block; 
	}

	.visible-long{
		display: block; 
		animation-name: fade-in;
		animation-duration: 3s;
	}
	/* The fade in animation  */
	@keyframes fade-in {
		from {opacity: 0;}
		to {opacity: 1;}
	}

	svg .pulse {
		/*animation-name: pulsing;*/
		animation-duration: 2s; 
		animation-timing-function: ease-out; 
		animation-delay: 0;
		animation-direction: alternate;
		animation-iteration-count: infinite;
		animation-fill-mode: none;
		animation-play-state: running;
		fill: #27a7ea;
	}

	@keyframes pulsing {
		0% {

			opacity: 1;
		}
		50% {
			opacity: 0.75;
		}
		100% {
			opacity: 0.50;
		}
	}

	.emoji {
		background-image: url(sunnies.svg);
		height:50px;
		width:50px;
		position: absolute;
		z-index: 100;
		right: 41vw;
		top: 28vh;
	}

	.location {fill:white;} 

	.st0 {opacity: 0.25;}

	.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#D94C65;}

	
	.st3{opacity:0.9;fill-rule:evenodd;clip-rule:evenodd;fill: rgba(255,255,255,1);}

	.st0{fill:none;stroke:white;stroke-width:2;stroke-miterlimit:10;}
	

	.st1{display:none;fill:#E2E2E2;}
	.st2{fill:none;stroke:white;stroke-width:2;}
	.st3{fill-rule:evenodd;clip-rule:evenodd;fill:#D94C65;}
	.st4{fill-rule:evenodd;clip-rule:evenodd;fill:none;stroke:#2376BC;}
	.st5{opacity:0.9;fill-rule:evenodd;clip-rule:evenodd;fill:white;}

	rect {
		fill:white;
	}
	polygon{
		fill: white; 	
	}

	img{max-width: 100%;}

	#ww-map {
		max-height: 100vh;
		max-width: 50%;
		background: black;
	

	}

	#locations {
		transform: rotateY(180deg) rotateX(180deg);
		-webkit-transform: rotateY(180deg) rotateX(180deg);
		transform: rotateY(180deg) rotateX(180deg);
		-webkit-transform-style: preserve-3d;
		transform-style: preserve-3d;
	}

	/*.ww-map{ 	
		stroke-dasharray: 10;
		stroke-dashoffset: 0;
		animation: dash 4s linear infinite reverse;
		}*/

		@keyframes dash {
			to {
				stroke-dashoffset: 100;
			}
		}

		#baseOutline {
			opacity: 0.33;
			/*fill:none;stroke:white;stroke-width:2;stroke-miterlimit:10; */
		}

		.poi {

			padding: 1rem;
			color: white;
    		font-size: 2rem;
    		width: 45%;
    		float:right;
    		background: black;
		}

		.inner-wrapper {
			padding:1rem;
		}

		.names{
		/*background-color: #272727;
		overflow: hidden;
		padding: 0*/
	}

	.close-map {
  	color: white;
    line-height: 1.5;
    text-align: center;
    padding: 0px 20px 0 0;
    position: absolute;
    bottom: 0;
    right: 0;
    border-bottom: 4px solid #fa1b1b;
    margin-bottom: 1rem;
	}

	.rotated{
		transform: rotateY(180deg) rotateX(180deg);
		-webkit-transform: rotateY(180deg) rotateX(180deg);
		transform: rotateY(180deg) rotateX(180deg);
		-webkit-transform-style: preserve-3d;
		transform-style: preserve-3d;
		position: absolute;
		bottom:0;
	}

	.spin180 {
		transform: rotateY(180deg) rotateX(180deg);
		-webkit-transform: rotateY(180deg) rotateX(180deg);
		transform: rotateY(180deg) rotateX(180deg);
		-webkit-transform-style: preserve-3d;
		transform-style: preserve-3d;
		
	}

	.landscape-screen-top{
		padding: 25px 0 0 0;
	}

	.names .views-row span {
		font-weight: normal; color: #111; font-family: 'BrandonTextWeb-Bold',sans-serif;
	}




	@media (max-width: 1080px) {

body {
			background-color: white;
			background-image: url(../images/portrait_bg.jpg);
			background-size: cover;
			    background-repeat: no-repeat;
			    background-attachment: fixed;
		}

		.poi {
			width:100%;
		}

		#ww-map {
			max-height: 100vh;
			max-width: 100%;
		}

		.portrait-screen-top {
		width: 100%;
   	     background-color: #f1f1f1;
   	 padding: 50px 0 0 50px;
  	  min-height: 33vh;
  	  background-size:cover;
		}

		.landscape-screen-top {
			display: none;

		}

		#keyboard li {
		width: 50px;
    	height: 50px;
    	line-height: 55px;
		}

		#pop-up {

			background-image: url(../images/portrait_bg.jpg);
		}

	}

	@media (min-width: 1081px) {
		.portrait-screen-top {
			display: none;

		}

		.story {
			max-width: 50%;
		}


	}


	@media (min-width: 1920px) {
		.poi {
			float: right;
			color: white;
			 width: 25vw;
			
    		
		}

		#ww-map {
			max-height: 100vh;
			max-width: 50vw; 
		

		}
		body {
			background-color: white;
			background-image: url(../images/lscape_bg.jpg);
			background-size: cover;
			    background-repeat: no-repeat;
			    background-attachment: fixed;
		}
	}