@import url("font-awesome.min.css");
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600|Lora:400,600");

/*
	Strongly Typed by Pixelarity
	pixelarity.com | hello@pixelarity.com
	License: pixelarity.com/license
*/

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, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
	letter-spacing: 0;
    word-spacing: 2px;
}

/*******************************************/
/* go-top-scroll Button */
/******************************************/
.go-top {
	position: fixed;
	z-index: 2;
	bottom: 0;
	right: 1em;
	text-decoration: none;
	color: white;
	background-color: rgba(165, 88, 100, 0.6);
	font-size: 14px;
	padding: 0.6em;
	display: none;
}
.go-top:hover {
	background-color: rgba(0, 0, 0, 0.6);
}
.go-top:visited {
	position: fixed;
	z-index: 2;
	bottom: 0;
	right: 1em;
	text-decoration: none;
	color: white;
	background-color: rgba(165, 88, 100, 0.6);
	font-size: 14px;
	padding: 0.6em;
	display: none;
}
	body, input, textarea, select {
		font-weight: 300;
		color: #333;
	}
	h1 {
		font-weight: 400;
		font-size: 2.25em;
		text-transform: none;
		color: #a55864;
		font-family: 'Lora' !important;
		margin: 0 0 1.25em 0
	}
	h2, h3, h4, h5, h6 {
		font-weight: 400;
		text-transform: none;
		color: #a55864;
		font-family: 'Lora' !important;
		text-align: center;
	}

	h2 {
		font-size: 2em;
		font-weight: 400;
		letter-spacing: 0;
		margin: 0 0 1.5em 0;
		line-height: 1.5em;
	}

	h3 {
		font-size: 1.6em;
		letter-spacing: 1px;
		margin: 0 0 1.5em 0;
	}
	a {
		color: darkred;
		border-bottom: solid 1px #9A9A9A;
	}
		a:hover {
			color: #a55864;
			border-bottom-color: rgba(255, 255, 255, 0);
		}

			a:hover strong {
				color: #a55864;
			}
		a:visited {
			color: #53374a;
			border-bottom: solid 1px #9A9A9A;
		}
	p {
		text-align: center;
		margin-bottom: 2em;
		font-size: 1.2em;
	}
ul li {
    text-align: left;
}
/* Sections/Article */

	section, article {
    margin-bottom: 0;
    text-align: center;
}
/* Image */
	.image.right {
		float: right;
		margin: 0 0 1.5em 1.5em;
		position: relative;
		top: 0.5em;
	}
/* Icons */
		ul.icons > li {
			padding: 1.5em 0 0 3em;
			text-align: left;
		}
			ul.icons > li:before {
				top: 2em;
			}
/* Button */

	input[type="button"],
	input[type="submit"],
	input[type="reset"],
	button,
	.button {
		background: #53374a;
	}
		input[type="button"]:hover,
		input[type="submit"]:hover,
		input[type="reset"]:hover,
		button:hover,
		.button:hover {
			background: #a55864;
		}
		input[type="button"]:active,
		input[type="submit"]:active,
		input[type="reset"]:active,
		button:active,
		.button:active {
			background: #53374a;
		}
			input[type="button"].alt:hover,
			input[type="submit"].alt:hover,
			input[type="reset"].alt:hover,
			button.alt:hover,
			.button.alt:hover {
				background: #a55864;
			}
			input[type="button"].alt:active,
			input[type="submit"].alt:active,
			input[type="reset"].alt:active,
			button.alt:active,
			.button.alt:active {
				background: #a55864;
			}
		ul.actions {
			text-align: center;
		}
/* Header */

/*	#header {
		position: relative;
		position: relative;
		background: #fff;
		text-align: center;
	}
*/		#header > .container {
			padding: 10em 0 10em 0;
			border-bottom: none;
			box-shadow: none;
		}

#header {
    background-image: url("../../images/jjj-header-bkgrd_1600x534.jpg");
    position: relative;
    width: 100%;
    height: 100%;
    top: 0;
    background-repeat: no-repeat;
    background-position: bottom;
    z-index: 2;
    -moz-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
	text-align: center;
}
		#header h1, #header h2 {
			font-family: 'Lora' !important;
			font-weight: 400;
			color: #a55864;
			text-shadow: 0.05em 0.075em 0 rgba(0, 0, 0, 0.1);
			font-size: 3em;
			letter-spacing: 13px;
		}
/* Nav */
				#nav > ul > li > a > span {
					color: #fff;
				}
			#nav > ul > li.active > a:before, #nav > ul > li:hover > a:before {
				background: #53374a;
			}
			#nav > ul > li.active > a > span, #nav > ul > li:hover > a > span {
				color: #53374a;
			}
/* Dropotron */
			.dropotron li:hover > span, .dropotron li:hover > a {
				color: #53374a;
			}
/* Features */

	#features {
		padding: 4em 0;
	}
	#features h1 {
			font-family: 'Lora' !important;
		}
	#features h2 {
			font-family: 'Lora' !important;
		}
	#features h3 {
			font-family: 'Lora' !important;
		}
/* Banner */

	#banner {
		background: #fff url("../../images/banner-workshops.jpg");
		background-size: cover;
		padding: 10em 0;
	}
			#banner > .container:before, #banner > .container:after {
				background: none;
			}


/* Footer */

	#footer {
		padding: 4em 0 1em 0;
	}
/* Copyright */

	#copyright {
		margin-top: 3em;
		padding-top: 3em;
	}
/* Large */

	@media screen and (max-width: 1280px) {
		/* Header */

			#header > .container {
				padding: 10em 0 10em 0;
			}
		/* Footer */

			#footer {
				padding: 4em 0 1em 0;
			}
}
/* Medium */
	@media screen and (max-width: 980px) {
			body, input, textarea, select {
				font-size: 11pt;
			}

			h1 {
				font-size: 1.8em;
				letter-spacing: 2px;
				line-height: 1.4em;
				text-align: center;
				margin: 0 0 1em 0;
				text-transform: none;
				font-family: 'Lora' !important;
			}
			h2 {
				font-size: 1.6em;
				letter-spacing: 2px;
				text-align: center;
				margin: 0 0 1em 0;
				font-family: 'Lora' !important;
			}
			h3, h4, h5, h6 {
				font-size: 1.2em;
				letter-spacing: 2px;
				text-align: center;
				margin: 0 0 1em 0;
				font-family: 'Lora' !important;
			}
			p {
				font-size: 100%;	
			}
		
		/* Header */
			#header > .container {
				padding: 10em 0 10em 0;
			}
			#header h1, #header h2 {
			font-family: 'Lora' !important;
			}
		
		/* Features */
			#features h1 {
				font-family: 'Lora' !important;
			}
			#features h2 {
				font-family: 'Lora' !important;
			}
			#features h3 {
			font-family: 'Lora' !important;
		}
		
		/* Nav */

			#page-wrapper {
				padding-bottom: 0;
			}
				#titleBar .toggle:before {
						width: 40px;
						height: 30px;
						border-radius: 2px;
						position: absolute;
						left: 8px;
						top: 12px;
						text-align: center;
						line-height: 30px;
						color: #a55864;
					}
		#navPanel {
				background: #53374a;
				border-right: solid 2px #a55864;
			}
		#navPanel .link {
				border-top: solid 1px #a55864;
			}
		ul.actions {
			text-align: center;
			}
		article {
			text-align: center;
			}
}
/* Small */

	@media screen and (max-width: 736px) {
		/* Basic */
		h1 {
				font-size: 1.8em;
				letter-spacing: 2px;
				line-height: 1.4em;
				text-align: center;
				margin: 0 0 1em 0;
			text-transform: none;
				font-family: 'Lora' !important;
			}
			h2, h3, h4, h5, h6 {
				/* font-size: 1.2em; */
				letter-spacing: 2px;
				text-align: center;
				margin: 0 0 1em 0;
				font-family: 'Lora' !important;
			}

			h2 br, h3 br, h4 br, h5 br, h6 br {
					display: none;
				}
			#header h1, #header h2 {
			font-family: 'Lora' !important;
			}
			p {
				font-size: 1.2em;	
			}
		/* Header */

#header {
    background-image: url("../../images/jjj_header_1600x534.jpg");
    position: relative;
    width: 100%;
    height: 100%;
    top: 0;
    background-repeat: no-repeat;
    background-position: bottom;
    z-index: 2;
	background-size: cover;
}
		#header > .container {
    		padding: 6em 0 4em 0;
		}
		/* Features */

			#features h1 {
				font-family: 'Lora' !important;
			}
			#features h2 {
				font-family: 'Lora' !important;
			}
			#features h3 {
				font-family: 'Lora' !important;
			}
		/* Footer */

			#footer {
				padding: 2em 0 1em 0;
			}
}