@font-face {
    font-family: 'brother_1816_webextrabold';
    src: url('../fonts/13-brother1816-extrabold-web.eot'); /* IE9 Compat Modes */
    src: url('../fonts/13-brother1816-extrabold-web.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/13-brother1816-extrabold-web-webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/13-brother1816-extrabold-web-webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('../fonts/13-brother1816-extrabold-Web.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('../fonts/13-brother1816-extrabold-web.svg#svgFontName') format('svg'); /* Legacy iOS */
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'brother_1816_webbook';
    src: url('../fonts/05-brother1816-book-web.eot'); /* IE9 Compat Modes */
    src: url('../fonts/05-brother1816-book-web.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/05-brother1816-book-web-webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/05-brother1816-book-web-webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('../fonts/05-brother1816-book-Web.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('../fonts/05-brother1816-book-web.svg#svgFontName') format('svg'); /* Legacy iOS */
    font-weight: normal;
    font-style: normal;
}

body{
    background-color: cadetblue;
    margin: 0;
    width: 100%;
}

.txt_grid{
    display: grid;
    width: auto;
    grid-template-columns: 1fr minmax(35ch, 1fr) 1fr;
    grid-template-rows: 2em;
    grid-template-areas: " . . . "
                         " . t . "
                         " . . . ";
}


#header2{display: none;}

.texte{
    grid-area: t;
    font-family: "brother_1816_webbook", "verdana", sans-serif;
    font-size: 1.25em;
    color: floralwhite;
    text-rendering: optimizeLegibility;
    letter-spacing: 0.03em;
    justify-content: center;
}


/* -------------------------------------------------- Media Queries ------------------ */

                                  /* ------------------ Laptop ----------------- */

/* ----------- Non-Retina Screens ----------- */
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1) {                 /**/
  
      .txt_grid{
    display: grid;
    grid-template-columns: (35ch, 1fr);
          }
      
}

/* ----------- Retina Screens ----------- */
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (min-resolution: 192dpi) { 
}

                                  /* ------------------ Tablets ----------------- */

/* ----------- iPad 1, 2, Mini and Air ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {                         /**/
      .texte{font-size: 1em;}
      
}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* ----------- iPad 3, 4 and Pro 9.7" ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 2) {
      
      .texte {font-size: 1.25em;}
  

}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

                                  /* ------------------ Mobile ----------------- */

/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 768px)
  and (-webkit-min-device-pixel-ratio: 2) {
      .texte{font-size: 1em;}                           /**/
      #header{display: none;}
      #header2{display: block;}
}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 768px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 768px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

/* ----------- iPhone 6, 6S, 7 and 8 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 

}

/* ----------- iPhone 6+, 7+ and 8+ ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 

}