/* ---- SITE.CSS ----
   Contains the majority of the CSS used to format the main structure of the website. Default
   formatting is for mobile browsing. Additional media queries in seperate files have been included.
*/

/* -- CSS RESET -- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; font-size:100%; vertical-align:baseline; }
body { line-height:1; }
ol, ul { list-style:none; }
strong { font-weight:bold; }
em { font-style:italic; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; }
table { border-collapse:collapse; border-spacing:0; }
:focus { outline:none; }

/* -- HTML5 display-role reset for older browsers -- */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; }

/* -- Generic styles -- */
body {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 20px;
  
}

::selection { background:#8558a8; color:#fff; }
::-moz-selection { background:#8558a8; color:#fff; }

abbr { border-bottom:1px dotted #545454; }
a abbr { border-bottom:none; }

a { color:#ffffff; text-decoration:none; }
a:hover { text-decoration:underline; color:#555;}

.ninja { display:none !important; }
.clear { clear:both; }
.sink { clear:both !important; display:block !important; height:0 !important; line-height:0 !important; font-size:0 !important; margin:0 !important; padding:0 !important; }
.no-bottom { margin-bottom:0 !important; padding-bottom:0 !important; }
.no-top { margin-top:0 !important; padding-top:0 !important; }
.no-wrap { white-space:nowrap !important; }

.large-text { font-size:14px; line-height:22px; }
.larger-text { font-size:16px; line-height:24px; }

.formatted { font-size:14px; line-height:22px; }
.formatted a { color:#4a70bb; }
.formatted > h1 { font-size:28px; line-height:35px; margin:24px 0 10px; }
.formatted > h2, .formatted > h1.small-heading { font-size:21px; line-height:28px; margin:24px 0 8px; }
.formatted > h3, .formatted > h2.small-heading { font-size:17px; line-height:24px; margin:24px 0 8px; }
.formatted > p { margin:0 0 16px; }
.formatted > ul { list-style-type:disc; margin:0 0 16px; padding:0 0 0 15px; }
.formatted > li > ul { padding:8px 0 0 15px; }
.formatted > ol { list-style-type:decimal; margin:0; padding:0 0 0 18px; }
.formatted > li > ol { list-style:lower-alpha; margin:0 0 16px; padding:8px 0 0 18px; }
.formatted > img { display:inline-block; margin:0 0 16px; }
.edit-class-Rule, .formatted > hr { border:none; border-top:1px dotted #cfcfcf !important; clear:both !important; height:16px !important; margin:16px 0 0 !important; padding:0 !important;}
.edit-class-Rule hr { display:none; }
.formatted > *:first-child { margin-top:0; padding-top:0; }
.formatted > *:last-child { margin-bottom:0; padding-bottom:0; }

@font-face {
	
	font-family: NettoOT;
	src: url("../fonts/NettoOT.otf");
	
}

@font-face {
	
	font-family: NettoOT;
	src: url("../fonts/NettoOT.eot");
	
}

@font-face {
	
	font-family: NettoOT;
	src: url("../fonts/NettoOT.svg");
	
}

@font-face {
	
	font-family: SabonRoman;
	src: url("../fonts/SabonLTStd-Roman.otf");
	
}

.inner {
    margin:0 auto;
    padding:0 10px;
    text-align:left;
    width:300px;
}

/* -- Home page -- */
#logo-full {
    height:250px;
    width:100%;
    background-color:#000;
    z-index:1;
}

.topBar {
	
	height: 33px;
	position: absolute;
	left: 0;
	width: 100%;
	background-color: #1d1d1d;
	z-index: 666;
	
}

.previousYear {

	font-family: NettoOT;
	margin-left: 80px;
	margin-bottom: 0;
	margin-top: 10px;
	
}

.previousYear li {

	display: inline-block;
	margin-bottom: 0;
	
}

.previousYear a {

	color: #CCC;
	
}

.previousYear a:hover {

	color: #666;
	
}

.yearActive a{

	color: #666;
	
}

.yearActive a:hover {

	color: #666;
	
}

#logo{
    height:250px;
    background:url("../img/logo-small.png") no-repeat center;
}

#dots{
    background:url("../img/dot.png") repeat left;
    height:20px;
    position:relative;
    top:40px;
    z-index:2;
    display: none;
}

#body-full{
   background: #fff;
    width:100%;
    position:relative;
    top:30px;
    border-top:1px solid #fff;
    -moz-box-shadow: 0 -3px 3px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow:0 -3px 3px rgba(0, 0, 0, 0.2);
    box-shadow: 0 -3px 3px rgba(0, 0, 0, 0.2);
    z-index:2;
}

#icons{
    background:url("../img/icons.png") no-repeat left;
    height:20px;
    width:200px;
}

.filter{
    width:155px;
    margin:0 auto;
    margin-top:25px;
}

.filter > div{
    margin-right:8px;
    margin-left:8px;
    transition: padding 0.2s, margin 0.2s, opacity 0.2s;
    -moz-transition: padding 0.2s, margin 0.2s, opacity 0.2s; /* Firefox 4 */
    -webkit-transition: padding 0.2s, margin 0.2s, opacity 0.2s; /* Safari and Chrome */
    -o-transition: padding 0.2s, margin 0.2s, opacity 0.2s; /* Opera */
    width:51px;
    height:28px;
    border:4px solid #555;
    display:inline-block;
    margin-top:2px;
    margin-bottom:2px;
    cursor:pointer;
    opacity:0.5;
    filter:alpha(opacity=50); /* For IE8 and earlier */
}

.filter > div:hover{
    padding:2px;
    margin-right:6px;
    margin-left:6px;
    margin-top:0;
    margin-bottom:0;
    opacity:1;
    filter:alpha(opacity=100); /* For IE8 and earlier */
}

.filter > .thumbs {
    background:url("../img/grid-view-icon.png") no-repeat center;
}
.filter > .list {
    background:url("../img/list-view-icon.png") no-repeat center;
}
.filter > .random {
    background:url("../img/random-icon.png") no-repeat center;
}

.selected {
    opacity:1 !important;
    filter:alpha(opacity=100) !important; /* For IE8 and earlier */ 
}
a.selected {
    opacity:1 !important;
    filter:alpha(opacity=100) !important; /* For IE8 and earlier */ 
}

.course-filter {
    text-align:center;
    margin-top:20px;
    letter-spacing:0.5px;
    font-family: NettoOT, Helvetica, Arial, sans-serif;
}

.course-filter a {
    opacity:0.5;
    filter:alpha(opacity=50); /* For IE8 and earlier */
    color:#555;
    transition: opacity 0.2s;
    -moz-transition:  opacity 0.2s; /* Firefox 4 */
    -webkit-transition: opacity 0.2s; /* Safari and Chrome */
    -o-transition: opacity 0.2s; /* Opera */
}
.course-filter a:hover {
    opacity:1;
    filter:alpha(opacity=100); /* For IE8 and earlier */
    text-decoration:none;
}

.students{
    margin-top:20px;
    min-height:700px;
    padding-bottom:60px;
}

/* Filter */

.students > .item > a.student{
    height:130px;
    margin:9px;
    width:130px;
    display:inline-block;
}

.students > .item > a.student > .top-level{
    width:130px;
    height:130px;
    overflow:hidden;
    position:relative;
}

.students > .item > a.student > .top-level > .project-thumb{
    background:no-repeat;
    background-size:cover;
    width:120px;
    height:120px;
    margin:5px;
    position:relative;
    top:0;
	border-radius: 50%;
    transition:all 1s ease 0s;
    -moz-transition:  all 1s ease 0s; /* Firefox 4 */
    -webkit-transition: all 1s ease 0s; /* Safari and Chrome */
    -o-transition:all 1s ease 0s;
}
.students > .item > a.student > .top-level:hover > .project-thumb{
    top:-220px;
    opacity:0;
    filter:alpha(opacity=0); /* For IE8 and earlier */
}


.students > .item > a.student > .top-level > .profile-pic{
    width:80px;
    height:80px;
    margin:0 auto;
    background: no-repeat;
    background-size:cover;
    position:absolute;
    top:210px;
    left:25px;
    transition:all 0.4s ease 0s;
    -moz-transition:  all 0.4s ease 0s; /* Firefox 4 */
    -webkit-transition: all 0.4s ease 0s; /* Safari and Chrome */
    -o-transition:all 0.4s ease 0s;
}
.students > .item > a.student > .top-level:hover > .profile-pic{
    top:0;
}

.students > .item > a.student > .top-level > .student-info{
    height:47px;
    width:100%;
    transition:all 0.5s ease 0s;
    -moz-transition:  all 0.5s ease 0s; /* Firefox 4 */
    -webkit-transition: all 0.5s ease 0s; /* Safari and Chrome */
    -o-transition:all 0.5s ease 0s;
    position:absolute;
    bottom:-210px;
    text-align:center;
    color:#555 !important;
}
.students > .item > a.student > .top-level:hover > .student-info{
    bottom:0;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}


.students > .item > a.student > .top-level > .student-info h2{
    font-size:10px;
    text-transform:uppercase;
    line-height:2px;
    margin-bottom:2px;
    margin-top:10px;
}
.students > .item > a.student > .top-level > .student-info h3{
    font-size:10px;
    margin-top:5px;
    line-height:11px;
}

.students li{
    display:inline-block;
}
.course-filter li{
    display:inline-block;
    padding-right:5px;
    line-height:22px;
}

.course-filter li.active a {color: #555;opacity: 1;filter:alpha(opacity=100); /* For IE8 and earlier */}

/* listing state */
.home .content .listing .project-thumb,
.home .content .listing .profile-pic,
.home .content .listing .top-level .student-info h3 {
	display: none !important;
}
.home .content .listing .top-level {
	width: 210px !important;
	height: 30px !important;
}
.home .content .listing .top-level .student-info {
	top: 0 !important;
}
.home .content .listing .item {
	 float: left;

}
.home .content .listing .item > a.student  {
	 height: 40px;
}

.list-col {
        text-align:center;
       -moz-column-count: 1;
       -moz-column-gap: 20px;
       -webkit-column-count: 1;
       -webkit-column-gap: 20px;
       min-height:600px;
       padding-bottom:40px;
}
.list-col p {
        line-height:30px;
}

.share-footer {
    text-align:center;
    text-transform:uppercase;
    margin: 20px auto;
}

.share-footer > .title {
    color:#fff;
    font-size:18px;
    letter-spacing:2px;
	font-family: NettoOT;
    margin-bottom: 30px;
}

#degreeTitle.title {
    color:#fff;
    font-size:35px;
	margin-top: 20px;
	font-family: SabonRoman;
    letter-spacing:2px;
    margin-bottom: 75px;
}

.share-footer > .share-page {
    margin-top:60px;
}

.share-footer > .share-page > .share {
    border:4px solid #fff;
    padding:10px;
    display:inline-block;
    color:#fff;
    font-weight:bold;
    letter-spacing:1px;
    margin-right:10px;
}

.share-footer > .share-page > .options{
    margin:0 auto;
    display:inline-block;
    vertical-align:top;
}

.share-footer > .share-page > .options a{
    margin-right:8px;
    margin-left:8px;
    transition: padding 0.2s, margin 0.2s, opacity 0.2s;
    -moz-transition: padding 0.2s, margin 0.2s, opacity 0.2s; /* Firefox 4 */
    -webkit-transition: padding 0.2s, margin 0.2s, opacity 0.2s; /* Safari and Chrome */
    -o-transition: padding 0.2s, margin 0.2s, opacity 0.2s; /* Opera */
    width:30px;
    height:30px;
    border:4px solid white;
    display:inline-block;
    margin-top:2px;
    margin-bottom:2px;
    cursor:pointer;
    opacity:1;
    filter:alpha(opacity=100); /* For IE8 and earlier */
    text-indent:-99999px;
    border-radius: 50%;
}

.share-footer > .share-page > .options a:hover{
    padding:2px;
    margin-right:6px;
    margin-left:6px;
    margin-top:0;
    margin-bottom:0;
    opacity:1;
    filter:alpha(opacity=100); /* For IE8 and earlier */
}

.share-footer > .share-page > .options > .facebook {
    background:url("../img/fb.png") no-repeat center;
}
.share-footer > .share-page > .options > .twitter {
    background:url("../img/twitter.png") no-repeat center;
}
.share-footer > .share-page > .options > .email {
    background:url("../img/email.png") no-repeat center;
}

.copyright{
    padding-top: 40px;
    color:#555;
}
.built-by, .built-by a{
    color:#555;
}

.footer-full {
    height:20px;
    position:relative;
    top:9px;
}

#footer-images{
    height:590px;
    background-position: center top;
    background-size: cover;
    display: block;
    background-image: url("../img/students-working.jpg");
    padding-top:150px;
}

.footer{
    text-align:center;
    color:#555;
    padding-bottom:20px;
    font-size:11px;
}

/* -- Student page -- */

#portfolio > .nav-bar {
    width:100%;
    height:45px;
	margin-top: 33px;
    background-color:#000;
	text-align:center;
}

#portfolio > .nav-bar > .home-btn{
    float:right;
    margin-right:20px;
	
}
#portfolio > .nav-bar > .back-btn{
    float:left;
    margin-left:20px;
	margin-top: -5px;
}
#portfolio > .nav-bar > a.home-btn{
    height:45px;
    width:37px;
    display:inline-block;
    background:url("../img/home-btn.png") no-repeat center;
    text-indent:-99999px;
}
#portfolio > .nav-bar > a.back-btn{
    height:45px;
    width:19px;
    display:inline-block;
    background:url("../img/back-btn.png") no-repeat center;
    text-indent:-99999px;
}
#portfolio > .banner-area {
    width:100%;
    background-color: #000;
    z-index:1;
}
#portfolio > .banner-area > .banner-image {
    
    width:100%;
	padding-top: 33px;
    padding-bottom:25px;
	
}
#portfolio > .banner-area > .banner-image > .inner {
    text-align:center;
}
#portfolio > .banner-area > .banner-image > .inner > .profile-image {
    width:181px;
    height:160px;
    margin:0 auto;
    background:no-repeat center;
    background-size:cover;
    padding-top:30px;
}
#portfolio > .banner-area > .banner-image > .inner > .student-name {
    margin:10px auto 0;
}
#portfolio > .banner-area > .banner-image > .inner > .student-name h1 {
    text-transform:uppercase;
    letter-spacing:3px;
    color:#bababa;
    display:block;
    font-size:20px;
    line-height:25px;
    font-family: SabonRoman;
    font-weight:400;
}

#portfolio > .banner-area > .banner-image > .inner > .student-bio {
    margin-top:5px;
    margin-bottom:15px;
}
#portfolio > .banner-area > .banner-image > .inner > .student-bio p {
    color:#bababa;
	font-family: NettoOT;
    line-height:16px;
    font-size:18px;
	letter-spacing: 3;
}
#portfolio > .banner-area > .banner-image > .inner > .student-links {
    margin:0 auto;
    margin-top:10px;
}
#portfolio > .banner-area > .banner-image > .inner > .student-links > a {

    transition: padding 0.2s, margin 0.2s, opacity 0.2s;
    -moz-transition: padding 0.2s, margin 0.2s, opacity 0.2s; /* Firefox 4 */
    -webkit-transition: padding 0.2s, margin 0.2s, opacity 0.2s; /* Safari and Chrome */
    -o-transition: padding 0.2s, margin 0.2s, opacity 0.2s; /* Opera */
	font-family: NettoOT;
    height:25px;
    display:inline-block;
    margin-top:2px;
    margin-bottom:2px;
    line-height:18px;
    font-size:16px;
    color:#bababa;
}
#portfolio > .banner-area > .banner-image > .inner > .student-links > a:hover {
    text-decoration: none;
	color: #fff;
}

#portfolio > .banner-area > .banner-image > .inner > .student-links > a > .links-dash{

	margin-left: 10px;
	margin-right: 10px;
	color: #bababa !important;
	text-decoration: none !important;
	
}

#portfolio > .banner-area > .banner-image > .inner > .student-links > a > .links-dash:hover{

	color: #bababa !important;
	text-decoration: none !important;
}

#portfolio > .student-dots{
    background:url("../img/dot.png") repeat left;
    height:20px;
    position:relative;
    top:-12px;
    z-index:3;
    display: none;
}

#portfolio > .portfolio-area-full {
    background-color:#fff;
    z-index:2;
    -moz-box-shadow: 0 -3px 3px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow:0 -3px 3px rgba(0, 0, 0, 0.2);
    box-shadow: 0 -3px 3px rgba(0, 0, 0, 0.2);
}
#portfolio > .portfolio-area-full > .inner {
    padding-bottom:70px;
    text-align:center;
}
#portfolio > .portfolio-area-full > .inner > .image-wrap{
    padding-top:50px;
}
#portfolio > .portfolio-area-full > .inner > .image-wrap img{
    display: block;
    margin: 0 auto;
    max-width: 864px;
    position: relative;
    width: 90%;
    padding-top:40px;
    padding-bottom:40px;
    clear:both;
}
.text-wrap{
    font-size:12px;
    display: block;
    margin: 0 auto;
    max-width: 864px;
    position: relative;
    width: 90%;
    clear:both;
    color:#1a1a1a;
    padding-bottom:5%;
}

#portfolio > .portfolio-area-full > .share-full {
    height:140px;
    padding-top:20px;
    width:100%;
    background-color:#333;
}
#portfolio > .portfolio-area-full > .footer-area {
    background:url("../img/debut_light.png") repeat;
}

.phone-clear {
    clear:both;
    height:10px;
}




@media (max-width: 380px){
	
	.previousYear {
	
		margin-left: 30px;
		
	}
	
}