body.body1{
  background: #FFE6E6;
  color: #3a3a3a;
}




















.btn-border-bottom {
  position: relative;
  display: inline-block;
  font-weight: bold;
  padding: 0.25em 0;
  text-decoration: none;
  color: #67c5ff;
}

.btn-border-bottom:before {
  position: absolute;
  content: '';
  width: 100%;
  height: 4px;
  top:100%;
  left: 0;
  border-radius: 3px;
  background:#67c5ff;
  transition: .2s;
}

.btn-border-bottom:hover:before {
  top: -webkit-calc(100% - 3px);
  top: calc(100% - 3px);
}










nav.nav1{
  position: fixed;
  z-index: 2;
  width: 100%;
  height: 3.75rem;
  padding: 0px;


  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height:8vh;
  background-color: #5D4954;
  font-family: 'Poppins',sans-serif;
}

.logo{
  color: rgb(226,226,226);
  text-transform:uppercase;
  letter-spacing: 5px;
  font-size: 20px;
}

.nav-links{
  display: flex;
  justify-content: space-around;
  width: 35%;
}
.nav-links li{
  list-style: none;
}

.nav-links a{
  color: rgb(226,226,226);
  text-decoration: none;
  letter-spacing: 3px;
  font-weight: bold;
  font-size: 13px;
}


.burger1{
  display:none;
  cursor:pointer;
}

.burger1 div{
  width: 25px;
  height:3px;
  background-color: rgb(226,226,226);
  margin:5px;
  transition: all 0.3s ease;
}


@media screen and (max-width:1024px){
    .nav-links{
      width:60%;
    }
  }


@media screen and (max-width:768px){
  body.body1{
    overflow-x:hidden;
    background: #FFE6E6;
    color: #3a3a3a;
  }


  div.col-style{
    padding: 170px 0px 150px 0px ;
    position: relative;
      width: 100%;
      padding-right: 5px;
      padding-left: 10px;
  }


h6.resp-text{
  font-size: 15px;
}
  .nav-links{
    position:absolute;
    right: 0px;
    height:93vh;
    top: 9vh;
    background-color: #5D4959;
    display: flex;
    flex-direction: column;
    align-items:center;
    width: 45%;
    transform: translateX(100%);
    transition: transform 0.5s ease-in;
  }
  .nav-links li{
    opacity: 0;
  }
  .burger1{
    display:block;
  }
  div.bg{
    height: 100vh;
  }
}

.nav-active{
  transform: translateX(0%);
}

@keyframes navLinkFade{
  from{
    opacity:0;
    transform: translateX(50px);
  }
  to{
    opacity:1;
    transform: translateX(0px);
  }
}

.toggle .line1{
  transform: rotate(-45deg) translate(-5px,6px);
}
.toggle .line2{
  opacity: 0;
}
.toggle .line3{
  transform: rotate(45deg) translate(-5px,-6px);
}





.text-card{
  background-color:#fff;
  box-shadow:0px 0px 2px rgba(0,0,0,0,15);
  border: .5px solid #d9d9d9 !important;
  border-radius:4px;
  padding:20px;
  margin-bottom:20px;
}

.text-card-heading{
  font-size:24px;
  font-size:1.5rem;
  color:#4d4d4d;
  font-weight: bold;
  margin-bottom:12px;
}


.container-about{
  position: relative;
  padding: 2px 6px;
  margin: 0px 8px;
}
.col-style-about{
  width: 100%;
  padding: 140px 30px;
}

.container {
  position: relative;
  padding: 2px 6px;
  margin: 0px 8px;
}







.container2 {
  position: relative;
  padding: 190px 0px 0px 0px;
}


a.declink{
  text-decoration: none;
   border-bottom: 3px white solid;
   padding-bottom: 2px;
}

div.bg{
  background-image: url("../img/beppu1.jpg");
  height: 90vh;
  width:auto;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 1;
}

.ic{
  background-image: url("../img/icon.gif");
  height: 24vh;
  width:58vh;
  padding: 0px 0px 0px 0px;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 1;
}


.bunkano-tabi-banner{
height: 100%;
width:100%;
padding: 0px 0px 0px 0px;
background-size: cover;
background-repeat: no-repeat;
z-index: 1;

}


.col-style{
  padding: 120px 0px 160px 0px ;
  position: relative;
    width: 100%;
    padding-right: 30px;
    padding-left: 30px;
}


.card-shadow{
  -webkit-box-shadow: 0px 0px 41px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 41px 0px rgba(0,0,0,0.75);
  box-shadow: 0px 0px 41px 0px rgba(0,0,0,0.75);
}

.cardbg{
background-image: url('../img/beppu002.jpg');
height: 100%;
width:auto;
background-size: cover;
background-repeat: no-repeat;
}

.cardtitle-pad{
  padding: 75px 0px 40px 0px
}


.cardtitle-pad2{
  padding: 50px 0px 0px 0px
}

a {
  color: #0074D9;
  font-size: 0.85rem;
  opacity: 0.75;
  linear-gradient: ease-in-out 0.6s;
}
a:hover {
  color: rgb(226,226,226) !important;
  text-decoration: none !important;
  linear-gradient: ease-in-out 0.6s !important;
  opacity: 1;
}

.container {
  width: 90%;
  max-width: 1280px;
  margin: 0px auto;
}

.logo {
  margin-top:10px;
  font-size: 1em;
  letter-spacing: 0.15rem;
}
.logo i {
  font-size: 1.2em;
  margin-right: 6px;
}

.dynamic-grid {
  position: relative;
  z-index: 1;
  -webkit-columns: 240px 3;
     -moz-columns: 240px 3;
          columns: 240px 3;
  -webkit-column-gap: 15px;
     -moz-column-gap: 15px;
          column-gap: 15px;
}
.dynamic-grid.container {
  padding-top: 4rem;
}

.grid-item {
  position: relative;
  display: inline-block;
  margin: 1rem;
  max-width: 100%;
  column-break-inside: avoid;
}
.grid-item .inner {
  padding: 1rem 1rem 1rem 1rem;
}

.content-box {
  border: 0px solid #e6e6e6;
  background-color: white;
  box-shadow: 0px -1px 2px rgba(58, 58, 58, 0.1), 1px 1px 2px rgba(58, 58, 58, 0.1);
}
.content-box:before {
  content: '';
  position: absolute;
  display: block;
  width: 100%;
  height: 4rem;
  left: 0px;
  top: 0px;
}

.content-box-thumb {
  display: block;
  max-width: 100%;
  height: auto;
}

.content-box-header {
  font-size: 1.3rem;
  margin: 0.75rem 0rem 0rem 0rem;
}


.content-box-header2 {
  font-size:24px;
  font-size:1.5rem;
  color:#4d4d4d;
  font-weight: bold;
  margin-bottom:12px;
  margin: 0.75rem 0rem 0rem 0rem;
}

.content-box-blurb {
  text-decoration: underline;
  font-size: 0.85rem;
  display: block;
  display: -webkit-box;
  margin: 0rem;
  max-width: 100%;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.readmore-link {
  display: block;
  margin: 5px 5px 0px 5px;
  text-align: right;
}












footer {
    background-color: rgba(4, 68, 101, 0.98);
    width: 100%;
    bottom: 0;
    font-weight: lighter;
    color: white;
}
.footerHeader{
    width:100%;
    padding:1em;
    background-color:rgba(21, 120, 153, 1);
    text-align:center;
    color:white;
}
footer h3{
    font-weight:lighter;
}
footer ul{
    padding-left:5px;
    list-style:none;
}
footer p{
    text-align : justify;
    font-size : 12px;
}
footer iframe {
    width:100%;
    position:relative;
    height:170px;
}
.sm{
    list-style:none;
    overflow:auto;
}
.sm li {
    display: inline;
    padding:5px;
    float:left;
}
.sm li a img {
    width:32px;
}