@import url(../fonts/stylesheet.css);
@import url(normalize.css);
@import url(fontawesome/css/all.min.css);

/*
Off-white #FFFEF4
Dark grey #202123
Depp violet #5823EE
Medium violet #9F9DF0
Light violet #D9D9F6
Bright yellow #FFFF33
Pastel yellow #FFFF99
*/
* {
  box-sizing: border-box;
  font-size: 15px;
}

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

body {
  font-family: 'subjectivity-regular';
  background-color: #FFFEF4;
  color: #202123;
}

h1 {
  font-family: 'subjectivity-super';
  color: #5823EE;
  font-size: 5em;
}

h2 {
  font-family: 'subjectivity-super';
  color: #FFFEF4;
  font-size: 4em;
}

h3 {
  font-family: 'subjectivity-super';
  color: #5823EE;
  font-size: 2em;
}

/*Navbar*/
nav div {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

nav div a img {
  width: 80%;
}

nav button {
  padding: 0 !important;
  margin-right: 1.3em;
}

i {
  font-size: 2em;
}

.navbar {
  background-color: #FFFEF4 !important;
}

.nav-link {
  font-family: 'subjectivity-Super';
  color: #FFFEF4;
  font-size: 4.3em;
  text-align: center;
}

.nav-link:hover {
  color: #5823EE;
}

.navbar-toggler:focus {
  box-shadow: 0 0 0 0;
}

#navbarNav {
  background-color: #9F9DF0;
}

/* Classes */
/*Classes génériques*/
.bold {
  font-family: 'subjectivity-bold';
}

.super {
  font-family: 'subjectivity-Super';
}

.medium {
  font-family: 'subjectivity-medium'
}

.my-8 {
  margin: 5em auto;
}

.overflow{
  overflow-x: hidden;
}
/*Classes spécifiques*/
.morphing {
  border-radius: 1em;
}

.exergue {
  font-family: 'subjectivity-bold';
  color: #5823EE;
}

            /* ID */
/*Projet Belle-île*/

#lame6-charte_graphique div figure.couleur1 div.circle{
  content: '';
  background-color: #FDFDFD;
  border: solid 1px #202123;
  height: 100px;
  width: 100px;
  border-radius: 50%;
}
#lame6-charte_graphique div figure.couleur2 div.circle{
  content: '';
  background-color: #BEE3FA;
  height: 100px;
  width: 100px;
  border-radius: 50%;
}
#lame6-charte_graphique div figure.couleur3 div.circle{
  content: '';
  background-color: #F9F5F1;
  border: solid 1px #202123;
  height: 100px;
  width: 100px;
  border-radius: 50%;
}
#lame6-charte_graphique div figure.couleur4 div.circle{
  content: '';
  background-color: #5D4532;
  height: 100px;
  width: 100px;
  border-radius: 50%;
}

/*Projet LK Marketing*/
#lame5-charte div figure.couleur1 div.circle{
  content: '';
  background-color: #FEFEF5;
  border: solid 1px #202123;
  height: 100px;
  width: 100px;
  border-radius: 50%;
}
#lame5-charte div figure.couleur2 div.circle{
  content: '';
  background-color: #9FADFF;
  height: 100px;
  width: 100px;
  border-radius: 50%;
}
#lame5-charte div figure.couleur3 div.circle{
  content: '';
  background-color: #0528F2;
  height: 100px;
  width: 100px;
  border-radius: 50%;
}
#lame5-charte div figure.couleur4 div.circle{
  content: '';
  background-color: #0E1B48;
  height: 100px;
  width: 100px;
  border-radius: 50%;
}

/*Projet La Grenze*/
.size{
  width: 80%;
}


/*Placement stickers*/
#stickers .sticker1 {width: 45%; height: 5em;
margin-left: 10em;}
#stickers .sticker2 {width: 45%; height: 6.25em;
margin-left: 1em;}
#stickers .sticker3 {width: 45%; height: 3.75em;
margin-left: 8em;}
#stickers .sticker4 {width: 45%; height: 6.25em;}
#stickers .sticker5 {width: 45%; height: 6.25em;  margin-bottom: 6.25em;  margin-left: 8em;}
#stickers .sticker6{width: 45%;width: 15em;}
#stickers .sticker7 {width: 45%;width: 15em; margin-left: 8em}

/*Projets videos*/
/*Belle-ile*/
#lame5-video_scroll {
  background-color: #D9D9F6;
}

/*La Grenze*/
#lame6-video_scroll {
  width: 60%;
  height: auto;
  background-color: #D9D9F6;
}

/*Footer*/
#footer {
  background-color: #5823EE;
}

#footer h2 {
  font-family: 'subjectivity-Super';
  color: #FFFEF4;
  font-size: 3.75em;
  height: 30px;
  position: sticky;
}

#footer img.thumbnail {
  border-radius: 10px;
  width: 70%;
}

.btn-footer {
  width: 40%;
}

.py-md-8 {
  margin-left: 5em;
  margin-right: 5em;
}

/* Projet - Belle-île*/
#wording p {
  font-family: 'subjectivity-super';
  font-size: 2em;
}

#lame3-logo {
  background-color: #D9D9F6;
}

#logo-belle_ile-blanc {
  background-color: black;
  padding: 3em;
}

#logo-belle_ile-noir {
  background-color: white;
  padding: 3em;
}

/*Animations*/
.button {
  -webkit-animation: button 5s linear infinite;
}

@-webkit-keyframes button {
  from {
    -webkit-transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
  }
}

        /*Media query*/
/*tablette*/
@media(min-width:768px) {
  h1 {
    font-size: 8em;
    height: 90px !important;
    position: sticky;
    z-index: 999;
  }

  /*Class*/
  .mx-md-8 {
    margin-left: 10em !important;
    margin-right: 10em !important;
  }
  /*Classes spécifiques*/
/*Projets Belle-île*/
.p-md-8{
  padding: 8em;
}

  /* ID */
  #lame5-rs, #lame5-mockup {
    width: 50em;
  }
  #lame6-video_scroll {
    width: 40%;
  }
  /*Placement stickers*/
  #stickers {
    padding: 0 5em !important;
  }
  #stickers .sticker1 {width: 30%; margin-left: 25em;}
  #stickers .sticker2{width: 30%;}
  #stickers .sticker3 {width: 30%; height: 3.75em;
  margin-left: 15em;}
  #stickers .sticker4 {width: 30%;margin-top: 3em;}
  #stickers .sticker5 {width: 30%; height: 6.25em;  margin-left: 25em;}
  #stickers .sticker6 {width: 45%;width: 30em; padding-bottom: 5em;}
  #stickers .sticker7 {width: 15em; margin-left: 18em}
  /*Footer*/
  #footer h2 {
    font-size: 7em;
    height: 60px;
  }

  #footer img.thumbnail {
    border-radius: 10px;
    width: 40%;
  }

  .btn-footer {
    width: 25%;
  }
}

/*petit desktop*/
@media(min-width:992px) {
        /*Class*/
  .navbar {
    padding-top: 0;
    padding-bottom: 0;
  }
  .position-lg-absolute{
    position:absolute;
  }
  /*Classes spécifiques*/
/*Projets Belle-île*/
.p-md-8{
  padding: 3em;
}

  /*ID*/
  /*Placement stickers*/
  #stickers {
    padding: 0 !important;
    top: 20%
  }
  #stickers .sticker5{
    margin-bottom: 0;
  }

/*Projet Belle-île*/
#logo-belle_ile-blanc {
  width: 40%;
}

#logo-belle_ile-noir {
  width: 40%;
}

  .cache{opacity: 0;}
  .showup{opacity: 1;}


        /*ID*/
/*Footer*/
#footer h2 {
  font-size: 5em;
  height: 40px;
}

#footer img.thumbnail {
  border-radius: 10px;
  width: 30%;
}

.btn-footer {
  width: 15%;
}
.btn-projets{
  top: 40%;
  right: 5%;
}
.btn-carousel{
  top: 40%;
  left: 5%;}



/*Sticker 1*/
.sticker1 img.position-lg-absolute {
  top:5em;
  left: 2em;
  z-index: 999;
  transition: 0.2s;
}
.sticker1 img.sticker1-position{
  top:5em;
  left: 2em;
}
/*Sticker 2*/
#stickers .sticker2,#stickers .sticker3,#stickers .sticker4,#stickers .sticker5, #stickers .sticker6, #sticker .sticker7{
  height: 0em;
}
.sticker2 img.position-lg-absolute {
  top:18em;
  left: 5em;
  z-index: 999;
  transition: 0.2s;
}
.sticker2 img.sticker2-position{
  top:18em;
  left: 5em;
}
/*Sticker 3*/
.sticker3 img.position-lg-absolute {
  top:28em;
  left: 2em;
  z-index: 999;
  transition: 0.2s;
}
.sticker3 img.sticker3-position{
  top:28em;
  left: 2em;
}
/*Sticker 4*/
.sticker4 img.position-lg-absolute{
  top:10em;
  right: 2em;
  z-index: 999;
  transition: 0.2s;
}
.sticker4 img.sticker4-position{
  top:10em;
  right: 2em;
}
/*Sticker 5*/
.sticker5 img.position-lg-absolute{
  top: 20em;
  right: 3em;
  z-index: 999;
  transition: 0.2s;
}
.sticker5 img.sticker5-position{
  top: 20em;
  right: 3em;
}
/*Sticker 6*/
.sticker6 img.position-lg-absolute{
  bottom: 17em;
  right: 3em;
  z-index: 999;
  transition: 0.2s;
}
.sticker6 img.sticker6-position{
  bottom: 17em;
  right: 3em;
}
/*Sticker 7*/
.sticker7 img.position-lg-absolute{
  bottom: 8em;
  right: 1em;
  z-index: 999;
  transition: 0.2s;
}
.sticker7 img.sticker7-position{
  bottom: 8em;
  right: 1em;
}
}