/*.narrator{
	height:100%;
	width: 40px;
	position:relative;
	order: 4;
	cursor: pointer;
}*/
.narrator{
    height: 40px;
    width: 40px;
    order: 4;
    cursor: pointer;
    position: fixed;
    right: 2%;
    top: 12%;
    z-index: 9;
	border-radius: 5px;
}

.narrator svg{
	height: 25px;
    width: 25px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
[visionary-menu] .narrator, 
[complex-menu] .narrator{
	order: 3;
}

[auxiliary-menu] .navigation-link-wrapper .narrator,
[basic-menu] .navigation-link-wrapper .narrator {
	position: absolute;
    top: 50%;
    min-width: 30px;
    max-width: 200px;
    height: 100%;
    right: 80px;
    transform: translate(0px, -50%);
    z-index: 9999;
}

[auxiliary-menu] .navigation-link-wrapper .narrator{
    right: 135px;
}

.narrator .bubble {
	opacity : 0;
	background-image: url(/WebModules/VoiceEnabled/res/png/bubble.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    height: 100px;
    width: 200px;
    position: absolute;
    right: 61%;
    top: 55%;
	animation: fadebubbleNav 10s linear;
}

.narrator .bubble .text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
}

@keyframes fadebubbleNav{
	0% {opacity : 0;}
	1%{display: block;}
	30%{opacity: 1;}
	60%{opacity: 1;}
	100% {opacity : 0;}
}




@media (min-width: 300px) and (max-width: 1230px){
	div[basic-menu] .narrator{
		margin-right:40px;
	}
}

@media (max-width: 800px){
	.narrator{
		top: 16%;
	}
}