@font-face{
font-family:'General Sans Regular';
src:url('font/GeneralSans-Regular.eot');
src:url('font/GeneralSans-Regular.eot?#iefix') format('embedded-opentype'), url('font/GeneralSans-Regular.woff2') format('woff2'), url('font/GeneralSans-Regular.woff') format('woff');
font-weight:300;
font-style:normal;
font-display:swap;
}

@font-face{
font-family:'General Sans Semibold';
src:url('font/GeneralSans-Semibold.eot');
src:url('font/GeneralSans-Semibold.eot?#iefix') format('embedded-opentype'), url('font/GeneralSans-Semibold.woff2') format('woff2'), url('font/GeneralSans-Semibold.woff') format('woff');
font-weight:600;
font-style:normal;
font-display:swap;
}

@font-face{
font-family:'Neue Droschke';
src:url('font/NeueDroschke.eot');
src:url('font/NeueDroschke.eot?#iefix') format('embedded-opentype'), url('font/NeueDroschke.woff2') format('woff2'), url('font/NeueDroschke.woff') format('woff');
font-weight:normal;
font-style:normal;
font-display:swap;
}

:root{
--font:'General Sans Regular', Arial, sans-serif;
--font-bold:'General Sans Semibold', Arial, sans-serif;
--font-spe:'Neue Droschke', Arial, sans-serif;
--rouge:#C42D30;
}

*{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
margin:0;
padding:0;
outline:none;
}

html{
overflow-x:hidden;
height:100%;
}

body{
width:100%;
height:100%;
-webkit-font-smoothing:antialiased;
-webkit-text-size-adjust:100%;
overflow:hidden;
color:#000;
background-color:var(--rouge);
font-family:var(--font);
font-size:21px;
line-height:21px;
padding:30px;
}

a, a:hover, a:focus{
color:inherit;
border:0;
text-decoration:none;
}

img{
border:none;
max-width:100%;
image-rendering:auto;
display:block;
}

svg{
display:block;
max-width:100%;
height:auto;
}

figure{
padding:0;
margin-block-start:0;
margin-block-end:0;
margin-inline-start:0;
margin-inline-end:0;
}

address{font-style:normal;}

ul{list-style-type:none;}

ul, ol{list-style-position:inside;}

label{display:block;}

canvas{-ms-touch-action:double-tap-zoom;}

h1, h2, h3, h4, h5{
font-weight:normal;
display:inline-block;
font-size:inherit;
}

header, nav, footer, section, article, aside, figure, figcaption, mark, time, address{display:block;}

sup, sub{text-transform:none;}

.clrb{clear:both;}

main{
display:flex;
flex-flow:column;
width:1860px;
max-width:100%;
margin:0 auto;
height:100%;
}

.landing{
flex:1;
position:relative;
border-right:1px solid #000;
}

.landing > ul{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
display:flex;
flex-flow:row wrap;
overflow:hidden;
}

.landing > ul li{
width:calc(100% / 24);
height:calc(100% / 11);
border-left:1px solid #000;
border-top:1px solid #000;
}

.landing article{
position:relative;
width:calc(((100% / 24) * 14) - 1px);
height:calc(((100% / 11) * 4) - 1px);
top:calc(((100% / 11) * 4) + 1px);
left:calc(((100% / 24) * 5) + 1px);
background-color:var(--rouge);
display:flex;
}

.landing article figure{
display:flex;
flex-flow:column;
justify-content:center;
align-items:center;
width:calc((100% / 14) * 4);
background-color:#000;
height:100%;
}

.landing article figure img{
margin:0 auto;
max-height:100%;
}

.landing article div{
display:flex;
flex-flow:column;
justify-content:center;
align-items:center;
font-family:var(--font-spe);
text-transform:uppercase;
flex:1;
text-align:center;
font-size:87px;
line-height:87px;
padding:0 30px;
}

footer{
display:flex;
border:1px solid #000;
padding:35px 75px 30px 75px;
}

footer div + div{padding-left:50px;}

footer div:first-child + div{margin-left:auto;}

footer div:first-child{text-transform:uppercase;}

footer div strong{
font-family:var(--font-bold);
font-weight:normal;
}

/********** medias **********/
@media screen and (max-width:1580px){
footer{padding:30px 50px;}

body{
font-size:18px;
line-height:20px;
}
}

@media screen and (max-width:1660px), screen and (max-height:740px){
.landing article div{
font-size:70px;
line-height:70px;
}
}

@media screen and (max-width:1360px), screen and (max-height:660px){
.landing article div{
font-size:55px;
line-height:55px;
}
}

@media screen and (max-width:1180px){
footer{padding:20px 25px;}

body{
font-size:16px;
line-height:18px;
}

.landing > ul li{
width:calc(100% / 20);
height:calc(100% / 9);
}

.landing article{
width:calc(((100% / 20) * 14) - 1px);
height:calc(((100% / 9) * 4) - 1px);
top:calc(((100% / 9) * 2) + 1px);
left:calc(((100% / 20) * 3) + 1px);
}
}

@media screen and (max-width:980px){
.landing article div{
font-size:40px;
line-height:40px;
}

footer{
flex-flow:row wrap;
justify-content:center;
text-align:center;
padding:20px 0;
}

footer div:first-child{width:100%;}

footer div:first-child + div{margin-left:0;}

footer div + div{padding:15px 15px 0 15px;}
}

@media screen and (max-width:780px){
body{padding:15px;}

.landing > ul li{
width:calc(100% / 10);
height:calc(100% / 6);
}

.landing article{
width:calc(((100% / 10) * 8) - 1px);
height:calc(((100% / 6) * 3) - 1px);
top:calc((100% / 6) + 1px);
left:calc((100% / 10) + 1px);
}

.landing article figure{width:calc((100% / 8) * 3);}
}

@media screen and (max-width:620px){
.landing{
flex:auto;
height:50%;
}

footer{
flex-flow:column;
height:50%;
}

.landing > ul li {
width:calc(100% / 8);
height:20%;
}

.landing article{
width:calc(((100% / 8) * 6) - 1px);
height:calc(60% - 1px);
top:calc(20% + 1px);
left:calc((100% / 8) + 1px);
}

.landing article figure{width:calc(100% / 2);}

.landing article div{
font-size:25px;
line-height:25px;
padding:0 10px;
}
}

@media screen and (max-width:400px){
.landing > ul li {
width:calc(100% / 14);
height:calc(100% / 9);
}

.landing article{
width:calc(((100% / 14) * 12) - 1px);
height:calc(((100% / 9) * 7) - 1px);
top:calc((100% / 9) + 1px);
left:calc((100% / 14) + 1px);
}
}