@font-face {
    font-family: "Roboto";
    src: url(Roboto-Light.ttf);
    font-weight: 300;
}

html {height: 100%; padding: 0; margin: 0;}
body {
    height: 100%;
    padding: 0;
    margin: 0;
    color: #0098df;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    position: relative;
    text-align: right;
}
div#allBack {

    width: 50%;
    height: 245px;
    padding: 60px;
    position: absolute;
    margin: 0;

    top: calc(50% - 180px);

    z-index: 100;
    font-size: 140%;
    text-transform: none;

    background: transparent url('images/backColor.jpg') top left repeat scroll;
}

div#all {

    width: 480px;
    padding: 33px;
    position: relative;
    margin: 0 auto;
    top: calc(50% - 180px);
    height: 300px;

    z-index: 100;
    font-size: 140%;
    text-transform: none;

    background: #FFF url('images/back.jpg') top left no-repeat scroll;
    background-size: cover;

    padding-left: 200px;
}

div#all div.name {
    font-size: 140%;
}

a, a:hover
{
    text-decoration: none;
    color: inherit;
}
ul {
    direction: rtl;
    text-align: right;
    list-style-type: disc;
    margin: 0;
    padding: 0;
    list-style-position: inside;
}


@media all and (max-width: 700px), all and (max-device-width: 700px) {
    div#allBack {display: none;}
    div#all {
        font-size: 100%;
        padding: 25px;
        width: calc(100% - 50px);
        top: calc(50% - 150px);
    }
}


@media all and (max-width: 400px), all and (max-device-width: 400px) {
    div#all {
        background: none;
        top: 0;
    }
}