.mdl-layout__header-row{
    align-self: center;
}
.mdl-layout-title {
    display:inline-block;

  }
  

.index_main{
    background-image:url("images/index/background.jpg");
}

/* About */

.about{
    display:none;
    grid-template-columns: 5% 25% 3% 30% 30%;
    grid-template-rows: 5% 95%;
    height: 100vh;
}
.about_content_main{
    grid-column: 4 / 5;
    grid-row: 2 / 4;

}
.about_content_selection{
    grid-column: 2 / 3;
    grid-row: 2 / 4;
}
.about_pics{
    position:relative;
    grid-column: 5 / 6;
    grid-row: 2 / 3 ;


}

.about_pics > img{
    position:absolute;
    object-fit: cover;
    max-width: 100%;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
  

}


  /* 

  Calculate Fade info:

 a =  seconds image is seen
 b =  seconds for fade transition
 n = total number of images
 t = (a+b)*n  (total time taken)

 animation-delay = a + b


  keyframes
    0%
    a/t  as percentage
    (a+b)/t   as percentage
    100%-b/t
    100%
  
  */

@keyframes Fade {
    0% {
    opacity:1;
  }
  20% {
    opacity:1;
  }
  33% {
    opacity:0;
  }
  93% {
    opacity:0;
  }
  100% {
      opacity: 1;
  }
  }
  
  .about_pics img {
  animation-name: Fade;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 15s;
  animation-direction: reverse;
  }

  .about_pics img:nth-of-type(1) {
    animation-delay: 10s;
  }
  .about_pics img:nth-of-type(2) {
    animation-delay: 5s;
  }
  .about_pics img:nth-of-type(3) {
    animation-delay: 0s;
  }



/* Goals */

.goals{
    display:none;
    grid-template-columns: 5% 25% 40% 30%;
    grid-template-rows: 5% 95%;
    height: 100vh;
}

.goal_intro{
    grid-column:2 / 3;
    grid-row: 2/3;
    width: 100%

}

.goal_list{
    grid-column: 3 /4;
    grid-row: 2/ 3;
    width: 100%;

}

.goal_pics{
    display: block;
}

.mdlext-collapsible-region p{
    color:black;
}

/* Experience */

.experience{
    display:none;
    grid-template-columns: 15% 35% 35% 15%;
    grid-template-rows: 10% 95%;
    height: 100vh;
}


/*Misc*/




.misc{
    display:none;
    grid-template-columns: 10% 80% 10%;
    grid-template-rows: 10% 90%;
    height: 100vh;
}

.misc_body{
  grid-column: 2/3;
  grid-row:1/3;
  text-align: center;

}

.queryDB{
  display:grid;
  grid-template-columns: 33% 33% 3% 30%;
  grid-template-rows: 50% 50%;
}
.paramA{
  grid-column:1/2;
  grid-row:1/2;

}
.paramB{
  grid-column:2/3;
  grid-row:1/2;

}
.paramC{
  grid-column:4/5;
  grid-row:1/2;

}
.dbquery_send{
  grid-column:1/5;
  grid-row:2/3;

}

.value::after{
  bottom:0px;
}


/*COLLAPSIBLE CARD*/

.mdl-card.collapse-card {
  min-height: 0;
  max-width: 640px;
  width: auto;
  margin: auto;
}
.mdl-card.collapse-card > .mdl-card__title {
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  min-height: 64px;
  padding-top: 0;
  padding-bottom: 0;
  color:black;
}
.mdl-card.collapse-card .mdl-card__title:focus {
  /* Must focus ring must be inside title since mdl-card has overflow:hidden */
  outline-offset: -4px;
}
.mdl-card.collapse-card .mdl-card__title > * {
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  align-self: center;
}
.mdl-card.collapse-card .mdl-card__supporting-text {
  width: auto;
}
.mdl-card.collapse-card .mdl-card__actions {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.collapse-card > .mdl-card__title .mdl-card__title-text {
  -webkit-align-self: flex-end;
  -ms-flex-item-align: end;
  align-self: flex-end;
  padding-bottom: 16px;
}
.collapse-card > .mdl-card__title[aria-expanded='false'] {
  height: 64px;
}
.collapse-card > .mdl-card__title[aria-expanded='false'] .mdl-card__title-text {
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  align-self: center;
  padding-bottom: 0;
}