/*----------------------------------------*/
/*  01. Theme default CSS
/*----------------------------------------*/

/* 1. Theme default css */
@import url('https://fonts.googleapis.com/css?family=Domine:400,700|Open+Sans:300,400,600,700,800|Rubik:400,500,700,900');
body {
	font-family: 'Rubik', sans-serif;
	font-weight: 400;
    font-style: normal;
	color:#000000;
	font-size: 14px;
	line-height: 26px;
}
.img,img {
	max-width: 100%;
	@include transition(.3s);
}
.f-left {
	float: left
}
.f-right {
	float: right
}
.fix {
	overflow: hidden
}
button{
	cursor: pointer;
}
a,
.button {
	@include transition(.3s);
}
a:focus,
.button:focus {
	text-decoration: none;
	outline: none;
}
a:focus,
a:hover
{
	color: inherit;
	text-decoration: none;
}
a,
button {
	color: inherit;
	outline: medium none;
	transition: .3s;
	-webkit-transition: .3s;
	-moz-transition: .3s;
	-ms-transition: .3s;
	-o-transition: .3s;
}
button:focus,input:focus,input:focus,textarea,textarea:focus{outline: 0}
.uppercase {
	text-transform: uppercase;
}
.xcapitalize {
	xtext-transform: capitalize;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: $domine;
	font-weight: 700;
	color: $black;
	margin-top: 0px;
	font-style: normal;
	xtext-transform: capitalize;
}
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
	color: inherit;
}
h1 {
	font-size: 60px;
}
h2 {
	font-size: 46px;
}
h3 {
	font-size: 28px;
}
h4 {
	font-size: 22px;
}
h5 {
	font-size: 18px;
}
h6 {
	font-size: 16px;
}
ul {
	margin: 0px;
	padding: 0px;
}
li {
	list-style: none
}
p {
	font-size: 14px;
	font-weight: normal;
	line-height: 26px;
	color: #000000;
	margin-bottom: 15px;
}
hr {
	border-bottom: 1px solid $black;
	border-top: 0 none;
	margin: 30px 0;
	padding: 0;
}
label {
	color: $black;
	cursor: pointer;
	font-size: 14px;
	font-weight: 400;
}
*::-moz-selection {
	background: $black;
	color: $white;
	text-shadow: none;
}
::-moz-selection {
	background: $black;
	color:$white;
	text-shadow: none;
}
::selection {
	background: $black;
	color: $white;
	text-shadow: none;
}

/*--
    - Input Placeholder
-----------------------------------------*/
.footer-email input::-moz-placeholder {
	color: $black;
}
.footer-email input::placeholder {
	color: $black;
}


/*--
    - Common Classes
-----------------------------------------*/
.fix {
    overflow:hidden;
}
.clear{
    clear: both;
}
.b-left{
    border-left: none;
}
.b-right{
    border-right: none;
}

/*--
    - Font Famaly
-----------------------------------------*/
.rubik{
	font-family: $rubik;
}
.domine {
	font-family: $domine;
}
.opensens {
	font-family: $opensens;
}


/*--
    - Background color
-----------------------------------------*/
.white-bg {
	background:$white;
}
.black-bg {
	background:#e8d2b8;
}
.theme-bg {
	background: $theme-color;
}
.btn-black {
	background: $black;
}
.pink-bg{
	background: $pink;
}
.blue-bg{
	background: $blue;
}
// .primary-bg {
// 	background: #222;
// }

/*--
    - color
-----------------------------------------*/
.white-color {
	color: $white;
}
.black-color {
	color: $black;
}
.theme-color {
	color: $theme-color;
}
.pink-color {
	color: $pink;
}

.blue-color {
	color: $blue;
}
.brown-color{
	color: $brown;
}
// .primary-color {
// 	color: #222;
// }
/*--------------------------------------
	- Button
----------------------------------------*/
.btn{
	@extend %btn;
}
.border-btn{
	@extend %border-btn;
	&:hover{
		@extend %theme-btn;
	}
}
.theme-btn{
	@extend %theme-btn;
	&:hover{
		@extend %black-btn;
	}
}
.black-btn{
	@extend %black-btn;
	&:hover {
		@extend %theme-btn;
	}
}
.blue-btn{
	@extend %blue-btn;
	&:hover{
		@extend %pink-btn;
	}
}
.pink-btn{
	@extend %pink-btn;
	&:hover{
		@extend %blue-btn;
	}
}
.brown-btn{
	@extend %brown-btn;
	&:hover{
		@extend %grey-border;
	}
}
.grey-btn{
	@extend %grey-border;
	&:hover{
		@extend %brown-btn;
	}
}
/* Small Heding Title*/
.small-title{
	@extend %small-heading;
	&.hp-1 {
		color: $dimgrey;
	}
}
/* Section Title */
.title-span{
	@extend %title-span;
}
.title-heading{
	@extend %title-heading;
	&::after{
		@extend %title-after;
	}
	&.hp-1{
		color: $black-1;
		&::after {
			@extend %title-after-1;
		}
	}
}
/*--
    - Margin & Padding
-----------------------------------------*/
/*-- Margin Top --*/
@for $i from 1 through 40 {
    .mt-#{5 * $i}{margin-top: 5px * $i;}
}

/*-- Margin Bottom --*/
@for $i from 1 through 40 {
    .mb-#{5 * $i}{margin-bottom: 5px *$i;}
}
/*-- Margin Left --*/
@for $i from 1 through 40 {
    .ml-#{5 * $i}{margin-left: 5px * $i;}
}

/*-- Margin Right --*/
@for $i from 1 through 40 {
    .mr-#{5 * $i}{margin-right: 5px *$i;}
}

/*-- Padding Top --*/
@for $i from 1 through 40 {
    .pt-#{5 * $i}{padding-top: 5px *$i;}
}

/*-- Padding Bottom --*/
@for $i from 1 through 40 {
    .pb-#{5 * $i}{padding-bottom: 5px *$i;}
}

/*-- Padding Left --*/
@for $i from 1 through 40 {
    .pl-#{5 * $i}{padding-left: 5px *$i;}
}

/*-- Padding Right --*/
@for $i from 1 through 40 {
    .pr-#{5 * $i}{padding-right: 5px *$i;}
}


// others common css here :)