@import 'https://fonts.googleapis.com/css?family=Exo+2:500,600,700';

/*
В мобильниках чекбоксы работают не так как нужно.
Нужно убрать событие при наведении.
*/

:root{
	/* Для большей поддержки после релиза избавитсяот переменных. */
	/* #251026 = феолетовый */
	/* #73AB16* - зеленый */
	/* #FF5623 - оранжевый */
	/* var(--main-color) */
	--main-color:#c1a38c; 
}

@keyframes fButLoadRotate{
	0%{
		transform:rotate(0deg);
	}
	20%{
		transform:rotate(72deg);
	}
	40%{
		transform:rotate(144deg);
	}
	60%{
		transform:rotate(216deg);
	}
	80%{
		transform:rotate(288deg);
	}
	100%{
		transform:rotate(3600deg);
	}
}

@keyframes fButLoadScale{
	0%{
		transform:scale(1.0);
	}
	10%{
		transform:scale(1.1);
	}
	20%{
		transform:scale(1.2);
	}
	30%{
		transform:scale(1.3);
	}
	40%{
		transform:scale(1.4);
	}
	50%{
		transform:scale(1.5);
	}
	60%{
		transform:scale(1.4);
	}
	70%{
		transform:scale(1.3);
	}
	80%{
		transform:scale(1.2);
	}
	90%{
		transform:scale(1.1);
	}
	100%{
		transform:scale(1.0);
	}
}


fbut-form{
	display:block;
	width:100%;
	min-width:300px;
	max-width:500px;
	height:100%;
	max-height:100vh;
	position:fixed;
	top:0px;
	right:0px;
	z-index:1000;
	font-family:'Exo 2', sans-serif;
	font-weight:400;
	opacity:0;
	visibility:hidden;
	transition:.3s;
}

@media(max-width:500px){
	fbut-form{
		background:rgba(250,250,250,0.85);
		display:flex;
		align-items:center;
		justify-content:center;
	}
}

fbut-form[view="hide"]{
	opacity:0;
	visibility:hidden;
}

fbut-form[view="show"]{
	opacity:1;
	visibility:visible;
}

	fbut-form *{
		padding:0px;
		margin:0px;
		box-sizing:border-box;
		transition:.3s;
		-webkit-appearance:none;
	}

	fbut-form label{
		cursor:pointer;
	}

	fbut-form *::after, fbut-form *::before,{
		padding:0px;
		margin:0px;
		box-sizing:border-box;
		transition:.3s;
	}

	fbut-form > fbut-close{
		display:block;
		width:100%;
		height:100%;
		cursor:pointer;
		position:fixed;
		top:0px;
		right:0px;
		bottom:0px;
		left:0px;
		z-index:-1;
		/*box-shadow:0px 0px 1000px rgba(0,0,0,1) inset;*/
		background:linear-gradient(90deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2));
	}

	@media(max-width:500px){
		fbut-form > fbut-close{
			display:none;
		}
	}

	fbut-form > fbut-wrap{
		display:flex;
		align-items:center;
		justify-content:center;
		flex-direction:column;
		flex-wrap:nowrap;
		width:100%;
		height:100%;
		background:rgba(250,250,250,0.95);
		box-shadow:0px 0px 25px 0px rgba(0,0,0,0.25);
		padding:10%;
		position:absolute;
		top:0px;
		left:100%;
		transition:.9s;
		overflow:hidden auto;
	}

	@media(max-width:500px){
		fbut-form > fbut-wrap{
			background:none;
			box-shadow:none;
			/*display:block;*/
			overflow:auto;
			position:static;
			height:auto;
			max-height:100%;
		}
	}

	fbut-form > fbut-wrap[view="hide"]{
		left:100%;
	}

	fbut-form > fbut-wrap[view="show"]{
		left:0%;
	}

	@media(max-width:500px){
		fbut-form > fbut-wrap[view="hide"]{
			display:none;
		}

		fbut-form > fbut-wrap[view="show"]{
			display:block;
		}
	}

		fbut-form > fbut-wrap > fbut-close{
			display:flex;
			align-items:center;
			justify-content:center;
			flex-direction:column;
			width:30px;
			height:30px;
			position:fixed;
			top:15px;
			right:15px;
			z-index:10;
			cursor:pointer;
			opacity:1;
			transition:.4s;
		}

		fbut-form > fbut-wrap[view="hide"] > fbut-close{
			opacity:0;
			right:-60px;
		}

		fbut-form > fbut-wrap > fbut-close:hover{
			/*opacity:0.7;*/
		}

			fbut-form > fbut-wrap > fbut-close::after, fbut-form > fbut-wrap > fbut-close::before{
				display:block;
				content:"";
				width:100%;
				height:6px;
				background:linear-gradient(90deg, #c7c7c7, #999999);
				box-shadow:0px 0px 2px rgba(0,0,0,.15);
				border-radius:99px;
				position:relative;
				top:-3px;
				transform:rotate(45deg);
				transition:.4s;
			}

			fbut-form > fbut-wrap > fbut-close::before{
				top:3px;
				background:var(--main-color);
				transform:rotate(-45deg);
			}

			fbut-form > fbut-wrap > fbut-close:hover::after{
				/*transform:rotate(-45deg);*/
				transform:rotate(135deg);
			}

			fbut-form > fbut-wrap > fbut-close:hover::before{
				/*transform:rotate(45deg);*/
				transform:rotate(-135deg);
			}

		fbut-form > fbut-wrap > fbut-title{
			display:block;
			width:100%;
			text-align:center;
			font-size:26px;
			line-height:1.3;
		}

		@media(max-width:500px){
			fbut-form > fbut-wrap > fbut-title{
				font-size:18px;
			}
		}

		fbut-form > fbut-wrap > form{
			/*display:flex;*/
			/*align-items:center;*/
			/*justify-content:center;*/
			/*flex-direction:column;*/
			/*flex-wrap:nowrap;*/
			display:block;
			width:100%;
			margin:5vh 0px 0px;
		}

		@media(max-width:500px){
			fbut-form > fbut-wrap > form{
				margin-top:20px;
			}
		}

			fbut-form > fbut-wrap > form > *{
				width:100%;
				display:block;
				position:relative;
				margin:10px 0px;
			}

			fbut-form > fbut-wrap > form > label, fbut-form > fbut-wrap > form > fbut-file{
				border-bottom:2px solid #DEDEDE;
				box-shadow:2px 2px 2px rgba(0,0,0,0.05);
				border-radius:4px;
				overflow:hidden;
				position:relative;
			}

				fbut-form > fbut-wrap > form > label > input, fbut-form > fbut-wrap > form > label > textarea, fbut-form > fbut-wrap > form > label > select, fbut-form > fbut-wrap > form > fbut-file > label > span{
					display:block;
					width:100%;
					height:40px;
					border:none;
					outline:none;
					font-size:15px;
					font-weight:300;
					font-family:inherit;
					padding:5px 15px;
					padding-left:40px;
					background:#FFFFFF;
					transition:.3s;
					position:relative;
					z-index:1;
				}

				fbut-form > fbut-wrap > form > label > textarea{
					resize:vertical;
					vertical-align:middle;
					height:auto;
					min-height:60px;
					padding:10px 15px;
					padding-left:40px;
				}

				fbut-form > fbut-wrap > form > label > select{}
				
				fbut-form > fbut-wrap > form > label[fbut-select]::after{
					display:block;
					content:"";
					width:10px;
					height:10px;
					border:solid var(--main-color);
					border-width:0px 3px 3px 0px;
					border-radius:0px 0px 5px 0px;
					position:absolute;
					top:13px;
					right:15px;
					z-index:2;
					transform:rotate(-45deg);
					transition:.4s;
				}

				fbut-form > fbut-wrap > form > label[fbut-select]:focus-within::after{
					transform:rotate(45deg);
					/*top:15px;*/
					/*border-width:3px 0px 0px 3px;*/
					/*border-radius:5px 0px 0px 0px;*/
				}

					fbut-form > fbut-wrap > form > label > select[multiple] > option{
						display:flex;
						align-items:center;
						justify-content:center;
						width:100%;
						height:100%;
						line-height:30px;
					}

					fbut-form > fbut-wrap > form > label > select[multiple] > option:checked{
						background:#FF0000;
					}

				fbut-form > fbut-wrap > form > label:focus-within > input, fbut-form > fbut-wrap > form > label:focus-within > textarea, fbut-form > fbut-wrap > form > label:focus-within > select, fbut-form > fbut-wrap > form > fbut-file:focus-within > label > span{
					background:#FFF1BB;
					padding-left:55px;
				}

				fbut-form > fbut-wrap > form > label > i, fbut-form > fbut-wrap > form > fbut-file > i{
					display:flex !important;
					align-items:center;
					justify-content:center;
					width:40px;
					height:100%;
					position:absolute;
					top:0px;
					left:0px;
					z-index:2;
					overflow:hidden;
					color:var(--main-color);
					font-size:18px;
				}
				
				fbut-form > fbut-wrap > form > label:focus-within > i, fbut-form > fbut-wrap > form > fbut-file:focus-within > i{
					color:#FFF;
				}

					fbut-form > fbut-wrap > form > label > i::after, fbut-form > fbut-wrap > form > fbut-file > i::after{
						content:'';
						display:block;
						width:100%;
						height:100%;
						position:absolute;
						top:0px;
						left:0px;
						z-index:1;
						padding:0px;
						margin:0px;
						box-sizing:border-box;
						transition:.5s;
						border-left:0px solid var(--main-color);
					}

					fbut-form > fbut-wrap > form > label:focus-within > i::after, fbut-form > fbut-wrap > form > fbut-file:focus-within > i::after{
						border-left:100px solid var(--main-color);
					}

					fbut-form > fbut-wrap > form > label > i::before, fbut-form > fbut-wrap > form > fbut-file > i::before{
						position:relative;
						z-index:2;
					}

			fbut-form > fbut-wrap > form > fbut-radio, fbut-form > fbut-wrap > form > fbut-checkbox{
				display:flex;
				align-items:flex-start;
				justify-content:flex-start;
				flex-wrap:wrap;
			}

				fbut-form > fbut-wrap > form > fbut-radio > b{
					display:block;
					width:100%;
					font-size:18px;
					font-weight:300;
					margin-bottom:5px;
				}

				fbut-form > fbut-wrap > form > fbut-radio > label, fbut-form > fbut-wrap > form > fbut-checkbox > label{
					display:flex;
					align-items:center;
					justify-content:flex-start;
					flex-grow:1;
					flex-wrap:wrap;
					padding:5px 5px;
					position:relative;
				}

					fbut-form > fbut-wrap > form > fbut-radio > label > input, fbut-form > fbut-wrap > form > fbut-checkbox > label > input{
						display:block;
						width:16px;
						height:16px;
						border:3px solid #000;
						border-radius:999px;
						margin-right:5px;
						cursor:pointer;
					}

					fbut-form > fbut-wrap > form > fbut-checkbox > label > input{
						border-radius:0px;
					}

					 fbut-form > fbut-wrap > form > fbut-radio > label > input:checked, fbut-form > fbut-wrap > form > fbut-checkbox > label > input:checked{
						border-width:5px;
						border-color:var(--main-color);
						background:#000;
					}

					@media(min-width:500px){
						fbut-form > fbut-wrap > form > fbut-radio > label > input:hover, fbut-form > fbut-wrap > form > fbut-checkbox > label > input:hover{
							border-width:5px;
							border-color:var(--main-color);
							background:#000;
						}
					}

					fbut-form > fbut-wrap > form > fbut-radio > label > span, fbut-form > fbut-wrap > form > fbut-checkbox > label > span{
						display:block;
						line-height:1;
					}

					fbut-form > fbut-wrap > form > fbut-file > label > span{
						line-height:30px;
					}

						fbut-form > fbut-wrap > form > fbut-file > label > span::before{
							display:flex;
							align-items:center;
							justify-content:center;
							content:attr(count);
							width:14px;
							height:14px;
							position:absolute;
							top:calc((40px - 14px) / 2);
							right:5px;
							z-index:3;
							background:var(--main-color);
							color:#FFF;
							font-size:10px;
							border-radius:99px;
						}

						fbut-form > fbut-wrap > form > fbut-file > label > span[count='0']::before{
							display:none;
						}

						fbut-form > fbut-wrap > form > fbut-file > label > span::after{
							display:block;
							content:"";
							width:30px;
							height:100%;
							position:absolute;
							top:0px;
							right:0px;
							bottom:0px;
							background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,1) 90%);
						}

					fbut-form > fbut-wrap > form > fbut-file > label > input{
						-webkit-appearance:none;
						width:100%;
						height:100%;
						position:absolute;
						opacity:0;
					}

			fbut-form > fbut-wrap > form > button{
				-webkit-appearance:none;
				display:block;
				width:100%;
				height:40px;
				border-radius:4px;
				border:none;
				background:var(--main-color);
				box-shadow:2px 2px 2px rgba(0,0,0,0.15), 0px 0px 0px rgba(235,235,235,1) inset;
				color:#FFF;
				font-size:18px;
				font-family:inherit;
				/*text-transform:uppercase;*/
				font-weight:400;
				margin-top:15px;
				line-height:1;
			}

			fbut-form > fbut-wrap > form > button:hover{
				box-shadow:2px 2px 2px rgba(0,0,0,0.15), 0px 0px 100px rgba(90,90,90,1) inset;
			}

				fbut-form > fbut-wrap > form > button > span{
					display:inline-block;
					position:relative;
				}

					fbut-form > fbut-wrap > form > button > span > i{
						margin-right:7px;
						color:inherit;
						position:absolute;
						right:100%;
					}

			fbut-form > fbut-wrap > form > .soc{
				width:100%;
				align-items:center;
				justify-content:center;
			}

				fbut-form > fbut-wrap > form > .soc > a{
					display:block;
					margin:10px;
					font-size:30px;
				}

			fbut-form > fbut-wrap > form > fbut-agree{
				display:block;
				/*margin-top:10px;*/
			}

				fbut-form > fbut-wrap > form > fbut-agree > label{
					width:100%;
					display:flex;
					align-items:center;
					justify-content:flex-start;
					flex-wrap:nowrap;
					padding:5px 5px;
					position:relative;
				}

					fbut-form > fbut-wrap > form > fbut-agree > label > input{
						display:block;
						width:16px;
						height:16px;
						border:3px solid #000;
						border-radius:0px;
						margin-right:10px;
						cursor:pointer;
					}

					fbut-form > fbut-wrap > form > fbut-agree > label > input:checked{
						border-width:5px;
						border-color:var(--main-color);
						background:#000;
					}

					@media(min-width:500px){
	 					fbut-form > fbut-wrap > form > fbut-agree:hover > label > input{
							border-width:5px;
							border-color:var(--main-color);
							background:#000;
						}
					}

					fbut-form > fbut-wrap > form > fbut-agree > label > span{
						display:block;
						flex-grow:1;
						width:calc(100% - 16px - 10px);
						font-size:12px;
						/*text-align:center;*/
						text-decoration:underline dashed;
					}

						fbut-form > fbut-wrap > form > fbut-agree > label > span > small{
							display:block;
							font-size:90%;
						}

	fbut-form > fbut-load{
		width:50px;
		height:50px;
		display:block;
		position:fixed;
		top:calc(50% - (50px / 2));
		left:calc(50% - (50px / 2));
		z-index:1000;
		animation: fButLoadRotate 2s infinite ease-in-out;
		transition:all linear 0.3s;
		opacity:0;
		visibility:hidden;
	}

	fbut-form > fbut-load.send{
		opacity:1;
		visibility:visible;
	}

		fbut-form > fbut-load > b{
			display:block;
			width:15px;
			height:15px;
			border-radius:99px;
			background:var(--main-color);
			box-shadow:0px 0px 3px rgba(0,0,0,0.35), 0px 0px 0px 2px rgba(255,255,255,1) inset;
			position:absolute;
			animation: fButLoadScale .7s infinite ease-in-out;
		}

		fbut-form > fbut-load > b:nth-child(1){
			top:0px;
			left:0px;
		}

		fbut-form > fbut-load > b:nth-child(2){
			top:0px;
			right:0px;
		}

		fbut-form > fbut-load > b:nth-child(3){
			bottom:0px;
			right:0px;
		}
		
		fbut-form > fbut-load > b:nth-child(4){
			bottom:0px;
			left:0px;
		}

fbut-info{
	width:100%;
	height:auto;
	padding:35px 10px 15px;
	background:linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.65));
	position:fixed;
	bottom:0px;
	left:0px;
	text-align:center;
	color:rgba(255,255,255,0.85);
	z-index:1000;
	transition:all linear .6s;
	opacity:0;
	visibility:hidden;
}

fbut-info[view="show"]{
	opacity:1;
	visibility:visible;
}