/* CSS Variables */
:root {
  --color-innovations:  #11099c;
  --color-services:     #9e6f31;
  --color-publications: #009933;
  --color-aboutus:      #515151;
  --primary: #ddd;
  --dark:    #333;
  --light:   #fff;
  --shadow:  0 1px 5px rgba(104, 104, 104, 0.8);
}

html {
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--dark);
}

body {
  /*background:  #ccc;*/
  margin:      0px;
  line-height: 1.4;
}

/*.btn {
  background:      var(--dark);
  color:           var(--light);
  padding:         0.6rem 1.3rem;
  text-decoration: none;
  border:          0;
}*/

img {
  max-width: 100%;
}

.body-wrapper {
  display:  grid;
  width:    960px;
  margin:   0px auto;
  grid-gap: 0px;
}

.wrapper{
    position: absolute;
}

:link { 
  color: #0000EE;
}

:visited {
  color: #551A8B;
}

/* Header Container */
.header-container {
  display: grid;
  grid-gap: 10px;
  grid-template-areas:
    'logo company title';
  /*grid-template-columns: auto auto auto;*/
}

#header-logo {
  grid-area: logo;
  width:     100px;
  height:    100px;
}

#header-logo a{
  height: auto;
}

#header-company p {
  grid-area:   company;
  float:       left;
  font-size:   2.0rem;
  font-weight: bold;

}

#header-title p {
  grid-area: title;
  margin-right: 50px;
  font-size: 2.0rem;
}

#header-tools {
  /*grid-area: tools;*/
  color:     black;
  top:       10px;
  right:     20px;
  position:  absolute;
}

#header-tools #language-form label{
	font-size: 0.8rem;
	color:     #bebebe;
	margin:    0 10px;
}

#header-tools a{
    color: black;
}

#header-tools a:hover{
    color: #ffb502;
}

#language-form {
  font-size: 1.0rem;
}

#device {
  font-size: 0.8rem;
}

/* Navigation */
.main-nav {
  height: 3.0rem;
  margin: 0 0 0.5rem 0;
  background-color: white;
}

.main-nav ul {
  display:    grid;
  grid-gap:   0px;
  padding:    0;
  list-style: none;
  grid-template-columns: repeat(4, 1fr);
}

.main-nav li a {
  display:     block;
  padding:     0 5px;
  text-align:  center;
  color:       var(--color-aboutus);
  font-size:   1.3rem;
  font-weight:     bold;
  text-decoration: none;
  background-color: white;
  border-bottom: 3px solid white;
}

.main-nav li a.nav-innovations {
  color: var(--color-innovations);
  border-right: 2px solid #e9e9e9;
}

.main-nav li.active a.nav-innovations {
  color: var(--color-innovations);
  border-right: 2px solid #e9e9e9;
  border-bottom: 3px solid var(--color-innovations);
}

/*.main-nav a.nav-innovations:hover {
  border-bottom: 3px solid var(--color-innovations);
}*/

.main-nav li a.nav-services {
  color: var(--color-services);
  border-right: 2px solid #e9e9e9;
}

.main-nav li.active a.nav-services {
  color: var(--color-services);
  border-right: 2px solid #e9e9e9;
  border-bottom: 3px solid var(--color-services);
}

/*.main-nav a.nav-services:hover {
  border-bottom: 3px solid var(--color-services);
}*/

.main-nav li a.nav-publications {
  color: var(--color-publications);
  border-right: 2px solid #e9e9e9;
}

.main-nav li.active a.nav-publications {
  color: var(--color-publications);
  border-right: 2px solid #e9e9e9;
  border-bottom: 3px solid var(--color-publications);
}

/*.main-nav a.nav-publications:hover {
  border-bottom: 3px solid var(--color-publications);
}*/

.main-nav li a.nav-aboutus {
  color: var(--color-aboutus);
}

.main-nav li.active a.nav-aboutus {
  color: var(--color-aboutus);
  border-bottom: 3px solid var(--color-aboutus);
}

/*.main-nav a.nav-aboutus:hover {
  border-bottom: 3px solid var(--color-aboutus);
}*/

.main-nav li.active a {
  /*color:           black;*/
  font-weight:     bold;
  text-decoration: none;
}

/*.main-nav a:hover {
  border-bottom: 3px solid white;
}*/

/* Frame Content */

#frame-content{
	width:   100%;
	/*height: 221px;*/
	position:         relative;
	top:              0px;
	background-color: transparent;
  display:          block;
}

#frame-content h1 {
  font-size:   1.0rem;
  color:       white;
}

/* RSlider */

.rslides {
  margin: 0 auto 40px;
}

.rslides ul{
  list-style: none;
}


.rslides_tabs {
  list-style: none;
  padding: 0;
  background: rgba(0,0,0,.25);
  box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0);
  -moz-box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0);
  -webkit-box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0);
  font-size: 18px;
  list-style: none;
  margin: 0 auto 50px;
  max-width: 540px;
  padding: 10px 0;
  text-align: center;
  width: 100%;
}

.rslides_tabs li {
  display: inline;
  float: none;
  margin-right: 1px;
}

.rslides_tabs a {
  width: auto;
  line-height: 20px;
  padding: 9px 20px;
  height: auto;
  background: transparent;
  display: inline;
}

.rslides_tabs li:first-child {
  margin-left: 0;
}

.rslides_tabs .rslides_here a {
  background: rgba(255,255,255,.1);
  color: #fff;
  font-weight: bold;
}

#slider1 {
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  margin: 0 auto;
}
        
.slider1 .caption {
  display: block;
  position: absolute;
  z-index: 2;
  font-size: 20px;
  text-shadow: none;
  color: #fff;
  background: transparent;
  /*background: rgba(0,0,0, .7);*/
  border-bottom:  2px solid #e9e9e9;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 20px;
  margin: 0;
  max-width: none;
}

.slider1_nav {
  position: absolute;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  top: 52%;
  left: 0;
  opacity: 0.7;
  z-index: 3;
  text-indent: -9999px;
  overflow: hidden;
  text-decoration: none;
  height: 61px;
  width: 38px;
  background: transparent url("../images/arrows.gif") no-repeat left top;
  margin-top: -45px;
}

.slider1_nav:active {
  opacity: 1.0;
}

.slider1_nav.next {
  left: auto;
  background-position: right top;
  right: 0;
}

#slider2 {
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  margin: 0 auto;
}
        
.slider2 .caption {
  display: block;
  position: absolute;
  z-index: 2;
  font-size: 20px;
  text-shadow: none;
  color: #fff;
  background: transparent;
  /*background: rgba(0,0,0, .7);*/
  border-bottom:  2px solid #e9e9e9;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 20px;
  margin: 0;
  max-width: none;
}

.slider2_nav {
  position: absolute;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  top: 52%;
  left: 0;
  opacity: 0.7;
  z-index: 3;
  text-indent: -9999px;
  overflow: hidden;
  text-decoration: none;
  height: 61px;
  width: 38px;
  background: transparent url("../images/arrows.gif") no-repeat left top;
  margin-top: -45px;
}

.slider2_nav:active {
  opacity: 1.0;
}

.slider2_nav.next {
  left: auto;
  background-position: right top;
  right: 0;
}

.home .en {
  background-image:      url(../images/home_en.jpg);
  background-size:       100% 100%;
  min-height:            240px;
  background-repeat:     no-repeat;
  background-position:   top;
  background-color:      white;
  background-position-x: left;
}

.home .fr {
  background-image:      url(../images/home_fr.jpg);
  background-size:       100% 100%;
  height:                240px;
  background-repeat:     no-repeat;
  background-position:   top;
  background-color:      white;
  background-position-x: left;
}

.innovations .en,
.innovations .fr {
  background-image:      url(../images/innovations_en.jpg);
  background-size:       100% 100%;
  width:                 100%;
  height:                auto;
  background-repeat:     no-repeat;
  background-position:   top;
  background-color:      white;
  background-position-x: left;
}

.services .en,
.services .fr {
  background-image:      url(../images/services_en.jpg);
  background-size:       100% 100%;
  height:                152px;
  background-repeat:     no-repeat;
  background-position:   top;
  background-color:      white;
  background-position-x: left;
}

.publications .en,
.publications .fr {
  background-image:      url(../images/publications_en.jpg);
  background-size:       100% 100%;
  height:                152px;
  background-repeat:     no-repeat;
  background-position:   top;
  background-color:      white;
  background-position-x: left;
}

.aboutus .en {
  background-image:      url(../images/aboutus_en.jpg);
  background-size:       100% 100%;
  height:                152px;
  background-repeat:     no-repeat;
  background-position:   top;
  background-color:      white;
  background-position-x: left;
}

.aboutus .fr {
  background-image:      url(../images/aboutus_fr.jpg);
  background-size:       100% 100%;
  height:                152px;
  background-repeat:     no-repeat;
  background-position:   top;
  background-color:      white;
  background-position-x: left;
}



/**** GRID ****/
.grid_1 { width:80px; }
.grid_2 { width:180px; }
.grid_3 { width:280px; }
.grid_4 { width:380px; }
.grid_5 { width:480px; }
.grid_6 { width:580px; }
.grid_7 { width:680px; }
.grid_8 { width:780px; }
.grid_9 { width:880px; }

.grid_1_1 { width: calc(100% - 20px);}

/* Half */
.grid_2_1 { width: calc(50% - 20px);}

/* Thirds */
.grid_3_1 { width: calc(33.33% - 20px); }
.grid_3_2 { width: calc(66.66% - 20px); }

/* Quarters */
.grid_4_1 { width:  25%; /*calc(20% - 10px);*/ }
.grid_4_2 { width:  50%; }
.grid_4_3 { width:  75%; }

.column {
	margin:     0px 0px;
	padding:    0px 10px;
	overflow:   hidden;
	float:      left;
	display:    inline;
	text-align: justify;
}

.row {
	width:    100%;
	margin:   0 auto;
	overflow: hidden;
}

.row .row {
	text-align: justify;
	margin:     0;
	width:      auto;
	display:    inline-block;
}

.row p{
	text-align: justify;
	margin:     0 0 20px 0;
}

 /* Style the button that is used to open and close the collapsible content */
button.collapsible {
  /*border-top:     1px solid #e9e9e9;*/
}

.collapsible {
  display:          block;
  background-color: #eee;
  font-size:        1.0rem;
  font-weight:      bold;
  cursor:           pointer;
  padding:          10px 10px;
  width:            100%;
  text-align:       left;
  outline:          none;
}

.collapsible:after {
    color: black!important;
    content: "\2795"; /* Unicode character for "plus" sign (+) */
    font-size: 1.0rem;
    float: right;
    margin-left: 5px;
}

.collapsible.active:after {
    color: black!important;
    content: "\2796"; /* Unicode character for "minus" sign (-) */
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
  background-color: #ccc;
}

/* Style the collapsible content. Note: hidden by default */
.collapsible-content {
  display:          none;
  padding:          0px 10px;
  overflow:         hidden;
  background-color: white;
}

/* Home page */

.article-services h2{
  color:          var(--color-services);
  border-bottom:  2px solid var(--color-services);
}

.article-aboutus h2{
  color:          var(--color-aboutus);
  border-bottom:  2px solid var(--color-aboutus);
}


/**** Innovations *****/
.content-innovations h2{
  color:          var(--color-innovations);
  font-size:      1.3rem;
  font-weight:    bold;
  padding:        3px 5px;
  margin:         0;
  margin-bottom:  0.3em;
  border-bottom:  2px solid #e9e9e9;
}

.content-innovations h3{
  color:          black;
  font-size:      1.3rem;
  font-weight:    bold;
  padding:        3px 5px;
  margin:         0;
  margin-top:     0.4rem;
  margin-bottom:  0.3rem;
  border-bottom:  2px solid #e9e9e9;
}

.content-innovations p{
  color:         #363636;
  font-size:     1.0rem;
  text-align:    justify;
	margin-bottom: 20px;
}

.content-innovations #content p{
  color:         #363636;
  font-size:     1.0rem;
	text-align:    justify;
	margin-bottom: 10px;
}

.content-innovations ul {
  background-color: #f5f5f5;
  list-style:     none;
  padding:        0.5rem;
  border:         2px solid #e9e9e9;
}

.content-innovations ul li {
  color:          var(--color-innovations);
  list-style:     none;
  font-size:      0.8rem;
  line-height:    1.4rem;
  padding:        1px 5px;
}

.content-innovations a {
  color: var(--color-innovations);
}

.content-innovations a:hover{
 font-weight: bold;
}

.content-innovations button.collapsible {
  color:  var(--color-innovations);
}

.content-innovations .collapsible {
  color: var(--color-innovations);
}

.article-innovations h2{
  color:          var(--color-innovations);
  border-bottom:  2px solid var(--color-innovations);
}

.article-innovations button.collapsible {
  color: var(--color-innovations);
}

.article-innovations .collapsible {
  color: var(--color-innovations);
}

/**** Services *****/
.content-services h2{
  color:          var(--color-services);
  font-size:      1.3rem;
  font-weight:    bold;
  padding:        3px 5px;
  margin:         0;
  margin-bottom:  0.3em;
  border-bottom:  2px solid #e9e9e9;
}

.content-services h3{
  color:          black;
  font-size:      1.3rem;
  font-weight:    bold;
  padding:        3px 5px;
  margin:         0;
  margin-top:     0.4rem;
  margin-bottom:  0.3rem;
  border-bottom:  2px solid #e9e9e9;
}

.content-services p{
  color:         #363636;
  font-size:     1.0rem;
  text-align:    justify;
	margin-bottom: 20px;
}

.content-services #content p{
  color:         #363636;
  font-size:     1.0rem;
	text-align:    justify;
	margin-bottom: 10px;
}

.content-services ul {
  background-color: #f5f5f5;
  list-style:     none;
  padding:        0.5rem;
  border:         2px solid #e9e9e9;
}

.content-services ul li {
  color:          var(--color-services);
  list-style:     none;
  font-size:      0.8rem;
  line-height:    1.4rem;
  padding:        1px 5px;
}

.content-services a {
  color: var(--color-services);
}

.content-services a:hover{
 font-weight: bold;
}

.content-services button.collapsible {
  color:  var(--color-services);
}

.content-services .collapsible {
  color: var(--color-services);
}

.article-services h2{
  color:          var(--color-services);
  border-bottom:  2px solid var(--color-services);
}

.article-services button.collapsible {
  color: var(--color-services);
}

.article-services .collapsible {
  color: var(--color-services);
}

/**** Publications *****/
.content-publications h2{
  color:          var(--color-publications);
  font-size:      1.3rem;
  font-weight:    bold;
  padding:        3px 5px;
  margin:         0;
  margin-bottom:  0.3em;
  border-bottom:  2px solid #e9e9e9;
}

.content-publications h3{
  color:          black;
  font-size:      1.3rem;
  font-weight:    bold;
  padding:        3px 5px;
  margin:         0;
  margin-top:     0.4rem;
  margin-bottom:  0.3rem;
  border-bottom:  2px solid #e9e9e9;
}

.content-publications p{
  color:         #363636;
  font-size:     1.0rem;
  text-align:    justify;
	margin-bottom: 20px;
}

.content-publications #content p{
  color:         #363636;
  font-size:     1.0rem;
	text-align:    justify;
	margin-bottom: 10px;
}

.content-publications ul {
  background-color: #f5f5f5;
  list-style:     none;
  padding:        0.5rem;
  border:         2px solid #e9e9e9;
}

.content-publications ul li {
  color:          var(--color-publications);
  list-style:     none;
  font-size:      0.8rem;
  line-height:    1.4rem;
  padding:        1px 5px;
}

.content-publications a {
  color: var(--color-publications);
}

.content-publications a:hover{
 font-weight: bold;
}

.content-publications button.collapsible {
  color:  var(--color-publications);
}

.content-publications .collapsible {
  color: var(--color-publications);
}

.article-publications h2{
  color:          var(--color-publications);
  border-bottom:  2px solid var(--color-publications);
}

.article-publications button.collapsible {
  color: var(--color-publications);
}

.article-publications .collapsible {
  color: var(--color-publications);
}

.content-publications :link { 
  color: #0000EE;
}

.content-publications :visited {
  color: #551A8B;
}


.publication_entry {
  margin-top:     1rem;
  margin-bottom:  0.6rem;
  width:  100%;
  border-top:     2px solid black;
}

.publication_header {
  margin: 10px
}

.publication_body {
  margin: 20px;
}

#publication_date {
  width:      100%;
  padding:    0;
  color:      black;
  margin-top:     1rem;
  /*margin-bottom:  0.6rem;*/
  float:          left;
  /*border-top:     2px solid black;
  border-bottom:  1px solid #e9e9e9;*/
}

#publication_image {
	margin:         10px;
	vertical-align: middle;
	float:          right;
  max-height:     100px;
  max-width:      200px;
}

#publication_title {
  float:      left;
  width:      100%;
  color:      black;
  margin-bottom:     10px;
  font-size:  1.3rem;
  font-weight: bold;
  text-align:  left;
  border-bottom:  1px solid #e9e9e9;
}

#publication_authors {
  font-size:      1.0rem;
  font-weight:    normal;
  text-align:     justify;
  /*margin-top:     0.6em;
  margin-bottom:  0.6em;
  border-top:     1px solid #e9e9e9;*/
}

#publication_issue {
  margin-top:     0.6em;
  margin-bottom:  0.6em;
  border-top:     1px solid #e9e9e9;
}

/**** AboutUs *****/
.content-aboutus h2{
  color:          var(--color-aboutus);
  font-size:      1.3rem;
  font-weight:    bold;
  padding:        3px 5px;
  margin:         0;
  margin-bottom:  0.3em;
  border-bottom:  2px solid #e9e9e9;
}

.content-aboutus h3{
  color:          black;
  font-size:      1.1rem;
  font-weight:    bold;
  padding:        3px 5px;
  margin:         0;
  margin-top:     0.4rem;
  margin-bottom:  0.3rem;
  border-bottom:  2px solid #e9e9e9;
}

#philippe {
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.content-aboutus p{
  color:         #363636;
  font-size:     1.0rem;
  text-align:    justify;
	margin-bottom: 20px;
}

.content-aboutus #content p{
  color:         #363636;
  font-size:     1.0rem;
	text-align:    justify;
	margin-bottom: 10px;
}

.content-aboutus ul {
  background-color: #f5f5f5;
  list-style:     none;
  padding:        0.5rem;
  border:         2px solid #e9e9e9;
}

.content-aboutus ul li {
  color:          var(--color-aboutus);
  list-style:     none;
  font-size:      0.8rem;
  line-height:    1.4rem;
  padding:        1px 5px;
}

.content-aboutus a {
  color: var(--color-aboutus);
}

.content-aboutus a:hover{
 font-weight: bold;
}

.content-aboutus button.collapsible {
  color:  var(--color-aboutus);
}

.content-aboutus .collapsible {
  color: var(--color-aboutus);
}

.article-aboutus h2{
  color:          var(--color-aboutus);
  border-bottom:  2px solid var(--color-aboutus);
}

.article-aboutus button.collapsible {
  color: var(--color-aboutus);
}

.article-publications .collapsible {
  color: var(--color-aboutus);
}


/**** Footer *****/
footer{
  background-color: #525252;
  font-size:        11pt;
  clear:            both;
  position:         static;
  margin-top:       20px;
  padding-top:      20px;
  text-align:       center;
  color:            white;
}

#footer-all p{
  color:         white;
	text-align:    justify;
  width:         100%;
  margin:         0;
	/* margin-bottom: 20px; */
}

#footer-all h2{
  color:          white;
  font-weight:    bold;
  padding:        0px 5px;
  margin:         0;
  /* margin-bottom:  0.3em; */
  /* border-bottom:  2px solid #e9e9e9; */
}

#footer-all p{
  color:         #363636;
  text-align:    justify;
 /*  margin-bottom: 20px; */
}

#footer-all #content p{
  color:         #363636;
	text-align:    justify;
	/* margin-bottom: 10px; */
}

#footer-all ul {
  /* color:          black;
  background-color: #f5f5f5; */
  /* list-style:     none;
  font-size:      10pt; */
  padding:        8px;
  border-top:     1px solid white;
  border-bottom:  1px solid white;
}

#footer-all ul li {
  /* color:          var(--color-innovations); */
  list-style:     none;
  font-size:      0.8rem;
  line-height:    0.9rem;
  padding:        1px 5px;
}

#footer-all a {
   /*  color:          var(--color-innovations); */
}

#footer-all a:hover{
    font-weight:    bold;
}

#footer-left {
  float: left;
}


#footer-right {
  float: right;
}

#footer-left h2{
  color:          white;
  font-weight:    bold;
  padding:        3px 5px;
  margin:         0;
  margin-bottom:  0.3em;
  border-bottom:  2px solid #e9e9e9;
}

#footer-right p{
  color:         white;
  text-align:    justify;
  margin-bottom: 20px;
}

#footer-middle h2{
  color:          #525252;
  font-weight:    bold;
  padding:        3px 5px;
  margin:         0;
  margin-bottom:  0.3em;
  border-bottom:  2px solid #e9e9e9;
}

#footer-left ul {
  list-style:     none;
  padding:        8px;
}

#footer-left ul li {
  color:          white;
  list-style:     none;
  font-size:      1rem;
  line-height:    1.4rem;
  padding:        1px 5px;
}

#footer-left ul li a {
  color:          white;
  list-style:     none;
  font-size:      1rem;
  line-height:    1.4rem;
  padding:        1px 5px;
  text-decoration: none;
}


#footer-middle ul {
  list-style:     none;
  padding:        8px;
}

#footer-middle ul li {
  color:          white;
  list-style:     none;
  font-size:      1rem;
  line-height:    1.4rem;
  padding:        1px 5px;
}

#footer-middle ul li a {
  color:          white;
  list-style:     none;
  font-size:      1rem;
  line-height:    1.4rem;
  padding:        1px 5px;
  text-decoration: none;
}


#footer-right p{
  color:         white;
	text-align:    justify;
	margin-bottom: 20px;
}

#footer-right h2{
  color:          white;
  font-weight:    bold;
  padding:        3px 5px;
  margin:         0;
  margin-bottom:  0.3em;
  border-bottom:  2px solid #e9e9e9;
}

#footer-right h3{
  color:          black;
  font-size:      14pt;
  font-weight:    bold;
  padding:        3px 5px;
  margin:         0;
  margin-bottom:  0.3em;
  border-bottom:  2px solid #e9e9e9;
}

#footer-right p{
  color:         #363636;
  text-align:    justify;
  margin-bottom: 20px;
}

#footer-right #content p{
  color:         #363636;
	text-align:    justify;
	margin-bottom: 10px;
}

#footer-right ul {
  background-color: #f5f5f5;
  list-style:     none;
  padding:        8px;
  border:         2px solid #e9e9e9;
}

#footer-right ul li {
  color:          var(--color-innovations);
  list-style:     none;
  font-size:      0.7rem;
  line-height:    0.9rem;
  padding:        1px 5px;
}

#footer-right a {
    color:          var(--color-innovations);
}

#footer-right a:hover{
    font-weight:    bold;
}


#copyright p{
  text-align:     center;
  font-size:      0.7rem;
  color:          white;
  font-weight:    normal;
  padding:        3px 0 15px 0;
}

.screen-large {
  display: block;

}

.screen-small {
  display: none;
}

/* Large tablets */
@media screen and (max-width:959px) {
  /* Start of large tablet styles */
  .body-wrapper {
    width:    100%;
    grid-gap: 10px;
  }

}

/* Medium tablets */
@media screen and (max-width:767px) {
  /* Start of phone styles */

  .body-wrapper {
    width:    100%;
    grid-gap: 0px;
  }

  .header-container {
    grid-template-areas:
      'logo company title';
    grid-gap: 5px;
    grid-template-columns: 100px auto;
  }
  
  /* Company */
  #header-company p {
    font-size:   1.4rem;
  }

  /* Title */
  #header-title p {
    font-size: 1.2rem;
  }
  
  /* Navigation */
  .main-nav ul {
    grid-gap:   5px;
  }
  
  .main-nav li a {
    display:     block;
    padding:     0.2rem;
    text-align:  center;
    color:       var(--color-aboutus);
    font-size:   0.7rem;
    text-decoration: none;
  }
  
}

/* Phones */
@media screen and (max-width:479px) {
  /* Start of phone styles */
  .screen-large {
    display: none!important;

  }
  
  .screen-small {
    display: block!important;
  }

  .body-wrapper {
    width:    100%;
    grid-gap: 0px;
  }
  
  .header-container {
    grid-template-areas:
      'logo company title';
    grid-gap: 5px;
    height: 60px;
  }
  
  #header-logo {
    width:     70px;
    height:    70px;
    top:       0;
    left:      0;
    position:  absolute;
  }
  
  /* Company */
  #header-company p {
    font-size:   1.4rem;
    top:       -1.2rem;
    left:      80px;
    position:  absolute;
  }

  /* Title */
  #header-title p {
    font-size: 1.2rem;
    top:       1.1rem;
    width:     calc(100%-80px);
    left:      80px;
    position:  absolute;
  }
  
  #header-tools {
    color:     black;
    top:       5px;
    right:     10px;
    position:  absolute;
  }
  
  /* Navigation */

  .main-nav ul {
    grid-gap:   0;
  }
  
  .main-nav li a {
    padding:     0 5px;
    font-size:   0.9rem;
  }

  .home .en {
    background-image:      url(../images/home_en.jpg);
    height:                50px;
  }
  
  .home .fr {
    background-image:      url(../images/home_fr.jpg);
    height:                50px;
  }
  
  .innovations .en,
  .innovations .fr {
    background-image:      url(../images/innovations_m_en.jpg);
    height:                128px;
  }

  .services .en,
  .services .fr {
    background-image:      url(../images/services_m_en.jpg);
    height:                128px;
  }

  .publications .en,
  .publications .fr {
    background-image:      url(../images/publications_m_en.jpg);
    height:                128px;
  }

  .aboutus .en {
    background-image:      url(../images/aboutus_m_en.jpg);
    height:                128px;
  }

  .aboutus .fr {
    background-image:      url(../images/aboutus_m_fr.jpg);
    height:                128px;
  }

  .row p{
	  text-align: justify;
	  margin:     0 20px 0 0;
  }

  /* Half */
  .grid_2_1 { width: 100%; }

  /* Thirds */
  .grid_3_1 { width: 100%; }
  .grid_3_2 { width: 100%; }

  /* Quarters */
  .grid_4_1 { width:  100%; }
  .grid_4_2 { width:  100%; }
  .grid_4_3 { width:  100%; }

  .publication_entry {
    margin-top:     0;
    margin-bottom:  0;
    width:  100%;
    border-top:     none;
  }


  .collapsible {
    display:          block;
    background-color: #eee;
    font-size:        1.0rem;
    font-weight:      bold;
    cursor:           pointer;
    padding:          5px;
    width:            100%;
    text-align:       left;
    outline:          none;
  }

  .collapsible:after {
    content: "\2795"; /* Unicode character for "plus" sign (+) */
    color: black!important;
    font-size: 1.0rem;
    /*float: right;
    top: 0;
    margin-left: 5px;*/
    right:          5px;
    position:       absolute;
  }

  #publication_date {
    padding:        0;
    /*color:          black;*/
    font-size:      0.9em;
    font-weight:    normal;
    margin-top:     0;
    /*margin-bottom:  0.6em;*/
    float:          left;
    /*border-top:     2px solid black;*/
    /*border-bottom:  1px solid #e9e9e9;*/
  }

  #publication_image {
	  margin:         0px 5px;
	  vertical-align: middle;
    max-height:     30px;
    max-width:      150px;
    right:          30px;
    position:       absolute;
  }

  #publication_title {
	  float:       left;
    height:      3-px;
    width:       100%;
    padding:     20px 50px 0px 5px;
    color:       black;
    margin:      0;
    font-size:   0.9rem;
    font-weight: bold;
    text-align:  left;
  }

  #publication_authors {
    padding:        6px 5px;
    font-size:      0.8rem;
    font-weight:    normal;
    text-align:     justify;
  }

  #publication_issue {
    padding:        6px 5px;
    font-size:      0.8rem;
    font-weight:    normal;
    text-align:     left;
  }

  #publication_pubmed {
    padding:        6px 5px;
    font-size:      0.8rem;
    font-weight:    normal;
    text-align:     left;
  }
  
    #publication_pubmed a {
    padding:        6px 5px;
    font-size:      0.8rem;
    font-weight:    normal;
    text-align:     left;
  }

  .slider1_nav {
    position: absolute;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    top: 52%;
    left: 0;
    opacity: 0.7;
    z-index: 3;
    text-indent: -9999px;
    overflow: hidden;
    text-decoration: none;
    height: 61px;
    width: 30px;
    background: transparent url("../images/arrows.gif") no-repeat left top;
    margin-top: -45px;
  }

  .slider2_nav {
    position: absolute;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    top: 52%;
    left: 0;
    opacity: 0.7;
    z-index: 3;
    text-indent: -9999px;
    overflow: hidden;
    text-decoration: none;
    height: 61px;
    width: 30px;
    background: transparent url("../images/arrows.gif") no-repeat left top;
    margin-top: -45px;
  }


}


/* Smallest width */
/* @media screen and (max-width:320px) {
    #container{
        width: 320px;
    }
}*/