/**
 * @version 1.0
 * @author jacek
 * @author jacek
 */
/*
 980px grid system ~ Core CSS.
 12 columns ~ margin: 20px

 Based on the golden grid system - http://code.google.com/p/the-golden-grid/
 by Vladimir Carrer

 Created by the Grid System Generator - v1.00
 Learn more ~ http://www.gridsystemgenerator.com/
 */
/* CSS Resets */
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
address,
cite,
code,                                                                                      
del,
dfn,
em,
img,
ins,
q,
small,
strong,
sub,
sup,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
  border: 0;
  margin: 0;
  padding: 0;
}



article,
aside,
figure,
figure img,
figcaption,
hgroup,
footer,
header,
nav,
section,
video,
object {
  display: block;
}
a img {
  border: 0;
}
figure {
  position: relative;
}
figure img {
  width: 100%;
}
/* --- Grid >> Global ---*/
.g80,
.g160,
.g240,
.g320,
.g400,
.g480,
.g560,
.g640,
.g720,
.g800,
.g880,
.g960 {
  display: inline;
  float: left;
  margin-left: 20px;
}
/* --- Grid >> 12 Columns ---*/
.g80 {
  width: 60px;
}
.g160 {
  width: 140px;
}
.g240 {
  width: 220px;
}
.g320 {
  width: 300px;
}
.g400 {
  width: 380px;
}
.g480 {
  width: 460px;
}
.g560 {
  width: 540px;
}
.g640 {
  width: 620px;
}
.g644 {
  width: 644px;
}
.g720 {
  width: 700px;
}
.g721 {
  width: 700px;
  margin: 0 0 0 0px;
}
.g800 {
  width: 780px;
}
.g880 {
  width: 860px;
}
.g880 {
  width: 878px;
}
.g960 {
  width: 940px;
}

.g960 {
  width: 940px;
}

.g961 {
  width: 940px;
}

.g240 {
  width: 240px;
}


/* --- Grid >> 12 Columns - no left margin ---*/
.ml80 {
  margin-left: 100px;
}
.ml160 {
  margin-left: 180px;
}
.ml240 {
  margin-left: 260px;
}
.ml320 {
  margin-left: 340px;
}
.ml400 {
  margin-left: 420px;
}
.ml480 {
  margin-left: 500px;
}
.ml560 {
  margin-left: 580px;
}
.ml640 {
  margin-left: 660px;
}
.ml720 {
  margin-left: 740px;
}
.ml800 {
  margin-left: 820px;
}
.ml880 {
  margin-left: 900px;
}
.ml960 {
  margin-left: 980px;
}
.inside {
  margin-left: 0;
}
/* --- Clear Floated Elements ---*/
/* http://sonspring.com/journal/clearing-floats */
.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 10px;
}
/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */
.clearfix:after {
  clear: both;
  content: ' ';
  display: block;
  font-size: 0;
  line-height: 0;
  visibility: hidden;
  width: 0;
  height: 30px;
}
.clearfix {
  display: inline-block;
}
* html .clearfix {
  height: 1%;
}
.clearfix {
  display: block;
}
/* --- LESS Elements --- */
/* --- Globals --- */
body {

  font-size: 85%;
  font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
}
a {
  color: #fff;
}
h3 {
  margin: 10px 10px 0 10px;
  color: #FFF;
  letter-spacing: 1px;
  font-weight: bold;
  text-align: justify;
}
h6 {
  margin: 80px auto;
  color: #282828;
  letter-spacing: 1px;
  font-size: 1em;
  font-weight: bold;
  text-align: center;
}
/* --- Elements --- */
#container {
  margin: 60px auto;
  width: 920px;
  height: 720px;
  position: relative;
}
#container-hack {
  margin: auto;
  width: 920px;
  height: 490px;
  position: relative;
}
.logo {
  width: 40px;
  height: 40px;
  margin: 0 0 0 8px;
  position: absolute;
  border: 0px solid black;
}


#logofragmentarium {

                          
  position: fixed;
  left: 8px;
  bottom:8px;
  width: 64px;
  height: 64px;
 
  border: 1px solid #e2e2e2;
}

#read {
                     
  position: fixed;
  left: 8px;
  top:8px;
  width: 64px;
  height: 64px;
  line-height:64px;
  text-align:center;
  border: 1px solid #a6a6a6;
}

#readmore {
                     
  position: fixed;
  left: 8px;
  top:8px;
  width: 64px;
  height: 64px;
  line-height:64px;
  text-align:center;
  background-color:#fff;
  border: 1px solid #a6a6a6;
}

#listenmore {
                     
  position: fixed;
  right: 8px;
  top:8px;
  width: 64px;
  height: 64px;
  line-height:64px;
  text-align:center;
  background-color:#fff;
  border: 1px solid #a6a6a6;
}

   #listen {
                     
  position: fixed;
  right: 8px;
  top:8px;
  width: 64px;
  height: 64px;
  line-height:64px;
  text-align:center;
  border: 1px solid #a6a6a6;
}
    
   #home {
                     
  position: fixed;
  left: 8px;
  bottom:8px;
  width: 64px;
  height: 64px;
  line-height:64px;
  text-align:center;
  border: 1px solid #a6a6a6;
}

.more {
                     
  line-height:64px;
  text-align:center;
  text-decoration:none;
 
}

   #aboutfrag {
                     
  position: fixed;
  right: 152px;
  bottom:8px;
  width: 64px;
  height: 64px;
  line-height:64px;
  text-align:center;
  border: 1px solid #a6a6a6;
}


   #walks {
                     
  position: fixed;
  right: 8px;
  bottom:8px;
  width: 64px;
  height: 64px;
  line-height:64px;
  text-align:center;
  border: 1px solid #a6a6a6;
}






#logofragmentarium:hover {
    background-image:url('button.png');
}


#hoverlogofragmentarium  {
  display:none;
}

#logofragmentarium:hover #hoverlogofragmentarium {
       position:absolute;
      display:block;
    width: 400px;
  height: 64px;
  
  left:144px;
  text-align:left;
  border: 0px solid black;
  font-size: 0.8em;
  color:#a6a6a6;
  overflow: hidden;
  transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;


}  
#infofragmentarium {                        
  position: fixed;
  right: 8px;
  bottom:8px;
  width: 64px;
  height: 64px;
 
  border: 1px solid #e2e2e2;
}


#infofragmentarium:hover {
    background-image:url('button.png');
}

#hoverinfofragmentarium  {
  display:none;
}

#infofragmentarium:hover #hoverinfofragmentarium {
       position:absolute;
      display:block;
    width: 400px;
  height: 64px;
  
  right:96px;
  text-align:right;
  border: 0px solid black;
  font-size: 0.8em;
  color:#a6a6a6;
  overflow: hidden;
  transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;


}


#infofragmentarium1 {                        
  position: fixed;
  right: 80px;
  bottom:8px;
  width: 64px;
  height: 64px;  
 
  border: 1px solid #e2e2e2;
}


#infofragmentarium1:hover {
    background-image:url('button1.png');
}

#hoverinfofragmentarium1  {
  display:none;
     
     
}

#infofragmentarium1:hover #hoverinfofragmentarium1 {
       position:absolute;
      display:block;
    width: 400px;
  height: 64px;
  
  right:150px;  
  text-align:right;
  border: 0px solid black;
 font-size:0.7em;
  color:#a6a6a6;
  overflow: hidden;
  transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;


}      





#participants {                        
  position: fixed;
  right: 152px;
  bottom:8px;
  width: 64px;
  height: 64px;
 
  border: 1px solid #e2e2e2;
}



#hoverparticipants  {
  display:none;
  
}

#participants:hover #hoverparticipants {
       position:absolute;
      display:block;
    width: 300px;
  height: 64px;
  
  right:76px;  
  text-align:right;
  border: 0px solid black;
 font-size:0.7em;
  color:#a6a6a6;
  overflow: hidden;
  transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;


}


#random {                        
  position: fixed;
  right: 80px;
  bottom:8px;
  width: 64px;
  height: 64px;
 
  border: 1px solid #e2e2e2;
}


#hoverrandom  {
  display:none;         
  
}   

#random:hover #hoverrandom {
       position:absolute;
      display:block;
    width: 400px;
  height: 64px;
  
  right:76px;  
  text-align:right;
  border: 0px solid black;
 font-size:0.7em;
  color:#a6a6a6;
  overflow: hidden;
  transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;


} 
  


#random1 {                        
 position: fixed;
  right: 80px;
  bottom:8px;
  width: 64px;
  height: 64px;
 
  border: 1px solid #e2e2e2;
 
}

#credits {                        
 position: fixed;
  right:37%;
  bottom:8px;
  width: auto;
  height: 40px;
 
 
}

#hoverrandom1  {
  display:none;     
  
}

#random1:hover #hoverrandom1 {
      position:absolute;
      display:block;
    width: 300px;
  height: 64px;
  
  right:148px;  
  text-align:right;
  border: 0px solid black;
 font-size:0.7em;
  color:#a6a6a6;
  overflow: hidden;
  transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;



}

#random1a {                        
 position: fixed;
  right: 80px;
  bottom:8px;
  width: 64px;
  height: 64px;
 
  border: 1px solid #e2e2e2;
 
}

#hoverrandom1a  {
  display:none; 
  
}    

#random1a:hover #hoverrandom1a {
      position:absolute;
      display:block;
    width: 300px;
  height: 64px;
  
  right:76px;  
  text-align:right;
  border: 0px solid black;
 font-size:0.7em;
  color:#a6a6a6;
  overflow: hidden;
  transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;



}






#infofragmentarium3 {                        
  position: fixed;
  right: 8px;
  bottom:8px;
  width: 64px;
  height: 64px;
 
  border: 1px solid #e2e2e2;
}


#infofragmentarium3:hover {
    background-image:url('button1.png');
}

#hoverinfofragmentarium3  {
  display:none;
}

#infofragmentarium3:hover #hoverinfofragmentarium3 {
       position:absolute;
      display:block;
    width: 400px;
  height: 64px;
  
  right:144px;
  text-align:right;
  border: 0px solid black;
  font-size: 0.8em;
  color:#a6a6a6;
  overflow: hidden;
  transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;


}



#infofragmentarium4 {                        
  position: fixed;
  left: 80px;
  bottom:8px;
  width: 64px;
  height: 64px;
 
  border: 1px solid #e2e2e2;
}


#infofragmentarium4:hover {
    background-image:url('button2.png');
}

#hoverinfofragmentarium4  {
  display:none;
}

#infofragmentarium4:hover #hoverinfofragmentarium4 {
       position:absolute;
      display:block;
    width: 200px;
  height: 64px;
  left:72px;
  text-align:left;
  border: 0px solid black;
  font-size: 0.8em;
  color:#a6a6a6;
  overflow: hidden;
  transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;


}


#infofragmentariumindex {                        
  position: fixed;
  left: 80px;
  bottom:8px;
  width: 64px;
  height: 64px;
 
  border: 1px solid #a6a6a6;
}


#infofragmentariumindex:hover {
    background-image:url('button1a.png');
}

#hoverinfofragmentariumindex  {
  display:none;
}

#infofragmentariumindex:hover #hoverinfofragmentariumindex {
       position:absolute;
      display:block;
    width: 200px;
  height: 64px;
  left:72px;
  text-align:left;
  border: 0px solid black;
  font-size: 0.8em;
  color:#fff;
  overflow: hidden;
  transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;


}


#infofragmentariumindex2 {                        
  position: fixed;
  right: 80px;
  bottom:8px;
  width: 64px;
  height: 64px;
 
  border: 1px solid #a6a6a6;
}


#infofragmentariumindex2:hover {
    background-image:url('button2a.png');
}

#hoverinfofragmentariumindex2  {
  display:none;
}

#infofragmentariumindex2:hover #hoverinfofragmentariumindex2 {
       position:absolute;
      display:block;
    width: 200px;
  height: 64px;
  right:52px;
  text-align:left;
  border: 0px solid black;
  font-size: 0.8em;
  color:#fff;
  overflow: hidden;
  transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;


}





#infofragmentarium4a {                        
  position: fixed;
  left: 80px;
  bottom:8px;
  width: 64px;
  height: 64px;
 
  border: 1px solid #e2e2e2;
}


#infofragmentarium4a:hover {
    background-image:url('button2.png');
}

#hoverinfofragmentarium4a  {
  display:none;
}

#infofragmentarium4a:hover #hoverinfofragmentarium4a {
       position:absolute;
      display:block;
    width: 200px;
  height: 64px;
  left:152px;
  text-align:left;
  border: 0px solid black;
  font-size: 0.8em;
  color:#a6a6a6;
  overflow: hidden;
  transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;


}




#infofragmentarium5 {                        
  position: fixed;
  left: 152px;
  bottom:8px;
  width: 64px;
  height: 64px;
 
  border: 1px solid #e2e2e2;
}


#infofragmentarium5:hover {
    background-image:none;
}

#hoverinfofragmentarium5  {
  display:none;
}

#infofragmentarium5:hover #hoverinfofragmentarium5 {
       position:absolute;
      display:block;
    width: 200px;
  height: 64px;
  left:80px;
  text-align:left;
  border: 0px solid black;
  font-size: 0.8em;
  color:#a6a6a6;
  overflow: hidden;
  transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;


}

.containerlogo {
  width: 200px;
  background: #fff;
  margin: 0 0 0 10px;
  float: left;
}
.headerlogo {
  width: 40px;
  height: 30px;
  border: 1px solid black;
  padding-top: 10px;
  font-size: 1.1em;
  color: #a6a6a6;
  text-align: center;
  background: #ffffff no-repeat;
  background-position: right 0px;
  cursor: pointer;
}   

#headerlogo {
  width: 40px;
  height: 40px;
  margin: 0 0 0 10px;
  position: relative;
  border: 1px solid black;
  float: left;
}

#headerlogohover {
 display:none;
}


#headerlogo:hover #headerlogohover {
    display:block;
    width: 760px;
  height: 40px;
  margin-top: -40px;
  margin-left: 60px;
  border: 0px solid black;
  font-size: 0.9em;
  overflow: hidden;
  transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;

  }
  
.collapsed .headerlogo {
  background: #fff;
  margin-top: 0px;
}



#hoverlogooffshooting {
    display:none;
}

#logooffshooting {
  width: 40px;
  height: 40px;
  margin: 0 0 0 8px;
  position: relative;
  border: 1px solid black;
  float: right;
}


#logooffshooting:hover #hoverlogooffshooting {
    display:block;
    width: 760px;
  height: 40px;
  margin-top: -40px;
  margin-left: -760px;
  border: 0px solid black;
  font-size: 0.9em;
  overflow: hidden;
  transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;

}



.contentlogo {
  width: 760px;
  height: 40px;
  margin-top: -40px;
  margin-left: 48px;
  border: 0px solid black;
  font-size: 0.9em;
  overflow: hidden;
  transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
}
.collapsed .contentlogo {
  min-height: 0px;
  height: 0px;
}
.logo2 {
  width: 40px;
  height: 40px;
  margin: 0 0 0 60px;
  border: 0px solid black;
  position: absolute;
}
.logonext {
  width: 40px;
  height: 40px;
  margin: 0 0 0 8px;
  position: relative;
  float: right;
}

.logooffshooting {
  width: 40px;
  height: 40px;
  margin: 0 0 0 8px;
  position: relative;
  border: 1px solid black;
  float: right;
}

.box {
  width: 200px;
  height: 200px;
  margin: 0 10px 10px;
  float: left;
  overflow: hidden;
  position: relative;
}
.boxlong {
  width: 200px;
  height: 866px;
  margin: 0 10px 10px;
  float: left;
  overflow: hidden;
  position: relative;
}
.boxoverflow {
  width: 200px;
  height: 200px;
  margin: 0 10px 10px;
  float: left;
  overflow: hidden;
  position: relative;
  overflow-y: visible;
  overflow-x: hidden;
}
.boxoverflowlong {
  width: 866px;
  height: 200px;
  margin: 0 10px 10px;
  float: left;
  overflow: hidden;
  position: relative;
  overflow-y: visible;
  overflow-x: hidden;
}
.boxgrid {
  width: 200px;
  height: 200px;
  margin: 0 10px 10px;
  float: left;
  overflow: hidden;
  position: relative;
  background: black;
  border: 1px solid black;
  line-height: 100%;
}
.boxgridverti {
  width: 200px;
  height: 200px;
  margin: 0 10px 10px;
  float: left;
  overflow: hidden;
  position: relative;
  background: black;
  border: 1px solid black;
  line-height: 100%;
}
.boxgridlong {
  width: 200px;
  margin: 0 10px 10px;
  float: left;
  overflow: hidden;
  position: relative;
  background: black;
  border: 1px solid black;
  line-height: 100%;
  width: 866px;
  height: 200px;
}
.boxvert {
  width: 188px;
  height: 422px;
  margin: 10px 10px 0px;
  float: left;
  overflow: hidden;
  position: relative;
  font-size: 0.8em;
  text-align: justify;
  padding: 6px;
  overflow-y: visible;
  overflow-x: hidden;
}
#boxgridvert {
  width: 188px;
  height: 422px;
  margin: 10px 10px 0px;
  float: left;
  overflow: hidden;
  position: relative;
  font-size: 0.8em;
  text-align: justify;
  padding: 6px;
  overflow-y: visible;
  overflow-x: hidden;
  background: #fff;
  border: 1px solid black;
  line-height: 100%;
}
#boxgridvert2 {
  width: 188px;
  height: 422px;
  margin: 10px 10px 0px;
  float: left;
  overflow: hidden;
  position: relative;
  font-size: 0.8em;
  text-align: justify;
  padding: 6px;
  overflow-y: visible;
  overflow-x: hidden;
  background: #fff;
  border: 1px solid black;
  line-height: 100%;
}
#boxgridvert3 {
  width: 188px;
  height: 422px;
  margin: 10px 10px 0px;
  float: left;
  overflow: hidden;
  position: relative;
  font-size: 0.8em;
  text-align: justify;
  padding: 6px;
  overflow-y: visible;
  overflow-x: hidden;
  background: #fff;
  border: 1px solid black;
  line-height: 100%;
}
#boxgridvert4 {
  width: 188px;
  height: 422px;
  margin: 10px 10px 0px;
  float: left;
  overflow: hidden;
  position: relative;
  font-size: 0.8em;
  text-align: justify;
  padding: 6px;
  overflow-y: visible;
  overflow-x: hidden;
  background: #fff;
  border: 1px solid black;
  line-height: 100%;
}
.boxgridoverflow {
  width: 200px;
  height: 200px;
  margin: 0 10px 10px;
  float: left;
  overflow: hidden;
  position: relative;
  background: black;
  border: 1px solid black;
  line-height: 100%;
  overflow-y: visible;
  overflow-x: hidden;
}
.boxgrid2 {
  width: 200px;
  height: 200px;
  margin: 0 10px 10px;
  float: left;
  overflow: hidden;
  position: relative;
  background: white;
  border: 1px solid black;
  line-height: 100%;
}

.boxgridline2 {
  width: 100%;
  height: 200px;
  padding-top: 100px;
  float: left;
  overflow: hidden;
  position: relative;
  background: white;
  border: 0px solid black;
  line-height: 100%;
}

.boxgrid3 {
  width: 200px;
  height: 200px;
  margin: 0 10px 10px;
  float: left;
  overflow: hidden;
  position: relative;
  background: white;
  border: 1px solid black;
  line-height: 100%;
  height: 644px;
  overflow-y: visible;
  overflow-x: hidden;
}
.boxgrid4 {
  width: 200px;
  height: 200px;
  margin: 0 10px 10px;
  float: left;
  overflow: hidden;
  position: relative;
  background: white;
  border: 1px solid black;
  line-height: 100%;
}
.boxgridpres {
  width: 200px;
  height: 200px;
  margin: 0 10px 10px;
  float: left;
  overflow: hidden;
  position: relative;
  background: white;
  border: 1px solid black;
  line-height: 100%;
}
.boxgridpres p {
  padding: 0 7px;
  color: #000;
  font-weight: bold;
  font-size: .7em;
  text-align: justify;
}
.boxgrid-null {
  width: 200px;
  height: 200px;
  margin: 0 10px 10px;
  float: left;
  overflow: hidden;
  position: relative;
  border: solid 1px #fff;
}
.boxgrid img,
empty img {
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
}
.boxgrid p {
  padding: 0 7px;
  color: #afafaf;
  font-weight: bold;
  font-size: .7em;
  text-align: justify;
}
.streetsampling {
  margin: 0 0 10px 30px;
  width: 866px;
  height: 200px;
  border: 1px solid #000000;
}
.soundtrackinggeo {
  margin: 0 0 10px 30px;
  width: 866px;
  height: 200px;
  border: 1px solid #000000;
}

#streetsamplingtags {
width: 200px;
height: 200px;
    
  }
  
#streetsamplingtags p {
color: #afafaf;
font-size: 0.7em;
font-weight: bold;
padding: 0 7px;
text-align: justify;}


#minutingtags {
width: 200px;
height: 200px;
    
  }
  
#minutingtags p {
color: #afafaf;
font-size: 0.7em;
font-weight: bold;
padding: 0 7px;
text-align: justify;}

#minutingtagsline {
width: 200px;
height: 200px;
overflow: hidden;   
  }
  
#minutingtagsline p {
color: #afafaf;
font-size: 0.7em;
font-weight: bold;
padding: 0 7px;
text-align: justify;}

#fragmentariumclubtags {
width: 200px;
height: 200px;  
  }
  
#fragmentariumclubtags p {
color: #afafaf;
font-size: 0.7em;
font-weight: bold;
padding: 0 7px;
text-align: justify;}

#fragmentariumclubtagsline {
width: 200px;
height: 200px;
overflow: hidden;   
  }
  
#fragmentariumclubtagsline p {
color: #afafaf;
font-size: 0.7em;
font-weight: bold;
padding: 0 7px;
text-align: justify;}

#playerstreet {
  width: 866px;
  height: 200px;
  margin: 0px 0 0 30px;
  position: relative;
  border: 1px solid #000000;
  overflow-y: hidden;
  overflow-x: hidden;
}
#misquoting {
  background: #000000;
}
#journaling {
  background: #000000;
}
#random-phrase {
  margin: 0 0 10px 10px;
  width: 826px;
  /* important to be same as image width */

  height: 420px;
  /* important to be same as image height */

  border: 1px solid #000;
  background-color: #000;
  position: relative;
  overflow: hidden;
  font-size: 3em;
  color: #a6a6a6;
  padding: 20px;
}
#minute {
  background: #fff;
}
#soundgeo {
  background: #fff;
}
#presenting {
  background: #fff;
  color: #000;
}
#minuting {
  width: 866px;
  height: 422px;
  margin: 0 0 10px 10px;
  position: relative;
  border: 1px solid #000000;
}

#streetsamplingplayer {
  width: 866px;
  height: 200px;
  margin: 0 0 10px 10px;
  position: relative;
  border: 1px solid #000000;
  
}

#streetsamplingscroll {
  width: 866px;
  height: 220px;
  margin: 0 0 10px 10px;
  border: 1px solid #000000;
  display: inline-block;
  overflow: auto;
 
            
}

#streetsamplingscroll ul {
float:left;
margin-right:-9999em;
white-space:nowrap;
list-style:none;
}
#streetsamplingscroll li {
margin-top: -10px;
background:white;
text-align:left;
float:left;
display:inline; 
position:relative;

          
}
#streetsamplingscroll img {
border:0;
display:block;

 }


#streetsamplingscroll a:active img, #streetsamplingscroll a:focus img {
border:1px solid #000;
}
#streetsamplingscroll a {
text-decoration:none;
font-weight:bold;
color:#000;
}
#streetsamplingscroll a:active, #streetsamplingscroll a:focus  {
color:#FFF;
}
#streetsamplingscroll span {
background:transparent;
position:relative;
color:#a6a6a6;
font-size: 0.7em;
}




#misquotingscroll {
  width: 644px;
  height: 644px;

  border: 0px solid #000000;
  display: inline-block;
  overflow: auto;
 
            
}

#misquotingscroll ul {
float:left;
margin-right:-9999em;
white-space:nowrap;
list-style:none;
}
#misquotingscroll li {
margin-top: -10px;
background:white;
text-align:left;
float:left;
display:inline; 
position:relative;

          
}
#misquotingscroll img {
border:0;
display:block;
border: 0px solid #000000;

 }


#misquotingscroll a:active img, #streetsamplingscroll a:focus img {
border:1px solid #000;
}
#misquotingscroll a {
text-decoration:none;
font-weight:bold;
color:#000;
}
#misquotingscroll a:active, #misquotingscroll a:focus  {
color:#FFF;
}
#misquotingscroll span {
background:transparent;
position:relative;
color:#a6a6a6;
font-size: 0.7em;
}


#streetsamplingplayer {
  width: 866px;
  height: 200px;
  margin: 0 0 10px 10px;
  position: relative;
  border: 1px solid #000000;
  
}

#minutingscroll {
  width: 866px;
  height: 220px;
  margin: 0 0 10px 10px;
  border: 1px solid #000000;
  display: inline-block;
  overflow: auto;
 
            
}

#minutingscroll ul {
float:left;
margin-right:-9999em;
white-space:nowrap;
list-style:none;
}
#minutingscroll li {
margin-top: -10px;
background:white;
text-align:left;
float:left;
display:inline; 
position:relative;

          
}
#minutingscroll img {
border:0;
display:block;

 }


#minutingscroll a:active img, #minutingscroll a:focus img {
border:1px solid #000;
}
#minutingscroll a {
text-decoration:none;
font-weight:bold;
color:#000;
}
#minutingscroll a:active, #minutingscroll a:focus  {
color:#FFF;
}
#minutingscroll span {
background:transparent;
position:relative;
color:#a6a6a6;
font-size: 0.7em;
}


#fragmentariumclubscroll_with_flexcroll {
  width: 100%;
  height: 280px;
  margin: 0 0 10px 10px;
  border: 0px solid #000000;
  display: inline-block;
            
}

#fragmentariumclubscroll_with_flexcroll ul {
float:left;
margin-right:-9999em;
white-space:nowrap;
list-style:none;    
}
#fragmentariumclubscroll_with_flexcroll li {
margin-top: -10px;
background:white;
text-align:left;
float:left;
display:inline; 
position:relative;

          
}
#fragmentariumclubscrollimg_with_flexcroll {
border:0;
display:block;

 }
 
 }
#fragmentariumclubscroll_with_flexcroll img {
border:0;
display:block;

 }


#fragmentariumclubscroll_with_flexcroll a:active img, #minutingscroll_with_flexcroll a:focus img {
border:1px solid #000;
}
#fragmentariumclubscroll_with_flexcroll a {
text-decoration:none;
font-weight:bold;
color:#000;
}
#fragmentariumclubscroll_with_flexcroll a:active, #fragmentariumclubscroll_with_flexcroll a:focus  {
color:#FFF;
}
#fragmentariumclubscroll_with_flexcroll span {
background:transparent;
position:relative;
float:left;
color:#a6a6a6;
font-size: 0.7em;
}





#fragmentariumclubscroll {
  width: 100%;
  height: 280px;
  margin: 0 0 0 0;
  border: 0px solid #000000;
  display: inline-block;
  overflow-y:hidden;

          
}

#fragmentariumclubread {
  width: 100%;
  height: 60%;
  margin: 0 0 0 0;
  border: 0px solid #000000;
  position:fixed;
  display: inline-block;
  overflow-y: scroll;



          
}


#fragmentariumclubscroll ul {
float:left;
margin-right:-9999em;
white-space:nowrap;
list-style:none;
}
#fragmentariumclubscroll li {
margin-top: -10px;
background:white;
text-align:left;
float:left;
display:inline; 
position:relative;

          
}

 
#fragmentariumclubscroll img {
border:0;
display:block;


 }


#fragmentariumclubscroll a:active img, #minutingscroll a:focus img {
border:1px solid #A6A6A6;
}

#fragmentariumclubscroll a {
text-decoration:none;
font-weight:bold;
color:#000;
}
#fragmentariumclubscroll a:active, #fragmentariumclubscroll a:focus  {
color:#FFF;

}
#fragmentariumclubscroll span {
background:transparent;
position:relative;
float:left;
color:#a6a6a6;
font-size: 0.7em;
}






#minutingscrollline {
  width: 100%;
  height: 220px;
  margin: 0 0 10px 10px;
  border: 0px solid #000000;
  display: inline-block;
  overflow: auto;
 
            
}

#minutingscrollline ul {
float:left;
margin-right:-9999em;
white-space:nowrap;
list-style:none;
}
#minutingscrollline li {
margin-top: -10px;
background:white;
text-align:left;
float:left;
display:inline; 
position:relative;

          
}
#minutingscrollline img {
border:0;
display:block;

 }


#minutingscrollline a:active img, #minutingscrollline a:focus img {
border:1px solid #000;
}
#minutingscrollline a {
text-decoration:none;
font-weight:bold;
color:#000;
}
#minutingscrollline a:active, #minutingscroll a:focus  {
color:#FFF;
}
#minutingscrollline span {
background:transparent;
position:relative;
color:#a6a6a6;
font-size: 0.7em;
}


#soundtrackinggeo {
  width: 866px;
  height: 200px;
  margin: 0 0 10px 10px;
  position: relative;
  border: 1px solid #000000;
}
#reflecting {
  width: 846px;
  height: 622px;
  padding: 10px;
  margin: 0 0 10px 10px;
  position: relative;
  border: 1px solid #000000;
  overflow-x: hidden;
  overflow-y: auto;
  text-align: justify;
  font-size: 0.8em;
}
#reflecting1 {
  width: 846px;
  height: 622px;
  padding: 10px;
  margin: 0 0 10px 10px;
  position: absolute;
  border: 1px solid #000000;
  overflow-x: hidden;
  overflow-y: auto;
  text-align: justify;
  font-size: 0.8em;
}
.no-margin {
  height: 650px;
}
.bonsai {
  display: inline;
  float: left;
  margin-left: 0;
}
.bonsai240 {
  display: inline;
  float: left;
  margin-left: 0;
  width: 220px;
}
.bonsai2401 {
  display: inline;
  float: left;
  margin-left: 0;
  width: 220px;
  margin-left: 22px;
}
.bonsai2401a {
  display: inline;
  float: left;
  margin-left: 0;
  width: 220px;
  height: 644px;
  margin-left: 22px;

}
.bonsaiverti {
  display: inline;
  float: left;
  margin-left: 0;
  width: 220px;
  margin-left: 22px;
}
.bonsai2402 {
  display: inline;
  float: left;
  margin-left: 0;
  width: 220px;
  margin-right: 2px;
}
.bonsai480 {
  display: inline;
  float: left;
  margin-left: 0;
  width: 460px;
}
.bonsai481 {
  display: inline;
  float: left;
  margin-left: 0;
  width: 644px;
  height: 644px;
}
.bonsai488 {
  display: inline;
  float: left;
  margin-left: 0;
  width: 866px;
  height: 644px;
}
.bonsai482 {
  display: inline;
  float: left;
  margin-left: 0;
  width: 644px;
  height: 644px;
  margin: 0 0 0 10px;
  border: solid 1px #000000;
  overflow: hidden;
  position: realtive;
  background-color: #fff;
}
.float-right {
  float: right !important;
  margin: 0 36px 0 ;
}
.float-right1 {
  float: right !important;
  margin: 0 30px 0 ;
}
#selftrackingbox1 {
  width: 644px;
  height: 644px;
  margin: 0 0 0 10px;
  border: solid 1px #000000;
  overflow: hidden;
  position: absolute;
}

#mappingbox1 {
  width: 644px;
  height: 644px;
  margin: 0 0 0 10px;
  border: solid 1px #000000;
  overflow: hidden;
  position: absolute;
}

#initiatives {
  width: 644px;
  height: 644px;
  margin: 0 0 0 10px;
  border: solid 1px #000000;
  overflow: hidden;
  position: absolute;
  text-align: justify;
}
#initiativeswrap {
  width: 662px;
  height: 644px;
  left: 0px;
  right: -30px;
  bottom: 0px;
  top: 0px;
  position: absolute;
  overflow-y: scroll;
  overflow-x: hidden;
}
#initiativestext {
  width: 610px;
  height: 644px;
  padding-left: 16px;
  padding-right: 16px;
  bottom: 10px;
  top: 16px;
  position: absolute;
  text-align: justify;
  font-size: .8em;
}
.linking {
  color: #000;
  font-size: .8em;
  text-decoration: none;
  background-color: none;
}
#minorarchiviststext {
  width: 610px;
  height: 644px;
  padding-left: 16px;
  padding-right: 16px;
  bottom: 10px;
  top: 16px;
  position: absolute;
  text-align: justify;
  font-size: .8em;
}
#beaware {
  margin-top: 200px;
  font-size: .8em;
  text-align: center;
  color: #a6a6a6;
}
#authobserver {
  width: 660px;
  height: 644px;
  margin: 0px 0px 0px 0px;
  position: absolute;
  text-align: justify;
  font-size: .8em;
  overflow-y: hidden;
  overflow-x: hidden;
}
#videopassing {
  width: 866px;
  height: 422px;
  margin: 20px 0 0 10px;
  position: absolute;
  border: 1px solid #000000;
  overflow-y: visible;
  overflow-x: hidden;
}
#facing1 {
  width: 644px;
  height: 644px;
  margin: 0 0 0 10px;
  border: solid 1px #000000;
  overflow: hidden;
  position: absolute;
}
#pages {
  width: 644px;
  height: 644px;
  margin: 0 0 0 10px;
  border: solid 1px #000000;
  overflow: hidden;
  position: absolute;
}
div#selftrackingbig {
  float: right;
  width: 200px;
  height: 200px;
  margin: 10px 0 0 0;
}
#map {
  border: 1px solid #000;
  width: 866px;
  height: 422px;
  margin: 0 0 10px 10px;
  position: relative;
}
.ml-20 {
  margin: 0 0 0 20px;
}
#side_bar {
  width: 200px;
  height: 200px;
  margin: 0 10px 10px;
  float: left;
  overflow: hidden;
  color: #000;
  font-size: .8em;
  background-color: #a3a2a2;
  text-align: left;
  padding-left: 10px;
  border: 1px solid #000;
  overflow: auto;
  position: relative;
  width: 190px;
}
.accordionempty {
  width: 200px;
  height: 200px;
  margin: 0 10px 10px;
  float: left;
  border: 1px solid #000;
  position: relative;
  overflow: auto;
}
#interpreting {
  margin: 0 0 10px 10px;
  width: 866px;
  /* important to be same as image width */

  height: 420px;
  /* important to be same as image height */

  border: 1px solid #000;
  padding-top: 150px;
  background-color: #fff;
  position: relative;
  overflow: hidden;
}
#s3slider {
  margin: 0 0 10px 10px;
  width: 866px;
  /* important to be same as image width */

  height: 420px;
  /* important to be same as image height */

  border: 1px solid #000;
  background-color: #000;
  position: relative;
  overflow: hidden;
  font-size: 1.8em;
}
#s3sliderContent {
  width: 866px;
  /* important to be same as image width or wider */

  height: 420px;
  position: relative;
  top: 0;
  margin-left: 0;
  font-size: .7em;
  font-style: italic;
}
.s3sliderImage {
  float: left;
  position: relative;
  display: none;
}
.s3sliderImage span {
  position: absolute;
  left: 0;
  font-size: .6em;
  padding: 10px 13px;
  width: 866px;
  height: 16px;
  background-color: transparent;
  color: #fff;
  display: none;
  /* important */

  bottom: 0;
}
#s3slidera {
  margin: 0 0 10px 0px;
  width: 644px;
  /* important to be same as image width */

  height: 644px;
  /* important to be same as image height */

  border: 0px solid #000;
  background-color: #fff;
  position: relative;
  overflow: hidden;
  font-size: 1.8em;
}
#s3sliderContenta {
  width: 644px;
  /* important to be same as image width or wider */
  
  height: 644px;
  position: relative;
  top: 0;
  margin-left: 0;
  font-size: .7em;
  font-style: italic;
}
.s3sliderImagea {
  float: left;
  position: relative;
  display: none;
}
.s3sliderImagea span {
  position: absolute;
  left: 0;
  font-size: .6em;
  padding: 10px 13px;
  width: 644px;
  height: 16px;
  background-color: #fff;
  color: #fff;
  display: none;
  /* important */

  bottom: 0;
}

#s3sliderStreet {
	margin: 0 0 0 0;
	width: 644px; /* important to be same as image width */
	height: 644px; /* important to be same as image height */
	border: 0px solid #000;
	background-color: #fff;
	position: relative;
	overflow: hidden;
	font-size: 1.8em;
}
#s3sliderContentStreet{
	width: 644px; /* important to be same as image width or wider */
	height: 644px;
	position: relative;
	top: 0;
	margin-left: 0;
	font-size: .7em;
	font-style: italic;
}
.s3sliderImageStreet {
	float: left;
	position: relative;
	display: none;
	margin-left: 0px;
}
.s3sliderImageStreet span {
	position: absolute;
	left: 0;
	font-size: .6em;
	padding: 10px 13px;
	width: 644px;
	height: 16px;
	background-color: transparent;
	color: #fff;
	display: none; /* important */
	bottom: 0;
}



.scrollable {
  position: relative;
  overflow: hidden;
  height: 665px;
  width: 866px;
}
.scrollable .items {
  position: absolute;
  height: 20000em;
}
/* --- From vertical.css ---*/
#shade {
  width: 420px;
  height: 444px;
  position: absolute;
}
.transbox {
  margin: 0;
  padding: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 120px;
  background-color: #ffffff;
  opacity: .8;
}
.vertical {
  height: 420px;
  width: 644px;
  margin: 34px 0 0 10px;
  position: absolute;
  overflow: hidden;
  border: 1px solid #000;
}
/* root element for scrollable items */
.items {
  position: absolute;
  height: 20000px;
  margin: 5px;
}
/* single scrollable item */
.item {
  height: 260px;
  width: 866px;
  margin: 5px 0;
  padding: 10px;
  display: block;
  font-size: .8em;
  border-bottom: 1px solid #ddd;
  text-align: justify;
}
.movie {
  width: 320px;
  margin: 0;
  overflow: hidden;
}
/* elements inside single item */
.movie-text {
  width: 280px;
  float: right;
  overflow: hidden;
  padding: 0 10px;
  font-size: 0.9em;
}
.movie-text img {
  float: left;
  margin-right: 20px;
  height: 320px;
  width: 256px;
}
.movie-text h3 {
  margin: 0 0 5px 0;
  font-size: 16px;
  color: #456;
  font-weight: normal;
  text-align: justify;
}
/* the action buttons above the scrollable */
#actions {
  width: 640px;
  font-size: 0.8em;
  margin: 10px 0 0 10px;
  text-align: justify;
}
#actions a {
  margin-left: auto;
  margin-right: auto;
  font-size: 0.8em;
  cursor: pointer;
  color: #666;
}
#actions a:hover {
  text-decoration: underline;
  color: #000;
}
.disabled {
  visibility: hidden;
}
.next {
  float: right;
}
.next1 {
  float: left;
}
.next3 {
  float: right;
}
/* --- Probably unused --- */
.boxcaption {
  float: left;
  position: absolute;
  background: #000;
  height: 100px;
  width: 100%;
  opacity: .8;
}
.captionfull .boxcaption {
  top: 260px;
  left: 0;
}
.caption .boxcaption {
  top: 220px;
  left: 0;
}
.boxgrid1 {
  width: 200px;
  height: 200px;
  margin: 10px;
  float: left;
  background: #000;
  border: 1px solid #8399AF;
  overflow: hidden;
  position: relative;
}

.boxgriline {
  width: 200px;
  height: 200px;
  margin: 10px;
  float: left;
  background: #000;
  border: 0px solid #8399AF;
  overflow: hidden;   
  position: relative;
}

.boxgridwhite {
  width: 200px;
  height: 200px;
  margin: 0 10px 10px;
  float: left;
  overflow: hidden;
  position: relative;
  background: #fff;
  border: 1px solid black;
  line-height: 100%;
}

.boxgridwhite p {
    color: #afafaf;
    font-size: 0.7em;
    font-weight: bold;
    padding: 0 7px;
    text-align: justify;
  }
  
.boxgrid1 img {
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
}
.boxgrid1 p {
  padding: 0 10px;
  color: #afafaf;
  font-weight: bold;
  font-size: 0.5em;
}
.boxcaption {
  float: left;
  position: absolute;
  background: #000;
  height: 100px;
  width: 100%;
  opacity: .8;
}
.captionfull .boxcaption {
  top: 260px;
  left: 0;
}
.caption .boxcaption {
  top: 220px;
  left: 0;
}
.selftracking {
  width: 420px;
  height: 420px;
  margin-top: 10px;
  float: left;
  background: #161613;
  opacity: 0.8;
  border: solid 1px #8399AF;
  overflow: hidden;
  position: relative;
  display: block;
}
.selftrackingtext,
.selftrackingtext1,
.selftrackingtext2,
.selftrackingtext3,
.selftrackingtext4 {
  width: 200px;
  height: 200px;
  margin: 0 10px 10px;
  float: left;
  background: #000000;
  overflow: hidden;
  position: relative;
}
div#interpretingtext {
  width: 200px;
  height: 200px;
  margin: 434px 0 0 0;
  position: absolute;
}
div#interpretingtext1 {
  width: 200px;
  height: 200px;
  margin: 434px 0 0 222px;
  position: absolute;
}
div#interpretingtext2 {
  width: 200px;
  height: 200px;
  margin: 434px 0 0 444px;
  position: absolute;
}
div#minuting2 {
  width: 200px;
  height: 200px;
  margin: -10px 0 0 444px;
  position: absolute;
}
div#minuting3,
div#minuting4 {
  width: 422px;
  height: 640px;
  margin: 20px 0 0 10px;
  position: absolute;
  border: 1px solid #000000;
  overflow-y: visible;
  overflow-x: hidden;
}
div#selftrackingbig_zoom {
  float: right;
  width: 200px;
  height: 200px;
  margin: 10px 0 0 0;
}
div#street {
  border: 1px solid black;
  width: 866px;
  height: 200px;
  margin: 230px 0 0 10px;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
}
/* Container DIV - automatically generated */
.simply-scroll-container {
  position: relative;
}
/* Clip DIV - automatically generated */
.simply-scroll-clip {
  position: relative;
  overflow: hidden;
  z-index: 2;
}
/* UL/OL/DIV - the element that simplyScroll is inited on
 Class name automatically added to element */
.simply-scroll-list {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  overflow: hidden;
  margin: 0;
  padding: 0;
  list-style: none;
}
.simply-scroll-list li {
  padding: 0;
  margin: 0;
  list-style: none;
}
.simply-scroll-list li img {
  border: none;
  display: block;
}
.simply-scroll {
  width: 866px;
  height: 200px;
  margin-bottom: 1em;
}
/* Clip DIV */
.simply-scroll .simply-scroll-clip {
  width: 866px;
  height: 200px;
}
/* Explicitly set height/width of each list item */
.simply-scroll .simply-scroll-list li {
  float: left;
  /* Horizontal scroll only */

  width: 267px;
  height: 200px;
}
div#sidebar {
  width: 200px;
  height: 200px;
  margin: 0;
  border: solid 1px #000;
  position: relative;
  overflow: auto;
}
#traversing1 {
  width: 644px;
  height: 644px;
  margin: 0 0 0 10px;
  border: solid 1px #000000;
  overflow: hidden;
  position: absolute;
}
#basic {
  margin: 0 0 0 10px;
  border: solid 1px #000000;
  overflow: hidden;
  position: realtive;
}
.right {
  width: 200px;
  height: 90px;
  margin: 0;
  border: 0px solid #fff;
  position: absolute;
  overflow: auto;               
}


div#jp_playlist_2 {
  width: 866px;
  height: 320px;
  overflow-y: visible;
  overflow-x: hidden;
  
}

div#jp_playlist_3 {
  width: 866px;
  height: 120px;
  overflow-y: visible;
  overflow-x: hidden;
  
  
}

.jp-playlist3{
  height: 120px;              
}
div#next {
  font-family: "helvetica";
  font-size: 0.7em;
  text-align: justify;
  color: #A6A6A6;
  padding: 10px 10px 10px 10px;
  width: auto;
  height: 200px;
  display: inline;
  position: absolute;
  float: left;
  overflow-x: hidden;
  overflow-y: visible;
}
div#next3 {
  font-family: "helvetica";
  font-size: 0.7em;
  text-align: justify;
  color: #A6A6A6;
  padding: 10px 10px 10px 10px;
  width: auto;
  height: 620px;
  display: inline;
  position: absolute;
  float: left;
  overflow-x: hidden;
  overflow-y: auto;
}
div#next4 {
  font-family: "helvetica";
  font-size: 0.7em;
  text-align: justify;
  color: #A6A6A6;
  padding: 10px 10px 10px 10px;
  width: auto;
  height: 620px;
  display: inline;
  position: absolute;
  float: right;
  overflow-x: hidden;
  overflow-y: auto;
}

div#nextline {
  font-family: "helvetica";
  font-size: 0.7em;
  text-align: justify;
  color: #A6A6A6;
  padding: 10px 10px 10px 10px;
  width: auto;
  height: auto;
  display: inline;
  position: absolute;
  overflow-x: hidden;
  overflow-y: auto;
  margin-bottom: 10px;
}
div#minorarchivistslist {
  font-family: "helvetica";
  font-size: 0.7em;
  text-align: justify;
  color: #A6A6A6;
  padding: 10px 10px 10px 10px;
  width: auto;
  height: 620px;
  display: inline;
  position: absolute;
  float: left;
  overflow-x: hidden;
  overflow-y: auto;
}
div#about {
  font-family: "helvetica";
  font-size: 0.7em;
  text-align: justify;
  color: #A6A6A6;
  padding: 10px 10px 10px 10px;
  width: auto;
  height: 620px;
  display: inline;
  position: absolute;
  float: left;
  overflow-x: hidden;
  overflow-y: auto;
}
.next a:link {
  color: #A6A6A6;
}
div#next1 {
  font-family: "helvetica";
  font-size: 0.7em;
  text-align: justify;
  color: #A6A6A6;
  padding: 10px 10px 10px 10px;
  width: auto;
  height: 200px;
  display: inline;
  position: absolute;
  float: left;
  overflow-x: hidden;
  overflow-y: visible;
}
.next1 a:link {
  color: #A6A6A6;
}
#splashscreen1 {
  width: 846px;
  height: 622px;
  padding: 10px;
  margin: 0 0 10px 10px;
  position: fixed;
  border: 1px solid #000000;
  text-align: justify;
  font-size: 0.8em;
  background: #a6a6a6;
  opacity: 0.4;
  filter: alpha(opacity=40);
  -moz-border-radius: 12px;
  border-radius: 12px;
  z-index: 9;
}


 /* Dropdown Button */
.dropbtn {
    background-color:#fff;
    cursor: pointer;
    position: fixed;
  left: 8px;
  top:8px;
  width: 64px;
  height: 64px;
  line-height:64px;
  text-align:center;
  font-family: Lucida Grande, Helvetica, Arial, sans-serif;
  font-size:calc(3px + 1vw); 
  color:#A6A6A6;
  border: 1px solid #A6A6A6;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
    background-color: #fff;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
      display: none;
  
      position: fixed;
  left:8px;
  top:8px;
  background-color:#fff;
    border: 1px solid #A6A6A6;

    min-width: 160px;
    height:auto;
    max-height:600px;
    z-index: 9;
    overflow-y: scroll;
}
}

/* Links inside the dropdown */
.dropdown-content a {
    color: #a6a6a6;
    padding: 4px 10px;
    text-decoration: none;
    display: block;
    
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;} 




 /* Dropdown Button */
.dropbtn2 {
    background-color:#fff;
    cursor: pointer;
    position: fixed;
  right: 8px;
  top:8px;
  width: 64px;
  height: 64px;
  line-height:64px;
  text-align:center;
  font-family: Lucida Grande, Helvetica, Arial, sans-serif;
  font-size:calc(3px + 1vw); 
  color:#A6A6A6;
  border: 1px solid #A6A6A6;
}

/* Dropdown button on hover & focus */
.dropbtn2:hover, .dropbtn2:focus {
    background-color: #fff;
}

/* The container <div> - needed to position the dropdown content */
.dropdown2 {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown2-content {
      display: none;
  
      position: fixed;
  right:8px;
  top:8px;
  background-color:#fff;
    border: 1px solid #A6A6A6;

    min-width: 160px;
    height:auto;
    max-height:600px;
    z-index: 9;
    overflow-y: scroll;
}
}

/* Links inside the dropdown */
.dropdown2-content a {
    color: #a6a6a6;
    padding: 4px 10px;
    text-decoration: none;
    display: block;
    
}

/* Change color of dropdown links on hover */
.dropdown2-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;} 


/* Dropdown Button */
.dropbtn3 {
      background-color:#fff;
    cursor: pointer;
    position: fixed;
  right: 8px;
  bottom:8px;
  width: 66px;
  height: 66px;
  line-height:64px;
  text-align:center;
  font-family: Lucida Grande, Helvetica, Arial, sans-serif;
  font-size:calc(3px + 1vw); 
  color:#A6A6A6;
  border: 1px solid #A6A6A6;
  
}

/* Dropdown button on hover & focus */
.dropbtn3:hover, .dropbtn3:focus {
    background-color: none;
}

/* The container <div> - needed to position the dropdown content */
.dropdown3 {
    position: relative;
    display: inline-block;
    background-color:#fff;
}

/* Dropdown Content (Hidden by Default) */
.dropdown3-content {
      display: none;
  
      position: fixed;
  right:8px;
  padding:10px;
  bottom:8px;
  background-color:#fff;
    border: 1px solid #A6A6A6;

    min-width: 160px;
    height:auto;
    max-height:600px;
    z-index: 9;
    overflow-y: scroll;
    
     opacity: 0.8;
  filter: alpha(opacity=80);
  -moz-border-radius: 12px;
  border-radius: 12px;
  z-index: 9;
}
}

/* Links inside the dropdown */
.dropdown3-content a {
    color: #a6a6a6;

    text-decoration: none;
    display: block;
    
}


.flexindex-container {
  display: flex;
  justify-content: center;
  background-color: none;  
}

.flexindex-container > div {
flex:50%;


}


.wrappa
{
    float:left; 
    position: relative;
    width: 25%; 
    height:auto; 
    
 padding-bottom : 30%; /* = width for a 1:1 aspect ratio */
    margin-right:2%;
    margin-left:2%;
    
  
    overflow:hidden;
}

.quadratto
  {
 float:cente;
    position: absolute;
  overflow:hidden;



  }
  
 #player-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  z-index: 999;
}


  video { 
   width:100%;
   max-width:720px;
   height:auto;
}
   

/* Change color of dropdown links on hover */
.dropdown3-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}