@charset "utf-8";
/* CSS Document */

.fsma-wrapper {
	width: 100%;
	margin: 0 auto; 
	padding: 2rem 0 2rem;
}
.fsma-wrapper .row {
	padding-left: 15px;
	padding-right: 15px;
	text-align: center;
}

.fsma-wrapper > .row > div.fsma {
	height: 324px;
}

.fsma-wrapper > .row > div.fsma > div:last-child {
	margin-top: 9%;
}

.fsma-wrapper > .row > div.vqip-tpp {
	margin-bottom: 1.5em;
	padding-left: 0;
	padding-right: 0;
}

.fsma-wrapper > .row > div.vqip-tpp:before {
	border-left: 1px dotted #ccc;
	height: 93%;
	position: absolute;
	top: 1.675em;
	content: '';
	left: 0;
}
.fsma-wrapper > .row > div > div:last-child > div {
	display: inline-block;
	padding-top: 1.5em;
}

.fsma-wrapper > .row > div.vqip-tpp div.tpp:before {
	content: ""; /* This is necessary for the pseudo element to work. */ 
    display: block; /* This will put the pseudo element on its own line. */
    margin: 0 auto; /* This will center the border. */
    width: 95%; /* Change this to whatever width you want. */
    padding-top: 1.5em;  /*This creates some space between the element and the border. */
    border-top: 1px dotted #ccc; /* This creates the border. Replace black with whatever color you want. */
}

.fsma-wrapper img.fsma { 
	float: right;
    width: 120%;
    height: auto;
    position: absolute;
    margin-top: 9%;
}

.fsma-wrapper img.icon {  
	width: 100%;
	height: auto;
	max-width: 90px;
	min-width: 40px;
}

@media (max-width: 767px) { 
	.no-gutter-right {
		padding-left: 0;
	    padding-right: 0;
	}
	.fsma-wrapper > .row > div.fsma div:last-child {
		margin-top: 0;
		border: 0 none;
	}	
	.fsma-wrapper > .row > div.fsma {
		border-right: 0 none;
		border-bottom: 1px dotted #e3e3e3;
		height: auto;
	}
	.fsma-wrapper > .row > div.vqip-tpp:before {
		border: 0 none;
	}
	.fsma-wrapper > .row > div.vqip-tpp div.tpp:before {
   		width: 100%;
   		border-color: #dbdbdb;
	}	
	.fsma-wrapper img.fsma {
	    display: none;
	}
	.fsma-wrapper img.tpp {
		margin-top: 2em;
	}			 	 
}

.data-search-btn {
	width: 190px;
	margin-bottom: 2em;
}

.fsma-wrapper p {
	font-size: 1.125em;
	line-height: 1.75em;
}
.fsma-wrapper > .row > div.vqip-tpp a {
	font-family: 'Muli Bold',Helvetica, Arial, sans-serif !important;
	font-size: 1.2em;
}
.bg-gray-wrapper {
	background: linear-gradient(to bottom, #e4e4e4 0%, #ffffff 45%);
}
.resource-wrapper {
    display: block;
	padding: 0;	
}

.resource-wrapper h4 {
	color: #fff;
	margin-top: 0;
	padding-top: 0.65rem;
	padding-bottom: 0.65rem;	
}

.resource-wrapper ul li a {
    color: #3457a6;
	font-family: 'Muli Bold',Helvetica, Arial, sans-serif !important;
}

.resource-wrapper > div {
	display: inline-block;
	max-width: 100%;
	vertical-align: top;
	border: 0 none;
	border-top: none;  
	margin-bottom: 1.5rem; 
}

.listnone {
	list-style-type: none;	
	margin-left: 0;
	margin-top: 2rem;
}
.listnone li {
	font-size: 1.125em;
	margin-left: 0;	
  	word-break: keep-all !important;
}

@media (max-width: 47em) {

	.resource-wrapper > div h4 {
		padding-left: 3000px;
		margin-left: -3000px;	
		padding-right: 3000px;
		margin-right: -3000px;		
	}		

}

@media (max-width: 62em) {

	.bg-gray-wrapper {
		padding-left: 3000px;
		margin-left: -3000px;	
		padding-right: 3000px;
		margin-right: -3000px;		
	}

	.resource-wrapper > div h4 {
	    display: block;
		background: #048070 url("../img/bg-hp-green.png") repeat-x 65% 100%;		
	}	

}

@media (min-width: 47em) and (max-width: 62em) {

	.resource-wrapper > div {
	    margin-top: 0 !important;		
	}
	.resource-wrapper > div:nth-child(1) h4, .bg-gray-wrapper {
		padding-left: 3000px;
		margin-left: -3000px;	
		padding-right: 3000px;
		margin-right: -3000px;		
	}			

}

/**** Desktop View ****/

@media (min-width: 767px) {
	.fsma-wrapper {
		padding: 2rem 0 1rem;
	}
	.fsma-wrapper p + p {
	    margin: .5em 0;
	}	
	.fsma-wrapper .row {
		text-align: left;
	}
	.bg-green-wrapper {
		background: #048070 url("../img/bg-hp-green.png") repeat-x 65% 100%;
		height: 2.5rem;
	}	
	.resource-wrapper {
		display: flex;
		justify-content: center;
	}
	.resource-wrapper > div {
		max-width: 530px;
		padding: 0 4.5rem 0;
		margin-top: -2.5rem;
	}
	.resource-wrapper > div + div {
		border-left: 1px dotted #fff;
		border-top: none;
    }	
}


.left-search-container { margin-top: 0em !important; }

@media (min-width: 749px) {
    .left-search-container { margin-top: 5em !important; }
}