/*css by Samy azza*/
/*import font*/
@import url(https://fonts.googleapis.com/css?family=Lobster+Two:700italic,700);
@import url('https://fonts.googleapis.com/css?family=Ubuntu&display=swap');
@import url('https://fonts.googleapis.com/css?family=Catamaran&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Iceland&display=swap');

/*general*/
body {
	background-color: #000;
	text-align: center;
  	font-family: 'Ubuntu', sans-serif;
}




/* 🌟 Style des cartes d'accordéon */
.neon-card {
  background: rgba(10, 10, 10, 0.9);
  border: 2px solid white;
  border-radius: 10px;
  box-shadow: 0px 0px 10px #00eaff, 0px 0px 20px #00eaff;
  margin-bottom: 15px;
}

/* 🌟 En-tête du bouton accordéon */
.neon-btn {
  background: transparent;
  color: white;
  font-size: 18px;
  font-weight: bold;
  padding: 15px;
  border: 2px solid #ffffff;
  width: 100%;
  box-shadow: 0px 0px 10px #00eaff;
  transition: 0.3s;
}

.neon-btn i {
  font-size: 1.8rem;
  margin-right: 10px;
}

.neon-btn:hover {
  background: #00eaff;
  color: black;
  box-shadow: 0px 0px 25px #00eaff;
}

/* 🌟 Contenu de l'accordéon */
.neon-body {
  padding: 20px;
  color: white;
  background: rgba(20, 20, 20, 0.95);
  border-radius: 0px 0px 5px 5px;
  box-shadow: inset 0px 0px 15px #00eaff;
  text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.6);
  -webkit-text-stroke: 0.3px rgba(255, 255, 255, 0.3); /* Améliore la netteté */
filter: drop-shadow(0px 0px 5px #00eaff); /* Glow plus propre */

}



/* 🌟 Effet de lumière sur le texte */
.text-glow {
  text-shadow: 0px 0px 10px rgba(0, 234, 255, 0.8);
}





/* 🌟 Style général du lecteur */
.audio-player-container {
  max-width: 500px;
  margin: 50px auto;
  padding: 30px;
  background: rgba(10, 10, 10, 0.9);
  border-radius: 15px;
  box-shadow: 0px 0px 20px #00eaff, 0px 0px 20px #00eaff;
  text-align: center;
    /* Animation subtile */
    animation: neonGlow 1.5s ease-in-out infinite alternate;
}

/* 🌟 Style de la pochette */
.audio-player-container img {
  width: 100%;
  border-radius: 10px;
  border: 2px solid rgb(255, 255, 255);
  box-shadow: 0px 0px 15px #00eaff, 0px 0px 10px #00eaff;
}

/* 🌟 Titre du morceau */
#track-title {
  font-size: 22px;
  font-weight: bold;
  color: white;
  margin-top: 15px;
  text-shadow: 0px 0px 10px #00eaff;
}

/* 🌟 Barre de progression */
#progress-bar {
  width: 100%;
  height: 8px;
  background: white; /* Barre vide blanche */
  border-radius: 5px;
  outline: none;
  appearance: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* 🌟 Barre de progression (Webkit : Chrome, Safari, Edge) */
#progress-bar::-webkit-slider-runnable-track {
  background: white; /* Fond blanc */
  height: 8px;
  border-radius: 5px;
}

/* 🌟 Partie progressée en bleu (Chrome, Safari, Edge) */
#progress-bar::-webkit-slider-runnable-track {
  background: linear-gradient(to right, #00eaff var(--progress, 0%), white var(--progress, 0%));
}

/* 🌟 Partie progressée pour Firefox */
#progress-bar::-moz-range-progress {
  background: #00eaff;
  height: 8px;
  border-radius: 5px;
}

/* 🌟 Curseur (bouton de la barre) */
#progress-bar::-webkit-slider-thumb {
  appearance: none;
  width: 15px;
  height: 15px;
  background: white; /* Curseur blanc */
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0px 0px 10px #00eaff; /* Effet néon bleu */
  margin-top: -4px;
}

/* 🌟 Curseur (Firefox) */
#progress-bar::-moz-range-thumb {
  width: 15px;
  height: 15px;
  background: white;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0px 0px 10px #00eaff;
}

/* 🌟 Boutons du lecteur */
.audio-controls button {
  background: transparent;
  border: 2px solid #00eaff;
  color: white;
  padding: 10px;
  font-size: 20px;
  margin: 5px;
  border-radius: 8px;
  transition: all 0.3s ease;
  box-shadow: 0px 0px 10px #00eaff;
}

.audio-controls button:hover {
  background: #00eaff;
  color: #000;
  box-shadow: 0px 0px 20px #00eaff;
}

/* 🌟 Style responsive pour mobile */
@media (max-width: 768px) {
  .audio-player-container {
      max-width: 90%;
  }
}



.neon-title3 {
  
  font-family: 'Iceland', sans-serif !important;
  font-size: 2rem; 
  color: white; /* Texte blanc */
  /* Lueur néon plus douce */
  filter: drop-shadow(0 0 8px rgba(0, 234, 255, 0.4)) 
          drop-shadow(0 0 16px rgba(0, 234, 255, 0.4));


}

.neon-title2 {
  
  position: relative;
  display: block;
  width: 100%;
  max-width: 500px; /* Ajuste selon la taille de ton image */
  margin: 0 auto;
  
  /* Lueur néon plus douce */
  filter: drop-shadow(0 0 8px rgba(0, 234, 255, 0.4)) 
          drop-shadow(0 0 16px rgba(0, 234, 255, 0.4));

  /* Animation subtile */
  animation: neonGlow 1.5s ease-in-out infinite alternate;
}

/* Effet de pulsation néon doux */
@keyframes neonGlow {
  from {
    filter: drop-shadow(0 0 6px rgba(0, 234, 255, 0.3)) 
            drop-shadow(0 0 12px rgba(0, 234, 255, 0.1));
  }
  to {
    filter: drop-shadow(0 0 10px rgba(0, 234, 255, 0.5)) 
            drop-shadow(0 0 20px rgba(0, 234, 255, 0.3));
  }
}

.neon-title4 {
  
  position: relative;
  display: block;
  width: 100%;
  max-width: 500px; /* Ajuste selon la taille de ton image */
  margin: 0 auto;
  
  /* Lueur néon plus douce */
  filter: drop-shadow(0 0 8px rgba(0, 234, 255, 0.8)) 
          drop-shadow(0 0 16px rgba(0, 234, 255, 0.8));

  /* Animation subtile */
  animation: neonGlow2 1.5s ease-in-out infinite alternate;
}

/* Effet de pulsation néon doux */
@keyframes neonGlow2 {
  from {
    filter: drop-shadow(0 0 12px rgba(0, 234, 255, 0.30)) 
            drop-shadow(0 0 24px rgba(0, 234, 255, 0.40));
  }
  to {
    filter: drop-shadow(0 0 20px rgba(0, 234, 255, 0.50)) 
            drop-shadow(0 0 30px rgba(0, 234, 255, 0.60));
  }
}




/* Style du titre avec effet néon */
.neon-title {
  font-family: 'Iceland', sans-serif !important;
  font-size: 7rem; 
  color: white; /* Texte blanc */
  text-align: center;
  animation: neonEffect 1.5s ease-in-out infinite alternate;
}

/* Animation Néon optimisée */
@keyframes neonEffect {
  from {
    text-shadow: 
      0 0 4px #fff, 
      0 0 8px #00eaff, 
      0 0 16px #00eaff;
    filter: drop-shadow(0px 0px 5px #00eaff);
  }
  to {
    text-shadow: 
      0 0 2px #fff, 
      0 0 4px #00eaff, 
      0 0 8px #00eaff;
    filter: drop-shadow(0px 0px 2px #00eaff);
  }
}

/* Responsive */
@media (max-width: 768px) {
  .neon-title {
    font-size: 3rem;
  }
}

/* 🌟 Effet néon global */
.contact-form {
  max-width: 800px;
  margin: 50px auto;
  padding: 30px;
  background: rgba(10, 10, 10, 0.9);
  border-radius: 15px;
  box-shadow: 0px 0px 15px #00eaff, 0px 0px 20px #00eaff;
  border: 2px solid #ffffff;
  
}

/* 🌟 Input field stylisé */
.input-group {
  position: relative;
  margin-bottom: 30px;
}

/* 🌟 Champs avec contour néon */
.input-group input, .input-group textarea {
  width: 100%;
  padding: 12px;
  border: 2px solid rgba(255, 255, 255, 0.6); /* Bordure néon par défaut */
  background: transparent;
  outline: none;
  font-size: 18px;
  color: #fff;
  border-radius: 5px;
  transition: all 0.3s ease;
  box-shadow: 0px 0px 5px #00eaff;
  
}

/* 🌟 Effet néon sur focus */
.input-group input:focus, .input-group textarea:focus {
  border: 2px solid #ffffff;
  box-shadow: 0px 0px 15px #00eaff, 0px 0px 15px #00eaff;
}


/* Placeholder flottant amélioré */
.input-group label {
  position: absolute;
  top: 14px;
  left: 10px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 16px;
  transition: all 0.3s ease;
  background: rgba(10, 10, 10, 0.9); /* Ajout d'un fond pour éviter qu'il soit coupé */
  padding: 0 5px;
  pointer-events: none; /* Empêche de cliquer sur le label */
}

/* Effet du label sur focus */
.input-group input:focus + label,
.input-group input:valid + label,
.input-group textarea:focus + label,
.input-group textarea:valid + label {
  top: -24px;
  left: 10px;
  font-size: 14px;
  color: #00eaff;
  background: rgba(10, 10, 10, 0.0);
  padding: 0 5px;
}

/* 🌟 Placeholder stylisé */
::placeholder {
  color: rgba(255, 255, 255, 0.6);
  font-size: 16px;
}

/* 🌟 Ajustement pour meilleure lisibilité */
.input-group input::selection,
.input-group textarea::selection {
  background: rgba(0, 234, 255, 0.3);
}




/* 🌟 Correction du fond et du texte du dropdown des pays */
.iti__dropdown {
  background-color: #111 !important; /* Fond sombre */
  border: 1px solid #ffffff !important;
  box-shadow: 0px 0px 15px #00eaff, 0px 0px 25px #8000ff;
}

/* 🌟 Texte des pays en blanc */
.iti__country-list {
  background-color: #111 !important;
}

.iti__country {
  color: #fff !important; /* Texte blanc */
  font-size: 16px;
}

/* 🌟 Effet sur le survol d'un pays */
.iti__country:hover {
  background-color: #00eaff !important;
  color: #000 !important;
}

/* 🌟 Bordure et fond du champ principal */
.iti input {
  background: transparent !important;
  color: #fff !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0px 0px 5px #00eaff;
}

/* 🌟 Style du drapeau et du code pays */
.iti__selected-flag {
  background-color: rgba(0, 234, 255, 0.2) !important;
  border-right: 1px solid #ffffff !important;
}

/* 🌟 Ajustement pour mobile */
@media (max-width: 768px) {
  .iti__dropdown {
      width: 100% !important;
      max-height: 60vh !important;
      overflow-y: auto !important;
  }
}




/* 🌟 Message d'erreur/succès */
.alert {
  text-align: center;
  padding: 10px;
  border-radius: 8px;
  font-weight: bold;
}

.alert-success {
  background-color: rgba(0, 234, 255, 0.2);
  color: #00eaff;
  border: 2px solid #00eaff;
}

.alert-danger {
  background-color: rgba(255, 0, 0, 0.2);
  color: #ff0000;
  border: 2px solid #ff0000;
}



#menu {
	background-color: #000000!important;
  
}


.attention {

  font-size: 10px;

}

.picto-item {
  position: relative;  /*les .picto-item deviennent référents*/
  cursor: help;
  border-radius: 50%;
}

/* on génère un élément :after lors du survol et du focus :*/

.picto-item:hover:after,
.picto-item:focus:after {
  content: attr(aria-label);  /* on affiche aria-label */
  position: absolute;
  top: -2.4em;
  left: 50%;
  transform: translateX(-50%); /* on centre horizontalement  */
  z-index: 1; /* pour s'afficher au dessus des éléments en position relative */
  white-space: nowrap;  /* on interdit le retour à la ligne*/
  padding: 5px 14px;
  background: #14930b;
  color: #fff;
  border-radius: 4px #fff;
  font-size: 1.2rem;
}

/* on génère un second élément en :before pour la flèche */

[aria-label]:hover:before,
[aria-label]:focus:before {
  content: "▼";
  position: absolute;
  top: -1em;
  left: 50%;
  transform: translateX(-50%); /* on centre horizontalement  */
  font-size: 20px;
  color: #14930b;
}

/* pas de contour durant le :focus */
[aria-label]:focus {
  outline: none;
}



/* déco */ 

/* 🌟 Bouton néon full blue */
.btn-neon  {
  background: #000000;
  color: #ffffff;
  padding: 12px 30px;
  font-size: 18px;
  font-weight: bold;
  text-transform: uppercase;
  border: 2px solid #ffffff;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  box-shadow: 0px 0px 15px #00eaff, 0px 0px 10px #00eaff;
  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.8);
  outline: none;
}

/* 🌟 Effet au survol */
.btn-neon:hover {
   /* Légère variation au survol */
  box-shadow: 0px 0px 25px rgba(0, 234, 255, 0.6), 0px 0px 30px rgba(0, 234, 255, 0.3);
  transform: scale(1.08);
}

/* 🌟 Effet au clic */
.btn-neon:active {
  background: #0091a6;
  box-shadow: 0px 0px 15px rgba(0, 234, 255, 0.8), 0px 0px 30px rgba(0, 234, 255, 0.5);
  transform: scale(0.98);
}



.buttongrey {

  /*width: 350px;*/
  background-color: #5a5a5a;
    color: white;
    padding: 5px 20px;
    /*margin-bottom: 20px;*/
    text-align: center;
    text-decoration: none;
    /*display: inline-block;*/
    border-style: outset;
    border-color: #5a5a5a;
    border-width: 2px;
    font-size: 20px;
    border-radius: 5px;
    font-family: 'Ubuntu', sans-serif;
    box-shadow: 10px;
}

.buttongrey:hover {
  color: white;
  text-decoration: none;
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

.btn {
  font-family: 'Ubuntu', sans-serif;

}

.video-logo {
  width: 50vw;  /* S'adapte automatiquement en fonction de l'écran */
  max-width: 500px;  /* Taille max pour éviter qu’elle soit trop grande */
  height: auto;  /* Conserve les proportions */
  display: block;
  margin: 0 auto;  /* Centre la vidéo */
}


.container-fluid {
	padding: 0;
}

@media (max-width: 1200px) {
  .navbar-expand-xl .navbar-collapse {
      display: none !important;
  }
  .navbar-expand-xl .navbar-toggler {
      display: block !important;
  }
}

/* Corriger l'affichage du menu lorsqu'il est ouvert */
@media (max-width: 1200px) {
  .navbar-expand-xl .navbar-collapse.show {
      display: block !important;
  }
}




/*custom nav*/
.ic {
	margin: 5px;
	width: 25px;
	height: auto;
}

#menu {
	font-family: 'Ubuntu', sans-serif;
}

/* Style pour l'élément actif du menu */
.navbar-nav .nav-link.active {
  background: transparent;
  color: white;
  border: 2px solid #ffffff;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0px 0px 15px #00eaff, 0px 0px 10px #00eaff;
  text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.2);
}

/* Effet au survol */
.navbar-nav .nav-link.active:hover {
  box-shadow: 0px 0px 20px rgba(0, 234, 255, 0.4);
  filter: drop-shadow(0px 0px 2px #00eaff);
}



a { 
	outline:0; 
}

/*custom general section*/
/*.section h1 {
	font-family: 'Lobster Two',georgia,serif;
}*/
  
.social img {
  width: 40px;
  height: auto;
}

.social a:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);

}


.white-text {

color: #ffffff !important;
}

.blue-text {

  color: #00eaff;
  
}

.pink-text {

  color: #8000ff;
}



/* Style spécifique pour les HR néon */
.hrneon {
  border: none;
  height: 3px;
  background: #ffffff;
  border-radius: 2px;
  box-shadow: 0px 0px 8px rgba(0, 234, 255, 0.4);
  animation: neonGlow 3s ease-in-out infinite alternate;
  
}

.text-justify {
  text-align: justify; /* Justifie le texte */
  hyphens: auto; /* Active la coupure des mots automatique */
  word-break: break-word; /* Coupe les mots longs s'ils dépassent */
  overflow-wrap: break-word; /* Assure que le texte se casse dans un conteneur */
  line-height: 1.6; /* Améliore la lisibilité avec un bon interlignage */
}


@keyframes glitch {
  0% { transform: translateX(0px); }
  100% { transform: translateX(2px); }
}


.section {

	
  background-color: #0a0a0a;
  background-image: linear-gradient(rgba(0, 234, 255, 0.1) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(0, 234, 255, 0.1) 1px, transparent 1px);
  background-size: 40px 40px;
  background-attachment: fixed;
  color: #ffffff;
  position: relative;
  overflow-x: hidden;
	font-family: 'Ubuntu', sans-serif;


}


/* Animation glitch des lignes */
@keyframes glitchEffect {
  0% { background-size: 40px 40px; opacity: 1; }
  20% { background-size: 38px 38px; opacity: 0.8; }
  40% { background-size: 42px 42px; opacity: 0.6; }
  60% { background-size: 39px 39px; opacity: 0.9; }
  80% { background-size: 41px 41px; opacity: 0.7; }
  100% { background-size: 40px 40px; opacity: 1; }
}

/* Classe qui sera activée aléatoirement */
.glitch {
  animation: glitchEffect 0.5s ease-in-out;
}


/*custom section child*/

/*section1*/
#section1 {
	padding-bottom: 50px;
}



/*section2*/


blockquote p {
  font-size: 18px;
}

.quote {
  font-size: 40px; /* Augmente la taille de la citation */
  font-weight: bold; /* Met en gras */
  font-style: italic; /* Met en italique */
  font-family: 'Catamaran', sans-serif;
}

.blockquote-footer {
  color:#00eaff !important;
  font-size: 18px; /* Légèrement plus grand pour être plus lisible */
  font-weight: bold; /* Met en gras */
}


#identity {
	margin-right: 20px;
}

.bg-light {

  background: #000000 !important;
  
  transition: all 0.3s ease;
  border-radius: 0px 27px 0px 0px!important;
  -moz-border-radius: 0px 27px 0px 0px !important;
  -webkit-border-radius: 0px 27px 0px 0px !important;
}

.bg-light2 {
  background: #000000;
  color: white;
  padding: 12px 30px;
  border: 2px solid #ffffff;
  border-radius: 10px;
  transition: all 0.3s ease;
  box-shadow: 0px 0px 15px rgba(0, 234, 255, 0.8);
  text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.8);
  animation: neonGlow 1.5s ease-in-out infinite alternate;
 
}

.bg-light3 {
  background: #000000;
  color: white;
  border: 2px solid #ffffff;
  transition: all 0.3s ease;
  box-shadow: 0px 0px 15px rgba(0, 234, 255, 0.8);
  text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.8);
  
}





.sizf {

  font-size: 0.8rem;
}



.card {
	text-shadow: none;
  background: linear-gradient(135deg, #8000ff 0%, #00eaff 100%);
  border: 2px solid #ffffff;
  color: white;
  transition: all 0.3s ease;
  transition: all 0.3s ease;
  box-shadow: 0px 0px 15px rgba(0, 234, 255, 0.8);
  text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.8);
  animation: neonGlow 1.5s ease-in-out infinite alternate;
	font-family: 'Ubuntu', sans-serif;
  border-radius: 0px 27px 0px 27px;
  -moz-border-radius: 0px 27px 0px 27px;
  -webkit-border-radius: 0px 27px 0px 27px;
  
}

.card-header{

  border-bottom: 2px solid white !important;
}


.card-text {
  color: white !important;

}

.card-body1 {
  background: rgba(10, 10, 10, 0.4);
  color: #ffffff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 1);
  -webkit-text-stroke: 0.3px rgba(255, 255, 255, 0.3); /* Améliore la netteté */
  filter: drop-shadow(0px 0px 5px #00eaff); /* Glow plus propre */
  
}


.card-body2 {
  background: rgba(10, 10, 10, 0.8);
  color: #ffffff;
  text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.6);
  -webkit-text-stroke: 0.3px rgba(255, 255, 255, 0.3); /* Améliore la netteté */
  filter: drop-shadow(0px 0px 5px #00eaff); /* Glow plus propre */
  
  

}

.card-body3 {
  background: rgba(0, 0, 0, 1) !important;
  color: #ffffff;
  text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.6);
  border-radius: 0px 0px 0px 27px;
  -moz-border-radius: 0px 0px 0px 27px;
  -webkit-border-radius: 0px 0px 0px 27px;

}

.card-body4 {
  background: rgba(10, 10, 10, 0.8);
  color: #ffffff;
  border-radius: 0px 0px 0px 27px;
  text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.6);
  -webkit-text-stroke: 0.3px rgba(255, 255, 255, 0.3); /* Améliore la netteté */
  filter: drop-shadow(0px 0px 5px #00eaff); /* Glow plus propre */
  
  

}

.card:hover {
  
  box-shadow: 0px 0px 20px rgba(0, 234, 255, 0.1);
  transform: scale(1.02);
  filter: drop-shadow(0px 0px 1px #00eaff);

}





.btn-link {
  color: #ffffff !important; /* Remplace ici par ta couleur personnalisée */
  text-decoration: none; /* Supprime le soulignement */
}

.btn-link:hover {
  color: #ffffff  !important; /* Une variante plus foncée au survol */
  text-decoration: none; /* Supprime le soulignement */
}

.btn-link:active {
  text-decoration: none; /* Supprime le soulignement */
}

 

.list-group-item{
  background: #a0a0a0; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #a0a0a0 0%, #ffffff 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover, #a0a0a0 0%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center, #a0a0a0 0%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a0a0a0', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  color: #25201e;
  height: 40px;

}


.bestchoice {

  color: #000;
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
  transform: scale(1.05);
}

.headerprice {
  background: #5a5a5a;
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
  transform: scale(1.05);

}

.tab i {
  color: #fec214; 
}
.tab {
  color: #fff; 
}

th {
  text-align: center;
  vertical-align: middle;
  background: #000000;
  border: 2px solid #ffffff;
  color: white;
  text-transform: uppercase;
  font-weight: bold;
  transition: all 0.3s ease;
  box-shadow: 0px 0px 15px rgba(0, 234, 255, 0.8);
  
}

.tableshadow {

  border: 2px solid #ffffff;
  transition: all 0.3s ease;
  box-shadow: 0px 0px 10px #00eaff, 0px 0px 20px #00eaff;

}




.copyright {
  color: white!important;
}

.spacing {
  height: 200px;
}

.spacingb {
  height: 400px;
}

@media only screen and (max-width: 990px){
    .main-timeline{ width: 100%; }
}

@media only screen and (max-width: 767px){
    .main-timeline:before,
    .main-timeline .date{
        left: 6%;
    }
    .main-timeline .timeline-content{
        width: 85%;
        float: right;
    }
    .main-timeline .title:after{
        left: -5px;
    }
}

@media only screen and (max-width: 480px){
    .main-timeline:before,
    .main-timeline .date{
        left: 12%;
    }
    .main-timeline .timeline-content{
        width: 75%;
    }
    .main-timeline .date{
        width: 60px;
        height: 60px;
        margin-left: -30px;
    }
    .main-timeline .month{
        font-size: 14px;
    }
}


@-webkit-keyframes jello-vertical {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
  }
  40% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
  }
  50% {
    -webkit-transform: scale3d(0.85, 1.15, 1);
            transform: scale3d(0.85, 1.15, 1);
  }
  65% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
            transform: scale3d(1.05, 0.95, 1);
  }
  75% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
            transform: scale3d(0.95, 1.05, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}
@keyframes jello-vertical {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
  }
  40% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
  }
  50% {
    -webkit-transform: scale3d(0.85, 1.15, 1);
            transform: scale3d(0.85, 1.15, 1);
  }
  65% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
            transform: scale3d(1.05, 0.95, 1);
  }
  75% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
            transform: scale3d(0.95, 1.05, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}







/*media queries*/

/*Extra small devices (portrait phones, less than 576px)*/
@media (max-width: 575px) {
	.section {
		padding-top: 18%;

	}
  .construct {
  height: 100vh;
  -webkit-box-shadow: 0 -1px 0 rgba(0,0,0,0.6),inset 0 1px 0 rgba(255,255,255,0.3); box-shadow: 0 -1px 0 rgba(0,0,0,0.6),inset 0 1px 0 rgba(255,255,255,0.3);
  background: #666666; /* Old browsers */
  background: -moz-radial-gradient(center, ellipse cover, #666666 0%, #000000 100%); /* FF3.6-15 */
  background: -webkit-radial-gradient(center, ellipse cover, #666666 0%,#000000 100%); /* Chrome10-25,Safari5.1-6 */
  background: radial-gradient(ellipse at center, #666666 0%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#666666', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */  
  color: #d9d6d5;
  font-family: 'Ubuntu', sans-serif;

}
.fixe {
  left: 75%;
  top: 10%;
  position: fixed;
  z-index: 1;
}

}

/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) and (max-width: 738px) {
	.section {
		padding-top: 15%;
	
	}
  .construct {
  height: 100vh;
  -webkit-box-shadow: 0 -1px 0 rgba(0,0,0,0.6),inset 0 1px 0 rgba(255,255,255,0.3); box-shadow: 0 -1px 0 rgba(0,0,0,0.6),inset 0 1px 0 rgba(255,255,255,0.3);
 background: #666666; /* Old browsers */
  background: -moz-radial-gradient(center, ellipse cover, #666666 0%, #000000 100%); /* FF3.6-15 */
  background: -webkit-radial-gradient(center, ellipse cover, #666666 0%,#000000 100%); /* Chrome10-25,Safari5.1-6 */
  background: radial-gradient(ellipse at center, #666666 0%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#666666', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ 
  color: #d9d6d5;
  font-family: 'Ubuntu', sans-serif;

}

.fixe {
  left: 90%;
  top: 10%;
  position: fixed;
  z-index: 1;
}
}

/*Medium devices (tablets, 739px and up)*/
@media (min-width: 739px) and (max-width: 991px) {
	.section {
		padding-top: 8%;
		
	}
  .construct {
  height: 100vh;
  -webkit-box-shadow: 0 -1px 0 rgba(0,0,0,0.6),inset 0 1px 0 rgba(255,255,255,0.3); box-shadow: 0 -1px 0 rgba(0,0,0,0.6),inset 0 1px 0 rgba(255,255,255,0.3);
  background: #666666; /* Old browsers */
  background: -moz-radial-gradient(center, ellipse cover, #666666 0%, #000000 100%); /* FF3.6-15 */
  background: -webkit-radial-gradient(center, ellipse cover, #666666 0%,#000000 100%); /* Chrome10-25,Safari5.1-6 */
  background: radial-gradient(ellipse at center, #666666 0%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#666666', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ 
  color: #d9d6d5;
  font-family: 'Ubuntu', sans-serif;

}

.fixe {
  left: 85%;
  top: 15%;
  position: fixed;
  z-index: 1;
}
}

/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) and (max-width: 1199px) {
	.section {
		padding-top: 7%;
		
	}
  .construct {
  height: 100vh;
  -webkit-box-shadow: 0 -1px 0 rgba(0,0,0,0.6),inset 0 1px 0 rgba(255,255,255,0.3); box-shadow: 0 -1px 0 rgba(0,0,0,0.6),inset 0 1px 0 rgba(255,255,255,0.3);
  background: #666666; /* Old browsers */
  background: -moz-radial-gradient(center, ellipse cover, #666666 0%, #000000 100%); /* FF3.6-15 */
  background: -webkit-radial-gradient(center, ellipse cover, #666666 0%,#000000 100%); /* Chrome10-25,Safari5.1-6 */
  background: radial-gradient(ellipse at center, #666666 0%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#666666', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ 
  color: #d9d6d5;
  font-family: 'Ubuntu', sans-serif;

}
}

/*Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
	.section {
		padding-top: 5%;
	}
  .construct {
  height: 100vh;
  -webkit-box-shadow: 0 -1px 0 rgba(0,0,0,0.6),inset 0 1px 0 rgba(255,255,255,0.3); box-shadow: 0 -1px 0 rgba(0,0,0,0.6),inset 0 1px 0 rgba(255,255,255,0.3);
  background: #666666; /* Old browsers */
  background: -moz-radial-gradient(center, ellipse cover, #666666 0%, #000000 100%); /* FF3.6-15 */
  background: -webkit-radial-gradient(center, ellipse cover, #666666 0%,#000000 100%); /* Chrome10-25,Safari5.1-6 */
  background: radial-gradient(ellipse at center, #666666 0%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#666666', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ 
  color: #d9d6d5;
  font-family: 'Ubuntu', sans-serif;

}


}

/*.size {
  height: 100%;
}*/

.error-title {
  font-family: 'Ubuntu', sans-serif;
  font-size: 4rem; 
}

.oops {
  font-family: 'Ubuntu', sans-serif;
  font-size: 2rem;
}