/*
## Type
*/

html,
body {
	font-size: 13px;
	color:#333;
}


body {
	font-family: "sans-serif", sans-serif, arial;
	font-weight: normal;
	font-style: normal;
}

div, li, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, th, td {
	margin: 0;
	padding: 0;
}

/*
## Default link and body copy
	
```
<p><a href="#">Placeat</a> dreamcatcher <em>letterpress</em> helvetica <strong>ut vinyl</strong> voluptate <small>street-art</small>. Fixie etsy gentrify art totally art before. Gluten reprehenderit kale art Pinterest.</p>
<p class="fixie"></p>
<p class="fixie"></p>
```

*/

a {
	color:#007787;
	text-decoration:none;
	line-height:inherit;
	font-family:inherit;
	font-weight:inherit;
	font-size:inherit;
}

a:focus,
a:hover {
	text-decoration:none;
}

a img {
	border: none;
}



/*
## Unstyled Link

reverts all link styles

```
	<p><a class="unstyled" href="#">This is a link</a> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
```
*/

a.unstyled {
	color:#333;
	font-family:inherit;
	font-weight:normal;
	font-style:normal;
	text-decoration:none;
}

a.unstyled:focus,
a.unstyled:hover {
	text-decoration:none;
}

/*
p {
	font-family: inherit;
	font-weight: normal;
	font-size: 1em;
	line-height: 1.4;
	margin-bottom: 1em;
	margin-top: 1em;
}
*/


p {
    font-size: 16px;
    line-height: 1.4;
    font-family: "Lato","LatoMacrons", Arial, sans-serif;
    font-weight: normal;
    margin: 1em 0;
}


/*
## Unordered List
```
<ul>
	<li class="fixie"></li>
	<li class="fixie"></li>
	<li class="fixie"></li>
	<li class="fixie"></li>
	<li class="fixie"></li>
	<li class="fixie"></li>
</ul>
```
*/

ul {
	padding-left:3em;
	margin-top:1em;
	margin-bottom:1em;
	line-height:1.4;
}

/*
## Unstyled List

```
<ul class="unstyled">
	<li class="fixie"></li>
	<li class="fixie"></li>
	<li class="fixie"></li>
	<li class="fixie"></li>
	<li class="fixie"></li>
	<li class="fixie"></li>
</ul>
```
*/

ul.unstyled {
	list-style:none;
	padding-left:0;
	margin-top:auto;
	margin-bottom:auto;
	line-height:normal;
}

/*
## Unstyled Anchor

```
<a href="#" class="unstyled-link">this is a link</a>
```
*/

.unstyled-link,
.unstyled-link:focus
.unstyled-link:hover {
	text-decoration:none;
	color:inherit;
	line-height:normal;
	background:none;
	border-radius:0;
	box-shadow:none;
	border:none;
	background:none;
	font-weight:normal;
	font-style:normal;
}

.unstyled-link:before,
.unstyled-link:after {
	content:none;
}

/*
## Headings

use ```alternate``` for lighter version

```
<h1>Heading 1 - 42px <small>Small Text</small></h1>
<h2>Heading 2 - 30px <small>Small Text</small></h2>
<h3>Heading 3 - 18px <small>Small Text</small></h3>
<h4>Heading 4 - 14px <small>Small Text</small></h4>
<h5>Heading 5 - 12px <small>Small Text</small></h5>
<h6>Heading 6 - 10px <small>Small Text</small></h6>

<h1 class="alternate">Heading 1 - 42px <small>Small Text</small></h1>
<h2 class="alternate">Heading 2 - 30px <small>Small Text</small></h2>
<h3 class="alternate">Heading 3 - 18px <small>Small Text</small></h3>
<h4 class="alternate">Heading 4 - 14px <small>Small Text</small></h4>
<h5 class="alternate">Heading 5 - 12px <small>Small Text</small></h5>
<h6 class="alternate">Heading 6 - 10px <small>Small Text</small></h6>
```
*/

h1, h2, h3, h4, h5, h6 {
	font-family: "Oswald", "sans-serif";
	font-style: normal;
	font-weight: normal;
	text-rendering: optimizeLegibility;
	line-height: 1.2;
}

h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
	font-size: 60%;
	color: inherit;
	line-height: 0;
}

h1.alternate,
h2.alternate,
h3.alternate,
h4.alternate,
h5.alternate,
h6.alternate {
	font-weight:300;
}

h1 { font-size:3.2em; }

h2 { font-size:2.15em; }

h3 { font-size:1.8em; }

h4 { font-size:1.3em; }

h5 { font-size:1em; }

h6 { font-size:0.71em; }


.content-section-header {
	margin-bottom:20px;
}



em,
i {
	font-style: italic;
	line-height: inherit;
}

strong,
b {
	font-weight: bold;
	line-height: inherit;
}

small {
	font-size: 60%;
	line-height: inherit;
}

.print-only {
	display: none !important;
}


/*
## Separator

```
	<hr class="separator" />
```
*/

.separator {
	width: 1180px;
	max-width: 100%;
	margin: 40px auto;
	border: 0;
	border-top: 2px dashed #c2cece;
}

.separator-primary {
	border-top-color: #c2dde1;
}


/*
## Bordered Title

```
	<h4 class="bordered-title">
		<span>Our Top Programmes</span>
	</h4>
```
*/

.bordered-title {
	position: relative;
	text-align: center;
	text-transform: uppercase;
	font-family: "Oswald";
	overflow: hidden;
	color: #007788;
	font-size: 0.9em;
	letter-spacing: 1px;
	margin-bottom: 40px;
}

.bordered-title span {
	display: inline-block;
	padding: 0 20px;
	position: relative;
}

.bordered-title span:before,
.bordered-title span:after {
	content: "";
	position: absolute;
	display: block;
    width: 1000px;
    top: 50%;
	margin-top: -1px;
    border-top: 2px dashed #c2cece;
}

.bordered-title span:before { right: 100%; }

.bordered-title span:after { left: 100%; }


@media (max-width: 480px) {
  
  .bordered-title {
      margin-bottom: 10px;
  }
  
}


/*
## Two Column Content

```
	<div class="two-column-content">
		<p class="fixie"></p>
		<p class="fixie"></p>
		<p class="fixie"></p>
	</div>
```
*/

.two-column-content {
	-moz-column-count: 2;
	-webkit-column-count: 2;
	column-count: 2;
	-moz-column-gap: 20px;
	-webkit-column-gap: 20px;
	column-gap: 20px;
}

.two-column-content p {
	margin-top: 0;
}


.course-description h4 {
	color: #333;
}

.course-description a {
	font-size: 1em;
	color: #009CB2;
}
.course-description a:hover {
	text-decoration: underline;
	color: #93d167;
}


/*
## News Detail
  Used in News Details Page.  Make sure you remove src attribute when using.

<div class="news-detail-head">
  <h2></h2>
</div>


<div class="row news-detail-top-section">
    <h2 class="alternate "></h2>
    <p class="news-category-top-date"></p>
    <div class="row">
        <div class="span6  tablet6 mobile6 ">
            <div class="col-inner">
                <p>
                   
                </p>
            </div>
        </div>
        <div class="span6 tablet6 mobile6">
            <div class="col-inner">
                <img alt="" class="image-loaded" src='http://placehold.it/350x150' />
            </div>
        </div>
    </div>
</div>
*/

.news-detail-head{
	color: #000;
	margin-top: 30px;
}
.news-detail-top-section{
	margin-top: 110px;
	margin-bottom: 70px;
}
.news-detail-top-section h2{
	text-transform: none;
}
.news-category-top-date{
	margin-top: 10px;
	border-bottom: 1px solid #B4B5B6;
	padding-bottom: 15px;
	margin-bottom: 20px;
}
.news-detail-top-section-main{
	float: left;
	width: 100%;
}


/*
## Inline Icon

Standard text with inline icons

```
	<p class="inline-icon"><span class="icon icon-first icon-phone"></span> Lorem Ipsum is simply dummy text of the <span class="icon icon-phone"></span> printing and typesetting <span class="icon icon-last icon-phone"></span></p>
```
*/

.inline-icon .icon {
	font-size:25px;
	margin-left:10px;
	margin-right:10px;
	vertical-align:middle;
	line-height:normal;
}

.inline-icon .icon-first { margin-left:0; }

.inline-icon .icon-last { margin-right:0; }


/*
## Inline Icon - Large

Standard text with inline icons a bit larger

```
	<p class="inline-icon inline-icon--large"><span class="icon icon-first icon-phone"></span> Lorem Ipsum is simply dummy text of the <span class="icon icon-phone"></span> printing and typesetting <span class="icon icon-last icon-phone"></span></p>
```
*/

.inline-icon--large .icon {
	font-size:30px;
}


/*
## Title

real thin title

```
	<h4 class="title fixie"></h4>
```
*/

.title {
    font-weight: 300;
    color: #b2b2b2;
}

.title--collapsed {
	margin: 0;
}

.title--large {
	margin: 20px 0;
}

.title--small {
	font-size: 14px;
}