

.Ptr {
    /*outline: 2px solid saddlebrown;*/
    overflow: hidden;
    position: relative;
}

.Ptr-w {
    position: relative;
    z-index: 40;

    height: 530px;
    -webkit-transition: height .3s ease;
-moz-transition: height .3s ease;
-ms-transition: height .3s ease;
-o-transition: height .3s ease;
transition: height .3s ease;
}


.Ptr-menu {
    position: absolute;
    z-index: 50;
    left: 0;
    right: 0;
    top: 10px;
}


.Ptr-col[name="image"] {
    width: 50%;
    height: 100%;
    position: relative;
    /*outline: 1px solid green;*/
    -webkit-transition: ;
-moz-transition: ;
-ms-transition: ;
-o-transition: ;
transition: ;
}

.Ptr-image {
    position: absolute;
    right: 30px;
    bottom: 0;
    /*outline: 1px solid blue;*/
    -webkit-transition: right .3s ease, bottom .3s ease;
-moz-transition: right .3s ease, bottom .3s ease;
-ms-transition: right .3s ease, bottom .3s ease;
-o-transition: right .3s ease, bottom .3s ease;
transition: right .3s ease, bottom .3s ease;
}

.Ptr-image IMG {
    position: relative;
    top: 5px; }

.Ptr-image-bg {
    position: absolute;
    width: 768px;
    bottom: 0;
    padding-top: 79px;
    height: 100%;
    left: 50%;
    margin-left: 38px;     margin-left: 9px;     -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%);    background-image: url('/site/img/poster/rounds.png');
    background-repeat: no-repeat;
    background-position: center 34px;
    /*outline: 1px dashed red;*/


    -webkit-animation-name: Ptr-rays;
-moz-animation-name: Ptr-rays;
-o-animation-name: Ptr-rays;
animation-name: Ptr-rays;
    -webkit-animation-timing-function: cubic-bezier(0.42,0,0.47,1.16); -moz-animation-timing-function: cubic-bezier(0.42,0,0.47,1.16); -o-animation-timing-function: cubic-bezier(0.42,0,0.47,1.16); animation-timing-function: cubic-bezier(0.42,0,0.47,1.16); 
    -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; -o-animation-fill-mode: forwards; animation-fill-mode: forwards; 
    -webkit-animation-duration: 5s;
-moz-animation-duration: 5s;
-o-animation-duration: 5s;
animation-duration: 5s;    -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite;     -webkit-animation-direction: alternate; -moz-animation-direction: alternate; -o-animation-direction: alternate; animation-direction: alternate; 
    -webkit-transform-origin: botton; -moz-transform-origin: botton; -o-transform-origin: botton; -ms-transform-origin: botton; transform-origin: botton;
    -webkit-transition: background-position .3s ease, margin-left .3s ease, padding-top .3s ease, left .3s ease, width .3s ease;
-moz-transition: background-position .3s ease, margin-left .3s ease, padding-top .3s ease, left .3s ease, width .3s ease;
-ms-transition: background-position .3s ease, margin-left .3s ease, padding-top .3s ease, left .3s ease, width .3s ease;
-o-transition: background-position .3s ease, margin-left .3s ease, padding-top .3s ease, left .3s ease, width .3s ease;
transition: background-position .3s ease, margin-left .3s ease, padding-top .3s ease, left .3s ease, width .3s ease;
}
/*
    .Ptr-image-bg {
        -webkit-animation-name: none !important;
-moz-animation-name: none !important;
-o-animation-name: none !important;
animation-name: none !important;    }
*/
@-webkit-keyframes Ptr-rays { 100% { -webkit-transform: translateX(-50%) scale(1.5); -moz-transform: translateX(-50%) scale(1.5); -o-transform: translateX(-50%) scale(1.5); -ms-transform: translateX(-50%) scale(1.5); transform: translateX(-50%) scale(1.5); } } @-moz-keyframes Ptr-rays { 100% { -webkit-transform: translateX(-50%) scale(1.5); -moz-transform: translateX(-50%) scale(1.5); -o-transform: translateX(-50%) scale(1.5); -ms-transform: translateX(-50%) scale(1.5); transform: translateX(-50%) scale(1.5); } } @-o-keyframes Ptr-rays { 100% { -webkit-transform: translateX(-50%) scale(1.5); -moz-transform: translateX(-50%) scale(1.5); -o-transform: translateX(-50%) scale(1.5); -ms-transform: translateX(-50%) scale(1.5); transform: translateX(-50%) scale(1.5); } } @keyframes Ptr-rays { 100% { -webkit-transform: translateX(-50%) scale(1.5); -moz-transform: translateX(-50%) scale(1.5); -o-transform: translateX(-50%) scale(1.5); -ms-transform: translateX(-50%) scale(1.5); transform: translateX(-50%) scale(1.5); } }
@-webkit-keyframes Ptr-rays-mq { 100% { -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -o-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5); } } @-moz-keyframes Ptr-rays-mq { 100% { -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -o-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5); } } @-o-keyframes Ptr-rays-mq { 100% { -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -o-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5); } } @keyframes Ptr-rays-mq { 100% { -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -o-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5); } }


.Ptr-col[name="content"] {
    position: absolute;
    width: 470px;
    right: 5%;
    top: 0;
    bottom: 0;
    margin-top: -20px;
    /*outline: 1px solid green;*/

    -webkit-transition: margin-top .3s ease, left .3s ease, padding .3s ease;
-moz-transition: margin-top .3s ease, left .3s ease, padding .3s ease;
-ms-transition: margin-top .3s ease, left .3s ease, padding .3s ease;
-o-transition: margin-top .3s ease, left .3s ease, padding .3s ease;
transition: margin-top .3s ease, left .3s ease, padding .3s ease;
}
.Ptr-headline {
    padding-left: 2px;
}


.Ptr-networks-w {
    display: table;
    }

.Ptr-networks-headline {
    background-color: #ffff00;
    padding: 5px 15px 5px 10px;
    -webkit-transition: padding .3s ease;
-moz-transition: padding .3s ease;
-ms-transition: padding .3s ease;
-o-transition: padding .3s ease;
transition: padding .3s ease;
        letter-spacing: .5px;
    position: relative;
    top: -2px;
}

.Ptr-networks UL {
    display: table;
    padding-top: 5px;
    padding-bottom: 13px;
    -webkit-transition: margin .3s ease, padding .3s ease;
-moz-transition: margin .3s ease, padding .3s ease;
-ms-transition: margin .3s ease, padding .3s ease;
-o-transition: margin .3s ease, padding .3s ease;
transition: margin .3s ease, padding .3s ease;
}
.Ptr-networks LI {
    color: #666666;
    display: inline-block;
    width: 69px;
    height: 78px;
    margin-right: 19px;
    background-image: url('/site/img/icons/cell.png');
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: contain; -moz-background-size: contain; -o-background-size: contain; background-size: contain;     position: relative;
    cursor: default;

    -webkit-transition: width .3s ease, height .3s ease, margin .3s ease;
-moz-transition: width .3s ease, height .3s ease, margin .3s ease;
-ms-transition: width .3s ease, height .3s ease, margin .3s ease;
-o-transition: width .3s ease, height .3s ease, margin .3s ease;
transition: width .3s ease, height .3s ease, margin .3s ease;
}
    .Ptr-networks LI.-last {
        margin-right: 0;
    }

.Ptr-networks LI .tx {
    display: inline-block;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%);}

.Ptr-networks LI:hover {
    -webkit-animation: flip-icon 750ms cubic-bezier(0.6,-0.28,0.74,0.05); -moz-animation: flip-icon 750ms cubic-bezier(0.6,-0.28,0.74,0.05); -o-animation: flip-icon 750ms cubic-bezier(0.6,-0.28,0.74,0.05); animation: flip-icon 750ms cubic-bezier(0.6,-0.28,0.74,0.05);
}

@-webkit-keyframes flip-icon { 0% { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); }100% { -webkit-transform: rotateY(360deg); -moz-transform: rotateY(360deg); -o-transform: rotateY(360deg); -ms-transform: rotateY(360deg); transform: rotateY(360deg); } } @-moz-keyframes flip-icon { 0% { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); }100% { -webkit-transform: rotateY(360deg); -moz-transform: rotateY(360deg); -o-transform: rotateY(360deg); -ms-transform: rotateY(360deg); transform: rotateY(360deg); } } @-o-keyframes flip-icon { 0% { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); }100% { -webkit-transform: rotateY(360deg); -moz-transform: rotateY(360deg); -o-transform: rotateY(360deg); -ms-transform: rotateY(360deg); transform: rotateY(360deg); } } @keyframes flip-icon { 0% { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); }100% { -webkit-transform: rotateY(360deg); -moz-transform: rotateY(360deg); -o-transform: rotateY(360deg); -ms-transform: rotateY(360deg); transform: rotateY(360deg); } }

@media (max-width: 810px) {
    .Ptr-col[name="image"] {
        width: 64vw;
    }
    .Ptr-col[name="content"] {
        width: auto;
    }

    .Ptr-networks UL {
        padding-bottom: 8px;
    }

    .Ptr-networks LI {
        width: 50px;
        height: 58px;
        margin-right: 9px;
    }
}

@media (max-width: 480px) {
    .Ptr-w {
        height: auto;
    }

    .Ptr-col[name="image"] {
        width: 100%;
        text-align: center;
    }
    .Ptr-image {
        position: relative;
        right: 0px;
        bottom: -29px;
    }

    .Ptr-image IMG {
        height: 250px;
    }
    .Ptr-image-bg {
                width: 100%;
        left: 0;
        margin-left: 0;
        padding-top: 29px;
        -webkit-animation-name: Ptr-rays-mq;
-moz-animation-name: Ptr-rays-mq;
-o-animation-name: Ptr-rays-mq;
animation-name: Ptr-rays-mq;        -webkit-background-size: 469px; -moz-background-size: 469px; -o-background-size: 469px; background-size: 469px;         background-position: center -2px;
        -webkit-transform: none; -moz-transform: none; -o-transform: none; -ms-transform: none; transform: none;        -webkit-transform-origin: bottom; -moz-transform-origin: bottom; -o-transform-origin: bottom; -ms-transform-origin: bottom; transform-origin: bottom;    }

    .Ptr-col[name="content"] {
        position: relative;
        right: 0;
        margin-top: 52px;
        padding-left: 13px;
        padding-right: 13px;
        padding-bottom: 38px;
    }

    .Ptr-headline {
        display: table;
        margin: 0 auto;
    }

    .Ptr-networks-w {
        margin: 0 auto;
    }

    .Ptr-networks UL {
        margin-left: 3px;
        padding-top: 1px;
        padding-bottom: 4px;
    }
    .Ptr-networks LI {
        margin-right: 8.5px;
        width: 51px;
        height: 55px;
    }
        .Ptr-networks LI.-last {
            margin-right: -1px;
        }

    .Ptr-networks-headline {
        display: block;
        padding: 3px 12px;
        top: 0px;
    }
}