.webLogo {
    width: 180px;
    height: auto;
    border: 0 solid red;
    margin: auto;
    margin-top: 25px;
    margin-bottom: 5px;
}

.Logo {
    width: 260px !important;
    margin-top: 50px !important;
    margin-bottom: 50px !important;
}

.gameLogo {
    margin-top: 60px !important;
    margin-bottom: 60px !important;
}

.desktopLogo {
    margin-top: 60px;
    margin-bottom: 60px;
}

.webLogoTitle {
    color: #dedede;
    font: bold 22px yekan;
    text-align: center;
    position: relative;
    margin-top: 15px;
}

.webLogoTitleDrak {
    color: #222 !important;
}

.mobileTitle {
    color: #222;
}

.subWebLogoTitle {
    font: normal 20px yekan;
    margin-top: -15px;
    padding-right: 20px;
}

.desktopLogoTitle {
    border: 0 solid red;
}

.webSegmentTitle {
    width: 98%;
    height: 40px;
    margin: 10px 0 10px 0;
    /*background: #be21bd;*/
    /*-webkit-transform: skew(30deg);
    -moz-transform: skew(30deg);
    -ms-transform: skew(30deg);
    -o-transform: skew(30deg);
    transform: skew(30deg);*/
    position: relative;
    z-index: 50;
    margin: auto;
    margin-bottom: 4px;
    font: bold 15px yekan;
    text-align: right;
    line-height: 35px;
    color: #dedede;
    padding-bottom: 0 !important;
    text-align: center;
}

    .webSegmentTitle:after {
        content: " ";
        width: 98%;
        height: 100%;
        border-bottom: 0 solid #000;
        position: absolute;
        top: 0px;
        left: 1%;
        -ms-opacity: 0.4;
        opacity: 0.4;
    }

.circleTitle {
    width: 45px;
    height: 45px;
    -ms-border-radius: 45px;
    border-radius: 45px;
    border: 1px solid #ccc;
    background: #a21ba2;
    position: relative;
    margin: auto;
    box-shadow: inset 0 0 8px #5f0d5f;
}

    .circleTitle:after {
        content: " ";
        width: 55px;
        height: 55px;
        -ms-border-radius: 55px;
        border-radius: 55px;
        position: absolute;
        border: 2px solid #a21ba2;
        top: -6px;
        left: -6px;
    }

.aboutWebContent {
    width: 98%;
    height: auto;
    border-bottom: 0 solid #7c167c;
    /*background: rgba(162, 27, 162, 0.3);*/
    padding: 5px;
    display: block;
    position: relative;
    margin: auto;
    margin-bottom: 10px;
}

    .aboutWebContent p {
        text-align: justify;
        color: #efefef;
        font: 13px yekan;
        line-height: 25px;
        padding: 20px;
    }

.En_aboutWebContent p {
    direction: ltr !important;
    font-size: 15px;
}

.lineSep {
    border-bottom: 2px solid #dedede;
    color: #dedede;
    position: relative;
    margin-top: -60px;
    margin-bottom: 30px;
}

    .lineSep:after {
        content: " ";
        border-right: 60px solid transparent;
        border-left: 60px solid transparent;
        border-top: 25px solid #dedede;
        position: relative;
        top: 45px;
    }

.lineSepWeb {
    border-bottom-color: #bf25bf;
    color: #dedede !important;
}

    .lineSepWeb:after {
        border-top-color: #bf25bf;
        color: #dedede !important;
    }

.lineSepWebText {
    color: #dedede !important;
}

.lineSepText {
    color: #555;
    position: relative;
    top: 50px;
    z-index: 100;
}

.sampleWebBg {
    position: relative;
    padding: 15px;
}

.sampleWebBgPic {
    background-attachment: fixed;
    background-size: cover;
}

.sampleArea {
    height: 90px;
    padding: 5px;
    background: #eee;
    margin-bottom: 15px;
    overflow: hidden;
    position: relative;
}

.sampleAreaReflex {
    /*transform: skew(-10deg);*/
    margin-top: -20px;
}

.sampleArea:hover .sampleAreaMask {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.sampleArea:hover .sampleWebLink {
    opacity: 1.0;
}

.sampleAreaMask {
    width: 1px;
    height: 1px;
    position: absolute;
    left: 45%;
    top: 35%;
    background: #333;
    opacity: 0.4;
    transition: .2s ease-in-out;
}

.sampleWebLink {
    color: #dedede;
    position: relative;
    margin: auto;
    top: 45%;
    -ms-opacity: 0.0;
    opacity: 0.0;
    -webkit-transition: .2s ease-in-out;
    -moz-transition: .2s ease-in-out;
    -ms-transition: .2s ease-in-out;
    -o-transition: .2s ease-in-out;
    transition: .2s ease-in-out;
}

    .sampleWebLink:hover {
        color: #dedede;
        transform: scale(1.2);
    }

.sampleRibbonTop {
    height: 7px;
    background: #dedede;
    position: relative;
    margin: auto;
    margin-bottom: 5px;
    left: -10px;
    transform: skew(10deg);
}

.sampleRibbonTopReflex {
    height: 7px;
    background: #dedede;
    position: relative;
    margin: auto;
    margin-bottom: 5px;
    margin-top: -20px;
    left: 8px;
    transform: skew(-10deg);
}

.sampleRibbonBottomReflex {
    left: 0px;
    margin-top: -20px;
    margin-bottom: 0;
}

.sampleRibbonThinReflex {
    height: 2px;
    left: 0px;
    margin-top: 5px;
    margin-bottom: 25px;
}

.sampleRibbonBottom {
    top: -22px;
    left: 0px;
}

.sampleRibbonThin {
    top: -22px;
    height: 2px;
}

.webSampleImg {
}


@media only screen and (max-width: 1000px) {
    /*.webLogoTitle {
        color: #bf25bf !important;
    }*/
    .WebColText {
        color: #f044f0 !important;
    }

    .webTitle {
        color: #e025e0 !important;
    }

    .sampleAreaMask {
        top: 45%;
        left: 50%;
    }

    .sampleWebLink {
        /*opacity: 1.0;*/
        top: 45%;
    }

    .sampleArea {
        height: 250px;
        transform: skew(0deg);
    }

    .sampleRibbonBottom {
        left: 0px;
    }

    .sampleRibbonBottomReflex {
        left: 0;
    }

    .sampleAreaReflex {
        margin-top: 0;
    }

    .gameText {
        color: #ff6c14 !important;
    }

    .gameLogoPic {
        background-image: url('Img/joystick2.png') !important;
    }

    .mobileTitle {
        color: #fdbf17 !important;
    }
}

@media only screen and (min-width: 1700px) {
    .sampleArea {
        height: 250px;
        transform: skew(0deg);
    }

    .sampleRibbonBottom {
        left: 0px;
    }

    .sampleRibbonBottomReflex {
        left: 0;
    }

    .webCol {
        overflow: hidden;
    }
}