:root {
   --clpoudre: #E0D5C1;
   --clblackmagic: #212117;
   --clblackmagic60: #21211790;
   --clcotton: #f2f3ec;
   --clsable: #DDCC9E;
   --clsouris: #CCC2C0;
   --clvertbouteil: #C1BFAA;
   --cloutline: #B1AF9A;
   --clsuede: #9e7140;
   --fborder: .3px solid var(--cloutline);
   --clblackviolon: #181818;
}

/*@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');*/
/*@import url('https://fonts.cdnfonts.com/css/montserrat');
@import url('https://fonts.cdnfonts.com/css/taviraj');*/

/*#fonts*/

@font-face {
   font-family: 'Taviraj Regular';
   font-style: normal;
   font-weight: normal;
   font-display: swap;
   src: local('Taviraj Regular'), url('../fonts/Taviraj-Regular.woff') format('woff');
}


@font-face {
   font-family: 'Taviraj Italic';
   font-style: normal;
   font-weight: normal;
   font-display: swap;
   src: local('Taviraj Italic'), url('../fonts/Taviraj-Italic.woff') format('woff');
}


@font-face {
   font-family: 'Taviraj Thin';
   font-style: normal;
   font-weight: normal;
   font-display: swap;
   src: local('Taviraj Thin'), url('../fonts/Taviraj-Thin.woff') format('woff');
}


@font-face {
   font-family: 'Taviraj Thin Italic';
   font-style: normal;
   font-weight: normal;
   font-display: swap;
   src: local('Taviraj Thin Italic'), url('../fonts/Taviraj-ThinItalic.woff') format('woff');
}


@font-face {
   font-family: 'Taviraj ExtraLight';
   font-style: normal;
   font-weight: normal;
   font-display: swap;
   src: local('Taviraj ExtraLight'), url('../fonts/Taviraj-ExtraLight.woff') format('woff');
}


@font-face {
   font-family: 'Taviraj ExtraLight Italic';
   font-style: normal;
   font-weight: normal;
   font-display: swap;
   src: local('Taviraj ExtraLight Italic'), url('../fonts/Taviraj-ExtraLightItalic.woff') format('woff');
}


@font-face {
   font-family: 'Taviraj Light';
   font-style: normal;
   font-weight: normal;
   font-display: swap;
   src: local('Taviraj Light'), url('../fonts/Taviraj-Light.woff') format('woff');
}


@font-face {
   font-family: 'Taviraj Light Italic';
   font-style: normal;
   font-weight: normal;
   font-display: swap;
   src: local('Taviraj Light Italic'), url('../fonts/Taviraj-LightItalic.woff') format('woff');
}


@font-face {
   font-family: 'Taviraj Medium';
   font-style: normal;
   font-weight: normal;
   font-display: swap;
   src: local('Taviraj Medium'), url('../fonts/Taviraj-Medium.woff') format('woff');
}


@font-face {
   font-family: 'Taviraj Medium Italic';
   font-style: normal;
   font-weight: normal;
   font-display: swap;
   src: local('Taviraj Medium Italic'), url('../fonts/Taviraj-MediumItalic.woff') format('woff');
}


@font-face {
   font-family: 'Taviraj SemiBold';
   font-style: normal;
   font-weight: normal;
   font-display: swap;
   src: local('Taviraj SemiBold'), url('../fonts/Taviraj-SemiBold.woff') format('woff');
}


@font-face {
   font-family: 'Taviraj SemiBold Italic';
   font-style: normal;
   font-weight: normal;
   font-display: swap;
   src: local('Taviraj SemiBold Italic'), url('../fonts/Taviraj-SemiBoldItalic.woff') format('woff');
}


@font-face {
   font-family: 'Taviraj Bold';
   font-style: normal;
   font-weight: normal;
   font-display: swap;
   src: local('Taviraj Bold'), url('../fonts/Taviraj-Bold.woff') format('woff');
}


@font-face {
   font-family: 'Taviraj Bold Italic';
   font-style: normal;
   font-weight: normal;
   font-display: swap;
   src: local('Taviraj Bold Italic'), url('../fonts/Taviraj-BoldItalic.woff') format('woff');
}


@font-face {
   font-family: 'Taviraj ExtraBold';
   font-style: normal;
   font-weight: normal;
   font-display: swap;
   src: local('Taviraj ExtraBold'), url('../fonts/Taviraj-ExtraBold.woff') format('woff');
}


@font-face {
   font-family: 'Taviraj ExtraBold Italic';
   font-style: normal;
   font-weight: normal;
   font-display: swap;
   src: local('Taviraj ExtraBold Italic'), url('../fonts/Taviraj-ExtraBoldItalic.woff') format('woff');
}


@font-face {
   font-family: 'Taviraj Black';
   font-style: normal;
   font-weight: normal;
   font-display: swap;
   src: local('Taviraj Black'), url('../fonts/Taviraj-Black.woff') format('woff');
}


@font-face {
   font-family: 'Taviraj Black Italic';
   font-style: normal;
   font-weight: normal;
   font-display: swap;
   src: local('Taviraj Black Italic'), url('../fonts/Taviraj-BlackItalic.woff') format('woff');
}

@font-face {
   font-family: 'Montserrat Regular';
   font-style: normal;
   font-weight: normal;
   font-display: swap;
   src: local('Montserrat Regular'), url('../fonts/Montserrat-Regular.woff') format('woff');
}


@font-face {
   font-family: 'Montserrat Italic';
   font-style: normal;
   font-weight: normal;
   font-display: swap;
   src: local('Montserrat Italic'), url('../fonts/Montserrat-Italic.woff') format('woff');
}


@font-face {
   font-family: 'Montserrat Thin';
   font-style: normal;
   font-weight: normal;
   font-display: swap;
   src: local('Montserrat Thin'), url('../fonts/Montserrat-Thin.woff') format('woff');
}


@font-face {
   font-family: 'Montserrat Thin Italic';
   font-style: normal;
   font-weight: normal;
   font-display: swap;
   src: local('Montserrat Thin Italic'), url('../fonts/Montserrat-ThinItalic.woff') format('woff');
}


@font-face {
   font-family: 'Montserrat ExtraLight';
   font-style: normal;
   font-weight: normal;
   font-display: swap;
   src: local('Montserrat ExtraLight'), url('../fonts/Montserrat-ExtraLight.woff') format('woff');
}


@font-face {
   font-family: 'Montserrat ExtraLight Italic';
   font-style: normal;
   font-weight: normal;
   font-display: swap;
   src: local('Montserrat ExtraLight Italic'), url('../fonts/Montserrat-ExtraLightItalic.woff') format('woff');
}


@font-face {
   font-family: 'Montserrat Light';
   font-style: normal;
   font-weight: normal;
   font-display: swap;
   src: local('Montserrat Light'), url('../fonts/Montserrat-Light.woff') format('woff');
}


@font-face {
   font-family: 'Montserrat Light Italic';
   font-style: normal;
   font-weight: normal;
   font-display: swap;
   src: local('Montserrat Light Italic'), url('../fonts/Montserrat-LightItalic.woff') format('woff');
}


@font-face {
   font-family: 'Montserrat Medium';
   font-style: normal;
   font-weight: normal;
   font-display: swap;
   src: local('Montserrat Medium'), url('../fonts/Montserrat-Medium.woff') format('woff');
}


@font-face {
   font-family: 'Montserrat Medium Italic';
   font-style: normal;
   font-weight: normal;
   font-display: swap;
   src: local('Montserrat Medium Italic'), url('../fonts/Montserrat-MediumItalic.woff') format('woff');
}


@font-face {
   font-family: 'Montserrat SemiBold';
   font-style: normal;
   font-weight: normal;
   font-display: swap;
   src: local('Montserrat SemiBold'), url('../fonts/Montserrat-SemiBold.woff') format('woff');
}


@font-face {
   font-family: 'Montserrat SemiBold Italic';
   font-style: normal;
   font-weight: normal;
   font-display: swap;
   src: local('Montserrat SemiBold Italic'), url('../fonts/Montserrat-SemiBoldItalic.woff') format('woff');
}


@font-face {
   font-family: 'Montserrat Bold';
   font-style: normal;
   font-weight: normal;
   font-display: swap;
   src: local('Montserrat Bold'), url('../fonts/Montserrat-Bold.woff') format('woff');
}


@font-face {
   font-family: 'Montserrat Bold Italic';
   font-style: normal;
   font-weight: normal;
   font-display: swap;
   src: local('Montserrat Bold Italic'), url('../fonts/Montserrat-BoldItalic.woff') format('woff');
}


@font-face {
   font-family: 'Montserrat ExtraBold';
   font-style: normal;
   font-weight: normal;
   font-display: swap;
   src: local('Montserrat ExtraBold'), url('../fonts/Montserrat-ExtraBold.woff') format('woff');
}


@font-face {
   font-family: 'Montserrat ExtraBold Italic';
   font-style: normal;
   font-weight: normal;
   font-display: swap;
   src: local('Montserrat ExtraBold Italic'), url('../fonts/Montserrat-ExtraBoldItalic.woff') format('woff');
}


@font-face {
   font-family: 'Montserrat Black';
   font-style: normal;
   font-weight: normal;
   font-display: swap;
   src: local('Montserrat Black'), url('../fonts/Montserrat-Black.woff') format('woff');
}


@font-face {
   font-family: 'Montserrat Black Italic';
   font-style: normal;
   font-weight: normal;
   font-display: swap;
   src: local('Montserrat Black Italic'), url('../fonts/Montserrat-BlackItalic.woff') format('woff');
}

/*#fonts*/


*,
::before,
::after {
   box-sizing: border-box;
   border-width: 0;
   border-style: solid;
   border-color: #e5e7eb;
   margin: 0;
   padding: 0;
}

html {
   line-height: 1.5;
   -webkit-text-size-adjust: 100%;
   -moz-tab-size: 4;
   -o-tab-size: 4;
   tab-size: 4;
   font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   font-feature-settings: normal;
   font-variation-settings: normal;
}

body {
   background-color: var(--clcotton);
   margin: 0;
   padding: 0;
   border: none;
   border-radius: 0;
   font-family: 'Montserrat Light';
   font-size: 22px;
   overflow: hidden;
}

.sectionhead {
   margin: 0;
   padding: 0;
   height: 100vh;
   background-color: var(--clvertbouteil);

}

.sectionhead h1 {
   writing-mode: vertical-lr;
   inline-size: fit-content;
   transform: rotate(-180deg);
   font-family: 'Taviraj Light';
   font-weight: 400;
   width: 1.5em;
}

a,
h1 a,
h2 a,
h3 a {
   font-size: large;
   text-decoration: none;
   color: var(--clblackmagic60);
   color: var(--clsuede);
   font-family: 'Taviraj Light';
}

.scroller {
   height: 100vh;
   overflow-y: scroll;
   overflow-x: hidden;
   scroll-snap-type: y mandatory;
}

.scroller::-webkit-scrollbar-track {
   background: var(--clvertbouteil);
   outline: .5px solid var(--cloutline);
   box-shadow: 3px 3px 13px rgba(0, 0, 0, 0.33);
}

.scroller::-webkit-scrollbar-thumb {
   background-color: var(--clcotton);
   border-radius: 6px;
   border: 1px solid var(--clblackmagic60);
}

.scroller::-webkit-scrollbar {
   width: 11px;
}

.wrapper {
   display: grid;
   /*grid-gap: 10px;*/
   grid-template-columns: 35px 1fr 35px;
   /*background-color: #fff;*/
   color: #444;
   height: 100%;
}

.box {
   /* background-color: #444; */
   color: var(--clblackmagic);
   border-radius: 5px;
   /*padding: 20px;*/
   font-size: 1.2rem;
   /*display: grid;*/
   outline: .5px solid var(--cloutline);
}

.a4 {
   grid-column: 1 / 1;
   grid-row: 1;
   padding: 0;
   height: 100%;
   align-items: center;
   width: 100%;
   max-height: 100vh;
   display: grid;
}

.box.a4 {
   box-shadow: 3px 3px 13px rgba(0, 0, 0, 0.33);
}

.b4 {
   grid-column: 2 / 2;
   grid-row: 1;
}

.sep-row3 {
   grid-column: 3 / 3;
   grid-row: 1;
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: 1fr 1fr 1fr;
   align-items: center;
   padding: 0;
   outline: var(--cloutline) solid .5px;
   max-height: 100vh;
}

div[class^="row-"] {
   height: 100%;
   /* margin: auto; */
   outline: .5px solid var(--cloutline);
   align-items: center;
   display: flex;
}

.row-1 {
   background-color: var(--clvertbouteil);
   grid-column: 1;
   grid-row: 1;
}

.row-2 {
   background-color: var(--clsable);
   grid-column: 1;
   grid-row: 2;
}

.row-3 {
   background-color: var(--clpoudre);
   grid-column: 1;
   grid-row: 3;
}

h2 {
   font-family: 'Taviraj Light';
   font-weight: 400;
   font-size: 2rem;
   padding: 1.5rem 0;
}

h3 {
   font-family: 'Taviraj Light';
   font-weight: 400;
   padding: 1.5rem 0;
}

p {
   font-family: 'Montserrat Italic';
   font-weight: 300;
   font-size: 1.09rem;
   padding: 0;
}

.headerimg {
   background-color: var(--clcotton);
   background-image: url('/img/keitaat_header_1920_907.webp');
   background-position: top;
   width: 100%;
   height: 800px;
   margin: auto;
   box-shadow: 6px 6px 25px rgba(0, 0, 0, 0.5);
   /*margin-bottom: 2rem;*/
}

.footerimg {
   background-image: url('/img/keitaat_footer_1920_1280.webp');
   background-position: 16% 0%;
   background-repeat: no-repeat;
   background-size: cover;
   width: 100%;
   height: 800px;
   margin: auto;
   box-shadow: 6px 6px 25px rgba(0, 0, 0, 0.5);
   /* margin-top: 2rem; */
}

.inernalvideo {
   box-shadow: 6px 6px 25px rgba(0, 0, 0, 0.5);
   margin: 2rem 0;
   width: 100%;
   aspect-ratio: 16 / 9;
   /*min-height: calc(80vw * 1080.0 / 1920.0);*/
}

.firstcadre {
   display: grid;
   grid-template-columns: 30% 30% 40%;
   align-items: center;
   outline: .5px solid var(--cloutline);
   box-shadow: 3px 3px 13px rgba(0, 0, 0, 0.33);
   margin: 50px -50px 0 -50px;
}


.firstcadre div p {
   font-size: 0.7rem;
}

.firstcadre .fspan p {
   text-align: center;
   font-size: large;
   font-family: 'Taviraj Italic';
}

.firstcadre div {
   display: grid;
   padding: 10px 35px;
   vertical-align: middle;
   /*outline: .5px solid var(--cloutline);*/
   box-shadow: 0 .5px 0 var(--cloutline) inset;
   min-height: 125px;
   align-content: center;
}

.firstcadre .colgauche {
   grid-column: 1;
   grid-row: 1 / 6;
   padding: .8rem;
   height: 100%;
   outline: .5px solid var(--cloutline);
   background-color: var(--clsouris);
}

.firstcadre .colgauche h3 {
   font-family: 'Taviraj Light Italic';
   font-weight: 400;
   padding: 35px 0.9rem;

}

.firstcadre .colgauche p {
   font-size: 0.9rem;
   padding: 4px 0.9rem;
}

.motgauche {

   font-family: 'Taviraj Light';
   font-weight: 400;
   font-size: 2rem;
   padding: 1.5rem;
   align-items: center;
}

.pann {
   /*background-color: var(--clcotton);*/
}

.pann0 {
   background-color: var(--clvertbouteil);
   box-shadow: 3px 3px 13px rgba(0, 0, 0, 0.33);
   margin: 25px 0;
   padding: 50px;
}

.pann0 h2 {
   text-transform: uppercase;
}

.pann1 {
   background-color: var(--clsable);
   box-shadow: 3px 3px 13px rgba(0, 0, 0, 0.33);
   padding: 25px 0;
}

.pann0 h2,
.pann1 h2 {
   font-family: 'Taviraj Light Italic';
   padding: 5px;
}

.pann0 p,
.pann1 p {
   padding: 5px;
}

.pann_full {
   padding: 0;
}

.eventgrid {
   display: grid;
   grid-template-columns: 10% 35% 5% 45% 5%;
   grid-template-rows: auto;
   grid-template-areas:
      "event_type col_txt_haut col_vide_haut col_img_haut col_vide"
      "event_type col_txt col_vide_centre col_img col_vide"
      "event_type col_txt_bas col_vide_bas col_img_bas col_vide";
   grid-gap: 0;
   grid-column-gap: 0;
   grid-row-gap: 0;
   box-shadow: 3px 3px 13px rgba(0, 0, 0, 0.33);
   margin: 0 -50px;
}

.item-event_type {
   grid-area: event_type;
   align-items: center;
   border: var(--fborder);
}

.item-event_type h4 {
   font-family: 'Taviraj Light';
   writing-mode: vertical-lr;
   transform: rotate(-180deg);
   inline-size: fit-content;
   font-weight: 400;
   width: 100%;
   line-height: 100%;
   align-items: center;
   display: flex;
   letter-spacing: .4rem;
   font-size: 1.5rem;
}

.item-col_txt_haut {
   grid-area: col_txt_haut;
   /*border-left: var(--fborder);*/
   border-top: var(--fborder);
   border-bottom: var(--fborder);
}

.item-col_txt {
   grid-area: col_txt;
   padding: 15px;
}

.item-col_txt_bas {
   grid-area: col_txt_bas;
   border-top: var(--fborder);
   border-bottom: var(--fborder);
}

.item-col_vide_haut {
   grid-area: col_vide_haut;
   writing-mode: vertical-lr;
   transform: rotate(-180deg);
   border: var(--fborder);
}

.item-col_vide_centre {
   grid-area: col_vide_centre;
   writing-mode: vertical-lr;
   transform: rotate(-180deg);
   border-left: var(--fborder);
   border-right: var(--fborder);
}

.item-col_vide_bass {
   grid-area: col_vide_bas;
   writing-mode: vertical-lr;
   transform: rotate(-180deg);
   border: var(--fborder);
}

.item-col_img_haut {
   grid-area: col_img_haut;
   border-top: var(--fborder);
   border-bottom: var(--fborder);
}

.item-col_img {
   grid-area: col_img;
   background-image: url('/img/keitaat-stockfors-repas.webp');
   background-position: center;
   background-size: cover;
}

.item-col_img_bas {
   grid-area: col_img_bas;
   border-top: var(--fborder);
   border-bottom: var(--fborder);
}


.item-col_vide {
   grid-area: col_vide;
   writing-mode: vertical-lr;
   transform: rotate(-180deg);
   /*outline: .3px solid var(--cloutline);*/
   border: var(--fborder);
}

div[class^="item-"] {
   height: 100%;
   align-items: center;
   display: flex;
   min-height: 40px;
   min-width: 40px;
}

.txt_event_type h3 {
   font-family: 'Taviraj Light Italic';
}

.txt_event_type p {
   font-size: .9rem;
}


.eventTwogrid {
   display: grid;
   grid-template-columns: 10% 30% 30% 30%;
   grid-template-rows: auto;
   grid-template-areas:
      "eventTwo_type col_img1 col_titre col_titre"
      "eventTwo_type col_img1 col_txt col_img2";
   grid-gap: 0;
   grid-column-gap: 0;
   grid-row-gap: 0;
   box-shadow: 3px 3px 13px rgba(0, 0, 0, 0.33);
   margin: 0 -50px;
}


.eventTwo_type {
   grid-area: eventTwo_type;
   align-items: center;
   height: 400px;
   display: flex;
}

.eventTwo_type h4 {
   font-family: 'Taviraj Light';
   writing-mode: vertical-lr;
   transform: rotate(-180deg);
   inline-size: fit-content;
   font-weight: 400;
   width: 100%;
   line-height: 100%;
   align-items: center;
   display: flex;
   letter-spacing: .4rem;
   font-size: 1.5rem;
}

.col_img1 {
   grid-area: col_img1;
   align-items: center;
   background-image: url('/img/keitaat-violon.webp');
   background-position: center;
   background-size: cover;
}

.col_titre {
   background-color: var(--clblackviolon);
   grid-area: col_titre;
   display: flex;
   color: var(--clcotton);
   margin: 0 0 -47px 0;
   z-index: 100;
}

.col_txt {
   background-color: var(--clblackviolon);
   grid-area: col_txt;
   display: flex;
   color: var(--clcotton);
   z-index: 101;
}

.col_img2 {
   grid-area: col_img2;
   display: flex;
   background-image: url('/img/keitaat-concert.webp');
   background-position: center;
   background-size: cover;
}

.col_titre p {
   font-family: 'Taviraj Light';
   text-transform: uppercase;
   font-size: 4rem;
   padding: 10px 25px;
   width: 100%;
   text-align: end;
   line-height: 4rem;
}

.col_txt .txt_event_type {
   padding: 0 0 10px 0;
}

.col_txt .txt_event_type p {
   font-size: .8rem;
   padding: 0 25px;
}

.voicegrid {
   display: grid;
   grid-template-columns: 10% 40% 50%;
   grid-template-rows: auto;
   grid-template-areas:
      "voice_type voice_txt voice_coord_titre"
      "voice_type voice_txt voice_coord_img"
      "voice_type voice_txt voice_coord_lin1"
      "voice_type voice_txt voice_coord_lin2"
      "voice_type voice_txt voice_coord_lin3"
      "voice_type voice_txt voice_coord_lin4";
   grid-gap: 0;
   grid-column-gap: 0;
   grid-row-gap: 0;
   box-shadow: 3px 3px 13px rgba(0, 0, 0, 0.33);
   margin: 0 -50px;
}

.itemvoice_type {
   grid-area: voice_type;
   align-items: center;
   height: 400px;
   display: flex;
}

.itemvoice_type h4 {
   font-family: 'Taviraj Light';
   writing-mode: vertical-lr;
   transform: rotate(-180deg);
   inline-size: fit-content;
   font-weight: 400;
   width: 100%;
   line-height: 100%;
   align-items: center;
   display: flex;
}

.itemvoice_txt {
   grid-area: voice_txt;
   align-items: center;
   height: 400px;
   display: flex;
   padding: 15px;

   border-left: var(--fborder);
   border-right: var(--fborder);
}

.itemvoice_txt h3 {
   padding: 6px;
}

.itemvoice_txt p {
   font-size: 1.09rem;
}

.itemvoice_coord_titre {
   grid-area: voice_coord_titre;
   align-items: center;
   height: 40px;
   display: flex;
}

.itemvoice_coord_img {
   grid-area: voice_coord_img;
   align-items: center;
   height: 200px;
   display: flex;
}

.itemvoice_coord_lin1 {
   grid-area: voice_coord_lin1;
   align-items: center;
   height: 40px;
   display: flex;
   padding-left: 15px;
   padding-bottom: 20px;
}

.itemvoice_coord_lin1 h3 {
   font-size: 3rem;

}

.itemvoice_coord_lin2 {
   grid-area: voice_coord_lin2;
   align-items: center;
   height: 40px;
   display: flex;
   border-top: var(--fborder);
   text-transform: uppercase;
}

.itemvoice_coord_lin2 span,
.itemvoice_coord_lin3 span,
.itemvoice_coord_lin2 span.col2 p a {
   font-family: 'Taviraj Light';
   font-size: .9rem;
   padding: 0 10px;
   width: 50%;
}



.itemvoice_coord_lin3 .col2 a {
   padding: 7px;
   display: inline-flex;
   align-items: center;
   vertical-align: middle;
}

.itemvoice_coord_lin3 {
   grid-area: voice_coord_lin3;
   align-items: center;
   height: 40px;
   display: flex;
   border-top: var(--fborder);
   border-bottom: var(--fborder);
   text-transform: uppercase;
}


.itemvoice_coord_lin4 {
   grid-area: voice_coord_lin4;
   align-items: center;
   height: 40px;
   display: flex;
}

.reflink{   
  width:100%;
  display:flex;
  text-align:center;
}
.reflink a{
   width: 50%;
   display:inline-block;
}

@media screen and (max-width: 740px) {
   .scroller::-webkit-scrollbar {
      width: 0;
   }

   .pann0,
   .pann1 {
      padding: 0px;
   }

   .firstcadre {
      margin: 50px 0 0 0;
      display: grid;
      grid-template-columns: 100%;
   }

   .firstcadre div p {
      font-size: 0.9rem;
   }

   .firstcadre div.fspan {
      min-height: 2rem;

      box-shadow: 0 .5px 0 var(--cloutline) inset;
   }

   .eventgrid {
      display: block;
      grid-template-columns: none;
      grid-template-rows: none;
      grid-template-areas:
         "";
      grid-gap: 0;
      grid-column-gap: 0;
      grid-row-gap: 0;
      box-shadow: 3px 3px 13px rgba(0, 0, 0, 0.33);
      margin: 0;
   }

   .item-event_type {
      align-items: center;
      border: var(--fborder);
   }

   .item-event_type h4 {
      font-family: 'Taviraj Light';
      writing-mode: horizontal-tb;
      transform: none;
      inline-size: fit-content;
      font-weight: 400;
      width: auto;
      line-height: 100%;
      align-items: center;
      display: flex;
      margin: auto;
   }

   .item-col_txt_haut {
      visibility: hidden;
   }

   .item-col_txt {
      padding: 15px;
   }

   .item-col_txt_bas {
      visibility: hidden;
   }

   .item-col_vide_haut {
      writing-mode: horizontal-tb;
      transform: none;
      visibility: hidden;
   }

   .item-col_vide_centre {
      writing-mode: horizontal-tb;
      transform: none;
      visibility: hidden;
   }

   .item-col_vide_bass {
      writing-mode: horizontal-tb;
      transform: none;
      visibility: hidden;
   }

   .item-col_img_haut {
      visibility: hidden;
   }

   .item-col_img {
      background-image: url('/img/keitaat-stockfors-repas.webp');
      background-position: center;
      background-size: cover;
      height: 300px !important;
      display: block;
   }

   .item-col_img_bas {
      visibility: hidden;
   }


   .item-col_vide {
      writing-mode: horizontal-tb;
      transform: none;
      visibility: hidden;
   }

   div[class^="item-"] {
      clear: both;
      height: auto;
      align-items: center;
      display: flex;
      min-height: auto;
      min-width: auto;
   }

   .txt_event_type h3 {
      font-family: 'Taviraj Light Italic';
   }

   .txt_event_type p {
      font-size: 1.19rem;
   }


   .eventTwogrid {
      display: block;
      grid-template-columns: none;
      grid-template-rows: none;
      grid-template-areas:
         "";
      grid-gap: 0;
      grid-column-gap: 0;
      grid-row-gap: 0;
      box-shadow: 3px 3px 13px rgba(0, 0, 0, 0.33);
      margin: 0;
   }


   .eventTwo_type {
      align-items: center;
      height: 40px;
      display: flex;
   }

   .eventTwo_type h4 {
      font-family: 'Taviraj Light';
      writing-mode: horizontal-tb;
      transform: none;
      inline-size: fit-content;
      font-weight: 400;
      width: auto;
      line-height: 100%;
      align-items: center;
      display: flex;
      margin: auto;
   }

   .col_img1 {
      align-items: center;
      height: 300px;
      background-image: url('/img/keitaat-violon.webp');
      background-position: center;
      background-size: cover;
   }

   .col_titre {
      background-color: var(--clblackviolon);
      display: flex;
      color: var(--clcotton);
      margin: 0 0 -1px 0;
      z-index: 100;
   }

   .col_txt {
      background-color: var(--clblackviolon);
      grid-area: col_txt;
      display: flex;
      color: var(--clcotton);
      z-index: 101;
   }

   .col_img2 {
      display: flex;
      background-image: url('/img/keitaat-concert.webp');
      background-position: center;
      background-size: cover;
      height: 300px;
   }

   .col_titre p {
      font-family: 'Taviraj Light';
      text-transform: uppercase;
      font-size: 4rem;
      padding: 10px 25px;
      width: 100%;
      text-align: start;
      line-height: 4rem;
   }

   .col_txt .txt_event_type {
      padding: 0 0 10px 0;
   }

   .col_txt .txt_event_type p {
      font-size: 1.18rem;
      padding: 0 25px;
   }



   .voicegrid {
      display: block;
      grid-template-columns: none;
      grid-template-rows: none;
      grid-template-areas:
         "";
      grid-gap: 0;
      grid-column-gap: 0;
      grid-row-gap: 0;
      box-shadow: 3px 3px 13px rgba(0, 0, 0, 0.33);
      margin: 0 !important;
   }

   .itemvoice_type {
      align-items: center;
      height: 140px;
      display: flex;
   }

   .itemvoice_type h4 {
      font-family: 'Taviraj Light';
      writing-mode: horizontal-tb;
      transform: none;
      inline-size: fit-content;
      font-weight: 400;
      width: 100%;
      line-height: 100%;
      align-items: center;
      display: inline-flex;
   }

   .itemvoice_txt {
      align-items: center;
      height: auto;
      display: flex;
      padding: 15px;

      border-left: var(--fborder);
      border-right: var(--fborder);
   }

   .itemvoice_txt h3 {
      padding: 6px;
   }

   .itemvoice_txt p {
      font-size: 1.09rem;
   }

   .itemvoice_coord_titre {
      align-items: center;
      height: 1px;
      display: flex;
   }

   .itemvoice_coord_img {
      align-items: center;
      height: 40px;
      display: flex;
   }

   .itemvoice_coord_lin1 {
      align-items: center;
      height: 140px;
      display: flex;
      padding-left: 15px;
      padding-bottom: 20px;
   }

   .itemvoice_coord_lin1 h3 {
      font-size: 3rem;
      width: 50%;
   }

   .itemvoice_coord_lin2 {
      align-items: center;
      height: 40px;
      display: flex;
      border-top: none;
      text-transform: uppercase;
   }

   .itemvoice_coord_lin2 span,
   .itemvoice_coord_lin3 span {
      font-family: 'Taviraj Light';
      font-size: .9rem;
   }

   .col1,
   .col2 {
      display: block;
      padding: 0 10px;
   }

   .col2 p a {
      font-size: .9rem;
   }

   .itemvoice_coord_lin3 {
      height: 40px;
      display: flex;
      border-top: none;
      border-bottom: none;
      text-transform: uppercase;
   }

   .itemvoice_coord_lin3-2 a {
      padding: 7px;
      display: inline-flex;
      align-items: center;
      vertical-align: middle;
   }

   .itemvoice_coord_lin4 {
      align-items: center;
      height: 40px;
      display: flex;
   }


}

@media screen and (min-width: 280px) {

   .headerimg {
      background-image: url('/img/keitaat_header_640_303.webp');
      background-repeat: no-repeat;
      height: 50vw;
   }

   .footerimg {
      background-image: url('/img/keitaat_footer_640_427.webp');
      height: 53vw;
   }
}

@media only screen and (min-width: 640px) {

   .headerimg {
      background-image: url('/img/keitaat_header_1024_484.webp');
      background-repeat: no-repeat;
      height: 52vw;
   }

   .footerimg {
      background-image: url('/img/keitaat_footer_1024_683.webp');
      height: 53vw;
   }

}

@media only screen and (min-width: 920px) {

   .headerimg {
      background-image: url('/img/keitaat_header_1240_586.webp');
      background-repeat: no-repeat;
      height: 40vw;
   }

   .footerimg {
      background-image: url('/img/keitaat_footer_1240_827.webp');
      background-repeat: no-repeat;
      height: 53vw;
   }

   .pann {
      max-width: 1024px;
      margin: auto;
   }

   .pann0,
   .pann1 {
      padding: 0 50px;
   }
}

@media only screen and (min-width: 1240px) {

   .headerimg {
      background-image: url('/img/keitaat_header_1920_907.webp');
      background-repeat: no-repeat;
      height: 650px;
   }

   .footerimg {
      background-image: url('/img/keitaat_footer_1240_827.webp');
      height: 800px;
   }
}