﻿/*Каркас сайта*/
body {padding:0px; margin:0; background:#077337; font-size:14px; font-family:Arial, Sans-serif;}
#basic {width:960px; min-height:950px; margin:0 auto; padding:20px 20px 20px 20px; background:#fff;} /!*каркас цвет*/
img {border:0;}
a {color:#ff9c00;}
a:hover {text-decoration:none;}

/*Шапка сайта*/
#head-site {height:auto;}
li.none-bg {background:none!important;}
.telefon {float:right;}
 
/*Верхнее меню сайта*/
#top-menu {width:960px; height:74px; }
.bg-1 {width:950px; height:64px; background:#077337 repeat-x; padding:0 0 0 10px;}
.bg-2 {width:940px; height:8px; background:#ff9c00; margin:0 auto;}
.bg-1 ul {margin:0; padding:0; list-style:none;}
.bg-1 ul li {float:left; background: no-repeat right center; padding:0 2px 0 0;}
.bg-1 ul li a {display:block; height:40px; padding:24px 27px 0 27px; color:#fff; text-decoration:none; text-transform:uppercase;}
.bg-1 ul li a:hover {color:#fff; background:#ff9c00;}
 
/*Левое меню и Контент*/
#content {width:960px; padding:20px 0 0 0; }
 
/*Контент - правый блок*/
.right { float:right; width:690px; padding:0 0 0 20px; text-align:justify;}
.right h1 {text-transform:uppercase; color:#575050; font-weight:normal; margin-top:0;}

/*Левое меню - левый блок*/

.left {width:250px; float:left;}
.block-nad-menu {width:240px; height:10px; background:#ff9c00;}
.block-pod-menu {width:240px; margin:0 0 0 10px; height:10px; background:#077337;}
.block-menu {width:240px; border-left:10px solid #ff9c00; background:#077337;}
.left ul {margin:0; padding:10px 0 0 0; list-style:none;}
.left ul li {background:url(images/m3.png) no-repeat bottom left;}
.left ul li a {display:block; width:195px; color:#fff; text-decoration:none; padding:10px 5px 10px 40px; background: url(images/marker.png) no-repeat 10px 8px;}
.left ul li a:hover {background:#ff9c00 url(images/marker.png) no-repeat 10px 8px;}
 
 
/*Подвал*/
.myclr {clear:both; float:none; width:100%; height:1px;}
#podval {border-top:10px solid #077337; margin-top:20px;}
.yellow {width:940px; height:5px; margin:0 auto; background:#ff9c00;}
.p1 {float:left; width:300px; padding:15px 0 0 0;}
.p2 {float:right; width:200px; text-align:right; padding:15px 20px 0 0;}
.p3 {float:right; width:88px; padding:15px 0 0 0;}
/*Watsapp кнопка*/
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: #0c9c0d linear-gradient(#82d18d, #0c9c0d);
  box-shadow: inset #72de26 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;}
}
/*Watsapp кнопка*/
/*таблица*/
.table {
	width: 100%;
	margin-bottom: 20px;
	border: 5px solid #fff;
	border-top: 5px solid #fff;
	border-bottom: 3px solid #fff;
	border-collapse: collapse; 
	outline: 3px solid #ffd300;
	font-size: 15px;
	background: #fff!important;
}
.table th {
	font-weight: bold;
	padding: 7px;
	background: #ffd300;
	border: none;
	text-align: left;
	font-size: 15px;
	border-top: 3px solid #fff;
	border-bottom: 3px solid #ffd300;
}
.table td {
	padding: 7px;
	border: none;
	border-top: 3px solid #fff;
	border-bottom: 3px solid #fff;
	font-size: 15px;
}
.table tbody tr:nth-child(even){
	background: #f8f8f8!important;
}
/*таблица*/
/*Кнопка заказа через почту*/
input.button5 {
  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: #0085fa linear-gradient(#000cfa, #00c8fa);
  box-shadow: inset #0085fa 0 -1px 1px, inset 0 1px 1px #e0dc80, #faf600 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.button5:hover {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
  cursor: pointer;
}
input.button5: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);
}
/*Кнопка заказа через почту*/
/*Кнопка заказа через почту*/
input.button6 {
  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: #00e9fa linear-gradient(#00e9fa, #00d0fa);
  box-shadow: inset #00e9fa 0 -1px 1px, inset 0 1px 1px #00e9fa, #38912f 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.button6:hover {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
  cursor: pointer;
}
input.button6: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);
}
/*адаптация под моб*/
 <!--Кнопка Whatsapp-->
 
 .whatsapp-button {
 position: fixed;
 right: 13px;
 bottom: 90px;
 transform: translate(-50%, -50%);
 background: #25D366; /*цвет кнопки*/
 border-radius: 50%;
 width: 55px; /*ширина кнопки*/
 height: 55px; /*высота кнопки*/
 color: #fff;
 text-align: center;
 line-height: 53px; /*центровка иконки в кнопке*/
 font-size: 35px; /*размер иконки*/
 z-index: 1;
 }
 .whatsapp-button a {
 color: #fff;
 }
 .whatsapp-button:before,
 .whatsapp-button:after {
 content: " ";
 display: block;
 position: absolute;
 border: 50%;
 border: 1px solid #25D366; /*цвет анимированных волн от кнопки*/
 left: -20px;
 right: -20px;
 top: -20px;
 bottom: -20px;
 border-radius: 50%;
 animation: animate 1.5s linear infinite;
 opacity: 0;
 backface-visibility: hidden; 
 }

 .whatsapp-button:after{
 animation-delay: .5s;
 }

 @keyframes animate
 {
 0%
 {
 transform: scale(0.5);
 opacity: 0;
 }
 50%
 {
 opacity: 1;
 }
 100%
 {
 transform: scale(1.2);
 opacity: 0;
 }
 }

}

<!--/Кнопка Whatsapp-->


