/***** RESET *****/

* {
    box-sizing: border-box;
}

h1, h2, h3, p, ul, ol {
    margin: 0;
    padding: 0;
}

ul, ol {
    list-style-type: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/***** TYPOGRAPHY *****/

body {
    font-family: "Instrument Sans", sans-serif;
    font-weight: 400;
    color: #202320;
}

h1 {
    font-family: "Instrument Sans", sans-serif;
    font-weight: 700;
    font-size: 2em;
    line-height: 1em;
}

#title {
    font-family: "Instrument Sans", sans-serif;
    font-weight: 400;
    font-size: 2em;
    line-height: 1em;
}

#title strong {
    padding-left: 5.5px;
    padding-right: 5.5px;
}

h2 {
    font-family: "Instrument Sans", sans-serif;
    font-weight: 600;
    font-size: 2em;
    line-height: 1em;
    font-style: italic;
}

p {
    font-family: "Instrument Sans", sans-serif;
    font-weight: 400;
    font-size: 1.2em;
    line-height: 1.3em;
}

strong {
    font-weight: 700;
}

#section1, #section2, #section6, #action {
    color: #23662C;
}

.underline {
    text-decoration: underline 0.15em rgba(0, 0, 0, 0);
    transition: text-decoration-color 300ms;
}

.underline:hover {
    text-decoration-color: #53CA5C;
}

/***** COLORS *****/

.blue {
    color: #3598F5;
}

.yellow {
    color: #F5B135;
}

.light-green {
    color: #53CA5C;
}

.red {
    color: #DC2716;
}

/***** ELEMENTS *****/

body {
    background: #F6ECDB;
}

h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    padding: 20px;
}

h2 {
    text-align: center;
    padding-bottom: 2.5em;
}

a {
    color: inherit;
    font-weight: 500;
}

p {
    margin: 0;
    padding: 20px;
}

section {
    margin: 30em 0;
    text-align: center;
}

#fruit {
    padding-top: 30px;
}

#logo {
    display: block;
    margin: 0 auto;
}

#ref {
    display: block;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 40px;
}

/***** ACTION BUTTONS *****/

.action-btn {
    /* width: 475px;
    height: 100px;
    flex-shrink: 0;
    border-radius: 25px;
    background: #202320; */
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 30px;
}

/***** BACKGROUND IMAGES *****/

#wrap1 {
    background-image: linear-gradient(to right, rgba(255,255,255, 0.7) 0 100%), url(images/map.gif);
    width: 100vw;
    height: 100vh;
    background-repeat: no-repeat;
    background-size: auto;
}

#gif {
    text-align: center;
}

#wrap2 {
    margin-top: 30em;
    background-image: url(images/money.gif);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100vw;
    height: 100vh;
}

#money {
    text-align: center;
}

#wrap3 {
    background-image: url(images/programs.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100vw;
    height: 100vh;
    margin-bottom: 30em;
}

#programs {
    text-align: center;
}

#wrap4 {
    background-image: url(images/supermarket.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100vw;
    height: 100vh;
}

#food {
    text-align: center;
}

/* #wrap5 {
    background-image: url(images/matter.png);
    background-repeat: no-repeat;
    background-size: auto;
    width: 100vw;
    height: 90vh;
} */

#matter {
    text-align: center;
}

#wrap6 {
    background-image: url(images/health.png);
    background-repeat: no-repeat;
    background-size: auto;
    width: 100vw;
    height: 100vh;
    margin-bottom: 15em;
}

#health {
    text-align: center;
}

#wrap7 {
    background-image: url(images/minority.png);
    background-repeat: no-repeat;
    background-size: auto;
    width: 100vw;
    height: 100vh;
}

#minority {
    text-align: center;
}

#minority-text {
    padding-top: 12em;
}

#wrap8 {
    background-image: url(images/about.png);
    background-repeat: no-repeat;
    background-size: auto;
    width: 100vw;
    height: 100vh;

    margin: 0 auto;
}

#about {
    text-align: center;
}

#wrap9 {
    background-image: url(images/action.png);
    background-repeat: no-repeat;
    background-size: auto;
    width: 100vw;
    height: 100vh;
    margin-bottom: none;
}

#actions {
    text-align: center;
}

/***** IMAGE SCROLL *****/

/* hide scrollbar */
::-webkit-scrollbar {
    width: 1px;
    height: 1px;
}

::-webkit-scrollbar-button {
    width: 1px;
    height: 1px;
}

.external {
    margin-top: 20em;
    overflow: hidden;
    height: 100vh;
}

.horizontal-scroll-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100vh;
    transform: rotate(-90deg) translate3d(0, -100vh, 0);
    transform-origin: right top;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
    height: 100vw;
    perspective: 1px;
    transform-style: preserve-3d;
    padding-bottom: 10rem;
}

.img-wrapper {
    transform: rotate(90deg);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
    transform-origin: 50% 50%;
    transform: rotate(90deg) translateZ(.1px) scale(0.9) translateX(0px) translateY(-3vh);
    transition: 1s;
}

.img-wrapper:hover {
    min-height: 65vh;
}

.slower {
    transform: rotate(90deg) translateZ(-.2px) scale(1.1) translateX(0%) translateY(-10vh);
}

.slower1 {
    transform: rotate(90deg) translateZ(-.25px) scale(1.05) translateX(0%) translateY(8vh);
}

.slower2 {
    transform: rotate(90deg) translateZ(-.3px) scale(1.3) translateX(0%) translateY(2vh);
}

.slower-down {
    transform: rotate(90deg) translateZ(-.2px) scale(1.1) translateX(0%) translateY(16vh);
}

.faster {
    transform: rotate(90deg) translateZ(.15px) scale(0.8) translateX(0%) translateY(14vh);
}

.faster1 {
    transform: rotate(90deg) translateZ(.05px) scale(0.8) translateX(0%) translateY(10vh);
}

.fastest {
    transform: rotate(90deg) translateZ(.22px) scale(0.7) translateX(-10vh) translateY(-15vh);
}

.vertical {
    transform: rotate(90deg) translateZ(-.15px) scale(1.15) translateX(0%) translateY(0%);
}

.last {
    transform: rotate(90deg) translateZ(-.2px) scale(1.1) translateX(25vh) translateY(-8vh);
}

.img-wrapper a {
    overflow: hidden;
    display: block;
    padding: 1vh;
    background: #DC2716;
    box-shadow: 0 10px 50px #43434382;
}

.grey {
    max-width: 45vh;
    max-height: 50vh;
    transition: .5s;
    vertical-align: top;
    -webkit-filter: grayscale(100%);
    /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

a:hover img {
    filter: none;
}

.scroll-info {
    display: flex;
    align-items: center;
}

/****** RESPONSIVE *****/

/* Phone */
@media screen and (max-width: 480px) {
    h1 {
        padding: 20px;
    }
}