@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(../fonts/SourceSansPro-Regular-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 900;
  src: local('Source Sans Pro Black'), local('SourceSansPro-Black'), url(../fonts/SourceSansPro-Bold-900.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html,body{height:100%;}
body {
  font: 16px/1.3 'Source Sans Pro', sans-serif;
  background-color: rgb(30, 90, 144);
  color: rgb(220, 220, 220);
}

h1,h2,h3,h4,h5,h6 {
  word-break: break-all;
  word-wrap: break-word;
}

header nav {
  padding: 0 !important;
  background-color: transparent;
}

header nav a {
  background-color: #343a40 !important; 
}

header nav a.navbar-toggler {
  padding-top: 1rem;
  border-radius: initial;
}

header nav:after {
  display: block;
  content: '';
  width: 100%;
  height: 2rem;
  background-color: #343a40;
  clip-path: polygon(0 100%, 0 0, 100% 0, 100% 100%, 50% 25%)
}

.navbar-toggler {
  display: inline-block;
  width: 100%;
  text-align: center;
}

.dropdown a {
  text-align: center;
}

main {
  height: inherit;
  padding-bottom: 4rem;
}

main a {
  color: #343a40 !important;
}

article {
  padding-bottom: 3rem;
}

article:first-child {
  min-height: 105%;
}


article:nth-child(even) {
  background-color: rgb(68, 130, 192);
}

article:last-child {
  padding-bottom: 6rem;
}


article section {
  margin-top: 3rem;
  
}

/* patch gehabt animations */
#patchgehabt {
  margin-top: 3rem;
}

g#A g {
  /* arrearance */
  transform-origin: 100%;
  
  /* animation */
  animation-name: fall, fade;			
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-timing-function: ease-out;  
}

.Ap, .Ag, .Att  { animation-duration: 2s; }
.Aa, .Ae  { animation-duration: 3s; }
.At, .Ahh { animation-duration: 3.5s; }
.Ac, .Aaa { animation-duration: 4s; }
.Ah, .Ab  {	animation-duration: 1s; }

#p6,#a6,#t6,#c6,#h6,
#g7,#e7,#hh7,#aa7,#b7,#tt7 {
  fill: orange;
  animation: emphasize 4s ease-in-out 1;
}

@keyframes emphasize {
  0% {fill: red;}
  70% {fill: white; }
  100% {fill: orange;}
}

@keyframes fade{
  0%   { opacity: 0;  }
  80%  { opacity: .2; }
  100% { opacity: 1;  }
}

@keyframes fall{
  from {transform: translateY(-50%)}
  to 	{transform: translateY(0%)}
}

.text-columns {
  column-count: 3;
  column-gap: 2rem;
}

.keep-together {
  break-inside: avoid;
}

.ol-mouse-position {
  color: #000;
}

#idLocation {
  min-height: initial;
}

#idLocation img {
  margin-bottom: 2rem;
}

footer {
  background-color: rgb(30, 90, 144);
}

/* Small devices */
@media (max-width: 767.98px) {
  header nav {
    margin-left: 25%;
    width: 50%;
  }
  
  #patchgehabt {
    height: 50%;
  }
  
  .text-columns {
    column-count: 2;
    column-gap: 1rem;
  }
}

/* Extra Small devices (landscape phones, 576px and up) */
@media (max-width: 575.98px) {
  #patchgehabt {
    margin-top: 5rem;
  }
  
  #patchgehabt svg {
    width: 100%
  }
  
  .display-1 {
    font-size: 4em
  }  
  
  .display-2 {
    font-size: 3.5em
  }
  
  .display-3 {
    font-size: 3em
  }

  
  .display-4 {
    font-size: 2.5em
  }

  
  .text-columns {
    column-count: initial;
    column-gap: initial;
  }
  
  main section {
    margin-left: 1rem;
    margin-right: 1rem;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  header nav {
    margin-left: 70%;
    width: 25%;
  }
  
  .modal-xl {
    width: 90%;
   max-width:1200px;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  header nav {
    margin-left: 80%;
    width: 15%;
  }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  header nav {
    margin-left: 83%;
    width: 12%;
  }
}