.item {
    text-align:center;
    float:left;
    margin:5px;
    position:relative;			
}

.item,
.item-hover,
.item-hover .mask,
.item-img,
.item-type-move .item-info {
    width: 100%;
    height: 210px;						
}
.item-type-move .item-info .ban-bot-gd {
    width: 100%;
    height: 200px;						
}
.item-type-move .item-info .ban-bot-gd {
    width: 100%;
    height:100%;						
}			

.item-hover,
.item-hover .mask,
.item-img { 
    position:absolute;
    top:0;
    left:0;			
}			

.item-type-move .item-hover {	
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    transition: all 300ms ease-out;	
    opacity:0;
    cursor:pointer;		
    z-index:100;
}

.item-type-move .item-info {
    z-index:10;
    color:#ffffff;
    position:relative;
    z-index:5;			
    overflow:hidden;			
}

.item-type-move .item-info .headline,
.item-type-move .item-info .date {
    width: 100%;
    width: 55%;
    position: absolute;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    padding: 0 10px;
    font-family: 'Aladin', cursive;
    margin: 0 auto;
    left: 22%;										
}				

.item-type-move .item-info .headline {
    font-size:18px;			
    top:10px;							
}

.item-type-move .item-info .date {
    font-size:14px;
    font-style:italic;
    bottom:10px;																		
}

.item-type-move .item-info .line {
    height:1px;
    width:85%;
    margin:2px auto 0 auto;
    background-color:#ffffff;		 
}				

.item-type-move .item-hover .mask {
    background-color:#000;
    opacity:0.5;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);					
    z-index:0;
}

.item-type-move .item-hover:hover {
    opacity:1;
}				

.item-type-move .item-hover:hover .item-info .headline {
    top:35%;
}				

.item-type-move .item-hover:hover .item-info .date {
    bottom:40%;
}
.item-img {			
    background-color:#7a548f;
    z-index:0;			
}
@media(max-width:1024px){			
    .item, .item-hover, .item-hover .mask, .item-img, .item-type-move .item-info {
        width: 100%;
        height: 170px;
    }
    .item-type-move .item-hover:hover .item-info .headline {
        top: 35%;
    }
    .item-type-move .item-hover:hover .item-info .date {
        bottom: 31%;
    }
}
@media(max-width:991px){	
    .item, .item-hover, .item-hover .mask, .item-img, .item-type-move .item-info {
        width: 100%;
        height: 138px;
    }
    .item-type-move .item-info .headline {
        font-size: 15px;
        top: 23px;
    }
    .item-type-move .item-info .date {
        font-size: 12px;
    }
    .item-type-move .item-info .line {
        margin: 2px auto 0 auto;
    }	
}
@media(max-width:768px){	
    .item, .item-hover, .item-hover .mask, .item-img, .item-type-move .item-info {
        width: 100%;
        height: 138px;
    }
    .item-type-move .item-info .headline {
        font-size: 15px;
        top: 23px;
    }
    .item-type-move .item-info .date {
        font-size: 12px;
    }
    .item-type-move .item-info .line {
        margin: 2px auto 0 auto;
    }
}
@media(max-width:736px){	
    .item, .item-hover, .item-hover .mask, .item-img, .item-type-move .item-info {
        width: 100%;
        height: 132px;
    }
}
@media(max-width:667px){	
    .item, .item-hover, .item-hover .mask, .item-img, .item-type-move .item-info {
        width: 100%;
        height: 118px;
    }
}
@media(max-width:640px){	
    .item, .item-hover, .item-hover .mask, .item-img, .item-type-move .item-info {
        width: 100%;
        height: 112px;
    }
    .item-type-move .item-info .headline {
        top: 30px !important;
    }	
    .item-type-move .item-info .line {
        margin: 4px auto 0 auto;
    }
}
@media(max-width:600px){
    .item-type-move .item-info .headline, .item-type-move .item-info .date {
        width: 100%;
        width: 60%;
    }
    .item-type-move .item-info .line {
        margin: 0px auto 0 auto;
    }
}
@media(max-width:568px){
    .item, .item-hover, .item-hover .mask, .item-img, .item-type-move .item-info {
        width: 100%;
        height: 98px;
    }
    .item-type-move .item-info .headline, .item-type-move .item-info .date {
        width: 66%;
    }
    .item-type-move .item-info .headline {
        top: 18px !important;
    }
}
@media(max-width:480px){	
    .item, .item-hover, .item-hover .mask, .item-img, .item-type-move .item-info {
        width: 100%;
        height: 260px;
    }
    .item-type-move .item-info .headline {
        top: 100px !important;
    }	
    .item-type-move .item-hover:hover .item-info .date {
        bottom: 40%;
    }
}
@media(max-width:414px){	
    .item, .item-hover, .item-hover .mask, .item-img, .item-type-move .item-info {
        width: 100%;
        height: 220px;
    }
    .item-type-move .item-info .headline {
        top: 80px !important;
    }
}
@media(max-width:384px){	
    .item, .item-hover, .item-hover .mask, .item-img, .item-type-move .item-info {
        width: 100%;
        height: 203px;
    }
}
@media(max-width:375px){
    .item, .item-hover, .item-hover .mask, .item-img, .item-type-move .item-info {
        width: 100%;
        height: 197px;
    }
    .item-type-move .item-info .headline {
        top: 73px !important;
    }
}
@media(max-width:320px){	
    .item, .item-hover, .item-hover .mask, .item-img, .item-type-move .item-info {
        width: 100%;
        height: 164px;
    }
    .item-type-move .item-info .headline {
        top: 59px !important;
    }
    .item-type-move .item-hover:hover .item-info .date {
        bottom: 30%;
    }	
}

/* Container holding the image and the text */
.container-img {
    position: relative;
    text-align: center;
    color: white;
}

/* Bottom left text */
.bottom-left {
    position: absolute;
    bottom: 8px;
    left: 16px;
}

/* Top left text */
.top-left {
    position: absolute;
    top: 8px;
    left: 16px;
}

/* Top right text */
.top-right {
    position: absolute;
    top: 8px;
    right: 16px;
}

/* Bottom right text */
.bottom-right {
    position: absolute;
    bottom: 8px;
    right: 16px;
}

/* Centered text */
.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

hr { 
    display: block;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    border-style: inset;
    border-width: 1px;
}

//---------------------------------------------------------------------
.blink {
    animation-duration: 1s;
    animation-name: blink;
    animation-iteration-count: infinite;
    animation-timing-function: steps(2, start);
}
@keyframes blink {
    80% {
        visibility: hidden;
    }
}

//---------------------------------------------------------------------