/*-----------------------------*/
/* GENERAL                     */
/*-----------------------------*/
#itemPage {
  padding:90px 20px 20px 20px;
  background: rgba(0, 0, 0, 0) url("/static/images/backgrounds/cross-gray-bg.png") no-repeat scroll 0 0;
  min-height:100%
}
#itemPage__container {
  margin-top:20px;
}

.itemPage__subHeader {
  position:relative;
  margin-bottom:15px;
  clear:left;
}
.itemPage__subHeader h2 {
  font: 700 14px/11px poppins,arial,sans-serif;
  letter-spacing: 3px;
  display:inline-block;
}

.itemPage__subHeader h2:before {
  border-top: 1px solid var(--gray-500);
  content: "";
  position: absolute; /* positioning must be absolute here, and relative positioning must be applied to the parent */
  top: 50%;
  right: 0;
  bottom: 0;
  width: 100%;
  z-index: 0;
}

.itemPage__subHeader h2 span{
  position: relative;
  background: var(--white);
  padding-right: 15px;
  z-index: 2;
}

/*-----------------------------*/
/* HEADER                      */
/*-----------------------------*/
#itemPage__header {
  display: flex;
  flex-flow: row nowrap;
  justify-content:space-between;
  align-items:normal;
}
#itemPage__headerContent h1 {
  font: 600 37px poppins, lucida, arial, sans-serif;
  line-height: 1.1;
  display: inline;
}
#itemPage__headerContent h1.promoted {
  background: url(/static/images/icons/porticoFav-star.svg) no-repeat left 18px/20px 20px;
  padding-left: 30px;
}

#itemPage__userCaption {
  font: 12px poppins, lucida, arial, sans-serif;
  line-height: 1.5;
}
#itemPage__userCaption a {
  font: 12px poppins, lucida, arial, sans-serif;
  line-height: 1.5;
}
#itemPage__addItemButton {
  background: url(/static/images/buttons/white-cross.svg) no-repeat center center/12px var(--blue-200);
  box-shadow: 0 5px 25px var(--gray-overlay-100);
  margin-top: 7px;
  margin-bottom: 20px;
  border-radius: 100px;
  height: 30px;
  width: 30px;
  padding-top: 8.5px;
  position: relative;
  border: 0;
  outline: none;
}

/*-----------------------------*/
/* CONTENT                     */
/*-----------------------------*/
#itemPage__content {
  width:calc(100% - 420px);
  background-color:var(--white);
  min-height:calc(100vh - 430px);
  padding:20px;
  border: solid 2px var(--gray-100);
  position: relative;
  overflow: hidden;
}

#itemPage__info {
  padding:10px 0;
  min-height: 324px;
  margin-bottom: 20px;
}
#itemPage__subContent.withContent {
  display:flex;
  flex-flow: row;
}

#itemPage__info.withContent {
  display:flex;
  flex-flow:column;
}

#itemPage__placeInfo {
  margin-left:400px;
}

#itemPage__placeInfo.withContent {
  margin:0;
}

.itemPage__placeContent {
  font: 12px poppins, lucida, arial, sans-serif;
  line-height: 1.7;
  color: var(--gray-500);
}
.itemPage__placeContent-caption {
  width: 70px;
  color: var(--gray-200);
  display:inline-block;
}

.itemPage__description {
  font: 16px merriweather, palatino, serif;
  line-height: 1.5;
  color: var(--gray-500);
  margin-bottom:15px;
}

#itemPage__insiderTip {
  margin-bottom:15px;
}
#itemPage__insiderTip h3 {
  font: 600 14px poppins, lucida, arial, sans-serif;
  line-height: 1.57;
  color: var(--gray-500);
}
#itemPage__insiderTip p {
  font: 14px merriweather, palatino, serif;
  line-height: 1.57;
  color: var(--gray-500);
}
#itemPage__insiderAuthor {
  font: 12px poppins, lucida, arial, sans-serif;
  color: var(--gray-200);
}
#itemPage__insiderAuthor button {
  font: 12px poppins, lucida, arial, sans-serif;
  color: var(--blue-200);
  background-color:transparent;
  border:0;
  padding:0;
}
#itemPage__insiderAuthor button:hover {
  color: var(--blue-300);
}

#itemPage__map {
  width:380px;
  height:280px;
  float: left;
}

#itemPage__info.withContent #itemPage__map {
  height: 175px;
  width: 265px;
  margin-bottom: 15px;
}

#itemPage__tripExpert {
  padding:10px 10px 0 0;
}

.itemPage__placeOpen {
  color: var(--green-200);
  font-weight:600;
}
.itemPage__placeClosed {
  color: var(--red-200);
  font-weight:600;
}

.itemPage__image {
  float: left;
  margin: 6px;
  width: calc(30% - 2px);
  max-width: 100px;
}
.itemPage__image img {
  width: 100px;
  height: 100px;
}

/*-----------------------------*/
/* DETAILS (SIDEBAR)           */
/*-----------------------------*/
#itemPage__details {
  width:310px;
  background-color:var(--white);
  min-height:calc(100vh - 430px);
  padding:20px;
  border: solid 2px var(--gray-100);
  float: right;
}
.itemPage__porticoFavorite {
  font: 700 italic 16px merriweather, palatino, serif;
  color: var(--green-200);
  background: url(/static/images/icons/porticoFav-banner.svg) no-repeat left center/contain;
  height: 31px;
  display: block;
  padding-left: 35px;
  padding-top: 6px;
  margin: 10px 0;
}
.itemPage__detailNotes {
  margin: 10px 0;
}
.itemPage__detailNotes h4 {
  font: 600 14px poppins, lucida, arial, sans-serif;
}
.itemPage__detailNotes p {
  font: 14px merriweather, palatino, serif;
  margin-top:5px;
}
.itemPage__tags {
  display: flex;
  flex-flow: row;
  justify-content:left;
}
.itemPage__tagTitle {
  font: 15px poppins, lucida, arial, sans-serif;
  display: inline;
  margin-right: 10px;
  padding-top:6px;
}
.itemPage__tag {
  border-radius: 20px;
  border: 0;
  outline: 0;
  background-color: var(--gray-200);
  padding: 2px 12px;
  font: 600 12px poppins, lucida, arial, sans-serif;
  cursor: initial;
  margin: 0 5px 10px 0;
  display:inline-block;
}

@media only screen and (max-width: 1100px) {
  #itemPage__placeInfo {margin-left:0;}
  #itemPage__map {width:100%; height:165px; margin-bottom: 20px;}
}

/* adjusts map and address when screen gets smaller */
@media only screen and (max-width: 1100px) {
  #itemPage__map {width: 100%; margin-bottom: 20px}
  #itemPage__placeInfo {margin-bottom: 20px;}
}

/* moving review below map on small screens */
@media only screen and (max-width: 950px) {
  #itemPage__placeInfoSub.withReviews {width: calc(100%); max-width: initial; margin-left: 0;}
}

/* mobile portrait */
@media only screen and (max-width : 767px) and (orientation : portrait) {
  #itemPage {padding: 80px 15px 15px 15px;}
  #itemPage__header {height: initial; display: block;}
  #itemPage__headerContent {width: calc(100% - 40px); display: inline-block;}
  #itemPage__header-left {margin-bottom: 10px;}
  #itemPage__header h1 {font-size: 30px;}
  #itemPage__container {display: block;}
  #itemPage__titleBox {width: calc(100% - 75px); max-width: none; white-space: initial; text-overflow: initial;}
  #itemPage__porticoStar {height: 30px; vertical-align: top;}
  #itemPage__addItemButton {margin: 0; float: right;}
  .itemPage__section {padding: 15px; overflow: hidden;}
  #itemPage__iFrameSection {min-height: 480px;}
  #itemPage__content {width: calc(100% - 30px); margin-bottom: 15px; padding: 15px;}
  #itemPage__subContent {display: block;}
  #itemPage__info {display: block; min-height: initial;}
  #itemPage__placeSection {min-height: initial; margin-bottom: 30px;}
  #itemPage__details {max-width: initial; width: calc(100% - 35px); margin-bottom: 15px; padding: 15px; min-height: initial;}
}