Teal&Kylie

.familypage img {
  border-radius: 3px;
  -webkit-box-shadow: 2px 2px 4px #cdcdcd;
  -webkit-transition: 1s ease; 
  -moz-transition: 1s ease; 
  -o-transition: 1s ease; 
  -ms-transition: 1s ease; 
  transition: 1s ease;
  filter:alpha(opacity=100); 
  -moz-opacity: 1.0; 
  opacity: 1.0;	
  width: 240px;
  padding: 3px;
  background-color: #ffffff;
  border: dotted #e7e7e7 1px;	
}
.familypage img:hover {
  filter:alpha(opacity=100); 
  -moz-opacity: 0.8; 
  opacity: 0.8;
  width: 240px;
  padding: 3px;
  background-color: #ffffff;
  border: dotted #e7e7e7 1px;
}

.intro { 
  padding: 0 0 20px 0;
  letter-spacing: 1px;
  line-height: 26px;
}
.intro b{ 
  color: #787878;
  text-transform: uppercase; 
  font-family: Karla;
  font-weight: 500;
}
.intro strong{ 
  color: #d26791;
  text-transform: uppercase; 
  font-family: Karla;
  font-weight: 500;  
}
.videotitle { 
  padding: 0 0 20px 0;
  text-transform: uppercase;
  font-size: 90%;
  letter-spacing: 1px;
  font-weight: 400;
  text-align: center;
}
.specialfeatureslist { 
  padding: 2px 20px;
  text-transform: uppercase;
  font-size: 90%;
  letter-spacing: 1px;
  font-weight: 400;
}
.filmdetails { 
  padding: 5px 10px;
  border-bottom: dotted #ededed 1px;
  text-transform: uppercase;
  font-size: 80%;
}
.filmnavigation { 
  padding: 5px 15px;
  border: dotted #ededed 1px;
  text-transform: uppercase;
  font-size: 80%;
}
.lastfilmdetails { 
  padding: 5px 10px;
  text-transform: uppercase;
  font-size: 80%;
}
.lastfilmdetails a, 
.filmdetails a, 
.filmnavigation a { 
  color: #000000;
}
.lastfilmdetails a:hover,
.filmdetails a:hover,
.filmnavigation a:hover{ 
  color: #c53865;    
  letter-spacing: 2px;
}
.socialicon {        
  background: none;
  border: solid #ededed 1px;
  padding: 5px 7px;
  text-align: center;
  font-weight: 200;
  font-size: 90%;
}
.socialicon i{
  width: 15px;    
  font-weight: 200;
}
#filmicon {    
  color: #c53865;     
  background: none;
  border: solid #ededed 0px;
  padding: 3px 5px 3px 0;
  text-align: center;
  font-weight: 200;
  font-size: 120%;
}
#filmicon i{     
  width: 15px;
  font-weight: 200;
}
.medialinks { 
  font-family: Karla;   
  letter-spacing: 1px;
  text-transform: uppercase;
}
.medialinks a {
  font-weight: 500;
  text-transform: uppercase;
}
.trivialist { 
  padding: 10px 0;
  border-bottom: dotted #ededed 1px;
  text-align: justify;
}
.biolist { 
  padding: 5px 0;
  border-bottom: dotted #ededed 1px;
  text-align: justify;
}
.biolist strong{ 
  text-transform: uppercase;
}
.soundtracklist { 
  font-size: 85%;    
  padding: 7px 0;
  border-bottom: dotted #ededed 1px;
}
.castlist { 
  font-size: 75%;    
  padding: 7px;
  line-height: 17px;
}
.castlist b{ 
  text-transform: uppercase;
  font-size: 95%; 
}
.castlist img{
  margin: 0 0 5px 0;
  width: 125px;
  box-shadow: 2px 2px 4px #d1d1d1;
}
.eplist { 
  font-size: 75%;    
  padding: 7px 5px;
  line-height: 16px;
  text-align: center;
  text-transform: uppercase;
}
.eplist b{ 
  text-transform: uppercase;
}
.eplist img{   
  margin: 5px 10px 0 0;
  box-shadow: 2px 2px 4px #d1d1d1;
}
.epguide { 
  font-size: 80%;      
  padding: 5px 0px;
  border-bottom: dotted #ededed 1px;
  text-transform: uppercase;
}
.epguide a{ 
  color: #000000;
}
.epguide a:hover{ 
  color: #c53865;    
}

/* Acordeon styles */
.tab {
  font-size: 85%;    
  position: relative;
  margin-bottom: 1px;
  width: 100%;
  color: #a1a1a1;
  overflow: hidden;
  letter-spacing: 1px;
}
.tab input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
.tab label {
  position: relative;
  display: block;
  padding: 0 0 0 1em;
  background: #000000;
  font-weight: bold;
  line-height: 3;
  cursor: pointer;
  text-transform: uppercase;
}
.blue label {
  background: #f1f1f1;
}
.tab-content {
  max-height: 0;
  overflow: hidden;
  background: #ffffff;
  -webkit-transition: max-height .35s;
  -o-transition: max-height .35s;
  transition: max-height .35s;
}
.blue .tab-content {
  background: #ffffff;
  color: #000000;
}
.tab-content p {
  margin: 1em;
}
/* :checked */
.tab input:checked ~ .tab-content {
  max-height: 100vh;
}
/* Icon */
.tab label::after {
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  width: 3em;
  height: 3em;
  line-height: 3;
  text-align: center;
  -webkit-transition: all .35s;
  -o-transition: all .35s;
  transition: all .35s;
}
.tab input[type=checkbox] + label::after {
  content: "+";
}
.tab input[type=radio] + label::after {
  content: "\25BC";
}
.tab input[type=checkbox]:checked + label::after {
  transform: rotate(315deg);
}
.tab input[type=radio]:checked + label::after {
  transform: rotateX(180deg);
}