/*--- Mobile Styling ---*/

@media (max-width: 601px) {
	body {
		overflow: scroll;
	}

	.mobile-header {
		display: block;
	    position: relative;
	    height: 75px;
	    width: calc(100% - 4vw);
	    margin-left: 2vw;
	    overflow: hidden;
	}

	.mobile-header > div {
		display: block;
	}

	.mobile-header .logo {
		position: absolute;
		height: 100%;
		width: calc(100% - 37.5px);
		top: 50%;
		-webkit-transition: 1.2s ease;
		-o-transition: 1.2s ease;
		transition: 1.2s ease;
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		transform: translateY(-50%);

	}

	.mobile-header .logo img {
		position: absolute;
		height: 50%;
		top: 50%;
		opacity: 0;
		margin-left: 4vw;
		-webkit-transition: 1.2s ease;
		-o-transition: 1.2s ease;
		transition: 1.2s ease;
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		transform: translateY(-50%);
	}

	.mobile-header .logo img.current {
		opacity: 1;
		-webkit-transition: 1.2s ease;
		-o-transition: 1.2s ease;
		transition: 1.2s ease;
	}

	.mobile-header .question-mark {
		position: absolute;
		height: 100%;
		width: 37.5px;
		top: 50%;
		right: 0;
		background-color: white;
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		transform: translateY(-50%);

	}

	.mobile-header .question-mark img {
		position: absolute;
		height: 100%;
		right: 100%;
		opacity: 0;
		-webkit-transition: 1.2s ease;
		-o-transition: 1.2s ease;
		transition: 1.2s ease;
		-webkit-transform: translateX(50%);
		-ms-transform: translateX(50%);
		-o-transform: translateX(50%);
		transform: translateX(50%);

	}

	.mobile-header .question-mark img.current {
		opacity: 1;
		-webkit-transition: 1.2s ease;
		-o-transition: 1.2s ease;
		transition: 1.2s ease;
	}

	.wrapper > div {
   		width: 47vw;
	    height: 47vw;
	    margin: 2vw 1vw 0 2vw;
	    padding: 5vw 0 0 5vw;
	    flex: none;
	}

	.wrapper > div:nth-child(2n + 2) {
		margin: 2vw 2vw 0 1vw;
	}

	.wrapper > div h6 {
    	font-size: 20px;
	}

	.wrapper > div.lightgrey p {
		font-size: 14px;
	}

	.content-container {
		height: auto;
	}

	.content-container > div {
		display: none;
		position: relative;
	}

	.content-container div.current-section {
		display: block;
	}

	.content-container > div > div {
		width: 100%;
		padding: 4vw !important;
	}

	.content-container > div > div:nth-child(1) > div {
		height: auto;
	}

	.go-home {
		height: 20px;
    	right: 20px;
	}

	.title {
		display: flex;
		align-items: flex-end;
    	width: calc(42vw - 10px);
	    height: calc(48vw - 30px);
	    margin-top: 30px;
	    padding: 0;
	    border: none;
	}

	.title h2 {
    	font-size: 6vw;
	}

	.media {
	    width: 48vw;
   		height: 48vw;
	}


	.content-container > div > div:nth-child(2) {
	    max-height: unset;
    	overflow: visible;
	}

	.content-container > div .book_link{
	    font-family: AvenirMedium;
	    font-size: 16px;
	    line-height: 1.5;
	}
	.content-container > div > div:nth-child(2) p {
	    margin-bottom: 16px;
	    font-family: AvenirMedium;
	    font-size: 16px;
	    line-height: 1.5;
	}

	.content-container > div > div:nth-child(2) li {
	    font-family: AvenirMedium;
	    font-size: 16px;
	    line-height: 1.5;
	}

	.content-container > div > div:nth-child(2) div img {
		vertical-align: middle;
	}

	.content-container > div > div:nth-child(2) div span {
		font-size: 16px;
	}

	.wrapper > div.blue h6 {
		font-size: 18px;
	}

	.form-popup {
		left: 50% !important;
	}

	footer {
		height: auto !important;
	    max-height: unset;
	    padding-top: 0;
	    margin: 10px 0
	}

	footer > div {
	    position: relative;
	    height: auto;
	    width: 100%;
	    margin-left: 0;
	}

	footer  .nz-govt-container {
	    position: static;
	    height: auto;
	    width: 60%;
	    opacity: 1;
	    -webkit-transition: 0.66s ease;
	    -o-transition: 0.66s ease;
	    transition: 0.66s ease;
	    margin-left: 20%;
	}

	footer .nz-govt-container > img {
    	position: static;
    	height: auto;
    	width: 100%;
    	max-width: unset;
    	-webkit-transform: translateY(0%);
    	-ms-transform: translateY(0%);
    	-o-transform: translateY(0%);
    	transform: translateY(0%);
	}

	/*--- Display None ---*/

	.flex-container {
		display: none;
	}

	.question-mark {
	    display: none;
	}

	.categories div {
		display: none;
	}	
}
@media screen and (orientation:portrait)
{
	.portraitmode {
		display: block;
		width: 100%;
		height: 100%;
		background-color: rgb(250,173,65)
	}
	.portraitmode p{
	    font-family: AvenirHeavy;
	    font-size: 6vw;
	    text-align: center;
	    position: absolute;
	    color: white;
	    top: 50%;
	    left: 50%;
	    transform: translate(-50%,-50%);
	    width: 90%;
	}
	.page_prev,
	.page_next,
	.booklet {
		display: none!important;
	}
}



/*----- Tablet Styling -----*/

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1366px)
and (orientation : portrait) {
	body {
		overflow: scroll;
	}

	.mobile-header {
		display: block;
	    position: relative;
	    height: 125px;
	    width: calc(100% - 4vw);
	    margin-left: 2vw;
	    overflow: hidden;
	}

	.mobile-header > div {
		display: block;
	}

	.mobile-header .logo {
		position: absolute;
		height: 100%;
		width: calc(100% - 37.5px);
		top: 50%;
		-webkit-transition: 1.2s ease;
		-o-transition: 1.2s ease;
		transition: 1.2s ease;
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		transform: translateY(-50%);

	}

	.mobile-header .logo img {
		position: absolute;
		height: 50%;
		top: 50%;
		opacity: 0;
		margin-left: 4vw;
		-webkit-transition: 1.2s ease;
		-o-transition: 1.2s ease;
		transition: 1.2s ease;
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		transform: translateY(-50%);
	}

	.mobile-header .logo img.current {
		opacity: 1;
		-webkit-transition: 1.2s ease;
		-o-transition: 1.2s ease;
		transition: 1.2s ease;
	}

	.mobile-header .question-mark {
		position: absolute;
		height: 100%;
		width: 37.5px;
		top: 50%;
		right: 0;
		background-color: white;
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		transform: translateY(-50%);

	}

	.mobile-header .question-mark img {
		position: absolute;
		height: 100%;
		right: 100%;
		opacity: 0;
		-webkit-transition: 1.2s ease;
		-o-transition: 1.2s ease;
		transition: 1.2s ease;
		-webkit-transform: translateX(50%);
		-ms-transform: translateX(50%);
		-o-transform: translateX(50%);
		transform: translateX(50%);

	}

	.mobile-header .question-mark img.current {
		opacity: 1;
		-webkit-transition: 1.2s ease;
		-o-transition: 1.2s ease;
		transition: 1.2s ease;
	}

	.wrapper > div {
   		width: 47vw;
	    height: 47vw;
	    margin: 2vw 1vw 0 2vw;
	    padding: 5vw 0 0 5vw;
	    flex: none;
	}

	.wrapper > div:nth-child(2n + 2) {
		margin: 2vw 2vw 0 1vw;
	}

	.wrapper > div h6 {
    	font-family: AvenirHeavy;
    	font-size: 42px;
	}

	.wrapper > div.lightgrey p {
		font-size: 24px;
	}

	.content-container {
		height: auto;
	}

	.content-container > div {
		display: none;
		position: relative;
	}

	.content-container div.current-section {
		display: block;
	}

	.content-container > div > div {
		width: 100%;
		padding: 4vw !important;
	}

	.content-container > div > div:nth-child(1) > div {
		height: auto;
	}

	.go-home {
		height: 40px;
	    top: 4vw;
	    right: 4vw;
	}

	.title {
		display: flex;
	    align-items: flex-end;
	    width: 42vw;
	    height: calc(48vw - 40px);
	    margin-top: 40px;
	    padding: 0;
	    border: none;
	    margin-left: 2vw;
	}

	.title h2 {
    	font-size: 32px;
	}

	.media {
	    width: 48vw;
   		height: 48vw;
	}

	.content-container > div > div:nth-child(2) {
	    max-height: unset;
    	overflow: visible;
	}

	.content-container > div > div:nth-child(2) p {
	    margin-bottom: 16px;
	    font-family: AvenirMedium;
	    font-size: 32px;
	    line-height: 1.5;
	}

	.content-container > div > div:nth-child(2) div img {
		vertical-align: middle
	}

	.content-container > div > div:nth-child(2) div span {
		font-size: 28px;
	}

	.book_link.blue-text {
		font-size: 28px;
	}

	footer {
		height: auto !important;
	    max-height: unset;
	    padding-top: 0;
	    margin: 15px 0
	}

	footer > div {
	    position: relative;
	    height: auto;
	    width: 100%;
	    margin-left: 0;
	}

	footer  .nz-govt-container {
	    position: static;
	    height: auto;
	    width: 60%;
	    opacity: 1;
	    -webkit-transition: 0.66s ease;
	    -o-transition: 0.66s ease;
	    transition: 0.66s ease;
	    margin-left: 20%;
	}

	footer .nz-govt-container > img {
    	position: static;
    	-webkit-transform: translateY(0%);
    	-ms-transform: translateY(0%);
    	-o-transform: translateY(0%);
    	transform: translateY(0%);
	}

	/*--- Display None ---*/

	.flex-container {
		display: none;
	}

	.question-mark {
	    display: none;
	}

	.categories div {
		display: none;
	}
}