/**********************************************

    CASCADE SPARES WEBSITE REDESIGN

***********************************************

    Author: Garrett Tallent  (github.com/gare22)
    Date Created: 6/24/21
    Date Last Modified: 10/7/2021

***********************************************/


/*
Specificity Hierarchy

Inline styles - 1000 points
IDs - 100 points
Classes, attributes, and pseudo-classes - 10 points
Elements and pseudo-elements - 1 point

Highest point value is applied.

Consider the following:

<div id="content">
    <h1>HEADING</h1>
</div>

h1 {color:red} - 1 point
.big h1 {color:yellow} - 11 points
#content h1 {color:green} - 101 points

because #content h1 has the highest score,
  the h1 will be colored green

*/





/************************************************
    Classes, Attributes, and Pseudo-classes
*************************************************/

/*Related to parallax stuff*/
.parallax__container {
	clip: rect(0, auto, auto, 0);
	height: 100%;
	left: 0;
	overflow: hidden;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 0;
}

.parallax {
	position: fixed;
	top: 0px;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	width: 100%;

    background-position: center;
	background-repeat: no-repeat;
	background-size:cover;
}


/*MOBILE PARALAX
.parallax__container .mparaleft{
	position: fixed;
	top: 1px;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	width: 100%;
}

.parallax__container .paraleft{
	display:none;
}
*/


.parallax__container .paraleft{
    display:grid;
    position: fixed;
    top: 1px;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    width: 100%;
}

.parallax__container .pararight{
    display:grid;
    position: fixed;
    top: 1px;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    width: 100%;
}

/*parallax images*/
.bg1 {
	background-image:url("../imgs/main3.jpg");
    background-position: left;
}
.bg2{
	background-image:url("../imgs/part.jpg");
}

.bg3{
    background-image:url("../imgs/3.jpg");
}
.bg4{
    background-image:url("../imgs/15.jpg");
}
.bg5{
    background-position:center;
    background-image:url("../imgs/9.jpg");
}

.bg6{
    background-position:left;
    background-image:url("../imgs/11.jpg");
}

/*Display Structure*/




.vflex{
    display:flex;
    flex-direction: column;
}

.hflex{
    display:flex;
    flex-direction: row;
}

.flexwrap{
    flex-wrap: wrap;
}

.flexcenter{
    justify-content: center;
    align-items: center;
}

.grid{
    display:grid;
    grid-gap: 0px;
}

.row{
    grid-template-columns: 100%;
    grid-template-rows: auto;
}

.sticky{
    position:relative;
}

.left{
    /*height will always be 100vh - head's height*/
    height: 15rem;
}

.lefttitle {
    text-align: center;
    font-size: 4rem;
    margin:auto;
}

.right{
    /*min-height will always be 100vh - head's height*/
    min-height: auto;
}

.white{
    color:whitesmoke;
}

.red{
    color:maroon;
}

.black{
    color:black;
}

.whitebg{
    background-color: rgba(245, 245, 245, 0.815);
}

.redbg{
    background-color: rgba(128, 0, 0, 0.815);
}

.twovwpad{
    padding:2vw;
}

.nopadding{
    padding:0px;
}

.nomargin{
    margin:0px;
}

.shadow-bot{
    box-shadow: 0px 1rem 10rem black;
}

.leftpad{
    padding-left:2.5rem;
}

.fiveleftpad{
    padding-left:25rem;
}

.two{
    font-size: 2rem;
}

.one{
    font-size:1.5rem;
}

.cascade{
    font-family: 'Cascade';
}

.ptsans{
    font-family: 'PT Sans', sans-serif;
}

.nodeco{
    text-decoration: none;
}

.offsetanchor{
    display:block;
    position:relative;
    top:-12.4rem;
    visibility: hidden;
    margin:0px;
}



/*Quality Gallery*/

/*to make quality gallery responsive, just change 
qgitem's width to the desired amount */
.qgitem{
    padding: 0 1rem;
    float: left;
    width: 33.33%;
}

div.qgimg{
    border: 1px solid rgb(109, 109, 109);
    background-color: rgba(0, 0, 0, 0.025);
}

div.qgimg:hover{
    border: 1px solid #222;
    background-color: rgba(0, 0, 0, 0.192);
}

div.qgimg img{
    padding: 1rem;
    width:90%;
    height: auto;
}

div.qgdescription{
    min-height: 12rem;
    padding: 15px;
    text-align: center;
    font-size:min(3vw, 2rem);
}

/*Marketing Gallery*/

/*Modals*/
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 51; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (Image) */
.modal-content {
    margin: auto;
    display: block;
    width: 70vw;
    max-width: 700px;
    max-height: 80vh;
}

/* The Close Button */
.close {
    position: absolute;
    top: 1.5rem;
    right: 3.5rem;
    color: #f1f1f1;
    font-size: 4rem;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

.marketing-image{
    display: inline-block;
    height: 40vh;
}


.marketing-image img{
    height: 100%;
    width: auto;
}

#marketinggallery::-webkit-scrollbar {
    width: 1em;
}
 
#marketinggallery::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.7);
    box-shadow: inset 0 0 6px rgba(0,0,0,0.7);
}
 
#marketinggallery::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}


/*************************************************
            Elements and Pseudo-elements
**************************************************/
html{
    width: 100%;
    margin:0px;
    padding:0px;
    font-size: 10px;
    font-family: 'PT Sans', sans-serif;
    scroll-behavior:smooth;
    line-height: 1.5 ;
}

body{
    height:inherit;
    width:inherit;
    margin:inherit;
    padding:inherit;
    background-color:lightgray;
}

div{
    position:relative;
    box-sizing: border-box;
}

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

a:hover{
    color:rgba(119, 119, 119, 0.8);
}


  
th, td {
   text-align: left;
   padding:.25rem;
   font-style: none;
   font-size: 1rem;
   font-family:Arial, Helvetica, sans-serif
}

th{
    background-color: rgba(128, 0, 0, 0.925);
    color:whitesmoke;
 
}

tr{
    background-color: white;
}
tr:nth-child(even) {background-color: #dadada;}

/************************************************
    TOP DOWN STRUCTURE HERE (ID'd elements)
*************************************************/
#head{
    height: 12.5rem;
    z-index: 3;
    position: sticky;
    top:0px;
}

#tinystrip{
    display:none;
    position:relative;
    background-color:rgb(238, 238, 238);
    height: 20%;
    width:100%;
    z-index: 1;
    color:rgb(238, 238, 238);
}

#tinystrip a{
    color:rgb(238, 238, 238);
}


#headmain{
    position:relative;
    height: 100%;
    width: 100%;
    background-color:rgb(238, 238, 238);
    z-index: 1;
}

#logodiv{
    position:relative;
    margin: auto;
    top:1rem;
    width:15rem;
    z-index: 3;
}

#logo{
    position:relative;
    width: 100%;
    z-index: 4;
}

#navbar{
    display:none;
    position:relative;
}

#mobilelinks{
    display:none;
    background-color:gray;
    position:absolute;
    top:12.5rem;
    overflow:hidden;
    z-index: 10;
    width: 100%;
}

#mobilelinks a{
    margin: auto;
    font-size:3vh;
    padding-top:3vh;
    padding-bottom:3vh;
    color:black;
    background-color: lightgrey;
    display: block;
    text-decoration: none;
    width:100%;
    text-align: center;
    border: .3vh solid rgb(141, 23, 7);
}

#mobilelinks a:hover{
    background-color:rgb(66, 66, 66);
    color:rgb(197, 179, 88);
    border: .6vh solid rgb(197, 179, 88);
}

#mobilebutton{
    display:block;
    position: fixed;
    top:3rem;
    left:3rem;
}

#mobilebutton i{
    color:rgb(141, 23, 7);
    font-size: 6rem;
}

#body{
    font-size: 2rem;
}


#aboutd .left{
    display:none;
    background-color: rgba(95, 11, 0, 0.781);
    color:whitesmoke;
}

#aboutd .right{
    color:black;
    background-color: rgba(245, 245, 245, 0.815);
}

#alternatelinks{
    margin:auto;
    width: 80%;
    margin-top:10rem;
    display:none;
}

#alternatelinks a{
    margin:auto;
    background-color:rgba(95, 11, 0);
    color:whitesmoke;
    text-decoration: none;
    padding: 10px;     
    border-radius: 10px;
}

#alternatelinks a:hover{
    background-color: grey;
    color:maroon;
}

#contactd .left{
    background-color: rgba(95, 11, 0, 0.781);
    color:whitesmoke;
}

#contactd .right{
    color:black;
    background-color: rgba(245, 245, 245, 0.815);
}

#contactd .right a{
    color:whitesmoke;
}

#contactd .right a:hover{
    color:gray;
}

#contactd .right div{
    text-align:center;
}

#contactd .right h3{
    margin:5px;
    margin-top:2rem;
}

#contactd .right p{
    margin:5px;
    margin-bottom: 2rem;
}



#qualityd .left{
    background-color: rgba(95, 11, 0, 0.81);
    color:whitesmoke;
}

#qualityd .right{
    color:black;
    background-color: rgba(245, 245, 245, 0.759);
}

#contactd .right a{
    color:black;
}

#contactd .right a:hover{
    color:gray;
}

#marketingd{
    display:none;
}

#marketingd .left{
    background-color: rgba(95, 11, 0, 0.781);
    color:whitesmoke;
}

#marketingd .right{
    color:black;
    background-color: rgba(245, 245, 245, 0.815);
}

#marketinggallery{
    margin:auto;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    width: 80%;
}

#ecommerced .left{
    background-color: rgba(95, 11, 0, 0.781);
    color:whitesmoke;
}

#ecommerced .right{
    color:black;
    background-color: rgba(245, 245, 245, 0.815);
}

#ecommerced .right a{
    color:black;
}

#ecommerced .right a:hover{
    color:gray;
}

#tablecontainer{
    width:65vw;
    min-height: 70vh;
}

#tablecontainer table {
    border-collapse: collapse;
    width: 100%;
    font-size: 1.5rem;
    border:1px solid black;
}

#tablecontainer table a{
    background-color: maroon;
    color:whitesmoke;
    margin-right:10px;
    padding:1px;
    text-decoration: none;
    border-top: 2px solid maroon;
    border-right: 2px solid #333333;
    border-bottom: 2px solid #333333;
    border-left: 2px solid maroon;
}

#tablecontainer table a:hover{
    background-color: grey;
    color:maroon;
}


#foot{
    height: 10rem;
    background-color:rgba(95, 11, 0);
    color:whitesmoke;
    font-size:1.2rem;
}


/*For medium screens*/
@media only screen and (min-width: 768px) {    
    /************************************************
        Classes, Attributes, and Pseudo-classes
    *************************************************/

    /*Related to parallax stuff*/
    .parallax__container {
        clip: rect(0, auto, auto, 0);
        height: 100%;
        left: 0;
        overflow: hidden;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 0;
    }

    .parallax {
        position: fixed;
        top: 0px;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        width: 100%;

        background-position: center;
        background-repeat: no-repeat;
        background-size:cover;
    }


    /*MOBILE PARALAX
    .parallax__container .mparaleft{
        position: fixed;
        top: 1px;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        width: 100%;
    }

    .parallax__container .paraleft{
        display:none;
    }
    */

    .parallax__container .mparaleft{
        display:none;
    }

    .parallax__container .paraleft{
        display:grid;
        position: fixed;
        top: 1px;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        width: 30%;
    }

    .parallax__container .pararight{
        display:grid;
        position: fixed;
        top: 1px;
        right:0px;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        width: 70%;
    }

    /*parallax images*/
    .bg1 {
        background-image:url("../imgs/main3.jpg");
        background-position: left;
    }
    .bg2{
        background-image:url("../imgs/part.jpg");
    }

    .bg3{
        background-image:url("../imgs/3.jpg");
    }
    .bg4{
        background-image:url("../imgs/7.jpg");
    }
    .bg5{
        background-position:center;
        background-image:url("../imgs/9.jpg");
    }

    .bg6{
        background-position:left;
        background-image:url("../imgs/11.jpg");
    }

    /*Display Structure*/
    .hide_from_mobile{
        display:block;
    }

    .mobile_hidden{
        display:block;
    }

    .desktop_hidden{
        display:none;
    }

    .vflex{
        display:flex;
        flex-direction: column;
    }

    .hflex{
        display:flex;
        flex-direction: row;
    }

    .flexwrap{
        flex-wrap: wrap;
    }

    .flexcenter{
        justify-content: center;
        align-items: center;
    }

    .grid{
        display:grid;
        grid-gap: 0px;
    }

    .row{
        grid-template-columns: 30% 70%;
        grid-template-rows: auto;
    }

    .sticky{
        position:sticky;
        top:12.5rem;
    }

    .left{
        /*height will always be 100vh - head's height*/
        height: 90vh;
        max-width: 30vw;
    }
    
    .lefttitle {
        font-size: 2.6rem;
        margin:auto;
    }
    .right{
        /*min-height will always be 100vh - head's height*/
        min-height: 90vh;
        max-width: 70vw;
    }

    .white{
        color:whitesmoke;
    }

    .red{
        color:maroon;
    }

    .black{
        color:black;
    }

    .whitebg{
        background-color: rgba(245, 245, 245, 0.815);
    }

    .redbg{
        background-color: rgba(128, 0, 0, 0.815);
    }

    .twovwpad{
        padding:2vw;
    }

    .nopadding{
        padding:0px;
    }

    .nomargin{
        margin:0px;
    }

    .shadow-bot{
        box-shadow: 0px 1rem 10rem black;
    }

    .leftpad{
        padding-left:5rem;
    }

    .fiveleftpad{
        padding-left:25rem;
    }

    .two{
        font-size: 2rem;
    }

    .one{
        font-size:1.5rem;
    }

    .cascade{
        font-family: 'Cascade';
    }

    .ptsans{
        font-family: 'PT Sans', sans-serif;
    }

    .nodeco{
        text-decoration: none;
    }

    .offsetanchor{
        display:block;
        position:relative;
        top:-12.4rem;
        visibility: hidden;
        margin:0px;
    }

    .lefttitle {
        font-size: 4rem;
        margin:auto;
    }



    /*Quality Gallery*/

    /*to make quality gallery responsive, just change 
    qgitem's width to the desired amount */
    .qgitem{
        padding: 0 1rem;
        float: left;
        width: 33.33%;
    }

    div.qgimg{
        border: 1px solid rgb(109, 109, 109);
        background-color: rgba(0, 0, 0, 0.025);
    }

    div.qgimg:hover{
        border: 1px solid #222;
        background-color: rgba(0, 0, 0, 0.192);
    }

    div.qgimg img{
        padding: 1rem;
        width:80%;
        height: auto;
    }

    div.qgdescription{
        min-height: 12rem;
        padding: 15px;
        text-align: center;
    }

    /*Marketing Gallery*/

    /*to make marketing gallery responsive, just change 
    qgitem's width to the desired amount */
    
    .mgitem{
        margin:1rem;
        background-color: rgba(19, 19, 19, 0.836);
        padding: 0 1%;
        float: left;
        width: 25vw;
        overflow: hidden;
        font-size:1.8rem;
    }

    div.mgimg{
        opacity: 1;
    }

    div.mgimg:hover{
        opacity: 0.85;
    }

    div.mgimg img{
        padding: 2px;
        width:90%;
        height: auto;
    }

    /*************************************************
                Elements and Pseudo-elements
    **************************************************/
    html{
        width: 100%;
        margin:0px;
        padding:0px;
        font-size: 10px;
        font-family: 'PT Sans', sans-serif;
    }

    body{
        height:inherit;
        width:inherit;
        margin:inherit;
        padding:inherit;
        background-color:lightgray;
    }

    div{
        position:relative;
        box-sizing: border-box;
    }

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

    a:hover{
        color:rgba(119, 119, 119, 0.8);
    }

    th, td {
        text-align: left;
        padding:.25rem;
        font-style: none;
        font-size: 1.4rem;
        font-family:Arial, Helvetica, sans-serif
     }

    /************************************************
        TOP DOWN STRUCTURE HERE (ID'd elements)
    *************************************************/
    #head{
        height: 12.5rem;
        z-index: 3;
        position: sticky;
        top:0px;
    }

    #tinystrip{
        display:flex;
        position:relative;
        background-color: rgb(95, 11, 0);
        height: 20%;
        width:100%;
        z-index: 1;
        color:whitesmoke;
    }

    #tinystrip a{
        color:whitesmoke;
    }


    #headmain{
        position:relative;
        height: 80%;
        width: 100%;
        background-color:rgb(238, 238, 238);
        z-index: 1;
    }

    #logodiv{
        position:relative;
        margin: auto;
        top:-2rem;
        width:15rem;
        z-index: 3;
    }

    #logo{
        position:relative;
        width: 100%;
        z-index: 4;
    }

    #navbar{
        display:flex;
        position:relative;
    }

    #mobilelinks{
        display:none;
    }

    #mobilebutton{
        display:none;
    }

    #body{
        font-size: 2rem;
    }


    #aboutd .left{
        display:block;
        background-color: rgba(0, 0, 0, 0.0);
        color:whitesmoke;
    }

    #aboutd .right{
        color:black;
        background-color: rgba(245, 245, 245, 0.815);
    }

    #alternatelinks{
        display:flex;
    }

    #contactd .left{
        color:maroon;
        background-color: rgb(240, 240, 240);
    }

    #contactd .right{
        background-color: rgba(95, 11, 0, 0.71);
        color:whitesmoke;
    }

    #contactd .right a{
        color:whitesmoke;
    }

    #contactd .right a:hover{
        color:gray;
    }



    #qualityd .left{
        background-color: rgba(0, 0, 0, 0.3);
        color:whitesmoke;
    }

    #qualityd .right{
        background-color: rgba(245, 245, 245, 0.815);
        color:black;
    }

    #contactd .right a{
        color:whitesmoke;
    }

    #contactd .right a:hover{
        color:gray;
    }

    #marketingd{
        display:grid;
    }
    #marketingd .left{
        background-color: rgba(0, 0, 0, 0.1);
        color:whitesmoke;
    }

    #marketingd .right{
        background-color: rgba(245, 245, 245, 0.815);
        color:black;
    }

    #ecommerced .left{
        background-color: rgba(245, 245, 245, 0.568);
        color:maroon;
    }

    #ecommerced .right{
        background-color: rgba(95, 11, 0, 0.0);
        color:black;
    }

    #ecommerced .right a{
        color:whitesmoke;
    }

    #ecommerced .right a:hover{
        color:gray;
    }

    #foot{
        height: 10rem;
        background-color:rgba(95, 11, 0);
        color:whitesmoke;
        font-size:1.6rem;
    }
    
    
}

/*For big screens*/
@media only screen and (min-width: 1300px) {  
    /************************************************
        Classes, Attributes, and Pseudo-classes
    *************************************************/
    /*Display Structure*/

    .mobile_hidden{
        display:block;
    }

    .desktop_hidden{
        display:none;
    }

    .vflex{
        display:flex;
        flex-direction: column;
    }

    .hflex{
        display:flex;
        flex-direction: row;
    }

    .flexwrap{
        flex-wrap: wrap;
    }

    .flexcenter{
        justify-content: center;
        align-items: center;
    }

    .grid{
        display:grid;
        grid-gap: 0px;
    }

    .row{
        grid-template-columns: 30% 70%;
        grid-template-rows: auto;
    }


    .sticky{
        position:sticky;
        top:12.5rem;
    }

    .left{
        /*height will always be 100vh - head's height*/
        height: 90vh;
        max-width: 30vw;
    }

    .right{
        /*min-height will always be 100vh - head's height*/
        min-height: 90vh;
        max-width: 70vw;
    }

    .white{
        color:whitesmoke;
    }

    .red{
        color:maroon;
    }

    .black{
        color:black;
    }

    .whitebg{
        background-color: rgba(245, 245, 245, 0.815);
    }

    .redbg{
        background-color: rgba(128, 0, 0, 0.815);
    }

    .twovwpad{
        padding:2vw;
    }

    .nopadding{
        padding:0px;
    }

    .nomargin{
        margin:0px;
    }

    .shadow-bot{
        box-shadow: 0px 1rem 10rem black;
    }

    .leftpad{
        padding-left:7rem;
    }

    .fiveleftpad{
        padding-left:25rem;
    }

    .two{
        font-size: 2rem;
    }

    .one{
        font-size:1.5rem;
    }

    .cascade{
        font-family: 'Cascade';
    }

    .ptsans{
        font-family: 'PT Sans', sans-serif;
    }

    .nodeco{
        text-decoration: none;
    }

    .offsetanchor{
        display:block;
        position:relative;
        top:-12.4rem;
        visibility: hidden;
        margin:0px;
    }



    /*Quality Gallery*/

    /*to make quality gallery responsive, just change 
    qgitem's width to the desired amount */
    .qgitem{
        padding: 0 1rem;
        float: left;
        width: 33.33%;
    }

    div.qgimg{
        border: 1px solid rgb(109, 109, 109);
        background-color: rgba(0, 0, 0, 0.025);
    }

    div.qgimg:hover{
        border: 1px solid #222;
        background-color: rgba(0, 0, 0, 0.192);
    }

    div.qgimg img{
        padding: 1rem;
        width:90%;
        height: auto;
    }

    div.qgdescription{
        min-height: 12rem;
        padding: 15px;
        text-align: center;
    }

    /*Marketing Gallery*/

    /*to make marketing gallery responsive, just change 
    qgitem's width to the desired amount */
    .mgitem{
        padding: 0 .5rem;
        float: left;
        width: 31%;
        overflow: hidden;
    }

    div.mgimg img{
        padding: 2px;
        width:90%;
        height: auto;
    }

    /*************************************************
                Elements and Pseudo-elements
    **************************************************/
    html{
        width: 100%;
        margin:0px;
        padding:0px;
        font-size: 10px;
        font-family: 'PT Sans', sans-serif;
    }

    body{
        height:inherit;
        width:inherit;
        margin:inherit;
        padding:inherit;
        background-color:lightgray;
    }

    div{
        position:relative;
        box-sizing: border-box;
    }

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

    a:hover{
        color:rgba(119, 119, 119, 0.8);
    }

    /************************************************
        TOP DOWN STRUCTURE HERE (ID'd elements)
    *************************************************/
    #head{
        height: 12.5rem;
        z-index: 3;
        position: sticky;
        top:0px;
    }

    #tinystrip{
        position:relative;
        background-color: rgb(95, 11, 0);
        height: 20%;
        width:100%;
        z-index: 1;
        color:whitesmoke;
    }

    #tinystrip a{
        color:whitesmoke;
    }


    #headmain{
        position:relative;
        height: 80%;
        width: 100%;
        background-color:rgb(238, 238, 238);
        z-index: 1;
    }

    #logodiv{
        position:relative;
        margin: auto;
        top:-2rem;
        width:15rem;
        z-index: 3;
    }

    #logo{
        position:relative;
        width: 100%;
        z-index: 4;
    }

    #navbar{
        display:flex;
        position:relative;
    }

    #mobilelinks{
        display:none;
    }

    #body{
        font-size: 2rem;
    }
    
    #marketinggallery{
        width: 50vw;
    }

    #marketinggallery::-webkit-scrollbar {
        background-color: rgba(0,0,0,0.5);
        width: 1em;
    }
     
    #marketinggallery::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,1);
        box-shadow: inset 0 0 6px rgba(0,0,0,1);
    }
     
    #marketinggallery::-webkit-scrollbar-thumb {
      background-color: darkgrey;
      outline: 1px solid slategrey;
    }
}