/*  RESET  ============================================================================= */

a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}


/*  BASICS  ============================================================================ */

body{
	padding: 2% 5%;
	font-family: 'Inconsolata', sans-serif;
	background-color: #F2F2F2;
	-webkit-font-smoothing: antialiased;
}

::selection{
	background-color: #fff;
	color: #4A4A4A;
	text-decoration: #72CBBA; 
}

#content{
	-webkit-transition: all .0001s ease-in-out;
	transition: all .0001s ease-in-out;
}
/*  HEADER  ============================================================================ */

header, footer{
	font-size: 14pt;
	font-weight: 400;
}

header a, footer a{
	text-decoration: none;
	border-bottom: 2px solid transparent;
	color: #4A4A4A;
	transition: all ease-in-out .5s;
}

header a:hover, header a:focus, footer a:hover, footer a:focus{
	color: #4A4A4A;
	text-decoration: none;
}

footer ul{
	padding-bottom: 60px;
}

.topLeftHeader{
	float: left;
}

.topRightHeader{
	float: right;
}

.topRightHeader li{
	float: right;
}

.topRightHeader li.contact{
	padding-right: 20px;
}

.deskof{
	font-size: 14pt;
	font-weight: 400;
}

.deskof a{
	color: #4A4A4A;
}

.subtitle{
	color: #9B9B9B;
	font-size: 14pt;
	font-weight: 400;
}

/*  THE WORDS  ========================================================================= */



.leftAlignedParagraph, .rightAlignedParagraph{
	float: left;
	font-size: 22pt;
	line-height: 32pt;
	color: #4A4A4A;
	padding: 4% 0 0;
	font-family: 'Merriweather', serif;
	font-weight: 400;
}

.leftAlignedParagraph a, .rightAlignedParagraph a{
	color: #4A4A4A;
	text-decoration: none;
	transition: all ease-in-out .5s;
}


.leftAlignedParagraph a:hover, .leftAlignedParagraph a:focus, .rightAlignedParagraph a:hover, .rightAlignedParagraph a:focus{
	color: #40CDC0;
}

a.twitterLink:hover{
	color: #0084b4;
}

a.foursquareLink:hover{
	color: #0632A2;
}

a.slackLink:hover{
	color: #CD4061;
}

.thanks{
	padding: 4% 0;
}

.workEx{
	margin-top: 80px;
}

/*  INDEX DELAY ANIMATIONS   =========================================================== */

.in1{
	-webkit-animation-delay: .25s;
	animation-delay: .25s;
}

.in2{
	-webkit-animation-delay: .50s;
	animation-delay: .50s;	
}

.in3{
	-webkit-animation-delay: .75s;
	animation-delay: .75s;	
}

.in4{
	-webkit-animation-delay: 1s;
	animation-delay: 1s;	
}

.in5{
	-webkit-animation-delay: 1.25s;
	animation-delay: 1.25s;	
}

.in6{
	-webkit-animation-delay: 1.5s;
	animation-delay: 1.5s;	
}

.in7{
	-webkit-animation-delay: 1.75s;
	animation-delay: 1.75s;	
}

.in8{
	-webkit-animation-delay: 2s;
	animation-delay: 2s;	
}

.in9{
	-webkit-animation-delay: 2.25s;
	animation-delay: 2.25s;	
}

.in10{
	-webkit-animation-delay: 2.5s;
	animation-delay: 2.5s;	
}

.in11{
	-webkit-animation-delay: 2.75s;
	animation-delay: 2.75s;	
}

.in12{
	-webkit-animation-delay: 3s;
	animation-delay: 3s;	
}

.in13{
	-webkit-animation-delay: 3.25s;
	animation-delay: 3.25s;	
}

.in14{
	-webkit-animation-delay: 3.5s;
	animation-delay: 3.5s;	
}

.in15{
	-webkit-animation-delay: 3.75s;
	animation-delay: 3.75s;	
}



.indPreview{
	transition: all 0.5s ease;
}

.indPreview:hover, .indPreview:focus{
	transform: scale(1.02);
	z-index: 100;

}

.jellyI{
    background-image:url("../img/jellyIndex.png");
    background-size: cover;
    background-position: center;
    display:block;
    text-indent: -99999px;
    width: 100%;
    min-height: 300px;
    transition: all 0.5s ease;
}

.vesI{
    background-image:url("../img/vesIndex.png");
    background-size: cover;
    background-position: center;
    display:block;
    text-indent: -99999px;
    width: 100%;
    min-height: 300px;
}

.twI{
    background-image:url("../img/twIndex.png");
    background-size: cover;
    background-position: center;
    display:block;
    text-indent: -99999px;
    width: 100%;
    min-height: 300px;
}

.slackI{
    background-image:url("https://cdn.dribbble.com/users/5484/screenshots/2145786/for_dribbble.gif");
    background-size: cover;
    background-position: center;
    display:block;
    text-indent: -99999px;
    width: 100%;
    min-height: 300px;
}

.foursqI{
    background-image:url("../img/4sqIndex.png");
    background-size: cover;
    background-position: center;
    display:block;
    text-indent: -99999px;
    width: 100%;
    min-height: 300px;
}

.pDokuI{
    background-image:url("../img/pDokuIndexFlat.png");
    background-size: cover;
    background-position: center;
    display:block;
    text-indent: -99999px;
    width: 100%;
    min-height: 300px;
}





#gradBack{
	background: rgba(213,173,10,1);
	background: -moz-linear-gradient(-45deg, rgba(213,173,10,1) 0%, rgba(39,251,191,1) 100%);
	background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(213,173,10,1)), color-stop(100%, rgba(39,251,191,1)));
	background: -webkit-linear-gradient(-45deg, rgba(213,173,10,1) 0%, rgba(39,251,191,1) 100%);
	background: -o-linear-gradient(-45deg, rgba(213,173,10,1) 0%, rgba(39,251,191,1) 100%);
	background: -ms-linear-gradient(-45deg, rgba(213,173,10,1) 0%, rgba(39,251,191,1) 100%);
	background: linear-gradient(135deg, rgba(213,173,10,1) 0%, rgba(39,251,191,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d5ad0a', endColorstr='#27fbbf', GradientType=1 );

}

#gradBack p, #gradBack a{
	color: #fff;
}

#gradback a:hover{
	padding-left: 2px;
}

.pDokuPhone1{
	max-height: 1200px;
	margin: 0 auto;
	display: block
}


/*  GRID   ============================================================================= */

	
.grid_4_of_4 {
	width: 100%; 
}

.grid_3_of_4 {
	width: 74.6%; 
}

.grid_2_of_4 {
	width: 49.2%; 
}

.grid_1_of_4 {
	width: 23.8%; 
}


/*  SECTIONS  ============================================================================= */

.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  GROUPING  ============================================================================= */


.group:before,
.group:after {
    content:"";
    display:table;
}
.group:after {
    clear:both;
}
.group {
    zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

/*  GRID COLUMN SETUP   ==================================================================== */

.col {
	display: block;
	float:left;
	margin: 4% 0 6% 1.6%;
}

.col:first-child { margin-left: 0; } /* all browsers except IE6 and lower */


/*  REMOVE MARGINS AS ALL GO FULL WIDTH AT 480 PIXELS */

@media only screen and (max-width: 480px) {
	.col { 
		margin: 4% 0 6% 0%;
	}
}

/*  GRID OF THREE   ============================================================================= */

	
.span_3_of_3 {
	width: 100%; 
}

.span_2_of_3 {
	width: 66.13%; 
}

.span_1_of_3 {
	width: 32.26%; 
}


/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
	.span_3_of_3 {
		width: 100%; 
	}
	.span_2_of_3 {
		width: 100%; 
	}
	.span_1_of_3 {
		width: 100%;
	}
}

/*  MEDIA QURIES   ====================================================================== */

@media only screen and (max-width: 480px) {
	.grid_4_of_4 {
		width: 100%; 
	}
	.grid_3_of_4 {
		width: 100%; 
	}
	.grid_2_of_4 {
		width: 100%; 
	}
	.grid_1_of_4 {
		width: 100%; 
	}

	img{
		width: 100%;
		padding: 10% 0;
	}

	.topLeftHeader{
		clear: both;
	}

	.topRightHeader{
		clear: both;
		padding: 4% 0;
	}
}