/* Import Fonts
------------------------------------------------------------ */
@import url(https://fonts.googleapis.com/css?family=Iceberg);

/* Simple Reset
------------------------------------------------------------ */
html, body, div, h1, h2, ul, li, dl, dd, dt, p, img {
	margin: 0;
	padding: 0;
}
/*for ie*/
img {
	border: none;
}
ul {
	list-style: none;
}
/* Custom Classes
------------------------------------------------------------ */
.group:after {
	visibility: hidden;
	display: block;
	content: "";
	clear: both;
	height: 0;
}
* html .group {
	zoom: 1;
} /* IE6 */
*:first-child+html .group {
	zoom: 1;
} /* IE7 */
h1, h2 {
	z-index: 1;
	font-weight: normal;
}
/* General Styles
------------------------------------------------------------ */
body {
    //background-color: #ff9933;
	font-size: 87.5%;
	line-height: 1.5em;
	font-family: helvetica, verdana, geneva, arial, sans-serif;
}
.wrap {
	min-width: 300px;
	max-width: 1400px;
	width: 100%;
	height: auto;
	margin: 0px auto;
	padding: 0px 0px 0px 0px;
	overflow: hidden;
}
.wrap-space-adjust {
	max-width: 96%;
	margin-left: 2%;
	margin-right: 2%;
}
.clear {
	clear: both;
}
.clearfix {
	clear: both;
	overflow: hidden;
}
.left {
	display: inline-block;
	float: left;
}
.center {
	display: inline-block;
	margin: 0 auto;
	min-width: 300px;
}
.right {
	display: inline-block;
	float: right;
}
.wf {
	-webkit-transform: translate3d(0, 0, 0);
	-webkit-backface-visibility: hidden;
	-webkit-font-smoothing: antialiased;
}
.ns {
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}
.orange {
	color: #ff9933;
	line-height: 10px;
}
.grey {
	color: #555;
}
.white {
	color: #FFF;
}
/* ------ GLOBAL CSS3 TRANSITIONS ----- */
.anim150 {
	-webkit-transition: all 150ms ease-in-out;
	-moz-transition: all 150ms ease-in-out;
	-ms-transition: all 150ms ease-in-out;
	-o-transition: all 150ms ease-in-out;
	transition: all 150ms ease-in-out;
}
.ease150 {
	-webkit-transition: all 200ms ease-in-out;
	-webkit-transition: all 200ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
	-moz-transition: all 200ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
	-ms-transition: all 200ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
	-o-transition: all 200ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
	transition: all 200ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
}
.anim300 {
	-webkit-transition: all 350ms ease-in-out;
	-moz-transition: all 350ms ease-in-out;
	-ms-transition: all 350ms ease-in-out;
	-o-transition: all 350ms ease-in-out;
	transition: all 350ms ease-in-out;
}
.anim500 {
	-webkit-transition: all 500ms ease-in-out;
	-moz-transition: all 500ms ease-in-out;
	-ms-transition: all 500ms ease-in-out;
	-o-transition: all 500ms ease-in-out;
	transition: all 500ms ease-in-out;
}
a {
	color: #444;
	text-decoration: none;
	-webkit-transition: 0.1s all linear;
	-moz-transition: 0.1s all linear;
	-o-transition: 0.1s all linear;
	transition: 0.1s all linear;
	outline-color: #aaa;
}
a:hover {
	color: #777;
}
/* Header Styles
------------------------------------------------------------ */
#header h1, h2 {
	z-index: 10;
	position: absolute;
	width: 100%;
	min-width: 300px;
	text-align: center;
	color: #444;
}
#header h1 {
	top: 12px;
	font-family: 'Iceberg';
	font-size: 4em;
	line-height: 1em;
}
#header h1:hover {
	color: #555;
}
#header h2 {
	top: 77px;
	font-size: 1.2em;
	line-height: 1em;
}
#header #canvas {
	position: absolute;
	z-index: 5;
	height: 150px;
	width: 100%;
	background-color: #ef9943;
	background: url(../images/canvas_bg.jpg) repeat;
	-moz-box-shadow: 0 0 4px #999;
	-webkit-box-shadow: 0 0 4px #999;
	box-shadow: 0 0 4px #999;
}
#header #header-icon {
	z-index: 55;
	visibility: hidden;
	position: fixed;
	top: 5px;
	left: 5px;
	height: 30px;
	border: 1px solid #fff;
	border-radius: 5px;
	background-color: #fff;
}
#header nav {
	z-index: 50;
	display: inline-block;
	position: absolute;
	left: 0;
	right: 0;
	top: 104px;
	text-align: center;
	margin: 0 auto;
	width: 100%;
	font-size: 1.4em;
	line-height: 30px;
	padding-top: 6px;
	padding-bottom: 6px;
	text-decoration: none;
}
#header nav a {
	display: inline-block;
	font-family: helvetica;
	color: #fff;
	padding-right: 10px;
	padding-left: 10px;
	text-decoration: none;
}
#header nav a:hover {
	color: #fff;
	background-color: #ef9943;
	border-radius: 5px;
}
#header nav a.active {
	color: #fff;
	background-color: #eb8014;
	border-radius: 5px;
}
#header .fixed {
    position: fixed;
	top: 0
}
#header .navBG {
    background-color: #ef9943;
	background: url(../images/canvas_bg.jpg) repeat;
	-moz-box-shadow: 0 0 4px #999;
	-webkit-box-shadow: 0 0 4px #999;
	box-shadow: 0 0 4px #999;
}
#about #social-icons {
	display: inline-block;
	z-index: 55;
	float: right;
	margin-top: 10px;
}
#about #social-icons img {
	width: 25px;
	height: 25px;
	margin: 1px;
	border: 0px solid;
}
#about #social-icons img:hover {
	-moz-transition: 0.3s all linear;
	-webkit-transition: 0.3s all linear;
	-o-transition: 0.3s all linear;
	transition: 0.3s all linear;
	-webkit-transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	transform: rotate(360deg);
}
/* Reel Styles
------------------------------------------------------------ */
#reel {
	background-color: #373635;
}

.video-wrapper {
    z-index: 999;
	padding: 5%;
	padding-top: 6%;
	margin: 0 auto;
	width: 1000px;
	max-width: 90%;
}


.video-container {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
}
.video-container iframe, .video-container object, .video-container embed, .video-container video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


/* Work Styles
------------------------------------------------------------ */
#work {
	clear: both;
	padding-top: 5em;
	padding-bottom: 6em;
 //background-color: #222;
 //background: url(../images/works_bg.gif) repeat;
	background: url(../images/bg.png) repeat;
	-moz-box-shadow: 0 0 4px #222;
	-webkit-box-shadow: 0 0 4px #222;
	box-shadow: 0 0 4px #222;
}
/* Filter */
dl {
	display: block;
	width: 445px;
	min-width: 300px;
	max-width: 100%;
	margin: 0 auto;
	margin-bottom: 1.5em; /*cc*/
	color: #666;
}
dt, dd {
	float: left;
}
.filter {
	font-size: 1.1em;
	float: right;
}
.filter li {
	float: left;
	padding: 2px 2px;
}
.filter li:after {
	content: "  ";
}
.filter li:last-child:after {
	content: "  ";
}
.filter a {
	padding: 2px 5px;
	color: #666;
	text-decoration: none;
}
.filter a:hover, .current a {
	color: #FF850C;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
.filter .current a {
	background-color: #ef9943;
	-moz-border-radius: 3px;
	border-radius: 3px;
	color: #fff;
}
/*4 columns*/
.portfolio li {
	display: block;
	float: left;
	margin-left: 2.0%;
	margin-top: 1.9%;
	max-width: 312px;
	width: 22.5%;
}

/*3 columns*/
@media (max-width: 1280px) {
.wrap {
	max-width: 1040px;
}
.da-thumbs a article p {
	font-size: 1em;
	line-height: 1em;
}
.portfolio li {
	margin-left: 2.4%;
	margin-top: 2.28%;
	width: 30%;
}
}

/*2 columns*/
@media (max-width: 780px) {
.wrap {
	max-width: 695px;
}
.da-thumbs a article p {
	font-size: 1em;
	line-height: 50%;
}
.portfolio li {
	margin-left: 3.3%;
	margin-top: 3.48%;
	width: 45%;
}
#header #social-icons {
	display: none;
}
}

/*1 column*/
@media (max-width: 540px) {
.wrap {
	max-width: 350px;
}
.da-thumbs a article p {
	font-size: 70%;
	line-height: 90%;
}
.portfolio li {
	margin-left: 5%;
	margin-top: 3.0%;
	margin-bottom: 4.0%;
	width: 90%;
}
.da-thumbs li {
	margin-left: 3.3333%;
	width: 45%;
}
dl {
	margin-left: 20px;
	max-width: 100px;
}
.filter li {
	float: left;
	line-height: 150%;
}
#work {
	padding-top: 3em;
}
#header h1 {
	font-size: 3.8em;
}
#header h2 {
	font-size: 1.1em;
}
}


.portfolio li a {
	color: #333;
	text-decoration: none;
}
.portfolio li img {
	max-width: 100%;
	height: auto;
	border: 1px solid #dedede;
	
 //opacity: 0.9;
 //filter: grayscale(100%); /* Current draft standard */
	/*filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\' filterRes=\'800\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); */  /* Firefox 10+ */
	//filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
/*	Firefox 10+, Firefox on Android */
 //filter: gray;  /*IE6-9 */
 //-webkit-filter: grayscale(100%);  /*Chrome 19+ & Safari 6+ */
 //-moz-filter: grayscale(100%);
 //-ms-filter: grayscale(100%);
 //-o-filter: grayscale(100%);  /*Not yet supported in Gecko, Opera or IE */
/*filter: url(resources.svg#desaturate);*/ /* Gecko */
}
.portfolio li img:hover {
	/*filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\' filterRes=\'800\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");*/
	//filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    //filter: none;
    //-webkit-filter: grayscale(0%);
    //opacity: 1.0;
    filter: brightness(0.80);
    -webkit-filter: brightness(0.80);
}
.portfolio li:hover img {
	/*filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\' filterRes=\'800\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");*/
	//filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    //filter: none;
    //-webkit-filter: grayscale(0%);
	//opacity: 0.8;
	//filter: brightness(0.8);

}
.portfolio li p.item-name {
	float: left;
	font-size: 13px;
	line-height: 15px;
	color: #333;
	margin-top: 0px;
	text-transform: uppercase;
}
.portfolio li p.item-type {
	visibility: hidden;
	margin-left: 8px;
	float: left;
	font-size: 12px;
	line-height: 15px;
	color: #666;
	margin-top: 0px;
	text-transform: none;
}
/* About Styles
------------------------------------------------------------ */
#about {
	clear: both;
	padding-top: 5em;
	padding-bottom: 4em;
	background-color: #333;
	color: #aaa;
}
#about p.outline {
	color: #ccc;
}
#about a {
	color: #ccc;
	text-decoration: underline;
}
#about .left {
	float: left;
	width: 44%;
	//max-width: 300px;
}
#about .right {
	padding-left: 3%;
	overflow: hidden;
	width: 53%;
}
#about .socialIcons {
	padding-left: 3%;
	overflow: hidden;
}
#about .item-name {
	padding: 5px;
}

/*2 column*/
@media (max-width: 780px) {
#about .left {
	display: inline-block;
	float: left;
	width: 100%;
	min-width: 300px;
}
#about .right {
	padding-top: 50px;
	display: inline-block;
	padding-left: 0%;
	width: 100%;
}
}
/* About Hover */
.da-thumbs li {
	margin-right: 1%;
	margin-left: 1%;
	width: 48%;
	display: block;
	float: left;
}
.da-thumbs li img {
	width: 100%;
	height: auto;
}
.da-thumbs a, .da-thumbs a img {
	display: block;
	position: relative;
}
.da-thumbs a {
	overflow: hidden;
}
.da-thumbs a article {
	position: absolute;
	background-image: url(../images/image_hover.png);
	background-repeat: repeat;
	width: 100%;
	height: 100%;
}
.da-thumbs a article.da-animate {
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}
/* Initial state classes: */
.da-slideFromTop {
	left: 0px;
	top: -100%;
}
.da-slideFromBottom {
	left: 0px;
	top: 100%;
}
.da-slideFromLeft {
	top: 0px;
	left: -100%;
}
.da-slideFromRight {
	top: 0px;
	left: 100%;
}
/* Final state classes: */
.da-slideTop {
	top: 0px;
}
.da-slideLeft {
	left: 0px;
}
.da-thumbs a article a {
	color: #fff;
	display: block;
}
.da-thumbs a article h3 {
	color: #fff;
	margin-left: 5%;
	display: block;
	text-align: left;
	text-decoration: none;
}
.da-thumbs a article em {
	margin-left: 5%;
	color: #fff;
	display: block;
	text-align: center;
}
.da-thumbs a article p {
	color: #eee;
	margin: 10%;
	text-align: center;
	line-height: 2em;
}
.da-thumbs a article span {
	margin-right: 5%;
	margin-top: 2%;
	overflow: hidden;
	display: inline-block;
	float: right;
	width: 10%;
	height: 7.5%;
	background-color: #ef9943;
	border-radius: 50%;
	cursor: pointer;
}
.da-thumbs a article span:hover {
	-moz-transition: 0.1s all ease;
	-webkit-transition: 0.1s all ease;
	-o-transition: 0.1s all ease;
	transition: 0.1s all ease;
	border-radius: 25%;
}
span.link_post {
	background-image: url(../images/link_post_icon.png);
	background-repeat: no-repeat;
	background-position: center;
}
span.zoom {
	background-image: url(../images/zoom_icon.png);
	background-repeat: no-repeat;
	background-position: center;
}
span.logo-icon {
	background-image: url(../images/zoom_icon.png);
	background-repeat: no-repeat;
	background-position: center;
}
.da-thumbs li p {
	font-size: 17px;
	text-align: center;
}
/* Image Grid */
/*.image_grid {
	float:left;
	overflow:hidden;
	width:700px;
	position:relative;

}
.image_grid li{
	float: left;
	line-height: 17px;
	color: #686f74;
	list-style:none;
	overflow:hidden;
	margin-bottom:23px;
	margin-right:23px;
	text-align:center;
}
*/


/* Resume Styles
------------------------------------------------------------ */
#resume {
	clear: both;
	padding-top: 4em;
	padding-bottom: 5em;
	background: url(../images/bg.png) repeat;
	font-weight: normal;
	line-height: 19px;
}
#resume .orange {
	line-height: 105%;
}
#resume a {
	color: #3399cc;
	text-decoration: underline;
}
#resume span.sub {
	color: #999;
}
#resume p.time {
	color: #999;
}

@media (min-width: 600px) {
#resume-left {
	padding-left: 5%;
	padding-right: 3%;
	width: 50%;
	min-width: 300px;
}
#resume-right {
	padding-left: 4%;
	padding-right: 2%;
	overflow: hidden;
	width: 34%;
	border-left: dashed 1px #ccc;
}
}

@media (max-width: 600px) {
#resume-left {
	padding-left: 1%;
	padding-right: 1%;
	width: 98%;
}
#resume-right {
	padding-top: 50px;
	padding-left: 1%;
	padding-right: 1%;
	width: 98%;
}
}
/* Footer Styles
------------------------------------------------------------ */
footer {
	clear: both;
	color: #ccc;
	background-color: #303030;
	min-height: 80px;
	padding: 15px;
}
footer .left img {
	width: 30px;
	border: 1px solid #ff9933;
	border-radius: 5px;
	background-color: #ff9933;
}
footer .right {
	width: 330px;
	//border-left: 1px solid #ddd;
	text-align: right;
}
footer p {
	margin-bottom: 10px;
	font-size: 1.1em;
	font-weight: 300;
}
footer p.small {
	font-size: 0.85em;
	margin-bottom: 0;
}



/*
body {
  line-height: 1.6;
}

.content {
  max-width: 600px;
  margin: 10px auto;
}
*/

@keyframes fade-in-up {
  0% {
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
.video-wrapper {
  text-align: center;
}
.video-container iframe {
  max-width: 100%;
  max-height: 100%;
}


.video-container.stuck {
  position: fixed;
  bottom: 65px;
  right: 20px;
  transform: translateY(100%);
  width: 260px;
  height: 145px;
  animation: fade-in-up 0.25s ease forwards;
}