@font-face { font-family: 'BebasNeueRegular'; src: url('fonts/BebasNeue-webfont.eot'); src: url('fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/BebasNeue-webfont.woff') format('woff'), url('fonts/BebasNeue-webfont.ttf') format('truetype'), url('fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg'); font-weight: normal; font-style: normal; } .Slider{ display: block; overflow: hidden; position: relative; margin: 0 auto; border: 0px solid #fff; box-shadow: 1px 1px 3px rgba(0,0,0,0.1); text-align:center; } .Slider, .Slider .Img{ width: 1024px; height: 700px; } .Slider label{ font-style: italic; width: 256px; height: 30px; cursor: pointer; color: #fff; line-height: 32px; font-size: 24px; float:left; position: relative; margin-top:650px; z-index: 0; } .Slider label:before{ content:''; width: 34px; height: 34px; background: rgba(130,195,217,0.9); position: absolute; left: 50%; margin-left: -17px; border-radius: 50%; box-shadow: 0px 0px 0px 4px rgba(255,255,255,0.3); z-index:-1; } .Slider label:after{ width: 1px; height: 700px; content: ''; background-color:#FFF; position: absolute; bottom: -20px; right: 0px; } .Slider label.cr-label-img-4:after{ width: 0px; } .Slider input.selImg1:checked ~ label.cr-label-img-1, .Slider input.selImg2:checked ~ label.cr-label-img-2, .Slider input.selImg3:checked ~ label.cr-label-img-3, .Slider input.selImg4:checked ~ label.cr-label-img-4{ color: #68abc2; } .Slider input.selImg1:checked ~ label.cr-label-img-1:before, .Slider input.selImg2:checked ~ label.cr-label-img-2:before, .Slider input.selImg3:checked ~ label.cr-label-img-3:before, .Slider input.selImg4:checked ~ label.cr-label-img-4:before{ background: #fff; box-shadow: 0px 0px 0px 4px rgba(104,171,194,0.6); } .Slider input{ display: none; } .Slider .Img{ position: absolute; left: 0px; top: 0px; z-index: -2; } .Slider .Img{ background-repeat: no-repeat; background-position: 0 0; } .Slider .Img div{ width: 256px; height: 100%; position: relative; float: left; overflow: hidden; background-repeat: no-repeat; } .Slider .Img div span{ position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; -webkit-transform: scale(2); -moz-transform: scale(2); -o-transform: scale(2); -ms-transform: scale(2); transform: scale(2); opacity: 0; text-indent: -9000px; } .Slider input.selImg1:checked ~ .Img, .Slider .Img div span:nth-child(1){ background-image: url(../img/intro/04.jpg); } .Slider input.selImg2:checked ~ .Img, .Slider .Img div span:nth-child(2){ background-image: url(../img/intro/07.jpg); } .Slider input.selImg3:checked ~ .Img, .Slider .Img div span:nth-child(3){ background-image: url(../img/intro/06.jpg); } .Slider input.selImg4:checked ~ .Img, .Slider .Img div span:nth-child(4){ background-image: url(../img/intro/02.jpg); } .Slider .Img div:nth-child(1) span{ background-position: 0px 0px; } .Slider .Img div:nth-child(2) span{ background-position: -256px 0px; } .Slider .Img div:nth-child(3) span{ background-position: -512px 0px; } .Slider .Img div:nth-child(4) span{ background-position: -768px 0px; } .Slider input:checked ~ .Img div span{ -webkit-animation: scaleOut 0.6s ease-in-out; -moz-animation: scaleOut 0.6s ease-in-out; -o-animation: scaleOut 0.6s ease-in-out; -ms-animation: scaleOut 0.6s ease-in-out; animation: scaleOut 0.6s ease-in-out; } @-webkit-keyframes scaleOut{ 0%{ -webkit-transform: scale(1); opacity: 1; } 100%{ -webkit-transform: scale(1.5); opacity: 0; } } @-moz-keyframes scaleOut{ 0%{ -moz-transform: scale(1); opacity: 1; } 100%{ -moz-transform: scale(1.5); opacity: 0; } } @-o-keyframes scaleOut{ 0%{ -o-transform: scale(1); opacity: 1; } 100%{ -o-transform: scale(1.5); opacity: 0; } } @-ms-keyframes scaleOut{ 0%{ -ms-transform: scale(1); opacity: 1; } 100%{ -ms-transform: scale(1.5); opacity: 0; } } @keyframes scaleOut{ 0%{ transform: scale(1); opacity: 1; } 100%{ transform: scale(1.5); opacity: 0; } } .Slider input.selImg1:checked ~ .Img div span:nth-child(1), .Slider input.selImg2:checked ~ .Img div span:nth-child(2), .Slider input.selImg3:checked ~ .Img div span:nth-child(3), .Slider input.selImg4:checked ~ .Img div span:nth-child(4) { -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out; -moz-transition: -moz-transform 0.5s ease-in-out, opacity 0.5s ease-in-out; -o-transition: -o-transform 0.5s ease-in-out, opacity 0.5s ease-in-out; -ms-transition: -ms-transform 0.5s ease-in-out, opacity 0.5s ease-in-out; transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; -webkit-animation: none; -moz-animation: none; -o-animation: none; -ms-animation: none; animation: none; opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .Slider .Title h3{ color: #FFF; text-shadow: 1px 1px 1px rgba(0,0,0,0.5); } .Slider .Title h3 span{ position: absolute; width: 100%; left: 0px; text-align: center; opacity: 0; top: 65%; z-index: 0; } .Slider .Title h3 span:nth-child(1){ left: 0px; font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif; font-size: 70px; letter-spacing: 7px; /*color: transparent;*/ color: #fff; text-shadow: 0px 0px 10px #fff; -webkit-transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out; -moz-transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out; -o-transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out; -ms-transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out; transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out; } .Slider .Title h3 span:nth-child(2){ margin-top: 84px; letter-spacing: 0px; background: rgba(104,171,194,0.9); font-size: 20px; padding: 10px 0px; font-style: italic; font-family: Cambria, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif; -webkit-transition: opacity 0.8s ease-in-out; -moz-transition: opacity 0.8s ease-in-out; -o-transition: opacity 0.8s ease-in-out; -ms-transition: opacity 0.8s ease-in-out; transition: opacity 0.8s ease-in-out; } .Slider input:checked ~ .Title h3 span{ opacity: 0; text-shadow: 0px 0px 30px #fff; } .Slider input.selImg1:checked ~ .Title h3:nth-child(1) span:nth-child(1), .Slider input.selImg2:checked ~ .Title h3:nth-child(2) span:nth-child(1), .Slider input.selImg3:checked ~ .Title h3:nth-child(3) span:nth-child(1), .Slider input.selImg4:checked ~ .Title h3:nth-child(4) span:nth-child(1){ opacity: 1; /*text-shadow: 0px 0px 1px rgba(0,0,0,.5);*/ text-shadow: 1px 1px 0px #000; } .Slider input.selImg1:checked ~ .Title h3:nth-child(1) span:nth-child(2), .Slider input.selImg2:checked ~ .Title h3:nth-child(2) span:nth-child(2), .Slider input.selImg3:checked ~ .Title h3:nth-child(3) span:nth-child(2), .Slider input.selImg4:checked ~ .Title h3:nth-child(4) span:nth-child(2){ opacity: 1; }