<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.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="carousel fade-carousel slide">
<!-- Overlay -->
<div class="bg-overlay"></div>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item slides active">
<div class="slide-1"></div>
<div class="hero">
<div>
<hgroup>
<h1>Canada Goose</h1>
<h3>spring styles have arrived</h3>
</hgroup>
<a href="https://www.sportinglife.ca/b/canada-goose" target="_blank"><button class="button button-black">SHOP NOW</button></a>
</div>
<div class="hero-exclusions">
<a href="#popup1">
<p class="exclusions-callout">*click here for details</p>
</a>
</div>
</div>
<div id="popup1" class="overlay">
<div class="popup">
<a class="close" href="#">×</a>
<div class="content">
<h1>Promotional Information & Exclusions</h1>
<h3>Skiwear & Snowboardwear<br>up to 50% off</h3>
<h4>
<ul>
<li>Selected styles for Men's & Women's</li>
<li>Burton max of 30% off</li>
<li>Discount taken off current selling price</li>
<li>Cannot be combined with any other offers</li>
<li>Excludes gift cards</li>
</ul>
</h4>
</div>
</div>
</div>
</div>
</div>
</div>
/********************************/
/* Hero Headers */
/********************************/
.hero {
position: fixed;
top: 50%;
left: 50%;
z-index: 3;
color: #fff;
text-align: center;
text-shadow: 1px 1px 0 rgba(0,0,0,.75);
-webkit-transform: translate3d(-50%,-50%,0);
-moz-transform: translate3d(-50%,-50%,0);
-ms-transform: translate3d(-50%,-50%,0);
-o-transform: translate3d(-50%,-50%,0);
transform: translate3d(-50%,-50%,0);
width: 95%;
}
.hero h1 {
padding: 0;
font-family: georgia, sans-serif;
font-style: italic;
font-weight: bold;
font-size: 4em;
color: #fff;
text-shadow: 2px 2px #000;
margin-top: 10px;
}
.popup h1 {
padding: 0;
font-family: 'Open Sans', sans-serif;
font-weight: 600;
font-size: 1.8em;
color: #000;
text-shadow: none;
margin-top: 10px;
text-align: center;
}
.popup h3 {
padding: 20px 0 0 0;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 1.3em;
color: #000;
text-shadow: none;
margin-top: 10px;
}
.popup h4 {
padding: 10px 0 0 0;
font-family: 'Open Sans', sans-serif;
font-weight: 300i;
font-size: 0.8em;
color: #000;
text-shadow: none;
}
.hero h3 {
margin: 0;
padding: 0;
font-family: georgia, sans-serif;
font-style: italic;
font-size: 1.2em;
color: #fff;
text-shadow: 1px 1px #000;
}
.hero-exclusions {
position: fixed;
text-align: right;
margin-top: 5%;
top: 95%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
z-index: 4;
}
.exclusions-callout {
font-family: Georgia;
font-size: 9pt;
letter-spacing: 1px;
text-shadow: none;
font-style: normal;
color: #fff;
z-index: 4;
}
.exclusions-callout a:hover, a:visited, a:link, a:active {
text-decoration: none;
}
/********************************/
/* Overlay Popup */
/********************************/
/*start of popup*/
.box {
width: 40%;
margin: 0 auto;
background: rgba(255, 255, 255, 0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
width: 100%;
height: 100%;
z-index: 4;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
background-color: rgba(255, 255, 255, 1);
border-radius: 2px;
width: 95%;
height: auto;
position: relative;
transition: all 5s ease-in-out;
}
.popup .close {
position: fixed;
top: 90px;
left: 48%;
transition: all 200ms;
font-size: 30px;
font-family: Verdana, sans-serif;
font-weight: normal;
text-decoration: none;
color: #000;
text-shadow: none;
opacity: 1;
}
.popup .close:hover {
color: #a6a6a6;
}
.popup .content {
max-height: 80%;
overflow: auto;
padding: 50px 20px 50px 20px;
}
@media screen and (max-width: 700px) {
.box {
width: 70%;
}
.popup {
width: 70%;
}
}
/********************************/
/* Overlay */
/********************************/
.bg-overlay {
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
background-color: #000;
opacity: .2;
}
/********************************/
/* 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;
}
.button-black {
background-color: black;
color: white;
border: 5px solid #000;
letter-spacing: 5px;
font-weight: bold;
font-family: Geogia;
}
.button-black:hover {
background-color: transparent;
color: white;
}
/********************************/
/* Slides backgrounds */
/********************************/
.fade-carousel .slides .slide-1 {
height: 100vh;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.fade-carousel .slides .slide-1 {
background-image: url(https://s14.postimg.org/5i4g1gqwh/Untitled-1.jpg);
}
/********************************/
/* Media Queries */
/********************************/
@media screen and (min-width: 980px){
.hero { width: 980px; }
}
@media screen and (max-width: 640px){
/*.hero h1 { font-size: 4em; }*/
}
