b {

      max-width: 100%
      background:transparent;
      margin-bottom:10px;
      border:2px solid transparent;
      transition:all ease-out .5s 0s;

      
    }
    b:nth-child(even){background:transparent;color:none;}
    .fade-ani{opacity:0;position:relative;}
    .fade-up{bottom:-50px;}
    .fade-down{top:-50px;}
    .fade-left{left:-50px;}
    .fade-right{right:-50px;}
    
    .fade-ani.showing{}
    .fade-in.showing{opacity:1;}
    .fade-up.showing{bottom:0px;opacity:1;}
    .fade-down.showing{top:-0px;opacity:1;}
    .fade-left.showing{left:-0px;opacity:1;}
    .fade-right.showing{right:-0px;opacity:1;}



button  {
  animation: wiggle 2.5s linear infinite;
  background:transparent;
  border: none;

}

/* Keyframes */
@keyframes wiggle {
  0%, 7% {
    transform: rotateZ(0);
  }
  15% {
    transform: rotateZ(-7deg);
  }
  20% {
    transform: rotateZ(5deg);
  }
  25% {
    transform: rotateZ(-4deg);
  }
  30% {
    transform: rotateZ(3deg);
  }
  35% {
    transform: rotateZ(-2deg);
  }
  40%, 70% {
    transform: rotateZ(0);
  }
}

img:hover {
    opacity: 0.8;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}

body {

  background: -webkit-linear-gradient(90deg, #16222A 10%, #3A6073 90%); /* Chrome 10+, Saf5.1+ */
  background:    -moz-linear-gradient(90deg, #16222A 10%, #3A6073 90%); /* FF3.6+ */
  background:     -ms-linear-gradient(90deg, #16222A 10%, #3A6073 90%); /* IE10 */
  background:      -o-linear-gradient(90deg, #16222A 10%, #3A6073 90%); /* Opera 11.10+ */
  background: #000000 no-repeat bottom center fixed;

        
}


.parent2 {
  top:0px;
  right:0px;
  position:absolute;
  display:block;
  width:54px;
  height:54px;
  background-color:transparent;
  border-radius:0%;
  z-index:100;

}
.parent3 {
  top:7px;
  left:7px;
  position:absolute;
  display:block;
  width:100%;
  height:70%;
  background-color:transparent;
  border-radius:100%;
  z-index:100;

}
.mask2 {
  top:0px;
  right:0px;
  width:52px;
  height:52px;
  background:transparent;
  display:block;
  border-radius:15%;
  position:absolute;
  background-color:transparent;
  z-index:21;
  color:white;
  text-align:center;
  padding-top: 8px;
  cursor:pointer;
  position:absolute;


}
.test1 {
   width:90%;
  height:90%;
  background-image: url("http://images.tokyopubcrawl.com/icons/contact-icon.png");
 background-position: center;
    background-repeat: no-repeat;
    background-size: 35px;
  border-radius:50%;
  position:absolute;
  color:white;
  text-align:center;
  line-height:40px;
  top:-75%;
  right:-75%;
  z-index:19;
  transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    position:absolute;
}
.test2 {
    width:90%;
  height:90%;
  background-image: url("http://images.tokyopubcrawl.com/icons/photos-icon.png");
 background-position: center;
    background-repeat: no-repeat;
    background-size: 35px;
  border-radius:50%;
  position:absolute;
  color:white;
  text-align:center;
  line-height:40px;
  top:-75%;
  right:-75%;
  transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550) .1s;
}
.test3 {
   width:90%;
  height:90%;
  background-image: url("http://images.tokyopubcrawl.com/icons/faq-icon.png");
 background-position: center;
    background-repeat: no-repeat;
    background-size: 40px;
  border-radius:50%;
  position:absolute;
  color:white;
  text-align:center;
  line-height:42px;
  top:-75%;
  right:-75%;
  transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550) .2s;  
}
  .test4 {
  width:90%;
  height:90%;
  background-image: url("http://images.tokyopubcrawl.com/icons/map-icon.png");
 background-position: center;
    background-repeat: no-repeat;
    background-size: 40px;
  border-radius:50%;
  position:absolute;
  color:white;
  text-align:center;
  line-height:42px;
  top:-75%;
  right:-75%;
  transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550) .3s;    
  }





a {
    font-family: "Catamaran", Trebuchet MS, Helvetica, sans-serif;
    font-size: .9em;
    color: #FFFFFF;

}
body {
    font: 400 18px/1.8 Lato, sans-serif;
    /* color: #333; */

}

.text-center {
    text-align: center;
    margin: auto;


}
.container {
    padding: 0px 0px;
    width: 900px;
    max-width: 95%;
   

}

    .container5 {
  padding: 0px 0px;
  max-width: 100%;
  margin: auto;
  margin-top: 21px;
  overflow-x:hidden;
  

}

.container2 {
  padding: 0px 0px;
  width: 950px;
  max-width: 100%;
  margin: auto;
  margin-top: 0px;
}

.container4 {
  padding: 5px 5px;
  width: 195px;
  max-width: 100%;
  margin: auto;
  margin-top: 0px;
  z-index: -9999;
}



  }
  .container6 {
  padding: 0px 0px;
  width: 1400px;
  max-width: 100%;
  margin: auto;
  margin-top: 0px;
  }

  .container7 {
  padding-top: 6px;
  width: 1900px;
  max-width: 100%;
  height:53px;
  border:0px;
  margin: auto;
  margin-top: 0px;
  margin-bottom:0px;
  top: 0;
    left: 0;
      background-color: rgba(0, 0, 0, 0);
    position: fixed;
    z-index: 1000;
  }

   .container8 {
  padding-top: 15px;
  margin: 0 auto;
 width: 430px;
 border:1px;
 border-style: none;
  float: left;
  padding-bottom:20px;
  max-width: 100%;
  }

  .yellow {
    color: #FDD00C;
    font-weight: bold;
 }

div.ex1 {
    height: 48px;
    background-color: transparent;
}


  .post2 {
  margin-bottom: 0px;
   padding: 0px 0px 0px 0px;
  background: rgba(0,0,0,1);

}
.nearest-day {
  font-size: 1.2em;
  font-family: "Carter One", Trebuchet MS, Helvetica;
  display: inline-block;
  margin: 0;
  color: white;

}

h1 {
  font-size: 2.1em;
  color: #FDD00C;
  text-transform: none;
  font-family:"Oswald";
  text-align: center;
  margin-bottom: 10px;
  text-shadow: 2px 2px #000000;
  text-transform: uppercase;
 font-weight:900;
}

h2 {
  font-size: 1.3em;
  color: #FDD00C;
  text-transform: none;
  font-family: "Oswald";
  text-align: center;
  margin-bottom: 10px;
  text-shadow: 2px 2px #000000;
  text-transform: uppercase;
  font-weight:900;
  }

  h3 {
  font-size: 1.2em;
  color: #FFFFFF;
  text-transform: none;
  font-family: "Oswald";
  text-align: center;
  margin-bottom: 5px;
  text-transform: uppercase;
  font-weight:600;
  }

h6 {
  font-size: .6em;
  color:  #FFFFFF;
  text-align: left;
  font-family: "helvetica"
 }


h5 {
  font-size: .8em;
  color:  #FFFFFF;
  text-align: center;
  font-family: "helvetica"

}

h4 {
  font-size: .8em;
  color:  #FFFFFF;
  text-align: left;
  font-family: 'Tiempos', 'YuMincho', '游明朝','ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', 'ＭＳ Ｐ明朝', 'MS PMincho', serif;
}

.thisweek {
  padding-top: 20px;
    padding-bottom: 0px;
    padding-right: 10px;
    margin-bottom:15px;
    padding-left: 10px;
    border-style: solid;
    border-width: 1px;
    border-radius: 5px;
    border-color: rgba(235, 238, 43, 0.70);

    max-width: 95%;
    width:380px;
    max-height: 95%;
    margin: 0 auto;
}



.thisweek2 {
  padding-top: 15px;
    padding-bottom: 15px;
    padding-right: 15px;
    padding-left: 15px;
    border-style: solid;
    border-width: 0px;
    border-radius: 0px;
    border-color: #131312;
    max-width: 90%;
    max-height: 90%;
    margin: 0 auto;
}

.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 17px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
    background-color: #3e8e41;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #10100D;
    min-width: 250px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1000;
}

.dropdown-content a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  
}

.dropdown a:hover {background-color: #f1f1f1}

.show {display:block;}

body, html {
    height: 100%;
    max-width: 100%;

}

.parallax {
    /* The image used */
    background-image: url("http://images.tokyopubcrawl.com/parralax/roppongi-bw1.jpg");

    /* Full height */
    width: 100%; 
    transform: translateZ(-3px) scale(1);


    /* Create the parallax scrolling effect */

    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    }

.parallax2 {
    /* The image used */
    background-image: url("http://images.tokyopubcrawl.com/parralax/parralax-group2.jpg");

    /* Full height */
    width: 100%; 
   

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;


}

.parallax3 {
    /* The image used */
    background-image: url("http://images.tokyopubcrawl.com/parralax/parralax-street-bw5.jpg");

    /* Set a specific height */
     width: 100%; 
     

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

}

.parallax4 {
    /* The image used */
    background-image: url("http://images.tokyopubcrawl.com/main/background-tpc3.jpg");

    /* Set a specific height */
     width: 100%; 
   

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Turn off parallax scrolling for tablets and phones. Increase the pixels if needed */
@media only screen and (max-device-width: 1024px) {
    .parallax {
            background-attachment: scroll;

    }


/* Turn off parallax scrolling for tablets and phones. Increase the pixels if needed */
@media only screen and (max-device-width: 1024px) {
    .parallax2 {
        background-attachment: scroll;
    }

    /* Turn off parallax scrolling for tablets and phones. Increase the pixels if needed */
@media only screen and (max-device-width: 1024px) {
    .parallax3 {
        background-attachment: scroll;
    }  


    /* Turn off parallax scrolling for tablets and phones. Increase the pixels if needed */
@media only screen and (max-device-width: 1024px) {
    .parallax4 {
        background-attachment: scroll;
    }