HEX
Server: Microsoft-IIS/8.5
System: Windows NT YDAWBH120 6.3 build 9600 (Windows Server 2012 R2 Standard Edition) AMD64
User: tentjecom_web (0)
PHP: 7.4.14
Disabled: NONE
Upload Files
File: D:/HostingSpaces/SBogers10/boldt.komma.pro/resources/sass/site/7-Templates/_templates.home.scss
#home {
  .full-width-image {
    position: absolute;
    display: block;
    z-index: -1;
    height: calc(29vw + 192px);
    max-height: 815px;
    width: 100vw;
    top: -192px;
    left: 0;
    overflow: hidden;

    &:after {
      content: '';
      display: block;
      height: 100%;
      position: absolute;
      z-index: 10;
      top: 0;

      background: -moz-linear-gradient(left,  rgba(0,0,19,1) 0%, rgba(0,0,19,0) 10%, rgba(0,0,19,0) 90%, rgba(0,0,19,1) 100%); /* FF3.6-15 */
      background: -webkit-linear-gradient(left,  rgba(0,0,19,1) 0%,rgba(0,0,19,0) 10%,rgba(0,0,19,0) 90%,rgba(0,0,19,1) 100%); /* Chrome10-25,Safari5.1-6 */
      background: linear-gradient(to right,  rgba(0,0,19,1) 0%,rgba(0,0,19,0) 10%,rgba(0,0,19,0) 90%,rgba(0,0,19,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000013', endColorstr='#000013',GradientType=1 ); /* IE6-9 */

      width: 100%;
      left: 0;

    }

    > iframe {
      position: absolute;
      display: block;
      z-index: 0;
      height: 56vw;
      width: 100vw;
      top: -9vw;

      @include mq(1550){
        top: -12vw;
      }
    }

  }

  .c-text-image.l-bisection--reversed.l-bisection--corners {
    padding-top: 90px;
    @include mq(900) {
      width: column(13, 12);
    }

    .s-text {
      @include mq(900) {
        width: column(6, 12);
      }
      &:after {
        content: '';
        display: block;
        height: calc(100% + 60px);
        position: absolute;
        top: -60px;
        left: -50%;
        width: 50%;
        transform: translate(1px, 0); // needed to prevent line between SVG and div
        background-image: url(/img/home-text-image-left-triangle.svg);
        background-size: contain;
        background-position: right 0;
        background-repeat: no-repeat;

        @include mq(null, 800) {
          display: none;
        }
      }
    }
    .s-image {
      width: calc(100% - 60px);
      left: auto;

      @include mq(800, 900) {
        width: calc(100% - 56px);
        left: -4px;
      }

      @include mq(900) {
        width: column(7, 12);
        left: auto;
      }
    }
  }
}