.pulse {
  display: block;
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ca1d61;
  cursor: pointer;
  transform: translateX(-11px) translateY(-11px);
  box-shadow: 0 0 0 rgba(167, 18, 77, 0.4);
  animation: hotspot-pulse 1.5s infinite;
}
.pulse:hover {
  animation: none;
}

#hotspot-block .pulse.highlight {
  background: #1b90c8;
  box-shadow: 0 0 0 rgba(27, 144, 200, 0.4);
  animation: hotspot-pulse-highlight 1.5s infinite;
}


@-webkit-keyframes hotspot-pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(167, 18, 77, 0.7);
  }
  70% {
      -webkit-box-shadow: 0 0 0 10px rgba(167, 18, 77, 0.3);
  }
  100% {
      -webkit-box-shadow: 0 0 0 0 rgba(167, 18, 77, 0);
  }
}
@keyframes hotspot-pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(167, 18, 77, 0.7);
    box-shadow: 0 0 0 0 rgba(167, 18, 77, 0.5);
  }
  70% {
      -moz-box-shadow: 0 0 0 10px rgba(167, 18, 77, 0.3);
      box-shadow: 0 0 0 10px rgba(167, 18, 77, 0);
  }
  100% {
      -moz-box-shadow: 0 0 0 0 rgba(167, 18, 77, 0);
      box-shadow: 0 0 0 0 rgba(167, 18, 77, 0);
  }
}

@-webkit-keyframes hotspot-pulse-highlight {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(27, 144, 200, 0.7);
  }
  70% {
    -webkit-box-shadow: 0 0 0 10px rgba(27, 144, 200, 0.3);
  }
  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(27, 144, 200, 0);
  }
}

@keyframes hotspot-pulse-highlight {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(27, 144, 200, 0.7);
    box-shadow: 0 0 0 0 rgba(27, 144, 200, 0.5);
  }
  70% {
    -moz-box-shadow: 0 0 0 10px rgba(27, 144, 200, 0.3);
    box-shadow: 0 0 0 10px rgba(27, 144, 200, 0);
  }
  100% {
    -moz-box-shadow: 0 0 0 0 rgba(27, 144, 200, 0);
    box-shadow: 0 0 0 0 rgba(27, 144, 200, 0);
  }
}

/* tooltip - https://codepen.io/sashatran/pen/KaYYBz */
.tooltip {
  position: absolute;
  display: none;
}

.tooltip .tip {
  position: relative;
  /*background: #ca1d61;
  padding: 5px 12px;
  margin: 5px;
  left: -11px;
  top: -10px;*/
  font-size: 15px;
  border-radius: 100%;
  color: #FFF;
}

.tooltip .tip, .tooltip:before {
  position: absolute;
  content: '';
  /*opacity: 0;*/
  transition: all 0.4s ease;
}

.tooltip:before {
  border-width: 11px 8px 0 11px;
  border-style: solid;
  border-color: #c11d61 transparent transparent transparent;
  bottom: 25px;
  transform: translateY(20px);
}

.tooltip .tip {
  background: #ca1d61;
  width: 160px;
  min-height: 40px;
  font-size: 13px;
  font-weight: 300;
  bottom: 35px;
  left: -10px;
  padding: 10px;
  border-radius: 3px;
  letter-spacing: 1px;
  transform: translateY(20px);
}

@keyframes hotspot-shake {
  0% { 
    transform: rotate(2deg);
  }
  50% {
   transform: rotate(-3deg);
  }
  70% {
    transform: rotate(3deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

.tooltip:hover {
  animation: hotspot-shake 500ms ease-in-out forwards;
}

/* Hotspot */
.hotspot { position: absolute; z-index: 10; }
.hotspot-visible { display: block; }
.hotspot-image { position: relative; }
.hotspot-image > img { width: 100%; }
.hotspot i.fa-plus { position: absolute; display: flex; align-content: center; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); color: #fff; transition: 0.5s transform; font-size: 17px; font-weight: 100; }
.hotspot:hover i.fa-plus { transform: translateX(-50%) translateY(-50%) rotate(90deg); }


#simple-search { position: relative; width: 880px; height: 50px; margin: 0 auto 10px auto; z-index: 1022; }
.without-header.toolbar #top-search { margin-top: 5px; margin-bottom: 5px; }

#top-search { width: 880px; margin: auto; }
#top-search input { float: left; width: 212px; height: 33px; padding: 7px 10px; border: 0 none; border-radius: 3px; font-size: 1.4em; font-style: italic; box-sizing: initial; }
#top-search input[type="checkbox"] { width: 25px; height: 25px; margin: 0 0 7px 0; box-sizing: border-box; }
#top-search button { float: left; width: 47px; height: 47px; border: 0 none; background: #ca1d61; color: #fff; overflow: visible; cursor: pointer; font-size: 26px; }
#top-search button:hover { background-color: #f24889; }
#top-search > div > div { font-family: 'Open Sans', Arial, sans-serif; color: #333333; padding: 3px 3px 3px 0; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; }
#top-search > div > .symbol { width: 30px; height: 26px; border-right: 1px solid #ccc; margin: 7px 0; float: left; }
#top-search > div > .value { height: auto; padding-top: 15px; float: left; text-align: center; }
#top-search .area-selection, #top-search .rooms-selection, #top-search .storey-selection, #top-search .advanced-search { float: left; height: 47px; background: #fff; margin: 0 0 0 6px; border-radius: 3px; cursor: pointer; position: relative; }
#top-search .area-selection .symbol p { text-align: center; font-weight: bold; font-size: 14px; line-height: 1; margin: 6px 0 8px 0; }
#top-search .area-selection input[type="number"] { float: none; position: absolute; top: 164px; width: 60px; right: 100px; height: auto; font-size: 1.2em; text-align: center; font-style: normal; padding: 4px 5px; border: 1px solid #ccc; }
#top-search .rooms-selection .symbol { width: 20px; padding: 7px 10px 0 7px; }
#top-search .rooms-selection .symbol div { float: right; width: 5px; height: 5px; background: #000; margin: 2px; }
#top-search .x { position: absolute; right: 1px; top: 0; cursor: pointer; font-size: 18px; color: #b0b0b0; }
#top-search .x:hover { background: #eee; }
#top-search .drop-down .x { display: none; right: 12px; top: 10px; }
#top-search .value > span { color: #CC0066; font-size: 16px; }
#top-search .storey-selection .symbol { padding-top: 8px; padding-bottom: 0; }
#top-search .area-selection .value, #top-search .rooms-selection .value, #top-search .storey-selection .value { width: 120px; }
#top-search .storey-selection .symbol div { width: 15px; height: 4px; background: #000; margin: 3px auto; }
#top-search .advanced-search .symbol { border: 0; padding: 3px 2px 3px 6px; width: 38px; }
#top-search .advanced-search .symbol { width: 92px; height: 47px; padding: 0; margin: 0; text-align: center; line-height: 15px; }
#top-search .advanced-search .value { display: none; position: absolute; left: 19px; top: 19px; font-size: 10px; color: #fff; }
#top-search .advanced-search { margin-right: 6px; }

#top-search .advanced-search a { display: block; text-decoration: none; text-transform: uppercase; color: #000; font-family: 'Open Sans', Arial, sans-serif; font-size: 10px; padding: 10px 0 6px 0; }
#top-search .advanced-search a:hover { color: #CC0066; }
#top-search .drop-down { display: none; position: absolute; top: 52px; left: 0; width: 170px; height: 170px; background: #fff; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; padding: 17px; cursor: default; }
.without-header #top-search .drop-down { box-shadow: 8px 8px 8px #666; }
div.selected-item { background-color: #CC0066; color: #fff; }
#top-search .rooms-selection .drop-down div { float: left; text-align: center; }
#top-search .rooms-selection .drop-down  > div > div { width: 46px; height: 32px; border: 1px solid #ccc; margin: 3px; cursor: pointer; font-size: 24px; padding-top: 12px; }
#top-search .rooms-selection .drop-down  > div > div:nth-of-type(1) { display: none; }
#top-search .rooms-selection .drop-down  > div > div:nth-of-type(2) { width: 100px; }
#top-search .rooms-selection .drop-down  > div > div.hoverable:hover, #top-search .rooms-selection .drop-down > div:nth-of-type(2).hoverable:hover { background: #CC0066; color: #fff; }
#top-search .rooms-selection .drop-down > div:nth-of-type(1) { border: 3px solid #000; }
#top-search .rooms-selection .drop-down > div:nth-of-type(2) { width: 44px; height: 32px; border: 3px solid #000; margin: 4px 0; font-size: 24px; padding-top: 12px; cursor: pointer; }
#top-search div .ok {
  position: absolute;
  bottom: 10px;
  right: 10px;
  height: 18px;
  padding: 5px 20px;
  background: #ca1d61;
  border: 0;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
}
#top-search div .ok:hover { background: #F24889; }
#top-search .storey-selection .drop-down { padding: 0 5px 34px 34px; }
#top-search .storey-selection .drop-down { list-style: none; }
#top-search .storey-selection .drop-down span { font-size: 10px; color: #000; }
#top-search .storey-selection .drop-down > div span { color: inherit; }
#top-search .storey-selection .drop-down ul { list-style: none; }
#top-search .storey-selection li { clear: both; width: 137px; text-align: left; }
#top-search .storey-selection li:nth-of-type(4) { border-top: 1px solid #ccc; padding-top: 4px; }
#top-search .storey-selection li:nth-of-type(n+4) { position: relative; top: 4px; }
#top-search .storey-selection label { text-transform: uppercase; position: relative; top: 7px; left: 4px; }
#top-search .area-selection .resizer-container { position: relative; border: 1px solid #999; width: 170px; height: 113px; }
#top-search .area-selection .resizer-container > div { width: 107px; height: 70px; background: #CC0066; border: 3px solid #000; color: #fff; line-height: 1; }
#top-search .area-selection .resizer-container .ui-resizable-se {
  width: 20px;
  height: 20px;
  right: 0;
  bottom: 0;
  background-color: #fff;
}
#top-search .area-selection .drop-down > p { position: absolute; line-height: 1; }
#top-search .area-selection .drop-down p:nth-of-type(1) { left: 17px; top: 0; }
#top-search .area-selection .drop-down p:nth-of-type(2) { right: 10px; top: 140px; }

#top-search .area-selection .drop-down .area-value {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
}

#top-search .area-selection .drop-down .area-value svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}
#top-search .area-selection .drop-down .area-value svg text {
  font-size: 22px;
  fill: #fff;
}
#top-search.zindex { z-index: 1020; }

@media screen and (max-width: 1024px) {
  #simple-search { width: 100%; height: 70px; }
  .without-header.without-input #top-search { width: 420px; margin-left: -210px; }
  #top-search { width: 650px; margin: auto; }
  #top-search .area-selection, #top-search .rooms-selection, #top-search .storey-selection, #top-search .advanced-search { margin-left: 3px; }
  #top-search button { width: 70px; height: 70px; }
  #top-search input[type="text"] { height: 56px; }
  #simple-search.without-header, #top-search .area-selection, #top-search .rooms-selection, #top-search .storey-selection, #top-search .advanced-search { height: 70px; }
  #simple-search.without-header.toolbar { height: 80px; }
  #top-search .storey-selection fieldset { width: 210px; margin: 20px auto 0 auto; }
  #top-search .storey-selection input[type="checkbox"] { margin: 10px 0; padding: 7px 15px; float: none; }
  #top-search .storey-selection label { font-size: 19px; }
  #top-search .storey-selection li { width: auto; }
  #top-search > div > div { padding: 0; }
  #top-search .area-selection .value, #top-search .rooms-selection .value, #top-search .storey-selection .value { width: 78px; height: auto; padding: 0; margin: 0; line-height: 2.8; font-size: 10px; }
  #top-search .x  { line-height: 1; }
  #top-search .advanced-search { margin-right: 3px; }
  #top-search > div > .symbol { border: 0; border-bottom: 1px solid #ccc; float: none; padding: 0; height: 32px; width: 66px; margin-left: 6px; margin-bottom: 0; }
  #top-search .area-selection .symbol > p { padding: 8px 0 0 0; }
  #top-search .rooms-selection .symbol { padding: 0; width: 66px; }
  #top-search .storey-selection .symbol { padding: 9px 0 0 0; height: 23px; }
  #top-search .rooms-selection .symbol div { position: absolute; left: 30px; top: 15px; }
  #top-search .rooms-selection .symbol div:nth-of-type(2) { left: 38px; }
  #top-search .rooms-selection .symbol div:nth-of-type(3) { left: 38px; top: 23px; }
  #top-search .advanced-search .symbol { height: 70px; }
  #top-search .advanced-search a { padding: 23px 0 17px 0; }
  #top-search .drop-down { position: fixed; left: 50%; top: 50%; width: 320px; height: 320px; margin-left: -160px; margin-top: -160px; z-index: 2; box-shadow: 1px 1px 5px #999; }
  #top-search .rooms-selection .drop-down,#top-search .area-selection .drop-down, #top-search .storey-selection .drop-down { padding: 0; }
  #top-search .drop-down .x { display: block; }
  #top-search div .ok { position: absolute; bottom: 10px; right: 20px; width: auto; height: auto; padding: 13px 35px; font-size: 16px; }
  #top-search .area-selection div .ok { right: 20px; }
  #top-search .storey-selection .drop-down span { font-size: 14px; }
  #top-search .rooms-selection .drop-down > div:nth-of-type(1) { width: 265px; padding: 5px; margin: 40px auto 0 auto; float: none; overflow: auto; }
  #top-search .rooms-selection .drop-down > div > div, #top-search .rooms-selection .drop-down > div:nth-of-type(2) { width: 80px; height: 50px; padding-top: 30px; }
  #top-search .rooms-selection .drop-down  > div > div:nth-of-type(2) { width: 168px; }
  #top-search .rooms-selection .drop-down > div:nth-of-type(2) { margin: 2px 0 0 29px; width: 78px; height: 45px; }
  #top-search .area-selection .resizer-container { width: 280px; height: 184px; margin: 40px auto auto auto; }
  #top-search .area-selection .drop-down > p:nth-of-type(1) { left: 50%; top: 15px; margin-left: -140px; }
  #top-search .area-selection .drop-down > p:nth-of-type(2) { left: initial; right: 50%; top: 234px; margin-right: -140px; }
  #top-search .area-selection .drop-down .area-value p { font-size: 20px; margin: -15px auto 0 auto; }
  #top-search .area-selection input[type="number"] { top: initial; bottom: 20px; left: 50%; margin-left: -140px; font-size: 1.5em; padding: 5px 10px; }
  #top-search .value > span { display: table-cell; vertical-align: middle; text-align: center; padding: 0 4px; min-width: 70px; max-width: 70px; height: 28px; font-size: 13px; word-wrap: break-word; line-height: 1; } 
}

label[for="search_query_storeys_6"] {
  display: none;
}


@media screen and (max-width: 800px) {
  #simple-search { display: none; }
}


#full-offer { width: 100%; max-width: 1600px; margin: 0 auto; }
#full-offer header { text-align: center; }
#full-offer h2 { text-transform: uppercase; padding: 0; margin: 0; font-size: 55px; font-weight: 100; }
#full-offer header h2 { font-size: 25px; }
#full-offer p { font-size: 15px; line-height: 1.7; }
#full-offer .right ul li { list-style: inside disc; font-size: 14px; line-height: 1.7; }
#full-offer .right ul + p { margin-top: 7px; }
#full-offer p.bold { font-weight: bold; margin-bottom: 10px; }
#full-offer .right h2 { font-size: 35px; font-weight: 400; color: #ca1d61; padding-top: 40px; padding-bottom: 20px; }
#full-offer section { background: #fff; border: 1px solid #e4e4e4; width: 100%; padding: 40px 0; box-sizing: border-box; -webkit-box-sizing: border-box; }
#full-offer section.construction-offer h2 { color: #bfd911; }
#full-offer section.project-offer { margin-top: 40px; }
#full-offer section .left > div { width: 100%; max-width: 642px; margin: auto; }
#full-offer img { border: 0; width: 100%; height: auto; }
#full-offer section.adaptation-offer .left > div { background-position: 0 -416px; }
#full-offer section.credit-offer .left > div { background-position: 0 -832px; }
#full-offer section.construction-offer .left > div { background-position: 0 -1248px; }
#full-offer .left, #full-offer .right { float: left; width: 50%; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; }
#full-offer .left { padding: 0 10px 0 40px; }
#full-offer .right { padding: 0 80px 0 10px; }
#full-offer a { position: relative; top: 10px; font-size: 15px; color: #ca1d61; }
#full-offer a:hover, #full-offer .mouse-icon:hover { opacity: 0.80; }
#full-offer a.button { display: block; text-transform: uppercase; color: #fff; background: #ca1d61; text-align: center; width: 170px; padding: 7px 0; top: 30px; text-decoration: none; float: right; clear: both; }
#full-offer section.construction-offer a.button { background: #bfd911; color: #000; font-weight: 600; }
#full-offer .mouse-icon { display: none; width: 131px; height: 98px; position: absolute; left: 50%; bottom: -60px; margin-left: -66px; }
#full-offer .mouse-icon > div { width: 131px; height: 98px; position: absolute; left: 0; top: 0; background: transparent url('/images/main/mouse.png') no-repeat; cursor: pointer; }
#full-offer .mouse-icon.show { display: block; }
#colorbox #full-offer { padding: 0; }
#colorbox #full-offer section { margin-top: 0; padding: 40px 0 60px 0; border: 0; }
#colorbox #full-offer .left { padding: 0 10px 0 20px; }
#colorbox #full-offer .right { padding: 0 20px 0 10px; }
#colorbox #full-offer a.button { right: 20px; top: 40px; }

@media screen and (max-width: 1024px) {
  #full-offer section { padding-top: 20px; }
  #full-offer .right { padding: 0 40px 0 10px; }
  #full-offer p { font-size: 14px; line-height: 1.4; }
}

@media screen and (max-width: 800px) {
  #full-offer header h2 { font-size: 20px; }
  #full-offer .right h2 { font-size: 30px; }
  #full-offer .left { width: 100%; padding: 0 40px; }
  #full-offer .right { width: 100%; padding: 0 40px; }
  #full-offer .right h2 { padding-top: 5px; }
  #full-offer a.button { width: 160px; left: 30px; }
}


#project-tabs {
  position: relative;
  width: 100%;
  height: 60px;
  margin: auto;
  padding: 1px 0;
  background: #1B1B1B;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  font-size: 16px;
  font-weight: 100;
  z-index: 1022;
}

#project-tabs.fixed {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1023;
}

#project-tabs-menu.fixed {
  position: fixed;
  overflow: auto;
}

#project-tabs > ul {
  list-style: none;
  height: 58px;
}

#project-tabs > ul > li {
  position: relative;
  float: left;
  text-transform: uppercase;
}

#project-tabs > ul > li > a, #project-tabs li.menu .more-items {
  display: block;
  height: 58px;
  padding: 20px 15px 14px 15px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  text-decoration: none;
  color: #8D8D8D;
  transition: 0.5s color;
}

#project-tabs > ul > li > a:hover, #project-tabs li.menu .more-items:hover, #project-tabs li.ver.current a:hover { color: #fff; }
#project-tabs > ul > li.selected a { color: #fff; }

#project-tabs li.name {
  display: block;
  height: 58px;
  padding: 20px 15px 14px 15px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  background: #ca1d61;
  font-size: 20px;
  color: #fff;
}
#project-tabs li.name.red { background: #666; }

#project-tabs li.back a {
  padding: 20px 20px 14px 20px; 
  color: #fff;
}
#project-tabs li.ver a { min-width: 110px; text-align: center; }
#project-tabs li.ver.current a { color: #ff2792; }
#project-tabs li.project-with-construction a { color: #AFB826; }
#project-tabs li.project-with-construction span, #project-tabs li.ver span {
  position: absolute;
  top: 8px;
  right: 12px;
  padding: 0 8px;
  background: #A7BA19;
  border-radius: 9px;
  font-weight: bold;
  color: #fff;
  font-size: 8px;
  line-height: 12px;
}
#project-tabs li.ver span {
  top: 7px;
  right: auto;
  left: 50%;
  margin-left: -31px;
  background: gray;
  padding: 0 6px 1px;
  text-transform: uppercase;
}
#project-tabs li.ver.current span {
  background: #ca1d61;
  margin-left: -44px;
}
#project-tabs li.menu {
  position: relative;
  max-height: 58px; 
  box-sizing: border-box;
  color: #8D8D8D;
  cursor: pointer;
  z-index: 1;
}

#project-tabs li.menu .fa-bars { display: none; }
#project-tabs li.menu.more-disabled { display: none; }

#project-tabs li.search { display: none; position: absolute; right: 60px; top: 0; font-size: 22px; line-height: 1.1; }
#project-tabs li.search a { color: #fff; }

#project-tabs .unavailable { display: none; }

#project-tabs-menu {
  display: none;
  position: absolute;
  width: 380px;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: 14px;
  background: #252525;
  z-index: 1025;
  overflow: hidden;
}

#project-tabs-menu .mirror {
  display: none;
  width: 100%;
  height: 60px;
  margin-bottom: 5px;
  padding: 4px;
  box-sizing: border-box;
}

#project-tabs-menu .mirror > a {
  display: block;
  float: left;
  width: 50%;
  padding: 20px 15px;
  background: #2D3633;
  box-sizing: border-box;
  color: #ca1d61;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 12px;
  font-weight: bold;
}

#project-tabs-menu .mirror > a.selected {
  color: #fff;
  background: #ca1d61;
}

#project-tabs-menu ul:not(.param-menu) {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  color: #000;
  text-transform: none;
  font-weight: normal;
  list-style: none;
}

#project-tabs-menu ul li { position: relative; }
#project-tabs-menu ul li:nth-of-type(-n+9), .show-on-mobile {
  display: none;
  text-transform: uppercase;
}
#project-tabs-menu ul li .param-menu li {
  text-transform: none;
}
#project-tabs-menu ul li.separator {
  height: 30px;
}
#project-tabs-menu li.project-with-construction span { display: none; }

#project-tabs-menu ul a, #project-tabs-menu ul li > span {
  display: block;
  padding: 10px;
  color: #a7a7a7;
  border-bottom: 1px solid #2f2f2f;
  text-decoration: none;
}

#project-tabs-menu ul a:hover {
  color: #fff;
}

#project-tabs-menu ul li .param-menu li a {
  padding: 6px 5px 6px 20px;
}


#project-tabs li.cart {
  position: inherit;
}

#project-tabs .add-to-cart {
  width: auto;
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 10px;
  font-size: 16px;
  border-radius: 3px;
}

#project-tabs .add-to-cart:hover {
  opacity: 1;
  background: #E58EB0;
}

#project-tabs-menu .param-menu {
  display: none;
}

#project-tabs-menu .favorites-add-remove {
  display: flex;
  justify-content: flex-start;
  text-align: left;
}
#project-tabs-menu .favorites-add-remove .fa-heart { color: #ca1d61; }

#project-tabs-menu .show-on-mobile .add-to-cart, #project-tabs-menu .show-on-mobile a.ask-button {
  width: 100%;
  padding: 15px 10px;
  border-radius: 3px;
  box-sizing: border-box;
  font-family: inherit;
  font-weight: 400;
  font-size: 22px;
}

#project-tabs-menu .show-on-mobile a.ask-button {
  display: block;
  margin: 10px auto;
  border: 2px solid #ca1d61;
  background: #fff;
  color: #ca1d61;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
}

#project-tabs-menu .show-on-mobile .like {
  width: 80%;
  margin: auto;
  padding: 10px 0 5px 0;
  line-height: 2;
}

@media screen and (max-width: 1559px) {
  #project-tabs { font-size: 15px; }
  #project-tabs li.back a { padding: 20px 15px 14px 15px; }
  #project-tabs > ul > li > a { padding: 20px 10px 14px 10px; }
}

@media screen and (max-width: 1335px) {
  #project-tabs { font-size: 14px; }
  #project-tabs li.back a { padding: 20px 13px 14px 13px; }
  #project-tabs > ul > li > a { padding: 20px 8px 14px 8px; }
}

@media screen and (max-width: 1151px) {
  #project-tabs li:nth-of-type(n+10):not(.menu) { display: none; }
  #project-tabs-menu ul li:nth-of-type(n+7):nth-of-type(-n+9) { display: block; }
}

@media screen and (max-width: 1023px) {
  #project-tabs-menu { font-size: 16px; }
  #project-tabs-menu .mirror { display: block; }
  #project-tabs li:nth-of-type(n+8):not(.menu) { display: none; }
  #project-tabs-menu ul li:nth-of-type(n+1):nth-of-type(-n+10) { display: block; }
  #project-tabs > ul > li.selected:nth-of-type(n) { display: block; }
  #project-tabs > ul > li.selected:nth-of-type(n) a { padding: 20px 15px 14px 15px; }
}

@media screen and (max-width: 800px) {
  #project-tabs li:nth-of-type(n+6):not(.menu) { display: none; }
}

@media screen and (max-width: 640px) {
  #project-tabs li:nth-of-type(n+4):not(.menu) { display: none; }
  #project-tabs li.menu { float: right; padding: 23px 20px 21px 20px; }
  #project-tabs li.menu .fa-bars, #project-tabs-menu ul li.show-on-mobile:nth-of-type(n) { display: block; }
  #project-tabs li.menu.more-disabled { display: block; }
  span.show-on-mobile { display: inline; }
  #project-tabs li.menu .more-items { display: none; }
  #project-tabs .add-to-cart, #project-tabs-menu ul li.hide-on-mobile:nth-of-type(n) { display: none; }
  #project-tabs-menu ul li { text-transform: uppercase; }
}

@media screen and (max-width: 520px) {
  #project-tabs-menu { width: 100%; }
  #project-tabs-menu ul:not(.param-menu) { width: 90%; margin: auto; }
  #project-tabs-menu ul a { font-size: 20px; }
  #project-tabs-menu ul li .param-menu li a { padding: 10px 10px 10px 30px; }
  #project-tabs li.menu { color: #fff; }
}

@media screen and (max-width: 400px) {
  #project-tabs-menu ul:not(.param-menu) { width: 100%; }
  #project-tabs-menu .mirror > a { padding: 20px 0; }
}


/* uniwersalny listing projektów */
.projects-listing a { text-decoration: none; }
.projects-listing a:hover { color: #ca1d61; }
.projects-listing img { width: 100%; }
.projects-listing img:hover { opacity: 0.75; z-index: 1; }
.projects-listing > ul {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  flex-grow: 1;
  justify-content: flex-start;
}
.projects-listing > ul > li { display: block; width: 25%; min-height: 228px; margin: 0 0 30px 0; box-sizing: border-box; }
.projects-listing > ul > li > div { max-width: 331px; margin: auto; background: #fff; }
.projects-listing > ul > li .label { position: absolute; left: 0; display: block; width: auto; padding: 0 10px; color: #fff; opacity: 1; z-index: 2; }
.projects-listing > ul > li span.recomended { top: 28px; background-color: #0099ff; }
.projects-listing > ul > li span.new { top: 5px; background-color: #ca1d61; }
.projects-listing > ul > li span.promo { left: auto; right: 5px; top: 5px; background: transparent; color: #fff; font-size: 35px; padding: 0; text-shadow: 1px 1px silver; }
.projects-listing > ul > li div.promo { left: auto; right: 5px; top: 5px; background: #ca1d61; color: #fff; font-size: 14px; padding: 5px; text-transform: uppercase; }
.projects-listing > ul > li .with-construction { top: 28px; width: 110px; background-color: #090; }
.projects-listing > ul > li .with-construction:hover { background-color: #0c0; }

.projects-listing img { display: block; width: 100%; height: 187px; }

.projects-listing .short-summary > li.builtby a { padding: 1px 0 0 4px; width: auto; color: #000; text-transform: uppercase; text-decoration: none; font-weight: bold; font-size: 12px; line-height: 1.2; height: 35px; display: table-cell; vertical-align: middle; }
.projects-listing .short-summary > li.builtby a:hover { opacity: 0.70; }
.projects-listing .short-summary { display: flex; flex-wrap: nowrap; justify-content: flex-start; width: 100%; max-width: 331px; max-height: 35px; background: #eee; }
.projects-listing .short-summary > li:nth-child(-n+3) { display: block; min-width: 25px; min-height: 21px; padding: 4px 8px; color: #fff; font-size: 14px; line-height: normal; }
.projects-listing .short-summary > li:nth-child(-n+3) > a { color: #fff; font-size: 14px; text-decoration: none; }
.projects-listing .short-summary > li:nth-child(-n+3) > span { font-size: 14px; font-weight: normal; }
.projects-listing .short-summary > li:first-of-type { background: #ca1d61; }
.projects-listing .short-summary > li:first-of-type:hover { opacity: 0.75; }
.projects-listing .short-summary > li:nth-of-type(2) { background: #252525; }
.projects-listing .short-summary > li:nth-of-type(3) { background: transparent; color: #333; font-weight: bold; }
.projects-listing .short-summary > li.builtby { height: 35px; overflow: hidden; padding: 0 !important; background: #BFD911; }
.projects-listing > ul > li .tools { float: right; }
.projects-listing > ul > li .tools a, .projects-listing > ul > li .tools > span {
  display: inline-block;
  margin: 7px;
  padding: 0;
  width: 20px;
  height: 20px;
  font-size: 20px;
  color: #000;
}
.projects-listing > ul > li .tools a:hover { opacity: 0.7; }
.projects-listing > ul > li .tools .favorites-add-remove {
  position: relative;
  display: inline-block;
}
.projects-listing > ul > li .tools .favorites-add-remove.added {
  color: #ff9900;
}
.projects-listing > ul > li ol { margin: 4px 0 2px; overflow: hidden; list-style: none; }
.projects-listing > ul > li ol li { padding: 3px 5px; float: left; line-height: 1em; font-size: 10px; text-align: center; }
.projects-listing > ul > li ol li.mid { border-left: 1px solid #eee; border-right: 1px solid #eee; }
.projects-listing > ul > li ol li a { color: #333; }
.projects-listing > ul > li ol li a:hover { color: #ca1d61; }
.projects-listing > ul > li ol li span { font-size: 13px; font-weight: bold; }

.projects-listing .title {
  font-size: 14px;
  margin-bottom: 1em;
}

.projects-listing .params {
  background: #fff;
  border: 1px solid #e4e4e4;
  border-top: 0;
  padding: 1em;
}

.projects-listing .params > div {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #e4e4e4;
  padding: 8px 4px;
  box-sizing: border-box;
  font-size: 13px;
}

.projects-listing .params > div:last-of-type {
  border: 0;
}

.projects-listing .params .name {
  width: calc(100% - 125px);
}

.projects-listing .params .value {
  width: 125px;
  text-align: right;
  font-weight: bold;
}


/* lista szczegółówa */
.projects-listing.list { position: relative; }
.projects-listing.list > ul > li { position: relative; display: block; float: none; width: 100%; min-height: initial; margin: 0 0 20px 0; padding-bottom: 20px; border-bottom: 1px solid #eee; }
.projects-listing.list > ul > li > div { width: auto; }
.projects-listing.list > ul > li img { float: left; width: 25%; }
.projects-listing.list dl { float: left; width: 70%; margin-top: 5px; }
.projects-listing.list dl dfn { margin-bottom: 5px; padding: 0 10px; float: left; border-right: 1px solid #eee; }
.projects-listing.list dl dt { font-size: 1.2em; line-height: 1em; color: #888; }
.projects-listing.list dl dd { font-size: 1.2em; line-height: 1.9em; }
.projects-listing.list .short-summary { position: absolute; bottom: 20px; left: 25%; width: 75%; }
.projects-listing.list .short-summary > li:nth-of-type(-n+3) { height: 37px; font-size: 1.8em; }

/* garaże */
.projects-listing.garages dl { margin: 15px 0; font-size: 1.1em; line-height: 1.6em; overflow: hidden; }
.projects-listing.garages dl dt { width: 50%; float: left; clear: left; text-align: right; padding-right: 10px; box-sizing: border-box; -moz-box-sizing: border-box; }
.projects-listing.garages dl dd { width: 50%; float: right; }
.projects-listing.garages a.download { padding-left: 20px;  background: transparent url('/images/tools-icons-list.png') -10px -179px no-repeat; color: #252525; }
.projects-listing.garages a.download:hover { background-position: -10px -201px; color: #ca1d61; }
.projects-listing.garages .tools { float: left; }
.projects-listing.garages .price { float: right; font-size: 1.4em; }

@media screen and (max-width: 1460px) {
  .projects-listing > ul > li { width: 33.333%; }
}

@media screen and (max-width: 1120px) {
  .projects-listing > ul > li { width: 50%; }
}

@media screen and (max-width: 700px) {
  .projects-listing > ul > li { width: 100%; }
}


#content {
  max-width: none;
  padding: 0;
  background: #fff;
  overflow-x: hidden;
}

#content-body {
  max-width: none;
  padding: 0;
}

#simple-search {
  width: 100%;
  padding: 10px 0;
  margin: auto;
  background-color: #1b1b1b;
  z-index: 1023;
}

.admin-area {
  position: fixed;
  top: 145px;
  left: 20px;
  padding: 10px;
  background: rgba(25,25,25,0.8);
  color: #fff;
  font-size: 14px;
  z-index: 1025;
}

.admin-area .alias {
  margin-left: 10px;
  cursor: pointer;
}

.admin-area span {
  margin-right: 20px;
}

.admin-area a {
  text-decoration: none;
  color: #ca1d61;
}
.admin-area a.click-here { color: #fff; text-decoration: underline; }

#project-switch-mobile {
  height: 25px;
  font-size: 14px;
  padding: 5px 10px 5px 10px;
}

.project-switch-next-string-right, .project-switch-next-string-left {
  display: inline-block;
  position: relative;
  margin-top: 4px;
  color: #ca1d61;
}

.project-switch-next-string-right {
  margin-right: 8px;
}

.project-switch-next-string-left {
  margin-left: 8px;
}

.arrows {
  font-size: 28px;
  color: #ca1d61;
}

.project-switch-prev {
  text-align: left;
  float:left;
}

.project-switch-prev:hover,.project-switch-next:hover {
  opacity: 0.75;
}

.project-switch-next {
  text-align: right;
  float:right;
}

#project a {
  color: #CA1D61;
}

#project .left, #project .right {
  float: none;
}

#project > header {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 40%;
  overflow: hidden;
  margin: auto;
  background: #000;
  color: #fff;
}

#project > header img, #project > header iframe, #project > header .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

#project > header .overlay {
  background: #000;
  opacity: 0.4;
  z-index: 2;
}

#project > header img {
  object-fit: cover;
}

#project > header iframe {
  transform: scale(1.5);
}

#project > header .text {
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  top: 50%;
  left: 50%;
  width: 100%;
  max-width: 1280px;
  transform: translateX(-50%) translateY(-50%);
  padding: 2em;
  box-sizing: border-box;
  font-size: 16px;
  z-index: 3;
}

#project > header .text > .right {
  width: 30%;
}

#project > header .text > .left {
  width: 70%;
  padding-right: 2em;
  box-sizing: border-box;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.75);
}

#project > header .text h1 {
  margin-top: 0;
  font-size: 34px;
  font-weight: 600;
  vertical-align: middle;
}

#project > header .text h1 .archived {
  font-size: 0.6em;
  vertical-align: middle;
}

#project .hidden-text {
  display: none;
}
#project .add-to-cart-button .add-to-cart {
  width: 100%;
  height: initial;
  padding: 1em;
  margin: 0;
  background: #fff;
  color: #000;
  font-size: 22px;
}

#project .add-to-cart-button .add-to-cart:hover {
  opacity: inherit;
}

#project .button-3d {
  display: block;
  position: relative;
  width: 350px;
  height: 90px;
  text-transform: uppercase;
  cursor: pointer;
}

#project .button-3d .inner-wrap {
  -webkit-perspective: 2000px;
  perspective: 2000px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}

#project .button-3d .front-3d, #project .button-3d .back-3d {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block
}

#project .button-3d .front-3d {
  -webkit-transform: rotateX(-90deg);
  transform: rotateX(-90deg)
}

#project .button-3d .back-3d {
  -webkit-transform: rotateX(0deg);
  transform: rotateX(0deg)
}

#project .button-3d:hover .front-3d {
  -webkit-transform: rotateX(0deg);
  transform: rotateX(0deg)
}

#project .button-3d:hover .back-3d {
  -webkit-transform: rotateX(90deg);
  transform: rotateX(90deg)
}

#project .button-3d .front-3d, #project .button-3d .back-3d {
  transition: -webkit-transform .25s;
  transition: transform .25s;
}

#project .button-3d .front-3d, #project .button-3d .back-3d {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden
}

#project .button-3d .back-3d svg, #project .button-3d .front-3d svg {
  display: block
}

#project .interiors, #project .realizations, #project .technologies, #project .tiles {
  display: flex;
  flex-wrap: wrap;
}

#project .interiors > div, #project .realizations > div, #project .technologies > div, #project .tiles > div  {
  position: relative;
  width: 50%;
  height: 0;
  padding-top: calc(100vw / 4);
  background: #000;
  color: #fff;
  overflow: hidden;
}

#project .tiles.t1 > div {
  width: 100%;
  padding-top: 45%;
}

#project .visualizations.v2 > div a .next-arrow { display: none; }

#project .visualizations > div:nth-of-type(4), #project .visualizations > div:nth-of-type(5) {
  width: 25%;
}

#project .interiors.i4 > div, #project .interiors.i6 > div:nth-of-type(n+3), #project .interiors.i8 > div,
#project .realizations.r4 > div, #project .realizations.r6 > div:nth-of-type(n+3), #project .realizations.r8 > div,
#project .tiles.t4 > div, #project .tiles.t6 > div:nth-of-type(n+3), #project .tiles.t8 > div {
  width: 25%;
}

#project .visualizations > div a, #project .interiors > div a, #project .realizations > div a, #project .tiles > div a {
  display: block;
}

#project .visualizations > div img, #project .interiors > div img, #project .realizations > div img, #project .technologies > div img,
#project .tiles > div img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s, filter 0.5s;
  z-index: 1;
}

#project .tiles > div h1 {
  position: absolute;
  bottom: 0.7em;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.4em 0.6em;
  color: #fff;
  font-size: 28px;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 2;
  line-height: 1.1;
  text-align: center;
}

#project .tiles > div h1 span {
  white-space: nowrap
}

#project .tiles > div h1 span:first-of-type {
  text-shadow: 0 0 2px rgba(0,0,0,0.75);
}

#project .tiles > div h1 .area {
  font-size: 0.8em;
  color: #ddd;
}

#project .tiles > div h1 .price {
  font-size: 0.8em;
  color: #FFC0E0;
}

#project a .next-arrow {
  position: absolute;
  width: 39px;
  height: 12px;
  bottom: 30px;
  right: 30px;
  transition: opacity 0.5s;
  z-index: 2;
}

#project a .next-arrow svg {
  display: block;
  width: 39px;
  height: 12px;
  fill: transparent;
  stroke-width: 2px;
}

#project a .next-arrow svg line {
  stroke-width: 2px;
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
}

#project a:hover .next-arrow svg line {
  opacity: 0;
  animation: arrow 0.5s linear forwards;
}

#project a:hover .next-arrow svg line.spike {
  animation-delay: 0.35s;
  animation-duration: 0.5s;
}

@keyframes arrow {
  from {
    stroke-dashoffset: 50;
    opacity: 0;
  }
  to {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

@keyframes opacity-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slide-left-in {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    transform: translateX(0%);
  }
}

@keyframes slide-right-in {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0%);
  }
}

.slide-left-in-animation {
  animation: slide-left-in 0.75s linear forwards;
}

.slide-right-in-animation {
  animation: slide-right-in 0.75s linear forwards;
}

.opacity-in-animation {
  animation: opacity-in 1s ease-in forwards;
}

/* klasy obserwowane przez IntersectionObserver */
.slide-left-in { transform: translateX(-99%); }
.slide-right-in { transform: translateX(99%); }
.opacity-in { opacity: 0; }
/* --- */


#project .visualizations > div a:hover img, #project .interiors > div a:hover img, #project .realizations > div a:hover img,
#project .tiles > div a:hover img {
  transform: scaleX(1.1) scaleY(1.1);
  filter: brightness(40%);
}

#project .visualizations.v2 > div a:hover img {
  transform: none;
  filter: none;
}

#project .additional-info {
  position: relative;
  padding: 10vh 2em;
  background: #000;
  color: #fff;
  background-position: center;
  background-repeat: repeat;
}

#project .additional-info .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.65;
  z-index: 1;
}

#project .additional-info > div:last-of-type {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 1020px;
  margin: auto;
  z-index: 2;
}

#project .additional-info h2 {
  margin-bottom: 1.5em;
  font-size: 26px;
  font-weight: 600;
}

#project .additional-info > div >.left {
  width: calc(100% - 320px);
  max-width: 700px;
  box-sizing: border-box;
  font-size: 13px;
  line-height: 1.5em;
  padding-right: 2em;
}

#project .additional-info > div > .left p, #project .additional-info > div > .left .info {
  margin: 1em 0;
}

#project .additional-info > div > .left .prepayment-info {
  font-size: 1.2em;
  line-height: 1.5em;
  color: #f7c4d1;
}

#project .additional-info > div > .right {
  align-self: center;
  width: 320px;
  box-sizing: border-box;
  padding: 1em;
}

#ask-for-project-form .ado-info {
  padding: 0;
}

#project .ask-for-project {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 3em 1em;
  background-color: #fff;
  color: #000;
}

#project .ask-for-project > div {
  width: 33.3333%;
  max-width: 380px;
  align-self: center;
  align-items: center;
}

#project .ask-for-project > div:first-of-type {
  font-size: 28px;
  line-height: 1.2em;
  font-weight: 100;
}

#project .ask-for-project > div:nth-of-type(2) {
  font-size: 30px;
  font-weight: 400;
  text-align: center;
}

#project .ask-for-project > div:nth-of-type(2) a {
  color: #000;
  text-decoration: none;
}

#project .ask-for-project > div:nth-of-type(2) p {
  padding-top: 1em;
  font-size: 13px;
}

#project .ask-for-project > div:last-of-type span {
  display: inline-block;
  max-width: 100%;
  padding: 1em 3em;
  text-transform: uppercase;
  border: 2px solid #000;
  border-radius: 5px;
  box-sizing: border-box;
  text-decoration: none;
  color: #000;
  font-size: 21px;
  text-align: center;
  line-height: 1.2em;
  cursor: pointer;
}

#project .ask-for-project > div:last-of-type span:hover {
  border-color: #CA1D61;
  color: #CA1D61;
}

#project .projections, #project .lot {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 1220px;
  margin: auto;
  padding: 8em 1em 0 1em;
  box-sizing: border-box;
}

#project .projections .left, #project .lot .left {
  position: relative;
  max-width: 650px;
  width: calc(100% - 450px);
}

#project .projections .left canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

#project .projections .right, #project .lot .right {
  width: 100%;
  max-width: 450px;
  padding-left: 2em;
  box-sizing: border-box;
  color: #666;
  text-align: right;
  font-size: 15px;
}

#project .projections .right h2, #project .lot .right h2 {
  font-weight: 400;
  font-size: 30px;
  color: #444;
}

#project .projections .right h2 span:first-of-type, #project .lot .right h2 span:first-of-type {
  text-transform: uppercase;
}

#project .projections .right .room, #project .lot .right .features > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin: 0.5em 0 0.5em auto;
}

#project .projections .right .room .value, #project .lot .right .features > div .value {
  width: 80px;
  font-weight: bold;
}

#project .projections .right .tools {
  margin-top: 3em;
}

#project .projections .right .tools > span {
  display: inline-block;
  margin: 0 0.5em;
  text-align: center;
  cursor: pointer;
}

#project .projections .right .tools > span span {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
}

#project .projections .right .tools > span:hover {
  opacity: 0.75;
}

#project .projections .right .tools i {
  padding: 2px;
}

#project .projections .right .tools .mirror .fa-home {
  color: #CA1D61;
}

#project .projections .right .tools .mirror .fa-home.fa-flip-horizontal {
  color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #ccc;
}

#project .projections .right .tools .mirror[data-mirror="1"] .fa-home {
  color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #ccc;
}

#project .projections .right .tools > span.enabled {
  color: #ca1d61;
}

#project .projections .right .tools .mirror[data-mirror="1"] .fa-home.fa-flip-horizontal {
  color: #CA1D61;
  -webkit-text-stroke-width: 0;
}

#project .projections .left img, #project .lot .left img {
  width: 100%;
  transition: 1s transform;
}

#project .projections .editor-msg, #project .projections .draw-msg, #project .projections .draw-msg-success {
  display: none;
  margin-top: 1em;
  padding: 1em;
  background: #eee;
  text-align: center;
}

#project .projections .draw-msg-success {
  background: #6BD089;
}

#project .lot .right .features > div > div:first-of-type {
  text-transform: uppercase;
}

#project .lot .right .evelation-dimensions {
  padding-top: 2em;
}

#project .lot .files {
  line-height: 1.7em;
}

#project .lot .files a {
  text-decoration: none;
}

#project .lot .files a:hover {
  text-decoration: underline;
}

#project .lot .files .ext {
  text-transform: uppercase;
}

#project .features-costs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 6em;
}

#project .features-costs.v4 {
  max-width: 1280px;
  margin: 6em auto 0 auto;
}

#project .features-costs > div {
  width: 32%;
  padding: 20px;
  box-sizing: border-box;
}

#project .features-costs.v4 > div {
  width: 50%;
}

#project #costs .edit-date {
  font-size: 14px;
  text-transform: uppercase;
  margin-bottom: 20px;
}

#project #costs .edit-date span {
  color: #ca1d61;
}

#project #costs .edit-date span:nth-of-type(2) {
  color: #666;
  font-size: 11px;
}

#project #costs header, #project #costs .costs-table, #project .features-costs .info {
  max-width: 600px;
  margin: auto;
}

#project #costs .costs-table table, #project #costs .costs-table .economic-method {
  width: 100%;
  margin: auto;
}

#project #costs .costs-table table thead td {
  border-right: 1px solid #ADABAB;
  border-bottom: 1px solid #ADABAB;
  font-size: 15px;
  padding: 10px;
  font-weight: 400;
  text-align: center;
}

#project #costs .costs-table table tbody td {
  border-bottom: 1px solid #ADABAB;
  border-right: 1px solid #ADABAB;
  font-size: 15px;
  padding: 10px;
  text-align: right;
  color: #000;
}

#project #costs .costs-table table tbody td.desc {
  text-align: left;
}

#project #costs .costs-table table tbody .sum td {
  font-size: 22px;
  border-bottom: 0;
  font-weight: 400;
}

#project #costs .costs-table table tbody .sum td.desc {
  font-size: 22px;
  font-weight: 400;
}

#project #costs .costs-table .economic-method {
  padding: 1em;
  margin-top: 20px;
  box-sizing: border-box;
  background-color: #000;
  color: #fff;
  font-size: 16px;
}

#project #costs .costs-table .economic-method .desc {
  display: inline-block;
  margin-right: 5px;
}

#project #costs .costs-table .economic-method .price {
  display: inline-block;
  font-weight: bold;
}

#project .features-costs .info, #project .features-costs .features .info {
  display: block;
  padding: 1em 0;
  font-size: 13px;
  color: #888;
}

#project .features-costs .features h2 {
  margin: 0 0 10px 0;
  padding: 8px 0 8px 0;
  border-bottom: 1px solid #eee;
  text-transform: uppercase;
  font-weight: 400;
}

#project .features-costs .features > div {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  font-size: 16px;
}

#project .features-costs .features > div > div {
  box-sizing: border-box;
}

#project .features-costs .features > div > div:first-of-type {
  width: 47%;
  padding: 4px 0;
  text-align: left;
  font-weight: 300;
  color: #333;
}

#project .features-costs .features > div > div:nth-of-type(2) {
  width: 49%;
  padding: 4px 0;
  font-weight: bold;
  line-height: 1.2em;
}

#project .features-costs .features > div > div:last-of-type {
  min-width: 4%;
  align-self: center;
}

#project .features-costs .features > div.materials > div:first-of-type {
  width: 25%;
}

#project .features-costs .features > div.materials > div:first-of-type::first-letter {
  text-transform: uppercase;
}

#project .features-costs .features > div.materials > div:nth-of-type(2) {
  width: 75%;
}

#project .features-costs .features .construction-assumptions {
  width: 100%;
  margin-top: 1em;
  line-height: 1.5em;
}

#project .features-costs .features .construction-assumptions > div:first-of-type {
  width: 100%;
}

#project .features-costs .features > .construction-assumptions ul {
  font-size: 15px;
}

#project .features-costs .features > .construction-assumptions ul li {
  min-height: 30px;
  box-sizing: border-box;
  list-style-type: disc;
  list-style-position: inside;
}

#project .features-costs table {
  width: 100%;
  font-size: 16px;
  font-weight: 100;
}

#project .features-costs table th, #project .features-costs table td {
  padding: 4px 0;
}

#project .features-costs .features .annotation {
  padding-top: 1em;
  font-size: 13px;
}

#project .features-costs .features .annotation p {
  padding: 0.5em 0;
}

#project .benefits {
  perspective: 1px;
  transform-style: preserve-3d;
  height: 480px;
  background: #000 url('/images/project/drawing.png') no-repeat center;
}

#project .benefits > div {
  position: absolute;
}

#project .archicad .expand {
  display: none;
  cursor: pointer;
}

#project .benefits .base {
  display: flex;
  top: 50%;
  left: 50%;
  flex-wrap: wrap;
  width: 100%;
  max-width: 1120px;
  transform: translateX(-50%) translateY(-50%) translateZ(0);
  padding: 2em;
  background-color: rgba(0, 0, 0, 0.8);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
  box-sizing: border-box;
  color: #fff;
  font-size: 16px;
  line-height: 2em;
  z-index: 2;
}

#project .benefits .base .left {
  width: calc(100% - 300px);
  box-sizing: border-box;
}

#project .benefits .base .left ul {
  list-style: none;
  counter-reset: li;
}

#project .benefits .base .left ul li {
  clear: both;
}

#project .benefits .base .left ul li:before {
  float: left;
  content: '•';
  color: #CA1D61;
  display: inline-block;
  width: 20px;
  height: 40px;
  font-size: 26px;
  vertical-align: middle;
}

#project .benefits .base .left li span {
  text-transform: uppercase;
}

#project .benefits .base .right {
  width: 300px;
  box-sizing: border-box;
}

#project .elevations {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-bottom: 4em;
}

#project .elevations > div {
  width: 50%;
}

#project .elevations > div h2 {
  font-size: 30px;
  text-align: center;
}

#project .elevations > div .images {
  width: 100%;
  margin: auto;
}

#project .elevations > div .images img {
  width: 100%;
  max-width: 1000px;
}

#project .elevations .twentytwenty-overlay:hover {
  background: transparent;
}

#project .object3d {
  max-width: 1280px;
  margin: auto;
}

#project .object3d h2 {
  font-size: 30px;
  text-align: center;
}

#project .object3d > div {
  width: 100%;
  height: 75vh;
  padding: 1em;
  box-sizing: border-box;
}

#project .description {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 7em auto;
  padding: 0 1em;
}

#project .description ul { list-style: none; }

#project .description.v0 {
  max-width: 800px;
}

#project .description > div {
  width: 28%;
  padding: 1em;
  box-sizing: border-box;
}

#project .description > .col2 {
  max-width: 520px;
  width: 44%;
  color: #666;
  font-size: 15px;
  line-height: 1.7em;
}

#project .description.v0 > .col2 {
  width: 100%;
  max-width: none;
}

#project .description .copyrights {
  color: #888;
  font-size: 13px;
  line-height: 1.5em;
}

#project .animation h2 {
  background: linear-gradient(to bottom right,#3452ff,#ff1053);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
  font-size: 54px;
  line-height: 72px;
  font-weight: 600;
  color: #3452ff;
}

#project .animation > div {
  position: relative;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 */
  margin: auto;
}

#project .animation > div iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#project .social {
  display: flex;
  flex-wrap: wrap;
  height: 100px;
  justify-content: center;
  padding: 0 1em;
  background-color: #000;
  align-items: center;
  font-size: 24px;
  color: #ccc;
  font-weight: 100;
}

#project .social .box {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  box-sizing: border-box;
  text-align: center;
  cursor: pointer;
}

#project .social .box:hover {
  filter: brightness(130%);
}

#project .social .facebook {
  background: #4267b2;
}

#project .social .twitter {
  background: #1da1f2;
}

#project .social > a {
  color: #fff;
  text-decoration: none;
}

#project .social .instagram {
  background: #d6249f;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
}

#project .social .odnoklassniki {
  background: #e47d08;
}

#project .social .vk {
  background: #5181B8;
}

#project .social > div i {
  align-self: center;
  font-size: 60px;
}

#project .social > div.text {
  display: flex;
  align-items: center;
  align-content: center;
  padding: 1em;
  cursor: default;
  height: 100px;
  box-sizing: border-box;
  text-align: center;
}

#project .social > div.share {
  background: #999;
  color: #fff;
}

#project .archicad {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: auto;
}

#project .archicad > div {
  position: relative;
  width: 50%;
  box-sizing: border-box;
  z-index: 2;
}

#project .archicad > div:first-of-type {
  overflow: hidden;
}

#project .archicad > div:last-of-type {
  padding: 1em;
  font-size: 15px;
  line-height: 1.5em;
  color: #666;
}

#project .archicad .name {
  font-size: 15px;
  color: #CA1D61;
}

#project .archicad ul { list-style: none;}

#project .archicad ul li {
  padding: 1em 0;
}
#project .archicad p {
  padding: 1em 0;
}

#project .archicad video, #project .archicad iframe {
  display: block;
  width: 100%;
  height: 100%;
  transform: scale(1.4);
  z-index: 1;
}

#project .technologies > div a {
  position: absolute;
  border: 2px solid #fff;
  top: 50%;
  left: 50%;
  padding: 1em 2em;
  min-width: 250px;
  background: rgba(0, 0, 0, 0.1);
  transform: translateX(-50%) translateY(-50%);
  transition: 0.75s background;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 16px;
  color: #fff;
  text-align: center;
  z-index: 2;
}

#project .technologies > div a:hover {
  background: rgba(0, 0, 0, 0.75);
}

#project .adaptation {
  padding: 4em 2em;
  background: #CA1D61;
  color: #fff;
  font-size: 16px;
  line-height: 1.5em;
}

#project .adaptation > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  max-width: 1220px;
  margin: auto;
}

#project .adaptation > div .left {
  width: 100%;
  max-width: 750px;
}

#project .adaptation h3 {
  padding-bottom: 1em;
  font-size: 18px;
  text-transform: uppercase;
  font-weight: 600;
}

#project .adaptation ul {
  padding: 0.5em 0;
  list-style: none;
}

#project .adaptation li {
  padding: 0.4em 0;
}

#project .adaptation .fa-check { color: #CA1D61; }

#project .comments {
  position: fixed;
  bottom: 42px;
  left: 0;
  right: 0;
  max-width: 1600px;
  margin: auto;
  z-index: 1024;
}

#project .comments .comment {
  display: none;
  position: absolute;
  left: 40px;
  bottom: 20px;
}

#project .comments .comment.show { display: block; }

#project .comments img {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  border-radius: 30px;
}

#project .comments .content {
  position: relative;
  top: 0;
  left: 50px;
  width: 580px;
  padding: 15px 20px;
  background: rgba(40,40,40,0.8);
  border-radius: 10px;
  box-sizing: border-box;
  color: #ddd;
  font-size: 15px;
  line-height: 1.5em;
  overflow: hidden;
  max-height: 107px;
}

#project .comments .fa-close {
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
  font-size: 18px;
}

.card-message {
  display: block;
  background: #000;
  color: #fff;
  padding: 1em;
  font-size: 20px;
  text-decoration: none;
  text-align: center;
}

#project .short-summary a { color: #fff; }

#project .projects-listing h1, #project .variants h1, #project .my-constructions h1 {
  padding: 1em 0;
  text-align: center;
}

#project .my-constructions .star {
  max-width: 1600px;
  padding: 40px 22px 10px 22px;
  margin: auto;
  font-size: 17px;
  color: #ca1d61;
  line-height: 1.3em;
}

#project .more {
  margin: 2em auto;
  text-align: center;
}

#project .more a {
  display: inline-block;
  padding: 1em 2em;
  font-size: 18px;
  text-transform: uppercase;
  text-decoration: none;
  background: #ca1d61;
  color: #fff;
}

.flip-clock-wrapper ul { height: 100px; width: 8%; }
.flip-clock-wrapper ul li { width: 100%; line-height: 100px; }
.flip-clock-divider { height: 110px; width: 5%; }
.flip-clock-wrapper ul li a div div.inn { font-size: 56px; }
.flip-clock-divider .flip-clock-label { font-size: 28px; position: absolute; }
.flip-clock-divider.hours .flip-clock-label { left: 140%;  }
.flip-clock-divider.minutes .flip-clock-label { left: 160%;  }
.flip-clock-divider.seconds .flip-clock-label { left: 130%;  }

.projections .hide { display: none; }

#project .promotion-box.hide, #project .price-box .hide, #project .price-box.hide, #project .mirror-symbol-code.hide, .cart .add-to-cart.hide { display: none; }

#project-mc-popup { position: fixed; left: 50%; top: 50%; max-width: 1024px; width: 100%; max-height: 100vh; transform: translateX(-50%) translateY(-50%); background: #fff; z-index: 10001; overflow: hidden; overflow-y: auto; height: auto; }
#project-mc-popup h3 { padding: 20px 25px 10px; margin: 0; font-size: 24px; color: #ca1d61; font-weight: 100; text-transform: uppercase; }
#project-mc-popup .x { position: absolute; right: 6px; top: 3px; font-size: 36px; color: #000; cursor: pointer; }
#project-mc-popup .x:hover { opacity: 0.75; }
#project-mc-popup .mc-listing-big { width: calc(100% - 30px); margin: auto; }
#project-mc-popup.one .mc-listing-big { width: 330px; }
#project-mc-popup .mc-listing-big ul li { min-width: 330px; width: 330px; }
#project-mc-popup .mc-listing-big .photo { top: 200px; }

.tooltip-container > span.active { position: fixed; }

#draw {
  padding: 20px;
  font-size: 16px;
  line-height: 1.5;
}

#draw form label {
  width: 100%;
  font-size: 17px;
  float: left;
}

#draw form textarea {
  width: 100%;
  float: left;
  height: 200px;
}

#draw form .button-standard {
  padding: 10px;
  font-size: 16px;
  border-radius: 3px;
  width: 42%;
  border: 0 none;
  color: #fff;
  cursor: pointer;
  text-transform: uppercase;
  margin: 10px 0;
}

#draw form #form-submit {
  background: #ca1d61;
}

#draw form #form-cancel {
  background: #999;
}

#draw .info {
  width: 100%;
  float: left;
  margin-left: 15px;
}

#draw .addon-bullets {
  list-style-type: disc;
  color: #ca1d61;
  width: 70%;
  float: left;
}

#draw .addon-bullets li span {
  color: #333;
}

#draw form .left-col {
  width: 70%;
  float: left;
  line-height: 50px;
}

#draw form .right-col {
  width: 30%;
  float: left;
  text-align: right;
}

#draw .image {
  width: 29%;
  float: left;
  text-align: center;
}

#draw .image img {
  width: 70%;
}

#draw .error {
  color: #ca1d61;
}

#draw form .ado-info {
  float: left;
  width: 90%;
}

#draw .email input {
  width: 100%;
  line-height: 30px;
}

#draw .email {
  width: 50%;
}

@media screen and (max-width: 1620px) {
  #project > header { padding-bottom: 50%; }
  #project > header .text { max-width: 1024px; }
  #project > header .text > .left { width: calc(100% - 300px); }
  #project > header .text > .right { width: 300px; }
  #project .visualizations.v2 > div { padding-top: 50%; }
  #project .features-costs { justify-content: center; }
  #project .features-costs { max-width: 1280px; }
  #project .features-costs > div { width: 50%; }
  #project .archicad video, #project .archicad iframe { transform: scale(2.2); }
}

@media screen and (max-width: 1366px) {
  #project .description > .col2 { font-size: 13px; line-height: 1.6em; }
  #project .archicad video, #project .archicad iframe { transform: scale(2.6); }
}

@media screen and (max-width: 1280px) {
  #project > header { padding-bottom: 60%; }
  #project > header .text { max-width: 950px; }
  #project .visualizations.v2 > div { padding-top: 60%; }
  #project .ask-for-project > div:first-of-type { font-size: 20px; }
  #project .ask-for-project > div:nth-of-type(2) { font-size: 24px; }
  #project .ask-for-project > div:last-of-type a { padding: 1em 2em; }
  #project .projections .left, #project .lot .left { max-width: 660px; }
  #project .projections .right, #project .lot .right { max-width: 400px; }
  #project .projections .right h2, #project .lot .right h2 { font-size: 26px; }
  #project .features-costs, #project .features-costs.v4 { max-width: 1000px; }
  #project .description { margin: 3em auto; }
  #project .social { height: 80px; font-size: 18px; }
  #project .social > div.text { height: 80px; }
  #project .social .box { width: 80px; height: 80px; }
  #project .archicad video, #project .archicad iframe { transform: scale(3); }
  #project .tiles > div h1 {
    font-size: 20px;
  }
}

@media screen and (max-width: 1023px) {
  #project .interiors > div, #project .realizations > div, #project .technologies > div, #project .tiles > div { width: 100%; padding-top: calc(100vw / 2); }
  #project .visualizations > div:nth-of-type(5) { width: 50%; padding-top: calc(100vw / 2); }
  #project .interiors.i4 > div, #project .interiors.i6 > div:nth-of-type(n+3), #project .interiors.i8 > div,
  #project .realizations.r4 > div, #project .realizations.r6 > div:nth-of-type(n+3), #project .realizations.r8 > div,
  #project .tiles.t4 > div, #project .tiles.t6 > div:nth-of-type(n+3), #project .tiles.t8 > div { width: 50%; padding-top: calc((100vw / 2) - 60px); }
  #project .ask-for-project > div { width: 100%; max-width: 100%; padding: 0.8em; text-align: center; }
  #project .features-costs, #project .features-costs.v4 { max-width: 550px; }
  #project .features-costs > div, #project .features-costs.v4 > div { width: 100%; }
  #project .projections .left, #project .lot .left, #project .projections .right, #project .lot .right { width: 100%; max-width: 700px; margin: auto; padding-left: 2em; padding-right: 2em; }
  #project .elevations > div { width: 100%; }
  #project .description { margin: auto; }
  #project .description > div, #project .description > .col2 { width: 100%; max-width: initial; }
  #project .description > .col1, #project .description > .col3 { max-width: 800px; margin: auto; }
  #project .animation h2 { font-size: 44px; font-weight: 400; }
  #project .social div.text { display: none; }
  #project .social .box.instagram { margin-right: 80px; }
  #project .archicad > div { width: 100%; }
  #project .archicad > div:first-of-type { display: none; }
  #project .archicad video, #project .archicad iframe { display: none; }
  .projections .left .save-button { right: 10%; }
}

@media screen and (max-width: 800px) {
  #project > header { padding: 0; height: initial; }
  #project > header iframe { transform: scale(2); }
  #project > header .text { position: relative; top: initial; left: initial; transform: none; padding: 3em; }
  #project > header .text .left, #project > header .text .right { width: 100%; padding: 1em; }
  #project > header .text .right .price-box { margin: auto; }
  #project .visualizations.v2 > div { padding: 0; height: initial; }
  #project .visualizations.v2 img { position: relative; }
  #project .additional-info { padding: 5em 2em; }
  #project .additional-info > div > .left, #project .additional-info > div > .right { width: 100%; padding: 0; }
  #project .additional-info > div > .right { padding-top: 2em; }
  #project .benefits { height: auto; }
  #project .benefits > div.background { transform: translateY(0); }
  #project .benefits > div.base { position: relative; top: initial; left: initial; transform: none; }
  #project .benefits .base .left, #project .benefits .base .right { width: 100%; padding-top: 2em; }
  #project .archicad .left { display: none; }
  #project .archicad .right { width: 100%; }
  #project .archicad .left img { width: 70%; }
  #project .animation h2 { font-size: 32px; font-weight: 100; }
  #project .technologies > div { width: 100%; padding-top: calc(100vw / 2); }
  #project .comments { display: none; }
  #project .tiles > div h1 {
    font-size: 18px;
  }
}

@media screen and (max-width: 640px) {
  .admin-area { display: none; }
  .slide-left-in { transform: translateX(0); }
  .slide-right-in { transform: translateX(0); }
  .slide-left-in-animation { animation: none; }
  .slide-right-in-animation { animation: none; }
  #project .projections .right .tools i { font-size: 3em; }
  #project .projections .right .tools > span span { font-size: 13px; }
  #project .sketchfab h2 { padding: 0 1em; font-size: 26px; }
  #project .social { display: flex; max-width: 450px; height: max-content; margin: auto; justify-content: space-between; background-color: transparent; flex-wrap: wrap; }
  #project .social .text { display: none;}
  #project .social .box { width: 100px; height: 100px; margin: 1em; }
  #project .social .box .fa-3x, #project .social > div i { font-size: 4em; }
  #project .social .box.instagram { margin-right: 1em; }
  #project .social > div.box { background-color: #ccc; color: #fff; }
  #project .social > div.box:hover { filter: none; background-color: #eee; color: #333; }
  #draw .email { width: 100%; }
  #draw form .left-col { width: 100%; }
  #draw form .right-col { width: 100%; text-align: center; }
  #project .tiles > div h1 {
    font-size: 16px;
  }
}

@media screen and (max-width: 500px) {
  #project > header iframe { transform: scale(2.5); }
  #project .projections .right .tools { display: flex; flex-wrap: wrap; justify-content: center; }
  #project .projections .right .tools > span { width: 50%; margin: 0.5em 0; }
  #project .social { justify-content: center; padding: 0; }
  #project .social .box { width: 80px; height: 80px; margin: 20px; }
  #project .social .box .fa-3x, #project .social > div i { font-size: 3em; }
  #project .projections, #project .lot { padding-top: 4em; }
  #project #costs .costs-table table thead td, #project #costs .costs-table table tbody td, #project #costs .costs-table table tbody .sum td.desc, #project #costs .costs-table table tbody .sum td { padding: 1em; font-size: 15px; }
  #project .tiles > div h1 {
    font-size: 13px;
  }
}

@media screen and (max-width: 414px) {
  #project > header iframe { transform: scale(3); }
  #project .features-costs .features > div { font-size: 14px; }
  #project #costs .costs-table table thead td, #project #costs .costs-table table tbody td, #project #costs .costs-table table tbody .sum td.desc, #project #costs .costs-table table tbody .sum td { padding: 0.75em; font-size: 14px; }
  #project .adaptation .button-3d svg { max-width: 300px; }
  #project .archicad .expand { display: inline; }
  #archicad-expand { display: none; }
  #project .benefits { display: none; }
  #project .benefits .base { font-size: 15px; }
}

@media print {

  @page {
    margin: 1cm;
    size: A4;
  }

  /*!*prevents printing black pages*!*/
  html, body {
    height: 99%;
    background: white;
  }

  #project > header .text .right .price-box {
    border: none;
  }

  #project > header .text .right .price-box .front {
    display: none;
  }

  #project > header .text .right .price-box.white {
    animation: none;
  }

  #project .ask-for-project > div {
    width: 100%;
    padding: 40px;
    text-align: center;
  }

  #project .ask-for-project .cboxElement {
    display: none;
  }

  #project .social {
    display: none;
  }

  #project .projections .right .tools {
    display: none;
  }

  .project-disclaimer {
    background: white;
  }


  #main-menu, #header, #simple-search, #project-tabs, #footer, #cookies-settings, .cookies-settings, #facebook_right, .share-box, .admin-area,
  .add-to-cart, .mirror-box, .like, #addons-recommended, .promotion, .video, .mc, .files-to-download, .ordinance-annotation a, .cost-file a, .button,
  .get-adaptation, .z-hint, .box, .variants, .comments, .interior, .realizations, .similars, #site-point-5, .interiors, .description .left,
  .wooden-version-info, .old-price, .unavailable, #urgent-message, a.project-switch-prev, a.project-switch-next, .social-media-inline, .adaptation, .animation,
  .addons_recommended, .archicad, .technologies, .project-rules {
    display: none !important;
  }
}


/* Get the bourbon mixin from http://bourbon.io */
/* Reset */
.flip-clock-wrapper * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}

.flip-clock-wrapper a {
  cursor: pointer;
  text-decoration: none;
  color: #ccc; }

.flip-clock-wrapper a:hover {
  color: #fff; }

.flip-clock-wrapper ul {
  list-style: none; }

.flip-clock-wrapper.clearfix:before,
.flip-clock-wrapper.clearfix:after {
  content: " ";
  display: table; }

.flip-clock-wrapper.clearfix:after {
  clear: both; }

.flip-clock-wrapper.clearfix {
  *zoom: 1; }

/* Main */
.flip-clock-wrapper {
  font: normal 11px "Helvetica Neue", Helvetica, sans-serif;
  -webkit-user-select: none; }

.flip-clock-meridium {
  background: none !important;
  box-shadow: 0 0 0 !important;
  font-size: 36px !important; }

.flip-clock-meridium a { color: #313333; }

.flip-clock-wrapper {
  text-align: center;
  position: relative;
  width: 100%;
  margin: 1em;
}

.flip-clock-wrapper:before,
.flip-clock-wrapper:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}
.flip-clock-wrapper:after {
    clear: both;
}

/* Skeleton */
.flip-clock-wrapper ul {
  position: relative;
  float: left;
  margin: 5px;
  width: 60px;
  height: 90px;
  font-size: 80px;
  font-weight: bold;
  line-height: 87px;
  border-radius: 6px;
  background: #000;
}

.flip-clock-wrapper ul li {
  z-index: 1;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  line-height: 87px;
  text-decoration: none !important;
}

.flip-clock-wrapper ul li:first-child {
  z-index: 2; }

.flip-clock-wrapper ul li a {
  display: block;
  height: 100%;
  -webkit-perspective: 200px;
  -moz-perspective: 200px;
  perspective: 200px;
  margin: 0 !important;
  overflow: visible !important;
  cursor: default !important; }

.flip-clock-wrapper ul li a div {
  z-index: 1;
  position: absolute;
  left: 0;
  width: 100%;
  height: 50%;
  font-size: 80px;
  overflow: hidden; 
  outline: 1px solid transparent; }

.flip-clock-wrapper ul li a div .shadow {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2; }

.flip-clock-wrapper ul li a div.up {
  -webkit-transform-origin: 50% 100%;
  -moz-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  -o-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  top: 0; }

.flip-clock-wrapper ul li a div.up:after {
  content: "";
  position: absolute;
  top: 44px;
  left: 0;
  z-index: 5;
  width: 100%;
  height: 3px;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.4); }

.flip-clock-wrapper ul li a div.down {
  -webkit-transform-origin: 50% 0;
  -moz-transform-origin: 50% 0;
  -ms-transform-origin: 50% 0;
  -o-transform-origin: 50% 0;
  transform-origin: 50% 0;
  bottom: 0;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

.flip-clock-wrapper ul li a div div.inn {
  position: absolute;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 200%;
  color: #ccc;
  text-shadow: 0 1px 2px #000;
  text-align: center;
  background-color: #333;
  border-radius: 6px;
  font-size: 70px; }

.flip-clock-wrapper ul li a div.up div.inn {
  top: 0; }

.flip-clock-wrapper ul li a div.down div.inn {
  bottom: 0; }

/* PLAY */
.flip-clock-wrapper ul.play li.flip-clock-before {
  z-index: 3; }

.flip-clock-wrapper .flip {   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.7); }

.flip-clock-wrapper ul.play li.flip-clock-active {
  -webkit-animation: asd 0.01s 0.49s linear both;
  -moz-animation: asd 0.01s 0.49s linear both;
  animation: asd 0.01s 0.49s linear both;
  z-index: 5; }

.flip-clock-divider {
  float: left;
  display: inline-block;
  position: relative;
  width: 20px;
  height: 100px; }

.flip-clock-divider:first-child {
  width: 0; }

.flip-clock-dot {
  display: block;
  background: #323434;
  width: 10px;
  height: 10px;
  position: absolute;
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  left: 5px; }

.flip-clock-divider .flip-clock-label {
  position: absolute;
  top: -1.5em;
  right: -86px;
  color: black;
  text-shadow: none; }

.flip-clock-divider.minutes .flip-clock-label {
  right: -88px; }

.flip-clock-divider.seconds .flip-clock-label {
  right: -91px; }

.flip-clock-dot.top {
  top: 30px; }

.flip-clock-dot.bottom {
  bottom: 30px; }

@-webkit-keyframes asd {
  0% {
    z-index: 2; }

  100% {
    z-index: 4; } }

@-moz-keyframes asd {
  0% {
    z-index: 2; }

  100% {
    z-index: 4; } }

@-o-keyframes asd {
  0% {
    z-index: 2; }

  100% {
    z-index: 4; } }

@keyframes asd {
  0% {
    z-index: 2; }

  100% {
    z-index: 4; } }

.flip-clock-wrapper ul.play li.flip-clock-active .down {
  z-index: 2;
  -webkit-animation: turn 0.5s 0.5s linear both;
  -moz-animation: turn 0.5s 0.5s linear both;
  animation: turn 0.5s 0.5s linear both; }

@-webkit-keyframes turn {
  0% {
    -webkit-transform: rotateX(90deg); }

  100% {
    -webkit-transform: rotateX(0deg); } }

@-moz-keyframes turn {
  0% {
    -moz-transform: rotateX(90deg); }

  100% {
    -moz-transform: rotateX(0deg); } }

@-o-keyframes turn {
  0% {
    -o-transform: rotateX(90deg); }

  100% {
    -o-transform: rotateX(0deg); } }

@keyframes turn {
  0% {
    transform: rotateX(90deg); }

  100% {
    transform: rotateX(0deg); } }

.flip-clock-wrapper ul.play li.flip-clock-before .up {
  z-index: 2;
  -webkit-animation: turn2 0.5s linear both;
  -moz-animation: turn2 0.5s linear both;
  animation: turn2 0.5s linear both; }

@-webkit-keyframes turn2 {
  0% {
    -webkit-transform: rotateX(0deg); }

  100% {
    -webkit-transform: rotateX(-90deg); } }

@-moz-keyframes turn2 {
  0% {
    -moz-transform: rotateX(0deg); }

  100% {
    -moz-transform: rotateX(-90deg); } }

@-o-keyframes turn2 {
  0% {
    -o-transform: rotateX(0deg); }

  100% {
    -o-transform: rotateX(-90deg); } }

@keyframes turn2 {
  0% {
    transform: rotateX(0deg); }

  100% {
    transform: rotateX(-90deg); } }

.flip-clock-wrapper ul li.flip-clock-active {
  z-index: 3; }

/* SHADOW */
.flip-clock-wrapper ul.play li.flip-clock-before .up .shadow {
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, black));
  background: linear, top, rgba(0, 0, 0, 0.1) 0%, black 100%;
  background: -o-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
  background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
  background: linear, to bottom, rgba(0, 0, 0, 0.1) 0%, black 100%;
  -webkit-animation: show 0.5s linear both;
  -moz-animation: show 0.5s linear both;
  animation: show 0.5s linear both; }

.flip-clock-wrapper ul.play li.flip-clock-active .up .shadow {
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, black));
  background: linear, top, rgba(0, 0, 0, 0.1) 0%, black 100%;
  background: -o-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
  background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
  background: linear, to bottom, rgba(0, 0, 0, 0.1) 0%, black 100%;
  -webkit-animation: hide 0.5s 0.3s linear both;
  -moz-animation: hide 0.5s 0.3s linear both;
  animation: hide 0.5s 0.3s linear both; }

/*DOWN*/
.flip-clock-wrapper ul.play li.flip-clock-before .down .shadow {
  background: -moz-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, black), color-stop(100%, rgba(0, 0, 0, 0.1)));
  background: linear, top, black 0%, rgba(0, 0, 0, 0.1) 100%;
  background: -o-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
  background: -ms-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
  background: linear, to bottom, black 0%, rgba(0, 0, 0, 0.1) 100%;
  -webkit-animation: show 0.5s linear both;
  -moz-animation: show 0.5s linear both;
  animation: show 0.5s linear both; }

.flip-clock-wrapper ul.play li.flip-clock-active .down .shadow {
  background: -moz-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, black), color-stop(100%, rgba(0, 0, 0, 0.1)));
  background: linear, top, black 0%, rgba(0, 0, 0, 0.1) 100%;
  background: -o-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
  background: -ms-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
  background: linear, to bottom, black 0%, rgba(0, 0, 0, 0.1) 100%;
  -webkit-animation: hide 0.5s 0.3s linear both;
  -moz-animation: hide 0.5s 0.3s linear both;
  animation: hide 0.5s 0.2s linear both; }

@-webkit-keyframes show {
  0% {
    opacity: 0; }

  100% {
    opacity: 1; } }

@-moz-keyframes show {
  0% {
    opacity: 0; }

  100% {
    opacity: 1; } }

@-o-keyframes show {
  0% {
    opacity: 0; }

  100% {
    opacity: 1; } }

@keyframes show {
  0% {
    opacity: 0; }

  100% {
    opacity: 1; } }

@-webkit-keyframes hide {
  0% {
    opacity: 1; }

  100% {
    opacity: 0; } }

@-moz-keyframes hide {
  0% {
    opacity: 1; }

  100% {
    opacity: 0; } }

@-o-keyframes hide {
  0% {
    opacity: 1; }

  100% {
    opacity: 0; } }

@keyframes hide {
  0% {
    opacity: 1; }

  100% {
    opacity: 0; } }
    


#project .promotion-box {
  font-size: 15px;
  background-color: #006699;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: auto;
  padding: 2em;
  box-sizing: border-box;
  color: #fff;
}

#project .promotion-box h2 {
  font-size: 2em;
}

.promotion-box a {
  text-decoration: none;
}

#subscribe-form {
  padding: 5px;
  box-sizing: border-box;
  width: 100%;
  text-align: center;
}

.promotion-box .promotion-title {
  font-size: 32px;
  line-height: 32px;
  text-transform: uppercase;
  font-weight: 100;
}

.promotion-box .counter {
  font-size: 14px;
  text-align: center;
}

#subscribe-form form > label {
  display: block;
  padding-bottom: 1em;
}

#subscribe-form form > label[for="promotion_subscribe_email"] {
  color: #eee;
  padding: 1em 0 3px 0;
}

#subscribe-form form input[type="email"] {
  width: 20%;
  min-width: 200px;
  padding: 0.3em;
}

#subscribe-form form ul li {
  display: block;
}

.promotion-box .hide { display: none; }

.promotion-box .form-errors {
  background-color: #FFA5A5;
  color: #A06363;
  padding: 10px;
  border: 1px solid #A06363;
}

#project .promotion-box a {
  color: #fff;
}

#promotion-clock { text-decoration: none; font-size: 22px; color: #fff; padding-left: 5%; float: left; }
#promotion-clock .flip-clock-label { color: #fff; }
#promotion-clock .flip-clock-dot { left: calc(50% - 5px); }
.promotion-box .counter { min-width: 240px; margin: auto; margin-top: 20px; }
.promotion-box .promotion-title { margin: 0 auto 15px auto; width: 100%; text-align: center; }

@media screen and (max-width: 1024px) {
  .promotion-box .promotion-title { font-size: 1.4em; }
}

@media screen and (max-width: 800px) {
  #promotion-clock { padding: 0; }
  .promotion-box .promotion-details > div { padding: 5px;}
  #project .additional-info .price-box, #project .additional-info .promotion-box { margin: auto; }
  #project .benefits .price-box, #project .benefits .promotion-box { margin: auto; }
  #subscribe-form form input[type="email"] { width: 80%; }
}

@media screen and (max-width: 670px) {
  .promotion-box .promotion-title { font-size: 1.2em; line-height: 1.4; }
  .promotion-box .counter .flip:nth-child(11), .promotion-box .counter .flip:nth-child(12), .promotion-box .counter .flip-clock-divider.seconds { display: none; }
  .promotion-box .flip-clock-wrapper ul { height: 75px; width: calc(15% - 18px); }
  .promotion-box .flip-clock-wrapper ul li { width: 100%; line-height: 75px; }
  .promotion-box .flip-clock-divider { height: 85px; width: 5%; }
  .promotion-box .flip-clock-wrapper ul li a div div.inn { font-size: 30px; }
  .promotion-box .flip-clock-divider .flip-clock-label { font-size: 24px; }
  .promotion-box .flip-clock-divider.days .flip-clock-label { right: -66px; }
  .promotion-box .flip-clock-divider.hours .flip-clock-label { right: -96px; }
  .promotion-box .flip-clock-divider.minutes .flip-clock-label { right: -87px; }
}

@media screen and (max-width: 500px) {
  .promotion-box .promotion-title { font-size: 1em; }
  .promotion-box .flip-clock-divider .flip-clock-label { font-size: 16px; }
  .promotion-box .flip-clock-divider.days .flip-clock-label { right: -46px; }
  .promotion-box .flip-clock-divider.hours .flip-clock-label { right: -66px; }
  .promotion-box .flip-clock-divider.minutes .flip-clock-label { right: -57px; }
}

@media screen and (max-width: 414px) {
  .promotion-box .counter .flip:nth-child(11), .promotion-box .counter .flip:nth-child(12), .promotion-box .counter .flip-clock-divider.seconds { display: none; }
  .promotion-box .flip-clock-wrapper ul { height: 50px; width: 24px; }
  .promotion-box .flip-clock-wrapper ul li { width: 100%; line-height: 50px; }
  .promotion-box .flip-clock-divider { height: 50px; }
  .promotion-box .flip-clock-wrapper ul li a div div.inn { font-size: 30px; }
  .promotion-box .flip-clock-divider .flip-clock-label { font-size: 16px; }
  .promotion-box .flip-clock-divider.days .flip-clock-label { right: -46px; }
  .promotion-box .flip-clock-divider.hours .flip-clock-label { right: -66px; }
  .promotion-box .flip-clock-divider.minutes .flip-clock-label { right: -58px; }
  .promotion-box .flip-clock-divider.seconds .flip-clock-label { right: -78px; }
}

.price-box {
  display: block;
  position: relative;
  min-width: 260px;
  max-width: 300px;
  padding: 15px 5px 5px 5px;
  background: transparent;
  border-width: 5px;
  border-style: solid;
  box-sizing: border-box;
  text-align: center;
  font-size: 13px;
  line-height: 1.5em;
  transition: 1s box-shadow, 1s background;
  cursor: pointer;
}

.price-box:hover {
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%, 80% {
    transform: translate3d(1px, 0, 0);
  }
  30%, 50%, 70% {
    transform: translate3d(-1px, 0, 0);
  }
  40%, 60% {
    transform: translate3d(1px, 0, 0);
  }
}

@keyframes pulse-white {
  0% {
    box-shadow: 0 0 0 0 rgba(255,255,255, 0.4);
  }
  70% {
    box-shadow: 0 0 0 20px rgba(255,255,255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255,255,255, 0);
  }
}

@keyframes pulse-pink {
  0% {
    box-shadow: 0 0 0 0 rgba(202,29,97, 0.4);
  }
  70% {
    box-shadow: 0 0 0 20px rgba(202,29,97, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(202,29,97, 0);
  }
}

@keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 10deg);
    transform: rotate3d(0, 0, 1, 10deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -7deg);
    transform: rotate3d(0, 0, 1, -7deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 3deg);
    transform: rotate3d(0, 0, 1, 3deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -3deg);
    transform: rotate3d(0, 0, 1, -3deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

.price-box.white {
  border-color: #fff;
  color: #fff;
  animation: pulse-white 1.7s infinite;
}

.price-box.white:hover {
  box-shadow: 0 0 30px #fff;
  background: rgba(0, 0, 0, 0.5);
  animation: swing 0.75s both;
}

.price-box.pink {
  border-color: #CA1D61;
  color: #333;
  animation: pulse-pink 1.7s infinite;
}

.price-box.pink:hover {
  box-shadow: 0 0 30px -5px rgba(0, 0, 0, 0.5);
  background: rgba(255, 255, 255, 0.5);
  animation: swing 0.75s both;
}

.price-box .type {
  font-size: 28px;
  font-weight: 100;
  line-height: 34px;
}

.price-box .type:first-letter {
  text-transform: uppercase;
}

.price-box .front, .price-box:hover .back {
  display: block;
}

.price-box:hover .front, .price-box .back {
  display: none;
}

.price-box .availability {
  min-height: 20px;
  text-transform: uppercase;
  font-size: 11px;
}

.price-box .availability b { margin-right: 3px; }
.price-box .availability .fa-question-circle { position: relative; }

.price-box .old-price {
  margin: 10px 0;
  font-weight: 100;
  font-size: 20px;
  line-height: 1em;
  text-transform: none;
}

.price-box .old-price span {
  text-decoration: line-through;
  font-size: 30px;
}

.price-box .old-price > div { margin-top: 5px; }

.price-box .price {
  margin: 10px 0;
  font-weight: 100;
  font-size: 40px;
  line-height: 1em;
  text-transform: none;
}

.price-box .add-to-cart, .price-box  .ask-for-project-btn {
  width: 100%;
  height: initial;
  padding: 0.8em 1em;
  margin: 0;
  background: #fff;
  color: #000;
  font-size: 22px;
  line-height: 1.2em;
}

.price-box .add-to-cart:hover, .price-box  .ask-for-project-btn {
  opacity: inherit;
}

.price-box .price-save {
  font-size: 18px;
}

.price-box p { font-size: 13px; }

.price-box a { color: #ca1d61; text-decoration: none; }

.price-box .unavailable {
  font-weight: bold;
  font-size: 16px;
  text-transform: none;
  color: #070;
}

.price-box .info {
  margin-bottom: 20px;
  text-transform: none;
}

#subscribe-button {
  border-radius: 3px;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 18px;
  font-weight: 400;
  background: #fff none repeat scroll 0 0;
  border: 1px solid #000;
  color: #000;
  cursor: pointer;
  outline: medium none;
  padding: 5px 0;
  text-transform: uppercase;
  width: 100px;
  margin-top: 5px;
}

#subscribe-button:hover {
  color: #CA1D61;
  border-color: #CA1D61;
}


#my-construction {
  max-width: 1450px;
  margin: 0 auto auto auto;
  padding: 10px 0 30px 0;
  font-size: 17px;
}

#my-construction .welcome a { color: #333; }

#my-construction .welcome header h1, #my-construction .stages h1, #my-construction .archive h1, .construction-site h1 {
  
  text-transform: uppercase;
  font-weight: 100;
  font-size: 50px;
  text-align: center;
}

#my-construction .welcome header p {
  text-align: center;
  text-transform: uppercase;
  font-size: 23px;
  font-weight: 100;
}

#my-construction .welcome figure {
  display: block;
  width: 960px;
  margin: 42px auto 22px auto;
  border-top: 1px solid #ebebeb;
  color: #333;
}
#my-construction .welcome figure:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

#my-construction .welcome figure div {
  float: left;
  width: 219px;
  height: 216px;
  padding: 10px;
  border-right: 1px solid #ebebeb;
  text-align: center;
  font-size: 16px;
  line-height: 1.5em;
}

#my-construction .welcome figure div:nth-child(4) {
  width: 220px;
  border-right: 0 none;
}

#my-construction .welcome footer {
  padding-bottom: 28px;
  text-align: right;
  font-size: 13px;
  text-align: center;
}

#my-construction .welcome footer button {
  padding: 7px 20px;
  background: #e8548e; /* Old browsers */
  background: -moz-linear-gradient(top,  #e8548e 0%, #ca1d61 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e8548e), color-stop(100%,#ca1d61)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #e8548e 0%,#ca1d61 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #e8548e 0%,#ca1d61 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #e8548e 0%,#ca1d61 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #e8548e 0%,#ca1d61 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8548e', endColorstr='#ca1d61',GradientType=0 ); /* IE6-9 */
  border: 0 none;
  font: normal 17px 'Open Sans', sans-serif;
  color: #fff;
  cursor: pointer;
}

#my-construction .welcome footer button:hover { opacity: 0.75; }

#my-construction .stages header { position: relative; }
#my-construction .stages header #mc-search-form { position: absolute; top: 5px; right: 0; width: 344px; height: 55px; padding: 15px; background: #ca1d61; color: #fff; font: 13px 'Open Sans', sans-serif; }
#my-construction .stages header #mc-search-form p { margin: 0; padding: 0 0 4px 0; }
#my-construction .stages header #mc-search-form input {
  width: 290px;
  padding: 5px 5px;
  border-top: 1px solid #dbdcde;
  border-left: 1px solid #dbdcde;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  color: #333;
}
#my-construction .stages header #mc-search-form button {
  width: 25px;
  height: 26px;
  border: 0 none;
  padding: 0;
  margin-left: 8px;
  background: transparent url('/images/my_construction/ico-magnifier-white.png') no-repeat;
  vertical-align: middle;
  cursor: pointer;
}

.ui-menu .mc-item.ui-menu-item a { padding: 1px; border: 1px solid #fff; cursor: pointer; }
.ui-menu .mc-item.ui-menu-item a.ui-state-hover { border: 1px solid #999; }
.ui-menu .mc-item.ui-menu-item a img { vertical-align: top; width: 60px; }
.ui-menu .mc-item.ui-menu-item a span { display: inline-block; }
.ui-menu .mc-item.header { padding: 0; background: #f4f4f4; line-height: 1.5; }
.ui-menu .mc-item.header a { font-weight: bold; }
.ui-menu .mc-item.header:hover a { border: 1px solid #999; }

#my-construction .archive {
  padding: 10px 0;
  border-top: 1px solid #000;
}

#my-construction .stages h1, #my-construction .archive h1 {
  color: #000;
}

#my-construction .stages h1 span, #my-construction .archive h1 span { color: #ca1d61; }

#my-construction .stages header > p {
  padding-top: 1em;
  text-align: center;
}

#my-construction .stages .filters {
  height: 30px;
  margin: 30px auto;
  padding: 8px 0;
  border-top: 1px solid #e3e3e3;
  border-bottom: 1px solid #e3e3e3;
  font-size: 17px;
}

#my-construction .stages .filters:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

#my-construction .stages .filters p {
  display: inline-block;
  padding: 7px 10px 0 0;
}

#my-construction .stages .filters ul {
  display: inline-block;
  margin-top: 5px;
}

#my-construction .stages .filters ul li {
  display: inline-block;
  padding: 3px 10px 0 10px;
}

#my-construction .stages .filters ul li a {
  padding: 2px 5px;
  text-decoration: none;
  color: #333;
}

#my-construction .stages .filters ul li a:hover { background: #f4f4f4; }
#my-construction .stages .filters ul li a.selected { background: #ddd; }

#my-construction .stages .filters .sort select { display: none; }
#my-construction .stages .filters .sort { float: left; }
#my-construction .stages .filters .province { float: right; }
#my-construction .stages .filters .province select, #my-construction .stages .filters > select {
  background-color: #fff;
  border-top: 1px solid #abadb3;
  border-right: 1px solid #dbdfe6;
  border-bottom: 1px solid #e3e9ef;
  border-left: 1px solid #e2e3ea;
  border-radius: 2px;
  font-family: inherit;
}

.mc-listing-big ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  flex-grow: 1;
  list-style: none;
}

.mc-listing-big ul li {
	min-width: 347px;
  width: 33%;
  margin: 0;
}

.mc-listing-big ul li > div { position: relative; width: 304px; margin: auto; }

.mc-listing-big .header {
  position: relative;
  padding: 5px 0;
}

.mc-listing-big .header h2 {
  margin: 0;
  font: bold 17px 'Open Sans', sans-serif;
}

.mc-listing-big .header h3 {
  margin: 0;
  font: 17px 'Open Sans', sans-serif;
}

.mc-listing-big .header .popularity {
  margin: 4px 0 2px auto;
  height: 16px;
  background: url('/images/my_construction/star-gray.png') repeat-x right center;
}

.mc-listing-big h4 {
  position: absolute;
  top: 50px;
  left: 0;
  width: 100px;
  padding: 7px 7px;
  background: #000;
  font-size: 15px;
  color: #fff;
}

.mc-listing-big .arrow {
  position: absolute;
  top: 86px;
  left: 15px;
}

.mc-listing-big .header .province {
  font-size: 11px;
  color: #666;
}

.mc-listing-big .header.own {
  padding: 5px 10px;
  background: #252525;
}
.mc-listing-big .header h2 a, .mc-listing-big .header h3 a { color: #333; }
.mc-listing-big .header.own h2, .mc-listing-big .header.own h3,
.mc-listing-big .header.own h2 a, .mc-listing-big .header.own h3 a { color: #fff; }
.mc-listing-big .header h2 a, .mc-listing-big .header h3 a { text-decoration: none; }
.mc-listing-big .header a:hover { opacity: 0.75; }

.mc-listing-big .header .watched {
  position: absolute;
  top: 3px;
  right: 0;
  display: block;
  width: 33px;
  height: 33px;
  background: url('/images/my_construction/icons-popularity.png') no-repeat 0 -90px;
}

.mc-listing-big img {
  display: block;
  width: 304px;
  height: 172px;
  padding-bottom: 3px;
}
.mc-listing-big img:hover { opacity: 0.75; }

.mc-listing-big .photo {
  position: absolute;
  top: 213px;
  left: 10px;
  padding: 0 0 0 30px;
  background: url('/images/my_construction/sheets-white.png') no-repeat left center;
  color: #fff;
  font: bold 12px 'Open Sans', sans-serif;
  text-shadow: 1px 1px 0 #000, 0 0 2px #fff;
}

.mc-listing-big .new, .mc-listing-big .total-cost {
  display: block;
  position: absolute;
  top: 210px;
  right: 10px;
  padding: 4px 5px;
  background: #ca1d61;
  font-size: 12px;
  color: #fff;
}
.mc-listing-big .total-cost { font-size: 20px; top: 198px; }
.mc-listing-big .footer {
  font-size: 10px;
  color: #999;
}

.mc-listing-big .footer p {
  display: inline-block;
  padding-top: 2px;
}

.mc-listing-big .footer span {
  padding: 0 5px 0 2px;
  color: #000;
}

.mc-listing-big .progress-background {
  width: 100%;
  height: 7px;
  background: #dbdcdb;
}

.mc-listing-big .progress {
  height: 7px;
  background: #3fd626;
  background: -moz-linear-gradient(top,  #3fd626 0%, #1aa204 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3fd626), color-stop(100%,#1aa204));
  background: -webkit-linear-gradient(top,  #3fd626 0%,#1aa204 100%);
  background: -o-linear-gradient(top,  #3fd626 0%,#1aa204 100%);
  background: -ms-linear-gradient(top,  #3fd626 0%,#1aa204 100%);
  background: linear-gradient(to bottom,  #3fd626 0%,#1aa204 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3fd626', endColorstr='#1aa204',GradientType=0 );
}

#my-construction .archive ul {
  padding-top: 10px;
}

#my-construction .archive ul li {
  float: left;
  padding: 0 5px 15px 5px;
}

#my-construction .archive img {
  width: 120px;
  height: 90px;
  border: 1px solid #ccc;
  cursor: pointer;
}

#my-construction .archive img:hover { opacity: 0.75; }

#my-construction.construction-site .listing-big {
  border-bottom: 1px solid #333;
}
#my-construction.construction-site .construction-details { width: 100%; padding: 40px 0; margin: 0 auto; background: #fff; }
#my-construction.construction-site .construction-details header {
  position: relative;
  height: 75px;
  margin: 0 40px;
}

#my-construction.construction-site .construction-details header img {
  float: left;
  height: 75px;
  margin-right: 15px;
}

#my-construction.construction-site .construction-details h1 {
  padding: 5px 0 3px 0;
  font-size: 20px;
  font-weight: bold;
  text-transform: none;
  margin-bottom: 3px;
  text-align: left;
}

#my-construction.construction-site .construction-details h2 {
  font: 14px 'Open Sans', sans-serif;
  color: #999;
  text-align: left;
  text-transform: none;
}

#my-construction.construction-site .construction-details h4 {
  position: absolute;
  top: 75px;
  margin-top: 0;
  left: 0;
  width: 90px;
  padding: 5px 7px;
  background: #ca1d61;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
}

#my-construction.construction-site .construction-details .arrow {
  position: absolute;
  left: 15px;
  top: 109px;
}

#my-construction.construction-site header h2 {
  text-align: left;
  font: bold 18px 'Open Sans', sans-serif;
  text-transform: uppercase;
}

#my-construction.construction-site header h2 span { color: #ca1d61; }

#my-construction.construction-site header .new-events {
  display: none;
  position: absolute;
  top: 27px;
  right: 20px;
  font-size: 14px;
}

#my-construction.construction-site header .new-events span {
  display: inline-block;
  padding: 3px 5px;
  background: #ca1d61;
  font-weight: bold;
  color: #fff;
}

.construction-site .content {
  height: 200px;
  margin: 0 40px;
  background: #fff;
}

.construction-site .content .left-col {
  float: left;
  width: 300px;
  height: 170px;
  border-bottom: 1px solid #f4f4f4;
}

.construction-site .content .right-col {
  position: relative;
  float: left;
  padding: 17px 0 0 0;
  border-bottom: 1px solid #f4f4f4;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#f4f4f4);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#f4f4f4)";    
  background-image: linear-gradient(bottom, #FFFFFF 90%, #F4F4F4 100%);
  background-image: -o-linear-gradient(bottom, #FFFFFF 90%, #F4F4F4 100%);
  background-image: -moz-linear-gradient(bottom, #FFFFFF 90%, #F4F4F4 100%);
  background-image: -webkit-linear-gradient(bottom, #FFFFFF 90%, #F4F4F4 100%);
  background-image: -ms-linear-gradient(bottom, #FFFFFF 90%, #F4F4F4 100%);
  background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.9, #FFFFFF),color-stop(1, #F4F4F4));
  font-size: 12px;
}

.construction-details .third-col div {
  height: 30px;
}

.construction-details .third-col div p {
  font-size: 12px;
  float: right;
}
.construction-details .third-col div p.icn {
  padding-left: 34px;
  font-size: 15px;
  min-width: 25px;
}

.construction-details .third-col div .last-activity {
  padding: 0;
  color: #000;
  font-weight: bold;
  font-size: 13px;
  margin-left: 5px;  
}

#my-construction.construction-site .construction-details header .popularity {
  margin: 0;
  height: 16px;
  background: url('/images/my_construction/star-gray.png') repeat-x left center;
  position: absolute;
  top: 17px;
  right: 0;
}

.construction-details .fourth-col p, .construction-details .fourth-col .stage-text {
  float: left;
  margin: 4px 5px 0 0;
}

.construction-details .fourth-col .stage-text {
  display: none;
  padding-left: 8px;
  text-transform: uppercase;
  margin-top: 5px;
}

.construction-details .fourth-col{
  width: 460px;
  height: 30px;
  clear: both;
  padding-top: 10px;
  margin: 0 auto;
  font-size: 12px;
}

.construction-details .fourth-col .slider {
  float: left;
  margin: 0;
  background: #ECEDEB;
  width: 220px;
  height: 23px;
}

#progress-slider-counter {
  float: left;
  width: 50px;
  margin: 0;
  background: #000;
  color: #fff;
  font: bold 17px 'Open Sans', sans-serif;
  text-align: center;
}

#progress-slider-box {
  float: left;
  width: 170px;
  height: 23px;
  margin: 0;
  background: #ecedeb;
}

#progress-slider {
  width: 153px;
  height: 23px;
  background: transparent;
  border: 0 none;
}

#progress-slider .ui-slider-range {
  height: 23px;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#86d223', endColorstr='#6aba01', GradientType=0);
  background-image: linear-gradient(bottom, #6aba01 31%, #86d223 66%);
  background-image: -o-linear-gradient(bottom, #6aba01 31%, #86d223 66%);
  background-image: -moz-linear-gradient(bottom, #6aba01 31%, #86d223 66%);
  background-image: -webkit-linear-gradient(bottom, #6aba01 31%, #86d223 66%);
  background-image: -ms-linear-gradient(bottom, #6aba01 31%, #86d223 66%);
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.31, #6aba01), color-stop(0.66, #86d223));
}

#progress-slider .ui-slider-handle {
  position: absolute;
  top: 0;
  width: 17px;
  height: 23px;
  margin: 0;
  background: #ca1d61 url('/images/my_construction/slider-handle.png') no-repeat 4px 4px;
  border: 0 none;
  border-radius: 0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  cursor: pointer;
}

.construction-details .second-col {
  float: left;
  width: 800px;
  height: 145px;
  padding: 5px 30px 3px 30px;
  overflow: hidden;
}

.construction-details .second-col p {
  text-transform: uppercase;
  margin-bottom: 9px;
}

.construction-details .second-col p a {
  text-decoration: none;
  color: #ca1d61;
}

.construction-site .content .left-col  a img:hover, .construction-details .second-col p a:hover { opacity: 0.75; }

.construction-details .second-col div {
  height: 90px;
  overflow: hidden;
  line-height: 1.8;  
}

.construction-details .second-col div:first-line {
  font-weight: bold;
}

.construction-details .fourth-col .construction-cost {
  float: left;
  margin-left: 15px;
  font-weight: bold;
}

.construction-details .fourth-col .construction-cost .cost { color: #ca1d61; }

.construction-details .third-col {
  float: left;
  height: 139px;
  padding: 5px 35px 3px 30px;
  border-left: 1px solid #f4f4f4;
}

.construction-details .third-col .icon1 { background: url('/images/my_construction/icons-popularity.png') no-repeat 0 -2px; }
.construction-details .third-col .icon2 { background: url('/images/my_construction/icons-popularity.png') no-repeat 0 -31px; }
.construction-details .third-col .icon3 { background: url('/images/my_construction/icons-popularity.png') no-repeat 0 -63px; }
.construction-details .third-col .icon4 { background: url('/images/my_construction/icons-popularity.png') no-repeat 0 -95px; }

.ajax-empty-msg {
  padding: 10px;
  text-align: center;
  font-size: 14px;
}

.ajax-empty-msg a { color: #ca1d61; }

article.stages { margin-top: 20px; }
article.archive { clear: both; margin-top: 20px; display: inline-block; width: 100%; }
article.archive ul { margin: auto; width: 1720px; }

#my-construction { max-width: 1450px; margin: auto; }
#project #project-content article.archive ul { margin: auto; width: 1320px; }

.mc-listing-big .total-cost, .mc-listing-big .partial-cost { position: absolute; right: 10px; top: 188px; font-size: 26px; padding: 6px; cursor: pointer; }
.mc-listing-big .partial-cost { background: #b6b6b6; cursor: pointer; }
.mc-listing-big .new { top: 80px; }
.mc .star { display: none; }

@media screen and (max-width: 1870px) {
	article.archive ul { width: 1320px !important; }
}
@media screen and (max-width: 1560px) {
	article.archive ul { width: 1060px !important; }
  #my-construction .stages .filters ul { display: none; }
	#my-construction .stages .filters .sort select { display: inline-block; }
  #my-construction.construction-site .construction-details { max-width: 1050px; }
  .construction-details .second-col { width: 400px; }
}
@media screen and (max-width: 1300px) {
  #my-construction.construction-site header h2 { margin-bottom: 30px; }
  #my-construction .stages header #mc-search-form { top: 60px; padding: 4px 10px; }
  #my-construction .stages header #mc-search-form .arrow { display: none; }
}
@media screen and (max-width: 1190px) {
	article.archive ul { width: 660px !important; }
	#my-construction .welcome figure { width: 488px; border-top-width: 0; }
	#my-construction .welcome figure div { border: 1px solid white; }
	#my-construction .welcome figure div:nth-of-type(1) { border-right: 1px solid #ebebeb; border-bottom: 1px solid #ebebeb; }
	#my-construction .welcome figure div:nth-of-type(2) { border-bottom: 1px solid #ebebeb; }
	#my-construction .welcome figure div:nth-of-type(3) { border-right: 1px solid #ebebeb; }
  #my-construction .welcome figure div:nth-child(4) { width: 219px; border-right: 1px solid #fff; }
	#footer > div { width: 100%; }	
  #my-construction.construction-site .construction-details { max-width: 900px; }
  .construction-details .second-col { padding: 5px 15px 3px 15px; width: 280px; }
}
@media screen and (max-width: 1024px) {
  #my-construction.construction-site .construction-details  { max-width: 730px; padding: 20px 0; }
  #my-construction.construction-site .construction-details header { margin: 0 20px; }
	.construction-site .content { height: 180px; margin: 0 20px; }
	.construction-site .content .left-col { width: 230px; height: 130px; }
	.construction-site .content .left-col img { width: 230px; height: auto; }
  .construction-details .second-col { padding: 0 10px 3px 10px; width: 265px; height: 110px; }
  .construction-details .second-col div { height: 60px; line-height: 1.5; }
  .construction-details .third-col { height: 105px; padding: 0 15px 3px 15px; }
  .construction-details .third-col div { height: 23px; }
  #my-construction.construction-site header h2 { margin-bottom: 100px; line-height: 1; }
  #my-construction .stages header #mc-search-form { top: 130px; }
}
@media screen and (max-width: 830px) {
	article.archive ul { width: 270px !important; }
	#my-construction .stages .filters { height: auto; font-size: 16px; }
  #my-construction .stages .filters .sort { display: block; float: none; width: 350px; margin: auto auto 5px auto; }
	#my-construction .stages .filters .province { display: block; float: none; width: 350px; margin: auto; }
  #my-construction.construction-site .construction-details  { max-width: 370px; }
	.construction-site .content { margin-bottom: 20px; height: auto; width: 88%; }
  .construction-site .content .left-col { height: auto; float: none; width: 100%; }  
  .construction-site .content .left-col img { width: 100%; height: auto; }
	.construction-site .content .right-col { width: 100%; height: auto; padding: 0; float: none; }
  .construction-details .second-col { width: 100%; padding: 0; height: auto; float: none; }
  .construction-details .second-col p { padding: 5px; margin: 0; }
  .construction-details .second-col div { height: auto; text-align: justify; padding: 0; }
  .construction-details .third-col { border-left: 0; padding: 10px 0 0 0; margin: auto; float: none; width: 150px; height: auto; }
  .construction-details .third-col div { height: 30px; }
  .construction-details .fourth-col { width: 290px; }
  .construction-details .fourth-col .slider { width: 200px; }
  #progress-slider-box { width: 150px; }
  #progress-slider { width: 133px; }
  .construction-details .fourth-col .stage-text { position: relative; left: -8px; }
  #my-construction.construction-site .construction-details header img { margin-right: 5px; }
  #my-construction.construction-site .construction-details header h1 { padding: 0; margin-top: 5px; line-height: 1.1; }
  #my-construction.construction-site .construction-details header .popularity { top: -20px; }
  #my-construction .stages header #mc-search-form { right: 50%; margin-right: -182px; }
  #project .breadcrumbs, #project nav#next-prev .info  { width: 360px; }
}
@media screen and (max-width: 700px) {
	#my-construction .welcome figure { width: 244px; border-top-width: 0; }
	#my-construction .welcome figure div:nth-of-type(1), #my-construction .welcome figure div:nth-of-type(2), #my-construction .welcome figure div:nth-of-type(3) { border-right: 1px solid #fff; border-bottom: 1px solid #ebebeb; }
}
@media screen and (max-width: 390px) {
  #my-construction .stages header #mc-search-form { width: 95%; right: auto; margin-right: 0; left: 0; }
  #my-construction .stages header #mc-search-form input { width: 80%; }
  #my-construction .stages h1 { font-size: 42px; }
  #my-construction .stages .filters .sort, #my-construction .stages .filters .province { width: auto; }
  #my-construction .stages .filters .sort select, #my-construction .stages .filters .province select { display: block; }
}


.twentytwenty-horizontal .twentytwenty-handle:before, .twentytwenty-horizontal .twentytwenty-handle:after, .twentytwenty-vertical .twentytwenty-handle:before, .twentytwenty-vertical .twentytwenty-handle:after {
  content: " ";
  display: block;
  background: white;
  position: absolute;
  z-index: 30;
  -webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
  -moz-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
  box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); }

.twentytwenty-horizontal .twentytwenty-handle:before, .twentytwenty-horizontal .twentytwenty-handle:after {
  width: 3px;
  height: 9999px;
  left: 50%;
  margin-left: -1.5px; }

.twentytwenty-vertical .twentytwenty-handle:before, .twentytwenty-vertical .twentytwenty-handle:after {
  width: 9999px;
  height: 3px;
  top: 50%;
  margin-top: -1.5px; }

.twentytwenty-before-label, .twentytwenty-after-label, .twentytwenty-overlay {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%; }

.twentytwenty-before-label, .twentytwenty-after-label, .twentytwenty-overlay {
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  transition-duration: 0.5s; }

.twentytwenty-before-label, .twentytwenty-after-label {
  -webkit-transition-property: opacity;
  -moz-transition-property: opacity;
  transition-property: opacity; }

.twentytwenty-before-label:before, .twentytwenty-after-label:before {
  color: white;
  font-size: 13px;
  letter-spacing: 0.1em; }

.twentytwenty-before-label:before, .twentytwenty-after-label:before {
  position: absolute;
  background: rgba(255, 255, 255, 0.2);
  line-height: 38px;
  padding: 0 20px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px; }

.twentytwenty-horizontal .twentytwenty-before-label:before, .twentytwenty-horizontal .twentytwenty-after-label:before {
  top: 50%;
  margin-top: -19px; }

.twentytwenty-vertical .twentytwenty-before-label:before, .twentytwenty-vertical .twentytwenty-after-label:before {
  left: 50%;
  margin-left: -45px;
  text-align: center;
  width: 90px; }

.twentytwenty-left-arrow, .twentytwenty-right-arrow, .twentytwenty-up-arrow, .twentytwenty-down-arrow {
  width: 0;
  height: 0;
  border: 6px inset transparent;
  position: absolute; }

.twentytwenty-left-arrow, .twentytwenty-right-arrow {
  top: 50%;
  margin-top: -6px; }

.twentytwenty-up-arrow, .twentytwenty-down-arrow {
  left: 50%;
  margin-left: -6px; }

.twentytwenty-container {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  z-index: 0;
  overflow: hidden;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none; }
  .twentytwenty-container img {
    max-width: 100%;
    position: absolute;
    top: 0;
    display: block; }
  .twentytwenty-container.active .twentytwenty-overlay, .twentytwenty-container.active :hover.twentytwenty-overlay {
    background: rgba(0, 0, 0, 0); }
    .twentytwenty-container.active .twentytwenty-overlay .twentytwenty-before-label,
    .twentytwenty-container.active .twentytwenty-overlay .twentytwenty-after-label, .twentytwenty-container.active :hover.twentytwenty-overlay .twentytwenty-before-label,
    .twentytwenty-container.active :hover.twentytwenty-overlay .twentytwenty-after-label {
      opacity: 0; }
  .twentytwenty-container * {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box; }

.twentytwenty-before-label {
  opacity: 0; }
  .twentytwenty-before-label:before {
    content: attr(data-content); }

.twentytwenty-after-label {
  opacity: 0; }
  .twentytwenty-after-label:before {
    content: attr(data-content); }

.twentytwenty-horizontal .twentytwenty-before-label:before {
  left: 10px; }

.twentytwenty-horizontal .twentytwenty-after-label:before {
  right: 10px; }

.twentytwenty-vertical .twentytwenty-before-label:before {
  top: 10px; }

.twentytwenty-vertical .twentytwenty-after-label:before {
  bottom: 10px; }

.twentytwenty-overlay {
  -webkit-transition-property: background;
  -moz-transition-property: background;
  transition-property: background;
  background: rgba(0, 0, 0, 0);
  z-index: 25; }
  .twentytwenty-overlay:hover {
    background: rgba(0, 0, 0, 0.5); }
    .twentytwenty-overlay:hover .twentytwenty-after-label {
      opacity: 1; }
    .twentytwenty-overlay:hover .twentytwenty-before-label {
      opacity: 1; }

.twentytwenty-before {
  z-index: 20; }

.twentytwenty-after {
  z-index: 10; }

.twentytwenty-handle {
  height: 38px;
  width: 38px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -22px;
  margin-top: -22px;
  border: 3px solid white;
  -webkit-border-radius: 1000px;
  -moz-border-radius: 1000px;
  border-radius: 1000px;
  -webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
  -moz-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
  box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
  z-index: 40;
  cursor: pointer; }

.twentytwenty-horizontal .twentytwenty-handle:before {
  bottom: 50%;
  margin-bottom: 22px;
  -webkit-box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
  -moz-box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
  box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }
.twentytwenty-horizontal .twentytwenty-handle:after {
  top: 50%;
  margin-top: 22px;
  -webkit-box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
  -moz-box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
  box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }

.twentytwenty-vertical .twentytwenty-handle:before {
  left: 50%;
  margin-left: 22px;
  -webkit-box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
  -moz-box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
  box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }
.twentytwenty-vertical .twentytwenty-handle:after {
  right: 50%;
  margin-right: 22px;
  -webkit-box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
  -moz-box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
  box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }

.twentytwenty-left-arrow {
  border-right: 6px solid white;
  left: 50%;
  margin-left: -17px; }

.twentytwenty-right-arrow {
  border-left: 6px solid white;
  right: 50%;
  margin-right: -17px; }

.twentytwenty-up-arrow {
  border-bottom: 6px solid white;
  top: 50%;
  margin-top: -17px; }

.twentytwenty-down-arrow {
  border-top: 6px solid white;
  bottom: 50%;
  margin-bottom: -17px; }