/* ==========================================================================
   JCP.ca - common resource - version 1
   ========================================================================== */

/******** Breakpoints de Bootstrap 4 ********/
/*
// Extra small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
*/

/*********** Variables du thème ***********/

:root {
  --main-bg-color: #fff;
  --main-bg-color: #f2f8fd;
  --theme-bg-color-1: #905c4c;  /* brun */
  --theme-bg-color-2: #666699;  /* bleu violacé */  /*utilisé pour les icônes */
  --theme-bg-color-2: #007bff;  /* bleu bootstrap 4 */  
  --theme-bg-color-2: #699;  /* vert moyen */  /*utilisé pour les fenêtre modales */
  --theme-bg-color-2: #336;  /*utilisé pour les fenêtre modales */
  --theme-bg-color-2: #87CEFA;  /*utilisé pour les fenêtre modales */
/*  --theme-bg-color-2: #633;  /* brun moyen */  /*utilisé pour les icônes */
  --theme-bg-color-3: #930;  /* brun chaud */  /*utilisé pour les icônes */
  --theme-bg-color-3: #966;  /* brun chaud */  /*utilisé pour les icônes */
  --theme-bg-color: #333;  /* bleu très foncé */
  --default-text-color: #111;
  --inverse-text-color: #fff;
  --overlay-bg-color: rgba(255, 255, 255, 0.2);
  --modal-bg-color: #efefef;
  --footer-height: 3rem;
  --footer-clearance: 7rem;  /* used because bootstrap reserves top margin for menubar */
  --hover-hilight: #00ff66;
/* changes to bootstrap defaults */  
}

/*********** extensions/modifications du bootstrap ***********/

.container.medium {
/*	width: 45em;  /* 720px */
	max-width: 62em;  /* 992px */
}

.container.narrow {
	width: 45em;  /* 720px  */
}

.form-label {
	margin-top: 5px;
	margin-bottom: 5px;
}

.justify-content-center {
	 justify-content: center;
}

.list-group-item-low {
    position: relative;
    display: block;
    padding: .5rem 1.25rem;
    margin-bottom: -1px;
    background-color: #ffffff; 
/*    background-color: #efefef;   */
    color: #111; /* ajouté pour corriger les liens */
    border: 1px solid rgba(0,0,0,.125);
}

.list-spacer {
    position: relative;
    display: block;
    padding: 0;
    margin-bottom: -1px;
    background-color: #ffffff;
    border: 1px solid rgba(0,0,0,.125);
    line-height: 1rem;
}

.modal-body {
  background-color: var(--modal-bg-color);
}

.modal-header, .modal-footer {
  background-color: var(--theme-bg-color-2);
  color: var(--inverse-text-color);
  border: 1px solid var(--inverse-text-color);
}

.modal-header .close {
    padding: 0 1rem;
    margin: -1rem -1rem -1rem auto;
    font-size: 3rem;
  color: var(--inverse-text-color);
}

/* voir les valeurs différentes pour les petits appareils */
.showLarge{
  display: inline-block;
}

.showSmall{
  display: none;
}


.scroll400 {
  height:380px;
  overflow-y: scroll;
}

.tooltip-inner {
      max-width: 300px; /* Example: increase max-width to 300px */
    }

/*********** images ***********/

.image-hover {
  font-weight: 600;
  font-size: 14px;
}

.overlay {
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
/*  height: 100%;
  width: 100%;
/*  opacity: 0; */
  transition: .5s ease;
  background-color: #008CBA;
}

/*********** tables ***********/
/*
.table-scroll {
  height:475px;
  overflow-y: auto;
}
*/
.table-header {
  font-weight: 600;
  font-size: 14px;
}

    .table-container {
      max-height: 470px; /* Adjust as needed for your desired scroll height */
      overflow-y: auto;
      position: relative; /* Important for sticky positioning of the header */
    }

    .table-container thead {
      position: sticky;
      top: 0;
      background-color: #fff; /* Ensure header background is solid for visibility */
      z-index: 10; /* Keep header above scrolling content */
    }

    /* Address the disappearing header line issue */
    .table-container th {
      box-shadow: 0 1px #dee2e6, 0 -1px #dee2e6; /* Simulate border with box-shadow */
    }


.hrbox{
  padding: 0px 16px 0px 16px;
}

hr.titleLine {
  width: 100%; 
  border-top: 2px solid #111111;
  text-align: center;
  margin: 0 auto;
  padding: 0px 8px 0px 8px;

}

/*********** fin extensions du bootstrap ***********/


html {
    height: 100%;
    background-size: cover;
}

body {
    background-color: var(--main-bg-color);
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
/*	font-size: 1rem; */
/*    padding-bottom: 0px;
    color: var (--default-text-color);
/*    height: 100vh;  */
/*    min-height: calc(100vh - var(--footer-height));   */   
/*    background-image: url('../images/filter25.png'), url('../../images/carousel/12.jpg');
	background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed; 
    overflow-x: hidden;
    position: relative; */
}

.banner {
  width: 100%;
  min-height: 100px;
  color:#fff;
  z-index:15;
  text-align:center;
  background-color: rgba(255,255, 255, 0.3);
/*  padding: 4px 0px; */
}

.margin25t{
  margin-top: 25px;
}

.margin100t{
  margin-top: 100px;
}

.margin100b{
  margin-bottom: 100px;
}


.menuLine{
  width: 35px;
  height: 5px;
  background-color: black;
  margin: 6px 0;
  padding-left: 25px;
}

/********** analog clock ******/
/* https://www.geeksforgeeks.org/how-to-create-analog-clock-using-html-css-and-javascript/ */

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

#clockContainer {
    position: relative;
    margin: auto;
    height: 40vw;
    /*to make the height and width responsive*/
    width: 40vw;
    background: url(../images/clock.png) no-repeat;
    /*setting our background image*/
    background-size: 100%;
}
 
#hour,
#minute,
#second{
    position: absolute;
    background: black;
    border-radius: 10px;
    transform-origin: bottom;
}

#second {
    background: red;
}
 
#hour {
    width: 1.8%;
    height: 25%;
    top: 25%;
    left: 48.85%;
    opacity: 0.8;
}
 
#minute {
    width: 1.6%;
    height: 30%;
    top: 19%;
    left: 48.9%;
    opacity: 0.8;
}
 
#second {
    width: 0.5%;
    height: 40%;
    top: 9%;
    left: 49.25%;
    opacity: 0.8;
	color: red;
}

/********** countdown timer ***********************/

#timerContainer {
    position: relative;
    margin: auto;
    height: 60vw;
    /*to make the height and width responsive*/
    width: 40vw;
	padding-top: 25px;
}

#min {
  padding-left: 25px;
  height: 75px;
  line-height: 60px;
  font-size: 50px;
}

#time {
  margin: auto;
  padding-top: 10px;
  padding-left: 25px;
  text-align: left;
  height: 75px;
  line-height: 60px;
  font-size: 50px;
}

/*********** Login ***********/

.whitelink, .whitelink:visited, .whitelink:hover, .whitelink:active {
    text-decoration: none;
    color: #fff;
    background-color: transparent;
}

.blacklink, .blackling:visited, .blacklink:hover, .blacklink:active{
    text-decoration: none;
    color: #111;
    background-color: transparent;
}

#help a:hover {
  color: #111;
  background-color: transparent;
  text-decoration: underline;
}


#login {
	display: block;
	position: relative; 
/*	width: 295px;
	height: 200px; */
	margin: 0 auto; 
	padding: 0;
}

#login .titre h3{
    margin: 10px 0px 20px 0px;
    color: var(--inverse-text-color);
}

#login .titre h2, #login p{
    margin: 10px 0px 20px 0px;
    color: var(--inverse-text-color);
}

#login .submit-field{
/*	float: left; */
/*	width: 295px; */
    height: 40px;
    margin: 0px;
}

#login .submit-lost{
/*	float: left; */
	width: 295px; 
    height: 40px;
    margin: 0px;
} 

#login  input[type="text"], input[type="password"] {
	width: 255px;
	padding: 3px;
	padding-left: 8px;
	height: 40px;
	line-height: 18px;
/*	border: 1px solid #cccccc;   */
/*	border: 1px solid var(--theme-bg-color);  */
/*	-moz-border-radius:0px 6px 6px 0px; */
	-webkit-border-radius:0px 6px 6px 0px;
	border-radius:0px 6px 6px 0px;
}

#login input[type="submit"], input[type="button"] {
	height:40px;
	width: 295px;
	padding: 3px 3px 3px 8px;
	line-height: 18px;
	background-color: var(--theme-bg-color);
	color: #fff;
	border: 1px solid var(--theme-bg-color);	
/*	-moz-border-radius:6px; */
	-webkit-border-radius:6px;
	border-radius:6px;
}

#login input[type="submit"]:hover, input[type="button"]:hover{
	color: var(--inverse-text-color); 
}

.buttonless input[type=submit]{
  background-color: transparent;
  background-color: rgba(255,255,255,.25);
  border: none;
  color: black; 
  color: red; 
  text-decoration: none;
  cursor: pointer;
  font-weight: 700;
}

.forgot{
  color: var(--inverse-text-color);
}


.overlay-top { 
  color:#fff;
  position:absolute;
  z-index:12;
  top:0;
  left:0;
  width:100%;
  text-align:center;
  background-color: rgba(255,255, 255, 0.3);
  padding: 4px 0px;
}


.overlay-center { 
  position:absolute;
  z-index:12;
  top: 50%;
  left: 0;
  width:100%;
}

.overlay-bottom { 
  color:#fff;
  position:absolute;
  z-index:12;
/*  bottom:2%; */
  bottom: 5%;
  left:0;
  width:100%;
  text-align:center;
  background-color: rgba(255, 255, 255, 0.2);
  margin: 15px 0px 25px 0px;
  padding: 0;
}

/*----- accordions -----*/

.accordion-spacer {
 margin-bottom:15px;
}

.accordion-body{
  padding: 0;
  margin: 5px 15px 5px 15px;
}

.accordion-header h5{
  padding: .5rem 1.25rem;
  color: #111;
}

.accordion-header:aria-expanded(false){
   background-color: #efefef;  
}

.accordion-item .accordion-item .accordion-button.low {
  background-color: #efefef;
}

.accordion-item, .accordion-button {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
}

/*
.accordion-item:first-of-type .accordion-button {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
}

.accordion-item:last-of-type .accordion-button.collapsed {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
}
*/

.accordion-button{
  background-color: #efefef;
  padding: 8px;
}

.accordion-button.low{
  background-color: #efefef;
  padding: 4px 4px 4px 8px;
  margin: 0;
}

.accordion-button:not(.collapsed) {
  background-color: #bebebe;
  border: none;
}

.accordion-button:focus, .accordion-button:visited, .accordion-button:visited {
    box-shadow: none;
    z-index: 3;
    border-style:none;
    outline: 0!important;
    color: #111;
}

/*.accordion-button:focus {
   z-index: 3;
   border-style:none;
   border-color: #279C88;
   outline: 0!important;
   /* I changed the color on this line */
   /* If you do not want any color, just delete */
   /* box-shadow: 0 0 0 0.25rem rgba(39, 156, 136, 0.25); */
/*}
*/

#expand {
    text-align: right;
    padding-bottom: 8px;
}

/* listes dans les accordéons */

ul, li {
  padding: 0;
  margin: 0;
}

ul {
	list-style: none;
	padding-left: 0;
    margin-bottom: 0;
}

li {
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0,0,0,.125);
    font-weight: 500;
}

li.heading {
	list-style: none;
    padding-top: 5px;
	padding-left: 8px;
    padding-bottom: 5px;
	margin: 0;
    font-style: italic;
    font-weight: 500;
    color: var(--theme-bg-color);
    border: none;
}

ul li:first-child {
	border-top: 0;
/*	padding-top: 5px; */
}

ul li.pdf, ul li.xlsx, ul li.docx, ul li.ppt, ul li.jpg, ul li.jpeg, ul li.gif, ul li.png, ul li.zip, ul li.txt, ul li.generic {
	list-style: none;
    padding-top: 5px;
	padding-left: 50px;
    padding-bottom: 5px;
	margin: 0;
    font-style: italic;
    font-weight: 500;
    border-bottom: 1px solid rgba(0,0,0,.125);
	vertical-align: middle;
	
}

ul li.pdf {
	background: url('../../jcpcommon/images/pdf_icon.png') 10px no-repeat;
	vertical-align: middle;
}

ul li.xlsx {
	background: url('../../jcpcommon/images/excel_20.png') 10px no-repeat;
}

ul li.docx {
	background: url('../../jcpcommon/images/word_20.png') 10px no-repeat;
}

ul li.pptx {
	background: url('../../jcpcommon/images/ppt_20.png') 10px no-repeat;
}

ul li.jpg, ul li.jpeg, ul li.png, ul li.gif {
	background: url('../../jcpcommon/images/picture_20.png') 10px no-repeat;
}

ul li.txt, ul li.generic {
	background: url('../../jcpcommon/images/txt_20.png') 10px no-repeat;
}

ul li.zip {
	background: url('../../jcpcommon/images/zip_20.png') 10px no-repeat;
}


ul li a {
    color: #111;
    text-decoration: none;
    background-color: transparent;
}



/*
ul, ul.pdf, ul.excel, ul.word {
	list-style: none;
	padding-left: 0;
    margin-bottom: none;
}



ul.pdf li {
	background: url('../../jcpcommon/images/pdf_icon.png') 20px 10px no-repeat;
}

ul li.pdf {
	background: url('../../jcpcommon/images/pdf_icon.png') 20px 10px no-repeat;
	margin: 0;
	padding-left: 50px;
	padding-bottom: 10px;
	vertical-align: text-top;
}

ul.excel li {
	background: url('../../jcpcommon/images/excel_20.png') 20px 10px no-repeat;
}

ul.word li {
	background: url('../../jcpcommon/images/word_20.png') 20px 10px no-repeat;
}


ul.pdf li:first-child, ul.excel li:first-child, ul.word li:first-child {
	border-top: 0;
/*	padding-top: 5px; */
/*}

/*
ul.pdf li, ul.excel li, ul.word li {
 	padding-top: 5px;
	padding-left: 50px;
	margin: 0px 0px 5px 0px;
}

ul li a {
    color: #111;
    text-decoration: none;
    background-color: transparent;
}
*/

.whitelink, .whitelink:visited, .whitelink:hover, .whitelink:active {
    text-decoration: none;
    color: #fff;
    background-color: transparent !important;
}

.blacklink, .blacklink:visited, .blacklink:hover, .blacklink:active{
    text-decoration: none;
    color: #111;
    background-color: transparent !important;
}

.redlink, .redlink:visited, .redlink:hover, .redlink:active{
    text-decoration: underline;
    color: red;
    background-color: transparent !important;
}

#help a:hover {
  color: #111;
  background-color: transparent;
  text-decoration: underline;
}

.buffer{
  height:50px;
}

.title-box{
	position:relative;
	top:25px;
/*	right:+5px; */
/*	width:180px;  */
	width:100%; 
	height:60px;
	margin: 1px;
	text-align:center;
/*    background-color: #c01225;  /* cardinal crimson */
/*    background-color: #b01116;  /* cardinal red */
    background-color: var(--theme-bg-color);
    color: #fff;
    padding: 10px 0 10px 0;
}


/* ===================================== */
#main {
    position: relative;
    display: block;
    min-height: calc(100vh - var(--footer-clearance));  
/*    background: rgba(255, 255, 255, 0.65); */
/*    padding: 10px; */
    padding-top: 0;
	}

#splash{
    display: flex;
    min-height: calc(100vh - var(--footer-height)); 
    justify-content: center;
    align-items: center;
}


.center{
  text-align: center;
  }

.centerAgenda{
   margin:0;
   padding: 0;
   padding-top: 25px;
   margin-left: -50px;
}

.vertical-center {
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.img-center{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 0;
    padding-left: 3rem;
}

.full-screen {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}



#welcome {
	display: block;
	position: relative; 
	margin: 2rem auto; 
	padding: 0;
    text-align: center;
    color: var(--default-text-color);
}

#welcome .form-inline{
  display: inline;
}

#welcome a{
    text-align: center;
    color: var(--inverse-text-color);
}

.buttonless input[type=submit]{
  background-color: transparent;
  background-color: rgba(255,255,255,.125);
  border: none;
  color: black; 
  color: red; 
  text-decoration: none;
  cursor: pointer;
  font-weight: 700;
}

.forgot{
  color: var(--inverse-text-color);
}

/*********** cards ***********/

.seethrough {
  background: rgba(255, 255, 255, 0.65);
}

.opaque {
  background-color: #E6E6FA;  /* Lavender */
}

.card li{
  color: var (--default-text-color);
  text-decoration: none;
  background-color: #e3e3e3;
}

.card a li{
  text-decoration: none;
  color: var(--default-text-color);
  color: red;

}

.card a:hover{
  text-decoration: none;
  background-color: var(--main-bg-color);
}

a:link { color: red; text-decoration: none; }
a:link { color: #33348e; text-decoration: none; }
a:visited { color:#33348e; text-decoration: none; }
a:hover { color:#33348e; text-decoration: none; }
a:active { color:#7476b4; text-decoration: none; }

.lh-150{
  line-height: 1.75;
}

.mh-500{
  min-height: 456px;;
}

.card-close {
    margin: 0 -15px;
}

.card-close-left {
    margin-left: -15px;
}

.card-header  a:before {
   content: "\3e";
   float: right;
   transition: all 0.5s;
}
.card-header.active a:before {
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	transform: rotate(90deg);
}

.insert-icon{
  display: block;
  float: left;
  width: 35px;
  text-align: center;
  margin-right: 5px;
}

/*********** fiche du musicien **********/

.printButton{
	position:absolute;
	top:-15px;
	right:+5px;
	width:180px; 
	height:37px;
	margin: 1px;
	text-align:right;
}

.printButton img {
	margin-left:3px;
}

.ficheTitle{
  text-align: left;
  background-color: #87CEFA; /* light Sky Blue */
}

.ppic {
    display: block;
	position:relative;
	width:225px;
	height:300px; 
 	border:1px solid;  
	margin: auto;
    text-align: center;
}

.ppicButton{
	position:absolute;
	top:-10px;
	right:+5px;
	width:64px; 
	height:64px;
	margin: 1px;
    text-align: right;
}

.memberName {
	float:left;
	position:relative;
	width:100%;
	text-align:center;
	font-size:12pt;
	font-family:Verdana;
	font-weight:bold;
	padding-bottom:5px;
}

.memberAge {
	font-size:10pt;
	font-family:Verdana;
	font-weight:bold;
}

.memberCaption{
	display:block;
	float:left;
	width:100%;
	font-size:12pt;
    font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
	font-weight:bold;
	font-style:italic;
	padding-bottom: 8px;
}

.memberCaptionProg {
    display: block;
    position: absolute;
    left: 10px;
    top: 375px;
	font-size:12pt;
    font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
	font-weight:bold;
	font-style:italic;
	padding-bottom: 8px;
}

.memberData{
	display:block;
	float:left;
	font-size:11pt;
    font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
	line-height: 22px;
	padding-left: 8px;
	padding-bottom: 12px;	
}

#welcome .memberData a {
	color: #007bff;
	text-decoration: underline; 
}

/********** forms **********/

.form-wrapper{
  margin: 0;
  padding: 15px 20px;
}


.apps-form-required{
	margin-left:5px;
	color:red;
	font-weight: bold;
}

/*********   **********/

#panneauHaut{
	display:block;  
	position: relative;
	float:left;
	min-height:125px;
	width:100%;
    padding: 5px 5px 5px 15px; 
	font-size: 12px;
	line-height: 16px;
	text-align: left;
    margin-left: 2px;
	margin-bottom: 4px;
	border: 1px solid #efefef;
}

#panneauCentre{
	display:block;  
	position: relative;
	float:left;
	min-height:125px;
	width:100%;
    padding: 5px 5px 5px 15px; 
	font-size: 12px;
	line-height: 16px;
	text-align: left;
    margin-left: 2px;
	margin-bottom: 4px;
	border: 1px solid #efefef;
}

#panneauBas{
	display:block;  
	position: relative;
	float:left;
	min-height:125px;
	width:100%;
    padding: 5px 5px 0px 15px; 
	font-size: 12px;
	line-height: 16px;
	text-align: left;
    margin-left: 2px;
	border: 1px solid #efefef;
}


/*

Copyright © David Bushell | @dbushell | http://dbushell.com/

*/

/*
 <div class="field">
  <label class="field__label" for="form-name">Name</label>
  <input class="field__input" type="text" required placeholder="Name…" id="form-name">
</div>
*/


.field {
  position: relative;
  padding-bottom: 1.875em;
  margin-bottom: 1.875em;
  max-width: 20em;
}

.field__label {
  display: block;
  position: absolute;
  top: 1.25em;
  font-size: 0.75em;
  line-height: 1.25em;
  font-weight: bold;
  color: #2996cc;
}

.field__input {
  position: absolute;
  display: block;
  box-sizing: border-box;
  font-size: 1em;
  line-height: 1.25em;
  padding: 0.3125em 0;
  height: 1.875em;
  width: 100%;
  border: 0;
  outline: none;
  border-bottom: 0.125em solid #bbb;
}
.field__input:valid {
  position: relative;
  top: 1.875em;
  margin-top: -1.875em;
}
.field__input:focus {
  border-bottom-color: #2996cc;
}


/*********** Footer **********/

#footer{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--theme-bg-color);
    height: var(--footer-height);
}

#footer-transparent {
    color:#fff;
    position: absolute;
    bottom: 2%;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    justify-content: center;
    align-items: center;
    background-color: var(--overlay-bg-color);
    height: var(--footer-height);
}

/*  position:absolute;
  z-index:12;
  bottom: 5%;
  left:0;
  width:100%;
  text-align:center;
  background-color: rgba(255, 255, 255, 0.2);
  margin: 15px, 0px, 25px, 0px;
  padding: 0;

*/

#copyright{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: var(--inverse-text-color);  
}


#gotoTop {display: none;}

.totoplink a	{
/*	display: none;  */
	z-index: 999; 
	position: fixed;
	right: 20px;
	bottom: 12px;
/*	-moz-border-radius: 20px; */
	-webkit-border-radius: 20px;
	border-radius: 20px;
	width: 40px;
	height: 40px;
	padding: 4px 0 0 11px;
	background: #ff7400;
	opacity: .3;
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-ms-transition: all 0.2s;
	-o-transition: all 0.2s;
	transition: all 0.2s;
	}

	.totoplink i {
		font-size: 28px;
		color: white;
	}

	.totoplink a:hover	{
		opacity: .9;
		}


/*********************************/
/*         small screens         */
/*********************************/
@media only screen and (max-width: 991px) {

.margin100{
  margin-top: 0;
}

}

@media only screen and (max-width: 767px) {

.nosmall{
  display: none;
}
 
#main {
    display: block;
    min-height: calc(100vh - 130px);
	padding: 25px 0 30px 0;
    font-size: 11px;
	}
   
h2{  font-size: 24px;
  line-height: 1.25;
}

.overlay-center { 
  position:absolute;
  z-index:12;
  top: 20%;
  left: 0;
  width:100%;
}

.showSmall{
  display: inline-block;
}

.showLarge{
  display: none;
}


.mh-500{
  min-height: 425px;;
}

/*
.ficheTitle{
  text-align: center;
}
*/

}  /* small screens */