@import url("https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300");
body {
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 14px;
  font-weight: 200;
  line-height: 1.7857;
  letter-spacing: 0.075em;
  color: #111;
  background-color: #f0f0f0;
  background-repeat: repeat; }

p {
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 82.5%; }

.post-content {
  background: rgba(0, 0, 0, 0.7) none repeat scroll 0 0;
  opacity: 0.5;
  top: 0;
  left: 0;
  position: absolute;
  color: #ffffff; }

.thumbnail {
  position: relative; }

.details {
  position: absolute;
  z-index: 2;
  top: 0;
  color: #ffffff; }

@media (min-width: 768px) {
  .grid-wrapper {
    position: relative;
    height: 30vw; }
    .grid-wrapper:after {
      content: "";
      display: table;
      clear: both; } }
@media (max-width: 768px) {
  .grid-wrapper {
    position: relative;
    height: 280vw;
    max-width: 90vw;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden; }
    .grid-wrapper:after {
      content: "";
      display: table;
      clear: both; } }
.grid-item {
  position: absolute;
  border: 1px solid lightgrey;
  -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  clip-path: url("#clip-diamond-demo"); }

@media (min-width: 768px) {
  .grid-item_contact {
    position: absolute;
    border: 1px solid lightgrey;
    -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    clip-path: url("#clip-diamond-demo"); } }

@media (min-width: 768px) {
  .diamond-small {
    height: 12vw;
    width: 12vw; }

  .diamond-small .diamond__content {
    height: 12vw;
    width: 12vw; }

  .diamond-small .diamond__content p {
    visibility: hidden;
    font-size: 80%; }

  .diamond-small .hoverblack {
    display: table-cell;
    text-align: center;
    vertical-align: middle; }

  .diamond-small .diamond__content:hover p {
    visibility: visible; }

  .diamond-small .hoverblack:hover {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 100%; }

  .diamond-large {
    background-color: black;
    height: 25vw;
    width: 25vw; }

  .diamond-large .diamond__content {
    height: 25vw;
    width: 25vw; }

  .diamond-large .diamond__content p {
    visibility: hidden;
    font-size: 2.0em; }

  .diamond-large .nohide p {
    visibility: visible !important; }

  .diamond-large .diamond__content:hover p {
    visibility: visible; }

  .diamond-large .hoverblack {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    height: 25vw;
    width: 25vw; }

  .diamond-large .hoverblack:hover {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    height: 25vw;
    width: 25vw;
    background-color: rgba(0, 0, 0, 0.7);
    color: white; } }
@media (min-width: 992px) {
  .diamond-xlarge {
    background-color: black;
    height: 40vw;
    width: 40vw; }

  .diamond-xlarge .diamond__content {
    height: 40vw;
    width: 40vw;
    display: table-cell;
    text-align: center;
    vertical-align: middle; } }
@media (max-width: 768px) {
  .diamond-small {
    height: 80vw;
    width: 80vw; }

  .diamond-small .diamond__content {
    height: 80vw;
    width: 80vw; }

  .diamond-small .diamond__content p {
    visibility: hidden;
    font-size: 80%; }

  .diamond-small .hoverblack {
    display: table-cell;
    text-align: center;
    vertical-align: middle; }

  .diamond-small .diamond__content:hover p {
    visibility: visible; }

  .diamond-small .hoverblack:hover {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 100%; }

  .diamond-large {
    background-color: black;
    height: 90vw;
    width: 90vw; }

  .diamond-large .diamond__content {
    height: 90vw;
    width: 90vw; }

  .diamond-large .diamond__content p {
    visibility: hidden;
    font-size: 2.0em; }

  .diamond-large .nohide p {
    visibility: visible !important; }

  .diamond-large .diamond__content:hover p {
    visibility: visible; }

  .diamond-large .hoverblack {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    height: 90vw;
    width: 90vw; }

  .diamond-large .hoverblack:hover {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    height: 90vw;
    width: 90vw;
    background-color: rgba(0, 0, 0, 0.7);
    color: white; } }
@media (max-width: 992px) {
  .diamond-xlarge {
    background-color: black;
    height: 80vw;
    width: 80vw; }

  .diamond-xlarge .diamond__content {
    height: 80vw;
    width: 80vw;
    display: table-cell;
    text-align: center;
    vertical-align: middle; } }
.diamond__content {
  display: table-cell;
  text-align: center;
  vertical-align: middle; }

@media (min-width: 768px) {
  .layout-1 {
    /*TOP SET*/
    /*BOTTOM SET*/ }
    .layout-1 .diamond-s1 {
      background-image: url("images/diamonds/Asset 2.jpg");
      background-size: 12vw;
      top: 0vw;
      left: 24vw; }
    .layout-1 .diamond-s2 {
      background-image: url("images/diamonds/Asset 3.jpg");
      background-size: 12vw;
      top: 6.25vw;
      left: 30.25vw; }
    .layout-1 .diamond-s3 {
      background-image: url("images/diamonds/Asset 4.jpg");
      background-size: 12vw;
      top: 0vw;
      left: 36.5vw; }
    .layout-1 .diamond-s4 {
      background-image: url("images/diamonds/Asset 8.jpg");
      background-size: 12vw;
      top: 0vw;
      left: 49.5vw; }
    .layout-1 .diamond-s5 {
      background-image: url("images/diamonds/Asset 9.jpg");
      background-size: 12vw;
      top: 6.25vw;
      left: 55.75vw; }
    .layout-1 .diamond-s6 {
      background-image: url("images/diamonds/Asset 10.jpg");
      background-size: 12vw;
      top: 0vw;
      left: 62vw; }
    .layout-1 .diamond-s7 {
      background-image: url("images/diamonds/Asset 5.jpg");
      background-size: 12vw;
      top: 25.5vw;
      left: 24vw; }
    .layout-1 .diamond-s8 {
      background-image: url("images/diamonds/Asset 6.jpg");
      background-size: 12vw;
      top: 19.25vw;
      left: 30.25vw; }
    .layout-1 .diamond-s9 {
      background-image: url("images/diamonds/Asset 7.jpg");
      background-size: 12vw;
      top: 25.5vw;
      left: 36.5vw; }
    .layout-1 .diamond-s10 {
      background-image: url("images/diamonds/Asset 11.jpg");
      background-size: 12vw;
      top: 25.5vw;
      left: 49.5vw; }
    .layout-1 .diamond-s11 {
      background-image: url("images/diamonds/Asset 12.jpg");
      background-size: 12vw;
      top: 19.25vw;
      left: 55.75vw; }
    .layout-1 .diamond-s12 {
      background-image: url("images/diamonds/Asset 13.jpg");
      background-size: 12vw;
      top: 25.5vw;
      left: 62vw; }
    .layout-1 .diamond-l1 {
      background-image: url("img/sidebysidesquare.jpg");
      background-size: 25vw;
      top: 6.25vw;
      left: 11vw; }
    .layout-1 .diamond-l2 {
      font-size: 0.9em;
      background-color: #1a1a1a;
      background-size: 25vw;
      top: 6.25vw;
      left: 36.5vw; }
    .layout-1 .diamond-l3 {
      background-image: url("img/thumbnail_2.jpg");
      background-size: 25vw;
      top: 6.25vw;
      left: 62vw; } }
@media (min-width: 992px) {
  .diamond-l4 {
    background-color: #1a1a1a;
    background-size: 80vw;
    top: 2.5vw;
    left: 29vw; } }
@media (max-width: 768px) {
  .layout-1 {
    /*TOP SET*/
    /*    .diamond-s1 {
    		
        background-image: url("img/thumbnail_1.jpg");
    	background-size: $small_mob;
        top: $gridUnit_mob*6;
        left: $gridpad_mob+ $gridUnit_mob * 0;
    }*/
  /*  .diamond-s3 {
		
    background-image: url("images/5.jpg");
	background-size: $small_mob;
        top: $gridUnit_mob * 12;
        left: $gridpad_mob+ $gridUnit_mob * 0;
    }	
    .diamond-s4 {
		background-image: url("img/thumbnail_5.jpg");
	background-size: $small_mob;
        top: $gridUnit_mob * 18;
        left: $gridpad_mob+ $gridUnit_mob * 0;
    }	*/
   /* .diamond-s6 {
		background-image: url("img/project.jpg");
	background-size: $small_mob;
        top: $gridUnit_mob * 24;
        left: $gridpad_mob+ $gridUnit_mob * 0;
    }	
	/*RIGHT SET*/
    /*    .diamond-s7 {
    		background-image: url("img/hallway.jpg");
    	background-size: $small_mob;
            top: $gridUnit_mob * 6;
            left: $gridpad_mob+ $gridUnit_mob * 12;
        }	*/
    /*    .diamond-s9 {
    		background-image: url("img/1.jpg");
    	background-size: $small_mob;
            top: $gridUnit_mob * 12;
            left: $gridpad_mob+ $gridUnit_mob * 12;
        }	
        .diamond-s10 {
    		background-image: url("img/audio.jpg");
    	background-size: $small_mob;
            top: $gridUnit_mob * 18;
            left: $gridpad_mob+ $gridUnit_mob * 12;
        }	*/
    /*    .diamond-s12 {
    		background-image: url("images/8.jpg");
    	background-size: $small_mob;
            top: $gridUnit_mob * 24;
            left: $gridpad_mob+ $gridUnit_mob * 12;
        }	*/ }
    .layout-1 .diamond-s2 {
      background-image: url("images/diamonds/Asset 2.jpg");
      background-size: 80vw;
      top: 50vw;
      left: -40vw; }
    .layout-1 .diamond-s5 {
      background-image: url("images/diamonds/Asset 6.jpg");
      background-size: 80vw;
      top: 140vw;
      left: -40vw; }
    .layout-1 .diamond-s8 {
      background-image: url("images/diamonds/Asset 9.jpg");
      background-size: 80vw;
      top: 50vw;
      left: 50vw; }
    .layout-1 .diamond-s11 {
      background-image: url("images/diamonds/Asset 11.jpg");
      background-size: 80vw;
      top: 140vw;
      left: 50vw; }
    .layout-1 .diamond-l1 {
      background-image: url("img/sidebysidesquare.jpg");
      background-size: 90vw;
      top: 0vw;
      left: 0vw; }
    .layout-1 .diamond-l2 {
      font-size: 0.6em;
      background-color: #1a1a1a;
      background-size: 90vw;
      top: 90vw;
      left: 0vw; }
    .layout-1 .diamond-l3 {
      background-image: url("img/thumbnail_2.jpg");
      background-size: 90vw;
      top: 180vw;
      left: 0vw; } }
/* padding */
@media (max-width: 991px) {
  .diamond-l4 {
    background-color: #1a1a1a;
    background-size: 80vw;
    top: 2.5vw;
    left: 6.5vw; } }
.padding-2p5p {
  padding: 2%; }

@media (min-width: 768px) {
  /* centered navigation */
  .nav.navbar-nav {
    float: left; }

  .nav.navbar-nav {
    clear: left;
    float: left;
    margin: 0;
    padding: 0;
    position: relative;
    left: 50%;
    text-align: center;
    font-size: 1em;
    font-weight: 700; }

  .nav.navbar-nav > li {
    position: relative;
    right: 50%; }

  .nav.navbar-nav li {
    text-align: left; } }
.divider {
  position: absolute;
  right: -1px;
  top: 8px; }

/* SERVICES */
.wrap {
  margin: -2em auto;
  width: 18vw;
  height: 40vw; }

.s {
  overflow: hidden;
  height: 50%;
  transform: skewY(15deg); }

.s:before {
  display: block;
  height: 100%;
  transform: skewY(-15deg);
  content: ''; }

.s:first-child:before {
  margin: 4em 0 0;
  background: url("img/audio.jpg") 50% 50%;
  background-size: 25vw; }

.s:last-child:before {
  margin: -4em 0 0;
  background: url("img/thumbnail_2.jpg") 50% 50%;
  background-size: 25vw; }

.s2 {
  overflow: hidden;
  height: 50%;
  transform: skewY(15deg); }

.s2:before {
  display: block;
  height: 100%;
  transform: skewY(-15deg);
  content: ''; }

.s2:first-child:before {
  margin: 4em 0 0;
  background: url(img/stage.jpg) 50% 50%;
  background-size: 25vw; }

.s2:last-child:before {
  margin: -4em 0 0;
  background: url("img/project.jpg") 50% 50%;
  background-size: 25vw; }

.services_content {
  background-color: aqua;
  text-align: center;
  vertical-align: middle;
  z-index: 10;
  position: absolute;
  transform: rotate(-15deg); }

.s3 {
  overflow: hidden;
  height: 50%;
  transform: skewY(15deg); }

.s3:before {
  display: block;
  height: 100%;
  transform: skewY(-15deg);
  content: ''; }

.s3:first-child:before {
  margin: 4em 0 0;
  background: url("img/colourTRI.jpg") 50% 50%;
  background-size: 25vw; }

.s3:last-child:before {
  margin: -4em 0 0;
  background: url("images/web.jpg") 50% 50%;
  background-size: 25vw; }

.services_main-container {
  background: #00bcd4;
  position: relative; }

.services_main-container:before {
  content: '';
  position: absolute;
  left: 0;
  top: -36px;
  width: 100%;
  height: 60px;
  background: #00bcd4;
  -webkit-transform: skewY(2.5deg);
  -moz-transform: skewY(2.5deg);
  -ms-transform: skewY(2.5deg);
  -o-transform: skewY(2.5deg);
  transform: skewY(2.5deg);
  -webkit-backface-visibility: hidden; }

input[type=text] {
  background-color: #000;
  color: #f0f0f0;
  border: none; }

input[type=email] {
  background-color: #000;
  color: #f0f0f0;
  border: none; }

input[type=mobile] {
  background-color: #000;
  color: #f0f0f0;
  border: none; }

textarea[type=comments] {
  background-color: #000;
  color: #f0f0f0;
  border: none; }

input[type=button], input[type=submit], input[type=reset] {
  background-color: #000;
  border: none;
  color: #f0f0f0;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer; }

.form input {
  display: block;
  margin-bottom: 3em; }

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

.c-1 {
  background: #f0f0f0;
  overflow: hidden;
  position: relative;
  min-height: 25vh; }

.c-1_alt {
  background: #1a1a1a;
  overflow: hidden;
  position: relative;
  min-height: 25vh; }

.c-2 {
  float: left;
  width: 40%;
  position: relative;
  color: #f0f0f0;
  min-height: 25vh;
  padding-left: 1vw; }

.c-2_alt {
  float: right;
  width: 40%;
  position: relative;
  color: #1a1a1a;
  min-height: 25vh; }

.bg-image_1 {
  position: absolute;
  width: 60%;
  top: 0;
  right: 0;
  bottom: 0;
  padding: 0;
  background-image: url("img/thumbnail_2.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  z-index: 0;
  min-height: 25vh; }
  @media (max-width: 768px) {
    .bg-image_1 {
      min-height: 35vh; } }

.bg-image_2 {
  position: absolute;
  width: 60%;
  top: 0;
  right: 40%;
  bottom: 0;
  padding: 0;
  background-image: url("img/light.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  z-index: 0;
  min-height: 25vh; }
  @media (max-width: 768px) {
    .bg-image_2 {
      min-height: 35vh; } }

.bg-image_3 {
  position: absolute;
  width: 60%;
  top: 0;
  right: 40%;
  bottom: 0;
  padding: 0;
  background-image: url("img/stage.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  z-index: 0;
  min-height: 25vh; }
  @media (max-width: 768px) {
    .bg-image_3 {
      min-height: 35vh; } }

.bg-image_4 {
  position: absolute;
  width: 60%;
  top: 0;
  right: 0;
  bottom: 0;
  padding: 0;
  background-image: url("img/audio.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  z-index: 0;
  min-height: 25vh; }
  @media (max-width: 768px) {
    .bg-image_4 {
      min-height: 35vh; } }

.bg-image_5 {
  position: absolute;
  width: 60%;
  top: 0;
  right: 0;
  bottom: 0;
  padding: 0;
  background-image: url("img/project.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  z-index: 0;
  min-height: 25vh; }
  @media (max-width: 768px) {
    .bg-image_5 {
      min-height: 35vh; } }

.bg-image_6 {
  position: absolute;
  width: 60%;
  top: 0;
  right: 40%;
  bottom: 0;
  padding: 0;
  background-image: url("img/cnc.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  z-index: 0;
  min-height: 25vh; }
  @media (max-width: 768px) {
    .bg-image_6 {
      min-height: 35vh; } }

section {
  position: relative;
  color: #fff; }

.diagonal {
  position: relative;
  z-index: 1; }

.diagonal_invert {
  position: relative;
  z-index: 1; }

.diagonal:after {
  right: 0;
  left: 40px;
  position: absolute;
  -webkit-transform: skewX(-15deg) rotate(180deg);
  -ms-transform: skewX(-15deg) rotate(180deg);
  transform: skewX(-15deg) rotate(180deg);
  content: "";
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #1a1a1a;
  color: #f0f0f0;
  z-index: -1; }
  @media (max-width: 768px) {
    .diagonal:after {
      min-height: 35vh; } }

.diagonal_invert:after {
  right: 0;
  left: 40px;
  position: absolute;
  -webkit-transform: skewX(15deg) rotate(180deg);
  -ms-transform: skewX(15deg) rotate(180deg);
  transform: skewX(15deg) rotate(180deg);
  content: "";
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #1a1a1a;
  color: #f0f0f0;
  z-index: -1; }
  @media (max-width: 768px) {
    .diagonal_invert:after {
      min-height: 35vh; } }

.diagonal2 {
  position: relative;
  z-index: 1; }

.diagonal2_invert {
  position: relative;
  z-index: 1; }

.diagonal2:after {
  right: 0;
  left: -40px;
  position: absolute;
  -webkit-transform: skewX(-15deg) rotate(180deg);
  -ms-transform: skewX(-15deg) rotate(180deg);
  transform: skewX(-15deg) rotate(180deg);
  content: "";
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
  color: #1a1a1a;
  z-index: -1; }
  @media (max-width: 768px) {
    .diagonal2:after {
      min-height: 35vh; } }

.diagonal2_invert:after {
  right: 0;
  left: -40px;
  position: absolute;
  -webkit-transform: skewX(15deg) rotate(180deg);
  -ms-transform: skewX(15deg) rotate(180deg);
  transform: skewX(15deg) rotate(180deg);
  content: "";
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
  color: #1a1a1a;
  z-index: -1; }
  @media (max-width: 768px) {
    .diagonal2_invert:after {
      min-height: 35vh; } }

.works {
  padding: 10px; }

@media (max-width: 768px) {
  .mob-height-services {
    min-height: 35vh; } }