@font-face {
  font-family: WoodFordBourne;
  src: url(fonts/woodfordbourne-regular.otf);
}

@font-face {
  font-family: KlinicSlabBook;
  src: url(fonts/KlinicSlabBook.otf);
}


#printout #salary, .percent, .footer {
	font-family: KlinicSlabBook !important;
}

#intro, #moveFrom, .blockTitle h1 {
	font-family: WoodFordBourne !important;
}

#coli-calculator table {
	background: #fff !important;
}
#coli-form-fields div label {
	margin-top: 0 !important;
	padding-top: 0 !important;
}
#coli-results h3 {
    margin-top: 50px;
    margin-bottom: 25px;
}
#cost-comp .coli-table, #expenditures .coli-table, #index-comparison .coli-table, #price-data .coli-table{
    margin-right: auto;
    margin-left: auto;
    width: 100% !important;
}
#expenditures .coli-table > div:first-child div, #index-comparison .coli-table > div:first-child div, #price-data .coli-table > div:first-child div {
    font-weight: bold;
    background-color:#21a178;
    color: #fff;
}
#coli-form {
    text-align: center;
    box-shadow: 0px 1px 4px -1px rgba(0,0,0,0.3);
    border-radius: .2em;
    width:80%;
    margin: 0 auto;
    padding: 1.5em;
    margin-bottom: 100px !important;
}
#coli-form h2 {
    margin-top: 0;
}
#coli-form input, #coli-form select {
    padding: .25em .5em;
}
#coli-form select {
    width: 100%;
}
#coli-form-fields {
    display:inline-table;
}
#coli-form-fields > div {
    display: table-row;
}
#coli-form-fields > div > * {
    padding: 0 .5em .75em;
    display: table-cell;
    /*vertical-align: middle;*/
}
#coli-form-fields > div > *:first-child {
    text-align: right;
}
#coli-form-fields > div > *:last-child {
    text-align: left;
}

#coli-form .btn {
    font-size: inherit;
}
#coli-form p {
    margin-bottom: 0;
}

#coli-results {
    width: 80%;
    margin: 0 auto;
}
#coli-results .far {
    font-size:18px;
    color: #0371B2;
    display: block;
    margin: 1em auto;
    text-align: center;
}
#coli-results h2 {
    text-align: center;
}
.coli-table {
    display: inline-table;
    min-width: 80%;
}
.coli-table > div {
    display: table-row;
}
.coli-table > div:nth-child(odd) {
    background-color: #e9eae6;
}
.coli-table > div > div {
    display: table-cell;
    padding: .5em;
}
.coli-table > div > div + div {
    text-align: right;
}
#cost-comp .coli-table > div > div:nth-child(3) {
    text-align: left;
}

@media screen and (min-width: 641px) {
	#coli-calculator, #coli-calculator p, #coli-calculator div {
		font-size: 18px !important;
	}
	#coli-calculator input, #coli-calculator select {
		font-size: 14px !important;
	}
}

@media screen and (max-width: 640px) {
#coli-results {
    width: 90%;
    margin: 0 auto;
}
}

/* Printable PDF */
/*    position: relative;
    height: 1000px;
}

#html-2-pdfwrapper{
  position: absolute; 
  left: 20px; 
  top: 50px;  
  overflow: auto; 
  width: 612px;
}*/

#printout {
	position: relative;
    width: 794px;
    height: 1123px;
    margin-left: auto;
    margin-right: auto;
    background-image: url("https://www.newrivervalleyva.org/wp-content/themes/COLI/images/NewRiverBackgroundImage.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    padding: 25px;
    font-family: arial, san-serif;
}

#page2 {
    position: relative;
    width: 794px;
    height: 1143px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}

#page2 img {
    max-width: 100%;
    height: auto;
}

#printout .footer {
	position: absolute;
	bottom: 25px;
}

#printout #title {
    margin-bottom: 25px;
}

#printout #intro, #printout #salary, #printout #moveFrom {
    text-align: center;
    padding: 0 0 25px 0;
    margin: 0;
}

#printout #intro { font-size: 21px; }

#printout #salary { font-size: 128px; margin: 35px 0; }

#printout #moveFrom { font-size: 32px; }

#printout img {
    max-width: 100%;
    height: auto;
}

.icon {
    width: 150px;
}

#printout h1 {
    text-align: left;
    padding-left: 25px;
    width: 100%;
    font-size: 35px;
    margin: 0;
    padding: 0 0 0 15px;
}

.row {
    display: flex;
}

.row.blockTitle {
    /*margin-bottom: 10px;*/
}

#printout > .row {
    margin: 30px 0;
}

#printout > .row > .col {
    width: 50%;
    padding-left: 15px;
    text-align: center;
}

.flex-container > div {
      margin: 10px;
      padding: 20px;
      font-size: 30px;
      vertical-align: middle;
  }

/*.row > .col {
    display: inline-flex !important;
}*/

.percent {
    font-size: 66px;
    /*width: 250px;*/
    padding: 0 0 0 15px;
    text-align: right;
    width: 144px;
}

.blockTitle {
    width: 100%;
    clear: both;
}
#groceryArrow img, #housingArrow img, #utilitiesArrow img, #transArrow img, #healthcareArrow img, #miscArrow img {
    max-width: 50px;
    height: auto;
}

.arrowCol {
    width: 125px;
    height: auto;
}