/*base*/
html {font-size:62.5%; -webkit-font-smoothing: antialiased !important; background:#fffdfb}
body {font:400 1.6rem/1.5 'Inter', arial, sans-serif; overflow-x:hidden; background:#fffdfb; color:#34303d}
a:hover,
a {color:#000}
img {max-width:100%; height:auto}
h1,h2,h3,h4,small,p {margin-bottom:20px}
h1 {font-size:6.4rem; font-weight:700}
h2 {font-size:2.3rem; font-weight:700}
h3 {font-size:2.0rem}
strong,b {font-weight:500}
ul,
ol {padding-left:20px}

/*reusables*/
.bg--padded {padding:30px; margin-bottom:30px}
.bg--white {background:#fff; box-shadow:0 2px 4px 0 rgba(0,0,0,0.1)}
.banner .bg--padded {border-radius:10px}
.color--white {color:#fffdfb}
.color--slate {color:#34303d}

.btn {background:#333f48; line-height:1; display:inline-block; text-align:center; text-transform:uppercase; color:#fff; font-size:1.4rem; padding:15px 25px; border-radius:0}
.btn:hover {background:#161b1f; color:#fff}
.btn.btn--small {padding:10px 20px; min-width:120px}
.btn.btn--disabled {background:#ea8e7c; pointer-events:none}

.btn-main {display:inline-block; border:0; border-radius:25px; line-height:41px; height:45px; padding:0 40px; letter-spacing:1px; transition:all 0.3s ease}
.btn--white {background:#fffdfb; color:#34303d}
.btn--ghost {background:none; color:#fffdfb; border:2px solid #fffdfb}
.btn--ghost:hover,
.btn--ghost:focus {background:#fffdfb; color:#34303d; text-decoration:none; border-color:#fffdfb}

.voucher_btn .btn.btn--small {background:none; padding-left:0; padding-right:0; color:#34303D; text-align:left; text-transform:capitalize; transition:all 0.3s ease}
.voucher_btn .btn.btn--disabled {color:#b12120}
.voucher_btn .btn.btn--small:after {content:''; display:inline-block; margin-left:5px; width:8px; height:8px; background:url('https://image.e.iqos.com/lib/fe3715707564067e7d1777/m/7/8b5b946e-1ec4-4964-9040-e034b833e531.png') no-repeat right; transition:all 0.3s ease}
.voucher_btn .btn.btn--disabled:after {background:url('https://image.e.iqos.com/lib/fe3715707564067e7d1777/m/7/89311605-cabc-4988-a8c3-1274ee541b49.png') no-repeat right}
.voucher_btn .btn.btn--small:hover {text-decoration:underline}
.voucher_btn .btn.btn--small:hover:after {margin-left:7px}

.btn_purchase {display:block; padding:30px; color:#fffdfb; position:relative; overflow:hidden}
.btn_purchase * {transition:all 0.2s ease}
.btn_purchase:hover {color:#fffdfb; text-decoration:none}
.btn_purchase span {background:url('https://image.e.iqos.com/lib/fe3715707564067e7d1777/m/7/ea33c8a8-3824-4f7c-9f50-86d71b26d328.png') no-repeat right; padding-right:16px; font-size:14px; position:relative; z-index:1}
.btn_purchase:hover h2 {letter-spacing:1px}
.btn_purchase:hover span {padding-right:20px}
.btn_purchase:hover img {transform:scale(1.05)}
.btn_shop {background:#00d5d4}
.btn_accessories {background:#34303D}
.btn_purchase img {position:absolute; right:20px; bottom:-50px; width:35%; z-index:0}
.btn_accessories.btn_purchase img {width:60px; bottom:-70px}
.btn_shop.btn_purchase {color:#34303D}
.btn_shop.btn_purchase span {background-image:url('https://image.e.iqos.com/lib/fe3715707564067e7d1777/m/7/8b5b946e-1ec4-4964-9040-e034b833e531.png')}

/*site header*/
.site_header {position:relative; z-index:200; background:#fffdfb}
.site_header a {display:inline-block; line-height:75px; margin-right:30px}
.site_header .logo {display:block; height:75px; width:80px; margin-left:-40px; left:50%; position:absolute; z-index:100}
.site_header .logo svg {fill:#34303d; display:block}
.navigation ul {list-style:none; padding:0; margin:0}
.navigation ul li {display:inline}

.navigation .hamburger {position:absolute; right:15px; font-size:0; line-height:0; color:transparent; width:50px; height:50px; background:none; border:0; z-index:260}
.navigation .hamburger:before,
.navigation .hamburger:after {content:''; display:block; width:24px; height:2px; background:#34303D; position:absolute; transition:all 0.3s ease}
.navigation .hamburger:before {top:20px; left:13px}
.navigation .hamburger:after {top:30px; left:13px}
.navigation .hamburger.menu-active:before,
.navigation .hamburger.menu-active:after {top:24px; left:13px}
.navigation .hamburger.menu-active:before {transform:rotate(45deg)}
.navigation .hamburger.menu-active:after {transform:rotate(-45deg)}
.hamburger {display:none}
.hamburger:focus {outline:0}

/*banner*/
.banner {background:#00d5d4; padding-bottom:60px; overflow:hidden}
.banner_text p,
.banner_text h2,
.banner_text h1 {color:#34303d}
.banner_text {padding:60px 60px 80px 0}
.banner_text p:last-of-type {margin-bottom:50px}
.banner_img {position:absolute; top:0; left:0; max-width:none}
.bg-opaque {position:relative}

.bg-opaque:before {content:''; border-radius:10px; position:absolute; top:-30px; left:-15px; width:calc(100% + 30px); background:rgba(0,0,0,0.15); height:calc(100% + 30px); display:block}

/*main content*/
.site_content {padding-top:60px}

/*canvas*/
#canvas-container {position:absolute; visibility:hidden; z-index:-100; left:-99999999px; opacity:0}
.btn_download {background:#34303D; border-radius:25px; padding-left:40px; padding-right:40px; text-transform:capitalize; transition:all 0.3s ease; letter-spacing:1px}
.btn_download:after {content:''; display:inline-block; width:14px; height:14px; background:url('https://image.e.iqos.com/lib/fe3715707564067e7d1777/m/7/bd078f7d-1325-4321-b388-bf6a46879a2b.png') no-repeat; margin-left:7px; margin-bottom:-2px}
.btn_download:hover {background:#24212b; letter-spacing:2px}

/*help*/
.section_help ol {list-style:none; counter-reset:counter; padding-left:0; column-count:2; column-gap:30px}
.section_help ol li {counter-increment:counter; position:relative; padding-left:50px; margin-bottom:15px; min-height:48px}
.section_help ol li:before {content: counter(counter); color:#34303e; font-size:2rem; font-weight:600; background:#00d5d4; border:2px solid #34303e; display:inline-block; width:40px; height:40px; border-radius:50%; line-height:35px; text-align:center; position:absolute; left:0; z-index:200}
/*.section_help ol li:after {content:''; width:4px; height:50px; position:absolute; bottom:-20px; left:18px; background:#ccc; z-index:100}*/
.section_help ol li:nth-child(3):after,
.section_help ol li:last-child:after {display:none}
.section_help--0-referrals ol li:nth-child(4):after {display:none}
.section_help--0-referrals ol li:nth-child(3):after {display:block}
.section_help--0-referrals ol li:nth-child(5):after {height:80px}

/*referral code*/
.referral-code {margin-top:30px; font-size:2.5rem; text-align:center; display:block}

/*referrals*/
.share .at-style-responsive .at-share-btn {margin-right:17px}
.share .at-style-responsive .at-share-btn:last-child {margin-right:0}
.referrals {font-size:6.8rem; line-height:1; font-weight:600; text-align:center; display:block}
.share ul {padding:0; margin:0}
.share li {display:inline}
.share li a {display:inline-block; margin-right:17px; margin-bottom:15px; transition:all 0.3s ease}
.share li a:hover {transform:scale(1.05)}
.share li:last-child a {margin-right:0}
.btn--copy {position:relative}
.btn--copy.clicked:before {content:'Copied!'; position:absolute; bottom:100%; background:#232324; color:#fff; padding:5px; font-size:1.2rem; left:-5px}
.share small {font-size:1rem; line-height:1.5; display:inline-block; margin:0}

/*vouchers*/
.voucher_header {border-top:1px solid #b5b5b5; border-bottom:1px solid #b5b5b5}
.voucher_header strong {margin:5px 0; display:block}
.voucher_header,
.voucher_row {margin:0}
.voucher_row {padding:10px 0}
.expiry,.voucher-code {line-height:36px}
.voucher_row:nth-of-type(even) {background:#f5f5f5}
.section_voucher svg {margin:20px 0}
.step:after {position:absolute; right:-30px; top:20%; content:''; display:block; width:60px; height:4px; background:#eee}
.step:last-child:after {display:none}
.section_voucher {min-height:425px}

/*shop now*/
.slider {position:relative}
.slide {text-align:center; margin-bottom:30px}
.slide img {display:inline-block; margin-bottom:10px}
.slide h3 {font-size:1.8rem; font-weight:300}
.slick-arrow {background:url('https://image.e.iqos.com/lib/fe3715707564067e7d1777/m/7/9b5156d0-eb80-4b4e-98e7-b32d313525ea.png') no-repeat; width:20px; height:40px; top:50%; margin-top:-20px; z-index:40; position:absolute; transform:none; opacity:0.2; transition:all 0.3s ease}
.slick-next:focus, .slick-next:hover, .slick-prev:focus, .slick-prev:hover {background:url('https://image.e.iqos.com/lib/fe3715707564067e7d1777/m/7/9b5156d0-eb80-4b4e-98e7-b32d313525ea.png') no-repeat; opacity:0.6}
.slick-arrow:before {content:''; display:none}
.slick-next {right:0; transform:rotate(180deg)}
.slick-prev {left:0}
.slick-dots li button:before {background:rgba(0,0,0,0.5); border-radius:50%; line-height:0; font-size:0; color:transparent; width:10px; height:10px}

/*help*/
.section_help h2 {font-size:4.8rem; margin-bottom:30px}

/*links*/
.section_links a {text-decoration:underline}

/*footer*/
.site_footer {background:#272a33; padding:40px 15px 80px}
.site_footer * {color:#fff; font-size:1.4rem}
.site_footer a:hover {color:#caccce; text-decoration:none}
.site_footer .copyright p {color:#939599; font-size:1.4rem; margin-bottom:25px}
.site_footer .logo-footer {fill:#fff; margin-bottom:25px; width:120px}
.site_footer h4 {color:#939599; font-size:1.3rem; letter-spacing:1.7px; text-transform:uppercase; margin-bottom:15px}
.site_footer ul {padding:0; list-style:none}

/*health warning*/
.health-warning {margin-top:120px; padding:30px; background:#a6a6a6; border-top:1px solid #272a33; text-align:center}
.health-warning strong {color:#000; font:400 3rem 'Arial',sans-serif; text-transform:uppercase}

/*facebook*/
.social_facebook {fill:#fff; width:18px; margin-right:5px}

/*canvas*/


@media (max-width:991px) {
  .bg {background-size:auto 100%}
}

@media (max-width:991px) {
  .banner {margin-bottom:40px}
  .section_help ol {column-count:1; column-gap:0px}
  .section_help--0-referrals ol li:nth-child(4):after ,
  .section_help ol li:nth-child(3):after {display:block}
  .banner_img {left:-25%}
}

@media (min-width:991px) and (max-width:1199px) {
  .referral-code {font-size:2.4rem}
  .share li a {margin-right:5px; margin-bottom:5px}
}

@media (max-width:767px) {
  body {padding-top:50px}
  .site_header {position:fixed; top:0; width:100%}
  .site_header .logo,
  .site_header {height:50px; margin-bottom:0}
  .site_header .logo {width:66px; margin-left:-33px}
  .hamburger {display:block}
  .nav-wrap > .row {border-top:1px solid rgba(0,0,0,0.2)}
  .nav-wrap {position:fixed; left:100%; top:0; width:100%; height:100%; opacity:0; transition:all 0.3s ease; background:#fffdfb; transition-delay:0.3s; z-index:250; padding-top:50px}
  .nav-wrap.active {opacity:1; left:0; z-index:250}
  .nav-shadow {opacity:0; transition:all 0.3s ease-in-out;}
  .nav-shadow.active{background:rgba(0,0,0,0.5); opacity:1; position:fixed; top:0; left:0; width:100%; height:100%}
  .navigation ul li {display:list-item}
  .btn_purchase {height:200px !important; padding:20px; margin-bottom:30px}

  .banner_text {padding-right:0}
  .bg-opaque {margin-top:30px; padding-top:60px}
  h1 {font-size:3.2rem}
  h2 {font-size:2rem}

  .voucher_btn {text-align:center; padding-top:5px; padding-bottom:5px}
  .voucher_btn .btn.btn--small {text-align:center}
  .voucher_header .col:last-child {display:none}
  .bg_mask path {transform:rotate(4deg)}
  .btn {font-size:1.2rem}

  .section_help br {display:none}
  .section_help--0-referrals ol li:nth-child(4):after, .section_help ol li:nth-child(3):after,
  .section_help ol li:after {display:none}

}

@media (max-width:400px) {
  .section_help ol li:after {height:80px}
  .section_help ol li:first-child {height:60px}
}

@media screen
  and (min-device-width: 320px)
  and (max-device-width: 568px) {
  .bg {height:150vh}
}