html{
    background: top center #fffce8 url(../img/bkg3.png) no-repeat;
    background-size: cover;
    
}


.banner{
    width: 100%;
    text-align: center;
    margin: auto;
}

.logo{
  width:50%;
    
}

.eventTitle{
  width:60%;
}


.pointChart{
    padding-bottom: 50%;
    margin-top: 5%;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.pointStamp{
    background-color: rgba(230,230,220,0.5);
    width: 23%;
    padding-bottom: 12%;
    margin: 1%;
    float: left;
    background-size: cover;
    border-radius: 2px 2px 12px 12px;
-moz-border-radius: 2px 2px 12px 12px;
-webkit-border-radius: 2px 2px 12px 12px;
    -webkit-box-shadow: 1px 1px 5px 1px rgba(132,156,127,1);
-moz-box-shadow: 1px 1px 5px 1px rgba(132,156,127,1);
box-shadow: 1px 1px 5px 1px rgba(132,156,127,1);
}

.D1{
    background-image: url(../img/logo/D1.png);
    
}

.D2{
    background-image: url(../img/logo/D2.png);
}

.G1{
    background-image: url(../img/logo/G1.png);
}

.G2{
    background-image: url(../img/logo/G2.png);
}

.G3{
    background-image: url(../img/logo/G3.png);
}

.G4{
    background-image: url(../img/logo/G4.png);
}


.G5{
    background-image: url(../img/logo/G5.png);
}

.G6{
    background-image: url(../img/logo/G6.png);
}

.G7{
    background-image: url(../img/logo/G7.png);
}

.G8{
    background-image: url(../img/logo/G8.png);
}


.G10{
    background-image: url(../img/logo/G10.png);
}

.G11{
    background-image: url(../img/logo/G11.png);
}
.pokemonGO{
    background:rgba(255,255,255,0.8) url(../img/done-01.png) no-repeat center;
}


@media (max-width: 497px){
     .banner{width: 100%;}
    .pointStamp{
           width: 48%;
    padding-bottom: 30%;
    margin: 1%; 
        background-size: contain;
    }
}

@media (min-width: 480px){
     .banner{width: 90%;}
     .pointStamp{
           width: 28%;
    padding-bottom: 18%;
    margin: 2%;
        background-size: contain;
    }
}


@media (min-width: 768px){
    
     .banner{width: 60%;}
         .pointStamp{
           width: 23%;
    padding-bottom: 15%;
    margin: 1%;
        background-size: contain;
    }
    }
    



@media (min-width: 960px){
    
    .banner{width: 70%;} 
    
    .pointStamp{
    width: 14%;
    padding-bottom: 10%;
    margin: 1%;
        background-size: contain;
        }
}


@media (min-width: 1200px){
    
   
    .banner{width: 30%;}
    
}