﻿.wireframe-container {
   width: 66.19718%;
  float: left;
  margin-right: -100%;
  margin-left: 0%;
  clear: none;
  background: red;
}


body {
  margin: 0;
  font-size: 100%;

}

p
{
  padding: 0;
  margin: 0 0 20px 0;
  font-size: 1.5em;
}

@media (min-width: 46.875em) { 
  p {
	   font-size: 1.5em;
  }
}

ul, ol
{
  list-style: none;
  padding: 0;
  margin: 0;
}

h1, h2 {
  font-family: 'aldi_sued_regularregular', arial, sans-serif;
}

/******************************************* Site Wrapper */

.site-wrapper {
  position: relative;
  overflow: hidden;
  margin-top: 0px;
}

@media (min-width: 60.625em) {
  .site-wrapper {
  max-width: 970px;
  margin: auto;
  margin-top: 76px;
  }

   .home .site-wrapper {
  max-width: 970px;
  margin-top: 38px;
  }

}
@media (min-width: 73.125em) {
  .site-wrapper {
  max-width: 1170px;
  }
}

@media (min-width: 73.125em) {
  #home .site-wrapper {
  max-width: 1170px;
  }
}

/******************************************* Header */

header {
  background: #f8f8f8;
  position: relative;
  padding: 20px 20px;
  overflow: hidden;
}

header .header-block {
  overflow: hidden;
  width: 320px;
  margin: auto;
}
@media (min-width: 60.625em) {

  header .header-block {
  float: right;
  width: 400px;
  margin: 0 20px 0 0;
  }
}

header .search-box {
  background: white;
  height: 40px;
  margin-right: 0px;
  border: 1px solid black;
  text-align: center;
  padding-top: 8px;
  width: 250px;
}
@media (min-width: 60.625em) {

  header .search-box {
  float: right;
  width: 300px;
  margin-right: 50px;
  }
}




header .row {
  overflow: hidden;
}

@media (min-width: 60.625em) {
  header .row {
  padding: 50px 0 0 158px;
  }
}

header .logo img, header h1 {
  margin: auto;
  display: block;
  text-align: center;
}

header h1 {
  margin-top: 5px;
  font-size: 3.6em;
  color: #a0a0a0;
}

@media (min-width: 46.875em) {

  header .logo {
	float: left;
  }

  header h1 {
	margin: 40px 0 0 40px;
	float: left;
  }
}

/*@media (min-width: 60.625em) {
 header {
  height: 124px;
  }
}*/

/******************************************* Section */

section {
  display: block;
  overflow: hidden;
  -webkit-box-shadow: inset 0 23px 17px -15x rgba(0,0,0,.5);
  -moz-box-shadow: inset 0 23px 17px -15px rgba(0,0,0,.5);
  box-shadow: inset 0 23px 17px -15px rgba(0,0,0,.5);
  border-bottom: 0;
  padding-top: 30px !important;
}

/******************************************* Article */

article {
  clear: both;
  overflow: hidden;
  margin: 0 0 70px 0;
}
@media (min-width: 60.625em) {
  
  article {
  width: 776px;
  float: left;
  }
}
@media (min-width: 73.125em) {
  
  article {
  width: 970px;
  float: left;
  }
}
@media (min-width: 60.625em) {
  
  article .column-one {
  width: 270px;
  float: left;
  }
}
@media (min-width: 73.125em) {
  
  article .column-one {
  width: 385px;
  float: left;
  }
}
@media (min-width: 60.625em) {
  
  article .column-two {
  width: 500px;
  float: right;
  }
}
@media (min-width: 73.125em) {
  
  article .column-two {
  width: 580px;
  float: right;
  }
}

/******************************************* Aside */

aside {
  position: absolute;
  top: 0px;
  right: -200px;
  width: 200px;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;

  background: url('../img/pattern.jpg') repeat;
  color: #fff;
  font-weight: bold;
  padding: 0px 10px 10px 0;
  z-index: 15;
}

aside .fade {
position: absolute;
height: 100%;
background: url('../img/sidebar_gradient.png') top left repeat-y;
display: block;
width: 11px;
z-index: 10;
}

aside ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 60.625em) {
 
  aside {
  width: 200px;
  float: right;
  position: relative;
  right: auto;
  top: 0;
  transition: none;
  -webkit-transition: none;
  -moz-transition: none;
  }
}

aside .block, 
aside .awards-block {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #fff;
  overflow: hidden;
}

aside .carousel {
  max-height: 300px;
  overflow: scroll;
  overflow-x: hidden;
}

.advanced aside .carousel {
  max-height: none;
  overflow: hidden;
}

.block.did_you_know{
  border-top: none;
}

aside .block:nth-child(odd) {
  color: #fff;
}

aside .block p {
  text-align: center;
}

aside .block img {
  width: 72px;
  height: 72px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  margin-bottom: 20px;
}

aside .live_vacancies li {
  margin-bottom: 20px;
}

aside .did_you_know h2 {
  margin: 20px auto;
  display: block;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #ffc331;
  border: 5px solid #0db4de;
  color: #f57923;
  padding-top: 16px;
  text-align: center;
  text-transform: uppercase;
  font-size: 1.4em;
}

aside .did_you_know li p {
  text-align: center;
}

aside .apply_section a {
  background: #0db4de;
  border-radius: 50%;
  border: 5px solid yellow;
  padding: 5px;
  display: block;
  width: 72px;
  height: 72px;
  text-align: center;
  color: #1e3072;
  font-weight: 700;
  font-size: 1.4em;
  padding-top: 16px;
  text-decoration: none;
  margin: 20px auto;
  text-transform: uppercase;
}

aside .apply_section p {
  color: white;
  text-align: center;
}

aside .stores img {
  margin: 20px auto;
  display: block;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 5px solid #f57923;
}


aside .stores p {
  text-align: center;
}

aside .social_links {
	clear: both;
	padding-top: 18px;
	padding-left: 30px;
	padding-right: 40px;
	margin-top: 8px;
}

aside .social_links:after {
	content: '';
	display: block;
	clear: both;
}

aside .social_links li {
  float: left;
}

aside .social_links li a {
  background: url('../media/social_media_icons.png') 0 0 no-repeat;
  width: 60px;
  height: 61px;
  display: block;
}

aside .social_links li .facebook {
  background-position: 0px 0;
}

aside .social_links li .twitter {
  background-position: -120px 0;
}

aside .social_links li .linkedin {
  background-position: -60px 0;
}

aside .social_links li .reddit {
  background-position: -180px 0;
}

aside .social_links li .instagram {
  background-position: -240px 0; 
  margin: 0 auto;
}


aside .search form {
  position: relative;
}

aside .search input[type=submit] {
  background: none;
  background: url("../images/search.png") 0 0 no-repeat;
  border: none;
  text-indent: -100000px;
  position: absolute;
  top: 2px;
  right: 5px;
  width: 26px;
  height: 26px;
}

aside .search input[type=text] {
  padding: 5px;
  width: 100%;
}

aside .block.search {
  margin-top: 0;
  padding-top: 0;
}

#sidebar .controls {
	display: none;
  }

  .advanced #sidebar .controls {
	display: block;
	z-index: 1;
	position: relative;
  }

  #sidebar .controls .markers {
	text-align: center;
  }

  #sidebar .controls button {
	  display: inline-block;
	  padding: 0;
	  width: 12px;
	  height: 12px;
	  background: #fff;
	  border-radius: 50%;
	  text-indent: -10000px;
	  opacity: 0.6;
	  margin-right: 10px;
	  border: 0;
  }

  #sidebar .controls button:last-child {
	  margin-right: 0;
  }

  #sidebar .controls button:hover,
  #sidebar .controls .sticky {
	opacity: 1;
  }

  #sidebar .controls .sidebar-next {
	background-position: -11px 0;
  }

#sidebar .block {
	background-color: #28b1db;
	border-top-right-radius: 20px;
	border-bottom-right-radius: 20px;
	border-right: 8px solid #fbc332;
	border-top: 8px solid #fbc332;
	border-bottom: 8px solid #fbc332;
	padding: 15px;
	-webkit-box-shadow: 4px 10px 32px -10px rgba(0,0,0,0.75);
	-moz-box-shadow: 4px 10px 32px -10px rgba(0,0,0,0.75);
	box-shadow: 4px 10px 32px -10px rgba(0,0,0,0.75);
}

#sidebar .awards-block {
	background-color: #f2f2f2;
	border-top-right-radius: 20px;
	border-bottom-right-radius: 20px;
	border-right: 8px solid #0cb4de;
	border-top: 8px solid #0cb4de;
	border-bottom: 8px solid #0cb4de;
	padding: 15px;
	-webkit-box-shadow: 4px 10px 32px -10px rgba(0,0,0,0.75);
	-moz-box-shadow: 4px 10px 32px -10px rgba(0,0,0,0.75);
	box-shadow: 4px 10px 32px -10px rgba(0,0,0,0.75);
}

#sidebar .awards-block h2 {
	color: #a0a0a0;
	font-size: 2.4em;
	font-weight: normal;
}

#sidebar .awards-block p {
	color: #252f70;
}

#sidebar .awards-block img {
	display: block;
	margin-bottom: 10px;
	margin-left: auto;
	margin-right: auto;
}

#sidebar .block .slide{
	padding: 15px;
}


@media (min-width: 60.625em) {
  #sidebar {
	top: 0;
	bottom: 0;
	position: absolute;
	right: 0;
  }

  
}

@media (min-width: 60.625em) {
  #sidebar {
	top: 0;
	bottom: 0;
	position: absolute;
	right: 0;
  } 
}


.open {
  right: 0;
}

footer {
  background: #e5e5e5;
  position: relative;
  clear: both;
}

.apply-iframe footer {
  margin-top: 50px;
}

article {
  overflow: hidden;
}

article p {
  /*font-size: 1em;*/
  text-transform: none;
  text-align: left;
  margin-bottom: 20px;
}

.apply {
  background: #666;
  color: #fff;
}

/******************************************* Navigation Items ( Blocks on homepage) */

.navigation-items {
  overflow: hidden;
  padding: 0;
}

.navigation-items a li, .block-area-managers {
  list-style: none;
  padding: 20px;
  min-height: 300px;
  background: #e1e1e1;
  position: relative;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: center 0;
  font-family: 'aldi_sued_regularregular', arial, sans-serif;
}

.navigation-items li a {
  text-decoration: none;
}
/*.navigation-items li.block-graduate {
  background: url(../media/photo-person-02.jpg) 0 0 no-repeat;
}*/
.navigation-items li.block-graduate p {
  background: rgba(240, 64, 49, 0.8);
}

.navigation-items li.block-stores p {
  background: rgba(245, 121, 33, 0.8);
}

.navigation-items li.block-apprentice {

}

.navigation-items li.block-apprentice p {
  background: rgba(35, 37, 112, 0.8);
}

/*.navigation-items li.block-apprentice {
  background: url(../media/photo-person-01.jpg) 0 0 no-repeat;
}*/

.navigation-items li.block-parent {
  padding: 0;
  background: #f57921;
}

.navigation-items li.block-parent p {
  position: relative;
  height: 100%;
  padding-top: 50px;
}
/*.navigation-items li.block-placement {
  background: url(../media/photo-person-05.jpg) 0 0 no-repeat;
}*/

.navigation-items li.block-placement p {
  background: rgba(13, 180, 222, 0.8);
}

.navigation-items li.block-distribution {

  background-position: 0px -60px;
}

.navigation-items li.block-distribution p {
  background: rgba(240, 64, 49, 0.8);
}

.navigation-items li.block-placement p {
  background: rgba(13, 180, 222, 0.8);
}

.navigation-items li.block-distribution p {
  background: rgba(240, 64, 49, 0.8);
}

.navigation-items li.block-manager {
  padding: 0;
  background: #f04031;
}

.navigation-items li.block-manager p {
  position: relative;
  height: 100%;
  padding-top: 60px;
}
/*.navigation-items li.block-office {
  background: url(../media/photo-person-04.jpg) 0 0 no-repeat;
}*/

.navigation-items li.block-office p {
  background: rgba(13, 180, 222, 0.8);
}

.navigation-items li p {
  width: 100%;
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  margin: 0;
  padding: 10px 15px;
  color: white;
}
@media (min-width: 30em) {

  .navigation-items a li, .block-area-managers {
  width: 49%;
  margin: 0 1% 4px 0;
  float: left;
  height: 252px;
  }
}
@media (min-width: 60.625em) {

  .navigation-items a li, .block-area-managers {
  height: 252px;
  min-height: inherit;
  }
}


.column-one .navigation-items div {
  padding: 20px;
  background: #e1e1e1;
  margin-left: 1%;
}

@media (min-width: 30em) {

  .column-one .navigation-items div {
  width: 98%;
  float: none;
  }
}

/******************************************* New Stores */

.column-one .newstores {
  height: 300px;
  background: url(../media/aldi-new-stores.jpg) center center no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  margin: 0 0 4px 0;
  float: none;
  text-align: center;
  padding-top: 50px;
}

/*@media (min-width: 30em) {

  .column-one .newstores {
  width: 49%;
  float: left;
  margin: 0 0 4px 0;
  height: 306px;
  }
}*/

.column-two .bottom-new-stores-pod {
	  height: 300px;
	  background: url(../img/new-stores/NewStoreOpeningsSinglePod.jpg) center center no-repeat;
	  -webkit-background-size: cover;
	  -moz-background-size: cover;
	  -o-background-size: cover;
	  background-size: cover;
	  margin: 0 0 4px 0;
	  float: none;
	  text-align: center;
	  padding-top: 50px;
}

@media (min-width: 46.875em) {

  .column-two .bottom-new-stores-pod {
	width: 100%;
  }
}
@media (min-width: 60.625em) {

  .column-two .bottom-new-stores-pod {
	height: 252px;
	padding: 35px;
  }
}

.column-two .bottom-new-stores-pod h2{
	margin: 10px 0;
	color: white;
	font-size: 1.8em;
}

.column-two .bottom-new-stores-pod p{
	color: white;
	font-weight: 300;
	margin: 0;
	text-align: center;
	font-size: 1.5em;
	position:relative;
}

.column-two .bottom-new-stores-pod a {
	text-decoration: none;
}


@media (min-width: 46.875em) {
	.column-two .bottom-new-stores-pod img {
		margin-top: 50px;
	}
}

@media (min-width: 60.625em) {
	.column-two .bottom-new-stores-pod img {
		margin-top: 0px;
	}
}


@media (min-width: 46.875em) {

  .column-one .newstores {
  width: 100%;
  height: 300px;
  }
}
@media (min-width: 60.625em) {

  .column-one .newstores {
  height: 508px;
  padding: 50px;
  }
}

.column-one .newstores h2{
  margin: 40px 0 10px;
  color: white;
  font-size: 1.8em;
}

@media (min-width: 46.875em) {

  .column-one .newstores h2{
  margin: 30px 0 10px;
  }

}


@media (min-width: 60.625em) {

  .column-one .newstores h2{
  margin: 20px 0 10px;
  }

}

.column-one .newstores p {
  color: white;
  font-weight: 300;
  margin: 0;
  text-align: center;
  font-size: 1.5em;
  bottom:30px;
}

@media (min-width: 60.625em) {

  .column-one .newstores p {

  bottom:0;

  }
}

.column-one .newstores a {
  text-decoration: none;
}

.column-one .newstores img {
  margin-top: 25px;
}

@media (min-width: 46.875em) {
  .column-one .newstores img {
	margin-top: 50px;
  }
}

@media (min-width: 60.625em) {
  .column-one .newstores img {
	margin-top: 129px;
  }
}

/******************************************* Homepage Pods */

.column-one .aldi-pod {
  background: #fff;
  display: table;
  height: 250px;
  width: 100%;
}

.column-one .aldi-pod .aldi-logo {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.column-one .video, .column-one .xmas, .column-one .who-do-we-need-pod {
  height: 250px;
  background: #e1e1e1;
  width: 100%;
  margin-bottom: 5px;
}

/*@media (min-width: 30em) {

  .column-one .video, .column-one .xmas, .column-one .who-do-we-need-pod {
  margin-bottom: 4px;
  height: 150px;
  }
}*/
@media (min-width: 46.875em) {

  .column-one .video, .column-one .xmas, .column-one .who-do-we-need-pod {
  width: 100%;
  height: 308px;
  }
}

.column-one .xmas h2, .column-one .who-do-we-need-pod h2 {
  font-size: 1.1em;
  color: white;
}

.column-one .video h2 {
  font-size: 1.6em;
  color: white;
  padding: 0px 20px;
}

.column-one .video p {
  padding: 0px 20px;
}

.column-one .who-do-we-need-pod {
  text-align: center;
  padding-top: 70px;

  background: url(../media/grad-background-img.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

  .column-one .who-do-we-need-pod p {
	text-align: center;
	font-size: 1em;
	font-weight: 300;
	padding: 0 20px;
  }

.column-one .who-do-we-need-pod a {
  color: white;
  font-weight: 700;
  text-decoration: none;
  font-size: 1.6em;
}

@media (min-width: 30em) {
  
  .column-one .who-do-we-need-pod {
  padding-top: 20px;
   }
}

@media (min-width: 46.875em) {
  
  .column-one .who-do-we-need-pod {
  padding-top: 60px;
   }
}

@media (min-width: 60.625em) {
  
  .column-one .who-do-we-need-pod {
  padding-top: 80px;
   }
}

.column-one .who-do-we-need-pod img{
  display: block;
  margin: 0 auto 10px;
}

@media (min-width: 60.625em) {
  .column-one .video, .column-one .xmas, .column-one .who-do-we-need-pod {
  height: 252px;
  }
}

.column-one .wrapper-secondary {
  padding: 0;
}
/*@media (min-width: 30em) {

  .column-one .wrapper-secondary {
  float: right;
  width: 49%;
  margin: 0 1% 0 0;
  }
}*/
@media (min-width: 46.875em) {

  .column-one .wrapper-secondary {
  width: 100%;
  margin: 0;
  }
}

#home .search-box {
  background: white;
  height: 40px;
  margin-right: 0px;
  border: 1px solid black;
  text-align: center;
  padding-top: 8px;
  width: auto;
}
@media (min-width: 60.625em) {
  #home .search-box {
  width: 300px;
  margin-right: 0px;
  }
}

.apply-tab {
  position: absolute;
  display: block;
  background: url(../media/apply-btn.png) 0 0 no-repeat;
  top: 0px;
  width: 30px;
  height: 90px;
  text-align: center;
  left: -30px;
  text-indent: -99999px;
}
@media (min-width: 60.625em) {
  .apply-tab {
  display: none;
  }
}

/******************************************* Footer */

footer {
  position: relative;
  clear: both;
}

.awards-tab {
  background: #252f70;
  width: 140px;
  border-radius: 20px 20px 0 0;
  margin-left: -70px;
  left: 50%;
  position: absolute;
  top: -35px;
  color: #febf4b;
  padding: 10px;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
}

  .awards-tab img {
	margin-left: 4px;
  }

.primary-footer {
  z-index: 2;
  padding: 10px;
  overflow: hidden;
  background: #e5e5e5;
  font-size: 1.3em;
}

.primary-footer ul {
  margin: 0;
  padding: 0;
}

.primary-footer ul li {
  padding: 10px 0;
  border-bottom: 1px solid #fff;
  margin-bottom: 0;
  list-style: none;
  text-align: left;
  text-transform: none;
}

@media (min-width: 73.125em) {
  .primary-footer ul li {
	padding: 10px;
  }
}

.primary-footer ul li:first-child {
  margin-left: 0;
  padding-left: 0;
}

.primary-footer ul li a {
  color: #919191;
  text-decoration: none;
}

.primary-footer ul li a:hover {
  text-decoration: underline;
}

@media (min-width: 73.125em) {

  .primary-footer ul li {
  float: left;
  border-left: 1px solid #fff;
  border-bottom: 0;
  margin-left: 10px;
  padding: 0 0 0 10px;
  }

  .primary-footer ul li:first-child {
  border: none;
  }
}

/******************************************* Secondary Footer (Awards) */

.secondary-footer {
  background: #252f70;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  -ms-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  padding: 10px;
}

@media (min-width: 60.625em) {

  .secondary-footer {
	padding: 0px;
  }
}

.secondary-footer p {
	color: #fff;
	font-size: 1.3em;
	margin-bottom: 20px;
}

@media (min-width: 46.875em) {
  .secondary-footer p {
	float: left;
	width: 35%;
	margin-bottom: 0;
  }
}

.secondary-footer ul {
   padding: 0;
	margin: 0;
}

@media (min-width: 46.875em) {
  .secondary-footer ul {
	float: right;
	width: 60%;
  }
}

.secondary-footer li {
  list-style: none;
  text-align: center;
}

.secondary-footer li {
	float: left;
	margin-right: 10px;
	min-height: 80px;
  }

.secondary-footer li img {
  max-width: 94%;
}

.advanced .secondary-footer {
  /*height: 0;*/
  overflow: hidden;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
}

.secondary-footer.show {
  height: 140px;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
}

@media (min-width: 46.875em) {
  .secondary-footer.show {
	height: 100px;
  }
}



.fixed-aside {
  position: fixed;
  top: 39px;
  left: 1218px;
  z-index: 20;
  padding: 10px;
  -webkit-transition: none;
  -moz-transition: none;
}

section.cs-assetwall {
  padding: 30px 0;
}

  section.cs-assetwall h2 {
	margin-left: 30px;
  }


.walloverlay {
  background: black;
  background: rgba(0,0,0,0.8);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  display: none;
}

.graduate .walloverlay-content, .area-managers .walloverlay-content, .career-changers .walloverlay-content {
  margin: 120px 80px;
}

.industrial-placements .walloverlay-content {
  margin: 30px 80px;
}

.walloverlay-content img {
  display: block;
  margin: 0 auto 40px;
  width: 100%;
}

.walloverlay-content p, .walloverlay-content h3 {
  color: white;
}

  .walloverlay-content h3 {
	font-size:2em;
  }

.walloverlay #next, .walloverlay #previous {
  display: block;
  width: 39px;
  height: 71px;
  margin-top: -40px;
  position: absolute;
  top: 50%;
  cursor: pointer;
  text-indent: -99999px;
}

.walloverlay #next {
  right: 20px;
  background: url(../media/asset-wall-next-btn.png);
}

.walloverlay #previous {
  left: 20px;
  background: url(../media/asset-wall-prev-btn.png);
}

#container {
  position: relative;
  overflow: hidden;
}

  #container li:hover {
	cursor: pointer;
  }

#container .item {
  margin: 0;
  width: 100%;
}

#container .item img {
  width: 100%;
}

.wallpopupbox {
  padding: 20px 20px 0;
}

.img-title
{
  display: none;

}

@media (min-width: 30em) {

  /* imagewall labels*/
.img-title {
  width: 100%;
  z-index: 3;
  position: absolute;
  bottom: 0px;
  font-size: 8pt;
  display: block;
}

.img-title p {
  padding:5px;
  color: #ffffff;
  margin: 0;
  text-align: center;
  font-weight: bold;
}
  
  #container .item {
	overflow: hidden;
	padding-bottom: 15px;
	height: 105px;
  }

  #container .item img,
  #container .item .wallpopupbox {
	width: 50%;
	float: left;
  }

  #container .item .wallpopupbox {
	padding: 0 20px;
  }

  .advanced #container .item .wallpopupbox {
	display: none;
  }

  /* when JS is available */

  .advanced #container .item {
	position: relative;
	overflow: hidden;
	float: left;
	width: 50%;
  }

  .advanced #container .item img {
	position: absolute;
	top: 0;
	width: 101%; /* Removes subpixel gaps */
	display: block;
  }
}

@media (min-width: 46.875em) {


  .advanced #container .item-25 {
	width: 25%;
  }

  .advanced #container .item-50 {
	width: 50%;
  }

  .walloverlay-content img {
	display: block;
	margin: 0 auto 20px;
	width: 60%;
  }
}
@media (min-width: 60.625em) {
  #container .item {
	
	height: 114px;
  }
}













/******************************************* Locations */

section.cs-locations article {
  padding: 40px;
}

section.cs-locations span {
  width: 100%;
}
@media (min-width: 30em) {

  section.cs-locations .col-one {
  float: right;
  width: 40%;
  }
}
@media (min-width: 46.875em) {
  section.cs-locations .col-one {
  clear: left;
  float: left;
  }
}
@media (min-width: 30em) {
  section.cs-locations .col-two {
  width: 50%;
  float: left;
  }
}
@media (min-width: 60.625em) {
  section.cs-locations .col-two {
  float: right;
  }
}

section.cs-locations #map-block {
  position: relative;
  display: none;
  background: url(../media/map.png) 0 0 no-repeat;
}
@media (min-width: 30em) {
  section.cs-locations #map-block {
  display: block;
  background-size: 350px 500px;
  width: 100%;
  height: 500px;
  }
}

section.cs-locations #map-block.Atherstone {
  background: url(../media/map-top.png) 0 0 no-repeat;
  background-size: 350px 500px;
  width: 100%;
  height: 500px;
}

section.cs-locations #map-block.Middleton {
  background: url(../media/map-middle.png) 0 0 no-repeat;
  background-size: 350px 500px;
  width: 100%;
  height: 500px;
}

section.cs-locations #map-block.Darlington {
  background: url(../media/map-bottom.png) 0 0 no-repeat;
  background-size: 350px 500px;
  width: 100%;
  height: 500px;
}

section.cs-locations #map-block.Swindon {
  background: url(../media/map-bottom.png) 0 0 no-repeat;
  background-size: 350px 500px;
  width: 100%;
  height: 500px;
}

section.cs-locations #map-block.Chelmsford {
  background: url(../media/map-top.png) 0 0 no-repeat;
  background-size: 350px 500px;
  width: 100%;
  height: 500px;
}

section.cs-locations #map-block.Scotland {
  background: url(../media/map-middle.png) 0 0 no-repeat;
  background-size: 350px 500px;
  width: 100%;
  height: 500px;
}

section.cs-locations #map-block.Neston {
  background: url(../media/map-bottom.png) 0 0 no-repeat;
  background-size: 350px 500px;
  width: 100%;
  height: 500px;
}

section.cs-locations #regions {
  list-style: none;
  padding: 0;
  margin: 0;
}

section.cs-locations #regions li h3 {
  margin: 0;
  font-size: 1.5em;
}

section.cs-locations #regions a {
  color: #fff;
  text-decoration: none;
}
	
section.cs-locations #regions .expanded p {
  display: block;
}




#accordion h3, #accordion2 h3 {
  margin: 1em 0 0 0;
  background: #777;
  padding: 5px;
  
}

#accordion div, #accordion2 div {
  background: #777;
  padding: 5px;
}

@media (min-width: 60.625em) {
  #accordion2 {
  width: 80%;
  }
}

/******************************************* Introduction section */

@media (min-width: 30em) {
  #introduction .col-one {
  float: left;
  width: 48%;
  }
}

@media (min-width: 30em) {
  #introduction .col-two {
  float: right;
  width: 48%;
  }
}

#introduction .placeholder {
  width: 100%;
  margin-bottom: 20px;
}
@media (min-width: 46.875em) {

  #introduction .placeholder {
  max-width: 45%;
  float: left;
  margin: 0 20px 20px 0;
  }
}


#wall {
  position: relative;
}

/******************************************* Popup */

.overlay {
  background: #001e78;
  background: rgba(0, 30, 120, 0.9);
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  z-index: 60;
}


.popupbox {
  z-index: 70;
  background: white;
  padding: 100px;
  position: absolute;
  top: 25%;
  left: 50%;
  display: none;
  width: 300px;
  margin-left: -150px;
}


#storespopup {
  padding: 60px 20px 20px 20px;
  position: fixed;
  width: 90%;
  height: 80%;
  overflow-y: auto;
  top: 50px;
  left: 50%;
  margin-left: -45%;
  z-index: 70;
  display: none;
  font-size: 1.4em;
  text-align: left;
}

#storespopup ul {
  padding: 0;
}


#storespopup li {
  list-style: none;
  /*background: url(../media/open-icon.png) 98% 20px no-repeat;*/
  border-bottom: 1px solid #fff;
  padding-bottom: 10px;
  padding-left: 10px;
  overflow: hidden;
}

  #storespopup ul:focus {
	border: none;
	outline: none;
  }

#storespopup li.expanded {
  background: url(../media/shut-icon.png) 98% 20px no-repeat;
}

#storespopup li:hover {
  /*cursor: pointer;*/
}

#storespopup a {
  text-decoration: underline;
}

#storespopup h3 {
  color: #ffbe46;
  margin: 10px 0;
}

#storespopup h3 span {
  color: #fff;
  display: block;
}

#storespopup p {
  color: #fff;
}

#storespopup p a {
  color: #ffbe46;
}


.store-info-block {
  display: none;
  overflow: hidden;
}

  .store-map a {
	display: block;
	z-index: 50;
  }

.expanded .store-info, .expanded .store-img, .expanded .store-map {
  display: block;
}

.new-stores .store-info p {
  text-align: left;
  font-size: 1.2em;
}


.store-img img, .store-map {
   border: 2px solid white;
   margin-bottom:20px;
}

.store-img img, .store-map img {
	width: 100%;
  }

@media (min-width: 60.625em) {
  .new-stores .store-info {
	width: 200px;
	float: left;
	margin-right: 20px;
  }

  .new-stores .store-img {
	width: 325px;
	height: 100%;
	float: left;
	margin-right: 10px;
  }

  .new-stores .store-map {
	width: 249px;
	height: 249px;
	float: left;
  }

  #storespopup {
	padding: 60px 0px 20px 0px;
	width: 840px;
	top: 20%;
	left: 50%;
	margin-left: -420px;
  }
}

.close {
  text-align: center;
  color: #fff;
  position: absolute;
  font-size: 1.5em;
  top: 40px;
  right: 20px;
}

/******************************************* Assessment section */

#assessment .video-assessment {
  padding: 20px;
  background: #e5e5e5;
  margin-bottom: 20px;
  min-height: 200px;
  color: #999;
  font-size: 2em;
  text-align: center;
}
@media (min-width: 30em) {
  #assessment .video-assessment {
  width: 60%;
  float: left;
  }
}

@media (min-width: 30em) {
  #assessment .col-one {
  width: 35%;
  float: right;
  }
}

#assessment .col-two {
  background: #999;
  padding: 10px;
}
@media (min-width: 30em) {
  #assessment .col-two {
  width: 60%;
  margin-top: 20px;
  clear: left;
  }
}
@media (min-width: 46.875em) {
  #assessment .col-two {
  width: 60%;
  float: left;
  }
}

#assessment .cta-one {
  width: 48%;
  float: left;
  display: block;
  padding: 20px;
  background: #e5e5e5;
  min-height: 200px;
}

#assessment .cta-two {
  width: 48%;
  float: right;
  display: block;
  padding: 20px;
  background: #e5e5e5;
  min-height: 200px;
}

#assessment ul {
  margin: 0 0 0 0px;
  padding: 0;
}

#assessment li {
  padding: 0;
  list-style: none;
  overflow: hidden;
}

#assessment li i {
  background: url(../media/icon.png) 0 0 no-repeat;
  width: 30px;
  height: 30px;
  display: block;
  margin-bottom: 10px;
}
@media (min-width: 46.875em) {
  #assessment li i {
  float: left;
  margin: 0;
  }
}

@media (min-width: 46.875em) {
  #assessment li span {
  float: right;
  width: 80%;
  }
}

/******************************************* Video section */

#videos {
  position: relative;
  min-height: 450px;
}


#videos .video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}

#videos .video-container iframe,
#videos .video-container object,
#videos .video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#videos video {
  width: 100%;
  height: 100%;
  z-index: 4;
}

#videos .video--two {
  display: none;
}

#videos .video--three {
  display: none;
}

#videos .show {
  display: block;
}

/*#videos ul {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  overflow: hidden;
}

#videos ul li {
  float: left;
  width: 100px;
  margin-right: 10px;
  border: 1px solid #fff;
}*/

#videos .video-overlay {
  background: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  z-index: 10;
}

#videos .video-popup {
  z-index: 10;
  background: white;
  padding: 100px;
  position: absolute;
  top: 25%;
  left: 50%;
  display: none;
  width: 300px;
  margin-left: -150px;
}

#videos .close {
  background: white;
  padding: 5px;
  text-align: center;
  color: #333;
  position: absolute;
  top: 20px;
  right: 20px;
}

.home .video-col_one img {
  height: 100% !important;
  margin: 0 !important;
}

.home .video-col_one .video-overlay {
  padding-top: 0;
}

.video .video-overlay img {
  width: 72px;
  height: 72px;   
}

.video-overlay .centralised {
  left: 50%;  
  margin-left: -33px;
  top: 50%; 
  margin-top: -50px;
  position: absolute;
}

.wrapper-secondary .video-overlay .centralised {
  left: 50%;  
  margin-left: -33px;
  top: 40px;  
  margin-top: 0;
  position: absolute;
  z-index: 11;
}

.wrapper-secondary .video-overlay .featured-img {
  position: absolute;
  z-index: 10;
  background-color: #000;
  width: 100%;
}

 .wrapper-secondary .video-overlay .featured-img img {
   opacity: .3;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
	height: 252px !important;
	width: auto;
	overflow: hidden;
	float: right;
 }
  @media (min-width: 34em) and (max-width: 60.625em) {
	.wrapper-secondary .video-overlay .featured-img img {
	height: auto !important;
	width: 100%;
	 }
}

.wrapper-secondary .pod-content {
  position: absolute;
  top: 140px;
  width: 90%;
  margin-left: -45%;
  left: 50%;
  z-index: 11;
}

.embed-container { display:none; position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; height: auto; } 
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.video .video-preview {
  overflow: hidden;
}

.hide {
  display: none;
}

.button-image-hero {
  width: 100%;
}

/******************************************* Benefits & Application */

.black-on-white, .white-on-blue
{
  padding: 30px;
}

.cs-carousel.black-on-white {
  padding: 0;
  border-bottom: none;
  position: relative;
}

.white-on-blue {
  background: #252e6f
}

.white-on-blue p, .white-on-blue h2, .white-on-blue h4, .white-on-blue ul, .white-on-blue a {
  color: #fff;
}

section.intro-paragraph-width-narrow ul, section.intro-paragraph-width-full ul {
  overflow: hidden;
  margin: 0;
  list-style: none;
  padding: 0;
  margin: 0;
}

.benefits-list {
  list-style: none;
  margin: 0;
  padding: 0;
  clear: both;
}

.right-aligned .benefits-list {
    clear: none;
    float: right;
    width: 100%;
}

.benefits-list li{
  padding: 10px;
  text-align: center;
  list-style: none;
  font-size: 1.4em;
}

.benefits-list li p {
  font-size: 1em;
  text-align: justify !important;
}

section.application-process .benefits-list li p {
  text-align: left !important;
}

@media (min-width: 46.875em) {
  .benefits-list li{
	font-size: 1.4em;
  }
}

@media (min-width: 30em) {
  .benefits-list li {
	width: 48%;
	vertical-align: top;
	display: inline-block;
	padding: 20px;
  }

  .right-aligned .benefits-list li {
      display: block;
      margin-top: -70px;
  }
}



@media (min-width: 46.875em) {

  .role-content .benefits-list li, .tabbed-content .benefits-list li {
      width: 21%;
  }

  .benefits-list li {
	width: 30%;
	margin: 0 1.5%;
  }

	 section.application-process .right {
	   float: left; 
	   width: 50%;
   }

	 section.application-process .right p {
	   padding-right: 13%;
   }

   section.application-process .left {
	   float: left; 
	   width: 45%;
   }
}

section.application-process .right .list-vimeo-video-preview img {
		width: 100%;
		height: auto;
   }

section.application-process {
  background: #282d68;
}

section.application-process .title {
  padding: 20px 0 20px 20px;
}

section.application-process .title .trafalgar {
  color: #ffffff;
}


section.application-process .col-one {
  padding: 0 20px;
  color: #ffffff;
}

section.application-process .benefits-list li {
	width: 100%;
	height: auto;
	vertical-align: top;
	display: inline-block;
	padding: 20px;
	border: 3px solid #ffffff;
	float: left;
	margin: 0;
	position: relative;
	padding-left: 40px;
}

section.application-process .benefits-list li h4{
  margin-top: 15px; 
  color: #ffffff;
}

section.application-process .benefits-list li p{
  color: #ffffff;
}

section.application-process .benefits-list li.step_1 {
  background-color: #00b2dc;
}

section.application-process .benefits-list li.step_2 {
  background-color: #1abde1;  
}

section.application-process .benefits-list li.step_3 {
  background-color: #33c5e5;
}

section.application-process .benefits-list li.step_4 {
  background-color: #4dcce8;
}

section.application-process .benefits-list li.step_5 {
  background-color: #66d3eb;
}

@media (min-width: 46.875em) {
  
  section.application-process .benefits-list {
	clear: both;
  }

  section.application-process .benefits-list:after {
	content: '';
	clear: both;
	display: block;
  }

  section.application-process .benefits-list li {
	width: 33.33%;
	height: 312px;
	vertical-align: top;
	display: inline-block;
	padding: 20px;
	border: 3px solid #ffffff;
	float: left;
	margin: 0;
	position: relative;
	padding-left: 40px;
  }

  section.application-process .benefits-list li:first-child, 
  section.application-process .benefits-list li:nth-child(4) {
	padding-left: 20px;
  } 


  section.application-process .benefits-list li.step_1 {
	background-color: #00b2dc;

  }

  section.application-process .benefits-list li.step_1:after {
	content: '';
	display: block;
	  width: 45px;
	  height: 330px;
	  position: absolute;
	  top: -3px;
	  right: -45px;
	  z-index: 8;
	background-image: url('../img/step_1.png');

  }

section.application-process .benefits-list li.step_1:last-child:after {
   content: '';
   display: block;
   position: absolute;
   z-index: 8;
	background-image: none;
  }

  section.application-process .benefits-list li.step_2 {
	background-color: #1abde1;
	z-index: 6; 
  }

  section.application-process .benefits-list li.step_2:after {
	content: '';
	display: block;
	  width: 45px;
	  height: 330px;
	position: absolute;
	  top: -3px;
	  right: -45px;
	  z-index: 7;
	background-image: url('../img/step_2.png');
  }

  section.application-process .benefits-list li.step_3 {
	background-color: #33c5e5;
	z-index: 5;
  }

  section.application-process .benefits-list li.step_4 {
	background-color: #4dcce8;
	z-index: 4;
  }

  section.application-process .benefits-list li.step_4:after {
	content: '';
	display: block;
	  width: 45px;
	  height: 330px;
	position: absolute;
	  top: -3px;
	  right: -45px;
	  z-index: 5;
	background-image: url('../img/step_4.png');
  }

  section.application-process .benefits-list li.step_5 {
	background-color: #66d3eb;
	z-index: 3;
  }

  section.application-process .benefits-list li.step_5:after {
	content: '';
	display: block;
	  width: 45px;
	  height: 330px;
	  position: absolute;
	  top: -3px;
	  right: -45px;
	  z-index: 4;
	background-image: url('../img/step_5.png');
  }

  section.application-process .benefits-list li.step_6 {
	z-index: 2;
  }
}

section.application-process .overlay__video--container {
	padding-bottom: 20px;
}

section.intro-paragraph-width-narrow li p, section.intro-paragraph-width-full li p {
  text-align: center;
  font-size: 1em;
  margin-bottom: 10px;
  /*display: none;*/
}

section.intro-paragraph-width-narrow li p.open, section.intro-paragraph-width-full li p.open {
  display: block;
}

/*section.intro-paragraph-width-narrow li p strong, section.intro-paragraph-width-full li p strong {
  display: block;
}*/

@media (min-width: 30em) {
  section.intro-paragraph-width-narrow li p, section.intro-paragraph-width-full li p {
  display: block;
  font-size: 1em;
  }
}

section.intro-paragraph-width-narrow li img, section.intro-paragraph-width-full li img {
  margin-bottom: 15px;
}

/*section.intro-paragraph-width-narrow strong, section.intro-paragraph-width-full strong {
  display: block;
}*/

.benefits-second-layout
{
  padding: 30px;
}

.benefits-second-layout,
.summary-columns-two,
#information-for-parents-and-teachers {
  background: url(../media/coloured-strip-50pc.gif) 0 bottom no-repeat;
}

#information-for-parents-and-teachers .trafalgar:before {
  background: url(../media/title-background-orange-img.png) 0 0 no-repeat;
}

@media (min-width: 46.875em) {
  .benefits-second-layout .col-one
  {
  width: 100%;
  }

    .benefits-second-layout.right-aligned .col-one {
        width: 73%;
        float: left;
    }

    .benefits-second-layout.right-aligned .col-one.col-wide {
        width: 100%;
    }

  .benefits-second-layout .col-two
  {
  width: 100%;
  }

  .benefits-second-layout.right-aligned .col-two
  {
  width: 23%;
  float: right;
  }

  .benefits-second-layout .inner-col-one
  {
  float: left;
  width: 48%;
  }

  .benefits-second-layout .inner-col-two
  {
  float: right;
  width: 48%;
  }

}

@media (min-width: 30em) {
  .benefits-second-layout .benefits-list li
  {
  width: 30%;
  margin: 0;
  }

  .benefits-second-layout.right-aligned .benefits-list li
  {
  width: 100%;
  margin: 0;
  }
}


/*#apply {
  background: #777;
  padding: 40px;
  color: #fff;
  text-align: center;
  font-weight: 700;
}*/

#benefits .double-pica {
  font-size: 2.4em;
}

.video-panel
{
  margin-top: 5%;
  width: 100%;
}

.video-panel-preview
{
  width: 100%;
}

.video-panel hr
{
  background-color: #868dbf;
  margin-bottom: 6%;
  margin-left: -10%;
  margin-right: -10%;
  border: 0;
}
.video-panel-right p
{
  margin-bottom: 5%;
  margin-top: 8%;
}

.self-assessment-video .list-vimeo-video
{
  margin-bottom: 3%;
}

@media (min-width: 46.875em) {
  .video-panel
  {
	width: 100%;
  }

  .video-panel-right
  {
	float: right;
	width: 45%;
  }

  .video-panel .list-vimeo-video, .self-assessment-video .list-vimeo-video
  {
	float: left;
	width: 50%;
	margin-bottom: 20px;
  }
}

.list-vimeo-video-preview .thumbnail {
	border: 4px solid #fec232;
	border-radius: 20px;
	-webkit-box-shadow: 0px 10px 20px -4px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 10px 20px -4px rgba(0,0,0,0.75);
	box-shadow: 0px 10px 20px -4px rgba(0,0,0,0.75);
	width: 100%;
	height: auto;
}

/******************************************* Footer */

footer .wrapper {
  padding: 20px 0;
  }

.primary-footer .wrapper {
  padding: 0;
}

@media (min-width: 30em) {
  footer .wrapper {
  max-width: 480px;
  margin: auto;
  }
}

@media (min-width: 46.875em) {
  footer .wrapper {
  max-width: 750px;
  }
}
@media (min-width: 60.625em) {
  footer .wrapper {
  max-width: 970px;
  }
}
@media (min-width: 73.125em) {
  footer .wrapper {
  max-width: 1164px;
  }
}

.coloured-strip{
  width: 100%;
  background-color: #ffc233;
  text-align: center;
}

  .coloured-strip img {
	width: 100%;
	display: block;
	margin: auto;
  }

@media (min-width: 60.625em) {
  .coloured-strip img {
	width: auto;
  }
}

/******************************************* Video Pod */

#meet-our-placements {
  display: none; /* shown with js */
}

.videos {
  margin: 40px 0;
}

.videos .inner-wrapper {
  padding: 10px 30px;
}

.left-content
{
   width: 100%;
   padding: 0 30px;
   margin-top: 5%;
}

@media (min-width: 73.125em) {

  .left-content
  {
	 width: 30%;
	 float: left;
	margin-top: auto;
	 
  }
}

.video {
  position: relative;
  margin-bottom: 50px;
}

.video img {
  display: block;
  width: 100%;
}

.wrapper-secondary .video img {
  display: block;
  width: auto;
  margin: 10px auto 10px auto;
}

.video-overlay
{
  display: none;
}
.video .video-overlay {
  background: rgba(0, 0, 0, 0.7);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  padding-top: 90px;
  overflow: hidden;
}
@media (min-width: 30em) {
  .video .video-overlay {
  padding-top: 20px;
  }
}
@media (min-width: 46.875em) {
  .video .video-overlay {
  padding-top: 70px;
  /*height: 306px;*/
  }
}
@media (min-width: 60.625em) {
  .video .video-overlay {
  max-width: 970px;
  height: 100%;
  }
}

.video #play-button {
  cursor: pointer;
}

.video img {
  margin-bottom: 10px;
}

.video p {
  color: #fff;
  text-align: center;
}

.video-link:hover {
  cursor: pointer;
}

.video-navigation {
  overflow: hidden;
  list-style: none;
  margin: 40px 0 0 0;
  padding: 0;
}

  .video-navigation a {
	text-decoration: none;
  }

  .video-navigation li {
	float: left;
	padding: 0 20px;
	width: 100%;
  }

@media (min-width: 30em) {
  .video-navigation li {
	width: 50%;
  }
}

@media (min-width: 46.875em) {
  .video-navigation li {
	width: 31%;
  }
}


.video-navigation span {
  padding: 5px;
  color: white;
  text-decoration: none;
  display: block;
  font-size: 1.4em;
  font-weight: 700;
}


.video-1.video-container {
  margin-bottom: 0;
}

/******************************************* cs-standard-content */

.cs-standard-content {
  background: #282d68;
  padding: 20px;
}

.cs-standard-content a {
  color: #fff;
}

.cs-standard-content .text-block h2
.text-block h2 {
  margin: 0 0 1em 0;
  col
}

.cs-standard-content .text-block .columns-three {
  display: block;
}

.cs-standard-content h2, 
.cs-standard-content p,
.cs-standard-content ul li {
  color: #ffffff;
}

@media (min-width: 46.875em) {
  .cs-standard-content .text-block .columns-three {
	-moz-column-count: 3;
	-moz-column-gap: 30px;
	-webkit-column-count: 3;
	-webkit-column-gap: 30px;
	padding: 0;
  }

  .cs-standard-content .text-block .columns-three p {
	margin: 0 0 1.5em 0;
  }
}

@media (min-width: 60.625em){

  .cs-list-video .three-columns {
	clear: both;
  }

  .cs-list-video .three-columns:after {
	clear: both;
	content: '';
	display: block;
  }

  .cs-standard-content .column-one, .cs-standard-content .column-two, .cs-standard-content .column-three,
  .cs-list-video .column-one, .cs-list-video .column-two, .cs-list-video .column-three {
  float: left;
  width: 30%;
  margin-left: 3%;
  }



  .cs-standard-content .column-one {
	margin-left: 0;
  }
}


.cs-list-video .thumbnail-div .overlay-tint {
  background: none;
}

.cs-list-video .list-vimeo-video-preview .thumbnail {
  border-color: #0cb4de;
}

.cs-list-video .list-vimeo-video-preview .play-button {
  border: none;
  border-radius: 0;
} 

/******************************************* FAQs */

#faqs {
  margin: 0;
  padding: 0;
  width: 100%;
}

@media (min-width: 46.875em) {
  #faqs {
	padding: 0;
	width: 48%;
	float: left;
	margin-right: 1%;
  }
}

#faqs li {
  margin-bottom: 2px;
  background: #252f70;
  cursor: pointer;
  padding: 8px 40px 8px 8px;
  list-style: none;
  position: relative;
}

#faqs li span {
  background: url(../img/faq_open.png) no-repeat;
  position: absolute;
  width: 18px;
  height: 18px;
  top: 10px;
  right: 10px;
}

#faqs li.expanded span {
  background: url(../img/faq_close.png) no-repeat;
}

#faqs li p {
  display: none;
  margin-top: 10px;
  color: #ffffff;
}

#faqs li h3 {
  margin: 0;
  color: #ffffff;
  font-size: 1.4em;
}

#faqs a {
  color: #fff;
  text-decoration: none;
  }

.cs-list-video .benefits-list li {
	text-align: left;
	vertical-align: top;
	display: inline-block;
  }

@media (min-width: 46.875em) {
  .cs-list-video .benefits-list li {
	width: 47%;
	margin: 0 1%;
  }
}

@media (min-width: 46.875em) {
  .cs-list-video .col-one {
  width: 38%;
  float: left;
  }

  .cs-list-video .col-two {
	width: 58%;
	float: right;
  }
}

.cs-list-video  .benefits-list li p {
  text-align: left;
  }



/******************************************* Apply Footer */

.apply-footer {
  text-align: center;
  color: #282d68;
  width: 100%;
  margin: 0 auto 10px auto;
  clear: both;
  padding-top: 20px;
}

.apply-footer:after {
  display: block;
  clear: both;
  content: '';
}

.apply-footer p {
  text-align: left;
  margin-top: 1.1em;
  margin-bottom: 0;
  width: 80%;
  font-weight: bold;
  margin-left: auto;
  margin-right: auto;
}

.apply-button {
  background-color: #282d68;
  border: 5px solid #f47920;
  border-radius: 13px;
  color: white;
  text-align: center;
  padding: 6px 14px;
  text-decoration: none;
  font-size: 2.2em;
  font-family: 'aldi_sued_regularregular', arial, sans-serif;
  margin: .5em auto;
  display: inline-block;
}

@media (min-width: 30em) {

  .apply-footer p {
	float: left;
	width: 70%;
	margin-left: 0;
	margin-right: 0;
  }

  .apply-button {
	margin: .5em 1em .5em .5em;
	float: left;

  }

}

@media (min-width: 46.875em) {
  .apply-footer p {
	width: 80%;
  }

}



#application-process .apply-button
{
  margin: 0;
}

#apply-1- .apply-button
{
  display: block;
  margin: 0;
}

.apply-col 
{
  width:auto;
  text-align: center;
}



  .app-section-apply-button 
  {
  width : 80%;
  padding : 10px 0px;
  margin: 0 auto;
  display : block;
  }

@media screen and (min-width: 30em) 
{
  .app-section-apply-button
{
  width: 30%;
  margin: auto;
  padding : 0px 10px;
  display : inline-table;
}
}

@media screen and (min-width: 60.625em) {
	.app-section-apply-button
{
  width: 20%;
}
}

.cs-list .apply-button {
  margin-top: 30px;
}

.roles-list .apply-button, .summary-columns-two .apply-button {
  margin: 0;
}

.roles-list li, .content-list li {
  position: relative;
}


.roles-list .apply-button {
  position: absolute;
  bottom: 0;
}


/******************************************* 3 column layouts */

.columns-three 
{
  padding: 30px;
}

.columns-three .col-one
{

}

@media (min-width: 46.875em) {
  .columns-three .col-one
  {
  width: 38%;
  float: left;
  margin-right: 2%;
  }
}

/*.columns-three .col-two,
.columns-three .col-three
{
  width: 45%;
  float: left;
  margin: 0 2.5%;
}*/

@media (min-width: 46.875em) {
  .columns-three .col-two,
  .columns-three .col-three
  {
	width: 27%;
	float: left;
	margin: 0 0 0 3%;
  }
}

.columns-three .icon
{
  margin-bottom: 5px;
}

/******************************************* summary paragraph and 2 column layouts */

.summary-columns-two
{
  padding: 30px;
}

.summary-columns-two li
{
  margin-bottom: 40px;
}

@media (min-width: 46.875em) {

  .summary-columns-two li
  {
  width: 48%;
  display: inline-block;
  vertical-align: top;
  margin: 0 0 40px 0;
  padding-right: 40px;
  }
}

.summary-columns-two li h2
{
  margin: 5px 0 5px 0;
  font-size: 1.8em;
}

.summary-columns-two li h3
{
  margin: 0 0 5px 0;
  font-size: 2em;
}

.summary-columns-two li h4
{
  color: #f47920;
  margin: 0;
  font-size: 1.6em;
}

.summary-columns-two span
{
  font-size:1em;
}

/******************************************* Div with background image */

.background-img-container 
{
  background: #ffffff url(../media/who-were-looking-for.jpg) 0 0 no-repeat !important;

}

.stores .background-img-container.cs-self-evaluation {
  background: #021b6b url(../media/stores-selfassessment.jpg) 0 0 no-repeat;
}

.distribution .background-img-container.cs-self-evaluation {
  background: #021b6b url(../media/distribution-selfassessment.jpg) 0 0 no-repeat;
}


.industrial-placements .background-img-container 
{
  background: #021b6b url(../media/wwlf-ind-placements.jpg) 0 0 no-repeat !important;

}

.apprentices .background-img-container 
{
  background: #021b6b url(../media/wwlf-apprentices.jpg) 0 50px no-repeat;

}

.office .background-img-container,
.head-office .background-img-container {
  background: #021b6b url(../media/wwlf-offices.jpg) 0 0 no-repeat !important;

}



.background-img-container p, 
.background-img-container ul
{
  color: #fff;
}

.background-img-container ul
{
  /*font-size: 0.86em;*/
  list-style: disc;
  margin-left: 10px;
}

.background-img-container .trafalgar
{
  margin: 0 0 20px 0;
  padding: 0 10px;
  color: #fff;
}

.column-right
{
  padding: 20px;
}

@media (min-width: 46.875em) {
  .column-right
  {
  width: 65%;
  float: right;
  }

  .column-right .col-one
  {
  float: left;
  width: 45%;
  }

  .column-right .col-two
  {
  float: right;
  width: 52.5%;
  padding-left: 2.5%;
  }
}

/******************************************* Self Assessment */

.self-assessment h2 + p
{
  padding: 0 20px;
}

@media (min-width: 46.875em) {
  .self-assessment h2 + p
  {
  width: 45%;
  float: left;
  }
}

/******************************************* Stores Map */

.stores-map 
{
  padding: 30px;
}

.stores-map .col-two
{
  width: 70%;
  margin: auto;
}

@media (min-width: 46.875em) {

  .stores-map .col-one
  {
  float: left;
  width: 50%;
  }

  .stores-map .col-two
  {
  float: right;
  width: 50%;
  margin: inherit;
  }

}


/******************************************* Locations Map */

.cs-locations-col-one {
  width: 100%;
}

.cs-locations-col-two {
  display: none;
}

.cs-locations p {
  text-align: justify;
}

.cs-locations-col-one .countries li {
      display: block;
      background-color: #29b1db;
      padding: 15px 20px;
      font-size: 14px;
      font-weight: bold;
      color: #ffffff;
  }

  .cs-locations-col-one .countries li.active,
  .desktop .cs-locations-col-one .countries li:hover,
  .cs-locations-col-one .countries li:active {
      background-color: #282e68;
  } 

   .cs-locations-col-one .countries li ul {
       display: none;
   }

   .cs-locations-col-one .countries li.active ul {
       display: block;
   }
    
@media only screen and (min-width: 46.875em) {
  .desktop .cs-locations-col-one {
	width: 45%;
	margin-right: 5%;
	float: left;
  }

  .desktop .cs-locations-col-two {
	display: block;
	width: 40%;
	float: left;
	position: relative; 
  }

  .desktop-ie .cs-locations-col-two {
	padding-top: 57%;
  }
}

#map {
  width: 95%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.other_maps {
  width: 95%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.location-names {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
}

.desktop-ie .location-names {
  display: block;
}

.location-names li {
  position: absolute;
  z-index: 10;
}

.location-names li a {
  text-decoration: none;
  color: #262d71;
  font-weight: bold;
  font-size: 14px;
}

.location-names .atherstone {
  top: 64%;
  left: 65%;
}

.location-names .middleton {
  top: 53%;
  right: 40%;
  direction: rtl;
}

.location-names .darlington {
  top: 42%;
  left: 63%;
}

.location-names .swindon {
  top: 85%;
  right: 31%;
  direction: rtl;
}

.location-names .chelmsford {
  top: 74%;
  right: 10%;
  direction: rtl;
}

.location-names .neston {
  top: 60%;
  right: 46%;
  direction: rtl;
}

.location-names .bathgate {
  top: 26%;
  left: 46%;
}

.location-names .naas {
  top: 56%;
  right: 73%;
  direction: rtl;
}

.location-names .mitchelstown {
  top: 66%;
  left: 11%;
}

circle, 
text {
  pointer-events: none;
}


/* desktop map styles */

section.cs-locations #regions li:first-child {
    margin-top: 15px;
}

section.cs-locations #regions li {
  margin-bottom: 3px;
  background: url(../img/location_open.png) right 10px no-repeat;
  cursor: pointer;
  background-color: #fe920b;
  padding: 10px;
  color: #ffffff;
  font-size: .8em;
  border-radius: 5px;
}


section.cs-locations #regions li.expanded {
  background: url(../img/location_close.png) right 10px no-repeat;
  background-color: #fec232;
  color: #252f70;
  font-size: .7em;
  font-weight: normal;
}

section.cs-locations #regions li.expanded .jobs-container {
    margin-top: 10px;
    cursor: auto;
}

section.cs-locations #regions li.expanded .jobs-container h3 {
    margin-bottom: 5px;
} 

section.cs-locations #regions li.expanded .jobs-container span {
    font-size: 1.3em;

}

section.cs-locations #regions li.expanded .jobs-container span a{
    float: right;
    color: #252f70;
    margin-right: 8px;
    cursor: pointer;
}

section.cs-locations.desktop #regions li {
  border-radius: 5px;
  background: #fe920b;
  padding: 0;
  cursor: default;
  font-size: .7em;
  font-weight: normal;
  margin-top: 15px;
}

section.cs-locations #country_summary li {
  border-radius: 5px;
  background: #fec232;
  padding: 10px;
  cursor: default;
  font-size: .7em;
  font-weight: normal;
  margin-top: 15px;
  color: #252f70;
}

section.cs-locations #country_summary .info p {
    padding-top: 0;  
}

section.cs-locations.desktop #country_summary li {

  background: #fe920b;
  color: #fff;
}

section.cs-locations.desktop #regions li > h3,
section.cs-locations.desktop #country_summary li > h3 {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  padding: 8px 14px 14px;
  color: #282e68;
  background-color: #ffb619;
 
}

section.cs-locations.desktop #regions li p {
  margin: 0;
}

section.cs-locations.desktop #regions li .info {
  padding: 6px 14px 14px;
  color: #fff;
  margin-bottom: 20px;
}

section.cs-locations.desktop #regions li .info .jobs-container {
  margin-top: 20px;
}

section.cs-locations.desktop #regions li .info .jobs-container h3 {
  border: 0;
  background: none;
  padding: 0;
  margin-bottom: 10px;
  font-size: 1.5em;
}

section.cs-locations.desktop #regions li .info .jobs-container .job {
  font-weight: bold;
  font-size: 1.5em;
}

section.cs-locations.desktop #regions li .info .jobs-container .job .job-apply {
  float: right;
}



.stores-map img
{
  width: 100%;
}

.stores-map .stores-btn {
  background: url(../media/stores-btn.png) 0 0 no-repeat;
  width: 279px;
  height: 44px;
  display: block;
  color: white;
  text-align: center;
  padding-top: 10px;
  text-decoration: none;
  font-size: 1.8em;
  font-family: 'aldi_sued_regularregular', arial, sans-serif;
  text-transform: uppercase;
  margin: 0 0 10px 0;
}

.cs-self-evaluation {
  background: #282d68;
  padding-bottom: 25px;
}

.cs-self-evaluation form {
  min-height: 360px;
  display: block;
  float: left;
}

.cs-self-evaluation fieldset {
  position: relative;
}

.cs-self-evaluation .trafalgar {
  color: #ffffff;
}

.cs-self-evaluation.background-img-container .trafalgar {
  color: #a0a0a0; 
}

.cs-self-evaluation p, 
.cs-self-evaluation ul
{
  color: #ffffff;
  font-weight: bold;
}

.cs-self-evaluation.background-img-container p, 
.cs-self-evaluation.background-img-container ul
{
  color: #252f70;
  font-weight: bold;
}


@media (min-width: 46.875em) { 
  .cs-self-evaluation .self-assess-col1 {
	width: 50%;
	float: left;
  }

  .self-assessment-video .list-vimeo-video {

  }
}

@media (min-width: 46.875em) { 
  .cs-self-evaluation form {
	  width: 48%;
	  margin-left: 2%;
  }
}

.self-assess-questions {
  background: #00b2dc;
  color: #ffffff;
  padding: 0;
  border-radius: 20px;
  -webkit-box-shadow: 10px 10px 20px -4px rgba(0,0,0,0.75);
  -moz-box-shadow: 10px 10px 20px -4px rgba(0,0,0,0.75);
  box-shadow: 10px 10px 20px -4px rgba(0,0,0,0.75);
}

.cs-self-evaluation .self-assess-questions p {
  color: #ffffff;
  font-weight: normal;
}

.background-img-container .self-assess-questions {
  background: #252f70;
}

.self-assess-questions li {
  list-style: none;
  margin: 0;
}

.self-assess-questions li ol li:last-child div {
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

.self-assess-question-wrap {
  padding: 0;
  margin: 0;
  border-bottom: 1px solid #a3e2f4;
}

.self-assess-submit button,
.self-assess-question-wrap button {
  display: block;
  padding: 10px 20px;
  float: right;
  background: #252f70;
  border-radius: 18px;
  border: 6px solid #fec232;
  color: #fff;
  font-size: 1.8em;
  font-family: 'aldi_sued_regularregular', arial, sans-serif;
}

.self-assess-question-wrap button {
  position: absolute;
  right: 10px;
  bottom: 10px;
}

.self-assess-question-wrap:last-child,
.advanced .self-assess-question-wrap {
  border-bottom: 0;
}

.self-assess-errors {
  padding: 30px;
}

.self-assess-errors p {
  margin-bottom: 0;
}

.self-assess-question-wrap.error,
.self-assess-errors {
  background: red; /* temporary */
}

.self-assess-question-heading {
  font-size: 2.8em;
  padding: 0 1em;
}

.self-assess-question-heading,
.self-assess-question {
  color: #fff;
  text-align: left;
  font-family: 'aldi_sued_regularregular', arial, sans-serif;
  padding-top: 1em;
}

.self-assess-question {
  margin-bottom: 20px;
  font-size: 1.7em;
  padding-left: 1em;
  padding-right: 1em;
  padding-bottom: 1em;
}

.self-assess-question-answer span {
  float: left;
  width: 88%;
  font-size: 1.6em;
  font-family: 'aldi_sued_regularregular', arial, sans-serif;
}

.self-assess-question-answer .self-assess-question-marker {
  width: 12%;
  font-weight: bold;
}

.self-assess-question-answer {
  position: relative;
  display: block;
  cursor: pointer;
  overflow: hidden;
}

.chosen-answer {
  cursor: default;
}

.chosen-answer .self-assess-question-answer div {
  background: #ef4031;
  border-top: 1px solid #ffffff;
  overflow: hidden;
  padding: 14px 28px;
  color: #ffffff;
}

.incorrect-answer .self-assess-question-answer div {
  background: #ef4031 !important;
  border-top: 1px solid #ffffff;
  overflow: hidden;
  padding: 14px 28px;
  color: #ffffff;
  border-radius: 0 !important;
}

.correct-answer .self-assess-question-answer div {
  background: #009d40 !important;
  border-top: 1px solid #ffffff;
  overflow: hidden;
  padding: 14px 28px;
  color: #ffffff;
  border-radius: 0 !important;
}

.self-assess-question-answer div {
  background: #f47920;
  border-top: 1px solid #ffffff;
  overflow: hidden;
  padding: 14px 28px;
  color: #ffffff;
}

.self-assess-question-answer div:hover {
  background: #dc6d1c;
}

.self-assess-question-answer input:checked + div,
.self-assess-question-answer.chosen-answer div {
  background: #f57921;
  overflow: hidden;
  padding: 14px 28px;
  color: white;
}

.self-assess-question-answer input {
  position: absolute;
  left: -120%;
  margin-right: 10px;
}

.self-assess-submit {
  padding: 25px 30px;
  overflow: hidden;
}

.self-assess-answer-result-copy {
  background: #f47920;
  color: #ffffff;
  margin-bottom: 0;
  padding-top: 1em;
  padding-left: 1em;
  padding-right: 1em;
  padding-bottom: 5em;
  font-family: 'aldi_sued_regularregular', arial, sans-serif;
  font-size: 1.6em;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
  border-top: 1px solid #ffffff;
}

.self-assess-summary {
  padding: 25px 30px;
  background: #26b1db;
  border-radius: 20px;
  color: #ffffff;
}

.self-assess-summary.correct-3,
.self-assess-summary.correct-4,
.self-assess-summary.correct-5 {
  background-color: #009d40;
}

.self-assess-grade,
.self-assess-grade-heading,
.self-assess-copy {
  text-align: center;
  margin-bottom: 12px;
}

.self-assess-grade {
  font-size: 3.4em;
}

.self-assess-grade-heading {
  font-size: 2em;
}

.self-assess-apply {
  margin-bottom: 0;
  padding-bottom: 10px;
}

.self-assess-apply a {
  display: block;
  padding: 10px 30px;
  background: #252f70;
  border: 6px solid #fec232;
  border-radius: 18px;
  color: #fff;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}



@media only screen and (min-width: 46.875em) {


  .self-assess-apply a {
	width: 50%;
	padding: 10px 30px;
	margin: 0 auto;
  }

  .self-assess-question-answer span {
	width: 92%;
  }

  .self-assess-question-answer .self-assess-question-marker {
	width: 8%;
  }
}

/******************************************* Location map */

.cs-locations-col-one {
  width: 100%;
}

.cs-locations-col-two {
  display: none;
}

@media only screen and (min-width: 46.875em) {
  .desktop .cs-locations-col-one {
	width: 45%;
	margin-right: 5%;
	float: left;
  }

  .desktop-ie .cs-locations-col-one {
	width: 45% !important;
  }

  .desktop .cs-locations-col-two {
	display: block;
	width: 50%;
	float: left;
	position: relative; 
	padding-top: 85%;
  }

  .desktop-ie .cs-locations-col-two {
	padding-top: 57% !important;
  }
}

@media only screen and (min-width: 73.125em) {
  .desktop .cs-locations-col-one {
	width: 40%;
  }

  .desktop-ie .cs-locations-col-one {
	width: 45% !important;
  }

  .desktop .cs-locations-col-two {
	width: 55%;

  }

  .desktop-ie .cs-locations-col-two {
	width: 50%;
	padding-top: 57% !important;
  }
}

#map {
  width: 90%;
  margin: 0 auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

#map svg path {
  cursor: pointer;
}

.location-names {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.location-names li {
  position: absolute;
  z-index: 10;
  pointer-events: none;
}

.location-names li a {
  text-decoration: none;
  pointer-events: none;
  color: #262d71;
  font-weight: bold;
}

.location-names .atherstone {
  top: 65%;
  left: 67%;
}

.location-names .middleton {
  top: 53%;
  right: 40%;
  direction: rtl;
}

.location-names .darlington {
  top: 42%;
  left: 65%;
}

.location-names .swindon {
  top: 85%;
  right: 32%;
  direction: rtl;
}

.location-names .chelmsford {
  top: 75%;
  right: 12%;
  direction: rtl;
}

.location-names .neston {
  top: 64%;
  right: 45%;
  direction: rtl;
}

.location-names .bathgate {
  top: 26%;
  left: 50%;
}

.location-names .naas {
  top: 58%;
  right: 73%;
  direction: rtl;
}

.location-names .mitchelstown {
  top: 67%;
  left: 19%;
}

.desktop-ie #map {
  background-repeat: no-repeat;
}

.map-atherstone {
  background-image: url(../media/map-atherstone.gif);
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../media/map-atherstone.gif',sizingMethod='scale');
}

.map-bathgate {
  background-image: url(../media/map-bathgate.gif);
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../media/map-bathgate.gif',sizingMethod='scale');
}

.map-darlington {
  background-image: url(../media/map-darlington.gif);
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../media/map-darlington.gif',sizingMethod='scale');
}

.map-middleton {
  background-image: url(../media/map-middleton.gif);
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../media/map-middleton.gif',sizingMethod='scale');
}

.map-neston {
  background-image: url(../media/map-neston.gif);
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../media/map-neston.gif',sizingMethod='scale');
}

.map-chelmsford {
  background-image: url(../media/map-chelmsford.gif);
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../media/map-chelmsford.gif',sizingMethod='scale');
}

.map-swindon {
  background-image: url(../media/map-swindon.gif);
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../media/map-swindon.gif',sizingMethod='scale');
}

.map-mitchelstown {
  background-image: url(../media/map-mitchelstown.gif);
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../media/map-mitchelstown.gif',sizingMethod='scale');
}

.map-naas {
  background-image: url(../media/map-naas.gif);
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../media/map-naas.gif',sizingMethod='scale');
}

/******************************************* Roles list */

#roles {
  position: relative;
}

.roles-list, .content-list {
  clear: both;
}

.roles-list:after, .content-list:after {
  content: "";
  display: table;
  clear: both;
}



/* Standard Roles */
.standard .roles-list li {
  margin-bottom: 5px;
  background: #f47920; 
  width: 100%;
  position: relative;
  overflow: hidden;
}

.standard .roles-list a {
  display: block;
	text-align: left;
  text-transform: none;
	position: relative;
	color: white;
	padding: 14px;
	text-decoration: none;
	font-size: 1.2em;
	font-family: 'aldi_sued_regularregular', arial, sans-serif;
}

.standard .roles-list li img {
  display: none;
}

.standard .roles-list li h2, .standard .roles-list li p {
  display: none;
}

@media (min-width: 30em) {
  .standard .roles-list li {
	border: 6px solid #0cb4de; 
	background: none;
	width: 48.5%;
	margin-right: 1.5%;
	float: left;
  }

  .standard .roles-list li img {
	width: 100%;
	height: auto;
	display: block;
  }

  .standard .roles-list li h2, .standard .roles-list li p {
	display: block;
  }

  .standard .roles-list a span {
	background-image: url('../img/goto_icon.jpg') !important;
  }

  .standard .roles-list a {
	background-color: #252f70;
	bottom: 0;
	width: 100%;
	text-align: left;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	text-transform: none;
  }
}

@media (min-width: 60.625em) {
  .standard .roles-list li {
	margin-bottom: 40px;
	width: 23.5%;
	margin-right: 1%;
	border-radius: 10px;
  }
}



.standard .roles-list a span {
  background-image: url('../img/goto_icon_orange.jpg');
  height: 21px;
  width: 21px;
  display: inline-block;
  position: absolute;
  right: 10px;
}

/* Accordion Roles */

.accordion ul {
	list-style: disc;
	padding-left: 33px;
	margin: 15px 0;
}


.accordion .roles-list, .accordion .content-list {
    display: none;
    list-style: none; 
    margin: 0;
    font-size: 1em;
    padding: 0;

}

.accordion .roles-list li, .accordion .content-list li {
    margin-bottom: 5px;
    background: #0cb4de; 
    border: 6px solid #252f70;
    width: 100%;
    position: static;
    padding: 0;
}

.accordion .role-content, .accordion .tabbed-content {
    display: none;
    background: #e6f7fc;
    padding: 20px;
    color: #252f70;

}

.accordion .role-content ul, .accordion .tabbed-content ul {
  padding-left: 3em;
}

.accordion .role-content h2, .accordion .tabbed-content h2 {
    font-size:  2.4em;
}

.accordion .role-content p, .accordion .tabbed-content p {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 20px;
}

.accordion .role-heading .accordion-button, .accordion .tabbed-heading .accordion-button {
    margin-bottom: 1px;
}

.accordion .hidden-content {
	width: 100%;
	display: block;
	padding: 0;
}

.accordion .roles-list .accordion-button,
.accordion .content-list .accordion-button,
.accordion .role-heading .accordion-button,
.accordion .tabbed-heading .accordion-button {
    background-color: #0cb4de;
    width: 100%;
    text-align: left;
    text-transform: none;
    position: relative;
    color: white;
    padding: 10px 10px 28px 10px;
    min-height: 64px;
    text-decoration: none;
    font-size: 1.8em;
    font-family: 'aldi_sued_regularregular', arial, sans-serif;
    display: inline-block;
}

.accordion .roles-list .accordion-button span,
.accordion .content-list .accordion-button span,
.accordion .role-heading .accordion-button span,
.accordion .tabbed-heading .accordion-button span {
    background-image: url('../img/button_open.png');
    height: 44px;
    width: 44px;
    display: inline-block;
    position: absolute;
    right: 5px; 
   top: 10px;
}

@media(min-width: 30em) {
    .accordion .roles-list .accordion-button span,
    .accordion .content-list .accordion-button span,
    .accordion .role-heading .accordion-button span,
    .accordion .tabbed-heading .accordion-button span {
        top: auto;
    }
}

.accordion .roles-list .open .accordion-button span,
.accordion .content-list .open .accordion-button span,
.accordion .role-heading.open .accordion-button span,
.accordion .tabbed-heading.open .accordion-button span  {
     background-image: url('../img/button_close.png');
}

.accordion .roles-list li img,
.accordion .content-list li img {
    display: none;
    width: 100%;
    height: auto;
}

.accordion .role-content .benefits-list li p, .accordion .tabbed-content .benefits-list li p {
    font-size:  1em;
}

.accordion .role-content section, .accordion .tabbed-content section {
  padding-left: 0;
  padding-right: 0;
  border: 0;
}

.accordion .role-content section .trafalgar, .accordion .tabbed-content section .trafalgar {
  color: #252f70;
}

@media (min-width: 30em) {

	.accordion .accordion-button {
		min-height: 112px;
	}

    .accordion .roles-list, .accordion .content-list {
        display: block;
    }

    .accordion .roles-list .accordion-button span,
    .accordion .content-list .accordion-button span,
    .accordion .role-heading .accordion-button span,
    .accordion .tabbed-heading .accordion-button span {

		left: 50%; 
		margin-left: -22px;
		bottom: -22px;
	}

    .role-heading, .tabbed-heading {
        display: none;  
    }

    .accordion .roles-list .accordion-button,
    .accordion .content-list .accordion-button,
    .accordion .role-heading .accordion-button,
    .accordion .tabbed-heading .accordion-button {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    }

    .accordion .roles-list li, .accordion .content-list li img {
        margin-bottom: 20px;
        margin-top: 5px;
        background: none;
        width: 48.5%;
        margin-right: 1.5%;
        float: left;
        padding: 0;
        border-radius: 10px;
    }

    .accordion .roles-list li img, .accordion .content-list li img {
        display: block;
    }

    .accordion .roles-list li h2, .accordion .roles-list li p, .accordion .content-list li h2, .accordion .content-list li p {
        display: block;
    }
}

@media (min-width: 60.625em) {
    .accordion .roles-list li, .accordion .content-list li {
        margin-bottom: 40px;
        width: 23.5%;
        margin-right: 1%;
    }
}

.accordion .hidden-content {
  background: green;
  width: 100%;
  display: block;
  padding: 0;
  height: 0;
  overflow: hidden;
}

.accordion .roles-list a, .accordion .content-list a {
  background-color: #0cb4de;
  width: 100%;
  text-align: left;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  text-transform: none;
  position: relative;
  color: white;
  padding: 10px;
  text-decoration: none;
  font-size: 1.8em;
  font-family: 'aldi_sued_regularregular', arial, sans-serif;
  display: inline-block;
}

.accordion .roles-list a span, .accordion .content-list a span {
  background-image: url('../img/goto_icon_orange.jpg');
  height: 21px;
  width: 21px;
  display: inline-block;
  position: absolute;
  right: 10px;
}

@media (min-width: 30em) {


  .accordion p {
	margin-bottom: 0;
  }

  .accordion .roles-list li, .accordion .content-list li {
    
    background: none;
    width: 48.5%;
    margin-right: 1.5%;
    margin-top: 30px;
    margin-bottom: 0 !important;
    float: left;
    padding: 0;
  }

  .accordion .roles-list li h2, .accordion .roles-list li p, .accordion .content-list li h2, .accordion .content-list li p {
    display: block;
  }

  .accordion .roles-list a span, .accordion .content-list a span {
    background-image: url('../img/goto_icon.jpg') !important;
  }

  .accordion .roles-list a, .accordion .content-list a {
    background-color: #252f70;
  }
}

@media (min-width: 60.625em) {
  .accordion .roles-list li, .accordion .content-list li {
    margin-bottom: 40px;
    width: 23.5%;
    margin-right: 1%;
    border-radius: 10px;
  }
}



/******************************************* Image specific */

.section-footer-img
{
  width: 100%;
  margin-top: 50px;
  display: none;
}


/******************************************* List Item Specific */



/*.benefits-list.list-4 .list-item-4 {
  margin: auto;
  display: block;
}*/

#who-we-re-looking-for .benefits-list.list-4 li {
  width: 100%;
  display: block;
}

#who-we-re-looking-for .benefits-list {
  margin-top: 20px;
}

@media (min-width: 30em) {

  #who-we-re-looking-for .benefits-list.list-4 li {
	width: 47%;
	display: inline-block;
  }

  .benefits-list.list-4 li{
	width: 49%;
	margin: 0;
  } 
}

@media (min-width: 30em) and (max-width: 46.875em) {
  #who-we-re-looking-for.cs-list--multi-video .benefits-list.list-4 li {
	width: 100%;
  }
}



@media (min-width: 73.125em) {
   /* #who-we-re-looking-for .benefits-list.list-4 .list-item-4 {
	width: 33%;
	margin: 0;
	display: inline-block;
  }*/

   #who-we-re-looking-for .benefits-list {
  margin-top: 0px;
}

  #who-we-re-looking-for .benefits-list.list-4 li {
	width: 47%;
	display: inline-block;
  }

  #who-we-re-looking-for.cs-list--multi-video .benefits-list.list-4 li {
	width: 24.5%;
  }
}

/****************************************************************************** Navs */

/******************************************* Nav */

#nav {
  
  font-size: 1.4em; 
  
}

nav {
  overflow: hidden;
  width: 100%;
  display: block;
  background: #e5e5e5;
}
	
@media (min-width: 60.625em) {   
	nav {
	-webkit-transition: none;
	-moz-transition: none;
	margin: auto;
	padding: 0;
  }

		nav.subnav {
			top: 39px;
		}
}

nav ul {
  overflow: hidden;
  padding: 0;
  margin: 0;
  display: none;
  -webkit-transition: all 0.9s cubic-bezier(0, 1.15, 0.41, 1.1);
  -moz-transition: all 0.9s cubic-bezier(0, 1.15, 0.41, 1.1);
}

nav ul li .sub_links {
	display: none;
	background-color: #f47920;
	width: auto;
}

nav ul li .sub_links li {
	border-bottom: 1px solid #fec232;   
}

nav ul li .sub_links li:hover {
	background-color: #f59856;
}

.cs-navigation .sub_links a:hover, .cs-navigation .sub_links a.active-link {
	background: #f59856;
}

.cs-navigation .sub-menu a span {
	background-image: url('../img/open_menu_icon.png');
	display: inline-block;
	width: 18px;
	height: 18px;
	right: 10px;
	position: absolute;
}

.cs-navigation .sub-menu.open a span {
	background-image: url('../img/close_menu_icon.png');
}

@media (min-width: 60.625em) {

	.cs-navigation .sub-menu a span {
		display: none;
	}

	nav ul li .sub_links {
		display: none !important;
	}

    nav ul {
        /*width: 1170px;*/
        display: block;
        /*margin: auto;*/
    }


	nav ul li:hover .sub_links {
		display: block !important;
		position: absolute;
		min-width: 150px;
	}

	nav ul li:hover .sub_links li {
		float: none;
	}

}

nav ul li {
  border-bottom: 1px solid #fff;
  margin-bottom: 0;
}

nav ul li a {
  color: #919191;
  text-decoration: none;
  padding: 10px 15px;
  display: block;
}

	nav ul li a:hover, nav ul li a.active {
		background: #b3b2b2;
		color: #fff;
	}

@media (min-width: 60.625em) {

  nav ul li {
	float: left;
	border-left: 1px solid #fff;
	border-bottom: 0;
  }

  nav ul li:first-child {
	border-left: 0;
  }
}

nav .menu-btn {
  display: block;
  padding: 10px;
  text-transform: uppercase;
  font-weight: 700;
}

#nav .menu-btn-home {
  display: block;
  padding: 10px;
  text-transform: uppercase;
  font-weight: 700;
}

@media (min-width: 60.625em) {

  nav .menu-btn, 
 #nav .menu-btn-home {
	display: none;
  }
}

.open-menu {
  left: 0;
  z-index: 2;
}

.open-menu ul {
  display: block;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
}

.open-menu li {
  float: none;
}
@media (min-width: 73.125em) {

  .open-menu li {
  float: left;
  }
}

.open-menu.fixed {
  margin-left: 0;
  left: 0;
}

.open-menu.fixed ul {
  display: block;
}

.menu-btn-home i
{
  background: url(../media/menu-icon-dark.png) 0 0 no-repeat;
  width: 24px;
  height: 19px;
  display: inline-block;
  margin-bottom: -4px;
}

.menu-btn-home.home-menu-icon-open i
{
  background: url(../media/menu-icon-dark-close.png) 0 0 no-repeat;
}

.home-navigation.open-menu {
  display: block;
}

.menu-btn-home {
  text-decoration: none;
  color: #808080;
  border-bottom: 1px solid white;
  background: #e5e5e5;
}

@media (min-width: 60.625em) {
  .fixed {
	position: fixed;
	top: 0px;
	z-index: 20;
	width: 100%;
	-webkit-transition: none;
	-moz-transition: none;
  }
}

/******************************************* Subpage Navigation */

.cs-navigation {
  background: #001e78;
  overflow: hidden;
  list-style: none;
  margin: 0;
  padding: 0;
  display: none;
}

@media (min-width: 60.625em) {
    .cs-navigation {
        height: 39px;
    }
}

.cs-navigation.open-menu {
  display: block;
}

.cs-navigation li {
	margin: 0;
	font-size: 1.4em;
	border-bottom: 1px solid #0cb4de;
}

.cs-navigation li ul li {
  font-size: 1em;    
}


.cs-navigation a{
  color: white;
  padding: 10px 15px;
  display: block;
  text-decoration: none;
}

.cs-navigation a:hover, .cs-navigation a.active-link{
  background: #29b0db;
}

.menu-btn {
  display: block;
  background: #001e78;
  padding: 10px 20px;
  color: white;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid #053de2;
  font-size: 1.4em;
}

@media (min-width: 60.625em) {
  .cs-navigation {
	display: block;
  }
  
  .cs-navigation li {
	float: left;
	border: 0;
  }

  .menu-btn {
	display: none;
  }

}

.menu-icon
{
  background: url(../media/menu-icon.png) 0 0 no-repeat;
  width: 24px;
  height: 19px;
  display: inline-block;
  margin-bottom: -4px;
}

.menu-icon-open .menu-icon
{
  background: url(../media/menu-icon-close.png) 0 0 no-repeat;
}

header .home-btn {
  width: 40px;
  height: 40px;
  background: white;
  float: right;
  border: 1px solid black;
  text-align: center;
  padding-top: 7px;
}

header .menu-button {
  text-align: center;
  border: 1px solid #fff;
  padding: 10px;
  display: block;
  width: 50%;
  max-width: 35%;
  margin: 20px auto;
  background: red;
}

.navigation-container {
  border-bottom: 1px solid white;
}




  @media (min-width: 60.625em) {

  .navigation-container nav, .navigation-container nav.subnav {
	width: 970px;
	margin: auto;
  }

  .navigation-container {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  width: 100%;
}
 
  header .menu-button {
  display: none;
  }

  .navigation-container nav, .navigation-container nav.subnav{
	width: 970px;
	margin: auto;
  }
}

@media (min-width: 73.125em) {

  .navigation-container nav, .navigation-container nav.subnav {
	width: 1170px;
	margin: auto;
  }
}

.home-navigation {
  background: #e5e5e5;
}

.home-navigation li:last-child {
    background: #f17300;
    color: #ffffff;
    font-weight: bold;
}

@media (min-width: 60.625em) {
    .home-navigation li:last-child {
        float: right;
    }
}

.home-navigation li:last-child a {
	color: #ffffff;
}

/******************************************* Title Before Img */

h2 {
  position: relative;
}

#who-we-re-looking-for .trafalgar {
  font-weight: 300;
}

.graduate #who-we-re-looking-for .trafalgar {
  padding-left: 0;
}

#who-we-re-looking-for .trafalgar:before {
  width: 31px;
  height: 44px;
  content: " ";
  display: block;
  position: absolute;
  top: -12px;
  left: -30px;
  background: url(../media/title-background-lblue-img.png) 0 0 no-repeat;
}

.industrial-placements #who-we-re-looking-for .trafalgar:before {
  width: 31px;
  height: 44px;
  content: " ";
  display: block;
  position: absolute;
  top: -12px;
  left: -29px;
  background: url(../media/title-background-lblue-img.png) 0 0 no-repeat;
}

.graduate #who-we-re-looking-for .trafalgar:before {
  width: 31px;
  height: 44px;
  content: " ";
  display: block;
  position: absolute;
  top: -12px;
  left: -30px;
  background: url(../media/title-background-lblue-img.png) 0 0 no-repeat;
}

.cs-standard-content .trafalgar:before {
  display: none;
}

.trafalgar--dblue, #meet-our-area-managers .trafalgar:before
{
  background: url(../media/title-background-dblue-img.png) 0 0 no-repeat;
}


.trafalgar--red, #benefits .trafalgar:before {
  background: url(../media/title-background-red-img.png) 0 0 no-repeat;
}

.trafalgar--orange, #experienced-hire .trafalgar:before, #application-process .trafalgar:before, #teach-first .trafalgar:before, #information-for-parents-and-teachers .trafalgar:before #apply-1- {
  background: url(../media/title-background-orange-img.png) 0 0 no-repeat;
}

.trafalgar--orange, #experienced-hire .trafalgar:before, #apply-1-  .trafalgar:before, #information-for-parents-and-teachers .trafalgar:before  {
  background: url(../media/title-background-orange-img.png) 0 0 no-repeat;
}

.trafalgar--lblue, .background-img-container .trafalgar:before, .cs-list-video.white-on-blue .trafalgar:before, #frequently-asked-questions .trafalgar:before {
  background: url(../media/title-background-lblue-img.png) 0 0 no-repeat;
}

.trafalgar--yellow {
  background: url(../media/title-background-yellow-img.png) 0 0 no-repeat;
}

/******************************************* Who We're Looking For */

/*@media (min-width: 46.875em) {
  #who-we-re-looking-for .col-one {
	width: 38%;
	float: left;
  }

  #who-we-re-looking-for .col-two {
	width: 60%;
	float: right;
  }
}*/

@media (min-width: 73.125em) {
  #who-we-re-looking-for .col-one {
	width: 50%;
	float: left;
  }

  #who-we-re-looking-for .col-two {
	width: 48%;
	float: right;
  }

  #who-we-re-looking-for.cs-list--multi-video .col-one,
  #who-we-re-looking-for.cs-list--multi-video .col-two {
	width: 100%;
	float: none;
  }
}
/******************************************* iFrame  */

.responsive-iframe {
  height: 500px;
}

@media only screen and (min-width: 46.875em) {

  .responsive-iframe {
	height: 700px;
  }
}

@media only screen and (min-width: 60.625em) {

  .responsive-iframe {
	height: 1250px;
  }
}


.interactive-quiz a {
  text-decoration: none;
}

.interactive-quiz, .video-trigger {
  position: relative;
}

.interactive-quiz .playbutton {
  width: 67px;
  height: 67px;
  display: block;
  position: absolute;
  top: 100px;
  left: 50%;
  margin-left: -33px;
}

#frame1 {
  background: black;
  padding: 40px 0;
} 

@media (min-width: 30em) {
  .interactive-quiz .content {
	width: 90%;
	position: absolute;
	top: 160px;
	left: 50%;
	margin-left: -45%;
	text-align: center;
  }

  
  .interactive-quiz .playbutton {
	top: 80px;
  }


}

@media (min-width: 46.875em) {
  .interactive-quiz .content {
	top: 250px;
	width: 60%;
	margin-left: -30%;
  }

  .interactive-quiz .playbutton {
	top: 150px;
  }

  .overlay__videoâ€”close {
	top: 20px;
  }

	#frame1 {
	background: transparent;
	padding: 0px;
  }
}

@media (min-width: 73.125em) {

  .interactive-quiz .content {
	top: 180px;
	width: 80%;
	margin-left: -40%;
  }

  .interactive-quiz .playbutton {
	top: 80px;
  }
}


  .interactive-quiz .content p, .interactive-quiz .content img {
	text-align: center;
	
  }

  .interactive-quiz .content h3 {
	font-size: 2.5em;
	text-align: center;
  }

.interactive-quiz img{
  width: 100%;
  margin: 0 auto 10px;
}

.iframeyaya {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  z-index: 1000;
}

#who-we-re-looking-for {
  position: relative;
  height: 100%;
  padding: 30px;
}

.close-interactive-video {
  text-align: center;
  color: #fff;
  position: absolute;
  font-size: 1.5em;
  top: 20px;
  right: 20px;
  display: block !important;
  z-index: 10;
}

/******************************************* List fixes  */

.text-block ul {
  margin-left: 40px;
  list-style: disc;
}

.text-block li, 
.cs-list .col-one li, 
.inner-wrapper li, 
#faqs ul li ul li, 
.inner-col-one li, 
.inner-col-two li,
.column-right li{
  font-size: 1.5em;
  list-style-type: disc;
}

#what-kind-of-roles-are-there-in-store ul ul, 
#what-kind-of-office-roles-are-there ul {
  margin-left: 20px;
  margin-bottom: 40px;
}

#what-kind-of-roles-are-there-in-store ul li ul li, 
#what-kind-of-office-roles-are-there ul li,
.goldthorpe #what-kind-of-roles-are-there-in-distribution ul li,
#what-kind-of-roles-are-there-in-distribution ul li ul li {
  font-size: 1.5em;
  width: 100%;
  float: none;
  display: list-item;
  margin: 0 0 10px;
  padding: 0;
  list-style-type: disc;
}

.inner-col-one ul,
.inner-col-two ul {
  margin-left: 40px;
}

/******************************************* Fast fixes */
.interactive-video-button
{
  width: 100%;
  margin-top: 4%;
}

@media (min-width: 60.625em) {
  .button-image {
	display: block;
	width: 100%;
	height: auto;
  }
}

@media (min-width: 73.125em) {
  .button-image, .interactive-video-button {
	width: 47%;
	height: auto;
	cursor: pointer;
  }

  .interactive-video-button.single{
	width: 100%;
	height: auto;
	cursor: pointer;
  }
}

@media (min-width: 46.875em) {
  .cs-list--multi-video .list-vimeo-button-image {
	display: block;
	float: left;
	margin-bottom: 50px;
	margin-right: 3%;
	width: 100%;
  }

  .cs-list--multi-video .list-vimeo-button-image img {
	height: auto;
  }
}

@media (min-width: 73.125em) {
  .cs-list--multi-video .list-vimeo-button-image {
	display: block;
	float: left;
	margin-bottom: 50px;
	margin-right: 3%;
	width: 47%;
  }
}

/************************************ Experience Hire < Area Managers */

.cs-list--multi-video .list-vimeo-multiple-videos {
  margin-bottom: 15px;
  width: 100%;
}

.cs-list--multi-video .list-vimeo-multiple-videos p {
  padding: 15px 0;
  margin: 0;
  font-weight: bold;
  color: #454545;
}

@media (min-width: 46.875em) {
  .cs-list--multi-video .list-vimeo-multiple-videos {
	margin: 1.5%;
	width: 47%;
  }
}

@media (min-width: 73.125em) {
  .cs-list--multi-video .list-vimeo-multiple-videos {
	margin: 1%;
	width: 23%;
  }
}

/*********************************END Experience Hire < Area Managers */


/********************************* Two Column Layout with Video */

.two-column-layout-with-video .col-video {
  width: 100%;
  float: none;
  margin: 0;
}

@media (min-width: 46.875em) {
  .two-column-layout-with-video .col-video {
	float: right;
	width: 50%;
	margin-left: 15px;
  }
}

.two-column-layout-with-video {
  padding-bottom: 0;
}

.two-column-layout-with-video .list-vimeo-multiple-videos {
  width: 100% !important;
}


/********************************* END Teach First */

.read-more {
  display: none;
}

.no-js .read-more  {
  display: block;
}

.read-more-active { 
  display: block;
}

.read-more-btn {
  color: #001e78;
}

.no-js .read-more-btn {
  display: none;
}


table {
  border-collapse: collapse;
  font-size: 1.5em; 
}

table td {
  padding: 20px;
  width: 25%;
  vertical-align: top;
  border-right: 5px solid white;
}

  tr:nth-of-type(odd) {
	background: #f6f6f6;
  }

article p a {
  color: black;
  text-decoration: underline;
}

article p a:hover {
  text-decoration: none;
}

.thumbnail-div {
  position: relative;
}

/******************************************* Font Face */

@font-face {
	font-family: 'aldi_sued_regularregular';
	src: url(../media/fonts/aldisuedregular-webfont.eot);
	src: url(../media/fonts/aldisuedregular-webfont.eot?#iefix) format('embedded-opentype'),
	   url(../media/fonts/aldisuedregular-webfont.woff) format('woff'),
	   url(../media/fonts/aldisuedregular-webfont.ttf) format('truetype'),
	   url(../media/fonts/aldisuedregular-webfont.svg#aldi_sued_regularregular) format('svg');
	font-weight: normal;
	font-style: normal;

  }

  @font-face {
	font-family: 'aldi_sued_lightlight';
	src: url(../media/fonts/aldisuedlight-webfont.eot);
	src: url(../media/fonts/aldisuedlight-webfont.eot?#iefix) format('embedded-opentype'),
	   url(../media/fonts/aldisuedlight-webfont.woff) format('woff'),
	   url(../media/fonts/aldisuedlight-webfont.ttf) format('truetype'),
	   url(../media/fonts/aldisuedlight-webfont.svg#aldi_sued_lightlight) format('svg');
	font-weight: normal;
	font-style: normal;
  }

 .cs-self-evaluation {
	padding: 30px;
  }

#store-assistant-and-deputy-managers-application-process .trafalgar:before,
#store-stock-assistants-application-process .trafalgar:before {
  background: url(../media/title-background-orange-img.png) 0 0 no-repeat;
}

/******************************************* Hero Panel */

.home-hero-panel {

  margin: 0 0 4px 0;
  background:#edc444;
  text-align:center;
  position:relative;
  height:250px;

}

.home-hero-panel--upper {

  height: 249px;

}

.home-hero-panel--lower {

  background:#edc444;
  background: rgba(237,196,68,.85);
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  bottom: 0;
  top: 0;
  height: 250px;

}

.home-hero-panel--lower h2 {

  color: #fff;
  font-family:'aldi_sued_regularregular',arial,sans-serif;
  margin:0;
  padding: 10px 15px 10px 15px;
  font-size: 1.6em


}

.home-hero-panel--lower p {

  color: #fff;
  font-family:'aldi_sued_regularregular',arial,sans-serif;
  font-weight: 300;
  font-size: 1.5em;
  padding: 0 15px 10px 15px;
  text-align:center;

}

.centralised--upper img {

  left: 50%;
  margin-left: -33px;
  top: 40px;
  margin-top: 0;
  position: absolute;
  z-index:10;

}

.home-hero-panel .centralised {

  margin: auto;
  padding-top: 120px;
  text-align:center;

}

.home-hero-panel .centralised img {

  height: 72px;
  display: block;
  width: auto;
  margin: 10px auto 20px auto;
  cursor:pointer;

}


.home-hero-video-overlay {

  cursor:pointer;

}

.home-hero-panel--overlay {

  background: rgba(0,0,0,.7);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(/media/aldi_adamradley_384x504.jpg);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

}


.desktop {
  display:none;
}

.home-hero-video-overlay-mobile {
  cursor:pointer;
}


#new-stores-single
{
  padding: 0;
}





@media (min-width: 60.625em) {

  .desktop {
  display:block;
  }

  .mobile {

  display:none;
  
  }


  .home-video-play--mobile {

  display:none;

  }

  .home-hero-panel--upper {

	height:252px;

  }

  .home-hero-panel--lower {

  height: 256px;

  }

  .home-hero-panel {

  height: 508px;

  }

  .home-hero-panel--lower {

  top: 252px;

  }

  .centralised--upper img {

  top: 90px;

  }

  .home-hero-panel--lower h2 {

   font-size: 1.5em;
   padding: 10px 15px 0 15px;
   text-align:left;

  }

  .home-hero-panel .centralised, .home-hero-panel--lower p  {

  text-align:left;

  }


  .home-hero-panel .centralised {

  margin: auto;
  padding-top: 90px;
  text-align:center;

  }

  .home-hero-panel--lower {
  display:block !important;
  }

  

}











/******************************************* Peel Overlay */


.overlay--solid {
  background: #273583;  
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  display:none;
  max-height:900px;
  
 
}

@media (min-width: 46.875em) {

  .overlay--solid {
	display:block;
  }

}




.full-play .centralised {
  left: 50%;
  margin-left: -33px;
  top: 50%;
  margin-top: -50px;
  position: absolute;
}

.overlay--solid--container {
  width: 550px;
  margin: 128px auto 0;
  max-width:100%;
}


.overlay-solid--title {
  width: 500px;
  margin-bottom: -7px;
}

.overlay--solid--subtitle {
  float: right;
  position: relative;
  margin-right: -30px;
  width: 160px;
  margin-top: -3px;
}

.overlay--solid .video-footer {
  max-width: 100%;
  margin-top: -10px;
}

.overlay__embedcontainer {
  width: 800px;
  position: relative;
  margin: 0 auto;
  max-width:100%;
}


.overlay__embedcontainer iframe {
  width: 100%;
  height: 305px;
}


.overlay--solid .video-preview {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
 
.video-preview img {
  max-width:100%;
}


.overlay__embedcontainer .full-play .centralised {
  top:70%;
}

.overlay__embedcontainer .full-play .centralised img {
  cursor:pointer;
}

.curl {
  cursor:pointer;
}

@media (min-width: 60.625em) {

  .overlay--solid {
  background: #273583; 
  width: 100%;
  position:absolute;
  max-height:100%;

  }

  .overlay--solid--container {
	width:800px;
	margin: 64px auto 0;
  }


  .overlay-solid--title {
   
  }

  .overlay--solid--subtitle {
   
	margin-right:0;
	width:218px;

  }

  .overlay__embedcontainer {
	width: 550px;
  }

  .overlay__embedcontainer iframe {
	height: 445px;
  }

  .overlay-solid--title {
	width: 800px;
	margin-bottom: -14px;
  }

  .overlay--solid--subtitle {
	margin-right: -55px;
	
  }


}



/******************************************* Page Peel Plugin */


#page_peel{
  min-height:80px;
  min-width:77px;
  position:absolute;
  z-index:5000000;
  top:0px;
  left:0px;
  cursor: pointer;
}

#page_peel #page_peel_ad{
  background:url('../media/aldi_homepage_ipad.png') left top no-repeat;
  overflow:hidden;
  position:absolute;
  top:0px;
  left:0px;
  z-index:5000001;
  height:80px;
  width:77px;
}

@media (min-width: 60.625em) {

  #page_peel #page_peel_ad{
	background:url('../media/aldi_homepage.jpg') left top no-repeat;
  }

}

#page_peel #page_peel_mask{
  background:url('../media/page_peel_wide.png') right top no-repeat;
  overflow:hidden;
  position:absolute;
  top:0px;
  left:0px;
  z-index:5000002;
  height:80px;
  width:77px;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}



/******************************************* Page Peel Plugin 2 */


#turn_wrapper {
  width: 80px;
  height: 80px;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

#turn_hideme {
  width: 85%;
  height: 85%;
  overflow: hidden;
  display: block;
  position: absolute;
  float: left;
  top: 0;
  left: 0;
  z-index: 1;
}

#turn_object{
  position: relative;
}

#turn_wrapper.right #turn_hideme *,
#turn_wrapper.right #turn_object {
  float: right !important;
}

#turn_wrapper.right #turn_hideme {
  float: right !important;
  right: 0 !important;
  left: auto;
}
#turn_wrapper.right #turn_object {
  right: 0 !important;
  left: auto !important;
}

#turn_wrapper.right {
  position: absolute;
  top: 0;
  width: 100%;
  height: 0;
  right: 0 !important;
}

#turn_wrapper.right #turn_object * {
  position: absolute;
  right: 0 !important;
}

#turn_wrapper #turn_object img#turn_fold {
  display: block;
  width: 100%;
  height: 100%;
  z-index: 1000;
  right: 0;
  position: absolute;
   cursor:pointer;
}

/* the jQuery CSS Framework */
#turn_wrapper .ui-resizable { position: relative;}
#turn_wrapper .ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 0; bottom: 0; }
#turn_wrapper .ui-resizable-sw { cursor: sw-resize; width: 12px; height: 12px; left: 0; bottom: 0; }


#turn_wrapper .ui-resizable-handle {
  position: absolute;
  font-size: 0.1px;
  z-index: 99999; 
  display: block;
  border: none !important;
  border-width: 0 !important;
  /* I have NO idea why this works for IE7, but it does. Background none doesn't work. Go figure. */
  background: url(#none) !important; 
  width: 100% !important;
  height: 100% !important;
  cursor:pointer;
}

.dpeel {
  display:none;
}


@media (min-width: 60.625em) {

  .dpeel {
	display:block;
  }

  .mpeel {
	display:none;
  }

}

/* Full screen video overlay */

.overlay--fullscreen {
  display: block;
  position: fixed;
  top: 0;
  z-index: 1000;
  width: 100%;
  left: 0;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  z-index: 1000;
}

.overlay__video--open, .overlay__video--close {
   cursor:pointer;
}

.overlay__video--close {
  text-align: center;
  color: #fff;
  position: absolute;
  font-size: 1.5em;
  top: 0;
  right: 20px;
  display: block;
  z-index: 1001;
  padding: 10px 20px;
}

.thumbnail-div .overlay-tint
{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #252e6f;
  opacity: 0.5;
  filter: alpha(opacity=50);
}

.thumbnail-div .overlay-info
{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
}

.overlay-info img {
  width: 32px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -15px;
  margin-top: -15px;
}


.list-vimeo-video .video-caption {
	background: #001e78;
	margin-top: -16px;
	padding-top: 26px;
	border-bottom-right-radius: 15px;
	border-bottom-left-radius: 15px;
}

.list-vimeo-video span
{    
  color: white;
  text-decoration: none;
  display: block;
  font-size: 1.4em;
  font-weight: 700;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 5px;
  padding-top: 5px;
  border-bottom: 1px solid #009fe3;
}

.list-vimeo-video span:nth-child(2) {
    border-top: 1px solid #009fe3;
}

.list-vimeo-video span:first-child {
    border-bottom: none;
}

.list-vimeo-video span:last-child {
    border-bottom: none;
    padding-bottom: 8px;
}

.list-vimeo-video .subtitle {
	font-weight: normal;
	font-size: 1.3em;
}

section {
    padding: 20px;
}

section#application-process {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
}

section.cs-carousel {
    padding: 0;
}

.title {
  display: table;
  margin-bottom: 3em;
}

.title img {
  display: table-cell;
  width: 60px;
  padding-right: 1em;
  height: auto;
}

.title .trafalgar {
  display: table-cell;
  vertical-align: middle;
  font-size: 2.5em;
}

/* pdf banner specific styles */
.title_pdf {
  display: table;
  margin-bottom: 1em;
  margin-left: 1.250em;
}

.title_pdf img {
  display: table-cell;
  width: 60px;
  padding-right: 1em;
  height: auto;
}

.title_pdf .copy_body {
  display: table-cell;
  vertical-align: middle;
  max-width: 480px;
}

.title_pdf .copy_body p {
	margin-bottom: 0;
	color: #27326b;
}

.title_pdf .trafalgar {
  font-size: 2.5em;
  color: #27326b;
}

@media(min-width: 46.875em) {
	.title img {
	  display: table-cell;
	  width: 100%; 
   }

	.title .trafalgar {
	  display: table-cell;
	  vertical-align: middle;
	  font-size: 3.3em;
	}

	.title_pdf img {
	  display: table-cell;
	  width: 100%; 
   }

	.title_pdf .trafalgar {
	  font-size: 3.3em;
	}
}

.center-apply {
	margin-left: auto;
	float: none;
	margin-right: auto;
}

/* List Selector Component */

.list-selector {
  background-color: #282d68;
  padding: 20px;
  color: #ffffff;
}

.list-selector .title .trafalgar {
  color: #ffffff;
}

.list-selector .mobile-description,
.list-selector .description {
  display: none;
}

.list-selector .column-two .list {
  background-color: #0cb4de;
  font-size: 1.8em;
  display: block;
  padding: 5px;
  width: 100%;
  border-bottom: 1px solid #ffffff;
  position: relative;
}

.list-selector .column-two .list span {
	background: url(../img/list_open.png) no-repeat;
	position: absolute;
	width: 18px;
	height: 18px;
	top: 8px;
	right: 8px;
}

.list-selector .column-two .list.open span {
	background: url(../img/list_close.png) no-repeat;
}

.list-selector .column-two .mobile-description {
	padding: 20px;
}

.list-selector .column-two .mobile-description p {
	margin-bottom: 10px;
}

@media (min-width: 30em) {
	section.accordion {
		padding-bottom: 38px;
	}
}

@media (min-width: 46.875em) {
    .list-selector .column-one, .list-selector .column-two, .list-selector .column-three {
        float: left;
        width: 30%;
        margin-left: 3%;
    }

        .list-selector .column-two .list {
            background: none;
            border: 0;
            padding: 0;
            font-size: 1.4em;
            display: block;
            margin: 16px 0;
        }

            .list-selector .column-two .list:before {
                background: url(../img/list_icon.png) no-repeat;
                content: '';
                display: block;
                width: 22px;
                height: 22px;
                margin-right: 8px;
                float: left;
                margin-top: -3px;
            }

            .list-selector .column-two .list:hover:before {
                background: url(../img/list_icon_hover.png) no-repeat;
            }

            .list-selector .column-two .list:hover {
                color: #fec232;
            }

        .list-selector .column-three .description {
            display: none;
        }


    /* Section Shadows */

    section:first-child {
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }

    section.cs-carousel,
    .home section {
        padding-top: 0 !important;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }

    section {
        -webkit-box-shadow: inset 0 23px 17px -15x rgba(0,0,0,.5);
        -moz-box-shadow: inset 0 23px 17px -15px rgba(0,0,0,.5);
        box-shadow: inset 0 23px 17px -15px rgba(0,0,0,.5);
        border-bottom: 0;
        padding-top: 30px !important;
    }

        section section {
            padding: 0;
        }

        section.cs-list-video {
            padding-bottom: 20px;
        }

    .role-content section, .tabbed-content section {
        -webkit-box-shadow: none;
        box-shadow: none;
    }
}
 
.accordion p,
.cs-locations p,
.cs-list p {
	padding: 0 1.250em;
}

.cs-locations li .info p {
	padding-top: 10px;
	padding-left: 0;
	padding-right: 0;
	margin: 0;
}
.cs-list--multi-video .col-one .list-vimeo-video-preview img {
	width: 100%;
	height: auto;
}

.cs-video-preview {
	padding:2% !important;
	background-color:#fdc41a;
	padding-top: 3% !important;
	width:100%;
}

.cs-video-preview .list-vimeo-button-image {
	width:88px;
	float:left;
	margin-right:1.5%;
	position: relative;
	z-index: 10;
}

img.video-preview-icon {
	width:83%;
	margin-left:10%;
}

.video-preview-content {
	color:#272c68;
	position: relative;
	z-index: 0;
}

.video-preview-content h2{
	color:#272c68;
}


.video-preview-content p {
	margin-bottom:0;
}


@media (min-width: 30em)  {

	.cs-video-preview {
		padding-top:2% !important;
	}

	.cs-video-preview .list-vimeo-button-image {
		position:relative !important;
		z-index: inherit;
	}

	.video-preview-content {
		width:70%;
		float:left;
	}

	img.video-preview-icon {
		width:100%;
		margin-left:0;
	}
}

@media (min-width: 60em) {

	.video-preview-content {
		width:50%;
	}
}

#home.apply {
	background-color: #ffffff;
}

.list-pdf-button-image {
	width:88px;
	float:left;
	margin-right:1.5%;
	position: relative;
	z-index: 10;
}

.cs-pdf-preview {
	padding:1% !important;
	background-color:#fdc41a;
	padding-top: 3% !important;
	width:100%;
}

img.video-preview-icon {
	width:83%;
	margin-left:10%;
}

.pdf-preview-content {
	color:#272c68;
	position: relative;
	z-index: 0;
}

.pdf-preview-content h2{
	color:#272c68;
	font-size:3em;
	margin-bottom:0;
}

.pdf-preview-content p {
	margin-bottom:0;
}

@media (min-width: 30em)  {

	.cs-video-preview {
		padding-top:2% !important;
	}

	.cs-video-preview .list-vimeo-button-image {
		position:relative !important;
		z-index: inherit;
	}

	.pdf-preview-content {
		width:70%;
		float:left;
	}
}

@media (min-width: 60em) {
    .pdf-preview-content {
        width:60%;
    }
}

.two-column-layout-with-image {
	padding: 20px;
	background-color: #3cade0;

}

.two-column-layout-with-image:after {
	content: '';
	display: block;
	clear: both;
}

.two-column-layout-with-image h2,
.two-column-layout-with-image p {
	color: #ffffff;
}

.two-column-layout-with-image .column-one-wide,
.two-column-layout-with-image .column-two-wide {
	width: 100%;

}

@media (min-width: 46.875em) {
	.two-column-layout-with-image .column-one-wide,
	.two-column-layout-with-image .column-two-wide {
		width: 49%;
		float: left;
	}

	.two-column-layout-with-image .column-one-wide {
		margin-right: 2%;
	}
}

.two-column-layout-with-image img {
	width: 100%;
	height: auto;
}

.two-column-layout-with-image .image_container {
	max-width: 460px;
	margin: 0 auto;
}

.two-column-layout-with-image .caption {
	background-color: #2c2a67;
	color: #3cade0;
	padding: 10px;
	display: block;
	width: 100%;
	font-size: 14px;
	font-weight: bold;
}

 @media (min-width: 60em) {
	.pdf-preview-content {
		width:60%;
	}
}

/* EVENTS CALENDAR */

.events_calendar {
	width: 100%;
	font-size: 12px;
}

.events_calendar .month {
	margin-bottom: 10px;
}

.events_calendar .month h3 {
	color: #000;
	height: 40px;
	line-height: 40px;
	background: #dcdcdc;
	font-weight: normal;
	padding-left: 12px;
	width: 100%;

}

.events_calendar .month h3:after {
	content: '';
	background-image: url('../img/accordion_down_arrow.png');
	width: 23px;
	height: 12px;
	float: right;
	margin-top: 15px;
	margin-right: 15px;
	-webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
}

.events_calendar .month h3.active:after {
	-webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);

}

.advanced .events_calendar .dates {
	display: none;
}

.events_calendar .dates:after {
	content: '';
	display: block;
	clear: both;	
}

.events_calendar .dates .left,
.events_calendar .dates .right {
	background-color: #f6f6f6;
	float: left;
	padding: 15px;
}

.events_calendar .dates .left {
	width: 49.2%
}

.events_calendar .dates .right {
	width: 50%;
}

.events_calendar .dates div {
	margin-right: .8%; 
}

.events_calendar .dates div:nth-child(2n) {
	margin-right: 0;
	
}

.events_calendar .dates div:nth-child(4n+3),
.events_calendar .dates div:nth-child(4n+4) {
	background-color: #fff;
}



.cs-one-column-layout .column img {
	max-width: 100%; 
	height: auto;
	display: block;
	margin: 0 auto;
}

.orange {
    background-color: #f17300;
}

#international-secondment p {
    margin-bottom: 20px;
}

.home section {
    padding:0;
}