/*             */
/* - General - */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.wrapper {
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
}

/*                          */
/* - Main Content Styles -  */
/*                          */
.footer {
    background-color: #b3b3b369;
    height: 6vh; 
    position: fixed; 
    bottom:0px; 
    z-index:1000;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    display: block;
    width: 100%;
}

.footer2 {
    background-color: #b3b3b300;
    position: fixed; 
    bottom:1vh; 
    z-index:1000;
    display: block;
    width: 100%;
}

section {
    display: block;
}

div {
    margin: 0;
    padding: 0px 0px 0px 0px;
}

.banner {
    width: 100%;
}

.row {
    padding: 0px 0px 0px 0px;
}

.content {
    padding: 0px 15px 0px 15px;
}

*.unselectable {
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
 
    -ms-user-select: none;
    user-select: none;
 }
.headerMain {
    background-color: #c9c9c9;
    height: 6vh; 
    position: fixed; 
    top:0px; 
    z-index:1000;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    display: block;
}
.show {
    display: block;
}

body {
    width: 100%;
    min-height: 100vh;
    background-color: rgb(128, 81, 69);  /* Initial Design */
    background-color: rgb(63, 102, 53); /* Purple -> Blue -> Green */
    background-color: rgb(63, 74, 75); /* Purple -> Cyan -> Gray */
    background-color: #b3b3b3;
}

/*                      */
/* - Section Styles -   */
/*                      */
#bio {
    padding-top: 0;
    min-height: 59vh;
    background-color: rgb(66, 65, 112); /* Initial Design */
    background-color: rgb(61, 69, 114); /* Purple -> Blue -> Green */
    background-color: rgb(60, 50, 80); /* Purple -> Cyan -> Gray */
}

#education {
    padding-top:  0;
    background-color: rgb(64, 87, 114); /* Initial Design */
    background-color: rgb(61, 84, 114); /* Purple -> Blue -> Green */
    background-color: rgb(57, 62, 96); /* Purple -> Cyan -> Gray */
}

#experience {
    padding-top:  0;
    background-color: #3d5e4b; /* Initial Design */
    background-color: rgb(61, 103, 116); /* Purple -> Blue -> Green */
    background-color: rgb(53, 73, 105); /* Purple -> Cyan -> Gray */
}

#projects {
    padding-top:  0;
    background-color: #405735; /* Initial Design */
    background-color: rgb(57, 107, 103); /* Purple -> Blue -> Green */
    background-color: rgb(38, 81, 99); /* Purple -> Cyan -> Gray */
}

#leadership {
    padding-top:  0vh;
    background-color: rgb(107, 94, 49); /* Initial Design */
    background-color: rgb(51, 100, 67); /* Purple -> Blue -> Green */
    background-color: rgb(41, 92, 88); /* Purple -> Cyan -> Gray */
}

#etc {
    min-height: 100vh;
    padding-top:  0vh;
    background-color: rgb(107, 65, 54); /* Initial Design */
    background-color: rgb(56 88 48); /* Purple -> Blue -> Green */
    background-color: rgb(63, 74, 75); /* Purple -> Cyan -> Gray */
}

#bio_full {
    padding-top: 0vh;
    background-color: rgb(66, 65, 112); /* Initial Design */
    background-color: rgb(61, 69, 114); /* Purple -> Blue -> Green */
    background-color: rgb(60, 50, 80); /* Purple -> Cyan -> Gray */
}

#education_full {
    padding-top: 0vh;
    background-color: rgb(64, 87, 114); /* Initial Design */
    background-color: rgb(61, 84, 114); /* Purple -> Blue -> Green */
    background-color: rgb(57, 62, 96); /* Purple -> Cyan -> Gray */
}

#experience_full {
    padding-top: 0vh;
    background-color: #3d5e4b; /* Initial Design */
    background-color: rgb(61, 103, 116); /* Purple -> Blue -> Green */
    background-color: rgb(53, 73, 105); /* Purple -> Cyan -> Gray */
}

#projects_full {
    padding-top: 0vh;
    background-color: #405735; /* Initial Design */
    background-color: rgb(57, 107, 103); /* Purple -> Blue -> Green */
    background-color: rgb(38, 81, 99); /* Purple -> Cyan -> Gray */
}

#leadership_full {
    padding-top: 0vh;
    background-color: rgb(107, 94, 49); /* Initial Design */
    background-color: rgb(51, 100, 67); /* Purple -> Blue -> Green */
    background-color: rgb(41, 92, 88); /* Purple -> Cyan -> Gray */
}

#etc_full {
    padding-top: 0vh;
    background-color: rgb(107, 65, 54); /* Initial Design */
    background-color: rgb(56 88 48); /* Purple -> Blue -> Green */
    background-color: rgb(63, 74, 75); /* Purple -> Cyan -> Gray */
}

#art1 {
    padding-top: 250px;
    padding-bottom: 100px;
    background-color: rgb(87, 69, 117);
}

.mainSection {
    /*padding-top: 5vw;*/
    padding-bottom: 12.5vw;
    box-shadow: 0 0px 80px 0 rgba(0, 0, 0, 0.3), 0 0px 20px 0 rgba(0, 0, 0, 0.29);
}

/*                  */
/* - Hover Styles - */
/*                  */
.collapsible {
    color: rgb(26, 26, 26) !important;
}
.collapsible:hover {
    color: rgb(82, 39, 39) !important;
}

/*                 */
/* - Skill Box Styles - */
/*                 */
.skillBox {
    background-color: rgb(173, 173, 173); 
    color: rgb(71, 71, 71); 
    border-radius: 0.55vw; 
    padding: 0.1vw 0.55vw; 
    font-weight: bold;
    box-shadow: 2px 3px 4px 0 rgba(0, 0, 0, 0.2), 2px 3px 2px 0 rgba(0, 0, 0, 0.19);
}

.skillBoxiOS {
    background-color: rgb(41, 41, 41); 
    color: rgb(169, 169, 169); 
    border-radius: 5px; 
    padding: 1vh 1vw; 
    font-weight: bold;
    box-shadow: 2px 3px 4px 0 rgba(0, 0, 0, 0.2), 2px 3px 2px 0 rgba(0, 0, 0, 0.19);
}

/*                 */
/* - Logo Styles - */
/*                 */
.logoImg {
    box-shadow: 2px 3px 6px 0 rgba(0, 0, 0, 0.2), 2px 3px 5px 0 rgba(0, 0, 0, 0.19);
}

/*                 */
/* - Text Styles - */
/*                 */
.clickable-light {
    text-decoration: none;
    color: rgb(209, 209, 209);
    cursor: pointer;
    background-color: none;
}

.clickable-light:hover {
    text-decoration:none;
    color: rgb(168, 168, 168);
    cursor: pointer;
    background-color: rgb(83, 83, 83);
}
.clickable-dark {
    text-decoration: none;
    color: rgb(32, 32, 32);
    cursor: pointer;
}

.clickable-dark:hover {
    text-decoration:none;
    color: rgb(165, 192, 218);
    cursor: pointer;
}

.indiv-biography {
    color: #cfcfcf;
    background-color: none;
}

.indiv-biography:hover {
    color: rgb(64, 59, 86);
    background-color: #cfcfcf;
    font-weight: bold;
}

.indiv-education {
    color: #cfcfcf;
    background-color: none;
}

.indiv-education:hover {
    color: rgb(61, 66, 98);;
    background-color: #cfcfcf;
    font-weight: bold;
}

.indiv-experience {
    color: #cfcfcf;
    background-color: none;
}

.indiv-experience:hover {
    color: rgb(59, 74, 102);
    background-color: #cfcfcf;
    font-weight: bold;
}

.indiv-projects {
    color: #cfcfcf;
    background-color: none;
}

.indiv-projects:hover {
    color: rgb(52, 75, 94);
    background-color: #cfcfcf;
    font-weight: bold;
}

.indiv-leadership {
    color: #cfcfcf;
    background-color: none;
}

.indiv-leadership:hover {
    color: rgb(50, 77, 90);
    background-color: #cfcfcf;
    font-weight: bold;
}

.indiv-etc {
    color: #cfcfcf;
    background-color: none;
}

.indiv-etc:hover {
    color: rgb(63, 74, 75);
    background-color: #cfcfcf;
    font-weight: bold;
}

.headerText {
    font-size: 60px;
    color: #c9c9c9;
    font-family: Arial, Helvetica, sans-serif;
}
.bodyText {
    font-size: 40px;
    color: #b3b3b3;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.bodyTextSm {
    font-size: 28px;
    color: #cfcfcf;
    font-family: Arial, Helvetica, sans-serif;
}
.bodyTextMono {
    font-size: 40px;
    color: #b3b3b3;
    font-family: 'Red Hat Mono', monospace;
}
.bodyTextMonoSm {
    font-size: 28px;
    color: #cfcfcf;
    font-family: 'Red Hat Mono', monospace;
}
.tRight {
    text-align: right;
}
.tLeft {
    text-align: left;
}
.tBold {
    font-weight: bold;
}
.tMed {
    font-weight: lighter;
}
.tLight {
    font-weight: 100;
}

.imgBlockHeight {
    display: block;
    height: 100%;
    width: auto;
}
.imgBlockWidth {
    display: block;
    height: auto;
    width: 100%;
}
.imgFitMid {
    display: block;
    height: 100%;
}

.spacer-xs {
    height: 25px; 
}
.spacer-sm {
    height: 50px; 
}
.spacer-md {
    height: 75px; 
}
.spacer-lg {
    height: 100px; 
}
.spacer-xl {
    height: 125px;
}
.spacer-xxl {
    height: 150px;
}

.sqr-3 {
    width: 25%;
    position: relative;
    float: left;
}

.sqr-3:after {
    padding-bottom: 100%;
}

.col-05, .col-1, .col-15, .col-2, .col-25, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-65 {
    position: relative;
    min-height: 1px;
    float: left;
}
.col-05 {
    width: 4.166666666%;
}
.col-1 {
    width: 8.333333333%;
}
.col-15 {
    width: 12.5%;
}
.col-2 {
    width: 16.666666666%;
}
.col-25 {
    width: 20.833333333%;
}
.col-3 {
    width: 25%;
}
.col-4 {
    width: 33.333333333%;
}
.col-5 {
    width: 41.666666666%;
}
.col-6 {
    width: 50%;
}
.col-65 {
    width: 54.166666666%;
}
.col-7 {
    width: 58.333333333%;
}
.col-8 {
    width: 66.666666666%;
}
.col-9 {
    width: 75%;
}
.col-10 {
    width: 83.333333333%;
}
.col-11 {
    width: 91.666666666%;
}
.col-12 {
    width: 100%;
}

.push-05 {
    left: 4.166666666%
}
.push-1 {
    left: 8.333333333%
}
.push-15 {
    left: 12.5%
}
.push-2 {
    left: 16.666666666%;
}
.push-25 {
    left: 20.833333333%;
}
.push-3 {
    left: 25%;
}
.push-4 {
    left: 33.333333333%;
}
.push-5 {
    left: 41.666666666%;
}
.push-55 {
    left: 45.833333333%;
}
.push-6 {
    left: 50%;
}
.push-7 {
    left: 58.333333333%;
}
.push-8 {
    left: 66.666666666%;
}
.push-9 {
    left: 75%;
}
.push-10 {
    left: 83.333333333%;
}
.push-11 {
    left: 91.666666666%;
}
.push-12 {
    left: 100%;
}

.pull-05 {
    left: -4.166666666%
}
.pull-1 {
    left: -8.333333333%
}
.pull-2 {
    left: -16.666666666%;
}
.pull-3 {
    left: -25%;
}
.pull-4 {
    left: -33.333333333%;
}
.pull-5 {
    left: -41.666666666%;
}
.pull-6 {
    left: -50%;
}
.pull-7 {
    left: -58.333333333%;
}
.pull-8 {
    left: -66.666666666%;
}
.pull-9 {
    left: -75%;
}
.pull-10 {
    left: -83.333333333%;
}
.pull-11 {
    left: -91.666666666%;
}
.pull-12 {
    left: -100%;
}


/*                 */
/* - App Catalog - */
/*                 */

.appCard {
    width: 200px; 
    height: -webkit-fit-content; 
    margin: 0 40px 30px 0;
    background-color: rgb(61, 61, 61); 
    border-radius: 20px;
    font-size: 40px;
    color: #e3e3e3;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    transition: 0.32s;
    padding: 0;
}

.appCard:hover {
    width: 350px;
    margin: 0 40px 30px 0px;
    border-radius: 15px;
    color: #ffffff;
    cursor: pointer;
}

.appCardIcon {
    width: 100%;
    overflow: hidden;
    position: absolute; 
    z-index: 1; 
    border-radius: 15px; 
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0))); 
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
}

.appCardTitle {
    z-index: 3; 
    position: relative; 
    margin: 210px 20px 0 20px; 
    font-weight: bold; 
    font-size: 40px; 
    width: 260px;
}

.appCardDescription {
    z-index: 3; 
    position: relative; 
    font-weight: 400; 
    font-size: 20px; 
    margin: 5px 20px 20px 20px; 
    width: 160px;
}

/*                 */
/* - GREEN THUMB - */
/*                 */

.innerTile {
    transition: 0.15s;
    height: 90%; 
    width: 90%; 
    z-index: 3;
    margin: 5%;
    border-radius: 4px;
    box-shadow: 1px 1px 5px 5px rgba(0,0,0,0.1);
    -webkit-box-shadow: 1px 1px 5px 5px rgba(0,0,0,0.1);
    -moz-box-shadow: 1px 1px 5px 5px rgba(0,0,0,0.1);
}

.innerTile:hover {
    width: 106%;
    height: 106%;
    z-index: 4;
    margin: -3%;
    border-radius: 7px;
    background-color: #3d5e4b;
    box-shadow: 1px 10px 50px 5px rgba(0,0,0,0.5);
    -webkit-box-shadow: 1px 10px 50px 5px rgba(0,0,0,0.5);
    -moz-box-shadow: 1px 10px 50px 5px rgba(0,0,0,0.5);
}

.tileImage {
    width: 100%;
    margin: 0%;
    overflow: hidden;
    position: absolute; 
}

/*                */
/* - Animations - */
/*                */

.mySlides {
    display: none;
}

.animInit-0, .animInit-1 {
    opacity: 0;
}
.animInit-0.slideToLeft {
    animation: slideToPos 1s ease forwards;
    transform: translate(150px, 0);
}   
.animInit-0.slideToRight {
    animation: slideToPos 1s ease forwards;
    transform: translate(-150px, 0);
}
.animInit-1.slideToLeft {
    animation: slideToPos 1s 1s ease forwards;
    transform: translate(150px, 0);
}   
.animInit-1.slideToRight {
    animation: slideToPos 1s 1s ease forwards;
    transform: translate(-150px, 0);
} 
@keyframes slideToPos {
    to {
        transform: translate(0px, 0);
        opacity: 1;
    }
}
@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

button.slideButton {
    border: none;
    background-color: rgba(255, 255, 255, 0.15);
}

/* Dropdown Shit */
/* Dropdown Content (Hidden by Default) */
.drpdwnContent {
    display: none;
    position: absolute;
    background-color: #b3b3b3;
    margin-top: -5px;
    padding: 0.15vw 0.3vw;
    border-radius: 0 0 0.3vw 0.3vw;
    z-index: 1;
    font-size: 1.35vw !important;
    color: rgb(36, 36, 36); 
    min-width: 10vw; 
    text-align: center;
    transform: translate(-40%, 0);
  }

.drpdwnButt:hover .drpdwnContent {display: block;}



/*  Regular Computer & Tablet   */
@media only screen and (min-device-width: 415px) {

    #mainLogo {
        visibility: visible;
        position: absolute;
        top: 0px;
    }

    #mainLogo path:nth-child(1):hover {
        stroke-dasharray: 1096px;
        stroke-dashoffset: 1096px;
        animation: logoFill 4s ease forwards;
        animation-iteration-count: 1;
        fill: rgb(31, 59, 83); 
        fill-opacity: 50%; 
    }
    @keyframes logoFill {
        to { stroke-dashoffset: 0; fill-opacity: 0; }
    }
    @keyframes logoEmpty {
        to { stroke-dashoffset: 1096px; fill-opacity: 50%; }
    }
    
    #mainLogo path:nth-child(1) {
        stroke-dasharray: 1096px;
        stroke-dashoffset: 1096px;
        animation: logoEmpty 8s ease forwards;
        animation-iteration-count: infinite;
        fill: rgb(31, 59, 83); 
        fill-opacity: 50%; 
    }
    @keyframes logoLineAnim1 {
        5% { fill-opacity: 50%; }
        50% { stroke-dashoffset: 0; fill-opacity: 0; }
        65% {fill-opacity: 0%; }
        100% { stroke-dashoffset: 1096px; fill-opacity: 50%; }
    }
    #mainLogo path:nth-child(2) {
        stroke-dasharray: 586.4px;
        stroke-dashoffset: 586.4px;
        animation: logoLineAnim2 8s ease forwards;
        animation-iteration-count: infinite;
        fill: white; 
        fill-opacity: 100%; 
    }
    @keyframes logoLineAnim2 {
        5% { fill-opacity: 100%; }
        50% { stroke-dashoffset: 0; fill-opacity: 0; }
        65% {fill-opacity: 0%; }
        100% { stroke-dashoffset: 586.4px; fill-opacity: 100%; }
    }
    #mainLogo path:nth-child(3) {
        stroke-dasharray: 514.1px;
        stroke-dashoffset: 514.1px;
        animation: logoLineAnim3 8s ease forwards;
        animation-iteration-count: infinite;
        fill: white; 
        fill-opacity: 100%; 
    }
    @keyframes logoLineAnim3 {
        5% { fill-opacity: 100%; }
        50% { stroke-dashoffset: 0; fill-opacity: 0; }
        65% {fill-opacity: 0%; }
        100% { stroke-dashoffset: 514.1px; fill-opacity: 100%; }
    }
    #mainLogo path:nth-child(4) {
        stroke-dasharray: 657.4px;
        stroke-dashoffset: 657.4px;
        animation: logoLineAnim4 8s ease forwards;
        animation-iteration-count: infinite;
        fill: white; 
        fill-opacity: 100%; 
    }
    @keyframes logoLineAnim4 {
        5% { fill-opacity: 100%; }
        50% { stroke-dashoffset: 0; fill-opacity: 0; }
        65% {fill-opacity: 0%; }
        100% { stroke-dashoffset: 657.4px; fill-opacity: 100%; }
    }
    #mainLogo path:nth-child(5) {
        stroke-dasharray: 510.7px;
        stroke-dashoffset: 510.7px;
        animation: logoLineAnim5 8s ease forwards;
        animation-iteration-count: infinite;
        fill: white; 
        fill-opacity: 100%; 
    }
    @keyframes logoLineAnim5 {
        5% { fill-opacity: 100%; }
        50% { stroke-dashoffset: 0; fill-opacity: 0; }
        65% {fill-opacity: 0%; }
        100% { stroke-dashoffset: 510.7px; fill-opacity: 100%; }
    }
    #mainLogo path:nth-child(6) {
        stroke-dasharray: 643px;
        stroke-dashoffset: 643px;
        animation: logoLineAnim6 8s ease forwards;
        animation-iteration-count: infinite;
        fill: white; 
        fill-opacity: 100%; 
    }
    @keyframes logoLineAnim6 {
        5% { fill-opacity: 100%; }
        50% { stroke-dashoffset: 0; fill-opacity: 0; }
        65% {fill-opacity: 0%; }
        100% { stroke-dashoffset: 643px; fill-opacity: 100%; }
    }
    #mainLogo path:nth-child(7) {
        stroke-dasharray: 567.9px;
        stroke-dashoffset: 567.9px;
        animation: logoLineAnim7 8s ease forwards;
        animation-iteration-count: infinite;
        fill: white; 
        fill-opacity: 100%; 
    }
    @keyframes logoLineAnim7 {
        5% { fill-opacity: 100%; }
        50% { stroke-dashoffset: 0; fill-opacity: 0; }
        65% {fill-opacity: 0%; }
        100% { stroke-dashoffset: 567.9px; fill-opacity: 100%; }
    }
    #mainLogo path:nth-child(8) {
        stroke-dasharray: 554.6px;
        stroke-dashoffset: 554.6px;
        animation: logoLineAnim8 8s ease forwards;
        animation-iteration-count: infinite;
        fill: white; 
        fill-opacity: 100%; 
    }
    @keyframes logoLineAnim8 {
        5% { fill-opacity: 100%; }
        50% { stroke-dashoffset: 0; fill-opacity: 0; }
        65% {fill-opacity: 0%; }
        100% { stroke-dashoffset: 554.6px; fill-opacity: 100%; }
    }



    .headerMain:hover {
        height: 9vh;
    }

    @keyframes showSub {
        to {
            height: 9vh;
        }
    }

    .subheader {
        display: none;
        margin-top: -2vh;
    }

    .showSubheader:hover .subheader {
        display: block;
        animation: showSub 0.5s ease forwards;
    }
    
}

/*  iPhone Portrait */
@media only screen and (min-device-width: 360px) and (max-device-width: 414px) and (orientation: portrait) {
    #mainLogo {
        visibility: hidden;
    }

    .headerLogo {
        transform: translate(-50%, 0.1vh) !important;
    }

    .mobileHide {
        display: none !important;
    }

    .colsm-1, .colsm-2, .colsm-3, .colsm-4, .colsm-45, .colsm-5, .colsm-6, .colsm-7, .colsm-8, .colsm-9, .colsm-10, .colsm-11, .colsm-12 {
        position: relative;
        min-height: 1px;
        float: left;
    }
    .colsm-1 {
        width: 8.333333333% !important;
    }
    .colsm-2 {
        width: 16.666666666% !important;
    }
    .colsm-3 {
        width: 25% !important;
    }
    .colsm-4 {
        width: 33.333333333% !important;
    }
    .colsm-45 {
        width: 37.5% !important;
    }
    .colsm-5 {
        width: 41.666666666% !important;
    }
    .colsm-6 {
        width: 50% !important;
    }
    .colsm-7 {
        width: 58.333333333% !important;
    }
    .colsm-8 {
        width: 66.666666666% !important;
    }
    .colsm-9 {
        width: 75% !important;
    }
    .colsm-10 {
        width: 83.333333333% !important;
    }
    .colsm-11 {
        width: 91.666666666% !important;
    }
    .colsm-12 {
        width: 100% !important;
    }

    .pushsm-0 {
        left: 0% !important;
    }
    .pushsm-05 {
        left: 4.166666666% !important;
    }
    .pushsm-1 {
        left: 8.333333333% !important;
    }
    .pushsm-15 {
        left: 12.5% !important;
    }
    .pushsm-2 {
        left: 16.666666666% !important;
    }
    .pushsm-25 {
        left: 20.833333333% !important;
    }
    .pushsm-3 {
        left: 25% !important;
    }
    .pushsm-4 {
        left: 33.333333333% !important;
    }
    .pushsm-5 {
        left: 41.666666666% !important;
    }
    .pushsm-6 {
        left: 50% !important;
    }
    .pushsm-7 {
        left: 58.333333333% !important;
    }
    .pushsm-8 {
        left: 66.666666666% !important;
    }
    .pushsm-9 {
        left: 75% !important;
    }
    .pushsm-10 {
        left: 83.333333333% !important;
    }
    .pushsm-11 {
        left: 91.666666666% !important;
    }
    .pushsm-12 {
        left: 100% !important;
    }

    .pullsm-05 {
        left: -4.166666666% !important;
    }
    .pullsm-1 {
        left: -8.333333333% !important;
    }
    .pullsm-2 {
        left: -16.666666666% !important;
    }
    .pullsm-3 {
        left: -25% !important;
    }
    .pullsm-4 {
        left: -33.333333333% !important;
    }
    .pullsm-5 {
        left: -41.666666666% !important;
    }
    .pullsm-6 {
        left: -50% !important;
    }
    .pullsm-7 {
        left: -58.333333333% !important;
    }
    .pullsm-8 {
        left: -66.666666666% !important;
    }
    .pullsm-9 {
        left: -75% !important;
    }
    .pullsm-10 {
        left: -83.333333333% !important;
    }
    .pullsm-11 {
        left: -91.666666666% !important;
    }
    .pullsm-12 {
        left: -100% !important;
    }

    .subheader {
        display: none;
        margin-top: -2vh;
    }

}