svg
	{
		fill:#ffffff;
		width: 1em;
		height: 1em;
		margin-right: 3px;
		position: relative;
		top: 2px;
		font-size: 12px;
		display: inline-block;
	}
	
	body
	{
		font-family: 'Quicksand', sans-serif;
		letter-spacing: 1px;
		color: #fff;
		background:#000;
	}
	
	h1 
	{
		letter-spacing: 2px;
	}
	h1.fat 
	{
		font-weight: 800;
		text-transform: uppercase;
		text-shadow: 1px 1px 1px rgba(0,0,0,0.75);
		font-size: 30px;
		line-height: 38px;
	}
	h2, h1.pretendh2
	{
		font-weight: normal;
		text-transform: uppercase;
		font-size: 26px;
		line-height: 33px;
		letter-spacing: 2px;
	}
	h2:after, h1.pretendh2:after {
		content: ""; /* This is necessary for the pseudo element to work. */ 
		display: block; /* This will put the pseudo element on its own line. */
		width: 80px; /* Change this to whatever width you want. */
		padding-top: 7px; /* This creates some space between the element and the border. */
		border-bottom: 1px solid #fff; /* This creates the border. Replace black with whatever color you want. */
		padding-bottom:0;
	}
	
	h2.noafter:after { display: none;}
	
	h3 { font-size: 18px; font-weight: 800; text-transform: uppercase;}
	
	a
	{
		color: #fff;
	}
	
	a:hover
	{
		color: #fff;
	}
	
	p
	{
		line-height: 28px;
	}
	
	button
	{
		border: 0;
		color: #fff;
		
	}
	
	.breadcrumb { background:none; padding: 0; font-size: 12px;}
	
	.mybtn
	{
		background:#000;
		display: inline-block;
		padding: 8px 25px;
		text-transform: uppercase;
		-webkit-box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.5); 
		box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.5);
		text-align: center;
	}
	.mybtn:hover { background:#282828; text-decoration: none; }
	.mybtn svg { float: left; margin: 5px 4px 0 0; font-size: 10px;}
	
	.mybtn.white
	{
		background:#fff;
		color: #000;
	}
	.mybtn.white svg { fill:#000;}
	
	.topmenu
	{
		background-color: rgba(26, 26, 26, 1);
	}
	
	.topmenu .logo {float: left; margin-right: 50px; margin-left:13px; margin-top: -3px;}
	.topmenu .logo a { text-transform: uppercase; font-weight: 600;}
	.topmenu .logo svg { width: 100px; height: 16px; fill:#fff; }
	
	.topmenu .container { font-size: 14px; color: #fff; padding: 10px 0;}
	.topmenu .menuitems
	{
		font-weight: 300;
		text-transform: uppercase;
		float: right;
		margin: 0 10px 0 0;
	}
	.topmenu .menuitems .menutoggle svg { float: left; margin: 3px 5px 0 0;}
	.topmenu .menuitems .menutoggle:hover { cursor: pointer;}
	
	.topmenu .menuitems .menutotal
	{ 
		display: none;
		
		height: 100vh;
		
		background: url(../images/mobile_menu_image.jpg) #fff no-repeat;
		background-position: 0 230px;
		background-size: contain;
		
		text-align: center;
		color: #000;
		position: absolute;
		left: 0;
		right: 0;
		top: 41px;
		padding-top:25px;
		
	}
	.topmenu .menuitems .menutotal a
	{
		color: #000;
		text-decoration: underline;
		font-size: 16px;
		display: table; 
		margin: 0 auto;
		line-height: 45px;
		
	}
	.topmenu .menuitems .menutotal a:hover { text-decoration: none; color: #777;}
	.topmenu .menuitems .menutotal a.active { font-weight: bold;}

	.topmenu .menuitems .menutotal span
	{
		font-size: 21px;
		font-weight: bold;
		display: block;
	}
	.topmenu .menuitems .menutotal .closemenu 
	{
		fill:#000;
		font-size:25px;
		position: absolute;
		right: 15px;
		top: 15px;
		cursor: pointer;
	}
	
	.topmenu .menuitems .menutotal em
	{
		font-size: 16px;
		font-style: normal;
		font-weight: 100;
		display: block;
		margin: 10px 0;
	}
	
	.mainscreen { height: 100vh; position: relative;}
	.mainscreen .container { padding-left:0; padding-right:0; }
	
	.mainscreen.homepage { background: url(../images/homepage/home_desktop-3.jpg) #000 no-repeat; background-size:cover; margin-top:40px; transition: background 1.5s linear; background-position:center center; }
	
	.preload-images { display: none;}
	
	.mainscreen.homepage .introduction
	{
	  margin: 0;
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  -ms-transform: translate(-50%, -50%);
	  transform: translate(-50%, -50%);
	  text-align: center;
	  padding:50px 0;
	  width: 100%;
		
	}
	.mainscreen.homepage .introduction h2 { 
		font-weight: 300; 
		text-transform: uppercase; 
		font-size: 21px;
		margin: 20px 0 25px 0;
	}
	.mainscreen.homepage .introduction h2:after { display: none;}
	.mainscreen.homepage .introduction .mybtngroup { width: 200px; display: table; margin: 0 auto;}
	.mainscreen.homepage .introduction .mybtn
	{
		text-align: left;
		margin-bottom: 5px;
		width: 100%;
	}
	
	/* whitescheme */
	.whitescheme { background: #fff; color: #000; font-weight: 100; padding: 50px 0;}
	.whitescheme h2 { color: #000; display: block; margin-bottom: 30px; font-weight: 400;}
	.whitescheme h2:after {
		border-bottom: 1px solid #000;
	}
	.whitescheme .mybtn:hover { background: #484848;}
	.whitescheme.nobtmpad { padding-bottom: 0;}
	
	.whitescheme.blackedit { background: #000; color: #fff;}
	.whitescheme.blackedit h2 { color: #fff; }
	.whitescheme.blackedit h2:after { border-color: #fff; }
	.whitescheme.blackedit .mybtn:hover { background: #999;}
	
	/*experience*/
	.home_experience
	{
		padding-bottom:230px;
		position: relative;
		overflow: hidden;

	}
	
	.home_experience .inner
	{
		position: relative;
		z-index: 10;
	}
	
	.home_experience .mybtn 
	{
		margin-top: 20px;
	}
	
	.home_experience .imgbg
	{
		background: url(../images/homepage/chadee-homepage.jpg) no-repeat;
		background-size:contain;
		width: 220px;
		height: 285px;
		position: absolute;
		right: -20px;
		bottom: 0px;
		z-index: 1;
		
	}
	
	/* helping brands */
	.helpingbrands
	{
		border-top:1px solid #eee;
		border-bottom:1px solid #eee;
		background:#fff;

	}
	.helpingbrands .container { padding:0; }
	
	.helpingbrands .brandsinner { display: table; margin: 0 auto; }
	.helpingbrands .brandsinner em 
	{ 
		color: #000; 
		text-transform: uppercase; 
		font-weight: 100; 
		font-size: 18px; 
		color: #777;
		display: block;
		width: 100%;
		margin-bottom: 25px;
		font-style: normal;
	}
	
	.helpingbrands .logorow { text-align: center;}
	.helpingbrands .logorow span { display: inline-block; margin-left:15px; margin-right: 15px; margin-bottom: 20px; }
	.helpingbrands .logorow span:first-of-type { margin-left: 0px;}
	.helpingbrands .logorow span:last-of-type { margin-right: 0px; margin-bottom: 0;}
	/*.helpingbrands .logorow a:hover { opacity: 0.7; }*/
	.helpingbrands .logorow { margin-bottom: 30px; margin-top:30px;}
	
	/* reviews */
	.reviews .rvwitem { display: none;}
	.reviews .rvwitem img { display: table; margin: 0 auto; margin-top: 25px;}
	.reviews .rvwitem:first-of-type { display: inline;}
	
	/* bottom c2a */
	.c2abottom { text-align: center;}
	.c2abottom h2:after { display: none;  }
	.c2abottom .mybtn svg { font-size: 15px; margin: 3px 8px 0 0; }
	
	.c2abottom .mybtngroup { width: 240px; display: table; margin: 0 auto;}
	.c2abottom .mybtn
	{
		text-align: left;
		margin-bottom: 5px;
		width: 100%;
	}

	.c2abottom .bottomlogo { display: table; margin: 0 auto; margin-top: 25px; }
	
	.c2abottom.whitescheme.blackedit .bottomlogo svg { fill:#fff; width: 151px; height: 55px; }
	.c2abottom.whitescheme .bottomlogo svg { fill:#000; width: 151px; height: 55px; }

	/*page*/
	.page .whitescheme { padding-top:55px; }
	
	/*portfolio*/
	.page.portfolio .portitems .portcol {padding:8px; box-sizing: border-box; }
	/*.page.portfolio .portitems .portcol img { border: 1px solid #777;}*/
	.page.portfolio .portitems .portcol:hover { border: 1px solid #fff; }
	.page.portfolio .portitems .portcol.promocol:hover { border: none; }
	.page.portfolio .portitems { padding-left:14px; padding-right:14px;}
	.page.portfolio .portitems .portcol.promocol .innerpromo { padding:20px 0; }
	.page.portfolio .portitems .portcol.promocol h2 { text-align: center; margin-bottom: 10px;}
	.page.portfolio .portitems .portcol.promocol h2:after { display: none;}
	.page.portfolio .portitems .portcol.promocol .mybtn { display: table; margin: 0 auto;}
	.page.portfolio .portitems .portcol .projectinfo { display: none; }
	.page.portfolio .portitems .portcol .projectinfo:hover { text-decoration: none;}

	/*project*/
	.page.project h1 { margin-bottom: 10px; }
	.page.project .selectedproject { border:2px solid #fff; }
	.page.project .thumbcol {padding:1px; }
	.page.project .thumbitems {padding:1px;  padding-left:14px; padding-right:14px; margin-bottom: 20px;}
	.page.project .thumbside strong { font-weight: 600; }
	
	.page.project .thumbcol img { box-sizing: border-box;}
	.page.project .thumbcol img.activeview { border:2px solid #fff;}
	.page.project .thumbcol img:hover { border:2px solid #fff; cursor: pointer;}	

	.page.project .thumbside .mybtn svg {transform: rotate(180deg);  }
	.page.project .thumbside p em { font-style: normal; margin-top:10px; display: block;}
	.page.project .mainview { margin-bottom:5px;}
	
	.page.project .inside_nav { display: table; margin:0 auto; margin-bottom: 12px; font-size: 12px; color: #fff;}
	.page.project .inside_nav strong { margin: 0 8px;}
	.page.project .inside_nav span { cursor:pointer;}
	.page.project .inside_nav span em { font-style: normal; }
	.page.project .inside_nav span:hover em { border:0;}
	.page.project .inside_nav span.navbut { border:1px solid #888; padding: 3px 5px; border-radius:2px;}
	
	.page.project .inside_nav span:first-of-type svg { transform: rotate(180deg); margin-right: -2px; margin-left:0;}
	.page.project .inside_nav span svg { fill:#fff; margin-top:-5px; margin-left:-2px; margin-right: 0px;}
	.page.project .portfolio { margin-top: 25px;}
	
	/*contact*/
	.page.contact h1 { margin-bottom: 25px;}
	.page.contact .contactoption { margin-bottom: 25px;}
	.page.contact .contactoption strong { font-size: 14px; text-transform: uppercase; display: block; font-weight: 600;}
	.page.contact .contactoption span { float: left; }
	.page.contact .contactoption svg { width: 20px; height: 20px; margin-top:10px; margin-right: 12px;}
	.page.contact .home_experience .imgbg { 
		background: url(../images/chadeecontact.jpg) no-repeat; 		
		background-size:contain;
		width: 220px;
		height: 285px;
		position: absolute;
		right: -20px;
		bottom: 0px;
		z-index: 1;
	}
	.page.contact .home_experience .inner { max-width: 500px;}
	.page.contact .blackedit { padding-bottom:20px;}
	
	
	.page.about .content .mybtn { margin-top: 15px;}
	.page.about .top_page { text-align: center; margin-bottom: 40px;}
	.page.about .top_page h2 { font-weight: 200; margin-top: 10px; font-size: 18px; margin-bottom: 20px;}
	.page.about .imgholder { height: 300px; overflow: hidden; margin-bottom: 30px; }
	.page.about .imgholder img { display: table; margin: 0 auto;}
	.page.about .home_experience.moreinfo h3 { margin-top: 45px;}
	
	.page.about .content .mybtn svg { font-size: 15px; margin: 3px 8px 0 0; }
	
	
	/*Small devices (landscape phones, 576px and up)*/
	@media (min-width: 375px) 
	{ 
		.page.about .imgholder { height: 380px; }
	}
	
	/*Small devices (landscape phones, 576px and up)*/
	@media (min-width: 576px) 
	{  
		.topmenu .menuitems { margin: 0; }
		.topmenu .menuitems .menutotal 
		{ 
			display: inline-block;
			
			height: auto;
			background:transparent;
			text-align: left;
			color: #fff;
			position: relative;
			padding: 0;
			top: 0;
		}
		.topmenu .menuitems .menutotal a
		{
			color: #fff;
			text-decoration: none;
			font-size:14px;
			display: inline;
			margin: 0;
			line-height: normal;
			margin-right:15px;
		}
		
		.topmenu .menuitems .menutoggle { display: none;}
		.topmenu .logo {margin-left:0px;}
		
		.topmenu .menuitems .menutotal span { display: none;}
		.topmenu .menuitems .menutotal a:first-of-type { display: none;}
		.topmenu .menuitems .menutotal .closemenu { display: none;}
		 
		.mainscreen.homepage { background-size:contain; }
		h1.fat 
		{
			font-size: 35px;
			line-height: 45px;
		}
		.mainscreen.homepage .introduction h2 { 
			font-size: 26px;
			margin: 45px 0 50px 0;
		}
		.mainscreen.homepage .introduction
		{
			width: 550px;
		}
		
		.container { padding-left:0;}
		
		
	}

	/*Medium devices (tablets, 768px and up)*/
	@media (min-width: 768px) 
	{ 
		.mainscreen.homepage .introduction .mybtn
		{
			margin-bottom: 10px;
		}
		.mainscreen.homepage
		{
			background-position:0% 0%;
		}
		
		
		.helpingbrands .logorow { display: flex; align-items: center; flex-wrap: wrap; }
		.helpingbrands .logorow span { margin-bottom: 0px; margin-right: 20px; margin-left: 20px;}
		.helpingbrands .logorow img { max-width: 120px;}
		.helpingbrands .brandsinner em 
		{ 
			margin-bottom: 15px;
		}
		
		.reviews .rvwitem { display: inline;}
		.reviews .rvwitem:last-of-type { display: none;}
		
		.page .whitescheme { padding-top:80px; }
		.page.portfolio .portitems .portcol {padding:5px; }
		.page.portfolio .portitems { padding-left:13px; padding-right:13px;}
		
		.page.project .mainview { margin-bottom:0px;}
		.page.project .thumbitems .thumbcol {padding:5px; }
		.page.project .thumbitems { padding-left:13px; padding-right:13px;}
		.page.project .thumbside {margin-top: 60px;}
		
		.page.project .inside_nav { display: none;}
		.page.project h1 { margin-bottom: 25px; }
		.page.project .portfolio { margin-top: 80px;}
		
		.page.contact .contactoption svg { width: 25px; height: 25px; }
		.page.contact .contactoption { margin-bottom: 0px;}
		.page.contact h1 { margin-bottom: 45px;}
		.page.contact .colemail { padding: 0;}
		.page.contact .blackedit { padding-bottom:50px;}
		
		.page.about .imgholder { height: 550px; }
		.page.about .content .top_page { margin-bottom: 60px;}
		.page.about .content h1 { margin-top: -10px;}
		
		.topmenu .logo svg { width: 130px; height: 21px;  }
	}

	/*Large devices (desktops, 992px and up)*/
	@media (min-width: 992px) 
	{  
		.mainscreen.homepage .introduction
		{
			width: 600px;
			padding: 50px;
			background-color: rgba(26, 26, 26, 0.5);
		}
		
		/*experience*/
		.home_experience { padding-bottom:160px;}
		.home_experience .inner
		{

			margin-top:200px;
		}
		
		.home_experience p
		{
			max-width: 400px;
		}
		
		.home_experience .imgbg
		{
			width: 500px;
			height: 648px;
			right: -40px;
			top: 0;
		}
		
		.page.contact .home_experience .imgbg
		{
			width: 500px;
			height: 648px;
			right: -40px;
			top: 0;
		}
		
		.page.contact .home_experience .inner
		{

			margin-top:70px;
		}
		
		.page.about .home_experience.moreinfo .inner { margin-top: 0; max-width: 600px; }
		.page.about .home_experience.moreinfo .inner p { max-width: 100%;}
		
		/* helping brands */
		.helpingbrands .brandsinner em 
		{ 
			margin-right: 20px; 
			display: inline-block;
			margin-bottom: 0px;
			width: auto;
		}
		
		.reviews { }
		.helpingbrands .logorow { margin-bottom: 50px; margin-top:50px;}
		.c2abottom { padding: 80px 0;}
		
		.c2abottom h2 { font-size: 35px; font-weight: 800;}

		.page.portfolio .portitems .portcol .projectinfo { 
			position: absolute; 
			width: 200px; 
			padding: 20px;
			height: 90px; 
			top: 50%; 
			left: 50%; 
			margin-top:-25px; 
			margin-left: -100px; 
			background-color: rgba(255, 255, 255, 0.8); 
			color: #000; 
			display: none;
		}
		
	}

	/*Extra large devices (large desktops, 1200px and up)*/
	@media (min-width: 1200px) 
	{  
		.mybtn { transition: background 0.3s ease; }
		.topmenu .menuitems .menutotal a { transition: color 0.3s ease; }
		.topmenu
		{
			background-color: rgba(26, 26, 26, 0.5);
		}
		.topmenu .logo {margin-top: -4px;}
		
		h1.fat 
		{
			font-size: 45px;
			line-height: 55px;
		}
		.mainscreen.homepage { margin-top:0px; }
		
		.home_experience p
		{
			max-width: 500px;
		}
		.reviews .rvwitem:last-of-type { display: inline;}
		
		
	}