/*
## Listings
*/

/*
## List Item

```
	<div class="list-item">
		<a href="#" class="list-item-header">
			<img src="http://placehold.it/285x200" />
			<span class="list-item-header-overlay">
				<span class="list-item-header-overlay-text">See More</span>
			</span>
		</a>
		<div class="list-item-body">
			<h3 class="list-item-title">
				<a href="#">
					<span>Semester 2</span>
					Programme Title goes here
				</a>
			</h3>
			<p class="fixie"></p>
		</div>
		<div class="list-item-footer">
			<p>Auckland</p>
		</div>
	</div>
```
*/

.codedemo .list-item {
	max-width: 285px;
}

.list-item, .coupon-item {
	overflow: hidden;
	background: white;
	margin-bottom: 20px;
}
.coupon-item {
  border: 1px solid #dadada;
  position:relative
}
.coupon-title span{
  display: block;
  font-size: 0.8em;
  padding-top: 0.3em;
  }
.img-container{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align:center;
  font: 0/0 a;
}
.dummy{
  padding-top: 100%;
  }
.img-container .centerer {
  display: inline-block; height: 100%;vertical-align: middle;
  }
.img-container img{
  display: inline-block;
  max-height: 100%;
  max-width: 100%;
  vertical-align: middle;
  padding-left:1em
  }
.list-item-header {
	display: block;
	position: relative;
}

.list-item-header-overlay, .coupon-overlay {
	position: absolute;
	background: rgba(0,119,135,0.8);
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	opacity: 0;
}

.list-item-header-overlay-text, .coupon-overlay-text {
	color: white;
	text-transform: uppercase;
	font-family: "Lato","LatoMacrons";
	font-weight: 900;
	font-size: 1em;
	top: 50%;
	margin-top: -6px;
	position: absolute;
	width: 100%;
	display: block;
}

.list-item-header img {
	display: block;
}

.list-item-body {
	padding: 20px 20px 16px 20px;
}
.programme-tile .list-item-body{
  min-height: 60px;
  }
.shortcourse .list-item-body {
  min-height: 36px;
  }

.list-item-title {
	margin: 0;
	text-transform: uppercase;
	font-size: 1.1em;
}

.list-item-title a {
	color: #007788;
	font-size: 1em;
}

.list-item-title span {
	display: block;
	margin-bottom: 10px;
	font-size: 0.8em;
	color: #cccccc;
}

.list-item-body p {
	font-size: 14px;
	margin: 1em 0;
}

.list-item-body p:last-child {
	margin-bottom: 0;
}


.list-item-footer {
	border-top: 1px solid #ccc;
	padding: 15px 20px;
}

.list-item-footer p {
	margin: 0;
	color: #cccccc;
	font-family: "Oswald";
	text-transform: uppercase;
	font-size: 0.9em;
}

#main .list-item-footer p {
	margin-bottom: 0;
}


.list-item-header:hover .list-item-header-overlay, .coupon-item:hover .coupon-overlay{
	opacity: 1;
}
.opacity-1 {
	opacity: 1;
}


.top-prog-title {
	color: #007787;
	font-size: 16px;
	text-transform: uppercase;
	font-weight: bold;
	background: none repeat scroll 0% 0% #F2F2F2;
	padding: 20px 5px;
	width: 265px;
	margin-top: -73px !important;
	margin-bottom:40px;
}

.program-box img {
	width:278px;
	height: 200px;
}

.program-box hr {
	border-top: 1px solid #f0eeee;
}

.list-item-content {
	padding:20px;
	font-size:14px;
}

.list-item-semester {
	color:#bdbdbd;
	text-transform:uppercase;
	font-size:12px;
}

.prog-title {
	text-transform: uppercase;
	color: #007788;
	font-size:14px;
	font-weight:bold;
}

.prog-loc {
	color:#bdbdbd;
	text-transform:uppercase;
	font-size:12px;
	margin-left:20px;
	margin-bottom:10px;
}

.explore-prog {
	width: 300px;
	margin:0 auto;
	margin-top: 50px;
}

.explore-prog a{
	background: #007788;
	padding: 10px 20px;
	border-radius: 5px;
	margin: 0 auto;
	color:#fff;
	text-decoration: none;
	font-weight:bold;
	text-transform: uppercase;
	font-size: 14px;
}

.explore-prog a:hover {
	background: #87CC56;
}



/*
## News Item

```
	<div class="news-item">
		<div class="news-item-inner">
			<div class="news-item__body">
				<a href="#" class="news-item__title">News Title goes here</a>
				<p class="fixie"></p>
			</div>
		</div>
		<div class="news-item__image">
			<img src="http://placehold.it/165x165" alt="" />
			<a href="#" class="news-item__link">Read More</a>
		</div>
	</div>
```
*/

.news-item {
	overflow: hidden;
	margin-bottom: 20px;
}

.news-item-inner {
	float: left;
	width: 100%;
}

.news-item__image {
	float: left;
	width: 165px;
	position: relative;
	margin-left: -100%;
}

.news-item__body {
	margin-left: 165px;
	background: white;
	padding: 30px 20px;
	min-height: 105px;
}

.news-item__body p {
	margin: 0;
}

.news-item__title {
	color: #1a8594;
	font-size: 1.3em;
	margin-bottom: 15px;
	font-family: "Oswald";
	text-transform: uppercase;
	display: block;
	letter-spacing: 1px;
}

.news-item__link {
	display: block;
	position: static;
	bottom: 0;
	left: 0;
	width: 125px;
	color: white;
	text-transform: uppercase;
	font-family: "Lato","LatoMacrons";
	font-weight: 900;
	font-size: 1em;
	letter-spacing: 1px;
	padding: 15px 20px;
	background: #1a8594;
}

.news-item__link:hover {
	background: #4da0ac;
}


@media (max-width: 480px) {

	.news-item-inner {
		float: none;
		width: auto;
	}

	.news-item__image {
		float: none;
		width: auto;
		margin: 0;
	}

	.news-item__link {
		width: auto;
	}

	.news-item__body {
		margin: 0;
	}

}


/*------------------------------- LOCATION ------------------------------- */

.location-wrapper {
	margin-top:30px;
	width: 100%;
	height: 513px;
	background: url(/NorthTec/images/triangle-pattern.jpg) no-repeat #f1f1f2 10px 1px;
}

.map-img {
	float:left;
}

.map-content {
	float:right;
	width:780px;
}

.map-title{
	color:#007787;
	font-size:60px !important;
	font-weight:bold;
	font-family: 'Oswald', sans-serif;
}

.map-about {
	color:#007787;
	font-size:20px !important;
	font-weight:bold;
}

.map-col {
    margin-top: 30px;
    width: 364px;
    float: left;
    margin-right: 20px;
    font-size: 14px;
}

.circle-images {
	margin-top:50px;
}

/*------------------------------- LOCATION-2 ------------------------------- */

.location-wrapper-two {
	margin-top:40px;
	width: 100%;
	height: 513px;
	background: url(/NorthTec/images/triangle-pattern-two.jpg) no-repeat #f1f1f2 10px 1px;
}

.map-img-two {
	float:right;
}

.map-content {
	float:left;
	width:780px;
}

.map-title{
	color:#007787;
	font-size:60px !important;
	font-weight:bold;
}

.map-about {
	color:#007787;
	font-size:20px !important;
	font-weight:bold;
	border-bottom: 2px dashed #c2cece;
}

.map-col {
    margin-top: 30px;
    width: 364px;
    float: left;
    margin-right: 20px;
    font-size: 14px;
}

/*------------------------------- SEMESTER------------------------------- */

.semester-wrapper {
	margin-top: -20px;
}

.semester-block {
	float: left;
	width: 587px;
	margin-right: 10px;
}

.semester-block h3 {
	color:#005d70 !important;
	font-weight:bold;
	text-transform: uppercase;
}

.semester-box {
	background: none repeat scroll 0% 0% #FFF;
	width: 180px;
	margin-right: 7px;
	margin-left:7px;
	margin-bottom: 20px;
	float: left;
}

.semester-content {
	padding:20px;
}

.need-info {
	width: 778px;
	margin: 45px auto 0px;
}

.need-info a{
	background: none repeat scroll 0% 0% #1a8594;
	padding: 16px 20px;
	border-radius: 5px;
	margin: 0px auto;
	color: #85CA54;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 24px;
	font-weight: bold;
}




.category-list{
	padding: 0;
	margin: 0;
}

.category-list li{
	list-style:none;
	display: inline-block;
	float: left;
	width:23.999999%;
	text-align: center;
	margin:5px;
}
.category-list li a:hover{
	background: rgba(0,119,135,0.8);
	color: #fff;
}
.category-list li a{
	background: #fff;
	width: 100%;
	display: block;
	height: 50px;
	padding: 10% 0 0 0;
	font-family: 'oswald-bold';
	font-style: normal;
	color:#007787;
	font-size: 15px;
	text-transform: uppercase;
}

/* Larger than mobile */
@media (min-width: 300px) and (max-width: 550px) {
	.category-list li{
		width:100%;
		display: block;
	}
}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 551px) and (max-width: 909px ) {
	.category-list li{
		width:48%;
	}

}
/*
## Gallery List
```
<ul class="gallery-list">
    <li>
        <img src="assets/images/cropped.png">
        <div class="gallery-list_overlay"></div>
        <section class="description">
            <p class="section-title">SEMESTER 2</p>
            <p class="section-header">PROGRAM TITLE GOES HERE</p>
            <p class="section-content">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum consequuntur itaque tempora.
            </p>
        </section>
        <footer>
            tset
        </footer>
    </li>
    <li>
        <img src="assets/images/cropped2.png">
        <div class="gallery-list_overlay"></div>
        <section class="description">
            <p class="section-title">SEMESTER 2</p>
            <p class="section-header">PROGRAM TITLE GOES HERE</p>
            <p class="section-content">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum consequuntur itaque tempora.
            </p>
        </section>
        <footer>
            tset
        </footer>
    </li>
</ul>
```
*/

.gallery-list{
	padding: 0;
	margin: 0;
}

.gallery-list li{
	width:23%;
	list-style: none;
	display:inline-block;
	background: #fff;
	margin:10px;
	float: left;
	position:relative;
}

.gallery-list li img,
.gallery-list li section,
.gallery-list li footer{
	max-width: 99.9%;
}

.gallery-list li img{
	min-height: 180px;
	width: 100%;
}


.gallery-list li .description{
	width:100%;
	padding: 0 10px;
}
.gallery-list li section .section-title{
	color:#ccc;
	margin: 0;
	margin: 25px 0 15px 0;
	font-weight: bold;
}
.gallery-list li section .section-header{
	color:#007787;
	font-family: 'Lato-Regular';
	font-weight: bold;
	margin: 0;

}
.gallery-list li section .section-content{
	color:#000;
	padding: 20px 0;
	margin: 0;
}
.gallery-list li footer{
	border-top:1px solid #CBCCCC;
	padding: 20px 10px;
	color: #CBCCCC;
}

.gallery-list_overlay{
	position:absolute;
    top:0;
    width:0;
    width:100%;
    height:100%;
    background-color:rgba(255, 255, 255, 0.3);
    display:none;
}

.gallery-list li:hover .gallery-list_overlay{
	display: block;
	cursor: pointer;
}
/* Larger than mobile */

/* Larger than phablet (also point when grid becomes active) */
/*3 Grids*/
@media (min-width: 1140px) and (max-width: 1264px ) {
	.gallery-list li{
		width:32.22%;
		margin: 5px;
	}
}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 718px) and (max-width: 1139px ) {
	.gallery-list li{
		width:48.22%;
		margin: 5px;
	}
}
@media (min-width: 551px) and (max-width: 717px ) {
	.gallery-list li{
		width:46%;
		margin: 5px;
	}
}
@media (min-width: 300px) and (max-width: 550px) {
	.gallery-list li{
		width:100%;
		margin: 5px;
		display: block;
	}
}


/*
## courses-program-table
*/

.courses-program-table{
	border-collapse: collapse;
	width: 100%;
}
.courses-program-table tr td{
	padding: 8px 5px;
}
.courses-program-table tr td > *{
	padding: 8px 5px;
	color: #007787;
	font-style: normal;
	font-family: 'Lato','LatoMacrons';
}
.courses-program-table tr:nth-child(odd){
	background:#F1F1F2;
}


/*
# Staff listing
```
<div class="staff-listing">
    <div class="staff-listing-item">
        <div class="staff-listing-item_image">
            <img src="site/images/emp1.png" >
        </div>
        <div  class="staff-listing-item_details">
               <p class="staff-listing-item_details-name">John Doe</p>
               <p class="staff-listing-item_details-position">Head Programmer</p>
               <p class="staff-listing-item_details-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus deserunt dicta perspiciatis? Magnam molestias facere esse maxime ipsam quam iste explicabo quidem quae officia.</p>
               <span class="staff-listing-item_details-links">
                <a href=""><span class="icon icon-phone"></span> (04) 939 0133</a>
                <a href=""><span class="icon icon-email"></span> events@Alzheimers.org.nz</a>
               </span>
        </div>
    </div>
    <div class="staff-listing-item">
	    <div class="staff-listing-item_image">
	        <img src="site/images/emp1.png" >
	    </div>
	    <div  class="staff-listing-item_details">
	           <p class="staff-listing-item_details-name">John Doe</p>
	           <p class="staff-listing-item_details-position">Head Programmer</p>
	           <p class="staff-listing-item_details-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus deserunt dicta perspiciatis? Magnam molestias facere esse maxime ipsam quam iste explicabo quidem quae officia.</p>
	           <span class="staff-listing-item_details-links">
	            <a href=""><span class="icon icon-phone"></span> (04) 939 0133</a>
	            <a href=""><span class="icon icon-email"></span> events@Alzheimers.org.nz</a>
	           </span>
	    </div>
	</div>
</div>
```
*/

.staff-listing{
	/*width: 100%;*/
}
.staff-listing-item:after{
	clear:both;
	content:" ";
	display: table;
}

.staff-listing-item{
	padding: 12px 0 23px 0;
}
.staff-listing-item:hover .overlay{
	display: block;
}
.staff-listing-item_image{
	display: inline-block;
	width: 25%;
	float: left;
	position:relative;
}
.staff-listing-item_image .overlay{
	position:absolute;
    top:-2%;

	left:0;
	display: block;
	height:  100px;
	width: 100px;
	margin: 2% auto 0 auto;
	border-radius: 100px;

    background-color:rgba(0, 119, 135, 0.8);
    display:none;
}
.staff-listing-item_image div{
	position: relative;
	width: 100px;
	height:100px;
	margin-left: 25px;
}
.staff-listing-item_image div img{
	display: block;
	height:  100px;
	width: 100px;
	margin: 2% auto 0 auto;
	border-radius: 100px;

}

.staff-listing-item_details{
	display: inline-block;
	width: 73%	;
	float: left;
	padding-bottom: 24px;
	border-bottom: 1px solid #c0c0c0; 
}
.

.staff-listing-item_details-name{
	margin: 10px 2px;
	font-size: 18px;
	font-weight: bold;
	color: #0A4C8B;
}
.staff-listing-item_details-position{
	margin: 10px 2px;
	font-size: 14px;
	color: #0A4C8B;	
}
.staff-listing-item_details-description{
	color:#000;
	margin: 2px;
}
.staff-listing-item_details-links{
	display: inline-block;
	margin: 20px 0;
}
.staff-listing-item_details-links a span{
	font-weight: bold;
}
.staff-listing-item_details-links a{
	margin-right:10px;
	color:#0A4C8B;
	font-family: 'asap';
	font-size: 15px;
}

.staff-listing .staff-listing-item:last-child .staff-listing-item_details{
	border-bottom: 0;
}



/*
## related-news-content
```
```
*/

.related-news-content{
	margin: 0;
	padding: 0;
}

.related-news-content li{
	list-style: none;
	display: inline-block;
	float: left;
	width: 31.333333%;
	background: #fff;
	margin: 1%;
}

.related-news-content .related-news-content_image{
	display: inline-block;
	min-width:120px;
	width:120px;
	max-width:120px;
	float: left;
	position: relative;
}
.related-news-content .related-news-content_image div{
	/*position: absolute;*/
	bottom: 0;
	width: 100%;
	max-width: 93%;
	background: #007787;
	padding: 10px 5px;
	text-align: center;
	margin: 0;
}
.related-news-content .related-news-content_image div a{
	color:#fff;
	font-style: normal;
	font-family: 'Lato-Bold';
}
.related-news-content .related-news-content_image img{
	width: 100%;
	height: 100px;
	margin: 0 0 -5px 0;
}
.related-news-content .related-news-content_description{
	display: inline-block;
	max-width: 52%;
	float: left;
	padding: 0 10px 10px 20px;
}
.related-news-content_description p{
	margin: 0;
	padding: 0;
}
.related-news-content_description h5{
	color:#007787;
}

/* Larger than mobile */
@media (min-width: 300px) and (max-width: 550px) {
	.related-news-content li{
		width: 100%;
	}
}

/*
## Bread crumbs
```
<p><code> bread-crumbs </code> add class <code>active</code> to li to hightlight current list</p>
<ul class="bread-crumbs">
	<li>This</li>
	<li class="active">is the</li>
	<li>Bread crumbs</li>
</ul>
<p>Add <code>bread-crumbs-auto</code> to ul to automate the bread crumbs detection</p>
<ul class="bread-crumbs bread-crumbs-auto">
	<li>This</li>
	<li>is the</li>
	<li>Bread crumbs</li>
</ul>
```
*/

.bread-crumbs {
	margin: 0;
	padding: 0;
}
.bread-crumbs li{
	display: inline-block;
	color:#c0c0c0;
	font-size: 16px;
}
.bread-crumbs li a,
.bread-crumbs li{
	font-family: 'Lato-Regular';
	color:#000;
	font-size: 13px;
}
.bread-crumbs li.active{
	color: #0B4C90;
}


.bread-crumbs li:after{
	content:"\00a0>\00a0";
}
.bread-crumbs.bread-crumbs-auto li:last-child{
	color:#0B4C90;
}
.bread-crumbs li:last-child:after{
	content:"";
}

/*
##	 Accordion
*/

.accordion-panel {

}

.accordion-panel-head{
	height: 2px; 
	background-color: #ccc; 
	text-align: center;
	margin:30px 0;
}
.accordion-panel-head span{
	background-color: white; 
	position: relative; 
	padding:0 20px;
	top: -11px;
	color:#ccc
}

/*
## Footer Mobile Link
*/
.footer-mobile{
	display: inline-block;
	width: 111px;
	height: 31px;
	background: url('img/works-on-mobile-white.png');
}