body {overflow-x: hidden;}
#bd h3 {font-size: 1.7em;}
#bd p {font-size: .75em; letter-spacing: .13em;}
nav {top: 190%;}
#nav2 ul {position: absolute; width: 80%; top: 134%; left: 10%; line-height: 1.8em; text-align: center;margin-top: 5%;}
#nav2 li {font-size: 1.15em; display: inline-block; margin: 0 5%; list-style: none;}
#nav2 li a {color: #6eb6c3; text-decoration: none;}
#nav2 a:hover {color: #0df;}

.slideshow{
clear: both;
position: relative;
display: block;
width: 80%;
top: 30px;
left: 10%;
max-width: 578px;
}
.slideshow:focus{
 outline: 0;
}
figure{
  position: absolute;
  top: 0;
  width: 100%;
}
figure:first-child{
  position: relative;
}
figure img{
  opacity: 0;
  -webkit-transition: opacity 1.2s;
  transition: opacity 1.2s;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.slideshow .bss-show{
  z-index: 2;
}
.slideshow .bss-show img{
  opacity: 1;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: relative; 
}

figcaption{
position: absolute;
font-family: "Montserrat", Arial, sans-serif;
font-size: .75em;
text-align: center;
line-height: 1.2em;
top: 99%;
padding: .25em;
color: #fff;
background: #000;
background: rgba(0,0,0, .25);
border-radius: 2px;
opacity: 0;
-webkit-transition: opacity 1.2s;
transition: opacity 1.2s;
}
.slideshow .bss-show figcaption{
  z-index: 3;
  opacity: 1;
}

.next, .prev{
font-family: Arial, sans-serif;;
color: #fff;
position: absolute;
background: #000;
background: rgba(0,120,200, .95);
top: 40%;
z-index: 4;
font-size: 1.5em;
opacity: .7;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.next:hover, .prev:hover{
cursor: pointer;
opacity: 1;
}
.next{
right: -1.2em;
padding: 12px 5px 12px 0px;
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
}
.prev{
left: -1.2em;
padding: 12px 0px 12px 5px;
border-top-left-radius: 25px;
border-bottom-left-radius: 25px;
}

/* ==================================================================
   media queries
   ============================================================= */

@media screen and (min-width: 289px) {
    nav {top: 175%;}
}

@media screen and (min-width: 299px) {
    #bd {width: 48%;}
    #bd h3 {font-size: 1.75em;}
    #bd p {font-size: .8em; letter-spacing: .14em;}
}
    
@media screen and (min-width: 322px) {
    #bd {width: 74%;}
} 

@media screen and (min-width: 351px) {
    #bd {width: 75%;}
    #bd h3 {font-size: 1.85em;}
    #bd p {font-size: .85em; letter-spacing: .15em;}
}    

@media screen and (min-width: 362px) {
    #bd h3 {font-size: 2em;}
    #bd p {font-size: .9em; letter-spacing: .16em;}
    nav {top: 165%;}
		#nav2 ul {top: 127%;} 
}
            
@media screen and (min-width: 406px) {
		figcaption {bottom: -1.5em;}
}

@media screen and (min-width: 411px) {
    header img {margin-left: 5%;}
    #bd h3 {font-size: 2.25em;}
    #bd p {font-size: 1em; letter-spacing: .19em;}
    nav {top: 150%;}
}

@media screen and (min-width: 440px) {
		figcaption {font-size: .85em;}
}

@media screen and (min-width: 501px) {
    header img {margin-left: 2.5%;}
    #bd {width: 24%;  margin: 3% 0 0 4px;}
    #bd h3 {font-size: 1.75em; line-height: 1em;}
    #bd p {font-size: .8em; letter-spacing: .14em; margin-top: 1.5%; line-height: 1.2em;}
    nav {top: 36px;}
		#nav2 ul {top: 116%; width: 60%; left: 20%; line-height: 1.8em; text-align: center;} 
		#nav2 li {display: inline-block; margin: 0 2%;} 
}

@media screen and (min-width: 592px) {
		#nav2 ul {top: 115%; width: 100%; left: 0;}
}

@media screen and (min-width: 610px) {
    #bd {width: 20%;}
}

@media screen and (min-width: 650px) {
		#nav2 ul {width: 20%; top: 200px; left: 79%; text-align: left; margin-top: 0;}
		.slideshow{width: 57.8%; top: 80px; left: 11%;}
		#nav2 li {display: block; line-height: 1em; margin-bottom: 1.2em;}
		figcaption{font-size: 1em; letter-spacing: .05em; top: 99%; right: 0;}
}

@media screen and (min-width: 731px) {
    #bd {width: 16em;}
}

@media screen and (min-width: 771px) {
		#nav2 ul {left: 76%;}
		.slideshow{left: 7%;}
}

@media screen and (min-width: 801px) {
    header img {margin-left: 5%;}
    #bd h3 {font-size: 2em;}
    #bd p {font-size: .9em; letter-spacing: .16em;}
}

@media screen and (min-width: 900px) {
		#nav2 ul {top: 160px; left: 79%;}
		.slideshow{top: 60px; left: 11%;}
}

@media screen and (min-width: 960px) {
		#nav2 ul {right: -1%;}
}