Single page Bootstrap 4 to 3.3.7 conversion plus minor layout tweaks

I have a single page HTML/CSS layout that was purchased from Themeforest. It was been customized but needs to be converted from Bootstrap 4 to Bootstrap 3.3.7 in order to be compatible with our ecommerce engine. Additionally there are several minor layout tweaks and clean up items that need to be done. The HTML page is pretty bloated and contains 1200 lines of code. I attached a screenshot. The layout changes include... DESKTOP 1. Make every section that is less than 100% of the screen height, be automatically resized to be 100% height of the viewport. 2. Use the same fonts from the first screen throughout the entire page. There are three on this page. 3. SCREEN 2: “We Are” Section: a. Make the background image slowly grow in size. Perhaps from 90% to 100% over 30 seconds. Have it freeze at 100% when complete. Only start zooming upon the consumer having scrolled to that section. b. Link the bottom arrow to scoll down 1 viewport size to have the brand video be in full frame (just like how the arrow action works on the first screen). c. Fix the arrow, so if the user scrolls down partially on the page the arrow disappears, just like on the first screen. 4. SCREEN 3: Brand Video Section: a. Add the same scroll down arrow from the previous screens. Again, it scrolls down one viewport size when clicked. 5. SCREEN 4: Timeline Section: a. Make it scale to 100% of viewport size b. Fix the spacing inbetween the title and description text on some slides that have poor spacing. c. Add left/right slide arrows that match the slide arrows exactly from our SCA main header page d. On larger screens, make the year timeline always align in the vertical center of the bottom third of the viewport. e. Some of the slides its hard to read the white year, title, description text over the image. Add a rectangle 30% (% may need to be adjusted based on how it looks) black opacity cell behind these three elements with an adequate margin from the edge. f. Add the same type of 30% opacity background behind the year timeline at the bottom as well. g. Fix the yellow line highlights on the bottom year section so that only the currently shown slide is selected in yellow. Currently the first slide behaves correctly, but many of the rest don’t and they show multiple lines in yellow at one time. h. Add the same scroll down arrow from the previous screens. Again, it scrolls down one viewport size when clicked. 6. SCREEN 5: “The 509 Design Ethos” Section: a. This page will be more than one viewport in height, which is fine. b. Add the same scroll down arrow from the previous screens. Again, it scrolls down one viewport size when clicked. 7. SCREEN 6: “The World’s Best Riders” Section: a. Add the same scroll arrow, but at the top pointing upward and scrolling them up to the top of screen 5. This has a horizontal scroll function and is hard to get scrolled back up the page, so it needs the arrow. b. Fix the black expand arrow that is in the upper right of each image. Currently its misaligned. MOBILE 1. All the same features, changes, and additions should be present on mobile as well. I’ll only call out changes that are mobile specific. 2. Fully audit that it translates well from desktop to tablet to mobile 3. SCREEN 2: “We Are” Section: a. Position the background images so the left rider is in the view port 4. SCREEN 3: Brand Video Section: a. Ensure the width of the video fits within the viewport and isn’t cropped off. 5. SCREEN 4: Timeline Section: a. Ensure the fonts scale down and don’t overlap any other element.