/*1920*/

@media all and  (max-width: 1920px ) {
    .menu {
        margin-left: -135px;
    }
}


/*1780*/
@media all and  (max-width: 1780px ) {
    .container {
        max-width: 1320px;
    }

    .logo{
        width: 21%;
    }

    .naziv {
        margin-top: -142px;
        margin-left: -36px;
        max-width: 215px;
    }

    .menu{
        margin-top: 125px;
        margin-bottom: 20px;
    }

    .categories .first {
        margin-top: -209px;
        font-size: 45px;
        margin-left: 218px;
    }

    .categories .second {
        margin-top: -248px;
        font-size: 50px;
        margin-left: 459px;
    }

    .categories .third {
        margin-top: -222px;
        font-size: 60px;
        margin-left: 721px;
    }

    .categories .fourth {
        margin-top: 28px;
        font-size: 60px;
        margin-left: 934px;
    }

    h3{
        font-size: 36px;
    }
}


/*1680*/

@media all and  (max-width: 1680px ) {
    .container {
        max-width: 1220px;
    }


    .menu {
        margin-left: -180px;
    }

    .categories .first {
        margin-top: -200px;
        font-size: 45px;
        margin-left: 206px;
    }

    .categories .second {
        margin-top: -236px;
        font-size: 50px;
        margin-left: 419px;
    }

    .categories .third {
        margin-top: -214px;
        font-size: 60px;
        margin-left: 660px;
    }

    .categories .fourth {
        margin-top: 22px;
        font-size: 60px;
        margin-left: 862px;
    }

    body section h1{
        font-size: 3em;
    }

    h3{
        font-size: 34px;
    }
}


@media all and  (max-width: 1536px ){

    .container{
        max-width: 1090px;
    }

    .menu{
        font-size: 39px;
        margin-left: -180px;
        margin-bottom: 10px;
    }

    .logo {
        width: 20%;
        margin-left: -32%;
        margin-top: 61px;
    }

    .naziv {
        margin-top: -121px;
        margin-left: -44px;
        max-width: 180px;
    }

    .categories .first {
        margin-top: -182px;
        font-size: 40px;
        margin-left: 185px;
    }

    .categories .second {
        margin-top: -211px;
        font-size: 45px;
        margin-left: 371px;
    }

    .categories .third {
        margin-top: -183px;
        font-size: 55px;
        margin-left: 587px;
    }

    .categories .fourth {
        margin-top: 16px;
        font-size: 55px;
        margin-left: 762px;
    }

    .slideshow {
        margin: 0 auto;
        padding-top: 92px;
        height: 570px;
        perspective: 1000px;
    }

    .slider-content figure {
        width: 170px;
        height: 120px;
        border: 1px solid #555;
        overflow: hidden;
        position: absolute;
    }

    h3 {
        font-size: 32px;
    }

}

/*1440px*/

@media all and  (max-width: 1440px ){

    .container {
        max-width: 1015px;
    }

    .menu {
        font-size: 35px;
        margin-left: -150px;
    }

    .categories .first {
        margin-top: -182px;
        font-size: 40px;
        margin-left: 164px;
    }

    .categories .second {
        margin-top: -192px;
        font-size: 45px;
        margin-left: 336px;
    }

    .categories .third {
        margin-top: -183px;
        font-size: 55px;
        margin-left: 538px;
    }

    .categories .fourth {
        margin-top: 11px;
        font-size: 55px;
        margin-left: 700px;
    }

    h3{
        font-size: 30px;
    }
}

/*1300px*/

@media all and  (max-width: 1300px ){

    #escapingBallG {
        position: relative;
        margin: 15% 0 0 34%;
    }

    .logo {
        width: 20%;
        margin-left: -21%;
        margin-top: 61px;
    }

    .naziv {
        margin-top: -100px;
        margin-left: 2px;
        max-width: 155px;
    }

    h3{
        font-size: 28px;
    }
}

/*1260px*/

@media all and  (max-width: 1260px ){


    .menu {
        font-size: 33px;
        margin-left: -150px;
    }

    h3{
        font-size: 26px;
    }
}

/*1170px*/

@media all and  (max-width: 1170px ){

    .loader-wrapper img{
        max-width: 92%;
    }

    .container {
        max-width: 930px;
    }

    .menu {
        font-size: 33px;
        margin-left: -190px;
        margin-bottom: 6px;
    }

    .categories .first {
        margin-top: -159px;
        font-size: 35px;
        margin-left: 154px;
    }

    .categories .second {
        margin-top: -180px;
        font-size: 40px;
        margin-left: 314px;
    }

    .categories .third {
        margin-top: -165px;
        font-size: 50px;
        margin-left: 495px;
    }

    .categories .fourth {
        margin-top: 11px;
        font-size: 50px;
        margin-left: 640px;
    }

    h3{
        font-size: 24px;
    }
}



@media all and  (max-width: 1070px ){

    .loader-wrapper img {
        max-width: 80%;
    }

    .container {
        max-width: 850px;
    }

    .logo {
        width: 20%;
        margin-left: -21%;
        margin-top: 45px;
    }

    .menu {
        font-size: 30px;
        margin-left: -190px;
        margin-top: 98px;
    }

    .naziv {
        margin-top: -91px;
        margin-left: 2px;
        max-width: 143px;
    }

    .categories .first {
        margin-top: -134px;
        font-size: 30px;
        margin-left: 143px;
    }

    .categories .second {
        margin-top: -167px;
        font-size: 37px;
        margin-left: 285px;
    }

    .categories .third {
        margin-top: -152px;
        font-size: 47px;
        margin-left: 452px;
    }

    .categories .fourth {
        margin-top: 6px;
        font-size: 47px;
        margin-left: 585px;
    }

    .footer-text {
        display: block;
        line-height: 10px;
    }

    h3 {
        font-size: 22px;
    }
}

/*990px*/

@media all and  (max-width: 990px ){

    .container {
        max-width: 775px;
    }

    .menu {
        margin-top: 90px;
        font-size: 28px;
        margin-left: -120px;
    }

    .img-container {
        height: 400px;
        overflow: hidden;
        position: relative;
        width: 100%;
        margin-bottom: 145px;
    }

    .categories .first {
        margin-top: -124px;
        font-size: 28px;
        margin-left: 130px;
    }

    .categories .second {
        margin-top: -156px;
        font-size: 35px;
        margin-left: 257px;
    }

    .categories .third {
        margin-top: -141px;
        font-size: 45px;
        margin-left: 407px;
    }

    .categories .fourth {
        margin-top: 0px;
        font-size: 45px;
        margin-left: 529px;
    }

    h3 {
        font-size: 20px;
    }
}

/*910px*/

@media all and  (max-width: 910px ){

    .container{
        max-width: 725px;
    }

    .naziv {
        margin-top: -79px;
        margin-left: 2px;
        max-width: 130px;
    }

    .menu {
        margin-top: 90px;
        font-size: 28px;
        margin-left: -145px;
    }

    .img-container {
        height: 335px;
        margin-bottom: 120px;
    }

    .categories .first {
        margin-top: -124px;
        font-size: 28px;
        margin-left: 114px;
    }

    .categories .second {
        margin-top: -143px;
        font-size: 35px;
        margin-left: 235px;
    }

    .categories .third {
        margin-top: -136px;
        font-size: 45px;
        margin-left: 377px;
    }

    .categories .fourth {
        margin-top: 0px;
        font-size: 45px;
        margin-left: 490px;
    }
}

/*850px*/

@media all and  (max-width: 850px ){

    .container {
        max-width: 660px;
    }

    .menu{
        margin-bottom: 0px;
    }

    .img-container {
        height: 335px;
        margin-bottom: 75px;
    }

    .categories .first {
        margin-top: -109px;
        font-size: 25px;
        margin-left: 106px;
    }

    .categories .second {
        margin-top: -133px;
        font-size: 32px;
        margin-left: 213px;
    }

    .categories .third {
        margin-top: -123px;
        font-size: 42px;
        margin-left: 343px;
    }

    .categories .fourth {
        margin-top: -6px;
        font-size: 42px;
        margin-left: 442px;
    }

    h1{
        font-size: 1.8em;
    }


}


/*800px*/

@media all and  (max-width: 800px ) {

    .loader-wrapper img {
        max-width: 70%;
    }

    #escapingBallG {
        position: relative;
        margin: 15% 0 0 32%;
    }

    .menu-btn {
        display: inline-block;
        margin-top: 85px;
        margin-left: 270px;
    }

    .menu-btn span{

        width: 45px;
        background: black;
    }

    .menu {
        display: none;
    }

    .mobile-menu{
        border-radius: 100px;
    }

    .mobile-menu li a {
        font-size: 30px;
        padding: 6px;
        color: #cf910d;
    }
}

/*750px*/

@media all and  (max-width: 750px ){

    .loader-wrapper img {
        max-width: 70%;
    }

    .container {
        max-width: 585px;
    }

    .naziv {
        margin-top: -64px;
        margin-left: 2px;
        max-width: 105px;
    }

    .categories .first {
        margin-top: -102px;
        font-size: 23px;
        margin-left: 92px;
    }

    .categories .second {
        margin-top: -115px;
        font-size: 30px;
        margin-left: 183px;
    }

    .categories .third {
        margin-top: -113px;
        font-size: 40px;
        margin-left: 300px;
    }

    .categories .fourth {
        margin-top: -10px;
        font-size: 40px;
        margin-left: 387px;
    }

    body section{
        border-top: 10px solid #cf910d;
        border-bottom: 10px solid #cf910d;
        width: 90%;
    }

    form .field label{
        font-size: 1.3em;
    }

    form .field input[type=text]{
        font-size: 1.3em;
    }

    form .field textarea{
        font-size: 1.2em;
        padding-left: 25.5%;
    }

    form .field:hover label {
        width: 30%;
        background: #cf910d;
        color: white;
    }
}

/*680px*/

@media all and  (max-width: 680px ){

    .loader-wrapper img {
        max-width: 65%;
    }

    #escapingBallG {
        position: relative;
        margin: 30% 0 0 30%;
    }

    .logo {
        width: 20%;
        margin-left: -6%;
        margin-top: 36px;
    }

    .naziv {
        margin-top: -59px;
        margin-left: 45px;
        max-width: 98px;
    }

    .menu-btn {
        display: inline-block;
        margin-top: 85px;
        margin-left: 228px;
    }

    .menu-btn span {
        width: 40px;
        background: black;
    }
}

/*600px*/

@media all and  (max-width: 600px ){

    .loader-wrapper img {
        max-width: 55%;
    }

    .container{
        max-width: 530px;
    }

    .menu-btn {
        margin-left: 215px;
    }

    .img-container {
        height: 265px;
        margin-bottom: 50px;
    }

    .categories .first {
        margin-top: -96px;
        font-size: 22px;
        margin-left: 81px;
    }

    .categories .second {
        margin-top: -107px;
        font-size: 28.5px;
        margin-left: 162px;
    }

    .categories .third {
        margin-top: -103px;
        font-size: 38px;
        margin-left: 266px;
    }

    .categories .fourth {
        margin-top: -14px;
        font-size: 38px;
        margin-left: 345px;
    }


    body1 {
        --l: calc(125vh/(var(--n-rows) + 3));
    }

    .galery{
        margin-bottom: -75px;
    }

    form input[type=submit]{
        font-size: 1em;
    }

    body section h1 {
        font-size: 2.5em;
    }

    form {
        width: 324px;
    }
}

/*540px*/

@media all and  (max-width: 540px ){

    .container {
        max-width: 460px;
    }

    .naziv {
        margin-top: -53px;
        margin-left: 39px;
        max-width: 89px;
    }

    .menu-btn {
        margin-left: 165px;
        margin-top: 55px;
    }

    .menu-btn span {
        width: 35px;
    }

    .categories .first {
        margin-top: -78px;
        font-size: 18px;
        margin-left: 70px;
    }

    .categories .second {
        margin-top: -90px;
        font-size: 25px;
        margin-left: 139px;
    }

    .categories .third {
        margin-top: -95px;
        font-size: 35px;
        margin-left: 229px;
    }

    .categories .fourth {
        margin-top: -14px;
        font-size: 34px;
        margin-left: 296px;
    }

    h3 {
        font-size: 18px;
    }

    .img-container {
        height: 265px;
        margin-bottom: 20px;
    }

    body1 {
        --l: calc(109vh/(var(--n-rows) + 3));
    }

    h2{
        font-size: 22px;
    }
}


/*425px*/

@media all and  (max-width: 425px ) {

    #escapingBallG {
        position: relative;
        margin: 40% 0 0 21%;
    }

    .container {
        max-width: 370px;
    }

    .naziv {
        margin-top: -39px;
        margin-left: 28px;
        max-width: 64px;
    }

    .menu-btn {
        margin-left: 115px;
        margin-top: 45px;
    }

    .mobile-menu li a {
        font-size: 19px;
        padding: 0px;
    }

    .menu-btn span {
        width: 28px;
        height: 3px;
    }

    .categories .first {
        margin-top: -62px;
        font-size: 14px;
        margin-left: 57px;
    }

    .categories .second {
        margin-top: -71px;
        font-size: 19px;
        margin-left: 112px;
    }

    .categories .third {
        margin-top: -76px;
        font-size: 30px;
        margin-left: 180px;
    }

    .categories .fourth {
        margin-top: -11px;
        font-size: 26px;
        margin-left: 236px;
    }

    .footer-lines {
        margin-top: 40px;
    }

    .footer-text {
        line-height: 5px;
    }

    h3 {
        font-size: 16px;
    }

    body1 {
        --l: calc(88vh/(var(--n-rows) + 3));
        height: 90vh;
        margin-bottom: 50px;
    }

    h1 {
        font-size: 1.2em;
    }

    body section h1 {
        font-size: 2.1em;
    }

    form .field {
        margin-bottom: 7px;
    }
}


/*375px*/


@media all and  (max-width: 375px ){

    .logo {
        width: 20%;
        margin-left: 14%;
        margin-top: 22px;
    }

    .naziv {
        margin-top: -39px;
        margin-left: 63px;
        max-width: 61px;
    }

    .menu-btn {
        margin-top: 30px;
    }

    .menu-btn span {
        margin-bottom: 4px;
    }

    .img-container {
        height: 205px;
    }

    h2 {
        font-size: 18px;
    }

    .onama{
        margin-left: 20px;
    }

    .onjima{
        margin-left: 20px;
    }

    body1 {--l: calc(81vh / (var(--n-rows) + 3)); height: 75vh; }
}


@media all and  (max-width: 360px){

    .container {
        max-width: 355px;
    }

    .categories .first {
        margin-top: -58px;
        font-size: 13px;
        margin-left: 56px;
    }

    .categories .second {
        margin-top: -67px;
        font-size: 17px;
        margin-left: 109px;
    }

    .categories .third {
        margin-top: -70px;
        font-size: 27px;
        margin-left: 174px;
    }

    .categories .fourth {
        margin-top: -9px;
        font-size: 24px;
        margin-left: 228px;
    }

    .footer-text {
        line-height: 3px;
    }

    h3 {
        font-size: 14px;
    }

    body1 {
        --l: calc(55vh / (var(--n-rows) + 3));
        height: 65vh;
    }

    form {
        width: 300px;
    }


}