/************************/
/* Sélecteurs de balise */
/************************/

html {
  scrollbar-width: none; /* Pas de barre de scrolling sous firefox */
}

body::-webkit-scrollbar {
  display: none; /* Pas de barre de scrolling sous webkit */
}

body {
/*  position:relative; */
  min-height: 100vh; /* toute la hauteur du viewport */
  display: flex; /* le body est un flex container. tous ses élément sont des flex-items */
  flex-direction: column; /* organisé sur un seul axe, ici l'axe vertical. Avec 100vh, repousse le footer en bas de page */
  font-family: Marianne; 
  font-weight: 400;
}

h1 {
  font-size: 2.25em;
  font-weight: 500;
}

h2 {
font-family: archive;
margin: 5px 0 10px 0;
}

h3 { /* Avant, pendant, après */
  color: rgba(0,0,0,0.85);
  font-weight: 500;
  text-align: left;
  border-bottom: 1px solid rgba(0,0,0,0.4);
  padding: 2px;
  margin: 0 0 7px 0;
  cursor: pointer;
  width: 80%;
}

h3.nopointer {
  cursor: default;
}

h4 {
  font-weight: 500;
}

hr {
  height: 1px;
  border: none;
  background: -webkit-linear-gradient(left, #e0e0e0, #8c8b8b, #e0e0e0);
}

p {
  text-align: justify;
  margin: 0 0 15px 0;
}

ul {
  margin: 0 0 10px 0;
}

ul.docs {
  margin:0 0 22px 0;
}

ul.non_ev {
  padding:8px 16px 8px 8px;
  width: fit-content;
  background-color: rgba(0,0,255,0.08);
  border-radius: 5px;
}

li{
  list-style: none inside url('/images/li_arrow.png');
  margin: 0;
}

a {
  text-decoration: none;
}

a:hover {
  transition: 0.3s ease-in-out;
  border-radius: 5px;
}

img {
  width: 100%;
}

video {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  border-radius: 18px;
}

video[poster]{
  object-fit: cover;
}

/* HEADER */

header {
  margin: 0 0 30px 0;
  z-index: 3; /* Pour que les dropdown menus soient au dessus */
  min-height: 60px;
}
/* Variations selon les appareils */
@media screen and (min-width: 50px) and (max-width: 959px){header{position: static;  text-align: center;}} /*Pour les mobiles */
@media screen and (min-width: 960px){header{position: sticky;  top: 0;  text-align: left;}} /* Pour les ordis */
header h1 {
  display: inline-block; /* Permet de placer le menu desktop à côté */
  font-family: archive;
  font-size: 18px; /* Archive occupe 23 px de haut sous firefox, mais 22 sous chrome */
  font-weight: 400; /* Inutile, il n'y a qu'une graisse de disponible */
  padding: 19px 12px 18px 17px; /* ajusté pour faire 60 (23+19+18) en hauteur sous firefox (mais 59 sous chrome) De toute façon, seul le top est nécessaire puisque la hauteur est fixée */
}
header a {
  text-decoration: none;
  color: white;
}

/* MAIN */

main {
  /*background-color: rgba(0,0,0,0.1);*/
  margin: 0 auto;
  width: 90vw;
}

/* FOOTER placé en bas du viewport occupé à 100 vh par le body */

footer {
  margin-top: auto;
  background-image:linear-gradient(10deg,#424242,#606060);
  color:#fefefe;
  font-size:0.875em;
  padding:16px 16px 16px 28px;
}
footer a {text-decoration:none;color:#9e9e9e;transition:0.9s ease;}
footer a:hover {color:#fefefe;transition:0.9s ease;border:none;}
footer li {list-style-image: none; margin: 0;}
footer ul {margin: 0;}

dt { /* Menu mobile */
  cursor: pointer; 
}

/************************/
/* Sélecteurs de classe */
/************************/

/* ************************/
/** COMMON COMMON COMMON **/
/* ************************/

/* Gestion des menus desktop */
/* dropdown est la classe des menus, qui contiennent le dropbtn et dropdown-content */
/* Ils sont contenus dans le #menu_desktop qui flotte à droite */

.intervalle {
  height: 75px;
}

.dropdown { /* nécessaire pour que ça marche C'est sur elle que se fait le hover */
  position: relative; /* dans le flux, mais pas décalé */
  display: inline-block; /* block par défaut, ça s'empile */
}

.dropbtn {
  cursor: pointer;
  text-align: center;
  color: white;
  font-size: 14px;/* mais Marianne occupe 20 px de haut */
  font-weight: 500;
  padding: 19px 12px 21px 12px; /* ajusté pour une bande de 60 px */
}

.dropdown-content {
  display: none; /* n'apparait que lors du hover ci dessous */
  position: absolute; /* hors du flux, positionné par rapport à son ancêtre le plus proche */
  top: 60px; /* bandeau du header de 60 px */
  padding: 15px 0;
  min-width: 260px;
  background-color: white;
  border: 4px solid black;
/*  border-bottom: 1px solid rgba(0,0,0,0.2);
  border-left: 1px solid rgba(0,0,0,0.2);
  border-right: 1px solid rgba(0,0,0,0.2);
  border-radius: 0 0 8px 8px;
  box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12), 0px 3px 5px 0px rgba(0, 0, 0, 0.2);*/  /* indispensable pour voir le menu 6dp */
}

.dropdown-content.centre {left: 50%;  transform: translate(-50%);}
.dropdown-content.rn { /* Pour le meli melo à l'extrême droite */  right: -8px;}

.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color:rgba(255,255,255,0.15);}

.dropdown-content a {
text-decoration: none;
color: #000;
}

.dropdown-content .menuItem {
  display: block;
  padding: 15px 25px;
}
.dropdown-content .menuItem:hover {
/*  background-color:; choisis dans styles.php */
  color: white;
  border-top : 3px solid black;
  border-bottom : 3px solid black;
  padding: 12px 25px;
}

.marge_gauche {
  margin: 0 0 0 30px;
}

/* Décorations */

.exter::after {content:  url(/images/external-link-ltr-icon.png);  margin-left: 3px;  vertical-align: baseline;}
.python::before {content:  url(/images/python-icon.png);  margin-right: 3px;  vertical-align: baseline;}
.arduino::before {content:  url(/images/arduino-icon.png);  margin-right: 3px;  vertical-align: baseline;}

.triangle-down::after {
  background-image: url('/images/chevron-down-xs.png');
  background-size: 10px 10px;
  display: inline-block;
  width: 10px; 
  height: 10px;
  content:"";
  margin-left: 5px;  
}

.triangle-up::after {
  background-image: url('/images/chevron-up-xs.png');
  background-size: 10px 10px;
  display: inline-block;
  width: 10px; 
  height: 10px;
  content:"";
  margin-left: 5px;  
}

.enveloppe {font-weight:401;}

/* ************************/
/*** HOME HOME HOME MAIN **/
/* ************************/

.case_home { /* c'est une balise a */
color: white;
text-decoration: none;
/*
Si home-diaporama
display:flex;
min-width: 100%;
*/
}

.case_home > div:hover {
  transition: 0.25s;
  box-shadow: 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 3px rgba(0, 0, 0, 0.12), 0px 4px 15px 0px rgba(0, 0, 0, 0.2); /* indispensable pour voir le menu 8dp */
}
.case_home > div {
min-height: 250px;
float: left;
display: inline-block;
cursor: pointer;
padding: 30px 35px;
border-radius: 10px;
/*
Si home-diaporama
flex-grow: 1;
*/
}

@media screen and (min-width: 960px) {
.case_home.left > div {width: calc(32.5% - 70px);margin: 0;}
.case_home.center > div {width: calc(32.5% - 70px);margin: 0 1.25%;}
.case_home.right > div {width: calc(32.5% - 70px);margin: 0 0 10% 0;}
}

@media screen and (min-width: 560px) and (max-width: 959px) {
.case_home.left > div {width: calc(49.5% - 70px);margin: 0 1% 0 0;}
.case_home.center > div {width: calc(49.5% - 70px);margin: 0;}
.case_home.right > div {width: calc(49.5% - 70px);margin: 1% 0 10% 0;}
} /* tablet */

@media screen and (min-width: 150px) and (max-width: 559px) {
.case_home.left > div {width: calc(100% - 70px);margin: 0;}
.case_home.center > div {width: calc(100% - 70px);margin: 2% 0;}
.case_home.right > div {width: calc(100% - 70px);margin: 0 0 10% 0;}
} /* phone */

.case_home .ligne1 {
  font-size: 1.25em;
}

.case_home .ligne2 {
  font-family: Archive;
  font-size: 1.5em;
}

.case_home .ligne3 {
}

/* ********************************/
/* COURSES-SÉQUENCES CHAPTER MAIN */
/* ********************************/

.ne { /* non évalué en mars */
background-color: rgba(0,0,255,0.08);
display: inline-block;
width: calc(100% - 50px);
padding: 17px 25px;
overflow: hidden;
margin: 3px auto 25px auto;
border-radius: 18px;
}

.ne.vert{
background-color: rgba(0,192,0,0.08);
}
.ne.transparent{
background-color: rgba(255,255,255,0);
border: 1px solid rgba(0,0,0,0.25);
}


.sous-titre {
  margin: 0 0 25px 0;
  color: rgba(0,0,0,0.85);
}

.ligne-titre {
  font-family: archive;
  margin: 0 0 22px 0;
  display: flex;
}

.ligne-titre.chapter {
  margin: 0 0 7px 0;
  font-family: Marianne;
}

.square {
  display: inline-flex; /* flex containe inline */
  justify-content: center; /* Pour les flex container Alignement sur l'axe pricipal */
  align-items: center; /* Pour les flex, alignement sur l'axe secondaire */
  flex-shrink: 0; /* Conserve ses dimensions */
  height: 60px; /* Comme le header */
  width: 60px; /* C'est bien un carré */
  margin: 0 5px 0 0;
  font-size: 2.25em;
  color: white;
}

.square.chapter {
  font-size: 1.25em;
  height: 52px;
  width: 52px;
}

.titre {
  display: inline-flex; /* flex container inline */
  align-items: center; /* Pour les flex, alignement sur l'axe secondaire */
  height: 60px; /* Comme le header */
  font-size: 1.5em;
  flex-wrap: wrap; /* Autorise le passage à la ligne pour l'afficahge du flex */
  overflow: hidden; /* Cache le débordement vertical vers le bas des lignes passées à la ligne, ainsi que les scrollbar qui apparaissent si l'on prend averflow auto */
}

.titre.chapter {
  height: 52px;
  font-size: 1.125em;
}

.case_course {
  float: left;
  display: inline-block;
  padding: 0;
}

.case_course.left.up {
/* IMPORTANT interdit la flotaison pour cet élément qui, sinon, est placé dans le container du diaporama
Car un élément float est hors du flux. Conséquence : les liens sont "derrières" et ne marchent pas */
  float: none;
/*Par ailleurs, fait 1 tiers de large via @media */
}

@media screen and (min-width: 1480px) {
.case_course.left.up {width: calc(33% - 0px);margin: 0 1% 15px 0;} /* Retrancher le total du padding horizontal si nécessaire*/
}

@media screen and (min-width: 960px) {
.case_course.left {width: calc(49.5% - 0px);margin: 0 1% 15px 0;} /* Retrancher le total du padding horizontal si nécessaire*/
.case_course.right {width: calc(49.5% - 0px);margin: 0 0 15px 0;} /* Retrancher le total du padding horizontal si nécessaire*/
}

@media screen and (min-width: 150px) and (max-width: 959px) {
.case_course.left {width: calc(100% - 0px);margin: 0 0 0 0;} /* Retrancher le total du padding horizontal si nécessaire*/
.case_course.right {width: calc(100% - 0px);margin: 0 0 15px 0;} /* Retrancher le total du padding horizontal si nécessaire*/
}

/* DIAPORAMA GLISSANT */

.swiper-container { /* Rajouté par mes soins pour positionner les flèches */
  display: block;
  position: relative;
}

.swiper { /* C'est le container original du diaporama. */
  width: 100%; /* du swiper-container */
  margin: 0 auto 10px auto; /* Repousse les flèches de navigation */
}

/* .swiper-wrapper {} Emballage intermédiaire pour que ça fonctionne */

.swiper-slide { /* Chaque diapo du diaporama - Parent de titre-video */ 
  display: flex;
  flex-direction: column; /* Place le titre sous la vidéo */
  justify-content: center; /* Pour les flex container Alignement sur l'axe pricipal */
  align-items: center; /* Pour les flex, alignement sur l'axe secondaire */
  overflow: hidden;
}

.titre-video {/* div enfant de swiper-slide */
  font-size: 1em;
  line-height:2em;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
}


.swiper-button-prev,
.swiper-button-next {
  position: static; /* écrase la valeur donnée par le css original */
  width: auto; /* écrase la valeur donnée par le css original */
  height:auto; /* écrase la valeur donnée par le css original */
  margin:0; /* écrase la valeur donnée par le css original */
  font-size: 28px;
  padding: 0 20px 18px 20px;

}

.swiper-pagination {
  position: static;  /* écrase la valeur donnée par le css original */
  display: flex;  /* écrase la valeur donnée par le css original */
  flex-direction: row;  /* écrase la valeur donnée par le css original */
  padding: 0 0 18px 0;

}

.caban {
  display:flex;
  justify-content: center; /* Pour les flex container Alignement sur l'axe pricipal */
}

.caban .center {
  display: flex; 
  align-items: center; /* Pour les flex, alignement sur l'axe secondaire */
  position:static; /* nécessaire pour appliquer le z-index */
  z-index:0;
}

/* .caban .right {background-color: rgba(0,0,192,0.3); display: flex; flex-basis:0;flex-direction:row; justify-content: center; align-items: center;} */
/* .caban .left {background-color: rgba(192,0,0,0.3); display: flex; flex-basis:0;flex-direction:row; justify-content: center; align-items: center;} */

.swiper-slide img { /* Mise en forme d'une diapo image */
  display: block;  width: 100%;  height: 100%;  object-fit: cover;
/*  background: rgba(0,0,255,1);*/
}

/* VIDEO YOUTUBE */

.youtube-player { /* div enfant de la slide et container de la video et-ou du thumb Cette div possède un data-id */
  position: relative; /* Dans le flux, ie dans sa div */
  padding-bottom: 56.25%; /* Astuce qui permet de conserver le ratio de la * DIV *  Ici, 16-9. Use 75% for 4-3 videos */
  /* En effet, le padding lorsqu'il est exprimé en % est proportionnel à la largeur de la div */
  /* https www.goldenapplewebdesign.com responsive-aspect-ratios-with-pure-css */
  /* La hauteur de la div est nulle - je ne comprends pas pourquoi - mais son padding vaut neuf seizième de sa largeur, ie 56.25% */
  /* Le frame (ou l'image) enfant couvre l'intégralité de la div qui comprend le padding */
  width: 100%; /* de la slide */
  overflow: hidden; /* Nécessaire si le thumb ou le frame ne fait pas 16-9 */
border: 1px solid rgba(0,0,0,0.3);
border-radius: 18px;
}
    
.youtube-player iframe { /* video elle-même avec les commnades youtube. Remplace le thumb et le bouton play lorsqu'on clique */
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;  /* Le frame occupe la totalité de la div au ratio fixé ci dessus */
  z-index: 1;
  background: transparent;
  border-radius: 18px;
}
    
.youtube-player img { /* Image thumb de la video */
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;  /* Le thubnail occupe la totalité de la div au ratio fixé ci dessus */
  cursor: pointer;
  transition: .3s all;
  border-radius: 18px;
}
    
.youtube-player img:hover {
  filter: brightness(75%);
}
    
.youtube-player .play { /* Bouton play superposé au centre */
  height: 72px;
  width: 72px;
  left: 50%;
  top: 50%;
  margin-left: -36px;
  margin-top: -36px;
  position: absolute;
  background: url('/images/play.png') no-repeat;
  cursor: pointer;
}

/*  À REVOIR  */
/* ANIMATIONS */
/*  À REVOIR  */

.launch-button {height: 72px;width: 72px;left: 50%;top: 50%;margin-left: -36px;margin-top: -36px;position: absolute;background: url('/images/launch.png') no-repeat;cursor: pointer;}
.lien_image {display:block;width:100%;height:auto;padding:0;/*margin:5px auto 4px auto;*/position:relative;border-bottom:1px solid rgba(0,0,0,0);}
.lien_image:hover {border-bottom:1px solid rgba(0,0,0,0);background:none;}
.mini{width:100%;height:auto;border:1px solid rgba(0,0,0,0.25);
min-height:90px;
border-radius:18px;
transition: .3s all;}
.mini:hover {filter: brightness(75%);}

.logo{height:20px;width:auto;vertical-align:-4px;display:inline-block;}

/********************/
/* Sélecteurs de id */
/********************/

#today {
  text-align:center;
  margin:0 0 30px 0;
  padding: 0.3em 15px 0.4em 15px;
  display: inline-block;
  color:rgba(0,0,0,0.85);
  border: 1px solid rgba(0,0,0,0.3);
  border-radius: 7px;
  cursor: pointer;
}

#today:hover {
  background-color:rgba(0,0,0,0.025);
}

/* Recouvre la page en noir lorsque le menu mobile est affiché */
#masque {
  display: none; /*N'est pas affiché par défaut. Est géré ensuite par le js.*/
  position: fixed; /* hors du flux, positionné par rapport au bloc englobant */
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color:rgba(0,0,0,0.35);
  z-index:11; /* au dessus des boutons du diaporama */
  backdrop-filter: blur(4px);
}

/* Gestion de l'affichage des menus de navigation dans le header ou sur le côté */
#menu_desktop {
  top: 0;
  right: 7px;
  position: fixed;
  font-size: 1.015625em;
}

#burger {
  /* display flex indiqué dans @media lorsqu'il est visible */
  justify-content: center; /* Pour les flex container Alignement sur l'axe pricipal row par défaut */
  align-items: center; /* Pour les flex, alignement sur l'axe secondaire */
  width: 44px;
  height: 44px;

  font-family: Google;
  font-size: 32px;
  
  position:fixed; /* hors du flux, positionné par rapport au viewport */
  bottom: 24px; /* Valeur qui le centre verticalement dans le footer standard de 92 px */
  right:24px;
  z-index: 11; /*Au dessus des boutons du diaproama */
  
  border-radius: 9px;
  background-color:#f0f0f0;
  cursor: pointer;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.14), 0px 4px 5px 0px rgba(0, 0, 0, 0.12), 0px 1px 10px 0px rgba(0, 0, 0, 0.2); /* 4dp */
}

#menu_mobile { /* Voir aussi le js dans common_template */
  background-color: white;
  position: fixed; /* hors du flux, positionnée par rapport au viewport */
  left: 120%; /*au delà du bord droit, assez loin pour ne pas voir l’ombre */
  top: 10px;
  z-index: 12; /* Au dessus du masque */
  text-align:left;
  padding: 20px; /* Si modif, corriger aussi la largeur responsive, et la position à l'ouverture dans le js */
  border-radius: 10px;
  box-shadow: 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 3px rgba(0, 0, 0, 0.12), 0px 4px 15px 0px rgba(0, 0, 0, 0.2); /* indispensable pour voir le menu 8dp */ 
}

#menu_mobile a {
  background: none;
}

/* Selon l'appareil */
@media screen and (min-width: 50px) and (max-width: 959px){#menu_desktop{display: none;} #menu_mobile{display: block;} #burger{display: flex;}} /* mobile */
@media screen and (min-width: 960px){#menu_desktop{display: inline-block;} #menu_mobile{display: none;} #burger{display: none;}} /*desktop */
/* Selon la largeur de l'appareil mobile */
/* WARNING La sortie du menu (à moitié ou totale) est réglée en js dans template_common */
@media screen and (min-width: 50px) and (max-width: 559px) {#menu_mobile {width: calc(100vw - 60px);}} /* phone 2×20 padding et 2×10 margin en conjonction avec le js de common_template */
@media screen and (min-width: 560px) and (max-width: 959px) {#menu_mobile {width: calc(50vw - 50px);}} /* tablet 2×20 padding et 10 margin droite */

.mobileItem {
  margin: 0 20px 10px 20px;  /* Que du margin bottom (sur l'axe vertical) pour éviter le soubresaut du slide du au margin-collapse */
  padding: 5px 10px;
  background-color: rgba(0,0,0,0.05);
  border-radius: 5px;
}

.mobileMenu { /* Titre des menu déroulant */
  margin-bottom: 10px; /* Que du margin bottom pour éviter le soubresaut du slide du au margin-collapse */
  padding: 3px 6px;
  border-bottom: 1px solid rgba(0,0,0,0.5);
}

#croix.mobileMenu {
  display: inline-flex;
  padding: 1px 10px 5px 10px;
  border: 1px solid rgba(0,0,0,0.5);
  border-radius: 7px;
  cursor: pointer;
}

#consignes_menu, #objectifs_menu {
  text-align:justify;
  hyphens:auto;
}
/* logo cc-by-sa */
#licence {height:11px;width:auto;vertical-align:0px;display:inline;}
.lien_licence:hover {background-color: #fff;} /* fond blanc plutot que la couleur2 */ 

/* Menu desktop terminaleSTL  visible au delà de 1024px de large */
@media screen and (min-width: 50px) and (max-width: 1023px){#terminalestl{display: none;}} /* ceci dit, le menu desktop est caché en dessous de 960 px */
@media screen and (min-width: 1024px){#terminalestl{display: block;}} /*OK sur grands écrans */



/***********************/
/* Gestion des polices */
/***********************/

/* Titres */
@font-face {font-family: 'Archive';  font-style: normal;  font-weight: 400;  src: url(/fonts/Archive-Regular.otf), url(/fonts/Archive-Regular.ttf);  font-display: swap;}
@font-face {font-family: 'Marianne';  font-style: normal;  font-weight: 700;  src: url(/fonts/Marianne/Marianne-Bold.woff2), url(/fonts/Marianne/Marianne-Bold.woff);  font-display: swap;}
@font-face {font-family: 'Marianne';  font-style: normal;  font-weight: 900;  src: url(/fonts/Marianne/Marianne-ExtraBold.woff2), url(/fonts/Marianne/Marianne-ExtraBold.woff);  font-display: swap;}
@font-face {font-family: 'Marianne';  font-style: normal;  font-weight: 300;  src: url(/fonts/Marianne/Marianne-Light.woff2), url(/fonts/Marianne/Marianne-Light.woff);  font-display: swap;}
@font-face {font-family: 'Marianne';  font-style: normal;  font-weight: 500;  src: url(/fonts/Marianne/Marianne-Medium.woff2), url(/fonts/Marianne/Marianne-Medium.woff);  font-display: swap;}
@font-face {font-family: 'Marianne';  font-style: normal;  font-weight: 400;  src: url(/fonts/Marianne/Marianne-Regular.woff2), url(/fonts/Marianne/Marianne-Regular.woff2);  font-display: swap;}
@font-face {font-family: 'Marianne';  font-style: normal;  font-weight: 100;  src: url(/fonts/Marianne/Marianne-Thin.woff2), url(/fonts/Marianne/Marianne-Thin.woff);  font-display: swap;}
@font-face {font-family: 'Marianne';  font-style: italic;  font-weight: 700;  src: url(/fonts/Marianne/Marianne-Bold_Italic.woff2), url(/fonts/Marianne/Marianne-Bold_Italic.woff);  font-display: swap;}
@font-face {font-family: 'Marianne';  font-style: italic;  font-weight: 900;  src: url(/fonts/Marianne/Marianne-ExtraBold_Italic.woff2), url(/fonts/Marianne/Marianne-ExtraBold_Italic.woff);  font-display: swap;}
@font-face {font-family: 'Marianne';  font-style: italic;  font-weight: 300;  src: url(/fonts/Marianne/Marianne-Light_Italic.woff2), url(/fonts/Marianne/Marianne-Light_Italic.woff);  font-display: swap;}
@font-face {font-family: 'Marianne';  font-style: italic;  font-weight: 500;  src: url(/fonts/Marianne/Marianne-Medium_Italic.woff2), url(/fonts/Marianne/Marianne-Medium_Italic.woff);  font-display: swap;}
@font-face {font-family: 'Marianne';  font-style: italic;  font-weight: 400;  src: url(/fonts/Marianne/Marianne-Regular_Italic.woff2), url(/fonts/Marianne/Marianne-Regular_Italic.woff2);  font-display: swap;}
@font-face {font-family: 'Marianne';  font-style: italic;  font-weight: 100;  src: url(/fonts/Marianne/Marianne-Thin_Italic.woff2), url(/fonts/Marianne/Marianne-Thin_Italic.woff);  font-display: swap;}
@font-face {font-family:'Google';  font-style: normal;  font-weight: 400;  src:url(/fonts/Google/MaterialIcons-Regular.eot) format('eot'), url(/fonts/Google/MaterialIcons-Regular.woff2) format('woff2'), url(/fonts/Google/MaterialIcons-Regular.woff) format('woff');  font-display: swap;}