Grid Columns


            

            

            

            

Section Title and Description


             

Section One.

Section Description lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis illum maiores hic officia, vero eaque dignissimos veniam esse fugiat? Dignissimos, vel. Facilis illo incidunt dolores aspernatur numquam, rem illum nisi porro vero, assumenda voluptatibus labore. Velit blanditiis dolores magni autem et animi omnis odio inventore illo nisi, esse recusandae a quasi.

Anchor Nav Bar

Starter Packs


            

[geoipCode countrycodes='gb']£999[/geoipCode][geoipCode regions='eu']13999€[/geoipCode][geoipCode regions='northamerica,asia,latam' countrycodes='au']$14999[/geoipCode]

Pack Title
  •  

Pack Description

[geoipCode countrycodes='gb']£7499[/geoipCode][geoipCode regions='eu']9199€[/geoipCode][geoipCode regions='northamerica,asia,latam' countrycodes='au']$9999[/geoipCode]

Pack Title
  •  

Pack Description

[geoipCode countrycodes='gb']£3699[/geoipCode][geoipCode regions='eu']4599€[/geoipCode][geoipCode regions='northamerica,asia,latam' countrycodes='au']$4999[/geoipCode]

Pack Title
  •  

Pack Description

  • Dogs are cool
  • Cats are ok
  • Birds are lame
Buy Now
  • Dogs are cool
  • Cats are ok
  • Birds are lame
Buy Now
  • Dogs are cool
  • Cats are ok
  • Birds are lame
Buy Now

               
...
  • Dogs are cool
  • Cats are ok
  • Birds are lame
...
  • Dogs are cool
  • Cats are ok
  • Birds are lame
...
...
  • Dogs are cool
  • Cats are ok
  • Birds are lame
...

               .pack-list li[class*="-dog"]:before{background-image:url(game/icons/dog.png);}
               .pack-list li[class*="-cat"]:before{background-image:url(game/icons/cat.png);}
               .pack-list li[class*="-bird"]:before{background-image:url(game/icons/bird.png);}
               
               /*
               
               If a "plus" class exists in any <li> tag within .packlist,
               the numbers are added dynamically into <style id="dynamic-pack-icon-numbers">
               by addIconStyles() in functions.js
               
               */
             

Item Lists


             
  • Title 1Description 1
  • Title 2Description 2
  • Title 3Description 3
  • Title 4Description 4
  • Title 5Description 5
  • Title 6Description 6

             
  • Title 1Description 1
  • Title 2Description 2
  • Title 3Description 3
  • Title 4Description 4
  • Title 5Description 5
  • Title 6Description 6

Alternate Pack Layout


             

Description 1

Title 1

Subtitle 1

Description 2

Title 2

Subtitle 2

Description 3

Title 3

Subtitle 3

Description 3

Title 3

Subtitle 3

Special Items Layout


            
Title 1

Description 1

Buy Now
Title 2

Description 2

Buy Now
Title 3

Description 3

Buy Now

            
Title 1

Description 1

Buy Now
Title 2

Description 2

Buy Now
Title 3

Description 3

Buy Now

            
Title 1

Description 1

Buy Now
Title 2

Description 2

Buy Now
Title 3

Description 3

Buy Now

Patron Price Buttons


             

1 Month

[geoipCode countrycodes='gb'](£899 Total Price)[/geoipCode][geoipCode regions='eu'](1299€ Total Price)[/geoipCode][geoipCode regions='northamerica,asia,latam' countrycodes='au']($1499 Total Price)[/geoipCode]

[geoipCode countrycodes='gb']£899[/geoipCode][geoipCode regions='eu']1299€[/geoipCode][geoipCode regions='northamerica,asia,latam' countrycodes='au']$1499[/geoipCode]

Monthly

Buy Now

3 Months

[geoipCode countrycodes='gb'](£2397 Total Price)[/geoipCode][geoipCode regions='eu'](3597€ Total Price)[/geoipCode][geoipCode regions='northamerica,asia,latam' countrycodes='au']($3897 Total Price)[/geoipCode]

[geoipCode countrycodes='gb']£799[/geoipCode][geoipCode regions='eu']1199€[/geoipCode][geoipCode regions='northamerica,asia,latam' countrycodes='au']$1299[/geoipCode]

Monthly

Buy Now

6 Months

[geoipCode countrycodes='gb'](£4194 Total Price)[/geoipCode][geoipCode regions='eu'](5994€ Total Price)[/geoipCode][geoipCode regions='northamerica,asia,latam' countrycodes='au']($6594 Total Price)[/geoipCode]

[geoipCode countrycodes='gb']£659[/geoipCode][geoipCode regions='eu']999€[/geoipCode][geoipCode regions='northamerica,asia,latam' countrycodes='au']$1099[/geoipCode]

Monthly

Buy Now

12 Months

[geoipCode countrycodes='gb'](£5894 Total Price)[/geoipCode][geoipCode regions='eu'](7494€ Total Price)[/geoipCode][geoipCode regions='northamerica,asia,latam' countrycodes='au']($8394 Total Price)[/geoipCode]

[geoipCode countrycodes='gb']£459[/geoipCode][geoipCode regions='eu']9629€[/geoipCode][geoipCode regions='northamerica,asia,latam' countrycodes='au']$699[/geoipCode]

Monthly

Buy Now

Game-specific Stylesheet


            /*-=-=-=-=-=-=-=-=-=-=-=-=-=-
             STORE PAGE STYLES BEGIN
            -=-=-=-=-=-=-=-=-=-=-=-=-=-*/
            body[class*="store"] {
              background-repeat: no-repeat !important;
              background-attachment: scroll !important;
            }

            /*-=-=-=-=-=-=-=-=-=-=-=-
              HEADER BUTTONS
            -=-=-=-=-=-=-=-=-=-=-=-*/
            body[class*="store"] #content .g12, .anchor > span:nth-of-type(2), .anchor:hover > span:nth-of-type(1) {
              display: none;
            }

            .anchor {
              border-bottom: solid 3px #fff981;
              background-position: center -20px;
            }

            .anchor:nth-child(1), .anchor:nth-child(1) .anchor-desc--img {
              background-image: url(images/header-nav-img1.png);
            }

            .anchor:nth-child(2), .anchor:nth-child(2) .anchor-desc--img {
              background-image: url(images/header-nav-img2.png);
            }

            .anchor:nth-child(3), .anchor:nth-child(3) .anchor-desc--img {
              background-image: url(images/header-nav-img3.png);
            }

            .anchor:nth-child(4), .anchor:nth-child(4) .anchor-desc--img {
              background-image: url(images/header-nav-img4.png);
            }

            .anchor:before {
              background: rgba(34, 20, 2, 0.65);
            }

            .anchor:hover:before {
              background: rgba(34, 20, 2, 0.5);
            }

            .anchor > span {
              text-shadow: 0 0 10px #000,0 0 10px #000;
              color: #fff;
              font-weight: 700;
              font-size: 19px;
              line-height: 23px;
              font-family: 'libre baskerville',Georgia,Times,serif;
              word-spacing: 2px;
            }

            .anchor:hover > span {
              color: #fff;
            }

            /*-=-=-=-=-=-=-=-=-=-=-=-
              HEADER POPUPS
            -=-=-=-=-=-=-=-=-=-=-=-*/
            .anchor-desc {
              box-shadow: 0 4px 5px rgba(34, 20, 2, 0.6);
            }

            .anchor-desc, .anchor-desc:after {
              background-color: #FFFBED;
              border: 1px solid #a16b57;
            }

            .anchor-desc--img {
              box-shadow: inset 0 0 0 1px #a16b57;
            }

            .anchor-desc--title {
              color: #3F352C;
              font-weight: 700;
            }

            .anchor-desc--blurb {
              color: #8D6E50;
              font-size: 14px;
              line-height: 21px;
            }

            /*-=-=-=-=-=-=-=-=-=-=-=-
              TEXT STYLES
            -=-=-=-=-=-=-=-=-=-=-=-*/
            .sect-info {
              font-size: 18px;
              line-height: 28px;
              margin: 25px 0;
              color: #876147;
            }

            .sect-title {
              font-size: 50px;
              line-height: 50px;
              background-position: left 0 bottom 12px;
            }

            /*-=-=-=-=-=-=-=-=-=-=-=-
              STARTER PACKS
            -=-=-=-=-=-=-=-=-=-=-=-*/
            .starter-pack--type-1 > div {
              background-image: url(images/starter-pack-img1.jpg);
            }

            .starter-pack--type-2 > div {
              background-image: url(images/starter-pack-img2.jpg);
            }

            .starter-pack--type-3 > div {
              background-image: url(images/starter-pack-img3.jpg);
            }

            [class^="starter-pack--type"]:after, [class^="starter-pack--type"] p {
              background-color: #5e4f3e;
            }

            body[class*="store"] [id^="starter-"] em {
              color: #fff;
              font-weight: 700;
              font-size: 40px;
            }

            [class^="starter-pack--type"] p {
              color: #FFFBED;
              margin: 0;
              font-size: 13px;
              line-height: 22px;
              padding: 0 10px 5px;
            }

            /*-=-=-=-=-=-=-=-=-=-=-=-
              STARTER PACKS ITEMS
            -=-=-=-=-=-=-=-=-=-=-=-*/
            .pack-list > ul li span {
              padding: 0 0 0 75px;
            }

            .pack-list > ul li {
              padding: 0 12px;
              font-size: 15px;
              line-height: 19px;
              height: 85px;
            }

            .pack-list > ul li:nth-child(odd) {
              background-color: #fffbed;
            }

            .pack-list > ul li:nth-child(even) {
              background-color: #f4eed8;
            }

            .pack-list > ul li:before {
              width: 75px;
              height: 75px;
              transform: translate(10px, -50%);
              -webkit-transform: translate(10px, -50%);
              background-repeat: no-repeat;
            }

            .cta span:before, .cta:after, .cta:before {
              background-image: url(images/cta-sprite.png);
            }

            .cta {
              margin: 15px 0 0;
            }
            .cta span {
              font-size: 25px;
              color: #fff;
              font-family: 'gothambold';
              text-shadow: 0 -2px 4px #FF2700;
              letter-spacing: -0.03em;
            }

            .cta.disabled span {
              color: #444;
              text-shadow: none;
            }

            /*-=-=-=-=-=-=-=-=-=-=-=-
              STARTER PACKS ICONS
            -=-=-=-=-=-=-=-=-=-=-=-*/
            .pack-list li[class^="pack"]:before {
              background-position: 0 -76px;
            }

            .pack-list li[class*="plus"]:before {
              background-position: 0 0;
            }

            .pack-list li[class*="-dog"]:before {
              background-image: url(images/pack-icons-dog.png);
            }

            .pack-list li[class*="-cat"]:before {
              background-image: url(images/pack-icons-cat.png);
            }

            .pack-list li[class*="-bird"]:before {
              background-image: url(images/pack-icons-bird.png);
            }

            .pack-list li[class*="plus"]:after {
              position: absolute;
              top: 10px;
              left: 41px;
              width: 25px;
              text-align: center;
              z-index: 1;
              color: #fff;
              font-size: 10px;
            }

            .pack-list li span:before {
              font-weight: 700;
              color: #47281c;
            }

            /*-=-=-=-=-=-=-=-=-=-=-=-
             ALTERNATE PACKS
            -=-=-=-=-=-=-=-=-=-=-=-*/
            .alt-pack--item {
              border: 1px solid #493822;
            }

            .alt-pack--item:nth-of-type(1) {
              background-image: url(images/alt-pack-img1.png);
            }

            .alt-pack--item:nth-of-type(2) {
              background-image: url(images/alt-pack-img2.png);
            }

            .alt-pack--item:nth-of-type(3) {
              background-image: url(images/alt-pack-img3.png);
            }

            .alt-pack--info h3 {
              font-size: 28px;
              line-height: 35px;
              margin-bottom: -11px;
              color: #fff;
            }

            .alt-pack--info h5 {
              font-size: 18px;
            }

            .alt-pack--info .info-btn-2 {
              font-size: 16px;
              padding: 6px 18px;
            }

            .alt-pack--item p {
              background-color: rgba(94, 79, 62, 0.88);
              line-height: 22px;
              color: #FFFBED;
              bottom: 61px !important;
            }

            .alt-pack--item p:after {
              height: 2px;
              background-position: bottom repeat-x;
            }

            /*-=-=-=-=-=-=-=-=-=-=-=-
             ALTERNATE PACKS' LOWER MENU
            -=-=-=-=-=-=-=-=-=-=-=-*/
            [class$="pack--info"] {
              background: #072525 \9;
              background-image: linear-gradient(to bottom, rgba(94, 79, 62, 0.85) 30%, #5e4f3e);
            }

            .pack--info-L * {
              font-family: "gothammedium";
            }

            .pack--info-L h5 {
              font-size: 16px;
              font-style: italic;
              color: #fff981;
            }

            [lang*="de"] .pack--info-L h5 {
              font-size: 12px;
              top: 2px;
            }

            [class^="info-btn"] {
              background-color: rgba(0, 0, 0, 0.3);
              border-radius: 2px;
              border: 1px solid #fff;
              color: #fff;
              font-size: 9px;
              padding: 0 6px;
            }

            button[class^="info-btn"] {
              padding: 5px 6px;
            }

            [class^="info-btn"]:hover {
              color: #fff;
              background-color: rgba(0, 0, 0, 0.9);
              box-shadow: 0 0 7px #FF9B00;
            }

            /*-=-=-=-=-=-=-=-=-=-=-=-
             ITEM LIST
            -=-=-=-=-=-=-=-=-=-=-=-*/
            .item-list li:before {
              top: 15px;
              left: 15px;
            }

            .item-list li {
              padding: 15px 15px 15px 105px;
              min-height: 102px;
            }

            #patron-items li {
              background-color: #b09a7d;
              box-shadow: inset 0 0 0 1px #493822, inset 0 0 0 3px #836D4F;
            }

            #patron-items li:before {
              border: 1px solid #fff;
            }

            #patron-items li span {
              font-size: 14px;
              color: #fff;
            }

            #patron-items strong {
              font-size: 17px;
              color: #493822;
            }

            #patron-items li:nth-child(1):before {
              background-image: url(images/patron-item-img1.jpg);
            }

            #patron-items li:nth-child(2):before {
              background-image: url(images/patron-item-img2.jpg);
            }

            #patron-items li:nth-child(3):before {
              background-image: url(images/patron-item-img3.jpg);
            }

            #patron-items li:nth-child(4):before {
              background-image: url(images/patron-item-img4.jpg);
            }

            #patron-items li:nth-child(5):before {
              background-image: url(images/patron-item-img5.jpg);
            }

            #patron-items li:nth-child(6):before {
              background-image: url(images/patron-item-img6.jpg);
            }

            /*-=-=-=-=-=-=-=-=-=-=-=-
             SPECIAL ITEMS
            -=-=-=-=-=-=-=-=-=-=-=-*/
            .item-special--desc {
              background-color: #fff;
            }

            .item-special--type {
              border: 1px solid #836d4f;
            }

            .item-special--type h5 {
              color: #493822;
            }

            .item-special--type:nth-of-type(1) {
              background-image: url(images/special-item-img1.jpg);
            }

            .item-special--type:nth-of-type(2) {
              background-image: url(images/special-item-img2.jpg);
            }

            /*-=-=-=-=-=-=-=-=-=-=-=-
             PATRON
            -=-=-=-=-=-=-=-=-=-=-=-*/
            #patron a:before {
              background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.3) 5px, transparent 4px, transparent 15px);
            }

            .patron-amount {
              background-color: #fff;
              padding: 11px;
              font-size: 16px;
              color: #111;
              font-weight: 700;
            }

            .patron-value {
              font-size: 12px;
              color: #222;
              margin: 13px 0 0;
              padding: 3px;
              background-color: rgba(255, 255, 255, 0.4);
            }

            .patron-value {
              font-size: 12px;
              color: #222;
              margin: 13px 0 0;
              padding: 3px;
              background-color: rgba(255, 255, 255, 0.4);
            }

            .patron-payment {
              font-size: 80px;
              font-weight: 700;
              margin: 39px 0 35px;
              letter-spacing: -0.01em;
            }

            .patron-cta {
              border-top: 2px solid #fff;
            }

            .patron-cta p {
              font-size: 19px;
              font-weight: 700;
              letter-spacing: 1px;
              border: 1px solid #fff;
              background: rgba(0, 0, 0, 0.35);
              color: #fff;
            }

            a[class^="patron"]:hover .patron-cta p {
              background: #ff6207;
              box-shadow: inset 0 0 30px rgba(211, 0, 0, 0.75);
              text-shadow: 0 -2px 0 #CF3700;
            }

            .patron-1 {
              background: #BFC6C7;
            }

            .patron-1:hover {
              background: #D3D5D5;
            }

            .patron-1 .patron-amount {
              box-shadow: 0 2px 0 0 rgba(76, 86, 86, 0.6);
            }

            .patron-1 .patron-payment {
              text-shadow: 0 0 50px white, 0 3px 0 #eaeaea;
            }

            .patron-1 .patron-payment, .patron-1 .patron-period {
              color: #283030;
            }

            .patron-1 .patron-cta {
              background: rgba(17, 19, 19, 0.8);
            }

            .patron-2 {
              background: #66CFED;
            }

            .patron-2:hover {
              background: #7ED6EF;
            }

            .patron-2 .patron-amount {
              box-shadow: 0 2px 0 0 #187a96;
            }

            .patron-2 .patron-payment {
              text-shadow: 0 0 50px white, 0 3px 0 rgba(0, 99, 211, 0.75);
            }

            .patron-2 .patron-payment, .patron-2 .patron-period {
              color: #000a52;
            }

            .patron-2 .patron-cta {
              background: rgba(9, 14, 36, 0.8);
            }

            .patron-3 {
              background: #84CF60;
            }

            .patron-3:hover {
              background: #92DA70;
            }

            .patron-3 .patron-amount {
              box-shadow: 0 2px 0 0 #3e8037;
            }

            .patron-3 .patron-payment {
              text-shadow: 0 0 50px white, 0 3px 0 #098e00;
            }

            .patron-3 .patron-payment, .patron-3 .patron-period {
              color: #0d2c06;
            }

            .patron-3 .patron-cta {
              background: rgba(9, 27, 2, 0.8);
            }

            .patron-4 {
              background: #F2C022;
            }

            .patron-4:hover {
              background: #FFCD2F;
            }

            .patron-4 .patron-amount {
              box-shadow: 0 2px 0 0 rgba(215, 98, 0, 0.6);
            }

            .patron-4 .patron-payment {
              text-shadow: 0 0 50px white, 0 3px 0 rgba(255, 107, 0, 0.6);
            }

            .patron-4 .patron-payment, .patron-4 .patron-period {
              color: #4c2000;
            }

            .patron-4 .patron-cta {
              background: rgba(23, 11, 0, 0.8);
            }

            /*-=-=-=-=-=-=-=-=-=-=-=-=-=-
             STORE PAGE MEDIA QUERIES
            -=-=-=-=-=-=-=-=-=-=-=-=-=-*/
            @media (max-width: 1396px) and (min-width: 959px) {
              .cta {
                width: 100%;
              }
            }
            @media only screen and (max-width: 959px), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
              .anchor > span {
                font-size: 21px;
                line-height: 25px;
              }

              .starter-pack--info h3 {
                font-size: 40px;
                line-height: 53px;
                margin-bottom: -15px;
              }

              .pack--info-L h5 {
                font-size: 20px;
              }

              [class^="starter-pack--type"] p {
                font-size: 17px;
                line-height: 25px;
                padding: 2px 16px 16px;
              }

              [class^="info-btn"] {
                font-size: 15px;
                padding: 6px 18px;
                margin: -8px 10px 0 0;
              }

              .alt-pack--item p {
                background-image: linear-gradient(to bottom, rgba(94, 79, 62, 0) 30%, #5e4f3e);
              }

              .alt-pack--info h3 {
                font-size: 32px;
                line-height: 37px;
              }

              .alt-pack--info {
                background-color: #5e4f3e;
              }

              .cta {
                width: 60%;
                height: 75px;
                padding-top: 21px;
                font-size: 30px;
              }

              [lang*="de"] .pack--info-L h5 {
                font-size: 16px;
                top: 0;
              }

              .patron-cta p {
                font-size: 15px;
              }
            }
            @media only screen and (max-width: 768px) and (orientation: portrait), only screen and (max-width: 767px) {
              .sect-title {
                background-position: left 0 bottom 30px;
                padding: 35px 0 42px;
                font-size: 38px;
                line-height: 36px;
              }

              .alt-pack--info h3 {
                font-size: 25px;
                line-height: 38px;
              }

              .alt-pack--info h5 {
                font-size: 18px;
              }

              .language-fr .alt-pack--info .info-btn-2 {
                font-size: 13px;
              }

              .cta {
                width: 100%;
              }
            }
            @media only screen and (max-width: 479px) {
              .alt-pack--info h3 {
                line-height: 43px;
                margin-bottom: -16px;
              }

              .pack--info-L h3 {
                font-size: 31px;
                line-height: 51px;
              }

              .pack--info-L h5 {
                font-size: 16px;
              }
            }
            /*-=-=-=-=-=-=-=-=-=-=-=-=-=-
             STORE PAGE STYLES END
            -=-=-=-=-=-=-=-=-=-=-=-=-=-*/
            /* Sass file compiled at http://codepen.io/miguelzuleta/pen/oXvYgG?editors=010 */

        

            // IMAGE FILE PATHS
            $img_root:'images/';
            $nav_header_buttons:png, header-nav-, img1 img2 img3 img4;
            $starter_pack_images:jpg, starter-pack-, img1 img2 img3;
            $starter_pack_icons:png, pack-icons-, dog cat bird;
            $alt_pack_images:png, alt-pack-, img1 img2 img3;
            $patron_item_thumbnails:jpg, patron-item-, img1 img2 img3 img4 img5 img6;
            $special_item_images:jpg, special-item-, img1 img2;
            $section_title_underscore:'text-pattern-1.png';
            $alt_pack_divider:'text-pattern-2.png';
            $cta_button_sprite:'cta-sprite.png';

            // MIXINS
            @mixin loopImgURL($imgVar,$looper){
               background-image:url(unquote($img_root)+nth($imgVar,2)+nth(nth($imgVar,3),$looper)+unquote('.')+nth($imgVar,1));
            }

            @mixin singleImgURL($img){
               background-image:url(unquote($img_root)+unquote($img));
            }

            /*-=-=-=-=-=-=-=-=-=-=-=-=-=-
             STORE PAGE STYLES BEGIN
            -=-=-=-=-=-=-=-=-=-=-=-=-=-*/

            body[class*="store"] {
                background-repeat:no-repeat!important;
                background-attachment:scroll!important
            }

            /*-=-=-=-=-=-=-=-=-=-=-=-
              HEADER BUTTONS
            -=-=-=-=-=-=-=-=-=-=-=-*/
            body[class*="store"] #content .g12,.anchor > span:nth-of-type(2),.anchor:hover > span:nth-of-type(1) {
                display:none
            }

            .anchor {
                border-bottom:solid 3px #fff981;
                background-position:center -20px
            }

            @for $i from 1 through length(nth($nav_header_buttons,3)){
              .anchor:nth-child(#{$i}), .anchor:nth-child(#{$i}) .anchor-desc--img {
                 @include loopImgURL($nav_header_buttons,$i);
               }
            }

            .anchor:before {
                background:rgba(34,20,2,0.65)
            }

            .anchor:hover:before {
                background:rgba(34,20,2,0.5)
            }

            .anchor > span {
                text-shadow:0 0 10px #000,0 0 10px #000;
                color:#fff;
                font-weight:700;
                font-size:19px;
                line-height:23px;
                font-family:'libre baskerville',Georgia,Times,serif;
                word-spacing:2px
            }

            .anchor:hover > span {
                color:#fff
            }

            /*-=-=-=-=-=-=-=-=-=-=-=-
              HEADER POPUPS
            -=-=-=-=-=-=-=-=-=-=-=-*/
            .anchor-desc {
                box-shadow:0 4px 5px rgba(34,20,2,0.6)
            }

            .anchor-desc,.anchor-desc:after {
                background-color:#FFFBED;
                border:1px solid rgba(161,107,87,1)
            }

            .anchor-desc--img {
                box-shadow:inset 0 0 0 1px rgba(161,107,87,1)
            }

            .anchor-desc--title {
                color:#3F352C;
                font-weight:700
            }

            .anchor-desc--blurb {
                color:#8D6E50;
                font-size:14px;
                line-height:21px
            }

            /*-=-=-=-=-=-=-=-=-=-=-=-
              TEXT STYLES
            -=-=-=-=-=-=-=-=-=-=-=-*/
            .sect-info {
                font-size:18px;
                line-height:28px;
                margin:25px 0;
                color:#876147
            }

            .sect-title {
                font-size:50px;
                line-height:50px;
                background-position:left 0 bottom 12px
            }

            /*-=-=-=-=-=-=-=-=-=-=-=-
              STARTER PACKS
            -=-=-=-=-=-=-=-=-=-=-=-*/
            @for $i from 1 through length(nth($starter_pack_images,3)){
              .starter-pack--type-#{$i} > div{
                @include loopImgURL($starter_pack_images,$i);
              }
            }

            [class^="starter-pack--type"]:after,[class^="starter-pack--type"] p {
                background-color:rgba(94,79,62,1)
            }

            body[class*="store"] [id^="starter-"] em {
                color:#fff;
                font-weight:700;
                font-size:40px
            }

            [class^="starter-pack--type"] p {
                color:#FFFBED;
                margin:0;
                font-size:13px;
                line-height:22px;
                padding:0 10px 5px
            }

            /*-=-=-=-=-=-=-=-=-=-=-=-
              STARTER PACKS ITEMS
            -=-=-=-=-=-=-=-=-=-=-=-*/
            .pack-list > ul li span {
                padding:0 0 0 75px
            }

            .pack-list > ul li {
                padding:0 12px;
                font-size:15px;
                line-height:19px;
                height:85px
            }

            .pack-list > ul li:nth-child(odd) {
                background-color:rgba(255,251,237,1)
            }

            .pack-list > ul li:nth-child(even) {
                background-color:rgba(244,238,216,1)
            }

            .pack-list > ul li:before {
                width:75px;
                height:75px;
                transform:translate(10px,-50%);
                -webkit-transform:translate(10px,-50%);
                background-repeat:no-repeat
            }

            .cta span:before, .cta:after, .cta:before{
              background-image:url(unquote($img_root)+$cta_button_sprite);
            }
            .cta{
              margin:15px 0 0;

              span{
                font-size:25px;
                color:#fff;
                font-family:'gothambold';
                text-shadow:0 -2px 4px #FF2700;
                letter-spacing:-0.03em;
              }
            }
            .cta.disabled span{
              color:#444;
              text-shadow:none;
            }

            /*-=-=-=-=-=-=-=-=-=-=-=-
              STARTER PACKS ICONS
            -=-=-=-=-=-=-=-=-=-=-=-*/
            .pack-list li[class^="pack"]:before {
                background-position:0 -76px
            }

            .pack-list li[class*="plus"]:before {
                background-position:0 0
            }

            @for $i from 1 through length(nth($starter_pack_icons,3)){
              .pack-list li[class*="-#{nth(nth($starter_pack_icons,3),$i)}"]:before{
                @include loopImgURL($starter_pack_icons,$i);
              }
            }

            .pack-list li[class*="plus"]:after {
                position:absolute;
                top:10px;
                left:41px;
                width:25px;
                text-align:center;
                z-index:1;
                color:#fff;
                font-size:10px
            }

            .pack-list li span:before {
                font-weight:700;
                color:#47281c
            }

            /*-=-=-=-=-=-=-=-=-=-=-=-
             ALTERNATE PACKS
            -=-=-=-=-=-=-=-=-=-=-=-*/
            .alt-pack--item {
                border:1px solid #493822
            }

            @for $i from 1 through length(nth($alt_pack_images,3)){
              .alt-pack--item:nth-of-type(#{$i}){
                @include loopImgURL($alt_pack_images,$i);
              }
            }

            .alt-pack--info h3 {
                font-size:28px;
                line-height:35px;
                margin-bottom:-11px;
                color:#fff
            }

            .alt-pack--info h5 {
                font-size:18px
            }

            .alt-pack--info .info-btn-2 {
                font-size:16px;
                padding:6px 18px
            }

            .alt-pack--item p {
                background-color:rgba(94,79,62,0.88);
                line-height:22px;
                color:#FFFBED;
                bottom:61px!important
            }

            .alt-pack--item p:after {
                height:2px;
                background-position:bottom repeat-x
            }

            /*-=-=-=-=-=-=-=-=-=-=-=-
             ALTERNATE PACKS' LOWER MENU
            -=-=-=-=-=-=-=-=-=-=-=-*/
            [class$="pack--info"] {
                background:#072525\9;
                background-image:linear-gradient(to bottom,rgba(94,79,62,0.85) 30%,rgba(94,79,62,1))
            }

            .pack--info-L * {
                font-family:'gothammedium'
            }

            .pack--info-L h5 {
                font-size:16px;
                font-style:italic;
                color:#fff981
            }

            [lang*="de"] .pack--info-L h5 {
                font-size:12px;
                top:2px
            }

            [class^="info-btn"] {
                background-color:rgba(0,0,0,0.3);
                border-radius:2px;
                border:1px solid #fff;
                color:#fff;
                font-size:9px;
                padding:0 6px
            }

            button[class^="info-btn"] {
                padding:5px 6px
            }

            [class^="info-btn"]:hover {
                color:#fff;
                background-color:rgba(0,0,0,0.9);
                box-shadow:0 0 7px #FF9B00
            }

            /*-=-=-=-=-=-=-=-=-=-=-=-
             ITEM LIST
            -=-=-=-=-=-=-=-=-=-=-=-*/
            .item-list li:before {
                top:15px;
                left:15px
            }

            .item-list li {
                padding:15px 15px 15px 105px;
                min-height:102px
            }

            #patron-items li {
                background-color:rgba(176,154,125,1);
                box-shadow:inset 0 0 0 1px #493822,inset 0 0 0 3px #836D4F
            }

            #patron-items li:before {
                border:1px solid #fff
            }

            #patron-items li span {
                font-size:14px;
                color:#fff
            }

            #patron-items strong {
                font-size:17px;
                color:#493822
            }

            @for $i from 1 through length(nth($patron_item_thumbnails,3)){
              #patron-items li:nth-child(#{$i}):before{
                @include loopImgURL($patron_item_thumbnails,$i);
              }
            }

            /*-=-=-=-=-=-=-=-=-=-=-=-
             SPECIAL ITEMS
            -=-=-=-=-=-=-=-=-=-=-=-*/
            .item-special--desc {
                background-color:#fff
            }

            .item-special--type {
                border:1px solid #836d4f
            }

            .item-special--type h5 {
                color:#493822
            }

            @for $i from 1 through length(nth($special_item_images,3)){
              .item-special--type:nth-of-type(#{$i}){
                @include loopImgURL($special_item_images,$i);
              }
            }

            /*-=-=-=-=-=-=-=-=-=-=-=-
             PATRON
            -=-=-=-=-=-=-=-=-=-=-=-*/
            #patron a:before {
                background-image:repeating-linear-gradient(90deg,rgba(255,255,255,0.1),rgba(255,255,255,0.3) 5px,transparent 4px,transparent 15px)
            }

            .patron-amount {
                background-color:#fff;
                padding:11px;
                font-size:16px;
                color:#111;
                font-weight:700
            }

            .patron-value {
                font-size:12px;
                color:#222;
                margin:13px 0 0;
                padding:3px;
                background-color:rgba(255,255,255,0.4)
            }

            .patron-value {
                font-size:12px;
                color:#222;
                margin:13px 0 0;
                padding:3px;
                background-color:rgba(255,255,255,0.4)
            }

            .patron-payment {
                font-size:80px;
                font-weight:700;
                margin:39px 0 35px;
                letter-spacing:-.01em
            }

            .patron-cta {
                border-top:2px solid #fff
            }

            .patron-cta p {
                font-size:19px;
                font-weight:700;
                letter-spacing:1px;
                border:1px solid #fff;
                background:rgba(0,0,0,0.35);
                color:#fff
            }

            a[class^="patron"]:hover .patron-cta p {
                background:#ff6207;
                box-shadow:inset 0 0 30px rgba(211,0,0,0.75);
                text-shadow:0 -2px 0 #CF3700
            }

            .patron-1{background:#BFC6C7;}
            .patron-1:hover{background:#D3D5D5;}
            .patron-1 .patron-amount{box-shadow:0 2px 0 0 rgba(76, 86, 86, 0.6);}
            .patron-1 .patron-payment{text-shadow:0 0 50px rgba(255, 255, 255, 1), 0 3px 0 rgba(234, 234, 234, 1);}
            .patron-1 .patron-payment, .patron-1 .patron-period{color:rgb(40, 48, 48);}
            .patron-1 .patron-cta{background:rgba(17, 19, 19, 0.8);}

            .patron-2{background:#66CFED;}
            .patron-2:hover{background:#7ED6EF;}
            .patron-2 .patron-amount{box-shadow:0 2px 0 0 rgba(24, 122, 150, 1);}
            .patron-2 .patron-payment{text-shadow:0 0 50px rgba(255, 255, 255, 1), 0 3px 0 rgba(0, 99, 211, 0.75);}
            .patron-2 .patron-payment, .patron-2 .patron-period{color:rgb(0, 10, 82);}
            .patron-2 .patron-cta{background:rgba(9, 14, 36, 0.8);}

            .patron-3{background:#84CF60;}
            .patron-3:hover{background:#92DA70;}
            .patron-3 .patron-amount{box-shadow:0 2px 0 0 rgba(62, 128, 55, 1);}
            .patron-3 .patron-payment{text-shadow:0 0 50px rgba(255, 255, 255, 1), 0 3px 0 rgba(9, 142, 0, 1);}
            .patron-3 .patron-payment, .patron-3 .patron-period{color:rgb(13, 44, 6);}
            .patron-3 .patron-cta{background:rgba(9, 27, 2, 0.8);}

            .patron-4{background:#F2C022;}
            .patron-4:hover{background:#FFCD2F;}
            .patron-4 .patron-amount{box-shadow:0 2px 0 0 rgba(215, 98, 0, 0.6);}
            .patron-4 .patron-payment{text-shadow:0 0 50px rgba(255, 255, 255, 1), 0 3px 0 rgba(255, 107, 0, 0.6);}
            .patron-4 .patron-payment, .patron-4 .patron-period{color:rgb(76, 32, 0);}
            .patron-4 .patron-cta{background:rgba(23, 11, 0, 0.8);}


            /*-=-=-=-=-=-=-=-=-=-=-=-=-=-
             STORE PAGE MEDIA QUERIES
            -=-=-=-=-=-=-=-=-=-=-=-=-=-*/
            @media (max-width:1396px) and (min-width:959px) {
              .cta {
                width:100%
              }
            }

            @media only screen and (max-width:959px),only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape){
              .anchor > span {
                font-size:21px;
                line-height:25px
              }

              .starter-pack--info h3 {
                font-size:40px;
                line-height:53px;
                margin-bottom:-15px
              }

              .pack--info-L h5 {
                font-size:20px
              }

              [class^="starter-pack--type"] p {
                font-size:17px;
                line-height:25px;
                padding:2px 16px 16px
              }

              [class^="info-btn"] {
                font-size:15px;
                padding:6px 18px;
                margin:-8px 10px 0 0
              }

              .alt-pack--item p {
                background-image:linear-gradient(to bottom,rgba(94,79,62,0) 30%,rgba(94,79,62,1))
              }

              .alt-pack--info h3 {
                font-size:32px;
                line-height:37px
              }

              .alt-pack--info {
                background-color:rgba(94,79,62,1)
              }

              .cta {
                width:60%;
                height:75px;
                padding-top:21px;
                font-size:30px
              }

              [lang*="de"] .pack--info-L h5 {
                font-size:16px;
                top:0
              }

              .patron-cta p {
                font-size:15px
              }
            }

            @media only screen and (max-width: 768px) and (orientation : portrait),only screen and (max-width:767px) {
              .sect-title {
                background-position:left 0 bottom 30px;
                padding:35px 0 42px;
                font-size:38px;
                line-height:36px
              }

              .alt-pack--info h3 {
                font-size:25px;
                line-height:38px
              }

              .alt-pack--info h5 {
                font-size:18px
              }

              .language-fr .alt-pack--info .info-btn-2 {
                font-size:13px
              }

              .cta {
                width:100%
              }
            }

            @media only screen and (max-width:479px) {
              .alt-pack--info h3 {
                line-height:43px;
                margin-bottom:-16px
              }

              .pack--info-L h3 {
                font-size:31px;
                line-height:51px
              }

              .pack--info-L h5 {
                font-size:16px
              }
            }




            /*-=-=-=-=-=-=-=-=-=-=-=-=-=-
             STORE PAGE STYLES END
            -=-=-=-=-=-=-=-=-=-=-=-=-=-*/

            /* Sass file compiled at http://codepen.io/miguelzuleta/pen/oXvYgG?editors=010 */
         

stuff from functions.js


          /*------------------------------------
              FANCY FUNCTIONALITY
              FOR STORE PAGE BEGINS
          ------------------------------------*/

          /* copies the href and text from the big cta button
             to the small cta button in the starter packs */
          var cta_info = $('.pack-list .cta');
          $('#starter-pack .info-btn-2').each(function(i){
              this.innerHTML = cta_info[i].innerHTML;
              this.href = cta_info[i].href;
          });

          /* start pack top image sections are cloned into a different area
             of the page so the content can display properly on mobile devices */
          var packsClone = $('.pack-list');
          $('#starter-pack > div').each(function(i){
              $(this).clone().prependTo(packsClone[i]);
          });

          var info_btn = $('.info-btn-1');
          var info_p = $('[class^="starter-pack--type"] p');

          /* reveals starter pack extra info copy below the images */
          info_btn.click(function(){
              info_p.toggleClass('revealed');
          });

          /* copies the titles from the top navigation buttions and pastes them
             as the titles of their respective on-hover popup descriptions */
          var anchor_title = $('.anchor > span:first-of-type');
          $('.anchor-desc--title').each(function(i){
              this.innerHTML = anchor_title[i].innerHTML;
          });

          /* adds two stylesheets that will be used further down */
          function addStyles(tag_id){
              var styleTag = document.createElement('style');
              styleTag.type = 'text/css';
              styleTag.id = tag_id;
              $('head').append(styleTag);
          }
          addStyles('dynamic-pack-icon-numbers');
          addStyles('item-list-resizer');

          var iconStylesheet = $('#dynamic-pack-icon-numbers'),
              itemListStylesheet = $('#item-list-resizer'),
              packIconPlus = $('body[class*="store"] .pack-list li[class*="plus-"]'),
              plusNums = [],
              plusNums_noPairs = [];

          /* adds css to #dynamic-pack-icon-numbers stylesheet that
             display the "plus" numbers that go next to some of the icons in the starter packs. */
          function addIconStyles(){
              if(packIconPlus.length > 0){

                  /* strips down the .plus- classes down to just the numbers */
                  packIconPlus.each(function(){
                      currentNum = $(this).attr('class').split('plus-')[1].split(' ')[0];
                      plusNums.push(currentNum);
                  });

                  plusNums.sort();

                  /* filters all the numbers into just one of each */
                  $.each(plusNums, function(i,v){
                      if(v !== plusNums[i+1]){
                          plusNums_noPairs.push(v);
                      }
                  });

                  /* adds magic */
                  $.each(plusNums_noPairs, function(i,v){
                      var iconCSS = '.pack-list li[class$="-'+v+'"]:after, .pack-list li[class$="-'+v+'"] span:before{content:"+'+v+' ";}';
                      iconStylesheet.append(iconCSS);
                  });

              }
              else{
                 iconStylesheet.remove();
              }
          }
          addIconStyles();

          var winW;

          /* finds the value of a specific selector in a stylesheet */
          function getStyleSheetPropertyValue(selectorText, propertyName){
              for (var s = document.styleSheets.length - 1; s >= 0; s--){
                  var cssRules = document.styleSheets[s].cssRules || document.styleSheets[s].rules || [];
                  for(var c = 0; c < cssRules.length; c++){
                      if (cssRules[c].selectorText === selectorText){
                          return cssRules[c].style[propertyName];
                      }
                  }
              }
              return null;
          }

          var allItemLists = $('.item-list');

          var listPadding = getStyleSheetPropertyValue('.item-list li', 'padding').split('px')[0] * 2;
          var runCount = 0;

          /* adds css to #item-list-resizer stylesheet that forces all item list tiles
             to be as tall the one with the most amount of text in it so they can always be
             perfectly aligned regardless of the screen resolution */
          function resizeItemListTiles(e){
              winW = $(window).width();

              var itemList = $(e),
                  allSpans = $(e + ' li span'),
                  allLists = $(e + ' li'),
                  tallestSP = [],
                  tallestLI = [];

              function pushHeights(a,b){
                  a.each(function(){
                      b.push($(this).outerHeight());
                  });
              }
              pushHeights(allSpans, tallestSP);
              pushHeights(allLists, tallestLI);

              var fullSPArray = tallestSP;

              /* finds the tallest SPAN and LI elements */
              tallestSP = Math.max.apply(null, tallestSP);
              tallestLI = Math.max.apply(null, tallestLI);


              if(runCount == allItemLists.length){itemListStylesheet.empty();}

              if(winW > 617){
                  itemListStylesheet.append('\n'+ e +' li{height:'+ (tallestSP + listPadding) +'px;}\n');
              }
              else if(winW < 617){

                  /* forces text and icons in every list element inside of .item-list to be centered
                     vertically, no matter the height of the tiles and number of lines of text on each tile */
                  if(itemList.hasClass('align-middle')){
                      if(runCount == allItemLists.length){itemListStylesheet.empty();}
                      $.each(fullSPArray, function(i,v){
                          if(v < 92){
                              v = 92 - listPadding;
                          }
                          itemListStylesheet.append('\n'+ e +' li:nth-of-type('+ (i+1) +'){height:'+ (v + listPadding) +'px;}');
                      });
                  }
              }

              if(runCount == allItemLists.length){runCount = 0;}
              runCount++;
          }

          /* runs resizeItemListTiles function on all elements with a item-list class. 
             some pages may have more than one set of item lists or they may have different heights
             and different amount of columns */
          function runAllLists(){
              allItemLists.each(function(){
                  var listID = '#' + $(this).attr('id');
                  resizeItemListTiles(listID);
              });
          }
          runAllLists();

          $(window).resize(function(){
              runAllLists();
          });


          /*------------------------------------
              FANCY FUNCTIONALITY
              FOR STORE PAGE ENDS
          ------------------------------------*/
        

PSD File Guidelines

Download File