body.viewing-page-1, body.viewing-page-3, body.viewing-page-4, body.viewing-page-5 {
	background: white;
	-webkit-transition: background 1s .5s;
	-o-transition: background 1s .5s;
	transition: background 1s .5s;
}

body.viewing-page-2 {
	background: black;
	-webkit-transition: background 1s .5s;
	-o-transition: background 1s .5s;
	transition: background 1s .5s;
}


.section {
	height: 100vh;
	width: 100%;
	position: relative;
	overflow: hidden;
}

.deansaltlogo {
	position: absolute;
	top: 2%;
	left: 46px;
	width: 7%;
	opacity: 1;
	-webkit-transition: 0.75s;
	-o-transition: 0.75s;
	transition: 0.75s;
}

.deansaltlogo.inverted {
	opacity: 0;
	-webkit-transition: 0.75s;
	-o-transition: 0.75s;
	transition: 0.75s;
}

.inverted .deansaltlogo {
	opacity: 0;
	-webkit-transition: 0.75s;
	-o-transition: 0.75s;
	transition: 0.75s;
}

.inverted .deansaltlogo.inverted {
	opacity: 1;
	-webkit-transition: 0.75s;
	-o-transition: 0.75s;
	transition: 0.75s;
}

.viewing-page-1.inverted .deansaltlogo {
	opacity: 0;
	-webkit-transition: 0.75s;
	-o-transition: 0.75s;
	transition: 0.75s;
}

.viewing-page-1.inverted .deansaltlogo.inverted {
	opacity: 1;
	-webkit-transition: 0.75s;
	-o-transition: 0.75s;
	transition: 0.75s;
}

.viewing-page-2 .deansaltlogo.inverted {
	opacity: 1;
	-webkit-transition: 0.75s;
	-o-transition: 0.75s;
	transition: 0.75s;
}

.viewing-page-3 .deansaltlogo, .viewing-page-4 .deansaltlogo {
	opacity: 0 !important;
	-webkit-transition: 0.75s;
	-o-transition: 0.75s;
	transition: 0.75s;
}

.inverted.viewing-page-5 .deansaltlogo {
	opacity: 1;
	-webkit-transition: 0.75s;
	-o-transition: 0.75s;
	transition: 0.75s;
}

.inverted.viewing-page-5 .deansaltlogo.inverted {
	opacity: 0;
	-webkit-transition: 0.75s;
	-o-transition: 0.75s;
	transition: 0.75s;
}



.inverted.viewing-page-1 {
	background: black;
}

.inverted .banner .maincontainer span {
	color: white;
}

.viewing-page-1.inverted .leftnav {
	background: white;
}

.viewing-page-1.inverted .leftnav p {
	color: black;
}

/*----- Contact -----*/

.contact .mana-header {
	display: none;
}

.contactoptions {
    left: 20%;
	/*width: 80%;*/
	display: block;
	/*flex-flow: column;*/
	top: 33.75vh;
	position: absolute;
}

.contactoptions h3 {
	font-family: regularfont;
	color: black;
	font-size: 45pt;
	width: 100%;
	text-align: left;
	margin: auto;
	cursor: pointer;
	position: relative;
	margin-bottom: 75px;
	line-height: 1;
	z-index: 1;	
	-webkit-transition: 0.5s 0.25s;
	-o-transition: 0.5s 0.25s;
	transition: 0.5s 0.25s;
}

.contactoptions h3.active {
	color: white;
	-webkit-transition: 0.5s 0.75s;
	-o-transition: 0.5s 0.75s;
	transition: 0.5s 0.75s;
}

.contactoptions h3.notactive {
	pointer-events: none;
}

.contactoptions h3 img {
	width: 45px;
	opacity: 0;
	-webkit-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s;
	position: absolute;
	left: 125%;
	top: 50%;
	-webkit-transform: rotate(180deg) translateY(-50%);
	-ms-transform: rotate(180deg) translateY(-50%);
	-o-transform: rotate(180deg) translateY(-50%);
	transform: rotate(180deg) translateY(-50%);
	-webkit-transform-origin: top left;
    -moz-transform-origin: top left;
    -ms-transform-origin: top left;
    -o-transform-origin: top left;
    transform-origin: top left;
}

.contactoptions h3 img.white {
	-webkit-transform: rotate(0deg) translateY(-50%);
	-ms-transform: rotate(0deg) translateY(-50%);
	-o-transform: rotate(0deg) translateY(-50%);
	transform: rotate(0deg) translateY(-50%);
	right: 110%;
	left: unset;
}

.contactoptions h3.active img.white {
	opacity: 1;
}

.contactoptions h3.hovered img.black {
	opacity: 1;
	-webkit-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s;
}

.contact .email-img {
	display: none;
}

.enquiry_form, .kapiti, .mana_office {
	position: absolute;
	top: 0;
	left: 100%;
	width: 90%;
	height: 100%;	
	-webkit-transition: left 1.5s ease;
	-o-transition: left 1.5s ease;
	transition: left 1.5s ease;
	background: black;
}

.enquiry_form.current, .kapiti.current,  .mana_office.current {
	left: 10%;
	-webkit-transition: left 1.5s ease;
	-o-transition: left 1.5s ease;
	transition: left 1.5s ease;
}

.details {
	position: absolute;
	top: 65%;
	/*width: 70%;*/
	/*right: 15%;*/
	left: 36%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
	z-index: 9;
	opacity: 1;
	-webkit-transition: 1s;
	-o-transition: 1s;
	transition: 1s;
}

.details.notactive {
	opacity: 0;
	-webkit-transition: 1s;
	-o-transition: 1s;
	transition: 1s;
}

.fields {
	position: absolute;
	top: 63%;
	left: 36%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
	z-index: 9;
	background: white;
	padding: 1.25% 4.25% 0% 4.25%;
	width: 40%;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}

.fields.sent {
	background: black;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}

.details a, .details a:hover, .details a:focus, .details a:active, .details h6 {
	color: white;
	font-family: regularfont;
	font-size: 28pt;
	width: 100%;
	margin-bottom: 40px;
	text-decoration: none;
	line-height: 1.35;
}

.details h6 .emaillink, .details h6 span {
	font-size: 21pt;
	cursor: pointer;
}

.email-text span img {
	width: 20%;
	position: relative;
	left: -10px;
}

.fields input, .fields input:hover, .fields input:focus, .fields input:active {
	color: black;
	font-family: regularfont;
	background: white;
	border: none;
	outline: none;
	font-size: 28pt;
	width: 100%;
	margin-bottom: 3%;
	opacity: 1;
}

.fields input.validate, .fields textarea.validate {
	outline: 1px solid red;
}

.fields input.name {
	margin-top: 10%;
}

.fields input::-webkit-input-placeholder { 
  	color: black;
	font-family: regularfont;
	font-size: 28pt;
	opacity: 1;
}

.fields input::-moz-placeholder { 
  	color: black;
	font-family: regularfont;
	font-size: 28pt;
	opacity: 1;
}

.fields input:-ms-input-placeholder { 
  	color: black;
	font-family: regularfont;
	font-size: 28pt;
	opacity: 1;
}

.fields input:-moz-placeholder { 
  	color: black;
	font-family: regularfont;
	font-size: 28pt;
	opacity: 1;
}

.fields textarea, .fields textarea:hover, .fields textarea:focus, .fields textarea:active {
	color: black;
	font-family: regularfont;
	background: white;
	border: none;
	outline: none;
	font-size: 20pt;
	width: 100%;
	margin-bottom: 20px;
	min-height: 14vh;
	opacity: 1;
}

.fields textarea::-webkit-input-placeholder { 
  	color: black;
	font-family: regularfont;
	font-size: 28pt;
	opacity: 1;
}

.fields textarea::-moz-placeholder { 
  	color: black;
	font-family: regularfont;
	font-size: 28pt;
	opacity: 1;
}

.fields textarea:-ms-input-placeholder { 
  	color: black;
	font-family: regularfont;
	font-size: 28pt;
	opacity: 1;
}

.fields textarea:-moz-placeholder { 
  	color: black;
	font-family: regularfont;
	font-size: 28pt;
	opacity: 1;
}

.fields.sent input, .fields.sent textarea {
	opacity: 0;
}

.submit {
	top: 25px;
	color: black;
	font-family: regularfont;
	font-size: 28pt;
	cursor: pointer;
	position: absolute;
	right: 25px;
	width: 15%;
}

.contact div img.contactclose {
	position: absolute;
	bottom: 0;
	right: 100%;
	width: 45px;
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	-webkit-transition: 1.5s;
	-o-transition: 1.5s;
	transition: 1.5s;
}

.contact div img.contactclose.current {
	opacity: 1;
	pointer-events: all;
	-webkit-transition: 1.5s;
	-o-transition: 1.5s;
	transition: 1.5s;
}

.mob.contactclose {
	display: none;
}

.slidein .enquiry_form {
	top: 0;
	left: 100%;
	width: 100%;
}

.slidein .enquiry_form.active {
	left: 0;
}

.envolope {
    position: absolute;
    width: 100%;
    left: 50%;
    top: 50%;
    opacity: 0;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
    pointer-events: none;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.sent .envolope {
    opacity: 1;
    pointer-events: all;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;	
    height: 100%;
}

.envolope img {
	width: 100%;
	height: 100%;
}

.envolope p {
	position: absolute;
	left: 50%;
	top: 15%;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	transform: translateX(-50%);
	color: black;
	font-family: regularfont;
	font-size: 24pt;
}

.messagelocation {
    width: 100%;
    position: relative;
    text-align: center;
    background: black;
	margin-bottom: 20px;
}

.messagelocation p, .messagelocation div, .messagelocation div input {
	display: inline-block;
	width: auto;
	position: relative;
}

.fields .messagelocation input:checked {
	pointer-events: none;
}

.fields .messagelocation input, .fields .messagelocation input:hover, .fields .messagelocation input:focus, .fields .messagelocation input:active {
	color: black;
	font-family: regularfont;
	background: unset;
	width: auto;
	margin-bottom: 0%;
	opacity: 1;
	opacity: 0;
	pointer-events: none;
	display: none;
}

.messagelocation  div.check.first {
	margin: 0 35px;
}

.messagelocation div.check label {
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
	right: 100%;
	width: 17px;
	cursor: pointer;
}

.messagelocation div.check label img {
	width: 100%;
	position: absolute;
	top: 50%;
	left: 0;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
}

.messagelocation label img {
	display: block;
}

.messagelocation label img.tick {
	display: none;
}

.messagelocation input[type=checkbox]:checked + label img {
	display: none;
} 

.messagelocation input[type=checkbox]:checked + label img.tick {
	display: block;
} 



.messagelocation p {
	margin: 5px 0;
	color: white;
	font-family: lightfont;
}

.messagelocation div p {
	margin-left: 5px;
}

.mobilearrow {
	display: none;
}

.specialise .maincontainer a {
    font-family: lightfont;
    color: white;
    font-size: 24pt;
    font-size: 1.55vw;
    line-height: 1;
    cursor: pointer;
}
.specialise .maincontainer a p {
    display: inline-block;
    margin-bottom: 0;
    -webkit-transition: 0.6s;
    -o-transition: 0.6s;
    transition: 0.6s;
}
.specialise .maincontainer p:hover {
    color: rgb(38,187,214);
    -webkit-transition: 0.6s;
    -o-transition: 0.6s;
    transition: 0.6s;
}

.specialise .maincontainer a img {
    width: 1.75%;
    margin-right: 15px;
}

.specialise .maincontainer h6 {
    font-family: lightfont;
    color: white;
    font-size: 22pt;
    line-height: 1;
    margin-bottom: 25px;
    cursor: pointer;
}


@media only screen and (max-width: 1625px) {

	.banner .maincontainer span {
		font-size: 3.7vw;
	}

	.specialise .maincontainer h3 {
		font-size: 3.7vw;
	}

	.specialise .maincontainer h2 {
		font-size: 1.975vw;
	}

	.paraparaumuteam h3, .manateam h3, .contactoptions h3 {
		font-size: 3.8vw;
	}

	.swiper-slide h4 {
		font-size: 1.5vw;
	}

	.swiper-slide h4 span {
		font-size: 1.5vw;
	}

	.swiper-slide h5 {
		font-size: 1.5vw;
	}

	.details a, .details a:hover, .details a:focus, .details a:active, .details h6 {
		font-size: 2.3vw;
	}

	.details h6 .emaillink, .details h6 span {
		font-size: 21pt;
		cursor: pointer;
	}

	.fields input, .fields input:hover, .fields input:focus, .fields input:active {
		font-size: 2vw;
	}

	.fields input::-webkit-input-placeholder { 
		font-size: 2vw;
	}

	.fields input::-moz-placeholder { 
		font-size: 2vw;
	}

	.fields input:-ms-input-placeholder { 
		font-size: 2vw;
	}

	.fields input:-moz-placeholder { 
		font-size: 2vw;
	}

	.fields textarea, .fields textarea:hover, .fields textarea:focus, .fields textarea:active {
		font-size: 1.8vw;
	}

	.fields textarea::-webkit-input-placeholder { 
		font-size: 2vw;
	}

	.fields textarea::-moz-placeholder { 
		font-size: 2vw;
	}

	.fields textarea:-ms-input-placeholder { 
		font-size: 2vw;
	}

	.fields textarea:-moz-placeholder { 
		font-size: 2vw;
	}


}

@media only screen and (max-width: 1150px) {
	.swiper-slide h4 {
		font-size: 1.65vw;
	}

	.swiper-slide h4 span {
		font-size: 1.4vw;
	}

	.swiper-slide h5 {
		font-size: 1.4vw;
	}
}