/*STB responsive framework V1.0814 */
/*slider from http://responsiveslides.com/*/
/*960 grid*/



/*color ref:  Dark Grey(Main Site Label) #384145
Orange Highlights: #e26617
Cyan Highlights: #008cc7
Paragraph & Reverse text: #ebebeb
Link in paragraph: #959595 
Hover:#384145
*/



/*imports*/
@import url("reset.css");
@import url("colors.css");
@import url("nav.css");


/* GLOBAL STYLES */
@-ms-viewport {
	width: device-width;
}

* {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;

	margin:0;
	padding:0;
	-webkit-font-smoothing:antialiased;
}


html {
	position: relative;
	font:100%/1.5em Verdana, sans-serif;
	min-height: 100%;
	position: relative;
	/*padding-bottom: 2em;*/
}

body {
	position: relative;
	
	font-size: 1em;
	line-height: 1.6em;
	color: #ebebeb;
	letter-spacing: 0.1em;
	background: #333 url('../imgs/bgpattern25.jpg') 0 0 repeat fixed;
}


img {
	max-width: 100%;
	height: auto;
}





.headshot {
	border-radius: 50%;
	max-width: 100px;
	/*border:3px solid #ebebeb;*/
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

/*Clearfix*/
.clearfix:after,
.container:after {
	content: '';
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
	clear:both;
}

.clearfix,
.container {
	zoom:1;
}



.home {
	background-color: rgba(15, 15, 15, .6);
}

.who {
	background-color: #e26617;
}

.photo {
	background: url(../imgs/sectionbg/photobg.jpg) no-repeat center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.digital {
		background: url(../imgs/sectionbg/digartbg.jpg) no-repeat center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.graphic {
		background: url(../imgs/sectionbg/gdesignbg.jpg) no-repeat center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.web {
	background: url(../imgs/sectionbg/webbg.jpg) no-repeat center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.contact {
	/*background-color: rgba(15, 15, 15, .7);*/
}


/*LINKS*/
.link {
	position: relative;
	padding: 0;
	display: block;
	/*opacity: .75;*/
	max-height: 150px;
	color: #ffffff;
	overflow: hidden;
	transition: all 0.7s ease;
}

.link:hover {
	opacity: 1;
}

.link p {
	position: absolute;
	padding: 1em;
	top: -5%;
	transform: translateY(-5%);
	width: 100%;
	height: 50%;
	/*text-align: center;*/
	text-shadow: 0 0 4px rgba(0,0,0,.9);
	/*font-weight: bold;*/
	transition: all 0.7s ease;
}

.link a {
	color:#ddd;
}

.link a:hover {
	color: #fff
}

.link img {
	position: relative;
	display: block;
	height: 100%;
	width: -webkit-calc(100%);
	width: calc(100%);
	opacity: 0.4;
	-webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
	transition: opacity 0.5s, transform 0.5s;
	-webkit-transform: scale(1, 1);
	transform: scale(1, 1);

}

.link:hover img  {
	opacity: 1;
	-webkit-transform: scale(1.03, 1.03);
	transform: scale(1.03, 1.03);
}

.link:hover p  {
	top: 50%;
	transform: translateY(-50%);
}

.artphoto {
	background: #3085a3;
}

.comphoto {
	background: #2d6bdb;
}

.webexample {
	background: #e02637;
}

.gdsamples {
	background: #e26617;
}

.dasamples {
	background: #3A8F00;
}

/*/LINKS*/



/*960 GRID  OLd Browser / Default*/

.section {
	width: 85%;
	margin:0 10% 0 15%;
}


.container {
	width: 100%;
	margin:0 auto;
	padding: .5em 0 0 0;
}

.row {
	width: 100%;
	float: left;
	clear: both;
}

.container .column {
	float: left;
	padding: 0 1em;
}

.container .column.sectionlinks {
	padding: 0;
}




.container .column.one 			{ 	width:	6.25%;	}
.container .column.two 			{ 	width:	12.5%;	}
.container .column.three 		{ 	width:	18.75%;	}
.container .column.four 		{ 	width:	25%;	}
.container .column.five 		{ 	width:	31.25%;	}
.container .column.six 			{ 	width:	37.5%;	}
.container .column.seven 		{ 	width:	43.75%;	}
.container .column.eight 		{ 	width:	50%;	}
.container .column.nine 		{ 	width:	56.25%;	}
.container .column.ten 			{ 	width:	62.5%;	}
.container .column.eleven 		{ 	width:	68.75%;	}
.container .column.twelve 		{ 	width:	75%;	}
.container .column.thirteen		{ 	width:	81.25%;	}
.container .column.fourteen 	{ 	width:	87.5%;	}
.container .column.fifteen 		{ 	width:	93.75%;	}
.container .column.sixteen 		{ 	width:	100%;	}

/*LOGO*/
header.row {
	padding:1em 0 1em 0;
}


a.nav-link {
	display: none;
}

h1.logo {
	border: 0;
	font: 0/0 a;
	text-shadow:none;
	color: transparent;
	background-color: transparent;
}

nav h1.logo a {
	position: absolute;
	top: 17px;
	left: 13px;
	width: 66px; /*dimensions of logo */
	height: 25px;   /*dimensions of logo */
	display: block;
	background: url(../imgs/robit25h.png) no-repeat 0 0 ;
	border: 0;
	font: 0/0 a;
	text-shadow:none;
	color: transparent;
	background-color: transparent;
}


.anchor {
	border: 0;
	font: 0/0 a;
	text-shadow:none;
	color: transparent;
	background-color: transparent;
}


/*TYPOGRAPHY*/
h1.name {
	display: block;
	font-size:2em;
	margin-bottom: 0.2em;
	color: #384145;
	font-weight: bold;
}

h1.name span {
	font-size: .5em;
}

.tag {
	font-size: .7em;
	color: #008CC7;
}

h3 {
	font-size: 3.5em;
	margin: .25em 0 .75em 0;
	line-height: .95em;
}

h4 {
	font-size: 1.5em;
}

p{
	margin: .25em 0 1em 0;
}

a {
	color: #008CC7;
	text-decoration: none;
	transition: color 0.3s ease;
}

a:hover {
	color: #384145;
}

hr {
	width: 85%;
	background-color:none;
	color:none;
	border: 0 none;
	margin:1em auto;
	border-bottom: 1px dotted #cccccc;

}

.comingsoon {
	font-style: italic;
	color: #cccccc;
	font-size: .8em;
	width: 85%;
	border: 0 none;
	margin:1em auto;
	text-align: center;
}

blockquote {
	padding: 1.5em;
	font-style: italic; 
}


.bullets {
	list-style: disc;
	font-size: .9em;
	padding-left:2em;
	/*margin-top: .2em;*/
}


/*SOCIAL LINKS*/
.social {
	position: relative;
	float: right;
	margin-top: -60px;
	width: 350px;
}

.sociallink {
	display: inline-block;
	float: right;
	margin: 3px;
	margin-top: 0;
	width: 30px;
	height: 30px;
	transition: background 0.3s ease;
}


a.yt {
	background: url(../imgs/social/yt30.png) 0 0 no-repeat;
}

a:hover.yt {
	background: url(../imgs/social/yt30.png)  0 -30px no-repeat;
}

a.lin {
	background: url(../imgs/social/linkedin30.png) 0 0 no-repeat;
}

a:hover.lin {
	background: url(../imgs/social/linkedin30.png)  0 -30px no-repeat;
}

a.tw {
	background: url(../imgs/social/tw30.png) 0 0 no-repeat;
}

a:hover.tw {
	background: url(../imgs/social/tw30.png)  0 -30px no-repeat;
}

a.gplus {
	background: url(../imgs/social/gplus30.png) 0 0 no-repeat;
}

a:hover.gplus {
	background: url(../imgs/social/gplus30.png)  0 -30px no-repeat;
}

a.fb {
	background: url(../imgs/social/fb30.png) 0 0 no-repeat;
}

a:hover.fb {
	background: url(../imgs/social/fb30.png)  0 -30px no-repeat;
}

a.eml {
	background: url(../imgs/social/email30.png) 0 0 no-repeat;
}

a:hover.eml {
	background: url(../imgs/social/email30.png)  0 -30px no-repeat;
}

/*Gallery Mod */
.gallink {
	width: 33.3333%;
}
/*/gallery mod*/


/*footer*/
footer {
	text-align: center;
	padding: 2em 0 2em 0;
	font-size: .8em;
	/*background-color: rgba(15, 15, 15, .9);*/
}



/*screens under 900px*/
@media only screen and (max-width:900px) {

	.tag {
		width: 350px;
		line-height: 1.5em;
	}


	.social {
		position: relative;
		float: right;
		margin-top: -75px;
		width: 135px;
	}

	/*SOCIAL LINKS*/
	.sociallink {
		display: inline-block;
		float: right;
		margin: 3px;
		width: 35px;
		height: 35px;
	}

	a.yt {
		background: url(../imgs/social/yt35.png) 0 0 no-repeat;
	}

	a:hover.yt {
		background: url(../imgs/social/yt35.png)  0 -35px no-repeat;
	}

	a.lin {
		background: url(../imgs/social/linkedin35.png) 0 0 no-repeat;
	}

	a:hover.lin {
		background: url(../imgs/social/linkedin35.png)  0 -35px no-repeat;
	}

	a.tw {
		background: url(../imgs/social/tw35.png) 0 0 no-repeat;
	}

	a:hover.tw {
		background: url(../imgs/social/tw35.png)  0 -35px no-repeat;
	}

	a.gplus {
		background: url(../imgs/social/gplus35.png) 0 0 no-repeat;
	}

	a:hover.gplus {
		background: url(../imgs/social/gplus35.png)  0 -35px no-repeat;
	}

	a.fb {
		background: url(../imgs/social/fb35.png) 0 0 no-repeat;
	}

	a:hover.fb {
		background: url(../imgs/social/fb35.png)  0 -35px no-repeat;
	}

	a.eml {
		background: url(../imgs/social/email35.png) 0 0 no-repeat;
	}

	a:hover.eml {
		background: url(../imgs/social/email35.png)  0 -35px no-repeat;
	}

/*Gallery Mod */
.gallink {
	width: 50%;
}
/*/gallery mod*/


	} /*/900*/




	/*screens under 700px*/
	@media only screen and (max-width:700px) {

		body {
			font-size: .9em;
		}

		.section {
			width: 100%;
			margin:0 auto;
		}

		/*Grid*/
		.container {
			width: 100%;
			margin:0 auto;
		}

		.row {
			width: 100%;
			float: left;
			clear: both;
		}

		.container .column {
			float: left;
			padding: 0 1em;

		}

		.container .column.one,
		.container .column.two,
		.container .column.three,
		.container .column.four,
		.container .column.five,
		.container .column.six,
		.container .column.seven,
		.container .column.eight,
		.container .column.nine,
		.container .column.ten,
		.container .column.eleven,
		.container .column.twelve,
		.container .column.thirteen,
		.container .column.fourteen,
		.container .column.fifteen,
		.container .column.sixteen 		{ 	width:	100%;	}


/*Gallery Mod */
.gallink {
	width: 100%;
}
/*/gallery mod*/

		header.row {
			padding:1em 0 1em 0;
		}

		a.nav-link {
			display: block;
			position: fixed;
			z-index: 2000;
			top:10px;
			right:0;
			background: #384145;
			text-decoration: none;
			color: #008CC7;
			padding: 15px 15px 10px 15px;
			font-weight: bold;
			border-radius:  .2em 0 0 .2em;
		}

		a.nav-link:hover {
			background: #008CC7;
		}


		h1.logo a {
			display: block;
			width: 144px; /*dimensions of logo */
			height: 64px;   /*dimensions of logo */
			background: url(../imgs/robit.png) no-repeat 0 0 ;
			position: relative;

			float: none;
			margin: 5em auto;
		}

		nav h1.logo a {
			display: none;
		}


		/*TYPOGRAPHY*/
		h1.name {
			position: relative;
			text-align: center;
			line-height: 1.2em;
			margin: .5em 0;
		}


		.tag {
			width: 100%;
			text-align: center;
		}


		/*SOCIAL LINKS*/
		.social {
			position: relative;
			float: none;
			margin: 1em auto;
			width: 284px;
		}

		.sociallink {
			display: inline-block;
			float: right;
			margin: 1px;
			width: 45px;
			height: 45px;
		}

		a.yt {
			background: url(../imgs/social/yt45.png) 0 0 no-repeat;
		}

		a:hover.yt {
			background: url(../imgs/social/yt45.png)  0 -45px no-repeat;
		}

		a.lin {
			background: url(../imgs/social/linkedin45.png) 0 0 no-repeat;
		}

		a:hover.lin {
			background: url(../imgs/social/linkedin45.png)  0 -45px no-repeat;
		}

		a.tw {
			background: url(../imgs/social/tw45.png) 0 0 no-repeat;
		}

		a:hover.tw {
			background: url(../imgs/social/tw45.png)  0 -45px no-repeat;
		}

		a.gplus {
			background: url(../imgs/social/gplus45.png) 0 0 no-repeat;
		}

		a:hover.gplus {
			background: url(../imgs/social/gplus45.png)  0 -45px no-repeat;
		}

		a.fb {
			background: url(../imgs/social/fb45.png) 0 0 no-repeat;
		}

		a:hover.fb {
			background: url(../imgs/social/fb45.png)  0 -45px no-repeat;
		}

		a.eml {
			background: url(../imgs/social/email45.png) 0 0 no-repeat;
		}

		a:hover.eml {
			background: url(../imgs/social/email45.png)  0 -45px no-repeat;
		}



		} /*/700*/


		/*screens under 1800px*/
		@media only screen and (min-width:1800px) {
			body {
				position: relative;

				font-size: 1.05em;
			}


/*Gallery Mod */
.gallink {
	width: 25%;
}
/*/gallery mod*/


		}


		/*For IE9 and older*/
		.lt-ie9 .container {
			max-width: 600px;
		}