@charset "utf-8";

.container{/*контейнер вывода слайдера*/
height:300px;/*высота блока*/
text-align:center;/*текст по центру блока*/
width:399px;/*ширина блока*/
}
.cr-container{/*контейнер слайдера*/
border:20px solid #f8f8f8;/*свойства рамки*/
box-shadow:1px 1px 3px rgba(0,0,0,.7);/*тень блока*/
height:300px;/*высота блока*/
position:absolute;/*позиционирование абсолютное*/
width:399px;/*ширина блока*/
}
.cr-container label{/*блоки выбора слайда*/
color:#fff;/*цвет чисел*/
cursor:pointer;/*курсор как указатель*/
font:italic 1em 'Times new roman',Arial;/*свойства шрифта*/
float:left;/*примыкание контейнера слева*/
height:1.5em;/*высота блока*/
position:relative;/*позиция варьируется*/
top:270px;/*отступ свеху*/
width:19.4%;/*ширина блока*/
z-index:10;/*верхний слой*/
}
.cr-container label:before{/*контент всех кнопок выбора слайда*/
background:rgba(0,204,255,.9);/*цвет круглой кнопки и прозрачность*/
box-shadow:0 0 0 4px rgba(255,255,255,.5);/*тени круглой кнопки до нажатия*/
border-radius:50%;/*радиус бордюра - кнопки круглые*/
content:'';/*контент*/
height:20px;/*высота блока кнопки*/
left:40%;/*расположение кругов слева*/
position:absolute;/*позиционирование абсолютное*/
width:20px;/*ширина блока кнопки*/
z-index:-1;/*нижний слой*/
}
.cr-container label:after{/*полоски*/
width:1px;/*ширина*/
height:300px;/*высота*/
content:'';/*контент*/
background:gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1)));
background:-moz-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1)));
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1)));
background:-o-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1)));
background:-ms-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1)));/*градиент*/
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0ff', endColorstr='#fff',GradientType=0 );/*фильтр Майкрософт*/
position:absolute;/*позиция абсолютная*/
bottom:-6px;/*отступает от родителя до конца вниз*/
right:0;/*расположение справа*/
}
/*классы выбора кнопок и показа картинок выбранное пользователем*/
.cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1,
.cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2,
.cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3,
.cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4,
.cr-container input.cr-selector-img-5:checked ~ label.cr-label-img-5{
color:#0cf;/*цвет числа нажатой кнопки*/
}
.cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1:before,
.cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2:before,
.cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3:before,
.cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4:before,
.cr-container input.cr-selector-img-5:checked ~ label.cr-label-img-5:before{
background:#fff;/*цвет нажатой круглой кнопки*/
box-shadow:0 0 0 4px rgba(0,204,255,.7);/*тень блока*/
}
.cr-container input{
display:none;/*контейнер выбора не виден*/
}
.cr-bgimg{/*контейнер вывода картинки*/
background-repeat:no-repeat;/*картинка без повтора*/
width:400px;/*ширина блока*/
height:300px;/*высота блока*/
position:absolute;/*позиционирование абсолютное*/
z-index:1;/*слой 1*/
}
/*контейнеры картинок вывода*/
.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg{
background-image:url("../img/1.jpg");
}
.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg{
background-image:url("../img/2.jpg");
}
.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg{
background-image:url("../img/3.jpg");
}
.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg{
background-image:url("../img/4.jpg");
}
.cr-container input.cr-selector-img-5:checked ~ .cr-bgimg{
background-image:url("../img/5.jpg");
}
/*скорость трансформации разделов текста*/
.cr-container input:checked ~ .cr-bgimg div span{
-webkit-animation:scaleOut .3s ease-in-out;
-moz-animation:scaleOut .3s ease-in-out;
animation:scaleOut .3s 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; }
}
/*привязка классов трансформации разделов текста вместе с картинками*/
.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg div span:nth-child(1),
.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg div span:nth-child(2),
.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg div span:nth-child(3),
.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg div span:nth-child(4),
.cr-container input.cr-selector-img-5:checked ~ .cr-bgimg div span:nth-child(5)
{
-webkit-transition:-webkit-transform .3s ease-in-out, opacity .3s ease-in-out, z-index 0s linear .4s;
-moz-transition:-moz-transform .3s ease-in-out, opacity .3s ease-in-out, z-index 0s linear .4s;
transition:transform .3s ease-in-out, opacity .3s ease-in-out, z-index 0s linear .4s;
-webkit-animation:none;
-moz-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);
z-index:10;
}
.cr-titles h3{/*свойства текста на ленте*/
font:bold 1em times new roman,arial;/*свойства шрифта*/
color:#fff;/*цвет букв*/
text-shadow:1px 1px 1px rgba(0,0,0,.1);/*свойства тени текста*/
}
.cr-titles h3 span{
font:bold 1em times new roman,arial;/*свойства шрифта*/
left:0;/*расположение слева*/
opacity:0;/*видимости изначально нет*/
position:absolute;/*позиционирование абсолютное*/
text-align:center;/*текст по центру*/
width:100%;/*ширина блока*/
z-index:10;/*верхний слой*/
}
.cr-titles h3 span:nth-child(1){/*главный заголовок*/
color:#ff0;/*цвет главный заголовок*/
font:bold 1.8em times new roman,arial;/*заголовка шрифт жирный размер имя*/
letter-spacing:5px;/*расстояние между символами*/
text-shadow:3px 3px 3px rgba(255,255,255,.5);/*свойства тени текста*/
top:60%;/*расположение сверху*/
-webkit-transition:text-shadow 0.7s ease-in-out, opacity 0.7s ease-in-out;
-moz-transition:text-shadow 0.7s ease-in-out, opacity 0.7s ease-in-out;
transition:text-shadow 0.7s ease-in-out, opacity 0.7s ease-in-out;/*трансформация текста*/
}
.cr-titles h3 span:nth-child(2){
background:rgba(0,204,255,.8);/*цвет ленты и прозрачность*/
font:bold italic 0.8em arial;/*свойства шрифта на ленте*/
letter-spacing:0;/*расстояние между символами*/
padding:5px 0;/*внутренние отступы*/
top:74%;/*отступ ленты от верха*/
-webkit-transition: opacity .8s ease-in-out;
-moz-transition: opacity .8s ease-in-out;
transition: opacity .8s ease-in-out;/*трансформация появления*/
}
.cr-container input:checked ~ .cr-titles h3 span{
opacity:0;/*изначально видимости нет*/
text-shadow:1px 1px 25px #000;/*свойства тени текста на ленте*/
}
.cr-container input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1) span:nth-child(1),
.cr-container input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2) span:nth-child(1),
.cr-container input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3) span:nth-child(1),
.cr-container input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4) span:nth-child(1),
.cr-container input.cr-selector-img-5:checked ~ .cr-titles h3:nth-child(5) span:nth-child(1){
opacity:1;/*полная видимость*/
text-shadow:0px 0px 1px #fff;/*свойства тени текста на ленте*/
}
.cr-container input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1) span:nth-child(2),
.cr-container input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2) span:nth-child(2),
.cr-container input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3) span:nth-child(2),
.cr-container input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4) span:nth-child(2),
.cr-container input.cr-selector-img-5:checked ~ .cr-titles h3:nth-child(5) span:nth-child(2){
opacity:1;/*полная видимость*/
}