@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
* {
    box-sizing: border-box;
}
body, html {
    margin:0px;
    padding:0px;
}

body {
    font-family: 'Montserrat', Arial, Helvetica, sans-serif;
    font-size:18px;
    line-height:30px;
    color:#4d4d4d;
    --red: #ff0040;
}

.red {
    color:var(--red);
}

.text-center {
    text-align:center;
}

img {
    max-width:100%;
    height:auto;
}

a {
    color:var(--red);
    text-decoration:none;
}

a:hover {
    text-decoration:underline;
}

a.red-button, a.white-button {
    display:inline-block;
    background-color:var(--red);
    border:1px solid var(--red);
    color:#ffffff;
    padding:10px 20px;
}

a.red-button:hover {
    color: var(--red);
    background-color: #ffffff;
    text-decoration: none;
}

a.white-button {
    background-color:#ffffff;
    color:var(--red);
}

a.white-button:hover {
    color:#ffffff;
    background-color:var(--red);
    text-decoration:none;
}

h1, h2, h3 {
    /*font-family: Arial, Helvetica, sans-serif;*/
    line-height:1.3;
    font-weight:650;
}

h1 {
    font-size: 4rem;
}

h2 {
    font-size: 2rem;
}

header {
    width:100%;
    background:#FFF;
    border-bottom: 1px solid var(--red);
    position:fixed;
    z-index:20;
}

header > div {
    align-items: center;
    padding:20px 0px;
    width:1200px;
    max-width:100%;
    margin:0px auto;
}

nav ul {
    list-style:none;
    padding:0px;
    margin:0px;
}

nav a {
    display:inline-block;
    padding:0px 15px;
    padding-top:3px;
    color:inherit;
    font-family: Arial, Helvetica, sans-serif;
    font-size:18px;
}

nav a.active {
    color:var(--red);
}

nav a:hover {
    text-decoration:none;
}

nav a::after {
    content: "";
    display: block;
    height: 2px;
    width: 0%;
    background-color: var(--red);
    transition: width 0.3s;
}

nav a:hover::after {
    width: 100%;
}

#content > div {
    margin:40px auto;
    width:1230px;
    max-width:100%;
}

#content > div.no-margin {
    margin-bottom:0px;
}

#content > div.home-cta {
    margin-top:0px;
}

#content > div.dnadesign__elemental__models__elementcontent, #content > div:has(+ .list-element__container[data-listelement-count="1"]) {
    width:1200px;
}

#content > div.full-width, #content > div.our-clients {
    width:100%;
}

#page-header {
    width:1200px;
    max-width:100%;
    margin:0px auto;
    padding-top:90px;
    box-sizing: border-box;
}

#page-header h1.with-grey-bar {
    padding-bottom:10px;
    margin-top:60px;
    margin-bottom:10px;
    color: var(--red);
}

#page-header h1.with-grey-bar::after {
    content:"";
    display:block;
    height:4px;
    width:40px;
    border:none;
    margin-left:0px;
    background-color: #d6cdcd;
    margin-top:20px;
}

.flex, .list-element__container:not([data-listelement-count="1"]) {
    display: flex;
    justify-content: space-between;
}

.testimonial-slider .list-element__container:not([data-listelement-count="1"]) {
    display: block;
}

.testimonial-slider .list-element__container:not([data-listelement-count="1"]) > div {
    margin:0px;
}

.flex-column .list-element__container:not([data-listelement-count="1"]), .project-box .list-element__container:not([data-listelement-count="1"]) {
    flex-direction: column;
}

.list-element__container:not([data-listelement-count="1"]) > div {
    flex-basis:100%;
    margin-right: 15px;
    margin-left:15px;
    box-sizing: border-box;
}

.flex-column .list-element__container:not([data-listelement-count="1"]) > div, .project-box .list-element__container:not([data-listelement-count="1"]) > div {
    margin:0px;
}

#content > div.home-banner {
    display:flex;
    align-items:center;
    color:#ffffff;
    margin-top:0px;
    padding-top:93px;
    height: calc(100vh);
    position:relative;
}

.home-banner .list-element__container {
    width: 1200px;
    max-width: 100%;
    margin: 0px auto;
}

.home-banner .list-element__container:not([data-listelement-count="1"]) > div {
    margin:0px;
}

.home-banner .list-element__container:not([data-listelement-count="1"]) > div.video {
    flex-basis:0;
}

.home-banner h1, #page-header h1, .home-covered h3 {
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
    font-size:5.6rem;
    font-weight:800;
    line-height:1.1;
    margin-top:0px;
    margin-bottom:25px;
}

.home-banner h2:first-of-type {
    font-weight:normal;
    width:60%;
    margin-top:0px;
}

.home-banner h2:nth-of-type(2) {
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
    font-size: 4rem;
    font-weight:800;
    margin: 10px 0px;
}

.home-banner a {
    color:inherit;
}

.home-banner hr {
    height:4px;
    width:40px;
    border:none;
    background-color:#ffffff;
    margin-left:0px;
}

.home-banner #bgvid {
	left: 0;
	position: absolute;
	top: 0;
    width:100%;
    height:100%;
    z-index:-1;
    object-fit: cover;
}

.home h2.content-element__title {
    color: var(--red);
}

.project-box h2 {
    font-family: 'Montserrat', Arial, Helvetica, sans-serif;
    font-weight:550;
    font-size:1.7rem;
    margin:5px 0px;
    color:inherit;
}

.project-box p {
    margin:0px;
}

.project-box p:first-of-type {
    color: var(--red);
    margin-top:5px;
}

.project-box .file-element__file {
	overflow: hidden;
}

.project-box img {
    transition: transform 2s;
}

.project-box img:hover {
    transform: scale(1.2);
}

hr.red, hr.grey {
    height:4px;
    width:40px;
    border:none;
    background-color:var(--red);
    margin-left:0px;
}

.divider hr {
    border:none;
    background-color:#d6cdcd;
    height:1px;
    width:100%;
}

hr:last-child {
    margin-bottom:0px;
}

.callback-box {
    background: var(--red);
    color: #ffffff;
    padding:20px 30px;
}

.callback-box h2, .start-project h2 {
    text-align:center;
}

.contact-form label {
    display:none;
}

.contact-form input, .contact-form textarea {
    width:100%;
    box-sizing: border-box;
    padding:15px;
    margin-bottom:10px;
    border: 1px solid #ffffff;
    background: transparent;
    font-size: 20px;
    font-family:Arial, Helvetica, sans-serif;
}

.contact-form input::placeholder, .contact-form textarea::placeholder {
    color:#ffffff;
}

.contact-form input:focus, .contact-form textarea:focus {
    outline:none;
    border:1px solid #ffffff;
}

.contact-form textarea {
    height:180px;
}

.contact-form input.action {
    background-color:#ffffff;
    border:1px solid #ffffff;
    cursor:pointer;
}

.contact-form input.action:hover{
    color:#ffffff;
    background-color:transparent;
}

.start-project {
    background: var(--red);
    padding: 60px 20px;
    color: #ffffff;
    box-sizing:border-box;
}

.start-project .list-element__container {
    width: 1200px;
    max-width: 100%;
    margin: 0px auto;
}

.start-project h2, .home .our-clients h2, .testimonial-slider h2 {
    margin:0px;
	font-size: 3rem;
	line-height: 1.2;
}

.start-project fieldset {
    border:none;
    padding:0px;
    margin:0px 15px;
    flex-basis:100%;
}

.start-project .contact-form textarea {
	height: 119px;
}

.start-project input.action {
    width:200px;
    margin: 0px auto;
    display:block;
    margin-top:20px;
}

.home-covered h2, .strapline h2 {
    font-weight:normal;
    margin-bottom:0px;
}

.home-covered h3 {
    margin-bottom:0px;
    line-height:1.3;
}

hr.grey {
    background-color: #d6cdcd;
}

.service-grid h3, .service-grid p {
    margin:2px 0px;
}

.service-grid h3 {
    color: var(--red);
}

.home .our-clients {
    background:#f3f3f3;
    padding:30px 0px;
}

.client-logos .list-element__container {
    align-items: center;
}

.strapline h2 {
    margin:0px;
}

.border-bottom {
    border-bottom: 3px solid #d6cdcd;
    padding-bottom:30px;
    box-sizing: border-box;
}

footer {
    background: #515350;
    color: #fff;
}

footer a {
    color: #fff;
}

footer .footer-container {
    width:1200px;
    max-width:100%;
    margin:0px auto;
    padding:40px 0px;
}

@media only screen and (max-width: 768px) {
    html.menu-open {
        overflow:hidden;
    }
   #page-header, #content {
       padding:0px 20px;
       box-sizing:border-box;
   }
   nav {
    width:100%;
    height:calc(100vh - 125px);
    background:#FFF;
    position:absolute;
    width:0px;
    top:125px;
    left:-100vw;
    box-sizing: border-box;
    padding: 0px 20px;
    transition: left 0.3s, width 0.3s;
    }
    html.menu-open nav {
        width:100%;
        left:0px;
    }
    nav li {
        border-bottom: 1px solid #4d4d4d;
        padding-top:12px;
        padding-bottom:15px;
    }
    header .red-button {
        background:none;
        color: var(--red);
        padding:0px;
        border:none;
        margin-top:10px;
    }
    #content > div.home-banner {
        padding: 40px 20px;
        padding-top:140px;
        margin-left:-20px;
        margin-right:-20px;
    }
    h1, .start-project h2, .home .our-clients h2 {
	font-size: 42px;
	line-height: 52px;
    }
   .flex, .list-element__container:not([data-listelement-count="1"]) {
       flex-direction: column;
   }
   .list-element__container:not([data-listelement-count="1"]) > div {
	margin-right: 0px;
	margin-left: 0px;
    }
    .project-box:first-child {
        margin-bottom:30px;
    }
    footer{
        padding:0px 20px;
    }
}