a {text-decoration: none;
color:#438496; }

h2{
color: #286da8;
font-size:18px;
font-weight: 800;
font-family: Oswald;
}


/* Style the header */
.header {
  display: flex;
  flex-wrap: wrap;
  background-color: #ffffff;
  padding-top: 4px;
 
  justify-content:center;
  position: fixed;
  width:100%;
 
  margin: auto auto;
  z-index: 100000;
  
}




/* Style the menu */
#cssmenu
{
 
    flex-wrap:nowrap;
    font-family:Oswald, 'Times New Roman', sans-serif;
    vertical-align:middle;
}



#cssmenu ul
{   
    width:auto;
    display:inline-block;
    color:#333333;
    margin:0;
    margin-top: 14px;
    padding:0;
    position:relative;
    z-index:999999990;
  
      
    
} 

#cssmenu li
{
    display:inline-block;
  
 
}

/*Top level items
---------------------------------------*/

#cssmenu >ul>li>span, #cssmenu >ul>li>a 
{   
    font-size:20px;
    color:inherit;
    text-decoration:none;
    padding:8px 11px; 

    text-transform:uppercase;
    font-weight: 500;
    display:block;   
    position:relative;
  
    transition:all 0.3s;
    font-family: Alte Haas Grotesk;
   
    letter-spacing:2px;
  
}
#cssmenu li:hover > span, #cssmenu li:hover > a
{  
    color:#aaaaaa;
    background-color:transparent;
    /*text-decoration: underline;*/
}




/*######## styles for mobile mode */

.menu-icon {
	
    display: none;
}

@media only screen and (max-width: 895px) {
	
	.header {
  display: flex;
  flex-wrap: wrap;
 
  padding-top: 4px;
 
  justify-content:left;
  position: fixed;
  width:100%;

 
  margin: auto auto;
  z-index: 100000;
  
}

.header img{
	height:85px;
}


    .menu-icon {display:block;
    				position:absolute;
    				top:7px;
    				right:12px;
    				z-index:1000000006;
    				padding:6px;
    				cursor: pointer;
    				background-color:#ffffff;
    				border:2px solid transparent;
    				border-radius:3px;
    				font-size:0;
    				border-color:#286da8
      				}
    				
.menu-icon.active {position:absolute;top:7px;right:12px;z-index:1000000006;}



/* background of mobile menu*/
    #cssmenu  {
        width:100%;
        !max-width:400px;
        height:230px;
        display:none;
        background-color:#fff;
        box-sizing:border-box;
        z-index:0;
        text-align: center;
    }


    #cssmenu ul  {
        background-color:transparent;
               box-sizing:border-box;
     
    }

    #cssmenu .mobileHide {
        display:none;
    }

/*-height of mobile menu list elemeents*/
    #cssmenu li {
        text-align:center;
        display:block;
        position:static;
        height: 30px;
       
    }

/*-font size in mobile menu*/
    #cssmenu >ul>li>span, #cssmenu >ul>li>a 
    {       
        font-size:18px;
     
    }
    

  
}


/* lines in mobile menu button */
.three-line{
  width: 28px;
  height: 18px;
  position: relative;
  display: inline-block;
  font-size: 0;
}
/* span sets color and so of lines in mobile button */
.three-line span{
  background-color:#286da8;
  position: absolute;
  border-radius: 5px;
  /*transition: transform .5s ease-in-out;*/
  width:100%;
  height: 2px;
  left: 0;
  transform: rotate(0);
}

/*position lines of button*/
.three-line span:nth-child(1){
  top:0;
}
.three-line span:nth-child(2){
  top:8px;
  visibility:visible;
}
.three-line span:nth-child(3){
  bottom:0;
}
.menu-icon.active .three-line span:nth-child(1){
  transform: rotate(225deg);
  top: 8px;
}
.menu-icon.active .three-line span:nth-child(2){
  transform: rotate(180deg);
  visibility:hidden;
}
.menu-icon.active .three-line span:nth-child(3){
  transform: rotate(315deg);
  top: 8px;
}
/*End of styles for mobile mode ########*/






/*start page*/
.main_box {
 
  display: flex;
  flex-wrap: wrap;
  -webkit-flex-direction: column;
  background-color: none;
  text-align: left;
  justify-content: center;
  padding-top: 110px;
  height:100%;
  width:100%;
  max-width:940px;
  margin:  auto auto;

}



@media only screen and (max-width: 1169px) {

    .main_box {padding-top: 190px;}}
    
@media only screen and (max-width: 895px) {

    .main_box {padding-top: 110px;}}

.newsfield {
  display: flex;
  flex-direction: row;
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 5px;
  padding-bottom: 5px;
  display: relative;
  text-align:justify;
  width: 99%;
  margin: auto auto;
  
 
 
}


.center {
  display: inline;
  
 max-height:100%; 
 max-width:100%;
 object-fit: contain;
  padding: 5px;
  
}

.row {
  display: flex;
  padding-top: 20px;
  padding-bottom: 20px;
  text-align:left;
  max-width: 940px;
}

@media (max-width: 800px) {
  .row {
    -webkit-flex-direction: column;
    flex-direction: column;
  }
}

.column {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  
  margin:5px;
  margin-bottom: 5px;
  margin-top:5px;
  background-color:#f8f8f8;
  border-radius:10px;
  text-align:justify; 
  max-width: 940px;
  max-height: 600px;
  font-size: 14px;
  padding: 12px;
  overflow-y: scroll;
  scrollbar-color: #e2e2e2 #ffffff;
  scrollbar-width: thin;
}

.column_on {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  
  margin:5px;
  margin-bottom: 5px;
  margin-top:5px;
  background-color:rgb(170,170,170,0.25);
  border-radius:10px;
  text-align:justify; 
  max-width: 940px;
  max-height: 1000px;
  font-size: 14px;
  padding: 12px;
  overflow-y: scroll;
}

.column p {
font-size: 14px;
}

.column span {
font-size: 14px;
}

.column a {
font-size: 14px;
}

.column b {
font-size: 14px;
}

/*end -- start page*/

/*research page*/
.column_research {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding: 5px;
  margin-bottom: 5px;
  margin-top:5px;
  text-align:justify;
 }
 

 
@media only screen and (max-width: 800px) {

   .show_mobile {display:block; }
   .hide_mobile {display:none; }
   .image{display: block;margin:auto auto;max-width: 400px;width:  80%;}
   }    

@media only screen and (min-width: 800px) {

   .show_mobile {display:none; }
   .hide_mobile {display:block; }
   .image{display: block;margin:auto auto;max-height: 400px;height:  100%;}
   }  
  

    .row_reverse {
  display: flex;
  padding-top: 20px;
  padding-bottom: 20px;
  text-align:left;
  max-width: 940px;
}

@media (max-width: 800px) {
  .row_reverse {
    -webkit-flex-direction: column-reverse;
    flex-direction: column-reverse;
  }
}


/*end-research page*/

/*team page*/
.row_team {
  display: flex;
  max-width: 940px;
 
}


.column_team {
  display: block;
  flex:calc(1/3);
 
  text-align: center;
  margin-bottom: 50px;
}

.column_team img {
  display: block;
  max-width:90%;
  
  width: auto;
  height: auto;
  margin: 20px;
}

.row_symbols {
display: inline;
height: 200px;
text-align: center;

}

.row_symbols img {
display: inline;
height: 20px;

}


@media only screen and (max-width: 800px) {

    .row_team {flex-direction:column;margin:auto auto;max-width: 250px;}}
    

/*end-team page*/


/*publication page*/
.pub_year {
  border-bottom: 2px solid;
  border-color:#286da8;
  width: 100%;

  margin-top: 20px;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
  color:#286da8;
  font-family:"Oswald"; 
  font-size: 17px;
}
.pub_column {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;

  margin-left:  0px;
  margin-top: 30px;
  text-decoration:none;
  text-align:justify; 
  max-width: 900px;
  
}


/*end--publication page*/

/* teaching page */

.semester {
  border-bottom: 2px solid;
  border-color:#286da8;
  width: 100%;

  margin-top: 20px;
  margin-bottom: 5px;
  margin-left: 0px;
  margin-right: 0px;
  color:#286da8;
  font-family:"Oswald"; 
  font-size: 17px;
}

.lecture {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;

  margin-top: 20px;
  margin-bottom: 10px;
  text-decoration:none;
  text-align:left; 
  max-width: 900px;

}



/*end -- teaching page*/

/*contact page*/



.googlemap-responsive{
    
    overflow:hidden;
    /* makes height 20% of width*/
    padding-bottom:30%;
 
    position:relative;
   

    max-width: 940px;
    
    margin: auto auto;
}
.googlemap-responsive iframe{
    
    top:0;
    height:100%;
    width:100%;
    margin: auto auto;
    position:absolute;
}
/*end ----contact page*/

/* Style the footer */
.footer {
	 display: -webkit-flex;
  display: flex; 
  background-color:rgb(24,54,81,0.8);
  padding: 10px;
  text-align: center;
   position:relative;
   bottom:0;
  margin: 0 auto;
  max-width: 940px;

}

.footer_column {
  -webkit-flex: 1 ;
  -ms-flex: 1 ;
  flex: 1 ;
 
  background-color: none;
  color:#c6c6c6 ;
  font-size: 14px;
 
}

@media only screen and (max-width: 800px) {

   .footer_column { font-size: 10px;} }
   
     
.footer_text{font-size: 14px;}

@media only screen and (max-width: 800px) {

   .footer_text { font-size: 10px;} }


.title-field {
  height:80px;
  max-width:700px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 30px;
  margin-bottom: 20px;
  text-align:justify;
}