@font-face 

{

    font-family: 'Light';

    src:    url('../font/GothamR/GothamRounded-Light.woff2') format('woff2'),

            url('../fonts/GothamR/GothamRounded-Light.woff') format('woff');

    font-weight: normal;

    font-style: normal;

}

@font-face {

    font-family: 'LightItalic';

    src:    url('../font/GothamR/GothamRounded-LightItalic.woff2') format('woff2'),

            url('../fonts/GothamR/GothamRounded-LightItalic.woff') format('woff');

    font-weight: normal;

    font-style: italic;

}

@font-face 

{

    font-family: 'Medium';

    src:    url('../font/GothamR/GothamRounded-Medium.woff2') format('woff2'),

            url('../font/GothamR/GothamRounded-Medium.woff') format('woff');

    font-weight: normal;

    font-style: normal;

}

@font-face

{

    font-family: 'MediumItalic';

    src:    url('../font/GothamR/GothamRounded-MediumItalic.woff2') format('woff2'),

            url('../font/GothamR/GothamRounded-MediumItalic.woff') format('woff');

    font-weight: normal;

    font-style: italic;

}

@font-face

{

    font-family: 'Book';

    src:    url('../font/GothamR/GothamRounded-Book.woff2') format('woff2'),

            url('../font/GothamR/GothamRounded-Book.woff') format('woff');

    font-weight: normal;

    font-style: normal;

}

@font-face

{

    font-family: 'BookItalic';

    src:    url('../font/GothamR/GothamRounded-BookItalic.woff2') format('woff2'),

            url('../font/GothamR/GothamRounded-BookItalic.woff') format('woff');

    font-weight: normal;

    font-style: italic;

}

@font-face

{

    font-family: 'Bold';

    src:    url('../font/GothamR/GothamRounded-Bold.woff2') format('woff2'),

            url('../font/GothamR/GothamRounded-Bold.woff') format('woff');

    font-weight: normal;

    font-style: normal;

}

@font-face

{

    font-family: 'BoldItalic';

    src:    url('../font/GothamR/GothamRounded-BoldItalic.woff2') format('woff2'),

            url('../font/GothamR/GothamRounded-BoldItalic.woff') format('woff');

    font-weight: normal;

    font-style: italic;

}

.back-to-stream, .clear, .self-to-stream:after {

    display: block;

    clear: both

}

.hint-text, .popup-container {

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    -ms-box-sizing: border-box;

    -o-box-sizing: border-box

}

.luxury-3d-text, .title-game-name {

    text-shadow: 1px 1px 0 #ccc, 2px 2px 0 #ccc, 2px 2px 1px rgba(0, 0, 0, .4)

}

.luxury-3d-text-vertical-shadow, .one-more-tangram-check {

    text-shadow: 0 2px 0 #c6c6c6

}

.flip-tan, .luxury-3d-button, .market-link, .market-link_left, .one-more-tangram, .one-more-tangram_center, .one-more-tangram_left, .one-more-tangram_right, .popup-wide-button, .popup-wide-button-negative, .screen--button, .screen--button_popup, .screen--checkbox, .section-preview, .settings-on-off-button, .tangram-menu-button {

    box-shadow: 0 2px 0 #c6c6c6;

    border-radius: .1rem;

    background-image: -webkit-linear-gradient(top, #fff, #f5f5f5);

    background-image: -moz-linear-gradient(top, #fff, #f5f5f5);

    background-image: -ms-linear-gradient(top, #fff, #f5f5f5);

    background-image: -o-linear-gradient(top, #fff, #f5f5f5);

    background-image: linear-gradient(top, #fff, #f5f5f5)

}

.flip-tan:active, .luxury-3d-button_active, .market-link_left:active, .one-more-tangram:active, .one-more-tangram_center:active, .one-more-tangram_left:active, .one-more-tangram_right:active, .screen--button:active, .screen--button_popup:active, .screen--checkbox:active, .section-preview:active, .settings-on-off-button:active {

    box-shadow: 0 1px 1px rgba(0, 0, 0, .4);

    background-image: -webkit-linear-gradient(top, #f5f5f5, #fff);

    background-image: -moz-linear-gradient(top, #f5f5f5, #fff);

    background-image: -ms-linear-gradient(top, #f5f5f5, #fff);

    background-image: -o-linear-gradient(top, #f5f5f5, #fff);

    background-image: linear-gradient(top, #f5f5f5, #fff)

}

.stroked-text {

    text-shadow: 1px 1px 0 #f5f5f5, -1px -1px 0 #f5f5f5, 1px -1px 0 #f5f5f5, -1px 1px 0 #f5f5f5

}

a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, fieldset, figcaption, figure, font, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, meter, nav, object, ol, output, p, pre, progress, q, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, ul, var, video {

    margin: 0;

    padding: 0;

    border: 0;

    outline: 0;

    font-size: 100%;

    vertical-align: baseline;

    background: 0 0;

    -webkit-tap-highlight-color: transparent;

    -moz-tap-highlight-color: transparent;

    -ms-tap-highlight-color: transparent;

    -o-tap-highlight-color: transparent;

    tap-highlight-color: transparent;

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    -o-user-select: none;

    user-select: none;

    -webkit-font-smoothing: antialiased;

    -moz-font-smoothing: antialiased;

    -ms-font-smoothing: antialiased;

    -o-font-smoothing: antialiased;

    font-smoothing: antialiased;

    -webkit-text-size-adjust: 100%;

    -moz-text-size-adjust: 100%;

    -ms-text-size-adjust: 100%;

    -o-text-size-adjust: 100%;

    text-size-adjust: 100%

}

body {

    line-height: 1

}

article, aside, blockquote, dialog, figure, footer, header, hgroup, nav, section {

    display: block

}

nav ul {

    list-style: none

}

ol {

    list-style: decimal

}

ul {

    list-style: disc

}

ul ul {

    list-style: circle

}

blockquote, q {

    quotes: none

}

blockquote:after, blockquote:before, q:after, q:before {

    content: '';

    content: none

}

ins {

    text-decoration: underline

}

del {

    text-decoration: line-through

}

mark {

    background: 0 0

}

.popup-close, .share-link {

    background-repeat: no-repeat

}

abbr[title], dfn[title] {

    border-bottom: 1px dotted #000;

    cursor: help

}

table {

    border-collapse: collapse;

    border-spacing: 0

}

hr {

    display: block;

    height: 1px;

    border: 0;

    border-top: 1px solid #ccc;

    margin: 1em 0;

    padding: 0

}

button, input[type=submit], input[type=button] {

    padding: 0!important;

    margin: 0!important

}

a img, input, select {

    vertical-align: middle

}

button:focus, input:focus {

    outline: 0

}

.clear {

    float: none

}

.self-to-stream {

    display: block

}

.self-to-stream:after {

    content: '';

    width: 0;

    height: 0

}

.hidden {

    display: none!important

}

.block, .ellipsis {

    display: block

}

.disable-event {

    -webkit-pointer-events: none;

    -moz-pointer-events: none;

    -ms-pointer-events: none;

    -o-pointer-events: none;

    pointer-events: none

}

.ellipsis {

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    width: 100%

}

.inline-block, .share-link {

    display: inline-block

}

.bold {

    font-weight: 700

}

.ta-center {

    text-align: center

}

.ta-left {

    text-align: left

}

.ta-right {

    text-align: right

}

.width-25 {

    width: 25%

}

.width-33 {

    width: 33.333333%

}

.width-50 {

    width: 50%

}

.width-100 {

    width: 100%

}

.width-a {

    width: auto

}

.height-100 {

    height: 100%

}

.height-a {

    height: auto

}

.full-size {

    width: 100%;

    height: 100%

}

.scroll-touch {

    -webkit-overflow-scrolling: touch;

    -moz-overflow-scrolling: touch;

    -ms-overflow-scrolling: touch;

    -o-overflow-scrolling: touch;

    overflow-scrolling: touch;

    overflow: auto

}

.float-left {

    float: left

}

.float-right {

    float: right

}

.opacity50 {

    opacity: .5

}

.pos-rel {

    position: relative

}

.pos-abs {

    position: absolute

}

.pos-stat {

    position: static

}

.visibility-hidden {

    visibility: hidden

}

.popup-wrapper {

    width: 100%;

    height: 100%;

    position: absolute;

    z-index: 10;

    opacity: 0;

    background-color: rgba(0, 0, 0, .5)

}

.popup-container {

    position: absolute;

    top: 50%;

    left: 50%;

    padding: .9rem 1rem;

    font-size: 1.3rem;

    line-height: 1.5rem;

    background: url(../i/patron.png), #fafafa;

    background-size: 15rem;

    box-shadow: 0 .1rem .4rem rgba(0, 0, 0, .5);

    box-sizing: border-box;

    border-radius: .1rem;

    width: 75%;

    -webkit-transform: translate3d(-50%, -50%, 0);

    -moz-transform: translate3d(-50%, -50%, 0);

    -ms-transform: translate3d(-50%, -50%, 0);

    -o-transform: translate3d(-50%, -50%, 0);

    transform: translate3d(-50%, -50%, 0);

    text-align: center

}

.popup-show-in, .popup-show-out {

    -webkit-animation-iteration-count: 1;

    -o-animation-iteration-count: 1;

    -moz-animation-fill-mode: forwards;

    -ms-animation-fill-mode: forwards;

    -o-animation-fill-mode: forwards;

    -webkit-transform-origin: center center

}

.popup-header {

    font-size: 1.1rem;

    line-height: 130%;

    padding-bottom: .5rem

}

.popup-wide-button, .popup-wide-button-negative {

    display: block;

    height: 1.9rem;

    width: 90%;

    padding-top: .6rem;

    margin: .4rem auto .7rem

}

.popup-wide-button-negative:active, .popup-wide-button:active {

    box-shadow: none

}

.popup-wide-button-negative {

    margin-top: 1.6rem;

    opacity: .6

}

.popup-close {

    position: absolute;

    right: 0rem;

    top: 0rem;

    width: 1.5rem;

    height: 1.5rem;

    background-color: #e17055;

    background-image: url(../i/popup-close-icon.svg);

    -webkit-background-size: 80%;

    -moz-background-size: 80%;

    -ms-background-size: 80%;

    -o-background-size: 80%;

    background-size: 80%;

    background-position: center

}

.hint-wrapper, .screen {

    top: 0;

    left: 0;

    position: absolute

}

.share-link, .share-link-facebook {

    background-position: 0 0

}

@keyframes show-in {

    0% {

        opacity: 0

    }

    100% {

        opacity: 1

    }

}

@-webkit-keyframes show-in {

    0% {

        opacity: 0

    }

    100% {

        opacity: 1

    }

}

@-webkit-keyframes show-out {

    0% {

        opacity: 1

    }

    100% {

        opacity: 0

    }

}

.popup-show-in {

    -webkit-animation-duration: .3s;

    -moz-animation-duration: .3s;

    -ms-animation-duration: .3s;

    -o-animation-duration: .3s;

    animation-duration: .3s;

    -moz-animation-iteration-count: 1;

    -ms-animation-iteration-count: 1;

    animation-iteration-count: 1;

    -webkit-animation-name: show-in;

    -moz-animation-name: show-in;

    -ms-animation-name: show-in;

    -o-animation-name: show-in;

    animation-name: show-in;

    -webkit-animation-fill-mode: forwards;

    animation-fill-mode: forwards;

    -moz-transform-origin: center center;

    -ms-transform-origin: center center;

    -o-transform-origin: center center;

    transform-origin: center center

}

.popup-show-out, .show-view-animation {

    -webkit-animation-fill-mode: forwards;

    -moz-transform-origin: center center;

    -ms-transform-origin: center center;

    -o-transform-origin: center center

}

.popup-show-out {

    -webkit-animation-duration: .2s;

    -moz-animation-duration: .2s;

    -ms-animation-duration: .2s;

    -o-animation-duration: .2s;

    animation-duration: .2s;

    -moz-animation-iteration-count: 1;

    -ms-animation-iteration-count: 1;

    animation-iteration-count: 1;

    -webkit-animation-name: show-out;

    -moz-animation-name: show-out;

    -ms-animation-name: show-out;

    -o-animation-name: show-out;

    animation-name: show-out;

    animation-fill-mode: forwards;

    transform-origin: center center

}

.hide-view-animation, .show-view-animation {

    -webkit-animation-iteration-count: 1;

    -ms-animation-iteration-count: 1;

    -o-animation-iteration-count: 1;

    -moz-animation-fill-mode: forwards;

    -ms-animation-fill-mode: forwards;

    -webkit-transform-origin: center center

}

.wrapper {

    width: 100%;

    height: 100%;

    color: #fafafa;

}

.screen {

    overflow: hidden;

    width: 100%;

    height: 100%;

    opacity: 0;

    -webkit-transition: opacity ease-in .5s;

    -moz-transition: opacity ease-in .5s;

    -ms-transition: opacity ease-in .5s;

    -o-transition: opacity ease-in .5s;

    transition: opacity ease-in .5s

}

@keyframes screen-show-in {

    0% {

        opacity: 0

    }

    100% {

        opacity: 1

    }

}

@-webkit-keyframes screen-show-in {

    0% {

        opacity: 0

    }

    100% {

        opacity: 1

    }

}

.show-view-animation {

    -webkit-animation-duration: .3s;

    -moz-animation-duration: .3s;

    -ms-animation-duration: .3s;

    -o-animation-duration: .3s;

    animation-duration: .3s;

    -moz-animation-iteration-count: 1;

    animation-iteration-count: 1;

    -webkit-animation-name: screen-show-in;

    -moz-animation-name: screen-show-in;

    -ms-animation-name: screen-show-in;

    -o-animation-name: screen-show-in;

    animation-name: screen-show-in;

    -o-animation-fill-mode: forwards;

    animation-fill-mode: forwards;

    transform-origin: center center

}

.hide-view-animation, .hint-container-show-in {

    -moz-transform-origin: center center;

    -ms-transform-origin: center center;

    -o-transform-origin: center center

}

.show-view-no-animation {

    opacity: 1;

    -webkit-transition: none;

    -moz-transition: none;

    -ms-transition: none;

    -o-transition: none;

    transition: none

}

@keyframes screen-show-out {

    0% {

        opacity: 1

    }

    100% {

        opacity: 0

    }

}

@-webkit-keyframes screen-show-out {

    0% {

        opacity: 1

    }

    100% {

        opacity: 0

    }

}

.hide-view-animation {

    -webkit-animation-duration: .7s;

    -moz-animation-duration: .7s;

    -ms-animation-duration: .7s;

    -o-animation-duration: .7s;

    animation-duration: .7s;

    -moz-animation-iteration-count: 1;

    animation-iteration-count: 1;

    -webkit-animation-name: screen-show-out;

    -moz-animation-name: screen-show-out;

    -ms-animation-name: screen-show-out;

    -o-animation-name: screen-show-out;

    animation-name: screen-show-out;

    -webkit-animation-fill-mode: forwards;

    -o-animation-fill-mode: forwards;

    animation-fill-mode: forwards;

    transform-origin: center center

}

.hint-container-show-in, .hint-container-show-out {

    -webkit-animation-iteration-count: 1;

    -moz-animation-iteration-count: 1;

    -ms-animation-iteration-count: 1;

    -o-animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;

    -moz-animation-fill-mode: forwards;

    -o-animation-fill-mode: forwards

}

.scroll-area-container {

    -webkit-overflow-scrolling: touch;

    -moz-overflow-scrolling: touch;

    -ms-overflow-scrolling: touch;

    -o-overflow-scrolling: touch;

    overflow-scrolling: touch;

    height: 100%;

    overflow: hidden

}

.share-link-wrapper {

    font-size: 0;

    line-height: 0

}

.hint-text, .share-link {

    font-size: 1rem;

    line-height: 1rem

}

.share-link {

    width: 2rem;

    height: 2rem;

    background-size: 100% auto;

    margin: 0 .5rem;

    overflow: hidden;

    text-decoration: none;

    background-image: url(../i/share-icons.svg)

}

.share-link-twitter {

    background-position: 0 25%

}

.share-link-google {

    background-position: 0 75%

}

.share-link-linkedin {

    background-position: 0 100%

}

.share-link-vk {

    background-position: 0 50%

}

.external-link-icon, .flip-tan-image, .rotater, .tan {

    background-position: center center;

    background-repeat: no-repeat

}

.hint-wrapper {

    width: 100%;

    height: 100%;

    z-index: 10;

    opacity: 0

}

@keyframes hint-bg-show-in {

    0% {

        opacity: 0

    }

    100% {

        opacity: 1

    }

}

@keyframes hint-bg-show-out {

    0% {

        opacity: 1

    }

    100% {

        opacity: 0

    }

}

.hint-container-show-in {

    -webkit-animation-duration: .5s;

    -moz-animation-duration: .5s;

    -ms-animation-duration: .5s;

    -o-animation-duration: .5s;

    animation-duration: .5s;

    animation-iteration-count: 1;

    -webkit-animation-name: hint-bg-show-in;

    -moz-animation-name: hint-bg-show-in;

    -ms-animation-name: hint-bg-show-in;

    -o-animation-name: hint-bg-show-in;

    animation-name: hint-bg-show-in;

    -ms-animation-fill-mode: forwards;

    animation-fill-mode: forwards;

    -webkit-transform-origin: center center;

    transform-origin: center center

}

.hint-container-show-in-no-animation {

    opacity: 1

}

.hint-container-show-out {

    -webkit-animation-duration: .2s;

    -moz-animation-duration: .2s;

    -ms-animation-duration: .2s;

    -o-animation-duration: .2s;

    animation-duration: .2s;

    animation-iteration-count: 1;

    -webkit-animation-name: hint-bg-show-out;

    -moz-animation-name: hint-bg-show-out;

    -ms-animation-name: hint-bg-show-out;

    -o-animation-name: hint-bg-show-out;

    animation-name: hint-bg-show-out;

    -ms-animation-fill-mode: forwards;

    animation-fill-mode: forwards;

    -webkit-transform-origin: center center;

    -moz-transform-origin: center center;

    -ms-transform-origin: center center;

    -o-transform-origin: center center;

    transform-origin: center center

}

.hint-focus {

    position: absolute;

    box-shadow: inset 0 0 .4rem .4rem rgba(0, 0, 0, .5);

    z-index: 0;

    outline: rgba(0, 0, 0, .5) solid 100rem

}

.hint-arrow, .hint-text {

    z-index: 1;

    position: absolute

}

.hint-text {

    opacity: 0;

    padding: .5rem;

    box-sizing: border-box;

    background-color: #fff;

    box-shadow: 0 .2rem .2rem rgba(0, 0, 0, .5);

    border-radius: .6rem;

    color: #333;

    margin-top: 1.2rem;

    text-align: center;

    -webkit-transform: translate3d(0, 1.5rem, 0);

    -moz-transform: translate3d(0, 1.5rem, 0);

    -ms-transform: translate3d(0, 1.5rem, 0);

    -o-transform: translate3d(0, 1.5rem, 0);

    transform: translate3d(0, 1.5rem, 0);

    border: .2rem solid #333

}

.hint-arrow {

    top: -1.5rem;

    width: 0;

    height: 0;

    left: 50%;

    margin-left: -.6rem;

    border: .8rem solid transparent;

    border-left-width: .6rem;

    border-right-width: .6rem;

    border-bottom-color: #fff

}

.hint-arrow-border {

    position: absolute;

    top: -2rem;

    width: 0;

    height: 0;

    left: 50%;

    margin-left: -.8rem;

    border: 1rem solid transparent;

    border-left-width: .8rem;

    border-right-width: .8rem;

    border-bottom-color: #333;

    z-index: 0

}

.save-atoms, .saved-atoms-name-input {

    position: absolute;

    z-index: 1;

    top: 30px

}

@keyframes hint-text-show-in {

    0% {

        opacity: 0;

        transform: translate3d(0, 1.3rem, 0)

    }

    100% {

        opacity: 1;

        transform: translate3d(0, 0, 0)

    }

}

@-webkit-keyframes hint-text-show-in {

    0% {

        opacity: 0;

        -webkit-transform: translate3d(0, 1.3rem, 0)

    }

    100% {

        opacity: 1;

        -webkit-transform: translate3d(0, 0, 0)

    }

}

.hint-container-show-in-no-animation .hint-text {

    opacity: 1;

    -webkit-transform: translate3d(0, -.5rem, 0);

    -moz-transform: translate3d(0, -.5rem, 0);

    -ms-transform: translate3d(0, -.5rem, 0);

    -o-transform: translate3d(0, -.5rem, 0);

    transform: translate3d(0, -.5rem, 0)

}

.progress-bar-wrapper_hidden, .tangram-menu-button_active .tangram-menu-button-line_1 {

    opacity: 0

}

.hint-container-show-in .hint-text {

    -webkit-animation-delay: .5s;

    -moz-animation-delay: .5s;

    -ms-animation-delay: .5s;

    -o-animation-delay: .5s;

    animation-delay: .5s;

    -webkit-animation-duration: .5s;

    -moz-animation-duration: .5s;

    -ms-animation-duration: .5s;

    -o-animation-duration: .5s;

    animation-duration: .5s;

    -webkit-animation-iteration-count: 1;

    -moz-animation-iteration-count: 1;

    -ms-animation-iteration-count: 1;

    -o-animation-iteration-count: 1;

    animation-iteration-count: 1;

    -webkit-animation-name: hint-text-show-in;

    -moz-animation-name: hint-text-show-in;

    -ms-animation-name: hint-text-show-in;

    -o-animation-name: hint-text-show-in;

    animation-name: hint-text-show-in;

    -webkit-animation-fill-mode: forwards;

    -moz-animation-fill-mode: forwards;

    -ms-animation-fill-mode: forwards;

    -o-animation-fill-mode: forwards;

    animation-fill-mode: forwards;

    -webkit-transform-origin: center center;

    -moz-transform-origin: center center;

    -ms-transform-origin: center center;

    -o-transform-origin: center center;

    transform-origin: center center

}

.external-link-icon {

    background-image: url(../i/link-external.svg);

    width: 4rem;

    height: 4rem;

    background-size: contain;

    margin: 0 auto .2rem

}

.external-link-question {

    font-size: 1.6rem;

    line-height: 150%

}

.external-link-answer-button {

    display: inline-block;

    width: 2.8rem;

    height: 1.8rem;

    padding-top: 1rem;

    line-height: 100%;

    margin: .4rem .5rem .6rem;

    background-color: #ECECEC;

    border-radius: .4rem;

    box-shadow: 0 .1rem .1rem rgba(0, 0, 0, .4)

}

.external-link-answer-button:active {

    box-shadow: none

}

.send{
    border-style: double;
    border: #ECECEC;
    padding-left: 20px;
    left:20px;
    padding-top: 25px;
    top: 25px;
}
.enviarCorreo
{
    padding: .3rem .9rem;
    font-size: 0.3rem;
    background-size: 4rem;
    width: 20%;
    font-size: .6rem;
    line-height: .7rem;
    color: #1892a1;
}
.lbSend{
    font-family: 'Light';
    font-size: 0.6rem;
}
.btnCorreo
{
    width: 24%;
    margin: 0 auto .55rem;
    padding: .7rem;
    background-color: #fafafa;
    text-align: center;
    font-size: 1rem;
    line-height: 1.15rem;
    color: #1892a1;
}
@font-face {

    font-family: origram;

    src: url(../font/origram.otf)

}

@font-face {

    font-family: icons;

    src: url(../font/icomoon.ttf)

}

html {

    min-height: 100%

}

.wrapper {

    font-family: 'Medium';

    line-height: 100%;

    background-position: center;

    background-repeat: no-repeat;

    -webkit-background-size: 100%, 10%, cover;

    -moz-background-size: 100%, 10%, cover;

    -ms-background-size: 100%, 10%, cover;

    -o-background-size: 100%, 10%, cover;

    background-size: 100%, 10%, cover;

    -webkit-transition: linear .3s background-image;

    -moz-transition: linear .3s background-image;

    -ms-transition: linear .3s background-image;

    -o-transition: linear .3s background-image;

    transition: linear .3s background-image

}

.save-atoms {

    left: 30px

}

.saved-atoms-name-input {

    left: 130px

}

.screen-disable, .tangram-pattern, .title-game-name {

    left: 0;

    position: absolute

}

.tangram-pattern {

    top: 0;

    z-index: -1;

    max-width: 100%;

    max-height: 100%

}

.title-game-name {

    font-family: 'Bold';

    text-align: center;

    color: #fafafa;

    letter-spacing: -.3rem;

    font-size: 4.4rem;

    top: 50%;

    width: 100%;

    line-height: 0.5;

    margin-top: -9%;

    text-shadow: 2px 2px 1px rgba(0, 0, 0, .4);

}

.title-game-name::first-letter {

    font-size: 6.5rem;

    letter-spacing: -1.4rem;

}

.title-game-name:after

{

    content: 'DIDÁCTICA Y MATEMÁTICAS';

    position: absolute;

    left: 3.3rem;

    width: calc(100% - 3.3rem);

    text-align: center;

    font-size: 0.69rem;

    line-height: 0;

    letter-spacing: 0.2rem;

    margin-top: -2.75rem;

    

}

.screen--button-wrapper_split, .screen--button-wrapper_split_first, .screen--button-wrapper_split_second {

    position: absolute;

    left: 0;

    width: 100%;

    height: 50%

}

.screen--button-wrapper_split_first {

    top: 0

}

.screen--button-wrapper_split_second {

    top: 50%

}

.screen--button, .screen--button_popup, .screen--checkbox {

    width: 45%;

    margin: 0 auto .55rem;

    padding: .7rem;

    background-color: #fafafa;

    text-align: center;

    font-size: 1rem;

    line-height: 1.15rem;

    color: #1892a1;

}

.screen--button_popup {

    width: 75%

}

.screen--checkbox .screen--checkbox--icon__checked {

    display: none

}

.screen--checkbox .screen--checkbox--icon, .screen--checkbox__checked .screen--checkbox--icon__checked {

    display: inline

}

.screen--checkbox__checked .screen--checkbox--icon {

    display: none

}

.scroll-area-content {

    text-align: center;

    font-size: 0;

    line-height: 0;

    padding-bottom: 3rem

}

.section-preview {

    width: 5rem;

    display: inline-block;

    margin: .45rem;

    padding: .2rem .2rem .4rem;

    background-color: #fff;

    box-shadow: none;

    background-image: none;

}

.section-preview-done-info, .section-preview-star {

    font-size: .7rem;

    line-height: .7rem;

    text-align: right;

    padding: .1rem .2rem 0 0;

    margin-bottom: -.6rem;

    

}

.section-preview-done-info {

    font-size: .55rem;

    font-family: 'Light';

    color: #e17055;

}

.section-preview-star {

    font-size: .8rem;

    line-height: .8rem;

    font-family: icons;

    text-align: center;

    padding: 0 0 .5rem;

    letter-spacing: .1rem;

    color: #f9ca24;

}

.section-preview-image {

    width: 5rem;

    height: 5rem;

    display: block

}

.section-preview-name {

    font-size: .8rem;

    line-height: 1rem; 

    color: #1892a1;

}

.section-header {

    text-align: center;

    font-size: 2rem;

    line-height: 3rem

}

.section-sub-header {

    font-size: 1.5rem;

    line-height: 2rem;

    padding-bottom: .3rem

}

.section-header-wrapper {

    padding: .5rem 0;

    margin: 0 3rem

}

.screen-disable {

    top: 0;

    width: 100%;

    height: 100%;

    z-index: 5;

    overflow: hidden

}

.tangram-menu-button {

    position: absolute;

    width: 2.1rem;

    height: 2.0rem;

    top: .6rem;

    right: .6rem;

    z-index: 1;

    -webkit-transition: opacity ease-out .3s;

    -moz-transition: opacity ease-out .3s;

    -ms-transition: opacity ease-out .3s;

    -o-transition: opacity ease-out .3s;

    transition: opacity ease-out .3s

}

.tan, .tans-wrapper {

    z-index: 0;

    position: absolute

}

.tangram-menu-button-line, .tangram-menu-button-line_0, .tangram-menu-button-line_1, .tangram-menu-button-line_2 {

    position: absolute;

    width: 70%;

    left: 15%;

    height: 8%;

    background-color: #1892a1;

    border-radius: .5rem;

    -webkit-transition: all ease-out .2s;

    -moz-transition: all ease-out .2s;

    -ms-transition: all ease-out .2s;

    -o-transition: all ease-out .2s;

    transition: all ease-out .2s

}

.tangram-menu-button-line_0 {

    top: 25%

}

.tangram-menu-button-line_1 {

    top: 45%

}

.tangram-menu-button-line_2 {

    top: 65%

}

.tangram-menu--header {

    text-align: center;

    text-transform: capitalize;

    padding-bottom: 1rem;

    color: #ee7455;

    margin-top: 1rem;

}

.tangram-menu-button_active .tangram-menu-button-line_0 {

    -webkit-transform: translate3d(0, 230%, 0) rotate(45deg);

    -moz-transform: translate3d(0, 230%, 0) rotate(45deg);

    -ms-transform: translate3d(0, 230%, 0) rotate(45deg);

    -o-transform: translate3d(0, 230%, 0) rotate(45deg);

    transform: translate3d(0, 230%, 0) rotate(45deg)

}

.tangram-menu-button_active .tangram-menu-button-line_2 {

    -webkit-transform: translate3d(0, -270%, 0) rotate(-45deg);

    -moz-transform: translate3d(0, -270%, 0) rotate(-45deg);

    -ms-transform: translate3d(0, -270%, 0) rotate(-45deg);

    -o-transform: translate3d(0, -270%, 0) rotate(-45deg);

    transform: translate3d(0, -270%, 0) rotate(-45deg)

}

.screen-back {

    font-family: icons;

    left: 0;

    top: 0;

    font-size: 2rem;

    line-height: 2rem;

    padding: 1rem;

    text-align: center;

    width: 1rem;

    float: left

}

.screen-back:active {

    text-shadow: none

}

.tans-wrapper {

    top: 0;

    left: 0

}

.tan {

    top: 0;

    left: 0;

    -webkit-background-size: 100% 100%;

    -moz-background-size: 100% 100%;

    -ms-background-size: 100% 100%;

    -o-background-size: 100% 100%;

    background-size: 100% 100%

}

.tan--deactive {

    opacity: .5

}

.tan-shadow {

    opacity: .33

}

.market-link, .market-link_left {

    position: absolute;

    top: .7rem;

    right: .6rem;

    width: 2.3rem;

    height: 2.2rem;

    z-index: 1;

    font-family: icons;

    text-indent: .55rem;

    line-height: 2.2rem;

    font-size: 1.05rem;

    -webkit-transition: opacity ease-out .1s;

    -moz-transition: opacity ease-out .1s;

    -ms-transition: opacity ease-out .1s;

    -o-transition: opacity ease-out .1s;

    transition: opacity ease-out .1s

}

.market-link_left {

    left: .6rem;

    right: auto

}

.flip-tan {

    position: absolute;

    z-index: 1

}

.flip-tan-image {

    width: 100%;

    height: 100%;

    background-image: url(../i/flip.svg);

    -webkit-background-size: 90% 90%;

    -moz-background-size: 90% 90%;

    -ms-background-size: 90% 90%;

    -o-background-size: 90% 90%;

    background-size: 90% 90%

}



.timer {

    position: absolute;

    top: 1.05rem;

    left: 0;

    text-align: center;

    z-index: -1;

    width: 100%

}

.rotater {

    position: absolute;

    -webkit-background-size: 90% 90%;

    -moz-background-size: 90% 90%;

    -ms-background-size: 90% 90%;

    -o-background-size: 90% 90%;

    background-size: 90% 90%;

    background-image: url(../i/rotate-bg.svg)

}

.one-more-tangram-wrapper {

    font-family: icons;

    width: 100%;

    height: 100%

}

.one-more-tangram, .one-more-tangram_center, .one-more-tangram_left, .one-more-tangram_right {

    font-weight: 700;

    position: absolute;

    bottom: 2rem;

    width: 3.5rem;

    padding: .3rem .3rem;

    background-color: #fff;

    text-align: center;

    font-size: 2rem;

    line-height: 2rem;

    left: 50%;

    color: #1892a1;

}

.one-more-tangram-check, .tangram-successful-view-stars {

    position: absolute;

    width: 100%;

    color: #fff;

    left: 0;

    text-align: center;

}

.one-more-tangram_left {

    margin-left: -9.05rem

}

.one-more-tangram_center {

    margin-left: -2.45rem

}

.one-more-tangram_right {

    margin-left: 4.15rem

}

.one-more-tangram-check {

    z-index: -1;

    top: 20%;

    font-size: 18rem;

    line-height: 18rem;

    opacity: .75

}

.tangram-successful-view-stars {

    display: block;

    font-size: 2.3rem;

    line-height: 2.3rem;

    top: 77%;

    letter-spacing: .6rem;

    text-shadow: .07rem .07rem 0.2rem #fd9644;

    color: #fed330;

}

.tangram-successful-view-star {

    display: inline-block

}

.tangram-successful-full-board {

    display: block;

    background-color: #fff;

    width: 90%

}

.tangram-successful-full-board__congratulation, .tangram-successful-full-board__section-name {

    font-family: 'Medium';

    display: block;

    padding-bottom: 0

}

.tangram-successful-full-board__congratulation

{

    color: #ee7455;

}

.tangram-successful-full-board__section-name {

    font-size: 1rem;

    color: #333;

}

.tangram-successful-full-board__go-to-all-section {

    font-family: 'Medium';

    display: block

}

.tangram-successful__tangram-info {

    display: block;

    padding: .6rem 1.5rem 0 3.8rem;

    font-size: .7rem;

    line-height: .9rem;

    text-align: right;

}

.tangram-successful__tangram-info-paragraph {

    font-family: 'Light';

    display: block

}

.tangram-successful__tangram-info-paragraph--capitalize {

    text-transform: capitalize

}

.settings-section {

    text-align: center;

    padding-bottom: 2rem

}

.tangram-texture-preview-wrapper {

    width: 90%;

    margin: 0 auto;

    max-width: 22rem

}

.background-texture-preview, .tangram-texture-preview {

    width: 25%;

    float: left;

    margin: 2.6%;

    padding: 1.5%;

    opacity: .5

}

.background-texture-preview_active, .tangram-texture-preview_active {

    opacity: 1;

    -webkit-transform: scale(1.08, 1.08);

    -moz-transform: scale(1.08, 1.08);

    -ms-transform: scale(1.08, 1.08);

    -o-transform: scale(1.08, 1.08);

    transform: scale(1.08, 1.08)

}

.background-texture-preview-image, .tangram-texture-preview-image {

    display: block;

    width: 100%

}

.tangram-texture-preview-image {

    margin-bottom: -100%

}

.tangram-texture-preview-frame {

    display: block;

    width: 100%;

    position: relative;

    z-index: 1

}

.screen--button--icon, .screen--button--icon_inactive, .screen--checkbox--icon, .screen--checkbox--icon__checked {

    font-family: icons;

    font-size: 1.1rem;

    line-height: 1rem;

    float: left;

    margin-right: -1rem;

    padding-top: .1rem

}

.screen--button--icon_inactive {

    opacity: .25

}

.set-lang-wrapper {

    padding-top: 5px

}

.progress-bar-wrapper {

    position: absolute;

    width: 90%;

    left: 5%;

    top: 1.9rem;

    height: .2rem;

    border: 1px solid #FFF;

    overflow: hidden;

    border-radius: .2rem;

    z-index: -1;

    -webkit-transition: opacity .5s ease-out;

    -moz-transition: opacity .5s ease-out;

    -ms-transition: opacity .5s ease-out;

    -o-transition: opacity .5s ease-out;

    transition: opacity .5s ease-out

}

.progress-bar {

    width: 0;

    height: 100%;

    background-color: #FFF

}

.swiper-slide, .swiper-wrapper {

    width: 100%;

    height: 100%;

    position: relative

}

.swiper-container {

    margin: 0 auto;

    position: relative;

    overflow: hidden;

    z-index: 1

}

.swiper-container-no-flexbox .swiper-slide {

    float: left

}

.swiper-container-vertical>.swiper-wrapper {

    -webkit-box-orient: vertical;

    -moz-box-orient: vertical;

    -ms-flex-direction: column;

    -webkit-flex-direction: column;

    flex-direction: column

}

.swiper-wrapper {

    z-index: 1;

    display: -webkit-box;

    display: -moz-box;

    display: -ms-flexbox;

    display: -webkit-flex;

    display: flex;

    -webkit-transition-property: -webkit-transform;

    -moz-transition-property: -moz-transform;

    -o-transition-property: -o-transform;

    -ms-transition-property: -ms-transform;

    transition-property: transform;

    -webkit-box-sizing: content-box;

    -moz-box-sizing: content-box;

    box-sizing: content-box

}

.swiper-container-android .swiper-slide, .swiper-wrapper {

    -webkit-transform: translate3d(0, 0, 0);

    -moz-transform: translate3d(0, 0, 0);

    -o-transform: translate(0, 0);

    -ms-transform: translate3d(0, 0, 0);

    transform: translate3d(0, 0, 0)

}

.swiper-container-multirow>.swiper-wrapper {

    -webkit-box-lines: multiple;

    -moz-box-lines: multiple;

    -ms-flex-wrap: wrap;

    -webkit-flex-wrap: wrap;

    flex-wrap: wrap

}

.swiper-container-free-mode>.swiper-wrapper {

    -webkit-transition-timing-function: ease-out;

    -moz-transition-timing-function: ease-out;

    -ms-transition-timing-function: ease-out;

    -o-transition-timing-function: ease-out;

    transition-timing-function: ease-out;

    margin: 0 auto

}

.swiper-slide {

    -webkit-flex-shrink: 0;

    -ms-flex: 0 0 auto;

    flex-shrink: 0

}

.swiper-container-autoheight, .swiper-container-autoheight .swiper-slide {

    height: auto

}

.swiper-container-autoheight .swiper-wrapper {

    -webkit-box-align: start;

    -ms-flex-align: start;

    -webkit-align-items: flex-start;

    align-items: flex-start;

    -webkit-transition-property: -webkit-transform, height;

    -moz-transition-property: -moz-transform;

    -o-transition-property: -o-transform;

    -ms-transition-property: -ms-transform;

    transition-property: transform, height

}

.swiper-container .swiper-notification {

    position: absolute;

    left: 0;

    top: 0;

    pointer-events: none;

    opacity: 0;

    z-index: -1000

}

.swiper-wp8-horizontal {

    -ms-touch-action: pan-y;

    touch-action: pan-y

}

.swiper-wp8-vertical {

    -ms-touch-action: pan-x;

    touch-action: pan-x

}

.swiper-button-next, .swiper-button-prev {

    position: absolute;

    top: 50%;

    width: 27px;

    height: 44px;

    margin-top: -22px;

    z-index: 10;

    cursor: pointer;

    -moz-background-size: 27px 44px;

    -webkit-background-size: 27px 44px;

    background-size: 27px 44px;

    background-position: center;

    background-repeat: no-repeat

}

.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {

    opacity: .35;

    cursor: auto;

    pointer-events: none

}

.swiper-button-prev, .swiper-container-rtl .swiper-button-next {

    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");

    left: 10px;

    right: auto

}

.swiper-button-prev.swiper-button-black, .swiper-container-rtl .swiper-button-next.swiper-button-black {

    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")

}

.swiper-button-prev.swiper-button-white, .swiper-container-rtl .swiper-button-next.swiper-button-white {

    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")

}

.swiper-button-next, .swiper-container-rtl .swiper-button-prev {

    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");

    right: 10px;

    left: auto

}

.swiper-button-next.swiper-button-black, .swiper-container-rtl .swiper-button-prev.swiper-button-black {

    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")

}

.swiper-button-next.swiper-button-white, .swiper-container-rtl .swiper-button-prev.swiper-button-white {

    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")

}

.swiper-pagination {

    position: absolute;

    text-align: center;

    -webkit-transition: .3s;

    -moz-transition: .3s;

    -o-transition: .3s;

    transition: .3s;

    -webkit-transform: translate3d(0, 0, 0);

    -ms-transform: translate3d(0, 0, 0);

    -o-transform: translate3d(0, 0, 0);

    transform: translate3d(0, 0, 0);

    z-index: 10

}

.swiper-pagination.swiper-pagination-hidden {

    opacity: 0

}

.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {

    bottom: 10px;

    left: 0;

    width: 100%

}

.swiper-pagination-bullet {

    width: 8px;

    height: 8px;

    display: inline-block;

    border-radius: 100%;

    background: #000;

    opacity: .2

}

button.swiper-pagination-bullet {

    border: none;

    margin: 0;

    padding: 0;

    box-shadow: none;

    -moz-appearance: none;

    -ms-appearance: none;

    -webkit-appearance: none;

    appearance: none

}

.swiper-pagination-clickable .swiper-pagination-bullet {

    cursor: pointer

}

.swiper-pagination-white .swiper-pagination-bullet {

    background: #fff

}

.swiper-pagination-bullet-active {

    opacity: 1;

    background: #007aff

}

.swiper-pagination-white .swiper-pagination-bullet-active {

    background: #fff

}

.swiper-pagination-black .swiper-pagination-bullet-active {

    background: #000

}

.swiper-container-vertical>.swiper-pagination-bullets {

    right: 10px;

    top: 50%;

    -webkit-transform: translate3d(0, -50%, 0);

    -moz-transform: translate3d(0, -50%, 0);

    -o-transform: translate(0, -50%);

    -ms-transform: translate3d(0, -50%, 0);

    transform: translate3d(0, -50%, 0)

}

.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {

    margin: 5px 0;

    display: block

}

.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {

    margin: 0 5px

}

.swiper-pagination-progress {

    background: rgba(0, 0, 0, .25);

    position: absolute

}

.swiper-pagination-progress .swiper-pagination-progressbar {

    background: #007aff;

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    -webkit-transform: scale(0);

    -ms-transform: scale(0);

    -o-transform: scale(0);

    transform: scale(0);

    -webkit-transform-origin: left top;

    -moz-transform-origin: left top;

    -ms-transform-origin: left top;

    -o-transform-origin: left top;

    transform-origin: left top

}

.swiper-container-rtl .swiper-pagination-progress .swiper-pagination-progressbar {

    -webkit-transform-origin: right top;

    -moz-transform-origin: right top;

    -ms-transform-origin: right top;

    -o-transform-origin: right top;

    transform-origin: right top

}

.swiper-container-horizontal>.swiper-pagination-progress {

    width: 100%;

    height: 4px;

    left: 0;

    top: 0

}

.swiper-container-vertical>.swiper-pagination-progress {

    width: 4px;

    height: 100%;

    left: 0;

    top: 0

}

.swiper-pagination-progress.swiper-pagination-white {

    background: rgba(255, 255, 255, .5)

}

.swiper-pagination-progress.swiper-pagination-white .swiper-pagination-progressbar {

    background: #fff

}

.swiper-pagination-progress.swiper-pagination-black .swiper-pagination-progressbar {

    background: #000

}

.swiper-container-3d {

    -webkit-perspective: 1200px;

    -moz-perspective: 1200px;

    -o-perspective: 1200px;

    perspective: 1200px

}

.swiper-container-3d .swiper-cube-shadow, .swiper-container-3d .swiper-slide, .swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-wrapper {

    -webkit-transform-style: preserve-3d;

    -moz-transform-style: preserve-3d;

    -ms-transform-style: preserve-3d;

    transform-style: preserve-3d

}

.swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    pointer-events: none;

    z-index: 10

}

.swiper-container-3d .swiper-slide-shadow-left {

    background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .5)), to(transparent));

    background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, .5), transparent);

    background-image: -moz-linear-gradient(right, rgba(0, 0, 0, .5), transparent);

    background-image: -o-linear-gradient(right, rgba(0, 0, 0, .5), transparent);

    background-image: linear-gradient(to left, rgba(0, 0, 0, .5), transparent)

}

.swiper-container-3d .swiper-slide-shadow-right {

    background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, .5)), to(transparent));

    background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .5), transparent);

    background-image: -moz-linear-gradient(left, rgba(0, 0, 0, .5), transparent);

    background-image: -o-linear-gradient(left, rgba(0, 0, 0, .5), transparent);

    background-image: linear-gradient(to right, rgba(0, 0, 0, .5), transparent)

}

.swiper-container-3d .swiper-slide-shadow-top {

    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .5)), to(transparent));

    background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .5), transparent);

    background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, .5), transparent);

    background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, .5), transparent);

    background-image: linear-gradient(to top, rgba(0, 0, 0, .5), transparent)

}

.swiper-container-3d .swiper-slide-shadow-bottom {

    background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, .5)), to(transparent));

    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, .5), transparent);

    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, .5), transparent);

    background-image: -o-linear-gradient(top, rgba(0, 0, 0, .5), transparent);

    background-image: linear-gradient(to bottom, rgba(0, 0, 0, .5), transparent)

}

.swiper-container-coverflow .swiper-wrapper, .swiper-container-flip .swiper-wrapper {

    -ms-perspective: 1200px

}

.swiper-container-cube, .swiper-container-flip {

    overflow: visible

}

.swiper-container-cube .swiper-slide, .swiper-container-flip .swiper-slide {

    pointer-events: none;

    -webkit-backface-visibility: hidden;

    -moz-backface-visibility: hidden;

    -ms-backface-visibility: hidden;

    backface-visibility: hidden;

    z-index: 1

}

.swiper-container-cube .swiper-slide .swiper-slide, .swiper-container-flip .swiper-slide .swiper-slide {

    pointer-events: none

}

.swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-active .swiper-slide-active, .swiper-container-flip .swiper-slide-active, .swiper-container-flip .swiper-slide-active .swiper-slide-active {

    pointer-events: auto

}

.swiper-container-cube .swiper-slide-shadow-bottom, .swiper-container-cube .swiper-slide-shadow-left, .swiper-container-cube .swiper-slide-shadow-right, .swiper-container-cube .swiper-slide-shadow-top, .swiper-container-flip .swiper-slide-shadow-bottom, .swiper-container-flip .swiper-slide-shadow-left, .swiper-container-flip .swiper-slide-shadow-right, .swiper-container-flip .swiper-slide-shadow-top {

    z-index: 0;

    -webkit-backface-visibility: hidden;

    -moz-backface-visibility: hidden;

    -ms-backface-visibility: hidden;

    backface-visibility: hidden

}

.swiper-container-cube .swiper-slide {

    visibility: hidden;

    -webkit-transform-origin: 0 0;

    -moz-transform-origin: 0 0;

    -ms-transform-origin: 0 0;

    transform-origin: 0 0;

    width: 100%;

    height: 100%

}

.swiper-container-cube.swiper-container-rtl .swiper-slide {

    -webkit-transform-origin: 100% 0;

    -moz-transform-origin: 100% 0;

    -ms-transform-origin: 100% 0;

    transform-origin: 100% 0

}

.swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-next, .swiper-container-cube .swiper-slide-next+.swiper-slide, .swiper-container-cube .swiper-slide-prev {

    pointer-events: auto;

    visibility: visible

}

.swiper-container-cube .swiper-cube-shadow {

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100%;

    height: 100%;

    background: #000;

    opacity: .6;

    -webkit-filter: blur(50px);

    filter: blur(50px);

    z-index: 0

}

.swiper-container-fade.swiper-container-free-mode .swiper-slide {

    -webkit-transition-timing-function: ease-out;

    -moz-transition-timing-function: ease-out;

    -ms-transition-timing-function: ease-out;

    -o-transition-timing-function: ease-out;

    transition-timing-function: ease-out

}

.swiper-container-fade .swiper-slide {

    pointer-events: none;

    -webkit-transition-property: opacity;

    -moz-transition-property: opacity;

    -o-transition-property: opacity;

    transition-property: opacity

}

.swiper-container-fade .swiper-slide .swiper-slide {

    pointer-events: none

}

.swiper-container-fade .swiper-slide-active, .swiper-container-fade .swiper-slide-active .swiper-slide-active {

    pointer-events: auto

}

.swiper-scrollbar {

    border-radius: 10px;

    position: relative;

    -ms-touch-action: none;

    background: rgba(0, 0, 0, .1)

}

.swiper-container-horizontal>.swiper-scrollbar {

    position: absolute;

    left: 1%;

    bottom: 3px;

    z-index: 50;

    height: 5px;

    width: 98%

}

.swiper-container-vertical>.swiper-scrollbar {

    position: absolute;

    right: 3px;

    top: 1%;

    z-index: 50;

    width: 5px;

    height: 98%

}

.swiper-scrollbar-drag {

    height: 100%;

    width: 100%;

    position: relative;

    background: rgba(0, 0, 0, .5);

    border-radius: 10px;

    left: 0;

    top: 0

}

.swiper-scrollbar-cursor-drag {

    cursor: move

}

.swiper-lazy-preloader {

    width: 42px;

    height: 42px;

    position: absolute;

    left: 50%;

    top: 50%;

    margin-left: -21px;

    margin-top: -21px;

    z-index: 10;

    -webkit-transform-origin: 50%;

    -moz-transform-origin: 50%;

    transform-origin: 50%;

    -webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite;

    -moz-animation: swiper-preloader-spin 1s steps(12, end) infinite;

    animation: swiper-preloader-spin 1s steps(12, end) infinite

}

.swiper-lazy-preloader:after {

    display: block;

    content: "";

    width: 100%;

    height: 100%;

    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");

    background-position: 50%;

    -webkit-background-size: 100%;

    background-size: 100%;

    background-repeat: no-repeat

}

.swiper-lazy-preloader-white:after {

    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")

}

@-webkit-keyframes swiper-preloader-spin {

    100% {

        -webkit-transform: rotate(360deg)

    }

}

@keyframes swiper-preloader-spin {

    100% {

        transform: rotate(360deg)

    }

}

.anim-from-left {

    -webkit-transform: translate3d(-100%, 0, 0);

    -moz-transform: translate3d(-100%, 0, 0);

    -ms-transform: translate3d(-100%, 0, 0);

    -o-transform: translate3d(-100%, 0, 0);

    transform: translate3d(-100%, 0, 0)

}

.anim-from-right {

    -webkit-transform: translate3d(100%, 0, 0);

    -moz-transform: translate3d(100%, 0, 0);

    -ms-transform: translate3d(100%, 0, 0);

    -o-transform: translate3d(100%, 0, 0);

    transform: translate3d(100%, 0, 0)

}

.anim-from-top {

    -webkit-transform: translate3d(0, -100%, 0);

    -moz-transform: translate3d(0, -100%, 0);

    -ms-transform: translate3d(0, -100%, 0);

    -o-transform: translate3d(0, -100%, 0);

    transform: translate3d(0, -100%, 0)

}

.font-hook-icon, .font-hook-tangram-font {

    visibility: hidden

}

.font-hook-tangram-font {

    font-family: origram

}

.font-hook-icon {

    font-family: icons

}