{% if page.layout == 'home' %}

<section class="hero-block video-block">

{% else %}

<section class="hero-block slash-shadow block-{{ page.hero-translucancy }} {{ page.colour }}-bg slash-{{ page.hero-slash-angle }}">

{% endif %}

<div class="hero-inner grid">

{% if page.hero-logo %}

<span class="client-logo {{page.hero-logo}}-logo-white">{{page.client}}</span>

{% endif %}

<h1 class="hero-title col-1-1">{% if page.hero-title %}{{page.hero-title}}{% else %}{{page.title}}{% endif %}</h1>

{% if page.hero-subtitle %}

<p class="hero-subtitle col-1-1">{{page.hero-subtitle}}</p>

{% endif %}

{% if page.hero-btn-text %}

<a href="{{page.hero-btn-url}}" class="btn btn-light btn-arrow btn-lrg btn-center">{{page.hero-btn-text}}</a>

{% endif %}

</div>

{% if page.layout == 'home' %}

<button id="fs-video" class="video-play-btn btn-play btn-block btn-circle white-bg">{{page.hero-play-btn}}</button>

<video class="video" id="officespace" preload src="https://s3-eu-west-1.amazonaws.com/pebblecodecom/officeloop-bw.mp4" autoplay loop></video>

{% endif %}