/**********************************
Tommy Remag ///////////////////////
www.tommyremag.com ////////////////
@tommyremag ///////////////////////
************ designed with love **/


/**********************************************
***********************************************
                CSS - MAIN
***********************************************
**********************************************/


/***************************************
TEXT MAIN EDIT //////////////// START //
***************************************/

    /* LIST DECORATION
    **********************************/

        li {
            padding-top: 0.5rem;
            padding-bottom: 0.5rem;
        }

/***************************************
TEXT EDIT /////////////////////// END //
***************************************/


/***************************************
LINKS EDIT //////////////////// START //
***************************************/

/***************************************
LINKS EDIT ////////////////////// END //
***************************************/


/***************************************
MAIN EDIT ///////////////////// START //
***************************************/

/* BODY
    **********************************/

        body, html {
            background: #1e1e1e;
        }

    
    /* PAGE CONTAINER
    **********************************/

        .container {
            position: relative;
            width: 100%;
            max-width: 1700px;
            min-width: 320px;
            margin: 0 auto;
            padding-bottom: 50px;
        }

    /* HOME BUTTON
    **********************************/

        .home_button  {
            position: relative;
            z-index: 3;
            display: block;
            background-position: center;
            background-repeat: no-repeat;
            
        }

    /* SERVICES - IT SERVICES / DIGITAL / CONSULTING
    **********************************/

        section {
            width: 85%;
        }

/***************************************
MAIN EDIT /////////////////////// END //
***************************************/


/***************************************
MEDIA QUERIES WIDTH /////////// START //
***************************************/

    /* MEDIA QUERY - WIDTH: 0px - 400PX
    ***************************************/
    @media screen and (min-width:0px) and (max-width:400px),
    screen and (min-width:0px) and (max-width:400px) and (-webkit-min-device-pixel-ratio:2),
    screen and (min-width:0px) and (max-width:400px) and (min-resolution:192dpi) {
        
        
        /* HOME BUTTON
        **********************************/

            .home_button {
                width: 40px;
                height: 40px;
                margin: 30px 30px 40px 30px;
                background-image: url(../img/home_button_320-600.svg);
            }
        
            .home_button:hover {
                background-image: url(../img/home_button_320-600_w.svg);
            }
        
            .home_button:active {
                background-image: url(../img/home_button_320-600_w.svg);
            }
        
        /* SERVICES - IT SERVICES / DIGITAL / CONSULTING
        **********************************/
        
            section {
                max-width: 300px;
                margin: 0px auto 50px auto;
            }
        
            section h1 {
                padding-top: 20px;
            }
        
            section ul li {
                font-size: 1.5rem;
                line-height: 2.2rem;
            }
        
    }

    /* MEDIA QUERY - WIDTH: 401px - 600PX
    ***************************************/
    @media screen and (min-width:401px) and (max-width:600px),
    screen and (min-width:401px) and (max-width:600px) and (-webkit-min-device-pixel-ratio:2),
    screen and (min-width:401px) and (max-width:600px) and (min-resolution:192dpi) {
        
        /* HOME BUTTON
        **********************************/

            .home_button {
                width: 40px;
                height: 40px;
                margin: 30px 30px 40px 30px;
                background-image: url(../img/home_button_320-600.svg);
            }
        
            .home_button:hover {
                background-image: url(../img/home_button_320-600_w.svg);
            }
        
            .home_button:active {
                background-image: url(../img/home_button_320-600_w.svg);
            }
        
        /* SERVICES - IT SERVICES / DIGITAL / CONSULTING
        **********************************/
        
            section {
                max-width: 350px;
                margin: 0px auto 70px auto;
            }
        
            section h1 {
                padding-top: 20px;
            }

            section ul li {
                font-size: 1.8rem;
                line-height: 2.4rem;
            }
    }

    /* MEDIA QUERY - WIDTH: 601px - 800PX
    ***************************************/
    @media screen and (min-width:601px) and (max-width:800px),
    screen and (min-width:601px) and (max-width:800px) and (-webkit-min-device-pixel-ratio:2),
    screen and (min-width:601px) and (max-width:800px) and (min-resolution:192dpi) {
        
        /* HOME BUTTON
        **********************************/

            .home_button {
                width: 55px;
                height: 55px;
                margin: 70px;
                background-image: url(../img/home_button.svg);
            }
        
            .home_button:hover {
                background-image: url(../img/home_button_w.svg);
            }
        
            .home_button:active {
                background-image: url(../img/home_button_w.svg);
            }
        
        /* SERVICES - IT SERVICES / DIGITAL / CONSULTING
        **********************************/
        
            section {
                max-width: 500px;
                margin: 0px auto 120px auto;
            }

            section h1 {
                padding-top: 20px;
            }
        
            section ul li {
                font-size: 2rem;
                line-height: 3.8rem;
            }
    }

 /* MEDIA QUERY - WIDTH: 801PX - to the infinity and beyond
    *********************************/
    @media screen and (min-width:801px) {
        
        /* HOME BUTTON
        **********************************/

            .home_button {
                width: 55px;
                height: 55px;
                margin: 100px;
                background-image: url(../img/home_button.svg);
            }
        
            .home_button:hover {
                background-image: url(../img/home_button_w.svg);
            }
        
            .home_button:active {
                background-image: url(../img/home_button_w.svg);
            }
        
        /* SERVICES - IT SERVICES / DIGITAL / CONSULTING
        **********************************/
        
            section {
                width: 78%;
                max-width: 1100px;
                margin: 0px auto 200px auto;
            }
        
            section h1 {
                padding-top: 30px;
            }
    }

/***************************************
MEDIA QUERIES WIDTH ///////////// END //
***************************************/


/**********************************
Tommy Remag ///////////////////////
www.tommyremag.com ////////////////
@tommyremag ///////////////////////
************ designed with love **/