/*
//////////////////////////
Orientation Help
//////////////////////////
*/

.orientation-layer-spritesheet
{
    background-image: url("../assets/images/site_spritesheet.png");
    background-size: 144px 298px;
}

.orientation-layer
{
    position: absolute;

    display: none;

    left:0px;
    top:0px;

    width:100%;
    height:100%;

    background-color: #ffffff;
}

.orientation-layer-phone
{
    position: absolute;

    left:50%;
    margin-left:-72px;
    top:50%;
    margin-top:-44px;

    width:144px;
    height:82px;

    background-position: 0px 0px;

    animation-iteration-count: infinite;
    animation-timing-function: ease;
    animation-name: ae_OrientationPhone_Animation;
    animation-duration: 6.0s;
    animation-delay: 0.0s;
}

.orientation-layer-cross
{
    position: absolute;

    left:50%;
    margin-left:-36px;
    top:50%;
    margin-top:-38px;

    width:72px;
    height:72px;

    background-position: 0px -82px;

    animation-iteration-count: infinite;
    animation-timing-function: ease;
    animation-name: ae_OrientationCross_Animation;
    animation-duration: 6.0s;
    animation-delay: 0.0s;
}

.orientation-layer-checkmark
{
    position: absolute;

    left:50%;
    margin-left:-36px;
    top:50%;
    margin-top:-36px;

    width:72px;
    height:72px;

    background-position: -72px -82px;

    animation-iteration-count: infinite;
    animation-timing-function: ease;
    animation-name: ae_OrientationCheckmark_Animation;
    animation-duration: 6.0s;
    animation-delay: 0.0s;
}



@keyframes ae_OrientationPhone_Animation {
    0% 		{ opacity: 1; transform: rotate(0deg);}
    30% 	{ opacity: 1; transform: rotate(0deg);}
    50% 	{ opacity: 1; transform: rotate(90deg);}
    80% 	{ opacity: 1; transform: rotate(90deg);}
    100% 	{ opacity: 1; transform: rotate(0deg);}
}
@keyframes ae_OrientationCross_Animation {
    0% 		{ opacity: 0; transform: scale(0);}
    10% 	{ opacity: 1; transform: scale(1);}
    30% 	{ opacity: 1; transform: scale(1);}
    40% 	{ opacity: 0; transform: scale(0);}
    100% 	{ opacity: 0; transform: scale(0);}
}
@keyframes ae_OrientationCheckmark_Animation {
    0% 		{ opacity: 0; transform: scale(0);}
    40% 	{ opacity: 0; transform: scale(0);}
    50% 	{ opacity: 1; transform: scale(1);}
    80% 	{ opacity: 1; transform: scale(1);}
    90% 	{ opacity: 0; transform: scale(0);}
    100% 	{ opacity: 0; transform: scale(0);}
}

@media only screen
and (min-device-width: 320px)
and (max-device-width: 1023px)
and (orientation: landscape)
{
    .orientation-layer
    {
        display: inline;
    }
}

@media only screen
and (min-device-width: 820px)
and (max-device-width: 1365px)
and (orientation: portrait)
{
    .orientation-layer
    {
        display: inline;
    }
}