@font-face {
    font-family: Chunk5;
    src: url(../fonts/chunkfive.woff);
}


@media screen and (max-width: 768px) {
    .navbar-brand {width: 70%;}
    .mali {width: 60%;}
    .jumbotron {padding-top: 90px;}
    li { padding-right: 25px;}
    h1 { padding-left: 10px;
         padding-right: 10px;}
    h4 {    padding-left: 10px;
            padding-right: 10px;}
    
    .google_karta { width:100% !important;
                height:auto;
                margin-top: 45px;
                }

.text_margin {  width: 100% !important;
                float: left !important;
                padding-left: 20px !important;
                margin-top: -30px;}
    
}

@media screen and (max-width: 520px) {
    a.right_link    {   text-decoration: none;
                        font-size: 10px;
                    color: darkgray;s
                    transition: 0.2s;
                }

    a.right_link_active    {    text-decoration: none;
                                font-size: 10px;
                            color: black;
                            transition: 0.2s;
                }
}


li {text-align: justify;
    margin-bottom: 10px;
    margin-right: 20px;
    list-style: none;}

.p2 {opacity: 0.65;}

.dec_under{ background-color: #201f1f;
            height: 30px;
            width: 100%;
            margin-top: -30px;}

.dec_contact{background-color: #323232;
            height: 30px;
            width: 100%;
            margin-top: -30px;}

h1  {   font-family: Chunk5;
        margin-top: 70px;
        text-align: center;
        }

h3  {   margin-bottom: 10px;
        }

h4  {   margin: 20px 0 20px 0;
        text-align: center;}

hr { opacity: 0.5;}

.kocka {    width: 20%px;
            height: 320px;
            background-repeat: no-repeat;
            text-align: left;
            background-position: center;
            padding: 90px 10px 10px 60px;
            margin-bottom: 80px;
            float: left;
            color: white;}

.kocka1 {   width: 20%;
            height: 320px;
            background-repeat: no-repeat;
            text-align: left;
            background-position: center;
            padding: 90px 5px 5px 30px;
            margin-bottom: 80px;
            float: left;
            color: white;}

.krug   {   cx:50%;
            cy:50%;
            r:40%;
            stroke-width:3;
            fill-opacity: 0;
            transition: 0.8s;}

.link1  {   width: auto;
            float: left;
            list-style-type: none;
            margin-right: 15px;
            margin-top: 15px;
            color: gray;
            }

.link2  {   width: auto;
            float: right;
            list-style-type: none;
            margin-top: 15px;            
            }

a.right_link    {   text-decoration: none;
                    color: darkgray;
                    transition: 0.2s;
                }

a.right_link_active    {    text-decoration: none;
                            color: black;
                            transition: 0.2s;
                }

a.right_link:hover {    color: black;}

/* Početak Krugova */

/* Krug 1 */
.krugonja1 { width: 20%;
            margin-right: 5%;
            height: 230px;
            background-image: url(../images/krug_1_normal.png);
            background-size: 100%;
            background-repeat: no-repeat;
            float: left;
            transition: 0.2s;
            }

.krugonja1_active { width: 20%;
            margin-right: 5%;
            height: 230px;
            background-image: url(../images/krug_1_active.png);
            background-size: 100%;
            background-repeat: no-repeat;
            float: left;
            transition: 0.2s;
            }

.krugonja1:hover   { background-image: url(../images/krug_1_active.png);     
}

/* Krug 2 */
.krugonja2 { width: 20%;
            margin-right: 5%;
            height: 230px;
            background-image: url(../images/krug_2_normal.png);
            background-size: 100%;
            background-repeat: no-repeat;
            float: left;
            transition: 0.2s;
            }

.krugonja2_active { width: 20%;
            margin-right: 5%;
            height: 230px;
            background-image: url(../images/krug_2_active.png);
            background-size: 100%;
            background-repeat: no-repeat;
            float: left;
            transition: 0.2s;
            }

.krugonja2:hover   { background-image: url(../images/krug_2_active.png);     
}

/* Krug 3 */
.krugonja3 { width: 20%;
            margin-right: 5%;
            height: 250px;
            background-image: url(../images/krug_3_normal.png);
            background-size: 100%;
            background-repeat: no-repeat;
            float: left;
            transition: 0.2s;
            }

.krugonja3_active { width: 20%;
            margin-right: 5%;
            height: 250px;
            background-image: url(../images/krug_3_active.png);
            background-size: 100%;
            background-repeat: no-repeat;
            float: left;
            transition: 0.2s;
            }

.krugonja3:hover   { background-image: url(../images/krug_3_active.png);     
}

/* Krug 4 */
.krugonja4 { width: 20%;
            margin-right: 5%;
            height: 250px;
            background-image: url(../images/krug_4_normal.png);
            background-size: 100%;
            background-repeat: no-repeat;
            float: left;
            transition: 0.2s;
            }

.krugonja4_active { width: 20%;
            margin-right: 5%;
            height: 250px;
            background-image: url(../images/krug_4_active.png);
            background-size: 100%;
            background-repeat: no-repeat;
            float: left;
            transition: 0.2s;
            }

.krugonja4:hover   { background-image: url(../images/krug_4_active.png);     
}

/* Gotovi Krugovi */

/* Početak Krugova EN */

/* Krug 1 */
.krugonja1_en { width: 20%;
            margin-right: 5%;
            height: 230px;
            background-image: url(../images/krug_1_en_normal.png);
            background-size: 100%;
            background-repeat: no-repeat;
            float: left;
            transition: 0.2s;
            }

.krugonja1_en_active { width: 20%;
            margin-right: 5%;
            height: 230px;
            background-image: url(../images/krug_1_en_active.png);
            background-size: 100%;
            background-repeat: no-repeat;
            float: left;
            transition: 0.2s;
            }

.krugonja1_en:hover   { background-image: url(../images/krug_1_en_active.png);     
}

/* Krug 2 */
.krugonja2_en { width: 20%;
            margin-right: 5%;
            height: 230px;
            background-image: url(../images/krug_2_en_normal.png);
            background-size: 100%;
            background-repeat: no-repeat;
            float: left;
            transition: 0.2s;
            }

.krugonja2_en_active { width: 20%;
            margin-right: 5%;
            height: 230px;
            background-image: url(../images/krug_2_en_active.png);
            background-size: 100%;
            background-repeat: no-repeat;
            float: left;
            transition: 0.2s;
            }

.krugonja2_en:hover   { background-image: url(../images/krug_2_en_active.png);     
}

/* Krug 3 */
.krugonja3_en { width: 20%;
            margin-right: 5%;
            height: 250px;
            background-image: url(../images/krug_3_en_normal.png);
            background-size: 100%;
            background-repeat: no-repeat;
            float: left;
            transition: 0.2s;
            }

.krugonja3_en_active { width: 20%;
            margin-right: 5%;
            height: 250px;
            background-image: url(../images/krug_3_en_active.png);
            background-size: 100%;
            background-repeat: no-repeat;
            float: left;
            transition: 0.2s;
            }

.krugonja3_en:hover   { background-image: url(../images/krug_3_en_active.png);     
}

/* Krug 4 */
.krugonja4_en { width: 20%;
            margin-right: 5%;
            height: 250px;
            background-image: url(../images/krug_4_en_normal.png);
            background-size: 100%;
            background-repeat: no-repeat;
            float: left;
            transition: 0.2s;
            }

.krugonja4_en_active { width: 20%;
            margin-right: 5%;
            height: 250px;
            background-image: url(../images/krug_4_en_active.png);
            background-size: 100%;
            background-repeat: no-repeat;
            float: left;
            transition: 0.2s;
            }

.krugonja4_en:hover   { background-image: url(../images/krug_4_en_active.png);     
}

/* Gotovi Krugovi */

.krugonja:active    {   cx:50%;
                    cy:50%;
                    r:40%;
                    stroke-width:3;
                    fill-opacity: 0.5;}

.podnaslov  {   text-align: left;
                padding-top: 15px;
                font-size: 20px;
                font-family: Chunk5;
                }

footer  {   margin-top: 50px;
            }

.kontakt_logo { width: 380px;
                margin-top: 50px;
                margin-left: -2%;}

.google_karta { float:left;
                width:30%;
                height:auto;
                margin-top: 45px;
                }

.text_margin {  width: 69%;
                float: right;
                padding-left: 10px;}

.kon_link { color: #727271;
            transition: 0.2s;
            text-decoration: none;
            }

.kon_link:hover { color: #9cca5d;
                  text-decoration: none;
}

.kon_link:active { color: #9cca5d;
                  text-decoration: none;
}

.kon_link:visited { color: #9cca5d;
                  text-decoration: none;
}

.masno {font-weight: bold;}

p.naslov {  margin-top: 40px;
            margin-bottom: 20px;
            font-size: 19px;}

p.line {    color: #8c8c8c;
            opacity: 0.7;
            margin-top: -10px;}