/* CSS Document */
/* Documento creado por Estudio Adumbro */
/* http://www.adumbro.es */

html {font-size: calc(.5em + .8vw) !important;}
body {font-size: inherit;}

/* FOOTER *****************/
footer {display: block; font-size: .8em; padding: 1rem 1rem .3rem 1rem; background-color: #28282d; color: #eee;}
footer div.c {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-start;}
footer div.c > div {display: block;}
footer div.adumbro {width: 40%;}
footer div.adumbro h1 a {display: block; width: 100%; height: 100%;}
footer div.adumbro h1 span {display: none;}
footer div.adumbro h1 {display: block; height: 1em; margin-bottom: .3em; width: 4.2em; background: transparent url('img/adumbro.svg') no-repeat left center; background-size: auto 100%;}
footer div.adumbro p {padding-bottom: 1em;}
footer div.adumbro p a {color: #fff; text-decoration: none;}
footer div.adumbro p:last-child {text-align: right; padding-bottom: 0;}
footer div.adumbro p a:hover {text-decoration: underline;}
footer div.links {display: flex !important; width: 55%; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-start;}
footer div.links > div {display: block; margin-top: .6em;}
footer div.links > div.n {width: 25%;}
footer div.links > div.s {width: 30%;}
footer div.links > div.l {width: 40%;}
footer div.links a {padding: 0 2px; color: #d9f3f4; text-decoration: none;}
footer div.links a:hover {background-color: #d9f3f4; color: #222;}
footer div.links h1 {font-size: 1.2em; padding-bottom: .2em; font-weight: bold;}
footer div.links ul {display: block; list-style: none;}
footer div.links ul li {display: block; padding: .3em 0;}
footer div.links ul.social li a {display: inline; padding-left: 1.4em; background-repeat: no-repeat; background-position: left center; background-size: auto 1em;}
footer div.links ul.social li a.facebook {background-image: url('img/facebook_ico.svg');}
footer div.links ul.social li a.twitter {background-image: url('img/twitter_ico.svg');}
footer div.links ul.social li a.instagram {background-image: url('img/instagram_ico.svg');}
footer div.links ul.social li a.facebook:hover {background-image: url('img/facebook_ico_b.svg');}
footer div.links ul.social li a.twitter:hover {background-image: url('img/twitter_ico_b.svg');}
footer div.links ul.social li a.instagram:hover {background-image: url('img/instagram_ico_b.svg');}
@media screen and (max-width: 550px) {
    footer div.c {display: block;}
    footer div.adumbro, footer div.links {width: 100%;}
    footer div.adumbro {margin-top: 1em;}
}
/* espaciado para el botón de flotante ACCEDER */
div#access_roll ~ footer {margin-bottom: 6em;}
@media screen and (max-width: 600px) {
    div#access_roll ~ footer {margin-bottom: 10em;}
}

/* SECTION *****************/
section#index header {display: block; width: 100%; height: auto; background-color: transparent; background-image: url('img/promo_0.jpg'); background-repeat: no-repeat; background-position: top center; background-size: cover;}
section#index header.promo_1 {background-image: url('img/promo_1.jpg');}
section#index header.promo_2 {background-image: url('img/promo_2.jpg');}
section#index header.promo_3 {background-image: url('img/promo_3.jpg');}
section#index header.promo_4 {background-image: url('img/promo_4.jpg');}
section#index header.promo_5 {background-image: url('img/promo_5.jpg');}
section#index header.promo_6 {background-image: url('img/promo_6.jpg');}
section#index header.promo_7 {background-image: url('img/promo_7.jpg');}
section#index header.promo_8 {background-image: url('img/promo_8.jpg');}
section#index header.promo_9 {background-image: url('img/promo_9.jpg');}
section#index header.promo_0 {background-image: url('img/promo_0.jpg');}
section#index header div.content {display: block; width: 100%; height: 100%; text-align: center; box-sizing: border-box; padding-top: 20vh; background-color: rgba(40,40,45,.65); color: #fff; text-align: center;}
section#index header div.content h1 span {display: none;}
section#index header div.content h1 {display: block; width: 20em; height: 12em; margin: 0 auto 5vh auto; background: transparent url('img/logo_jjiffy_wbs.svg') no-repeat top center; background-size: contain;}
section#index header div.content p {display: block; font-family: 'Montserrat'; font-weight: 300; font-style: normal; width: 90%; margin: 0 auto; padding-bottom: 15vh; font-size: 2em; text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4);}
section#index > div.content h2 {display: block; padding: 5vh 0 3vh 0; text-align: center; font-size: 2em; color: #28282d;}
section#index > div.content p {display: block; width: 90%; max-width: 600px; margin: 0 auto; padding-bottom: 5vh; color: #333;}
@media screen and (max-width: 410px) {
    section#index header div.content h1 {width: 90%;}
}

/* FEATURES */
article#features {}
article#features div.content {display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; padding: 3vh 0 2vh 0; position: relative;}
article#features div.content div.text {display: block; width: 40%; max-width: 30em; padding: 0 1em; height: auto; color: #333;}
article#features div.text h1 {font-family: 'Montserrat'; font-weight: 500; font-style: normal; margin: 1vw 0 .5vw 0; font-size: 2em;}
article#features div.text p {color: #555; padding-bottom: 1em;}
article#features div.content div.btns {text-align: left;}
article#features button {display: inline-block; background-color: #fff; padding: .5vw 2vw; border-radius: 3em; font-size: 1.2em; color: #b9007c; border: 2px solid #b9007c;}
article#features button:hover {color: #fff; background-color: #b9007c;}
article#features button:active {color: #fff; background-color: #28282d; border: 2px solid #28282d; transform: scale(0.95);}
article#features div.content div.list {display: block; width: 60%; max-width: 40em; padding: 0 2em; height: auto; color: #333;}
article#features div.content div.list ul {display: block; column-count: 2;}
article#features div.content div.list ul li {
    display: inline-block; width: auto; height: auto; padding: 1em; margin: 1em; font-size: .8em;
    -webkit-box-shadow: 0px 0px 2em 0px rgba(0,144,180,0.3); -moz-box-shadow: 0px 0px 2em 0px rgba(0,144,180,0.3); box-shadow: 0px 0px 2em 0px rgba(0,144,180,0.3);
}
article#features div.content div.list ul li h2 {padding-bottom: .2em;}
article#features div.content div.list ul li h2::before {
    display: block; content: ""; width: 2em; height: 2em; position: relative; margin-bottom: .3em; background-color: transparent; background-repeat: no-repeat; background-position: center center; background-size: 100% auto;
}
article#features div.content div.list ul li.install h2::before {background-image: url('img/ico_laptop.svg');}
article#features div.content div.list ul li.gallery h2::before {background-image: url('img/ico_images.svg');}
article#features div.content div.list ul li.friends h2::before {background-image: url('img/ico_users.svg');}
article#features div.content div.list ul li.cloud h2::before {background-image: url('img/ico_lockcloud.svg');}
@media screen and (max-width: 600px) {
    article#features div.content div.list ul {column-count: 1;}
}
@media screen and (max-width: 400px) {
    article#features div.content {display: block;}
    article#features div.content div.text {width: 100%;}
    article#features div.content div.list {width: 100%; padding: 0;}
    article#features div.content div.btns {text-align: center;}
}

/* SOCIAL */
article#social {background-color: #0090B4; color: #fff;}
article#social div.content {display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-around; align-items: center;}
article#social h1 {display: inline-block; font-family: 'Montserrat'; font-weight: 500; font-style: normal; margin: 1vw 0 .5vw 0; font-size: 1.8em; text-transform: uppercase;}
article#social ul {display: inline-block; list-style: none;}
article#social ul li span {display: none;}
article#social ul li {display: inline-block; width: 3em; height: 3em; margin: 0 .5em;}
article#social ul li a {display: block; width: 100%; height: 100%; background-color: rgba(0,0,0,0); background-repeat: no-repeat; background-position: center center; background-size: auto 60%; border-radius: 50%; transition: all .5s ease;}
article#social ul li a.facebook {background-image: url('img/facebook_ico.svg');}
article#social ul li a.twitter {background-image: url('img/twitter_ico.svg');}
article#social ul li a.instagram {background-image: url('img/instagram_ico.svg');}
article#social ul li a:hover {background-color: rgba(0,0,0,.3);}

/* PROCESO */
article#process div.content {display: block; text-align: center; background-color: #faf2d8;}
article#process div.text {display: block; text-align: center; color: #333;}
article#process div.text h1 {font-family: 'Montserrat'; font-weight: 500; font-style: normal; margin: 1vw 0 .5vw 0; font-size: 2em;}
article#process div.text p {color: #555; padding-bottom: 1em;}
article#process ol#steps {display: block; text-align: center;}
article#process ol#steps li::before {display: block; content: ""; width: 100%; height: 100%; position: absolute; bottom: -1em; left: -1em; border-radius: 50%;}
article#process ol#steps li#prc1::before {border: .2em solid #b9007c;}
article#process ol#steps li#prc2::before {border: .2em solid #e8bd3e;}
article#process ol#steps li#prc3::before {border: .2em solid #0090B4;}
article#process ol#steps li {
    display: inline-block; font-size: 1rem; width: 16rem; height: 16rem; color: #333; padding: 2rem 1rem 0 1rem; margin: 1.5rem; border-radius: 50%; position: relative;
     vertical-align: top;
}
article#process ol#steps li#prc1 {background-color: #b9007c; color: #fff;}
article#process ol#steps li#prc2 {background-color: #e8bd3e; color: #1e1e23;}
article#process ol#steps li#prc3 {background-color: #0090B4; color: #fff;}
article#process ol#steps li::after {display: block; content: ""; position: absolute; bottom: 0; left: -.5em; font-size: 3em; font-weight: bold; width: 1.5em; height: 1.5em; border-radius: 50%; padding-top: .10em; box-sizing: border-box; margin: 0 auto; background-color: rgba(30,30,35,.9); color: #fff;}
article#process ol#steps li#prc1::after {content: "1";}
article#process ol#steps li#prc2::after {content: "2";}
article#process ol#steps li#prc3::after {content: "3";}
article#process ol#steps li h1 {font-family: 'Montserrat'; font-weight: bold; font-style: normal; margin: 1rem 0 .5rem 0; font-size: 1.2em; text-align: center; text-transform: uppercase;}
article#process div.btns {text-align: center; margin-top: 2rem;}
article#process div.btns button {display: inline-block; background-color: transparent; padding: .5vw 2vw; border-radius: 3em; font-size: 1.2em; color: #b9007c; border: 2px solid #b9007c;}
article#process div.btns button:hover {color: #fff; background-color: #b9007c;}
article#process div.btns button:active {color: #fff; background-color: #28282d; border: 2px solid #28282d; transform: scale(0.95);}

/* ESCENAS */
article#scenes {display: block; width: 100%; height: auto; background-color: #f5f5fa;}
article#scenes > div {display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; padding: 3vh 0; position: relative; overflow-x: hidden;}
article#scenes div.text {display: block; height: auto; color: #333; z-index: 5; padding: .5vw 1vw;}
article#scenes div.text.cols {display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: flex-start;}
article#scenes div.text h1 {font-family: 'Montserrat'; font-weight: 500; font-style: normal; font-size: 2em; padding-bottom: .5em;}
article#scenes div.text p {padding-bottom: 1vw; color: #444;}
article#scenes div.composition {display: block; height: auto; position: relative; z-index: 5;}
article#scenes div.mobile {
    display: block; position: relative; border: .4em solid #1a1a1a; background-color: #28282d; border-radius: 2vw; overflow: hidden;
    /* problemas para border-radius y overflow */
    -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0)
}
article#scenes div.mobile div.mroll {display: block; width: 100%; height: auto; position: absolute; top: 0; left: 0;}
article#scenes div.mobile div.title {display: block; padding: 2vw .5vw .5vw 1vw; margin: 0 .2vw; font-family: 'Montserrat'; font-weight: normal; font-style: normal; font-size: .8em; color: #fff;}
article#scenes div.mobile div.mosaic, article#scenes div.mobile div.mosaic img {display: block; width: 100%; height: auto;}
/* girls*/
article#scenes div#girls {background: transparent url('img/scn_airplane.svg') no-repeat top 3vw center; background-size: 90vw auto;}
article#scenes div#girls div.text {width: 40vw;}
article#scenes div#girls div.text div.col {display: block; width: 46%;}
article#scenes div#girls div.composition {width: 32vw; height: 43vw;}
article#scenes div#girls div.composition img.people {width: 20vw; position: absolute; bottom: 0; left: 0;}
article#scenes div#girls div.composition div.mobile {width: 20vw; height: 38vw; margin-left: 12vw;}
article#scenes div#girls div.composition div.mobile div.mroll {animation: scroll_girls 15s ease-out infinite;}
@keyframes scroll_girls {0% {transform: translateY(0);} 50% {transform: translateY(-35%);} 100% {transform: translateY(0);}}
article#scenes div#girls div.mobile div.title {background-color: #3d2a77;}
/* trekking */
article#scenes div#trekking div.text {width: 30vw;}
article#scenes div#trekking div.composition {width: 61vw; height: 30vw;}
article#scenes div#trekking img.mountain {width: 200vw; position: absolute; top: 8vw; left: 0; z-index: 0; animation: mountain 60s linear infinite;}
article#scenes div#trekking div.composition img.people {width: 40vw; position: absolute; bottom: 0; right: 2vw;}
article#scenes div#trekking div.composition div.mobile {width: 38vw; height: 20vw;}
article#scenes div#trekking div.composition div.mobile div.mroll {animation: scroll_trekking 20s ease-out infinite;}
@keyframes scroll_trekking {0% {transform: translateY(0);} 50% {transform: translateY(-55%);} 100% {transform: translateY(0);}}
article#scenes div#trekking div.mobile div.title {background-color: #698975;}
/* birthday */
article#scenes div#birthday div.text {width: 60vw;}
article#scenes div#birthday div.text div.col {display: block; width: 46%;}
article#scenes div#birthday div.composition {width: 32vw; height: 43vw;}
article#scenes div#birthday div.wall {display: block; width: 100vw; height: 30vw; position: absolute; top: 50%; transform: translateY(-50%); left: 0; z-index: 0; background: transparent url('img/scn_wall.svg') repeat-x top left; background-size: auto 100%;}
article#scenes div#birthday div.composition img.people {width: 20vw; position: absolute; bottom: 0; left: 0;}
article#scenes div#birthday div.composition div.mobile {width: 20vw; height: 38vw; margin-left: 12vw;}
article#scenes div#birthday div.composition div.mobile div.mroll {animation: scroll_birthday 10s ease-out infinite;}
@keyframes scroll_birthday {0% {transform: translateY(0);} 50% {transform: translateY(-25%);} 100% {transform: translateY(0);}}
article#scenes div#birthday div.mobile div.title {background-color: #922b4a;}
/* party */
article#scenes div#party {display: block; background-color: #222; color: #eee;}
article#scenes div#party div.text {width: 96vw; margin: 0 auto;}
article#scenes div#party div.text div.col {display: block; width: 30%;}
article#scenes div#party div.text {color: #eee;}
article#scenes div#party div.text p {color: #bbb;}
article#scenes div#party div.composition {width: 80vw; height: 44vw; margin: 0 auto;}
article#scenes div#party div.composition img.people {width: 80vw; position: absolute; bottom: 2vw; left: 50%; transform: translateX(-50%);}
article#scenes div#party div.composition div.mobile {margin: 3vw auto 0 auto; width: 55vw; height: 35vw;}
article#scenes div#party div.composition div.mobile div.mroll {animation: scroll_party 20s ease-out infinite;}
@keyframes scroll_party {0% {transform: translateY(0);} 50% {transform: translateY(-40%);} 100% {transform: translateY(0);}}
article#scenes div#party div.mobile div.title {background-color: #28282d;}
article#scenes div#party div.composition img.spotr {display: block; width: 20vw; height: 30vw; position: absolute; top: -3vw; left: 10vw; transform-origin: 50% 0; transform: rotate(25deg); animation: spot1 3s linear infinite;}
article#scenes div#party div.composition img.spotg {display: block; width: 20vw; height: 30vw; position: absolute; top: -3vw; left: 30vw; transform-origin: 50% 0; transform: rotate(-25deg); animation: spot2 3s linear infinite;}
article#scenes div#party div.composition img.spotb {display: block; width: 20vw; height: 30vw; position: absolute; top: -3vw; left: 50vw; transform-origin: 50% 0; transform: rotate(25deg); animation: spot1 3s linear infinite;}
article#scenes div#party div.composition img.lightr {display: block; width: 30vw; height: 5.5vw; position: absolute; bottom: 1vw; left: -14vw; animation: light1 3s linear infinite;}
article#scenes div#party div.composition img.lightg {display: block; width: 30vw; height: 5.5vw; position: absolute; bottom: 0vw; right: 10vw; animation: light2 3s linear infinite;}
article#scenes div#party div.composition img.lightb {display: block; width: 30vw; height: 5.5vw; position: absolute; bottom: 2vw; left: 30vw; animation: light1 3s linear infinite;}
/* keyframes */
@keyframes mountain {0% {transform: translateX(0);} 100% {transform: translateX(-100vw);}}
@keyframes spot1 {0% {transform: rotate(25deg);} 50% {transform: rotate(-25deg);} 100% {transform: rotate(25deg);}}
@keyframes spot2 {0% {transform: rotate(-25deg);} 50% {transform: rotate(25deg);} 100% {transform: rotate(-25deg);}}
@keyframes light2 {0% {transform: translateX(0);} 50% {transform: translateX(-30vw);} 100% {transform: translateX(0);}}
@keyframes light1 {0% {transform: translateX(0);} 50% {transform: translateX(30vw);} 100% {transform: translateX(0);}}
/* responsive */
@media screen and (max-width: 600px) {
    article#scenes > div {padding: 2vh 0;}
    article#scenes div.text h1 { padding-bottom: 5px;}
    article#scenes div.text p { padding-bottom: 5px;}
    article#scenes div#trekking {display: block;}
    article#scenes div#trekking div.composition {width: 72vw; margin: 0 auto;}
    article#scenes div#trekking div.text {width: 92vw; margin: 0 auto;}
    article#scenes div.text.cols {display: block;}
    article#scenes div#birthday div.text div.col, article#scenes div#party div.text div.col {width: 100%; padding-bottom: 10px;}
}

/* PLANS */
article#plans {}
article#plans div.content {padding: 3vh 2vw;}
article#plans div.text {display: block; text-align: center; color: #333;}
article#plans div.text h1 {font-family: 'Montserrat'; font-weight: 500; font-style: normal; margin: 1vw 0 .5vw 0; font-size: 2em;}
article#plans div.text p {color: #555; padding-bottom: 1em;}
article#plans div.options {display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; position: relative;}
article#plans div.options::before {
    display: block; content: ""; width: 100%; max-width: 60em; height: calc(100% - 7em); position: absolute; left: 50%; bottom: 1em; transform: translateX(-50%);
    -webkit-box-shadow: 0px 0px 1em 0px rgba(0,144,180,0.2); -moz-box-shadow: 0px 0px 1em 0px rgba(0,144,180,0.2); box-shadow: 0px 0px 1em 0px rgba(0,144,180,0.2);
}
article#plans div.options > div {
    display: block; width: 33%; max-width: 20em; padding: 5.5em 1.5em 1em 1.5em; margin-top: 5em; position: relative;
    text-align: center; color: #444;
}
article#plans div.options > div::before {
    display: block; content: ""; width: 100%; height: 10em; position: absolute; left: 50%; top: -5em; transform: translateX(-50%); background-color: transparent; background-repeat: no-repeat; background-position: center center; background-size: auto 100%;
}
article#plans div.options > div.demo::before {background-image: url('img/roll_demo.svg');}
article#plans div.options > div.plus::before {background-image: url('img/roll_plus.svg');}
article#plans div.options > div.max::before {height: 11em; background-image: url('img/roll_max.svg');}
article#plans div.options > div.plus {background-color: #fff; -webkit-box-shadow: 0px 0px 2em 0px rgba(0,144,180,0.3); -moz-box-shadow: 0px 0px 2em 0px rgba(0,144,180,0.3); box-shadow: 0px 0px 2em 0px rgba(0,144,180,0.3);}
article#plans div.options > div h2 {display: block; text-transform: uppercase; color: #0090B4; position: relative;}
article#plans div.options > div p {font-size: 1.2em; padding-bottom: 1em;}
article#plans div.options > div p.price {text-transform: uppercase; color: #b9007c; padding-bottom: .5em; margin-bottom: 1em; border-bottom: 1px solid #ccc;}
article#plans div.options > div p.price strong {font-size: 2em; font-weight: bold;}
article#plans div.options > div p.price strong span {font-size: .6em;}
article#plans div.options > div p.exp strong {display: block;}
article#plans div.options > div p.exp strong, article#plans div.options > div p.days strong {font-size: 1.5em; line-height: .8em;}
article#plans div.btns {display: block; padding-top: 2em; text-align: center;}
article#plans button {display: inline-block; background-color: #fff; padding: .5vw 2vw; border-radius: 3em; font-size: 1.2em; color: #b9007c; border: 2px solid #b9007c;}
article#plans button:hover {color: #fff; background-color: #b9007c;}
article#plans button:active {color: #fff; background-color: #28282d; border: 2px solid #28282d; transform: scale(0.95);}
@media screen and (max-width: 500px) {
    article#plans div.options {display: block;}
    article#plans div.options > div {width: 90%; margin: 6em auto 0 auto;}
    article#plans div.options::before {display: none;}
    article#plans div.options > div:last-child {margin-top: 8em;}
}

section#qr {display: block; text-align: center; padding-top: 50px; background-color: #fff;}
section#qr h1 {display: none;}

/* STORIES ****************/
section#stories_lst {display: block; width: 100%; background-color: rgba(0,144,180,0.2);}
section#stories_lst div.content {padding: 3vh 0 0 0;}
section#stories_lst div.header {padding: 0 1vw;}
section#stories_lst div.header h1 {font-family: 'Montserrat'; font-weight: 500; font-style: normal; margin-bottom: 2vh; font-size: 1.8em; text-transform: uppercase; color: #0090B4;}
section#stories_lst div.carrousel {
    display: block; width: 100%; height: auto; position: relative; overflow-y: hidden; overflow-x: auto;
}
section#stories_lst div.carrousel div.articles {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    width: auto;
    height: auto;
    padding-bottom: 3vh;
}
section#stories_lst div.carrousel div.articles article {display: block; margin-left: 1vw; flex: 0 0 auto; max-width: 25rem;}
section#stories_lst div.carrousel article figure {display: block; width: 100%; height: 15rem; overflow: hidden; position: relative;}
section#stories_lst div.carrousel article figure img {display: block; height: 100%; width: 100%; object-fit: cover;}
section#stories_lst div.carrousel article figure a {display: block; width: 100%; height: 100%;}
section#stories_lst div.carrousel article h1 {font-family: 'Montserrat'; font-weight: bold; font-style: normal; margin: 1rem 0 .5rem 0; font-size: 1.2em; text-align: left; text-transform: uppercase;}
section#stories_lst div.carrousel article h1 a {color: #222; text-decoration: none;}
section#stories_lst div.carrousel article div.summary {display: block; font-size: .8em;}
section#stories_lst div.carrousel article div.summary p {padding-bottom: .5em;}
section#stories_lst div.carrousel article div.link {}

/* FEATURED QUESTIONS ****************/
article#featured_questions {display: block; width: 100%; background-color: #fff;}
article#featured_questions div.content div.header {display: block; color: #333; text-align: center;}
article#featured_questions div.header h1 {font-family: 'Montserrat'; font-weight: 500; font-style: normal; margin: 1vw 0 .5vw 0; font-size: 2em;}
article#featured_questions div.header p {color: #555; padding-bottom: .5em; max-width: 50em; margin: 0 auto;}
article#featured_questions div.content div.list {display: block;}
article#featured_questions ul {display: block; column-count: 2; column-gap: 2em; position: relative; padding: 1em; margin-left: 15%; font-size: 1em;}
article#featured_questions ul li {margin-bottom: 1rem; color: #b2e6e9; break-inside: avoid-column;}
article#featured_questions ul li a {color: #222; text-decoration: none; padding: 0 .1rem;}
article#featured_questions ul li a:visited {color: #0090B4;}
article#featured_questions ul li a:hover,
article#featured_questions ul li a:active {background-color: #0090B4; color: #fff;}
article#featured_questions ul li.more {color: #e4c8d8;}
article#featured_questions ul li.more a {color: #b9007c;}
article#featured_questions ul li.more a:hover,
article#featured_questions ul li.more a:active {background-color: #b9007c; color: #fff;}
@media screen and (max-width: 800px) {
    article#featured_questions ul {column-count: auto; margin-left: 25%;}
}

/* PAGE *****************/
section.page {display: block; color: #333; padding-top: 50px; background-color: #fff;}
section.page div.content {display: block; width: 100%; padding: 2rem;}

section.page.story > section#stories_lst {margin-top: 2rem;}

/* HTML *****************/
article.html h1 {font-size: 1.6rem; padding-bottom: 1em; font-weight: bold;}
article.html h2 {font-size: 1.4rem; padding-bottom: .6em; font-weight: bold;}
article.html h3 {font-size: 1.2rem; padding-bottom: .3em;font-weight: bold;}
article.html p {padding-bottom: 1rem; line-height: 1.5rem;}
article.html ul, article.html ol {display: block; padding: 0 0 .5rem 3rem; font-size: 1rem;}
article.html ol.abc {list-style: lower-alpha;}
article.html li {padding-bottom: .5rem;}
article.html a {color: #0090B4; text-decoration: underline;}
article.html a:hover, article.html a:active {background-color: #0090B4; color: #fff; text-decoration: none;}
article.html table {border-collapse: collapse; border-bottom: 1px solid #333; margin-bottom: 1rem;}
article.html table th, article.html table td {padding: 1rem;}
article.html table tr:nth-child(even){background-color: #f2f2f2;}
article.html table th {text-transform: uppercase; text-align: left; background-color: #333; color: #fff;}
article.html table.v td, article.html table.v th {text-align: center;}
article.html table.v tr:nth-child(even){background-color: transparent;}
article.html table.v td:nth-child(odd){background-color: #f2f2f2;}
article.html div.gray_box {display: block; padding: 1rem; color: #fff; background-color: #333; margin-bottom: 1rem;}
article.html div.gray_box p:last-child {padding-bottom: 0;}

article.html > header {text-align: center; border-bottom: 1px solid #eee; margin-bottom: 1rem;}
article.html > header img {display: block; width: 100%; height: auto;}
article.html > header h1 {font-size: 2rem; padding: 1em 0 .6em 0; font-weight: bold; text-transform: uppercase;}
article.html > header p.summary {font-size: 1.3em; padding-bottom: .6em; color: #555;}
article.html > header p.date {color: #0090B4; padding-bottom: 0;}

article.html div.gray {background-color: #eee;}
article.html div.row {display: block; width: 100%; padding: 1rem 2rem;}
article.html div.row.grid {padding: 0 2rem;}
article.html div.row.lines {padding: 2rem; border-top: 1px solid #eee; border-bottom: 1px solid #eee;}
article.html div.txt {column-count: 2; column-gap: 3em;}
article.html div.txt p {text-align: justify; /*break-inside: avoid-column;*/}
article.html div.txt h2, article.html div.txt h3 {
    -webkit-column-break-inside: avoid; /* Chrome, Safari */
    page-break-inside: avoid;           /* Theoretically FF 20+ */
    break-inside: avoid-column;         /* IE 11 */
    display: table;
}
@media screen and (max-width: 600px) {
    article.html div.txt {column-count: auto;}
}
article.html div.grid {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-start;}
article.html div.grid figure {display: block; margin-bottom: .5rem; width: calc((100% - 1rem) / 3); height: 20vw; overflow: hidden; position: relative;}
article.html div.grid figure:nth-child(4), article.html div.grid figure:nth-child(5) {width: calc((100% - .5rem) / 2); height: 30vw;}
article.html div.grid.vertical figure {height: 40vw;}
article.html div.grid.vertical figure.col img {height: calc((100% - .5rem) / 2);}
article.html div.grid.vertical figure.col img:first-child {margin-bottom: .5rem;}
article.html div.grid figure img {display: block; height: 100%; width: 100%; object-fit: cover;}
@media screen and (max-width: 600px) {
    article.html div.grid figure,
    article.html div.grid figure:nth-child(4),
    article.html div.grid figure:nth-child(5) {width: calc((100vw - 5.8rem) / 2); height: 26vw;}
    article.html div.grid figure:nth-child(3) {width: calc(100vw - 4rem); height: 50vw;}
    article.html div.grid.vertical figure {height: 50vw;}
    article.html div.grid.vertical figure:nth-child(3) {height: 100vw;}
}
article.html blockquote {font-size: 1.5rem; text-align: center; color: #0090B4; padding: 1rem 2rem; border-top: 1px solid #d9f3f4; border-bottom: 1px solid #d9f3f4;}

article.html div.promo {
    display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center;
    position: relative; margin: 2rem 0; padding: 1rem 2rem;
}
article.html div.promo::before {display: block; content: ""; position: absolute; width: calc(100% - 12rem); height: 100%; border: 1px solid #d9f3f4;}
article.html div.promo div.intro {display: block; padding: 1em; text-align: left; position: relative;}
article.html div.promo div.intro h2 {padding-bottom: .3rem;}
article.html div.promo div.intro p {padding-bottom: 1rem;}
article.html div.promo div.introarticle.html div.promo div.intro div.btns {display: block; padding-top: 2em; text-align: center;}
article.html div.promo div.intro button {display: inline-block; background-color: #fff; padding: .2vw 1vw; border-radius: 2em; font-size: 1em; color: #b9007c; border: 2px solid #b9007c;}
article.html div.promo div.intro button:hover {color: #fff; background-color: #b9007c;}
article.html div.promo div.intro button:active {color: #fff; background-color: #28282d; border: 2px solid #28282d; transform: scale(0.95);}
article.html div.promo div.plan {
    display: block; width: 15em; height: auto; padding: 1em 1em 1em 3em; margin-left: 5.5em; background-color: #fff; position: relative;
    -webkit-box-shadow: 0px 0px 1em 0px rgba(0,144,180,0.3); -moz-box-shadow: 0px 0px 1em 0px rgba(0,144,180,0.3); box-shadow: 0px 0px 1em 0px rgba(0,144,180,0.3);
}
article.html div.promo div.plan::before {
    display: block; content: ""; position: absolute; left: -6em; top: 50%; transform: translateY(-50%);
    background-color: transparent; background-repeat: no-repeat; background-position: right center; background-size: auto 100%;
}
article.html div.promo div.plan.plus::before {width: 8em; height: 7em; background-image: url('img/roll_plus.svg');}
article.html div.promo div.plan.max::before {width: 8.5em; height: 8em; background-image: url('img/roll_max.svg');}
article.html div.promo div.plan h2 {display: block; text-transform: uppercase; color: #0090B4; padding-bottom: .3em;}
article.html div.promo div.plan p.price {text-transform: uppercase; color: #b9007c; padding-bottom: .5em;}
article.html div.promo div.plan p.price strong {font-size: 2em; font-weight: bold;}
article.html div.promo div.plan p.price strong span {font-size: .6em;}
article.html div.promo div.plan p.exp, article.html div.promo div.plan p.days {font-size: .8em; padding-bottom: 0; line-height: 1.2em;}
@media screen and (max-width: 600px) {
    article.html div.promo div.intro {text-align: center;}
    article.html div.promo {display: block;}
    article.html div.promo::before {width: calc(100% - 4rem); height: calc(100% - 6rem);}
    article.html div.promo div.plan {position: relative; left: 38%; transform: translateX(-50%);}
}

/* DOCUMENTATION *****************/
/*
article.documentation {display: block; width: 100%; padding: 2rem;}
article.documentation h1 {font-size: 1.6rem; padding-bottom: 1em; font-weight: bold;}
article.documentation h2 {font-size: 1.4rem; padding-bottom: .6em; font-weight: bold;}
article.documentation h3 {font-size: 1.2rem; padding-bottom: .3em;font-weight: bold;}
article.documentation p {padding-bottom: 1rem; line-height: 1.5rem;}
article.documentation ul, article.documentation ol {display: block; padding: 0 0 .5rem 3rem; font-size: 1rem;}
article.documentation ol.abc {list-style: lower-alpha;}
article.documentation li {padding-bottom: .5rem;}
article.documentation a {color: #0090B4; text-decoration: underline;}
article.documentation a:hover, article.documentation a:active {background-color: #0090B4; color: #fff; text-decoration: none;}
article.documentation table {border-collapse: collapse; border-bottom: 1px solid #333; margin-bottom: 1rem;}
article.documentation table th, article.documentation table td {padding: 1rem;}
article.documentation table tr:nth-child(even){background-color: #f2f2f2;}
article.documentation table th {text-transform: uppercase; text-align: left; background-color: #333; color: #fff;}
article.documentation table.v td, article.documentation table.v th {text-align: center;}
article.documentation table.v tr:nth-child(even){background-color: transparent;}
article.documentation table.v td:nth-child(odd){background-color: #f2f2f2;}
article.documentation div.gray_box {display: block; padding: 1rem; color: #fff; background-color: #333; margin-bottom: 1rem;}
article.documentation div.gray_box p:last-child {padding-bottom: 0;}
*/

/* LEGAL *****************/
section#legal > article {display: block; width: 100%; padding: 2rem;}

/* SUPPORT *****************/
section#support header {font-size: .9rem; display: block; width: 100%; height: auto; background-color: #d9f3f4; text-align: left;}
section#support header h1 {padding: 0 0 .3em 0; font-size: 1.6rem; text-transform: none;}
section#support header p {padding-bottom: 0;}
section#support article#questions {display: block; width: 100%; padding: 2rem;}
section#support article#questions div.content > input[name="tabs"] {display: none;}
section#support article#questions div.content > label {display: inline-block; font-size: 1.4rem; font-weight: bold; padding: 1rem 2rem; margin: 0 1rem 1rem 0; background-color: #d9f3f4; cursor: pointer;}
section#support article#questions div.content > input[name="tabs"]:checked + label {background-color: #0090B4; color: #fff;}
section#support article#questions div.tabs {display: none; margin-top: 1rem; columns: 3 20rem; column-gap: 3rem;}
section#support article#questions div.tabs div.topic {break-inside: avoid-column;}
section#support article#questions div.tabs.no-columns {columns: 1;}
section#support article#questions div.content > input#tab1:checked ~ div#ctab1,
section#support article#questions div.content > input#tab2:checked ~ div#ctab2,
section#support article#questions div.content > input#tab3:checked ~ div#ctab3 {display: block;}
section#support article#questions div.content div#ctab3 {max-width: 50rem;}
section#support article#questions div.tabs ul {display: block; padding: .5rem 0 1rem 1.5rem; font-size: 1rem;}
section#support article#questions div.tabs ul li {padding-bottom: 1rem; color: #b2e6e9;}
section#support article#questions div.tabs ul li a {color: #222; text-decoration: none; padding: 0 .1rem;}
section#support article#questions div.tabs ul li a:visited {color: #0090B4;}
section#support article#questions div.tabs ul li a:hover, section#support article#questions div.tabs ul li a:active {background-color: #0090B4; color: #fff;}

section#support nav.back {display: block; padding: 2rem 2rem 0 2rem;}
section#support nav.back a.btn {
    display: inline-block; padding: 1rem 2rem; background-color: #d9f3f4; cursor: pointer;
    font-size: 1.3rem; font-weight: bold; color: #333; text-decoration: none;
}
section#support nav.back a.btn:hover, section#support nav.back a.btn:active {background-color: #0090B4; color: #fff;}
section#support article#answer div.content {display: block; max-width: 50rem;}
section#support article#answer span.btn {display: inline; white-space: nowrap; padding: 0 .5em; border-radius: 1em;}
section#support article#answer span.btn.yellow {background-color: #ebb937; color: #000;}
section#support article#answer span.btn.blue {background-color: #249ca4; color: #fff;}
section#support article#answer span.btn.magenta {background-color: #b9007c; color: #fff;}
section#support article#answer span.btn.gray {background-color: #333; color: #fff;}
section#support article#answer div.imgfit {display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: flex-start; padding-bottom: 1rem; }
section#support article#answer div.imgfit img {display: block; margin-right: 2rem;}
section#support article#answer div.imgfit > div {display: block;}
section#support article#answer div.imgfit > div > ul,
section#support article#answer div.imgfit > div > ol {padding: 0 0 .5rem 1.5rem;}


/* ACCESS ROLL *****************/
div#access_roll > button {
    display: inline-block; width: auto; height: auto; padding: .5rem 2rem; border-radius: 1.5em; cursor: pointer;
    z-index: 100;
    position: fixed; left: 50%; transform: translateX(-50%); bottom: 1em;
    font-size: 1.2em; color: #fff; text-align: center; white-space: nowrap; text-transform: uppercase;
    -webkit-box-shadow: 0px .2rem .5rem 0px rgba(0,0,0,0.5); -moz-box-shadow: 0px .2rem .5rem 0px rgba(0,0,0,0.5); box-shadow: 0px .2rem .5rem 0px rgba(0,0,0,0.5);
    outline: none; user-select: none;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    background-color: rgba(0,144,180,.9); background-repeat: no-repeat; background-position: center center; background-size: auto 60%;
}
div#access_roll > button:hover,
div#access_roll > button:active {background-color: rgba(0,101,129,.9);}