/*

Theme Name: E2 Environmental
Description: E2 Environmental Consulting Civil Engineers
Author: Wired
Author URI: http://www.wired.co.nz
version: 1.0

*/

@charset "UTF-8";

html, body { background:#f5f6f3; color:#2b2b2b; font-family: 'ApexNew', Arial, sans-serif; font-weight:400; display:table; font-size:20px; font-weight:300; height:100%; margin:0; overflow-x:clip; padding:0; position:relative; width:100%; }

section { margin:0 0 6px 0;}

img { border:none; display:block; height:auto; max-width:100%;}

h1 {  font-size:44px; font-weight:300; margin:0 0 20px 0; padding:0;}
h2 {  font-size:34px; font-weight:300; margin:0 0 20px 0; padding:0;}
h3 {  font-size:24px; font-weight:600; margin:0 0 20px 0; padding:0;}
h4 {  font-size:18px; font-weight:600; margin:5px 0; padding:0;}
h5 { font-size:16px; font-weight:600; margin:0 0 4px 0; padding:0;}
h6 { font-size:18px; font-weight:500; margin:0 0 5px 0; padding:0;}


.contact-content h3, .contact-info-wrap p { margin:0; }



p { font-size:18px; font-weight:400; margin:0 0 20px 0;}

ul, ol { margin:0; padding:0 20px;}
li { font-size:18px; font-weight:400; margin:0; padding:2px 7px 2px 18px; position:relative; }




.custom-counter {
  counter-reset: step;
  list-style: none;
  margin:0;
  padding: 0 0 0 60px;
}

.custom-counter li {
  counter-increment: step;
  position: relative;
  margin:0;
  padding: 40px 0;
  border-bottom:1px dashed #ccc;
}

.custom-counter li::before {
  content: counter(step);
  position: absolute;
  left: -65px;
  top: 10px;
  font-size: 4rem;
  font-weight: normal;
  font-family: 'Georgia', serif;
  opacity:0.3;
}

.custom-counter li strong { font-size: 1.1rem;}
.custom-counter li:first-of-type { padding-top:0; }
.custom-counter li:first-of-type::before { top:-20px;}


ul#menu-about { display:flex; flex-wrap:wrap; gap:3px 16px ; margin:0; padding:0; list-style:none; }
ul#menu-about li, ul#menu-about li a:link, ul#menu-about li a:visited { margin:0; padding:0; }

ul#menu-about li.current_page_item a:link, ul#menu-about li.current_page_item a:visited { color:#fff; font-weight:500;}


a:link, a:visited { color:#00afc4; text-decoration:none;}
a:hover, a:active { color:#7aa632; transition:0.3s;}


hr { border-bottom:0; border-left:0; border-right:0; border-top:1px dashed #b9b9b9; height:1px; margin:40px 0; }

.floatl { float:left; margin:0 5px 5px 0;}
.clear { clear:both;}

.rounded-corners { border-radius:10px; }
.white { background:#fff;}

#header { border-top:7px solid #fff; position:fixed; width:100%; z-index:90; }

#logo { background:#fff; padding:24px 20px 26px 36px; position:absolute; left:0; top:0; z-index:9;}
#logo img { max-width:240px; position:relative; z-index:99;}
#logo:before { background:#fff; border-radius:5px; content:""; display:block; transform:skewX(-45deg); bottom:0; right:-70px; height:120px; width:120px; position:absolute; z-index:89; }


.contentw { overflow:visible; margin:auto; max-width:1200px; position:relative;}
.contentw2 { overflow:visible; margin:auto; max-width:1480px; position:relative;}

#content { min-height:900px; padding:0 0 20px 0; position:relative;}
#copyright { background:#def6f1; border-top:3px solid #fff; font-size:0.8em; padding:25px 5%; text-align:center;}



#hintro { display:flex; flex-wrap:nowrap; align-items:center; height:820px; gap:40px; }
#hintro img { max-width:300px;}
#hintro h1 { color:#fff; font-size:60px; font-weight:bold; }
#hintro h2 { color:#fff; font-size:33px; }



#hqcontacts { display:flex; flex-wrap:nowrap; gap:15px; }
#hqcontacts p { color:#fff;}
#hqcontacts a:link, #hqcontacts a:visited { color:#fff; position:relative;}
#hqcontacts a:active, #hqcontacts a:hover { color:#fff; text-decoration:none;}
#hqcontacts a:after { background:#fff; content:""; display:block; position:absolute; left:50%; bottom:-6px; height:1px; width:0; }
#hqcontacts a:active:after, #hqcontacts a:hover:after { left:calc(50% - 40px); width:80px; transition:0.3s;}



#pageheader { background-repeat:no-repeat; background-size:cover; height:130px; margin-bottom:60px; padding:130px 0 0 0;}
#pageheader h1 { color:#fff; font-size:32px; font-weight:bold; margin:0; padding:0; }
#pageheader a:link, #pageheader a:visited { color:#80aec1; font-size:16px; font-weight:400; padding-left:20px; position:relative; }
#pageheader p { color:#fff; font-weight:400;}

.material-symbols-outlined { font-variation-settings: 'FILL' 0,  'wght' 400,  'GRAD' 0,  'opsz' 24; position:absolute; left:-6px; top:-2px;}




.flex-content { display:flex; flex-wrap:nowrap; align-items:flex-start; gap:99px;}

.contact-content { display:flex; flex-wrap:nowrap; gap:70px; }

.formwrap { background:#fff; border-radius:10px; padding:99px; }
.formwrap p { font-size:16px; font-weight:400;}
.contact-info-wrap {}




/*-- services --*/
.e2service { align-items:stretch; }




.e2service a h2 {  background-color: rgba(0, 0, 0, 0.3); color:#fff; display:block; font-size:36px; font-weight:400; height:300px; margin:0; padding:230px 0 0 0; text-align:center; text-shadow:0px 0px 10px rgba(0,0,0,0.8);  }

.e2service a:active h2, .e2service a:hover h2 { transition:0.3s; }







#services-involved { background: url(../images/bg-wavelines-grey.png) repeat; margin:90px 0 0 0; padding:60px 0;}
#services-involved .e2project-listing div { height:300px; width:calc(33.3% - 6px);}
#services-involved .e2project-listing a span { font-size:15px;}
#services-involved p { margin-bottom:10px;}
#services-involved .e2project-listing { margin:0; padding:0; }


.services-involved { display:table; border-spacing:5px; margin:-15px 0 0 -5px; }
.services-involved a { background:#0b3d52; border-radius:6px; color:#80aec1; font-size:16px; font-weight:400; padding:20px; margin:0 5px 5px 0; max-width:170px; text-align:center; display:table-cell; vertical-align:middle;}
.services-involved a:active, .services-involved a:hover { color:#7aa632; }


.service-content { display:flex; flex-wrap:nowrap; gap:70px;  }
.service-imgs { min-width:45%;}
.service-imgs img { border-radius:8px; margin-bottom:6px; }
.service-imgs .col-2 img { max-width:calc(50% - 3px);}




/*-- projects --*/
.e2projects div { background-position:center!important; height:450px; overflow:hidden; position:relative;}
.e2projects a { height:100%; color:#fff; display:block; font-size:24px; opacity:0; }
.e2projects a:active, .e2projects a:hover { background-color: rgba(0, 0, 0, 0.8); opacity:1; text-align:center; transition:0.5s; }
.e2projects a span { position:absolute; bottom:20%; left:10%; width:80%; }
.e2projects a:active span, .e2projects a:hover span { position:absolute; bottom:44%; transition:0.5s; }
.e2projects h4 { background:#fff; font-size:16px; font-weight:400; margin:-20px 0 0 0; padding:9px; position:absolute; left:-48px; top:50%; transform:rotate(-90deg); z-index:5;}
.e2projects h4:before { background:#fff; border-radius:0 0 0 5px; content:""; display:block; transform:skewX(45deg); bottom:0; left:-25px; height:40px; width:60px; position:absolute; z-index:-1;}
.e2projects h4:after { background:#fff; border-radius:0 0 5px 0; content:""; display:block; transform:skewX(-45deg); bottom:0; right:-25px; height:40px; width:60px; position:absolute; z-index:-1;}

.project-feature-img { height:620px; margin:-66px 0 60px 0;}
#pageheader.projects { background:url(../images/bg-wavelines-blue.png); background-repeat:repeat;}

.project-content { display:flex; flex-wrap:nowrap; gap:70px; }
.project-imgs {min-width:45%;}
.project-imgs img { border-radius:8px; margin-bottom:6px; }
.project-imgs .col-2 img { max-width:calc(50% - 3px); }

.e2-pmanager { float:left; font-size:18px; font-weight:500; margin:-15px 10px 10px 0; text-align:center; width:175px; }
.e2-pmanager img { border-radius:5px; margin-bottom:5px;}

#pageheader .projects-filter a:link, #pageheader .projects-filter a:visited { padding-left:0; padding-right:20px;}
#pageheader .projects-filter a:active, #pageheader .projects-filter a:hover { color:#fff;}
#pageheader .projects-filter a.active {color:#fff; font-weight:500;}


.e2project-listing { display:flex; flex-wrap:wrap; gap:6px; margin-top:-54px; padding:0 0 0 6px; position:relative;}
.e2project-listing div { border-radius:10px; height:450px; overflow:hidden; position:relative; }
.e2project-listing div { width:calc(25% - 6px); }
.e2project-listing a { font-weight:400; display:block; height:100%; }
.e2project-listing a span { background-color:rgba(4, 69, 96, 0.9); color:#fff; display:block; padding:20px; position:absolute; bottom:0; left:0; text-align:center; transition:0.3s; width:calc(100% - 40px); }
.e2project-listing a:active span, .e2project-listing a:hover span { padding:40px 20px; transition:0.3s;}



.e2project-listing-legacy { margin:80px 0 0 0; text-align:center;}
.e2project-listing-legacy .e2project-listing { margin-top:0;}
.e2project-listing-legacy .e2project-listing div {height:260px; }


.legacy-project ~ section .project-feature-img { display:none;}
.legacy-project ~ section .project-content { margin-top:60px; }


/*-- clients --*/
.e2clients h4 { background:#044560; color:#fff; font-size:16px; font-weight:400; margin:-20px 0 0 0; padding:9px; position:absolute; left:-18px; top:50%; transform:rotate(-90deg); z-index:5;}
.e2clients h4:before { background:#044560; border-radius:0 0 0 5px; content:""; display:block; transform:skewX(45deg); bottom:0; left:-25px; height:40px; width:60px; position:absolute; z-index:-1;}
.e2clients h4:after { background:#044560; border-radius:0 0 5px 0; content:""; display:block; transform:skewX(-45deg); bottom:0; right:-25px; height:40px; width:60px; position:absolute; z-index:-1;}

.allclients { display:flex; flex-wrap:wrap; gap:6px; margin-top:-60px; padding:6px; }
.allclients img { max-width:calc(20% - 5px);}

/*-- section backgrounds -- */
.hintro { background:url(../images/bg-hintro.jpg) center center no-repeat; background-size:cover;}

.hdescription { background:url(../images/bg-hdescription.jpg) center center no-repeat; background-size:cover; padding:130px 0;}
.hdescription p { color:#fff; font-size:30px; font-weight:400; line-height:36px;}

.s-3waters { background:url(../images/bg-3waters.jpg) center center no-repeat; background-size:cover; font-size:36px; }


.s-hydrology { background:url(../images/bg-hydrology.jpg) center center no-repeat; background-size:cover;}
.s-river-management { background:url(../images/bg-river.jpg) center center no-repeat; background-size:cover;}
.s-land-dev { background:url(../images/bg-land-dev.jpg) center center no-repeat; background-size:cover;}
.s-econsents { background:url(../images/bg-econsents.jpg) center center no-repeat; background-size:cover;}

.s-3waters, .s-hydrology, .s-river-management, .s-land-dev, .s-econsents { filter:grayscale(100%);} 
.s-3waters:active, .s-3waters:hover,
.s-hydrology:active, .s-hydrology:hover,
.s-river-management:active, .s-river-management:hover,
.s-land-dev:active, .s-land-dev:hover,
.s-econsents:active, .s-econsents:hover { filter:grayscale(0); transition:0.3s; }


.services { background-position:center;  background-repeat:no-repeat; background-size:cover; margin-bottom:60px;}
.about { background:url(../images/bg-about.jpg) center center no-repeat; background-size:cover; margin-bottom:60px;}
.contact { background:url(../images/bg-contact.jpg) center center no-repeat; background-size:cover; margin-bottom:60px;}







#meet-team-wrap { display:flex; flex-wrap:wrap; gap:20px;}
.team-member { background:#fff; border-radius:6px; display:flex; flex-wrap:nowrap; align-items:center; padding-right:40px; width:calc(50% - 50px); }
.team-member img { border-radius:6px; float:left; padding:0 45px 0 0; max-height:200px;}
.team-member p { margin-bottom:0; max-width:60%;}


.flex2 { display:flex; gap:40px; flex-wrap:nowrap; align-items:flex-start; }

#team-member-1 { border-right: 1px dashed #b9b9b9; width:calc(25% - 40px); padding-right:40px; }
#team-member-1 img { border-radius:5px; margin-bottom:20px; }

#team-member-2 { width:calc(75% - 40px); }
#team-member-2 p ~ ul { margin-top:-20px; margin-bottom:20px;}

#footer { margin:90px 0 0 0;}

#footer-content { margin-bottom:150px; }

#footer-content ul.sub-menu li:first-of-type { display:block;}
#footerlogo a { display:block; width:240px; margin:auto; }
#footerlogo img { max-width:240px; margin:auto; margin-bottom:80px; }


#sitelinks ul { display:flex; flex-wrap:nowrap; justify-content:center; gap:60px; list-style:none; margin:0; padding:0;}
#sitelinks ul li { font-size:16px; font-weight:500; margin:0; padding:0;}
#sitelinks ul li ul.sub-menu { border-top:1px solid #e4edec; display:block; list-style:none;  margin:0; padding:0; width:200px; }
#sitelinks ul li ul.sub-menu li { border-bottom:1px solid #e4edec; font-size:15px; font-weight:300; margin:0; padding:4px 0;}

#sitelinks ul a:link, #sitelinks ul a:visited { color:#044560;}
#sitelinks ul a:active, #sitelinks ul a:hover { color:#7aa632;}


#projectlinks { margin:auto; margin-top:40px; max-width:900px }
#projectlinks ul { display:flex; flex-wrap:wrap; justify-content:left; gap:0 20px; align-content:flex-start; list-style:none; margin:0; padding:0;}
#projectlinks ul li { font-size:16px; font-weight:500; margin:0; padding:0;}
#projectlinks ul li ul.sub-menu {  list-style:none; margin:0; padding:0; }
#projectlinks ul li ul.sub-menu li { border-top:1px solid #e4edec; font-size:15px; font-weight:300; margin:0; padding:4px 0; width:200px;}
#projectlinks ul a:link, #projectlinks ul a:visited { color:#044560; display:block;}
#projectlinks ul a:active, #projectlinks ul a:hover { color:#7aa632;}







#affiliats { display:flex; flex-wrap:nowrap; justify-content:center; gap:5px; position:relative;}
#affiliats span {font-size:15px; font-weight:300; position:absolute; top:-30px; text-align:center; width:100%;}
#affiliats img { border:20px solid #fff; border-radius:8px; max-height:99px; }

#footer-base { font-size:15px; font-weight:300; padding:30px 20px 60px 20px; text-align:center; }







/*-menu-*/
#nav { margin:0; padding:0; position:absolute; top:0; right:0; text-align:left; }

#nav:before { background:#fff; border-radius:5px; content:""; display:block; transform:skewX(45deg); top:-10px; left:-40px; height:60px; width:120px; position:absolute; z-index:89; }

#nav input[type="checkbox"] { display:none;}
#nav input[type="checkbox"] + label { display:none; }

#nav input[type="checkbox"] ~ .menu-wrap ul  { display:flex; gap:0; margin:0; padding:0; position:relative; z-index:99; }
#nav input[type="checkbox"] ~ .menu-wrap ul li { list-style:none; margin:0; padding:0; position:relative; }

#nav li a:link, #nav li a:visited { background:#fff; color:#044560; display:block; font-size:14px; font-weight:400; padding:12px 25px 20px 25px; position:relative; }
#nav li a:active, #nav li a:hover { color:#7aa632; }

#nav ul.sub-menu li a, #nav ul.sub-menu li a { padding:9px 25px; }

#nav li a:after { background:#044560; content:""; display:block; position:absolute; left:50%; bottom:16px; height:1px; width:0; }
#nav li a:active:after, #nav li a:hover:after, #nav li.current_page_item a:after { left:calc(50% - 23px); width:46px; transition:0.3s;}

#nav ul.sub-menu li a:after, #nav ul.sub-menu li a:after { display:none;}

#nav input[type="checkbox"] ~ .menu-wrap ul.sub-menu { display:none; position:absolute; top:50px; left:0; min-width:180px;}
#nav .menu-wrap li a:active ~ ul.sub-menu, #nav .menu-wrap li a:hover ~ ul.sub-menu, #nav input[type="checkbox"] ~ .menu-wrap ul.sub-menu:active, #nav input[type="checkbox"] ~ .menu-wrap ul.sub-menu:hover { display:block;}


#nav .menu-wrap ul.sub-menu li:last-of-type a { border-radius:0 0 5px 5px; padding-bottom:20px;}


/*--About page--*/
.page-id-13 .contentw img.alignleft { border-radius:8px; float:left; max-width:45%; margin:0 40px 99px 0; }




/*-input & anchor button styles-*/
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], textarea, select { background:#e9ecee; border:0; border-radius:5px; box-shadow:inset 4px 4px 8px rgba(215, 220, 223, 1); font-size:18px; line-height:50px; margin:4px 0 8px 0; outline:0; padding:0 20px; position:relative; width:calc(100% - 40px); z-index:7;}

textarea { background-color:#e9ecee; border-radius:5px; color:#707778; height:200px;}

input[type="submit"], input[type="button"], button, .btn  { background:#0b3d52; border-radius:5px; border:0; color:#80aec1; cursor:pointer; display:inline-block; font-size:16px; font-weight:600; line-height:50px; margin:0; padding:0 30px; text-decoration:none;  }
input[type="submit"]:hover, input[type="button"]:hover, input[type="submit"]:active, input[type="button"]:active , .a-btn:hover, .a-btn:active, .b-btn:hover, .b-btn:active {  color:#7aa632; transition:0.3s;}

table .sipw { margin:0; width:300px;}
table .sipw input[type="text"] { font-size:14px; line-height:28px;}

select::-ms-expand { display:none; }
select { background:none; border:1px solid #b7c1c4; -webkit-appearance:none; -moz-appearance:none; text-indent:0; text-overflow:'';}



.a-btn { background:#00afc4; border-radius:45px; border:0; color:#fff; cursor:pointer; display:inline-block; font-size:20px; float:right; line-height:60px; margin:0; padding:0 40px 0 70px; position:relative; text-decoration:none;}
.b-btn  { background:#00afc4; border-radius:45px; border:0; color:#fff; cursor:pointer; display:inline-block; font-size:19px; line-height:46px; margin:0 5px 5px 0; padding:0 35px 15px 68px; position:relative; text-decoration:none; }
.b-btn span {font-size:12px; position:absolute; top:18px; left:68px;}


.label { font-size:16px; height:15px; margin:0; padding:0 0 8px 0;}
.label-text { float:left;}


label { margin:0;}
input[type="checkbox"], input[type="radio"] { display:none; }
input[type="checkbox"] + label span, input[type="radio"] + label span { cursor:pointer; display:inline-block; font-size:16px; height:21px; margin:0; padding:3px 20px 5px 30px;}
input[type="checkbox"] + label span { background: url(../images/icons.png) -479px -100px no-repeat;} 
input[type="radio"] + label span { background: url(../images/icons.png) -479px 0 no-repeat;}
input[type="checkbox"]:checked + label span { background: url(../images/icons.png) -479px -150px no-repeat;} 
input[type="radio"]:checked + label span { background: url(../images/icons.png) -479px -50px no-repeat;}


.hide { display:none;}
.floatblock { float:left;}
.aright { float:right!important;}



.col-4.e2clients { flex-wrap:wrap;}




/*--responsive cols-*/
.col-2, .col-4 { display:flex; flex-wrap:nowrap; gap:6px; position:relative;}
.col-2 div { overflow:hidden; width:50%; }
.col-2 div:nth-of-type(1) { border-radius:0 10px 10px 0;} 
.col-2 div:nth-of-type(2) { border-radius:10px 0 0 10px;} 

.col-4 { margin-right:-6px;}
.col-4 div, .col-4 img { border-radius:10px; }
.col-4 div:first-of-type { border-radius:0 10px 10px 0; }
.col-4 div:last-of-type { border-radius:10px 0 0 10px; }
.col-4 div, .col-4 img { width:calc(25% - 6px); }
.col-4 img:nth-of-type(1), .col-4 img:nth-of-type(5) {border-radius:0 10px 10px 0;}
.col-4 img:nth-of-type(4), .col-4 img:nth-of-type(8) {border-radius:10px 0 0 10px; }

/* Mobile menu hidden by default */
.mobile-menu {
  display: none;
  background: #044560;
  padding: 1rem;
}


/*---------------------Media queries---------------------------*/

@media only screen and (max-width: 1560px) {
.contentw2 { padding:0 80px;}
}



@media only screen and (max-width: 1400px) {
	
.contentw { padding:0 80px;}
#pageheader { height:auto; padding-bottom:30px;}	
#hintro { align-items:flex-start; height:auto; padding:200px 0 150px 0;}
#hintro img { max-width:240px;}
#hintro h1 { font-size:54px; margin:-10px 0 10px 0;}
#hintro h2 { font-size:28px;}
#hqcontacts { display:block; }
#hqcontacts p { margin:3px 0;}
.project-content {  gap:50px; }	
.flex-content { gap:50px;}
	
.formwrap { padding:80px;}
	
#pageheader .projects-filter a:link, #pageheader .projects-filter a:visited { padding-right:10px;}
.e2project-listing div { height:360px;}
}



@media only screen and (max-width: 1200px) {
.contact-content, .service-content  { gap:40px;}
.formwrap { padding:60px;}
	
.e2projects.col-4 { flex-wrap:wrap;}
.e2projects.col-4 div { width: calc(50% - 6px);}

.e2projects.col-4 div:nth-of-type(odd) { border-radius:0 10px 10px 0;}
.e2projects.col-4 div:nth-of-type(even) { border-radius:10px 0 0 10px;}
	
.e2project-listing div { width:calc(50% - 6px);}
	
#meet-team-wrap { display:block;}
.team-member { margin-bottom:20px; width: calc(100% - 50px);}
	
.allclients img { max-width:calc(25% - 5px);}
	
.project-content {  gap:30px; }
	
	
.page-id-13 .contentw img.alignleft { float:none; max-width:45%; margin:0 0 20px 0; }
	
}







@media only screen and (max-width: 1023px) {
.contact-content { display:block; text-align:center; }
.contact-info-wrap { padding-top:60px;}
.contact-content .formwrap { text-align:left;}
	
#team-member-1 { border-right:0; width:33%; padding-right:0; }
#team-member-2 { width:calc(66% - 40px); }
	
#projectlinks { max-width:100% }
#projectlinks ul { justify-content:center; gap:0 40px; text-align:center; }
#projectlinks ul li ul.sub-menu li { width:auto;}

#sitelinks ul {display:block; text-align:center; }
#sitelinks ul li ul.sub-menu { margin-bottom:20px; width:auto;}
	
.hdescription { padding:80px 0;}	
.hdescription .flex-content, .project-content { display:block; }

#services-involved, .services-involved { display:block; text-align:center; }
.services-involved { padding-top:10px; }
.services-involved a { display:block; max-width:320px; margin:auto; margin-top:5px; padding:8px 20px;}
	
.e2service.col-2 a { height:220px; padding:150px 0 0 0;}
.e2projects div { height:350px;}
	
	
#nav li a:after { display:none; }
#nav input[type="checkbox"] + label { display:block; height:60px; width:60px; position:absolute; top:0; right:15px; }
#nav:before { display:none; }
#nav input[type="checkbox"] + label:before {  background:#fff; border-radius:5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); content:""; display:block; transform:skewX(45deg); top:-10px; left: -40px; height:80px; width:200px; position:absolute; z-index:89;}
	
.menu-icon svg { cursor:pointer; fill:#044560; stroke:#044560; stroke-width:6; stroke-linecap:round; transition:all 0.3s ease; position:relative; z-index:999;}

/* Initial states */
.line {  transition: transform 0.3s ease, opacity 0.3s ease;}

/* When checked: animate to X */
#menu-toggle:checked + .menu-icon .top { transform:translateY(-10px) translateX(31px) rotate(45deg);}
#menu-toggle:checked + .menu-icon .middle { opacity: 0;}
#menu-toggle:checked + .menu-icon .bottom {  transform: translateY(34px) translateX(-42px) rotate(-46deg);}

/* Show menu when checkbox is checked */
#menu-toggle:checked + .menu-icon + .mobile-menu {  display:block;}
#nav input[type="checkbox"] ~ .menu-wrap ul { display:none; }
#nav input[type="checkbox"]:checked ~ .menu-wrap ul { box-shadow:-5px 5px 8px rgba(0, 0, 0, 0.2); display:block; position:absolute; top:8px; right:0; width:300px; z-index:9;}

#nav li a:link, #nav li a:visited { background-color:#fff; color:#0b3d52; font-size:16px; border-top:1px solid #ccc; padding:24px 50px; }
#nav li a:active, #nav li a:hover { background-color:#0b3d52; color:#fff;  }
	
#nav input[type="checkbox"] ~ .menu-wrap ul.sub-menu, #nav .menu-wrap li a:active ~ ul.sub-menu, #nav .menu-wrap li a:hover ~ ul.sub-menu, #nav input[type="checkbox"] ~ .menu-wrap ul.sub-menu:active, #nav input[type="checkbox"] ~ .menu-wrap ul.sub-menu:hover { position:relative; top:0; display:none; }
	
#nav input[type="checkbox"] ~ .menu-wrap ul li:first-of-type a { border-radius:9px 0 0 0;}
#nav input[type="checkbox"] ~ .menu-wrap ul li:last-of-type a { border-radius:0 0 0 9px;}
	
	
.service-content { display:block; }
.flex-content { flex-wrap: wrap; }
}
	
	

@media only screen and (max-width: 840px) {
	
.contentw { padding:0 40px; }
	
#hintro { gap:30px; padding:160px 0 80px 0;}
#hintro img { max-width:140px; }
#hintro h1 { font-size:46px;}
#hqcontacts p { margin:8px 0; }
	
.hdescription {  padding:40px 0; }
	
.allclients img { max-width:calc(33.3% - 4px);}

.flex2 { flex-wrap:wrap; gap:0;} 
#team-member-1, #team-member-2 { width:100%;  }
	
}

	
@media only screen and (max-width: 700px) {
#hintro { display:block; }
#hintro h1 { margin:20px 0;}
	
.e2service a { height:auto; padding:90px 0; }

.e2service.col-2 { display:block;}
.e2service.col-2 div {  margin-bottom:6px; width:100%;}
.e2service.col-2 div a { height:auto; padding:60px 0;}
	
.col-2 div:nth-of-type(1), .col-2 div:nth-of-type(2) { border-radius:0;}
	
.e2projects div { height:250px; }
.e2projects a:active span, .e2projects a:hover span { bottom:40%;}
	
.col-4 img { width:calc(50% - 6px);}
.col-4 img:nth-of-type(odd) { border-radius:0 10px 10px 0;}
.col-4 img:nth-of-type(even) { border-radius:10px 0 0 10px;}
	
	
#affiliats { display:block; }
#affiliats img { margin:auto; margin-bottom:6px; }

.team-member { padding-right:10px; width: calc(100% - 10px);}
.team-member img { padding:0 30px 0 0;}
	
	
}
	
	
	
@media only screen and (max-width: 600px) {
#logo { padding:20px 20px 26px 36px;}	
#logo img { max-width:180px;}	
	
.e2project-listing { display:block;}
.e2project-listing div { margin-bottom:6px; width:calc(100% - 6px); }
	
.team-member { background:none; display:block; padding:10px 0; text-align:center; width:auto; }
.team-member img { float:none; margin:auto; max-height:240px; padding:0;}
.team-member p { margin:10px 0;}
	
.allclients img { max-width:calc(50% - 3px);}
}
	
	
	
@media only screen and (max-width: 420px) {
#logo { padding:18px 12px 24px 30px; }	
#logo img { max-width:150px;}	
}