@font-face {
  font-family: Manrope;
  src: url(../data/font/Manrope-VariableFont_wght.ttf);
}

@font-face {
  font-family: Poppins;
  src: url(../data/font/ProtestStrike-Regular.ttf);
}

/* Top-bar avec background  */

p, h1, h2, h3, h4, a {
  font-family: 'Manrope', sans-serif;
}

html {
  scroll-behavior: smooth;
}

h1 {
  color: #ffffff;
}

.orbit-container {
  height: 60rem;
  width: 100%;
  display: flex;
  justify-content: center;
  position: relative;
}
/* top-bar */


.orbit .orbit-container .topbar-responsive {
  position: absolute;
  background: #4f46cc6a;
  backdrop-filter: blur(0.50rem);
  z-index: 1;
  margin-top: 10px;
  width: 750px;
  justify-content: center;
  padding: 0.5rem 1.5rem;
  border-radius: 25px;
}

.menu.medium-horizontal li {
  margin: 0 25px 0 25px;
}

.menu.simple li+li {
  margin: 0 25px 0 25px;
}

/* mise ne forme top-bar left */
.orbit .orbit-container .topbar-responsive .menu {
  background: transparent;
}

/* font-style left */

.topbar-responsive a {
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  position: relative;
  color: #ffffff;
  text-decoration: none;
}

.text-topbar:hover, .deroulant a:hover {
  flex-direction: column;
  color: #4f4bbd;
}

/* underline boutons top-bar */

.text-topbar::before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  margin-bottom: -4px;
  background-color: #4f4bbd;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.orbit .orbit-container .topbar-responsive .menu a:hover::before {
  transform: scaleX(0.5);
}

.top-bar-title {
  display: none;
}

.iconfleche::after{
  content: " ▾";
}

.deroulant {
  position: relative;
  justify-content: center;
}

.deroulant:hover .sous {
  color: #ffffff;
  border-radius: 20px;
  top: 19px;
  left: -40px;
  padding: 10px;
  background-color: #726ad6;
  display: block;
  animation: move-down 0.2s ease;
}

.deroulant::before .sous {
  animation: move-up 0.8s forwards;
}

@keyframes move-down {
  0% {
    top: 5px;
  }
  100% {
    top: 18px;
  }
}

@keyframes move-up {
  0% {
    top: 18px;
  }
  100% {
    top: 0;
  }
}

.sous {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 50px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  transition: top 0.8s forwards;
}

.sous li a {
  color: #ffffff;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: center;
}

.sous li a:hover {
  color: #efeaff;
  text-decoration: none;
}

.middle-grid-container{
  display: flex;
  justify-content: center;
}

.deco {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 50px;
}
.deco img{
  width: 100em;
  max-width: 35em;
  margin-left: 150px;
}

/* ajustement pour téléphone */

@media screen and (max-width: 39.9375em) {
  .orbit .orbit-container .topbar-responsive {
    width: 20rem;
  }
  .orbit .orbit-container .topbar-responsive .menu {
    flex-wrap: wrap;
  }
  .orbit .orbit-container .topbar-responsive .menu a {
    padding: 0.875rem 0;
    
  }
  .orbit-container {
    height: 42em;
  }
  .deroulant a{
    text-align: center;
  }
  .deroulant:hover .sous {
    margin: 0;
    left: 3px;
    top: 0;
    display: flex;
    min-width: 120px;
    top: auto;
    position: relative;
    flex-direction: column;
    align-items: center;
  }
}

/* boutons orange top-bar  */

.orbit .orbit-container .topbar-responsive .menu .topbar-responsive-button {
  color: #ffffff;
  border: none;
  border-radius: 5000px;
  background: #4f4bbd;
  transition: color 0.15s ease-in, border-color 0.15s ease-in;
}

.orbit .orbit-container .topbar-responsive .menu .topbar-responsive-button:hover {
  color: #f3723b;
  background: #ffffff;
}

.middle-container {
  margin: 15rem 5rem 5rem 5rem;
}


/* bottom side code */

.grid-container {
  width: auto;
  padding: 30px;
  background: #4f46cc6a;
  border-radius: 25px;
  margin-bottom: 50px;
  animation: fadeIn 0.5s ease-in-out, slideDown 0.5s ease-in-out;
}

.anim-on-start {
  animation: fadeIn 0.5s ease-in-out, slideDown 0.5s ease-in-out;
}

.sh-me {
  max-width: 50em;
  margin-right: 10em;
}

.grid-container h2 {
  height: auto;
  color: white;
  font-family: 'Manrope', sans-serif;
  font-weight: 900;
  text-align: left;
  margin-top: 20px;
  width: auto;
}

.grid-container p {
  color: #f8f6f5;
  width: auto;
  text-align: center;
  margin:0;
  font-family: 'Manrope', sans-serif;
}

.presentation {
  display: flex;
  margin: 0 auto 0 auto;
}

.informations{
  margin-left: 30px;
}

.informations hr{
  margin: 5px 10px 10px;
  max-width: 25.5rem;
  width: auto;
}

.informations p {
  
  color: #f8f6f5;
  font-family: 'Manrope', sans-serif;
  text-align: left;
  margin: 5px;
}

.jobs-description p{
  text-align: center;
  font-family: 'Manrope', sans-serif;
  margin:  0 20px 0 60px;
  width: 30rem;
}

.pdp {
  align-items: center;
  height: 250px;
  width: auto;
  margin: 0 auto 0 auto;
  text-align: center;
  border: white 3px solid;
  border-radius: 50px;
}

@media screen and (max-width: 85.9375em) {
  .orbit-container{
    height: auto;
  }

  .sh-me {
    margin: 0;
  }
  .presentation {
    flex-direction: column;
  }
  .informations {
    text-align: center;
    margin: 20px;
  }
  .deco img {
    display: none;
  }
  .jobs-description p{
    margin: 0px;
  }
}


/* rt informations */

.uga-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: auto;
  padding: 30px;
  /* background: #4f46cc6a; */
  border-radius: 25px;
  margin-bottom: 50px;
  max-width: 75rem;
  margin: 0 auto;
}


.logo-uga {
  height: 170px;
  width: auto; 
  margin: 20px;
  border: white 3px solid;
}


/* footer */

.callout.large.secondary{
  width: auto;
  padding: 30px;
  background: #4f46cc6a;
  border-radius: 25px;
  margin-bottom: 50px;
  max-width: 75rem;
  padding: 0;
  margin: 50px auto 50px auto;
  border: none;
}

.grid-x{
  display: flex;
  justify-content: space-around;
}

.reseaux .menu.vertical{
  flex-wrap: nowrap;
  flex-direction: row;
}

.contact, .reseaux{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 10px;
}

.contact p{
  color: #f8f6f5;
  margin: 0px;
}

.contact a{
  font-size: 16px;
  color: #f8f6f5;
}

.contact a:hover{
  color: #f8f6f5;
  text-decoration: underline;
}


/* social media  */

.reseaux .menu.vertical {
  top: 50%;
  left: 50%;
  bottom: 50%;
  transform: translate(-50%, -50%);
  margin:0;
  padding:0;
  display:flex;
}

.reseaux .menu.vertical li {
  list-style: none;
}

.reseaux .menu.vertical li a {
  position: relative;
  width:40px;
  height:40px;
  display:block;
  text-align:center;
  justify-content: right;
  margin:0 10px;
  border-radius: 50%;
  padding: 6px;
  box-sizing: border-box;
  text-decoration:none;
  box-shadow: 0 10px 15px rgba(0,0,0,0.3);
  background: linear-gradient(0deg, #ddd, #fff);
  transition: .5s;
}

.reseaux .menu.vertical li a:hover {
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  text-decoration:none;
}

.reseaux .menu.vertical li a .fa {
  width: 100%;
  height: 100%;
  display: block;
  background: linear-gradient(0deg, #fff, #ddd);
  border-radius: 50%;
  line-height: calc(40px - 12px);
  font-size:24px;
  color: #726ad6;
  transition: .5s;
}

.reseaux .menu.vertical li:nth-child(1) a:hover .fa {
  color: #010409;
}

.reseaux .menu.vertical li:nth-child(2) a:hover .fa {
  color: #00aced;
}

.reseaux .menu.vertical li:nth-child(3) a:hover .fa {
  color: #dd4b39;
}

.reseaux .menu.vertical li:nth-child(4) a:hover .fa {
  color: #007bb6;
}





@media screen and (max-width: 39.9375em) {
  .orbit-container{
    height: auto;
  }
  .orbit .orbit-container .topbar-responsive {
    padding: 0.75rem;
  }
  .grid-container {
    padding: 17px;
    width: 95%;
  }
  .grid-container h2 {
    margin: 30px 0 10px 0; 
    width: 100%;
  }
  .presentation{
    flex-direction: column;
  }
  .informations {
    height: auto;
    padding-left: 20px;
    margin-left: 0;
  } 
  .informations hr {
    max-width: 10rem;
  }
  .pdp{
    top: 20px;
    bottom: 20px;
    height: 200px;
  }
  .uga-container {
    padding: 17px;
    width: 100%;
  }
  .orbit .orbit-container .topbar-responsive .top-bar-title {
    position: relative;
    top: 7px;
    width: 100%;
    margin: 0;
    height: 20px;
    padding: 20px;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .menu.simple.vertical.medium-horizontal li, .medium-horizontal li .button.button.hollow.topbar-responsive-button{
    margin: 0;
  }

  .menu-icon:hover::after {
    background: white;
    -webkit-box-shadow: 0 7px 0 white, 0 14px 0 white;
    box-shadow: 0 7px white white, 0 14px 0 white;
  }

  .menu-icon:hover{
    transform: scaleX(1.3);
    transition: transform 0.3s ease;
  }

  .menu-icon{
    transform: scaleX(1);
    transition: transform 0.3s ease;
  }

  .orbit .orbit-container .topbar-responsive .top-bar-title span {
    position: relative;
    border: white 3px solid;
    border-radius: 10px;
    padding: 0.25rem 0.45rem;
    top: 15px;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
  }


  .jobs-description p{
    text-align: center;
    font-family: 'Manrope', sans-serif;
    margin: auto;
    width: 23rem;
  }
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-webkit-keyframes slideDown {
  0% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  100% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}

@keyframes slideDown {
  0% {
    -webkit-transform: translateY(-100%);
            transform: translateY(10%);
  }
  100% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}

@media screen and (max-width: 39.9375em) {
  .orbit .orbit-container .topbar-responsive-links {
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    -webkit-animation-duration: 0.5s;
            animation-duration: 0.5s;
    width: 100%;
    -webkit-animation: fadeIn 1s ease-in;
            animation: fadeIn 1s ease-in;
  }
}