@charset "UTF-8";
/* CSS Document NEW 2020 */

a:link { 
color: #330033; 
text-decoration: none;
}
a:visited { 
color: #AB29A5; 
text-decoration: none;
} 
a:hover { 
color: #427385;
opacity: .6;
/* color: #FFFFFF; */

text-decoration: none;
} 

#content {
	background-color:#ffffff;
	padding:70px 40px 30px;

}

#juicebox-container {
        margin: 0 auto;
border: 2px solid #ddd;
    }

p.writing{
font-family:Verdana, Arial, Helvetica, sans-serif;
	text-align: center;
	font-size: 14px;
	color: #7d7784;
	margin: 0px 80px;	
line-height: 1.5;
}

p.side_writing{
font-family:Verdana, Arial, Helvetica, sans-serif;
	text-align: justify;
	font-size: 14px;
	color: #7d7784;
	margin: 0px 30px;
line-height: 1.5;	
}


hr.line { 
border-top: 5px dashed #D6EAF8;
margin: 50px auto;

} 

hr.line2 { 
border-top: 3px dashed #330033;
opacity: .2;
margin: 50px auto;

} 

.header {
	position:relative;
	padding: 15px;
}

.imgborder {
display:inline-block;
border: 2px solid #ddd;

}



.centerImage 
{
    display: block;
    margin-left: auto;
    margin-right: auto;
}

P.centering {text-align: center}

.footer {
	font-size:11px;
	color: #a5a4cc;
	padding-top:20px;
	text-align: center;
}



h1 {
	color:#803d8a;
	font-size: 30px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-align: center;
	letter-spacing: -1px;
}
h2{
color:#803d8a;
font-size: 20px;
font-family:Arial, Helvetica, sans-serif;
text-align: center;
letter-spacing: -1px;
}

p.heading {
color: #96509F;
font-size: 15px;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align: center;
letter-spacing: -1px;
line-height: 2 ;
}

video {
  max-width: 100%;
  height: auto;
cursor: pointer;
}


ul#menu{
font-family:Verdana, Arial, Helvetica, sans-serif;
  position:relative;
  top:0;
  width:100%;
  /*height:3em;*/
  margin:0;
  padding:0;
  background:hsla(171,48%,76%,0.74);
  color:#330033;
list_style:none;
text-align:center;

}

ul#menu > li{
  display:inline-block;
  list-style-type:none;
  position:relative;
font-weight: normal;
}

label{
  position:relative;
  display:inline-block;
  padding:0 18px 0 12px;
  line-height:3em;
  transition:background 0.3s;
  cursor:pointer;
font-weight: bold;
}

label:after{
  content:"";
  position:absolute;
  display:block;
  top:50%;
  right:5px;
  width:0;
  height:0;
/*  
border-top:4px solid rgba(255,255,255,.5);
  border-bottom:0 solid rgba(255,255,255,.5);
  border-left:4px solid transparent;
  border-right:4px solid transparent;
*/  
transition:border-bottom .1s, border-top .1s .1s;
  }

label:hover,
input:checked ~ label{background-color: #FFDAB4; color:#96509F;}

input:checked ~ label:after{
  border-top:0 solid rgba(255,255,255,.5);
  border-bottom:4px solid rgba(255,255,255,.5);
  transition:border-top .1s, border-bottom .1s .1s;
}
/*
li a:hover {
display: inline-block;
line-height: 3em;
padding: auto;
background-color: #FFDAB4; 
color:#96509F;
}
*/

/*hide the inputs*/
input{display:none}

/*show the second level menu of the selected voice*/
input:checked ~ ul.submenu{
  max-height:300px;
  transition:max-height 0.3s ease-in;
}

/*style for the second level menu*/
ul.submenu{
  max-height:0;
  padding:0;
  overflow:hidden;
  list-style-type:none;
  background:#444;
  box-shadow:0 0 1px rgba(0,0,0,.3);
  transition:max-height 0.2s ease-out;
  position:absolute;
  min-width:100%;
}

ul.submenu li a{
display:block;
  padding:12px;
  color:#ddd;
  text-decoration:none;
box-shadow:0 -1px rgba(0,0,0,.5) inset;
  transition:background .2s;
  white-space:nowrap;
position: relative;

}

ul.submenu li a:hover{
  background:rgba(0,0,0,.3);
}

/*Animated Gif on Hover

.static {
  position:absolute;
  background: white;
}

.static:hover {
  opacity:0;
}
*/

.image-swap {
    width: 257px;
    height: 342px;
    background-image: url("http://irenakuo.com/content/About_image_1.gif");
    background-size: 100%;
    background-position: center center;
}
.image-swap:hover {
    background-image: url("http://irenakuo.com/content/About_image_2.gif");
}