.main {
  max-width: 1500px;
  margin: auto;
  font-family: sans-serif;
  font-weight: 300;
}

.header {
  display: grid;
  grid-template-columns: 50% 50%;
  margin-top: 30px;
}

.logo {
  height: 50px;
}

.navigation > ul {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.navigation > .links > .link {
  list-style: none;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 8px;
  padding-right: 8px;
}

.navigation > .links > .link > a {
  text-decoration: none;
  color: rgb(27, 24, 34);
}

.navigation > .links > .link.current {
  border-bottom: 1px solid rgb(220, 53, 69);
}

.content > .current-campaign {
  background-color: rgb(255, 255, 255);
  background-position-x: 70%;
  background-position-y: 50%;
  background-image: url(./images/collage.png);
  height: 700px;
  display: flex;
  align-items: center;
}

.current-campaign > .current-campaign-text {
  padding-left: 50px;
  width: 485px;
}

.current-campaign > .current-campaign-text > .title {
  font-weight: 700;
  font-size: 58px;
  overflow-wrap: break-word;
  font-family: Tahoma, sans-serif;
}

.current-campaign > .current-campaign-text > .description {
  padding: 24px 0;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.62;
  word-wrap: break-word;
  font-family: sans-serif;
}

.current-campaign > .current-campaign-text > .link {
  cursor: pointer;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.62;
  padding: 20px 50px;
  border-radius: 20px;
  letter-spacing: 0.7px;
  box-shadow: rgb(82, 71, 223, 0.34) 13px 10px 13px 0px;
  background-color: rgb(249, 80, 61);
  color: white;
  font-family: sans-serif;
  transition: all 0.5;
}

.interbridge-description {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.principles,
.partners,
.trips,
.om-oss-intro,
.om-oss-team,
.andre,
.alumni {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: sans-serif;
}

.principles > .title,
.partners > .title,
.trips > .title,
.om-oss-intro > .title,
.om-oss-team > .title,
.andre > .title,
.alumni > .title,
.details > .title {
  font-size: 42px;
  font-weight: normal;
  letter-spacing: -1.34px;
  font-family: sans-serif;
  margin-bottom: 60px;
}

.principles > .slides {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.principles > .slides > .slide {
  width: 20%;
  padding-top: 20px;
  padding-bottom: 30px;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 20px;
}

.slide.meg {
  background-color: #87f2d7;
}

.slide.relationship {
  background-color: #d698fe;
}

.slide.samfunn {
  background-color: #ffca00;
}

.slide.fremtid {
  background-color: #f9503d;
}

.partners > .logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  column-gap: 1%;
}

.partners > .logos > .logo {
  max-width: 16%;
  flex: 0 0 16%;
  height: auto;
}

.trip-photo {
  max-width: 80%;
}

.trips > .date {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.57px;
  font-family: sans-serif;
  line-height: 20px;
  margin-top: 30px;
  margin-bottom: 0px;
}

.trips > .apply-by {
  font-family: sans-serif;
  font-size: 18px;
  font-weight: 300;
  letter-spacing: -0.57px;
  line-height: 18px;
  margin-top: 20px;
}

.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 100px;
}

.footer > .link {
  cursor: pointer;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.62;
  padding: 20px 70px;
  border-radius: 20px;
  letter-spacing: 0.7px;
  box-shadow: rgb(82, 71, 223, 0.34) 13px 10px 13px 0px;
  background-color: #d698fe;
  color: white;
  font-family: sans-serif;
  transition: all 0.5;
  text-decoration: none;
}

.videos-2030 {
  margin-top: 50px;
  display: grid;
  grid-template-columns: 50% 50%;
  justify-content: space-between;
  row-gap: 100px;
}

.videos-2030 > .video,
.akademi > .video {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.om-oss-intro > .short {
  display: flex;
  flex-direction: row;
}

.om-oss-intro > .short > * {
  flex: 0 0 50%;
  height: auto;
  max-width: 50%;
}

.om-oss-intro > .short > .short-text {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  font-family: sans-serif;
  font-size: 27px;
  font-weight: 300;
  letter-spacing: -0.57px;
  line-height: 49px;
  overflow-wrap: break-word;
  margin: 0 30px;
}

.om-oss-specifics {
  margin: 0 20px;
  margin-top: 50px;
  font-family: sans-serif;
  font-size: 22px;
  font-weight: 300;
  overflow-wrap: break-word;
}

.om-oss-team > .avatars {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-evenly;
  column-gap: 2%;
  row-gap: 50px;
  width: 100%;
}

.om-oss-team > .avatars > .avatar {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  max-width: 30%;
  flex: 0 0 30%;
  font-size: 18px;
  font-family: sans-serif;
  overflow-wrap: break-word;
}

.om-oss-team > .avatars > .avatar > img {
  border-radius: 50%;
  margin-bottom: 30px;
}

.akademi > .modules {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.akademi > .modules > .slide {
  width: 20%;
  padding-top: 20px;
  padding-bottom: 30px;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 20px;
}

.andre > .body {
  display: block;
  margin: 0px 50px;

  font-size: 20px;
  font-weight: 300;
  letter-spacing: -0.57px;
  line-height: 32.2px;
}

.alumni > .title {
  margin-top: 20px;
  margin-bottom: 20px;
}

.alumni {
  margin-bottom: 40px;
}

.alumni > .alumni-pictures {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
}

.alumni > .alumni-pictures > img {
  max-width: 20%;
  flex: 0 0 20%;
}

.contact {
  margin-top: 100px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
}

.contact > .map {
  max-width: 50%;
  flex: 0 0 48%;
  box-shadow: 0px 15px 54px 0px rgba(193, 196, 211, 0.64);
}

.contact > .map > iframe {
  height: 500px;
  width: 100%;
}

.contact > .details {
  font-family: sans-serif;
  font-size: 20px;
}

@media only screen and (max-width: 1200px) {
  .header {
    grid-template-columns: 30% 70%;
  }

  .videos-2030 {
    display: flex;
    flex-direction: column;
  }
}

@media only screen and (max-width: 800px) {
  .header {
    grid-template-columns: 30% 70%;
  }

  .principles > .slides {
    flex-direction: column;
  }

  .principles > .slides > .slide {
    width: 95%;
    margin-top: 50px;
  }

  .partners > .logos {
    flex-direction: column;
    row-gap: 50px;
  }

  .partners > .logos > .logo {
    max-width: 50%;
    flex: 0 0 80%;
  }
}

@media only screen and (max-width: 500px) {
  .header {
    display: flex;
    flex-direction: column;
  }

  .header > .logo {
    height: auto;
  }

  .navigation > .links {
    padding-left: 0px;
    flex-direction: column;
  }

  .navigation > .links > .link {
    padding-left: 0px;
    padding-right: 0px;
  }

  .principles > .slides,
  .akademi > .modules,
  .alumni > .alumni-pictures {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    max-width: 100%;
  }

  .principles > .slides > .slide,
  .akademi > .modules > .slide,
  .alumni > .alumni-pictures > img {
    flex: 0 0 40%;
    max-width: 40%;
    margin-top: 50px;
  }

  .om-oss-intro > .short {
    display: flex;
    flex-direction: column;
  }

  .om-oss-intro > .short > * {
    flex: 1;
    height: auto;
    max-width: 90%;
  }

  .om-oss-team > .avatars {
    display: flex;
    flex-direction: column;

    margin-bottom: 30px;
  }

  .om-oss-team > .avatars > .avatar {
    max-width: 80%;
    width: 80%;
  }

  .om-oss-team > .avatars > .avatar > img {
    max-width: 80%;
  }

  .contact {
    flex-direction: column;
  }

  iframe {
    max-width: 300px;
  }
}