*,
*:after,
*:before {
    border: 0;
    outline: 0;
    line-height: inherit;
    text-decoration: none;
    vertical-align: middle;
    box-sizing: border-box;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    position: relative;
    margin: 0;
    padding: 0;
}

html {
    font-size: calc(10px + (1vw * 1.778));
    /* ^ Thanks android!*/
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    line-height: 1.4;
    width: 100vw;
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    background: #000;
    color: #FFF;
}

body {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto auto auto;
    grid-template-areas: "header" "main" "footer";
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

main {
    padding: 1rem;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
li,
blockquote {
    display: block;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: bold;
}

h1 {
    font-size: 3em;
}

h2 {
    font-size: 2.66em;
}

h3 {
    font-size: 2.33em;
}

h4 {
    font-size: 2em;
}

h5 {
    font-size: 1.66em;
}

h6 {
    font-size: 1.33em;
}

p,
li {
    font-size: 1em;
}

ul,
ol {
    padding: 0;
    list-style: none;
}

li {
    display: list-item;
}

li>h1,
li>h2,
li>h3,
li>h4,
li>h5,
li>h6 {
    padding: 0;
}

em,
i {
    font-style: italic;
}

strong,
b {
    font-weight: 700;
}

b,
big,
i,
small,
abbr,
acronym,
cite,
code,
dfn,
em,
kbd,
strong,
samp,
time,
var,
p,
a,
bdo,
q,
span,
u {
    vertical-align: top;
}

article {
    padding: 0;
}

section {
    padding: 0;
}

.bannerabout {
    background-color: #000;
    background-image: url('img/aboutoctivo.jpg');
    height: 30vh;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.themewhite {
    background: #FFF;
    color: #8F8E8E;
    padding: 3rem 10vw;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-column-gap: 0;
    grid-row-gap: 0;
    grid-template-areas: "themewhitesection" "themewhiteaside";
    justify-content: center;
}

.themewhite section {
    grid-area: themewhitesection;
}

.themewhite aside {
    grid-area: themewhiteaside;
}

.themewhite h1,
.themewhite h2 {
    font-size: 2rem;
    color: #656565;
}

.themeblack {
    background: #000 url('img/aboutbg.jpg');
    color: #FFF;
    padding: 4rem 10vw 10rem 10vw;
    background-size: cover;
}

.themeblack section {
    width: 100%;
    display: inline-block;
    vertical-align: top;
}

.themeblack h1 {
    margin-top: 2rem;
    font-size: 2rem;
}

.themewhite p,
.themeblack p {
    padding: 1rem 0;
    font-size: 1.2rem;
    line-height: 1.4rem;
    text-align: justify;
}

.banner {
    width: 100vw;
    height: 90vh;
    overflow: hidden;
}

.bannerWrap {
    transition: all 0.8s ease-in-out;
    display: grid;
    grid-template-columns: 100vw 100vw 100vw;
    grid-template-rows: auto;
    grid-column-gap: 0;
    grid-row-gap: 0;
    grid-template-areas: ". . .";
    justify-content: center;
    background-color: #000;
    background-image: url('img/banner1.jpg'), url('img/banner3.jpg'), url('img/banner2.jpg');
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: right 200vw center, left 200vw center, center;
    width: 300vw;
}

.grunge1,
.grunge2 {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: absolute;
    top: 0;
    left: -50vw;
}

.grunge1 {
    background-image: url('img/grunge1.png');
    transition: all 1s ease-in-out;
    width: 150vw;
    height: 100%;
}

.grunge2 {
    background-image: url('img/grunge2.png');
    transition: all 1s ease-in-out;
    width: 200vw;
    height: 100%;
}

.hero,
.hero2,
.hero3 {
    background-position: left 30vw bottom;
    height: 90vh;
    background-image: url('img/banner1-jersey.png');
    background-size: auto 90%;
    background-repeat: no-repeat;
    display: block;
    width: 100%;
    padding: 0 10vw;
    padding-top: 40vh;
    color: #FFF;
    overflow: hidden;
}

.hero2 {
    background-image: none;
}

.hero3 {
    background-image: url('img/banner3-jersey.png');
}

.logobg {
    background: #4F4F4F;
    height: 6rem;
    width: 100%;
    display: none;
    position: absolute;
    bottom: 0;
}

.header {
    display: grid;
    grid-template-columns: 10vw 45vw 45vw;
    grid-template-rows: auto;
    grid-template-areas: "menu logo hotline";
    color: #FFF;
    background: rgba(0, 0, 0, 0.8);
    padding: 0.5rem 0 0.5rem 0;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
}

.herotext,
.herotext3 {
    width: 80vw;
    height: 20vh;
    color: rgba(0, 0, 0, 0);
    display: block;
    background-image: url('img/herotext.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom left;
    margin: 0;
}

.herotext3 {
    background-image: url('img/uniquedesign.svg');
}

.lookgoodwinning,
.octivomono {
    width: 80vw;
    height: 20vh;
    background-image: url('img/lgw.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom left;
    color: rgba(0, 0, 0, 0);
    display: block;
    position: absolute;
    right: 10vw;
}

.octivomono {
    width: 40vw;
    height: 20vh;
    position: absolute;
    right: 10vw;
    bottom: 10vh;
    background-image: url('img/octivomono.svg');
}

.herotext2 {
    text-shadow: 1px 2px 3px #000;
    font-size: 1.4rem;
    line-height: 1.6rem;
    margin-top: 0.5rem;
}

.austmadeowned {
    display: none;
    margin: 3rem 0;
    width:3rem;
    height:auto;
}

.logo {
    grid-area: logo;
    justify-self: stretch;
}

.logo img {
    display: block;
    margin: 0.5rem auto;
    height: 2rem;
}

input.mobilemenu {
    display: none;
}

input.mobilemenu:checked+ul {
    height: auto;
    overflow: visible;
    position: absolute;
    left: 0;
    top: 3rem;
    width: 50vw;
    text-align: left;
    background: #000;
}

label.mobilemenu {
    display: block;
    width: 3rem;
    height: 3rem;
    padding: 0;
    overflow: hidden;
}

label.mobilemenu svg {
    display: block;
    width: 3rem;
    height: 3rem;
    padding-top: 0.4rem;
    padding-left: 0.5rem;
}

nav {
    grid-area: menu;
    justify-self: stretch;
    text-align: center;
    height: 3rem;
}

nav ul {
    padding: 0;
    display: block;
    margin: auto auto;
    height: 100%;
    line-height: 3rem;
    height: 0rem;
    overflow: hidden;
}

nav ul li {
    display: inline-block;
    text-transform: uppercase;
    margin: 0 1rem;
    font-weight: 300;
}

.header .hotline {
    grid-area: hotline;
    justify-self: stretch;
    display: block;
    font-size: 1rem;
    font-weight: 900;
    display: block;
    margin: auto auto;
}

.hotline a {
    display: block;
    color: #CD9322
}

.logolist {
    display: none;
}

.categories {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    grid-template-areas: "catheader" ". " "." "." "." "." "." ".";
    justify-content: center;
    background: linear-gradient(45deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url('img/catbg.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    padding: 3rem 10vw;
}

.catheader {
    grid-area: catheader;
}

.catheader p {
    font-size: 1.2rem;
    margin: 1rem 0;
}

h1.selectcat {
    width: 100%;
    background-image: url('img/selectcat.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom left;
    display: block;
    color: rgba(0, 0, 0, 0);
    height: 2rem;
}

.category {
    height: 33vh;
    background: #FFF;
    border: 0.2rem solid #FFF;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    overflow: hidden;
}

.category.soon {
    pointer-events: none;
    border-color: #555;
}

.category.soon:after {
    content: '';
    background: #000;
    display: block;
    text-align: center;
    text-transform: uppercase;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.7;
}

.catsoccer {
    background-image: url('img/cat-soccer.jpg');
}

.catbasketball {
    background-image: url('img/cat-basketball.jpg');
}

.catrugby {
    background-image: url('img/cat-rugby.jpg');
}

.catnetball {
    background-image: url('img/cat-netball.jpg');
}

.cathockey {
    background-image: url('img/cat-hockey.jpg');
}

.catfishing {
    background-image: url('img/cat-fishing.jpg');
}

.catactive {
    background-image: url('img/cat-active.jpg');
}

.catmotox {
    background-image: url('img/cat-motox.jpg');
}

.catpolos {
    background-image: url('img/cat-polos.jpg');
}

.catcricket {
    background-image: url('img/cat-cricket.jpg');
}

.cathoodies {
    background-image: url('img/cat-hoodies.jpg');
}

.catswimming {
    background-image: url('img/cat-swimming.jpg');
}

.catgridiron {
    background-image: url('img/cat-gridiron.jpg');
}

.category h3 {
    display: block;
    line-height: 4.5rem;
    font-size: 1.8rem;
    text-align: center;
    font-weight: 900;
    color: #4E4E4E;
    text-transform: uppercase;
    background: #FFF;
    position: absolute;
    bottom: 0;
    width: 100%;
}

.footer {
    background: linear-gradient(45deg, rgba(230, 229, 229, 0.8), rgba(230, 229, 229, 0.8)), url('img/contact.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    color: #626262;
    padding: 3rem 10vw;
}

.footer .consvg {
    background-image: url('img/contact.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom left;
    display: block;
    color: rgba(0, 0, 0, 0);
    width: 50%;
    height: 3rem;
}

.footer p {
    padding: 1rem 0;
    font-size: 1.2rem;
}

.footer form {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-column-gap: 2rem;
    grid-row-gap: 0;
    grid-template-areas: "." "." ".";
    justify-content: stretch;
}

.footer .inputs,
.footer .textpad {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 1fr 1fr 1fr;
    grid-row-gap: 1rem;
    grid-template-areas: "." "." ".";
    padding-top: 3rem;
}

.footer .textpad {
    grid-template-areas: "textbox" "textbox" "submit";
}

.footer form input,
.footer form textarea {
    background: #E6E5E5;
    border: 1px solid #A6A2A2;
    width: 100%;
    resize: none;
    padding: 0.5rem;
}

.footer form input.submit {
    background: #AAA;
    color: #FFF;
    font-weight: bold;
    border: 1px solid #A6A2A2;
    width: 100%;
    resize: none;
    padding: 0.5rem;
    grid-area: submit;
}

.footer form textarea {
    grid-area: textbox
}

.themewhite aside {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas: "." "." "." "." "." "conditions" "conditions";
    padding-top: 3rem;
    vertical-align: middle;
}

.themewhite aside h2 {
    font-size: 1.2rem;
    margin: 0;
    padding: 0;
    vertical-align: middle;
}

.themewhite aside li {
    margin-bottom: 1rem;
}

.themewhite aside li img {
    display: inline-block;
    width: 15%;
}

.themewhite aside li div {
    display: inline-block;
    width: 80%;
    padding-left: 1rem;
}

.themewhite aside li p {
    padding: 0;
}

.themewhite .conditions {
    grid-area: conditions;
    font-size: 0.7rem;
}

.productlist {
    background: #FFF;
    color: #000;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    padding: 3rem 10vw;
}

.productlist .productBtn {
    height: 33vh;
    cursor: pointer;
}

.productlist .productImg {
    width: 100%;
    max-width: 400px;
    height: 100%;
    display: block;
    margin: 0 auto;
    background-position: top -20px center;
    background-size: auto 200%;
    pointer-events: none;
}

.productlist .productId {
    text-align: center;
    vertical-align: middle;
    background: #DFDFDF;
    width: 80%;
    height: 3rem;
    font-weight: 700;
    text-transform: uppercase;
    position: absolute;
    bottom: 0;
    left: 10%;
    line-height: 2rem;
    border-top: 1rem solid #FFF;
    pointer-events: none;
}

.products.banner {
    height: 50vh;
    background-size: cover;
}

.products.banner.soccer {
    background-image: url('img/productsoccer.jpg');
}

.products.banner.basketball {
    background-image: url('img/productbasketball.jpg');
}

.speel {
    position: absolute;
    bottom: 0;
    padding: 1rem 10vw;
    vertical-align: middle;
    background: rgba(0, 0, 0, 0.6)
}

.speel h1 {
    text-transform: uppercase;
    display: block;
}

.speel p {
    display: block;
    vertical-align: middle;
}

.lightbox {
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    display: none;
    cursor: pointer;
}

.lightbox.active {
    display: block;
    animation: shrinkfadein 0.3s
}

.lightbox.inactive {
    animation: growfadeout 0.3s
}

@keyframes shrinkfadein {
    0% {
        opacity: 0;
        transform: scale3d(1.2, 1.2, 1);
    }
    100% {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}

@keyframes growfadeout {
    0% {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
    100% {
        opacity: 0;
        transform: scale3d(1.2, 1.2, 1);
    }
}

.productFocus {
    background: #FFF;
    width: 100vw;
    height: 100vh;
    position: absolute;
    left: 0;
    top: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.closeBtn {
    width: 4rem;
    height: 4rem;
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    padding: 1rem;
    cursor: pointer;
}

.closeBtn svg {
    pointer-events: none;
}

@media only screen and (min-device-width: 400px) and (orientation: landscape) {
    html {
        font-size: calc(10px + (1vw * 0.562));
    }
    body {
        overflow-x: hidden;
    }
    .header {
        grid-template-columns: 30% 40% 30%;
        grid-template-rows: auto;
        grid-template-areas: "logo menu hotline";
        padding: 2rem 0 0.5rem 0;
    }
    .header .hotline {
        font-size: 1.5rem;
    }
    .header .hotline a {
        display: inline;
    }
    label.mobilemenu {
        display: none;
    }
    nav ul {
        height: 3rem;
    }
    .bannerWrap {
        transition: all 1s ease-in-out;
        display: grid;
        grid-template-columns: 100vw 100vw 100vw;
        grid-template-rows: auto;
        grid-column-gap: 0;
        grid-row-gap: 0;
        grid-template-areas: ". . .";
        justify-content: center;
        background-color: #000;
        background-image: url('img/banner1.jpg'), url('img/banner2.jpg'), url('img/banner3.jpg');
        background-size: 100vw auto;
        background-repeat: no-repeat;
        background-position: left, center, right;
        width: 300vw;
    }
    .hero,
    .hero2,
    .hero3 {
        background-position: bottom 0 right 15%;
        padding: 25vh 10vw;
    }
    .herotext,
    .herotext3 {
        width: 30vw;
        height: 15vh;
    }
    .herotext2 {
        margin-top: 1rem;
        font-size: 1rem;
    }
    .austmadeowned {
        display: block;
    }
    .lookgoodwinning {
        width: 30vw;
        height: 10vh;
        position: absolute;
        bottom: 30vh;
        right: 10vw;
    }
    .octivomono {
        width: 10vw;
        height: 15vh;
        position: absolute;
        right: 10vw;
        bottom: 15vh;
        background-image: url('img/octivomono.svg');
    }
    .logolist {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: 3.5rem;
        grid-column-gap: 1rem;
        grid-row-gap: 1rem;
        grid-template-areas: ". . . . . . . . .";
        justify-content: center;
        padding: 1rem 10%;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
    }
    .logolist>li {
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        width: 100%;
        height: 100%;
        display: block;
    }
    .logolist .justfootball {
        background-image: url('img/affil/justfootball.png');
    }
    .logolist .nfu {
        background-image: url('img/affil/nfu.png');
    }
    .logolist .anz {
        background-image: url('img/affil/anz.png');
    }
    .logolist .stanford {
        background-image: url('img/affil/stanford.png');
    }
    .logolist .kangaroo {
        background-image: url('img/affil/kangaroo.png');
    }
    .logolist .knights {
        background-image: url('img/affil/knights.png');
    }
    .logolist .boq {
        background-image: url('img/affil/boq.png');
    }
    .logolist .qgov {
        background-image: url('img/affil/qgov.png');
    }
    .logolist .arb {
        background-image: url('img/affil/arb.png');
    }
    .logobg {
        display: block;
    }
    .categories {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: auto;
        grid-column-gap: 2rem;
        grid-row-gap: 2rem;
        grid-template-areas: "catheader catheader catheader catheader " ". . . . " ". . . . " ". . . .";
        justify-content: center;
        background: linear-gradient(45deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url('img/catbg.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        padding: 5rem 10vw;
    }
    h1.selectcat {
        width: 50%;
        height: 5rem;
    }
    .category {
        height: 50vh;
        background-size: 100% auto;
        transition: all 0.4s ease-in-out;
    }
    .category:hover {
        background-size: 105% auto;
        border: 0.2rem solid #2D9CDB;
    }
    .footer form {
        grid-template-columns: 1.2fr 0.8fr 0.8fr;
        grid-template-rows: auto;
        grid-column-gap: 2rem;
        grid-row-gap: 0;
        grid-template-areas: ". . .";
    }
    .footer .inputs,
    .footer .textpad {
        grid-row-gap: 2.5rem;
        padding-top: 3rem;
    }
    .themewhite {
        background: #FFF;
        color: #8F8E8E;
        padding: 3rem 10vw;
        display: grid;
        grid-template-columns: 60% 40%;
        grid-template-rows: auto;
        grid-column-gap: 0;
        grid-row-gap: 0;
        grid-template-areas: "themewhitesection themewhiteaside";
        justify-content: center;
    }
    .themewhite p,
    .themeblack p {
        padding: 0rem 5rem 1.5rem 0;
        text-align: left;
    }
    .themewhite aside li img {
        width: 14%;
    }
    .themewhite aside li div {
        width: 84%;
    }
    .themewhite aside h2 {
        font-size: 1.5rem;
    }
    .themeblack section {
        width: 49%;
    }
    .speel h1 {
        text-transform: uppercase;
        display: inline-block;
        width: 29%;
    }
    .speel p {
        display: inline-block;
        width: 70%;
        vertical-align: middle;
    }
    .productlist {
        background: #FFF;
        color: #000;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: auto;
        padding: 3rem 10vw;
    }
    .productlist .productBtn {
        height: 40vh;
    }
    .productFocus {
        background: #FFF;
        width: 70vw;
        height: 80vh;
        position: absolute;
        left: 15vw;
        top: 10vh;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }
    .products.banner {
        height: 40vh;
    }
    .productlist .productImg {
        background-position: top -50px center;
    }
}

@media only screen and (min-aspect-ratio: 17/9) and (orientation: landscape) {
    html {
        font-size: calc(10px + (1vw * 0.428));
    }
}