.collapsed {
	margin: 0;
}

.collapsed-top {
	margin-top: 0;
}

.collapsed-bottom {
	margin-bottom: 0;
}

/*
## Content Section

content section is a block to provide consistent vertical spacing of ```30px``` or ```60px``` between various sections of the page

```
<div class="content-section">
	<p>this has 30px margin top and bottom</p>
	<p class="fixie"></p>
	<p class="fixie"></p>
</div>
```
*/

.content-section {
	margin-top: 30px;
	margin-bottom: 30px;
}

/*
use ```content-section--large``` for ```60px``` vertical margin

```
<div class="content-section content-section--large">
	<p>this has 60px margin top and bottom</p>
</div>
```
*/
.content-section--large {
	margin-top: 60px;
	margin-bottom: 60px;
}

/*
use ```content-section--small``` for ```10px``` vertical margin

```
<div class="content-section content-section--small">
	<p>this has 60px margin top and bottom</p>
</div>
```
*/
.content-section--small {
	margin-top: 10px;
	margin-bottom: 10px;
}

/*
use ```content-section--collapsed-top``` to remove top margin.

```
<div class="content-section content-section--collapsed-top">
	<p>this has no margin top</p>
	<p class="fixie"></p>
	<p class="fixie"></p>
</div>
```
*/
.content-section--collapsed-top {
	margin-top: 0;
}

/*
use ```content-section--collapsed-bottom``` to remove bottom margin.

```
<div class="content-section content-section--collapsed-bottom">
	<p>this has no margin bottom</p>
	<p class="fixie"></p>
	<p class="fixie"></p>
</div>
```
*/
.content-section--collapsed-bottom {
	margin-bottom: 0;
}


/*
## Two columns content

top split content into 2 columns

```
<div class="two-columns-content">
	<p class="fixie"></p>
	<p class="fixie"></p>
</div>
```
*/
.two-columns-content {
	-moz-column-count: 2;
	-moz-column-gap: 20px;
	-webkit-column-count: 2;
	-webkit-column-gap: 20px;
}

.two-columns-content p {
	display: inline-block;
}


/*
## Page Pattern

```
	<div class="page page-patterned">
	</div>
```
*/

.codedemo .page {
	min-height: 400px;
}

.page-patterned {
	background: url(/NorthTec/images/main-bg.jpg) #f1f1f2 no-repeat top center;
}


/*
## Grid Section

```
	<div class="grid-section">
		<h4 class="grid-section-title col-inner">Semester 1</h4>
		<div class="grid-section-body">
			<div class="span4 grid-section-item">
				<div class="col-inner">
					<p class="fixie"></p>
				</div>
			</div>
			<div class="span4 grid-section-item">
				<div class="col-inner">
					<p class="fixie"></p>
				</div>
			</div>
			<div class="span4 grid-section-item">
				<div class="col-inner">
					<p class="fixie"></p>
				</div>
			</div>
			<div class="span4 grid-section-item">
				<div class="col-inner">
					<p class="fixie"></p>
				</div>
			</div>
			<div class="span4 grid-section-item">
				<div class="col-inner">
					<p class="fixie"></p>
				</div>
			</div>
			<div class="span4 grid-section-item">
				<div class="col-inner">
					<p class="fixie"></p>
				</div>
			</div>
		</div>
	</div>
```
*/

.grid-section { }

.grid-section .col-inner {
	padding: 0 5px;
}

.grid-section-title {
	text-transform: uppercase;
	color: #007788;
	font-size: 16px;
	letter-spacing: 1px;
	margin-bottom: 20px;
}

.grid-section-body {
	overflow: hidden;
	letter-spacing: -4px;
}

.grid-section-body > *,
.grid-section-item {
	letter-spacing: normal;
	display: inline-block;
	float: none;
	margin-bottom: 10px;
	vertical-align: top;
}


/*
## Patterned Background

```
	<div class="patterned-background">
	</div>
```
*/

.codedemo .patterned-background { 
	min-height: 300px;
}

.patterned-background {
	background: url("/NorthTec/images/triangle-pattern.jpg") no-repeat top center;
}


/*
## Patterned Background - Alternate

```
	<div class="patterned-background-alternate">
	</div>
```
*/

.codedemo .patterned-background-alternate { 
	min-height: 300px;
}

.patterned-background-alternate {
	background: url("/NorthTec/images/triangle-pattern-two.jpg") no-repeat top center;
}


.patterned-background--space {
	background-position: center 100px;
}


.intro-content-with-form {
	position: relative;
	z-index: 10;
	padding-top: 20px;
}

.intro-content-form {
	float: right;
	margin-top: -180px;
}

.intro-content {
	margin-right: 470px;
}

@media (max-width: 800px) {
    
    .intro-content-form {
        margin-top: 0;
        margin-bottom: 50px;
        float: none;
    }
  
    .intro-content {
        margin-right: 0;
    }
  
}


.programme-page {
	margin-top: 15px;
	margin-bottom: 30px;
}


p.papers-title {
	text-transform: uppercase;
	font-family: "Lato","LatoMacrons";
	color: #007787;
	margin: -1em 0 1.5em 0;
	font-size: 0.9em;
	letter-spacing: 1px;
}


/*
## Page Primary

```
	<div class="content-section-primary" style="min-height: 400px;">
	</div>
```
*/


.content-section-primary {
	background: #f1f1f2 url('/NorthTec/images/triangle-pattern-2.jpg') no-repeat 30px 30px;
	padding: 50px 0;
}


/*
## Page Header

```
	<div class="page-header">
		<h3>Our Programmes</h3>
		<p>Choose a category Below</p>
	</div>
```
 */

.page-header {
	margin-bottom: 25px;
}

.page-header h3 {
	color: #007787;
	font-size: 58px;
	font-family: "oswald";
	/*font-weight: bold;*/
	font-style: normal;
	text-transform: none;
}

.page-header p {
	color: #484848;
	font-size: 18px;
	/*font-weight: bold;*/
	line-height: 22px;
	margin-top: 11px;
	/*text-transform: uppercase;*/
}

.page-header-link {
	margin-top: 50px;
	padding: 12px 20px;
	font-weight: 900;
	letter-spacing: 1px;
	float: right;
}

.page-header-link .icon {
	margin-left: 10px;
	margin-right: 10px;
	font-size: 1.4em;
	position: relative;
	top: 3px;
}


@media (max-width: 800px) {

	.page-header h3 {
		font-size: 35px;
	}
	
	.page-header p {
		font-size: 16px;

	}

	.page-header-link {
		margin-top: 10px;
		float: none;
		display: inline-block;
	}

}



.programme-page-content {
	margin-bottom: 75px;
}


.programme-sidebar {
	margin-right: 20px;
	margin-top: -95px;
	position: relative;
}

@media (max-width: 960px) {

	.programme-sidebar {
		margin-right: 0;
		margin-top: 0;
	}
	
}