/*Screens*/
.firstScreen{
    position: absolute !important;
    top: 0px !important;
    left: 0px !important;
    height: 100% !important;
    width: 100% !important;
    z-index: 1;
}
.secondScreen{
    z-index: 2;
    -webkit-box-shadow: 0px 0px 5px -1px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 0px 5px -1px rgba(0,0,0,0.3);
    box-shadow: 0px 0px 5px -1px rgba(0,0,0,0.3);
    background-color: rgb(0,0,0);
}
.imagePlayer{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}
.imagePlayer.fill-width {
    min-width: 100%;
    height: auto;
}
.imagePlayer.fill-height {
    min-height: 100%;
    width: auto;
}
/*Screen states*/
.sideBySideLeft {
    top: 25% !important;
    left: 0px !important;
    width: 50% !important;
    height: 50% !important;
    position: absolute !important;

}
.sideBySideRight {
    top: 25% !important;
    left: 50% !important;
    width: 50% !important;
    height: 50% !important;
    position: absolute !important;

}
.hiddenScreen{
    -ms-transform: translate(200%, 0);
    -webkit-transform: translate(200%, 0);
    -moz-transform: translate(200%, 0);
    -o-transform: translate(200%, 0);
    transform: translate(200%, 0);
    transition: 0.7s !important;
    -webkit-box-shadow: 0px 0px 5px -1px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 0px 5px -1px rgba(0,0,0,0.3);
    box-shadow: 0px 0px 5px -1px rgba(0,0,0,0.3);
    background-color: rgb(0,0,0);
}
.screenTransition{
    transition: 0.3s;
}
/*Override jquery UI resizable cursor handlers*/
.dualScreen > .ui-resizable-ne{
    cursor: nesw-resize;
}
.dualScreen > .ui-resizable-sw{
    cursor: nesw-resize;
}
.dualScreen > .ui-resizable-nw{
    cursor: nwse-resize;
}
.dualScreen > .ui-resizable-se{
    cursor: nwse-resize;
}
/*Custom UI corner position handlers for second screen*/
.cornerHandle{
    position: absolute;
    z-index: 2;
    text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.4);
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
}
.touch .cornerHandle {
    font-size: 24px;
}
.ui-resizable-handle{
    width: 20px;
    height: 20px;
}
.touch .ui-resizable-handle{
    width: 60px;
    height: 60px;
}
#topLeftHandle {
    top: -5px;
    left: -5px;
}
#topRightHandle {
    top:-5px;
    right:-5px;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
    -moz-transform: rotate(-270deg);  /* Firefox */
    -o-transform: rotate(-270deg);  /* Opera */
    -webkit-transform: rotate(-270deg);  /* Safari and Chrome */
    transform: rotate(-270deg);
}
#bottomLeftHandle {
    left:-5px;
    bottom: -5px;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    -moz-transform: rotate(-90deg);  /* Firefox */
    -o-transform: rotate(-90deg);  /* Opera */
    -webkit-transform: rotate(-90deg);  /* Safari and Chrome */
    transform: rotate(-90deg);
}
#bottomRightHandle {
    bottom: -5px;
    right: -5px;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
    -moz-transform: rotate(-180deg);  /* Firefox */
    -o-transform: rotate(-180deg);  /* Opera */
    -webkit-transform: rotate(-180deg);  /* Safari and Chrome */
    transform: rotate(-180deg);
}
.componentOn{
    visibility: visible;
    opacity: 1;
}
.componentOff{
    visibility: hidden;
    opacity: 0;
}
/*Older IE support*/
#topRightHandle .componentOn{
    filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100) progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
}
#topRightHandle .componentOff{
    filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0) progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
}
#bottomLeftHandle .componentOn{
    filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100) progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
}
#bottomLeftHandle .componentOff{
    filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0) progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
}
#bottomRightHandle .componentOn{
    filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100) progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
}
#bottomRightHandle .componentOff{
    filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0) progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
}

/*Animations*/
.componentAnimation{
    -webkit-transition: visibility 0.35s ease-out ,opacity 0.35s ease-out;
    -moz-transition: visibility 0.35s ease-out ,opacity 0.35s ease-out;
    -o-transition: visibility 0.35s ease-out ,opacity 0.35s ease-out;
    transition: visibility 0.35s ease-out ,opacity 0.35s ease-out;
}