@font-face {
    font-family: 'Bahnschrift';
    src: url('../fonts/Bahnschrift.eot');
    src: url('../fonts/Bahnschrift.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Bahnschrift.woff2') format('woff2'),
         url('../fonts/Bahnschrift.woff') format('woff'),
         url('../fonts/Bahnschrift.ttf') format('truetype'),
         url('../fonts/Bahnschrift.svg#Bahnschrift') format('svg');
    font-weight: normal;
    font-style: normal;
}

html {
    scroll-behavior: smooth; /* for back to top transition */
}

body {
    margin: 0px;
    padding: 0px;
    font-family: Bahnschrift, Arial, Helvetica, sans-serif;
}

.preload { 
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}

#desktopmenu { display: block; }
#dropdownmenu { display: block; }
#mobilemenulink { display: none; }
#mobilemenu { display: none; }
/*#mobilemenuapron {display: none; }*/
#submenu { display: none; }
.desktoponly { display: block; }
.mobileonly { display: none; }


/*                                                              HEADER    */

.header {
    /* outline: 1px dashed red; */
    background-color: black;
    width: 100vw;
    max-width: 100%;
    height: 5.4vw; /*12vh*/
    margin: 0px;
    padding: 0px;    
    position: fixed;
    top: 0;
    left:0;
    z-index: 1;
}

.headergrid {
    /*outline: 1px dashed red;*/
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 0vw;
    grid-template-rows: 5.4vw; /*12vh*/
    align-items: stretch;
    justify-items: right;
}
    
#logo {
    text-align: left;  
    /*border: 1px dotted yellow;*/    
    margin: auto 0;
    width: 50vw;
    height: 4.29vw;
    max-height: 5.4vw;
}

#logowrapper {
    margin: auto 0;
    /*border: 1px dotted white;*/
    height: 4.29vw;
    vertical-align: middle;
    display: flex;
    width: 50vw;
}

#logoimage {
    /*border: 1px dotted red;*/
    max-height: 4.2vw; /*8vh*/
    height: auto;
    padding: 0vw 5vw 0.09vw 2vw; /* 0 5 0 2 */
}

#desktopmenu { /* previously 'menu' */
    /*border: 1px dotted yellow;*/

    text-align: right;
    
    margin: auto 0;
    width: 45vw; /*35*/ /*mobile quick fix: 45vw*/
    height: 2.88vw; /*2.7+.18*/
    max-height: 5.4vw;
}

#menuwrapper {
    /*border: 1px dotted white;*/
    /*background-color: yellow;*/
    margin: auto 0;
    height: 2.88vw;
    vertical-align: middle;
    display: flex;
    justify-content: flex-end;
    width: auto;
    padding-right: 2.12vw; /*2.22*/
}

.menuitem {
    /*outline: 1px dotted red;*/
    display: inline-block;
    height: 2.7vw; /*1.75-1.82*/
    margin: auto 0;
    line-height: 2.7vw;
    /*padding-top: .18vw;*/
    padding: 0.18vw 0.00vw 0 0.00vw; /* 0.10 */
    margin: 0vw 0.10vw;
    background-color: black; /* NEW for desktopsubmenu */ 
}

.spacer {
    /* background-color: yellow; */
    position: static;
    width: 100vw;
    max-width: 100%;
    height: 5.4vw; /*12vh*/
    
    margin: 0px;
    padding: 0px;
}

#dropdownmenu {
    display: block;
    visibility: hidden;
    opacity: 0%;
    position: fixed;
    text-align: right;
    line-height: 12vw;
    width: auto;
    height: auto; /*height: 8.64vw; /*(2.7+.18)*3*/    
    right: 11.26vw; /*11.27 11.25 0*/
    background-color: black;
    padding-top: 0vw;
    z-index: 2;
    margin-top: 1.26vw; /*4.14vw; /*5.4-(5.4-(2.7+.18))/2*/
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
 }
 
.dropdownmenuitemwrapper {
    /*border: 1px dotted white;*/
    background-color: black;
    margin: auto 0;
    height: 2.88vw;
    vertical-align: middle;
    display: flex;
    justify-content: flex-end;
    width: auto;
    /*padding-right: 2.12vw; /*2.22*/    
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
}

.dropdownmenuitemwrapper:hover {
    background-color: white;
    color: black;
}

.dropdownmenuitem {
    /*outline: 1px dotted red;*/
    display: inline-block;
    height: 2.7vw; /*1.75-1.82*/
    width: auto;
    margin: auto 0;
    line-height: 2.7vw;
    /*padding-top: .18vw;*/
    padding: 0.18vw 0.00vw 0 0.00vw; /* 0.10 */
    margin: 0vw 0vw;
}


/*                                                              HERO    */

.hero {
    position: relative;
    width: 100vw;
    max-width: 100%;
    height: 33vw; /*66vh*/
    overflow: hidden;    
    margin: 0px;
    padding: 0px;
}

.hero img {
    width: 100vw;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    /* transition: opacity 2.5s; /* 1.2s 3.0s */ 
}

.heronav, .heronavdark {
    /*background: gray;*/
    background: none;
    /*outline: 1px dotted white;*/
    border: none;
    font-size: 4.2vw;
    color: white;
    font-family: Bahnschrift, Arial, Helvetica, sans-serif; /*optional*/
    height: 33vw;
    width: 17.5vw;
    opacity: 30%; /* 33% */
}

.heronavdark {
    color: black;
    opacity: 15%; 
}

.heronav:hover {
    opacity: 60%; /* 67% */
    cursor: pointer;
}

.heronavdark:hover {
    opacity: 40%;
    cursor: pointer;
}

.heronav:focus, .heronavdark:focus {
  outline: none;
  box-shadow: none;
}

#heronavleft {
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(0%, -50%);
    text-align: left;
    padding-left: 2.1vw;
}

#heronavright {
    position: absolute;
    top: 50%;
    right: 0%;
    transform: translate(0%, -50%);
    text-align: right;
    padding-right: 2.1vw;
}


/*                                                              LIGHTBOX    */

#lightboxapron {
    background-color: black;
    display: block;
    visibility: hidden;
    position: fixed;
    width: 100vw;
    max-width: 100%;
    height: 100vh;
    max-width: 100%;
    overflow: none;
    z-index: 5;
    
    opacity: 0%;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
    
    cursor: pointer;
}

#lightboximage {    
    display: block;
    visibility: hidden;
    position: fixed;
    width: 100vw;
    max-width: 100%;
    height: 100vh;
    max-width: 100%;
    overflow: none;
    z-index: 6;

    opacity: 0%;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
    
    cursor: pointer;
    
    background-position: center;
    background-repeat: no-repeat;
    background-size: 55vw auto;
    overflow: hidden;
}


/*                                                              POPUP    */

#popupapron, #shopupapron {
    /*background-color: red;*/
    display: block;
    visibility: hidden;
    position: fixed;
    width: 100vw;
    max-width: 100%;
    height: 100vh;
    max-width: 100%;
    overflow: none;
    z-index: 5;
    
    /*text-align: center;*/
    
    opacity: 0%;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
    
    /*cursor: pointer;*/
}

#popupimage, #shopupimage {    
    /*display: inline-block; /*block*/
    visibility: hidden;
    /*position: fixed;*/
    /*width: 50vw; /*40vw*/  
    height: auto;
    z-index: 6;
    
    position: absolute; 
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;

    opacity: 0%;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
    
    cursor: pointer;
}

#popupimage { height: 64h; width: 64vh; /*60vh; width: 50vw;*/ }
#shopupimage { width: 40vw; }


/*                                                              COOKIES    */

#cookiepopup {    
    /*display: inline-block; /*block*/
    
    /*position: fixed;*/
    width: 12.4vw; /*40vw*/
    height: auto;
    z-index: 6;
    
    visibility: hidden;
    background-color: white;
    border: 0.12vw solid black; /*0.21vw*/
    padding: 1vw .9vw 0.85vw .9vw;
    
    position: fixed; 
    bottom: 1.2vw; /*7.5-9vw*/
    right: 1.4vw; /*1.5vw*/
    margin: auto;

    opacity: 0%;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
    
    cursor: pointer;
    
    text-align: center;
}

#cookiepopup h6 { 
    font-size: .9vw; /* 1.05vw */
    line-height: 124%; /*136%*/
    color: black;
    text-align: center;
}

.cookiebutton {
    /* formaction */
    background-color: white;
    border: 0.12vw solid black; /*0.21vw*/
    color: black;
    text-align: center;
    text-decoration: none;
    font-size: .9vw; /* 1.58vw */
    font-family: Bahnschrift, Arial, Helvetica, sans-serif;
    margin-top: .7vw;
    padding: .30vw 1.36vw .10vw 1.36vw;
}

.cookiebutton:hover {
  background-color: black;
  color: white;
  cursor: pointer;
}


/*                                                              SPACING    */

.maintext, .features, .zigzag, .gallery, .shop, .products, .calltoaction {
    padding-top: 3vw;
}


/*                                                              EFFECTS    */

.scrolleffect {
    opacity: 0%; /* all fade in times now  set in JS */
}


/*                                                              MAIN    */

.maintext {
    /*outline: 1px dotted green;*/
    width: 75vw;
    margin: auto;
    padding-bottom: 1.6vw;
}

#maintexthome { }

.headline {
    padding-top: 0.63vw; /*1.26*/
    padding-bottom: 1.4vw; /* 2.4, 1.4 */
}

.deck {
    width: 42vw;
    margin: 0 auto;
}

#maindeck { }

#maindeck h3 {
    padding: 1.1vw 0vw 0.0vw 0vw; /*1.26*/
    
}


/*                                                              FEATURES    */

.features {
    /*outline: 1px dotted blue;*/
    margin: auto;
    width: 79vw; /*80vw*/
    /*padding: 1.5vw 0vw 3vw 0vw;*/
    padding-bottom: 2.28vw; /*3, 2.6, 2.4, 2.0 */
}

.featuregrid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-row-gap: 3.6vw;
    grid-column-gap: 2.4vw;
    align-items: stretch;
    justify-items: center;
}

.feature {
    width: 21.5vw;
    /*outline: 1px dotted black;*/
}

.featureiconwrapper { 
    /*outline: 1px dotted black;*/
    width: 10vw;
    margin: 0 auto;
}

.featureicon {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 4.0vw; /*4.4vw*/
    height: auto;
    padding: 0.8vw 0vw 2.4vw 0vw; /*2.4vw*/
}


/*                                                              ZIGZAG    */

.zigzag {
    /*outline: 1px dotted yellow;*/
    margin: auto;
    width: 75vw;
    padding: 3.6vw 0vw 2.6vw 0vw;
}

.zigzaggrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-row-gap: 7.2vw; /* 4.8 7.6 */
    grid-column-gap: 1.4vw; /* 2.4, 1.4 */
    align-items: stretch;
    justify-items: center;
}

.zigzagimage {
    width: 25vw;
    height: 17.5vw;
}

.zigzagtext {
    width: 24vw; /* 25vw */
    margin: auto;
    padding-bottom: 1.05vw; /* 1.23 */
}

.zigzagtextleft p {
    margin-left: 1.05vw !important;
}

.zigzagtext p {
    margin-left: 0.7vw;
}

#zigzagimage1 { 
    background: url(../images/content/Montrose-Beach-Football-Club-logo.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}
#zigzagimage2 { 
    background: url(../images/content/Kitswap-jersey.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}
#zigzagimage3 { 
    background: url(../images/content/Salience-Gaming-logo.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}
#zigzagimage4 { 
    background: url(../images/content/Ethos-Esports-jersey.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}

.processimage {
    width: 28vw; /*32.5vw 25vw*/
    height: 17.5vw;
    /*outline: 1px dotted black;*/
    cursor: pointer;
}

#processimage1 { 
    background: url(../images/content/Equipt-jersey-concept-examples.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    overflow: hidden;
}

#processimage2 { 
    background: url(../images/content/Equipt-final-jersey-design-example.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    overflow: hidden;
}

#processimage3 { 
    background: url(../images/content/Equipt-jersey-order-information-example.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    overflow: hidden;
}

#processimage4 { 
    background: url(../images/content/Equipt-jersey-production-process.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    overflow: hidden;
}

#processimage5 { 
    background: url(../images/content/Equipt-jersey-order-information-example.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    overflow: hidden;
}

#processimage6 { 
    background: url(../images/content/Equipt-jersey-production-process.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    overflow: hidden;
}


/*                                                              GALLERY    */

.gallery {
    /*outline: 1px dotted red;*/
    margin: auto;
    width: 70.8vw;
    padding-bottom: 1.0vw;
}

.gallerygrid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-row-gap: 3.6vw;
    grid-column-gap: 3.6vw;
    align-items: stretch;
    justify-items: center;
    padding-top: 2.0vw; /*2.0vw*/
}

.galleryimage{
    width: 20vw;
    height: 15vw;
}

#galleryimage1 { 
    background: url(../images/content/Glendale-Soccer-Association-logo.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}
#galleryimage2 { 
    background: url(../images/content/Alvista-FC-logo.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}
#galleryimage3 { 
    background: url(../images/content/9-Mile-AFC-logo.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}
#galleryimage4 { 
    background: url(../images/content/Saint-Laurent-FC-logo.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}
#galleryimage5 { 
    background: url(../images/content/Montrose-Beach-Football-Club-logo.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}
#galleryimage6 { 
    background: url(../images/content/Straight-Outta-Work-logo.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}
#galleryimage7 { 
    background: url(../images/content/La-Familia-Internacional-logo.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}
#galleryimage8 { 
    background: url(../images/content/Broad-Ripple-Saturday-Soccer-logo.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}
#galleryimage9 { 
    background: url(../images/content/Brittany-Wilson-logo.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}
#galleryimage10 { 
    background: url(../images/content/Kitswap-logo.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}
#galleryimage11 { 
    background: url(../images/content/Ham-Swiss-FC-logo.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}
#galleryimage12 { 
    background: url(../images/content/FK-Moscanica-Sarajevo-logo.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}
#galleryimage13 { 
    background: url(../images/content/Western-Bannas-FC-logo.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}
#galleryimage14 { 
    background: url(../images/content/Salience-Gaming-logo.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}
#galleryimage15 { 
    background: url(../images/content/Jose-Palafox-logo.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}
#galleryimage16 { 
    background: url(../images/content/Sports2k-logo.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}
#galleryimage17 { 
    background: url(../images/content/AC-Woodruff-Place-logo.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}
#galleryimage18 { 
    background: url(../images/content/580-Barbell-logo.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}

.soccergalleryimage{
    width: 20vw;
    height: 18vw;
}

#soccergallery1 { 
    background: url(../images/content/Brickyard-Battalion-custom-soccer-jersey.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}
#soccergallery2 { 
    background: url(../images/content/Lakeview-FC-2025-custom-soccer-jersey.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}
#soccergallery3 { 
    background: url(../images/content/Crown-Villa-FC-custom-soccer-jersey.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}
#soccergallery4 { 
    background: url(../images/content/Las-Aguilas-custom-soccer-jersey.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}
#soccergallery5 { 
    background: url(../images/content/Pollos-Locos-FC-custom-soccer-jersey.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}
#soccergallery6 { 
    background: url(../images/content/Tech-Boys-FC-custom-soccer-jersey.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}
#soccergallery7 { 
    background: url(../images/content/Vibes-FC-2023-Spring-custom-soccer-jersey.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}
#soccergallery8 { 
    background: url(../images/content/Vibes-FC-3-Star-custom-soccer-jersey.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}
#soccergallery9 { 
    background: url(../images/content/Maharlika-Manila-custom-soccer-jersey.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}
#soccergallery10 { 
    background: url(../images/content/Broad-Ripple-Saturday-Soccer-20th-Anniversary-Home-custom-soccer-jersey.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}
#soccergallery11 { 
    background: url(../images/content/Broad-Ripple-Saturday-Soccer-20th-Anniversary-Away-custom-soccer-jersey.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}
#soccergallery12 { 
    background: url(../images/content/Kitswap-custom-soccer-jersey.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}

#partnergallery { padding-top: 4vw; }

.partnergalleryimage{
    width: 20vw; /*20vw*/
    height: 15vw; /*15vw*/
}

#partnergallery1 { 
    background: url(../images/content/partners_1.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}
#partnergallery2 { 
    background: url(../images/content/partners_2.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}
#partnergallery3 { 
    background: url(../images/content/partners_3.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}
#partnergallery4 { 
    background: url(../images/content/partners_4.jpg); /*Turbine-Esports-logo*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}
#partnergallery5 { 
    background: url(../images/content/partners_5.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}
#partnergallery6 { 
    background: url(../images/content/partners_6.jpg); /*Gearcats-Robotics-logo*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}
#partnergallery7 { 
    background: url(../images/content/partners_7.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}
#partnergallery8 { 
    background: url(../images/content/partners_8.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}
#partnergallery9 { 
    background: url(../images/content/partners_9.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}

/*                                                              SHOP    */


.shop {
    /*outline: 1px dotted blue;*/
    margin: auto;
    width: 79vw; /*80vw*/
    /*padding: 1.5vw 0vw 3vw 0vw;*/
    padding-bottom: 2.28vw; /*3, 2.6, 2.4, 2.0 */
}

.shopgrid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-row-gap: 3.6vw;
    grid-column-gap: 2.4vw;
    align-items: stretch;
    justify-items: center;
}

.shopitem {
    width: 20.5vw; /*21.5vw*/
    /*outline: 1px dotted black;*/
}

.shopitemimagewrapper { 
    /*outline: 1px dotted black;*/
    width: 20vw;
    height: 20vw;
    margin: 0 auto;
    background-size: 20vw;
}

.shopitemimagehover {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 20vw; /*4.0vw*/
    height: auto;
    
    opacity: 0%;
    
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
    
    /*padding: 0.8vw 0vw 2.4vw 0vw; /*2.4vw*/
}

.shopitemimagehover:hover {
    opacity: 100%;
}

/*.shop a img:hover { 
    -webkit-filter: drop-shadow(0px 0px 0.2vw black);
    filter: drop-shadow(0px 0px 0.2vw black);
}*/

.shopnav {
    width: 11vw;
    text-align: left;
    margin: 1.5vw 0vw 0vw 2.0vw;
}

.shoploading {
    position: absolute;
    top: 28%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition-timing-function: ease-in;
    z-index: -1;
}

.youmightalsolike {
    /*outline: 1px dotted blue;*/
    transform: scale(80%);
}

/*                                                              PRODUCTS    */

.products {
    /*outline: 1px dotted blue;*/
    margin: auto;
    width: 60vw;    
    text-align: center;
    padding-top: 3.75vw;
}


.producttable {
    margin: auto;
    margin-bottom: 1.85vw;
}

#product4 { margin-bottom: 0; }

table, th, td { 
    border: 0.21vw solid black; /*4px*/
    border-collapse: collapse;
}

.productpricebig {
    width: 15vw;
}

.productdetailsbig {
    width: 38.5vw;
    padding: 1.47vw 0vw;
}

.productpricesmall {
    width: 15vw;
}

.productdetailssmall {
    /*height: 12.75w;*/
    width: 38.5vw;
    padding: 1.47vw 0vw;
}

#details1soccer { padding: 0vw 0vw 0.69vw 9.05vw; } /*9.5*/
#details2soccer { padding: 0vw 0vw 0.69vw 9.05vw; } /*10.4*/
#details3soccer { padding: 0vw 0vw 0.69vw 10.4vw; }
#details4soccer { padding: 0vw 0vw 0.69vw 10.4vw; }

#details1esports { padding: 0vw 0vw 0.69vw 9.05vw; } /*9.5*/
#details2esports { padding: 0vw 0vw 0.69vw 9.05vw; } /*10.4*/
#details3esports { padding: 0vw 0vw 0.69vw 9.05vw; }
#details4esports { padding: 0vw 0vw 0.69vw 9.5vw; }


/*                                                              CALL TO ACTION    */

.calltoaction {
    /*outline: 1px dotted red;*/
    width: 40vw;
    margin: auto;
    text-align: center;
    padding-top: 2.8vw; /*2, 4.4*/
}

.calltoaction h2 {
    padding-bottom: 2.325vw; /*replacing <br> in html*/
}

.calltoactionbutton {
    /* formaction */
    background-color: white;
    border: 0.21vw solid black; /*4px*/
    color: black;
    text-align: center;
    text-decoration: none;
    font-size: 1.58vw; /* 1.68vw */
    font-family: Bahnschrift, Arial, Helvetica, sans-serif;
    padding: .8vw 2.75vw .64vw 2.75vw;
}

.calltoactionbutton:hover {
  background-color: black;
  color: white;
  cursor: pointer;
}


/*                                                              CONTACT    */

#maintextnohero { 
    padding-bottom: 0vw;
}

#headlinenohero {
    padding-top: 1.26vw;
}

#decknohero { }

.contact {
    padding-top: 2.52vw;
}

form {
    /*outline: 1px dotted red;*/
    width: 52vw;
    margin: auto;
}

input[type=text], input[type=email], input[type=number], input[type=date], select, textarea {
  font-family: Bahnschrift, Arial, Helvetica, sans-serif;
  font-size: 1.38vw; /*1.56vw*/
  font-weight: normal;
  letter-spacing: 0.03em; /*0.03em*/
  padding: 0px;
  margin: 0px;
  border: none;
  box-sizing: border-box;
  background-color: white;
  color: black; /*gray*/
  border: 0.21vw solid black;
  padding: .50vw 1vw;
  margin-bottom: 1.24vw;
}

input[type=text]:focus, input[type=email]:focus, input[type=number], select:focus, textarea:focus {
    /*color: black;*/
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: gray;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: gray;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: gray;
}

textarea { 
    resize: none;
}

input[type=submit] {
    background-color: white;
    border: 0.21vw solid black;
    color: black;
    text-align: center;
    text-decoration: none; /* 40px */
    font-size: 1.32vw;
    font-family: Bahnschrift, Arial, Helvetica, sans-serif;    
}

.contactname {
    width: 30vw;
}

.contactorg {
    width: 30vw;
}

.contactemail {
    width: 30vw;
}

.contactdate {
    width: 30vw; /*19vw*/
    /*padding: 0.35vw 1vw 0.35vw 1vw !important; /*0.46vw 1vw 0.70vw 0.8vw*/   
    /*color: black !important;*/
}

.contactmessage {
    width: 52vw;
    height: 13vw;
}

.contactbuttonwrapper {
    text-align: center;
}

.contactbutton {
    background-color: white;
    border: 0.21vw solid black; /*4px*/
    color: black;
    text-align: center;
    text-decoration: none;
    padding: .65vw 2.23vw .52vw 2.23vw; /* .8125 */
    font-family: Bahnschrift, Arial, Helvetica, sans-serif;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s; /* 0.3s, 0.5s */
} 

.contactbutton:hover {
  background-color: black;
  color: white;
  cursor: pointer;
}


/*                                                              ORDER    */

#orderform {
    /*outline: 1px dotted red;*/
    width: 35vw; /*45*/
    margin: auto;
    text-align: center;
}

#orderdeck {
    padding-top: 0.4vw; /*0*/
}

#orderdeck h3 {
    padding: 0.7vw 0vw 0.0vw 0vw; /*1.1*/    
}

select {
  padding: 0.46vw 1vw 0.70vw 0.8vw !important; /*0.50 1  1.16 total  0.46 1 0.70 1*/
}

.ordername, .orderemail, .orderkitsleeves, .ordercountrylarge {
    width: 30vw;
}

.ordernamemedium, .orderemailmedium, .ordercountrymedium {
    width: 26.5vw;    
}

.ordercountry, .orderjersey, .ordershorts, .ordernamesmall, .orderemailsmall {
    width: 23vw;
}

.orderkitsize, .orderjerseysize, .ordershortssize {
    width: 5.71vw;
    margin-left: 1.02vw !important;         /* 26.71 total*/
}

.orderkitnumber, .orderjerseynumber {    
    width: 9.75vw; /*9.75*/
}

.orderkitname, .orderjerseyname {
    width: 19vw;
    margin-left: 1.02vw !important;
    text-transform: uppercase;
}

#ordersubmit {
    margin-top: .65vw;
}


/*                                                              TRACKER    */

.tracker {
    padding-bottom: 2.325vw;   
}

.trackerimage_horizontal{
    border: 0.21vw solid black;
    display: block;
    margin: auto;
    width: 79vw;
}

.trackerimage_vertical{
    display: none;
}


/*                                                              CONTRACT    */
#longtext {
    padding-bottom: 0vw;
}

#headlinelongtext {
    padding-top: 2.1vw; /*1.26*/
}

#contractform {
    /*outline: 1px dotted red;*/
    width: 35vw; /*45*/
    margin: auto;
    text-align: center;
}

.longtext{
    width: 64vw; /*64*/
    margin: 0 auto;
    padding-bottom: 0vw; /*1.05*/
}

.longtext p {
    text-align: left;
    font-size: 1.05vw;
    line-height: 156%; /*144 168*/
}

.longtext h3 {
    text-align: left;
    margin-top: 2.1vw;
}


/*                                                              PRESS RELEASE    */
#pressrelease {
    padding-bottom: 0vw;
    width: 50vw;
}

#headlinepressrelease {
    padding: 1.26vw 0vw 0vw 0.63vw; /*2.1 1.26*/
}

#headlinepressrelease h2 {
    line-height: 144%;
}

.pressrelease{
    width: 50vw; /*64*/
    margin: 0 auto;
    padding-bottom: 0vw; /*1.05*/
}

.pressrelease p {
    text-align: left;
    font-size: 1.05vw;
    line-height: 156%; /*156 144 168*/
    margin-top: 0.7vw;
}

.pressrelease h3 {
    text-align: left;
    margin: 1.8vw 0vw 0vw 0vw; /*2.1vw*/
}


/*                                                              BALLOT    */

#ballot {
    /*outline: 1px dotted red;*/
    width: 35vw; /*45*/
    margin: auto;
    text-align: center;
}


/*                                                              SOCIALS    */

.socials {
    /*outline: 1px dotted blue;*/
    margin: auto;
    width: 60vw;
    padding-top: 2.52vw;
}

.socialgrid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-row-gap: 3.6vw;
    align-items: stretch;
    justify-items: center;
}

.social {
    width: 10vw;
    /*outline: 1px dotted black;*/
}


.socialiconwrapper { 
    /*outline: 1px dotted black;*/
    width: 5vw;
    margin: 0 auto;
}

.socialicon {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 3.6vw;
    height: auto;
    padding-top: 1vw;
    padding-bottom: 1vw;
}


/*                                                              PPI    */

.ppi {
    /*background-color: red;*/
    position: static;
    width: 100vw;
    max-width: 100%;
    height: 12.39vw; /*from ppigrid*/
    margin: 4.73vw 0vw 0vw 0vw; /*from footer*/
    padding: 0px;   
}

.ppigrid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-row-gap: 0vw;
    grid-column-gap: 0vw;
    align-items: stretch;
    justify-items: center;
    /*background-color: yellow;*/
    width: 100vw;
    max-width: 100%;
    height: 12.39vw; /*rough*/
}

.ppigrid a:link { 
    width: 100%;
    height: 100%;
}

.ppigrid a:hover { 
    opacity: 50%;
}

.ppiimage{
    width: 100%;
    height: 100%;
}

#ppiimage1 { 
    background: url(https://profilepageimages.usecue.com/images/equiptstudios/small/0.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}
#ppiimage2 { 
    background: url(https://profilepageimages.usecue.com/images/equiptstudios/small/1.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}
#ppiimage3 { 
    background: url(https://profilepageimages.usecue.com/images/equiptstudios/small/2.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}
#ppiimage4 { 
    background: url(https://profilepageimages.usecue.com/images/equiptstudios/small/3.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}
#ppiimage5 { 
    background: url(https://profilepageimages.usecue.com/images/equiptstudios/small/4.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}
#ppiimage6 { 
    background: url(https://profilepageimages.usecue.com/images/equiptstudios/small/5.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}
#ppiimage7 { 
    background: url(https://profilepageimages.usecue.com/images/equiptstudios/small/6.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}
#ppiimage8 { 
    background: url(https://profilepageimages.usecue.com/images/equiptstudios/small/7.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}


/*                                                              FOOTER    */

#backtotop {
    /*outline: 1px solid yellow;*/
    padding: 1.5vw;
    position: absolute;
    transform: translate(93.5vw, -4.5vw);
    /*transform: translate(93.5vw, -4.5vw);*/ /* IF PPI */
}

.footer {
    background-color: black;
    position: static;
    width: 100vw;
    max-width: 100%;
    height: 7.5vw; /*8.2*/
    margin: 4.73vw 0vw 0vw 0vw; /*4.2vw*/
    /*margin: 0vw; /*4.2vw*/ /* IF PPI */
    padding: 0px;   
}

.footergrid {
    /* outline: 1px dashed red; */
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 0vw;
    grid-template-rows: 7.5vw;
    align-items: stretch;
    justify-items: right;
}

#copyright {
    /*border: 1px dotted green;*/
    margin: auto 0;
    width: 50vw;
    padding-left: 3.15vw;
}

#footericons {
    /*outline: 1px dotted yellow;*/
    text-align: right !important;
    margin: auto 0;
    width: 20vw;
    padding-right: 2.7vw;
}

.footericon {
    /*outline: 1px dotted white;*/
    width: 2.0vw;
    height: auto;
    /* padding-left: 0.75vw;
    padding-right: 0.75vw;
    padding-top: 1.5vw;
    padding-bottom: 1.5vw; */
    padding: 0.75vw;
    vertical-align: middle;
}


/*                                                              STYLE    */

h1, h2, h3, h4 {
  padding: 0px; 
  margin: 0px;
  font-weight: normal;
  letter-spacing: 0.03em;
  color: black;
  text-align: center;
}

h1 { 
    font-size: 3.15vw; /* 3.9, 3.7, 3.6, 3.3 */
    text-transform: uppercase
    padding: 5vw;
}

h2 { 
    font-size: 2.1vw; /* 2.6, 2.2, 2.4, 2.2 */
    padding: 1.33vw;
}

h3 { 
    font-size: 1.32vw; /* SLIGHTLY BIGGER FOR MENU, SOCIAL MEDIA HANDLES */
    line-height: 168% 
}

h4 {
    font-size: 1.26vw; /* 1.56, 1.36, 1.44, 1.32 */
    line-height: 168% 
}

h5 {
    font-size: 1.32vw; /* 1.26 */
    /*color: white;*/
    text-align: right !important;
    
    padding: 0px; 
    margin: 0px;
    font-weight: normal;
    letter-spacing: 0.03em;
}

h6 {
    font-size: 1.05vw; /* 1.04 */
    color: white;
    text-align: left;

    padding: 0px; 
    margin: 0px;
    font-weight: normal;
    letter-spacing: 0.03em;
    border: none;
}

pre {
    padding: 0px; 
    margin: 0px;
    font-weight: normal;
    letter-spacing: 0.03em;
    font-size: 1.32vw; /* 1.26vw, 1.32vw */
    text-align: right;
    font-family: Bahnschrift, Arial, Helvetica, sans-serif;    
}

p {
    padding: 0px;
    margin: 0px;
    font-weight: normal;
    letter-spacing: 0.03em;
    line-height: 144%; /*136%*/
    color: black;
    text-align: center;
    font-size: 1.26vw;
}

.zigzag p{
    text-align: left !important;
    /*line-height: 156%;*/ 
}

.shop h4{
    line-height: 144% !important; /*144 132*/
}

.shop h6{
    color: black !important;
    text-align: center;
}

.shopnav pre {
    text-align: left;
}

li {
  padding: 0px;
  margin: 0px;
  list-style-type: none;
  font-size: 1.20vw; /* 1.26vw */
  font-weight: normal;
  letter-spacing: 0.03em;
  line-height: 144%; /*136%*/
  text-align: left;
}

a:link, a:visited, a:hover, a:active {
    text-decoration: none;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s; /* 0.3s, 0.5s */
}

#desktopmenu a:link { color: white !important; }
#desktopmenu a:active { color: white !important; }
#desktopmenu a:visited { color: white !important; }
#desktopmenu a:hover { color: black !important; background-color: white; }

#dropdownmenu a:link { color: white !important; }
#dropdownmenu a:active { color: white !important; }
#dropdownmenu a:visited { color: white !important; }
/*#dropdownmenu a:hover { color: black !important; background-color: white; }*/

#backtotop a:link, #backtoshop a:link { color: black; }
#backtotop a:active, #backtoshop a:active { color: black; }
#backtotop a:visited, #backtoshop a:visited { color: black; }
#backtotop a:hover, #backtoshop a:hover { color: gray; }

.zigzagtext a:link, .deck a:link { color: black; }
.zigzagtext a:active, .deck a:active { color: black; }
.zigzagtext a:visited, .deck a:visited { color: black; }
.zigzagtext a:hover, .deck a:hover { color: white; background-color: black; }

.productdetailsbig a:link { color: black !important; }
.productdetailsbig a:active { color: black !important; }
.productdetailsbig a:visited { color: black !important; }
.productdetailsbig a:hover { color: white !important; background-color: black; }

.productdetailssmall a:link { color: black !important; }
.productdetailssmall a:active { color: black !important; }
.productdetailssmall a:visited { color: black !important; }
.productdetailssmall a:hover { color: white !important; background-color: black; }

.footergrid a:link, .ppi a:link { color: black !important; }
.footergrid a:active, .ppi a:active { color: black !important; }
.footergrid a:visited, .ppi a:visited { color: black !important; }
.footergrid a:hover, .ppi a:hover { color: white !important; background-color: black; }

#cookiepopup a:link { color: black !important; }
#cookiepopup a:active { color: black !important; }
#cookiepopup a:visited { color: black !important; }
#cookiepopup a:hover { color: white !important; background-color: black; }

.shop a:link, .shop a h4:link, .shop a h6:link { color: black !important; }
.shop a:active, .shop a h4:active, .shop a h6:active { color: black !important; }
.shop a:visited, .shop a h4:visited, .shop a h6:visited { color: black !important; }
.shop a:hover, .shop a h4:hover, .shop a h6:hover { color: gray !important; }

.pressrelease p a:link { color: black !important; }
.pressrelease p a:active { color: black !important; }
.pressrelease p a:visited { color: black !important; }
.pressrelease p a:hover { color: white !important; background-color: black; }

button {
    -webkit-transition: 0.4s !important;
    -moz-transition: 0.4s !important;
    -o-transition: 0.4s !important;
    transition: 0.4s !important; /* 0.3s, 0.5s */
}

::selection {
  color: white;
  background: black;
}

::-moz-selection {
  color: white;
  background: black;
}