/********* RESET **********/
*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

ul,
li {
	list-style-type: none;
}

a {
	color: inherit;
	text-decoration: none;
}

/* ======================== */

html, body {
  font-family: 'Lato', Arial, Helvetica, sans-serif;
  font-size: 62.5%;
  height: 100%;
  margin: 0;
}

div#main-body {
  padding-top: 7rem;
  min-height: 100%;
  margin-bottom: -5rem;
}

div#main-body.bg-grey {
  background: #f2f3f2;
}

div#main-body::after {
  content: "";
  display: block;
  height: 5rem;
}

.container {
	margin: 0 auto;
	width: 80%;
} 

/***** VARIABLES *****/

:root {
	--s-size: 1.2rem;
	--m-size: 1.6rem;
	--m-x-size: 2.4rem;
	--m-2x-size: 3.2rem;
	--m-3x-size: 4.8rem;

	--primary-black: #262e37;
  --primary-green: #00c089;
  
  --card-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* ================== */

/****** HEADER & NAVIGATION ******/

header {
	background: var(--primary-black);
	color: white;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
}

header > .main-nav {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	flex-wrap: wrap;
	z-index: 2;
}

header > .main-nav > .logo {
	font-weight: 700;
	font-size: var(--m-x-size);
	margin-right: auto;
	text-transform: uppercase;
	height: 7rem;
	line-height: 7rem;
}

header > .main-nav .logo > a {
	padding: 1rem 1.6rem 1rem 0;
}

header nav {
	align-items: center;
	display: flex;
	font-size: var(--m-size);
	flex: 1 1 100%;
	flex-direction: column;
	order: 1;
	text-align: center;
}

header nav.menu {
	display: none;
}

header nav > a {
	padding: 1.6rem 0rem;
	text-transform: uppercase;
	color: #7b7f83;
  margin-top: 1rem;
  cursor: pointer;
}

header nav > a:last-child {
	margin-bottom: var(--m-size);
}
header nav > a:first-child {
	margin-top: 0;
}

header nav > a:hover {
	color: white;
}

header nav > a.current {
	color: white;
	font-weight: 700;
}

header .toggle-nav {
	font-size: var(--m-x-size);
	padding: 0.3rem 0.6rem;
}

/* ============================ */

/********* DASHBOARD SIDEBAR ***********/
div#main-body > .wrapper {
  height: calc(100vh - 12rem);
}

div#main-body > .wrapper #main{
  height: 100%;
  overflow: auto;
}

div#main-body > .wrapper #sidebar{
  background: #7b7f83;
  color: white;
  cursor: pointer;
  font-size: var(--m-size);
  height: calc(100% - 12rem);
  width: 25rem;
  left: -25rem;
  margin: 0;
  position: fixed;
  text-transform: uppercase;
}

div#main-body > .wrapper #sidebar.active{
  left: 0px;
  transition: all 600ms 300ms ease-in-out;
}

div#main-body > .wrapper  #sidebar ul{
  width: 100%;
  margin-top: var(--m-2x-size);
}
div#main-body > .wrapper  #sidebar ul li{
  padding: 1.6rem 1rem;
  border-bottom: 1px solid var(--primary-black);
}

div#main-body > .wrapper  #sidebar ul li a.current{
  color: white;
	font-weight: 700;
}

@media only screen and (min-width: 770px) {
  div#main-body > .wrapper {
    display: flex;
  }
  
  div#main-body > .wrapper #main{
    flex: 1;
  }
  
  div#main-body > .wrapper  #sidebar{
    position: inherit;
    display: inherit;
    height: 100%;
  }
}
/* ==================================== */

/****** HERO ******/
#hero {
	background: linear-gradient(to right bottom, rgba(69, 84, 100, 0.5), rgba(38, 46, 55, 0.8)),
	center / cover no-repeat url("../img/hero-bg.jpg");
	color: white;
  height: 50rem;
  width: 100%;
	margin-top: 7rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

#hero h2 {
	font-size: var(--m-3x-size);
}

#hero p{
	font-size: var(--m-x-size);
}

#hero .hero-btn {
	font-size: var(--m-size);
	margin-top: var(--m-3x-size);
	margin-bottom: var(--m-size);
}

/******* HOW IT WORKS *********/
#how-it-works,
#right-for-you {
	color: var(--primary-black);
	line-height: var(--m-x-size);
}

.how-it-works__title {
	font-size: var(--m-2x-size);
	padding-top: var(--m-3x-size);
	margin-bottom: var(--m-2x-size);
	text-align: center;
}

.bold {
	font-weight: bold;
}
/* ============================= */

/* BOX DISPLAY */

.box-display {
  align-items: flex-start;
  display: grid;
  grid-template-columns: repeat(auto-fit, 30rem);
  grid-column-gap: 2rem;
  justify-content: space-evenly;
}

.box-display > div {
  padding: 0.15rem;
  margin-bottom:2rem;
  margin-left: auto;
  margin-right: auto;
  width: 30rem;
  text-align: center;
}

.box {
	height: 35rem;
}

.box-content {
	width: 100%;
	margin: var(--m-x-size) auto;
	text-align: center;
}

.box-content .box-content__title{
	font-size: var(--m-x-size);
	margin-bottom: var(--m-x-size);
}

.box-content>p {
	font-size: var(--m-size);
}

.img-wrap {
	width: 50%;
	margin: var(--m-x-size) auto;
}

img {
  max-width: 100%;
  min-width: inherit;
}
/* ============================= */

/******* RIGHT-FOR-YOU *******/
.rfy-display {
	display: flex;
	flex-direction: column;
}

.rfy-img {
	width: 100%;
}

.rfy-content {
	flex: 1;
	padding: var(--m-size);
	width: 80%;
	margin: 0 auto;
}

.rfy-content p {
	font-size: var(--m-size);
	line-height: var(--m-2x-size);
}

.rfy-content .rfy__title {
	font-size: var(--m-2x-size);
	line-height: var(--m-3x-size);
	padding-top: var(--m-x-size);
	margin-bottom: var(--m-2x-size);
	text-align: center;
}

.tick {
	font-size: var(--m-x-size);
	color: var(--primary-green);
}
/* ============================== */

/******* QUICK ESTIMATE *******/
#quick_estimate {
	background: linear-gradient(to right bottom, rgba(69,84,100, 0.5), rgba(38,46,55, 0.8)),
	url(../img/estimate-bg.jpg) no-repeat;
	background-size: cover;
	background-position: center;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-top: var(--m-2x-size);
}

.estimate-form {
	background: var(--primary-black);
	color: white;
	padding: var(--m-size);
	margin: var(--m-2x-size) 0;
}

.estimate-form .estimate__title{
	font-size: var(--m-x-size);
	margin-bottom: var(--m-x-size);
}

.estimate-display {
	border: 2px solid white;
	border-radius: 0.5rem;
	padding: var(--m-size);
}

.estimate-form>p, 
.estimate-display>p {
	font-size: var(--m-size);
	margin-bottom: var(--s-size);
}

.estimate-form small {
	color: #7b7f83;
	display: flex;
	font-size: var(--s-size);
  margin-bottom: var(--m-2x-size);
}

.estimate-form small>span {
	margin-left: auto;
}

div.amount-display,
div.term-display {
	font-size: var(--m-x-size);
	height: 5rem;
	line-height: 5rem;
	text-align: center;
}

p.small {
	font-size: var(--s-size);
}

input[type=range] {
  -webkit-appearance: none;
	width: 100%;
	background: transparent;
}

input[type=range]:focus {
  outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 0.5rem;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: white;
  border-radius: 2.5rem;
  border: 0px solid #000101;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: var(--primary-green);
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -0.75rem;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: white;
}
/* ===================================================== */

/*********** Table ***********/
.table {
border-collapse: collapse;
margin: 0;
width: 100%;
}

.table-responsive.table--no-card {
-webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
overflow: auto;
}

.table-responsive.table--no-card.no-shadow {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}

.table-earning thead th {
background: var(--primary-black);
font-size: var(--m-size);
color: #fff;
vertical-align: baseline;
font-weight: 400;
text-transform: capitalize;
line-height: 1;
padding: 1rem 3.2rem 2.4rem 3.2rem;
white-space: nowrap;
}

.table-earning.repayment-table thead th {
padding: 2.2rem 4rem;
vertical-align: middle;
text-align: left;
}

.table-earning thead th.text-right {
padding-left: 15px;
padding-right: 65px;
}

.table-earning tbody td {
color: #808080;
font-size: var(--m-size);
padding: 1.2rem 4rem;
white-space: nowrap;
}

.table-earning tbody td.text-right {
padding-left: 15px;
padding-right: 65px;
}

.table-earning tbody tr:hover td {
color: #555;
cursor: pointer;
}

.table-striped tbody tr:nth-of-type(odd) {
background-color: #fff;
}

.table-striped tbody tr:nth-of-type(even) {
background-color: #f5f5f5;
}

.table a.more {
  font-size: 3rem;
  font-weight: 700;
}

.table a.more:hover {
  color: var(--primary-green);
}
/* ------------------------------------- */

/********* BUTTONS *************/
.login_btn {
	color: white;
	padding: 1rem 1.6rem;
	border-radius: 0.8rem;
}

.login_btn.no-border,
.btn.no-border {
	border-radius: 0;
}

.login_btn:hover {
	font-weight: 700;
}

.btn {
	color: #fff;
	cursor: pointer;
	padding: 1rem 1.6rem;
	border-radius: 0.8rem;
	text-decoration: none;
	text-align: center;
	outline: none;
}

.btn-green {
	background: var(--primary-green);
	border-color: var(--primary-green);
}

.btn-primary {
	background: rgb(68, 160, 141);
	border-color: rgb(68, 160, 141);
}

.btn-warning {
	background: #f0ad4e;
	border-color: #f0ad4e;
}

.btn-danger {
	background: #d9534f;
	border-color: #d9534f;
}

.btn-green:hover,
.btn-green:active {
	background: #32cca0;
}
/* ========================== */

/**************** CARDS ******************/
.card {
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
	transition: 0.3s;
}
		
.card:hover {
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
/* ======================================== */

/******** FORMS ***********/
@import url(https://fonts.googleapis.com/css?family=Roboto:300);

.login-page {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 36rem;
  padding: var(--m-2x-size) 0 0;
  margin: auto;
}

.login-page .form {
  background: #FFFFFF;
  max-height: 60rem;
  overflow: hidden;
  width: 100%;
  padding: 4rem;
  text-align: center;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
  margin-bottom: var(--m-2x-size);
}

.form input {
  background: #f2f2f2;
  border: 0;
  box-sizing: border-box;
  color: var(--primary-black);
  font-family: "Roboto", sans-serif;
  font-size: 1.4rem;
  outline: 0;
  margin: 0 0 var(--m-size);
  padding: var(--m-size);
  width: 100%;
}

.form input:read-only,
.form textarea:read-only {
  background: white;
  font-size: var(--m-size);
}

.form textarea {
  background: #f2f2f2;
  border: 0;
  box-sizing: border-box;
  color: var(--primary-black);
  font-family: "Roboto", sans-serif;
  font-size: 1.4rem;
  line-height: var(--m-size);
  outline: 0;
  margin: 0 0 var(--m-size);
  padding: var(--m-size);
  width: 100%;
  resize: none;
}

.form button {
  background: var(--primary-green);
  border: 0;
  color: #FFFFFF;
  cursor: pointer;
  font-family: "Roboto", sans-serif;
  font-size: 1.4rem;
  margin: 0 0 1.6rem;
  outline: 0;
  padding: var(--m-size);
  text-transform: uppercase;
  transition: all 0.3 ease;
  width: 100%;
}

.form button:hover,.form button:active,.form button:focus {
  background: #32cca0;
}

.form .message {
  margin: 0 0 var(--m-size);
  color: #b3b3b3;
  font-size: var(--s-size);
  cursor: pointer;
}

.form .offset {
  color: #b3b3b3;
  font-size: var(--s-size);
  text-align: left;
  margin: 0 0 var(--m-size);
}

.form .message a {
  color: var(--primary-green);
}

.form .message a.grey {
  color: #b3b3b3;
}

.login-page form {
  max-height: 60rem;
  opacity: 1;
  overflow: hidden;
  transition: all 600ms 300ms ease-in-out;
}

form h2 {
  color: var(--primary-black);
  font-size: var(--m-x-size);
  font-weight: normal;
  margin-bottom: var(--m-size);
}

form.closed {
  opacity: 0;
  max-height: 0px;
}

.form-container {
  max-width: 100rem;
  margin: auto;
}

form .form-group label {
  color: var(--primary-black);
  display: block;
  font-size: var(--m-size);
  line-height: 2;
  text-align: left;
  text-transform: capitalize;
  white-space: nowrap;
  width: 30%;
}

form .form-group div {
  width: 100%;
  margin: 0 0 1rem;
}

form .form-group div>input {
  margin: 0 0 0.6rem;
}
/* ======================== */

/******* USER DASHBOARD *******/
.user-preview {
  color: var(--primary-black);
  display: grid;
  grid-template-columns: repeat(auto-fit, 25rem);
  justify-content: space-evenly;
  margin: var(--m-2x-size) auto;
}

.user-preview > div {
  background: #ffffff;
  margin: var(--m-2x-size) auto;
  height: 32rem;
  width: 100%;
  overflow: auto;
}

.loan-history {
  margin: var(--m-2x-size) auto;
  width: 100%;
}

.card-title {
  background: var(--primary-black);
  color: #fff;
  font-size: var(--m-size);
  line-height: var(--m-size);
  padding: 2rem 3.2rem;
  text-transform: uppercase;
  text-align: center;
}

.card-body {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: calc(100% - 5.6rem);
}

.overview__title {
  color: #7b7f83;
  font-size: var(--m-size);
  text-transform: capitalize;
}

.overview__value {
  font-size: var(--m-2x-size);
  text-align: center;
  margin-bottom: var(--m-2x-size);
}

.card__header {
  font-size: var(--m-2x-size);
  text-align: center;
  margin-bottom: var(--m-size);
  line-height: 1.2;
  text-transform: capitalize;
  text-align: left;
}

.text-offset {
  color: #7c7c80;
  display: block;
  font-size: 1rem;
  text-transform: uppercase;
}
/* ========================== */

.loan-decision {
  display: flex;
  margin: 2rem 0 4rem;
  font-size: 1.8rem;
  justify-content: space-evenly;
}

.payment-btn {
  margin: 2rem 0 4rem;
  font-size: 1.8rem;
}

/******* MODAL ********/
section.mg-top {
  margin-top: var(--m-x-size);
  text-align: center;
}

#click {
  display: none;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 99;
  background: #000000;
  pointer-events: none;
  opacity: 0;
  -webkit-transform: scale(0.5);
          transform: scale(0.5);
}

input[type="checkbox"]:checked ~ .overlay {
  pointer-events: auto;
  opacity: 0.9;
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transition: transform 0.5s ease, opacity 0.5s ease;
          transition: transform 0.5s ease, opacity 0.5s ease;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 100;
  -webkit-transform: translate(-50%, -50%) scale(0.5);
          transform: translate(-50%, -50%) scale(0.5);
  width: 100%;
  max-width: 64rem;
  pointer-events: none;
  opacity: 0;
}

input[type="checkbox"]:checked ~ .modal {
  pointer-events: auto;
  opacity: 1;
  -webkit-transform: translate(-50%, -50%) scale(1);
          transform: translate(-50%, -50%) scale(1);
  -webkit-transition: transform 0.5s ease, opacity 0.5s ease;
          transition: transform 0.5s ease, opacity 0.5s ease;
  transition-delay: 0.1s;
}

.modal__content {
  display: block;
}
/* ------------------- */

/************ FOOTER *******************/

footer{
	background-color: var(--primary-black);
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
	box-sizing: border-box;
	width: 100%;
	text-align: center;
  font: normal var(--m-size) sans-serif;
  height: 5rem;
  line-height: 5rem;
  z-index: 2;
}

footer>p{
	color:  #fff;
	font-size: 14px;
	margin: 0;
}
/* ====================================== */

/***************** MEDIA QUERIES **********************/

@media only screen and (min-width: 770px) {
	html {
		font-size: 62.5%;
	}

	header > .main-nav {
		flex-wrap: nowrap;
		height: 7rem;
	}

	header nav {
		display: inherit;
		flex-direction: row;
		flex: none;
	}

	header nav > a {
		margin-top: 0;
		margin-left: var(--m-size);
		padding: 1rem 0;
	}

	header nav > a:first-child {
		margin-left: 0;
	}
	
	header nav > a:last-child {
		margin-bottom: 0;
	}

	header nav.menu {
		display: inherit;
	}

	header .toggle-nav {
		display: none;
	}

	.estimate-form {
		max-width: 50rem;
		margin-left: auto;
	}

	.rfy-display {
		margin: 0 auto;
		width: 80%;
		flex-direction: row;
	}

	.rfy-img {
		width: 30rem;
	}

	.rfy-content {
		padding-left: var(--m-3x-size);
	}

	.rfy-content .rfy__title {
		text-align: left;
  }

  .user-preview > div {
    width: 90%;
  }

  .form-container {
    padding: var(--m-2x-size) 0 0;
  }

  form .form-group {
    display: flex;
  }

  form .form-group label {
    line-height: 1;
    margin: 1.6rem 1.6rem 1.6rem 0;
  }
}
/* ======================================= */