@font-face {
    font-family: 'AvenirM';
    src: url('AvenirLTStd-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Futura';
    src: url('FuturaStd-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Avenir';
    src: url('AvenirLTStd-Book.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Futura Med';
    src: url('FuturaStd-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

a {
    color: blue;
}

html {
    width: 100%;
}

#waltergallery {
    display: none;
}

#wassilygallery {
    display: none;
}

#josefgallery {
    display: none;
}

#galleryphotos {
    display: none;
}

#wrapper {
    width: 100%;
    overflow: hidden;
    position: absolute;
}

.redabout {
    display: none;
}

h1 {
    padding-top: .2em;
    font-family: 'Joschmi';
    font-size: 5em;
    text-align: center;
}

nav p {
    font-family: futura;
    text-align: center;
}

header h2 {
    font-family: 'Futura';
    text-align: center;
    padding: .2em 0 1em 0;
}

body {
    font-family: 'Avenir';
}

.A {
    display: none;
}

header {
    background-color: #0000ff;
}

header h1 {
    color: white;
}

header h2 {
    color: #fff200;
}

header nav {
    padding-bottom: .8em;
    padding-top: .8em;
    background-color: #fff200;
}

header nav a {
    padding: .2em;
    font-size: 1.5em;
    font-family: Futura;
    text-decoration: none;
    display: block;
    text-align: center;
}

header a:hover {
    color: #ed1c24;
}

section {
    padding-bottom: 1em;
}

section h2 {
    background-color: #ed1c24;
    font-family: futura;
    font-size: 2em;
    padding: .7em .5em;
    color: white;
}

section p {
    padding: .5em 1.2em;
    line-height: 1.4em;
}

section img {
    width: 100%;
}

#gallery h2 {
    background-color: transparent;
    color: black;
    text-align: center;
    font-size: 20px;
}

#gallery a {
    color: red;
    text-decoration: none;
}

footer {
    background-color: #0000ff;
}

footer p {
    color: white;
    font-size: 1.5em;
    padding: .5em;
}

footer a {
    color: #fff200;
    text-decoration: none;
}

footer {
    padding: 1em 0;
    text-align: center;
}

@media screen and (min-width: 1080px) {
    header {
        position: relative;
        background-color: white;
    }
    p {
        font-size: 1.2vw
    }
    h2 {
        padding: 0;
        margin: 0;
    }
    .redabout {
        display: block;
        font-family: 'avenirm';
        width: 45vw;
        z-index: -1;
        text-align: right;
        transform: rotate(-30deg);
        position: absolute;
        left: -24vw;
        top: 1vw;
    }
    .redabout p {
        color: white;
        font-size: 1.75vw;
    }
    .red {
        transform: rotate(-30deg);
        left: -32vw;
        top: -20.3vw;
        position: absolute;
        width: 50vw;
        height: 50vw;
        background-color: #ed1c24;
        z-index: -2;
    }
    .blue {
        position: absolute;
        width: 80vw;
        height: 180vw;
        background-color: #0000ff;
        left: 84vw;
        top: -16.5vw;
        transform: rotate(-30deg);
        z-index: 1;
    }
    header h1 {
        transform: rotate(-30deg);
        color: black;
        font-size: 16vw;
        position: absolute;
        left: 8vw;
        top: 4vw;
    }
    header h2 {
        position: absolute;
        color: white;
        transform: rotate(-30deg);
        font-size: 7vw;
        right: 14vw;
        z-index: 2;
        top: 8vw;
        font-family: 'reross-rectangular'
    }
    header nav {
        background-color: transparent;
        transform: rotate(-30deg);
        top: 10vw;
        left: 57vw;
        position: absolute;
        z-index: 2;
        font-size: 2vw;
    }
    header nav a {
        color: #fff200;
        text-align: left;
        font-family: 'Futura Med';
    }
    
    header nav a:visited {
        color: #fff200;
        }
    
    header nav a:hover {
        color: #ed1c24;
        
    }
    
    header nav p {
        color: white;
        font-family: 'Futura Med';
        font-size: 3vw;
        line-height: 4vw;
        width: 50vw;
        text-align: left;
    }
    #about {
        position: relative;
        top: 48vw;
        background-color: transparent;
        display: grid;
        grid-template-columns: 5fr 7fr;
    }
    #about h2 {
        text-align: right;
        padding: 0 10px 0 0;
        position: relative;
        top: 4vw;
    }
    #about p {
        margin: 0;
        padding: 0;
        width: 43%;
        position: relative;
        top: 9vw;
    }
    .A {
        display: block;
        font-family: 'Futura';
        color: #fff200;
        font-size: 70vw;
        position: absolute;
        top: -8vw;
        left: -5vw;
        z-index: -1;
    }
    #walter {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        margin-top: 80vw;
        grid-template-areas: "left right" "left right2"
    }
    .wi {
        grid-area: left;
    }
    .w2 {
        grid-area: right;
    }
    .wp {
        grid-area: right2;
    }
    #walter img {
        width: 33vw;
        z-index: 1;
        margin-left: 20vw
    }
    #walter h2 {
        position: relative;
        padding: 0;
        color: #ed1c24;
        display: inline;
        z-index: 2;
        top: -6vw;
        left: -2vw
    }
    .redwalter {
        position: absolute;
        background-color: #0000ff;
        width: 94vw;
        height: 94vw;
        left: -42vw;
        top: 95vw;
        border-radius: 50%;
        z-index: -2
    }
    #walter p {
        padding: 0;
        margin-left: 8vw;
        width: 25vw;
        float: right;
        display: inline;
    }
    #wassilyred {
        position: relative;
        top: 10vw;
        ;
        z-index: -2;
    }
    .wassilyred {
        position: absolute;
        width: 200vw;
        height: 6vw;
        background-color: #ed1c24;
        z-index: -2;
        transform: rotate(30deg);
        left: -50vw;
        top: -4vw;
    }
    .wassilyred2 {
        position: absolute;
        width: 200vw;
        height: 4vw;
        background-color: #ed1c24;
        z-index: -2;
        transform: rotate(-3deg);
        left: -50vw;
        top: 30vw;
    }
    .wassilyred3 {
        position: absolute;
        width: 180vw;
        height: 18vw;
        background-color: #ed1c24;
        z-index: -2;
        transform: rotate(29deg);
        left: -100vw;
        top: -31vw;
    }
    .wassilyred4 {
        position: absolute;
        width: 120vw;
        height: 25vw;
        background-color: #ed1c24;
        z-index: -2;
        transform: rotate(-3deg);
        left: -50vw;
        top: 8vw;
    }
    .wassilyred5 {
        position: absolute;
        width: 120vw;
        height: 20vw;
        background-color: #ed1c24;
        z-index: -2;
        left: -80vw;
        top: -10vw;
    }
    .wassilyred6 {
        position: absolute;
        width: 50vw;
        height: 9.5vw;
        background-color: #ed1c24;
        z-index: -2;
        left: 44vw;
        top: 21.3vw;
    }
    .wassilyyellow {
        position: absolute;
        width: 30vw;
        height: 35vw;
        transform: rotate(-30deg);
        background-color: #fff200;
        z-index: -3;
        left: 80vw;
        top: -10vw;
    }
    #wassily {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        grid-template-areas: "left right" "left2 right";
    }
    .ki {
        grid-area: right;
    }
    .k2 {
        grid-area: left;
    }
    .kp {
        grid-area: lefttwo;
    }
    #wassily h2 {
        top: -2.5vw;
        position: relative;
        width: 10vw;
        display: inline;
        color: white;
        margin-left: 20vw;
        padding: 0;
    }
    #wassily img {
        width: 80%;
        border-radius: 50%;
    }
    #wassily p {
        width: 66%;
        margin-left: 9vw;
        float: left;
        position: inline;
        padding: 0;
        margin-top: -30.5vw;
        font-family: 'AvenirM';
        color: white;
    }
    #triangles {
        position: absolute;
        top: 204vw;
        left: -18vw;
        z-index: -5;
    }
    .arrow-down {
        width: 0;
        height: 0;
        border-left: 37.5vw solid transparent;
        border-right: 37.5vw solid transparent;
        border-top: 75vw solid #f00;
        position: relative;
        transform: rotate(-3deg);
        z-index: -2;
    }
    .arrow-up {
        width: 0;
        height: 0;
        border-left: 37.5vw solid transparent;
        border-right: 37.5vw solid transparent;
        border-top: 75vw solid #0000ff;
        position: relative;
        top: -95vw;
        transform: rotate(-183deg);
        left: 49vw;
        z-index: -10;
    }
    .jh {
        grid-area: left
    }
    .ji {
        grid-area: left2;
    }
    .jp {
        grid-area: right
    }
    #josef {
        margin-top: 8vw;
        z-index: -1;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        grid-template-areas: "left right" "left2 right";
    }
    #josef h2 {
        color: white;
        position: relative;
        left: 10vw;
    }
    #josef img {
        width: 33vw;
        position: relative;
        left: 19vw;
    }
    #josef p {
        color: white;
        font-family: 'AvenirM';
        width: 17vw;
        padding: 0;
        position: relative;
        left: 10vw;
        top: 7vw;
    }
    #gallery h2 {
        padding: 0;
        transform: rotate(-3.5deg);
        position: relative;
        left: 35vw;
        top: 11vw;
        font-size: 3.5vw;
        text-align: left;
    }
    #gallery a {
        text-decoration: none;
        color: #ed1c24;
    }
    section h2 {
        background-color: transparent;
        color: black;
        font-size: 3.5vw;
    }
    footer {
        margin-top: 30vw;
        display: grid;
        grid-template-columns: 1fr 1fr;
        z-index: 1;
    }
}

@media screen and (min-width: 1400px) {
    #gallery h2 {
        top: 14vw
    }
    footer {
        margin-top: 35vw;
    }
    }