// VARIABLES


// 1. Variables 

@color--primary:#5C99F6;
@color--primary-1:#5C9AF7;
@color--primary-2:#F4A606;
@color--primary-3:#46CDAB;
@color--primary-4:#5C9AF7;

@color--white:#FCFCFC;
@color--white-1:#F9F9F9;

@onDark:#ffffff;
@transition--speed:200ms;

// Typography 

h2{
font-weight: bold;
font-size: 20px;
color: #383838;
letter-spacing: -0.23px;
}
h4{
font-weight: bold;
font-size: 18px;
color: #4D80CF;
letter-spacing: -0.7px;
}
// FONT

.text--default{

font-family: "Open Sans";
font-weight: 300;
font-size: 14px;
color: #383838;
letter-spacing: -0.06px;
}
.text--bold{
	font-weight:700 !important;
}
.text--tiny{

font-size: 9px;
color: #D2D2D2;
letter-spacing: -0.23px;
}
.text--uppercase{
font-size: 14px;
text-transform: uppercase;
color: #FFFFFF;
letter-spacing: 0.2px;
}


// MISC 

hr{
	width: 70%;

	border-top:1px solid #F8F8F8;
}

.logo{

	width: 220px;
	height: 25px;
	cursor: pointer;
	background: url('../images/logo.svg');
	background-repeat: no-repeat;
	display: block;
	-webkit-transition: all @transition--speed ease-out;
	-moz-transition: all @transition--speed ease-out;
	-ms-transition: all @transition--speed ease-out;
	-o-transition: all @transition--speed ease-out;
	transition: all @transition--speed ease-out
}
.logo:hover{

	transform:scale(1.1);

}

.lazy-form{

label{
	opacity:.6 !important;
	-webkit-transition: all @transition--speed ease-out;
	-moz-transition: all @transition--speed ease-out;
	-ms-transition: all @transition--speed ease-out;
	-o-transition: all @transition--speed ease-out;
	transition: all @transition--speed ease-out
}

}

.lazy-form:hover{
	label{
	opacity:1 !important;
}
}

input[type=text]{
	background: #FAFAFA;
	border: 1px solid #F4F4F4;
	border-radius: 3px;
	display: block;
	width: 100%;
	padding: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
}

label{
	display: block;
	font-weight: 100;
	color: #383838;
	letter-spacing: -0.03px;
}
.radio-group {
	text-align: center;

label{
	font-size: 12px;
	font-weight: bold;
	display: inline;
	margin-right: 20px;
	cursor: pointer;

}
input[type=radio]{


}
}

table{
	color:#5D5A5A !important;
thead{	
	background: @color--primary;
	color: white;
	font-weight: normal !important;
	height:50px;
 	vertical-align: center !important;
 	th{
 		padding: 15px !important;
	text-align: left;
 	}
}
	td{
		height: 50px;
     	vertical-align: center !important;
		font-weight: bold;
		padding: 10px 15px !important;
		border-top: 0px solid #fff !important;
	}
}

table.sell{
	td{
		font-weight: bold;
		background: #EEFFEE !important;
		padding: 10px;
	}
}
table.buy{
	td{ font-weight: bold;
		background: #FFF3F3 !important;
		padding: 10px;
	}
}

// BUTTON
.btn--primary-2{

	background: @color--primary-2 !important;
	box-shadow: 0 4px 0 0 #CC8A00 !important;

}
.btn--primary-1{

	background: @color--primary-1 !important;
	box-shadow: 0 4px 0 0 #4987E4 !important;

}

.btn--primary-3{

	background: @color--primary-3 !important;
	box-shadow: 0 4px 0 0 #29A586 !important;

}

.btn-white{
	color: white;
}
.btn-white:hover{
	color:white;
}
.btn{

	box-shadow: 0 4px 0 0 ;
	border-radius: 5px;
	height: 45px;
	width: 100%;
	display: block;
	font-weight: bold;
	padding-top: 10px;

}

.btn.btn--facebook{

	background: #FFFFFF;
	box-shadow: 5px 5px 0 0 #3b5998;
	font-size: 16px;
	font-weight: bold;
	color: #3b5998;
	letter-spacing: -0.3px;
	border-radius: 0px;
	width: 360px;
	display: inline-block;
	padding-top: 9px;

}
.btn.btn--facebook-2{
display: block;
background: #3b5998;
font-size: 16px;
font-weight: bold;
color: #FFFFFF;
letter-spacing: -0.3px;
border-radius: 0px;
width: 320px;

margin: 0 auto;
}
.modal-content {

    border-radius: 2px !important;

}

.modal-header {
    padding: 15px;
    border-bottom: 0px solid #e5e5e5;

}

.modal-footer {
    padding: 15px;
    text-align: right;
    border-top: 0px solid #e5e5e5;
}


// Radius

.radius--0{

	border-radius: 0px;
}
// MARGIN 
.mmt--15{
	margin-top: -15px !important;
}
.mt--1{
	margin-top: 10px !important;
}
.mt--2{
	margin-top: 20px !important;
}
.mt--3{
	margin-top: 30px !important;
}
.mt--4{
	margin-top: 40px !important;
}
.mt--5{
	margin-top: 50px !important;
}
.mt--6{
	margin-top: 60px !important;
}
.mt--7{
	margin-top: 70px !important;
}
.mt--8{
	margin-top: 80px !important;
}
.mt--9{
	margin-top: 90px !important;
}
.mt--10{
	margin-top: 100px !important;
}
.mb--1{
	margin-bottom: 10px !important;
}
.mb--2{
	margin-bottom: 20px !important;
}
.mb--3{
	margin-bottom: 30px !important;
}
.mb--4{
	margin-bottom: 40px !important;
}
.mb--5{
	margin-bottom: 50px !important;
}
.mb--6{
	margin-bottom: 60px !important;
}
.mb--7{
	margin-bottom: 70px !important;
}
.mb--8{
	margin-bottom: 80px !important;
}
.mb--9{
	margin-bottom: 90px !important;
}
.mb--10{
	margin-bottom: 100px !important;
}
.m--1{
	margin: 10px !important;
}
.m--2{
	margin: 20px !important;
}
.m--3{
	margin: 30px !important;
}
.m--4{
	margin: 40px !important;
}
.m--5{
	margin: 50px !important;
}
.m--6{
	margin: 60px !important;
}
.m--7{
	margin: 70px !important;
}
.m--8{
	margin: 80px !important;
}
.m--9{
	margin: 90px !important;
}
.m--10{
	margin: 100px !important;
}

// PADDING 


.pt--1{
	padding-top: 10px !important;
}
.pt--2{
	padding-top: 20px !important;
}
.pt--3{
	padding-top: 30px !important;
}
.pt--4{
	padding-top: 40px !important;
}
.pt--5{
	padding-top: 50px !important;
}
.pt--6{
	padding-top: 60px !important;
}
.pt--7{
	padding-top: 70px !important;
}
.pt--8{
	padding-top: 80px !important;
}
.pt--9{
	padding-top: 90px !important;
}
.pt--10{
	padding-top: 100px !important;
}
.pb--1{
	padding-bottom: 10px !important;
}
.pb--2{
	padding-bottom: 20px !important;
}
.pb--3{
	padding-bottom: 30px !important;
}
.pb--4{
	padding-bottom: 40px !important;
}
.pb--5{
	padding-bottom: 50px !important;
}
.pb--6{
	padding-bottom: 60px !important;
}
.pb--7{
	padding-bottom: 70px !important;
}
.pb--8{
	padding-bottom: 80px !important;
}
.pb--9{
	padding-bottom: 90px !important;
}
.pb--10{
	padding-bottom: 100px !important;
}

.p--1{
	padding: 10px !important;
}
.p--2{
	padding: 20px !important;
}
.p--3{
	padding: 30px !important;
}
.p--4{
	padding: 40px !important;
}
.p--5{
	padding: 50px !important;
}
.p--6{
	padding: 60px !important;
}
.p--7{
	padding: 70px !important;
}
.p--8{
	padding: 80px !important;
}
.p--9{
	padding: 90px !important;
}
.p--10{
	padding: 100px !important;
}

// BACKGROUND

.background--primary{
	background: @color--primary;
	color: @onDark !important;
}
.background--primary-1{
	background: @color--primary-1;
	color: @onDark !important;
}
.background--primary-2{
	background: @color--primary-2;
	color: @onDark !important;
}
.background--primary-3{
	background: @color--primary-3;
	color: @onDark !important;
}
.background--primary-4{
	background: @color--primary-4;
	color: @onDark !important;
}
.background-white{
	background: @color--white !important;

}
.background-white-1{
	background: @color--white-1 !important;
	
}

// BOX 

.box{
background: #FFFFFF;
box-shadow: 0 2px 10px 0 #E5E5E5;
overflow: hidden;
display: block;
-webkit-transition: all @transition--speed ease-out;
	-moz-transition: all @transition--speed ease-out;
	-ms-transition: all @transition--speed ease-out;
	-o-transition: all @transition--speed ease-out;
	transition: all @transition--speed ease-out;
}
.box:hover{

	box-shadow: 0 2px 50px 0 #E5E5E5;
}

// MEDIA QUERY 


@media screen and (max-width: 768px){
.container-fluid{
	padding: 0px;
}
.container{
	padding: 0px;
}
.btn.btn--facebook{

	/* Rectangle 16: */
background: #FFFFFF;
box-shadow: 5px 5px 0 0 #3b5998 ;
font-size: 12px;
padding-top:12px;
font-weight: bold;
color: #3b5998;
letter-spacing: -0.3px;
border-radius: 0px;
width: 100%;
// padding-top: 10px;
display: block;
}
.logo{
	margin:0 auto;
}
.mt--1-m{

	margin-top: 20px;
}
.text--center--mobile{
text-align: center;
font-size: 18px;

h6{
	font-size: 18px;
}
}
label{

	font-size: 12px;
}
}