body { 
    color:#e4e4e4;
    font-family: sans-serif;
    margin:0;
    /*padding:10% 60% 0% 10%;*/
    line-height: 1.6em;
    
    background-color:#000; 
    /*background-image: url("/i/kirill59.jpg");*/
    background-image: url("/i/kirilllissijenko-017.jpg");
    min-height: 1000px;
    background-attachment: fixed;
    background-position: right top;
    background-repeat: no-repeat;
    /*background-size: cover;*/
}

.container {
    background: url(/i/keys_left.png) repeat-y;
    padding: 10% 20% 0% 150px;
}

h1 span {
    display: block;
    font-size:50%;
    line-height: 0.7em;
    margin-top:15px;
    color:#bbb;
	white-space: nowrap;
}

h1 {
    font-size: 80px;
    line-height: 0.7em;
    color:#fff;
    background: -webkit-linear-gradient(#ff0038, #3f3f3f);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;    
	animation: stagger 1s steps(30);
}

h2 { 
    margin: 60px 0 30px 0;
    color:#fff;
}

a {
    color:#bc272d;
}

.p {
    color:#c2c2c2;;
}

#poster {
}

#poster b {
    color:#fff;
}

#poster div {
    margin:15px 0;
}

#portfolio {
}

#portfolio div {
    /*margin:15px 0;*/
    float:left;
    margin: 15px 50px 15px 0;
}

#portfolio .video iframe {
    border:1px solid #eee;
	width:355px;
	height:200px;
}
#portfolio span {
    display: block;
}

#bio {
    max-width: 1200px;
}

#contact {
    padding:0 0 60px 0;
}

#contact a {
    display: block;
	text-decoration:none;
	margin:0 0 15px 0;
}

.p { 
    min-width: 350px;
}

.date {
	display:block;
}

.shortday {
    font-size:80% !important;
    color:#777;
}

.today {
    color:rgb(255, 0, 0);
    font-size:11px;
    margin:0 !important;
}

.break { clear:both; }

/** foto **/
#foto {
    margin:3em 0;
}
#foto img {
	width:100%;
	max-width:400px;
    opacity: 0.9;
}
#foto img:hover {
    opacity: 1;
}
#copyright {
	font-size:90%;
	margin:0 0 30px 0;
    color: #ccc;
}
.event {  display: flex; clear: both;  background: linear-gradient(135deg, rgb(18 0 255 / 40%) 0%, rgba(125, 185, 232, 0) 100%);  border-radius: 10px;    padding: 15px; max-width:500px; }
.event .date { float:left; width:100px; height:100px; background:;  }
.event .date .month { display:block; font-weight:bold; text-align:center; margin:0px 0 5px 0; background: rgb(255 255 255 / 40%); }
.event .date .day { float:left; font-size:50px; font-weight:bold; }
.event .date .weekday { float:left; }
.event .date .time { display:block; clear: both;  text-align:center; margin:15px 0 0 0; line-height:2em; font-weight:bold; }
.event .concert { float:left; margin-left:30px !important; }
.event .name { display:block; font-weight:bold; }
.event .map { display:block; }
.event .map a { text-decoration: none; }
.event .hall { display:block;  }
.event .tickets { display: block; }
.event .tickets a { text-decoration: none; font-weight:bold; color:#ff000a; }

#poster .event {
    animation: event-appear 0.3s ease-out;
}

@keyframes event-appear {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    #poster .event {
        animation: none;
    }
}

@keyframes stagger {
  from {width: 0;}
  to {width: 100%;}
}

@media only screen and (max-width: 700px) { 
  .container {
    background-image:none;
    padding: 15px 0 0 15px;
    width: 100%;
  }
  h1 {
    font-size: 70px;
    margin: 30px 0 0 0;
    padding: 0;
  }
  h2 {
	margin: 130px 0 30px 0;
  }
  #portfolio .video iframe {
    border:1px solid #eee;
	/*width:300px;
	height:180px;*/
  }
  .event {
    width: 85%;
  }
  .event .concert {
    margin-left: 15px !important;
  }
  #foto img {
	max-width: 90%;
    opacity:1;
  }
  .p {
    .p {
    min-width: auto;
	width:85%;
  }
}