@charset "UTF-8";
/* CSS Document */

@font-face {
    font-family: 'bebasregular';
    src: url('../fonts/bebas-webfont.woff2') format('woff2'),
         url('../fonts/bebas-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'bebasneue_regular';
    src: url('../fonts/bebasneue_regular-webfont.woff2') format('woff2'),
         url('../fonts/bebasneue_regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'robotolight';
    src: url('../fonts/roboto-light-webfont.woff2') format('woff2'),
         url('../fonts/roboto-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'robotomedium';
    src: url('../fonts/roboto-medium-webfont.woff2') format('woff2'),
         url('../fonts/roboto-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
/* ========================================================= */
/* ================= body and wrapper styles =============== */
/* ========================================================= */
body{
    font-size: 100%;
    font-family: robotolight, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #27272c; /* main p color */
    letter-spacing: 0.01em;
    line-height: 2; /* 32/16 */
}

#wrapper, .inner-wrapper{
    display: block;
    overflow: hidden;
    min-width: 950px;
    margin: 0 auto;
}

.inner-wrapper{
    width: 75%;
    max-width: 1400px;
}

footer .inner-wrapper{
    width: 75%;
    max-width: 1400px;
    padding-top: 70px;
}
/* position relative so I can do psuedo element (for black gradient on header) */
.inner-wrapper{
     position: relative;
}
/* ========================================================= */
/* ======================= text styles ===================== */
/* ========================================================= */
strong{
    font-family: robotomedium, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
/* common title/nav text features */
h1, h2, h3, h4, h5, h6, nav a{
     text-transform: uppercase;
     color: #fff;
    font-family: bebasregular,  'arial black', arial, helvetica, sans-serif;
    letter-spacing: 0.2em;
    line-height: 1.15em;
    text-align: center;
}

h1{
    margin-top: 0.5em;
    font-size: 6.25em; /* 100/16 */
    
}
h2{
    color: #e03434;
    font-size: 2.25em; /* 36/16 */
    margin-bottom: 3em;
     position: relative;
}
h2::after{
    position: absolute;
    content: '';
    width: 100px;
    height: 10px;
    bottom: -1.5em;
    left: 50%;
    margin-left: -50px; /* half of width */
    display: block;
    background-color: #e03434;
}
h3{
    font-family: bebasneue_regular, 'arial narrow', arial, helvetica, sans-serif;
    color: #e03434;
    font-size: 1.875em; /* 30/16 */
    margin: 2em auto; /* 60/30 */
    letter-spacing: 0.1em;
   
}
.please-note h4{
    color: #686a6f;
    text-align: left;
    font-family: bebasneue_regular, 'arial narrow', arial, helvetica, sans-serif;
}
.please-note p{
    color: #686a6f;
    text-align: left;
    float: none;
    margin: 0;
}
/* footer headers */
h5{
    
    color: #1a1a1a;
    font-size: 1.125em;/* 18/16*/
    border-bottom: 1px solid #1a1a1a;
    padding-bottom: 20px;
    margin-bottom: 20px;
}
h6{
    text-align: left;
    font-family: bebasneue_regular, 'arial narrow', arial, helvetica, sans-serif;
    color: #1a1a1a;
    font-size: 1.125em; /* 18/16 */
}

p{
    max-width: 668px;
    margin: 0 auto 0.9375em auto; /* 15/16 for bottom margin */
}
.larger{
    font-size:  1.5em; /* 24/16 */
}
p.smaller{
   font-size: 0.875em; /* 14/16 */
}
p.price{
    text-transform: uppercase;
    font-size: 1.125em; /* 18/16 */
     font-family: robotolight, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
p.price span{
    font-size: 1.66666667em; /* 30/18 */
    font-family: bebasregular, 'arial black', arial, helvetica, sans-serif;
    color: #e03434;
}
p.center{
    text-align: center;
}

.clear-it{
    clear: both;
}
.float-left{
    display: block;
    float: left;
}
.float-right{
    display: block;
    float: right;
}
.second-section p{
    color: #fff;
}
a {
    color: #fff;
    text-decoration: underline;
}
a.text-link, p.text-link{
    color: #e03434;
    text-transform: uppercase;
    font-size: 0.85714285714em; /* 12/14 */
    letter-spacing: 0.025em;
    font-family: robotomedium, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    -moz-transition: all 0.35 ease-in-out;
    -webkit-transition: all 0.35 ease-in-out;
    transition: all 0.35 ease-in-out;
}
a.text-link:hover, p.text-link:hover{
    color: #f36161;
}
p.text-link{
    text-align: right;
    padding-right: 10px;
}
sup{
    font-size: 0.83em;
    vertical-align: super;
    line-height: 0;
}
/* ========================================================= */
/* ===================== header styles ===================== */
/* ========================================================= */
header{
    display: block;
    min-height: 676px;
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: bottom center;
    -webkit-clip-path: polygon(50% 676px, 100% 580px, 100% 0, 0 0, 0 580px);
     clip-path: polygon(50% 676px, 100% 580px, 100% 0, 0 0, 0 580px);  
}
/*container div for SVG fallback for firefox so that it doesnt create empty space at the bottom of the footer */
#svg-container{
    background-color: red;
    height: 0;
    overflow: hidden;
}
/* CSS black gradient to make nav more readable against all header BGs */
header::before{
    content: '';
    position: absolute;
    display: block;
    width: 100%;
    height: 200px;
background: -moz-linear-gradient(top,  rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#40000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */

}
header.home::after{
      content: '';
    position: absolute;
    display: block;
    width: 100%;
    height: 200px;
    bottom: 0;
    left: 0;
  background: -moz-linear-gradient(top, rgba(38,79,91,0) 0%, rgba(38,79,91,0.01) 2%, rgba(38,79,91,0.66) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(38,79,91,0) 0%,rgba(38,79,91,0.01) 2%,rgba(38,79,91,0.66) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(38,79,91,0) 0%,rgba(38,79,91,0.01) 2%,rgba(38,79,91,0.66) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00264f5b', endColorstr='#a8264f5b',GradientType=0 ); /* IE6-9 */
}
header.home{
      background-image: url(../images/sub_plans_bgv3.jpg);
}
header.subscription_plans{
    background-image: url(../images/sub_plans_bgv3.jpg);
   
 
}
#utilities{
     width: 90%;
    margin: 0 5%;
}
#sign-in a{
    color: #fff;
    text-decoration: none;
}
#next-box-ship, #sign-in{
   color: #fff;
    display: block;
    width: 50%;
    float: left;
  font-size:  0.75em;/*   12/16*/
    text-transform: uppercase;
    margin-top: 10px;
    
}
#next-box-ship p{
    display: block;
    float: left;
    line-height: 1.2em;
    
}
#next-box-ship p:first-child{
    font-family: bebasregular, 'arial black', arial, helvetica, sans-serif;
    font-size: 2em; /* 24/12 */
    word-spacing: 0.2em;
    padding-right: 10px;
}
#next-box-ship p:last-child{
    max-width: 100px;
}
#sign-in{
    text-align: right;
    float: right;
}
#sign-in p{
    float: right;
    padding-right: 10px;
}
#sign-in img{
    float: right;
    clear: none;
}

/* ========================================================= */
/* ======================== nav styles ===================== */
/* ========================================================= */
nav{
    float: left;
    display: block;
    min-height: 100px;
   overflow: auto;
    position: relative;
    width: 90%;
    margin: -30px 5% 0 5%;
}
nav ul{
    display: block;
    overflow: hidden;
    width: 50%;
    margin: 42px 0; /*value is: [(logo height)-(li height)]/2 */
}
#nav-left-side{
    float: left; 
}
#nav-right-side {
    float: right;
}

nav ul li a{
    display: block;
    text-decoration: none;
    text-align: center;
     height: 58px;  /* 142px  match height of logo img */
    line-height: 58px; /* vertical align text */
    position: relative;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
}
#nav-left-side li a{
    float: left;
    width: 41.4%;
}

#nav-right-side li a{
    float: right;
    width: 27.5%;
}
/* center the nav logo */
#nav-logo{
    position: absolute;
	left: 50%;
    
}

#nav-logo img{
	margin-left: -50%;
}
nav a, #impact-nav a{
    font-family: bebasneue_regular, 'arial narrow', arial, helvetica, sans-serif;
    font-size: 1em;
    letter-spacing: 0.075em;
    transition: all 0.35s ease-in-out;
}
#impact-nav a {
    color: #1f2126;
}
nav a:hover, nav a.active, #sub-plans-nav a.completed:hover, #sub-plans-nav a.active, #impact-nav a:hover, #impact-nav a.active{
    color: #e03434; /* main red colour */
}
nav a span, #blog-util-container ul li a span{
    position: relative;
}
/* little red block under nav item */
nav a span::after, #sub-plans-nav a.completed span::after,  #impact-nav a span::after,
#blog-util-container ul li a span::after{
     position: absolute;
    content: '';
    width: 15px;
    height: 0;
    bottom: -12px;
    left: 0;
    display: block;
    background-color: #e03434;
    -moz-transition: all 0.35s ease-in-out;
    -webkit-transition: all 0.35s ease-in-out; 
    transition: all 0.35s ease-in-out; /* transition causes clip-path blip in safari */
    opacity: 0;
     transform-origin: left;
}
/* target safari browser to remove opacity effect on nav hover... because it causes clip-path to re-render and create a stuttering effect */
.safari nav a span::after, 
.safari #sub-plans-nav a.completed span::after,  
.safari #sub-plans-nav a span::after,  
.safari #secondary-nav a span::after,  
.safari #impact-nav a span::after,
.safari #blog-util-container ul li a span::after{
    opacity: 1;
}
nav a:hover span::after, nav a.active span::after, #sub-plans-nav a.completed:hover span::after, #sub-plans-nav a.active span::after,  #impact-nav a:hover span::after,  #impact-nav a.active span::after, #blog-util-container ul li a:hover span::after{
  
    height: 5px;
    opacity: 1; /* this causes the issue in safari */
    bottom: -6px;
}

/*-------------------------------------------------------------------- secondary nav*/

#secondary-nav{
    width: 420px;
    display: block;
    left: 50%;
    margin-left: -210px; /* hald of width */
    margin-top: 1em;
    
}
#secondary-nav a{
    text-decoration: none;
    display: block;
    width: 33.3333333%;
    float: left;
    position: relative;
/*    text-shadow: 0 0 15px rgba(0,0,0,0.85);*/
}
#secondary-nav a:first-child{
text-align: left;
}
#secondary-nav a:last-child{
text-align: right;
}
#secondary-nav a:hover{
    color: #e03434;
}
#secondary-nav a span::after{
  position: absolute;
    content: '';
    width: 15px;
    height: 0;
    bottom: -12px;
    left: 0;
    display: block;
    transition: all 0.35s ease-in-out;
    opacity: 0;
     transform-origin: left;
    background-color: #e03434;
}
#secondary-nav a:hover span::after{

  height: 4px;
    opacity: 1;
    bottom: -6px;
}
/* ========================================================= */
/* ================== angled section styles ================ */
/* ========================================================= */

/* common across all angled sections */
.angled-section{
    display: block;
    min-height: 500px;
    min-width: 950px; /* added to try and stop horizontal scroll */
    overflow: auto;
    padding: 200px 0;
    margin-top: -100px; /* this value must match the clip-path px value */
    background-color: #fff; /* default is white */
    background-size: cover;
    background-position: bottom center;
}
/* dark section by default */
.angled-section:nth-child(even){
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 100px);
    clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 100px);
    background-color: #272b36;
    color: #fff;
}
.angled-section:nth-child(odd){
    -webkit-clip-path: polygon(100% 100px, 100% 100%, 0 100%, 0 0);
    clip-path: polygon(100% 100px, 100% 100%, 0 100%, 0 0);
}
/* apply pine background to first section on each page */
.angled-section:first-child{
    -webkit-clip-path: none !important;
    clip-path: none !important;
/* 0 0, 100% 0, 100% 100%, 0 100% */
    background-image:url(../images/pines_mist.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: bottom;
}
/* apply 0 padding so sits flush with footer */
.angled-section-override{
    padding-bottom: 0;
    margin-bottom: 0;
}
.section-content{
    max-width: 900px;
    margin: 0 auto;
    display: block;
    overflow: auto;
}
.angled-section img{
    margin: 0 auto;
}
/* ========================================================= */
/* ========================= sub plans nav ================= */
/* ========================================================= */

#sub-plans-nav{
    width: 90%;
    margin: 10px 5% 0 5%;
    display: block;
    float: left;
    clear:both;
    overflow: auto;
    min-height: 60px;
    font-family: bebasneue_regular, 'arial narrow', arial, helvetica, sans-serif;
}
#sub-plans-nav ul {
    display: block;
    overflow: auto;
    width: 100%;
    min-height: 40px;
    padding-bottom: 12px;
    
}
#sub-plans-nav ul li{
    width: 16.6667%;
    display: block;
    overflow: show;
    float: left;
    height: 100%;
}
/* added to make nav items aligned when split to 2 lines */
#sub-plans-nav a{
    padding-left: 1.5em;
    text-indent: -1em;
}

#sub-plans-nav a{
    letter-spacing: 0.2em;
    line-height: 1.2em;
    display: block;
    text-align: left;
    width: 100%;
    height: 100%;
    color: #787e8f;
    text-decoration: none;
    transition: all 0.35s ease-in-out;
    padding-right: 5px;
    cursor: default;
}
#sub-plans-nav a span{
    position: relative; /* needs to be relative for the red box underneath on hover */
}
.slider-container{
    display: block;
    clear: both;
    min-width: 850px;
}
/* ========================================================= */
/* ================== sub plans utility bar ================ */
/* ========================================================= */
#sub-plans-utility-bar{
    display: block;
    overflow: auto;
    min-height: 100px;
    background-color: #eeeeef;
    padding: 20px;
    border-bottom: 4px solid #fff;
}
/* give 'primary' button its own animation on hover */
#sub-plans-utility-bar .button:last-child{
    background-position: right 0 center;
    -moz-transition: background-position 0.2s ease-in-out, opacity 0.3s ease-in-out;
    -webkit-transition: background-position 0.2s ease-in-out, opacity 0.3s ease-in-out;
    transition: background-position 0.2s ease-in-out, opacity 0.3s ease-in-out;
}
#sub-plans-utility-bar .button:last-child:hover{
    background-position: right 5px center;
}
/* hide slick nav dots (but leave them in the DOM because I need to get slide number from it for the top sub nav to update) */
ul.slick-dots{
    display: none !important;
}
/* added to steps that have been done- lets me only trigger hover state when a user can actually fast track back to a step */
#sub-plans-nav a.completed{
    color: #e03434;
    cursor: pointer;
}
/* ========================================================= */
/* ========================= button! ======================= */
/* ========================================================= */
.button{
    text-decoration: none;
    margin: 0 auto;
    display: inline-block;
    padding-right: 30px;
    padding-left: 10px;
    height: 57px;
    border-top: 1px solid #e03434;
    border-bottom: 1px solid #e03434;
    color: #e03434;
    text-transform: uppercase;
    line-height: 57px; /* match height */
    font-family: bebasneue_regular, 'arial narrow', arial, helvetica, sans-serif;
    letter-spacing: 0.2em;
    font-size: 1.125em; /* 18/16 */
    position: relative;
    background-image: url(../images/button_chevron.png);
    background-repeat: no-repeat;
    background-position: right;
    transition: color 0.15s ease-in-out;
    cursor: pointer;
    
}
.button::before, .button::after{
    position: absolute;
    top:0;
    content: '';
    display: block;
    width: 14px;
    height: 57px;
    background-image: url(../images/button_left.png);
    background-repeat: no-repeat;
}
.button::before{
    left: -14px;
}
.button:hover::before, #sub-plans-utility-bar .button:last-child::before, .selected::before{
        background-image: url(../images/button_left_hover.png);

}
.button::after{
    right: -14px;
    background-image: url(../images/button_right.png);
}
.button:hover::after, #sub-plans-utility-bar .button:last-child::after, .selected::after{
        background-image: url(../images/button_right_hover.png);
}
/*this property below causes weird glitch in IE on home page  */
.button:hover, #sub-plans-utility-bar .button:last-child, .selected{
    color: #fff;
    background-color: #e03434;
     background-image: url(../images/button_chevron_hover.png);
}
/* make it look pressed down on click */
.button:active{
    line-height: 60px;
    box-shadow: inset 0 3px 3px rgba(0,0,0,0.25);
}
.center-me-forum{
    margin: 2em auto;
    display: block;
    width: 180px;
}
/* left facing chevron */
.button-reversed{
    padding-left: 35px;
    background-position: left;
    background-image: url(../images/button_chevron_reversed.png);
}
.button-reversed:hover{
        background-image: url(../images/button_chevron_hover_reversed.png);
}
.selection{
    /* load it in even though we cant see it- to avoid 'blip' on hover while its loading in*/
    background-position: left;
    min-width: 120px;
     background-image: none;
}
.selection:hover{
   background-image: none;
}
/* get rid of blue outline on selected items */
a.selection,
input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}
.selected{
    -moz-transition: padding-left 0.35s ease-in-out;
    -webkit-transition: padding-left 0.35s ease-in-out;
    transition: padding-left 0.35s ease-in-out;
    padding-left: 25px;
      background-image: url(../images/checkmark.png);
}
.selected:hover{
    padding-left: 25px;
      background-image: url(../images/checkmark.png);
}
.disable{
    display: none;
    opacity: 0.25;
}
#next{
    float: right;
    margin-right: 15px; /* pushed over so pointy bits dont get cut off */
}
#previous{
    float: left;
    margin-left: 15px; /* pushed over so pointy bits dont get cut off */
}
/* ========================================================= */
/* ======================== three card ===================== */
/* ========================================================= */
.card-parent{
    display: table;
/*    background-color: coral;*/
    border-collapse:separate;
    border-spacing: 20px;
   width: 100%;
}
/* special for subs plan pg */
.card-parent .three-card{
/*    display: block;*/
    display: table-cell;
    height: 100%;
    overflow: auto;
    overflow-y: hidden;/* had to add this otherwise vertical scrollbars appeared in three-card */
    min-height: 400px;
    background-color: #fff;
    width: 30%;
    color: #27272c;
    transition: all 0.35s ease-in-out;
    border-radius: 3px;
    text-align: center;
}

.three-card{
    display: block;
    height: 100%;
    overflow: auto;
    min-height: 400px;
    background-color: #fff;
    color: #27272c;
    transition: all 0.35s ease-in-out;
    border-radius: 3px;
    text-align: center;
}
.three-card:nth-child(1){
    margin-left: 2.5%;
}
.three-card h3{
    margin: 0.5em auto;
}
.three-card p{
    margin: 0 20px 20px 20px;
}

.center-cards{
    
    
}
.options:hover .three-card, .options:hover .two-card, .options:hover .four-card, .not-selected-card{
    opacity: 0.55;
    filter:blur(1.5px);
}
.options:hover .three-card:hover, .options:hover .two-card:hover, .options:hover .four-card:hover, .selected-card {
    filter: none;
    opacity: 1;
    box-shadow: 0px 0px 24.65px 4.35px rgba(0, 0, 0, 0.27);
}

.three-card .button{
    margin-bottom: 40px;
}
/* image at the top of the 3 options */
.card-img{
    display: block;
    height: 295px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    -webkit-clip-path: polygon(50% 100%, 100% 250px, 100% 0, 0 0, 0 250px);
    clip-path: polygon(50% 100%, 100% 250px, 100% 0, 0 0, 0 250px);
}
#events .card-img{
    -webkit-clip-path: none;
    clip-path: none;
}
.card-campground{
    background-image: url(../images/card_campground.jpg);
}
.card-backcountry{
    -webkit-clip-path: polygon(50% 70%, 100% 250px, 100% 0, 0 0, 0 250px);
     clip-path: polygon(50% 70%, 100% 250px, 100% 0, 0 0, 0 250px);
    background-image: url(../images/card_backcountry.jpg);
}
.card-expedition{
    background-image: url(../images/card_expedition.jpg);
}
/* ========================================================= */
/* ======================== two card ===================== */
/* ========================================================= */
.two-card{
        display: table-cell;

    overflow: auto;
    min-height: 400px;
    background-color: #fff;
    width: 44%;
    color: #27272c;
    transition: all 0.35s ease-in-out;
    border-radius: 3px;
    text-align: center;
    padding: 38px 35px;
}
.two-card .button{
    margin-top: 20px;
}
.two-card h3{
    margin: 30px auto;
}
.two-card:last-of-type{
    margin: 41px  4% 41px 0;
}

.four-card{
    display: block;
    overflow: auto;
    min-height: 400px;
    background-color: #fff;
    width: 23%;
    margin: 41px 2% 41px 0;
    float: left;
    color: #27272c;
    transition: all 0.35s ease-in-out;
    border-radius: 3px;
    text-align: center;
    padding: 10px 10px 38px 10px;
}

.four-card:last-of-type{
    margin-right: 0;
}
.four-card p.smaller {
    min-height: 4em;
}
.four-card h3{
   margin: 1em auto 0.5em auto; 
}
.four-card:first-of-type h3{
    margin-top: 1.83em;
}
.four-card p:first-child{
    text-decoration: line-through;
    margin-bottom: 10px;
    min-height: 2em;
}


.price{
    color: #272b36;
    line-height: 1.4em;
    font-family: bebasneue_regular, 'arial narrow', arial, helvetica, sans-serif;
    font-size: 1.125em; /*18/16 */

}
.price span{
    color: #e03434;
    font-size: 2.8em;/* 60/18 */
    letter-spacing: 0.1em;
}
.please-note{
    clear: both;
    text-align: left;
    margin: 10px auto;
     font-size:  0.75em;/*   12/16*/
}
/* ============================================================================= */
/* ======================== icon lists for sub plans page  ===================== */
/* ============================================================================= */
ul.icon-list{
    width: 50%;
    float: left;
    margin-bottom: 5em;
}
ul.icon-list li{
    display: block;
    overflow: auto;
    width: 330px; /* div img width + p width */
    clear: both;
    margin-bottom: 1.2em;
    
}
ul.icon-list li > div{
    display: block;
    overflow: auto;
    width: 130px;
    float: left;
}
/* give second list less space betwen icons and text */
ul.icon-list:last-child li > div{
    width: 110px;
}
ul.icon-list p{
    display: block;
    float: left;
    width: 180px;
   
}
ul.icon-list img{
    float: left;
}
img.sub-plans-box{
    float: left;
    clear: both;
}
ul.bullet-list{
   margin-bottom: 0.5em;
}

ul.bullet-list li{
     background-image: url('../images/bullet.gif');
    background-repeat: no-repeat;
    background-position: top 13px left;
     padding-left: 20px;
}
 li.button-here{
    margin-top: 2em;
    background-image: none !important;
}
.ten-percent-cta{
/*    list-style-type: disc;*/
    
    width: 280px;
    margin-left: 15px;
    margin-top: 40px;
    line-height: 1.8em;
}
.ten-percent-cta li{
    margin-bottom: 1em;
    padding-left: 20px;
   background-image: url('../images/bullet.gif');
    background-repeat: no-repeat;
    background-position: top 13px left;
}
/* ========================================================= */
/* ============================ home page ===================== */
/* ========================================================= */
.box-sample-img{
    width: 50%;
    max-width: 701px;
}
ul.how-it-works{
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: block;
    overflow: auto;
}
ul.how-it-works li{
    float: left;
    width: 30%;
    margin-right: 2.5%;
    text-align: center;
}
ul.how-it-works li:first-of-type{
    margin-left: 2.5%;
}
ul.how-it-works li:last-of-type{
    margin-right: 2.5%;
}
ul.how-it-works li img{
    margin-bottom: 1.4em;
}
ul.how-it-works li p{
   max-width: 250px;
}
.adventure-seekers{
    padding: 0;
    display: table-row;
    width:100%;
-webkit-clip-path: polygon(25% 13%, 100% 0, 100% 100%, 0 100%, 0 0) !important;
clip-path: polygon(25% 13%, 100% 0, 100% 100%, 0 100%, 0 0) !important;
}
.two-cols{
    width: 50%;
    display: table-cell;
    height: 100%;
    padding: 180px 40px;
}
/* first column */
.adventure-seekers .two-cols:first-child{
     padding: 180px 5%;
}
.adventure-seekers .two-cols:first-child h2{
    text-align: left;
}
.adventure-seekers .two-cols:first-child p{
    margin-left: 0;
}
.adventure-seekers .two-cols:first-child h2::after{
    left: 0px;
    margin-left: 0;
}
.adventure-seekers .two-cols:first-child .button{
    margin: 40px 15px;
}
/* second column */
.adventure-seekers .two-cols:last-of-type {
    background-image: url(../images/happy_hikerv3.jpg);
     background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left;

}
 .partners{
    clip-path: none !important;
     display: table;
     width: 100%;
     max-width: 1400px;
     min-width: 800px;
     margin: 0 auto;
}
.partners .two-cols:first-of-type{
/*    padding: 180px 5%;*/
     padding: 40px 5%;
    min-height: 701px;
    width: 40%;
}
/* change h2 and blip to be left-aligned */
.partners .two-cols  h2, 
.from-the-blog .two-cols:last-of-type h2,
.join-community .two-cols:last-of-type h2 {
    text-align: left;
}
.partners .two-cols:first-child h2::after,
.from-the-blog .two-cols:last-of-type h2::after,
.join-community .two-cols:last-of-type h2::after{
    left: 0px;
    margin-left: 0;
}
/* make second column have logo images */
.partners .two-cols:last-of-type{
    width: 60%;
     background-image: url(../images/partner_logos.jpg);
    background-repeat: no-repeat;
    background-position: left;
    background-size: contain;
  
}
.from-the-blog{
    padding: 3px;
}
.from-the-blog, .join-community{
     padding: 0;
    display: table;
    width:100%;
    vertical-align: middle;
}
.from-the-blog p{
    max-width: 400px;
    margin: 0 0 2em 0;
}
/*first column */
.from-the-blog .two-cols:first-child{
     width: 60%;
     background-image: url(../images/canada_blog.jpg);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
/* second column */
.from-the-blog .two-cols:last-of-type{
    width: 40%;
    overflow: auto;
}
.supplementary h3{
   font-size: 1.125em;/*    18/30*/
    font-family: bebasregular, 'arial black', arial, helvetica, sans-serif;
    line-height: 1.5em;
    text-align: left;
}
/* ========================================================= */
/* ====== home page - bottom quadrants ===================== */
/* ========================================================= */

.supplementary .quadrant-one, .supplementary .quadrant-two, .supplementary .quadrant-three, .supplementary .quadrant-four{
    display: block;
    float: left;
    width: 46%;
    min-height: 380px;
    overflow: auto;
}
.quadrant-one, .quadrant-two{
    margin-bottom: 40px;
  
}
.supplementary .quadrant-one, .supplementary  .quadrant-three{
      margin-left: 2%;
}
.supplementary  .quadrant-two, .supplementary  .quadrant-four{
    float: right;
    margin-left: 2%;
    margin-right: 2%;
    width: 40%;
    min-width: 380px;
}
.supplementary .quadrant-one p, .supplementary .quadrant-three ul li {
 font-size: 0.875em; /* 14/16 */   
}
/*quadrant one styles */
.quadrant-one .two-cols{
    padding: 0;
    float: left;
    display: block;
}
.quadrant-one .two-cols:first-child > img{
    width: 100%;
}
.quadrant-one .two-cols:last-of-type{
    padding-left: 15px;
    padding-right: 40px;
}

.quadrant-one h3{
    margin: 0 0 0.75em 0;
}
/*quadrant two styles */
.quadrant-two h3{
    margin: 0 0 0.75em 0;
}
.quadrant-two > div > img{
    transition: all 0.35s ease-in-out;
   
}
.quadrant-two > div > img:hover{
    opacity: 0.5;
    
}
.quadrant-two > div {
    background-color: #e03434;
    display: block;
    overflow: auto;
     float: left;
    margin-right: 15px;
    cursor: pointer;
    position: relative;
     margin-bottom: 15px;
}

.quadrant-two div:nth-child(5){
    clear: left; 
}
/*make new row when width too small for instagram feed above footer on index pg */
@media(max-width: 1640px){
    .quadrant-two div:nth-child(5){
    clear: none; 
}
        .quadrant-two div:nth-child(6){
    clear: left; 
}
    .quadrant-one .two-cols:first-child{
        width: 90%;
    }
    .quadrant-one .two-cols:last-child{
        clear: left;
        width: 90%;
        padding: 0;
    }
    .quadrant-one .two-cols h3{
        margin-top: 10px;
    }
}
/*quadrant three*/
.quadrant-three{
    padding-right: 40px;
    clear: left;
    padding-bottom: 40px;
}
.quadrant-three img{
    float: left;
}
.quadrant-three > .two-cols:first-of-type {
    background-image: url(../images/ignite_app.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top left;
    
}
.quadrant-three > .two-cols:last-of-type img{
    margin-right: 10px;
    margin-top: 15px;
}
.quadrant-three .two-cols{
    width: 50%;
    padding: 0;
    height: 394px;
    
}
.quadrant-three ul.bullet-list{
    float: left;

}

/*quadrant foour */
.quadrant-four p{
    max-width: 500px;
    margin: 2em 0;
}
input[type='email']{
    height: 48px;
    width: 200px;
    margin: 0;
    border: 1px solid #c2c2c2;
    padding: 10px;
    text-transform: uppercase;
    font-family: bebasregular, 'arial black', arial, helvetica, sans-serif;
    display: block;
     float: left;
    
}

button[type='submit']{
      height: 48px;
    width: 140px;
    margin: 0;
    background-color: #fff;
     display: inline-block;
    border-right: 0px solid #fff;
     border-left: 0px solid #fff;
    float: left;
    border-left: 1px solid  #e03434;
     border-top: 1px solid #e03434;
    border-bottom: 1px solid #e03434;
    color: #e03434;
    text-transform: uppercase;
    line-height: 47px; /* match height */
    font-family: bebasneue_regular, 'arial narrow', arial, helvetica, sans-serif;
    letter-spacing: 0.2em;
    font-size: 1.125em; /* 18/16 */
    position: relative;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}
button[type='submit']::before{
    position: absolute;
    top:0;
    left: 100%;
    content: '';
    display: block;
    width: 14px;
    height: 47px;
    background-image: url(../images/button_right2.png);
    background-repeat: no-repeat;
        transition: all 0.15s ease-in-out;
}

button[type='submit']:hover::before{
   
    background-image: url(../images/button_right_hover2.png);

}
button[type='submit']:hover{
    background-color: #e03434;
    color: #fff;  
}
/* ========================================================= */
/* =============== parralax home scene ===================== */
/* ========================================================= */
#scene{
    height: 100vh;
    width: 100%;
    position: relative;
    top: 0;
    left: 0;
    background-image: url(../images/parallax/layer5.jpg);
    background-repeat: no-repeat;
    z-index: 50;
}
.para-layer-1, .para-layer-2, .para-layer-3, .para-layer-4{
    display: block;
    position: absolute;

}
.para-layer-1{
    top: -100px;
    left: -200px;
/*    top: 60%;*/
}
.para-layer-2{
    top: -50px;
    left: -100px;
}
.para-layer-3{
    top: 430px;
    left: 300px;
}
.para-layer-4{
    top: 150px;
}
header.home .inner-wrapper{
    height: 100%;
    min-width: 800px;
}
header.home{
        background-image: url(../images/home_bannerv2.jpg);
    height: 100vh;
    -webkit-clip-path: none;
    clip-path: none;
    position: relative;
    padding: 0;
    background-attachment: fixed;
}
.home h1{
    margin: 0;
    padding: 0;
    position: absolute;
    left: 0;
    bottom: 35%;
    text-align: right;
}
.intro-blurb{
     position: absolute;
    z-index: 10;
    width: 350px;
   bottom: 30%;
    right: 10%;
    color: #fff;
    line-height: 1.5;
     text-shadow: 0 0 3px rgba(0, 0, 0, 1);
/*
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
    background-color: rgba(0, 0, 0, 0.15);
*/
}
.intro-blurb .button{
    margin-left: 15px;
}

@media (max-width: 1540px){
    .home h1{
        bottom: 40%;
    }
    .intro-blurb{
        bottom: 15%;
        left: 50%;
    }
}/*end media */
/* ========================================================= */
/* ============================ past boxes ===================== */
/* ========================================================= */
header.past-boxes{
    background-image: url(../images/past_boxes.jpg);
}
header.past-boxes h1{
    margin-top: 3em;
}
#home-header-wrapper{
    display: block;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;
}
.campground-sample h2, .backcountry-sample h2, .expedition-sample h2{
    text-align: left;
    margin: 0;
    margin-bottom: 0.3em;
}
.campground-sample h3, .backcountry-sample h3, .expedition-sample h3{
    text-align: left;
    margin: 0;
    margin-bottom: 2.75em;
    position: relative;
}
.campground-sample h3::after, .backcountry-sample h3::after, .expedition-sample h3::after{
        position: absolute;
    content: '';
    width: 100px;
    height: 10px;
    bottom: -1.5em;
    left: 50px;
    margin-left: -50px; /* half of width */
    display: block;
    background-color: #e03434;
}
.campground-sample h2::after, .backcountry-sample h2::after, .expedition-sample h2::after{
  display: none;
}
.campground-sample .button, .backcountry-sample .button, .expedition-sample .button{
    margin-left: 15px;
    
}
/*------------------------------------------------------ campground */
.campground-sample .one-col{
     background-image: url(../images/campground_sample.png);
    background-repeat: no-repeat;
    min-height: 387px;
    background-position: right center; 
}


/*------------------------------------------------------ backcountry*/
.backcountry-sample{
    background-color: #fff !important;
    color: #27272c !important;
    background-image: url(../images/bird_mountain_bg.jpg);
    
}
.backcountry-sample .one-col{
    padding-left: 50%;
     background-image: url(../images/backcountry_sample.png);
    background-repeat: no-repeat;
    min-height: 387px;
    background-position: left center; 
    
}
/*------------------------------------------------------ expedition */

.expedition-sample .one-col{
     background-image: url(../images/expedition_sample.jpg);
    background-repeat: no-repeat;
    min-height: 450px;
    background-position: right center; 
    
}
/*------------------------------------------------------ media queries for making sure bg images for past boxes stay within correct area at all sizes */
@media (max-width: 1400px){
    .campground-sample .one-col{
        background-size: 560px
    }
} /* end media q */
@media (max-width: 1260px){
    .backcountry-sample .one-col{
        background-size: 60%;
    }
     .expedition-sample .one-col{
        background-size: 60%;
    }
 
} /* end max media */
@media (max-width: 1100px){
    .backcountry-sample .one-col{
        background-size: 49%;
    }
} /* end @media */
/*------------------------------------------------------ promo (past boxes pg) */
.promo{
    padding: 140px 0;;
}
.promo img{
    float: right;
   margin-right: 40px;
}
.promo .two-cols{
    width: 50%;
   padding: 0;
    display: block;
    float: left;
}
.promo .two-cols:last-of-type{
    width: 30%;
}
.promo .button{
    margin-left: 30px;
   
}
/* ========================================================= */
/* ======================== about page ===================== */
/* ========================================================= */
header.about h1{
    margin-top: 3em;
}
header.about{
    background-image: url(../images/about_banner.jpg);
}
.our-values{
    background-image: url(../images/bg_climber.jpg);
    background-size: 100%;
    background-position: bottom;
    background-repeat: no-repeat;
}
ul.about-icon-list{
    width: 100%;
    float: left;
    margin-top: 2em;
}

ul.about-icon-list h3{
    color: #fff;
    text-align: left;
    margin-top: 0;
    margin-bottom: 0.5em;
    font-size: 1.125em;/*    18/16*/
}
ul.about-icon-list p{
    width: 100%;
    max-width: 265px;
    margin-left: 0;
    margin-right: 0;
     font-size: 0.875em; /* 14.16*/
    line-height: 1.5625; /* 25/16 */
}
ul.about-icon-list li:first-child{
    margin-right: 5%;
}
ul.about-icon-list li{
    display: block;
    overflow: auto;
    /* width: 330px;  div img width + p width */
/*    clear: both;*/
    width: 47.5%;
    float: left;
    margin-bottom: 1.2em;
    
}
/* the images */
ul.about-icon-list li > div:first-child{
    display: block;
    overflow: auto;
/*    width: 95px;*/
    width: 25%;
    float: left;
}
/* the information */
ul.about-icon-list div:last-child{
    display: block;
    float: left;
/*    width: 180px;*/
    width: 75%;
   
}
ul.about-icon-list img{
    float: left;
}

/*----------------------------- our impact slider */
.wood-bg{
    background-size: cover;
    background-image: url(../images/wood_slats.jpg);
}
.mountain-bg{
    background-position: bottom, top;
    background-repeat: no-repeat;
    background-size: 100%;
    background-image: url(../images/mountain_bg.jpg), url(../images/mountain_upsidedown_bg.jpg);
}
/* at large sizes bg images at top and bottom overlap; create unwanted results */
@media (min-width: 1840px){
    .mountain-bg{
        background-image: url(../images/mountain_bg.jpg), none;
    }
}/* end min width */
.impact-slider{
}
#impact-prev{
    display: none;
}
#impact{
    position: relative;
    width: 990px;
    margin: 0 auto;
    clear:both;
}
#impact-next{
    position: absolute;
    background-image: url(../images/impact_button.png);
    background-repeat: no-repeat;
    background-position: center;
    width: 71px;
    height: 62px;
    top: 47%;
    right: -36px;
    z-index: 10;
    cursor: pointer;
}
#impact-nav{
    width: 990px;
    margin: 0 auto;
    float: none;   
    min-height: 50px;
}
#impact-nav a{
    border: none;
    text-align: left;
}
#impact-nav ul{
    width: 100%;
    margin: 0;
}
#impact-nav li{
    display: block;
    float: left;
    width: 125px;
}
.impact-section{
    width: 990px;
    height: 475px;
    background-image: url(../images/yukon_bg.jpg);
    background-repeat: no-repeat;
    background-position: left;
    background-color: antiquewhite; 
}
#ontario{
    background-image: url(../images/ontario_bg.jpg);
}
#california{
    background-image: url(../images/california_bg.jpg);
}
.impact-section > div::before{
    content: '';
    position: absolute;
    top: 0;
    left: -118px;
    background-image: url(../images/impact_triangle.png);
    background-position: left;
    height: 475px;
    width: 118px;
}
.impact-section > div h3{
    text-align: left;
    margin-top: 0;
    margin-bottom: 1em;
}
.impact-section > div{
    background-color: #fff;
    position: relative;
    display: block;
    float: right;
    height: 475px;
    width: 400px;
    padding: 40px 40px 40px 20px;
}

/* ---------------------------- founders section*/
.founders h3, .founders h4{
    text-align: left;
    margin: 0;
    margin-bottom: 1em;
}
.founders h3{
    color: #fff;
}
.founders h4{
    font-size: 1.875em; /* 30/16 */
    color: #e03434;
    font-family: bebasneue_regular, 'arial narrow', arial, helvetica, sans-serif;
}
.founders p{
    font-size: 0.875em; /* 14/16 */
    line-height: 1.5625; /* 25/16 */
}
.founders, .founders-img{
    display: block;
    overflow: auto;
    min-height: 300px;
    float: left;
}
.founders-img{
    width: 330px; 
}

.founders{
    width: 470px;
    display: block;
    overflow: auto;
    min-height: 300px;
    padding-left: 40px;
    margin-bottom: 80px;
}
.alexis h3, .alexis h4{
        text-align: right;
}
.alexis{
    padding-left: 0;
    padding-right: 40px;
    text-align: right;
}
/* styles for founders signatures */
.founders img{
    display: inline-block;
}
.founder-center{
    display: block;
    margin: 0 auto;
    overflow: auto;
    width: 800px;
}
/* ========================================================= */
/* ========================= community ===================== */
/* ========================================================= */
header.community h1{
    margin-top: 3em;
}
header.community{
     background-image: url(../images/community_banner.jpg);
}
.off-white{
    background-color: #eeeef0;
}
.dark{
    color: #27272c;
}
.events-content p{
    margin: 0;
}
.events-content .button{
    display: block;
    width: 150px;
    margin: 2em auto;
}
.events-content{
    padding: 0 25px;
    text-align: left;
}
.event-1{
    background-image: url(../images/event_1.jpg);  
}
.event-2{
    background-image: url(../images/event_2.jpg);  
     -webkit-clip-path: polygon(50% 70%, 100% 250px, 100% 0, 0 0, 0 250px);
     clip-path: polygon(50% 70%, 100% 250px, 100% 0, 0 0, 0 250px);
}
.event-3{
    background-image: url(../images/event_3.jpg);  
}
.events-info{
    text-transform: uppercase;
    text-align: left;
    margin-bottom: 1em;
}
.events-info th{
    font-family: bebasneue_regular, 'arial narrow', arial, helvetica, sans-serif;
    font-size: 1.125em;
    letter-spacing: 0.1em;
}
.events-info td{
       padding-left: 20px;
}
#events > div{
    max-width: 1200px;
    margin: 0 auto;
}
#view-all-events{
    margin-top: 30px;
    margin-right: 60px;
}

.join-community .two-cols:first-child{
    width: 59%;
    background-image: url(../images/join_us_banner.jpg);
    background-position: bottom;
    background-size: cover;
    background-repeat: no-repeat;
}
.join-community .two-cols:last-child{
    width: 41%;
}
.join-community p{
    max-width: 400px;
    margin: 0 0 2em 0;
}
.join-community .button{
    margin-left: 15px;
}
.post{
    display: table;
    margin: 0 auto 2em auto;
    background-color: #fff;
    width: 715px;
    min-height: 221px;
    overflow: auto;
    position: relative;
}
.post-content{
    display: table-cell;
    width: 561px;
    background-color: #fff;
    padding: 25px;
    position: relative;
    box-shadow: -5px 0 15px rgba(0,0,0,0.1);
}
.post-content p{
    font-size: 0.875em;
    margin: 0;
    line-height: 1.75em;
    max-width: 400px;
}
.post-content h3{
    margin: 0;
    text-align: left;
}
.post-content ul{
    width: 100%;
    overflow: auto;
    display: inline-block;
    margin-top: 10px;
}
.post-content ul li{
    display: block;
    float: left;
    padding-right: 30px;
}
.post-author{
    font-family: bebasneue_regular, 'arial narrow', arial, helvetica, sans-serif;
    display: table-cell;
    width: 154px;
    background-color: #fff;
    padding: 14px 0 14px 14px;
    color: #979ba5;
    letter-spacing: 0.1em;
    font-size: 0.875em;
    line-height: 1.3em;
}
.post-author img{
    margin-top: 15px;
}
.post-author a{
    text-decoration: underline;
    color: #e03434;
    font-size: 1.14285714286em;
}
.post-content ul{
    color: #80848c;
    font-family: bebasneue_regular, 'arial narrow', arial, helvetica, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.post-content::before{
    content: '';
    display: block;
    position: absolute;
    left: -19px;
    bottom: 30px;
    background-image: url(../images/triangle.png);
    background-repeat: no-repeat;
    width: 19px;
    height: 34px;
    z-index: 10;
}

.time{
    padding-left: 20px;
    background-image: url(../images/icon_time.jpg);
    background-repeat: no-repeat;
    background-position: left center;
}
.reply{
    padding-left: 23px;
    background-image: url(../images/icon_reply.jpg);
    background-repeat: no-repeat;
    background-position: left center;
}
.view{
    padding-left: 26px;
    background-image: url(../images/icon_view.jpg);
    background-repeat: no-repeat;
    background-position: left center;
}

.post-go{
    position: absolute;
    background-image: url(../images/impact_button.png);
    background-repeat: no-repeat;
    background-position: center;
    width: 71px;
    height: 62px;
    top: 40%;
    right: -36px;
    z-index: 10;
    cursor: pointer;
}
.community-nav{
    width: 513px !important;
}
.community-nav a{
    text-align: right !important;
    display: block !important;
    float: right !important;
}
/* ========================================================= */
/* ======================== blog page  ===================== */
/* ========================================================= */

header.blog{
    background-image: url(../images/blog_banner.jpg);
    background-position: center;
}
header.blog h1{
    margin-top: 3em;
}
.featured-content{
    width: 480px;
    min-height: 460px;
    overflow: auto;
    padding: 30px;
    background-color: #fff;
    margin: 0 auto;
    display: block;
    position: absolute;
    top: -380px;
    left: 50%;
    transform: translate(-50%, 0);
    line-height: 2.1875em;
}
.featured-content h2{
    margin-bottom: 2.4em;
}
.featured-image{
    width: 900px;
    height: 600px;
    display: block;
    margin: 300px auto 0 auto;
    position: relative;
}
.featured-image img{
    width: 100%;
}
#blog-util{
    background-color: #eeeef0;
    display: block;
    width: 100%;
    min-height: 115px;
    font-family: bebasneue_regular, 'arial narrow', arial, helvetica, sans-serif;
    font-size: 1.125em;
    letter-spacing: 0.2em;
    margin-top: 25px;
}
#blog-util ul li a{
    color: #e03434;
    text-decoration: none;
    width: 100%;
    height: 100%;
    display: block;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
#blog-util-container{
    width: 900px;
    display: block;
    overflow: auto;
    margin: 0 auto;
}
#blog-util ul{
    display: block;
    overflow: auto;
    width: 580px;
    float: left;
    line-height: 115px;
}
#blog-util ul li{
    display: block;
    float: left;
    width: 25%;
    text-align: center;
}
form.search {
    display: block;
    width: 260px;
    float: right;
    height: 115px;
}
form.search input[type=text] {
    margin-top: 42px;
    height: 26px;
    width: 212px;
    font-family: bebasneue_regular, 'arial narrow', arial, helvetica, sans-serif;
    font-size: 100%;
    color: #595c65;
    padding: 3px;
    letter-spacing: 0.1em;
    border: 1px solid #d9d9d9;
}
form.search input[type=submit] {
    background-image: url(../images/icon_search.png);
    background-repeat: no-repeat;
    width: 24px;
    height: 26px;
    background-position: bottom right;
    border: none;
    background-color: transparent;
    cursor: pointer;
}
#blog-previews{
    width: 900px;
    display: block;
    margin: 25px auto 0 auto;
    overflow: auto;
}
.blog-preview{
    background-color: #fff;
    width: 285px;
    margin-right: 22px;
    margin-bottom: 22px;
    min-height: 469px;
    display: block;
    float: left;
    -moz-transition: box-shadow 0.3s ease-in-out;
    -webkit-transition: box-shadow 0.3s ease-in-out;
    transition: box-shadow 0.3s ease-in-out;
}
.blog-preview:hover{
    box-shadow: 0 0 25px rgba(0,0,0,0.2);
}
.blog-preview h3{
    margin: 0;
    margin-bottom: 15px;
    text-align: left;
}
.blog-preview p{
    font-size: 0.875em;
    line-height: 1.5625em;
}

.blog-preview a.text-link{
    float: right;
    margin-right: 15px;
    margin-bottom: 15px;
}
.pad-it{
    display: block;
    width: 100%;
    padding: 15px 15px;
    min-height: 240px;
}
.pad-it p{
    color: #27272c;
}
.blog-date{
    font-style: italic;
}
.no-right-margin{
    margin-right: 0;
}
.blog-view-button{
    display: block;
    width: 200px;
    margin: 50px auto 0 auto;
}
/* ========================================================= */
/* ============================ internal pg styles (loyalty program) ============ */
/* ========================================================= */
header.internal{
    -webkit-clip-path: none;
    clip-path: none;
    background-color: transparent;
    min-height: 400px;
}
.color-strip{
    display: block;
    overflow: auto;
    background-color: #232730;
    padding-bottom: 20px;
}
/* no gradient overlay on this header */
header.internal::before{
    display: none;
}
header.internal h1{
    color: #e03434;
}
ul.loyalty {
    margin-top: 1em;
/*    width: 450px;*/
}
ul.loyalty li{
    overflow: auto;
    margin-bottom: 3em;
}
ul.loyalty li p{
    float: right;
    width: 250px;
    font-size: 0.875em;
    line-height: 1.6;
}
ul.loyalty li > div{
    width: 80px;
}
ul.loyalty li h3{
    margin: 0;
    margin-bottom: 0.25em;
    text-align: left;
}
ul.loyalty:last-of-type li > div{
    width: 80px;
}
.loyalty-intro{
    width: 400px;
    margin-top: 40px;
    margin-left: 45px;
    margin-bottom: 100px;
}
.my-profile{
    margin-left: 15px;
    margin-top: 40px;
}
.using-points  div{
    display: block;
    width: 50%;
    overflow: hidden;
    float: left;
}
.using-points  div:first-of-type{
    padding-right: 60px;
}
.using-points  div:last-of-type{
    padding-left: 20px;
}
.points-table{
    width: 235px;
}
.points-table th{
    text-align: left;
    font-family: bebasneue_regular, 'arial narrow', arial, helvetica, sans-serif;
    letter-spacing: 0.1em;
    font-size: 1.125em; /* 18/16 */
    background-color: #454c60;
    padding: 5px 16px; 
}
.points-table td{
    padding: 5px 16px;
}
.points-table tr:nth-child(odd){
    background-color: rgba(89, 92, 101, 0.15);
}
/* ========================================================= */
/* ============================ blog entry 1 ===================== */
/* ========================================================= */

.full-width-img{
    width: 100%;
    display: block;
    margin-top: 160px;
}
.blog-entry h2{
    margin-top: 40px;
}
.blog-entry p{
    font-size: 0.875em;
}
.blog-section{
    margin-bottom: 50px;
}
figcaption{
   font-style: italic;
    font-size: 0.8em;
    color: #595c65;
    text-align: right;
    float: right;
    display: block;
    width: 100%;
    margin-bottom: 20px;
}

.blog-post-header h1{
    font-size: 3.5em;
    max-width: 900px;
    margin: 80px auto 0 auto;
}
#blog-next-prev{
    display: block;
    width: 100%;
    min-height: 80px;
    padding: 20px;
    background-color: #eeeeef;
}
#blog-next{
    display: block;
    float: right;
}
#blog-prev{
    display: block;
    float: left;
}
/* ========================================================= */
/* ============================ footer ===================== */
/* ========================================================= */
footer h5{
    text-align: left;
}
footer{
    display: block;
    min-height: 400px;
    background-size: cover;
    background-image: url(../images/wood_slats.jpg);
    padding-bottom: 60px;
}

.three-col{
    display: block;
    float: left;
    width: 24%;
    margin: 0 7%;
}
footer a.button{
    margin: 30px 0 30px 15px;
}
/* no margin on middle column */
.three-col:nth-child(2){
    margin: 0;
}

footer p{
    font-size: 0.875em; /* 14/16 */
}
.footer-blog-teaser{
    margin-bottom: 1.5em;
    
}
#ignite-perks{
    margin-top: 2.5em;
}
img.social{
  float: left;
    margin-right: 20px;
    transform: scale(0.9);
    opacity: 0.9;
    transition: all 0.35s ease-in-out;
}
img.social:hover{
    transform: scale(1);
    opacity: 1;
}
.credits{
    clear: both;
    margin: 0 auto;
    font-size: 0.75em;
    text-align: center;
}
.credits a{
    color: #949bad;
}