﻿        .STRFeatureSlick{
            width: 960px;
            height: 550px;
            overflow: hidden;
        }
        .STRFeatureSlick .ContentPanel h2{
            font-size: 24pt;
            text-align:center;
        }
        .STRFeatureSlick .ContentPanel ul{
            
        }
        .STRFeatureSlick .ContentPanel li{
            font-size: 14pt;
            line-height: 20px;
            padding: 10px;
        }
            .STRFeatureSlick .ContentPanel .FeedbackItems ul {
                margin: 0px 30px 0px 0px;
                padding: 0;
            }
        .STRFeatureSlick .ContentPanel .FeedbackItems li{
            font-size: 11pt;
            padding: 0px 0;
            background-image: url(/App_Themes/Common/graphics/Icons/quote-start.jpg);
            background-repeat: no-repeat;
            background-position: 0% 0%;
            list-style: none;
            line-height: 25px;
            margin: 40px 0px;
        }
            .STRFeatureSlick .ContentPanel .FeedbackItems li span{
            background-image: url(/App_Themes/Common/graphics/Icons/quote-end.jpg);
            background-repeat: no-repeat;
            background-position: 100% 100%;
            padding: 10px 40px;
            font-size: 12pt;
            display: inline-block;
            text-align:justify;
            }


        .STRFeature{
            width: 960px;
            height: 550px;
            overflow: hidden;
        }
        .STRFeature .Nav{
            width: 30px;
            height: 500px;
            position: relative;
            display: inline-block;
            overflow: hidden;
        }
            .STRFeature .NavLeft  .Button{
                background-position: 0 0;
            }
            .STRFeature .NavRight  .Button{
                background-position: -70px 0;
            }
            .STRFeature .Nav .Button{
                width: 30px;
                height: 71px;
                display: inline-block;
                margin-top: 200px;
                background-image: url(/App_Themes/Common/graphics/Icons/nav-buttons.png);
                background-repeat: no-repeat;
                opacity: 0.7;
            }
            .STRFeature .Nav .Button:hover{
                opacity: 1;
            }
        .STRFeature .Content{
            width: 900px;
            height: 500px;
            position: relative;
            display: inline-block;
            overflow: hidden;
        }
        .STRFeature .Content .ContentCanvas{
            width: 900px;
            height: 500px;
            overflow: hidden;
        }
        .STRFeature .Content .ContentCanvas .SlideIn{
            animation-name: slidein;
        }
        .STRFeature .Content .ContentCanvas .SlideOut{
            animation-name: slideout;
        }
        .STRFeature .Content .ContentCanvas .ContentPanel {
            width: 900px;
            height: 500px;
            visibility: hidden;
            display:none;
        }
        .STRFeature .Content .ContentCanvas .ContentPanel h2{
            font-size: 24pt;
            text-align:center;
        }
        .STRFeature .Content .ContentCanvas .ContentPanel ul{
            
        }
        .STRFeature .Content .ContentCanvas .ContentPanel li{
            font-size: 14pt;
            line-height: 20px;
            padding: 10px;
        }
            .STRFeature .Content .ContentCanvas .ContentPanel .FeedbackItems ul {
                margin: 0px 30px 0px 0px;
                padding: 0;
            }
        .STRFeature .Content .ContentCanvas .ContentPanel .FeedbackItems li{
            font-size: 11pt;
            padding: 0px 0;
            background-image: url(/App_Themes/Common/graphics/Icons/quote-start.jpg);
            background-repeat: no-repeat;
            background-position: 0% 0%;
            list-style: none;
            line-height: 25px;
            margin: 40px 0px;
        }
            .STRFeature .Content .ContentCanvas .ContentPanel .FeedbackItems li span{
            background-image: url(/App_Themes/Common/graphics/Icons/quote-end.jpg);
            background-repeat: no-repeat;
            background-position: 100% 100%;
            padding: 10px 40px;
            font-size: 12pt;
            display: inline-block;
            text-align:justify;
            }
        .STRFeature .Ellipses{
            height: 50px;
            width: 960px;
            position: relative;
            display: block;
            overflow: hidden;
            text-align:center;
        }
        html .STRFeature .Ellipses .Selected,
        .STRFeature .Ellipses .Ellipse:hover
        {
            background-position: -70px -80px;
        }
        .STRFeature .Ellipses .Ellipse{
            display: inline-block;
            width: 23px;
            height: 23px;
            background-image: url(/App_Themes/Common/graphics/Icons/nav-buttons.png);
            background-repeat: no-repeat;
            background-position: 0px -80px;            
        }
        .STRFeature .Ellipses .PlayPause{
            display: none;
            /*display: inline-block;*/
            width: 23px;
            height: 23px;
            background-image: url(/App_Themes/Common/graphics/Icons/play-pause.png);
            background-repeat: no-repeat;
            background-position: 8px 3px;
            position: absolute;
            margin-left: 5px;
            opacity: .8;
        }
        .STRFeature .Ellipses .PlayPause:hover{
            opacity: 1;
        }
        .STRFeature .Ellipses .Pause{
            background-position: -17px 3px;
        }

html body .STRFeature .Content .ContentCanvas  .slideOut{
	animation-name: slideOut;
	-webkit-animation-name: slideOut;	

	animation-duration: 1s;	
	-webkit-animation-duration: 1s;

	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;		

}

@keyframes slideOut {
	0% {
		transform: translateX(0%);
	}
	100% {
		transform: translateX(-100%);
	}
    from{
        visibility: visible;
    }
    to{
        visibility: hidden;
        display: none;
    }
}
/*
==============================================
slideLeft
==============================================
*/


body .STRFeature .Content .ContentCanvas  .slideLeft{
	animation-name: slideLeft;
	-webkit-animation-name: slideLeft;	

	animation-duration: 1s;	
	-webkit-animation-duration: 1s;

	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;		

	visibility: visible;
    display: inline-block;
}

@keyframes slideLeft {
	0% {
		transform: translateX(150%);
	}
	/*50%{
		transform: translateX(-8%);
	}
	65%{
		transform: translateX(4%);
	}
	80%{
		transform: translateX(-4%);
	}
	95%{
		transform: translateX(2%);
	}*/			
	100% {
		transform: translateX(0%);
	}
}

@-webkit-keyframes slideLeft {
	0% {
		-webkit-transform: translateX(150%);
	}
	/*50%{
		-webkit-transform: translateX(-8%);
	}
	65%{
		-webkit-transform: translateX(4%);
	}
	80%{
		-webkit-transform: translateX(-4%);
	}
	95%{
		-webkit-transform: translateX(2%);
	}*/			
	100% {
		-webkit-transform: translateX(0%);
	}
}

/*
==============================================
slideRight
==============================================
*/


body .STRFeature .Content .ContentCanvas   .slideRight{
	animation-name: slideRight;
	-webkit-animation-name: slideRight;	

	animation-duration: 1s;	
	-webkit-animation-duration: 1s;

	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;		

	visibility: visible;
    display: inline-block;
}

@keyframes slideRight {
	0% {
		transform: translateX(-150%);
	}
	/*50%{
		transform: translateX(8%);
	}
	65%{
		transform: translateX(-4%);
	}
	80%{
		transform: translateX(4%);
	}
	95%{
		transform: translateX(-2%);
	}*/			
	100% {
		transform: translateX(0%);
	}	
}

@-webkit-keyframes slideRight {
	0% {
		-webkit-transform: translateX(-150%);
	}
	/*50%{
		-webkit-transform: translateX(8%);
	}
	65%{
		-webkit-transform: translateX(-4%);
	}
	80%{
		-webkit-transform: translateX(4%);
	}
	95%{
		-webkit-transform: translateX(-2%);
	}*/			
	100% {
		-webkit-transform: translateX(0%);
	}
}
