h4, h5, h6 {
margin: 0;
}
html {
color: #666;
font-family: "Cormorant Garamond";
}
body {
font-size:20px;
}
a {
text-decoration:none;
color:inherit;
transition: 0.3s;
}
h1 {
font-family: Jost;
font-size: 40px;
line-height: 1;
}
h2 {
font-family: Jost;
font-size:45px;
margin: 0;
line-height:1;
}
h3 {
font-size:35px;
line-height:1;
}
iframe {
	width:100%;
	border: 0;
}
.mainhighlighted h1 {

background: #8A8376;
    padding: 10px;
}
#main {
    margin-top: 127px;
}
.mainhighlighted {
display:grid;
grid-template: "main main top"
"main main bot";
width:100%;
grid-template-columns: 30% 30% 40%;
grid-template-rows: 50% 50%;
}
.main-spot {
background: url(/sites/default/files/main-spot.jpg) no-repeat;
background-size:cover;
height:700px;
background-position: 100%;
grid-area:main;
}
.main-spot div {
width: 50%;
margin: 50px 0 0 50px;
}
.bottomspot {
background: #8A8376;
background-size:cover;
background-position: 0 90%;
grid-area:bot;
}
.bs-left {
width: 200px;
text-align: left;
margin: -30px 0% 0 0px;
float:left;
}
.bs-left svg{
	width:180pt;
	height:215pt;
}
.bs-right {
width: 56%;
text-align: right;
margin: 30px 7% 0 0;
float:right;
}
.bs-right h2,
.topspot h2{
font-size: 36px;
}
.topspot {
background: url(/sites/default/files/top-spot.jpg) no-repeat;
background-size:cover;
grid-area:top;
}


.topspot div{
	padding:35px 50px 0;
}
.partners {
	display:grid;
	gap:50px;
	margin:50px auto;
	grid-template-columns: 300px ;
	width:300px;
}
.newsrow {
	display:grid;
	grid-template-columns:300px 300px;
	gap:50px;
	width:650px;
}
.newsbody {
    overflow: hidden;
    background-color: #f0f0f0;
}
.title {
font-family: Jost;
font-weight: 600;
}
.blk {
padding: 80px 0;
text-align:center;
}
.fixed {
background-attachment:fixed;
background-size:cover;
}
.no-webp .aboutus-back {
background-image: url(/sites/default/files/back4.jpg);
}
.webp .aboutus-back {
background-image: url(/sites/default/files/back4.webp);
}
.no-webp .plan-back {
background-image: url(/sites/default/files/planningguideback.jpg);
}
.webp .plan-back {
background-image: url(/sites/default/files/planningguideback.webp);
}
.no-webp .turnkey-back {
background-image: url(/sites/default/files/turnkeyback.jpg);
}
.webp .turnkey-back{
background-image: url(/sites/default/files/turnkeyback.webp);
}
.pp-back {
background-image: url(/sites/default/files/planback.jpg);
}
.selfbuild-back {
background-image: url(/sites/default/files/selfbuildkits.jpg);
}
.reasonsend-back {
background-image: url(/sites/default/files/whylogendback.jpg);
}
.regs-back{
background-image: url(/sites/default/files/buildingregback.jpg);
}
.main {
margin-top: 125px;
}
.small {
font-size:22px;
}
.smedium {
font-size:25px;
}
.medium {
font-size:36px;
}
.large {
font-size:46px
}
.x-large {
font-size:56px;
}
.centre,
.user-login-form {
text-align: center;
}
.grey-back {
background: grey;
}
.green-back {
background: #8A8376;
}
.ltgrey-back {
background: #ddd;
}
.green {
color:#8dc540;
}
.white {
color:white;
}
.black {
color:black;
}
.g-recaptcha {
width: 304px;
margin: 0 auto;
clear: both;
}
.pager__items {
width: 800px;
margin: 0 auto;
display: flex;
}
.pager__item {
padding: 5px 15px;
background: black;
color: white;
border-radius: 50px;
margin: 20px;
}
.interior-fieldset {
border: 1px solid #159c5e;
margin: 15px 5%;
}
.form-item, .form-actions {
margin-top: 1em;
margin-bottom: 1em;
} 
.whatsincluded {
padding: 20px;
}
.clear { 
clear: both; 
}
.avrame-form {
clear:both;
width: 800px;
background: white;
display:grid;
margin: 50px auto;
text-align:center;
padding: 50px 0;
box-shadow: #00000054 20px 20px 35px;
}
.avrame-form input.form-radio {
width:20px;
}
.webform-options-display-buttons .form-item {
display: table;
width: 50%;
height: 50px;
margin: 1em auto;
}
.avrame-form label,
.avramelabel {
display:grid;
}
.avrame-form .description {
margin: 15px 0;
}
.avrame-form .details-title {
color: white;
background: #159c5e;
padding: 13px;
border-radius: 40px;
display: inline-block;
}
.avrame-form .field-suffix {
color: green;
}
.block-views-block-product-block-1 {
width:50%;
float: left;
}
.block-views-block-product-block-3,
.block-connect {
width: 25%;
float: left;
margin: 40px 0;
}
.form-submit:hover,
.form-submit:focus {
background: none;
color:#000;
cursor: pointer;
}
.button,
form input.form-submit {
margin: 5px auto;
display:inline-block;
padding: 20px 30px;
border: 2px solid;
font-size:22px;
z-index: 1;
border-radius: 40px;
font-weight: 300;
}
.button--wapasha {
background: #ffffff;
color: #555;
border-color:white;
text-align:center;
transition: background-color 0.3s, color 0.3s;
}
.button--inverted,
form input.form-submit {
background: #ECA779;
color: #fff;
border-color:#ECA779;
}
.button--wapasha::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
border-radius: inherit;
opacity: 0;
transform: scale3d(0.6, 0.6, 1);
transition: transform 0.3s, opacity 0.3s;
transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}
.button--inverted::before {
border-color: #8fc642;
}
.button--wapasha:hover {
background: none;
color: #fff;
}
.button--inverted:hover {
background: none;
color: #000;
}
.button--wapasha:hover::before {
transform: scale3d(1, 1, 1);
opacity: 1;
}
.services svg{
font-size: 70px;
color: white;
background: #ECA779;
padding: 15px;
border-radius: 20px;
transition: 0.5s;
}
.sliding-popup-bottom {
width: 100%;
color: white;
}
.eu-cookie-compliance-banner {
background:#ECA779;
}
.eu-cookie-compliance-buttons button {
cursor: pointer;
border: none;
margin: 1em 10px 0 0;
border-radius: 10px;
padding: 10px;
color: white;
text-shadow: none;
box-shadow: none;
vertical-align: middle;
font-family: "nanum gothic";
font-weight:300;
}
.eu-cookie-compliance-secondary-button {
background: #8cc540;
}
.eu-cookie-compliance-default-button {
background: #db2222;
}
.block-newheader{
width: 100%;
height: 125px;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
background-color: #8A8376;
transition: height 0.3s;
border-bottom: 2px solid black;
}
.headermenumob {
display: none;
}
.headermenu {
width: 1185px;
margin: 0 auto;
display: grid;
grid-template-columns: 240px 905px;
gap: 40px;
}
.headerlogo {
margin-top: 20px;
}
.block-newheader nav {
color: white;
font-size: 25px;
position: relative;
top: 90px;
}
.block-newheader nav a{
margin: 0 20px;
transition: 0.6s;
}
.block-newheader nav a:hover{
color: black;
}
.boutiquegallery {
width: 960px;
margin: 50px auto;
}
.gallerysplit {
display:grid;
grid-template-columns: 525px 415px;
gap:20px
}
.block-featured {
padding: 28% 0;
background-size: cover;
}
.no-webp .block-featured {
background-image: url(/sites/default/files/featured.jpg);
}
.webp .block-featured {
background-image: url(/sites/default/files/featured.webp);
}
.block-footercopyright {
background: #ECA779;
padding: 5px 0;
}
.block-views-block-latest-news-block-1 .views-col {
background: #F9EDDB;
padding: 0 0 35px 0;
}
.block-views-block-latest-news-block-1 .views-row {
float: unset;
width: 250px;
margin: 25px auto;
}
.viewsrow {
display: grid;
grid-template-columns: 250px 250px 250px 250px;
gap: 50px;
width: 1150px;
margin: 30px auto;
}
.viewscol {
background:#F9EDDB;
box-shadow: #0000005e 20px 15px 20px;
}
.topgap img{
margin-top:20px;
}
.planningnotes {
color: #d4a135;
font-style: italic;
}
.cbp-so-scroller {
overflow: hidden;
}
.cbp-so-section:before,
.cbp-so-section:after,
.cbp-so-side:before,
.cbp-so-side:after {
content: " ";
display: table;
}
.cbp-so-section:after,
.cbp-so-side:after {
clear: both;
}
.cbp-so-section p {
font-size: 24px;
font-weight: 300;
line-height: 28px;
}
.cbp-so-side {
width: 42%;
float: left;
margin: 3em 4%;
overflow: hidden;
min-height: 12em;
}
.cbp-so-side-right {
text-align: left;
}
.cbp-so-side-left {
text-align: right;
}
.cbp-so-side-right img {
float: left;
}
.cbp-so-side-left img {
float: right;
}
.cbp-so-init .cbp-so-side {
opacity: 0;
transition: none;
}
.cbp-so-init .cbp-so-side-left {
transform: translateX(-80px);
}
.cbp-so-init .cbp-so-side-right {
transform: translateX(80px);
}
.cbp-so-animate .cbp-so-side-left,
.cbp-so-animate .cbp-so-side-right {
transition: transform 0.5s, opacity 0.5s;
transform: translateX(0px);
opacity: 1;
}
.search-block-form form {
width:300px;
margin:0 auto;
}
.grid {
display:grid;
width: 810px;
grid-template-columns:380px 380px;
margin: 50px auto;
gap:50px
}
.grid figure {
position: relative;
overflow: hidden;
margin: 0;
height: 285px;
background: #2f3238;
cursor: pointer;
}
.grid figure img {
width: 380px;
height: 285px;
transition: opacity 1s, transform 1s;
backface-visibility: hidden;
position: relative;
opacity: 0.8;
}
.grid figure figcaption {
padding: 20px;
color: #fff;
text-transform: uppercase;
backface-visibility: hidden;
}
.grid figure figcaption,
.grid figure figcaption > a {
position: absolute;
top: 0;
left: 0;
width: 340px;
height:245px;
text-align: left;
}
.grid figure figcaption > a {
z-index: 1000;
text-indent: 200%;
white-space: nowrap;
opacity: 0;
}
.cathead {
padding: 0.5em 0;
font-size: 40px;
text-align:center;
}
.grid figure p {
letter-spacing: 1px;
display: inline-block;
margin: 0 0 0.25em;
padding: 0.4em 1em;
background: #fff;
color: #2f3238;
text-transform: none;
font-weight: 500;
transition: opacity 0.35s, transform 0.35s;
transform: translate3d(-360px,0,0);
}
.effect-julia p:first-child {
transition-delay: 0.15s;
}
.effect-julia p:nth-of-type(2) {
transition-delay: 0.1s;
}
.effect-julia p:nth-of-type(3) {
transition-delay: 0.05s;
}
.effect-julia:hover p:first-child {
transition-delay: 0s;
}
.effect-julia:hover p:nth-of-type(2) {
transition-delay: 0.05s;
}
.effect-julia:hover p:nth-of-type(3) {
transition-delay: 0.1s;
}
.effect-julia:hover img {
opacity: 0.4;
transform: scale3d(1.1,1.1,1);
}
.effect-julia:hover p {
opacity: 1;
transform: translate3d(0,0,0);
}
.agents {
width:1000px;
display:grid;
margin: 0 auto;
padding-top:30px;
grid-template-columns:50% 50%;
}
.form-text,
.form-email,
.form-select,
.form-textarea,
.form-search {
border-radius: 4px;
border: none;
width: 90%;
height: 53px;
margin: 10px 5%;
background: #eee;
font-family: 'Nanum Gothic';
font-size: 20px;
}
.webform-submission-test-form .form-item {
width:50%;
float:left;
}
.webform-submission-test-form .last {
width: 80%;
margin: 20px 10%;
}
.webform-submission-test-form .form-item {
 margin-top: unset; 
 margin-bottom: unset;
}
.webform-submission-test-form .form-textarea {
height: 197px;
}
.avrame-price {
border: none;
text-align: center;
width:120px;
background:white;
color: green;
font-weight: 600;
}
.viewsdes {
	padding:20px 0;
}
.share-container {
margin-top:25px;
}
.fournine {
display:grid;
grid-template-columns: 30% 30% 30%;
gap:5%;
}
.figurestwo {
display:grid;
grid-template-columns: 45% 45%;
gap:10%;
}
.fournine img,
.figurestwo img,
.form-item-description {
width:100%;
}
.buildingarea {
margin: 200px 20% 0;
background: #eee;
text-align: center;
clear: both;
padding: 2%;
border-radius:50px;
}
table,
th,
td {
border: 1px solid grey;
}
.blocktext{
width:50%;
margin:0 25%;
}
a:hover,
a:focus,
a:active {
  text-decoration:none;
}
.webform-submission-test-form {
margin: 0 25%;
}
.services {
display:grid;
grid-template-columns: 236px 236px 236px 236px 236px;
gap:20px;
font-family: Jost;
font-weight:600;
width: 1260px;
margin: 0 auto;
}
.services img {
width: 100px;
height:100px;
display: inline-block;
vertical-align: middle;
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
transition-duration: 0.5s;
}
.services img:hover,
.services svg:hover {
transform: scale(1.2);
transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
}
.social-icons-top svg{
padding:10px;
}
.social-icons-top {
display: block;
}
.block-footer {
border-top: 8px solid #ECA779;
}
.social{
display: inline;
}
.block-footer svg,
.block-socialmedia svg {
margin: 0 20px;
transition: .3s;
}
.block-footer svg:hover,
.block-socialmedia svg:hover {
color:#F9EDDB;
}
.block-footer img{
margin: 30px 0;
}
.footerlinks {
width: 1350px;
margin: 2% auto;
display:inline-table;
}
.footerlinks a{
padding: 0 30px;
}
.footerlinks a:hover,
.jpfoot a:hover,
.social-icons-top svg:hover {
color: black;
}
.relatedblock {
display:inline-grid;
margin: 80px auto 0;
width: 100%;
}
.form-item .form-radio,
.form-item .form-checkbox {
  background: none;
  border: none;
}
.griddes {
padding:10px 20px;
}
.griddes .views-label {
float:left;
}
@media screen and (max-width: 1450px) {
.cbp-so-side-right img,
.cbp-so-side-left img {
width:100%;
height:auto;
}
.cbp-so-section p {
font-size: 20px;
line-height: 24px;
}
}
@media screen and (max-width: 1379px) {
.services div {
font-size: 20px;
}
.footerlinks {
width: 500px;
}
.footerlinks a {
float: none;
display: grid;
margin: 10px 0;
}
.bs-left {
    width: 130px;
}
.bs-right {
    width: 60%;
}
.bs-left svg {
	width:130pt
}
}
@media screen and (max-width: 1280px) {
.services {
grid-template-columns: 236px 236px 236px;
width: 748px;
}
.headermenu {
width: 80%;
display: grid;
grid-template-columns: 100%;
gap: 0;
}
.block-newheader nav {
font-size: 18px;
position: relative;
top: 0;
text-align:center;
}

.headerlogo {
margin: 5px auto;
}
.gallerysplit {
display:grid;
grid-template-columns: 55% 44%;
gap:1%;
}
.boutiquegallery {
width: 90%;
margin: 10px 5%;
}
.boutiquegallery img{
width:100%;
}
.page, 
.region {
margin: 0;
}
.gutter {
margin-left: 5px;
margin-right: 5px;
}
.viewsrow {
grid-template-columns: 250px 250px 250px;
width: 850px;
}
}
@media screen and (max-width: 1166px) {
.topspot .button {
padding: 15px 10px;
}
}

@media screen and (max-width: 1100px) {
.page-design-principles .content {
width:90%;
margin:0 5%;
}
.agents {
width:300px;
grid-template-columns:300px;
}
}

@media screen and (max-width: 999px) {
.mainhighlighted {
        grid-template:
        "main main"
        "top bot";
        grid-template-columns: 50% 50%;
        grid-template-rows: 550px 350px;
    }
}


@media screen and (max-width: 960px) {
.cbp-so-side,
.headermenu {
width: 100%;
}
.block-newheader {
height:90px;
}
#main {
    margin-top: 92px;
}
.topspot div {
    padding: 35px 35px 0;
}
.strap {
	background:#ECA779;
}
    .bs-left {
        width: 125px;
}
.cbp-so-side {
width:90%;
margin:15px 5%;
}
.grid {
width: 380px;
grid-template-columns: 380px;
gap: 100px;
}
.fournine div {
width: 48%;
}
.main-spot div {
margin: 50px 25% 0 25%;
}
.grid figure {
margin: 10px auto;
float:none;
}
.blocktext {
width: 90%;
margin: 0 5%;
}
.headermenumob {
display:grid;
grid-template-columns: 15% 70% 15%;
}
.headermenu {
display: none;
}
.headerlogo {
margin: 10px auto;
}
.headerlogo img {
width: 200px;
}
.block-views-block-product-block-3,
.block-connect,
.panelintro {
width: 50%;
}
.block-views-block-product-block-1 {
width: 80%;
margin: 0 10%;
}
.mobilemenu {
position: relative;
color: #ffffea;
text-align: center;
top: 25px;
height: 50px;
display: block;
}
.mobilemenu svg{
font-size: 50px;
}
.webform-submission-test-form {
width: 80%;
margin: 0 10%;
float: left;
}
.container {
text-align: center;
}
.cbp-so-side-right,
.cbp-so-side-left {
 text-align: center;
}
.cbp-so-side-right img,
.cbp-so-side-left img {
float: none;
width:100%;
}
.viewsrow {
grid-template-columns: 250px 250px;
width: 550px;
}
.pager__items {
width: 120px;
    margin: 0 auto;
    display: inline-block;
}
}
@media screen and (max-width: 767px) {

.main {
margin-top: 90px;
}
.webform-submission-test-form .form-item{
width: 90%;
margin: 0 5%;
}
.services {
grid-template-columns: 236px 236px;
width: 492px;
}
.buildingarea {
width: 70%;
margin: 10% 15%;
}
.widetable {
font-size:10px;
}
.figurestwo div,
.fournine div{
width: 80%;
margin: 5% 10%;
}
.mobilemenu svg {
font-size: 35px;
}
.headerlogo img {
width: 160px;
}
.block-aboutus img {
width:210px;
}
figure.effect-julia img {
height: unset;
width: 100%;
}
.form-item input,
.form-item select,
.form-item textarea {
width: 60%;
margin: 10px 0;
}
.webform-submission-test-form .form-item input, 
.webform-submission-test-form .form-item select, 
.webform-submission-test-form .form-item textarea {
width: 90%;
margin: 10px 5%;
}
.mainhighlighted {
        grid-template:
        "main"
        "top"
        "bot";
        grid-template-columns: 100%;
        grid-template-rows: 450px 350px 350px;
    }
.footerlinks {
width: 90%;
margin: 30px 5%;
}
.bigfig,
.block-views-block-product-block-3,
.block-connect {
width: 100%;
}
}
@media screen and (max-width: 600px) {
.webform-submission-test-form {
width: 90%;
margin: 0 5%;
}
    .main-spot div {
		width:80%;
        margin: 50px 10% 0 10%;
    }
.viewsrow {
grid-template-columns: 250px;
width: 250px;
}
.block-footer img{
width: 300px;
height: 100%;
}
}
@media screen and (max-width: 500px) {
.services {
grid-template-columns: 236px;
width: 236px;
}
.panelintro {
width:80%;
margin: 0 10%;
}
}
@media screen and (max-width: 450px) {
.grid {
width: 300px;
grid-template-columns: 300px;
}
.grid figure {
height: 225px;
}
.grid figure figcaption {
width: 260px;
height: 185px;
}
.grid figure figcaption a {
width: 300px;
height: 225px;
}
.cathead {
font-size: 34px;
}
.x-large {
    font-size: 42px;
}
}
@media screen and (max-width: 380px) {
.smedium {
    font-size: 19px;
}
    .bs-left {
        width: 80px;
    }
	.bs-right {
        width: 65%;
}