.galerija .checkico,

.galerija .starrating {

    height: 12px;

    margin-left: 10px;

    display: inline-block

}



.app_ph_butt,

.appslidemenu {

    text-align: center;

    width: 100%

}



.galerija {

    float: left;

    width: 100%;

    display: -webkit-flex;

    display: flex;

    -webkit-flex-flow: row wrap;

    flex-flow: row wrap;

    -webkit-justify-content: space-between;

    justify-content: space-between;

    color: #273e80;

    font-size: 16px

}



.galerija>div:first-child {

    width: 54.54545%

}



.galerija>div:last-child {

    position: relative;

    width: 43.18181%

}



.galerija>div>figure {

    width: 100%;

    padding-top: 65%;

    cursor: pointer

}



.galerija ul {

    list-style: none;

    line-height: 28px;

    margin-top: -8px

}



.galerija strong {

    font-weight: 600

}



.galerija .ph_button {

    width: 100%;

    padding: 15px 0;

    position: absolute;

    right: 0;

    bottom: 0;

    background: #f1f1f1;

    border: 1px solid #b6b3b3;

    font-size: 30px;

    text-align: center;

    color: #273e80;

    text-decoration: none;

    outline: 0

}



.galerija .ph_button>span {

    display: inline-block;

    padding-left: 60px;

    background: url(img/objekat_sprite.svg) left 1px no-repeat

}



.galerija .starrating {

    background: url(img/objekat_sprite.svg) left -189px no-repeat

}



.galerija .starrating.s2 {

    width: 30px

}



.galerija .starrating.s3 {

    width: 45px

}



.galerija .starrating.s4 {

    width: 60px

}



.galerija .starrating.s5 {

    width: 75px

}



.galerija .checkico {

    width: 15px;

    background: url(img/objekat_sprite.svg) no-repeat

}



.podacimain div ul,

.udaljenosti ul {

    margin-left: 28px;

    line-height: 1.8em;

    list-style: none

}



.galerija .checkico.yes {

    background-position: left -90px

}



.galerija .checkico.no {

    background-position: left -128px

}



.imagepaths {

    display: none

}



#map-canvas {

    float: left;

    margin-top: 10px;

    width: 70%;

    height: 500px

}



.podacimain {

    float: left;

    width: 77%;

    margin-top: 20px

}



.podacimain div {

    float: left;

    width: 29.33%;

    margin-bottom: 30px;

    margin-right: 4%

}



.podacimain div div,

.udaljenosti div {

    margin-bottom: 5px;

    padding: 5px 0;

    border-bottom: 1px solid #d8d8d8

}



.podacimain div div img,

.udaljenosti div img {

    margin-right: 7px;

    float: left

}



.podacimain div:nth-child(3n+4) {

    clear: both

}



.podacimain div div {

    float: left;

    width: 100%

}



.podacimain div div p {

    float: left;

    color: #273e80;

    font-size: 20px;

    font-weight: 300

}



.podacimain div ul {

    font-size: 13px;

    color: #7c7c7c

}



.udaljenosti {

    float: left;

    width: 23%;

    margin-top: 20px

}



.udaljenosti div {

    float: left;

    width: 100%

}



.apartmantitle,

.udaljenosti .sub {

    width: 100%;

    padding: 5px 0 5px 10px

}



.udaljenosti .sub {

    float: left;

    margin-top: 5px;

    color: #273e80;

    font-size: 16px;

    border-top: 1px solid #d8d8d8

}



.udaljenosti div p {

    float: left;

    color: #273e80;

    font-size: 20px;

    font-weight: 300

}



.udaljenosti ul {

    font-size: 13px;

    color: #7c7c7c

}



.udaljenosti ul li span {

    float: right

}



.apartman {

    float: left;

    width: 100%;

    margin-top: 30px;

    box-shadow: 0 5px 5px #efefef

}



.apartmantitle {

    float: left;

    background: #273e80;

    color: #FFF;

    font-size: 18px;

    font-weight: 400

}



.apartman .divinfo strong,

.appslidemenu div,

.cijena strong,

.cijenanap>strong,

.rezervacija .button,

.titlecal {

    font-weight: 600

}



.app_img_warp {

    float: left;

    width: 40%;

    margin: 28px 0 22px 1.5%

}



.appimg {

    display: block;

    position: relative;

    float: left;

    width: 100%;

    height: 360px;

    outline: 0

}



.app_ph_butt {

    position: absolute;

    left: 0;

    bottom: 0;

    padding: 10px 0;

    background: #f1f1f1;

    color: #263f82;

    outline: 0

}



.app_ph_butt>span {

    display: inline-block;

    padding-left: 34px;

    background: url(img/objekat_sprite.svg) left -244px no-repeat

}



.appslidemenu {

    float: left;

    height: 35px;

    background: #f1f1f1;

    position: relative

}



.appslidemenu div {

    position: absolute;

    top: 0;

    width: 35px;

    height: 100%;

    background: #e7e7e7;

    color: #696969;

    font-size: 22px;

    cursor: pointer

}



.appslidemenu p {

    width: 100%;

    padding-top: 7px;

    color: #696969;

    font-size: 14px

}



.apartman .right {

    float: left;

    width: 58.5%

}



.tabmenu {

    float: left;

    width: 100%;

    border-bottom: 1px solid #d8d8d8

}



.apartman .switchmenu {

    float: left;

    padding: 5px 25px 5px 10px;

    border-right: 1px solid #f1f1f1;

    font-size: 14px;

    color: #FFF;

    background: #436da8;

    cursor: pointer;


}



.apartman .switchmenu.active,

.apartman .switchmenu:hover {

    background: #7291bc

}



.apartman .switchmenu img {

    float: left;

    width: 15px;

    margin: 2px 7px 0 0

}



.apartman .divinfo {

    float: left;

    width: 100%;

    padding: 15px 10px 10px;

    color: #273e80;

    font-size: 13px;

    display: none

}



.apartman .divinfo.active {

    display: block

}



.apartman .divinfo p {

    float: left;

    width: 100%;

    margin-top: 20px

}



.apartman ul {

    float: left;

    width: 33.33%;

    list-style: none;

    line-height: 1.8em

}



.apartman ul li,

.avail,

.title2 {

    width: 100%;

    float: left

}



.apartman ul li {

    background: url(img/obj_bul.png) center left no-repeat;

    background-size: 6px auto;

    padding-left: 12px

}



.apartman ul li span {

    float: left

}



.apartman ul li img {

    height: 12px;

    float: left;

    margin-top: 5px;

    margin-left: 5px

}



.title2 {

    font-size: 18px;

    margin-bottom: 15px;

    color: #273e80

}



.title2 > span {

    display: inline-block;

    color: #fff;

    background: #db1515;

    font-size: 14px;

    font-weight: 600;

    padding: 5px 10px;

    margin-left: 5px;

}



.avail {

    padding: 15px 10px 10px;

    display: none

}



.avail.active {

    display: block

}



.avail table {

    border: 1px solid #CCC;

    font-size: 12px;

    width: 24.25%;

    float: left;

    border-radius: 5px

}



.avail table:nth-child(-n+4) {

    margin-right: 1%

}



.titlecal {

    background: linear-gradient(#f8f6f6, #cbcbcd);

    background: -webkit-linear-gradient(#f8f6f6, #cbcbcd);

    font-size: 13px;

    text-align: center;

    color: #666;

    padding: 4px;

    border-top-left-radius: 5px;

    border-top-right-radius: 5px

}



.sl,

.slc,

.slhalfd,

.slhalfl {

    font-size: 11px;

    color: #666;

    text-align: center

}



.dan {

    background: #d2d2d2;

    text-align: center;

    color: #666

}



.sl {

    background: #f0efef

}



.slc {

    background: #F30;

    text-decoration: line-through

}



.slhalfl {

    background: url(img/halfl.gif);

    background-size: 100% 100%

}



.slhalfd {

    background: url(img/halfd.gif);

    background-size: 100% 100%

}



.cijena {

    float: left;

    width: 100%;

    border-bottom: 1px solid #d2d2d2;

    border-left: 1px solid #d2d2d2;

    border-right: 1px solid #d2d2d2;

    font-size: 14px;

    color: #666;

    background: #f0efef;

    padding: 3px 5px

}



.cijena p:first-child {

    float: left;

    color: #666

}



.cijena p:nth-child(n+2) {

    float: right;

    color: #666;

    text-align: center;

}



.cijena p:nth-child(2) {

    width: 15%;

}



.cijena p.cross {

    text-decoration: line-through;

}



.cijenanap {

    float: left;

    color: #273e80;

    font-size: 13px;

    margin-top: 20px

}



.availlegend {

    float: left;

    margin: 30px 10px 0 0

}



.availlegend img {

    float: left;

    width: 18px;

    margin: 2px 5px 0 0

}



.availlegend span {

    float: left;

    font-size: 13px;

    color: #7c7c7c

}



.rezervacija {

    width: 100%;

    float: left;

    margin-top: 30px;

    background: #f1f1f1;

    border: 1px solid #b6b3b3;

    padding: 15px;

    font-size: 13px;

    color: #696969;

    position: relative

}



.rezervacija .naslov {

    float: left;

    font-size: 20px;

    color: #696969;

    width: 100%;

    font-weight: 600;

    margin-bottom: 0

}



.rezervacija label,

.rezervacija p {

    font-size: 13px;

    color: #696969;

    float: left

}



.rezervacija p {

    width: 100%;

    margin-bottom: 5px

}



.rezervacija label {

    padding: 6px 10px;

    border: 1px solid #b6b3b3;

    background: #e7e7e7;

    margin: 5px 10px 0 0;

    cursor: pointer

}



.rezervacija label input {

    float: left;

    margin: 3px 0 0 5px

}



.rezervacija .left {

    float: left;

    width: 40%;

    margin: 10px 2% 0 0

}



.rezervacija .left input, .rezervacija .desni input {

    width: 100%;

    height: 25px;

    border: 1px solid #b6b3b3

}



.rezervacija .left input.required {

    border: 1px solid red

}



.rezervacija .left p {

    margin-top: 10px

}



.rezervacija .rezdatum {

    float: left;

    width: 49%;

    margin-right: 2%

}



.rezervacija .datum {

    cursor: pointer

}



.rezervacija .brgostiju {

    float: left;

    width: 100%;

    margin-top: 10px;

    padding: 6px 10px;

    background: #e7e7e7;

    border: 1px solid #b6b3b3

}



.rezervacija .brgostiju span {

    float: left;

    padding-top: 3px

}



.rezervacija select {

    float: right;

    width: 40px;

    height: 25px

}



.rezervacija .desni {

    width: 58%;

    float: left;

    margin-top: 20px

}



.rezervacija textarea {

    width: 100%;

    height: 200px;

    border: 1px solid #b6b3b3

}



.rezervacija .button {

    float: right;

    padding: 5px 15px;

    border: none;

    border-radius: 5px;

    background: #273e80;

    color: #FFF;

    font-size: 16px;

    margin-top: 20px;

    cursor: pointer;

    -webkit-appearance: none

}



.titleabout {

    float: left;

    width: 100%;

    border-bottom: 1px solid #d8d8d8;

    padding: 5px 0;

    color: #273e80;

    font-size: 20px;

    font-weight: 300;

    margin-top: 25px

}



.titleabout img {

    float: left;

    width: 25px

}



.titleabout p {

    float: left;

    margin-left: 10px

}



.pabout {

    float: left;

    width: 100%;

    font-size: 14px;

    color: #696969;

    line-height: 1.5em;

    margin-top: 10px

}



.pabout>span {

    font-size: 15px;

    color: red;

    font-weight: 600

}



.distanceul {

    list-style: none;

    font-size: 14px;

    line-height: 2em;

    color: #696969;

    float: left;

    width:28%; 

    margin:10px 0 0 2%;

}



.warning p:first-child,

.warning p:nth-child(2) {

    color: #FFF;

    text-align: center;

    float: left;

    font-weight: 600

}



.distanceul li {

    background-image: url(img/obj_li.png);

    background-size: 8px auto;

    background-repeat: no-repeat;

    background-position: 0 10px;

    padding-left: 15px

}



.warning {

    position: fixed;

    top: 50%;

    left: 50%;

    -webkit-transform: translate(-50%, -50%);

    transform: translate(-50%, -50%);

    display: none;

    width: 400px;

    background: #f60000;

    border: 3px solid #db1515;

    border-radius: 5px;

    padding: 55px 50px;

    z-index: 10

}



.warning p:first-child {

    font-size: 26px;

    margin: 0

}



.warning p:nth-child(2) {

    font-size: 18px;

    line-height: 1.5em;

    margin: 20px 0 0

}



.features {

    float: left;

    width: 100%;

    margin-bottom: 70px;

    padding-bottom: 30px;

    background: #f1f1f1;

    font-weight: 600;

    font-style: italic;

    color: #414141

}



.features>div {

    display: -webkit-flex;

    display: flex;

    -webkit-flex-flow: row wrap;

    flex-flow: row wrap;

    -webkit-justify-content: space-between;

    justify-content: space-between

}



.feature {

    width: 26%;

    padding: 50px 0 0 90px;

    background: url(img/features.svg) no-repeat

}



.feature.beachchair {

    background-position: left 19px

}



.feature.aircondition {

    background-position: left -95px

}



.feature.parking {

    background-position: left -200px

}



.feature.grill {

    background-position: left -325px

}



.feature.wifi {

    background-position: left -435px

}



.feature.sea {

    background-position: left -545px

}

.feature.pool {

    background-position: left -710px

}



.feature:nth-of-type(n+4) {

    margin-top: 20px

}



@media only screen and (max-width:790px) {

    .galerija .main,

    .galerija>div:first-child,

    .galerija>div:last-child {

        width: 100%

    }

    .galerija .thumbs {

        display: none

    }

    .galerija .ph_button {

        position: relative;

        right: auto;

        bottom: auto;

        float: left

    }

    .galerija ul {

        float: left;

        margin-top: 0;

        padding: 25px 0

    }

    #map-canvas {

        width: 100%;

        height: 500px

    }

    .app_img_warp {

        width: 400px

    }

    .apartman .right {

        width: 100%

    }

    .avail table {

        width: 48%;
        margin-bottom: 2%;
        min-height: 200px;

    }

    .avail table:nth-child(2n+2) {

        margin-right: 2%

    }

    .rezervacija .desni,

    .rezervacija .left {

        width: 100%

    }



    .rezervacija .desni {

        margin-bottom: 30px;

    }



    .feature {

        width: 40%

    }

    .feature:nth-of-type(n+3) {

        margin-top: 20px

    }



    .distanceul,

    .distanceul > li {

        margin: 0;

        width: 100%;

        float: left;

        display: block;

    }

    .apartman .switchmenu {
        width: 33.33%;
        padding: 10px 0 10px 0;
        margin-right: 0;
        font-size: 14px;
        font-weight: 600;
    }

    .apartman .switchmenu > span {
        width: 100%;
        text-align: center;
    }

    .apartman .switchmenu img {
        display: none;
    }

}



@media only screen and (max-width:650px) {

    .galerija .ph_button {

        font-size: 18px

    }

    .galerija .ph_button>span {

        padding-left: 40px;

        background: url(img/objekat_sprite.svg) left -242px no-repeat

    }

    .apartman ul {

        width: 100%

    }

    .rezervacija textarea {

        height: 300px

    }

    .warning {

        width: 95%;

        padding: 35px 30px

    }

    .feature {

        width: 100%;

        height: 95px

    }

    .feature:nth-of-type(n+2) {

        margin-top: 20px

    }



}



@media only screen and (max-width:420px) {

    #map-canvas {

        height: 300px

    }

    .app_img_warp {

        width: 97%

    }

    .rezervacija .rezdatum {

        width: 100%;

        margin-right: 0

    }

}