/*

    TO DO
    -----
    
*/

@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: none; }
#dropdownmenu { display: none; }
#mobilemenulink { display: block; }
#mobilemenu { display: block; }
#submenu { display: block; }
.desktoponly { display: none; }
.mobileonly { display: block; }


/*                                                              HEADER    */

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

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

#logowrapper {
    margin: auto 0;
    /*outline: 1px dotted white;*/
    height: 15vw;
    max-height: 15vw;
    vertical-align: middle;
    display: flex;
    width: 73vw;
}

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


/*                                                              MOBILE MENU    */

#mobilemenulink {
    /*outline: 1px dotted yellow;*/
    text-align: right;
    margin: auto 0;
    width: 25vw; /*45vw*/
    height: 19.2vw; /*2.7+.18=2.88vw*/
    max-height: 19.2vw;
}

#hamburgerwrapper {
    /*outline: 1px dotted white;*/
    margin: auto 0;
    height: 15.2vw; /*2.88vw*/
    vertical-align: middle;
    display: flex;
    justify-content: flex-end;
    width: auto;
    padding-right: 0vw; /*  4.8*/
}

.hamburger {
    /*outline: 1px dotted red;*/
    display: inline-block;
    height: 8vw; /*2.7vw*/
    margin: auto 0;
    line-height: 8vw;
    /*padding-top: .18vw;*/
    padding: 6.2vw 4.8vw 5vw 11.1vw; /*  7.2*/
    margin: 0vw 0.10vw;
 }
 
 #mobilemenu, #submenu {
    opacity: 0%;
    position: fixed;
    text-align: right;
    line-height: 12vw;
    width: 100vw;
    max-width: 100%;
    height: auto;
    /*background-color: black;*/
    padding-top: 0vw;
    z-index: 2;
    /*-webkit-transition: 0.75s;
    -moz-transition: 0.75s;
    -o-transition: 0.75s;
    transition: 0.75s;*/
 }
 
 #mobilemenu { 
    margin-top: -60vw; /*-45vw  -35vw 50vw-20vw=-30*/ 
    background-color: black;
}
 
 #submenu {
	visibility: hidden;
	/*-webkit-transition: 0.75s;
    -moz-transition: 0.75s;
    -o-transition: 0.75s;
    transition: 0.75s;*/
    margin-top: -35vw; /*50vw-20vw=-30*/
    background-color: black;
 }
 
 #menuwrapper {
    /*border: 1px dotted yellow;*/
    margin: 0vw 0vw 0vw 20vw;
    height: auto;
    vertical-align: right;
    display: block;
    width: 80vw;
    padding: 3.75vw 0vw; /*  4.5*/
}

#menuwrapper h5 {
    /*outline: 1px dotted yellow;*/
    padding-left: 25vw;
}

.menuitem {
    /*outline: 1px dotted green;*/
    height: auto; /*1.75-1.82*/
    margin: 0px;
    line-height: 12.7vw; /*adjust this*/
    padding: 0.9vw 5.2vw 0vw 4.8vw; /* 0.10 */
}

#mobilemenuapron {
    /*background-color: orange;*/
    display: none;
    position: fixed;
    width: 100vw;
    max-width: 100%;
    height: 100vh;
    max-width: 100%;
    overflow: none;
    z-index: 1;    
}

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


/*                                                              HERO    */

.hero {
    position: relative;
    width: 100vw;
    max-width: 100%;
    height: 82.5vw; /*90vw?*/    
    overflow: hidden;
    margin: 0px;
    padding: 0px;
}

.hero img {
    height: 101%; /*100% may leave a thin white line at the top*/
    width: auto;
    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: 8.4vw; /*4.2vw*/
    color: white;
    font-family: Bahnschrift, Arial, Helvetica, sans-serif; /*optional*/
    height: 82.5vw; /*33vw*/
    width: 33.33vw; /*17.5vw, 35vw*/
    opacity: 30%;
}

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

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

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

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

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

#heronavright {
    position: absolute;
    top: 50%;
    right: 0%;
    transform: translate(0%, -50%);
    text-align: right;
    padding-right: 4.2vw; /*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: 100vw 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;
}

#popupimage, #shopupimage {    
    /*display: inline-block; /*block*/
    visibility: hidden;
    /*position: fixed;*/
    width: 80vw; /*80vw 100vw*/   
    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;
}


/*                                                              COOKIES    */

#cookiepopup {
    /*background-color: red;*/
    display: block;
    visibility: hidden;
    position: fixed;
    width: 50vw;
    overflow: none;
    z-index: 5;
    
    /*right: 6vw;*/
    margin: 5% auto;
    left: 0;
    right: 0;
    
    background-color: white;
    border: 0.63vw solid black; /*0.21vw*/
    padding: 4vw 4vw 2.9vw 4vw;
    
    cursor: pointer;
    
    text-align: center;
    
    opacity: 0%;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
}

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

.cookiebutton {   
    background-color: white;
    border: 0.63vw solid black; /*0.21*/
    color: black;
    text-align: center;
    text-decoration: none;
    font-size: 3.6vw; /*4.4*/
    font-family: Bahnschrift, Arial, Helvetica, sans-serif;
    padding: 1.5vw 6.6vw 0.75vw 6.6vw; /*1.6 1.05*/
    
    margin-top: 2.9vw;
    
}

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


/*                                                              SPACING    */

.maintext, .features, .zigzag, .gallery, .products, .calltoaction {
    padding-top: 9vw; /*  9vw*/
}


/*                                                              EFFECTS    */

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


/*                                                              MAIN    */

.maintext {
    /*outline: 1px dotted green;*/
    width: 80vw; /*75vw*/
    margin: 0 auto;
    padding-bottom: 3.2vw; /*  3.2*/
    text-align: center;
}

.headline {
    padding-top: 1.2vw; /*0.63*/
    padding-bottom: 2.8vw; /* 1.4 */
    /*width: 50.8vw;*/
    padding-left: 12.6vw;
    padding-right: 12.6vw;
}

#mainheadline {
    width: 80vw !important;
    padding-left: 0vw !important;
    padding-right: 0vw !important;
}

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

#maindeck {
    padding-top: 3.9vw; /*  3.9*/
    
}

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


/*                                                              FEATURES    */

.features {
    /*outline: 1px dotted blue;*/
    margin: auto;
    width: 75vw; /*80vw*/
    padding: 0vw 0vw 3vw 0vw; /*1.5*/
}

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


.feature {
    width: 72vw; /*21.5*/
    /*outline: 1px dotted black;*/
    padding-top: 15vw; /*  7.5*/
}

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

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


/*                                                              ZIGZAG    */

.zigzag {
    /*outline: 1px dotted yellow;*/
    margin: auto;
    width: 85vw;
    padding: 0vw 0vw 6.6vw 0vw; /*3.6 0 2.6 0  8 3.3 5.65 6.7*/
}

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

.zigzagimage {
    width: 75vw; /*  80 75*/
    height: 52.5vw; /*  56 52.5*/
    /*background-color: black;*/
    margin-top: 14.4vw;
}

.zigzagtext {
    width: 75.0vw; /*  75*/
    margin: auto;
    padding-bottom: 0vw; /*1.23  4.2 9.4 12.4 14.2 15.5 13.3 14.4*/
    /*outline: 1px dotted gray;*/
}

.zigzagtext p {
    width: 71.9vw;
    margin-left: 2.88vw !important; /*  5 2.5 3.1 2.8 2.95*/
    /*outline: 1px dotted green;*/
}

.zigzagtextleft p {
    width: 71.9vw;
    margin-left: 2.88vw !important; /*  5 2.5 3.1 2.8 2.95*/
}

#zigzagimage1 { 
    background: url(../images/content/Montrose-Beach-Football-Club-logo.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    order: 1
}
#zigzagimage2 { 
    background: url(../images/content/Kitswap-jersey.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    order: 3;
}
#zigzagimage3 { 
    background: url(../images/content/Salience-Gaming-logo.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    order: 5;
}
#zigzagimage4 { 
    background: url(../images/content/Ethos-Esports-jersey.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    order: 7;
}
#zigzagtext1{ order: 2; }
#zigzagtext2{ order: 4; }
#zigzagtext3{ order: 6; }
#zigzagtext4{ order: 8; }

.processimage {
    width: 84vw; /*  80 75*/
    height: 52.5vw; /*  56 52.5*/
    /*background-color: black;*/
    margin-top: 14.4vw;
}

#processimage1 { 
    background: url(../images/content/Equipt-jersey-concept-examples.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    overflow: hidden;
    order: 1;
}
#processimage2 { 
    background: url(../images/content/Equipt-final-jersey-design-example.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    overflow: hidden;
    order: 3;
}
#processimage3 { 
    background: url(../images/content/Equipt-jersey-order-information-example.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    overflow: hidden;
    order: 5;
}
#processimage4 { 
    background: url(../images/content/Equipt-jersey-production-process.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    overflow: hidden;
    order: 7;
}
#processimage5 { 
    background: url(../images/content/Equipt-jersey-order-information-example.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    overflow: hidden;
    order: 9;
}
#processimage6 { 
    background: url(../images/content/Equipt-jersey-production-process.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    overflow: hidden;
    order: 11;
}
#processtext1{ order: 2; }
#processtext2{ order: 4; }
#processtext3{ order: 6; }
#processtext4{ order: 8; }
#processtext5{ order: 10; }
#processtext6{ order: 12; }

/*                                                              GALLERY    */

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

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


.galleryimage{   
    width: 40vw; /*20  36*/
    height: 30vw; /*15  27*/
}

#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/580-Barbell-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/Salience-Gaming-logo.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}

.soccergalleryimage{   
    width: 40vw; /*20  36*/
    height: 36vw; /*15  27*/
}

#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: 12vw; } /*9vw*/

.partnergalleryimage{   
    width: 40vw; /*20  36*/
    height: 32vw; /*15  27*/
}

#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);
    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);
    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 red;*/
    margin: auto;
    width: 90vw; /*80vw*/
    padding: 0vw 0vw 9vw 0vw; /*3 6*/
}

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

.shopitem {
    width: 90vw; /*21.5*/
    /*outline: 1px dotted black;*/
    padding-top: 15vw; /*  7.5*/
}

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

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

.shopitemimagehover:hover {
    opacity: 100%;
}

.shopnav {
    /*outline: 1px dotted black;*/
    width: 35vw; /*22vw*/
    text-align: left;
    margin: 5vw 0vw 7.5vw 5vw; /*1.5 0 0 2.0*/
}

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

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

/*                                                              PRODUCTS    */

.products {
    /*outline: 1px dotted blue;*/
    margin: auto;
    width: 80vw;
    text-align: center;
    padding: 7.73vw 0vw 0.85vw 0vw; /*  7 10 8.8 7.5 7.9 7.7 7.85*/
}

.producttable {
    margin: auto;
    margin-top: 10vw; /*  7.2*/
}

table {
    border: 0px;
}

th, td { 
    border: 0.63vw solid black;
    display: block;
    width: 75vw !important;
}

.productpricebig h1, .productpricesmall h1 {
    font-size: 6.4vw !important;
    padding: 2.75vw 0vw 1.81vw 0vw;
}

.productpricebig, .productpricesmall {
    padding: 0px;
}

.productdetailsbig, .productdetailssmall {
    border-top: none;
    padding: 4vw 0vw 6.25vw 0vw; /*  6.5 6*/
}

.productdetailsbig li, .productdetailssmall li {
    
}

.productpricebig { }
.productdetailsbig { }
.productpricesmall { }
.productdetailssmall { }

#details1soccer { padding: 0vw 0vw 0vw 6.2vw; } /*6.2*/
#details2soccer { padding: 0vw 0vw 0vw 6.2vw; } /*10.2*/
#details3soccer { padding: 0vw 0vw 0vw 10.2vw; }
#details4soccer { padding: 0vw 0vw 0vw 10.2vw; }

#details1esports { padding: 0vw 0vw 0vw 6.2vw; } /*6.2*/
#details2esports { padding: 0vw 0vw 0vw 6.2vw; } /*10.2*/
#details3esports { padding: 0vw 0vw 0vw 6.2vw; }
#details4esports { padding: 0vw 0vw 0vw 7.2vw; }


/*                                                              CALL TO ACTION    */

.calltoaction{
    /*outline: 1px dotted red;*/
    width: 85vw; /*  80*/
    margin: auto;
    text-align: center;
    padding-top: 9vw; /*2.8  9*/
}

.calltoaction h2 {
    padding-bottom: 6.6vw; /*2.325*/
}

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

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

#calltoactionhome {
    /*padding-top: 0vw !important;*/
    /*margin-top: 0vw;*/
}


/*                                                              CONTACT    */

#maintextnohero { 
    padding-bottom: 3.2vw;
}

#headlinenohero {
    padding-top: 3.5vw; /*1.26  3.78 4.4 3.6 3.4*/
    width: 60vw !important;
}

#decknohero {
    padding-top: 3.0vw; /*  3.9*/
}

#decknohero h3 {
    padding: 0.9vw 0vw 0.0vw 0vw; /*1.1 0 0 0*/    
}

.contact {
    /*padding-top: 9vw; /*2.52  11*/
    padding: 6.4vw 0vw 4.5vw 0vw; /*  9 4.5 5.8 6.4 6.8 6.6*/
}

form {
    /*outline: 1px dotted red;*/
    width: 85vw;
    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: 4.4vw; /*1.38*/
  font-weight: normal;
  letter-spacing: 0.03em; /*0.03em*/
  margin: 0px;
  border: none;
  box-sizing: border-box;
  background-color: white;
  color: black; /*gray*/
  border: 0.63vw solid black;
  padding: 2.40vw 3vw 1.59vw 3vw; /*.50 1*/
  margin-bottom: 3.72vw; /*1.24*/
}

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;
}

select:invalid { color: gray; }

textarea { 
    resize: none;
}

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

.contactname, .contactorg, .contactemail, .contactdate, .contactmessage {
    width: 85vw;
}

.contactmessage {
    height: 42.5vw; /*39*/
}

.contactbuttonwrapper {
    text-align: center;
}

.contactbutton {
    background-color: white;
    border: 0.63vw solid black;
    color: black;
    text-align: center;
    text-decoration: none;
    padding: 2.75vw 8.25vw 1.95vw 8.25vw; /*.65 2.23 .52 2.23*/
    font-family: Bahnschrift, Arial, Helvetica, sans-serif;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
} 

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


/*                                                              ORDER    */

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

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

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


select {
  padding: 2.4vw 3vw 2.0vw 2.2vw!important; /*0.50 1  1.16 total*/
}

.ordername, .orderemail, .orderkitsleeves, .ordercountrylarge {
    width: 85vw; /*85vw*/
}

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

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

.orderkitsize, .orderjerseysize, .ordershortssize {
    width: 20vw;
    margin-left: 2.755vw !important;
}

.orderkitnumber, .orderjerseynumber {    
    width: 31vw;
}

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

#ordersubmit {
    margin-top: 3.76vw;
}


/*                                                              TRACKER    */

.tracker {
    padding-bottom: 6.6vw; 
}

.trackerimage_horizontal{
    display: none;
}

.trackerimage_vertical{
    border: 0.63vw solid black;
    display: block;
    margin: auto;
    width: 75vw; /*75-85*/  
}


/*                                                              CONTRACT    */

#longtext {
    padding-bottom: 3.2vw;
    width: 85vw;
}

#headlinelongtext {
    padding-top: 3.2vw; /*3.5*/
    padding-left: 0vw;
    padding-right: 0vw;
    width: 85vw !important; /*80*/
}

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

#signature {
    padding-top: 3.2vw; /*6.4*/
}

#contractform input[type=text], #contractform input[type=email] {
    width: 85vw !important;
}

.longtext{
    width: 85vw;
    margin: 0 auto;
}

.longtext p {
    text-align: left;
    font-size: 4.2vw;
    line-height: 136%;
}

.longtext h3 {
    font-size: 6.4vw;
    text-align: left;
    margin-top: 4.2vw;
}


/*                                                              PRESS RELEASE    */

#pressrelease {
    padding-bottom: 3.2vw;
    width: 90vw;
}

#headlinepressrelease {
    padding-top: 3.2vw; /*3.5*/
    padding-left: 0vw;
    padding-right: 0vw;
    width: 90vw !important; /*85*/
}

.pressrelease{
    width: 85vw;
    margin: 0 auto;
}

.pressrelease p {
    text-align: left;
    font-size: 4.2vw;
    line-height: 144%; /*136*/
}

.pressrelease h3 {
    font-size: 6.4vw;
    text-align: left;
    margin-top: 4.2vw;
}


/*                                                              BALLOT    */

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


/*                                                              SOCIALS    */

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

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

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

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

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


/*                                                              PPI    */

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

.ppigrid {
    display: grid;
    grid-template-columns: 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: 50vw;
}

.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;*/
    position: absolute;
    transform: translate(87vw, -13.75vw); /*  85, -12.5*/
    padding: 0px;
    margin: 0px;
}

#backtotop h1 {
    font-size: 11.5vw !important;
    padding: 4vw 2vw 4vw 4vw;
}

.footer {
    background-color: black;
    position: static;
    width: 100vw;
    max-width: 100%;
    height: 40vw; 
    margin: 14vw 0vw 0vw 0vw; /*4.73  15 12*/
    padding: 0px;
}

.footergrid {
    /*outline: 1px dashed red;*/
    height: 30vw;
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 0vw;
    grid-template-rows: 60% auto;
    align-items: stretch;
    justify-items: center;
    padding-top: 5vw;
    padding-bottom: 5vw;
}

#footericons {
    /*outline: 1px dotted yellow;*/
    text-align: center !important;
    margin: auto 0;
    padding: 0px;
    width: auto;
    order: 1;
}

.footericon {
    /*outline: 1px dotted white;*/
    width: 9vw; /*2.0vw*/
    height: auto;
    padding: 0vw 2vw;
    margin: 0vw 0.6vw; /*  1.5*/
    vertical-align: middle;   
}

#copyright {
    /*border: 1px dotted green;*/
    margin: auto 0;
    width: auto;    
    padding: 0vw 0vw;
    padding-bottom: 1.5vw;
    order: 2;
}


/*                                                              STYLE    */

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

h1 { 
    font-size: 8vw; /*3.15*/
    text-transform: uppercase
    padding: 5vw;
    line-height: 136%;
}

h2 { 
    font-size: 6.4vw; /*  6.5*/
    padding: 3.99vw; /*1.33*/
}

h3 { 
    font-size: 4.2vw; /*  4.5, 4.4, */
    line-height: 136% /*168 136*/
}

h4 {
    font-size: 4.4vw; /*1.26*/
    line-height: 136% /*168*/
}

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

h6 {
    font-size: 4.2vw; /*  5.05*/
    color: white;
    text-align: center;
    padding: 0px; 
    margin: 0px;
    font-weight: normal;
    letter-spacing: 0.03em;
}

pre {
    padding: 0px; 
    margin: 0px;
    font-weight: normal;
    letter-spacing: 0.03em;
    font-size: 4.2vw; /* 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: 136%; /*136 or 144*/
    color: black;
    text-align: center;
    font-size: 4.2vw; /*1.26*/
}

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

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

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

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

a:link, a:visited, a:hover, a:active {
    text-decoration: none;
    -webkit-transition: margin 0.4s;
    -moz-transition: margin 0.4s;
    -o-transition: margin 0.4;
    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; }

#mobilemenulink a:link { color: white !important; }
#mobilemenulink a:active { color: white !important; }
#mobilemenulink a:visited { color: white !important; }
#mobilemenulink a:hover { color: white !important;}

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

#submenu a:link { color: white !important; }
#submenu a:active { color: white !important; }
#submenu a:visited { color: white !important; }
#submenu 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; }

.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;
}