/* Temp Dev Utilities */


/* Fonts */

@font-face{ /* Suisse Mono | Reg XL | Main Titles, H1 */
    font-family:suisseIntl;
    src: url("https://gregmccarthy92.github.io/artShippingTool/fonts/SuisseIntl-Regular-WebXL.woff") format('woff');
    font-weight: Bolder;
}

@font-face{ /* Suisse Mono | Reg S | Captions, Table & Nav */
    font-family:suisseIntl;
    src: url("https://gregmccarthy92.github.io/artShippingTool/fonts/SuisseIntl-Regular-WebM.woff") format('woff');
    font-weight: 100;
}


@font-face{ /* Suisse Mono | Reg | Body Headers */
    font-family:suisseMono;
    src: url("https://gregmccarthy92.github.io/artShippingTool/fonts/SuisseIntlMono-Regular-WebS.woff") format('woff');
    font-weight:100;
}

@font-face{ /* Suisse Mono | Bold | Body Headers */
    font-family:suisseMonoSemi;
    src: url("https://gregmccarthy92.github.io/artShippingTool/fonts/SuisseIntlCond-Regular-WebS.woff") format('woff');
    font-weight:500;
}

@font-face{ /* Suisse Mono | Bold | Body Headers */
    font-family:suisseMono;
    src: url("https://gregmccarthy92.github.io/artShippingTool/fonts/SuisseIntlMono-Bold-WebS.woff") format('woff');
    font-weight:300;
}

@font-face{ /* Suisse Mono | Thin |Body Copy */
    font-family:suisseMono;
    src: url("https://gregmccarthy92.github.io/artShippingTool/fonts/SuisseIntlMono-thin-WebS.woff") format('woff');
    font-weight:500;
}


/* Global Typography */

/* Nav */

button{
    /* background:blue; */
    width:20px;
    display:inline-block;
    border-radius:5px;
    height: 40px;
    stroke: 2px ;
    opacity: 0%;
}
#step1button{
    position: relative;
    left: -96px;
    top: -2px;
}
#step2button{
    position: relative;
    left: -100px;
    top: -2px;
}
#step3button{
    position: relative;
    left: -102px;
    top: -2px;
}
#step4button{
    position: relative;
    left: -106px;
    top: -2px;
}
#step5button{
    position: relative;
    left: -110px;
    top: -2px;
}
#step6button{
    position: relative;
    left: -113px;
    top: -2px;
}
#step7button{
    position: relative;
    left: -117px;
    top: -2px;
}
#step8button{
    position: relative;
    left: -120px;
    top: -2px;
}
#step9button{
    position: relative;
    left: -122px;
    top: -2px;
}


H1{                 /* Main Title */
    font-family: suisseIntl;
    color: rgb(0, 0, 0);
    font-weight: bolder;
    
}
#h1reg{
    text-align: center;
    letter-spacing: 10px;
    font-size: 30vh;
    line-height: calc(0.8 * 30vh);
    
}
#homeTitle{
    letter-spacing: 0px;
    font-size: 30vh;
    line-height: calc(0.8 * 30vh);
    z-index: -500;
    position: relative;
    text-align: center;
}



H3{                 /* Main Title */
    font-family: suisseIntl;
    color: rgb(255, 0, 0);
    font-weight: bolder;
    text-align: center;
    letter-spacing: 10px;
    font-size: 50px;
    line-height: 60pt;
    white-space: nowrap;
}


/* TEST!!!! */
#fragileScroll{
    position: relative;
    top:-500px;
    /* mix-blend-mode: multiply; */
    margin-bottom: -500px;
  
}


.homeTitleDiv{
    position:absolute;
    display: inline;
    top: -10%;
    left:50%;
    width: 80%;
    transform: translate(-50%);
}

#scrollText1 { /* https://blog.hubspot.com/website/scrolling-text-css */
    /* animation properties */
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    -moz-animation: my-animation 190s linear infinite;
    -webkit-animation: my-animation 190s linear infinite;
    animation: my-animation 190s linear infinite;
    letter-spacing: 0px;
    animation-delay: -1s;
    position: relative;
    top: -50px;
    rotate: 1deg;

}

#scrollText2 { /* https://blog.hubspot.com/website/scrolling-text-css */
    /* animation properties */
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    -moz-animation: my-animation 190s linear infinite;
    -webkit-animation: my-animation 190s linear infinite;
    animation: my-animation 190s linear infinite;
    letter-spacing: 0px;
    animation-delay: -1s;
    position: relative;
    top: -115px;
    rotate: -1deg;

}

#scrollText3 { /* https://blog.hubspot.com/website/scrolling-text-css */
    /* animation properties */
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    -moz-animation: my-animation 190s linear infinite;
    -webkit-animation: my-animation 190s linear infinite;
    animation: my-animation 190s linear infinite;
    letter-spacing: 0px;
    position: relative;
    top: -200px;
    rotate: -0.5deg;

    
}

#scrollText4 { /* https://blog.hubspot.com/website/scrolling-text-css */
    /* animation properties */
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    -moz-animation: my-animation 190s linear infinite;
    -webkit-animation: my-animation 190s linear infinite;
    animation: my-animation 190s linear infinite;
    letter-spacing: 0px;
    animation-delay: -4s;
    position: relative;
    top: -280px;
    rotate: 1deg;
    
}
  
  /* for Firefox */
  @-moz-keyframes my-animation {
    from { -moz-transform: translateX(50%); }
    to { -moz-transform: translateX(-500%); }
  }
  
  /* for Chrome */
  @-webkit-keyframes my-animation {
    from { -webkit-transform: translateX(50%); }
    to { -webkit-transform: translateX(-500%); }
  }
  
  @keyframes my-animation {
    from {
      -moz-transform: translateX(50%);
      -webkit-transform: translateX(-10%);
      transform: translateX(-10%);
    }
    to {
      -moz-transform: translateX(-500%);
      -webkit-transform: translateX(-500%);
      transform: translateX(-500%);
    }
  }

/* END OF TEST */





H2{                 /* Body Title */
    font-family: suisseMono;
    color: black;
    font-weight: 100;
    font-size: 20pt;
    line-height: 30pt;
}


.navType{           /* Nav Type */
    font-family: suisseIntl;
    color: rgb(255, 255, 255);
    font-weight: 500;
    font-size: 12pt;
    text-transform: uppercase;
    position: relative;
    left: 18px;
}

.stepsNavType{           /* Nav Type */
    font-family: suisseIntl;
    color: rgb(255, 255, 255);
    font-weight: 500;
    font-size: 12pt;
    text-transform: uppercase;
    display: inline-block;
    position: absolute;
    margin-top: 10px;
    left: 50%;
    transform: translate(-50%,0); 
}

.navTypeInv{           /* Nav Type */
    font-family: suisseIntl;
    color: rgb(0, 0, 0);
    font-weight: 500;
    font-size: 12pt;
    text-transform: uppercase;
    position: relative;
    top: 40px;
    left: 18px;
}

.bP{                /* Body Paragraph */
    font-family: suisseIntl;
    color: black;
    font-weight: 500;
    font-size: 16pt;
    width: 55ch;
    line-height: 28pt;
    letter-spacing: 0.5px;
}

.bPCentre{                /* Body Paragraph */
    font-family: suisseIntl;
    color: black;
    font-weight: 500;
    font-size: 16pt;
    width: 55ch;
    line-height: 28pt;
    letter-spacing: 0.5px;
    text-align: center;
}

.bPEmail{                /* Body Paragraph */
    font-family: suisseMono;
    color: black;
    font-weight: 300;
    font-size: 10pt;
    width: 55ch;
    line-height: 17.5pt;
    letter-spacing: 0.5px;
}



.bPIndent{          /* Body Paragraph Indent */
    font-family: suisseIntl;
    color: black;
    font-weight: 500;
    font-size: 16pt;
    width: 55ch;
    line-height: 28pt;
    letter-spacing: 0.5px;
    text-indent: 3ch;
}

.bPOL{              /* Body Paragraph Ordered List */
    font-family: suisseIntl;
    color: black;
    font-weight: 500;
    font-size: 16pt;
    width: 55ch;
    line-height: 26pt;
    letter-spacing: 2px;
}

.bPUL{              /* Body Paragraph Ordered List */
    font-family: suisseIntl;
    color: black;
    font-weight: 500;
    font-size: 16pt;
    width: 55ch;
    line-height: 40pt;
    letter-spacing: 2px;
    list-style-type: none;
}

.cap{               /* Captions */
    font-family: suisseIntl;
    color: rgb(0, 0, 0);
    font-weight: 100;
    line-height: 17.5pt;
    font-size: 10pt;
    max-width: 80vw;
    letter-spacing: 0.2ch;
}


a:link{ 
    color: #FF0000;
    text-decoration: none; 
}

a:visited{
    color: #fff200;
}
a:active{
    color: blue;
}

#footerLink{
    color: #000000;
}

#bodyLink{
    color: red;
}
#bodyLinkBlack{
    color:black;
}
#bodyLinkWhite{
    color:rgb(255, 255, 255);
}

/* Local Typography */

#step1Title{
    font-size: 12vh;
    line-height: calc(1.55 * 12vh); 
}

#step2Title{
    font-size: 10vh;
    line-height: calc(1.75 * 10vh); 
}

#step4Title{
    font-size: 10vh;
    line-height: calc(2.5 * 10vh); 
}

/* Backers */

#homeBacker{        /* Nav | Top | Home Button | Backer */
    position: relative;
    height: 40px;
    color: #000000;
}

#stepsBacker{       /* Nav | Top | Steps Button | Backer */
    position: relative;
    top: -40px;
    height: 40px;
    color: #000000;
}

.sideNavL {         /* Nav | Side | Container */
    position: sticky;
    top: 50%;
    margin-top: 500px;
    padding-left: 30px;
    width: 100px;
    height: 40px;
}


.sideNavR {         /* Nav | Side | Container */
    position: sticky;
    top: 50%;
    margin-top: -40px;
    margin-right: 40px;
    left: calc(100vw);
    width: 40px;
    height: 40px;
}

.sideNavCircle1 {   /* Nav | Side |  */
    position: absolute;
    top: 50%;
    height: 40px;
    width: 40px;
    background-color: #000000;
    border-radius: 50%;
}

.sideNavCircle1:hover {   /* Nav | Side |  */
    position: absolute;
    top: 50%;
    height: 40px;
    width: 40px;
    background-color: #5e5e5e;
    border-radius: 50%;
}


.sideNavCircle2 {   /* Nav | Side |  */
    position: absolute;
    top: 50%;
    left: calc(100%);
    height: 40px;
    width: 40px;
    background-color: #000000;
    border-radius: 50%;
}


.sideNavCircle2:hover {   /* Nav | Side |  */
    position: absolute;
    top: 50%;
    left: calc(100%);
    height: 40px;
    width: 40px;
    background-color: #5e5e5e;
    border-radius: 50%;
}

.stepsNavCircle {   /* Nav | Side |  */
    height: 40px;
    width: 40px;
    background-color: #000000;
    border-radius: 50%;
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);   
}
.stepsNavCircleCurrent {   /* Nav | Side |  */
    height: 40px;
    width: 40px;
    background-color: #5e5e5e;
    border-radius: 50%;
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);   
}
.stepsNavCircleCurrent:hover {   /* Nav | Side |  */
    height: 40px;
    width: 40px;
    background-color: #3e3e3e;
    border-radius: 50%;
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);   
}

.stepsNavCircle:hover {   /* Nav | Side |  */
    height: 40px;
    width: 40px;
    background-color: #5e5e5e;
    border-radius: 50%;
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);   
}


.stepButtonContainer{
    position: relative;
    padding: 18px;
    display: inline-block;
}


/* Containers */

body {
    background-color: rgb(228, 228, 228);
    overflow-x: hidden; /* Hide horizontal scrollbar */
    margin-right: 40px;
}

/* Nav */

.navBar{            /* Nav | Top | Container */
    position: sticky;
    top: 20px;
    width: 100vw;
    margin-top: 40vh;
    z-index: 10;
}

.navBuffer {        /* Nav | Top | Container for sticky*/
    width: 50vw;
    height: 50vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
}

.navBufferHomePage {        /* Nav | Top | Container for sticky*/
    width: 50vw;
    height: 75vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
}

/* Home Button */

.homeButton {       /* Nav | Top | Home Button | Container */
    position: relative;
    top: 1px;
    padding-left: 30px;
}

.homeButtonType{    /* Nav | Top | Home Button | Type | Container */
    position: relative;
    left:-4px;
    Top: -15px;
    width: 206px;;

}

/* Steps Button */

.stepsNav {         /* Nav | Top | Steps Button | Container */
    position: absolute;
    top: 0px;
    right: 40px;
    padding-top: 20px;
    padding-right: -40px;
    margin-right: 20px;
    height: 40px;

}

.stepsButtonType{   /* Nav | Top | Steps Button | Type | Container */
    position: relative;
    top:-109px;
}

#stepsButtonTopLinks{
    position: relative;
    display: inline-block;
    left: 43px;
    top: -63px;
}

#step1type{         /* Nav | Top | Steps Button | Type | invdidual Number Container */
    position: relative;
    left: 30px;
}

#step1typeCurrent{  /* Nav | Top | Steps Button | Type | invdidual Number Container */
    position: relative;
    left: 30px;
    color:#ed1c24;
}

#step1typePast{     /* Nav | Top | Steps Button | Type | invdidual Number Container */
    position: relative;
    left: 30px;
    opacity: 60%;
}

#step2type{         /* Nav | Top | Steps Button | Type | invdidual Number Container */
    position: relative;
    left: 39px ;
}

#step2typeCurrent{  /* Nav | Top | Steps Button | Type | invdidual Number Container | current */
    position: relative;
    left: 39px ;
    color:red;
}

#step2typePast{     /* Nav | Top | Steps Button | Type | invdidual Number Container */
    position: relative;
    left: 39px ;
    opacity: 60%;
}

#step3type{         /* Nav | Top | Steps Button | Type | invdidual Number Container */
    position: relative;
    left:46px ;
}

#step3typePast{         /* Nav | Top | Steps Button | Type | invdidual Number Container */
    position: relative;
    left:46px ;
    opacity: 60%;
}

#step3typeCurrent{         /* Nav | Top | Steps Button | Type | invdidual Number Container */
    position: relative;
    left:46px ;
    color: rgb(255, 0, 0);
}

#step4type{         /* Nav | Top | Steps Button | Type | invdidual Number Container */
    position: relative;
    left:52px ;
}

#step4typePast{         /* Nav | Top | Steps Button | Type | invdidual Number Container */
    position: relative;
    left:52px ;
    opacity: 60%;
}

#step4typeCurrent{         /* Nav | Top | Steps Button | Type | invdidual Number Container */
    position: relative;
    left:52px ;
    color: red;
}

#step5type{         /* Nav | Top | Steps Button | Type | invdidual Number Container */
    position: relative;
    left:58px ;
}

#step5typePast{         /* Nav | Top | Steps Button | Type | invdidual Number Container */
    position: relative;
    left:58px ;
    opacity: 60%;
}

#step5typeCurrent{         /* Nav | Top | Steps Button | Type | invdidual Number Container */
    position: relative;
    left:58px ;
    color: #FF0000;
}

#step6type{         /* Nav | Top | Steps Button | Type | invdidual Number Container */
    position: relative;
    left:65px ;
}

#step6typePast{         /* Nav | Top | Steps Button | Type | invdidual Number Container */
    position: relative;
    left:65px ;
    opacity: 60%;
}

#step6typeCurrent{         /* Nav | Top | Steps Button | Type | invdidual Number Container */
    position: relative;
    left:65px ;
    color: red;
}

#step7type{         /* Nav | Top | Steps Button | Type | invdidual Number Container */
    position: relative;
    left:73px ;
}

#step7typePast{         /* Nav | Top | Steps Button | Type | invdidual Number Container */
    position: relative;
    left:73px ;
    opacity: 60%;
}

#step7typeCurrent{         /* Nav | Top | Steps Button | Type | invdidual Number Container */
    position: relative;
    left:73px ;
    color: red;
}

#step8type{         /* Nav | Top | Steps Button | Type | invdidual Number Container */
    position: relative;
    left:80px ;
}

#step8typeCurrent{         /* Nav | Top | Steps Button | Type | invdidual Number Container */
    position: relative;
    left:80px ;
    color: red;
}

#step8typePast{         /* Nav | Top | Steps Button | Type | invdidual Number Container */
    position: relative;
    left:80px ;
    opacity: 60%;
}

#step9type{         /* Nav | Top | Steps Button | Type | invdidual Number Container */
    position: relative;
    left:87px ;
}

#step9typeCurrent{         /* Nav | Top | Steps Button | Type | invdidual Number Container */
    position: relative;
    left:87px ;
    color: red;
}

#step9typePast{         /* Nav | Top | Steps Button | Type | invdidual Number Container */
    position: relative;
    left:87px ;
    opacity: 60%;
}



#leftNavType{       /* Nav | Side | Type | Container */
    font-family: suisseIntl;
    color: rgb(255, 255, 255);
    font-weight: 500;
    font-size: 12pt;
    display: inline-block;
    position: absolute;
    margin-top: 8px;
    left:calc(50%);
    transform: translate(-50%,0);                 
}

#rightNavType{      /* Nav | Side | Type | Container */
    font-family: suisseIntl;
    color: rgb(255, 255, 255);
    font-weight: 500;
    font-size: 12pt;
    display: inline-block;
    position: absolute;
    margin-top: 8px;
    left:calc(50%);
    transform: translate(-50%,0);                 
}

/* Main Title */

.mainTitle {        /* Main Title | Type | Container */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 80vw;
    margin-right: -50%; 
}

.heroImage {        /* Main Title | Image | Container */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -100; 
    margin-right: -50%;
}


#h2Test{
    position: relative;
    left: -10px;
    background-color: yellow;
    margin: 0px;
    padding: 10px;
    padding-left: 10px;
    padding-right: 1ch;
    border-radius: 20px;
}

#h2TestWhite{
    position: relative;
    left: -10px;
    background-color: rgb(255, 255, 255);
    margin: 0px;
    padding: 10px;
    padding-left: 10px;
    padding-right: 1ch;
    border-radius: 20px;
}

#h2TestWhite:hover{
    position: relative;
    left: -10px;
    background-color: rgb(0, 0, 0);
    color: #ffffff;
    margin: 0px;
    padding: 10px;
    padding-left: 10px;
    padding-right: 1ch;
    border-radius: 20px;
    text-decoration: underline color(red
    );
}

#h2TableHeader{
    position: relative;
    left: -10px;
    background-color: rgb(0, 0, 0);
    margin-top: 30px;
    padding: 10px;
    padding-left: 10px;
    padding-right: 1ch;
    border-radius: 20px;
    text-align: center;
    color: #ffffff;
}

#tableAfter{
    position: relative;
    margin-top: -40px;
}

#homeButtonMark{
    position: relative;
    left: -10px;
    background-color: #000000;
    color: #ffffff;
    margin: 0px;
    padding: 10px;
    padding-left: 10px;
    padding-right: 1ch;
    border-radius: 20px;
}

#homeButtonMark:hover{
    position: relative;
    left: -10px;
    background-color: #5e5e5e;
    color: #ffffff;
    margin: 0px;
    padding: 10px;
    padding-left: 10px;
    padding-right: 1ch;
    border-radius: 20px;
}

#stepsButtonMark{
    background-color: #000000;
    color: #ffffff;
}


#tapeMark{
    position: relative;
    left: -10px;
    background-color: #ffffff;
    color: #ff0000;
    margin: 0px;
    padding: 0px;
    padding-left: 10px;
    padding-right: 1ch;
    border-radius: 20px;
    opacity: 80%;
}




#introStep {        /* Main Title | Intro Step | Container */
    position: absolute;
    top: 40px;
    left:calc(50% - 20px);
    transform: translate(-50%);
    height: 40px;
    margin-right: -50%;
}

.introStepBacker {
    position: absolute;
    top: 40px;
    left:calc(50% - 2px);
    transform: translate(-50%);
    height: 40px;
    width: 100px;
    background-color:#000000;
    border-radius: 50%;
}


.subtitleBacker {
    position: absolute;
    top: 20px;
    left:calc(50% - 2px);
    transform: translate(-50%);
    height: 40px;
    width: 440px;
    background-color:#ffffff;
    border-radius: 20px;
    z-index: -1;
}

.titleBacker {
    position: absolute;
    top: 20px;
    left:calc(50% - 2px);
    transform: translate(-50%);
    height: 40px;
    width: 440px;
    background-color:#ffffff;
    border-radius: 20px;
    z-index: -1;
}





#homePageSubtitle {        /* Main Title | subtitle| Container */
    position: absolute;
    top: calc(85vh);
    left: 50%;
    transform: translate(-50%);
    height: 40px;
    margin-right: -50%;
  
}

.introStepType{     /* Main Title | Intro Step | Type | Container */
    position: absolute;
    top: 24px;
    left:calc(50% - 20px);
    margin-right: -50%;
    transform: translate(-50%);
  
}

/* Body */

.firstBodyContent {      /* Body | Container | Includes adj for Hero Section */
   
    margin-left: 10vw;
    margin-right: 10vw;
    padding-left: 40px;
    padding-right: 40px;
}

.firstRule {      
    margin-top: -40vh;
    margin-left: -10vw;
    width: 120vw;
}
.firstRuleAfterScroll {      
    margin-top: calc(-40vh - 450px);
    margin-left: -10vw;
    width: 120vw;
}

.fullBleedRule {      
    margin-left: -10vw;
    width: 120vw;
}

.bodyContent {      /* Body | Container */
    margin-left: 10vw;
    margin-right: calc(10vw - 20px);
    padding-left: 40px;
   
}

.bodyContentEmail {      /* Body | Container */
    margin-left: calc(30vw - 25.5ch + 20px);
    margin-top: 12.75ch;
    margin-bottom: 25.5ch;
}

.tableTitleContainer{
    margin-left: 10vw;
    margin-right: 10vw;
    padding-left: 40px;
    padding-right: 40px;
}

.tableContainer{
    margin-top: 80px;
    margin-left: 10vw;
    margin-right: 5vw;
    margin-bottom: 80px;
    padding-left: 20px;
    padding-right: 40px;
    max-width: 100%;
}
.footerTableContainer{
    margin-top: 10px;
    margin-left: 10vw;
    margin-right: 5vw;
    margin-bottom: 40px;
    padding-left: 20px;
    padding-right: 20px;
    max-width: 80%;
}

.footer{
    margin-top: 40px;
    margin-left: 0vw;
    margin-right: 5vw;
    margin-bottom: 60px;
    padding-left: 20px;
    padding-right: 20px;
    max-width: 100%;
}

th, td {            /* Body | Table | container */
    padding: 15px;
  }

.tableHeader{       /* Body | Table | Type | Header */
    font-family: suisseIntl;
    color: rgb(0, 0, 0);
    font-weight: 100;
    line-height: 13pt;
    font-size: 10pt;
    max-width: 80vw;
    letter-spacing: 0.2ch;
    text-align: left;
    vertical-align: top;
}

.footerTableHeader{       /* Body | Table | Type | Header */
    font-family: suisseMonoSemi;
    color: rgb(0, 0, 0);
    font-weight: 500;
    line-height: 18pt;
    font-size: 10pt;
    max-width: 80vw;
    letter-spacing: 0.2ch;
    text-align: left;
    vertical-align: top;
}

tr{                 /* Body | Table | Type | Body Copy */
    font-family: suisseIntl;
    color: rgb(0, 0, 0);
    font-weight: 100;
    line-height: 13pt;
    font-size: 10pt;
    max-width: 80vw;
    letter-spacing: 0.2ch;
    text-align: left;
    vertical-align: top;
}

.tableCaption{      /* Body | Table | Type | Caption */
    font-family: suisseintl;
    color: rgb(0, 0, 0);
    font-weight: 100;
    line-height: 11pt;
    font-size: 8pt;
    max-width: 80vw;
    letter-spacing: 0.2ch;
    text-align: left;
    vertical-align: top;
}

.tableCaptionOl{    /* Body | Table | Type | Caption List */
    font-family: suisseintl;
    color: rgb(0, 0, 0);
    font-weight: 100;
    line-height: 11pt;
    font-size: 8pt;
    max-width: 80vw;
    letter-spacing: 0.2ch;
    text-align: left;
    vertical-align: top;
}

/* Images */

#redArrowSticker{
    height: 150vh;
    rotate: 4deg;
    opacity: 100;

}

#highClaim{
    height: 80vh;
    rotate: -4deg;
    opacity: 100;

}

#keepDry{
    height: 120vh;
    rotate: 7deg;
    opacity: 100;
}

#doNotDoubleStack{
    height: 120vh;
    rotate: -7deg;
    opacity: 100;
}

#fragileStack{
    height: 120vh;
    rotate: -6deg;
    opacity: 100;
}

#fourUp{
    height: 120vh;
    rotate: 3deg;
    opacity: 100;
}

#stopFragile{
    height: 150vh;
    rotate: -6deg;
    opacity: 100;
}

#fragileGoodType{
    height: 150vh;
    rotate: -3deg;
    opacity: 100;
}

.inlineImage{
    margin-top: 40px;
    width: calc(80vw - 110px);
    border-radius: 10px;
    mix-blend-mode: multiply;
    margin-bottom: 20px;
}

/* Video */
.youtube{
    width: 103%;
    height: 70vh;
    margin-top: 40px;
    /* https://stackoverflow.com/questions/41142232/cross-browser-embedded-video-grayscale-filter */
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
}

/* Utilities */
.negKern15{
    letter-spacing: -15px; 
}
.negKern12{
    letter-spacing: -12px; 
}
.negKern11{
    letter-spacing: -11px; 
}
.negKern10{
    letter-spacing: -10px; 
}
.negKern9{
    letter-spacing: calc(0.025 * -25vh); 
}
.negKern7{
    letter-spacing: -8px; 
}
.negKern7{
    letter-spacing: -7px; 
}
.negKern6{
    letter-spacing: -6px; 
}
.negKern5{
    letter-spacing: -5px; 
}
.negKern4{
    letter-spacing: -4px; 
}
.negKern3{
    letter-spacing: -3px; 
}
.negKern2{
    letter-spacing: -2px; 
}
.negKern1{
    letter-spacing: -1px; 
}
.posKern1{
    letter-spacing: 1px; 
}
.posKern2{
    letter-spacing: 2px; 
}
.posKern3{
    letter-spacing: 3px; 
}
.posKern5{
    letter-spacing: 5px; 
}
.posKern10{
    letter-spacing: 5px; 
}