banner.css

#bannierManga {
    max-width: 1024px;
    height: 250px;
    position: relative;
}
#bannierManga img {
    max-height: 250px;
}
#accroche {
    position: absolute;
    top: 37%;
    left: -20px;
    ;
    -ms-transform: rotate(354deg);
    /* IE 9 */
    
    -webkit-transform: rotate(354deg);
    /* Chrome, Safari, Opera */
    
    transform: rotate(354deg);
    background-color: rgb(172, 26, 29);
    width: 1070px;
    height: 70px;
    font-size: 40px;
    color: white;
    text-align: center;
    line-height: 70px;
}
#crypted-message{
	position : absolute;
	top : 65%;
	left : 440px;
	color : #AC1A1D;
	font-size: 20px;
	font-weight : bolder;
	width : 55%;
	text-align : center;
}

/* IE10+ specific styles go here */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
   #accroche {
    font-size: 20px;
   }
}

@media (max-width: 780px) {
    /*Banner*/
    
    #bannierManga {
        max-width: 100% !important;
        height: auto !important;
    }
    #bannierManga img {
        max-width: 100% !important;
        height: auto !important;
    }
    #accroche {
        position: static;
        -ms-transform: none;
        /* IE 9 */
        
        -webkit-transform: none;
        /* Chrome, Safari, Opera */
        
        transform: none;
        background-color: rgb(172, 26, 29);
        max-width: 100%;
        height: 40px;
        font-size: 18px;
        color: white;
        text-align: center;
        line-height: 40px;
    }
	#crypted-message{
	position : absolute;
	top : 20%;
	left : 20%;
	font-size : 25px;
	font-weight : bolder;
	width : 75%;
	text-align : center;
	}
}

/* 640px */

@media (max-width: 640px) {
	#crypted-message{
	position : absolute;
	font-size : 16px;
	top : 5%;
	right : 5%;
	}
}