/*this is setting*/

	*, *:after, *:before {
	  -webkit-box-sizing: border-box;
	  -moz-box-sizing: border-box;
	  box-sizing: border-box;
	}

	body {
		width: 100%;
	/*	background-color: #f5f5f5;*/
		background-color: #c5c5c5;
		margin: 0 auto;
	}

	header {
		height: 80px;
		width: 100%;
		background-color: #EFEFEF;
		position: fixed;
		z-index: 100;
	}

	footer {
		height: 70px;
		background-color: #34485C;
	}

	section {
		padding-top: 80px;
	}

	nav {
		z-index: 100;
	}

	a {
	  text-decoration: none;
	}

	.container {
		position: relative;
		width: 100%;
		margin: 0 auto;
	}

	.row {	
		width: 1140px;
		margin: 0 auto;
	}

	.logo {
		height: 70px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateX(-50%) translateY(-50%);
	}

/*this is fonts and images*/

	h1 {
		font-family: 'Source Sans Pro', sans-serif;
		font-weight: 300;
		font-size: 20px;
		line-height: 1.75;
		letter-spacing: 1.2px;
		text-align: left;
		color: #efefef;
		margin: 20px 0;
	}

	h2 {
		font-family: 'Source Sans Pro', sans-serif;
		font-size: 50px;
		font-weight: 400;
		line-height: 1.3;
		letter-spacing: 1.8px;
		text-align: left;
		color: #f5f5f5;
		margin: 0;
	}

	h3 {
		width: 380px;
		font-family: 'Source Sans Pro', sans-serif;
		font-weight: 300;
		font-size: 30px;
		line-height: 0.1;
		letter-spacing: 1px;
		text-align: left;
		color: #f5f5f5;
	}

	h4 {
		width: 380px;
		object-fit: contain;
		font-family: 'Source Sans Pro', sans-serif;
		font-size: 17px;
		font-weight: 200;
		line-height: 1.59em;
		letter-spacing: 1.3px;
		text-align: left;
		color: #f5f5f5;
	}

	h5 {
		height: 28px;
		width: 460px;
		color: #B4BDC2;
		font-family: 'Source Sans Pro', sans-serif;
		font-weight: 300;
		font-size: 18px;
		letter-spacing: 1px;
		line-height: 28px;
		text-align: center;
		margin: 0 auto;
		padding: 1em;
	}

	.details h5 {
		height: 28px;
		width: 460px;
		color: #f5f5f5;
		font-family: 'Source Sans Pro', sans-serif;
		font-weight: 300;
		font-size: 18px;
		letter-spacing: 1px;
		line-height: 28px;
		text-align: center;
		margin: 0 auto;
		padding: 1em;
	}

	h6 {
		width: 380px;
		object-fit: contain;
		font-family: 'Source Sans Pro', sans-serif;
		font-size: 17px;
		font-weight: 300;
		letter-spacing: 1.3px;
		text-align: left;
		color: #f5f5f5;
		margin: 0;
	}

	img {
		width: 100%;
		height: auto;
		display: inline-block;
	}

/*this is homepage*/

	.hero {
		height: 700px;
		background-image: url("../img/img-hero-pattern.png@2x.png");
		background-repeat: no-repeat;
		background-size: cover;
		background-color: #34485C;
		/*background-color: #34485C;
		background: -webkit-linear-gradient(right, #243B55, #34485C);
		background: -o-linear-gradient(right, #243B55, #34485C);
		background: linear-gradient(to left, #243B55, #34485C);*/
	}

	.hero-animation {
		margin: 0 auto;
	    float: none;
	    padding-top: 80px;
	    padding-left: 180px;
	}

	.hero-logo-typein {
		z-index: 100;
	}

	.om {
		height: 550px;
		background-image: url("../img/img-omen.jpg@2x.jpg");
		background-size: cover;
		background-repeat: no-repeat;
	}

	.mp {
		height: 550px;
		background-image: url("../img/img-marinetopia.jpg@2x.jpg");
		background-size: cover;
		background-repeat: no-repeat;
	}

	.dw {
		height: 550px;
		background-image: url("../img/img-drawall.jpg@2x.jpg");
		background-size: cover;
		background-repeat: no-repeat;
	}

	.aau {
		height: 550px;
		background-image: url("../img/img-aau.jpg@2x.jpg");
		background-size: cover;
		background-repeat: no-repeat;
	}

	.pe {
		height: 550px;
		background-image: url("../img/img-petitclay.jpg@2x.jpg");
		background-size: cover;
		background-repeat: no-repeat;
	}

	.mo {
		height: 550px;
		background-image: url("../img/img-motion.jpg@2x.jpg");
		background-size: cover;
		background-repeat: no-repeat;
	}

	.po {
		height: 550px;
		background-image: url("../img/img-3d.jpg@2x.jpg");
		background-size: cover;
		background-repeat: no-repeat;
	}

	.ct {
		height: 550px;
		background-image: url("../img/img-citystickers.jpg@2x.jpg");
		background-size: cover;
		background-repeat: no-repeat;
	}

	.info {
		height: 550px;
		background-image: url("../img/img-info.jpg@2x.jpg");
		background-size: cover;
		background-repeat: no-repeat;
	}

	.om-project-img {
		height: 485px;
		background-image: url("../img/img-omen-home.png.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		float: none;
		margin: 0 auto;
	}

	.mp-project-img {
		height: 550px;
		background-image: url("../img/img-marinetopia-home.png.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		float: none;
		margin: 0 auto;
	}

	.dw-project-img {
		width: 596px;
		height: 550px;
		background-image: url("../img/img-drawall-home.png.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		float: none;
		margin: 0 auto;
	}

	.aau-project-img {
		height: 550px;
		background-image: url("../img/img-auu-home.png.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		float: none;
		margin: 0 auto;
	}

	.pe-project-img {
		width: 900px;
		height: 550px;
		background-image: url("../img/img-petitclay-home.png.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		float: none;
		margin: 0 auto;
	}

	.mo-project-img {
		width: 800px;
		height: 550px;
		background-image: url("../img/img-motion-home.png.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		float: none;
		margin: 0 auto;
	}

	.po-project-img {
		width: 596px;
		height: 550px;
		background-image: url("../img/img-3d-home.png.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		float: none;
		margin: 0 auto;
	}

	.ct-project-img {
		width: 800px;
		height: 550px;
		background-image: url("../img/img-citystickers-home.png.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		float: none;
		margin: 0 auto;
	}

	.info-project-img {
		width: 596px;
		height: 550px;
		background-image: url("../img/img-info-home.png.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		float: none;
		margin: 0 auto;
	}

	.details {
		-webkit-align-items: center;
		align-items: center;
		-webkit-flex-direction: column;
		flex-direction: column;
		-webkit-justify-content: center;
		justify-content: center;
		display: -webkit-box; 
		display: -ms-flexbox; 
		display: -webkit-flex;
		display: flex;
	}

	.details {
		width: 100%;
		height: 550px;
		opacity: 0;
		z-index: 10;
		position: relative;
		background-color: rgba(26, 40, 55, 0.75);
		transition: all .4s;
	}

	.details img {
		width: 200px;
	}

	.container > a {
	    position: absolute;
	    width: 100%;
	    top: 0px;
	}

	.details:hover  {
		opacity: 1;
		transition: all .4s;
	}

	.red-box {
		width: 15px;
		height: 4px;
		margin: 30px 0 15px 0;
		background-color: #E25154;
	}

	.red-box-2 {
		width: 20px;
		height: 6px;
		background-color: #E25154;
		margin: 15px 0 15px 0;

	    /* For Safari 3.1 to 6.0 */
	    -webkit-transition-property: width;
	    -webkit-transition-duration: 1s;
	    -webkit-transition-timing-function: linear;
	    -webkit-transition-delay: 0s;
	    /* Standard syntax */
	    transition-property: width;
	    transition-duration: 1s;
	    transition-timing-function: linear;
	    transition-delay: 0s;
	}

	.red-box-2:hover {
	    width: 130px;
		height: 6px;
	}

	.red-box-3 {
		width: 20px;
		height: 6px;
		background-color: #E25154;
		margin: 15px 0 15px 0;

	    /* For Safari 3.1 to 6.0 */
	    -webkit-transition-property: width;
	    -webkit-transition-duration: 1s;
	    -webkit-transition-timing-function: linear;
	    -webkit-transition-delay: 0s;
	    /* Standard syntax */
	    transition-property: width;
	    transition-duration: 1s;
	    transition-timing-function: linear;
	    transition-delay: 0s;
	}

	.red-box-3:hover {
	    width: 170px;
		height: 6px;
	}

	.linkedin {
		width: 40px;
		margin: 10px 0;
	}

/*this is the details of the projects*/

	.box-test {
		width: 100%;
		height: 550px;
		background-color: #ccc;
	}

	.om-hero {
		height: 550px;
		background-image: url("../img/img-omen.jpg@2x.jpg");
		background-size: cover;
		background-repeat: no-repeat;
	}

	.mp-hero {
		height: 550px;
		background-image: url("../img/img-marinetopia.jpg@2x.jpg");
		background-size: cover;
		background-repeat: no-repeat;
	}

	.dw-hero {
		height: 550px;
		background-image: url("../img/img-drawall.jpg@2x.jpg");
		background-size: cover;
		background-repeat: no-repeat;
	}

	.aau-hero {
		height: 550px;
		background-image: url("../img/img-aau.jpg@2x.jpg");
		background-size: cover;
		background-repeat: no-repeat;
	}

	.pe-hero {
		height: 550px;
		background-image: url("../img/img-petitclay.jpg@2x.jpg");
		background-size: cover;
		background-repeat: no-repeat;
	}

	.mo-hero {
		height: 550px;
		background-image: url("../img/img-motion.jpg@2x.jpg");
		background-size: cover;
		background-repeat: no-repeat;
	}

	.po-hero {
		height: 550px;
		background-image: url("../img/img-3d.jpg@2x.jpg");
		background-size: cover;
		background-repeat: no-repeat;
	}

	.ct-hero {
		height: 550px;
		background-image: url("../img/img-citystickers.jpg@2x.jpg");
		background-size: cover;
		background-repeat: no-repeat;
	}

	.info-hero {
		height: 550px;
		background-image: url("../img/img-info.jpg@2x.jpg");
		background-size: cover;
		background-repeat: no-repeat;
	}

	.projects {
		-webkit-align-items: center;
		align-items: center;
		-webkit-flex-direction: column;
		flex-direction: column;
		-webkit-justify-content: center;
		justify-content: center;
		display: -webkit-box; 
		display: -ms-flexbox; 
		display: -webkit-flex;
		display: flex;
	}

	.projects {
		width: 100%;
		height: 550px;
		opacity: 0;
		position: relative;
		top: -550px;
		background-color: rgba(255, 255, 255, 0);
		transition: all 0s;
	}

	.projects img {
		width: 200px;
	}



@media only screen and (min-width: 1140px) {
		
	.row {
		width: 1140px;
		margin: 0 auto;
	}

 	.menu-photo {
    	width: 360px;
    	top: 70px;
    	left: 3%;
  	}

	.menu-aboutme {
  	    top: 30px;
  	    left: 36%;
 	}

	.menu-work {
  	    top: 30px;
  	    left: 70%;
 	}

 	.menu-aboutme-mobile {
	    display: none;
	}

}

@media only screen and (min-width: 760px) and (max-width: 1140px) {
	
	/*this is homepage*/

		.row {
			width: 720px;
		}

		.button_container {
	  		top: 23px;
	  		right: 20px;
		}

	 	.menu-photo {
	    	width: 250px;
	    	top: 70px;
	    	left: 3%;
	  	}

		.menu-aboutme {
	  	    top: 30px;
	  	    left: 36%;
	 	}

		.menu-work {
	  	    top: 30px;
	  	    left: 72%;
	 	}

	 	.menu-aboutme-mobile {
		    display: none;
		}

		.overlay nav {
		    font-size: 20px;
		    font-weight: 300;
		    line-height: 2.3;
		}

		.home-image {
			height: 400px;
		}

		.om {
			height: 400px;
		}

		.mp {
			height: 400px;
		}

		.dw {
			height: 400px;
		}

		.aau {
			height: 400px;
		}

		.pe {
			height: 400px;
		}

		.mo {
			height: 400px;
		}

		.po {
			height: 400px;
		}

		.ct {
			height: 400px;
		}

		.info {
			height: 400px;
		}

		.details {
			height: 400px;
		}

		.om-project-img {
			background-image: url("../img/img-omen-home-md.png.png");
			height: 400px;
		}

		.mp-project-img {
			background-image: url("../img/img-marinetopia-home-md.png.png");
			height: 400px;
		}

		.dw-project-img {
			background-image: url("../img/img-drawall-home-md.png.png");
			width: 433px;
			height: 400px;
		}

		.aau-project-img {
			background-image: url("../img/img-auu-home-md.png.png");
			height: 400px;
		}

		.pe-project-img {
			background-image: url("../img/img-petitclay-home-md.png.png");
			width: 655px;
			height: 400px;
		}

		.mo-project-img {
			background-image: url("../img/img-motion-home-md.png.png");
			width: 433px;
			height: 400px;
		}

		.mo-project-img {
			background-image: url("../img/img-motion-home-md.png.png");
			width: 582px;
			height: 400px;
		}

		.po-project-img {
			background-image: url("../img/img-3d-home-md.png.png");
			width: 433px;
			height: 400px;
		}

		.ct-project-img {
			background-image: url("../img/img-citystickers-home-md.png.png");
			width: 582px;
			height: 400px;
		}

		.info-project-img {
			background-image: url("../img/img-info-home-md.png.png");
			width: 433px;
			height: 400px;
		}

		.hero-animation {
			padding-top: 100px;
		}

		h3 {
			width: 270px;
			font-family: 'Source Sans Pro', sans-serif;
			font-weight: 300;
			font-size: 25px;
			line-height: 0.25;
			letter-spacing: 1px;
			text-align: left;
			color: #f5f5f5;
		}

		h4 {
			width: 270px;
			object-fit: contain;
			font-family: 'Source Sans Pro', sans-serif;
			font-size: 15px;
			font-weight: 200;
			line-height: 1.59em;
			letter-spacing: 1.3px;
			text-align: left;
			color: #f5f5f5;
		}

		h5 {
			padding-top: 0.7em;
		}

		header {
			height: 70px;
		}

		section {
			padding-top: 70px;
		}

		section.ok{
			top: 630px;
		}

		footer {
			height: 60px;
		}

		.logo {
			height: 60px;
		}

		.overlay {
		    background-image: url("../img/img-menu-bd.png");
		    background-repeat: no-repeat;
		    background-size: cover;
		}

	/*this is the details of the projects*/

		.om-hero {
			height: 400px;
		}

		.mp-hero {
			height: 400px;
		}

		.dw-hero {
			height: 400px;
		}

		.aau-hero {
			height: 400px;
		}

		.pe-hero {
			height: 400px;
		}

		.mo-hero {
			height: 400px;
		}

		.po-hero {
			height: 400px;
		}

		.ct-hero {
			height: 400px;
		}

		.info-hero {
			height: 400px;
		}

		.projects {
			width: 100%;
			height: 400px;
			display: none;
		}

	/*this is details of OMEN Command Center*/

		#om-intro {
		    width: 100%;
		    height: 400px;
			top: 510px;
		}

	    .om-01 {
	      top: 45%;
	      transform: translateY(-50%);
	    }

	    .om-02 {
		    top: 37%;
		    margin-left: 410px;
	    }

	    .om-03 {
	      top: 3%;
	    }

	    .om-04 {
	      top: 20px;
	    }

	    .om-05 {
	      top: 58%;
	    }


	    #om-intro-2 {
	      width: 100%;
	      height: 910px;
	      top: 870px;
	    }

	    #om-windows {
	      width: 100%;
	      height: 920px;
	      top: 1240px;
	    }

	    #om-windows2 {
	      width: 100%;
	      height: 1150px;
	      top: 1210px;
	    }

	    #om-mobile {
	      width: 100%;
	      height: 1120px;
	      top: 3820px;
	    }

	    #om-styleguide {
	      width: 100%;
	      height: 1150px;
	      top: 4940px;
	    }

	    #om-testing {
	      width: 100%;
	      height: 800px;
	      top: 6090px;
	    }

	    #om-footer {
	      height: 60px;
	      top: 6890px;
	    }


	    .et-slide .om-img-01 {
	      width: 320px;
	      margin: 0px 0px 250px -450px;
	    }

	    .et-slide .om-img-windows {
	      width: 595px;
	      margin-top: 0px;
	      margin-left: 40px;
	    }

	    .et-slide .om-img-02 {
	      width: 595px;
	      margin-top: -250px;
	      margin-left: 80px;
	    }

	    .et-slide .om-img-03 {
	      width: 595px;
	      margin-top: 80px;
	      margin-left: 80px;
	    }

	    .et-slide .om-img-04 {
	      width: 250px;
	      margin-top: -10px;
	    }

	    .et-slide .om-img-05 {
	      width: 595px;
	      margin-left: 80px;
	    }

	/*this is details of MarineTopia*/

		.et-slide .row {
		    width: 720px;
		}

		.et-hero-tabs-container--top {
		    position: fixed;
		    top: 70px;
		}

		.et-hero-tabs,
		.et-slide {
		    position: relative;
		    top: 0px;
		}

		.et-hero-tab {
		    width: 380px;
		    font-size: 15px;
		    font-weight: 300;
		    line-height: 1.59em;
		    letter-spacing: 1.3px;
		}

		.et-hero-tabs h1,
		.et-slide h1 {
		    width: 320px;
		    font-weight: 300;
		    font-size: 25px;
		    line-height: 0.25;
		    letter-spacing: 1px;
			padding: 0px 0px 0px 10px;
		}  

		.et-hero-tabs h2,
		.et-slide h2 {
		    width: 320px;
		    font-size: 15px;
		    font-family: 'Source Sans Pro', sans-serif;
		    font-weight: 300;
		    line-height: 1.59em;
		    letter-spacing: 1.3px;
		    padding: -20px 0px -20px 0px;
		}

		.et-hero-tabs h3,
		.et-slide h3 {
		    width: 400px;
		    font-size: 16px;
		    font-weight: 300;
		    line-height: 1.59em;
		    letter-spacing: 1.3px;
		    padding: 0px 0px 0px 10px;
		}

		.et-hero-tabs h3 a,
		.et-slide h3 a {
		    width: 400px;
		    font-size: 16px;
		    font-weight: 400;
		    line-height: 1.59em;
		    letter-spacing: 1.3px;
		    padding: 0px 0px 0px 0px;
		}

		.et-hero-tabs-short h3,
		.et-slide-short h3 {
		    width: 330px;
		    font-size: 16px;
		    font-weight: 300;
		    line-height: 1.59em;
		    letter-spacing: 1.3px;
		    display: inline-block;
		}

		.et-hero-tabs h4,
		.et-slide h4 {
		    width: 300px;
		    height: 294px;
		    opacity: 0.2;
		    font-family: 'Source Sans Pro', sans-serif;
		    font-size: 60px;
		    font-weight: bold;
		    line-height: 1.12;
		    letter-spacing: 3px;
		    text-align: right;
		    color: #b4bdc2;
		    padding: 80px 0px;
		}

		.et-hero-tabs h5,
		.et-slide h5 {
		    width: 100%;
		    font-size: 15px;
		}

		/*lines*/

		.et-slide .green-line {
		    position: absolute;
		    top: 300px;
		}

		.et-slide .gray-line {
		    margin: 15px 0 7.5px 0;
		    border-top: 1px #B4BDC2 solid;
		}

		/*lines*/

		#intro {
		    width: 100%;
		    height: 520px;
			position: absolute;
			top: 510px;
		}

		.mp-01 {
		}

		.mp-02 {
		    top: 40%;
		    margin-left: 410px;
		}

		#research {
		    width: 100%;
		    height: 570px;
			position: absolute;
			top: 1030px;
		}

		.mp-03 {
			float: left;
		    position: absolute;
		    top: 20px;
		}

		.et-slide .mp-info-d {
		    widows: 100%;
		    height: auto;
		    position: relative;
		    top: 460px;
		}

		.et-slide .mp-info-m {
		    widows: 100%;
		    display: relative;
		    opacity: 0;
		}

		.et-slide .mp-info-dd {
		    widows: 100%;
		    height: auto;
		    position: relative;
		    top: 320px;
		}

		.et-slide .mp-info-mm {
		  widows: 100%;
		  display: relative;
		  opacity: 0;
		}

		#research-2 {
		    width: 100%;
		    height: 280px;
			position: absolute;
			top: 1600px;
		}

		#research-3 {
		    width: 100%;
		    height: 400px;
			position: absolute;
			top: 1880px;
		}

		.et-slide .persona {
		    width: 280px;
		    margin: 10px 0;
		}

		.et-slide-short {
		    margin: 15px 0 0 350px;
		}

		.et-slide .logo-1{
		    width: 280px;
		    height: auto;
		    display: inline-block;
		    margin: 100px 0 10px 440px;
		}

		.et-slide .logo-1-1 {
		    width: 280px;
		    height: auto;
		    display: inline-block;
		    margin: 10px 0 0 440px;
		}

		.et-slide .logo-2{
		    width: 150px;
		    height: auto;
		    display: inline-block;
		    margin: 50px 0 0 20px;
		}

		.et-slide .logo-3{
		    width: 70%;
		    height: auto;
		    display: inline-block;
		    margin: 20px 0 10px 200px;
		}

		#branding {
		    width: 100%;
		    height: 2500px;
			position: absolute;
			top: 2280px;
		}

		#branding-2 {
		    width: 100%;
		    height: 620px;
			position: absolute;
			top: 4780px;
		}

		#branding-3 {
		    width: 100%;
		    height: 520px;
			position: absolute;
			top: 5330px;
		}

		#branding-4 {
		    width: 100%;
		    height: 620px;
			position: absolute;
			top: 5850px;
		} 

		.et-slide .branding {
		    width: 700px;
		    margin: 0 auto;
		}

		#poster {
		    width: 100%;
		    height: 1300px;
			position: absolute;
			top: 6410px;
		}

		#microsite {
		    width: 100%;
		    height: 3750px;
			position: absolute;
			top: 7710px;
		}

		#mp-video {
		    width: 100%;
		    height: 1100px;
			position: absolute;
			top: 11460px;
		}

		.et-slide .mp-video {
		    width: 100%;
		    height: auto;
		    margin: 10px 0 0 0;
		}

		.et-slide .video-responsive {
		    overflow:hidden;
		    padding-bottom:56.25%;
		    position:relative;
		    height:0;
		}

		.video-responsive iframe{
		    left:0;
		    top:0;
		    height:100%;
		    width:100%;
		    position:absolute;
		}

		#mp-footer {
		    width: 100%;
		    height: 60px;
		    position: absolute;
		    top: 12540px;
		}

		.et-slide .footer {
		    position: absolute;
		    top: 15%;
		}

	/*this is details of Drawall*/

		#dw-intro {
		    width: 100%;
		    height: 350px;
			top: 510px;
		}

	    .dw-01 {
	      top: 45%;
	      transform: translateY(-50%);
	    }

	    .dw-02 {
		    top: 37%;
		    margin-left: 410px;
	    }

	    .dw-03 {
	      top: 20%;
	    }

	    .dw-04 {
	      top: 20px;
	    }

	    .dw-05 {
	      top: 58%;
	    }

	    .dw-06 {
	      top: 150px;
	      left: 80px;
	    }

	    .dw-07 {
	      top: 600px;
	      left: 380px;
	    }



	    #dw-intro-2 {
	      width: 100%;
	      height: 350px;
	      top: 840px;
	    }

	    #dw-research {
	      width: 100%;
	      height: 820px;
	      top: 650px;
	    }

	    #dw-branding {
	      width: 100%;
	      height: 350px;
	      top: 2000px;
	    }

	    #dw-branding-2 {
	      width: 100%;
	      height: 600px;
	      top: 2350px;
	    }

	    #dw-branding-3 {
	      width: 100%;
	      height: 600px;
	      top: 2900px;
	    }

	    #dw-branding-4 {
	      width: 100%;
	      height: 550px;
	      top: 3380px;
	    }

	    #dw-branding-5 {
	      width: 100%;
	      height: 560px;
	      top: 3880px;
	    }

	    #dw-interactive {
	      width: 100%;
	      height: 600px;
	      top: 4430px;
	    }

	    #dw-interactive-2 {
	      width: 100%;
	      height: 1400px;
	      top: 5030px;
	    }

	    #dw-interactive-3 {
	      width: 100%;
	      height: 600px;
	      top: 6350px;
	    }

	    #dw-interactive-4 {
	      width: 100%;
	      height: 950px;
	      top: 6930px;
	    }

	    #dw-interactive-5 {
	      width: 100%;
	      height: 1400px;
	      top: 7800px;
	    }

	    #dw-poster {
	      width: 100%;
	      height: 1000px;
	      top: 9200px;
	    }

	    #dw-video {
	      width: 100%;
	      height: 1100px;
	      top: 10200px;
	    }

		.et-slide .video {
		    width: 100%;
		    height: auto;
		    margin: 10px auto;
		}

	    #dw-footer {
	      height: 60px;
	      top: 11300px;
	    }


	    .et-slide .dw-img-01 {
	      width: 320px;
	      margin: -10px 0 30px 400px;
	    }

	    .et-slide .dw-img-persona {
	      width: 595px;
	      margin-top: -20px;
	      margin-left: 80px;
	    }

	    .et-slide .dw-img-02 {
	      width: 595px;
	      margin-top: -150px;
	      margin-left: 80px;
	    }

	    .et-slide .dw-img-022 {
	      width: 595px;
	      margin-top: -250px;
	      margin-left: 80px;
	    }

	    .et-slide .dw-img-03 {
	      width: 595px;
	      margin-top: 80px;
	      margin-left: 80px;
	    }

	    .et-slide .dw-img-04 {
	      width: 250px;
	      margin-top: -10px;
	    }

	    .et-slide .dw-img-05 {
	      width: 595px;
	      margin-left: 80px;
	    }

	    .et-slide .dw-img-06 {
	      width: 658px;
	      top: 160px;
	      margin: 10px 0 0 0px;
	    }

	    .et-slide .dw-img-07 {
	      width: 300px;
	      top: 10px;
	      margin: 0px 0 0 330px;
	    }

	    .et-slide .dw-img-08 {
	      width: 300px;
	      top: 400px;
	      margin: 0px 0 0 50px;
	    }

	    .et-slide .dw-img-09 {
	      width: 658px;
	      top: 0px;
	      margin: 40px 0 0 50px;
	    }

	/*this is details of AAU*/

	    #aau-intro {
	      width: 100%;
	      height: 350px;
	      top: 510px;
	    }

	    .aau-01 {
	      top: 50%;
	      transform: translateY(-50%);
	    }

	    .aau-02 {
		    top: 40%;
		    margin-left: 410px;
	    }

	    .aau-03 {
	      top: 40px;
	    }


	    #aau-research {
	      width: 100%;
	      height: 850px;
	      top: 860px;
	    }

	    #aau-research-2 {
	      width: 100%;
	      height: 2700px;
	      top: 1700px;
	    }

	    #aau-userflow {
	      width: 100%;
	      height: 1900px;
	      top: 4400px;
	    }

	    #aau-wireframe {
	      width: 100%;
	      height: 450px;
	      top: 6300px;
	    }

	    #aau-wireframe-2 {
	      width: 100%;
	      height: 1500px;
	      top: 6730px;
	    }

	    #aau-usertesting {
	      width: 100%;
	      height: 570px;
	      top: 8230px;
	    }

	    #aau-prototyping {
	      width: 100%;
	      height: 1920px;
	      top: 8800px;
	    }

	    #aau-video {
	      width: 100%;
	      height: 550px;
	      top: 10600px;
	    }

	    iframe {
	      position: relative;
	      top: 0px;
	      margin: 0 auto;
	    }

	    #aau-footer {
	      width: 100%;
	      height: 60px;
	      top: 11150px;
	    }


	    .et-slide .aau-img-01 {
	      width: 595px;
	      top: 100px;
	      margin: 5px 0 5px 0;
	    }

	    .et-slide .aau-img-02 {
	      width: 595px;
	      height: auto;
	      top: 10px;
	      margin: 5px 0 5px 0;
	    }

	/*this is details of Petitclay*/

	    #pe-intro {
	      width: 100%;
	      height: 400px;
	      top: 510px;
	    }

	    .pe-01 {
	      top: 50%;
	      transform: translateY(-50%);
	    }

	    .pe-02 {
	      top: 45%;
	      transform: translateY(-50%);
	      margin-left: 410px;
	    }

	    .pe-03 {
	      top: 20px;
	    }

	    #pe-branding {
	      width: 100%;
	      height: 3500px;
	      top: 910px;
	    }

	    #pe-poster {
	      width: 100%;
	      height: 650px;
	      top: 4410px;
	    }

	    #pe-footer {
	      width: 100%;
	      height: 70px;
	      top: 5050px;
	    }

	    .et-slide .pe-img-01 {
	      width: 595px;
	      height: auto;
	      position: relative;
	      top: 0px;
	      margin: 10px auto;
	    }

	    .et-slide .pe-img-02 {
	      width: 595px;
	      margin: 10px auto;

	    }

	    .et-slide .pe-img-03 {
	      width: 345px;
	      margin: 0 auto;
	      margin-left: -150px;
	    }

	/*this is details of Motion Graphics*/

	    #motion-mp {
		    width: 100%;
		    height: 520px;
			position: absolute;
			top: 510px;
	    }

	    #motion-mp-2 {
	      width: 100%;
	      height: 1120px;
	      background-color: #fff;
	      position: absolute;
	      top: 1030px;
	    }

	    #motion-dw {
	      width: 100%;
	      height: 320px;
	      background-color: #EFEFEF;
	      padding: 10px auto;
	      position: absolute;
	      top: 2150px;
	    }

	    #motion-dw-2 {
	      width: 100%;
	      height: 1120px;
	      background-color: #fff;
	      position: absolute;
	      top: 2470px;
	    }

	    .mo-01 {
	      float: left;
	      position: absolute;
	      top: 50%;
	      transform: translateY(-50%);
	    }

	    .mo-02 {
		    top: 40%;
		    margin-left: 410px;
	    }

	    .mo-03 {
			float: left;
		    position: absolute;
		    top: 20px;
	    }

	    #motion-footer {
	      width: 100%;
	      height: 60px;
	      position: absolute;
	      top: 3570px;
	    }

		.et-slide .mo-video {
		    width: 100%;
		    height: auto;
		    margin: 10px auto;
		}

	/*this is details of 3D Cards*/

	    #card {
	      width: 100%;
	      height: 780px;
	      position: absolute;
	      top: 510px;
	    }

	    #thank-you-note-card {
	      width: 100%;
	      height: 1500px;
	      position: absolute;
	      top: 1290px;
	    }

	    .card-align {
	      top: 20px;
	    }

	    .et-slide .card {
	      width: 470px;
	      height: auto;
	      margin: 5px 0px;
	      box-shadow: 3px 3px 4px 0 #707e8c;
	    }

	    #card-footer {
	      width: 100%;
	      height: 60px;
	      top: 2790px;
	    }

	/*this is details of City Stickers*/

		.slider-container {
			width: 720px;
			margin: auto;
			margin: 70px 0 0 0;
		}
		    
		#citystickers {
			width: 100%;
		    height: 500px;
		    padding: 5px 0 5px 0;
		    top: 510px;
		}

		#cities {
		    width: 100%;
		    height: 4800px;
		    top: 970px;
		}

		.ct-01 {
		    top: 20px;
		}

		#ct-footer {
		    width: 100%;
		    height: 60px;
		    top: 5770px;
		}

		.et-slide .ct-img-01 {
		    width: 595px;
		    top: 10px;
		}

	/*this is details of Infographics*/

	    #info-version-01 {
		    width: 100%;
		    height: 1330px;
			position: absolute;
			top: 510px;
	    }

	    #info-version-02 {
	      width: 100%;
	      height: 1100px;
	      position: absolute;
	      top: 1840px;
	    }

	    .info-align {
	      top: 20px;
	    }

	    .et-slide .info {
	      width: 595px;
	    }

	    #info-footer {
	      width: 100%;
	      height: 60px;
	      top: 2940px;
	    }

}

@media only screen and (max-width: 760px) {
	
	/*this is homepage*/

		.row {
			width: 100%;
		}

		.button_container {
	  		top: 18px;
	    	right: 20px;
		}

		.menu-photo {
	    	display: none;
	  	}

		.menu-aboutme {
		    display: none;
	 	}

		.menu-work {
	  	    top: 15px;
	  	    left: 5%;
	 	}

	 	.menu-aboutme-mobile {
	 		position: absolute;
	 		display: block;
		    top: 400px;
	  	    left: 5%;
		}

		.overlay nav {
		    font-size: 20px;
		    font-weight: 300;
		    line-height: 1.7;
		}

		.hero {
			height: 575px;
		}

		.hero-animation {
		    padding-top: 125px;
		    padding-left: 0px;
		}

		.home-image {
			height: 260px;
		}

		.om {
			width: auto;
			height: 260px;
			background-image: url("../img/img-omen.jpg.jpg");
		}		

		.mp {
			width: auto;
			height: 260px;
			background-image: url("../img/img-marinetopia.jpg.jpg");
		}

		.dw {
			width: auto;
			height: 260px;
			background-image: url("../img/img-drawall.jpg.jpg");
		}

		.aau {
			width: auto;
			height: 260px;
			background-image: url("../img/img-aau.jpg.jpg");
		}

		.pe {
			width: auto;
			height: 260px;
			background-image: url("../img/img-petitclay.jpg.jpg");
		}

		.mo {
			width: auto;
			height: 260px;
			background-image: url("../img/img-motion.jpg.jpg");
		}

		.po {
			width: auto;
			height: 260px;
			background-image: url("../img/img-3d.jpg.jpg");
		}

		.ct {
			width: auto;
			height: 260px;
			background-image: url("../img/img-citystickers.jpg.jpg");
		}

		.info {
			width: auto;
			height: 260px;
			background-image: url("../img/img-info.jpg.jpg");
		}

		.om-project-img {
			display: none;
		}

		.mp-project-img {
			display: none;
		}

		.dw-project-img {
			display: none;
		}

		.aau-project-img {
			display: none;
		}

		.pe-project-img {
			display: none;
		}

		.mo-project-img {
			display: none;
		}

		.po-project-img {
			display: none;
		}

		.ct-project-img {
			display: none;
		}

		.info-project-img {
			display: none;
		}

		.details {
			width: 100%;
			height: 260px;
			opacity: 1;
			background-color: rgba(255, 255, 255, 0);
			transition: all 0s;
		}

		.details img {
			width: 150px;
		}

		.logo-animation {
		    display: block;
		    text-align: left;
		}

		.logo-kclogo {
			display: block;
			margin-left:0;
			text-align: left;
			padding: 1em;
			margin: 0 auto;
		}

		.logo-typein {
			display: block;
			margin-left:0;
			text-align: left;
			padding: 1em;
			margin: 0 auto;
		}

		.hero-animation {
			padding-top: 40px;
		}

		.red-box-2 {
			margin: 0px 0 15px 15px;
		}

		.red-box-2:hover {
		    width: 100px;
			height: 6px;
		}

		.red-box-3 {
			margin: 15px 0 15px 15px;
		}

		.red-box-3:hover {
		    width: 120px;
		}

		h1 {
			font-weight: 400;
			font-size: 18px;
			line-height: 1.75;
			letter-spacing: 1.2px;
			text-align: left;
			margin: 30px 15px;
		}

		h2 {
			font-size: 40px;
			font-weight: 400;
			line-height: 1.3;
			letter-spacing: 1.8px;
			text-align: left;
			margin: 0 15px;
		}

		h3 {
			width: 320px;
			font-weight: 300;
			font-size: 25px;
			line-height: 0.25;
			letter-spacing: 1px;
			text-align: left;
			color: #f5f5f5;
		}

		h4 {
			width: 350px;
			font-size: 15px;
			font-weight: 300;
			line-height: 1.59em;
			letter-spacing: 1.3px;
			text-align: left;
			color: #f5f5f5;
			margin: 8px 0 8px 0;
		}

		h5 {
			width: 100%;
			font-size: 12px;
			padding-top: 0.8em;
		}

		.details h5 {
			width: 100%;
			font-size: 14px;
			padding-top: 0.3em;
		}

		h6 {
			width: 350px;
			font-size: 15px;
			font-weight: 300;
			line-height: 1.59em;
			letter-spacing: 1.3px;
			text-align: left;
			color: #f5f5f5;
			margin: 10px 0 8px 0;
		}

		header {
			height: 60px;
		}

		section {
			padding-top: 60px;
		}

		section.ok{
			top: 515px;
		}

		footer {
			height: 50px;
		}

		.logo {
			height: 55px;
		}

		.red-box {
			width: 15px;
			height: 4px;
			margin: 5px 0 5px 0;
		}

		.linkedin {
			width: 35px;
			margin-bottom: 0px;
		}

	    .scroll-down {
	      bottom: 70px;
	    }

		.overlay {
		    background-image: url("../img/img-menu-bd.png");
		    background-repeat: no-repeat;
		    background-size: cover;
		}

		.overlay.open {
		    opacity: 1;
		}

	/*this is the details of the projects*/
		
		.om-hero {
			height: 260px;
			background-image: url("../img/img-omen.jpg.jpg");
		}

		.mp-hero {
			height: 260px;
			background-image: url("../img/img-marinetopia.jpg.jpg");
		}

		.dw-hero {
			height: 260px;
			background-image: url("../img/img-drawall.jpg.jpg");
		}

		.aau-hero {
			height: 260px;
			background-image: url("../img/img-aau.jpg.jpg");
		}

		.pe-hero {
			height: 260px;
			background-image: url("../img/img-petitclay.jpg.jpg");
		}

		.mo-hero {
			width: auto;
			height: 260px;
			background-image: url("../img/img-motion.jpg.jpg");
		}

		.po-hero {
			width: auto;
			height: 260px;
			background-image: url("../img/img-3d.jpg.jpg");
		}

		.ct-hero {
			width: auto;
			height: 260px;
			background-image: url("../img/img-citystickers.jpg.jpg");
		}

		.info-hero {
			width: auto;
			height: 260px;
			background-image: url("../img/img-info.jpg.jpg");
		}

		.projects {
			height: 260px;
			opacity: 1;
			position: relative;
			top: -260px;
			background-color: rgba(255, 255, 255, 0);
			transition: all 0s;
		}

		.projects img {
			width: 150px;
		}

		.bubbles {
			display: none;
		}

	/*this is details of OMEN Command Center*/

		#om-intro {
		    width: 100%;
		    height: 400px;
			top: 345px;
		}

	    .om-01 {
	      top: 50%;
	      transform: translateY(-50%);
	    }

	    .om-02 {
		    display: none;
	    }

	    .om-03 {
	      top: 1%;
	      display: block;
	    }

	    .om-04 {
	      top: 5px;
	    }

	    .om-05 {
		  display: none;
	    }



	    #om-intro-2 {
	      width: 100%;
	      height: 1020px;
	      top: 740px;
	    }

	    #om-windows {
	      width: 100%;
	      height: 650px;
	      top: 1380px;
	    }

	    #om-windows2 {
	      width: 100%;
	      height: 750px;
	      top: 1380px;
	    }	    

	    #om-mobile {
	      width: 100%;
	      height: 750px;
	      top: 3160px;
	    }

	    #om-styleguide {
	      width: 100%;
	      height: 780px;
	      top: 3910px;
	    }

	    #om-testing {
	      width: 100%;
	      height: 550px;
	      top: 4690px;
	    }

	    #om-footer {
	      height: 50px;
	      top: 5240px;
	    }


	    .et-slide .om-img-01 {
	      width: 100px;
	      margin: 0 auto;
	      margin-top: -295px;
	      margin-right: 15px;
	      display: block;
	    }

	    .et-slide .om-img-windows {
	      width: 375px;
	      margin-top: 10px;
	      margin-left: 0px;
	    }

	    .et-slide .om-img-02 {
	      width: 375px;
	      position: relative;
	      top: -20px;
	      margin-left: 0px;
	    }

	    .et-slide .om-img-03 {
		    display: none;
	    }

	    .et-slide .om-img-04 {
	      width: 200px;
	      margin-top: 20px;
	      margin-left: 0px;
	    }

	    .et-slide .om-img-05 {
	      width: 375px;
	      margin-left: auto;
	      margin-right: auto;
	    }

	/*this is details of MarineTopia*/

		.et-slide .row {
		    width: 100%;
		}

		.et-hero-tabs-container--top {
		    position: fixed;
		    top: 60px;
		}

		.et-hero-tabs,
		.et-slide {
		    top: 0px;
		}

		.et-hero-tab {
		    width: 30px;
		    font-size: 10px;
		    font-weight: 400;
		    letter-spacing: 1px;
		}

		.et-hero-tabs-container {
		    width: 100%;
		    height: 40px;
		}

		.et-hero-tabs h1,
		.et-slide h1 {
		    width: 300px;
		    height: auto;
		    font-weight: 400;
		    font-size: 25px;
		    line-height: 0.25;
		    letter-spacing: 1px;
		    margin: 20px 0 20px 15px;
		}  

		.et-hero-tabs h2,
		.et-slide h2 {
		    width: 200px;
		    font-size: 15px;
		    font-weight: 400;
		    line-height: 1.59em;
		    letter-spacing: 1.3px;
		    margin: 10px 0 0 15px;
		}

		.et-hero-tabs h3,
		.et-slide h3 {
		    width: 90%;
		    font-size: 15px;
		    font-weight: 400;
		    line-height: 1.59em;
		    letter-spacing: 1.3px;
		    padding: 0px 0px 0px 23px;
		}

		.et-hero-tabs h3 a,
		.et-slide h3 a {
		    width: 95%;
		    font-size: 15px;
		    font-weight: 400;
		    line-height: 1.59em;
		    letter-spacing: 1.3px;
		    padding: 0px 0px 0px 0px;
		}

		.et-hero-tabs-short h3,
		.et-slide-short h3 {
		    width: 95%;
		    font-size: 15px;
		    font-weight: 400;
		    line-height: 1.59em;
		    letter-spacing: 1.3px;
		    padding: 0px 0px 0px 0px;
		}

		.et-hero-tabs-dw h3,
		.et-slide-dw h3 {
		    width: 100%;
		    font-size: 15px;
		    font-weight: 400;
		    line-height: 1.59em;
		    letter-spacing: 1.3px;
		    padding: 0px 0px 0px 23px;
		}

		.et-hero-tabs h5,
		.et-slide h5 {
		    width: 350px;
		    font-size: 12px;
		}

	    .et-slide img {
	    	width: 375px;
		    margin: 2px auto; 
		}

		/*lines*/

		.et-slide .green-line {
		    display: none;
		}

		.et-slide .gray-line {
		    margin: 15px 0 7.5px 0;
		    border-top: 1px #B4BDC2 solid;
		}

		/*lines*/

		#intro {
		    width: 100%;
		    height: 520px;
			position: absolute;
			top: 360px;
		}

		.mp-01 {
		}

		.mp-02 {
		    display: none;
		}

		#research {
		    width: 100%;
		    height: 550px;
			position: absolute;
			top: 880px;
		}

		.mp-03 {
		    position: absolute;
		    top: 5px;
		}

		.et-slide .mp-info-d {
		    display: none;
		}

		.et-slide .mp-info-m {
		    width: auto;
		    height: 450px;
		    opacity: 1;
		    position: relative;
		    top: 15px;
		}

		.et-slide .mp-info-dd {
		    display: none;
		}

		.et-slide .mp-info-mm {
		    width: auto;
		    height: 305px;
		    opacity: 1;
		    position: relative;
		    top: 0px;
		}

		#research-2 {
		    width: 100%;
		    height: 340px;
			position: absolute;
		    top: 1430px;
		}

		#research-3 {
		    width: 100%;
		    height: 650px;
			position: absolute;
		    top: 1770px;
		}

		.et-slide .persona {
		    width: 250px;
		    margin: 0 0 0 50px;
		}

		.et-slide-short {
		    margin: 320px 0 0 40px;
		}

		.et-slide .logo-1{
		    display: none;
		}

	    .et-slide .logo-1-1 {
		    display: none;
	    }

		.et-slide .logo-2{
		    display: none;
		}

		.et-slide .logo-3{
		    width: 375px;
		    height: auto;
		    margin: 430px 0 0 0;
		}

		#branding {
		    width: 100%;
		    height: 1500px;
			position: absolute;
		    top: 2420px;
		}

		#branding-2 {
		    width: 100%;
		    height: 350px;
			position: absolute;
		    top: 3920px;
		}

		.et-slide .branding-hidden {
		    display: none;	
		}

		.et-slide .line-hidden {
		    display: hidden;	
		}

		#branding-3 {
		    display: none;
		}

		#branding-4 {
		    width: 100%;
		    height: 380px;
		    background-color: #f5f5f5;
			position: absolute;
		    top: 4250px;
		} 

		.et-slide .branding {
		    width: 375px;
		    margin: 0 auto;
		}

		#poster {
		    width: 100%;
		    height: 750px;
			position: absolute;
		    top: 4540px;
		}

		#microsite {
		    width: 100%;
		    height: 2000px;
			position: absolute;
		    top: 5290px;
		}

		#mp-video {
		    width: 100%;
		    height: 680px;
			position: absolute;
		    top: 7280px;
		}

		.et-slide .mp-video {
		    width: 375px;
		    margin: 0 auto;
		}

		.et-slide .video-responsive {
		    overflow:hidden;
		    padding-bottom:56.25%;
		    position:relative;
		    height:0;
		}

		.video-responsive iframe{
		    left:0;
		    top:0px;
		    height:100%;
		    width:100%;
		    margin: 0 auto;
		    position:absolute;
		}

		#mp-footer {
		    height: 50px;
		    position: absolute;
		    top: 7940px;
		}

		.et-slide .footer {
		    position: absolute;
		    top: 10%;
		}

	/*this is details of Drawall*/

		#dw-intro {
		    width: 100%;
		    height: 280px;
			top: 360px;
		}

	    .dw-01 {
	      top: 45%;
	      transform: translateY(-50%);
	    }

	    .dw-02 {
		    display: none;
	    }

	    .dw-03 {
	      top: 3%;
	      display: block;
	    }

	    .dw-04 {
	      top: 5px;
	    }

	    .dw-05 {
		    display: none;
	    }

	    .dw-06 {
	      display: none;
	    }

	    .dw-07 {
	      display: none;
	    }



	    #dw-intro-2 {
	      width: 100%;
	      height: 500px;
	      top: 640px;
	    }

	    #dw-research {
	      width: 100%;
	      height: 400px;
	      top: 700px;
	    }

	    #dw-branding {
	      width: 100%;
	      height: 350px;
	      top: 1450px;
	    }

	    #dw-branding-2 {
	      width: 100%;
	      height: 400px;
	      top: 1800px;
	    }

	    #dw-branding-3 {
	      width: 100%;
	      height: 400px;
	      top: 2170px;
	    }

	    #dw-branding-4 {
	      width: 100%;
	      height: 400px;
	      top: 2530px;
	    }

	    #dw-branding-5 {
	      width: 100%;
	      height: 400px;
	      top: 2880px;
	    }

	    #dw-interactive {
	      width: 100%;
	      height: 450px;
	      top: 3270px;
	    }

	    #dw-interactive-2 {
	      width: 100%;
	      height: 350px;
	      top: 3700px;
	    }

	    #dw-interactive-3 {
	      width: 100%;
	      height: 450px;
	      top: 4050px;
	    }

	    #dw-interactive-4 {
	      width: 100%;
	      height: 950px;
	      top: 4450px;
	    }

	    #dw-interactive-5 {
	      display: none;
	    }

	    #dw-poster {
	      width: 100%;
	      height: 700px;
	      top: 5400px;
	    }

	    #dw-video {
	      width: 100%;
	      height: 700px;
	      top: 6100px;
	    }

		.et-slide .video {
		    width: 375px;
		    margin: 30PX 0 0 0;
		}

	    #dw-footer {
	      height: 50px;
	      top: 6800px;
	    }


	    .et-slide .dw-img-01 {
	      width: 320px;
	      margin: 0 auto;
	      margin-top: 100px;
	      display: block;
	    }

	    .et-slide .dw-img-persona {
	      width: 375px;
	      margin-top: -20px;
	      margin-left: 0px;
	    }

	    .et-slide .dw-img-02 {
	      width: 375px;
	      position: relative;
	      top: -50px;
	      margin-left: 0px;
	    }

	    .et-slide .dw-img-022 {
	      width: 375px;
	      position: relative;
	      top: -20px;
	      margin-left: 0px;
	    }

	    .et-slide .dw-img-03 {
		    display: none;
	    }

	    .et-slide .dw-img-04 {
	      width: 200px;
	      margin-top: 20px;
	      margin-left: 0px;
	    }

	    .et-slide .dw-img-05 {
	      width: 375px;
	      margin-left: auto;
	      margin-right: auto;
	    }

	    .et-slide .dw-img-06 {
	      display: none;
	    }

	    .et-slide .dw-img-07 {
	      width: 300px;
	      margin: 0 35px;
	    }

	    .et-slide .dw-img-08 {
	      width: 300px;
	      margin: 0 35px;
	    }

	    .et-slide .dw-img-09 {
	      display: none;
	    }

	/*this is details of AAU*/

	    #aau-intro {
	      width: 100%;
	      height: 350px;
	      top: 360px;
	    }

	    .aau-01 {
	      top: 45%;
	      transform: translateY(-50%);
	    }

	    .aau-02 {
		    display: none;
	    }

	    .aau-03 {
	      top: 5px;
	    }


	    #aau-research {
	      width: 100%;
	      height: 600px;
	      top: 690px;
	    }

	    #aau-research-2 {
	      width: 100%;
	      height: 1780px;
	      top: 1280px;
	    }

	    #aau-userflow {
	      width: 100%;
	      height: 1300px;
	      top: 3050px;
	    }

	    #aau-wireframe {
	      width: 100%;
	      height: 330px;
	      top: 4350px;
	    }

	    #aau-wireframe-2 {
	      width: 100%;
	      height: 1000px;
	      top: 4650px;
	    }

	    #aau-usertesting {
	      width: 100%;
	      height: 450px;
	      top: 5650px;
	    }

	    #aau-prototyping {
	      width: 100%;
	      height: 1250px;
	      top: 6100px;
	      z-index: 5;
	    }

	    #aau-video {
	      width: 100%;
	      height: 480px;
	      top: 7250px;
	    }

	    #aau-footer {
	      width: 100%;
	      height: 50px;
	      top: 7700px;
	    }


	    .et-slide .aau-img-01 {
	      width: 375px;
	      top: 90px;
	      margin: 5px 0 5px 0;
	    }

	    .et-slide .aau-img-02 {
	      width: 375px;
	      height: auto;
	      top: 10px;
	      margin: 5px 0 5px 0;
	    }

	/*this is details of Petitclay*/

	    #pe-intro {
	        width: 100%;
	        height: 400px;
	        top: 360px;
	    }

	    .pe-01 {
	        top: 50%;
	        transform: translateY(-50%);
	    }

	    .pe-02 {
	        display: none;
	    }

	    .pe-03 {
	    	top: 5px;
	    }

	    #pe-branding {
	        width: 100%;
	        height: 2450px;
	        top: 760px;
	    }

	    #pe-poster {
	        width: 100%;
	        height: 450px;
	        top: 3210px;
	    }

	    #pe-footer {
	        width: 100%;
	        height: 50px;
	        top: 3630px;
	    }

	    .et-slide .pe-img-01 {
	        width: 375px;
	        position: relative;
	        top: 10px;
	    }

	    .et-slide .pe-img-02 {
	        width: 375px;
	        margin: 3px auto; 
	    }

	    .et-slide .pe-img-03 {
	        width: 300px;
	        margin: 0 auto;
	        margin-left: -300px;
	    }

	/*this is details of Motion Graphics*/

	    #motion-mp {
		    width: 100%;
		    height: 530px;
			position: absolute;
			top: 350px;
	    }

	    #motion-mp-2 {
	    	width: 100%;
	    	height: 700px;
	    	background-color: #fff;
	    	position: absolute;
	    	top: 880px;
	    }

	    #motion-dw {
	        width: 100%;
	        height: 270px;
	        background-color: #EFEFEF;
	        padding: 10px auto;
	        position: absolute;
	        top: 1580px;
	    }

	    #motion-dw-2 {
	        width: 100%;
	        height: 700px;
	        background-color: #fff;
	        position: absolute;
	        top: 1850px;
	    }

	    .mo-01 {
	        float: left;
	        position: absolute;
	        top: 50%;
	        transform: translateY(-50%);
	    }

	    .mo-02 {
		    display: none;
	    }

	    .mo-03 {
		    position: absolute;
		    top: 5px;
	    }

	    #motion-footer {
		    height: 50px;
		    position: absolute;
		    top: 2550px;
	    }

		.et-slide .mo-video {
		    width: 375px;
		    margin: 30PX 0 0 0;
		}

	/*this is details of 3D Cards*/

	    #card {
	        width: 100%;
	        height: 620px;
	        position: absolute;
		    top: 350px;
	    }

	    #thank-you-note-card {
	        width: 100%;
	        height: 1200px;
	        position: absolute;
	        top: 970px;
	    }

	    .card-align {
	        top: 5px;
	    }

	    .et-slide .card {
	        width: 375px;
	        height: auto;
	        margin: 5px 0px;
	        box-shadow: 3px 3px 4px 0 #707e8c;
	    }

	    #card-footer {
	        width: 100%;
	        height: 50px;
	        top: 2150px;
	    }

	/*this is details of City Stickers*/

	    .slider-container {
	      width: 375px;
	      margin: auto;
	      position: relative;
	      margin: 50px 0 0 0;
	    }
		    
		#citystickers {
			width: 100%;
		    height: 360px;
		    padding: 5px 0 5px 0;
		    top: 360px;
		}

		#cities {
		    width: 100%;
		    height: 3080px;
		    top: 660px;
		}

		.ct-01 {
		    top: 5px;
		}

		#ct-footer {
		    width: 100%;
		    height: 50px;
		    top: 3700px;
		}

		.et-slide .ct-img-01 {
		    width: 375px;
		}

	/*this is details of Infographics*/

	    #info-version-01 {
		    width: 100%;
		    height: 880px;
			position: absolute;
			top: 350px;
	    }

	    #info-version-02 {
	    	width: 100%;
	        height: 730px;
	        position: absolute;
	        top: 1230px;
	    }

	    .info-align {
	        top: 5px;
	    }

	    .et-slide .info {
	        width: 375px;
	    }

	    #info-footer {
	        width: 100%;
	        height: 50px;
	        top: 1930px;
	    }

}