/*
orange: #ED402F
gris foncé (texte): #333
*/

::-moz-selection { color: #fff; background:#ED402F}
::selection { color: #fff; background:#ED402F }
input,
textarea,
button,
select,
a, #nav-toggle {
  -webkit-tap-highlight-color:  rgba(255, 255, 255, 0);
}

.text-black {color:#333}
.color-orange {color:#ED402F}

/*Fonts*/
@font-face {
    font-family: 'metropolisregular';
    src: url('../fonts/metropolis-regular-webfont.woff2') format('woff2'),
         url('../fonts/metropolis-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'metropolissemi_bold';
    src: url('../fonts/metropolis-semibold-webfont.woff2') format('woff2'),
         url('../fonts/metropolis-semibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

/*
@font-face {
    font-family: 'metropolisbold';
    src: url('../fonts/metropolis-bold-webfont.woff2') format('woff2'),
         url('../fonts/metropolis-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}*/


body, #montreal h3 {font-family:'metropolisregular', sans-serif}

.nav li, h1, h2, h3, h4, h5, h6, strong, .btn, #menu-toggle{
font-family: 'metropolissemi_bold', sans-serif;
font-weight: normal;
}

/* === RESET === */


html {
    box-sizing: border-box;
    font-size: 62.5%;
  }
  body {
  font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 1.6;
  font-weight: 400;
  }

  *, *:before, *:after {
    box-sizing: inherit;
  }

  body, h1, h2, h3, h4, h5, h6, p, ol, ul {
    margin: 0;
    padding: 0;
    font-weight: normal;
    color:#333;
  }

  ol, ul {
    list-style: none;
  }

  img {
    max-width: 100%;
    height: auto;
    vertical-align: top;
  }



/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  letter-spacing: 0.02em
}

h1 { font-size: 3.3rem; line-height: 1.2;  margin-bottom: 1.5rem;}
h2 { font-size: 2.8rem; line-height: 1.25; margin-bottom: 1rem; }
h3 { font-size: 2.3rem; line-height: 1.3;  margin-bottom: 0.5rem;}
h4 { font-size: 1.8rem; line-height: 1.35; margin-bottom: 0.3rem;}
h5 { font-size: 1.5rem; line-height: 1.5;  margin-bottom: 0.2rem;}
h6 { font-size: 1.2rem; line-height: 1.6; margin-bottom: 0.1rem; }

/* Larger than phablet */
@media (min-width: 768px) {
  h1 { font-size: 5.0rem; }
  h2 { font-size: 4.2rem; }
  h3 { font-size: 3.7rem; }
  h4 { font-size: 2.0rem; }
  h5 { font-size: 1.8rem; }
  h6 { font-size: 1.3rem; }
}

/* Larger than phablet */
@media (min-width: 1200px) {
  h1 { font-size: 6.0rem; }
  h2 { font-size: 5.2rem; }
  h3 { font-size: 4.05rem; }
  h4 { font-size: 3.0rem; }
  h5 { font-size: 2.0rem; }
  h6 { font-size: 1.3rem; }
}


p {
  margin-top: 0;
  margin-bottom:1.2rem;

}


.text-center {text-align: center;}



/* === LOGO === */
#logo {max-width: 250px; padding:10px 0;}

#logo img:hover {cursor: pointer;}

/* === NAVIGATION === */
#header-top {background:#fff;  width: 100%; position:relative; z-index: 50; position:fixed; top:0;
    box-shadow: 0px 5px 25px rgba(51, 51, 51, 0.2);}

    nav.scroll-nav {margin-left: auto;}


    .nav-container{
      display: flex;
      justify-content: center;
      flex-direction: column;
      text-align: right;
    }




/* === SECTIONS === */
section.section-padding {
    padding-bottom: 5rem;
    margin-top:-120px;
    padding-top:120px;
}

@media screen and (min-width: 768px) {
section.section-padding > .container {margin-top:3.5rem}
}
section h2 {margin-bottom: 3rem}

.clear {clear:both;}


/* === HOME === */
#home {
  background: #5ea2d2;
  background: -moz-linear-gradient(top, #5ea2d2 0%, #89b8db 100%);
  background: -webkit-linear-gradient(top, #5ea2d2 0%,#89b8db 100%);
  background: linear-gradient(to bottom, #5ea2d2 0%,#89b8db 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5ea2d2', endColorstr='#89b8db',GradientType=0 );
   width:100%; padding-top:85px;
  padding-bottom:0;
  }


#home h1, #home h4, #home h5 {color:#fff; text-align: center}
#home #hero {padding:4vh 0 0; margin:0 auto; width: 100%; max-width: 620px;}


@media screen and (min-width: 992px) {
  #home #hero {padding:9vh 0 0;}
}


/* === BUTTONS === */
a.btn, span.btn, #menu-toggle {
font-size: 12px;
padding: 5px 15px;
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
border-radius: 3px;
text-decoration:none; color:#fff; background: #DC2E1C; border:3px solid #DC2E1C; display: inline-block;
}

#menu-toggle {background:transparent; color:#ED402F; box-shadow:0 0 0 transparent; display: inline;}

#menu-toggle:focus:active {color:#fff; background: #DC2E1C; border-color:#DC2E1C}


@media screen and (min-width: 992px) {
  a.btn, span.btn, #menu-toggle {
    font-size: 14px;
    padding: 5px 25px;
  }
}


#hero .buttons {
  text-align: center;
  padding:10px 0;
}

#hero .buttons .btn {
  margin:10px 10px;
}

a.btn:hover, span.btn:hover {background: #ED402F; border-color:#ED402F;
  box-shadow: 0px 3px 8px rgba(237, 63, 47, 0.5);
}

a.btn.outlined, span.btn.outlined, #menu-toggle { background:transparent; border-color:#fff; }
a.btn.outlined.orange, span.btn.outlined.orange, #menu-toggle { border-color:#ED402F}

a.btn.outlined:hover { background:#fff; color:#5E9FCD;
  box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);}

a.btn, a.btn:hover, a.btn:focus, #menu-toggle, #menu-toggle:hover, #menu-toggle:focus{
transition: background 0.3s ease, border 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}




#meeting-sidebar a.btn {color:#fff;}
#meeting .btn-meeting{margin-top: 1.5rem; color:white;}
#past .btn-meeting{margin-top: 1.5rem}
/*a.btn:focus:not(:focus-visible):active { top:0; }*/

/*temp*/

/*section {min-height: 700px; }*/



/*hamburger*/

/* Style the menu link */
 .nav #menu-toggle {
  overflow: hidden;
}

/* Give the .nav ul a height when it's been opened, i.e. make it show */
 .nav ul.open {
  max-height: 20em;
}

/* Hide and position the closed .nav ul */
 .nav ul {
  max-height: 0;
  overflow: hidden;
  position: absolute;
  right: 1em;
  top: 4.3em;
  transition: max-height 0.25s ease-out;
  display: block;
  background: #fff;
  box-shadow: 0px 5px 25px rgba(51, 51, 51, 0.2);
}

/* Style the list items to appear under the menu link */
 .nav li {

  padding: 0 0.7em;
  display: block;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: -moz-none;
  -o-user-select: none;
  user-select: none;
  text-transform: uppercase;
}
.nav ul li:first-child {
  padding: 0.5em 0.7em 0;
}
.nav ul li:last-child {
  padding: 0 0.7em 0.5em;
}



.nav li a {
  padding: 0.3em 0;
  color: #333;
  text-decoration: none;
  display:block;
  }

.nav li.active a  {color: #ED402F}

.nav li, .nav li:hover{
transition: border-color 0.3s ease, color 0.3s ease  ;
}





/* On screens larger than 992px, remove the menu link and display all menu items */
@media screen and (min-width: 992px) {
  .nav ul {background: transparent; box-shadow: 0 0 0 transparent;}
  .nav li, .nav ul li:first-child, .nav ul li:last-child  {
    padding: 0.5em 0 0.2em 0;
    margin-left: 1.5em;
  }
  .nav li:first-of-type {margin-left: 0;}

  .nav li {border-bottom:0.3em solid transparent;}

  .nav li.active  {border-color:#ED402F; transition-delay: 0.5s;}


  .nav li:hover {color:#ED402F }

   .nav ul {
    overflow: auto;
    max-height: inherit;
    position: static;
    display: flex;
    justify-content: flex-end;
    background-color: transparent;

  }

   .nav #menu-toggle {
    display: none;
    visibility: hidden;
  }
}


/* === SECTION: MEETING === */
/*#meeting {margin-top:-120px; padding-top: 120px;}*/
#meeting-content, #meeting-sidebar {margin-bottom: 2.5rem}

#meeting-sidebar {margin-top: -0.5rem;} /*fix text/h2 align*/

#meeting-content ul {margin-left: 2rem; margin-bottom: 1.5rem}
#meeting-content li {list-style: inside;}


#meeting a, #meeting-sidebar h5, #past a  {color:#ED402F}

#meeting a:hover, #past a:hover {text-decoration: none;}

@media screen and (min-width: 768px) {
  #meeting-sidebar .sidebar-sections {margin-bottom: 3rem}
}

@media screen and (min-width: 992px) {
  #meeting-sidebar .sidebar-sections {margin-bottom: 2.2rem}
}

@media screen and (min-width: 1200px) {
  #meeting-sidebar .sidebar-sections {margin-bottom: 0}
}

/* === SECTION: SPEAKERS === */

.speakers-list h5 {color: #ED402F; text-transform: uppercase;}

/* === SECTION: MONTREAL === */
#montreal .icon {width: 50px; height: 50px; margin:0 auto;}
#montreal .text-center {padding-bottom:50px; position: relative;  margin-bottom:4rem;}
#montreal .text-center .button {position: absolute; bottom: 0; left:0; right: 0; text-align: center;}
#montreal .text a {color:#ED402F}


/* === SECTION: SPEAKERS === */

#partners img{padding: 1rem 0;
  width: auto;
  max-width: 100%;}
#partners .rqrd img {max-height: none; padding:0; }

@media screen and (max-width: 767px) {
  #partners img {max-width: 240px!important;
    margin: 1rem auto;
    display: block;}
}

/* section past edition  */

.marg-b-2 {
  margin-bottom: 32px;
}

.marg-b-12 {

  margin-bottom: -12rem;
}

.flex {
  display: flex;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  padding-top: 3rem;
}

@media screen and (max-width: 767px) {
  .marg-b-12 {
    margin-bottom: 0;
  }

  .flex {
    flex-flow: column;
    padding-top: 2rem;
  }
}

/* === SECTION: CONTACT === */

#contact a{color:#ED402F; text-decoration: none;}
#contact h2 {margin-bottom: 2rem;}
#contact {padding-bottom: 3rem; margin-top:3rem;}

/** {outline: 1px solid violet}*/

/* === Footer === */
footer #copyright {background:#333; text-align:center; padding:1.5rem 0; }
footer #copyright p {color:#fff;}