@font-face { font-family: AssistantVariable; src: url(/library/fonts/Assistant/Variable.otf) format("opentype"); }

* { background-repeat: no-repeat; background-position: center center; box-sizing: border-box; }
body {margin: 0 auto;padding: 0px;width: 100%;max-width: 1400px;height: auto;background-color: var(--white);color: var(--text);font-family: AssistantVariable, sans-serif; font-size: 100%;line-height: 1.2;text-rendering: optimizeLegibility;-webkit-font-smoothing: antialiased;}
.layoutmiddle {margin: 50px 20px 0 20px;min-height: 57vh;}

fieldset { padding: 0px; margin: 0px; border: none; }
input, textarea, select { font-size: 90%; background: transparent; border: solid var(--text) 1px; padding: 5px; color: var(--text); box-sizing: border-box; font-family: Arial; }
input[type=text], input[type=password]  { height: 30px; }
input[type=button], input[type=submit] { cursor: pointer; background-color: var(--text); color: var(--white); padding: 10px 20px 10px 20px; }
select { height: 30px; padding-right: 30px; background-image: none; background-repeat: no-repeat; background-position: right 10px center; }
.errors, .message {color: red; margin-bottom: 20px;}


strong { font-weight: normal; font-family: AssistantVariable; }
table { border-spacing: 0px; }
td, th { padding: 0px; text-align: left; vertical-align: top; }
.hidden, .spacer { display: none; }

a { color: var(--text); text-decoration: none; font-weight: normal; }
ul, ol { padding: 0px; margin: 0px; }
li { list-style-type: none; vertical-align: top; }
h1, h2, h3, h4, h5, h6 { margin: 0px; color: var(--text); }
h1, h1>span  {margin-bottom: 30px;font-size: 130%;text-transform: uppercase;}
h2, h2>span {margin-bottom: 40px; font-size: 100%; text-transform: uppercase; font-family: AssistantAssistant, sans-serif; font-weight: 400; }
p, label { padding: 0px 0px 20px 0px; margin: 0px; font-family: AssistantAssistant, sans-serif; font-weight: 100; color: var(--text); font-size: 97%;}



:root
{
    --white: #ffffff;
    --text: #2a353c;
    --subtext: #4A4A4A;
    --gray: #E0E0E0;
}

/* Header */
.layoutheader { max-width: 1400px;  margin: 0 auto;top: 0; left: 0; right: 0; height: 100px; display: flex; align-items: center; justify-content: space-between; background-color: var(--white); z-index: 1000; padding: 0 20px 0 15px; }
.layoutheader_inner { display: flex; width: 100%; justify-content: space-between; align-items: center; }  
.layoutheader_inner .logo img { width: 250px; height: auto; }  
.layoutheader_inner .nav_simple ul { display: flex; justify-content: flex-end; align-items: center; gap: 20px; } 
.layoutheader_inner .nav_simple ul li a {text-transform: uppercase;font-size: 120%;font-weight: 600;}


@media(min-width: 769px) {
    .layoutheader .toggle {display: none;} 
}

@media(max-width: 768px) {
    .layoutheader .toggle {position:absolute; top: 32px; right:30px; cursor:pointer; }
    /* .layoutheader .toggle i {font-size: 250%; color: var(--black);} */
    .layoutheader .toggleon ul {display:block;position: absolute;top: 100px;right: 0px;width: 100%;background-color: var(--white);z-index: 10000;text-align: center; height: 100vh; padding-top: 5%;}
    .layoutheader .toggleon li {padding: 20px 0px;}
    .layoutheader .toggleon li a { color: var(--text); opacity: 1 !important; font-size: 120%;}
    .layoutheader .toggle i { font-size: 180%; color: var(--subtext); transition: transform 0.3s ease-in-out; margin-top: 4px; }
    #nav-9.toggleon .toggle i { transform: rotate(90deg); }
    .layoutheader .toggleoff ul {display:none;}
}

@media(max-width: 425px) {
    .layoutheader_inner .logo img { width: 150px; height: auto; }  
}



/* Footer */
.layoutfooter { text-align: center; font-size: 90%; margin-top: 50px;}
.layoutfooter_inner .nav_linklist ul li {height: 40px; width: 40px; margin: 0 auto; }
.layoutfooter_inner .nav_linklist ul li a i {display: block; font-size: 180%; color: var(--text);}
.layoutfooter_inner .credits p {padding-bottom: 8px;}

.layoutcredits {text-align: center; margin-bottom: 10px;}
.layoutcredits .beachshore {font-size: 80%; color: var(--text); padding-top: 10px; color: var(--subtext);}
.layoutcredits .beachshore, .layoutcredits .beachshore a  {  color: var(--subtext);}


/* About */
.about {text-align: center;max-width: 1000px;margin: 0 auto;min-height: 65vh; display: flex;flex-direction: column;align-items: center;}
.about h1 {margin-bottom: 40px;}
.about .pagesubtitle_inner {font-family: AssistantAssistant, sans-serif; font-size: 110%; }




/* Home */
.home .pagecomponents_inner { display: flex; gap: 8px;}
.home .pagecomponents_inner .images_component {width: 100%;}
.home .image {margin-bottom: 3px;}
.home .image img {max-width: 100%; height: auto;}

@media(max-width: 600px) {
    .home .pagecomponents_inner { display: flex; flex-direction: column;}
}


/* Projects page */
.projects .pagecomponents_inner {display: flex; flex-wrap: wrap; gap: 20px;}
.projects .pagecomponents_inner .util_textbox { width: calc((100% - 40px) / 3); flex: 0 0 auto; box-sizing: border-box; }
.projects .pagecomponents_inner .util_textbox_inner { display: flex; flex-direction: column;}
.projects .pagecomponents_inner .util_textbox_inner .imagetop { width: 100%; height: 350px;  background-size: cover; background-position: center center;}
.projects .pagecomponents_inner .util_textbox_inner .content {display: none;}
.projects .pagecomponents_inner .util_textbox_inner h2, .visualisation .feat_image div h2 { order: 2; font-size: 100%; text-transform: uppercase; margin-top: 10px; font-weight: lighter;}

.visualisation .feat_image {display: flex; flex-wrap: wrap; gap: 20px;}
.visualisation .feat_image div { width: calc((100% - 40px) / 3); flex: 0 0 auto; box-sizing: border-box; }
.visualisation .feat_image div a {display: block; width: 100%; height: 350px;  background-size: cover; background-position: center center;}
.visualisation .feat_image div h1 { margin-top: 10px;}

@media (max-width: 1000px) {
    .projects .pagecomponents_inner .util_textbox, .visualisation .feat_image div { width: calc((100% - 20px) / 2);}
}

@media (max-width: 600px) {
    .projects .pagecomponents_inner .util_textbox, .visualisation .feat_image div {width: 100%;}
}


/* Project */
.project p {padding-bottom: 10px;}
.project .pagetitle {font-size: 100%; text-transform: uppercase; margin-top: 10px; max-width: 1000px; margin: 0 auto 20px auto; }
.project .subtitle {font-size: 100%;font-weight: lighter;margin: 0 auto 30px auto;max-width: 1000px;}
.project .projecttxt {display: flex; gap: 20px; max-width: 1000px; margin: 0 auto 50px auto;}
.project .projecttxt .pagecontent {flex: 1;}

.project .pageheader .pagebanner_inner { max-width: 100%; width: 100%; margin: 50px auto;}
.project .pageheader .pagebanner_inner img {max-width: 1000px; width: 100%; height: auto; display: block; margin: 0 auto;}

.project .components {max-width: 1151px;margin: 100px auto 0px auto;}
.project .feat_image {margin: 0 auto; display: flex; justify-content: center; flex-wrap: wrap; }
.project .feat_image a {width: 355px;height: 275px;display: inline-block;background-size: cover !important;margin: 0px 4px 10px 4px;border: none;}
.project .feat_image h2 {display: none;}

@media(max-width: 805px) {
    .feat_image a { width: 300px;}
}

@media(max-width: 768px) {
    .project .projecttxt {flex-direction: column;}
}

@media(max-width:687px){
    .list_projects .project {display: block;margin: 0px auto 14px auto;}
    .list_projects>div:nth-of-type(3n) {margin-right:auto;}
}

@media(max-width: 655px) {
    .feat_image a { width: 400px;}
}

@media(max-width:360px){
    .list_projects .project {width: 100%;}
}


/* Contact */
.contact {min-height: 65vh;}
.contact h2 {font-weight: bold;}
.contact .pagecomponents_inner {display: flex; justify-content: center; }

.contact .std_content, .contact .surv_standard, textarea { max-width: 400px; width: 100%;}
.contact .std_content ul li {padding-bottom: 20px; font-family: AssistantAssistant, sans-serif; font-weight: 100; color: var(--text); font-size: 97%;}
/* .contact .surv_standard {margin-top: 58px;} */
.surv_standard .formbuilder .label label {text-transform: uppercase;}
.surv_standard .formbuilder .input {margin-top: 5px; margin-bottom: 15px;}
.surv_standard .formbuilder .input input, textarea  {width: 100%; min-height: 35px; border-color: var(--gray); font-family: AssistantAssistant, sans-serif; color: var(--text); border-radius: 3px;}
.surv_standard .button {background-color: var(--text); color: var(--white); font-family: AssistantAssistant, sans-serif; border-radius: 3px;}

.contact .confirm {font-weight: bold;}

@media (max-width: 768px) {
    .contact .pagecomponents_inner {flex-direction: column;}
    .contact .surv_standard {margin-top: 10px;}
}

/* Lighbox */
div.pp_default .pp_expand {display: none !important;}
.pp_description {text-transform: uppercase; font-size: 12px !important; margin-top: 13px !important;}