/*Mobile AND PC*/ 

.cbutton{
  padding-right: 30px;
  position:absolute;
  right: 12px;
  top: 5px;
  border:none;
  height:20px;
  width:20px;
  border-radius:100%;
  outline:none;
  text-align:center;
  font-weight:bold;
  padding:2px;
}


.titletext {
	margin-top: 80px;
    margin-bottom: 10px;
    font-size: 18px;
    text-align: center;
}

.pogo-none {
	position: relative;
	display: block;
	width: 1.2em;
	height: 1.2em;
	margin-left: 3px;
	margin-right: 3px;
	margin-bottom: 5px;
	font-size: 5.5rem;
	font-size: calc(4.2rem + 5vmin);
	border-radius: .07em;
	border: 1px solid hsl(0deg 0% 30% / 36%);
	overflow: hidden;
}

.pogo {
	position: relative;
	display: block;
	width: 1.2em;
	height: 1.2em;
	margin-left: 3px;
	margin-right: 3px;
	margin-bottom: 5px;
	font-size: 5.5rem;
	font-size: calc(4.2rem + 5vmin);
	border-radius: .07em;
	border: 1px solid hsl(0deg 0% 30% / 36%);
    background-color: rgb(0 255 243 / 5%);
	overflow: hidden;
}

.pogolucky {
	position: relative;
	display: block;
	width: 1.2em;
	height: 1.2em;
	margin-left: 3px;
	margin-right: 3px;
	margin-bottom: 5px;
	font-size: 5.5rem;
	font-size: calc(4.2rem + 5vmin);
	border-radius: .07em;
	overflow: hidden;
	background: url(../assets/ui_bg_lucky_pokemon.png);	
	background-color: hsl(243deg 74% 89% / 5%);
    background-size: 1em;
	background-position: 5% 95%;
    background-repeat: no-repeat;
}

.pogo-none-lucky {
	position: relative;
	display: block;
	width: 1.2em;
	height: 1.2em;
	margin-left: 3px;
	margin-right: 3px;
	margin-bottom: 5px;
	font-size: 5.5rem;
	font-size: calc(4.2rem + 5vmin);
	border-radius: .07em;
	border: 1px solid hsl(0deg 0% 30% / 36%);
	overflow: hidden;
	background: url(../assets/ui_bg_lucky_pokemon.png);	
    background-size: 1em;
	background-position: 5% 95%;
    background-repeat: no-repeat;
	background-color: hsl(33deg 9% 76% / 5%);
}

.pogoluckyshiny {
	position: relative;
	display: block;
	width: 1.2em;
	height: 1.2em;
	margin-left: 3px;
	margin-right: 3px;
	margin-bottom: 5px;
	font-size: 5.5rem;
	font-size: calc(4.2rem + 5vmin);
	border-radius: .07em;
	overflow: hidden;
	background: url(../assets/ui_bg_lucky_pokemon.png);
    background-color: hsl(33deg 17% 71% / 5%);
    background-size: 1em;
	background-position: 5% 95%;
    background-repeat: no-repeat;
}

.pogo-none-luckyshiny {
	position: relative;
	display: block;
	width: 1.2em;
	height: 1.2em;
	margin-left: 3px;
	margin-right: 3px;
	margin-bottom: 5px;
	font-size: 5.5rem;
	font-size: calc(4.2rem + 5vmin);
	border-radius: .07em;
	border: 1px solid hsl(0deg 0% 30% / 36%);
	overflow: hidden;
	background: url(../assets/ui_bg_lucky_pokemon.png);
    background-size: 1em;
	background-position: 5% 95%;
    background-repeat: no-repeat;
	background-color: hsl(33deg 9% 76% / 5%);
}

.pogoshiny {
	position: relative;
	display: block;
	width: 1.2em;
	height: 1.2em;
	margin-left: 3px;
	margin-right: 3px;
	margin-bottom: 5px;
	font-size: 5.5rem;
	font-size: calc(4.2rem + 5vmin);
	border-radius: .07em;
	overflow: hidden;
	background-color: hsl(33deg 100% 81% / 5%);
}

.pogo-none-shiny {
	position: relative;
	display: block;
	width: 1.2em;
	height: 1.2em;
	margin-left: 3px;
	margin-right: 3px;
	margin-bottom: 5px;
	font-size: 5.5rem;
	font-size: calc(4.2rem + 5vmin);
	border-radius: .07em;
	border: 1px solid hsl(0deg 0% 30% / 36%);
	overflow: hidden;
}

.pogo::before {
	content: '';
	position: absolute;
	top: -1px;
	left: -1px;
	right: -1px;
	bottom: -1px;
	z-index: 5;
	border-radius: inherit;
	border: 4px solid;
	color: rgb(0 158 218);
	pointer-events: none
}

.pogolucky::before {
	content: '';
	position: absolute;
	top: -1px;
	left: -1px;
	right: -1px;
	bottom: -1px;
	z-index: 5;
	border-radius: inherit;
	border: 4px solid;
	color: rgb(225 100 35 / 97%);
	pointer-events: none
}

.pogoluckyshiny::before {
	content: '';
	position: absolute;
	top: -1px;
	left: -1px;
	right: -1px;
	bottom: -1px;
	z-index: 5;
	border-radius: inherit;
	border: 4px solid;
	color: rgb(225 100 35 / 97%);
	pointer-events: none
}

.pogoshiny::after,
.pogo-none-shiny::after,
.pogoluckyshiny::after,
.pogo-none-luckyshiny::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: url(../assets/ic_shiny.png);
	background-size: 0.4em;
	background-position: 5% 85%;
	background-repeat: no-repeat;
	z-index: 10;
	pointer-events: none;
}

.pogoshiny::before {
	content: '';
	position: absolute;
	top: -1px;
	left: -1px;
	right: -1px;
	bottom: -1px;
	z-index: 5;
	border-radius: inherit;
	border: 4px solid;
	color: rgb(145 28 183);
	pointer-events: none
}

.pogo-group {
	display: inline-flex;
	flex-wrap: wrap;
	-webkit-box-pack: center;
	justify-content: center;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 20px;
	font-size: 14px;
}

.pogo-img-box {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	overflow: hidden;
	border-radius: inherit;
	pointer-events: none;
	font-size: 1rem

}

.pogo-img {
	position: absolute;
	left: var(--l, 0%);
	top: var(--t, 0%);
	width: var(--w, 100%);
	height: var(--w, 100%);
}

.pogo-img+.pogo-img {
	opacity: 0;
	-webkit-transition: opacity .3s;
	transition: opacity .3s
}

.pogo-none:hover {
	cursor: pointer;
	background-color: rgb(116 173 230 / 29%)
}

.pogo:hover {
	cursor: pointer;
	background-color: rgb(116 173 230 / 29%)
}

.pogo:hover .pogo-img+.pogo-img {
	opacity: 1
}

.pogo-name {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 4;
	padding: .3em 8px 15px;
	text-align: left;
	border-radius: inherit;
	font-size: .9rem;
	line-height: 1;
}

.pogo-name-none {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 4;
	padding: .3em 8px 15px;
	text-align: left;
	border-radius: inherit;
	font-size: .9rem;
	line-height: 1;
} 

/*Mobile*/
@media screen and (max-width: 650px) {

.pogo-list {
    text-align: center;
    position: relative;
    margin-top: 20px;
    justify-content: center; 
    margin-left: 3px; 
	margin-right: 0px;
    z-index: 800;      
}
  
}

/*PC*/
@media screen and (min-width: 651px) {

.pogo-list {
    text-align: center;
    position: relative;
    margin-top: 20px;
    justify-content: center; 
    margin-left: auto; 
	margin-right: auto;
    z-index: 800;      
}
  
}