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

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

.overview {
  padding: 0 10%;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  align-items: center;
  overflow: hidden; }
  @media all and (max-width: 1023px) {
    .overview {
      padding: 0;
      padding-top: 30px !important; } }
  .overview .description {
    color: #ffffff;
    width: 100%;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    align-items: center; }
    .overview .description .title-section {
      padding-right: 15px; }
      @media all and (min-width: 1921px) {
        .overview .description .title-section {
          width: 35%; } }
    .overview .description .details {
      padding-left: 15px; }
    @media all and (max-width: 1023px) {
      .overview .description {
        padding: 0 30px;
        padding-top: 0 !important; }
        .overview .description .title-section {
          padding: 0; }
        .overview .description .details {
          display: none; } }
  .overview .video-wrapper {
    width: 60%; }
    @media all and (min-width: 1024px) and (max-width: 1439px) {
      .overview .video-wrapper {
        width: 70%; } }
    @media (max-width: 1199.98px) {
      .overview .video-wrapper {
        width: 80%; } }
    @media all and (max-width: 1023px) {
      .overview .video-wrapper {
        width: 100%; } }
  .overview .bg-img-cover {
    height: 580px;
    max-height: 580px; }
    @media all and (min-width: 1024px) and (max-width: 1439px) {
      .overview .bg-img-cover {
        height: 480px;
        max-height: 480px; } }
    @media (max-width: 1199.98px) {
      .overview .bg-img-cover {
        height: 380px;
        max-height: 380px; } }
    @media all and (min-width: 600px) and (max-width: 1023px) {
      .overview .bg-img-cover {
        height: 320px;
        max-height: 320px; } }
    @media all and (max-width: 599px) {
      .overview .bg-img-cover {
        height: 258px;
        max-height: 100%; } }

html:lang(ar) .overview .description .title-section {
  padding: 0;
  padding-left: 15px; }

html:lang(ar) .overview .description .details {
  padding: 0;
  padding-right: 15px; }

@media all and (max-width: 1023px) {
  html:lang(ar) .overview .description .title-section {
    padding: 0; } }