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


/**********************************************
***********************************************
                CSS - ABOUT US
***********************************************
**********************************************/


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

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


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

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


/***************************************
ADD-ONS /////////////////////// START //
***************************************/

/***************************************
ADD-ONS ///////////////////////// END //
***************************************/


/***************************************
WEBSITE CONTENT /////////////// START //
***************************************/

    /* FIXED CSS BACKGROUND IMAGE INSIDE DIV (iOS supported) - MAIN BACKGROUND - HOME
    **********************************/

        .fix-css-bg-img-main_background {
            background-image: url(../img/main_background_home.jpg);
        }

    /* CONTENT
    **********************************/

        section {
            width: 100%;
            max-width: 1000px;
            margin-left: auto;
            margin-right: auto;
        }

        section .section-container {
            width: 90%;
        }

        section .section-container p {
            line-height: 2.6rem;
        }

/***************************************
WEBSITE CONTENT ///////////////// END //
***************************************/


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

    /* MEDIA QUERY - WIDTH: 0px - 800PX
    ***************************************/
    @media screen and (min-width:0px) and (max-width:800px),
    screen and (min-width:0px) and (max-width:800px) and (-webkit-min-device-pixel-ratio:2),
    screen and (min-width:0px) and (max-width:800px) and (min-resolution:192dpi) {
        
        /* CONTENT
        **********************************/
        
            section {
                height: 1700px;
            }
        
            section .section-container {
                max-width: 380px;
                margin-left: auto;
                margin-right: auto;
            }
        
        /* CONTENT 1
        **********************************/
        
            .section-1 {
                padding-top: 270px;
            }
        
    }

    /* 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) {
               
        /* CONTENT
        **********************************/
        
            section .section-container {
                width: 80%;
            }
        
        /* CONTENT 1
        **********************************/
        
            .section-1 {
                background-image: url(../img/section_services_background_0-400.svg);
            }
        
        /* CONTENT 2
        **********************************/

            .section-2 {
                padding-top: 150px;
                background-image: url(../img/section_background_0-400.svg);
            }
        
    }

    /* 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) {
        
        /* CONTENT
        **********************************/
        
            section .section-container {
                width: 80%;
            }
        
        /* CONTENT 1
        **********************************/

            .section-1 {
                background-image: url(../img/section_services_background_400-600.svg);
            }
        
        /* CONTENT 2
        **********************************/

            .section-2 {
                padding-top: 150px;
                background-image: url(../img/section_background_400-600.svg);
            }
    }

    /* 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) {
        
        /* CONTENT 1
        **********************************/

            .section-1 {
                background-image: url(../img/section_services_background_600-800.svg);
            }
        
        /* CONTENT 2
        **********************************/

            .section-2 {
                padding-top: 270px;
                background-image: url(../img/section_background_600-800.svg);
            }
    }

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

            nav {
                width: 700px;
                margin-top: -200px;
            }
        
            a.nav-button-1 {
                margin-left: 450px;
            }
            a.nav-button-2 {
                margin-left: 225px;
            }
        
        /* CONTENT
        **********************************/

            section {
                height: 1590px;
            }
        
            section .section-container {
                max-width: 390px;
            }
        
        /* CONTENT 1
        **********************************/

            .section-1 {
                margin-top: -100px;
                padding-top: 350px;
                background-image: url(../img/section_background_800-1000.svg);
            }
        
            .section-container-1 {
                margin-left: 42%;
            }
        
        /* CONTENT 2
        **********************************/

            .section-2 {
                margin-top: -100px;
                padding-top: 200px;
                background-image: url(../img/section_about_us_background_800-1000.svg);
            }
        
            .section-container-2 {
                margin-left: 15%;
            }
    }

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


/***************************************
MEDIA QUERIES HEIGHT ////////// START //
***************************************/

    /* MEDIA QUERY - HEIGHT: 701px - 900PX
    ***************************************/
    @media screen and (min-height:701px) and (max-height:900px),
    screen and (min-height:701px) and (max-height:900px) and (-webkit-min-device-pixel-ratio:2),
    screen and (min-height:701px) and (max-height:900px) and (min-resolution:192dpi) {

    }

    /* MEDIA QUERY - HEIGHT: 901px - 1100PX
    ***************************************/
    @media screen and (min-height:901px) and (max-height:1100px),
    screen and (min-height:901px) and (max-height:1100px) and (-webkit-min-device-pixel-ratio:2),
    screen and (min-height:901px) and (max-height:1100px) and (min-resolution:192dpi) {

    }

    /* MEDIA QUERY - HEIGHT: 1101PX - to the infinity and beyond
    *********************************/
    @media screen and (min-height:1101px) {

    }

/***************************************
MEDIA QUERIES HEIGHT //////////// END //
***************************************/

/***************************************
IE FIX (IE 10+) /////////////// START //
***************************************/

    /*Ukoliko je browser IE10/11 onda se za fiksnu sliku primjenjuje posebno pozadina jer IE ne podrzava taj efekt
    Za IE7-IE9 naredba se nalazi unutar <head></head> u index.html */
    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
        
        /* IE10+ CSS styles go here
        **********************************/

    }

/***************************************
IE FIX (IE 10+) ///////////////// END //
***************************************/

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