/* #Site Styles
================================================== */
	html{
	  scroll-behavior: smooth;
	}	
	body{
		padding:0;
		margin:0 auto;
	}

	a{
		outline: 0;
		text-decoration:none;
		color:inherit;
	}
	.button{
		padding:24px 24px 24px 24px;
		border-radius:50px;
		border:1px solid #fff;
		color:#fff;
		font-size: 24px;
		font-family:Calibre;
		text-align:center;
		font-weight:normal;
		font-style:normal;
		margin: 56px 0 0 0;
		display:block;
		float:left;
	}
	.button:hover{
		background-color: none;
		color: #fff;
	}
	.workbutton{
		padding:24px 24px 24px 24px;
		border-radius:50px;
		border:1px solid #fff;
		color:#fff;
		font-size: 20px;
		font-family:Calibre;
		text-align:center;
		font-weight:normal;
		font-style:normal;
		margin:0;
		display:block;
	}
	.clear{
		clear:both;
	}
	.container100{
		padding:0;
		margin:0 auto;
	}
	#herodiv{
		position:relative;
		display:inline-block;
		margin: 168px 0 0 0;
	}
	#homebg{
		position:relative;
		float:right;
		padding:0;
		width:70%;
	}
	#herocopyblock{
		position:absolute;
		top: 50%;
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
		padding:0;
		margin:0 auto;
		width:100%;
	}
	img{
		width:100%;
	}
	.portimgs{
		padding:20px 0 20px 0;
	}
	.vimvid{
		padding:0;
		margin:0;
		width:100%;
	}
	hr{
		padding:0;
		margin:48px 0 0 0;
		border-left:none;
		border-right:none;
		border-bottom:none;
		opacity:0.5;
	}
	.vl1{
		background-color:#dedede;
		width:1px;
		height:192px;
		margin:-96px auto 0 auto;
		padding:0;
		position:relative;
		opacity:0.5;
	}
	.vl2{
		background-color:#dedede;
		width:1px;
		height:192px;
		margin:120px auto 0 auto;
		padding:0;
		position:relative;
		opacity:0.5;
	}
	.slides{
		padding:0;
		margin:0;
	}
	.slides li{
		padding:0;
		margin:0;
		list-style:none;
	}
	span.underline{
		text-decoration:underline;
	}

/* #text-styles
================================================== */
	h1{
		color:#fff;
		font-size:60px;
		line-height:60px;
		padding:0;
		margin:0;
		font-family:Calibre-semibold;
		text-align:left;
		font-weight:normal;
		font-style:normal;
	}
	h2{
		color:#fff;
		font-size:32px;
		line-height:32px;
		padding:0;
		margin:0;
		font-family:Calibre;
		text-align:center;
		font-weight:normal;
		font-style:normal;
	}
	h3{
		color:#fff;
		font-size:32px;
		line-height:32px;
		font-family:Calibre;
		text-align:left;
		font-weight:normal;
		font-style:normal;
		padding:0 0 48px 48px;
		margin:0;
	}
	#herocopy{
		text-align:center;
		margin:24px 0 0 0;
	}
	.subheader{
		color:#fff;
		font-size:32px;
		line-height:32px;
		padding:0 0 32px 0;
		margin:0;
		font-family:Calibre;
		font-weight:normal;
		font-style:normal;
	}
	.copy{
		color:#dedede;
		font-size:24px;
		line-height:32px;
		font-family:Calibre-light;
		letter-spacing: 0.015em;
		padding:0;
		margin:0;
		font-weight:normal;
		font-style:normal;
	}
	.copysmall{
		font-family:Calibre-light;
		color:#dedede;
		font-size:18px;
		margin:40px 0 40px 0;
		padding:0;
		font-weight:normal;
		font-style:normal;
	}
	.companyname{
		color:#fff;
		font-size:60px;
		line-height:60px;
		padding:0;
		margin:0;
		font-family:Calibre-semibold;
		font-weight:normal;
		font-style:normal;
	}
	.dateloc{
		color:#aaa;
		font-size:16px;
		line-height:16px;
		padding:0;
		margin:0 0 32px 0;
		font-family:Calibre;
		font-weight:normal;
		font-style:normal;
	}
	.bullet{
		color:#3f3f3f;

	}
	.workname{
		color:#fff;
		font-size:40px;
		line-height:40px;
		padding:0;
		margin:0;
		font-family:Calibre-semibold;
		font-weight:normal;
		font-style:normal;
	}
	.workdes{
		color:#aaa;
		font-size:20px;
		line-height:20px;
		padding:0;
		margin:16px 0 0 0;
		font-family:Calibre;
		font-weight:normal;
		font-style:normal;
	}

/* #header
================================================== */
	#header{
		width:100%;
		position:fixed;
		z-index: 1;
		margin: 48px 0 0 0;
	}
	a#logo2{
		display:inline-block;
		width:85px;
		height:62px;
		margin: 0 0 0 48px;
	}

	
/* #nav
================================================== */
	
	#nav{
		float:right;
		margin: 0 48px 0 0;
		
	}
	#nav ul{
		padding:0;
		margin:0;
	}
	#nav ul li{
		padding:0 0 0 48px;
		list-style:none;
		float:left;
	}
	#maina{
		color:#dedede;
		font-size:24px;
		line-height:18px;
		font-family:Calibre;
		text-decoration:none;
		
	}
	#maina:hover{
		text-decoration:underline;
		color:#fff;
	}


/* #journey
================================================== */
	#journeydiv{
		position:relative;
		margin:160px auto 0 auto;
		padding:0;
		z-index:2;
		text-align:center;
	}
	#journeydiv ul{
		display:inline-block;
		margin:80px auto 0 auto;
		padding:0;
	}
	#journeydiv ul li{
		float:left;
		list-style:none;
	}
	.journeynormal{
		padding: 0 44px 0 0;
		margin:0;
	}
	.journeylast{
		padding:0;
		margin:0;
	}
	.companylogos{
		width:80px;
	}
	.dots{
		width:63px;
		padding: 0 44px 0 0;
		margin: 40px 0 0 0;
		opacity:0.5;
	}
	.leftsideinfo{
		float:left;
		padding:0;
		margin:120px 0 0 0;
		text-align:right;
		width:36%;
	}
	.rightsideinfo{
		float:right;
		padding:0 86px 0 0;
		width:50%;
		margin:120px 0 0 0;
		text-align:left;
	}

/* #work
================================================== */
	#workdiv{
		margin:0px 0 0 0;
		padding:80px 48px 80px 0;
		left:0;
		width:100%;
	}
	.works{
		margin:72px 0 0 0;
		padding: 0 48px 0 48px;
	}
	.workleft{
		float:left;	
	}
	.workright{
		float:right;
	}

/* #footer
================================================== */
	#footer{
		margin:0 0 0 0;
		padding:0 40px 40px 40px;
	}
	.copyright{
		font-family:Calibre-medium;
		font-size:14px;
		font-weight:normal;
		color:#aaa;
		float:left;
		margin:0;
		padding:0;
	}
	
/* #profile
================================================== */
	#profilediv{
		position:relative;
		display:inline-block;
		margin:0 auto;
		width:100%;
	}
	#profilepic{
		position:relative;
		float:left;
		padding:0;
		width:24%;
		margin:0 0 0 14%;
	}
	.profiletextblock{
		margin:64px 0 0 0;
	}
	.rightsideinfo2{
		float:right;
		padding:0;
		width:42%;
		margin:120px 14% 0 0;
		
	}
	.profilelinks{
		font-family:Calibre-light;
	}

/* #Media Queries
================================================== */

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 1439px) {
		
		#header{
			position:relative;
		}
		#herodiv{
			margin:58px 0 0 0;
		}
		
		#profilediv{
			position:relative;
			display:inline-block;
			margin:-110px auto 0 auto;
			width:100%;
			}
		#profilepic{
			position:relative;
			float:left;
			padding:0;
			width:24%;
			margin:0 0 0 14%;
		}
		.rightsideinfo2{
			float:right;
			padding:0;
			width:42%;
			margin:120px 14% 0 0;
		}
		
		.journeynormal{
			padding: 0 24px 0 0;
		}
		.companylogos{
			width:80px;
		}
		.dots{
			width:63px;
			padding: 0 24px 0 0;
		}
}
	
	@media only screen and (min-width: 768px) and (max-width: 1023px) {
		a#logo2{
			width:69px;
			height:50px;
			margin: 0 0 0 48px;
		}
		#nav ul li a{
			font-size:20px;
			line-height:18px;
			font-family:Calibre;
			text-decoration:none;
		}
		#profilediv{
			position:relative;
			display:inline-block;
			margin:-110px auto 0 auto;
			width:100%;
			}
		#profilepic{
			position:relative;
			float:left;
			padding:0;
			width:26%;
			margin:0 0 0 14%;
		}
		.rightsideinfo2{
			float:right;
			padding:0;
			width:40%;
			margin:120px 14% 0 0;
		}
		h1{
			font-size:48px;
			line-height:48px;
		}
		.button{
			padding:24px 24px 24px 24px;
			border-radius:50px;
			border:1px solid #fff;
			color:#fff;
			font-size: 20px;
			font-family:Calibre;
			text-align:center;
			font-weight:normal;
			font-style:normal;
			margin: 56px 0 0 0;
			display:block;
			float:left;
		}
		.journeynormal{
			padding: 0 8px 0 0;
			margin:0;
		}
		.journeylast{
			padding:0;
			margin:0;
		}
		.companylogos{
			width:80px;
		}
		.dots{
			width:50px;
			padding: 0 8px 0 0;
			margin: 40px 0 0 0;
			opacity:0.5;
		}
		.companyname{
			font-size:48px;
			line-height:48px;
		}
		.copy{
			font-size:22px;
			line-height:30px;
			padding:0;
			margin:0;
		}
		.subheader{
			font-size:28px;
			line-height:28px;
			padding:0 0 32px 0;
		}
		.leftsideinfo{
			margin:80px 0 0 0;
			width:36%;
		}
		.rightsideinfo{
			width:58%;
			margin:80px 0 0 0;
			padding:0 0 0 0;
		}
		h2{
			font-size:28px;
			line-height:28px;
			padding-bottom:16px;
		}
		h3{
			font-size:28px;
			line-height:28px;
			padding:0 0 16px 48px;
		}
		#journeydiv{
			margin:120px auto 0 auto;
		}
		.workleft{
			float:left;	
			width:64%;
		}
		.workright{
			float:right;
		}
		
		
		}


	/* All Mobile Sizes (devices and browser) */
	@media only screen and (min-width: 376px) and (max-width: 767px){
		
		#header{
			margin: 24px 0 0 0;
		}
		a#logo2{
			width:69px;
			height:50px;
			margin: 0 0 0 24px;
		}
		#nav{
			margin: 0 24px 0 0;
		}
		#nav ul li a{
			font-size:20px;
			line-height:18px;
			font-family:Calibre;
			text-decoration:none;
		}
		#profilediv{
			position:relative;
			display:inline-block;
			margin:-74px auto 0 auto;
			width:100%;
			}
		#profilepic{
			position:relative;
			float:none;
			padding:0;
			width:50%;
			margin:0 auto 0 auto;
			display:flex;
			justify-content: center;
		}
		.rightsideinfo2{
			float:none;
			padding:0;
			width:auto;
			margin:56px 0 0 0;
			position:relative;
		}
		#profileh1{
			text-align: left;
		}
		#herodiv{
			position:relative;
			display:inline-block;
			margin: 40px 0 0 0;
		}
		#homebg{
			position:relative;
			float:none;
			padding:0;
			width:100%;
		}
		#herocopyblock{
			position:absolute;
			top: 50%;
			-ms-transform: translateY(-50%);
			transform: translateY(-50%);
			padding:0;
			margin:0 auto;
			width:100%;
			text-align:center;
		}
		h1{
			color:#fff;
			font-size:26px;
			line-height:26px;
			padding:0;
			margin:0;
			font-family:Calibre-semibold;
			text-align:center;
			font-weight:normal;
			font-style:normal;
		}
		.buttoncenter{
			text-align:center;
			margin:0 auto;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.button{
			padding:16px 16px 16px 16px;
			border-radius:50px;
			border:1px solid #fff;
			color:#fff;
			font-size: 18px;
			font-family:Calibre;
			text-align:center;
			font-weight:normal;
			font-style:normal;
			margin: 24px auto 0 auto;
		}
		.vl1{
			background-color:#dedede;
			width:1px;
			height:120px;
			margin:40px auto 0 auto;
			padding:0;
			position:relative;
			opacity:0.5;
		}
		
		.vl2{
			background-color:#dedede;
			width:1px;
			height:120px;
			margin:40px auto 0 auto;
			padding:0;
			position:relative;
			opacity:0.5;
		}
		#journeydiv{
			position:relative;
			margin:40px auto 0 auto;
			padding:0;
			z-index:2;
			text-align:center;
		}
		#journeydiv ul{
			margin:48px auto 0 auto;
		}
		.journeynormal{
			padding: 0 24px 0 0;
			margin:0;
		}
		.journeylast{
			padding:0;
			margin:0;
		}
		.companylogos{
			width:44px;
		}
		.dots{
			padding:0;
			display:none;
		}
		.companyname{
			font-size:32px;
			line-height:32px;
		}
		.copy{
			font-size:18px;
			line-height:24px;
			padding:0;
			margin:0;
		}
		.subheader{
			font-size:20px;
			line-height:24px;
			padding:0 0 16px 0;
		}
		.dateloc{
			margin:0 0 16px 0;
		}
		.leftsideinfo{
			float:none;
			text-align:left;
			margin:48px 0 0 0;
			width:auto;
			padding: 0 0 0 0;
		}
		.rightsideinfo{
			margin:40px 0 0 0;
			width:auto;
			padding:0 0 0 0;
		}
		h2{
			font-size:24px;
			line-height:24px;
			padding:0 0 0px 0;
		}
		h3{
			font-size:24px;
			line-height:24px;
			padding:0 0 0px 0;
		}
		.works{
			margin:48px 0 0 0;
			padding: 0 0 0 0;
		}
		.workname{
			font-size:28px;
			line-height:32px;
		}
		.workdes{
			font-size:16px;
			line-height:18px;
		}
		.workleft{
			float:none;
		}
		.workright{
			float:left;
			
		}
		.workbutton{
			padding:16px 16px 16px 16px;
			border-radius:50px;
			border:1px solid #fff;
			color:#fff;
			font-size: 18px;
			font-family:Calibre;
			text-align:center;
			font-weight:normal;
			font-style:normal;
			margin: 24px auto 0 auto;
		}
	
	}

	@media only screen and (max-width: 375px) {
		#header{
			margin: 24px 0 0 0;
		}
		a#logo2{
			width:69px;
			height:50px;
			margin: 0 0 0 24px;
		}
		#nav{
			margin: 0 24px 0 0;
		}
		#nav ul li a{
			font-size:20px;
			line-height:18px;
			font-family:Calibre;
			text-decoration:none;
		}
		#profilediv{
			position:relative;
			display:inline-block;
			margin:-74px auto 0 auto;
			width:100%;
			}
		#profilepic{
			position:relative;
			float:none;
			padding:0;
			width:50%;
			margin:0 auto 0 auto;
			display:flex;
			justify-content: center;
		}
		.rightsideinfo2{
			float:none;
			padding:0;
			width:auto;
			margin:56px 0 0 0;
			position:relative;
		}
		#profileh1{
			text-align: left;
		}
		#herodiv{
			position:relative;
			display:inline-block;
			margin: 40px 0 0 0;
		}
		#homebg{
			position:relative;
			float:none;
			padding:0;
			width:100%;
		}
		#herocopyblock{
			position:absolute;
			top: 50%;
			-ms-transform: translateY(-50%);
			transform: translateY(-50%);
			padding:0;
			margin:0 auto;
			width:100%;
			text-align:center;
		}
		h1{
			color:#fff;
			font-size:22px;
			line-height:22px;
			padding:0;
			margin:0;
			font-family:Calibre-semibold;
			text-align:center;
			font-weight:normal;
			font-style:normal;
		}
		
		.buttoncenter{
			text-align:center;
			margin:0 auto;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		
		.button{
			padding:16px 16px 16px 16px;
			border-radius:50px;
			border:1px solid #fff;
			color:#fff;
			font-size: 18px;
			font-family:Calibre;
			text-align:center;
			font-weight:normal;
			font-style:normal;
			margin: 24px auto 0 auto;
		}
		#journeydiv{
			position:relative;
			margin:40px auto 0 auto;
			padding:0;
			z-index:2;
			text-align:center;
		}
		#journeydiv ul{
			margin:48px auto 0 auto;
		}
		.journeynormal{
			padding: 0 18px 0 0;
			margin:0;
		}
		.journeylast{
			padding:0;
			margin:0;
		}
		.companylogos{
			width:40px;
		}
		.dots{
			padding:0;
			display:none;
		}
		.companyname{
			font-size:32px;
			line-height:32px;
		}
		.copy{
			font-size:18px;
			line-height:24px;
			padding:0;
			margin:0;
		}
		.subheader{
			font-size:20px;
			line-height:24px;
			padding:0 0 16px 0;
		}
		.dateloc{
			margin:0 0 16px 0;
		}
		.leftsideinfo{
			float:none;
			text-align:left;
			margin:48px 0 0 0;
			width:auto;
			padding: 0 0 0 0;
		}
		.rightsideinfo{
			margin:40px 0 0 0;
			width:auto;
			padding:0 0 0 0;
		}
		h2{
			font-size:24px;
			line-height:24px;
			padding:0 0 0px 0;
		}
		h3{
			font-size:24px;
			line-height:24px;
			padding:0 0 0px 0;
		}
		.works{
			margin:48px 0 0 0;
			padding: 0 0 0 0;
		}
		.workname{
			font-size:28px;
			line-height:32px;
		}
		.workdes{
			font-size:16px;
			line-height:18px;
		}
		.workleft{
			float:none;
		}
		.workright{
			float:left;
			
		}
		.workbutton{
			padding:16px 16px 16px 16px;
			border-radius:50px;
			border:1px solid #fff;
			color:#fff;
			font-size: 18px;
			font-family:Calibre;
			text-align:center;
			font-weight:normal;
			font-style:normal;
			margin: 24px auto 0 auto;
		}
		.vl1{
			background-color:#dedede;
			width:1px;
			height:80px;
			margin:40px auto 0 auto;
			padding:0;
			position:relative;
			opacity:0.5;
		}
		
		.vl2{
			background-color:#dedede;
			width:1px;
			height:80px;
			margin:40px auto 0 auto;
			padding:0;
			position:relative;
			opacity:0.5;
		}
		
		
		
		
	}


/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */
	@font-face {
	    font-family: 'Calibre';
		src: url('../fonts/WebFonts/calibre-web-regular.eot');
	    src: url('../fonts/WebFonts/calibre-web-regular.eot?#iefix') format('embedded-opentype'),
			 url('http://kennethchandesign.com/fonts/WebFonts/calibre-web-regular.woff2') format('woff2'),
	         url('http://kennethchandesign.com/fonts/WebFonts/calibre-web-regular.woff') format('woff');
		font-style: normal;
		}

	@font-face {
	    font-family: 'Calibre-medium';
		src: url('../fonts/WebFonts/calibre-web-medium.eot');
	    src: url('../fonts/WebFonts/calibre-web-medium.eot?#iefix') format('embedded-opentype'),
			 url('http://kennethchandesign.com/fonts/WebFonts/calibre-web-medium.woff2') format('woff2'),
	         url('http://kennethchandesign.com/fonts/WebFonts/calibre-web-medium.woff') format('woff');
		font-style: normal;
		}

	@font-face {
	    font-family: 'Calibre-semibold';
		src: url('../fonts/WebFonts/calibre-web-semibold.eot');
	    src: url('../fonts/WebFonts/calibre-web-semibold.eot?#iefix') format('embedded-opentype'),
			 url('http://kennethchandesign.com/fonts/WebFonts/calibre-web-semibold.woff2') format('woff2'),
	         url('http://kennethchandesign.com/fonts/WebFonts/calibre-web-semibold.woff') format('woff');
		font-style: normal;
		}

	@font-face {
	    font-family: 'Calibre-light';
		src: url('../fonts/WebFonts/calibre-web-light.eot');
	    src: url('../fonts/WebFonts/calibre-web-light.eot?#iefix') format('embedded-opentype'),
			 url('http://kennethchandesign.com/fonts/WebFonts/calibre-web-light.woff2') format('woff2'),
	         url('http://kennethchandesign.com/fonts/WebFonts/calibre-web-light.woff') format('woff');
		font-style: normal;
		}