How can I make the images inside a divider move down when the right-end of the browser reaches them? Currently, they start moving down before the edge of the window is reached. Any suggestions on how to fix this?
JSFIDDLE: https://jsfiddle.net/prtdaay1/2/
CSS:
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
ol, ul {
list-style: none;
}
html {
background-color: #FFFFFF;
-webkit-font-smoothing: antialiased;
}
body {
background-color: #ffffff;
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.5em;
color: #545454;
background-color: #ffffff;
text-align: center;
max-width:1600px;
overflow: hidden;
overflow-y: scroll;
}
h1, h2, h3, h4, h5, h6 {
color: #222;
font-weight: 600;
line-height: 1.3em;
}
h2 {
margin-top: 1.3em;
}
.custom-class {
text-align: right;
margin-top:-130px;
margin-right: 20px;
}
a {
color: #000000;
text-decoration: none;
}
b, strong {
font-weight: 600;
}
samp {
display: none;
}
img {
-webkit-animation: colorize 2s cubic-bezier(0, 0, .78, .36) 1;
animation: colorize 2s cubic-bezier(0, 0, .78, .36) 1;
background: transparent;
border-style:none;
border-radius: 4px;
display: block;
margin: 1.3em auto;
max-width: 95%;
}
.logo {
text-align: center;
margin-top:40px;
}
li {
list-style-type: none;
font-size: 1.5em;
padding-top: 8px;
text-align:center;
border-style: none;
}
...
.hidden {
display: none;
}