/* -------------------------------- 

Primary style

-------------------------------- */
*, 
*::after, 
*::before {
  box-sizing: border-box;
}

 .logo{text-align: left; padding: 15px}
    .logo svg{width:50px; height: 50px;}

html {
  font-size: 62.5%;
  background-color: #303030;
}

body {
  font-size: 1.6rem;
  font-family: "Roboto", sans-serif;
  color: #BDBDBD;
/*  background-color: #303030;*/
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding:30px;
  background: linear-gradient(-45deg, #191f22, #1d2125, #212327, #242428, #262629, #29282a, #2b2a2b, #2f2e2e, #303030);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
  height: 100vh;
  overflow: hidden;
}


@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

a {
  color: #fff;
  text-decoration: underline;
}

.plinks {margin-top: 30px;color:#BDBDBD}
.plinks a{margin: 15px; color: #fff;}
.plinks a:first-child{margin-left: 0;}


h1{font-size:3rem; margin-bottom:10px;color: #fff}
h2{font-size:2.5rem; margin-bottom: 10px;}

.years-wrap{
  margin-top:30px;
}

.years-wrap h4{color:#BDBDBD}

.parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(1, 1fr);
grid-column-gap: 15px;
width:100px;
}

.parent a {display: block; padding:15px; text-align: center; border: 2px rgba(255,255,255,0.0) solid; border-radius: 8px; transition: ease-in all .2s}

.div0 { grid-area: 1 / 1 / 2 / 2;  background-color:#566580; border-radius:8px;}
.div0 a:link, .div0 a:visited, .div0 a:hover, .div0 a:active{color: #566580}

.div1 { grid-area: 1 / 1 / 2 / 2;  background-color:#f80046; border-radius:8px;}
.div1 a:link, .div1 a:visited, .div1 a:hover, .div1 a:active{color: #f80046}

.div1b { grid-area: 1 / 2 / 2 / 2;  background-color:#50bea7; border-radius:8px;}
.div1b a:link, .div1b a:visited, .div1b a:hover, .div1b a:active{color: #50bea7}

.div2 { grid-area: 2 / 1 / 3 / 2;  background-color:#014189; border-radius:8px;}
.div2 a:link, .div2 a:visited, .div2 a:hover, .div2 a:active{color: #014189}


.div5 { grid-area: 2 / 2 / 3 / 2;  background-color:#0061AA; border-radius:8px;}
.div5 a:link, .div5 a:visited, .div5 a:hover, .div5 a:active{color: #0061AA}


.div3 { grid-area: 2 / 3 / 3 / 3;  background-color:#555FB9; border-radius:8px;}
.div3 a:link, .div3 a:visited, .div3 a:hover, .div3 a:active{color: #555FB9}

.div6 { grid-area: 2 / 4 / 3 / 4;  background-color:#829891; border-radius:8px;}
.div6 a:link, .div6 a:visited, .div6 a:hover, .div6 a:active{color: #829891}


.div4 { grid-area: 2 / 5 / 3 / 5;  background-color:#F0F0E4; border-radius:8px;}
.div4 a:link, .div4 a:visited, .div4 a:hover, .div4 a:active{color: #F0F0E4}


/*.div0 a:hover, .div0 a:active, .div1 a:hover, .div1 a:active, .div2 a:hover, .div2 a:active, .div3 a:hover, .div3 a:active, .div4 a:hover, .div4 a:active, .div5 a:hover, .div5 a:active{
border:2px rgba(0,0,0,.3) solid; border-radius: 8px;transition: ease-in all .2s;
}
*/
.div0, .div1, .div1b, .div2, .div3, .div4, .div5, .div6 {position: relative; top:0px; transition: ease-in all .2s}
.div0:hover, .div1:hover, .div1b:hover, .div2:hover, .div3:hover, .div4:hover, .div5:hover, .div6:hover{position: relative; top:-5px; transition: ease-in all .2s}

/* -------------------------------- 

Slideshow 

-------------------------------- */
.cd-slideshow-wrapper {
  overflow: hidden;
  max-width: 800px;
  margin: 0 auto;
  line-height: 200%;

}


#auledger{
  height: auto; background: #FFFFD1; display: flex;
  justify-content: center; 
background: linear-gradient(159deg, rgba(255, 255, 209, 1) 0%, rgba(240, 195, 19, 1) 51%, rgba(239, 191, 4, 1) 100%); width: 100%; position: absolute; bottom: 0; left: 0;
}

#auledger img.mockups{
  position: static; display:inline; border-radius: 16px;  display: block;
  margin: 0 auto; /* centers images */
}

#auledger img.icon{border-radius: 16px; display: none}

#auledger .title{
 text-align: center;
 padding: 20px 0;
  color: #000;
   display: flex;
  align-items: center;       /* vertically align everything */
  gap: 10px;                 /* spacing between items */
  flex-wrap: wrap;   
}

#auledger h3{
display: inline; font-weight: bold;
}


#auledger .linkwrap{
   text-align: left; line-height: 130%
}

#auledger .linkwrap a{display: block;}

#auledger a:link, #auledger a:visited{
  color: #000;
}

#auledger h3 a:hover, #auledger h3 a:active{
  color: #000; text-decoration: underline;
}


@media only screen and (max-width:640px) {
  .plinks a{margin: 10px;}

  #auledger{
    height: auto;  bottom: 0; left: 0; display: block;
    padding: 20px 20px 20px 20px; text-align: center; margin-top: 30px; border-radius:0 ;
  }

  #auledger img.icon{border-radius: 16px; display: inline}

  #auledger img.mockups{
     display: none;
  }

  #auledger .title{
    position: static; left: 50px; top: 33%;height: auto;
    color: #000; line-height: 130%; display: block; padding: 0;
  }

  #auledger h3{
  display: inline; font-weight: bold;
  }
  #auledger .linkwrap{display: block; text-align: center;}
  #auledger a:link, #auledger a:visited{
    color: #000; display: block; margin-bottom: 0px;
  }

  #auledger h3 a:hover, #auledger h3 a:active{
    color: #000; display: inline; text-decoration: underline;
  }

}



@media only screen and (max-width:375px) {
  h2 a {
    display: block;
}
  .plinks a{margin: 0;}
.parent {
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 15px;
grid-row-gap: 15px;
}

.div2 { grid-area: 1 / 1 / 2 / 2; }
.div5 { grid-area: 1 / 2 / 2 / 3; }
.div3 { grid-area: 1 / 3 / 2 / 4; }
.div4 { grid-area: 2 / 1 / 3 / 2; }
}