html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  *, *:before, *:after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
  }
  
  html, body {
      color:#fff;
      background:black;
      font-family: 'Raleway', sans-serif;
  }
  
  img {
      border:0;
  }
  
  h1 {
    margin: 48px 0;
  }

  p {
      font-size:24px;
      margin:0 0 64px;
  }
  
  .flags img {
      /* max-width:100%; */
      /* max-width:75px; */
      max-width:55px;
      width:auto;
      height:auto;
      display:inline-block;
      transition:200ms all;
      border:0;
  }
  
  .flags img:hover {
      opacity:0.8;
      scale:1.1;
  }
  
  .wrapper {
      max-width:1050px;
      margin:0 auto;
      padding:55px 32px 100px;
      text-align: center;
  }
  
  .flags {
      display: grid;
      width: 100%;
      grid-template-columns: auto auto auto auto auto;
      grid-column-gap: 10px;
      grid-row-gap: 10px;
  }
  
  .script {
      /* padding:80px 0; */
      padding:40px 0;
  }
  
  .script img {
      width:auto;
      max-width:100%;
  }
  

  @media(max-width:600px) {
  .flags {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 70px;
  }

  .flags img {
    width:95%;
  }

  .script {
    padding:40px 0;
  }
}

@media(max-width:400px) {
    .flags img {
        max-width:60px;
    }
}



/* fade in */
body {
    animation: fadeInAnimation ease 3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
 
@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
     }
}