Having some issues with certain parts of my Parallax Scrolling in my website and not sure why, heres the link to the website. The parallax I'll attach show screenshots to show what I mean, the Lift+ and the Gillons are the only one which correctly show up the same in both FireFox and Chrome the rest are way off when fully in browser. FireFox shows correctly and funny thing is if you open the files offline from the desktop in Chrome they show up correctly but when on the web files open totally different... I put code below all the Screenshots for HTML and CSS... I only put some of the HTML just related to those sections. Theres other CSS files but dont think they are effecting it, I believe has something to do with starting points but not sure, any help would be much appreciated.
This is the link incase anyone needs to see how it works...
FireFox
Chrome
HTML
<!DOCTYPE html>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> modo</title>
<link href="http://modocom.ca/modo-update/wp-content/themes/modo/css/styles.css" rel="stylesheet" type="text/css" />
<link href="http://modocom.ca/modo-update/wp-content/themes/modo/css/chrome.css" rel="stylesheet" type="text/css" />
<link href="http://modocom.ca/modo-update/wp-content/themes/modo/css/reset.css" rel="stylesheet" type="text/css" />
<link href="http://modocom.ca/modo-update/wp-content/themes/modo/css/component.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 9]>
<script src="http://modocom.ca/modo-update/wp-content/themes/modo/js/html5.js"></script>
<![endif]-->
<script type="text/javascript" src="http://modocom.ca/modo-update/wp-content/themes/modo/js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="http://modocom.ca/modo-update/wp-content/themes/modo/js/side-nav.js"></script>
<script type="text/javascript" src="http://modocom.ca/modo-update/wp-content/themes/modo/js/backgrounds.js"></script>
<script type="text/javascript" src="http://modocom.ca/modo-update/wp-content/themes/modo/js/kinetics.js"></script>
<script src="http://modocom.ca/modo-update/wp-content/themes/modo/js/modernizr.custom.js"></script>
<!-- parallax.js really screws with the DOM, so make sure it's included last so other things don't notice :) -->
<script type="text/javascript" src="http://modocom.ca/modo-update/wp-content/themes/modo/js/parallax.js"></script>
<meta name='robots' content='noindex,follow' />
<link rel='stylesheet' id='styles-with-shortcodes-css' href='http://modocom.ca/modo-update/wp-content/plugins/styles-with-shortcodes/css/style.css?ver=1.0.1' type='text/css' media='all' />
<link rel='stylesheet' id='rh_columns-css' href='http://modocom.ca/modo-update/wp-content/plugins/styles-with-shortcodes/editorplugin/css/rh_columns.css?ver=1.0.2' type='text/css' media='all' />
<link rel='stylesheet' id='contact-form-7-css' href='http://modocom.ca/modo-update/wp-content/plugins/contact-form-7/includes/css/styles.css?ver=3.7.2' type='text/css' media='all' />
<link rel='stylesheet' id='advanced-responsive-video-embedder-plugin-styles-css' href='http://modocom.ca/modo-update/wp-content/plugins/advanced-responsive-video-embedder/public/assets/css/public.css?ver=4.3.0' type='text/css' media='all' />
<script type='text/javascript' src='http://modocom.ca/modo-update/wp-includes/js/jquery/jquery.js?ver=1.10.2'></script>
<script type='text/javascript' src='http://modocom.ca/modo-update/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
<script type='text/javascript' src='http://modocom.ca/modo-update/wp-content/plugins/styles-with-shortcodes/js/sws_frontend.js?ver=1.0.0'></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://modocom.ca/modo-update/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://modocom.ca/modo-update/wp-includes/wlwmanifest.xml" />
<meta name="generator" content="WordPress 3.8.3" />
<!-- Start Fluid Video Embeds Style Tag -->
<style type="text/css">
/* Thanks to Web Designer Wall for writing about this technique: http://webdesignerwall.com/tutorials/css-elastic-videos */
/* And to A List Apart: http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/ */
.fve-video-wrapper {
position: relative;
overflow: hidden;
height: 0;
background-color: transparent;
padding-bottom: 56.25%; /* This is default, but will be overriden */
margin: 0.5em 0; /* A bit of margin at the bottom */
}
.fve-video-wrapper iframe,
.fve-video-wrapper object,
.fve-video-wrapper embed {
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.fve-video-wrapper a.hyperlink-image {
position: relative;
display: none;
}
.fve-video-wrapper a.hyperlink-image img {
position: relative;
z-index: 2;
width: 100%;
}
.fve-video-wrapper a.hyperlink-image .fve-play-button {
position: absolute;
left: 35%;
top: 35%;
right: 35%;
bottom: 35%;
z-index: 3;
background-color: rgba(40, 40, 40, 0.75);
background-size: 100% 100%;
border-radius: 10px;
}
.fve-video-wrapper a.hyperlink-image:hover .fve-play-button {
background-color: rgba(0, 0, 0, 0.85);
}
/* End of standard styles */
</style>
<!-- End Fluid Video Embeds Style Tag -->
<style type="text/css">.arve-thumb-wrapper { width: 300px; }.arve-normal-wrapper.alignleft, .arve-normal-wrapper.alignright, .arve-normal-wrapper.aligncenter { width: 400px; }</style>
<link rel="stylesheet" type="text/css" href="http://modocom.ca/modo-update/wp-content/plugins/styles-with-shortcodes/js/lightbox/themes/default/jquery.lightbox.css" />
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="http://modocom.ca/modo-update/wp-content/plugins/styles-with-shortcodes/js/lightbox/themes/default/jquery.lightbox.ie6.css" /><![endif]-->
<script type='text/javascript'>
var sws_lightbox = {"modal":false};
</script>
<style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style>
</head>
<body>
<div class="grid base">
<div id="story-modo" class="col-1-3 navigation">
<div class="maindiv">
<div class="hi-icon-wrap hi-icon-effect-5 hi-icon-effect-5d transition">
<a href="http://modocom.ca/modo-update" class="hi-icon-start hi-icon-modo-od-start transition">modo</a>
</div>
<div class="hi-icon-wrap hi-icon-effect-6 hi-icon-effect-5d transition">
<a href="http://modocom.ca/modo-update" class="hi-icon hi-icon-modo-m transition">modo</a>
</div>
<div class="hi-icon-wrap hi-icon-effect-5 hi-icon-effect-5d transition">
<a href="http://modocom.ca/modo-update" class="hi-icon hi-icon-modo-od transition">modo</a>
</div>
<div class="hi-icon-wrap hi-icon-effect-6 hi-icon-effect-5d transition">
<a href="http://modocom.ca/modo-update" class="hi-icon hi-icon-modo-o transition">modo</a>
</div>
</div>
<div class="menu-primary-menu-container"><ul id="menu-primary-menu" class="nav"><li id="menu-item-13" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-13"><a href="http://modocom.ca/modo-update/category/portfolio/">All Categories</a></li>
<li id="menu-item-324" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-324"><a href="http://modocom.ca/modo-update/category/portfolio/advertising/">Advertising</a></li>
<li id="menu-item-325" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-325"><a href="http://modocom.ca/modo-update/category/portfolio/branding/">Branding</a></li>
<li id="menu-item-326" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-326"><a href="http://modocom.ca/modo-update/category/portfolio/environmental/">Environmental</a></li>
<li id="menu-item-327" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-327"><a href="http://modocom.ca/modo-update/category/portfolio/graphic-design/">Graphic Design</a></li>
<li id="menu-item-328" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-328"><a href="http://modocom.ca/modo-update/category/portfolio/motion-graphics/">Motion Graphics</a></li>
<li id="menu-item-329" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-329"><a href="http://modocom.ca/modo-update/category/portfolio/web-design-ux/">Web Design / UX</a></li>
<li id="menu-item-353" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-353"><a href="http://modocom.ca/modo-update/videos/">Motion Graphics Portfolio</a></li>
</ul></div> </div>
</div>
<!-- this is to make the page's vertical scrollbar appear the correct height -->
<div id="mock-scroller"></div>
<div id="content">
<section id="story-home">
<div class="grid base">
<div class="col-2-3 maincontent">
<h1>We inspire<br>emotion & action through<br>brand-focused design.</h1>
<div class="col-1-2">
<p class="bordertop">We are a brand strategy & design agency in Thunder Bay, Ontario.</p>
<p>We love introducing business to creativity.</p>
</div>
<div class="col-1-2">
<p class="bordertop">Take a scroll down</p>
</div>
</div>
</div>
</section>
<section id="story-lift" data-nav="Lift">
<div class="story">
<div class="box"></div>
<img class="logolift animate" src="http://modocom.ca/modo-update/wp-content/themes/modo/images/lift_bg.png" anim-detached="true" />
<img class="logo animate" src="http://modocom.ca/modo-update/wp-content/themes/modo/images/lift-five.png" anim-detached="true" />
<img class="logo2 animate" src="http://modocom.ca/modo-update/wp-content/themes/modo/images/lift-four.png" anim-detached="true" />
<div class="liftdiv">
</div>
</div>
</section>
<section id="story-brand" anim-pause="500">
<div class="grid base">
<div class="col-2-3 maincontent">
<h1>Branding forward.</h1>
<div class="col-1-2">
<p class="bordertop">To us, your brand is a platform on which to build new experiences, inspire
new ideas, and guide communication.</p>
</div>
<div class="col-1-2">
</div>
</div>
</div>
</section>
<section id="story-gillons" data-nav="Gillons">
<img class="bg animate" src="http://modocom.ca/modo-update/wp-content/themes/modo/images/gil-person.png" anim-detached="true" />
<div class="story">
<div class="box"></div>
<img class="home animate" src="http://modocom.ca/modo-update/wp-content/themes/modo/images/gil-home.png" anim-detached="true" />
<img class="auto animate" src="http://modocom.ca/modo-update/wp-content/themes/modo/images/gil-auto.png" anim-detached="true" />
<img class="biz animate" src="http://modocom.ca/modo-update/wp-content/themes/modo/images/gil-biz.png" anim-detached="true" />
<img class="logo animate" src="http://modocom.ca/modo-update/wp-content/themes/modo/images/gil-logo.png" anim-detached="true" />
<div class="gildiv">
</div>
</div>
</section>
<section id="story-design" anim-pause="500">
<div class="grid base">
<div class="col-2-3 maincontent">
<h1>Different by design.</h1>
<div class="col-1-2">
<p class="bordertop">We feel very strongly that design has the power to shift the success of your business. However, our definition is more than a pretty picture.</p>
</div>
<div class="col-1-2">
<p class="bordertop">Design is about crafting a unique approach to the way your business operates and communicates.</p><p><strong>Good design gets people talking.</strong></p>
</div>
</div>
</div>
</section>
<section id="story-youth" data-nav="Youth">
<div class="story">
<img class="bg animate" src="http://modocom.ca/modo-update/wp-content/themes/modo/images/youth-bg.jpg" anim-detached="true" />
<div class="box"></div>
<img class="pic1 animate" src="http://modocom.ca/modo-update/wp-content/themes/modo/images/youth-pic1.png" anim-detached="true" />
<img class="logos animate" src="http://modocom.ca/modo-update/wp-content/themes/modo/images/youth-logos.png" anim-detached="true" />
<img class="logo animate" src="http://modocom.ca/modo-update/wp-content/themes/modo/images/youth-logo.png" anim-detached="true" />
<div class="youthdiv">
</div>
</div>
</section>
<section id="story-creativity" anim-pause="500">
<div class="grid base">
<div class="col-2-3 maincontent">
<h1>Business and creativity should hang out more.</h1>
<div class="col-1-2">
<p class="bordertop">Communication that engages its audience is about the right strategy executed in a
unique way.</p>
</div>
<div class="col-1-2">
</div>
</div>
</div>
</section>
<section id="story-xtra" data-nav="Xtra">
<div class="story">
<div class="box"></div>
<img class="logoxtra4 animate" src="http://modocom.ca/modo-update/wp-content/themes/modo/images/xtracash_four.png" anim-detached="true" />
<img class="logoxtra3 animate" src="http://modocom.ca/modo-update/wp-content/themes/modo/images/xtracash_three.png" anim-detached="true" />
<img class="logopic1 animate" src="http://modocom.ca/modo-update/wp-content/themes/modo/images/xtracash_one.jpg" anim-detached="true" />
<img class="logoxtra2 animate" src="http://modocom.ca/modo-update/wp-content/themes/modo/images/xtracash_one.png" anim-detached="true" />
<img class="logopic2 animate" src="http://modocom.ca/modo-update/wp-content/themes/modo/images/xtracash_pic2.jpg" anim-detached="true" />
<img class="logoxtra animate" src="http://modocom.ca/modo-update/wp-content/themes/modo/images/xtracash_two.png" anim-detached="true" />
<img class="logopic3 animate" src="http://modocom.ca/modo-update/wp-content/themes/modo/images/xtracash_pic3.jpg" anim-detached="true" />
<img class="logo animate" src="http://modocom.ca/modo-update/wp-content/themes/modo/images/xtracash_logo.png" anim-detached="true" />
<div class="xtradiv">
</div>
</div>
</section>
<section id="story-info" anim-pause="500">
<div class="grid base">
<div class="col-2-3 maincontent">
<h1>Poke around to learn more about us, or <a href="#" title="contact">you can tell us about you.</a></h1>
<div class="col-1-2">
<p class="bordertop"><h3>Things we are good at</h3>
<p>Brand Strategy<br>Identity Design<br>Marketing<br>Creative Advertising<br>Web Design<br>Print Design<br>Packaging<br>Promotional Design<br>Looking good in suits<br>Lion taming<br>Drinking coffee</p>
<h3>Things we are not good at</h3>
<p>Modesty<br>
Blending in</p>
</p>
</div>
<div class="col-1-2">
<p class="bordertop">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</section>
<section id="story-lmi" data-nav="LMI">
<div class="story">
<div class="box"></div>
<img class="light animate" src="http://modocom.ca/modo-update/wp-content/themes/modo/images/lmi-light.png" anim-detached="true" />
<img class="boat animate" src="http://modocom.ca/modo-update/wp-content/themes/modo/images/lmi-boat.png" anim-detached="true" />
<img class="dark animate" src="http://modocom.ca/modo-update/wp-content/themes/modo/images/lmi-dark.png" anim-detached="true" />
<img class="logo animate" src="http://modocom.ca/modo-update/wp-content/themes/modo/images/lmi-logo.png" anim-detached="true" />
<div class="lmidiv">
</div>
</div>
</section>
<section id="story-footer" anim-pause="500">
<div class="grid base">
<div class="col-2-3 maincontent">
<h1>Like what you see?<br>Feel free to tell people</h1>
<div class="col-1-2">
<p class="bordertop">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="col-1-2">
<p class="bordertop">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</section>
</div>
<script type="text/javascript">
function arve_load_video(e,link) {
if (!e)
var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation)
e.stopPropagation();
var target = document.getElementById( link.getAttribute("data-target") );
target.setAttribute("src", target.getAttribute("data-src") );
target.className = "arve-inner";
link.className += " arve-hidden";
}
</script>
<script type='text/javascript' src='http://modocom.ca/modo-update/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js?ver=3.50.0-2014.02.05'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var _wpcf7 = {"loaderUrl":"http:\/\/modocom.ca\/modo-update\/wp-content\/plugins\/contact-form-7\/images\/ajax-loader.gif","sending":"Sending ..."};
/* ]]> */
</script>
<script type='text/javascript' src='http://modocom.ca/modo-update/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=3.7.2'></script>
</body>
</html>
CSS
/***************
* Styles *
***************/
#story-modo .logo {
border-top: 5px solid #000;
padding-top: 5%;
padding-bottom: 40%;
height: 200px;
}
#story-modo .maindiv {
height: 200px;
}
#story-modo .logo img {
width: 40%;
}
#story-modo{
position:fixed;
max-width: 360px;
z-index: 999999;
}
#story-home {
padding-top: 5px;
}
#story-brand, #story-design, #story-creativity, #story-info, #story-footer {
padding-top: 75px;
}
.bordertop {
border-top: 1px solid #000;
}
/**************
* Lift Panel *
**************/
#story-lift {
color : #CCC;
background : #003F5F;
}
#story-lift .logolift {
position : absolute;
width: 100%;
bottom: -50%;
}
#story-lift .logolift.start {
bottom : 70%;
}
#story-lift .logolift.end {
bottom : -60%;
}
#story-lift .logo {
position : absolute;
right : 5%;
bottom : -60%;
}
#story-lift .logo.start {
bottom : 120%;
}
#story-lift .logo.end {
bottom : -60%;
}
#story-lift .logo2 {
position : absolute;
left : 15%;
bottom : -20%;
}
#story-lift .logo2.start {
bottom : 110%;
}
#story-lift .logo2.end {
bottom : -40%;
}
.liftdiv {
height: 600px;
}
#story-lift .box {
border-radius : 10px;
position : absolute;
top : -10px;
right : 440px;
bottom : -10px;
left : -10px;
z-index : -1;
}
/**************
* Xtracash Panel *
**************/
#story-xtra {
color : #CCC;
background : #00484e;
}
#story-xtra .logo {
position : absolute;
right : 10%;
bottom : 30%;
}
#story-xtra .logo.start {
bottom : 20%;
}
#story-xtra .logo.end {
bottom : -90%;
}
#story-xtra .logoxtra {
width: 100%;
position : absolute;
bottom: -40%;
}
#story-xtra .logoxtra.start {
bottom : 70%;
}
#story-xtra .logoxtra.end {
bottom : -210%;
}
#story-xtra .logoxtra2 {
width: 100%;
position : absolute;
bottom: -35%;
}
#story-xtra .logoxtra2.start {
bottom : 75%;
}
#story-xtra .logoxtra2.end {
bottom : -220%;
}
#story-xtra .logoxtra3 {
width: 100%;
position : absolute;
bottom: -35%;
}
#story-xtra .logoxtra3.start {
bottom : 74%;
}
#story-xtra .logoxtra3.end {
bottom : -215%;
}
#story-xtra .logoxtra4 {
width: 100%;
position : absolute;
bottom: -32%;
}
#story-xtra .logoxtra4.start {
bottom : 65%;
}
#story-xtra .logoxtra4.end {
bottom : -205%;
}
#story-xtra .logopic1 {
position : absolute;
left: 10%;
bottom: 20%;
}
#story-xtra .logopic1.start {
bottom : 65%;
}
#story-xtra .logopic1.end {
bottom : -205%;
}
#story-xtra .logopic2 {
position : absolute;
left: 23%;
bottom: 110%;
}
#story-xtra .logopic2.start {
bottom : 110%;
}
#story-xtra .logopic2.end {
bottom : -225%;
}
#story-xtra .logopic3 {
position : absolute;
left: 0%;
bottom: -200%;
}
#story-xtra .logopic3.start {
bottom : -200%;
}
#story-xtra .logopic3.end {
bottom : -80%;
}
.xtradiv {
height: 600px;
}
#story-xtra .box {
border-radius : 10px;
position : absolute;
top : -10px;
right : 440px;
bottom : -10px;
left : -10px;
z-index : -1;
}
/**************
* Gillons Panel *
**************/
#story-gillons {
color : #CCC;
background : #F7FBFE;
}
#story-gillons .logo {
position : absolute;
left : 10%;
bottom : -25%;
}
#story-gillons .logo.start {
bottom : -100%;
}
#story-gillons .logo.end {
bottom : 20%;
}
#story-gillons .home {
position : absolute;
left : 15%;
bottom : 10%;
}
#story-gillons .home.start {
bottom : -200%;
}
#story-gillons .home.end {
bottom : 200%;
}
#story-gillons .biz {
position : absolute;
left : 35%;
bottom : 60%;
}
#story-gillons .biz.start {
bottom : -260%;
}
#story-gillons .biz.end {
bottom : 240%;
}
#story-gillons .auto {
position : absolute;
left : 38%;
bottom : -25%;
}
#story-gillons .auto.start {
bottom : -10%;
}
#story-gillons .auto.end {
bottom : 40%;
}
.gildiv {
height: 600px;
}
#story-gil .box {
border-radius : 10px;
position : absolute;
top : -10px;
right : 440px;
bottom : -10px;
left : -10px;
z-index : -1;
}
/**************
* LMI *
**************/
#story-lmi {
color : #CCC;
background : #e5ecf2;
}
#story-lmi .logo {
position : absolute;
right : 15%;
bottom : -60%;
}
#story-lmi .logo.start {
bottom : -100%;
}
#story-lmi .logo.end {
bottom : -25%;
}
#story-lmi .dark {
position : absolute;
bottom: -110%;
}
#story-lmi .dark.start {
bottom : -110%;
}
#story-lmi .dark.end {
bottom : -110%;
}
#story-lmi .light {
position : absolute;
bottom: -60%;
}
#story-lmi .light.start {
bottom : -200%;
}
#story-lmi .light.end {
bottom : -110%;
}
#story-lmi .boat {
position : absolute;
right: 10%;
bottom : -20%;
}
#story-lmi .boat.start {
bottom : 110%;
}
#story-lmi .boat.end {
bottom : 5%;
}
.lmidiv {
height: 600px;
}
#story-lmi .box {
border-radius : 10px;
position : absolute;
top : -10px;
right : 440px;
bottom : -10px;
left : -10px;
z-index : -1;
}
/**************
* Youth *
**************/
#story-youth {
color : #CCC;
background : #FFF;
}
#story-youth .logo {
position : absolute;
right : -5%;
bottom : -20%;
}
#story-youth .logo.start {
bottom : 200%;
}
#story-youth .logo.end {
bottom : 40%;
}
#story-youth .logos {
position : absolute;
right : 10%;
bottom : -50%;
}
#story-youth .logos.start {
bottom : -80%;
}
#story-youth .logos.end {
bottom : 20%;
}
#story-youth .pic1 {
position : absolute;
left: -10%;
bottom : -30%;
}
#story-youth .pic1.start {
bottom : 110%;
}
#story-youth .pic1.end {
bottom : -20%;
}
.youthdiv {
height: 600px;
}
#story-youth .box {
border-radius : 10px;
position : absolute;
top : -10px;
right : 440px;
bottom : -10px;
left : -10px;
z-index : -1;
}
