#tour-info-header { background-color: #FFFFFF; box-shadow: 0px 0px 8px 0px #00000029; /*position: fixed;*/ width: 100%; z-index: 100; } #tour-info-header img { width: 25px; margin-right: 20px; } #tour-info-header strong { margin-right: 10px; } #tour-info-header a, #tour-audio a { text-decoration: underline; color: #007470; weight: lighter; } #tour-audio a { font-size: 18px; font-weight: lighter; display: block; padding: 16px 0px 8px; } #tour-info-header .inner { padding-top: 35px; padding-bottom: 35px; } #tour-info-header ul { width: 100%; display: flex; flex-wrap: wrap; } #tour-info-header li { list-style: none; padding: 10px; width: 50%; display: flex; align-items: center; } #tour-info-header .row, #tour-copy .row, #photos .row, .modal-content .row { width: 100%; display: flex; } #tour-copy .row { position: relative; font-size: 0; } #tour-copy .row > div { font-size: 15px; } #tour-audio > h3.about { font-size: 23.4px; padding: 0 20px 8px; } .column-20 { width: 20%; } .column-25 { width: 25%; } .column-33 { width: calc(100% / 3); } .column-50 { width: 50%; } .column-60 { width: 60%; } .column-70 { width: 70%; } .column-30 { width: 30%; } .column-40 { width: 40%; } .box-outline { border: 2px solid #00853D; border-radius: 6px; opacity: 1; text-align: center; padding: 30px 0; } .tour-buy-cta { width: 100%; text-align: center; } .tour-buy-cta img { width: 25%; } #tour-info-header .box-outline a { text-decoration: none; color: white; } .box-inner { } #tour-discovery-image { /*padding-top: 345px;*/ } .discovery-image { height: 500px; width: 100%; background-size: cover; background-repeat: no-repeat; background-position: center; z-index: 100; } #tour-copy, #photos, #geotag-map { padding-top: 20px; } #geotag-map { padding-bottom: 20px; } #tour-copy h2, #photos h2, #geotag-map h2 { font-size: 24px; font-weight: normal; color: #007470; margin-bottom: 20px; margin-top: 20px; } #tour-copy .column-60 { font-size: 15px; line-height: 2em; } #tour-audio { height: 300px; position: sticky; top: 300px; right: 0; padding-left: 30px; } #tour-audio h1 { font-size: 24px; font-weight: normal; text-align: left; color: #007f7b; margin-bottom: 0; } #tour-audio audio { width: 100%; } #get-the-app { padding-top:20px; margin-top: 20px; border-top: 2px solid #00000029; } #get-the-app h1 { color: #00853D; font-weight: 600; } #get-the-app p { margin-top: 10px; margin-bottom: 10px; } #get-the-app .column-20 img { width: 100%; } #get-the-app .column-60 { text-align: center; } #get-the-app .column-60 img { width: 50%; } #main-image { height: 100%; width: 100%; padding-right: 10px; background-position: center; background-size: contain; background-repeat: no-repeat; } .photo-picker .column-60 { height: 400px; margin-right: 10px; } .photo-grid { height: 400px; display: grid; grid-gap: 10px; grid-template-columns: repeat(2, calc(100% / 2)); z-index: 1; position: relative; } .photo-grid .image { background-position: center; background-size: cover; cursor: pointer; opacity: 0.5; } .photo-grid .image.selected { opacity: 1; } .photo-grid .image.selected:hover { opacity: 1; } .photo-grid .image:hover { opacity: 0.7; } .modal-buy { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0, 0.5); opacity: 0; visibility: hidden; transform: scale(1.1); transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s; z-index: 1000; } .modal-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; padding: 20px; width: 1200px; border-radius: 0.5rem; } .close-button { float: right; width: 1.5rem; line-height: 1.5rem; text-align: center; cursor: pointer; border-radius: 0.25rem; background-color: lightgray; } .close-button:hover { background-color: darkgray; } .show-modal { opacity: 1; visibility: visible; transform: scale(1.0); transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s; } .purchase-btn { display: inline-block; border-radius: 8px; padding-top: 20px; padding-bottom: 20px; margin-left: 10px; margin-right: 10px; font-size: 15px; box-sizing: border-box; max-width: 100%; height: 110px; text-align: center; background-color: #00853d; color: white; } .purchase-btn a:visted{ color: white; } .best-value { position:absolute; background: url('/img/flag_bestvalue.png'); top: 254px; left: 10px; height:40px; width: 143px; background-repeat: no-repeat; background-position: center; background-size: contain; } /* Mobile css */ @media screen and (max-width: 900px) { .inner { padding: 0; } .column-20, .column-25, .column-33, .column-30, .column-40, .column-50, .column-60, .column-70 { width: 100%; display:inline-block; } #tour-info-header .row, #tour-copy .row, #photos .row, .modal-content .row { display: inline-block; } #tour-info-header { position: relative; padding: 20px; z-index: 0; } #tour-info-header .inner { padding:0; } #tour-info-header ul { display: block; margin-bottom: 10px; } #tour-info-header li { width: 100%; padding: 5px; } #tour-info-header img { width: 15px; margin-right: 10px; } #tour-discovery-image { padding: 0; } .discovery-image { height: 195px; background-size: contain; } #tour-copy { padding-left: 20px; padding-right: 20px; } #tour-audio { position: initial; padding-left: 0; margin-bottom: 25px; } #get-the-app h1 { font-size: 32px; } #get-the-app p { font-weight: bolder; } #get-the-app img { width: 70%; } #photos, #geotag-map { padding: 20px; } .photo-picker .column-60 { margin-right: 0; } .photo-grid { grid-gap: 5px; } #main-image { padding-right: 0px; } }