#play-icon {
    margin-left: -360px;
    background-color:white;
    transition:margin-left ease-in-out 1.2s;
    display:inline;
}
#play-icon.en {
    margin-left: -290px;
}
#play-ellipsis {
    transition:all ease-in-out .5s;
    height:25px;
    width:25px;
    position:absolute;
    margin-left:11px;
    margin-top:7px;
}
#play-triangle {
    transition:all ease-in-out .5s;
    transform-origin:4px;
    position:absolute;
    height:12px;
    width:10px;
    top:23px;
    margin-left:19px;
}

#play-icon.go-right {
    margin-left: 5px!important;
}

#play-ellipsis.hover{
    transition: all ease-in-out .3s;
}
#play-container.hover{
    transform: scale(1.1);
}
#play-triangle.hover{
    transition: all ease-in-out .3s;
    transform: rotate(360deg);
}

.play-container {
    transition: all ease-in-out .3s;
    text-align:left;
    background-color:white;
    border-radius:40px;
    width:100%;
    height:40px;
}

.play-container-border {
    transition: all ease-in-out .3s;
    cursor:pointer;
    background-color:rgba(255, 255, 255, .45);
    border-radius:50px;
    padding:10px;
    width:48%;
    height:10%;
    max-height:50px;
    max-width:450px;
}

.play-text {
    font-family: "Open Sans";
    font-size:1.3em;
    display:inline-block;
    margin-left:33px;
    margin-top:7px;
    font-weight:bold;
}

.play-text.en {
    margin-left:74px;
}


/*IPAD PORTRAIT*/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
    .play-text {
        font-size: 1.2em!important;
        margin-left: 38px!important;
    }
    .play-text.en {
        margin-left: 88px!important;
    }
    .play-container-border {
        width: 72%!important;
    }
    #play-icon {
        margin-left: -340px;
    }
    #play-icon.en {
        margin-left: -300px;
    }
    #play-icon.go-right {
        margin-left: 12px!important;
    }
}

@media (max-width : 374px) { 
    .play-container-border {
        width: 80%!important;
    }

    .play-text {
        font-size: .75em!important;
        margin-left: 10px!important;
        margin-top: 3px!important;
    }
    .play-text.en {
        margin-left: 35px!important;
    }

    .play-container {
        height: 28px!important;
    }

    #play-icon {
        margin-left: -200px;
    }
    #play-icon.en {
        margin-left: -175px;
    }

    #play-icon.go-right {
        margin-left: 3px!important;
    }

    #play-ellipsis {
        height: 20px!important;
        width: 20px!important;
        margin-top: 4px!important;
        margin-left: 0px!important;
    }

    #play-triangle {
        height: 12px!important;
        width: 9px!important;
        top:18px!important;
        margin-left: 7px!important;
        transform-origin: 3px!important;
    }
}

/*IPHONE PORTRAIT & LANDSCAPE*/
@media only screen 
and (min-width : 375px) 
and (max-width : 667px) {
    .play-text {
        font-size: .75em!important;
        margin-left: 10px!important;
        margin-top: 0px!important;
    }
    .play-text.en {
        margin-left: 35px!important;
    }
    .play-container-border {
        width: 80%!important;
        padding: 8px!important;
    }
    .play-container {
        height: 28px!important;
    }
    #play-icon {
        margin-left: -210px;
    }
    #play-icon.en {
        margin-left: -160px;
    }
    #play-icon.go-right {
        margin-left: 0px!important;
    }
    #play-ellipsis {
        height: 20px!important;
        width: 20px!important;
        margin-top: 4px!important;
        margin-left: 8px!important;
    }
    #play-triangle {
        height: 12px!important;
        width: 9px!important;
        top:16px!important;
        margin-left: 15px!important;
        transform-origin: 3px!important;
    }
}

/*galaxy*/
@media screen and (device-width: 360px) 
and (device-height: 640px) 
and (-webkit-device-pixel-ratio: 3){
    .play-text {
        font-size: .7em!important;
        margin-left: 10px!important;
        margin-top: 0px!important;
    }
    .play-text.en {
        margin-left: 30px!important;
    }
    .play-container-border {
        width: 80%!important;
        padding: 8px!important;
    }
    .play-container {
        height: 28px!important;
    }
    #play-icon {
        margin-left: -200px;
    }
    #play-icon.en {
        margin-left: -155px;
    }
    #play-icon.go-right {
        margin-left: 3px!important;
    }
    #play-ellipsis {
        height: 20px!important;
        width: 20px!important;
        margin-top: 4px!important;
        margin-left: 9px!important;
    }
    #play-triangle {
        height: 12px!important;
        width: 9px!important;
        top:16px!important;
        margin-left: 16px!important;
        transform-origin: 3px!important;
    }
}

/*IPHONE 5*/
@media screen and (device-width: 320px) and (device-height: 568px) and 
(-webkit-device-pixel-ratio: 2){
    .play-text {
        font-size: .7em!important;
        margin-left: 10px!important;
        margin-top: 0px!important;
    }
    .play-text.en {
        margin-left: 30px!important;
    }
    .play-container-border {
        width: 80%!important;
        padding: 8px!important;
    }
    .play-container {
        height: 28px!important;
    }
    #play-icon {
        margin-left: -200px;
    }
    #play-icon.en {
        margin-left: -155px;
    }
    #play-icon.go-right {
        margin-left: 3px!important;
    }
    #play-ellipsis {
        height: 20px!important;
        width: 20px!important;
        margin-top:4px!important;
        margin-left:8px!important;
    }
    #play-triangle {
        height: 12px!important;
        width: 9px!important;
        top:16px!important;
        margin-left: 15px!important;
        transform-origin: 3px!important;
    }
}

@media only screen and (min-width : 600px) 
and (max-width : 730px) {
    .play-container-border {
        width: 41%!important;
    }
}

@media only screen and (min-width : 668px) 
and (max-width : 822px) { 
    .play-container-border {
        width: 74%!important;
    }
}

@media only screen and (min-width : 823px) 
and (orientation : landscape) { 
    .play-container-border {
        width: 74%!important;
    }
}

@media only screen and (min-width : 823px){ 
    .play-container-border {
        width: 57%!important;
    }
}

@media only screen and (min-width : 481px) 
and (max-width : 600px) { 
    .play-container-border {
        width: 57%!important;
    }
}

@media (min-width : 375px) 
and (max-width : 480px) 
and (orientation : landscape) { 
    .play-container-border {
        width: 80%!important;
    }
}

@media (max-width : 300px) {
    .play-text {
        display: none!important;
    }

    .play-container-border {
        width: 27px!important;
        height: 28!important;
    }

    #play-icon {
        margin-left: 3px;
    }
}

.play-text.anim span:nth-of-type(1) {animation-delay: .20s;}
.play-text.anim span:nth-of-type(2) {animation-delay: .225s;}
.play-text.anim span:nth-of-type(3) {animation-delay: .25s;}
.play-text.anim span:nth-of-type(4) {animation-delay: .275s;}
.play-text.anim span:nth-of-type(5) {animation-delay: .30s;}
.play-text.anim span:nth-of-type(6) {animation-delay: .325s;}
.play-text.anim span:nth-of-type(7) {animation-delay: .35s;}
.play-text.anim span:nth-of-type(8) {animation-delay: .375s;}
.play-text.anim span:nth-of-type(9) {animation-delay: .4s;}
.play-text.anim span:nth-of-type(10) {animation-delay: .425s;}
.play-text.anim span:nth-of-type(11) {animation-delay: .45s;}
.play-text.anim span:nth-of-type(12) {animation-delay: .475s;}
.play-text.anim span:nth-of-type(13) {animation-delay: .45s;}
.play-text.anim span:nth-of-type(14) {animation-delay: .475s;}
.play-text.anim span:nth-of-type(15) {animation-delay: .5s;}
.play-text.anim span:nth-of-type(16) {animation-delay: .55s;}
.play-text.anim span:nth-of-type(17) {animation-delay: .6s;}
.play-text.anim span:nth-of-type(18) {animation-delay: .65s;}
.play-text.anim span:nth-of-type(19) {animation-delay: .7s;}
.play-text.anim span:nth-of-type(20) {animation-delay: .75s;}
.play-text.anim span:nth-of-type(21) {animation-delay: .8s;}
.play-text.anim span:nth-of-type(22) {animation-delay: .85s;}
.play-text.anim span:nth-of-type(23) {animation-delay: .9s;}
.play-text.anim span:nth-of-type(24) {animation-delay: .95s;}
.play-text.anim span:nth-of-type(25) {animation-delay: 1.0s;}
.play-text.anim span:nth-of-type(26) {animation-delay: 1.05s;}
.play-text.anim span:nth-of-type(27) {animation-delay: 1.1s;}
.play-text.anim span:nth-of-type(28) {animation-delay: 1.15s;}

.play-text span {
    opacity: 0;
}

.play-text.done span {
    opacity: 1;
}

.play-text.anim span {
    opacity: 0;
    animation: fade .5s forwards;
}

@keyframes fade {
    100% {
        opacity: 1;
    }
}


@media (min-width: 800px) and (max-width: 999px) {
    .play-container {
        width: inherit!important;
    }
}

@media (min-width: 769px) and (max-width: 799px) {
    #play-icon.go-right {
        margin-left: 20px!important;
    }
}

#play-triangle.rotate {
    transform: rotate(180deg);
}

#play-icon.instant {
    transition: all ease-in-out .01s;
}