/* breakpoints */
.grid-position {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  float: left; }

html:lang(ar) .grid-position {
  float: right; }

.building-block {
  padding: 0 8.66%;
  color: #ffffff;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  align-items: center;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }
  @media all and (max-width: 1023px) {
    .building-block {
      padding: 0; } }
  .building-block .img-block {
    width: 60%; }
    @media all and (min-width: 1921px) {
      .building-block .img-block {
        padding-right: 30px; } }
    @media all and (max-width: 1920px) {
      .building-block .img-block {
        padding-right: 20px; } }
    @media all and (max-width: 1023px) {
      .building-block .img-block {
        width: 100%;
        padding: 0; } }
  .building-block .bg-img-cover {
    height: 725px;
    max-height: 725px; }
    @media all and (min-width: 1024px) and (max-width: 1439px) {
      .building-block .bg-img-cover {
        height: 620px;
        max-height: 620px; } }
    @media (max-width: 1199.98px) {
      .building-block .bg-img-cover {
        height: 520px;
        max-height: 520px; } }
    @media all and (min-width: 600px) and (max-width: 1023px) {
      .building-block .bg-img-cover {
        height: 400px;
        max-height: 400px; } }
    @media all and (max-width: 599px) {
      .building-block .bg-img-cover {
        height: 324px;
        max-height: 100%; } }
  .building-block .description {
    width: 40%;
    padding: 0 0 0 30px; }
    .building-block .description .sub-title {
      line-height: normal;
      padding-bottom: 5px; }
    .building-block .description .details {
      padding-top: 20px; }
    @media all and (max-width: 1199.98px) {
      .building-block .description .title {
        font-size: 60px;
        line-height: 60px; } }

@media all and (max-width: 1023px) and (min-width: 320px) and (max-width: 1920px) {
  .building-block .description .title {
    font-size: calc( 50px + (100 - 50) * ( (100vw - 320px) / (1920 - 320) )); } }

@media all and (max-width: 1023px) and (min-width: 320px) and (max-width: 1920px) {
  .building-block .description .title {
    line-height: calc( 50px + (100 - 50) * ( (100vw - 320px) / (1920 - 320) )); } }
    @media all and (max-width: 1023px) {
      .building-block .description {
        width: 100%;
        padding: 40px 30px 0; } }

.reverse {
  -webkit-flex-direction: row-reverse;
  -moz-flex-direction: row-reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse; }
  .reverse .img-block {
    padding: 0; }
    @media all and (min-width: 1921px) {
      .reverse .img-block {
        padding-left: 30px; } }
    @media all and (max-width: 1920px) {
      .reverse .img-block {
        padding-left: 20px; } }
    @media all and (max-width: 1023px) {
      .reverse .img-block {
        padding: 0; } }
  .reverse .description {
    padding: 0 30px 0 0; }
    @media all and (max-width: 1023px) {
      .reverse .description {
        padding: 40px 30px 0; } }

html:lang(ar) .building-block .img-block {
  padding: 0; }
  @media all and (min-width: 1921px) {
    html:lang(ar) .building-block .img-block {
      padding-left: 30px; } }
  @media all and (max-width: 1920px) {
    html:lang(ar) .building-block .img-block {
      padding-left: 20px; } }
  @media all and (max-width: 1023px) {
    html:lang(ar) .building-block .img-block {
      padding: 0; } }

html:lang(ar) .building-block .description {
  padding: 0 30px 0 0; }
  @media all and (max-width: 1023px) {
    html:lang(ar) .building-block .description {
      padding: 40px 30px 0; } }

html:lang(ar) .reverse {
  -webkit-flex-direction: row-reverse;
  -moz-flex-direction: row-reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse; }
  html:lang(ar) .reverse .img-block {
    padding: 0; }
    @media all and (min-width: 1921px) {
      html:lang(ar) .reverse .img-block {
        padding-right: 30px; } }
    @media all and (max-width: 1920px) {
      html:lang(ar) .reverse .img-block {
        padding-right: 20px; } }
    @media all and (max-width: 1023px) {
      html:lang(ar) .reverse .img-block {
        padding: 0; } }
  html:lang(ar) .reverse .description {
    padding: 0 0 0 30px; }
    @media all and (max-width: 1023px) {
      html:lang(ar) .reverse .description {
        padding: 40px 30px 0; } }