.tl-graduation-wrapper {
	display: block;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 25px;
}

.tl-graduation-results-right {
    max-width: 585px;
    margin-left: 25px;
}
.grad-wrap {
	position: relative;
	padding-top: 30px;
    max-width: 1200px;
    width: 100%;
    height: 100%;
    margin: 0 auto;
}
.tl-graduation-offset-img {
	height: 100% !important;
}

#tl-graduation-grid-top-container {
	display: grid;
    grid-template-columns: auto auto;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    margin-left: 0px !important;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

#tl-graduation-grid-bottom-container {
	display: grid;
    grid-template-columns: auto auto auto auto;
    grid-column-gap: 16px;
    grid-row-gap: 20px;
    margin-left: 0px !important;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.tl-graduation-school-dropdown {
    width: 585px;
    height: 60px;
    font-size: 1.4rem;
    padding-left: 22px;
    background-position: 97% 50%;
    background-repeat: no-repeat;
    background-image: url(https://www.townlively.com/wp-content/uploads/2020/05/tl-down-gray-arrow.png);
    background-size: 10px 9px;
    padding: .5em;
    padding-right: 1.5em;
    color: #bbb;
}
.tl-graduation-search {
	display: inline-flex;
	width: 100%;
}
.tl-graduation-search-wrapper {
	border-right: none !important;
    width: 100%;
    background-color: #e6e7e8;
    padding-top: 12px;
    padding-bottom: 12px;
}
.tl-graduation-search-form {
	max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
.tl-graduation-search-submit {
    margin-top: 2px !important;
    padding: 17px 117px 17px 117px;
    background-color: #32578c;
    color: white;
    margin-left: 25px;
}
.tl-graduation-search-submit:hover {
	background-color: #7dcb78;
}
.tl-graduation-results-left {
    max-width: 585px;
}
#tl-graduation-grid-left-container {
	display: grid;
    grid-template-columns: auto;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    margin-left: 0px !important;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}
.tl-graduation-offset-wrapper {
	margin-bottom: 25px;
	max-height: 333px;
	height: 100%;
	background-color: #5c9ec4;
}
#tl-graduation-grid-right-container-extended {
	display: grid;
	grid-template-columns: auto;
	grid-column-gap: 20px;
	grid-row-gap: 20px;
	margin-left: 0px !important;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}

#tl-graduation-grid-right-container {
	display: grid;
    grid-template-columns: auto auto;
    grid-column-gap: 9px;
    grid-row-gap: 22px;
    margin-left: 0px !important;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}
.tl-graduation-offset-wrapper img {

}
.tl-graduation-grid-item {
	border: 1px solid rgba(183, 183, 183, 0.8);
    padding: 20px;
    font-size: 30px;
    text-align: center;
    border-radius: 3px;
    width: 585px;
    height: 514px;
}
.tl-graduation-grid-item-4 {
    width: 288px;
    height: 690px;
}
.tl-school-card-wrapper {
	list-style: none;
}

@media (max-width: 1219px) {

	#tl-graduation-grid-top-container {
		 width: 585px;
	    margin-left: auto !important;
	    margin-right: auto !important;
	    grid-template-columns: auto;

	}
	#tl-graduation-grid-bottom-container {
		width: 90%;
		 grid-template-columns: auto auto auto;
		margin-left: auto !important;
		margin-right: auto !important;
	}
	.tl-graduation-search-school {
		margin-left: 5%;
	}
   

}
@media (max-width: 982px){
		#tl-graduation-grid-bottom-container {
		width: 71%;
		 grid-template-columns: auto auto;
		margin-left: auto !important;
		margin-right: auto !important;
	}
}
@media (max-width: 974px) {
	.tl-graduation-search {
		display: block;
	    width: 50%;
	    margin-left: auto;
	    margin-right: auto;
	}
	.tl-graduation-school-dropdown {
    	width: 100%;
    	margin-bottom: 10px;
	}
	.tl-graduation-search-submit {
		text-align: center;
	}

			.tl-graduation-search-school {
		margin-left: 0px;
	}

	.tl-graduation-search-submit {
	    margin-top: 0px;
	    padding-left: 0px;
	    padding-right: 0px;
	    padding-bottom: 10px;
	    padding-top: 10px;
	    background-color: #32578c;
	    color: white;
	    margin-left: 0px;
	    padding-bottom: 10px;
	}
}

@media (max-width: 840px) {
		#tl-graduation-grid-bottom-container {
		width: 80%;
		 grid-template-columns: auto auto;
		margin-left: auto !important;
		margin-right: auto !important;
	}

			.tl-graduation-search-school {
		margin-left: 0px;
	}

	.tl-graduation-search-submit {
	    margin-top: 0px;
	    padding-left: 0px;
	    padding-right: 0px;
	    padding-bottom: 10px;
	    padding-top: 10px;
	    background-color: #32578c;
	    color: white;
	    margin-left: 0px;
	    padding-bottom: 10px;
	}
}

@media (max-width: 670px) {
		
		#tl-graduation-grid-bottom-container {
		width: 305px;
		grid-template-columns: auto auto;
		margin-left: auto !important;
		margin-right: auto !important;
	}

		.tl-graduation-search-school {
		margin-left: 0px;
	}

	.tl-graduation-search-submit {
	    margin-top: 0px;
	    padding-left: 0px;
	    padding-right: 0px;
	    padding-bottom: 10px;
	    padding-top: 10px;
	    background-color: #32578c;
	    color: white;
	    margin-left: 0px;
	    padding-bottom: 10px;
	}

}
@media (min-width: 670px) and (max-width: 751px){
	#tl-graduation-grid-bottom-container {
    	width: 90%;
	}
}

@media (min-width: 641px) and (max-width: 670px) {
	#tl-graduation-grid-bottom-container {
    	width: 588px;
	}
}
@media (max-width: 640px) {
	#tl-graduation-grid-top-container {
		width: 292px;
	}
		.tl-graduation-grid-item {
		width: 292px;
    	height: 257px;
	}
	.tl-graduation-grid-item-4 {
		width: 144px;
    	height: 345px;
	}
	.tl-graduation-search-school {
		margin-left: 0px;
	}

	.tl-graduation-search-submit {
	    margin-top: 0px;
	    padding-left: 0px;
	    padding-right: 0px;
	    padding-bottom: 10px;
	    padding-top: 10px;
	    background-color: #32578c;
	    color: white;
	    margin-left: 0px;
	    padding-bottom: 10px;
	}
}
@media (max-width: 400px) {
	.tl-graduation-search-submit {
    	margin-top: 2px !important;
    	padding: 17px 30px 17px 30px;
    	background-color: #32578c;
    	color: white;
    	width: 100%;
    	margin-left: 0px;
	}
	.tl-graduation-search-school {
   		margin-left: 0px;
	}
	#tl-graduation-grid-bottom-container {
		display: grid;
	    grid-template-columns: auto auto;
	    width: 320px;
	    grid-column-gap: 1px;
	    margin-left: auto;
	    margin-right: auto;
	    padding-left: 2%;
	}


}