body,h1,h2,h3,h4,h5,h6 {
        font-family: "Lato", sans-serif;
    }

    body, html {
        height: 100%;
        color: rgb(23, 22, 22);
        height: 1.8;
    }

/* Create a Parallax Effect */
    .bgimg-1, .bgimg-2, .bgimg-3 {
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    /* First image (Logo. Full height) */
    .bgimg-1 {
        background-image: url('images/hero-background.png');
        min-height: 100%;
    }

    .bgimg-11 {
        background-image: url('images/hero-background.png');
        min-height: 50%;
    }
    /* Second image (Portfolio) */
    .bgimg-2 {
        background-image: url('images/fallback-image.png');
        min-height: 400px;
    }

    /* Third image (Contact) */
    .bgimg-3 {
        background-image: url('images/hero-background.png');
        min-height: 400px;
    }

    .w3-wide {
        letter-spacing: 10px;
    }

    .w3-hover-opacity {
        cursor: pointer;
    }

    /* Turn off parallax scrolling for tablets and phones */
    @media only screen and (max-device-width: 1600px) {
        .bgimg-1, .bgimg-2, .bgimg-3 {
            background-attachment: scroll;
            min-height: 400px;
        }
    }

    .textShadow{
        text-shadow:1px 1px 0 #242323;
        font-size: 2em;
    }

    .textShadow1{
        text-shadow:1px 1px 0 #242323;
        font-size: 5em;
        padding-top: 5rem;
    }

    .ion{
        width: 20px;
        height: 20px
    }