<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CODEX</title>
<link rel="apple-touch-icon" sizes="180x180" href="/asset/3eb0efd6-48a6-4afc-9087-6abc9d7aba6b">
<link rel="icon" type="image/png" sizes="32x32" href="/asset/ded71e44-398e-4c0e-9df6-3918afeb17a8">
<link rel="icon" type="image/png" sizes="16x16" href="/asset/65975b34-2242-4308-a848-e7f8a915a1f9">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-balloon-js/1.1.2/jquery.balloon.min.js" integrity="sha512-uAuoMmf0Dq6YmQuIeGV8ME1MmXUoBrI5GfUG7lJs09sTn3cLGMBSdP56sJ5LnMXYJZabYC0pvCta9zYMMJPxBA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="preload" href="/assets/fonts/lato/lato2.css" as="style">
<link rel="stylesheet" href="/assets/fonts/lato/lato2.css" media="print" onload="this.media='all'">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.0/gsap.min.js" integrity="sha512-gWlyRVDsJvp5kesJt4cSdPPLZIBdln/uSwzYgUicQcbTgRNQE4QhP5KUBIYlLYLkiKIQiuD7KUMHzqGNW/D2bQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.0/ScrollTrigger.min.js" integrity="sha512-K7WgwKJAJIRoRV8yDALsY4+CZhsWKk0gVFotVxC2RzCRyoEVyWH1DRDjxw2DdBKdZdBMPr4cacHbYbNco9wOvQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.0/ScrollToPlugin.min.js" integrity="sha512-1xdGCuWYeijTaeifNNPc5UbPTZ3KCRZ5jdXNvNg59DeXnRPoLNS/V+q7u6yPHKGqN7LzXSZtUn3GFKoz/79a8g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="/assets/js/greensock/splittext.min.js"></script>
<script type="text/javascript">
gsap.registerPlugin(SplitText);
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js" integrity="sha512-8E3KZoPoZCD+1dgfqhPbejQBnQfBXe8FuwL4z/c8sTrgeDMFEnoyTlH3obB4/fV+6Sg0a0XF+L/6xS4Xx1fUEg==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/debug.addIndicators.min.js" integrity="sha512-RvUydNGlqYJapy0t4AH8hDv/It+zKsv4wOQGb+iOnEfa6NnF2fzjXgRy+FDjSpMfC3sjokNUzsfYZaZ8QAwIxg==" crossorigin="anonymous"></script>
<script src="https://player.vimeo.com/api/player.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css" integrity="sha512-/VectwrK3cVMbl6IFsHj/O+fbxfLQm5rved2LR8HnaNuIL6fs8yBXNSi25hhQCB2713sc3Cbh5a4wLRSsZvDxg==" crossorigin="anonymous" referrerpolicy="no-referrer">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/grids-responsive.min.css" integrity="sha512-hL/zOmkRziE9y4nnqXhBXXJtTYZaAkxplhKC2xzS9vmia4emkDtgASBqW2InAiX2ljAqU53qRT1xyCixrX5H8A==" crossorigin="anonymous" referrerpolicy="no-referrer">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.min.css" integrity="sha512-+0Vhbu8sRUlg+R/NKgTv7ahM+szPDF10G6J5PcHb1tOrAaquZIUiKUV3TH16mi6fuH4NjvHqlok6ppBhR6Nxuw==" crossorigin="anonymous" referrerpolicy="no-referrer">
<style>
@import url(/assets/css/editor2015.css);
.templatehint {
display:none;
}
@font-face {
font-family: 'HelveticaNeue';
src: url('/assets/fonts/helveticaneue.woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'HelveticaNeue600';
src: url('/assets/fonts/helveticaneue.woff');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'HelveticaNeue500';
src: url('/assets/fonts/helveticaneue.woff');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'HelveticaNeue400';
src: url('/assets/fonts/helveticaneue.woff');
font-weight: 400;
font-style: normal;
}
span.no-wrap{
display: inline-block;
}
span.trademark{
}
span.trademark:after {
content: "TM";
font-size: 0.6em;
position: relative;
top: -0.47em;
padding: 0 0.1em 0 0.3em;
}
body{
background: #000;
}
.codex{
opacity: 0;
}
</style>
<style>
/* pure-font-xs */
@media screen and (max-width:35.438em) {
.pure-hidden-xs {
display: none !important;
}
}
/* pure-font-sm */
@media screen and (min-width:35.5em) and (max-width:47.938em) {
.pure-hidden-sm {
display: none !important;
}
}
/* pure-font-md */
@media screen and (min-width:48em) and (max-width:63.938em) {
.pure-hidden-md {
display: none !important;
}
}
/* pure-font-lg */
@media screen and (min-width:64em) and (max-width:79.938em) {
.pure-hidden-lg {
display: none !important;
}
}
/* pure-font-xl */
@media screen and (min-width:80em) and (max-width:94.938em){
.pure-hidden-xl {
display: none !important;
}
}
/* pure-font-xxl */
@media screen and (min-width:95em) {
.pure-hidden-xxl {
display: none !important;
}
}
.cms_editablecontent{
display:none;
}
</style>
<meta property="og:title" content="CODEX"><meta property="og:url" content="https://codex.online/"><meta property="og:type" content="website"><meta property="og:description" content="Focus. Capture. Share. Save."><meta property="og:image" content="https://codex.online/asset/d949d4a4-4713-476b-8e8e-ef15c3aa9d7c"><script type="text/javascript">isMobile=()=>window.innerWidth<=768;getUrlParameter=n=>{n=n.replace(/[\[]/,"\\[").replace(/[\]]/,"\\]");var i=new RegExp("[\\?&]"+n+"=([^&#]*)"),t=i.exec(location.search);return t===null?"":decodeURIComponent(t[1].replace(/\+/g," "))};scrollToSection=n=>{var t;t=isMobile()?$(".mobile .pin-spacer")[n]:$(".desktop .left .pin-spacer")[n];t&&$("html, body").animate({scrollTop:$(t).offset().top},1e3)};$(document).ready(function(){var n=getUrlParameter("section");n&&(scrollToSection(parseInt(n,10)),history.pushState(null,null,"https://codex.online/"))})</script><script type="text/javascript">var _accessverification="huLrytAr6D[QvS^l\u003e=\u003ePG4J2mPXifOeg";</script></head>
<body class=" languageen group1 loggedout currency-GBP country-GBR platform-unknown">
<div class="codex">
<div id="pagestyle"></div>
<div id="scriptstyleheader"><script>
function updateFooter(){
var htmlHeight = $("html").height();
var windowHeight = window.innerHeight;
if($("#footer").hasClass("fixed")){
htmlHeight += $("#footer").height();
}
//console.log("window: " + windowHeight + " htmlHeight: " + htmlHeight);
if( htmlHeight < windowHeight){
$("#footer").addClass("fixed");
}
else{
$("#footer").removeClass("fixed");
}
}
var footerTimer;
$(function(){
//fixed footer
//$(window).resize(updateFooter);
//footerTimer = setInterval(updateFooter,500);
//$(window).resize();
});
</script><script type="text/javascript">function showDialogbox(n,t=true){$(dialogbox).html(n).dialog("open");dialogbox.data("autoResize",t)}function closeDialogbox(){$(dialogbox).html("");$(dialogbox).dialog("close")}function sizeLightbox(){var i=100,t=$(window).height(),n=$(window).width(),r=800,u=600;return n>450&&(t>u?t=u:t-i*2,n>r?n=r:n-i*2),{width:n,height:t}}function resizeDialogbox(){if(dialogbox.data("autoResize")){var n=sizeLightbox();$(dialogbox).dialog("option","width",n.width);$(dialogbox).dialog("option","height",n.height);$("iframe",dialogbox).width(n.width-35).height(n.height-150)}else dialogbox.dialog("option","position",{my:"center",at:"center","of":window})}function revealImages(){var n=$(window).scrollTop(),t=$(window).height()+n;images=[];$("img, .fadein").not(".nofade").each(function(){images.push({top:this.getBoundingClientRect().top+n,image:this})});images.forEach(function(n){t>n.top+50&&$(n.image).animate({opacity:1},500)})}function doFadeinSlideup(){function i(n){$(n).attr("oldtop",$(n).css("top")).animate({opacity:1,top:0},1500)}function r(){doFadeinSlideup()}var n=$(window).scrollTop(),t=$(window).height()+n;objects=[];$(".fadeinslideup").each(function(){objects.push({top:this.getBoundingClientRect().top+n,obj:this})});objects.forEach(function(n){var u=$("img",n.obj).toArray(),f=!1;(u.length>0&&u.forEach(function(n){n.complete||(n.onload=r,f=!0)}),f)||($(n.obj).attr("oldtop")==null&t>n.top+50&&i(n.obj),$(n.obj).attr("oldtop")!=null&t<n.top-50&&$(n.obj).animate({opacity:0,top:$(n.obj).attr("oldtop")},0).removeAttr("oldtop"))})}function getOrdinal(n){n=n.toString().trim();n=n.length>1&&n[n.length-2]=="1"?0:n[n.length-1];switch(n){case"1":return"st";case"2":return"nd";case"3":return"rd";default:return"th"}}function getMonthText(n){return["January","February","March","April","May","June","July","August","September","October","November","December"][n]}function getDayText(n){return["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"][n]}function getDateText(n){return getDayText(n.getDay())+" "+n.getDate()+getOrdinal(n.getDate())+" "+getMonthText(n.getMonth())+" "+n.getUTCFullYear()}function getTimeText(n){return n.getHours()+":"+n.getMinutes().toString().padStart(2,"0")}function lf_track_load(n,t){var r=escape(screen.width).substring(0,6),u=escape(screen.height).substring(0,6),f=escape(document.referrer).substring(0,1100),i=escape(t).substring(0,200);i=i.replace(/\%u00a0/g,"");i=i.replace(/\%u2122/g,"");i=i.replace(/\%u[0-9][0-9][0-9][0-9]/g,"");var e=escape(n).substring(0,200),o=escape(navigator.appName).substring(0,100),s=window.navigator.userLanguage||window.navigator.language,h=escape(navigator.userAgent+".lfcd"+screen.colorDepth+".lflng"+s).substring(0,1e3),c=escape(document.domain).substring(0,200),l="xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,function(n){var t=Math.random()*16|0,i=n=="x"?t:t&3|8;return i.toString(16)}),a="https://secure.leadforensics.com/Track/Capture.aspx?trk_user=59299&trk_sw="+r+"&trk_sh="+u+"&trk_ref="+f+"&trk_tit="+i+"&trk_loc="+e+"&trk_agn="+o+"&trk_agv="+h+"&trk_dom="+c+"&trk_guid="+l+"&trk_cookie=NA",v=new Image;v.src=a}function initRevealTags(){function n(){var n=$(window).scrollTop(),t=$(window).height()+n;revealTags.forEach(function(i){var u,r;try{u=i.item.getBoundingClientRect();!i.visible&&t>u.top+n+u.height/2&&(r=$(i.item),window[r.attr("onreveal").replace("()","")].call(r),i.visible=!0);i.visible&&t<u.top+n&&(r=$(i.item),window[r.attr("onrevealreset").replace("()","")].call(r),i.visible=!1)}catch(f){}})}revealTags=$("[onReveal]").toArray().map(function(n){return{item:n,visible:!1}});n();$(window).on("scroll",n)}function setUserThemePreference(){function t(){return window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches}function u(){return n!=t()}function i(){t()?($("body").addClass("dark"),n=!0,$(window).resize()):($("body").removeClass("dark"),n=!1,$(window).resize())}var n=!1,r;i();r=setInterval(function(){u()&&i()},500)}function doRelativeFont(){$(".relativefont").each(function(){$(this).css({"font-size":$(this).width()/parseFloat($(this).data("relative-font-factor"))})})}function initRelativeFont(){$(window).resize(doRelativeFont);doRelativeFont()}function setCookie(n,t,i){var r,u;i==undefined&&(i=1);r=new Date;r.setTime(r.getTime()+i*864e5);u="expires="+r.toUTCString();document.cookie=n+"="+t+"; "+u+"; path=/;"}function getCookie(n){for(var t,r=n+"=",u=document.cookie.split(";"),i=0;i<u.length;i++){for(t=u[i];t.charAt(0)==" ";)t=t.substring(1);if(t.indexOf(r)==0)return t.substring(r.length,t.length)}return""}function decodeQuerystring(n){var t,i={};return(t=n.indexOf("?"))>=0&&(n=n.substr(t+1)),n.split("&").forEach(n=>{var t=n.split("=");i[t[0]]=t[1]}),i}function plural(n){return n>1||n==0?"s":""}function formatNumber(n){return Intl.NumberFormat("en").format(n)}function splitChars(n){$(n).each((n,t)=>{split=new SplitText(t,{type:"words,chars"}),split.chars.forEach(n=>{$(n).attr("data-char",n.innerText)})})}function preloadImages(n){n.forEach(n=>{var t=document.createElement("img");t.src=n})}var dialogbox,images,revealTags,validatePassword;jQuery.extend({getQueryParameters:function(n){return(n||document.location.search).replace(/(^\?)/,"").split("&").map(function(n){return n=n.split("="),this[n[0]]=n[1],this}.bind({}))[0]}});$(function(){dialogbox=$("#dialogbox").dialog({autoOpen:!1,resizable:!1,modal:!0,width:750,height:540,dialogClass:"theme_dialog",show:{effect:"fade",duration:750}});$(window).resize(function(){resizeDialogbox();$(".aspect16-9").each(function(){$(this).height($(this).width()/1.777)})});$(window).scroll(function(){resizeDialogbox()});$(".iframedialog a").click(function(n){n.preventDefault();var t=$("#dialog-iframe").clone();$("iframe.player",t).attr("src",$(this).attr("href").replace("http://","https://"));showDialogbox($(t).html());resizeDialogbox()});$(window).on("scroll",function(){revealImages();doFadeinSlideup()});$(window).on("resize",function(){revealImages();doFadeinSlideup()});revealTimer=setTimeout(function(){revealImages();doFadeinSlideup()},500);initRevealTags();$(window).resize()});validatePassword=n=>{var t=/[A-Z]/.test(n),i=/[a-z]/.test(n),r=/\d/.test(n),u=/\W/.test(n),f=n.length>7,e=n.length==0;return{isValid:t&&i&&r&&u&&f,hasUpperCase:t,hasLowerCase:i,hasNumeric:r,hasSpecial:u,isLong:f,isEmpty:e}}</script><style>html{font-variant-ligatures:none;font-size:16px}@media screen and (max-width:35.438em){.first .title{margin-top:0 !important;margin-bottom:2em !important}.image-gallery .title{margin-top:0 !important;margin-bottom:2em !important}}@media screen and (min-width:35.5em) and (max-width:47.938em){.first .title{margin-top:1em !important;margin-bottom:2em !important}.image-gallery .title{margin-top:1em !important;margin-bottom:2em !important}}@media screen and (min-width:48em) and (max-width:63.938em){h1.pure-font{font-size:5em !important}h1{font-size:3em !important}}@media screen and (min-width:64em) and (max-width:79.938em){h1.pure-font{font-size:6em !important}h1{font-size:3em !important}}@media screen and (min-width:80em){h1.pure-font{font-size:7em !important}#panel4 ul{font-size:1.5em !important}h1{font-size:4em}}
/*! jQuery UI - v1.11.4 - 2015-07-13 (Custom Button)
* http://jqueryui.com
* Includes: core.css, button.css, theme.css
* To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Verdana%2CArial%2Csans-serif&fwDefault=normal&fsDefault=1.1em&cornerRadius=5px&bgColorHeader=2191c0&bgTextureHeader=gloss_wave&bgImgOpacityHeader=75&borderColorHeader=4297d7&fcHeader=eaf5f7&iconColorHeader=d8e7f3&bgColorContent=fcfdfd&bgTextureContent=inset_hard&bgImgOpacityContent=100&borderColorContent=a6c9e2&fcContent=222222&iconColorContent=0078ae&bgColorDefault=0078ae&bgTextureDefault=glass&bgImgOpacityDefault=45&borderColorDefault=77d5f7&fcDefault=ffffff&iconColorDefault=e0fdff&bgColorHover=79c9ec&bgTextureHover=glass&bgImgOpacityHover=75&borderColorHover=448dae&fcHover=026890&iconColorHover=056b93&bgColorActive=6eac2c&bgTextureActive=gloss_wave&bgImgOpacityActive=50&borderColorActive=acdd4a&fcActive=ffffff&iconColorActive=f5e175&bgColorHighlight=f8da4e&bgTextureHighlight=glass&bgImgOpacityHighlight=55&borderColorHighlight=fcd113&fcHighlight=915608&iconColorHighlight=f7a50d&bgColorError=e14f1c&bgTextureError=gloss_wave&bgImgOpacityError=45&borderColorError=cd0a0a&fcError=ffffff&iconColorError=fcd113&bgColorOverlay=aaaaaa&bgTextureOverlay=flat&bgImgOpacityOverlay=75&opacityOverlay=30&bgColorShadow=999999&bgTextureShadow=flat&bgImgOpacityShadow=55&opacityShadow=45&thicknessShadow=0px&offsetTopShadow=5px&offsetLeftShadow=5px&cornerRadiusShadow=5px
* Copyright 2015 jQuery Foundation and other contributors; Licensed MIT */
.ui-helper-hidden{display:none}.ui-helper-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.ui-helper-reset{margin:0;padding:0;border:0;outline:0;line-height:1.3;text-decoration:none;font-size:100%;list-style:none}.ui-helper-clearfix:before,.ui-helper-clearfix:after{content:"";display:table;border-collapse:collapse}.ui-helper-clearfix:after{clear:both}.ui-helper-clearfix{min-height:0}.ui-helper-zfix{width:100%;height:100%;top:0;left:0;position:absolute;opacity:0;filter:Alpha(Opacity=0)}.ui-front{z-index:100}.ui-state-disabled{cursor:default !important}.ui-icon{display:block;text-indent:-99999px;overflow:hidden;background-repeat:no-repeat}.ui-widget-overlay{position:fixed;top:0;left:0;width:100%;height:100%}.ui-button{display:inline-block;position:relative;padding:0;line-height:normal;margin-right:.1em;cursor:pointer;vertical-align:middle;text-align:center;overflow:visible}.ui-button,.ui-button:link,.ui-button:visited,.ui-button:hover,.ui-button:active{text-decoration:none}.ui-button-icon-only{width:2.2em}button.ui-button-icon-only{width:2.4em}.ui-button-icons-only{width:3.4em}button.ui-button-icons-only{width:3.7em}.ui-button .ui-button-text{display:block;line-height:normal}.ui-button-text-only .ui-button-text{padding:.1em .8em;position:relative;top:-1px;left:-2px}.ui-button-icon-only .ui-button-text,.ui-button-icons-only .ui-button-text{padding:.4em;text-indent:-9999999px}.ui-button-text-icon-primary .ui-button-text,.ui-button-text-icons .ui-button-text{padding:.4em 1em .4em 2.1em}.ui-button-text-icon-secondary .ui-button-text,.ui-button-text-icons .ui-button-text{padding:.4em 2.1em .4em 1em}.ui-button-text-icons .ui-button-text{padding-left:2.1em;padding-right:2.1em}input.ui-button{padding:.4em 1em}.ui-button-icon-only .ui-icon,.ui-button-text-icon-primary .ui-icon,.ui-button-text-icon-secondary .ui-icon,.ui-button-text-icons .ui-icon,.ui-button-icons-only .ui-icon{position:absolute;top:50%;margin-top:-8px}.ui-button-icon-only .ui-icon{left:50%;margin-left:-8px}.ui-button-text-icon-primary .ui-button-icon-primary,.ui-button-text-icons .ui-button-icon-primary,.ui-button-icons-only .ui-button-icon-primary{left:.5em}.ui-button-text-icon-secondary .ui-button-icon-secondary,.ui-button-text-icons .ui-button-icon-secondary,.ui-button-icons-only .ui-button-icon-secondary{right:.5em}.ui-buttonset{margin-right:7px}.ui-buttonset .ui-button{margin-left:0;margin-right:-.3em}input.ui-button::-moz-focus-inner,button.ui-button::-moz-focus-inner{border:0;padding:0}.button .ui-widget{font-family:"Tungsten A","Tungsten B";font-size:1.7em}.button .ui-widget .ui-widget{font-size:1em}.button .ui-widget input,.button .ui-widget select,.button .ui-widget textarea,.button .ui-widget button{font-family:Verdana,Arial,sans-serif;font-size:1em}.button .ui-widget-content{border:1px solid #a6c9e2;background:#fcfdfd url("images/ui-bg_inset-hard_100_fcfdfd_1x100.png") 50% bottom repeat-x;color:#222}.button .ui-widget-content a{color:#222}.button .ui-widget-header{border:1px solid #4297d7;background:#2191c0 url("images/ui-bg_gloss-wave_75_2191c0_500x100.png") 50% 50% repeat-x;color:#eaf5f7;font-weight:bold}.button .ui-widget-header a{color:#eaf5f7}.button .ui-state-default,.button .ui-widget-content .ui-state-default,.button .ui-widget-header .ui-state-default{border:1px solid #999;background:#999 url("images/ui-bg_glass_45_0078ae_1x400.png") 50% 50% repeat-x;font-weight:normal;color:#fff}.button .ui-state-default a,.button .ui-state-default a:link,.button .ui-state-default a:visited{color:#fff;text-decoration:none}.button .ui-state-hover,.button .ui-widget-content .ui-state-hover,.button .ui-widget-header .ui-state-hover,.button .ui-state-focus,.button .ui-widget-content .ui-state-focus,.button .ui-widget-header .ui-state-focus{background:#ccc url("images/ui-bg_glass_75_79c9ec_1x400.png") 50% 50% repeat-x;font-weight:normal}.button .ui-state-hover a,.button .ui-state-hover a:hover,.button .ui-state-hover a:link,.button .ui-state-hover a:visited,.button .ui-state-focus a,.button .ui-state-focus a:hover,.button .ui-state-focus a:link,.button .ui-state-focus a:visited{color:#026890;text-decoration:none}.button .ui-state-active,.button .ui-widget-content .ui-state-active,.button .ui-widget-header .ui-state-active{border:1px solid #0946dd;background:#0946dd url("images/ui-bg_gloss-wave_50_6eac2c_500x100.png") 50% 50% repeat-x;font-weight:normal;color:#fff}.button .ui-state-active a,.button .ui-state-active a:link,.button .ui-state-active a:visited{color:#fff;text-decoration:none}.button .ui-state-highlight,.button .ui-widget-content .ui-state-highlight,.button .ui-widget-header .ui-state-highlight{border:1px solid #fcd113;background:#f8da4e url("images/ui-bg_glass_55_f8da4e_1x400.png") 50% 50% repeat-x;color:#915608}.button .ui-state-highlight a,.button .ui-widget-content .ui-state-highlight a,.button .ui-widget-header .ui-state-highlight a{color:#915608}.button .ui-state-error,.button .ui-widget-content .ui-state-error,.button .ui-widget-header .ui-state-error{border:1px solid #cd0a0a;background:#e14f1c url("images/ui-bg_gloss-wave_45_e14f1c_500x100.png") 50% top repeat-x;color:#fff}.button .ui-state-error a,.button .ui-widget-content .ui-state-error a,.button .ui-widget-header .ui-state-error a{color:#fff}.button .ui-state-error-text,.button .ui-widget-content .ui-state-error-text,.button .ui-widget-header .ui-state-error-text{color:#fff}.button .ui-priority-primary,.button .ui-widget-content .ui-priority-primary,.button .ui-widget-header .ui-priority-primary{font-weight:bold}.button .ui-priority-secondary,.button .ui-widget-content .ui-priority-secondary,.button .ui-widget-header .ui-priority-secondary{opacity:.7;filter:Alpha(Opacity=70);font-weight:normal}.button .ui-state-disabled,.button .ui-widget-content .ui-state-disabled,.button .ui-widget-header .ui-state-disabled{opacity:.35;filter:Alpha(Opacity=35);background-image:none}.button .ui-state-disabled .ui-icon{filter:Alpha(Opacity=35)}.button .ui-icon{width:16px;height:16px}.button .ui-icon,.button .ui-widget-content .ui-icon{background-image:url("images/ui-icons_0078ae_256x240.png")}.button .ui-widget-header .ui-icon{background-image:url("images/ui-icons_d8e7f3_256x240.png")}.button .ui-state-default .ui-icon{background-image:url("images/ui-icons_e0fdff_256x240.png")}.button .ui-state-hover .ui-icon,.button .ui-state-focus .ui-icon{background-image:url("images/ui-icons_056b93_256x240.png")}.button .ui-state-active .ui-icon{background-image:url("images/ui-icons_f5e175_256x240.png")}.button .ui-state-highlight .ui-icon{background-image:url("images/ui-icons_f7a50d_256x240.png")}.button .ui-state-error .ui-icon,.button .ui-state-error-text .ui-icon{background-image:url("images/ui-icons_fcd113_256x240.png")}.button .ui-icon-blank{background-position:16px 16px}.button .ui-icon-carat-1-n{background-position:0 0}.button .ui-icon-carat-1-ne{background-position:-16px 0}.button .ui-icon-carat-1-e{background-position:-32px 0}.button .ui-icon-carat-1-se{background-position:-48px 0}.button .ui-icon-carat-1-s{background-position:-64px 0}.button .ui-icon-carat-1-sw{background-position:-80px 0}.button .ui-icon-carat-1-w{background-position:-96px 0}.button .ui-icon-carat-1-nw{background-position:-112px 0}.button .ui-icon-carat-2-n-s{background-position:-128px 0}.button .ui-icon-carat-2-e-w{background-position:-144px 0}.button .ui-icon-triangle-1-n{background-position:0 -16px}.button .ui-icon-triangle-1-ne{background-position:-16px -16px}.button .ui-icon-triangle-1-e{background-position:-32px -16px}.button .ui-icon-triangle-1-se{background-position:-48px -16px}.button .ui-icon-triangle-1-s{background-position:-64px -16px}.button .ui-icon-triangle-1-sw{background-position:-80px -16px}.button .ui-icon-triangle-1-w{background-position:-96px -16px}.button .ui-icon-triangle-1-nw{background-position:-112px -16px}.button .ui-icon-triangle-2-n-s{background-position:-128px -16px}.button .ui-icon-triangle-2-e-w{background-position:-144px -16px}.button .ui-icon-arrow-1-n{background-position:0 -32px}.button .ui-icon-arrow-1-ne{background-position:-16px -32px}.button .ui-icon-arrow-1-e{background-position:-32px -32px}.button .ui-icon-arrow-1-se{background-position:-48px -32px}.button .ui-icon-arrow-1-s{background-position:-64px -32px}.button .ui-icon-arrow-1-sw{background-position:-80px -32px}.button .ui-icon-arrow-1-w{background-position:-96px -32px}.button .ui-icon-arrow-1-nw{background-position:-112px -32px}.button .ui-icon-arrow-2-n-s{background-position:-128px -32px}.button .ui-icon-arrow-2-ne-sw{background-position:-144px -32px}.button .ui-icon-arrow-2-e-w{background-position:-160px -32px}.button .ui-icon-arrow-2-se-nw{background-position:-176px -32px}.button .ui-icon-arrowstop-1-n{background-position:-192px -32px}.button .ui-icon-arrowstop-1-e{background-position:-208px -32px}.button .ui-icon-arrowstop-1-s{background-position:-224px -32px}.button .ui-icon-arrowstop-1-w{background-position:-240px -32px}.button .ui-icon-arrowthick-1-n{background-position:0 -48px}.button .ui-icon-arrowthick-1-ne{background-position:-16px -48px}.button .ui-icon-arrowthick-1-e{background-position:-32px -48px}.button .ui-icon-arrowthick-1-se{background-position:-48px -48px}.button .ui-icon-arrowthick-1-s{background-position:-64px -48px}.button .ui-icon-arrowthick-1-sw{background-position:-80px -48px}.button .ui-icon-arrowthick-1-w{background-position:-96px -48px}.button .ui-icon-arrowthick-1-nw{background-position:-112px -48px}.button .ui-icon-arrowthick-2-n-s{background-position:-128px -48px}.button .ui-icon-arrowthick-2-ne-sw{background-position:-144px -48px}.button .ui-icon-arrowthick-2-e-w{background-position:-160px -48px}.button .ui-icon-arrowthick-2-se-nw{background-position:-176px -48px}.button .ui-icon-arrowthickstop-1-n{background-position:-192px -48px}.button .ui-icon-arrowthickstop-1-e{background-position:-208px -48px}.button .ui-icon-arrowthickstop-1-s{background-position:-224px -48px}.button .ui-icon-arrowthickstop-1-w{background-position:-240px -48px}.button .ui-icon-arrowreturnthick-1-w{background-position:0 -64px}.button .ui-icon-arrowreturnthick-1-n{background-position:-16px -64px}.button .ui-icon-arrowreturnthick-1-e{background-position:-32px -64px}.button .ui-icon-arrowreturnthick-1-s{background-position:-48px -64px}.button .ui-icon-arrowreturn-1-w{background-position:-64px -64px}.button .ui-icon-arrowreturn-1-n{background-position:-80px -64px}.button .ui-icon-arrowreturn-1-e{background-position:-96px -64px}.button .ui-icon-arrowreturn-1-s{background-position:-112px -64px}.button .ui-icon-arrowrefresh-1-w{background-position:-128px -64px}.button .ui-icon-arrowrefresh-1-n{background-position:-144px -64px}.button .ui-icon-arrowrefresh-1-e{background-position:-160px -64px}.button .ui-icon-arrowrefresh-1-s{background-position:-176px -64px}.button .ui-icon-arrow-4{background-position:0 -80px}.button .ui-icon-arrow-4-diag{background-position:-16px -80px}.button .ui-icon-extlink{background-position:-32px -80px}.button .ui-icon-newwin{background-position:-48px -80px}.button .ui-icon-refresh{background-position:-64px -80px}.button .ui-icon-shuffle{background-position:-80px -80px}.button .ui-icon-transfer-e-w{background-position:-96px -80px}.button .ui-icon-transferthick-e-w{background-position:-112px -80px}.button .ui-icon-folder-collapsed{background-position:0 -96px}.button .ui-icon-folder-open{background-position:-16px -96px}.button .ui-icon-document{background-position:-32px -96px}.button .ui-icon-document-b{background-position:-48px -96px}.button .ui-icon-note{background-position:-64px -96px}.button .ui-icon-mail-closed{background-position:-80px -96px}.button .ui-icon-mail-open{background-position:-96px -96px}.button .ui-icon-suitcase{background-position:-112px -96px}.button .ui-icon-comment{background-position:-128px -96px}.button .ui-icon-person{background-position:-144px -96px}.button .ui-icon-print{background-position:-160px -96px}.button .ui-icon-trash{background-position:-176px -96px}.button .ui-icon-locked{background-position:-192px -96px}.button .ui-icon-unlocked{background-position:-208px -96px}.button .ui-icon-bookmark{background-position:-224px -96px}.button .ui-icon-tag{background-position:-240px -96px}.button .ui-icon-home{background-position:0 -112px}.button .ui-icon-flag{background-position:-16px -112px}.button .ui-icon-calendar{background-position:-32px -112px}.button .ui-icon-cart{background-position:-48px -112px}.button .ui-icon-pencil{background-position:-64px -112px}.button .ui-icon-clock{background-position:-80px -112px}.button .ui-icon-disk{background-position:-96px -112px}.button .ui-icon-calculator{background-position:-112px -112px}.button .ui-icon-zoomin{background-position:-128px -112px}.button .ui-icon-zoomout{background-position:-144px -112px}.button .ui-icon-search{background-position:-160px -112px}.button .ui-icon-wrench{background-position:-176px -112px}.button .ui-icon-gear{background-position:-192px -112px}.button .ui-icon-heart{background-position:-208px -112px}.button .ui-icon-star{background-position:-224px -112px}.button .ui-icon-link{background-position:-240px -112px}.button .ui-icon-cancel{background-position:0 -128px}.button .ui-icon-plus{background-position:-16px -128px}.button .ui-icon-plusthick{background-position:-32px -128px}.button .ui-icon-minus{background-position:-48px -128px}.button .ui-icon-minusthick{background-position:-64px -128px}.button .ui-icon-close{background-position:-80px -128px}.button .ui-icon-closethick{background-position:-96px -128px}.button .ui-icon-key{background-position:-112px -128px}.button .ui-icon-lightbulb{background-position:-128px -128px}.button .ui-icon-scissors{background-position:-144px -128px}.button .ui-icon-clipboard{background-position:-160px -128px}.button .ui-icon-copy{background-position:-176px -128px}.button .ui-icon-contact{background-position:-192px -128px}.button .ui-icon-image{background-position:-208px -128px}.button .ui-icon-video{background-position:-224px -128px}.button .ui-icon-script{background-position:-240px -128px}.button .ui-icon-alert{background-position:0 -144px}.button .ui-icon-info{background-position:-16px -144px}.button .ui-icon-notice{background-position:-32px -144px}.button .ui-icon-help{background-position:-48px -144px}.button .ui-icon-check{background-position:-64px -144px}.button .ui-icon-bullet{background-position:-80px -144px}.button .ui-icon-radio-on{background-position:-96px -144px}.button .ui-icon-radio-off{background-position:-112px -144px}.button .ui-icon-pin-w{background-position:-128px -144px}.button .ui-icon-pin-s{background-position:-144px -144px}.button .ui-icon-play{background-position:0 -160px}.button .ui-icon-pause{background-position:-16px -160px}.button .ui-icon-seek-next{background-position:-32px -160px}.button .ui-icon-seek-prev{background-position:-48px -160px}.button .ui-icon-seek-end{background-position:-64px -160px}.button .ui-icon-seek-start{background-position:-80px -160px}.button .ui-icon-seek-first{background-position:-80px -160px}.button .ui-icon-stop{background-position:-96px -160px}.button .ui-icon-eject{background-position:-112px -160px}.button .ui-icon-volume-off{background-position:-128px -160px}.button .ui-icon-volume-on{background-position:-144px -160px}.button .ui-icon-power{background-position:0 -176px}.button .ui-icon-signal-diag{background-position:-16px -176px}.button .ui-icon-signal{background-position:-32px -176px}.button .ui-icon-battery-0{background-position:-48px -176px}.button .ui-icon-battery-1{background-position:-64px -176px}.button .ui-icon-battery-2{background-position:-80px -176px}.button .ui-icon-battery-3{background-position:-96px -176px}.button .ui-icon-circle-plus{background-position:0 -192px}.button .ui-icon-circle-minus{background-position:-16px -192px}.button .ui-icon-circle-close{background-position:-32px -192px}.button .ui-icon-circle-triangle-e{background-position:-48px -192px}.button .ui-icon-circle-triangle-s{background-position:-64px -192px}.button .ui-icon-circle-triangle-w{background-position:-80px -192px}.button .ui-icon-circle-triangle-n{background-position:-96px -192px}.button .ui-icon-circle-arrow-e{background-position:-112px -192px}.button .ui-icon-circle-arrow-s{background-position:-128px -192px}.button .ui-icon-circle-arrow-w{background-position:-144px -192px}.button .ui-icon-circle-arrow-n{background-position:-160px -192px}.button .ui-icon-circle-zoomin{background-position:-176px -192px}.button .ui-icon-circle-zoomout{background-position:-192px -192px}.button .ui-icon-circle-check{background-position:-208px -192px}.button .ui-icon-circlesmall-plus{background-position:0 -208px}.button .ui-icon-circlesmall-minus{background-position:-16px -208px}.button .ui-icon-circlesmall-close{background-position:-32px -208px}.button .ui-icon-squaresmall-plus{background-position:-48px -208px}.button .ui-icon-squaresmall-minus{background-position:-64px -208px}.button .ui-icon-squaresmall-close{background-position:-80px -208px}.button .ui-icon-grip-dotted-vertical{background-position:0 -224px}.button .ui-icon-grip-dotted-horizontal{background-position:-16px -224px}.button .ui-icon-grip-solid-vertical{background-position:-32px -224px}.button .ui-icon-grip-solid-horizontal{background-position:-48px -224px}.button .ui-icon-gripsmall-diagonal-se{background-position:-64px -224px}.button .ui-icon-grip-diagonal-se{background-position:-80px -224px}.button .ui-corner-all,.button .ui-corner-top,.button .ui-corner-left,.button .ui-corner-tl{border-top-left-radius:4px}.button .ui-corner-all,.button .ui-corner-top,.button .ui-corner-right,.button .ui-corner-tr{border-top-right-radius:4px}.button .ui-corner-all,.button .ui-corner-bottom,.button .ui-corner-left,.button .ui-corner-bl{border-bottom-left-radius:4px}.button .ui-corner-all,.button .ui-corner-bottom,.button .ui-corner-right,.button .ui-corner-br{border-bottom-right-radius:4px}.button .ui-widget-overlay{background:#aaa url("images/ui-bg_flat_75_aaaaaa_40x100.png") 50% 50% repeat-x;opacity:.3;filter:Alpha(Opacity=30)}.button .ui-widget-shadow{margin:5px 0 0 5px;padding:0;background:#999 url("images/ui-bg_flat_55_999999_40x100.png") 50% 50% repeat-x;opacity:.45;filter:Alpha(Opacity=45);border-radius:5px}.theme_dialog .ui-widget{font-family:Verdana,Arial,sans-serif;font-size:1.1em}.theme_dialog .ui-widget .ui-widget{font-size:1em}.theme_dialog .ui-widget input,.theme_dialog .ui-widget select,.theme_dialog .ui-widget textarea,.theme_dialog .ui-widget button{font-family:Verdana,Arial,sans-serif;font-size:1em}.theme_dialog .ui-widget-content{border:1px solid #eee;background:#fcfdfd url("images/ui-bg_inset-hard_100_fcfdfd_1x100.png") 50% bottom repeat-x;color:#222}.theme_dialog .ui-widget-content a{color:#222}.theme_dialog .ui-widget-header{border:1px solid #4297d7;background:#2191c0 url("images/ui-bg_gloss-wave_75_2191c0_500x100.png") 50% 50% repeat-x;color:#eaf5f7;font-weight:bold}.theme_dialog .ui-widget-header a{color:#eaf5f7}.theme_dialog .ui-state-default,.theme_dialog .ui-widget-content .ui-state-default,.theme_dialog .ui-widget-header .ui-state-default{border:1px solid #77d5f7;background:#0078ae url("images/ui-bg_glass_45_0078ae_1x400.png") 50% 50% repeat-x;font-weight:normal;color:#fff}.theme_dialog .ui-state-default a,.theme_dialog .ui-state-default a:link,.theme_dialog .ui-state-default a:visited{color:#fff;text-decoration:none}.theme_dialog .ui-state-hover,.theme_dialog .ui-widget-content .ui-state-hover,.theme_dialog .ui-widget-header .ui-state-hover,.theme_dialog .ui-state-focus,.theme_dialog .ui-widget-content .ui-state-focus,.theme_dialog .ui-widget-header .ui-state-focus{border:1px solid #448dae;background:#79c9ec url("images/ui-bg_glass_75_79c9ec_1x400.png") 50% 50% repeat-x;font-weight:normal;color:#026890}.theme_dialog .ui-state-hover a,.theme_dialog .ui-state-hover a:hover,.theme_dialog .ui-state-hover a:link,.theme_dialog .ui-state-hover a:visited,.theme_dialog .ui-state-focus a,.theme_dialog .ui-state-focus a:hover,.theme_dialog .ui-state-focus a:link,.theme_dialog .ui-state-focus a:visited{color:#026890;text-decoration:none}.theme_dialog .ui-state-active,.theme_dialog .ui-widget-content .ui-state-active,.theme_dialog .ui-widget-header .ui-state-active{border:1px solid #acdd4a;background:#6eac2c url("images/ui-bg_gloss-wave_50_6eac2c_500x100.png") 50% 50% repeat-x;font-weight:normal;color:#fff}.theme_dialog .ui-state-active a,.theme_dialog .ui-state-active a:link,.theme_dialog .ui-state-active a:visited{color:#fff;text-decoration:none}.theme_dialog .ui-state-highlight,.theme_dialog .ui-widget-content .ui-state-highlight,.theme_dialog .ui-widget-header .ui-state-highlight{border:1px solid #fcd113;background:#f8da4e url("images/ui-bg_glass_55_f8da4e_1x400.png") 50% 50% repeat-x;color:#915608}.theme_dialog .ui-state-highlight a,.theme_dialog .ui-widget-content .ui-state-highlight a,.theme_dialog .ui-widget-header .ui-state-highlight a{color:#915608}.theme_dialog .ui-state-error,.theme_dialog .ui-widget-content .ui-state-error,.theme_dialog .ui-widget-header .ui-state-error{border:1px solid #cd0a0a;background:#e14f1c url("images/ui-bg_gloss-wave_45_e14f1c_500x100.png") 50% top repeat-x;color:#fff}.theme_dialog .ui-state-error a,.theme_dialog .ui-widget-content .ui-state-error a,.theme_dialog .ui-widget-header .ui-state-error a{color:#fff}.theme_dialog .ui-state-error-text,.theme_dialog .ui-widget-content .ui-state-error-text,.theme_dialog .ui-widget-header .ui-state-error-text{color:#fff}.theme_dialog .ui-priority-primary,.theme_dialog .ui-widget-content .ui-priority-primary,.theme_dialog .ui-widget-header .ui-priority-primary{font-weight:bold}.theme_dialog .ui-priority-secondary,.theme_dialog .ui-widget-content .ui-priority-secondary,.theme_dialog .ui-widget-header .ui-priority-secondary{opacity:.7;filter:Alpha(Opacity=70);font-weight:normal}.theme_dialog .ui-state-disabled,.theme_dialog .ui-widget-content .ui-state-disabled,.theme_dialog .ui-widget-header .ui-state-disabled{opacity:.35;filter:Alpha(Opacity=35);background-image:none}.theme_dialog .ui-state-disabled .ui-icon{filter:Alpha(Opacity=35)}.theme_dialog .ui-icon{width:16px;height:16px}.theme_dialog .ui-icon,.theme_dialog .ui-widget-content .ui-icon{background-image:url("images/ui-icons_0078ae_256x240.png")}.theme_dialog .ui-widget-header .ui-icon{background-image:url("images/ui-icons_d8e7f3_256x240.png")}.theme_dialog .ui-state-default .ui-icon{background-image:url("images/ui-icons_e0fdff_256x240.png")}.theme_dialog .ui-state-hover .ui-icon,.theme_dialog .ui-state-focus .ui-icon{background-image:url("images/ui-icons_056b93_256x240.png")}.theme_dialog .ui-state-active .ui-icon{background-image:url("images/ui-icons_f5e175_256x240.png")}.theme_dialog .ui-state-highlight .ui-icon{background-image:url("images/ui-icons_f7a50d_256x240.png")}.theme_dialog .ui-state-error .ui-icon,.theme_dialog .ui-state-error-text .ui-icon{background-image:url("images/ui-icons_fcd113_256x240.png")}.theme_dialog .ui-icon-blank{background-position:16px 16px}.theme_dialog .ui-icon-carat-1-n{background-position:0 0}.theme_dialog .ui-icon-carat-1-ne{background-position:-16px 0}.theme_dialog .ui-icon-carat-1-e{background-position:-32px 0}.theme_dialog .ui-icon-carat-1-se{background-position:-48px 0}.theme_dialog .ui-icon-carat-1-s{background-position:-64px 0}.theme_dialog .ui-icon-carat-1-sw{background-position:-80px 0}.theme_dialog .ui-icon-carat-1-w{background-position:-96px 0}.theme_dialog .ui-icon-carat-1-nw{background-position:-112px 0}.theme_dialog .ui-icon-carat-2-n-s{background-position:-128px 0}.theme_dialog .ui-icon-carat-2-e-w{background-position:-144px 0}.theme_dialog .ui-icon-triangle-1-n{background-position:0 -16px}.theme_dialog .ui-icon-triangle-1-ne{background-position:-16px -16px}.theme_dialog .ui-icon-triangle-1-e{background-position:-32px -16px}.theme_dialog .ui-icon-triangle-1-se{background-position:-48px -16px}.theme_dialog .ui-icon-triangle-1-s{background-position:-64px -16px}.theme_dialog .ui-icon-triangle-1-sw{background-position:-80px -16px}.theme_dialog .ui-icon-triangle-1-w{background-position:-96px -16px}.theme_dialog .ui-icon-triangle-1-nw{background-position:-112px -16px}.theme_dialog .ui-icon-triangle-2-n-s{background-position:-128px -16px}.theme_dialog .ui-icon-triangle-2-e-w{background-position:-144px -16px}.theme_dialog .ui-icon-arrow-1-n{background-position:0 -32px}.theme_dialog .ui-icon-arrow-1-ne{background-position:-16px -32px}.theme_dialog .ui-icon-arrow-1-e{background-position:-32px -32px}.theme_dialog .ui-icon-arrow-1-se{background-position:-48px -32px}.theme_dialog .ui-icon-arrow-1-s{background-position:-64px -32px}.theme_dialog .ui-icon-arrow-1-sw{background-position:-80px -32px}.theme_dialog .ui-icon-arrow-1-w{background-position:-96px -32px}.theme_dialog .ui-icon-arrow-1-nw{background-position:-112px -32px}.theme_dialog .ui-icon-arrow-2-n-s{background-position:-128px -32px}.theme_dialog .ui-icon-arrow-2-ne-sw{background-position:-144px -32px}.theme_dialog .ui-icon-arrow-2-e-w{background-position:-160px -32px}.theme_dialog .ui-icon-arrow-2-se-nw{background-position:-176px -32px}.theme_dialog .ui-icon-arrowstop-1-n{background-position:-192px -32px}.theme_dialog .ui-icon-arrowstop-1-e{background-position:-208px -32px}.theme_dialog .ui-icon-arrowstop-1-s{background-position:-224px -32px}.theme_dialog .ui-icon-arrowstop-1-w{background-position:-240px -32px}.theme_dialog .ui-icon-arrowthick-1-n{background-position:0 -48px}.theme_dialog .ui-icon-arrowthick-1-ne{background-position:-16px -48px}.theme_dialog .ui-icon-arrowthick-1-e{background-position:-32px -48px}.theme_dialog .ui-icon-arrowthick-1-se{background-position:-48px -48px}.theme_dialog .ui-icon-arrowthick-1-s{background-position:-64px -48px}.theme_dialog .ui-icon-arrowthick-1-sw{background-position:-80px -48px}.theme_dialog .ui-icon-arrowthick-1-w{background-position:-96px -48px}.theme_dialog .ui-icon-arrowthick-1-nw{background-position:-112px -48px}.theme_dialog .ui-icon-arrowthick-2-n-s{background-position:-128px -48px}.theme_dialog .ui-icon-arrowthick-2-ne-sw{background-position:-144px -48px}.theme_dialog .ui-icon-arrowthick-2-e-w{background-position:-160px -48px}.theme_dialog .ui-icon-arrowthick-2-se-nw{background-position:-176px -48px}.theme_dialog .ui-icon-arrowthickstop-1-n{background-position:-192px -48px}.theme_dialog .ui-icon-arrowthickstop-1-e{background-position:-208px -48px}.theme_dialog .ui-icon-arrowthickstop-1-s{background-position:-224px -48px}.theme_dialog .ui-icon-arrowthickstop-1-w{background-position:-240px -48px}.theme_dialog .ui-icon-arrowreturnthick-1-w{background-position:0 -64px}.theme_dialog .ui-icon-arrowreturnthick-1-n{background-position:-16px -64px}.theme_dialog .ui-icon-arrowreturnthick-1-e{background-position:-32px -64px}.theme_dialog .ui-icon-arrowreturnthick-1-s{background-position:-48px -64px}.theme_dialog .ui-icon-arrowreturn-1-w{background-position:-64px -64px}.theme_dialog .ui-icon-arrowreturn-1-n{background-position:-80px -64px}.theme_dialog .ui-icon-arrowreturn-1-e{background-position:-96px -64px}.theme_dialog .ui-icon-arrowreturn-1-s{background-position:-112px -64px}.theme_dialog .ui-icon-arrowrefresh-1-w{background-position:-128px -64px}.theme_dialog .ui-icon-arrowrefresh-1-n{background-position:-144px -64px}.theme_dialog .ui-icon-arrowrefresh-1-e{background-position:-160px -64px}.theme_dialog .ui-icon-arrowrefresh-1-s{background-position:-176px -64px}.theme_dialog .ui-icon-arrow-4{background-position:0 -80px}.theme_dialog .ui-icon-arrow-4-diag{background-position:-16px -80px}.theme_dialog .ui-icon-extlink{background-position:-32px -80px}.theme_dialog .ui-icon-newwin{background-position:-48px -80px}.theme_dialog .ui-icon-refresh{background-position:-64px -80px}.theme_dialog .ui-icon-shuffle{background-position:-80px -80px}.theme_dialog .ui-icon-transfer-e-w{background-position:-96px -80px}.theme_dialog .ui-icon-transferthick-e-w{background-position:-112px -80px}.theme_dialog .ui-icon-folder-collapsed{background-position:0 -96px}.theme_dialog .ui-icon-folder-open{background-position:-16px -96px}.theme_dialog .ui-icon-document{background-position:-32px -96px}.theme_dialog .ui-icon-document-b{background-position:-48px -96px}.theme_dialog .ui-icon-note{background-position:-64px -96px}.theme_dialog .ui-icon-mail-closed{background-position:-80px -96px}.theme_dialog .ui-icon-mail-open{background-position:-96px -96px}.theme_dialog .ui-icon-suitcase{background-position:-112px -96px}.theme_dialog .ui-icon-comment{background-position:-128px -96px}.theme_dialog .ui-icon-person{background-position:-144px -96px}.theme_dialog .ui-icon-print{background-position:-160px -96px}.theme_dialog .ui-icon-trash{background-position:-176px -96px}.theme_dialog .ui-icon-locked{background-position:-192px -96px}.theme_dialog .ui-icon-unlocked{background-position:-208px -96px}.theme_dialog .ui-icon-bookmark{background-position:-224px -96px}.theme_dialog .ui-icon-tag{background-position:-240px -96px}.theme_dialog .ui-icon-home{background-position:0 -112px}.theme_dialog .ui-icon-flag{background-position:-16px -112px}.theme_dialog .ui-icon-calendar{background-position:-32px -112px}.theme_dialog .ui-icon-cart{background-position:-48px -112px}.theme_dialog .ui-icon-pencil{background-position:-64px -112px}.theme_dialog .ui-icon-clock{background-position:-80px -112px}.theme_dialog .ui-icon-disk{background-position:-96px -112px}.theme_dialog .ui-icon-calculator{background-position:-112px -112px}.theme_dialog .ui-icon-zoomin{background-position:-128px -112px}.theme_dialog .ui-icon-zoomout{background-position:-144px -112px}.theme_dialog .ui-icon-search{background-position:-160px -112px}.theme_dialog .ui-icon-wrench{background-position:-176px -112px}.theme_dialog .ui-icon-gear{background-position:-192px -112px}.theme_dialog .ui-icon-heart{background-position:-208px -112px}.theme_dialog .ui-icon-star{background-position:-224px -112px}.theme_dialog .ui-icon-link{background-position:-240px -112px}.theme_dialog .ui-icon-cancel{background-position:0 -128px}.theme_dialog .ui-icon-plus{background-position:-16px -128px}.theme_dialog .ui-icon-plusthick{background-position:-32px -128px}.theme_dialog .ui-icon-minus{background-position:-48px -128px}.theme_dialog .ui-icon-minusthick{background-position:-64px -128px}.theme_dialog .ui-icon-close{background-position:-80px -128px}.theme_dialog .ui-icon-closethick{background-position:-96px -128px}.theme_dialog .ui-icon-key{background-position:-112px -128px}.theme_dialog .ui-icon-lightbulb{background-position:-128px -128px}.theme_dialog .ui-icon-scissors{background-position:-144px -128px}.theme_dialog .ui-icon-clipboard{background-position:-160px -128px}.theme_dialog .ui-icon-copy{background-position:-176px -128px}.theme_dialog .ui-icon-contact{background-position:-192px -128px}.theme_dialog .ui-icon-image{background-position:-208px -128px}.theme_dialog .ui-icon-video{background-position:-224px -128px}.theme_dialog .ui-icon-script{background-position:-240px -128px}.theme_dialog .ui-icon-alert{background-position:0 -144px}.theme_dialog .ui-icon-info{background-position:-16px -144px}.theme_dialog .ui-icon-notice{background-position:-32px -144px}.theme_dialog .ui-icon-help{background-position:-48px -144px}.theme_dialog .ui-icon-check{background-position:-64px -144px}.theme_dialog .ui-icon-bullet{background-position:-80px -144px}.theme_dialog .ui-icon-radio-on{background-position:-96px -144px}.theme_dialog .ui-icon-radio-off{background-position:-112px -144px}.theme_dialog .ui-icon-pin-w{background-position:-128px -144px}.theme_dialog .ui-icon-pin-s{background-position:-144px -144px}.theme_dialog .ui-icon-play{background-position:0 -160px}.theme_dialog .ui-icon-pause{background-position:-16px -160px}.theme_dialog .ui-icon-seek-next{background-position:-32px -160px}.theme_dialog .ui-icon-seek-prev{background-position:-48px -160px}.theme_dialog .ui-icon-seek-end{background-position:-64px -160px}.theme_dialog .ui-icon-seek-start{background-position:-80px -160px}.theme_dialog .ui-icon-seek-first{background-position:-80px -160px}.theme_dialog .ui-icon-stop{background-position:-96px -160px}.theme_dialog .ui-icon-eject{background-position:-112px -160px}.theme_dialog .ui-icon-volume-off{background-position:-128px -160px}.theme_dialog .ui-icon-volume-on{background-position:-144px -160px}.theme_dialog .ui-icon-power{background-position:0 -176px}.theme_dialog .ui-icon-signal-diag{background-position:-16px -176px}.theme_dialog .ui-icon-signal{background-position:-32px -176px}.theme_dialog .ui-icon-battery-0{background-position:-48px -176px}.theme_dialog .ui-icon-battery-1{background-position:-64px -176px}.theme_dialog .ui-icon-battery-2{background-position:-80px -176px}.theme_dialog .ui-icon-battery-3{background-position:-96px -176px}.theme_dialog .ui-icon-circle-plus{background-position:0 -192px}.theme_dialog .ui-icon-circle-minus{background-position:-16px -192px}.theme_dialog .ui-icon-circle-close{background-position:-32px -192px}.theme_dialog .ui-icon-circle-triangle-e{background-position:-48px -192px}.theme_dialog .ui-icon-circle-triangle-s{background-position:-64px -192px}.theme_dialog .ui-icon-circle-triangle-w{background-position:-80px -192px}.theme_dialog .ui-icon-circle-triangle-n{background-position:-96px -192px}.theme_dialog .ui-icon-circle-arrow-e{background-position:-112px -192px}.theme_dialog .ui-icon-circle-arrow-s{background-position:-128px -192px}.theme_dialog .ui-icon-circle-arrow-w{background-position:-144px -192px}.theme_dialog .ui-icon-circle-arrow-n{background-position:-160px -192px}.theme_dialog .ui-icon-circle-zoomin{background-position:-176px -192px}.theme_dialog .ui-icon-circle-zoomout{background-position:-192px -192px}.theme_dialog .ui-icon-circle-check{background-position:-208px -192px}.theme_dialog .ui-icon-circlesmall-plus{background-position:0 -208px}.theme_dialog .ui-icon-circlesmall-minus{background-position:-16px -208px}.theme_dialog .ui-icon-circlesmall-close{background-position:-32px -208px}.theme_dialog .ui-icon-squaresmall-plus{background-position:-48px -208px}.theme_dialog .ui-icon-squaresmall-minus{background-position:-64px -208px}.theme_dialog .ui-icon-squaresmall-close{background-position:-80px -208px}.theme_dialog .ui-icon-grip-dotted-vertical{background-position:0 -224px}.theme_dialog .ui-icon-grip-dotted-horizontal{background-position:-16px -224px}.theme_dialog .ui-icon-grip-solid-vertical{background-position:-32px -224px}.theme_dialog .ui-icon-grip-solid-horizontal{background-position:-48px -224px}.theme_dialog .ui-icon-gripsmall-diagonal-se{background-position:-64px -224px}.theme_dialog .ui-icon-grip-diagonal-se{background-position:-80px -224px}.theme_dialog .ui-corner-all,.theme_dialog .ui-corner-top,.theme_dialog .ui-corner-left,.theme_dialog .ui-corner-tl{border-top-left-radius:5px}.theme_dialog .ui-corner-all,.theme_dialog .ui-corner-top,.theme_dialog .ui-corner-right,.theme_dialog .ui-corner-tr{border-top-right-radius:5px}.theme_dialog .ui-corner-all,.theme_dialog .ui-corner-bottom,.theme_dialog .ui-corner-left,.theme_dialog .ui-corner-bl{border-bottom-left-radius:5px}.theme_dialog .ui-corner-all,.theme_dialog .ui-corner-bottom,.theme_dialog .ui-corner-right,.theme_dialog .ui-corner-br{border-bottom-right-radius:5px}.theme_dialog .ui-widget-overlay{background:#aaa url("images/ui-bg_flat_75_aaaaaa_40x100.png") 50% 50% repeat-x;opacity:.3;filter:Alpha(Opacity=30)}.theme_dialog .ui-widget-shadow{margin:5px 0 0 5px;padding:0;background:#999 url("images/ui-bg_flat_55_999999_40x100.png") 50% 50% repeat-x;opacity:.45;filter:Alpha(Opacity=45);border-radius:5px}a.button{margin-left:.5em}.tiles .pure-g{max-width:1180px}#vimeo-dialog .player{margin-bottom:2em}button.button{background:transparent;border:1px solid #63acdf;font-family:"Tungsten A","Tungsten B";color:#63acdf;font-size:1.6em;padding:.1em 1em;margin:.2em;min-width:5.5em}button.button[disabled]{opacity:.3}button.button.black{border:1px solid #444;background:#444;color:#fff}button.button.gray{border:1px solid #ddd;background:#ddd;color:#444}button.button.small{font-size:1em}.template-techspec .main{margin-top:0}.template-casestudies .pure-u-1 p,.template-casestudies .pure-u-1 h3{margin-left:0}.fullwidth{width:100%;margin:0 auto}.title.black hr{background-color:#000;color:#000}.title.black h1{color:#444}.title.white hr{background-color:#fff;color:#fff}.title.white h1{color:#fff}.theme_dialog #softwareinfo{border:0}.theme_dialog .ui-dialog .ui-dialog-buttonpane{border:0}.theme_dialog .ui-dialog-titlebar{display:none}.theme_dialog .ui-dialog,.theme_dialog .ui-widget button{font-family:Lato}.theme_dialog #softwareinfo h2{text-align:left}.ui-widget-overlay{background:#000;opacity:.5}.theme_dialog .ui-corner-all,.theme_dialog .ui-corner-bottom,.theme_dialog .ui-corner-right,.theme_dialog .ui-corner-br{border-bottom-right-radius:0}.theme_dialog .ui-corner-all,.theme_dialog .ui-corner-bottom,.theme_dialog .ui-corner-left,.theme_dialog .ui-corner-bl{border-bottom-left-radius:0}.theme_dialog .ui-corner-all,.theme_dialog .ui-corner-top,.theme_dialog .ui-corner-right,.theme_dialog .ui-corner-tr{border-top-right-radius:0}.theme_dialog .ui-corner-all,.theme_dialog .ui-corner-top,.theme_dialog .ui-corner-left,.theme_dialog .ui-corner-tl{border-top-left-radius:0}.content-tiles .tiles .name{padding:0 .5em}#dialogbox{overflow:hidden}img.image{opacity:0}img,.fadein{opacity:0}img.nofade{opacity:inherit}.pure-table{font-size:11px;width:100%;border:1px solid #343e44;font-family:"Tungsten A","Tungsten B";font-weight:300}.pure-table td,.pure-table th{border-left:none;border-bottom:1px solid #343e44;font-size:2em;padding:0}.pure-table thead{height:3.5em;background:#343e44 none repeat scroll 0% 0%;color:#fff;text-align:left;vertical-align:bottom}.pure-table thead td{padding-bottom:.2em}.pure-table button{font-size:1em;background:#343e44;color:#fff;font-weight:300}.pure-table td:first-child,.pure-table th:first-child{padding-left:.5em}.pure-table td:last-child,.pure-table th:last-child{padding-right:.5em}.pure-table .ui-button{margin-bottom:.2em;margin-top:.2em;margin-right:0;min-width:5em}.zebra tbody tr:nth-child(even){background-color:#e0e0e0}@media print{.cookies{display:none !important}img,.fadein{opacity:inherit}}.title h1{text-align:center}.case-study>.main>.title>h1{letter-spacing:.3em;font-weight:300;color:#000;position:relative;left:4px;font-family:Lato;font-size:2em !important;margin-bottom:.8em}.case-study>.main>.title>hr{display:none}#panel2 .event-title .title h1,.title h1{color:#000;font-family:"Lato";font-weight:100;line-height:1.1em}table .title h1{color:#fff;font-family:"Tungsten A","Tungsten B";font-weight:500}.event-title .title hr{display:none}@media screen and (max-width:35.438em){.case-study>.main>.title>h1{font-size:1em !important}}.slideup,.fadeinslideup,.fadeinslideupkeyboard{position:relative}.fadein,.fadeinslideup,.fadeinslideupkeyboard{opacity:0}.register19 input[type="text"],.register19 input[type="password"],.register19 input[type="email"],.register19 select,.register19 textarea{font-size:1.2em;font-family:"Lato","Tungsten B";border:1px solid #aaa;background:#fff none repeat scroll 0% 0%;color:#000;margin:.4em auto;padding:.45em .5em .5em .5em;width:90%;display:block;font-weight:300}.register19 select{position:relative;width:calc(90% + 22px)}.register19 select.initial{color:#aaa}.register19 select option{color:#000}.register19 button.button,button.button19{background:transparent;border:1px solid #000;font-family:"Lato";color:#000;font-size:inherit;padding:.45em 1.5em .4em;margin:.2em;min-width:5.5em;letter-spacing:1px;font-weight:600}.register19 p{color:#000}form.register19 .ownership .button{border:0;background:none;width:35%;max-width:6em}form.register19 a{color:#000;text-decoration:none}form.register19 a:visited{color:#000}form.register19 a:hover{color:#999}.register19 textarea.one-column,.register19 input.one-column{width:95%}.button.button20{background:none;border:1px solid #000;font-family:"Lato";color:#000;font-size:12px;padding:1.2em 1.5em 1em;margin:.3em;min-width:18.5em;letter-spacing:.25em;font-weight:400}@media screen and (max-width:35.438em){.register19 textarea.one-column,.register19 input.one-column{width:90%}}.title hr{display:none}table .title h1 hr{display:block}#footer.fixed{bottom:0;position:fixed;width:100vw}.checkbox19{display:block;position:relative;padding-left:35px;margin-bottom:1.3em;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;padding-top:.2em}.checkbox19 input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.checkmark{position:absolute;top:0;left:0;height:25px;width:25px;background-color:#fff;border:1px solid #aaa}.checkbox19 input:checked~.checkmark{background-color:#66bb6a}.checkmark:after{content:"";position:absolute;display:none}.checkbox19 input:checked~.checkmark:after{display:block}.checkbox19 .checkmark:after{left:9px;top:5px;width:5px;height:10px;border:solid #fff;border-width:0 3px 3px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.center{text-align:center}.hidden{display:none}#panel2{margin-top:0 !important}button.button.pix{border:1px solid #872319;background-color:#872319;font-size:1.2em;letter-spacing:.2em}button.button.light{border:1px solid #bbb;color:#bbb}.language-english,.language-japanese,.language-korean,.language-portuguese,.language-spanish{display:none}body.language0 .language-english,body.language5 .language-japanese,body.language8 .language-korean,body.language9 .language-portuguese,body.language6 .language-spanish{display:inline-block}body.group16 .group16-hide{display:none}.no-select{user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}.lato-all-caps div[data-char=A]:first-child{margin-left:.03em}.lato-all-caps div[data-char=A]+div[data-char=T]{margin-left:-.06em}.lato-all-caps div[data-char=A]+div[data-char=V]{margin-left:-.1em}.lato-all-caps div[data-char=A]+div[data-char=W]{margin-left:-.1em}.lato-all-caps div[data-char=C]+div[data-char=T]{margin-left:.03em}.lato-all-caps div[data-char=E]+div[data-char=R]{margin-left:-.03em}.lato-all-caps div[data-char=E]+div[data-char=T]{margin-left:.04em}.lato-all-caps div[data-char=E]+div[data-char=X]{margin-left:.03em}.lato-all-caps div[data-char=H]+div[data-char=E]{margin-left:-.03em}.lato-all-caps div[data-char=I]:first-child{margin-left:-.06em}.lato-all-caps div[data-char=I]+div[data-char=M]{margin-left:-.05em}.lato-all-caps div[data-char=I]+div[data-char=X]{margin-left:.02em}.lato-all-caps div[data-char=L]+div[data-char=A]{margin-left:.03em}.lato-all-caps div[data-char=L]+div[data-char=S]{margin-left:.03em}.lato-all-caps div[data-char=M]+div[data-char=E]{margin-left:-.06em}.lato-all-caps div[data-char=N]+div[data-char=I]{margin-left:-.05em}.lato-all-caps div[data-char=N]+div[data-char=T]{margin-left:-.02em}.lato-all-caps div[data-char=R]+div[data-char=A]{margin-left:.03em}.lato-all-caps div[data-char=T]+div[data-char=A]{margin-left:-.06em}.lato-all-caps div[data-char=T]+div[data-char=E]{margin-left:-.01em}.lato-all-caps div[data-char=T]+div[data-char="."]{margin-left:-.1em}.lato-all-caps div[data-char=U]+div[data-char=D]{margin-left:-.03em}.lato-all-caps div[data-char=U]+div[data-char=R]{margin-left:-.03em}.lato-all-caps div[data-char=W]+div[data-char=A]{margin-left:-.1em}.lato-all-caps div[data-char=X]+div[data-char="."]{margin-left:.03em}.lato-all-caps div[data-char=Y]+div[data-char="."]{margin-left:-.1em}.lato-all-caps{line-height:.9em;font-weight:700;position:relative;letter-spacing:initial}body .mt2{margin-top:2em}body .mb0{margin-bottom:0 !important}body .mb1{margin-bottom:1em !important}body .mb2{margin-bottom:2em !important}</style></div>
<!--<div id="header"></div>-->
<div id="panel1"></div>
<div id="panel2"></div>
<div id="pin">
<div id="content"><div id="script-player"><!--<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>-->
<!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" integrity="sha512-aOG0c6nPNzGk+5zjwyJaoRUgCdOrfSDhmMID2u4+OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />-->
<script src="/assets/js/greensock/MorphSVGPlugin.min.js"></script>
<script src="https://www.youtube.com/iframe_api"></script>
<script src="https://player.vimeo.com/api/player.js"></script>
<script src="/assets/js/can-autoplay.3.0.2.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.15.0/alt/video-js-cdn.min.css" integrity="sha512-RU6FIpN8MZ6jrswHMYzP9t7QlAtDkpCJP6uqyHYm56iP6eEdYCDfMW2C42KtimtJ8DKa+iWJqjpeTyLyQjV61g==" crossorigin="anonymous" referrerpolicy="no-referrer">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/line-awesome/1.3.0/font-awesome-line-awesome/css/all.min.css" integrity="sha512-dC0G5HMA6hLr/E1TM623RN6qK+sL8sz5vB+Uc68J7cBon68bMfKcvbkg6OqlfGHo1nMmcCxO5AinnRTDhWbWsA==" crossorigin="anonymous" referrerpolicy="no-referrer">
<div id="playerTemplate" class="player">
<div class="close"><i class="fa fa-times"></i></div>
<div class="shuffle prev"><i class="fa fa-angle-left"></i></div>
<div class="shuffle next"><i class="fa fa-angle-right"></i></div>
<div class="label">
<div class="inner">
<div class="name"></div>
<div class="sub"></div>
<div class="description"></div>
</div>
</div>
<div class="frame">
<div class="loading"></div>
<div class="video"> </div>
<div class="poster"></div>
<div class="play">
<div class="loader">
<svg class="circular-loader" viewbox="25 25 50 50">
<circle class="loader-path" cx="50" cy="50" r="22" fill="none"></circle>
</svg>
</div>
<div class="arrow"></div>
<div class="pause"></div>
</div>
<div class="nav">
<div class="play">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewbox="0 0 16 20" style="enable-background:new 0 0 16 20;" xml:space="preserve">
<polyline class="playLRef" points="8,15 0.1,20 0.1,0 8,5 "></polyline>
<polygon class="playRRef" points="7.9,5 15.9,10 7.9,15 7.9,10 "></polygon>
<polyline class="playL" points="8,15 0.1,20 0.1,0 8,5 "></polyline>
<polygon class="playR" points="7.9,5 15.9,10 7.9,15 7.9,10 "></polygon>
<rect class="pauseL" x="0.5" y="1.6" width="2.5" height="16.8"></rect>
<rect class="pauseR" x="9.4" y="1.6" width="2.5" height="16.8"></rect>
</svg>
</div>
<div class="control volumeControls">
<div class="volume">
<div class="volume-bck">
<div class="slider-vertical"></div>
</div>
</div>
<div class="mute"></div>
</div>
<div class="seek">
<div class="bg"></div>
<div class="loaded"></div>
<div class="position"></div>
</div>
<div class="time"></div>
<div class="control subtitle"><i></i><ul></ul></div>
<div class="control fullscreen"></div>
<div class="thumbs">
<div class="thumb-frame">
<video width="100%" height="100%" preload="auto">
<source src="" type="video/mp4">
</source></video>
</div>
<div class="label"></div>
</div>
</div>
</div>
</div>
<script type="text/javascript">let player=(()=>{
let init=()=>{
$(()=>{
$template=$("#playerTemplate");
initResize();
//initAutoplay();
//initControls();
initEvents();
initMorphConvert();
});
},
$template,
isActive=false,
assets,
players=[],
youTubePlayers=[],
initResize=()=>{
$(window).resize(()=>{
var rect = $(".player .frame")[0].getBoundingClientRect();
$(".player .close").height(rect.top);
$("#playerTemplate > .label").height($(window).height() - rect.bottom);
}).resize();
},
initMorphConvert=()=>{
MorphSVGPlugin.convertToPath("polygon, rect, polyline, line");
},
createPlayer=(asset, target)=>{
var context,
autoplay=(target === undefined), //disable autoplay for inline player
controlTimer,
isControlsVisible=true,
initControls=()=>{
$(context).on("mousemove",()=>{
if(isControlsVisible){
clearTimeout(controlTimer);
controlTimer = setTimeout(hideControls, 3000);
}
else
{
showControls();
}
});
},
hideControls=()=>{
isControlsVisible=false;
$(".nav",context).animate({opacity : 0},750);
},
showControls=()=>{
isControlsVisible=true;
$(".nav",context).animate({opacity : 1},250);
},
preloadImages=(data)=>{
data.forEach(asset=>{
$("<img src=\"/?action=asset&id=" + asset.Guid + "\">");
});
},
attachHandlers=()=>{
$(".gallery .tile",context).click(tileClickHandler);
},
tileClickHandler=(e)=>{
createPlayer($(e.currentTarget).data().asset,context);
},
player,
createPlayer=(asset, target)=>{
if(target==undefined){
//single player instance. master template is context.
context=$template[0];
//iframe embedded viewer signalling
if(window.parent!=window && !dispatchEvent(asset)) return; //send play event to parent document player if this player is embedded (parent window is not this window). stop playing in this window if received (event cencelled). for playing video in parent window from embedded viewer.
}
else{
//inline player. possibly multiple instances. make copy of template in target element and keep separate context
context=$template.clone().removeAttr("id")[0];
$(target).replaceWith(context);
setPoster(asset.Guid);
}
resetControls();
//determin if video id is vimeo or yt
if(isNaN(asset.Var1.split(",")[0]))
createYTPlayer(asset.Var1);
else
createVimeoPlayer(asset.Var1);
players.push(player);
player.asset=asset;
updateLabels(asset);
logEvent(asset);
isActive=true;
},
playerTimer,
volumeLevel=60,
vimeoVolumeLevel = volumeLevel/100,
createYTPlayer=(id)=>{
$(".video",context).html("<div></div>").removeClass("vimeo").addClass("yt");
$(".nav",context).addClass("yt");
player = new YT.Player($(".video div",context)[0],{
videoId : id,
playerVars: {
'autoplay': autoplay ? 1 : 0,
'controls': 0,
"showinfo" : 0,
'rel' : 0,
'fs' : 0,
"modestbranding" : 1,
"playsinline" : 1,
"allowfullscreen" : 1
},
events : {
"onStateChange" : ytStateChange,
"onReady" : ()=>{
if(isMuted) player.mute();
onLoaded();
playerTimer = setInterval(ytTimeUpdate,100);
}
}
});
player.playerType="yt";
youTubePlayers.push(player);
bindControls();
showPlayer();
},
ytTimeUpdate=()=>{
var currentTime = !player.getCurrentTime ? 0.0 : player.getCurrentTime(),
duration = !player.getDuration ? 0.0 : player.getDuration(),
percent = currentTime / duration;
updatePosition(percent);
if(player.getPlayerState()==2)
$(".nav .play",context).removeClass("playing");
else
$(".nav .play",context).addClass("playing");
$(".nav .loaded",context).width((player.getVideoLoadedFraction() * 100) + "%");
updateTime(currentTime,duration);
},
ytStateChange=(e)=>{
if(e.data==0)
playNext();
},
createVimeoPlayer=(data)=>{
dataArray=data.split(",");
$(".video",context).html("<div></div>").removeClass("yt").addClass("vimeo");
$(".nav",context).removeClass("yt");
player = new Vimeo.Player($(".video div",context)[0], {
id : dataArray[0],
autoplay : autoplay,
controls : false,
transparent : false,
playsinline : true
});
player.playerType="vimeo";
player.on("timeupdate", vimeoTimeUpdate);
player.on("ended", vimeoEnded);
player.on("progress", vimeoProgress);
player.on("loaded", onLoaded);
player.on("play", hideLoading);
playerTimer = setInterval(vimeoStatusUpdate,100);
player.thumbs=dataArray[1];
if(isMuted){
player.setVolume(0);
}
else{
player.setVolume(vimeoVolumeLevel);
}
renderVimeoTextTracks();
initThumbs();
bindControls();
showPlayer();
},
setSubtitleLanguage=()=>{
let currentLang = getCookie("language");
$(".nav .subtitle li", context).removeClass("active");
if(getCookie("language")!=="en"){
player.enableTextTrack(getCookie("language"));
$(".nav .subtitle li[data-language=" + currentLang + "]",context).addClass("active");
}else{
player.disableTextTrack();
$(".nav .subtitle li[data-language='']",context).addClass("active");
}
},
renderVimeoTextTracks=()=>{
$(".nav",context).removeClass("subtitle");
$(".nav .subtitle ul",context).html("");
player.getTextTracks().then(data=>{
if(data.length>0){
$(".nav",context).addClass("subtitle");
//create 'None' language in text tracks list
// data.push({
data.unshift({
label: "NO SUBTITLES",
language: "",
mode : data.filter(e=>{return e.mode=="showing"}).length==0 ? "showing" : "none"
});
data.forEach(e=>{
$(".nav .subtitle ul",context).append(`<li data-language="${e.language}" class="${e.mode=="showing" ? `active` : ""}">${e.label}</li>`);
});
$(".nav .subtitle li",context).click(subtitleLanguageClickHandler);
//Remove English Auto generated text
if($('li[data-language="en-x-autogen"]').length !== 0){
var autoGen = $('li[data-language="en-x-autogen"]')[0].innerHTML.split(" ")[0];
$('li[data-language="en-x-autogen"]').html(autoGen);
}
$(".nav .subtitle",context).css("display", "block");
}else{
$(".nav .subtitle",context).css("display", "none");
}
setSubtitleLanguage();
});
},
subtitleClickHandler=e=>{
$(".nav .subtitle ul",context).toggle();
},
subtitleLanguageClickHandler=e=>{
if(e.currentTarget.dataset.language.length>0)
player.enableTextTrack(e.currentTarget.dataset.language);
else
player.disableTextTrack();
$(".nav .subtitle li", context).removeClass("active");
$(".nav .subtitle ul",context).toggle();
subtitleClickHandler();
$(e.currentTarget).addClass("active");
},
vimeoTimeUpdate=(e)=>{
updatePosition(e.percent);
// updateTime(e.duration - e.seconds);
updateTime(e.seconds, e.duration);
console.log(e);
},
vimeoStatusUpdate=()=>{
player.getPaused().then(paused=>{
if(paused){
$(context).removeClass("playing");
}
else{
hideLoading();
$(context).addClass("playing");
$(context).addClass("show");
}
});
},
vimeoEnded=()=>{
if(assets==undefined || asset.length <= 1){
vimeoRestart();
}else{
playNext();
}
},
vimeoProgress=e=>{
$(".nav .loaded",context).width((e.percent * 100) + "%");
},
vimeoRestart=()=>{
player.setCurrentTime(0);
resetControls();
showBigPlay();
},
updateLabels=(asset)=>{
$(".name",context).html(asset.Name?.toUpperCase());
$(".description",context).html(asset?.Content);
$(".sub",context).html(asset?.Var2);
$(window).resize();
},
updatePosition=(percent)=>{
$(".seek .position",context).width((percent * 100) + "%");
},
updateTime=(position,duration)=>{
if(position < 0) position = 0;
if(duration < 0) duration = 0;
$(".nav .time",context).text(getTimeText(position) + " / " + getTimeText(duration));
},
getTime=seconds=>{
return {
minutes : Math.floor(seconds / 60),
seconds : seconds % 60
};
},
getTimeText=seconds=>{
var time=getTime(seconds);
return time.minutes + ":" + Math.floor(time.seconds).toString().padStart(2,"0");
},
bigPlayTimer = 0,
playPauseMorph=()=>{
var tl = new TimelineMax();
var playR = $(".playR",context),
playL = $(".playL",context),
pauseR = $(".pauseR",context),
pauseL = $(".pauseL",context);
showBigPlay();
hideClickPlay();
tl
.to(playL, 0.5, {morphSVG:{shape: pauseL,shapeIndex:4},delay:0.5})
.to(playR, 0.5, {morphSVG:{shape:pauseR,shapeIndex:4},delay:0.5},0);
$(".play.bigPlay .arrow",context).show();
$(".play.bigPlay .pause",context).hide();
setTimeout(()=>{
hideBigPlay();
bigPlayTimer=1500;
}, bigPlayTimer);
},
pausePlayMorph=()=>{
var tl = new TimelineMax();
var playR = $(".playR",context),
playL = $(".playL",context),
pauseR = $(".pauseR",context),
pauseL = $(".pauseL",context);
playLRef= $(".playLRef",context);
playRRef= $(".playRRef",context);
showBigPlay();
tl
.to(playL, 0.5, {morphSVG:{shape: playLRef,shapeIndex:4}, delay:0.5})
.to(playR, 0.5, {morphSVG:{shape:playRRef,shapeIndex:4},delay:0.5},0);
$(".play.bigPlay .arrow",context).hide();
$(".play.bigPlay .pause",context).show();
setTimeout(()=>{
hideBigPlay();
}, 1500);
},
resetMorph=()=>{
var tl = new TimelineMax();
var playR = $(".playR"),
playL = $(".playL"),
pauseR = $(".pauseR"),
pauseL = $(".pauseL");
playLRef= $(".playLRef");
playRRef= $(".playRRef");
tl
.to(playL, 0.5, {morphSVG:{shape: playLRef,shapeIndex:4}, delay:0.5})
.to(playR, 0.5, {morphSVG:{shape:playRRef,shapeIndex:4},delay:0.5},0);
},
playPause=()=>{
$(".nav .subtitle ul",context).css("display", "none");
if(!autoplay){
stopAllVideos();
}
if(player.playerType=="vimeo"){
player.getPaused().then(paused=>{
if(paused){
player.play();
// hideBigPlay();
playPauseMorph();
$(".frame .poster",context).hide();
// clearPoster();
}
else{
player.pause();
// showBigPlay();
pausePlayMorph();
}
});
}
else{
if(player.getPlayerState() == 1){
player.pauseVideo();
$(context).removeClass("playing");
// showBigPlay();
pausePlayMorph();
}
else{
$(context).addClass("show");
$(context).addClass("playing");
$(".frame .poster",context).hide();
player.playVideo();
// hideBigPlay();
playPauseMorph()
}
}
},
stopAllVideos=()=>{
// Find all Vimeo iframes
var vimeoFrames = document.querySelectorAll(".video.vimeo");
// Loop through each YouTube iframe and create a player instance
if(youTubePlayers.length>=1){
youTubePlayers.forEach(function(p) {
p.pauseVideo();
})
}
if (vimeoFrames.length>=1){
// Loop through each Vimeo iframe and create a player instance
vimeoFrames.forEach(function(frame) {
var player = new Vimeo.Player(frame);
player.getPaused().then(paused=>{
if(!paused){
// Stop Vimeo playback
player.pause();
}
})
});
}
resetMorph();
},
addVolumeControl=()=>{
$( ".slider-vertical",context).slider({
orientation: "vertical",
range: "min",
min: 0,
max: 100,
value: 60,
slide: function(e, ui) {
// volumeLevel = ui.value/100;
volumeLevel = ui.value;
// player.setVolume(volumeLevel/100);
vimeoVolumeLevel = volumeLevel/100;
if(player.playerType=="vimeo"){
player.setVolume(vimeoVolumeLevel);
if(vimeoVolumeLevel == 0){
setMuted();
}else{
volumeUnmute();
}
}else{
player.setVolume(volumeLevel);
if(volumeLevel == 0){
setMuted();
}else{
volumeUnmute();
}
}
}
});
},
volumeUnmute=()=>{
if(player.playerType=="vimeo"){
player.getVolume().then(vol=>{
player.setVolume(vimeoVolumeLevel);
$(".nav .mute",context).removeClass("muted");
});
}
else{
player.unMute();
$(".nav .mute",context).removeClass("muted");
$(".player .nav.yt .ui-slider-vertical .ui-slider-range-min",context).height(volumeLevel + "%");
player.setVolume(volumeLevel);
}
},
volume=()=>{
$( ".volume" ,context).addClass("volumeSlider");
$(".nav .volumeControls" ,context).on("mouseout", function(){
hideVolume();
})
},
hideVolume=()=>{
$( ".volume" ,context ).removeClass("volumeSlider");
},
isMuted = false,
setMuted=()=>{
$(".nav .mute",context).addClass("muted");
$(".slider-vertical" ,context).slider({value: 0});
isMuted = true
},
clearMuted=()=>{
$(".nav .mute",context).removeClass("muted");
// $(".slider-vertical" ,context ).slider({value: volumeLevel*100});
$(".slider-vertical" ,context ).slider({value: volumeLevel});
isMuted = false;
},
mute=()=>{
if(player.playerType=="vimeo"){
player.getVolume().then(vol=>{
if(vol != 0){
player.setVolume(0);
setMuted();
}
else{
if(volumeLevel == 0){
vimeoVolumeLevel = 0.5;
volumeLevel = 50;
};
player.setVolume(vimeoVolumeLevel);
clearMuted();
}
});
}
else{
if(player.isMuted()){
if(volumeLevel == 0){
vimeoVolumeLevel = 0.5;
volumeLevel = 50;
};
player.unMute();
clearMuted();
}
else{
player.mute();
setMuted();
}
}
},
fullscreen=()=>{
target = $("iframe",context)[0];
switch(true){
case target.requestFullScreen != undefined:
target.requestFullScreen();
break;
case target.webkitRequestFullscreen != undefined:
target.webkitRequestFullscreen();
break;
case target.mozRequestFullScreen != undefined:
target.mozRequestFullScreen();
break;
case target.webkitRequestFullscreen != undefined:
target.webkitRequestFullscreen();
break;
case player.requestFullscreen != undefined:
player.requestFullscreen();
break;
}
hideBigPlay();
},
seek=(e)=>{
updateThumbs(e);
if(e.buttons==0 && e.which == 0) return;
rect = e.currentTarget.getBoundingClientRect();
percent = (e.clientX - rect.left) / rect.width;
if(player.playerType=="vimeo"){
player.getDuration().then(duration=>{
var seconds = Math.floor(duration * percent);
player.setCurrentTime(seconds);
updateTime(seconds,duration);
updatePosition(percent);
player.play();
playPauseMorph();
$(".frame .poster",context).hide();
});
}
else{
var duration = player.getDuration();
var seconds = duration * percent;
player.seekTo(seconds);
updateTime(seconds,duration);
}
},
thumbsVideo,
initThumbs=()=>{
if(player.thumbs==undefined) return;
thumbsVideo=$(".thumbs video",context)[0];
thumbsVideo.src="/asset/" + player.thumbs;
},
updateThumbs=e=>{
if(player.thumbs==undefined) return;
var seconds=thumbsVideo.duration * (e.originalEvent.offsetX / e.currentTarget.clientWidth);
thumbsVideo.currentTime = seconds;
if(seconds<0) seconds = 0;
$(".thumbs .label",context).text(getTimeText(seconds));
gsap.set($(".thumbs",context)[0], {x : e.originalEvent.offsetX});
$(".thumbs",context).show();
},
navMouseEnter=()=>{
$(".thumbs",context).show();
},
navMouseleave=()=>{
$(".thumbs",context).hide();
},
assertControls=()=>{
if(assets==undefined){
$(context).addClass("single");
}
},
bindControls=()=>{
unbindControls();
assertControls();
$(".nav .play",context).click(playPause);
$(".nav .volumeControls .mute",context).click(mute);
addVolumeControl();
$(".nav .volumeControls",context).on( "mouseover", (e)=> {
volume();
e.preventDefault();
});
$(".nav .fullscreen",context).click(fullscreen);
$(".close",context).click(closePlayer);
$(".seek",context).click(seek).on("mousemove",seek).on("touchmove",seek);
$(".next",context).click(playNext);
$(".prev",context).click(playPrevious);
$(".frame .play",context).click(bigPlayClickHandler);
$(".nav .subtitle",context).click(subtitleClickHandler);
// $(".frame .play").click(playPause);
if(player.thumbs!=undefined){
$(".seek",context).on("mouseenter", navMouseEnter);
$(".seek",context).on("mouseleave", navMouseleave);
}
},
unbindControls=()=>{
$(".nav .play, .nav .mute, .nav .fullscreen, .close, .seek, .next, .prev, .frame > .play, .nav .subtitle",context).off("click").off("mouseenter").off("mousemove").off("mouseleave").off("touchmove");
},
closePlayer=()=>{
if(player.playerType=="vimeo"){
player.pause();
}
else{
player.pauseVideo();
}
clearInterval(playerTimer);
hidePlayer();
hideBigPlay();
clearTimeout(playerTimer);
player.destroy();
isActive=false;
},
getNextAsset=()=>{
if(assets==undefined) return player.asset;
var index=assets.indexOf(player.asset);
if(index==(assets.length-1)) return assets[0];
return assets[index+1];
},
getPreviousAsset=()=>{
if(assets==undefined) return player.asset;
var index=assets.indexOf(player.asset);
if(index==0) return assets[assets.length-1];
return assets[index-1];
},
playNext=()=>{
clearInterval(playerTimer);
createPlayer(getNextAsset())
hideBigPlay();
},
playPrevious=()=>{
clearInterval(playerTimer);
createPlayer(getPreviousAsset());
hideBigPlay();
},
resetControls=()=>{
$(context).removeClass("show");
$(".seek .position, .nav .loaded",context).width(0);
$(context).removeClass("playing");
$(".nav .time",context).text("0:00 / 0:00");
$(".nav .mute",context).removeClass("muted");
$(".frame .loading",context).show();
$(".player .frame .poster",context).show();
},
onLoaded=()=>{
hideLoading();
//play if available
if(autoplay){
if(player.playerType=="vimeo"){
var playPromise = player.play();
if (playPromise !== undefined) {
playPromise.then((e) => {
// Auto-play started
playPauseMorph();
if(e?.result && isActive){
playPause();
}
}).catch((error) => {
// Auto-play was prevented
// Show a UI element to let the user manually start playback
// showBigPlay();
console.log('Auto-play was prevented')
showClickPlay();
// showBigPlay();
// setPoster(asset.Guid);
// pausePlayMorph();
});
}
}
else{
canAutoplay.video().then(e=>{
if(e.result && isActive){
$(context).addClass("show");
$(context).addClass("playing");
$(".frame .poster",context).hide();
player.playVideo();
hideBigPlay();
playPauseMorph();
$(".frame .loading",context).hide();
}else{
showBigPlay();
$(".frame .poster",context).show();
}
});
}
}
else
{
showBigPlay();
}
},
hideLoading=()=>{
$(".frame .loading",context).hide();
},
hideLoadingDelay=()=>{
setTimeout(hideLoading,1000);
},
showClickPlay=()=>{
$(".frame > .play",context).addClass("autoPlay");
hideLoading();
},
hideClickPlay=()=>{
$(".frame > .play",context).removeClass("autoPlay");
},
showBigPlay=()=>{
$(".frame > .play",context).addClass("bigPlay");
hideLoading();
},
hideBigPlay=()=>{
$(".frame > .play",context).removeClass("bigPlay");
},
bigPlayClickHandler=()=>{
// playPause();
$(".nav .subtitle ul",context).css("display", "none");
if(!autoplay){
stopAllVideos();
}
if(player.playerType=="vimeo"){
player.getPaused().then(paused=>{
if(paused){
player.play();
// hideBigPlay();
playPauseMorph();
$(".frame .poster",context).hide();
// clearPoster();
}
else{
player.pause();
// showBigPlay();
pausePlayMorph();
}
});
}
else{
if(player.getPlayerState() == 1){
player.pauseVideo();
$(context).removeClass("playing");
// showBigPlay();
pausePlayMorph();
}
else{
$(context).addClass("show");
$(context).addClass("playing");
// $(".frame .poster",context).hide();
player.playVideo();
// hideBigPlay();
playPauseMorph();
}
}
},
showPlayer=()=>{
if($(context).css("display")!="block"){
gsap.set(context, {opacity:0, duration: 0.7, display:"block"});
gsap.to(context, { opacity:1 });
}
//$(".player").css({opacity:0}).show().animate({opacity:1},500);
},
hidePlayer=()=>{
gsap.to(context, {opacity:0, duration: 0.7, onComplete: ()=>{ gsap.set(context, {display: "none"}); }});
//$(".player").animate({opacity:0},500,);
},
setPoster=guid=>{
$(".frame .poster",context).css("background-image","url(/asset/" + guid + ")").show();
}
clearPoster=()=>{
$(".frame .poster",context).hide();
}
;
createPlayer(asset,target);
},
// autoplay with url ?play parameter
initAutoplay=()=>{
play=$.getQueryParameters().play;
if(play!=undefined){
getName=n=>{
if(n==null || n==undefined) return "";
return n.replace(/:/g,"").replace(/'/g,"").replace(/\(/g,"").replace(/\)/g,"").replace(/-/g," ").replace(/\./g," ").replace(/,/g,"").replace(/!/g,"").replace(/&/g,"and").replace(/á/g,"a").replace(/à/g,"a").replace(/#/g,"").trim();
}
play=play.replace(/-/g," ");
//autoplay=false;
asset = assets.find(a=>getName(a.Name).toLowerCase()==play.toLowerCase());
if(asset!=undefined)
createPlayer(asset);
//$($(".gallery .tile").toArray().find(e=>$(e).data().asset.Name.toLowerCase()==play)).click();
}
},
// iframe events
initEvents=()=>{
window.document.addEventListener("player_play", e=>{
//received play event from child document in iframe
e.preventDefault(); //signal to embedded player that this player will play the video.
createPlayer(e.detail);
});
},
dispatchEvent = asset=>{
try{
return window.parent.document.dispatchEvent(new CustomEvent("player_play", { cancelable : true, detail : asset }));
}
catch(e){
return true;
}
},
//ga events
logEvent=(asset)=>{
gtag("event","Trailer", {
event_label : asset.Name
});
},
// inline player
createInlineElement=e=>{
if(Array.isArray(e)){
e.forEach(e=>{
initInlineVideoElement(e);
});
}
else{
initInlineVideoElement(e);
}
},
initInlineVideoElement=e=>{
//create asset
var asset={
Guid: e.parentElement.dataset.assetid,
Var1: e.dataset.var1,
};
createPlayer(asset,e);
}
;
init();
return {
createPlayer : (asset)=>{createPlayer(asset);},
createInlineElement : e=>{createInlineElement(e);},
setAssets: (data)=>{assets = data;},
initAutoplay: ()=>{initAutoplay();},
getPlayers: ()=>{return players;},
//initEvents : ()=>{initEvents();}
};
})();</script><style>#case-study-detail-block .cms-section .content{
overflow:visible !important;
}
.playShape,.unMuteSvg{
display:none;
}
.pauseR,.pauseL{
opacity:0;
-webkit-filter: invert(100%);
-ms-filter: invert(100%);
-o-filter: invert(100%);
filter: invert(1);
fill: #ffffff;
}
.playLRef, .playRRef{
display:none;
}
#morph, #morph svg{
width: 100%;
height: 100%;
position: relative;
top: 0;
bottom: 0;
}
#morph #pSvg1, #morph #paSvg1,#morph #pSvg2, #morph #paSvg2{
-webkit-filter: invert(1);
-ms-filter: invert(100%);
-o-filter: invert(100%);
filter: invert(1);
fill: #ffffff;
}
.dark .playL,
.dark .playR,
.pix #pin .playR,
.pix #pin .playL,
.codex #pin .playR,
.codex #pin .playL{
fill: #ffffff;
}
#playerTemplate .playR{
transform: translate(-0.5px,0px);
}
.player{
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #222;
display:none;
z-index: 20000;
color: #fff;
}
.player .frame{
left: 50%;
position: absolute;
top: 45%;
transform: translate(-50%,-50%);
width: 65%;
background: #000;
padding-bottom: 37%;
}
.player .frame .loading{
height: 100%;
width: 100%;
position: absolute;
background-image: url(/?action=asset&id=8251dbc9-5c3e-4311-ad37-10af96e3b895);
z-index: 1;
background-repeat: no-repeat;
background-position: center;
}
.player .video{
height: 100%;
width: 100%;
position: absolute;
opacity: 0;
transition: opacity 0.3s 0.4s;
}
.player.show .video{
opacity: 1;
}
.player .video iframe{
width: 100%;
height: 100%;
}
.player .video.vimeo iframe{
}
.player .video.vimeo > div{
height: 100%;
}
.player .video.yt iframe{
}
.player .frame .nav{
position: absolute;
top: calc(100% + 1em);
width: calc(100% - 20px);
z-index: 3;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 10px;
}
.player .nav .control, .player .close{
/*font-family: VideoJS;*/
font-weight: 400;
font-style: normal;
font-size: 1em;
line-height: 1.67;
display: inline-block;
cursor: pointer;
color: #000;
}
.pix #pin .player .nav .control,
.pix #pin .player .close,
.codex #pin .player .nav .control,
.codex #pin .player .close{
color: #fff;
}
.player .nav .play{
/*top: -0.06em;*/
position: relative;
width: 16px;
height: 20px;
cursor:pointer;
}
#case-study-detail-block .cms-section .content .cms-asset.video .player .nav .play{
top: -0.15em;
}
@media screen and (max-width: 1024px) {
#case-study-detail-block .cms-section .content .cms-asset.video .player .nav .play{
top: 0.05em;
}
}
@media not all and (min-width: 768px) and (min-resolution:.1dpi) {
.player .nav .play{
/*top: -0.1em;*/
}
}
.player .nav .play:before{
content: '';
background-image: url(/asset/251b4174-8010-40d2-a854-71e56a507f0a);
/*background-size: contain;*/
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: 100%;
display: none;
border: none;
}
.player.playing .nav .play:before{
content: '';
background-image: url(/asset/83548cd5-b1b3-40dc-a18e-09f94c51dc57);
}
.dark .player .nav .play:before,
.dark .player.playing .nav .play:before{
content: '';
filter: invert(1);
}
.player .nav .volumeControls{
position: relative;
z-index:2;
cursor:pointer;
}
.player .nav .volumeControls .volume{
display: none;
z-index: 200;
position: absolute;
bottom: 100%;
width:100%;
}
.player .nav .volumeControls .volume .volume-bck{
height: 100%;
padding: 10px 4px;
/*width: 14px;*/
border-radius: 2px;
background: #222;
margin-bottom: calc(1.5em - 1px);
}
/*Iphones*/
@media only screen
and (min-device-width: 320px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2){
.player .nav .volumeControls .volume{
display: none !important;
}
}
/*Iphones*/
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2) {
.player .nav .volumeControls .volume{
display: none !important;
}
}
/* Ipad */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 2) {
.player .nav .volumeControls .volume{
display: none !important;
}
}
/* Ipad */
@media only screen
and (min-device-width: 1024px)
and (max-device-width: 1366px)
and (-webkit-min-device-pixel-ratio: 2) {
.player .nav .volumeControls .volume{
display: none !important;
}
}
.player .nav .volumeControls .volume.volumeSlider{
display:block;
}
.player .nav .volumeControls .volume .slider-vertical{
height: 60px;
cursor:pointer;
}
.player .nav .volumeControls .volume .ui-slider .ui-slider-handle{
width: 5px;
height: 5px;
opacity: 1;
border: 0px solid #c5c5c5;
/*left: 2.5px;*/
left: 50%;
transform: translateX(-50%);
}
.player .nav .volumeControls .volume .ui-slider-vertical{
width: 10px;
border: none;
position:relative;
left: 50%;
background: #222;
transform: translateX(-50%);
}
.player .nav .volumeControls .volume .ui-slider-vertical:after{
content: "";
border-left: 2px solid #555;
position: absolute;
left: calc(50% - 1px);
top: 0;
width: 100%;
height: 100%;
}
.player .nav .volumeControls .volume .ui-slider-vertical .ui-slider-range-min {
bottom: 0;
width:2px;
left: 4px;
}
.dark .player .nav .volumeControls .volume .ui-slider-vertical{
color:#fff;
background:#222;
}
.dark .player .nav .volumeControls .volume .ui-slider-vertical .ui-slider-handle{
margin-bottom:0;
}
.player .nav .volumeControls .volume .ui-slider-vertical .ui-slider-handle{
margin-bottom:0;
}
.player .nav .volumeControls .volume .ui-slider-vertical{
color:#000;
}
.player .nav .volumeControls .mute{
top: 0px;
position: relative;
width: 22px;
height: 20px;
cursor:pointer;
/*padding-top: 2em;*/
/*transform: translate(0, -1em);*/
}
.player .nav .mute:before{
content: '';
background-image: url(/asset/38c4f7bb-af5d-4aba-812c-aeead3a6b0ee);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: 22px;
height: 20px;
display: block;
border: none;
}
.dark .player .nav .mute:before{
content: '';
filter: invert(1);
}
.player .nav .mute:before{
content: '';
filter: invert(0);
}
.pix #pin .player .nav .mute:before,
.codex #pin .player .nav .mute:before{
content: '';
filter: invert(1);
}
.player .nav .mute.muted:before{
content: '';
background-image: url(/asset/4d268ea2-5a84-424f-bc46-4bf8d21cdb94);
}
.player .nav .time{
display: inline-block;
width: 7em;
/*height: 1em;*/
position: relative;
font-family: 'Lato';
font-weight: 300;
font-size: 0.8em;
padding-left: 0em;
color: #000;
text-align:right;
}
.player .nav .seek{
display: inline-block;
width: calc(100% - 11em);
position: relative;
height: 2em;
cursor: pointer;
}
@media only screen and (min-width: 500px) {
.player .nav .seek {
width: calc(100% - 16em);
}
.player .nav .time{
}
}
.pix #pin .player .nav .time,
.codex #pin .player .nav .time{
color: #fff;
}
.player .nav .subtitle{
/*position: relative;*/
}
.player .nav.yt .subtitle{
display:none !important;
}
.player .nav .subtitle:before{
content: '';
background-image: url(/asset/2e685a5c-6f3b-411f-840b-f9b51a6bcff3);
background-repeat: no-repeat;
background-size: contain;
width: 30px;
height: 27px;
display: block;
position: relative;
top: 3.5px;
}
@media not all and (min-width: 768px) and (min-resolution:.1dpi) {
.player .nav .subtitle:before{
/*font-size:26.5px;*/
/*top: 4px;*/
}
@supports (-webkit-appearance:none) {
.player .nav .volumeControls .volume .ui-slider .ui-slider-handle {
/*left: 2.5px;*/
}
}
}
.dark .player .nav .subtitle:before,
.pix #pin .player .nav .subtitle:before,
.codex #pin .player .nav .subtitle:before{
filter: invert(1);
}
.player .nav .subtitle:before{
filter: invert(0);
}
.player .nav.subtitle .subtitle{
display: inline-block;
cursor:pointer;
}
/*.player .nav .subtitle > i{*/
/* background-image: url(/asset/03418cfb-e1b9-4621-8d69-7d7fc213e604);*/
/* background-repeat: no-repeat;*/
/* background-size: contain;*/
/* width: 1em;*/
/* height: 1em;*/
/* display: block;*/
/*}*/
.player .nav .subtitle ul{
font-family: "Lato", Helvetica, Arial;
font-size: 0.7em;
position: absolute;
background: #333;
padding: 0.5em !important;
bottom: 4.3em;
right: 0;
width: 10em;
margin: 0;
text-transform: uppercase;
display: none;
}
.player .nav .subtitle li{
font-size: 0.9em;
list-style-type: none !important;
position: relative;
margin: 0.25em 0 !important;
padding: 0.1em 0.1em 0.1em 0.5em;
color: #fff;
cursor:pointer;
font-weight:300;
}
.player .nav .subtitle li.active,
.player .nav .subtitle li:hover{
background-color: #555;
}
.player .nav .subtitle li:before{
content: "";
display: inline-block;
width: 1.4em;
height: 1em;
background-size: 100%;
background-repeat: no-repeat;
margin-right: 10px;
position: relative;
top: 0.3em;
left: 0em;
}
.player .nav .subtitle li[data-language=""]:before{
background-image: url(/asset/497c1e02-8b6d-462d-bd10-d087eab29860);
border:1px solid #414141;
}
.player .nav .subtitle li[data-language="en"]:before,
.player .nav .subtitle li[data-language="en-x-autogen"]:before{
background-image: url(/asset/c38736f5-99cc-433c-90a6-e8f6ca7fc867);
}
.player .nav .subtitle li[data-language="pt"]:before{
background-image: url(/asset/99efb939-b37e-4cd5-8f8b-c81eea6e5047);
}
.player .nav .subtitle li[data-language="zh-Hans"]:before{
background-image: url(/asset/db1c1e98-8bd3-4c62-b3f5-5121366ecbe1);
}
.player .nav .subtitle li[data-language="fr"]:before{
background-image: url(/asset/8c3f4dc6-cc84-4654-b938-73322136cef0);
}
.player .nav .subtitle li[data-language="es"]:before{
background-image: url(/asset/c60ae9c2-b503-4d44-955f-0451539b6d43);
}
.player .nav .subtitle li[data-language="de"]:before{
background-image: url(/asset/f8867338-920d-4d83-8b09-ac9b9445c71b);
}
.player .nav .subtitle li[data-language="pl"]:before{
background-image: url(/asset/2dae34cb-695f-4428-85de-a3d8e7e37beb);
}
.player .nav .subtitle li[data-language="tr"]:before{
background-image: url(/asset/bffa6510-f12a-4092-a2a6-302c993dd8bd);
}
.player .nav .subtitle li[data-language="hi"]:before{
background-image: url(/asset/9144a6be-2ed7-4f04-9069-bbaa111cf634);
}
.player .nav .subtitle li[data-language="ar"]:before{
background-image: url(/asset/abba8798-77dd-48a4-b325-452cc0564ebc);
}
.player .nav .subtitle li[data-language="vi"]:before{
background-image: url(/asset/95cd4680-742e-45ee-b26b-3ab82c95f674);
}
.player .nav .subtitle li[data-language="hu"]:before{
background-image: url(/asset/2de3343f-4b82-4f9c-9035-deaea5f0845e);
}
.player .nav .subtitle li[data-language="hu"]:before{
background-image: url(/asset/2de3343f-4b82-4f9c-9035-deaea5f0845e);
}
.player .nav .subtitle li[data-language="it"]:before{
background-image: url(/asset/c927fc09-264d-4e6c-8db6-97f0fdb02d2e);
}
.player .nav .subtitle li[data-language="ja"]:before{
background-image: url(/asset/f3eb0473-3251-4772-9788-1ef09a79d4b2);
}
.player .nav .subtitle li[data-language="ko"]:before{
background-image: url(/asset/d78cf51d-de46-43c1-bb87-b71ff2441d54);
}
.player .nav .fullscreen{
position: relative;
cursor:pointer;
}
/*#case-study-detail-block .cms-section .content .player .nav .fullscreen{*/
/* bottom: 0.5em;*/
/*}*/
/*#playerTemplate .player .nav .fullscreen{*/
/* bottom: 0.28em;*/
/*}*/
#case-study-detail-block .cms-section .content .player .nav .subtitle,
#playerTemplate .player .nav .subtitle{
/*left: 0.4em;*/
}
.player .nav .fullscreen:before{
content: '';
background-image: url(/asset/90124563-30f4-4fac-b179-00a767549fc3);
background-repeat: no-repeat;
background-size: contain;
width: 20px;
height: 20px;
display: block;
position: relative;
}
.player .nav .fullscreen:hover{
animation: 1s ease-in fullscreenScale forwards;
}
@keyframes fullscreenScale {
0%{
transform: scale(1);
}
30%{
transform: scale(1.1);
}
60%{
transform: scale(1.1) rotate(90deg);
}
100% {
transform: scale(1) rotate(90deg);
}
}
.dark .player .nav .fullscreen:before,
.pix #pin .player .nav .fullscreen:before,
.codex #pin .player .nav .fullscreen:before{
filter: invert(1);
}
.player .nav .fullscreen:before{
filter: invert(0);
}
.player .close{
position: absolute;
right: 0;
font-size: 2.5em;
width: 17.5%;
cursor: pointer;
z-index: 2;
}
.player .close i{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.player .frame > .play{
position: absolute;
width: 100%;
height: 100%;
/*display: none;*/
z-index: 1;
cursor: pointer;
}
.player .frame > .play.autoPlay{
content:"";
width: 100%;
height: 100%;
background-image: url(/asset/31af64e5-d3df-4262-9a10-0433d8989a70);
background-repeat: no-repeat;
background-position: center;
top:0;
left:0;
background-size: 12.3%;;
position: absolute;
display: block;
opacity:1;
cursor: pointer;
}
.player .frame > .play.bigPlay{
width: 100%;
height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/*display: block;*/
position: absolute;
}
.player .frame > .play.bigPlay .arrow{
content:"";
width: 100%;
height: 100%;
background-image: url(/asset/425265ef-5334-4a57-9f7c-6a9f7685a784);
background-repeat: no-repeat;
background-position: center;
top:0;
left:0;
background-size: 12.3%;;
position: absolute;
display: block;
opacity:1;
cursor: pointer;
/*filter: invert(1);*/
}
.player .frame > .play.bigPlay .pause{
content:"";
width: 100%;
height: 100%;
background-image: url(/asset/9a32547c-c067-4167-a7b3-4d2482710b5a);
background-repeat: no-repeat;
background-position: center;
top:0%;
left:0;
background-size: 2.6%;
position: absolute;
display: none;
opacity:1;
/*animation: 0.5s ease-in slideRight forwards;*/
cursor: pointer;
}
@keyframes slideRight {
from{
opacity:0;
left:-10px;
}
to{
opacity:1;
left:0;
}
}
.player .frame > .play .loader,
.player .frame > .play .circular-loader{
position: relative;
width: 100%;
height: 100%;
}
.player .frame > .play.bigPlay .loader{
width: 100%;
height: 100%;
z-index: 20;
/*transition: all 0.5s ease;*/
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: relative;
}
.player .frame > .play.bigPlay .circular-loader{
position: absolute;
z-index: 2;
width: 24%;
height: 24%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(270deg);
position: relative;
}
.player.show .play.bigPlay{
animation: 0.5s 0.5s ease-in fadeOut forwards;
}
.player .frame > .play.bigPlay .loader-path {
fill: none;
stroke: #fff;
/*stroke-width: 1.5px;*/
/*stroke-dasharray: 119.5, 150;*/
/*-webkit-animation: animate-stroke 0.5s ease-in-out;*/
/*animation: animate-stroke 0.5s ease-in-out;*/
/*animation-iteration-count: 1;*/
stroke-width: 0.6px;
stroke-dasharray: 138.5, 200;
-webkit-animation: animate-stroke .5s ease-in-out;
animation: animate-stroke .5s ease-in-out;
animation-iteration-count: 1;
}
@keyframes rotate {
100% {
transform: rotate(270deg);
}
}
@keyframes animate-stroke {
0% {
stroke-dasharray: 1, 200;
}
100% {
stroke-dasharray: 120, 150;
}
}
@keyframes fadeIn{
0% {
opacity:0;
display:block;
}
100%{
opacity:100;
}
}
@keyframes fadeOut{
0% {
opacity:100;
}
100%{
opacity:0;
}
}
.player .frame .poster{
position: absolute;
width: 100%;
height: 100%;
display: none;
background-size: cover;
}
.player .label{
font-family: 'Lato';
font-weight: 300;
font-size: 0.8em;
position: absolute;
width: 100%;
text-align: center;
bottom: 0;
}
.player .label .inner{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: 100%;
}
.player .name{
}
.player .sub{
font-weight: 300;
/*padding: 1em 0;*/
letter-spacing: 0em;
}
.player .description{
letter-spacing: 0.02em;
font-weight: 300;
padding: 0 1em;
}
.player .nav.yt{
width: calc(100% - 20px);
}
.player .nav.yt .seek {
width: calc(100% - 9em);
}
.player .nav .seek .bg{
height: 2px;
background: #ddd;
width: 100%;
position: absolute;
top: 1em;
}
.player .nav .seek .loaded{
height: 2px;
background: #bbb;
position: absolute;
width: 0;
top: 1em;
}
.player .nav .seek .position{
height: 2px;
background: #000;
position: absolute;
width: 0;
top: 1em;
}
.player .nav .seek .handle{
}
.player .nav .seek .handle:after{
font-family: VideoJS;
font-weight: 400;
font-style: normal;
font-size: 0.6em;
display: inline-block;
content: "\f111";
position: absolute;
top: -4px;
right: -4px;
}
.player .shuffle{
position: absolute;
top: 45%;
font-size: 2.5em;
cursor: pointer;
width: 17.5%;
text-align: center;
transform: translateY(-50%);
display: block !important;
height: 1em;
}
.player .prev{
left: 0;
}
.player .next{
right: 0;
}
.player.single .next,
.player.single .prev{
display:none !important;
}
.player .thumbs{
position: absolute;
bottom: 3em;
aspect-ratio: 16/9;
height: 5em;
padding: 10px 10px 2em;
background: #1a1a1a;
border-radius: 4px;
display: none;
}
.thumb-frame{
overflow:hidden;
aspect-ratio: 16/9;
display: flex;
justify-content: center;
align-content: center;
}
.thumb-frame video{
width: 100%;
height: auto;
margin: 0 auto;
position: relative;
/*left: 50%;*/
/*top: 50%;*/
/* -webkit-transform: translate(-50%, 0%);*/
/*-ms-transform: translate(-50%, -50%);*/
/*-moz-transform: translate(-50%, -50%);*/
/*-o-transform: translate(-50%, -50%);*/
/*transform: translate(-50%, -50%);*/
}
/* Iphone Portrait and Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2) {
.player .thumbs{
display: none !important;
}
}
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3) {
.player .thumbs{
display: none !important;
}
}
/* Tablet Portrait and Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
.player .thumbs{
display: none !important;
}
}
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 2) {
.player .thumbs{
display: none !important;
}
}
.player .thumbs video{
align-self: center;
}
.player .thumbs .label{
position: absolute;
width: initial;
transform: translateX(-50%);
left: 50%;
bottom: 0.6em;
}
@media not all and (min-width: 768px) and (min-resolution:.1dpi) {
.player .thumbs{
padding: 10px 10px 2.5em;
width: 10em;
}
.thumb-frame{
position: relative;
padding-top: 56.25%;
aspect-ratio: auto;
}
.thumb-frame video{
position: absolute;
top: -1em;
/*width: 100%;*/
/*height: 100%;*/
object-fit: cover;
-webkit-transform: translate(0%, 0%);
}
.player .thumbs .label{
bottom: 0.6em;
}
}
/* cms-asset inline video */
.cms-asset .player{
display: block;
position: relative;
padding-bottom: 56.2%;
margin-bottom: 5em;
z-index: initial;
}
.cms-asset .player .close{
display: none;
}
.cms-asset .player .frame{
transform: none;
left: 0;
display: inline-block;
margin-bottom: 2em;
top: 0;
padding-bottom: 0;
height: 100%;
width: 100%;
}
.cms-asset .player .video {
margin-top: 0;
}
/* dark mode */
.dark .player .nav .control, .dark .player .close{
color: #fff;
}
.dark .player .nav .seek .bg {
background: #333;
}
.dark .player .nav .seek .loaded {
background: #555;
}
.dark .player .nav .seek .position{
background: #fff;
}
.dark .player .nav .time{
color: #fff;
}
.dark .player .nav .subtitle > i{
filter: invert(1);
}
/* pure-font-xs */
@media screen and (max-width:35.438em) {
.player .close {
top: 0.7em;
font-size: 1.5em;
}
.player .shuffle{
font-size: 1.5em;
}
.player .description {
font-size: 0.8em;
}
}
/* pure-font-sm */
@media screen and (min-width:35.5em) and (max-width:47.938em) {
}
/* pure-font-md */
@media screen and (min-width:48em) and (max-width:63.938em) {
}
/* pure-font-lg */
@media screen and (min-width:64em) and (max-width:79.938em) {
}
/* pure-font-xl */
@media screen and (min-width:80em) {
}
@media screen and (max-height:35.438em) {
.player .frame {
top: 1em;
transform: translate(-50%,0%);
width: 50%;
padding-bottom: 28%;
}
.nav {
bottom: -3em;
}
.player .close {
top: 0.7em;
font-size: 1.5em;
}
.player .shuffle{
font-size: 1.5em;
}
.player .label{
bottom: 1em;
}
.player .name {
margin-bottom: 0.5em;
}
.player .description {
font-size: 0.8em;
}
}
#case-study-detail-block .cms-section .content .cms-asset .nav{
width: calc(100% - 0px);
}
#case-study-detail-block .cms-section .content .cms-asset.video{
margin-bottom:40px;
width:100%;
}
#case-study-detail-block .cms-section .content .player .nav .time {
/*width: 4.5em;*/
}
#case-study-detail-block .cms-section .content .player .thumbs{
height: 8.5em;
width: 12em;
padding: 10px 10px 2em;
}
#case-study-detail-block .cms-section .content .player .thumbs .label{
bottom:0;
}
#case-study-detail-block .cms-section .content .player .label{
/*display:none;*/
}
.titleframe .player{
position: relative;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #eee;
z-index: 1;
color: #fff;
}
.dark .titleframe .player{
background: #111;
}
.titleframe .player .frame{
left: 0%;
position: relative;
top: 0%;
transform: translate(0%,0%);
width: 100%;
background: #000;
padding-bottom: 0%;
padding-bottom: 56.25%;
/*aspect-ratio: 16 / 9;*/
}
.titleframe .player .nav{
position: absolute;
top: calc(100% + 1em);
bottom: auto;
width: calc(100% - 20px);
z-index: 3;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 10px;
}
.titleframe .player .nav .time{
top: 0em;
padding-left:1em;
}
.titleframe .player .nav .seek{
width: calc(100% - 150px - 4em);
}
.titleframe .player .nav .volumeControls .volume .volume-bck{
margin-bottom: calc(0.8em - 1px);
}
.titleframe .player .nav .subtitle ul{
font-size: 13px;
}
.titleframe .player .close{
display:none !important;
}
/*Onbaording and Imageframe video*/
.imageframe .player .frame {
position: relative;
top: 45%;
width: 100%;
padding-bottom: 61%;
left: 0%;
transform:translate(0,0);
}
.imageframe .player .label{
display:none;
}
.imageframe .player .close{
display: none;
}
.imageframe .player{
background: none;
}
.imageframe .player .nav .seek {
width: calc(100% - 90px - 4em);
}
.imageframe .player .nav .time{
top: 0em;
padding-left:0.2em;
}
.imageframe .player .nav .subtitle{
display: none;
}
.imageframe .player .nav{
width: calc(100% - 20px);
}
.imageframe .player .nav .volumeControls .volume .volume-bck{
margin-bottom: calc(1.1em - 1px);
}</style></div>
<div id="slider" style="display: none;"><div class="slider">
<div class="imageouter">
<div class="image"></div>
<div class="overlay"></div>
</div>
<div class="label" data-relative-font-factor="25">
<div class="fade">
<div class="name"></div>
<div class="content"></div>
</div>
<button class="button" onclick="">READ STORY</button>
<div class="nav"></div>
</div>
<div class="arrow left"></div>
<div class="arrow right"></div>
</div>
<script type="text/javascript">let slider=(()=>{let n=(n,t,r)=>{let ft=()=>{u=$("#slider").clone(),u.appendTo(n).show(),st()},u,e,f=0,et=1,v=r,y=!1,ot=!1,s,nt,st=()=>{Array.isArray(t)?(e=t,s=ut(),tt()):$.get(t).done(function(n){e=ht(n.nodes.sort((n,t)=>n.date-t.date).slice(0,4));s=ut();tt()}),v==null&&(v=5.5)},ht=n=>n.map(n=>({guid:n.customFields.find(n=>n.Name=="ogImage").Value,title1:n.customFields.find(n=>n.Name=="List Title").Value,title2:n.customFields.find(n=>n.Name=="Sub Title").Value,path:n.path})),tt=()=>{e.forEach(function(n,t){img=$("<img/>")[0];t==0&&(img.onload=function(){ct();$(window).resize()});img.src="/asset/"+n.guid})},ct=()=>{c(),g(e[0]),lt(),p(),vt()},p=()=>{function n(){u.removeClass("paused");$(".nav .playpause",u).removeClass("ui-icon-play").addClass("ui-icon-pause");nt=gsap.fromTo($(".nav .progress div",u)[f],{width:"0%"},{width:"100%",duration:v,ease:"none",onComplete:()=>{w(),l(),n()}})}n()},w=()=>{gsap.to($(".nav .progress div",u)[f],{opacity:0,duration:.75,onComplete:function(){gsap.set(this.targets(),{width:0,opacity:1})}})},h=()=>{$(".nav .item",u).removeClass("active"),$($(".nav .item",u)[f]).addClass("active"),g(e[f])},b=()=>{u.addClass("paused"),$(".nav .playpause",u).removeClass("ui-icon-pause").addClass("ui-icon-play"),nt.pause(),w()},o=n=>{$(".image",u).append(s[n])},c=()=>{$(".image",u).html(""),o(f==0?e.length-1:f-1),o(f),o(f==e.length-1?0:f+1),$(".image",u).css("left","-100%")},lt=()=>{$(".nav",u).append('<div class="ui-icon ui-icon-pause playpause"><\/div>');var n="";for(i=0;i<e.length;i++)n+='<div class="item"><div class="progress"><div><\/div><\/div><\/div>';$(".nav",u).append('<div class="items"><div>'+n+"<\/div><\/div>");$(".nav .item",u).css("width","calc("+100/e.length+"% - 10px)");$(".nav .item .progress",u).css("width","calc("+100/e.length+"% - 15px)");$(".nav .item",u).click(at);$(".nav",u).click(function(){});$(".playpause",u).click(function(n){return n.preventDefault(),u.hasClass("paused")?p():b(),!1});it();h()},at=n=>{if(y)return!1;var t=$(".nav .item",u).index(n.currentTarget);return rt(t),!1},it=()=>{var n=f;n==e.length&&(n=0);$(".nav svg",u).removeClass("active");$($(".nav svg",u)[n]).addClass("active")},l=()=>{gsap.to($(".image",u)[0],{left:"-200%",duration:.7,onComplete:c}),f=f==e.length-1?0:f+1,h()},a=()=>{gsap.to($(".image",u)[0],{left:"-0%",duration:.7,onComplete:c}),f=f==0?e.length-1:f-1,h()},rt=n=>{n!=f&&($(".image",u).html(""),direction=n>f,direction?(o(f),o(n)):(o(n),o(f)),$(".image",u).css("left",direction?"0%":"-100%"),gsap.to($(".image",u)[0],{left:direction?"-100%":"0%",duration:.7,onComplete:c})),b(),w(),f=n,h()},bt=()=>{document.visibilityState!="visible"||ot||(f==e.length-1?f=0:f++,pt())},k,d,vt=()=>{var n=$(".image",u);n.on("touchstart mousedown",function(n){b();k=n.originalEvent.type=="touchstart"?n.originalEvent.touches[0].clientX:n.originalEvent.clientX;d=n.originalEvent.type=="touchstart"?n.originalEvent.touches[0].clientY:n.originalEvent.clientY;touching=!0});n.on("touchmove mousemove",function(t){var i,u,r;(t.originalEvent.type!="mousemove"||t.originalEvent.buttons!=0)&&(i=k-(t.originalEvent.type=="touchmove"?t.originalEvent.touches[0].clientX:t.originalEvent.clientX),k=t.originalEvent.type=="touchmove"?t.originalEvent.touches[0].clientX:t.originalEvent.clientX,u=d-(t.originalEvent.type=="touchmove"?t.originalEvent.touches[0].clientY:t.originalEvent.clientY),d=t.originalEvent.type=="touchmove"?t.originalEvent.touches[0].clientY:t.originalEvent.clientY,r=parseFloat(n.css("left")),gsap.set(n,{left:r-i}))});n.on("touchend mouseup",function(t){t.preventDefault();touching=!1;left=parseInt($(".image",u).css("left"));targetSlideIndex=yt(left);switch(!0){case targetSlideIndex==e.length-1&&f==0:a();break;case targetSlideIndex>f||f==e.length-1&&targetSlideIndex==0:l();break;case targetSlideIndex<f||f==0&&targetSlideIndex==e.length-1:a();break;default:gsap.to(n,{left:"-100%",duration:.3})}p()});$(".arrow.left",u).click(a);$(".arrow.right",u).click(l)},yt=n=>{var i=.02,r=-.33333333333333331,o=n/$(".image",u).width(),t=f;return o>=r+i&&(t=f==0?e.length-1:f-1),o<=r-i&&(t=f==e.length-1?0:f+1),t},pt=()=>{function i(){$($(".frame",u)[0]).remove();y=!1;wt()}function r(){gsap.to(n,{opacity:0,duration:.5})}function o(){g(t);gsap.to(n,{opacity:1,duration:.5})}y=!0;var t=e[f],n=$(".label .name, .label .content, .label button, .label .badge",u).toArray();gsap.to($(".image",u)[0],{left:"-100%",duration:et,onComplete:i});iframe=new $("iframe",s[f])[0];iframe!=undefined&&(video=new Vimeo.Player(iframe),video.setCurrentTime(0));it();setTimeout(r,500);setTimeout(o,1e3)},g=n=>{gsap.to($(".label .fade",u)[0],{opacity:0,duration:.5,onComplete:()=>{$(".label .name",u).html(n.title1),$(".label .content",u).html(n.title2),$(".label button",u).attr("onclick",'reader.load("/'+n.path+'")'),gsap.to($(".label .fade",u)[0],{opacity:1,duration:.5})}})},kt=()=>{var n=$(".imageouter",u).width(),t=100/e.length;gsap.set($(".image",u)[0],{width:n*2});newHeight=$(".frame",u).width()/2-2;gsap.set($(".frame, .frame iframe",u).toArray(),{height:newHeight})},ut=()=>e.map(function(n){return $('<div class="frame"><div class="inner"><div class="img" style="background-image:url(/asset/'+n.guid+')"><\/div><div class="labels"><div class="title1">'+n.title1+'<\/div><div class="title2">'+n.title2+"<\/div><\/div><\/div><\/div>")}),wt=()=>{var n;n=f==e.length-1?0:f+1;o(n)};return ft(),{next:()=>{l()},previous:()=>{a()},move:n=>{rt(n)}}};return{createSlider:(t,i,r)=>n(t,i,r)}})()</script><style>.panel .slider{width:100%;height:100%}.panel .slider{position:relative;height:100%}.panel .slider .ui-icon,.ui-widget-content .ui-icon{background-image:url("https://code.jquery.com/ui/1.12.1/themes/ui-darkness/images/ui-icons_ffffff_256x240.png")}.panel .slider .ui-icon-pause{background-position:-16px -160px}.panel .slider .ui-icon-play,.paused{background-position:0 -160px}.panel .slider .tile{overflow:hidden}.panel .slider .imageouter{overflow:hidden;position:relative;height:100%}.panel .slider .image{position:absolute;left:0%;height:100%;width:300%}.panel .slider .frame .img{position:absolute !important;width:100%;height:100%;background-size:cover;background-position:center}.panel .slider .frame .title1{position:absolute;display:none}.panel .slider .frame .title2{position:absolute;display:none}.panel .slider .label{position:relative !important;color:#fff;font-family:Lato;font-size:3em;text-align:left;padding:1em !important;bottom:0 !important;transform:translateY(-100%);max-width:10em;pointer-events:none}.panel .slider .label .name{letter-spacing:-.02em;font-weight:700;line-height:.95em}.panel .slider .label .content{font-size:.5em;font-weight:300;margin-top:1em}.panel .slider button.button{font-family:Lato;color:#fff;border:2px solid #fff;font-size:.22em;padding:.6em .9em;min-width:13em;letter-spacing:.2em;pointer-events:all}.panel .slider .image .frame{display:inline-block;overflow:hidden;position:relative;height:100%;width:33.333333%;background:#000;background-size:cover;background-position:center}.panel .slider .image img,.image video{width:100%;transition:all 2s ease-in-out;position:relative}.panel .slider .overlay{width:100%;height:80%;position:absolute;bottom:0;background:linear-gradient(0deg,#000000ba,transparent);pointer-events:none}.panel .slider #maintitle .tile{cursor:pointer}.panel .slider .nav{z-index:3;width:67%;position:relative;bottom:unset;display:inline-block;font-size:.4em;pointer-events:all}.panel .slider .nav svg{width:24px;height:24px;position:relative;display:inline-block;margin-right:2px}.panel .slider .nav svg circle{stroke:#000;fill:#fff;transition:all .75s ease-in-out 0s}.panel .slider .nav svg.active circle{fill:#000;stroke:#fff}.panel .slider #maintitle .badge{display:inline-block;width:4em;height:1em;position:relative;top:-3.5em;background-image:url(/?action=asset&id=B46B7AD8-5A2A-4DF4-8AB7-B0267D74DA4F);z-index:1;background-repeat:no-repeat;background-size:2.2em;background-position-x:right;left:-.5em}.panel .slider #maintitle .pix .badge{background-image:url(/?action=asset&id=26C42D1B-E017-4FEC-97EB-641C477CD083);background-size:1em}.panel .slider #maintitle .none .badge{display:none}.panel .slider .nav .items{width:calc(100% - 26px);display:inline-block;position:relative;transform:translateY(.8em)}.panel .slider .nav .item{display:inline-block;margin-right:10px;height:1em;padding-top:1em;cursor:pointer}.panel .slider.paused .nav .item.active .progress{background:#777}.panel .slider .nav .item .progress{width:80px;position:absolute;height:1.5px;background:#bbb}.panel .slider .nav .item .progress div{background:#333;width:0%;height:100%}.panel .slider .nav .playpause{display:inline-block;width:16px;height:16px;position:relative;top:4px;margin-right:10px;cursor:pointer}#caseStudySlider .slider .arrow.right,#caseStudySlider .slider .arrow.left{position:absolute;width:34px;height:34px;display:none;padding:0;transform:translateY(-50%);background-image:url(/asset/63d2e837-e975-413d-a9f8-3822937f0591);z-index:10;background-size:100%;cursor:pointer;opacity:.7;transition:opacity .7s ease;margin:10px}#caseStudySlider .slider .arrow.right:hover,#caseStudySlider .slider .arrow.left:hover{cursor:pointer;opacity:1;transition:opacity .7s ease}#caseStudySlider .slider .arrow.right{right:10px;top:36%}#caseStudySlider .slider .arrow.left{left:10px;top:calc(36% - 17px);transform:rotate(180deg)}@media screen and (max-width:47.938em){.panel .slider .nav{width:90%;bottom:-14%}.panel .slider .nav .item{margin-right:2px}.panel .slider .label{font-size:3.5em !important}}@media screen and (min-width:48em) and (max-width:63.938em){.panel .slider .label{font-size:5.5em !important}}</style></div>
<div id="reader"><div class="frame">
<div class="close"><i></i></div>
<div class="inner">
<div class="loading"></div>
<iframe></iframe>
</div>
</div><script type="text/javascript">var reader=(()=>{
var init=()=>{
$(()=>{
bindEvents();
iframe=$("#reader iframe")[0];
resetReader();
});
},
iframe,
loadFrame=url=>{
showReader();
gsap.set(iframe, {opacity: 0});
iframe.onload=()=>{
hideLoading();
iframe.contentDocument.body.classList.add("embed");
};
iframe.src=url;
},
bindEvents=()=>{
$("#reader .close").click(hideReader);
window.document.addEventListener("reader_close", e=>{
//received close event from child document in iframe
e.preventDefault();
hideReader();
});
},
showReader=()=>{
gsap.set("#reader", {display : "block" });
gsap.to("#reader .frame", {opacity : 1});
$("#reader .loading").show();
$("body").css({"overflow-y": "hidden"});
pushHistory();
},
hideReader=()=>{
gsap.to("#reader .frame", {
opacity : 0,
onComplete : ()=>{
gsap.set("#reader", {
display : "none",
onComplete : resetReader
});
}
});
iframe.src="";
$("body").css({"overflow-y": "scroll"});
},
hideLoading=()=>{
$("#reader .loading").hide();
gsap.to(iframe, {opacity: 1});
},
resetReader=()=>{
iframe.src="";
},
pushHistory=()=>{
window.history.pushState({ page: 1}, "","");
window.onpopstate=e=>{
hideReader();
window.onpopstate=null;
};
}
;
init();
return{
load : url=>{loadFrame(url);}
};
})();</script><style>#reader{
display: none;
}
#reader .frame{
position: fixed;
width: 100%;
height: 100%;
top:0;
background: #333;
z-index: 26;
opacity: 0;
}
#reader .inner{
width: calc(100% - 1em);
height: calc(100% - 4em);
margin: 2em auto;
display: block;
max-width: 96vw;
position: relative;
background: #000;
}
#reader iframe{
width: 100%;
height: 100%;
border: none;
display: block;
}
#reader .close{
position: absolute;
color: #fff;
top: 4em;
right: 5em;
cursor: pointer;
z-index: 2;
width: 2em;
height: 2em;
display: block;
}
#reader .close i{
background-image: url(/asset/02bf2a54-dfb7-4f43-ba4d-a18b3900bb35);
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;
position: absolute;
display: block;
}
#reader .loading{
height: 100%;
width: 100%;
position: absolute;
background-image: url(/?action=asset&id=8251dbc9-5c3e-4311-ad37-10af96e3b895);
z-index: 1;
background-repeat: no-repeat;
background-position: center;
}
/* pure-font-xs-sm-md */
@media screen and (max-width:79.938em) {
#reader .frame {
width: 100%;
height: 100%;
}
#reader .inner {
width: 100%;
height: 100%;
max-width: unset;
margin: 0;
padding: 0;
}
#reader .close {
top: 1.5em;
right: 2em;
z-index: 1;
border-radius: 50%;
background: #f3f3f3;
width: 2.5em;
height: 2.5em;
}
#reader .close i{
background-size: 66%;
background-position: center;
}
}
</style></div>
<div id="header"><div class="menu">
<div class="codex-menu strip">
<div class="logo"><a href="https://codex.online/"></a></div>
<!--<div style="dispay:none" class="language-frame"></div>-->
<ul class="top">
<li class="products">PRODUCTS
<ul class="">
<li><a target="_self" href="https://codex.online/products/media">CAPTURE MEDIA</a></li>
<li><a target="_self" href="https://codex.online/products/media-stations">MEDIA READERS</a></li>
<li><a target="_self" href="https://codex.online/codex-hde">HDE</a></li>
</ul>
</li>
<li class="spacer">|</li>
<li class="products">SUPPORT
<ul class="">
<li><a target="_blank" href="https://help.codex.online">HELP CENTRE</a></li>
<li><a target="_blank" href="https://help.codex.online/content/support">CONTACT</a></li>
<li><a target="_self" href="https://codex.online/contact">FIND A RESELLER</a></li>
</ul>
</li>
</ul>
</div>
<div class="burger">
<span id="top-line"></span>
<span id="middle-line"></span>
<span id="bottom-line"></span>
</div>
<div class="overlay relativefont menu-overlay" data-relative-font-factor="50">
<div class="overlay-flex">
<ul class="top">
<li class="support"><a target="_blank" href="https://help.codex.online/">SUPPORT</a></li>
<li class="spacer">|</li>
</ul>
<div class="close"></div>
<div class="links">
<ul>
<li data-section="1" data-mobile-section="2"><a href="#">FOCUS</a></li>
<li data-section="2" data-mobile-section="4"><a href="#">CAPTURE</a></li>
<li data-section="3" data-mobile-section="6"><a href="#">SHARE</a></li>
<li data-section="4" data-mobile-section="8"><a href="#">SAVE</a></li>
<li data-section="6" data-mobile-section="11"><i><a href="#">CASE STUDIES</a></i></li>
<li data-section="7" data-mobile-section="13" class="hidden"><i><a href="#">PROXIES TO PIX</a></i></li>
<li data-section="8" data-mobile-section="14"><i><a href="#">AWARDS</a></i></li>
<li data-section="9" data-mobile-section="15"><i><a href="#">TESTIMONIALS</a></i></li>
<li data-section="10" data-mobile-section="16"><i><a href="#">CLIENTS</a></i></li>
<li data-section="11" data-mobile-section="18"><i><a href="#">CAPTURED ON CODEX</a></i></li>
<li data-section="12" data-mobile-section="19"><i><a href="#">CONTACT</a></i></li>
</ul>
<hr>
<ul>
<li>PRODUCT RANGE</li>
<li><i><a target="_self" href="/products/media">CAPTURE MEDIA</a></i></li>
<li><i><a target="_self" href="/products/media-stations">MEDIA READERS</a></i></li>
<!--<li><i><a target="_self" href="/products/device-manager">DEVICE MANAGER</a></i></li>-->
<li><i><a target="_self" href="/codex-hde">HDE</a></i></li>
</ul>
</div>
</div>
</div>
</div><script type="text/javascript">let codexMenu=(()=>{var s=()=>{$(document).ready(function(){h()}),y(),window.addEventListener("resize",()=>{})},t=80,r=!1,n=0,h=()=>{n=$(window).scrollTop(),$(window).scroll(c),$("#header .menu .burger").click(l),$("#header .menu .links li").click(a),$(".menu .products").click(n=>{var t=$("ul",n.currentTarget);t.hasClass("active")?t.slideUp().removeClass("active"):($(".menu .products ul").slideUp().removeClass("active"),t.slideDown().addClass("active"))})},c=i=>{if(scrollTop=$(i.currentTarget).scrollTop(),$("#quick-nav").length>0){if(scrollTop===0){e();n=0;return}scrollTop>n+t?(u(),n=scrollTop):scrollTop<n-t&&(u(),n=scrollTop)}else{if(scrollTop>n+t){u();n=scrollTop;return}if(!r&&scrollTop<n-t||scrollTop<t){e();n=scrollTop;return}}},u=()=>{$("#content .quick-nav")?(menusHeight=$("#header .menu .strip").outerHeight(),gsap.to("#header .menu .strip",{y:"-100%",duration:.5}),$("#header .menu .strip").addClass("hide"),gsap.to("#content .quick-nav",{y:-menusHeight-1,duration:.5}),$("#content .quick-nav").addClass("hide"),gsap.to(".menu .burger",{y:-menusHeight,duration:.5})):(gsap.to("#content2 .menu .strip",{y:"-100%"}),$("#content2 .menu .strip").addClass("hide"))},e=()=>{$("#content .quick-nav")&&(gsap.to("#header .menu .strip",{y:"0%"}),$("#header .menu .strip").removeClass("hide"),gsap.to(".menu .burger",{y:"0%"}),gsap.to("#content .quick-nav",{y:"0%"}),gsap.to(".menu .burger",{y:"0%",clearProps:"scale"}),$("#content .quick-nav").removeClass("hide")),gsap.to("#content2 .menu .strip",{y:"0%"}),$("#content2 .menu .strip").removeClass("hide")},l=()=>{$(".menu .burger").toggleClass("active"),$(".codex-menu ul.top").toggleClass("active"),$(".menu .overlay").slideToggle(),o()},a=n=>{n.target.attributes.href.value.length>1||(n.preventDefault(),v(f()?n.currentTarget.dataset.mobileSection:n.currentTarget.dataset.section),$("#header .menu .burger").removeClass("active"),$(".codex-menu ul.top").removeClass("active"),$("#header .menu .overlay").slideUp(),i.reverse())},v=t=>{let i="https://codex.online/";window.location.href==i||window.location.href=="https://codex.online/default"?gsap.to(window,{scrollTo:f()?$(".mobile .pin-spacer")[t]:$(".desktop .left .pin-spacer")[t],duration:"0.7",ease:"power1.inOut",onStart:()=>{r=!0},onComplete:()=>{r=!1,n=window.scrollTop}}):window.location.href=`${i}/?section=${t}`},p=n=>{f()&&($e=$(n),$e.hasClass("menu-light")?$(".mobile .menu").addClass("menu-light logo-light"):$(".mobile .menu").removeClass("menu-light logo-light"),$e.hasClass("logo-hidden")?$(".mobile .menu").addClass("logo-hidden"):$(".mobile .menu").removeClass("logo-hidden"),$(".desktop .menu .logo, .desktop .menu .burger").css("filter",""))},f=()=>window.matchMedia("(max-width:63.938em)").matches,w=()=>{var n=0;return[0].concat($(".mobile section").toArray().map(t=>n+=t.clientHeight))},i=gsap.timeline({paused:!0}),y=()=>{document.addEventListener("DOMContentLoaded",()=>{let n=document.querySelector(".burger");i.to($("#top-line"),{backgroundColor:"#ffffff",rotation:45,width:"47%",x:8,y:10,duration:1,ease:"elastic.inOut(1.1,0.5)"},0).to($("#middle-line"),{backgroundColor:"#ffffff",rotation:-45,x:-3,y:-1,duration:1,ease:"elastic.inOut(1.2,0.5)"},0).to($("#bottom-line"),{backgroundColor:"#ffffff",rotation:45,width:"41%",x:3,y:-16,duration:1,ease:"elastic.inOut(1.1,0.5)"},0);$(".burger").on("click",n=>{$(".menu-overlay").toggleClass("active"),n.preventDefault(),o()})})},o=()=>{$(".menu-overlay").hasClass("active")?i.play():i.reverse()};return s(),{}})()</script><style>body.embed #header{display:none !important}#header .menu .burger{position:fixed;right:-1rem;top:-2.2rem;z-index:6;transform:scale(.28);cursor:pointer}@media screen and (min-width:64em){#header .menu .burger{right:0;top:-1.4rem;transform:scale(.4)}}#header .burger{width:134px;height:134px;max-width:100px;overflow:visible}#header .burger #top-line,#header .burger #middle-line,#header .burger #bottom-line{transform-origin:center;background-color:#1d1d1b;border:1px solid #fff;display:block;border-radius:20px;width:100%;height:20px}#header .burger #top-line{transform:rotate(-39deg);width:61%;height:11px;position:relative;top:35px;left:5px}#header .burger #middle-line{transform-origin:center;transform:rotate(-39deg);width:86%;height:11px;position:relative;top:46px;left:10px}#header .burger #bottom-line{transform-origin:center;transform:rotate(-39deg);width:42%;height:11px;position:relative;top:64px;left:42px}#header .menu{position:fixed;width:100%;top:0;z-index:25;color:#000}#header .menu .strip{width:calc(100% - 9em);padding:0 7em 0 2em;top:0;background:#fff;height:62px;box-shadow:0 -1px 8px 0 #0003;font-size:.8em;position:relative;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;align-items:center;-ms-align-items:center;-webkit-align-items:center}#header .menu .codex-menu .logo{background-image:url(/asset/3befecf8-cc6a-444e-bb3a-2838f4389f0b);height:17px;width:98px;background-repeat:no-repeat;position:relative}#header .menu .codex-menu .logo a{width:100%;height:100%;display:block}@media screen and (min-width:480px){#header .menu .codex-menu .logo{width:15.5em}}@media screen and (min-width:48em){#header .menu .strip{width:calc(100% - 10.6em);padding:0 7em 0 3.6em;height:66px}#header .menu .codex-menu .logo{height:18px;width:105px}}@media screen and (min-width:64em){#header .menu .strip{width:calc(100% - 10.6em);padding:0 7em 0 3.6em;height:92px}#header .menu .codex-menu .logo{height:27px;width:150px}}#header .menu.logo-light .logo{filter:invert(1)}#header .menu.menu-light .burger{filter:invert(0)}#header .menu.burger-light .burger{filter:invert(1)}#header .menu.menu-hidden .logo,#header .menu.menu-hidden .burger{opacity:0}#header .menu.logo-hidden .logo{opacity:0}#header .menu .overlay{display:none;position:fixed;right:0;width:50%;background:#222;height:100vh;top:0;pointer-events:all;z-index:5}#header .menu .overlay .overlay-flex{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}@media screen and (min-width:64em){#header .menu .overlay .overlay-flex{height:100vh}}#header .menu .links{position:relative;font-size:11px;padding:3em 1.5em;white-space:nowrap}@media screen and (min-width:64em){#header .menu .links{font-size:16px}}#header .menu .links ul{padding:0;margin:0;list-style:none;font-family:'Lato',Helvetica,HelveticaNeue,Tahoma,Sans-Serif;position:relative;font-size:.7em;letter-spacing:0}#header .menu .links li{font-size:3em;text-align:center;font-weight:700;color:#fff;letter-spacing:0}#header .menu .links li a{text-decoration:none;color:#fff;transition:text-shadow .4s;letter-spacing:0}#header .menu .links li i a{font-style:normal;-webkit-text-stroke:1px #fff;color:transparent}#header .menu .links li a:hover{text-shadow:0 0 .7em #777}#header .menu .pix-menu ul.top{display:none;list-style:none;position:absolute;right:7em;top:3.2em;padding:0;margin:0}#header .menu .codex-menu ul.top{display:none;list-style:none;position:absolute;right:7em;padding:0;margin:0}#header .menu .pix-menu ul.top .active,#header .menu .codex-menu ul.top .active{display:block}@media screen and (min-width:580px){#header .menu .codex-menu ul.top,#header .menu .pix-menu ul.top{display:block}}#header .menu ul.top li{font-family:Lato,Helvetica,HelveticaNeue,Tahoma,Sans-Serif;display:inline-block;font-size:1.4em;font-weight:300;margin-right:.5em;letter-spacing:0}@media screen and (min-width:64em){#header .menu ul.top li{font-family:Lato,Helvetica,HelveticaNeue,Tahoma,Sans-Serif;display:inline-block;font-size:18px;font-weight:300;margin-right:.5em}}#header .menu ul.top li.spacer{transform:scale(1.2) translateY(-.1em)}#header .menu ul.top a{text-decoration:none;color:#000;top:15px;right:100px;pointer-events:all}#header .menu .overlay ul.top{top:20px;right:65px;display:none}#header .menu .overlay ul.top li{color:#fff;font-size:14px}#header .menu .overlay ul.top a{color:#fff}#header .menu .overlay ul.top ul li a{color:#000}#header .menu button.button{display:block;background:#fff;font-weight:600;padding:1rem 2rem;font-size:.75rem;letter-spacing:.1em;border:none;color:#000;position:relative;font-family:Lato,Helvetica,HelveticaNeue,Tahoma,Sans-Serif;width:23em;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center}@media screen and (min-width:768px){#header .menu button.button{padding:1.2em 2em;font-size:.8em}}#language .language-menu{position:relative !important;z-index:0 !important}#language div{max-width:unset;margin:0}.menu .products{cursor:pointer}.menu .products ul{display:none;position:absolute;font-size:.7em;padding:0;width:16em;margin:0 0 0 -1.4em;transform:translateY(1.4rem)}@media screen and (min-width:48em){.menu .products ul{transform:translateY(1.5rem)}}@media screen and (min-width:64em){.menu .products ul{transform:translateY(2.4rem)}}.menu .products li{width:100%;cursor:pointer;margin:0;margin-bottom:1px}#header .menu ul .products a{color:#fff;display:block;padding:.5em 1em;transition:background-color .4s,color .4s;background:#444}#header .menu ul .products a:hover{background-color:#5f5f5f}.menu .products li:last-child{border-bottom:none}.menu .hide .products ul{display:none !important}@media screen and (max-width:40.438em){#language{padding-left:0}}@media screen and (max-width:63.938em){body{position:relative;height:initial}#header>.desktop{display:none}#header>.mobile{display:block}#header .menu{font-size:.7em}#header .menu .overlay{width:100%}#header .menu .overlay li{font-size:clamp(10px,4em,72px)}#header .menu>ul.top{display:none}#header .menu .overlay ul.top{display:block;position:absolute;top:12px;right:65px}#language .language-menu{font-size:1.4em}}#header .menu .links{position:relative;padding:0 1.5em 1.8125rem;white-space:nowrap}@media screen and (min-width:48em){#header .menu .links{padding:0 1.5em 4.5rem}}#header .menu .links ul{padding:0;margin:0;list-style:none;font-family:Lato,Helvetica,HelveticaNeue,Tahoma,Sans-Serif;position:relative}#header .menu .links li{font-size:1.5625rem;line-height:1.875rem;text-align:center;font-weight:700;color:#fff}#header .menu .links hr{width:13rem;margin:29px auto}@media screen and (min-width:48em){#header .menu .links li{font-size:1.875rem;line-height:2.25rem}#header .menu .links hr{width:12em;margin:29px auto}}@media screen and (min-width:64em){#header .menu .links li{font-size:1.875rem;line-height:2.3125rem}#header .menu .links{padding:0 1.5em 4rem}#header .menu .links hr{width:15em;margin:31px auto}}@media screen and (min-width:121em){#header .menu .links{padding:0 1.5em 8.3125rem}#header .menu .links li{font-size:2.1rem;line-height:2.3125rem}#header .menu .links hr{width:15em;margin:31px auto}#header .menu button.button{max-width:450px;font-size:15px}}@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio:1){#header .menu .links li{font-size:1.625rem;line-height:1.8rem}#header .menu .links{padding:0 1.5em 3.5625rem}#header .menu .links hr{margin:26px auto}}@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio:2){#header .menu .links li{font-size:1.625rem}#header .menu .links{padding:0 1.5em 3.5625rem}#header .menu .links hr{margin:26px auto}}@media only screen and (min-device-width:1112px) and (max-device-width:1112px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio:2){#header .menu .links li{font-size:1.625rem;line-height:2rem}#header .menu .links hr{margin:26px auto}}@media only screen and (min-device-width:1366px) and (max-device-width:1366px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio:2){#header .menu .links li{font-size:1.625rem;line-height:2rem}#header .menu .links{padding:0 1.5em 3.5625rem}#header .menu .links hr{margin:26px auto}}#header .menu .links li a{text-decoration:none;color:#fff;transition:text-shadow .4s;font-weight:700;line-height:1}#header .menu .links li i a{font-style:normal;-webkit-text-stroke:1px #fff;color:transparent}#header .menu .links li a:hover{text-shadow:0 0 .7em #777}.loggedout .menu .logout{display:none !important}.menu .log-in{display:inline-block !important}.loggedout .menu .log-in{display:inline-block !important}.menu .log-in{display:none !important}</style></div>
<div id="language"></div>
<div id="holidayfun"><div id="snow"></div><script type="text/javascript">let snowflakesCount = 200; // Snowflake count, can be overwritten by attrs
let baseCSS = ``;
// set global attributes
if (typeof SNOWFLAKES_COUNT !== 'undefined') {
snowflakesCount = SNOWFLAKES_COUNT;
}
if (typeof BASE_CSS !== 'undefined') {
baseCSS = BASE_CSS;
}
let bodyHeightPx = null;
let pageHeightVh = null;
function setHeightVariables() {
bodyHeightPx = document.body.offsetHeight;
//pageHeightVh = (100 * bodyHeightPx / window.innerHeight);
pageHeightVh = 100;
}
// get params set in snow div
function getSnowAttributes() {
const snowWrapper = document.getElementById('snow');
snowflakesCount = Number(
snowWrapper?.dataset?.count || snowflakesCount
);
}
// This function allows you to turn on and off the snow
function showSnow(value) {
if (value) {
document.getElementById('snow').style.display = "block";
}
else {
document.getElementById('snow').style.display = "none";
}
}
// Creating snowflakes
function generateSnow(snowDensity = 200) {
snowDensity -= 1;
const snowWrapper = document.getElementById('snow');
snowWrapper.innerHTML = '';
for (let i = 0; i < snowDensity; i++) {
let board = document.createElement('div');
board.className = "snowflake";
snowWrapper.appendChild(board);
}
}
function getOrCreateCSSElement() {
let cssElement = document.getElementById("psjs-css");
if (cssElement) return cssElement;
cssElement = document.createElement('style');
cssElement.id = 'psjs-css';
document.head.appendChild(cssElement);
return cssElement;
}
// Append style for each snowflake to the head
function addCSS(rule) {
const cssElement = getOrCreateCSSElement();
cssElement.innerHTML = rule; // safe to use innerHTML
document.head.appendChild(cssElement);
}
// Math
function randomInt(value = 100) {
return Math.floor(Math.random() * value) + 1;
}
function randomIntRange(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function getRandomArbitrary(min, max) {
return Math.random() * (max - min) + min;
}
// Create style for snowflake
function generateSnowCSS(snowDensity = 200) {
let snowflakeName = "snowflake";
let rule = baseCSS;
for (let i = 1; i < snowDensity; i++) {
let randomX = Math.random() * 100; // vw
let randomOffset = Math.random() * 10 // vw;
let randomXEnd = randomX + randomOffset;
let randomXEndYoyo = randomX + (randomOffset / 2);
let randomYoyoTime = getRandomArbitrary(0.3, 0.8);
let randomYoyoY = randomYoyoTime * pageHeightVh; // vh
let randomScale = Math.random();
let fallDuration = randomIntRange(10, pageHeightVh / 10 * 3); // s
let fallDelay = randomInt(pageHeightVh / 10 * 3) * -1; // s
let opacity = Math.random();
rule += `
.${snowflakeName}:nth-child(${i}) {
opacity: ${opacity};
transform: translate(${randomX}vw, -10px) scale(${randomScale});
animation: fall-${i} ${fallDuration}s ${fallDelay}s linear infinite;
}
@keyframes fall-${i} {
${randomYoyoTime * 100}% {
transform: translate(${randomXEnd}vw, ${randomYoyoY}vh) scale(${randomScale});
}
to {
transform: translate(${randomXEndYoyo}vw, ${pageHeightVh}vh) scale(${randomScale});
}
}
`
}
addCSS(rule);
}
// Load the rules and execute after the DOM loads
function createSnow() {
return; //global snow disable
setHeightVariables();
getSnowAttributes();
generateSnowCSS(snowflakesCount);
generateSnow(snowflakesCount);
}
//window.addEventListener('resize', createSnow);
// export createSnow function if using node or CommonJS environment
/*
if (typeof module !== 'undefined') {
module.exports = {
createSnow,
showSnow,
};
}
else {
window.onload = createSnow;
}
*/</script><style>#snow{
position: fixed;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
pointer-events: none;
z-index: 2;
}
.snowflake {
position: absolute;
width: 10px;
height: 10px;
background: linear-gradient(#aaa, #aaa);
/* Workaround for Chromium's selective color inversion */
border-radius: 50%;
filter: drop-shadow(0 0 10px white);
}
</style></div>
</div>
<div id="content2"><div class="mobile">
<div class="relativefont" data-relative-font-factor="50">
<section class="menu-light pin section1">
<div class="panel">
<div class="label">
<a class="banner" data-custom-field-name="Banner Link" data-custom-field-type="href" data-custom-field-group="Section 1" href="">
<img data-custom-field-name="Section 1 Banner" data-custom-field-type="asset" data-custom-field-group="Section 1">
</a>
<!--Random images guid-->
<p class="rImage-guid hidden" data-custom-field-name="Random Images Asset Group" data-custom-field-type="assetgroup" data-custom-field-group="Random Images">929cd92d-51b5-406a-9120-697475290587</p>
<h2 data-custom-field-name="Section 1 Title" data-custom-field-group="Section 1">EVERY<br> MOMENT<br> MATTERS.</h2>
<h3 data-custom-field-name="Section 1 Paragraph" data-custom-field-group="Section 1">Fast and reliable recording media, storage and workflow solutions from CODEX. Protecting your work, your time, and your budget.</h3>
<a class="button" data-custom-field-name="Contact Button Link" data-custom-field-type="href" data-custom-field-group="Contact" href="/contact-codex"><span data-custom-field-name="Contact Button Text" data-custom-field-group="Contact">CONTACT CODEX</span></a>
</div>
</div>
</section>
<section class="pin">
<div class="panel">
<div class="bg-img random-image">
<q>
<div></div>
<label></label>
</q>
</div>
</div>
</section>
<section class="light pin">
<div class="panel">
<div class="label">
<h4 class="lato-all-caps" data-custom-field-name="Section 2 Title" data-custom-field-group="Section 2">FOCUS.</h4>
<h6 data-custom-field-name="Section 2 Sub Title" data-custom-field-type="html" data-custom-field-group="Section 2">Work without worry</h6>
<p data-custom-field-name="Section 2 Paragraph" data-custom-field-type="html" data-custom-field-group="Section 2"><p><strong>CODEX products allow the world's most successful makers to focus on what matters - the work. </strong>Free to pursue their vision safe in the knowledge that not a moment will be lost, in more ways than one.</p></p>
</div>
</div>
</section>
<section class="menu-light pin">
<div class="panel">
<div class="bg-img random-image">
<q>
<div></div>
<label></label>
</q>
</div>
</div>
</section>
<section class="menu-light pin">
<div class="panel">
<div class="label">
<h4 class="lato-all-caps" data-custom-field-name="Section 3 Title" data-custom-field-group="Section 3">CAPTURE.</h4>
<h6 data-custom-field-name="Section 3 Sub Title" data-custom-field-type="html" data-custom-field-group="Section 3">Never lose a second</h6>
<p data-custom-field-name="Section 3 Paragraph" data-custom-field-type="html" data-custom-field-group="Section 3"><p><strong>From a spontaneous, fleeting moment between actors, to an epic scene that’s been months in the planning. </strong>So you’d better make sure you’ve captured it and, once you’ve got it, you don’t lose it. CODEX recording media is built to withstand the rigors of commercial filmmaking.<br></p><p>Preserving your work, your sanity and your reputation.</p></p>
</div>
</div>
</section>
<section class="menu-light logo-light pin">
<div class="panel">
<div class="bg-img random-image">
<q>
<div></div>
<label></label>
</q>
</div>
</div>
</section>
<section class="light pin">
<div class="panel">
<div class="label">
<h4 class="lato-all-caps" data-custom-field-name="Section 4 Title" data-custom-field-group="Section 4">SHARE.</h4>
<h6 data-custom-field-name="Section 4 Sub Title" data-custom-field-type="html" data-custom-field-group="Section 4">Making the work better, together</h6>
<p data-custom-field-name="Section 4 Paragraph" data-custom-field-type="html" data-custom-field-group="Section 4"><p><strong>Our recording media and storage solutions are just the first stage of a seamless workflow system. </strong>One that has been designed to act in service of the needs of everyone. Enabling the creatives to pursue the artistic vision while supporting the teams who are responsible for ensuring that vision is shared with the world.</p><p>Keeping the workflow flowing and leaving more time to create the moments that matter.</p></p>
</div>
</div>
</section>
<section class="menu-light pin">
<div class="panel">
<div class="bg-img random-image">
<q>
<div></div>
<label></label>
</q>
</div>
</div>
</section>
<section class="pixhidden light pin">
<div class="panel">
<div class="label">
<h4 class="lato-all-caps" data-custom-field-name="Section 4aa Title" data-custom-field-group="Section 4aa">SAVE.</h4>
<h6 data-custom-field-name="Section 4aa Sub Title" data-custom-field-type="html" data-custom-field-group="Section 4aa">Making, not waiting</h6>
<p data-custom-field-name="Section 4aa Paragraph" data-custom-field-type="html" data-custom-field-group="Section 4aa"><p><strong>Epic moments can create equally epic file sizes. </strong>CODEX High Density Encoding (HDE) will up-to halve the size of RAW files with zero effect on quality. Meaning, on average, you save 40% of your time and budget.Files are faster to ingest, easier to share and cost less to store. The technicians get to bed earlier and the budget controller sleeps more soundly too.Nothing lost, everything gained.</p></p>
</div>
</div>
</section>
<section class="pixhidden menu-light pin">
<div class="panel">
<div class="bg-img random-image">
<q>
<div></div>
<label></label>
</q>
</div>
</div>
</section>
<section class="pin hidden">
<div class="panel">
<div class="hscroll" data-image-source=".mobile">
<div class="nav left"></div>
<div class="nav right"></div>
<div class="progress"></div>
<div class="images">
<div class="bg-img hscroll-img" data-custom-field-name="Section 4a Mobile Image 1" data-custom-field-type="asset" data-custom-field-group="Section 4a"></div>
<div class="bg-img hscroll-img" data-custom-field-name="Section 4a Image 2" data-custom-field-type="asset" data-custom-field-group="Section 4a"></div>
<div class="bg-img hscroll-img" data-custom-field-name="Section 4a Image 3" data-custom-field-type="asset" data-custom-field-group="Section 4a"></div>
<div class="bg-img hscroll-img" data-custom-field-name="Section 4a Image 4" data-custom-field-type="asset" data-custom-field-group="Section 4a"></div>
<div class="bg-img hscroll-img" data-custom-field-name="Section 4a Image 5" data-custom-field-type="asset" data-custom-field-group="Section 4a"></div>
<div class="bg-img hscroll-img" data-custom-field-name="Section 4a Image 6" data-custom-field-type="asset" data-custom-field-group="Section 4a"></div>
<div class="bg-img hscroll-img" data-custom-field-name="Section 4a Image 7" data-custom-field-type="asset" data-custom-field-group="Section 4a"></div>
<div class="bg-img hscroll-img" data-custom-field-name="Section 4a Image 8" data-custom-field-type="asset" data-custom-field-group="Section 4a"></div>
<div class="bg-img hscroll-img" data-custom-field-name="Section 4a Image 9" data-custom-field-type="asset" data-custom-field-group="Section 4a"></div>
<div class="bg-img hscroll-img" data-custom-field-name="Section 4a Image 10" data-custom-field-type="asset" data-custom-field-group="Section 4a"></div>
<div class="bg-img overlay"></div>
</div>
<div class="frame"><div class="hpanel">
<div class="label">
<h2 data-custom-field-name="Section 4a Intro Title" data-custom-field-group="Section 4a"></h2>
<h3 data-custom-field-name="Section 4a Intro Paragraph" data-custom-field-group="Section 4a"></h3>
<button class="right"><span data-custom-field-name="Section 4a Intro Button Text" data-custom-field-group="Section 4a"></span></button>
</div>
<div class="next"></div>
</div><div class="hpanel">
<div class="label">
<h4 data-custom-field-name="Section 4a Title 1" data-custom-field-group="Section 4a"></h4>
<h6 data-custom-field-name="Section 4a Lower Title 1" data-custom-field-group="Section 4a"></h6>
<p data-custom-field-name="Section 4a Paragraph 1" data-custom-field-type="html" data-custom-field-group="Section 4a">
<h5 data-custom-field-name="Section 4a Sub Title 1" data-custom-field-group="Section 4a"></h5>
<a data-custom-field-name="Section 4a Link URL 1" data-custom-field-type="href" data-custom-field-group="Section 4a" href="">
<button><span data-custom-field-name="Section 4a Button Text" data-custom-field-group="Section 4a"></span></button>
</a>
</div>
</div><div class="hpanel">
<div class="label">
<h4 data-custom-field-name="Section 4a Title 2" data-custom-field-group="Section 4a"></h4>
<h6 data-custom-field-name="Section 4a Lower Title 2" data-custom-field-group="Section 4a"></h6>
<p data-custom-field-name="Section 4a Paragraph 2" data-custom-field-type="html" data-custom-field-group="Section 4a">
<h5 data-custom-field-name="Section 4a Sub Title 2" data-custom-field-group="Section 4a"></h5>
<a data-custom-field-name="Section 4a Link URL 2" data-custom-field-type="href" data-custom-field-group="Section 4a" href="">
<button><span data-custom-field-name="Section 4a Button Text" data-custom-field-group="Section 4a"></span></button>
</a>
</div>
</div><div class="hpanel">
<div class="label">
<h4 data-custom-field-name="Section 4a Title 3" data-custom-field-group="Section 4a"></h4>
<h6 data-custom-field-name="Section 4a Lower Title 3" data-custom-field-group="Section 4a"></h6>
<p data-custom-field-name="Section 4a Paragraph 3" data-custom-field-type="html" data-custom-field-group="Section 4a">
<h5 data-custom-field-name="Section 4a Sub Title 3" data-custom-field-group="Section 4a"></h5>
<a data-custom-field-name="Section 4a Link URL 3" data-custom-field-type="href" data-custom-field-group="Section 4a" href="">
<button><span data-custom-field-name="Section 4a Button Text" data-custom-field-group="Section 4a"></span></button>
</a>
</div>
</div><div class="hpanel">
<div class="label">
<h4 data-custom-field-name="Section 4a Title 4" data-custom-field-group="Section 4a"></h4>
<h6 data-custom-field-name="Section 4a Lower Title 4" data-custom-field-group="Section 4a"></h6>
<p data-custom-field-name="Section 4a Paragraph 4" data-custom-field-type="html" data-custom-field-group="Section 4a">
<h5 data-custom-field-name="Section 4a Sub Title 4" data-custom-field-group="Section 4a"></h5>
<a data-custom-field-name="Section 4a Link URL 4" data-custom-field-type="href" data-custom-field-group="Section 4a" href="">
<button><span data-custom-field-name="Section 4a Button Text" data-custom-field-group="Section 4a"></span></button>
</a>
</div>
</div><div class="hpanel">
<div class="label">
<h4 data-custom-field-name="Section 4a Title 5" data-custom-field-group="Section 4a"></h4>
<h6 data-custom-field-name="Section 4a Lower Title 5" data-custom-field-group="Section 4a"></h6>
<p data-custom-field-name="Section 4a Paragraph 5" data-custom-field-type="html" data-custom-field-group="Section 4a">
<h5 data-custom-field-name="Section 4a Sub Title 5" data-custom-field-group="Section 4a"></h5>
<a data-custom-field-name="Section 4a Link URL 5" data-custom-field-type="href" data-custom-field-group="Section 4a" href="">
<button><span data-custom-field-name="Section 4a Button Text" data-custom-field-group="Section 4a"></span></button>
</a>
</div>
</div><div class="hpanel">
<div class="label">
<h4 data-custom-field-name="Section 4a Title 6" data-custom-field-group="Section 4a"></h4>
<h6 data-custom-field-name="Section 4a Lower Title 6" data-custom-field-group="Section 4a"></h6>
<p data-custom-field-name="Section 4a Paragraph 6" data-custom-field-type="html" data-custom-field-group="Section 4a">
<h5 data-custom-field-name="Section 4a Sub Title 6" data-custom-field-group="Section 4a"></h5>
<a data-custom-field-name="Section 4a Link URL 6" data-custom-field-type="href" data-custom-field-group="Section 4a" href="">
<button><span data-custom-field-name="Section 4a Button Text" data-custom-field-group="Section 4a"></span></button>
</a>
</div>
</div><div class="hpanel">
<div class="label">
<h4 data-custom-field-name="Section 4a Title 7" data-custom-field-group="Section 4a"></h4>
<h6 data-custom-field-name="Section 4a Lower Title 7" data-custom-field-group="Section 4a"></h6>
<p data-custom-field-name="Section 4a Paragraph 7" data-custom-field-type="html" data-custom-field-group="Section 4a">
<h5 data-custom-field-name="Section 4a Sub Title 7" data-custom-field-group="Section 4a"></h5>
<a data-custom-field-name="Section 4a Link URL 7" data-custom-field-type="href" data-custom-field-group="Section 4a" href="">
<button><span data-custom-field-name="Section 4a Button Text" data-custom-field-group="Section 4a"></span></button>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="pin light casestudy menu-light logo-hidden">
<div class="panel">
<h4 class="pin top lato-all-caps" data-custom-field-name="Case Study Title" data-custom-field-group="Case Study">CASE STUDIES.</h4>
<div id="caseStudySlider2"></div>
</div>
</section>
<section class="codexhidden teradex menu-light pin light">
<div class="panel">
<div class="label">
<h4 class="lato-all-caps" data-custom-field-name="Section 5 Title" data-custom-field-group="Section 5"></h4>
<h5 data-custom-field-name="Section 5 Sub Title" data-custom-field-group="Section 5"></h5>
<p data-custom-field-name="Section 5 Paragraph" data-custom-field-group="Section 5">
<a class="button blank-hidden" data-custom-field-name="Section 5 Link" data-custom-field-type="href" data-custom-field-group="Section 5" href=""><span data-custom-field-name="Section 5 Link Label" data-custom-field-group="Section 5"></span></a>
</div>
</div>
</section>
<section class="codexhidden pin whats-new-previous">
<div class="panel">
<div class="bg-img landscape" data-custom-field-name="Section 5 Mobile Image" data-custom-field-type="asset" data-custom-field-group="Section 5">
</div>
</div>
</section>
<section class="academy pin light">
<div class="panel">
<h4 class="pin top lato-all-caps" data-custom-field-name="Awards Title" data-custom-field-group="Section 6">AWARDS.</h4>
<div class="awards-bck">
<div class="awards-full">
<div class="inner">
<img loading="lazy" class="img" data-guid="db28f17b-2f47-442c-9d94-ce2d4eb232d3" data-custom-field-name="Section 6 Award 1" data-custom-field-type="asset" data-custom-field-group="Section 6" src="/asset/db28f17b-2f47-442c-9d94-ce2d4eb232d3" data-x="199" data-y="380" data-hotspot-x="-1" data-hotspot-y="-1">
<h6 data-custom-field-name="Section 6 Title 1" data-custom-field-type="html" data-custom-field-group="Section 6"><strong>Engineering Emmy Award</strong><br>©ATAS/NATAS<br><strong>2019</strong></h6>
</div>
<div class="inner">
<img class="img" data-guid="db28f17b-2f47-442c-9d94-ce2d4eb232d3" data-custom-field-name="Section 6 Award 2" data-custom-field-type="asset" data-custom-field-group="Section 6" src="/asset/db28f17b-2f47-442c-9d94-ce2d4eb232d3" data-x="199" data-y="380" data-hotspot-x="-1" data-hotspot-y="-1">
<h6 data-custom-field-name="Section 6 Title 2" data-custom-field-type="html" data-custom-field-group="Section 6"><strong>Engineering Emmy Award</strong><br>©ATAS/NATAS<br><strong>2020</strong></h6>
</div>
<div class="inner">
<img class="img" data-guid="a382feac-df5d-4ceb-9bdf-5a6d240fba9f" data-custom-field-name="Section 6 Award 3" data-custom-field-type="asset" data-custom-field-group="Section 6" src="/asset/a382feac-df5d-4ceb-9bdf-5a6d240fba9f" data-x="500" data-y="811" data-hotspot-x="-1" data-hotspot-y="-1">
<h6 data-custom-field-name="Section 6 Title 3" data-custom-field-type="html" data-custom-field-group="Section 6"><strong>Scientific and Technical Achievement Award</strong><br>©AMPAS <br><strong>2024</strong></h6>
</div>
</div>
</div>
</div>
</section>
<section class="pin light testimonials menu-light logo-hidden">
<div class="panel">
<h4 class="pin top lato-all-caps" data-custom-field-name="Testimonials Title" data-custom-field-group="Testimonials">TESTIMONIALS.</h4>
<div id="testimonialsSlider2"></div>
</div>
</section>
<section class="logo-hidden menu-light trusted gray pin">
<div class="panel">
<div class="frame">
<h4 class="pin lato-all-caps" data-custom-field-name="Trusted Title" data-custom-field-group="Trusted">TRUSTED BY.</h4>
<p data-custom-field-name="Trusted Paragraph" data-custom-field-group="Trusted">Leading cinema camera manufacturers, major studios, product & services Partners.</p>
<p class="trusted-guid hidden" data-custom-field-name="Trusted Asset Group" data-custom-field-type="assetgroup" data-custom-field-group="Trusted">4c27ce05-2847-42ed-a670-19cb8f87e9fe</p>
<div class="tiles"></div>
</div>
</div>
</section>
<section class="powered">
<div class="panel">
<h4 class="pin logo-hidden menu-light lato-all-caps" data-custom-field-name="Powered Title" data-custom-field-group="Powered">CAPTURED ON CODEX.</h4>
<div class="powered-list"></div>
</div>
</section>
<section class="pin contactLink">
<div class="panel">
</div>
</section>
<section class="pin logo-hidden menu-light contact">
<div class="panel">
<div class="inner">
<div class="send">
<h4 class="lato-all-caps" data-custom-field-name="Contact Title" data-custom-field-group="Contact">LET’S TALK.</h4>
<p data-custom-field-name="Contact Paragraph" data-custom-field-type="html" data-custom-field-group="Contact">Why not schedule a meeting with us to find out more how CODEX can help you work and collaborate better. Let's make good work, great.<br><br>London Soho HQ <strong>+44 203 7000 989</strong><br><br>Sometimes things can go wrong, humans will be humans after all. But should you ever worry all is lost, you'll find our support team on hand to restore both your files and your sanity, wherever you are on the planet.<br><br><strong>Need Product</strong> <strong>Support</strong>? Please <a href="https://help.codex.online/content/support" data-mce-href="https://help.codex.online/content/support">click here</a></p>
<a class="button light" data-custom-field-name="Contact Button Link" data-custom-field-type="href" data-custom-field-group="Contact" href="/contact-codex"><span data-custom-field-name="Contact Button Text" data-custom-field-group="Contact">CONTACT CODEX</span></a>
</div>
<div class="response-ok">
<h4 class="lato-all-caps" data-custom-field-name="Contact Response Ok Title" data-custom-field-group="Contact">THANK YOU.</h4>
<p data-custom-field-name="Contact Response Ok Paragraph" data-custom-field-group="Contact">Your message has been received by CODEX.<br>We will contact you shortly.</p>
</div>
<div class="totop"><img src="/asset/2e233c90-78ae-4615-812b-88abf8e6abf6"></div>
<div class="backtotop" data-custom-field-name="Back To Top" data-custom-field-group="Back To Top">^ BACK TO TOP ^</div>
<div class="social"></div>
</div>
</div>
</section>
</div>
</div>
<div class="desktop">
<div class="outer">
<div class="left relativefont" data-relative-font-factor="50">
<section class="menu-light">
<div class="panel">
<div class="bg-img random-image"></div>
</div>
</section>
<section class="logo-light deadzone">
<div class="panel">
<div class="bg-img random-image">
<q>
<div></div>
<label></label>
</q>
</div>
</div>
</section>
<section class="menu-light logo-light deadzone">
<div class="panel">
<div class="bg-img random-image">
<q>
<div></div>
<label></label>
</q>
</div>
</div>
</section>
<section class="logo-light deadzone">
<div class="panel">
<div class="bg-img random-image">
<q>
<div></div>
<label></label>
</q>
</div>
</div>
</section>
<section class="logo-light deadzone pixhidden">
<div class="panel">
<div class="bg-img random-image">
<q>
<div></div>
<label></label>
</q>
</div>
</div>
</section>
<section class="menu-light deadzone hidden">
<div class="panel">
<div class="bg-img hscroll-img" data-custom-field-name="Section 4a Image 1" data-custom-field-type="asset" data-custom-field-group="Section 4a"></div>
<div class="bg-img hscroll-img" data-custom-field-name="Section 4a Image 2" data-custom-field-type="asset" data-custom-field-group="Section 4a"></div>
<div class="bg-img hscroll-img" data-custom-field-name="Section 4a Image 3" data-custom-field-type="asset" data-custom-field-group="Section 4a"></div>
<div class="bg-img hscroll-img" data-custom-field-name="Section 4a Image 4" data-custom-field-type="asset" data-custom-field-group="Section 4a"></div>
<div class="bg-img hscroll-img" data-custom-field-name="Section 4a Image 5" data-custom-field-type="asset" data-custom-field-group="Section 4a"></div>
<div class="bg-img hscroll-img" data-custom-field-name="Section 4a Image 6" data-custom-field-type="asset" data-custom-field-group="Section 4a"></div>
<div class="bg-img hscroll-img" data-custom-field-name="Section 4a Image 7" data-custom-field-type="asset" data-custom-field-group="Section 4a"></div>
<div class="bg-img hscroll-img" data-custom-field-name="Section 4a Image 8" data-custom-field-type="asset" data-custom-field-group="Section 4a"></div>
<div class="bg-img hscroll-img" data-custom-field-name="Section 4a Image 9" data-custom-field-type="asset" data-custom-field-group="Section 4a"></div>
<div class="bg-img hscroll-img" data-custom-field-name="Section 4a Image 10" data-custom-field-type="asset" data-custom-field-group="Section 4a"></div>
</div>
</section>
<section class="light menu-light logo-hidden casestudy">
<div class="panel full">
<h4 class="top lato-all-caps" data-custom-field-name="Case Study Title" data-custom-field-group="Case Study">CASE STUDIES.</h4>
<div id="caseStudySlider"></div>
</div>
</section>
<section class="codexhidden logo-light deadzone">
<div class="panel">
<div class="bg-img landscape" data-custom-field-name="Section 5 Image" data-custom-field-type="asset" data-custom-field-group="Section 5" style="background-image:url(/asset/2c38afdb-7a29-488c-b525-aae7d0950f34);" data-x="1924" data-y="1500" data-guid="2c38afdb-7a29-488c-b525-aae7d0950f34" data-hotspot-x="-1" data-hotspot-y="-1" data-name="western">
</div>
</div>
</section>
<!--Awards Full-->
<section class="light menu-light logo-hidden deadzone ">
<div class="panel full">
<h4 class="top lato-all-caps" data-custom-field-name="Awards Title" data-custom-field-group="Section 6">AWARDS.</h4>
<div class="awards-bck">
<div class="awards-full">
<div class="inner">
<img loading="lazy" class="img" data-guid="db28f17b-2f47-442c-9d94-ce2d4eb232d3" data-custom-field-name="Section 6 Award 1" data-custom-field-type="asset" data-custom-field-group="Section 6" src="/asset/db28f17b-2f47-442c-9d94-ce2d4eb232d3" data-x="199" data-y="380" data-hotspot-x="-1" data-hotspot-y="-1">
<h6 data-custom-field-name="Section 6 Title 1" data-custom-field-type="html" data-custom-field-group="Section 6"><strong>Engineering Emmy Award</strong><br>©ATAS/NATAS<br><strong>2019</strong></h6>
</div>
<div class="inner">
<img class="img" data-guid="db28f17b-2f47-442c-9d94-ce2d4eb232d3" data-custom-field-name="Section 6 Award 2" data-custom-field-type="asset" data-custom-field-group="Section 6" src="/asset/db28f17b-2f47-442c-9d94-ce2d4eb232d3" data-x="199" data-y="380" data-hotspot-x="-1" data-hotspot-y="-1">
<h6 data-custom-field-name="Section 6 Title 2" data-custom-field-type="html" data-custom-field-group="Section 6"><strong>Engineering Emmy Award</strong><br>©ATAS/NATAS<br><strong>2020</strong></h6>
</div>
<div class="inner">
<img class="img" data-guid="a382feac-df5d-4ceb-9bdf-5a6d240fba9f" data-custom-field-name="Section 6 Award 3" data-custom-field-type="asset" data-custom-field-group="Section 6" src="/asset/a382feac-df5d-4ceb-9bdf-5a6d240fba9f" data-x="500" data-y="811" data-hotspot-x="-1" data-hotspot-y="-1">
<h6 data-custom-field-name="Section 6 Title 3" data-custom-field-type="html" data-custom-field-group="Section 6"><strong>Scientific and Technical Achievement Award</strong><br>©AMPAS <br><strong>2024</strong></h6>
</div>
</div>
</div>
</div>
</section>
<section class="light menu-light logo-hidden testimonials ">
<div class="panel full">
<h4 class="top lato-all-caps" data-custom-field-name="Testimonials Title" data-custom-field-group="Testimonials">TESTIMONIALS.</h4>
<div id="testimonialsSlider"></div>
<div id="testimonialsSource" data-custom-field-name="Testimonials Source" data-custom-field-type="html" data-custom-field-group="Testimonials" style="display: none;"><table class=""><tbody><tr><td>“IF YOU WANT TOTAL FIDELITY, AND A WORKFLOW YOU CAN RELY ON, CHOOSE CODEX” </td><td>Francesco Giardiello, DIT</td><td><div class="cms-asset " data-assetid="00bcd6f4-db4c-4247-b609-3b5dd5e28587"><div class="title"><br></div><img data-mce-src="https://x2x.media/?action=asset&id=00bcd6f4-db4c-4247-b609-3b5dd5e28587&x=450&q=50" data-x="253" data-y="253" data-path="/asset/00bcd6f4-db4c-4247-b609-3b5dd5e28587"><div class="caption"><br></div></div></td></tr><tr><td>“WHAT CODEX HAS GIVEN US IS THE DEPENDABILITY THAT WE HAD WITH FILM MAGAZINES” </td><td>Gabriel Beristain, BSC, ASC</td><td><div class="cms-asset " data-assetid="55acd60a-4e83-4c6a-8166-de3cd6be5316"><div class="title"><br></div><img data-mce-src="https://x2x.media/?action=asset&id=55acd60a-4e83-4c6a-8166-de3cd6be5316&x=450&q=50" data-x="539" data-y="539" data-path="/asset/55acd60a-4e83-4c6a-8166-de3cd6be5316"><div class="caption"><br></div></div></td></tr><tr><td>“CODEX IS A WELL-DESIGNED TOOL. YOU DON'T NEED TO WORRY ABOUT IT. IT'S PEACE OF MIND. TECHNOLOGY SHOULD NOT CLOG YOUR MIND WITH TECHNICAL INFORMATION. I WOULD RECOMMEND IT TO ANYONE” </td><td>Anna Foerster, ASC, Cinematographer/Director</td><td><div class="cms-asset " data-assetid="206641b2-f395-4c8e-a762-1e075cb84e9c"><div class="title"><br></div><img data-mce-src="https://x2x.media/?action=asset&id=206641b2-f395-4c8e-a762-1e075cb84e9c&x=450&q=50" data-x="400" data-y="400" data-path="/asset/206641b2-f395-4c8e-a762-1e075cb84e9c"><div class="caption"><br></div></div></td></tr><tr><td>“CODEX REPRESENTS A SIMPLE, ELEGANT, ALL-IN-ONE SOLUTION FOR THE DIGITAL CAMERA WORKFLOW. I CONSIDER IT TO BE A ROCK-SOLID PLATFORM” </td><td>Bruce Markoe, SVP, Head of Post Production, IMAX</td><td><div class="cms-asset " data-assetid="ae323bf3-f693-45a5-8bbe-07d78d3fecf3"><div class="title"><br></div><img data-mce-src="https://x2x.media/?action=asset&id=ae323bf3-f693-45a5-8bbe-07d78d3fecf3&x=450&q=50" data-x="450" data-y="450" data-path="/asset/ae323bf3-f693-45a5-8bbe-07d78d3fecf3"><div class="caption"><br></div></div></td></tr></tbody></table></div>
</div>
</section>
<section class="logo-light menu-light trusted gray deadzone">
<div class="panel">
<div class="frame">
<div class="tiles"></div>
</div>
</div>
</section>
<section class="powered menu-light logo-hidden">
<div class="panel">
<h4 class="lato-all-caps" data-custom-field-name="Powered Title" data-custom-field-group="Powered">CAPTURED ON CODEX.</h4>
<p class="guid hidden" data-custom-field-name="Powered asset-group-guid" data-custom-field-type="assetgroup" data-custom-field-group="Powered">81e86f18-01b8-41ce-a43e-f971c8ebdc0e</p>
<div class="powered-list"></div>
</div>
</section>
<section class="">
<div class="panel">
</div>
</section>
<section class="contact logo-light menu-light full">
<div class="panel full">
<div class="pure-g">
<div class="pure-u-1-2">
<div class="bg-img " data-custom-field-name="Contact Image" data-custom-field-type="asset" data-custom-field-group="Contact"></div>
<div class="bg-img random-contact-image"></div>
<p class="rContactImage-guid hidden" data-custom-field-name="Random Contact Images Asset Group" data-custom-field-type="assetgroup" data-custom-field-group="Contact">42ffc0a5-7daf-40c6-87e6-c9a12a727dfb</p>
</div>
<div class="pure-u-1-2">
<div class="inner">
<div class="send">
<h4 class="lato-all-caps" data-custom-field-name="Contact Title" data-custom-field-group="Contact">LET’S TALK.</h4>
<p data-custom-field-name="Contact Paragraph" data-custom-field-type="html" data-custom-field-group="Contact">Why not schedule a meeting with us to find out more how CODEX can help you work and collaborate better. Let's make good work, great.<br><br>London Soho HQ <strong>+44 203 7000 989</strong><br><br>Sometimes things can go wrong, humans will be humans after all. But should you ever worry all is lost, you'll find our support team on hand to restore both your files and your sanity, wherever you are on the planet.<br><br><strong>Need Product</strong> <strong>Support</strong>? Please <a href="https://help.codex.online/content/support" data-mce-href="https://help.codex.online/content/support">click here</a></p>
<a class="button light" data-custom-field-name="Contact Button Link" data-custom-field-type="href" data-custom-field-group="Contact" href="/contact-codex"><span data-custom-field-name="Contact Button Text" data-custom-field-group="Contact">CONTACT CODEX</span></a>
</div>
<div class="response-ok">
<h4 class="lato-all-caps" data-custom-field-name="Contact Response Ok Title" data-custom-field-group="Contact">THANK YOU.</h4>
<p data-custom-field-name="Contact Response Ok Paragraph" data-custom-field-group="Contact">Your message has been received by CODEX.<br>We will contact you shortly.</p>
</div>
<div class="totop"><img src="/asset/2e233c90-78ae-4615-812b-88abf8e6abf6"></div>
<div class="backtotop" data-custom-field-name="Back To Top" data-custom-field-group="Back To Top">^ BACK TO TOP ^</div>
<div class="social"></div>
</div>
</div>
</div>
</div>
</section>
</div>
<div class="right relativefont" data-relative-font-factor="50">
<section>
<div class="panel">
<div class="label">
<a class="banner" data-custom-field-name="Banner Link" data-custom-field-type="href" data-custom-field-group="Section 1" href="">
<img data-custom-field-name="Section 1 Banner" data-custom-field-type="asset" data-custom-field-group="Section 1">
</a>
<h2 class="lato-all-caps" data-custom-field-name="Section 1 Title" data-custom-field-group="Section 1">EVERY<br> MOMENT<br> MATTERS.</h2>
<h3 data-custom-field-name="Section 1 Paragraph" data-custom-field-group="Section 1">Fast and reliable recording media, storage and workflow solutions from CODEX. Protecting your work, your time, and your budget.</h3>
<a class="button light" data-custom-field-name="Contact Button Link" data-custom-field-type="href" data-custom-field-group="Contact" href="/contact-codex"><span data-custom-field-name="Contact Button Text" data-custom-field-group="Contact">CONTACT CODEX</span></a>
</div>
<div class="next"></div>
</div>
</section>
<section class="light">
<div class="panel">
<div class="label">
<h4 class="lato-all-caps" data-custom-field-name="Section 2 Title" data-custom-field-group="Section 2">FOCUS.</h4>
<h6 data-custom-field-name="Section 2 Sub Title" data-custom-field-type="html" data-custom-field-group="Section 2">Work without worry</h6>
<p data-custom-field-name="Section 2 Paragraph" data-custom-field-type="html" data-custom-field-group="Section 2"><p><strong>CODEX products allow the world's most successful makers to focus on what matters - the work. </strong>Free to pursue their vision safe in the knowledge that not a moment will be lost, in more ways than one.</p></p>
</div>
</div>
</section>
<section>
<div class="panel">
<div class="label">
<h4 class="lato-all-caps" data-custom-field-name="Section 3 Title" data-custom-field-group="Section 3">CAPTURE.</h4>
<h6 data-custom-field-name="Section 3 Sub Title" data-custom-field-type="html" data-custom-field-group="Section 3">Never lose a second</h6>
<p data-custom-field-name="Section 3 Paragraph" data-custom-field-type="html" data-custom-field-group="Section 3"><p><strong>From a spontaneous, fleeting moment between actors, to an epic scene that’s been months in the planning. </strong>So you’d better make sure you’ve captured it and, once you’ve got it, you don’t lose it. CODEX recording media is built to withstand the rigors of commercial filmmaking.<br></p><p>Preserving your work, your sanity and your reputation.</p></p>
</div>
</div>
</section>
<section class="light">
<div class="panel">
<div class="label">
<h4 class="lato-all-caps" data-custom-field-name="Section 4 Title" data-custom-field-group="Section 4">SHARE.</h4>
<h6 data-custom-field-name="Section 4 Sub Title" data-custom-field-type="html" data-custom-field-group="Section 4">Making the work better, together</h6>
<p data-custom-field-name="Section 4 Paragraph" data-custom-field-type="html" data-custom-field-group="Section 4"><p><strong>Our recording media and storage solutions are just the first stage of a seamless workflow system. </strong>One that has been designed to act in service of the needs of everyone. Enabling the creatives to pursue the artistic vision while supporting the teams who are responsible for ensuring that vision is shared with the world.</p><p>Keeping the workflow flowing and leaving more time to create the moments that matter.</p></p>
</div>
</div>
</section>
<section class="pixhidden">
<div class="panel">
<div class="label">
<h4 class="lato-all-caps" data-custom-field-name="Section 4aa Title" data-custom-field-group="Section 4aa">SAVE.</h4>
<h6 data-custom-field-name="Section 4aa Sub Title" data-custom-field-type="html" data-custom-field-group="Section 4aa">Making, not waiting</h6>
<p data-custom-field-name="Section 4aa Paragraph" data-custom-field-type="html" data-custom-field-group="Section 4aa"><p><strong>Epic moments can create equally epic file sizes. </strong>CODEX High Density Encoding (HDE) will up-to halve the size of RAW files with zero effect on quality. Meaning, on average, you save 40% of your time and budget.Files are faster to ingest, easier to share and cost less to store. The technicians get to bed earlier and the budget controller sleeps more soundly too.Nothing lost, everything gained.</p></p>
</div>
</div>
</section>
<section class="hidden">
<div class="panel">
<div class="hscroll" data-image-source=".desktop">
<div class="nav left"></div>
<div class="nav right"></div>
<div class="progress"></div>
<div class="frame"><div class="hpanel">
<div class="label">
<h2 class="lato-all-caps" data-custom-field-name="Section 4a Intro Title" data-custom-field-group="Section 4a"></h2>
<h3 data-custom-field-name="Section 4a Intro Paragraph" data-custom-field-group="Section 4a"></h3>
<button class="right"><span data-custom-field-name="Section 4a Intro Button Text" data-custom-field-group="Section 4a"></span></button>
</div>
<div class="next"></div>
</div><div class="hpanel">
<div class="label">
<h4 data-custom-field-name="Section 4a Title 1" data-custom-field-group="Section 4a"></h4>
<h6 data-custom-field-name="Section 4a Lower Title 1" data-custom-field-group="Section 4a"></h6>
<p data-custom-field-name="Section 4a Paragraph 1" data-custom-field-type="html" data-custom-field-group="Section 4a">
<h5 data-custom-field-name="Section 4a Sub Title 1" data-custom-field-group="Section 4a"></h5>
<a data-custom-field-name="Section 4a Link URL 1" data-custom-field-type="href" data-custom-field-group="Section 4a" href="">
<button><span data-custom-field-name="Section 4a Button Text" data-custom-field-group="Section 4a"></span></button>
</a>
</div>
</div><div class="hpanel">
<div class="label">
<h4 data-custom-field-name="Section 4a Title 2" data-custom-field-group="Section 4a"></h4>
<h6 data-custom-field-name="Section 4a Lower Title 2" data-custom-field-group="Section 4a"></h6>
<p data-custom-field-name="Section 4a Paragraph 2" data-custom-field-type="html" data-custom-field-group="Section 4a">
<h5 data-custom-field-name="Section 4a Sub Title 2" data-custom-field-group="Section 4a"></h5>
<a data-custom-field-name="Section 4a Link URL 2" data-custom-field-type="href" data-custom-field-group="Section 4a" href="">
<button><span data-custom-field-name="Section 4a Button Text" data-custom-field-group="Section 4a"></span></button>
</a>
</div>
</div><div class="hpanel">
<div class="label">
<h4 data-custom-field-name="Section 4a Title 3" data-custom-field-group="Section 4a"></h4>
<h6 data-custom-field-name="Section 4a Lower Title 3" data-custom-field-group="Section 4a"></h6>
<p data-custom-field-name="Section 4a Paragraph 3" data-custom-field-type="html" data-custom-field-group="Section 4a">
<h5 data-custom-field-name="Section 4a Sub Title 3" data-custom-field-group="Section 4a"></h5>
<a data-custom-field-name="Section 4a Link URL 3" data-custom-field-type="href" data-custom-field-group="Section 4a" href="">
<button><span data-custom-field-name="Section 4a Button Text" data-custom-field-group="Section 4a"></span></button>
</a>
</div>
</div><div class="hpanel">
<div class="label">
<h4 data-custom-field-name="Section 4a Title 4" data-custom-field-group="Section 4a"></h4>
<h6 data-custom-field-name="Section 4a Lower Title 4" data-custom-field-group="Section 4a"></h6>
<p data-custom-field-name="Section 4a Paragraph 4" data-custom-field-type="html" data-custom-field-group="Section 4a">
<h5 data-custom-field-name="Section 4a Sub Title 4" data-custom-field-group="Section 4a"></h5>
<a data-custom-field-name="Section 4a Link URL 4" data-custom-field-type="href" data-custom-field-group="Section 4a" href="">
<button><span data-custom-field-name="Section 4a Button Text" data-custom-field-group="Section 4a"></span></button>
</a>
</div>
</div><div class="hpanel">
<div class="label">
<h4 data-custom-field-name="Section 4a Title 5" data-custom-field-group="Section 4a"></h4>
<h6 data-custom-field-name="Section 4a Lower Title 5" data-custom-field-group="Section 4a"></h6>
<p data-custom-field-name="Section 4a Paragraph 5" data-custom-field-type="html" data-custom-field-group="Section 4a">
<h5 data-custom-field-name="Section 4a Sub Title 5" data-custom-field-group="Section 4a"></h5>
<a data-custom-field-name="Section 4a Link URL 5" data-custom-field-type="href" data-custom-field-group="Section 4a" href="">
<button><span data-custom-field-name="Section 4a Button Text" data-custom-field-group="Section 4a"></span></button>
</a>
</div>
</div><div class="hpanel">
<div class="label">
<h4 data-custom-field-name="Section 4a Title 6" data-custom-field-group="Section 4a"></h4>
<h6 data-custom-field-name="Section 4a Lower Title 6" data-custom-field-group="Section 4a"></h6>
<p data-custom-field-name="Section 4a Paragraph 6" ddata-custom-field-type="html" ata-custom-field-group="Section 4a">
<h5 data-custom-field-name="Section 4a Sub Title 6" data-custom-field-group="Section 4a"></h5>
<a data-custom-field-name="Section 4a Link URL 6" data-custom-field-type="href" data-custom-field-group="Section 4a" href="">
<button><span data-custom-field-name="Section 4a Button Text" data-custom-field-group="Section 4a"></span></button>
</a>
</div>
</div><div class="hpanel">
<div class="label">
<h4 data-custom-field-name="Section 4a Title 7" data-custom-field-group="Section 4a"></h4>
<h6 data-custom-field-name="Section 4a Lower Title 7" data-custom-field-group="Section 4a"></h6>
<p data-custom-field-name="Section 4a Paragraph 7" data-custom-field-type="html" data-custom-field-group="Section 4a">
<h5 data-custom-field-name="Section 4a Sub Title 7" data-custom-field-group="Section 4a"></h5>
<a data-custom-field-name="Section 4a Link URL 7" data-custom-field-type="href" data-custom-field-group="Section 4a" href="">
<button><span data-custom-field-name="Section 4a Button Text" data-custom-field-group="Section 4a"></span></button>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="">
<div class="panel">
</div>
</section>
<section class="light codexhidden">
<div class="panel">
<div class="label">
<h4 class="lato-all-caps" data-custom-field-name="Section 5 Title" data-custom-field-group="Section 5"></h4>
<h5 data-custom-field-name="Section 5 Sub Title" data-custom-field-group="Section 5"></h5>
<p data-custom-field-name="Section 5 Paragraph" data-custom-field-group="Section 5">
<a class=" button blank-hidden" data-custom-field-name="Section 5 Link" data-custom-field-type="href" data-custom-field-group="Section 5" href=""><span data-custom-field-name="Section 5 Link Label" data-custom-field-group="Section 5"></span></a>
</div>
</div>
</section>
<section class="academy hidden">
<div class="panel ">
<div class="inner">
</div>
</div>
</section>
<section class="">
<div class="panel">
</div>
</section>
<section class="trusted">
<div class="panel">
<h4 class="lato-all-caps" data-custom-field-name="Trusted Title" data-custom-field-group="Trusted">TRUSTED BY.</h4>
<p data-custom-field-name="Trusted Paragraph" data-custom-field-group="Trusted">Leading cinema camera manufacturers, major studios, product & services Partners.</p>
</div>
</section>
<section class="powered gray">
<div class="panel">
<h4 class="lato-all-caps" data-custom-field-name="Powered Title" data-custom-field-group="Powered">CAPTURED ON CODEX.</h4>
</div>
</section>
<section class="hidden">
<div class="panel">
</div>
</section>
<section class="contact">
<div class="panel">
<div class="inner">
<div class="send">
<h4 class="lato-all-caps" data-custom-field-name="Contact Title" data-custom-field-group="Contact">LET’S TALK.</h4>
<p data-custom-field-name="Contact Paragraph" data-custom-field-type="html" data-custom-field-group="Contact">Why not schedule a meeting with us to find out more how CODEX can help you work and collaborate better. Let's make good work, great.<br><br>London Soho HQ <strong>+44 203 7000 989</strong><br><br>Sometimes things can go wrong, humans will be humans after all. But should you ever worry all is lost, you'll find our support team on hand to restore both your files and your sanity, wherever you are on the planet.<br><br><strong>Need Product</strong> <strong>Support</strong>? Please <a href="https://help.codex.online/content/support" data-mce-href="https://help.codex.online/content/support">click here</a></p>
<a class="button light" data-custom-field-name="Contact Button Link" data-custom-field-type="href" data-custom-field-group="Contact" href="/contact-codex"><span data-custom-field-name="Contact Button Text" data-custom-field-group="Contact">CONTACT CODEX</span></a>
</div>
<div class="response-ok">
<h4 class="lato-all-caps" data-custom-field-name="Contact Response Ok Title" data-custom-field-group="Contact">THANK YOU.</h4>
<p data-custom-field-name="Contact Response Ok Paragraph" data-custom-field-group="Contact">Your message has been received by CODEX.<br>We will contact you shortly.</p>
</div>
<div class="totop"><img src="/asset/2e233c90-78ae-4615-812b-88abf8e6abf6"></div>
<div class="backtotop" data-custom-field-name="Back To Top" data-custom-field-group="Back To Top">^ BACK TO TOP ^</div>
<div class="social"></div>
</div>
</div>
</section>
</div>
</div>
</div>
<!--<div class="menu">-->
<!-- <div class="pixhidden codex-menu strip">-->
<!-- <div class="logo"></div>-->
<!-- <div class="language-frame"></div>-->
<!-- <ul class="top">-->
<!-- <li class="products">PRODUCTS-->
<!-- <ul>-->
<!-- <li><a target="_blank" href="https://codex.online/products/media">RECORDING MEDIA</a></li>-->
<!-- <li><a target="_blank" href="https://codex.online/products/media-stations">MEDIA STATIONS</a></li>-->
<!-- <li><a target="_blank" href="https://codex.online/products/device-manager">DEVICE MANAGER</a></li>-->
<!-- <li><a target="_blank" href="https://x2x.media/codex-hde">HDE</a></li>-->
<!-- </ul>-->
<!-- </li>-->
<!-- <li class="spacer">|</li>-->
<!-- <li class="support"><a target="_blank" href="https://help.codex.online/">SUPPORT</a></li>-->
<!-- <li class="spacer">|</li>-->
<!-- <li class="login"><a target="_blank" href="https://codex.online/login?redirect=https://codex.online/dashboard">CLIENT LOGIN</a></li>-->
<!-- <div class=" client-login">-->
<!-- <div class="pure-g">-->
<!-- <div class="pure-u-1 codexlogin">-->
<!-- <img id="user-login" src="/asset/b87a396d-b997-4e44-8e3d-23c56bc6cae2">-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="panel">-->
<!-- <div class="login-options">-->
<!-- <ul>-->
<!-- <li class="log-in"><a href="/redirect/login">SIGN IN</a></li>-->
<!-- <li class="dashboard"><a href="https://codex.online/dashboard">MY ACCOUNT</a></li>-->
<!-- <li class="logout"><a href="?action=logout">SIGN OUT</a></li>-->
<!-- <li class="register"><a href="https://codex.online/support-registration">REGISTER</a></li>-->
<!-- </ul>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </ul>-->
<!-- </div>-->
<!-- <div class="burger"></div>-->
<!-- <div class="codexhidden overlay relativefont" data-relative-font-factor="50">-->
<!-- <ul class="top">-->
<!-- <li class="support"><a href="https://help.pix.online">SUPPORT</a></li>-->
<!-- <li class="spacer">|</li>-->
<!-- <li class="login pix-login"><a href="https://project.pixsystem.com/web/">CLIENT LOGIN</a></li>-->
<!-- </ul>-->
<!-- <div class="close"></div>-->
<!-- <ul class="links">-->
<!-- <li data-section="1" data-mobile-section="2"><a href="#">SEE</a></li>-->
<!-- <li data-section="2" data-mobile-section="4"><a href="#">SHARE</a></li>-->
<!-- <li data-section="3" data-mobile-section="6"><a href="#">COLLABORATE</a></li>-->
<!-- <li data-section="4" data-mobile-section="8" class="hidden"><a href="#">NEW PIX</a></li>-->
<!-- <li data-section="6" data-mobile-section="11"><i><a href="#">CASE STUDIES</a></i></li>-->
<!-- <li data-section="7" data-mobile-section="12"><i><a href="#">PROXIES TO PIX</a></i></li>-->
<!-- <li data-section="8" data-mobile-section="14"><i><a href="#">AWARDS</a></i></li>-->
<!-- <li data-section="9" data-mobile-section="16"><i><a href="#">TESTIMONIALS</a></i></li>-->
<!-- <li data-section="10" data-mobile-section="17"><i><a href="#">CLIENTS</a></i></li>-->
<!-- <li data-section="11" data-mobile-section="18"><i><a href="#">POWERED BY PIX</a></i></li>-->
<!-- <li data-section="12" data-mobile-section="19"><i><a href="#">CONTACT</a></i></li>-->
<!-- <li><i><a href="https://x2x.media">X2X</a></i></li>-->
<!-- <li>-->
<!-- <a class="banner" data-custom-field-name="Banner Link" data-custom-field-type="href" data-custom-field-group="Section 1">-->
<!-- <img data-custom-field-name="Section 1 Banner" data-custom-field-type="asset" data-custom-field-group="Section 1">-->
<!-- </a>-->
<!-- </li>-->
<!-- </ul>-->
<!-- <button type="button" onclick="newsletter.showRegistration()" class="button"><span>JOIN THE PIX COMMUNITY</span></button>-->
<!-- </div>-->
<!-- <div class="pixhidden overlay relativefont" data-relative-font-factor="50">-->
<!-- <ul class="top">-->
<!-- <li class="support"><a target="_blank" href="https://help.codex.online/">SUPPORT</a></li>-->
<!-- <li class="spacer">|</li>-->
<!-- <li class="login"><a target="_blank" href="https://codex.online/login?redirect=https://codex.online/dashboard">CLIENT LOGIN</a></li>-->
<!-- </ul>-->
<!-- <div class="close"></div>-->
<!-- <div class="links">-->
<!-- <ul>-->
<!-- <li data-section="1" data-mobile-section="2"><a href="#">FOCUS</a></li>-->
<!-- <li data-section="2" data-mobile-section="4"><a href="#">CAPTURE</a></li>-->
<!-- <li data-section="3" data-mobile-section="6"><a href="#">SHARE</a></li>-->
<!-- <li data-section="4" data-mobile-section="8"><a href="#">SAVE</a></li>-->
<!-- <li data-section="6" data-mobile-section="11"><i><a href="#">CASE STUDIES</a></i></li>-->
<!-- <li data-section="7" data-mobile-section="13" class="hidden"><i><a href="#">PROXIES TO PIX</a></i></li>-->
<!-- <li data-section="8" data-mobile-section="14"><i><a href="#">AWARDS</a></i></li>-->
<!-- <li data-section="9" data-mobile-section="15"><i><a href="#">TESTIMONIALS</a></i></li>-->
<!-- <li data-section="10" data-mobile-section="16"><i><a href="#">CLIENTS</a></i></li>-->
<!-- <li data-section="11" data-mobile-section="17"><i><a href="#">CAPTURED ON CODEX</a></i></li>-->
<!-- <li data-section="12" data-mobile-section="18"><i><a href="#">CONTACT</a></i></li>-->
<!-- <li><i><a target="_blank" href="https://x2x.media">X2X</a></i></li>-->
<!-- </ul>-->
<!-- <hr>-->
<!-- <ul>-->
<!-- <li>PRODUCT RANGE</li>-->
<!-- <li><i><a target="_blank" href="/products/media">RECORDING MEDIA</a></i></li>-->
<!-- <li><i><a target="_blank" href="/products/media-stations">MEDIA STATIONS</a></i></li>-->
<!-- <li><i><a target="_blank" href="/products/device-manager">DEVICE MANAGER</a></i></li>-->
<!-- <li><i><a target="_blank" href="/codex-hde">HDE</a></i></li>-->
<!-- </ul>-->
<!-- </div>-->
<!-- <button type="button" onclick="newsletter.showRegistration()" class="button"><span>JOIN THE CODEX COMMUNITY</span></button>-->
<!-- </div>-->
<!--</div>-->
<div id="quotes" style="display: none;" data-custom-field-name="Quotes" data-custom-field-type="html" data-custom-field-group="Quotes"><table class=""><tbody><tr><td>IF YOU WANT TOTAL FIDELITY, AND A WORKFLOW YOU CAN RELY ON, CHOOSE CODEX</td><td>Francesco Giardiello, DIT</td></tr><tr><td>WHAT CODEX HAS GIVEN US IS THE DEPENDABILITY THAT WE HAD WITH FILM MAGAZINES</td><td>Gabriel Beristain, BSC, ASC</td></tr><tr><td>CODEX IS A WELL-DESIGNED TOOL. YOU DON'T NEED TO WORRY ABOUT IT. IT'S PEACE OF MIND. TECHNOLOGY SHOULD NOT CLOG YOUR MIND WITH TECHNICAL INFORMATION. I WOULD RECOMMEND IT TO ANYONE</td><td>Anna Foerster, ASC, Cinematographer/Director</td></tr><tr><td>CODEX REPRESENTS A SIMPLE, ELEGANT, ALL-IN-ONE SOLUTION FOR THE DIGITAL CAMERA WORKFLOW. I CONSIDER IT TO BE A ROCK-SOLID PLATFORM</td><td>Bruce Markoe, SVP, Head of Post Production, IMAX</td></tr><tr><td>YOU JUST GET TO YOUR NEXT CONVERSATION MORE QUICKLY. IT'S ABOUT GETTING MORE BITES AT THE APPLE</td><td>David Fincher, Director</td></tr></tbody></table></div>
<script src="https://www.google.com/recaptcha/api.js?render=6LcV90seAAAAAKYt78TzVmx_88LY4aCspwrVpO8e"></script><script type="text/javascript">var app=(()=>{
var init=()=>{
initRedirects();
//initHeight();
initImages();
initMenu();
// initLazyImages();
// loadLazyImages();
initPowered();
initPinning();
initPinTriggers();
//initScrollSnap();
initRelativeFont();
initTrusted();
adjustText();
initContact();
initMobilePin();
// initFooter();
initBackToTop();
getImages();
updateQuotes();
initAutoscroll();
initHScroll();
initSliders();
hideBlankElements();
gsap.to(".codex", { opacity :1, duration:0.7, delay: 1})
},
initHeight=()=>{
$(window).resize(()=>{
document.documentElement.style.setProperty("--app-height",document.body.clientHeight + "px");
ScrollTrigger.refresh();
}).resize();
},
panelTimelines=(()=>{
var i=2; //skip first panel as its visible at initial scroll position. animation starts from panel 2 onward
return [
(()=>{
t=gsap.timeline();
t.fromTo(".right section:nth-child(" + i + ")", { opacity : 0, "pointer-events" : "none" , duration : 0.1}, {
opacity : 1,
"pointer-events" : "all",
onUpdate : function(){
// console.log(self);
},
//paused : true
})
.fromTo(".right section:nth-child(" + i + ") h4", {top : "60vh"}, { top : "0", duration : 0.5, delay : 0.5}, "0")
.fromTo(".right section:nth-child(" + i + ") h6", {top : "60vh"}, { top : "0", duration : 0.5 }, ">-0.2")
.fromTo(".right section:nth-child(" + i + ") p", {top : "60vh"}, { top : "0", duration : 0.5 }, ">-0.2")
.fromTo(".right section:first-child",{ opacity : 1},{
opacity : 0,
duration : 0.5,
onComplete: () =>{
t.set(".right section:first-child",{display: "block", opacity : 0});
}
}, "0") //fade in first panel
;
t.pause();
return t;
})(),
(()=>{
i++;
t=gsap.timeline();
t.fromTo(".right section:nth-child(" + i + ")", { opacity : 0, "pointer-events" : "none", duration : 0.1}, {
opacity : 1,
"pointer-events" : "all",
onUpdate : self =>{
//console.log(this);
},
//paused : true
})
.fromTo(".right section:nth-child(" + i + ") h4", {top : "60vh"}, { top : "0", duration : 0.5, delay : 0.5}, "0")
.fromTo(".right section:nth-child(" + i + ") h6", {top : "60vh"}, { top : "0", duration : 0.5 }, ">-0.2")
.fromTo(".right section:nth-child(" + i + ") p", {top : "60vh"}, { top : "0", duration : 0.5 }, ">-0.2")
// .set(".right section:first-child",{ opacity : 0,})
;
t.pause();
return t;
})(),
(()=>{
i++;
t=gsap.timeline();
t.fromTo(".right section:nth-child(" + i + ")", { opacity : 0, "pointer-events" : "none", duration : 1}, {
opacity : 1,
"pointer-events" : "all",
onUpdate : self =>{
//console.log(self);
},
//paused : true
})
.fromTo(".right section:nth-child(" + i + ") h4", {top : "60vh"}, { top : "0", duration : 0.5, delay : 0.5}, "0")
.fromTo(".right section:nth-child(" + i + ") h6", {top : "60vh"}, { top : "0", duration : 0.5 }, ">-0.2")
.fromTo(".right section:nth-child(" + i + ") p", {top : "60vh"}, { top : "0", duration : 0.5 }, ">-0.2")
// .set(".right section:first-child",{ opacity : 0,})
;
t.pause();
return t;
})(),
(()=>{
i++;
t=gsap.timeline();
t.fromTo(".right section:nth-child(" + i + ")", { opacity : 0, "pointer-events" : "none", duration : 1}, {
opacity : 1,
"pointer-events" : "all",
onUpdate : self =>{
//console.log(self);
},
//paused : true
})
.fromTo(".right section:nth-child(" + i + ") h4", {top : "60vh"}, { top : "0", duration : 0.5, delay : 0.5}, "0")
.fromTo(".right section:nth-child(" + i + ") h6", {top : "60vh"}, { top : "0", duration : 0.5 }, ">-0.2")
.fromTo(".right section:nth-child(" + i + ") p", {top : "60vh"}, { top : "0", duration : 0.5 }, ">-0.2")
;
t.pause();
return t;
})(),
(()=>{
i++;
t=gsap.timeline();
t.fromTo(".right section:nth-child(" + i + ")", { opacity : 0, "pointer-events" : "none", duration : 1}, {
opacity : 1,
"pointer-events" : "all",
onUpdate : self =>{
//console.log(self);
},
//paused : true
})
//first hpanel
.fromTo(".right section:nth-child(" + i + ") h2", {top : "60vh"}, { top : "0", duration : 0.5, delay : 0.5}, "0")
.fromTo(".right section:nth-child(" + i + ") h3", {top : "60vh"}, { top : "0", duration : 0.5 }, ">-0.2")
.fromTo(".right section:nth-child(" + i + ") .hpanel:first-child button", {top : "60vh"}, { top : "0", duration : 0.5 }, ">-0.2")
//other hpanels
.fromTo(".right section:nth-child(" + i + ") h4", {top : "60vh"}, { top : "0", duration : 0.5, delay : 0.5}, "0")
.fromTo(".right section:nth-child(" + i + ") h6", {top : "60vh"}, { top : "0", duration : 0.5 }, ">-0.2")
.fromTo(".right section:nth-child(" + i + ") p", {top : "60vh"}, { top : "0", duration : 0.5 }, ">-0.2")
.fromTo(".right section:nth-child(" + i + ") h5", {top : "60vh"}, { top : "0", duration : 0.5 }, ">-0.2")
.fromTo(".right section:nth-child(" + i + ") .hpanel:not(.hpanel:first-child) button", {top : "60vh"}, { top : "0", duration : 0.5 }, ">-0.2")
;
t.pause();
return t;
})(),
//case study
(()=>{
i++;
t=gsap.timeline();
t.fromTo(".right section:nth-child(" + i + ")", { opacity : 0, "pointer-events" : "none", duration : 1}, {
opacity : 1,
"pointer-events" : "all",
onUpdate : self =>{
//console.log(self);
},
//paused : true
})
;
t.pause();
return t;
})(),
//teradek
(()=>{
i++;
t=gsap.timeline();
t.fromTo(".right section:nth-child(" + i + ")", { opacity : 0, "pointer-events" : "none", duration : 1}, {
opacity : 1,
"pointer-events" : "all",
onUpdate : self =>{
//console.log(self);
},
//paused : true
})
.fromTo(".right section:nth-child(" + i + ") h4", {top : "60vh"}, { top : "0", duration : 0.5, delay : 0.5}, "0")
.fromTo(".right section:nth-child(" + i + ") h5", {top : "60vh"}, { top : "0", duration : 0.5 }, ">-0.2")
.fromTo(".right section:nth-child(" + i + ") p", {top : "60vh"}, { top : "0", duration : 0.5 }, ">-0.2")
.fromTo(".right section:nth-child(" + i + ") .button", {top : "60vh"}, { top : "0", duration : 0.5 }, ">-0.2")
;
t.pause();
return t;
})(),
//awards
(()=>{
i++;
t=gsap.timeline();
t.set(".right section:nth-child(" + i + ")",{opacity : 0})
.fromTo(".desktop .awards-full .inner:nth-child(1)",{ opacity : 0, y: "40px"},{ opacity : 1, y: "0px", duration : 1 }, "0.5")
.fromTo(".desktop .awards-full .inner:nth-child(2)",{ opacity : 0, y: "40px"},{ opacity : 1, y: "0px", duration : 1 }, "1")
.fromTo(".desktop .awards-full .inner:nth-child(3)",{ opacity : 0, y: "40px"},{ opacity : 1, y: "0px", duration : 1 }, "1.5")
;
t.pause();
return t;
})(),
//testimonials
(()=>{
i++;
t=gsap.timeline();
t.fromTo(".right section:nth-child(" + i + ")", { opacity : 0, "pointer-events" : "none", duration : 1}, {
opacity : 1,
"pointer-events" : "all",
onUpdate : self =>{
//console.log(self);
},
onComplete : ()=>{
$(".right section").removeClass("active");
$(".right section:nth-child(" + i + ")")[0].classList.add("active");
},
//paused : true
});
t.pause();
return t;
})(),
//Trusted by
(()=>{
i++;
t=gsap.timeline();
t.fromTo(".right section:nth-child(" + i + ")", { display: "none", "pointer-events" : "none", opacity : 0, duration : 1}, {
display:"block",
opacity : 1,
"pointer-events" : "all",
onUpdate : self =>{
//console.log(self);
},
onComplete : ()=>{
$(".right section").removeClass("active");
$(".right section:nth-child(" + i + ")")[0].classList.add("active");
},
//paused : true
})
;
t.pause();
return t;
})(),
//Powered by
(()=>{
i++;
t=gsap.timeline();
t.fromTo(".right section:nth-child(" + i + ")", { display: "none", "pointer-events" : "none", opacity : 0, duration : 0.1}, {
display:"block",
opacity : 0,
"pointer-events" : "all",
onUpdate : self =>{
//console.log(self);
},
onComplete : ()=>{
$(".right section").removeClass("active");
$(".right section:nth-child(" + i + ")")[0].classList.add("active");
},
//paused : true
})
// .to(".right section:first-child",{ opacity : 0})
;
t.pause();
return t;
})(),
(()=>{
i++;
t=gsap.timeline();
t.fromTo(".right section:nth-child(" + i + ")", { display: "none", "pointer-events" : "none", opacity : 0, duration : 1}, {
display:"block",
opacity : 0,
"pointer-events" : "all",
onUpdate : self =>{
//console.log(self);
},
onComplete : ()=>{
$(".right section").removeClass("active");
$(".right section:nth-child(" + i + ")")[0].classList.add("active");
},
//paused : true
})
.fromTo(".right section:first-child",{ opacity : 1, duration : 0.2},{ display: "none", "pointer-events" : "none", opacity : 0})
.from(".desktop .contact .inner h4", {y:60, opacity:0, duration: 0.7, delay: 0, ease: "power1.inOut"})
.from(".desktop .contact .inner p", {y:60, opacity:0, duration: 0.7, delay: 0, ease: "power1.inOut"})
.from(".desktop .contact .inner a", {y:60, opacity:0, duration: 0.7, delay: 0, ease: "power1.inOut"})
;
t.pause();
return t;
})(),
//Contact
(()=>{
i++;
t=gsap.timeline();
t.fromTo(".right section:nth-child(" + i + ")", { display: "none", "pointer-events" : "none", opacity : 0, duration : 1}, {
display:"block",
opacity : 0,
"pointer-events" : "all",
onUpdate : self =>{
//console.log(self);
},
onComplete : ()=>{
$(".right section").removeClass("active");
$(".right section:nth-child(" + i + ")")[0].classList.add("active");
},
//paused : true
})
.fromTo(".right section:first-child",{ opacity : 1, duration : 0.2},{ display: "none", "pointer-events" : "none", opacity : 0})
;
t.pause();
return t;
})(),
/*
(()=>{
t=gsap.timeline();
t.fromTo(".right section:nth-child(10)", { display: "none", opacity : 0, duration : 1,
onComplete : ()=>{
//footer.show();
console.log("complete");
},
onReverseComplete : ()=>{
//footer.hide();
console.log("reverse");
}
}, {
display : "block",
opacity : 1,
onUpdate : self =>{
//console.log(self);
},
//paused : true
});
t.pause();
return t;
})()
*/
];
})(),
pins=[],
initPinning=()=>{
gsap.utils.toArray(".left section").forEach((panel, i) => {
var s=ScrollTrigger.create({
trigger: panel,
end: i==6 || i==7 || i==9 ? "+=25%" : "+=125%", //case study and testimonials has shorter pin length
start: "top top",
pin: i != 11 && i != 13, //don't pin powered content or contact
// pin: i != 11,
pinSpacing: i==6 ||i==7 || i==9, //case study and testimonials needs pin spacing
id: i,
//scroller: ".outer .left"
});
s.index=i+1;
pins.push(s);
// const contactTrigger = ScrollTrigger.getById(12);
// if (contactTrigger) {
// // Disable pinning for the panel
// contactTrigger.kill(true); // Removes the ScrollTrigger instance
// }
/*
//desktop panel fadein timeline
if( i != 5){
gsap.timeline({
scrollTrigger : {
trigger: panel,
scrub : true,
start: "top bottom",
end : "top top",
//markers: true,
onUpdate: self =>{
console.log(self.progress);
},
onEnter: self => {
console.log("enter");
console.log(self);
},
onEnterBack: self => {
console.log("enterBack");
console.log(self);
}
}
}).fromTo(panel, {opacity:0.2, filter:"blur(8px)"}, {opacity: 1, filter: "blur(0px)"})
;
}
*/
});
/*
ScrollTrigger.create({
trigger: ".case-study",
end: "+=25%",
start: "top top",
pin: true, //case study, powered
pinSpacing: true,
//scroller: ".outer .left"
});
*/
},
poweredPin,
whatsNewTimeline,
initPinTriggers=()=>{
gsap.utils.toArray(".left section").filter((e,i)=> { return i>0;}).forEach((panel, i) => {
var s=ScrollTrigger.create({
trigger: panel,
start: "top center",
//scroller: ".outer .left",
onUpdate: self =>{
//console.log(self.index);
if(self.index!=undefined && panelTimelines[self.index]!=undefined){
//panelTimelines[self.index].progress(self.progress);
//console.log(self.progress);
}
},
onEnter: self =>{
if(self.index!=undefined && panelTimelines[self.index]!=undefined){
panelTimelines[self.index].play();
}
},
onEnterBack: self =>{
if(self.index!=undefined && panelTimelines[self.index]!=undefined){
panelTimelines[self.index].play();
}
},
onLeave: self=>{
if(self.index!=undefined && panelTimelines[self.index]!=undefined){
panelTimelines[self.index].reverse();
}
},
onLeaveBack: self=>{
if(self.index!=undefined && panelTimelines[self.index]!=undefined){
panelTimelines[self.index].reverse();
}
}
});
s.index=i;
/*
ScrollTrigger.create({
trigger: panel,
scroller: ".outer .left",
start: "top top",
markers: true,
onUpdate: self =>{
console.log(self.progress);
},
onEnter: self => {
console.log("enter");
console.log(self);
},
onEnterBack: self => {
console.log("enterBack");
console.log(self);
}
});
*/
});
poweredPin = ScrollTrigger.create({
trigger: "#content2 .left .powered h4",
start: "top top",
endTrigger: "#content2 .left .powered .panel",
end: ()=>{
return "+=" + ($(".desktop .powered").height() - $(".desktop .powered h4")[0].getBoundingClientRect().height);
},
pin: true,
pinSpacing: false,
pinType: "fixed",
//scroller: ".outer .left"
});
},
scrollSnap,
sectionPositions,
currentSection,
scrollSnapGovernor,
lastWheelEventTimeStamp=0,
isScrolling = false,
touchStartY,
touchStartScrollTop,
getSectionSnapPositions=() => {
//gets fractional positions of desktop sections
var height=0;
var totalHeight = $(".left section").toArray().map(e => e.clientHeight).reduce((p,c)=> p + c) - window.innerHeight;
return [0].concat($(".left section").toArray().map(e => { height += e.clientHeight; return height / totalHeight; }));
},
getSectionPositions=()=>{
//gets top pixel positions for desktop sections
var height = 0;
return [0].concat($(".left section").toArray().map(e => { return height += e.clientHeight; }));
},
initScrollSnap=()=>{
scrollSnap=ScrollTrigger.create({
snap: {
//snapTo : 1 / ($(".left section").length -1),
duration: 0.5,
delay: 0,
inertia: false,
onComplete : self => {
//console.log(self.vars.snap.snapTo.findIndex(e=> e==self.progress));
}
},
//scroller: ".outer .left",
onRefresh: self => {
self.vars.snap.snapTo = getSectionSnapPositions();
sectionPositions = getSectionPositions();
},
onUpdate: self =>{
//console.log(self.progress);
},
onEnter : self => {
// console.log("enter snap " + self.vars.snap.snapTo.findIndex(e => e >= self.progress));
}
});
scrollSnapGovernor = ScrollTrigger.create({
//scroller: ".outer .left",
trigger: ".left section:nth-child(6)",
//endTrigger : ".left section:nth-child(7)",
start: "top top",
end : "bottom bottom",
onEnter : ()=>{
//console.log("powered enter");
scrollSnap.disable(false);
},
onLeave : ()=>{
//console.log("powered leave");
scrollSnap.enable();
},
onEnterBack : ()=>{
//console.log("powered enter back");
scrollSnap.disable(false);
},
onLeaveBack : ()=>{
//console.log("powered leave back");
scrollSnap.enable();
}
});
scrollSnapGovernor2 = ScrollTrigger.create({
//scroller: ".outer .left",
trigger: ".left section:nth-child(7)",
//endTrigger : ".left section:nth-child(7)",
start: "top top",
end : "bottom bottom",
onEnter : ()=>{
//console.log("powered enter");
scrollSnap.disable(false);
},
onLeave : ()=>{
//console.log("powered leave");
scrollSnap.enable();
},
onEnterBack : ()=>{
//console.log("powered enter back");
scrollSnap.disable(false);
},
onLeaveBack : ()=>{
//console.log("powered leave back");
scrollSnap.enable();
}
});
var
wheelHandler = e=>{
scrollTop = Math.round($(".outer .left")[0].scrollTop) + 10;
currentPositionIndex = sectionPositions.findIndex(p => p > scrollTop)-1;
direction = e.originalEvent.deltaY > 0;
moveSection(e, direction, currentPositionIndex, scrollTop);
},
touchStartHandler=e=>{
touchStartY=e.originalEvent.changedTouches[0].clientY;
touchStartScrollTop = $(".outer .left")[0].scrollTop;
},
touchMoveHandler=e=>{
scrollTop = $(".outer .left")[0].scrollTop;
currentPositionIndex = sectionPositions.findIndex(p => p > scrollTop)-1;
var direction;
if(e.originalEvent.changedTouches[0].clientY > (touchStartY + 20)){
direction=false;
} else
if(e.originalEvent.changedTouches[0].clientY < (touchStartY - 20)){
direction=true;
}
else{
e.preventDefault();
return
}
moveSection(e, direction, currentPositionIndex, scrollTop);
},
moveSection=(e, direction, currentPositionIndex, scrollTop)=>{
if(ScrollTrigger.isInViewport(".left section:nth-child(6)")){
if(!direction && scrollTop <= sectionPositions[currentPositionIndex]){ //scroll up from top of powered - move to previous section
gotoSection(currentPositionIndex -1);
} else{
//do nothing / normal scroll behavior for powered section
//touch hack
if(!isMobile() && e.type=="touchmove"){
$(".outer .left")[0].scrollTop = touchStartScrollTop + (touchStartY - e.originalEvent.changedTouches[0].clientY);
}
}
}
/*
else if(ScrollTrigger.isInViewport(".left section:nth-child(9)") && e.timeStamp > lastWheelEventTimeStamp + 1500 ){
if(direction && !footer.isPanelVisible()){
e.preventDefault()
lastWheelEventTimeStamp = e.timeStamp;
footer.showPanel();
}
else if(!direction && footer.isPanelVisible()){
e.preventDefault();
lastWheelEventTimeStamp = e.timeStamp;
footer.hidePanel();
}
}
*/
else{
//main section scroll behavior
e.preventDefault();
if(!isScrolling && e.timeStamp > lastWheelEventTimeStamp + 1500){
lastWheelEventTimeStamp = e.timeStamp;
gotoSection(currentPositionIndex + (direction ? 1 : -1));
}
}
//if(currentPositionIndex !=5 || (currentPositionIndex == 5 && (!scrollSnapGovernor.isActive) || (!direction && currentPositionIndex ==5 && !scrollSnapGovernor.isActive)){
if(!ScrollTrigger.isInViewport(".left section:nth-child(6)") && !ScrollTrigger.isInViewport(".left section:nth-child(7)")){
}
}
;
$(".outer .left").on("wheel",wheelHandler)
.on("touchstart", touchStartHandler)
.on("touchmove", touchMoveHandler)
;
},
gotoSection=(index)=>{
gsap.to(window, {
scrollTo : isMobile() ? $(".mobile .pin-spacer")[index] : $(".desktop .left .pin-spacer")[index],
duration: "0.7",
ease: "power1.inOut",
onStart : ()=>{
isScrolling=true;
},
onComplete : ()=> {
isScrolling=false;
lastScrollTop = window.scrollTop; //set lastScrollTop to stop top menu strip showing when scrolling up
}
});
},
initLazyImages=()=>{
$("div.img").each((i,e)=>{
aspect=parseInt(e.dataset.y) / parseInt(e.dataset.x) * 100;
$(e).append("<div style=\"padding-bottom:" + aspect +"%;\"><div></div></div>");
});
},
loadLazyImages=()=>{
$("img[lazy], iframe[lazy]").each((i,e)=>{
e.setAttribute("src",e.getAttribute("srcx"));
});
$("div.img").each((i,e)=>{
$("div > div", e).css({"background-image" : "url(/asset/" + e.dataset.guid});
});
},
initImages=()=>{
$(".bg-img").each((i,e)=>{
$(e).css({"background-position" : $(e).data().var3});
});
},
scrollDeadzone = 80,
lastScrollTop = 0,
initMenu=()=>{
menuTrigger = ScrollTrigger.create({
//scroller: ".outer .left",
onRefresh: self =>{
//console.log(self);
//self.vars.sectionPositions = getSectionSnapPositions();
},
onUpdate: self => {
//activeSectionIndex=self.vars.sectionPositions.findIndex(e => e> self.progress)-1;
//console.log(activeSectionIndex);
//$activeSection = $($(".left section")[activeSectionIndex]);
//$menu = $(".desktop .menu");
/*
["logo-light", "logo-hidden", "menu-light", "menu-hidden"].forEach(e=>{
if($activeSection.hasClass(e))
$menu.addClass(e);
else
$menu.removeClass(e);
});
*/
},
//sectionPositions : getSectionSnapPositions()
});
//menu auto hide
lastScrollTop = $(window).scrollTop();
$(window).scroll(menuScrollHandler);
//$(".outer .left").scroll(menuScrollHandler);
//attach handlers
$("#content2 .menu .burger").click(menuClickHandler);
$("#content2 .menu .links li").click(menuItemClickHandler);
//move language into menu
$(".menu .language-frame").append($("#language"));
// $(".menu .products").click(()=>{
// $(".menu .products ul").slideToggle();
// })
},
menuScrollHandler=e => {
scrollTop = $(e.currentTarget).scrollTop();
if(scrollTop > lastScrollTop + scrollDeadzone){
// hideMenu();
lastScrollTop = scrollTop;
return;
}
if(!isScrolling && (scrollTop < lastScrollTop - scrollDeadzone) || scrollTop < scrollDeadzone){
// showMenu();
lastScrollTop = scrollTop;
return;
}
},
// hideMenu = () =>{
// gsap.to("#content2 .menu .strip",{ y : "-100%"});
// $("#content2 .menu .strip").addClass("hide");
// },
// showMenu = () =>{
// gsap.to("#content2 .menu .strip",{ y : "0%"});
// $("#content2 .menu .strip").removeClass("hide");
// }
menuClickHandler=e=>{
$(".menu .burger").toggleClass("active");
$(".pix-menu ul.top").toggleClass("active");
$(".codex-menu ul.top").toggleClass("active");
$(".menu .overlay").slideToggle();
},
menuItemClickHandler=e=>{
if(e.target.attributes.href.value.length>1) return; //allow default action for external link
e.preventDefault();
gotoSection(isMobile() ? e.currentTarget.dataset.mobileSection : e.currentTarget.dataset.section);
/*
if(isMobile()){
gsap.to(window, { scrollTo : getMobileSectionPositions()[e.currentTarget.dataset.mobileSection] });
}
else{
gsap.to(window, { scrollTo : getSectionPositions()[e.currentTarget.dataset.section] });
}
*/
$("#content2 .menu .burger").removeClass("active");
$(".pix-menu ul.top").removeClass("active");
$(".codex-menu ul.top").removeClass("active");
$("#content2 .menu .overlay").slideUp();
},
initPowered=()=>{
let guid = $(".guid").text(), // grab dynamic GUID
// var guid="d7e2378c-3007-4a30-83fc-f64a8753cb87",
data,
pageSize = 100,
pages = 1,
startRows = 4,
getData=()=>{
//$.get("/getassetgroupjson?guid=18c3a3bc-d811-4fbd-9642-64152c8cd2aa").done(d=>{
$.get("/getassetgroupjson?guid=" + guid).done(d=>{
data=d;
player.setAssets(data);
setTimeout(()=>{player.initAutoplay();},1500);
renderList(startRows);
});
},
renderList=(maxRows)=>{
$container = $(".powered-list");
$container.html("");
$container.append(getColumnsHtml(maxRows));
attachHandlers();
$(".powered").show();
ScrollTrigger.refresh();
},
getColumnsHtml=(maxRows)=>{
html = "";
for(c=2;c<=7;c++){
html+="<div class=\"cols-" + c +"\">";
html+=getListHtml(c,maxRows);
html+="</div>";
}
if(maxRows!=null){
html += "<div class=\"next\"></div>";
}
return html;
},
getListHtml=(columns,maxRows)=>{
var domains=["content1.codex.online","content2.codex.online","content3.codex.online","content4.codex.online","content5.codex.online"];
var html = "";
for(col=0; col<columns; col++){
width = ((1/columns)*100).toFixed(5);
html += "<div class=\"column\" style=\"width: " + width + "%\">";
for(i=col; i<pages * pageSize && (maxRows == null || i<(columns*maxRows)) && i<data.length; i+=columns){
item = data[i];
html += "<div class=\"tile\" data-id=\"" + i + "\">"
+ "<div>"
+ "<div class=\"image\" style=\"padding-bottom:" + item.ImageY / item.ImageX * 100 + "%;\">"
+ "<div class=\"inner\" style=\"background-image:url(https://" + domains[i%domains.length] + "/asset/" + item.Guid + "-650--50)\"></div>"
+ "<div class=\"overlay\"><label>" + (item.Name == null ? "" : item.Name).toUpperCase() + "</label><button>PLAY TRAILER</button></div>"
+ "</div>"
+"</div>"
+ "</div>";
}
html += "</div>"
}
return html;
},
attachHandlers=()=>{
$(".tile", $container).click(tileClickHandler);
$(".next", $container).click(showNext);
},
tileClickHandler=(e)=>{
id=$(e.currentTarget,$container).data().id;
player.createPlayer(data[id]);
},
showNext=()=>{
renderList();
ScrollTrigger.refresh();
}
;
getData();
},
initTrusted=()=>{
let guid = $('.trusted-guid').text(), // grab dynamic trusted tiles guid
// var guid="2a713c17-11a5-4c78-b5e0-0fbf0d1e23b9",
data,
getData=()=>{
$.get("/getassetgroupjson?guid=" + guid).done(d=>{
data=d;
setTimeout(()=>{player.initAutoplay();},1500);
renderList();
});
},
renderList=()=>{
$container = $(".trusted .tiles");
$container.append(getTiles());
},
getTiles=(columns)=>{
var domains=["content1.codex.online","content2.codex.online","content3.codex.online","content4.codex.online","content5.codex.online"];
var html = "";
data.forEach((a,i)=>{
html += "<div class=\"tile\">"
+ "<div class=\"image\">"
+ "<div class=\"inner\" style=\"background-image:url(https://" + domains[i%domains.length] + "/asset/" + a.Guid + "-300--50);"
+ ((a.Var1 !=null || a.Var2 != null) ? " transform: " : "")
+ (a.Var2 == null ? " translate(-50%, -50%)" : (" translate(" + a.Var2 + ")"))
+ (a.Var1 == null ? " scale(100%)" : (" scale(" + a.Var1 + ")"))
+ ";\">"
+ "</div>"
+ "</div>"
+ "</div>";
});
return html;
}
;
getData();
},
adjustText=()=>{
if(!$("body").hasClass("languagear")){
$("h4, h2").each((i,e)=>{
split = new SplitText(e, {type: "words,chars"});
split.chars.forEach(e=>{
$(e).attr("data-char",e.innerText);
});
/*
split.chars.filter((e,i,a)=>{ return i<a.length-1 && e.innerText == "E" && a[i+1].innerText=="R";}).forEach(e=>{
$(e).css({"margin-right":"-0.03em"});
});
*/
});
}
},
initContact=()=>{
$(".contact form").submit(showCaptcha);
},
showCaptcha=e=>{
//recaptcha v2
var form = e.currentTarget,
time=(new Date).getTime(),
$dialog=$("<div id=\"captchaDialog" + time + "\"></div>").dialog({
width: 350,
height : 150,
autoResize : false,
resizable : false,
classes : {"ui-dialog" : "dialog"}
});
grecaptcha.render("captchaDialog" + time, {
sitekey : "6Lfyt-USAAAAAJa2gIGu1WCWS4KRR8CMpkoChpcD",
theme : "dark",
callback : token=>{
postForm(token, form);
$dialog.dialog("close");
grecaptcha.reset();
}
});
e.preventDefault();
return false;
},
postForm=(token, form)=>{
$("input[name=g-recaptcha-response]",form).val(token);
//$(form).submit();
$.post(window.location.href, $(form).serialize()).done(data=>{
if(data=="ok"){
$(".contact .send").hide();
$(".contact .response-ok").show();
}
});
},
validateForm=e=>{
//recaptcha v3
form = e.currentTarget.parentElement;
//get recaptcha token, add it to form and submit(post)
grecaptcha.execute($("input[name=sitekey]").val(), {action: 'submit'}).then(token=>{postForm(token,form);});
},
initMobilePin=()=>{
gsap.utils.toArray(".mobile section.pin").forEach((panel, i, a) => {
var adjustedIndex = i + 1; // Adjust the index by adding 1
ScrollTrigger.create({
trigger: panel,
start: "top top",
pin: i !== 18, // Skip pinning for section 17
pinSpacing: false,
pinType: "fixed",
onEnter: self => {
// Update menu when entering a section
updateMenu(self.vars.pins[self.vars.index]); // Use the current section's pin
},
onLeaveBack: self => {
// Update menu when leaving a section
if (self.vars.index === 16) {
// If leaving section 17, update menu to previous section
updateMenu(self.vars.pins[self.vars.index - 2]);
} else {
// Otherwise, update menu to the previous section
updateMenu(self.vars.pins[self.vars.index - 1]);
}
},
index: adjustedIndex - 1, // Set adjusted index
pins: a
});
// gsap.utils.toArray(".mobile section.pin").forEach((panel, i, a) => {
// ScrollTrigger.create({
// trigger: panel,
// start: "top top",
// pin: i != 17,
// pinSpacing: false,
// pinType: "fixed",
// onEnter :self=>{
// updateMenu(self.vars.pins[self.vars.index]);
// },
// onLeaveBack: self=>{
// updateMenu(self.vars.pins[self.vars.index-1]);
// },
// index: i,
// pins: a
// });
//pins.push(s);
/*
//mobile panel fadein timeline
gsap.timeline({
scrollTrigger : {
trigger: panel,
scrub : true,
start: "top bottom",
end : "top top",
//markers: true,
onUpdate: self =>{
console.log(self.progress);
},
onEnter: self => {
console.log("enter");
console.log(self);
},
onEnterBack: self => {
console.log("enterBack");
console.log(self);
}
}
}).fromTo(panel, {opacity:0.2, filter:"blur(8px)"}, {opacity: 1, filter: "blur(0px)"})
;
*/
/*
ScrollTrigger.create({
trigger: panel,
scroller: ".outer .left",
start: "top top",
markers: true,
onUpdate: self =>{
console.log(self.progress);
},
onEnter: self => {
console.log("enter");
console.log(self);
},
onEnterBack: self => {
console.log("enterBack");
console.log(self);
}
});
*/
});
ScrollTrigger.create({
trigger: ".mobile .powered .pin",
start: "top top",
end: ()=>{
return "+=" + ($(".mobile .powered").height() - $(".mobile .powered h4")[0].getBoundingClientRect().height);
},
pin: true,
pinSpacing: false,
pinType: "fixed",
onEnter :self=>{
updateMenu(self.vars.trigger);
},
onLeaveBack: self=>{
//updateMenu($(".mobile .whats-new .pin")[0]);
}
});
},
updateMenu=e=>{
if(!isMobile()) return;
$e=$(e);
if($e.hasClass("menu-light")){
$(".mobile .menu").addClass("menu-light logo-light");
}
else{
$(".mobile .menu").removeClass("menu-light logo-light");
}
if($e.hasClass("logo-hidden")){
$(".mobile .menu").addClass("logo-hidden");
}
else{
$(".mobile .menu").removeClass("logo-hidden");
}
$(".desktop .menu .logo, .desktop .menu .burger").css("filter","");
},
isMobile=()=>{
return window.matchMedia("(max-width:63.938em)").matches;
},
getMobileSectionPositions=()=>{
//gets top pixel positions for mobile sections
var height = 0;
return [0].concat($(".mobile section").toArray().map(e => { return height += e.clientHeight; }));
},
initFooter=()=>{
$(".outer .left").scroll(e=>{
scroller = $(".outer .left")[0];
if((scroller.scrollTop + window.innerHeight) >= scroller.scrollHeight){
footer.show();
}
else
{
footer.hide();
}
})
},
initBackToTop=()=>{
$(".totop").click(scrollToTop);
},
scrollToTop=()=>{
gsap.to(".outer .left", {scrollTo : 0});
gsap.to(window, {scrollTo : 0});
},
images,
cImages=[],
getImages=()=>{
let guid = $(".rImage-guid").text(); // grab dynamic random images GUID
$.getJSON("/getassetgroupjson?guid=" + guid).done(data=>{
// $.getJSON("/getassetgroupjson?guid=929cd92d-51b5-406a-9120-697475290587").done(data=>{
images = data;
updateImages(images, ".random-image");
});
let contactGuid = $(".rContactImage-guid").text();
$.getJSON("/getassetgroupjson?guid=" + contactGuid).done(data=>{
images = data;
updateImages(images, ".random-contact-image");
});
},
updateImages=(imageData, className)=>{
//group images and randomise
var rImages = groupBy(randomise(imageData),e=>e.Name).map(e=> randomise(e.value)[0]);
updateImage=(e,i)=>{
$e = $(e);
$e.css("background-image","url(/asset/" + rImages[i].Guid + "-2000--75");
if(rImages[i].HotspotX != -1)
$e.css("background-position", rImages[i].HotspotX + "% " + rImages[i].HotspotY + "%");
};
$(`.desktop ${className}` ).toArray().forEach(updateImage);
$(`.mobile ${className}`).toArray().forEach(updateImage);
},
updateQuotes=()=>{
//get quotes and randomize
var quotes = randomise($("#quotes tr").toArray().map(row=>{return {quote: row.children[0].innerHTML, source: row.children[1].innerHTML};})),
updateQuote=(e,i)=>{
$("div",e).html(quotes[i].quote);
$("label",e).html(quotes[i].source);
};
$(".desktop q").toArray().forEach(updateQuote);
$(".mobile q").toArray().forEach(updateQuote);
},
initAutoscroll=()=>{
//autoscroll to powered section if hash exists
var autoScrollCount = 0;
var doScroll=section=>{
var autoScrollTimer = setInterval(()=>{
gotoSection(section);
if(autoScrollCount++ > 4)
clearTimeout(autoScrollTimer);
},800);
};
switch(window.location.hash){
case "#powered":
setTimeout(()=>{
gotoSection(isMobile() ? 16: 10);
},2000);
break;
case "#teradek":
setTimeout(()=>{
gotoSection(isMobile() ? 12: 7);
},2000);
break;
case "#captured-on-codex":
setTimeout(()=>{
gotoSection(isMobile() ? 17: 11);
},2000);
break;
case "#contact":
setTimeout(()=>{
gotoSection(isMobile() ? 18: 12);
},2000);
break;
case "#casestudies":
setTimeout(()=>{
gotoSection(isMobile() ? 11: 6);
},2000);
}
},
groupBy=(list, keyGetter)=>{
const map = new Map();
list.forEach((item) => {
const key = keyGetter(item);
const collection = map.get(key);
if (!collection) {
map.set(key, [item]);
} else {
collection.push(item);
}
});
return [...map].map((e) => { return {key : e[0], value : e[1]};});
},
randomise=a=>{
return a.sort(()=> Math.random() > 0.5 ? 1 : -1);
},
initHScroll=()=>{
$(".hscroll").each((i,context)=>{
var position=0,
count=$(".hpanel", context).length,
images = $(".hscroll-img",$(context.dataset.imageSource)).toArray(),
showImage=()=>{
images.forEach((img,i)=>{
if(i>position){
img.style.opacity=0;
}
else{
img.style.opacity=1;
}
});
},
animateFrame=()=>{
gsap.to($(".frame", context)[0], {left : -(position*100) + "%"});
showImage();
setProgress();
},
initProgress=()=>{
$(".progress", context).html(("<div><div></div></div>").repeat(count));
},
setProgress=()=>{
if(position % 2){
$(".progress", context).removeClass("dark");
}else{
$(".progress", context).addClass("dark");
};
$(".progress > div", context).removeClass("active");
$(".progress > div", context)[position].classList.add("active");
if(position ==0){
$(context).addClass("first");
}
else
{
$(context).removeClass("first");
}
if(position==count-1){
$(context).addClass("last");
}
else
{
$(context).removeClass("last");
}
},
leftClickHandler=e=>{
e.preventDefault();
if(position>0){
position--;
animateFrame();
}
},
rightClickHandler=e=>{
e.preventDefault();
if(position<count-1){
position++;
animateFrame()
}
},
progressClickHandler=e=>{
position=$(e.target).index();
animateFrame();
},
initBindings=()=>{
$(".left", context).click(leftClickHandler);
$(".right", context).click(rightClickHandler);
$(".progress > div", context).click(progressClickHandler);
var touching=false,
startX,
moveX,
frameWidth;
$(".frame", context).on("touchstart mousedown", e=>{
touching=true;
width=$(context).width();
startX=e.originalEvent.type=="touchstart" ? e.originalEvent.touches[0].clientX : e.originalEvent.clientX;
moveX=0;
});
$(".frame", context).on("touchmove mousemove", e=>{
if(e.originalEvent.type=="mousemove" && e.originalEvent.buttons==0) return;
moveX = startX - (e.originalEvent.type=="touchmove" ? e.originalEvent.touches[0].clientX : e.originalEvent.clientX);
gsap.set($(".frame", context)[0], {left : -(position*100) - (moveX/width*100) + "%"});
});
$(".frame", context).on("touchend mouseup", e=>{
touching=false;
switch(true){
case position<count-1 && moveX>100:
position++;
break;
case position>0 && moveX<-100:
position--;
break;
}
animateFrame();
});
}
;
initProgress();
initBindings();
animateFrame();
$(".frame", context).css({width: count + "00%"});
$(".frame .hpanel", context).css({width: 1/count*100 + "%"});
});
},
initSliders=()=>{
var mapCaseStudyData=(data)=>data.map(e=> {
return {
guid : e.customFields.find(c=>c.Name=="ogImage").Value,
title1 : e.customFields.find(c=>c.Name=="List Title").Value,
title2 : e.customFields.find(c=>c.Name=="Sub Title").Value,
path : e.path
};
}),
getTestimonialData=()=>{
return $("#testimonialsSource table tr").toArray().map(e=>{
return {
title1 : e.children[0].innerHTML,
title2 : e.children[1].innerHTML,
guid : e.children[2].children[0].dataset.assetid
}
})
};
$.get("/getcasestudies").done(function(data){
slider.createSlider(caseStudySlider, mapCaseStudyData(data.nodes.sort((a,b)=>{return b.date-a.date;}).slice(0,4)), "5.5");
slider.createSlider(caseStudySlider2, mapCaseStudyData(data.nodes.sort((a,b)=>{return b.date-a.date;}).slice(0,4)), "5.5");
});
slider.createSlider(testimonialsSlider, getTestimonialData(), "8");
slider.createSlider(testimonialsSlider2, getTestimonialData(), "8");
},
initRedirects=()=>{
if(window.location.hash=="#product"){
$("#content2").hide();
window.location="https://pix.online/product";
}
},
hideBlankElements=()=>{
$(".blank-hidden").toArray().filter(e=>e.innerText=='').forEach(e=>{e.style.display="none";});
}
;
init();
return {
//getImages : ()=>{return images;},
//updateImages : ()=>{updateImages();},
//getSectionPositions : ()=>{return getSectionPositions();}
//getScrollSnap : ()=>{return scrollSnap;},
//getTimelines : ()=>{return panelTimelines;},
//getPins : ()=>{return pins;},
gotoSection : (index)=>{gotoSection(index);},
showCaptcha : ()=>{showCaptcha();}
};
})();</script><style>
body {
min-height: 100vh;
/*mobile viewport bug fix */
min-height: -webkit-fill-available;
}
html {
height: -webkit-fill-available;
font-family: Lato, Helvetica, HelveticaNeue, Tahoma, Sans-Serif;
}
body{
/*margin:0;*/
/* padding:0;*/
/* font-family:'Lato', Helvetica, Arial;*/
/* font-size:16px;*/
font-weight:300;
/*line-height:20px;*/
/*letter-spacing: 0em;*/
/*background: #000;*/
}
.pix .pixhidden,
.codex .codexhidden,
.codex #codexhidden{
display: none !important;
}
.grecaptcha-badge{
display: none;
}
/*
#newsletter .newsletter-button{
display: none;
}
*/
#content2{
}
/*mobile */
#content2 > .mobile{
display: none;
}
#content2 .mobile section.pin{
height: 125vh;
}
#content2 .mobile .panel{
height: 100vh;
}
#content2 .mobile .panel .label {
padding: 0 1em;
font-size: 1.8em;
max-width:34em;
padding-left: 1em;
bottom: 2em ;
}
#content2 .mobile .teradex .panel .label{
position:absolute;
bottom: 8em ;
}
#pin #footer{
top:-4px;
position:relative !important;
border-top: solid 1px #666666;
z-index:20;
}
/*Table Portrait*/
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
#content2 .mobile .panel .label {
padding-left: 2em;
}
.languagear #content2 .mobile .panel .label {
direction: rtl;
right: 2em;
}
}
#content2 .mobile .section1 .panel .label {
bottom: 10%;
}
#content2 .mobile .panel h4 {
margin: 0;
font-size: 3.5em;
padding: 0.5em 0;
/*padding: 1.3em 0.5em 1.4em;*/
z-index: 1;
}
#content2 .mobile .casestudy .panel h4.pin,
#content2 .mobile .academy .panel h4.pin,
#content2 .mobile .testimonials .panel h4.pin {
background: #fff;
}
#content2 .mobile .panel h4.pin {
background: #000;
}
#content2 .mobile .panel h4.pin,
#content2 .mobile .casestudy .panel h4.pin,
#content2 .mobile .academy .panel h4.pin,
#content2 .mobile .testimonials .panel h4.pin {
padding: 0.9em 0.5em 0.9em;
font-size: 3.5em;
height:auto;
text-align:left;
}
@media screen and (min-width: 768px){
#content2 .mobile .panel h4.pin {
font-size: 3.5em;
}
}
#content2 .mobile .panel h5 {
}
#content2 .mobile .panel p {
font-size: 1.1em;
line-height: 1.3em;
}
#content2 .mobile .bg-img q {
font-size: 1.5em;
}
#content2 .mobile .bg-img q label {
font-size: 1.2em;
}
#content2 .mobile .section1 .panel .label{
padding: 0 1.5em;
bottom: 8em;
}
@media screen and (min-width: 500px) {
#content2 .mobile .section1 .panel .label{
bottom: 5em;
}
}
#content2 .mobile .whats-new .panel{
height: initial;
}
#content2 .mobile .whats-new .panel h4{
}
#content2 .mobile .whats-new .list{
height: 100vh;
position: relative;
}
#content2 .mobile .whats-new .frame.list img{
width: 60%;
}
#content2 .mobile .whats-new ul{
list-style: none;
padding: 0 2em;
line-height: 2.2em;
position: absolute;
bottom: 8em;
margin: 0;
font-size: 1.1em;
}
#content2 .mobile .whats-new li{
font-size: 2em;
font-weight: 300;
margin-bottom: 1.1em;
}
#content2 .mobile .whats-new li strong{
font-weight: 900;
}
#content2 .mobile .whats-new .frame{
}
#content2 .mobile .whats-new .frame:nth-child(even){
background: #fff;
color: #000;
}
#content2 .mobile .whats-new .frame img{
width: calc(100% - 4em);
left: 2em;
position: relative;
margin-top: 7em;
}
#content2 .mobile .whats-new .frame .inner{
}
#content2 .mobile .whats-new .frame .inner h5{
font-size: 3em;
margin: 1em 0 0 1em;
}
#content2 .mobile .whats-new .frame .inner p{
font-size: 2em;
margin: 0 0 0em 1.5em;
padding-bottom: 3em;
}
#content2 .mobile .powered .panel{
height: initial;
}
#content2 .mobile .powered .panel h4{
}
#content2 .mobile .trusted .frame {
margin: 0;
}
#content2 .mobile .trusted .panel h4 {
top: initial;
transform: initial;
font-size: 3.5em;
background: #1a1a1a;
text-align: left;
padding-bottom: 0;
}
#content2 .mobile section.contact{
height:100vh;
}
#content2 .mobile .academy .panel .img {
width:50%;
}
#content2 .mobile .contact .inner {
margin: 0 2em;
bottom: 3.5em;
}
#content2 .mobile .contact .panel h4{
font-size: 5em;
}
#content2 .mobile .contact p{
font-size: 2em;
}
#content2 .mobile .contact form label {
width: 100%;
font-size: 2em;
}
#content2 .mobile .contact form input {
width: calc(100% - 4em);
}
#content2 .mobile .contact form label:nth-child(2) input {
width: calc(100% - 6em);
}
#content2 .mobile .contact form label:nth-child(3) input {
width: calc(100% - 4em);
}
#content2 .mobile .contact form label:nth-child(4) input {
width: calc(100% - 4.4em);
}
#content2 .mobile .contact form textarea {
width: calc(100% - 2.2em);
font-size: 2em;
height: 3em;
margin-top: -0.5em;
}
#content2 .mobile .contact form button {
font-size: 1.5em;
margin: 1em 0 0;
}
#content2 .mobile .contact .button{
font-size: 1.4em;
}
#content2 .mobile .academy .panel h6 {
/*font-size: 1.9em;*/
}
#content2 .mobile .backtotop{
display:none;
font-size: 2em;
margin-top: 1em;
}
#content2 .totop{
opacity: 1;
width: 2em;
height: auto;
transform: rotate(180deg);
display: flex;
opacity: 1;
width: 1.5em;
height: 1.5em;
transform: rotate(180deg);
border: solid 1px #666666;
background: #000;
font-size: 14px;
font-weight: 300;
transition: background 0.7s, color 0.7s;
border-radius: 0.2em;
padding: 0.5em;
margin:0;
text-decoration: none;
pointer-events: all;
cursor: pointer;
}
#content2 .totop img{
opacity: 1;
width: 1.5em;
height: 1.5em;
}
#content2 .totop:hover{
background:#3c3c3c;
}
/*desktop */
#content2 > .desktop{
}
#content2 .desktop .pin-spacer-12,
#content2 .mobile .contactLink{
height:0 !important;
}
#content2 .outer{
width: 100%;
min-height: 100vh;
}
#content2 .outer > .left {
width: 50%;
position: relative;
display: inline-block;
padding-right: 50%;
}
#content2 .outer > .right {
width: 50%;
position: fixed;
right: 0;
height: 100vh;
top: 0;
}
#content2 section {
}
#content2 section.deadzone{
padding-bottom: 250px;
}
#content2 .right section{
position: absolute;
width: 100%;
opacity: 0;
transition: opacity 0.4s;
}
#content2 .right section{
pointer-events:none;
}
#content2 .right section:first-child{
opacity: 1;
pointer-events: all;
}
#content2 .left section{
}
#content2 .panel{
width: 100%;
height: 100vh;
position: relative;
font-family: Lato, Helvetica, HelveticaNeue, Tahoma, Sans-Serif;
background-color: #000;
color: #fff;
overflow: hidden;
}
#content2 .right .panel{
position: absolute;
}
#content2 .left .panel.full{
width: 200%;
position: relative;
z-index: 1;
}
#content2 .light .panel{
background-color: #fff;
color: #000;
}
#content2 .gray .panel {
background-color: #1a1a1a;
color: #000;
}
#content2 section.full{
}
#content2 div.img{
position: relative;
}
#content2 div.img > div{
position: relative;
}
#content2 div.img > div > div{
position: absolute;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
}
#content2 .bg-img{
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
position: absolute;
}
#content2 .contact .bg-img{
width: 50%;
}
#content2 .contact .button{
display: inline-block;
font-family: 'Lato';
color: #fff;
border: solid 1px #666666;
background: #000;
font-size: 14px;
font-weight: 300;
transition: background 0.7s, color 0.7s;
width: auto;
border-radius: 0.2em;
padding: 0.7em 1em;
letter-spacing: 0em;
height: auto;
margin: 0.5em;
margin-left: 0;
text-decoration: none;
}
#content2 .contact .button:hover{
background:#3c3c3c;
}
#content2 .contact .panel p{
max-width: 45em;
font-weight: 300;
line-height: 1.5em;
font-size: 2em;
position: relative;
padding-left: 1px;
color: #aaa;
font-family: Lato, Helvetica, HelveticaNeue, Tahoma, Sans-Serif;
}
@media screen and (min-width: 64em){
#content2 .contact .panel p{
font-size: 0.9em;
}
}
#content2 .bg-img q {
position: absolute;
bottom: 0;
left: 0;
color: #fff;
text-shadow: 0 0 2px black;
background: linear-gradient(0deg, #000000bf 49%, transparent);
width: calc(100% - 6em);
padding-bottom: 3em;
padding-left: 3em;
padding-top: 3em;
padding-right:3em;
}
#content2 .mobile .bg-img q{
display:block;
}
#content2 .desktop .bg-img q{
display:none;
}
#content2 .bg-img q div {
font-weight: 300;
letter-spacing: 0em;
line-height: 1.6em;
padding-right: 3em;
}
#content2 .bg-img q label {
margin-top: 1em;
display: block;
font-weight: 300;
font-size: 0.8em;
}
#content2 .bg-img.landscape{
background-size: 85%;
background-repeat: no-repeat;
}
#content2 .panel .label {
position: absolute;
bottom: 10%;
padding-left:3em;
}
#content2 .panel #caseStudySlider .label {
position: absolute;
bottom: 1em !important;
padding-left:3em;
}
#content2 .panel h2 {
max-width: 16em;
line-height: 0.9em;
font-size: 2.9em;
font-weight: 700;
position: relative;
margin: 0.5em 0px;
}
#content2 .panel h3{
font-size: 1.4em;
max-width: 24em;
position: relative;
font-weight: 300;
}
#content2 .panel h4 {
font-family: Lato, Helvetica, HelveticaNeue, Tahoma, Sans-Serif;
line-height: 0.9em;
font-weight: 700;
-webkit-text-stroke: 0.5px #fff;
color: transparent;
font-size: 4em;
text-stroke: 0.5px #fff;
margin: 0;
letter-spacing: -0.03em;
position: relative;
}
#content2 .left h4.top,
#content2 .panel .awards-title{
padding: 0.9em 0 0.9em 0.7em;
font-size: 3.2em;
margin:0;
}
@media screen and (min-width:1300px) {
#content2 .panel .label {
position: absolute;
bottom: 10%;
padding-left:3em;
}
#content2 .panel #caseStudySlider .label {
position: absolute;
bottom: 0em !important;
padding-left:3em;
}
.languagear #content2 .left h4.top{
padding: 0.6em 0 0.1em 0.7em;
}
#content2 .left h4.top,
#content2 .panel .awards-title{
padding: 0.6em 0 0.1em 0.7em;
font-size: 3em;
margin: 0 0 0.5em;
}
}
#content2 .light .panel h4 {
-webkit-text-stroke: 0.5px #000;
text-stroke: 0.5px #000;
}
#content2 .panel .awards-title{
background-color: #fff;
-webkit-text-stroke: 0.5px #000;
text-stroke: 0.5px #000;
}
#content2 .panel h5 {
line-height: 1.1em;
font-weight: 900;
font-size: 1.4em;
max-width: 21em;
margin: 1em 0 0;
position: relative;
padding-left: 1px;
}
#content2 .panel h6{
margin: 0.5em 0 2em;
font-size: 1.2em;
font-weight: 600;
position: relative;
}
.panel p {
max-width: 45em;
font-weight: 300;
line-height: 1.5em;
font-size: 0.9em;
position: relative;
padding-left: 1px;
color: #aaa;
}
.panel p strong{
font-weight: 500;
color: #fff;
}
.light .panel p{
color:#777;
}
.light .panel p strong{
color: #000;
}
#content2 .right .button,
#content2 .mobile .button{
display: inline-block;
font-family: 'Lato';
color: #fff;
border: solid 1px #666666;
/*background: #666666;*/
background: #000;
font-size: 14px;
font-weight: 300;
transition: background 0.7s, color 0.7s;
width: auto;
border-radius: 0.2em;
padding: 0.7em 1em;
letter-spacing: 0em;
height: auto;
margin: 0.5em;
margin-left: 0;
text-decoration: none;
}
.dark #content2 .right .button,
.dark #content2 .mobile .button{
background: #1a1a1a;
}
#content2 .right .button:hover{
background:#3c3c3c;
}
.panel .slider button.button{
display: inline-block;
font-family: 'Lato';
color: #fff;
border: solid 1px #666666;
background: #000;
font-size: 14px;
font-weight: 300;
transition: background 0.7s, color 0.7s;
width: auto;
border-radius: 0.2em;
padding: 0.7em 1em;
letter-spacing: 0em;
height: auto;
margin: 1.5em 2em 0 0;
min-width: 10em;
text-decoration: none;
}
.panel .slider button.button:hover{
background:#3c3c3c;
}
/*#content2 .mobile .button{*/
/* margin: 2em 0;*/
/*}*/
@media screen and (min-width:768px) {
#content2 .right .button,
#content2 .mobile .button,
#content2 .contact .button{
padding: 0.9em 2em;
font-size: 14px;
}
}
/*#content2 .mobile button.button{*/
/* font-size: 0.3em;*/
/*}*/
#content2 .light .button{
/*background: #000;*/
/*color: #fff;*/
}
/*horizontal scroll */
#content2 .hscroll{
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
#content2 .hscroll .frame{
white-space: nowrap;
width: 400%;
height: 100%;
position: absolute;
cursor: grab;
}
#content2 .hscroll .hpanel{
white-space: normal;
display: inline-block;
width: 20%;
height: 100%;
}
#content2 .hscroll .images{
position: absolute;
width: 100%;
height: 100%;
}
#content2 .hscroll .images .overlay{
background: linear-gradient(0deg, #000d, #0003);
}
#content2 .hscroll .images .hscroll-img{
}
#content2 .hscroll .progress{
position: absolute;
bottom: 2em;
left: 3em;
width: calc(100% - 8em);
z-index: 1;
}
#content2 .hscroll .progress > div{
width: calc(12.5% - 10px);
height: 2em;
display: inline-block;
margin-right: 10px;
cursor: pointer;
}
#content2 .hscroll .progress > div > div{
background-color: #ccc;
height: 1.5px;
display: block;
transition: background-color 0.5s;
position: relative;
top: 50%;
pointer-events: none;
}
#content2 .desktop .hscroll .progress.dark > div > div{
background-color: #777;
}
#content2 .hscroll .progress > div.active > div{
background-color: #000;
}
#content2 .desktop .hscroll .progress.dark > div.active > div{
background-color: #fff;
}
#content2 .mobile .hscroll .progress > div.active > div{
background-color: #fff;
}
#content2 .hscroll .hpanel .label{
padding-left: 3em;
}
#content2 .hscroll .hpanel:nth-child(even){
background: #fff;
color: #000;
}
#content2 .hscroll .hpanel h4{
margin: 0 0 0.05em;
font-size: 3em;
}
#content2 .hscroll .hpanel:nth-child(even) h4{
-webkit-text-stroke-color: #000;
text-stroke-color: #000;
}
#content2 .hscroll .hpanel h5 {
line-height: 1.5em;
font-weight: 700;
font-size: 1em;
margin: 2em 0 0;
color: #aaa;
}
#content2 .hscroll .hpanel:nth-child(even) h5 {
color: #444;
}
#content2 .hscroll .hpanel p{
color: #aaa;
margin-top: 2em;
max-width: 43em;
}
#content2 .hscroll .hpanel:nth-child(even) p{
color: #444;
}
#content2 .hscroll .hpanel p strong{
color: #fff;
}
#content2 .hscroll .hpanel:nth-child(even) p strong{
color: #000;
}
#content2 .hscroll .nav{
position: absolute;
width: 2em;
height: 2em;
display: block;
padding: 0;
top: 50%;
transform: translateY(-50%);
background-image: url(/asset/efd0377a-1890-4329-adfd-3f477dcc035e);
z-index: 1;
background-size: 100%;
cursor: pointer;
transition: opacity 0.5s;
}
#content2 .hscroll .nav.left{
transform: scaleX(-1) translateY(-50%);
right: 5em;
}
#content2 .hscroll .nav.right{
right: 2.3em;
}
#content2 .hscroll.first .nav.left,
#content2 .hscroll.last .nav.right{
opacity: 0;
pointer-events: none;
}
#content2 .hscroll button {
background: #777;
color: #fff;
border: none;
border-radius: 0.3em;
text-transform: uppercase;
font-size: .8em;
margin: 0 0.3em 0 0;
cursor: pointer;
letter-spacing: initial;
padding: 0.75em 2em 0.7em;
font-weight: 700;
}
#content2 .hscroll .hpanel:nth-child(even) button{
background: #000;
color: #fff;
}
#content2 .hscroll-img{
transition: opacity 0.7s;
opacity: 0;
}
#content2 .hscroll-img:first-child{
opacity: 1;
}
#content2 .hscroll a{
text-decoration: none;
}
#content2 .hscroll .hpanel button{
display: none;
}
#content2 .hscroll .hpanel:first-child button{
display: inline-block;
}
#content2 .mobile .hscroll{
}
#content2 .mobile .hscroll .hpanel .label{
max-width: calc(100vw - 6em);
font-size: 1.4em;
padding: 3em;
}
#content2 .mobile .hscroll .frame{
transform: translate(0,0);
}
#content2 .mobile .hscroll .hpanel:nth-child(even){
background: none;
color: #fff;
}
#content2 .mobile .hscroll .hpanel:nth-child(even) h4 {
-webkit-text-stroke-color: #fff;
text-stroke-color: #fff;
}
#content2 .mobile .hscroll .hpanel:nth-child(even) button {
background: #fff;
color: #000;
}
#content2 .mobile .hscroll .hpanel:nth-child(even) button {
background: #fff;
color: #000;
}
#content2 .mobile .panel .hpanel h4 {
position: relative;
-webkit-text-stroke: snow;
color: #fff;
margin: 0;
padding: 0;
}
#content2 .mobile .panel .hpanel h5 {
color: #aaa;
}
#content2 .mobile .panel .hpanel p{
margin-bottom: 0;
color: #aaa;
}
#content2 .mobile .panel .hpanel p strong{
color: #fff;
}
#content2 .mobile .hscroll .nav{
top: 4em;
font-size: 3em;
background-image: url(/asset/d4f0a823-d2f9-48d5-980e-0294729f4fef);
}
#content2 .left .whats-new{
height: 300%;
}
#content2 .left .whats-new .panel{
height: 100%;
width: 200%;
position: relative;
z-index: 1;
}
#content2 .left .whats-new .frame{
position: absolute;
width: 100%;
height: var(--app-height);
background: #000;
}
#content2 .left .whats-new .frame:nth-child(even){
background :#fff;
color: #000;
}
#content2 .left .whats-new h3{
max-width: initial;
font-weight: 700;
font-size: 3em;
}
#content2 .left .whats-new .frame:nth-child(odd) h5{
font-weight: 700;
}
#content2 .left .whats-new ul{
list-style: none;
padding: 0;
}
#content2 .left .whats-new li{
font-size: 2em;
font-weight: 300;
margin-bottom: 0.7em;
}
#content2 .left .whats-new li strong{
font-weight: 900;
}
#content2 .left .whats-new .frame:nth-child(1) .inner{
position: absolute;
bottom: 20%;
left: 4em;
}
#content2 .left .whats-new .frame:nth-child(2) .inner,
#content2 .left .whats-new .frame:nth-child(3) .inner,
#content2 .left .whats-new .frame:nth-child(4) .inner,
#content2 .left .whats-new .frame:nth-child(5) .inner,
#content2 .left .whats-new .frame:nth-child(6) .inner
{
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%);
font-size: 1.7em;
}
#content2 .left .whats-new .frame img{
width: 40%;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 5%;
}
#content2 .left .powered{
height: initial;
}
#content2 .left .powered .panel{
height: initial;
width: 200%;
position: relative;
z-index: 1;
}
#content2 .left .powered h4{
padding: 0.6em 0 0.7em 0.7em;
z-index: 1;
background: #000;
font-size: 3em;
margin: 0 0 0.5em;
width: calc(100% - 0.7em);
}
#content2 .right .powered h4 {
margin: 0;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
text-align: center;
width: 100%;
font-size: 3em;
}
#content2 .right .panel .next{
background-image: url(/asset/8fa74751-b75b-4121-83a5-d7b6f2fbd42a);
position: absolute;
width: 2.5em;
height: 2.5em;
bottom: 3em;
filter: invert(1);
background-size: cover;
left: 3em;
display: none;
}
/*case study & testimonials slider */
#caseStudySlider .slider .label .content{
font-size: 0.4em;
}
@media only screen and (max-width: 736px) {
#caseStudySlider2 .slider .label .name{
font-size: 1.4em;
}
#caseStudySlider2 .slider .label .content{
font-size: 0.7em;
}
}
#content2 .left .case-study .panel{
width: 200%;
position: relative;
z-index: 1;
}
#content2 .left .pin-spacer:nth-child(7),
#content2 .left .pin-spacer:nth-child(10),
#content2 .left .pin-spacer:nth-child(9){
z-index: 1 !important;
}
#caseStudySlider,
#caseStudySlider2,
#testimonialsSlider,
#testimonialsSlider2{
width: 100%;
height: calc(100% - 5.5em);
position: relative;
}
#testimonialsSlider{
}
#testimonialsSlider .frame .img{
width: 10em;
height: 10em;
border-radius: 50%;
left: 20%;
top: 50%;
transform: translateY(-50%);
}
#testimonialsSlider .frame .labels{
display: inline-block;
position: absolute;
top: 50%;
color: #fff;
left: 55%;
transform: translate(-50%,-50%);
font-style: italic;
font-weight: 500;
}
#testimonialsSlider .frame .title1{
display: block;
position: relative;
max-width: 27em;
font-size: 1.7em;
line-height: 1em;
}
#testimonialsSlider .frame .title2{
display: block;
font-weight: 200;
font-size: 1.4em;
margin-top: 1.5em;
position: relative;
}
#testimonialsSlider .slider .name,
#testimonialsSlider .slider .content,
#testimonialsSlider .slider .button{
display: none;
}
#testimonialsSlider .overlay{
display: none;
}
.panel #caseStudySlider2 .slider .label{
bottom:1.5em !important;
}
#testimonialsSlider .label{
max-width: 100%;
width: 100%;
padding: 1em 0 !important;
bottom:2em !important;
}
@media screen and (min-width: 768px){
#testimonialsSlider2 .label{
bottom:auto;
}
.panel #caseStudySlider2 .slider .label{
bottom:auto;
}
}
#testimonialsSlider .nav{
max-width: 20em;
transform: translateX(-50%);
left: 50%;
}
#testimonialsSlider2{
}
#testimonialsSlider2 .frame .img{
width: 25em;
height: 25em;
border-radius: 50%;
left: 50%;
top: 30%;
transform: translate(-50%, -50%);
}
#testimonialsSlider2 .frame .labels{
display: inline-block;
position: absolute;
top: 50%;
color: #fff;
left: 50%;
transform: translateX(-50%);
font-style: italic;
font-weight: 500;
text-align: center;
font-size: 1.4em;
width: 100%;
}
#testimonialsSlider2 .frame .title1{
display: block;
position: relative;
max-width: 15em;
font-size: 1.7em;
line-height: 1em;
margin: 0 auto;
}
#testimonialsSlider2 .frame .title2{
display: block;
font-weight: 200;
font-size: 1.4em;
margin-top: 1.5em;
position: relative;
}
#testimonialsSlider2 .slider .name,
#testimonialsSlider2 .slider .content,
#testimonialsSlider2 .slider .button{
display: none;
}
#testimonialsSlider2 .overlay{
display: none;
}
#testimonialsSlider2 .label{
max-width: 100%;
width: 100%;
padding: 1em 0 !important;
}
#testimonialsSlider2 .nav{
max-width: 20em;
transform: translateX(-50%);
left: calc(50% + 20px);
}
.panel .slider .label{
bottom: 10% !important;
}
#content2 .academy{
}
#content2 .academy .panel{
}
/*#content2 .academy .panel .inner {*/
/* left: 50%;*/
/* position: absolute;*/
/* top: 50%;*/
/* transform: translate(-50%,-50%);*/
/* display: inline-block;*/
/* width: 100%;*/
/*}*/
/*#content2 .academy .panel .img{*/
/* width: 25%;*/
/* margin: 0 auto;*/
/*}*/
/*#content2 .academy .panel h6 {*/
/* text-align: center;*/
/* font-size: 1em;*/
/* font-weight: 900;*/
/* margin-top: 2em;*/
/*}*/
/*Awards Mobile*/
#content2 .mobile .awards-bck,
#content2 .desktop .awards-bck{
width:100%;
height:100%;
background:#000;
}
#content2 .mobile .awards-full{
color:#fff;
display: flex;
justify-content: center;
text-align: left;
flex-direction: column-reverse;
height: 100%;
margin: 0em 5em;
align-items: flex-start;
gap: 6em;
position: relative;
top: calc(50% + -5em);
transform: translateY(-50%);
}
#content2 .mobile .awards-full .img{
max-height:90px;
height:90px;
width:auto !important;
display: block;
}
#content2 .mobile .awards-full h6{
font-size:11px;
font-family:"Lato";
line-height:1.5em;
font-weight:300;
margin-top:1.5em;
margin-bottom:0;
}
#content2 .mobile .awards-full .inner:last-child h6{
margin-bottom:0;
}
/*Mobile Landscape */
/*Pixel */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape) {
#content2 .mobile .awards-full{
position: absolute;
top: calc(50% + 2em);
left: 3.6em;
transform: translate(-0%, -50%);
max-width: 100%;
display: flex;
justify-content: flex-start;
flex-direction: row;
align-items: center;
width: 100%;
text-align: left;
gap: 7%;
margin: 0 auto;
align-items: stretch;
max-height: 45%;
}
/*#content2 .mobile .panel h4.pin,*/
/*#content2 .mobile .casestudy .panel h4.pin,*/
/*#content2 .mobile .academy .panel h4.pin,*/
/*#content2 .mobile .testimonials .panel h4.pin {*/
/* padding: 0.8em;*/
/* font-size: 1.5em;*/
/* height:auto;*/
/* text-align:left;*/
/*}*/
}
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 4)
and (orientation: landscape) {
#content2 .mobile .awards-full{
position: absolute;
top: calc(50% + 2em);
left: 3.6em;
transform: translate(-0%, -50%);
max-width: 100%;
display: flex;
justify-content: flex-start;
flex-direction: row;
align-items: center;
width: 100%;
text-align: left;
gap: 7%;
margin: 0 auto;
align-items: stretch;
max-height: 45%;
}
/*#content2 .mobile .panel h4.pin,*/
/*#content2 .mobile .casestudy .panel h4.pin,*/
/*#content2 .mobile .academy .panel h4.pin,*/
/*#content2 .mobile .testimonials .panel h4.pin {*/
/* padding: 0.8em;*/
/* font-size: 1.5em;*/
/* height:auto;*/
/* text-align:left;*/
/*}*/
}
/*Iphone*/
@media only screen
and (min-device-width: 320px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
#content2 .mobile .awards-full{
position: absolute;
top: calc(50% + 2em);
left: 3.6em;
transform: translate(-0%, -50%);
max-width: 100%;
display: flex;
justify-content: flex-start;
flex-direction: row;
align-items: center;
width: 100%;
text-align: left;
gap: 7%;
margin: 0 auto;
align-items: stretch;
max-height: 45%;
}
/*#content2 .mobile .panel h4.pin,*/
/*#content2 .mobile .casestudy .panel h4.pin,*/
/*#content2 .mobile .academy .panel h4.pin,*/
/*#content2 .mobile .testimonials .panel h4.pin {*/
/* padding: 0.8em;*/
/* font-size: 1.5em;*/
/* height:auto;*/
/* text-align:left;*/
/*}*/
}
@media only screen
and (min-device-width: 375px)
and (max-device-width: 812px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: landscape) {
#content2 .mobile .awards-full{
position: absolute;
top: calc(50% + 2em);
left: 3.6em;
transform: translate(-0%, -50%);
max-width: 100%;
display: flex;
justify-content: flex-start;
flex-direction: row;
align-items: center;
width: 100%;
text-align: left;
gap: 7%;
margin: 0 auto;
align-items: stretch;
max-height: 45%;
}
/*#content2 .mobile .panel h4.pin,*/
/*#content2 .mobile .casestudy .panel h4.pin,*/
/*#content2 .mobile .academy .panel h4.pin,*/
/*#content2 .mobile .testimonials .panel h4.pin {*/
/* padding: 0.8em;*/
/* font-size: 1.5em;*/
/* height:auto;*/
/* text-align:left;*/
/*}*/
}
/*Awards Desktop*/
#content2 .desktop .awards-full{
color:#fff;
max-width: 63%;
justify-content: space-around;
align-items: center;
width: 100%;
gap: 10%;
}
#content2 .desktop .awards-full .inner{
opacity:0;
}
#content2 .desktop .awards-full{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 63%;
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
text-align: left;
gap: 10%;
}
#content2 .desktop .awards-full img{
max-height:210px;
display: block;
}
/*Awards IPad Pro Landscape*/
@media only screen
and (min-device-width: 1366px)
and (max-device-width: 1366px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2) {
#content2 .desktop .awards-full{
max-width: 63%;
justify-content: space-around;
align-items: center;
width: 100%;
gap: 10%;
align-items: stretch;
max-height: 50%;
}
#content2 .desktop .awards-full img{
max-height:160px;
}
}
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
#content2 .desktop .awards-full img{
max-height:160px;
}
}
@media only screen
and (min-device-width: 1112px)
and (max-device-width: 1112px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2) {
#content2 .desktop .awards-full img{
max-height:160px;
}
}
@media only screen
and (min-device-width: 1366px)
and (max-device-width: 1366px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2) {
#content2 .desktop .awards-full img{
max-height:160px;
}
}
/*Awards IPad Pro Portrait*/
@media only screen
and (min-device-width: 1024px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2) {
#content2 .mobile .awards-full{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-30%, -50%);
max-width: 63%;
display: flex;
max-width: 27%;
justify-content: space-around;
align-items: flex-start;
width: 100%;
gap: 0%;
flex-direction: column-reverse;
height: 80%;
margin: 0;
}
#content2 .desktop .awards-full{
position: absolute;
top: calc(50% + 3em);
left: 50%;
transform: translate(-50%, -50%);
max-width: 63%;
display: flex;
max-width: 25%;
justify-content: space-around;
align-items: flex-start;
width: 100%;
gap: 0%;
flex-direction: column-reverse;
height: 65%;
margin: 0;
}
}
@media only screen
and (min-device-width: 834px)
and (max-device-width: 834px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2) {
#content2 .mobile .awards-full{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-30%, -50%);
max-width: 63%;
display: flex;
max-width: 27%;
justify-content: space-around;
align-items: flex-start;
width: 100%;
gap: 0%;
flex-direction: column-reverse;
height: 65%;
margin: 0;
}
}
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2) {
#content2 .mobile .awards-full{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-30%, -50%);
max-width: 63%;
display: flex;
max-width: 27%;
justify-content: space-around;
align-items: flex-start;
width: 100%;
gap: 0%;
flex-direction: column-reverse;
height: 65%;
margin: 0;
}
#content2 .desktop .awards-full{
position: absolute;
top: calc(50% + 3em);
left: 50%;
transform: translate(-50%, -50%);
max-width: 63%;
display: flex;
max-width: 27%;
justify-content: space-around;
align-items: flex-start;
width: 100%;
gap: 0%;
flex-direction: column-reverse;
height: 65%;
margin: 0;
}
}
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
#content2 .mobile .awards-full{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-30%, -50%);
max-width: 63%;
display: flex;
max-width: 27%;
justify-content: space-around;
align-items: flex-start;
width: 100%;
gap: 0%;
flex-direction: column-reverse;
height: 65%;
}
#content2 .desktop .awards-full{
position: absolute;
top: calc(50% + 3em);
left: 50%;
transform: translate(-50%, -50%);
max-width: 63%;
display: flex;
max-width: 27%;
justify-content: space-around;
align-items: flex-start;
width: 100%;
gap: 0%;
flex-direction: column-reverse;
height: 65%;
}
}
@media screen and (min-width: 80em){
#content2 .desktop .awards-full{
max-width:56%;
}
}
@media screen and (min-width: 120em){
#content2 .desktop .awards-full{
max-width:63%;
}
#content2 .desktop .awards-full img{
max-height:280px;
display: block;
}
}
@media screen and (min-width: 125em){
#content2 .desktop .awards-full{
max-width:1200px;
}
}
#content2 .desktop .awards-full h6{
/*font-size:1.065em;*/
font-size: clamp(0.65em, 17px, 1em);
font-family:"Lato";
line-height:1.5em;
font-weight:300;
margin-top:1.5em;
margin-bottom:0em;
}
#content2 .desktop .awards-full h6 strong{
font-weight:700;
}
#content2 .trusted{
}
#content2 .trusted .frame{
position: relative;
height: 100%;
margin: 0 9em;
}
#content2 .trusted .panel{
}
#content2 .trusted .panel h4 {
top: 50%;
position: absolute;
width: 100%;
text-align: center;
transform: translateY(-50%);
font-size: 3em;
}
#content2 .trusted .panel p {
display:none;
max-width: 20em;
top: 55%;
position: absolute;
transform: translate(-50% , -50%);
width: 100%;
text-align: center;
left: 50%;
}
@media screen and (min-width: 1024px){
#content2 .trusted .panel p {
display:block;
}
}
#content2 .trusted .tiles {
position: absolute;
top: 50%;
transform: translate(calc(-50% + 2px),-50%);
left: 50%;
width: 100%;
text-align: center;
outline-offset: -3px;
max-width: 58em;
overflow: hidden;
}
#content2 .trusted .tiles .tile {
width: calc(25% - 2px);
display: inline-block;
border-right: 1px solid #555;
border-bottom: 1px solid #555;
float: left;
transform: translateY(2px);
}
#content2 .trusted .tiles .tile .image {
position: relative;
width: 100%;
padding-bottom: 60%;
}
#content2 .trusted .tiles .tile .image .inner {
position: absolute;
width: 71%;
height: 54%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
#content2 .trusted .tiles .tile:nth-child(4n-3){
}
#content2 .trusted .tiles .tile:nth-child(4n){
border-right: none;
}
#content2 .trusted .tiles .tile:nth-child(4n+2){
}
#content2 .trusted .tiles .tile:nth-child(4n+3){
}
#content2 .contact .inner {
margin-left: 3em;
position: absolute;
bottom: 2em;
}
#content2 .contact form{
pointer-events: all;
}
#content2 .contact form label {
display: inline-block;
position: relative;
font-weight: 300;
padding: 1em 0;
width: 47%;
color: #777;
margin-right: 1em;
}
#content2 .contact form input {
background: no-repeat;
border: none;
border-bottom: 1px solid #aaa;
position: absolute;
left: 0;
outline: none;
color: #fff;
font-weight: 300;
padding: 0 0 0.4em 3.5em;
width: calc(90% - 2.1em);
}
#content2 .contact form label:nth-child(2) input {
padding: 0 0 0.4em 5.5em;
width: calc(90% - 4.1em);
}
#content2 .contact form label:nth-child(4) input {
padding: 0 0 0.4em 3.9em;
width: calc(90% - 2.5em);
}
#content2 .contact form input:-webkit-autofill{
background-color: none;
color: #fff !important;
}
#content2 .contact form textarea {
background: none;
width: 90%;
border: 1px solid #aaa;
outline: none;
height: 6em;
margin-top: 0.4em;
color: #fff;
font-weight: 300;
padding: 0.7em;
}
#content2 .contact form button {
display: block;
background: #fff;
font-weight: 600;
padding: 0.6em 3em;
letter-spacing: 0.1em;
font-size: 0.7em;
margin-top: 3em;
border: none;
color: #000;
margin-bottom: 15%;
}
#content2 .contact .send{
margin-bottom: 12em;
}
#content2 .mobile .contact .send{
margin-bottom: 20em;
}
#content2 .contact .response-ok,
#content2 .contact .response-error{
display:none;
}
#content2 .contact a{
color: #fff;
pointer-events: all;
}
/*powered tiles*/
#panel3{
margin-top: 1em;
}
#content2 .list-outer{
height: 200%;
}
.powered{
display:none;
}
.powered-list{
position: relative;
margin: 0 auto;
width: 100vw !important;
}
.powered-list .column{
display: inline-block;
position: relative;
float: left;
margin-bottom: 5em;
}
.powered-list .tile{
width: calc(100% - 1em);
display: block;
position: relative;
padding: 0.4em;
cursor: pointer;
pointer-events: all;
font-size: 0.8em;
}
.powered-list .tile .overlay{
position: absolute;
color: #fff;
width: 100%;
height: 100%;
background-color: #000c;
font-family: Lato, Helvetica, HelveticaNeue, Tahoma, Sans-Serif;
text-align: center;
opacity: 0;
transition: opacity 0.5s;
}
.powered-list .tile .overlay label{
display: block;
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(100% - 2em);
font-weight: 600;
letter-spacing: 0.2em;
padding: 0 1em;
font-size: 1.5em;
}
.powered-list .tile .overlay button{
position: absolute;
left: 50%;
transform: translate(-50%,-50%);
top: 60%;
border: 1px solid #fff;
background: none;
color: #fff;
font-family: Lato, Helvetica, HelveticaNeue, Tahoma, Sans-Serif;
margin: 0;
outline: 0;
padding: 0.6em 0.7em 0.6em;
letter-spacing: 0.2em;
font-size: 1em;
width: calc(100% - 2em);
max-width: 12em;
}
@media screen and (min-width: 768px) {
.powered-list .tile .overlay label{
}
.powered-list .tile .overlay button{
padding: 0.3em 0.7em 0.4em;
font-size: 0.8em;
}
}
.powered-list .tile:hover .overlay{
opacity: 1;
}
.powered-list .tile .image{
width: 100%;
position: relative;
overflow: hidden;
}
.powered-list .tile .image .inner{
width:100%;
height: 100%;
position: absolute;
background-size: cover;
transition: all 0.5s;
}
.powered-list .tile:hover .image .inner{
transform: scale(1.05);
}
.powered-list .cols-1, .powered-list .cols-2, .powered-list .cols-3, .powered-list .cols-4, .powered-list .cols-5, .powered-list .cols-6, .powered-list .cols-7{
display: none;
}
.powered-list .next{
float: left;
clear: both;
width: 100%;
height: 6em;
text-align: center;
cursor:pointer;
}
.powered-list .next:before{
content: "SHOW MORE";
color: #fff;
border: solid 1px #666666;
background: #000;
font-size: 14px;
font-weight: 300;
transition: background 0.7s, color 0.7s;
width: auto;
border-radius: 0.2em;
padding: 0.7em 1em;
letter-spacing: 0em;
height: auto;
margin: 0.5em;
margin-left: 0;
text-decoration: none;
}
.powered-list .next:hover:before{
background:#3c3c3c;
}
@media screen and (min-width: 768px){
/*.powered-list .next:before{*/
/* border: 1px solid #777;*/
/* padding: 0.5em 2em;*/
/* font-size: 0.8em;*/
/*}*/
}
.player{
color: #fff;
}
.scroll{
overflow-y:auto;
}
.backtotop{
display:none;
pointer-events: all;
cursor: pointer;
margin-top: 2em;
font-weight: 300;
letter-spacing: 0.1em;
font-size: 0.8em;
}
#slider, #slider2{
width: 100%;
height: 100%;
}
#content2 .panel .banner{
}
#content2 .panel .banner img{
top: -8em;
display: block;
position: absolute;
left: 3em;
width: 22em;
}
#content2 .menu .banner{
}
#content2 .menu .banner img{
width: calc(100% - 2em);
padding: 1em 1em;
max-width: 450px;
}
/*pure-font-xs */
@media screen and (max-width:35.438em) {
.powered-list .cols-2{
display:block;
}
}
/*pure-font-sm */
@media screen and (min-width:35.5em) and (max-width:47.938em) {
.powered-list .cols-3{
display:block;
}
}
/*pure-font-md */
@media screen and (min-width:48em) and (max-width:63.938em) {
.powered-list .cols-4{
display:block;
}
}
/*pure-font-lg */
@media screen and (min-width:64em) and (max-width:79.938em) {
.powered-list .cols-5{
display:block;
}
}
/*pure-font-xl */
@media screen and (min-width:80em) {
.powered-list .cols-6{
display:block;
}
}
/*menu */
#content2 .menu {
position: fixed;
width: 100%;
top: 0;
z-index: 2;
}
#content2 .menu .strip{
top: 0;
background: #fff;
height: 3em;
box-shadow: 0 -1px 8px 0 #0003;
font-size: 0.8em;
position: relative;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
-ms-align-items: center;
-webkit-align-items: center;
}
#content2 .menu .pix-menu.strip{
width: calc(100% - 9.5em);
padding: 2.5em 7em 2.5em 2.5em;
}
#content2 .menu .codex-menu.strip{
width: calc(100% - 10.6em);
padding: 2.5em 7em 2.5em 3.6em;
}
#content2 .menu .pix-menu .logo {
background-image: url(/asset/3253deb0-45ad-4491-954e-ae77bcbb98cd);
height: 2em;
width: 6em;
background-repeat: no-repeat;
position: relative;
}
#content2 .menu .codex-menu .logo {
background-image: url(/asset/3befecf8-cc6a-444e-bb3a-2838f4389f0b);
height: 2.1em;
width: 14em;
background-repeat: no-repeat;
position: relative;
}
@media screen and (min-width: 480px) {
#content2 .menu .pix-menu .logo {
width: 9.5em;
}
#content2 .menu .codex-menu .logo {
width: 15.5em;
}
}
#content2 .menu .burger {
background-image: url(/asset/c22a6f6b-b178-4743-b379-f9f37168789b);
position: absolute;
right: 2em;
top: 2.2em;
width: 2em;
height: 2.4em;
background-repeat: no-repeat;
z-index: 1;
transition: filter 0.4s, opacity 0.4s;
}
#content2 .menu .burger.active {
background-image: url(/asset/ef42aa69-8b99-4942-a1ba-2fa22d9c5c52);
filter: invert(0) !important;
width: 2em;
height: 2em;
top: 2.5em;
}
#content2 .menu.logo-light .logo{
filter: invert(1);
}
#content2 .menu.menu-light .burger{
filter: invert(0);
}
#content2 .menu.burger-light .burger{
filter: invert(1);
}
#content2 .menu.menu-hidden .logo,
#content2 .menu.menu-hidden .burger{
opacity: 0;
}
#content2 .menu.logo-hidden .logo{
opacity: 0;
}
#content2 .menu .overlay{
display: none;
position: fixed;
right: 0;
width: 50%;
background: #222;
height: 100vh;
top: 0;
pointer-events: all;
}
#content2 .menu .links {
position: relative;
top: 50%;
transform: translateY(-50%);
font-size: 11px;
padding: 3em 1.5em;
white-space: nowrap;
/*font-size: clamp(1px,1.2cqh,2cqw);*/
}
@media screen and (min-width: 64em){
#content2 .menu .links {
font-size: 16px;
}
}
#content2 .menu .links ul {
padding: 0;
margin: 0;
list-style: none;
font-family: Lato, Helvetica, HelveticaNeue, Tahoma, Sans-Serif;
position: relative;
font-size: 0.7em;
}
#content2 .menu .links li {
font-size: 3em;
text-align: center;
font-weight: 700;
color: #fff;
}
#content2 .menu .links li a {
text-decoration: none;
color: #fff;
transition: text-shadow 0.4s;
}
#content2 .menu .links li i a{
font-style: normal;
-webkit-text-stroke: 1px #fff;
color: transparent;
}
#content2 .menu .links li a:hover{
text-shadow: 0 0 0.7em #777;
}
#content2 .menu .links hr{
width: 22em;
margin: 3em auto;
}
#content2 .menu .pix-menu ul.top {
display:none;
list-style: none;
position: absolute;
right: 7em;
top: 3.2em;
padding: 0;
margin: 0;
}
#content2 .menu .codex-menu ul.top {
display:none;
list-style: none;
position: absolute;
right: 7em;
top: 3.2em;
padding: 0;
margin: 0;
}
#content2 .menu .pix-menu ul.top .active, #content2 .menu .codex-menu ul.top .active{
display:block;
}
@media screen and (min-width: 580px) {
#content2 .menu .codex-menu ul.top, #content2 .menu .pix-menu ul.top {
display:block;
}
}
#content2 .menu ul.top li{
font-family: Lato, Helvetica, HelveticaNeue, Tahoma, Sans-Serif;
display: inline-block;
font-size: 1.4em;
font-weight: 300;
margin-right: 0.5em;
}
#content2 .menu ul.top li.spacer{
transform: scale(1.2) translateY(-0.1em);
}
#content2 .menu ul.top a{
text-decoration: none;
color: #000;
top: 15px;
right: 100px;
pointer-events: all;
}
#content2 .menu .overlay ul.top{
top: 20px;
right: 65px;
display: none;
}
#content2 .menu .overlay ul.top li{
color: #fff;
font-size: 14px;
}
#content2 .menu .overlay ul.top a{
color: #fff;
}
#content2 .menu .overlay ul.top ul li a{
color: #000;
}
#content2 .menu button.button{
display: block;
background: #fff;
font-weight: 600;
padding: 1.4em 2.8em;
font-size: 1.2em;
bottom: 1em;
letter-spacing: .1em;
border: none;
color: #000;
position: absolute;
font-family: Lato,Helvetica,HelveticaNeue,Tahoma,Sans-Serif;
width: 23em;
left: 50%;
transform: translateX(-50%);
}
@media screen and (min-width: 768px){
#content2 .menu button.button{
padding: 1.2em 2em;
font-size: 0.8em;
}
}
#language .language-menu{
position: relative !important;
z-index: 0 !important;
}
#language div {
max-width: unset;
margin: 0;
}
/*.pix-menu #language .ui-front .ui-selectmenu-button {*/
/* left: 0em;*/
/* top: 3.8em;*/
/* top: 50%;*/
/* transform: translateY(-50%);*/
/*}*/
/*.codex-menu #language .ui-front .ui-selectmenu-button {*/
/* left: 0em;*/
/* top: 0em;*/
/*}*/
.menu .products{
cursor: pointer;
}
.menu .products ul{
display: none;
position: absolute;
font-size: .7em;
padding: 0;
width: 16em;
margin: 0 0 0 -1.4em;
/*transform: translateY(3.3em);*/
}
.menu .products li{
width: 100%;
/*border-bottom: 1px solid #000;*/
cursor: pointer;
margin: 0;
margin-bottom:1px;
}
#content2 .menu ul .products a{
color: #fff;
display: block;
padding: 0.5em 1em;
transition: background-color 0.4s, color 0.4s;
background: #444;
}
#content2 .menu ul .products a:hover {
background-color: #5f5f5f;
}
.menu .products li:last-child{
border-bottom: none;
}
.menu .hide .products ul{
display:none !important;
}
@media screen and (max-width:40.438em) {
#language{
padding-left: 0px;
}
}
/*pure-font-xs-sm-md */
@media screen and (max-width:63.938em) {
body{
position: relative;
height: initial;
}
#content2 > .desktop{
display: none;
}
#content2 > .mobile{
display: block;
}
#content2 .menu {
font-size: 0.7em;
}
#content2 .menu .overlay {
width: 100%
}
#content2 .menu .overlay li {
font-size: clamp(10px,4em,72px);
}
#content2 .menu > ul.top{
display: none;
}
#content2 .menu .overlay ul.top{
display: block;
position: absolute;
top: 12px;
right: 65px;
}
#language .language-menu{
font-size: 1.4em;
}
/*#language .ui-front .ui-selectmenu-button {*/
/* left: 10em;*/
/* top: 2.6em;*/
/*}*/
}
/*language mobile */
@media screen and (max-width: 40.438em){
/*#language .ui-front .ui-selectmenu-button {*/
/* left: 3.4em;*/
/* top: 2.6em;*/
/*}*/
}
/*pure-font-xs */
@media screen and (max-width:35.438em) {
#content2 .panel .banner img{
width: calc(100vw - 4em);
top: -5em;
left: initial;
}
}
/*pure-font-sm */
@media screen and (min-width:35.5em) and (max-width:47.938em) {
#content2 .panel .banner img{
width: calc(100vw - 4em);
top: -5em;
left: initial;
}
}
/*pure-font-md */
@media screen and (min-width:48em) and (max-width:63.938em) {
#content2 .mobile .panel {
font-size: 0.6em;
}
#content2 .panel .banner img{
width: 33em;
top: -8em;
left: initial;
}
}
/*pure-font-lg */
@media screen and (min-width:64em) and (max-width:79.938em) {
.panel p {
max-width: 37em;
font-size: 1.2em;
}
#content2 .hscroll .hpanel p {
max-width: 33em;
font-size: 1.2em;
}
}
/*pure-font-xl */
@media screen and (min-width:80em) and (max-width:114.938em) {
}
/*pure-font-xxl */
@media screen and (min-width:115em) {
}
/*dialog */
.dialog .ui-dialog-titlebar{
display: none;
}
.dialog.ui-widget.ui-widget-content {
border: 1px solid #555;
background: #000;
border-radius: 0;
}
.dialog iframe{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
/*Languages */
.languagear #content2 .bg-img q {
direction: rtl;
letter-spacing: initial;
}
.languagehi #content2 .bg-img q, .languageja #content2 .bg-img q, .languagezh #content2 .bg-img q{
letter-spacing: initial;
}
.languagehi #content2 .mobile .bg-img q,.languageja #content2 .mobile .bg-img q,.languagezh #content2 .mobile .bg-img q{
letter-spacing: initial;
}
.languagehi #content2 .bg-img q div, .languageja #content2 .bg-img q div,.languagezh #content2 .bg-img q div{
letter-spacing: initial;
}
.languagear #content2 .bg-img q div {
letter-spacing: initial;
}
.languagear #content2 .panel .label {
direction: rtl;
padding-right: 2em;
right:0;
}
.languagear #content2 .panel h4,.languagear #content2 .left h4.top {
width: calc(100% - 1.4em);
min-width:100%;
direction:rtl;
padding: 0.9em 0em 0.9em 0.7em;
}
.languagear #content2 .contact .panel h4{
text-align:right;
}
.languagear #content2 .left h4.top, #content2 .left .powered h4{
text-align:left;
}
.languagear .panel .slider .label{
transform: translateY(-100%);
}
@media screen and (min-width: 768px){
.languagear .panel .slider .label{
transform: translateY(-117%);
}
}
.languagear #testimonialsSlider .frame .labels{
direction:rtl;
}
.languagear #content2 .academy .panel h6 {
direction:rtl;
}
.languagear #content2 .trusted .panel h4 {
width: calc(100% - 1.4em);
min-width:auto;
}
.languagear #content2 .trusted .panel h4, .languagear #content2 .trusted .panel p {
direction:rtl;
}
.languagear #content2 .contact .inner {
direction:rtl;
}
.languagear #content2 .menu .pix-menu ul.top,.languagear #content2 .menu .codex-menu ul.top {
direction:rtl;
}
.languagear #footer{
direction:rtl;
}
.languagear #footer li a{
unicode-bidi: bidi-override !important;
direction: unset !important;
}
.languagear #content2 .mobile .panel .label {
direction: rtl;
}
.client-login{
display:none;
}</style></div>
<div id="footer"><div class="template-contact">
<div class="bg upper">
<div class="inner">
<div class="menu">
<ul>
<li><h2>PRODUCT</h2></li>
<li><a href="https://codex.online/products/media">Capture Media</a></li>
<li><a href="https://codex.online/products/media-stations">Media Readers</a></li>
<li><a href="https://codex.online/codex-hde">HDE</a></li>
</ul>
</div>
<div class="menu">
<ul>
<li><h2>SUPPORT</h2><div class="untitled-logo pure-hidden-xs pure-hidden-lg pure-hidden-xl pure-hidden-xxl"><img class="nofade" src="/asset/4574B5D6-95B3-4EC0-B3AD-4752D2329803"></div></li>
<li><a href="https://help.codex.online">Help Centre</a></li>
<li><a href="https://help.codex.online/content/downloads">Downloads</a></li>
<li><a href="https://codex.online/dashboard">My Account</a></li>
<li><a href="https://codex.online/contact">Find A Reseller</a></li>
<li><a href="https://codex.online/about-codex">About CODEX</a></li>
<li><a href="https://codex.online/legal">Legal</a></li>
</ul>
</div>
<div class="">
<ul class="icons">
<li><h2>FOLLOW CODEX</h2></li>
<li>
<a href="https://www.instagram.com/codexonline" target="_blank">
<img class="nofade" src="/asset/e5bb83f7-666c-4097-8152-fde13ff97a6b">
</a>
<a href="https://open.spotify.com/show/2xosctKgjcx9ijqXwg5Lh3?si=e49ba60bd60a441c" target="_blank">
<img class="nofade" src="/asset/eddf03b2-43d6-4ec2-a263-f6f8f3bb83e2">
</a>
<a href="https://uk.linkedin.com/company/codex-digital" target="_blank">
<img class="nofade" src="/asset/517d77d3-25bd-4c86-abc1-02830baaf189">
</a>
</li>
<!--<li>-->
<!-- <button class="button" id="newsletter-submit">NEWSLETTER <span style="display:inline-block;">SIGN-UP</span></button>-->
<!--</li>-->
</ul>
</div>
<!--<div class="pure-u-1">-->
<!-- <br>-->
<!-- <br>-->
<!-- <div class="copyright"><a href="/"><div class="codex-logo"><img class="nofade" src="/asset/7D94D72B-5A77-4AFF-88DE-2E633EAA7C59"></div></a>-->
<!-- <label>© <span class="year"></span> X2X, LLC. All images used are copyright of their respective owners. -->
<!-- <span style="display:inline-block">All Rights Reserved.</span>-->
<!-- </label>-->
<!-- </div>-->
<!-- </div>-->
<!--</div>-->
</div>
<div class="pure-g lower">
<div class="inner">
<div class="pure-u-1">
<!-- <div class="copyright"><a href="https://x2x.media"><div class="codex-logo"><img class="nofade" src="/asset/7D94D72B-5A77-4AFF-88DE-2E633EAA7C59"></div></a>-->
<label class="label">Copyright © Codex Tech Limited 2026.</label>
</div>
</div>
</div>
</div>
<div id="newsletter-dialog" style="display:none;"></div>
</div><script type="text/javascript">function showCaptcha(){/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test($("#newsletter-email").val())?($("#newsletter-dialog").dialog({modal:!0,width:350,height:120}),$(".ui-widget-overlay.ui-front").click(function(){$("#newsletter-dialog").dialog("close")}),grecaptcha.render("newsletter-dialog",{sitekey:"6LdMVwoUAAAAALnyHXdn20siFNs1uGYE7JUi2A7s",theme:"light",callback:newsletterCaptchaValid}),e.preventDefault()):$("#newsletter-dialog").html("Please enter valid email address").dialog({buttons:[{text:"Ok",click:function(){$(this).dialog("close")}}]})}function newsletterCaptchaValid(){$("#newsletter-form").trigger("submit")}$(function(){$("#newsletter-submit").click(function(){window.location="https://codex.online/newsletter-signup"});$("body").hasClass("hasmarketing")&&($(".template-contact .subscribe").hide(),$(".template-contact .social").removeClass("pure-u-lg-1-2"));$("#footer .year").text((new Date).getFullYear())})</script><style>:root{--background:#000;--textlight:#fff;--textdark:#aaa;--hover:#aaa}#content:empty,#content2:empty{min-height:initial}.template-contact{background:var(--background)}#footer .label{font-family:'Lato';letter-spacing:-.03em;font-weight:300;font-size:1em;left:0;top:0;display:block}#footer hr{color:--text-light;background-color:var(--textlight) !important;margin-bottom:3em}#footer{margin-bottom:2em;background:var(--background);margin-bottom:0;margin-top:0;position:relative;border-top:solid 1px #666}#footer button.button{color:var(--textlight);background:transparent;border:1px solid var(--textlight);font-family:"Lato";font-size:inherit;padding:.4em 1.5em;min-width:5.5em;letter-spacing:4px;font-weight:600;margin:1em 0 0 0;border-radius:2em}#footer button.button:hover{border-color:#aaa;color:#aaa}#footer .follow{font-family:"Lato";font-size:1em;color:var(--text);top:-17px}#footer .upper{width:100%;position:relative;overflow:hidden}#footer .upper .inner{max-width:1180px;padding:3em 2em 1.5em;margin:0 auto;display:flex;flex-wrap:wrap}#footer .lower{width:100%;background:#000;position:relative;height:6.5em}#footer .lower .inner{max-width:1180px;padding:1.5em 2em;width:100%;margin:0 auto}.template-contact p{color:var(--textlight)}.template-contact .bg{background:var(--background) !important;color:var(--textlight) !important}.template-contact .title{margin:inherit}.template-contact .button-left{width:100px;float:right;margin-right:13px}.template-contact .button-right{width:100px;margin-left:13px}.template-contact .title{margin-top:3em}.template-contact .divider{float:right;display:block;width:1px;height:49px;background:#fff;position:relative;top:-6px}.template-contact .social{text-align:center;color:#444;font-family:"Tungsten A","Tungsten B";font-weight:500;font-style:normal;letter-spacing:.05em;margin-bottom:1em}.template-contact .social a{display:inline-block;width:4em}.template-contact .social img{height:3em;opacity:.7}.template-contact .social a:hover img{opacity:1}.template-contact .bg{background:#fff}.template-contact .subscribe{text-align:center;color:#444;font-family:"Lato";font-weight:500;font-style:normal;margin-top:.5em}.template-contact .social .follow{bottom:.4em;font-size:1.8em;margin:0 .5em;position:relative}.template-contact .social .icons{display:inline-block}.template-contact .subscribe .inner .left{display:inline-block;margin-bottom:12px}.template-contact .subscribe .inner .right{display:inline-block}.template-contact .subscribe .inner{display:inline-block}.template-contact .copyright{color:var(--textlight) !important;display:flex;align-items:flex-end}@media screen and (min-width:1259px){.template-contact .copyright{margin-top:1.4em;color:var(--textlight) !important}}.template-contact .copyright .label{display:block;transform:translateY(0%);font-family:Lato,Helvetica,HelveticaNeue,Tahoma,Sans-Serif;font-weight:300;letter-spacing:normal;font-size:1em;font-size:.8em;padding-left:1em}@media screen and (min-width:1259px){.template-contact .copyright{margin-top:1.4em;color:var(--textlight) !important}}.center{text-align:center}.template-contact .links{text-align:center}.template-contact .links a{text-decoration:none;color:var(--textlight);font-family:"Lato";font-weight:600;margin:2em .5em 0 .5em;display:inline-block}.template-contact .links a:hover{color:var(--hover) !important}#newsletter-form{display:inline}#newsletter-form input{width:inherit}.template-contact .button{width:inherit;position:relative;top:-10px;animation:all .3s}#footer .icons img{opacity:1;animation:all .3s;height:3em;margin-right:1em;transform:translateY(-.9em)}#footer .icons a{position:relative;left:-13px}#footer .icons img:hover{opacity:.6}#footer h2{font-size:.9em;text-align:left;color:var(--textlight);letter-spacing:.3em;margin-bottom:1.5em;font-weight:300;max-width:unset;font-family:'Lato'}#footer ul{padding:0}#footer li{list-style:none;text-align:left;margin-bottom:.6em;font-weight:300}#footer li a{text-decoration:none;color:var(--textdark)}#footer .untitled-logo{position:absolute;width:2em;margin-left:15.3em;margin-top:-1.4em;display:none}#footer .untitled-logo img{height:3em}#footer .untitled-logo img:hover{opacity:1}#footer .codex-logo{display:inline-block;width:5em;margin:0 .2em}#footer .codex-logo img{width:100%;position:relative;top:.2em}#footer hr{position:absolute;width:99.9%;left:0}#footer .menu{width:10em;font-family:Lato}.marketinggroup1 #newsletter-submit{display:none}@media screen and (max-width:35.438em){#footer .icons img{margin-right:0}#footer .icons{padding-left:0}#footer .untitled-logo{margin-left:13.3em;margin-top:-4.4em;right:3em}}@media screen and (min-width:35.5em) and (max-width:47.938em){#footer .icons{padding-left:0}#footer .untitled-logo{margin-left:13.3em;margin-top:-4.4em;right:3em}}@media screen and (min-width:48em) and (max-width:63.938em){.template-contact .social img{height:2.5em}.template-contact .social a{width:3em}#footer .icons{padding-left:0}#footer .untitled-logo{margin-left:13.3em;margin-top:-4.4em;right:3em}}</style></div>
</div>
<div id="newsletter"><div></div></div>
<div id="tracking"></div>
<div id="cookies"><div class="cookies_wrapper">
<div id="cookie_bg"></div>
<div id="cookie_content">
<h4>Cookies improve your experience</h4>
<p>
<span id="x2x_settings"> CODEX, the company (CODEX Tech Limited represents the CODEX brand), collect device and browser information and store them
in cookies - some of which are essential for the website to function properly e.g. security, shopping cart features, sign in.
Selecting <strong>Accept all</strong> you'll get all the benefits of a personalised experience across all our platforms.
Choose <strong>Manage preferences</strong> if you'd like to select individual cookies that CODEX can use to personalise your experience.
Choose <strong>Only essential</strong> if you're ok to reject cookies that provide you with an optimized experience.
Some of the data is shared with third parties outside the EU such as Google. For more information, see our <span onclick="cookieBlock.privacy()"><a>Privacy Agreement.</a></span></span>
<span id="codex_settings"></span>
</p>
<div class="cookie_btns">
<button class="btn more" onclick="cookieBlock.moreInformation()">MANAGE PREFERENCES</button>
<button class="btn more" onclick="cookieBlock.acceptNecessary()">Only essential</button>
<button class="btn accept" onclick="cookieBlock.acceptCookies()">Accept all</button>
</div>
</div>
<div id="cookie_moreInfo">
<div id="cookie_moreInfo-inner">
<h4>Manage Preferences</h4>
<button class="btn more pref" onclick="cookieBlock.cookiePreferences()">< COOKIE PREFERENCES</button>
<div class="cookie_options">
<label class="switch">
<input type="checkbox" name="_func" value="1" onclick="event.preventDefault()" checked="">
<div class="slider round"></div>
</label>
<h5>Essential</h5>
<p>These cookies are required for basic site functionality and are therefore always enabled. These include cookies that allow you to be remembered as you explore the site within a single session or, if you request, from session to session. They help to make the store checkout process possible as well as assisting in security issues and conforming to regulations.</p>
</div>
<div class="cookie_options">
<label class="switch">
<input type="checkbox" name="_perf" value="0">
<div class="slider round"></div>
</label>
<h5>Performance</h5>
<p>These cookies allow us to improve the site’s functionality by tracking usage on our websites. In some cases, these cookies can improve the speed with which we can process your request as they allow us to remember site preferences that you’ve selected. De-selecting these cookies may result in poorly tailored recommendations and slower site performance.</p>
</div>
<div class="cookie_options social">
<label class="switch">
<input type="checkbox" name="_social" value="2">
<div class="slider round"></div>
</label>
<h5>Social Media</h5>
<p>Social media cookies offer the possibility for you to connect to your social networks and share content from our website through social media. In some cases, these cookies involve the processing of your personal data. For more information about this processing of personal data, check our Privacy & Cookie Policy.</p>
</div>
</div>
<div class="cookie_btnInfo">
<button class="btn more" onclick="cookieBlock.selectedCookies()">CONFIRM SELECTION</button>
<button class="btn accept" onclick="cookieBlock.acceptCookies()">ACCEPT ALL</button>
</div>
</div>
<div id="privacy_policy">
<div class='privacy-header'>
<h4>Privacy Policy</h4>
<img id="close" src="/asset/5787723f-9262-4ba5-9167-61a6e686106c">
</div>
<div id="privacyCopy">
<div class="privacyCopy-inner" id="privacyCopy-inner">
<p><strong>Effective date:</strong> January 12, 2026<br>
<strong>Last updated:</strong> January 12, 2026</p>
</div>
</div>
</div>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
// gtag('config', 'G-VHB8J1CC2B');
</script>
</div><script type="text/javascript">var cookieBlock=(()=>{let i,r,u=()=>{$(window).on("load",function(){function i(){var r={},i,t,n;if(document.cookie&&document.cookie!=="")for(i=document.cookie.split(";"),t=0;t<i.length;t++)n=i[t].split("="),n[0]=n[0].replace(/^ /,""),r[decodeURIComponent(n[0])]=decodeURIComponent(n[1]);return r}let t=["_all","_func","_perf","_social"];if(getCookie("_all")||getCookie("_func")||getCookie("_perf")||getCookie("_social")){$("#cookies").css("display","none");let r=i();$(document.body).css("overflow","");$(document.html).css("overflow","");for(let i in r)t.indexOf(i)!=-1&&n[i]();return}try{f();$(document.body).css("overflow","hidden");$(document.html).css("overflow","hidden");$("#cookie_content").fadeIn(500);$("#cookie_bg").fadeIn(200)}catch(r){$("#cookies").css("display","none");$("body").css("overflow","");$("html").css("overflow","")}l()})},f=()=>{let n=document.location.host,t=`/getpagejson?path=/${n}/privacy-policy-2026`;$.get(t).done(function(n){i=n.customFields[0].Value}).fail(function(n,t,i){console.error("Error fetching XML:",i)})},e=()=>{setCookie("_all",!0,7),n.acceptCookies(),t()},o=()=>{setCookie("_func",!0,7),n._func(),t()},s=()=>{gsap.to($("#cookie_content"),{opacity:0,duration:.5,ease:"power1.in",onComplete:()=>{$("#cookie_content").css("display","none"),$("#cookie_moreInfo").css("display","inline-block"),gsap.fromTo($("#cookie_moreInfo"),{opacity:0},{opacity:1,duration:.5,ease:"power1.in"})}})},h=()=>{gsap.to($("#cookie_moreInfo"),{opacity:0,duration:.5,ease:"power1.in",onComplete:()=>{$("#cookie_moreInfo").css("display","none"),$("#cookie_content").css("display","inline-block"),gsap.fromTo($("#cookie_content"),{opacity:0},{opacity:1,duration:.5,ease:"power1.in"})}})},c=()=>{r!=!1&&($("#privacyCopy-inner").append(i),r=!1),$("#cookie_moreInfo").css("display","none"),gsap.to($("#cookie_content"),{opacity:0,duration:.5,ease:"power1.in",onComplete:()=>{$("#cookie_content").css("display","none"),$("#privacy_policy").css("display","flex"),gsap.fromTo($("#privacy_policy"),{opacity:0},{opacity:1,duration:.5,ease:"power1.in"})}})},l=()=>{$(".privacy-header #close").click(()=>{$("#cookie_moreInfo").css("display","none"),gsap.to($("#privacy_policy"),{opacity:0,duration:.5,ease:"power1.in",onComplete:()=>{$("#privacy_policy").css("display","none"),$("#cookie_content").css("display","inline-block"),gsap.fromTo($("#cookie_content"),{opacity:0},{opacity:1,duration:.5,ease:"power1.in"})}})})},t=()=>{$(document.body).css("overflow",""),$(document.html).css("overflow",""),$("#cookies").css("opacity","0"),setTimeout(()=>{$("#cookies").css("display","none")},"1000")},a=()=>{let i=document.querySelectorAll(".switch input[type=checkbox]:checked");for(let t of i)setCookie(`${t.name}`,!0,7),n[t.name]();t()},n=(()=>{let n,e=t=>{function r(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[];let i=document.createElement("script");i.type="text/javascript";i.src=t;i.async=!0;document.getElementsByTagName("head")[0].appendChild(i);r("config",n)},t=n=>{window.dataLayer=window.dataLayer||[],dataLayer.push(n)},o=()=>{t("js",new Date),t("config",n)},i=()=>{let t=[{brand:"x2x.media",newTag:!0,trackingCodes:[{name:""},{name:"x2xall"},],gtag:"G-LW9FTQJQEQ"},{brand:"codex.online",newTag:!0,trackingCodes:[{name:""},{name:"tracker2"},{name:"x2xall"}],gtag:"G-TH707HHRGJ"},{brand:"help.codex.online",newTag:!1,trackingCodes:[],gtag:"G-YD0SMPE7YK"},{brand:"mediavault.codex.online",newTag:!1,trackingCodes:[],gtag:"G-2YRPB3YE8W"},{brand:"pix.online",newTag:!1,trackingCodes:[],gtag:"G-BBL1LVYC8V"},{brand:"help.pix.online",newTag:!1,trackingCodes:[],gtag:"G-0B33KB8P2R"},{brand:"globalconnect.codex.online",newTag:!1,trackingCodes:[],gtag:"G-VHB8J1CC2B"},{brand:"globaldrive.codex.online",newTag:!1,trackingCodes:[],gtag:"G-VHB8J1CC2B"},],r=window.location.hostname,i=t.findIndex(n=>n.brand===r);if(t[i].trackingCodes){(function(n,t,i,r,u,f,e){n.GoogleAnalyticsObject=u;n[u]=n[u]||function(){(n[u].q=n[u].q||[]).push(arguments)};n[u].l=1*new Date;f=t.createElement(i);e=t.getElementsByTagName(i)[0];f.async=1;f.src=r;e.parentNode.insertBefore(f,e)})(window,document,"script","https://www.google-analytics.com/analytics.js","ga");for(let n in t[i].trackingCodes)ga("create",t[i].trackingCodes[n].code,"auto",t[i].trackingCodes[n].name),ga("send","pageview")}n=t[i].gtag;e(`https://www.googletagmanager.com/gtag/js?id=${n}`,"head");o(n)},r=()=>{},u=()=>{},f=()=>{i(),r(),u()},s=()=>new Promise((n,t)=>{typeof ga=="function"?n("Google tag is set"):t("Google tag not found")});return{_func:()=>{i()},_perf:()=>{r()},_social:()=>{u()},acceptCookies:()=>{f()},_all:()=>{f()},checkAnalytics:()=>s(),gtag:()=>{t()}}})();return u(),{selectedCookies:()=>{a()},moreInformation:()=>{s()},cookiePreferences:()=>{h()},privacy:()=>{c()},acceptCookies:()=>{e()},acceptNecessary:()=>{o()}}})()</script><style>#cookies{position:fixed;z-index:10005;width:100%;height:100%;display:block;top:0;left:0;bottom:0;right:0;transition:opacity 1s ease-out}#cookies button{cursor:pointer}#cookies h4{letter-spacing:-.5px}#cookies p{margin:1rem 0;color:#000 !important}#cookies{scroll-behavior:smooth;scrollbar-color:#d9d9d9;scrollbar-track-color:#fff}div::-webkit-scrollbar{-webkit-appearance:none;width:8px;height:1rem;border-radius:5px 15px 15px 5px;margin-right:10px;position:absolute;right:8px}div::-webkit-scrollbar-thumb{background-color:#d9d9d9;border:0 solid #f2f2f2;border-radius:5px}div::-webkit-scrollbar-track{background:#fff;border-radius:5px}.privacyCopy-inner::-webkit-scrollbar{position:absolute;left:0}#cookies #privacy_policy::-webkit-scrollbar{-webkit-appearance:none;width:8px;height:1rem;border-radius:5px 15px 15px 5px;margin-right:10px;position:absolute;right:8px}#cookies #privacy_policy::-webkit-scrollbar-thumb{background-color:#d9d9d9;border:0 solid #f2f2f2;border-radius:5px}#cookies #privacy_policy::-webkit-scrollbar-track{background:#fff;border-radius:5px}menu,ol,ul{padding:0 0 0 20px}#x2x_settings{display:block}.cookies_wrapper{position:absolute;color:#fff;z-index:50;font-family:"Lato";text-align:left;font-size:.8rem;font-weight:400;line-height:1.2rem;width:100%;height:100%;display:flex;justify-content:center;align-items:center}.cookies_wrapper p{text-align:left}#cookies .cookie_btns{display:flex;padding:0;position:relative;top:13px}#cookies .cookie_btnInfo{position:sticky;bottom:0;left:0;width:calc(100% - 3rem);padding:16px 1.5rem;margin:0;box-shadow:-1px -7px 15px -10px rgba(0,0,0,.49);-webkit-box-shadow:-1px -7px 15px -10px rgba(0,0,0,.49);-moz-box-shadow:-1px -7px 15px -10px rgba(0,0,0,.49);background-color:#fff;height:auto;z-index:2;display:flex;flex-direction:column-reverse;justify-content:center}#cookies .cookie_btns button,#cookies .cookie_btnInfo button{margin-bottom:13px;align-self:auto}#cookies .cookie_btnInfo button:first-child{margin-bottom:0}#cookies #cookie_bg{display:none;position:fixed;width:100%;height:100%;background-color:#000;opacity:.3}#cookies #cookie_content h4{font-size:1.2rem;font-weight:700;padding:0 0 1.5625rem;margin:0}#cookies #cookie_moreInfo h4{font-size:1.2rem;font-weight:700;padding:0 0 1.5625rem;margin:0}#cookies .privacy-header h4{font-size:1.2rem;font-weight:700;padding:0;margin:0}#cookies #cookie_content p{font-size:.8125rem;line-height:20px;margin:0;padding-bottom:40px;text-align:left}.cookies_wrapper a{font-family:"Lato";color:#000;text-decoration:underline;cursor:pointer}#cookies .btn{font-family:"Lato";display:inline-block;font-size:12px;font-weight:300;padding:14px 26px;text-align:center;text-decoration:none;border:1px solid #000;text-transform:uppercase;border-radius:3px;transition:background-color .3s ease-in}#cookies .btn:hover,#cookies .btn:visited{background-color:rgba(0,0,0,1);color:#fff;cursor:pointer}#cookies .more{color:#000;background-color:rgba(0,0,0,0)}#cookies .accept{background-color:rgba(0,0,0,1);color:#fff}#cookies .accept:visited{background-color:rgba(255,255,255,1);color:#000;cursor:pointer}#cookies .accept:hover{background-color:rgba(0,0,0,.8);color:#fff}#cookies #cookie_content{display:none;opacity:0;position:relative;padding:1.5rem 1.5rem 0 1.5rem;background-color:#fff;color:#000;width:100%;max-width:100%;max-height:calc(100% - 5rem);border-radius:15px;margin:1.25rem;overflow:auto}#cookies #cookie_moreInfo{display:none;opacity:0;position:relative;padding:0;background-color:#fff;color:#000;width:100%;max-width:100%;height:auto;max-height:calc(100% - 2em);border-radius:15px;margin:1.25rem;overflow:auto}#cookies #cookie_moreInfo #cookie_moreInfo-inner{padding:1.5rem 1.5rem 0 1.5rem}#cookies #cookie_content{opacity:1}#cookies #cookie_moreInfo{opacity:0}#cookies #cookie_moreInfo .pref{margin-bottom:1.8125rem}#cookies #privacy_policy{display:none;position:relative;flex-flow:column nowrap;align-items:stretch;justify-content:flex-start;padding:0;padding-right:8px;background-color:#fff;color:#000;border-radius:15px;max-width:calc(615px - 7px);max-height:calc(100% - 2.5rem);overflow:hidden;margin:1.25rem;padding-bottom:25px;padding-right:7px}#cookies #privacy_policy .privacy-header{position:absolute;top:0;background-color:#fff;height:85px;width:calc(100% - 4.75em);padding:0 2.375em;display:flex;flex-direction:row;align-items:center;justify-content:space-between;border-radius:15px 15px 0 0;z-index:2}#cookies #privacy_policy .privacy-header #close{width:25px;height:25px;position:relative;display:block;z-index:10;bottom:18px;right:-12px;cursor:pointer}#cookies #privacy_policy #privacyCopy{width:100%;height:auto;min-height:auto;max-height:100%;overflow:hidden;border-radius:0 0 .8rem .8rem;overflow-y:scroll;position:relative;margin-top:95px}#cookies #privacy_policy #privacyCopy-inner{padding:0 2.375em;font-family:"Lato";font-size:14px;font-weight:400;line-height:23px;text-align:left}#cookies #privacy_policy #privacyCopy-inner p:first-child{margin-top:0}#cookies #privacy_policy #privacyCopy-inner p:last-child{margin-bottom:0}#cookies #privacy_policy #privacyCopy-inner strong{font-weight:400}#cookies .cookie_options h5,#cookies .cookie_options p{padding-right:0;margin:0;line-height:1rem}#cookies .switch{position:absolute;left:0;top:-10px;display:inline-block;height:20px;width:40px;z-index:2}#cookies .slider.round{border-radius:34px}#cookies .slider{background-color:#ccc;bottom:0;cursor:pointer;left:0;position:absolute;right:0;top:0;transition:.4s}#cookies .slider.round:before{border-radius:50%}#cookies .slider:before{background-color:#fff;bottom:1px;content:"";height:18px;left:2px;position:absolute;transition:.4s;width:18px}#cookies .switch input{display:none}#cookies .switch input[type=checkbox]{height:25px;position:relative;float:right;top:-2px;right:1rem;width:25px !important}#cookies input:checked+.slider{background-color:#6cbd6b !important}#cookies input:checked+.slider:before{transform:translateX(18px)}@media screen and (min-device-width:568px){#cookies #cookie_content,#cookie_moreInfo{width:80%;max-width:615px}#cookies .cookie_options h5,#cookies .cookie_options p{padding:0 !important;line-height:1rem;font-size:.875rem}#cookies .cookie_options h5,#cookies .cookie_options p{margin:0}#cookies .cookie_options h5{display:inline-block}#cookies .slider.round{border-radius:34px}#cookies .slider{background-color:#ccc;bottom:0;cursor:pointer;left:0;position:absolute;right:0;top:0;transition:.4s}#cookies .slider.round:before{border-radius:50%}#cookies .slider:before{background-color:#fff;bottom:1px;content:"";height:24px;left:2px;position:absolute;transition:.4s;width:24px}#cookies .switch input{display:none}#cookies .switch input[type=checkbox]{height:25px;position:relative;float:right;top:-2px;right:1rem;width:25px !important}#cookies input:checked+.slider{background-color:#6cbd6b}#cookies input:checked+.slider:before{transform:translateX(22px)}}#cookies .cookie_btnInfo .accept{background-color:rgba(0,0,0,1);color:#fff;width:auto}#cookies .cookie_btnInfo .accept:hover,#cookies .cookie_btnInfo .accept:visited{background-color:rgba(255,255,255,1);color:#000;cursor:pointer}#cookies .cookie_options{padding-bottom:2.25rem;margin:0;display:block;position:relative}#cookies .cookie_options h5{font-size:.875rem;font-weight:400;position:relative;transform:translateY(-50%);top:50%;padding-left:50px !important}#cookies #cookie_content,#cookie_moreInfo{padding:2.5625em 1.5em 2.375em;background-color:#fff;color:#000 !important;z-index:10000}#cookie_moreInfo .cookie_options.social{padding-bottom:15px}@media screen and (orientation:portrait){#cookies .cookie_btns,#cookies .cookie_btnInfo{flex-direction:column-reverse}}@media screen and (orientation:landscape){#cookies .cookie_btns,#cookies .cookie_btnInfo{flex-direction:row}#cookies .cookie_btns button,#cookies .cookie_btnInfo button{flex:1 1 0px}}@media screen and (min-width:48em){#cookies #cookie_content,#cookies #cookie_moreInfo{display:none;padding:2.375em;width:100%;max-width:615px}.cookies_wrapper{font-weight:300}#cookies #privacy_policy #privacyCopy-inner{font-weight:300}#cookies #privacy_policy{max-width:615px;max-height:80%;max-width:calc(615px + 60px)}#cookies #privacy_policy .privacy-header #close{top:-15px;right:-15px}#cookies .cookie_btns{display:flex;flex-direction:row;justify-content:space-between;padding:0}#cookies .cookie_btns button,#cookies .cookie_btnInfo button{flex:1 1 0px}#cookies .cookie_btns button:not(:last-child),#cookies .cookie_btnInfo button:not(:last-child){margin-right:13px}#cookies .cookie_btnInfo button:first-child{margin-bottom:13px}#cookies #cookie_content p{font-size:1.0625rem;line-height:1.7rem;padding:0 !important;padding-bottom:85px !important}#cookies #cookie_content,#cookie_moreInfo{padding:2.8125rem 2.375em 2.4375rem}#cookies #cookie_content h4{font-size:1.5625rem;font-weight:700;padding:0 0 1.5625rem;margin:0}#cookies #cookie_moreInfo h4{font-size:1.5625rem;font-weight:600;padding:0 0 2.5625rem;margin:0}#cookies .privacy-header h4{font-size:1.5625rem;font-weight:600;padding:0;margin:0}#cookies .cookie_options h5{font-size:.875rem;font-weight:300;position:relative;transform:translateY(-50%);top:50%;padding-left:8px !important}#cookies #privacy_policy .privacy-header{height:85px}#cookies #cookie_moreInfo #cookie_moreInfo-inner{padding:0}#cookies .cookie_btnInfo{width:100%;position:relative;display:flex;flex-direction:row;justify-content:center;padding:0;webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}#cookies .cookie_options h5,#cookies .cookie_options p{padding:0 !important;margin:0;line-height:1rem}#cookie_moreInfo .cookie_options.social{padding-bottom:85px}#cookies .switch{position:relative;left:0;top:0;display:inline-block;height:26px;width:50px}#cookies #cookie_moreInfo{overflow-y:auto}#cookies .cookie_options{padding-bottom:1rem}#cookies #privacy_policy #privacyCopy{margin-top:100px}}@media screen and (min-width:64em){#cookies .cookie_options h5{padding-left:8px}}@media only screen and (min-device-width:320px) and (max-device-width:480px) and (-webkit-min-device-pixel-ratio:2) and (orientation:landscape){#cookies #cookie_content,#cookies #cookie_moreInfo{display:none;width:100%;max-width:calc(100% - 2.5rem);height:auto;max-height:calc(100% - 5rem);margin:1.5rem}#cookies #cookie_content{padding:2.375em}#cookies #cookie_moreInfo{padding:0}#cookies #cookie_content h4{font-size:1rem;font-weight:700;padding:0 0 1.5625rem;margin:0}#cookies #cookie_content p{font-size:.8125rem;line-height:20px;margin:0;padding-bottom:10px}#cookies .cookie_btns button:nth-child(-n+2),#cookies .cookie_btnInfo button:nth-child(-n+2){margin-right:13px}#cookies #privacy_policy .privacy-header{border-radius:15px;width:calc(100% - 5em);height:25%}#cookies #privacy_policy .privacy-header #close{bottom:0;right:0}#cookies #cookie_moreInfo{overflow-y:scroll}#cookies .cookie_options{padding-bottom:1rem}#cookies .switch{left:0;top:1rem;height:20px;width:40px}#cookies .cookie_options h5{padding-left:50px}#cookies #privacy_policy{max-width:calc(100% - 2.5rem);height:calc(100% - 2.5rem)}#cookie_moreInfo .cookie_options.social{padding-bottom:45px}#cookies .cookie_btnInfo button:first-child{margin-bottom:13px}}@media only screen and (min-device-width:320px) and (max-device-width:568px) and (-webkit-min-device-pixel-ratio:2) and (orientation:landscape){#cookies #cookie_content,#cookies #cookie_moreInfo{display:none;width:100%;max-width:calc(100% - 2.5rem);height:auto;max-height:calc(100% - 5rem);margin:1.5rem}#cookies #cookie_content{padding:2.375em}#cookies #cookie_moreInfo{padding:0}#cookies #cookie_content h4{font-size:1rem;font-weight:700;padding:0 0 1.5625rem;margin:0}#cookies #cookie_content p{font-size:.8125rem;line-height:20px;margin:0;padding-bottom:10px}#cookies .cookie_btns button:nth-child(-n+2),#cookies .cookie_btnInfo button:nth-child(-n+2){margin-right:13px}#cookies #privacy_policy .privacy-header{border-radius:15px;width:calc(100% - 5em);height:25%}#cookies #privacy_policy .privacy-header #close{bottom:0;right:0}#cookies #cookie_moreInfo{overflow-y:scroll}#cookies .cookie_options{padding-bottom:1rem}#cookies .switch{left:0;top:1rem;height:20px;width:40px}#cookies .cookie_options h5{padding-left:50px}#cookies #privacy_policy{max-width:calc(100% - 2.5rem);height:calc(100% - 2.5rem);max-height:100%}#cookie_moreInfo .cookie_options.social{padding-bottom:45px}#cookies .cookie_btnInfo button:first-child{margin-bottom:13px}}@media only screen and (min-device-width:375px) and (max-device-width:667px) and (-webkit-min-device-pixel-ratio:2) and (orientation:landscape){#cookies #cookie_content,#cookies #cookie_moreInfo{display:none;width:100%;max-width:calc(100% - 2.5rem);height:auto;max-height:calc(100% - 5rem);margin:1.5rem}#cookies #cookie_content{padding:2.375em}#cookies #cookie_moreInfo{padding:0}#cookies #cookie_content h4{font-size:1rem;font-weight:700;padding:0 0 1.5625rem;margin:0}#cookies #cookie_content p{font-size:.8125rem;line-height:20px;margin:0;padding-bottom:10px}#cookies .cookie_btns button:nth-child(-n+2),#cookies .cookie_btnInfo button:nth-child(-n+2){margin-right:13px}#cookies #privacy_policy .privacy-header{border-radius:15px;width:calc(100% - 5em);height:25%}#cookies #privacy_policy .privacy-header #close{bottom:0;right:0}#cookies #cookie_moreInfo{overflow-y:scroll}#cookies .cookie_options{padding-bottom:1rem}#cookies .switch{left:0;top:1rem;height:20px;width:40px}#cookies .cookie_options h5{padding-left:50px}#cookies #privacy_policy{max-width:calc(100% - 2.5rem);height:calc(100% - 2.5rem);max-height:100%}#cookie_moreInfo .cookie_options.social{padding-bottom:45px}#cookies .cookie_btnInfo button:first-child{margin-bottom:13px}}@media only screen and (min-device-width:414px) and (max-device-width:736px) and (-webkit-min-device-pixel-ratio:3) and (orientation:landscape){#cookies #cookie_content,#cookies #cookie_moreInfo{display:none;width:100%;max-width:calc(100% - 2.5rem);height:auto;max-height:calc(100% - 5rem);margin:1.5rem}#cookies #cookie_content{padding:2.375em}#cookies #cookie_moreInfo{padding:0}#cookies #cookie_content h4{font-size:1rem;font-weight:700;padding:0 0 1.5625rem;margin:0}#cookies #cookie_content p{font-size:.8125rem;line-height:20px;margin:0;padding-bottom:10px}#cookies .cookie_btns button:nth-child(-n+2),#cookies .cookie_btnInfo button:nth-child(-n+2){margin-right:13px}#cookies #privacy_policy .privacy-header{border-radius:15px;width:calc(100% - 5em);height:25%}#cookies #privacy_policy .privacy-header #close{bottom:0;right:0}#cookies #cookie_moreInfo{overflow-y:scroll}#cookies .cookie_options{padding-bottom:1rem}#cookies .switch{left:0;top:1rem;height:20px;width:40px}#cookies .cookie_options h5{padding-left:50px}#cookies #privacy_policy{max-width:calc(100% - 2.5rem);height:calc(100% - 2.5rem);max-height:100%}#cookie_moreInfo .cookie_options.social{padding-bottom:45px}#cookies .cookie_btnInfo button:first-child{margin-bottom:13px}}@media only screen and (min-device-width:414px) and (max-device-width:896px) and (-webkit-min-device-pixel-ratio:2) and (orientation:landscape){#cookies .cookie_btnInfo{position:sticky;bottom:0;left:0;width:calc(100% - 3rem);padding:16px 1.5rem;margin:0;box-shadow:-1px -7px 15px -10px rgba(0,0,0,.49);-webkit-box-shadow:-1px -7px 15px -10px rgba(0,0,0,.49);-moz-box-shadow:-1px -7px 15px -10px rgba(0,0,0,.49);background-color:#fff;height:auto;z-index:2;display:flex;flex-direction:row;justify-content:center}#cookie_moreInfo-inner{padding:1.5rem 1.5rem 0 1.5rem !important}}@media only screen and (min-device-width:375px) and (max-device-width:812px) and (-webkit-min-device-pixel-ratio:3) and (orientation:landscape){#cookies #cookie_content,#cookies #cookie_moreInfo{display:none;width:100%;max-width:calc(100% - 2.5rem);height:auto;max-height:calc(100% - 5rem);margin:1.5rem}#cookies #cookie_content{padding:2.375em}#cookies #cookie_moreInfo{padding:0}#cookies #cookie_content h4{font-size:1rem;font-weight:700;padding:0 0 1.5625rem;margin:0}#cookies #cookie_content p{font-size:.8125rem;line-height:20px;margin:0;padding-bottom:10px}#cookies .cookie_btns button:nth-child(-n+2),#cookies .cookie_btnInfo button:nth-child(-n+2){margin-right:13px}#cookies #privacy_policy .privacy-header{border-radius:15px;width:calc(100% - 5em);height:25%}#cookies #privacy_policy .privacy-header #close{bottom:0;right:0}#cookies #cookie_moreInfo{overflow-y:scroll}#cookies .cookie_options{padding-bottom:1rem}#cookies .switch{left:0;top:-.5rem;height:20px;width:40px}#cookies .cookie_options h5{padding-left:50px}#cookies #privacy_policy{max-width:calc(100% - 2.5rem);height:calc(100% - 2.5rem);max-height:100%}#cookie_moreInfo .cookie_options.social{padding-bottom:45px}#cookies .cookie_btnInfo button:first-child{margin-bottom:13px}}@media only screen and (device-width:320px) and (device-height:640px) and (-webkit-min-device-pixel-ratio:2) and (-webkit-min-device-pixel-ratio:3) and (-webkit-device-pixel-ratio:4) and (orientation:landscape){#cookies #cookie_content,#cookies #cookie_moreInfo{display:none;width:100%;max-width:calc(100% - 2.5rem);height:auto;max-height:calc(100% - 5rem);margin:1.5rem}#cookies #cookie_content{padding:2.375em}#cookies #cookie_moreInfo{padding:0}#cookies #cookie_content h4{font-size:1rem;font-weight:700;padding:0 0 1.5625rem;margin:0}#cookies #cookie_content p{font-size:.8125rem;line-height:20px;margin:0;padding-bottom:10px}#cookies .cookie_btns{display:flex;flex-direction:row;justify-content:space-between;padding:0;position:relative;top:13px}#cookies .cookie_btns button:nth-child(-n+2),#cookies .cookie_btnInfo button:nth-child(-n+2){margin-right:13px}#cookies .cookie_btns button,#cookies .cookie_btnInfo button{flex:1 1 0px}#cookies #privacy_policy .privacy-header{border-radius:15px;width:calc(100% - 5em);height:25%}#cookies #privacy_policy .privacy-header #close{bottom:0;right:0}#cookies #cookie_moreInfo{overflow-y:scroll}#cookies .cookie_options{padding-bottom:1rem}#cookies .switch{left:0;top:-1rem;height:20px;width:40px}#cookies .cookie_options h5{padding-left:50px}#cookies #privacy_policy{max-width:calc(100% - 2.5rem);height:calc(100% - 2.5rem);max-height:100%}#cookie_moreInfo .cookie_options.social{padding-bottom:45px}#cookies .cookie_btnInfo button:first-child{margin-bottom:13px}}@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio:1){#cookies #privacy_policy{max-height:calc(100% - 5rem)}#cookies #cookie_content{padding:2.375em}#cookies #cookie_moreInfo{padding:0;max-height:calc(91% - 2em)}}@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio:2){#cookies #privacy_policy{max-height:calc(93% - 5rem)}#cookies #cookie_content{padding:2.375em}#cookies #cookie_moreInfo{padding:0;max-height:calc(91% - 2em)}}@media only screen and (min-device-width:1112px) and (max-device-width:1112px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio:2){#cookies #privacy_policy{max-height:calc(93% - 5rem)}#cookies #cookie_content{padding:2.375em}#cookies #cookie_moreInfo{padding:0;max-height:calc(91% - 2em)}}@media only screen and (min-device-width:1366px) and (max-device-width:1366px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio:2){#cookies #privacy_policy{max-height:calc(93% - 5rem)}#cookies #cookie_content{padding:2.375em}#cookies #cookie_moreInfo{padding:0;max-height:calc(91% - 2em)}}</style></div>
</div>
</body>
</html>