@font-face {
    font-family: 'trajan_probold';
    src: url('../font/trajanprobold-webfont.eot');
    src: url('../font/trajanprobold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/trajanprobold-webfont.woff') format('woff'),
         url('../font/trajanprobold-webfont.ttf') format('truetype'),
         url('../font/trajanprobold-webfont.svg#trajan_probold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'trajan_proregular';
    src: url('../font/trajanproregular-webfont.eot');
    src: url('../font/trajanproregular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/trajanproregular-webfont.woff') format('woff'),
         url('../font/trajanproregular-webfont.ttf') format('truetype'),
         url('../font/trajanproregular-webfont.svg#trajan_proregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'map';
    src:url('../fonts/map.eot');
    src:url('../fonts/map.eot?#iefix') format('embedded-opentype'),
        url('../fonts/map.woff') format('woff'),
        url('../fonts/map.ttf') format('truetype'),
        url('../fonts/map.svg#map') format('svg');
    font-weight: normal;
    font-style: normal;
}

body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, a { margin: 0; padding: 0; }
main, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; border-collapse: collapse; box-sizing: content-box; }


html { overflow: hidden; }
body { position: absolute; overflow: hidden; width: 100%; height: 100%; text-rendering: geometricPrecision; }
header { position: absolute; width: 100%; height: 11rem; margin: 0 auto; border-bottom: 10px solid rgba(0,0,0,0.3); text-align: center; vertical-align: middle; font: normal 1rem/1.2 'Trajan Pro', georgia, sans-serif; color: rgba(0,0,0,0.7); text-shadow: 0px 0px 40px rgba(239, 239, 164, 0.9); z-index: 10; }
footer { background: linear-gradient(to top, rgba(255,255,255,0.2) 0%, rgba(111,139,90,0.8) 100%); position: fixed; bottom: 0; width: 100%; height: 5rem; text-align: center; border-top: 5px solid rgba(0,0,0,0.5); box-shadow: 0 0 30px 5px rgba(0,0,0,0.5); }

#mapContainer { width: 100%; height: 100%; left: 0; top: 0; -webkit-filter: contrast(1.4); }

h1 { position: relative; font-size: 3rem; letter-spacing: 0.8rem; padding-top: 3.8rem; -webkit-text-stroke-width: 0.05rem; -webkit-text-stroke-color: DarkGoldenrod; text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.6); }
h1::before { content: "CC"; position: relative; top: -1.2rem; left: 3rem; color: #fff; font-size: 0.75em; letter-spacing: 0; opacity: 0.8; color: rgba(0,0,0,0.5); -webkit-text-stroke-width: 0.05rem; -webkit-text-stroke-color: DarkGoldenrod; }
h2 { font-size: 2rem; letter-spacing: 0.85rem; word-spacing: 0.5rem; -webkit-text-stroke-width: 0.03rem; -webkit-text-stroke-color: DarkGoldenrod; text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.6); }
h3 { margin-left: -0.1rem; border-bottom: 1px dotted #999; font: normal 2.2rem/1.4 'Trajan Pro', georgia, sans-serif; letter-spacing: 0.7rem; word-spacing: 0.5rem; -webkit-text-stroke-width: 0.03rem; -webkit-text-stroke-color: DarkGoldenrod; text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.6);}
p { margin: 0.8rem 0; font: normal 1.2rem/1.4 "Jura", "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif; }
p:first-of-type { padding-top: 0.6rem; }
p:last-of-type { padding-bottom: 0.6rem; }
small { margin: 0 -0.4rem 0 -0.2rem; color: goldenrod; text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.6); }

div#temphome { position: absolute; top: 1rem; left: 1rem; z-index: 1000; }
div#temphome a { text-decoration: none; font: 3rem/2 "Wingdings"; color: goldenrod; text-shadow: 1px 1px 5px rgba(218, 165, 32,0.9); }
div#temphome a:hover { color: #fff; text-shadow: 1px 1px 5px rgba(0,0,0,0.4); } 
div#temphome a:focus { color: #fff; text-shadow: 1px 1px 5px rgba(0,0,0,0.4); } 

footer>nav { margin: 0 auto; font: normal 0.5rem/1.2 'Trajan Pro', georgia, sans-serif; }
footer>nav ul { padding-top: 0.5rem; }
footer>nav li { font-weight: bold; display: inline; list-style: none; font-size: 1.8rem; letter-spacing: 0.5rem; line-height: 1.6; -webkit-text-stroke-width: 0.04rem; -webkit-text-stroke-color: DarkGoldenrod; text-shadow: 0px 0px 7px rgba(0, 0, 0, 0.6); }
footer>nav li a { display: inline-block; padding: 0.1rem 1rem; text-decoration: none; color: rgba(0,0,0,0.7); }
footer>nav li a span { color: rgba(218,165,32,0.5); font: normal 1.3rem map; vertical-align: 0.05rem; text-shadow: 1px 1px 2px rgba(0,0,0,0.5); -webkit-text-stroke-width: 0.04rem; -webkit-text-stroke-color: DarkGoldenrod; }
footer>nav li a:hover { border-radius: 10px; color: rgba(0,0,0,1); background-image: radial-gradient(ellipse closest-corner at center, rgba(100,100,100,0.1) 0%, rgba(0,0,0,0.3) 30%, rgba(0,0,0,0.2) 100%); box-shadow: 0 0 30px 5px rgba(0,0,0,0.3); }

a[rel*='external'] { position: relative; }
a[rel*='external']:after { content: " \e602"; font-family: "map"; font-size: 1rem; left: 30%; opacity: 0; position: absolute; top: 1rem; transition: all .4s cubic-bezier(0.5, -1, 0.2, 1.8); }
a[rel*='external']:hover:after { opacity: 1; top: 0.9rem; left: 90%; color: #ffd602; }  

.content { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.5); z-index: 99999; opacity: 0; transition: opacity 400ms ease-in; pointer-events: none; }
.content:target { opacity: 1; pointer-events: auto; }
.content>div { width: 75%; position: relative; margin: 10% auto; padding: 3% 4% 2% 4%; border: 1px solid #333; border-radius: 10px; background: #fff; box-shadow: 2px 2px 20px 5px rgba(0,0,0,0.3); }
.content nav ul { padding-left: 0.1rem; }
.content nav ul li { display: inline; font: normal 1rem/3 "Arial Narrow", sans-serif; }
.content nav ul li span { color: rgba(218,181,32,0.8); font: normal 1rem map; vertical-align: -0.05rem; }
.content nav ul li a { text-decoration: none; letter-spacing: 0.1rem; }
.content nav ul li a:hover { color: #333; text-shadow: 0 0 1px rgba(0,0,0,0.5); }
.content nav ul li a:after { content: " » "; color: rgba(218,181,32,1); } 
.close { background: #ff1c40; color: #fff; font: normal 2rem/1 "map"; position: absolute; right: -12px; top: -10px; text-decoration: none; border-radius: 25px; box-shadow: 1px 1px 3px #000; }
.close:hover { background: #ce0021; }


.titleup { -webkit-animation: titleup_animation 6s linear 0s 1 forwards; }
@-webkit-keyframes titleup_animation {
0% { -webkit-animation-timing-function: ease; top: 370px; background: radial-gradient(ellipse farthest-corner at center, rgba(242,245,240,0) 0%, rgba(111,139,90,0) 100%); box-shadow: 0 10px 20px 0 rgba(0,0,0,0.1); }
50% { -webkit-animation-timing-function: ease; top: 370px; background: radial-gradient(ellipse farthest-corner at center, rgba(242,245,240,0.1) 0%, rgba(111,139,90,0.07) 100%); box-shadow: 0 10px 20px 0 rgba(0,0,0,0.1); }
80% { -webkit-animation-timing-function: ease; top: 0px; background: radial-gradient(ellipse farthest-corner at center, rgba(242,245,240,0.5) 0%, rgba(111,139,90,0.3) 100%); box-shadow: 0 10px 20px 0 rgba(0,0,0,0.3); }
100% { -webkit-animation-timing-function: ease; top: 0px; background: radial-gradient(ellipse farthest-corner at center, rgba(242,245,240,0.9) 0%, rgba(111,139,90,0.6) 100%); box-shadow: 0 10px 20px 0 rgba(0,0,0,0.5); }
}

.fadeOff { opacity: 0; }
.fadeOn { -webkit-animation: fade_animation 3s ease 1s 1 forwards; }
.fadeOnSlo { -webkit-animation: fade_animation 4s ease 5s 1 forwards; }
@-webkit-keyframes fade_animation {
0% { -webkit-animation-timing-function: ease; opacity: 0; }
100% { -webkit-animation-timing-function: ease; opacity: 1; }
}