:root {
  --header-height: var( --with-106px ) /*106px*/; 
  --dark-color: #19191c;
  --white-color: #fff;
  --second-color: #45FF00;
  
  --border-bottom-white: rgba(255,255,255,.15);

  /*---------------------------- */
  --h3_fond_size: 30px;
  --Body_text_color: #fff;
  --small_text_size: 20px;
  
  
  /*---------------------------- */
  --support-body-bkg-color: #335cda;
  --support-body-dark-color: rgba(0,0,0,.5) /*#0d1733*/ /* 19191c */ ;
  
  
}

@media (min-width:768px) {
	
	:root {
		--header-height: 56px; 
	}
}


html,
body {
	position: relative;
	min-height: 100%;
}

body{
	font-family: 'Outfit', sans-serif;
	color:#fff;
	font-size: var( --with-14px );
}

body{
	background: var( --dark-color ) url( '//www.bluffclub.com/wp-content/themes/bluffclub/assets/img/img_backround.jpg' ) no-repeat 50% 50%;
	background-attachment:fixed; 
	background-size:cover 
}

/*
body.npage-body{
	background: var( --dark-color ) url( '//www.bluffclub.com/wp-content/themes/bluffclub/assets/img/img_backround.jpg' ) no-repeat 50% 50%;
	background-attachment:fixed; 
	background-size:cover 
}

body.support-body {
	font-size: var( --with-16px );
	background: var( --support-body-bkg-color )
}
*/

@media (min-width:1980px) {
	body.npage-body{
		background-image: url( '//www.bluffclub.com/wp-content/themes/bluffclub/assets/img/img_backround@2x.jpg?c=2' )
	}
	
}

.content-wrapper{
	width:100%
}

/* =============================== WELL ================================ */

.well{
	padding: var( --with-15px );
	margin: var( --with-15px ) 0;
	border-radius: var( --with-8px ); /* 15px */
}

body.npage-body .well{ 
	border: solid var( --with-1px ) var( --module-bkg-color );
	background:var( --module-bkg-color ); 
	box-shadow:0 var( --with-15px ) 20px rgba(0,0,0,.25)
}

body.support-body .well{
	background:var( --support-body-dark-color );
	box-shadow: 0 1px 8px rgba(0,0,0,0.08);
}

/* =============================== MISK ================================ */

a,
a:link,
a:visited, 
a:active {
	color:#fff;
	text-decoration:none
}
 

img{
	display:block;
	max-width:100%;
	height:auto
}

hr{ 
	border-top-color:#000
}

.green{
	color: var( --second-color ) !important
}

.float-left{
	float:left
}

.test,
.test div,
.test ul,
.test ul li,
.test nav{
	border:solid 1px lime;
	min-height: var( --with-30px )
}

.fullScreen {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
	z-index:9999
}

.animated {
	-webkit-transition: all 0.3s ease-out;
	   -moz-transition: all 0.3s ease-out;
	    -ms-transition: all 0.3s ease-out;
	     -o-transition: all 0.3s ease-out;
	        transition: all 0.3s ease-out;
}

.flex{
	display: flex;
	align-items: center;
	justify-content: center;
}

.flex-center{
	display:flex;
	align-items: center 
}

.flex-center-min992{ 
	align-items: center 
}

.flex-nowrap {
  flex-wrap: nowrap !important;
}

.flex-baseline{
	display:flex; 
	align-items: baseline;
	width:100% 
}

.flex-baseline > small{
	margin-left: auto;
	order: 2;
}

	
@media (min-width: 992px) { 

	.flex-center-min992{
		display:flex 
	}
}

.center{
	text-align:center
}

.hover-animated,
ul.footer-menu li a,
ul.footer-menu li button{
	position:relative
}

.hover-animated::after,
ul.footer-menu li a::after,
ul.footer-menu li button::after {
    content: '';
    display: block; 
    border-bottom: var( --with-1px ) solid var( --white-color );
	position:absolute;
    bottom: 0px;
	left: 0;
	width: 100%;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform .5s cubic-bezier(.22, .61, .36, 1)
}

.hover-animated:hover:after,
ul.footer-menu li a:hover::after,
ul.footer-menu li button:hover:after {
	transform: scaleX(1);
	transform-origin: left;
}

.hover-animated:hover,
ul.footer-menu li a:hover,
ul.footer-menu li button:hover {
	text-decoration:none
}

/* =============================== btn ================================ */
.btn.border-gradient{
	position:relative;
	z-index:2
}
/*
.border-gradient { 
	background: linear-gradient(white, white) padding-box, linear-gradient(to bottom,  rgb(183,194,144) 0%,rgb(64,72,49) 100%) border-box; 
	border: var( --with-2px ) solid transparent;
}
*/
.border-gradient::before,
.border-gradient::after{
	content:''; 
 	display:block;
	width:100%;
 	position:absolute;
	-webkit-transition: all 0.3s ease-out;
	   -moz-transition: all 0.3s ease-out;
	    -ms-transition: all 0.3s ease-out;
	     -o-transition: all 0.3s ease-out;
	        transition: all 0.3s ease-out;
}

.border-gradient::after{
	z-index:-1;
	width: 150%;
	height:100%;
	top:0;
	left:0;
	transform:translate(-17.5%,-50%);
	border-radius:50%;
	background: rgba(255,255,255,.3)
}

.border-gradient::before{ 
	background: linear-gradient(to bottom,  rgb(130,166,33) 4%,rgb(143,175,55) 42%,rgb(130,166,33) 50%,rgb(36,43,14) 100%);
	height:100%;
	top:0;
	right:0;
	bottom:0;
	left:0;
	z-index:-2 
}

.btn {
	overflow:hidden;
	border-radius: var( --with-8px );
	
	display:inline-block;
	height: var( --with-55px );
	line-height: var( --with-55px );
	padding:0 var( --with-59px );

	position:relative;
	
	font-weight:900;
	font-size: var( --with-22px );
	color:#fff !important;
	text-shadow:var( --with-1px ) var( --with-1px ) var( --with-2px ) rgba(0,0,0,.4);
	text-transform:uppercase;
	  
	box-shadow: rgba(0, 0, 0, 0.24) 0 var( --with-2px ) var( --with-2px ), rgba(0,0,0,.5) 0 var( --with-8px ) var( --with-12px );
	cursor: pointer;
	 
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
	vertical-align: baseline;
	
	-webkit-transition: all 0.2s cubic-bezier(.17,.67,.83,.67); 
	   -moz-transition: all 0.2s cubic-bezier(.17,.67,.83,.67); 
	    -ms-transition: all 0.2s cubic-bezier(.17,.67,.83,.67); 
	     -o-transition: all 0.2s cubic-bezier(.17,.67,.83,.67); 
	        transition: all 0.2s cubic-bezier(.17,.67,.83,.67); 
}

.btn:link,
.btn:visited,
.btn:hover,
.btn:active { 
	text-decoration:none 
}

.btn.border-gradient:hover{ 
	border-radius: var( --with-28px )
}

.btn.border-gradient:hover::after{
	top:-55px
}

/* ========================================================= forms ================================================================= */

.form button,
button,
button::-moz-focus-inner 
{
  border: 0;
  outline: 0;
}
/* =============================== placeholder focus ================================ */

.form .form-group label{
	color: rgba(255,255,255,.5) /*var( --second-color )*/
}

.form-control {
	color:#fff;
	background: rgba(0,0,0,.7) ; /* var( --dark-color ) // transparent */
	border-radius: .8rem;
	border-color: var( --border-bottom-white );
	padding-left: 10px;
	padding-right:10px;
	border-top:none;
	border-right:none;
	border-left:none;
}

.form-control:focus {
	background: rgba(0,0,0,.2);
	/*-webkit-box-shadow: none;
	box-shadow: none*/
	/*
	box-shadow: 0 8px 6px -6px black;
	border-color: #66afe9;
	outline: 0;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 0.6);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 0.6)
	*/
}

select.form-control:focus,
select.form-control:focus option{
	background:none;
	background:transparent
}

.form-control::-moz-placeholder {
	color: rgba(255,255,255,.85);
	opacity:1
}
.form-control:-ms-input-placeholder {
	color: rgba(255,255,255,.85);
}
.form-control::-webkit-input-placeholder {
	color: rgba(255,255,255,.85);
}


.form-control:focus::-moz-placeholder{
	color: rgba(255,255,255,.3);
}
.form-control:focus:-ms-input-placeholder{
	color: rgba(255,255,255,.3);
}
.form-control:focus::-webkit-input-placeholder {
	color: rgba(255,255,255,.3);
}

form.form select.form-control option{
	color:#555;
	font-size:  var( --with-14px )
}

/* ---- */
.form label{
	font-weight:300
}
.form label u{
	text-decoration:none;
	color:red;
	display:inline-block;
	margin-left:5px
}

/* ---- */

/*#attachment::-webkit-file-upload-button {
  visibility: hidden;
}*/

/* file upload button */
input[type=file]{
	padding: 0;
	line-height: 1
}

input[type=file]::file-selector-button {
	text-indent: -9999px;
    white-space: nowrap;
    overflow: hidden;
	
	display: inline-block;
	height:100%;
	margin-right: 20px;
	border: none;
	background: red;
	padding: 10px 20px;
	color: lime;
	cursor: pointer;
	transition: background .2s ease-in-out;
	background: transparent url(/wp-content/themes/bluffclub/assets/img/fileI.svg?v=1) no-repeat center center;
}
/*
input[type=file]::file-selector-button:hover {
  background-color: red
}
*/
.form .btns{
	display:block;
	margin-top:30px
}

html body * > .form-control { 
  opacity: 1; /* Firefox */
}

#page.page .the_content form.form div.cpch_cnt{
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 30px
}