/* CSS He Meka! He Meka! */


/* ------------------------------------ */

html, body {
	height: 100%;
	margin: 0;
	padding: 5px;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	font-family: calibri, sans-serif;
	font-weight: 700;
	color: white;
	white-space: normal;
	word-wrap: break-word;
	text-align: center;
	font-size: 1.2rem;
}


hr {
	border: 2px solid #0099ff;
	width: 100px;
	margin: 20px auto;
}

.caps {
	text-transform: uppercase;
}

h5.green, h5.lightblue, h5.turquoise, h5.purple, h5.yellow {
	margin: 30px 10px 5px 10px;
	line-height: .8em;
}

#Languages h2 {
	margin-top:30px;
}

h2 { margin-top:30px;
}

h3 {
	color: #ffffff;
	margin:0;
	font-size:1.3em;
}

h3.lightturquoise {color:#2de8ff;}

/* Whakatere */

#Whakatere {
	position:absolute;
	width:100%;
	height: 100%;
	background-image: url("../images/box-bg.png") !important;
	z-index:6;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	margin: 0 auto;
	text-align: center;
	-webkit-transition: margin-left .5s;
	transition: margin-left .5s;
	overflow: hidden;
	
}
@media all and (orientation:portrait) {
		
	.whakatere img {
		z-index: 8;
    	/* Absolute centering */
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
    	/* Size limit */
		max-width: 100%;
		height: auto;
    	/* Other required settings */
		margin: auto;
		overflow: auto;
		/* rounded corners */
		border-radius: 20px;
		/* rotate*/
		-webkit-transform: rotate(-90deg);
		        transform: rotate(-90deg);
}
}



@media all and (orientation:landscape) {
	 
	.whakatere img {
		z-index: 7;
    	/* Absolute centering */
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
    	/* Size limit */
		max-width: 90%;
		max-height: 90%;
    	/* Other required settings */
		margin: auto;
		overflow: auto;
		/* rounded corners */
		border-radius: 20px;
}
}


/* TABLES */

table, th, td {
	padding: 5px;
	max-width: 98%;
	vertical-align: top;
	text-align: left;
	font-size: 0.8em;
}

table {
	margin-left: auto;
	margin-right: auto;
}

.col0 { width: 50%; }

a.lightblue, a.green, a.turquoise, a.purple, a.yellow {
	text-decoration: none;
}

/* COLOURS */

.blue {
	color: #1d285f;
}

.lightblue {
	color: #4a57a6;
}

.green {
	color: #195f3d;
}
.lightgreen {
	color: #619c7b;
}

.turquoise {
	color: #05707e;
}
.lightturquoise {
	color: #69adb5;
}
.purple {
	color: #7c4d8f;
}
.lightpurple {
	color: #b391c1;
}
.white {
	color: white;
}

.yellow {
	color: #CC9900;
}


/* images */


.graphic {
	width: 30%;
	max-width: 200px;
	position: absolute;
	top: 10px;
	left: 10px;
	-webkit-transition: 0.3s;
	transition: 0.3s;
}

.he-meka img {
	max-width: 50%;
	padding-bottom: 10px;
}

.mana {
	width: 80%;
	height: 80%;
	margin: auto;
	-o-object-fit: contain;
	   object-fit: contain;
	border-radius: 10px;
}

#Languages img {
	position: relative;
	top: 20px;
}

/* CARDS - BGs & Images */
.card {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: 25px 25px 25px 25px;
	margin: 0 auto;
	text-align: center;
	position: relative;
	-webkit-transition: margin-left .5s;
	transition: margin-left .5s;
	overflow: hidden;
	height: 100%;
}

.cover {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	margin: 0 auto;
	text-align: center;
	position: relative;
	-webkit-transition: margin-left .5s;
	transition: margin-left .5s;
	overflow: hidden;
	height: 100%;
}

/* The sidebars */

.sidebar {
	z-index:4;
	height: 100%;
	width: 0;
	position: absolute;
	top: 0;
	left: 0;
	background-color: #000000;
	overflow-y: scroll;
	-webkit-transition: .5s;
	transition: .5s;
	border-radius: 25px 25px 25px 25px;
	background-position: bottom center;
	background-size: cover;
}

.greencard {
	background-image: url("../images/hemeka-green-card.png");
}

.bluecard {
	background-image: url("../images/hemeka-blue-card.png");
}

.purplecard {
	background-image: url("../images/hemeka-purple-card.png");
}

.turquoisecard {
	background-image: url("../images/hemeka-turquoise-card.png");
}

.navcard {
	background-image: url("../images/hemeka-nav-card.png") !important;
}

.rotate {
	background-repeat: no-repeat;
	background-attachment: fixed;
	width: auto;
	background-size: auto auto;
	-webkit-transform: rotate(-90deg);
	        transform: rotate(-90deg);
}

.rotate-right {
	background-repeat: no-repeat;
	background-attachment: fixed;
	width: auto;
	background-size: auto auto;
	-webkit-transform: rotate(90deg);
	        transform: rotate(90deg);
}



/* Front Card Content */
.mid {
	position: relative;
	top: 50%;
	-webkit-transform: perspective(1px) translateY(-50%);
	        transform: perspective(1px) translateY(-50%);
	padding: 20px;
	max-width: 600px;
	margin: 0 auto;
}
 


/* ------------------- NAV & PAGE NUMBERS ----------------- */

#navblock, #Languages {
	z-index:2;
	position: relative;
	top: 50%;
	-webkit-transform: perspective(1px) translateY(-50%);
	        transform: perspective(1px) translateY(-50%);
	padding: 20px;
	overflow-y: scroll;
	max-height: 80%;
	max-width: 600px;
	margin: 0 auto;
	color:#ffffff;
}

::-webkit-scrollbar {
    height: 12px;
    width: 12px;
    background: #000;
}

::-webkit-scrollbar-thumb {
    background: #333;
    -webkit-border-radius: 1ex;
    -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
}

::-webkit-scrollbar-corner {
    background: #000;
}

/* Nav bock on small iphone */

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) {
 
	#navblock {
		padding: 40px;
	}
}

/* FOOTER sidebar open & close buttons */

.kainga {
	position: absolute;
	bottom: 0px;
	left: 0px;
}

.tomuri, .tomua {
	position: relative;
	top: 25px;
}

.nav-footer-container {
	position: absolute;
	bottom: 10px;
	width: 100%;
	z-index:3;
}

.nav-footer {
	position: relative;
	max-width: 600px;
	margin: 0 auto;
}

.close-container {
	position: absolute;
	top: 0px;
	width: 100%;
}

.close {
	position: relative;
	max-width: 600px;
	margin: 0 auto;
}

.nav-footer a {
	text-decoration: none;
	color: white;
}

.openbtn {
	position: absolute;
	bottom: 0px;
	right: 0px;
}

.closebtn {
	position: absolute;
	top: 10px;
	right: 0px;
}

#navblock, .page-number {
	line-height: 59px;
}

.page-number {
	position: relative;
	top: 5px;
	padding: 10px 0px;
	margin: 0 auto;
	border-radius: 50%;
	text-align: center;
}

.page-number a {
	text-decoration: none;
	color: white;
	padding: 10px;
}

.page-number.lightblue {
	background-color: #4a57a6;
	border: 4px solid #2e2e65;
}

.page-number.blue {
	background-color: #1d285f;
	border: 4px solid #2e2e65;
}

.page-number.green {
	background-color: #195f3d;
	border: 4px solid #296744;
}

.page-number.purple {
	background-color: #6d488b;
	border: 4px solid #7c4d8f;
}

.page-number.turquoise {
	background-color: #036f7e;
	border: 4px solid #177783;
}

.page-number.yellow {
	background-color: #CC9933;
	border: 4px solid #FFCC66;
}





/* Maori/English Toggle content (original setup) */

/* #English { display:none; } */




/*
*style AUDIO TAG
*/

audio:focus {
	outline-style: none !important;
	-webkit-box-shadow: none;
	        box-shadow: none;
	border-color: transparent;
}

.mejs__offscreen {
	display: none;
}

.mejs__container {
	background: transparent;
	vertical-align: top;
	text-indent: 0;
	width: 50px !important;
	height: 50px !important;
	border: none;
	margin: 0 auto;
}

/*.mejs__container .mejs__controls {
	height: 100%;
	background: transparent;
	display: flex;
}*/

.mejs__container .mejs__controls div {
	height: 50px;
	width: 50px;
	position: relative;
}

.mejs__controls .mejs__button button {
	margin: 0;
	padding: 0;
	position: relative;
	height: 50px;
	width: 50px;
	border: 0 !important;
	background: transparent;
	outline: none;
}

.mejs__controls .mejs__button button:focus {outline:0;}

.mejs__controls .mejs__play:after, .mejs__controls .mejs__replay:after {
	position: absolute;
	content: "";
	background: url(../images/haere.png)
		no-repeat;
	width: 50px;
	height: 50px;
	top: 0px;
	left: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	-webkit-transition: all 100ms linear;
	transition: all 100ms linear;
	pointer-events: none;
}

.mejs__controls .mejs__pause:after {
	position: absolute;
	content: "";
	background: url(../images/okioki.png)
		no-repeat;
	width: 50px;
	height: 50px;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	-webkit-transition: all 100ms linear;
	transition: all 100ms linear;
	pointer-events: none;
}