span.cap {/*/ span «cap» работает переключателем,  обычно скрыт*/
    //display:none;
	opacity:0;
}

ul.slider {
    margin:0 auto;
    height:455px;
    list-style:none;
    position:relative;
    width:706px;
}

ul.slider li {/*/пункты слайдера – стрелки и слайды*/
    float:left;

    -moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;
    -webkit-transition: 1s;
    transition: 1s;
}

ul.slider li.slides {
    //border:1px solid #888;
    height:453px;
    overflow:hidden;
    position:relative;
    width:604px;
    z-index:10;

    -moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;
    -webkit-transition: 1s;
    transition: 1s;
}

ul.slider li.slides img {/*/картинки в слайдах*/
    display:block;
    left:50%;
    opacity:0; 
    position:absolute;
    top:0;

    -moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;
    -webkit-transition: 1s;
    transition: 1s;
}

ul.slider li.lArrow,
ul.slider li.rArrow {
    background-color:#ccc;
    //border:2px solid #888;
    //height:451px;
	top:200px;
    position:relative;
    //width:48px;
	height:60px;
	width:40px;
    z-index:5;
}

ul.slider li.lArrow a,
ul.slider li.rArrow a {
    display:block;
    //height:100%;
    //left:0;
    position:absolute;
    top:-10px;
    width:50px;
	
	
}

/*/свойства для картинок*/
ul.slider li.slides img.g1,
ul.slider li.slides img.g2,
ul.slider li.slides img.g3,
ul.slider li.slides img.g4,
ul.slider li.slides img.g5,
ul.slider li.slides img.g6,
ul.slider li.slides img.g7,
ul.slider li.slides img.g8,
ul.slider li.slides img.g9,
ul.slider li.slides img.g10,
ul.slider li.slides img.g11,
ul.slider li.slides img.g12,
ul.slider li.slides img.g13,
ul.slider li.slides img.g14,
ul.slider li.slides img.g15,
ul.slider li.slides img.g16,
ul.slider li.slides img.g17,
ul.slider li.slides img.g18,
ul.slider li.slides img.g19,
ul.slider li.slides img.g20 {
    margin-left:-302px /*/сдвинуты пока налево*/
}
/*/свойства для стрелок*/
ul.slider li.lArrow,
ul.slider li.rArrow {
    background-color:#ccc;
	top:300px;
	
    position:relative;
    //width:48px;
	height:50px;
	width:40px;
    z-index:100;
}
ul.slider li.lArrow {/*/левая стрелка*/
	//border-radius:100px 0 0 100px;
    //border-width:2px 0 2px 2px;
	left:-15px;
	
}
ul.slider li.rArrow {/*/правая стрелка*/
	//border-radius:0 100px 100px 0;
    //border-width:2px 2px 2px 0;
	left:15px;
}

	
}
ul.slider li.lArrow a:before { /*/привязываем перед ссылкой знак “<”*/
	content:url(images/a.png);
    margin-left:-20px;

	
}
ul.slider li.rArrow a:after {/*/привязываем после ссылки знак “>”*/
	content:url(images/s.png);
    margin-left:-20px;
	
	
}
ul.slider li.lArrow:hover {/*/меняем цвет при наведении на левую стрелку*/
    background-color:#eee;
    left:2px;
}
ul.slider li.rArrow:hover {/*/меняем цвет при наведении на правую стрелку*/
    background-color:#eee;
    left:-2px;
}

ul.slider li.lArrow a:before {
	content:url(images/a.png);
    margin-left:-20px;
}

ul.slider li.track {
    background-color:rgba(125,0,0,1);
    clear:left;
    height:25px;
    margin-left:41px;
    margin-top:-25px;
    position:relative;
    text-align:center;
    width:604px;
    z-index:20;
}
ul.slider li.track a {/*/точки под картинкой*/

    background-color:#925482;
    display:inline-block;
    height:15px;
    margin:5px;
    width:10px;

    border-radius:0px;
}
ul.slider li.slides .g1/*g0*/ {
    margin-left:-302px;
    opacity:1;

}

ul.slider li.track a:hover {/*/цвет точки при наведении*/
    background-color:#102543;
}
/*/при нажатии на стрелку цель (target) – тэги «span» с классом «cap», в зависимости, //какой  «span» активизирован, активизируется соответствующий соседний (~) слайд.*/
span#slide1:target ~ ul.slider li.slides .g1,
span#slide2:target ~ ul.slider li.slides .g2,
span#slide3:target ~ ul.slider li.slides .g3,
span#slide4:target ~ ul.slider li.slides .g4,
span#slide5:target ~ ul.slider li.slides .g5,
span#slide6:target ~ ul.slider li.slides .g6,
span#slide7:target ~ ul.slider li.slides .g7,
span#slide8:target ~ ul.slider li.slides .g8,
span#slide9:target ~ ul.slider li.slides .g9,
span#slide10:target ~ ul.slider li.slides .g10, 
span#slide11:target ~ ul.slider li.slides .g11,
span#slide12:target ~ ul.slider li.slides .g12,
span#slide13:target ~ ul.slider li.slides .g13,
span#slide14:target ~ ul.slider li.slides .g14,
span#slide15:target ~ ul.slider li.slides .g15,
span#slide16:target ~ ul.slider li.slides .g16,
span#slide17:target ~ ul.slider li.slides .g17,
span#slide18:target ~ ul.slider li.slides .g18,
span#slide19:target ~ ul.slider li.slides .g19,
span#slide20:target ~ ul.slider li.slides .g20 {
    opacity:1;
}
ul.slider li.slides .g1{/*/видна вначале первая картинка*/
    margin-left:-302px;
    opacity:1;

    /*-moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
*/
}
/*/при нажатии на стрелку цель (target) – тэги «span» с классом «cap», в зависимости, //какой  «span» активизирован, активизируется соответствующие соседние (~) точка и //стрелка.*/
span#slide1:target ~ ul.slider li.track .tr1, 
span#slide2:target ~ ul.slider li.track .tr2, 
span#slide3:target ~ ul.slider li.track .tr3, 
span#slide4:target ~ ul.slider li.track .tr4, 
span#slide5:target ~ ul.slider li.track .tr5,
span#slide6:target ~ ul.slider li.track  .tr6,
span#slide7:target ~ ul.slider li.track  .tr7,
span#slide8:target ~ ul.slider li.track  .tr8,
span#slide9:target ~ ul.slider li.track  .tr9,
span#slide10:target ~ ul.slider li.track  .tr10, 
span#slide11:target ~ ul.slider li.track .tr11, 
span#slide12:target ~ ul.slider li.track .tr12, 
span#slide13:target ~ ul.slider li.track .tr13, 
span#slide14:target ~ ul.slider li.track .tr14, 
span#slide15:target ~ ul.slider li.track .tr15,
span#slide16:target ~ ul.slider li.track  .tr16,
span#slide17:target ~ ul.slider li.track  .tr17,
span#slide18:target ~ ul.slider li.track  .tr18,
span#slide19:target ~ ul.slider li.track  .tr19,
span#slide20:target ~ ul.slider li.track  .tr20 {/*/цвет точки при нажатии*/
    background-color:#951; 
}

span#slide1:target ~ ul.slider li.lArrow a,
span#slide1:target ~ ul.slider li.rArrow a {z-index:10}
span#slide1:target ~ ul.slider li.rArrow .a2 {z-index:100}
span#slide1:target ~ ul.slider li.lArrow .a10 {z-index:100}

span#slide2:target ~ ul.slider li.lArrow a,
span#slide2:target ~ ul.slider li.rArrow a {z-index:10}
span#slide2:target ~ ul.slider li.rArrow .a3 {z-index:100}
span#slide2:target ~ ul.slider li.lArrow .a1 {z-index:100}

span#slide3:target ~ ul.slider li.lArrow a,
span#slide3:target ~ ul.slider li.rArrow a {z-index:10}
span#slide3:target ~ ul.slider li.rArrow .a4 {z-index:100}
span#slide3:target ~ ul.slider li.lArrow .a2 {z-index:100}

span#slide4:target ~ ul.slider li.lArrow a,
span#slide4:target ~ ul.slider li.rArrow a {z-index:10}
span#slide4:target ~ ul.slider li.rArrow .a5 {z-index:100}
span#slide4:target ~ ul.slider li.lArrow .a3 {z-index:100}

span#slide5:target ~ ul.slider li.lArrow a,
span#slide5:target ~ ul.slider li.rArrow a {z-index:10}
span#slide5:target ~ ul.slider li.rArrow .a6 {z-index:100}
span#slide5:target ~ ul.slider li.lArrow .a4 {z-index:100}

span#slide6:target ~ ul.slider li.lArrow a,
span#slide6:target ~ ul.slider li.rArrow a {z-index:10}
span#slide6:target ~ ul.slider li.rArrow .a7 {z-index:100}
span#slide6:target ~ ul.slider li.lArrow .a5 {z-index:100}

span#slide7:target ~ ul.slider li.lArrow a,
span#slide7:target ~ ul.slider li.rArrow a {z-index:10}
span#slide7:target ~ ul.slider li.rArrow .a8 {z-index:100}
span#slide7:target ~ ul.slider li.lArrow .a6 {z-index:100}

span#slide8:target ~ ul.slider li.lArrow a,
span#slide8:target ~ ul.slider li.rArrow a {z-index:10}
span#slide8:target ~ ul.slider li.rArrow .a9 {z-index:100}
span#slide8:target ~ ul.slider li.lArrow .a7 {z-index:100}

span#slide9:target ~ ul.slider li.lArrow a,
span#slide9:target ~ ul.slider li.rArrow a {z-index:10}
span#slide9:target ~ ul.slider li.rArrow .a10 {z-index:100}
span#slide9:target ~ ul.slider li.lArrow .a8 {z-index:100}

span#slide10:target ~ ul.slider li.lArrow a,
span#slide10:target ~ ul.slider li.rArrow a {z-index:10}
span#slide10:target ~ ul.slider li.rArrow .a11 {z-index:100}
span#slide10:target ~ ul.slider li.lArrow .a9 {z-index:100}

span#slide11:target ~ ul.slider li.lArrow a,
span#slide11:target ~ ul.slider li.rArrow a {z-index:10}
span#slide11:target ~ ul.slider li.rArrow .a12 {z-index:100}
span#slide11:target ~ ul.slider li.lArrow .a10 {z-index:100}

span#slide12:target ~ ul.slider li.lArrow a,
span#slide12:target ~ ul.slider li.rArrow a {z-index:10}
span#slide12:target ~ ul.slider li.rArrow .a13 {z-index:100}
span#slide12:target ~ ul.slider li.lArrow .a11 {z-index:100}

span#slide13:target ~ ul.slider li.lArrow a,
span#slide13:target ~ ul.slider li.rArrow a {z-index:10}
span#slide13:target ~ ul.slider li.rArrow .a14 {z-index:100}
span#slide13:target ~ ul.slider li.lArrow .a12 {z-index:100}

span#slide14:target ~ ul.slider li.lArrow a,
span#slide14:target ~ ul.slider li.rArrow a {z-index:10}
span#slide14:target ~ ul.slider li.rArrow .a15 {z-index:100}
span#slide14:target ~ ul.slider li.lArrow .a13 {z-index:100}

span#slide15:target ~ ul.slider li.lArrow a,
span#slide15:target ~ ul.slider li.rArrow a {z-index:10}
span#slide15:target ~ ul.slider li.rArrow .a16 {z-index:100}
span#slide15:target ~ ul.slider li.lArrow .a14{z-index:100}

span#slide16:target ~ ul.slider li.lArrow a,
span#slide16:target ~ ul.slider li.rArrow a {z-index:10}
span#slide16:target ~ ul.slider li.rArrow .a17 {z-index:100}
span#slide16:target ~ ul.slider li.lArrow .a15 {z-index:100}

span#slide17:target ~ ul.slider li.lArrow a,
span#slide17:target ~ ul.slider li.rArrow a {z-index:10}
span#slide17:target ~ ul.slider li.rArrow .a18 {z-index:100}
span#slide17:target ~ ul.slider li.lArrow .a16 {z-index:100}

span#slide18:target ~ ul.slider li.lArrow a,
span#slide18:target ~ ul.slider li.rArrow a {z-index:10}
span#slide18:target ~ ul.slider li.rArrow .a19 {z-index:100}
span#slide18:target ~ ul.slider li.lArrow .a17 {z-index:100}

span#slide19:target ~ ul.slider li.lArrow a,
span#slide19:target ~ ul.slider li.rArrow a {z-index:10}
span#slide19:target ~ ul.slider li.rArrow .a20 {z-index:100}
span#slide19:target ~ ul.slider li.lArrow .a18 {z-index:100}

span#slide20:target ~ ul.slider li.lArrow a,
span#slide20:target ~ ul.slider li.rArrow a {z-index:10}
span#slide20:target ~ ul.slider li.rArrow .a1 {z-index:100}
span#slide20:target ~ ul.slider li.lArrow .a19 {z-index:100}