/*
COULEURS:
gris:         #D3D3D3;
gris-foncé:   #4F5F5D;
rouge:        #C5645B;
jaune:        #FFCC66;
bleu clair:   #9BB5BB;
bleu fonce:   #415C71;
*/
@import url("fonts.css");
body {
  font-family: "CaviarDreams";
  font-size: 100%;
  color: #415C71;
  background-color: #F9F9F9;
}

img {
  max-width: 100%;
  height: auto;
}
.wrapper{
  width: 100%;
  height: 100%;
  background-color: #F9F9F9;
}
.wrapper h1{
  width: 80%;
  font-size: 3rem;
  color: #415C71;
  font-family: "CaviarDreams";
}
.title,
.loading-title {
  text-align: center;
  text-transform: uppercase;
  font-size: 5em;
  letter-spacing: .085em;
  margin: 4.5rem auto 1rem auto;
}

.subtitle {
  font-size: 2em;
  margin-top: 1.7rem;
}

.title,
.loading-title,
.subtitle {
  color: #415C71;
  font-family: "CaviarDreams";
}

.tagline {
  text-align: center;
  text-transform: uppercase;
  display: block;
  letter-spacing: .3em;
  margin: 10px 0 40px;
  font-family: "CaviarDreams";
  color: #C5645B;
  font-size: 1.38rem;
}

.profile-img {
  float: left;
  width: 350px;
  border-radius: 5px;
  margin-right: 1.5em;
  display: block;
}

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

.main-nav ul {
  padding: 0;
}

.main-nav li {
  display: inline-block;
  text-decoration: none;
  margin: 0 20px;
  text-transform: uppercase;
}

.main-nav li a {
  text-decoration: none;
  color: #415C71;
}

.main-nav li a:hover,
.main-nav li a.active {
  color: #C5645B;
}

.page {
  max-width: 980px;
  padding: 0 20px;
  margin: 75px auto 0;
}

.page a {
  color: #415C71;
}
.page p{
  color: #415C71;
}
.exposition .txt_expo{
  position: relative;
  left: 70px;
}
.exposition .title_expo{
  color:  #415C71;
}
.exposition .date_expo{
}
.exposition .img_expo{
  position: absolute;
  display: flex;
  flex-grow: row wrap;
  width: 60px;
  height: 60px;
  background-color: salmon;
  border-radius: 50%;
}
.exposition a{
  padding: 10px;
}
.exposition p{
  padding-top: 1px;
  color: #C5645B;
}
.loading {
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0px;
  left: 0;
  background: #f9f9f9;
  -webkit-transition: .75s;
  transition: .75s;
}

.loading-title {
  color: #415C71;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.loading-progress {
  height: 10px;
  background: #415C71;
  top: -10px;
  bottom: 0;
  width: 100%;
  position: absolute;
  -webkit-transition: .35s;
  transition: .35s;
}

.about-me {
  margin: 20px 0 0;
}
.about-me p{
  font-size: 1.2rem;
}
.about-me .first_letter{
  color: #C5645B;
  font-size: 2rem;
}
.glitch{
  /*  position: relative; */
  /*  width: 50px; */
}
.glitch{
  font-family: "glitch";
  font-size: 1rem;
  padding: 0;
  margin: 0;
  display: inline-block;
  /*  position: absolute; */
  transform: translateX(0);
}
.glitch:hover{
  /*  position: relative; */
  cursor: none;
  animation: shake 150ms infinite;
  -moz-animation: shake 150ms infinite;
  -webkit-animation: shake 150ms infinite;
  -o-animation: shake 150ms infinite;
}
@keyframes shake {
  0% { -webkit-transform: translate(1px, 1px) rotate(0deg); }
  10% { -webkit-transform: translate(-1px, -1px) rotate(-1deg); }
  20% { -webkit-transform: translate(-1px, 0px) rotate(1deg); }
  30% { -webkit-transform: translate(0px, 1px) rotate(0deg); }
  40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
  50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
  60% { -webkit-transform: translate(-1px, 1px) rotate(0deg); }
  70% { -webkit-transform: translate(1px, 1px) rotate(-1deg); }
  80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
  90% { -webkit-transform: translate(1px, 1px) rotate(0deg); }
  100% { -webkit-transform: translate(1px, -1px) rotate(-1deg); }
}

@media (max-width: 1200px){
  .wrapper h1{
    font-size: 2.3rem;
  }
}
@media (max-width: 950px){
  .wrapper h1{
    position: relative;
    margin-top: 120px;
    font-size: 2rem;
  }
}
@media (max-width: 900px){
  .profile-img {
    float: none;
    margin: 0 auto;
    max-width: 400px;
    min-width: 100px;
  }

  .about-me {
    max-width: 600px;
    margin: 0 auto;
  }
}
@media (max-width: 780px){

  .main-nav li {
    margin: 0 5px;
  }

  .page {
    margin-top: 20px;
  }

  .profile-img {
    width: 200px;
    margin-top: 25px;
  }
}