{
    /* -webkit-tap-highlight-color: rgba(0,0,0,0); */
    /* make transparent link selection, adjust last value opacity 0 to 1.0 */
}

/* Portrait layout (default) */
.app {
    background: url(../img/logo.png) no-repeat center top;
    /* 170px x 200px */
    position: absolute;
    /* position in the center of the screen */
    left: 50%;
    top: 50%;
    height: 50px;
    /* text area height */
    width: 225px;
    /* text area width */
    text-align: center;
    padding: 180px 0px 0px 0px;
    /* image height is 200px (bottom 20px are overlapped with text) */
    margin: -115px 0px 0px -112px;
    /* offset vertical: half of image height and text area height */
    /* offset horizontal: half of text area width */
}

/* Landscape layout (with min-width) */
@media screen and (min-aspect-ratio: 1/1) and (min-width: 400px) {
    .app {
        background-position: left center;
        padding: 75px 0px 75px 170px;
        /* padding-top + padding-bottom + text area = image height */
        margin: -90px 0px 0px -198px;
        /* offset vertical: half of image height */
        /* offset horizontal: half of image width and text area width */
    }
}

h1 {
    font-size: 24px;
    font-weight: normal;
    margin: 0px;
    overflow: visible;
    padding: 0px;
    text-align: center;
}

.back_red {
    background-color: #E3553B;
}

.back_blue {
    background-color: #08A9DD;
}

.back_green {
    background-color: #A6CE38;
}

.back_orange {
    background-color: #ffa200;
}

.icon_desc {
    margin-bottom: 0.7rem;
}

.event {
    border-radius: 4px;
    -webkit-border-radius: 4px;
    color: #FFFFFF;
    font-size: 12px;
    margin: 0px 30px;
    padding: 2px 0px;
}

.event.listening {
    background-color: #333333;
    display: block;
}

.event.received {
    background-color: #4B946A;
    display: none;
}

@keyframes fade {
    from {
        opacity: 1.0;
    }

    50% {
        opacity: 0.4;
    }

    to {
        opacity: 1.0;
    }
}

@-webkit-keyframes fade {
    from {
        opacity: 1.0;
    }

    50% {
        opacity: 0.4;
    }

    to {
        opacity: 1.0;
    }
}

.blink {
    animation: fade 3000ms infinite;
    -webkit-animation: fade 3000ms infinite;
}

:focus {
    outline: 0 transparent;
}

.hide {
    display: none;
}

body {
    background-color: #fff;
    font-family: 'Raleway', 'Ubuntu', 'HelveticaNeue', Helvetica, Arial, sans-serif;
}

.btn-stojeproracun {
    /* color: #fff; */
    /* background-color: red; */
    /* border-color: #ffffff; */
}

.btn-stojeproracun:hover {
    color: #fff;
    background-color: #0380a9;
    /*border-color: #01549b;*/
}

.btn-prihodi {
    color: #fff;
    background-color: #a6ce38;
    /* border-color: #ffffff; */
}

.btn-prihodi:hover {
    color: #fff;
    background-color: #71901b;
    /*border-color: #01549b;*/
}

.btn-rashodi {
    color: #fff;
    background-color: #e3553b;
    /* border-color: #ffffff; */
}

.btn-rashodi:hover {
    color: #fff;
    background-color: #ad3722;
    /*border-color: #01549b;*/
}

.btn-mojproracun {
    color: #fff;
    background-color: #ffa200;
    /* border-color: #ffffff; */
}

.btn-mojproracun:hover {
    color: #fff;
    background-color: #d06106;
    /*border-color: #01549b;*/
}

.dnone {
    display: none;
}

#header_logo_small {
    width: 9rem;
}

.font-condensed {
    font-family: 'Raleway', 'Ubuntu Condensed', 'Ubuntu', 'HelveticaNeue', Helvetica, Arial, sans-serif;
}

#header_title {
    font-size: 2rem;
    font-weight: 100;
    line-height: 2rem;
    margin-top: 2rem;
    position: relative;
    z-index: 0;
    font-family: 'Ubuntu', 'HelveticaNeue', Helvetica, Arial, sans-serif;
}

#header_title_year {
    font-size: 6rem;
    color: #bfbfbf;
    z-index: -1;
    position: relative;
    top: .5rem;
}

#header_title_small {
    font-size: 1.2rem;
    font-weight: 100;
    line-height: 0.8rem;
    margin-top: 2.7rem;
    position: relative;
    z-index: 0;
}

#header_title_year_small {
    font-size: 5rem;
    color: #bfbfbf;
    z-index: -1;
    position: relative;
    top: -0.7rem;
}

.main_button_div {
    padding: 1rem;
    border-radius: 1rem;
    margin: 0.5rem;
    background-color: #ececec;
}

.main_button_cols {
    padding-left: 5px;
    padding-right: 5px;
}

.main_buttons_fa {
    font-size: 3rem;
    color: white;
    width: 5rem;
    height: 5rem;
    padding-top: 1rem;
    margin-bottom: 1rem;
    border-radius: 50%;
    /* float: left; */
    margin-top: 0.2rem;
    /* margin-right: 0.5rem; */
}

#gradonacelnica_photo {
    width: 17%;
    height: auto;
    float: right;
    margin-left: 20px;
    margin-bottom: 10px;
    border-radius: 1rem;
    min-width: 130px;
    max-height: ;
    /* border: 1px solid grey; */
}

.white {
    color: white;
}

.sk_footer {
    margin-left: -15px;
    margin-right: -15px;
    background-color: #afcbff;
    padding: 0.5rem 0;
    display: none;
}

#main_title {
    font-size: 2rem;
    font-weight: lighter;
}

#main_subtitle {
    margin-top: -0.4rem;
    font-size: 1rem;
    font-weight: 200;
}

.right_text_image {
    width: 20%;
    height: auto;
    float: right;
    margin-left: 20px;
    margin-bottom: 10px;
    border-radius: 1rem;
    min-width: 130px;
    position: relative;
    z-index: 1;
    border: 5px solid white;
}

.odjeli_list_icon {
    font-size: 2rem;
    margin-top: -0.1rem;
    margin-left: -3.1rem;
    position: absolute;
}

.pror_li {
    height: 2rem;
}

.pror_li_icon {}

ol {
    counter-reset: li;
    /* Initiate a counter */
    list-style: none;
    /* Remove default numbering */
    *list-style: decimal;
    /* Keep using default numbering for IE6/7 */
    /*font: 15px 'trebuchet MS', 'lucida sans';*/
    padding: 0;
    margin-bottom: 1.5rem;
    /* text-shadow: 0 1px 0 rgba(255,255,255,.5); */
    z-index: 0;
    position: relative;
    cursor: default;
}

ol ol {
    margin: 0 0 0 2em;
    /* Add some left margin for inner lists */
}

.rectangle-list span {
    position: relative;
    display: block;
    padding: .4rem .4rem .4rem 1.8rem;
    *padding: .4em;
    margin: .5rem 0 .5rem 2.5rem;
    background: #ddd;
    color: #000;
    text-decoration: none;
    /* transition: all .3s ease-out; */
}

.rectangle-list span:hover {
    background: #eeeeee;
}

.rectangle-list span:before {
    content: counter(li);
    counter-increment: li;
    position: absolute;
    left: -0.5rem;
    top: 50%;
    margin-top: -1em;
    background: #08a9dd;
    height: 2em;
    width: 2em;
    line-height: 2em;
    text-align: center;
    font-weight: bold;
    color: white;
}

.rectangle-list span:after {
    position: absolute;
    content: '';
    border: .5rem solid transparent;
    left: -2rem;
    top: 50%;
    margin-top: -.5em;
    transition: all .3s ease-out;
}

.rectangle-list span:hover:after {
    left: -1.5rem;
    border-left-color: #000;
}

#link {
    height: 2.3rem;
    width: calc(100% - 10rem);
    text-align: center;
}

#fblink {
    transform: scale(2);
    -ms-transform: scale(2);
    -webkit-transform: scale(2);
    -o-transform: scale(2);
    -moz-transform: scale(2);
    transform-origin: top;
    -ms-transform-origin: top;
    -webkit-transform-origin: top;
    -moz-transform-origin: top;
    -o-transform-origin: top;
    display: inline-block;
}

#copylink {
    padding: .5rem 2rem;
}

.porukabox {
    margin-bottom: 1rem;
    padding: 1rem;
    border-bottom: 1px solid grey;
    background-color: rgb(230, 230, 230);
}

.charter {
    height: 25rem;
}