article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

html, button, input, select, textarea { font-family: sans-serif; color: #222; }

body { margin: 0; font-size: 1em; line-height: 1.4; }
ul {padding: 0;}
::-moz-selection { background: #000000; color: #fff; text-shadow: none; }
::selection { background: #000000; color: #fff; text-shadow: none; }

a { color: #ffffff; text-decoration: none; font-family: 'Oswald'; cursor: pointer;}
a:visited { color: #ffffff; }
a:hover { color: #ffffff; }
a:focus { outline: thin dotted; }

/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover, a:active { outline: 0; }

abbr[title] { border-bottom: 1px dotted; }

b, strong { font-weight: bold; }

small { font-size: 85%; }

/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }

/*
 * Correct overflow not hidden in IE9
 */

svg:not(:root) { overflow: hidden; }

.wall { 
  max-width: 980px;
  margin: 0 auto; 
  text-align: center;
}

.pbslogo {
  padding: 2.4em 0 1em;
  margin: 0 auto;
  max-width: 240px;
}

.pbslogo img {
  max-width: 100%;
}

h2 a, h2 a:visited {
  font-family: 'Cabin';
  color: #000000;
  text-align: center;
  font-size: 1.9em;
  line-height: 1.2em;
  text-transform: uppercase;
  margin: 0;
  -webkit-transition: all .5s ease; /* Safari and Chrome */
  -moz-transition: all .5s ease; /* Firefox */
  -o-transition: all .5s ease; /* IE 9 */
  -ms-transition: all .5s ease; /* Opera */
  transition: all .5s ease;
}

h2 a:hover,h2 a:focus {
  opacity: .8;
  color: #000000;
  -webkit-transition: all .5s ease; /* Safari and Chrome */
  -moz-transition: all .5s ease; /* Firefox */
  -o-transition: all .5s ease; /* IE 9 */
  -ms-transition: all .5s ease; /* Opera */
  transition: all .5s ease;
}

h3 {
  font-family: 'Cabin';
  font-weight: 300;
  text-align: center;
  font-size: 1.4em;
  line-height: 1.2em;
  margin: .5em .4em 1.4em;
}

h3 span {
  font-size: 70%;
}

.democrat {
  text-transform: uppercase;
  line-height: 1.6em;
  letter-spacing: .035em;
  margin: 3em 1.5em 0 0;
  display: inline-block;
}

.democrat a {
  display: inline-block;
  background-color: #0c2d50;
  border: #ffffff 7px double;
  padding: 2em 4em;
  -webkit-transition: all .5s ease; /* Safari and Chrome */
  -moz-transition: all .5s ease; /* Firefox */
  -o-transition: all .5s ease; /* IE 9 */
  -ms-transition: all .5s ease; /* Opera */
  transition: all .5s ease;
}

.democrat a:hover { 
  -webkit-transform:scale(1.1); /* Safari and Chrome */
  -moz-transform:scale(1.1); /* Firefox */
  -ms-transform:scale(1.1); /* IE 9 */
  -o-transform:scale(1.1); /* Opera */
  transform:scale(1.1); 
  -webkit-transition: all .5s ease; /* Safari and Chrome */
  -moz-transition: all .5s ease; /* Firefox */
  -o-transition: all .5s ease; /* IE 9 */
  -ms-transition: all .5s ease; /* Opera */
  transition: all .5s ease;
}

.republican {
  text-transform: uppercase;
  line-height: 1.6em;
  letter-spacing: .035em;
  margin: 3em 0 0 1.2em;
  display: inline-block;
}

.republican a {
  display: inline-block;
  background-color: #AF1E23;
  border: #ffffff 7px double;
  padding: 2em 4em;
  -webkit-transition: all .5s ease; /* Safari and Chrome */
  -moz-transition: all .5s ease; /* Firefox */
  -o-transition: all .5s ease; /* IE 9 */
  -ms-transition: all .5s ease; /* Opera */
  transition: all .5s ease;
}

.republican a:hover { 
  -webkit-transform:scale(1.1); /* Safari and Chrome */
  -moz-transform:scale(1.1); /* Firefox */
  -ms-transform:scale(1.1); /* IE 9 */
  -o-transform:scale(1.1); /* Opera */
  transform:scale(1.1); 
  -webkit-transition: all .5s ease; /* Safari and Chrome */
  -moz-transition: all .5s ease; /* Firefox */
  -o-transition: all .5s ease; /* IE 9 */
  -ms-transition: all .5s ease; /* Opera */
  transition: all .5s ease;
}

.r-color .candidate {
  background-color: #AF1E23;
}

.d-color .candidate {
  background-color: #0c2d50;
}

.candidate {
  width: 180px;
  height: 330px;
  padding: .2em;
  margin: .25em .02em 0;
  display: inline-block;
  text-align: center;
  overflow: hidden;
}

.candidate:active img, .candidate:hover img {
  -webkit-filter: blur(5px);
  filter: blur(5px);
  opacity: .6;
  -webkit-transform:scale(1.15); /* Safari and Chrome */
  -moz-transform:scale(1.15); /* Firefox */
  -ms-transform:scale(1.15); /* IE 9 */
  -o-transform:scale(1.15); /* Opera */
   transform:scale(1.15);
}

.candidate:active .candidate-image-text, .candidate:hover .candidate-image-text {
  opacity:1;
  -webkit-transition: all 1.5s ease; /* Safari and Chrome */
  -moz-transition: all 1.5s ease; /* Firefox */
  -o-transition: all 1.5s ease; /* IE 9 */
  -ms-transition: all 1.5s ease; /* Opera */
  transition: all 1.5s ease;
}

.candidate img {
  -webkit-transition: all .5s ease; /* Safari and Chrome */
  -moz-transition: all .5s ease; /* Firefox */
  -o-transition: all .5s ease; /* IE 9 */
  -ms-transition: all .5s ease; /* Opera */
  transition: all .5s ease;
}

.candidate-image {
  position:relative;
  width: 180px;
  height: 234px;
  overflow: hidden;
}

.candidate .candidate-image-text {
  text-align: center;
  font-size: 1.6em;
  z-index: 1000;
  width: 160px;
  position:absolute;
  top: 2.4em;
  left: .4em;
  opacity: 0;
  -webkit-transition: all .5s ease; /* Safari and Chrome */
  -moz-transition: all .5s ease; /* Firefox */
  -o-transition: all .5s ease; /* IE 9 */
  -ms-transition: all .5s ease; /* Opera */
  transition: all .5s ease;
}

.candidate-name {
  color: #ffffff;
  font-size: 1.2em;
  font-family: 'Oswald';
  letter-spacing: .019em;
  text-transform: uppercase;
  text-align: center;
  margin: .55em 0 .35em;
}

.candidate-time {
  color: #ffffff;
  font-size: .8em;
  font-family: 'oswald';
  letter-spacing: .059em;
  text-transform: uppercase;
  text-align: center;
  margin: .3em 0 .6em;
}

.candidate-status {
  color: #ffffff;
  font-size: .8em;
  font-family: 'oswald';
  letter-spacing: .059em;
  text-transform: uppercase;
  text-align: center;
  margin: 1.7em 0 0;
}

.r-color .nostatus, .d-color .nostatus {
  background: #444444 !important;
  text-align: left;
}

.candidate-time span {
  background: url('../img/clock.svg');
  background-size: 30px 30px; 
  margin: .7em .4em 0 -.2em;
  width: 30px;
  height: 30px;
  display: inline-block;
}

.candidate-time strong { 
  font-size: 2.6em;
  font-weight: 500;
}

.note {  
  font-family: 'oswald';
  font-size: .8em; 
  text-align: center; 
  margin: 20px auto;
}

/* media queries  */

@media screen and (min-width:1024px) {
  .last {margin-right: 575px;}
}

@media screen and (min-width: 760px) and (max-width: 1024px) {
  .last {margin-right: 575px;}

}

@media screen and (min-width: 480px) and (max-width: 720px) {
  .republican a { padding: 2em .5em; }
  .democrat a { padding: 2em .5em; }

}

@media screen and (max-width: 479px) {
    .wall { margin: auto;}
    h2 { font-size: 2.3em; line-height: 1em;}
    h3 { font-size: 1.3em;}
    .candidate { width: 160px; margin-bottom: .3em;}
    .candidate-image { width: 160px; height: 220px; }
    .candidate .candidate-image-text { font-size: 1.15em; width: 145px;}
    .republican { margin: 0 0 1em 0; }
    .democrat { margin: 0 0 1em 0; }
}

@media screen and (max-width: 321px) {
    .candidate { width: 150px; }
    .candidate-image { width: 150px; }
}