@charset "utf-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}

/*
	Dreamweaver Fluid Grid Properties
	----------------------------------
	dw-num-cols-mobile:		5;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	10;
	dw-gutter-percentage:	25;
	
	Inspiration from "Responsive Web Design" by Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	and Golden Grid System by Joni Korpi
	http://goldengridsystem.com/
*/

*	{ 
padding:0; 
margin:0; 
box-sizing:border-box; 
font-family:"Poppins", sans-serif;	

}

#scroll	{	

@import "compass/css3";
$backColor: #141414;
$w: 100vw;
$h: 100vh;

* {
	margin: 0px;
	padding: 0px;
}

.sensor {
	height: $h;
	overflow-y: scroll;
	background: black;
	width: 100%;

	.title {
		font-family: Arial;	
		font-size: 3em;
		height: 80px;
		color: white;
		vertical-align: middle;
		text-align: center;
		&:after{
			vertical-align: middle;
			display:inline-block;
			content: '';
			height: 100%;
		}
	}
	.parallax {
		overflow: hidden;

		font-family: arial;
		font-size: 3em;
		border: 1px solid rgba(0, 0, 0, 0.5);
		height: $h * 0.7;
		@include box-sizing(border-box);
		background-size: 120% auto;
		background-attachment: fixed;
		vertical-align: middle;

		&:hover {
			& div {
				opacity: 1;
			}
		}

		&:after {
			display: inline-block;
			content: "";
			height: 100%;
			vertical-align: middle;
			// border: 1px solid red;
		}

		.name{
			@include transition(opacity 0.3s);
			opacity: 0;
			background-color: rgba(255,255,255,0.5);
			padding: 1%;
			text-align: center;
			margin: 2%;
			width: 20%;
			display: inline-block;
			vertical-align: middle;
		}

		.content {
			@include transition(opacity 0.2s 0.1s);
			@include box-sizing(border-box);
			position: relative;
			opacity: 0;
			background: rgba(0, 0, 0, 0.6);
			font-size: 0.5em;
			font-family: arial;
			line-height: 1.5em;
			text-align: justify;
			color: white;
			width: 70%;
			display: inline-block;
			vertical-align: middle;
			border: $w*0.05 solid transparent;
		}

		&:nth-child(2) {
			background-image: url(Banner%20images/91c74d789cd67217cc156bdd113163f1.jpg);
		}
		&:nth-child(3) {
			color: white;
			background-image: url(Background%20images/R.jfif);
		}
		&:nth-child(4) {
			background-image: url(Background%20images/gold-chain-necklace-22k-fine-men-039-s-jewelry.jpg);
		}
		&:nth-child(5) {
			color: white;
			background-image: url(Background%20images/Fig17mmY-M.jpg);
		}
	}
	.footer {
		text-align: center;
		font-family: Arial;
		font-size: 1em;
		height: 80px;
		color: white;
		div{
			display: inline-block;
			vertical-align: middle;
			line-height: 1.5em;
		}

		a {
			color: white;
		}
		&:after {
			display: inline-block;
			content: "";
			height: 80px;
			vertical-align: middle;
		}
	}
}
::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}
::-webkit-scrollbar-track {
	background-color: #ececec;
}
::-webkit-scrollbar-thumb {
	background-color: rgba(56, 89, 100, 0.4);
	border: 2px solid #e3e7f0;
}
::-webkit-scrollbar-button {
	height: 0px;
	background: red;
	width: 0px;
}
::-webkit-scrollbar-corner {
	margin-top: 20px;
	background-color: #e3e7f1;
}



}


#banner	{
	
	width:880px;
	height:300px;
	margin:0 auto;
	overflow:hidden;
	margin-bottom:50px;
		

}

h1	{
	margin-bottom:50px;	

}


*	{
	margin:0;
	padding:0;
	box-sizing:border-box;	

}

/* E-Mail Button */

.btn	{	

}


body	{ 
font-family:Arial, Helvetica, sans-serif; 
background-image: url(Background%20images/IMG_9015-scaled.jpg);
background-attachment:fixed;
color:#FFF;

}

ul	{
	list-style:none;	

}


/* Containers */

#outer	{ 
width:940px;
margin:0px auto;
background: #000;
padding:10px 0;
opacity:0.8;	

}

#wrapper	{ 
padding: 25px 15px 10px 60px;	

}


.paypal	{ 
margin-top:30px;	

}


#logo	{ 

}

#social-media	{ 
clear:both;
padding:0 10px;

}

#social-media ul li	{
	display:inline;
	padding:0 2px;	

}

#navigation	{ 
border-top:2px #FF0000 solid;
margin:20px 0;	
padding:10px 0;
margin-bottom:300px;
}

#banner	{ 
padding:0 10px; 

}
#content {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}

#slideshow	{ 
margin-top:20px;
margin-bottom:50px;	

}

#footer	{
	border-top:2px #FF0000 solid;
	padding:10px 0;
	margin-top:20px;
	
}

#website-links	{ 
margin-top:20px;	

}


/* Class Styles */

.homepage-image	{ 
margin:8px;
padding:9px;
border:1px #FF0000 solid;
}

.about-me-image	{ margin-top:20px; 
margin-bottom:20px;	

}






/* Mobile Layout: 480px and below. */

.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 87.36%;
	padding-left: 1.82%;
	padding-right: 1.82%;
}
#LayoutDiv1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#outer {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#wrapper {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#logo {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#nav {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#banner {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#content {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#footer {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#div1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#social-midia {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#navigation {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#social-media {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#LayoutDiv2 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#slideshow {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#contact-form {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#container {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#phone {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#parallax {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#catch-the-fire-plus {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#tony-hanson-creation {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#website-links {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#p-effects {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#Parallax {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#scroll {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}


/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 481px) {
.gridContainer {
	width: 90.675%;
	padding-left: 1.1625%;
	padding-right: 1.1625%;
}
#LayoutDiv1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#outer {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#wrapper {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#logo {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#nav {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#banner {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#content {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#footer {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#div1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#social-midia {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#navigation {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#social-media {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#LayoutDiv2 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#slideshow {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#contact-form {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#container {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#phone {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#parallax {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#catch-the-fire-plus {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#tony-hanson-creation {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#website-links {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#p-effects {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#Parallax {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#scroll {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
}

/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 769px) {
.gridContainer {
	width: 88.2%;
	max-width: 1232px;
	padding-left: 0.9%;
	padding-right: 0.9%;
	margin: auto;
}
#LayoutDiv1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#outer {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#wrapper {
	clear: both;
	float: left;
	margin-left: 0;
	width: 89.7959%;
	display: block;
}
#logo {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#nav {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#banner {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#content {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#footer {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#div1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#social-midia {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#navigation {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#social-media {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#LayoutDiv2 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#slideshow {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}

/* Class Styles */

.homepage-image	{
	margin:8px;
	padding:9px;
	border:1px #FF0000 solid;

}

#contact-form	{
	clear: both;

	float: left;

	margin-left: 0;

	width: 100%;

	display: block;

}

#container	{
	clear: both;

	float: left;

	margin-left: 0;

	width: 100%;

	display: block;

}

#phone	{
	clear: both;

	float: left;

	margin-left: 0;

	width: 100%;

	display: block;

}

#parallax	{
	clear: both;

	float: left;

	margin-left: 0;

	width: 100%;

	display: block;

}

#catch-the-fire-plus	{
	clear: both;

	float: left;

	margin-left: 0;

	width: 100%;

	display: block;

}

#tony-hanson-creation	{
	clear: both;

	float: left;

	margin-left: 0;

	width: 100%;

	display: block;

}

#website-links	{
	clear: both;

	float: left;

	margin-left: 0;

	width: 100%;

	display: block;

}

#p-effects	{
	clear: both;

	float: left;

	margin-left: 0;

	width: 100%;

	display: block;

}

#Parallax	{
	clear: both;

	float: left;

	margin-left: 0;

	width: 100%;

	display: block;

}

#scroll	{
	clear: both;

	float: left;

	margin-left: 0;

	width: 100%;

	display: block;

}
}