@font-face {
     font-family: "LeagueGothicRegular";
     src: url('LeagueGothic-Regular.otf');
}

#meetup-logo{
     border: 0;
     max-width: 140px;
     float: right;
     margin-right: 5em;
     margin-top: 15px;
}

#entete{
     font:3em/1.1 "LeagueGothicRegular", sans-serif;
     letter-spacing: 0.03em;
     padding-top: 0.5em;
     color: #164D80;
     margin-left:8rem;
}

#entetedemos{
     font:3em/1.1 "LeagueGothicRegular", sans-serif;
     letter-spacing: 0.03em;
     padding-top: 0.5em;
     color: #db4f2c;
     margin-left:8rem;
}


#sous-titre{
     font:italic 1.25em/1.1 Garamond "Premier Pro", Garamond, serif;
     color: #164D80;
     margin-left:8rem;
     font-size: 1.7em;
}

html{
     background-image: url("./image/meetup1.png");
     background-size: cover;
     margin-top: -11px !important;
}

body{
     background-color: rgba(0, 0, 0, 0);
}

.header{
     background-color: #d8dbdc;
     color : #164D80;
     padding-bottom: 0px!important;
     margin-left: 0px;
     margin-right: 0px;
     width: 100%;
}

.master{
     background-color: rgba(255, 255, 255, 1);
     box-shadow: -1px -5px 26px 0px #333;
     padding-top: 15px;
     margin-top: 20px;
}

.space{
     border-bottom-color: #00589c;
     border-bottom-width: 40px;
     border-bottom-style: solid;

}
.navigation a {
     padding: 0.1em 0.5em;
     white-space: nowrap;
     margin: -0.5px 0 0 -0.5px;
     font-size: 90%;
     border: thin solid;
     color: #135049;
     line-height: 1.8;
     border-radius: 1em;
     text-decoration: none;
     margin-top:15px;
}

.navigation a:hover{
     background: #DDD;
}

a{
     text-decoration: underline;
}

.sectiontitle{
     font: 1.7em "LeagueGothicRegular",sans-serif;
     text-transform: uppercase;
     color: #004480;
     margin-bottom: 0.5em;
}

.sectiontitledemos{
     font: 1.7em "LeagueGothicRegular",sans-serif;
     text-transform: uppercase;
     color: #db4f2c;
     margin-bottom: 0.5em;
}

.agenda{
     margin-left: 30px;
}

.sponsors{
     text-align: center;
     border: 4px solid #E5E6E7;
     padding: 5px 20px;
     background-color: rgba(255, 255, 255, 0.7);
     margin-bottom: 30px;
}

.sponsors img{
     max-height: 100px ;
}
.sponsorstitle{
     border-bottom: 1px solid grey;
}

.addsponsor{
     border: 6px solid #d5d9de;
     background-color: #5189bb;
     color: white;
     border-radius: 9px;
     padding-top: 10px;
     padding-bottom: 10px;
}

.agendatitle{
     font-weight: bold;
}

.footer{
     border-top: 1px solid grey;
     margin: 10px 0;
     padding: 10px 0;
}

.portrait{
     float:left;
     margin-right:1em;
}

#carte{
     float:left;
     margin-right: 20px
}

#imageLyon{
     display: block;
     height: auto;
     margin-right:10%;
     float: left;
     margin-bottom: 1em;
}

#logolyon{
     display: block;
     max-width: 100%;
     height: auto;
 }

.alignlogo{
     display: grid;
     justify-items: center;
     row-gap: 1.5em
}

@font-face {
    font-family: "LeagueGothicRegular";
    src: url('./image/LeagueGothic-Regular.otf');
}

@media screen and (max-width: 500px){
     #entete {
          font-size: 2.5em;
          margin-left: 0rem;
     }
     #sous-titre{
          font-size: 1.5em;
          margin-left: 0rem;
     }
     #imageLyon{
          display: none;
     }
}

iframe { border: 0;}

/* Button created by Bert Bos for the 2018 W3C devmeetup in Lyon! */

.cta-button {display: inline-block; padding: 1em 9em 1em 4em;
  margin: 1em 1em; line-height: 1; text-shadow: none;
  font-family: Letter Gothic Std, Andale Mono, monospace;
  text-decoration: none; font-size: 1.1em; transition: 1s;
  position: relative; border: none; color: white; background: #db4f2c;
  /* background: #015ca4; */ /*background: #b84226; */ border-radius: 0;
  /* border-radius: 1.5em 0 0 1.5em; */ /* border-radius: 0.4em; */}

.cta-button:hover, button:active {background: orange; /* color: black; */
  transition: 0.2s}

.cta-button::after {content: " "; position: absolute; top: -1em;
  right: 2em; width: 5em; height: 5em; border: thin solid #db4f2c;
  border-radius: 50%; /* box-shadow: 0 1px 2px black; */
  background: 50% 65% / auto 75% url(lion.svg) no-repeat #fff;
  animation: 40s 3 ease-in-out turn}

@keyframes turn {
  0% {transform: rotate(0deg)}
  98% {transform: rotate(0deg)}
  100% {transform: rotate(-360deg)}
}

@keyframes bend-and-flip {
  0% {transform: scale(1, 1) rotate(0deg)}
  48% {transform: scale(1, 1) rotate(0deg)}
  49% {transform: scale(1, 1) rotate(-10deg)}
  50% {transform: scale(1, 1) rotate(0deg)}
  98% {transform: scale(1, 1) rotate(0deg);
    animation-timing-function: ease-in-out}
  99% {transform: scale(1, -1) rotate(0deg);
    animation-timing-function: ease-in-out}
  100% {transform: scale(1, 1) rotate(0deg)}
}