/*
 Skillnet rebrand - May 2018 - colours changes to match logo
 purple -> navy
 #4F2F91 -> #09283A
 
 Bright green -> light green
 #71B93A -> #77BE44 
 
 */



.big-screen { display: block ; }
.small-screen { display: none ; }


@media screen {
	.print-only {
		display: none ;	
	}
}


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

	body .container_12,
	body .container_16 { 
		margin-left: 2% ;
		margin-right: 2% ;  
		width: 96% ;
		}			
}	

@media screen and (max-width: 900px) {
	.container-header.big-screen nav { font-size: 0.9em ; }
}	

@media screen and (max-width: 800px) {
	.container-header.big-screen nav { font-size: 0.85em ; }
}	


@media screen and (max-width: 768px) {
	
	.big-screen 	{ display: none ; }
	.small-screen 	{ display: block ; }	
	
	.container-header nav ul li a {
		padding-left: 0.5em ;
		padding-right: 0.5em ;
	}
	
	.grid_2.lns {
		display: none ;
	}
	.grid_6.content-holder 	{ width: 64.666% ; }
	.grid_10.content-holder { width: 98% ; }
	
	.banner-item  { 
		background-size: cover ; 
		height: 300px ;  
	}
	
	.info-box h2 {
		font-size: 1.2em ;
		padding-top: 1.1em ;
	}

	.date {
		width: 45px ;
		margin-right: 9px ;
	}
	
	.hp-upcoming-courses .article-item p {
		margin-left: 55px ;
	}
	
	a.btnLinkBigBlue {
		background: #00AEEF url(/Sectors/IMDA/Skillnet.nsf/images/icon-link-arrow.gif) no-repeat 5% 110% ;	
		border-bottom: 0.65em solid transparent ; /* a hack - for the background image to sit right */
	}
	
}


@media screen and (max-width: 700px) {
	.container-header.big-screen nav { font-size: 0.8em ; }
	
		.container-footer .grid_4,
		.container-footer .grid_6,
		.container-footer .grid_8  {
		width: 98% ;	
	}

	.container-footer .skillnet-funding {
		margin-bottom: 2em ;
	}

	.container-footer .contact-details {
		text-align: left ;
	}
	.container-footer .footer-links-other {
		text-align: left ;
	}		
	
	.container-footer .sector-logos {
		text-align: left ;
	}	
	
	.contact-details .text ,
	.footer-links-other {
		margin-right: 1em ;
	}
	
	
}


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


	.courseDetails a.big-screen	{ display: none ; }
	
	.info-box {
		margin-top: 225px ; 		/* usually 215, but we're reducing h2 font size ... */
	}
		.info-box h2 {
			font-size: 1.0em ;
		}
			.info-box-details p {
				font-size: 0.9em ;
			}
	
	.course-search .cs-label {
		display: block ;
		padding: 0.35em 0 ;
	}
	
	
	.find-a-course-component div div {
		display: block ;	
		margin: 1% 2% 5% 2% ;	
	}
		.find-a-course-component button {
			padding: 0.5em 0.75em ;
		}
	
	.grid_6.content-holder 		{ 
		width: 98% ; 
		}
	.container_12 aside.grid_4	{ 
		width: 98% ; 
		margin-top: 1em ;
		padding-top: 1em ;	
		border-top: 1px solid #77BE44 ;   
		}
		.container_12 aside.grid_4 img {
			width: 100% ;
		}
	
	
	.grid_10.content-holder content > .grid_4 ,
	.grid_10.content-holder .grid_8 {
		width: 98% ;
		margin-left: 1% ;
		margin-right: 1% ;
	}
	
	.grid_10.content-holder content > .grid_4 {
		margin-top: 1em ;
		padding-top: 1em ;	
		border-top: 1px solid #77BE44 ;   
	}
	
	.courseDetails .courseFactFile {
		margin-top: 0 ;
	}

	.contact-table .data-row {
		padding: 0.5em 0 ;
	}
	
	
	.container-share-page {
		margin-top: 2em ;
	}
	

	
}



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

	.banner-item  { 
		background-size: cover ; 
		height: 164px ;  
	}	
	
	.info-box-container {
		position: static ;
		margin-top: 0 !important ;
		height: auto ; 
		overflow: visible ;
		padding-top: 1em ;
	}
		.info-box {
			width: 98% ;
			margin: 0 1% 2% 1% ;
			padding-bottom: 3% ;
			height: auto ;
			float: none ;
			text-align: left ;
			background: transparent ;
			color:#4d4c51 ;
		}
			.info-box h2 {
				background: #77BE44 ;
				padding: 2% 3% ;
				font-size: 1.5em ;
			}
			.info-box .info-box-details {
				padding : 0 ;
			}
	
	.course-search div {
		display: block ;
		padding: 0.35em 0 ;
	}
		.course-search div input ,
		.course-search div select {
			width: 98% ;				/* has l/r padding of 1% */
			margin: 0.25em 0 ;
		}
			.course-search a.btnLinkSearch {
				padding: 0.4em 0.6em ;
			}

	.hp-upcoming-courses .grid_12 {
		margin: 0 ;
		width: 100% ;
		text-align: center ;
	}
	
	.hp-upcoming-courses h2 {
		background: #77BE44 ;
		color: #FFFFFF ;
		text-align: center ;
		padding: 0.5em ;
	}
	
	.hp-upcoming-courses .grid_4 {
		width: 98% ;
		padding-bottom: 1em ;
		margin-bottom: 1em ;
		border-bottom: 1px solid #77BE44 ;  
	}
	
	.hp-upcoming-courses a.btnLinkStd {
		margin: 0 auto ;
		font-weight: normal ;
	}
	
	.hp-tagline {
		font-size: 0.8em ;
		width: 94% ;
		margin: 0.9em 3% 0.25em 3% ;
	}
	
	.container-articles-listing .grid_8 ,
	.container-articles-listing .grid_4 {
		width: 98% ;
	}
	.container-articles-listing .grid_4 {
		margin-top: 1.5em;
	}
		.container-articles-listing .grid_4 .divDownloadBrochure {
			padding-top: 1.5em ;
			margin-top: 1.5em ;
			border-top: 1px solid #77BE44 ;
		}
	
}

@media screen and (max-width: 320px) {
	.banner-item  { 
		background-size: cover ; 
		height: 128px ;  
	}	
	
	.site-bread-crumb {
		text-align: left ;
	}
	
	.divFeaturedTextBox.ftb-bottom {
		position: relative ;
	}
	
	.courseTitle.grid_5 {
		width: 64.666% ;
	}
	.courseDuration.grid_2 {
		width: 31.333% ;
		text-align: right ;
	}
	.courseQualification.grid_5 {
		display: none ;
	}
	
	.data-find-courses .grid_4 { width: 73% ; }
	.data-find-courses .grid_3 { display: none ; }
	.data-find-courses .grid_2 { width: 23% ; }
	
}



/*!
 * mobile menu ..
 * orginal source: http://bhoover.com/demo/mobile-menu/#
 * - note to developers: don't add non mobile-menu code to this block
 * */

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

	/* small screen strap-line */
	.container-mobile-bar .container_12 {
		width: 100% ;
		margin: 0; 
		border-bottom: 3px solid #77BE44 ;
		padding: 1em 0 0.35em 0 ;
	}
	
		.container-mobile-bar .container_12 .grid_3 {
			margin-left: 2% ;
			width: 22% ;
		}
	
		.container-mobile-bar .grid_9 div {
			text-align: right ;
			margin-right: 2em ;
		}
	
	.container-mobile-bar {
        background-color: #FFFFFF ;
        display: block;
        width: 100% ;
        line-height: 28px ;
        top: 0 ;
    }
    
	    .container-mobile-bar a {
	    	color: white ;
	    }
 
    /* Toggle button - "three bars" style */
    .container-mobile-bar .nav-icon {
		display: block ;
        background: #FFFFFF ;
        width: 32px;
        border-width: 0 16px 9px 0 ;
        border-color: #FFFFFF ;
        border-style: solid ;
    }
	    .container-mobile-bar .nav-icon div {
	    	border-top: 18px double #4D5256 ; /* #ed174f ; */
	    	border-bottom: 6px solid #4D5256  ; /* #ed174f ; */
	        font-size:0;
	        height: 6px ;
	    }

	
    /* The dropdown menu - "floats over the content" */
	.mobile-menu {
 		position: absolute ;
 		top: 57px ;
 		left: 0 ;
 		right: 0 ;
 		z-index: 105 ;

 		padding-bottom: 1em ;
 		
 		background: #77BE44 ; /* #00AEEF ; */

 		border-bottom: 16px  ;
 		border-radius: 0 0 8px 8px ;
 		max-width: 480px ;
 	}

		/* the search box */
	.mobile-menu .iframe-search-box {
		width: 100% ;
		border-bottom: 1px solid white ; /* #80D7F7 ; */
	}
		.mobile-menu .iframe-search-box iframe {
			margin: 1em 5% ; 
			width: 211px ;
		}
	
	
 	.mobile-menu ul {
 		margin: 0  ;
 		padding: 0 ;
 	}
 
    .mobile-menu ul li {
        list-style: none;
     }
  
    .mobile-menu ul li a {
        display: block;
        padding: .65em 5% ; 
        border-bottom: 1px solid white ; /* #80D7F7 ; */
        color: #FFFFFF ;
        text-decoration: none ;
    }
    
    	.mobile-menu ul li.section-label a {
  			color: #FFFFFF ;
  		}
  		.mobile-menu ul li.section-label li a {
  			color: #FFFFFF ;
  			padding-left: 10% ;
  		} 
  		.mobile-menu ul li.section-label li.category-label a {
  			color: #FFFFFF ;
  			padding-left: 10% ;
  		}
    	.mobile-menu ul li.section-label li.category-label li a {
  			color: #FFFFFF ;
  			padding-left: 15% ;
  		} 
    
    .mobile-menu ul ul {
    	display: none ;		/* hide the sub-navs - toggle later */
    }
 
 	.mobile-menu ul a.menu-item-header:before {
 		content: "\00B1";	/* +/ sign */
 	}
 
    .mobile-menu  ul a:before {
        content: "\2192";	/* --> sign */
        padding-right:8px;
    }
    .mobile-menu ul li a:hover {
    	color: white !important ;
    	background-color: #4D5256 !important ; /* #ED164F !important ; */
    }

	
	.formTitle .text-small {
		display: block ;
	}
	
	
	    .mobile-menu .social-networks {
		padding: 2% 0 ;	
		margin-left: 2% ;
	}
	    .mobile-menu .social-networks div {
		background-color: #F0F0F0;
		display: inline-block;
		font-size: 1.3em;
		padding: 1px;
	}
		    .mobile-menu .social-networks a {
			margin: .25em 0.55em ;
			text-decoration: none;
			padding: 0.2em;
			color: #53565a;
		}
	
	
	
}


@media print {
	
	.print-only {
		display: block ;
	}
	.no-print {
		display: none ;
	}
	
	.container-footer {
	color: #000000 ;
	background: #FFFFFF ;
	}
	
}