@import url('https://fonts.googleapis.com/css?family=Merriweather&display=swap');

body { background-image: url("bg.jpg");background-position: center; background-repeat: no-repeat; background-size: cover; margin:0px;} 

h1, h2, h3, h4 {font-family: 'Merriweather', serif; font-weight:400;}
li, p {font-size:18px; font-family:arial; line-height:150%;}
a, a:visited {color:#666; text-decoration:underline;}
a:hover { color:#ff8e29; }

.wrapper {background-color:#fff; width:80%; margin:auto; padding:20px;}

.orange-bar {width:100%;  background-color:#ff8e29; text-align:center; line-height: 10px;}

.announcement {width:100%;  background-color:#ff8e29; text-align:center; line-height: 35px;}
.announcement h3 {color:#fff; font-size:30px; padding-left:20px;}
.announcement a {color:#fff;}
.announcement a:hover {color:#000;}
.announcement .fa {padding-right:20px;}
.spb-logo {max-width:250px; height:auto;}

.spb-header-section {margin-top:-20px; margin-bottom:-20px;}
.spb-header-section h1 {font-size:3vw; color:#ff8e29; font-weight:500; margin-top:80px; text-align:right;}

.header-left {width: 20%;}
.header-right {width: 80%;}
.column2 {float: left;}
.row2:after {content: ""; display: table; clear: both;}

.spb-content-section {margin-top:30px; margin-bottom:100px;}
.spb-content-section h2 {color:#48BCE5; font-weight:bold; }
.spb-content-section h4 {font-size:20px;}
.column3 {float: left;width: 33.33%;}
.row3:after {content: ""; display: table;clear: both;}




.quicklinks * {
  box-sizing: border-box;
}

.quicklinks-column {
  float: left;
  width: 25%;
  padding: 10px;
text-align:center;
}

.quicklinks-row:after {
  content: "";
  display: table;
  clear: both;
}

.quicklinks-icon {background-color:#48BCE5; border-radius:15px;  color:#ffffff; padding:5px;}
.quicklinks-column a {text-decoration:none;}
.quicklinks-icon .fas, .far {font-size:45px;}
.quicklinks-icon:hover {background-color:#ff8e29;}

.quicklinks p {font-size:22px; margin:0px;}





@media only screen and (max-width: 1180px) {

.quicklinks-icon {height:125px;}
}

@media only screen and (max-width: 1150px) {

.column3 {width:100%;}
}


@media only screen and (max-width: 950px) {

.header-left {width: 100%;}
.header-right {width: 100%; text-align:center;}
.column2 {float: left;}
.row2:after {content: "";display: table;clear: both;}  
  
.spb-logo {display:block; margin-left:auto; margin-right:auto;}
.spb-header-section h1 {font-size:30px; color:#ff8e29; font-weight:500; margin-top:20px; text-align:center;}

  
}


@media only screen and (max-width: 800px) {
.quicklinks-column {width:100%;}

.quicklinks-icon {max-height:100px;}
}