body, html { margin: 0px; padding:0px; }
img {border:0px; max-width: 100%;}

@font-face {
    font-family: 'Philosopher';
    src: local("Philosopher"), local("Philosopher-Regular"), url("../fonts/Philosopher-Regular.ttf") format("truetype");
    font-weight: 300
}
@font-face {
    font-family: 'PTSerif';
    src: local("PTSerif"), local("PTSerif-Regular"), url("../fonts/PTSerif-Regular.ttf") format("truetype");
    font-weight: 300
}


h1, h2, h3, h4, h5 { font-family: Philosopher, sans-serif; margin: 35px;}
.title {font-size: 20px; font-family: Philosopher}
h2 {text-transform: uppercase; font-size: 20px;}
div, p {font-family: PTSerif, sans-serif; font-size: 14px; color: #282828;}

a {color: #282828;}
a:hover {color: #ffb25f;}

.orangee {background: #ffb25f;}

input {font-family: PTSerif, sans-serif; border: 1px solid #c6c6c6; font-size: 12px; padding: 5px 15px 3px 15px; margin: 5px; border-radius: 5px;}

.header { text-align: center; background: url("../images/header-index-bg-1.jpg") no-repeat; background-size: cover; overflow: auto}
.header.bg1 {text-align: center; background: url("../images/header-index-bg-1.jpg") no-repeat; background-size: cover; overflow: auto}
.header.bg2 {text-align: center; background: url("../images/header-index-bg-2.jpg") no-repeat; background-size: cover; overflow: auto}
.header.bg3 {text-align: center; background: url("../images/header-index-bg-3.jpg") no-repeat; background-size: cover; overflow: auto}
.top-menu-container {background: #fff; text-align: center;}
.top-menu {max-width: 1080px; margin:0 auto; display: table; table-layout: fixed; width: 100%;}
.top-menu a {display: table-cell; text-transform: uppercase; padding: 18px 0px;}
.top-menu a.active {color: #ffb25f;}
.top-title { width: 100%; height: 65px; background: url("../images/top-title-bg.png") no-repeat;  }
.welcome { max-width: 540px; margin:25px auto; padding: 20px; background: rgba(255, 255, 255, 0.8); }
.welcome h1, .pagetitle h1 {font-family: Philosopher, sans-serif;}
.welcome h1 span {color: #ffa039; font-size: 28px;}
.pagetitle {max-width: 540px; margin:55px auto 55px auto; padding: 20px; background: rgba(255, 255, 255, 0.8);}
.pagetitle h1 {text-transform: uppercase;}
.waves {height: 36px; background: url("../images/header-waves.png") repeat-x; background-size: 50% 100%;}
.top-title-container { position: relative; color: #fff; }
.limited {max-width: 1180px; margin: 0px auto;}
.send-request { max-width: 350px; margin: 30px auto 20px auto;}
.send-request a { display: block; background: #ffb25f; border-radius: 5px; color: #fff; padding: 7px; text-align: center;}
.send-request a:hover {opacity: 0.9;}
.send-request input { width: 100%; padding: 9px 0px; color: #fff; background: #ffb25f; font-size: 14px; cursor: pointer; border: 0px;}

.top-title-container {margin: 0px auto;}
.top-address {position: absolute; left: 20px; top: 15px; color: #fff; text-align: left; font-size: 12px;}
.graf-logo {max-width: 200px; color: #fff; margin: 0px auto; padding-top: 10px;}
.graf-logo div {color: #fff; font-size: 12px; margin-top: -8px;}
.top-contacts a { color: #fff;  text-decoration: underline;}
.top-contacts {position: absolute; right: 20px; top: 13px; width: 125px; background: url("../images/phone.png") no-repeat 0px 10px;
background-size: 16px 16px; color:#fff; text-align: right; font-size: 12px;}
.slogan {font-size: 16px; max-width: 350px; margin:0 auto;}

.promos-container {text-align: center; margin-top:25px;}
.promos { display: table; table-layout: fixed; width: 100%; }
.promo {display: table-cell;  width: 16%; padding: 0px 20px;}
.promo h5 { font-size: 17px; margin: 0px; padding: 10px 0px 0px;}
.promo p { font-style: italic; }
.promo img { max-width: 100%; }
.promo-photo {width: 90%;}
h2 img {margin: 0 20px; height: 14px;}

.promo-appartment-block {margin: 20px 20px 0px 20px; text-align: left;}
.promo-appartment {display: inline-block;  width: 27%; border: 1px solid #474747; box-shadow: 0px 0px 20px 3px rgba(0, 0, 0, 0.3); margin: 0 20px 40px 20px;}
.promo-appartment-title strong {font-style: italic; font-size: 15px;}

.promo-appartment-readmore {text-align: left; margin-top: 10px; }
.promo-appartment-readmore a {font-style: italic; text-decoration: underline;}
.promo-appartment-price {display: inline-block; width: 40%; background: #474747; color: #fff; text-align: center; padding: 10px; box-sizing: border-box;}
.promo-appartment-readmore-text {display: inline-block; width: 58%; text-align: center; padding-left: 20px; box-sizing: border-box;}

.home-photogallery { height: 175px; background: url("../images/home-gallery.jpg") repeat-x; background-size: cover; margin: 20px 0 20px 0px;;}

.home-contact-form-container {background: url("../images/home-contact-form-bg.jpg") no-repeat; background-size: cover; text-align: center;}
.home-contact-form-container.bg2{background: url("../images/home-contact-form-bg-2.jpg") no-repeat; background-size: cover; text-align: center;}
.home-contact-form {max-width: 730px; background: rgba(255, 255, 255, 0.8); margin: 0px auto; padding-bottom: 10px;}
.home-contact-form h3 {padding: 20px 0;  text-transform: uppercase; margin: 0px;}
.home-contact-form p {font-style:italic;}
.home-contact-form .send-request {margin: 15px auto;}

.home-about-container { background: #ffb25f; }

.home-about { text-align: center; }
.home-about h2 {color: #fff; margin:0px; padding: 20px 0 20px; }
.about-promo {display: inline-block; width: 48%; vertical-align: top; overflow: hidden;}
.about-promo.right {text-align: left;}
.about-promo p {color: #fff; text-align: left; font-size: 14px;}
.about-promo a {display: block; max-width: 250px; border:1px solid #fff; border-radius: 5px; color: #fff; font-size: 12px; padding: 5px 10px; margin-top: 20px; text-align: center;}
.about-promo-img {max-width: 420px; float: right; margin-right: 20px;}
.about-promo.left { text-align: right; }
.home-about-trees {background: url("../images/home-about-trees.png") no-repeat; background-size: 600px 130px; background-position: 0% 100%; padding-bottom: 40px;}


.home-reviews {text-align: center; padding: 35px 20px 20px;}
.home-reviews-container {background: url("../images/home-reviews-bg.jpg") no-repeat; background-size: 100% 100%;}

.home-review {background: #f1f7fb; padding: 20px; text-align: left; font-size: 12px; margin: 20px;}
.home-review p {font-size: italic;}

.footer-container {margin-top: 20px; border-top: 1px solid #bababa; padding: 20px 0;}
.footer-logo {display: inline-block; text-align: center; width: 200px; font-style: italic;}
.footer-logo div {font-style: italic; font-size: 12px; vertical-align: top;}
.footer div {display: inline-block; vertical-align: top; width: 15%; font-size: 12px;}
.footer-address {text-align: left;}

.footer-social img {width: 30px;}
div.footer-map {width: 37%; text-align: center;}
div.footer-map img {width: 250px;  }
.description p {font-size: 16px;}


.room {padding-top: 20px;}
.room h1 {margin: 0px; padding: 10px 0px 20px; font-size: 20px;}
.room-prices {text-align: center; max-width: 900px; margin:20px auto; text-align: center;}

.blackbg {background: #282828; color:#fff; margin: 0px 5px 5px 5px;}
.greybg {background: #ebebeb; color:#282828; margin: 5px 5px;}

.blackbg_margined {background: #282828; color:#fff; margin: 0px 10px 10px 10px;}
.greybg_margined {background: #ebebeb; color:#282828; margin: 10px 10px;}

.form-error {color: red;}

.contact_input_margin {display: inline-block;margin-right: 15px;}
.contact_input {display: inline-block; }

.reviews_pagination {margin: 0 auto 20px auto; text-align: center;}
.limited_900 {max-width:900px; margin:0px auto;}

.room-photos { display: table-cell; width: 45%; vertical-align: top; padding: 0 10px;}
.room-description { display: table-cell; width: 55%; vertical-align: top; padding: 0 10px;}

.room-gallery {text-align: justify; -ms-text-justify: distribute-all-lines; text-justify: distribute-all-lines; }
.gallery-photo {display: inline-block; width: 30%; max-height: 105px; overflow: hidden; margin-bottom: 20px; vertical-align: top;}
.gallery-photo img { max-width: 100%; }

.center-content {justify-content: center;}


.rw70 {display: inline-block; width: 55%; margin-right: 15px; vertical-align: top;}
.rw30 {display: inline-block; width: 35%; margin-left: 15px; vertical-align: top;}
.lw70 {display: inline-block; width: 55%; margin-left: 15px; vertical-align: top;}
.lw30 {display: inline-block; width: 35%; margin-right: 15px; vertical-align: top;}
.wrow {margin: 15px 0 15px;}
.top-bottom-margin  {margin:20px 0px 20px 0px;}
.li { margin-top: 10px; text-align: center;}

.agreement {
  font-size: 12px;
  width: 60%;
  margin: 0px auto;
  margin-top: 10px;
  color: #474747;
}

@media (max-width: 1200px) {
  .limited { margin: 0px 20px; }
  .promos-container {margin-top:20px;}
}

@media (max-width: 940px) {
  .limited_900 { margin: 0px 20px; }
    .promo-appartment { width: 30%; margin: 0 5px 30px 5px; }
  .promos-container.limited {margin: 20px 0 0 0;}
}


@media (max-width: 760px) {
  .top-menu a {display: inline-block; width: 21%; margin: 0px 20px; padding: 7px;}
  .promo {display: inline-block; width: 27%; vertical-align: top; margin-bottom: 20px;}
  .promo-appartment { width: 47%; margin: 0 5px 30px 5px; }
  h1, h2, h3, h4, h5 { font-family: Philosopher, sans-serif; margin: 30px 0px;}
  div.footer-map {display: none;}
  .footer div {width: 24%; text-align: center;}
  .pagetitle { margin: 0px; max-width: 100%; }
  .rw70, .rw30, .lw70, .lw30 { width: 100%; margin: 5px 0px; }
  .about-promo-img {display: none;}
  .about-promo.left {display: none;}
  .about-promo.right {width: 100%; margin-bottom: 80px;}
}

@media (max-width: 510px) {
  .top-menu a {width: 24%; }
  .promo {display: inline-block; width: 33%; vertical-align: top; margin-bottom: 20px;}
  .promo-appartment { width: auto; margin: 0px 10px 30px 10px; }
  h2 img {display: none;}
  .home-reviews {padding:0px;}
  .home-review {margin:20px 0px;}
  .contact_input_margin {display: block; margin: 0px;}
  .contact_input {display: block; }
  .footer div {width: 45%; margin-bottom:20px;}
  .send-request {max-width: 250px;}
  .room-photos, .room-description {display: block; width: 100%;}
  .blackbg_margined { margin: 0px 5px 5px 5px;}
  .greybg_margined {margin: 5px 5px;}
  .blackbg { margin: 0px;}
  .greybg {margin: 0px;}
}

@media (max-width: 480px) {
  .promo {width: 47%; padding: 0px 10px;}
  .top-menu a {width: 40%; margin: 0px 10px;}
  .top-address {display: none;}
  .graf-logo { position: absolute; left: 0px; top:0px;}
  .top-contacts {right: 10px;}
}