@font-face {
    font-family: Porsche-Next;
    src: url(../fonts/PorscheNextWLa-Regular.ttf) format('truetype');
    font-weight: normal;
}

@font-face {
    font-family: Porsche-Next;
    src: url(../fonts/PorscheNextWLa-Bold.ttf) format('truetype');    
    font-weight: bold;
}

body { 
font-family: Porsche-Next, Franklin, sans-serif;
color: #222;
font-size: 12pt;
text-align : center;
top: 0;
padding: 0;
margin: 0 auto;
background-color: #fff;
-webkit-font-smoothing: antialiased; 
/* This needs to be set or some font faced fonts look bold on Mac. */
animation: loadfade 2.5s;
-moz-animation: loadfade 2.5s; /* Firefox */
-webkit-animation: loadfade 2.5s; /* Safari and Chrome */
-o-animation: loadfade 2.5s; /* Opera */
}

@keyframes loadfade {
0%   {opacity: 0;}
100%   {opacity: 1;}
}

@-moz-keyframes loadfade /* Firefox */ {
0%   {opacity: 0;}
100%   {opacity: 1;}
}

@-webkit-keyframes loadfade /* Safari and Chrome */ {
0%   {opacity: 0;}
100%   {opacity: 1;}
}

@-o-keyframes loadfade /* Opera */ {
0%   {opacity: 0;}
100%   {opacity: 1;}
}

.topimg {
float: left;
position: relative;
width: 100%;
min-height: 100px;
padding: 0;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
//background-color: #f00;
}

#bgslides {
position: absolute; 
height: 100%; 
width: 100%;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}

#masthead {
width: 100%; 
height: 20vh;
margin: 1% 0 0 0;
}

.wrapper {
position: relative;
width: 90vw;
height: inherit;
margin: 0 auto;
text-align: left;
//background-color: #f00;
}

#storename {
float: left;
position: relative;
top: 0;
height: 8vh;
padding: 0 0 0 0;
margin: 2% 0 0 0;
text-align: left;
animation: dropin .5s ease;
-moz-animation: dropin .5s ease; /* Firefox */
-webkit-animation: dropin .5s ease; /* Safari and Chrome */
-o-animation: dropin .5s ease; /* Opera */
}

#crest {
position: relative;
float: right;
top: 0;
height: 65%;
max-height: 180px;
padding: 0;
margin: 1% 0 0 0;
animation: dropin 1.5s ease;
-moz-animation: dropin 1.5s ease; /* Firefox */
-webkit-animation: dropin 1.5s ease; /* Safari and Chrome */
-o-animation: dropin 1.5s ease; /* Opera */
}

@keyframes dropin {
from { top: -150px; }
to { top: 0; }
}

@-moz-keyframes dropin /* Firefox */ {
from { top: -150px; }
to { top: 0; }
}

@-webkit-keyframes dropin /* Safari and Chrome */ {
from { top: -150px; }
to { top: 0; }
}

@-o-keyframes dropin /* Opera */ {
from { top: -150px; }
to { top: 0; }
}

#login {
position: relative; 
float: left;
padding: 4% 0 0 5%; 
margin: 0 0 5% 0;
}

#navbar {
position: relative;
clear: both;
width: 100vw;
background-color: #fff;
overflow: hidden;
color: #fff;
z-index: 1000 !important;
}

.trigger, label[for="trigger"] {
visibility: hidden;
display: none;
}

#nav {
position: relative;
width: 100%;
height: 10vh;
margin: 0 auto;
padding: 0;
font-weight: 700;
background-color: #fff;
background-image: url(../images/navbg.jpg);
background-repeat: repeat-x;
border-style: solid;
border-color: #d5001c;
border-width: 0 0 2px 0;
background-color: #fff;
}

#footer {
float: left;
width: 95%;
margin: 0;
padding: 4% 0 5% 5%;
font-size: 9pt;
text-align: left;
color: #000;
background-color: #b5b4ba;
}

/* navigation styles */

#nav ul {
position: relative;
width: 90vw;
//height: 8vh;
//height: inherit;
margin: 0 auto;
text-align: left;
clear: both;
list-style-type: none;
//margin: 0 3% 0 3%;
padding: 0;

}

#nav ul li {
float: left;
position: relative;
top: 0;
height: 4vh;
min-height: 42px;
font-size: 14pt;
font-weight: 700;
padding: 2% 1% 0 1%;
margin: 0;
text-align: center;
background-position: center bottom;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}

#nav ul li.selected {
background-image: url(../images/selected.png);
background-repeat: no-repeat;
}

#nav ul li.menu:hover, #nav ul li.selected:hover {
top: -4px;
}

#nav a, #nav a:visited {
text-decoration: none;
display: block;
//padding: 14px 18px 14px 18px;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
color: #888;
}

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

#nav ul li.selected a { 
color: #333;
}

#nav ul li a {
position: relative;
display: block;
}

#logout {
float: right;
text-align: center;
width: 8vw; 
height: 5vh; 
margin: 1% 5% 0 0; 
}

.clearpane {
position: relative;
display: inline;
float: left;
height: inherit;
padding: 0 2% 0 2%;
background-image: url(../images/transwh.png);
overflow: hidden;
z-index: 100;
}

.clearpane h2 {
margin: 12% 0 2% 0;
}

.clearpane hr {
border-color: #d5001c;
width: 95%;
margin-left: 0;
}

#bgpane, #exppane {
width: 25%;
}

#facpane, #mktpane {
float: right; 
width: 25vw;
}

#logpane, #bizpane {
width: 30vw;
}

#tabarea {
position: relative;
float: left; 
width: 90%;
padding: 5% 0 0 5%; 
text-align: left;
}

.contentarea {
float: left;
width: 90%; 
padding: 2% 5% 2% 5%;
text-align: left;
}

.tablebox {
float: left; 
width: 40%;
margin: 0 8% 5% 0;
}

.thumbbox {
float: left; 
width: 40%; 
height: 25vh;
overflow: hidden;
margin: 0 5% 5% 0;
background-color: none;
}

.thumbstack {
float: left; 
width: 40%; 
height: 70vh;
overflow: hidden;
margin: 0 5% 5% 0;
background-color: none;
}

.thumbbox img, .thumbstack img {
width: 100%;
max-width: 480px;
}

.doublewide {
float: left; 
clear: both;
width: 100%;
}

.doublewide img {
max-width: 85vw;
}

.vidgal {
float: left;
padding: 0 2% 4% 0;
width: 640px;
height: auto;
margin: 0 2% 0 0;
//background-color: #f00;
}

.vidgal video {
width: 100%;
}

.vidgal p {
margin: 2% 0 0 0;
}

hr.vidbreak {
border-color: #423d35;
visibility: hidden;
}

.fixedbg {
position: relative;
width: 100vw;
height: 30vh;
top: 0;
margin: 0 auto;
padding: 4% 0 0 0;
overflow: hidden;
text-align: center;
background-repeat: no-repeat !important;
background-position: center center;
background-attachment: fixed;
background-size: cover;
background-color: #403f45;
z-index: -10000000000000 !important;
}

.storegal {
float: left;
width: 30%;
margin: 1% 0 2% 0;
}

.storetumb {
float: left;
width: 144px;
height: 144px;
background-size: cover;
margin: 0 1% 1% 0;
}

h1, h2 {
color: #333;
font-weight: 900;
font-style: normal;
}

h1 {
font-size: 30pt;
//margin: 0;
}

h2 {
font-size: 18pt;
line-height: 18pt;
}

h3 {
color: #d5001c;
font-weight: 700;
font-style: normal;
margin-bottom: 1%;
}

p {
line-height: 12pt;
margin: 1% 0 1% 0;
}

ul.copy, li {
margin: 0 0 12pt 0;
margin-left: -10px;
line-height: 14pt;
}

ul.copy ul, ul.copy ul li {
margin-left: -10px;
}

table {
border-collapse: collapse;
}

td {
height: 24px;
}

tr.underlined td {
border-bottom: 1px solid #cc0000;
}

.gallinks td {
height: 18px;
width: 108px;
}

.white {
color: #fff;
}

.fine {
font-size: 9pt;
}

a { 
text-decoration: none;
color: #cc0000;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}

a:hover, a:visited:hover {
color: #f00;
}

a:visited {
color: #cc0000;
}

a img {
border: none;
}

hr {
border-color: #d5001c;
border-style: solid;
}

form table td {
font-size: 9pt;
}

.field {
font-size: 11pt; 
}

textarea {
resize: none;
}

.tablediv {
overflow: visible;
width: 100%;
}

input {
border-radius: 4px;
}

.submit {
background-color: #222;
border: #ccc 1px solid;
color: #bbb;
font-size: 8pt;
padding: 4px 9px 6px 9px;
margin: 0 0 0 0;
-webkit-font-smoothing: antialiased;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}

.submit:hover { 
background-color: #d5001c; 
color: #fff; 
}

.err {
color: #cc0000;
}

/* root element for tabs  */
ul.css-tabs {
position: absolute;
bottom: 0;
float: bottom;
width: 100%;
margin: 0 !important;
padding: 0;
}

/* single tab */
ul.css-tabs li {
float: left;
padding: 0;
margin: 0 0.5% 0 0;
list-style-type: none;
text-align: center;
}

/* link inside the tab. uses a background image */
ul.css-tabs a {
float: left;
font-size: 12pt;
font-weight: 700;
font-style: normal;
display: block;
padding: 18px;
text-decoration: none;
border-bottom: 0px;
height: 18px;
background-color: #ddd;
color: #333;
margin-right: 3px;
position: relative;
top: 1px;
outline: 0;
-moz-border-radius: 4px 4px 0 0;
}

ul.css-tabs a:hover {
background-color: #f7f7f7;
color: #666;
}

/* selected tab */
.biotab.selected {
color: #d5001c;
background-color: #fff;
}

.css-panes > div > hr {
width: 100%;
}

/* tab pane */
.css-panes > div {
display: none;
visibility: hidden;
min-height: 150px;
background-color: #fff;
}

#biopic {
display: block;
float: left; 
padding: 0 1% 1% 0;
width: 25%;
max-width: 280px;
}

#popoverlay {
position: fixed;
top: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.92);
z-index: 5000;
visibility: hidden;
}

#popimage {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 2vh;
max-height: 100vh;
width: 40vw;
z-index: 5500;
display: none;
}

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

#storename h1 {
margin: 2% 0 0 0;
}

}

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

body { 
font-size: 10pt;
}

#storename h1 {
font-size: 21pt;
margin: 3% 0 0 0;
}

#nav ul li {
float: left;
position: relative;
top: 0;
height: 42px;
font-size: 10pt;
font-weight: 700;
padding: 2% 1% 0 1%;
margin: 0;
text-align: center;
background-position: center bottom;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}

.fixedbg {
height: 40vh;
padding: 1% 0 0 0;
}

.storegal {
width: 42%;
margin: 1% 0 2% 0;
}

.storetumb {
width: 96px;
height: 96px;
margin: 0 1% 1% 0;
}

}

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

#login {
padding: 0; 
margin: 0;
}

#bgpane, #mktpane, #exppane {
width: 45%;
}

ul.css-tabs a {
font-size: 9pt;
padding: 11px;
}

#popimage {
width: 70vw;
}

.tablebox {
width: 85%;
margin: 0 0 5% 0;
}

}

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

#storename h1 {
margin: 15% 0 0 0;
}

#logpane {
width: 40vw;
}

form table td {
font-size: 8pt;
}

#navbar {
position: relative;
display: block;
text-align: center;
padding: 2% 0 2% 0;
background-color: #fff;
}

.trigger {
visibility: hidden;
display: none;
}

.trigger:checked ~ #nav {
display: inline;
}

label[for="trigger"] {
display: inline;
visibility: visible;
float: none; 
text-align: center;
color: #fff;
font-weight: bold;
font-size: 12pt;
cursor: pointer;
background-size: contain;
z-index: 102;
}

#nav {
//width: 100vw;
width: auto;
display: none;
}

#nav ul {
width: 100vw;
}

#nav ul li, #nav ul li:hover {
position: relative;
width: 100vw;
padding: 30px 0 6px 0;
font-size: 16pt;
margin: 0 0 0 0;
background-color: #fff;
border-style: groove;
border-color: #666;
border-width: 0 0 1px 0;
}

#nav ul li:last-child {
border-width: 0 0 0 0;
}

#nav ul li.menu:hover, #nav ul li.selected:hover {
top: 0;
}

#nav ul li.selected {
background-image: none;
background-repeat: no-repeat;
}

#nav ul li.selected a{
color: #d5001c;
}

#logout {
float: right; 
width: 100vw; 
height: 5vh; 
margin: 2% 0 0 0; 
}

#biopic {
padding: 0 2% 1% 0;
width: 45%;
}

.tablebox {
width: 96%;
margin: 0 0 5% 0;
}

.thumbbox {
height: 25vh;
}

.thumbstack {
height: 40vh;
}

.fixedbg {
height: 70vh;
}

.vidgal {
width: 480px;
}

}


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

#storename h1 {
font-size: 16pt;
margin: 10% 0 0 0;
}

#crest {
height: 45%;
max-height: 180px;
}

.topimg .wrapper {
width: 100vw;
}

.clearpane {
padding: 0 4% 0 4%;
}

#tabarea {
width: 90%;
min-height: 10vh;
padding: 10% 0 0 5%; 
}

ul.css-tabs li {
margin: 0 0.5% 2% 0;
}

ul.css-tabs li a {
border: 1px solid #ddd;
border-radius: 8px 24px;
}

.contentarea {
width: 94%; 
padding: 2% 3% 4% 3%; 
}

.thumbbox {
width: 40%;
height: 40vh;
margin: 4% 10% 0 0;
}

.thumbbox img {
width: 100%;
//max-width: 480px;
}

.fixedbg {
padding: 4% 0 0 0;
background-position: center top;
}

.vidgal {
width: 320px;
}

.storegal {
width: 100%;
margin: 2% 0 5% 0;
}

.storetumb {
width: 144px;
height: 144px;
margin: 0 1% 1% 0;
}

p {
line-height: 10pt;
margin: 1% 0 1% 0;
}

}

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

body {
font-size: 9pt;
}

#storename h1 {
font-size: 14pt;
margin: 10% 0 0 0;
}


#facpane {
width: 35%;
}

p {
line-height: 9pt;
}

#tabarea {
padding: 18% 0 0 5%; 
}

.vidgal {
width: 270px;
}
}