.bg1 {
    background: url("../img/Backgrounds/NA_BG.jpg");
    height: 80vh;
}

.bg2 {
    height: 35.7em;
    background: url("../img/Backgrounds/BG_OC.png");  
}

.parallax {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#aboutUs {
    background-color: #f47b20;
    color: #fff;
    padding: 4em 0;
    text-align: center;
    height: 60vh;
}

#aboutUs h1 {
    font-size: 4em;
    margin-bottom: 1em;
}

/*ABOUT US*/
#aboutUs p {
    font-size: 2em;
}

#aboutUs button a{
    font-size: 2em;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    color: black;
}

#aboutUs button {
    padding: 1.5em; 
    margin-top: 4em;
    border: 3px solid #ec008c;
    border-radius: 20px;
}

#aboutUs button:hover {
    background-color: #7ac143;
    transform: scale(1.1);
    transition: all .3s ease-in;
    cursor: pointer;
}

/*WHAT TO EXPECT*/
#WhatToExpect {
    background-color: #fff;
    color: black;
    text-align: center;
}

#WhatToExpect h2 {
    font-size: 4em;
    margin: 1.5em 0; 
}

#WhatToExpect h3 {
    font-size: 1.5em;
    color: black;
    padding: .5em .5em 0 .5em;
}

.WhatToExpect {
    display: inline-block;
    margin: 0 1% 4em 1%;
    max-width: 27%;
}

.WhatToExpect img {
    max-width: 70%;
    padding: .7em .7em .2em .7em;
}

.WhatToExpect:hover {
    transform: scale(1.1);
    transition: all .4s ease-in-out;
}

.WhatToExpect:nth-child(2) {
    border:solid 3px #7ac143;
}

.WhatToExpect:nth-child(3) {
    border:solid 3px #f47b20;
}

.WhatToExpect:nth-child(4) {
    border:solid 3px #ec008c;
}

.viac, .menej {
    font-size: 1em;
    height: 100%;
    margin: .4em 0 .4em;
    cursor: pointer;
}

.viac:hover, .menej:hover {
    text-decoration: underline;
}

.detail {
    font-size: 1em;
    padding: .8em .8em 0 .8em;
}

/*Partners*/
.partners {
    background-color:#fff;
}

.partners h2 {
    font-size: 4em;
    padding: 1% 0 0% 0;
    text-align: center;
    color: black;
}

.partners-matrix ul {
    text-align: center;
    padding: 5%;
}

.partners-matrix li{
    display: inline-block;
    max-width: 20%;
    padding: 1%;
}

.partners-matrix img {
    max-width: 60%;
    vertical-align: middle;
}

/*MEDIA QUERRIES*/
@media screen and (max-width: 1440px){
    #aboutUs {
        height: 75vh;
    }
    .bg1 {
        background-position: 10% 90%;
    }
}

@media screen and (max-width: 1200px){
    #aboutUs {
        height: 65vh;
    }

    .bg2 {
        background-position: 13% 87%;
    }
}

@media screen and (max-width: 900px){
    .bg1 {
        background: url(../img/Backgrounds/Tablet_NA_BG.png) no-repeat;
        background-position: 40% 60%;
    }

    .bg2 {
        background: url(../img/Backgrounds/Tablet_BG_OC.png) no-repeat;
        background-position: 22% 78%;
        background-position-y: 40%;
    }
    
    .topSneakers {
        display: block;
        max-width: 70%;
        margin: 4em auto;
    }

    .topSneakers p {
        font-size: 1.4em;
    }

    #aboutUs {
        height: 50vh;
    }
}

@media screen and (max-width: 800px){
    #aboutUs {
        height: 45vh;
    }

    .bg2 {
        background: url(../img/Backgrounds/Tablet_2_BG_OC.png) no-repeat;
        background-position: 20% 80%;

    }
}

@media screen and (max-width: 600px){
    .bg1 {
        text-align: center;
    }

    .bg2 {
        background: url(../img/Backgrounds/Tablet_3_BG_OC.png) no-repeat;
        background-position-y: 40%;
    }
}

@media screen and (max-width: 500px){
    .bg1 {
       background: url(../img/Backgrounds/Mobile_NA_BG.png) no-repeat;
       background-position: 18% 82%;
    }

    .bg2 {
        background: url(../img/Backgrounds/Mobile_BG_OC.png) no-repeat;
        background-position: 10% 90%;
    }

    .partners-matrix img {
        max-width: 60%;
        vertical-align: middle;
    }

    .partners-matrix img {
        max-width: 80%;
    }
}

@media screen and (max-width: 420px){
    .bg1 {
       background: url(../img/Backgrounds/Mobile_NA_BG.png) no-repeat;
       background-position:20.5% 79.5%;
       background-position-y: 55%;
    }

    .bg2 {
        background-position: 36% 64%;
    }

    #aboutUs {
        height: 52vh;
    }
}

@media screen and (max-width: 400px){
    #aboutUs {
        height: 20%;
    }
}