.main {
    width:100%;
    box-sizing: border-box;
    padding:15em 8em;
    background-repeat: no-repeat;
    background-size:cover;
}

    h1, .main p {
        width:75%;
        max-width:900px;
        text-align: center;
        display:block;
        margin: 0 auto;
        color:#fff;
    }
    
    h1 {
        font-size:5em;
        font-weight:100;
        margin-bottom:0.5em;
    }
    
    .main p {
        font-size:1.5em;
        line-height:2;
        font-weight:400;
        margin-bottom:2em;
    }
    
        .main p:last-child {
            margin-bottom:0;
        }

.icons {
    background-color:#2a083a; /* dark purple */
    padding:5em 2em;
    width:100%;
    box-sizing: border-box;
    text-align: center;
}

    .icon {
        display:inline-block;
        text-decoration: none;
        padding:0 1em;
        box-sizing: border-box;
        min-height:10em;
        width:10%;
    }
    
        .icon img {
            display:block;
            margin:0 auto;
            max-width:100%;
        }
        
        .icon p {
            text-align: center;
            color:#fff;
            font-weight: 300;
            margin-top:10px;
            font-size:1.25em;
        }

@media screen and (max-width: 1050px) {
    
    h1, .main p {
        width:100%;
    }
    
}

@media screen and (max-width:900px) {

    .icons {
        padding:3em 1em;
    }

    .icon {
        width:20%;
    } 
}

@media screen and (max-width:800px) {

    .main {
        padding:8em;
    } 
}

@media screen and (max-width: 550px) {
    .main {
        padding:4em;
    }
    
    h1 {
        font-size:3em;
    }
    
    .icon {
        width:30%;
    }
}

@media screen and (max-width:400px) {

    .icon {
        width:45%;
    }
}

@media screen and (max-width: 300px) {
    
    h1 {
        font-size:2.5em;
    }
}