specialization page

app/assets/styles/all.scss

@@ -18,6 +18,7 @@
 @import "blocks/logo";
 @import "blocks/entity-badge";
 @import "blocks/organization-list";
+@import "blocks/adjacent-specialization";
 @import "blocks/map";
 //
 @import "header/header";

app/assets/styles/blocks/adjacent-specialization.scss

@@ -0,0 +1,38 @@
+.adjacent-specialization {
+    &__item {
+        &:hover {
+            background: #f0f0f0;
+        }
+    }
+
+    &__data {
+
+    }
+
+    &__title {
+        height: 20px;
+        overflow: hidden;
+        font-size: 13px;
+        font-weight: bold;
+        color: #929292;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+
+    &__value {
+        height: 29px;
+        font-size: 15px;
+        line-height: 14px;
+        font-weight: bold;
+        color: #3b434d;
+        overflow: hidden;
+    }
+
+    &__list {
+        &:before {
+            display: none;
+        }
+
+        margin: 20px 0;
+    }
+}

app/assets/styles/content/leftbar/leftbar.scss

@@ -36,6 +36,23 @@
             border-radius: 0;
             font-size: 18px;
         }
+
+        &--adjacent-specialization {
+            text-decoration: none;
+            height: 54px;
+            margin-bottom: 10px;
+            &:before {
+                position: absolute;
+                left: 2px;
+                top: 2px;
+                display: block;
+                content: '';
+                background: #fff;
+                width: 50px;
+                height: 50px;
+                border-radius: 50%;
+            }
+        }
     }
 
     &__subtitle {
@@ -87,6 +104,15 @@
         }
     }
 
+    &__item-caption {
+        line-height: 20px;
+        color: #3b434d;
+        font-size: 17px;
+        font-family: $fontcuprum;
+        font-weight: bold;
+        margin-bottom: 10px;
+    }
+
     @media screen and (max-width: 1220px) {
         width: 100%;
     }

app/www/css/all.css

@@ -679,25 +679,25 @@ body {
   z-index: 2;
   position: relative;
   background: #ffffff;
-  margin-top: 3px;
+    margin-top: 3px;
 }
   .organization-list__side-menu-item {
     border-bottom: 1px solid #ebebeb;
     position: relative; }
 
 .organization-list__side-menu-item-arrow {
-  background: url(../img/blockslide_sprite.png) 0 -9px no-repeat;
+    background: url(../img/blockslide_sprite.png) 0 -9px no-repeat;
       position: absolute;
       right: 5px;
       top: 10px;
       display: block;
-  width: 15px;
-  height: 9px;
-  cursor: pointer;
+    width: 15px;
+    height: 9px;
+    cursor: pointer;
 }
 
 .organization-list__side-menu-item.active .organization-list__side-menu-item-arrow {
-  background-position: 0 0;
+    background-position: 0 0;
 }
     .organization-list__side-menu-item.active ul {
       display: block; }
@@ -738,6 +738,37 @@ body {
       background: #004d7b;
       color: #fff; }
 
+.adjacent-specialization__item:hover {
+    background: #f0f0f0;
+}
+
+.adjacent-specialization__title {
+    height: 20px;
+    overflow: hidden;
+    font-size: 13px;
+    font-weight: bold;
+    color: #929292;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.adjacent-specialization__value {
+    height: 29px;
+    font-size: 15px;
+    line-height: 14px;
+    font-weight: bold;
+    color: #3b434d;
+    overflow: hidden;
+}
+
+.adjacent-specialization__list {
+    margin: 20px 0;
+}
+
+.adjacent-specialization__list:before {
+    display: none;
+}
+
 .map__container {
   position: absolute;
   top: 0;
@@ -913,7 +944,7 @@ body {
   display: -ms-flex;
   display: flex;
   flex-direction: column;
-  z-index: 2;
+    z-index: 2;
 }
   .leftbar__title {
     padding-left: 58px;
@@ -932,16 +963,34 @@ body {
     color: #004d7b;
     font-weight: bold;
     flex-wrap: wrap;
-    position: relative;
+      position: relative;
   }
     .leftbar__title--popularservice {
       padding-left: 10px;
       border-radius: 0; }
 
 .leftbar__title--popular-specializations {
-  padding-left: 10px;
-  border-radius: 0;
-  font-size: 18px;
+    padding-left: 10px;
+    border-radius: 0;
+    font-size: 18px;
+}
+
+.leftbar__title--adjacent-specialization {
+    text-decoration: none;
+    height: 54px;
+    margin-bottom: 10px;
+}
+
+.leftbar__title--adjacent-specialization:before {
+    position: absolute;
+    left: 2px;
+    top: 2px;
+    display: block;
+    content: '';
+    background: #fff;
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
 }
   .leftbar__subtitle {
     background: #d7d7d7;
@@ -980,6 +1029,15 @@ body {
     transform: rotate(0deg); }
     .leftbar__arrow.active {
       transform: rotate(90deg); }
+
+.leftbar__item-caption {
+    line-height: 20px;
+    color: #3b434d;
+    font-size: 17px;
+    font-family: "cuprum", Impact, "Charcoal CY", sans-serif;
+    font-weight: bold;
+    margin-bottom: 10px;
+}
   @media screen and (max-width: 1220px) {
     .leftbar {
       width: 100%; } }
@@ -1167,7 +1225,7 @@ body {
     height: 0;
     overflow: hidden;
     transition: all .5s ease;
-    background: #ffffff;
+      background: #ffffff;
   }
     .specialization__list.active {
       height: auto;
@@ -1284,7 +1342,7 @@ body {
     height: 0;
     overflow: hidden;
     transition: all .5s ease;
-    background: #ffffff;
+      background: #ffffff;
   }
     .popularservice__list.active {
       height: auto;
@@ -1394,7 +1452,7 @@ body {
   margin-bottom: 20px;
   height: 100%;
   width: calc(100% - 10px);
-  margin-left: 10px;
+    margin-left: 10px;
 }
 
 .personals__link {
@@ -1464,7 +1522,7 @@ body {
   height: calc(100% - 63px);
   display: flex;
   flex-direction: column;
-  justify-content: space-around;
+    justify-content: space-around;
 }
   .personals__details--wide {
     min-height: 23px; }
@@ -1552,11 +1610,11 @@ body {
 
 .centerbar {
   width: 78.2%;
-  z-index: 2;
+    z-index: 2;
 }
   .centerbar--with-map {
     margin-top: 300px;
-    position: relative;
+      position: relative;
   }
   @media screen and (max-width: 1220px) {
     .centerbar {
@@ -3089,7 +3147,7 @@ body {
     background: url(../img/blockslide_sprite.png) no-repeat; }
 
 .organization-info__administration-content {
-  padding-left: 10px;
+    padding-left: 10px;
 }
 
 .organization-info__sub-organizations-header {
@@ -3097,7 +3155,7 @@ body {
   font-size: 20px;
   font-weight: bold;
   color: #3b434d;
-  margin-bottom: 10px;
+    margin-bottom: 10px;
 }
 
 .organization-media__container {
@@ -3120,25 +3178,25 @@ body {
     margin-bottom: 3px;
     display: block;
     text-decoration: none;
-    color: #000000;
+      color: #000000;
   }
 
 .organization-media__list-item:hover {
-  text-decoration: underline;
+    text-decoration: underline;
 }
 
 .organization-media__slider {
   margin: 0 30px 13px;
-  width: calc(100% - 60px);
+    width: calc(100% - 60px);
 }
 
 .organization-media__slider-slide {
-  text-align: center;
+    text-align: center;
 }
 
 .organization-media__slider-slide-content {
-  max-width: 200px;
-  margin: 0 auto;
+    max-width: 200px;
+    margin: 0 auto;
 }
 
 .organization-media__slider .slick-arrow {
@@ -3148,25 +3206,25 @@ body {
     top: 50%;
     margin-top: -23px;
     cursor: pointer;
-  background-image: url(../img/slider/slidersprite.png);
+    background-image: url(../img/slider/slidersprite.png);
 }
 
 .organization-media__slider .slick-arrow.slick-prev {
-  background-position: left top;
-  left: -27px;
+    background-position: left top;
+    left: -27px;
 }
 
 .organization-media__slider .slick-arrow.slick-prev:hover {
-  background-position: left bottom;
+    background-position: left bottom;
 }
 
 .organization-media__slider .slick-arrow.slick-next {
-  background-position: right top;
-  right: -27px;
+    background-position: right top;
+    right: -27px;
 }
 
 .organization-media__slider .slick-arrow.slick-next:hover {
-  background-position: right bottom;
+    background-position: right bottom;
 }
 
 .specialization-selection__container {
@@ -3176,18 +3234,18 @@ body {
   padding: 10px;
   display: block;
   column-count: 3;
-  column-gap: 10px;
+    column-gap: 10px;
 }
 
 .specialization-selection__container:before, .specialization-selection__container:after {
     content: '';
     display: block;
-  clear: both;
+    clear: both;
 }
 
 .specialization-selection__group {
   margin: 5px 5px 5px 5px;
-  display: block;
+    display: block;
 }
 
 .specialization-selection__group:nth-child(3n) {
@@ -3198,31 +3256,31 @@ body {
 .specialization-selection__list {
   max-height: 125px;
   overflow: hidden;
-  display: block;
+    display: block;
 }
 
 .specialization-selection__list-item {
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
-  padding: 5px;
+    padding: 5px;
 }
 
 .specialization-selection__list-item label {
-  display: block;
-  font-size: 13px;
-  font-family: "opensans", Arial, "Helvetica CY", "Nimbus Sans L", sans-serif;
+    display: block;
+    font-size: 13px;
+    font-family: "opensans", Arial, "Helvetica CY", "Nimbus Sans L", sans-serif;
 }
 
 .specialization-selection__list-item--group-header {
-  background: #ebebeb;
-  padding: 7px 5px;
+    background: #ebebeb;
+    padding: 7px 5px;
 }
 
 .specialization-selection__list-item--group-header label {
-  display: block;
-  font-family: "cuprum", Impact, "Charcoal CY", sans-serif;
-  font-size: 17px;
+    display: block;
+    font-family: "cuprum", Impact, "Charcoal CY", sans-serif;
+    font-size: 17px;
 }
 
 .specialization-selection__checkbox {
@@ -3230,17 +3288,17 @@ body {
   -moz-appearance: checkbox;
   appearance: checkbox;
   display: block;
-  width: 13px !important;
+    width: 13px !important;
 }
 
 .specialization-selection__checkbox--group-header {
-  margin-top: 2px;
+    margin-top: 2px;
 }
 
 .specialization-selection__checkbox-label {
   display: block;
   width: calc(100% - 13px - 5px);
-  margin-left: 5px;
+    margin-left: 5px;
 }
 
 .specialization-selection__select-button {
@@ -3251,11 +3309,11 @@ body {
   background-color: #004D7B;
   width: calc(100% - 26px);
   padding: 10px;
-  cursor: pointer;
+    cursor: pointer;
 }
 
 .specialization-selection__select-button:hover {
-  background-color: #006dae;
+    background-color: #006dae;
 }
 
 .specialization-selection__more {
@@ -3263,30 +3321,30 @@ body {
   font-size: 13px;
   font-family: "opensans", Arial, "Helvetica CY", "Nimbus Sans L", sans-serif;
   padding-left: 18px;
-  cursor: pointer;
+    cursor: pointer;
 }
 
 .specialization-selection__more:after {
-  content: '>';
-  margin-left: 3px;
+    content: '>';
+    margin-left: 3px;
 }
 
 .specialization-selection__more:hover {
-  color: #0e3499;
-  text-decoration: underline;
+    color: #0e3499;
+    text-decoration: underline;
 }
 
 .specialization-filter__title {
   margin-bottom: 20px;
-  margin-top: 30px;
+    margin-top: 30px;
 }
 
 .specialization-filter__title:first-child {
-  margin-top: 0;
+    margin-top: 0;
 }
 
 .specialization-filter__person-link {
-  margin: 15px 0;
+    margin: 15px 0;
 }
 
 .opinion__container {
@@ -4796,7 +4854,7 @@ body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item.lg-complete .lg-object
   overflow: hidden;
   margin-left: 170px;
   box-sizing: border-box;
-  z-index: 2;
+    z-index: 2;
 }
 
 .date-picker-wrapper.inline-wrapper {
@@ -4853,7 +4911,7 @@ body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item.lg-complete .lg-object
   text-align: center;
   line-height: 30px;
   margin: 0;
-  padding: 2px 0;
+    padding: 2px 0;
 }
 
 .date-picker-wrapper .month-wrapper table .day {