* {
  box-sizing: border-box;
  font-family: Source Sans Pro, sans-serif;
}

.row::after {
  content: "";
  clear: both;
  display: flex;

}

.main-content {
  display: flex;
  flex-wrap: wrap;
  margin-top: 2vw;
  align-items: center;
  height: max-content;
}


/* For desktop: */
.col-1 {
  width: 8.33%;
}

.col-2 {
  width: 16.66%;
}

.col-3 {
  width: 25%;
}

.col-4 {
  width: 33.33%;
}

.col-5 {
  width: 41.66%;
}

.col-6 {
  width: 50%;
  box-sizing: border-box;
  justify-content: center;
}

.col-7 {
  width: 58.33%;
}

.col-8 {
  width: 66.66%;
  padding-left: 30vw;

}

.col-9 {
  width: 75%;
}

.col-10 {
  width: 83.33%;
}

.col-11 {
  width: 91.66%;
}

.col-12 {
  width: 100%;
}


/* For mobile phones: */


@media only screen and (max-width: 768px) {
  [class*="col-"] {
    width: 100%;
  }
}

@media only screen and (max-width: 768px) {
  div.sidebar {
    visibility: hidden;
  }

  div.sidebar.open {
    visibility: visible;
    width: 100%;
  }

  body .footer {
    font-size: 1vw;
    justify-content:space-evenly;
    display:flex
  }

  body .footer .bold-footer {
    display: flex;
    margin-right: 0;
  }

  body .horizontal-line {
    display: flex;
    justify-self: center;
  }
}

@media only screen and (max-width: 768px) {
  body .header {
    justify-content: center;
  }

  div.title {
    margin-left: 0;
    font-size: 3.5vw;
    padding-right: 2%;
  }

  body .header li {
    height: 3.5vw;
  }

  div .logo {
    height: 4vw;
    width: auto;
    margin-left: 0;
  }

  div button.header-button {
    font-size: 1.5vw;
  }

}

@media only screen and (max-width: 768px) {

  /*for the */
  body .header .menu-bars {
    visibility: visible;
    position: absolute;
    left: 2vw;
  }

  body .header .header-board {
    position: absolute;
    right: 2vw;
  }

  div .header {
    font-size: 3.5vw;
  }

  nav ul {
    display: none;
  }
}

@media only screen and (max-width: 768px) {
  body .content-in-page {
    width: 90%;
    left: 5%;
  }

  div .side1::before {
    background-color: transparent;
  }

  div .side::before {
    background-color: transparent;
  }
}

@media only screen and (max-width: 768px) {
  #canvas1 {
    width: 100%;
  }

  /* .main-content{
      display: flex;
      flex-direction: column;
    } */


  .reverse-column {
    flex-direction: column-reverse;
    display: flex;
  }

  .image-mask-border {
    width: 25vw;
    height: 25vw;
    padding: 2%;
  }

}