@font-face {
	font-family: kepler-b;
	src: url(kepler-std/KeplerStd-BoldCapt.otf);
}

@font-face {
	font-family: kepler-bb;
	src: url(kepler-std/KeplerStd-BoldCapt.otf);
}

@font-face {
	font-family: AvenirNext-Bold;
	src: url(avenir/AvenirNext-Bold-01.ttf);
}

@font-face {
	font-family: AvenirNext-DemiBold;
	src: url(avenir/AvenirNext-DemiBold-03.ttf);
}

@font-face {
	font-family: AvenirNext-Medium;
	src: url(avenir/AvenirNext-Medium-06.ttf);
}

@font-face {
	font-family: AvenirNext-Regular;
	src: url(avenir/AvenirNext-Regular-08.ttf);
}

/* declaration end */

body {
	overflow-x: hidden;
}

.mockup-container {
	max-width: 420px !important;
	margin: auto !important;
}

.dp {
	width: 95%;
}

@media (max-width: 767px) {
    .dp {
    	width: 75%;
    	margin-top: -96px;
    	margin-bottom: 64px;
    }
}

/*
============================
	START OF TEXT CLASSES		 
============================
*/

/* Primary header */
h1{
	font-size: 32px;
	font-family: 'kepler-b', serif;
	color: #2a2a2a;
}

/* Header on project pages wpost-scroll-down */
h1.text-shrink{
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
	font-size: 21px;
	line-height: 40px;
	margin: 12px 0px 12px 0px;
}

/* Text in project banners */
h2.title {
	font-family: 'kepler-b', serif;
	font-size: 90px;
	line-height: 0.8;
	margin-top: 0px;
}

h2.small-title {
	font-family: 'kepler-b', serif;
	line-height: 0.8;
	margin-top: 0px;
}

@media (max-width: 1002px) {
    h2 {
		font-family: 'kepler-b', serif;
		font-size: 5em;
		line-height: 0.8;
		margin-top: 0px;
	}
}

h2.section-title {
	font-family: 'AvenirNext-Bold', serif;
	display: inline;
	font-size: 1.6em;
	line-height: 1.2;
}

h2.section-title span {
	background-color: #FD926F;
	padding: 4px 0px;
}

/* Section headers in project pages*/
h3 {
	font-family: 'AvenirNext-DemiBold', sans-serif;
	font-size: 30px;
	color: #444;
}

/* Default heading text size */
h4{
	font-size: 1.25em;
	font-family: 'AvenirNext-DemiBold', sans-serif;
}


h4.thesis-caption{
	font-size: 1.6em;
    font-family: 'AvenirNext-DemiBold', sans-serif;
    color: #909090;
}

h6 {
	font-family: 'AvenirNext-DemiBold', sans-serif;
	font-size: 1.1em;
	line-height: 1.15;
	margin-bottom: 12px;
	color: #444;
}

h6.project-subtitle{
	font-family: 'AvenirNext-Regular', sans-serif;
	/*font-size: 1em;*/
	line-height: 1.15;
	color: #5b5e6d;
}

/* Project Page details sub-headers*/
.project-details{
	color: #2f9ba0 !important;
}

h6.highlight-header {
	font-family: 'kepler-bb';
	font-size: 21px;
	line-height: 24px;
}

p {
	font-family: 'AvenirNext-Regular', sans-serif;
	color: #5b5e6d;
	font-size: 1em;
	line-height: 1.5;
}

/* Landing page bio text */
p.intro {
	color: #5b5e6d;
	font-family: 'AvenirNext-Regular', sans-serif;
	font-size: 18px;
	line-height: 1.6;
	margin: 16px 0px 24px 0px;
}

p.highlight {
	font-family: 'AvenirNext-Medium', sans-serif;
	color: #2a2a2a;
	font-size: 18px;
	line-height: 21px;
}

p.news-text, .contact-text {
  font-size: 18px;
  line-height: 1.6;
}

.contact-text i,
.contact-text .fa {
  /* match the .fa-lg size (about 18px) */
  font-size: 18px !important;
  width: auto;
  height: auto;
  line-height: 1;
}


p.img-caption{
	font-size: 16px;
	line-height: 16px;
	padding: 0px 32px;
}

/* Footer text */
p.footer-text{
	margin-top: 24px;
	font-weight: 500;
	color: #111;
	font-size: 18px;
}

/* List Style Class*/
ul.body-text{
	list-style-type: circle;
	color: #444;
	font-family: 'AvenirNext-Regular', sans-serif;
	color: #444;
	font-size: 1em;
	line-height: 1.5;
	padding-left: 20px;
}

ul.body-text > li {
	margin: 12px 0px;
}

span.quoted {
	font-style: italic;
	color: #666666;
}

span.highlight {
	color: #FF9E2B;
}

/*
For publications
*/

span.paper-title{
	font-family: 'AvenirNext-DemiBold', sans-serif;
	font-size: 18px;
	line-height: 18px;
	font-style: normal !important;

}

span.authors{
	font-size: 18px;
	line-height: 18px;
	font-family: 'AvenirNext-Regular', sans-serif;
}

span.paper-details{
	font-size: 18px;
	line-height: 18px;
	color: #444;
	font-family: 'AvenirNext-Medium', sans-serif;
}

span.paper-award {
	color: #e76f51;
	font-family: 'AvenirNext-Bold', sans-serif;
}

span.self {
	font-family: 'AvenirNext-Regular', sans-serif;
	text-decoration: underline;
}

b {
	font-family: 'AvenirNext-DemiBold', sans-serif;
}

/*
============================
	END OF TEXT CLASSES		 
============================
*/


/*
============================
	START OF TEXT STYLES		 
============================
*/

.uppercase{
	text-transform: uppercase;
}

.text-dark{
	color: #444 !important;
}

.text-dark {
	color: #444 !important;
}

/*
============================
	END OF TEXT STYLES		 
============================
*/


/*
==================================
	START OF HYPERLINK CLASSES		 
==================================
*/

a{
	color: #444;
	display: inline-block;
	text-decoration: none;
}

a:hover,
a:focus,
a:active
 {
	text-decoration: none;
	color: #FD926F;
}

a.header-link {
	text-decoration: none;
	font-family: 'AvenirNext-Bold', sans-serif !important;
	font-weight: 700;
	color: #444;
}

.header-link:hover,
.header-link:focus,
.header-link:active {
	color: #FD926F;
}

.cv{
	font-size: 16px !important;
	font-family: 'AvenirNext-Bold', sans-serif;
	/*margin-top: 24px !important;*/
}

.cv:hover,
.cv:focus,
.cv:active
 {
	color: #FD926F;
}


a.quick-links{
	text-transform: uppercase;
	line-height: 40px;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

a.quick-links:hover,
a.quick-links:focus,
a.quick-links:active {
	text-decoration: none;
	color: #FD926F;
}

a.quick-links-current{
	text-transform: uppercase;
	font-weight: 600 !important;
	color: #FD926F;
	margin-bottom: 0px;
	line-height: 40px;
}

a.quick-links-current:hover,
a.quick-links-current:focus,
a.quick-links-current:active {
	text-decoration: none;
}

a.page-header{
	margin: 0px;
	padding: 0px !important;
	border: none;
}

a.page-header:hover,
a.page-header:focus,
a.page-header:active {
	text-decoration: none;
}

a.ref-link {
	font-weight: 400;
	line-height: 24px;
	border-bottom: 1px #FD926F solid;
}

a.ref-link:hover,
a.ref-link:focus,
a.ref-link:active
 {
 	text-decoration: none;
	color: #FD926F;
}

/*
==================================
	END OF HYPERLINK CLASSES		 
==================================
*/


/* Circle class - Social Media Icons*/
.circle{
	border-style: solid;
	border-width: 1pt;
	border-color: #FD926F;
	border-radius: 50%;
	width: 32px;
	height: 32px;
}

.social-icons{
	text-align: center;
	color: #FD926F;
	position: relative;
	top: -4px;
	margin-right: 12px;
	/*margin: 16px;*/
}

.circle:hover{
	background-color: #FD926F;
	border-color: #FD926F;
	color: #fff;
}

.fa.tiny {
	width: 32px;
	height: 32px;
	line-height: 32px;
}


/*
==================================
	START OF NAVBAR CLASSES		 
==================================
*/

.nav-fix-top {
	position: fixed !important;
	width: 100%;
	z-index: 999;
	left: 0px !important;
}

.navbar{
	border: 0px;
	margin: 0px;
	background: white;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

div.hr {
	background: #fff  no-repeat scroll center;
	height: 56px;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

hr.underline {
	margin: 0px !important;
	border: 2px solid #7BCDD1 !important;
	width: 180px;
	float: left;
	display: block;
}

div.header-shrink{
	height: 40px;
	margin: 12px 0px;
}

div.current-page{
	text-align: center;
	display: inline-block;
}

div.nav-page-tabs{
	-webkit-transition: all 0.5s ease;
	width: 100%;
	max-height: 40px;
	display: inline-block;
	transition: all 0.5s ease;
	text-align: center;
}

/*
==================================
	END OF NAVBAR CLASSES		 
==================================
*/

/* Page Footer */
div.page-footer{
	padding: 64px 0px;
	background-color: #f6f6f6;
}

/*
==============================================
	LANDING PAGE PROJECT IMAGE THUMBNAILS		 
==============================================
*/
div.cover-text-placeholder{
	margin: auto;
	padding: 60px 0px 32px 0px;
	z-index: 99;
	opacity: 1;
}

.cover{
	padding-left: 0px;
	padding-right: 0px;
	margin-top: 144px;
}


/*
================================
	START OF MARGIN CLASSES
================================
*/
.nomargin {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}

.nomargin-top {
  margin-top: 0px !important;
}

.nomargin-side {
  margin-left: 0px !important;
  margin-right: 0px !important;
}

.center-align {
  margin-left: auto !important;
  margin-right: auto !important;
}

.margin-top-xs {
  margin-top: 12px !important;
}

.margin-btm-xs {
  margin-bottom: 12px !important;
}

.margin-top-sm {
  margin-top: 24px !important;
}

.margin-btm-sm {
  margin-bottom: 24px !important;
}

.margin-sm {
  margin-top: 24px !important;
  margin-bottom: 24px !important;
}

.margin-top-md {
  margin-top: 48px !important;
}

.margin-btm-md {
  margin-bottom: 48px !important;
}

.margin-top-lmd {
  margin-top: 60px !important;
}

.margin-btm-lmd {
  margin-bottom: 60px !important;
}

.margin-top-lg {
  margin-top: 80px !important;
}

.margin-btm-lg {
  margin-bottom: 80px !important;
}

.margin-top-xl {
  margin-top: 160px !important;
}

.padding-md {
  padding: 15px !important;
}

.margin-xs-shrink {
  margin-top: 1px !important;
}

.margin-cover {
  margin-top: 180px !important;
}
/*
================================
	END OF MARGIN CLASSES
================================
*/


/* === Custom Styles for Abstract Link Hover === */
.abstract-toggle {
  cursor: pointer;
}
.abstract-toggle:hover {
  color: #FD926F;
  text-decoration: none;
}

/* news, publications, abstract spacing */
p.news-text,
span.paper-title,
span.authors,
#abstract1 p {
  line-height: 1.6;   /* match bio */
}

span.authors,
span.paper-title,
span.venue,
.collapse p {
  line-height: 1.6 !important;
}

span.authors {
  margin-bottom: 0.4em;
  display: block;
}

p.news-text { font-size: 18px; }
span.paper-title,
span.authors { font-size: 18px; }

.news-date strong,
.news-text,
.abstract-text {
  font-size: 18px;
  line-height: 1.6;
}

/* publications & CV link match bio typography */
span.paper-title,
span.authors,
.collapse p,   
a.cv {           
  font-size: 18px !important;
  line-height: 1.6 !important;
}

/* make the intro photo bigger and float right */
.intro-photo {
  max-width: 200px;  
  width: 100%;
  border-radius: 50%;  /* keeps it round */
}

/* small-screen tweak */
@media (max-width: 767px) {
  .intro-photo {
    max-width: 120px;
  }
}

/* ---- Hero header tweaks ---- */
.header-hero {
  margin-top: 80px;     /* same as margin-top-xl */
  margin-bottom: 24px;  /* smaller gap before the  */
  overflow: hidden;     /* contain floats */
}

.hero-photo {
  float: right;
  width: 160px;         /* tweak up/down as you like */
  height: 160px;
  object-fit: cover;
  border-radius: 50%;   /* makes it perfectly circular */
  margin-left: 16px;    /* small gap between name & image */
}

/* responsive: stack on mobile */
@media (max-width: 767px) {
  .hero-photo {
    float: none;
    display: block;
    margin: 0 auto 24px;
    width: 60%;
    height: auto;
  }
}

/* Publications bottom spacing */
.margin-btm-lg {
  margin-bottom: 48px !important;
}

/* Abstract font always same size/spacing */
.abstract-text {
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
}

.bio-photo {
  float: right;
  max-width: 300px;  /* or whatever maximum width you want */
  width: auto;       /* so it scales down if needed */
  height: auto;      /* keeps the original aspect ratio */
position: relative; /* enable left/right offsets */
  margin-left: -20px !important;
  margin-top: 0;
  border-radius: 6px;  /* no more circle */
}


.paper-title {
  font-size: 18px !important;
  line-height: 1.6;
}

/* Make all .paper-title text the dark publication color */
span.paper-title {
  color: #444 !important;
}

/* Render the “(In collaboration…)” line in the default intro grey */
span.paper-details {
  color: #5b5e6d;
  font-family: 'AvenirNext-Regular', sans-serif;
  font-size: 14px;
  line-height: 16px;
}

#portfolio {
  padding-bottom: 80px; /* matches your .margin-top-xl (160px) */
}

	/* Always keep the abstract text at this size */
#abstract1 .abstract-text,
#abstract1 p {
  font-size: 16px !important;
  line-height: 1.6   !important;
  margin: 0;
}

/* hide the real checkbox */
.dark-toggle-checkbox {
  position: absolute;
  left: -9999px;
}

/* style the label/icon */
.dark-toggle-label {
  cursor: pointer;
  font-size: 1.3em;
  color: #444;
  transition: color 0.2s;
}
.dark-toggle-label:hover {
  color: #FD926F;
}

/* when checked, flip icon from moon to sun */
.dark-toggle-checkbox:checked + .dark-toggle-label .fa {
  content: "\f185"; /* FontAwesome sun-o */
}

#page-top.dark-mode,
#page-top.dark-mode body,
#page-top.dark-mode section,
#page-top.dark-mode .container {
  background: #111;
  color: #ddd;
}
#page-top.dark-mode a {
  color: #bbb;
}
/* when #dark-toggle is checked, apply dark-mode to <body> */
.dark-toggle-checkbox:checked ~ section#portfolio,
.dark-toggle-checkbox:checked ~ section#portfolio body {
  background: #111 !important;
  color: #ddd !important;
}
/* and all your other dark-mode overrides, e.g.: */
.dark-toggle-checkbox:checked ~ section#portfolio a {
  color: #bbb !important;
}