organization-page

app/assets/styles/_grid.scss

@@ -24,19 +24,26 @@
             & .grid-dis-col-2:last-child,
             & .grid-dis-col-3:last-child,
             & .grid-dis-col-4:last-child,
+            & .grid-dis-col-33:last-child,
+            & .grid-dis-col-66:last-child,
             & .grid-dis-col-1:nth-child(4n),
             & .grid-dis-col-2:nth-child(2n) {
                 margin: 0;
             }
         }
         &-col {
+            $gutterSize: 10px;
             &-1 {
-                width: 25%;
+                width: calc(25% - #{$gutterSize});
                 max-width: 230px;
-                margin: 0 10px 0 0;
+                margin: 0 $gutterSize 0 0;
+
+                &:last-child {
+                    width: 25%;
+                }
 
                 @media screen and (max-width: 1000px) {
-                    width: 50%;
+                    width: calc(50% - #{$gutterSize});
                     max-width: 230px;
 
                     &:last-child {
@@ -45,9 +52,13 @@
                 }
             }
             &-2 {
-                width: 50%;
+                width: calc(50% - #{$gutterSize});
                 max-width: 470px;
-                margin: 0 10px 0 0;
+                margin: 0 $gutterSize 0 0;
+
+                &:last-child {
+                    width: 50%;
+                }
 
                 @media screen and (max-width: 1000px) {
                     width: 100%;
@@ -56,9 +67,13 @@
                 }
             }
             &-3 {
-                width: 75%;
+                width: calc(75% - #{$gutterSize});
                 max-width: 710px;
-                margin: 0 10px 0 0;
+                margin: 0 $gutterSize 0 0;
+
+                &:last-child {
+                    width: 75%;
+                }
 
                 @media screen and (max-width: 1220px) {
                     width: 80%;
@@ -73,7 +88,41 @@
             &-4 {
                 width: 100%;
                 // max-width: 710px;
-                margin: 0 10px 0 0;
+                margin: 0 $gutterSize 0 0;
+
+                @media screen and (max-width: 1000px) {
+                    width: 100%;
+                    max-width: none;
+
+                    &:last-child {
+                        margin-right: 0;
+                    }
+                }
+            }
+            &-33 {
+                width: calc(33% - #{$gutterSize});
+                margin: 0 $gutterSize 0 0;
+
+                &:last-child {
+                    width: 33%;
+                }
+
+                @media screen and (max-width: 1000px) {
+                    width: 100%;
+                    max-width: none;
+
+                    &:last-child {
+                        margin-right: 0;
+                    }
+                }
+            }
+            &-66 {
+                width: calc(66% - #{$gutterSize});
+                margin: 0 $gutterSize 0 0;
+
+                &:last-child {
+                    width: 66%;
+                }
 
                 @media screen and (max-width: 1000px) {
                     width: 100%;

app/assets/styles/all.scss

@@ -57,6 +57,7 @@
 @import "content/centerbar/selectedline";
 @import "content/centerbar/specials";
 @import "content/centerbar/comments";
+@import "content/centerbar/organization";
 @import "blocks/opinion";
 //
 @import "content/centerbar/errorblock";

app/assets/styles/content/centerbar/organization.scss

@@ -0,0 +1,238 @@
+.organization-info {
+
+    &__container {
+        box-sizing: border-box;
+        border: 1px solid #ebebeb;
+        border-radius: 10px 0 0 0;
+        padding: 0 2px 0 9px;
+    }
+
+    &__header {
+        margin-bottom: 30px;
+    }
+
+    &__title {
+        font-family: $fontcuprum;
+        font-size: 32px;
+        font-weight: bold;
+        color: #004d7b;
+        padding: 3px 0 0 0;
+        margin-bottom: 5px;
+    }
+
+    &__sub-title {
+        font-family: $fontcuprum;
+        font-size: 18px;
+        font-weight: bold;
+        color: #3b434d;
+    }
+
+    &__logo {
+        margin-bottom: 3px;
+        max-width: 100%;
+        height: auto;
+    }
+
+    &__address {
+        font-size: 14px;
+        line-height: 16px;
+        text-align: center;
+        color: #929292;
+        margin-bottom: 13px;
+    }
+
+    &__map-link {
+        background: #ebebeb;
+        padding: 6px 10px;
+        text-align: center;
+        font-size: 13px;
+        margin-bottom: 10px;
+        color: #929292;
+        display: block;
+
+        &:hover {
+            background: #d2dee9;
+        }
+    }
+
+    &__contacts {
+
+        &-header {
+            font-family: $fontcuprum;
+            font-size: 13px;
+            color: #929292;
+            margin-bottom: 2px;
+            display: block;
+        }
+
+        &-phone {
+            font-family: $fontcuprum;
+            padding: 2px 0 1px 25px;
+            background: url(../img/icon_contact_01.png) no-repeat left center;
+            margin-bottom: 4px;
+            display: block;
+        }
+
+        &-show-phones {
+            font-family: $fontcuprum;
+            font-size: 13px;
+            padding-left: 4px;
+            margin-bottom: 5px;
+            text-decoration: none;
+            color: #929292;
+
+            &:after {
+                font-family: $fontcuprum;
+                content: '>';
+                display: inline-block;
+                width: 7px;
+                height: 7px;
+                margin-left: 5px;
+            }
+        }
+
+        &-email {
+            font-family: $fontcuprum;
+            padding: 2px 0 1px 25px;
+            background: url(../img/icon_contact_03.png) no-repeat left center;
+            margin-bottom: 5px;
+            color: #004d7b;
+            text-decoration: none;
+            display: block;
+        }
+
+        &-site {
+            font-family: $fontcuprum;
+            padding: 2px 0 1px 25px;
+            background: url(../img/icon_contact_02.png) no-repeat left center;
+            color: #004d7b;
+            text-decoration: none;
+            display: block;
+        }
+
+        &-workmode {
+            font-family: $fontcuprum;
+            line-height: 22px;
+            margin-bottom: 32px;
+            display: block;
+        }
+    }
+
+    &__description {
+        font-family: $fontopensans;
+        font-size: 15px;
+        line-height: 18px;
+        position: relative;
+        overflow: hidden;
+        max-height: none;
+
+        p {
+            margin: 10px 0;
+        }
+
+        &--short {
+            max-height: 100px;
+            &:after {
+                background: rgba(0, 0, 0, 0) linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 100%) repeat scroll 0 0;
+                bottom: 0;
+                content: "";
+                display: block;
+                height: 100px;
+                left: 0;
+                position: absolute;
+                right: 0;
+            }
+        }
+    }
+
+    &__description-read-more {
+        text-align: center;
+        font-family: $fontopensans;
+        font-size: 13px;
+        color: #004d7b;
+        padding-top: 3px;
+        margin-bottom: 29px;
+        cursor: pointer;
+    }
+
+    &__menu {
+        box-sizing: border-box;
+        vertical-align: top;
+        font-size: 15px;
+        margin-left: 14px;
+        margin-top: -6px;
+        padding-left: 3px;
+        border-left: 1px solid #ebebeb;
+        max-width: 230px;
+        font-family: $fontcuprum;
+
+        &-item {
+
+        }
+
+        &-link {
+            display: block;
+            padding: 7px 6px;
+            line-height: 14px;
+            color: #004d7b;
+            text-decoration: none;
+
+            &:hover {
+                background: #ebebeb;
+            }
+        }
+    }
+
+    &__show-services {
+        background: #ebebeb;
+        padding: 6px 10px;
+        text-align: center;
+        font-size: 13px;
+        margin-bottom: 10px;
+        color: #929292;
+        display: block;
+        font-family: $fontcuprum;
+        text-decoration: none;
+    }
+
+    &__documents {
+        background: #ebebeb;
+
+        td {
+            border: none;
+            padding: 5px;
+            vertical-align: top;
+            font-family: $fontopensans;
+            font-size: 13px;
+            line-height: 15px;
+            color: #3b434d;
+        }
+        tr td:first-child {
+            padding-right: 19px;
+        }
+        tr:first-child td {
+            padding-top: 10px;
+        }
+        tr:last-child td {
+            padding-bottom: 7px;
+        }
+        a {
+            display: block;
+            color: #004d7b;
+            text-decoration: none;
+            position: relative;
+            padding-left: 20px;
+        }
+        .table_icon:before {
+            content: '';
+            display: inline-block;
+            width: 13px;
+            height: 15px;
+            margin: 0 5px 0 0;
+            position: absolute;
+            top: 2px;
+            left: 0;
+            background: url(../img/icon_table_link.png);
+        }
+    }
+}

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

@@ -4,6 +4,7 @@
         line-height: 18px;
         color: #5597d1;
         height: 53px;
+        text-decoration: none;
 
         &::before {
             content: '';

app/www/css/all.css

@@ -282,25 +282,31 @@ body {
   .grid-dis-row .grid-dis-col-2:last-child,
   .grid-dis-row .grid-dis-col-3:last-child,
   .grid-dis-row .grid-dis-col-4:last-child,
+  .grid-dis-row .grid-dis-col-33:last-child,
+  .grid-dis-row .grid-dis-col-66:last-child,
   .grid-dis-row .grid-dis-col-1:nth-child(4n),
   .grid-dis-row .grid-dis-col-2:nth-child(2n) {
     margin: 0; }
 
 .grid-dis-col-1 {
-  width: 25%;
+  width: calc(25% - 10px);
   max-width: 230px;
   margin: 0 10px 0 0; }
+  .grid-dis-col-1:last-child {
+    width: 25%; }
   @media screen and (max-width: 1000px) {
     .grid-dis-col-1 {
-      width: 50%;
+      width: calc(50% - 10px);
       max-width: 230px; }
       .grid-dis-col-1:last-child {
         margin-right: 0; } }
 
 .grid-dis-col-2 {
-  width: 50%;
+  width: calc(50% - 10px);
   max-width: 470px;
   margin: 0 10px 0 0; }
+  .grid-dis-col-2:last-child {
+    width: 50%; }
   @media screen and (max-width: 1000px) {
     .grid-dis-col-2 {
       width: 100%;
@@ -308,9 +314,11 @@ body {
       max-width: none; } }
 
 .grid-dis-col-3 {
-  width: 75%;
+  width: calc(75% - 10px);
   max-width: 710px;
   margin: 0 10px 0 0; }
+  .grid-dis-col-3:last-child {
+    width: 75%; }
   @media screen and (max-width: 1220px) {
     .grid-dis-col-3 {
       width: 80%;
@@ -331,6 +339,30 @@ body {
       .grid-dis-col-4:last-child {
         margin-right: 0; } }
 
+.grid-dis-col-33 {
+  width: calc(33% - 10px);
+  margin: 0 10px 0 0; }
+  .grid-dis-col-33:last-child {
+    width: 33%; }
+  @media screen and (max-width: 1000px) {
+    .grid-dis-col-33 {
+      width: 100%;
+      max-width: none; }
+      .grid-dis-col-33:last-child {
+        margin-right: 0; } }
+
+.grid-dis-col-66 {
+  width: calc(66% - 10px);
+  margin: 0 10px 0 0; }
+  .grid-dis-col-66:last-child {
+    width: 66%; }
+  @media screen and (max-width: 1000px) {
+    .grid-dis-col-66 {
+      width: 100%;
+      max-width: none; }
+      .grid-dis-col-66:last-child {
+        margin-right: 0; } }
+
 .grid-disrb-row {
   display: -webkit-flex;
   display: -ms-flex;
@@ -1139,7 +1171,8 @@ body {
 .filterservice__title {
   line-height: 18px;
   color: #5597d1;
-  height: 53px; }
+  height: 53px;
+  text-decoration: none; }
   .filterservice__title::before {
     content: '';
     position: absolute;
@@ -2804,6 +2837,197 @@ body {
   font-size: 13px;
   color: #f00; }
 
+.organization-info__container {
+  box-sizing: border-box;
+  border: 1px solid #ebebeb;
+  border-radius: 10px 0 0 0;
+  padding: 0 2px 0 9px; }
+
+.organization-info__header {
+  margin-bottom: 30px; }
+
+.organization-info__title {
+  font-family: "cuprum", Impact, "Charcoal CY", sans-serif;
+  font-size: 32px;
+  font-weight: bold;
+  color: #004d7b;
+  padding: 3px 0 0 0;
+  margin-bottom: 5px; }
+
+.organization-info__sub-title {
+  font-family: "cuprum", Impact, "Charcoal CY", sans-serif;
+  font-size: 18px;
+  font-weight: bold;
+  color: #3b434d; }
+
+.organization-info__logo {
+  margin-bottom: 3px;
+  max-width: 100%;
+  height: auto; }
+
+.organization-info__address {
+  font-size: 14px;
+  line-height: 16px;
+  text-align: center;
+  color: #929292;
+  margin-bottom: 13px; }
+
+.organization-info__map-link {
+  background: #ebebeb;
+  padding: 6px 10px;
+  text-align: center;
+  font-size: 13px;
+  margin-bottom: 10px;
+  color: #929292;
+  display: block; }
+  .organization-info__map-link:hover {
+    background: #d2dee9; }
+
+.organization-info__contacts-header {
+  font-family: "cuprum", Impact, "Charcoal CY", sans-serif;
+  font-size: 13px;
+  color: #929292;
+  margin-bottom: 2px;
+  display: block; }
+
+.organization-info__contacts-phone {
+  font-family: "cuprum", Impact, "Charcoal CY", sans-serif;
+  padding: 2px 0 1px 25px;
+  background: url(../img/icon_contact_01.png) no-repeat left center;
+  margin-bottom: 4px;
+  display: block; }
+
+.organization-info__contacts-show-phones {
+  font-family: "cuprum", Impact, "Charcoal CY", sans-serif;
+  font-size: 13px;
+  padding-left: 4px;
+  margin-bottom: 5px;
+  text-decoration: none;
+  color: #929292; }
+  .organization-info__contacts-show-phones:after {
+    font-family: "cuprum", Impact, "Charcoal CY", sans-serif;
+    content: '>';
+    display: inline-block;
+    width: 7px;
+    height: 7px;
+    margin-left: 5px; }
+
+.organization-info__contacts-email {
+  font-family: "cuprum", Impact, "Charcoal CY", sans-serif;
+  padding: 2px 0 1px 25px;
+  background: url(../img/icon_contact_03.png) no-repeat left center;
+  margin-bottom: 5px;
+  color: #004d7b;
+  text-decoration: none;
+  display: block; }
+
+.organization-info__contacts-site {
+  font-family: "cuprum", Impact, "Charcoal CY", sans-serif;
+  padding: 2px 0 1px 25px;
+  background: url(../img/icon_contact_02.png) no-repeat left center;
+  color: #004d7b;
+  text-decoration: none;
+  display: block; }
+
+.organization-info__contacts-workmode {
+  font-family: "cuprum", Impact, "Charcoal CY", sans-serif;
+  line-height: 22px;
+  margin-bottom: 32px;
+  display: block; }
+
+.organization-info__description {
+  font-family: "opensans", Arial, "Helvetica CY", "Nimbus Sans L", sans-serif;
+  font-size: 15px;
+  line-height: 18px;
+  position: relative;
+  overflow: hidden;
+  max-height: none; }
+  .organization-info__description p {
+    margin: 10px 0; }
+  .organization-info__description--short {
+    max-height: 100px; }
+    .organization-info__description--short:after {
+      background: transparent linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, white 100%) repeat scroll 0 0;
+      bottom: 0;
+      content: "";
+      display: block;
+      height: 100px;
+      left: 0;
+      position: absolute;
+      right: 0; }
+
+.organization-info__description-read-more {
+  text-align: center;
+  font-family: "opensans", Arial, "Helvetica CY", "Nimbus Sans L", sans-serif;
+  font-size: 13px;
+  color: #004d7b;
+  padding-top: 3px;
+  margin-bottom: 29px;
+  cursor: pointer; }
+
+.organization-info__menu {
+  box-sizing: border-box;
+  vertical-align: top;
+  font-size: 15px;
+  margin-left: 14px;
+  margin-top: -6px;
+  padding-left: 3px;
+  border-left: 1px solid #ebebeb;
+  max-width: 230px;
+  font-family: "cuprum", Impact, "Charcoal CY", sans-serif; }
+  .organization-info__menu-link {
+    display: block;
+    padding: 7px 6px;
+    line-height: 14px;
+    color: #004d7b;
+    text-decoration: none; }
+    .organization-info__menu-link:hover {
+      background: #ebebeb; }
+
+.organization-info__show-services {
+  background: #ebebeb;
+  padding: 6px 10px;
+  text-align: center;
+  font-size: 13px;
+  margin-bottom: 10px;
+  color: #929292;
+  display: block;
+  font-family: "cuprum", Impact, "Charcoal CY", sans-serif;
+  text-decoration: none; }
+
+.organization-info__documents {
+  background: #ebebeb; }
+  .organization-info__documents td {
+    border: none;
+    padding: 5px;
+    vertical-align: top;
+    font-family: "opensans", Arial, "Helvetica CY", "Nimbus Sans L", sans-serif;
+    font-size: 13px;
+    line-height: 15px;
+    color: #3b434d; }
+  .organization-info__documents tr td:first-child {
+    padding-right: 19px; }
+  .organization-info__documents tr:first-child td {
+    padding-top: 10px; }
+  .organization-info__documents tr:last-child td {
+    padding-bottom: 7px; }
+  .organization-info__documents a {
+    display: block;
+    color: #004d7b;
+    text-decoration: none;
+    position: relative;
+    padding-left: 20px; }
+  .organization-info__documents .table_icon:before {
+    content: '';
+    display: inline-block;
+    width: 13px;
+    height: 15px;
+    margin: 0 5px 0 0;
+    position: absolute;
+    top: 2px;
+    left: 0;
+    background: url(../img/icon_table_link.png); }
+
 .opinion__container {
   float: right;
   width: 33%;