@charset "UTF-8";
/* CSS Document */
body{background-color:#FFF; font-family: sans-serif; font-weight:100; margin:0; padding:0; }
html {height:100%;}

h1{color:#FFFFFF; font-weight:100; font-size:180%;padding-top:2em;}
h2{color:#FFFFFF; font-size:120%; padding:1em 0 0 0;}
h2.h2about{color:#123859; font-size:190%; font-weight:100; }
h2.h2believe{color:#123859; font-size:190%; font-weight:100; }
h2.h2why{font-size:200%; font-weight:100; }
h2.h2tips{color:#123859; font-size:190%; font-weight:100; }

h3{color:#123859; font-size:100%; font-weight:400;}
h4{margin-bottom:0; margin-top:0;}
h5{font-size: 1.5em; color: #26282C;     margin-top: 0;}
.mainContainer{width:100%; text-align:center; position:relative; top:7em; }
.sectionContainer{max-width:60em; margin:auto;text-align:left; padding:0 1em; }
.div33{float:left; width:29%; text-align:center; padding:5em 2%;}
.div25{float:left; width:19%; text-align:center; padding:5em 3%;}
.div50{float:left; width:48%; text-align:center; padding:1em 1%;}
.div50 img{max-width: 60%;}
.topLink{position:fixed; bottom:0; right:0; display:none;}


/*TOPMENU*/
.topHeader{top:0; position:fixed; background-color:#FFFFFF; width:100%; height: 7em;text-align:center;  z-index:300; }
.topmenuRight {text-align:left; padding-top: 1em;     padding-bottom: .5em; }
.topmenuRight a{}
.topmenuLeftImage {text-align: left;    margin-top: 1em;} .topmenuLeftImage img{width:300px; max-width:50%; height:auto;}
.topMenuButton {text-transform:uppercase; padding-right:1em; display:inline; display:inline-block;}

#navigation-menu{
	display: none;
	position: relative;
    text-align: left;
    top: 0;
    left: 4em;
    width: 20em;
    padding: 1em 1em 1em 1em;
    background-color: #fff;
    color: #123859;
}
#navigation-menu ul{list-style-type: none; padding:0; margin:0; }
.menu-item{background-color: #ffffff; padding-bottom:1em;}

/*Welcome*/
.welcomeContainer{background-color:#123859; color:#FFFFFF; }
.welcomeImg{width: 100%; height: auto;    }
.welcomeTop{ }
.welcomeTop h2{display:inline; padding: 0; margin-right:1em; font-weight:normal; font-size:100%; }
.welcomeBottom{ padding-bottom: 4em;}
.welcomeBottomLeft{width:70%;}
.welcomeBottomRight{width:20%; text-align:right; padding:0 5%;}

/*About*/
.aboutContainer{color:#123859;  padding: 1em 0; }
.aboutContentIcon {font-size: 4em; margin-top:0.5em;}

/*Why us*/
.whyContainer{background-color:#123859; color:#FFFFFF; }
.whyContainerImg{height:100%; }
.whyContainer ul {list-style-type: none;  margin-left: 0;}
.whyContainer li {margin-bottom: 1em;   font-weight: 100; }

/*Tips*/
.tipsContainer{color:#123859; margin-top:2em;}
.tipsContainer ul {list-style-type: none;  margin-left: 0;}
.tipsContainer li {margin-bottom: 1em;   font-weight: 100; }

/*Projects*/
.projectContainer{color:#123859; padding:1em 0; }
.projectContainerItem{float:left; width:21%; padding:4em 2% 2em 2%;}
.projectContainerItem3{width:28%; }
.projectContainerItemImg {width:100%; height:auto;}
.tagItem{font-size: 80%; color: #999;}




/*New*/
.newContainer{ background-color:#123859; color:#FFFFFF; margin-top:2em; padding: 2em 0 5em 0;}

/*elearning explained*/
.eeRight {width:38%; height:auto; float:right; margin:3em 2% 0 0;}
.eeLeft{width:60%; float:left;}
.eeVideo{border:0.1em solid #123859;}
.youtube{max-width: 100%;}
/*Testimonials*/
.testimonialsContainer{padding:2em 0; }
.testimonialsContainer .div33{ background-color:#F9F9F9; border-top:0.3em solid #123859; border-radius:0.3em; text-align:left; font-size:90%; width:25%; padding:1em 2%; margin:3em 2% 2em 2%;}
.testimonialsContainer p{}
.testimonialsClient{color:#123859; font-weight:400;}
.testimonialsOrg{color:#BAB6B6;font-weight:400;}

/*Contact*/
.contactContainer{background-color:#49D55B; color:#1b1b1b;    padding: 2em 0;}
.contactContainer h2, .contactContainer h3{color: #000000;}
.contactContentIcon{font-size:2em; color:#1b1b1b;}
.contactContainer ul {list-style-type: none;  margin-left: 0; display:inline;}
.contactContainer li {margin-bottom: 1em;   font-weight: 100; }

/*LOGOS*/
.logoContainer{float:left; width:28%; padding:5em 2%;}
.logoContainerTop{padding-bottom: 1em;} .logoContainerBottom{padding-top: 1em;}

/*POSTS*/
.postsContainer{background-color:#000000; color:#FFFFFF;     top: 1em; }
.postsContainer p{margin:1em 0 0 0;}

/*FOOTER*/
.footerContainer{background-color:#26282C; color:#FFFFFF; height:3em;     top: 0; display:none;}

/*BLOG*/
.blogContainer {background-color:#F0F4F6; }
.blogContainer h1{color:#123859; padding-top:1em;}
.blogContainer h2{color:#123859; padding-top:2em;}
.blogContainer h2.block{background-color: #123859; color: #fff; padding: 1em;}
.blogContainer h3{color:#666464; font-size:80%;}
.blogLeft {width:60%;} .blogRight{width:35%;}
.blogItemContainer {border-bottom:0.1em dashed #666464;}
.blogItemContainer2 {
	background: #e8e8e8;
	padding: 2em;
	margin-top: 2em;
	border-bottom: 0;
	text-align: left;
}
.blogItemContainer2 h2{padding-top:0;margin-top:0;}
.blogItemContainer1 {border-bottom: 0;}
.blogImageRight{width:40%; height:auto; float:right; margin:0 0 1em 1em;}
.blogImageRightSmall{width:20%; height:auto; float:right; margin:0 0 1em 2em;}
.blogImageLeft{width:20%; height:auto; float:left; margin:0 2em 1em 0;}
.blogImageLeftHalf{width:45%; height:auto; float:left; margin:0 5% 1em 0;}
.blogImageRightHalf{width:50%; height:auto; float:left; margin: 0 0 1em 0;}
.blogImageLeft img, .blogImageLeftHalf img, .blogImageRightSmall img{width:100%;}
.blogImageCentre{width:100%; height: auto; margin-top:1em; margin-bottom: 1em;}
.blogImageMid{margin:2em auto; max-width: 100%;}
.blogImageRightPortrait{width:40%; height:auto; float:right; margin:0 0 2em 2em;}
.blogImageRightPortraitSmall{width:20%; height:auto; float:right; margin:0 0 2em 2em;}
.blogImageLeftPortraitSmall{width:20%; height:auto; float:left; margin:0 2em 2em 0;}
.blogImageRightLandscape{width:60%; height:auto; float:right; margin:2em 0 2em 2em;}
.blogRef{position:relative; top:-3em; }
.extract{color:#123859; font-weight:500; font-style:italic; font-size:120%; padding:0 3em 0 2em;  }
.extract::before {content:'"';     font-family: cursive; font-size: 3em;}
/*.extract::after {content:',,';     font-family: cursive; font-size: 3em;     margin-left: .2em;}*/
.twitterbutton {float:right; margin-bottom:0.5em;}
.imageInfographic{width:60%; height:auto; float:right; margin:1em 0 2em 4em;}
.videoSegment {width:32%; height:auto; float:left; margin-bottom:2em;    margin-top: 1.6em;}
.downloadIcon{float: left; max-width: 100%;}

/*Believe*/
.believeContainer{ background-color:#FFE73C; color:#1b1b1b; margin-top:2em; padding: 2em 0 5em 0;}
.believeContainer h2, .believeContainer h3{color: #000000;}
.believeContentIcon img{width: 100%; height: auto; margin-top:0.5em;}
.believeContainer .div25{padding-top:0; padding-bottom:0;}
.valuesContainer{margin-top: 3em; border-bottom: 0; padding: 3em; background-color: #fff;}
.valuesContainer .left{width:25%; }
.valuesContainer .right{width:65%;}
.valuesContainer img{width: 100%; }
.valuesContainer h2{font-size: 1.5em; color: #26282C;     margin-top: 0; padding-top: 0}
.valuesContainer h3{font-size: 1.5em; color: #123859;     margin-top: 0;}
.valuesContainer .left img{ border-radius: 50% }

/*form*/
.formTextInput{width:90%;padding:1em; font-size:80%;}
.formTextArea{width:90%; min-height:5em; padding:1em; font-size:80%;}
.formTextAreaLarge{min-height:10em; margin-bottom:2em;}
#submitBtn{cursor:pointer; width:50%; margin:2em 0; background-color:#49D55B;}

/*GENERAL*/
.left{float:left;} .right{float:right;}
.div30{width:30%; margin:0 2em 2em 0;}
.div45{float:left;width:46%; margin:0 2%;}
.div45right{float:right;width:46%;     margin: 0 0 1em 5%;}
.div45left{float:left;width:46%;     margin: 0 5% 1em  0;}
.textLeft{text-align: left;} .textRight{text-align: right;}
a {color:#123859; text-decoration:none;} a:hover{text-decoration:underline;}
a.underline{text-decoration:underline;}
a.black{color: #000;}
.clearBoth{clear:both;} .centred{text-align:center;}
.centred{text-align: center;}
.centredBlock { max-width: 40em;     margin-left: auto; margin-right: auto;}
.button{ background-color:#FFCA2A; border-radius:1em; padding:1em; text-transform:uppercase; text-align:center;  font-weight:400;}
a.contactsA{color:#000000;}
a.postsA {color:#FFFFFF;}
a.buttonA{color:#1e5e89;}
 a.contactsAU {text-decoration:underline;}
 .newContainer a{color:#FFFFFF;}
.blogItemContainer .button{width:50%; margin-left:auto; margin-right:auto;}
.blogItemContainer .buttonLeft{margin-left:0;}
.button1{    cursor: pointer; display: inline; margin-right: 0.5em;}
.borderDark{border: 1em solid #26282c; border-radius: 1em;}
.inline{    display: inline; width: 49%; }
table.ela-process{width: 100%;   background-color: #FFF;}
.noBorder{border: none;}
table.ela-process th{font-weight: bold; text-align: left; width:30%; border:1px solid #123859; padding: 0.5em;}
table.ela-process td{vertical-align: top; border:1px solid #123859; padding: 0.5em;}

/*Smaller screens*/
@media only screen and (max-width: 50em) {
	.eeLeft, .eeRight {float:none; width:100%; margin:0; }
	.eeRight{text-align:center; margin-top:2em;}
}


/*MOBILE SPECIFIC STYLES*/
@media only screen and (max-width: 40em) {
.left, .right{float:none; width:100%; padding:0; margin:0; text-align:center;}
.blogImageLeft, .blogImageRightSmall{     width: 70%; margin-left: 15%; margin-right: 15%;}
.blogImageLeftHalf, .blogImageRightHalf{      width: 100%; margin-left: 0; margin-right: 0;}
.inline{    display: block; width: 100%; margin-right: 0;}
.valuesContainer img { width: 50%; margin-bottom: 1em;}
.mainContainer{top:12em; }
.topHeader{top:0; height:10em; padding-top:2em; }
    .topmenuRight{margin-top:0;}  .topMenuButton{margin-bottom: 0.5em;}

.welcomeContainer{height:auto; padding-top:1em;}
.welcomeContainerImg{ background:none;}
.welcomeTop{ display:none;}
.welcomeBottom{ background:none; padding-bottom: 1em;}
.welcomeBottomLeft, .welcomeBottomRight{width:100%; margin-bottom:1em;}
.button {width:60%; margin:auto;}
	.button1{margin: 0;}
.blogItemContainer .buttonLeft {width:60%; margin:auto;}
h1{padding-top:1em; text-align:center;}
    h2{text-align:center;} h2.h2about{text-align: left;}


.whyContainerImg{background:none;}
.projectContainerItem, .div33, .div25, .div50, .eeLeft, .eeRight {float:none; width:100%;}
.div50 img{max-width: 60%;}
.testimonialsContainer .div33{float:none; width:94%;}
.div33, .div25 {padding:0;}
.div45right, .div45left{float: none; width: 94%; margin:0;}
.projectContainerItemImg {width:80%;}
.logoContainer {float:none; display:inline;}
.believeContentIcon img{width: 80%; }

.blogLeft{float:none; width:100%; text-align:left;} .blogRight{display:none;}
.blogItemContainer {text-align:center;} .blogItemContainer p, .blogItemContainer li {text-align:left;}
.blogImageRightPortrait, .blogImageRightLandscape, .imageInfographic, .videoSegment {float:none; margin:1em auto; width:100%;}

.valuesContainer .left, .valuesContainer .right {float:none; width:100%; padding:0; margin:0; text-align:center;}
.valuesContainer img { width: 50%; margin-bottom: 1em;}

#submitBtn{margin-left:auto; margin-right:auto;}

#navigation-menu{top: -2.2em;left: 0;width: 100%; }

.videoSparkIFrame, .eeVideo {width:90% !important; }

}

/*SMALL MOBILE SPECIFIC STYLES iphone 4, iphone 5 portrait, nexus 4 portrait, all small phones */
@media only screen and (max-width: 30em) {

}

/*DESKTOP SPECIFIC STYLES LAST*/
@media all and (min-width: 50em) {

}

@media screen and (min-width:0\0) {
    /* IE9 and IE10 rule sets go here */

}