@import url(https://fonts.googleapis.com/css?family=Lobster&subset=cyrillic,latin);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700&subset=latin,cyrillic-ext);
.hide {
  visibility: hidden !important; }

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

* {
  box-sizing: border-box;
  color: #142525; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

.clearfix {
  clear: both;
  display: block; }

.clearfix:before,
.container:before {
  content: "";
  display: table;
  clear: both; }

.clearfix:after,
.container:after {
  clear: both;
  display: table;
  content: ""; }

.container {
  display: block;
  width: 1030px;
  padding-left: 20px;
  padding-right: 20px;
  margin-left: auto;
  margin-right: auto; }

.spa1, .spa2, .spa3, .spa4, .spa4a, .spa5 {float:left; min-height: 1px; padding: 20px 0; position: relative;}
.spa1 {width:100%;}
.spa2 {width:50%;}
.spa3 {width:33%;}
.spa4 {width:25%;}
.spa4a {width:75%;}
.spa5 {width:20%;}

.left {float:left;}
.right {float:right;}

header,
section,
footer {
  width: 100%;
  min-width: 1030px;
  overflow: hidden; }

header:before,
section:before,
footer:before {
  content: "";
  display: table;
  clear: both; }

header:after,
section:after,
footer:after {
  clear: both;
  display: table;
  content: ""; }

a {color:#6b7f32; text-decoration: none;}
a:hover, a:focus {color:#88002e; text-decoration: none;}

.btn {
  border: none;
  border-radius: 5px;
  font: 17px "Open Sans", sans-serif;
  color: #fff;
  border: none;
  line-height: 0;
  cursor: pointer; }

.btn.green {
  background: #a8c409;
  background-image: -webkit-linear-gradient(top, #a8c409, #6b8b08);
  background-image: -moz-linear-gradient(top, #a8c409, #6b8b08);
  background-image: -ms-linear-gradient(top, #a8c409, #6b8b08);
  background-image: -o-linear-gradient(top, #a8c409, #6b8b08);
  background-image: linear-gradient(to bottom, #a8c409, #6b8b08); }

.btn.green:hover {
  background: #95af03; }

.btn.green:active {
  background: #a8c409;
  background-image: -webkit-linear-gradient(bottom, #a8c409, #6b8b08);
  background-image: -moz-linear-gradient(bottom, #a8c409, #6b8b08);
  background-image: -ms-linear-gradient(bottom, #a8c409, #6b8b08);
  background-image: -o-linear-gradient(bottom, #a8c409, #6b8b08);
  background-image: linear-gradient(to top, #a8c409, #6b8b08); }

.btn.red {
  background: #f84f8c;
  background-image: -webkit-linear-gradient(top, #f84f8c, #821239);
  background-image: -moz-linear-gradient(top, #f84f8c, #821239);
  background-image: -ms-linear-gradient(top, #f84f8c, #821239);
  background-image: -o-linear-gradient(top, #f84f8c, #821239);
  background-image: linear-gradient(to bottom, #f84f8c, #821239); }

.btn.red:hover {
  background: #f03c7d; }

.btn.red:active {
  background: #f84f8c;
  background-image: -webkit-linear-gradient(bottom, #f84f8c, #821239);
  background-image: -moz-linear-gradient(bottom, #f84f8c, #821239);
  background-image: -ms-linear-gradient(bottom, #f84f8c, #821239);
  background-image: -o-linear-gradient(bottom, #f84f8c, #821239);
  background-image: linear-gradient(to top, #f84f8c, #821239); }

.btn.grey {
  background: #a8c409;
  background-image: -webkit-linear-gradient(top, #b2b3b3, #7d7d7d);
  background-image: -moz-linear-gradient(top, #b2b3b3, #7d7d7d);
  background-image: -ms-linear-gradient(top, #b2b3b3, #7d7d7d);
  background-image: -o-linear-gradient(top, #b2b3b3, #7d7d7d);
  background-image: linear-gradient(to bottom, #b2b3b3, #7d7d7d); }

.btn.grey:hover {
  background: #a2a5a5; }

.btn.grey:active {
  background: #b2b3b3;
  background-image: -webkit-linear-gradient(top, #7d7d7d, #b2b3b3);
  background-image: -moz-linear-gradient(top, #7d7d7d, #b2b3b3);
  background-image: -ms-linear-gradient(top, #7d7d7d, #b2b3b3);
  background-image: -o-linear-gradient(top, #7d7d7d, #b2b3b3);
  background-image: linear-gradient(to bottom, #7d7d7d, #b2b3b3); }

#main-screen {
  background: url("../img/main-bg.jpg") no-repeat center;
  background-size: cover; }

header,
footer {
  height: auto;
  background: #fff; }
  header .left, footer .left {margin-top: 0px; padding: 10px 0;}
    header .left img,
    footer .left img {
      margin-right: 10px;
      vertical-align: middle; }
    header .left span,
    footer .left span {
      display: inline-block;
      font: 17px "Open Sans", sans-serif;
      line-height: 20px;
      margin-top: 5px;
      vertical-align: middle; }
  header .right, footer .right {text-align: right;}
    header .right button,
    footer .right button {
      width: 190px;
      height: 36px; }
    header .right span,
    footer .right span {
      font: 19px "Open Sans", sans-serif;
      line-height: 29px;
      vertical-align: middle; }
    header .right img,
    footer .right img {
      margin-right: 6px;
      vertical-align: middle; }

.main-title {
  background: rgba(255, 255, 255, 0.8);
  padding: 15px 0 20px;
  text-align: center; }
.main-title h1 {color: #142525; font: 44px "Lobster", cursive;}

.f27 {
  font-size: 27px; }

.f19 {
  font-size: 19px; }

.red-font {
  color: #7e0c34; }

.under {
  text-decoration: underline; }

.main-form.wrapper {
  border-radius: 50%;
  border: 2px solid #e85f8f;
  width: 465px;
  height: 465px;
  float: right;
  margin-top: 12px;
  margin-bottom: 12px;
  margin-right: 16px;
  background: rgba(255, 255, 255, 0.8); }
  .main-form.wrapper .title {
    font: 25px "Open Sans", sans-serif;
    font-weight: bold;
    text-align: center;
    margin-top: 70px;
    margin-bottom: 20px;
    line-height: 31px; }
  .main-form.wrapper input,
  .main-form.wrapper button {
    width: 230px;
    height: 40px;
    display: block;
    margin: 10px auto; }
  .main-form.wrapper button {
    font-size: 20px;
    font-weight: bold;
    margin-top: 14px; }
  .main-form.wrapper input {
    padding-left: 15px;
    font: 20px "Open Sans", sans-serif; }
  .main-form.wrapper .timer-title {
    font: 15px "Open Sans", sans-serif;
    text-align: center; }

.section-title {
  font: 32px "Lobster", cursive;
  line-height: 68px;
  text-align: center;
  width: 100%;
  min-width: 990px;
  height: 68px;
  color: #fff; }

.section-title:before {
  content: "";
  display: inline-block;
  width: 131px;
  height: 24px;
  background: url("../img/title-left.png") no-repeat center;
  margin-right: 15px; }

.section-title:after {
  content: "";
  display: inline-block;
  width: 131px;
  height: 24px;
  background: url("../img/title-right.png") no-repeat center;
  margin-left: 15px; }

.section-title.red {
  background: url("../img/title-bg-red.jpg") no-repeat center;
  background-size: cover; }

.section-title.green {
  background: url("../img/title-bg-green.png") no-repeat center;
  background-size: cover; }

.timer {
  width: 150px;
  height: 50px;
  display: block;
  margin: 3px auto; }
  .timer #timer-number-1-hours,
  .timer #timer-number-1-minutes,
  .timer #timer-number-1-secundes {
    font-weight: bold; }

.phone, .call-us-btn-show {display: inline-block; vertical-align: middle;}
.phone {margin-right:20px;}

#why {
  background: url("../img/flowers-bg.jpg") no-repeat center;
  background-size: cover; /*height: 486px;*/ padding-bottom: 30px; }
  #why .section-title {margin-bottom: 15px;}

  #why ul li {display: block;}
  .why-img {height:95px; margin: 20px auto 10px auto;}
    #why ul li img {display: block; margin: 0 auto;}
    #why ul li .title {
      font: 19px "Open Sans", sans-serif;
      color: black;
      text-align: center;
      font-weight: bold;
      line-height: 29px; }
    #why ul li .descr {
      font: 16px "Open Sans", sans-serif;
      color: black;
      text-align: center;
      line-height: 29px; }

#clients {
  height: 480px; }

#bouquets {
  height: auto; }

#bouquets {
  background: #fff; }
  #bouquets .section-title {
    margin-bottom: 50px; }
  #bouquets ul li {
    float: left;
    width: 270px;
    margin-bottom: 33px; 
    height: 400px;
    position: relative; }

#bouquets ul li .price-a {font-weight: bold;}
    #bouquets ul li img {
      display: block;
      margin: 10px auto; height:270px; width:270px; }
    #bouquets ul li .btn {
      height: 36px;
      width: 100%; }
    #bouquets ul li .btn.red {
      margin: 10px auto; bottom: 0; position: absolute; }
  #bouquets ul li:nth-child(3n+2) {
    margin: 0 90px; }

#special {
  height: 535px;
  background: url("../img/special-bg.jpg") no-repeat center;
  background-size: cover; }
  #special .item-wrapper {
    width: 410px;
    height: 410px;
    border-radius: 50%;
    border: 2px solid #8fa420;
    background: rgba(255, 255, 255, 0.8);
    float: right;
    margin: 27px 41px 0 0; }
    #special .item-wrapper .title {
      line-height: 33px;
      text-transform: uppercase;
      margin-top: 75px;
      font: 25px "Open Sans", sans-serif;
      font-weight: bold;
      text-align: center; }
    #special .item-wrapper input,
    #special .item-wrapper button {
      width: 230px;
      height: 40px;
      display: block;
      margin: 10px auto; }
    #special .item-wrapper button {
      font-size: 17px;
      font-weight: bold; }
    #special .item-wrapper input {
      padding-left: 15px;
      font: 20px "Open Sans", sans-serif; }

#akcia {background-color: #fbfee9;} /*#f4e8ec*/
#akcia .ak-box {
  border: 3px solid #8a002f;
  border-radius: 20px;
  margin: 60px auto;
  padding: 20px;
  position: relative;
}
 #akcia .ak-title {
  background-color: #fbfee9; 
  color:#8a002f; 
  font: 40px "Open Sans", sans-serif;
  font-weight: 600; 
  padding:5px 20px;
  position: absolute;
  left: 50px;
  top: -35px;
  text-align:left; }

 #akcia img {width:100%;}

 #akcia .title {font: 32px "Lobster", cursive; text-align:center;}
    #akcia input,
    #akcia button {
      width: 230px;
      height: 40px;
      display: block;
      margin: 10px auto; }
    #akcia button {
      font-size: 17px;
      font-weight: bold; }
    #akcia input {
      padding-left: 15px;
      font: 20px "Open Sans", sans-serif; }

#steps {
  background: url("../img/flowers-bg.jpg") no-repeat center;
  background-size: cover;
  padding-bottom: 30px; }
  #steps .title {
    font: 22px "Open Sans", sans-serif;
    font-weight: bold;
    line-height: 29px;
    text-align: center;
    margin: 20px 0 10px 0;
    color: black; }
  #steps ul {margin: 0 auto; text-align:center; }
    #steps ul li {}
      #steps ul li img {margin: 0 auto 10px;}
      #steps ul li p {
        font: 18px "Open Sans", sans-serif;
        color: black;
        line-height: 22px;
        font-weight: bold;
        text-align: center; }

#reviews {
  height: auto; } /*500px*/
  #reviews .section-title {
    margin-bottom: 35px; }
  #reviews ul {
    display: block; }
    #reviews ul li {
      float: left;
      width: 495px;
      height: 160px;
      margin-bottom: 35px; }
      #reviews ul li img {
        float: left; }
        #reviews ul li a {font-size:14px;}
      #reviews ul li .name {
        font: 19px "Open Sans", sans-serif;
        font-weight: bold;
        color: black;
        display: block;
        line-height: 22px;
        }
      #reviews ul li .name:after {
        content: "";
        display: block;
        width: 270px;
        height: 1px;
        background: #000;
        margin: 2px 0 0 0; }
      #reviews ul li .text {
        display: block;
        font: 16px "Open Sans", sans-serif;
        line-height: 18px;
        margin-left: 180px; }
#reviews ul li#vk-btn {
float:none;
margin: 0px auto;
text-align:center; 
width:100%; 
}
#reviews ul li#vk-btn a {color:#27578c; font: 26px "Open Sans", sans-serif; font-weight: bold;}
#reviews ul li#vk-btn a:hover, #reviews ul li#vk-btn a:focus {color:#5585b9;}
#reviews ul li#vk-btn img {float:none;}
#reviews ul li#vk-btn a:hover img {opacity: 0.85;}


#self {
  position: relative;
  height: 545px; }
  #self .section-title {
    position: relative;
    z-index: 1; }
  #self .container > .title {
    height: 60px;
    width: 100%;
    background: rgba(255, 255, 255, 0.8);
    font: 25px "Open Sans", sans-serif;
    line-height: 60px;
    text-align: center;
    position: relative;
    z-index: 1; }
  #self #map {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0; }
  #self .item-wrapper {
    position: relative;
    z-index: 1;
    border-radius: 50%;
    border: 2px solid #ab2d44;
    width: 390px;
    height: 390px;
    margin: 15px 0 0 45px;
    background: rgba(255, 255, 255, 0.8); }
    #self .item-wrapper > .title {
      line-height: 29px;
      font: 22px "Open Sans", sans-serif;
      font-weight: bold;
      text-align: center;
      color: black;
      margin-top: 85px; }
    #self .item-wrapper input,
    #self .item-wrapper button {
      width: 230px;
      height: 40px;
      display: block;
      margin: 13px auto; }
    #self .item-wrapper button {
      font-size: 17px;
      font-weight: bold; }
    #self .item-wrapper input {
      padding-left: 15px;
      font: 20px "Open Sans", sans-serif; }

.modal-wrapper {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: none;
  z-index: 100; }
  .modal-wrapper .modal-fade {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.3);
    cursor: pointer;
    z-index: 100; }

.modal-body {
  border: 5px solid #ac0c40;
  background: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 101;
  cursor: default; }
  .modal-body.call-us {
    width: 396px;
    height: 290px;
    margin: -145px 0 0 -188px; }
    .modal-body.call-us .title {
      font: 19px "Open Sans", sans-serif;
      font-weight: bold;
      color: #ac0c40;
      text-align: center;
      margin-top: 35px;
      display: block; }
    .modal-body.call-us input,
    .modal-body.call-us button {
      width: 230px;
      height: 40px;
      display: block;
      margin: 20px auto; }
    .modal-body.call-us button {
      font-size: 17px;
      font-weight: bold; }
    .modal-body.call-us input {
      padding-left: 15px;
      font: 20px "Open Sans", sans-serif; }
  .modal-body .close-modal-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    display: block;
    width: 20px;
    height: 20px;
    background: url("../img/close.png") no-repeat center;
    cursor: pointer; }
  .modal-body.more {
    width: 560px;
    min-height: 310px;
    margin-left: -280px;
    margin-top: -155px; }
    .modal-body.more img {
      float: left;
      margin: 5px 0 0 5px; }
    .modal-body.more span {
      display: block;
      margin-left: 300px; }
    .modal-body.more .name {
      font: 19px "Open Sans", sans-serif;
      color: black;
      font-weight: bold;
      margin-top: 30px; }
    .modal-body.more .price {
      margin-top: 20px;
      font: 19px "Open Sans", sans-serif;
      font-weight: bold;
      color: #ac0c40; }
    .modal-body.more .descr {
      font: 17px "Open Sans", sans-serif;
      margin-top: 20px; }
    .modal-body.more .btn {
      position: absolute;
      bottom: 15px;
      right: 15px;
      width: 120px;
      height: 36px; }

.dg-container {
  margin-top: 70px;
  width: 100%;
  height: 342px;
  position: relative; }
#dg-container2 {display: none;}

.dg-wrapper {
  width: 481px;
  height: 316px;
  margin: 0 auto;
  position: relative;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  -o-perspective: 1000px;
  -ms-perspective: 1000px;
  perspective: 1000px; }

.dg-wrapper a {
  width: 482px;
  height: 270px;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  background: #fff;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3);
  border: 1px solid #ccc; }

.dg-wrapper a.dg-transition {
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out; }

.dg-wrapper a img {
  display: block;
  padding: 10px;
  width: 100%;
  height: 100%; }

.dg-wrapper a div {
  font-style: italic;
  text-align: center;
  line-height: 50px;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);
  color: #333;
  font-size: 16px;
  width: 100%;
  bottom: -55px;
  display: none;
  position: absolute; }

.dg-wrapper a.dg-center div {
  display: block; }

.dg-container nav {
  width: 528px;
  height: 42px;
  position: absolute;
  z-index: 1000;
  bottom: 180px;
  left: 50%;
  margin-left: -264px; }

.dg-container nav span {
  text-indent: -9000px;
  float: left;
  width: 24px;
  height: 42px;
  opacity: 0.8;
  background: transparent url(../img/arrows.png) no-repeat top left;
  cursor: pointer; }

.dg-container nav span:hover {
  opacity: 1; }

.dg-container nav span.dg-next {
  background-position: top right;
  margin-left: 504px;
  margin-top: -42px; }

footer .spa1 {text-align: center; border-top:1px solid #ccc;}
footer .spa1.mydate {border:none; height: 1px; margin:0; padding:0;}
footer .spa1.mydate a {font-size:1px; color:transparent;}

/* ===== MEDIA ===== */

@media (min-width:768px) and (max-width:979px) {
.container {width: 100%;}
header, section, footer {min-width:100%;}

#why, #bouquets, #clients, .dg-container, .dg-container2, #steps, #reviews, .section-title, #special, #self, #self .container > .title {height: auto;}
#bouquets, #special, #self {padding-bottom: 30px;}
#bouquets ul li:nth-child(3n+2) {margin: 0;}
#bouquets ul li {margin: auto 10px;}

}

@media (min-width:481px) and (max-width:767px) {
.container {width: 100%;}
.container.main-box {padding:0;}
header, section, footer {min-width:100%;}
.spa2 {clear:both; float:mone; padding: 20px 0 0; margin:0 auto; width:100%;}
.main-title h1 {font-size:34px;}
.phone {margin-right:0;}

#why, #bouquets, #clients, .dg-container, .dg-container2, #steps, #reviews, .section-title, #special, #self, #self .container > .title {height: auto;}
.main-form.wrapper, #special .item-wrapper, #self .item-wrapper {float: none; margin:12px auto;}

.section-title {line-height:1; min-width: 100%; padding: 10px;}
.section-title::before, .section-title::after {display:none;}
#why ul li img {max-height: 62px;}
#why ul li .title, #why ul li .descr {font-size:16px; line-height: 20px;}
.why-img {height: 75px;}

.dg-container {margin-bottom: 30px;}
.dg-container nav {bottom: -10px; left: 40%; margin: 0 auto; width: 100px;}
.dg-container nav span.dg-next {margin-left: 20px; margin-top: 0;}
#bouquets ul li {float:none; margin: 0 auto 35px;}
#bouquets ul li:nth-child(3n+2) {margin: 0 auto;}
#steps ul li img {max-width: 100px;}
#steps ul li p {font-size:16px; line-height: 20px;}
#reviews ul li {width: 100%;}
}

@media (max-width:480px) {
.container {width: 100%;}
.spa1, .spa2, .spa3, .spa4, .spa4a, .spa5 {clear:both; float:mone; padding: 20px 0 0; margin:0 auto; width:100%;}
.left {float:none;}
.right {float:none;}
.timer {width:auto;}
#why, #bouquets, #clients, .dg-container, .dg-container2, #steps, #reviews, .section-title, #special, #self, #self .container > .title {height: auto;}

header, section, footer {min-width:100%; padding-bottom: 20px;}
header .left, footer .left, header .right, footer .right {text-align: center;}

.phone {margin-right:0;}

.section-title {line-height:1; min-width: 100%; padding: 10px;}
.section-title::before, .section-title::after {display:none;}

.main-title h1 {font-size:30px;}

.main-form.wrapper, #special .item-wrapper, #self .item-wrapper {
border-radius:30px;
  width: 100%;
  height: auto;
  float: none;
  margin:12px auto;
  padding-bottom:15px;
}
  .main-form.wrapper .title, #special .item-wrapper .title {
  font-size:20px;
  margin-bottom: 10px;
  margin-top: 15px;
  padding:5px;
}
.main-form.wrapper input, .main-form.wrapper button, #special .item-wrapper input, #special .item-wrapper button, #akcia input, #akcia button, #self .item-wrapper input, #self .item-wrapper button {width:90%;}

.f27 {font-size: 23px;}
.f19 {font-size: 16px;}

#self .container > .title {font-size:20px; line-height: 36px; padding: 10px 0;}
#self .item-wrapper > .title {margin-top: 20px;}

#why ul {margin:0 auto;}
#why ul li:nth-child(1), #why ul li:nth-child(2), #why ul li:nth-child(3), #why ul li:nth-child(4), #why ul li:nth-child(5) {margin-left: 0; width: 100%;}

#dg-container {display: none;}
#dg-container2 {display: block; margin:12px auto;}
.dg-wrapper2 {height: auto; width: 100%;}
.dg-wrapper2 a {}
.dg-wrapper2 img {
background: #fff;
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3);
border: 1px solid #ccc;
margin-top:5px;
padding:5px;
height: auto; 
width: 100%;
}
#akcia .ak-title {left: 30px;}

#steps ul {margin:12px auto;}
#steps ul li:nth-child(1), #steps ul li:nth-child(2), #steps ul li:nth-child(3), #steps ul li:nth-child(4) {margin: 0 auto 20px; width: 100%;}
#steps ul li {float: none; height: auto;}
#steps ul li img {float: none; max-height: 120px;}
#steps ul li p {float: none; margin: 10px auto; position: relative;}
#steps ul li:nth-child(2) p, #steps ul li:nth-child(4) p {bottom: 0px;}

#reviews ul li {height: auto; width: 100%;}
#reviews ul li img {width:50px;}
#reviews ul li .text {font-size:14px; margin-left:60px;}
#reviews ul li#vk-btn {margin: 0px auto 35px;}
#reviews ul li#vk-btn img {width: 100%;}

#bouquets ul li:nth-child(3n+2) {margin: 0 auto;}

}