body{
    margin: 0;
    /*touch-action: manipulation; von commented out 12/20/17*/
}
.wrapper{
    width: 100%;
    margin: auto;
    text-align: center;
    margin-top: 30px;
}
#img1{
	width: 400px;
}
.stop{
	display: none;
	text-align: center;
}
.button-container{
	margin: 0 auto;
	text-align: center;
	width: 30px;
    margin-top: 130px;
    z-index: 10;
    position: relative;
}
#button-container-2{
    width: 333px;
    margin: 0 auto;
    margin-top: -101px;
    text-align: left;    
    vertical-align:top;
}
#button-container-2-t{
    width: 333px;
    margin: 0 auto;
    margin-top: -101px;
    text-align: left;   
    vertical-align:top; 
}
.goobutton{
    margin-left: -27px;
    width: 50px;
    height: 100px;
    position: relative;
    z-index: 13;
    opacity: 0;
}
.chokibutton{
    margin-left: 14px;
    width: 50px;
    height: 100px;
    position: relative;
    z-index: 13;
    opacity: 0;
}
.paabutton{
    margin-left: 18px;
    width: 50px;
    position: relative;
    height: 100px;
    z-index: 13;  
    opacity: 0;      
}
#play{
    float: right;
    height: 120px;
    position: relative;
    z-index: 13;
    margin-top: -123px;
    width: 56px;
    opacity: 0;    
}
/*stop css imgs button*/
.stop-container-2{
        width: 410px;
        margin: 0 auto;
        margin-top: -110px;
        z-index: 10;
        position: relative;
}
.img2,.img3,.paa1,#paa2{
    float: left;
}
#stop{
    width: 10px;
    height: 10px;
    margin-top: 100px;
}
.paa2 {
    /* Start the shake animation and make the animation last for 0.5 seconds */
    animation: shake 0.5s; 
    /* When the animation is finished, start again */
    animation-iteration-count: infinite; 
    }
    @keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}

.p-arrow{
    display: inline-block;
    float: left;
    margin: 0;
    margin-left: 10px;
}
i {
    border: solid black;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
}
.left {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}
.hor-line{
    width: 30px;
    border-top: 4px solid;
    float: left;
    margin-top: 7px;
    margin-left: -1px;
}
.click-img{
    width: 100px;
    display: inline-block;
    margin-top: -40px;
    margin-left: -60px;
}
.click-container{    
    float: right;
    margin-top: 30px;
    width: 180px;
}
.click-wrapper{
    width: 400px;
    margin: 0 auto;  
}
/*mobile display*/
@media screen and (max-width: 480px) {
#img1{
    width: 350px;
}
.img2{
    width: 60px;
    height: 100px;
}
.img3{
    width: 60px;
    height: 100px;
}
.paa1 {
    width: 180px;
    height: 100px;
}
#paa2 {
    height: 100px;
}
.stop-container-2{
    width: 350px;
}
#button-container-2 {
    width: 350px;
    margin: 0 auto;
    margin-top: -103px;
    text-align: left;
    vertical-align: top;
}
#button-container-2-t {
    width: 350px;
    margin: 0 auto;
    margin-top: -103px;
    text-align: left;
    vertical-align: top;
}
.goobutton {
    margin-left: 6px;
    margin-bottom: 13px;
    width: 50px;
    height: 90px;
    position: relative;
    z-index: 13;
    opacity: 0;
}
.chokibutton {
    margin-left: 8px;
    margin-bottom: 13px;
    width: 50px;
    height: 90px;
    position: relative;
    z-index: 13;
    opacity: 0;
}
.paabutton {
    margin-left: 6px;
    margin-bottom: 13px;
    width: 50px;
    position: relative;
    height: 90px;
    z-index: 13;
    opacity: 0;
}
#play {
    float: left;
    position: relative;
    z-index: 13;
    opacity: 0;
    margin: 0 auto;
    margin-top: 0px;
    margin-left: -48px;
    height: 100px;
    width: 50px;
}
#rpst {
    margin-left: 5px;
    width: 50px;
    height: 90px;
    position: relative;
    z-index: 13;
    opacity: 0;
}
}
@media screen and (max-width: 380px){
#img1{
    width: 300px;
}
#seperator {
    margin-bottom: 20px;
}
.stop-container-2{
    width: 300px;
    margin-top: -105px;
}
#button-container-2 {
    width: 300px;
    margin: 0 auto;
    margin-top: -98px;
    text-align: left;
    vertical-align: top;
}
#button-container-2-t {
    width: 300px;
    margin: 0 auto;
    margin-top: -98px;
    text-align: left;
    vertical-align: top;
}
.goobutton {
    margin-left: 6px;
    margin-bottom: 13px;
    width: 50px;
    height: 85px;
    position: relative;
    z-index: 13;
    opacity: 0;
}
.chokibutton {
    margin-left: -3px;
    margin-bottom: 13px;
    width: 45px;
    height: 85px;
    position: relative;
    z-index: 13;
    opacity: 0;
}
.paabutton {
    margin-left: 3px;
    margin-bottom: 13px;
    width: 45px;
    position: relative;
    height: 85px;
    z-index: 13;
    opacity: 0;
}
#rpst {
    margin-left: 3px;
    width: 45px;
    height: 85px;
    position: relative;
    z-index: 13;
    opacity: 0;
}
.img2 {
    width: 50px;
    height: 90px;
    margin-left: 5px;
}
.img3 {
    width: 50px;
    height: 90px;
}
.paa1 {
    width: 150px;
    height: 90px;
}
#paa2 {
    height: 90px;
    float: left;
}
}

/*ie CSS large screen*/
@media screen and (max-width: 3500px) and (-ms-high-contrast: none), (-ms-high-contrast: active)  {

#button-container-2{
    width: 333px;
    margin: 0 auto;
    margin-top: -100px;
    text-align: left;    
    vertical-align:top;
}
#button-container-2-t{
    width: 333px;
    margin: 0 auto;
    margin-top: -100px;
    text-align: left;   
    vertical-align:top; 
}
    }


/*ie css Mobile screen*/
@media screen and (max-width: 480px) and (-ms-high-contrast: none), (-ms-high-contrast: active)  {

#button-container-2 {
    width: 350px;
    margin: 0 auto;
    margin-top: -103px;
    text-align: left;
    vertical-align: top;
}
#button-container-2-t {
    width: 350px;
    margin: 0 auto;
    margin-top: -103px;
    text-align: left;
    vertical-align: top;
}
    }


/*ie css Mobile screen*/
@media screen and (max-width: 380px) and (-ms-high-contrast: none), (-ms-high-contrast: active)  {

#button-container-2 {
    width: 300px;
    margin: 0 auto;
    margin-top: -98px;
    text-align: left;
    vertical-align: top;
}
#button-container-2-t {
    width: 300px;
    margin: 0 auto;
    margin-top: -98px;
    text-align: left;
    vertical-align: top;
}
    }

/*MOZILLA CSS*/
@-moz-document url-prefix() {
    h1 {
        color: red;
    }
#button-container-2{
    width: 333px;
    margin: 0 auto;
    margin-top: -100px;
    text-align: left;    
    vertical-align:top;
}
#button-container-2-t{
    width: 333px;
    margin: 0 auto;
    margin-top: -100px;
    text-align: left;   
    vertical-align:top; 
}
@media screen and (max-width: 480px) {

#button-container-2 {
    width: 350px;
    margin: 0 auto;
    margin-top: -102px;
    text-align: left;
    vertical-align: top;
}
#button-container-2-t {
    width: 350px;
    margin: 0 auto;
    margin-top: -102px;
    text-align: left;
    vertical-align: top;
}
}


@media screen and (max-width: 380px) {

#button-container-2 {
    width: 300px;
    margin: 0 auto;
    margin-top: -103px;
    text-align: left;
    vertical-align: top;
}
#button-container-2-t {
    width: 300px;
    margin: 0 auto;
    margin-top: -103px;
    text-align: left;
    vertical-align: top;
}
}
}