/* FONTS CONNECTION */
@font-face {
  font-family: 'Montserrat-Bold';
  src: url('../fonts/Montserrat-Bold.ttf') format('truetype');
}

@font-face {
  font-family: 'Montserrat-Regular';
  src: url('../fonts/Montserrat-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Montserrat-Medium';
  src: url('../fonts/Montserrat-Medium.ttf') format('truetype');
}

:root {
  --regular: 'Montserrat-Regular';
  --bold: 'Montserrat-Bold';
  --medium: 'Montserrat-Medium'
}

:root {
  --black: #353535;
  --darkb: #284B63;
  --gray: #F2F2F2;
  --white: #ffffff;
  --shadow: #d9d9d9;
  --s: 10px
}

* { margin: 0; padding: 0; font-family: var(--regular)}
a { text-decoration: none; color: black; }


/*-------------------------------Base settings-------------------------------*/
#main-container {margin: 0px auto; width: 1200px; }
#burger-menu {display: none}

header {padding: 20px 10px; display: block; height: 60px}
#main-logo {float: left;}

nav {padding-top:12px; float: right;}
nav li {display: inline; }
nav li:not(:last-of-type) {margin-right: 24px; }
nav a {color: var(--darkb); font: 24px var(--medium);}
nav a:hover {color: var(--gray);}

/*BURGER MENU*/
#burger-nav {padding-top:12px; padding-left: 50px}
#burger-nav li {list-style: none;}
#burger-nav li:not(:last-of-type) {margin-bottom: 24px; }
#burger-nav a {color: var(--darkb); font: 32px var(--medium);}
#burger-nav a:hover {color: var(--gray);}

#main-preview {width: 100%; height: 480px; margin-bottom: 12px; box-shadow: 0px 0px var(--s) var(--shadow); border-radius: 10px}
#main-preview-content {
  width: 400px; height: 100%;
  background-color: var(--gray);
  float:left;
  text-align: center;
  border-radius: 10px 0px 0px 10px;
}
#main-preview-image {width: 800px; height: 100%; float:left;}
#main-preview-image img {object-fit: cover; width:100%; height: 480px; border-radius: 0px 10px 10px 0px;}
#main-preview-content-title {font: 28px var(--bold); color: var(--darkb); padding-top: 120px}
#main-preview-content-title-sub {font: 20px var(--regular); color: var(--darkb); padding-top: 40px}


#latest-news-title { margin: 30px 20px 10px}
#latest-news-title a {font: 24px var(--bold); color: var(--darkb);}
#latest-news-title a:hover {color: #3C6E71}
#latest-news {width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px;}
.latest-news-block {height: 370px; box-shadow: 0px 0px var(--s) var(--shadow); border-radius: 10px}
.latest-news-block-image {width: 100%; height: 280px;}
.latest-news-block-image img {object-fit: cover; width: 100%; height: 100%; border-radius: 10px 10px 0px 0px}
.latest-news-block-content {
  width: 100%; height:90px;
  background-color: var(--gray);
  border-radius: 0px 0px 10px 10px;
  text-align: center;
}
.latest-news-block-content-title {font: 20px var(--medium); color: var(--darkb); padding: 12px 70px}
.latest-news-block-content-date {font: 16px var(--regular); color: var(--darkb); padding-top: 10px}
.latest-news-block-preview {
  width: 100%; height: 100%;
  background-color: #10101090;
  position: relative; bottom: 360px;
  border-radius: 10px;
  text-align: center;
  color: var(--white);
  display: none;
}

.latest-news-block:hover {
  scale: 1.02
}

#latest-pubs-title { margin: 30px 20px 10px}
#latest-pubs-title a {font: 24px var(--bold); color: var(--darkb);}
#latest-pubs-title a:hover {color: #3C6E71}
#latest-pubs {width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px}
.latest-pubs-block {height: 260px; box-shadow: 0px 0px var(--s) var(--shadow); border-radius: 10px}
.latest-pubs-block-image {width: 157px; height: 100%; float:left;}
.latest-pubs-block-image img {object-fit: cover; width: 100%; height: 100%; border-radius: 10px 0px 0px 10px}
.latest-pubs-block-content {
  width: 235px; height: 100%;
  background-color: var(--gray);
  float:left;
  border-radius: 0px 10px 10px 0px
}
.latest-pubs-block-content-title {font: 16px var(--bold); color: var(--darkb); padding: 10px 12px}
.latest-pubs-block-content-authors {font: 12px var(--medium); color: var(--darkb); padding: 6px 12px}
.latest-pubs-block-content-journal {font: 12px var(--medium); color: var(--darkb); padding: 20px 12px 4px}
.latest-pubs-block-content-date {font: 12px var(--medium); color: var(--darkb); padding: 4px 12px}
.latest-pubs-block:hover {scale: 1.02}


footer {text-align: center; height: 120px; display: block; width: 85%; margin: 48px auto}
#login a {color: var(--darkb); font: 20px var(--medium)}
#copyright {color: var(--darkb); font: 18px var(--regular); padding-top: 12px}


/* ============================== Preview Slider ============================== */
.carousel {
  width: 100%;
  height: 100%;
  position: relative;
}

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

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: 200ms opacity ease-in-out;
  transition-delay: 200ms;
}

.slide > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.slide[data-active] {
  opacity: 1;
  z-index: 1;
  transition-delay: 0;
}

.carousel-button {
  position: absolute;
  z-index: 2;
  background: none;
  border: none;
  font-size: 2rem;
  top: 50%;
  transform: translateY(500%);
  color: rgba(255, 255, 255, .5);
  cursor: pointer;
  border-radius: .25rem;
  padding: 0 .5rem;
  background-color: rgba(0, 0, 0, .1);
}

.carousel-button:hover,
.carousel-button:focus {
  color: white;
  background-color: rgba(0, 0, 0, .2);
}

.carousel-button:focus {
  outline: 1px solid black;
}

.carousel-button.prev {
  left: 1rem;
}

.carousel-button.next {
  right: 1rem;
}

/* ============================== Preview Slider ============================== */


/*----------------------------------------- NEWS PAGE ----------------------------------------- */
#news-grid {display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px}
.news-block {height: 340px; margin-top: 12px; box-shadow: 0px 0px var(--s) var(--shadow); border-radius: 10px}
.news-block-img {height: 240px;}
.news-block-img img {object-fit: cover; width: 100%; height: 100%; border-radius: 10px 10px 0px 0px}
.news-block-content {height: 100px; background-color: var(--gray); text-align: center;border-radius: 0px 0px 10px 10px}

.news-block-content-title {font: 16px var(--bold); color: var(--darkb); padding: 6px 12px}
.news-block-content-date {font: 14px var(--medium); color: var(--darkb);}

.news-block:hover {
  scale: 1.02
}

/*----------------------------------------- TEAM PAGE ----------------------------------------- */
#t-supervisor-block {
  width: 100%; height: 360px;
  background-color: var(--gray);
  border-radius: 10px;
  margin-bottom: 36px;
  box-shadow: 0px 0px var(--s) var(--shadow);
}
#t-supervisor-img {float: left; height: 100%; width: 300px}
#t-supervisor-img img {object-fit: cover; height: 100%; width: 100%; border-radius: 10px 0px 0px 10px}
#t-supervisor-content {float: left; height: 100%; width: 900px;}

#t-supervisor-name {font: 24px var(--bold); color: var(--darkb); padding-left: 32px; padding-top: 20px}
#t-supervisor-position {font: 20px var(--medium); color: var(--darkb); padding-left: 32px; padding-top: 2px}
#t-supervisor-description {font: 16px var(--medium); color: var(--darkb); padding-left: 18px; padding-top: 20px; padding-right: 16px}


#t-members-title {width: 100%; height: 48px; text-align: center; font: 24px var(--bold); color: var(--darkb);}
#t-members-title-sub {width: 100%; height: 48px; font: 24px var(--bold); color: var(--darkb);}
#t-members-block {display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 60px}
.t-member {min-height: 180px; background-color: var(--gray); border-radius: 10px; box-shadow: 0px 0px var(--s) var(--shadow);}
.t-member-img {float: left; height: 160px; width: 110px; padding: 8px; }
.t-member-img img {object-fit: cover; height: 100%; width: 100%; border-radius: 10px; box-shadow: 0px 0px var(--s) #888;}
.t-member-content {float: left; height: 100%; width: 260px; text-align: center;}

.t-member-name {font: 16px var(--bold); color: var(--darkb); padding-top: 8px}
.t-member-position {font: 14px var(--medium); color: var(--darkb);}
.t-member-description {font: 12px var(--medium); color: var(--darkb); padding: 8px; text-align: left; padding-left: 12px}

#t-open-position-grid {display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; width: 100%}
.t-open-position-grid-block {background-color: var(--gray); border-radius: 10px}
.t-open-position-grid-block-img {float: left; height: 160px; width:110px; padding: 12px;}
.t-open-position-grid-block-img img {object-fit: cover; width:100%; height:100%; border-radius: 10px; box-shadow: 0px 0px var(--s) #888;}
.t-open-position-grid-block-content {float: left; width: 220px; padding: 8px; padding-bottom: 12px}
.t-open-position-grid-block-content-title {font: 30px var(--bold); color: var(--darkb); padding-top: 12px; padding-left: 12px}
.t-open-position-grid-block-content-description {font: 14px var(--medium); color: var(--darkb); padding-top: 12px; padding-left: 12px}

/*----------------------------------------- PUB PAGE ----------------------------------------- */
.pubs-year {font: 32px var(--bold); color: var(--darkb); margin: 30px 20px 10px}
.pubs-grid {display: grid; grid-template-columns: 1fr 1fr; gap: 12px}
.pub-block {height: 270px; background-color: var(--gray); border-radius: 10px; box-shadow: 0px 0px var(--s) var(--shadow);}
.pub-block-img {float: left; height: 100%; width: 200px}
.pub-block-img img {object-fit: cover; height: 100%; width: 100%; border-radius: 10px 0px 0px 10px}

.pub-block-content {float: left; height: 100%; width: 394px;}
.pub-block-content-title {font: 18px var(--bold); color: var(--darkb); padding-left: 12px; padding-top: 16px; padding-right: 8px}
.pub-block-content-authors {font: 16px var(--medium); color: var(--darkb); padding-left: 12px; padding-top: 8px}
.pub-block-content-date {font: 16px var(--regular); color: var(--darkb); padding-left: 12px; padding-top: 32px}
.pub-block-content-journal {font: 16px var(--regular); color: var(--darkb); padding-left: 12px; padding-top: 8px}

.pub-block:hover {scale: 1.02}

/*----------------------------------------- RESEARCH (BLOG) PAGE ----------------------------------------- */
#blog-grid {display: grid; grid-template-columns: 1fr; gap: 12px}
#blog-title {font: 24px var(--bold); color: var(--darkb); padding-left: 24px; padding-top: 24px}
.blog-block {width: 100%; min-height: 224px; background-color: var(--gray); border-radius: 10px; box-shadow: 0px 0px var(--s) var(--shadow);}
.blog-block-img {float: left; height: 200px; width: 350px; border-radius: 10px;}
.blog-block-img img {object-fit: cover; height: 100%; width: 100%; border-radius: 10px; margin: 12px; box-shadow: 0px 0px var(--s) #999; background-color: #fff}

.blog-block-content {float: left; height: 100%; padding: 12px 22px; width: 790px}

.blog-block-content-title {font: 24px var(--bold); color: var(--darkb); padding-left: 24px}
.blog-block-content-date {font: 20px var(--medium); color: var(--darkb); padding-left: 24px; padding-bottom: 12px}
.blog-block-content-text {font: 18px var(--regular); color: var(--black); padding-left: 12px}

.blog-block-content-project-title {font: 16px var(--regular); color: var(--darkb); padding-left: 24px; padding-top: 24px}
.blog-block-content-project-number {font: 16px var(--regular); color: var(--darkb); padding-left: 24px}
.blog-block-content-project-PI {font: 14px var(--regular); color: var(--darkb); padding-left: 24px}
.blog-block-content-project-link {font: 14px var(--regular); color: var(--darkb); padding-left: 24px}
.blog-block-content-project-link a {font: 14px var(--regular); color: var(--darkb); padding-left: 24px}

.blog-block-content-project-link a:hover {text-decoration: underline;}

/*----------------------------------------- ABOUT PAGE ----------------------------------------- */
#about-title {width: 100%; height: 48px; text-align: center; font: 24px var(--bold); color: var(--darkb); }
.about-block {
  padding: 16px;
  width: 70%; background-color: var(--gray);
  border-radius: 10px;
  margin: 0px auto;
  box-shadow: 0px 0px var(--s) var(--shadow);
}
.about-block-title {font: 20px var(--bold); color: var(--darkb); padding-left: 10px; padding-bottom: 10px}
.about-block-content {font: 16px var(--medium); color: var(--darkb);}

/*---------------------------------------------------------------------------------- */
/*---------------------------------------------------------------------------------- */
/*----------------------------------------- ADMIN LOGIN ----------------------------------------- */

#admin-panel-title {width: 100%; height: 48px; text-align: center; font: 32px var(--bold); color: var(--darkb);}
#admin-login-form {
  text-align: center;
  width: 40%; height: 200px;
  background-color: var(--gray);
  margin: 0px auto; border-radius: 10px;
  box-shadow: 0px 0px var(--s) var(--shadow);
}

#admin-panel-error {
  text-align: center;
  width: 40%; height: 40px;
  color: #B92020; margin: 0px auto;
}

.input-text1 {margin-top: 24px; width: 250px; height: 30px; border: 0px; border-radius: 10px; padding-left: 8px}
.input-text2 {width: 250px; height: 30px; border: 0px; border-radius: 10px; padding-left: 8px}
.btn-submit {width: 250px; height: 30px; border: 0px; border-radius: 10px; background-color: #3C6E71; color: #ffffff}
.btn-submit:hover {background-color: #265D61}
.btn-submit:active {background-color: #164245}

/*----------------------------------------- ADMIN ----------------------------------------- */
#admin-create-title {font: 22px var(--bold); color: var(--darkb); padding-top: 12px}
#admin-main {height: 700px; width: 100%}

#admin-aside-menu1 {float: left; width: 204px; height: 100%; background-color: var(--darkb); border-radius: 10px; box-shadow: 0px 0px var(--s) var(--darkb);}
#admin-aside-title {text-align: center; font: 22px var(--bold); color: var(--white); padding-top: 12px}
#admin-aside-points {padding-left: 12px; padding-top: 12px}
#admin-aside-points li {list-style-type: none;}
#admin-aside-points li a {font: 18px var(--medium); color: var(--white)}
#admin-aside-points li a:hover {color: #d9d9d9}

#admin-create-block {
  float: right; width: 898px; height: 100%;
  display: grid; grid-template-columns: 5fr 3fr; gap: 12px;
}
#admin-create-list {height: 100%; border-radius: 10px; overflow:scroll; overflow-x:hidden;}
#admin-create-editing {height: 100%; background-color: var(--gray); border-radius: 10px; text-align: center; box-shadow: 0px 0px var(--s) var(--shadow);}


.admin-text {text-align: left; margin-left: 60px; font: 18px var(--medium); color: var(--darkb); margin-top: 20px}
.admin-create-list-block {
  width: 100%; height: 40px;
  background-color: var(--gray);
  border-radius: 10px;
  margin-bottom: 12px;
  font: 16px var(--regular);
  color: var(--darkb);
  box-shadow: 0px 0px var(--s) var(--shadow);
}

.admin-create-list-block-title {float: left; padding: 10px 8px}
.admin-create-list-block-btns {float: right; padding: 6px 8px}

.btn_edit, .btn_del {float: right; margin-left: 4px}

.img_btn_edit, .img_btn_del {display: block; width: 22px; height: 22px}

.admin-form-base {width: 440px; margin-top: 10px; border: none; height: 30px; border-radius: 10px; padding-left: 8px}
.admin-form-textarea {margin-top: 10px; border: none; border-radius: 10px; padding-left: 8px}
.admin-form-file {width: 440px; margin-top: 20px;}
.admin-form-btn-submit {
  width: 440px; margin-top: 10px;
  border: none; height: 30px;
  border-radius: 10px; padding-left: 8px;
  background-color: #3C6E71; color: #ffffff
}
.admin-form-btn-submit:hover {background-color: #265D61}
.admin-form-btn-submit:active {background-color: #164245}

.admin-form-btn-cancle {
  width: 440px; margin-top: 10px;
  border: none; height: 30px;
  border-radius: 10px; padding-left: 8px;
  background-color: var(--white); color: var(--black)
}
.admin-form-btn-cancle:hover {background-color: #c7c7c7}
.admin-form-btn-cancle:active {background-color: #a9a9a9}


/* NEWS PAGES */
#news-page-body {background-color: var(--gray); border-radius: 10px}
#news-page-body #news-page-title {text-align: center;}
#news-page-body #news-page-img {text-align: center;}
#news-page-body #news-page-date {text-align: center;}

#news-page-title {font: 32px var(--bold); color: var(--darkb); padding-top: 12px}
#news-page-date {font: 24px var(--medium); color: var(--darkb); margin-bottom: 24px}
#news-page-img {min-height: 100px; max-height: 600px}
#news-page-img img {object-fit: cover; width: 70%; height: 100%; border-radius: 10px; box-shadow: 0px 0px 10px #000000; background-color: #fff}
#news-page-content {font: 18px var(--medium); color: var(--darkb); padding: 24px}

/*--------------- ADPATIVE ---------------*/
@media (max-width: 1204px) {
  #main-container {width: 360px}
  #burger-menu {display: block;}
  #main-preview {height: 180px}
  #main-preview-image {width: 230px; height: 100%}
  #main-preview-content {width: 130px}
  #main-preview-image img {object-fit: cover; width: 100%; height: 180px; border-radius: 0px 10px 10px 0px;}
  #main-preview-content-title {font: 12px var(--bold); color: var(--darkb); padding-top: 26px}
  #main-preview-content-title-sub {font: 9px var(--regular); color: var(--darkb); padding-top: 16px}

  #latest-news-title { margin: 20px 20px 10px}
  #latest-news-title a {font: 14px var(--bold); color: var(--darkb);}
  .latest-news-block {width: 174px; height: 164px}
  .latest-news-block-image {height: 100px}
  .carousel-button {transform: translateY(400%); font-size: 1rem;}

  .latest-news-block-content {height: 64px}
  .latest-news-block-content-title {font: 10px var(--medium); padding: 8px 10px}
  .latest-news-block-content-date {font: 10px var(--regular);}


  #latest-pubs-title { margin: 20px 20px 10px}
  #latest-pubs-title a {font: 14px var(--bold); color: var(--darkb);}
  #latest-pubs {width: 100%; display: grid; grid-template-columns: 1fr; gap: 12px}

  .latest-pubs-block {height: 160px}
  .latest-pubs-block-image {width: 90px}
  .latest-pubs-block-content {width: 270px}

  .latest-pubs-block-content-title {font: 12px var(--bold); padding: 10px 12px}
  .latest-pubs-block-content-authors {font: 9px var(--medium); padding: 6px 12px}
  .latest-pubs-block-content-journal {font: 9px var(--medium); padding: 20px 12px 4px}
  .latest-pubs-block-content-date {font: 9px var(--medium); padding: 4px 12px}

  .li-nav {display: none;}

  footer {text-align: center; height: 120px; display: block; width: 85%; margin: 48px auto}
  #login a {color: var(--darkb); font: 16px var(--medium)}
  #copyright {color: var(--darkb); font: 10px var(--regular); padding-top: 12px}


  /* NEWS */
  #news-grid {display: grid; grid-template-columns: 1fr ; gap: 12px}
  .news-block {height: 240px}
  .news-block-img {height: 180px}
  .news-block-img img {}
  .news-block-content {height: 60px}

  .news-block-content-title {font: 12px var(--bold); padding: 6px 12px}
  .news-block-content-date {font: 10px var(--medium);}

  /* PUBLICATIONS */
  .pubs-year {font: 20px var(--bold); margin: 20px 20px 10px}
  .pubs-grid {display: grid; grid-template-columns: 1fr;}
  .pub-block {height: 160px;}
  .pub-block-img {width: 100px}

  .pub-block-content {width: 260px; }
  .pub-block-content-title {font: 12px var(--bold); padding-left: 12px; padding-top: 8px}
  .pub-block-content-authors {font: 10px var(--medium); padding-left: 12px; padding-top: 8px}
  .pub-block-content-date {font: 10px var(--regular); padding-left: 12px; padding-top: 32px}
  .pub-block-content-journal {font: 10px var(--regular); padding-left: 12px; padding-top: 8px}

  /* RESEARCH */
  #blog-title {font: 24px var(--bold);}
  .blog-block {min-height: 90px; width:100%}
  .blog-block-img {display: none}

  .blog-block-content {float: left; padding: 12px 9px}

  .blog-block-content-title {font: 14px var(--bold); padding-left: 24px}
  .blog-block-content-date {font: 10px var(--medium); padding-left: 24px; padding-bottom: 12px}
  .blog-block-content-text {font: 9px var(--regular); padding-left: 24px}

  .blog-block-content-project-title {font: 9px var(--regular); padding-left: 24px; padding-top: 12px}
  .blog-block-content-project-number {font: 9px var(--regular); padding-left: 24px}
  .blog-block-content-project-PI {font: 9px var(--regular); padding-left: 24px}
  .blog-block-content-project-link {font: 9px var(--regular); padding-left: 24px}
  .blog-block-content-project-link a {font: 9px var(--regular); padding-left: 24px}

  /* TEAM */
  #t-supervisor-block {min-height: 160px}
  #t-supervisor-img {width: 100px; height: 150px; border-radius: 10px; box-shadow: 0px 0px var(--s) var(--shadow);}
  #t-supervisor-img img {border-radius: 10px}
  #t-supervisor-content {width: 260px;}

  #t-supervisor-name {font: 12px var(--bold); padding-top: 8px; padding-left: 22px}
  #t-supervisor-position {font: 9px var(--medium); padding-left: 22px}
  #t-supervisor-description {font: 9px var(--medium); padding-left: 12px; padding-top: 12px;}

  #t-members-title {font: 18px var(--bold); height: 30px}
  #t-members-title-sub {font: 16px var(--bold); height: 26px}
  #t-members-block {grid-template-columns: 1fr; margin-bottom: 32px}
  .t-member {min-height: 120px;}
  .t-member-img {height: 100px; width: 70px;}
  .t-member-content {width: 270px;}
  .t-member-name {font: 12px var(--bold)}
  .t-member-position {font: 8px var(--medium)}
  .t-member-description {font: 8px var(--medium)}

  #t-open-position-grid {grid-template-columns: 1fr}
  .t-open-position-grid-block-img {height: 120px; width:80px}
  .t-open-position-grid-block-content-title {font: 18px var(--bold);}
  .t-open-position-grid-block-content-description {font: 10px var(--medium);}

  /* LOGIN */
  #admin-panel-title {font: 20px var(--bold);}
  #admin-login-form {width: 80%}

  /* NEWS PAGE */
  #news-page-title {font: 16px var(--bold);}
  #news-page-date {font: 12px var(--medium);}
  #news-page-img {height: 190px}
  #news-page-img img {width: 90%}
  #news-page-content {font: 12px var(--medium)}

  /* ---------------------------- ADMIN PANEL ---------------------------- */
  #admin-aside-menu1 {width: 360px; float:none; display: block; height:100px; margin-bottom: 12px}
  #admin-aside-title {display: none}
  #admin-aside-points {padding-left: 12px; padding-top: 12px}
  #admin-aside-points li {list-style-type: none; padding-bottom: 16px; display: inline;}
  #admin-aside-points li a {font: 12px var(--medium); color: var(--white)}
  #admin-aside-points li a:hover {color: #d9d9d9}

  #admin-create-block {width: 360px; float: none; height: 500px; grid-template-columns: 1fr 1fr}

  .admin-form-base {width: 210px}
  .admin-form-file {width: 210px}
  .admin-form-btn-submit {width: 210px}
  .admin-form-btn-cancle {width: 210px}

}