@import url('https://fonts.googleapis.com/css2?family=Cabin&display=swap');
@import url("https://use.typekit.net/skl5vhk.css");

.fa {
	font-family: 'FontAwesome'!important;
}

body {
	font-family: 'Cabin', sans-serif!important;
	background: #d9d9d9;
}

header {
	background: #000;
	padding: 20px 0;
	color: #fff;
}

header .container {
	padding: 0!important;
}

header a {
	color: #fff;
}

header a:hover {
	color: #af2764;
}

header img {
	max-width: 100%;
}

header .topmarg {
	margin-top: 31px;
}

@media(max-width: 850px) {
	
	header .topmarg {
		margin-top: 25px;
	}
	
}

@media(max-width: 740px) {
	
	header .topmarg {
		margin-top: 17px;
	}
	
}

@media(max-width: 600px) {
	
	header {
		overflow-x:hidden;
		text-align: center;
	}
	
	header .topmarg {
		margin-top: 0;
	}
	
	header img.topmarg {
		margin: 15px 0;
		max-width: 150px!important;
	}
	
	.gomlogo {
		max-width: 100px;
		margin: 0 auto;
	}
	
}

header i {
	min-width: 18px;
}

h1, h2, h3, .skipbtn, .total-box p, .next-step, .curstep, .area-label {
	font-family: bebas-neue, sans-serif;
}

.resource-wrap a {
	color: #af2764!important;
}

.noexp .lhsgraph {
    display: none!important;
}

.noexp .rhsgraph {
    width: 100%!important;
}

    .noexp .rhsgraph h3 span {
        display: none!important;
    }

.noexp .graphs {
    background: #c8995a!important;
}

.step2, .step3 {
	display: none;
}

.curstep1 .step2nav, .curstep1 .step3nav {
	display: none;
}

.curstep2 .step1nav, .curstep2 .step3nav {
	display: none;
}

.curstep3 .step1nav, .curstep3 .step2nav {
	display: none;
}

.container {
	max-width: 1000px;
	margin: 0 auto;
}

.accordion > .card .card-header {
    padding-left: 0!important;
}

.card p {
	margin-bottom: 5px;
}

.card a, .card a:hover {
	color: #000;
}

.card-header button:before {
  font-family: 'FontAwesome';/* essential to enable caret symbol*/
  content: "\f105";/* adjust as needed, taken from font-awesome.css */
  color: #000;
}
.card-header button.collapsed:before {
  /* symbol for "collapsed" panels */
  content: "\f107";  /* adjust as needed, taken from font-awesome.css */
}

p.pdflink a {
	font-weight: bold;
	text-transform: uppercase;	
	color: #af2764!important;
	font-size: 20px;
	font-family: bebas-neue, sans-serif;
}

.skipbtn {
	background: #af2764;
	color: #fff;
	display: inline-block;
	padding: 15px 20px;
	font-size: 18px;
	font-weight: bold;
	text-transform: uppercase;
}

	.skipbtn:hover {
		color: #fff!important;
	}

a:hover {
	text-decoration: none;
}

#moneyPlanner {
	margin-top: 20px;
}

.lhsgraph {
	background: #323030;
	padding: 20px;
}

.rhsgraph {
	background: #C8995A;
	padding: 20px;
}

.form-row .col {
  display: flex;
  align-items: center;
  padding: 10px;
}

.form-row .input-group {
	margin-bottom: 0!important;
}

.area-label {
	text-transform: uppercase;
	font-size: 19px;
	line-height: 1.25em;
	display: inline-block;
	vertical-align: middle;
}

.card {
	border-radius: 0!important;
	border: solid 4px #c8995a!important;
	margin-bottom: 5px;
}

.card-header {
    background-color: #c8995a!important;
    border-bottom: none!important;
    border-radius: 0 !important;
}

	.card-header h2 {
		line-height: 20px;
	}
	
	
	.card-header h2 button {
		color: #000!important;
		text-transform: uppercase!important;
		width: 100%;
		text-align: left;
		font-size: 20px;	
		font-weight: bold;	
		line-height: 1em;
	}
	
	.card-header h2 button:hover {
		text-decoration: none!important;
	}
	
.card-body p {
	padding: 5px;
}

.total-box {
	background: #c8995a;
	margin-top: 20px;
	padding: 20px;
	margin-bottom: 20px;
}

.total-box h3 {
	font-size: 20px;
	font-weight: bold;
	color: #000 !important;
}

.total-box p {
	font-size: 21px;
	font-weight: bold;
	color: #000 !important;	
}

.total-box table {
	background: #fff;
	width: 100%;
	margin-bottom: 20px;
	margin-top: 20px;
}

	.total-box table th {
		line-height: 40px!important;
	}

	.total-box table th, .total-box table td {
		border: solid 2px #ced4da!important;
		border-collapse: collapse;
		padding: 10px;
		text-transform: uppercase;
		font-weight: bold;
	}
	
.graph {
	margin-top: 10px;
	background: #222;
	padding: 60px;
	padding-bottom: 80px;
}	

.graph #canvas-holder {
	max-width: 800px;
	margin: 0 auto;
}

#chart-area2 {
	background: #323030;
}

#chart-area3 {
	background: #C8995A;
}

.nav-bar {
	margin-bottom: 20px;
}

.next-step, .nav-bar {
	background: #c8995a;
	padding: 25px;
}

	.next-step .container a {
		line-height: 1.15em;
		color: #fff;
		font-weight: bold;
		font-size: 27px;
	}
	
	.next-step .container a img {
		float: right;
		max-width: 150px;
		margin-top: 12px;
	}
	
.next-step.white {
	background: #d9d9d9;
}	

	.next-step.white .container a {
		color: #c8995a;
	}
	
	.next-step.white img {
		margin-top: 0!important;
	}
	
@media(min-width: 1000px) {

.graphs {
	margin-top: 40px;
	padding: 40px 0;
	background: #323030; /* Old browsers */
	background: -moz-linear-gradient(left,  #323030 0%, #323030 50%, #c8995a 50%, #c8995a 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  #323030 0%,#323030 50%,#c8995a 50%,#c8995a 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  #323030 0%,#323030 50%,#c8995a 50%,#c8995a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#323030', endColorstr='#c8995a',GradientType=1 ); /* IE6-9 */
}	

}

	.graphs h3, .graphs p {
		color: #fff;
	}
	
.pyramid {
	width: 100%;
}

.pyr1, .pyr2, .pyr3 {
	min-height: 112px;
	margin-top: 20px;
}

.pyr1 strong, .pyr2 strong, .pyr3 strong {
	display: inline-block;
	padding: 2px 7px;
	background: #000;
	color: #fff;
}

	.pyr2 strong {
		background: #C7B299;
		color: #000;
	}

	.pyr3 strong {
		background: #00A99D;
		color: #fff;		
	}

h3 {
	text-transform: uppercase;
	font-weight: bold;
	font-size: 24px;
}

.curstep {
	font-weight: bold;
	font-size: 22px;
	line-height: 1.1em;
}

	.curnum {
		margin-right: 15px;
		max-width: 50px;
	}

.video-wrap {
	background: #555151; /* Old browsers */
	background: -moz-linear-gradient(left,  #555151 0%, #403d3d 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  #555151 0%,#403d3d 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  #555151 0%,#403d3d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#555151', endColorstr='#403d3d',GradientType=1 ); /* IE6-9 */
	min-height: 200px;
}

.info-wrap {
	padding: 40px 0;
	background: #c8995a;
}

.resource-wrap {
	padding: 40px 0;
	background: #d9d9d9;	
}
	.resource-wrap a {
		color: #212529;
		font-weight: bold;
	}

@media(min-width: 1000px) {
	
	.pyr1 {
		margin-left: -150px;
	}

	.pyr2 {
		margin-left: -75px;
	}
	
}

@media(max-width: 1000px) {
	
	.container {
	    padding-right: 5px!important;
	    padding-left: 5px!important;
    }
    
    .graph {
	    padding: 10px!important;
    }
    
    p {
	    font-size: 14px;
    }
    
    .total-box p {
	    font-size: 16px !important;
	    font-weight: normal;
    }
    
    .next-step .container a {
	    font-size: 21px!important;
    }
    
    .card-body {
	    padding: 5px!important;
    }
    
    .area-label {
	    font-size: 16px!important;
    }
	
	.total-table, .total-box .form-control {
		font-size: 12px;
	}
	
	.total-table td, .total-table th {
		padding: 5px!important;
		line-height: 1em!important;
	}
	
	.total-box table th {
		line-height: 20px!important;
	}
	
	.card-header h2 button {
		font-size: 16px!important;
	}
	
	.curnum {
	    margin-right: 5px!important;
	    max-width: 30px!important;
	}
	
	.step1nav, .step2nav, .step3nav {
		line-height: 1em!important;
	}

	.curstep {
	    font-weight: bold!important;
	    font-size: 15px!important;
		line-height: 15px!important;
	}
	
}