@charset "utf-8";
/* CSS Document */

@font-face {
    font-family: "Lithos Pro Regular";
    src: url("../fonts/lithos-pro-regular.woff");
    font-style: normal;
	font-weight: normal;
}

@font-face {
    font-family: "Segoe Print Regular";
    src: url("../fonts/segoe-print-regular.woff");
    font-style: normal;
	font-weight: normal;
}

@font-face {
    font-family: "Century Gothic";
    src: url("../fonts/century-gothic-regular.woff");
    font-style: normal;
	font-weight: normal;
}

@font-face {
    font-family: "Century Gothic";
    src: url("../fonts/century-gothic-bold.woff");
    font-style: normal;
	font-weight: bold;
}

@font-face {
    font-family: "Century Gothic";
    src: url("../fonts/century-gothic-italic.woff");
    font-style: italic;
	font-weight: normal;
}

@font-face {
    font-family: "Century Gothic";
    src: url("../fonts/century-gothic-bolditalic.woff");
    font-style: italic;
	font-weight: bold;
}

html, body {
	height: 100%;
	margin: 0;
}

body {
	background-color: #F8F8F8;
}

#header {
	background-image: url("../images/header-bg.png");
	position: fixed;
	top: 0px;
	width: 100%;
	height: 64px;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 97;
}

#header-logo {
	background-image: url("../images/header-logo.png");
	top: 0px;
	left: 0px;
	width: 240px;
	height: 64px;
	opacity: 0;
	transition: opacity 0.3s ease;
	z-index: 99;
}

#nav {
    font: normal 12pt/64px "Segoe Print Regular";
    color: #F8F8F8;
    text-decoration: none;
	position: fixed;
	top: 0px;
	right: 16px;
	height: 64px;
    display: inline-block;
	z-index: 99;
}

#nav a:link, #nav a:visited, #nav a:active {
    color: #F8F8F8;
}

#nav a:hover {
    color: #5780D7;
}

#main-logo {
	background-image: url("../images/main-logo.png");
	background-repeat: no-repeat;
    background-position: top center;
	position: absolute;
	top: 16px;
	width: 100%;
	height: 256px;
	z-index: 98;
}

#splash-text {
	font: bold 20pt "Lithos Pro Regular";
	color: #F8F8F8;
	text-align: center;
	position: absolute;
	top: 296px;
	width: 100%;
}

/* Mobile adjustment */
@media (max-width: 768px) {
    #splash-text {
        font-size: 16pt;
    }
}

#splash {
	position: relative;
	top: 0px;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

#pg-photo {
	background: 50% 50% #000000 url("../images/pg-photo-01.jpg");
	position: relative;
	top: 0px;
	height: 368px;
	width: 100%;
	max-width: 1920px;
}

.social-item-yt {
    display: inline-block;
    vertical-align: top;
    width: 64px;
    height: 64px;
    background: -256px 0px url("../images/social-icons.png") no-repeat;
    background-size: 512px 64px;
}

.social-item-yt:hover {
    background: 0px 0px url("../images/social-icons.png") no-repeat;
    background-size: 512px 64px;
}

.social-item-fb {
    display: inline-block;
    vertical-align: top;
    width: 64px;
    height: 64px;
    background: -320px 0px url("../images/social-icons.png") no-repeat;
    background-size: 512px 64px;
}

.social-item-fb:hover {
    background: -64px 0px url("../images/social-icons.png") no-repeat;
    background-size: 512px 64px;
}

.social-item-gp {
    display: inline-block;
    vertical-align: top;
    width: 64px;
    height: 64px;
    background: -384px 0px url("../images/social-icons.png") no-repeat;
    background-size: 512px 64px;
}

.social-item-gp:hover {
    background: -128px 0px url("../images/social-icons.png") no-repeat;
    background-size: 512px 64px;
}

.social-item-ig {
    display: inline-block;
    vertical-align: top;
    width: 64px;
    height: 64px;
    background: -448px 0px url("../images/social-icons.png") no-repeat;
    background-size: 512px 64px;
}

.social-item-ig:hover {
    background: -192px 0px url("../images/social-icons.png") no-repeat;
    background-size: 512px 64px;
}

#content {
	font: normal 12pt "Century Gothic";
	color: #333333;
	position: relative;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.container {
	width: 100%;
	max-width: 1920px;
	text-align: center;
	padding: 8px;
}

#copyrights {
	background-image: url("../images/header-bg.png");
	position: fixed;
	bottom: 0px;
	width: 100%;
	font: normal 7pt/16px "Verdana";
	color: #F8F8F8;
	text-align: center;
	z-index: 99;
}

#map {
	display: block;
	height: 360px;
	width: 100%;
	border: none;
}

#map2 {
	display: block;
	height: 480px;
	width: 100%;
	border: none;
}

a, a:link, a:visited, a:active {
	color: #5A93E0;
	text-decoration: none;
}

a:hover {
	color: #1561AA;
	text-decoration: none;
}

hr {
	display: block;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	margin-left: 8px;
	margin-right: 8px;
	border-style: solid;
	border-width: 1px;
	color: #5A93E0;
}

.container {
	padding: 10px;
}

.container p {
	text-align: left;
}

.container h1 {
	font: bold 22pt "Lithos Pro Regular";
	color: #111111;
}

.container h2 {
	font: bold 18pt "Lithos Pro Regular";
	color: #111111;
}

.container h3 {
	font: bold 14pt "Lithos Pro Regular";
	color: #111111;
}

.container h4 {
	font: bold 12pt "Lithos Pro Regular";
	color: #111111;
}

.pg-prev, .pg-next {
  display: inline-block;
  padding: 8px;
  width: 96px;
}

.pg-container {
  display: inline-block;
  padding: 8px;
}