add script for oll window for min-width 450px

css/styles.less

@@ -548,7 +548,7 @@ video {
   margin-bottom: 29px;
   margin-top: 4px;
 }
- /*
+/*
 .text-h2-desktop {
  font-family: SF-UI-Text-Heavy, Arial;
  font-size: 18px;
@@ -2212,7 +2212,6 @@ p.price-p {
   @media(min-width: 451px){
     width: 288px;
   }
-
 }
 .price-mobile {
   text-align: center;
@@ -2390,7 +2389,7 @@ p.price-user-part {
     margin-top: 30px;
   }
 }
-. mobile-point-active{
+. mobile-point-active {
   width: 12px;
   height: 12px;
   margin-left: 23px;
@@ -2705,24 +2704,3 @@ footer {
   position: absolute;
   display: none;
 }
-/*
-.yyy {
-  width: 12px;
-  height: 12px;
-  margin-top: 0;
-  margin-left: 23px;
-  border-radius: 50%;
-  background: #c94d4e;
-  border: #fbb5b6 5px solid;
-}
-
-
-  $('#btn-fourth-fourth').click(function(event) {
-            $('#btn-one-first').toggleClass('yyy');
-    });
-
-                            $('#btn-fourth-fourth').click(function(event) {
-            $('#btn-one-fourth').toggleClass('mobile-point');
-    });
-
-*/
\ No newline at end of file

index.html

@@ -1118,7 +1118,7 @@
 
 <div class="price-mobile-big-none">
     <!--Окошко 1-->
-    <div class="window-one price-mobile-window-none">
+    <div id="window-big-one" class="window-one price-mobile-window-none">
         <div class="price-mobile-tittle">
             <h2>Цены 1big</h2>
             <div class="price-mobile-tittle-line">
@@ -1333,7 +1333,7 @@
             </div>
         </div>
         <div class="mobile-point-wrapper">
-            <div class="mobile-point-active">
+            <div id="btn-big-one" class="mobile-point-active">
             </div>
             <div class="mobile-point">
             </div>
@@ -1345,7 +1345,7 @@
     </div>
 
 
-    <div class="window-too price-mobile-window-none">
+    <div id="window-big-too" class="window-too price-mobile-window-none">
         <div class="price-mobile-tittle">
             <h2>Цены 2big</h2>
             <div class="price-mobile-tittle-line">
@@ -1354,7 +1354,7 @@
         <div class="price-mobile-wrapper">
             <div class="price-mobile-container">
                 <img src="img/price1.png" class="mobile-img">
-                <h6>Free (Beta)</h6>
+                <h6>Standard</h6>
                 <div class="price-mobile">
                     <p>0<span>&#8381</span></p>
                 </div>
@@ -1560,10 +1560,10 @@
             </div>
         </div>
         <div class="mobile-point-wrapper">
-            <div class="mobile-point-active">
-            </div>
             <div class="mobile-point">
             </div>
+            <div id="btn-big-too" class="mobile-point-active">
+            </div>
             <div class="mobile-point">
             </div>
             <div class="mobile-point">
@@ -1571,7 +1571,7 @@
         </div>
     </div>
 
-    <div class="window-three price-mobile-window-none">
+    <div id="window-big-three" class="window-three price-mobile-window-none">
         <div class="price-mobile-tittle">
             <h2>Цены 3big</h2>
             <div class="price-mobile-tittle-line">
@@ -1580,7 +1580,7 @@
         <div class="price-mobile-wrapper">
             <div class="price-mobile-container">
                 <img src="img/price1.png" class="mobile-img">
-                <h6>Free (Beta)</h6>
+                <h6>Expert</h6>
                 <div class="price-mobile">
                     <p>0<span>&#8381</span></p>
                 </div>
@@ -1786,18 +1786,18 @@
             </div>
         </div>
         <div class="mobile-point-wrapper">
-            <div class="mobile-point-active">
-            </div>
             <div class="mobile-point">
             </div>
             <div class="mobile-point">
             </div>
+            <div id="btn-big-third" class="mobile-point-active">
+            </div>
             <div class="mobile-point">
             </div>
         </div>
     </div>
 
-    <div class="window-four">
+    <div id="window-big-four" class="window-four">
         <div class="price-mobile-tittle">
             <h2>Цены 4big</h2>
             <div class="price-mobile-tittle-line">
@@ -1806,7 +1806,7 @@
         <div class="price-mobile-wrapper">
             <div class="price-mobile-container">
                 <img src="img/price1.png" class="mobile-img">
-                <h6>Free (Beta)</h6>
+                <h6>On-demand</h6>
                 <div class="price-mobile">
                     <p>0<span>&#8381</span></p>
                 </div>
@@ -2012,14 +2012,14 @@
             </div>
         </div>
         <div class="mobile-point-wrapper">
-            <div class="mobile-point-active">
-            </div>
             <div class="mobile-point">
             </div>
             <div class="mobile-point">
             </div>
             <div class="mobile-point">
             </div>
+            <div id="btn-big-four" class="mobile-point-active">
+            </div>
         </div>
     </div>
 
@@ -2131,11 +2131,11 @@
         <div class="mobile-point-wrapper">
             <div id="btn-one-first" class="mobile-point-active">
             </div>
-            <div id="btn-one-too" class="mobile-point">
+            <div class="mobile-point">
             </div>
-            <div id="btn-one-third" class="mobile-point">
+            <div class="mobile-point">
             </div>
-            <div id="btn-one-fourth" class="mobile-point">
+            <div class="mobile-point">
             </div>
         </div>
     </div>
@@ -2149,7 +2149,7 @@
         <div class="price-mobile-wrapper">
             <div class="price-mobile-container">
                 <img src="img/mobile-img.png" class="mobile-img">
-                <h6>Free (Beta)</h6>
+                <h6>Standard</h6>
                 <div class="price-mobile">
                     <p>0<span>&#8381</span></p>
                 </div>
@@ -2242,13 +2242,13 @@
             </div>
         </div>
         <div class="mobile-point-wrapper">
-            <div id="btn-too-first" class="mobile-point">
+            <div class="mobile-point">
             </div>
             <div id="btn-too-too" class="mobile-point-active">
             </div>
-            <div id="btn-too-third" class="mobile-point">
+            <div class="mobile-point">
             </div>
-            <div id="btn-too-fourth" class="mobile-point">
+            <div class="mobile-point">
             </div>
         </div>
     </div>
@@ -2262,7 +2262,7 @@
         <div class="price-mobile-wrapper">
             <div class="price-mobile-container">
                 <img src="img/mobile-img.png" class="mobile-img">
-                <h6>Free (Beta)</h6>
+                <h6>Expert</h6>
                 <div class="price-mobile">
                     <p>0<span>&#8381</span></p>
                 </div>
@@ -2355,13 +2355,13 @@
             </div>
         </div>
         <div class="mobile-point-wrapper">
-            <div id="btn-third-first" class="mobile-point">
+            <div class="mobile-point">
             </div>
-            <div id="btn-third-too" class="mobile-point">
+            <div class="mobile-point">
             </div>
             <div id="btn-third-third" class="mobile-point-active">
             </div>
-            <div id="btn-third-fourth" class="mobile-point">
+            <div class="mobile-point">
             </div>
         </div>
     </div>
@@ -2375,7 +2375,7 @@
         <div class="price-mobile-wrapper">
             <div class="price-mobile-container">
                 <img src="img/mobile-img.png" width="212" class="mobile-img">
-                <h6>Free (Beta)</h6>
+                <h6>On-demand</h6>
                 <div class="price-mobile">
                     <p>0<span>&#8381</span></p>
                 </div>
@@ -2468,11 +2468,11 @@
             </div>
         </div>
         <div class="mobile-point-wrapper">
-            <div id="btn-first" class="mobile-point">
+            <div class="mobile-point">
             </div>
-            <div id="btn-too" class="mobile-point">
+            <div class="mobile-point">
             </div>
-            <div id="btn-third" class="mobile-point">
+            <div class="mobile-point">
             </div>
             <div id="btn-fourth-fourth" class="mobile-point-active">
             </div>
@@ -2590,6 +2590,37 @@
 
 
 
+    $('#btn-big-four').click(function(event) {
+        $('#window-big-one').toggleClass('price-mobile-window-none');
+    });
+    $('#btn-big-four').click(function(event) {
+        $('#window-big-four').toggleClass('price-mobile-window-none');
+    });
+
+    $('#btn-big-one').click(function(event) {
+        $('#window-big-one').toggleClass('price-mobile-window-none');
+    });
+    $('#btn-big-one').click(function(event) {
+        $('#window-big-too').toggleClass('price-mobile-window-none');
+    });
+
+
+    $('#btn-big-too').click(function(event) {
+        $('#window-big-three').toggleClass('price-mobile-window-none');
+    });
+    $('#btn-big-too').click(function(event) {
+        $('#window-big-too').toggleClass('price-mobile-window-none');
+    });
+
+    $('#btn-big-third').click(function(event) {
+        $('#window-big-three').toggleClass('price-mobile-window-none');
+    });
+    $('#btn-big-third').click(function(event) {
+        $('#window-big-four').toggleClass('price-mobile-window-none');
+    });
+
+
+