.item{
    position: relative;
    float: left;
    width: 100%;
    margin-right: 0px;
    margin-bottom: 80px;
}


.item img{
    width: 100%;
}

.item .bar{
    position: absolute;
    float: left;
    bottom: 0px;
    width: 100%;
    padding: 15px 0px;
    background-color: rgba(79,79,79,.8);
    opacity: 1;
    transition: 0.3s;
}



.item .read, .item .download{
    float: left;
    width: 100%;
    text-align: center;
}

.item .read{
    border-right: solid 1px #fff;
}


.item .read img, .item .download img{
    width: 30px;
}

.bar span{
    padding: 10px 15px;
    float: left; 
	width: 100%;
	max-width: 100%;
}
.bar span input[name="email"] {
	display: block;
	position: relative;
	width: 100%;
}
.bar span button{
    padding: 2px 8px;
    background-color: #fff;
    color: #333;
    letter-spacing: 3px;
    margin-top: 5px; 
}

@media only screen and (min-width: 481px) {
.item{
    width: calc(50% - 20px);
    margin-right: 20px;
    margin-bottom: 80px;
}

.item:nth-child(2n){
    /*margin-right: 0px;*/
}

.item:nth-child(2n+1){
    clear: left;
}






}

@media only screen and (min-width: 1025px) {
.item{
    width: calc(25% - 20px);
}

.item:nth-child(2n+1){
    clear: none;
}

.item:nth-child(4n){
    margin-right: 0px;
}

.item:nth-child(4n+1){
    clear: left;
}



.item .bar{
    opacity: 0;
}

.item:hover .bar{
    opacity: 1;
}


.item .bar:hover .item .download{
    opacity: 0;
}

}
.item [name="agree"] {
  pointer-events: none;
}
.item .loadding-status {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.2);
	content: "";
	transition: all ease .3s;
	opacity: 0;
	pointer-events: none;
	z-index: 100;
}
.item .loadding-status.show {
  opacity: 1;
  
}
.item .loadding-status::before,
.item .loadding-status::after {
  width: 60px;
	height: 60px;
	position: absolute;
	border-radius: 50%;
	content: "";
	top: 50%;
	left: 50%;
	margin: -30px 0 0 -30px;
	transform-origin: 50%;
	transition: all ease .3s;
}

.item .loadding-status::before {
  box-shadow: inset 0 0 3px 0 rgba(0,0,0,0.25), 0 0 0 8px #fff;
	transform: scale(.82);
}

.item .loadding-status::after {
  border: 4px solid transparent;
	border-top-color: red;
	animation: rou 1s linear infinite;
}

@keyframes rou {
	0%{ transform: rotate(0deg); }
	100% { transform: rotate(360deg);}
}