/**************************************************/
/*                    WebFonts                    */
/**************************************************/

@font-face{
	font-family: 'Roboto Condensed';
    src: url('fonts/robotocondensed-regular.eot');
    src: url('fonts/robotocondensed-regular.eot?#iefix') format('embedded-opentype'),
         url('fonts/robotocondensed-regular.woff') format('woff'),
         url('fonts/robotocondensed-regular.ttf') format('truetype'),
         url('fonts/robotocondensed-regular.svg#Roboto Condensed') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face{
	font-family: 'Roboto Condensed';
    src: url('fonts/robotocondensed-bold.eot');
    src: url('fonts/robotocondensed-bold.eot?#iefix') format('embedded-opentype'),
         url('fonts/robotocondensed-bold.woff') format('woff'),
         url('fonts/robotocondensed-bold.ttf') format('truetype'),
         url('fonts/robotocondensed-bold.svg#Roboto Condensed') format('svg');
    font-weight: bold;
    font-style: normal;
}



/**************************************************/
/*                     Font                       */
/**************************************************/
/*Fonts should only be defined as pixels on the html element. Other elements should use REM units.*/
html {
	font-size:15px;
}
body {
	font-family: 'Roboto Condensed', Arial, Helvetica, sans-serif;
	font-size:1rem;
}
/*Link colors. To target data section only add main in front of the selector*/
a, .button.button-link {
	color:#d25e13;
}
a:hover, a:active,.button.button-link:hover, .button.button-link:focus:enabled {
	color:#74340b;
}
p {
    color:#333333;
}
/*Negative Account Balance*/
.text--negative {
	color:#ff0000;
}

/*Buttons*/
.button,.button.secondary{
	background-color:#00853E;
	color:#fff;
	border:2px solid #00853E;
}
.button:hover,.button:focus, .button.secondary:hover, .button.secondary:focus{
	background-color:#fff;
	color:#00853E;
	border:2px solid #00853E;
}
.accordion{
	padding-left:0 !important;
}
.accordion-title {
	background-color:#F47321;
	color:#fff;
}
 .accordion-title:hover {
	background-color:#555;
	color:#fff;
}
/*OPTIONAL FONTS*/
input, select {

}
h1, h2, h3, .h1, .h2, .h3 {

}
h4, h5, h6, .h4, .h5, .h6 {

}
h1, .h1 {
	font-size:1.71rem;
}
h2, .h2 {
	font-size:1.43rem;
}
h3, .h3 {
	font-size:1.28rem;
}
h4, .h4 {
	font-size:1.14rem;
}
h5, .h5 {
	font-size:1rem;
}
h6, .h6 {
	font-size:.86rem;
}

/*Various alerts messages */
.alert--error {
	background:#fbeae9;
	border-color:#f7d6d3;
	color:#ad3123;
}
.alert--info {
	background:#d9edf7;
	border-color:#bce8f1;
	color:#2e6a87;
}
.alert--success {
	background:#dff0d8;
	border-color:#d6e9c6;
	color:#3a703c;
}
.alert--warning {
	background:#fffdd5;
	border-color:#ffe89e;
	color:#8c6b33;
}
.text--error {
	color:#ad3123;
}
.text--info {
	color:#2e6a87;
}
.text--muted {
	color:#999;
}
.text--success {
	color:#3a703c;
}
.text--warning {
	color:#8c6b33;
}
/**************************************************/
/*                     Layout                     */
/**************************************************/
body {
	background: #F0F0F0;
}

/*Initiate flex layout*/
div.ebc-main > div.columns {
	display: flex;
	flex-direction:column;
}
header, footer {
	flex:none;
}
main {
	flex:1 0 auto;
	padding:var(--space) var(--space) 0;
	background:rgba(255,255,255,0.7);
}	
main::after{
	content: '\00a0';
	display:block;
	margin-top:var(--space);
	height:0px;
	visibility:hidden;
}

.wrapper {
	/*Fix for iPhones width */
	min-width:initial;
	/* Never make webpage less than 1100px wide */
}
/*Contains the Utility Navigation, Banner, and Primary Navigation*/
[role="banner"] {
	margin:0px;
}
body > div.row{
	max-width: 1250px;
}
main{
	border:1px solid #dbdbdb;
	border-bottom-color: #fff;
	background: #fff;
	padding:15px;
	margin-bottom: -2px;
}
main#main{

} 
main#main h2 {
	padding-top:10px;
}
header{
	
}
header > div.row:nth-child(2){
	background-color:#F0F0F0;
}
header div.row{

}
header > div.row.collapse:nth-of-type(2) div.medium-12:first-of-type{
	float:none !important;
}
div.row.collapse.grid.expanded.no-print-information {
	
}
[role="banner"] {

}
[role="banner"] > div.row:first-child, [role="banner"] > div.row:first-child > div.medium-12 {
	
}
.bank-branding {
	background: url(logo.png) no-repeat top left;
    background-size: 300px auto;
    background-position: left center;
    height: 200px;
}
.medium-12 {
}

table tr th {
	background-color:#CCCCCC !important;
	color:#ffffff !important;
}
/*Transaction Table odd even row colors*/
table tbody tr:nth-child(odd){
	background:#f1f1f1;
}
table tbody tr:nth-child(even){
	background:#fff;
}

div [ng-controller*="AccountBalanceController"] {

}
.row {

}
/* Transactions Button Fix*/
table tbody tr.batch1button {
    background:none !important;
}
table tbody tr.batch1button td {
    padding-left:12%;
    background:none !important;
}
/*Reorder Home Page Right Column*/
#home-right {
	order:1;
	display:flex;
	flex-direction:column;
}
#home-pay-or-transfer {
	order:;
}
#home-quick-launch {
	order:;
}
#home-ad {
	order:;
}
#home-beavercreek {
	order:;
}
/*Fixes Home page ad resizing issue*/
#home-ad-viewer > ul, #home-ad-viewer > ul > li {
	height:auto !important;
	max-height:none !important;
}
/**************************************************/
/*            Table Drop Shadows                  */
/**************************************************/
.slat {
	border-color:#000000;
	background-color:#FFFFFF;
}
/* Home Page Hover on Accounts BG */
.slat.slat--clickable:hover {
	background:#EEEEEE;
}
.table--underlined>thead>tr>th, .table--underlined>tbody>tr>th, .table--underlined>tbody>tr>td {

}
.table--underlined>thead tr:last-child th {

}
.table--underlined>tbody tr:last-child td, .table--underlined .no-border {
	border-bottom-width:0;
}
.table--underlined>tfoot td {
}

table.table--transfers tbody td {
}
/* Transactions Button Fix*/
table tbody tr.batch1button td {
	padding-left:12%;
	background:#fff !important;
}
table tbody tr.batch1button td .button{
	width:60%;
}
.arrow {

}
.arrow--top-right:after {
	
}
.form__group--inline + p.push--large--one-quarter {
	display:none;
}

div.singleAccount .grid, .checkfree-widget-container, #home-beavercreek,#home-ad, #table--transactions, #searchTransactionsForm, div [data-ui-component*="account-details"], div [data-bind*="modal-wrapper"], #scheduled-transfers, #stopPaymentAdd, #stopPaymentList, #iframe, div [data-bind*="ChangePassword"], div [data-bind*="ChallengeQuestions"], div [data-bind*="with: Email"], div [data-bind*="with: Phone"],div [data-bind*="with: Phone"] + div.slat, div [data-bind*="with: Mobiliti"],div [data-bind*="with: Email"] + div.slat, div.slat, div [ng-controller*="FocusController"], div [ng-controller*="WireListController"], div [ng-controller*="TransferListController"], ul.accordion, table.table--stop-payments, div.callout.ng-scope, div#transactions-left, div#transactions-right{
	
}
form[name*="loginForm"] div.slat, div[ng-if*="!transferIssue"], div[ng-if*="!stopPayIssue"], form[name*="smallBusinessBillPayEnrollmentForm"] div.slat--last, div [ng-controller*="ProfileController"], div [ng-controller*="ReviewWireListController"] {

}
div [data-bind*="ChangePassword"], div [data-bind*="ChallengeQuestions"], div [data-bind*="with: Email"], div [data-bind*="with: Phone"],div [data-bind*="with: Phone"] + div.slat, div [data-bind*="with: Mobiliti"],div [data-bind*="with: Email"] + div.slat {
	margin-bottom:10px;
}

.mfp-content main {

}
.mfp-content div [data-bind*="modal-wrapper"] {

}
.callout, table.table--transfers tbody, table.table--stop-payments tbody, div.callout.ng-scope div.medium-12, .table--transactions-full tbody{
	background-color:transparent;
}
div [ng-controller*="FocusController"] table tbody tr td {

}
div [ng-controller*="FocusController"], div [ng-controller*="WireListController"], div [ng-controller*="TransferListController"] {
	padding:5px;
}


/*Transactions Padding */
div#accounts-transactions, div#accounts-transactions-search {
	
}


/**************************************************/
/*            Account Switcher                    */
/**************************************************/
#account-switcher-show {
	
}
#table--transactions tbody tr:nth-child(even), .table--trans-recent tbody tr:nth-child(even), #scheduled-transfers .table--underlined tbody tr:nth-child(even), #stopPaymentList .table--underlined tbody tr:nth-child(even), .table--underlined tbody tr:nth-child(even) {
	
}

button#account-switcher-show {

}
#account-switcher-show, #accountSwitcherHide, #account-switcher {

}
ul#account-switcher {
	background-color:#FFFFFF;
	border: 1px solid #000000;
}
ul#account-switcher li {

}
ul#account-switcher li a {

}
ul#account-switcher li:hover {

}
ul#account-switcher li a:hover {

}

/**************************************************/
/*            Utility Navigation                  */
/**************************************************/
/*Position of Utility Section*/
header div.collapse:nth-child(1) {
	position: absolute;
	top: 25px;
    right: 0px;
    height:150px;
    background: #fff;
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(100% - 360px);
    max-width: 720px;
    z-index: 5;
}
header div.collapse:nth-child(1) > div.medium-12{
	width:auto;
}
header div.collapse:nth-child(1) > div.medium-12 > .float-right{
	display: flex;
}

/*Welcome Message*/
.message--welcome {

}
.message--welcome p {

}

/*Utility Navigation Buttons*/
.nav--utility ul{
	display: flex;
	flex-wrap: wrap;
}
.nav--utility li { 

}

.nav--utility a{
	color:#f47321;
}
.nav--utility a:hover {
	color:#069;
}

/**************************************************/
/*            Primary Navigation                  */
/**************************************************/
header div.row.collapse:nth-of-type(3){
	max-width: 1250px;
	background: #404040;
    color: rgba(255, 255, 255, 0.5);
    background-image: -webkit-linear-gradient(top, #6d6d6d, #222222);
    background-image: linear-gradient(to bottom, #6d6d6d, #222222);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0);
}
#badge-administration{
	margin-left: 5px;
}
.nav--primary {
	padding:0 35px;
	display: flex;
}
.nav--primary li{
	width:100%;
}
.nav--primary a {
	width:100%;
	color:#fff;
    box-sizing: border-box;
    padding: 20px 20px !important;
    font-size: 16px;
    font-family: 'Roboto Condensed';
    font-weight: 300;
    text-align: center;
    text-transform: uppercase;
}
.nav--primary li a.navitem:hover {
	background-color: rgba(0, 0, 0, 0.2);
    color: #ffffff;
}
.nav--primary li.is--selected a.navitem, .nav--primary li.is--selected a.navitem:hover {
	    background-color: #e25c2b;
    color: #ffffff;
    background-origin: border-box;
    background-image: -webkit-linear-gradient(top, #f47321, #d64c31);
    background-image: linear-gradient(to bottom, #f47321, #d64c31);
}
/**************************************************/
/*            Account Navigation                  */
/**************************************************/
.nav--secondary {

}
.nav--secondary li a {
}

.nav--secondary li.is--selected a, .nav--secondary li.is--selected a:hover {
	background:#d25e13;
	color:#fff;
}
/**************************************************/
/*                 Footer                         */
/**************************************************/
.page--footer {
	margin:0;
	padding:0;
	max-width: 1250px;
}
.page--footer > div{
	max-width: 1250px;
}
.page--footer div.medium-12 {

}
/*Footer Links*/
footer > div:first-of-type{
	background:#fff;
	border:1px solid #ededed;
	border-bottom-color:#fff;
}
footer nav{
	padding-left:35px;
}
footer a.navitem {
	height: 35px;
    width: 35px;
    font-size: 0.1px;
    padding: 0;
    margin: 15px;
    background-image:url("footer/help.png");
    background-size: cover;
    background-repeat: no-repeat;
}
footer a.navitem:hover{
	background-image:url("footer/helpHover.png");
}
footer a[href*="facebook"]{background-image:url("footer/facebook.png");}
footer a[href*="facebook"]:hover{background-image:url("footer/facebookHover.png");}
footer a[href*="linkedin"]{background-image:url("footer/linkedIn.png");}
footer a[href*="linkedin"]:hover{background-image:url("footer/linkedInHover.png");}
footer a[href*="bankofsunprairie.com"]{background-image:url("footer/Contact32.png");}
footer a[href*="bankofsunprairie.com"]:hover{background-image:url("footer/Contact32.png");}

/*Copyright and FDIC/EHL Text*/
footer .collapse:nth-of-type(2) {
	background-color: #F7F7F7;
	background-image:url("footer/footerLogo.png"), url("footer/FDIC.png");
    background-repeat: no-repeat;
    background-position: left 15px center, center center;
    background-size:150px 60px, 125px 40px;
    padding: 25px 15px;
}
footer .callout p {
	
}
/*Hide FDIC/EHL Text*/
footer .callout > p:first-child {

}

/**************************************************/
/*                Media Queries                   */
/**************************************************/
@media screen and (max-width: 1250px){
	header div.collapse:nth-child(1){
		right:15px;
	}
	.bank-branding{
		background-position: left 15px center;
	}
}
@media screen and (max-width: 1120px){
	.nav--primary a{
		padding:20px 15px !important;
		font-size: 14px;
	}
	.nav--primary{
		padding:0;
	}
}
@media screen and (max-width: 900px){
	.nav--primary a{
		padding:20px 10px !important;
		font-size: 12px;
	}
}
@media screen and (max-width: 725px) {
	.nav--primary{
		flex-direction: column;
	}
	.nav--primary li:not()
	.nav--primary a{
		padding: 10px !important;
		font-size: 16px;
	}
	footer .collapse:nth-of-type(2){
		background-position: left 15px center, left 200px center;
	}
}
@media screen and (max-width: 675px) {
	header div.collapse:nth-child(1){
		position: relative;
	    right: 0;
	    top: 0;
	    width: calc(100% - 30px);
	    height: inherit;
	    margin-left: 15px !important;
	    margin-top: 5px;
	}
	.nav--primary a{
		padding:15px !important;
	}
}
@media screen and (max-width: 620px) {
	footer .collapse:nth-of-type(2){
		background-position: left 15px center, left 180px center;
	}
}
@media screen and (max-width: 599px) {
	html {
		font-size:12px;
	}
	main#main {
		padding:0px 10px;
	}
}
@media screen and (max-width: 530px) {
	footer .collapse:nth-of-type(2){
		background-image: url("footer/footerLogo.png");
		background-size:150px 60px;
		background-position: left 15px center;
	}
}
@media screen and (max-width: 360px) {
	html {
		font-size:10px;
	}
	thead th, td {
		padding: 0px 2px;
		font-size: 1rem;
	}
}
@media print {
	header {
		display:none;
	}
	footer {
		display:none;
	}
}



/**************************************************/
/*                 Icons Utility Nav               */
/**************************************************/
.nav--utility a[href*="locations-hours"] {
    background: transparent url('icons/location.png') left no-repeat; padding-left:20px; margin-left:5px;
}
.nav--utility a[href*="contact-us"] {
    background: transparent url('icons/contact.png') left no-repeat; padding-left:20px; margin-left:5px;
}
.nav--utility a[href*="Mail"] {
    background: transparent url('icons/email.png') left no-repeat; padding-left:20px; margin-left:5px;
}
.nav--utility a[href*="Chat"] {
    background: transparent url('icons/chat.png') left no-repeat; padding-left:20px; margin-left:5px;
}
.nav--utility a[href*="Alerts"] {
    background: transparent url('icons/alert.png') left no-repeat; padding-left:20px; margin-left:5px;
}
.nav--utility a[href*="Profile"] {
    background: transparent url('icons/profile.png') left no-repeat; padding-left:20px; margin-left:5px;
}
.nav--utility a[href*="Logout"] {
    background: transparent url('icons/logout.png') left no-repeat; padding-left:20px; margin-left:5px;
}
.nav--utility a[href*="Login"] {
    background: transparent url('icons/login.png') left no-repeat; padding-left:20px; margin-left:5px;
}
/**********************************
***************Hover***************
***********************************/
.nav--utility a[href*="locations-hours"]:hover {
    background: transparent url('iconsHover/location.png') left no-repeat; padding-left:20px; margin-left:5px;
}
.nav--utility a[href*="contact-us"]:hover {
    background: transparent url('iconsHover/contact.png') left no-repeat; padding-left:20px; margin-left:5px;
}
.nav--utility a[href*="Mail"]:hover {
    background: transparent url('iconsHover/email.png') left no-repeat; padding-left:20px; margin-left:5px;
}
.nav--utility a[href*="Chat"]:hover {
    background: transparent url('iconsHover/chat.png') left no-repeat; padding-left:20px; margin-left:5px;
}
.nav--utility a[href*="Alerts"]:hover {
    background: transparent url('iconsHover/alert.png') left no-repeat; padding-left:20px; margin-left:5px;
}
.nav--utility a[href*="Profile"]:hover {
    background: transparent url('iconsHover/profile.png') left no-repeat; padding-left:20px; margin-left:5px;
}
.nav--utility a[href*="Logout"]:hover {
    background: transparent url('iconsHover/logout.png') left no-repeat; padding-left:20px; margin-left:5px;
}
.nav--utility a[href*="Login"]:hover {
    background: transparent url('iconsHover/login.png') left no-repeat; padding-left:20px; margin-left:5px;
}

@media screen and (max-width: 900px) {   
	.nav--utility a[href*="locations-hours"], .nav--utility a[href*="locations-hours"]:hover {
	    background:url('icons/location32.png') left no-repeat; color:transparent; height:40px; width:40px;
	}  
	.nav--utility a[href*="contact-us"], .nav--utility a[href*="contact-us"]:hover {
	    background:url('icons/contact32.png') left no-repeat; color:transparent; height:40px; width:40px;
	}  
	.nav--utility a[href*="Mail"], .nav--utility a[href*="Mail"]:hover {
	    background:url('icons/email32.png') left no-repeat; color:transparent; height:40px; width:40px;
	}
	.nav--utility a[href*="Chat"],.nav--utility a[href*="Chat"]:hover {
	    background:url('icons/chat32.png') left no-repeat; color:transparent; height:40px; width:40px;
	}
	.nav--utility a[href*="Alerts"],.nav--utility a[href*="Alerts"]:hover {
	    background:url('icons/alert32.png') left no-repeat; color:transparent; height:40px; width:40px;
	}
	.nav--utility a[href*="Profile"],.nav--utility a[href*="Profile"]:hover {
	    background:url('icons/profile32.png') left no-repeat; color:transparent; height:40px; width:40px;
	}
	.nav--utility a[href*="Logout"],.nav--utility a[href*="Logout"]:hover {
	    background:url('icons/logout32.png') left no-repeat; color:transparent; height:40px; width:40px;
	}
	.nav--utility a[href*="Login"],.nav--utility a[href*="Login"]:hover {
	    background:url('icons/login32.png') left no-repeat; color:transparent; height:40px; width:40px;
	}
}