@font-face {
	font-family: "DBfont";
	src: url("./../fonts/Structia-Rg.ttf") format("ttf"), url('./../fonts/Structia-Rg.woff') format('woff');
}

html, body{
    margin:0px;
    overflow-x: hidden;
    background-color: #6a0000;
}

*:focus{
    outline: none;
}

.header{
    position: relative;
    top:0px;
    left: 0px;
    width: 100%;
    height: 200px;
}

.header .background{
    position: absolute;
    top:0px;
    left: 0px;
    width: 100%;
    height: 200px;
    background-image: url(../img/background_05_red.jpg);
    background-size: cover;
    background-position: center 60%;
    border-bottom:solid 2px #000;
}

.title{
    position: absolute;
    top:0px;
    left:0px;
    width: 100%;
    height: 100%;
}

.title hr.left{
    position: absolute;
    left:0px;
    width:35%;
    height:5px;
    margin-top:70px;
    border-top: solid 2px #F40;
    border-bottom: solid 2px #FF0;
    border-left:none;
    border-right:none;
    filter: drop-shadow(1px 2px 0px #000);
    z-index:1;
}

.title hr.right{
    position: absolute;
    right:0px;
    width:35%;
    height:5px;
    margin-top:70px;
    border-top: solid 2px #F40;
    border-bottom: solid 2px #FF0;
    border-left:none;
    border-right:none;
    filter: drop-shadow(-1px 2px 0px #000);
    z-index:1;
}

.header .logo img{
    position: absolute;
    top: 0px;
    width: 300px;
    left: 50%;
    transform: translateX(-50%);
}

.header .text{
    position: absolute;
    bottom: 10px;
    width: 100%;
    text-align: center;
    font-family: 'DBfont';
    font-size: 3vw;
    color:#fff;
}

.firstBanner{
    position: relative;
    width: 100%;
    height: 700px;
/*    border-bottom: solid 2px #000;*/
    overflow: hidden;
    background-image: url(../img/background_05.jpg);
    background-position: center bottom;
    background-size: cover;
}

.kimono img{
    position: absolute;
    bottom: -25%;
    left:50%;
    transform: translateX(-50%);
    width: 600px;
    filter: drop-shadow(0px 0px 15px #0009);
}

.mangaLine{
    position: absolute;
    top:0px;
    left:0px;
    width: 100%;
    height:100%;
    background-image: url(../img/mangaLine.png);
    background-size: cover;
    background-position: center center;
    mix-blend-mode: soft-light;
}

.pLeft img{
    position: absolute;
    left:calc(50% - 550px);
    width: 300px;
    bottom: 0px;
    animation: lueur 2s infinite alternate;
}

.pRight img{
    position: absolute;
    right:calc(50% - 550px);
    width: 300px;
    bottom: 0px;
    animation: lueur 2s infinite alternate;
}

@keyframes lueur{
    0%{
        filter: drop-shadow(0px -2px 0px #ffa0);
    }
    100%{
        filter: drop-shadow(0px -2px 10px #ffaf) drop-shadow(0px -8px 15px #f606) drop-shadow(0px -25px 10px #f405);
    }
}

.firstBannerTitle{
    position: relative;
    font-family: "DBfont";
    font-size: 120px;
    text-align: center;
    color: #fff;
    text-shadow: -4px 0px 0px #000, 4px 0px 0px #000, 0px -4px 0px #000, 0px 4px 0px #000, 4px 4px 0px #000, -4px -4px 0px #000, -4px 4px 0px #000, 4px -4px 0px #000;
    transform: translateY(-50%);
    filter:drop-shadow(2px -1px 5px #fa09);
    z-index: 1;
    letter-spacing: 4px;
}



.firstBannerTitle:before{
    content: "CONTACT";
    color: #fff;
    font-family: "DBfont";
    position: absolute;
    z-index: -1;
    text-shadow: none;
    transform: rotate(0deg) scale(1);
    opacity: 0.3;
    filter: drop-shadow(0px 0px 10px #fff9) blur(1px);
    animation : glitch1  1.1s infinite steps(2);
}

@keyframes glitch1{
    0%{
        transform: rotate(0deg) scale(1);
    }
    
    30%{
        transform: rotate(-5deg) scale(1.1);
    }
    
    50%{
        transform: rotate(0deg) scale(0.8);
    }
    
    70%{
        transform: rotate(-10deg) scale(1);
    }
    
    100%{
        transform: rotate(10deg) scale(1.2);
    }
}


.firstBannerTitle:after{
    content: "CONTACT";
    color: #fff;
    font-family: "DBfont";
    position: absolute;
    left:50%;
    z-index: -1;
    text-shadow: none;
    transform: rotate(0deg) translateX(-50%);
    opacity: 0.3;
    filter: drop-shadow(0px 0px 10px #f009) blur(2px) saturate(2);
    animation : glitch2  .9s infinite steps(3);
}

@keyframes glitch2{
    0%{
        transform: rotate(0deg) translateX(-50%) scale(1);
    }
    
    30%{
        transform: rotate(1deg) translateX(-50%) scale(1.1);
    }
    
    50%{
        transform: rotate(-2deg) translateX(-50%) scale(0.9);
    }
    
    70%{
        transform: rotate(3deg) translateX(-50%) scale(1);
    }
    
    100%{
        transform: rotate(0deg) translateX(-50%) scale(1.2);
    }
}

.info{
/*    position: relative;*/
    width: 100%;
    height:350px;
    background-color:#a00;
    background-image: radial-gradient(#0004 30%, transparent 0), radial-gradient(#0004 30%, transparent 0);
    background-position: 0 0, 10px 10px;
    background-size: 20px 20px;
    margin-top:-130px;
}

.info .bulle{
    position: relative;
    top:-30px;
    left:50%;
    transform: translateX(-50%);
    padding:20px;
    width:950px;
    height:350px;
    background-image:url(../img/mangaBulle2.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.mangatext{
    position: relative;
    width: 700px;
    /* height: 400px; */
    font-family: "DBfont";
    font-size: 24px;
    text-align: center;
    left: 50%;
    top: -85%;
    transform: translateX(-50%);
}

.kimonoTable{
    position: relative;
    width: 100%;
    height:600px;
    color:#fff;
    font-family: "DBfont";
    text-shadow: -4px 0px 0px #000, 4px 0px 0px #000, 0px -4px 0px #000, 0px 4px 0px #000, 4px 4px 0px #000, -4px -4px 0px #000, -4px 4px 0px #000, 4px -4px 0px #000;
    font-size:10vw;
}

.tramage{
    background-image: radial-gradient(#0002 30%, transparent 0), radial-gradient(#0002 30%, transparent 0);
    background-position: 0 0, 10px 10px;
    background-size: 20px 20px;
}

.persoTable{
    position: absolute;
    width: 130px;
    filter: drop-shadow(0px 0px 8px #0006);
    pointer-events: none;
    z-index:2;
}

.model1, .model2, .model3{
    font-size:80px;
    width:100%;
    height:100%;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: background-color 0.5s;
}

.text1{
    position: absolute;
    display: inline-block;
    top:calc(50% - 10px);
    left:-100%;
    transform: translateY(-50%);
    pointer-events: none;
    transition: left 0.3s;
    display: none;
}
.text2{
    position: absolute;
    display: inline-block;
    top:calc(50% - 10px);
    right:-100%;
    transform: translateY(-50%);
    pointer-events: none;
    transition: right 0.3s;
    display: none;
}
.text3{
    position: absolute;
    display: inline-block;
    top:calc(50% - 20px);
    text-align: center;
    pointer-events: none;
    transition: opacity 0.1s;
    font-size:38px;
    width:100%;
    opacity:0;
}

.model1:hover, .model2:hover, .model3:hover{
    background-color: #0008;
    background-image: radial-gradient(#0002 30%, transparent 0), radial-gradient(#0002 30%, transparent 0);
    background-position: 0 0, 10px 10px;
    background-size: 20px 20px;
}

.model1:hover .text1, .model2:hover .text1, .model3:hover .text1{
    left:calc(50% - 150px);
}

.model1:hover .text2, .model2:hover .text2, .model3:hover .text2{
    right:calc(50% - 150px);
}

.model1:hover .text3, .model2:hover .text3, .model3:hover .text3{
    transition: opacity 0.5s;
    opacity:1;
}

.itemCat{
    cursor: pointer;
    transition: all 0.3s;
}

.itemCat:hover{
    font-size:110px;
    filter: saturate(2) brightness(1.2);
}

.lock{
    position: fixed;
    top:0px;
    left:0px;
    width:100vw;
    height:100vh;
    z-index: 1000;
    pointer-events: all;
    background-color: #444;
    mix-blend-mode: color;
}



.base_tbl{
    width: 100%;
/*    box-shadow: 0px 0px 30px #0002;*/
}
.base_tbl th{
    width: 250px;
    height:40px;
    background-color:lightgray;
    border-bottom: solid 1px #fff;
}
.base_tbl td{
    height:40px;
    background-color:#fff;
    padding:10px;
}

.base_tbl tr:hover th{
    background-color:#eee;
}

.contentinside{
    position: relative;
    padding:10px;
    width: 80%;
    left:10%;
    box-shadow: 0px 0px 30px #0002;
    text-align: justify;
    background-color: #fff;
}