@font-face {
                    font-family: 'Skript';
                    src: url(../fonts/Qwigley/Qwigley-Regular.ttf);
                }
                
                @font-face {
                    font-family: 'Sans-Serif';
                    src: url(../fonts/myriad-pro/MYRIADPRO-REGULAR.OTF);
                }
                
                html,
                body {
                    margin: 0;
                    padding: 0;
                }
                
                body {
                    overflow-x: hidden;
                    min-height: 100vh;
                    font-family: 'Sans-Serif';
                    font-size: 19px;
                    background: linear-gradient( rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(../img/background.jpg);
                }
                
                main {
                    padding-bottom: 15%;
                }
                
                #home:hover {
                    background-color: rgba(21, 122, 110, 0.7);
                }
                
                #home {
                    padding: 2%;
                    width: 18%;
                    background-color: rgba(249, 246, 240, 0.65);
                    position: absolute;
                    left: 0%;
                    top: 0%;
                }
                
                #marble {
                    width: 29%;
                    top: 69%;
                    right: 1%;
                    position: absolute;
                    z-index: -1;
                }
                
                #wood {
                    background-repeat: no-repeat;
                    width: 30%;
                    height: 50%;
                    box-sizing: border-box;
                    position: absolute;
                    left: 55%;
                    top: 83%;
                    z-index: -1;
                }
                
                #kitchen {
                    width: 100%;
                    height: 948px;
                    background-image: url(../img/homepage.jpg);
                    position: relative;
                    z-index: -2;
                }
                
                p {
                    font-size: 1em;
                    font-family: 'Sans-Serif';
                    display: inline-block;
                    margin: 15px 15px;
                    padding: 15px;
                    background-color: rgba(249, 246, 240, 0.65);
                    letter-spacing: 0.02em;
                }
                
                h1 {
                    font-size: 6em;
                    text-align: right;
                    width: 95%;
                    padding-right: 5%;
                    position: relative;
                    top: 55%;
                    right: 13%;
                    font-family: 'Skript';
                    color: rgb(249, 246, 240);
                    background-color: rgba(21, 122, 110, 0.5);
                }
                
                h2 {
                    width: 100%;
                    font-size: 4em;
                    font-family: 'Skript';
                    color: rgb(249, 246, 240);
                }
                
                #koSmo {
                    position: absolute;
                    right: 0;
                    width: 34%;
                    margin-top: -12%;
                    margin-right: 0;
                }
                
                h2.desno {
                    width: 90.5%;
                    margin-left: auto;
                    margin-right: 0;
                    padding-right: 9.5%;
                    text-align: right;
                    background-color: rgba(62, 37, 20, 0.8);
                    color: rgb(249, 246, 240);
                    margin-bottom: 1.5%;
                }
                
                #koSmoPasus {
                    margin: 0;
                    padding: 10%;
                    text-align: justify;
                }
                
                #staKreiramo {
                    width: 66%;
                }
                
                #opusNaslov {
                    background-color: rgba(62, 37, 20, 0.8);
                    width: 33%;
                    color: #f9f6f0;
                    padding-top: 2%;
                    margin-bottom: 1%;
                    padding-left: 3%;
                }
                
                .stavkeOpusa {
                    display: inline-block;
                    font-size: 1.4em;
                    color: rgba(21, 122, 110, 1);
                }
                
                #stambeniEnterijeri,
                #namestajPoMeri,
                #stepenista,
                #specijalniZahtevi {
                    margin: 0;
                }
                
                #stambeniEnterijeri:hover,
                #namestajPoMeri:hover,
                #stepenista:hover,
                #specijalniZahtevi:hover {
                    cursor: pointer;
                    color: black;
                }
                
                #opus {
                    position: absolute;
                    background-color: rgba(249, 246, 240, 0.65);
                    width: 62%;
                    padding: 0.5% 0.5% 0.5% 0.8%;
                    left: 0;
                }
                
                #opus p {
                    background: none !important;
                }
                
                #dodatniOpis {
                    position: relative;
                    width: 70%;
                    padding: 1%;
                    margin-left: -2.3%;
                }
                
                #opisPosla {
                    width: 90%;
                    margin-top: -1%;
                    margin-left: 0;
                    padding: 3%;
                }
                
                .kontakt {
                    position: absolute;
                    right: 0;
                    width: 20%;
                    height: 10%;
                    font-family: 'Sans-Serif';
                    font-size: 1.5em;
                    text-align: center;
                    margin-bottom: 0;
                }
                
                .kontakt a {
                    text-decoration: none;
                    color: black;
                    background-color: rgba(249, 246, 240, 0.65);
                    display: block;
                    position: relative;
                    z-index: 99;
                    font-size: 1em;
                    margin-top: 2%;
                    padding: 3%;
                }
                
                .kontakt a:hover {
                    color: rgba(249, 246, 240);
                    background-color: rgba(21, 122, 110, 1);
                }
                
                #povratakInspiraciji {
                    position: absolute;
                    top: 52%;
                    right: 0;
                    width: 20%;
                    height: 10%;
                    font-family: 'Sans-Serif';
                    font-size: 1.5em;
                    text-align: center;
                    margin-bottom: 0;
                }
                
                #povratakInspiraciji a {
                    text-decoration: none;
                    color: black;
                    background-color: rgba(249, 246, 240, 0.65);
                    display: block;
                    position: relative;
                    z-index: 99;
                    font-size: 1em;
                    margin-top: 2%;
                    padding: 3%;
                }
                
                #povratakInspiraciji a:hover {
                    color: rgba(249, 246, 240, 0.9);
                    background-color: rgba(21, 122, 110, 1);
                }
                
                #kontaktOpis {
                    background-color: rgba(249, 246, 240, 0.65);
                    position: relative;
                    right: 2%;
                    width: 60%;
                    font-size: 1.2em;
                    padding: 3%;
                    box-sizing: content-box;
                    margin-top: 8%;
                }
                
                img {
                    width: 100%;
                }
                
                #muses {
                    padding: 20px;
                    text-align: center;
                    width: 100px;
                    margin: 0 auto;
                }
                
                #muses p {
                    font-size: 0.5em;
                    color: white;
                    text-align: center;
                    padding: 0;
                    background: none;
                    display: block;
                }
                
                #muses img {
                    vertical-align: middle;
                    width: 100px;
                }
                
                #stilovi {
                    margin-top: 15%;
                }
                
                #inspirisiSe {
                    position: absolute;
                    background-color: rgba(249, 246, 240, 0.65);
                    top: 2%;
                    right: 0;
                    width: 40%;
                    padding: 2.3em;
                }
                
                .naslovStil {
                    background-color: rgba(62, 37, 20, 0.65);
                    width: 80%;
                    padding: 0.5% 3%;
                    margin-top: 3%;
                    margin-bottom: -2.7%;
                    text-align: right;
                    font-size: 6em;
                }
                
                .opis {
                    position: relative;
                    top: -28%;
                    width: 35%;
                    left: 2%;
                    text-align: justify;
                    padding: 3%;
                }
                
                svg {
                    background-color: rgba(249, 246, 240, 0.3);
                }
                
                svg:hover {
                    background-color: rgba(0, 0, 0, 0.5);
                    fill: #17A278;
                    cursor: pointer;
                }
                
                #pauseM,
                #pauseR,
                #pauseI,
                #pauseO,
                #pauseS,
                #pauseF {
                    display: none;
                }
                
                #moderni {
                    background-image: url(../img/sprites/modernSPRITE.jpg);
                    background-repeat: no-repeat;
                    height: 500px;
                    margin-bottom: 1%;
                    animation: klizanje linear 45s infinite alternate forwards;
                    animation-play-state: paused;
                }
                
                #rustik {
                    background-image: url(../img/sprites/rustikSPRITE.jpg);
                    background-repeat: no-repeat;
                    height: 500px;
                    margin-bottom: 1%;
                    animation: klizanje linear 45s infinite alternate forwards;
                    animation-play-state: paused;
                }
                
                #industrijski {
                    background-image: url(../img/sprites/industrijskiSPRITE.jpg);
                    background-repeat: no-repeat;
                    height: 500px;
                    margin-bottom: 1%;
                    animation: klizanje linear 45s infinite alternate forwards;
                    animation-play-state: paused;
                }
                
                #obalski {
                    background-image: url(../img/sprites/obalskiSPRITE.jpg);
                    background-repeat: no-repeat;
                    height: 500px;
                    margin-bottom: 1%;
                    animation: klizanje linear 45s infinite alternate forwards;
                    animation-play-state: paused;
                }
                
                #skandinavski {
                    background-image: url(../img/sprites/skandinavskiSPRITE.jpg);
                    background-repeat: no-repeat;
                    height: 500px;
                    margin-bottom: 1%;
                    animation: klizanje linear 45s infinite alternate forwards;
                    animation-play-state: paused;
                }
                
                #francuski {
                    background-image: url(../img/sprites/francuskiSPRITE.jpg);
                    background-repeat: no-repeat;
                    height: 500px;
                    margin-bottom: 1%;
                    animation: klizanje linear 45s infinite alternate forwards;
                    animation-play-state: paused;
                }
                
                #ikone {
                    position: relative;
                    top: 15%;
                    left: 85%;
                    margin-top: 5%;
                    z-index: 98;
                }
                
                .ikona {
                    background-color: rgba(249, 246, 240, 0.65);
                    display: inline-block;
                    width: 109px;
                    height: 109px;
                    z-index: 98;
                }
                
                .ikona:hover {
                    background-color: rgba(21, 122, 110, 0.7);
                }
                
                @keyframes klizanje {
                    0% {
                        background-position: 0 0;
                    }
                    100% {
                        background-position: -3840px 0;
                    }
                }
                /*mobilni*/
                
                @media (min-width: 250px) and (max-width:450px) {
                    main {
                        overflow-x: hidden;
                    }
                    #kitchen {
                        background-image: url(../img/homepagemob.jpg);
                        background-position: center top;
                        background-repeat: no-repeat;
                    }
                    #home {
                        background-color: rgba(249, 246, 240, 0.65);
                        padding: 3%;
                        position: absolute;
                        left: 0;
                        top: 0;
                        width: 33%;
                    }
                    h1 {
                        width: 95%;
                        font-size: 2.8em;
                        text-align: right;
                        top: 46%;
                        right: 0;
                        color: white;
                    }
                    #koSmo {
                        width: 100%;
                        position: relative;
                        margin-top: -45%;
                    }
                    #marble {
                        width: 100%;
                        position: fixed;
                        top: 68%;
                        left: -45%;
                    }
                    #wood {
                        position: absolute;
                        top: 92%;
                        left: 5%;
                        width: 90%;
                        max-width: 100vw;
                        box-sizing: border-box;
                        background-image: url('../img/wood.png');
                        background-repeat: no-repeat;
                        background-size: contain;
                        overflow: hidden;
                        z-index: -1;
                    }
                    #opusNaslov {
                        box-sizing: border-box;
                        width: 100%;
                    }
                    #staKreiramo {
                        width: 100%;
                        box-sizing: border-box;
                        margin-top: 15%;
                        padding: 0;
                        font-size: 1em;
                        position: relative;
                        left: 0;
                    }
                    #opisPosla {
                        box-sizing: border-box;
                        width: 100%;
                        text-align: justify;
                        padding: 9%;
                        display: block;
                    }
                    #opisPosla p {
                        margin: 0;
                        padding: 0;
                        background: none;
                    }
                    .stavkeOpusa {
                        width: 100%;
                        display: block;
                        text-align: center;
                        font-size: 1.2em;
                        margin: 0;
                        padding: 0;
                    }
                    #opus {
                        width: 100%;
                        display: block;
                        padding: 0;
                    }
                    .stavkeOpusa p {
                        width: 100%;
                        margin: 0;
                        padding: 1em;
                        background: none;
                        font-size: 0.85em;
                        box-sizing: border-box;
                        cursor: pointer;
                    }
                    .stavkeOpusa.active p {
                        color: black;
                    }
                    .detaljanOpis {
                        font-size: 0.9em;
                        text-align: left;
                        padding: 4%;
                    }
                    #dodatniOpis {
                        display: none;
                        padding: 1em;
                        margin: 0;
                        width: 100%;
                        box-sizing: content-box;
                        text-align: justify;
                    }
                    #dodatniOpis.active {
                        display: block;
                    }
                    .kontakt {
                        width: 100%;
                        text-align: right;
                        margin-right: 0;
                        position: relative;
                        margin-top: 112%;
                    }
                    .kontakt a {
                        font-family: 'Skript';
                        text-transform: lowercase;
                        font-size: 1.4em;
                        padding: 2%;
                        color: rgba(249, 246, 240, 1);
                        background-color: rgba(21, 122, 110, 0.8);
                    }
                    #kontaktInspo {
                        margin-top: 2%;
                    }
                    #inspirisiSe {
                        position: relative;
                        left: -5%;
                        margin-top: 45%;
                        background-color: rgba(249, 246, 240, 0.65);
                        width: 100%;
                        padding: 2.3em;
                        box-sizing: border-box;
                    }
                    #povratakInspiraciji {
                        position: relative;
                        width: 100%;
                        text-align: right;
                        margin-top: 15%;
                    }
                    #povratakInspiraciji a {
                        font-family: 'Skript';
                        text-transform: lowercase;
                        text-decoration: none;
                        font-size: 1.4em;
                        padding: 2%;
                        color: rgba(249, 246, 240, 1);
                        background-color: rgba(21, 122, 110, 0.8);
                        padding-left: 60%;
                        box-sizing: content-box;
                    }
                    .naslovStil {
                        font-size: 3.7em;
                        text-align: center;
                        margin-bottom: -7%;
                    }
                    .opis {
                        text-align: left;
                        padding: 5%;
                        margin: 0;
                        position: relative;
                        top: -70%;
                        left: 20%;
                        font-size: 0.85em;
                        width: 70%;
                        background-color: rgba(249, 246, 240, 0.8);
                    }
                    .play,
                    .pause {
                        width: 20%;
                        background-color: rgba(0, 0, 0, 0.3);
                    }
                    #kontaktOpis {
                        position: relative;
                        width: 90%;
                        box-sizing: content-box;
                        display: block;
                        background-color: rgba(249, 246, 240, 0.65);
                        font-size: 0.85em;
                        padding: 5%;
                        overflow-x: hidden;
                        margin-top: 15%;
                    }
                    #ikone {
                        top: 4%;
                        left: 65%;
                    }
                    .ikona {
                        width: 65px;
                        height: 65px;
                        background-color: rgba(21, 122, 110, 0.7);
                    }
                }
                /*tablet*/
                
                @media (min-width:451px) and (max-width: 1280px) {
                    html {
                        overflow-x: hidden;
                    }
                    main {
                        padding-bottom: 30%;
                    }
                    #kitchen {
                        background-image: url(../img/homepagetab.jpg);
                        width: 100%;
                        background-size: cover;
                        background-repeat: no-repeat;
                    }
                    #home {
                        position: absolute;
                        top: 0;
                        left: 0;
                        z-index: 10;
                        background-color: rgba(249, 246, 240, 0.65);
                        padding: 3%;
                    }
                    #marble {
                        position: fixed;
                        top: 61%;
                        right: 5%;
                        width: 33%;
                    }
                    #wood {
                        position: absolute;
                        top: 61.5%;
                        left: 15%;
                        height: 100%;
                        box-sizing: content-box;
                        width: 34%;
                        overflow: hidden;
                        z-index: -1;
                    }
                    p {
                        background-color: rgba(249, 246, 240, 0.65);
                    }
                    h1 {
                        width: 96%;
                        font-size: 2.8em;
                        text-align: right;
                        position: absolute;
                        right: 0;
                        top: 22%;
                    }
                    #koSmo {
                        position: relative;
                        left: 34%;
                        width: 66%;
                    }
                    #staKreiramo {
                        width: 70%;
                        position: relative;
                        top: 52%;
                        z-index: 99;
                    }
                    #opisPosla {
                        padding: 7.5%;
                    }
                    #opus {
                        width: 105%;
                        padding-left: 5%;
                        box-sizing: border-box;
                        z-index: 99;
                    }
                    #opusNaslov {
                        width: 97%;
                        margin-bottom: 3%;
                        padding-left: 8%;
                    }
                    .stavkeOpusa {
                        font-size: 1.5em;
                        display: block;
                        z-index: 99;
                    }
                    #dodatniOpis {
                        width: 100%;
                        box-sizing: content-box;
                        text-align: justify;
                    }
                    .kontakt {
                        width: 25%;
                        position: relative;
                        right: -75%;
                        top: 10%;
                    }
                    .kontakt a {
                        position: relative;
                        text-align: right;
                        font-family: 'Skript';
                        text-transform: lowercase;
                        font-size: 1.5em;
                        padding: 3%;
                        padding-right: 7%;
                        color: rgba(249, 246, 240, 1);
                        background-color: rgba(21, 122, 110, 0.8);
                    }
                    #kontaktInspo {
                        position: relative;
                    }
                    #povratakInspiraciji {
                        position: relative;
                        right: -60%;
                        top: 33%;
                        width: 40%;
                        margin-right: 0;
                        text-align: right;
                        margin-right: 0;
                        z-index: 99;
                    }
                    #povratakInspiraciji a {
                        font-family: 'Skript';
                        text-transform: lowercase;
                        text-decoration: none;
                        font-size: 1.4em;
                        padding: 2%;
                        color: rgba(249, 246, 240, 1);
                        background-color: rgba(21, 122, 110, 0.8);
                        padding-left: 60%;
                        box-sizing: content-box;
                    }
                    #inspirisiSe {
                        position: relative;
                        right: -35%;
                        margin-top: 3%;
                        background-color: rgba(249, 246, 240, 0.65);
                        width: 53%;
                        padding: 2.3em;
                        box-sizing: border-box;
                        text-align: justify;
                    }
                    .naslovStil {
                        margin-bottom: -4%;
                        text-align: right;
                    }
                    .opis {
                        padding: 5%;
                        margin: 0;
                        position: relative;
                        left: 2%;
                        font-size: 0.85em;
                        width: 70%;
                        background-color: rgba(249, 246, 240, 0.8);
                    }
                    .play,
                    .pause {
                        width: 10%;
                        background-color: rgba(249, 246, 240, 0.5);
                        z-index: 99;
                    }
                    #kontaktOpis {
                        position: relative;
                        display: block;
                        right: -20%;
                        margin-top: 10%;
                        width: 70%;
                        box-sizing: content-box;
                        background-color: rgba(249, 246, 240, 0.65);
                        font-size: 1em;
                        padding: 5%;
                        overflow-x: hidden;
                    }
                    #ikone {
                        top: 5%;
                        left: 66%;
                    }
                }