Large diffs are not rendered by default.

@@ -33,24 +33,24 @@ <h4>Story & Photography // Andy Mann</h4>
</div>
</div>

<div class="cd-fixed-bg cd-bg-1">
<div class="cd-scrolling-bg cd-bg-1">
<div class="metaWrap">
<div class="metaInfo">
<h3>Vikki Weldon enjoys the moderate but airy “dessert finish” to the mega classic Square Meal (5.11) at Millbrook</h3>
</div>
</div>
</div>

<div class="cd-scrolling-bg cd-color-2">
<div class="cd-scrolling-bg text cd-color-2">
<div class="cd-container">
<p>Just 300 yards from where I was about to talk Koots out of going for the lead sits the prominent High Exposure buttress. In 1941, Gunks pioneers Hans Kraus and Fritz Weissner quested up into the imposing and foreboding tiered roof systems that cap the buttress, hoping to find a reasonable passage. In doing so, they established the world famous High Exposure (5.6). </p>
</div>
</div>

<div class="cd-fixed-bg cd-bg-2">
<div class="cd-scrolling-bg cd-bg-2">
</div>

<div class="cd-scrolling-bg cd-color-2">
<div class="cd-scrolling-bg text cd-color-2">
<div class="cd-container">
<p>Though Gunks climbing officially began six years earlier, in 1935, with Fritz’s establishment of Old Route (5.5) on the turreted cliffs of Millbrook, the establishment of High E, as it’s known, cemented the two pioneers and their playground with a reputation for boldness. Even today, sitting under the steep final pitch, modern climbers marvel at how something so “out there” can hold a relatively moderate grade.</p>
</div>
@@ -65,35 +65,35 @@ <h3>Climbing in the Gunks is rarely straightforward. Unlike Yosemite or Indian C
</div>
</div>

<div class="cd-scrolling-bg cd-color-2">
<div class="cd-scrolling-bg text cd-color-2">
<div class="cd-container">
<p>In the years following, scores of impressive lines were established. The Gunks quickly became a hub for international visitors, new routes and groundbreaking ideas (such as the advent of “clean climbing”, which protected the rock from piton scars). Decades later, by the late 1980s, activity had slowed dramatically as the canvas for new routes began to dry up. Climbers started visiting newer areas like the New River Gorge and the Red River Gorge, and the Gunks receded into a museum of treasured old routes.</p>
</div>
</div>

<div class="cd-fixed-bg cd-bg-4">
<div class="cd-scrolling-bg cd-bg-4">
<div class="metaWrap">
<div class="metaInfo">
<h3>A typical Gunks rack consists of one cam of every size, up to a number three. Every Gunkie has a trusted favorite that has held a wild fall or just represents good luck.</h3>
</div>
</div>
</div>

<div class="cd-fixed-bg cd-bg-5">
<div class="cd-scrolling-bg cd-bg-5">
<div class="metaWrap">
<div class="metaInfo">
<h3>Vikki Weldon samples the exciting Erect Direction (5.10c), one of the Gunks’ best. In the 80s, local climber Don Perry attempted a free solo. He made it through the crab crawl crux only to balk at the massive roofs guarding the summit. Hollering until he was likely hoarse, someone finally dropped him a rope and he made it off safely. Shortly thereafter he found Jesus and can be seen to this day climbing in Lycra and passing out cards warning about the dangers of fluoride in drinking water.</h3>
</div>
</div>
</div>

<div class="cd-scrolling-bg cd-color-2">
<div class="cd-scrolling-bg text cd-color-2">
<div class="cd-container">
<p>For those who stuck around, the only new terrain available was on the scores of boulders in the talus fields below the cliffs. As the year 2000 loomed, bouldering activity took off like a rocket. In fact, bouldering is what originally drew me to the area, and as a young climber I was eager to leave my mark. Getting swept up in the energy of the time, my friends and I began pushing the limits on harder and higher boulder problems. Entire areas were established, like the Waterworks, and enough classics were established to fill several guidebooks.</p>
</div>
</div>

<div class="cd-fixed-bg cd-bg-6">
<div class="cd-scrolling-bg cd-bg-6">
<div class="metaWrap">
<div class="metaInfo">
<h3>Revisiting Deconstructing Towers (V9). An old top-rope project smack dab in the middle of the popular Nears bouldering zone, this highball yielded to a sea of pads and some faith in friction.</h3>
@@ -109,10 +109,10 @@ <h3>Revisiting Deconstructing Towers (V9). An old top-rope project smack dab in
</div>
</div>

<div class="cd-fixed-bg cd-bg-7">
<div class="cd-scrolling-bg cd-bg-7">
</div>

<div class="cd-scrolling-bg cd-color-9">
<div class="cd-scrolling-bg text cd-color-9">
<div class="cd-container centered">
<a class="topCTA" href="#toTop">Back to top</a>

This file was deleted.

This file was deleted.

@@ -161,6 +161,140 @@ Main components
z-index: index($main-elements, main-content); // see partials > _variables.scss
}

.cd-bg-1 {
background-image: url('../img/bg1.jpg');
background-position: right center;
background-size: cover;
@media screen and (min-width: $imgbp) {
background-image: url('../img/bg1.jpg');
}
}

.cd-bg-2 {
background-image: url('../img/bg2.jpg');
background-size: cover;
@media screen and (min-width: $imgbp) {
background-image: url('../img/bg2.jpg');
}
}

.cd-bg-4 {
background-image: url('../img/bg4.jpg');
background-size: cover;
@media screen and (min-width: $imgbp) {
background-image: url('../img/bg4.jpg');
}
}

.cd-bg-5 {
background-image: url('../img/bg5.jpg');
background-size: cover;
@media screen and (min-width: $imgbp) {
background-image: url('../img/bg5.jpg');
}
}

.cd-bg-6 {
background-image: url('../img/bg6.jpg');
background-size: cover;
@media screen and (min-width: $imgbp) {
background-image: url('../img/bg6.jpg');
}
}

.cd-bg-7 {
background-image: url('../img/bg7.jpg');
background-size: cover;
@media screen and (min-width: $imgbp) {
background-image: url('../img/bg7.jpg');
}
}

.cd-bg-8 {
background-image: url('');
background-size: cover;
@media screen and (min-width: $imgbp) {
background-image: url('');
}
}

.cd-bg-9 {
background-image: url('');
@media screen and (min-width: $imgbp) {
background-image: url('');
}
}

.cd-bg-10 {
background-image: url('');
@media screen and (min-width: $imgbp) {
background-image: url('');
}
}

.metaWrap {
position: absolute;
bottom: 1%;
left: 4%;
width: 50px;
height: 80px;
background: url('../img/camera-icon.png') no-repeat;
background-size: 40px;
cursor: pointer;

svg {
width: 20px;
height: 20px;
}

.land {
fill: #fff;
width: 50px;
height: 50px;
}

.metaInfo {
position: absolute;
display:block;
width: auto;
min-width: 375px;
max-width: 450px;
height: auto;
background: #ccc;
margin-top: -310px;
box-sizing: border-box;
padding: 15px;
opacity: .85;
min-height: 50px;
bottom: 90px;
left: -550px;
transition: all 1s;
font-style: italic;

h3 {
font-size: 16px !important;
font-weight: 500 !important;
line-height: 24px !important;
color: #000 !important;
font-style: normal;
text-align: left;
}
}

.metaInfo:after {
position: absolute;
width: 15px;
height: 15px;
color: teal;
content: '';
}
}

.showHide {
left: 0px !important;
transition: left 1s;
}

.cd-fixed-bg {
position: relative;
min-height: 100%;
@@ -197,72 +331,6 @@ Main components
line-height: 1.3em;
}

&.cd-bg-1 {
background-image: url('../img/bg1.jpg');
background-position: right center;
@media screen and (min-width: $imgbp) {
background-image: url('../img/bg1.jpg');
}
}

&.cd-bg-2 {
background-image: url('../img/bg2.jpg');
@media screen and (min-width: $imgbp) {
background-image: url('../img/bg2.jpg');
}
}

&.cd-bg-4 {
background-image: url('../img/bg4.jpg');
@media screen and (min-width: $imgbp) {
background-image: url('../img/bg4.jpg');
}
}

&.cd-bg-5 {
background-image: url('../img/bg5.jpg');
@media screen and (min-width: $imgbp) {
background-image: url('../img/bg5.jpg');
}
}

&.cd-bg-6 {
background-image: url('../img/bg6.jpg');
@media screen and (min-width: $imgbp) {
background-image: url('../img/bg6.jpg');
}
}

&.cd-bg-7 {
background-image: url('../img/bg7.jpg');
@media screen and (min-width: $imgbp) {
background-image: url('../img/bg7.jpg');
}
}

&.cd-bg-8 {
background-image: url('');
@media screen and (min-width: $imgbp) {
background-image: url('');
}
}

&.cd-bg-9 {
background-image: url('');
@media screen and (min-width: $imgbp) {
background-image: url('');
}
}

&.cd-bg-10 {
background-image: url('');
@media screen and (min-width: $imgbp) {
background-image: url('');
}
}



.withBG {
left: 5% !important;
width: 40%;
@@ -285,66 +353,9 @@ Main components
}
}

.showHide {
left: 0px !important;
transition: left 1s;
}

.metaWrap {
position: absolute;
bottom: 1%;
left: 3%;
width: 50px;
height: 80px;
background: url('../img/camera-icon.png') no-repeat;
background-size: 40px;
cursor: pointer;

svg {
width: 20px;
height: 20px;
}

.land {
fill: #fff;
width: 50px;
height: 50px;
}

.metaInfo {
position: absolute;
display:block;
width: auto;
min-width: 375px;
max-width: 450px;
height: auto;
background: #ccc;
margin-top: -310px;
box-sizing: border-box;
padding: 15px;
opacity: .85;
min-height: 50px;
bottom: 90px;
left: -550px;
transition: all 1s;
font-style: italic;

h3 {
font-size: 14px;
font-weight: 900;
line-height: 17px;
color: #000 !important;
}
}

.metaInfo:after {
position: absolute;
width: 15px;
height: 15px;
color: teal;
content: '';
}
}

@include MQ(M) {
h1, h2 {
@@ -362,6 +373,11 @@ Main components
}
}

.text {
height: auto !important;
min-height: 0 !important;
}

.topCTA {
font-family: Avenir, sans-serif;
font-weight: 900;
@@ -442,20 +458,25 @@ Main components
}

.cd-scrolling-bg {
position: relative;
// min-height: 100%;
padding: 3em 0 !important;
line-height: 1.6;
box-shadow: 0 0 20px rgba(#000, .5);
z-index: index($bg-elements, scrolling-bg); // see partials > _variables.scss
position: relative;
font-size: 1.25rem;
line-height: 2;
font-weight: 300;
box-sizing: border-box;
width: 92%;
height: auto;
margin: 0 4%;
min-height: 100%;
margin-bottom: 4%;


&.cd-color-1 {
background-color: #bbb;
color: lighten($color-1, 40%);
}

&.cd-color-2 {
background-color: #eee !important;
background-color: #fff !important;
color: black !important;
// background: url('../img/mapBW.jpg') no-repeat;
}
@@ -495,15 +516,15 @@ Main components
}

h3 {
font-family: 'Bangers', cursive;
// font-family: 'Bangers', cursive;
position: absolute;
left: 7%;
bottom: 50%;
width: 35%;
color: #ddd;
text-align: right;
line-height: 0.9em;
font-size: 3em;
font-size: 1em;
box-sizing: border-box;
padding: 30px;
background: #ddd;
@@ -569,7 +590,7 @@ Main components
}

@include MQ(M) {
padding: 6em 0;
padding: 2em 0;
@include font-size(20px);
line-height: 2;
font-weight: 300;
@@ -591,7 +612,7 @@ Main components
color: white;
text-align: center;
font-weight: 900;
font-size: 1.3em !important;
font-size: 1.3em;
font-style: italic;
margin-bottom: 30px;
background: none !important;
@@ -612,6 +633,7 @@ Main components
}
}


.intro {
padding: 0 0 !important;
}
@@ -289,16 +289,26 @@ p {
float: none !important;
margin-top: 0 !important;
}
/* line 273, ../scss/style2.scss */
.contestWrap .contentWrap .wbLogo {
width: 120px;
height: 60px;
background: url("../img/wbLogo.png") no-repeat;
background-size: 105px;
position: absolute;
bottom: 0px;
right: 40px;
}

/* line 275, ../scss/style2.scss */
/* line 285, ../scss/style2.scss */
.finePrint {
text-align: center;
font-size: 11px;
margin-top: 50px;
color: #ddd;
}

/* line 282, ../scss/style2.scss */
/* line 292, ../scss/style2.scss */
.manleyWrap {
background: url("../img/heroSm.jpg") no-repeat;
background-size: cover;
@@ -308,21 +318,21 @@ p {
display: inline-block;
}
@media screen and (max-width: 929px) {
/* line 282, ../scss/style2.scss */
/* line 292, ../scss/style2.scss */
.manleyWrap {
width: 100%;
margin-top: 30px;
}
}
@media screen and (max-width: 575px) {
/* line 282, ../scss/style2.scss */
/* line 292, ../scss/style2.scss */
.manleyWrap {
height: auto;
background-size: auto 400px;
background-position: right top;
}
}
/* line 302, ../scss/style2.scss */
/* line 312, ../scss/style2.scss */
.manleyWrap .contentWrap {
width: 40%;
min-width: 300px;
@@ -335,14 +345,14 @@ p {
text-align: right;
}
@media screen and (max-width: 575px) {
/* line 302, ../scss/style2.scss */
/* line 312, ../scss/style2.scss */
.manleyWrap .contentWrap {
width: 100%;
margin-top: 400px;
text-align: left;
}
}
/* line 319, ../scss/style2.scss */
/* line 329, ../scss/style2.scss */
.manleyWrap .contentWrap h1 {
font-size: 18px;
font-weight: 900;
@@ -352,25 +362,25 @@ p {
padding-left: 50px;
box-sizing: border-box;
}
/* line 329, ../scss/style2.scss */
/* line 339, ../scss/style2.scss */
.manleyWrap .contentWrap p {
font-size: 14px;
margin-bottom: 20px;
}
/* line 335, ../scss/style2.scss */
/* line 345, ../scss/style2.scss */
.manleyWrap .contentWrap a {
float: right;
font-size: 13px;
padding: 5px 12px 4px 12px;
border: 1px solid white;
text-transform: uppercase;
}
/* line 346, ../scss/style2.scss */
/* line 356, ../scss/style2.scss */
.manleyWrap .contentWrap .buttonWrap {
text-decoration: none;
}

/* line 352, ../scss/style2.scss */
/* line 362, ../scss/style2.scss */
#overlay {
display: none;
position: fixed;
@@ -385,7 +395,7 @@ p {
color: #333;
transition: all 1s ease 1s;
}
/* line 368, ../scss/style2.scss */
/* line 378, ../scss/style2.scss */
#overlay iframe {
position: fixed;
width: 100%;
@@ -398,12 +408,12 @@ p {
overflow: scroll;
}

/* line 381, ../scss/style2.scss */
/* line 391, ../scss/style2.scss */
#overlay p {
color: #666;
}

/* line 385, ../scss/style2.scss */
/* line 395, ../scss/style2.scss */
#fade {
display: none;
position: absolute;
@@ -418,7 +428,7 @@ p {
z-index: 90;
}

/* line 399, ../scss/style2.scss */
/* line 409, ../scss/style2.scss */
#closeLink {
position: fixed;
background: #000;
@@ -431,13 +441,13 @@ p {
font-weight: 900;
}

/* line 412, ../scss/style2.scss */
/* line 422, ../scss/style2.scss */
#closeLink a {
color: #ff0000 !important;
text-decoration: none;
}

/* line 417, ../scss/style2.scss */
/* line 427, ../scss/style2.scss */
.nffWrap {
background: url("../img/newforfallheroSm.jpg") no-repeat;
background-size: cover;
@@ -447,12 +457,12 @@ p {
opacity: 1;
margin-top: 60px;
}
/* line 426, ../scss/style2.scss */
/* line 436, ../scss/style2.scss */
.nffWrap .contentGrid {
width: 100%;
text-align: center;
}
/* line 430, ../scss/style2.scss */
/* line 440, ../scss/style2.scss */
.nffWrap .contentGrid a {
margin-top: 120px;
margin-bottom: 30px;
@@ -463,7 +473,7 @@ p {
padding: 8px 15px 7px 15px;
display: inline-block;
}
/* line 441, ../scss/style2.scss */
/* line 451, ../scss/style2.scss */
.nffWrap .contentGrid h1 {
font-size: 14px;
line-height: 13px;
@@ -169,17 +169,27 @@ p {
text-transform: uppercase;
}
/* line 155, ../scss/styleContest.scss */
.contentWrap .wbLogoWrap {
width: 120px;
height: 60px;
background: url("../img/wbLogo.png") no-repeat;
background-size: 105px;
position: absolute;
top: 300px;
right: 100px;
}
/* line 166, ../scss/styleContest.scss */
.contentWrap .howtoenter {
margin-top: 30px;
margin-bottom: 30px;
}
/* line 158, ../scss/styleContest.scss */
/* line 169, ../scss/styleContest.scss */
.contentWrap .howtoenter ul {
list-style: none;
margin-left: -15px;
vertical-align: top;
}
/* line 163, ../scss/styleContest.scss */
/* line 174, ../scss/styleContest.scss */
.contentWrap .howtoenter ul li {
vertical-align: top;
font-weight: 500;
@@ -191,26 +201,26 @@ p {
margin-right: 50px;
}
@media screen and (max-width: 700px) {
/* line 163, ../scss/styleContest.scss */
/* line 174, ../scss/styleContest.scss */
.contentWrap .howtoenter ul li {
width: 80%;
}
}
/* line 183, ../scss/styleContest.scss */
/* line 194, ../scss/styleContest.scss */
.contentWrap .bolder {
font-weight: 900;
text-transform: uppercase;
}
/* line 188, ../scss/styleContest.scss */
/* line 199, ../scss/styleContest.scss */
.contentWrap .stepStyle {
text-transform: uppercase;
color: #aaa;
}
/* line 193, ../scss/styleContest.scss */
/* line 204, ../scss/styleContest.scss */
.contentWrap .rowWrap {
width: 100%;
}
/* line 197, ../scss/styleContest.scss */
/* line 208, ../scss/styleContest.scss */
.contentWrap .socialLogos {
width: 30%;
height: 40px;
@@ -219,58 +229,58 @@ p {
margin-top: 50px;
}
@media screen and (max-width: 700px) {
/* line 197, ../scss/styleContest.scss */
/* line 208, ../scss/styleContest.scss */
.contentWrap .socialLogos {
width: 100%;
margin-top: 10px;
}
}
/* line 209, ../scss/styleContest.scss */
/* line 220, ../scss/styleContest.scss */
.contentWrap .socialLogos a {
width: 80px;
height: 80px;
display: inline-block;
margin-right: 15px;
margin-top: -10px;
}
/* line 216, ../scss/styleContest.scss */
/* line 227, ../scss/styleContest.scss */
.contentWrap .socialLogos a img {
width: 70px;
height: 70px;
}
/* line 227, ../scss/styleContest.scss */
/* line 238, ../scss/styleContest.scss */
.contentWrap .storeInfo {
width: 65%;
display: inline-block;
margin: 45px 0;
}
/* line 231, ../scss/styleContest.scss */
/* line 242, ../scss/styleContest.scss */
.contentWrap .storeInfo h3, .contentWrap .storeInfo a {
line-height: 0.8em;
}
@media screen and (max-width: 700px) {
/* line 231, ../scss/styleContest.scss */
/* line 242, ../scss/styleContest.scss */
.contentWrap .storeInfo h3, .contentWrap .storeInfo a {
line-height: 1em;
}
}
/* line 241, ../scss/styleContest.scss */
/* line 252, ../scss/styleContest.scss */
.contentWrap .finePrint {
margin: 60px 0px;
}
/* line 243, ../scss/styleContest.scss */
/* line 254, ../scss/styleContest.scss */
.contentWrap .finePrint p {
font-size: 10px;
line-height: 1.6em;
text-align: center;
}

/* line 252, ../scss/styleContest.scss */
/* line 263, ../scss/styleContest.scss */
.prizing li {
font-size: 15px !important;
}

/* line 258, ../scss/styleContest.scss */
/* line 269, ../scss/styleContest.scss */
.nffWrap {
background: url("../img/newforfallheroSm.jpg") no-repeat;
background-color: rgba(255, 255, 255, 0.5);
@@ -280,13 +290,13 @@ p {
height: 500px;
opacity: 1;
}
/* line 267, ../scss/styleContest.scss */
/* line 278, ../scss/styleContest.scss */
.nffWrap .contentGrid {
width: 100%;
text-align: center;
min-width: 300px;
}
/* line 272, ../scss/styleContest.scss */
/* line 283, ../scss/styleContest.scss */
.nffWrap .contentGrid a {
margin-top: 120px;
margin-bottom: 30px;
@@ -297,15 +307,15 @@ p {
padding: 8px 15px 7px 15px;
display: inline-block;
}
/* line 283, ../scss/styleContest.scss */
/* line 294, ../scss/styleContest.scss */
.nffWrap .contentGrid h1 {
font-size: 14px;
line-height: 13px;
overflow: hidden;
vertical-align: top;
}

/* line 296, ../scss/styleContest.scss */
/* line 307, ../scss/styleContest.scss */
#overlay {
display: none;
position: fixed;
@@ -321,25 +331,25 @@ p {
color: #333;
transition: all 2s linear 1s;
}
/* line 311, ../scss/styleContest.scss */
/* line 322, ../scss/styleContest.scss */
#overlay p {
color: #666;
}
/* line 315, ../scss/styleContest.scss */
/* line 326, ../scss/styleContest.scss */
#overlay h1 {
text-transform: uppercase;
font-weight: 600;
color: #333;
}
/* line 321, ../scss/styleContest.scss */
/* line 332, ../scss/styleContest.scss */
#overlay h3 {
font-weight: 600;
margin-top: 30px;
marginb-bottom: 10px;
color: #666;
}

/* line 330, ../scss/styleContest.scss */
/* line 341, ../scss/styleContest.scss */
#fade {
display: none;
position: absolute;
@@ -354,7 +364,7 @@ p {
z-index: 90 !important;
}

/* line 344, ../scss/styleContest.scss */
/* line 355, ../scss/styleContest.scss */
#closeLink {
position: fixed;
color: black;
@@ -367,18 +377,18 @@ p {
background: #eee;
}

/* line 356, ../scss/styleContest.scss */
/* line 367, ../scss/styleContest.scss */
#closeLink a {
text-decoration: none;
}

/* line 360, ../scss/styleContest.scss */
/* line 371, ../scss/styleContest.scss */
#buttonWrap {
background: #000;
color: white;
}

/* line 367, ../scss/styleContest.scss */
/* line 378, ../scss/styleContest.scss */
#buttonWrap a {
color: #fff;
text-decoration: none;
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -61,6 +61,7 @@ <h3>212 Piccadilly, London</h3>
<h1>WIN A SKI TRIP TO WHISTLER, CANADA!*</h1>
<p>Whistler, BC is known for its steep and deep skiing. You can be there and take in the annual <a class="noborder" href="" target="_blank">Deep Winter Photo Challenge</a>, with VIP seating. To enter, Instagram a selfie from our Piccadilly location contest window. Tag it <span class="highlight">#ArcteryxPiccadilly</span>, on 5 September between 10.00-11.00.</p>
<a href="http://contests.arcteryx.com/piccadilly/" target="_blank">More Info</a>
<div class="wbLogo"></div>
</div>
</div>
<div class="manleyWrap">
@@ -52,6 +52,7 @@
<h1>WIN A SKI TRIP TO WHISTLER, CANADA!*</h1>
<p>Whistler, BC is known for its steep and deep skiing. You can be there and take in the annual <a class="noborder" href="" target="_blank">Deep Winter Photo Challenge</a>, with VIP seating. To enter, Instagram a selfie from our Piccadilly location contest window. Tag it <span class="highlight">#ArcteryxPiccadilly</span>, on 5 September between 10.00-11.00.</p>
<a href="http://contests.arcteryx.com/piccadilly/" target="_blank">More Info</a>
<div class="wbLogo"></div>
</div>
</div>
<div class="manleyWrap">
@@ -269,6 +269,16 @@ p {
float: none !important;
margin-top: 0 !important;
}

.wbLogo {
width: 120px;
height: 60px;
background: url('../img/wbLogo.png') no-repeat;
background-size: 105px;
position: absolute;
bottom: 0px;
right: 40px;
}
}
}

Large diffs are not rendered by default.

Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -37,6 +37,8 @@ <h3>Including VIP seats at the annual sold-out Deep Winter Photo Challenge</h3>
<h3 class="highlight">Arc'teryx Piccadilly</h3>
<h3 class="highlight">Saturday, 5 September 2015</h3>
<!-- <p>Tag an Instagram selfie in front of our new <span class="highlight">#ArcteryxPiccadilly</span> brand store between 10-11am on 5 September for a chance to WIN a trip for 2 to Whistler, BC to attend the Deep Winter Photo Challenge!</p> -->

<a class="wbLogoWrap" href="http://www.whistlerblackcomb.com" target="_blank"></a>
<div class="howtoenter">
<p class="bolder">How To Enter:</p>
<ul>
@@ -15,7 +15,6 @@ body {
font-family: Avenir, sans-serif;
color: white;
height: 100%;

}

a {
@@ -77,15 +76,15 @@ p {
.logoWrap {
width: 150px;
height: 200px;
background: url('../img/logoLondon.jpg') no-repeat;
background: url('http://stores.arcteryx.com/piccadilly/img/logoLondon.jpg') no-repeat;
background-size: 150px;
}
}

.headerWrap {
width: 100%;
height: 700px;
background: url('../img/deepwinterChad.jpg');
background: url('http://stores.arcteryx.com/piccadilly/img/deepwinterChad.jpg');
background-size: cover;
background-position: center center;

@@ -152,6 +151,24 @@ p {

}

.wbLogoWrap {
width: 120px;
height: 60px;
background: url('http://stores.arcteryx.com/piccadilly/img/wbLogo.png') no-repeat;
background-size: 105px;
position: absolute;
top: 180px;
right: 100px;

@media screen and (max-width: 768px) {
position: relative;
left: 0;
display: inline-block;
top: 15px;
}

}

.howtoenter {
margin-top: 30px;
margin-bottom: 30px;
@@ -256,7 +273,7 @@ p {
}

.nffWrap {
background: url('../img/newforfallheroSm.jpg') no-repeat;
background: url('http://stores.arcteryx.com/piccadilly/img/newforfallheroSm.jpg') no-repeat;
background-color: rgba(255,255,255,.5);
background-size: cover;
background-position: center bottom;
@@ -127,6 +127,16 @@ p {
margin-bottom: 60px;
}
/* line 124, ../scss/style.scss */
.mainWrap .margLeft {
margin-left: 30px;
}
@media screen and (max-width: 700px) {
/* line 124, ../scss/style.scss */
.mainWrap .margLeft {
margin-left: 0;
}
}
/* line 132, ../scss/style.scss */
.mainWrap .colWrap {
width: 44%;
box-sizing: border-box;
@@ -135,113 +145,134 @@ p {
vertical-align: top;
}
@media screen and (max-width: 930px) {
/* line 124, ../scss/style.scss */
/* line 132, ../scss/style.scss */
.mainWrap .colWrap {
width: 46%;
}
}
@media screen and (max-width: 700px) {
/* line 124, ../scss/style.scss */
/* line 132, ../scss/style.scss */
.mainWrap .colWrap {
width: 95%;
}
}
/* line 142, ../scss/style.scss */
/* line 150, ../scss/style.scss */
.mainWrap h1 {
font-size: 1.3em;
text-transform: uppercase;
}
/* line 147, ../scss/style.scss */
/* line 155, ../scss/style.scss */
.mainWrap h3 {
font-size: 1em;
font-weight: 100 !important;
margin-bottom: 10px;
line-height: 1.3em;
}
/* line 154, ../scss/style.scss */
/* line 162, ../scss/style.scss */
.mainWrap p {
font-weight: 300 !important;
}
/* line 158, ../scss/style.scss */
/* line 166, ../scss/style.scss */
.mainWrap ul {
margin-bottom: 30px;
}
/* line 161, ../scss/style.scss */
/* line 169, ../scss/style.scss */
.mainWrap ul li {
list-style: square;
width: 70%;
line-height: 1.5em;
margin-bottom: 5px;
font-size: 15px;
}
/* line 170, ../scss/style.scss */
/* line 178, ../scss/style.scss */
.mainWrap a {
display: block;
font-weight: 100 !important;
font-size: 14px;
margin-bottom: 5px;
}
/* line 177, ../scss/style.scss */
/* line 185, ../scss/style.scss */
.mainWrap .mapHead {
padding: 10px 15px;
background: #333;
margin-bottom: -15px;
font-size: 15px;
}
@media screen and (max-width: 700px) {
/* line 185, ../scss/style.scss */
.mainWrap .mapHead {
margin: 0 auto;
margin-bottom: -15px;
margin-top: 30px;
}
}
/* line 198, ../scss/style.scss */
.mainWrap .mapWrap {
display: inline-block;
position: relative;
width: 100%;
height: 230px;
height: 290px;
margin-top: 15px;
background: url("../img/denverMap.jpg") no-repeat;
background-size: 500px;
background-position: 53% 63%;
z-index: 10;
}
@media screen and (max-width: 700px) {
/* line 198, ../scss/style.scss */
.mainWrap .mapWrap {
background-size: 700px;
}
}
/* line 188, ../scss/style.scss */
/* line 214, ../scss/style.scss */
.mainWrap .mapWrap .markerWrap {
position: absolute;
top: 39%;
left: 51%;
width: 30px;
height: 30px;
width: 28px;
height: 28px;
border-radius: 15px;
background-color: #333;
background-image: url("../img/markerLogo.png");
background-image: url("../img/birdmarker.png");
background-repeat: no-repeat;
background-size: 20px;
background-position: 50% 50%;
z-index: 100;
}
@media screen and (max-width: 700px) {
/* line 188, ../scss/style.scss */
/* line 214, ../scss/style.scss */
.mainWrap .mapWrap .markerWrap {
top: 40%;
left: 52%;
}
}
/* line 208, ../scss/style.scss */
/* line 233, ../scss/style.scss */
.mainWrap .mapWrap .markerWrap:after {
position: relative;
display: block;
height: 15px;
width: 15px;
height: 14px;
width: 14px;
content: '';
background: #333;
z-index: -1;
margin-left: 8px;
margin-top: 18px;
left: 7px;
top: 17px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
position: absolute;
z-index: -1;
}

/* line 224, ../scss/style.scss */
/* line 248, ../scss/style.scss */
.subWrap {
width: 930px;
position: relative;
margin: 0 auto;
}
@media screen and (max-width: 930px) {
/* line 224, ../scss/style.scss */
/* line 248, ../scss/style.scss */
.subWrap {
width: 100%;
}
}

/* line 234, ../scss/style.scss */
/* line 258, ../scss/style.scss */
.contestWrap {
width: 100%;
margin: 30px 0 60px;
@@ -251,8 +282,14 @@ p {
box-sizing: border-box;
margin-bottom: 0px;
}
@media screen and (max-width: 700px) {
/* line 258, ../scss/style.scss */
.contestWrap {
height: 350px;
}
}
@media screen and (max-width: 650px) {
/* line 234, ../scss/style.scss */
/* line 258, ../scss/style.scss */
.contestWrap {
height: 350px;
width: 100%;
@@ -262,7 +299,7 @@ p {
margin-bottom: 100px;
}
}
/* line 256, ../scss/style.scss */
/* line 280, ../scss/style.scss */
.contestWrap .blackBox {
width: 300px;
position: relative;
@@ -272,32 +309,32 @@ p {
margin-top: 150px;
}
@media screen and (max-width: 650px) {
/* line 256, ../scss/style.scss */
/* line 280, ../scss/style.scss */
.contestWrap .blackBox {
width: 100%;
margin-top: 300px;
padding: 20px;
}
}
/* line 271, ../scss/style.scss */
/* line 295, ../scss/style.scss */
.contestWrap h1 {
font-family: 'Avenir LT W01 85 Heavy', sans-serif;
font-weight: 600;
font-size: 20px;
margin-bottom: 15px;
}
/* line 278, ../scss/style.scss */
/* line 302, ../scss/style.scss */
.contestWrap h3 {
font-size: 14px;
line-height: 1.4em;
max-width: 500px;
}
/* line 284, ../scss/style.scss */
/* line 308, ../scss/style.scss */
.contestWrap sup {
line-height: 1em !important;
}

/* line 289, ../scss/style.scss */
/* line 313, ../scss/style.scss */
.blogWrap {
margin-top: 60px;
width: 100%;
@@ -308,12 +345,12 @@ p {
background: url("../img/denverBlogSecondary2.jpg");
}
@media screen and (max-width: 650px) {
/* line 289, ../scss/style.scss */
/* line 313, ../scss/style.scss */
.blogWrap {
width: 100%;
}
}
/* line 303, ../scss/style.scss */
/* line 327, ../scss/style.scss */
.blogWrap .blackBox {
width: 330px;
box-sizing: border-box;
@@ -326,21 +363,21 @@ p {
float: right;
}
@media screen and (max-width: 650px) {
/* line 303, ../scss/style.scss */
/* line 327, ../scss/style.scss */
.blogWrap .blackBox {
width: 100%;
margin-top: 350px;
padding: 20px;
}
}
/* line 320, ../scss/style.scss */
/* line 344, ../scss/style.scss */
.blogWrap .blackBox h3 {
font-family: 'Avenir LT W01 55 Roman', sans-serif;
font-size: 14px;
font-weight: 300;
line-height: 1.3em;
}
/* line 329, ../scss/style.scss */
/* line 353, ../scss/style.scss */
.blogWrap .blackBox a {
margin-top: 20px;
font-size: 13px;
@@ -350,7 +387,7 @@ p {
display: inline-block;
}

/* line 341, ../scss/style.scss */
/* line 365, ../scss/style.scss */
.finePrint {
text-align: center;
font-size: 11px;
@@ -359,21 +396,27 @@ p {
color: #ddd;
margin: 0 auto;
}
/* line 349, ../scss/style.scss */
/* line 373, ../scss/style.scss */
.finePrint p {
text-align: center;
margin: 0 auto;
padding-top: 50px;
width: 60%;
width: 70%;
}
@media screen and (max-width: 700px) {
/* line 373, ../scss/style.scss */
.finePrint p {
padding-top: 10px;
}
}
@media screen and (max-width: 650px) {
/* line 349, ../scss/style.scss */
/* line 373, ../scss/style.scss */
.finePrint p {
width: 90%;
width: 80%;
}
}

/* line 361, ../scss/style.scss */
/* line 391, ../scss/style.scss */
#overlay {
display: none;
position: fixed;
@@ -388,7 +431,7 @@ p {
color: #333;
transition: all 1s ease 1s;
}
/* line 377, ../scss/style.scss */
/* line 407, ../scss/style.scss */
#overlay iframe {
position: fixed;
width: 100%;
@@ -401,12 +444,12 @@ p {
overflow: scroll;
}

/* line 390, ../scss/style.scss */
/* line 420, ../scss/style.scss */
#overlay p {
color: #666;
}

/* line 394, ../scss/style.scss */
/* line 424, ../scss/style.scss */
#fade {
display: none;
position: absolute;
@@ -421,7 +464,7 @@ p {
z-index: 90;
}

/* line 408, ../scss/style.scss */
/* line 438, ../scss/style.scss */
#closeLink {
position: fixed;
background: #000;
@@ -434,13 +477,13 @@ p {
font-weight: 900;
}

/* line 421, ../scss/style.scss */
/* line 451, ../scss/style.scss */
#closeLink a {
color: #ff0000 !important;
text-decoration: none;
}

/* line 426, ../scss/style.scss */
/* line 456, ../scss/style.scss */
.nffWrap {
background: url("../img/newforfallheroSm.jpg") no-repeat;
background-size: cover;
@@ -450,12 +493,12 @@ p {
opacity: 1;
margin-top: 60px;
}
/* line 435, ../scss/style.scss */
/* line 465, ../scss/style.scss */
.nffWrap .contentGrid {
width: 100%;
text-align: center;
}
/* line 439, ../scss/style.scss */
/* line 469, ../scss/style.scss */
.nffWrap .contentGrid a {
margin-top: 120px;
margin-bottom: 30px;
@@ -466,7 +509,7 @@ p {
padding: 8px 15px 7px 15px;
display: inline-block;
}
/* line 450, ../scss/style.scss */
/* line 480, ../scss/style.scss */
.nffWrap .contentGrid h1 {
font-size: 14px;
line-height: 13px;
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -18,8 +18,6 @@
})(window,document,'script','dataLayer','GTM-KRS44Z');</script>
<!-- End Google Tag Manager -->

<div id="fade"></div>

<div class="headerWrap">
<div class="contentGrid">
<div class="logoWrap"></div>
@@ -47,10 +45,10 @@ <h3 class="highlight">GRAND OPENING EVENT<br>September 26 & 27</h3>
<h3 class="highlight">Saturday, September 26, 10:00 am-8:00 pm</h3>
<h3 class="highlight">Sunday, September 27, 11:00 am-6:00 pm</h3>
</div>
<div class="colWrap">
<h3>250 Columbine Street, Cherry Creek North</h3>
<div class="colWrap margLeft">
<h3 class="mapHead">250 Columbine Street, Cherry Creek North</h3>
<div class="mapWrap" target="_blank" href="#">
<a class="markerWrap" target="_blank" href="https://www.google.ca/maps/place/250+Columbine+St,+Denver,+CO+80206,+USA/@39.7201608,-104.9568702,17z/data=!4m2!3m1!1s0x876c7e95dae5d59d:0xa9a485004b133fb0?hl=en"></a>
<a class="markerWrap" target="_blank" href="https://www.google.ca/maps/place/250+Columbine+St,+Denver,+CO+80206,+USA/@39.7202468,-104.9570388,17z/data=!4m2!3m1!1s0x876c7e95dae5d59d:0xa9a485004b133fb0"></a>
</div>
</div>
</div>
@@ -79,13 +77,12 @@ <h3>The first 50 people through the door on Saturday, September 26 receive $50 -
<div class="subWrap">
<div class="blogWrap">
<div class="blackBox">
<h3>Local Colorado Climber Jonathan Seigrist marches to his own beat, making a mark in the climbing community through humble homage to legends and pioneers in his home state.</h3>
<h3>Local Colorado Climber Jonathan Siegrist marches to his own beat, making a mark in the climbing community through humble homage to legends and pioneers in his home state.</h3>
<a href="http://blog.arcteryx.com/jonathan-siegrist-found-roots-colorado%E2%80%99s-classic-routes" target="_blank">READ MORE</a>
</div>
</div>
</div>


<div style="clear:both;"></div>
<div class="nffWrap">
<div class="contentGrid">
@@ -94,10 +91,5 @@ <h1>DESIGN | CRAFTSMANSHIP | PERFORMANCE</h1>
</div>
</div>

<div id="overlay">
<a onclick="document.getElementById('overlay').style.display='none';document.getElementById('fade').style.display='none'" href="javascript:void(0)"><div id="closeLink">X</div></a>
<iframe seamless="seamless" src="http://ckoconnell.github.io/arcteryx/LondonStoreOpening/build.html"></iframe>
</div>

</body>
</html>
@@ -0,0 +1,95 @@
<html>
<head>
<title>Denver Store Grand Opening</title>
<link rel="stylesheet" href="css/style.css">
<link type="text/css" rel="stylesheet" href="http://fast.fonts.net/cssapi/a1fce17f-2d2d-4ce7-8a00-0f2382646d8b.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-KRS44Z"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-KRS44Z');</script>
<!-- End Google Tag Manager -->
<div class="headerWrap">
<div class="contentGrid">
<div class="logoWrap"></div>
<div class="navWrap"></div>
</div>
</div>
<div class="heroWrap">
<div class="contentGrid">
</div>
</div>
<div class="mainWrap">
<div class="contentGrid"> <!-- 930px -->
<div class="heroContent">
<h1>NEW ARC’TERYX STORE OPENS IN <span class="highlight">DENVER</span></h1>
</div>
<div class="colWrap">
<h3 class="highlight">GRAND OPENING EVENT<br>September 26 & 27</h3>
<ul>
<li>Complimentary Arc’teryx lunch bags and other giveaways</li>
<li>Demos on the science of our GORE-TEX® fabrics</li>
<li>White Whale ice cream (while supplies last)</li>
<li>Jagged Mountain Craft Beer</li>
<li>Lots of Prizes</li>
</ul>
<h3 class="highlight">Saturday, September 26, 10:00 am-8:00 pm</h3>
<h3 class="highlight">Sunday, September 27, 11:00 am-6:00 pm</h3>
</div>
<div class="colWrap margLeft">
<h3 class="mapHead">250 Columbine Street, Cherry Creek North</h3>
<div class="mapWrap" target="_blank" href="#">
<a class="markerWrap" target="_blank" href="https://www.google.ca/maps/place/250+Columbine+St,+Denver,+CO+80206,+USA/@39.7202468,-104.9570388,17z/data=!4m2!3m1!1s0x876c7e95dae5d59d:0xa9a485004b133fb0"></a>
</div>
</div>
</div>
</div>
<div class="subWrap">
<div class="contestWrap">
<div class="blackBox">
<h1>THE FIRST 50 IN - WIN!</h1>
<h3>The first 50 people through the door on Saturday, September 26 receive $50 - $1000 gift bags! Doors open at 10:00 am.<sup>*</sup></h3>
</div>
</div>
</div>
<div style="clear:both;"></div>
<div class="finePrint">
<div class="contentGrid">
<p><sup>*</sup>No purchase necessary. Fifty (50) gift bags are available, with a retail value of between $50 and $1000. Gift bags will be awarded to the first 50 to enter the store on Saturday, September 26, 2015. Door open at 10:00 am.</p>
</div>
</div>
<div style="clear:both;"></div>
<div class="subWrap">
<div class="blogWrap">
<div class="blackBox">
<h3>Local Colorado Climber Jonathan Siegrist marches to his own beat, making a mark in the climbing community through humble homage to legends and pioneers in his home state.</h3>
<a href="http://blog.arcteryx.com/jonathan-siegrist-found-roots-colorado%E2%80%99s-classic-routes" target="_blank">READ MORE</a>
</div>
</div>
</div>
<div style="clear:both;"></div>
<div class="nffWrap">
<div class="contentGrid">
<a href="http://arcteryx.com/ProductFind.aspx?language=EN&collection=New_For_Fall_2015&intro=Special-Collections" target="_blank">SHOP NEW FOR FALL/WINTER 2015</a>
<h1>DESIGN | CRAFTSMANSHIP | PERFORMANCE</h1>
</div>
</div>
</body>
</html>
@@ -121,6 +121,14 @@ p {
.mainWrap {
margin-bottom: 60px;

.margLeft {
margin-left: 30px;

@media screen and (max-width: 700px) {
margin-left: 0;
}
}

.colWrap {
width: 44%;
box-sizing: border-box;
@@ -174,30 +182,47 @@ p {
margin-bottom: 5px;
}

.mapHead {
padding: 10px 15px;
background: #333;
margin-bottom: -15px;
font-size: 15px;

@media screen and (max-width: 700px) {
margin: 0 auto;
margin-bottom: -15px;
margin-top: 30px;
}
}

.mapWrap {
display: inline-block;
position: relative;
width: 100%;
height: 230px;
height: 290px;
margin-top: 15px;
background: url('../img/denverMap.jpg') no-repeat;
background-size: 500px;
background-position: 53% 63%;
z-index: 10;

@media screen and (max-width: 700px) {
background-size: 700px;

}

.markerWrap {
position: absolute;
top: 39%;
left: 51%;
width: 30px;
height: 30px;
width: 28px;
height: 28px;
border-radius: 15px;
background-color: #333;
background-image: url('../img/markerLogo.png');
background-image: url('../img/birdmarker.png');
background-repeat: no-repeat;
background-size: 20px;
background-position: 50% 50%;
z-index: 100;

@media screen and (max-width: 700px) {
top: 40%;
@@ -206,18 +231,17 @@ p {
}

.markerWrap:after {
position: relative;
display: block;
height: 15px;
width: 15px;
height: 14px;
width: 14px;
content: '';
background: #333;
left: 7px;
top: 17px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
position: absolute;
z-index: -1;
margin-left: 8px;
margin-top: 18px;
transform: rotate(45deg)
}

}
}

@@ -240,9 +264,9 @@ p {
box-sizing: border-box;
margin-bottom: 0px;




@media screen and (max-width: 700px) {
height: 350px;
}

@media screen and (max-width: 650px) {
height: 350px;
@@ -350,11 +374,17 @@ p {
text-align: center;
margin: 0 auto;
padding-top: 50px;
width: 60%;
width: 70%;

@media screen and (max-width: 700px) {
padding-top: 10px;
}

@media screen and (max-width: 650px) {
width: 90%;
width: 80%;
}


}
}