@font-face {
    font-family: grotesk;
    src: url(questa.woff);
}

* {
    font-family: grotesk;
    font-size:18px;
    color:black;
}

h1 {
    font-size: 10em;
    color:#666;
}

h2 {
    font-size: 1.2em;
    color:#333;
}

p {
    font-size: 1em;
    color:#333;
}

ol, li {
    font-size:1em;
    color:white;
}
.container {
    overflow:hidden;
    height: 800px;
}
.one {
    position: relative;
    top: 0;
    background-color: white;
    height:700px;
    z-index: 1;
    cursor:pointer;
    -webkit-transition: top 2s;
    -moz-transition: top 2s;
    -o-transition: top 2s;
    transition: top 2s;

}
.two {
    position: relative;
    top: -700px;
    background-color: black;
    z-index: -1;
    cursor:pointer;
    color:white;
}
.two p, h2 {
    color:white;
}


/* for mobile (samsung) horizontal */

@media only screen and (-webkit-min-device-pixel-ratio: 3.0)  and (max-width: 1920px), only screen and (max-width: 640px) { 
    .container { 
        height:1750px;
    }
    h1 {
        font-size:3em;
    }
    h2 {
    font-size: 1.6em;
    }
    p {
        font-size:1em;
    }
}

/* for phone, tablet horizontal */
@media only screen and (min-width: 640px) and (max-width: 959px) {
    .container { 
        height:950px;
    }
    .one {
        height:750px;
    }

    h1 {
        font-size:3em;
    }
    h2 {
    font-size: 2em;
    }
    p {
        font-size:0.9em;
    }
    ol, li {
    font-size:0.9em;
    }
}