/**
 * IMPORTANT NOTICE!!!
 *
 * Whenever you edit this file please update the version number
 * on the index.html file, to avoid browsers caching the stylesheets!
 *
 * For example, from:
 * <link rel="stylesheet" href="/zava-assets/dist/styles/zavamed.css?v=2">
 *
 * Update it to:
 * <link rel="stylesheet" href="/zava-assets/dist/styles/zavamed.css?v=3">
 */

body {
  color: #333;
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  margin: 0;
  padding: 0;
}

.Rounded {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;

  -webkit-align-items: center;
  align-items: center;

  -webkit-justify-content: center;
  justify-content: center;
  padding: 45px 0 30px;
}

.Rounded svg {
  width: 150px;
}

h3 {
  font-weight: 300;
}

.Countries{
  padding: 15px 15px 30px;
  text-align:center
}

.Countries h3{
  font-size:30px;
  margin-bottom:30px;
  margin-top:0
}

.Countries-columns{
  display:flex;
  flex-wrap:wrap;
  margin:0 auto;
  max-width:800px;
}

.Countries-column {
  flex: 1 0 50%;
  margin-bottom:30px
}

.Countries-column a{
  text-decoration:none
}

.Countries-column a:focus,
.Countries-column a:hover{
  text-decoration: underline;
}

.Countries-column img{
  margin-bottom:15px
}

@media screen and (min-width: 768px) {
  header {
    background: url('../images/lang-img.jpg') center center;
    background-size: cover;
    padding: 75px 0;
  }

  .Rounded {
    background: white;
    border-radius: 1000px;
    height: 180px;
    margin: 0 auto;
    width: 180px;
    padding: 0;
  }

  .Countries {
    padding-top: 60px;
  }

  .Countries-column {
    flex: 1 0 33.33%;
  }
}

@media screen and (min-width: 1024px) {
  header {
    padding: 100px 0;
  }

  .Countries-column {
    flex: 1 0 16.66%;
  }
}

@media screen and (min-width: 1440px) {
  header {
    padding: 150px 0;
  }
}