@media screen and (max-width: 1440px) {

#primary {

}

.heroContent {
padding: 0 2.5%;
}

section {
padding: 0 2.5%;
}

#testimonials section {
padding:0;
}

#newsletter{
padding: 0 2.5%;
}

footer{
padding: 0 2.5%;
}

.single-case_study .sectionContainer.postContent section,
.single-news .sectionContainer.postContent section {
padding: 15px 2.5%;
}
}

@media screen and (max-width: 1100px) {
.squares .articleExcerpt h2,
.squares .articleExcerpt p
{
padding:0 25px 0 50px;
}


.squares .articleExcerpt span.watermark {
display:none;
}

.squares .articleExcerpt h2 {
font-size: 2em;
}

}

@media screen and (max-width: 1050px) {

#headerContainer {
height:350px;
}

#hero .heroContent {
margin-top:-125px;
}

.page-template-page-about #hero {
height:200px;
}

.page-template-page-about #hero .heroContent{
align-items:center;
justify-content:center;
}

.page-template-page-about #hero .watermark {
display:none;
}

.page-template-page-about #hero p {
display:none;
}

.page-template-page-about #hero h1 {
font-size:3em;
text-align:center;
}

#headerTopContent.flex {
flex-direction:column;
justify-content:center;
flex-wrap:nowrap;
}

.companyName {

max-width:90%;
}

.companyName img {
margin-left:0;
}

#primary {
max-width:100%;
}

.sticky #headerTop {
height:180px;
}

.contactFormBlock{
flex-direction:column;
align-content:center;
align-items: center;
}

.contactFormColumn {
width:100%;
}

aside.post {
width:300px;
}

.postContent main {
width: calc(100% - 350px);

}

.row2.service .articleExcerpt {
width:90%;
left:5%;
}

.sectionContainer.postContent section .serviceItem h2 {
font-size: 2.5em;
}

#ourServices h2 {
text-align:center;
}

.sectionContainer.postContent section .serviceItem .articleExcerpt {
padding-top:0;
}

article.serviceItem {
align-items:flex-start;
}

.home .service .articleExcerpt{
display:none;
}

.whatDo .articleExcerpt {
  position: static;
  background: rgba(0, 63, 81, 0.8);
  color: #fff;
  visibility: visible;
  opacity: 1;

}

.whatDo .articleExcerpt p:last-of-type {
margin-bottom:75px;
}

.whatDo .articleImage {
max-height:300px;
overflow:hidden;
}

.whatDo article {
max-height:none;
}

.whatDo article .articleTitle {
display:none;
}
.whatDo article:hover .articleTitle {
visibility:visible;
}

#servicesIntro,
#servicesPanel {
width:100%;
}


}


@media screen and (max-width: 950px) {

.featured .articleImage {
width:100%;
max-width:none;
}

.featured .articleExcerpt {
width:100%;
height:auto;
}

.featured .articleExcerpt .boxout{
width:auto;
left:0;
margin-bottom:10px;
}

.featured .articleExcerpt span.watermark {
margin-left:30px;
}

}

@media screen and (max-width: 850px) {

.squares {
  display: relative;
  grid-template-columns: repeat(1, 1fr);
}

.square {
  aspect-ratio: auto;
  background-color:#003f51;
}

.square img {
  width: 100%;
  height: auto;
  max-height:360px;
  display: block;
  object-fit: cover;
}

.squares .articleExcerpt span.watermark {
display:block;
padding:0 25px 0 50px;

}

.squares .articleExcerpt h2 {
font-size: 2.8em;
}

}

@media screen and (max-width: 800px) {
#servicesPanel .row3{
width:48%;
}

body,
body.page-template-page-contact,
.sectionContainer#contactForm,
.sectionContainer#relatedContent,
.sectionContainer#ourTeam,
.single-service .sectionContainer.postContent:nth-of-type(2n+2){
background-image:none;
}

.contactSidebar {
float:left;
width:100%;
margin-left:0;
}

.mainWithContact {
width: 100%;
float:left;
}

}

@media screen and (max-width: 750px) {

#footerHeader p br {
display:inline;
}

.row3 {
width: 48%;
}

.reasonsWhy .row3 {
width:100%;
}



.row4 {
width: 48%;
}
.supporting .row4 {
width:100%;
}
aside.post {
width:100%;
margin-bottom:25px;
}

.postContent main {
width:98%;
margin-left:0;
margin-right:2%;
}

#hero h1 {
font-size: 3em;
}

#hero .watermark {
display:none;
}

.row2.service {
width: 100%;
max-width:720px;

}

article.serviceItem .articleImage,
article.serviceItem .articleExcerpt {
width:100%;
}

.sectionContainer.postContent section .serviceItem .articleExcerpt {
padding-top:20px;
}

article.serviceItem {
flex-direction:column;
}
.singleServices .sectionContainer.postContent section {
padding-bottom:0;
}

.whatDo article.row2 {
width:100%;
margin-bottom:30px;

}

#testimonials {
max-height:none;
min-height:300px;
}

.teamMembers.flex {
column-gap:0;
}

.teamMembers .row2 {
width:100%;
max-width:600px;
}

}

@media screen and (max-width: 600px) {
#primary {
background-color:#003f51;
width:100%;
position:absolute;
top:0;
}

#headerTop {
padding-top:56px;
}

.page-template-page-about #hero h1 {
font-size:2.5em;

}

.teamMembers .articleTitle {
display:none;
}

.teamMembers .articleExcerpt {
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 1);
  visibility: visible;
  opacity: 1;

}
.teamMembers .articleTitle h3 {
padding: 15px;
margin-top:0;
}
.teamMembers .articleTitle p {
padding-bottom: 15px;
}

.teamMembers article .articleExcerpt h3 {
padding-top:0;
min-height:auto;
}


.teamMembers article:hover .articleExcerpt {
  visibility: visible;
  opacity: 1;
}

.home #headerContainer {
height:350px;
}

.home #hero p {
display:none;
}

.home #hero {
height:225px;
}

.home #hero h1 {
text-align:center;
font-size: 3.5em;
margin-bottom:50px;
}

section.sectionLeft,
section.sectionRight {
width:100%;
margin-right:0;
}

#contactForm section .contactFormBlock .submitButton p {
text-align:left;
}

#footer1.footerColumn {
width:100%;
}

.postContent main {
width:96%;
margin-left:2%;
}

}

@media screen and (max-width: 500px) {

.row3 {
width: 100%;
}

.row4 {
width: 100%;
}


div.alignright,
img.alignright,
div.alignleft,
img.alignleft{
float:none;
clear:both;
margin:20px auto;
  width:100%;
  max-width:500px;
  height:auto;
}

div.aligncenter,
img.aligncenter,
p img.aligncenter{
float:none;
clear:both;
display:block;
margin:20px auto;
width:100%;
  max-width:720px;
  height:auto;
}

}


@media screen and (max-width: 470px) {

.sticky #headerTop {
height:150px;
}

.checkboxes span:nth-of-type(2n),
.checkboxes span:nth-of-type(2n+1) {
width:100%;
}

#servicesPanel .row3{
width:100%;
}

}
