/* Кнопка, используемая для открытия контактной формы - фиксируется в нижней части страницы */
.open-button {
  background-color: #555;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  opacity: 0.8;
  position: fixed;
  bottom: 23px;
  right: 28px;
  width: 280px;
  z-index: 999;
}


/*кнопка обратной связи*/

.email-bt {
	background:#F95C18;

	border:2px solid #F95C18;
	border-radius:50%;
	box-shadow:0 8px 10px rgba(249,92,24,0.3);
	cursor:pointer;
	height:68px;
	text-align:center;
	width:68px;
	position: fixed;
	left: 8%;
	bottom: 18%;
	z-index:999;
	transition:.3s;
	-webkit-animation:email-an linear 1s infinite;
	animation:email-an linear 1s infinite;
}

@media (max-width: 480px) {
	.email-bt {
		display: none;
	}
}
	
.email-bt .text-call{
	height:68px;
	width:68px;        
	border-radius:50%;
	position:relative;
	overflow:hidden;
}


@media (max-width: 480px) {
	.email-bt .text-call{
		height:40px;
		width:40px;        
		border-radius:50%;
		position:absolute;
		overflow:hidden;
	}
}



.email-bt .text-call span {
text-align: center;
color:#F95C18;
opacity: 0;
font-size: 0;
	position:absolute;
	right: 4px;
	top: 22px;
line-height: 14px;
	font-weight: 600;
text-transform: uppercase;
transition: opacity .3s linear;
font-family: 'montserrat', Arial, Helvetica, sans-serif;
}
@media (max-width: 480px) {
	.email-bt .text-call span {
		text-align: center;
		color:#F95C18;
		opacity: 0;
		font-size: 2px;
			position:relative;
			
		line-height: 14px;
			font-weight: 400;
		text-transform: uppercase;
		transition: opacity .3s linear;
		font-family: 'montserrat', Arial, Helvetica, sans-serif;
		}
}



.email-bt .text-call:hover span {
	width: 40px;
    opacity: 1;
    font-size: 7px;
    height: 40px;
}
.email-bt:hover i {
display:none;
}


.email-bt:hover i {
	color:#38a3fd;
	font-size:40px;
	transition:.3s;
}
.email-bt i {
	color:#fff;
	font-size:29px;
	transition:.3s;
	line-height: 66px;
}
@media (max-width: 480px) {
.email-bt i {
	color:#fff;
	font-size:20px;
	transition:.3s;
	line-height: 35px;
}
}


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

@-webkit-keyframes email-an {
	0% {
	box-shadow:0 8px 10px rgba(249,92,24,0.3),0 0 0 0 rgba(249,92,24,0.2),0 0 0 0 rgba(249,92,24,0.2)
}
40% {
	box-shadow:0 8px 10px rgba(249,92,24,0.3),0 0 0 15px rgba(249,92,24,0.2),0 0 0 0 rgba(249,92,24,0.2)
}
80% {
	box-shadow:0 8px 10px rgba(249,92,24,0.3),0 0 0 30px rgba(249,92,24,0),0 0 0 26.7px rgba(249,92,24,0.067)
}
100% {
	box-shadow:0 8px 10px rgba(249,92,24,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(249,92,24,0.3),0 0 0 0 rgba(249,92,24,0.2),0 0 0 0 rgba(249,92,24,0.2)
}
40% {
	box-shadow:0 8px 10px rgba(249,92,24,0.3),0 0 0 15px rgba(249,92,24,0.2),0 0 0 0 rgba(249,92,24,0.2)
}
80% {
	box-shadow:0 8px 10px rgba(249,92,24,0.3),0 0 0 30px rgba(249,92,24,0),0 0 0 26.7px rgba(249,92,24,0.067)
}
100% {
	box-shadow:0 8px 10px rgba(249,92,24,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;
}
}
/* конец кнопки звязи */




/* Всплывающая форма-скрыта по умолчанию */
.form-popup-rew {
	background-color: #000000ab;
    width: 100%;
    height: 100%;
    /* border-radius: 10px; */
    /* border: 1px solid #f23a2e; */
    display: none;
    position: fixed;
    bottom: 0%;
    left: 0px;
    color: white;
    z-index: 999999;
    /* border-radius: 15px;*/
}
.form-popup {
	background-color: #000000ab;
    width: 100%;
    height: 100%;
    /* border-radius: 10px; */
    /* border: 1px solid #f23a2e; */
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    color: white;
    z-index: 999999;
    /* border-radius: 15px;*/
}


.form-item-rew{

	border: 1px solid white;
    width: 45%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 250px;
    padding: 15px;
    background-color: black;
    font-size: 15px;
	


}

@media (max-width: 480px) {
	.form-item-rew{
		border: 1px solid white;
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		margin-top: 0;
		
		background-color: black;
		font-size: 8px;
	
	}
}




.form-item{
	border: 1px solid white;
	width: 60%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
	padding: 15px;
	background-color: black;
	font-size: 15px;

}
@media(max-width: 768px){
	.form-item{
		border: 1px solid white;
		width: 90%;
		margin-left: auto;
		margin-right: auto;
		margin-top: 0;
		
		background-color: black;
		font-size: 15px;
	
	}
  }
@media (max-width: 480px) {
	.form-item{
		border: 1px solid white;
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		margin-top: 0;
		
		background-color: black;
		font-size: 8px;
	
	}
}

.contact_form2{
	width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    align-content: center;
}

@media (max-width: 480px) {
	.contact_form2{
	width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    align-content: center;
	max-height: 90%;
	}
}	

.textarea2 {
	width:100%;
	resize: vertical;
	padding:15px;

	border:0;
	box-shadow:4px 4px 10px rgba(0,0,0,0.06);
	height:150px;
	background-color: black;
	border-bottom: 2px solid white;
	color: rgb(255, 255, 255);
  }

  @media (max-width: 480px) {
	.textarea2 {
		width:100%;
		resize: vertical;
		padding:15px;
	
		border:0;
		box-shadow:4px 4px 10px rgba(0,0,0,0.06);
		height:50px;
		background-color: black;
		border-bottom: 2px solid white;
		color: rgb(255, 255, 255);
	  }
}
::-webkit-calendar-picker-indicator {
	filter: invert(1);;
  }


.contact-input{
	background-color: black;
	color: #fff;
	width: 100%;
	border:0;
	border-bottom: 2px solid #eee;
	
	box-shadow:0 0 4px rgba(0,0,0,0.3);
	transition: .3s box-shadow;
	
}
.contact-input:hover {
	box-shadow:0 0 4px rgba(0,0,0,0.5);
  }




.div-form{
	width: 30%;
	margin-left: 5px;
	margin-bottom: 15px;
	
}
@media (max-width: 480px) {
	.div-form{
		width: 100%;
		margin-left: 5px;
		margin-bottom: 15px;
		
	}
}

.h2form{
	
	color: #fff;
}
@media (max-width: 480px) {
	.h2form{
		font-size: 8px;
		color: #fff;
	}
}


.div-form2{
	width: 100%;
	
}

.form-popup2 {
	background-color: #000000ab;
	border-radius: 10px;
	border: 1px solid #f23a2e;
  display: none;
  position: fixed;
  bottom: 30%;
  right: 15px;
  color: white;
  z-index: 1000;
  border-radius: 15px;
  width: 50px;
}
.form-popup2 img {

  width: 50px;
}


@media (max-width: 480px) {
	.form-popup {
		background-color: #000000ab;
		width: 100%;
		height: 100%;
		/* border-radius: 10px; */
		/* border: 1px solid #f23a2e; */
		display: none;
		position: fixed;
		bottom: 0%;
		/* left: 15px; */
		color: white;
		z-index: 999999;
		/* border-radius: 15px;*/
	
	
	}
}

/* Добавить стили для контейнера формы */
.form-container {
  max-width: 400px;
  padding: 10px;
  background-color: #020202b8;
  border-radius: 10px;
  width: 100%;
    padding: 5px 8px;
}
@media (max-width: 488px) {

	.form-container {
		max-width: 240px;
		padding: 10px;
		background-color: #020202b8;
		border-radius: 10px;
		width: 100%;
		  padding: 5px 8px;
	  }
}


/* Поля ввода полной ширины */
.form-container input[type=text], .form-container input[type=password] .form-container textarea  {
	border: 1px solid #aaa;
    box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
    border-radius: 2px;
    margin: 5px 0px 10px 0px;
    -moz-transition: padding .25s;
    -webkit-transition: padding .25s;
    -o-transition: padding .25s;
    transition: padding .25s;
	
}

.form-container textarea  {
	border: 1px solid #aaa;
    box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
    border-radius: 2px;
    margin: 5px 0px 10px 0px;
    -moz-transition: padding .25s;
    -webkit-transition: padding .25s;
    -o-transition: padding .25s;
    transition: padding .25s;
	
}




/* Когда входы получают фокус, сделайте что-нибудь */
.form-container input[type=text]:focus, .form-container input[type=password]:focus {
  background-color: #ddd;
  outline: none;
}

/* Установите стиль для кнопки отправить/войти */
.form-container .btn {
  background-color: #4CAF50;
  color: white;
  
  border: none;
  cursor: pointer;
  width: 45%;
  margin-bottom:10px;
  opacity: 0.8;
}

/* Добавить красный цвет фона для кнопки "Отмена" */
.form-container .cancel {
  background-color: red;
}

/* Добавить некоторые эффекты наведения на кнопки */
.form-container .btn:hover, .open-button:hover {
  opacity: 1;
}


/*кнопка звонка*/

.callback-bt {
	background:#38a3fd;
	border:2px solid #38a3fd;
	border-radius:50%;
	box-shadow:0 8px 10px rgba(56,163,253,0.3);
	cursor:pointer;
	height:68px;
	text-align:center;
	width:68px;
	position: fixed;
	right: 8%;
	bottom: 18%;
	z-index:999;
	transition:.3s;
	-webkit-animation:hoverWave linear 1s infinite;
	animation:hoverWave linear 1s infinite;
}

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

.callback-bt .text-call span {
text-align: center;
color:#38a3fd;
opacity: 0;
font-size: 0;
	position:absolute;
	right: 4px;
	top: 22px;
line-height: 14px;
	font-weight: 600;
text-transform: uppercase;
transition: opacity .3s linear;
font-family: 'montserrat', Arial, Helvetica, sans-serif;
}

.callback-bt .text-call:hover span {
opacity: 1;
	font-size: 11px;
}
.callback-bt:hover i {
display:none;
}

.callback-bt:hover {
	z-index:1;
	background:#fff;
	color:transparent;
	transition:.3s;
}
.callback-bt:hover i {
	color:#38a3fd;
	font-size:40px;
	transition:.3s;
}
.callback-bt i {
	color:#fff;
	font-size:34px;
	transition:.3s;
	line-height: 66px;transition: .5s ease-in-out;
}

.callback-bt i  {
animation: 1200ms ease 0s normal none 1 running shake;
	animation-iteration-count: infinite;
	-webkit-animation: 1200ms ease 0s normal none 1 running shake;
	-webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes hoverWave {
	0% {
	box-shadow:0 8px 10px rgba(56,163,253,0.3),0 0 0 0 rgba(56,163,253,0.2),0 0 0 0 rgba(56,163,253,0.2)
}
40% {
	box-shadow:0 8px 10px rgba(56,163,253,0.3),0 0 0 15px rgba(56,163,253,0.2),0 0 0 0 rgba(56,163,253,0.2)
}
80% {
	box-shadow:0 8px 10px rgba(56,163,253,0.3),0 0 0 30px rgba(56,163,253,0),0 0 0 26.7px rgba(56,163,253,0.067)
}
100% {
	box-shadow:0 8px 10px rgba(56,163,253,0.3),0 0 0 30px rgba(56,163,253,0),0 0 0 40px rgba(56,163,253,0.0)
}
}@keyframes hoverWave {
	0% {
	box-shadow:0 8px 10px rgba(56,163,253,0.3),0 0 0 0 rgba(56,163,253,0.2),0 0 0 0 rgba(56,163,253,0.2)
}
40% {
	box-shadow:0 8px 10px rgba(56,163,253,0.3),0 0 0 15px rgba(56,163,253,0.2),0 0 0 0 rgba(56,163,253,0.2)
}
80% {
	box-shadow:0 8px 10px rgba(56,163,253,0.3),0 0 0 30px rgba(56,163,253,0),0 0 0 26.7px rgba(56,163,253,0.067)
}
100% {
	box-shadow:0 8px 10px rgba(56,163,253,0.3),0 0 0 30px rgba(56,163,253,0),0 0 0 40px rgba(56,163,253,0.0)
}
}

/* animations icon */

@keyframes shake {
0% {
transform: rotateZ(0deg);
	-ms-transform: rotateZ(0deg);
	-webkit-transform: rotateZ(0deg);
}
10% {
transform: rotateZ(-30deg);
	-ms-transform: rotateZ(-30deg);
	-webkit-transform: rotateZ(-30deg);
}
20% {
transform: rotateZ(15deg);
	-ms-transform: rotateZ(15deg);
	-webkit-transform: rotateZ(15deg);
}
30% {
transform: rotateZ(-10deg);
	-ms-transform: rotateZ(-10deg);
	-webkit-transform: rotateZ(-10deg);
}
40% {
transform: rotateZ(7.5deg);
	-ms-transform: rotateZ(7.5deg);
	-webkit-transform: rotateZ(7.5deg);
}
50% {
transform: rotateZ(-6deg);
	-ms-transform: rotateZ(-6deg);
	-webkit-transform: rotateZ(-6deg);
}
60% {
transform: rotateZ(5deg);
	-ms-transform: rotateZ(5deg);
	-webkit-transform: rotateZ(5deg);
}
70% {
transform: rotateZ(-4.28571deg);
	-ms-transform: rotateZ(-4.28571deg);
	-webkit-transform: rotateZ(-4.28571deg);
}
80% {
transform: rotateZ(3.75deg);
	-ms-transform: rotateZ(3.75deg);
	-webkit-transform: rotateZ(3.75deg);
}
90% {
transform: rotateZ(-3.33333deg);
	-ms-transform: rotateZ(-3.33333deg);
	-webkit-transform: rotateZ(-3.33333deg);
}
100% {
transform: rotateZ(0deg);
	-ms-transform: rotateZ(0deg);
	-webkit-transform: rotateZ(0deg);
}
}

@-webkit-keyframes shake {
0% {
transform: rotateZ(0deg);
	-ms-transform: rotateZ(0deg);
	-webkit-transform: rotateZ(0deg);
}
10% {
transform: rotateZ(-30deg);
	-ms-transform: rotateZ(-30deg);
	-webkit-transform: rotateZ(-30deg);
}
20% {
transform: rotateZ(15deg);
	-ms-transform: rotateZ(15deg);
	-webkit-transform: rotateZ(15deg);
}
30% {
transform: rotateZ(-10deg);
	-ms-transform: rotateZ(-10deg);
	-webkit-transform: rotateZ(-10deg);
}
40% {
transform: rotateZ(7.5deg);
	-ms-transform: rotateZ(7.5deg);
	-webkit-transform: rotateZ(7.5deg);
}
50% {
transform: rotateZ(-6deg);
	-ms-transform: rotateZ(-6deg);
	-webkit-transform: rotateZ(-6deg);
}
60% {
transform: rotateZ(5deg);
	-ms-transform: rotateZ(5deg);
	-webkit-transform: rotateZ(5deg);
}
70% {
transform: rotateZ(-4.28571deg);
	-ms-transform: rotateZ(-4.28571deg);
	-webkit-transform: rotateZ(-4.28571deg);
}
80% {
transform: rotateZ(3.75deg);
	-ms-transform: rotateZ(3.75deg);
	-webkit-transform: rotateZ(3.75deg);
}
90% {
transform: rotateZ(-3.33333deg);
	-ms-transform: rotateZ(-3.33333deg);
	-webkit-transform: rotateZ(-3.33333deg);
}
100% {
transform: rotateZ(0deg);
	-ms-transform: rotateZ(0deg);
	-webkit-transform: rotateZ(0deg);
}
}
/* конец кнопки звонка */




.messenger {
	display: block;
	position: fixed;
	right: 8%;
    bottom: 18%;
	width: 260px;
	height: 60px;
	z-index: 9999;
	/* overflow: hidden; */
	}
	.messenger-btn {
	padding: 18px;
	display: block;
	width: 68px;
	height: 68px;
	border-radius: 60px;
	background-color: #9fbce0;
	position: absolute;
	right: 0;
	top: 0;
	cursor: pointer;
	z-index: 2;
	}
	.messenger-btn img {
	width: 32px;
	height: 32px;
	}
	.messenger-links {
	position: absolute;
	left: 50px;
	top: 10px;
	width: 200px;
	transform: scale(0);
	transform-origin: 100% 50%;
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
	z-index: 0;
	}
	.messenger-links.show {
	left: 0;
	transform: scale(1);
	}
	.messenger-links a {
	width: 40px;
	margin-left: 4px;
	}
	.messenger-links img {
	max-width: 40px;
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
	}
	.messenger-links a:hover img {
	transform: scale(1.1);
	text-decoration: none;
	}















	/*===========================================*/

	#sidebar-menu {
		position: fixed; /* фиксируем наше меню */
		top: 200px; /* положение меню относительно верхнего края браузера */
		right: 0; /* прилипили меню к левому краю */
		padding: 10px;
		background: #f95c18;
		color: #FFF;
		border-radius: 8px 0 0 8px;
		z-index: 9999;
		
	}
	
	@media (max-width: 480px) {
		#sidebar-menu {
			top: 430px; /* положение меню относительно верхнего края браузера */
		}
	}
	#sidebar-menu img{
		width: 40px;
	}
	#sidebar-menu li {
		position: relative;
		cursor: pointer;
		list-style-type: none;
	}
	#sidebar-menu li i {
		/* Задаем иконкам фиксированный размер, height и line-height должны быть одинаковыми */
		width: 27px;
		height: 27px;
		line-height: 27px;
		border-radius: 4px;
		
		text-align: center;
		font-size: 30px;
	}
	
	#sidebar-menu li+li {margin-top: 4px;}
	#sidebar-menu b {
		display: none;
		position: absolute;
		/* позиция относительно левого края равна ширине эл-та li */
		left: 27px;
		top: 0;
		height: 27px;
		/* ширина равна зазору между блоком меню и подменю */
		width: 16px;
		line-height: 27px;
		background: transparent;
		color: #323A45;
		/* саму иконку позиционируем вправо, чтобы визуально она смотрелась вместе с блоком подменю */
		text-align: left;
	}
	
	#sidebar-menu li > ul {
		display: none;
		position: absolute;
		top: -10px;
		left: 42px;
		width: 120px;
		padding: 10px;
		background: #323A45;
		border-radius: 8px;
	}
	#sidebar-menu li:hover b,
	#sidebar-menu li:hover ul {display: block;}
	#sidebar-menu li a {
		display: block;
		padding: 4px 0px;
		border-radius: 4px;
		color: #FFF;
		-webkit-transition: all .2s;
		   -moz-transition: all .2s;
			-ms-transition: all .2s;
			 -o-transition: all .2s;
				transition: all .2s;
	}
	#sidebar-menu li a:hover {
		display: block;
		
	}