/* Кнопка 1 */

a.button1 {
      border-radius: 4px;
      -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.08);
      -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.08);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.08);
      color: #fff;
      width:170px;
      text-align: center;
      font-size: 14px;
      padding: 15px 12px;
      text-decoration: none;
      text-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
      -webkit-transition: background-color 0.1s linear;
      -moz-transition: background-color 0.1s linear;
      -o-transition: background-color 0.1s linear;
      transition: background-color 0.1s linear;        
}

a.button1 {
      background-color: rgb( 43, 153, 91 );
      border: 1px solid rgb( 33, 126, 74 );
}
        
a.button1:hover {
      background-color: #4CAF50;
}

a.button1:active, a.button1.active {
      background: #d0d3d6;
      background-image: linear-gradient(rgba(0,0,0,.1), rgba(0,0,0,0));
      box-shadow: inset 0 0 2px rgba(0,0,0,.2), inset 0 2px 5px rgba(0,0,0,.2), 0 1px rgba(255,255,255,.2);
}


                                     /* Кнопка 2 */

a.button2 {
      border-radius: 4px;
      -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.08);
      -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.08);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.08);
      color: #fff;
      width:170px;
      text-align: center;
      font-size: 14px;
      padding: 10px 10px;
      text-decoration: none;
      text-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
      -webkit-transition: background-color 0.1s linear;
      -moz-transition: background-color 0.1s linear;
      -o-transition: background-color 0.1s linear;
      transition: background-color 0.1s linear;        
}

a.button2 {
      background-color: rgb( 43, 153, 91 );
      border: 1px solid rgb( 33, 126, 74 );
}
        
a.button2:hover {
      background-color: #4CAF50;
}

a.button2:active, a.button2.active {
      background: #d0d3d6;
      background-image: linear-gradient(rgba(0,0,0,.1), rgba(0,0,0,0));
      box-shadow: inset 0 0 2px rgba(0,0,0,.2), inset 0 2px 5px rgba(0,0,0,.2), 0 1px rgba(255,255,255,.2);
}
						   /* РАЗНЫЕ ЭФФЕКТЫ ПРИ НАВЕДЕНИИ НА КАРТИНКУ */
						   
				               /* Увеличение изображения при клике */
    /* Текст tabindex="0" указать в конце тега img, где хотим сделать увеличение картинки при клике */
	
  img[tabindex="0"] {
    cursor: zoom-in;
    transition: 0.5s;	
}  

  img[tabindex="0"]:focus {  
    position: fixed; z-index: 999;  
    top: 0; left: 0; bottom: 0; right: 0;  
    width: auto; max-width: 90%;  
    height: auto; max-height: 90%;  
    margin: auto;  
    box-shadow: 0 0 2000px #000, 0 0 0 1000px rgba(0,0,0,.8);  
    opacity:1;
    /* border: 10px solid #fff; */ /* бордюр */  
    /* border-radius: 5px; */      /* радиус углов */
}  

  img[tabindex="0"]:focus, /* Привязка на возврат фото в привычное состояние после клика на увеличенное */  
  img[tabindex="0"]:focus ~ * {  
    cursor: zoom-out;  
    pointer-events: none;  
}		   


                                      /* Эффект 1 Сепия вар.1 */
.style-1 a img {
  transition: filter 0.2s linear;  
}

.style-1 a:hover img {
  -webkit-filter: sepia(100%);
  filter: sepia(100%);
}

						  /* Эффект всплывающей картинки */
						  
.tooltip span{
    visibility: hidden;
    position: absolute;
	padding-left: 20px;
}
 
.tooltip:hover span{
    visibility: visible;
}




                      /* АДАПТИВНЫЙ ДИЗАЙН САЙТА */	
					
@media screen and (max-width:700px){
	.tooltip:hover span {	     
		display: none;
  }
}