@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600italic,700,300&subset=latin,latin-ext);

@font-face {

    font-family: 'weather';

    src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.eot');

    src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.eot?#iefix') format('embedded-opentype'),

         url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.woff') format('woff'),

         url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.ttf') format('truetype'),

         url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.svg#artill_clean_weather_iconsRg') format('svg');

    font-weight: normal;

    font-style: normal;

}

/* --- Custom UI Datepicker overrides (moved from inline <style>) --- */
.ui-datepicker .ui-datepicker-header {
    background: #fff !important;
    border: 1px solid #ccc !important;
}
.ui-datepicker .ui-datepicker-title {
    color: #333 !important;
    font-weight: bold;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    color: #333 !important;
}



body, p, h1, h2, img, ul {

	margin: 0;

	padding: 0;

	}

/* font-size:18px;*/	

body {

font-family: "Open Sans";

font-size:16px;

}



.left {float:left;}

.right {float:right;}

.relative {position: relative;}

ul {

	list-style: none;

}

a {

	text-decoration: none;

}

a img {

	border:none!important;

	outline:none!important;}

.cleaner {clear:both;}

.zeroright {margin-right:0px!important;}

/*   ----- HEADER ---- */



.header-top {

    height: 90px;

    opacity: 0.9;

    position: fixed;

    top: 0;

    width: 100%;
    /* smooth resize when sticky */
    transition: height 0.2s ease, background 0.2s ease;

    z-index: 999;

	background: rgb(1, 18, 30);

	background: rgba(1, 18, 30, 0.9);

	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#01121e, endColorstr=#01121e);

	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#01121e, endColorstr=#01121e)";
}

/*

@media only screen 

and (min-device-width : 320px) 
    transition: margin 0.2s ease;

and (max-device-width : 900px) {

.header-top {

    transition: margin 0.2s ease;
	position:relative!important;

	}

}*/

.header-top.is-sticky {
    height: 64px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.header-top.is-sticky .logotip {
    margin-top: 10px;
}
.header-top.is-sticky .logotip img {
    height: 40px;
}
.header-top.is-sticky .nav {
    margin-top: 22px;
}
.header-top.is-sticky .lang-bar {
    margin-top: 28px;
}


.nav-wrap {

    margin: 0 auto;

    width: 960px;

    overflow:auto;

}



.logotip {
    margin-top: 17px;
    overflow: hidden;
    width: 219px;
    transition: margin 0.2s ease;
}

.logotip img {
    height: 56px;
    transition: height 0.2s ease;
}

h1 {

    font-size: 5px;

    overflow: hidden;

    text-indent: 100%;

    white-space: nowrap;

}

.nav {
    margin-left: 30px;
    margin-top: 37px;
    transition: margin 0.2s ease;
}

.nav a {

    color: white;

    font-weight: bold;

}



.nav > li {

    display: inline;

    margin-right: 50px;

}



.nav > li:last-child {

     margin-right: 0px;

}



.lang-bar {
    margin-left: 50px;
    margin-top: 45px;
    transition: margin 0.2s ease;
}

.lang-bar li {

    float: left;

    margin-right: 10px;

}

.lang-bar li:last-child {

    float: left;

    margin-right: 0px;

}

.lang-bar li a {

	display:block;

	height: 13px;

    width: 22px;

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

}

.de {background-position: 69px center;}

.it {background-position: 45px center;}

.en {background-position: 22px center;}



.active-lang {

	opacity: 0.6;

	filter: alpha(opacity=60);

  }





#header {

    background-image: url("../img/header-image.jpg");

    background-size: 100% 100%;

    display: block;

    height: 742px;

    margin-top: -90px;

    width: 100%;

}



.inner {

	position:relative;	 

	width:960px;

	margin:0 auto; 

	height: 742px;  

}





#weather {

    bottom: 0;

    position: absolute;

    right: 30px;

}



#weather span {

    color: white;

    font-size: 26px;

    font-weight: bold;

    left: -20px;

    position: absolute;

    top: 20px;

}



i {

    color: #fff;

    font-family: weather;

    font-size: 220px;

    font-style: normal;

    font-weight: normal;

    line-height: 1;

}



.icon-0:before { content: ":"; }

.icon-1:before { content: "p"; }

.icon-2:before { content: "S"; }

.icon-3:before { content: "Q"; }

.icon-4:before { content: "S"; }

.icon-5:before { content: "W"; }

.icon-6:before { content: "W"; }

.icon-7:before { content: "W"; }

.icon-8:before { content: "W"; }

.icon-9:before { content: "I"; }

.icon-10:before { content: "W"; }

.icon-11:before { content: "I"; }

.icon-12:before { content: "I"; }

.icon-13:before { content: "I"; }

.icon-14:before { content: "I"; }

.icon-15:before { content: "W"; }

.icon-16:before { content: "I"; }

.icon-17:before { content: "W"; }

.icon-18:before { content: "U"; }

.icon-19:before { content: "Z"; }

.icon-20:before { content: "Z"; }

.icon-21:before { content: "Z"; }

.icon-22:before { content: "Z"; }

.icon-23:before { content: "Z"; }

.icon-24:before { content: "E"; }

.icon-25:before { content: "E"; }

.icon-26:before { content: "3"; }

.icon-27:before { content: "a"; }

.icon-28:before { content: "A"; }

.icon-29:before { content: "a"; }

.icon-30:before { content: "A"; }

.icon-31:before { content: "6"; }

.icon-32:before { content: "1"; }

.icon-33:before { content: "6"; }

.icon-34:before { content: "1"; }

.icon-35:before { content: "W"; }

.icon-36:before { content: "1"; }

.icon-37:before { content: "S"; }

.icon-38:before { content: "S"; }

.icon-39:before { content: "S"; }

.icon-40:before { content: "M"; }

.icon-41:before { content: "W"; }

.icon-42:before { content: "I"; }

.icon-43:before { content: "W"; }

.icon-44:before { content: "a"; }

.icon-45:before { content: "S"; }

.icon-46:before { content: "U"; }

.icon-47:before { content: "S"; }





.form-top {

    bottom: -20px;

    position: relative;

    right: 20px;

    top: 310px;

    width: 470px;

}

.form-top .left > li {

    color: white;

    font-style: italic;

    font-weight: 700;

    margin-bottom: 15px;

    margin-top: 10px;

    text-align: right;

}

.icon {

    background-image: url("../img/form-icon.png");

    height: 67px;

    margin-left: 147px;

    margin-top: -53px;

    position: absolute;

    width: 73px;

}

#form1 > p {

    color: #d24552;

    font-size: 25px;

    font-style: italic;

    font-weight: bold;

    padding-bottom: 6px;

    padding-left: 181px;

	 position: absolute;

}

.form-top .right {

    background: rgb(255, 255, 255);

	background: rgba(255, 255, 255, 0.6);

	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#000000, endColorstr=#000000);

	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#000000, endColorstr=#00000)";  

	padding: 5px;

	height: 320px;

	margin-top: 35px

    

}





#form1 .left {

    padding-top: 35px;

    width: 173px;

}

.form-top .right li {

    margin-bottom: 4px;

}

.form-top .right li input{

    width:272px;

    font-size:18px;

    color:#d24552;

    height:30px;

}

.bros {

    overflow: hidden;

    width: 136px;

}

.form-top textarea {

	width:272px;

    font-size:18px;

    color:#d24552;

	font-family: inherit;

	resize:none;

	height:75px;

	}



.button-top {

    background-color: transparent;

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

    background-position: -1px center;

    border: medium none;

    bottom: 10px;

    height: 24px;

    position: absolute;

    right: 20px;

    width: 33px;

    cursor:pointer;

    transition:all .3s;

    -moz-transition:all .3s;

    -webkit-transition:all .3s;

}

.button-top:hover {

	-webkit-animation: efekt 0.7s 100;

    animation: efekt 0.7s 100;

}

@-webkit-keyframes efekt {

    from {right: 20px;}

    to {right: 13px;}

}

@keyframes efekt {

    from {right: 20px;}

    to {right: 13px;}

}



/* ---- O NAMA ---*/

h2, h5, h6 {

    color: #d24552;

    font-size: 40px;

    margin-bottom: 55px;

    margin-top: 54px;

    overflow: hidden;

    text-align: center;

}

h2:before, h5:before, h6:before,

h2:after, h5:after, h6:after {

    background-color: #f5e4c1;

    content: "";

    display: inline-block;

    height: 1px;

    position: relative;

    vertical-align: middle;

    width: 50%;

}

h2:before, h5:before, h6:before {

    right: 0.5em;

    margin-left: -50%;

}

h2:after, h5:after, h6:after {

    left: 0.5em;

    margin-right: -50%;

}



.section.onama > div {

    color: #00060a;

    margin: 0 auto;

    width: 960px;

}

.section.onama span {

	font-weight:700;

	font-style:italic;

	font-size:25px;

}







.slider-wrap {

    float: left;

    height: 350px;

    padding-bottom: 15px;

    padding-right: 15px;

    width: 600px;

}



#slider {

  position: relative;

  overflow: hidden;

}



#slider ul {

  position: relative;

  margin: 0;

  padding: 0;

  list-style: none;

}



#slider ul li {

  position: relative;

  display: block;

  float: left;

  margin: 0;

  padding: 0;

  width: 600px;

  height: 350px;

  text-align: center;

  line-height: 300px;

}



#slider ul li img {

	display:block;

	}



a.control_prev, a.control_next {

  position: absolute;

  top: 40%;

  z-index: 100;

  display: block;

  padding: 4% 3%;

  width: auto;

  height: auto;

  background: #d24552;

  color: #fff;

  text-decoration: none;

  font-weight: 600;

  font-size: 18px;

  opacity: 0.8;

  cursor: pointer;

}



a.control_prev:hover, a.control_next:hover {

  opacity: 1;

    transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;

}



a.control_prev {

  border-radius: 0 2px 2px 0;

}



a.control_next {

  right: 0;

  border-radius: 2px 0 0 2px;

}





/* ---- APARTMANI ---- */





.apartman {

    margin: 0 auto;

    padding-bottom: 115px;

    width: 960px;

}

/*    font-size: 25px;*/

h3 {

    border-bottom: 3px solid #f5e4c1;

    color: #d24552;

    float: left;

    font-size: 23px;

    text-transform: uppercase;

    font-weight:normal;

}

h3 span {

	text-transform:lowercase;

}

.apartman .left {

    padding-right: 20px;

}

.apartman img {display:block;}





.apartman .right > div {

    background-color: #adaeae;

    float: left;

    margin-bottom: 20px;

    margin-right: 20px;

    position: relative;

    transition:all .3s;

    -moz-transition:all .3s;

    -webkit-transition:all .3s;

    cursor:pointer;

}

/*

.apartman .right img {

    opacity: 0.3;

}

*/

.apartman .right > div {

	z-index:1;

	}

.apartman .right > div:hover {

    background: url("../img/zoom.png") no-repeat scroll center center #adaeae;

    float: left;

    margin-bottom: 20px;

    margin-right: 20px;

    position: relative;

	z-index:2;

}



.apartman .right {

    width: 239px;

}



.options {

    clear: both;

    padding-top: 15px;

}

.options > li {

    float: left;

    margin-right: 41px;

}



.options > li div {

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

    background-position: -37px center;

    float: left;

    height: 23px;

    margin-right: 10px;

    width: 30px;

}

.options > li+li div {

	 background-position: -66px center;

}

.options > li+li+li div {

	 background-position: -94px center;

}

.options > li+li+li+li div {

	 background-position: -128px center;

}

.options > li+li+li+li+li div {

	 background-position: -160px center;

}

.options > li+li+li+li+li+li div {

	 background-position: -192px center;

}



.app-info {

    clear: both;

    overflow: auto;

    padding-top: 20px;

    position:relative;

}



.app-info p {

    text-align: justify;

    width: 700px;

    float:left;

    color:#00060a;

}





.ap-link {

    bottom: 5px;

    position: absolute;

    right: 40px;

}



.ap-link > a {

    background-color: #34414b;

    color: white;

    float: left;

    font-size: 16px;

    font-style: italic;

    padding: 5px 10px;

    text-align: center;

    transition:all .3s;

    -moz-transition:all .3s;

    -webkit-transition:all .3s;

    width: 100%;

}



.ap-link > a:hover {

    background-color: #d24552;  

}





/* ---- GDJE SMO -----*/

h6{font-size:30px;}





.infolinks {

    margin: 0 auto 50px;

    padding-left: 260px;

    width: 960px;

}

.infolinks a {

	color:#58585a;

	transition:all .3s;

	-webkit-transition:all .3s;

	-moz-transition:all .3s;

	margin-left: 30px;

	font-size:18px;

	}

.infolinks a:hover {

	color:#d24552;

	}



.infolinks .left li {

    margin-bottom: 13px;

}

.infolinks .left {

    width: 50%;

}



.infolinks li span {

    color: #d24552;

    font-size: 40px;

    margin-top: -8px;

    position: absolute;

}



.subtitle {

	font-size:22px;

	margin-top:-50px!important;

}

.subtitle:after, .subtitle:before {

    background-color: transparent!important;

}



.gmap {

    position: absolute;

    width: 100%;

    z-index: 100;

    background: rgb(173, 174, 174);

	background: rgba(173, 174, 174, 0.3);

	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#01121e, endColorstr=#01121e);

	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#adaeae, endColorstr=#adaeae)";  

}



.gmap h5:after, .gmap h5:before {

    background-color: white!important;

}

#map_canvas {

    background-color: #e5e3df;

    overflow: hidden;

    position: relative;

    width:100%;

    height:555px;

}



#map_canvas div a {display:none!important;}

#section2 {position:relative;}







/* ---- KONTAKT ---- */



#section3 > ul {

    margin: 0 auto;

    width: 960px;

}



#section3 ul li {

    color: #d24552;

    float: left;

    width: 320px;

}





#section3 ul li a {

    color: #d24552;

    margin-top: -17px;

    position: absolute;

}

#section3 ul li a:hover {

	color: black;

}



#section3 ul li div {

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

    background-position: 176px center;

    float: left;

    height: 45px;

    margin-right: 25px;

    width: 45px;

	margin-bottom: 30px;

}



.telefon div {background-position: 113px center!important;}

.email div {background-position: 53px center!important;}



#section4 {

    background-color: #f9edd4;

    clear: both;

    margin-top: 161px;

    overflow: auto;

    padding-bottom: 55px;

    padding-top: 55px;

}



.form-bottom {

    height: 270px;

    margin: 0 auto;

    position: relative;

    width: 960px;

}



.form-bottom textarea {

    height: 75px;

    margin-left: 10px;

    resize: none;

    width: 251px;

    font-size:18px;

    color:#d24552;

	font-family: inherit;

	vertical-align:top;

}

#section4 .left, #section4 .right {

    width: 470px;

    

}



.form-bottom label {

    color: black;

    display: inline-block;

    font-style: italic;

    font-weight: 700;

    text-align: right;

    width: 178px;

}



.form-bottom input, .form-bottom select {

    color: #d24552;

    font-size: 16px;

    height: 30px;

    margin-bottom: 5px;

    margin-left: 10px;

    padding-left: 4px;

    width: 250px;

}



select {

    height: auto !important;

    margin-left: 6px !important;

    padding-bottom: 5px;

    padding-top: 5px;

    width: 257px !important;

	font-family: "Open Sans";

}

.form-bottom input {

    color: #d24552;

    font-size: 16px;

    height: 30px;

    margin-bottom: 5px;

    margin-left: 10px;

    padding-left: 4px;

    width: 250px;

}

.button-bot {

    background-color: transparent;

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

    background-position: -1px center;

    border: medium none;

    cursor: pointer;

    height: 24px !important;

    position: absolute;

    right: -20px;

    bottom: 66px;

    transition: all 0.3s ease 0s;

    -moz-transition: all 0.3s ease 0s;

    -webkit-transition: all 0.3s ease 0s;

    width: 33px !important;

}



.button-bot:hover {

	-webkit-animation: efekt1 0.7s 100;

    animation: efekt1 0.7s 100;

}

@-webkit-keyframes efekt1 {

    from {right: -20px;}

    to {right: -24px;}

}

@keyframes efekt1 {

    from {right: -20px;}

    to {right: -24px;}

}



.ui-datepicker-header {

	background-color:black!important;

	}



#success {

    position: absolute;

    right: 159px;

    top: 50%;

	background-color:white;

	padding:10px;

	border-radius:10px;

	display:none;

}



#success a, #success1 a {

	color:green;}