/* Global */ /* Content Container */ /* Content box */ /* Navigation */ /* Colors */ /* Accordion */ /* Log */ /* Blockquote */ /* Breadcrumbs */ /* Input */ /* Button */ /* Canvas */ /* Article */ /* Form */ /* Icon */ /* Img */ /* list */ /* pagination */ /* pre */ /* tag */ img.frame-1 { padding: 5px; background: #fff; border: 1px solid #d6d6d6; -moz-box-shadow: inset 1px 1px 0px 0px #ffffff; -webkit-box-shadow: inset 1px 1px 0px 0px #ffffff; box-shadow: inset 1px 1px 0px 0px #ffffff; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; background-clip: padding-box; box-sizing: border-box; width: 100%; } img.frame-2 { border: 1px solid #d6d6d6; background: #fff; box-sizing: border-box; width: 100%; } img.frame-3 { padding: 5px; background: #fff; border: 1px solid #d6d6d6; -moz-box-shadow: inset 1px 1px 0px 0px #ffffff; -webkit-box-shadow: inset 1px 1px 0px 0px #ffffff; box-shadow: inset 1px 1px 0px 0px #ffffff; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; background-clip: padding-box; box-sizing: border-box; width: 100%; } @keyframes slidy { 0% { left: 0%; } 20% { left: 0%; } 25% { left: -100%; } 45% { left: -100%; } 50% { left: -200%; } 70% { left: -200%; } 75% { left: -300%; } 95% { left: -300%; } 100% { left: -400%; } } div.slider-1 { overflow: hidden; } div.slider-1 figure { position: relative; width: 500%; margin: 0; left: 0; text-align: left; font-size: 0; animation: 30s slidy infinite; } div.slider-1 figure img { width: 20%; float: left; } .slider-2 { width: 100%; position: relative; padding-top: auto; text-align: center; } .slider-2 > img { width: 100%; position: absolute; left: 0; top: 0; transition: all 0.5s; box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75); } .slider-2 input { display: none; } .slider-2 input:checked + label { border-color: #666; opacity: 1; } .slider-2 input:checked + label + img { opacity: 1; transform: scale(1); } .slider-2 input ~ img { opacity: 0; transform: scale(1.1); } .slider-2 label { display: inline-block; margin-top: calc(50% + 15px); margin-left: 15px; border: 3px solid #999; cursor: pointer; opacity: 0.6; } .slider-2 label img { display: block; } /*# sourceMappingURL=image.css.map */