@charset "utf-8";
/* CSS Document */
@import url(http://fonts.googleapis.com/css?family=Boogaloo);

@import url("//hello.myfonts.net/count/276f27");

@import url("//hello.myfonts.net/count/278d20");

@import url("//hello.myfonts.net/count/287554");

@font-face {font-family: 'AdLibBT-Regular';font-style: normal; font-weight: normal; src: url('webfonts/276F27_0_0.eot');src: url('webfonts/276F27_0_0.eot?#iefix') format('embedded-opentype'),url('webfonts/276F27_0_0.woff') format('woff'),url('webfonts/276F27_0_0.ttf') format('truetype');}

@font-face {font-family: 'Digital';src: url('webfonts2/278D20_0_0.eot');src: url('webfonts2/278D20_0_0.eot?#iefix') format('embedded-opentype'),url('webfonts2/278D20_0_0.woff') format('woff'),url('webfonts2/278D20_0_0.ttf') format('truetype');}

@font-face {font-family: 'Sabotage';src: url('Sabotage/287554_0_0.eot');src: url('Sabotage/287554_0_0.eot?#iefix') format('embedded-opentype'),url('Sabotage/287554_0_0.woff') format('woff'),url('Sabotage/287554_0_0.ttf') format('truetype');}

@import url(http://fonts.googleapis.com/css?family=Boogaloo);

/*CSS Reset
---------------------------------------------------------*/



html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
	margin: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	font-style: normal;
	font-weight: normal;
}

nav, header, footer, section, article, aside {
	display: block;
}
/*-----------------------------*/

/*--------General styles-----*/

body {
	background-image: url("../images/background.gif");
background-color: #a71e22;
background-repeat: no-repeat;
background-position: center 0;
background-attachment: fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover; 
background-size: cover; 
}

body#home a.home span,
body#about a.about span,
body#responsive a.responsive span,
body#portfolio a.portfolio span,
body#contact a.contact span,
body#home a.home,
body#about a.about,
body#responsive a.responsive,
body#portfolio a.portfolio,
body#contact a.contact {
	font-style: italic;
}

.italic {
	font-style: italic;
}

.bold {
	font-weight: bold;
}

.nonital {
	font-style: normal;
}

a:hover {
	text-decoration: none;
}

img {
		max-width: 100%;
}

p {
	font-family: 'Boogaloo', 'Century Gothic', Arial, Helvetica, sans-serif;
	font-size: 18px;
	text-shadow: 2px 2px 0px #000;
	margin-bottom: 10px;
	color: #fff;
	width: 95%;
	margin: 0 auto 25px auto;
	}

header {
	background-image: url('../images/headerback.gif');
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover; 
background-size: cover; 
	margin: 25px auto;
	border: 3px solid blue;
	border-radius: 15px;
	box-shadow: 10px 10px 5px #000;
	overflow: hidden;
	width: 98%;
}

#logoimage {
	width: 30%;
	float: left;
	display: block;
	margin-top: 30px;
	margin-left: 0px;
}

#noflash {
	width: 100%;
	float: left;
	display: block;
	margin-top: 27px;
	margin-left: 0px;
	margin-left: -3px;
}

#flashContent-container {
	overflow: hidden;
	display: none;
	float: left;
	width: 30%;
}

#flashContent {
	display: none;
	margin: 3px 0 0 3px;
	position: relative;
    width: 100%;
	height: 0px;
	padding-top: 0px;
	padding-bottom: 75%;
}

#flashContent object {
	position: absolute;
  	width: 100%;
 	height: 100%;
    top: 0;
}

body#home #flashContent,
body#home #flashContent-container {
	display: block;
}

body#home #logoimage {
	display: none;
	width: 30%;
}

#centerheader {
	width: 45%;
	float: left;
	position: relative;
	margin: 0 auto;
}

#rwd {
	position: relative;
	margin: 10px auto 0 auto;
	width: 75%;
}

#rwd img {
	left: 0;
	top: 0;
	display: block;
	position: relative;
	box-shadow: 2px 2px 5px black;
}

#rwd a {
	display: block;
	position: relative;
	color: #fff;
	text-shadow: 1px 1px 1px #000;
	font-family: AdLibBT-Regular;
	font-weight: normal;
	font-style: normal;
	bottom: 50px;
	text-align: center;
	font-size: 20px;
}

#rwd a:hover {
	text-decoration: none;
}

#rwd {
	transform:  scale(.75);
	-webkit-transform: scale(.75);
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
}

#rwd:hover {
	display: block;
	-ms-transform: scale(1) rotate(10deg) skew(10deg,10deg);	
	-webkit-transform: scale(1) rotate(10deg) skew(10deg,10deg);
	-moz-transform: scale(1) rotate(10deg) skew(10deg,10deg); 
	-o-transform:  scale(1)  rotate(10deg) skew(10deg,10deg);
}

#socialbar {
	float: right;
	width: 20%;
	display: block;
}

#socialbar img {
	border:0px; 
	opacity: 0.8;
	}
	
#socialbar li a img:hover {
	opacity: 1;
}
	
#socialbar{
		padding:0px;
		list-style: none outside none; 
		margin:0px; 
}
		
#socialbar li {
		display:block;
		padding-right:2px;
		float: left;
		clear: none;
		width: 30%;
		padding-top: 10%;
}

#socialbar{
	text-align:center;
	}

#socialbar a {
	display: block;
	width: 100%;
	}

#socialbar li ul.facebook {
	display: none;
	float: left;
	width: 100%;
}

#socialbar li:hover ul.facebook {
	display: block
}

#socialbar li ul.facebook li {
	float: left;
	clear: left;
	display: block;
	width: 100%;
	margin-left: 7px;
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	background-color: #385397;
	padding: 3px;
	border: 1px solid #000;
	border-radius: 3px;
}

#socialbar li ul.facebook li a {
	color: #fff;
}

#stage, #portfoliostage {
	width: 1000px;
	margin: 0 auto;
	overflow: hidden;
	background: none;
	position: relative;
}

#main {
 	background-color: #2F2727; 
   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2F2727), to(#1e5bb0));
   background-image: -webkit-linear-gradient(top, #2F2727, #1e5bb0); 
   background-image:    -moz-linear-gradient(top, #2F2727, #1e5bb0);
   background-image:     -ms-linear-gradient(top, #2F2727, #1e5bb0);
   background-image:      -o-linear-gradient(top, #2F2727, #1e5bb0);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2F2727', endColorstr='#1e5bb0');
  border: 3px solid blue;
	border-radius: 15px;
	box-shadow: 5px 5px 5px #000;
	overflow: hidden;
	margin-bottom: 15px;
	width: 98%;
	margin: 0 auto;
	padding-bottom: 35px;
	behavior: url(http://www.johnbarkerdesigns.com/PIE.htc);
}

#content, #portfoliocontent {
	width: 66.66%;
	float: left;
	position: relative;
	}

.introtext {
	overflow: hidden;
	 }

h1 {
	font-family: 'Century Gothic', sans-serif;
	color: #fff;
	font-size: 28px;
	text-shadow: 2px 2px 0 #000;
	text-decoration: underline;
	text-transform: uppercase;
	width: 95%;
	margin: 60px auto 25px auto;
	position: relative;
	z-index: 1000;
}

h1.header {
	left: 750px;
	font-family: Sabotage, 'Century Gothic', sans-serif;
	font-size: 45px;
	color: #000;
	text-shadow: 3px 3px 4px #000;
	text-decoration: none;
	background-image:url(../images/headerback.png);
	background-position: bottom;
	background-size: 100% 100%;
	width: auto;
	float: left;
	padding: 0 25px 15px 25px;
	}

#leftcolumn {
	clear: left;
}

.underlined {
	background-repeat:repeat-x;
    background-position: 0% 100%;
 }

#menu {
	display: none;
		}
		
footer {
	margin: 25px 0;
}

footer p {
	text-shadow: 0px 0px 0px;
	color: #fff;
	font-size: 10px;
	margin-bottom: 0px;
	font-family: Arial, Helvetica, sans-serif;
}

@media screen and (max-width: 980px) {
		p {
		width: 75%;
	}
	
		body {
		background-image: url('../images/purpledark.jpg');
		background-repeat: repeat;
background-position: left top;
background-attachment: scroll;
-webkit-background-size: auto;
-moz-background-size: auto;
-o-background-size: auto; 
background-size: auto; 
	}
	
	body#home #flashContent,
body#home #flashContent-container {
	display: none;
}

body#home #logoimage {
	display: block;

}

	#flashContent {
	width: 80%;
	margin: 5%;
	border: 1px solid black;
	border-radius: 10px;
	background: url(../images/transparency.png);
	}
	
	#logoimage {
	border: 1px solid black;
	border-radius: 10px;
	background: url(../images/transparency.png);
	margin: 3% 0 0 3%;
	}
	
	h1 {
		margin-top: 50px;
	}
	
		#spacer {
		display: block;
		height: 400px;
		}
	
	#main {
		padding-bottom: 100px;
		}
	
		#stage {
		width: 100%;
		border: 0px; 
	overflow: hidden;
	}
	
	header {
		width: 100%;
		margin: 0 auto;
		background: url("../images/tornback.jpg");
		border: 0px;
		box-shadow: 0px 0px 0px;
		border-radius: 0;
		}
	
	footer p {
		width: 100%;
		margin-left: 5%;
	}
	
	#main {
	overflow: hidden;
	width: 100%;
	margin: -45px auto 0 auto;
	background: transparent;
	background-image: none;
	filter: none;
	border: 0px;
	box-shadow: 0px 0px 0px;
	border-radius: 0px;
	}

#socialbar li ul.facebook li a {
	font-size: 12px;
	text-align: left;
	}
	
	#content {
	width: 100%;
}

#leftcolumn, #rightcolumn{
	
	float: left;
	width: 50%;
	}

#rightcolumn {
	padding-bottom: 450px;
}

.introtext {
	margin-top: 0;
	}
}

@media screen and (max-width: 600px) {
	header {
	margin-bottom: -25px;
	}

#flashContent-container {
	width: 66.6%;
}

body#home #logoimage {
	width: 50%;
}

#logoimage {
	width: 50%;
	margin-right: 5%;
	margin-bottom: 10px;
}

#centerheader {
	display: none;
}

#socialbar {
		float: left;
		width: 33%;
	}
}

@media screen and (max-width: 480px) {
	#socialbar li:hover ul.facebook {
	display: none;
}
	
	#menu {
		font-family: 'Arial Unicode MS', Arial, Helvetica, sans-serif;
		font-weight: 100;
		font-size: 8px;
		}
		
	body {
		min-width: 320px;
	}
	
	header{
		background: transparent;
	}
	
	body#home #logoimage {
		width: 50%;
	}
	
		#flashContent, #logoimage {
		background: #fff;
	}
	
}

/*----------Navigation--------*/

nav {
	width: 33%;
	margin-top: 50px;
	float: left;
	clear: none;
}

ul {
	padding: 0;
}

#nav ul li a {
	text-decoration: none;
	color: #fcfcfc;
	text-shadow: 3px 3px 5px #000;
	display: block;
	text-align: center;
	padding-top: 20px;
	padding-bottom: 30px;
	}
	
#nav ul li a span {
	display: block;
	padding-right: 5px;
}
	
nav li {
	font-family: AdLibBT-Regular;
	font-weight: normal;
	font-style: normal;
	font-size: 36px;
	list-style: none;
}

.f1_container {
  position: relative;
  margin: 10px auto;
  width: 300px;
  height: 135px;
  z-index: 1;
  padding-bottom: 25px;
}

.f1_card {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
   -webkit-transform-style: preserve-3d;
  transition: all 1s linear;
  -moz-transition: all 1s linear;
   -webkit-transition: all 1s linear;
  perspective: 1000;
	 -webkit-perspective: 1000;
  -moz-perspective: 1000;
    o-backface-visibility:hidden;
-webkit-backface-visibility:hidden; /* Chrome and Safari */
-moz-backface-visibility:hidden; /* Firefox */
backface-visibility:hidden; /* Internet Explorer */
}

.f1_container:hover .f1_card {
	transform:rotateX(360deg);
  -webkit-transform:rotateX(360deg);
   -moz-transform:rotateX(360deg);   
 }

.face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility:hidden;
  o-backface-visibility:hidden;
-webkit-backface-visibility:hidden; /* Chrome and Safari */
-moz-backface-visibility:hidden; /* Firefox */
backface-visibility:hidden; /* Internet Explorer */
}

.face.back {
  display: block;
 transform:rotateX(180deg);
  -webkit-transform:rotateX(180deg);   
  -moz-transform:rotateX(180deg);
   box-sizing: border-box;
	color: white;
  text-align: center;
}

.face.back a {
	color: #fff;
	display:block; 
    -moz-transform: matrix(-1, 0, 0, -1, 0, 0);
    -webkit-transform: matrix(-1, 0, 0, -1, 0, 0);
    -o-transform:matrix(1, 0, 0, 1, 0, 0);
	padding-bottom: 30px;
}

.blue {background: url("../images/paperblue2.png") no-repeat center center;
}

.blueup {background: url("../images/paperblueup2.png") no-repeat center center;
}

.green {background: url("../images/papergreen2.png") no-repeat center center;
}

.greenup {background: url("../images/papergreenup2.png") no-repeat center center;
}

.red {background: url("../images/paperred2.png") no-repeat center center;
}

.redup {background: url("../images/paperredup2.png") no-repeat center center;
}

.pink {background: url("../images/paperpink2.png") no-repeat center center;
}

.pinkup {background: url("../images/paperpinkup2.png") no-repeat center center;
}

.purple {background: url("../images/paperpurple2.png") no-repeat center center;
}

.purpleup {background: url("../images/paperpurpleup2.png") no-repeat center center;
}

@media screen and (max-width: 980px) {
		.front.face, .f1_card, #nav .f1_container {
		height: 50px;
		}
	
	nav{
		width: 100%;
		margin-top: 25px;
		background: url('../images/menuback.png') no-repeat 0 20px;
	}

.f1_container{
		float: left;
	}
	
.f1_container:hover .f1_card {
	transform:rotateX(0deg);
  -webkit-transform:rotateX(0deg);  
}

nav ul li {
	display: inline;
	}

ul li a {
	font-size: 18px;
	display: inline-block;
	text-align: center;
	color: #fff;
	text-shadow: 1px 1px #000 ;
}

#nav ul li a:hover {
	color: red;
}

.face {
  
  background:transparent;
  text-align: center;
}

.f1_container {
	display: block;
  position: relative;
  margin: 10px auto;
  width: 20%;
  height: 135px;
  z-index: 1;
  padding-bottom: 25px;
}

}

@media screen and (max-width: 600px) {


	
	#nav {
		background: transparent;
		}
	
	#nav-first-row {
		width: 100%;
		float: left;
		background: url("../images/menuback.png") no-repeat 0 20px;
}
		
	#nav-first-row li a {
			vertical-align: text-top;
		}
		
	#nav-first-row .f1_container {
		width: 33%;
		height: 35px;
		text-align: center;
		}
	
	#nav-second-row {
		width: 100%;
		float: left;
		background: url("../images/menuback.png") no-repeat 0 20px;
		padding-top: 15px;
		}
		
	#nav-second-row .f1_container {
		width: 50%;
		text-align: center;
		}
		
nav li a {
	padding-top: 0;
	
}

}

@media screen and (max-width: 480px) {
	.face.back {
		display: none;
	}
	

	
	#nav-first-row {
		float: none;
		}
		
	#nav-first-row ul li a {
		padding-top: 0;
	}
		
	#nav-first-row .f1_container {
		padding: 25px 0 0px 0;
		}
		
		#nav-first-row li a {
			vertical-align: text-top;
		}
		
		#nav-second-row li a {
			vertical-align: text-bottom;
		}
		
		#nav-second-row {
			float: none;
			padding-top: 0px;
	}
	
		nav ul li a {
			padding-bottom: 0;
		}
		
.f1_container {
	background: url(../images/buttonback.jpg) no-repeat center center;
	-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain; 
background-size: contain; 
border: 0px;
}

	#menu {
			width:28px;
			display: block;
			background:#000;
			font-size:1.35em;
			text-align: center;
			cursor: pointer;
			color: #fff;
			float: right;
			margin: 5px 25px 5px 0;
			border: 1px solid #fff;
			border-radius:5px;
			}
			
		#nav {
			display: none;
		}
		
		.js {
			display: none;
		}
	
	.f1_container {
		float: none;
		height: 30px;
		text-align: center;
		border: 0px solid #fff;
		border-radius: 15px;
		}
	
		#nav-first-row .f1_container {
		height: 40px;
		padding-bottom: 10px;
		}
	
	#nav-first-row, #nav-second-row {
		background: none;
	}
	
	#nav-first-row .f1_container,
	#nav-second-row .f1_container {
		width: 90%;
		}
	
	ul li a {
		font-size: 20px;
	}
	
	ul li a br {
		display: none;
	}

}

/*-----------Home page----------*/

#demo {
	font-family: default;
	float: left;
}

.redtext {
	color: yellow;
}

.whitetext, .whitelink {
	color: white;
}
	
.onecolumn {
	float: none;
	width: 95%;
}

.twocolumn {
	float: left;
	width: 40%;
	margin-left: 5%;
}

.gothic {
	font-family: 'Boogaloo', 'Century Gothic', Arial, Helvetica, sans-serif;
	font-style: normal;
	font-weight: normal;
}

.times {
	font-family: 'Times New Roman', serif;
	font-style: normal;
	font-weight: normal;
}

.demoback {
	
	border: 1px solid black;
	border-radius: 15px;
	box-shadow: 2px 2px 2px #000;
	background: url(../images/orange.jpg);
	behavior: url(http://www.johnbarkerdesigns.com/PIE.htc);
	margin: 0 auto 25px auto;
	overflow: hidden;
}

.demoback p {
	padding: 5px;
	}

.demonoback {
	border: 0px;
	background: transparent;
}

.bigtext {
	font-size: 22px;
}

.littletext {
	font-size: 18px;
}

img[src="images/arrow.png"] {
	display: none;
}

#elementor {
	position: relative;
	z-index: 10;
	width: 95%;
	margin: 0 auto;
	overflow: hidden;
	background:url('../images/metal.jpg');
	line-height: 38px;
	padding-top: 60px;
	border-radius: 15px;
	border: 3px solid #535c5f;
	box-shadow: 3px 3px 5px #000;
	padding-bottom: 40px;
	margin-bottom: 25px;
	}

#elementor img {
	position: absolute;
	z-index: 20;
}

#elementor img.a {
	top: 5px;
	left: 5px;
}

#elementor img.b {
	top: 5px;
	right: 5px;
}

#elementor img.c {
	bottom: 5px;
	left: 5px;
}

#elementor img.d {
	bottom: 5px;
	right: 5px;
}

#elementor div {
	float: left;
}

#color, #columns, #font, #demoback, #size {
	background: url(../images/button.png) no-repeat;
	width: 50px;
	height: 50px;
	display: block;
	float: left;
	clear: left;
	cursor: pointer;
	margin: 0 8px;
}

#color:active, #columns:active, #font:active, #demoback:active, #size:active {
	background: url(../images/greenbutton.png) no-repeat;
}

#colorbutton, #columnbutton, #fontbutton, #demobackbutton, #sizebutton {
	color: red;
	background: #000;
	width: 80%;
	float: left;
	height: 40px;
	margin-top: 0px;
	padding-left: 5px;
	border: 3px solid grey;
	border-style: inset;
	font-family: Digital;
	letter-spacing: 2px;
	font-size: 21px;
	}
	
.below {
	display: inline;
}
.toyourright {
	display: none;
}

#bottomborder {
	display: block;
	height: 25px;
	background: url(../images/indentborder.png) repeat-x ;
	width: 80%;
	margin: 25px auto;
	}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; 
	/*height: 0; */
	overflow: hidden;
	width: 95%;
	margin: 0 auto;
	display: block;
}

.videoback {
	background: url('../images/videoback.gif') no-repeat center center;
	-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover; 
background-size: cover; 
box-shadow: 2px 2px 5px #000;
padding-top: 90px;
display: block;
width: 90%;
margin: 0 auto;
padding-bottom: 25px;
border-radius: 15px;
border: 2px solid #fff;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
	} 
	
	@media screen and (max-width: 980px){
		body#home #bottomborder {
		display: none;
	}
	
	.videoback {
		margin-top: -800px;
	}
	
	#elementor, #rightcolumn p {
		top: 425px;
		position: relative;
		}

#color, #columns, #font, #demoback, #size {
	background: url(../images/littlebutton.png) no-repeat;
	height: 25px;
	width: 25px;
	margin: 0 4px;
}

#color:active, #columns:active, #font:active, #demoback:active, #size:active {
	background: url(../images/littlegreenbutton.png) no-repeat;
}

img[src="images/arrow.png"] {
	display: block;
	width: 25%;
	margin: 5px auto;
	float: right;
	position: relative;
	top: -50px;
	}

#elementor {
	background-image:url('../images/metalsmall.jpg');
	line-height: 20px;
	padding-top: 60px;
	border-radius: 15px;
	border: 3px solid #535c5f;
	box-shadow: 3px 3px 5px #000;
	padding-bottom: 40px;
	position: relative;
	z-index: 1;
	margin-bottom: 25px;
	}

#elementor img {
	display: none;
	}

#colorbutton, #columnbutton, #fontbutton, #demobackbutton, #sizebutton {
	height: 22px;
	margin-top: 0px;
	padding-left: 5px;
	border: 3px solid grey;
	border-style: inset;
	font-family: Digital;
	letter-spacing: 2px;
	font-size: 14px;
}

.below {
	display: none;
}

.toyourright {
	display: inline;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
	} 
		
	}
	
	@media screen and (max-width: 700px) {
img[src="images/arrow.png"] {
	display: none;
}

img[src="images/star.png"] {
	display: none;
}

.toyourright {
	display: none;
}

.below {
	display: inline;
}

#introtext {
	width: 100%;
}

#leftcolumn, #rightcolumn {
	width: 100%;
	float: none;
}

#rightcolumn {
	padding-bottom: 0;
}

#demo {
	width: 90%;
}

.videoback {
	margin-top: 0px;
	width: 90%;
}
	
#elementor {
	width: 80%;
}

#elementor, #rightcolumn p {
	top: 0px;
	position: relative;
		}

#rightcolumn p {
	width: 90%;
	}

body#home #bottomborder {
	display: block;
}

#spacer {
	display: none;
}
}

@media screen and (max-width: 480px) {

#elementor {
	width: 95%;
}

#color, #columns, #font, #demoback, #size {
	margin-bottom: 10px;
}

#demo p {
	margin-left: 3%;
	
}
}
	
/*--------------About page----*/

#about #jqueryfade #glassespix {
	float: left;
	width: 30%;
	margin: 5px 0;
	position: relative;
	margin-right: 2%;
	}

#about #jqueryfade #glassespix img.glasseshole {
	position: relative;
	z-index: 100;
	top: 0;
	left: 0;
	width: 100%;
}

#about #jqueryfade #glassespix img.glassesnohole {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	}

#about #jqueryfade #glassespix #galleria {
	position: absolute;
	width: 100%;
	z-index: 10;
	top: 0;
	left: 0;
}

#about #jqueryfade #glassespix #galleria img{
	width: 100%;
}

#about #jqueryfade p {
	float: left;
	width: 60%;
	margin-bottom: 25px;
}

#about #jqueryfade p:first-of-type {
	margin-top: 45px;
}

@media screen and (max-width: 600px) {
	#about #jqueryfade p {
		float: none;
		width: 85%;
	}
}

@media screen and (max-width: 480px) {
	#about #jqueryfade p:first-of-type {
		margin-top: 25px;
	}
}

/*Responsive page--------------*/


.question {
	color: #fff;
	width: 90%;
	margin-top: 50px;
}

.yellowtext {
	color: #fff;
	}

.bubble {
    background-color: #4ea000; 
   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4ea000), to(#6cc800));
   background-image: -webkit-linear-gradient(top, #4ea000, #6cc800); 
   background-image:    -moz-linear-gradient(top, #4ea000, #6cc800);
   background-image:     -ms-linear-gradient(top, #4ea000, #6cc800);
   background-image:      -o-linear-gradient(top, #4ea000, #6cc800);
  border-radius: 5px;
	behavior: url(http://www.johnbarkerdesigns.com/PIE.htc);
    box-shadow: inset 0 1px 1px hsla(0,0%,100%,.5),
                3px 3px 0 hsla(0,0%,0%,.1);
	display: inline-block;
    padding: 15px 1% 0px 15px;
    position: relative;
    text-shadow: 0 1px 1px hsla(0,0%,100%,.5);
	margin: 5px 1% 5px 5px;
	width: 95%;
}

.bubble p {
	margin-bottom: 10px;
	margin-left: 5px;
	font-family: 'Boogaloo', sans-serif;
	text-shadow: 1px 1px 5px #000;
	color: #fff;
	width: 95%;
	}

.bubble a {
	#fff;
}

.bubble:after,
.bubble:before {
    border-bottom: 15px solid transparent;
    border-right: 15px solid #6cc800;
    bottom: -15px;
    content: '';
    position: absolute;
    right: 30px;
}

.bubble:before {
    border-right: 15px solid hsla(0,0%,0%,.1);
    bottom: -18px;
    right: 27px;
}

#responsive .introtext img {
	margin: 10px 15px 15px 0;
	float: right;
	margin-right: 20px;
}

#responsive #bottomborder{
	margin-top: 50px;
}

@media screen and (max-width:980px){
	#responsive  p.question {
		width: 75%;
	}
	
	.bubblecontainer {
		width: 75%;
		margin: 0 auto;
	}
	
	.bubblecontainer p {
		width: 90%;
		margin: 0 auto 10px auto;
	}
	
	#responsive .video-container {
		max-width: 640px;
	}
}

@media screen and (max-width:480px){

#responsive h1.header {
	width: 80%;
	text-align: center;
}

	.bubble {
		width: 90%;
	}
}


/*----------Portfolio page---------*/

#jqueryfade {
	opacity: 0;
	float: left;
	width: 100%;
	}

#portfolio #jqueryfade {
	float: none;
}

body#strattech {
	background: transparent;
	}

#portcontent img {
	float: left;
}

#portcontent #importcontent {
	opacity: 0; /* standard: ff gt 1.5, opera, safari */
-ms-filter: “alpha(opacity=0)”; /* ie 8 */
filter: alpha(opacity=0); /* ie lt 7 */
-khtml-opacity: 0; /* safari 1.x */
-moz-opacity: 0; /* ff lt 1.5, netscape */
}

#portlinks li {
	list-style-type: none;
}

#portlinks li a {
	display: block;
	font-family: 'Century Gothic', sans-serif;
	color: #fff;
	margin: 0 0 20px 50px;
	background: url("../images/glasses.png") no-repeat 0 0;
	padding-left: 70px;
	text-transform: uppercase;
	float: left;
	clear: left;
}

#importcontent {
	float: left;
	width: 100%;
}

a.toolong br {
	display:none;
}

#portcontenttext {
	font-family: 'Century Gothic', sans-serif;
	color: #fff;
	text-shadow: 1px 1px 1px #000;
	margin: 0px 0px 10px 0;
	width: 100%;
	float: left;
	}

#portcontenttext h1{
	margin: 10px 0 0 10%;
	text-decoration: none;
}

#portcontenttext h1 a {
	color: #fff;
}

#portcontenttext a.url {
	display: block;
	color: #fff;
	font-size: 20px;
	margin-left: 10%;
	margin-bottom: 10px;
}

#portcontenttext p {
	font-family: 'Boogaloo', Arial, Helvetica, sans-serif;
	font-size: 18px;
	margin-left: 15%;
	width: 80%;
	margin-bottom: 0;
}

#portcontent p a {
	color: #fff;
}

#portfolio aside p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
}

aside {
	border: 2px solid #fff;
	box-shadow: 2px 2px 2px #000;
	border-radius: 10px;
	padding: 5px;
	width: 75%;
	 background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#590007), to(#ba0000));
   background-image: -webkit-linear-gradient(top, #590007, #ba0000); 
   background-image:    -moz-linear-gradient(top, #590007, #ba0000);
   background-image:     -ms-linear-gradient(top, #590007, #ba0000);
   background-image:      -o-linear-gradient(top, #590007, #ba0000);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#590007', endColorstr='#ba0000');
	margin: 0 auto 10px auto;
	}
	
#portfolio p.secondpar {
	margin-top: 15px;
}
	
#portfolio .youtubeconstraint {
	width: 80%;
	margin-left: 15%;
	margin-top: 15px;
}

#portfolio .video-container {
	 position: relative;
    padding-bottom: 56.25%;
    padding-top: 0px; 
	height: 0; 
	overflow: hidden;
	width: 100%;
	display: block;
}

@media screen and (max-width: 600px) {
	 a.toolong br {
		display: block;
	}
}

@media screen and (max-width: 480px) {
	#portlinks li a {
		margin-left: 20px;
	}

#portcontent h1 {
	margin-left: 5%;
}
}

@media screen and (max-height: 768px) and (min-width: 981px) {
	#portfolio h1.header {
		margin-right: 40px;
		
	}
	
	#portlinks li {
		float: none;
		clear: none;
		margin-top: 20px;
	padding-left: 200px;
			}
	
	#portlinks li a {
	display: block;
	font-family: 'Century Gothic', sans-serif;
	color: #fff;
	margin: 0 0 20px 50px;
	background: none;
	padding-left: 10px;
	text-transform: uppercase;
	float: none;
	clear: none;
}
	
}
/*-----Contact page-----*/

fieldset, #contact .introtext ul li, #contact .introtext ul li a {
	padding: 0;
	border: 0px;
	color: #fff;
	font-family: Boogaloo, Arial, Helvetica, sans-serif;
	text-shadow: 2px 2px 0px #000;
	font-size: 18px;
	}

#contact #contactform {
	min-height: 500px;
}

fieldset {
	width: 90%;
	margin: 10px auto;
}

textarea{
	display: inline-block;
	vertical-align: top;
	margin: 0;
	height: 100px;
	width: 300px;
	padding-right: 40px;
	margin-bottom: 20px;
	overflow: auto;
	}

button {
	float: left;
	clear: both;
	margin-left: 22%;
	font-family: AdLibBT-Regular;
	font-size: 16px;
	color: #fff;
	background: #000;
	padding: 5px;
	cursor: pointer;
	}

button:hover {
	color: #000;
	background: #fff;
	}

label {
	display: inline-block;
	vertical-align: top;
	width: 20%;
	float: left;
	text-align: right;
	margin-right: 5px;
	}

label.error {
	width: auto;
	float: none;
	margin-left: 22%;
	margin-top: -10px;
	color: red;
	}

input	{
	display: inline-block;
	vertical-align: central;
	background: #fff;
	height: 23px;
	width: 335px;
	margin-bottom: 20px;
	border: 1px solid #000;
	}
	
input:focus {
	background: #ffffc2 url('../images/glasses.png') no-repeat right center;
	}

textarea:focus {
	background: #ffffc2 url('../images/glasses.png') no-repeat right top;
	}

#card {
	background: url(../images/card.png) no-repeat center center;
	height: 164px;
	padding-top: 100px;
	text-align: center;
	}

#card ul li {
	list-style: none;
}

#message {
	width: 40%;
	margin: 0 auto;
	min-height: 150px;
}

#message p {
	margin-left: 10%;
}

#message p:nth-of-type(2) {
	margin-left: 15%;
}

@media screen and (max-width: 980px) {
	fieldset {
		width: 550px;
	}
}

@media screen and (max-width: 600px) {
	#message {
		width: auto;
	}
}

@media screen and (max-width: 480px) {
	label, input, textarea {
		float: left;
		clear:both;
		width: 90%;
	}
	
	label {
		width: auto;
	}
	
	button, label, input, textarea {
		margin-left: 5px;
	}
	
	fieldset {
		width: 90%;
	}
	
	label.error {
		margin-left: 0px;
		margin-bottom: 2px;
		float: left;
	}
}


	/* Galleria Classic Theme 2012-08-07 | https://raw.github.com/aino/galleria/master/LICENSE | (c) Aino */

#galleria-loader{height:1px!important}

.galleria-container {
    position: relative;
    overflow: hidden;
    background: none;
}
.galleria-container img {
    -moz-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
}
.galleria-stage {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    overflow:hidden;
	
}
.galleria-thumbnails-container {
    height: 50px;
    bottom: 0;
    position: absolute;
    left: 10px;
    right: 10px;
    z-index: 2;
	display: none;
}
.galleria-carousel .galleria-thumbnails-list {
    margin-left: 30px;
    margin-right: 30px;
	display: none;
}
.galleria-thumbnails .galleria-image {
    height: 40px;
    width: 60px;
    background: none;
    margin: 0 5px 0 0;
    border: 0px solid #000;
    float: left;
    cursor: pointer;
	display: none;
}
.galleria-counter {
	
    position: absolute;
    bottom: 10px;
    left: 10px;
    text-align: right;
    color: #fff;
    font: normal 11px/1 arial,sans-serif;
    z-index: -1;
	visibility: hidden;
	
}
.galleria-loader {
    background: #000;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: none;
    background: url(../images/classic-loader.gif) no-repeat 2px 2px;
	display: none;
}
.galleria-info {
    width: 50%;
    top: 15px;
    left: 15px;
    z-index: 2;
    position: absolute;
	display: none;
}
.galleria-info-text {
    background-color: #000;
    padding: 12px;
    display: none;
    /* IE7 */ zoom:1;
}
.galleria-info-title {
    font: bold 12px/1.1 arial,sans-serif;
    margin: 0;
    color: #fff;
    margin-bottom: 7px;
	display: none;
}
.galleria-info-description {
    font: italic 12px/1.4 georgia,serif;
    margin: 0;
    color: #bbb;
	display: none;
}
.galleria-info-close {
    width: 9px;
    height: 9px;
    position: absolute;
    top: 5px;
    right: 5px;
    background-position: -753px -11px;
    opacity: .5;
    filter: alpha(opacity=50);
    cursor: pointer;
    display: none;
}
.notouch .galleria-info-close:hover{
    opacity:1;
    filter: alpha(opacity=100);
	display: none;
}
.touch .galleria-info-close:active{
    opacity:1;
    filter: alpha(opacity=100);
	display: none;
}
.galleria-info-link {
    background-position: -669px -5px;
    opacity: .7;
    filter: alpha(opacity=70);
    position: absolute;
    width: 20px;
    height: 20px;
    cursor: pointer;
    background-color: #000;
	display: none;
}
.notouch .galleria-info-link:hover {
    opacity: 1;
    filter: alpha(opacity=100);
	display: none;
}
.touch .galleria-info-link:active {
    opacity: 1;
    filter: alpha(opacity=100);
	display: none;
}
.galleria-image-nav {
    position: absolute;
    top: 50%;
    margin-top: -62px;
    width: 100%;
    height: 62px;
    left: 0;
	display: none;
}
.galleria-image-nav-left,
.galleria-image-nav-right {
    opacity: .3;
    filter: alpha(opacity=30);
    cursor: pointer;
    width: 62px;
    height: 124px;
    position: absolute;
    left: 10px;
    z-index: 2;
    background-position: -4px 46px;
	display: none;
}
.galleria-image-nav-right {
    left: auto;
    right: 20px;
    background-position: -254px 46px;
    z-index: 2;
	display: none;
}
.notouch .galleria-image-nav-left:hover,
.notouch .galleria-image-nav-right:hover {
    opacity: 1;
    filter: alpha(opacity=100);
	display: none;
}
.touch .galleria-image-nav-left:active,
.touch .galleria-image-nav-right:active {
    opacity: 1;
    filter: alpha(opacity=100);
	display: none;
}
.galleria-thumb-nav-left,
.galleria-thumb-nav-right {
    cursor: pointer;
    display: none;
    background-position: -495px 5px;
    position: absolute;
    left: 0;
    top: 0;
    height: 40px;
    width: 23px;
    z-index: 3;
    opacity: .8;
    filter: alpha(opacity=80);
	display: none;
}
.galleria-thumb-nav-right {
    background-position: -578px 5px;
    border-right: none;
    right: 0;
    left: auto;
	display:none;
}
.galleria-thumbnails-container .disabled {
    opacity: .2;
    filter: alpha(opacity=20);
    cursor: default;
	display: none;
}
.notouch .galleria-thumb-nav-left:hover,
.notouch .galleria-thumb-nav-right:hover {
    opacity: 1;
    filter: alpha(opacity=100);
    background-color: #111;
	display: none;
}
.touch .galleria-thumb-nav-left:active,
.touch .galleria-thumb-nav-right:active {
    opacity: 1;
    filter: alpha(opacity=100);
    background-color: #111;
	display: none;
}
.notouch .galleria-thumbnails-container .disabled:hover {
    opacity: .2;
    filter: alpha(opacity=20);
    background-color: transparent;
	display: none;
}

.galleria-carousel .galleria-thumb-nav-left,
.galleria-carousel .galleria-thumb-nav-right {
    display: block;
	display: none;
}
.galleria-thumb-nav-left,
.galleria-thumb-nav-right,
.galleria-info-link,
.galleria-info-close,
.galleria-image-nav-left,
.galleria-image-nav-right {
    background-image: url(../images/classic-map.png);
    background-repeat: no-repeat;
	display: none;
}


/*--Opera-specific styles--*/

doesnotexist:-o-prefocus, #nav ul li a:hover {
  color: red;
}	

doesnotexist:-o-prefocus, .blue {background: transparent;
}

doesnotexist:-o-prefocus, .green {background: transparent;
}

doesnotexist:-o-prefocus, .red {background: transparent;
}

doesnotexist:-o-prefocus, .purple {background: transparent;
}

doesnotexist:-o-prefocus, .pink {background: transparent;
}