.text-container{
    max-width: 1500px;
    width:100%;
    margin:auto;
    display: flex;
}

.paragraph-container{
    margin-left:200px;
    margin-right:200px;

    display: flex;
    flex-direction: row;

    justify-content:center;

    transition-property: all;
    transition-duration: 0.3s;

    width: 100%;
}

.paragraph-container.bottom-space{
}

.paragraph-container.column{
    margin-left:100px;
    margin-right:100px;

  flex-direction: column;

  width: 100%;
}

.paragraph-container.center{
  justify-content: center;
}

.paragraph-container.reverse{
  flex-direction: row-reverse;
}

.paragraph{
    text-align: justify;
    width: 100%;
    word-break: break-word;
}

.text-title{
    text-transform: uppercase;
    letter-spacing: 8px;
    font-weight: 500;
    font-size: 28px;

    margin: 0px;

    position: relative;
}

.text-title.center{
  transform: translate(-50%, 0px);
  left:50%;
  text-align: center;
  margin-bottom: 50px;
}

.text-title-anchor{
  width: 50%;
}

.text-title-anchor.column{
  width: 100%;
  margin-bottom: 50px;
}

.text-title-anchor.center{
  width:100%;
}

.text-title-container{
    position: relative;
}

.text-title-container.mid{
    position: relative;
    top:33%;
    transform: translate(0%, -50%);
}

.text-title-container.center{
  width: 100%;
}

.text-title-container.right{
  text-align: right;
  float: right;
}

.translatable.text-padding-right{
  padding-right:40px;
}

.translatable.text-padding-right.center{
  padding-right:0px;
}

.placeholder-text{
  opacity:50%;
  font-weight: 100;
  font-style: italic;
}

.placeholder-title{
  opacity:50%;
  font-weight: 100;
  font-style: italic;
}

@media only screen and (min-width: 480px) and (max-width: 1279px){

.paragraph-container{
  margin-left:100px;
  margin-right:100px;
}

}

@media only screen and (min-width: 0px) and (max-width: 1100px){

.text-title-container.right{
  float: unset;
  direction: unset;
}

.translatable.text-padding-right{
  padding-right: 0px;
}

.paragraph-container{
  flex-direction: column;
}

.paragraph-container.reverse{
  flex-direction: column;
}

.text-title-anchor{
}

.text-title-container.mid{
    top:0%;
    transform: translate(0%, 0%);
    margin-bottom: 20px;
}

}

@media only screen and (min-width: 0px) and (max-width: 480px){

.paragraph-container{
  margin-left:20px;
  margin-right:20px;
}

.paragraph-container.column {
  margin-left:20px;
  margin-right:20px;
}

.paragraph-container.center{
  justify-content: center;
  margin-left:20px;
  margin-right:20px;
}

.text-title{
  font-size: 6vw;
  letter-spacing: 2vw;
}

.text-title.center{
  margin-bottom: 20px;
}

}