@charset "utf-8";
/*@import url(http://fonts.googleapis.com/css?family=Libre+Baskerville:400,700&subset=latin);*/
@import url(https://fonts.googleapis.com/css?family=Noto+Sans:400,700&subset=latin,cyrillic);
*{ background-repeat: no-repeat; }
a img{ border: none; }
html, body{ margin:0; padding:0; width: 100%; height: 100%; }
body {
    /*font-family: 'Libre Baskerville', serif;*/
    font-family: 'Noto Sans', sans-serif;
    font-size: 18px;
    color: #333;
    background-color: #000;
    overflow: hidden;
    /*background: red;*/
}


body .main{
    display: block; width: 2400px; height: 3200px;
    /*background-color: #000;*/
    /*padding: 100px;*/
    padding: 0px;
    position: absolute; left:0px; top: 0px;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Chrome/Safari/Opera */
    -khtml-user-select: none;    /* Konqueror */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* IE/Edge */
    user-select: none;           /* non-prefixed version, currently */
    /*background-color: red;*/
    font-size: 0;
    /*background-color: #400;*/
    overflow: hidden;
}

.main .mover{
    display: block; width: 100%; height: 100%;
    position: absolute; left: 0; top: 0;
    /*background: rgba(255,255,0, 0.11);*/
}

.main .card{
    display: inline-block; width: 600px; height: 400px;
    /*margin: 100px;*/
    margin: 0px; padding: 0; 
    /*background: #111; */
    background: #000; 
    /*background: #f00; */
    /*float: left;*/
    position: relative; 
    cursor: pointer;
    /*box-shadow: inset 0 0 10px #ff0;*/
    /*font-size: 18px;*/
    /*display: none;*/
}

.main .card.cover{
    background-image: url(bk1.jpg);
    background-size: 100%;
    box-shadow: 
        inset 0 0 50px #000, inset 0 0 50px #000, inset 0 0 50px #000,
        inset 0 0 100px #000, inset 0 0 100px #000, inset 0 0 100px #000;

}
.card.cover .header{
    display: block; width: 100%;
    margin-left: 75px;
    font-size: 45px; line-height: 50px;
    color: #fff;
    text-shadow: 0 0 10px #000, 0 0 20px #000;
    position: absolute; top: 75px;
}
.card.cover .header p{
    margin: 0; padding: 0;
}
.card.cover .banner {
    background: rgba(0,0,0,0.33);
    display: block; 
    /*width: calc(100% - 57px - 150px);*/
    width: auto; left:0;
    position: absolute; /*right: 75px; bottom: 75px;*/
    right: 0; bottom: 0;
    padding-bottom: 35px; 
    padding-right: 75px;
    padding-left: 150px;
    font-size: 18px;
    line-height: 20px;
    text-align: right;
    color: #fff;
    text-shadow: 0 0 7px #000, 0 0 7px #000;
}
.card.cover .banner p{
    margin:10px 0px; padding:0;
}



.card.pict{
    position: relative;
}
.card.pict .img{
    display: block; 
    /*width: 100%; height: 100%;*/
    width: 80%; height: 80%;
    position: absolute; left: 10%; top: 10%;
    /*background-color: #111;*/
    background-color: #010B1D;
    background-size: auto 100%;
    background-position: center center;
    display: none;
    box-shadow: 
        inset 0 0 50px #000, inset 0 0 50px #000, inset 0 0 50px #000;
        /*inset 0 0 100px #000, inset 0 0 100px #000, inset 0 0 100px #000;*/
}
.card.pict .title{
    display: block;
    /*min-width: 586px;*/
    position: absolute; left: 10%; right: 10%;
    top: 90%;
    background: rgba(0,0,0,0.33);
    font-size: 16px;
    line-height: 18px;
    text-align: center;
    color: #555;
    padding: 7px;
    display: none;
}
.im001{ background-image: url(img001.jpg); }
.im002{ background-image: url(img002.jpg); }
.im003{ background-image: url(img003.jpg); }
.im004{ background-image: url(img004.jpg); }
.im005{ background-image: url(img005.jpg); }
.im006{ background-image: url(img006.jpg); }
.im007{ background-image: url(img007.jpg); }
.im008{ background-image: url(img008.jpg); }
.im009{ background-image: url(img009.jpg); }
.im010{ background-image: url(img010.jpg); }
.im011{ background-image: url(img011.jpg); }
.im012{ background-image: url(img012.jpg); }
.im013{ background-image: url(img013.jpg); }
.im014{ background-image: url(img014.jpg); }
.im015{ background-image: url(img015.jpg); }
.im016{ background-image: url(img016.jpg); }
.im017{ background-image: url(img017.jpg); }
.im018{ background-image: url(img018.jpg); }
.im019{ background-image: url(img019.jpg); }
.im020{ background-image: url(img020.jpg); }
.im021{ background-image: url(img021.jpg); }
.im022{ background-image: url(img022.jpg); }
.im023{ background-image: url(img023.jpg); }
.im024{ background-image: url(img024.jpg); }
.im025{ background-image: url(img025.jpg); }
.im026{ background-image: url(img026.jpg); }
.im027{ background-image: url(img027.jpg); }
.im028{ background-image: url(img028.jpg); }



@media screen and (max-width: 780px) {
    body .main{
        display: block; width: 100%; height: 10000px;
        overflow: auto;
        /*background:red;*/
    }
    body .main .mover{
        /*background: blue;*/
        margin:0;
    }
    .main .card{
        width: 100%; /*height: 246px;*/
        margin: 30px 0px;

    }
    .main .card.pict .img{
        width: 90%; height: 90%;
        left:5%; top:5%;
        background-size: 100%;
        background-position: middle center;
    }
    .main .card.pict .title{
        width: calc(100% - 20px);
        left:0; right: 0;
        padding: 10px;
        color: #999;
    }
    .main .card.cover .header{
        font-size: 26px;
        line-height: 28px;
        top: 25px;
        margin-left: 40px;
        width: calc(100% - 40px);
    }
    .main .card.cover .banner{
        font-size: 16px;
        line-height: 17px;
        padding:0;
    }
    .main .card.cover .banner p{
        margin:3px 10px;
    }
}


@media screen and (max-height: 420px) {
    body .main{
        display: block; width: 100%; height: 100%;
        overflow: auto;
        /*background:red;*/
    }
    body .main .mover{
        /*background: blue;*/
        margin:0;
    }
    .main .card{
        width: 200px; height: 246px;
        margin: 30px 0px;

    }
    .main .card.pict .img{
        width: 90%; height: 90%;
        left:5%; top:5%;
        background-size: 100%;
        background-position: middle center;
    }
    .main .card.pict .title{
        width: calc(100% - 20px);
        left:0; right: 0;
        padding: 10px;
        color: #999;
    }
    .main .card.cover .header{
        font-size: 26px;
        line-height: 28px;
        top: 25px;
        margin-left: 40px;
        width: calc(100% - 40px);
    }
    .main .card.cover .banner{
        font-size: 16px;
        line-height: 17px;
        padding:0;
    }
    .main .card.cover .banner p{
        margin:3px 10px;
    }
}