html, body {
    margin: 0;
    padding: 0;
    height:  100%;
    width: 100%;
    min-height:  100%;
    min-width: 100%;
    overflow: hidden;
    font-size: 16px;
    font-family:'Source Sans Pro';
    background: linear-gradient(to top right, rgb(150, 212, 247), rgb(146, 234, 210))
  }


.divide{
    display: grid;
    width: 100vw;
    height: 100vh;
    grid-template-columns: .5% 12% 37.5% 37.5% 12% .5%;
    grid-template-rows: 25% 30% 20% 5%;

}

.coluzziweb{
    grid-row: 2 / 3;
    grid-column: 3 / 4;  
    margin: auto;
    max-width: 200px;
    max-height: 200px;
    position: relative;
}

.jc{
    grid-row: 2 / 3;
    grid-column: 4 / 5;
    margin: auto;
    max-width: 200px;
    max-height: 200px;
    position:  relative;
}

.coluzziwebjpg{
    grid-row: 1 / 7;    
    grid-column: 2 / 6;
    margin: 0;
    padding: 0;
    height:  100%;
    width: 100%;
    min-height:  100%;
    min-width: 100%;
}

.jcjpg{
    grid-row: 1 / 7;    
    grid-column: 2 / 6;
    margin: 0;
    padding: 0;
    height:  100%;
    width: 100%;
    min-height:  100%;
    min-width: 100%;

}

/*.item{
    background-color: rgba(250, 250, 250, 0.4);
    border: 1px transparent solid;
    mix-blend-mode: screen;
  }*/


@media only screen and (max-device-width: 400px) {

    img{max-height:100vh; 
        max-width:100vh; 
        vertical-align: top; 
        flex-shrink: 0;
        min-width: 100%;
        min-height: 100%;    
  }

  .buttonchoice{
    height:100px;
    width: 250px;
    font-size: 24px;
  }
  
}



i {
    border: solid black;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
  }


/* updating + prettifying buttons */


.button-images {
max-width: 950px;
margin: 75px auto;

}
/* button-container content would replace coluzziweb */

.button-container {
position: relative;
text-align: center;
display: grid;
padding: 0;
border-radius:50%; 
overflow:hidden; 
width: 100%;
height: 100%;
z-index: 2;
box-shadow:
  0 1px 0 0 rgba(255, 255, 255, 0.4) inset,
  0 6px 6px rgba(0, 0, 0, 0.8),
  0 10px rgba(0, 0, 0, 0.5) inset;

}



.button-container A:before{  
  content: '';
  display: inline-block;
  height: 40%; 
  /* 
  vertical-align:middle; 
  height: 100%;*/
  
 
  }


.button-container a.shadow {
  transition: all .7s ease-out;
  background: rgba(88, 88, 88, 0.7);
  border-radius:50%; 
  vertical-align:middle;
  padding:5%; 
  color: #FFFFFF;
  position:absolute;
  font-size: 1.125em; 
  font-weight: 700; 
  top: 0;
  left:0;
  right:0;
  bottom:0;
  width:90%;
  display:inline-block;
  text-decoration: none;
  text-transform:uppercase;
}

.button-container A.shadow:hover {
  background: none;
  border: none; 
  opacity:0;

}



.button-container a.glass {
    border-radius:50%; 
    vertical-align:middle;
    padding:5%; 
    color: #FFFFFF;
    position:absolute;
    font-size: 1.125em; 
    font-weight: 700; 
    top: 0;
    left:0;
    right:0;
    bottom:0;
    width:90%;
    display:inline-block;
    background-image:
      radial-gradient(circle closest-side, rgba(167, 162, 162, 0.15), rgba(0, 0, 0, 0.32));
    background-size: 100%;
    border-radius: 50%;
}
.button-container a.glass::before {
    border-radius:50%; 
    vertical-align:middle;
    padding:5%; 
    position:absolute;
    width: 56%;
    height: 26%;
    top: 4%;
    left: 18%;
    border-radius: 50%;
    display:inline-block;
    border-radius: 50%;
    background-image:
      linear-gradient(to bottom, rgba(231, 231, 231, 0.1), rgba(30, 30, 30, 0.02));
    content: '';
}
.button-container a.glass::after {
    vertical-align:middle;
    padding:5%; 
    color: #FFFFFF;
    position:absolute;
    width: 38%;
    height: 19%;
    bottom: 3%;
    left: 31%;
    border-radius: 50%;
    background-image:
      linear-gradient(to bottom, rgba(93, 93, 93, 0.06), rgba(0, 0, 0, 0.18));
    display:inline-block;
    content: '';
}


#jchover:hover ~ #jcjpgs{
    opacity: 1.0;
    transition: opacity .55s ease-in-out;
    -moz-transition: opacity .55s ease-in-out;
    -webkit-transition: opacity .55s ease-in-out

}

#cwhover:hover ~ #coluzziwebjpgs{
    opacity: 1.0;
    transition: opacity .55s ease-in-out;
    -moz-transition: opacity .55s ease-in-out;
    -webkit-transition: opacity .55s ease-in-out

}



.backgroundimgs img{
    position: absolute;
    max-width:150px;
    max-height:150px;
    opacity:0;
    overflow: hidden;
    z-index: 1;
}

.button-container img{width:100%; height:266px; display:block}