@import url("../webfonts/HelveticaNeue_UltraLight/stylesheet.css");
@import url("../../../webfonts/HelveticaNeue_Light/stylesheet.css");
@import url("../../../webfonts/MyriadPro_Regular/stylesheet.css");


html { height: 100%; margin: 0; padding: 0; }

body {
	height: 100%;
	margin: 0;
	padding:0;
	color: #000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}

img {
	border: 0;
	display: block;
	font-size: 14px;
	font-family: Arial, Helvetica, sans-serif;
}

*{margin:0;padding:0;}

td{vertical-align:top;}

a{outline: none;}

a:hover{text-decoration:none;}



.clear {

       	clear:both;

       	line-height:1%;

       	margin-bottom:-1px;

       	height:1px;

       	overflow:hidden;

       	font-size:0px}



#conteiner {
	position: relative;
	min-height: 100%;
	width: 940px;
	margin: 0  auto;
	padding: 0 0 80px 0;
}



* html #conteiner {height: 100%;}



#header {height:225px;padding:33px 0 0 0;margin:0;}



#logo{margin:0;float:left;}



.contact {
	text-align:left;
	margin:0;
	padding:0;
	float:left;
}



p.namber {margin:0; padding:0;font:21px  Trebuchet MS;color: #929191;}

p.namber_smal {font:14px  Trebuchet MS;color: #929191; line-height:20px;}

p.namber_smal span{color: #669c09;}

p.namber_smal a{color: #669c09;}
#telefone a {color: #6caa02;text-decoration: none;}



#wrapper{width:940px; margin:-40px 0 0 0;padding:0;}



#left_bar{
	width: 213px;
	margin: 0;
	padding: 0;
	text-align: left;
}



ul.menu_left {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 14px;
}



.menu_left li{

         background: url('../images/li.gif') left bottom no-repeat;

         width: 213px;

         height: 23px;

         margin:0;

         padding:7px 0 0 0;}



.menu_left a {
	margin: 0;
	padding: 3px 8px 2px 8px;
	color: #383838;
	letter-spacing: -0.5px;
	font-weight: normal;
	text-decoration: blink;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	font-size: 15px;
}



.menu_left li#active {
	background: none;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}



.menu_left li#active a{
	margin: 0;
	padding: 3px 8px 2px 8px;
	color: #fff;
	background-color: #7D7D7D;
	font-size: 18px;
	font-weight: normal;
}



.menu_left li.in_li{background: url('') left no-repeat;margin:0 0 0 8px;padding:0 0 0 10px;}



.menu_left li.in_li a {

      letter-spacing:0;

      margin:0;

      padding:7px 0;

      font:14px  Trebuchet MS;

      color: #878686;

      text-decoration:none;}



a.news {

      display: block;

      width: 205px;

      letter-spacing:-0.5px;

      background: #81be18;

      margin:10px 0;

      padding:3px 0 2px 8px;

      color: #fff;

      font:14px  Trebuchet MS;

      font-weight: bold;

      text-decoration:none;}



#content {width:710px;margin: 0; padding:0 0 30px 17px;}
#content a{color: #669c09;font-size:14px;text-decoration:none;}


.notebook {
	margin: 0px 0 0 0;
	color: #000000;
	font-size: 18px;
	font-family: "HelveticaNeue Light";
}



.box_l  {background: url('style.css') left top repeat-y;width: 309px; margin:10px 2px;padding:0;float: left;}

.box_r  {background: url('style.css') left top repeat-y;width: 309px;margin:10px 7px;padding:0;float: left;}

.box_c  {
	background: url('style.css') left top repeat-y;
	width: 309px;
	margin: 10px 0;
	padding: 0;
	float: right;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
	font-size: 16px;
}



h6  {

         margin:;

         padding:5px;

         font:12px  trebuchet ms;

         color: #707070;

         line-height: 13px;}



.box_top  {

         background: url('') left top no-repeat;

         width: 309px;

         height: 26px;

         margin:0 0 10px 0;

         padding:10px 0 0 0;

         text-align:center;

         font-style: italic;

         font:18px  trebuchet ms;

         color: #77b709;}



.box_bottom  {

         background: url('') left bottom no-repeat;

         width: 309px;

         height: 17px;

         margin: -10px 0 0 0;

         padding:0;

         float:left;}



.img {width: 108px; margin:4px 10px 0 4px;padding:0;float:left;}

.img img{margin:0px 0px 10px 0px;padding:0;}



.thumbnails{display: block;width:960px;margin:30px 0;padding:20px 0;border-top:1px solid #b7b7b7;}



h5 {
	float: left;
	letter-spacing: -0.5px;
	background: #81be18;
	margin: 10px 0;
	padding: 3px 12px 2px 12px;
	color: #fff;
	font: 14px  Trebuchet MS;
	font-weight: bold;
	font-size: 18px;
}



ul.stranica {list-style: none;margin:0;padding:10px 0 30px 0;}



.stranica li{

         font:13px Trebuchet MS;

         color: #4d4d4d;

         margin:0;

         padding:0 2px;

         float:left;}



.stranica a {

      margin:0;

      padding:0;

      font:13px Trebuchet MS;

      color: #4d4d4d;}



.foto{width:100%; padding:20px 0; text-align:center;}



.foto img{margin:0 auto; text-align:center;}



p.smal {

      margin:0;

      padding:2px 0;

      font:12px  trebuchet ms;

      color: #4d4d4d;}

p {
    margin: 0;
    padding: 7px 0;
    font: 14px  trebuchet ms;
    color: #2B2B2B;
    font-size: 16px;
    font-family: "HelveticaNeue Light";
    text-align: justify;
    font-style: normal;
}



.textes{

      background: url('') top left no-repeat;

      border:none;

      width:216px;

      height:23px;

      margin:0 5px;

      padding:4px 0 0 5px;

      font:13px   trebuchet ms;

      color: #4d4d4d;

      float:left;}



.but {

      background: url('') top left  no-repeat;

      width:29px;

      height:27px;

      cursor:pointer;

      border:none;

      margin:0;

      padding:0;

      float:left;}



p.form{ margin:0;padding: 0;font:14px  trebuchet ms;color: #4d4d4d;float:left;}



p.form span{margin:0;padding:0;float:left; line-height:23px;}

















#footer {
	border-top: 1px solid #b7b7b7;
	width: 950px;
	padding: 10px 0 0 0;
	position: relative;
	margin: -54px auto 0 auto;
	height: 2px;
	background-color: #FFFFFF;
}



p.copy {
	font: 14px  trebuchet ms;
	color: #727272;
	float: left;
	text-align: center;
}



p.dra {font:14px  trebuchet ms;color: #727272;float:right;}



#footer a {color: #6caa02;}





/* �� ������������ */



.menu_left li.last{

         background: url('') left bottom no-repeat;

         width: 213px;

         height: 23px;

         margin:0;

         padding:7px 0 0 0;}





.B_crumbBox{

         font:13px Trebuchet MS;

         color: #4d4d4d;

         margin:0;

         padding:0 2px;

         float:left;}



.B_crumbBox a {

      margin:0;

      padding:0;

      font:13px Trebuchet MS;

      color: #4d4d4d;}



.edit_dima{

display:block; float:left; width:309px; height:160px; margin:0px 4px 0 4px;

}



*html .edit_dima{

display:block; float:left; width:309px; height:175px; margin:3px

}



*html .box_l  {background: url('style.css') left top repeat-y;width:309px; height:150px; margin:10px 2px;padding:0;float: left;}



*html .thumbnails{display: block;width:980px;margin:30px 0;padding:20px 0;border-top:1px solid #b7b7b7;}



.box_top a{

         font-style: italic;

         font:18px  trebuchet ms;

         color: #77b709;

		 text-decoration:none



  }

 .pageNav{
  list-style:none;
  float:right;
 }
 .pageNav li{
  float:left;
  margin:0px 5px;
 }

 .comments a{
  color:#6CAA02;
 }

.bl-scroll {
	width: 690px;
	max-height: 400px; /*Высота блока после которой начнется прокрутка*/
	display: inline-block;
	overflow-x: hidden; /*непосредственно прокрутка*/
	margin: 0 -3px;
	padding-top: 1px;
	font-size: 16px;
}

#body{}::-webkit-scrollbar{width: 5px;height: 5px;}::-webkit-scrollbar-track-piece{background-color: #ffffff;}::-webkit-scrollbar-thumb:vertical{height: 5px;background-color: #86D400;}::-webkit-scrollbar-thumb:horizontal{width: 5px;background-color: #77bd0b;}

.sp-slideshow {
    position: relative;
    margin: 10px auto;
    width: 100%;
    max-width: 1000px;
    min-width: 260px;
    height: 400px;
    border: 3px solid #fff;
    border: 3px solid rgba(255,255,255,0.9);
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
 
.sp-content {
    background: #7d7f72 url(../images/Ban_AppleFine2.jpg) repeat scroll 0 0;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
 
.sp-parallax-bg {
    background: url(../images/Ban_AppleFine.png) repeat-x scroll 0 0;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.sp-slideshow input {
    position: absolute;
    bottom: 15px;
    left: 50%;
    width: 9px;
    height: 9px;
    z-index: 1001;
    cursor: pointer;
    opacity: 0;
}
 
.sp-slideshow input + label {
    position: absolute;
    bottom: 15px;
    left: 50%;
    width: 6px;
    height: 6px;
    display: block;
    z-index: 1000;
    border: 3px solid #7d7f72;
    border: 3px solid rgba(255,255,255,0.9);
    border-radius: 50%;
    transition: background-color linear 0.1s;
}
.sp-slideshow input:checked + label {
    background-color: #7d7f72;
    background-color: rgba(255,255,255,0.9);
}
 
.sp-selector-1, .button-label-1 {
    margin-left: -36px;
}
 
.sp-selector-2, .button-label-2 {
    margin-left: -18px;
}
 
.sp-selector-4, .button-label-4 {
    margin-left: 18px;
}
 
.sp-selector-5, .button-label-5 {
    margin-left: 36px;
}
.sp-arrow {
    position: absolute;
    top: 50%;
    width: 28px;
    height: 38px;
    margin-top: -19px;
    display: none;
    opacity: 0.8;
    cursor: pointer;
    z-index: 1000;
    background: transparent url(../images/arrows.png) no-repeat;
    transition: opacity linear 0.3s;
}
.sp-arrow:hover{
    opacity: 1;
}
.sp-arrow:active{
    margin-top: -18px;
}
.sp-selector-1:checked ~ .sp-arrow.sp-a2,
.sp-selector-2:checked ~ .sp-arrow.sp-a3,
.sp-selector-3:checked ~ .sp-arrow.sp-a4,
.sp-selector-4:checked ~ .sp-arrow.sp-a5 {
    right: 15px;
    display: block;
    background-position: top right;
}
.sp-selector-2:checked ~ .sp-arrow.sp-a1,
.sp-selector-3:checked ~ .sp-arrow.sp-a2,
.sp-selector-4:checked ~ .sp-arrow.sp-a3,
.sp-selector-5:checked ~ .sp-arrow.sp-a4 {
    left: 15px;
    display: block;
    background-position: top left;
}
.sp-slideshow input:checked ~ .sp-content {
    transition: background-position linear 0.6s, background-color linear 0.8s;
}
.sp-slideshow input:checked ~ .sp-content .sp-parallax-bg {
    transition: background-position linear 0.7s;
}
input.sp-selector-1:checked ~ .sp-content {
    background-position: 0 0;
    background-color: #727b7f;
}
 
input.sp-selector-2:checked ~ .sp-content {
    background-position: -100px 0;
    background-color: #7f7276;
}
 
input.sp-selector-3:checked ~ .sp-content {
    background-position: -200px 0;
    background-color: #737f72;
}
 
input.sp-selector-4:checked ~ .sp-content {
    background-position: -300px 0;
    background-color: #79727f;
}
 
input.sp-selector-5:checked ~ .sp-content {
    background-position: -400px 0;
    background-color: #7d7f72;
}
input.sp-selector-1:checked ~ .sp-content .sp-parallax-bg {
    background-position: 0 0;
}
 
input.sp-selector-2:checked ~ .sp-content .sp-parallax-bg {
    background-position: -200px 0;
}
 
input.sp-selector-3:checked ~ .sp-content .sp-parallax-bg {
    background-position: -400px 0;
}
 
input.sp-selector-4:checked ~ .sp-content .sp-parallax-bg {
    background-position: -600px 0;
}
 
input.sp-selector-5:checked ~ .sp-content .sp-parallax-bg {
    background-position: -800px 0;
}
.sp-slider {
    position: relative;
    left: 0;
    width: 500%;
    height: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
    transition: left ease-in 0.8s;
}
.sp-slider > li {
    color: #fff;
    width: 20%;
    box-sizing: border-box;
    height: 100%;
    padding: 0 60px;
    float: left;
    text-align: center;
    opacity: 0.4;
    transition: opacity ease-in 0.4s 0.8s;
}
.sp-slider > li img{
    box-sizing: border-box;
    display: block;
    margin: 0 auto;
    padding: 40px 0 50px 0;
    max-height: 100%;
    max-width: 100%;
}

input.sp-selector-1:checked ~ .sp-content .sp-slider {
    left: 0;
}
 
input.sp-selector-2:checked ~ .sp-content .sp-slider {
    left: -100%;
}
 
input.sp-selector-3:checked ~ .sp-content .sp-slider {
    left: -200%;
}
 
input.sp-selector-4:checked ~ .sp-content .sp-slider {
    left: -300%;
}
 
input.sp-selector-5:checked ~ .sp-content .sp-slider {
    left: -400%;
}
input.sp-selector-1:checked ~ .sp-content .sp-slider > li:first-child,
input.sp-selector-2:checked ~ .sp-content .sp-slider > li:nth-child(2),
input.sp-selector-3:checked ~ .sp-content .sp-slider > li:nth-child(3),
input.sp-selector-4:checked ~ .sp-content .sp-slider > li:nth-child(4),
input.sp-selector-5:checked ~ .sp-content .sp-slider > li:nth-child(5){
    opacity: 1;
}


<style type="text/css">

.hovergallery img{
-webkit-transform:scale(0.8); /*Webkit: уменьшаем размер до 0.8*/
-moz-transform:scale(0.8); /*Mozilla: масштабирование*/
-o-transform:scale(0.8); /*Opera: масштабирование*/
-webkit-transition-duration: 0.5s; /*Webkit: длительность анимации*/
-moz-transition-duration: 0.5s; /*Mozilla: длительность анимации*/
-o-transition-duration: 0.5s; /*Opera: длительность анимации*/
opacity: 0.7; /*Начальная прозрачность изображений*/
margin: 0 10px 5px 0; /*Интервалы между изображениями*/
}

.hovergallery img:hover{
-webkit-transform:scale(1.0); /*Webkit: увеличиваем размер до 1.2x*/
-moz-transform:scale(1.1); /*Mozilla: масштабирование*/
-o-transform:scale(1.1); /*Opera: масштабирование*/
box-shadow:0px 0px 30px 
blue; /*CSS3 тени: 30px размытая тень вокруг всего изображения*/
-webkit-box-shadow:0px 0px 30px 
blue; /*Webkit: тени*/
-moz-box-shadow:0px 0px 30px 
blue; /*Mozilla: тени*/
opacity: 1;
}

</style>


</style>

* {margin: 0; padding: 0;}
body {background: #ffffff;}

.slider{
	width: 940px; /*Same as width of the large image*/
	position: relative;
	/*Instead of height we will use padding*/
	padding-top: 320px; /*That helps bring the labels down*/
	
	margin: 2px auto;
	
	/*Lets add a shadow*/
	box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
}


/*Last thing remaining is to add transitions*/
.slider>img{
	position: absolute;
	left: 0; top: 0;
	transition: all 0.5s;
}

.slider input[name='slide_switch'] {
	display: none;
}

.slider label {
	/*Lets add some spacing for the thumbnails*/
	margin: 18px 0 0 18px;
	border: 3px solid #999;
	
	float: left;
	cursor: pointer;
	transition: all 0.5s;
	
	/*Default style = low opacity*/
	opacity: 0.6;
}

.slider label img{
	display: block;
}

/*Time to add the click effects*/
.slider input[name='slide_switch']:checked+label {
	border-color: #666;
	opacity: 1;
}
/*Clicking any thumbnail now should change its opacity(style)*/
/*Time to work on the main images*/
.slider input[name='slide_switch'] ~ img {
	opacity: 0;
	transform: scale(1.1);
}
/*That hides all main images at a 110% size
On click the images will be displayed at normal size to complete the effect
*/
.slider input[name='slide_switch']:checked+label+img {
	opacity: 1;
	transform: scale(1);
}

/*Черная кнопка
*/

a.button1 {
  position: relative;
  color: white;
  font-weight: bold;
  text-decoration: none;
  text-shadow: -1px -1px #111;
  user-select: none;
  padding: .8em 2em;
  outline: none;
  background-color: #000;
  background-image: linear-gradient(45deg, rgba(255,255,255,.0) 30%, rgba(255,255,255,.8), rgba(255,255,255,.0) 70%), radial-gradient(190% 100% at 50% 0%, rgba(255,255,255,.7) 0%, rgba(255,255,255,.5) 50%, rgba(0,0,0,0) 50%);
  background-repeat: no-repeat;
  background-size: 200% 100%, auto;
  background-position: 200% 0, 0 0;
  box-shadow: rgba(0,0,0,.3) 0 2px 5px;
} 
a.button1:active {
  top: 1px;
  box-shadow: none;
}
a.button1:hover {
	transition: .5s linear;
	background-position: -200% 0, 0 0;
	color: #FFFFFF;
}

/*Стекло кнопка
*/
a.button9 {
  position: relative;
  display: inline-block;
  color: #777674;
  font-weight: bold;
  text-decoration: none;
  text-shadow: rgba(255,255,255,.5) 1px 1px, rgba(100,100,100,.3) 3px 7px 3px;
  user-select: none;
  padding: 1em 2em;
  outline: none;
  border-radius: 3px / 100%;
  background-image:
   linear-gradient(45deg, rgba(255,255,255,.0) 30%, rgba(255,255,255,.8), rgba(255,255,255,.0) 70%),
   linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0) 20%, rgba(255,255,255,0) 90%, rgba(255,255,255,.3)),
   linear-gradient(to right, rgba(125,125,125,1), rgba(255,255,255,.9) 45%, rgba(125,125,125,.5)),
   linear-gradient(to right, rgba(125,125,125,1), rgba(255,255,255,.9) 45%, rgba(125,125,125,.5)),
   linear-gradient(to right, rgba(223,190,170,1), rgba(255,255,255,.9) 45%, rgba(223,190,170,.5)),
   linear-gradient(to right, rgba(223,190,170,1), rgba(255,255,255,.9) 45%, rgba(223,190,170,.5));
  background-repeat: no-repeat;
  background-size: 200% 100%, auto, 100% 2px, 100% 2px, 100% 1px, 100% 1px;
  background-position: 200% 0, 0 0, 0 0, 0 100%, 0 4px, 0 calc(100% - 4px);
  box-shadow: rgba(0,0,0,.5) 3px 10px 10px -10px;
}
a.button9:hover {
  transition: .5s linear;
  background-position: -200% 0, 0 0, 0 0, 0 100%, 0 4px, 0 calc(100% - 4px);
}
a.button9:active {
	top: 1px;
	font-size: 24px;
}

/*Стекло кнопка
*/

input.button4 {
  position: relative;
  display: inline-block;
  font-family: Arial,Helvetica,FreeSans,"Liberation Sans","Nimbus Sans L",sans-serif;
  font-size: 1.5em;
  font-weight: 700;
  color: rgb(245,245,245);
  text-shadow: 0 -1px rgba(0,0,0,.1);
  text-decoration: none;
  user-select: none;
  padding: .3em 1em;
  outline: none;
  border: none;
  border-radius: 3px;
  background: #97C000 linear-gradient(#82d18d, #0c9c0d);
  box-shadow: inset #97C000 0 -1px 1px, inset 0 1px 1px #98ff98, #3caa3c 0 0 0 1px, rgba(0,0,0,.3) 0 2px 5px;
  -webkit-animation: pulsate 1.2s linear infinite;
  animation: pulsate 1.2s linear infinite;
}
input.button4:hover {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
  cursor: pointer;
}
input.button4:active {
  top: 1px;
  color: #fff;
  text-shadow: 0 -1px rgba(0,0,0,.3), 0 0 5px #ffd, 0 0 8px #fff;
  box-shadow: 0 -1px 3px rgba(0,0,0,.3), 0 1px 1px #fff, inset 0 1px 2px rgba(0,0,0,.8), inset 0 -1px 0 rgba(0,0,0,.05);
}
@-webkit-keyframes pulsate {
  50% {color: #fff; text-shadow: 0 -1px rgba(0,0,0,.3), 0 0 5px #ffd, 0 0 8px #fff;}
}
@keyframes pulsate {
  50% {color: #fff; text-shadow: 0 -1px rgba(0,0,0,.3), 0 0 5px #ffd, 0 0 8px #fff;}
}







/* дизайн подглядела у Эльдорадо и их картинку перевела в CSS */

a.button11 {
  position: relative;
  z-index: 1;
  color: black;
  font-size: 135%;
  font-weight: 700;
  text-decoration: none;
  padding: .25em .5em;
}
a.button11:after {
  content: "Купить";  /* здесь 6 букв */
  position: absolute;
  z-index: -1;
  top: -2px;
  bottom: -2px;
  left: -2px;
  width: calc(100% + 6*(1em*90/135) - 2px*2*2);  /* где 6*(1em*90/135), где 6 - это 6 букв, 90 - это font-size after, а 135 - это font-size родителя */
  text-align: right;
  color: #fff;
  font-size: 90%;
  padding: .25em .5em;
  border-radius: 5px;
  border: 2px solid #74C300;
  -webkit-transform: skewX(-10deg);
  transform: skewX(-10deg);
  background: linear-gradient(#74C300, #7DD300) no-repeat 100% 0;
  background-size: calc(6*(1em*90/135) + .5em) 100%;
  box-shadow: inset calc(-6*(1em*90/135) - .5em) 0 rgba(255,255,255,0);
  transition: .3s;
}
a.button11:hover:after {
  box-shadow: inset calc(-6*(1em*90/135) - .5em) 0 rgba(255,255,255,.2);
}
a.button11:active:after {
  background-image: linear-gradient(#74C300, #74C300);
}