/* Open Sans by Steve Matteson (Ascender Fonts) - Apache License v2.00 */
@font-face { font-family: "OpenSans"; src: url('fonts/OpenSans-Regular.woff') format('woff'), url('fonts/OpenSans-Regular.ttf') format('truetype'); font-weight:normal; font-style:normal; } 
@font-face { font-family: "OpenSans"; src: url('fonts/OpenSans-Bold.woff') format('woff'), url('fonts/OpenSans-Bold.ttf') format('truetype'); font-weight:bold; font-style:normal; }
@font-face { font-family: "OpenSans"; src: url('fonts/OpenSans-Italic.woff') format('woff'), url('fonts/OpenSans-Italic.ttf') format('truetype'); font-weight:normal; font-style:italic; }
@font-face { font-family: "OpenSans"; src: url('fonts/OpenSans-BoldItalic.woff') format('woff'), url('fonts/OpenSans-BoldItalic.ttf') format('truetype'); font-weight:bold; font-style:italic; }

body, html { height:100%; }
body { position:relative; margin:0px auto 0px auto; left:0px; padding:0px; color:#440909; background-color:#eeded6; }
body, html, p, div, span, a, blockquote, ul, ol, li { font-family: "OpenSans", Helvetica, Arial, sans-serif; }
body, html, p, div, span, blockquote, ul, ol, li { line-height:138%; }
a:link { text-decoration:none; color:#aa4444; }
a:visited { text-decoration:none; color:#886666; }
a:hover, a:focus { text-decoration:underline; color:#e3009e; }
h2, h3, h4 { color:#440909; }
h1 { color:#440909; text-shadow: 0.1em 0.1em 0.12em #ffffff; }
b { font-weight:bold; }
blockquote { font-style:italic; }

.titlebox { display:block; clear:both; margin-left:10%; margin-right:10%; }
.titleline, .titlesymbol { font-weight:bold; line-height:120%; }
.naviframe { display:inline-table; clear:both; width:100%; height:auto; horizontal-align:center; text-align:center; }
.navilogo { border-width:1px 1px 1px 1px; }
.navibuttons { border-width:1px 1px 1px 0px; }
.navibuttons, .navilogo { display:inline-table; white-space:nowrap; overflow:hidden; width:auto; background-color:#fffffa; border-style:solid; border-color:#ccbcb5; }
.navibuttons a:link { text-decoration:none; color:#aa4444; }
.navibuttons a:visited { text-decoration:none; color:#886666; }
.navibuttons a:hover, .navibuttons a:focus { text-decoration:underline; color:#dedede; background-color:#660909; }
.contentcanvas { display:block; clear:both; position:absolute; left:0px; top:0px; right:0px; padding:0px; margin:0px; width:100%; height:auto; min-height:100%; horizontal-align:center; text-align:center; }
.contentarea { display:inline-table; clear:both; max-width:1000px; margin:2%; padding:1%; text-align:justify; border-width:1px; border-style:solid; border-color:#ccbcb5; background-color:#ffefe7; }

.pixcenter { horizontal-align:center; text-align:center; }
.pix33 { width:33%; }
.pix50 { width:50%; }
.pix75 { width:75%; }
.cardsB { color:black; }
.cardsR { color:red; }
.cardsB, .cardsR { line-height:100%; }
.mailhere { vertical-align:text-bottom; height:1.2em; }

/* extended responsiveness */
@-ms-viewport { width:device-width; }
@viewport { width:device-width; }

@media screen and (max-width: 550px) {
   body, html, p, div, span, a, blockquote, ul, ol, li { font-size: calc(15px - 0.4vw); }
   h1, .titleline, .titlesymbol { font-size: calc(27px - 0.4vw); }
   h2, .navibuttons a, i, .navilogo b { font-size: calc(20px - 0.4vw); }
   li { margin-bottom: calc(10px - 0.4vw); }
   .titlebox { padding-top: calc(10px - 0.4vw); padding-bottom: calc(10px - 0.4vw); }
   /* switch to vertical menu depending on canvas width */
   .naviframe { z-index:1; display:block; position:fixed; top:0px; left:0px; width:auto; background-color:#fffffa; border-style:solid; border-color:#ccbcb5; }
   .navibuttons, .navilogo { clear:both; float:left; border-color:white; padding: calc(8px - 0.4vw) 0px calc(8px - 0.4vw) 0px; }
   .navibuttons a, i, .navilogo b { padding: calc(16px - 0.4vw); }
   .navibuttons { display:none; animation: fadein 1s; animation-fill-mode: forwards; animation-timing-function: ease; opacity: 0.1; }
   .navilogo { display:inline-table; }
   .navilogo b:hover, .navilogo b:focus { color:#dedede; background-color:#660909; }
   .contentarea { padding-top: calc(10px - 0.4vw); }
   .cardsB, .cardsR { font-size: calc(140px - 0.4vw); }
}

@media screen and (min-width: 451px) and (max-width: 550px) and (min-resolution: 100dpi) {
   body, html, p, div, span, a, blockquote, ul, ol, li { font-size: calc(16px - 0.6vw); }
   h1, .titleline, .titlesymbol { font-size: calc(22px - 0.6vw); }
   h2, .navibuttons a, i, .navilogo b { font-size: calc(19px - 0.6vw); }
   .titlesymbol { display:none; }
   .cardsB, .cardsR { font-size: calc(120px - 0.6vw); }
}

@media screen and (max-width: 450px) and (min-resolution: 100dpi) {
   body, html, p, div, span, a, blockquote, ul, ol, li { font-size: calc(16px - 0.8vw); }
   h1, .titleline, .titlesymbol { font-size: calc(22px - 0.8vw); }
   h2, .navibuttons a, i, .navilogo b { font-size: calc(19px - 0.8vw); }
   .titlesymbol { display:none; }
   .cardsB, .cardsR { font-size: calc(120px - 0.8vw); }
}

@media screen and (min-width: 551px) {
   body, html, p, div, span, a, blockquote, ul, ol, li { font-size: calc(14px + 0.4vw); }
   h1, .titleline, .titlesymbol { font-size: calc(22px + 0.4vw); }
   h2, .navibuttons a, i, .navilogo b { font-size: calc(20px + 0.4vw); }
   li { margin-bottom: calc(10px + 0.4vw); }
   .titlebox { padding-top: calc(10px + 0.4vw); padding-bottom: calc(10px + 0.4vw); }
   .navibuttons, .navilogo { padding: calc(5px + 0.4vw) 0px calc(5px + 0.4vw) 0px; }
   .navibuttons a, i, .navilogo b { padding: calc(10px + 0.4vw); }
   .contentarea { padding-top: calc(10px + 0.4vw); }
   .cardsB, .cardsR { font-size: calc(175px + 0.4vw); }
}

@media screen and (min-width: 1030px) {
   .contentarea { margin:20px; padding:10px; }
}

@keyframes fadein {
  from {opacity: 0.5;}
  to {opacity: 1.0;}
}