/* ---------- HEADER ---------- */
header {height:450px; background-image:url('../images/activities/activities-header-bg.jpg'); background-size:cover; background-position:center bottom;}



/* ---------- TITLE ---------- */
#title-wrapper {position:absolute; top:195px; left:0; right:0; max-width:943px; margin:0 auto; padding:0 40px; opacity:0; animation:title 1.5s ease-in-out 0.5s forwards; z-index:-2;} /*Adjust top at different breakpoints*/
#title {width:100%; padding-bottom:18.192%; background-image:url('../images/activities/local-activities-title.svg'); background-repeat:no-repeat; background-position:center top; background-size:contain;}
@keyframes title {
from {margin-top:100px; opacity:0; transform:rotate(20deg); filter:blur(3px); -webkit-filter:blur(3px);}
20% {transform:rotate(-4deg); margin-top:100px;}
40% {transform:rotate(2deg);}
60% {transform:rotate(-1deg);}
75% {transform:rotate(1deg);}
to {margin-top:0; opacity:1; transform:rotate(0deg); filter:blur(0px); -webkit-filter:blur(0px);}
}



/* ---------- CONTENT ---------- */
.wavy-line-break {display:block; margin:0; padding:0; opacity:0.3;}
#content {padding-bottom:90px; background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 80%);}
#testimonials-other {background-image:url('../images/accommodation/testimonials-bg.jpg');}



/* ---------- MASONRY GRID ---------- */
#activity-grid {max-width:1280px; margin:0 auto; padding:0 40px; font-size:16px;}
.grid {overflow: hidden; margin-top:60px; line-height:27px;}
.grid-sizer, .grid-item {width:23.5%; border-radius:6px;}
.grid-wrapper {padding:40px; border-radius:10px; box-shadow:0 12px 0px -5px rgba(66,100,133,0.2);}
.grid-item {color:#ffffff; text-align:left; margin-bottom:2%;}
.grid-item:last-of-type {margin-bottom:0%;}
.gutter-sizer {width:2%; }
.bigger {width:49%;}

#walking, #watersports, #biking, #climbing, #steamers, #horse-riding, #flying, #centres, #groups, #attractions, #food, #shops {display:none;}
#walking.show, #watersports.show, #biking.show, #climbing.show, #steamers.show, #horse-riding.show, #flying.show, #centres.show, #groups.show, #attractions.show, #food.show, #shops.show {display:block;}

#walking-item {background-color:#b2c894;}
#biking-item {background-color:#5d5236;}
#watersports-item {background-color:#89a8c6;}
#climbing-item {background-color:#676361;}
#steamers-item {background-color:#8d9b9b;}
#horse-riding-item {background-color:#6f5444;}
#flying-item {background-color:#6298c2;}
#attractions-item {background-color:#829277;}
#food-item {background-color:#412c1c;}
#shops-item {background-color:#99957f;}
#centres-item {background-color:#86b5d9;}
#groups-item {background-color:#628fbe;}

.activity-title {display: block; font-size: 20px; font-weight:700; margin-bottom:20px;}
.grid p {padding-bottom:27px;}
.distance {display:inline-block; font-size:13px; line-height:26px; font-weight:600; background-color:rgba(255,255,255,0.2); margin-left:10px; padding:0px 10px; border-radius:4px;}
.location {display:inline-block; padding-left:10px!important; opacity:0.6; font-size:14px;}
.telephone {display:inline-block; padding-left:10px!important; font-size:14px;}
.grid-wrapper li {list-style-image: url('../images/bullet-white-fade.svg'); list-style-position: inside; padding-bottom:10px;}
.grid-wrapper li:last-of-type {padding-bottom:27px;}
.grid-wrapper li span {padding-left:10px}
.grid-wrapper li a {display:inline-block;}
.grid p a:link, .grid p a:visited, .grid li a:link, .grid li a:visited {color:rgba(255,255,255,1); font-weight:600; /*border-bottom:1px solid rgba(255, 255, 255, 0.2);*/}
.grid p a:hover, .grid li a:hover {color:rgba(255,154,105,1); font-weight:600;}
.grid-link {display:inline-block; line-height:40px; font-weight:700; color:rgba(255,255,255,1); padding: 0px 20px; background-color: rgba(255, 255, 255, 0.25); border-radius: 6px; -webkit-transition: color 0.5s, background-color 0.5s; transition: color 0.5s, background-color 0.5s;}
.grid-link:hover {background-color:rgba(255,154,105,1);}

.grid-wrapper img {padding-bottom:27px;}
.grid img {display:block; border-radius:6px 6px 0 0;}
#walking-map {margin-bottom:27px; padding-bottom:0px; border-radius:6px;}



/* ---------- RESPONSIVE ---------- */
@media only screen and (max-width: 1200px){
header {height:400px;}
#title-wrapper {top:150px;}
#content {padding:70px 0 0 0;}
.wavy-light-reverse {background-image:url('../images/wavy-blue-reverse.svg');}
#please-note {padding:60px 0 90px 0;}
}

@media only screen and (max-width: 1024px){
.grid-sizer, .grid-item, .grid-item-two {width: 48%;}
.gutter-sizer { width: 4%; }
.grid-item {margin-bottom:4%; text-align:center;}
.grid-wrapper {padding:40px 30px;}
.grid-wrapper li {list-style:none; padding-bottom:20px;}
.grid-wrapper li span {padding-left:0px}
.grid-wrapper li a, .no-link {display:block;}
.location, .telephone {padding-left:0px!important;}
.distance {padding:0px 8px;}
.wavy-line-break {margin:0 auto;}
}

@media only screen and (max-width: 950px){
.grid {margin-top:50px;}
}

@media only screen and (max-width: 800px){
header {height:340px;}
#title-wrapper {top:130px;}
#content {padding:60px 0 0 0;}
}

@media only screen and (max-width: 700px){
header {height:290px;}
#title-wrapper {top:110px;}
#content {padding:50px 0 0 0;}
}

@media only screen and (max-width: 600px){
header {height:260px;}
#title-wrapper {top:100px;}
.grid {margin-top:40px;}
#activity-grid {padding:0 30px;}
}


@media only screen and (max-width: 500px){
header {height:280px;}
#title-wrapper {top:90px; padding:0 30px;}
#title {padding-bottom:30.25%; background-image:url('../images/activities/activities-title.svg');}
.grid {margin-top:10px;}
.grid-sizer, .grid-item {width: 100%; margin-bottom:30px;}
.grid-wrapper {padding:40px 20px;}
}


@media only screen and (max-width: 480px){
header {height:300px;}
#content {padding:30px 0 0 0;}
#please-note {margin:50px auto 0 auto; padding:50px 0 70px 0;}
}

@media only screen and (max-width: 450px){
header {height:260px;}
}

@media only screen and (max-width: 400px){
header {height:240px;}
}