@import "header.css";
@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-top : 10px;
  padding-left:  100px;
  padding-right:  100px;
  padding-bottom: 50px;
}

.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: 24%;
}

.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: 161%;
  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;
}

.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;
} 
.column {
  color: #fff;
  font-family: Futura PT;
  font-size: 17px;
  text-align: left;
  background-color: #363636;
  float: left;
  width: 43%;
}
.row:after {
  background-color: #363636;
  content: "";
  display: table;
  clear: both;
}
.column .text{
margin-top: 10%;
}
/************************ END-COL-LEFT *************************/