/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
      margin: 0;
      padding: 0;
      border: 0;
      font-size: 100%;
      font: inherit;
      vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
     line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
	    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	  content: '';
	  content: none;
}
table {
      border-collapse: collapse;
      border-spacing: 0;
}

/* END OF STYLE RESET */

/* UPDATE box-sizing for all elements */
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

/*
  ========================================
  variables
  ========================================
*/

:root {
  --dark: rgb(40, 40, 40);
  --light: rgb(230,230,230);
  --green_accent: rgb(115, 206, 141);
  --blue_accent: rgb(115, 186, 206);
  --red_accent: rgb(206, 115, 168);
  --yellow_accent: rgb(199, 206, 115);
  --gray_accent: rgb(160, 160, 160);  
  --main_accent: var(--blue_accent);
}

/*
  ========================================
  Grid
  ========================================
*/

.container,
.grid,
.tight-grid {
  margin: 0 auto;
  width: 1200px;
}

.teaser-grid {
    margin: 0 auto;
    width: 1600px;
}

.container {
  padding-left: 30px;
  padding-right: 30px;
}

.footer {
  clear: both;
}

.news-grid {
  display: grid;
  grid-template-columns: 400px 400px 400px;
  grid-template-rows: repeat(16, 250px);
  /* grid-template-rows: 250px 250px 250px; */
  grid-gap: 0px;
  width: 1200px;
  margin: 0 auto;
}

/*
  ========================================
  Custom styles
  ========================================
*/
body {
  background: var(--dark);
  color: #888;
  font: 300 18px/22px "Barlow", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

sup {
  vertical-align: super;
  font-size: smaller;
}

/*
  ========================================
  Clearfix
  ========================================
*/
.group:before,
.group:after {
  content: "";
  display: table;
}
.group:after {
  clear: both;
}
.group {
  clear: both;
  *zoom: 1;
}

/*
  ========================================
  Rows
  ========================================
*/

.row-alt,
.row-blank {
  background: var(--light);
  min-width: 1200px;
  padding: 80px 0 60px 0;
}

.row {
  min-width: 1200px;
  padding: 40px 0 10px 0;
}

#home_banner {
   background-image: url("../images/banners/Percolation.png");
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   height: 350px;
}

#research_banner {
   background: argb(0,0,0,1);
   background-image: url("../images/banners/AA_CG.png");
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   height: 350px;
}

#people_banner {
   background: argb(0,0,0,1);
   background-image: url("../images/banners/group_2.png");
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   height: 350px;
}

#pub_banner {
   background: argb(0,0,0,1);
   background-image: url("../images/banners/publication_banner.png");
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   height: 350px;
}

#codedata_banner {
   background: argb(0,0,0,1);
   background-image: url("../images/banners/code_banner.png");
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   height: 350px;
}

.row-alt .hero {
  height: 150px;
  width: 800px;
  border-style: solid;
  border-width: 1px;
  border-color: rgb(0,0,0);
  border-radius: 10px;
  background: rgba(30,30,30,0.75);
  padding: 25px 0px 100px 0px;
  position: relative;
  top: 20px;
  float: center;
}   

.row-blank {
   min-width: 1200px;
   background: None;
   padding: 44px 0 22px 0;
   padding: 0px 0 22px 0;
 }

.row h3 {
  color: var(--dark);
}

.row p {
  color: var(--dark);
}

/*
  ========================================
  Typography
  ========================================
*/

h1, h3, h4, h5, p {
  margin-bottom: 22px;
}

h1, h2, h3, h4 {
  color: var(--light);
}

.primary-header h3, .hero h2 {
    color: var(--main_accent);	
}


h1 {
  font-size: 36px;
  line-height: 44px;
}
h2 {
  font-size: 24px;
  line-height: 44px;
}
h3 {
  font-size: 21px;
}
h4 {
  font-size: 18px;
}

h5 {
  color: #a9b2b9;
  color: rgb(100,100,100);
  font-size: 18px;
  font-weight: 400;
  text-transform: uppercase;
}

strong {
  font-weight: 400;
}
cite, em {
  font-style: italic;
}

.teaser {
  text-align: center;
}

.teaser h3 {
  font-size: 24px;
}

.teaser p {
  font-size: 18px;
}

.newsblock {
  text-align: center;  
  border-style: solid;
  border-width: 1px;
  border-color: rgb(0,0,0);
}

.newsblock p {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background-color: black;
  color: white;
  padding-left: 20px;
  padding-right: 20px;
}

.newsblock img {  
  display: block;
  max-width: 100%;
  max-height: 100%;
}

.newsimage {  
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  background-color: white;
}

.newstext,
.newstext-left-lower,
.newstext-left-upper,
.newstext-right-lower,
.newstext-right-upper {
   position: relative; 
   width: 80%; 
   color: white; 
   font: bold 16px/20px;
   background: rgb(0, 0, 0); /* fallback color */
   background: rgba(0, 0, 0, 0.7);
   padding: 10px; 
}

.newstext-left-lower {
   text-align: left;
   bottom: 100px; 
   left: 20px; 
   width: 80%; 
}
.newstext-left-upper {
   text-align: left;
   bottom: 175px; 
   left: 20px; 
   width: 80%; 
}

.newstext-right-lower {
   text-align: right;
   right: 20px;
   bottom: 100px; 
   float: right;
   width: 80%; 
}

.newstext-right-upper {
   text-align: right;
   right: 20px;
   bottom: 175px; 
   float: right;
   width: 80%; 
}


.res_description {
  background: var(--main_accent);
  padding: 10px 20px; 
  border-radius: 20px;
  text-align: justify;
}

.res_description h2,
.res_description h5,
.res_description a,
.res_description a:hover {
  color: var(--dark);
}

.people_box {
  background: var(--main_accent);
  padding: 10px 20px; 
  border-radius: 20px;
  text-align: justify;
}


#res1 {
  padding: 45px 0px;
}

#res2 {
  padding: 50px 0px;
}

#res3 {
  padding: 70px 0px;
}

/*
  ========================================
  Links
  ========================================
*/

a:hover {
  color: var(--main_accent);
}

a {
  text-decoration: none;
  color: var(--main_accent);
}

.teaser a:hover h3 {
  color: var(--main_accent);
}

p a {
  border-bottom: 1px solid #dfe2e5;
}


/*
  ========================================
  Buttons
  ========================================
*/

.btn {
  border-radius: 5px;
  cursor: pointer;
  display: inline-block;
  font-weight: 400;
  letter-spacing: .5px;
  margin: 0;
  text-transform: uppercase;
}

.btn-alt {
  border: 1px solid var(--light);
  padding: 10px 30px;
}
.btn-alt:hover {
  background: var(--light);
  color: rgb(115, 206, 141)
}

.row .btn-alt {
  color: var(--main_accent);
  background: rgb(80,80,80);
  border: 1px solid rgb(80,80,80);
  padding: 10px 30px;
}
.row .btn-alt:hover {  
  color: rgb(80,80,80);
  background: var(--main_accent);
  border: 1px solid var(--main_accent);

}

#research_box .btn {
  color: var(--blue_accent);	
  background: var(--dark);
  border: 1px solid var(--dark);
}

#research_box .btn:hover {
  color: var(--dark);
  background: var(--blue_accent); 
  border: 1px solid var(--dark);
}

#people_box .btn {
  color: var(--yellow_accent);
  background: var(--dark);
  border: 1px solid var(--dark);
}

#people_box .btn:hover {
  color: var(--dark);
  background: var(--yellow_accent);
  border: 1px solid var(--dark);
}

#pub_box .btn {
  color: var(--red_accent);
  background: var(--dark);
  border: 1px solid var(--dark);
}

#pub_box .btn:hover {
  color: var(--dark);
  background: var(--red_accent);
  border: 1px solid var(--dark);
}

#dc_box .btn {
  color: var(--gray_accent);
  background: var(--dark);
  border: 1px solid var(--dark);
}

#dc_box .btn:hover {
  color: var(--dark);
  background: var(--gray_accent);
  border: 1px solid var(--dark);
}


/*
  ========================================
  Home
  ========================================
*/

.hero {
  color: var(--light);
  line-height: 50px;
  padding: 30px 80px 30px 80px; 
  text-align: center;
}
.hero h2 {
  font-size: 40px;
}

.hero p {  
  color: rgb(200, 200, 200);
  font-size: 30px;
  font-weight: 100;
}

#research_box {
  background: var(--blue_accent);
  border: 1px solid rgb(80,80,80);
  border-radius: 10px;
  padding: 20px 20px 20px 20px;
  width: 350px;
  margin: 0px 20px 20px 20px;
}

#people_box {
  background: var(--yellow_accent);
  border: 1px solid rgb(80,80,80);
  border-radius: 10px;
  padding: 20px 20px 20px 20px;
  width: 350px;
  margin: 0px 20px 20px 20px;
}

#pub_box {
  background: var(--red_accent);
  border: 1px solid rgb(80,80,80);
  border-radius: 10px;
  padding: 20px 20px 20px 20px;
  width: 350px;
  margin: 0px 20px 20px 20px;
}

#dc_box {
  background: var(--gray_accent);
  border: 1px solid rgb(80,80,80);
  border-radius: 10px;
  padding: 20px 20px 20px 20px;
  width: 350px;
  margin: 0px 20px 20px 20px;
}

/*
  ========================================
  Primary header
  ========================================
*/

.logo {
  float: left;
  font-size: 32px;
  font-weight: 100;
  letter-spacing: .5px;
  line-height: 44px;
  padding: 30px 0 22px 0;
}

.logo .sub {
  vertical-align: center  
  font-size: 48px;
  font-weight: 100;
  letter-spacing: .5px;
  line-height: 44px;
}

.tagline {
  float: left;	
  text-align: left;
  padding: 22px 0 0 10px;
}

.primary-nav {
  padding: 40px 0 0 0;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.primary-header a,
.primary-footer a {
  color: var(--light);
}

.primary-header a:hover,
.primary-footer a:hover {
  color: var(--main_accent);
}


#h_home:hover, #f_home:hover {
  color: var(--green_accent);
}

#h_res:hover, #f_res:hover {
  color: var(--blue_accent);
}

#h_pub:hover, #f_pub:hover {
  color: var(--red_accent);
}

#h_peep:hover, #f_peep:hover {
  color: var(--yellow_accent);
}

#h_dc:hover, #f_dc:hover {
  color: var(--gray_accent);
}

/*
  ========================================
  Navigation
  ========================================
*/

.nav {
  text-align: right;
}

.nav li {
  display: inline-block;
  margin: 0 10px;
  vertical-align: top;
}

.nav li:last-child {
  margin-right: 0;
}

/*
  ========================================
  Primary footer
  ========================================
*/

.primary-footer {
  color: var(--main_accent);
  font-size: 16px;
  padding-bottom: 44px;
  padding-top: 44px;
  text-transform: uppercase;
}
.primary-footer small {
  float: left;
  font-weight: 400;
}

/*
  ========================================
  Columns
  ========================================
*/

.col-1-2 {
  width: 46.45%;
  padding-left: 15px;
  padding-right: 15px;
  display: inline-block;
  vertical-align: middle;
  margin-left: -15px;
  margin-right: 15px;

}

.col-1-4 {
  width: 25%;
  padding-left: 15px;
  padding-right: 15px;
  display: inline-block;
  vertical-align: middle;
  margin-left: -15px;
  margin-right: 15px;

}

.col-1-3,
.news-col-1-3 {
  width: 33.33%;
}
.col-2-3,
.news-col-2-3 {
  width: 66.66%;
}

.col-1-3,
.col-2-3,
.news-col-1-3,
.news-col-2-3 {
  display: inline-block;
  vertical-align: top;
}

.grid,
.tight-grid,
.col-1-3,
.col-2-3 {
  padding-left: 15px;
  padding-right: 15px;
}

.tight-grid {
  margin-top: -102px;
} 

.news-col-1-3,
.news-col-2-3 {
  padding-left: 0px;
  padding-right: 0px;
}

/*
  ========================================
  Speakers
  ========================================
*/

.member-info {
  margin: 40px 0px;
  padding: 20px 0;
  text-align: center;
}

.member {
  margin-bottom: 44px;
}

.research_box {
  margin-bottom: 44px;
}

.member-info img {
  border-radius: 50%;
  height: 130px;
  margin: -66px 0 22px 0;
  vertical-align: top;
}


/*
  ========================================
  Publications
  ========================================
*/

.publications {
  border: 1px solid #dfe2e5;
  border: 1px solid rgb(100,100,100);
  border-radius: 5px;
//  margin-top: 20px;
  text-align: left;
}

.publications h2 {
  font-size: 24px;
  font-weight: normal;
  font-color: rgb(200,200,200);
}

.publications a li {
  font-size: 24px;
  font-color: rgb(200,200,200);
}

.publications ol {
  list-style-position: inside;	
  list-style-type: decimal;
  font-size: 20px;
  font-color: rgb(200,200,200);
}

.publications li {
  margin: 10px 0;
}


/*
  ========================================
  Code+Data
  ========================================
*/

.codedata {
  border: 1px solid #dfe2e5;
  border: 1px solid rgb(100,100,100);
  border-radius: 5px;
//  margin-top: 20px;
  text-align: left;
}

.codedata h2 {
  font-size: 24px;
  font-weight: normal;
  font-color: rgb(200,200,200);
}

.codedata h4 {
  font-size: 20px;
  font-weight: normal;
  color: rgb(200,200,200);
  text-align: justify
}

.codedata h5 {
  font-size: 16px;
  font-weight: normal;
  color: rgb(200,200,200);
  text-align: justify
}

.codedata a li ul {
  font-size: 30px;
  color: rgb(200,100,200);
}

.codedata a {
    color: var(--green_accent)
}

.codedata ol {
  list-style-position: inside;	
  list-style-type: decimal;
  font-size: 16px;
  color: rgb(200,200,200);
}

.codedata li {
    margin: 10px 0;
}

.blue_accent {
  color: var(--blue_accent)
}