/* cmsms stylesheet: ecb-dropdown-style 2 modified: 01/09/20 20:14:25 */
#menu_vert {
/* no margin/padding so it fills the whole div */
	margin: 0;
	padding: 0;
}
.clearb {
/* needed for some browsers */
	clear: both;
}
#menuwrapper {
/* set the background color for the menu here */
	background-color: #ffffff;
/* IE6 Hack */
	height: 1%;
	width: auto;
	margin: 0;
	padding: 0;
/* border and shadow */
	border-bottom: 1px solid #eee;
	-webkit-box-shadow: 4px 4px 6px -6px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 4px 4px 6px -6px rgba(0, 0, 0, 0.3);
	box-shadow: 4px 4px 6px -6px rgba(0, 0, 0, 0.3);

}
ul#primary-nav, ul#primary-nav ul {
/* remove any default bullets */
	list-style-type: none;
	margin: 0;
	padding: 0;
}
ul#primary-nav {
/* pushes the menu div up to give room above for background color to show */
	/*padding-top: 10px;*/
/* keeps the first menu item off the left side */
	padding-left: 30vw;
	padding-right: 10vw;

}
ul#primary-nav ul {
/* make the ul stay in place so when we hover it lets the drops go over the content below else it will push everything below out of the way */
	position: absolute;
/* top being the bottom of the li it comes out of */
	top: auto;
/* keeps it hidden till hover event */
	display: none;
/* same size but different color for each border */
	border: 1px solid #eee;
	border-top: 2px solid #fff;
	border-radius: 0 0 5px 5px;
	-webkit-box-shadow: 4px 4px 6px -6px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 4px 4px 6px -6px rgba(0, 0, 0, 0.3);
	box-shadow: 4px 4px 6px -6px rgba(0, 0, 0, 0.3);

}
ul#primary-nav ul ul {
/* now we move the next level ul down from the top a little for distinction */
	margin-top: 1px;
/* pull it in on the left, helps us not lose the hover effect when going to next level */
	margin-left: -1px;
/* keeps the left side of this ul on the right side of the one it came out of */
	left: 100%;
/* sets the top of it inline with the li it came out of */
	top: 0px;
}
ul#primary-nav li {
/* floating left will set menu items to line up left to right else they will stack top to bottom */
	float: left;
/* no margin/padding keeps them next to each other, the padding will be in the \"a\" */
	margin: 0px;
	padding: 0px;
}

#primary-nav li.sign-in-button a {
    width: fit-content;
    margin: auto;
    padding: 5% 10% 5% 10%;
    background-color: #79b90f;
    border-radius: 10px;
    color: white;
    font-weight: bold;
    font-size: 1.1em;
}

#primary-nav li.sign-in-button a:hover {
    background-color: green;
    color: white;
    font-weight: bold;
    font-size: 1.1em;

}

#primary-nav li li {
/* Set the width of the menu elements at second level. Leaving first level flexible. */
	width: 220px;
/* removes any left margin it may have picked up from the first li */
	margin-left: 0px;
/* keeps them tight to the one above, no missed hovers */
	margin-top: -1px;
/* removes the left float set in first li so these will stack from top down */
	float: none;
/* relative to the ul they are in */
	position: relative;
}
/* set the \"a\" link look here */
ul#primary-nav li a {
/* specific font size, this could be larger or smaller than default font size */
	font-size: 1em;
/* make sure we keep the font normal */
	font-weight: 400;
/* set default link colors */
	color: #AFADAD;
/* pushes out from the text, sort of like making links a certain size, if you give them a set width and/or height you may limit you ability to have as much text as you need */
	padding: 23px 15px 23px;
	display: block;
/* sets no underline on links */
	text-decoration: none;
}
ul#primary-nav li a:hover {
/* kind of obvious */
        color: #000;
	background-color: transparent;
	font-weight: 400;
}

ul#primary-nav li li a:hover {
/* this is set to #000, black, below so hover will be white text */
	font-weight: 400;
}
ul#primary-nav li a.menuactive {
	color: #000;
/* bold to set it off from non active */
	font-weight: 400;
/* set your image here *//*
	background:  url(../../uploads/ngrey/nav.png) repeat-x left 0px;*/
}
ul#primary-nav li a.menuactive:hover {
	color: #000;
/* keep it the same */
	font-weight: 400;
}
#primary-nav li li a.menuparent span {
/* makes it hold a shape */
	display: block;
/* set your image here, right arrow, 98% over from the left, 100% or \'right\' puts it to far */
	/*background:  url(../../uploads/ngrey/parent.png) no-repeat 98% center;*/
}
/* gif for IE6, as it can\'t handle transparent png */
* html #primary-nav li li a.menuparent span {
/* set your image here, right arrow, 98% over from the left, 100% or \'right\' puts it to far */
	/*background:  url(../../uploads/ngrey/parent.gif) no-repeat 98% center;*/
}
ul#primary-nav li ul a {
/* insures alignment */
	text-align: left;
	margin: 0px;
/* keeps it relative to it\'s container */
	position: relative;
/* less padding than first level no need for large links here */
	padding: 6px 3px 6px 15px;
/* if first level is set to bold this will reset this level */
	/*font-weight: 400;*/
/* first level is #FFF/white, we need black to contrast with light background */
	color: #AFADAD;
	border-top: 0 none;
	border-right: 0 none;
	border-left: 0 none;
}

ul#primary-nav li ul {
/* very lite grey color, by now you should know what the rest mean */
	background: #ffffff;
	margin: 0px;
	margin-top: -1px;
	padding: 0px;
	position: absolute;
	width: auto;
	height: auto;
	display: none;
	position: absolute;
	z-index: 998;
	/*border-top: 1px solid #FFFFFF;
	border-bottom: 1px solid #374B51;*/
/*Info: The opacity property is  CSS3, however, will be valid just in CSS 3.1) http://jigsaw.w3.org/css-validator2) More Options chose CSS3 3) is full validate;)
	opacity: 0.95;*/
/* CSS 3 */
}
ul#primary-nav li ul ul {
/*Info: The opacity property is  CSS3, however, will be valid just in CSS 3.1) http://jigsaw.w3.org/css-validator2) More Options chose CSS3 3) is full validate;)*/
	opacity: 95;
/* CSS 3 */
}
/* Styling the appearance of menu items on hover */
#primary-nav li:hover,
#primary-nav li.menuh,
#primary-nav li.menuparenth,
#primary-nav li.menuactiveh {
/* set your image here, dark grey image */
	/*background:  url(../../uploads/ngrey/darknav.png) repeat-x left center;*/
	color: #000
}

/* The magic - set to work for up to a 3 level menu, but can be increased unlimited, for fourth level add
#primary-nav li:hover ul ul ul,
#primary-nav li.menuparenth ul ul ul,
*/
#primary-nav ul,
#primary-nav li:hover ul,
#primary-nav li:hover ul ul,
#primary-nav li.menuparenth ul,
#primary-nav li.menuparenth ul ul {
	display: none;
}
/* for fourth level add
#primary-nav ul ul ul li:hover ul,
#primary-nav ul ul ul li.menuparenth ul,
*/
#primary-nav li:hover ul,
#primary-nav ul li:hover ul,
#primary-nav ul ul li:hover ul,
#primary-nav li.menuparenth ul,
#primary-nav ul li.menuparenth ul,
#primary-nav ul ul li.menuparenth ul {
	display: block;
}

/* IE6 Hacks */
#primary-nav li li {
	float: left;
	clear: both;
}
#primary-nav li li a {
	height: 1%;
}
/* cmsms stylesheet: ecb_page-template-2-style 2 modified: 11/26/18 17:17:28 */
html, body{
  height: 100%;
}

html {
  background-color: #EFEAEA;
}

body {
/*  background-image: url(https://e-cargobikes.com/uploads/designs/ecb-mission-statement-copy/bg-image.png) ;
  background-position: center center;
  background-repeat:  no-repeat;
  background-attachment: fixed;
  background-size:  cover;
*/

  font-family: 'Lato', sans-serif;
  font-weight: 400;
  padding: 0;
  margin: 0;

}

.gridwrapper {
  position: relative;
  min-height: 100%;
}

#bg-image {
position: absolute;
width: 100vw;

}

.headimg {
  position: absolute;
  width: 100vw;
  z-index: 0;
}


.container {
  background: none;
  position: relative;
  height: 100%;
  padding: 7.5% 0;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;

}

@media (min-width: 992px) {
    .container {
        max-width: 1000px;
     }
}

.logo {
  position: absolute;
  top: 0;
  padding-top: 1.5vh;
  padding-left: 2vw;
  z-index: 999;
}

.ecblogo {
  width: 25vw;
  max-width: 500px;
  height: auto;
}

.bigtext {

/*  padding-right: 5vw;*/ 
/*  margin-bottom: 1em;*/
}

.bigtext h1 {
  font-family: "Oswald";
  color: #79b90f;
  text-align: right;
  font-weight: 700;
  font-size: 4em;
  text-transform: uppercase;
  margin: 0.1em 0.4em -0.4em auto;
  padding-bottom: 0;
}

.main {
  border-radius: 10px;
  padding: 1em 1.5em 3.5em 1.5em;
}

/*.breadcrumbs {
    margin: 0;
}

.breadcrumbs a{
  text-decoration: none;
}*/

a {
  text-decoration: none;
  color: inherit;
}

a:hover {
  font-weight: 400;
}

a img:hover {
  transform: scale(1.02);
}

section {
  background-color: #fff;
/*  border: 1px solid #ddd;*/
  max-width: 95vw;
  border-radius: 10px;
  padding: 1.5em 3em 2em 3em;
   margin-bottom: 5em;
/*  box-shadow: 0 0 2px 5px rgba(0, 0, 0, 0.3);*/
  overflow-wrap: break-word;
}

section ul {
  line-height: 2em;
  padding: 0;
}

section li {
  font-size: 1.25em;
  font-weight: 400;
  margin: 1em;
}

section p {
  text-align: justify;
  font-size: 1.25em;
}

section h2 {
  text-align: center;
  font-size: 2em;
  font-weight: 700;
  margin-top: 0.5em;
  margin-bottom: 1em;
}

section h3 {
  font-size: 1.5em;
  font-weight: 700;
  text-transform: capitalize;
}

nav {
/*  grid-row-start: 1;
  grid-column-start: 1;
  grid-column-end: 4;*/
  z-index: 1;    
}

nav ul {
  height: 4em;
  margin-top: 0;
  margin-bottom: 0;
/*  border-bottom: solid 1px #eee;
  -webkit-box-shadow: 4px 4px 6px -6px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 4px 4px 6px -6px rgba(0, 0, 0, 0.3);
  box-shadow: 4px 4px 6px -6px rgba(0, 0, 0, 0.3);*/
  display: flex;
  padding: 0;
  list-style: none;
  align-items: center;
  padding-left: 30vw;
  padding-right: 15vw;
/*  background-color: #eaeaea;*/
  colour: #eee;
}

nav ul li {
  flex: 1;
  text-align: center;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

article {
margin-top: 0.5em;
}

div.CGBlogSummary {
 background-color: #f7fbfc;
 border: 2px solid #79B920;
 border-radius: 5px;
 margin-top: 2em;
 margin-bottom: 2vh;
 padding: 1em;
 position: relative;
}

div.CGBlogSummary:hover {
 background-color: #f2f2f2;
 -webkit-transition: all .2s ease-in-out;
 transition: all .2s ease-in-out;
}

.CGBlogSummary span {
 position: absolute;
 width:100%;
 height:100%;
 top:0;
 left: 0;
}

div.CGBlogSummaryLink {
 color: #000;
 font-size: 1.5em;
 font-weight: 500;

}

div.CGBlogSummaryLink:hover {
 color: #79B920;
 font-weight: bold;
}

#CGBlogPostDetailTitle {
 font-size: 2em;
 margin-bottom: 0.3em;
}

#CGBlogPostDetailHorizRule {
 margin-bottom: 2em;
}

#CGBlogPostDetailSummary {
 margin-bottom: 1em;
 text-align: justify;
}

#CGBlogPostDetailContent h3 {
 margin-bottom: 0.2em;
}

#CGBlogPostDetailContent p {
 margin-top: 0;
}

#CGBlogPostDetailContent ul {
 margin-top: 0.2em;
 font-size: 1.25em;
}

#CGBlogPostDetailContent ul li {
 margin-bottom: 0.5em;
 line-height: 1.2em;
}

#jobs_apply_button {
display: block;
background-color: #79B920;
border-radius: 5px;
padding: 0.5em 1em 0.5em 1em;
text-align: center;
letter-spacing: 0.1em;
font-size: 1.25em;
font-weight: 700;
width: 35%;
float: right;
margin: 1em 1em 2em 0;
color: white;
}

#jobs_apply_button:hover {
background-color: #99E92C;
}

#jobs_apply_button a:hover {
font-weight: 700;
}

#jobs_back_button {
display: block;
padding-top: 1.5em;
font-size: 1.25em;
}

.portraitgrid {
display: grid;
/*grid-template-columns: 1fr 1fr 1fr;*/
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-template-rows: auto auto;
grid-gap: 1em;
}

.portrait {
text-align: center;
padding: 1em;
border: 1px solid #ddd;
border-radius: 5px;
}

.portrait h2 {
font-size: 1.25em;
font-weight: 700;
}

.portrait p {
font-size: 1em;
text-align: justify;
/*width: 95%;*/
margin-left: auto;
margin-right: auto; 

}

.portrait img {
max-width: 100%;
border: 1px solid #f2f2f2;
border-radius: 5px;
height: auto;
}

.NewsSummary {
border: 1px solid #ddd;
border-radius: 5px;
padding: 1.5em 2.1em 1.5em 2em;
margin-bottom: 2em;
/*  -webkit-box-shadow: 4px 4px 6px -6px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 4px 4px 6px -6px rgba(0, 0, 0, 0.3);
  box-shadow: 4px 4px 6px -6px rgba(0, 0, 0, 0.3);*/
overflow: auto;
}

.NewsSummaryField {
margin-top: 2em;
float: left;
white-space: nowrap;
}

.NewsSummaryField img {
  width: 150px;
}

.NewsSummaryText {
overflow: hidden;
padding: 0 1em 0 1.5em;
}

#NewsPostDetailTitle {
text-transform: capitalize;
}

/*#NewsPostDetailContent p{
text-align: center;
}*/

#NewsPostDetailContent p img {
text-align: center;
max-width: 100%;
height: auto;
}

hr#NewsPostDetailHorizRule {
border-style: solid; 
border-color: #ddd;

}


#contactgrid {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: auto auto;
align-items: stretch;
}

#innergrid-left {
grid-column-start: 1;
display: grid;
font-size: 1.25em;
}

#innergrid-left img{
margin-bottom: 0.5em;
}

#innergrid-right {
grid-column-start:2;
}

#addressbox {
grid-row-start: 1;
grid-column-start: 1;
}

#phonebox {
grid-row-start: 2;
grid-column-start: 1;
}

#emailbox {
grid-column-start: 1;
grid-row-start: 3;
}

#innergrid-left div div img {
width: 1em;
height: auto;
}

#contactpic img{
width: 100%;
border-radius: 5px;
margin: 4em 0 0 0;
}

footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #3a3a3a;
    color: #e5e5e5;
    font-size: 0.8em;
    height: 4em;
    padding-top: 2em;
    z-index: 1;
}

footer p {
  text-align: center;
  margin: auto;
}

#burger-shower {
    display: none;
}

.hamburger {
    display: none;
}

@media only screen and (max-width: 750px){

.ecblogo {
    width: 55vw;
}

#menuwrapper {
    padding: 1em;
}

#burger-shower {
    display: none;
}

.hamburger {
    display: block;
    float: right;
    padding-right: 0.5em;
}

label.hamburger img {
    width: 1em;
}

#burger-shower:checked ~ ul#primary-nav {
    display: block;
}

ul#primary-nav {
    display: none;
}

ul#primary-nav li {
    float: right;
}

ul#primary-nav li a {
    padding: 0.5em;
}

ul#primary-nav li ul a {
    text-align: right;
}

ul#primary-nav li.first_child.menuparent {
    padding-top: 0.5em;
}

ul#primary-nav li ul {
    float: right;
    position: relative;
    text-align: right;
}    

ul#primary-nav li.last_child {
    padding-bottom: 0.5em;
}

#primary-nav li li.last_child {
    padding-bottom: 0;
}

nav ul {
    height: 4em;
    display: block;
    padding: 0;
    list-style: none;
    padding: 0;
}

ul#primary-nav {
    padding: 0;
}

nav ul li {
    width: 90vw;
    text-align: right;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.bigtext {
    padding-top: 25vw;
}

.bigtext h1 {
    font-size: 2em;
}

.main {
    padding: 0.3em 0.5em 2.5em 0.5em;
}

section {
    padding: 1.5em;
    margin-bottom: 2.5em;
    
}

section p {
    margin-bottom: 1.5em;
}

}