* {
  margin: 0;
  padding: 0;
 
}

.bio-circles {
display:block;
margin-top:50px;
margin-bottom:50px;	
}
.circle {	
display:inline-block;
margin:0px 0px 0px 0px;
  vertical-align: top;
  width:13%;
}	

.circle img{	
height:35px;
width:35px;	
margin:0px 1px 0px 1px;
  vertical-align: top;

}
.circle-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
max-width: 100%;
justify-content: space-around;

}

.ctitle{

margin:0px;
padding:0px;

}	

.circle p{

visibility: hidden;
text-decoration:none;
font-size:12px;
margin:0px!important;
padding:0px!important;
width:91px;

text-align:center;
display:inline-flex;
letter-spacing: -0.2px;
 word-wrap: break-word;
}	
.circle a:hover{
text-decoration:none;
color:white;

}	
.circle img:hover {	
opacity:0.6;
}

body { 
  background-color: #000000;
  width: 48%;
  height: 70vh;
  margin: 5em auto 0 auto;
}
@media only screen and (max-width: 600px)  {
	
body { 

  width: 95%;

}	
.circle p{

visibility: visible;
font-size: 6px;
word-wrap: break-word;
width: 45px;
  margin:0px!import;
line-height: 10px;
}
	
}

#MiddleContainer{
	  margin-left:30px;
}


#scroll-list {
  width: 95%;
 
  padding-top: 1em;
  margin-bottom: .1em;
  margin-left:30px;
}



.range-input
{	
margin-bottom:.8em;	
height:2px;
}


input[type=range] {
  height: 21px;
  -webkit-appearance: none;
  margin: 10px 0;
  width: 100%;
  background:black;

}

input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 1px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000;
  background: #ffffff24;
  border-radius: 2px;
  border: 0px solid #000000;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 0px 0px 0px #000000;
  border: 0px solid #FFFFFF;
  height: 12px;
  width: 12px;
  border-radius: 50px;
  background: #A6A6A6;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -7px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #ffffff24;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 1px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000;
  background: #ffffff24;
  border-radius: 2px;
  border: 0px solid #000000;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 0px 0px 0px #000000;
  border: 0px solid #FFFFFF;
  height: 12px;
  width: 12px;
  border-radius: 50px;
  background: #A6A6A6;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 1px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #ffffff24;
  border: 0px solid #000000;
  border-radius: 4px;
  box-shadow: 0px 0px 0px #000000;
}
input[type=range]::-ms-fill-upper {
  background: #ffffff24;
  border: 0px solid #000000;
  border-radius: 4px;
  box-shadow: 0px 0px 0px #000000;
}
input[type=range]::-ms-thumb {
  margin-top: 1px;
  box-shadow: 0px 0px 0px #000000;
  border: 0px solid #FFFFFF;
  height: 12px;
  width: 12px;
  border-radius: 50px;
  background: #A6A6A6;
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: #ffffff24;
}
input[type=range]:focus::-ms-fill-upper {
  background: #ffffff24;
}




.thumbnail {
  display: inline-block;
  position: relative;

  border-radius: 0.2em; 
  padding: 0.2em;
  margin:10px 10px 0px 10px;
  width: 2.1em;
  height: 2em;
}


.thumbnail img{
  max-width:100%;
  padding-bottom:20px;
}
.thumbnail::after {
  position: absolute;
  content: "";
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.active::after {
  background-color: rgba(119, 119, 119, 0.4);
}

.thumbnail:hover::after{
  background-color: rgba(119, 119, 119, 0.6);
}



#embedded-page {
	  padding: 0px 10px 0px 10px!important;

  width: 100%;
  height: 100%;
  }