@import "banner.css";
@import "col__right.css";
@import "footer.css";

@media screen and (max-width: 768px) {
  .col-left, .col-right {
      width: 100%;
      padding: 20px;
  }
}
@media screen and (max-width: 700px) {
  body {
      flex-direction: column;
  }
}

*, body {
margin: 0;
padding: 0;
font-family: baskerville-old-face;
box-sizing: border-box;
}


@font-face {
font-family: greatVibes;
src: url(../Font/GreatVibes-Regular.otf);
}


/****************** CONTENT *******************/
.content {
width: 100%;
height: auto;
background-color: #222222;
padding: 60px 100px;
}

.content-container {
display: flex;
}

/********************* *COL-LEFT *********************/

.content-container .col-left {
flex: 65%;
margin-right: 21px;
}

.place--readmore {
width: 100%;
height: 1225px;
margin-bottom: 45px;
transition: 0.4s;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.place--readmore:hover {
box-shadow: 0 0 1px 1px #BBA256;
}

.place--readmore .place--img {
width: 100%;
height: 28%;
}

.place--readmore .place--img img {
width: 100%;
height: 100%;
}

.place--readmore .place--detail {
height: 50%;
display: flex;
}

.place--detail .button--share--group {
flex: 10%;
}

.place--detail .place--info {
flex: 85%;
background-color: #363636;
height: 153%;
margin-top: -55px;
padding: 35px 20px 0px 60px;
}

.button--share--group {
background-color: #222222;
padding-top: 15px;
text-align: center;
}

.button--share--group p {
color: #BAA256;
margin-bottom: 15px;
}

.button--share--group li {
list-style: none;
margin-bottom: 5px;
}

.button--share--group a {
color: #BAA256;
}

p.date-released {
color: #BAA256;
margin-bottom: 10px;
}

.place--info p:nth-child(2) {
color: #fff;
font-size: 30px;
margin-bottom: 40px;
}

.place--info span {
border-bottom: 1.5px solid #BBA256;
padding-bottom: 7px;
}

.place--info .place--info__readmore {
color: #fff;
font-size: 17px;
margin-bottom: 25px;
}


.place--info .tags { color: #fff }

.place--info .tags--place {
color: #9F9C9A;
text-decoration: none;
}
/* buttom============ */
button.readmore-btn {
margin-left: 22%;
color: #BAA256;
width: 300px;
height: 60px;
background-color: #363636;
border: 1px solid #363636;
box-shadow: 0 0 0 2px #BAA256;
cursor: pointer;
font-size: 18px;
transition: 0.5s;
margin-top: 1px;
}
button.readmore-btn:hover {
color: #363636 ;
background-color:  #BBA256;
}

.pagination #base {
background: #BAA256;
display: inline-block;
height: 14px;
margin-left: 46px;
margin-top: 52px;
position: relative;
width: 16px;
top: 21px;
left: -77px;
}

.pagination .base--left { transform: rotate(-90deg); }

.pagination .base--right { transform: rotate(90deg); }

.pagination #base:before {
  border-bottom: 5px solid #BAA256;
  border-left: 8px solid transparent;
  border-right: 9px solid transparent;
  content: "";
  height: 0;
  left: -1px;
  position: absolute;
  top: -4px;
  width: 0;
}

.pagination #base i.fas.fa-chevron-up {
color: #fff;
font-size: 13px;
position: absolute;
top: 0px;
right: 2px;
}

.pagination  p {
color: #fff
}


.pagination {
width: 100%;
height: 5px;
position: relative;
}

.pagination .container {
position: absolute;
top: -80px;
right: -73px;
}

.othertours {
height: 383px;
margin-left: 111px;

}

.othertours hr {
height: 1px;
width: 20%;
margin-left: 40%;
background-color: #BBA256;
border: none;
}

.othertours--container {
display: flex;
justify-content: center;
margin-top: 25px;
}

.othertour {
height: 300px;
padding: 10px;
box-sizing: border-box;
flex: 33.3%;

}

.othertour:hover .othertour--detail,
.othertour:hover .othertour--img--container {
 box-shadow: 0 0 1px 1px #BBA256;
}

.othertour--detail {
background-color: #363636;
height: 80px;
padding: 10px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.4s;
}


.othertour--img--container {
height: 220px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.4s;
}


.othertour--img--container img {
width: 100%;
height: 100%;
}

.othertours h1 {
text-align: center;
color: #BBA256;
padding-bottom: 5px;
}

p.othertour--detail__time {
  color: #BBA256;
  font-size: 14px;
  margin-bottom: 5px;
}

p.othertour--detail__location {
  color: #fff;
}

/************************ END-COL-LEFT *************************/