@charset "UTF-8";
/**
* @file common.css
* @author @BabaninFV (IWT Lab.)
* @createDate 2014/07/07
* @lastChange 2014/11/24
* @version 2.0
*/

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 149px;
  margin-top: 100px;
}

html, body {
  font-family: 'Proxima Nova Regular';
  color: #000;
}

a:hover {
  text-decoration: none;
}

p {
  line-height: 1.5;
  margin-bottom: 15px;
}

.brackets-sym:before {
  content: "(";
}

.brackets-sym:after {
  content: ")";
}

.brackets-sym-top:before,
.brackets-sym-top:after {
  position: relative;
  top: -3px;
}

.wrapper {
  width: 1170px;
  margin: 0 auto;
}

.wrapper-gap {
  padding-top: 50px;
  padding-bottom: 64px;
}

.wrapper-gap-top {
  padding-top: 50px;
}

.pad-panel {
  padding: 10px 20px;
}

.section-divider {
  border-bottom: 1px solid #999;
  margin-bottom: 30px;
  padding-bottom: 30px;
}

.section-header {
  text-transform: uppercase;
  font-size: 30pt;
  font-family: 'Proxima Nova Condensed Bold';
  margin-bottom: 30px;
}

.section-header-info {
  margin-bottom: 15px;
}

.section-header-info-title {
  text-transform: uppercase;
  font-size: 30px;
  font-family: 'Proxima Nova Bold';
  margin-bottom: 10px;
}

.section-header-info-field {
  margin-bottom: 15px;
}

.section-header-info-label {
  color: #555;
}

.section-header-info-value {
  color: #000;
}

.section-header-actions {
  float: right;
  margin-top: -8px;
}

.header-action {
  font-family: 'Proxima Nova Regular';
  font-size: 20px;
  font-style: normal;
  text-transform: none;
  color: #00aeef;
}

.section-content img {
  max-width: 100%;
}

.section-content-right-sidebar-270 {
  padding-right: 300px;
  position: relative;
  overflow: hidden;
}

.body-fade-panel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 8;
}

.breadcrumbs {
  margin-bottom: 40px;
  text-transform: uppercase;
  font-size: 20px;
  font-family: 'Proxima Nova Condensed Bold';
}

.breadcrumbs-item {
  color: #000;
}

.breadcrumbs-divider:after {
  content: "/";
}

span.breadcrumbs-item {
  color: #555;
}

.right-sidebar-270 {
  float: right;
  position: relative;
  margin-right: -300px;
  width: 270px;
}

.ad-item-cnt {
  margin-bottom: 30px;
  text-align: center;
}

.ad-item-cnt:last-child {
  margin-bottom: 0;
}

.ad-item {
  display: block;
}

.ad-item img {
  max-width: 100%;
}
/* widgets */
.widget {
  margin-top: 45px;
}

.widget-top-null {
  margin-top: 0;
}

.widget-title {
  text-transform: uppercase;
  font-size: 20px;
  margin-bottom: 25px;
}

.widget-with-small-image {
  padding-left: 70px;
  position: relative;
  min-height: 60px;
}

.widget-image-small {
  float: left;
  margin-left: -70px;
}

/* widget comments */
.widget-comments-cnt {
  border-bottom: 1px solid #999;
  padding-bottom: 30px;
  margin-bottom: 30px;
}

.widget-comments-item-cnt {
  margin-bottom: 30px;
}

.widget-comments-item-cnt:last-child {
  margin-bottom: 0;
}

.widget-comment-info-cnt {
  margin-bottom: 12px;
}

.widget-comment-author {
  color: #000;
}

.widget-comment-date {
  color: #999;
  font-size: 14px;
}

.widget-comment-textarea {
  border: none;
}

.widget-comment-textarea-cnt {
  border: 2px solid #999;
  border-radius: 4px;
  padding: 3px 6px;
  position: relative;
}

.widget-comment-textarea-cnt:before {
  content: "";
  position: absolute;
  left: -10px;
  top: 10px;
  z-index: 0;

  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 8px 8px 0;
  border-color: transparent #999999 transparent transparent;

}

.widget-comment-textarea-cnt:after {
  content: "";
  position: absolute;
  top: 11px;
  left: -7px;
  z-index: 1;
  
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 7px 7px 0;
  border-color: transparent #ffffff transparent transparent;
}

.widget-comment-textarea {
  min-height: 50px;
  min-width: 100%;
  max-width: 100%;
  font-family: 'Proxima Nova Regular';
  font-size: 16px;
}

/* widget going */
.widget-going-cnt {
  border-bottom: 1px solid #999;
  margin-bottom: 15px;
}

.widget-going-item {
  clear: both;
  display: inline-block;
  height: 32px;
  margin-bottom: 20px;
  margin-right: 20px;
}

.widget-going-avatar {
  display: inline-block;
  height: 32px;
  width: 32px;
  vertical-align: middle;
  margin-right: 5px;
}

.widget-going-nick {
  color: #000;
  vertical-align: middle;
}

/* ctrls */
.button {
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  display: block;
}

.button-box {
  color: #fff;
  border-width: 3px;
  border-style: solid;
  padding: 10px 18px 8px;
}

.button-box-blue {
  color: #00aeef;
}

.shadow-black-bottom {
  text-shadow: 0 3px 0 #000;
}

/* buttons */
.ro-button {
  font-family: 'Proxima Nova';
  border: 2px solid #00aeef;
  border-radius: 4px;
  display: inline-block;
  padding: 6px 20px 5px;
  text-align: center;
  text-decoration: none;
  position: relative;
  background-color: #fff;
  font-size: 16px;
  cursor: pointer;
  color: #000;
  -webkit-transition: background-color .15s ease;
  -moz-transition: background-color .15s ease;
  -ms-transition: background-color .15s ease;
  -o-transition: background-color .15s ease;
  transition: background-color .15s ease;
}

.ro-button-trans {
  background: none;
}

.ro-button-small {
  padding: 2px 5px;
}

.ro-button-med {
  padding: 11px 20px 9px;
  font-size: 14px;
}

.ro-button-large {
  padding: 12px 50px 10px;
}

.ro-button-block {
  display: block;
}

.ro-button-cyan {
  color: #00aeef;
}

.ro-button-cyan-w-bg {
  color: #fff;
  border-color: #00aeef;
  background-color: #00aeef;
}

.ro-button-lightblue {
  background-color: #d0f2ff;
  border-color: #d0f2ff;
}

.ro-button-cyan-inv {
  background-color: #00aeef;
  color: #fff;
  font-size: 14px;
  padding-top: 11px;
  padding-bottom: 9px;
}

.ro-button-cyan-inv:hover {
  background-color: #d0f2ff !important;
  /*border-color: #d0f2ff !important;*/
  color: #000 !important;
}

.ro-button-fw {
  padding-left: 0;
  padding-right: 0;
  width: 100%;
}

.ro-button-active,
.ro-button-highlight,
.ro-button:hover {
  color: #fff;
  border-color: #00aeef;
  background-color: #00aeef;
}

.ro-button-active:after {
  border-color: #00aeef transparent transparent;
  border-style: solid;
  border-width: 7px 8px 0;
  bottom: -9px;
  content: "";
  height: 0;
  left: 50%;
  margin-left: -8px;
  position: absolute;
  text-align: center;
  width: 0;
}

.ro-button-box {
  color: #fff;
  border-width: 3px;
  border-style: solid;
  padding: 10px 18px 8px;
}

/* icons */
.ico {
  background-image: url('i/s-full.png');
  display: inline-block;
  vertical-align: middle;
  position: relative;
}

.ico-close {
  background-position: 0 -58px;
  width: 32px;
  height: 32px;
}

.ico-twitter,
.ico-tw-small {
  background-position: 0 0;
  width: 26px;
  height: 26px;
}

.ico-tw-large {
  background-position: -140px 0;
  width: 39px;
  height: 38px;
}

.ico-facebook,
.ico-fb-small {
  background-position: -28px 0;
  width: 26px;
  height: 26px;
}

.ico-fb-large {
  background-position: -181px 0;
  width: 39px;
  height: 38px;
}

.ico-vkontakte,
.ico-vk-small,
.ico-vk {
  background-position: -112px 0;
  width: 26px;
  height: 26px;
}

.ico-vk-large {
  background-position: -263px 0;
  width: 39px;
  height: 38px;
}

.ico-odnoklassniki,
.ico-ok-small {
  background-position: -56px 0;
  width: 26px;
  height: 26px;
  background: url("http://clubber.ru/resources/images/vk.png") center center no-repeat;
  border-radius: 13px;
}

.ico-instagram,
.ico-ig-small {
  background-position: -84px 0;
  width: 26px;
  height: 26px;
}

.ico-ig-large {
  background-position: -222px 0;
  width: 39px;
  height: 38px;
}

.ico-gp-large {
  background-position: -304px 0;
  width: 38px;
  height: 38px;
}

.ico-arrow-up {
  background-position: 0 -43px;
  width: 17px;
  height: 10px;
}

.ico-arrow-down {
  background-position: 0 -31px;
  width: 17px;
  height: 10px;
}

.ico-eye-gray {
  background-position: 0 -95px;
  width: 24px;
  height: 12px;

  position: relative;
  top: -1px;
}

.ico-eye-darkgray {
  background-position: 0 -115px;
  width: 24px;
  height: 12px;

  position: relative;
  top: -1px;
}

.ico-eye-white {
  background-position: 0 -129px;
  width: 24px;
  height: 12px;

  position: relative;
  top: -1px;
}

.ico-comment-gray {
  background-position: -26px -95px;
  width: 19px;
  height: 18px;
}

.ico-comment-darkgray {
  background-position: -26px -115px;
  width: 19px;
  height: 18px;
}

.ico-comment-white {
  background-position: -65px -95px;
  width: 19px;
  height: 18px;
}

.ico-audio-gray {
  background-position: -47px -95px;
  width: 16px;
  height: 16px;
}

.ico-photos-darkgray {
  background-position: -93px -115px;
  width: 31px;
  height: 32px;
}

.ico-photos-cyan-big {
  background-position: 0 -231px;
  width: 44px;
  height: 45px;
}

.ico-place-cyan-big {
  background-position: -141px -231px;
  width: 45px;
  height: 38px;
}

.ico-author-darkgray {
  background-position: -65px -115px;
  width: 26px;
  height: 20px;
}

.ico-people-darkgray {
  background-position: -126px -115px;
  width: 20px;
  height: 22px;
}

.ico-people2-darkgray {
  background-position: -148px -115px;
  width: 24px;
  height: 23px;
}

.ico-people2-light-black {
  background-position: -148px -58px;
  width: 21px;
  height: 20px;
}

.ico-people2-light-gray {
  background-position: -148px -80px;
  width: 21px;
  height: 20px;
}

.ico-reload-cyan {
  background-position: -784px 0;
  width: 16px;
  height: 16px;
}

.ico-author-large-cyan {
  background-position: -98px -231px;
  width: 41px;
  height: 30px;
}

.ico-reload-white, .ico-reload-white-hover-in:hover span  {
  background-position: -784px -18px;
  width: 16px;
  height: 16px;
}

.ico-calendar,
.ico-calendar-darkgray {
  background-position: -763px 0;
  width: 19px;
  height: 20px;
}

.ico-calendar-gray {
  background-position: -763px -22px;
  width: 19px;
  height: 20px;
}

.ico-options {
  background-position: -34px -58px;
  width: 20px;
  height: 19px;
}

/* ДИЗАЙН-ЭТАЛОН-1 (п.6): звёзды оценки — 18 × 18, шаг 21 (в макете
   Friends/Predpochtenia/Sobitiya слой Shape 4 copy 4 18×18 @506/527/548/569).
   Цвет оставляем жёлтым (решение Владислава). Иконки вырезаны из спрайта 800×400
   (регион 23×23 в точке −688,−50/−25/0), поэтому спрайт сжат в 18/23 = 0.7826:
   800→626, 400→313, координаты домножены на тот же коэффициент. */
.ico-star-yellow {
  background-position: -538px -39px;
  background-size: 626px 313px;
  width: 18px;
  height: 18px;
}

.ico-star-yellow-half {
  background-position: -538px -20px;
  background-size: 626px 313px;
  width: 18px;
  height: 18px;
}

.ico-star-yellow-full {
  background-position: -538px -0;
  background-size: 626px 313px;
  width: 18px;
  height: 18px;
}

.ico-cup {
  background-position: -768px -44px;
  width: 32px;
  height: 32px;
}

.ico-rounded-blue-star {
  background-position: -660px 0;
  width: 26px;
  height: 26px;
}

.ico-rounded-white-star,
.ico-rounded-white-star-hover-in:hover span {
  background-position: -660px -28px;
  width: 26px;
  height: 26px;
}

.ico-menu-blue {
  background-position: -744px -44px;
  width: 22px;
  height: 26px;
}

.ico-menu-white,
.ico-menu-white-hover-in:hover span {
  background-position: -744px -72px;
  width: 22px;
  height: 26px;
}

.ico-food-blue {
  background-position: -776px -82px;
  width: 24px;
  height: 16px;
}

.ico-food-white,
.ico-food-white-hover-in:hover span {
  background-position: -776px -100px;
  width: 24px;
  height: 16px;
}

.ico-rounded-ruble {
  background-position: -632px 0;
  width: 26px;
  height: 26px;
}

.ico-ruble {
  background-position: -640px -34px;
  width: 11px;
  height: 12px;
}

.ico-like-white {
  background-position: -609px 0;
  width: 21px;
  height: 19px;
}

.ico-letter-white {
  background-position: -584px 0;
  width: 23px;
  height: 18px;
}

.ico-hand-up {
  background-position: -786px -118px;
  width: 14px;
  height: 14px;
}

.ico-hand-down {
  background-position: -786px -134px;
  width: 14px;
  height: 14px;
}

.ico-down-right-arrow {
  background-position: -763px -118px;
  width: 21px;
  height: 18px;
}

.ico-star-blue {
  background-position: -688px -75px;
  width: 16px;
  height: 15px;
}

.ico-star-white {
  background-position: -688px -92px;
  width: 16px;
  height: 15px;
}

.ico-zoom-white {
  background-position: -713px 0;
  width: 26px;
  height: 26px; 
}

.ico-x-white {
  background-position: -570px 0;
  width: 12px;
  height: 12px; 
}

.ico-x-cyan {
  background-position: -570px -14px;
  width: 12px;
  height: 12px; 
}

.ico-x-large-cyan {
  background-position: -568px -28px;
  width: 14px;
  height: 14px;
}

.ico-cancel {
  background-position: -56px -58px;
  width: 20px;
  height: 20px;
}

.ico-panels-darkgray {
  background-position: -174px -115px;
  width: 24px;
  height: 25px;
}

.ico-phone-darkgray {
  background-position: -200px -115px;
  width: 24px;
  height: 24px;
}

.ico-point-darkgray {
  background-position: -226px -115px;
  width: 17px;
  height: 26px;
}

.ico-threerow-white {
  background-position: -548px 0;
  width: 20px;
  height: 18px;
}

.ico-threerow-cyan {
  background-position: -526px 0;
  width: 20px;
  height: 18px;
}

.ico-cards-cyan {
  background-position: -475px 0;
  width: 21px;
  height: 21px;
}

.ico-cards-white {
  background-position: -475px -23px;
  width: 21px;
  height: 21px;
}

.ico-list-cyan {
  background-position: -498px 0;
  width: 26px;
  height: 20px;
}

.ico-list-white {
  background-position: -498px -22px;
  width: 26px;
  height: 20px;
}

.icon-type {
  display: block;
  width: 62px;
  height: 62px;
  background-position: 50% center;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

.icon-type-small {
  width: 31px;
  height: 31px;
}

.icon-type-photo {
  background-image: url('i/types/photo.png');
}

.icon-type-art {
  background-image: url('i/types/art.png');
}

.icon-type-barman {
  background-image: url('i/types/barman.png');
}

.icon-type-girl {
  background-image: url('i/types/girl.png');
}

.icon-type-boy {
  background-image: url('i/types/boy.png');
}

.icon-handsup {
  background-image: url('i/handsup.png');
  width: 77px;
  height: 104px;
}

.icon-hands {
  background-image: url('i/hands.png');
  width: 97px;
  height: 52px;
}

.icon-cake {
  background-image: url('i/cake.png');
  width: 54px;
  height: 92px;
}

.icon-idea {
  background-image: url('i/idea.png');
  width: 70px;
  height: 74px;
}

.icon-peoples {
  background-image: url('i/peoples.png');
  width: 71px;
  height: 74px;
}

.icon-site {
  background-image: url('i/site.png');
  width: 70px;
  height: 70px;
}

/* usermenu */
.usermenu-ico {
  position: relative;
  margin-left: 5px;
  z-index: 10;
}

.usermenu-cnt {
  position: absolute;
  top: 32px;
  right: -20px;
  margin-top: -15px;
  padding-top: 15px;

  display: none;
}

.usermenu-inner-cnt {
  padding: 18px 18px 20px;
  border: 2px solid #00aeef;
  border-radius: 6px;
  background-color: #000;
  position: relative;
}

.usermenu-inner-cnt:before {
  content: "";
  position: absolute;
  top: -10px;
  right: 20px;

  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 8px 9px 8px;
  border-color: transparent transparent #00aeef transparent;
}

.usermenu-inner-cnt:after {
  content: "";
  position: absolute;
  top: -7px;
  right: 22px;

  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 6px 7px 6px;
  border-color: transparent transparent #000000 transparent;
}

.usermenu-ico:hover .usermenu-cnt {
  display: block;
}

.usermenu-item {
  white-space: nowrap;
  margin-bottom: 10px;
}

.usermenu-item:last-child {
  margin-bottom: 0;
}

.usermenu-link {
 min-width: 130px;
 display: inline-block;
}

.user-notice {
  background-color: #d54330;
  border-radius: 16px;
  color: #fff;
  display: inline-block;
  margin-left: 16px;
  padding: 2px 6px;
}

/** HEADER **/
#header {
  height: 100px;
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 10;
  transition: height .15s ease;
}

.logo-image {
  background-image: url('i/logo.png');
  height: 22px;
  width: 200px;
  margin-top: 18px;
  transition: margin-top .15s ease;
}

.header-menu-cnt {
  position: relative;
}

.header-menu-compact-btn {
  border-radius: 5px;
  left: -60px;
  padding: 9px 12px;
  position: absolute;
  text-transform: uppercase;
  text-decoration: none;
  top: 8px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: top .15s ease, opacity .15s ease;
}

.header-menu-compact-btn span {
  vertical-align: middle;
}

.header-menu-compact-btn span.ico {
  margin-right: 5px;
}

.header-menu-compact-btn .ico-threerow-white {
  display: none;
}

a.header-menu-compact-btn:hover,
a.header-menu-compact-btn-active {
  color: white;
  background-color: #00aeef;
}
.header-menu-compact-btn:hover .ico-threerow-white,
.header-menu-compact-btn-active .ico-threerow-white {
  display: inline-block;
}
.header-menu-compact-btn:hover .ico-threerow-cyan,
.header-menu-compact-btn-active .ico-threerow-cyan {
  display: none;
}

.header-menu {
  width: 430px;
  transition: opacity .15s ease;
}

.header-social {
  transition: opacity .15s ease;
}

.header-menu li {
  float: left;
  width: 100px;
  margin-bottom: 10px;
}

.header-user-panel {
  width: 270px;
  position: relative;
  transition: height .15s ease;
}

.header-user-panel .userinfo {
  height: 32px;
}

.header-user-panel .yourcity {
  transition: margin .15s ease;
}

.userinfo-photo-notice {
  position: absolute;
  top: -10px;
  left: 0;
  border: 2px solid #000;
  font-size: 11px;
}

#header.header-compact {
  height: 60px;
}

.header-compact .logo-image {
  margin-top: -4px;
}

.header-compact .header-menu-compact-btn {
  display: inline;
  top: -14px;
  opacity: 1;
  visibility: visible;
}

.header-compact .header-menu,
.header-compact .header-social {
  opacity: 0;
  visibility: hidden;
}

.header-compact .header-social {
  margin-top: -50px;
}

.header-compact .header-menu.header-menu-visible {
  display: block;
}

.header-compact .header-menu {
  background-color: #000;
  border: 2px solid;
  border-radius: 5px;
  left: -60px;
  padding: 20px 20px 15px;
  position: absolute;
  top: 35px;
  z-index: 11;
}

.header-compact .header-user-panel {
  width: 600px;
  margin-top: -5px;
}

.header-compact .userinfo {
  float: right;
  margin-right: 20px;
}

.header-compact .yourcity {
  float: right;
  margin-right: 35px;
  margin-top: 6px;
}

  /** WELCOME **/
.welcome-content {
  width: 865px;
  padding-top: 55px;
}

.welcome-text {
  width: 545px;
  margin-left: 85px;
}

/* ACTUAL */
.puzzle-container {
  position: relative;
  margin-bottom: -20px;
}

.puzzle-container-actual {
  height: 460px;
}

.puzzle-item {
  display: block;
}

.puzzle-item-banner {
  height: 460px;
}

.puzzle-item-actual {
  width: 218px;
  height: 218px;
  margin-bottom: 20px;
}

.puzzle-item-actual.w2 {
  width: 456px;
}

.puzzle-item-actual.h2 {
  height: 456px;
}

.puzzle-item-actual.w2h2 {
  width: 456px;
  height: 456px;
}


.puzzle-item-news,
.puzzle-item-articles {
  width: 370px;
  margin-bottom: 20px;
}

.puzzle-item-news.w2,
.puzzle-item-articles.w2 {
  width: 770px;
}

.puzzle-item-news.h2,
.puzzle-item-articles.h2 {
  height: 770px;
}

.puzzle-item-news.w2h2,
.puzzle-item-articles.w2h2 {
  width: 770px;
}

.puzzle-item-news .puzzle-item-image,
.puzzle-item-articles .puzzle-item-image {
  height: 175px;
}

.puzzle-item-news img,
.puzzle-item-articles img {
  min-width: 370px;
}

.puzzle-item-news.w2h2 .puzzle-item-image,
.puzzle-item-articles.w2h2 .puzzle-item-image {
  height: 360px;
}

.puzzle-item-news.w2h2 img,
.puzzle-item-articles.w2h2 img {
  min-width: 770px;
}

.puzzle-item-photoreports {
  width: 270px;
}

.puzzle-item-photoreports img {
  min-width: 270px;
}

.puzzle-item-photoreports .puzzle-item-image {
  height: 153px;
}

.puzzle-item-info-container {
  line-height: 25px;
}

.puzzle-item-info-container-actual {
  max-width: 360px;
  max-height: 120px;
  padding: 24px 20px 15px;
  
  position: absolute;
  bottom: 24px;
  left: 24px;
}

.puzzle-item-info-container-news,
.puzzle-item-info-container-articles,
.puzzle-item-info-container-photoreports {
  margin-top: 13px;
}

.puzzle-item-info-container-full {
  max-width: none;
  max-height: none;

  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  line-height: 20px;
  text-align: center;
}

.puzzle-item-info-container-bottom {
  max-width: none;
  max-height: none;

  left: 0;
  right: 0;
  bottom: 0;

  line-height: 20px;
}

.puzzle-item-title {
  font-size: 15pt;
  display: block;
}

.puzzle-item-actual .puzzle-item-title {
  text-shadow: 0 3px 0 #000;
}

.puzzle-item-title-small {
  font-size: 12pt;
}

.puzzle-item-info-container-full .puzzle-item-info-date,
.puzzle-item-info-container-bottom .puzzle-item-info-date {
  margin-right: 0;
  display: block;
}

.puzzle-item-info-container-full .puzzle-item-info-container-data {
  display: table-cell;
  vertical-align: bottom;
  height: 179px;
}

.puzzle-item-info-container-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000;
  opacity: .5;
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
}

.puzzle-item-image {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: block;
}

.puzzle-item.h2 .puzzle-item-image img {
  height: 100%;
}

.puzzle-item.w2 .puzzle-item-image img {
  width: 100%;
}

/* EVENTS */
.events-scrollbox {
  height: 537px;
}

.events-scrollbox-item {
  width: 240px;
}

.events-scrollbox-item:last-child,
.events-scrollbox-days:last-child {
  margin-right: 0;
}

.events-scrollbox-item-cover {
  overflow: hidden;
  width: 240px;
  height: 340px;
}

.events-scrollbox-item-cover img {
  height: 340px;
}

/* EVENT */
.event-image {
  max-width: 470px;
  padding-right: 30px;
}

/* PLACES */
.places-scrollbox {
  height: 410px;
}

.places-scrollbox-item {
  width: 240px;
}

.places-scrollbox-item:last-child,
.places-scrollbox-days:last-child {
  margin-right: 0;
}

.places-scrollbox-item-cover {
  width: 240px;
  height: 240px;
  overflow: hidden;
}

.places-scrollbox-item-cover img {
  min-height: 240px;
}

/* MUSIC */
.music-scrollbox {
  height: 280px;
}

.music-item {
  width: 218px;
  height: 218px;
}

.music-item-med {
  width: 204px;
  height: 204px;
}

.music-item:last-child,
.music-scrollbox-days:last-child {
  margin-right: 0;
}

.music-item-hover-container {
  background-color: rgba(26,46,53,0.75);
}

.music-item-med .music-item-hover-container {
  font-size: 15px;
  padding-top: 25px;
}

.music-item-title {
  padding: 0 15px;
}

.music-item-med .music-item-title {
  margin-bottom: 10px;
}

.music-circle-player {
  position: relative;
  height: 74px;
  width: 74px;
  margin: 0 auto;
}

.music-item img {
  width: 218px;
}

.music-item-med img {
  width: 204px;
}

/* PHOTOS */
.album-container {
  margin-bottom: 40px;
}

.album-container:last-child {
  margin-bottom: 0;
}

.album-header-container {
  /*height: 40px;*/
}

.album-content-container {
  height: 300px;
}

.album-cover-container {
  width: 530px;
  height: 300px;
  float: left;
}

.album-photos-container {
  height: 300px;
  overflow: hidden;
}

.album-photos-item {
  width: 140px;
  height: 140px;
  overflow: hidden;
  float:left;
  margin-left: 20px;
  margin-bottom: 20px;
  display: block;
}

/* PHOTOS PAGE */
.photoreport-day-cnt {
  margin-bottom: 60px;
}

.photoreport-day-cnt:last-child {
  margin-bottom: 0;
}

.photoreport-day-title {
  font-family: 'Proxima Nova Bold';
  font-size: 23pt;
  text-transform: uppercase;
  border-bottom: 2px solid #999;
  padding-bottom: 17px;
  margin-bottom: 30px;
}

/* NEW PERSONES */
.persones-container {
  height: 180px;
}

.persones-item {
  width: 180px;
  height: 180px;
  display: block;
  float: left;
  margin-right: 18px;
  overflow: hidden;
  position: relative;
}

.persones-item-small {
  width: 140px;
  font-size: 14px;
  margin-right: 31px;
}

.persones-item:last-child {
  margin-right: 0;
}

.persones-item-hover-container {
  display: none;
  background-color: rgba(0,28,39, 0.75);
  z-index: 1;
}

.persones-item:hover .persones-item-hover-container {
  display: block;
}

.persones-item-image {
  display: block;
  background-size: cover;
  background-position: top center;
  height: 180px;
  position: relative;
}

.persones-item-image-small {
  height: 140px;
}

.persones-item-line {
  bottom: 0;
  left: 0;
  position: absolute;
  top: 0;
  width: 5px;
}

.persones-item-line-green {
  background-color: #a4ff04;
}

.persones-item-line-blue {
  background-color: #3301ff;
}

.persones-item-line-purple {
  background-color: #592673;
}

.persones-item-line-cadeblue {
  background-color: #27dce5;
}

.persones-item-line-lightblue {
  background-color: #00b6ff;
}

.persones-item-info {
  line-height: 1.4;
  margin-top: 12px;
}

.persones-item-info-alias {
  text-transform: uppercase;
  color: white;
}

/* CONTACTS */
.contacts-cell {
  padding-left: 120px;
  position: relative;
}

.contacts-cell-cnt {
  width: 300px;
}

/* ABOUT */
.about-image-cnt {
  max-height: 520px;
  overflow: hidden;
  width: 100%;
}

/* ARICLES PAGE */
.filter-panel {
  margin-bottom: 25px;
}

.filter-panel-divider {
  border-bottom: 1px solid #d0d0d0;
}

.filter-panel-item {
  margin-right: 18px;
  margin-bottom: 20px;
}

/* PLACE PAGE */
.slider-cnt,
.slider-cnt-item {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.slider-cnt-item {
  background-size: cover;
  background-position: top center;
}

.info-cnt {
  width: 400px;
  position: relative;
  z-index: 1;
}

.info-cnt-title-name {
  font-family: "Proxima Nova Bold";
  font-size: 30px;
  text-transform: uppercase;
  color: #fff;
  line-height: .83;
}

.info-cnt-title-type {
  color: #acacac;
}

.info-cnt-rang {
  background-color: #00121a;
  color: #ffc20e;
}

.info-cnt-rang a {
  color: #ffc20e;
}

.info-cnt-rang-stars-item {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 3px;   /* ДИЗАЙН-ЭТАЛОН-1: шаг 21 = 18 + 3 */
  vertical-align: baseline;
}

.info-cnt-rang-stars-item:last-child {
  margin-right: 0;
}

.info-cnt-links {
  padding: 30px 52px 25px;
}

.info-cnt-links-item {
  background: none;
  height: 26px;
  line-height: 31px;
  margin-bottom: 17px;
  padding: 6px 0 8px;
}

.info-cnt-links-item:last-child {
  margin-bottom: 0;
}

.info-cnt-price {
  text-align: center;
  color: #fff;
}

.info-cnt-social {
  padding: 35px 65px;
}

.info-cnt-social a {
  color: #fff;
  font-size: 14px;
}

/* NEW REVIEW */
.newReview-form-input-cnt {
  border: 2px solid #afafaf;
  border-radius: 5px;
  padding: 7px 10px;
  position: relative;
  margin-bottom: 20px;
  background-color: #fff;
}

.newReview-form-input-cnt:before {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 10px 0;
  border-color: #afafaf transparent transparent transparent;
  content: "";
  position: absolute;
  left: 15px;
  bottom: -10px;
}

.newReview-form-input-cnt:after {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 7px 0;
  border-color: #ffffff transparent transparent transparent;
  content: "";
  position: absolute;
  left: 18px;
  bottom: -7px;
}

.newReview-input {
  font-family: "Proxima Nova Regular";
  font-size: 16px;
  width: 100%;
  border: none;
}

input.newReview-input:-moz-placeholder,
input.newReview-input::-moz-placeholder {
  font-style: italic !important;
  opacity: 0.3;
}

input.newReview-input::-webkit-input-placeholder {
  font-style: italic !important;
  opacity: 0.3;
}

input.newReview-input:-ms-input-placeholder {
  font-style: italic !important;
  opacity: 0.3;
}

/* REVIEWS */
.review-item-cnt {
  padding-bottom: 24px;
  background: url('i/div.gif') repeat-x 0 100%;
  margin-bottom: 29px;
}

.review-item-cnt:last-child {
  margin-bottom: 0;
}

.review-item-text {
  width: 654px;
  padding: 14px 15px 15px 19px;
  border-radius: 3px;
  border: 2px solid #afafaf;
  margin-bottom: 15px;
  position: relative;
  line-height: 1.25;
}

.review-item-text:before {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 10px 0;
  border-color: #afafaf transparent transparent transparent;
  content: "";
  position: absolute;
  left: 15px;
  bottom: -10px;
}

.review-item-text:after {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 7px 0;
  border-color: #ffffff transparent transparent transparent;
  content: "";
  position: absolute;
  left: 18px;
  bottom: -7px;
}

.review-item-text-up {
  text-indent: 20px;
  border-color: #0ba14b;
}

.review-item-text-up:before {
  border-color: #0ba14b transparent transparent transparent;
}

.review-item-text-down {
  text-indent: 20px;
  border-color: #c2493c;
}

.review-item-text-down:before {
  border-color: #c2493c transparent transparent transparent;
}

.review-item-status {
  left: 19px;
  margin-top: 2px;
  position: absolute;
}

.review-answer-cnt {
  margin-top: 24px;
  padding-left: 60px;
  position: relative;
}

.review-answer-ico {
  position: absolute;
  top: 0;
  left: 24px;
}

/* album item */
.album-item {
  width: 190px;
  height: 142px;
  position: relative;
  margin-right: 37px;
  margin-bottom: 30px;
  overflow: hidden;
  float: left;
}

.album-item-link {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  z-index: 1;
}

.album-item-info-cnt {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,28,39,0.75);
  color: #fff;
  padding: 5px 10px;
  transition: all 0.1s ease;
}

.album-item:hover .album-item-info-cnt {
  transform: translate(0,50px);
}

.album-item-count {
  float: left;
}

.album-item-count:after {
  content: ".";
}

.album-item-comments {
  float: right;
}

.album-item-views {
  float: right;
}

.album-item-remove {
  display: block;
  width: 12px;
  height: 12px;
  background: url('i/s-full.png') no-repeat -570px 0;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
}

.album-item-remove:before {
  content: "удалить";
  position: absolute;
  color: #fff;
  left: -65px;
  top: -30px;
  transition: all 0.1s ease;
}

.album-item-remove:hover:before {
  transform: translate(0,27px);
}

/* FILTERS */
.filter-panel-cnt {
  margin-bottom: 25px;
}

.filter-panel {
  position: relative;
}

.filter-panel-title {
  font-family: 'Proxima Nova Bold';
  font-size: 20px;
  margin-bottom: 13px;
}

.filter-panel-divider {
  border-bottom: 1px solid #d0d0d0;
}

.filter-panel-item {
  margin-right: 18px;
  margin-bottom: 20px;
}

.filter-panel-dropdown {
  position: absolute;
  display: inline-block;
  padding-top: 10px;
  z-index: 10;
}

.filter-panel-dropdown-cnt {
  border-radius: 5px;
  border: 3px solid #00aeef;
  background-color: #fff;
  padding: 6px;

  min-width: 100px;
  min-height: 50px;
}

.filter-panel-dropdown-arrow-top {
  position: absolute;
  margin-left: 20px;
  top: 0;
  left: 0;
}

.filter-panel-dropdown-arrow-top:before {
  content: "";
  position: absolute;
  top: 2px;
  right: 0;

  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 8px 9px 8px;
  border-color: transparent transparent #00aeef transparent;
}

.filter-panel-dropdown-arrow-top:after {
  content: "";
  position: absolute;
  top: 6px;
  right: 2px;

  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 6px 7px 6px;
  border-color: transparent transparent #ffffff transparent;
}

.filter-panel-dropdown-col {
  display: inline-block;
}

.filter-panel-dropdown-col-item {
  padding: 7px 43px 7px 16px;
  cursor: pointer;
}

.filter-panel-dropdown-col-item-active,
.filter-panel-dropdown-col-item:hover {
  background-color: #00aeef;
  color: #fff;
  position: relative;
}

.filter-panel-dropdown-col-item-active:after {
  content: "";
  background-image: url('i/s-full.png');
  background-position: -741px -22px;
  height: 20px;
  width: 20px;
  display: block;
  position: absolute;
  right: 12px;
  top: 5px;
}

.filter-panel-select {
  margin: 20px 16px;
  position: relative;
}

.filter-panel-select-input-cnt {
  border: 2px solid #00aeef;
  padding: 6px 78px 7px 10px;
  border-radius: 3px;
  position: relative;
}

input.filter-panel-select-input {
  width: 99%;
  border: none;
  font-style: normal;
  font-family: 'Proxima Nova Regular';
  font-size: 16px;
}

.filter-panel-side-filter {
  float: left;
}

.filter-panel-side-sort {
  float: right;
}

.filter-panel-sort-types {
  border: 2px solid #00aeef;
  border-radius: 5px;
}

.filter-panel-sort-types-item {
  display: table-cell;
  color: #000;
  padding: 2px 8px;
  text-decoration: none;
  transition: background-color 0.15s ease 0s;
}

.filter-panel-sort-types-item-active {
  color: #fff !important;
  background-color: #00aeef !important;
}

.filter-panel-sort-types-item:hover {
  background-color: #d0f2ff;
}

.filter-panel-sort-types-item .ico {
  margin-right: 9px;
  top: -1px;
}

.filter-panel-sort-types-item-active.filter-panel-sort-types-item-cards .ico {
  background-position: -475px -23px;
}

.filter-panel-sort-types-item-active.filter-panel-sort-types-item-list .ico {
  background-position: -498px -22px;
}

.filter-panel-sort-types-item span:last-child {
  line-height: 1.5;
}

/* placeholder */
input.filter-panel-select-input:-moz-placeholder,
input.filter-panel-select-input::-moz-placeholder {
  font-style: italic !important;
  opacity: 0.3;
}

input.filter-panel-select-input::-webkit-input-placeholder {
  font-style: italic !important;
  opacity: 0.3;
}

input.filter-panel-select-input:-ms-input-placeholder {
  font-style: italic !important;
  opacity: 0.3;
}

.filter-panel-select-results-cnt {
  background-color: #fff;
  border: 1px solid #00aeef;
  position: absolute;
  top: 38px;
  left: 0;
  right: 77px;
  padding: 4px;
  z-index: 1;
}

.filter-panel-select-results-cnt-item {
  padding: 8px 6px 7px;
  cursor: pointer;
}

.filter-panel-select-results-cnt-item-active,
.filter-panel-select-results-cnt-item:hover {
  background-color: #7fd6f7;
}
/* / placeholder */

.filter-panel-select-submit {
  position: absolute;
  right: 0;
  top: 0;

  background-color: #00aeef;
  border: 0;
  cursor: pointer;
  padding: 4px 22px;
}

.filter-action {
  margin-bottom: -2px;
  margin-top: -5px;
}

/* FOOTER */
footer {
  width: 100%;
  position: absolute;
  bottom: 0;
  height: 149px;
}

#footer .wrapper {
  padding: 27px 0 35px;
}

.footer-logo {
  background: url(i/logo.png) no-repeat 0 0;
  width: 200px;
  height: 22px;
}

.footer-info-container {
  padding-right: 140px;
}

.footer-contacts-container {
  width: 228px;
  padding-left: 45px;
}

.footer-menu {
  float: left;
}

.footer-menu-item {
  margin-bottom: 13px;
}

/* debug */
#welcome {
  height: 360px;
}

/* MESTA-7: карта в карточке заведения (OpenStreetMap, без ключей API) */
.place-map {
  margin: 10px 0 20px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 3px;
  overflow: hidden;
  background-color: #0f1a20;
}

.place-map iframe {
  display: block;
  width: 100%;
  height: 260px;
  border: 0;
}

.place-map-link {
  display: block;
  padding: 8px 12px;
  background-color: rgba(0, 0, 0, .35);
  color: #00aeef;
  font-size: 13px;
  text-decoration: none;
}

.place-map-link:hover {
  color: #fff;
}

.place-map-hint {
  margin-top: 6px;
  color: rgba(255, 255, 255, .6);
  font-size: 12px;
}