﻿/*new*/
.block-content { width: 100%; display: block; margin:auto;  }
.block{width: 100%;  margin: 30px auto; }

ul.block li { color: #fff; position: relative;  display: block; overflow: hidden; margin:15% auto; min-width: 220px; max-width: 310px; max-height: 650px;  width: 100%; background: #000;}
ul.block li * { -webkit-box-sizing: border-box;  box-sizing: border-box;}
ul.block li > img { opacity: 1;  width: 100%;   filter: blur(0px);   -webkit-transition: all 0.35s;  transition: all 0.35s; -webkit-transform: scale(1.05); transform: scale(1.05);	}
ul.block li figcaption { left: 30px; margin-top: -52px; position: absolute; right: 30px;  text-align: left;  top: 100%; -webkit-transition: top 0.35s; transition: top 0.35s;z-index: 9999;}
ul.block li figcaption h2 {width: 100%; margin: 0; padding:10px 20px 20px 20px;text-align: left; font-size: 1.1rem;  font-weight: 700; text-transform: uppercase; border-radius: 5px 5px 0 0; position: relative;  z-index: 0; background-image: linear-gradient(to top, #651311 0%, #aa2d2b 100%); }
ul.block li figcaption h2 span { font-weight: 700;  z-index: 0;}
ul.block li figcaption p {padding: 15px 20px;  margin: 0; min-height: 220px;font-size: 0.9em; color: #000; font-weight: 700; background-color: rgba(255, 255, 255, 0.9); z-index: 999;}
ul.block li figcaption p a{ display: block;}
ul.block li figcaption p a:hover{ color:#aa2d2b; }
ul.block li figcaption .note { padding: 5px; position: absolute; right: 0; top: 0;}
ul.block li figcaption .note span{  padding: 4px; opacity: 1; color: #fff;font-size:14px; position: relative;  top: -90px;  opacity:0;  -webkit-transition: top 0.35s, opacity 0.35s; transition: top 0.35s, opacity 0.35s;}
ul.block li figcaption .note a:first-child span { -webkit-transition-delay: 0.3s; transition-delay: 0.3s;}
ul.block li figcaption .note a:nth-child(2) span { -webkit-transition-delay: 0.2s; transition-delay: 0.2s;}
ul.block li figcaption .note a:nth-child(3) span {  -webkit-transition-delay: 0.1s; transition-delay: 0.1s;}
ul.block li:after { position: absolute; display: block; top: -15px; height: 15px;  right: 30px;  left: 30px;  border-radius: 0 0 5px 5px ; background-color: #000000; z-index: 2; content: ''; -webkit-transition: top 0.35s; transition: top 0.35s;}
ul.block li a { opacity: 0.7;}
ul.block li a:hover {  opacity: 1; }
ul.block li:hover figure img, ul.block li figure.hover  img {  opacity: 0.3;   }
ul.block li:hover figure figcaption, ul.block li figure.hover figcaption { top: 105px; }
ul.block li:hover  { overflow: visible; transform: translateY(-40px); z-index: 9999;}

ul.block li:hover figcaption .note span,ul.block li.hover figcaption .note span { opacity: 1; top: -41px;}
ul.block li:hover figcaption::before,ul.block li.hover figcaption::before {  opacity: 0.8;}
ul.block li:hover:after,ul.block li.hover:after { top: 0;}

ul.block li img{ }
.mask{width: 0; height: 0; position: absolute;  z-index: 999; border-style: solid;border-width: 200px 100px 0 0px;border-color: rgba(255,255,255,.5) transparent transparent transparent;}
.mask-down{width: 0; height: 0; position: absolute;  right: 0px; z-index: 999; border-style: solid;border-width: 0 0 200px 100px;border-color: transparent transparent rgba(170,45,43,.8) transparent;}

@media (min-width:1002px) {
	ul.block li {display: inline-block;   margin:8% 10px;  }
	ul.block li{  width: 22.5%; margin-right:10px; margin-bottom: 35px;}
	ul.block li:nth-child(4n){ margin-right:0; }
}
