#casestudies {
  background-color: #FFFFFF;
}

@media screen and (min-width: 1441px) {
  #casestudies {
    padding-top: 0px;
  }
}

@media screen and (min-width: 1301px) {
  #casestudies {
    padding-top: 0px;
  }
}

@media screen and (max-width: 1300px) {
  #casestudies {
    padding-top: 0px;
  }
}

@media screen and (max-width: 1050px) {
  #casestudies {
    padding-top: 200px;
  }
}

#casestudies.show {
  opacity: 1;
}

@media screen and (max-width: 1050px) {
  #casestudies .container {
    padding-bottom: 100px;
  }
}

#casestudies .container .casestudies-cover {
  margin-bottom: 100px;
}

#casestudies .container .casestudies-cover .casestudies.section-title {
  margin-bottom: 20px;
  -webkit-transition: all 1.4s ease-in-out;
  -o-transition: all 1.4s ease-in-out;
  transition: all 1.4s ease-in-out;
}

#casestudies .container .casestudies-cover .casestudies.section-title.show {
  -webkit-animation: moveup 0.8s forwards;
  animation: moveup 0.8s forwards;
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
  -webkit-transition: all 1.4s ease-in-out;
  -o-transition: all 1.4s ease-in-out;
  transition: all 1.4s ease-in-out;
}

#casestudies .container .casestudies-cover .casestudies-icons {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-transition: all 1.4s ease-in-out;
  -o-transition: all 1.4s ease-in-out;
  transition: all 1.4s ease-in-out;
}

#casestudies .container .casestudies-cover .casestudies-icons.show {
  -webkit-animation: moveup 0.8s forwards;
  animation: moveup 0.8s forwards;
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
  -webkit-transition: all 1.4s ease-in-out;
  -o-transition: all 1.4s ease-in-out;
  transition: all 1.4s ease-in-out;
}

@media screen and (max-width: 1050px) {
  #casestudies .container .casestudies-cover .casestudies-icons .casestudy-icon svg {
    width: 14vw;
    height: 8vh;
  }
}

#casestudies .container .single-city {
  list-style: none;
  border-top: 1px black solid;
}

@media screen and (max-width: 1050px) {
  #casestudies .container .single-city {
    padding-top: 10px;
  }
}

#casestudies .container .single-city .cs-title {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

@media screen and (max-width: 500px) {
  #casestudies .container .single-city .cs-title {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
}

#casestudies .container .single-city .cs-title .casestudy-country-title {
  font-size: 260px;
  font-family: 'FGrotesk-bold', helvetica, Arial, 'sans-serif';
  margin: 0 25px 30px 0;
}

@media screen and (max-width: 1050px) {
  #casestudies .container .single-city .cs-title .casestudy-country-title {
    font-size: 100px;
    margin: 0 25px 12px 0;
  }
}

@media screen and (max-width: 715px) {
  #casestudies .container .single-city .cs-title .casestudy-country-title {
    font-size: 100px;
    margin: 0 25px 12px 0;
  }
}

@media screen and (max-width: 500px) {
  #casestudies .container .single-city .cs-title .casestudy-country-title {
    font-size: 62px;
    margin: 0;
  }
}

@media screen and (max-width: 350px) {
  #casestudies .container .single-city .cs-title .casestudy-country-title {
    font-size: 54px;
  }
}

@media screen and (max-width: 320px) {
  #casestudies .container .single-city .cs-title .casestudy-country-title {
    font-size: 50px;
  }
}

@media screen and (max-width: 1050px) {
  #casestudies .container .single-city .cs-title .category-symbol svg {
    width: 130px;
    height: 130px;
  }
}

@media screen and (max-width: 715px) {
  #casestudies .container .single-city .cs-title .category-symbol svg {
    width: 100px;
    height: 100px;
  }
}

@media screen and (max-width: 500px) {
  #casestudies .container .single-city .cs-title .category-symbol svg {
    width: 60px;
    height: 60px;
  }
}

@-webkit-keyframes moveup {
  0% {
    -webkit-transform: translate(0, 100px);
    transform: translate(0, 100px);
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
}

@keyframes moveup {
  0% {
    -webkit-transform: translate(0, 100px);
    transform: translate(0, 100px);
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
}

#casestudies .container .single-city .city-content {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  border-top: 1px solid black;
  padding-top: 34px;
  margin: 38px 0;
}

@media screen and (max-width: 1050px) {
  #casestudies .container .single-city .city-content {
    display: block;
    margin: 16px 0;
    padding-top: 18px;
  }
}

@media screen and (max-width: 500px) {
  #casestudies .container .single-city .city-content {
    margin: 14px 0;
  }
}

#casestudies .container .single-city .city-content .city-challenger {
  -webkit-box-flex: 4;
  -webkit-flex-grow: 4;
  -ms-flex-positive: 4;
  flex-grow: 4;
  -webkit-flex-basis: 0;
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
}

#casestudies .container .single-city .city-content .city-challenger .casestudy-category {
  margin: 0;
  margin-right: 50px;
}

#casestudies .container .single-city .city-content .city-challenger .casestudy-country {
  margin: 0;
}

#casestudies .container .single-city .city-content .casestudy-content {
  -webkit-box-flex: 5;
  -webkit-flex-grow: 5;
  -ms-flex-positive: 5;
  flex-grow: 5;
  -webkit-flex-basis: 0;
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  margin-bottom: 80px;
}

@media screen and (max-width: 500px) {
  #casestudies .container .single-city .city-content .casestudy-content {
    margin-bottom: 40px;
  }
}

#casestudies .container p.scroll-indication {
  font-size: 14px;
  text-transform: uppercase;
  margin: 30px 0;
  color: #000000;
}

#casestudies .container p.scroll-indication.show {
  -webkit-animation: moveup 0.8s forwards;
  animation: moveup 0.8s forwards;
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
  -webkit-transition: all 1.4s ease-in-out;
  -o-transition: all 1.4s ease-in-out;
  transition: all 1.4s ease-in-out;
}

@media screen and (max-width: 1050px) {
  #casestudies .container p.scroll-indication.bottom {
    margin: 0;
    margin-bottom: 30px;
  }
}

@media screen and (max-width: 1050px) {
  #casestudies .container p.scroll-indication {
    margin-bottom: 0;
    margin-top: 40px;
  }
}

#casestudies .container p.scroll-indication svg {
  width: 12px;
  margin-right: 12px;
  -webkit-animation: bounce 3s infinite;
  animation: bounce 3s infinite;
}

#casestudies .container p.scroll-indication svg path:nth-of-type(2) {
  fill: #000000;
}