/* Copyright © 2022 Codeconvey * * PLEASE READ THIS POLICY CAREFULLY. BY ACCESSING THIS WEBSITE YOU * AGREE TO BE BOUND BY THE TERMS AND CONDITIONS BELOW. * THESE TERMS AND CONDITIONS ARE SUBJECT TO CHANGE WITHOUT NOTICE, * FROM TIME TO TIME IN OUR SOLE DISCRETION. IF YOU DO NOT * AGREE WITH THESE TERMS AND CONDITIONS, PLEASE DO NOT * ACCESS THIS WEBSITE. * * Permission is hereby granted, free of charge, to any person obtaining * a copy of this software and associated documentation files (the “Software”), * to deal in the Software without restriction, including without limitation the * rights to use, copy, modify, merge, publish, distribute, sublicense, * and/or sell copies of the Software, and to permit persons to whom the Software * is furnished to do so, subject to the following conditions: * * The above copyright notice and this permission notice shall be included * in all copies or substantial portions of the Software. * * THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. * IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, * DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR * OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR * THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ .csslider { display: inline-block; text-align: left; position: relative; margin-bottom: 22px; } .csslider>input { display: none; } .csslider>input:nth-of-type(10):checked~ul li:first-of-type { margin-left: -900.6%; } .csslider>input:nth-of-type(9):checked~ul li:first-of-type { margin-left: -800.4%; } .csslider>input:nth-of-type(8):checked~ul li:first-of-type { margin-left: -700.2%; } .csslider>input:nth-of-type(7):checked~ul li:first-of-type { margin-left: -601%; } .csslider>input:nth-of-type(6):checked~ul li:first-of-type { margin-left: -500.8%; } .csslider>input:nth-of-type(5):checked~ul li:first-of-type { margin-left: -400.6%; } .csslider>input:nth-of-type(4):checked~ul li:first-of-type { margin-left: -300.4%; } .csslider>input:nth-of-type(3):checked~ul li:first-of-type { margin-left: -200.2%; } .csslider>input:nth-of-type(2):checked~ul li:first-of-type { margin-left: -100.1%; } .csslider>input:nth-of-type(1):checked~ul li:first-of-type { margin-left: 0%; } .csslider>ul { position: relative; max-width: 80%; /*height: 420px;*/ z-index: 1; font-size: 0; line-height: 0; background-color: #3A3A3A; border: 10px solid #3A3A3A; margin: 0 auto; padding: 0; overflow: hidden; white-space: nowrap; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .csslider>ul>li { position: relative; display: inline-block; width: 100%; height: 100%; overflow: hidden; font-size: 15px; font-size: initial; line-height: normal; -moz-transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1); -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1); transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1); vertical-align: top; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; white-space: normal; } .csslider>ul>li.scrollable { overflow-y: scroll; } .csslider>.navigation { position: absolute; bottom: 30px; left: 50%; z-index: 10; margin-bottom: -10px; font-size: 0; line-height: 0; text-align: center; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .csslider>.navigation>div { margin-left: -100%; } .csslider>.navigation label { position: relative; display: inline-block; cursor: pointer; border-radius: 50%; margin: 0 4px; padding: 4px; background: transparent none repeat scroll 0 0; } .csslider>.navigation label:hover:after { opacity: 1; } .csslider>.navigation label:after { content: ''; position: absolute; left: 50%; top: 50%; margin-left: -6px; margin-top: -6px; background: transparent none repeat scroll 0 0; border-radius: 50%; padding: 6px; opacity: 0; } .csslider>.arrows { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .csslider.inside .navigation { bottom: 10px; margin-bottom: 10px; } .csslider.inside .navigation label { border: 1px solid #7e7e7e; } .csslider>input:nth-of-type(1):checked~.navigation label:nth-of-type(1):after, .csslider>input:nth-of-type(2):checked~.navigation label:nth-of-type(2):after, .csslider>input:nth-of-type(3):checked~.navigation label:nth-of-type(3):after, .csslider>input:nth-of-type(4):checked~.navigation label:nth-of-type(4):after, .csslider>input:nth-of-type(5):checked~.navigation label:nth-of-type(5):after, .csslider>input:nth-of-type(6):checked~.navigation label:nth-of-type(6):after, .csslider>input:nth-of-type(7):checked~.navigation label:nth-of-type(7):after, .csslider>input:nth-of-type(8):checked~.navigation label:nth-of-type(8):after, .csslider>input:nth-of-type(9):checked~.navigation label:nth-of-type(9):after, .csslider>input:nth-of-type(10):checked~.navigation label:nth-of-type(10):after, .csslider>input:nth-of-type(11):checked~.navigation label:nth-of-type(11):after { opacity: 1; } .csslider>.arrows { position: absolute; left: -16px; top: 50%; width: 100%; height: 26px; padding: 0 16px; z-index: 0; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } .csslider>.arrows label { display: none; position: absolute; top: -50%; padding: 13px; box-shadow: inset 2px -2px 0 1px #3A3A3A; cursor: pointer; -moz-transition: box-shadow 0.15s, margin 0.15s; -o-transition: box-shadow 0.15s, margin 0.15s; -webkit-transition: box-shadow 0.15s, margin 0.15s; transition: box-shadow 0.15s, margin 0.15s; } .csslider>.arrows label:hover { box-shadow: inset 3px -3px 0 2px #71ad37; margin: 0 0px; } .csslider>.arrows label:before { content: ''; position: absolute; top: -100%; left: -100%; height: 300%; width: 300%; } .csslider.infinity>input:first-of-type:checked~.arrows label.goto-last, .csslider>input:nth-of-type(1):checked~.arrows>label:nth-of-type(0), .csslider>input:nth-of-type(2):checked~.arrows>label:nth-of-type(1), .csslider>input:nth-of-type(3):checked~.arrows>label:nth-of-type(2), .csslider>input:nth-of-type(4):checked~.arrows>label:nth-of-type(3), .csslider>input:nth-of-type(5):checked~.arrows>label:nth-of-type(4), .csslider>input:nth-of-type(6):checked~.arrows>label:nth-of-type(5), .csslider>input:nth-of-type(7):checked~.arrows>label:nth-of-type(6), .csslider>input:nth-of-type(8):checked~.arrows>label:nth-of-type(7), .csslider>input:nth-of-type(9):checked~.arrows>label:nth-of-type(8), .csslider>input:nth-of-type(10):checked~.arrows>label:nth-of-type(9), .csslider>input:nth-of-type(11):checked~.arrows>label:nth-of-type(10) { display: block; left: 0; right: auto; -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); } .csslider.infinity>input:last-of-type:checked~.arrows label.goto-first, .csslider>input:nth-of-type(1):checked~.arrows>label:nth-of-type(2), .csslider>input:nth-of-type(2):checked~.arrows>label:nth-of-type(3), .csslider>input:nth-of-type(3):checked~.arrows>label:nth-of-type(4), .csslider>input:nth-of-type(4):checked~.arrows>label:nth-of-type(5), .csslider>input:nth-of-type(5):checked~.arrows>label:nth-of-type(6), .csslider>input:nth-of-type(6):checked~.arrows>label:nth-of-type(7), .csslider>input:nth-of-type(7):checked~.arrows>label:nth-of-type(8), .csslider>input:nth-of-type(8):checked~.arrows>label:nth-of-type(9), .csslider>input:nth-of-type(9):checked~.arrows>label:nth-of-type(10), .csslider>input:nth-of-type(10):checked~.arrows>label:nth-of-type(11), .csslider>input:nth-of-type(11):checked~.arrows>label:nth-of-type(12) { display: block; right: 0; left: auto; -moz-transform: rotate(225deg); -ms-transform: rotate(225deg); -o-transform: rotate(225deg); -webkit-transform: rotate(225deg); transform: rotate(225deg); } .slide { max-width: 100%; max-height: 100%; } /*#region MODULES */ /*#endregion */ /*___________________________________ LAYOUT ___________________________________ */ * { margin: 0; padding: 0; } ::-webkit-scrollbar { width: 2px; background: rgba(255, 255, 255, 0.1); } ::-webkit-scrollbar-track { background: none; } ::-webkit-scrollbar-thumb { background: rgba(74, 168, 0, 0.6); } ul, ol { padding-left: 40px; } html, body { text-align: center; /*font: 400 100% 'Raleway', 'Lato';*/ background-color: #282828; color: #CCC; } h1 { font-weight: 700; font-size: 310%; } h2 { font-weight: 400; font-size: 120%; color: #71AD37; } #slider1 { margin: 20px; font-family: 'Lato'; } /* #slider1>ul>li:nth-of-type(3) { background: url(https://raw.github.com/drygiel/csslider/master/examples/themes/fruit.jpg); } */ #slider1>input:nth-of-type(3):checked~ul #bg { width: 80%; padding: 22px; -moz-transition: .5s .5s; -o-transition: .5s .5s; -webkit-transition: .5s .5s; transition: .5s .5s; } #slider1>input:nth-of-type(3):checked~ul #bg div { -moz-transform: translate(0); -ms-transform: translate(0); -o-transform: translate(0); -webkit-transform: translate(0); transform: translate(0); -moz-transition: .5s .9s; -o-transition: .5s .9s; -webkit-transition: .5s .9s; transition: .5s .9s; } #bg { color: #000; padding: 22px 0; position: absolute; left: 0; top: 16%; height: 20%; width: 0; z-index: 10; overflow: hidden; } #bg:before { content: ''; position: absolute; left: -1px; top: 1px; height: 100%; width: 100%; z-index: -1; /*background: url(https://raw.github.com/drygiel/csslider/master/examples/themes/fruit.jpg) 1px 23%;*/ -webkit-filter: blur(7px); } #bg:after { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 100%; z-index: 20; background: rgba(0, 0, 0, 0.35); pointer-events: none; } #bg div { -moz-transform: translate(120%); -ms-transform: translate(120%); -o-transform: translate(120%); -webkit-transform: translate(120%); transform: translate(120%); } .scrollable p { padding: 30px; text-align: justify; line-height: 140%; font-size: 120%; } #center { text-align: center; margin-top: 25%; } #center a { text-decoration: none; text-transform: uppercase; letter-spacing: 2px; font-variant: small-caps; } /*___________________________________ LINK ___________________________________ */ a.nice-link { position: relative; color: #71ad37; } h1 a.nice-link:after { border-bottom: 1px solid #a5ff0e; } a.nice-link:after { text-align: justify; display: inline-block; content: attr(data-text); position: absolute; left: 0; top: 0; white-space: nowrap; overflow: hidden; color: #a5ff0e; min-height: 100%; width: 0; max-width: 100%; background: #3A3A3A; -moz-transition: .3s; -o-transition: .3s; -webkit-transition: .3s; transition: .3s; } a.nice-link:hover { color: #71ad37; } a.nice-link:hover:after { width: 100%; } /*___________________________________ SIGN ___________________________________ */ #dex-sign { width: 255px; height: 84px; position: absolute; left: 33%; top: 45%; opacity: .7; /*background: url(http://www.drygiel.com/projects/sign/frames-255-white.png) 0 0 no-repeat;*/ } #dex-sign:hover { opacity: 1; -webkit-filter: invert(30%) brightness(80%) sepia(100%) contrast(110%) saturate(953%) hue-rotate(45deg); }