@charset "UTF-8"; /* ==================================================
 * Snapic Plus for Film Main Stylesheet by Lopwon.
 * www.Lopwon.com
 * 2023-10-18
 * ------------------------------------------------------------------- */

.snapic-film-noise { position: absolute; top: -100%; left: -50%; width: 300%; height: 300%; background-image: url('../img/film_noise.png'); background-repeat: repeat; -webkit-animation: film 6s steps(10) infinite; -moz-animation: film 6s steps(10) infinite; -ms-animation: film 6s steps(10) infinite; -o-animation: film 6s steps(10) infinite; animation: film 6s steps(10) infinite; opacity: .035; } @-webkit-keyframes film { 0% { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } 10% { -webkit-transform: translate(-5%, -10%); -moz-transform: translate(-5%, -10%); -ms-transform: translate(-5%, -10%); -o-transform: translate(-5%, -10%); transform: translate(-5%, -10%); } 20% { -webkit-transform: translate(-15%, 5%); -moz-transform: translate(-15%, 5%); -ms-transform: translate(-15%, 5%); -o-transform: translate(-15%, 5%); transform: translate(-15%, 5%); } 30% { -webkit-transform: translate(7%, -25%); -moz-transform: translate(7%, -25%); -ms-transform: translate(7%, -25%); -o-transform: translate(7%, -25%); transform: translate(7%, -25%); } 40% { -webkit-transform: translate(-5%, 25%); -moz-transform: translate(-5%, 25%); -ms-transform: translate(-5%, 25%); -o-transform: translate(-5%, 25%); transform: translate(-5%, 25%); } 50% { -webkit-transform: translate(-15%, 10%); -moz-transform: translate(-15%, 10%); -ms-transform: translate(-15%, 10%); -o-transform: translate(-15%, 10%); transform: translate(-15%, 10%); } 60% { -webkit-transform: translate(15%, 0%); -moz-transform: translate(15%, 0%); -ms-transform: translate(15%, 0%); -o-transform: translate(15%, 0%); transform: translate(15%, 0%); } 70% { -webkit-transform: translate(0%, 15%); -moz-transform: translate(0%, 15%); -ms-transform: translate(0%, 15%); -o-transform: translate(0%, 15%); transform: translate(0%, 15%); } 80% { -webkit-transform: translate(3%, 35%); -moz-transform: translate(3%, 35%); -ms-transform: translate(3%, 35%); -o-transform: translate(3%, 35%); transform: translate(3%, 35%); } 90% { -webkit-transform: translate(-10%, 10%); -moz-transform: translate(-10%, 10%); -ms-transform: translate(-10%, 10%); -o-transform: translate(-10%, 10%); transform: translate(-10%, 10%); } 100% { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } } @-moz-keyframes film { 0% { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } 10% { -webkit-transform: translate(-5%, -10%); -moz-transform: translate(-5%, -10%); -ms-transform: translate(-5%, -10%); -o-transform: translate(-5%, -10%); transform: translate(-5%, -10%); } 20% { -webkit-transform: translate(-15%, 5%); -moz-transform: translate(-15%, 5%); -ms-transform: translate(-15%, 5%); -o-transform: translate(-15%, 5%); transform: translate(-15%, 5%); } 30% { -webkit-transform: translate(7%, -25%); -moz-transform: translate(7%, -25%); -ms-transform: translate(7%, -25%); -o-transform: translate(7%, -25%); transform: translate(7%, -25%); } 40% { -webkit-transform: translate(-5%, 25%); -moz-transform: translate(-5%, 25%); -ms-transform: translate(-5%, 25%); -o-transform: translate(-5%, 25%); transform: translate(-5%, 25%); } 50% { -webkit-transform: translate(-15%, 10%); -moz-transform: translate(-15%, 10%); -ms-transform: translate(-15%, 10%); -o-transform: translate(-15%, 10%); transform: translate(-15%, 10%); } 60% { -webkit-transform: translate(15%, 0%); -moz-transform: translate(15%, 0%); -ms-transform: translate(15%, 0%); -o-transform: translate(15%, 0%); transform: translate(15%, 0%); } 70% { -webkit-transform: translate(0%, 15%); -moz-transform: translate(0%, 15%); -ms-transform: translate(0%, 15%); -o-transform: translate(0%, 15%); transform: translate(0%, 15%); } 80% { -webkit-transform: translate(3%, 35%); -moz-transform: translate(3%, 35%); -ms-transform: translate(3%, 35%); -o-transform: translate(3%, 35%); transform: translate(3%, 35%); } 90% { -webkit-transform: translate(-10%, 10%); -moz-transform: translate(-10%, 10%); -ms-transform: translate(-10%, 10%); -o-transform: translate(-10%, 10%); transform: translate(-10%, 10%); } 100% { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } } @-ms-keyframes film { 0% { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } 10% { -webkit-transform: translate(-5%, -10%); -moz-transform: translate(-5%, -10%); -ms-transform: translate(-5%, -10%); -o-transform: translate(-5%, -10%); transform: translate(-5%, -10%); } 20% { -webkit-transform: translate(-15%, 5%); -moz-transform: translate(-15%, 5%); -ms-transform: translate(-15%, 5%); -o-transform: translate(-15%, 5%); transform: translate(-15%, 5%); } 30% { -webkit-transform: translate(7%, -25%); -moz-transform: translate(7%, -25%); -ms-transform: translate(7%, -25%); -o-transform: translate(7%, -25%); transform: translate(7%, -25%); } 40% { -webkit-transform: translate(-5%, 25%); -moz-transform: translate(-5%, 25%); -ms-transform: translate(-5%, 25%); -o-transform: translate(-5%, 25%); transform: translate(-5%, 25%); } 50% { -webkit-transform: translate(-15%, 10%); -moz-transform: translate(-15%, 10%); -ms-transform: translate(-15%, 10%); -o-transform: translate(-15%, 10%); transform: translate(-15%, 10%); } 60% { -webkit-transform: translate(15%, 0%); -moz-transform: translate(15%, 0%); -ms-transform: translate(15%, 0%); -o-transform: translate(15%, 0%); transform: translate(15%, 0%); } 70% { -webkit-transform: translate(0%, 15%); -moz-transform: translate(0%, 15%); -ms-transform: translate(0%, 15%); -o-transform: translate(0%, 15%); transform: translate(0%, 15%); } 80% { -webkit-transform: translate(3%, 35%); -moz-transform: translate(3%, 35%); -ms-transform: translate(3%, 35%); -o-transform: translate(3%, 35%); transform: translate(3%, 35%); } 90% { -webkit-transform: translate(-10%, 10%); -moz-transform: translate(-10%, 10%); -ms-transform: translate(-10%, 10%); -o-transform: translate(-10%, 10%); transform: translate(-10%, 10%); } 100% { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } } @-o-keyframes film { 0% { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } 10% { -webkit-transform: translate(-5%, -10%); -moz-transform: translate(-5%, -10%); -ms-transform: translate(-5%, -10%); -o-transform: translate(-5%, -10%); transform: translate(-5%, -10%); } 20% { -webkit-transform: translate(-15%, 5%); -moz-transform: translate(-15%, 5%); -ms-transform: translate(-15%, 5%); -o-transform: translate(-15%, 5%); transform: translate(-15%, 5%); } 30% { -webkit-transform: translate(7%, -25%); -moz-transform: translate(7%, -25%); -ms-transform: translate(7%, -25%); -o-transform: translate(7%, -25%); transform: translate(7%, -25%); } 40% { -webkit-transform: translate(-5%, 25%); -moz-transform: translate(-5%, 25%); -ms-transform: translate(-5%, 25%); -o-transform: translate(-5%, 25%); transform: translate(-5%, 25%); } 50% { -webkit-transform: translate(-15%, 10%); -moz-transform: translate(-15%, 10%); -ms-transform: translate(-15%, 10%); -o-transform: translate(-15%, 10%); transform: translate(-15%, 10%); } 60% { -webkit-transform: translate(15%, 0%); -moz-transform: translate(15%, 0%); -ms-transform: translate(15%, 0%); -o-transform: translate(15%, 0%); transform: translate(15%, 0%); } 70% { -webkit-transform: translate(0%, 15%); -moz-transform: translate(0%, 15%); -ms-transform: translate(0%, 15%); -o-transform: translate(0%, 15%); transform: translate(0%, 15%); } 80% { -webkit-transform: translate(3%, 35%); -moz-transform: translate(3%, 35%); -ms-transform: translate(3%, 35%); -o-transform: translate(3%, 35%); transform: translate(3%, 35%); } 90% { -webkit-transform: translate(-10%, 10%); -moz-transform: translate(-10%, 10%); -ms-transform: translate(-10%, 10%); -o-transform: translate(-10%, 10%); transform: translate(-10%, 10%); } 100% { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } } @keyframes film { 0% { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } 10% { -webkit-transform: translate(-5%, -10%); -moz-transform: translate(-5%, -10%); -ms-transform: translate(-5%, -10%); -o-transform: translate(-5%, -10%); transform: translate(-5%, -10%); } 20% { -webkit-transform: translate(-15%, 5%); -moz-transform: translate(-15%, 5%); -ms-transform: translate(-15%, 5%); -o-transform: translate(-15%, 5%); transform: translate(-15%, 5%); } 30% { -webkit-transform: translate(7%, -25%); -moz-transform: translate(7%, -25%); -ms-transform: translate(7%, -25%); -o-transform: translate(7%, -25%); transform: translate(7%, -25%); } 40% { -webkit-transform: translate(-5%, 25%); -moz-transform: translate(-5%, 25%); -ms-transform: translate(-5%, 25%); -o-transform: translate(-5%, 25%); transform: translate(-5%, 25%); } 50% { -webkit-transform: translate(-15%, 10%); -moz-transform: translate(-15%, 10%); -ms-transform: translate(-15%, 10%); -o-transform: translate(-15%, 10%); transform: translate(-15%, 10%); } 60% { -webkit-transform: translate(15%, 0%); -moz-transform: translate(15%, 0%); -ms-transform: translate(15%, 0%); -o-transform: translate(15%, 0%); transform: translate(15%, 0%); } 70% { -webkit-transform: translate(0%, 15%); -moz-transform: translate(0%, 15%); -ms-transform: translate(0%, 15%); -o-transform: translate(0%, 15%); transform: translate(0%, 15%); } 80% { -webkit-transform: translate(3%, 35%); -moz-transform: translate(3%, 35%); -ms-transform: translate(3%, 35%); -o-transform: translate(3%, 35%); transform: translate(3%, 35%); } 90% { -webkit-transform: translate(-10%, 10%); -moz-transform: translate(-10%, 10%); -ms-transform: translate(-10%, 10%); -o-transform: translate(-10%, 10%); transform: translate(-10%, 10%); } 100% { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } } .snapic-film-scratch { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; background-image: url('../img/film_scratch.webp'); background-repeat: no-repeat; background-size: cover; background-position: center; opacity: .05; }