@font-face {
  font-family: 'AvenirNextW04-Regular';
  font-style: normal;
  font-weight: normal;
  src: local('AvenirNextW04-Regular'),
    url('fonts/Avenir Next W04 Regular.woff') format('woff'),
    url('fonts/Avenir Next W04 Regular.woff2') format('woff2'),
    url('fonts/Avenir Next W04 Regular.ttf') format('truetype'),
    url('fonts/Avenir Next W04 Regular.eot?#iefix') format('embedded-opentype'),
    url('fonts/Avenir Next W04 Regular.svg#svgwpf') format('svg');
}

/* transitions */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from, .fade-leave-to {
  opacity: 0;
}

/* GENERAL */

* {
  font-family: 'AvenirNextW04-Regular';
/*  font-family: 'Arial';*/
  color: #444;
}

body {
  overflow-x: hidden;
  padding: 0;
  margin: 0;
}

/*body::-webkit-scrollbar {
  display: none;
  -ms-overflow-style: none;
  scrollbar-width: none;
}*/

a {
  text-decoration: none !important;
}

a.btn-outline-primary, button.btn-outline-primary {
/*  background: transparent !important;*/
/*  border: 1px solid #000042;*/
/*  color: #000042 !important;*/
  text-transform: uppercase;
  letter-spacing: 1px;
}

a.btn-outline-primary:hover, button.btn-outline-primary:hover {
  background: transparent !important;
  border: 1px solid #ff9100;
  color: #ff9100 !important;
}

/*h1 {}*/

h2 {
  margin: auto;
  text-align: center;
  padding-bottom: 2vh;
}

h3 {
  font-size: 1.2em !important;
  text-shadow: 1px 1px 1px #eee;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

strong, b {
  font-size: 1.15em;
  text-shadow: 1px 1px 1px #eee;
}

/* EFFECTS */
.hidden-left {
  opacity: 0;
  transition: 1s;
  transition-delay: 1s;
  margin-left: -60vw;
}

/**/

/* * LAYOUT * */

/* NAV BAR */

#nav {
  z-index: 1;
  background: white;
}

.navbar-nav {
  text-transform: uppercase;
}

.nav-max {
  width: 100vw;
  height: 10vh;
  transition: .2s;
}

.nav-min {
  min-width: 36px !important;
  min-height: 36px !important;
  transition: .2s;
  padding: 0;
  height: 8vh;
}

/* #logo {} */

/* .navbar-nav li {} */

/* .navbar-nav li:hover {} */

.navbar-nav li a:hover {
  color: orange !important;
}

#hamburger {
  border: 1px solid #808080;
  z-index: 1;
}

#hamburger button {
  border: 0 !important;
  background: transparent;
}

#side-menu {
  width: 200px;
  height: 100vh;
  position: fixed;
  top: 0;
  background: white;
  z-index: 1;
}

.side-menu-visible {
  left: 0;
  transition: .2s;
}

.side-menu-hidden {
  left: -200px;
  transition: .2s;
}

.page {
  min-height: 100vh;
  padding-top: 2vh;
  transition: 1s;
}

.page-hidden {
  opacity: 0;
  transition: 1s;
}

.page-title {
  opacity: 1;
  transition: 1s;
  margin-left: 0;
}

/* ACCUEIL */

#accueil {
  color: white !important;
  background: black;
  overflow: hidden !important;
}

.corner {
  width: 10vmin; 
  height: 10vmin; 
  z-index: 1;
}

#corner-left-top {
  border-left: 1vmin solid #aaa;
  border-top: 1vmin solid #aaa;
    }

#corner-right-bottom {
  border-right: 1vmin solid #aaa;
  border-bottom: 1vmin solid #aaa;
}

#accueil-img-bg {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  animation: bgimg-animation 7s ease infinite;
}

#accueil-bg {
  background: #000041;
  filter: grayscale(50%);
  opacity: .6;
  z-index: 0;
}

/*#accueil-background {
  background: black;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  animation: bgimg-animation 7s ease infinite;
  overflow: hidden !important;
}*/

#content {
  width: 95vmin;
  height: 95vmin;
  margin: auto;
}

#content-bg {
  width: 95vmin;
  height: 95vmin;
  background: radial-gradient(white 1%, transparent 70%);
      top: 25%;
  z-index: 0;
}

#logo {
  cursor: pointer;
}

#logo img {
  width: auto;
  height: 10vh;
}

/*#logo img:hover {
  -webkit-animation-name: tada;
  animation-name: tada;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}*/


#accueil h1 {
  color: white !important;
  text-shadow: 2px 2px 8px #000000;
}

#call-to-action {
  min-height: 72px;
}

#call-to-action img {
  filter: invert(70%);
}

#call-to-action img:hover {
  margin-top: 12px;
  transition: .3s;
}

#accueil-technos {
  height: 25vh;
}

#accueil-technos .row {
  max-width: 600px;
}

#accueil-technos img {
  max-width: 10vmin;
  cursor: pointer;
/* border: 1px solid red; */
  border-radius: 50%;
  box-shadow: 2px 2px 8px #000000;
}

#accueil-technos img:hover {
/* filter: grayscale(80%); */
  transform: rotate(360deg);
  transition: .8s ease-in-out;
}

/* PRESTATIONS */

#prestations {
  margin-top: 5vh;
}

#prestations .prestation img {
  width: 64px;
  border-radius: 50%;
}

#objectifs {
/*  background: #f9fcff;*/
  background: linear-gradient(to left, #f5faff, transparent);
  /* f5faff f9fcff  */
}

#process {
/*  background: #fff7ef;*/
/*  background: linear-gradient(to right, #fff7f0, transparent);*/
  background: linear-gradient(to right, #f8f8f8, transparent);


  /* fff7ef f8f8f8 */
/*  background: url('./images/rainbow-arrow.png');*/
/*  background-repeat: no-repeat;*/
/*  background-size: contain;*/
}

/*#technos .techno {}*/

#technos .techno img {
  width: 36px;
}

#technos .techno img:hover {
  filter: grayscale(1);
  opacity: .6;
}

/* PORTFOLIO */

#realisations {
  background: linear-gradient(to right, #010166, #000042);
  color: white !important; 
}

#realisations h2, #realisations strong, #realisations span {
  color: white !important; 
}

/* PROJECT */

.project {
  cursor: pointer;
}

.overlay-visible {
  left: 0;
  top: 0% !important;
  transition: .2s;
}

.overlay-hidden {
  left: 0;
  top: 100%;
  transition: .2s;
}

.text-indent {
  text-indent: 30px;
}

/* PROJECT MODAL */

#project-modal-container {
  min-height: 80vh !important;
  top: 5vh;
}

/*#project-modal-container img:hover {
  filter: brightness(.7);
  transition: .3s;
}*/

.project-img-overlay {
  opacity: 0;
  cursor: pointer;
}

.project-img-overlay:hover {
  opacity: 1;
  transition: .3s;
}

.project-img-overlay button {
  background: transparent;
  color: white !important;
}

.project-img-overlay button img {
  width: 36px;
  height: auto;
  filter: invert(1);
}

.project-img-overlay-background {
  opacity: .5;
}

.project-description p {
  text-indent: 20px;
}

.project-description p::before {
  content: "→ ";
}

/* #modal-nav {} */

#modal-nav a:hover {
  color: #ff9100 !important;
}

@media (max-width: 992px) {
  #project-modal-container {
    margin-top: 0;
  }
}


/* CONTACT */

#contact {
  background: white; 
  color: #000042 !important; 
}

#contact li {
  margin-bottom: 15px;
}


/* FOOTER */

#networks img {
  max-width: 120px;
}

#networks img:hover {
  filter: grayscale(1);
  opacity: .7;
}

/**/

#goTop {
  opacity: .8;
}