/* placeholders */
.bazz-pro ::-webkit-input-placeholder   {color: #555 !important;font-style: normal !important;}
.bazz-pro :-moz-placeholder                    {color: #555 !important;opacity: 1;font-style: normal !important;}
.bazz-pro ::-moz-placeholder                  {color: #555 !important;opacity: 1;font-style: normal !important;}
.bazz-pro :-ms-input-placeholder           {color: #555 !important;font-style: normal !important;}
.bazz-pro :placeholder-shown                  {color: #555 !important;font-style: normal !important;}
/* /placeholders */

/* GENERAL */
.bazz-pro, .bazz-pro * {
	box-sizing: border-box;
	font-family: helvetica, sans-serif !important;
	font-style: normal !important;
	font-size: 16px !important;
}
.bazz-pro {
	position: fixed;
	width: 65px;
	height: 65px;
	top: auto;
	left: auto;
	bottom: auto;
	right: auto;
	border-radius: 32.5px;
	transition: width 0.5s ease-in-out, 
				bottom 0.3s ease-in-out, 
				left 0.3s ease-in-out, 
				right 0.3s ease-in-out;
	z-index: 9997;
}

/* MAIN BUTTON */
.bazz-pro-button {
	width: 65px;
	height: 65px;
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 32.5px;
	background-color: #00AFF2;
	text-align: right;
	cursor: pointer;
}
	.bazz-pro-button > div {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		text-align: center;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		transform-style: preserve-3d; 
		transition: transform 0.5s ease-in-out;
	}
	
	.bazz-pro-button > div:first-child {
		background: url('img/trubka.png') no-repeat center center;
		animation: bazz-pro-rotate-first 4s ease-in-out 3s infinite;
	}
	@keyframes bazz-pro-rotate-first {
		0%   { transform: rotateY( 0 ); }
		25%   { transform: rotateY( 180deg ); }
		50%   { transform: rotateY( 0 ); }
		100% { transform: rotateY( 0 ); }
	}
	
	.bazz-pro-button > div:last-child {
		display: -ms-flexbox;
		display: flex;
		-ms-flex-align: center;
		align-items: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-transform: rotateY( 180deg );
		-moz-transform: rotateY( 180deg );
		-ms-transform: rotateY(180deg);
		-o-transform: rotateY( 180deg );
		transform: rotateY( 180deg );
		color: #fff;
		font-size: 14px !important;
		font-weight: bold !important;
		line-height: 1.2;
		word-wrap: break-word;
		animation: bazz-pro-rotate-second 4s ease-in-out 3s infinite;
	}
	@keyframes bazz-pro-rotate-second {
		0%   { transform: rotateY( 180deg ); }
		25%   { transform: rotateY( 0 ); }
		50%   { transform: rotateY( 180deg ); }
		100% { transform: rotateY( 180deg ); }
	}
	
	.bazz-pro-button:before {
		content: '';
		display: block;
		position: absolute;
		width: 66px;
		height: 66px;
		opacity: 0.25;
		background: #00aff2;
		border-radius: 50%;
		transform: scale(1);
		animation: bazz-pro-border-inner 4s ease-in-out 3s infinite;
	}
	@keyframes bazz-pro-border-inner {
		0%   { transform: scale(1); }
		25%   { transform: scale(1.3); }
		50%   { transform: scale(1); }
		100%  { transform: scale(1); }
	}
	
	.bazz-pro-button:after {
		content: '';
		display: block;
		position: absolute;
		width: 65px;
		height: 65px;
		opacity: 0;
		visibility: hidden;
		border: 1px solid #00aff2;
		border-radius: 50%;
		transform: scale(1);
		animation: bazz-pro-border-outer 4s ease-in-out 3s infinite;
	}
	@keyframes bazz-pro-border-outer {
		0%   { transform: scale(1); opacity: 1; visibility: visible; }
		50%   { transform: scale(1.8); opacity: 0; visibility: hidden; }
		100%  { transform: scale(1.8); opacity: 0; visibility: hidden; }
	}


/** The form is open **/
.bazz-pro.opened {
	background-color: rgba(0,0,0,0.75);
	width: 500px;
}
.bazz-pro.opened .bazz-pro-button {
	display: none;
}
.bazz-pro-close {
	display: none;
	width: 30px;
	height: 30px;
	position: absolute;
	top: -10px;
	left: -10px;
	cursor: pointer;
	border-radius: 50%;
	border: 3px solid #fff;
	background: url('img/bazz-close-button.png') no-repeat center center;
	background-color: #00aff2;
	background-size: 22px;
	font-size: 0px;
	z-index: 9998;
}
	.bazz-pro.opened .bazz-pro-close {
		display: block;
	}
.bazz-pro-form {
	display: none;
	width: 100%;
	height: 100%;
	padding: 0 30px;
	text-align: center;
	overflow: hidden;
	position: relative;
}

.bazz-pro-form > div {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: center;
	align-items: center;
	-ms-flex-pack: justify;
	justify-content: space-between;
	width: 100%;
	height: 100%;
}
	.bazz-pro-form label {
		display: block;
		width: 55%;
		color: #fff !important;
		text-align: left;
		line-height: 1.3;
		font-weight: normal;
		margin: 0 !important;
	}
	.bazz-pro-form input {
		width: 32% !important;
		text-align: left;
		height: 30px;
		border-radius: 20px !important;
		padding: 0 !important;
		color: #fff !important;
		letter-spacing: 0;
		line-height: 1;
		text-transform: none;
		transition: border-color 0.3s ease-in-out;
	}
	.bazz-pro-form input[type="tel"] {
		background: transparent !important;
		border: 1px solid #555;
		padding-left: 6px !important;
	}
	.bazz-pro-form input[type="tel"]:focus,
	.bazz-pro-form input[type="text"]:focus {
		border-color: #fff;
	}
	.bazz-pro-form input[type="submit"] {
		width: 25%;
		text-align: center;
		text-align: center;
		font-family: helvetica,sans-serif !important;
		font-size: 16px !important;
		font-weight: normal !important;
		border-width: 1px;
		border-style: solid;
		border-radius: 20px;
		border-color: #00AFF2;
		height: 30px;
		color: #fff !important;
		text-decoration: none !important;
		line-height: 28px;
		margin-left: 10px;
		background-color: #00AFF2;
	}
	.bazz-pro-form input[hidden] {
		display: none !important;
	}
	.bazz-pro-your-name {
		color: #fff !important;
		text-decoration: none !important;
		border-bottom: 1px dashed #fff;
		line-height: 1.2;
		cursor: pointer;
	}
	
	.bazz-pro-form-bottom input {
		width: 40%;
		padding: 0 6px !important; 
		background: transparent !important;
		border: 1px solid #555;
	}
	.bazz-pro-name-close {
		width: 34px;
		height: 34px;
		display: block;
		background: url('img/ok.png') no-repeat center center #00aff2;
		background-size: 24px;
		border-radius: 50%;
		border-width: 1px;
		border-style: solid;
		border-color: #00AFF2;
		margin-left: 10px;
	}
	
	/* Opening bottom part of the form */
	.bazz-pro-form-top {
		transition: margin 0.3s ease-in-out;
	}
	.bazz-pro-form-top.hid {
		margin-top: -65px;
	}
	
	/* Countdown styles */
	.bazz-pro .countdown {
		width: 32% !important;
		text-align: center;
		font-size: 20px !important;
		color: #00aff2;
		font-weight: bold !important;
	}
	.bazz-pro .countdown > * {
		font-size: 20px !important;
	}
	
	/* Result text */
	.bazz-pro-result-text {
		font-size: 20px !important;
		line-height: 1.2;
		color: #eee;
	}
		
@media only screen and (max-width : 575px) {
	.bazz-pro.opened {
		width: 100%;
		height: auto;
		min-height: 65px;
	}
	.bazz-pro-close {
		left: 0;
		top: -15px;
	}
	.bazz-pro-form {
		height: 130px;
	}
	.bazz-pro-form > div {
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}
	.bazz-pro-form > div > label:first-child {
		width: 100% !important;
		-ms-flex: none;
		flex: none;
	}
	.bazz-pro-form input {
		width: 45% !important;
	}
	.bazz-pro-form-top.hid {
		margin-top: -130px;
	}
}