<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,600,700,800" rel="stylesheet">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6" style="padding:2.5px 5px 2.5px 5px;">
<div class="col-xs-12 hero-bg1" style="padding:0;">
<div id="openModal1" class="col-xs-12 modalDialog">
<div><a href="#close" title="Close" class="close">x</a>
<h1>Promotional Information</h1>
<h2>Skiwear 50% OFF</h2>
<p>Shop select styles for Men's, Women's and Children's. While supplies last. Discount taken off last selling price. Cannot be combined with any other offers. Excludes Black Label and Gift Cards.</p>
</div>
</div>
<div class="bg-overlay1"></div>
<div class="hero-content">
<h1 class="hero-title">Canada Goose</h1>
<h2 class="hero-caption">spring styles have arrived</h2>
<a style="text-decoration: none;" href="https://www.sportinglife.ca/b/canada-goose" target="_blank"><button class="button button-black">SHOP NOW</button></a>
<center><a href="#openModal1" class="exclusions">*some exclusions apply, click here for full details.</a></center>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6" style="padding:2.5px 5px 2.5px 5px;">
<div class="col-xs-12 hero-bg2"style="padding:0;">
<div id="openModal2" class="col-xs-12 modalDialog">
<div><a href="#close" title="Close" class="close">x</a>
<h1>Promotional Information</h1>
<h2>Outerwear 50% OFF</h2>
<p>Shop select styles for Men's, Women's and Children's. While supplies last. Discount taken off last selling price. Cannot be combined with any other offers. Excludes Black Label and Gift Cards.</p>
</div>
</div>
<div class="bg-overlay2"></div>
<div class="hero-content">
<h1 class="hero-title">Canada Goose</h1>
<h2 class="hero-caption">spring styles have arrived</h2>
<a style="text-decoration: none;" href="https://www.sportinglife.ca/b/canada-goose" target="_blank"><button class="button button-black">SHOP NOW</button></a>
<center><a href="#openModal2" class="exclusions">*some exclusions apply, click here for full details.</a></center>
</div>
</div>
</div>
</div>
</div>
/********************************/
/* Background & Overlay */
/********************************/
.bg-overlay1 {
position: absolute;
width: 100%;
height: 65vh;
z-index: 1;
background-color: #000;
opacity: 0.5;
}
.bg-overlay2 {
position: absolute;
width: 100%;
height: 65vh;
z-index: 1;
background-color: #000;
opacity: .5;
}
.hero-bg1 {
background-image: url(https://s26.postimg.org/7g2ozrxgp/cg4.jpg);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
height: 65vh;
z-index: 1;
}
.hero-bg2 {
background-image: url(https://s26.postimg.org/7ayxq3q5l/cg5.jpg);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
height: 65vh;
z-index: 1;
}
/* Background & Overlay End */
/********************************/
/* Title & caption */
/********************************/
.hero-content {
position: absolute;
top: 55%;
left: 50%;
transform: translate(-50%,-50%);
background: none;
padding: 2rem;
width: 90%;
z-index: 1;
align-items: center;
}
.hero-title {
padding: 0;
font-family: georgia, sans-serif;
font-style: italic;
font-weight: bold;
font-size: 2.5em;
color: #fff;
text-shadow: 2px 2px #000;
text-align: center;
}
.hero-caption {
margin: 0;
padding: 0;
font-family: georgia, sans-serif;
font-style: italic;
font-size: 1.2em;
color: #fff;
text-shadow: 1px 1px #000;
text-align: center;
}
.details {
width: 100%;
text-align: center;
font-family: 'Open-Sans', sans-serif;
font-size: 0.7em;
color: #ccc;
letter-spacing: 0.4px;
top: 100%;
}
/* Title & Caption End */
/********************************/
/* Custom Buttons */
/********************************/
.button {
border: none;
color: white;
padding: 16px 35px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
margin: 50px 2px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
margin: 0 auto;
display:block;
}
.button-black {
background-color: rgba(255, 255, 255, 0.3);
color: black;
border: 5px solid #000;
letter-spacing: 5px;
font-weight: bold;
font-family: Geogia;
margin-top: 50px;
margin-bottom: 10px;
padding: 15px 34px;
}
.button-black:hover {
background-color: black;
color: white;
}
.btn:focus,.btn:active {
outline: none !important;
box-shadow: none;
}
/* Custom Buttons Ends */
/********************************/
/* Font Styling */
/********************************/
.popup-content h1 {
font-family: 'Open-Sans', sans-serif;
text-transform: uppercase;
letter-spacing: -0.5;
font-weight: 700;
font-size: 1.3em;
padding: 70px 10px 5px 10px;
}
.popup-content h3 {
font-family: Georgia, sans-serif;
letter-spacing: 0;
font-weight: bold;
font-size: 1.1em;
font-style: italic;
padding: 5px 0 2px 0;
}
.popup-content p {
font-family: 'Open-Sans', sans-serif;
letter-spacing: 0;
font-weight: 300;
font-size: 0.8em;
padding: 0 20px 50px 20px;
}
.modalDialog h1 {
font-family: 'Open-Sans', sans-serif;
text-transform: uppercase;
letter-spacing: -0.5;
font-weight: 700;
font-size: 1.3em;
padding: 30px 10px 5px 10px;
text-align: center;
}
.modalDialog h2 {
font-family: Georgia, sans-serif;
letter-spacing: 0;
font-weight: bold;
font-size: 1.1em;
font-style: italic;
padding: 5px 0 2px 0;
text-align: center;
}
.modalDialog p {
font-family: 'Open-Sans', sans-serif;
letter-spacing: 0;
font-weight: 300;
font-size: 0.8em;
padding: 0 20px 30px 20px;
text-align: center;
}
.exclusions {
color: #fff;
font-size: 10px;
letter-spacing: 0.5px;
font-family: 'Open-Sans', sans-serif;
}
.exclusions:hover {
color: #fff;
font-size: 10px;
letter-spacing: 0.5px;
font-family: 'Open-Sans', sans-serif;
text-decoration: none;
}
/* font styling end */
/********************************/
/* Pop-up Overlay */
/********************************/
.modalDialog {
position: absolute;
font-family: Arial, Helvetica, sans-serif;
/*top: 0;
right: 0;
bottom: 0;
left: 0;*/
height: 100%;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 80%;
position: absolute;
margin: 10% auto 0 auto;
padding: 5px 5px 5px 5px;
background: #fff;
left: 10%;
bottom: 5%;
}
.close {
background: transparent;
color: #000;
line-height: 25px;
position: absolute;
text-align: center;
width: 24px;
text-decoration: none;
font-weight: bold;
top: 5%;
left: 49%;
z-index:20;
}
.close:hover {
color: #000;
}
/* popup overlay end */
