body {
  background-color: #fff;
  font:normal 100% 'Roboto', sans-serif;
}

 p {
    margin-top: 0em; /* Отступ сверху */
    margin-bottom: 0em; /* Отступ снизу */
   }





/*кнопка  связи*/

.email-bt {
        background:#66cc00;
        border:2px solid #66cc00;
        border-radius:50%;
        box-shadow:0 8px 10px rgba(102, 204, 0, 0.3);
        cursor:pointer;
        height:75px;
        text-align:center;
        width:75px;
        position: fixed;
        left: 46px;
        bottom: 46px;
        z-index:999;
        transition:.3s;
        -webkit-animation:email-an linear 1s infinite;
        animation:email-an linear 1s infinite;
}

.email-bt .text-call{
        height:68px;
        width:68px;        
        border-radius:50%;
        position:relative;
        overflow:hidden;
}


.email-bt i {
        transition:.3s;
        line-height: 68px;
		margin-left:4px;
}

.email-bt i  {
        -webkit-animation: opsimple 3s infinite;
        animation: opsimple 3s infinite;
}

@-webkit-keyframes email-an {
        0% {
        box-shadow:0 8px 10px rgba(102, 204, 0, 0.3),0 0 0 0 rgba(102, 204, 0, 0.2),0 0 0 0 rgba(102, 204, 0, 0.2)
}
40% {
        box-shadow:0 8px 10px rgba(102, 204, 0, 0.3),0 0 0 15px rgba(102, 204, 0, 0.2),0 0 0 0 rgba(102, 204, 0, 0.2)
}
80% {
        box-shadow:0 8px 10px rgba(102, 204, 0, 0.3),0 0 0 30px rgba(249,92,24,0),0 0 0 26.7px rgba(102, 204, 0, 0.067)
}
100% {
        box-shadow:0 8px 10px rgba(102, 204, 0, 0.3),0 0 0 30px rgba(249,92,24,0),0 0 0 40px rgba(249,92,24,0.0)
}
}@keyframes email-an {
        0% {
        box-shadow:0 8px 10px rgba(102, 204, 0, 0.3),0 0 0 0 rgba(102, 204, 0, 0.2),0 0 0 0 rgba(102, 204, 0, 0.2)
}
40% {
        box-shadow:0 8px 10px rgba(102, 204, 0, 0.3),0 0 0 15px rgba(102, 204, 0, 0.2),0 0 0 0 rgba(102, 204, 0, 0.2)
}
80% {
        box-shadow:0 8px 10px rgba(102, 204, 0, 0.3),0 0 0 30px rgba(249,92,24,0),0 0 0 26.7px rgba(102, 204, 0, 0.067)
}
100% {
        box-shadow:0 8px 10px rgba(102, 204, 0, 0.3),0 0 0 30px rgba(249,92,24,0),0 0 0 40px rgba(249,92,24,0.0)
}
}

@keyframes opsimple {
0% {
    opacity: 0;
}
40% {
    opacity: 1;
}

80% {
    opacity: 1;
}
100% {
    opacity: 0;
}
}

@-webkit-keyframes opsimple {
0% {
    opacity: 0;
}
40% {
    opacity: 1;
}
80% {
    opacity: 1;
}
100% {
    opacity: 0;
}
}
/* конец кнопки звязи */




/*------СОЗДАНИЕ САЙТОВ НАЧАЛО------*/

.textbody {
	font:normal 100% 'Roboto', sans-serif;
	margin-top: 0;
    color: #222;
	font-weight: 700;
    font-size: 32px;
    text-align: center;
	margin-right:10%;
	margin-left: 10%;
	}	
	
	
.liniya {
	text-align: center;
}

.liniyadekor {
	text-align: left;
}

.textbodyopisanie {
	margin-right:5%;
	margin-left: 5%;
	margin-top: 70px;
    color: black;
	font-weight: 400;
    font-size: 20px;
    text-align: left;
	}
	
.rightimg  {
    float: right; /* Выравнивание по правому краю  */ 
	margin: 0 0 30px 30px;
    margin-top: 0px; /* Отступы вокруг картинки */
	width: 100%;
	max-width: 600px;
	
   }

.textperviy {
		font:normal 100% 'Roboto', sans-serif;
}   
/*------СОЗДАНИЕ САЙТОВ КОНЕЦ------*/




/*ПОЧЕМУ МЫ НАЧАЛО*/

.po4emy {
	font-size: 30px;
	color:black;
	margin-top: 0px;
	text-align:center;
}

.uppo4emy {
	margin-top:0px;
}


.po4em {
	display: inline-block; /*Задаем блочно-строчное отображение*/
	vertical-align: top;
  	width: auto; /*задаем ширину блока*/
	max-width: 150px;
	margin:30px 0px 30px 0px;
	margin-right:1%;
	margin-left: 1%;
        }



/*почему мы  КОНЕЦ*/


/*НАШИ УСЛУГИ НАЧАЛО*/
.ramkadiz1 {
	display: inline-block; /*Задаем блочно-строчное отображение*/
	vertical-align: top;
  	width: auto; /*задаем ширину блока*/
	min-height: 365px;
	max-width: 28%;
	margin:0px 0px 25px 0px;
	margin-right:10px;
	margin-left: 10px;
	background: rgba(255, 255, 255, 0.94);
	box-shadow: 0px 0 7px rgba(1, 41, 112, 0.4);
	transition: 0.3s;
	border-radius: 10px;
        }


.ramkadiz1:hover {
    box-shadow: 0px 0 20px rgba(1, 41, 112, 0.5);
}
	.ramkadiz1:hover img{
		transition: 0.5s;
		transform: scale(0.9);
	}

@media only screen and (max-width: 980px) {
  .ramkadiz1 {
    max-width: 46%;
  }
} 	

@media only screen and (max-width: 600px) {
  .ramkadiz1 {
    max-width: 100%;
  }
} 	

.yslygi {
	display: inline-block; /*Задаем блочно-строчное отображение*/
  	width: auto; /*задаем ширину блока*/
	line-height: 95%;
	font-size: 17px;
	max-width: auto;
	margin:50px 0px 30px 0px;
	margin-right:2%;
	margin-left: 2%;
        }

		
.yslygiroditel {
		font:normal 100% 'Roboto', sans-serif;
		color: #2c343b;
		text-align: center;
		background:url(../img/ysl.jpg) no-repeat 40%/cover white;
		margin-left:0%;
		margin-right:0%;
}	
		
        .string {
         font:normal 100% 'Roboto', sans-serif;
		 text-align: center; /*Равняем текст по-горизонтали*/
        }

		.stringopisanie {
         text-align: center; /*Равняем текст по-горизонтали*/
		 text-align: left; /*Равняем текст по-горизонтали*/
		 padding:0px 30px 0px 30px; 
		 font-size:14px;
        }		
		
		 .stringimg {
         text-align: center; /*Равняем текст по-горизонтали*/
        }

		.knopkaopisanie {
         margin-top: 28px;
		 text-align: center; /*Равняем текст по-горизонтали*/
		 color: #66cc00;
        }	

		.ramkayznatbnew1 a {
				border:2px solid #66cc00;
				padding: 5px 10px 5px 10px;
				border-radius: 30px;
				text-decoration: none;
				
		}
		.ramkayznatbnew1 a:hover {
				color:white ; /* Цвет ссылки при наведении на нее курсора мыши */ 
				background:#66cc00 ;
				transition: 0.4s linear;
				text-decoration: none;
		}

		
				
/*НАШИ УСЛУГИ КОНЕЦ*/




/*КАК МЫ РАБОТАЕМ НАЧАЛО*/
.textbodykak {
	font:normal 100% 'Roboto', sans-serif;
	margin-top: 0;
    color: #222;
	font-weight: 700;
    font-size: 32px;
    text-align: center;
	margin-right:10%;
	margin-left: 10%;
	}	

.rovnramka {
	display: inline-block; /*Задаем блочно-строчное отображение*/
	vertical-align: top;
  	width: auto; /*задаем ширину блока*/
	max-width: 290px;
	min-width: 270px;
	margin:0px 0px 20px 0px;
	margin-right:1%;
	margin-left: 1%;
	background:  ;
	
        }

.rabotaem {
	display: inline-block; /*Задаем блочно-строчное отображение*/
  	width: auto; /*задаем ширину блока*/
	vertical-align: top;
	line-height: 95%;
	font-size: 17px;
	max-width: 250px;
	margin:10px 0px 10px 0px;
	margin-right:4%;
	margin-left: 4%;
        }

		
.kakmiroditel {
		font:normal 100% 'Roboto', sans-serif;
		color: black;
		text-align: center;
		background:url(../img/topography.jpg) no-repeat 40%/cover  fixed;
}	
		
        .string {
         font:normal 100% 'Roboto', sans-serif;
		 text-align: center; /*Равняем текст по-горизонтали*/
        }

		.stringopisaniekak {
		 text-align: left; /*Равняем текст по-горизонтали*/
		 padding:0px 20px 0px 20px; 
		 font-size:14px;
        }		
		
		 .kakmirebimg {
         text-align: center; /*Равняем текст по-горизонтали*/
        }

				
/*КАК МЫ РАБОТАЕМ КОНЕЦ*/


/*СЕЙЧАС ВЫГАДНО*/
.liniyavigadno {
	text-align: left;
}

.textvigadno {

	margin-right:10%;
	margin-left: 10%;
	}	
		
.vigadno {
		font:normal 100% 'Roboto', sans-serif;
		color: black;
		text-align: center;
		background:linear-gradient( rgba(255, 255, 255, .8), rgba(255, 255, 255, .8)), url(../img/blockvigadno.jpg);
}	
				

.columns {
    float: left;
    width: 24.99%;
    padding: 8px;
}

.price {
    list-style-type: none;
    border: 1px solid #66cc00;
    margin: 0;
    padding: 0;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.price:hover {
    box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2) ;
}

.price .header {
    background-color: #66cc00;
    color: white;
    font-size: 25px;
	padding: 20px;
}

.price li {
    border-bottom: 1px solid #eee;
    padding: 10px;
    text-align: center;
	background-color: #fff;
}

.price .grey {
    background-color: #eee;
    font-size: 20px;
	padding: 20px;
}

.button {
    background-color: #66cc00;
    border: none;
    color: white;
    padding: 10px 25px;
    text-align: center;
    text-decoration: none;
    font-size: 18px;
	border-radius: 30px;
}
.button:hover {
    	color: #fff;
    	background: #333;
    	tansition: all .3s linear;
    	-webkit-transition: all .3s linear;
    	-moz-transition: all .3s linear; 
		text-decoration: none;
    }


@media only screen and (max-width: 870px) {
    .columns {
        width: 100%;
    }
	
	.price {
    border: 1px solid #99cc00;
	}
	
	.price .header {
    background-color: #99cc00;
	}
	
	.button {
    background-color: #99cc00;
	}
}

.blockymensh {
	margin-left:3%;
	margin-right:3%;   
	font:normal 100% 'Roboto', sans;
}
/*СЕЙЧАС ВЫГАДНО КОНЕЦ*/



/*ЦЕНЫ НА РЕКЛАМУ И ПРОДВИЖЕНИЕ*/
.tabs {
   position: relative;
   text-align: center;
   color:black;
}

.tabs input[type=radio] {
   display: none;
}

.tabs label {
   position: relative;
   z-index: 1;
   display: inline-block;
   width: 130px;
   height: 30px;
   line-height: 30px;
   color: white;
   font-size: 14px;
   cursor: pointer;
}

.switch {
   position: absolute;
   top: 0;
   left: 50%;
   height: 30px;
   width: 130px;
   background: #66cc00;
   border-radius: 40px;
   transform: translateX(-130px);
   transition: transform .5s;
}

.tabs section {
   display: none;
   padding: 40px 0 0;
   animation: scale .7s ease-in-out;
}

@keyframes scale {
   0% {
      transform: scale(0.9);
      opacity: 0;
   }

   50% {
      transform: scale(1.01);
      opacity: 0.5;
   }

   100% {
      transform: scale(1);
      opacity: 1;
   }
}

.tabs #tab1:checked~#content1,
.tabs #tab2:checked~#content2 {
   display: block;
}

.tabs input[type=radio]:checked+label+.switch {
   color: white;
}

.tabs input[type=radio]:not(:checked)+label {
   color: #080515;
}

.tabs input[type="radio"]:checked+label+.switch,
.tabs input[type="radio"]:checked+label:nth-of-type(n)+.switch {
   transform: translateX(0);
}

.item-inner {
   padding: 30px 20px;
   border-radius: 10px;
   background: white;
   box-shadow: 0 2px 40px rgba(47, 43, 50, .2);
}

.pricing-tables .pricing-item:nth-child(2) .item-inner {
   background: #3b2763;
   color: white;
}

.item-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   text-align: left;
   padding-bottom: 20px;
   margin-bottom: 20px;
   border-bottom: 1px solid #D7D9DB;
}




.title span,
.price span {
   font-size: 14px;
   color: #9c9ba1;
}

.priceSEO {
   padding: 8px 10px;
   border-radius: 6px;
   background: rgba(255, 255, 255, 0.4);
}

.pricing-tables .pricing-item:nth-child(2) .item-header {
   border-bottom: 1px solid white;
}

.pricing-tables .pricing-item:nth-child(2) .price {
   background: #3F286B;
}

.pricing-tables .pricing-item:nth-child(2) .price span {
   color: rgba(255, 255, 255, 0.4);
}

.features {
   list-style: none;
   text-align: left;
   margin-bottom: 30px;
}

.features li {
   margin-bottom: 10px;
   font-size: 14px;
}



.pricing-button {
   text-decoration: none;
   background: #66cc00;
   display: block;
   font-size: 15px;
   color: white;
   height: 46px;
   line-height: 46px;
   border-radius: 6px;
   text-align: center;
   transition: .3s linear;
}

.pricing-button:hover {
   background: #b8b8b8;
   color: white;
}

@media(max-width:959px) {
   .pricing-item {
      width: 90%;
      margin: 0 auto 40px;
   }
}

@media(max-width:959px) {
   .pricing-item2 {
      width: 90%;
      margin: 0 auto 40px;
   }
}


@media(min-width:960px) {
   .tabs section {
      padding: 50px 0 40px;
   }

   .pricing-tables {
      display: flex;
   }

   .pricing-item {
      width: 33.333333333%;
      padding: 0 10px;
   }
   
   .pricing-item2 {
      width: 50%;
      padding: 0 10px;
   }
}


.pricing-tables .pricing-item2:nth-child(2) .item-inner {
   background: #3b2763;
   color: white;
}

@media(min-width:1120px) {
   .pricing-wrapper {
      width: 100%;
      max-width: 1060px;
      margin: 0 auto;
   }
}
/*ЦЕНЫ НА РЕКЛАМУ И ПРОДВИЖЕНИЕ КОНЕЦ*/



/*ПОРТФОЛИО ЧАСТЬ*/
.textbodyport {
	font:normal 100% 'Roboto', sans-serif;
	margin-top: 0;
    color: #5c5c5c;
	font-weight: 400;
    font-size: 32px;
    text-align: center;
	margin-right:10%;
	margin-left: 10%;
	}	
	
.textbodyportpod {
	font:normal 100% 'Roboto', sans-serif;
	margin-top: -10px;
    color: black;
	font-weight: 400;
    font-size: 18px;
    text-align: center;
	margin-right:10%;
	margin-left: 10%;
	}		
/*ПОРТФОЛИО ЧАСТЬ КОНЕЦ*/


/*ХОТИТЕ БОЛЬШЕ УЗНАТЬ*/
		.yznatbroditel {
				width: 100%;
    			max-width: 100%;
   			min-width:300px;
   			height:200px;
    			position: relative;
    			margin: auto; 
    			border: 1px solid #1C1C1C;
				background-color: #1C1C1C;
		}
		
		@media only screen and (max-width: 450px) {
  .yznatbroditel {
    height:250px;
  }
} 	
		
		.yznatb {
				color:white;
				font-size: 35px;
    			margin: 30px;
				margin-left: 20px;
    			text-align: center;
				font-weight: lighter;
		}
		.yznatbknopka {			
				font-size: 15px;
    			margin: 25px;
				margin-left: 30px;
    			text-align: center;
				font-weight: lighter;
		}
		.ramkayznatb {
				border:2px solid #66cc00;
				padding: 9px 14px 9px 14px;
				border-radius: 30px;
				background:#66cc00;
				
		}
/*ХОТИТЕ БОЛЬШЕ УЗНАТЬ КОНЕЦ*/		

/*О нас начало*/
.textbodyopisanie2 {
	margin-right:7%;
	margin-left: 7%;
	margin-top: 70px;
    color: black;
	font-weight: 400;
    font-size: 20px;
    text-align: left;
	}

.leftimg  {
    float: left; /* Выравнивание по правому краю  */ 
	margin: 0 30px 30px 0px;
    margin-top: 0px; /* Отступы вокруг картинки */
	width: 100%;
	max-width: 550px;
	
   }	   	
	
.textvtoroj {
		font:normal 100% 'Roboto', sans-serif;
}	

/*О нас конец*/




/*ПОЧЕ МЫ?*/
.uppo4emy {
	margin-top: -30px;
}

.preimys4 {
	display: inline-block; /*Задаем блочно-строчное отображение*/
	vertical-align: top;
  	width: auto; /*задаем ширину блока*/
	max-width: 250px;
	margin:30px 0px 30px 0px;
	margin-right:1%;
	margin-left: 1%;
	color: black;
	background: #fff;
        }
		
.preimys4:hover {
	background: #cdfc97;
	transition: 0.5s linear;
	border-radius: 15px;
        }		

.preimys4roditel {
		text-align: center;
		background: ;
}	
		
        .stringpo4 {
         font:normal 100% 'Roboto', sans-serif;
		 text-align: center; /*Равняем текст по-горизонтали*/
		 font-size: 20px;
        }

		.stringopisanie2 {
         text-align: left; /*Равняем текст по-горизонтали*/
		 padding:0px 20px 0px 20px; 
		 font-size:14px;
        }		
		
		 .po4emyimg {
         text-align: center; /*Равняем текст по-горизонтали*/
        }
		
		
/*ПОЧЕМУ МЫ? КОНЕЦ*/



/*футар начало*/
.textfooter {
	margin-top: 0;
    color: #fff;
    font-weight: 100;
    text-transform: uppercase;
    font-size: 15px;
    text-align: center;
	}

.textfooter2 {
	margin-top: 0;
    color: #fff;
    font-weight: 100;
    font-size: 15px;
    text-align: center;
	}	
	

		#tablefooter {
    			width: 100%;
    			max-width: 100%;
   			min-width:300px;
   			height:450px;
    			position: relative;
    			margin: auto; 
    			border: 0px solid #131313;
				background-color: #131313;
				z-index:-1;
		}	
/*футар конец*/


	/*------блоки не залазят друг на друга------*/
.new_class:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}



/*------прозрачность кнопки звонка------*/
@media only screen and (max-width: 870px) {
    .email-bt {
	background:rgba(102, 204, 0, 0.6);
        border:2px solid rgba(102, 204, 0, 0.7);
    }	
/*------прозрачность кнопки звонка------*/




 a { /*------ОТМЕНА ПОДЧЕРКИВАНИЯ У ССЫЛОК И ЗАДАНИЕ ИМ ЦВЕТА РОДИТЕЛЯ------*/
    text-decoration: none;
	color: inherit;
	}	

	
	/*------блоки не залазят друг на друга------*/
.new_class:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}


/*------Фиксируем главное изаброжение на маленьких экранах------*/
@media only screen and (max-width: 380px) {
    .kakmiroditel {
        background: url(../img/topography.jpg) no-repeat 40%/cover scroll;
    }
/*------Фиксируем главное изаброжение на маленьких экранах конец------*/