denested manifestations css

www/css/page_manifestations.css

@@ -1,11 +1,11 @@
 /* page manifestations */
-
 #middle {
   float: left;
   width: 600px;
   height: auto;
+}
 
-  #top.name_list {
+#middle #top.name_list {
   float: left;
   height: 25px;
   width: 480px;
@@ -20,12 +20,14 @@
   flex-wrap: wrap;
   height: auto;
   column-gap: 30px;
+}
 
-    p {
+#middle #top.name_list p {
   position: relative;
   padding-left: 13px;
+}
 
-      &::before {
+#middle #top.name_list p::before {
   content: "";
   position: absolute;
   left: 0;
@@ -36,18 +38,17 @@
   border-radius: 10%;
   border: 1px solid #cc3300;
 }
-    }
-  }
 
-  #manifestations {
+#middle #manifestations {
   position: relative;
   left: 100px;
   top: 0px;
   float: left;
   width: 580px;
   height: 600px;
+}
 
-    #Container {
+#middle #manifestations #Container {
   position: absolute;
   top: 0px;
   left: 0px;
@@ -57,51 +58,70 @@
   overflow-y: scroll;
   overflow-x: hidden;
   padding-right: 20px;
+}
 
-      #News {
+#middle #manifestations #Container #News {
   position: absolute;
   top: 0px;
   /* overflow: hidden; */
   width: 480px;
   height: 530px;
   display: block;
+}
 
-        .Scroller-Container {
+#middle #manifestations #Container #News .Scroller-Container {
   position: absolute;
   top: 0px;
   left: 0px;
+}
 
-          .video {
+#middle #manifestations #Container #News .Scroller-Container .video {
   width: 480px;
   height: 400px;
   margin-top: 3px;
+}
 
-            &.manifestation_poster {
+#middle
+  #manifestations
+  #Container
+  #News
+  .Scroller-Container
+  .video.manifestation_poster {
   position: relative;
   background: black;
   height: auto;
+}
 
+#middle
+  #manifestations
+  #Container
+  #News
+  .Scroller-Container
+  .video.manifestation_poster
   video {
   max-height: 100%;
   max-width: 100%;
   object-fit: contain;
   object-position: top;
 }
-            }
-          }
 
-          .images {
+#middle #manifestations #Container #News .Scroller-Container .images {
   width: 480px;
   height: 80px;
   margin-top: 10px;
+}
 
-            &.manifestation_flex {
+#middle
+  #manifestations
+  #Container
+  #News
+  .Scroller-Container
+  .images.manifestation_flex {
   display: flex;
   justify-content: space-between;
 }
-          }
 
-          .title {
+#middle #manifestations #Container #News .Scroller-Container .title {
   width: 480px;
   height: 20px;
   font-family: Arial, sans-serif;
@@ -110,22 +130,17 @@
   font-weight: bold;
 }
 
-          .texte_manif {
+#middle #manifestations #Container #News .Scroller-Container .texte_manif {
   width: 480px;
   height: auto;
   margin-bottom: 35px;
+}
 
-            p {
+#middle #manifestations #Container #News .Scroller-Container .texte_manif p {
   text-align: justify;
   font-size: 11px;
   font-weight: normal;
 }
-          }
-        }
-      }
-    }
-  }
-}
 
 .images_grand {
   width: 480px;