body {
        
        /* Workaround for some mobile browsers */
        /*min-height:100%;*/
        /*width:100%;*/
        padding:0;margin:0;
        font-family: 'Roboto', sans-serif;
        letter-spacing: 0.02rem;
    }

    h1 {
        font-size: 3.5rem;
        line-height:3rem;
    }
    h2 {

    }
    p {
        font-size: 1.2rem;
        line-height: 1.5rem;
    }

    html {
        /* This image will be displayed fullscreen */
        background:url('images/background.jpg') no-repeat top center;


        /* Ensure the html element always takes up the full height of the browser window */
        /*min-height:100%;*/

        /* The Magic */
        background-size: cover;
    }

    .align-center {
        text-align: center;
    }

/* DESKTOP */
    @media only screen and (min-width:801px){
        /* main container */
        .parent {
            /*max-width: 1500px;*/
            padding: 0;
            color:white;
            /*width:100%;*/
            /*text-align:center;*/
            margin-left: auto;
            margin-right:auto;
            display: block;
            /*background: rgba(0, 0, 0, .8);*/
            /*border:1px solid black;*/
            /*position: absolute;*/
            /*top: 50%;*/
            /*left: 50%;*/
            /*transform: translate(-50%, -50%);*/
            /*max-width: 1500px;*/
        }


        /* child containers */
        .container-100-perc {
            width:  100%;
            float: left;
        }
        .container-50-perc {
            width:  50%;
            float: left;
        }
        .container-60-perc {
            width:  60%;
            float: left;
        }
        .container-40-perc {
            width:  40%;
            float: left;
        }

        /* container padding */
        .container-50-perc h1,
        .container-50-perc h2,
        .container-50-perc p,
        .container-50-perc img,
        .container-60-perc h1,
        .container-60-perc h2,
        .container-60-perc p,
        .container-60-perc img
         {
            margin:15px 80px 10px 80px;
        }
        .container-50-perc img {
            text-align: center;
        }
        .container-40-perc img {
            text-align: left;
        }

        .container-100-perc.logo {
            padding-top: 30px;
        }

        .container-50-perc .increase-your {
            margin-bottom: 5px;
        }

        .container-50-perc.computer img, .container-40-perc.computer img {
            max-width: 80%;
        }

        .container-100-perc.clouds img {
            width: 100%;
        }

        .container-100-perc.rocket {
            width: 100%;
            padding: 10px 0 5px;
            background-color: #58b1a2;
            margin:  0;
        }

    }

/* MOBILE */
    @media only screen and (max-width:800px){
        /* main container */
        .parent {
            color:white;
            padding: 0;
            margin:  0;
            /*width:100%;*/
            text-align:center;
            margin-left: auto;
            margin-right:auto;
            display: block;
            /*background: rgba(0, 0, 0, .8);*/
            /*border:1px solid black;*/
            /*position: absolute;*/
            /*top: 50%;*/
            /*left: 50%;*/
            /*transform: translate(-50%, -50%);*/
        }

        /* child containers */
        .container-100-perc {
            /*width:  100%;*/
            clear: both;
        }
        .container-50-perc {
            /*width:  100%;*/
            clear: both;
        }
        .container-60-perc {
            /*width:  100%;*/
            clear: both;
        }
        .container-40-perc {
            /*width:  100%;*/
            clear: both;
        }

        .container-50-perc img {
            width: 50%;
        }
        .container-40-perc img {
            width: 40%;
        }

        .container-100-perc.logo {
            padding-top: 20px;
        }
        .container-50-perc .increase-your {
            padding-bottom: 0px;
            margin-bottom: 0px;
        }
        .container-100-perc.clouds {
            width: 100%;
        }
        .container-100-perc.clouds img {
            max-width: 100%;
        }
        .container-100-perc.rocket {
            padding: 10px 0 5px;
            background-color: #58b1a2;
            margin:  0;
        }
        .container-100-perc.rocket img {
            max-width: 30%;
        }
    }


    @media only screen and (min-width:1501px){
        /* remove green background from rocket on big screens */
        .container-100-perc.clouds {
            /*display: none;*/
        }
        .container-100-perc.rocket {
            /*background-color: #58b1a200;*/
            /*margin-top: 20px;*/
        }
        .container-100-perc.logo {
            padding-top: 70px;
        }
    }