/*universal*/
	@import url('https://fonts.googleapis.com/css?family=Amatic+SC:400,700');
	@import url('https://fonts.googleapis.com/css?family=Lato:400,700');

	body{
		background-color:#ffffe5;
		font-family:'Amatic SC', cursive;
	}

	.nav{
		position:fixed;
		z-index: 11;
		background-color:rgba(0, 0, 100,0.8);
		display:none;

	}

	.nav-item{
		width: 120px;
		text-decoration: none;

	}

	.nav a {
		padding: 10px 60px;
	}

	.nav-item a {
		font-size:1.5em;
	}

	.nav-link {
		color:white;
	}

/*landing*/
	.landing{
		height:120vh;
	}

	.landinglogo{
		position:absolute;
		z-index: 5;
		padding:20vh 0 0 35vw;
	}

	.landingcopy{
		position:absolute;
		line-height: 40px;
		text-align:right;
		color:white;
		padding:60vh 0 0 45vw;
		font-size:5em;
		z-index:5;
	}

	.landingsub{
		top:0;
		font-size:0.6em;
	}

	.landingshape1{
		position:absolute;
		padding: 50vh 0 0 70vw;
		animation-name: floating;
    	animation-iteration-count: infinite;
    	animation-duration:2s;
    	animation-timing-function: :ease-in-out;
	}

	.landingshape2{
		position:absolute;
		padding: 79vh 0 0 60vw;
		animation-name: floating;
		animation-iteration-count: infinite;
    	animation-duration:2s;
    	animation-delay:1s;
    	animation-timing-function: :ease-in-out;
	}

/*about*/
	.about{
		height:220vh;
	}

	.aboutcopy{
		color:#a8848b;
		font-family:'lato';
		font-weight:400;
		position:absolute;
		text-align:center;
		width:80vw;
		font-size:1.5em;
		padding:20vh 0 0 15vw;

	}

	.aboutshape1{
		position:absolute;
		padding: 15vh 0 0 5vw;

		animation-name: floating;
    	animation-iteration-count: infinite;
    	animation-duration:2s;
    	animation-timing-function: :ease-in-out;
	}

	.aboutshape2{
		position:absolute;
		padding:3vh 0 0 60vw; 
		animation-delay:1s;
	}

	.aboutshape3{
		position:absolute;
		width:100%;
		margin:70vh 0 0 -3vw;
	}

	.axolotl-gif{
		width:50%;
		z-index:3;
		position:absolute;
		margin:60vh 0 0 50vw;
	}

	.about-copyblock{
		position:absolute;
		margin:100vh 0 0 10vw;
	}

	.abouttitle{
		color:white;
		font-size:10em;
		line-height: 20vh;
	}

	.aboutbody1{
		font-family:'lato';
		font-weight: 400;
		width:70%;
		color:#8a7a5e;
		font-size:2.7em;
		line-height:8vh;
		animation-delay: 1s;
	}

	.aboutbody2{
		font-family:'lato';
		line-height:5vh;
		font-weight:400;
		width:43%;
		text-align:right;
		color:#ffffff;
		font-size:1.5em;
		margin-left:30vw;
		animation-delay: 3s;

	}

/*service*/
	.services {
		/*background-color:rgba(0,255,0,0.2);*/
		height:200vh;
	}

	.serviceshape1{
		position:absolute;
		padding:0 0 0 30vw;

		animation-name: floating;
    	animation-iteration-count: infinite;
    	animation-duration:2s;
    	animation-timing-function: :ease-in-out;
	}


	.serviceshape2{
		position:absolute;
		padding:15vh 0 0 60vw;

		animation-name: floating;
    	animation-iteration-count: infinite;
    	animation-duration:5s;
    	animation-delay:0.4s;
    	animation-timing-function: :ease-in-out;
	}

	.serviceshape3{
		position:absolute;
		padding:45vh 0 0 10vw;
		z-index:-1;

		animation-name: floating;
    	animation-iteration-count: infinite;
    	animation-duration:2s;
    	animation-timing-function: :ease-in-out;
	
	}

	.serviceshape4{
		position:absolute;
		width:16%;
		margin:92vh 0 0 80vw;
		z-index:-1;

		animation-name: floating;
    	animation-iteration-count: infinite;
    	animation-duration:2s;
    	animation-timing-function: :ease-in-out;
	
	}

	.serviceshape5{
		position:absolute;
		width:10%;
		margin:145vh 0 0 5vw;
		z-index:-1;

		animation-name: floating;
    	animation-iteration-count: infinite;
    	animation-duration:2s;
    	animation-timing-function: :ease-in-out;
	
	}

	.serviceshape6{
		position:absolute;
		padding:50vh 0 0 55vw;
	}

	.serviceshape7{
		position:absolute;
		width:17%;
		margin:100vh 0 0 10vw;
	}

	.serviceshape8{
		position:absolute;
		margin:150vh 0 0 55vw;
	}


	.serviceheader{
		padding: 10vh 0 0 0;
		color:#94a298;
		text-align:center;
		font-size:5em;
	}

	.servicetitle1{
		padding: 15vh 0 0 15vw;
		color:#a7848b;
		font-size:4.5em;
	}

	.servicetitle2{
		padding: 15vh 0 0 60vw;
		color:#a7848b;
		font-size:4.5em;

	}

	.servicetitle3{
		padding: 10vh 0 0 10vw;
		color:#a7848b;
		font-size:4.5em;

	}

	.servicebody1{
		margin: 0 0 0 15vw;
		color:#94a399;
		font-family:'lato';
		font-size:1.4em;
		line-height: 2em;
		width:60%;
		text-align:justify;
		animation-delay:1s;

	}

	.servicebody2{
		margin: 0 0 0 20vw;
		color:#94a399;
		font-family:'lato';
		font-size:1.4em;
		line-height:2em;
		width:60%;
		text-align:right;
		animation-delay:1s;

	}

	.servicebody3{
		margin: 0 0 0 15vw;
		color:#94a399;
		font-family:'lato';
		font-size:1.4em;
		line-height:2em;
		width:60%;
		text-align:justify;
		animation-delay:1s;

	}

/*works*/
	.works{
		/*background-color:rgba(255,0,0,0.2);*/
		height:160vh;
	}

	.worksheader{
		position:absolute;
		padding: 2vh 0 0 15vw;
		color:#a8858c;
		font-weight: 700;
		font-size:10em;
		z-index: 3;
	}

	.workshape1{
		position:absolute;
		padding:13vh 0 0 10vw;
		animation-name: floating;
    	animation-iteration-count: infinite;
    	animation-duration:2s;
    	animation-timing-function: :ease-in-out;
	}

	.worksimg1{
		position:absolute;
		width:50%;
		margin: 0vh 0 0 38vw;
	}

	.worksimg2{
		position:absolute;
		width:30%;
		margin: 45vh 0 0 19vw;
	}

	.worksimg3{
		position:absolute;
		width:35%;
		margin: 60vh 0 0 44vw;
	}

	.worksimg4{
		position:absolute;
		width:30%;
		margin: 85vh 0 0 21vw;
	}

	.worksimg5{
		position:absolute;
		width:20%;
		margin: 90vh 0 0 72vw;
	}

	.worksimg6{
		position:absolute;
		width:30%;
		margin:105vh 0 0 47vw;
	}

/*people*/
	.people{/*
		background-color:rgba(100,255,25, 0.2);*/
		height:200vh;
	}

	.peopleheader{
			position:absolute;
			margin: 2vh 0 0 55vw;
			color:#a8858c;
			font-weight: 700;
			font-size:8em;
			z-index: 3;
	}

	.peopleshape1{
		position:absolute;
		width:10%;
		margin: 4vh 0 0 50vw;
			animation-name: floating;
    	animation-iteration-count: infinite;
    	animation-duration:2s;
    	animation-timing-function: :ease-in-out;
	
		
	}

	.people1{
		position:absolute;
		width:40%;
		margin: 10vh 0 0 12vw;

	}

	.people2{
		position:absolute;
		width:40%;
		margin: 40vh 0 0 42vw;
	}

	.people3{
		position:absolute;
		width:40%;
		margin: 70vh 0 0 12vw;
	}

	.people4{
		position:absolute;
		width:40%;
		margin: 100vh 0 0 42vw;
	}

	.people5{
		position:absolute;
		width:40%;
		margin: 130vh 0 0 12vw;
	}

	img.people5:hover {
		opacity:0.5;
		transition: 1s;
	}

/*contact*/
	.contacts{
		/*background-color:rgba(0,255,0,0.2);*/
		height:130vh;
	}

	.contactheader{
		position:absolute;
		margin: 2vh 0 0 20vw;
		color:#a8858c;
		font-weight: 700;
		font-size:6em;
		z-index: 3;
	}

	.contactaddress{
		position:absolute;
		font-size:5em;
		line-height: 1em;
		color:white;
		text-align:center;
		width:70vw;
		margin:53vh 0 0 15vw;
	}

	.contactfacebook{
		position:absolute;
		color:white;
		font-size:2em;
		margin: 80vh 0 0 50vw;
	}

	.contactnumber{
		position:absolute;
		color:white;
		font-size:2em;
		margin:93vh 0 0 50vw;
	}

	.contactemail{
		position:absolute;
		color:white;
		font-size:2em;
		margin:105vh 0 0 50vw;
	}

	.contactshape1{
		position:absolute;
		width:10%;
		margin: 5vh 0 0 15vw;
	}

	.contactshape2{
		position:absolute;
		width:90%;
		margin:20vh 0 0 5vw;
		z-index:-1;
	}

	.contactshape3{
		position:absolute;
		width:25%;
		margin:30vh 0 0 36vw;
	}

	.contactshape4{
		position:absolute;
		margin:80vh 0 0 38vw;
		width:4%;
		z-index:3;
	}

	.contactshape5{
		position:absolute;
		width:4%;
		margin:93vh 0 0 38vw;
	}

	.contactshape6{
		position:absolute;
		width:4%;
		margin:105vh 0 0 38vw;
	}

/*footer*/
	.footer{
	}

	.footerline{
		list-style-type: none;
	    margin: 0 10vh 0 0;
	    padding: 0 0 0 0;
	    overflow: hidden;
	}
	.leftfield {
		float:left;
		margin: 03vh 0 0 2vw;
		font-size:1.5em;
	    color:#a7848b;
	}


	.rightfield  {
		float:right;
	}

	.footerline a{
		display: block;
	    color:#a7848b;
	    font-size:1.5em;
	    padding:16px;
	    text-decoration: none;
	}

/*animation*/

@keyframes floating {
    from { transform: translate(10px,  0px); }
    65%  { transform: translate(0, 15px); }
    to   { transform: translate(10px, 0px); }    
}