
body { margin: 0; }

.tutorial-carousel-item {
  height: 15rem;
}

.landing_container {
  display: grid;
  grid-template-columns: 1fr 3fr 3fr; 
  grid-template-rows: 1fr 25em 1fr;
  gap: 0px 0px; 
  height: 95vh;
  /*grid-template-rows: 5% 10% 5% 20% 45%;
  grid-template-columns: 10% 20% 20%;
  */
  
}

.landing_backgrnd {

  background: rgb(155,155,155);
  background: radial-gradient(circle, rgba(155,155,155,1) 0%, rgba(189,189,189,1) 50%, rgba(255,255,255,1) 100%);
/*
  grid-column-start:1;
  grid-column-end:4;
  grid-row-start:1;
  grid-row-end:4;*/
}

.landing_centerpane {
  grid-column-start:2;
  grid-column-end:3;
  grid-row-start:2;
  grid-row-end:3;
  position: relative;

  background-color: #ffffffC0;
  padding: 50px;
  
}

.landing_rightpane {
  grid-column-start:2;
  grid-column-end:3;
  grid-row-start:2;
  grid-row-end:3;
  position: relative;

  background-color: #ffffffC0;
  padding: 50px;

}

.right_align {
  text-align: right;
}

.landing_arrow {
  grid-column-start:2;
  grid-column-end:4;
  grid-row-start:3;
  grid-row-end:4;
}


.landing_centerpane img.disappear {

  border-bottom: 5px solid #025e77;
  padding-bottom: 10px;                     /* padding to underline link */
  position: absolute;
  width: 30em;
}

.landing_centerpane img.appear {
 
  border-bottom: 5px solid #025e77;
  /*object-fit: contain;*/

  opacity: 0;
  padding-bottom: 10px;                     /* padding to underline link */
  transition: opacity 0.3s;
  width: 30em;
}

.landing_centerpane p {
  font-size: xx-large;
}


.sigspace_box img.disappear {
  opacity: 1;
  width: 20rem;
}

.sigspace_box img.appear {
  opacity: 1;
  width: 20rem;
}

.sigspace_box a:hover img.disappear {
  opacity: 0;
  width: 20rem;
}

.sigspace_box a:hover img.appear {
  opacity: 1;
  width: 20rem;
  transform: scale(1.02);
  transition: all .1s linear;
}

#more-arrows {
  width: 75px;
  height: 65px;
}

#more-arrows:hover polygon {
  fill: #025e77;
  transition: all .2s ease-out;

  &.arrow-bottom {
    transform: translateY(-18px);
  }

  &.arrow-top {
    transform: translateY(18px);
  }
}

polygon {
  fill: #025e77;
  transition: all .2s ease-out;
    
  &.arrow-middle {
    opacity: 0.75;
  }

  &.arrow-top {
    opacity: 0.5
  }
}

/********* Benefits ************/

.benefits {
  max-width: 1400px;
  height: 100vh;                /* make full height */
  width: 100%;                  /* fill max width */
  margin-left: auto;            /* center */
  margin-right: auto;           /* center */
  table-layout: fixed;          /* equal space columns */
  
  padding: 100px;               /* Outer distance from border */
  /*display: grid; 
  grid-template-columns: 1fr 1fr; 
  grid-template-rows: 1fr 1fr 1fr; 
  gap: 0px 0px; */
  
}

.benefits tr {
  height: calc(90vh/3);     /* Rows of equal height */
}

.benefits .textcell {
    
  background: #025e77;        /* back color */
  color: white;               /* txt color */
  font-size: 1.8em;           /* font size */
  border-radius: 50px;        /* Nice outer shape*/
  padding: 50px;              /* distance border text */
}

.std_width {
	width: 1200px;
	margin: auto;
}

.txt_grey {
	color: gray;
}
