@font-face {
    font-family: regularfont;
    src: url(../fonts/Roboto-Regular.ttf);
}

@font-face {
    font-family: lightfont;
    src: url(../fonts/Roboto-Light.ttf);
}

@font-face {
    font-family: mediumfont;
    src: url(../fonts/Roboto-Medium.ttf);
}

@font-face {
    font-family: lightfont_italic;
    src: url(../fonts/Roboto-LightItalic.ttf);
}

a, a:hover {
	text-decoration: none;
}

/*-----Navigation-----*/


	/*--Logo--*/

	.deanslogo {
		cursor: pointer;
	}

	.iconlogo {
		position: absolute;
	    width: 17%;
	    right: 1%;
	    top: 2%;
	    opacity: 1;
		-webkit-transition: 0.5s;
		-o-transition: 0.5s;
		transition: 0.5s;
		z-index: 99;
	}

		.viewing-page-2 .iconlogo, .viewing-page-3 .iconlogo, .viewing-page-4 .iconlogo, .viewing-page-5 .iconlogo {
		position: absolute;
	    width: 17%;
	    right: 1%;
	    top: 2%;
	    opacity: 1;
		-webkit-transition: 1.5s;
		-o-transition: 1.5s;
		transition: 1.5s;
		z-index: 99;
	}

	.completelogo {
	    position: relative;
	    width: 20%;
	    float: right;
	    opacity: 0;
		-webkit-transition: 0.5s;
		-o-transition: 0.5s;
		transition: 0.5s;
		z-index: 99;
		margin-top: 1%;
		margin-right: 1%;
	}

	.viewing-page-1 .completelogo {
	    position: relative;
	    width: 20%;
	    float: right;
	    opacity: 1;
		-webkit-transition: 1.5s;
		-o-transition: 1.5s;
		transition: 1.5s;
		z-index: 99;
		margin-top: 1%;
		margin-right: 1%;
	}

	/*--Left nav--*/

	.leftnav, .submenu {
		position: fixed;
		top: 0;
		left: 0;
		min-height: 100vh;
		z-index: 9;
		width: 36px;
		-webkit-transition: background 1s .5s, opacity 0.5s;
		-o-transition: background 1s .5s, opacity 0.5s;
		transition: background 1s .5s, opacity 0.5s;
	}

	.submenu {
		width: 40px;
		left: 44px;
		opacity: 0;
		-webkit-transition: background 0.5s 0.5s, opacity 0.5s 0.5s;
		-o-transition: background 0.5s 0.5s, opacity 0.5s 0.5s;
		transition: background 0.5s 0.5s, opacity 0.5s 0.5s;
	}

	.submenu.spacer {
	    left: 36px;
	    width: 8px;
	}

	.submenu p {
		margin-bottom: 0px;
		color: transparent;
		-webkit-transition: 0.5s;
		-o-transition: 0.5s;
		transition: 0.5s;
	}

	.viewing-page-3 .submenu , .viewing-page-4 .submenu {
		opacity: 1;
		-webkit-transition: background 1s .5s, opacity 0.5s;
		-o-transition: background 1s .5s, opacity 0.5s;
		transition: background 1s .5s, opacity 0.5s;
	}

	.viewing-page-1 .leftnav, .viewing-page-3 .leftnav, .viewing-page-5 .leftnav, .viewing-page-3 .submenu, .viewing-page-4 .submenu.spacer {
		background: black;
		-webkit-transition: background 1s .5s, opacity 0.5s;
		-o-transition: background 1s .5s, opacity 0.5s;
		transition: background 1s .5s, opacity 0.5s;
	}

	.viewing-page-2 .leftnav, .viewing-page-4 .leftnav, .viewing-page-4 .submenu, .viewing-page-3 .submenu.spacer {
		background: white;
		-webkit-transition: background 1s .5s, opacity 0.5s;
		-o-transition: background 1s .5s, opacity 0.5s;
		transition: background 1s .5s, opacity 0.5s;
	}

	.leftnav .navlinks, .submenu .navlinks {
		position: absolute;
		width: calc(300px + 36px);
		top: 50.5%;
		white-space: nowrap;
		-webkit-transform: rotate(-90deg) translate(0%,-150px);
		-ms-transform: rotate(-90deg) translate(0%,-150px);
		-o-transform: rotate(-90deg) translate(0%,-150px);
		transform: rotate(-90deg) translate(0%,-150px);
		text-align: right;
		font-family: regularfont;
		font-size: 20px;
	}

	.submenu .navlinks {
		top: 44%;
	}

	.leftnav .navlinks div, .submenu .navlinks div {
		margin-left: 50px;
		margin-left: 15%;
	}

	.leftnav .navlinks.mob {
		display: none;
	}

	.leftnav div, .submenu div {
		margin-bottom: 0;
		display: inline-block;
		cursor: pointer;
		-webkit-transition: color 1s .5s, border-bottom 1s;
		-o-transition: color 1s .5s, border-bottom 1s;
		transition: color 1s .5s,  border-bottom 1s;
	}

	.submenu .navlinks div {
		border-bottom: 2px solid transparent;
    	margin-top: 14px;
    	-webkit-transition: border-bottom 1s;
		-o-transition: border-bottom 1s;
		transition: border-bottom 1s;
	}

	.submenu p {		
		border-bottom: 2px solid transparent;
    	-webkit-transition: border-bottom 1s;
		-o-transition: border-bottom 1s;
		transition: border-bottom 1s;
	}

	.submenu .navlinks div.seperator {
		-webkit-transform: translateX(-100%);
		-ms-transform: translateX(-100%);
		-o-transform: translateX(-100%);
		transform: translateX(-100%);
	}

	.viewing-page-3 .nav-paraparaumu {
		border-bottom: 2px solid white;
	}

	.viewing-page-4 .nav-mana {
		border-bottom: 2px solid black;
	}

	.viewing-page-1 .leftnav p, .viewing-page-3 .leftnav p, .viewing-page-3 .submenu p, .viewing-page-5 .leftnav p {		
		color: white;
		-webkit-transition: color 1s .5s, border-bottom 1s .25s;
		-o-transition: color 1s .5s, border-bottom 1s .25s;
		transition: color 1s .5s, border-bottom 1s .25s;
		margin-bottom: 0px;
	}

	.viewing-page-2 .leftnav p, .viewing-page-4 .leftnav p, .viewing-page-4 .submenu p {		
		color: black;	
		-webkit-transition: color 1s .5s, border-bottom 1s .25s;
		-o-transition: color 1s .5s, border-bottom 1s .25s;
		transition: color 1s .5s, border-bottom 1s .25s;
		margin-bottom: 0px;
	}

	/*.leftnav div:nth-child(2) {
		margin-left: 40px;
		margin-right: 40px;
	}*/

	.leftnav .navlinks div {
		border-bottom: 2px solid transparent;
    	margin-top: 4px;
	}

	.viewing-page-2 .leftnav .navlinks .what-container {
	border-bottom: 2px solid black;
	}
	
	.viewing-page-3 .leftnav .navlinks .who-container {
	border-bottom: 2px solid white;
	}

	.viewing-page-4 .leftnav .navlinks .who-container {
	border-bottom: 2px solid black;
	}	

	.viewing-page-5 .leftnav .navlinks .where-container {
	border-bottom: 2px solid white;
	}	

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

/*-----Banner-----*/

	.banner .maincontainer {
		position: absolute;
		top: 51%;
		width: 55%;
		left: 20%;
		-webkit-transform: translate(0%, -50%);
		-ms-transform: translate(0%, -50%);
		-o-transform: translate(0%, -50%);
		transform: translate(0%, -50%);
	}

	.banner .maincontainer span {
		font-family: regularfont;
		font-size: 45pt;
		opacity: 0;
		color: black;
		white-space: nowrap;
	}

	.banner .maincontainer span.bannertext {
		position: absolute;
		top: 0;
		left: 0;
		opacity: 1;
	}

	.banner .maincontainer span.bannertext p {
		margin-bottom: 0px;
	}

	.typed-cursor {
	    display: none;
	}

	.bannertext5, .bannertext6, .bannertext7, .bannertext8, .bannertext9 {
		display: none;
	}

/*---------------------------/
/*-----Paraparaumu Team-----*/

	.paraparaumuteam .teamcontainer, .manateam .teamcontainer {
		position: absolute;
		top: 63.25%;
		left: 20%;
		width: 70%;
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		transform: translateY(-50%);
		height: auto;
		overflow: visible;
	}

	.paraparaumuteam  h3 {
		font-family: regularfont;
		font-size: 45pt;
		margin-bottom: 0px;
		width: 100%;
		color: black;
		position: absolute;
		bottom: 105%;
		left: 0;
	}

	.scrollindicator.swiper-button-next {
		position: absolute;
		width: 3.35%;
		max-width: 45px;
		right: 0;
		-webkit-transform: rotate(180deg);
		-ms-transform: rotate(180deg);
		-o-transform: rotate(180deg);
		transform: rotate(180deg);	
		background-image: none;	
		height: auto;
		top: 50%;
	}

	.scrollindicator.swiper-button-prev {
		position: absolute;
		width: 3.35%;
		max-width: 45px;
		right: calc(100% + 55px);
		-webkit-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);	
		background-image: none;	
		height: auto;
		top: 50%;
		left: unset;
	}

	.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {
		opacity: 0 !important;
	}

	.teamslider {
		position: absolute;
		top: 50%;
		left: 20%;
		width: 80%;
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		transform: translateY(-50%);
		overflow: hidden;
	}

	.swiper-container {
		overflow: visible !important;
	}

	.swiper-slide.mobile {
		display: block;
	}
	
	.swiper-slide h4 {
		font-family: regularfont !important;
		/*font-size: 30pt;*/
		font-size: 1.5vw;
		color: black;
		margin-bottom: 0;
		opacity: 1;
		-webkit-transition: 1s;
		-o-transition: 1s;
		transition: 1s;
		white-space: nowrap;
		margin-top: 20px;
		position: relative;
	}

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

	.swiper-slide h5 {
		font-size: 1.8vw;
		position: relative;
	}

	.swiper-slide h4 a,
	.swiper-slide h5 a {
		position: absolute;
		top: 0;
		-webkit-transform: translateY(-5px);
		-ms-transform: translateY(-5px);
		-o-transform: translateY(-5px);
		transform: translateY(-5px);
		width: 10%;
	}

	.swiper-slide h4 a,
	.swiper-slide h5 a {
	    position: absolute;
	    top: 0;
	    -webkit-transform: translateY(-5px);
	    -ms-transform: translateY(-5px);
	    -o-transform: translateY(-5px);
	    transform: translateY(-5px);
	    width: 15%;
		right: 0;
	}

	.swiper-slide img.email-mobile {
		display: none;
	}

	.swiper-slide h4 a img,
	.swiper-slide h5 a img {
		width: 100%;
	}

	.swiper-slide h5 {
		font-family: lightfont !important;
		font-size: 25pt;
		color: black;
		opacity: 1;
		-webkit-transition: 1s;
		-o-transition: 1s;
		transition: 1s;
		white-space: nowrap;
	}

	.swiper-slide.swiper-slide-active h4, .swiper-slide.swiper-slide-active h5 {
		opacity: 1;
		-webkit-transition: 1s;
		-o-transition: 1s;
		transition: 1s;
	}

	.swiper-slide div {
		position: relative;
		width: 100%;
	}

	.swiper-slide img {
		width: 100%;
		display: block;
		opacity: 1;
		-webkit-transition: opacity 0.5s;
		-o-transition: opacity 0.5s;
		transition: opacity 0.5s;
	}

	.swiper-slide img.emailicon {
		opacity: 0;
		position: absolute;
		top: 50%;
		margin-bottom: 0;
		width: 30%;
		left: 50%;
		cursor: pointer;
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		-o-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		-webkit-transition: opacity 0.5s;
		-o-transition: opacity 0.5s;
		transition: opacity 0.5s;
		pointer-events: none;
	}

	.swiper-slide div {		
		outline: 0px solid transparent;
		-webkit-transition: 1s;
		-o-transition: 1s;
		transition: 1s;
	}

	.swiper-slide.tempview div {
		outline: 1px solid black;
		-webkit-transition: 1s;
		-o-transition: 1s;
		transition: 1s;
	}

	.swiper-slide.tempview img.emailicon {
		opacity: 1;
		-webkit-transition: opacity 0.5s;
		-o-transition: opacity 0.5s;
		transition: opacity 0.5s;
		pointer-events: all;
	}

	.swiper-slide.tempview img.gif {
		opacity: 0 !important;
		-webkit-transition: opacity 0.5s;
		-o-transition: opacity 0.5s;
		transition: opacity 0.5s;
	}

	.swiper-slide img.image {
		opacity: 0;
		-webkit-transition: 1s;
		-o-transition: 1s;
		transition: 1s;
		z-index: 4;
		display: none;
	}

	.swiper-slide img.gif {
		opacity: 1;
		-webkit-transition: 1s;
		-o-transition: 1s;
		transition: 1s;
		position: relative;
		top: 0;
		left: 0;
		width: 100%;
		z-index: -1;
	}

	.swiper-slide img.gif {		
		opacity: 1;
		-webkit-transition: 1s;
		-o-transition: 1s;
		transition: 1s;
	}

	.swiper-slide img.image {		
		opacity: 0;
		-webkit-transition: 1s;
		-o-transition: 1s;
		transition: 1s; 
	}

	.mana-indicator {
		display: none;
	}


	/*---------------------*/
	/*----- Mana Team -----*/

	.manateam  h3 {
		font-family: regularfont;
		font-size: 45pt;
		margin-bottom: 0px;
		width: 100%;
		color: white;
		position: absolute;
		bottom: 105%;
		left: 0;
	}

	.mana .swiper-slide h4, .mana .swiper-slide h5 {
		color: white;
	}

	.mana .swiper-slide.tempview div {
		outline: 1px solid white;
	}


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