@import url('https://fonts.googleapis.com/css?family=Arsenal:400,400i,700,700i|Fira+Sans:300,300i,400,400i,500,500i,600,600i,700,700i');
@media print {.dontprint {display: none;}}
* { margin: 0; border: 0; padding: 0; }
body {background: #ffffff; font-size: 15px; font-family: 'Fira Sans', sans-serif; font-weight: 400; margin: 0 auto;}
img {display: block; text-align: center; max-width: 100%; height: auto; width: auto;}
header {width: 100%; height: auto; top: 0; left: 0;}
.logo {display: block; width: 37%; margin: 3.4% 0; float: left;}
.logo a img {border: 0px; width: 100%;}
.logo-respo {display: none;}

.search-area {
	width: 33%;
	background-color: #ffffff;
	float: right;
	margin: 3.4% 0;
	border: 1px solid #e0e0e0;
	-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; behavior: url(border-radius.htc);
}
form {
	margin: 0px;
	padding: 0px;
}
.search-input {
	width: 82%;
	background-color: #ffffff;
	float: left;
	padding: 10px 0 0 5px;
	margin: 0px;
	font-size: 105%;
	color: #959595;
	line-height: 40px;
	border: none;
	outline: none;
	-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; behavior: url(border-radius.htc);
	box-shadow: inset 0px 0px 0px;
}
.search-button {
	width: 14%;
	height: 46px;
	float: left;
	border: none;
	outline: none;
	background: transparent url(../images/search_icon.png) no-repeat center;
	cursor: pointer;
}

nav {display: block; width: 100%; background-color: #da2032; border-bottom: 7px solid #4f4f4f;}
#main-container {width: 100%; background-color: #ffffff; overflow: hidden;}
#grey-container {background-color: #f2f2f2; padding: 3.4% 0 1%; overflow: hidden; display: block; border-top: 1px solid #e0e0e0;}
#white-container {background-color: #ffffff; padding: 1.4% 0 1%; overflow: hidden; display: block; border-top: 1px solid #e0e0e0;}
#content {display: table; width: 94%; max-width: 1280px; height: auto; margin: 0 auto; top: 0; left: 0;}
h1 {font-family: 'Arsenal', sans-serif; font-size: 300%; font-weight: 700; color: #2e2e2e; margin-bottom: 1%;}
h2 {font-family: 'Arsenal', sans-serif; font-size: 160%; font-weight: 700; color: #2e2e2e; margin-bottom: 2%; margin-top: 4%;}
h3 {font-family: 'Arsenal', sans-serif; font-size: 130%; font-weight: 700; color: #da2032; margin-bottom: 2%; margin-top: 1%;}
section {width: 23.8%; height: auto; margin-left: 1.6%; display: table-cell; background-color: #ffffff; float: left;}
section:first-child {margin-left: 0;}
section img {width: 100%;}
section #content {width: 90%; margin: 4% 5%;}
section h1 {font-size: 160%;}
section p{text-align: left;}
p {font-size: 100%; line-height: 130%; text-align: justify; color: #707070; margin-bottom: 2%;}
.btn1, a.btn1 {font-family: 'Arsenal', sans-serif; font-size: 110%; font-weight: 400; color: #ffffff; padding: 14px 16px; background-color: #da2032; border: 1px solid #da2032; text-align: center; width: 100px; margin: 20px 0 40px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; display: block;}
a.btn1:hover {background-color: #ffffff; color: #da2032; border: 1px solid #e0e0e0;}
#slider_area {width: 64%; float: left; margin: 0 3% 3% 0;}
.main-img {width: 64%; float: left; margin: 0 3% 3% 0;}
.main-text {display: block; width: 100%; float: left;}
hr {width: 100%; border-bottom: 2px solid #da2032; margin-bottom: 2%; float: left;}
#footer-container {width: 100%; background-color: #676465; padding: 3.4% 0 6%; overflow: hidden; display: table; border-top: 1px solid #e0e0e0;}
#footer-container #fsection {width: 15%; height: auto; margin-left: 2%; display: table-cell; float: left;}
#footer-container #fsection:first-child {margin-left: 0;}
#footer-container #fsection .footnav-head {font-family: 'Arsenal', sans-serif; font-size: 140%; font-weight: 700; color: #222222; margin-bottom: 3%; display: block;}
#footer-container #fsection ul li{line-height: normal; margin-bottom: 5%;}
#footer-container #fsection a {font-size: 100%; color: #f2f2f2; text-decoration: none;}
#footer-container #fsection a:hover {text-decoration: underline;}
#footer-container hr {width: 100%; border-bottom: 1px solid #757575; margin: 2% 0;}
#footer-container p {font-size: 100%; line-height: 20px; text-align: center; color: #f2f2f2; margin: 0;}


ul {list-style: none; padding: 0; margin: 0;}

form {margin: 0px; padding: 0px;}
#responav {display: none;}
.clear {clear: both;}

a.link:link, a.link:visited {color: #3ea0ff; text-decoration: none; border-bottom: 1px solid #e0e0e0;}
a.link:hover {text-decoration: none; border-bottom: 1px solid #3ea0ff;}
a {text-decoration: none;}
a:hover {text-decoration: none;}
input, select, textarea {width: 70%; background-color: #ffffff; border: 1px solid #dadada; box-shadow: inset 0px 4px 8px #f0f0f0; padding: 3px 5px; height: 30px; font-size: 100%; color: #707070; line-height: 30px; outline: none; margin-bottom: 4%;}
select {width: 61%;}
textarea {width: 98%; height: 70px; ; resize: none;}

ul.list1 {list-style-type: none; padding: 0; margin: 0 0 50px 0;}
ul.list1 li {color: #707070; line-height: 130%; text-align: justify; background: url(../images/bullet1.png) no-repeat left 4px; padding-left: 30px; padding-top: 0px; margin-bottom: 15px;}

ul.list2 {list-style-type: none; padding: 0; margin: 0 0 50px 0;}
ul.list2 li {font-size: 122%; color: #707070; line-height: 170%; text-align: justify; background: url(../images/bullet2.png) no-repeat left 3px; padding: 7px 10px 7px 50px; margin: 0px 30px 20px 0px; float: left;}
ul.list2 li a {color: #707070; text-decoration: none; border-bottom: 1px dotted #e0e0e0;}
ul.list2 li a:hover {border-bottom: 1px dotted #707070;}
#footer-container #fsection ul.list2 li {font-size: 100%; line-height: normal; color: #f2f2f2; border-bottom: none; padding: 14px 10px 12px 50px; float: none;}
#footer-container #fsection ul.list2 li a {text-decoration: none; border-bottom: none;}
#footer-container #fsection ul.list2 li a:hover {text-decoration: underline;}

ul.list2 li.contact {background-image: url(../images/icon-contact.png);}
ul.list2 li.cv {background-image: url(../images/icon-cv.png);}
ul.list2 li.webmail {background-image: url(../images/icon-webmail.png);}
ul.list2 li.library {background-image: url(../images/icon-library.png);}

article {width: 76%; display: table-cell; padding-right: 20px; margin: 0;}
aside {display: table-cell; border-left: 1px solid #e0e0e0; padding-left: 20px; margin: 0;}

.half {width: 48%; margin: 0 2% 0 0; display: block; float: left;}
figure {display: block; width: 22%; float: left; margin: 4px 15px 15px 0;}
figure img {width: 100%; margin-bottom: 5px;}
.caption {font-size: 85%; text-align: left; font-style: italic; color: #959595;}

#table-area {width: 100%; overflow: visible;}
table {width: 100%; border: 0px; color: #707070; margin-bottom: 2%;}
thead tr th {background-color: #da2032; color: #ffffff; font-family: 'Arsenal', sans-serif; font-size: 130%; font-weight: 700; padding: 1%; text-align: left;}
thead tr th:first-child {background-color: #cc2031; font-weight: 700;}
tr:nth-child(odd) {background-color: #f0f0f0;}
tr:nth-child(even) {background-color: #ffffff;}
td {padding: 1%;}
tr:nth-child(even) td:first-child {background-color: #f5f5f5; color: #535353; font-weight: 500;}
tr:nth-child(odd) td:first-child {background-color: #e9e9e9; color: #2e2e2e; font-weight: 500;}
td.divider {border-top: 2px solid #b2b2b2; padding: 0;}

#faculty {width: 100%; display: block; margin-bottom: 30px; overflow: hidden;}
#faculty .photo {display: block; margin-right: 3%; width: 30%; float: left; overflow: hidden;}
#faculty .photo img{width: 100%; min-height: 340px;}
#faculty .profile {display: block; float: left; width: 64%;}
#faculty .profile h3 {font-size: 175%;}
#faculty .profile #tab {display: block; width: 100%; overflow: hidden; margin-top: 30px; background-color: #f2f2f2; border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; padding: 10px;}
#faculty .profile #tab li {margin-bottom: 0px;}

a.publication {width: 70%; display: block; margin-bottom: 30px;}
a.publication img {border: 0; margin-bottom: 10px; border: 1px solid #f0f0f0;}
a.publication img:hover {border-color: #b2b2b2;}
a.publication .text {color: #3ea0ff; text-decoration: none;}
a.publication .text:hover {text-decoration: none; color: #4f4f4f;}

/*------------------- Search Auto Complete ---------------------*/

.ui-autocomplete {
	max-height: 200px;
	overflow-y: auto;
	/* prevent horizontal scrollbar */
	overflow-x: hidden;
	font-size: 12px;
	line-height: 18px;
}
/* IE 6 doesn't support max-height
* we use height instead, but this forces the menu to always be this tall
*/
* html .ui-autocomplete {
	height: 100px;
}

/*---------------- Close Search Auto Complete ------------------*/

/*--------------- Google Map ----------------*/

.map-responsive{
    overflow: hidden;
    padding-bottom: 0;
    position: relative;
    width: 100%;
    height: 600px;
    border: 1px solid #e0e0e0;
}
.map-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

/*------------ End of Google Map ------------*/

/*--------------------------MEDIA!!!----------------------------*/
@media screen and (max-width: 1279px) and (min-width: 1024px) {
	.main-img, #slider_area {width: 64%; height: 500px; float: left; margin: 0 3% 3% 0;}
	#slider_area img {height: 500px;}
	figure {width: 30%;}
}
@media screen and (max-width: 1023px) and (min-width: 800px) {
	.search-input {padding: 6px 0 0 3px; line-height: 25px;}
	.search-button {height: 35px;}
	.main-img, #slider_area {width: 100%; float: none; margin-bottom: 3%;}
	.main-text {display: block; width: 100%; float: none;}
	section {width: 48%; margin: 0 1% 3% 1%;}
	section:first-child {margin: 0 1% 3% 1%;}
	#footer-container #fsection {width: 31%; height: 210px; margin: 0 1% 3% 1%;}
	#footer-container #fsection:first-child { margin: 0 1% 3% 1%;}
	#faculty .photo, #faculty .profile {width: 100%; float: none;}
	#faculty .profile #tab {width: auto;}
	#faculty .photo img{width: auto;}
	figure {width: 40%;}
}
@media screen and (max-width: 799px) and (min-width: 640px) {
	body {position: relative; margin-top: 50px;}
	header { position: fixed; z-index: 99;}
	.search-area {display: none;}
	header #content {width: 100%;}
	.logo {display: none;}
	.logo-respo {display: block; position: absolute; background-color: #da2032; width: 100%; height: 50px; margin: 0;}
	.logo-respo a img {border: 0px; width: auto; height: 36px; margin: 7px 3%;}
	nav {display: none;}
	#responav {display: block;}
	.main-img, #slider_area {width: 100%; float: none; margin-bottom: 3%;}
	.main-text {display: block; width: 100%; float: none;}
	hr {width: 10%;}
	section {width: 48%; margin: 0 1% 3% 1%;}
	section:first-child {margin: 0 1% 3% 1%;}
	#footer-container #fsection {width: 31%; height: 210px; margin: 0 1% 3% 1%;}
	#footer-container #fsection:first-child { margin: 0 1% 3% 1%;}
	#faculty .photo, #faculty .profile {width: 100%; float: none;}
	#faculty .profile #tab {width: auto;}
	#faculty .photo img{width: auto;}
	figure {width: 40%;}
}
@media screen and (max-width: 639px) and (min-width: 300px) {
	body {position: relative; margin-top: 50px;}
	header { position: fixed; z-index: 99;}
	.search-area {display: none;}
	#content {display: block;}
	header #content {width: 100%;}
	#main-container {min-height: 530px;}
	.logo {display: none;}
	.logo-respo {display: block; position: absolute; background-color: #da2032; width: 100%; height: 50px; margin: 0;}
	.logo-respo a img {border: 0px; width: auto; height: 28px; margin: 11px 3%;}
	nav {display: none;}
	#responav {display: block;}
	.main-img, #slider_area {width: 100%; float: none; margin-bottom: 3%; display: block;}
	.main-text {display: block; width: 100%; float: none;}
	hr {width: 20%;}
	section, section:first-child {width: 100%; margin: 0 0 5% 0; padding: 0;}
	#footer-container #fsection {display: none;}
	#footer-container hr {display: none;}
	article {width: 100%; display: block; padding: 0; margin: 0;}
	aside {width: 100%; display: block; padding: 3% 0 0 0; margin: 0; border-left: 0; border-top: 1px solid #e0e0e0;}
	.half {	width: 100%; float: none;}
	#table-area {width: 100%; overflow: scroll;}
	#faculty .photo, #faculty .profile {width: 100%; float: none;}
	#faculty .profile #tab {width: auto;}
	#faculty .photo img{width: 100%;}
	a.publication {width: 45%; margin: 2%; float: left; min-height: 310px;}
	a.publication img {height: 240px;}
	figure {width: 100%;}
	.map-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
    min-height: 300px;
    z-index: 0;
    }
}