cycle ofimages complete

output/theme/css/howitworks.css

@@ -22,14 +22,56 @@
     margin-left: 400px;
     margin-right: 400px;
 }
-.arrow-container{
-    /*margin-left: -100px;*/
-    width: 200px;
-    height: 120px;
+/*.img-center{*/
+/*    margin: auto;*/
+/*}*/
+.center-this{
+    text-align: center;
 }
-.arrow-container img{
-    width: 100%;
-    height: auto;
+.word-wrap{
+    text-align: center;
+    box-sizing: border-box;
+    border-top: solid 2px #e6e6e6;
+    border-bottom: solid 2px #e6e6e6;
+    max-width: 250px;
+    max-height: 300px;
+    padding: 10px;
+
+}
+
+.word-wrap2{
+    /*margin-top: 10px;*/
+    box-sizing: border-box;
+    border-top: solid 2px #e6e6e6;
+    border-bottom: solid 2px #e6e6e6;
+    padding: 10px;
+    max-width: 60%;
+    margin: auto;
+    overflow: hidden;
+
+    /*position: absolute;*/
+    /*max-width: 300px;*/
+}
+
+.last-content-box{
+    display: inline-block;
+}
+.rotate-up{
+    transform: rotate(250deg);
+}
+.tree-img{
+    margin-left: -60px;
+}
+.rotate-up-side{
+    transform: rotate(180deg);
+}
+.rotate-down-side{
+    transform: rotate(120deg);
+    overflow: hidden;
+    /*margin-left: -30px;*/
+}
+.handmaid-img{
+    padding-top: 20px;
 }
 @media only screen and (max-width: 480px){
     .text-img{
@@ -55,6 +97,19 @@
         margin-left: 10px;
         margin-right: 10px;
     }
+    .tree-img{
+        margin-left: auto;
+    }
+    .img-extend{
+        height: 300px;
+    }
+    .rotate-up-side{
+        transform: rotate(200deg);
+    }
+    .rotate-down-side{
+        transform: rotate(90deg);
+        overflow: hidden;
+    }
 }
 
 @media (min-width: 600px) and (max-width: 1024px){
@@ -81,4 +136,12 @@
         margin-left: 10px;
         margin-right: 10px;
     }
+    .tree-img{
+        margin-left: auto;
+    }
+    .rotate-down-side{
+        transform: rotate(100deg);
+        overflow: hidden;
+
+    }
 }

output/theme/css/howitworks.css~

@@ -19,12 +19,85 @@
 }
 .many-imgs{
     padding-top: 100px;
-    margin-left: 500px;
-    margin-right: 500px;
+    margin-left: 400px;
+    margin-right: 400px;
 }
-.arrow-container{
-    
+/*.img-center{*/
+/*    margin: auto;*/
+/*}*/
+.center-this{
+    text-align: center;
 }
+.word-wrap{
+    text-align: center;
+    box-sizing: border-box;
+    border-top: solid 2px #e6e6e6;
+    border-bottom: solid 2px #e6e6e6;
+    max-width: 250px;
+    max-height: 300px;
+    padding: 10px;
+
+}
+
+.word-wrap2{
+    /*margin-top: 10px;*/
+    box-sizing: border-box;
+    border-top: solid 2px #e6e6e6;
+    border-bottom: solid 2px #e6e6e6;
+    padding: 10px;
+    max-width: 60%;
+    margin: auto;
+    overflow: hidden;
+
+    /*position: absolute;*/
+    /*max-width: 300px;*/
+}
+
+.last-content-box{
+    display: inline-block;
+}
+/*.right-this{*/
+/*    text-align: right;*/
+/*}*/
+/*.reduce-gap{*/
+/*    display: inline;*/
+/*}*/
+/*.arrow-container{*/
+/*    !*margin-left: -100px;*!*/
+/*    !*display: flex;*!*/
+/*    width: 200px;*/
+/*    height: 120px;*/
+/*}*/
+/*.arrow-container img{*/
+/*    width: 100%;*/
+/*    height: auto;*/
+/*}*/
+.rotate-up{
+    transform: rotate(250deg);
+}
+.tree-img{
+    margin-left: -60px;
+}
+.rotate-up-side{
+    transform: rotate(180deg);
+}
+.rotate-down-side{
+    transform: rotate(120deg);
+    overflow: hidden;
+    /*margin-left: -30px;*/
+}
+/*.vertical-center{*/
+/*    vertical-align: center;*/
+/*}*/
+.handmaid-img{
+    padding-top: 20px;
+}
+/*.last-content-box{*/
+/*    display: inline;*/
+/*}*/
+/*.bottom{*/
+/*    align-self: flex-end;*/
+/*}*/
 @media only screen and (max-width: 480px){
     .text-img{
         font-size: 30px;
@@ -49,6 +122,12 @@
         margin-left: 10px;
         margin-right: 10px;
     }
+    .tree-img{
+        margin-left: auto;
+    }
+    .img-extend{
+        height: 300px;
+    }
 }
 
 @media (min-width: 600px) and (max-width: 1024px){
@@ -75,4 +154,7 @@
         margin-left: 10px;
         margin-right: 10px;
     }
+    .tree-img{
+        margin-left: auto;
+    }
 }