body, html { margin: 0; overflow: hidden; -webkit-transition: opacity 400ms; -moz-transition: opacity 400ms; transition: opacity 400ms; } body, .onepage-wrapper, html { display: block; position: static; padding: 0; width: 100%; height: 100%; } .main { height: 100%; } .onepage-wrapper { width: 100%; height: 100%; display: block; position: relative; padding: 0; -webkit-transform-style: preserve-3d; } .onepage-wrapper .section { width: 100%; height: 100%; } .onepage-pagination { position: absolute; margin: auto; right: 10px; left: auto; top: 0; bottom: 0; height: 190px; z-index: 5; list-style: none; padding: 0; } .onepage-pagination li { padding: 0; text-align: center; } .onepage-pagination li a{ padding: 10px; width: 4px; height: 4px; display: block; } .onepage-pagination li a:before{ content: ''; position: absolute; width: 4px; height: 4px; background: rgba(0,0,0,0.85); border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; } .onepage-pagination li a.active:before{ width: 10px; height: 10px; background: none; border: 1px solid black; margin-top: -4px; left: 8px; } body.viewing-page-2 .onepage-pagination li a:before { background-color: #444; } body.viewing-page-2 .onepage-pagination li a.active:before { border-color: #444; background: none; } body.viewing-page-3 .onepage-pagination li a:before { background-color: #333; } body.viewing-page-3 .onepage-pagination li a.active:before { border-color: #333; background: none; } body.viewing-page-3 .social-sharing-wrapper { -webkit-filter: grayscale(1) sepia(1) hue-rotate(-47deg); } body.viewing-page-3 .social-sharing-wrapper:hover { -webkit-filter: none; } body.viewing-page-4 .onepage-pagination li a:before { background-color: #8bf5a5; } body.viewing-page-4 .onepage-pagination li a.active:before { border-color: #8bf5a5; background: none; } body.viewing-page-4 .social-sharing-wrapper { -webkit-filter: grayscale(1) contrast(1.3) invert(1); } body.viewing-page-4 .social-sharing-wrapper:hover { -webkit-filter: none; }