:root {

	--icon-color: #7D7D7D;

}



.cf-obfuscator{

	position:fixed;

	top:0;

	left:0;

	width:100%;

	height:100%;

	z-index:998;

	margin-top:0;

	display:none;

}



/* Button styles */



.cf-button-container {

	background:#7D7D7D;

	border-radius: 10px 27px 0px 0px;

    display: flex;

	align-items: center;

    justify-content: center;

}



.cf-button{

	width: 210px;

	height:40px;

	font-size:14px;

	line-height:38px;

	font-weight:600;

	text-transform:uppercase;

	text-align:center;

	padding: 0 20px 0 67px;

	color:#fff;

	background-color: transparent;

	cursor:pointer;

	border:none;

	transition: .3s;

}



.cf-button, .cf-button-container:hover{

	border:none;

}



.cf-button:before{

	content:" ";

	background: #5F5D5D url(/wp-content/plugins/jbs-contact-form/images/user.svg) center center/contain no-repeat;

	position:absolute;

	left: 20px;

	top: 2px;

	height: 50px;

	width: 50px;

	z-index:1000;

	transform: translateY(-18px);

	display: block;

}



.cf-button.avatar-crop:before{

	border-radius: 50%;

}



.cf-button-fixed-bottom-left{

	position:fixed;

	z-index:1999;

	bottom:0;

	left:55px;

	border-bottom-right-radius:0;

	border-bottom-left-radius:0;

}



.cf-button-fixed-bottom-right{

	position:fixed;

	z-index:1999;

	bottom:0;

	right:100px;

	border-bottom-right-radius:0;

	border-bottom-left-radius:0;

}



.cf-form-class .button{

	-webkit-transition:all .2s ease-in-out;

	transition:all .2s ease-in-out;

	display:inline-block;position:relative;

	border:none;

	background:#F5A63F!important;

	color:#fff;

	letter-spacing:.5px;

	font-size:14px;

	height:30px;

	line-height:19px;

	font-weight:600;

	padding:0 15px;

	cursor:pointer;

	white-space:nowrap;

	width:100%;

	box-sizing:border-box;

	text-align:center;

	margin:0;

}



.cf-form-class .button:hover{

	background-color:#C47C1E;

}



input.button,input.button:active,input.button:focus,button,button:active,button:focus{

	outline:none;

}





/* Form styles */



.cf-form-modal{

	position:fixed;

	width:180px;

	box-shadow: 4px 4px 13px rgba(0, 0, 0, 0.25);

	border-radius: 10px;

	background-color:#E4E3E3;

	margin:0;

	z-index:1600;

	display:none;

}



.cf-form-modal .cf-form-close{

	position:absolute;

	top:-38px;

	right:-5px;

	width:32px;

	height:40px;

	overflow:hidden;

	text-indent:100%;

	white-space:nowrap;

	cursor:pointer;

	z-index:99999;

}



.cf-form-modal .cf-form-close:before,.cf-form-modal .cf-form-close:after{

	content:'';

	position:absolute;

	left:50%;

	top:50%;

	height:3px;

	width:25px;

	background-color:#7D7D7D;

	-webkit-transform:translateZ(0);

	-moz-transform:translateZ(0);

	-ms-transform:translateZ(0);

	-o-transform:translateZ(0);

	transform:translateZ(0);

	-webkit-backface-visibility:hidden;

	backface-visibility:hidden;

}



.cf-form-modal .cf-form-close:before{

	-webkit-transform:translateX(-50%) translateY(-50%) rotate(-45deg);

	-moz-transform:translateX(-50%) translateY(-50%) rotate(-45deg);

	-ms-transform:translateX(-50%) translateY(-50%) rotate(-45deg);

	-o-transform:translateX(-50%) translateY(-50%) rotate(-45deg);

	transform:translateX(-50%) translateY(-50%) rotate(-45deg);

}



.cf-form-modal .cf-form-close:after{

	-webkit-transform:translateX(-50%) translateY(-50%) rotate(45deg);

	-moz-transform:translateX(-50%) translateY(-50%) rotate(45deg);

	-ms-transform:translateX(-50%) translateY(-50%) rotate(45deg);

	-o-transform:translateX(-50%) translateY(-50%) rotate(45deg);

	transform:translateX(-50%) translateY(-50%) rotate(45deg);

}



.cf-form-modal-button-fixed-bottom-left{

	bottom:0px;

	left:75px;

}



.cf-form-modal-button-fixed-bottom-right{

	bottom:0px;

	right:120px;

}



.cf-form-pop-up{

	position:relative;

	top:50%;

	max-width:500px;

	max-height:85%;

	margin:auto;

	z-index:2002;

	-webkit-transform:translateY(-50%);

	transform:translateY(-50%);

	z-index:1001;

}



.cf-success{

	display:none;

	line-height:1.7;

	color:#656565;

	font-weight:300;

}



#cf-form-container {

	height:320px;

}



#cf-links-container {

	height:auto;

	padding:0px 0 60px;

}



#cf-links-container a {

	font-size:14px;

	line-height: 19px;

	font-weight: 400;

	color: #7D7D7D;

	width:100%;

	display:flex;

	align-items: center;

	height:45px;

	padding: 0;

	box-sizing:border-box;

	text-decoration:none;

	z-index:10000;

}



#cf-links-container a:hover {

	background-color:#DBDBDB;

}



.cf-icon a svg {

	width: 35px;

	height: 35px;

	padding: 0 15px;

	box-sizing: unset;

}



.icon-style-1 svg > path {

	fill: var(--icon-color)!important;

}



/* Style responsive */



/*@media all and (min-width: 481px) {*/

	

#cf-container.style-1 .cf-field-container:nth-child(2) a {

	border-radius: 5px 5px 0 0;

}



#cf-container.style-2 .cf-icon span, #cf-container.style-3 .cf-icon span, #cf-container.style-4 .cf-icon span {

	display: none;

}



#cf-container.style-3 .cf-button-container span, #cf-container.style-4 .cf-button-container span {

	display: none;

}



/* Style 2 */



#cf-container.style-2 .cf-button:before {

	display: none;

}



#cf-container.style-2 .cf-button-container {

	border-radius: 5px 5px 0px 0px;

	padding: 0;

}



#cf-container.style-2 .cf-button {

	width: 150px;

	height: 30px;

	font-size: 16px;

	line-height: 32px;

	padding: 0 20px 0 20px;

}



#cf-container.style-2 .cf-form-modal-button-fixed-bottom-right {

	right: 55px;

}



#cf-container.style-2 .cf-form-modal {

	width: 150px;

	padding-bottom: 30px;

	font-size: 0px;

}



#cf-container.style-2 .cf-field-container {

	display: inline-block;

	width: 50%;

}



#cf-container.style-2 .cf-icon a svg {

	width: 45px;

	height: 45px;

	padding: 10px 0;

}



#cf-container.style-2 .cf-icon a {

	display: inline-table;

    text-align: center;

}



#cf-container.style-2 .cf-field-container:nth-child(2) a {

	border-top-left-radius: 5px;

}



#cf-container.style-2 .cf-field-container:nth-child(3) a {

	border-top-right-radius: 5px;

}	



/* Style 3 */



#cf-container.style-3 .cf-button-container {

	width: 80px;

	height: 80px;

	border-radius: 100% 0px 0px 0px;

	right: 0px;

	padding: 0;

}



#cf-container.style-3 .cf-form-modal-button-fixed-bottom-right {

	right: 0px;

}



#cf-container.style-3 .cf-button:before {

	left: 22px;

	top: 42px;

}



#cf-container.style-3 .cf-form-modal {

	width: 135px;

	height: 135px;

	padding-bottom: 0px;

	font-size: 0px;

	border-radius: 100% 0 0 0;

}



#cf-container.style-3 .cf-icon a svg {

	width: 35px;

	height: 35px;

	padding: 4px;

}



#cf-container.style-3 .cf-icon a {

	display: inline-table;

    text-align: center;

	border-radius: 50%;

}



#cf-container.style-3 .cf-field-container {

	position: absolute;

}



#cf-container.style-3 .cf-field-container:nth-child(2) {

	left: 8px;

	bottom: 0px;

}



#cf-container.style-3 .cf-field-container:nth-child(3) {

	left: 24px;

	bottom: 36px;

}



#cf-container.style-3 .cf-field-container:nth-child(4) {

	left: 53px;

	bottom: 65px;

}



#cf-container.style-3 .cf-field-container:nth-child(5) {

	left: 91px;

	bottom: 80px;

}



/* Style 4 */



#cf-container.style-4 .cf-button-container {

	width: 82px;

	height: 85px;

	border-radius: 10px 0px 0px 10px;

	right: 0px;

	bottom: 20px;

	padding: 0;

}



#cf-container.style-4 .cf-form-modal-button-fixed-bottom-right {

	right: 0px;

	bottom: 20px;

}



#cf-container.style-4 .cf-button:before {

	left: 6px;

	top: 25px;

	height: 70px;

    width: 70px;

}



#cf-container.style-4 .cf-form-modal {

	width: 82px;

	padding-bottom: 85px;

	font-size: 0px;

}



#cf-container.style-4 .cf-icon a svg {

	width: 45px;

	height: 45px;

	padding: 10px 0;

}



#cf-container.style-4 .cf-icon a {

	display: inline-table;

    text-align: center;

}



#cf-container.style-4 .cf-form-modal .cf-form-close {

    right: 25px;

}



#cf-container.style-4 .cf-field-container:nth-child(2) a {

	border-radius: 10px 10px 0 0;

}



/*}*/



/* Media responsive */



@media (min-width: 481px) {

	.cf-button {

		background-image: none !important;

	}

}



@media (max-width: 480px) {



	.cf-button-container{

		width:40px;

		height:40px;

		padding: 0;

		border-radius: 100%;

	}

	.cf-button{

		width:36px;

		height:36px;

		cursor:pointer;

		border-radius:100%;

		background: transparent url(/wp-content/plugins/jbs-contact-form/images/user.svg) center center/40px 40px no-repeat;

		padding:0;

		transform: rotateY(0deg) translateZ(2px);

		transform-style: preserve-3d;

	}



	.cf-button span, .cf-button:before{

		display:none;

	}



	.cf-button-fixed-bottom-left{

		bottom:20px;

		left:20px;

	}



	.cf-button-fixed-bottom-right{

		bottom:70px;

		right:20px;

	}



	.cf-form-modal-button-fixed-bottom-left{

		bottom:90px;

		left:20px;

	}



	.cf-form-modal-button-fixed-bottom-right{

		bottom:120px;

		right:20px;

	}



	.cf-obfuscator{

		background: rgba(136, 136, 136, 0.5);

		backdrop-filter: blur(5px);

	}

	

	#cf-links-container {

		height:auto;

		padding: 10px 0 0;

	}

	

	/* Style 2 */

	

	#cf-container.style-2 .cf-button-container {

		width: 56px;

		height: 56px;

		border-radius: 5px;

		padding: 0;

	}

	

	#cf-container.style-2 .cf-button {

		width: 50px;

		height: 50px;

		border-radius: 5px;

	}



	#cf-container.style-2 .cf-form-modal-button-fixed-bottom-right {

		right: 50px;

		bottom: 55px;

	}



	#cf-container.style-2 .cf-form-modal {

		width: 150px;

		padding-bottom: 0px;

	}

	

	/* Style 3 */



	#cf-container.style-3 .cf-button-container {

		bottom: 0;

	}

	

	#cf-container.style-3 .cf-button{

		background-color: #5F5D5D;

	}

	

	#cf-container.style-3 .cf-button-fixed-bottom-right .cf-button {

		position: absolute;

		right: 8px;

		bottom: 8px;

	}

		

	#cf-container.style-3 .cf-form-modal-button-fixed-bottom-right {

		right: 0px;

		bottom: 0px;

		padding-top: 0;

	}



	/* Style 4 */

	

	#cf-container.style-4 .cf-button {

		background-color: #5F5D5D;

	}



}