/* General formatting start */
body{
    background-color: #fff;
    min-width: 350px;
}
.wrapper{
  width: 80%;
  margin: 0 auto;
  clear: both;
}
*{
  list-style: none;
  text-decoration: none;
  font-family: Georgia, 'Times New Roman', Times, serif;
}
.gradient-hr {
  border: 0;
  height: 2px;
  margin:18px 0;
  position:relative;
  background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 10%, rgba(0,0,0,0.65) 50%, rgba(0,0,0,0) 90%, rgba(0,0,0,0) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0)), color-stop(10%,rgba(0,0,0,0)), color-stop(50%,rgba(0,0,0,0.65)), color-stop(90%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 10%,rgba(0,0,0,0.65) 50%,rgba(0,0,0,0) 90%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 10%,rgba(0,0,0,0.65) 50%,rgba(0,0,0,0) 90%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 10%,rgba(0,0,0,0.65) 50%,rgba(0,0,0,0) 90%,rgba(0,0,0,0) 100%); /* IE10+ */
  background: linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 10%,rgba(0,0,0,0.65) 50%,rgba(0,0,0,0) 90%,rgba(0,0,0,0) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */
}
.main{
  padding-bottom: 60px;
}
.gradient-hr:before {
  content: "";
  display: block;
  border-top: solid 1px #f9f9f9;
  width: 100%;
  height: 1px;
  position: absolute;
  top: 50%;
  z-index: -1;
}
/* General formatting end */

/* Header area start */
nav{
  position: relative;
  width: 100%;
  height: 205px;
  border-radius: 14px;
}
#navbar{
  position: fixed;
  width: 79%;
  height: 205px;
  margin: 0 auto;
  background-color: #25142e;
  top: 0;
  border-radius: 14px;
  z-index: 2; 
}
#logo_name{
  position: absolute;
  float:right;
  color: #fff;
  font-family: "Oswald";
  font-size: 80px;
  margin: 0 1% 0 60%;
}
#logo1{
  position: absolute;
  display: block;
  height: 205px;
  width: auto;
  margin-left: 40px;
}
#logo2{
  font-family: 'Oswald';
  display: none;
  font-size: 25px;
  color: #fff;
  padding-left: 40px;
  line-height: 1.5;
}
.menu-area{
  position: relative;
  background-color: transparent;
  float: right;
  border-radius: 14px;
  margin-top: 126px;
}
.menu-area a{
  float: left;
  color: #fff;
  padding: 28.5px 30px;
  font-size: 20px;
  transition: .1s;
  display: block;
  background-color: transparent;
  text-align: center;
 } 
 #bottom{
  position: absolute;
  bottom: 0;
}
.dropdown {
  float: left;
  position: relative;
  overflow: none;
}
.menu-area a:hover {
  background-color: aliceblue;
  color: #000;
  border-radius: 14px;
}
.dropdown-content{
  display: none;
  position: absolute;
  background-color: #25142e;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px #000;
  z-index: 1;
  top: 100%;
  border-radius: 14px;
}
.dropdown-content a{
  float: none;
  color: #fff;
  text-align: left;
  padding: 12px 16px;
  display: block;
  transition: .1s;
}
.dropdown-content a:hover{
  background-color: aliceblue;
  color: #000;
  border-radius: 14px;
  display: block;
}
.dropdown:hover .dropdown-content{
  display: block;
}
#home{
  font-weight: bold;
}
.mobile-nav{
  display: none;
}

  /* Header responsive css start */
  @media screen and (max-width:1360px){
    #logo_name{
      font-size: 60px;
      margin: 0 1% 0 65%;
    }
  }
  @media screen and (max-width:1215px){
    .menu-area{
      display: none;
    }
    .btn-area{
      background-color: transparent;
      color: #fff;
      font-size: 30px;
      cursor: pointer;
      border: none;
      padding: 5px 20px;
      border-radius: 14px;
      float: right;
    }
    .mobile-nav{
      background-color: #25142e;
      display: block;
      width: 50%;
      position: relative;
      float: right;
      margin-top: 158.5px;
      height: 46px;
      z-index: 99;
      border-radius: 14px;
    }
    .menu{
      clear: both;
      display: none;
      background-color: #25142e;
      width: 100%;
      border-radius: 14px;
      box-shadow: 0px 8px 16px 0px #000;
    }
    .menu ul{
      padding-left: 0;
      font-size: 20px;
    }
    .menu ul ul{
      padding-left: 40px;
      font-size: 16px;
    }
    .menu a{
      color: #fff;
      display: block;
      transition: .1s;
      padding: 12px 16px;
      border-radius: 14px;
      
    }
    .mobile-nav:hover{
      background-color: aliceblue;
      border-radius: 14px;
    }
    .mobile-nav:hover button{
      color: #000;
    }
    .menu a:hover{
      background-color: aliceblue;
      color: #000;
      border-radius: 14px;
    }
    .mobile-nav:hover .menu{
      display: block;
    }
    #logo_name{
      font-size: 40px;
      margin: 0 1% 0 60%;
    }
  }
  @media screen and (max-width:790px){
    #navbar{
      position: relative;
      width: 100%;
    }
    .mobile-nav{
      width: 100%;
    }
    #logo_name{
      font-size: 36px;
      margin: 0 0;
      top: 25%;
      left: 50%;
      padding: 0 0;
      transform: translate(-50%, -25%);
    }
    #logo1{
      display: none;
    }
  }
  /* Header responsive css end */
/* Header end */

/* Home page start */
.one-third{
  width: 30.66%;
  float: left;
  margin-top: 4%;
  position: relative;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  border-radius: 14px;
}
#middle{
  margin-left: 4%;
  margin-right: 4%;
}
.one-third a{
  display: block;
  color: #000;
  background-color: #c9d4c9;
  width: 100%;
  padding: 5px 95% 10px 5%;
  opacity: 0.7;
  font-size: 32px;
  font-weight: bold;
}
.one-third:hover a{
  opacity: 1.0;
}
.one-third img{
  display: block;
}
#slider img{
  display:block;
  width: 100%;
  height: auto;
  min-height: 238px;
  margin: 0 0;
  animation: fadeIn 5s;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.home-pic{
  margin: auto;
  height: auto;
  width: 100%;
}
.news-section{
  width: 100%;
  clear: both;
}
.news-box{
  padding-top: 2%;
}
.news-section h1{
  background-color: #c9d4c9;
  padding: 2% 4%;
  font-size: 45px;
  border-radius: 14px;
}
.news-text {
  overflow: hidden;
  display:block;
  margin-top: 7%;
  background-color: #f8f9f9;
  border-radius: 14px;
}
.news-text img{
  float: right;
  max-width: 15%;
  padding: 0 40px 40px 40px;
}
.title{
  width: 80%;
  float: left;
  padding: 2% 3% 1%;
  font-size: 30px;
  font-weight: bold;
}
.date{
  float: right;
  margin-top: 30px;
  padding: 0 3%;
  font-size: 20px;
  font-weight: bold;
}
hr {
  clear: both;
  padding: 0 4%;
}
.news-text p{
  line-height: 1.5;
  font-size: 21px;
  padding: 0 2% 3%;
  width: 70%;
}

  /* Home responsive css start */
  @media (max-width:1000px){
    .one-third{
      width: 100%;
    }
    #middle{
      margin: 4% 0;
    }
    #slider ul li img{
      max-width: 773px;
      height: auto;
    }
    .news-text p{
      clear:both;
      width: 95%;
    }
    .news-text img{
      clear: both;
      float: left;
      max-width: 60%;
    }
  }
  /* Home responsive css end */
/* Home page end */

/* Research page start */
.about-us p{
  font-size: 20px;
  line-height: 1.5;
}

.research h3{
  padding-top: 30px;
}

.research p{
  font-size: 20px;
  line-height: 1.5;
  padding-left: 16px;
  width: 85%;
}
.research img{
  max-height: 200px;
  padding: 16px;
}
  /* Research responsive css start */
  @media (max-width:700px){
   .research p{
    clear:both;
   }
   #magne{
    float: left;
   }
  }
  /* Research responsive css end */
/* Research page end */

/* People page start */
.section-title{
  padding-top: 100px;
  color: #1f4836;
}
.bio{
  width: 100%;
  display: flex;
  padding: 30px 0;
}
.bio-header{
  position: relative;
  padding-top: 75px;
  padding-left: 50px;
  min-width: 300px;
  height: 235px;
  width: 25%;
}
.bio-header img {
  position: absolute;
  width: 100%;
  bottom: 0px;
  max-width: 207px;
  max-height: 280px;
}
.bio-header a {
  position: absolute;
  color: #000;
  top: -20px;
}
.bio-text{
  background-color: #f8f9f9;
  border-radius: 14px;
  padding: 10px;
  width: 70%;
  margin-top: auto;
}
.bio-text p{
  font-size: 18px;
  line-height: 1.5;
}
.no_pic{
  padding: 0 50px;
  font-size: 20px;
}

  /* People responsive css start */
  @media (max-width:1000px){
    .bio{
      display: block;
    }
    .bio-header{
      margin-left: auto;
      margin-right: auto;
    }
    .bio-header img{
      width: 100%
    }
    .bio-text{
      width: 100%;
      font-size: 14px;
    }
    .no_pic{
      padding: 0 0;
      font-size: 20px;
    }
  }
  /* People responsive css end */
/* People page end */

/* Publication page start */
.publications{
  width: 80%;
  margin: 0 auto;
}
.publications p{
  line-height: 1.5;
  margin-bottom: 50px;
}

/* Publication page end */

/* Contact page start */
#map{
  margin: 40px auto;
  width: 70%;
  height: 400px;
}
#map p{
  font-size: 20px;
  float: left;
  width: 30%;
  line-height: 1.5;
}
#map iframe{
  float: right;
  width: 60%;
}

  /* Contact responsive css start */
  @media (max-width:1200px){
    #map{
      height: 650px;
    }
    #map p{
      width: 100%
    }
    #map iframe{
      width: 100%
    }
  }
  /* Contact responsive css end */
/* Contact page end */

/* Footer start */

footer {
  background-color: #25142e;
  border-radius: 14px;
  width: 100%;
  height: 200px;
}
footer h4{
  color: #fff;
  float: left;
  margin: 0 0;
  padding-left: 60px;
  line-height: 200px;
  font-size: 60px;
  font-family: 'Oswald';
}
.social ul {
  display: grid;
  float: right;
  grid-template-columns: repeat(4, 1fr);
  padding-top: 30px;
}
footer li{
  display: block;
  padding: 0 25px;
  
  line-height: 60px;
}
footer img{
  line-height: 30px;
  margin: 0 0;
  padding: 0 0;
  max-height: 45px;
  max-width: 100px;
}
footer a{
  color: #fff;
}
.social{
  padding-right: 60px;
}

@media screen and (max-width:1380px){
  footer h4{
    font-size: 40px;
  }
}
@media screen and (max-width:1250px){
  footer{
    height: 300px;
  }
  footer h4{
    font-size: 40px;
    width: 100%;
    line-height: 50px;
    margin: 16px auto;
  }
  footer img{
    padding: 15px 0;
  }
  .social{
    width: 100%;
  }
}
@media screen and (max-width:700px){
  footer{
    height: 350px;
  }
  footer h4{
    font-size: 40px;
    width: 100%;
    line-height: 50px;
    padding: 15px 25px;
    margin: 0 0;
  }
  footer img{
    padding: 15px 0;
    max-height: 25px;
    max-width: 50px;
  }
  .social{
    width: 100%;
  }
  .social ul{
    grid-template-columns: repeat(3, 1fr);
  }
}
/* Footer end */