/*@import url('https://fonts.googleapis.com/css?family=Comfortaa:400,700|Corben:400,700|Happy+Monkey');*/ @font-face { font-family: 'Gotham Bold'; src: url('gotham-book.ttf') format("truetype"); font-weight: 700; } @font-face { font-family: 'Gotham'; src: url('gotham-book.otf') format("opentype"); font-weight: 400; } @font-face { font-family: 'Gotham'; src: url('gotham-light.ttf') format("truetype"); font-weight: 300; } @font-face { font-family: 'Gotham'; src: url('gotham-thin.otf') format("opentype"); font-weight: 100; } html,body {margin: 0; padding: 0; width: 100%; height: 100%;} html {box-sizing: border-box;} *, *:before, *:after {box-sizing: inherit;} :focus {outline: none;} .nowrap {white-space: nowrap;} @-ms-viewport {width: device-width;} body, p, th, td, a, li, div, button, label, select, textarea, input {font-size: 15px; line-height: 120%; font-family: 'Gotham', Arial, Helvetica, sans-serif;} h1, h2, h3, h4, h5, h6 { font-family: 'Gotham', Arial, Helvetica, sans-serif;} h1.larger {font-size: 28px; line-height: 120%;} h1 {font-size: 24px; line-height: 120%;} h2 {font-size: 20px; line-height: 120%;} h3 {font-size: 18px; line-height: 120%;} h4 {font-size: 16px; line-height: 120%;} h5 {font-size: 14px; line-height: 120%;} h6 {font-size: 12px; line-height: 120%;} a {text-decoration: none; cursor: pointer; transition: color 0.33s;} a:hover {text-decoration: none;} #container .bulleticon {background: url('images/square.png') no-repeat center;} #container .contphoto {background: url('images/contact photo.jpg') no-repeat center / cover;} /* Residential Photos */ #container .lakelandphoto {background: url('images/lakeland/lakeland drive main photo 1.jpg') no-repeat center / cover;} #container .lakelandphoto_sm {background: url('images/lakeland/lakeland drive main photo 1_sm.jpg') no-repeat center / cover;} #container .draperyphoto {background: url('images/drapery/drapery main photo 1.jpg') no-repeat center / cover;} #container .draperyphoto_sm {background: url('images/drapery/drapery main photo 1_sm.jpg') no-repeat center / cover;} #container .chantryphoto {background: url('images/chantry-drive-ilkley/main residential photo.jpg') no-repeat center;} #container .chantryphoto_sm {background: url('images/chantry-drive-ilkley/main residential photo_sm.jpg') no-repeat center / cover;} #container .beckfootphoto {background: url('images/beckfoot/beckfoot main photo 1.jpg') no-repeat center / cover;} #container .beckfootphoto_sm {background: url('images/beckfoot/beckfoot main photo 1_sm.jpg') no-repeat center / cover;} #container .newdesignphoto {background: url('images/newbuild/newbuild.jpg') no-repeat center / cover;} #container .newdesignphoto_sm {background: url('images/newbuild/newbuild_sm.jpg') no-repeat center / cover;} #container .printingphoto {background: url('images/printingpress/printing press main photo 1.jpg') no-repeat center / cover;} #container .printingphoto_sm {background: url('images/printingpress/printing press main photo 1_sm.jpg') no-repeat center / cover;} #container .newdesignphoto {background: url('images/newbuild/newbuild.jpg') no-repeat center / cover;} #container .newdesignphoto_sm {background: url('images/newbuild/newbuild_sm.jpg') no-repeat center / cover;} /* Office / Commercial Photos */ #container .officep1 {background: url('images/office-commercial/officep1.jpg') no-repeat center / cover;} #container .officep1_sm {background: url('images/office-commercial/officep1_sm.jpg') no-repeat center / cover;} #container .officep2_sm {background: url('images/office-commercial/officep2_sm.jpg') no-repeat center / cover;} #container .officep3_sm {background: url('images/office-commercial/officep3_sm.jpg') no-repeat center / cover;} #container .officep4_sm {background: url('images/office-commercial/officep4_sm.jpg') no-repeat center / cover;} /* Industrial Photos */ #container .industrialp1 {background: url('images/industrial/industrialp1.jpg') no-repeat center / cover;} #container .industrialp1_sm {background: url('images/industrial/industrialp1_sm.jpg') no-repeat center / cover;} #container .industrialp2_sm {background: url('images/industrial/industrialp2_sm.jpg') no-repeat center / cover;} #container .industrialp3_sm {background: url('images/industrial/industrialp3_sm.jpg') no-repeat center / cover;} /* Interior Photos */ #container .manahattasphoto {background: url('images/manahatta/manahatta sheffield main photo 1.jpg') no-repeat center / cover;} #container .manahattasphoto_sm {background: url('images/manahatta/manahatta sheffield main photo 1_sm.jpg') no-repeat center / cover;} #container .manahattabphoto {background: url('images/manahatta/manahatta birmingham main photo 1.jpg') no-repeat center / cover;} #container .manahattabphoto_sm {background: url('images/manahatta/manahatta birmingham main photo 1_sm.jpg') no-repeat center / cover;} #container .manahattaedinphoto {background: url('images/manahatta/manahatta edin main photo 1.jpg') no-repeat center / cover;} #container .manahattaedinphoto_sm {background: url('images/manahatta/manahatta edin main photo 1_sm.jpg') no-repeat center / cover;} #container .manahattanottphoto {background: url('images/manahatta/manahatta nott main photo 1.jpg') no-repeat center / cover;} #container .manahattanottphoto_sm {background: url('images/manahatta/manahatta nott main photo 1_sm.jpg') no-repeat center / cover;} #container .schofieldphoto {background: url('images/scho-bar-manchester/photo 1 and main photo.jpg') no-repeat center / cover;} #container .schofieldphoto_sm {background: url('images/scho-bar-manchester/photo 1 and main photo_sm.jpg') no-repeat center / cover;} #container .banyanNphoto {background: url('images/banyan-newcastle/banyan newcastle main photo 1.jpg') no-repeat center / cover;} #container .banyanNphoto_sm {background: url('images/banyan-newcastle/banyan newcastle main photo 1_sm.jpg') no-repeat center / cover;} #container .manahattaphoto {background: url('images/manahatta/manahatta deansgate main photo 1.jpg') no-repeat center / cover;} #container .manahattaphoto_sm {background: url('images/manahatta/manahatta deansgate main photo 1_sm.jpg') no-repeat center / cover;} #container .boxleedsphoto {background: url('images/boxleeds/box leeds main photo 1.jpg') no-repeat center / cover;} #container .boxleedsphoto_sm {background: url('images/boxleeds/box leeds main photo 1_sm.jpg') no-repeat center / cover;} #container .boxnottphoto {background: url('images/boxnottingham/box nott main photo 1.jpg') no-repeat center / cover;} #container .boxnottphoto_sm {background: url('images/boxnottingham/box nott main photo 1_sm.jpg') no-repeat center / cover;} #container .boxsheffphoto {background: url('images/boxsheffield/box sheff main photo 1.jpg') no-repeat center / cover;} #container .boxsheffphoto_sm {background: url('images/boxsheffield/box sheff main photo 1_sm.jpg') no-repeat center / cover;} #container .boxbirminghamphoto {background: url('images/boxbirmingham/box picture 4.jpg') no-repeat center / cover;} #container .boxbirminghamphoto_sm {background: url('images/boxbirmingham/box picture 4_sm.jpg') no-repeat center / cover;} #container .banyanSphoto {background: url('images/banyan-spinningfields/banyan spinningfields main photo 1.jpg') no-repeat center / cover;} #container .banyanSphoto_sm {background: url('images/banyan-spinningfields/banyan spinningfields main photo 1_sm.jpg') no-repeat center / cover;} #container .ilkley1 {background: url('images/news/ilkley main photo 1.jpg') no-repeat center / cover;} #container .ilkley1_sm {background: url('images/news/ilkley main photo 1_sm.jpg') no-repeat center / cover;} /* Heritage Projects Photos */ #container .heritagem_sm {background: url('images/heritage-projects/main photo_sm.jpg') no-repeat bottom / cover;} #container .heritagep1 {background: url('images/heritage-projects/main photo.jpg') no-repeat bottom / cover;} #container .heritagep1_sm {background: url('images/heritage-projects/heritagep1_sm.jpg') no-repeat center / cover;} #container .heritagep2_sm {background: url('images/heritage-projects/heritagep2_sm.jpg') no-repeat center / cover;} #container .heritagep3_sm {background: url('images/heritage-projects/heritagep3_sm.jpg') no-repeat center / cover;} #container .heritagep4_sm {background: url('images/heritage-projects/heritagep4_sm.jpg') no-repeat center / cover;} /* Latest Newa Photos */ #container .lnp1 {background: #fff url('images/news/main photo.jpg') no-repeat center / cover;} #container .lnp1_sm {background: #fff url('images/news/main photo_sm.jpg') no-repeat center / cover;} #container .lnp2_sm {background: #fff url('images/news/lnp2_sm.jpg') no-repeat center / cover;} #container .lnp3_sm {background: #fff url('images/news/lnp3_sm.jpg') no-repeat center / cover;} #container .lnp4_sm {background: #fff url('images/news/lnp4_sm.jpg') no-repeat center / cover;} #container .lnp5_sm {background: #fff url('images/news/lnp5_sm.jpg') no-repeat center / cover;} #container .bulleticon {width: 14px; height: 14px;} body {background: #252729;} #container {width: 100%; max-width: 1024px; margin: auto; padding: 20px; opacity: 0; transition: opacity 0.2s;} #header {width: 100%; margin: 0 0 20px 0;} #banner, #caption, #captions {width: 100%; margin: 20px 0;} #spacer {width: 100%; margin: 40px 0;} #header {display: flex; flex-wrap: no-wrap; flex-direction: column; justify-content: space-between; align-items: center;} #header .logo {font-size: 0; margin: 0 0 20px 0; display: block;} #header .logo img {width: 100%;} #header .menu {display: flex; flex-wrap: no-wrap; flex-direction: row; justify-content: center; align-items: center;} #header .menu li {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: flex-start; align-items: center;} #header .menu li a {display: flex; flex-wrap: no-wrap; flex-direction: row; justify-content: flex-start; align-items: center;} #header .menu {margin: 0; padding: 0; list-style: none;} #header .menu li {margin: 0 30px 0 0; padding: 0px;} #header .menu li:last-child {margin: 0} #header .menu li .link {font-weight: 700; color: #fff; font-size: 16px; margin-left: 20px; transition: color 0.2s;} #header .menu li .link:hover {color: #55aa81;} @media screen and (min-width: 720px) { #header {flex-direction: row-reverse;} #header .logo {flex: 1 40%; margin: 0 0 0 40px;} #header .menu {flex: 1 60%; justify-content: flex-start;} #header .menu li {margin-right: 40px;} #header .menu li .link {font-size: 20px; white-space: nowrap;} } #banner {padding-top: 50%; position: relative; display: block;} #banner.half {padding-top: 50%;} #banner .hover {position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: background-color 0.5s;} #banner .hover:hover {background: rgba(85, 170, 129, 0.5);} #banner .tag1 {font-size: 14px;} #banner .tag2 {font-size: 10px; text-align: right;} #banner .tags {position: absolute; bottom: 10px; left: 10px; padding: 5px 10px; color: #fff; font-weight: 400; text-shadow: 1px 0px 1px #000, 0px 1px 1px #000, -1px 0px 1px #000, 0px -1px 1px #000, 0 0 10px #000;} @media screen and (min-width: 640px) { #banner.half {padding-top: 33.33%;} #banner .tag1 {font-size: 20px;} #banner .tag2 {font-size: 16px;} #banner .tags {bottom: 20px; left: 20px; padding: 10px 20px;} } #caption {width: 100%; padding: 5px; color: #fff;} #caption ul {margin: 0; padding: 5px 10px; list-style: none;} #caption li {margin: 0; padding: 10px 0px 10px 50px; position: relative;} #caption li span {margin-left: 64px;} #caption li:before {content: ""; width: 14px; height: 14px; position: absolute; top: 12px; left: 0; background: url('images/square.png') no-repeat center;} @media screen and (min-width: 640px) { #caption ul {padding: 10px 20px;} } #spacer .scroller { display: flex; flex-wrap: no-wrap; justify-content: center; align-items: center; flex-direction: row; padding: 40px 0;} #spacer .scroller .leftside {flex: 1 50%; display: flex; flex-wrap: no-wrap; justify-content: flex-end; align-items: center; flex-direction: row; padding: 10px;} #spacer .scroller .rightside {flex: 1 50%; display: flex; flex-wrap: no-wrap; justify-content: flex-start; align-items: center; flex-direction: row; padding: 10px;} #spacer .scroller .leftside a { display: flex; flex-wrap: no-wrap; justify-content: flex-start; align-items: center; flex-direction: row-reverse;} #spacer .scroller .rightside a { display: flex; flex-wrap: no-wrap; justify-content: flex-start; align-items: center; flex-direction: row;} #spacer .scroller .text {color: #ffffff; font-weight: 700; font-size: 20px; transition: color 0.2s; padding: 0 10px;} #spacer .scroller .text:hover {color: #55aa81;} #captions h1.larger {margin: 0; line-height: 100%; color: #fff;} #captions .caption .image {min-height: 192px; position: relative; overflow: hidden; margin-bottom: 20px;} #captions .caption .image div {position: absolute; top: 0; left: 0; width: 100%; height: 100%;} @media screen and (min-width: 640px) { #captions .caption {display: flex; flex-flow: row wrap; justify-content: space-between; align-content: space-between;} #captions .caption div.image {width: 35%; margin-bottom: 0;} #captions .caption div.text {width: 63%;} } #captions .caption .text {display: flex; flex-wrap: no-wrap; flex-direction: column; justify-content: space-between; align-items: flex-start;} #captions .caption .text h1 {color: #000; margin: 0; line-height: 100%;} #captions .caption .text p {color: #000;} #captions .caption .text span.link {display: flex; flex-wrap: no-wrap; flex-direction: row; justify-content: flex-start; align-items: center;} #captions .caption .text span.link div {font-weight: 700; color: #000; font-size: 20px;} #captions .caption .text .bulleticon {margin-right: 10px;} #captions .captionouter {background: #fff; padding: 20px; transition: background-color 0.5s; font-size: 0; margin: 1% 0} #captions .captionouter:hover {background: rgba(85, 170, 129, 0.5);} #contactouter {padding: 20px; font-size: 0; margin: 1% 0} #contact .image {min-height: 192px; position: relative; overflow: hidden; margin-bottom: 20px;} #contact .image div {position: absolute; top: 0; left: 0; width: 100%; height: 100%;} @media screen and (min-width: 640px) { #contact {display: flex; flex-flow: row wrap; justify-content: space-between; align-content: space-between;} #contact .image {width: 35%; margin-bottom: 0;} #contact .text {width: 63%;} } #contact .text {display: flex; flex-wrap: no-wrap; flex-direction: column; justify-content: space-between; align-items: flex-start;} #contact .text span.link {display: flex; flex-wrap: no-wrap; flex-direction: row; justify-content: flex-start; align-items: center;} #contact .text span.link div {font-weight: 700; color: #fff; font-size: 16px;} #contact .text span.link a {font-weight: 700; color: #fff; font-size: 16px;} #contact .text span.link a:hover {color: #55aa81;} #contact .text span.link span {white-space: nowrap;} #contact .text .bulleticon {margin-right: 10px;} #contdetails {margin: 0; padding: 0; list-style: none;} #contdetails li {margin: 0; padding: 0 0 20px 0;} #contdetails {display: flex; flex-wrap: no-wrap; flex-direction: column; justify-content: flex-start; align-items: flex-start;} #contdetails li {display: flex; flex-wrap: no-wrap; flex-direction: row; justify-content: flex-start; align-items: flex-start;} #contdetails li {color: #fff; font-weight: bold;} #contdetails a {color: #fff;} #contdetails a:hover {color: #55aa81;} #contdetails .bulleticon {margin: 3px 10px 0 0;} @media screen and (min-width: 860px) { #contdetails {flex-direction: row; justify-content: space-between; align-items: flex-start;} } #footer {width: 100%; max-width: 1024px; margin: auto;} #footer div {font-size: 14px; color: #aaa; padding: 4px; text-align: center;} @media screen and (min-width: 600px) { #footer {display: flex; flex-wrap: no-wrap; flex-direction: row; justify-content: space-between; align-items: center;} }