@charset "utf-8";
@charset "utf-8";
/* CSS Document */
@font-face
{
	font-family:titlefont;
	src:url(../fonts/GalaxieCassiopeia-Bold.ttf);
	src:url(../fonts/GalaxieCassiopeia-Bold.otf);
	src:url(../fonts/GalaxieCassiopeia-Bold.eot);
	src:url(../fonts/GalaxieCassiopeia-Bold.svg);
	src:url(../fonts/GalaxieCassiopeia-Bold.woff);
}
@font-face
{
	font-family:subhead;
	src:url(../fonts/kievit-regular.ttf);
	src:url(../fonts/kievit-regular.otf);	
	src:url(../fonts/kievit-regular.eot);	
	src:url(../fonts/kievit-regular.woff);
	
}
@font-face
{
	font-family:headerfont;
	src:url(../fonts/kievit_Bold.ttf);
	src:url(../fonts/kievit_Bold.otf);
	src:url(../fonts/kievit_Bold.eot);	
	src:url(../fonts/kievit_Bold.woff);	
}
.static
{
	font-family:headerfont;
	color:#000;
}
body {	
	-webkit-touch-callout: none;
	-webkit-user-select: none;	
	-webkit-user-modify: none;
	-webkit-highlight: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	background:#fff;	
	overflow:hidden;
	margin:0;
}
#main{margin:auto;left:0px;right:0px;position:absolute;overflow:hidden;}
.main
{
	position:absolute;
	top:0px;
	left:0px;
	width:97.5%;
	height:768px;
	right:0px;
	margin:auto;
	background:#e5e5e5;
	overflow:hidden;	
}
.startscreen
{
	display:block;
}
.bannerhead
{
	background:url(../images/parliamo_lv2_branding_banner.png);
	background-size: 100% 100%;
	width:100%;
	border:0px solid;
	position:absolute;
	top:-1%;
}

p{font-family:subhead;font-size:85%;}
.titletext
{
	font-family:titlefont;
	position:absolute;
	top:7.5%;
	left:8%;
	font-size:25px;
}

.subbanner
{
	font-family:headerfont;
	position:absolute;
	width:100%;	
	position:absolute;left:22%;
}

#boxanim
{
	position:absolute;
	top:5%;
	left:7.5%;
	height:36%;
	width:33%;
	display:none;
	z-index:0;
}
.subtitle
{
	font-family:subhead;
	position:absolute;
	top:11%;
	left:5%;	
	color:#fff;
	font-size:300%;
}
.startmain
{
	width:1024px;
	left:0px;
	position:absolute;
	height:550px;
	top:220px;
	width:100%;
	background:#eaeaea;
}
.startpara
{
	position:absolute;
	top:1%;
	left:27%;
	width:46%;
	font-family:subhead;
	font-size:300%;
	line-height:115%;
}
.startimage {
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    top: 35%;
    width: 30%;
}

.homestart {
    background:#808080;
    color: #fff;
    cursor: pointer;    
    font-size: 280%;
    height: 6.5%;
    left: 0;
    margin: 0 auto;
    padding-top: 0.6%;
    position: absolute;
    right: 0;
    text-align: center;
    top: 55%;
    width: 20%;
	line-height:115%;
}

.replay {
    background:#666666;
    color: #fff;
    cursor: pointer;    
    font-size: 280%;
    height: 5%;
    left: 40%;
    margin: 0 auto;
    padding-top: 0.7%;
    position: absolute;
    right: 0;
    text-align: center;
    top: 40%;
    width: 20%;
	line-height:120%;
}
.replay:hover{background:#60a8ad }

.bannerNumber
{
	position:absolute;
	background:url('../images/parliamo_pagenumber.png');
	top:19.4%;
	left:19%;			
	width:5.6%;
	height:8%;
	background-size:100% 100%;

}
.homestart:hover
{
	background:#60a8ad;
}
.lefttopnav
{
	position:absolute;
	width:100%;
	height:8%;
	top:4%
}
.intro
{
	width:10.7%;
	height:62%;
	background:url(../images/parliamo_intro.png);
	background-size:100% 100%;	
	cursor:pointer;
}
.intro:hover
{
	background:url(../images/parliamo_intro_hover.png);
	background-size:100% 100%;	
}
.bookmarks
{
	width:18%;
	height:100%;
	background:url(../images/parliamo_bookmarks.png);
	background-size:100% 100%;	
	position:absolute;
	top:0%;
	left:8.8%;
	cursor:pointer;
}
.bookmarks:hover
{
	background:url(../images/parliamo_bookmarks_hover.png);	
	background-size:100% 100%;	
}
.animationcontainer
{
	position:absolute;
	top:10px;
	width:100%;
	height:720px;	
	overflow:hidden;	
}
.animationcontainer img
{
width:100%;
}
.buttontools
{
	position:absolute;
	top:93.9%;
	width:100%;
	height:6.2%;
	background:#000;
	opacity:1;
	z-index:1;
}
.thumbnails
{
	position:absolute;
	top:76%;	
	width:100%;
	height:100%;	
	overflow:hidden;
	background:#000;
}
.overlaydiv{background:#000;width:100%;height:95%;position:absolute;top:0%;opacity:0.6;display:none}
.thumbleftarrow
{
	position:absolute;
	top:5.5%;
	left:0%;
	width:4%;height:8.5%;
	background:url(../images/thumbnails/previousslide.png);
	background-size:100% 100%;	
	opacity:0.7;
	cursor:pointer;
}
.thumbleftarrow:hover
{
	opacity:1;
}
.thumbrhttarrow
{
	position:absolute;
	top:5.5%;
	right:0%;
	background:url(../images/thumbnails/nextslide.png);
	background-size:100% 100%;
	width:4%;height:8.5%;
	opacity:0.7;
	cursor:pointer;
}
.thumbrhttarrow:hover
{
	opacity:1;
}
.thumbrail
{
	position:absolute;
	left:0%;
	width:100%;
	height:22%;
}

.soundoffbtn
{
	background:url(../images/tools/parliamo_soundoff.svg);
	background-size:100% 100%;
	width:3.5%;
	height:68%;
	position:absolute;
	top:18.5%;
	left:4%;
	cursor:pointer;
	display:none;
}
.soundoffbtn:hover
{
	background:url(../images/tools/parliamo_soundoff_hover.svg);	
	background-size:100% 100%;
}
.soundbtn
{
	background:url(../images/tools/parliamo_soundon.svg);
	background-size:100% 100%;
	width:3.5%;
	height:68%;
	position:absolute;
	top:18%;
	left:4%;
	cursor:pointer;
}

.soundbtn:hover
{
	background:url(../images/tools/parliamo_soundon_hover.svg);
	background-size:100% 100%;
}
.sounddisable
{
	background:url(../images/tools/parliamo_soundon_ghost.svg);
	position:absolute;	
	background-size:100% 100%;
	width:3.5%;
	height:68%;
	top:18%;
	left:4%;
    display:none;
}
.stopbtn
{
	background:url(../images/tools/parliamo_stop.svg);
	background-size:100% 100%;
	position:absolute;
	width:2.2%;
	height:50%;
	top:26%;
	left:11%;
	cursor:pointer;
}
.stopbtn:hover
{
	background:url(../images/tools/parliamo_stop_hover.svg);	
	background-size:100% 100%;
}
.restart
{
	background:url(../images/tools/parliamo_backtostart.svg);
	background-size:100% 100%;
	position:absolute;
	width:4%;
	height:60%;
	top:21%;
	left:40%;
	cursor:pointer;
}
.restart:hover
{
	background:url(../images/tools/parliamo_backtostart_hover.svg);	
	background-size:100% 100%;
}
.playbtn
{
	background:url(../images/tools/play.svg);
	background-size:100% 100%;
	width:2.8%;
	height:64%;
	top:18%;
	left:48%;
	position:absolute;
	cursor:pointer;
	border:none;
	display:none;
}
.playDisable
{
	background:url(../images/tools/play_disable.svg);
	background-size:100% 100%;
	width:2.8%;
	height:64%;
	top:18%;
	left:48%;
	position:absolute;	
	border:none;
}
.playbtn:hover
{
	background:url(../images/tools/play_hover.svg);
	background-size:100% 100%;
}
.pausebtn
{
	background:url(../images/tools/pause.png);
	background-size:100% 100%;
	width:2.2%;
	height:60%;
	top:20%;
	left:54%;
	position:absolute;
	display:nonea;
	cursor:pointer;
}
.pauseDisable
{
	background:url(../images/tools/pause_disable.svg);
	background-size:100% 100%;
	width:2.2%;
	height:60%;
	top:20%;
	left:54%;
	position:absolute;
	display:none;
}
.pausebtn:hover
{
	background:url(../images/tools/pause_hover.svg);
	background-size:100% 100%;
}
.speechbtn
{
	background:url(../images/tools/speech.svg);
	background-size:100% 100%;
	width:3.2%;
	height:65%;
	top:17%;
	left:80%;
	position:absolute;
	cursor:pointer;
}
.speechbtn:hover
{
	background:url(../images/tools/speech_hover.svg);
	background-size:100% 100%;
}
.speechalt
{
	background:url(../images/tools/parliamo_speech_hide.png);
	background-size:100% 100%;
	width:3.2%;
	height:65%;
	top:17%;
	left:80%;
	position:absolute;
	cursor:pointer;
	display:none;
}
.speechalt:hover
{
	background:url(../images/tools/parliamo_speech_hide_over.png);
	background-size:100% 100%;
}
.speechdisable
{
	background:url(../images/tools/parliamo_speech_ghost.svg);
	background-size:100% 100%;
	width:3.2%;
	height:65%;
	top:17%;
	left:80%;
	position:absolute;
	display:none;	
}
.fs_btn
{
	background:url(../images/tools/fs_btn.svg);
	background-size:100% 100%;
	width:2.6%;
	height:60%;
	top:20%;
	left:94%;
	position:absolute;
	cursor:pointer;
}
.fs_btn:hover
{
	background:url(../images/tools/fs_btn_hover.png);
	background-size:100% 100%;
}

/* .ext_btn
{
	background:url(../images/tools/fsbtn.png);
	width:25px;height:25px;
	top:10px;
	left:930px;
	position:absolute;
	cursor:pointer;
}*/

.speechtip
{
	font-family:subhead;
	font-size:100%;
	position:absolute;
	left:65%;
	z-index:100000;
	top:88%;
	width:auto;
	height:auto;	
	border-radius:8px;
	color:#fff;
	text-align:center;
	background:#000;
	opacity:0.9;
	padding:2% 1% 2% 1%;
	display:none;
}

.speechtip1
{
	font-family:subhead;
	font-size:100%;
	position:absolute;
	left:80%;
	z-index:100000;
	top:88%;
	width:auto;
	height:auto;	
	border-radius:8px;
	color:#fff;
	text-align:center;
	background:#000;
	opacity:0.9;
	padding:2% 1% 2% 1%;
	display:none;
}

.speechtip2
{
	font-family:subhead;
	font-size:100%;
	position:absolute;
	left:49%;
	z-index:100000;
	top:88%;
	width:auto;
	height:auto;	
	border-radius:8px;
	color:#fff;
	text-align:center;
	background:#000;
	opacity:0.9;
	padding:2% 1% 2% 1%;
	display:none;
}

.speechtip3
{
	font-family:subhead;
	font-size:100%;
	position:absolute;
	left:36%;
	z-index:100000;
	top:88%;
	width:auto;
	height:auto;
	border-radius:8px;
	color:#fff;
	text-align:center;
	background:#000;
	opacity:0.9;
	padding:2% 1% 2% 1%;
	display:none;
}

.speechtip4
{
	font-family:subhead;
	font-size:100%;
	position:absolute;
	left:9%;
	z-index:100000;
	top:88%;
	width:auto;
	height:auto;	
	border-radius:8px;
	color:#fff;
	text-align:center;
	background:#000;
	opacity:0.9;
	padding:2% 1% 2% 1%;
	display:none;
}

.speechtip5
{
	font-family:subhead;
	font-size:100%;
	position:absolute;
	left:88%;
	z-index:100000;
	top:88%;
	width:auto;	
	height:auto;	
	border-radius:8%;
	color:#fff;
	text-align:center;
	background:#000;
	opacity:0.9;
	padding:2% 1% 2% 1%;
	display:none;
}
.speechtip6
{
	font-family:subhead;
	font-size:100%;
	position:absolute;
	left:1%;
	z-index:100000;
	top:88%;
	width:auto;
	height:auto;	
	border-radius:8px;
	color:#fff;
	text-align:center;
	background:#000;
	opacity:0.9;
	padding:2% 1% 2% 1%;
	display:none;
}
.speechtip7
{
	font-family:subhead;
	font-size:100%;
	position:absolute;
	left:57%;
	z-index:100000;
	top:88%;
	width:auto;
	height:auto;	
	border-radius:8px;
	color:#fff;
	text-align:center;
	background:#000;
	opacity:0.9;
	padding:2% 1% 2% 1%;
	display:none;
}
.speechtip8
{
	font-family:subhead;
	font-size:100%;
	position:absolute;
	left:40%;
	z-index:100000;
	top:88%;
	width:auto;
	height:auto;	
	border-radius:8px;
	color:#fff;
	text-align:center;
	background:#000;
	opacity:0.9;
	padding:2% 1% 2% 1%;
	display:none;
}


.thumb_hbtn
{
	position:absolute;
	background:url(../images/tools/showthumbs.svg);
	background-size:100% 100%;
	width:2.6%;
	height:52%;
	top:24%;
	left:87%;
	cursor:pointer;
}
.thumb_hbtn:hover
{
	background:url(../images/tools/showthumbs_hover.svg);
	background-size:100% 100%;
}
.thumb_sbtn
{
	position:absolute;
	background:url(../images/tools/hidethumbs.svg);
	background-size:100% 100%;
	width:2.6%;
	height:52%;
	top:24%;
	left:87%;
	cursor:pointer;
	display:none;
}
.thumb_sbtn:hover
{
	background:url(../images/tools/hidethumbs_hover.svg);
	background-size:100% 100%;
}
.animleft
{
	background:url(../images/left-arrow.svg);
	background-size:100% 100%;
	opacity:1;
	position:absolute;
	left:42%;
	top:20%;
	width:4%;
	height:60%;
	opacity:0.7;
	cursor:default;
}
.animright
{
	background:url(../images/right-arrow.svg);
	background-size:100% 100%;
	opacity:1;
	position:absolute;
	right:37%;
	top:20%;
	width:4%;
	height:60%;
	cursor:pointer;
}

.charleft
{
	background:url(../images/AC0019.png);
	background-size:100% 100%;	
	position:absolute;
	left:-10%;
	top:22%;
	width:26%;
	height:66%;
}

.charright
{
	background:url(../images/AC0020.png);
	background-size:100% 100%;	
	position:absolute;
	
	width:20%;
	height:66%;
}

.charleftin
{
	background:url(../images/AC0041.png);
	background-size:100% 100%;	
	position:absolute;
	left:1.5%;
	top:14%;
	width:38%;
	height:74%;	
}

.speechbubbles
{
	position:absolute;
	width:99%;
	height:100%;	
}
.defaultb
{
	width:170px;height:90px;
	text-align:center;	
	cursor:pointer;
	position:absolute;
}
#activityarrows{display:nonea;position:absolute;width:100%;height:50%}
.txtclass
{
	width:160px;
	height:70px;	
	margin:auto;
	position:absolute;	
	padding:5px;
}
.frameclass
{
	
}
.scrolldiv
{
	position:absolute;width:100%;height:96%;top:2%;left:0%;background:#fff;
}
.frame
{
	width:90%;height:auto;background:#B2B2B2;background-size:100% 100%;font-size:250%;color:#fff;
	padding:2%;border-radius:10px;left:3%;vertical-align:middle;margin:auto;font-family:subhead;line-height:130%;	
}

.grey_left
{
	position:absolute;left:0%;top:0%;background-size:100% 100%;width:555%;height:555%;background:url(../images/greyspeecharrow_left.svg);
	
}

.framearr1,.framearr3,.framearr5,.framearr7,.framearr9,.framearr11,.framearr13,.framearr15,.framearr17,.framearr19
{
  width:5%;
  height: 7%;  
  position:absolute; /*or absolute*/    
  background:url(../images/greyspeecharrow_left.svg);
  background-size:100% 100%;
}
.framearr2,.framearr4,.framearr6,.framearr8,.framearr10,.framearr12,.framearr14,.framearr16,.framearr18,.framearr20
{
  width:5%;
  height: 7%;  
  position:absolute; /*or absolute*/    
  background:url(../images/greyspeecharrow_right.svg);
  background-size:100% 100%;
}
.autoplaydummy
{
	position:absolute;
	background:rgba(153,153,153,0);
	width:100%;
	left:5%;	
	height:90%;
	display:none;
}
.charleftbubble
{
	position:absolute;
	left:9%;
	top:12%;
	width:3%;
	height:5%;
	background:url(../images/melissa.svg);
	background-size:100% 100%;
}
.charrhtbubble
{
	position:absolute;
	right:7.5%;
	top:12%;
	width:3%;
	height:5%;
	background:url(../images/leandro.svg);
	background-size:100% 100%;
}
.img1
{
	position:absolute;background:url(../images/AC0003.png);top:247%;background-size:100% 100%;left:22%;width:55%;height:46%;display:none;
}
.img2
{
	position:absolute;background:url(../images/AC0004.png);top:348%;background-size:100% 100%;left:22%;width:55%;height:46%;
}
.charnameleft
{
	position:absolute;left:6.5%;top:18%;padding-left:0.8%;padding-right:0.8%;width:6%;height:auto;color:#fff;background:#87CD00;font-family:subhead;background-size:100% 100%;text-align:center;
}
.charnamerht
{
	position:absolute;right:5%;top:18%;padding-left:0.8%;padding-right:0.8%;width:6%;height:auto;color:#fff;background:#00CFE5;font-family:subhead;background-size:100% 100%;text-align:center;
}
.replayscreen{position:absolute;width:100%;height:100%;background:rgba(0,0,0,0);display:none;z-index:100000}
.num{position:absolute;left:32%;right:0%;margin:auto;top:13%;color:#fff;font-size:200%;font-family:headerfont}