/* grid */ .row { box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 0; -ms-flex: 0 1 auto; flex: 0 1 auto; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -12px; margin-left: -12px;} .col { box-sizing: border-box; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; padding-right: 12px; padding-left: 12px; } .col { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -ms-flex-preferred-size: 0; flex-basis: 0; max-width: 100%;} .col-l-0 { display:none; } .col-l-1 { -ms-flex-preferred-size: 8.33333333%; flex-basis: 8.33333333%; max-width: 8.33333333%;} .col-l-2 { -ms-flex-preferred-size: 16.66666667%; flex-basis: 16.66666667%; max-width: 16.66666667%;} .col-l-3 { -ms-flex-preferred-size: 25%; flex-basis: 25%; max-width: 25%;} .col-l-4 { -ms-flex-preferred-size: 33.33333333%; flex-basis: 33.33333333%; max-width: 33.33333333%;} .col-l-5 { -ms-flex-preferred-size: 41.66666667%; flex-basis: 41.66666667%; max-width: 41.66666667%;} .col-l-6 { -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%;} .col-l-7 { -ms-flex-preferred-size: 58.33333333%; flex-basis: 58.33333333%; max-width: 58.33333333%;} .col-l-8 { -ms-flex-preferred-size: 66.66666667%; flex-basis: 66.66666667%; max-width: 66.66666667%;} .col-l-9 { -ms-flex-preferred-size: 75%; flex-basis: 75%; max-width: 75%;} .col-l-10 {-ms-flex-preferred-size: 83.33333333%; flex-basis: 83.33333333%; max-width: 83.33333333%;} .col-l-11 { -ms-flex-preferred-size: 91.66666667%; flex-basis: 91.66666667%; max-width: 91.66666667%;} .col-l-12 {-ms-flex-preferred-size: 100%;flex-basis: 100%; max-width: 100%;} .col-l-6-center {margin-left: 25%; -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%; text-align:center;} .col-l-8-center {margin-left: 16.66666667%; -ms-flex-preferred-size: 66.66666667%; flex-basis: 66.66666667%; max-width: 66.66666667%; text-align:center;} .col-l-10-center {margin-left: 8.33333333%; -ms-flex-preferred-size: 83.33333333%; flex-basis: 83.33333333%; max-width: 83.33333333%; text-align:center;} @media (max-width: 1024px) { .col-m-12-center {margin-left: 0%; -ms-flex-preferred-size: 100%;flex-basis: 100%; max-width: 100%;} .col-m-10-center {margin-left: 8.33333333%; -ms-flex-preferred-size: 83.33333333%; flex-basis: 83.33333333%; max-width: 83.33333333%; text-align:center;} .col-m-5 { -ms-flex-preferred-size: 41.66666667%; flex-basis: 41.66666667%; max-width: 41.66666667%;} .col-m-7 { -ms-flex-preferred-size: 58.33333333%; flex-basis: 58.33333333%; max-width: 58.33333333%;} } @media (max-width: 768px) { .col-m-0 {display:none;} .col-m-1 { -ms-flex-preferred-size: 8.33333333%; flex-basis: 8.33333333%; max-width: 8.33333333%;} .col-m-2 { -ms-flex-preferred-size: 16.66666667%; flex-basis: 16.66666667%; max-width: 16.66666667%;} .col-m-3 { -ms-flex-preferred-size: 25%; flex-basis: 25%; max-width: 25%;} .col-m-4 { -ms-flex-preferred-size: 33.33333333%; flex-basis: 33.33333333%; max-width: 33.33333333%;} .col-m-5 { -ms-flex-preferred-size: 41.66666667%; flex-basis: 41.66666667%; max-width: 41.66666667%;} .col-m-6 { -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%;} .col-m-7 { -ms-flex-preferred-size: 58.33333333%; flex-basis: 58.33333333%; max-width: 58.33333333%;} .col-m-8 { -ms-flex-preferred-size: 66.66666667%; flex-basis: 66.66666667%; max-width: 66.66666667%;} .col-m-9 { -ms-flex-preferred-size: 75%; flex-basis: 75%; max-width: 75%;} .col-m-10 {-ms-flex-preferred-size: 83.33333333%; flex-basis: 83.33333333%; max-width: 83.33333333%;} .col-m-11 { -ms-flex-preferred-size: 91.66666667%; flex-basis: 91.66666667%; max-width: 91.66666667%;} .col-m-12 {-ms-flex-preferred-size: 100%;flex-basis: 100%; max-width: 100%;} .col-s-12-center {margin-left: 0%; -ms-flex-preferred-size: 100%;flex-basis: 100%; max-width: 100%;} .row div:nth-child(2).col-m-12, .row div:nth-child(2).col-s-12, .row div:nth-child(3).col-m-12 {margin-top:20px;} .row div:nth-child(3).col-m-6 {margin-top:20px;} .featured .row div:nth-child(2).col-m-12, .featured .row div:nth-child(2).col-s-12, .featured .row div:nth-child(3).col-m-12 {margin-top:72px;} .featured .row div:nth-child(2).ce_text.col-s-12 {margin-top:0px;} } @media (max-width: 500px) { .col-s-0 {display:none;} .col-s-1 { -ms-flex-preferred-size: 8.33333333%; flex-basis: 8.33333333%; max-width: 8.33333333%;} .col-s-2 { -ms-flex-preferred-size: 16.66666667%; flex-basis: 16.66666667%; max-width: 16.66666667%;} .col-s-3 { -ms-flex-preferred-size: 25%; flex-basis: 25%; max-width: 25%;} .col-s-4 { -ms-flex-preferred-size: 33.33333333%; flex-basis: 33.33333333%; max-width: 33.33333333%;} .col-s-5 { -ms-flex-preferred-size: 41.66666667%; flex-basis: 41.66666667%; max-width: 41.66666667%;} .col-s-6 { -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%;} .col-s-7 { -ms-flex-preferred-size: 58.33333333%; flex-basis: 58.33333333%; max-width: 58.33333333%;} .col-s-8 { -ms-flex-preferred-size: 66.66666667%; flex-basis: 66.66666667%; max-width: 66.66666667%;} .col-s-9 { -ms-flex-preferred-size: 75%; flex-basis: 75%; max-width: 75%;} .col-s-10 {-ms-flex-preferred-size: 83.33333333%; flex-basis: 83.33333333%; max-width: 83.33333333%;} .col-s-11 { -ms-flex-preferred-size: 91.66666667%; flex-basis: 91.66666667%; max-width: 91.66666667%;} .col-s-12 {-ms-flex-preferred-size: 100%;flex-basis: 100%; max-width: 100%; display:block;} .featured .row div:nth-child(2).ce_text.col-s-12 {margin-top:24px;} .featured .text0 {margin-top:0px !important;} } .detail h1, .play h1 {padding-bottom:100px;} .detail .ce_text p {font-size:1.3em; line-height:1.5em;} .featured main p {font-size:.85em; line-height:.85em;} .featured main {font-family: 'karlaregular'; } .featured .marquee { margin:100px 0; width: 100%; overflow: hidden; } a:hover img, h2 a:hover, p a:hover, a:hover h2, a:hover p {opacity:.9;} .ce_text.right {text-align:right;} .detail .ce_text.statement p, h5 {font-family: 'karlabold'; font-weight:400; color:#0b0ffb; font-size:6em; line-height:1.1em; letter-spacing: -0.05em;} .detail .credits.ce_text p {font-family: 'karlaregular'; font-size:1em; line-height:1.5em;} /* portfolio */ .list_box {position:relative; top:120px;padding-bottom:300px; position:relative;} .project {float:left; width:25%; text-align:center; margin-bottom:0px; position:relative; padding:2px} .project .project_image { margin-bottom:0px;} .project .project_image img {max-width:100%; height:auto;} .project .description { width:100%; display:none;} .project .project_name, .project .client {font-family: 'karlabold'; font-size:1.5em; line-height:1.1em; letter-spacing:-.03em; color:#0b0ffb; } .project .category {font-family: 'karlabold'; font-weight:400; font-size:14px; color:#0b0ffb; text-transform:uppercase; margin-top:10px;} .touchevents .project .description {display:block; margin-top:10px} .no-touchevents .project .description {position:absolute; top:50%; transform: translateY(-50%); opacity:0; display:block;} .no-touchevents .project:hover .project_image {opacity:.2;} .no-touchevents .project:hover .description {opacity:1;} .project_passive {opacity:.4;} .project_passive.project_active {opacity:1;} .project.branding_active .project_name {opacity:1; } .project.show_active .project_name {opacity:1;} .project.on-air_active .project_name {opacity:1;} .project.featured_active .project_name {opacity:1; } .hover_images {position:fixed; top: 70%; -ms-transform: translateY(-50%); transform: translateY(-50%); width:50%;} .hover_images .hover {position:absolute; top:0; left:0; width:100%; height:auto; opacity:0; } .hover_images .hover_images img {width:100%; height:auto;} .hover_images .hover.active {opacity:1; } .js-marquee { margin-bottom:10px !important; } .filter_box {position:fixed; top:160px; } .filter li {margin-bottom:10px; position: relative;} .filter a {position: relative; z-index:10; display:inline-block; color:#0b0ffb;} .filter a:before { content: ""; position: absolute; z-index:5; width: 0%; height: 4px; bottom: 0px; left: 0; background: #a7fff7; visibility: hidden; -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .filter a.active:before { visibility: visible; width: 100%; } .video_layer {position:fixed; top:0; z-index:110; width:100%; height:100%; background:rgba(0,3,20,.85); display:none;} .close1 {position:absolute; width:100%; height:100%;} .video_box {position:absolute; z-index:120; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); width:70%; left:15%; color:#fff; display:none;} .video_box .project_name {font-family: 'karlabold'; font-size:24px; line-height:24px; } .video_box .client {font-family: 'karlaregular'; font-weight:400; font-size:24px; line-height:24px; text-transform:uppercase; margin-left:10px;} .video_box .close { position:absolute; top:-3px; right:0; height: 30px; width: 30px; box-sizing: border-box; line-height:30px; display: inline-block;} .video_box .close:before, .video_box .close:after { transform: rotate(-45deg); content: ""; position: absolute; top: 50%; left: 50%; margin-top: -0px; margin-left: -15px; display: block; height:3px; width:30px; background-color: #fff; transition: all 0.25s ease-out; } .video_box .close:after { transform: rotate(-135deg);} .video_box .close:hover:before, .video_box .close:hover:after {transform: rotate(0deg);} .video_box .video {margin:15px 0;} .video_more {witdh:100%; text-align:center; } .video_more a {color:#fff; } .video_more a:hover { text-decoration:underline;} /* play */ .play_inner {padding:0 5%;} .play .marquee { margin:100px 0; width: 100%; overflow: hidden; font-family: 'karlabold'; font-size:6em; line-height:1.5em; color:#fff; text-shadow: -1px -1px 0 #0b0ffb,1px -1px 0 #0b0ffb,-1px 1px 0 #0b0ffb, 1px 1px 0 #0b0ffb; } .play .marquee .m1 {color:#0b0ffb;} /* about */ .about-left {position:relative; float:left; width:45%;} .about-left .fix {position:fixed; width:720px;} .about-left img {width:100%; height:auto;} .about-right { position:relative; float:right; width:50%;} .about h2, .about h3 { font-size:2.8em; line-height: 1.1em; } /* travelogue */ .apricot {background:#fdf5f7; margin-right: 0px; margin-left: 0px; padding:120px 0 150px;} .apricot h2 {margin-bottom:100px;} .apricot img {box-shadow: -15px 18px 32px 0px rgba(0,0,0,0.15);} .more a {display:inline; position:relative; color:#0b0ffb; padding-bottom:3px;} .more a:before { content: ""; position: absolute; z-index:5; width: 100%; height: 4px; bottom: 0px; left: 0; background: #a7fff7; visibility: visible; -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .more a:hover:before { width: 0%; } .detail .more .ce_text p, .more .ce_text p {font-size:1.3em; line-height:1.8em;} /* CCTV 2 */ .dark_blue {background:#0c1246; color:#6fc9ff; padding:216px 0 120px; margin-top:-20px;} .dark_blue h6, .dark_blue h3 {color:#6fc9ff;} .full_width {} .centr2 {padding-top:120px;} .4videos {padding:0 12px;} .video_quadrat {float:left; width:25%; } .video_quadrat:first-child {padding-right:18px;} .video_quadrat:last-child { padding-left:18px; } .video_quadrat:nth-child(2) { padding-left:6px; padding-right:12px;} .video_quadrat:nth-child(3) { padding-left:12px; padding-right:6px;} #article-251 {margin-left:0 !important; margin-right:0 !important;} /* oman */ .light_blue {background:#e3f0fe; padding:120px 0; margin-bottom:96px;} /* current time */ .full_width img {width:100%; height:auto;} /* CGTN */ .timeline {position:relative; padding:0 100px;} .timeline .t_div {float:left; width:50%; font-size: 1.3em; line-height: 1.5em; position:relative;} .timeline .t_div img {margin-top:20px;} .timeline .t_left {padding-right:40px; text-align:right;} .timeline .t_left:after {content: ''; display: inline-block; width: 15px; height: 15px; -moz-border-radius: 7.5px; -webkit-border-radius: 7.5px; border-radius: 7.5px; background-color: #0b0ffb; position:absolute; right:-7.5px; top:15px;} .timeline .t_right:after {content: ''; display: inline-block; width: 15px; height: 15px; -moz-border-radius: 7.5px; -webkit-border-radius: 7.5px; border-radius: 7.5px; background-color: #0b0ffb; position:absolute; left:-7.5px; top:15px;} .timeline .t_right {padding-left:40px; text-align:left;} .t_bottom {margin-top:80px; font-size: 1.3em; text-align:center;} .r_1 {margin-top:220px;} .l_2 {margin-top:-50px;} .r_2 {margin-top:180px;} .l_3 {margin-top:50px;} .t_border {position:absolute; left:50%; top:20px; width:1px; height:102%; background:#0b0ffb;} /* china24 */ .no_center_padding div:first-child {padding-right:0;} .no_center_padding div:last-child {padding-left:0;} @media (min-height: 900px) { .hover_images {top: 60%; } } @media (max-height: 750px) { .hover_images {top: 340px; -ms-transform: translateY(0%); transform: translateY(0%); width:30%; } } @media (max-width: 1800px) { .about-left .fix {width:40%;} } @media (max-width: 1600px) { .about-left .fix {width:38%;} } @media (max-width: 1400px) { .detail .ce_text.statement p, h5 {font-size:5em; line-height:1.1em;} } @media (max-width: 1300px) { .detail .ce_text.statement p, h5 {font-size:4em; line-height:1.1em;} .timeline {padding:0;} .project {float:left; width:33.3333%; text-align:center; margin-bottom:50px;} .about h2, .about h3 { font-size:2.4em; line-height: 1.1em; } } @media (max-width: 1200px) { .detail .ce_text.statement p, h5 {font-size:3em; line-height:1.1em;} .about h2, .about h3 { font-size:2em; line-height: 1.1em; } } @media (max-width: 1024px) { .play_inner {padding:0;} .project .project_name, .project .client { font-size:1.3em; line-height:1.1em; } } @media (max-width: 960px) { /* CGTN */ .timeline {position:relative; padding:0 50px 0 7.5px; } .timeline .t_div {float:none; width:100%;} .timeline .t_left {padding-left:40px; text-align:left; padding-right:0px;} .timeline .t_left:after {content: ''; display: inline-block; width: 15px; height: 15px; -moz-border-radius: 7.5px; -webkit-border-radius: 7.5px; border-radius: 7.5px; background-color: #0b0ffb; position:absolute; left:-7.5px; top:15px;} .t_bottom {margin-top:60px; font-size: 1.3em; text-align:left;} .r_1 {margin-top:50px;} .l_2 {margin-top:50px;} .r_2 {margin-top:50px;} .t_border {position:absolute; left:7px; top:20px; width:1px; height:100%; background:#0b0ffb;} } @media (max-width: 800px) { .detail .ce_text.statement p, h5 {font-size:2.6em; line-height:1.1em;} .featured .marquee, .play .marquee { margin:60px 0; } .ce_text.right {text-align:left; } .project {width:50%; margin-bottom:50px;} .video_box {width:90%; left:5%; } .video_box .close { position:absolute; top:-50px; } /* travelogue */ .apricot {background:none; margin-right:-12px; margin-left:-12px; padding:96px 0 24px;} .apricot h2 {margin-bottom:100px;} .featured .text_up {margin-top:-72px;} .video_quadrat {display:none;} } @media (max-width: 600px) { .about-left {position:relative; float:none; width:100%;margin-bottom:50px;} .about-left .fix {position:relative; width:100%;} .about-right { position:relative; float:none; width:100%;} .timeline {padding:0 0 0 7.5px; } .filter_box {display:none;} .list_box {left:0; width:100%; } /* channel 8 branding */ .margin_b96 { margin-bottom:96px;} .margin_t24 { margin-bottom:24px;} .margin_t48 { margin-top:48px !important;} .flex_row {flex-direction: row; margin-bottom:48px;} .flex_row .col-l-7 { order: 3; margin-top:48px; } } @media (max-width: 500px) { .featured .marquee img {height:150px; width:auto;} .play .marquee img {height:120px; width:auto;} .featured .margin-m {margin-top:24px;} .project {width:100%; margin-bottom:50px;} } @media (max-width: 400px) { .detail h1 {padding:0 90px; top:10px; line-height:1.3em;} } /* normalize */ html { font-family: sans-serif; line-height: 1.15; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } audio, canvas, progress, video { display: inline-block; vertical-align: baseline; } audio:not([controls]) { display: none; height: 0; } [hidden], template { display: none; } a { background-color: transparent; color:#0b0ffb;} a:active, a:hover { outline: 0; } abbr[title] { border-bottom: 1px dotted; } dfn { font-style: italic; } mark { background: #ff0; color: #000; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } img { border-style: none; } svg:not(:root) { overflow: hidden; } hr { box-sizing: content-box; height: 0; overflow: visible; } pre { overflow: auto; font-family: monospace, monospace; font-size: 1em; } code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; } button, input { overflow: visible; } button, select { text-transform: none; } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; } button[disabled], html input[disabled] { cursor: default; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } input { line-height: normal; border-radius: 0;} select { border-radius: 0;} input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; } input[type="search"] { -webkit-appearance: textfield; box-sizing: content-box; border-radius: 0; -webkit-appearance: none !important; cursor:pointer;} input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } input[type="submit"]{-webkit-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s;} legend { border: 0; padding: 0; } textarea { overflow: auto; } optgroup { font-weight: bold; } table { border-collapse: collapse; border-spacing: 0;} td, th { padding: 0; } ::-moz-selection {background: #b7e6f8; text-shadow: none; } audio, canvas, iframe, svg, video { vertical-align: middle; } img { vertical-align: top; } fieldset { border: 0; margin: 0; padding: 0; } textarea { resize: vertical; } .hidden, .invisible { display: none !important; } .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after, .clear { clear: both; } /* nur safari */ * {-webkit-tap-highlight-color: rgba(0,0,0,0);} svg:not(:root) { overflow: hidden; } /* allgemein */ * { margin:0; padding:0; border:0; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html,body { height:100%; width:100%; } html { font-size:100%; } a {text-decoration:none; -webkit-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out; transition:all 0.3s ease-out; display:inline-block; } .ce_image a {display:block;} *:focus { outline: 0; } ul, ol { margin: 0; padding: 0 ; } nav ul, ul { list-style: none; list-style-image: none; } .transit, input.submit, a img, a h2 {-webkit-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out; transition:all 0.3s ease-out;} /* fonts */ @font-face { font-family: 'sans_reg'; src: url('../../files/system/css/fonts/IBMPlexSans-Regular.woff2') format('woff2'), url('../../files/system/css/fonts/IBMPlexSans-Regular.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'sans_bpld'; src: url('../../files/system/css/fonts/IBMPlexSans-Bold.woff2') format('woff2'), url('../../files/system/css/fonts/IBMPlexSans-Bold.woff') format('woff'); font-weight: normal; font-style: normal;} @font-face { font-family: 'karlabold'; src: url('../../files/system/css/fonts/karla-bold-webfont.woff2') format('woff2'), url('../../files/system/css/fonts/karla-bold-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'karlaregular'; src: url('../../files/system/css/fonts/karla-regular-webfont.woff2') format('woff2'), url('../../files/system/css/fonts/karla-regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal;} /* icons */ body { font-family: 'sans_reg', sans-serif; font-size:1em; line-height:1.5em; color:#0b0ffb; background:#fff; } .wrap { min-height:100%;} h2, h3, h4, h5, h6 {font-family: 'karlabold'; font-weight:400; color:#0b0ffb; letter-spacing:-.03em;} h1.headline {position:absolute; top:17px; font-family: 'karlaregular'; font-size:1.25em; font-weight:400; display:block; width:90%; left:5%; text-align:center; } /* h1.headline {position:relative; font-family: 'karlaregular'; font-size:1.25em; font-weight:400; display:block; width:90%; left:5%; text-align:center; } .featured h1.headline {width:70%; left:12%; margin-top:10px;} header.white h1 {color:#fff;} */ h2, h3 {font-size:3.4em; line-height:1.1em;} h3 {margin-bottom:24px;} h4 {font-size:1.5em; line-height:1.1em;margin-bottom:10px;} h6 {font-size:2.2em; line-height:1.1em;} .featured h2 {font-size:2.8em; line-height:1.1em;} b, strong, .bold { font-weight:normal; font-family: 'sans_bpld', sans-serif;} .center {max-width:1800px; margin:0 auto; position:relative; padding:0 100px;} .inner {padding:0 100px;} .blue {color:#0b0ffb;} /* header */ .scrollspacer {position:relative; height:40px; width:100%; } header {position:absolute; width:100%; z-index:100; background:none; -webkit-transition:all 0.3s ease-out; transition:all 0.3s ease-out;} header .center {padding-top:10px;} header .logo {position:relative; float:left; } header .logo { width:72px; height:50px; background:url(../../files/system/images/logo.svg) no-repeat; background-size:100% auto;} .XXfeatured header.white .logo { width:72px; height:50px; background:url(../../files/system/images/logo-white.svg) no-repeat; background-size:100% auto;} /* hamburger */ .hamburger { position:relative; float:right; padding: 10px 5px 10px 15px; display: inline-block; cursor: pointer; transition-property: opacity, filter; transition-duration: 0.15s; transition-timing-function: linear; font: inherit; color: inherit; text-transform: none; background-color: transparent; overflow: visible; } .hamburger:hover, .hamburger.is-active:hover { opacity: 0.5; } .hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner::before, .hamburger.is-active .hamburger-inner::after { background-color: #0b0ffb; } .hamburger-box { width: 26px; height: 22px; display: inline-block; position: relative; } .hamburger-inner { display: block; top: 50%; margin-top: -2px; } .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { width: 30px; height: 3px; background-color: #0b0ffb; border-radius: 3px; position: absolute; transition-property: transform; transition-duration: 0.15s; transition-timing-function: ease; } .hamburger-inner::before, .hamburger-inner::after { content: ""; display: block; } .hamburger-inner::before { top: -10px; } .hamburger-inner::after { bottom: -5px; } .hamburger--collapse .hamburger-inner { top: auto; bottom: 0; transition-duration: 0.13s; transition-delay: 0.13s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--collapse .hamburger-inner::after { top: -20px; transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; } .hamburger--collapse .hamburger-inner::before {transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--collapse.is-active .hamburger-inner { transform: translate3d(0, -10px, 0) rotate(-45deg); transition-delay: 0.22s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--collapse.is-active .hamburger-inner::after { top: 0; opacity: 0; transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear; } .hamburger--collapse.is-active .hamburger-inner::before { top: 0; transform: rotate(-90deg); transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); } header.scroll {position:fixed; width:100%; z-index:100; top:0px; background:none; background:rgba(255,255,255,1);} header.scroll .logo { width:60px; height:42px; background:url(../../files/system/images/logo.svg) no-repeat; background-size:100% auto; margin-top:1px;} header.scroll .scrollspacer {display:none;} header.nav_active {background:none;} header.nav_active h1.headline {display:none;} header.scroll .hamburger-inner, header.scroll .hamburger-inner::before, header.scroll .hamburger-inner::after { width: 30px; height:2px; } header.scroll .hamburger-inner::before { top: -10px; } header.scroll .hamburger-inner::after { bottom: -5px; } /* navigation */ .navigation {position:fixed; z-index:90; top:-100%; width:100%; height:100%; background:#fff; text-align:center; -webkit-transition:all 0.5s ease-out; -moz-transition:all 0.5s ease-out; -o-transition:all 0.5s ease-out; transition:all 0.5s ease-out;} .navigation.active { top:0;} .canvas-interactive-wrapper {position:absolute; top:0; width:100%; height:100%; opacity:1;} .canvas-interactive-wrapper canvas { position: absolute; display: block; width: 100%; height: 100%; top: 0; right: 0; bottom: 0; left: 0;} .background {position:fixed; top:0%; right:0; width:100%; height:100%; opacity:.3;} .background-diagonal {position:fixed; top:0%; right:0; width:100%; height:100%; opacity:.3;} .play .background-diagonal {opacity:1;} .background canvas, .background-diagonal canvas { position: absolute; display: block; width: 100%; height: 100%; top: 0; right: 0; bottom: 0; left: 0;} .menu { position: absolute; display:inline-block; width:100%; left:0; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); } .menu ul { display:inline-block; font-family: 'karlabold'; font-size:6em; line-height:1.5em; } .menu li { position:relative; } .menu li.active { -webkit-text-stroke: 2px #0b0ffb; text-stroke: 2px #0b0ffb;} .menu li a { color: transparent; -webkit-text-stroke: 2px #0b0ffb; text-stroke: 2px #0b0ffb; } .menu li a:hover { color: #0b0ffb; -webkit-text-stroke: 2px #0b0ffb; text-stroke: 2px #0b0ffb; } .menu li.play {display:none;} /* main */ main {position:relative; padding-top:120px;} .detail main, .play main {padding-top:180px;} xmain ul li {padding-left:20px; position:relative; margin-bottom:10px;} xmain ul li:before {content: "-"; color:#F4303B; position:absolute; left:0; } .onscroll { position:relative; opacity: 1; top:0; -webkit-transition:all 1s ease-out 0.3s; transition:all 1s ease-out 0.3s;} .onscroll-hidden { opacity: 0; } .float_right {float:right;} .float_left {float:left;} .row img {width:100%; height:auto;} .row .pixel img {width:auto; height:auto;} .space_24 {margin-bottom:24px;} .space_48 {margin-bottom:48px;} .space_72 {margin-bottom:72px;} .space_96 {margin-bottom:96px;} .space_120 {margin-bottom:120px;} .space_144 {margin-bottom:144px;} .space_168 {margin-bottom:168px;} .space_192 {margin-bottom:192px;} .space_216 {margin-bottom:216px;} .video {position: relative; padding-bottom: 56.25%; height:0; overflow: hidden; } .vimeo {padding: 56.25% 0 0 0; position: relative;} .ce_text {position:relative;} .videolink a {display:block; } .video iframe,.vimeo iframe, .vimeolink a iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .videolink video {vertical-align: top; } /* footer */ footer {position:relative; padding:80px 0; font-family: 'karlaregular';} footer .footer_nav {float:left;} footer .copy {float:right; margin-left:80px;} footer .copy img {margin-bottom:40px;} footer .address {float:right;} footer .legal, footer .address {font-size:.85em; line-height:1.6em;} footer .address .spacer { height:12px; } footer .footer_nav {font-family: 'karlabold'; text-transform:uppercase; } footer a {color:#0b0ffb; position:relative;} footer a:before { content: ""; position: absolute; width: 0%; height: 4px; bottom: 0px; left: 0; background: #a7fff7; visibility: hidden; -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } footer a:hover:before { visibility: visible; width: 100%; } footer .vimeo_link {font-family: 'karlabold'; margin-bottom:30px; } /* animation */ .fade_in { opacity: 0; -moz-transition:all 1s ease-out; -o-transition:all 1s ease-out; transition:all 1s ease-out;} .fade_left { -moz-transition:all .5s ease-out; -o-transition:all .5s ease-out; transition:all .5s ease-out; transform: translateX(-10%); -o-transform: translateX(-10%); -ms-transform: translateX(-10%); -moz-transform: translateX(-10%); -webkit-transform: translateX(-10%); opacity: 0; } .fade_right { -moz-transition:all .5s ease-out; -o-transition:all .5s ease-out; transition:all .5s ease-out; transform: translateX(10%); -o-transform: translateX(10%); -ms-transform: translateX(10%); -moz-transform: translateX(10%); -webkit-transform: translateX(10%); opacity: 0; } .show { transform: translate(0px,0px) scale(1.0) rotate(0deg)!important; -o-transform: translate(0px,0px) scale(1.0) rotate(0deg)!important; -ms-transform: translate(0px,0px) scale(1.0) rotate(0deg)!important; -moz-transform: translate(0px,0px) scale(1.0) rotate(0deg)!important; -webkit-transform: translate(0px,0px) scale(1.0) rotate(0deg)!important; opacity: 1!important; } /* responsive schnickschnack */ /* nav break */ @media (max-width: 1400px) { h2, h3 {font-size:3em; line-height:1.1em;} .featured h2 {font-size:2.2em; line-height:1.2em;} .center {padding:0 75px;} } @media (max-width: 1300px) { h2, h3 {font-size:2.5em; line-height:1.1em;} h6 {font-size:2em; line-height:1.1em;} } @media (max-width: 1200px) { h2, h3 {font-size:2em; line-height:1.1em;} .featured h2 {font-size:2em; line-height:1.1em;} h6 {font-size:1.8em; line-height:1.1em;} .center {padding:0 60px;} } @media (max-width: 1024px) { h6 {font-size:1.6em; line-height:1.1em;} .featured h2 {font-size:1.6em; line-height:1.2em;} .center {padding:0 40px;} } @media (max-width: 768px) { footer .copy {float:right; margin-bottom:30px; width:50%; margin-left:0;} footer .footer_nav { width:50%; margin-bottom:30px; } footer .address { float:none;} .menu ul {font-size:5em; line-height:1.5em; } } @media (max-width: 600px) { main {position:relative; padding-top:160px;} .featured h1.headline {display:none;} } @media (max-width: 500px) { .center {padding:0 24px;} .menu ul { font-size:4em; line-height:1.5em; } footer .copy, footer .footer_nav {float:none; width:100%; } h2 {font-size:1.75em; line-height:1.3em;} .featured h2 {font-size:1.4em; line-height:1.3em;} } @media (max-width: 400px) { .center {padding:0 20px;} h1.headline { top:19px; font-size:1em; } } @media (max-width: 350px) { } @media (max-height: 450px) { .menu ul {font-size:4em; line-height:1.5em; } } /* print */ @media print { body {font-size:0.7em;} header, footer {display:none;} .print_button {display:none !important;} .print {visibility:visible;} *, *:before, *:after, *:first-letter, *:first-line { background: transparent !important;color: #000 !important; box-shadow: none !important; text-shadow: none !important; } a,a:visited { text-decoration: underline;} a[href]:after {content: " (" attr(href) ")"; } abbr[title]:after {content: " (" attr(title) ")";} a[href^="#"]:after, a[href^="javascript:"]:after { content: ""; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group;} tr,img {page-break-inside: avoid;} img {max-width: 100% !important; } p,h2,h3 {orphans: 3;widows: 3;} h2, h3 {page-break-after: avoid;} } /*! * animsition v4.0.2 * A simple and easy jQuery plugin for CSS animated page transitions. * http://blivesta.github.io/animsition * License : MIT * Author : blivesta (http://blivesta.com/) */.animsition,.animsition-overlay{position:relative;opacity:1;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animsition-overlay-slide{position:fixed;z-index:1;width:100%;height:100%;background-color:#fff}.animsition-loading,.animsition-loading:after{width:50px;height:50px;position:fixed;top:50%;left:50%;margin-top:-25px;margin-left:-25px;border-radius:50%;z-index:2}.animsition-loading{background-color:transparent;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-duration:.8s;animation-duration:.8s;-webkit-animation-name:animsition-loading;animation-name:animsition-loading}@-webkit-keyframes animsition-loading{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes animsition-loading{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@-webkit-keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.fade-in{-webkit-animation-name:fade-in;animation-name:fade-in}@-webkit-keyframes fade-out{0%{opacity:1}to{opacity:0}}@keyframes fade-out{0%{opacity:1}to{opacity:0}}.fade-out{-webkit-animation-name:fade-out;animation-name:fade-out}@-webkit-keyframes fade-in-up{0%{-webkit-transform:translateY(500px);transform:translateY(500px);opacity:0}to{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes fade-in-up{0%{-webkit-transform:translateY(500px);transform:translateY(500px);opacity:0}to{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}.fade-in-up{-webkit-animation-name:fade-in-up;animation-name:fade-in-up}@-webkit-keyframes fade-out-up{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}to{-webkit-transform:translateY(-500px);transform:translateY(-500px);opacity:0}}@keyframes fade-out-up{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}to{-webkit-transform:translateY(-500px);transform:translateY(-500px);opacity:0}}.fade-out-up{-webkit-animation-name:fade-out-up;animation-name:fade-out-up}@-webkit-keyframes fade-in-up-sm{0%{-webkit-transform:translateY(100px);transform:translateY(100px);opacity:0}to{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes fade-in-up-sm{0%{-webkit-transform:translateY(100px);transform:translateY(100px);opacity:0}to{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}.fade-in-up-sm{-webkit-animation-name:fade-in-up-sm;animation-name:fade-in-up-sm}@-webkit-keyframes fade-out-up-sm{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}to{-webkit-transform:translateY(-100px);transform:translateY(-100px);opacity:0}}@keyframes fade-out-up-sm{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}to{-webkit-transform:translateY(-100px);transform:translateY(-100px);opacity:0}}.fade-out-up-sm{-webkit-animation-name:fade-out-up-sm;animation-name:fade-out-up-sm}@-webkit-keyframes fade-in-up-lg{0%{-webkit-transform:translateY(1000px);transform:translateY(1000px);opacity:0}to{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes fade-in-up-lg{0%{-webkit-transform:translateY(1000px);transform:translateY(1000px);opacity:0}to{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}.fade-in-up-lg{-webkit-animation-name:fade-in-up-lg;animation-name:fade-in-up-lg}@-webkit-keyframes fade-out-up-lg{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}to{-webkit-transform:translateY(-1000px);transform:translateY(-1000px);opacity:0}}@keyframes fade-out-up-lg{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}to{-webkit-transform:translateY(-1000px);transform:translateY(-1000px);opacity:0}}.fade-out-up-lg{-webkit-animation-name:fade-out-up-lg;animation-name:fade-out-up-lg}@-webkit-keyframes fade-in-down{0%{-webkit-transform:translateY(-500px);transform:translateY(-500px);opacity:0}to{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes fade-in-down{0%{-webkit-transform:translateY(-500px);transform:translateY(-500px);opacity:0}to{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}.fade-in-down{-webkit-animation-name:fade-in-down;animation-name:fade-in-down}@-webkit-keyframes fade-out-down{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}to{-webkit-transform:translateY(500px);transform:translateY(500px);opacity:0}}@keyframes fade-out-down{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}to{-webkit-transform:translateY(500px);transform:translateY(500px);opacity:0}}.fade-out-down{-webkit-animation-name:fade-out-down;animation-name:fade-out-down}@-webkit-keyframes fade-in-down-sm{0%{-webkit-transform:translateY(-100px);transform:translateY(-100px);opacity:0}to{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes fade-in-down-sm{0%{-webkit-transform:translateY(-100px);transform:translateY(-100px);opacity:0}to{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}.fade-in-down-sm{-webkit-animation-name:fade-in-down-sm;animation-name:fade-in-down-sm}@-webkit-keyframes fade-out-down-sm{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}to{-webkit-transform:translateY(100px);transform:translateY(100px);opacity:0}}@keyframes fade-out-down-sm{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}to{-webkit-transform:translateY(100px);transform:translateY(100px);opacity:0}}.fade-out-down-sm{-webkit-animation-name:fade-out-down-sm;animation-name:fade-out-down-sm}.fade-in-down-lg{-webkit-animation-name:fade-in-down;animation-name:fade-in-down}@-webkit-keyframes fade-out-down-lg{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}to{-webkit-transform:translateY(1000px);transform:translateY(1000px);opacity:0}}@keyframes fade-out-down-lg{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}to{-webkit-transform:translateY(1000px);transform:translateY(1000px);opacity:0}}.fade-out-down-lg{-webkit-animation-name:fade-out-down-lg;animation-name:fade-out-down-lg}@-webkit-keyframes fade-in-left{0%{-webkit-transform:translateX(-500px);transform:translateX(-500px);opacity:0}to{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@keyframes fade-in-left{0%{-webkit-transform:translateX(-500px);transform:translateX(-500px);opacity:0}to{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}.fade-in-left{-webkit-animation-name:fade-in-left;animation-name:fade-in-left}@-webkit-keyframes fade-out-left{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}to{-webkit-transform:translateX(-500px);transform:translateX(-500px);opacity:0}}@keyframes fade-out-left{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}to{-webkit-transform:translateX(-500px);transform:translateX(-500px);opacity:0}}.fade-out-left{-webkit-animation-name:fade-out-left;animation-name:fade-out-left}@-webkit-keyframes fade-in-left-sm{0%{-webkit-transform:translateX(-100px);transform:translateX(-100px);opacity:0}to{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@keyframes fade-in-left-sm{0%{-webkit-transform:translateX(-100px);transform:translateX(-100px);opacity:0}to{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}.fade-in-left-sm{-webkit-animation-name:fade-in-left-sm;animation-name:fade-in-left-sm}@-webkit-keyframes fade-out-left-sm{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}to{-webkit-transform:translateX(-100px);transform:translateX(-100px);opacity:0}}@keyframes fade-out-left-sm{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}to{-webkit-transform:translateX(-100px);transform:translateX(-100px);opacity:0}}.fade-out-left-sm{-webkit-animation-name:fade-out-left-sm;animation-name:fade-out-left-sm}@-webkit-keyframes fade-in-left-lg{0%{-webkit-transform:translateX(-1500px);transform:translateX(-1500px);opacity:0}to{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@keyframes fade-in-left-lg{0%{-webkit-transform:translateX(-1500px);transform:translateX(-1500px);opacity:0}to{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}.fade-in-left-lg{-webkit-animation-name:fade-in-left-lg;animation-name:fade-in-left-lg}@-webkit-keyframes fade-out-left-lg{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}to{-webkit-transform:translateX(-1500px);transform:translateX(-1500px);opacity:0}}@keyframes fade-out-left-lg{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}to{-webkit-transform:translateX(-1500px);transform:translateX(-1500px);opacity:0}}.fade-out-left-lg{-webkit-animation-name:fade-out-left-lg;animation-name:fade-out-left-lg}@-webkit-keyframes fade-in-right{0%{-webkit-transform:translateX(500px);transform:translateX(500px);opacity:0}to{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@keyframes fade-in-right{0%{-webkit-transform:translateX(500px);transform:translateX(500px);opacity:0}to{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}.fade-in-right{-webkit-animation-name:fade-in-right;animation-name:fade-in-right}@-webkit-keyframes fade-out-right{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}to{-webkit-transform:translateX(500px);transform:translateX(500px);opacity:0}}@keyframes fade-out-right{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}to{-webkit-transform:translateX(500px);transform:translateX(500px);opacity:0}}.fade-out-right{-webkit-animation-name:fade-out-right;animation-name:fade-out-right}@-webkit-keyframes fade-in-right-sm{0%{-webkit-transform:translateX(100px);transform:translateX(100px);opacity:0}to{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@keyframes fade-in-right-sm{0%{-webkit-transform:translateX(100px);transform:translateX(100px);opacity:0}to{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}.fade-in-right-sm{-webkit-animation-name:fade-in-right-sm;animation-name:fade-in-right-sm}@-webkit-keyframes fade-out-right-sm{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}to{-webkit-transform:translateX(100px);transform:translateX(100px);opacity:0}}@keyframes fade-out-right-sm{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}to{-webkit-transform:translateX(100px);transform:translateX(100px);opacity:0}}.fade-out-right-sm{-webkit-animation-name:fade-out-right-sm;animation-name:fade-out-right-sm}@-webkit-keyframes fade-in-right-lg{0%{-webkit-transform:translateX(1500px);transform:translateX(1500px);opacity:0}to{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@keyframes fade-in-right-lg{0%{-webkit-transform:translateX(1500px);transform:translateX(1500px);opacity:0}to{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}.fade-in-right-lg{-webkit-animation-name:fade-in-right-lg;animation-name:fade-in-right-lg}@-webkit-keyframes fade-out-right-lg{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}to{-webkit-transform:translateX(1500px);transform:translateX(1500px);opacity:0}}@keyframes fade-out-right-lg{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}to{-webkit-transform:translateX(1500px);transform:translateX(1500px);opacity:0}}.fade-out-right-lg{-webkit-animation-name:fade-out-right-lg;animation-name:fade-out-right-lg}@-webkit-keyframes rotate-in{0%{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);transform-origin:center center;opacity:0}0%,to{-webkit-transform-origin:center center}to{-webkit-transform:rotate(0);transform:rotate(0);transform-origin:center center;opacity:1}}@keyframes rotate-in{0%{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);transform-origin:center center;opacity:0}0%,to{-webkit-transform-origin:center center}to{-webkit-transform:rotate(0);transform:rotate(0);transform-origin:center center;opacity:1}}.rotate-in{-webkit-animation-name:rotate-in;animation-name:rotate-in}@-webkit-keyframes rotate-out{0%{-webkit-transform:rotate(0);transform:rotate(0);transform-origin:center center;opacity:1}0%,to{-webkit-transform-origin:center center}to{-webkit-transform:rotate(90deg);transform:rotate(90deg);transform-origin:center center;opacity:0}}@keyframes rotate-out{0%{-webkit-transform:rotate(0);transform:rotate(0);transform-origin:center center;opacity:1}0%,to{-webkit-transform-origin:center center}to{-webkit-transform:rotate(90deg);transform:rotate(90deg);transform-origin:center center;opacity:0}}.rotate-out{-webkit-animation-name:rotate-out;animation-name:rotate-out}@-webkit-keyframes rotate-in-sm{0%{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);transform-origin:center center;opacity:0}0%,to{-webkit-transform-origin:center center}to{-webkit-transform:rotate(0);transform:rotate(0);transform-origin:center center;opacity:1}}@keyframes rotate-in-sm{0%{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);transform-origin:center center;opacity:0}0%,to{-webkit-transform-origin:center center}to{-webkit-transform:rotate(0);transform:rotate(0);transform-origin:center center;opacity:1}}.rotate-in-sm{-webkit-animation-name:rotate-in-sm;animation-name:rotate-in-sm}@-webkit-keyframes rotate-out-sm{0%{-webkit-transform:rotate(0);transform:rotate(0);transform-origin:center center;opacity:1}0%,to{-webkit-transform-origin:center center}to{-webkit-transform:rotate(45deg);transform:rotate(45deg);transform-origin:center center;opacity:0}}@keyframes rotate-out-sm{0%{-webkit-transform:rotate(0);transform:rotate(0);transform-origin:center center;opacity:1}0%,to{-webkit-transform-origin:center center}to{-webkit-transform:rotate(45deg);transform:rotate(45deg);transform-origin:center center;opacity:0}}.rotate-out-sm{-webkit-animation-name:rotate-out-sm;animation-name:rotate-out-sm}@-webkit-keyframes rotate-in-lg{0%{-webkit-transform:rotate(-180deg);transform:rotate(-180deg);transform-origin:center center;opacity:0}0%,to{-webkit-transform-origin:center center}to{-webkit-transform:rotate(0);transform:rotate(0);transform-origin:center center;opacity:1}}@keyframes rotate-in-lg{0%{-webkit-transform:rotate(-180deg);transform:rotate(-180deg);transform-origin:center center;opacity:0}0%,to{-webkit-transform-origin:center center}to{-webkit-transform:rotate(0);transform:rotate(0);transform-origin:center center;opacity:1}}.rotate-in-lg{-webkit-animation-name:rotate-in-lg;animation-name:rotate-in-lg}@-webkit-keyframes rotate-out-lg{0%{-webkit-transform:rotate(0);transform:rotate(0);transform-origin:center center;opacity:1}0%,to{-webkit-transform-origin:center center}to{-webkit-transform:rotate(180deg);transform:rotate(180deg);transform-origin:center center;opacity:0}}@keyframes rotate-out-lg{0%{-webkit-transform:rotate(0);transform:rotate(0);transform-origin:center center;opacity:1}0%,to{-webkit-transform-origin:center center}to{-webkit-transform:rotate(180deg);transform:rotate(180deg);transform-origin:center center;opacity:0}}.rotate-out-lg{-webkit-animation-name:rotate-out-lg;animation-name:rotate-out-lg}@-webkit-keyframes flip-in-x{0%{-webkit-transform:perspective(550px) rotateX(90deg);transform:perspective(550px) rotateX(90deg);opacity:0}to{-webkit-transform:perspective(550px) rotateX(0deg);transform:perspective(550px) rotateX(0deg);opacity:1}}@keyframes flip-in-x{0%{-webkit-transform:perspective(550px) rotateX(90deg);transform:perspective(550px) rotateX(90deg);opacity:0}to{-webkit-transform:perspective(550px) rotateX(0deg);transform:perspective(550px) rotateX(0deg);opacity:1}}.flip-in-x{-webkit-animation-name:flip-in-x;animation-name:flip-in-x;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flip-out-x{0%{-webkit-transform:perspective(550px) rotateX(0deg);transform:perspective(550px) rotateX(0deg);opacity:1}to{-webkit-transform:perspective(550px) rotateX(90deg);transform:perspective(550px) rotateX(90deg);opacity:0}}@keyframes flip-out-x{0%{-webkit-transform:perspective(550px) rotateX(0deg);transform:perspective(550px) rotateX(0deg);opacity:1}to{-webkit-transform:perspective(550px) rotateX(90deg);transform:perspective(550px) rotateX(90deg);opacity:0}}.flip-out-x{-webkit-animation-name:flip-out-x;animation-name:flip-out-x;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flip-in-x-nr{0%{-webkit-transform:perspective(100px) rotateX(90deg);transform:perspective(100px) rotateX(90deg);opacity:0}to{-webkit-transform:perspective(100px) rotateX(0deg);transform:perspective(100px) rotateX(0deg);opacity:1}}@keyframes flip-in-x-nr{0%{-webkit-transform:perspective(100px) rotateX(90deg);transform:perspective(100px) rotateX(90deg);opacity:0}to{-webkit-transform:perspective(100px) rotateX(0deg);transform:perspective(100px) rotateX(0deg);opacity:1}}.flip-in-x-nr{-webkit-animation-name:flip-in-x-nr;animation-name:flip-in-x-nr;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flip-out-x-nr{0%{-webkit-transform:perspective(100px) rotateX(0deg);transform:perspective(100px) rotateX(0deg);opacity:1}to{-webkit-transform:perspective(100px) rotateX(90deg);transform:perspective(100px) rotateX(90deg);opacity:0}}@keyframes flip-out-x-nr{0%{-webkit-transform:perspective(100px) rotateX(0deg);transform:perspective(100px) rotateX(0deg);opacity:1}to{-webkit-transform:perspective(100px) rotateX(90deg);transform:perspective(100px) rotateX(90deg);opacity:0}}.flip-out-x-nr{-webkit-animation-name:flip-out-x-nr;animation-name:flip-out-x-nr;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flip-in-x-fr{0%{-webkit-transform:perspective(1000px) rotateX(90deg);transform:perspective(1000px) rotateX(90deg);opacity:0}to{-webkit-transform:perspective(1000px) rotateX(0deg);transform:perspective(1000px) rotateX(0deg);opacity:1}}@keyframes flip-in-x-fr{0%{-webkit-transform:perspective(1000px) rotateX(90deg);transform:perspective(1000px) rotateX(90deg);opacity:0}to{-webkit-transform:perspective(1000px) rotateX(0deg);transform:perspective(1000px) rotateX(0deg);opacity:1}}.flip-in-x-fr{-webkit-animation-name:flip-in-x-fr;animation-name:flip-in-x-fr;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flip-out-x-fr{0%{-webkit-transform:perspective(1000px) rotateX(0deg);transform:perspective(1000px) rotateX(0deg);opacity:1}to{-webkit-transform:perspective(1000px) rotateX(90deg);transform:perspective(1000px) rotateX(90deg);opacity:0}}@keyframes flip-out-x-fr{0%{-webkit-transform:perspective(1000px) rotateX(0deg);transform:perspective(1000px) rotateX(0deg);opacity:1}to{-webkit-transform:perspective(1000px) rotateX(90deg);transform:perspective(1000px) rotateX(90deg);opacity:0}}.flip-out-x-fr{-webkit-animation-name:flip-out-x-fr;animation-name:flip-out-x-fr;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flip-in-y{0%{-webkit-transform:perspective(550px) rotateY(90deg);transform:perspective(550px) rotateY(90deg);opacity:0}to{-webkit-transform:perspective(550px) rotateY(0deg);transform:perspective(550px) rotateY(0deg);opacity:1}}@keyframes flip-in-y{0%{-webkit-transform:perspective(550px) rotateY(90deg);transform:perspective(550px) rotateY(90deg);opacity:0}to{-webkit-transform:perspective(550px) rotateY(0deg);transform:perspective(550px) rotateY(0deg);opacity:1}}.flip-in-y{-webkit-animation-name:flip-in-y;animation-name:flip-in-y;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flip-out-y{0%{-webkit-transform:perspective(550px) rotateY(0deg);transform:perspective(550px) rotateY(0deg);opacity:1}to{-webkit-transform:perspective(550px) rotateY(90deg);transform:perspective(550px) rotateY(90deg);opacity:0}}@keyframes flip-out-y{0%{-webkit-transform:perspective(550px) rotateY(0deg);transform:perspective(550px) rotateY(0deg);opacity:1}to{-webkit-transform:perspective(550px) rotateY(90deg);transform:perspective(550px) rotateY(90deg);opacity:0}}.flip-out-y{-webkit-animation-name:flip-out-y;animation-name:flip-out-y;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flip-in-y-nr{0%{-webkit-transform:perspective(100px) rotateY(90deg);transform:perspective(100px) rotateY(90deg);opacity:0}to{-webkit-transform:perspective(100px) rotateY(0deg);transform:perspective(100px) rotateY(0deg);opacity:1}}@keyframes flip-in-y-nr{0%{-webkit-transform:perspective(100px) rotateY(90deg);transform:perspective(100px) rotateY(90deg);opacity:0}to{-webkit-transform:perspective(100px) rotateY(0deg);transform:perspective(100px) rotateY(0deg);opacity:1}}.flip-in-y-nr{-webkit-animation-name:flip-in-y-nr;animation-name:flip-in-y-nr;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flip-out-y-nr{0%{-webkit-transform:perspective(100px) rotateY(0deg);transform:perspective(100px) rotateY(0deg);opacity:1}to{-webkit-transform:perspective(100px) rotateY(90deg);transform:perspective(100px) rotateY(90deg);opacity:0}}@keyframes flip-out-y-nr{0%{-webkit-transform:perspective(100px) rotateY(0deg);transform:perspective(100px) rotateY(0deg);opacity:1}to{-webkit-transform:perspective(100px) rotateY(90deg);transform:perspective(100px) rotateY(90deg);opacity:0}}.flip-out-y-nr{-webkit-animation-name:flip-out-y-nr;animation-name:flip-out-y-nr;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flip-in-y-fr{0%{-webkit-transform:perspective(1000px) rotateY(90deg);transform:perspective(1000px) rotateY(90deg);opacity:0}to{-webkit-transform:perspective(1000px) rotateY(0deg);transform:perspective(1000px) rotateY(0deg);opacity:1}}@keyframes flip-in-y-fr{0%{-webkit-transform:perspective(1000px) rotateY(90deg);transform:perspective(1000px) rotateY(90deg);opacity:0}to{-webkit-transform:perspective(1000px) rotateY(0deg);transform:perspective(1000px) rotateY(0deg);opacity:1}}.flip-in-y-fr{-webkit-animation-name:flip-in-y-fr;animation-name:flip-in-y-fr;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flip-out-y-fr{0%{-webkit-transform:perspective(1000px) rotateY(0deg);transform:perspective(1000px) rotateY(0deg);opacity:1}to{-webkit-transform:perspective(1000px) rotateY(90deg);transform:perspective(1000px) rotateY(90deg);opacity:0}}@keyframes flip-out-y-fr{0%{-webkit-transform:perspective(1000px) rotateY(0deg);transform:perspective(1000px) rotateY(0deg);opacity:1}to{-webkit-transform:perspective(1000px) rotateY(90deg);transform:perspective(1000px) rotateY(90deg);opacity:0}}.flip-out-y-fr{-webkit-animation-name:flip-out-y-fr;animation-name:flip-out-y-fr;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes zoom-in{0%{-webkit-transform:scale(.7);transform:scale(.7);opacity:0}to{opacity:1}}@keyframes zoom-in{0%{-webkit-transform:scale(.7);transform:scale(.7);opacity:0}to{opacity:1}}.zoom-in{-webkit-animation-name:zoom-in;animation-name:zoom-in}@-webkit-keyframes zoom-out{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}50%{-webkit-transform:scale(.7);transform:scale(.7)}50%,to{opacity:0}}@keyframes zoom-out{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}50%{-webkit-transform:scale(.7);transform:scale(.7)}50%,to{opacity:0}}.zoom-out{-webkit-animation-name:zoom-out;animation-name:zoom-out}@-webkit-keyframes zoom-in-sm{0%{-webkit-transform:scale(.95);transform:scale(.95);opacity:0}to{opacity:1}}@keyframes zoom-in-sm{0%{-webkit-transform:scale(.95);transform:scale(.95);opacity:0}to{opacity:1}}.zoom-in-sm{-webkit-animation-name:zoom-in-sm;animation-name:zoom-in-sm}@-webkit-keyframes zoom-out-sm{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}50%{-webkit-transform:scale(.95);transform:scale(.95)}50%,to{opacity:0}}@keyframes zoom-out-sm{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}50%{-webkit-transform:scale(.95);transform:scale(.95)}50%,to{opacity:0}}.zoom-out-sm{-webkit-animation-name:zoom-out-sm;animation-name:zoom-out-sm}@-webkit-keyframes zoom-in-lg{0%{-webkit-transform:scale(.4);transform:scale(.4);opacity:0}to{opacity:1}}@keyframes zoom-in-lg{0%{-webkit-transform:scale(.4);transform:scale(.4);opacity:0}to{opacity:1}}.zoom-in-lg{-webkit-animation-name:zoom-in-lg;animation-name:zoom-in-lg}@-webkit-keyframes zoom-out-lg{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}50%{-webkit-transform:scale(.4);transform:scale(.4)}50%,to{opacity:0}}@keyframes zoom-out-lg{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}50%{-webkit-transform:scale(.4);transform:scale(.4)}50%,to{opacity:0}}.zoom-out-lg{-webkit-animation-name:zoom-out-lg;animation-name:zoom-out-lg}@-webkit-keyframes overlay-slide-in-top{0%{height:100%}to{height:0}}@keyframes overlay-slide-in-top{0%{height:100%}to{height:0}}.overlay-slide-in-top{top:0;height:0;-webkit-animation-name:overlay-slide-in-top;animation-name:overlay-slide-in-top}@-webkit-keyframes overlay-slide-out-top{0%{height:0}to{height:100%}}@keyframes overlay-slide-out-top{0%{height:0}to{height:100%}}.overlay-slide-out-top{top:0;height:100%;-webkit-animation-name:overlay-slide-out-top;animation-name:overlay-slide-out-top}@-webkit-keyframes overlay-slide-in-bottom{0%{height:100%}to{height:0}}@keyframes overlay-slide-in-bottom{0%{height:100%}to{height:0}}.overlay-slide-in-bottom{bottom:0;height:0;-webkit-animation-name:overlay-slide-in-bottom;animation-name:overlay-slide-in-bottom}@-webkit-keyframes overlay-slide-out-bottom{0%{height:0}to{height:100%}}@keyframes overlay-slide-out-bottom{0%{height:0}to{height:100%}}.overlay-slide-out-bottom{bottom:0;height:100%;-webkit-animation-name:overlay-slide-out-bottom;animation-name:overlay-slide-out-bottom}@-webkit-keyframes overlay-slide-in-left{0%{width:100%}to{width:0}}@keyframes overlay-slide-in-left{0%{width:100%}to{width:0}}.overlay-slide-in-left{width:0;-webkit-animation-name:overlay-slide-in-left;animation-name:overlay-slide-in-left}@-webkit-keyframes overlay-slide-out-left{0%{width:0}to{width:100%}}@keyframes overlay-slide-out-left{0%{width:0}to{width:100%}}.overlay-slide-out-left{left:0;width:100%;-webkit-animation-name:overlay-slide-out-left;animation-name:overlay-slide-out-left}@-webkit-keyframes overlay-slide-in-right{0%{width:100%}to{width:0}}@keyframes overlay-slide-in-right{0%{width:100%}to{width:0}}.overlay-slide-in-right{right:0;width:0;-webkit-animation-name:overlay-slide-in-right;animation-name:overlay-slide-in-right}@-webkit-keyframes overlay-slide-out-right{0%{width:0}to{width:100%}}@keyframes overlay-slide-out-right{0%{width:0}to{width:100%}}.overlay-slide-out-right{right:0;width:100%;-webkit-animation-name:overlay-slide-out-right;animation-name:overlay-slide-out-right}