/*
Theme Name: Troikatronix
Author: Ingmar Standke
Author URI: http://www.ingmarstandke.com
Version: 1.0
*/

@font-face {
    font-family: 'Open Sans';
    src: url('https://troikatronix.com/wp-content/themes/troikatronix/fonts/OpenSans-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('https://troikatronix.com/wp-content/themes/troikatronix/fonts/OpenSans-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('https://troikatronix.com/wp-content/themes/troikatronix/fonts/OpenSans-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('https://troikatronix.com/wp-content/themes/troikatronix/fonts/OpenSans-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('https://troikatronix.com/wp-content/themes/troikatronix/fonts/OpenSans-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


#wpadminbar {
    display: none;
}

@media screen,
projection,
print {
    html,
    body {
        margin: 0;
        height: 100%;
    }
    body {
        padding: 0px 10px 0px 10px;
        overflow-y: scroll;
        font-family: 'Open Sans', sans-serif;
        font-weight: 400;
        line-height: 16px;
        font-size: 12px;
        color: #ffffff;
    }
    * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    #app {
        position: relative;
        overflow: hidden;
        margin: 0 auto;
        width: 100%;
        height: auto !important;
        height: 100%;
        min-height: 100%;
        background: -moz-linear-gradient(left, rgba(255, 0, 178, 1) 0%, rgba(0, 0, 0, 0.75) 100%);
        background: -webkit-linear-gradient(left, rgba(255, 0, 178, 1) 0%, rgba(0, 0, 0, 0.75) 100%);
        background: linear-gradient(to right, rgba(255, 0, 178, 1) 0%, rgba(0, 0, 0, 0.75) 100%);
        filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ff00b2', endColorstr='#bf000000', GradientType=1);
    }
    body.popup #app {
        height: inherit !important;
    }
    #app:after {
        content: '';
        display: block;
        clear: both;
    }
    #bg {
        position: absolute;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
    }
    #bg>div {
        position: absolute;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        background: -moz-linear-gradient(left, rgba(116, 116, 116, 1) 0%, rgba(70, 107, 176, 1) 100%);
        background: -webkit-linear-gradient(left, rgba(116, 116, 116, 1) 0%, rgba(70, 107, 176, 1) 100%);
        background: linear-gradient(to right, rgba(116, 116, 116, 1) 0%, rgba(70, 107, 176, 1) 100%);
    }
    #bg>div+div {
        display: none;
        filter: alpha(opacity: 0);
        opacity: 0;
        background: -moz-linear-gradient(left, rgba(255, 0, 178, 1) 0%, rgba(64, 64, 64, 1) 100%);
        background: -webkit-linear-gradient(left, rgba(255, 0, 178, 1) 0%, rgba(64, 64, 64, 1) 100%);
        background: linear-gradient(to right, rgba(255, 0, 178, 1) 0%, rgba(64, 64, 64, 1) 100%);
    }
    #bg>div+div+div {
        background: -moz-linear-gradient(left, rgba(70, 107, 176, 1) 0%, rgba(116, 116, 116, 1) 100%);
        background: -webkit-linear-gradient(left, rgba(70, 107, 176, 1) 0%, rgba(116, 116, 116, 1) 100%);
        background: linear-gradient(to right, rgba(70, 107, 176, 1) 0%, rgba(116, 116, 116, 1) 100%);
    }
    #bg>div+div+div+div {
        background: -moz-linear-gradient(left, rgba(64, 64, 64, 1) 0%, rgba(255, 0, 178, 1) 100%);
        background: -webkit-linear-gradient(left, rgba(64, 64, 64, 1) 0%, rgba(255, 0, 178, 1) 100%);
        background: linear-gradient(to right, rgba(64, 64, 64, 1) 0%, rgba(255, 0, 178, 1) 100%);
    }
    #page {
        float: left;
        position: relative;
        z-index: 10;
        overflow: hidden;
        width: 100%;
        height: auto;
        padding-bottom: 49px;
    }
    a {
        text-decoration: none;
        color: #ffffff;
    }
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p {
        margin: 0px;
    }
    ul {
        list-style: none;
        margin: 0px;
        padding: 0px;
    }
    .center {
        position: relative;
        margin: 0 auto;
    }
    .r {
        float: left;
        position: relative;
        width: 100%;
    }
    .r>.col {
        float: left;
        position: relative;
    }
    .rt {
        display: table;
        position: relative;
        width: 100%;
        table-layout: fixed;
    }
    .rt>.col {
        position: relative;
        display: table-cell;
        width: auto;
        vertical-align: top;
    }
    h1 {
        margin-top: -1px;
        line-height: 28px;
        font-size: 24px;
        font-weight: 400;
        text-transform: uppercase;
    }
    h2 {
        line-height: 21px;
        font-size: 14px;
        font-weight: 600;
        font-style: italic;
    }
    h3 {
        font-size: 15px;
        font-weight: 700;
        text-transform: uppercase;
    }
    #header {
        position: relative;
        height: 120px;
        background: #ffffff;
    }
    #header .center>.r {
        height: 120px;
    }
    #header #logo {
        position: absolute;
        z-index: 10;
        left: 5px;
        top: 18px;
        width: 649px;
        height: 74px;
        background: url(m/header/logo.png);
    }
    #header .navigation {
        position: absolute;
        z-index: 10;
        left: 0px;
        bottom: -3px;
    }
    #header .navigation li {
        float: left;
    }
    #header .navigation li a {
        display: block;
        width: 108px;
        height: 37px;
        font-size: 15px;
        line-height: 37px;
        text-transform: uppercase;
        text-align: left;
        color: #404040;
    }
    #header .navigation li+li a {
        width: 108px;
        text-align: center;
    }
    #header .navigation li+li+li a {
        width: 104px;
    }
    #header .navigation li+li+li+li a {
        width: 110px;
    }
    #header .navigation li+li+li+li+li a {
        width: 120px;
    }
    #header .navigation li+li+li+li+li+li a {
        width: 140px;
    }
    #header .navigation li+li+li+li+li+li+li {
        display: none;
    }
    #header .navigation li:hover a,
    #header .navigation li a.selected {
        font-weight: 700;
    }
    #header .navigation li:first-child a {
        padding-left: 10px;
    }
    #header .marker {
        position: absolute;
        z-index: 9;
        top: 100%;
        display: block;
        width: 100px;
        height: 4px;
        background: #ffffff;
    }
    #header a.button {
        display: none;
        position: absolute;
        right: 10px;
        top: 18px;
    }
    #header a.button span {
        display: block;
        width: 21px;
        height: 3px;
        background: #FF00B2;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;
    }
    #header a.button span+span {
        margin-top: 3px;
    }
    #header ul.meta {
        position: absolute;
        right: 0px;
        top: 6px;
    }
    #header ul.meta li {
        float: left;
    }
    #header ul.meta li a {
        padding: 0px 4px 0px 4px;
        line-height: 23px;
        text-transform: uppercase;
        color: #404040;
    }
    #header ul.meta li a.social {
        display: block;
        width: 22px;
        height: 22px;
        padding: 0px;
        background: url(m/header/social.png);
    }
    #header ul.meta li a.social.twitter {
        display: none;
        background-position: -22px 0px;
    }
    #header ul.meta li a.social.feed {
        background-position: -44px 0px;
    }
    #header ul.meta li a.social.instagram {
        background-position: -66px 0px;
    }
    #header ul.meta li a.social.feed {
        display: none;
    }
    #header ul.meta li a.social.youtube {
        background-position: -88px 0px;
    }
    #header .state {
        position: absolute;
        display: none;
        z-index: 9;
        left: 5px;
        bottom: -5px;
        padding-right: 5px;
        background: #ffffff;
        font-size: 17px;
        line-height: 32px;
        text-transform: uppercase;
        color: #000000;
    }
    #content>.center {
        max-width: 1580px;
        padding: 40px 10px 0px 10px;
    }
    #content>.center.full {
        max-width: inherit;
    }
    #header>.center,
    #footer>.center {
        max-width: 1580px;
    }
    /* Main */
    #content .align {
        margin-left: -10px;
    }
    #content .align .space {
        position: relative;
        margin-left: 10px;
    }
    .text.bg {
        position: absolute;
        overflow: hidden;
        z-index: 10;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        padding: 5px 6px 5px 6px;
        background: rgba(255, 255, 255, 0.85);
        color: #393939;
    }
    .text.bg.full {
        z-index: 20;
    }
    .text.bg>.rt {
        height: 100%;
    }
    .text.bg>.rt.cols2 .col1 {
        padding-right: 5px;
    }
    .text.bg>.rt.cols2 .col2 {
        padding-left: 5px;
    }
    .text.bg a {
        color: #FF00B2;
    }
    .text.bg a span {
        display: inline-block;
    }
    .text.bg a span.icon {
        width: 8px;
        height: 8px;
    }
    .text.bg a.more .icon {
        margin-left: 3px;
        background: url(m/more.png) no-repeat;
    }
    .text.bg a.less .icon {
        background: url(m/less.png) no-repeat;
    }
    .text.bg.nomore a.more {
        display: none;
    }
    .img .overlay {
        position: absolute;
        z-index: 2;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        background: -moz-linear-gradient(top, rgba(255, 0, 178, 0.3) 0%, rgba(255, 0, 178, 0) 100%);
        background: -webkit-linear-gradient(top, rgba(255, 0, 178, 0.3) 0%, rgba(255, 0, 178, 0) 100%);
        background: linear-gradient(to bottom, rgba(255, 0, 178, 0.3) 0%, rgba(255, 0, 178, 0) 100%);
        filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#4dff00b2', endColorstr='#00ff00b2', GradientType=0);
    }
    span.separator {
        display: block;
        width: 100%;
        height: 1px;
        background: #ffffff;
        -webkit-box-shadow: 0px 0px 21px 2px rgba(0, 0, 0, 0.3);
        -moz-box-shadow: 0px 0px 21px 2px rgba(0, 0, 0, 0.3);
        box-shadow: 0px 0px 21px 2px rgba(0, 0, 0, 0.3);
    }
    .bw img {
        filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
        /* Firefox 10+, Firefox on Android */
        filter: gray;
        /* IE6-9 */
        -webkit-filter: grayscale(100%);
    }
    ul.triple li {
        float: left;
        position: relative;
        width: 33.33%;
        margin-bottom: 10px;
    }
    ul.triple li>.space a {
        position: absolute;
        z-index: 10;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
    }
    ul.triple li>.space .img {
        position: relative;
        overflow: hidden;
        z-index: 1;
        width: 100%;
        padding-bottom: 58.94736842105263%;
    }
    ul.triple li>.space .img ul,
    ul.triple li>.space .img ul li {
        position: absolute;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
    }
    ul.triple li>.space .img ul li+li {
        display: none;
        left: 100%;
    }
    ul.triple li>.space .img img {
        width: 100%;
    }
    ul.triple li>.space .img img.full {
        display: none;
    }
    ul.triple li>.space div.thumb {
        position: absolute;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
    }
    ul.triple li>.space .img .info {
        display: none;
    }
    ul.triple li>.space .text {
        position: absolute;
        z-index: 3;
        left: 0px;
        top: 0px;
        width: 100%;
        padding: 3px 10px 3px 10px;
    }
    ul.triple li>.space .text h3,
    ul.triple li>.space .text h4 {
        text-shadow: 0px 0px 7px rgba(0, 0, 0, 0.75);
    }
    ul.triple li>.space .text h4 {
        margin-top: 4px;
        font-weight: 600;
        font-style: italic;
    }
    /* Welcome */
    .welcome #header {
        height: 10px;
    }
    .welcome #header .center {
        display: none;
    }
    .welcome #footer .center {
        display: none;
    }
    .welcome a.start {
        position: absolute;
        z-index: 10;
        left: 50%;
        top: 50%;
        margin-left: -300px;
        margin-top: -91px;
        width: 600px;
        height: 183px;
        background: url(m/content/welcome/welcome.png) no-repeat 0px 0px;
    }
    /* Isadora */
    .isadora #content .teaser1 .col2 .text.bg {
        margin-left: 10px;
        width: auto;
    }
    .isadora #content .werkstatt .col2 .text.bg {
        margin-left: 10px;
        width: auto;
    }
    .isadora #content .teaser1 .col2 .text.bg a.less {
        display: none;
    }
    .isadora #content .werkstatt .col2 .text.bg a.less {
        display: none;
    }
    .isadora #content .teaser1 h2 {
        margin-bottom: 26px;
    }
    .isadora #content .werkstatt h2 {
        margin-bottom: 26px;
    }
    .isadora #content .teaser1 .img,
    .isadora #content .werkstatt .img,
    .isadora #content .teaser2 .img {
        position: relative;
    }
    .isadora #content .teaser1 img,
    .isadora #content .werkstatt img,
    .isadora #content .teaser2 img {
        width: 100%;
    }
    .isadora #content .teaser2,
    .isadora #content .werkstatt {
        margin-top: 33px;
    }
    .isadora #content .teaser2 .space>.text {
        position: relative;
        margin-top: 7px;
        padding-bottom: 74px;
    }
    .isadora #content .teaser2 .header.rt .col {
        vertical-align: bottom;
    }
    .isadora #content .action {
        margin-top: 33px;
    }
    .isadora #content .action h2 {
        margin-bottom: 7px;
    }
    .isadora #content .features {
        margin-top: 20px;
        margin-bottom: 50px;
    }
    .isadora #content .features h1 {
        margin-bottom: 30px;
    }
    .isadora #content .features .col>span {
        position: absolute;
        display: block;
        top: 0px;
        width: 100%;
        height: 1px;
        padding-left: 10px;
    }
    .isadora #content .features .col>span+span {
        top: inherit;
        bottom: 0px;
    }
    .isadora #content .features .col {
        padding-bottom: 88px;
    }
    .isadora #content .features .col h3 {
        margin-top: 15px;
    }
    .isadora #content .features .col ul {
        margin-top: 18px;
    }
    .isadora #content .features .col li {
        padding-left: 15px;
        background: url(m/list.png) no-repeat 0px 5px;
        line-height: 20px;
        font-size: 14px;
        font-weight: 600;
        font-style: italic;
    }
    .isadora #content .features .col .img {
        position: absolute;
        left: 10px;
        bottom: 28px;
        width: 100%;
        padding-right: 20px;
    }
    .isadora #content .features .col .img img {
        float: left;
        width: 100%;
    }
    .isadora #content .features .col1 .img img {
        max-width: 355px;
    }
    .isadora #content .features .col2 .img img {
        max-width: 300px;
    }
    /* Home */
    .home #content .r.teaser+.r.teaser {
        margin-top: 10px;
    }
    .home #content .teaser .img {
        position: relative;
        padding-bottom: 56.39%;
    }
    .home #content .teaser .img ul,
    .home #content .teaser .img ul li,
    .home #content .teaser .img ul li .media,
    .home #content .teaser .img ul li iframe {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }
    .home #content .teaser .img ul li iframe {
        z-index: 5;
    }
    .home #content .teaser .img ul {
        overflow: hidden;
    }
    .home #content .teaser .img ul li {
        transition: opacity 1.5s ease-out;
        -webkit-transition: opacity 1.5s ease-out;
        -moz-transition: opacity 1.5s ease-out;
        -o-transition: opacity 1.5s ease-out;
    }
    .home #content .teaser .img ul li+li {
        opacity: 0;
    }
    .home #content .teaser .img ul li.last {
        z-index: -1;
        opacity: 0;
    }
    .home #content .teaser .img ul li.current {
        z-index: inherit;
        opacity: 1;
    }
    .home #content .teaser li.landscape .media {
        background-size: cover;
    }
    .home #content .teaser li.portrait .media {
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center 0;
    }
    .home #content .teaser li .media {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }
    .home #content .teaser li .media.bw {
        filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
        /* Firefox 10+, Firefox on Android */
        filter: gray;
        /* IE6-9 */
        -webkit-filter: grayscale(100%);
    }
    .home #content .teaser li .icon.video {
        position: absolute;
        z-index: 2;
        display: block;
        width: 63px;
        height: 44px;
        border: 1px solid #fff;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        left: 50%;
        top: 50%;
        margin-left: -31px;
        margin-top: -22px;
        background: url(m/content/make/video2.png) no-repeat 0px 0px;
        -webkit-box-shadow: 1px 1px 12px 0px rgba(0, 0, 0, 0.87);
        -moz-box-shadow: 1px 1px 12px 0px rgba(0, 0, 0, 0.87);
        box-shadow: 1px 1px 12px 0px rgba(0, 0, 0, 0.87);
    }
    .home #content .teaser li span.area {
        position: absolute;
        z-index: 4;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        cursor: pointer;
    }
    .home #content .teaser .text {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 10;
        width: 100%;
        pointer-events: none;
    }
    .home #content .teaser .text .title {
        max-width: 70%;
    }
    .home #content .teaser .text .texts {
        max-width: 50%;
        pointer-events: all;
    }
    .home #content .teaser .text h3 {
        display: inline-block;
        padding: 8px;
        font-size: 24px;
        line-height: 25px;
        background: #fff;
        font-weight: 400;
        text-transform: uppercase;
        color: #ff00b2;
    }
    .home #content .teaser .text p a {
        color: #ff00b2;
    }
    .home #content .teaser .text h3 span {
        position: relative;
        z-index: 2;
    }
    .home #content .teaser .text .preview,
    .home #content .teaser .text .full {
        display: inline-block;
        margin-top: -12px;
        padding: 8px;
        font-size: 16px;
        line-height: 22px;
        background: #fff;
        color: #404040;
    }
    .home #content .teaser .text .preview.closed {
        padding: 0;
        height: 0;
        margin-top: 0;
        overflow: hidden;
    }
    .home #content .teaser .text .preview_template,
    .home #content .teaser .text .full_template {
        display: none;
    }
    .home #content .teaser .text .more,
    .home #content .teaser .text .less {
        display: inline-block;
        text-transform: uppercase;
        font-size: 12px;
        color: #ff00b2;
        cursor: pointer;
        padding-right: 13px;
    }
    .home #content .teaser .text .more {
        background: url(m/more2.png) no-repeat right 6px;
        background-size: 9px 9px;
    }
    .home #content .teaser .text .less {
        background: url(m/less2.png) no-repeat right 6px;
        background-size: 9px 9px;
    }
    .home #content .teaser .text .full {
        display: none;
        overflow: auto;
    }
    .home #content .teaser .text .full p+p,
    .home #content .teaser .text .preview.custom p+p {
        margin-top: 10px;
    }
    .home #content .teaser ul.navigation {
        position: absolute;
        z-index: 15;
        width: 100%;
        left: 0;
        bottom: 1.7%;
        text-align: center;
        pointer-events: none;
    }
    .home #content .teaser ul.navigation>li {
        position: relative;
        display: inline-block;
        width: 19px;
        height: 19px;
        cursor: pointer;
        pointer-events: all;
    }
    .home #content .teaser ul.navigation>li>span {
        position: absolute;
        width: 11px;
        height: 11px;
        border-radius: 50%;
        background: #E5E5E5;
    }
    .home #content .teaser ul.navigation>li.selected span {
        background: #ff00b2;
        opacity: 1;
    }
    /* */
    .home .lazy {
        opacity: 0;
        transition: opacity 1s ease-out;
        -webkit-transition: opacity 1s ease-out;
        -moz-transition: opacity 1s ease-out;
        -o-transition: opacity 1s ease-out;
    }
    .home .lazy.loaded {
        opacity: 1;
    }
    /* */
    .home #content .forum .text h3 {
        display: inline-block;
        padding: 8px;
        font-size: 24px;
        line-height: 25px;
        background: #fff;
        font-weight: 400;
        text-transform: uppercase;
        color: #ff00b2;
    }
    .home #content .forum .text p {
        display: inline-block;
        margin-top: -12px;
        padding: 8px;
        font-size: 16px;
        line-height: 17px;
        background: #fff;
        color: #404040;
    }
    .home #content .forum {
        margin-top: 10px;
        background: rgba(255, 255, 255, 0.1);
    }
    .home #content .forum h4 {
        margin-bottom: 2px;
        font-size: 15px;
        font-weight: 700;
    }
    .home #content .forum .topics .col {
        float: left;
        width: 50%;
        padding: 10px;
    }
    .home #content .forum .topics .col li {
        position: relative;
    }
    .home #content .forum .topics .col li+li {
        margin-top: 20px;
    }
    .home #content .forum .topics .col li:hover h4 {
        text-decoration: underline;
    }
    .home #content .forum .topics .col li a {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 10;
    }
    .home #content .forum .topics:after {
        content: '';
        display: block;
        clear: both;
    }
    /* */
    .home #content .features {
        margin-top: 20px;
        margin-bottom: 50px;
    }
    .home #content .features h1 {
        margin-bottom: 30px;
    }
    .home #content .features .col>span {
        position: absolute;
        display: block;
        top: 0px;
        width: 100%;
        height: 1px;
        padding-left: 10px;
    }
    .home #content .features .col>span+span {
        top: inherit;
        bottom: 0px;
    }
    .home #content .features .col {
        padding-bottom: 88px;
    }
    .home #content .features .col h3 {
        margin-top: 15px;
    }
    .home #content .features .col ul {
        margin-top: 18px;
    }
    .home #content .features .col li {
        padding-left: 15px;
        background: url(m/list.png) no-repeat 0px 5px;
        line-height: 20px;
        font-size: 14px;
        font-weight: 600;
        font-style: italic;
    }
    .home #content .features .col .img {
        position: absolute;
        left: 10px;
        bottom: 28px;
        width: 100%;
        padding-right: 20px;
    }
    .home #content .features .col .img img {
        float: left;
        width: 100%;
    }
    .home #content .features .col1 .img img {
        max-width: 355px;
    }
    .home #content .features .col2 .img img {
        max-width: 300px;
    }
    .home #content .features .flex {
        display: flex;
    }
    .home #content .features .flex>div {
        flex: 1;
        padding-left: 10px;
    }
    .home #content .features .flex+.flex {
        margin-top: 40px;
    }
    /* Workshop */
    .workshop #content .center>.teaser {
        margin-bottom: 50px;
    }
    .workshop #content .center>.teaser:after {
        content: '';
        display: block;
        clear: both;
    }
    .workshop #content .teaser .r.teaser+.r.teaser {
        margin-top: 40px;
    }
    .workshop #content .teaser .r.teaser .flex {
        display: flex;
    }
    .workshop #content .teaser .r.teaser .flex .col {
        position: relative;
        flex: 1;
    }
    .workshop #content .teaser .r.teaser:nth-child(even) .flex {
        flex-direction: row-reverse;
    }
    .workshop #content .teaser .img {
        position: relative;
        padding-bottom: 56.39%;
    }
    .workshop #content .teaser .img ul,
    .workshop #content .teaser .img ul li,
    .workshop #content .teaser .img ul li .media,
    .workshop #content .teaser .img ul li iframe {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }
    .workshop #content .teaser .img ul li iframe {
        z-index: 5;
    }
    .workshop #content .teaser .img ul {
        overflow: hidden;
    }
    .workshop #content .teaser .img ul li {
        transition: opacity 1.5s ease-out;
        -webkit-transition: opacity 1.5s ease-out;
        -moz-transition: opacity 1.5s ease-out;
        -o-transition: opacity 1.5s ease-out;
    }
    .workshop #content .teaser .img ul li+li {
        opacity: 0;
    }
    .workshop #content .teaser .img ul li.last {
        z-index: -1;
        opacity: 0;
    }
    .workshop #content .teaser .img ul li.current {
        z-index: inherit;
        opacity: 1;
    }
    .workshop #content .teaser li.landscape .media {
        background-size: cover;
    }
    .workshop #content .teaser li.portrait .media {
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center 0;
    }
    .workshop #content .teaser li .media {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }
    .workshop #content .teaser li .media.bw {
        filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
        /* Firefox 10+, Firefox on Android */
        filter: gray;
        /* IE6-9 */
        -webkit-filter: grayscale(100%);
    }
    .workshop #content .teaser li .icon.video {
        position: absolute;
        z-index: 2;
        display: block;
        width: 63px;
        height: 44px;
        border: 1px solid #fff;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        left: 50%;
        top: 50%;
        margin-left: -31px;
        margin-top: -22px;
        background: url(m/content/make/video2.png) no-repeat 0px 0px;
        -webkit-box-shadow: 1px 1px 12px 0px rgba(0, 0, 0, 0.87);
        -moz-box-shadow: 1px 1px 12px 0px rgba(0, 0, 0, 0.87);
        box-shadow: 1px 1px 12px 0px rgba(0, 0, 0, 0.87);
    }
    .workshop #content .teaser span.area {
        position: absolute;
        z-index: 4;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        cursor: pointer;
    }
    .workshop #content .teaser .text {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 10;
        width: 100%;
        pointer-events: none;
    }
    .workshop #content .teaser .text .title {
        max-width: 70%;
    }
    .workshop #content .teaser .text .texts {
        max-width: 50%;
        pointer-events: all;
    }
    .workshop #content .teaser .text h3 {
        display: inline-block;
        padding: 8px;
        font-size: 24px;
        line-height: 25px;
        background: #fff;
        font-weight: 400;
        text-transform: uppercase;
        color: #ff00b2;
    }
    .workshop #content .teaser .text p a {
        color: #ff00b2;
    }
    .workshop #content .teaser .text h3 span {
        position: relative;
        z-index: 2;
    }
    .workshop #content .teaser .text .preview,
    .workshop #content .teaser .text .full {
        display: inline-block;
        margin-top: -12px;
        padding: 8px;
        font-size: 16px;
        line-height: 22px;
        background: #fff;
        color: #404040;
    }
    .workshop #content .teaser .text .preview.closed {
        padding: 0;
        height: 0;
        margin-top: 0;
        overflow: hidden;
    }
    .workshop #content .teaser .text .preview_template,
    .workshop #content .teaser .text .full_template {
        display: none;
    }
    .workshop #content .teaser .text .more,
    .workshop #content .teaser .text .less {
        display: inline-block;
        text-transform: uppercase;
        font-size: 12px;
        color: #ff00b2;
        cursor: pointer;
        padding-right: 13px;
    }
    .workshop #content .teaser .text .more {
        background: url(m/more2.png) no-repeat right 6px;
        background-size: 9px 9px;
    }
    .workshop #content .teaser .text .less {
        background: url(m/less2.png) no-repeat right 6px;
        background-size: 9px 9px;
    }
    .workshop #content .teaser .text .full {
        display: none;
        overflow: auto;
    }
    .workshop #content .teaser .text .full p+p,
    .workshop #content .teaser .text .preview.custom p+p {
        margin-top: 10px;
    }
    .workshop #content .teaser .description {
        margin-bottom: 80px;
    }
    .workshop #content .teaser .description h4 {
        display: inline-block;
        margin-top: -2px;
        margin-bottom: 30px;
        font-size: 24px;
        line-height: 25px;
        font-weight: 400;
        text-transform: uppercase;
    }
    .workshop #content .teaser .description p {
        line-height: 21px;
        font-size: 14px;
        font-weight: 600;
        font-style: italic;
    }
    .workshop #content .teaser .file {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        padding-left: 10px;
    }
    .workshop #content .teaser .file a {
        display: block;
        position: relative;
        padding-top: 4px;
        padding-bottom: 6px;
        padding-left: 4px;
        line-height: 20px;
    }
    .workshop #content .teaser .file a:hover {
        background: rgba(255, 255, 255, 0.35);
    }
    .workshop #content .teaser .file a .icon {
        position: absolute;
        z-index: 2;
        right: 0px;
        top: 2px;
        display: block;
        width: 27px;
        height: 28px;
        background: url(m/content/getit/pdf.png) no-repeat 8px 5px;
    }
    .workshop #content .teaser .file a span.separator {
        position: absolute;
        left: 0px;
        bottom: 0px;
    }
    .workshop #content .teaser .file a span.separator+span.separator {
        position: absolute;
        top: 0px;
        bottom: inherit;
    }
    .workshop #content .teaser .file a+a span.separator+span.separator {
        display: none;
    }
    .workshop #content .teaser .file .video-content {
        display: none;
    }
    /* Get it */
    .getit #content {
        padding-bottom: 60px;
    }
    .getit #content h2 {
        margin-right: 30px;
    }
    .getit #content h2 a {
        text-decoration: underline;
    }
    .getit #content .text {
        margin-bottom: 26px;
    }
    .getit #content .col1.b {
        vertical-align: bottom;
    }
    .getit #content .e+.e {
        margin-top: 55px;
    }
    .getit #content .col1 .rt .col2 {
        width: 26%;
    }
    .getit #content .col2 .rt .col2 {
        width: 23%;
    }
    .getit #content ul li {
        position: relative;
    }
    .getit #content ul li:hover {
        background: rgba(255, 255, 255, 0.35);
    }
    .getit #content ul li a.main {
        display: block;
        position: relative;
        padding-top: 4px;
        padding-bottom: 6px;
        padding-left: 4px;
        line-height: 20px;
    }
    .getit #content ul li.hover a.main {
        cursor: default;
    }
    .getit #content ul li a.small+a.main {
        padding-right: 28px;
    }
    .getit #content ul li a.small+a.small+a.main,
    .getit #content ul li .price+a.main {
        padding-right: 64px;
    }
    .getit #content ul li a span {
        position: absolute;
        left: 0px;
        bottom: 0px;
    }
    .getit #content ul li:first-child a {
        padding-top: 6px;
    }
    .getit #content ul li:first-child a span+span {
        position: absolute;
        top: 0px;
        bottom: inherit;
    }
    .getit #content ul li+li a span+span {
        display: none;
    }
    .getit #content ul li span.price {
        position: absolute;
        right: 0px;
        top: 6px;
        padding-right: 4px;
        line-height: 20px;
        font-weight: bold;
    }
    .getit #content ul li span.more {
        position: absolute;
        display: block;
        right: 4px;
        top: 10px;
        width: 9px;
        height: 9px;
        background: url(m/content/getit/more.png) no-repeat;
    }
    .getit #content ul li span.more+a.main {
        padding-right: 20px;
    }
    .getit #content ul li .info {
        position: absolute;
        overflow: hidden;
        display: none;
        z-index: 10;
        left: 0px;
        top: 100%;
        width: 100%;
        padding: 6px 4px 8px 4px;
        min-height: 30px;
        background: rgba(255, 255, 255, 0.92);
        color: #404040;
    }
    .getit #content ul li .info p+p {
        margin-top: 10px;
    }
    .getit #content ul li .info ol {
        margin: 0px;
        padding: 0;
        counter-reset: item;
    }
    .getit #content ul li .info ol>li {
        position: relative;
        margin: 0px;
        padding: 0px 0px 0px 18px;
        list-style-type: none;
        counter-increment: item;
    }
    .getit #content ul li .info ol>li:before {
        position: absolute;
        left: 0px;
        top: 0px;
        width: 18px;
        font-weight: bold;
        text-align: left;
        content: counter(item) ".";
    }
    .getit #content ul li .info form {
        position: relative;
        margin: 10px -4px -8px -4px;
        padding: 20px 8px 20px 8px;
        display: block;
        width: auto;
        height: 100%;
        background: rgba(0, 0, 0, 0.25);
    }
    .getit #content ul li .info form:after {
        content: '';
        display: block;
        clear: both;
    }
    .getit #content ul li .info form .col.button {
        width: 120px;
    }
    .getit #content ul li .info form .col.label {
        width: 132px;
    }
    .getit #content ul li .info form .col.small {
        width: 92px;
    }
    .getit #content ul li .info form label {
        line-height: 28px;
        text-transform: uppercase;
        color: #000000;
        filter: alpha(opacity: 75);
        opacity: 0.75;
    }
    .getit #content ul li .info form select,
    .getit #content ul li .info form input[type="text"] {
        position: relative;
        width: 100%;
        padding: 0px 8px 0px 8px;
        height: 28px;
        line-height: 28px;
        border: 1px solid #757475;
        border-left: none;
        border-right: none;
        background: #CBCBCB;
        color: #404040;
        ;
    }
    .getit #content ul li .info form select {
        width: 78px;
    }
    .getit #content ul li .info form input[type="text"] {
        width: 100%;
    }
    .getit #content ul li .info form select:focus,
    .getit #content ul li .info form input[type="text"]:focus {
        z-index: 1;
        background: rgba(255, 255, 255, 0.6);
    }
    .getit #content ul li .info form .col.main>.rt+.rt input[type="text"] {
        border-top: none;
    }
    .getit #content ul li .info form .send {
        position: absolute;
        display: block;
        right: 0px;
        bottom: 0px;
        width: 80px;
        height: 33px;
        padding-right: 5px;
        background: -moz-linear-gradient(left, rgba(255, 0, 178, 1) 0%, rgba(0, 0, 0, 0.75) 100%);
        background: -webkit-linear-gradient(left, rgba(255, 0, 178, 1) 0%, rgba(0, 0, 0, 0.75) 100%);
        background: linear-gradient(to right, rgba(255, 0, 178, 1) 0%, rgba(0, 0, 0, 0.75) 100%);
        filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ff00b2', endColorstr='#bf000000', GradientType=1);
        font-size: 13.6px;
        text-transform: uppercase;
        font-weight: 600;
        color: #ffffff;
        text-align: right;
    }
    .getit #content .icon.small {
        position: absolute;
        z-index: 2;
        right: 0px;
        top: 2px;
        display: block;
        width: 27px;
        height: 28px;
    }
    .getit #content .icon.small.apple {
        background: url(m/content/getit/apple.png) no-repeat 8px 6px;
    }
    .getit #content .icon.small.apple:hover {
        background-position: 8px -22px;
    }
    .getit #content .icon.small.windows {
        background: url(m/content/getit/windows.png) no-repeat 7px 7px;
    }
    .getit #content .icon.small.windows:hover {
        background-position: 7px -21px;
    }
    .getit #content .icon.small.pdf {
        background: url(m/content/getit/pdf.png) no-repeat 8px 5px;
    }
    .getit #content .icon.small.pdf:hover {
        background-position: 8px -23px;
    }
    .getit #content .icon.small+.small {
        right: 28px;
    }
    .getit #content .icon.tall.download {
        position: absolute;
        display: block;
        bottom: 0px;
        left: 50%;
        margin-left: -28px;
        width: 56px;
        height: 65px;
        background: url(m/content/getit/download.png) no-repeat 0px 0px;
    }
    .getit #content .icon.tall.basket {
        position: absolute;
        display: block;
        bottom: 0px;
        left: 50%;
        margin-left: -33px;
        width: 67px;
        height: 57px;
        background: url(m/content/getit/basket.png) no-repeat 0px 0px;
    }
    /* Make */
    .make #content .videos:after {
        content: '';
        display: block;
        clear: both;
    }
    .make #content .videos h2 {
        margin-bottom: 7px;
    }
    .make ul.triple li>.space .text h4 {
        filter: alpha(opacity: 0);
        opacity: 0;
    }
    .make ul.triple li .icon.video {
        position: absolute;
        z-index: 2;
        display: block;
        width: 63px;
        height: 44px;
        left: 50%;
        top: 50%;
        margin-left: -31px;
        margin-top: -22px;
        background: url(m/content/make/video.png) no-repeat 0px 0px;
    }
    .make ul.triple li .img .overlay {
        background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
        background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
        filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#4dd100b7', endColorstr='#00d100b7', GradientType=0);
    }
    .embed.youtube {
        position: relative;
        padding-bottom: 56.25%;
        margin-bottom: 30px;
    }
    .embed.youtube iframe {
        position: absolute;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
    }
    /* Text */
    .text h1 {
        margin-bottom: 26px;
    }
    .text h2 {
        margin-top: 26px;
        margin-bottom: 16px;
    }
    /* freshdesk */
    .freshdesk {
        position: relative;
        margin-left: -10px;
        margin-right: -10px;
        margin-top: -40px;
    }
    .touch .freshdesk {
        -webkit-overflow-scrolling: touch !important;
        overflow-y: scroll !important;
    }
    .freshdesk iframe {
        position: absolute;
        left: 0px;
        top: 0px;
        height: 100%;
        min-width: 100%;
        width: 100px;
        *width: 100%;
    }
    #footer {
        position: absolute;
        z-index: 10;
        left: 0px;
        bottom: 0px;
        width: 100%;
        border-bottom: 10px solid #ffffff;
    }
    #footer .center .r {
        float: none;
        width: auto;
        border-top: 1px solid #ffffff;
        margin-left: 10px;
        margin-right: 10px;
    }
    #footer .center .r .logo {
        position: relative;
        display: block;
        float: left;
        margin: 9px 0px 11px 0px;
        background: url(m/footer/logo.png) no-repeat;
        width: 230px;
        height: 17px;
    }
    #footer .center .r ul {
        position: relative;
        float: right;
        margin: 10px -9px 3px 5px;
    }
    #footer .center .r ul li {
        float: left;
        padding: 0px 9px 0px 6px;
        line-height: 23px;
        background: url(m/footer/li.png) no-repeat right 0px;
    }
    #footer .center .r ul li:last-child {
        background: none;
    }
    .popup #footer {
        position: relative;
        float: left;
    }
    #popup,
    #register {
        position: absolute;
        overflow: hidden;
        display: none;
        z-index: 1400;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
    }
    .popup>.bg,
    .popup>.content {
        position: absolute;
        left: 0px;
        width: 100%;
    }
    .popup>.bg {
        z-index: 1100;
        height: 100%;
        background: #000000;
        filter: alpha(opacity: 0);
        opacity: 0;
    }
    @keyframes showBg {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 0.8;
        }
    }
    @-webkit-keyframes showBg/* Safari and Chrome */
    {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 0.8;
        }
    }
    .showBg {
        -webkit-animation: showBg 0.2s ease-out forwards;
        -moz-animation: showBg 0.2s ease-out forwards;
    }
    .popup .content {
        z-index: 1101;
    }
    #popup .zoom {
        position: absolute;
    }
    #popup .content .img {
        position: absolute;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
    }
    #popup .content .img ul,
    #popup .content .img ul li {
        position: absolute;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
    }
    #popup .content .img ul {
        overflow: hidden;
    }
    #popup .content .img ul li {
        background: #000000;
    }
    #popup .content .img ul li+li {
        display: none;
        left: 100%;
    }
    #popup .content .img li.landscape img {
        width: 100%;
    }
    #popup .content .img li.portrait {
        text-align: center;
    }
    #popup .content .img li.portrait img {
        height: 100%;
    }
    #popup .content>img {
        position: absolute;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
    }
    #popup .content .img .info {
        position: absolute;
        display: none;
        z-index: 1500;
        right: 0px;
        top: 0px;
        width: 50%;
        height: 72px;
    }
    #popup .content .img .info .rt {
        height: 72px;
    }
    #popup .content .img .info .text>.rt {
        padding-right: 30px;
    }
    .popup .content a.close {
        position: absolute;
        right: 0px;
        top: 0px;
        display: block;
        z-index: 1550;
        width: 22px;
        height: 22px;
        background: url(m/close.png) no-repeat 4px 7px;
    }
    #popup .content>a.close {
        top: -26px;
        right: -4px;
    }
    #popup .content>.text {
        position: absolute;
        z-index: 2;
        left: 0px;
        top: 0px;
        width: 100%;
        padding: 3px 10px 3px 10px;
    }
    #popup .content .text.max {
        overflow-y: auto;
    }
    #popup .content>.text h4 {
        margin-top: 4px;
        font-weight: 600;
        font-style: italic;
    }
    #popup .content iframe {
        position: absolute;
        left: 0px;
        top: 0px;
        z-index: 10;
    }
    #popup .content a.button {
        position: absolute;
        display: block;
        z-index: 3;
        width: 50%;
        height: 100%;
    }
    #popup .content a.button span {
        display: block;
        position: absolute;
        top: 50%;
        margin-top: -55px;
        width: 30px;
        height: 109px;
        background: url(m/previousnext.png) no-repeat;
    }
    #popup .content a.button.previous {
        left: 0px;
    }
    #popup .content a.button.next {
        right: 0px;
    }
    #popup .content a.button.next span {
        right: 5px;
        background-position: 0px -109px;
    }
    #popup>span {
        position: absolute;
        z-index: 1101;
        left: 0px;
        top: 0px;
        width: 10px;
        height: 100%;
        background: #ffffff;
    }
    #popup>span+span {
        left: 100%;
        margin-left: -10px;
    }
    #register {
        display: block;
        display: none;
    }
    #register .content {
        background: #ffffff;
        height: 100%;
        max-width: 840px;
        max-height: 550px;
    }
    #register .content iframe {
        position: absolute;
        left: 0px;
        top: 0px;
        height: 100%;
        width: 100%;
    }
    #register .content iframe {
        position: absolute;
        left: 0px;
        top: 0px;
        height: 100%;
        min-width: 100%;
        width: 100px;
        *width: 100%;
    }
    #register .bg {
        filter: alpha(opacity: 80);
        opacity: 0.8;
    }
    /* */
    #popup2 {
        position: absolute;
        overflow: hidden;
        display: none;
        z-index: 1400;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
    }
    #popup2 .zoom {
        position: absolute;
    }
    /* */
    #popup2 .content ul {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background: black;
    }
    #popup2 .content ul li,
    #popup2 .content ul li .media {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }
    #popup2 .content ul li+li {
        left: 100%;
    }
    #popup2 .content li.landscape .media {
        background-size: cover;
    }
    #popup2 .content li.portrait .media {
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center 0;
    }
    #popup2 .content li .media {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }
    #popup2 .content li .media.bw {
        filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
        /* Firefox 10+, Firefox on Android */
        filter: gray;
        /* IE6-9 */
        -webkit-filter: grayscale(100%);
    }
    #popup2 .content .text {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 21;
        width: 100%;
        pointer-events: none;
    }
    #popup2 .content .text .title {
        max-width: 70%;
    }
    #popup2 .content .text .texts {
        max-width: 50%;
        pointer-events: all;
    }
    #popup2 .content .text .texts p a {
        color: #ff00b2;
    }
    #popup2 .content .text h3 {
        display: inline-block;
        padding: 8px;
        font-size: 24px;
        line-height: 25px;
        background: #fff;
        font-weight: 400;
        text-transform: uppercase;
        color: #ff00b2;
    }
    #popup2 .content .text h3 span {
        position: relative;
        z-index: 2;
    }
    #popup2 .content .text .preview,
    #popup2 .content .text .full {
        display: inline-block;
        margin-top: -12px;
        padding: 8px;
        font-size: 16px;
        line-height: 22px;
        background: #fff;
        color: #404040;
    }
    #popup2 .content .text .preview.closed {
        padding: 0;
        height: 0;
        margin-top: 0;
        overflow: hidden;
    }
    #popup2 .content .text .preview_template,
    #popup2 .content .text .full_template {
        display: none;
    }
    #popup2 .content .text .more,
    #popup2 .content .text .less {
        display: inline-block;
        text-transform: uppercase;
        font-size: 12px;
        color: #ff00b2;
        cursor: pointer;
        padding-right: 13px;
    }
    #popup2 .content .text .more {
        background: url(m/more2.png) no-repeat right 6px;
        background-size: 9px 9px;
    }
    #popup2 .content .text .less {
        background: url(m/less2.png) no-repeat right 6px;
        background-size: 9px 9px;
    }
    #popup2 .content .text .full {
        display: none;
        overflow: auto;
    }
    #popup2 .content .text .full p+p,
    #popup2 .content .text .full p+span,
    #popup2 .content .text .preview.custom p+p {
        margin-top: 10px;
    }
    #popup2 .content .text p a {
        color: #ff00b2;
    }
    #popup2 .content .text span.state {
        display: block;
        text-align: right;
    }
    #popup2 .content .text span.state span {
        font-size: 12px;
        color: #ff00b2;
        cursor: pointer;
    }
    /* */
    #popup2 .content iframe {
        position: absolute;
        left: 0px;
        top: 0px;
        z-index: 10;
    }
    #popup2 .content a.button {
        position: absolute;
        display: block;
        z-index: 20;
        width: 50%;
        height: 100%;
    }
    #popup2 .content a.button span {
        display: block;
        position: absolute;
        top: 50%;
        margin-top: -55px;
        width: 30px;
        height: 109px;
        background: url(m/previousnext.png) no-repeat;
    }
    #popup2 .content a.button.previous {
        left: 0px;
    }
    #popup2 .content a.button.next {
        right: 0px;
    }
    #popup2 .content a.button.previous span {
        left: 11px;
    }
    #popup2 .content a.button.next span {
        right: 5px;
        background-position: 0px -109px;
    }
    #popup2>span {
        position: absolute;
        z-index: 1101;
        left: 0px;
        top: 0px;
        width: 10px;
        height: 100%;
        background: #ffffff;
    }
    #popup2>span+span {
        left: 100%;
        margin-left: -10px;
    }
    #popup2 .content span.close {
        position: absolute;
        right: -7px;
        top: -24px;
        display: block;
        z-index: 1550;
        width: 22px;
        height: 22px;
        background: url(m/close.png) no-repeat 4px 7px;
        cursor: pointer;
    }
}