:root {
  /* öâåò  */
  --blue: rgba(36, 50, 74, 1); /*  */
  --red: #e41779; 
  --green: #91c81d;
  
  --grad: linear-gradient(to right,var(--blue) 0%,var(--red) 51%, var(--blue) 100%);  
  --grad2: linear-gradient(to right,var(--blue) 0%,var(--red) 100%);
  
  --grad_reverse: linear-gradient(to right,var(--blue) 0%,var(--blue) 51%, var(--red) 100%); 
  
}

.text_grad {
	background: -webkit-linear-gradient(var(--blue), var(--red));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}


.border_grad {
	background: -webkit-linear-gradient(var(--blue), var(--red));
	padding: 3px;
}

.red {
	color: var(--red);
	font-style: normal !important;
}

.decor_textline {
	display: inline-block; 
	background-image: linear-gradient(transparent 50%, rgba(241,66,0,0.8) 10%);
	background-repeat: repeat-x;
	background-size: 200% 100%;
}
.decor_textline2 {
	display: inline-block; 
	background-image: linear-gradient(transparent 50%, rgba(241,66,0,0.5) 10%);
	background-repeat: repeat-x;
	background-size: 200% 100%;
	-moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px;
}

/* BUTTONS */

.btn {
	display: inline-block; position: relative;
	-webkit-appearance: none;
	color: #fff; 
	padding: 22px 48px 22px 28px; 
	font-size: 14px;
	line-height: 130%;
	font-family: 'decor'; cursor: pointer; 
	text-decoration: none !important; text-transform: uppercase;
	-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
	transition: -webkit-transform .4s cubic-bezier(0.4, 0, 0.2, 1);
	transition: transform .4s cubic-bezier(0.4, 0, 0.2, 1);
	transition: transform .4s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform .4s cubic-bezier(0.4, 0, 0.2, 1);
}

/*.btn:before {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 30px;
  content: "";
  background: #222;
  transition: .5s;
  opacity: 0;
  border-top-right-radius: 33px;
  border-bottom-right-radius: 33px;
  z-index: -1;
  border-top-left-radius: 33px;
}
.btn:hover:before {
	width: 100%;
	border-radius: 0;
	opacity: 1;
}*/

.btn:before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	transition: -webkit-transform .8s cubic-bezier(0.4, 0, 0.2, 1);
	transition: transform .8s cubic-bezier(0.4, 0, 0.2, 1);
	transition: transform .8s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform .8s cubic-bezier(0.4, 0, 0.2, 1);
	-webkit-transform: scale(0, 1);
	transform: scale(0, 1);
	-webkit-transform-origin: left center;
	transform-origin: left center;
}

.btn span {
	position: absolute;  top: 50%; right: 0px; transform: translate(-50%, -50%);   
	font-size: 20px;
}



.btn_red {
	color: #fff;
	background: var(--red);
	border: 2px solid var(--red);
}
.btn_red:before {
	background-color: var(--red);
	-webkit-transform: scaleX(0);
	transform: scaleX(0);
}
.btn_red:hover:before {
	background: #fff;
	-webkit-transform: scaleX(1);
	transform: scaleX(1);
}
.btn_red:hover {
	color: #000;
	background: transparent;
}
.btn_red:hover span {
	color: var(--red);
}



.bg_overlay {
	position: absolute; left: 0; top: 0; content: '';
	width: 100%; height: 100%;
	background: rgba(38, 38, 38, 0.2);
	-webkit-transition: all 600ms ease-in-out 0s;-moz-transition: all 600ms ease-in-out 0s;-o-transition: all 600ms ease-in-out 0s;
}

.section_overlay {
	position: absolute; left: 0; top: 0; content: ''; z-index: -1;
	width: 100%; height: 100%;
	background-color: rgba(37,37,37,0.9);
}

.section_mask:before {
	position: absolute; left: 0; top: 0; content: ''; z-index: 4;
	width: 100%; height: 100px;
	-webkit-mask: url('../images/mask2.png') top left no-repeat;
  	mask-size: auto;
	-webkit-mask-size: cover !important;
	background-color: #1a1a1a;
}
.section_mask:after {
	position: absolute; left: 0; bottom: 0; content: ''; z-index: 4;
	width: 100%; height: 100px;
	-webkit-mask: url('../images/mask2.png') top left no-repeat;
  	mask-size: auto;
	-webkit-mask-size: cover !important;
	background-color: #1a1a1a;
	    -moz-transform: rotate(180deg); /* Äëÿ Firefox */
    -ms-transform: rotate(180deg); /* Äëÿ IE */
    -webkit-transform: rotate(180deg); /* Äëÿ Safari, Chrome, iOS */
    -o-transform: rotate(180deg); /* Äëÿ Opera */
    transform: rotate(180deg);
}