/* 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;
}
.fbiga {
	font-size: 1.26em;
}
.honhalf {
	font-size: 1.6em
}
.mid {
	margin: auto;
	text-align: center;
}
.midblk {
	margin: auto;
	display: block;
}
.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;
}

.girlsbox {
        
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
    }
.girlsbox>* {
        flex: 1 1 168px;
    }
	
.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}
.flex-container > div {
  width: 128px;
  margin: 10px;
  text-align: center;

}

.rightim {
float: right;	
}
.responsiveone {
	  width: 100%;
  height: auto;
}

.lefrtft {
	margin-left: 14px;
	margin-right: 14px;
}

.padftnlr {
	padding-left: 14px;
	padding-right: 14px;
}

.marglil {
	margin: 3px 4px;
}

.marftnlr {
	margin-left: 14px;
	margin-right: 14px;
}
.thumbsjam p img {
	margin-left: 6px;
	margin-right: 6px;
	margin-top: 4px;
}

.flef {
	float: left;
}

ul.circ {
	list-style-type: circle;
list-style-position: inside;
max-width: 440px;
}
/*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: 100%;
  margin: 50px auto 0 auto;
  text-align: center;
  max-width: 364px;
}


.subnavbox {
  width: 100%;
  margin: auto;
  text-align: center;
  max-width: 600px;
}

.buttontop {
  color: #FFF;
  border: 2px solid rgb(216, 2, 134);
  border-radius: 0px;
  padding: 8px 16px;
  display: inline;
  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;
}

/*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; }

/* grid start two */
.sidebar {
    grid-area: sidebar;
  }

  .sidebar2 {
    grid-area: sidebar2;
  }

  .content {
    grid-area: content;
  }

  .header {
    grid-area: header;
  }

  .footer {
    grid-area: footer;
  }

  .wrapper {
    background-color: #fff;
    color: #444;
  }

  .wrapitup {
    display: grid;
    grid-gap: .5em;
    grid-template-areas:
     "header"
     "sidebar"
     "content"
     "sidebar2"
     "footer"
  }

  @media only screen and (min-width: 500px)  {
  .wrapitup {

    grid-template-columns: 20% auto;
    grid-template-areas:
    "header   header"
    "sidebar  content"
    "sidebar2 sidebar2"
    "footer   footer";
  }
  	.button_slide {
  color: #FFF;
  border: 2px solid rgb(216, 2, 134);
  border-radius: 0px;
  padding: 8px 16px;
  font-size: 14px;
  letter-spacing: 1px;
      width: 6em;
    height: 5em;

}

p{
	max-width:360px;
  }

  @media only screen and (min-width: 600px)   {
    .wrapitup {
      grid-gap: 20px;
      grid-template-columns: 120px auto 120px;
      grid-template-areas:
      "header  header  header"
      "sidebar content content"
	  "sidebar2 sidebar2 sidebar2"
      "footer  footer  footer";
      max-width: 600px;
    }
	.button_slide {
  color: #FFF;
  border: 2px solid rgb(216, 2, 134);
  border-radius: 0px;
  padding: 8px 16px;
  font-size: 14px;
  letter-spacing: 1px;
      width: 7em;
    height: 5em;

}
  }
  
    @media only screen and (min-width: 1000px)  {
  .wrapitup {

    grid-template-columns: minmax(184px,238px) auto minmax(190px,210px);
    grid-template-areas:
    "header   header  header"
    "sidebar  content sidebar2"
    "footer   footer  footer";
	max-width: 1920px;
  }
    	.button_slide {
  color: #FFF;
  border: 2px solid rgb(216, 2, 134);
  border-radius: 0px;
  padding: 8px 16px;
  font-size: 16px;
  letter-spacing: 1px;
      width: 9em;
    height: 4em;

}

p{
	max-width:600px;
  }
  }

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 10px;
  font-size: 150%; 
}

.header,
 {
  background-color: #999;
}

.sidebar2 {

  color: #776c6c;
  border-left: 2px dashed gray;
  margin-left: 6px;
  padding-left: 4px;
}