* {
    box-sizing: border-box;
}
html {
  /*margin-right: calc(100vw - 100%);
  margin-left: 0;*/
}
body {
  overflow: hidden;
  margin:0;
  font-family: 'Roboto Slab', serif;
  font-size:16px;
  font-weight:200;
  background-color:#fff;
  color:rgba(0,0,0,0.5);
  }
  a:link, a:visited {
  	font-size:1em;
  	font-weight:400;
  	text-decoration:none;
  	color:#000;
  	letter-spacing:1px;
  }
  a:hover, a:active {
  	color:#C30;
  }

/*   BASE STYLES (MOBILE)   */

#bottom {
  top:35%;
  height:65%;
}
#icon {
  left:calc(50% - 73px);
}
#icon > img {
  width:70%;
  height:auto;
}
.iconOnLoad {
  visibility:hidden;
  -webkit-animation-name:dropIcon;
  -webkit-animation-delay:500ms;
  -webkit-animation-duration:200ms;
  -webkit-animation-fill-mode:forwards;
  animation-name:dropIcon;
  animation-delay:500ms;
  animation-duration:200ms;
  animation-fill-mode:forwards;
  -moz-animation-name:dropIcon;
  -moz-animation-delay:500ms;
  -moz-animation-duration:200ms;
  -moz-animation-fill-mode:forwards;
}
.iconLoaded {
  visibility:visible;
  top:calc(35% - 60px);
}
.tab1OnLoad {
  visibility:hidden;
  -webkit-animation-name:dropTab1;
  -webkit-animation-delay:1000ms;
  -webkit-animation-duration:200ms;
  -webkit-animation-fill-mode:forwards;
  -moz-animation-name:dropTab1;
  -moz-animation-delay:1000ms;
  -moz-animation-duration:200ms;
  -moz-animation-fill-mode:forwards;
  animation-name:dropTab1;
  animation-delay:1000ms;
  animation-duration:200ms;
  animation-fill-mode:forwards;
}
.tab2OnLoad {
  visibility:hidden;
  -webkit-animation-name:dropTab2;
  -webkit-animation-delay:1300ms;
  -webkit-animation-duration:200ms;
  -webkit-animation-fill-mode:forwards;
  -moz-animation-name:dropTab2;
  -moz-animation-delay:1300ms;
  -moz-animation-duration:200ms;
  -moz-animation-fill-mode:forwards;
  animation-name:dropTab2;
  animation-delay:1300ms;
  animation-duration:200ms;
  animation-fill-mode:forwards;
}
.tab1Loaded {
  top:calc(35% + 80px);
}
.tab2Loaded {
  top:calc(35% + 130px);
}
.tab2ShiftDown {
  top:calc(35% + 145px);
}
.menuTab {
  left:calc(50% - 55px);
  color:#000;
  font-weight:normal;
}
.webmenu {
  position:absolute;
  top:calc(35% + 75px);
}
.printmenu {
  position:absolute;
  top:calc(35% + 130px);
}
.submenu1 {
  display:inline-block;
  top:calc(35% + 75px);
  left:calc(50% - 110px);
  width:220px;
  font-size:0.9em;
  padding:38px 0 5px 0;
  background:rgba(255,0,0,0.0);
}
.submenu2 {
  display:inline-block;
  top:calc(35% + 132px);
  left:calc(50% - 110px);
  width:220px;
  font-size:0.9em;
  padding:32px 0 5px 0;
  background:rgba(0,0,255,0.0);
}
.inlineMe {
  display:inline-block;
}
.subInlinePlusSign {
  display:inline-block;
  color:rgba(0,0,0,0.3);
}
.subBreak {
  display:none;
}
.link {
  display:inline-block;
  line-height:18px;
}
#aboutMe {
  position:absolute;
  left:15%;
  width:70%;
  color:#000;
  /*overflow-y:auto;*/
  z-index:800;
}
#aboutMe > img {
  float:right;
  margin:5px 0 5px 10px;
  background:#c8582a;
}
.aboutMeShow {
  top:calc(35% + 72px);
  border:0 solid black;
  display:block;
}
.aboutMeShowHigh {
  top:133px;
  border:0 solid black;
  display:block;
}
#aboutMeHideMeTrigger {
  position:absolute;
  background:rgba(0,0,255,0.0);
}
.aboutMeHideMeTriggerLow {
  top:calc(35% - 60px);
  left:calc(50% - 73px);
  width:140px;
  height:125px;
  display:block;
}
.aboutMeHideMeTriggerHi {
  top:20px;
  left:calc(50% - 50px);
  width:100px;
  height:90px;
  display:block;
}
.aboutMeHide {
  display: none;
}

/*   RAISE HIGH THE ROOF BEAM   */
.page2Bkgd {
  -webkit-animation-name:raiseBkgd;
  -webkit-animation-delay:0ms;
  -webkit-animation-duration:100ms;
  -webkit-animation-fill-mode:forwards;
  -moz-animation-name:raiseBkgd;
  -moz-animation-delay:0ms;
  -moz-animation-duration:100ms;
  -moz-animation-fill-mode:forwards;
  animation-name:raiseBkgd;
  animation-delay:0ms;
  animation-duration:100ms;
  animation-fill-mode:forwards;
}
.page2Icon {
  -webkit-animation-name:raiseIcon;
  -webkit-animation-delay:0ms;
  -webkit-animation-duration:50ms;
  -webkit-animation-fill-mode:forwards;
  -moz-animation-name:raiseIcon;
  -moz-animation-delay:0ms;
  -moz-animation-duration:50ms;
  -moz-animation-fill-mode:forwards;
  animation-name:raiseIcon;
  animation-delay:0ms;
  animation-duration:50ms;
  animation-fill-mode:forwards;
}
.page2Tab1 {
  -webkit-animation-name:raiseTab1;
  -webkit-animation-duration:50ms;
  -webkit-animation-fill-mode:forwards;
  -moz-animation-name:raiseTab1;
  -moz-animation-duration:50ms;
  -moz-animation-fill-mode:forwards;
  animation-name:raiseTab1;
  animation-duration:50ms;
  animation-fill-mode:forwards;
}
.page2Tab2 {
  -webkit-animation-name:raiseTab2;
  -webkit-animation-delay:0ms;
  -webkit-animation-duration:50ms;
  -webkit-animation-fill-mode:forwards;
  -moz-animation-name:raiseTab2;
  -moz-animation-delay:0ms;
  -moz-animation-duration:50ms;
  -moz-animation-fill-mode:forwards;
  animation-name:raiseTab2;
  animation-delay:0ms;
  animation-duration:50ms;
  animation-fill-mode:forwards;
}
.page2SubMenu {
  position:absolute;
  text-align:center;
  font-size:12px;
  line-height:2px;
  padding:12px 0 3px 0;
  visibility:hidden;
  width:120px;
  top:70px;
}
.page2SubMenu1 {
  left:calc(50% - 162px);
}
.page2SubMenu2 {
  left:calc(50% + 46px);
}

/*   BASE ANIMATIONS (MOBILE)   */
@keyframes dropIcon {
  0% {top:calc(35% - 60px);}
  1% {visibility:visible; top:-200px;}
  50% {visibility:visible; top:calc(35% - 80px);}
  60% {visibility:visible; top:calc(35% - 50px);}
  70% {visibility:visible; top:calc(35% - 60px);}
  80% {visibility:visible; top:calc(35% - 55px);}
  100% {visibility:visible; top:calc(35% - 60px);}
}
@keyframes dropTab1 {
  0% {top:calc(35% + 80px);}
  1% {visibility:visible; top:-200px;}
  50% {visibility:visible; top:calc(35% + 95px);}
  60% {visibility:visible; top:calc(35% + 75px);}
  70% {visibility:visible; top:calc(35% + 80px);}
  80% {visibility:visible; top:calc(35% + 75px);}
  100% {visibility:visible; top:calc(35% + 80px);}
}
@keyframes dropTab2 {
  0% {top:calc(35% + 130px);}
  1% {visibility:visible; top:-200px;}
  50% {visibility:visible; top:calc(35% + 95px);}
  60% {visibility:visible; top:calc(35% + 120px);}
  70% {visibility:visible; top:calc(35% + 130px);}
  80% {visibility:visible; top:calc(35% + 125px);}
  100% {visibility:visible; top:calc(35% + 130px);}
}
@keyframes raiseBkgd {
  from {top:35%; height:65%; width:100%; background-size:cover; }
  to {top:-5px; height:74px; width:100%; background-size:cover; }
}
@keyframes raiseIcon {
  0% {top:calc(35% - 60px); left:calc(50% - 43px); height:65%; width:100%;}
  1% {top:calc(35% - 60px); left:calc(50% - 43px); height:65%; width:100%;}
  100% {top:32px; left:calc(50% - 43px); height:75px; width:auto; }
}
@keyframes raiseTab1 {
  from {top:calc(35% + 80px); left:calc(50% - 14px);}
  to {top:56px; left:calc(50% - 140px);}
}
@-webkit-keyframes raiseTab2 {
  from {top:calc(35% + 130px); left:calc(50% - 14px);}
  to {top:56px; left:calc(50% + 67px);}
}
@-moz-keyframes raiseTab2 {
  from {top:calc(35% + 130px); left:calc(50% - 14px);}
  to {top:56px; left:calc(50% + 67px);}
}
@keyframes raiseTab2 {
  from {top:calc(35% + 130px); left:calc(50% - 14px);}
  to {top:56px; left:calc(50% + 67px);}
}



@media only screen and (max-width: 320px) {
  .aboutMeType {
    font-size:0.7em;
    line-height:1.6em;
  }
  .toggleDisplay {
    display:none;
  }
  .contact {
    font-size:1.2em;
  }
}
/* MOBILE TINY LANDSCAPE */
@media only screen and (max-width: 568px) and (max-height: 400px){
  #icon > img {
    width:60%;
    margin:5% 0 0 5%;
    height:auto;
  }
  .aboutMeType {
    font-size:0.6em;
    line-height:1.3em;
  }
}
/* MOBILE/NARROW VIEWPORT */
@media only screen and (max-width:568px) and (min-height:401px) {
  .aboutMeType {
    font-size:0.7em;
    line-height:1.5em;
  }
}
/*   DESKTOP   */
@media only screen and (min-width: 569px) {
  body {
    overflow: hidden;
    margin:0;
    font-family: 'Roboto Slab', serif;
    font-size:16px;
    font-weight:200;
    background-color:#fff;
    color:rgba(0,0,0,0.5);
    }
    a:link, a:visited {
    	font-size:1em;
    	font-weight:400;
    	text-decoration:none;
    	color:#000;
    	letter-spacing:1px;
    }
    a:hover, a:active {
    	color:#C30;
    }
  #marker {
    position:absolute;
    top:0;
    left:0;
    width:25px;
    height:40%;
    padding:30% 0 0 0;
    background-color:red;
    z-index: 30;
  }
  #bottom {
    top:40%;
    height:60%;
  }
  .bottomExpanded {
    top:40%;
    height:800px;
  }
  #icon {
    top:calc(40% - 78px);
    left:calc(50% - 83px);
  }
  #icon > img {
    width:90%;
    height:auto;
  }
  .iconOnLoad {
    visibility:hidden;
    animation-name:dropIcon;
    animation-delay:500ms;
    animation-duration:200ms;
    animation-fill-mode:forwards;
  }
  .iconLoaded {
    visibility:visible;
    top:calc(35% - 60px);
  }
  .tab1OnLoad {
    visibility:hidden;
    animation-name:dropTab1;
    animation-delay:1000ms;
    animation-duration:200ms;
    animation-fill-mode:forwards;
  }
  .tab2OnLoad {
    visibility:hidden;
    animation-name:dropTab2;
    animation-delay:1300ms;
    animation-duration:200ms;
    animation-fill-mode:forwards;
  }
  .tab1Loaded {
    top:calc(40% - 14px);
    left:calc(50% - 14px);
    display:block;
  }
  .tab2Loaded {
    display:block;
  }
  .menuTab {
    top:calc(40% - 14px);
  }
  .link {
    display:inline-block;
    line-height:18px;
  }
  .webmenu {
    position:absolute;
    left:calc(50% - 225px);
  }
  .printmenu {
    position:absolute;
    left:calc(50% + 130px);
  }
  .page2SubMenu {
    position:absolute;
    text-align:center;
    font-size:0.75em;
    line-height:1em;
    padding:15px 0 5px 0;
    margin: 0;
    visibility:hidden;
    background:rgba(255,0,0,0.0);
  }
  .submenu1 {
    display:block;
    top:calc(40% + 14px);
    left:calc(50% - 225px);
    width:110px;
    height:60px;
    padding:8px 0 5px 0;
    font-size:0.9em;
    line-height:1.25em;
  }
  .submenu2 {
    display:block;
    top:calc(40% + 14px);
    left:calc(50% + 130px);
    width:110px;
    padding:8px 0 5px 0;
    font-size:0.9em;
  }
  .subInlinePlusSign {
    display:none;
  }
  .subBreak {
    display:block;
  }
  #aboutMe {
    position:absolute;
    left:15%;
    width:72%;
    z-index:800;
  }
  .aboutMeType {  /* <<<< THIS WORKS FOR LANDSCAPE DESKTOP */
    font-size:0.7em;
    line-height:1.5em;
  }
  .aboutMeShow {
    top:calc(40% + 82px);
    border:0 solid black;
    display:block;
  }
  .aboutMeHide {
    display: none;
  }
  .toggleDisplay {
    display:inline-block;
  }
  #aboutMeHideMeTrigger {
    position:absolute;
    left:calc(50% - 73px);
    width:140px;
    height:140px;
    background:rgba(0,0,255,0.0);
  }
  .aboutMeHideMeTriggerLow {
    top:calc(35% - 60px);
    left:calc(50% - 73px);
    width:160px;
    height:125px;
    display:block;
  }
  .aboutMeHideMeTriggerHi {
    top:20px;
    left:calc(50% - 50px);
    width:100px;
    height:90px;
    display:block;
  }
  .contact {
    font-family:Arial,Helvetica,sans-serif;
    font-size:2em;
    font-weight:300;
    letter-spacing:0px;
    text-align:center;
    color:rgba(0,0,0,1);
  }
  a.contact:link {color:rgba(0,0,0,1);text-decoration:none;letter-spacing:0.5px;}
  a.contact:visited {color:rgba(0,0,0,1);text-decoration:none;letter-spacing:0.5px;}
  a.contact:hover {color:#C30;text-decoration:none;letter-spacing:0.5px;}
  a.contact:active {color:rgba(0,0,0,0.4);text-decoration:none;letter-spacing:0.5px;}
  a.aboutLink:link {color:#9b0000;text-decoration:none;letter-spacing:0;}
  a.aboutLink:visited {color:#9b0000;text-decoration:none;letter-spacing:0;}
  a.aboutLink:hover {color:#C30;text-decoration:none;letter-spacing:0;}
  a.aboutLink:active {color:#C30;text-decoration:none;letter-spacing:0;}

/* DESKTOP ANIMATIONS */
  @keyframes dropIcon {
    0% {top:calc(40% - 75px);}
    1% {visibility:visible; top:-200px;}
    40% {visibility:visible; top:calc(40% - 75px);}
    60% {visibility:visible; top:calc(40% - 90px);}
    73% {visibility:visible; top:calc(40% - 75px);}
    85% {visibility:visible; top:calc(40% - 65px);}
    100% {visibility:visible; top:calc(40% - 75px);}
  }
  @keyframes dropTab1 {
    0% {top:calc(40% - 14px);}
    1% {visibility:visible; top:-200px;}
    40% {visibility:visible; top:calc(40% + 5px);}
    60% {visibility:visible; top:calc(40% - 10px);}
    73% {visibility:visible; top:calc(40% + 0px);}
    85% {visibility:visible; top:calc(40% - 5px);}
    100% {visibility:visible; top:calc(40% - 14px);}
  }
  @keyframes dropTab2 {
    0% {top:calc(40% - 14px);}
    1% {visibility:visible; top:-200px;}
    40% {visibility:visible; top:calc(40% + 5px);}
    60% {visibility:visible; top:calc(40% - 10px);}
    73% {visibility:visible; top:calc(40% + 0px);}
    85% {visibility:visible; top:calc(40% - 5px);}
    100% {visibility:visible; top:calc(40% - 14px);}
  }
}

/*   COMMON ANIMATIONS   */
@keyframes fadeIn {
  from {opacity:0;}
  to {opacity:1;}
}

/*   COMMON STYLES   */
#top {
  position:absolute;
  top:0;
  width:100%;
  background:#fff;
  z-index:-1;
}
#bottom {
  position:absolute;
  width:100%;
  z-index:-2;
}
.bottomLo {
  background:url(../images/paper-sm.png);
  background-size:cover;
  background-repeat: repeat-y;
  /*background-repeat:no-repeat;*/
}
.bottomHi {
  background:url(../images/paper.png);
  background-size:cover;
  background-repeat: repeat-y;
}
.bottomBorder {
  border-bottom:thin solid #999;
}
#icon {
  position:absolute;
  background:rgba(255,0,0,0.0);
}
#logotype {
  position:absolute;
  top:calc(17% - 46px);
  left:calc(50% - 100px);
  width:200px;
  background:url(../images/logotype.svg);
  background-repeat: no-repeat;
  background-position:center top;
  background-size:197px;
  padding:30px 0 0 5px;
  font-family:Arial, Helvetica, sans-serif;
	font-size:0.70em;
	font-weight:300;
	text-align:justify;
	letter-spacing:4px;
	color:#000;
	margin-left:3px;
  opacity:0;
  animation-name:fadeIn;
  animation-delay:200ms;
  animation-duration:100ms;
  animation-fill-mode:forwards;
}
#footer {  /* < put this in the "about" screen */
  position:relative;
  top:10px;
  width:100%;
  height:80px;
  padding:10px 0 15px 0;
  display:block;
}
#footer > img {
  height:58%;
  width:auto;
  display:block;
  margin:auto;
}
#footerContact {
  height:20px;
  padding:5px 0 10px 0;
  display:block;
  margin:auto;
}
.contact {
  font-family:Arial,Helvetica,sans-serif;
  font-size:1em;
  font-weight:300;
  letter-spacing:0px;
  text-align:center;
  color:rgba(0,0,0,1);
}
a.contact:link {color:rgba(0,0,0,1);text-decoration:none;letter-spacing:0.5px;}
a.contact:visited {color:rgba(0,0,0,1);text-decoration:none;letter-spacing:0.5px;}
a.contact:hover {color:#C30;text-decoration:none;letter-spacing:0.5px;}
a.contact:active {color:rgba(0,0,0,0.4);text-decoration:none;letter-spacing:0.5px;}
a.aboutLink:link {color:#9b0000;text-decoration:none;letter-spacing:0;}
a.aboutLink:visited {color:#9b0000;text-decoration:none;letter-spacing:0;}
a.aboutLink:hover {color:#C30;text-decoration:none;letter-spacing:0;}
a.aboutLink:active {color:#C30;text-decoration:none;letter-spacing:0;}
.menuTab {
  position:absolute;
  width:110px;
  height:29px;
  padding:2px 0 0 0;
  background:url(../images/tab1.gif);
  background-size:cover;
  text-align:center;
  z-index:10;
  box-shadow:1px 1px 1px #333;
}
.page2MenuTab {
  position:absolute;
  width:75px;
  height:24px;
  padding:2px 0 0 0;
  background:url(../images/tab1.gif);
  background-size:75px 24px;
  color:#000;
  font-size:0.88em;
  font-weight:normal;
  text-align:center;
  z-index:10;
  box-shadow:1px 1px 1px #333;
}
.submenu1 {
  position:absolute;
  text-align:center;
  font-size:0.8em;
  visibility:hidden;
}
.submenu2 {
  position:absolute;
  text-align:center;
  font-size:0.8em;
  visibility:hidden;
}
.leading {
  line-height:1.5em;
}
.hideMe {
  display:none;
}
.showMe {
  display:block;
}
.avoidWrap {
  display: inline-block;
}
.tabY {
  top:56px;
  left:calc(50% + 67px);
}
#bkgdLoader {
  visibility:hidden;
}
#report {
  position:absolute;
  top:150px;
  left:0;
  padding:5px;
  background:#ccc;
  font-size:0.8em;
  color:black;
  display:none;
}