:root {
  /* öâåò  */
  --blue: #3D74FF;
  --red: #e0006c; 
  --black: #2b3035;
  --purple: #c03bc2;
  --pink: #e0006c;
  
  --grad: linear-gradient(to right, #fd61e3, #fd61e3 50%, #ff77b8); 
  --grad2: linear-gradient(to right, #6f61b9 5%, #587ccd 20%, #6c83d9, #af68d1  40%, #c04dc6  50%, #c74dc9 60%, #f32bb0 80%, #fd3ca2);  
}

.gradtext {
  	background: linear-gradient(100.9609356076561deg, 
  	var(--blue) 2.8874172185430464%,
  	var(--purple) 21.125827814569536%,
  	var(--pink) 66.64238410596026%),
  	var(--blue) 99.8874172185430464%;
    background-clip: border-box;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


.bg_overlay_grid {
	position: relative;
}
.bg_overlay_grid:after {
	position: absolute; left: 0; top: 0; content:''; z-index: 1;
	width: 100%; height: 100%;
	background:  url('../images/overlay.png') repeat 50% 50%;
	opacity: 0.5;
}


.design1 {
	position: relative; 
	padding: 30px;
	text-align: center;
	background: var(--grad2);
	color: #fff;
}
.design1 h2 {
	color: #fff !important; margin: 0 0 25px 0 !important; font-size: 40px !important;
}
.design1 .btn {
	margin-top: 15px;
}


.rad2 {-moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px;}
.rad4 {-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;}
.rad5 {-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;}
.rad6 {-moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px;}
.rad8 {-moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px;}
.rad50 {-moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%;}

.shadow1 {box-shadow: 0px 2px 4px #efefef; -webkit-box-shadow: 0px 2px 4px #efefef;  -moz-box-shadow: 0px 2px 4px #efefef;}
.shadow2 {box-shadow: 0 0 5px #ccc; -webkit-box-shadow: 0 0 5px #ccc;  -moz-box-shadow: 0 0 5px #ccc;}

.transcss1 {-webkit-transition: all 100ms ease-in-out 0s;-moz-transition: all 100ms ease-in-out 0s;-o-transition: all 100ms ease-in-out 0s;}
.transcss3 {-webkit-transition: all 300ms ease-in-out 0s;-moz-transition: all 300ms ease-in-out 0s;-o-transition: all 300ms ease-in-out 0s;}


/* mainfonts  */
@font-face {
    font-family: 'r_t';
    src: url('../fonts/Roboto-Thin-webfont.eot');
    src: url('../fonts/Roboto-Thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Thin-webfont.woff') format('woff'),
         url('../fonts/Roboto-Thin-webfont.ttf') format('truetype'),
         url('../fonts/Roboto-Thin-webfont.svg#robotothin') format('svg');
    font-weight: normal;    font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'r_l'; 
    src: url('../fonts/Roboto-Light-webfont.eot');
    src: url('../fonts/Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Light-webfont.woff') format('woff'),
         url('../fonts/Roboto-Light-webfont.ttf') format('truetype'),
         url('../fonts/Roboto-Light-webfont.svg#robotolight') format('svg');
    font-weight: normal;   font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'r_r';
    src: url('../fonts/Roboto-Regular-webfont.eot');
    src: url('../fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Regular-webfont.woff') format('woff'),
         url('../fonts/Roboto-Regular-webfont.ttf') format('truetype'),
         url('../fonts/Roboto-Regular-webfont.svg#robotoregular') format('svg');
    font-weight: normal;    font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'r_m';
    src: url('../fonts/Roboto-Medium-webfont.eot');
    src: url('../fonts/Roboto-Medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Medium-webfont.woff') format('woff'),
         url('../fonts/Roboto-Medium-webfont.ttf') format('truetype'),
         url('../fonts/Roboto-Medium-webfont.svg#robotomedium') format('svg');
    font-weight: normal;    font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'r_b';
    src: url('../fonts/Roboto-Bold-webfont.eot');
    src: url('../fonts/Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Bold-webfont.woff') format('woff'),
         url('../fonts/Roboto-Bold-webfont.ttf') format('truetype'),
         url('../fonts/Roboto-Bold-webfont.svg#robotobold') format('svg');
    font-weight: normal;    font-style: normal; font-display: swap;
}

/* decor font */
@font-face {
    font-family: 'decor';
    src: url('../fonts/menuet_script-webfont.eot');
    src: url('../fonts/menuet_script-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/menuet_script-webfont.woff2') format('woff2'),
         url('../fonts/menuet_script-webfont.woff') format('woff'),
         url('../fonts/menuet_script-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}








.btn {
	display: inline-block; position: relative;  z-index: 9;
	overflow: hidden;
	padding: 15px 25px; 
	font-size: 16px;
	font-family: 'r_l'; cursor: pointer; 
	text-decoration: none !important;
	text-transform: none;	
	-moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px;
	-webkit-appearance: none;
	-webkit-transition: all 300ms ease-in-out 0s;-moz-transition: all 300ms ease-in-out 0s;-o-transition: all 300ms ease-in-out 0s;
}
.btn.btn_big {
	padding: 25px 35px; 
	font-size: 20px;
}
.btn i {
	position: absolute; top: 50%; right: 20px; transform: translate(-50%, -50%);
}


.btn:hover {
	
}


.btn_red { 
	background: var(--red); color: #fff; 
}
.btn_red:hover { 
	background: #fff; color: #222; 
}

.btn_purple { 
	background: var(--purple); color: #fff; 
}
.btn_purple:hover { 
	background: #fff; color: #222; 
}

.btn_blue { 
	background: var(--blue); color: #fff; 
}
.btn_blue:hover { 
	background: #fff; color: #222; 
}

/*.btn_dark:before {
	position: absolute; left: -100%; top: 0; content: ''; z-index: -1;
	width: 100%; height: 100%;
	background: var(--blue);
	-webkit-transition: all 300ms ease-in-out 0s;-moz-transition: all 300ms ease-in-out 0s;-o-transition: all 300ms ease-in-out 0s;
}*/
.btn_dark:hover {
	color: #fff;
}
.btn_dark:hover:before {
	left: 0;
}


.btn_grad {
	background-image: var(--grad);
	background-size: 200% auto;
	color: #ffffff !important;
}
.btn_grad:hover {
  background-position: right center;
}

.btn_grad2 {
	background-image: var(--grad2);
	background-size: 200% auto;
	color: #ffffff !important;
}
.btn_grad2:hover {
  background-position: right center;
}