/*changing the body attributes*/
body {
    color: #000000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: Arial, Helvetica, sans-serif;
    margin-top: 0px;
}

h1 {
    color: #022366;
    font-size: 200%;
    font-weight: bold;
}

h2 {
    color: #022366;
    font-size: 170%;
    font-weight: bold;
}

h3 {
    color: #8cc63e;
    font-size: 150%;
    font-weight: bold;
}

h4 {
    color: #4c4c4c;
    font-size: 120%;
    font-weight: bold;
}

h5 {
    color: #022366;
    font-size: 120%;
    font-weight: bold;
}

a {
    text-decoration: none;
    color: #8CC63E;
}

a:hover {
    text-decoration: none;
    color: #01245E;
}

p {
    margin-top: 10px;
    margin-bottom: 10px;
}

strong {
    color: #022366;
    font-weight: bold;
}

hr {
    border-top: 1px solid #B6DB83;
}

.menu-toggle,
input[type="submit"],
input[type="button"],
input[type="reset"],
article.post-password-required input[type=submit],
.bypostauthor cite span {
    background-image: none !important;
}

#callback-box p {
    margin: 10px 0 10px 0 !important;
}

.margin-top-twenty {
    margin-top: 20px;
}

.margin-top-ten {
    margin-top: 10px;
}

.container {
    position: relative;
}

a.blocklink {
    position: relative;
    display: block;
    padding: 15px 15px;
    text-decoration: none;
    border-radius: 7px;
    font-weight: bold;
    color: #FFF;
}

a.blocklink i {
    font-size: 25px;
    display: inline-block;
}

a.blocklink span {
    display: inline-block;
    width: 80%;
    padding-left: 10px;
}

.uppercase {
    text-transform: uppercase;
}

.phone-number {
    font-weight: bold;
    font-size: 240%;
}

.errors {
    color: #900;
}

.sectornav {
    display: block;
}

.sectornav > li {
    margin-bottom: 15px;
}

.sectornav > li > a {
    position: relative;
    display: block;
    padding: 15px 15px;
    text-decoration: none;
    border-radius: 7px;
    text-transform: none;
    font-weight: bold;
    color: #FFF;
}

.sectornav > li > a:hover, .sectornav > li > a:focus {
    text-decoration: none;
    background-color: #D6D6D6 !important;
}

/* make the top navbar float left on all devices */

.navbar-nav {
    float: left;
    margin-left: 10px;
    margin-right: 10px;
}

.navbar-nav > li {
    float: left;
    text-transform: uppercase;
    font-size: 90%;
}

.navbar-nav > li > a {
    font-weight: bold;
    padding-right: 10px;
    padding-left: 10px;
}

.nav > li > a:hover, .nav > li > a:focus {
    text-decoration: none;
    background: none;
}

.navbar-default .navbar-nav > li > a {
    color: #1a2948;
}

.navbar-default .navbar-nav > li > a:hover {
    color: #103d85;
}

/* clear  padding + margin */
.right-zero {
    padding-right: 0px;
    margin-right: 0px;
}

.left-zero {
    padding-left: 0px;
    margin-left: 0px;
}

.both-sides-zero {
    padding-left: 0px;
    margin-left: 0px;
    padding-right: 0px;
    margin-right: 0px;
}
.atg-blue {
    color: #022366;
}

.grey {
    color: #999;
}

.atg-blue-bg {
    background-color: #022366;
}

.atg-green {
    color: #8CC63E;
}

.atg-green-bg {
    background-color: #8CC63E;
}

.atg-vacancy-bg {
    background-color: #f29726;
}

.white {
    color: #ffffff;
}

.white-bold {
    color: #ffffff;
	font-weight:bold;
}

.bg-white {
    background-color: #ffffff;
}

.bg-grey {
    background-color: #f5f6fa;
}

.bg-orange, .bg-orange:hover {
    background-color: #fb941a !important;
}

.top-margin-ten {
    margin-top: 10px;
}

.padding {
    padding: 5px;
}

.application-green-bg {
    background-color: #a5cd39;
}

.application-orange-bg {
    background-color: #eaa348;
}

.application-blue-bg {
    background-color: #6fb8ff;
}

/*main content box styling*/
.content-box {
    border: 10px solid #e7f3d7;
    padding: 10px;
    clear: both;
    margin-bottom: 10px;
    border-radius: 8px;
}

.content-box-no-border {
    padding: 10px;
    clear: both;
    margin-bottom: 10px;
    border-radius: 8px;
}

/*footer nav*/
.footernav > li > a {
    position: relative;
    display: block;
    padding: 0px 0px;
    padding-top: 5px;
    padding-bottom: 5px;
    text-transform: none;
    color: #FFF;
}

.footernav > li > a:hover, .footernav > li > a:focus {
    text-decoration: none;
    background: none;
}

/* quick select menu */
.navbar-collapse {
    padding-left: 0px;
}

.navbar-toggle {
    position: relative;
    float: right;
    padding: 11px 12px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 8px;
    background-color: #8CC63E;
    background-image: none;
    border: none;
    border-radius: 4px;
}

.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
    background-color: #022366;
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: #ffffff;
}

.border-1px {
    border: 1px solid #CCC;
}

.form-control {
    border: 1px solid #CCC;
    color: #000;
}

.form-control::-moz-placeholder {
    color: #000000;
}

.btn-default {
    color: #fff;
    border: none;
    font-weight: bold;
    padding: 13px 16px;
}

.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open .dropdown-toggle.btn-default {
    color: #ffffff;
    background-color: #D6D6D6;
    border: none;
}

.required {
    color: #900000;
    font-weight: bold;
    font-size: 120%;
}

.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
    background-color: #8CC63E;
    color: #FFFFFF;
}

.subscribe-vacancy {
    border-radius: 7px;
    margin-bottom: 15px;
    color: #FFFFFF;
}

.subscribe-vacancy-left {
    padding: 25px;
}

.subscribe-vacancy-top {
    padding: 10px 15px;
}

.subscribe-vacancy i {
    font-size: 25px;
    display: inline-block;
}

.subscribe-vacancy h4 {
    color: #FFFFFF;
    display: inline-block;
    width: 80%;
    padding-left: 10px;
}

.subscribe-vacancy h5 {
    color: #FFFFFF;
    display: inline-block;
    width: 80%;
    padding-left: 10px;
    margin-bottom: 0px;
}

.subscribe-vacancy .subscribe-form input[type=text] {
    border: 0px;
    padding: 10px;
}

.subscribe-vacancy .subscribe-form button {
    background: #FFF;
    color: #fb941a;
}

.subscribe-vacancy .subscribe-form button i {
    font-size: 15px;
}

.form-inline-bg {
    background: #FFFFFF;
}

.email-sign-up {
    border-radius: 7px;
    margin-bottom: 15px;
    color: #FFFFFF;
}

.email-sign-up-left {
    padding: 25px;
}

.email-sign-up-top {
    padding: 10px 15px;
}

.email-sign-up i {
    font-size: 25px;
    display: inline-block;
}

.email-sign-up h4 {
    color: #FFFFFF;
    display: inline-block;
    width: 80%;
    padding-left: 10px;
}

.email-sign-up h5 {
    color: #FFFFFF;
    display: inline-block;
    width: 80%;
    padding-left: 10px;
    margin-bottom: 0px;
}

.email-sign-up .subscribe-form input[type=text] {
    border: 0px;
    padding: 10px;
    width:60%;
}

.email-sign-up .subscribe-form button {
    background: #FFF;
    color: #333333;
}

.email-sign-up .subscribe-form button i {
    font-size: 20px;
}

.form-inline-bg {
    background: #FFFFFF;
    border-radius: 4px;
}

.display-right {
    text-align: left;
    white-space: normal;
    width: 85%;
}

.font25 {
    font-size: 25px;
}

.padding5 {
    padding: 5px;
}

.white-breadcrumbs{
	font-weight:bold;
	text-transform:uppercase;
	color: #ffffff;
	padding:10px;
	float:left;
}
.white-breadcrumbs a{
	color: #ffffff;
}
.white-breadcrumbs a:hover{
	color: #022366;
}
.white-breadcrumbs.last:after{
	content: "";
}
.white-breadcrumbs:after{
	content:":";
	padding-left: 20px;
}
.white-breadcrumbs:hover:after{
	color: #FFFFFF;
}
.case-study-content p{
	padding-right:30px;
}
.case-study-section .case-6-block ,
.case-study-section .case-6-right{
	margin-top:20px;
}
.case-6-block{
	border-right:1px solid #CCCCCC;
}
.case-6-right{
}
.case-6-right h3 a, .case-6-block h3 a{
	color: #022366;
}
.case-6-right h3, .case-6-block h3{
	font-size:1.4em;
	color: #022366;
	margin-top:10px;
	font-weight:bold;
}
.case-6-block h3, .case-6-block p{
	margin-right: 30px;	
}
.case-6-right p{
	margin-right: 25px;
}
.case-study-content h2{
	margin: 30px 0px;
}
.case-study-btn{
	border-radius: 5px;
    color: #FFFFFF;
    font-size: 0.9em;
    font-weight: bold;
    padding: 13px 30px 13px 20px;
    text-transform: uppercase;
	margin: 5px 0px;
	float:left;
}
.case-study-btn:hover{
    color: #FFFFFF;
}
.imageClip{
	max-width: 90%;
}
.case-study-content .case-study-p-strong{
	color: #000000;
    font-weight: bold;
}
.case-study-content .case-study-img{
	float:right;
	margin-left:40px;
}
.case-study-content .case-study-h2{
	margin-top: 10px;
}
.case-study-content p{
	line-height: 24px;
}
.dropdown-breadcrumb{
	background: none repeat scroll 0 0 #8cc63e;
    display: none;
    list-style: none outside none;
    padding: 5px 20px 0;
    position: absolute;
    width: auto;
    z-index: 1;
}
.dropdown-breadcrumb li{
	border-bottom: 1px solid #FFF;
	padding:20px 0px;
	font-weight: lighter;
	text-transform:none;
}
.dropdown-breadcrumb li.last{
	border-bottom: none;
}
.dropdown-breadcrumb.engineering{
	left: -10px;
}
.dropdown-breadcrumb.cycle{
	left: 218px;
}
.dropdown-breadcrumb.retail{
	left: 230px;
}

.dropdown-breadcrumb.sales{
	left: 400px;
}

.white-breadcrumbs:hover ul{
	display : block;
}
.video-content-box, .blog-content-box{
	min-height:447px;
}
.index-case-left,.index-case-right{
	margin-top:10px;
}
.index-case-left{
	padding-right:15px;
	padding-left:0px;
}
.index-case-right{
	padding-right:0px;
	padding-left:15px;
	border-left:1px solid #CCCCCC;
}
/* header phone number */

@media (min-width: 320px) {
	
	.subscribe-vacancy {
	
		display: none;	
		
	}
	
	
	.email-sign-up {
	
		display: none;	
		
	}
	
	hr {
	
		display: none;	
		
	}
	
    #wrap {
        background: none;
    }

    .header-phone-number {
        display: none;
    }

    /* quick select drop down menu for mobiles */
    .hiddennav {
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 100;
        background-color: #FFF;
        width: 100%;
    }

    .hiddennav > li > a {
        position: relative;
        display: block;
        padding: 10px 10px;
        text-decoration: none;
        border-radius: 4px;
        text-transform: none;
        font-weight: bold;
    }

    .hiddennav > li > a:hover, .hiddennav > li > a:focus {
        text-decoration: none;
        background-color: #eeeeee;
    }

    /* hide left hand menu for mobile */
    .leftnav {
        display: none;
    }

    /* right nav on vacancies listings */
    .rightnav {
        display: block;
    }

    .rightnav > li {
        display: block;
        margin-bottom: 15px;
    }

    .rightnav > li > a {
        position: relative;
        display: block;
        padding: 15px 15px;
        text-decoration: none;
        border-radius: 7px;
        text-transform: none;
        font-weight: bold;
        color: #FFF;
    }

    .rightnav > h3 {
        position: relative;
        display: block;
        padding: 15px 15px;
        text-decoration: none;
        border-radius: 7px;
        text-transform: none;
        font-weight: bold;
        color: #FFF;
        font-size: 100%;
        cursor: pointer;
    }

    .rightnav > li > a:hover, .rightnav > li > a:focus {
        text-decoration: none;
        background: #D6D6D6;
    }

    /* select drop downs for apprenticeship quick select */
    .full-width-quick-select {
        display: none;
    }

    .mobile-quick-select {
        display: block;
    }

    #wrap > .container {
        padding: 0px 15px 0;
    }

    .image-fullscreen-only {
        display: none;
    }

    .image-tablet-landscape-only {
        /*display: none;*/
		float: left !important;
    }

    /* change the top nav background + colour */
    .navbar-default {
        background-color: #ffffff;
        border-color: #E7E7E7;
    }

    /* for social logos on footer */
    .navbar-nav > li > a.reset {
        padding-right: 0px;
        padding-left: 0px;
    }

    .navbar-nav > li > a {
        padding-left: 3px;
        padding-right: 3px;
    }

    .margin-top-thirty {
        margin-top: 0px;
    }

    #left-advert a {
        background: none;
        width: 0px;
        height: 0px;
        display: block;
    }

    /* end media query 340 */
}

@media (min-width: 480px) {
    .navbar-nav > li > a {
        padding-left: 10px;
        padding-right: 10px;
    }
}

@media (min-width: 640px) {
    .header-phone-number {
        font-size: 170%;
        font-weight: bold;
        position: relative;
        margin-top: 20px;
        display: block;
    }

    .margin-top-thirty {
        margin-top: 30px;
    }
}

@media (min-width: 768px) {
    .nav-stacked > li {
        float: left;
    }

    .image-tablet-landscape-only {
        display: block;
    }

    .leftnav {
        display: block;
    }

    .leftnav > li {
        margin-bottom: 15px;
    }

    .leftnav > li > a {
        position: relative;
        display: block;
        padding: 15px 15px;
        text-decoration: none;
        border-radius: 7px;
        text-transform: none;
        font-weight: bold;
        color: #FFF;
    }

    .leftnav > li > a:hover, .leftnav > li > a:focus {
        text-decoration: none;
        background: #D6D6D6;
    }

    /* hide quick dropdown for mobiles */
    .hiddennav {
        display: none;
    }

    .header-phone-number {
        font-size: 240%;
        font-weight: bold;
        position: relative;
        margin-top: 0px;
        float: left;
        margin-right: 10px;
    }

    /* select drop downs for apprenticeship quick select */
    .full-width-quick-select {
        margin-top: 10px;
        display: block;
    }

    .mobile-quick-select {
        display: none;
    }

    .navbar-fixed-top {
        position: relative;
        margin: auto;
    }

    #wrap > .container {
        padding: 20px 15px 0;
    }

    .mobile-image-hide {
        display: block;
    }

    /* change the top nav background + colour */
    .navbar-default {
        background: none;
        border: none;
    }

    /* for social logos on footer */
    .navbar-nav > li > a.reset {
        padding-right: 10px;
        padding-left: 10px;
    }

    .form-inline select.form-control {
        width: 400px;
        color: #000000;
    }

    #left-advert a {
		
		
        background: url(http://cdn.atgapprenticeships.com/layout/girls-allowed-166_07.jpg) top no-repeat;
        width: 165px;
        height: 305px;
        display: block;
    }

    /* end media query 768 */
}

@media (min-width: 960px) {
    #wrap {
        background: url(http://cdn.atgapprenticeships.com/images/desktop.gif) top no-repeat;
    }

    .image-fullscreen-only {
        display: block;
    }

    .navbar-nav {
        margin-left: 0px;
    }

    #left-advert a {
        background: url(http://cdn.atgapprenticeships.com/layout/girls-allowed-220_09.jpg) top no-repeat;
        width: 217px;
        height: 406px;
        display: block;
    }
    /* end media query 960 */

}

@media (min-width: 1280px) {
    #left-advert a {
        background: url(http://cdn.atgapprenticeships.com/layout/girls-allowed-269_07.jpg) top no-repeat;
        width: 269px;
        height: 407px;
        display: block;
    }

    /* end media query 1024 */
}

.orangebtn {
    background-color: #fb941a;
    padding: 10px;
    border: none;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 90%;
    cursor: pointer;
}

.fields {
    background: #fff;
    border: 1px solid #5c5c5c;
    margin-bottom: 15px;
}

label {
    float: left;
    width: 140px;
}

#errorblock {
    color: #990000;
    width: 700px;
}

#errorblock ul {
    font-size: 100%;
    margin: 0px;
}

#errorblock ul li {
    margin-left: 0px;
}

/* Carousel */
.carousel-indicators {
    position: absolute;
    bottom: 10px;
    top: -35px;
    left: 98%;
    width: 30%;
    padding-left: 0;
    margin-left: -20%;
    text-align: center;
    list-style: none;
}

.carousel-indicators li {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 1px;
    text-indent: -999px;
    cursor: pointer;
    background-color: #dfdfdf;
    border-radius: 6px;
}

.carousel-indicators .active {
    width: 20px;
    height: 20px;
    margin: 1px;
    background-color: #8cc63e;
}

.navbar-collapse {
    height: auto !important;
    overflow: visible !important;
}

span.hidden-xs {
    display: inline !important;
}
@media (max-width: 1280px){
	.case-6-right {
    	margin-left: 0px;
	}
	.video-content-box, .blog-content-box{
		min-height:490px;
	}
}
@media (max-width: 990px){
	.white-breadcrumbs{
		float:left;
		clear:both;
	}
	.dropdown-breadcrumb{
		display:none !important;
	}
	.white-breadcrumbs:after{
		content:"";
	}
	.case-6-block{
		border:none;
	}
	.case-6-block, .case-6-right{
		margin-bottom:20px;
	}
	.case-study-content .case-study-img{
		float:none;
		margin: 0;
	}
	.left-zero, .right-zero{
		margin: 0;
		padding:0;
	}
	.video-content-box, .blog-content-box{
		min-height:0px;
	}
	.carousel-indicators {
		left: 94%;
	}
	.index-case-left,.index-case-right{
		padding:0px;
		border:none;
	}
}
@media (max-width: 768px) {
    a span.hidden-xs {
        display: none !important;
    }
	
	#ico_pop_up {
        display: none !important;
    }
}

#video-container iframe {
    width: 100%;
    height: 258px;
}

#video-container p {
    margin-bottom: 0px;
}

#callback-button {
    position: fixed;
    width: 54px;
    height: 240px;
    top: 155px;
    right: 0px;
    z-index: 20;
    background-image: url('/layout/chat1.png');
    cursor: pointer;
}

#callback-box {
    position: fixed;
    min-height: 253px;
    width: 400px;
    top: 155px;
    margin-right: -400px;
    right: 0px;
    z-index: 20;
    border-top: 3px #8CC63E solid;
    border-left: 3px #8CC63E solid;
    border-bottom: 3px #8CC63E solid;
    background-color: #FFFFFF;
    padding-top: 10px;
    padding-left: 35px;
    padding-right: 35px;
    padding-bottom: 10px;
}

#callback-box #callback-submit {
    width: 200px;
    color: #FFFFFF;
    font-size: 13px;
    font-family: Arial;
    font-weight: bold;
    border: 0px;
}
/* Sticky footer styles
-------------------------------------------------- */

html,
body {
  height: 100%;
  /* The html and body elements cannot have any padding or margin. */
}

/* Wrapper for page content to push down footer */
#wrap {
  min-height: 100%;
  height: auto;
  /* Negative indent footer by its height */
  margin: 0 auto -60px;
  /* Pad bottom by footer height */
  padding: 0 0 60px;
}

/* Set the fixed height of the footer here */
#footer {
	
  min-height: 150px;
  background-color: #8cc63e;
  padding-bottom: 70px;
}


#social-footer {
	margin-top: 15px;
  min-height: 80px;
  background-color: #d6d6d6;
}



/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

.container .text-muted {
  margin: 20px 0;
}

#footer > .container {
  padding-left: 15px;
  padding-right: 15px;
}

code {
  font-size: 80%;
}


/* cookies banner */
#ico_pop_up {
position: fixed;
width: 100%;
height: 60px;
padding: 5px 10px 5px 15px;
background-color:#8CC63E;
border-top: 1px #022366 solid; 
display: block;
bottom: 0px;
right: 0px;
font-size: 90%;
z-index: 100;
}


#ico_pop_up #ico_container {

width: 1000px;
margin-left: auto;
margin-right: auto;
}


#ico_pop_up #ico_container a {
	
	text-decoration: underline;
	color: #FFF;
	
}



#ico_pop_up #ico_container #ico-right {

	float: right;

}

#ico_pop_up #ico_container #ico-left {

	float: left;

}

@media (max-width: 768px) {
	
	
		#ico_pop_up #ico_container {
		
			width: 100%;
		}
	
}