body{
    font-family: 'Open Sans', serif;
    font-size: 14px;
    line-height: 1.6;
    color: #5e5e5e;
    background-color: #FAF6EA;
	padding-bottom: 85px;
}
/*========================FONT-SIZE==========================*/

.f13 {font-size: 13px !important;}
.f14 {font-size: 14px !important; }
.f15 {font-size: 15px !important;}
.f16 {font-size: 16px !important;}
.f17 {font-size: 17px !important;}
.f18 {font-size: 18px !important;}
.f19 {font-size: 19px !important;}
.f20 {font-size: 20px !important;}
.f21 {font-size: 21px !important;}
.f22 {font-size: 22px !important;}
.f23 {font-size: 23px !important;}
.f24 {font-size: 24px !important;}
.f25 {font-size: 25px !important;}
.f26 {font-size: 26px !important;}
.f30 {font-size: 30px !important;}
.f45 {font-size: 45px !important;}


/*======================FONT-WEIGHT===========================*/

.f100  {  font-weight: 100;}
.f300  {  font-weight: 300;}
.f400  {  font-weight: 400;}
.f500  {  font-weight: 500;}
.f600  {  font-weight: 600;}
.f700  {  font-weight: 700;}
.f900  {  font-weight: 900;}


/*=========================SPACING=============================*/   

.spaceBtm10   {    margin-bottom: 10px  !important;   }
.spaceBtm20   {    margin-bottom: 20px  !important;   }
.spaceBtm30   {    margin-bottom: 30px  !important;   }
.spaceBtm100   {    margin-bottom: 100px  !important;   }
.spaceBtm130   {    margin-bottom: 130px  !important;   }
.spaceBtm140   {    margin-bottom: 140px  !important;   }

.spaceLft10   {    margin-left: 10px  !important;   }
.spaceLft20   {    margin-left: 20px  !important;   }
.spaceLft30   {    margin-left: 30px  !important;   }

.space0   {    margin-top: 0px  !important;   }
.space5   {    margin-top: 5px  !important;   }
.space10  {    margin-top: 10px  !important;  }
.space20  {    margin-top: 20px  !important;  }
.space25  {    margin-top: 25px  !important;  }
.space30  {    margin-top: 30px  !important;  }
.space40  {    margin-top: 40px  !important;  }
.space50  {    margin-top: 50px  !important;  }
.space60  {    margin-top: 60px  !important;  }
.space70  {    margin-top: 70px  !important;  }
.space80  {    margin-top: 80px  !important;  }
.space90  {    margin-top: 90px  !important;  }
.space100 {    margin-top: 100px !important;  }

.no-space {
	margin: 0 !important;
	padding: 0 !important;
}



.pad0{padding: 0 !important;}
.pad10 {  padding: 10px !important;  }
.pad20{  padding: 20px !important; }
.pad30{  padding: 30px !important; }

.pad-top0 {  padding-top: 0 !important;  }
.pad-top5 {  padding-top: 5px !important;  }
.pad-top10 {  padding-top: 10px !important;  }
.pad-top20{  padding-top: 20px !important; }
.pad-top30{  padding-top: 30px !important; }

.pad-btm0 {  padding-bottom: 0 !important;  }
.pad-btm5{  padding-bottom: 5px !important; }
.pad-btm10{  padding-bottom: 10px !important; }
.pad-btm20{  padding-bottom: 20px !important; }
.pad-btm30{  padding-bottom: 30px !important; }

.pad-left0 {  padding-left: 0 !important;  }
.pad-left10{  padding-left: 10px !important; }
.pad-left20{  padding-left: 20px !important; }
.pad-left30{  padding-left: 30px !important; }

.pad-right0{  padding-right: 0 !important; }
.pad-right10{  padding-right: 10px !important; }
.pad-right20{  padding-right: 20px !important; }
.pad-right30{  padding-right: 30px !important; }

.m-auto{margin: 0 auto !important;}
.margin0{margin:0!important;}


/*=========================BORDERS=============================*/   
.borderTop1{border-top: 1px solid #AAA;}
.borderBtm1{border-bottom: 1px solid #AAA;}
.borderRt1{border-right: 1px solid #AAA;}
.borderLeft1{border-left: 1px solid #AAA;}


/* General */
.hideit{display:none;}
.clickable{cursor:pointer;}
#loadingView{
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.6);
}
.noLineHeight{
	line-height: 1em;
}
.redClr{color: #F22613;}
.greenClr{color: #2ECC71;}
.orangeclr {
	color: #f26522 !important;
	font-family: 'FbSpoiler Regular';
}
.whiteClr{color: white !important;}

.blackClr{color: #111111 !important;}
.redBox{
	background-color: #F22613;
	border-radius: 5px;
	transition: background-color 0.3s;
	color: white;
}
.redBox:hover{background-color: #D91E18;}

.pinkyBox{
	background-color: #9b59b6;
	border-radius: 5px;
	transition: background-color 0.3s;
	color: white;
}
.pinkyBox:hover{background-color: #942bc0;color: white;}

.greenBox{
	background-color: #2ECC71;
	border-radius: 5px;
	transition: background-color 0.3s;
}
.greenBox:hover{background-color: #26A65B;}

.whiteBox{
	background-color: #FFF;
	border: 1px solid #bbb;
	border-radius: 5px;
	transition: background-color 0.3s;
}
.whiteBox:hover{background-color: #F1F1F1;}

.grayBox{
	background-color: #fff;
	border-radius: 5px;
	transition: background-color 0.3s;
}
.grayBox:hover{background-color: #eee;}
#footer{
	position: fixed;
	bottom: 0;
	right: 0;
	width: 100%;
	color: white;
	background: #333;
}

/* Make elements the same height */
.row.is-flex {
	display: flex;
	flex-wrap: wrap;
}
.row.is-flex > [class*='col-'] {
	display: flex;
	flex-direction: column;
}

/*
* And with max cross-browser enabled.
* Nobody should ever write this by hand. 
* Use a preprocesser with autoprefixing.
*/
.row.is-flex {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
.row.is-flex > [class*='col-'] {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
}

/* Header */
#header{
	height: 80px;
	background-color: #9b59b6;
}

/* Home */
#rateBoxFather{
	position: relative;
	top: -30px;
}
.rateBox{
	border: 1px solid #BBB;
	border-radius: 4px;
	background-color: #FCFCFC;
	box-shadow: 10px 5px 25px rgba(50,50,50,0.7);
}
textarea{
	resize: none;
}

.img-container {
	position: absolute;
	z-index: 999;
	top: 9px;
	right: 20px;
	display: flex;
	width: 100px;
	height: 60px;
	align-items: center;
	justify-content: center;
}

.logo {
	max-width: 100px;
	max-height: 60px;
}


/* Media Query */

/* Extra small devices */
@media (max-width: 767px){
	body{padding-bottom: 65px;}
	/*#header{height: 60px;}*/
	/* Home */
	.pad20{padding: 10px !important;}
	.rateBox h2{font-size: 24px;}
	#footer>.pad-btm10{padding-bottom: 0 !important;}
	#footer>.pad-top10{padding-top: 0 !important;}

	.rateBox {
		margin-top: 50px;
	}
}