html, body{ height:100vh; width:100vw; overflow:hidden;}
        body{
            background: skyblue;
            font-family: 'Wellfleet', cursive;
            transition: background-color 2s;
        }
        /* width */
        ::-webkit-scrollbar {
        width: 5px;
        }

        /* Track */
        ::-webkit-scrollbar-track {
        background: #f1f1f1; 
        }
        
        /* Handle */
        ::-webkit-scrollbar-thumb {
        background: #888; 
        }

        /* Handle on hover */
        ::-webkit-scrollbar-thumb:hover {
        background: none; 
        }
        body.daylight{
            background-color: skyblue;
        }
        body.nightfall{
            background-color: #183c55;
        }
        .lang{ 
            position: absolute; top:0em; right:0;
            width:250px; height:220px;
            padding-top:1em;
        }
            .lang span{ 
                vertical-align: top;
            }
            .lang span:first-child{ margin-left: 20%;} 
            .lang span:nth-child(2){ margin-left: 4%;} 
            .lang span:hover{ cursor: pointer;}
            .sunmoon{
                position: absolute; top:0; right:-500px;
                width:200px;
                transform: translate(100px, -50%);
                transition: all 1.5s;
                /* box-shadow: 0px 0px 100px yellow; */
            }
            .sunmoon.visible{ right:0; }
            .moon.visible{ 
                right:3em; top:3em; 
                width:70px;
                transform: translate(20px, -50%);
            }

        .index{
            top:0; left:0; bottom:0; width:100vw;
            position: fixed;
            transition: top 1s;
        }
        .index.hide_up{
            top:-101vh;
        }
        .index.hide_down{
            top:101vh;
        }
        


            /******************************************************************/



            
        .cars, .ships{
            position: absolute; 
            left:0; right:0; bottom:0; height:40px;
        }

        .airplane{ 
            position: absolute; 
            top:-10vh;  width:10vh; height: 10vh;
            animation: 70s avion1 infinite linear;
            z-index:10;
        }
        .airplane img{
            height:3vh; width:auto;
        }
        .airplane:hover{ cursor: pointer; } 
        .airplane1{ top:-6vh; left:20%;}
        .airplane2{  left:80%; animation-name: avion2;}
        @keyframes avion1 { 100% { left: 120%; }  }
        @keyframes avion2 { 100% { left: -20%; }  }

        .airplane1.airplane_rotate{ 
            transform:rotate(360deg);
            transition: transform 1s;
        }
        .airplane2.airplane_rotate{ 
            transform:rotate(-360deg);
            transition: transform 1s;
        }
        .car{ 
            position: absolute; 
            bottom:1vh;  
            height:3vw; width:auto;
            animation: 80s car1 infinite linear;
            z-index:100;
        }
        .car:hover{ cursor: pointer; } 
        .car1{  left:20%; animation-duration: 120s;  }
        .car2{  left:40%; animation-name: car2; animation-duration: 80s; }
        .car3{  left:40%; animation-name: car3; bottom:1.5vh; z-index: 99; animation-duration: 60s;}
        @media screen and (max-width:900px){
            .car1{  left:-140%; }
            .car2{  left:-30%;  }
            .car3{  left:100%; }
        }
        @keyframes car1 { 100% { left: 160%; }  }
        @keyframes car2 { 100% { left: 110%; }  }
        @keyframes car3 { 100% { left: -20%; }  }

        .ship{ 
            position: absolute; 
            top: -9.5vh;
            height: 5vw; width:auto;
            transition:left 70s;
            z-index:100;
            transition-timing-function: linear;
        }
        .ship:hover{ cursor: pointer; } 
        .ship1{  left:20%; }
        .ship2{  left:80%; top: -4vh; }
        .ship1.move { left: 120%; }
        .ship2.move { left: -40%; }

        .paused {
            -webkit-animation-play-state: paused !important;
            -moz-animation-play-state: paused !important;
            -o-animation-play-state: paused !important; 
            animation-play-state: paused !important;
        }

        .waves{
            height:14vh;
            background: url('../slike/sea3.png') repeat;
            background-size: 29vh 7vh;
            z-index:20;
            position: relative;
        }
        



            /******************************************************************/



        .menu{
            position: relative;
            margin-top:25vh; text-align: center;
            width:100%; height:61vh;
        }
        .ground{
            position: absolute; 
            left:0; right:0; 
            bottom:0; height:4vh;
            background: #88b42d url('../slike/road.png') repeat-x 0px 3px;
            background-size: 100% 4vh;
        }
        .mountains{
            position: absolute; 
            left:0; right:0;     
            bottom: 0;
            z-index: -10;
            height: 30vh;
            background:url('../slike/mountains2.png') no-repeat center / 100% 100%;
        }
        .big_logo{
            position: absolute;
            bottom: 15.7vh;
            right: 11vw;
            width: 22vw; height:auto;
            z-index: -12;
        }
        .big_logo:hover{
            cursor: pointer;
        }
        .big_logo.fall{
            transform-origin:bottom;
            transform: perspective(64vh) rotateX(68deg) ;
            transition: transform .2s;
        }
        .stavka{
            display: inline-block;
            width: 15vw;
            height: 58vh;
            position: relative;
            vertical-align: bottom;
            z-index: 10;
        }
            
            h4{ 
                text-align: center;
                line-height: 15vh;
                height: 13vh;
                background: url(../slike/cloud5.png) no-repeat center / contain;
                /* background-size: 100%; */
                font-size: 1.5vw;
                padding:2vh 0;
                color:white;
                font-family:'Baloo 2';
                font-weight: bolder;
                /* background-color: #5D8D89; */
                /* text-shadow: 
                2px 0px 0px #70bcee, 
                0px 2px 0px #70bcee, 
                -2px 0px 0px #70bcee, 
                0px -2px 0px #70bcee; */
                text-shadow: 
                2px 0px 0px #00000080, 
                0px 2px 0px #00000080, 
                -2px 0px 0px #00000080, 
                0px -2px 0px #00000080;
                text-transform: capitalize;
            }
            .stavka:nth-child(6) h4{ background-image: url(../slike/cloud5.png); }
            .stavka:nth-child(7) h4{ background-image: url(../slike/cloud6.png); }
            .stavka:nth-child(8) h4{ background-image: url(../slike/cloud2.png); }
            .stavka:nth-child(10) h4{ background-image: url(../slike/cloud9.png); }
            .stavka:nth-child(9) h4{ background-image: url(../slike/cloud3.png); }
            .stavka:nth-child(11) h4{ background-image: url(../slike/cloud8.png); }
            /* 5, 6, 2 3 9 8*/
            /* h4.two_lines{ padding-top: 2em;} */
            h4:hover{
                cursor: pointer;

            }
            .rain{ 
                position: absolute;
                width: 80%;
                height: 40vh;
                top: 10vh;
                z-index: -15;
                opacity: 0;
                left: 10%; transition: opacity 1s;
            }
            h4:hover + .rain{ 
                z-index: -10;
                opacity:1;  
            } 
            body.daylight h4:hover{
                color:#c6eeff;
            }
            body.nightfall h4:hover{
                color:#c6efff;
            }
            
            .stavka img.icon, .stavka img.cloud{
                width:100%; height:auto;
                position: absolute;
                left:0; bottom:0;
            }
            .education img.icon{
                width:70%; left:15%;
            }
            .stavka img.cloud{ 
                top:0; z-index: -1;
            }
            
            /******************************************************************/





            .stavka img.icon_cc:hover{
                cursor: pointer;
            }
            .stavka img.icon_pismo{ 
                width:40%; bottom: 4em;
                left: 39%;
                transition: all .2s;
                transition-timing-function: linear;
            }
            .stavka img.icon_pismo.clicked{ 
                bottom:-1vh; 
                transform:rotate(21deg);
            }
            .stavka img.icon_bupti{ 
                width:60%; bottom: 4.5em;
                left: 20%;
                transition: all .3s;
                transition-timing-function: linear;
            }
            .stavka img.icon_bupti.clicked{ bottom:1em; }
            .stavka img.icon_house{ width:72%; }
            .stavka img.icon_parents{ 
                width:25%; bottom: -0.5vh;
                left: 60%; display:none;
                transition: all .3s;
                transition-timing-function: linear;
            }
            .stavka img.icon_parents.clicked{ display:block; }            
            .stavka img.icon_parents_kids{ 
                width:40%; bottom: .1vh;
                left: 0%; display:none;
                transition: all .3s;
                transition-timing-function: linear;
            }
            .stavka img.icon_parents_kids.clicked{ display:block; }     
            .stavka img.icon_smoke{ 
                width: 10vw;
                height: 0;
                bottom: 7.3vw;
                left: 41%; opacity:0;
                transition: all .3s;
                transition-timing-function: linear;
            }
            .stavka img.icon_smoke.clicked{ opacity:1; height:auto; }    

            .stavka .edu_datum{
                position:absolute;
                color: #343434;
                bottom: 5.55vw;
                left: 22%; 
                width:40%;
                font-size: 1.3vw;
            }
            /* .stavka .icon-bb{ display:none; } */
            .stavka4 .icon:hover{
                cursor: pointer;
            }
            .stavka .icon_kidjump{
                position: absolute;
                left:30%; bottom:0vw;
                width:30%;
            }
            /*************************************************************************/
            
            .stars{ opacity: 0; transition:opacity 2s; z-index:-1; position: relative;}
            .stars.visible{ opacity: 1; z-index:0;}
            .stars img{ 
                position: absolute; 
            }
            .lang .big_logo{ 
                display:none;
            }
            .lang .ispod_big_logo{
                display:none; 
            }
            .lang span{ display: none;}
            .menu .arrows{ display:none; }


            @media only screen and (max-width:600px){
                .index{
                    overflow-x:hidden;
                }
                .menu .stavka{
                    position: absolute;
                    width:80%; left:101%;
                    transition: left .4s;
                }
                .menu .stavka h4{ font-size: 5vw; }
                .menu .stavka.stavka_on{
                    left:10%;
                }
                .menu .arrows{
                    display:block; position:fixed;
                    top:32vh; left:0; width:100vw;
                    z-index:100;
                }
                .menu .arrows .left_arrow{
                    position: absolute; top:0; left:2vw; width:10vw; height:10vw;
                    background: url('../slike/left.png') no-repeat center / contain;
                }
                .menu .arrows .right_arrow{
                    position: absolute; top:0; right:2vw; width:10vw; height:10vw;
                    background: url('../slike/right.png') no-repeat center / contain;
                }
                .lang{
                    right:auto; left:0; width:100%;
                }
                .lang span:first-child { margin-left:0%; }
                .lang span { float:right; }
                .stavka .big_logo{ display:none;}
                .lang .big_logo{ 
                    display:block; 
                    position: absolute;
                    bottom: auto; top:1vh;
                    right: auto; left:1vh;
                    width: 37vw;
                    height: auto;
                    z-index: -12;
                }
                .lang .ispod_big_logo{
                    display:block; 
                    position: absolute;
                    bottom: auto; top:17vw;
                    right: auto; left:1vh;
                    font-size:3vw; width: 37vw; text-align: center;
                }
                .ship, .car{ height:11vw; }
                .stavka .edu_datum{
                    bottom: 31vw; left: 22%;
                    width: 40%; 
                    text-align: center;
                    font-size: 4vw;
                }
                /* .stavka .icon-bb-big{ display:none; } */
                /* .stavka .icon-bb{ display:block; } */
                .stavka img.icon_smoke {
                    width: auto;
                    height: 49vw;
                    bottom: 39.3vw;
                    left: 44vw;
                }
                .stavka img.icon_smoke.clicked{ height: 49vw; }    
            }
            @media only screen and (max-width:400px){   
                .menu .stavka h4{ font-size: 6vw; }
            }