доверстаны data-time

css/main.css

@@ -35,7 +35,7 @@ body, html {
     float: right;
 }
 .hide {
-    opacity: 0.8;
+    opacity: 0.85;
 }
 /*---------------------------------------------------------------------------------------------*/
 .navbar-1 {
@@ -289,12 +289,6 @@ p.header-2__time-1, p.header-2__time-2 {
 .data-time__container button {
     float: right;
 }
-.data-time__1, .data-time__2 {
-   color: #80bf44;
-}
-.data-time__3, .data-time__4 {
-    color: #2417db;
-}
 .data-time__2, .data-time__3, .data-time__4 {
     margin-top: 15px;
 }
@@ -308,7 +302,7 @@ p.header-2__time-1, p.header-2__time-2 {
     background: #eeeeee;
     border: none;
 }
-#data-time-1, #data-time-2 {
+#data-time-1, #data-time-2, #data-time-3, #data-time-4 {
     display: none;
     font-size: 16px;
     background: white;
@@ -320,7 +314,23 @@ p.header-2__time-1, p.header-2__time-2 {
     transform: rotate(45deg);
 }
 #data-time__button-1, #data-time__button-2, #data-time__button-3, #data-time__button-4 {
-    transition: all 0.5s linear;
+    transition: all 0.3s linear;
+}
+.data-time__c-block-second-name {
+    color: rgb(179, 101, 101);
+}
+.data-time-name-1, .data-time-name-2 {
+    color:rgb(128, 191, 68);
+}
+.data-time-name-3, .data-time-name-4 {
+    font-weight: bold;
+    color:#2417db;
+}
+.data-time__c-block-name {
+    color:rgb(128, 191, 68);
+}
+.data-time__c-block-name-blue {
+    color:#2417db;
 }
 .sheme {
     background-color: white;
@@ -354,6 +364,9 @@ p.header-2__time-1, p.header-2__time-2 {
     flex: 1 1 30%;
 }
 .experts__container {
+    transition: all 0.5s ease-in-out;
+    transform: translate3d(0, 30px, 0);
+    opacity: 0;
     padding-top: 90px;
     padding-bottom: 30px;
     width: 20%;
@@ -381,6 +394,11 @@ p.header-2__time-1, p.header-2__time-2 {
     line-height: 20px;
     color: white;
 }
+ .active {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+
 .results {
     padding-top: 50px;
     padding-bottom: 20px;

js/main.js

@@ -2,9 +2,12 @@
 var buttonClose1 = document.getElementById('data-time__button-1');
 var buttonClose2 = document.getElementById('data-time__button-2');
 var dataTime1 = document.getElementById("data-time-1");
-var dataTimeContainer1 = document.getElementById("data-time-btn-1");
 var dataTime2 = document.getElementById("data-time-2");
-var dataTimeContainer2 = document.getElementById("data-time-btn-2");
+
+var buttonClose3 = document.getElementById('data-time__button-3');
+var buttonClose4 = document.getElementById('data-time__button-4');
+var dataTime3 = document.getElementById("data-time-3");
+var dataTime4 = document.getElementById("data-time-4");
 
 function showFirst(){
     if(dataTime1.style.display == "block")
@@ -30,6 +33,30 @@ function showSecond() {
         dataTime2.style.display = "block";
     }
 }
+function showThird() {
+    if(dataTime3.style.display == "block")
+    {
+        buttonClose3.classList.remove('data-time__close');
+        dataTime3.style.display = "none";
+    }
+    else
+    {
+        buttonClose3.classList.add('data-time__close');
+        dataTime3.style.display = "block";
+    }
+}
+function showFourth() {
+    if(dataTime4.style.display == "block")
+    {
+        buttonClose4.classList.remove('data-time__close');
+        dataTime4.style.display = "none";
+    }
+    else
+    {
+        buttonClose4.classList.add('data-time__close');
+        dataTime4.style.display = "block";
+    }
+}
 
 var header = document.getElementById('header1');
 var sticky = header.offsetTop;
@@ -56,12 +83,54 @@ var logotipLine = document.getElementById('logotip');
 var minusHeader = document.getElementById('navbar-1');
 function refreshContent() {
     contentHeader.style.marginTop = header.offsetHeight + 'px';
-    var size = window.screen.height - logotipLine.offsetHeight - header.offsetHeight - 0.12 * window.screen.height;
+    var size = window.innerHeight - logotipLine.offsetHeight - header.offsetHeight-10;
     contentHeader.style.height = size + 'px';
     console.log(size);
-    console.log(window.screen.height);
+    console.log(window.innerHeight);
     console.log(logotipLine.offsetHeight);
     console.log(header.offsetHeight);
 }
 
 refreshContent();
+
+var isScrolling = false;
+ 
+    window.addEventListener("scroll", throttleScroll, false);
+ 
+    function throttleScroll(e) {
+      if (isScrolling == false) {
+        window.requestAnimationFrame(function() {
+          scrolling(e);
+          isScrolling = false;
+        });
+      }
+      isScrolling = true;
+    }
+ 
+    document.addEventListener("DOMContentLoaded", scrolling, false);
+
+    var listItems = document.getElementsByClassName("experts__container");
+ 
+    function scrolling(e) {
+        for (var i = 0; i < listItems.length; i++) {
+            var listItem = listItems[i];
+     
+            if (isPartiallyVisible(listItem)) {
+              listItem.classList.add("active");
+            } else {
+              listItem.classList.remove("active");
+              
+            }
+          }
+    }
+ 
+    function isPartiallyVisible(el) {
+      var elementBoundary = el.getBoundingClientRect();
+ 
+      var top = elementBoundary.top;
+      var bottom = elementBoundary.bottom;
+      var height = elementBoundary.height;
+ 
+      return ((top + height >= 0) && (height + window.innerHeight >= bottom));
+    }
+