@charset "UTF-8";
@import url(font-awesome.min.css);
@import url("https://fonts.googleapis.com/css?family=Raleway:400,500,700");

/* 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, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
	}

	article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
		display: block;
	}

	body {
		line-height: 1;
	}

	ol, ul {
		list-style: none;
	}

	blockquote, q {
		quotes: none;
	}

	blockquote:before, blockquote:after, q:before, q:after {
		content: '';
		content: none;
	}

	table {
		border-collapse: collapse;
		border-spacing: 0;
	}

	body {
		-webkit-text-size-adjust: none;
	}

/* Box Model */

	*, *:before, *:after {
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-o-box-sizing: border-box;
		-ms-box-sizing: border-box;
		box-sizing: border-box;
	}

/* Sections */

.section {
	display: inline-block;
	margin: 0;
	background: rgba(255, 255, 255, 0.5);/*background: rgba(70, 127, 180, 0.5);*/
	padding: 2% 10% 2% 10%;
	min-width: 100%;
	opacity: 0;
}

	.section p {
		font-size: 1.75em;
		padding: 1% 0 3% 0;
		text-align: justify;
		/*text-align-last: center;
			-moz-text-align-last: center;
			-webkit-text-align-last: center;
			-ms-text-align-last: center;
			-o-text-align-last: center;*/
		margin-bottom: 0;
		color: black;
	}
	
	.section h1 {
		font-size: 2.5em;
		margin-top: 2%;
		text-transform: uppercase;
		color: black;
	}
	
	.section h2 {
		font-size: 1.75em;
		padding: 1% 0 3% 0;
		text-align: center;
		margin-bottom: 0;
		color: black;
	}
	
	.section.top {
		padding-top: 0;
		background: rgba(255, 255, 255, 0);
	}
	
		.section.top h1 {
			font-size: 2.5em;
			margin-top: 2%;
			text-transform: uppercase;
			color: black;
		}
	
	.section.nobg {
		background: rgba(255, 255, 255, 0);
	}
	
	.section.footer {
		background: rgba(0, 0, 0, 0.75);
	}
	
	.iconrow {
		display: inline-block;
		margin: 0;
		padding: 1% 10% 0 10%;
		min-width: 100%;
		opacity: 0;
		position: fixed;
		top: 0px;
		left: 0px;
		border-bottom-color: #00527f;
		border-bottom-style: solid;
		border-bottom-width: 1px;
		background: rgba(255, 255, 255, 0.975);
	}
	
	.buffer {
		height: 100%;
	}
	
	@media screen and (max-width: 1080px) {
        
        .section.nobg {
            margin-bottom: 64px;
        }
	
		.section p {
			font-size: 1em;
			line-height: 1.5;
		}
		
		.section h1 {
			font-size: 1.25em;
			margin-top: 5%;
		}
		
		.section h2 {
			font-size: 1em;
			line-height: 1.5;
		}
		
		.section.top h1 {
			font-size: 1.25em;
            margin-top: 15%;
		}
		
	}

/* Image */

	.image {
		border-radius: 1em;
		border: 0;
		margin: 0;
		background: none;
		display: inline-block;
		position: relative;
	}

		.image.title {
			max-width: 100%;
			transform: scale(0);
			margin-top: 5%;
		}
		
		.image.screenshot {
			max-width: 100%;
			float: left;
			margin-right: 5%;
		}
		
		.image.screenshot.right {
			float: right;
			margin-right: 0;
			margin-left: 5%;
		}
		
		.image.ejplogo {
			max-width: 10%;
		}
		
		.image.aspca {
			max-width: 10%;
		}
		
		.image.logo {
			max-width: 100%;
		}
	
	@media screen and (max-width: 1080px) {

		.image.title {
			margin-top: 12%;
		}
		
		.image.screenshot {
			max-width: 100%;
			margin-right: 0;
			margin-bottom: 5%;
		}
		
		.image.screenshot.right {
			margin-left: 0;
		}
		
		.image.ejplogo {
			max-width: 25%;
		}
		
		.image.aspca {
			max-width: 40%;
		}

	}

/* Image Grid */

	.image-grid {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		margin-bottom: 1em;
	}

		.image-grid .image-store {
			margin: auto;
			padding: 0.25em;
			width: 25%;
		}

			.image-grid .image-store img {
				width: 100%;
			}

		@media screen and (max-width: 1080px) {
		
				.image-grid .image-store {
					width: 75%;
				}
		
		}

/* Basic */

	@-ms-viewport {
		width: device-width;
	}

	body {
		-ms-overflow-style: scrollbar;
	}

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

		html, body {
			min-width: 320px;
		}

	}

	body {
		background: #fff;
	}

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

/* Type */

	body {
		background-color: black;
		color: #777;
	}

	body, input, select, textarea {
		font-family: "Raleway", Helvetica, sans-serif;
		font-size: 100%;
		font-weight: 1;
		line-height: 2em;
	}

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

			body, input, select, textarea {
				font-size: 11pt;
			}

		}

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

			body, input, select, textarea {
				font-size: 11pt;
			}

		}

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

			body, input, select, textarea {
				font-size: 12pt;
			}

		}

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

			body, input, select, textarea {
				font-size: 12pt;
			}

		}

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

			body, input, select, textarea {
				font-size: 12pt;
			}

		}

	a {
		text-decoration: none;
	}

		a:hover {
			text-decoration: none;
		}

	strong, b {
		font-weight: 1;
	}

	em, i {
		font-style: italic;
	}

	p {
		margin: 0 0 2em 0;
		font-size: 2em;
	}

	h1, h2, h3, h4, h5, h6 {
		font-weight: 1;
		line-height: 1em;
		margin: 0 0 0 0;
	}

		h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
			text-decoration: none;
		}

	h2 {
		font-size: 3em;
		line-height: 1.5em;
	}

	h3 {
		font-size: 3em;
		line-height: 1.5em;
		text-shadow: 0px 4px 8px black;	
	}

	h4 {
		font-size: 1.1em;
		line-height: 1.5em;
	}

	h5 {
		font-size: 0.9em;
		line-height: 1.5em;
	}

	h6 {
		font-size: 0.7em;
		line-height: 1.5em;
	}

	sub {
		font-size: 0.8em;
		position: relative;
		top: 0.5em;
	}

	sup {
		font-size: 0.8em;
		position: relative;
		top: -0.5em;
	}

	blockquote {
		border-left-style: solid;
		border-left-width: 4px;
		font-style: italic;
		margin: 0 0 2em 0;
		padding: 0.5em 0 0.5em 2em;
	}

	code {
		border-radius: 4px;
		border-style: solid;
		border-width: 1px;
		font-family: "Courier New", monospace;
		font-size: 0.9em;
		margin: 0 0.25em;
		padding: 0.25em 0.65em;
	}

	pre {
		-webkit-overflow-scrolling: touch;
		font-family: "Courier New", monospace;
		font-size: 0.9em;
		margin: 0 0 2em 0;
	}

		pre code {
			display: block;
			line-height: 1.75em;
			padding: 1em 1.5em;
			overflow-x: auto;
		}

	hr {
		border: 0;
		border-bottom-style: solid;
		border-bottom-width: 1px;
		margin: 1em 0;
	}

		hr.major {
			margin: 3em 0;
		}

	.align-left {
		text-align: left;
	}

	.align-center {
		text-align: center;
	}

	.align-right {
		text-align: right;
	}

	input, select, textarea {
		color: #25383B;
	}

	a {
		color: black;
	}

	strong, b {
		color: #25383B;
	}

	h1, h2, h3, h4, h5, h6 {
		color: #25383B;
	}

	blockquote {
		border-left-color: rgba(144, 144, 144, 0.25);
	}

	code {
		background: rgba(144, 144, 144, 0.075);
		border-color: rgba(144, 144, 144, 0.25);
	}

	hr {
		border-bottom-color: rgba(144, 144, 144, 0.25);
	}

/* Body */

	body {
		padding: 0 0 0 0;
		background-color: black;
    	background-attachment: fixed;
		background-image: url("../../graphics/overlayWhite.png"), url("../../graphics/lj-brand-logo_2639.jpg");
		background-position: center top, center top;
		background-size: cover, cover;
        background-repeat: no-repeat, no-repeat;
		text-align: center;
		max-width:100%;
		height: auto;
	}

/* Button */

	input[type="submit"],
	input[type="reset"],
	input[type="button"],
	button,
	.button {
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		-o-appearance: none;
		appearance: none;
		-moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		-webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		-ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		-o-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		border-radius: 8px;
		border: 1px solid white;
		cursor: pointer;
		display: inline-block;
		font-weight: 1;
		font-size: 1.5em;
		color: #ffffff;
		height: 2em;
		line-height: 2em;
		min-width: 12em;
		padding: 0 4% 0 4%;
		text-align: center;
		text-decoration: none;
		text-transform: uppercase;
		white-space: nowrap;
		background-color: #00527f;
		margin-bottom: 1%;
	}
		
		@media screen and (max-width: 1080px) {
			.button {
				min-width: 10em;
				margin-bottom: 3%;
			}
		}

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

		input[type="submit"]:active,
		input[type="reset"]:active,
		input[type="button"]:active,
		button:active,
		.button:active {
			background-color: #fac404;
		}

/* Link */

	a:link.navlink {
		color: #467fb4;
	}
	
	a:hover.navlink {
		color: #9ccbf0;
	}
	
	a:visited.navlink {
		color: #ffffff;
	}

/* Icon */

	.icon {
		-moz-osx-font-smoothing: grayscale;
		-webkit-font-smoothing: antialiased;
		-moz-transition: color 0.2s ease-in-out, color 0.2s ease-in-out;
		-webkit-transition: color 0.2s ease-in-out, color 0.2s ease-in-out;
		-ms-transition: color 0.2s ease-in-out, color 0.2s ease-in-out;
		-o-transition: color 0.2s ease-in-out, color 0.2s ease-in-out;
		transition: color 0.2s ease-in-out, color 0.2s ease-in-out;
        -webkit-text-stroke-width: 1px;
        -webkit-text-stroke-color: white;
        -moz-text-stroke-width: 1px;
        -moz-text-stroke-color: white;
        -ms-text-stroke-width: 1px;
        -ms-text-stroke-color: white;
        -o-text-stroke-width: 1px;
        -o-text-stroke-color: white;
		text-decoration: none;
		border-bottom: none;
		position: relative;
		color: #00527f;/*#467fb4;*/
		margin: 0 3% 0 3%;
		font-family: FontAwesome;
		font-style: normal;
		font-weight: normal;
		text-transform: none !important;
		font-size: 3em;
	}
		
		.icon:hover {
			color: #9ccbf0;
		}
	
	@media screen and (max-width: 1080px) {
	
		.icon {
			font-size: 2em;
		}
	
	}

/* Unordered List */

ul {
	font-size: 1.75em;
	padding: 0 5% 3% 5%;
	text-align: left;
	margin: 0;
	color: white;
	list-style-position: inside;
	list-style: square;
}

	@media screen and (max-width: 1080px) {
	
		ul {
			font-size: 1em;
			line-height: 1.5;
			padding: 0 10% 3% 10%;
		}
	}
	
	ul.icons {
		cursor: default;
		list-style: none;
		padding-left: 0;
	}

		ul.icons > li {
			display: inline-block;
			padding: 0 1em 0 0;
		}

			ul.icons > li:last-child {
				padding-right: 0;
			}

			ul.icons > li .icon:before {
				font-size: 2em;
			}

/* Table */

table {
	width: 100%;
	font-weight: 1;
	font-size: 1.25em;
	color: #fac404;
	margin-top: 2%;
}
	
	th, td {
		border-bottom: 1px solid #ffffff;
		padding: 1% 2% 1% 2%;
	}
	
	th {
		font-size: 1.5em;
		/*text-align: left;*/
		color: #000000;
		background-color: #ffffff;
	}
	
	tr {
		transition: background-color 0.5s ease,
							color 0s ease;
		background-color: rgba(0, 0, 0, 0);
		color: #fac404;
	}
	
		tr:hover {
			background-color: #fac404;
			color: #000000;
		}
	
	@media screen and (max-width: 1080px) {
		
		table {
			width: 100%;
			font-size: 0.75em;
			margin-top: 5%;
		}
	
			th, td {
				padding: 1% 2% 1% 2%;
			}
	
			th {
				font-size: 1.5em;
				text-align: left;
			}
			
			tr {
				line-height: 150%;
			}
		
	}

/* Video */

.video {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	margin: 0 0 5% 0;
}

	.video iframe,  
	.video object,  
	.video embed {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		/*padding: 0.75%;*/
		background-color: black;/*white;*/
	}
	
	.video.b {
		margin: 0 0 0 0;
	}

/* Carousel Animation */

.css-carousel {
	width: 400px;
	height: 400px; /* Height of images */
	position: relative;
	overflow: hidden;
	background: black;
	margin: 0 auto;
	border-style: solid;
	border-color: white;
	border-width: 0.5em;
}

@media screen and (max-width: 1080px) {
	.css-carousel {
		width: 300px;
		height: 300px; /* Height of images */
		border-width: 0.2em;
	}
}
	.css-carousel .css-img {
		width: 100%;
		height: auto;
		position: absolute;
		margin: auto;
		left: 0;
		right: 0;
		opacity: 0;
		animation: css-carousel-fade 30s linear infinite;
			-webkit-animation: css-carousel-fade 30s linear infinite;
			-moz-animation: css-carousel-fade 30s linear infinite;
			-ms-animation: css-carousel-fade 30s linear infinite;
			-o-animation: css-carousel-fade 30s linear infinite;
	}
	
	@media screen and (max-width: 1080px) {
		.css-carousel .css-img {
			
		}
	}
	
	.css-carousel .css-img:nth-child(2) {
		-webkit-animation-delay: 5s;
		-moz-animation-delay: 5s;
		-ms-animation-delay: 5s;
		animation-delay: 5s;
		-o-animation-delay: 5s;
	}
	.css-carousel .css-img:nth-child(3) {
		-webkit-animation-delay: 10s;
		-moz-animation-delay: 10s;
		-ms-animation-delay: 10s;
		animation-delay: 10s;
		-o-animation-delay: 10s;
	}
	.css-carousel .css-img:nth-child(4) {
		-webkit-animation-delay: 15s;
		-moz-animation-delay: 15s;
		-ms-animation-delay: 15s;
		animation-delay: 15s;
		-o-animation-delay: 15s;
	}
	.css-carousel .css-img:nth-child(5) {
		-webkit-animation-delay: 20s;
		-moz-animation-delay: 20s;
		-ms-animation-delay: 20s;
		animation-delay: 20s;
		-o-animation-delay: 20s;
	}
	.css-carousel .css-img:nth-child(6) {
		-webkit-animation-delay: 25s;
		-moz-animation-delay: 25s;
		-ms-animation-delay: 25s;
		animation-delay: 25s;
		-o-animation-delay: 25s;
	}
	@-webkit-keyframes css-carousel-fade {
		0%, 20%, 100% { opacity: 0; }
		5%, 15% { opacity: 1;}
	}
	@-moz-keyframes css-carousel-fade {
		0%, 20%, 100% { opacity: 0; }
		5%, 15% { opacity: 1;}
	}
	@-ms-keyframes css-carousel-fade {
		0%, 20%, 100% { opacity: 0; }
		5%, 15% { opacity: 1;}
	}
	@keyframes css-carousel-fade {
		0%, 20%, 100% { opacity: 0; }
		5%, 15% { opacity: 1;}
	}
	@-o-keyframes css-carousel-fade {
		0%, 20%, 100% { opacity: 0; }
		5%, 15% { opacity: 1;}
	}

/* Buffer Animation */

.animbuffer {
	animation: buffer 1s;
		-webkit-animation: buffer 1s;
		-moz-animation: buffer 1s;
		-ms-animation: buffer 1s;
		-o-animation: buffer 1s;
	animation-delay: 1s;
		-webkit-animation-delay: 1s;
		-moz-animation-delay: 1s;
		-ms-animation-delay: 1s;
		-o-animation-delay: 1s;
	animation-fill-mode: forwards;
		-webkit-animation-fill-mode: forwards;
		-moz-animation-fill-mode: forwards;
		-ms-animation-fill-mode: forwards;
		-o-animation-fill-mode: forwards;
}

@keyframes buffer {
	from { height: 0%; }
	to { height: 0%; }
}
	@-webkit-keyframes buffer {
		from { height: 0%; }
		to { height: 0%; }
	}
	@-moz-keyframes buffer {
		from { height: 0%; }
		to { height: 0%; }
	}
	@-ms-keyframes buffer {
		from { height: 0%; }
		to { height: 0%; }
	}
	@-o-keyframes buffer {
		from { height: 0%; }
		to { height: 0%; }
	}

/* Icon Row Animation */

.animiconrow {
	animation: iconrow 0.75s;
		-webkit-animation: iconrow 0.75s;
		-moz-animation: iconrow 0.75s;
		-ms-animation: iconrow 0.75s;
		-o-animation: iconrow 0.75s;
	animation-delay: 0.75s;
		-webkit-animation-delay: 0.75s;
		-moz-animation-delay: 0.75s;
		-ms-animation-delay: 0.75s;
		-o-animation-delay: 0.75s;
	animation-fill-mode: forwards;
		-webkit-animation-fill-mode: forwards;
		-moz-animation-fill-mode: forwards;
		-ms-animation-fill-mode: forwards;
		-o-animation-fill-mode: forwards;
}

@keyframes iconrow {
	from { opacity: 0; }
	to { opacity: 1; }
}
	@-webkit-keyframes iconrow {
		from { opacity: 0; }
		to { opacity: 1; }
	}
	@-moz-keyframes iconrow {
		from { opacity: 0; }
		to { opacity: 1; }
	}
	@-ms-keyframes iconrow {
		from { opacity: 0; }
		to { opacity: 1; }
	}
	@-o-keyframes iconrow {
		from { opacity: 0; }
		to { opacity: 1; }
	}

/* Global Animations */

.animfadein {
	animation: fadein 0.75s;
		-webkit-animation: fadein 0.75s;
		-moz-animation: fadein 0.75s;
		-ms-animation: fadein 0.75s;
		-o-animation: fadein 0.75s;
	animation-delay: 1.5s;
		-webkit-animation-delay: 1.5s;
		-moz-animation-delay: 1.5s;
		-ms-animation-delay: 1.5s;
		-o-animation-delay: 1.5s;
	animation-fill-mode: forwards;
		-webkit-animation-fill-mode: forwards;
		-moz-animation-fill-mode: forwards;
		-ms-animation-fill-mode: forwards;
		-o-animation-fill-mode: forwards;
}

@keyframes fadein {
	from { opacity: 1; }
	to { opacity: 1; }
}
	@-webkit-keyframes fadein {
		from { opacity: 1; }
		to { opacity: 1; }
	}
	@-moz-keyframes fadein {
		from { opacity: 1; }
		to { opacity: 1; }
	}
	@-ms-keyframes fadein {
		from { opacity: 1; }
		to { opacity: 1; }
	}
	@-o-keyframes fadein {
		from { opacity: 1; }
		to { opacity: 1; }
	}

.animscalein {
	animation: scalein 0.75s;
		-webkit-animation: scalein 0.75s;
		-moz-animation: scalein 0.75s;
		-ms-animation: scalein 0.75s;
		-o-animation: scalein 0.75s;
	animation-delay: 0s;
		-webkit-animation-delay: 0s;
		-moz-animation-delay: 0s;
		-ms-animation-delay: 0s;
		-o-animation-delay: 0s;
	animation-fill-mode: forwards;
		-webkit-animation-fill-mode: forwards;
		-moz-animation-fill-mode: forwards;
		-ms-animation-fill-mode: forwards;
		-o-animation-fill-mode: forwards;
}

@keyframes scalein {
	from { transform: scale(1); }
	75% { transform: scale(1); }
	to { transform: scale(1); }
}
	@-webkit-keyframes scalein {
		from { transform: scale(1,1); }
		75% { transform: scale(1); }
		to { transform: scale(1,1); }
	}
	@-moz-keyframes scalein {
		from { transform: scale(1,1); }
		75% { transform: scale(1); }
		to { transform: scale(1,1); }
	}
	@-ms-keyframes scalein {
		from { transform: scale(1,1); }
		75% { transform: scale(1); }
		to { transform: scale(1,1); }
	}
	@-o-keyframes scalein {
		from { transform: scale(1,1); }
		75% { transform: scale(1); }
		to { transform: scale(1,1); }
	}