/** Reponsive Layout **/

/* Desktop */
@media only screen and (max-width: 1750px) {
	
}

/* Laptop */
@media only screen and (max-width: 1390px) {
	
	/* Navigation */
	/* Member buttons */
	.button{
		padding-right: 1.5%;
	}
	
	/* Hide mainnav and use hide/show */
/*	.mainnav{
		display: none;
	}

	.mobNavBtn {
	    display: block;
	    margin-top: 45px;
	}*/

	.logo{
		padding-left: 1em;
	}
	
	
	/* Page header */
	.inner.padded {
		padding-left: 1em;
	}
	.page-header .inner.padded { padding-left: 0; }
	
	/* Home page */
	/* Banner */
	.mainbanner h1 { font-size: 32px; }
	
	
	/* Main content */
	.light-grey-bg {
    	padding: 0 1em;
	}
	
	
	/* Contact Pg */
	/* Contacts */
	.contact-info.w-20-padded { width: 32.33%; margin-bottom: 30px; }
	
	
	
}

@media all and (max-width: 1366px) {
	.inner.padded {
		width: 96%;
		padding: 2em 2%;
	}
}

@media all and (max-width: 1300px) {
	.pos-5.active {
	 	left: 810px;
		top: 120px;;
	}
}

@media all and (max-width: 1200px) {
	
	/* Events Page */
	/* zig zag to pale colour for bg */
	.red-svg .line-fill{
		fill: #f0f2f1;
	}
	/*Interactive Graph*/
	.pos-1.active {
	    left: 208px;
	    top: 205px;
	}
	.pos-2.active {
	   	left: 300px;
		top: 105px;
	}
	.pos-3.active {
		left: 430px;
		top: 60px;
	}
	.pos-4.active {
	    left: 564px;
		top: 38px;	
	}
	.pos-5.active {
	 	left: 750px;
		top: 125px;
	}
}

@media all and (max-width: 1120px) {
	/*Interactive Graph*/
	.pos-1.active {
		left: 180px;
		top: 215px;
	}
	.pos-2.active {
		left: 260px;
		top: 110px;
	}
	.pos-3.active {
		left: 390px;
		top: 60px;
	}
	.pos-4.active {
		left: 524px;
		top: 38px;	
	}
	.pos-5.active {
	 	left: 710px;
		top: 145px;
	}
}


@media only screen and (max-width: 1060px) { 
	.mainnav{
		display: none;
	}

	.mobNavBtn {
	    display: block;
	    margin-top: 45px;
	}

	/*Interactive Graph*/
	.pos-1.active {
		left: 150px;
		top: 235px;
	}
	.pos-2.active {
		left: 220px;
		top: 120px;
	}
	.pos-3.active {
		left: 345px;
		top: 60px;
	}
	.pos-4.active {
		left: 480px;
		top: 38px;	
	}
	.pos-5.active {
	 	left: 680px;
		top: 145px;
	}
	.govt.orange-text {
    	padding-bottom: 100px;
	}
}



 /*Tablet Landscape */
@media only screen and (max-width: 1024px) { 




	/* Home page 
	/* Banner */
	.horizontalHalf h1 { font-size: 25px; }
	
	.latest-news { padding: 1em; }

	/* SubNav */
	.menu.categories li a { padding: 0.5em 1em; }


	/* Articles */
	
	/* Featured teaser */
	.teaser.feature .liner h2 {
		font-size: 2em;
	}

	/* Article teasers to 3 per row */
	.four-col-teaser-wrapper .teaser {
		width: 32%;	
	}
	.four-col-teaser-wrapper .teaser:nth-child(4n){
		margin-right: 2%;
	}
	.four-col-teaser-wrapper .teaser:nth-child(3n){
		margin-right: 0;
	}	
	.four-col-teaser-wrapper .teaser:nth-child(4n+1){
		clear: none;
	}
	.four-col-teaser-wrapper .teaser:nth-child(3n+1){
		clear: left;
	}
	.four-col-teaser-wrapper .clear { display: none; }
	
	/* Events */
	.content.w-80{
		width: 60%;
		border-right: 1px solid;
		padding-right: 1%;
	}
	.details.w-20{
		width: 38%;
	}

	.content .pad-right { padding: 0; }
	
	.pic.w-half,
	.words.w-half{
		width: 100% !important;
	}
	
	.event.teaser .words .liner { margin: 1em; }

	.event.teaser .content.w-80 {
		width: 60%;
		border-right: 0; 
	}
	
	
	/* Footer */
	/* Content cols */
	.footer-content .w-quarter { width: 33.33%; }

}

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

	.infographic-image{
		display: block;
	}

	.circleGovt,
	.middle,
	.steps{
		display: none;
	}

	.AboutUsGraphic .about-section {
    	margin-top: 0;
	}
}


/* Tablet Portrait */
@media only screen and (max-width: 770px) {
	
	/* Grid */
	
	.w-half{
		width: 98%;
		margin-bottom: 1em;
		float: left; 
	}
	
	.w-quarter.col.left{
		width: 50%;
	}

	.w-three-quarters-spaced { width: 100%; }
	
	.w-quarter-spaced,
	.w-third-spaced {
		width: 48.5%;
	}

	.w-third-spaced{
		margin-right: 2%;
	}
	
	.w-20 {
		width: 33.33%;
	}
	
	.generic-page .w-two-thirds { width: 100%; } 

	.pad-right {
    	padding-right: 0;
	}
	
	
	/* Home Page */
	/* Banner */
	
	.mainbanner { height: auto; }
	.mainbanner .w-half { width: 100%; padding: 0; margin: 0; }
	
	.panel-1 { height: 220px; }
	
	.horizontalHalf { 
		height: 150px; 
		width: 50%; 
		float: left; 
	}	
	.horizontalHalf h1 { font-size: 22px; }
	.horizontalHalf h3 { font-size: 15px; }
	
	.promotext { 
		width: 70%; }

		
	/* Article teasers to 2 per row */
	.three-col-teaser-wrapper .teaser,
	.four-col-teaser-wrapper .teaser {
		width: 49%;
	}
	.three-col-teaser-wrapper .teaser:nth-child(3n),
	.four-col-teaser-wrapper .teaser:nth-child(3n) {
		margin-right: 2%;
	}
	.three-col-teaser-wrapper .teaser:nth-child(2n),
	.four-col-teaser-wrapper .teaser:nth-child(2n) {
		margin-right: 0;
	}
	.three-col-teaser-wrapper .teaser:nth-child(3n+1),
	.four-col-teaser-wrapper .teaser:nth-child(3n+1){
		clear: none;
	}

	/* Events */
	.event.teaser .content.w-80{
		width: 100%;
	}
	.details.w-20{	
		display: block;
		float: none;
		width: 50%;
		padding: 15px 0;
	}
	.details.w-20 .liner {
		text-align: center;
	}

	.event.teaser .content.w-80 {
		padding: 0;
	}
	
	
	/* About Us */
	
	/* TIA Team */
	.teaser.person .w-third { width: 20%; }
	.teaser.person .w-two-thirds { width: 80%; }
	
	/* Footer */
	/* Strategic Partners */
	.partner-logo.pos-4 .liner { border: 0; clear: left; }
	.partner-logo.pos-4 { clear: left; }
	
}



/* Phone Landscape */
@media only screen and (max-width: 680px) { 

	/* Grid */
	.w-two-thirds,
	.w-third {
		width: 100%;
		margin-bottom: 2em;
	}

	/* Featured Articles to full width */
	.w-half-spaced { width: 100%; }
	
	/* Header */
	.logo { max-width: 50%; }
	.mobNavBtn { margin-top: 40px; }

	/* Home Page */
	/* Banner */
	.promotext { 
		width: 90%; 
		right: 5%; }

		
	
		
	/* Article teasers title */
	.teaser h3 {
		font-size: 1.5em;
	}
	
	/* Events */
	.event.teaser .details .liner{
		border-left: none;
	}
	.details.w-20{
		margin: 0 auto;
	}
	
	
	
	/* About Us */
	
	/* Support section */	
	.pagelink { width: 60%; 	}

	/* TIA Team */
	.person.w-half-spaced { width: 100%; margin-right: 0; }
	.teaser.person .w-third { width: 30%; }
	.teaser.person .w-two-thirds { width: 60%; margin-left: 3%; }
	
	/* Contact Pg */
	/* Contacts */
	.contact-info.w-20-padded { width: 100%; margin: 0 0 30px; }

}

@media all and (max-width: 550px) {
	.w-quarter.col.left {
    	width: 100%;
	}
	.partner-logo.w-20 {
	    width: 48%;
	    float: left;
	    height: 120px;
	    margin-bottom: 7px;
	}

	.partner-logo.pos-2,
	.partner-logo.pos-4,
	.partner-logo.pos-6{
		clear: none;
		border-left: 1px dotted #a7a9ac;
	}

	.partner-logo .liner{
		border: none;
	}


}

@media all and (max-width: 460px) {
	.event-lines{
		top: 177px;
	}

	.pic.square.w-quarter.left{
		width: 50%;
	}

	.w-quarter,
	.w-three-quarters{
			width: 100%;
		}
	.w-quarter-spaced{
		width: 100%;
	}

	.w-three-quarters{
		padding-top: 30px;
	}

}

/* Phone Portrait */
@media only screen and (max-width: 400px) { 
	
	/* Header */
	.mobNavBtn { margin-top: 20px; }
	
	/* SubNav */
	/* Display full width */
	.menu.categories li { float: none; display: block; }
	
	
	/* Home Page */
	/* Banner */
	.horizontalHalf { width: 100%; min-height: 160px; }
	.horizontalHalf .w-70 { width: 65%; left: 10%; }
	
	/* Article teasers to 1 per row */
	.two-col-teaser-wrapper .teaser,
	.three-col-teaser-wrapper .teaser,
	.four-col-teaser-wrapper .teaser{
		width: 100%;
		margin-right: 0;
	}
	
	
	/* Reduce height of photos in teasers, huge */
	/* .teaser .pic { height: 200px; width: 100%; }
	.teaser .pic img { position: absolute; top: -25%; } */
	
	
	/* Events */
	.details.w-20{
		width: 80%;
	}
	
	/* About Us */
	
	/* Support section */	
	.pagelink { width: 90%; 	}
	
	/* TIA Team */
	.teaser.person .w-third { width: 20%; }
	.teaser.person .w-two-thirds { width: 80%; margin-left: 0; }
	
}