/* ******* Light Blue Teo Cols MOBLILE STYLES START******** */

.spec-intro {
  	font-size: .7em;
   	margin-bottom: .5em !important;
}


h3.equity-apr {
  	font-size: 36px; 
  	line-height: 43px;
  	font-weight: bold;
  	margin-bottom: 0;
  	color: #073850;
}

.equity-col-wrap {
    	flex-direction: column;
    	justify-content: center;
    	display: flex;
    	gap: 1.5rem;
 }

 .equity-option h2 {
    	color: #073850;
    	font-size: 1.5em;
  }

.equity-col-wrap > * {
    	flex-basis: 100%;
}

.equity-option {
    	background: #ecf3f9;
    	padding: 2rem;
    	text-align: center;
    	flex-direction: column;
    	display: flex;
    	justify-content: space-between;
}


/* ******* Light Blue Teo Cols  DESKTOP STYLES START******** */

@media (min-width: 550px) {

  	h3.equity-apr {
    		font-size: 30px; 
    		line-height: 33px;
    		font-weight: bold;
   		margin-bottom: 0;
   		color: #073850;
	}

  	.equity-col-wrap {
    		flex-direction: row;
    		justify-content: center;
    		display: flex;
    		gap: 1.5rem;
    		align-items: stretch;
 	}
  

  	.equity-col-wrap {
    		flex-direction: row;
    		justify-content: center;
    		display: flex;
    		gap: 1.5rem;
    		align-items: stretch;
 	}
  
	.equity-col-wrap > * {
   		flex-basis: 100%;
	}
  
  	.equity-option {
    		background: #ecf3f9;
    		padding: 2rem;
    		text-align: center;
    		flex-direction: column;
    		display: flex;
    		justify-content: space-between;
   
  	}	
  
  	.equity-option h2 {
    		color: #073850;
    		font-size: 1.5em;
  	}
  
}

/* *******DESKTOP STYLES END******** */




/* Styles for horizontal HELOC callout box with rates side by side */

.heloc-btn {
	background-color: #073850;
	padding:5px 20px 20px 20px;
	color: #ffffff;
	width: 100%;
}

.heloc-btn a.button-link.primary:hover {
    	color: #317aba !important;
    	background: #fff !important;
}

.heloc-intro {
	background-color: #073850;
	padding: 20px 20px 5px 20px;
	color: #ffffff;
	width: 100%;
}

.heloc-intro p {
	
	margin-bottom: 0em !important;
}

.heloc-co-section {
	display: flex;
	flex-direction: row;
	background-color: #073850;
    	padding: 0px;
    	width: 100%;
    	padding-bottom: 0px;
}


.heloc-co-left {
  	background-color: #073850;
  	flex: 50%;
	border-right: 2px solid #fff;
  	padding: 20px;
	vertical-align: middle;
}

.heloc-co-right {
  	background-color: #073850;
  	 flex: 50%;
    	padding: 20px;
 	vertical-align: middle;
}



/* Responsive layout - makes a one column-layout instead of two-column layout */

@media (max-width: 765px) {

	.heloc-intro  {
		background-color: #073850;
		padding: 5px 20px 5px 20px;
		color: #ffffff;
		width: 100%;
		text-align: center;
		padding-top: 20px;
	}
  
	.heloc-btn {
		background-color: #073850;
		padding: 5px 20px 20px 20px;
		color: #ffffff;
		width: 100%;
		text-align: center;
	}

	.heloc-co-section {
	 	display: flex;
	 	flex-direction: column;
	  	width:100%;
	  	padding: 0px;
	}
  
	.heloc-co-left {
		background-color: #073850;
		text-align: center;
    		width: 100%;
		border-bottom: 2px solid #fff;
		border-right: 0px;
	}

	.heloc-co-right {
  		background-color: #073850;
   	 	width: 100%;
		text-align: center
	}
	
}


/* Styles for horizontal HELOAN callout box with text on left and rate on the right */

.heloan-btn {
	background-color: #073850;
	padding:5px 20px 20px 20px;
	color: #ffffff;
	width: 100%;
}

.heloan-btn a.button-link.primary:hover {
   	color: #317aba !important;
    	background: #fff !important;
}

.heloan-intro {
	background-color: #073850;
	padding: 20px 20px 5px 20px;
	color: #ffffff;
	width: 100%;
}

.heloan-intro p {
	margin-bottom: 0em !important;
}

.heloan-co-section {
	display: flex;
	flex-direction: row;
	background-color: #073850;
    	padding: 0px;
    	width: 100%;
    	padding-bottom: 0px;
}

.heloan-co-left {
  	background-color: #073850;
  	flex: 50%;
  	padding: 20px 20px 0px 20px;
	vertical-align: middle;
}

.heloan-co-right {
  	background-color: #073850;
  	flex: 50%;
    	padding: 20px;
 	vertical-align: middle;
}



/* Responsive layout - makes a one column-layout instead of two-column layout */

@media (max-width: 765px) {

	.heloan-intro  {
		background-color: #073850;
		padding: 5px 20px 5px 20px;
		color: #ffffff;
		width: 100%;
		text-align: center;
		padding-top: 20px;
	}
	
	.heloan-btn {
		background-color: #073850;
		padding: 5px 20px 20px 20px;
		color: #ffffff;
		width: 100%;
		text-align: center;
	}

	.heloan-co-section {
	 	display: flex;
	 	flex-direction: column;
	  	width:100%;
	  	padding: 0px;
	}
  
	.heloan-co-left {
		background-color: #073850;
		text-align: center;
    		width: 100%;
		border-bottom: 2px solid #fff;
		border-right: 0px;
	}

	.heloan-co-right {
  		background-color: #073850;
   	 	width: 100%;
		text-align: center
	}
	
}