@charset 'UTF-8';
@import url('http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,900');
@import url(http://fonts.googleapis.com/css?family=Sansita+One);
@import url('font-awesome.min.css');

/*
	Big Picture by HTML5 UP
	html5up.net | @n33co
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/

/*********************************************************************************/
/* Basic                                                                         */
/*********************************************************************************/

	body {
		background: #fff;
		padding-top: 3em;
	}

		body.is-loading *
		{
			-moz-transition: none !important;
			-webkit-transition: none !important;
			-o-transition: none !important;
			-ms-transition: none !important;
			transition: none !important;
			-moz-animation: none !important;
			-webkit-animation: none !important;
			-o-animation: none !important;
			-ms-animation: none !important;
			animation: none !important;
		}

	body, input, textarea, select {
		font-family: 'Source Sans Pro', sans-serif;
		font-weight: 300;
		font-size: 18pt;
		line-height: 1.75em;
		color: #39454b;
    letter-spacing: normal;
	}

	h1, h2, h3, h4, h5, h6 {
		font-weight: 900;
		color: inherit;
	}
	
		h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
			color: inherit;
			text-decoration: none;
		}
		
	h1 {
		font-size: 4.25em;
		line-height: 1em;
    letter-spacing: -4px;
    text-transform: uppercase;
	}

	h2 {
		letter-spacing: -2px;
		font-size: 2.15em;
		line-height: 1em;
	}

  h3 {
    font-size: 1.4em;
    font-weight: 300;
    letter-spacing: -1px;
    line-height: 1.5em;
    border-bottom: 1px dotted #808080;
    margin-bottom: 0.85em;
  }

	strong, b {
		font-weight: 900;
		color: inherit;
	}
	
	em, i {
		font-style: italic;
	}

	a {
		color: #7aa2d2;
    text-decoration: none;

		-moz-transition: all 0.2s ease-in-out, color 0.2s ease-in-out;
		-webkit-transition: all 0.2s ease-in-out, color 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out, color 0.2s ease-in-out;
		-ms-transition: all 0.2s ease-in-out, color 0.2s ease-in-out;
		transition: all 0.2s ease-in-out, color 0.2s ease-in-out;
	}

	sub {
		position: relative;
		top: 0.5em;
		font-size: 0.8em;
	}
	
	sup {
		position: relative;
		top: -0.5em;
		font-size: 0.8em;
	}
	
	hr {
		border: 0;
		border-top: solid 1px #ddd;
	}
	
	blockquote {
		border-left: solid 0.5em #ddd;
		padding: 1em 0 1em 2em;
		font-style: italic;
	}
	
	p, ul, ol, dl, table {
		margin-bottom: 1em;
	}

	header {
		margin-bottom: 1em;
	}
	
		header p {
			display: block;
			margin: 1em 0 0 0;
			padding: 0 0 0.5em 0;
		}
		
	br.clear {
		clear: both;
	}

	/* Sections/Article */
	
		section,
		article {
			margin-bottom: 3em;
		}
		
			section > :last-child,
			article > :last-child {
				margin-bottom: 0;
			}

			section > .content > :last-child,
			article > .content > :last-child {
				margin-bottom: 0;
			}

			section:last-child,
			article:last-child {
				margin-bottom: 0;
			}

			.row > section,
			.row > article {
				margin-bottom: 0;
			}

	/* Image */
	
		.image.fit {
			display: block;
			width: 100%;
		}
			

	/* List */

		ul {
		}

			ul.default {
				list-style: disc;
				padding-left: 1em;
			}
			
				ul.default li {
					padding-left: 0.5em;
				}		

			ul.icons {
				cursor: default;
			}	
			
				ul.icons li {
					display: inline-block;
				}
				
					ul.icons a {
						display: inline-block;
						width: 2em;
						height: 2em;
						line-height: 2em;
						text-align: center;
						border: 0;
					}

			ul.menu {
				cursor: default;
			}
			
				ul.menu li {
					display: inline-block;
					line-height: 1em;
					border-left: solid 1px rgba(145,146,147,0.25);
					padding: 0 0 0 0.5em;
					margin: 0 0 0 0.5em;
				}
				
				ul.menu li:first-child {
					border-left: 0;
					padding-left: 0;
					margin-left: 0;
				}

			ul.actions {
				cursor: default;
        margin-bottom: 0;
			}
			
				ul.actions li {
					display: inline-block;
					margin: 0 0 0 0.5em;
				}
				
				ul.actions li:first-child {
					margin-left: 0;
				}

		ol {
		}

			ol.default {
				list-style: decimal;
				padding-left: 1.25em;
			}

				ol.default li {
					padding-left: 0.25em;
				}

	/* Form */

		form {
		}
		
			form label {
				display: block;
			}
		
			form input[type="text"],
			form input[type="email"],
			form input[type="password"],
			form select,
			form textarea {
				display: block;
				width: 100%;
				padding: 0.65em 0.75em;
				color: inherit;

				background: none;
        background-color: rgba(255, 255, 255, 0.62);
        border: 1px solid rgba(57, 69, 75, 0.4);
    		border-radius: 5px;
        box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
				outline: none;

				-moz-appearance: none;
				-webkit-appearance: none;
				-o-appearance: none;
				-ms-appearance: none;
				appearance: none;

				-moz-transition: all 0.2s ease-in-out, color 0.2s ease-in-out;
				-webkit-transition: all 0.2s ease-in-out, color 0.2s ease-in-out;
				-o-transition: all 0.2s ease-in-out, color 0.2s ease-in-out;
				-ms-transition: all 0.2s ease-in-out, color 0.2s ease-in-out;
				transition: all 0.2s ease-in-out, color 0.2s ease-in-out;
			}

	      form input[type="text"]:focus,
	      form input[type="email"]:focus,
	      form input[type="password"]:focus,
	      form select:focus,
	      form textarea:focus {
		      border-color: #6E94C2;
	      }

			form input[type="text"],
			form input[type="email"],
			form input[type="password"],
			form select {
				line-height: 1.35em;
			}
				
			form textarea {
				min-height: 8em;
			}

/*
			form .formerize-placeholder {
				color: rgba(145,146,147,0.85) !important;
			}

			form ::-webkit-input-placeholder {
				color: rgba(145,146,147,0.85) !important;
			}

			form :-moz-placeholder {
				color: rgba(145,146,147,0.85) !important;
			}

			form ::-moz-placeholder {
				color: rgba(145,146,147,0.85) !important;
			}

			form :-ms-input-placeholder {
				color: rgba(145,146,147,0.85) !important;
			}
*/

			form ::-moz-focus-inner {
				border: 0;
			}
			
	/* Table */
	
		table {
			width: 100%;
		}
		
			table.default {
				width: 100%;
			}
			
				table.default tbody tr:nth-child(2n+2) {
					background: #f4f4f4;
				}
				
				table.default td {
					padding: 0.5em 1em 0.5em 1em;
				}
				
				table.default th {
					text-align: left;
					font-weight: 900;
					padding: 0.5em 1em 0.5em 1em;
				}
			
				table.default thead {
					background: #444;
					color: #fff;
				}
				
				table.default tfoot {
					background: #eee;
				}
				
				table.default tbody {
				}

	/* Button */

		input[type="button"],
		input[type="submit"],
		input[type="reset"],
		.button {
			background-color: #98c593;
			border: 0;
			border-radius: 3.5em;
			color: #fff;
			cursor: pointer;
			display: inline-block;
			height: 3.5em;
			line-height: 3.5em;
			outline: 0;
			padding: 0 2em 0 2em;
			position: relative;
			text-align: center;
			text-decoration: none;

			-moz-appearance: none;
			-webkit-appearance: none;
			-o-appearance: none;
			-ms-appearance: none;
			appearance: none;

			-moz-transition: all 0.2s ease-in-out;
			-webkit-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;
		}

			.button.down {
				width: 5em;
				height: 5em;
				line-height: 4.5em;
				padding: 0;
				background-image: url('images/dark-arrow.svg');
				background-position: center center;
				background-repeat: no-repeat;
				text-indent: -10em;
				overflow: hidden;
			}
			
				.button.down.anchored {
					bottom: 0;
					border-bottom: 0;
					border-radius: 3em 3em 0 0;
					height: 4.5em;
					margin-left: -2.5em;
				}
			
			.button.anchored {
				position: absolute;
				left: 50%;
			}
			
			input[type="button"]:hover,
			input[type="submit"]:hover,
			input[type="reset"]:hover,
			.button:hover {
				background-color: #a8d5a3;
			}
			
			input[type="button"]:active,
			input[type="submit"]:active,
			input[type="reset"]:active,
			.button:active {
				background-color: #88b583;
			}

			input[type="button"].style2,
			input[type="submit"].style2,
			input[type="reset"].style2,
			.button.style2 {
				background-color: transparent;
				border: solid 2px #e5e6e7;
				color: inherit;
			}

				input[type="button"].style2:hover,
				input[type="submit"].style2:hover,
				input[type="reset"].style2:hover,
				.button.style2:hover {
					background-color: rgba(145,146,147,0.035);
				}
				
				.button.style2.down {
					background-image: url('images/arrow.svg');
				}

	input[type="button"],
	input[type="submit"],
	input[type="reset"],
	.button.alt {
    font-size: 1.1em;
    font-weight: 600;
    text-transform: uppercase;
    height: 2.5em;
    line-height: 2.5em;
    padding: 0 0.9em;
    border-radius: 2px;
    text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.15);
    background-color: #7aa2d2;
    background-image: -moz-linear-gradient(center top , rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15)); /* ################# I NEED TO MAKE THIS CROSS-BROWSER!!!! #################  */
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.2) inset, 0 2px 1px 0 rgba(255, 255, 255, 0.25) inset;
	}

	input[type="button"]:hover,
	input[type="submit"]:hover,
	input[type="reset"]:hover,
	.button.alt:hover {
		background-color: #6E94C2;
	}

  .button.alt {
    font-size: 1.05em;
    margin-top: 0.95em;
  }

  .button.alt i {
    margin-right: 0.15em;
    opacity: 0.5;
  }

	/* Box */

		.box {
			background: #fff;
			padding: 2em;
		}
		
			.box.style2 {
				padding: 3.5em 2.5em 3.5em 2.5em;
			}

	/* Main */
		
		.main {
			position: relative;
			margin: 0;
			overflow-x: hidden;
		}
		
			.main.style1 {
				text-align: center;
        padding: 3em 0;
			}

				.main.style1 .content {
					opacity: 1.0;

					-moz-transition: all 1s ease;
					-webkit-transition: all 1s ease;
					-o-transition: all 1s ease;
					-ms-transition: all 1s ease;
					transition: all 1s ease;
					
					-moz-transform: translateZ(0);
					-webkit-transform: translateZ(0);
					-o-transform: translateZ(0);
					-ms-transform: translateZ(0);
					transform: translateZ(0);
				}
				
			.main.style1.inactive {
			}
			
				.main.style1.inactive .content {
					opacity: 0;
				}
		
			.main.style3 {
				text-align: center;
				padding: 3em 0;
			}

	/* Dark */

		.dark {
			color: #fff;
		}

			.dark a {
				color: #fff;
			}
		
			.dark .button.style2 {
				border-color: inherit;
				background-color: rgba(64,64,64,0.05);
			}

				.dark .button.style2:hover {
					background-color: rgba(255,255,255,0.1);
				}
				
				.dark .button.style2.down {
					background-image: url('images/dark-arrow.svg');
				}
		
/*********************************************************************************/
/* Icons                                                                         */
/*********************************************************************************/

	.icon {
		text-decoration: none;
	}

		.icon:before {
			display: inline-block;
			font-family: FontAwesome;
			font-size: 1.25em;
			text-decoration: none;
			font-style: normal;
			font-weight: normal;
			line-height: 1;
			-webkit-font-smoothing:antialiased;
			-moz-osx-font-smoothing:grayscale;
		}
		
		.icon > .label {
			display: none;
		}

/*********************************************************************************/
/* Header                                                                        */
/*********************************************************************************/

	#header {
		position: fixed;
		z-index: 10000;
		left: 0;
		top: 0;
		width: 100%;
		background: rgba(255,255,255,0.95);
		background-color: #fff;
		height: 3em;
		line-height: 3em;
		box-shadow: 0 0 0.15em 0 rgba(0,0,0,0.1);
	}
	
  #logo {
    position: absolute;
    top: 0;
    left: 0.5em;
    font-family: "Sansita One", cursive;
    font-size: 1.75em;
    color: #808080;
    line-height: 1.7em;
    letter-spacing: -2px;
    text-transform: none;
  }
	
	#nav {
		position: absolute;
		right: 1em;
		top: 0;
		height: 3em;
		line-height: 3em;
	}

		#nav ul {
			margin: 0;
		}

			#nav ul li {
				display: inline-block;
				margin-left: 0.5em;
				font-size: 0.9em;
			}
			
				#nav ul li a {
					display: block;
          font-weight: inherit;
					color: inherit;
					text-decoration: none;
          height: 2em;
          line-height: 2em;
					padding: 0 0.5em 0 0.5em;
					outline: 0;

					border-radius: 4px;
					-moz-transition: background-color .25s ease-in-out;
					-webkit-transition: background-color .25s ease-in-out;
					-o-transition: background-color .25s ease-in-out;
					-ms-transition: background-color .25s ease-in-out;
					transition: background-color .25s ease-in-out;
				}
	
				#nav ul li:hover a {
					background-color: #f7f7f7;
				}

/*********************************************************************************/
/* Intro                                                                         */
/*********************************************************************************/

  #intro {
	  background: url('images/overlay.png'), url('../images/bg/feet-bg.jpg');
	  background-size: 8px 8px, cover;
    background-attachment: fixed, fixed;
	  background-position: top left, bottom center;
	  background-repeat: repeat, no-repeat;
  }

  #intro-inner {
    text-shadow: 2px 8px 6px rgba(0,0,0,0.25), 0px -5px 35px rgba(255,255,255,0.3);
  }

  #intro-inner header {
    margin-bottom: 0;
  }

  #intro-name {
    text-transform: uppercase;
    margin-bottom: 0;
  }

  #intro-for-hire {
    width: 27em;
    margin: 2em auto 0.5em;

    -webkit-transform: rotate(6deg);
       -moz-transform: rotate(6deg);
         -o-transform: rotate(6deg);
            transform: rotate(6deg);
         writing-mode: lr-tb;
  }

  #intro-for-hire h2 {
    font-family: 'Sansita One', cursive;
    font-size: 2.35em;
    letter-spacing: normal;
    text-transform: uppercase;
    text-shadow: -2px -2px 0 rgba(0, 0, 0, 0.15);
    padding: 15px 0 13px;

    border: 5px solid #fff;
    background: rgb(97,124,149); /* Old browsers */
    background: -moz-linear-gradient(left,  rgba(97,124,149,1) 0%, rgba(133,158,169,1) 50%, rgba(97,124,149,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(97,124,149,1)), color-stop(50%,rgba(133,158,169,1)), color-stop(100%,rgba(97,124,149,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  rgba(97,124,149,1) 0%,rgba(133,158,169,1) 50%,rgba(97,124,149,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  rgba(97,124,149,1) 0%,rgba(133,158,169,1) 50%,rgba(97,124,149,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  rgba(97,124,149,1) 0%,rgba(133,158,169,1) 50%,rgba(97,124,149,1) 100%); /* IE10+ */
    background: linear-gradient(to right,  rgba(97,124,149,1) 0%,rgba(133,158,169,1) 50%,rgba(97,124,149,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#617c95', endColorstr='#617c95',GradientType=1 ); /* IE6-9 */
  }

  #intro-occupation, #intro-contact {
    font-size: 1.7em;
    font-weight: 900;
    text-transform: uppercase;
  }

  #intro-occupation i {
    font-size: 0.9em;
    padding: 0 10px;
  }

  #intro-contact {
    padding-bottom: 2.25em;
  }

  #intro-contact i {
    padding-right: 16px;
    vertical-align: baseline;
  }

/*********************************************************************************/
/* My Services                                                                   */
/*********************************************************************************/

  #services {
	  background: url('images/overlay.png'), url('../images/bg/brickwall-bg.jpg');
	  background-size: 8px 8px, cover;
    background-attachment: fixed, fixed;
	  background-position: top left, bottom center;
	  background-repeat: repeat, no-repeat;
    z-index: 0; /* This is to make the ".shadow-effect" class visible. Note that it doesn't seem to matter what the z-index value is, as long as it has one... */
  }

	.main.style2 {
		padding: 3em 0 4.5em 0;
		overflow: hidden;
    text-align: center;
	}
			
		.main.style2 .content {
			position: relative;
      text-shadow: 2px 8px 6px rgba(0, 0, 0, 0.25), 0 -5px 35px rgba(255, 255, 255, 0.3);

			opacity: 1.0;

			-moz-transition: all 1s ease;
			-webkit-transition: all 1s ease;
			-o-transition: all 1s ease;
			-ms-transition: all 1s ease;
			transition: all 2s ease;
					
			-moz-transform: translateZ(0);
			-webkit-transform: translateZ(0);
			-o-transform: translateZ(0);
			-ms-transform: translateZ(0);
			transform: translateZ(0);
		}

	  .main.style2.left .content {
		  top: 0;
	  }

	  .main.style2.inactive.left .content {
      top: -5em;
		  opacity: 0;
	  }

	/* Box */
		#services .box {
			background-color: transparent;
			padding: 0;
		}
		
			.box.style2 {
				padding: 0;
			}

  #services-inner .services-summary {
    color: #4f4f4f;
    text-shadow: none;
    padding: 0.75em 0.95em 1.45em;

    background-color: #fff;
    background: url('../images/bg/MyServicesBriefBGBottom.png'), url('../images/bg/MyServicesBriefBG.png');
	  background-size: 100%, 100%;
	  background-position: bottom center, top left;
	  background-repeat: no-repeat, no-repeat;
  }

  #services-inner .services-summary h2 {
    font-size: 2.5em;
    color: #c55454;
    line-height: 0.95em;
    padding: 0.45em 0 0.25em;
  }

  #services-inner .services-summary p {
    line-height: 1.25em;
    margin-bottom: 0;
    text-shadow: 0 1px 0 #fff;
  }

/*********************************************************************************/
/* Recent Work                                                                   */
/*********************************************************************************/

  #recent-work {
    z-index: 0; /* This is to make the ".shadow-effect" class visible. Note that it doesn't seem to matter what the z-index value is, as long as it has one... */
    text-shadow: 4px 4px 2px rgba(0, 0, 0, 0.1);
    background: url("../images/bg/diag-bg.png") repeat scroll 0 0 #f7f7f7;
    padding: 3em 0;
  }

    #recent-work .content > header h2 {
      font-size: 4.25em;
      letter-spacing: -4px;
      text-transform: uppercase;
    }

	  #recent-work .row.images {
	  }

	    #recent-work .row.images .image {
		    position: relative;
		    top: 0;
		    left: 0;
		    opacity: 1.0;
		
		    -moz-transition: all 1s ease;
		    -webkit-transition: all 1s ease;
		    -o-transition: all 1s ease;
		    -ms-transition: all 1s ease;
		    transition: all 1s ease;
		
		    -moz-transform: translateZ(0);
		    -webkit-transform: translateZ(0);
		    -o-transform: translateZ(0);
		    -ms-transform: translateZ(0);
		    transform: translateZ(0);
	    }

	    #recent-work .row.images.inactive {
	    }

	      #recent-work .row.images.inactive .image {
		      opacity: 0;
	      }
			
	      #recent-work .row.images.inactive .image.from-left {
		      left: -14em;
	      }

	      #recent-work .row.images.inactive .image.from-right {
		      left: 14em;
	      }
			
	      #recent-work .row.images.inactive .image.from-top {
		      top: -7em;
	      }
			
	      #recent-work .row.images.inactive .image.from-bottom {
		      top: 7em;
	      }

  #work-inner {
    margin-left: auto;
    margin-right: auto;
    width: 70%;
  }

  #recent-work .work-title {
    margin: 1.75em 0 0.5em;
  }

  #recent-work .work-title h2 {
    font-weight: 300;
    text-shadow: 0 1px 0 #fff;
  }

  #work-inner .image img {
    border: 1px solid #c5c5c5;
    display: block;
    width: 100%;
  }

  .work-shadow-effect { 
    box-shadow: 4px 4px 2px rgba(0, 0, 0, 0.1);
  }

  #recent-work .work-title, #recent-work header {
	  opacity: 1.0;

	  -moz-transition: all 1s ease;
	  -webkit-transition: all 1s ease;
	  -o-transition: all 1s ease;
	  -ms-transition: all 1s ease;
	  transition: all 1s ease;
		
	  -moz-transform: translateZ(0);
	  -webkit-transform: translateZ(0);
	  -o-transform: translateZ(0);
	  -ms-transform: translateZ(0);
	  transform: translateZ(0);
  }

  #recent-work.inactive .work-title, #recent-work.inactive header {
	  opacity: 0;
  }


/*********************************************************************************/
/* Testimonials                                                                  */
/*********************************************************************************/

/* ~~~~~ Carousel ~~~~~ */
#testimonials-slider { text-align: center; }
#testimonials-slider .item {
  position: relative; /* for positioning pseudo property */
}
#testimonials-slider .item::before {
  position: absolute;
  transform: translateX(-50%);
	font-family: 'FontAwesome';
  content: '\f10d';
  font-size: 65px;
  line-height: 65px;
  opacity: 0.25;
}
#testimonials-slider .item .review { text-align: left; padding-top: 80px; }
#testimonials-slider .item .author { font-weight: 600; margin-top: 50px; }

/* Owl Carousel overrides */
/* https://owlcarousel2.github.io/OwlCarousel2/demos/animate.html */
/* https://www.w3schools.com/cssref/css3_pr_animation-delay.asp */
#testimonials-slider .owl-animated-in {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}
#testimonials-slider .owl-animated-out {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}
#testimonials-slider.owl-carousel .owl-item {
  float: none;
  vertical-align: middle;
  display: inline-block;
}


/*********************************************************************************/
/* Contact                                                                       */
/*********************************************************************************/

  #contact {
	  background: url('images/overlay.png'), url('../images/bg/casualmeeting-bg.jpg');
	  background-size: 8px 8px, cover;
    background-attachment: fixed, fixed;
	  background-position: top left, bottom center;
	  background-repeat: repeat, no-repeat;
    overflow: hidden;
	}
	
    #contact-inner {
      margin-left: auto;
      margin-right: auto;
      width: 80%;
    }

    #contact header {
      color: #fff;
      text-shadow: 2px 8px 6px rgba(0, 0, 0, 0.25), 0 -5px 35px rgba(255, 255, 255, 0.3);

      opacity: 1;
			-moz-transition: all 1s ease;
			-webkit-transition: all 1s ease;
			-o-transition: all 1s ease;
			-ms-transition: all 1s ease;
			transition: all 1s ease;
			
			-moz-transform: translateZ(0);
			-webkit-transform: translateZ(0);
			-o-transform: translateZ(0);
			-ms-transform: translateZ(0);
			transform: translateZ(0);
    }

		#contact .box {
			position: relative;
			bottom: 0;
      min-height: 450px;
			
      background: url("../images/bg/diag-bg.png") repeat scroll 0 0 #f7f7f7;
      box-shadow: 4px 4px 2px rgba(0, 0, 0, 0.4);
      text-align: left;
      padding: 2.5em;

			-moz-transition: all 1s ease;
			-webkit-transition: all 1s ease;
			-o-transition: all 1s ease;
			-ms-transition: all 1s ease;
			transition: all 1s ease;
			
			-moz-transform: translateZ(0);
			-webkit-transform: translateZ(0);
			-o-transform: translateZ(0);
			-ms-transform: translateZ(0);
			transform: translateZ(0);
		}

    #contact-info {
      text-shadow: 0 1px 0 #fff;
    }

    ul.labeled-icons li:first-child {
      margin-top: 0.25em;
    }

    ul.labeled-icons li:last-child {
      border-bottom: 0 none;
      padding-bottom: 0;
    }

    ul.labeled-icons li {
      position: relative;
      line-height: 1.25em;
      margin: 1.5em 0 0;
      padding: 0 0 1.5em 2.5em;
      border-bottom: 1px solid rgba(57, 69, 75, 0.4);
    }

    ul.labeled-icons li h4 {
      left: 0;
      position: absolute;
      top: 0;
    }

    #contact-address-icon {
      font-size: 1.5em;
      left: -3px;
      top: 10px;
    }

    #contact-phone-icon {
      left: -10px;
      top: -11px;
    }

    #contact-email-icon {
      top: -3px;
    }

    #contact-linkedin-icon {
      left: 1px;
      top: -8px;
    }

    #contact-form .error-note, #contact .sent-confirmation, #sidebar-contact-form .sent-confirmation {
      color: #ffffff;
      padding: 1em;
      line-height: normal;
      border-radius: 5px;
    }

    #contact-form .error-note {
      background-color: #c55454;
    }

    #contact .sent-confirmation, #sidebar-contact-form .sent-confirmation {
      background-color: #7aa2d2;
    }

    #contact-form .error-note i {
      float: left;
      font-size: 2.5em;
      height: 1.2em;
      margin-left: 0.1em;
      margin-right: 0.35em;
      margin-top: 0.05em;
      opacity: 0.95;
    }

    #contact .sent-confirmation i, #sidebar-contact-form .sent-confirmation i {
      float: left;
      font-size: 2em;
      height: 1.2em;
      margin-left: 0.12em;
      margin-right: 0.35em;
      margin-top: -0.16em;
    }

    #contact-form .error {
      display: block;
      font-size: 0.9em;
      color: #c55454;
      text-shadow: 1px 1px 0 #fff;
    }

    #sidebar-contact-form #contact-form .error-note {
      font-size: 0.9em;
      padding: 0.55em;
      margin-top: 0.5em;
    }

    #sidebar-contact-form .sent-confirmation {
      font-size: 0.7em;
      padding: 0.55em;
      margin-top: 1.25em;
    }

    #sidebar-contact-form #contact-form .error-note i, #sidebar-contact-form .sent-confirmation i {
      margin-left: 0.25em;
      margin-right: 0.25em;
      margin-top: 0.25em;
    }

	  #contact a {
      color: #39454b;
      text-decoration: none;
	  }

	  #contact a:hover {
      color: #6E94C2;
	  }

		#contact.inactive {
		}

      #contact.inactive header {
        opacity: 0;
      }

			#contact.inactive .box {
				bottom: -30em;
			}

/*********************************************************************************/
/* Poptrox                                                                       */
/*********************************************************************************/

	.poptrox-popup {
		background: #fff;
		-moz-box-sizing: content-box;
		-webkit-box-sizing: content-box;
		-o-box-sizing: content-box;
		-ms-box-sizing: content-box;
		box-sizing: content-box;
		padding-bottom: 2.4em;
		box-shadow: 0 0.1em 0.15em 0 rgba(0,0,0,0.15);
	}
	
		.poptrox-popup .loader {
			width: 48px;
			height: 48px;
			background: url('images/loader.gif');
			position: absolute;
			top: 50%;
			left: 50%;
			margin: -24px 0 0 -24px;
		}
	
		.poptrox-popup .caption {
			position: absolute;
			bottom: 0;
			left: 0;
      background: none repeat scroll 0 0 rgba(0, 0, 0, 0.25);
			width: 100%;
			height: 2em;
			line-height: 2em;
			text-align: center;
			cursor: default;
			z-index: 1;
			font-size: 1.2em;
      font-weight: 400;
      color: white;
		}
		
		.poptrox-popup .nav-next,
		.poptrox-popup .nav-previous {
			position: absolute;
			top: 0;
			width: 50%;
			height: 100%;
			opacity: 0;
			cursor: pointer;
			background: rgba(0,0,0,0.01);
			-moz-transition: opacity 0.2s ease-in-out;
			-webkit-transition: opacity 0.2s ease-in-out;
			-o-transition: opacity 0.2s ease-in-out;
			-ms-transition: opacity 0.2s ease-in-out;
			transition: opacity 0.2s ease-in-out;
			-webkit-tap-highlight-color: rgba(255,255,255,0);
		}

			.poptrox-popup .nav-next:before,
			.poptrox-popup .nav-previous:before {
				content: '';
				position: absolute;
				width: 96px;
				height: 64px;
        background: url("images/poptrox-nav.svg") repeat scroll 0 0 rgba(0, 0, 0, 0.25);
				top: -moz-calc(50% - 1.5em);
				top: -webkit-calc(50% - 1.5em);
				top: -o-calc(50% - 1.5em);
				top: -ms-calc(50% - 1.5em);
				top: calc(50% - 1.5em);
				margin: -32px 0 0 0;
			}
		
			.poptrox-popup:hover .nav-next,
			.poptrox-popup:hover .nav-previous {
				opacity: 1.0;
			}

			.poptrox-popup:hover .nav-next:hover,
			.poptrox-popup:hover .nav-previous:hover {
				opacity: 1.0;
			}
			
			.poptrox-popup .nav-previous:before
			{
				-moz-transform: scaleX(-1);
				-webkit-transform: scaleX(-1);
				-o-transform: scaleX(-1);
				-ms-transform: scaleX(-1);
				transform: scaleX(-1);
				-ms-filter: "FlipH";			
				filter: FlipH;
			}

		.poptrox-popup .nav-next {
			right: 0;
		}

			.poptrox-popup .nav-next:before {
				right: 0;
			}
		
		.poptrox-popup .nav-previous {
			left: 0;
		}

			.poptrox-popup .nav-previous:before {
				left: 0;
			}
			
		.poptrox-popup .closer {
			position: absolute;
			top: 0;
			right: 0;
			width: 64px;
			height: 64px;
			text-indent: -9999px;
			z-index: 2;
			opacity: 0;
			-moz-transition: opacity 0.2s ease-in-out;
			-webkit-transition: opacity 0.2s ease-in-out;
			-o-transition: opacity 0.2s ease-in-out;
			-ms-transition: opacity 0.2s ease-in-out;
			transition: opacity 0.2s ease-in-out;
			-webkit-tap-highlight-color: rgba(255,255,255,0);
		}
		
			.poptrox-popup .closer:before {
				content: '';
				display: block;
				position: absolute;
				right: 16px;
				top: 16px;
				width: 40px;
				height: 40px;
				box-shadow: inset 0 0 0 2px #fff;
        background: url("images/poptrox-closer.svg") repeat scroll center center rgba(0, 0, 0, 0.2);
				color: #fff !important;
			}

			.poptrox-popup:hover .closer {
				opacity: 1.0;
			}

			.poptrox-popup:hover .closer:hover {
				opacity: 1.0;
			}
			
/*********************************************************************************/
/* Touch Mode                                                                    */
/*********************************************************************************/

	body.touch {
	}
	
		body.touch .main {
			background-attachment: scroll !important;
		}
		
		body.touch .poptrox-popup {
		}

			body.touch .poptrox-popup .nav-next,
			body.touch .poptrox-popup .nav-previous,
			body.touch .poptrox-popup .closer {
				opacity: 1.0 !important;
			}

/*-----------------------------------------------------------------*/
/* My Services - Byline Styles
/*-----------------------------------------------------------------*/

#budget-websites-byline {
  position: absolute;
  top: -30px;
  left: -45px;
}

#custom-websites-byline {
  position: absolute;
  bottom: -150px;
  left: 185px;
}

#ecommerce-byline {
  position: absolute;
  bottom: -185px;
  right: 245px;
  display: none;
}

#custom-coding-byline {
  position: absolute;
  top: -50px;
  right: -55px;
}

/*-----------------------------------------------------------------*/
/* My Services - Content Page Styles */
/*-----------------------------------------------------------------*/

#budget-websites {
  background: url("../images/bg/diag-bg.png") repeat scroll 0 0 #f7f7f7; /* Fallback method for browsers that don't support multiple backgrounds */
  background: 
    url("../images/bg/CoffeeClipboardPen.png") no-repeat scroll 0% 0% / 400px auto, 
    url("../images/bg/ColouredPencilsToyPlane.png") no-repeat scroll 100% 100% / 377px auto, 
    url("../images/bg/diag-bg.png") repeat scroll 0 0 #f7f7f7;
}

#custom-websites {
  background: url("../images/bg/diag-bg.png") repeat scroll 0 0 #f7f7f7; /* Fallback method for browsers that don't support multiple backgrounds */
  background: 
    url("../images/bg/CoffeeClipboardPen.png") no-repeat scroll 0% 0% / 400px auto, 
    url("../images/bg/ColouredPencilsToyDinosaur.png") no-repeat scroll 100% 100% / 377px auto, 
    url("../images/bg/diag-bg.png") repeat scroll 0 0 #f7f7f7;
}

#ecommerce-websites {
  background: url("../images/bg/diag-bg.png") repeat scroll 0 0 #f7f7f7; /* Fallback method for browsers that don't support multiple backgrounds */
  background: 
    url("../images/bg/CoffeeClipboardPen.png") no-repeat scroll 0% 0% / 400px auto, 
    url("../images/bg/ColouredPencilsToyShoppingCart.png") no-repeat scroll 100% 100% / 377px auto, 
    url("../images/bg/diag-bg.png") repeat scroll 0 0 #f7f7f7;
}

#custom-coding {
  background: url("../images/bg/diag-bg.png") repeat scroll 0 0 #f7f7f7; /* Fallback method for browsers that don't support multiple backgrounds */
  background: 
    url("../images/bg/CoffeeClipboardPen.png") no-repeat scroll 0% 0% / 400px auto, 
    url("../images/bg/ColouredPencilsToyRobot.png") no-repeat scroll 100% 100% / 377px auto, 
    url("../images/bg/diag-bg.png") repeat scroll 0 0 #f7f7f7;
}

.\31 col-content {
  text-align: center;
  padding: 3em 0;
}

.\31 col-content .container > header {
  margin-bottom: 2em;
  text-shadow: 4px 4px 2px rgba(0, 0, 0, 0.1);
}

.\31 col-content-inner {
  margin-left: auto;
  margin-right: auto;
  width: 75%;
  text-align: left;
  text-shadow: 0 1px 0 #fff;
}

.\31 col-content-inner a {
	color: #7aa2d2;
  font-weight: 400;
  text-decoration: none;
}

.\31 col-content-inner a:hover {
  text-decoration: underline;
}

.\31 col-content-inner article {
  margin-bottom: 2em;
}

.\31 col-content-inner h2 {
  font-weight: 400;
  margin-bottom: 0.2em;
}

.\31 col-content-inner .fa-ul {
  line-height: 1.35em;
  margin-left: 2.85em;
  margin-top: 1em;
}

.\31 col-content-inner .ul-nested {
  margin-top: 1.75em;
  margin-bottom: 1.5em;
}

.\31 col-content-inner .fa-ul li {
  margin-bottom: 1.25em;
}

.\31 col-content-inner .fa-ul li .fa-check-square-o {
  font-size: 2em;
  color: #54c270;
  left: -2em;
  top: -0.1em;
}

#technical-proficiencies h2, #technical-proficiencies h3 {
  margin-bottom: 0em;
}

#technical-proficiencies .fa-check-square-o {
  font-size: 2em;
  color: #54c270;
  position: relative;
  top: 0.17em;
  margin-left: 0.05em;
  margin-right: 0.5em;
}

/*-----------------------------------------------------------------*/
/* My Services - Content Page Sidebar Styles */
/*-----------------------------------------------------------------*/

#sidebar-contact-info {
  font-size: 1.3em;
  color: #808080;
  text-align: center;
  padding: 1.2em 0;
  margin-top: 0.25em;

  background-color: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(57, 69, 75, 0.4);
  border-radius: 5px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
  text-shadow: none;
}

#sidebar-contact-info ul {
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
  width: 85%;
}

#sidebar-contact-info ul li {
  border-bottom: 1px dotted #808080;
  margin: 1em 0 0;
  padding-bottom: 1em;
}

#sidebar-contact-info ul li:first-child {
  margin: 0;
}

#sidebar-contact-info ul li:last-child {
  border-width: 0;
  padding-bottom: 0;
}

#sidebar-contact-info #contact-form {
  font-size: 0.75em;
  padding: 0.25em 0;
}

#sidebar-contact-info ul li span {
  color: #d27a7a;
}

#sidebar-phone, #sidebar-email {
  font-family: "Sansita One",cursive;
  white-space: nowrap;
}

#sidebar-phone {
  font-size: 1.3em;
}

#sidebar-email {
  font-size: 0.8em;
  line-height: 1.1em;
  margin-bottom: 0.2em;
}

#sidebar-phone a, #sidebar-email a { /* "sidebar-phone a" is for iPad, iPhone which wraps the phone number in its own "a" tag */
  color: inherit;
}

#sidebar-email a:hover {
  color: #6E94C2;
  text-decoration: none;
}

#sidebar-contact-info .contact-phone-icon {
  font-size: 1.5em;
}

#sidebar-contact-info .contact-email-icon, #sidebar-contact-info .contact-keyboard-icon {
  margin-top: -3px;
}

#sidebar-contact-info form input[type="text"], #sidebar-contact-info form input[type="email"], #sidebar-contact-info form textarea {
  padding: 0.5em;
  box-shadow: none;
}

#sidebar-contact-info input[type="submit"] {
  height: 2.25em;
  line-height: 2.25em;
  padding: 0 0.75em;
  border-radius: 5px;
}

/*-----------------------------------------------------------------*/
/* BOX SHADOW EFFECT :: http://www.paulund.co.uk/creating-different-css3-box-shadows-effects */
/*-----------------------------------------------------------------*/
.shadow-effect { position: relative; }

#intro-inner .shadow-effect:before, #intro-inner .shadow-effect:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 50%;
  max-width: 260px;
  background: #CCC;

  -webkit-box-shadow: 0 15px 10px #000;
     -moz-box-shadow: 0 15px 10px #000;
          box-shadow: 0 15px 10px rgba(0,0,0,0.45);

  -webkit-transform: rotate(-3deg);
     -moz-transform: rotate(-3deg);
       -o-transform: rotate(-3deg);
      -ms-transform: rotate(-3deg);
          transform: rotate(-3deg);
}

#intro-inner .shadow-effect:after
{
  -webkit-transform: rotate(3deg);
     -moz-transform: rotate(3deg);
       -o-transform: rotate(3deg);
      -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}


#services-inner .shadow-effect:before, #services-inner .shadow-effect:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 6px;
  width: 48%;
  top: 90%;
  max-width: 260px;
  background: #CCC;

  -webkit-box-shadow: 0 15px 10px #000;
     -moz-box-shadow: 0 15px 10px #000;
          box-shadow: 0 15px 10px rgba(0,0,0,0.45);

  -webkit-transform: rotate(-4deg);
     -moz-transform: rotate(-4deg);
       -o-transform: rotate(-4deg);
      -ms-transform: rotate(-4deg);
          transform: rotate(-4deg);
}

#services-inner .shadow-effect:after
{
  -webkit-transform: rotate(4deg);
     -moz-transform: rotate(4deg);
       -o-transform: rotate(4deg);
      -ms-transform: rotate(4deg);
  transform: rotate(4deg);
  right: 6px;
  left: auto;
}

/* ######################################################### */
/* ######################################################### */
/* Chrome/Safari hacks */
/* The fade in transitions on the home page are buggy in Chrome, so I've turned them off. */
@media screen and (-webkit-min-device-pixel-ratio:0) {

  .main.style2 .content, #recent-work .row.images .image, #recent-work .work-title, #recent-work header {
	  -moz-transform: none;
	  -webkit-transform: none;
	  -o-transform: none;
	  -ms-transform: none;
	  transform: none;
  }

	.main.style2.inactive.left .content, #recent-work .row.images.inactive .image, #recent-work.inactive .work-title, #recent-work.inactive header {
		opacity: 1;
	}

}
/* ######################################################### */
/* ######################################################### */