/* Mobile version */
@media only screen and (min-width:0px) and (max-width: 370px) {
#menu {
display: none;
}

.section {
float: none;
padding: 0;
margin: 0 0 0 0;
width: 100%;
}
  
.span_1_of_9 {
width: 100%;
padding: 0%;
margin: 0 0 3% 0;
}

.span_2_of_9 {
width: 100%;
padding: 0%;
margin: 0 0 3% 0;
}

.span_3_of_9 {
width: 100%;
padding: 0%;
margin: 0 0 3% 0;
}

.span_4_of_9 {
width: 100%;
padding: 0%;
margin: 0 0 3% 0;
}
  
.span_5_of_9 {
width: 100%;
padding: 0%;
margin: 0 0 3% 0;
}
  
.span_6_of_9 {
width: 100%;
padding: 0%;
margin: 0 0 3% 0;
}
  
.span_7_of_9 {
width: 100%;
padding: 0%;
margin: 0 0 3% 0;
}
  
.span_8_of_9 {
width: 100%;
padding: 0%;
margin: 0 0 3% 0;
}
  
.span_9_of_9 {
width: 100%;
padding: 0%;
margin: 0 0 3% 0;
}
  
h5 {
margin: 0 0 3% 0%;
padding: 0;
text-decoration: none;
color: #c3c3c3;
letter-spacing: 2px;
font-family: 'Roboto Slab', serif;
font-size: 9px;
font-weight: normal;
text-transform: uppercase;
width: 100%;
text-align: center;
}

.topic {
margin: 3% 0 1.5% 0%;
padding: 0;
text-decoration: none;
color: #FFF;
letter-spacing: 2px;
font-family: 'Roboto Slab', serif;
font-size: 9px;
font-weight: normal;
text-transform: uppercase;
width: 100%;
text-align: center;
}
  
#navigation {
padding: 20px;
background-color: #181717;
color: #fff;
text-align: center;
display: block;
margin: 0 0 5% 0;
}

#navigation ul {
display: none;
list-style: none;
margin-left: 0;
padding-left: 0;
margin-bottom: 0;
}

#navigation ul.expanded {
display: block;
}

#navigation li a {
display: block;
padding: 10px 0;
border-top: 1px solid #666;
font-size: 1.2em;
color: #ccc;
text-decoration: none;
}
  
  i {
  background: rgba(0,0,0,0.5);
  padding: 4%;
  }

} /* End media queries */




/* Larger screens */
@media only screen and (min-width:1024px) {

.section {
float: right;
padding: 5px;
margin: 1% 0 0 0;
color: #FFF;
width: 70%;
}
  
.span_9_of_9 {
width: 31%;
margin: 2% 0 0 0;
padding: 0;
}
  
.span_9_of_9 img {
width: 100%;
}

.span_8_of_9 {
width: 31%;
margin: 2% 2% 0 0;
padding: 0;
}
  
.span_8_of_9 img {
width: 100%;
}

.span_7_of_9 {
width: 31%;
margin: 2% 2% 0 0;
padding: 0;
}
  
.span_7_of_9 img {
width: 100%;
}

.span_6_of_9 {
width: 31%;
margin: 2% 2% 0 0;
padding: 0;
}
  
.span_6_of_9 img {
width: 100%;
}

.span_5_of_9 {
width: 31%;
margin: 2% 2% 0 0;
padding: 0;
}
  
.span_5_of_9 img {
width: 100%;
}

.span_4_of_9 {
width: 31%;
margin: 2% 2% 0 0;
padding: 0;
}
  
.span_4_of_9 img {
width: 100%;
}

.span_3_of_9 {
width: 31%;
margin: 0;
padding: 0;
}

.span_3_of_9 img {
width: 100%;
}

.span_2_of_9 {
width: 31%;
margin: 0 2% 0 0;
padding: 0;
}
  
.span_2_of_9 img {
width: 100%;
}

.span_1_of_9 {
width: 31%;
margin: 0% 2% 0 0;
padding: 0;
}
  
.span_1_of_9 img {
width: 100%;
}
  
}/* End media queries */


/* Ipad version */
@media only screen and (min-width:330px) and (max-width: 800px) {
#menu {
display: none;
}

.section {
float: left;
padding: 0;
margin: 0px;
color: #FFF;
width: 100%;
}

.span_1_of_9 {
width: 100%;
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
margin: 2% 0 0 0;
opacity: 0.8;
}
  
.span_1_of_9 img {
width: 80%;
}

.span_2_of_9 {
width: 100%;
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
background: none;
margin-top: 1%;
opacity: 0.8;
margin-right: 2.5%;
margin-left: 0%;
}
  
.span_2_of_9 img {
width: 80%;
}
  
.span_3_of_9 {
width: 100%;
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
background: none;
margin-top: 1%;
opacity: 0.8;
margin-right: 2.5%;
margin-left: 0%;
}

.span_3_of_9 img {
width: 80%;
}
  
.span_4_of_9 {
width: 100%;
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
background: none;
margin-top: 1%;
opacity: 0.8;
margin-right: 2.5%;
margin-left: 0%;
}
  
.span_4_of_9 img {
width: 80%;
}
  
.span_5_of_9 {
width: 100%;
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
background: none;
margin-top: 1%;
opacity: 0.8;
margin-right: 2.5%;
margin-left: 0%;
}
 
.span_5_of_9 img {
width: 80%;
}
  
.span_6_of_9 {
width: 100%;
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
background: none;
margin-top: 1%;
opacity: 0.8;
margin-right: 2.5%;
margin-left: 0%;
}
  
.span_6_of_9 img {
width: 80%;
}
  
.span_7_of_9 {
width: 100%;
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
background: none;
margin-top: 1%;
opacity: 0.8;
margin-right: 2.5%;
margin-left: 0%;
}
  
.span_7_of_9 img {
width: 80%;
}
  
.span_8_of_9 {
width: 100%;
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
background: none;
margin-top: 1%;
opacity: 0.8;
margin-right: 2.5%;
margin-left: 0%;
}
  
.span_8_of_9 img {
width: 80%;
}
  
.span_9_of_9 {
width: 100%;
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
background: none;
margin-top: 1%;
opacity: 0.8;
margin-right: 2.5%;
margin-left: 0%;
}
  
.span_9_of_9 img {
width: 80%;
}
  
#hidden {
display: none;
}  

#visible {
display: block;
}

h5 {
margin: 0 0 4% 0;  
}
  
i {
background: rgba(0,0,0,0.5);
padding: 3%;
}
  
#navigation {
padding: 20px;
background-color: #181717;
color: #fff;
text-align: center;
display: block;
margin: 0 0 5% 0;
}

#navigation ul {
display: none;
list-style: none;
margin-left: 0;
padding-left: 0;
margin-bottom: 0;
}

#navigation ul.expanded {
display: block;
}

#navigation li a {
display: block;
padding: 10px 0;
border-top: 1px solid #666;
font-size: 1.2em;
color: #ccc;
text-decoration: none;
}
  
} /* End media queries */


/* Smaller screens */
@media only screen and (min-width:800px) and (max-width: 1024px) {
#menu {
display: none;
float: none;
}  
  
/*  SECTIONS  */
.section {
padding: 5px;
margin: 0px;
color: #FFF;
width: 100%;
}

.span_9_of_9 {
width: 30.3%;
margin: 0;
padding: 2% 2% 0 0%;
}
  
.span_9_of_9 img { 
width: 100%;
}

.span_8_of_9 {
width: 30.3%;
margin: 0;
padding: 2% 2% 0 0%;
}
  
.span_8_of_9 img { 
width: 100%;
}

.span_7_of_9 {
width: 30.3%;
margin: 0;
padding: 2% 2% 0 3%;
}
  
.span_7_of_9 img { 
width: 100%;
}

.span_6_of_9 {
width: 30.3%;
margin: 0;
padding: 2% 2% 0 0%;
}

.span_6_of_9 img { 
width: 100%;
}

.span_5_of_9 {
width: 30.3%;
margin: 0;
padding: 2% 2% 0 0%;
}
  
.span_5_of_9 img { 
width: 100%;
}

.span_4_of_9 {
width: 30.3%;
margin: 0;
padding: 2% 2% 0 3%;
}
  
.span_4_of_9 img { 
width: 100%;
}

.span_3_of_9 {
width: 30.3%;
margin: 0;
padding: 2% 0 0 0%;
}
  
.span_3_of_9 img { 
width: 100%;
}

.span_2_of_9 {
width: 30.3%;
margin: 0;
padding: 2% 2% 0 0%;
}
  
.span_2_of_9 img { 
width: 100%;
}

.span_1_of_9 {
width: 30.3%;
margin: 0;
padding: 2% 2% 0 3%;
}
  
.span_1_of_9 img { 
width: 100%;
}
  
#navigation {
padding: 20px;
background-color: #181717;
color: #fff;
text-align: center;
display: block;
}

#navigation ul {
display: none;
list-style: none;
margin-left: 0;
padding-left: 0;
margin-bottom: 0;
}

#navigation ul.expanded {
display: block;
}

#navigation li a {
display: block;
padding: 10px 0;
border-top: 1px solid #666;
font-size: 1.2em;
color: #ccc;
text-decoration: none;
}

i {
background: rgba(0,0,0,0.5);
padding: 1%;
}

} /* End media queries */