/* CSS pour la page du G7 */

/* NAVIGATION */

/* The Overlay (background) */
.overlay {
  /* Height & width depends on how you want to reveal the overlay (see JS below) */    
  height: 0%;
  width: 100%;
  position: fixed; /* Stay in place */
  z-index: 2; /* Sit on top */
  left: 0;
  top: 0;
  background-color: rgb(0,0,0); /* Black fallback color */
  background-color: rgba(0,0,0, 0.90); /* Black w/opacity */
  overflow-x: hidden; /* Disable horizontal scroll */
  transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
    font-family: 'Red Hat Display', sans-serif;
}

/* Position the content inside the overlay */
.overlay-content {
  position: relative;
  top: 25%; /* 25% from the top */
  width: 100%; /* 100% width */
  text-align: center; /* Centered text/links */
  margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}

/* The navigation links inside the overlay */
.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block; /* Display block instead of inline */
  transition: 0.3s; /* Transition effects on hover (color) */
}

/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}

/* Position the close button (top right corner) */
.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}

.hamburger {
    position: fixed ;
    right: 2% ;
    top: 2% ;
    cursor:pointer ;
    font-size: 2.3em ;
    transition: 0.3s;
    color: #fff;
}

.hamburger:hover {
    font-size: 2.5em;
}

/* NOM DU SITE */

.titresite {
    position: fixed ;
    font-family: 'Red Hat Display', sans-serif;
    font-size: 1.9em;
    color: #fff;
    text-align: center ;
     /* center the element */
    right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
    margin-top: 2% ;
    /* give it dimensions */
    min-height: 2em;
    width: 90%; 
    transition: 0.5s ;
}

.titresite:hover {
    color: #dcc43b ;
}

.gradient {
    position: fixed ;
background: -moz-linear-gradient(top,  rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
    width: 100% ;
    height: 18% ;
    z-index: 1 ;
}

/*UNE*/

.une {
    position: absolute ;
    height: 100% ;
    width: 100% ;
    background-image: url(../img/ambazada-gradient.jpg) ;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: #fff ;
    
}

.une h1 {
    font-family: 'Red Hat Display', sans-serif;
}

.une p {
    font-family: 'Bitter', serif;
}

.texteune {
  margin-top: 50vh; /* poussé de la moitié de hauteur de viewport */
  transform: translateY(-50%); /* tiré de la moitié de sa propre hauteur */
}


/* Tous les articles */

.tousarticles {
    position: absolute ;
    top: 100% ;
}

/* Articles fonds */


.fondarticlecampement {
    background-image: url(../img/installationgradient.jpg) ;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    
}

.fondarticleouverture {
    background-image: url(../img/ceremonieouverturegradient.jpg) ;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    
}


.fondarticlepresentation {
    background-image: url(../img/G7ezinstallationgradient.jpg) ;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    
}


.fondarticleambazada {
    background-image: url(../img/manif-ambazada-gradient.jpg) ;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    
}

.articlesmarge {
        padding-top: 60px;
    padding-bottom: 60px;
}

.tousarticles {
    color: #fff;
    width: 100% ;
}

.tousarticles h1 {
    font-family: 'Red Hat Display', sans-serif;
}

.tousarticles p {
    font-family: 'Bitter', serif;
}


/* BOUTONS */

.btn {
  font-family: 'Red Hat Display', sans-serif ;
  font-weight: 900;
  padding: 1.25rem 2rem;
  font-size: 1rem;
  border-radius: 3.5rem / 100%;
  position: relative;
  min-width: 10rem;
  max-width: 90vw;
  overflow: hidden;
  border: 0;
  cursor: pointer;
  letter-spacing: 0.05em;
  transition: all 330ms;
    line-height: 1 ;
}
.btn + .btn {
  margin-top: 1rem;
}
.btn span {
  position: relative;
  z-index: 1;
}
.btn:before {
  content: "";
  background-color: #21D4FD;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-transform: scale(4) translateX(-100%);
          transform: scale(4) translateX(-100%);
  transition: all 495ms ease-out;
}
.btn:hover:before, .btn:focus:before, .btn:active:before {
  -webkit-transform: scale(4) translate(37%);
          transform: scale(4) translate(37%);
}

.btn--alpha {
  background-color: #21D4FD;
  color: #B721FF;
}
.btn--alpha:before {
  background-color: #B721FF;
  background-image: linear-gradient(to right, #B721FF 30%, #21D4FD 100%);
  position: absolute;
}
.btn--alpha:hover, .btn--alpha:focus, .btn--alpha:active {
  color: #21D4FD;
}

.btn--beta {
  background-color: #08AEEA;
  color: #2AF598;
}
.btn--beta:before {
  background-color: #2AF598;
  background-image: linear-gradient(to right, #2AF598 30%, #08AEEA 100%);
  position: absolute;
}
.btn--beta:hover, .btn--beta:focus, .btn--beta:active {
  color: #08AEEA;
}

.btn--gamma {
  background-color: #ddc53b;
  color: #fff;
}
.btn--gamma:before {
  background-color: #FA709A;
  background-image: linear-gradient(to right, #FA709A 30%, #ddc53b 100%);
  position: absolute;
}
.btn--gamma:hover, .btn--gamma:focus, .btn--gamma:active {
  color: #FEE140;
}

.btn--delta {
  background-color: #3EECAC;
  color: #EE74E1;
}
.btn--delta:before {
  background-color: #EE74E1;
  background-image: linear-gradient(to right, #EE74E1 30%, #3EECAC 100%);
  position: absolute;
}
.btn--delta:hover, .btn--delta:focus, .btn--delta:active {
  color: #3EECAC;
}


.surlignage {
  background-color: #d15635;
    background-image: linear-gradient(to right, #dcc43b 0%, #d15535 100%);
    padding-left: 10px;
    padding-right: 10px;
    transition: 2s ease-in-out;
}

.surlignage:hover {
background-color: #dcc43b ;
background-image: none;
}

/* MEDIA QUERIES */

@media (max-width: 430px ) {
    .gradient {
        height: 10% ;
    }
    
    .titresite {
        padding-right: 20px;
        margin-top: 11px ;
        margin-left: 20px ;
        text-align: left;
        font-size: 1.6em ;
    }
    .hamburger {
        right: 5% ;
        top: 0.7% ;
        font-size: 1.9em ;
    }
}

@media (max-height: 510px) {
    .textearticle1 {
        margin-top: 8% ;
        transform: translateY(-8%);
    }
}

@media (max-height:410px) {
    h1 {
        font-size: 2em ;
    }
    
    h2 {
        font-size: 2em !important ;
    }
}

@media (max-width:500px) {
    .surlignage {
        font-size: 0.6em ;
    }
}