styles.css

@import url(https://fonts.googleapis.com/css?family=Abel);
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css);


body#index{ background-color:#171E2E; color: #ffffff; font-family: 'Abel', sans-serif; font-size: 93%; font-weight:normal;margin: 0; }
body#team{ background-color:#BDD7CD; color: #ffffff; font-family: 'Abel', sans-serif; font-size: 93%; font-weight:normal;margin: 0;}
body#research{ background-color:#BDD7CD; color: #ffffff; font-family: 'Abel', sans-serif; font-size: 93%; font-weight:normal;margin: 0;}
body#dataset{ background-color:#BDD7CD; color: #ffffff; font-family: 'Abel', sans-serif; font-size: 93%; font-weight:normal;margin: 0;}


a:link, a:visited, a:active{ color:inherit; text-decoration: none; }
a:hover {color: #000; text-decoration:underline; }

.right {text-align:right; }
.hide {display: none;}


.column {
    flex-grow: 1;
    min-height: 45px;
    float: left;
    width: 25%;
    padding: 50px;
    text-align: center;
    font-size: 25px;
    cursor: pointer;
    color: white;
    border-left: 15px solid #BDD7CD;
    border-right: 15px solid #BDD7CD;
    border-top: 15px solid #BDD7CD;
    border-bottom: 15px solid #BDD7CD;
}

.row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    max-width: 85%;
    margin: 0 auto;
}

.containerTab {
    display: none;
    padding: 20px;
    color: white;
    /*border-left: 60px solid #BDD7CD;
    border-right: 60px solid #BDD7CD; */
    max-width: calc(85% - 30px);
    margin: 0 auto;
    box-sizing: border-box;
    border-top: 15px solid #BDD7CD;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* Closable button inside the container tab */
.closebtn {
    float: right;
    color: white;
    font-size: 35px;
    cursor: pointer;
}



nav {
    display: table;
    table-layout: fixed;
    width: 75%;
    margin: 0 auto;
}

#index h1 {
    font-size:450%;
    font-weight:bold;
    color:#ffffff;
    text-align: center;
}

#index h2 {
    font-size:200%;
    font-weight:bold;
    color:#ffffff;
    text-align: center;
}

#team h1 {
    font-size:450%;
    font-weight:bold;
    color:#171E2E;
    text-align: center;
}

#team h2 {
    font-size:200%;
    font-weight:bold;
    color: #ffffff;
    text-align: left;
}

#team h3 {
    font-size:200%;
    font-weight:bold;
    color: #171E2E;
    text-align: center;
}

#research h1 {
    font-size:450%;
    font-weight:bold;
    color:#171E2E;
    text-align: center;
}

#research h2 {
    font-size:200%;
    font-weight:bold;
    color: #171E2E;
    text-align: left;
}

#research h3 {
    font-size:110%;
    font-weight:bold;
    color: #171E2E;
    text-align: left;
}


#dataset h1 {
    font-size:450%;
    font-weight:bold;
    color:#171E2E;
    text-align: center;
}

#dataset h2 {
    font-size:200%;
    font-weight:bold;
    color:#171E2E;
    text-align: left;
}

#dataset h3 {
    font-size:110%;
    font-weight:bold;
    color: #171E2E;
    text-align: left;
}

#dataset p {

    color:#000000;
    text-align: left;
}

.logo-list {
    display: flex;
    width: 20%; 
    float:left;
}

.menu-items {
    display: flex;
    width: 20%; 
    float:right;
}

#menu {
    width:100%;
    min-height:35px;
    background-color: #000;
    position:fixed;
    z-index:100;
    top:0; left:0;
}

#menu a {
    background-color:inherit;
    color: #fff;
}

ul#topnav  {
    display: table-row;
    padding: 0;
    overflow: hidden;
    position:relative;
    bottom:0;
}

ul#topnav li {
    list-style-type: none;
    display: table-cell;
    text-align:center;
    vertical-align:middle;
}

ul#topnav li a {
    display:block;
    padding:8px;
    text-decoration:underline;
}


ul#topnav li a:hover {
    color:#777;
    text-decoration:none;
}

ul#topnav li> ul {
    list-style-type: none;
    margin:0;
    padding:0;
}


ul#topnav li> ul > li{
	font-size:120%;
    float:left;
    display:inline;
    padding-right:5px;
}
    
#container {
    width:100%;
    margin-top:48px;
}

#pageheader {
    display:table;
    width:80%;
    margin:auto;
}

.section {
    width:80%;
    border-top:1px solid #777;
    padding:20px 0;
    margin:auto;
}

.pageitem {
    display:table;
    table-layout:fixed;
    width:100%;
    margin-bottom:15px;
    padding-top:15px;
    text-align:justify;
}

.pageitem h1 {
    font-size:250%;
    font-weight:normal;
    color:#555;
    margin:0;
    text-align:left;
}

.pageitem h2 {
    font-size:180%;
    background-color:inherit;
    color:#444;
    margin-top:0;
}

.pageitem p {
    padding:0;
    margin:1em 0;
    font-size:115%;
    line-height:175%;
}

.pageitem a {
	text-decoration:underline;
}

.pageitem .col {
     padding:0 2% 0 1%;    
}

.col {
    display: table-cell;
}

#footer {
    display:table;
    width:auto;
    height: auto;
    margin-bottom:15px;
    /* padding:15px 0; */
    text-align:center;
    /* color:#171E2E; */
    padding: auto;
}


/* Add this CSS code to your existing CSS stylesheet */
#footer #bottomnav {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

#footer #bottomnav li {
  flex: 1;
}

#footer #bottomnav li a {
  display: block;
}

/* Desktop styles */
#footer #bottomnav img {
  width: 100%;
  height: auto;
}

/* Mobile styles - change the breakpoint value as needed */
@media screen and (max-width: 768px) {
  #footer #bottomnav img {
    width: 50%;
  }
}



#footer p {
     text-align:left;
     padding:0;
}

#credits {
    display:table;
    table-layout:fixed;
    width:100%;
    font-size:12px;
    color:#777;
    line-height:100%;
    text-align:center;
}

#show-menu  {display:none; text-align:center;}
.open, .close { background-color:inherit; color:#fff; text-align:right; font-weight:normal; font-size:1.5em; padding: 0; position:absolute; top:10%; right:5%; display:none; }


/* start make items responsive */
@media screen and (max-width : 1024px){


/* menu */
ul#topnav {display:none;}
.hide, .open { display:block;}

#show-menu:checked ~ .open {display:none;}
#show-menu:checked ~ .close {font-size:1.6em; display:block;}

#show-menu:checked ~ ul#topnav {width: 100%; text-align: center; display: block;}

/* #show-menu:checked ~ ul#topnav { display: block; position: absolute; top:100%; right:0%; width:100%; margin:0; margin-bottom:1%; overflow:visible; } */
/* ul#topnav li { display: inline-block; float:right; text-align:center; margin:0; background-color:#000; padding:1% 0;}  */
ul#topnav li {display: block; margin: 0; background-color: #000; padding: 1% 0; text-align:center;} 

/*ul#topnav li {display: block; float: none;} */

ul#topnav li a { display: block; padding-right:0%; padding-bottom:5px; text-decoration:none;}
ul#topnav li a:hover {text-decoration:underline;}

/*ul#topnav li> ul { display: block; float:left;  margin:0 auto; }
ul#topnav li> ul > li {padding-left:10px; }*/

ul.logo-list {display: none;} /* Hide logo items */
ul.menu-items {float: clear;}  /* Clear properties */
ul.menu-items {width:100%; display: block;  } /* Set new properties */
/*ul.menu-items {display: flex; float: clear; justify-content: center; display: block; justify-content: center;} */

/* other items */
.pageitem h2 {font-size:120%;}
.pageitem p { padding:0; line-height:150%; font-size:99%;}
.pageitem .col {padding:0 3% 0 2%; }

}

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

.col { float:left; margin:auto; width:100%; margin-bottom:10%;}
#credits p { text-align:center; margin-bottom:-10%;}

}
/* end make items responsive */