/* esc coming together 7-21-a */

/*   <div class="button_slide slide_right">BUTTON: SLIDE RIGHT </div>\\*/


body {
	background: #171616;
	color: #f1f1f1;
	margin: 2px 18px 20px;
	font-size: 1.28em;
}
a {
	color: #ff33cc;
}

.smlr {
	font-size: .9em;
}
.mid {
	margin: auto;
	text-align: center;
}

.midtwo {
	margin: auto;
}
p {
	max-width: 600px;
	margin: 2px 4px 12px 4px;
	padding: 2px 4px 12px 4px;
}

h2 {
	padding: 8px 2px 5px;
}

.box {
  display: flex;
  align-items: center;
  justify-content: center;
}
.imgwrap {
   width: 50%; /*or whatever you choose*/
   margin: auto;
}
.imgwrap img {
   display: block;
   width: 100%;
   max-width: 500px; /*actual image width*/
   height: auto; /* maintain aspect ratio*/
   margin: auto; /*optional centering of image*/
}

.transone {
	opacity: 0.7;
}
.asidetwo {
	padding-left: 24px;
	font-style: italic;
}
.asidethree {
	max-width: 300px;
	float: right;
	border: 4px double gray;
	margin: 3px;
	padding: 2px;
}
.midsep {
	max-width: 600px;
	margin: auto;
}
.padupeight {
	padding-top: 10px;
}
.paddneight {
	padding-top: 12px;
}
.ashbord {
	border: 2px solid black;
	padding: 2px;
	margin: 3px;
}

.pbortwo {
	border: 2px solid pink;
}
/*buttons start */

.button_slide {
  color: #FFF;
  border: 2px solid rgb(216, 2, 134);
  border-radius: 0px;
  padding: 8px 16px;
  display: inline-block;
  font-family: "Lucida Console", Monaco, monospace;
  font-size: 16px;
  letter-spacing: 1px;
  cursor: pointer;
      width: 10em;
    height: 4em;
  box-shadow: inset 0 0 0 0 #D80286;
  -webkit-transition: ease-out 0.4s;
  -moz-transition: ease-out 0.4s;
  transition: ease-out 0.4s;
}

.slide_down:hover {
  box-shadow: inset 0 100px 0 0 #D80286;
}

.slide_right:hover {
  box-shadow: inset 400px 0 0 0 #D80286;
}

.slide_left:hover {
  box-shadow: inset 0 0 0 50px #D80286;
}

.slide_diagonal:hover {
  box-shadow: inset 400px 50px 0 0 #D80286;
}

#outer {
  width: 364px;
  margin: 50px auto 0 auto;
  text-align: center;
}

/*Grid Start One */

.containgp {
display: grid;
grid-template-columns: minmax(120px, 200px) 1fr minmax(182px, 220px);
grid-template-rows: minmax(88px, 164px) auto minmax(220px, 1fr);
grid-column-gap: 12px;
grid-row-gap: 8px;
justify-items: center;
}

.div1 { grid-area: 1 / 1 / 2 / 2; }
.div2 { grid-area: 1 / 2 / 2 / 3; }
.div3 { grid-area: 1 / 3 / 2 / 4; }
.div4 { grid-area: 2 / 1 / 3 / 2; }
.div5 { grid-area: 2 / 2 / 3 / 3; }
.div6 { grid-area: 2 / 3 / 3 / 4; }
.div7 { grid-area: 3 / 1 / 4 / 2; }
.div8 { grid-area: 3 / 2 / 4 / 3; }
.div9 { grid-area: 3 / 3 / 4 / 4; }