@font-face {
    font-family: 'butlermedium';
    src: url('fonts/butler_medium-webfont.woff2') format('woff2'),
         url('fonts/butler_medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

html,
button,
input,
select,
textarea {
    color: #202020;
}

html {
	width: 100%;
	background: #FFF;
}
body {
	width: 100%;
	background: #FFF;
    font-size: 1em;
    line-height: 1.4;
}

::-moz-selection {
    background: #33DE5F;
    color:#FFF;
    text-shadow: none;
}

::selection {
    background: #33DE5F;
    color:#FFF;
    text-shadow: none;
}

::-webkit-input-placeholder {
  color: #A0A0A0;
}
::-moz-placeholder {
  color: #A0A0A0;
}
:-ms-input-placeholder {
  color: #A0A0A0;
}
:-moz-placeholder {
  color: #A0A0A0;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

img {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

html.noflow {
	overflow: hidden;
}

.container {
	width:1000px;
	margin: 0 auto;
	list-style: none;
}
.purple_container {
	padding: 40px 0;
	background-color: #4f4ca9;
	background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(79, 76, 169)), to(rgb(96, 37, 202)));
	background-image: -webkit-linear-gradient(top, rgb(79, 76, 169), rgb(96, 37, 202));
	background-image: -moz-linear-gradient(top, rgb(79, 76, 169), rgb(96, 37, 202));
	background-image: -o-linear-gradient(top, rgb(79, 76, 169), rgb(96, 37, 202));
	background-image: -ms-linear-gradient(top, rgb(79, 76, 169), rgb(96, 37, 202));
	background-image: linear-gradient(top, rgb(79, 76, 169), rgb(96, 37, 202));
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#4f4ca9', EndColorStr='#6025ca');
}
.green_container {
	padding: 40px 0;
	background-color: #1bd04a;
	/* background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(27, 208, 74)), to(rgb(51, 222, 95)));
	background-image: -webkit-linear-gradient(top, rgb(27, 208, 74), rgb(51, 222, 95));
	background-image: -moz-linear-gradient(top, rgb(27, 208, 74), rgb(51, 222, 95));
	background-image: -o-linear-gradient(top, rgb(27, 208, 74), rgb(51, 222, 95));
	background-image: -ms-linear-gradient(top, rgb(27, 208, 74), rgb(51, 222, 95));
	background-image: linear-gradient(top, rgb(27, 208, 74), rgb(51, 222, 95));
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#1bd04a', EndColorStr='#33de5f'); */
}

#header_container {
    position:fixed;
    top:0;
    left:0;
    right:0;
    display: block;
    width:100%;
height:600px;
background-color:#652fcd;
/*	background-color: #4f4ca9;
	background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(79, 76, 169)), to(rgb(96, 37, 202)));
	background-image: -webkit-linear-gradient(top, rgb(79, 76, 169), rgb(96, 37, 202));
	background-image: -moz-linear-gradient(top, rgb(79, 76, 169), rgb(96, 37, 202));
	background-image: -o-linear-gradient(top, rgb(79, 76, 169), rgb(96, 37, 202));
	background-image: -ms-linear-gradient(top, rgb(79, 76, 169), rgb(96, 37, 202));
	background-image: linear-gradient(top, rgb(79, 76, 169), rgb(96, 37, 202));
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#4f4ca9', EndColorStr='#6025ca'); */
/*	border-top:#33de5f 10px solid;*/
}
#header {
	width:100%;
	height:500px;
	background: transparent url(../img/design-banner-2.png) no-repeat center center;
        background-size:cover;
	z-index: 0;
}
	
	#header h1 {
		display: block;
		height: 220px;
		line-height: 110px;
		padding: 0 0 0 260px;
		margin: 0 0 20px 0;
		font-family: 'butlermedium', serif;
		font-weight: bold;
		font-size: 100px;
		color:#FFF; /*#7700FF; #AA114F */
		z-index: 2;
	}
	#header h2 {
		position: relative;
		display: block;
		height: 40px;
		margin: 0;
		padding: 0 0 0 320px;
		font-family: 'butlermedium', serif;
		font-size: 40px;
		line-height: 40px;
		color:#33de5f;
		z-index: 2;
	}
		#header h2::before {
			content:" ";
			position: absolute;
			left:260px;
			top:18px;
			display: block;
			width:40px;
			height:4px;
			background-color:#33de5f;
		}

#main_content {
    position:relative;
	top:490px;
	left:0;
	right:0;
	display: block;
	width:100%;
	height: 100%;
	background:#FFF;
    z-index:2;
}
	
	#hire {
		background:#FFF;
		padding: 40px 0;
		-webkit-transition: all .1s linear;
		-moz-transition: all .1s linear;
		transition: all .1s linear;
	}
		#hire * {
			-webkit-transition: all .1s linear;
			-moz-transition: all .1s linear;
			transition: all .1s linear;
		}
		#hire a {
			float:left;
			position: relative;
			display: block;
			width:220px;
			height:80px;
			line-height: 80px;
			background-color:#FDC315;
			font-size: 36px;
			font-family: 'Rubik', sans-serif;
			font-weight: 400;
			color:#FFF;
			text-align: center;
			text-decoration: none;
			-webkit-transition: background-color .1s linear;
			-moz-transition: background-color .1s linear;
			transition: background-color .1s linear;
			-webkit-border-radius: 10px;
			-moz-border-radius: 10px;
			border-radius: 10px;
			
			-webkit-animation-name: bounce;
			animation-name: bounce;
			-webkit-transform-origin: center bottom;
			transform-origin: center bottom;
			-webkit-animation-duration: 1s;
			-webkit-animation-delay: 1s;
			animation-delay: 1s;
			animation-duration: 1s;
			-webkit-animation-fill-mode: both;
			animation-fill-mode: both;
		}
			#hire a:hover {
				background:#fdb109;
			}
		
		#hire p {
			float:right;
			width:740px;
			height:80px;
			padding: 0;
			margin: 0;
			line-height: 80px;
			font-size: 40px;
			font-family: 'Rubik', sans-serif;
			font-weight: 400;
			color:#6025CA;
		}
		
		#hire p strong {
			color:#33DE5F;
			font-weight: 400;
			border-bottom: #33DE5F 4px solid;
		}
		
#portfolio {
	padding: 0;
	background:#FFF;
}
	#portfolio h3 {
		position: relative;
		display: block;
		padding: 40px 0 40px 260px;
		margin: 0;
		line-height: 120px;
		font-family: 'butlermedium', serif;
		font-weight: bold;
		font-size: 100px;
		color: #6025CA;
		z-index: 2;
	}
		#portfolio h3::before {
			position: absolute;
			top:98px;
			left:0;
			display: block;
			width:220px;
			height:4px;
			background-color: #6025CA;
			content: " ";
		}
		
		#portfolio .purple_container h3 {
			color:#FFF;
		}
		#portfolio .purple_container h3::before {
			background-color:#FFF;
		}
	
	.work {
		position: relative;
		padding: 40px 0 40px 260px;
	}
	.work > img {
		position: absolute;
		top: 40px;
		left: 0;
		display: block;
		width: 220px;
		height: 100px;
		cursor: pointer;
	}
	.work h4 {
		padding: 0 0 20px 0;
		margin: 0;
		line-height: 50px;
		font-family: 'Rubik', sans-serif !important;
		font-weight: 400;
		color: #FDC315;
		font-size: 50px;
		-webkit-transition: color .1s linear;
		-moz-transition: color .1s linear;
		transition: color .1s linear;
		cursor: pointer !important;
	}
		.work h4:hover {
			color:#fdb109;
		}
	.work p {
		position: relative;
		padding: 0 0 0 40px;
		margin: 0;
		line-height: 24px;
		font-family: 'Rubik', sans-serif !important;
		font-weight: 400;
		color:#33DE5F;
		font-size: 20px;
	}
		.green_container .work p {
			color:#FFF;
		}
		.work p::before {
			position: absolute;
			top:10px;
			left:0;
			display: block;
			width: 30px;
			height: 2px;
			background:#33DE5F;
			content:" ";
		}
		.green_container .work p::before {
			background-color:#FFF;
		}

#portfolio figure.portfolio-item {
	position: relative;
	float: left;
	overflow: hidden;
	width: 480px;
	height: 480px;
	margin: 0 40px 40px 0;
	background-color: #33DE5F;
	text-align: center;
	-webkit-transition: all .1s linear;
	-moz-transition: all .1s linear;
	transition: all .1s linear;
	cursor: pointer;
}
	#portfolio figure.portfolio-item:hover {
		background:#FFF;
	}

#portfolio figure.portfolio-item img {
	position: relative;
	display: block;
	width: 480px;
	height: 480px;
	z-index: 1;
}

#portfolio figure figcaption {
	color: #fff;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

#portfolio figure figcaption::before,
#portfolio figure figcaption::after {
	pointer-events: none;
}

#portfolio figure figcaption,
#portfolio figure figcaption > a {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
}

/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
#portfolio figure figcaption > a {
	z-index: 1000;
	text-indent: 200%;
	white-space: nowrap;
	font-size: 0;
	opacity: 0;
}

#portfolio figure.portfolio-item h2 {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 0 20px;
	margin: 0;
	width: 100%;
	height: 70px;
	line-height: 70px;
	text-align: left;
	font-size: 30px;
	font-weight: 300;
	color: #6025CA;
	font-family: 'Rubik', sans-serif !important;
	-webkit-transition: all .1s linear;
	-moz-transition: all .1s linear;
	transition: all .1s linear;
	box-sizing: border-box;
	z-index: 2;
}
	#portfolio figure.portfolio-item.small h2 {
		font-size: 20px;
	}
	#portfolio figure.portfolio-item h2::before {
		position: absolute;
		left:0;
		right: 0;
		bottom: -70px;
		display: block;
		height: 70px;
		background-color: #fdc315;
		background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(253, 195, 21)), to(rgb(253, 177, 9)));
		background-image: -webkit-linear-gradient(top, rgb(253, 195, 21), rgb(253, 177, 9));
		background-image: -moz-linear-gradient(top, rgb(253, 195, 21), rgb(253, 177, 9));
		background-image: -o-linear-gradient(top, rgb(253, 195, 21), rgb(253, 177, 9));
		background-image: -ms-linear-gradient(top, rgb(253, 195, 21), rgb(253, 177, 9));
		background-image: linear-gradient(top, rgb(253, 195, 21), rgb(253, 177, 9));
		filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#fdc315', EndColorStr='#fdb109');
		content: " ";
		-webkit-transition: all .1s linear;
		-moz-transition: all .1s linear;
		transition: all .1s linear;
		z-index: -1;
	}

#portfolio figure.portfolio-item h2 i {
	color: #33DE5F;
	font-size: 20px;
	font-style: normal;
	word-spacing: 1px;
	margin: 0 0 0 20px;
	padding: 0;
	-webkit-transition: all .1s linear;
	-moz-transition: all .1s linear;
	transition: all .1s linear;
}
	#portfolio figure.portfolio-item.small h2 i {
		font-size: 14px;
	}

#portfolio figure.portfolio-item:hover h2,
#portfolio figure.portfolio-item:hover h2 i {
	color:#FFF;
}
#portfolio figure.portfolio-item:hover h2::before {
	bottom:0;
}

#dribbble {
	min-height: 380px;
	background:#ea4c89;
}
	#dribbble h3 {
		position: relative;
		display: block;
		padding: 40px 0 40px 260px;
		margin: 0;
		line-height: 80px;
		letter-spacing: 1px;
		font-family: 'butlermedium', serif;
		font-weight: bold;
		font-size: 60px;
		color:#FFF;
		z-index: 2;
	}
		#dribbble h3::before {
			position: absolute;
			top:78px;
			left:0;
			display: block;
			width:220px;
			height:4px;
			background-color: #FFF;
			content: " ";
		}
	
	#dribbble #shots a {
		float:left;
		display: block;
		width:220px;
		height:165px;
		margin: 0 40px 40px 0;
		overflow: hidden;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 10px;
	}
		#dribbble #shots a img {
			width:100%;
		}
	#dribbble #shots a:nth-child(4n) {
		margin-right:0;
	}

#about {
	position: relative;
}

#about h3 {
	position: relative;
	display: block;
	padding: 40px 0 40px 260px;
	margin: 0;
	line-height: 80px;
	letter-spacing: 1px;
	font-family: 'butlermedium', serif;
	font-weight: bold;
	font-size: 60px;
	color:#6025CA;
	z-index: 2;
}
	#about h3::before {
		position: absolute;
		top:78px;
		left:0;
		display: block;
		width:220px;
		height:4px;
		background-color: #6025CA;
		content: " ";
	}
	
	#about p {
		padding: 0 0 40px 260px;
		margin: 0;
		line-height: 30px;
		font-family: 'Rubik', sans-serif !important;
		font-weight: 400;
		color: #33DE5F;
		font-size: 20px;
	}
		#about p a {
			color: #FDC315;
			border-bottom: 2px solid #FDC315;
			text-decoration: none;
		}
		
		#about p a:hover {
			color:#fdb109;
			border-color: #fdb109;
		}

#footer {
	border-bottom:#4f4ca9 10px solid;
	background-color: #1bd04a;
	background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(27, 208, 74)), to(rgb(51, 222, 95)));
	background-image: -webkit-linear-gradient(top, rgb(27, 208, 74), rgb(51, 222, 95));
	background-image: -moz-linear-gradient(top, rgb(27, 208, 74), rgb(51, 222, 95));
	background-image: -o-linear-gradient(top, rgb(27, 208, 74), rgb(51, 222, 95));
	background-image: -ms-linear-gradient(top, rgb(27, 208, 74), rgb(51, 222, 95));
	background-image: linear-gradient(top, rgb(27, 208, 74), rgb(51, 222, 95));
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#1bd04a', EndColorStr='#33de5f');
}
	#footer h3 {
		position: relative;
		display: block;
		padding: 40px 0 40px 260px;
		margin: 0;
		line-height: 80px;
		letter-spacing: 1px;
		font-family: 'butlermedium', serif;
		font-weight: bold;
		font-size: 60px;
		color: #6025CA;
		z-index: 2;
	}
		#footer h3::before {
			position: absolute;
			top: 78px;
			left: 0;
			display: block;
			width: 220px;
			height: 4px;
			background: #6025CA;
			content: " ";
		}
	
	#footer p {
		margin: 0;
		padding: 0 0 40px 0;
		line-height: 30px;
		font-family: 'Rubik', sans-serif;
		font-weight: 400;
		font-size: 20px;
		color:#6025CA;
	}
	#socials {
		position: absolute;
		top: 160px;
		left: 0;
		display: block;
		width:220px;
	}
		.social {
			display: block;
			width:220px;
			height: 80px;
			margin: 0 0 40px 0;
			padding: 0;
			line-height: 80px;
			background-color: #FDC315;
			color:#FFF;
			font-family: 'Rubik', sans-serif;
			font-weight: 400;
			font-size: 30px;
			text-decoration: none;
			text-align: center;
			-webkit-transition: all .1s linear;
			-moz-transition: all .1s linear;
			transition: all .1s linear;
			-webkit-border-radius: 10px;
			-moz-border-radius: 10px;
			border-radius: 10px;
		}
			.social:hover {
				background:#fdb109;
			}

#contact-bg {
	position: fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	display:none;
	padding: 86px 0 0 0;
	background:#1bd04a; /* rgba(51, 222, 95, 0.75); */
	overflow:auto;
	z-index: 100;
	-webkit-transform: translate3d(0, 3000px, 0);
	-moz-transform: translate3d(0, 3000px, 0);
	transform: translate3d(0, 3000px, 0);
}
	#contact {
		position: relative;
		display: block;
		min-width: 600px;
		width:100%;
		background:#FFF;
		overflow: hidden;
	    -webkit-transform: translate3d(0, 3000px, 0);
	    -moz-transform: translate3d(0, 3000px, 0);
	    transform: translate3d(0, 3000px, 0);
	}

#loader {
	position: fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	display: block;
	background: #FFF;
	z-index: 1000;
}

#project-bg {
	position: fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	display:none;
	padding: 86px 0 0 0;
	background: #4f4ca9; /* rgba(96, 37, 202, 0.75); */
	overflow:auto;
	z-index: 100;
	-webkit-transform: translate3d(0, 3000px, 0);
	-moz-transform: translate3d(0, 3000px, 0);
	transform: translate3d(0, 3000px, 0);
}
	#project {
		position: relative;
		display: block;
		min-width: 100%;
		width:100%;
		background:#FFF;
		-webkit-transform: translate3d(0, 3000px, 0);
		-moz-transform: translate3d(0, 3000px, 0);
		transform: translate3d(0, 3000px, 0);
	}
		#contact-close,
		#project-close {
			position:fixed;
			top: 20px;
			left: 28px;
			display: none;
			width:40px;
			height: 40px;
			margin: 0;
			text-align: center;
			line-height: 35px;
			font-size: 30px;
			color:#FDC315;
			background:#FFF;
			border:#FDC315 3px solid;
			-webkit-border-radius:20px;
			-moz-border-radius:20px;
			border-radius:20px;
			cursor: pointer;
			z-index: 110;
			-webkit-transition: background .1s linear, color .1s linear;
			-moz-transition: background .1s linear, color .1s linear;
			transition: background .1s linear, color .1s linear;
		}
			#contact-close:hover,
			#project-close:hover {
				background:#FDC315;
				color:#FFF;
			}
		
		#project-info #project-container {
			max-width: 800px;
			padding: 20px;
			margin: 0 auto;
			text-align: center;
		}
		
		#project-links {
			width:100%;
			padding: 40px 0;
			background-color: #1bd04a;
			background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(27, 208, 74)), to(rgb(51, 222, 95)));
			background-image: -webkit-linear-gradient(top, rgb(27, 208, 74), rgb(51, 222, 95));
			background-image: -moz-linear-gradient(top, rgb(27, 208, 74), rgb(51, 222, 95));
			background-image: -o-linear-gradient(top, rgb(27, 208, 74), rgb(51, 222, 95));
			background-image: -ms-linear-gradient(top, rgb(27, 208, 74), rgb(51, 222, 95));
			background-image: linear-gradient(top, rgb(27, 208, 74), rgb(51, 222, 95));
			filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#1bd04a', EndColorStr='#33de5f');
			text-align: center;
		}
			#project-links p {
				padding: 0;
				margin: 0;
				color:#FFF;
				font-family: 'Rubik', sans-serif;
				font-weight: 400;
				font-size: 30px;
				line-height: 30px;
				text-align: center;
			}
		#project-links a {
			display: inline-block;
			width:220px;
			height: 80px;
			margin: 0 20px;
			padding: 0;
			line-height: 80px;
			background-color: #FDC315;
			color:#FFF;
			font-family: 'Rubik', sans-serif;
			font-weight: 400;
			font-size: 30px;
			text-decoration: none;
			text-align: center;
			-webkit-transition: all .1s linear;
			-moz-transition: all .1s linear;
			transition: all .1s linear;
			-webkit-border-radius: 10px;
			-moz-border-radius: 10px;
			border-radius: 10px;
		}
			#project-links a:hover {
				background-color:#fdb109;
			}
		
		#project-info h3 {
			position: relative;
			display: block;
			padding: 40px 0 40px 260px;
			margin: 0;
			line-height: 120px;
			font-family: 'butlermedium', serif;
			font-weight: bold;
			font-size: 100px;
			text-align: left;
			color:#6025CA;
			z-index: 2;
		}
			#project-info h3::before {
				position: absolute;
				top:98px;
				left:40px;
				display: block;
				width:180px;
				height:4px;
				background-color: #6025CA;
				content: " ";
			}
		#project-info img {
			display: block;
			max-width: 800px;
			margin: 0 auto 20px auto;
			text-align: center;
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
			border-radius: 5px;
		}
			#project-info .caption {
				width:600px;
				margin: 0 auto 20px auto;
				color:#A0A0A0;
				text-align: center;
			}
		#project-info .project_text {
			margin: 0;
			padding: 40px 0;
			line-height: 30px;
			font-family: 'Rubik', sans-serif;
			font-weight: 400;
			font-size: 20px;
			color:#33DE5F;
		}
		
		#project-loader {
			position: absolute;
			top:0;
			left:0;
			right:0;
			bottom:0;
			background:#FFF;
			z-index: 1000;
			-webkit-border-radius: 10px;
			-moz-border-radius: 10px;
			border-radius: 10px;
		}

.topEffect {
	z-index: 998;
}

form {
	position: relative;
	display: block;
	padding: 0 40px 40px 260px;
	margin: 0 auto;
}
	#email_sent {
		position: absolute;
		top:200px;
		left: 0;
		display: none;
		width:100%;
		height: 100%;
		line-height: 455px;
		background: rgba(255, 255, 255, 0.9);
		font-size: 30px;
		text-align: center;
		color: #6025CA;
		z-index: 999;
	}
	
	#sending {
		position: absolute;
		top:200px;
		left: 0;
		display: none;
		width:100%;
		height: 100%;
		background: rgba(255, 255, 255, 0.5);
		z-index: 998;
	}
	
	form a {
		display: block;
		width:100%;
		height: 60px;
		line-height: 60px;
		margin-top:20px;
		color:#FFF;
		background-color: #FDC315;
		font-size: 30px;
		font-family: 'Rubik', sans-serif;
		font-weight: 400;
		text-align: center;
		text-decoration: none;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 10px;
	}
		form a:hover {
			background:#fdb109;
		}

form input[type="text"] {
	float:left;
	width:49%;
	height: 50px;
	padding: 0 20px;
	font-family: 'Rubik', sans-serif;
	font-size: 20px;
	margin-bottom: 20px;
	border:none;
	outline: none;
	color: #282828;
	background: #E8E8E8;
	box-sizing: border-box;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

form select {
	display: block;
	width:100%;
	height: 50px;
	font-family: 'Rubik', sans-serif;
	font-size: 20px;
	margin-bottom: 20px;
	padding: 0 20px;
	border:none;
	outline: none;
	color: #282828;
	background: #E8E8E8;
	box-sizing: border-box;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
	form input[type="text"]:focus,
	form textarea:focus {
		-webkit-box-shadow: inset #33DE5F 0px 0px 0px 3px;
		-moz-box-shadow: inset #33DE5F 0px 0px 0px 3px;
		box-shadow: inset #33DE5F 0px 0px 0px 3px;
	}

form textarea {
	display: block;
	width:100%;
	height: 280px;
	padding: 20px;
	font-family: 'Rubik', sans-serif;
	font-size: 20px;
	border:none;
	outline: none;
	color: #282828;
	background: #E8E8E8;
	box-sizing: border-box;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

.minict_wrapper {
	float:left;
	position:relative;
	width:49%;
	height:50px;
	margin: 0 0 20px 0;
	line-height: 50px;
	color:#282828;
	background:#E8E8E8 url(../img/dropdown_arrow.png) no-repeat 98% 50%;
	font-size:20px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	box-sizing: border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	z-index: 10;
}
	.minict_wrapper.active {
		background-color: #33DE5F;
		background-image: url(../img/dropdown_arrow_hover.png);
		color:#FFF;
	}
	.minimargin {
		margin-right: 2%;
	}
	.minict_wrapper span {
		padding: 0 20px;
	}
	.minict_wrapper span:empty:before {
		content: attr(data-placeholder);
		color: #A0A0A0;
	}
		.minict_wrapper.active span,
		.minict_wrapper.active span:empty:before {
			color:#FFF !important;
		}
.minict_wrapper * {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box
}
.minict_wrapper input{
	width:100% !important;
	border:0;
	outline:none;
	background:none !important;
	color:#282828;
	font-size:20px;
	height:50px;
	padding:0 10px;
	cursor:default;
	box-sizing: border-box;
	line-height:50px;
}
.minict_wrapper ul{
	display:none;
	list-style:none;
	padding:0;
	margin:0;
	position:absolute;
	width:100%;
	border:none;
	padding: 10px 0;
	background:#F0F0F0;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	top:50px;
	left:0;
	overflow-y:auto;
	z-index:999;
}
.minict_wrapper ul li{
	list-style:none;
	font-size:20px;
	padding:0 20px;
	cursor:pointer;
	background:#F0F0F0;
	color: #282828;
	height:50px;
	line-height:50px;
	z-index:999;
}
.minict_wrapper ul li:hover{
	background:#FFF;
	color:#33DE5F;
}
.minict_wrapper ul li.selected{
	background:#33DE5F;
	color:#FFF;
}
.minict_wrapper ul li.highlighted{
	background:#33DE5F;
	color:#FFF;
}
.minict_wrapper ul li.hidden{
	display:none;
}

#contact h3 {
	position: relative;
	display: block;
	padding: 40px 0 40px 260px;
	margin: 0;
	line-height: 120px;
	font-family: 'butlermedium', serif;
	font-weight: bold;
	font-size: 100px;
	color:#6025CA;
	z-index: 2;
}
	#contact h3::before {
		position: absolute;
		top:98px;
		left:40px;
		display: block;
		width:180px;
		height:4px;
		background-color: #6025CA;
		content: " ";
	}
	
.atvImg {
	display: block;
	cursor: pointer;
	transform-style: preserve-3d;
}
.work .atvImg {
	position: absolute;
	top: 40px;
	left: 0;
	display: block;
	width: 220px;
	height: 100px;
}

.work .atvImg img {
	width:220px;
	height:100px;
}

.atvImg-container {
	position: relative;
	width: 100%;
	height: 100%;
	transition: all 0.2s ease-out;
}

.atvImg-layers {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	transform-style: preserve-3d;
}

.atvImg-rendered-layer {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0; 
	left: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-color: transparent;
	background-size: cover;
	transition: all 0.1s ease-out;
}

.atvImg-shine {
	position: absolute;
	top: 0; 
	left: 0; 
	right: 0; 
	bottom: 0;
}

.photoset-grid {
	visibility:hidden;
}
.photoset-grid img {
	margin-bottom: 20px;
}

/*
    ColorBox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/* 
    User Style:
    Change the following styles to modify the appearance of ColorBox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/



#cboxOverlay{background:#6025CA;}
#colorbox{outline:0;}
#cboxContent{margin-top:32px; overflow:visible;}
#cboxError{padding:50px; border:1px solid #ccc;}
#cboxLoadedContent{-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;}
#cboxLoadingGraphic{color:#33DE5F;}
#cboxTitle{position:absolute; top:-22px; left:0; color:#ffffff; text-shadow:none;}
#cboxCurrent{position:absolute; top:-22px; right:205px; text-indent:-9999px;}

/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
#cboxPrevious, #cboxNext, #cboxSlideshow {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
#cboxClose {
	position: absolute;
	display: block;
	width: 30px;
	height: 30px;
	line-height: 30px;
	right: 10px;
	top: 5px;
	text-align: center;
	color: #FDC315;
	font-size: 30px;
	text-indent: 0;
	background:none;
	border:0;
	padding:0;
	margin:0; 
	outline:none;
}

/* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

#cboxSlideshow, #cboxPrevious, #cboxNext {text-indent:-9999px; width:20px; height:20px; position:absolute; top:-20px; background:url(http://static.tumblr.com/fftf9xi/1dslqu1o1/controls.png) no-repeat 0 0;}
#cboxPrevious{background-position:0px 0px; right:44px;}
#cboxPrevious.hover{background-position:0px -25px;}
#cboxNext{background-position:-25px 0px; right:22px;}
#cboxNext.hover{background-position:-25px -25px;}
.cboxSlideshow_on #cboxPrevious, .cboxSlideshow_off #cboxPrevious{right:66px;}
.cboxSlideshow_on #cboxSlideshow{background-position:-75px -25px; right:44px;}
.cboxSlideshow_on #cboxSlideshow.hover{background-position:-100px -25px;}
.cboxSlideshow_off #cboxSlideshow{background-position:-100px 0px; right:44px;}
.cboxSlideshow_off #cboxSlideshow.hover{background-position:-75px -25px;}

.stick {
    position: fixed;
    top: 0;
    width:100%;
	margin-top: 0 !important;
    z-index: 99;
}
	.stick {
		padding: 20px 0 !important;
		min-height: 40px !important;
	}
	.stick div {
		text-align: center !important;
		min-height: 40px !important;
	}
	.stick div a {
		float: none !important;
		width: 180px !important;
		margin-right:20px !important;
		display: inline-block !important;
		height: 40px !important;
		line-height: 40px !important;
		font-size:18px !important;
	}
	.stick div p {
		float: none !important;
		display: inline !important;
		height: 40px !important;
		line-height: 40px !important;
		font-size:18px !important;
	}
	.stick div p strong {
		border-bottom-width: 2px !important;
	}

@media (max-width: 1000px) {
	html, body {
		font-size:20px;
		max-width:100% !important;
		width:100% !important;
	}
#main_content {
top:300px;
}
	#header_container {
height:300px;
}
	#header {
	height:300px;
	background-image: url(../img/design-banner-mobile.png);
	background-size:contain;
	/*	width:100% !important;
		height: auto !important;
		padding: 300px 20px 40px 20px !important;
		background-position: 50% 20px;
		box-sizing:border-box;*/
	}
		#header h1 {
			padding: 0 0 20px 0 !important;
			margin: 0 auto !important;
			width:100% !important;
			height: auto !important;
			font-size: 2em !important;
			line-height:1em !important;
			text-align:center;
		}
		#header h2 {
			height: auto !important;
			padding: 0 !important;
			margin: 0 auto;
			font-size: 1em !important;
			line-height:1em !important;
			text-align:center;
		}
		#header h2::before {
			display:none;
		}
	.container {
		width:100% !important;
		padding: 20px 0 !important;
	}

	.green_container,
	.purple_container {
		padding: 0 !important;
		margin: 0 !important;
	}

	#hire {
		width: 100% !important;
		padding: 20px 20px 10px 20px !important;
		box-sizing: border-box;
	}
	#contact h3,
	#footer h3,
	#about h3,
	#dribbble h3,
	#portfolio h3,
	#project-container h3 {
		font-size:2em !important;
		line-height:1.25em !important;
		text-align:center;
		padding: 0 !important;
		margin: 0 0 20px 0 !important;
	}
		#contact h3::before,
		#footer h3::before,
		#about h3::before,
		#dribbble h3::before,
		#portfolio h3::before,
		#project-container h3::before {
			display:none;
		}
		
		#contact h3,
		#project-container h3 {
			padding-top:40px !important;
		}
		
		#dribbble {
			padding: 20px;
		}
		#dribbble #shots {
			padding:20px;
		}
		#dribbble #shots a {
			width:47%;
			height:auto;
			margin: 0 4% 4% 0;
			box-sizing:border-box;
		}
		#dribbble #shots a:nth-child(even) {
			margin:0 0 4% 0;
		}

		#about {
			width: 100%;
			box-sizing:border-box;
		}
		#about p {
			width: 100% !important;
			padding: 20px 20px 0 20px !important;
			text-align: center;
			font-size:0.75em !important;
			line-height:1.75em !important;
			box-sizing:border-box;
		}
		#socials {
			position:relative;
			top:0;
			left:0;
			width: 100% !important;
			padding: 20px !important;
			box-sizing:border-box;
		}
		#socials a {
			width: 100%;
			box-sizing:border-box;
			margin: 0 0 20px 0;
		}

	#hire a {
		width: 100% !important;
		margin-bottom:10px !important;
	}

	#hire p {
		width: 100% !important;
		font-size:1em !important;
		line-height: 1.25em !important;
		text-align:center;
		padding: 0 !important;
	}
		#hire p strong {
			border-bottom-width:2px;
		}

	.work {
		padding: 140px 20px 20px 20px;
	}
		.work h4 {
			display:none;
		}
		.work p {
			max-width:600px;
			margin:0 auto;
			font-size: 1em;
			line-height:1.25em;
			text-align:center;
			padding:0;
		}
			.work p::before {
				display:none;
			}
	.work img {
		position: absolute;
		top:20px;
		left:50%;
		right:0;
		width:220px !important;
		margin: 0 0 0 -110px;
	}
	#contact-bg,
	#project-bg {
		padding: 86px 0 0 0 !important;
	}
	#contact,
	#project {
		top:0;
		left:0;
		margin:0 !important;
		min-width:100%;
		width: 100% !important;
		box-sizing:border-box;
	}
	#project-container img {
		max-width: 100% !important;
		padding: 0 !important;
	}
	#project-container .project_text,
	#project-container p {
		font-size:1em;
		line-height:1.25em;
		padding: 0 0 20px 0;
	}
	#project-container .caption {
		max-width:100%;
		font-size:0.75em;
		line-height:1em;
		padding: 0 0 20px 0;
	}
	#project-container iframe {
		width: 100% !important;
	}
	
	#project-links a {
		margin-bottom:20px;
	}
	
	form {
		padding: 0;
	}
	
	form input[type="text"],
	.minict_wrapper {
		float:none !important;
		width:100% !important;
	}
	
	.hamburger {
		top: 28px !important;
	}
}