Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

HTML

              
                <header class="uw-thinstrip">
                    <div class="container">
                     <a href="/" title="University of Washington" class="uw-patch">University of Washington</a>
                        <a href="/" title="University of Washington" class="uw-wordmark" tabindex="-1" aria-hidden="true">University of Washington</a>
                    </div>
                    <div class="align-right">
                        
                    </div>
                    
                </header>


<div class="uw-hero-image">
  <div class="container">
    <h1 class="hero-header">Email Preferences
    <span class="uw-slant"><span></span></span></h1>
    <h2>For programs offered by UW Continuum College</h2>
  </div>
</div>

<div class="container intro">
  <h1>Manage Subscriptions<br/>
    <span>For <strong>wang.anniex@gmail.com</strong></span></h1>
  <p>Hi Annie, as an email subscriber, you're in control. Turn on or off the educational opportunities that interest you, and we'll be in touch. 
You can update your preferences at any time.
</p>

</div>
<form>
<div id="subs">
<section class="container" id="pce">
  <div class="title">
    <h2>UW Professional & Continuing Education </h2>
  </div>
  <div class="contents">
    <div class="gray optinonly">

      <label class="checkcontainer">
       
      <h3>Certificate Alumni News</h3>
        <h4>~4/year</h4>
      <p>This quarterly newsletter is for certificate alumni, but it is currently on hiatus.</p>
  <input type="checkbox" checked>
  <span class="checkmark" role="checkbox" aria-checked="true"></span>
      </label></div>
    
    <div class="gray">

      <label class="checkcontainer">
       
      <h3>Program & Career News</h3>
        <h4>~2/month</h4>
      <p>Receive monthly newsletters from UWPCE to learn about new programs, hot jobs and key ways to unlock your career potential.</p>
  <input type="checkbox" id="brand">
  <span class="checkmark" role="checkbox" aria-checked="false"></span>
</label>
      
      <div class="gray" id="filter">
        <h4><i class="fas fa-filter"></i> Filter by Interest</h4>
        <p>Indicate your interests, and we'll tailor your email content accordingly.</p>
        <div class="double">
        <h5>Topics</h5>
        <h6>Career Change & Advancement</h6>
        <label class="checkcontainer">
Hot Jobs & Career Trends
  <input type="checkbox">
  <span class="checkmark" role="checkbox" aria-checked="false"></span>
</label>
          <label class="checkcontainer">
Tips for Getting Hired
  <input type="checkbox">
  <span class="checkmark" role="checkbox" aria-checked="false"></span>
</label>
        <h6>Going Back to School</h6>
        <label class="checkcontainer">
Success Stories
  <input type="checkbox">
  <span class="checkmark" role="checkbox" aria-checked="false"></span>
</label>
        </div>
        <div class="double">
        <h5>Industry</h5>
        <label class="checkcontainer">
Biotech, Health Care & Social Work
  <input type="checkbox">
  <span class="checkmark" role="checkbox" aria-checked="false"></span>
</label>
          <label class="checkcontainer">
Business, Leadership & Law
  <input type="checkbox">
  <span class="checkmark" role="checkbox" aria-checked="false"></span>
</label>
        <label class="checkcontainer">
Data & Applied Mathematics
  <input type="checkbox">
  <span class="checkmark" role="checkbox" aria-checked="false"></span>
</label>
          <label class="checkcontainer">
Education, Nonprofit & Society
  <input type="checkbox">
  <span class="checkmark" role="checkbox" aria-checked="false"></span>
</label>
          <label class="checkcontainer">
Engineering, Real Estate & Sustainability
  <input type="checkbox">
  <span class="checkmark" role="checkbox" aria-checked="false"></span>
</label>
        <label class="checkcontainer">
Marketing, Communication & Design
  <input type="checkbox">
  <span class="checkmark" role="checkbox" aria-checked="false"></span>
</label>
          <label class="checkcontainer">
Programming & Tech
  <input type="checkbox">
  <span class="checkmark" role="checkbox" aria-checked="false"></span>
</label>
        </div>
      </div>
      
    </div>
  </div>
</section>

<section class="container" id="deg">
  <div class="title">
    <h2>UW Degree Programs</h2>
  </div>
  <div class="contents">
    <div class="gray double">
      <h3>News</h3>    
      <h4>~1/month</h4>
      <p>Get relevant updates, announcements and important dates related to the program.</p>
    </div>
    <div class="gray double">      
      <h3>Events</h3>   
      <h4>~2/year</h4>
      <p>Learn about upcoming info sessions and events related to the program.</p>
    </div>
    
    <div class="single">
    <table id="degrees">
<thead>
  <tr id="head">
    <th>News</th>
    <th> Events</th>
    <th colspan=2></th>
  </tr>
</thead>
<tbody>
  <tr id="subhead">
    <th>News</th>
    <th> Events</th>
    <th colspan=2></th>
  </tr>
    <tr>
        <td>
            <label class="checkcontainer">
  <input type="checkbox">
  <span class="checkmark" role="checkbox"></span>
</label>
        </td>
        <td>
            <label class="checkcontainer">
  <input type="checkbox">
  <span class="checkmark" role="checkbox"></span>
</label>
        </td>
        <td>Bachelor of Science in Health Informatics & Health Information Management</td>
    </tr>
    <tr>               
        <td>
            <label class="checkcontainer">
  <input type="checkbox">
  <span class="checkmark" role="checkbox"></span>
</label>
        </td>
        <td>
            <label class="checkcontainer">
  <input type="checkbox" checked>
  <span class="checkmark" role="checkbox" aria-checked="true"></span>
</label>
        </td>
        <td>Communication Leadership Program</td>        
    </tr>
    <tr>                
        <td>
            <label class="checkcontainer">
  <input type="checkbox">
  <span class="checkmark" role="checkbox"></span>
</label>
        </td>
        <td>
            <label class="checkcontainer">
  <input type="checkbox">
  <span class="checkmark" role="checkbox"></span>
</label>
        </td>
        <td>Doctor of Audiology</td>  
    </tr>
    <tr>                
        <td>
            <label class="checkcontainer">
  <input type="checkbox">
  <span class="checkmark" role="checkbox"></span>
</label>
        </td>
        <td>
            <label class="checkcontainer">
  <input type="checkbox">
  <span class="checkmark" role="checkbox"></span>
</label>
        </td>
        <td>Executive Master of Health Administration</td>  
    </tr>
    <tr id="togglebtn"><td colspan=4>
      <input type="checkbox" checked hidden disabled />
      <button type="button" id="toggle">Show Other Degrees</button> <i class="fas fa-angle-right"></i>
      </td></tr>
</tbody>
</table>
      <p class="disclaimer"><strong>Note:</strong> This is not a full list of UW degree programs offered by UW Continuum College. For a comprehensive list, visit the <a href="https://www.pce.uw.edu/program-finder?type=degree" target="_blank">UWPCE Program Finder</a>.</p>
    </div>
    
    
  </div>
</section>

<section class="container" id="spl">
  <div class="title">
    <h2>Special UW Programs</h2>
  </div>
  <div class="contents">
    <p>Receive news, events, registration dates and updates for other programs offered by UW Continuum College.</p>
    
  <div class="container">
    <div class=row>
          <label class="checkcontainer">
       
      <h3>Osher Lifelong Learning Institute at the UW</h3>
      <p>Learn about courses, lunchtime talks and special events for intellectually curious adults over 50.</p>
  <input type="checkbox" id="brand">
  <span class="checkmark" role="checkbox" aria-checked="false"></span>
</label>
    </div>
    
    <div class="row">
          <label class="checkcontainer">
       
      <h3>Summer Youth Programs</h3>
      <p>Get on the list to learn about educational camps and courses for kids who want to keep learning over summer break.</p>
  <input type="checkbox" id="brand">
  <span class="checkmark" role="checkbox" aria-checked="false"></span>
</label>
    </div>
    
    <div class="row">
          <label class="checkcontainer">
       
      <h3>Summer Quarter</h3>
      <p>Summer Quarter is open to everyone. Find out how to enroll in nearly 2,000 UW classes in more than 100 fascinating fields.</p>
  <input type="checkbox" id="brand">
  <span class="checkmark" role="checkbox" aria-checked="false"></span>
</label>
    </div>
    
    <div class="row optinonly">
          <label class="checkcontainer">
       
      <h3>Intensive English Program</h3>
      <p>IEP helps students from around the world improve English language skills here in beautiful Seattle, WA.</p>
  <input type="checkbox" id="brand">
  <span class="checkmark" role="checkbox" aria-checked="false"></span>
</label>
    </div>
    
    <div class="row optinonly">
          <label class="checkcontainer">
       
      <h3>International English Language Program</h3>
      <p>Here in Seattle, WA, this program helps students worldwide prepare for further study in the U.S.</p>
  <input type="checkbox" id="brand">
  <span class="checkmark" role="checkbox" aria-checked="false"></span>
</label>
    </div>
    
  </div>    
  </div>
</section>
  
  </div>

  <section class="container" id="all">
  <div class="title">
    <h2>Unsubscribe from All</h2>
  </div>
  <div class="contents">
    <label class="checkcontainer">
      I no longer want to receive any marketing emails from UW Continuum College.

  <input type="checkbox" id="unsub">
  <span class="checkmark" role="checkbox" aria-checked="false"></span>
</label>
  </div>
</section>
  <section class="container">
    <button type="button" id="save">Save Preferences</button>
    <i class="fas fa-angle-right"></i>
    
    <div id="banner"><i class="fa fa-check-circle"></i> <h3>Your preferences have been saved successfully.</h3></div>
  </section>
</form>



<footer>
<div role="contentinfo" class="uw-footer">
                    <a href="http://www.washington.edu" class="footer-wordmark">University of Washington</a>
                    <a href="http://www.washington.edu/boundless/">
                        <h3 class="be-boundless">Be boundless</h3>
                    </a>
                    
                            
                        
                    <nav role="navigation" aria-label="footer links"><ul class="footer-links">
<li><a href="http://www.washington.edu/online/privacy/" title="Privacy" id="Privacy">Privacy</a>
</li><li><a href="http://www.washington.edu/online/terms/" title="Terms" id="Terms">Terms</a></li></ul></nav>

                    <p>
                        Brought to you by <a href="https://www.continuum.uw.edu/">UW Continuum College</a><br>© 2019 <a href="http://www.washington.edu/">University of Washington</a>  |  Seattle, WA
                    </p>
                </div>
</footer>
              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css?family=Encode+Sans+Condensed:400,500,600,700,800|Open+Sans:400,600,700');

html {
  overflow-x:hidden;
  overflow-y:scroll;
}

html, body {
  width:100%;
  height:100%;
  margin:0;
  font-family:'Open Sans';
  font-size:16px;
  color:#444444;  
}

p {
  margin:1em 0;
  font-size: calc(14px + .1vw);
}

a {
  color:#4b2e83;
}
a:visited {
  color:black;
} 

:focus {
  outline:none;
  background-color:#b7a57a;
}

strong {
  font-weight:600;
}

h1, h2, h3, h4, h5, h6 {
  font-family:'Encode Sans Condensed';
  font-weight:800;
  width:100%;
}

h1 {
  font-size:calc(20px + 1.2vw);
  text-transform:uppercase;
  color:#4b2e83;
  width:auto;
}

h2 {
  font-size:calc(16px + .6vw);
  font-weight:600;
}

h3 {
  font-size:calc(16px + .2vw);
  font-weight:700;
  color:black;
  margin:0;
  padding-right: .5em;
}

h4 {
  font-size:calc(16px + .1vw);
  font-weight:600;
}

h5 {
  font-size:calc(14px + .1vw);
  font-weight:600;
  padding:.5em;
  background-color:#efefef;
  margin-bottom:1em !important;
}

h6 {
  font-size:calc(13px + .1vw);
  font-weight:500;
  padding:0 0 .5em 0;
}

label + h6 {
  padding-top:1em;
}

.container {
    position:relative;
    display:block;
    margin-right: auto;
    margin-left: auto;
    padding: 0 15px;
    max-width:600px;
}

.uw-thinstrip {
    height: 90px;
    width: 100%;
    background: #4b2e83;
    position: relative;
    z-index: 2;
    -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.3);
    box-shadow: 0 2px 5px rgba(0,0,0,.3);
}

.uw-thinstrip .uw-patch {
    display: block;
    text-indent: -9999px;
    width: 163px;
    height: 90px;
    background: url(https://www.danforth.uw.edu/assets/svg/uw-sprite.svg) no-repeat 0 0 transparent;
    position: absolute;
    left: 0;
    z-index: 1;
}

.uw-thinstrip .uw-wordmark {
    display: block;
    position: absolute;
    top: 30px;
    left: 150px;
    text-indent: -9999px;
    width: 330px;
    height: 24px;
    background: url(https://www.danforth.uw.edu/assets/svg/uw-sprite.svg) no-repeat 0 -431px transparent;
}

.uw-hero-image {
    background-image:url('https://www.danforth.uw.edu/UWDANFORTH/media/Danforth/uw-danforth-sub-banner.jpg?ext=.jpg');
    height: calc(180px + 4vw);;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: relative;
}

.uw-hero-image:before, .no-uw-hero-image:before {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 80px;
    width: 100%;
    content: "";
    opacity: .4;
    background: -webkit-gradient(linear,0 0,0 100%,from(rgba(0,0,0,0)),to(rgba(0,0,0,.8))) 0 0 no-repeat;
}

.uw-hero-image:after, .no-uw-hero-image:after {
    position: absolute;
    bottom: 0;
    height: 50px;
    width: 100%;
    content: "";
    background: url(https://www.danforth.uw.edu/assets/images/stripes-dark-tile.svg);
    opacity: .2;
}

.hero-header {
    position:absolute;
    left:15px;
    color: white;
    font-family:'Encode Sans Condensed';
    font-weight:900;
    font-size:calc(20px + 2vw);
    text-shadow: 1px 1px 2px rgba(0,0,0,.5);
}

.uw-slant {
    overflow: hidden;
    display: block;
    margin: 15px 0 10px 0;
}

.uw-slant span {
  background-color: #b7a57a;
  transform: skew(-25deg,0);
  display: block;
  height: 10px;
  width: 290px;
  margin: 0 0 15px -90px;
}

.uw-hero-image h2 {
  position:absolute;
  left:15px;
  top: calc(5em + 1vw);;
  color: white;
  font-family:'Encode Sans Condensed';
  font-weight:400;
  font-size:calc(16px + .5vw);
  text-shadow: 1px 1px 2px rgba(0,0,0,.5);
}

.intro {
  margin:5em auto;
}

.intro h1 span {
  font-weight:400;
  text-transform:none;
}

.intro h1 span strong {
  color:#b7a57a;
  font-weight:600;
}

.intro p {
  font-size:calc(16px + .3vw);
  line-height:calc(16px + 1vw);
}

section.container {
  margin-bottom:3em;
}

section.container div { 
  padding:1.1em 2em;
}

section.container .title {
  background-color:#4b2e83;
}

section.container .title h2 {
  margin:0;
  color:white;
}

section.container .contents {
  background-color:#efefef;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
}

section.container .contents div {
  padding:1em 0;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
}

section.container div.gray {
  border-top:4px solid lightgray;
  margin-top:.5em;
}

section.container div.double {
  width:46%;
}

section.container div.double * {
  margin:0;
}

section.container div.single {
  width:100%;
}


h3, h4 {
  display:table-cell;
  padding-bottom:.3em;
  width:auto;
}

h4 + p,
h3 + p {
  display:table-row;
  margin-top:0;
}

label {
  cursor:pointer;
}

.checkcontainer {
    position: relative;
    padding-left: 3em;
    cursor: pointer;
}

#pce .checkcontainer,
#all .checkcontainer,
#spl .checkcontainer {
  padding-left:4em;
}

#filter .checkcontainer {
      padding: 0 0 .5em 3.5em;
    width: 100%;
    min-height: 40px;
    display: flex;
    align-items: center;
}

/* Hide the browser's default checkbox */
.checkcontainer input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom checkbox */
.checkcontainer .checkmark {
    position: absolute;
    top: .2em;
    left: 0;
    height: 2.2em;
    width: 2.2em;
    background-color: white;
		border:2px solid #ccc;
	-webkit-transition: border-color ease-in-out .15s,outline-color ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,outline-color ease-in-out .15s;
    transition: border-color ease-in-out .15s,outline-color ease-in-out .15s;
}

#deg .checkcontainer .checkmark {
  top:-.5em;
}

#special .checkcontainer .checkmark {
  top:-.2em;
}

/* When the checkbox is checked, add a blue background */
.checkcontainer input:checked ~ .checkmark {
    background-color: #4b2e83;
		border-color:#4b2e83;
}

/* Focus state when tabbing */
.checkcontainer input:focus ~ .checkmark,
.checkcontainer input:active ~ .checkmark {
		border-color:black;	
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkcontainer .checkmark:after {
    content: "";
    position: absolute;
    opacity:0;
}

/* Show the checkmark when checked */
.checkcontainer input:checked ~ .checkmark:after {
    opacity:1;
}

/* Style the checkmark/indicator */
.checkcontainer .checkmark:after {
    left: .7em;
    top: .2em;
    width: .6em;
    height: 1.2em;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

table {
  border-collapse:collapse;
  width:100%;
}

table tr th {
  font-family:'Encode Sans Condensed';
  font-size:.8em;
  text-transform:uppercase;
  padding-bottom:.5em;
  text-align:left;
  color:black;
}

table tr th:first-of-type {
  padding-left:calc(14px + .4vw);
}

table tr td {
  background-color:white;
  border:none;
  border-bottom:8px solid #efefef;
  padding:.8em .2em;
  height:40px;
  font-size:calc(12px + .2vw);
}

table tr td:first-of-type {
  padding-left:1.2em;
  width:50px;
}

#degrees tr td:last-of-type {
  width:80%;
}

/* table tr td:last-of-type {
  text-align:right;
  width:15%;
  padding-right:1.2em;
} */

#special tr td:last-of-type {
  width:30%;
}

#degrees #togglebtn td {
  padding:0;
  border-top:16px solid #efefef;
  border-bottom:16px solid #efefef;
  background-color:transparent;
}

#special tr td {

}

button {
  width:100%;
  color:black;
  font-family:'Encode Sans Condensed';
  font-weight:800; 
  font-size:calc(16px + .3vw);
  background-color:#b7a57a;
  border:#b7a57a;
  padding:1em;
  text-align:left;
  position:relative;
  cursor:pointer;
  display:block;
  -webkit-appearance: none;
}

button:focus {
    outline:3px solid #85754d;
    outline-offset:-3px;
}

button:active {
    background-color:#85754d;
}

button ~ i {
  position:relative;
  float:right;
  margin-right:1em;
  margin-top:-2.1em;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg); 
  color:black;
  font-family:'Encode Sans Condensed';
  font-weight:800; 
  font-size:calc(16px + .3vw);
   -webkit-transition: all .2s; /* Safari */
  transition: all .2s;
  cursor:pointer;
}
button.show ~ i {
  margin-top:-2.2em;
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg); 
}

#save {
  display:block;
  text-transform:uppercase;
  width:auto;
  padding-right:2em;
}

#save ~ i {  
  float:left;
  margin-left:10.5em;
  margin-top:-2.1em;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg); 
}

.disclaimer {
  margin:1em 0 0;
  font-size:calc(12px + .1vw);
  color:#999;
}

#filter {
  margin:1em;
  background-color:white;
  padding:1.5em;
  padding-bottom:0;
  width:100%;
  font-size:calc(12px + .1vw);
  align-items:flex-start;
}

#filter h4 {
  display:block;
  margin:0 0 .5em;
  font-weight:700;
}

#filter .fas {
  color:#4b2e83;
  margin-right:5px;
}

#spl .row {
  background-color:transparent;
  border-top:4px solid lightgray;
  padding:1.2em 0;

}

#banner {
  background-color:#d4edda;
  border: 4px solid #c3e6cb;
  position:fixed;
  top:10px;
  left:50%;
  width:592px;
  padding:0;
  margin-left:-300px;
  display:none;
  white-space:nowrap;
}

#banner i,
#banner h3 {
  display:inline-block;
  padding:20px 0;
}

#banner i {
  margin:0 10px 0 20px;
  color:#4CAF50;
  font-size:calc(20px + .2vw);
}

#banner h3 {
  color:#155724;
}

.uw-footer {
    background: url(https://www.danforth.uw.edu/assets/images/footer.jpg) center bottom;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding: 0 0 30px 0;
    background-color: #4b2e83;
    border-top: 7px solid #d1d1d1;
    text-align: center;
    position: relative;
}

.uw-footer .footer-wordmark {
    display: inline-block;
    width: 335px;
    background: url(https://www.danforth.uw.edu/assets/svg/uw-sprite.svg) no-repeat 0 -434px transparent;
    text-indent: -9999px;
    overflow: hidden;
    margin-top: 50px;
}

.uw-footer .be-boundless {
    font-size: 24px;
    background: url(https://www.danforth.uw.edu/assets/images/boundless.png) no-repeat center top transparent;
    display: block;
    text-indent: -99999px;
    margin: 10px 0 0;
    opacity: .6;
    -o-transition: opacity .25s;
    -webkit-transition: opacity .25s;
    transition: opacity .25s;
}

.uw-footer ul.footer-links {
    margin: 0;
    padding:0;
}

.uw-footer p {
    color: #fff;
    font-size: .8em;
    margin-top: 15px;
}

.uw-footer ul.footer-links li {
    list-style: none;
    display: inline-block;
}

.uw-footer ul.footer-links li a {
    text-decoration:none;
    color: #fff;
    position: relative;
    margin-right: 20px;
}

.uw-footer ul.footer-links li:first-child a:after {
    content: "/";
    opacity: .5;
    position: absolute;
    right: -14px;
}

.uw-footer ul.footer-links li a:focus, 
.uw-footer ul.footer-links li a:hover {
    color: #b7a57a;
    text-decoration: none;
    background-color:transparent;
}

.uw-footer p a, .uw-footer p span {
    color: #fff;
    text-decoration:none;
}



/*media queries*/

@media only screen and (max-width: 767px) {
.uw-thinstrip {
    height: 45px;
}
.uw-thinstrip .uw-patch {
    width: 73px;
    height: 45px;
    top: 0;
    left: 0;
    background-size: 470px;
    -o-transition: all 0s;
    -webkit-transition: all 0s;
    transition: all 0s;
}
  
.uw-thinstrip .uw-wordmark {
    width: 155px;
    height: 34px;
    background: url(https://www.danforth.uw.edu/assets/svg/uw-sprite.svg) no-repeat 0 -185px transparent;
    margin: 0;
    float: none;
    position: absolute;
    left: 78px;
    top: 4px;
    background-size: 397px;
}
  
  .uw-hero-image {
    height:180px;
  }
  
  #filter .double {
    width:100%;
  }
  
  #banner {
    width:96%;
    margin-left:-49%;
  }
  
  #banner h3 {    
    font-size:calc(14px + .2vw);
  }
}
              
            
!

JS

              
                $(document).ready(function() {

var tr = $('#degrees tbody tr');
  
  tinysort(tr);
  
  $('#toggle').siblings('.fas').click(function(){
    $('#toggle').click();
    return false;
  });

  //checked items after toggle and hidden
    tr.not(":has(:checkbox:checked)").insertAfter('#togglebtn');
    tr.not(":has(:checkbox:checked)").hide();

  
  //if no degrees checked, hide top header
    if (tr.has(":checkbox:enabled:checked").length == 0){ 
      $('#head').hide(); 
    }
  
  //if no degrees unchecked, hide subhead
    if ($('#subhead').is(':last-child')) {
      $('#subhead').hide();
    }
  
  //if no degrees checked, hide header and change button text from "Other" to "All"
  if (tr.has(":checkbox:enabled:checked").length == 0) {
    $('#head').hide();  
    $("#toggle").text($("#toggle").text().replace('Other', 'All'));
  } else { 
    $('#head').show();
    $("#toggle").text($("#toggle").text().replace('All', 'Other'));
  }  
  
  //if opt-in only programs are unchecked, hide them
  if ($('.optinonly').not(":has(:checkbox:checked)").length > 0) { 
      $('.optinonly').not(":has(:checkbox:checked)").hide();  
      }
  
  //ON TOGGLE BUTTON CLICK...
$("#toggle").click(function(){
    var
    check = tr.has(":checkbox:checked"),
    nocheck = tr.not(":has(:checkbox:checked)"),
    button = $("#toggle").text();
  
  //checked items before toggle
    check.insertBefore('#togglebtn');
  
  //unchecked items after toggle
    nocheck.insertAfter('#togglebtn');
  
  //toggle button text, show hidden unchecked, if none, hide subhead
  if (button.substring(0,4) == "Show") {   
    $("#toggle").text(button.replace('Show', 'Hide'));   
    nocheck.show();
    $("#toggle").addClass('show');    
    if ($('#subhead').is(':last-child')) {
      $('#subhead').hide();
    }
  } else {
  //toggle button text, hide shown unchecked
    $("#toggle").text(button.replace('Hide', 'Show'));
    nocheck.hide(); 
    setTimeout(function() {$("#toggle").removeClass('show');}, 5);
  }
 
  
  //if no degrees checked, hide header and change button text from "Other" to "All"
if (tr.has(":checkbox:enabled:checked").length == 0) {
    $('#head').hide();  
    $("#toggle").text($("#toggle").text().replace('Other', 'All'));
  } else { 
    $('#head').show();
    $("#toggle").text($("#toggle").text().replace('All', 'Other'));
  }  
   
  });
   
  
  
  //CHECKBOX DEPENDENCIES
  
  //check brand email if filters are selected
  $('#filter').find(':checkbox:enabled').on('click', function () {
  $('#brand').prop('checked', true)
  });
  
  //uncheck filters if brand email is unchecked
  $('#brand').on('click', function () {
    if (!this.checked) {    $('#filter').find(':checkbox:enabled').prop('checked', false)}   
    });
  
  //unsubscribe all unchecks all other boxes
  $('#unsub').on('click', function () {
    if (this.checked) {    $('#subs').find(':checkbox:enabled').prop('checked', false)}   
    });
  
  //uncheck unsubscribe if another box is checked
  $('#subs').find(':checkbox:enabled').on('click', function () {
  $('#unsub').prop('checked', false)
  });
  
  
  
  $("#save").click(function(){
    $("#banner").slideDown(200);
    setTimeout(function() {
        $("#banner").slideUp(200)
    }, 5000);
    
    
    //if opt-in only programs are unchecked, hide them
    if ($('.optinonly').not(":has(:checkbox:checked)").length > 0) { 
        $('.optinonly').not(":has(:checkbox:checked)").hide();  
        }
  });
  

});
              
            
!
999px

Console