@charset "UTF-8";
/* MEYER RESET STARTS */
html,body,div,span,applet,object,iframe,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,label,legend,p,blockquote,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}body{line-height:1;color:black;background:white;}:focus{outline:0;}table{border-collapse:collapse;border-spacing:0;}caption,th,td{text-align:left;font-weight:normal;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}ol,ul{list-style:none;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}blockquote:before,blockquote:after,q:before,q:after{content:"";}blockquote,q{quotes:"" "";}abbr,acronym{border:0;}
/* MEYER RESET ENDS */
html, body {
    height: 100%;
}
body {
    margin: 0;/*
    background: url(images/tile.png);
	background: url(images/white_tile.png);*/
    font-family: "Raleway", sans-serif;
    font-weight: 300;
}
em {
	font-style: italic;
}
#container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    min-height: calc(100% - 70px);	
}
#toTop {
    height: 35px;
	width: 35px;
    position: fixed;
    bottom: 30px;
    right: 15px;
    display: none;
	z-index: 400;
}
#toTop {
	width: 35px;
	height: 35px;
}

/* NAVIGATION STARTS */
#nav-top {
	width: 90%;
	max-width: 1200px;
    margin: 0 auto;	
}
nav {
	
    text-align: center;
    /* TEMP background: rgba(255,0,4,0.20); */
	margin-bottom: 20px;
	margin-top: 20px;
}
nav a {
    color: #000;
    text-decoration: none;
    text-transform: uppercase;
    font-family: 'Open Sans', sans-serif;
    padding: 15px 20px;
    font-size: 14px;
    display: inline-block;
	position: relative;
}
/* ANIMATED UNDERLINES START */
nav a:hover {
	text-decoration: underline;
}
/* ANIMATED UNDERLINES END */
/* NAVIGATION ENDS */
/* CONTACT LINK STARTS */
#contact {
	width: 100%;
	height: 5px;
	/*
	background-image: url(images/palms.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	*/
	background-color: #b60000;
	overflow: hidden;
	transition: all .3s ease;
	font-family: "Raleway", sans-serif;
    font-weight: 700;
}
#contact-form {
	width: 100%;
	height: calc(100% - 44px);
}
#the-form-itself {
	width: 90%;
	height: calc(100% - 40px);
	padding: 20px 0;
    max-width: 1000px;
    margin: 0 auto;
	color: #fff;
}
.the-form {
	margin-bottom: 10px;
}
.the-text {
    text-align: center;
}
.the-text p {
	font-family: "Raleway", sans-serif;
    font-weight: 700;
	font-size: .75em;
	margin-bottom: 15px;
	line-height: 1.5em;
    
}
.the-text h3 {
	font-family: "Raleway", sans-serif;
    font-weight: 700;
	line-height: 1.5em;
}
.the-text h3 span {
	font-size: 1.3em;
}
.the-text h3 a {
	color: #fff;
	text-decoration: none;
}
.the-text h3 a:hover {
	text-decoration: underline;
}
#contact-button {
	width: 90%;
	height: 44px;
    max-width: 1200px;
    margin: 0 auto;
	/* TEMP  background: rgba(28,255,0,0.20); */ 
	text-align: center;
}
#contact-button img {
	width: 8px;
	margin-left: 5px;
}
#contact-button a {
	color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-family: 'Open Sans', sans-serif;
    padding: 15px 20px;
    font-size: 14px;
	background: #b60000;
	display: inline-block;
}
#contact-button a:hover {
	text-decoration: underline;
}
#contact-button a.close-menu {
	display: none;
}
#contact:target + #contact-button a.open-menu {
	display: none;
}
#contact:target + #contact-button a.close-menu {
	display: inline-block;
}
#contact:target {
	height: 280px;
}
/* CONTACT STARTS HERE */
input {
	
}
input, textarea {
	margin: 0 0 5px;
	padding: 10px;
	width: calc(100% - 20px);
	font-size: 12px;
}
textarea {
	height: 5em;
	max-width: 100%;
	max-height: 10em;
}
#the-form-itself input[type="submit"], #the-form-itself input[type="button"] {
	width: 150px;
	height: 50px; 
	background: #fff;
    cursor:pointer;
    -webkit-border-radius: 25px;
    border-radius: 25px;
	font-size: 14px;
	font-weight: 700;
	color: #b60000;
	transition: all .5s;
}
#the-form-itself input[type="submit"]:hover {
	background: #000;
	color: #fff;
}
/* CONTACT ENDS HERE */
/* CONTACT LINK ENDS */

header {
	
}
/* NEW LOGO STARTS */
.masthead {
	width: 110%;
	max-width: 450px;
	position: relative;
	z-index: 10;
	margin-left: -5%;
	margin-right: -5%;
}
.masthead img {
	width: 100%;
}
/* NEW LOGO ENDS */
.profile {
    width: 50%;
    padding-top: 50%; /* 1:1 Aspect Ratio */
    border-radius: 50%;
    margin: 5px auto 0;
	/*background: url(images/profile-new.jpg);*/
    /*background: url(images/profile_pic.jpg);*/
	background: url(images/profile-professional.jpg);
    background-size: cover;
}
.name {
    width: 220px;
    height: 67px;
    margin: 15px auto 0;
}
.logo {
    width: 120px;
    height: 54px;
    margin: 15px auto 0;
}
.zigzag {
    width: 100%;
    height: 10px;
    background: url(images/chevron.svg);
    margin: 20px auto 0;
}
.zigzag:last-of-type {
	margin-top: 40px;
	margin-bottom: 30px;
}
.clear {
    clear: both;
}
/* THUMBNAILS START */
.thumbnails {
    width: 90%;
    margin: 60px auto 0;
}
.previews {
    position: relative;
    width: 100%;
    padding-top: 100%; /* 1:1 Aspect Ratio */
    /* TEMP BKGD COLOR background: rgba(0,208,255,.2); */
    margin-bottom: 20px;
    background-size: cover;
}
.previews img {
    display: block;
    width: 100%;
    height: auto;
}
/* SLIDE IN FROM TOP STARTS*/
.overlay {
    position: absolute;
    bottom: 100%;
  	left: 0;
  	right: 0;
    width: 100%;
	height:0;
    overflow: hidden;
    transition: .5s ease;
    background-color: rgba(182,0,0,.8);
}
.previews:hover .overlay {
	bottom: 0;
    height: 100%;
}
/* SLIDE IN FROM TOP ENDS*/
.text {
    color: #fff;
    font-weight: 700;
    font-size: 18px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
/* INDIVIDUAL THUMBNAILS */
.james {
    background: url(images/james.jpg);
    background-size: cover;
}
.services {
    background: url("images/services-thumb.jpg");
    background-size: cover;
}
.tmt {
    background: url(images/tmt-thumb.jpg);
    background-size: cover;
}
.verizon {
    background: url("images/verizon-thumb.jpg");
    background-size: cover;
}
.heidi {
    background: url(images/heidi-thumb.png);
    background-size: cover;
}
.v-cloudstorage {
    background: url(images/verizon-cloud-storage.jpg);
    background-size: cover;
}
.earl {
    background: url(images/earl-rivard-thumb.jpg);
    background-size: cover;
}
.arcadia {
    background: url("images/at-thumb.jpg");
    background-size: cover;
}
.simply {
    background: url("images/simply-nourish-thumb.png");
    background-size: cover;
}
.brocade {
    background: url("images/brocade-thumb.jpg");
    background-size: cover;
}
.petsmart-halloween {
    background: url("images/petsmart-halloween-cover.jpg");
    background-size: cover;
}
.weshare {
    background: url(images/weshare-thumb.png);
    background-size: cover;
}
.treats {
    background: url("images/treats-mm-cover.jpg");
    background-size: cover;
}
.kahping {
    background: url(images/kahping-thumb.png);
    background-size: cover;
}
.arrowhead {
    background: url("images/arrowhead-thumb.jpg");
    background-size: cover;
}
.v-integrated {
    background: url(images/verizon-integrated.jpg);
    background-size: cover;
}
.safastone {
    background: url(images/safastone.jpg);
    background-size: cover;
}
.v-existing {
    background: url(images/verizon-existing.jpg);
    background-size: cover;
}
.v-vpn {
    background: url(images/verizon-vpn.jpg);
    background-size: cover;
}
.v-connect {
    background: url(images/verizon-connect.jpg);
    background-size: cover;
}
.v-ringback {
    background: url(images/verizon-ringback.jpg);
    background-size: cover;
}
.v-browserbar {
    background: url(images/verizon-browserbar.jpg);
    background-size: cover;
}
.v-beam {
    background: url(images/verizon-beam.jpg);
    background-size: cover;
}
.v-life {
    background: url(images/verizon-life.jpg);
    background-size: cover;
}
.molly {
    background: url(images/molly.jpg);
    background-size: cover;
}
.brocade-ethernet {
    background: url(images/brocade-ethernet.jpg);
    background-size: cover;
}
.alu {
    background: url("images/alcatel-lucent-thumb.jpg");
    background-size: cover;
}
.alu-cracking {
    background: url(images/alu-cracking.jpg);
    background-size: cover;
}
.alu-multiscreen {
    background: url(images/alu-multiscreen.jpg);
    background-size: cover;
}
.alu-educause {
    background: url(images/alu-educause.jpg);
    background-size: cover;
}
.alu-cavalier {
    background: url(images/alu-cavalier.jpg);
    background-size: cover;
}
.gbwc {
    background: url(images/gbwc.jpg);
    background-size: cover;
}
.mrm {
    background: url(images/mrm.jpg);
    background-size: cover;
}
.sprint {
    background: url(images/sprint.jpg);
    background-size: cover;
}
.qwest {
    background: url(images/qwest.jpg);
    background-size: cover;
}
.premier {
    background: url(images/premier.jpg);
    background-size: cover;
}
.firebox {
    background: url(images/firebox-thumb-alt.jpg);
    background-size: cover;
}
/* END INDIVIDUAL THUMBNAILS */
/* THUMBNAILS END */
footer {
	font-size: 12px;
	margin-bottom: 80px;
}
.copyright {
	text-align: center;
}
.social {
	width: 90px;
	height: 35px;
	margin: 20px auto 0;
}
.social-img {
	height: 35px;
	width: 35px;
	margin-left: 10px;
	float: left;
}
.social-img img, .download img {
	position: absolute;
	height: 35px;
	width: 35px;
}
.download {
	height: 35px;
	width: 35px;
	float: right;
}
img.transparent {
	opacity: 0;
	transition: opacity .5s ease;
}
img.transparent:hover {
	opacity: 1;
}
/*
.social img {
	height: 35px;
	width: 35px;
	margin: 0 5px;
}
*/
.bottom-bar {
    width: 100%;
    height: 10px;
    background: #b60000;
}
/* WORK PAGES STARTS */

.work-pages, .about, .resume {
	margin-top: 60px;
	margin-bottom: 60px;
}
.work-pages h3, .about h3, .resume h3 {
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: .5em;
}
.description p, .about p, .resume p {
	margin-bottom: 2em;
	line-height: 1.35em;
}
.description p a:link, .description p a:visited, .prev a:link, .prev a:visited, .next a:link, .next a:visited {
	color: #000;
	text-decoration: none;
	transition: all .3s ease;
}
.description p a:hover, .prev a:hover, .next a:hover {
	color: #b60000;
}
.sample-images img, .sample-images video {
	width: 100%;
	margin-bottom: 15px;
}
/* RESPONSIVE VIDEO STARTS */
.video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
	margin-bottom: 15px;
}
.video-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}
/* RESPONSIVE VIDEO ENDS */
.work-buttons {
	margin-bottom: 40px;
	/*background: rgba(255,0,4,0.10);*/
}
.prev, .next, .prev a, .next a {
	
	display: flex;
   	align-items:center;
}
.prev {
	float: left;
}
.next {
	float: right;
}
.prev:hover .transparent, .next:hover .transparent {
	opacity: 1;
}
.prev span {
	position: relative;
	left: 25px;
}
.next span {
	position: relative;
	right: 32px;
}
.prev img, .next img {
	height: 20px;
	width: 20px;
	position: absolute;
}
.prev img {
	margin-right: 8px;
}
.next img {
	margin-left: 8px;
}
/* WORK PAGES ENDS */
/* BOTTOM ARROW STARTS */
#intro_bottom {
	height: 16px;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 10px;
	z-index: 10;
	-webkit-animation: arrow .7s infinite alternate;
	-ms-animation: arrow .7s infinite alternate;
	-o-animation: arrow .7s infinite alternate;
	-moz-animation: arrow .7s infinite alternate;
	animation: arrow .7s infinite alternate;
}
@-webkit-keyframes arrow {
 0% {
bottom: 15px;
}
 60% {
bottom: 0px;
}
 100% {
bottom: 5px;
}
}
@keyframes arrow {
 0% {
bottom: 5px;
}
 60% {
bottom: 0px;
}
 100% {
bottom: 5px;
}
}
#intro_bottom img {
	height: 16px;
}
/* BOTTOM ARROW ENDS */
.resume-image {
	width: 80%;
	margin: 20px auto 0;
}
.resume-image img {
	width: 100%;
}
@media screen and (min-width:320px) and (min-height:568px) {
.profile {
    width: 65%;
    padding-top: 65%;
}
.name {
    width: 240px;
    height: 84px;
    margin-top: 20px;
}
.logo {
    width: 150px;
    height: 71px;
    margin-top: 20px;
}
}

@media screen and (min-width:375px) {
nav a {
    padding-left: 30px;
    padding-right: 30px;
}
.profile {
    width: 60%;
    padding-top: 60%;
    margin-top: 20px;
}
.name {
    margin-top: 30px;
}
.logo {
    margin-top: 30px;
}
.zigzag {
    margin-top: 30px;
}
#intro_bottom {
	display: none;
}
}

@media screen and (min-width:375px) and (min-height:812px) {
.profile {
    width: 65%;
    padding-top: 65%;
    margin-top: 30px;
}
.name {
    margin-top: 40px;
}
.logo {
    margin-top: 40px;
}
.zigzag {
    margin-top: 40px;
}
}

@media screen and (min-width:414px) {
.logo {
    width: 200px;
    height: 90px;
    margin-top: 40px;
}
.zigzag {
    margin-top: 40px;
}
.previews {
    width: calc(50% - 20px);
    padding-top: calc(50% - 20px); /* 1:1 Aspect Ratio */
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 20px;
    float: left;
}
.text {
	font-size: 12px;
}
}

@media screen and (min-width:450px) {
	.masthead {
		margin: 0 auto;
	}
}

@media screen and (min-width:768px) {
#the-form-itself {
	margin-top: 40px;
}
.the-form {
	width: 48%;
	float: left;
}
input, textarea {
	margin: 0 0 10px;
}
textarea {
	height: 10em;
	max-width: 100%;
	max-height: 10em;
}
.the-text {
	width: 100%;
    text-align: center;
}
.the-text p {
	font-size: 1em;
}
.the-text h3 {
	font-size: 1.5em;
}
#container, header {
	position: relative;
	top: -14px;
}
#container {
	margin-top: 0;
}
nav {
    text-align: left;
	width: 400px;
	position: relative;
	top: -64px;
}
nav a:first-of-type {
	padding-left: 0;
}

#contact-button {
	text-align: right;
}
.profile {
    width: 200px;
    padding-top: 200px;
    float: left;
    margin-top: 0;
}
.name {
    float: left;
    width: 260px;
    height: 66px;
    margin-top: 67px;
    margin-left: 20px;
}
.logo {
    width: 147px;
    height: 66px;
    margin-top: 64px;
    float: right;
}
.zigzag {
    width: 100%;
    margin-top: 100px;
}
.thumbnails {
    width: calc(95% + 20px);
    max-width: 1200px;
}
.previews {
    width: calc(33.33% - 20px);
    padding-top: calc(33.33% - 20px); /* 1:1 Aspect Ratio */
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 20px;
    float: left;
}
.text {
	font-size: 18px;
}
.copyright {
	text-align: left;
	width: 35%;
	float: left;
}
.social {
	float: right;
	margin-top: 0;
}

}

@media screen and (min-width:1000px) {
.profile {
    width: 220px;
    padding-top: 220px;
}
.name {
    width: 280px;
    height: 83px;
    margin-top: 68px;
}
.logo {
    width: 200px;
    height: 90px;
    margin-top: 65px;
    float: right;
}
.previews {
    width: calc(25% - 20px);
    padding-top: calc(25% - 20px); /* 1:1 Aspect Ratio */
    margin-left: 10px;
    margin-right: 10px;
    float: left;
}
.description {
	width: calc(25% - 20px);
    
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 20px;
	float: right;
}
.sample-images {
	width: calc(75% - 20px);
    
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 20px;
	float: left;
}	
}
/* IPHONE 4 STARTS */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
.profile {
    width: 100px;
    padding-top: 100px;
    float: left;
    margin-top: 0;
}
.name {
    float: left;
    width: 140px;
    height: 36px;
    margin-top: 30px;
    margin-left: 20px;
}
.logo {
    width: 80px;
    height: 36px;
    margin-top: 30px;
    float: right;
}
}
/* IPHONE 4 ENDS */
/* IPHONE 5, SE STARTS */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
.profile {
    width: 100px;
    padding-top: 100px;
    float: left;
    margin-top: 0;
}
.name {
    float: left;
    width: 140px;
    height: 36px;
    margin-top: 30px;
    margin-left: 20px;
}
.logo {
    width: 80px;
    height: 36px;
    margin-top: 30px;
    float: right;
}
}
/* IPHONE 5, SE ENDS */
/* IPHONE 6, 7, 8 STARTS */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 
.profile {
    width: 120px;
    padding-top: 120px;
    float: left;
    margin-top: 0;
}
.name {
    float: left;
    width: 140px;
    height: 36px;
    margin-top: 30px;
    margin-left: 20px;
}
.logo {
    width: 80px;
    height: 36px;
    margin-top: 30px;
    float: right;
}
}
/* IPHONE 6, 7, 8 ENDS */
/* IPHONE PLUS */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
.profile {
    width: 200px;
    padding-top: 200px;
    float: left;
    margin-top: 0;
}
.name {
    float: left;
    width: 260px;
    height: 66px;
    margin-top: 67px;
    margin-left: 20px;
}
.logo {
    width: 147px;
    height: 66px;
    margin-top: 64px;
    float: right;
}
.previews {
    width: calc(33.33% - 20px);
    padding-top: calc(33.33% - 20px); /* 1:1 Aspect Ratio */
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 20px;
    float: left;
}
.text {
	font-size: 14px;
}
}
/* IPHONE PLUS ENDS */
/* IPHONE X STARTS */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
.profile {
    width: 200px;
    padding-top: 200px;
    float: left;
    margin-top: 0;
}
.name {
    float: left;
    width: 260px;
    height: 66px;
    margin-top: 67px;
    margin-left: 20px;
}
.logo {
    width: 147px;
    height: 66px;
    margin-top: 64px;
    float: right;
}
}
/* IPHONE X ENDS */

/* GALAXY PHONES START */

@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 2) 
  and (orientation: landscape) {
.profile {
    width: 120px;
    padding-top: 120px;
    float: left;
    margin-top: 0;
}
.name {
    float: left;
    width: 140px;
    height: 36px;
    margin-top: 30px;
    margin-left: 20px;
}
.logo {
    width: 80px;
    height: 36px;
    margin-top: 30px;
    float: right;
}
}

@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
.profile {
    width: 120px;
    padding-top: 120px;
    float: left;
    margin-top: 0;
}
.name {
    float: left;
    width: 140px;
    height: 36px;
    margin-top: 30px;
    margin-left: 20px;
}
.logo {
    width: 80px;
    height: 36px;
    margin-top: 30px;
    float: right;
}
}

@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 4) 
  and (orientation: landscape) {
.profile {
    width: 120px;
    padding-top: 120px;
    float: left;
    margin-top: 0;
}
.name {
    float: left;
    width: 140px;
    height: 36px;
    margin-top: 30px;
    margin-left: 20px;
}
.logo {
    width: 80px;
    height: 36px;
    margin-top: 30px;
    float: right;
}
}

/* GALAXY PHONES END */

/* GOOGLE PHONES START */

@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
.profile {
    width: 120px;
    padding-top: 120px;
    float: left;
    margin-top: 0;
}
.name {
    float: left;
    width: 140px;
    height: 36px;
    margin-top: 30px;
    margin-left: 20px;
}
.logo {
    width: 80px;
    height: 36px;
    margin-top: 30px;
    float: right;
}
}

@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 4) 
  and (orientation: landscape) {
.profile {
    width: 120px;
    padding-top: 120px;
    float: left;
    margin-top: 0;
}
.name {
    float: left;
    width: 140px;
    height: 36px;
    margin-top: 30px;
    margin-left: 20px;
}
.logo {
    width: 80px;
    height: 36px;
    margin-top: 30px;
    float: right;
}
}
/* GOOGLE PHONES END */