/*  Theme Name: Bespoke 
  Description: 1.0
  Author: Addedlovely
*/
#wpadminbar {display: none !important;}
html {margin-top: 0 !important;}

/* ==========================================================================
  Fonts
   ========================================================================== */
  @font-face {
  font-family: 'tyk';
  src: url('../fonts/tyk.eot?66741098');
  src: url('../fonts/tyk.eot?66741098#iefix') format('embedded-opentype'),
        url('../fonts/tyk.woff?66741098') format('woff'),
        url('../fonts/tyk.ttf?66741098') format('truetype'),
        url('../fonts/tyk.svg?66741098#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}

/* Default Fontello */
[class^="icon-"]:before, [class*=" icon-"]:before, blockquote:before {font-family: "tyk"; font-style: normal; font-weight: normal; speak: none; display: inline-block; text-decoration: inherit; text-align: center; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.icon-cloud-b:before { content: '\e800'; } /* '' */
.icon-left:before { content: '\e801'; } /* '' */
.icon-right:before { content: '\e802'; } /* '' */
.icon-quote:before { content: '\e803'; } /* '' */
.icon-features:before { content: '\e804'; } /* '' */
.icon-extend:before { content: '\e805'; } /* '' */
.icon-cube:before { content: '\e806'; } /* '' */
.icon-hybrid-b:before { content: '\e807'; } /* '' */
.icon-onpremises-b:before { content: '\e808'; } /* '' */
.icon-case-studies:before { content: '\e809'; } /* '' */
.icon-hybrid:before { content: '\e80a'; } /* '' */
.icon-onpremises:before { content: '\e80b'; } /* '' */
.icon-cloud:before { content: '\e80c'; } /* '' */
.icon-calendar:before { content: '\e80d'; } /* '' */
.icon-close:before { content: '\e80e'; } /* '' */
.icon-share:before { content: '\e80f'; } /* '' */
.icon-print:before { content: '\e810'; } /* '' */
.icon-author:before { content: '\e811'; } /* '' */
.icon-casestudy-client:before { content: '\e813'; } /* '' */
.icon-casestudy-details:before { content: '\e814'; } /* '' */
.icon-casestudy-problem:before { content: '\e816'; } /* '' */
.icon-casestudy-solution:before { content: '\e817'; } /* '' */
.icon-category:before { content: '\e818'; } /* '' */
.icon-features-api:before { content: '\e81a'; } /* '' */
.icon-features-discovery:before { content: '\e81c'; } /* '' */
.icon-features-endpoints:before { content: '\e81d'; } /* '' */
.icon-features-mockout:before { content: '\e81e'; } /* '' */
.icon-features-more:before { content: '\e820'; } /* '' */
.icon-features-nofications:before { content: '\e821'; } /* '' */
.icon-features-onboarding:before { content: '\e822'; } /* '' */
.icon-features-quotas:before { content: '\e823'; } /* '' */
.icon-features-sharding:before { content: '\e824'; } /* '' */
.icon-grpc:before { content: '\e826'; } /* '' */
.icon-js-grpc:before { content: '\e827'; } /* '' */
.icon-js:before { content: '\e828'; } /* '' */
.icon-lua:before { content: '\e829'; } /* '' */
.icon-net-grpc:before { content: '\e82a'; } /* '' */
.icon-python:before { content: '\e82b'; } /* '' */
.icon-faq:before { content: '\e82c'; } /* '' */
.icon-features-authentication:before { content: '\e82d'; } /* '' */
.icon-features-monitoring:before { content: '\e82e'; } /* '' */
.icon-features-transforms:before { content: '\e82f'; } /* '' */
.icon-features-api-documentation:before { content: '\e830'; } /* '' */
.icon-search:before { content: '\e832'; } /* '' */
.icon-blog:before { content: '\e833'; } /* '' */
.icon-casestudy-metrics:before { content: '\e834'; } /* '' */
.icon-features-developer-portal:before { content: '\e835'; } /* '' */
.icon-features-microservice:before { content: '\e836'; } /* '' */
.icon-whitepapers:before { content: '\e837'; } /* '' */
.icon-twitter:before { content: '\f099'; } /* '' */
.icon-github:before { content: '\f09b'; } /* '' */

/* ==========================================================================
  Helpers
   ========================================================================== */
.clear:after {content: ""; visibility: hidden; display: block; height: 0; clear: both;}
.v-center {position: absolute; top:50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%);}
.center {display:block; margin-left: auto; margin-right:auto;} 
.cover {-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: center center; background-repeat: no-repeat; }
.lazy {display: none;}
.browsehappy {position: fixed; bottom: 0; left: 0; right: 0; text-align: center; background: #000; color: #fff;}
.fixed {position: fixed; top:0; bottom: 0; left:0; right: 0;}
.modal {overflow: scroll; visibility: hidden; opacity: 0; z-index: 5;}
.hotspot {position: absolute; top:0; left:0; bottom: 0; right: 0; cursor: pointer;}
.m-show {display: none;}
.shadow {box-shadow: 0px 5px 6px 0px rgba(0, 0, 0, 0.15);}

.fluid-video {position: relative;}
.fluid-video iframe {position: absolute; top:0; left:0; bottom: 0; right:0; height: 100%; width: 100%;} 
.fluid-video:before {padding-top: 56.25%; content: ''; display: block;}

/* ==========================================================================
  General
   ========================================================================== */
* {margin: 0; padding: 0;}
html {-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; box-sizing: border-box;} 
*, *:before, *:after  {box-sizing: inherit;}

img {border: 0; display: block; outline: none; -ms-interpolation-mode: bicubic; max-width: 100%; height: auto;}
iframe {border: 0;}

/* ==========================================================================
  Typography
   ========================================================================== */
footer i.fa.fa-map-marker {padding-right: 5px;}
a {outline: none;}
cite, address {font-style: normal;}
blockquote {font-style: italic;}
blockquote:before { content: '\e803';     height: 32px; font-size: 26px; position: relative; top: -3px; padding-right: 16px; } 
cite {display: block; margin: 0 0 0 auto; text-align: right;}
cite strong {display: block;}

.f-0 {font-size: 0;}
.f-11 {font-size: 14px;}
.f-12 {font-size: 14px;  line-height: 2.66666666666667; }
.f-13 {font-size: 14px; color: #666666;}
.f-14 {font-size: 14px;}
.f-16 {font-size: 16px;}
.f-18 {font-size: 18px;}
.f-24 {font-size: 24px;}
.f-26 {font-size: 26px;}
.f-37 {font-size: 37px; line-height: 1.13513513513514;}
.f-48 {font-size: 48px; line-height: 1.2;}

h2 > a {display: none;}

.mb {margin-bottom: 16px;}
.ucase {text-transform: uppercase;}
.two-column {-webkit-columns: 2; -moz-columns: 2; columns: 2; -webkit-column-gap: 100px; -moz-column-gap: 100px; column-gap: 100px; }

.bold {font-weight: bold;}
.bold.roboto, .roboto .bold {font-weight: 500;}

/* ==========================================================================
  Forms
   ========================================================================== */
button, input, optgroup, select, textarea {color: inherit; font: inherit; outline: none; border: none; font-family: 'Roboto', sans-serif;}
input[type=text], input[type=submit], input[type=email], input[type=password] {-webkit-appearance: none; border-radius:0;}
input, select {height: 30px;} /* Input / select need to have height set and NOT lineheight (IE specifically) */
button, input[type="button"], input[type="submit"] {cursor: pointer;}
textarea {resize: none; overflow: auto; -webkit-appearance: none;}
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {-webkit-appearance: none; line-height: normal;}

input {line-height: 48px; }
input, textarea {color: #5a5a68; padding-left: 18px; width: 100%;  border-left:10px solid transparent; }
textarea {padding: 18px; height: 220px;}
input:valid, textarea:valid {border-color: #00d9ba; }
input:placeholder-shown:valid, textarea:placeholder-shown:valid {border-color: #000018; }
input:invalid, textarea:invalid {border-color: #d23059; }
input:placeholder-shown:invalid, textarea:placeholder-shown:invalid {border-color: transparent; }
input:required:placeholder-shown, textarea:required:placeholder-shown {border-color: #000018; }


::-webkit-input-placeholder {color: #b7b7b7;}
:-moz-placeholder {color: #b7b7b7;}
::-moz-placeholder {color: #b7b7b7;}
:-ms-input-placeholder {color: #b7b7b7;}

/* Gravity Forms */
.hidden_label label {display: none;}
.gform_body {margin-top: 52px;}
.gform_body li {list-style-type: none; margin-bottom: 10px;}
.gform_footer {text-align: center;}

.gform_validation_error .gform_heading {display: none;}
.gfield_error input, .gfield_error textarea {border-color:#d23059 }
.validation_message {display: none;}

/* ==========================================================================
  Buttons
   ========================================================================== */

.button, input.button {padding: 11px 60px;  color: #FFF; font-size: 14px; font-weight: bold; display: inline-block; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.15em; width: auto; }

.button.fluid {width: 100%; padding-left: 0; padding-right: 0; text-align: center;}

.button.green {  background: #109eae; background: -webkit-linear-gradient(75deg,  #109eae 0%,#04dec4 100%); background: linear-gradient(75deg,  #109eae 0%,#04dec4 100%); }
.button.green.glow {box-shadow: 0px 0px 8px 4px rgba(0, 217, 186, 0.75) inset; }

.button.red { background: #d23059; -webkit-linear-gradient(15deg, #d23059 0%,#ff1745 100%); background: linear-gradient(15deg, #d23059 0%,#ff1745 100%);}
.button.red.glow { box-shadow: 0px 0px 8px 4px rgba(254, 77, 112, 0.75) inset; }

.button.navy { border-color: #2f3f9e; background: #1a237d; -webkit-linear-gradient(75deg, #1a237d 0%,#2f3f9e 100%); background: linear-gradient(75deg, #1a237d 0%,#2f3f9e 100%); }
.button.navy.outline {border-color: #2f3f9e; color: #2f3f9e;}

.button.white { border-color: #FFF; background: #FFF; }
.button.white.outline {border-color: #FFF; color: #FFF;}

.button.grey {background: #a4a4a8;}

.button.blue {background: #2f3f9e;}

.button.hybrid {background: #0569a9; -webkit-linear-gradient(90deg, #0584af 0%,#04b0b9 100%); background: linear-gradient(90deg, #0584af 0%,#04b0b9 100%);}
.button.onpremises {background: #924f73; -webkit-linear-gradient(90deg, #924f73 0%, #e1647b 100%); background: linear-gradient(90deg, #924f73 0%, #e1647b 100%);}

.button.outline {border:2px solid transparent; background: transparent; }
.button.outline.blue {border: 1px solid #262626; text-transform: none; transition: 0.3s; padding: .786rem 1.5rem !important; border-radius: .358rem; font-size: 1rem; line-height: 1; font-weight: 500; letter-spacing: 0; background-color: transparent; color: #262626;}
.button.outline.blue:hover,
.button.outline.blue:active,
.button.outline.blue:focus {background-color: #04A118; color: #fff; border-color: #04A118; text-decoration: none;}
.button.outline.grey {border-color:#5a5a68; color:#5a5a68;}

.button.small {height: 26px; border-radius: 18px; line-height: 26px; padding: 0 16px; text-transform: none; font-size: 11px; letter-spacing: 0.025em; }
.button.small:before {font-size: 12px; margin-right: 6px;}
.button.medium { border-radius: 15px; padding-top: 4px; padding-bottom: 4px; min-width: 205px; font-size: 12px;}

.button.animated {  -moz-animation: bgtween 2s 1 linear; -o-animation: bgtween 2s 1 linear; -webkit-animation: bgtween 2s 1 linear; animation: bgtween 2s 1 linear; }
.button.animated:hover {background: -webkit-linear-gradient(40deg,  #109eae 0%, #04dec4 100% ); background: linear-gradient(40deg,  #109eae 0%, #04dec4 100%); border:0; -moz-animation-play-state: running; -o-animation-play-state: running; -webkit-animation-play-state: running; animation-play-state: running; line-height: 48px;}


/* ==========================================================================
  Structure
   ========================================================================== */
html, body {height: 100%;}

/* ==========================================================================
  Header
   ========================================================================== */
.header { background-color: #f9f9f9!important; color: #FFF; position: fixed; top:0; left:0; right: 0; line-height: 60px; height: 33px; text-transform: uppercase; letter-spacing: 0.175em; font-weight: bold; text-align: right; z-index: 4;}
.header .container {height: 100%;}

.logo img {width: auto; height: auto; display: block;}

.header-github {width: 28px; height: 28px; color: #ff1745; background: #FFF; border-radius: 50%; position: absolute; left:122px; top:0; bottom: 0; margin: auto; z-index: 1;}
.header-github:before, .header-github:after  { left:0; position: absolute;}
.header-github:before {width: 26px; height: 26px; line-height: 1; top:-2px;  font-size: 32px;}
.header-github:after {content: ''; border: 1px solid #ff1745; top:0; width: 28px; height: 28px; border-radius: 50%;}

.menu > ul {display: inline-block; position: relative; text-align: center;}
.menu a {display: block; }
.menu .menu-underline { background: #00d9ba; height: 2px; position: absolute; bottom: 0; left:0; padding: 0; pointer-events: none;}
.burger, .submenu .submenu-back {display: none;}

.submenu {visibility:hidden; height: 0; opacity:0; position: absolute; top:60px; left:50%; -webkit-transform:translateX(-50%); transform:translateX(-50%); line-height: 50px;}
.submenu li {background: rgba(0,0,24, 0.85); display: block; margin-top: 1px; padding: 0 26px; white-space: nowrap; opacity: 0; visibility: hidden;} 
.submenu li:hover, .submenu li.active {background: rgba(0,217,186, 0.85);}

.menu-getstarted {position: relative;  background: #d23059; -webkit-linear-gradient(15deg, #d23059 0%,#ff1745 100%); background: linear-gradient(15deg, #d23059 0%,#ff1745 100%); padding: 0 40px; border-radius: 15px;  margin: auto auto auto 14px; overflow: hidden;}
.menu-getstarted, .menu-getstarted:after  {line-height: 30px; height: 30px;  text-transform: uppercase; display: inline-block; letter-spacing: 0.1em;}
.menu-getstarted:after {content:'Get Started'; background: #109eae; background: -webkit-linear-gradient(-175deg,  #109eae 0%,#04dec4 100%); background: linear-gradient(-175deg,  #109eae 0%,#04dec4 100%); position: absolute; top:0; right:0; bottom: 0; left:0;  visibility: hidden; opacity: 0; }

/* State */
.menu li:hover .submenu { opacity: 1; visibility: visible; height: auto;}
.menu li:hover li {opacity: 1; visibility: visible;}
.menu-getstarted:hover:after {opacity: 1; visibility: visible;}

/* ==========================================================================
  Footer
   ========================================================================== */
footer {position: relative;}
.footer ul {padding-left: 40px;}
/*.footer h3:after {content: ''; height: 1px; width: 32px; background: #00d9ba; margin-top: 22px; margin-bottom: 28px; display: block;}*/
.footer-menu {width: 25%; float: left; padding-bottom: 16px;}
.footer-menu a {color: #666666; display: block; font-size: 14px;}
.footer-menu a.active {color: #00D9BA;}
.footer-social {margin: auto; text-align: center; clear: both;}
.footer-social a {width: 44px; height: 44px; line-height: 44px; font-size: 28px; color: #505071; text-align: center; display: inline-block;}
.footer-social a:hover {color: #FFF;}
.footer small {color: #505071; position: absolute; right: 32px; line-height: 50px; bottom: 0; text-align: right; text-transform: none; letter-spacing: 0.1em; font-size: 11px; text-transform: none;}
.footer a:hover {text-decoration: underline;}

/* ==========================================================================
  Get Started
   ========================================================================== */
.section-getstarted { background: #000b20; }
.section-getstarted:before { content: ''; position: fixed; top:0; bottom: 0; left:50%; width: 2px; background: #FFF; margin-left: -1px; }
.section-getstarted .container { max-width: 1172px;}
.section-getstarted h2 {letter-spacing: 0.025em; font-weight: bold; margin-bottom: 36px; }
.section-getstarted ul {margin-bottom: 51px; max-width: 400px;}
.section-getstarted li {line-height: 1.66; list-style-type: none;}
.section-getstarted li:before {content: ''; width: 2px; height: 2px; background: #8d9094; vertical-align: middle; display: inline-block; margin-right: 10px;}
.section-getstarted article {width: 50%; padding: 5% 32px 5% 64px; float: left; color: #FFF;}

.getstarted-products { line-height: 36px; margin-bottom: 42px; font-weight: bold; }
.getstarted-products div { display: inline-block; margin-right: 50px; }
.getstarted-products div:last-of-type {margin-right: 0;}
.getstarted-products img { width: 36px; height: auto; margin-right: 14px; display: inline-block; vertical-align: top; }

/* Signup */
.getstarted-signup p {color: #676773;}
.getstarted-signup p a {text-decoration: underline;}
.getstarted-signup .button {margin-bottom: 20px;}

/* Install */
.getstarted-installation-options {max-width:456px; margin-left: -15px; margin-right: -15px; }
.getstarted-installation-options a {width: 25%; padding: 15px; display: inline-block; filter: gray; filter: grayscale(1); -webkit-filter: grayscale(1); float: left;}
.getstarted-installation-options a:last-of-type {margin-right: 0;}
.getstarted-installation-options a.active {filter: none; -webkit-filter: none;}
.getstarted-installation-options label {margin-bottom: 19px; text-transform: uppercase; display: block; color: #95959a; letter-spacing: 0.15em; padding-left: 15px;}
.getstarted-installation-options label span {color: #ffffff;}
.getstarted-install .button:last-of-type {margin-bottom: 65px;}

/* Close */
.overlay-close {line-height: 70px; position: absolute; top:0; right:0; background: none; width: 70px; height: 70px; text-align: center; color: #FFF; font-size: 18px;}


/* State */
.show-getstarted .section-getstarted  {opacity: 1; visibility: visible;}

/* ==========================================================================
  Get in Touch
   ========================================================================== */
.section-getintouch:target {opacity: 1; visibility: visible;}
.section-getintouch {background: rgba(12,12,33,0.95); }
.section-getintouch .container {max-width: 541px; background: #e1e1e1; width: 100%; left:0; right:0; top:0; bottom: 0; margin: auto; padding: 50px 100px 50px 100px; position: absolute; z-index: 2;}
.section-getintouch .container:after {content: '* all fields are required'; font-size: 13px; color: #676773; line-height: 90px; position: absolute; left:40px; bottom: 0; position: absolute;}
.section-getintouch h2 {margin-bottom: }

.close-getintouch {cursor: none; z-index: 1;}

/* ==========================================================================
  Home
   ========================================================================== */

/* Preloader */
.homepage-preloader {position: fixed; top:0; left:0; right:0; bottom:0; background: #000019; z-index: 3;}
.homepage-preloader svg {width: 342px; height: 387px; position: absolute; top:0; bottom: 0; left:0; right:0; margin: auto; opacity: 0;}
#icon-tyk path {stroke:#00d9ba;}
.video-loaded .homepage-preloader {opacity: 0; visibility: visible; z-index: -1;}

/* Hero Video */
.hero-video {height: 150%; background-color: #000;}
.hero-video:before {display: none;}
.homepage-video-container { height: 66.6666%;   }
.homepage-video-container {position: absolute; top:0; bottom: 0; left:0; right:0;}
.homepage-video-mask, .homepage-video-mask-gradient, .homepage-video-mask-grey { background-size:auto 100%; background-position: center center; z-index: 1; position: absolute; top:0; left:0; bottom: 0; right: 0;}
.homepage-video-mask {-webkit-transform: scale(4); transform: scale(4);}
.homepage-video-mask-gradient {background-image:url('images/homepage/mask.png');     z-index: 0;}
.homepage-video-mask-grey {background-image:url('images/homepage/mask-grey.png'); opacity: 0; z-index: 1;}

.homepage-video-container video {height: 100%; width: auto; margin: auto; position: fixed; z-index:0; left:0; right:0; visibility: hidden;}
.video-loaded .homepage-video-mask {-webkit-transform: scale(2.5); transform: scale(2.5);}
.scroll-active video {visibility: visible;}

/* Hero : Caption */
.homepage-intro {max-width: 640px; left:0; right: 0; margin: auto; text-align: center; z-index: 2; top:33.3333%;}
.homepage-logo {margin: auto auto 60px auto; position: relative; width:318px; height:164px; display: block; }

.homepage-hero-text {padding: 0 20px; overflow: hidden; height: 0; }
.homepage-hero-text h1 {font-weight: bold; margin-bottom: 20px;}
.homepage-hero-text p {margin-bottom: 55px; }
.homepage-hero-text .button {margin: auto;}
.homepage-hero-text-mask {opacity: 0;}
.logo-animated .homepage-hero-text-mask {opacity: 1;}

.homepage-logo {opacity: 0;}
.homepage-logo svg * { fill-opacity: 0; transition: fill-opacity 1s;}
.homepage-logo.finished svg * { fill-opacity: 1; }
.homepage-logo.finished path {fill: #FFF; }
.homepage-logo.finished .homepage-logo-stroked-2 {fill: #52baac; }
.video-loaded .homepage-logo {opacity: 1;}

/* Hero : Scroll Down */
.hero-scroll {width: 36px; height: 60px; border-radius: 18px; border: 2px solid #FFF; position: absolute; bottom:33.33333%; -webkit-transform: translateY(-60px); transform: translateY(-60px); left:0; right:0; margin: auto; background: transparent; opacity: 0; visibility: visible; z-index: 1;}
.hero-scroll:before {content: ''; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #FFF; left:0; right: 0; margin: auto; top:15px; -moz-animation: scroll 3s infinite linear; -o-animation: scroll 3s infinite linear; -webkit-animation: scroll 3s infinite linear; animation: scroll 3s infinite linear;}
.scroll-active .hero-scroll {opacity: 1; visibility: visible;}

/* Hero : Scroll Navigtion */
.scroll-nav {position: fixed; left:26px; margin: auto; width: 30px; z-index: 1;}
.scroll-nav a {width: 30px; height: 30px; display: block; position: relative;} 
.scroll-nav a:after {content: ''; position: absolute; width: 9px; height: 9px; border-radius: 50%; border:2px solid #FFF; top:0; left:0; bottom: 0; right: 0; margin: auto;}
.scroll-nav a.active:after {background: #FFF;}

/* Homepage - CLients */
.page-home .layout-clients {background: #e1e1e1; position: relative; z-index: 1; text-align: center; padding: 0 0 76px 0; }
.page-home .client-logo {-webkit-filter:grayscale(100%); filter:grayscale(100%); margin-top: 0;}
.page-home .client-logo:hover {-webkit-filter:grayscale(0%); filter:grayscale(0%); }
.more-clients {margin: 60px auto auto auto;}

/* Homepage - Products */
.layout-products {background-image:url('images/homepage/products_bg.jpg'); background-position: top left; background-repeat:repeat-x; -webkit-background-size: auto 50%; background-size: auto 50%; height: 400%; position: relative; }
.layout-products:before {content: ''; position: absolute; left:0; right: 0; background-image:url('images/animations/cloud/stars.png'); height: 100%; display: block; top:0; background-repeat: repeat-x; }
.layout-products-line {position: absolute; top:0; left:0; right: 0; margin: auto; width: 3px; height: 0; display: block; overflow: hidden; }

.section-product {height: 25%; position: relative;}
.section-product .container {height: 100%;}

.product-caption {max-width: 580px; z-index: 1;}
.product-caption h1 {padding: 12px 0 6px 0;}
.product-caption h2 {color: #a7a6b4; text-transform: uppercase; letter-spacing: 0.15em;}
.product-caption p:last-of-type {margin-bottom: 52px;}
.product-caption .button:last-of-type {margin-bottom: 0;}

.product-title {margin-bottom: 24px;}
.product-title svg {width: 92px; height: 92px; line-height: 1; font-size: 92px; float: left; margin-right: 24px;}

/* Product : Central Text */
.product-caption.center-text  {max-width: 1054px; width: 100%; border:3px solid #FFF; padding: 96px 0 96px 0; margin: auto; left:0; right:0; color: #FFF;}
.product-caption.center-text .product-text {float: right; padding: 0 30px; width: 50%;}
.product-caption.center-text .product-title {margin: 0;}
.product-caption.center-text h1 {width: 50%; padding: 0 30px 0 80px; float: left; }
.product-caption.center-text p:last-of-type {margin-bottom: 0;}

/* Product : Left */
.product-caption.left {color: #FFF; left:32px;}

/* Product : Right */
.product-caption.right {right:32px;}

/* Product : Right */
.product-caption.center {right:0; left:0; margin: auto; text-align: center;}
.product-caption.center .button {margin: auto;}
.product-caption.center .product-title svg {float: none; margin: 0 0 29px 0;}

/* Product : Intro : Gradient Workaround */
.product-intro .product-caption {background: -webkit-linear-gradient(180deg,  #000018 0%, #031E75 100% ); background: linear-gradient(180deg,  #000018 0%, #031E75 100%);}

/* Product : Tyk - Cloud */
.section-product.cloud {background-image:url('images/homepage/products_clouds.png'); background-size:100% auto; background-repeat: no-repeat; background-position: bottom left;}

/* Product : Tyk - On Premises */
.section-product.on-premise span {position: absolute; top:0; bottom: 0; left:0; right:0; display: block;  background-image:url('images/homepage/products_city.png'); background-size:auto 100%; background-repeat: no-repeat; background-position: top center; -webkit-transform: translateY(20%); transform: translateY(20%); }

/* Product : Tyk - Hybrid */
.section-product.hybrid .product-caption {background: #FFF; z-index: 1;}

/* Homepage : Tyk Enterprise */
#icon-tyk-enterprise circle {-webkit-transform-origin: center; transform-origin: center; -moz-animation: spin 20s infinite linear; -o-animation: spin 20s infinite linear; -webkit-animation: spin 20s infinite linear; animation: spin 20s infinite linear;}
#icon-tyk-enterprise circle.cls-2 {-moz-animation-duration: 15s; -o-animation-duration: 15s; -webkit-animation-duration: 15s; animation-duration: 15s; }
#icon-tyk-enterprise circle.cls-3 {-moz-animation-duration: 10s; -o-animation-duration: 10s; -webkit-animation-duration: 10s; animation-duration: 10s; }

.scroll-active #icon-tyk-enterprise circle {-moz-animation-play-state: running; -o-animation-play-state: running; -webkit-animation-play-state: running; animation-play-state: running;}

/* ==========================================================================
  Case Studies
   ========================================================================== */
.page-case-studies {background: #e1e1e1;}
.page-case-studies .listing {margin-top: -245px;}

.page-case-studies .hero {background: #151a1e; border-bottom: 240px solid #151a1e;}

.case-study-listing {padding-bottom: 55px;}

.case-study {box-shadow: 0px 5px 6px 0px rgba(0, 0, 0, 0.15); position: relative; padding: 40px 40px 112px 40px;}
.case-study blockquote {margin-bottom: 32px;}
.case-study .button {position: absolute; bottom: 40px; left:40px; right:40px; width: auto;}

.case-study-logo {padding-top: 68%; display: block; position: relative;}
.case-study-logo img { max-height: 80px; width: auto; left:0; right:0; margin: auto;}

.listing {margin: 0 -5px;}
.listing article { width: calc(25% - 10px); display: inline-block; float: left; background: #FFF;  margin: 5px;}

.share-print {line-height: 45px; margin-top: 30px; letter-spacing: 0.15em;}
.share-print a {display: block; color: #2f3f9e; }
.share-print a:before {padding-right: 20px;}


/* ==========================================================================
  Case Study
   ========================================================================== */
.section-case-study {padding-top: 130px;}

.case-study-content {padding: 0 32px 100px 0;}
.case-study-content .layout {padding: 0 0 65px 70px; margin-bottom: 65px; border-bottom: 1px solid #e4e4e4; position: relative;}
.case-study-content .layout:last-of-type {border-bottom: 0; padding-bottom: 0;}

.layout-quote blockquote:before, .layout-casestudy-metrics h2:before, .layout-text h2:before {position: absolute; top:-10px; left:0; }
.layout-quote blockquote:before {  width: 42px; padding: 0; font-size: 32px; height: auto; line-height: 36px; }
.layout-casestudy-metrics h2:before, .layout-text h2:before {  width: 42px; height: 42px; font-size: 42px; line-height: 42px; }
.layout-casestudy-metrics h2, .layout-casestudy-metrics ul  {display: inline-block; vertical-align: top; margin-right: 32px;}
.layout-casestudy-metrics li {list-style-position: inside;}

.case-study-content .layout-gallery {padding-top: 0; margin-top: -130px; background: #FFF;}
.case-study-content .layout-gallery a {display: inline-block; float: left; margin: 0 10px 10px 0;}


/* ==========================================================================
  Page Layout
   ========================================================================== */
/*.hasSidebar aside {width: 30%; min-width: 30%; padding-left: 60px; padding-bottom: 60px; float: left; display: inline-block; min-height: 1px;}*/
/*.hasSidebar .container:before { content: ''; position: fixed; top: -113px; bottom: -113px; left: 0%; width: 31.2%; z-index: -1; background: #e1e1e1;}*/
.hasSidebar .page-content {float: left;}
 
.wysiwyg h2 {font-size: 26px; color: #666666; font-weight: 300; padding-bottom: 9px; margin: 40px 0 20px; border-bottom: 1px solid #eee;}
.wysiwyg h3 {font-size: 18px; font-weight: bold; margin-bottom: 26px; margin-top: 55px;}
.wysiwyg h3:first-of-type {margin-top: 0;}
.wysiwyg p, .wysiwyg ul, .wysiwyg ol, .wysiwyg table {font-family: 'Segoe UI', sans-serif!important;}
.wysiwyg p {margin-bottom: 32px;}
.wysiwyg ul {margin-bottom: 32px;}
.wysiwyg li {list-style-position: inside; margin-bottom: 10px;}
.wysiwyg hr {border: 0; border-bottom: 2px solid #E4E4E4; outline: none; margin-top: 52px;}
.wysiwyg blockquote {padding: 20px 0 20px 70px; position: relative;}
.wysiwyg blockquote:before {position: absolute; left: 0; font-size: 32px;}
.wysiwyg pre {background: #dfdfed; padding: 36px; margin-bottom: 36px; overflow: scroll; -webkit-overflow-scrolling: touch; font-family: inherit;}
.wysiwyg pre code {background: none; padding: 0; border-radius: 0;}
.wysiwyg code {background: #e1e1e1; padding: 0 8px; border-radius: 2px;}
.wysiwyg table {width: 100%; text-align: left; margin-bottom: 32px; border-collapse: collapse;}
.wysiwyg table thead th {background: #000018; color: #FFF; padding: 12px 18px;}
.wysiwyg table thead th {border-right:2px solid #FFF;}
.wysiwyg table thead th:last-of-type {border-right:2px solid #FFF;}
.wysiwyg table tbody td {padding: 12px 18px; border-right: 2px solid #efefef;}
.wysiwyg table tbody tr td:first-of-type {border-left: 2px solid #efefef;}
.wysiwyg table tbody tr { border-bottom: 2px solid #efefef; }
.aside-submenu {padding-top: 10px;}

.aside-submenu-item { font-weight: bold; margin-bottom: 24px; list-style-type: none;}
.aside-submenu-item:before {content: ''; width: 9px; height: 9px; vertical-align: middle; background: #000; border-radius: 50%; margin: auto 18px auto 0; display: inline-block; }
.aside-submenu-item.active {color: #2f3f9e;}
.aside-submenu-item.active:before {background: #2f3f9e;}

.aside-subsection {color: #000; display: block; padding-left: 66px; position: relative; text-transform:capitalize; margin-bottom: 24px;}
.aside-subsection:before {content: ''; width: 22px; height: 1px; background: #000; margin: auto 16px auto 30px; display: inline-block; vertical-align: middle; position: absolute; left:0; top:11px;} 
.aside-submenu-item a:nth-child(2) {margin-top: 14px;}
.aside-subsection.active {color: #2f3f9e;}
.aside-subsection.active:before {background: #2f3f9e;}

/* Page : Sidebar */
.page-aside {padding: 0 32px 100px 0;}
.page-aside h1 {margin-bottom: 10px;}
.page-aside h2 {margin-bottom: 45px;}
.page-aside img {max-height: 80px; margin: 0 0 60px 0;}

/* ==========================================================================
  Blog : Listing
   ========================================================================== */
.page-blog {background: #e1e1e1;}

/* Listing */
.section-blog-listing {padding: 60px 0 80px 0;}
.section-blog-listing .container:before {background-color: #1a1f24;}
.section-blog-listing .blog-sidebar {padding-top: 84px;}
.section-blog-listing .blog-listing {padding-left: 0;}
.section-blog-listing .blog-post {background: #ffffff; padding: 20px 48px 48px 48px; margin: 10px 0px 0px 10px; width: 100%; box-shadow: 0px 5px 6px 0px rgba(0, 0, 0, 0.15);}

/* Post */
.blog-post img {float: left; margin-right: 32px;}
.blog-post h1 {margin-bottom: 40px;}
.blog-post .read-more {display: none;}
.blog-post .button {margin-bottom: 0;}
.blog-post p {margin-bottom: 28px;}

/* Mobile Crop */
.blog-article-image-mobile-container {display: none;}

/* Pagination */
.pagination {text-align: center; padding: 40px 0 0 0; display: block; clear: both;}
.pagination a, .pagination span {width: 49px; height: 49px; border-radius: 50%; border: 2px solid #676772; color: #676772; line-height: 47px; text-align: center; margin: 0 5px; display: inline-block;}
.pagination span {color: #2f3f9f; border-color:#2f3f9f;}

/* ==========================================================================
  Blog : Article
   ========================================================================== */
.section-blog-article {padding: 92px 0 0 0;}
.section-blog-article .container:before {background: #1a1f24;}
.section-blog-article .blog-sidebar {padding-top: 51px;}

/* Meta */
.blog-meta {line-height: 30px; border-bottom: 1px solid #CCC; color: #95959a; margin-bottom: 40px; }
.blog-meta > a, .blog-meta time, .blog-meta div {display: inline-block; margin-right: 50px;}
.blog-meta > a:before, .blog-meta time:before, .blog-meta div:before {margin-right: 10px;}

/* Content */
.blog-article-content h1 {margin-bottom: 40px;}
.blog-article-content h2 {margin: 25px 0;}
.blog-article-image {margin-bottom: 40px;}

/* Author */
.blog-author-footer { margin-top:110px; margin-left: -55px; margin-right: -32px; padding: 45px 55px; background: #e1e1e1; color: #5a5a68; }
.blog-author-footer img { float: left; margin-right: 32px; border-radius: 50%; }

/* Sidebar */
.blog-sidebar {color: #FFF;}
.blog-sidebar h1 {margin-bottom: 50px; line-height: 74px;}
.blog-sidebar h1:before {width: 75px; height: 75px; font-size: 75px; margin-right: 34px; float: left;}

/* Calendar */
.blog-sidebar-calendar {width: 100%; padding: 32px 24px 24px 24px; border:1px solid #676773; color: #676773; }
.blog-sidebar-calendar table {width: 100%; text-align: center; position: relative;}
.blog-sidebar-calendar td {font-size: 12px; width: 36px; line-height: 36px;}
.blog-sidebar-calendar tbody a {border: 1px solid #00d9ba; width: 32px; height: 32px; line-height: 30px; display: inline-block; color: #00d9ba; border-radius: 50%; } 
.blog-sidebar-calendar tbody a:hover {border-color: #ff1745; color: #ff1745;}
.blog-sidebar-calendar th { color: #a4a4a8; font-size: 10px; font-weight: normal; }
.blog-sidebar-calendar caption {font-size: 14px; color: #a4a4a8; font-weight: bold; font-family: 'Segoe UI'; text-align: left; letter-spacing: 0.175em; text-transform: uppercase; line-height: 16px; margin-bottom: 10px; margin-left: 14px;}
.blog-sidebar-calendar tfoot .pad {display: none;}
.blog-sidebar-calendar tfoot a {position: absolute; right: 0; top:-10px; font-family: 'tyk'; font-size: 0; width: 32px; height: 32px; line-height: 32px; }
.blog-sidebar-calendar tfoot a:before {font-size: 22px;}
.blog-sidebar-calendar #prev a {right: 32px;}
.blog-sidebar-calendar #prev a:before { content: '\e801'; }
.blog-sidebar-calendar #next a:before { content: '\e802'; }

/* Tag Cloud */
.blog-tagcloud {text-transform: uppercase; margin-bottom: 50px; letter-spacing: 0.175em; color: #676773; }
.blog-tagcloud span {padding: 0 10px; }
.blog-tagcloud a {display: inline-block;}
.blog-tagcloud .small {color: #d1d1d4;}
.blog-tagcloud .medium {color: #ffffff;}
.blog-tagcloud .large {color: #00d9ba;}

/* Search */
.search {line-height: 48px; max-width: 400px; position: relative; left: -100px; color: #676773; margin-bottom: -54px; margin-top: -40px;}
.search input {height: 48px; border:1px solid #676773; text-align: center; letter-spacing: 0.15em;}
.search button {height: 48px; width: 48px; font-size: 18px; position: absolute; top:0; left: 0; }
.search button, .search input { background: transparent;  color: #04A118;} 
.search input:placeholder-shown:valid { border-color: #04A118; }
.search input::-webkit-input-placeholder {color: #676773;}
.search input:-moz-placeholder {color: #676773;}
.search input::-moz-placeholder {color: #676773;}
.search input:-ms-input-placeholder {color: #676773;}
.search input::placeholder {color: #fff;}
	
/* Mobile */
.blog-mobile-header {display: none;}
.close-sidebar {display: none;}

/* ==========================================================================
  Page : Pricing
   ========================================================================== */
.page-careers .hero {background: #f0f0f0;  color: #000018; background-image:url('images/heros/careers.jpg'); background-position: center center; background-size:auto 100%;}
.page-careers .hero-caption {left:0; right: 0; margin: auto; text-align: center; max-width: 390px;}


/* ==========================================================================
  Page : Contact
   ========================================================================== */
.page-contact {background: #E1E1E1;}
.page-contact .hero .container { bottom: 286px;}
.page-contact .hero h1 {margin-bottom: 22px;}
.page-contact .layout-form {background: none; color: #000018;}

.locations-listing {margin-top: -286px;}
.locations-listing .block {width: 50%; padding: 5px; float: left; }
.location {background: #FFF; padding: 10px; position: relative;}
.location h2 {color: #5a5a68; text-transform: uppercase; margin-bottom: 32px; letter-spacing: 0.05em; font-weight: bold;}
.location h2:before {content: ''; width: 26px; height: 14px; display: inline-block; margin-right: 12px;  vertical-align: middle;}
.location.london h2:before {background-image:url('images/contact/contact-london.png');}
.location.singapore h2:before {background-image:url('images/contact/contact-singapore.png');}
.location-address {width: 50%; float: right; padding-left: 10px; }
.location-image { position: absolute; top:10px; bottom: 10px; left:10px; right: 50%;}
.location-map {height: 226px;}
.location-address address {padding: 32px 0 0 32px;}

/* ==========================================================================
  Page : Team
   ========================================================================== */
.page-team .hero {color: #000018;}

/* ==========================================================================
  Page : About / Company
   ========================================================================== */
.page-about .hero-caption {max-width: 250px; color: #000018;}
.page-about .layout-flipflop {background: #e1e1e1;}
.page-about #flipflop-1 h2:after {content: 'Pronunciation: /tAIk/';  padding-left: 14px; font-size:14px; font-family: 'Roboto', sans-serif; font-weight: normal;}

/* ==========================================================================
  Pricing
   ========================================================================== */
.pricing-page-bg {padding-bottom: 380px; position: relative;}
.pricing-page-bg .container {padding: 0;}
.pricing-page-bg:before { content: ''; position: absolute; display: block; background-position: bottom center; background-repeat: no-repeat; z-index: 0; bottom: -1px; left:0; right: 0; top:0;}

.section-pricing {padding-top: 220px; position: relative; background: #e8e8e8;}
.section-pricing img {position: absolute; top:-38px; left: 135px; }
.section-pricing:before, .section-pricing:after, .pricing-intro.has-bullet:before  { content: ''; display: block; position: absolute; left:182px; }
.section-pricing:before { top:272px; bottom: 50px; width: 4px; background: #000018;  margin-left: -2px;}
.section-pricing:after {width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; border:4px solid #000018; bottom: 50px; background: #e8e8e8; }
.pricing-intro {padding: 0 0 140px 290px; position: relative; }
.pricing-intro li {list-style-position: inside;}
.pricing-intro h1, .pricing-intro h2 {margin-bottom: 30px;}
.pricing-intro p {max-width: 540px; margin-bottom: 38px;}
.pricing-intro .button {margin-right: 20px;}
.pricing-intro:before {width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; border:4px solid #000018; background: #e8e8e8; top: 10px;}

/* Pricing Table */
.pricing-tables {padding: 32px; background: #e8e8e8; position: relative; z-index: 1; }
.pricing-tables-container {margin-left: -5px; margin-right: -5px;}
.pricing-table {float: left; padding: 5px; width: 25%;}
.pricing-table h4 {margin-bottom: 23px;}
.pricing-table h5 {margin-bottom: 23px; margin-top: -23px;}
.pricing-table h3 {margin: 20px 0 22px 0;}
.pricing-bg {background: #FFF; padding: 32px 48px; position: relative; box-shadow: 0px 5px 6px 0px rgba(0, 0, 0, 0.15);}
.pricing-bg:before {content: ''; height: 10px; position: absolute; left:0; right: 0; top:0;}
.pricing-table-intro {border-bottom: 1px solid #e4e4e4; margin: 0 -32px 32px -32px; padding: 0 32px 40px 32px; }
.pricing-table-intro p {margin-bottom: 0;}
.pricing-table-graphic { width: 80%; padding-top: 80%; text-align: center; line-height: 100%; display: block; border-radius: 50%; position: relative; margin: 24px auto;}
.pricing-table-graphic span {position: absolute; top:0; bottom: 0; left:0; right:0; height: 60px; line-height: 60px; display: block; margin: auto; font-weight: bold;}
.pricing-table-graphic:before, .pricing-table-graphic:after {position: absolute; left:0; right: 0; }
.pricing-table-graphic:before {content: ''; margin: 3px; background: #FFF; border-radius: 50%; top:0; bottom: 0;}

/* Pricing Table : Free */
.pricing-table.free h3 {color: #008695;}
.free .pricing-bg:before {background-color: #0dacb3;}
.free .pricing-table-graphic {  background: -webkit-linear-gradient(0deg,  #109eae 0%, #04dec4 100% ); background: linear-gradient(0deg,  #109eae 0%, #04dec4 100%);}
.free .pricing-table-graphic span { color: #008594; }


/* Pricing Table : Professional */
.professional.pricing-table {width: 50%;}
.professional.pricing-table h3 {color: #b91b43;}
.professional.pricing-bg:before {background-color: #d82d56;}
.professional .pricing-table-block {width: 50%; float:left;}
.professional .pricing-table-block.first {padding-right: 32px; border-right:1px solid #e3e3e3;}
.professional .pricing-table-block.last {padding-left: 32px;}
.professional .pricing-table-graphic {  background: -webkit-linear-gradient(0deg,  #d23059 0%, #ff1745 100% ); background: linear-gradient(0deg,  #d23059 0%, #ff1745 100%);}
.professional .pricing-table-graphic span {color: #b91b43; line-height: normal;}
.professional .pricing-table-graphic span:after {content: 'per annum'; font-size: 18px; display: block; margin-top: -4px;}

.pricing-table-container { margin-left: -22px; margin-right: -22px;}
.pricing-table table {width: 100%; padding: 0; margin-bottom: 50px; border-collapse: collapse;}
.pricing-table td { border-bottom: 1px solid #e4e4e4; padding-left: 22px; line-height: 62px; vertical-align: top;}
.pricing-table td:after {font-size: 13px; text-transform: uppercase; padding-left: 8px; letter-spacing: 0.1em;}
.pricing-table td.price {color: #b91b43;}
.pricing-table td.price:after {content: 'per month';}
.pricing-table td.limit { border-right: 1px solid #e4e4e4;}
.pricing-table td.limit:after {content: 'api calls per day';}
.pricing-table .button {margin-bottom: 0;}

/* Pricing Table : Enterprise */
.enterprise .pricing-table-graphic {background-image:url('images/pricing/icon-enterprise.png'); background-size:100% auto;}
.enterprise.pricing-bg {background: -webkit-linear-gradient(0deg,  #00d9ba 8%, #2f3f9e 29%, #000018 90%); background: linear-gradient(0deg,  #00d9ba 8%, #2f3f9e 29%, #000018 90%); background-size:150% auto; background-position: center center;}
.enterprise.pricing-bg:before {background-color: #2f3f9e;}
.enterprise.pricing-table {color: #ffffff;}
.enterprise.pricing-table .button {text-transform: uppercase;}
.enterprise.pricing-table .button.white {color:#2f3f9e;}
.enterprise .pricing-table-graphic:before {display: none;}

/* FAQ's */
.section-faqs {padding: 0 0 100px 0;}
.section-faqs h2 {margin-bottom: 45px;}

.pricing-faq {margin-bottom: 43px; height: 27px; overflow: hidden;}
.pricing-faq h3 {cursor: pointer;}
.pricing-faq-answer {padding: 45px 0 57px 134px; border-bottom: 1px solid #e4e4e4; position: relative; color: #6e6e76; }
.pricing-faq-answer:before, .pricing-faq-answer:after {width: 68px; height: 68px; position: absolute; left:30px; top:40px; line-height: 68px;}
.pricing-faq-answer:before {font-size: 32px; color: #000000;}
.pricing-faq-answer:after {content: ''; border-radius: 50%; border: 3px solid #00d9ba;}

/* Pricing : Tyk Cloud */
.page-pricing.page-cloud .pricing-page-bg {background: -webkit-linear-gradient(110deg,  #e1f3ff 0%, #68c0e3 47%, #056aa9 74%, #0549a7 100% ); background: linear-gradient(110deg,  #e1f3ff 0%, #68c0e3 47%, #056aa9 74%, #0549a7 100%); }
.page-pricing.page-cloud .pricing-page-bg:before { background-image:url('images/animations/cloud/clouds.png');}

/* Pricing : Tyk Hybrid */
.page-pricing.page-hybrid .pricing-page-bg {background: -webkit-linear-gradient(-205deg,  #0569a9 18%, #04dec4 51%, #f6f6e9 81%); background: linear-gradient(-205deg,  #0569a9 18%, #04dec4 51%, #f6f6e9 81%); }
.page-pricing.page-hybrid .pricing-page-bg:before { background-image:url('images/animations/cloud/clouds.png');}


/* Pricing : On Premise */
.page-pricing.page-on-premise .pricing-page-bg {background: -webkit-linear-gradient(205deg,  #2c3569 11%, #ff6c7d 45%, #f3efc3 79%); background: linear-gradient(205deg,  #2c3569 11%, #ff6c7d 45%, #f3efc3 79%); }
.page-pricing.page-on-premise .pricing-page-bg:before { background-image:url('images/pricing/clouds-alt.png');}

/* ==========================================================================
  Pricing : Comparison
   ========================================================================== */
.page-pricing-comparison {background: #e1e1e1;}
.page-pricing-comparison .hero { background: #273487; border-bottom: 240px solid #273487; }
.pricing-page-bg-comparison {padding-bottom: 0;}

.pricing-comparison { background: #e1e1e1; padding: 0 20px 20px 20px;  margin-top: -240px;}
.pricing-comparison .pricing-bg {margin-bottom: 10px; }
.pricing-comparison .pricing-bg:before { content:''; width: 10px; height: 100%; display: block; top:0; left:0; bottom: 0; position: absolute; }
.pricing-comparison h2 {text-align: center; padding: 38px 0 32px 0;}
.pricing-comparison h2:before {margin-right: 16px;}
.pricing-comparison .button {margin-bottom: 0; text-transform: uppercase;}

.pricing-comparison-column {width: 33.33333%; float: left; padding: 10px; }
.pricing-comparison-column h3 {float: left; width: 33.3333%; padding: 19px 0; max-width: 74px;}
.pricing-comparison-column.wide {width: 100%; float: none; clear: both;}
.pricing-comparison-column.double {width: 66.666%;}

.pricing-comparison-label {text-align: center; text-transform: uppercase; color: #5a5a68; font-size: 14px; letter-spacing: 0.15em; line-height: 76px; padding: 0; position: relative; z-index: 0; margin-bottom: -10px;}
.pricing-comparison-label div {margin: 0 48px; position: relative;}
.pricing-comparison-label span {background:#e1e1e1; position: relative; z-index: 2; padding: 0 12px; }
.pricing-comparison-label:before, .pricing-comparison-label div:before, .pricing-comparison-label div:after {content: ''; position: absolute; margin: auto; top:0; bottom: 0;}
.pricing-comparison-label:before {left:48px; right: 48px; height: 2px; background: #676774;  z-index: -1;}
.pricing-comparison-label div:before, .pricing-comparison-label div:after {width: 9px; height: 9px; border: 2px solid #676774; border-radius: 50%; background: #e1e1e1;}
.pricing-comparison-label div:before {left:0;}
.pricing-comparison-label div:after {right: 0;}

.pricing-comparison .pricing-comparison-intro:before { content:''; height: 10px; width: 100%; display: block; top:0; left:0; right:0; bottom:auto; position: absolute; }
.pricing-comparison-intro ul { line-height: 42px; margin-bottom: 32px; }
.pricing-comparison-intro li { list-style-position: inside; }

/* On Premise */
.pricing-comparison-onpremises .pricing-comparison-intro:before { background: -webkit-linear-gradient(-90deg,  #2c3569 0%, #ff6c7d 33%, #f3efc3 66%, #fffeef 100%); background: linear-gradient(-90deg,  #2c3569 0%, #ff6c7d 33%, #f3efc3 66%, #fffeef 100%); }

/* Cloud */
.pricing-comparison-cloud .pricing-comparison-intro:before { background: -webkit-linear-gradient(-90deg,  #e1f3ff 33%, #68c0e3 66%); background: linear-gradient(-90deg,  #e1f3ff 33%, #68c0e3 66%); }

/* Hybrid */
.pricing-comparison-hybrid .pricing-comparison-intro:before { background: -webkit-linear-gradient(-90deg,  #0569a9 0%, #04dec4 33%, #f6f6e9 66%); background: linear-gradient(-90deg,  #0569a9 0%, #04dec4 33%, #f6f6e9 66%); }

/* Free */
.pricing-comparison-free:before { background: -webkit-linear-gradient(-180deg,  #109eae 0%, #04dec4 100%); background: linear-gradient(-180deg,  #109eae 0%, #04dec4 100%);}
.pricing-comparison-free div {float:left; width: 66.6666%; border-left: 2px solid #eaeaea; padding: 19px 26px; margin-bottom: 26px;}
.pricing-comparison-free div p {margin-bottom: 0;}

/* Pro */
.pricing-comparison .pricing-comparison-pro { clear: both; overflow: auto;}
.pricing-comparison-pro:before { background: -webkit-linear-gradient(-180deg,  #d23059 0%, #ff1745 100%); background: linear-gradient(-180deg,  #d23059 0%, #ff1745 100%);}
.pricing-comparison-cloud .pricing-comparison-pro .limit:after {content: ' API Calls per day';}
.pricing-comparison table {float:left; width: 66.6666%; margin-bottom: 26px; border-collapse: collapse;}
.pricing-comparison td {border-left: 2px solid #eaeaea; padding: 0 0 0 20px;}
.pricing-comparison tr:first-child td {padding-top: 19px;}

/* Enterprise */
.pricing-comparison-enterprise:before { background: -webkit-linear-gradient(-180deg,  #00d9ba 0%, #052d96 40%, #000011 100%); background: linear-gradient(-180deg,  #00d9ba 0%, #052d96 40%, #000011 100%);}
.pricing-comparison-enterprise h3 {max-width: 180px; }
.pricing-comparison-enterprise div {float: left; padding: 19px 0;}
.pricing-comparison-enterprise {margin-top: -20px;}

/* Free - Span's 2 columns */
.pricing-comparison-free.wide {width: calc(200% + 20px);}
.pricing-comparison-hybrid .pricing-comparison-free  {visibility: hidden;  margin-left: calc(-100% + -10px);}

/* Pro - Span's 2 columns */
.pricing-comparison-pro.wide {width: calc(200% + 20px);}
.pricing-comparison-hybrid .pricing-comparison-pro.wide  {visibility: hidden; margin-left: calc(-100% + -10px);}





/* ==========================================================================
  Layout : Hero
   ========================================================================== */
.hero {position: relative; color: #FFF; min-height: 640px; overflow: hidden;}
.hero:before {content: ''; padding-top: 25%; display: block; width: 100px;}
.hero .container {position: absolute; left:0; right: 0; top:0; bottom: 0; z-index: 1;}
.hero .button {max-width: 338px; display: block; text-align: center;}
.hero .button:first-of-type {margin-top: 40px;}
.hero.has-background {background-size: auto 100%; background-position: center center;}

.hero-caption {max-width: 460px; z-index: 1; padding-top: 130px;}
.hero-caption img, .hero-caption svg { width: 85px; height: 85px; margin-right: 20px; margin-bottom: 16px; float: left; }
.hero-caption h1 { margin: 0; line-height: 1.16666666666667;}
.hero-caption h1.has-icon {line-height: 85px;}
.hero-caption h1, .hero-caption h2 {font-weight: bold;}
.hero-caption h2 {color: #a7a6b4; text-transform: uppercase; letter-spacing: 0.15em; margin-top: -14px; margin-bottom: 14px; }
.hero-caption p {clear: both;}
.hero-caption *:last-child {margin-bottom: 0;}
.hero-animation {position: absolute; width: 100%; left:0; top:0;  height: 640px;  z-index: 0;}
.hero-animation span {position: absolute; -webkit-background-size: 100% auto; -moz-background-size: 100% auto; -o-background-size: 100% auto; background-size: 100% auto; background-position: center center; background-repeat: no-repeat; display: block; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); top: 0; left: 0; right: 0; bottom: 0;}

/* Case Study Style */
.hero-sidebyside {padding-top: 130px; }
.hero-sidebyside .hero-text {width: 50%; right:32px;}
.hero-sidebyside h1 {left:32px; line-height: 70px; font-weight: bold; width: 50%; }
.hero-sidebyside p:last-of-type {margin-bottom: 0;}
.hero-sidebyside img {width: 70px; height: auto; float: left; margin-right: 12px;}

/* Centered */
.hero.centered .hero-caption {max-width: 400px; width: 100%; left:0; right:0; text-align: center; margin: auto; top:50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); position: absolute; padding-top: 0; }
.hero.centered h1 {margin-bottom: 38px;}

/* Mobile Image */
.hero-mobile-image {display: none;}

/* Product Hero */
.hero-product img {margin-bottom: 38px;}
.hero-product h1 { white-space: nowrap;}

/* ==========================================================================
  Layout : Text
   ========================================================================== */
.layout-text {padding: 60px 0;}

/* ==========================================================================
  Layout : Flipflop
   ========================================================================== */
.layout-flipflop { display: block; position: relative; max-height: 576px; background: #FFF;}
.layout-flipflop .container:before {content: ''; padding-top: 36.4%; width: 100%; display: block;}
.layout-flipflop article, .layout-flipflop figure {width: 50%; height: 100%; position: absolute; top:0;}
.layout-flipflop figure {background-color: #c6e2ed;}
.layout-flipflop .flipflop-caption {padding: 60px; max-width: 608px;}
.layout-flipflop h2 {margin-bottom: 35px;}
.layout-flipflop .button {margin-bottom: 0;}
.flipflop-mobile-image {display: none;}

.layout-flipflop figure {overflow: hidden;}
.layout-flipflop img {position: absolute; top:0;}
.layout-flipflop hr {border:0; border-top: 1px solid #909098; max-width: 245px; margin-bottom: 20px; }

.layout-flipflop.left article {left:50%; }
.layout-flipflop.left figure { background-position: right center;}
.layout-flipflop.left .flipflop-caption {padding-right: 32px;}
.layout-flipflop.left img {right: 0;}

.layout-flipflop.right figure {left:50%; background-position: left center;}
.layout-flipflop.right .flipflop-caption {padding-left: 0; right: 0; left: 0;}
.layout-flipflop.right img {left: 0;}


/* ==========================================================================
  Layout : Button
   ========================================================================== */
.layout-button {text-align: center; padding: 0 0 120px 0; background: #e1e1e1;}
.layout-button .button {max-width: 406px; margin-bottom: 0;}

/* ==========================================================================
  Layout : Features
   ========================================================================== */
.layout-features {padding-top: 100px; background: #e1e1e1;}
.layout-features article {padding: 0 60px 82px 70px; float: left; width: 50%; position: relative;}
.layout-features h2 {margin-bottom: 12px;}
.layout-features h2:before { width: 42px; height: 49px; font-size: 49px; line-height: 1; position: absolute; top:-14px; left:0;}
.layout-features br {clear: both;}

.feature-products {position: absolute; top:-4px; right:60px; font-size: 0;}
.feature-products .button {margin-left: 10px;}

/* ==========================================================================
  Layout : Footer
   ========================================================================== */
.layout-footer {position: relative; z-index:0; }
.layout-footer, .layout-footer .container {min-height: 580px; }
.layout-footer .left, .layout-footer .right {z-index: 2;}
.layout-footer .left { left: 32px; max-width: 380px;}
.layout-footer .right { right: 32px; max-width: 350px;}
.layout-footer .right p {opacity: 0.78;}
.layout-footer li {list-style-position: inside; list-style-type: disc;}
.layout-footer h2 {margin: -24px 0 40px 0;}
.layout-footer .button:last-of-type {margin-bottom: 38px;}
.layout-footer p a {text-decoration: underline;}
.layout-footer:before, .layout-footer:after {content: ''; position: absolute; top:0; bottom: 0; left:0; right: 0; display: block;}
.layout-footer:before {z-index: 0; background-size: 100% auto; background-repeat: no-repeat; background-position: top left;}
.layout-footer:after {z-index: 1; background-size: auto 100%; background-repeat: no-repeat; background-position: center center;} 

/* ==========================================================================
  Layout : Form
   ========================================================================== */
.layout-form {padding: 175px 0 116px 0; background-image:url('images/layouts/contact.jpg'); color: #FFF; }
.layout-form article {width: 35%; float: left; }
.layout-form form {width: 65%; float: left; position:relative; }
.layout-form li {width: 44%; float: left; margin-right: 56%;}
.layout-form li#field_2_4 {position: absolute; right: 0; width:56%; margin: 0; padding-left: 20px; }
.layout-form input {height: 48px; line-height: 48px;}
.layout-form textarea {padding-top: 12px; padding-bottom:12px; height: 222px;}
.layout-form .gform_body {margin: 0;}
.layout-form .gform_footer {clear: both; text-align: right; padding-top: 12px; }
.layout-form p {max-width: 340px; width: 100%; }
.layout-form h2 {margin-bottom: 17px;}

/* ==========================================================================
  Layout : Careers
   ========================================================================== */
.layout-careers {padding: 100px 0 60px 0; background: #e1e1e1;}
.career {padding: 60px 0; border-bottom: 1px solid #b2b2b6;}
.career:last-of-type {border-bottom: 0;}
.career .button {margin-top: 40px; margin-bottom: 0;}
.careers-subtitle {color: #505071; letter-spacing: 0.15em;}

/* ==========================================================================
  Layout : Clients
   ========================================================================== */
.layout-clients {background: #FFF; padding: 100px 0;}
.layout-clients p {max-width: 380px;}
.layout-clients h2 {margin-bottom: 22px;}
.client-logo { max-width: 100%; padding-right: 35px; padding-left: 35px; margin-top: 70px; float: left; width: 16.66666666666667%;}

/* ==========================================================================
  Layout : Metrics
   ========================================================================== */
.layout-metrics {padding: 170px 0; text-align: center; background: url('images/animations/cloud/stars.png'), -webkit-linear-gradient(60deg, #109eae 0%,#04dec4 100%); background: url('images/animations/cloud/stars.png'), linear-gradient(60deg, #109eae 0%,#04dec4 100%); color: #FFF; background-position: top left; background-size: cover;}
.layout-metrics .container {max-width: 80%; width: 100%;}
.metric { width: 25%; float: left; padding-top: 25%; position: relative;}
.metric:before {position: absolute; top:20px; left:20px; right: 20px; bottom: 20px; border:2px solid #FFF; border-radius: 50%; content: '';}
.metric .v-center {left: 0; right: 0;}
.metric label, .metric h3 {font-weight: bold;}
.metric label {text-transform: uppercase; letter-spacing: 0.15em;}

/* ==========================================================================
  Product : Enterprise
   ========================================================================== */
/* Hero */
.tyk-enterprise.hero {background: #00d9ba; background: -webkit-linear-gradient(55deg, #00d9ba 0%,#2f3f9e 37%,#000018 100%); background: linear-gradient(55deg, #00d9ba 0%,#2f3f9e 37%,#000018 100%);}

/* Animation */
.tyk-enterprise-animation  {bottom: -320px; left: 66.66666%; width: 640px;-webkit-transform: translateX(-50%); transform: translateX(-50%); top:auto;}
.tyk-enterprise-animation span {right: auto; bottom: auto;}
.tyk-enterprise-animation .layer1 {width: 1400px; height: 1400px; left:-380px; top:-380px; background-image: url('images/animations/enterprise/stars.png');  }
.tyk-enterprise-animation .layer2  {width: 907px; height: 907px; left:-133.5px; top:-133.5px; background-image: url('images/animations/enterprise/clouds.png');  }
.tyk-enterprise-animation .layer3 {width: 1056px; height: 1056px; left:-208px; top:-208px; background-image: url('images/animations/enterprise/clouds-2.png');  }
.tyk-enterprise-animation .layer4  {width: 900px; height: 900px; left:-130px; top:-130px; background-image: url('images/animations/enterprise/city.png');}

.tyk-enterprise-animation .layer1 {
  -moz-animation: spin 200s infinite linear;
  -o-animation: spin 200s infinite linear;
  -webkit-animation: spin 200s infinite linear;
  animation: spin 200s infinite linear;
}

.tyk-enterprise-animation .layer2 {
  -moz-animation: spin 120s infinite linear reverse;
  -o-animation: spin 120s infinite linear reverse;
  -webkit-animation: spin 120s infinite linear reverse;
  animation: spin 120s infinite linear reverse;
}

.tyk-enterprise-animation .layer3 {
  -moz-animation: spin 150s infinite linear;
  -o-animation: spin 150s infinite linear;
  -webkit-animation: spin 150s infinite linear;
  animation: spin 150s infinite linear;
}

/* ==========================================================================
  Product : Cloud
   ========================================================================== */

/* Hero */
.tyk-cloud.hero {background: #e1f3ff; background: -webkit-linear-gradient(70deg,  #e1f3ff 0%,#68c0e3 47%,#056aa9 74%,#0549a7 100%); background: linear-gradient(70deg,  #e1f3ff 0%,#68c0e3 47%,#056aa9 74%,#0549a7 100%); color: #000018; }
.tyk-cloud.hero h2 {color: #505071;}

/* Animation */
.tyk-cloud-animation .layer1 { background: url('images/animations/cloud/stars.png') no-repeat top right; background-size: 100% auto;}
.tyk-cloud-animation .layer2 { background: url('images/animations/cloud/clouds.png') repeat-x bottom left;   -moz-animation: bgRight 200s infinite linear; -o-animation: bgRight 200s infinite linear; -webkit-animation: bgRight 200s infinite linear; animation: bgRight 200s infinite linear; }

/* Footer */
.cloud.layout-footer {background: #e1f3ff; background: -webkit-linear-gradient(-70deg,  #e1f3ff 0%,#68c0e3 57%,#056aa9 100%); background: linear-gradient(-70deg,  #e1f3ff 0%,#68c0e3 57%,#056aa9 100%);}
.cloud.layout-footer p a {color: #2f3f9e;}
.cloud.layout-footer:before { background-image: url('images/animations/cloud/stars.png'); }
.cloud.layout-footer:after { background-image: url('images/animations/cloud/footer.png'); }

/* ==========================================================================
  Product : On Premises
   ========================================================================== */
.tyk-on-premises.hero {background: #2c3569; background: -webkit-linear-gradient(-110deg,  #2c3569 0%,#ff6c7d 28%,#f3efc3 58%,#fffeef 100%); background: linear-gradient(-110deg,  #2c3569 0%,#ff6c7d 28%,#f3efc3 58%,#fffeef 100%); color: #000018; }

.tyk-on-premises-animation .layer1 { background: url('images/animations/cloud/stars.png') no-repeat top right; background-size: 100% auto;}
.tyk-on-premises-animation .layer2 { background: url('images/animations/onpremises/city.png') repeat-x top center; background-size: auto 100%;  }

.on-premise.layout-footer {background: #fffeef; background: -webkit-linear-gradient(110deg,  #2c3569 0%,#ff6c7d 19%, #f3efc3 43%, #fffeef 61%); background: linear-gradient(110deg,  #2c3569 0%,#ff6c7d 19%, #f3efc3 43%, #fffeef 61%);}
.on-premise.layout-footer:after { background-image: url('images/animations/onpremises/footer.png'); }


/* ==========================================================================
  Product : Tyk Hybrid
   ========================================================================== */
.tyk-hybrid.hero {background: #0569a9; background: -webkit-linear-gradient(-115deg,  #0569a9 39%,#04dec4 51%,#f6f6e9 62%); background: linear-gradient(-115deg,  #0569a9 39%,#04dec4 51%,#f6f6e9 62%); color: #000018; }

.tyk-hybrid-animation .layer2 { background: url('images/animations/hybrid/hybrid.png') repeat-x top center; background-size: auto 100%;  }

.hybrid.layout-footer {background: #fffeef; background: -webkit-linear-gradient(110deg,  #0569a9 0%,#04dec4 24%, #f6f6e9 50%); background: linear-gradient(110deg,  #0569a9 0%,#04dec4 24%, #f6f6e9 50%);}
.hybrid.layout-footer:before { background-image: url('images/animations/cloud/stars.png'); }
.hybrid.layout-footer:after { background-image: url('images/animations/hybrid/footer.png'); }


/* ==========================================================================
  Features
   ========================================================================== */

.features.hero {background: #bb8962; background: -webkit-linear-gradient(-115deg,  #bb8962 0%, #d9bda5 51%, #ebded4 100%); background: linear-gradient(-115deg,  #bb8962 0%, #d9bda5 51%, #ebded4 100%); color: #000018; }
.features.hero h2 {color: #000018;}

.features-animation {background: url('images/animations/features/bg.png') no-repeat top center; background-size: auto 100%; width: 888px; height: 580px; left:auto; right: 0; bottom: 0; top: auto;}

.features-animation .layer1 { background: url('images/animations/features/glow.png') no-repeat top center; opacity: 0;}
.features-animation .layer2 { background: url('images/animations/features/tyk.png') no-repeat 0 -100%; height: 50%;}
.features-animation .layer3 { background: url('images/animations/features/glow-outer.png') no-repeat top center; opacity: 0;}
.features-animation .layer4 { background: url('images/animations/features/mask.png') no-repeat top center;}

.features-animation.loaded .layer1 {opacity: 0.5;}
.features-animation.loaded .layer2 {background-position: 0 0;}
.features-animation.loaded .layer3 {opacity: 0.5;}

/* Features Animation */
.features-animation .layer1, .features-animation .layer3 {-webkit-transition: opacity 1.5s linear;  transition: opacity 1.5s linear;}
.features-animation .layer2 {-webkit-transition: background 2s cubic-bezier(1, 0.01, 0, 1.22);  transition: background 2s cubic-bezier(1, 0.01, 0, 1.22);}


/* ==========================================================================
  Extend
   ========================================================================== */
.extend.hero {background: #b4bdbe; background: -webkit-linear-gradient(-107deg,  #b4bdbe 0%, #ffffff 81%); background: linear-gradient(-103deg,  #b4bdbe 0%, #ffffff 81%); color: #000018; }
.extend.hero h2 {color: #000018;}

.extend-animation {background: url('images/animations/extend/bg.png') no-repeat top center; width: 1150px; height: 455px; bottom: 0; left:auto; top: auto; right: -311px; margin: auto;}
.extend-animation span {-webkit-transform: translateY(-200%); transform: translateY(-200%); }
.extend-animation.loaded span {-webkit-transform: translateY(0%); transform: translateY(0%); }

.page-extend-tyk .layout-features h2:before {color: #e9e9e9; font-size: 21px; z-index: 1; line-height: 49px; text-align: center;}
.page-extend-tyk .layout-features h2:after { width: 42px; height: 49px; font-size: 49px; line-height: 1; position: absolute; top: -14px; left: 0; background: url('images/icon-diamond.svg'); background-size:100% auto; z-index: 0; content: '';}

/* ==========================================================================
  WooCommerce
   ========================================================================== */
.woocommerce table {width: 100%; font-family: 'Roboto', sans-serif; text-align: left;} 
.woocommerce {clear: both; /* padding: 50px 0;  */}
.woocommerce:after {content: ""; visibility: hidden; display: block; height: 0; clear: both;}
.woocommerce h2, .woocommerce h3 {font-weight: bold;}
.woocommerce input, .woocommerce textarea {border: 1px solid #E1E1E1; height: 48px; line-height: 46px;}
.woocommerce input[type=checkbox], .woocommerce input[type=radio] {height: auto;}
.woocommerce textarea {height: 150px; line-height: normal;}
.woocommerce input:placeholder-shown:valid, .woocommerce textarea:placeholder-shown:valid {border-color: #E1E1E1;}
.woocommerce .button { color: #2f3f9e; background: transparent; border:2px solid #2f3f9e;}
.woocommerce label {line-height: 50px;}
.woocommerce .col-1, .woocommerce .col-2 {clear: both; margin-bottom: 40px; overflow: auto;}

.required {text-decoration: none; color: #d23059;}

.woocommerce-info {text-align: center; margin-bottom: 20px;}
.woocommerce-error {color: #d23059; margin-bottom: 20px; text-align: center;}
.woocommerce-error li {list-style-type: none;}
.woocommerce-message {padding: 20px 0 20px 0; border-bottom: 1px solid #EFEFEF; margin-bottom: 20px;}
.woocommerce-message .button {margin-right: 20px;}

/* ==========================================================================
  Products
   ========================================================================== */
.products .product {width: 50%; float: left; list-style-type: none;}
.woocommerce-LoopProduct-link {display: block; margin-bottom: 20px;}

/* ==========================================================================
  Product
   ========================================================================== */
.product ul li {list-style-position: inside; margin-bottom: 20px;}
.product .section-faqs {border-top:1px solid #EFEFEF; padding: 30px 0 0 0; margin-top: 30px;} 
.product .quantity {float: left; margin-right: 20px;}

/* ==========================================================================
  Basket
   ========================================================================== */
.woocommerce-cart-form .product-thumbnail {display: none;}
.woocommerce-cart-form input { border-radius: 24px; }
.checkout-button {background: #00D9BA;}
.coupon {max-width: 500px;}
.coupon label {display: none;}
.coupon input {float: left; width: auto; margin-right: 20px;}
.cart_item td {padding: 20px 0;}
.quantity input {width: 48px; border-radius: 24px;}
.shop_table thead tr th {text-align: left; font-size: 12px; font-weight: 600; padding: 0 0 10px 0; color: #131219; line-height: 1; text-transform: uppercase; border-bottom: 1px solid #E1E1E1;}
.actions {padding: 20px 0; border-top: 1px solid #E1E1E1;}
.remove {width: 40px; height: 40px; line-height: 40px; text-align: center; font-size: 22px; color: #CCC; display: inline-block; }

.cart_totals li {list-style-type: none;}
.cart_totals label {line-height: 30px; height: 30px;}
.cart_totals th {padding-right: 10px; vertical-align: top; text-align: left;}
.cart_totals td, .cart_totals th {padding-top: 10px; padding-bottom: 10px; border-top: 1px solid #FFFFFF;}
.cart_totals .button {background: #00D9BA; border: 0; color: #FFF;}
.cart_totals table {border-bottom: 1px solid #E1E1E1; border-top: 1px solid #E1E1E1;}

.wc-proceed-to-checkout {text-align: right;}
.wc-proceed-to-checkout .button {margin-top: 20px;  }

/* ==========================================================================
  Checkout
   ========================================================================== */
.checkout .form-row {width: 48%; float: left; margin-bottom: 5px;}
.checkout .form-row:nth-child(odd) {clear: both;}
.checkout .form-row:nth-child(even) {float: right;}

.woocommerce-checkout-review-order-table {border-bottom: 1px solid #E1E1E1; border-top: 1px solid #E1E1E1; padding: 20px 0; margin: 20px 0;}
.woocommerce-checkout-review-order-table thead tr th {display: none;}
#place_order {background: #00D9BA; border: 0; color: #FFF;}

/* Checkout : Coupon */
.showcoupon {text-decoration: underline;}
.checkout_coupon {max-width: 400px; width: 100%; margin: auto; text-align: center;}
.checkout_coupon input {border-radius: 24px;}
.checkout_coupon p {margin-bottom: 10px;}
.checkout_coupon .button {  color: #2f3f9e; background: transparent; border:2px solid #2f3f9e; margin: auto;}

/* Checkout : Payment Methods */
.wc_payment_methods li {position: relative;}
.wc_payment_methods li img {position: absolute; top:0; right: 0;}
.woocommerce-checkout-payment .form-row {width: 100%; float:none;}

/* Select 2 */
.select2-container--default .select2-selection--single {border-radius: 0 !important; border: 1px solid #EFEFEF !important; height: 48px !important; line-height: 46px !important;}
.select2-container--default .select2-selection--single .select2-selection__rendered {line-height: 48px !important;}
.select2-container--default .select2-selection--single .select2-selection__arrow {height: 48px !important;}
.select2-dropdown {border: 1px solid #EFEFEF !important; border-radius: 0 !important;}

.wc-payment-form {background: #EFEFEF; padding: 20px; border: 0; border-radius: 24px;}

/* ==========================================================================
  My Account
   ========================================================================== */
.woocommerce-MyAccount-navigation {line-height: 40px; margin-bottom: 40px; white-space: nowrap; overflow: scroll; -webkit-overflow-scrolling: touch;}
.woocommerce-MyAccount-navigation ul {margin-bottom: 0; border-bottom: 1px solid #EFEFEF;}
.woocommerce-MyAccount-navigation li {list-style-type: none; border: 1px solid #EFEFEF; border-bottom: 0; padding: 0 15px; margin: 0 4px 0 0; display: inline-block; background: #FFF; position: relative;}
.woocommerce-MyAccount-navigation a {border: 0;}
.woocommerce-MyAccount-navigation .is-active:before {content: ''; height: 1px; background: #FFF; position: absolute; bottom: -1px; left:0; right: 0;}

.woocommerce-MyAccount-content {text-align: left;}
.woocommerce-MyAccount-content .woocommerce-form-row {width: 48%; float: left; margin-bottom: 5px;}
.woocommerce-MyAccount-content .woocommerce-form-row--last {float: right;}
.woocommerce-MyAccount-content .clear {clear: both;}
.woocommerce-MyAccount-content .form-row-wide {float: none; width: 100%;}
.woocommerce-MyAccount-content fieldset {border: 0; margin: 40px 0;}
.woocommerce-MyAccount-content legend {font-weight: bold; color: #333;}
.woocommerce-MyAccount-content .woocommerce-message {top:0; border-top: 1px solid #EFEFEF; border-right: 1px solid #EFEFEF;}
.woocommerce-MyAccount-content .col2-set {clear: both;}
.woocommerce-MyAccount-content .col-1, .woocommerce-MyAccount-content .col-2 {width: 48%; float: left; margin-bottom: 5px;}
.woocommerce-MyAccount-content .col-2 {float: right;}

/* ==========================================================================
  Transitions
   ========================================================================== */
.menu-underline { -webkit-transition: left 0.5s cubic-bezier(1, 0.01, 0, 1.22), width 0.5s cubic-bezier(1, 0.01, 0, 1.22); transition: left 0.5s cubic-bezier(1, 0.01, 0, 1.22), width 0.5s cubic-bezier(1, 0.01, 0, 1.22); }
.menu, .submenu, .open .submenu, .blog-sidebar  {-webkit-transition: transform 0.75s cubic-bezier(.77,0,.175,1); transition: transform 0.75s cubic-bezier(.77,0,.175,1); }
.menu-getstarted:after { -webkit-transition: opacity 0.3s ease-in; transition: opacity 0.3s ease-in; }
.submenu li {-webkit-transition: opacity 0.2s ease-in; transition: opacity 0.2s ease-in;}
.submenu li:nth-child(1) {-webkit-transition-delay:0.1s; transition-delay:0.1s; }
.submenu li:nth-child(2) {-webkit-transition-delay:0.2s; transition-delay:0.2s; }
.submenu li:nth-child(3) {-webkit-transition-delay:0.3s; transition-delay:0.3s; }
.submenu li:nth-child(4) {-webkit-transition-delay:0.4s; transition-delay:0.4s; }
.submenu li:nth-child(5) {-webkit-transition-delay:0.5s; transition-delay:0.5s; }
.submenu li:nth-child(6) {-webkit-transition-delay:0.6s; transition-delay:0.6s; }
.submenu li:nth-child(7) {-webkit-transition-delay:0.7s; transition-delay:0.7s; }
.submenu li:nth-child(8) {-webkit-transition-delay:0.8s; transition-delay:0.8s; }

/* General Modal */
.modal { -webkit-transition: opacity 0.5s cubic-bezier(1, 0.01, 0, 1.22);  transition: opacity 0.5s cubic-bezier(1, 0.01, 0, 1.22); }

/* Footer */
.footer-social a { -webkit-transition: all 0.3s ease-in; transition: all 0.3s ease-in; }

/* Extend Animation */
.extend-animation span {-webkit-transition: transform 0.5s ease-in;  transition: transform 0.5s ease-in;}

/* Pricing */
.pricing-faq {-webkit-transition: height 0.5s ease-in;  transition: height 0.5s ease-in;}

/* Page Submenu */
.page-submenu {-webkit-transition: transform 0.75s cubic-bezier(.77,0,.175,1); transition: transform 0.75s cubic-bezier(.77,0,.175,1);}

/* Homepage */
.hero-scroll {-webkit-transition: opacity 0.3s ease-in; transition: opacity 0.3s ease-in;}
.scroll-nav a:after {-webkit-transition: background 0.3s ease-in; transition: background 0.3s ease-in;}
.homepage-hero-text {-webkit-transition: height 0.5s ease-in; transition: height 0.5s ease-in;}
.homepage-hero-text-mask {-webkit-transition: opacity 0.3s ease-in 0.4s; transition: opacity 0.3s ease-in 0.4s;}
.button.animated {-webkit-transition: background 0.3s ease-in; transition: background 0.3s ease-in;}
.homepage-video-mask {-webkit-transition: transform 2s ease-in; transition: transform 2s ease-in;}
.homepage-preloader {-webkit-transition: opacity 0.3s ease-in; transition: opacity 0.3s ease-in;}

/* Layout Clients */
.client-logo { -webkit-transition: all 0.3s ease-in; transition: all 0.3s ease-in; }

/* ==========================================================================
  Animations
   ========================================================================== */
/*
@-webkit-keyframes bgtween {
  0%  { background: -webkit-linear-gradient(40deg,  #109eae 0%, #04dec4 100% ); background: linear-gradient(40deg,  #109eae 0%, #04dec4 100%);}
  100%  { background: -webkit-linear-gradient(40deg,  #109eae 50%, #04dec4 100% ); background: linear-gradient(40deg,  #109eae 50%, #04dec4 100%);}
}

@-moz-keyframes bgtween {
  0%  { background: -webkit-linear-gradient(40deg,  #109eae 0%, #04dec4 100% ); background: linear-gradient(40deg,  #109eae 0%, #04dec4 100%);}
  100%  { background: -webkit-linear-gradient(40deg,  #109eae 50%, #04dec4 100% ); background: linear-gradient(40deg,  #109eae 50%, #04dec4 100%);}}

@-o-keyframes bgtween {
  0%  { background: -webkit-linear-gradient(40deg,  #109eae 0%, #04dec4 100% ); background: linear-gradient(40deg,  #109eae 0%, #04dec4 100%);}
  100%  { background: -webkit-linear-gradient(40deg,  #109eae 50%, #04dec4 100% ); background: linear-gradient(40deg,  #109eae 50%, #04dec4 100%);}}

@-ms-keyframes bgtween {
  0%  { background: -webkit-linear-gradient(40deg,  #109eae 0%, #04dec4 100% ); background: linear-gradient(40deg,  #109eae 0%, #04dec4 100%);}
  100%  { background: -webkit-linear-gradient(40deg,  #109eae 50%, #04dec4 100% ); background: linear-gradient(40deg,  #109eae 50%, #04dec4 100%);}}

@keyframes bgtween {
  0%  { background: -webkit-linear-gradient(40deg,  #109eae 0%, #04dec4 100% ); background: linear-gradient(40deg,  #109eae 0%, #04dec4 100%);}
  100%  { background: -webkit-linear-gradient(40deg,  #109eae 50%, #04dec4 100% ); background: linear-gradient(40deg,  #109eae 50%, #04dec4 100%);}
}
*/

@-webkit-keyframes scroll {
  0%  { -webkit-transform: translateY(
    0px); transform: translateY(0px); opacity: 0;}
  5%  { -webkit-transform: translateY(0px); transform: translateY(0px); opacity: 1;}
  50%   { -webkit-transform: translateY(0px); transform: translateY(0px); opacity: 1;}
  80%   { -webkit-transform: translateY(10px); transform: translateY(10px); opacity: 0;}
  100%  { -webkit-transform: translateY(10px); transform: translateY(10px); opacity: 0;}
}

@-moz-keyframes scroll {
  0%  { -moz-transform: translateY(0px); transform: translateY(0px); opacity: 0;}
  5%  { -moz-transform: translateY(0px); transform: translateY(0px); opacity: 1;}
  50%   { -moz-transform: translateY(0px); transform: translateY(0px); opacity: 1;}
  80%   { -moz-transform: translateY(10px); transform: translateY(10px); opacity: 0;}
  100%  { -moz-transform: translateY(10px); transform: translateY(10px); opacity: 0;}
}

@-o-keyframes scroll {
  0%  { -o-transform: translateY(0px); transform: translateY(0px); opacity: 0;}
  5%  { -o-transform: translateY(0px); transform: translateY(0px); opacity: 1;}
  50%   { -o-transform: translateY(0px); transform: translateY(0px); opacity: 1;}
  80%   { -o-transform: translateY(10px); transform: translateY(10px); opacity: 0;}
  100%  { -o-transform: translateY(10px); transform: translateY(10px); opacity: 0;}
}

@-ms-keyframes scroll {
  0%  { -ms-transform: translateY(0px); transform: translateY(0px); opacity: 0;}
  5%  { -ms-transform: translateY(0px); transform: translateY(0px); opacity: 1;}
  50%   { -ms-transform: translateY(0px); transform: translateY(0px); opacity: 1;}
  80%   { -ms-transform: translateY(10px); transform: translateY(10px); opacity: 0;}
  100%  { -ms-transform: translateY(10px); transform: translateY(10px); opacity: 0;}
}

@keyframes scroll {
  0%  { transform: translateY(0px); opacity: 0;}
  5%  { transform: translateY(0px); opacity: 1;}
  50%   { transform: translateY(0px); opacity: 1;}
  80%   { transform: translateY(10px); opacity: 0;}
  100%  { transform: translateY(10px); opacity: 0;}
}

.animate-spin {
  -moz-animation: spin 2s infinite linear;
  -o-animation: spin 2s infinite linear;
  -webkit-animation: spin 2s infinite linear;
  animation: spin 2s infinite linear;
  display: inline-block;
}
@-moz-keyframes spin {
  0% {
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -moz-transform: rotate(359deg);
    -o-transform: rotate(359deg);
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@-webkit-keyframes spin {
  0% {
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -moz-transform: rotate(359deg);
    -o-transform: rotate(359deg);
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@-o-keyframes spin {
  0% {
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -moz-transform: rotate(359deg);
    -o-transform: rotate(359deg);
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@-ms-keyframes spin {
  0% {
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -moz-transform: rotate(359deg);
    -o-transform: rotate(359deg);
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@keyframes spin {
  0% {
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -moz-transform: rotate(359deg);
    -o-transform: rotate(359deg);
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

@-moz-keyframes bgRight {
  from { background-position: 0 0; }
  to { background-position: -200% 0; }
}

@-webkit-keyframes bgRight {
  from { background-position: 0 0; }
  to { background-position: -200% 0; }
}

@-o-keyframes bgRight {
  from { background-position: 0 0; }
  to { background-position: -200% 0; }
}

@-ms-keyframes bgRight {
  from { background-position: 0 0; }
  to { background-position: -200% 0; }
}

@keyframes bgRight {
  from { background-position: 0 0; }
  to { background-position: -200% 0; }
}

/* ==========================================================================
  Media Queries
   ========================================================================== */

/*@media only screen and (min-width : 1336px) {
  /* Fix Sidebar 
  .hasSidebar .container:before  { width: 413px; left: 50%; margin-left: -668px;}
  .hasSidebar aside:before, .blog-sidebar:before {content: ''; background: #eee; z-index: -1; position: fixed; top:0; bottom: 0; right:70%; width: 30%;}
  .blog-sidebar:before {background: #eee; }
}*/

@media only screen and (max-width : 1336px) {
  

    
  /* Layout : Metrics - Full Width */
  .layout-metrics .container {max-width: none;}
  
  /* Case Studies - Tuck in Padding */
  .case-study {padding: 26px 26px 100px 26px}
}

@media only screen and (max-width : 1100px) {
  /* Menu - Collapse  */
  .header {position: absolute; right: 60px;}
/*
  .burger {width: 60px; height: 60px; position: fixed; top:0; right: 0; background: rgba(0,0,24,0.85); z-index: 3; display: inline-block; }
  .burger:before, .burger:after {content: ''; width: 23px; margin: auto;  position: absolute; top:0; bottom: 0; left:0; right:0;}
  .burger:before { height: 16px; border-top:2px solid #FFF; border-bottom: 2px solid #FFF; }
  .burger:after { height: 2px;  background: #FFF; } */
  
  .menu, .submenu {line-height: 52px; font-size: 22px; }
  /*.menu { position: fixed; top:0; right: 70px; left:0; top:0; bottom: 0; background: #000018; text-align: left; padding: 26px; z-index: 2;  text-transform: none; -webkit-transform: translateX(-100%); transform: translateX(-100%); max-width: 310px; min-width: 274px; }*/
  .menu:before, .menu:after { content: ''; position: absolute; left:26px;  display: none; }
  .menu:before { height: 1px; background: #00d9ba; width: 30px;  top:97px;}
  .menu:after { height: 28px; width:73px; background: none; top:30px;}
  .menu .menu-underline {display: none;}
  .menu > ul {text-align: left; margin-top: 94px; width: 100%;}
  .menu li {display: block; padding: 0; position: static;}
  .submenu .submenu-back {display: block; position: relative; cursor: pointer;}
  .submenu {position: absolute; top:0; left:-26px; right:-26px; width: auto; background: #000018; -webkit-transform: translateX(-100%); transform: translateX(-100%); height: 0; opacity: 0; visibility: hidden; overflow: hidden; padding: 0 26px; }
  .submenu li {margin: 0; background: transparent; padding: 0 0 0 40px;}
  .submenu-back:before {font-size: 26px; position: absolute; top:-2px; left: 0;} 
  .submenu li:hover, .submenu li.active {background: transparent;}
  
  /* State */
  .show-menu .menu {-webkit-transform: translateX(0); }
  .show-menu .burger:after {content: '\e801'; font-family: 'tyk'; font-size: 22px; color: #FFF; line-height: 60px; width: auto; height: auto; background: transparent;}
  .show-menu .burger:before {visibility: hidden; }
  .menu li:hover .submenu {opacity: 0; visibility: hidden; height: 0;}
  .menu li.open .submenu {height: 100%; opacity: 1; visibility: visible; -webkit-transform: translateX(0%); transform: translateX(0%);}
  .menu li.open .submenu li {opacity: 1; visibility: visible;}

  
  .menu .footer-social {position: absolute; left:26px; bottom: 26px;}
  .menu .footer-social a {text-align: left;}
  
  .menu-getstarted { position: absolute; top: 26px; right: 26px; padding: 0 20px; font-size: 10px;} 
  
  
  /* Case Studies - Knock to 3 Column */
  .listing article {width:calc(33.33333% - 10px); }

  /* Layout : Flip / Flop - Increase vertical height */
  .layout-flipflop .container:before {padding-top: 50%;}
  
  /* Pricing : Comparison */
  .pricing-comparison-label div {margin: 0 10px; }
  .pricing-comparison-label:before {left:10px; right: 10px;}
  
}


/* ----------- Smartphones (portrait and landscape) ----------- */
@media only screen and (max-width : 1000px) {
  
  .m-show {display: block;}
  .m-hide {display: none;}
  
  .btn.m-show {z-index: 2; position: fixed; right: -0; top: 170px; border: none !important; padding: 10px; background-color: rgba(217, 217, 217, 0.7) !important; border-radius: .358rem 0 0 .358rem;}
  .btn.m-show i {color: #04A118;}
  .button {font-size: 13px; padding-left:40px; padding-right: 40px; }
  .button.medium {min-width: 0;}

  /* ==========================================================================
    Typography
     ========================================================================== */
  .f-24 {font-size: 18px;}
  .f-26 {font-size: 19px;}
  .f-37 {font-size: 30px;}
  .f-48 {font-size: 34px;}
  
  .wysiwyg h1,
  .wysiwyg h2 {word-break: break-word;}
  .wysiwyg h1 {font-size: 30px; margin-bottom: 20px;}
  .wysiwyg h2 {font-size: 25px;}
  .wysiwyg h3 {margin-bottom: 20px; margin-top: 40px;}
  .wysiwyg hr {margin-top: 40px;}
  .wysiwyg pre {margin-left: -26px; margin-right: -26px; padding: 26px;}
  
  /* ==========================================================================
    Hero
     ========================================================================== */  
  .hero {min-height: 585px; }
  .hero:before {display: none;}
  .hero .container {position: static;}
  .hero h2 {color: #505071;}
  .hero .button:first-of-type {margin-top: 0px;}

  .hero-caption {padding-top: 110px;}
  .hero-caption img {display: none; }
  .hero-caption h1 {margin-bottom: 20px;}
  .hero-caption h1.has-icon {line-height: normal; }
  .hero-caption h2 {margin-top: 4px;}
  .hero-caption p:last-child {margin-bottom: 0;}
  
  .hero-animation {width: auto;  background-size: 100% auto; background-position: bottom center; height: auto; position: relative; top:auto; left: auto; bottom: auto; right: auto;}
  .hero-animation:before { width: 100%; content: ''; display: block;}

  .hero-product {margin-left: auto; margin-right: auto;}
  .hero-product h1, .hero-product h2 {text-align: center;}
  .hero-product h1 {margin-bottom: 0;}
  .hero-product h2 {margin-bottom: 30px; font-size: 12.5px;  }
  .hero-product img, .hero-product svg {margin: auto auto 15px auto; width: 62px; height: 62px; display: block; float: none;}
  .hero-product .button {margin-left: auto; margin-right: auto;}
  .hero-caption.hero-product img {margin-bottom: 18px;}

  .hero-sidebyside {padding-top: 110px;}
  .hero-sidebyside h1, .hero-sidebyside .hero-text { position: static; -webkit-transform: none; transform:none; width: 100%; }
  .hero-sidebyside h1 { margin-bottom: 32px; line-height: 25px; }
  .hero-sidebyside img { display: none;} 
  .hero-sidebyside .hero-text { width: 100%; }
  
  .hero.centered .hero-caption {margin-left: 0;}
  
  .hero.has-mobile-image {background-image: none !important;}
  .hero-mobile-image {display: block; position: absolute; top:0; left:0; right: 0; height: 100%; object-fit:cover; z-index: 0;}

  /* ==========================================================================
    Page : Homepage
     ========================================================================== */
  .hero-video {height: auto; min-height: 0; background: -webkit-linear-gradient(0deg, #109eae 0%,#04dec4 71%); background: linear-gradient(0deg, #109eae 0%,#04dec4 71%);}
  .homepage-video-container, .homepage-logo, .scroll-nav, .hero-scroll, .homepage-preloader {display: none;}
  .homepage-intro { text-align: left; -webkit-transform: none; transform:none; position: static; padding-top: 110px; padding-bottom: 40px;}
  .homepage-hero-text {height: auto;}
  .homepage-hero-text p {margin-bottom: 34px;}
  .homepage-hero-text-mask {opacity: 1;}
  
  /* Clients */
  .page-home .layout-clients {padding: 40px 0;}
  .page-home .client-logo {padding: 0 10px;}
  .more-clients {margin-top: 40px;}
  
  /* Products */
  .layout-products {height: auto;}
  .section-product {height: auto; padding: 0; z-index: 1;}  
  .section-product .container { padding-top: 52.8%; background-position:top center; background-size:100% auto; background-repeat: no-repeat;}
  .section-product span { padding-top: 52.8%; height:0; bottom: 0;}

  .product-title svg, .product-caption.center .product-title svg, .page-home .tyk-enterprise.hero svg {width: 62px; height: 62px; margin: auto auto 36px auto; float: none; display: block;}
  .product-caption {text-align: center; margin-top: -10%; padding-bottom: 36px; margin-left: auto; margin-right: auto;} 
  .product-caption, .product-caption.left,.product-caption.right {-webkit-transform: none; transform:none; position: relative; top:auto; left:auto; right:auto;}
  .product-caption h1 {padding: 0;}
  .product-caption p {text-align: left;}
  .product-caption p:last-of-type {margin-bottom: 36px;}
  .product-caption .button {margin-left: auto; margin-right: auto; }

  /* Product Intro */
  .product-caption.center-text {padding: 36px; width: auto;}
  .product-caption.center-text h1, .product-caption.center-text .product-text {float: none; width: auto; padding: 0;}
  .product-caption.center-text h1 {margin-bottom: 16px;}
  .product-intro  {padding: 60px 0;}
  .product-intro .container {padding-top: 0;}
  .product-intro .product-caption { margin: 0 -10px; }

  /* Product Cloud */
  .section-product.cloud {background-position: top; background-image: none;}
  .section-product.cloud .container {background-image:url('images/homepage/tyk_cloud_mobile.png'); }
  .section-product.cloud .product-caption { color: #000018;} 
  .section-product.cloud  #icon-tyk-cloud path {stroke: #000018;}
  .section-product.cloud .button.white.outline {color: #2f3f9e; border-color:#2f3f9e;}

  /* On Premise */
  .section-product.on-premise .container {background-image:url('images/homepage/tyk_onpremise_mobile.jpg'); background-color: #FFF; }
  .section-product.on-premise .product-caption { color: #000018; }  
  .section-product.on-premise span {display: none;}
  
  /* Hybrid */
  .section-product.hybrid .container {background-image:url('images/homepage/tyk_hybrid_mobile.jpg'); }
  .section-product.hybrid {background: #FFF;}
  
  /* Enterprise */
  .page-home .tyk-enterprise.hero {background: #FFF; color: #000018; text-align: center;}
  .page-home .tyk-enterprise.hero .container  { padding-top: 52.8%;}
  .page-home .tyk-enterprise.hero p {text-align: left; }
  .page-home .tyk-enterprise.hero h1 {margin:0 0 8px 0;}
  .page-home .tyk-enterprise.hero h2 {margin:0 0 18px 0;}
  .page-home .tyk-enterprise .hero-caption {padding-top: 0; margin-top: -10%; position: relative; margin-left: auto; margin-right: auto;}
  .page-home .tyk-enterprise-animation:before {    width: 116px; height: 116px; background: #FFF; border-radius: 50%; display: block; position: absolute; bottom: 0; -webkit-transform: translateY(-50%); transform: translateY(50%); top: auto; margin: auto; left: 0; right: 0; z-index: 1; padding: 0; }
  .page-home .tyk-enterprise-animation { background: -webkit-linear-gradient(0deg, #00d9ba 9%, #2f3f9e 41%, #000018 78%); background: linear-gradient(0deg, #00d9ba 9%, #2f3f9e 41%, #000018 78%);}
  .page-home .tyk-enterprise-animation {    position: absolute; top: 0; padding-top: 52.8%; left: 0; right: 0; height: 0; overflow: hidden;}
  .page-home .tyk-enterprise-animation .layer1, .page-home .tyk-enterprise-animation .layer2, .page-home .tyk-enterprise-animation .layer3, .page-home .tyk-enterprise-animation .layer4 {top:10%; width: 90%; height: 170%;}
  .page-home #icon-tyk-enterprise circle {stroke:#000;}
  
  /* ==========================================================================
    Page : Extend
     ========================================================================== */    
  .extend-animation { margin-right: -100px; margin-left:-100px; }
  .extend-animation:before { padding-top: 39.565217391304%; }
  .extend-animation span {-webkit-transform: translateY(-300%); transform: translateY(-300%); }

  /* ==========================================================================
    Page : Features
     ========================================================================== */    
  .features-animation:before  { padding-top: 65.315315315315%; }
  .features-animation .layer1, .features-animation .layer2, .features-animation .layer3, .features-animation .layer4 { background-size: 100% auto;}
  
  .feature-products {position: static;}
  .feature-products .button {margin-left: 0; margin-right: 10px;}

  .layout-features h2:before { width: 40px; height: 46px; font-size: 46px; top:-11px;}
  .layout-features article:last-of-type p {margin-bottom: 0;}
  
  /* ==========================================================================
    Page : Cloud
     ========================================================================== */    
  .tyk-cloud-animation:before  { padding-top: 90%; }
  .tyk-cloud-animation .layer2 { background-size: auto 100%;}

  .tyk-cloud.hero {background: -webkit-linear-gradient(-180deg, #e1f3ff 32%,#68c0e3 61%, #056aa9 80%, #0549a7 90%); background: linear-gradient(-180deg, #e1f3ff 32%,#68c0e3 61%, #056aa9 80%, #0549a7 90%); }

  .cloud.layout-footer {background: -webkit-linear-gradient(0deg, #e1f3ff 24%,#68c0e3 78%, #056aa9 100% ); background: linear-gradient(0deg, #e1f3ff 24%,#68c0e3 78%, #056aa9 100%); background-size: auto 150%; background-position: center;}
    .cloud.layout-footer:after {background-position: 50% 55%;}

  /* ==========================================================================
    Page : On Premises
     ========================================================================== */    
  .tyk-on-premises-animation:before {padding-top: 103%;}
  .tyk-on-premises-animation .layer1 {background-size: auto 100%;}
  .tyk-on-premises-animation .layer2 {background-image:url('images/animations/onpremises/city_mobile.png');}
  
  .tyk-on-premises.hero {background: -webkit-linear-gradient(0deg,  #2c3569 15%,#ff6c7d 29%,#f3efc3 58%,#fffeef 100%); background: linear-gradient(0deg, #2c3569 15%,#ff6c7d 29%,#f3efc3 58%,#fffeef 100%); }
  
  .on-premise.layout-footer {background: -webkit-linear-gradient(-180deg, #2c3569 4%,#ff6c7d 24%, #f3efc3 49%, #fffeef 75%); background: linear-gradient(-180deg, #2c3569 4%,#ff6c7d 24%, #f3efc3 49%, #fffeef 75%); background-size: auto 150%; background-position: center;}
  .on-premise.layout-footer:after { -webkit-background-size: auto 50%; background-size: auto 50%; background-position: 50% 55%;}

  /* ==========================================================================
    Page : Hybrid
     ========================================================================== */    
  .tyk-hybrid-animation:before {padding-top: 106%;}
  .tyk-hybrid-animation .layer1 {background-size: auto 100%;}
  .tyk-hybrid-animation .layer2 {background-image:url('images/animations/hybrid/hybrid_mobile.png');}
  
  .tyk-hybrid.hero {background: -webkit-linear-gradient(0deg, #0569a9 32%, #04dec4 42%, #f6f6e9 50%); background: linear-gradient(0deg, #0569a9 32%, #04dec4 42%, #f6f6e9 50%); background-size: auto 120%; background-position: center; }
  
  .hybrid.layout-footer {background: -webkit-linear-gradient(-180deg, #0569a9 4%, #04dec4 28%, #f6f6e9 49%); background: linear-gradient(-180deg, #0569a9 4%, #04dec4 28%, #f6f6e9 49%); background-size: auto 150%; background-position: center;}
  .hybrid.layout-footer:after { background-size: 60% auto; background-position: 50% 60%;}
  
  
  /* ==========================================================================
    Page : Enterprise
     ========================================================================== */      
  .tyk-enterprise.hero {background: -webkit-linear-gradient(-180deg, #00d9ba 9%, #2f3f9e 41%, #000018 78%); background: linear-gradient(-180deg, #00d9ba 9%, #2f3f9e 41%, #000018 78%); background-size: auto 120%; background-position: center; }
  .tyk-enterprise.hero h2 {color: #a7a6b4;}

  .tyk-enterprise-animation {-webkit-transform: none; transform: none; margin-bottom: -50%;}        
  .tyk-enterprise-animation:before {padding-top: 100%;}
  .tyk-enterprise-animation .layer1, .tyk-enterprise-animation .layer2, .tyk-enterprise-animation .layer3, .tyk-enterprise-animation .layer4 {top:5%; left:5%; width: 90%; height: 90%;}

  /* ==========================================================================
    Layouts
     ========================================================================== */      
  .layout-features {padding-top: 48px;}
  .layout-features article {width: auto; float: none; padding: 0 0 48px 0;}
  .layout-features h2 {margin-left: 54px; margin-bottom: 21px;}
  
  /* Button */
  .layout-button {padding: 0 26px 54px 26px;}
  
  /* Flip Flop */
  .layout-flipflop {max-height: none;}
  .layout-flipflop .container:before {display: none;}
  .layout-flipflop figure {height: auto; position: relative;}
  .layout-flipflop figure:before {content: ''; padding-top: 53.333333333333%;  width: 100%; display: block;}
  .layout-flipflop.right figure, .layout-flipflop.left figure {width: 100%; left:0;}
  .layout-flipflop article {width: 100%; position: static; height: auto;}
  .layout-flipflop .flipflop-caption {position: static; -webkit-transform:none; transform:none; }
  .layout-flipflop.left .flipflop-caption, .layout-flipflop.right .flipflop-caption, .layout-flipflop .flipflop-caption {padding: 38px 0;}
  .layout-flipflop h2 {margin-bottom: 20px;}
  .layout-flipflop p:last-of-type {margin-bottom: 30px;}
  .flipflop-mobile-image {display: block;}
  .layout-flipflop.has-mobile-image figure {background: none !important;}

  /* Footer */
  .layout-footer {padding: 50px 0 45px 0;}
  .layout-footer h2 { margin-top: 0; margin-bottom: 24px; max-width: 80%; margin-left: auto; margin-right: auto;}
  .layout-footer, .layout-footer .container {min-height: 0;}
  .layout-footer .left, .layout-footer .right {position: relative; left:auto; right:auto; top:auto; -webkit-transform:none; transform:none; margin-left: auto; margin-right: auto;}
  .layout-footer .left {text-align: center; padding-bottom: 100%;}
  .layout-footer .right p {margin-bottom: 0;}
  .layout-footer ul {max-width: 70%; width: 100%; margin: auto; }
  .layout-footer li {list-style-type: none; margin-bottom: 14px; }
  .layout-footer:after {background-size: 100% auto;}
  .layout-footer .button:last-of-type {margin-bottom: 0;}
  .layout-footer .right .wysiwyg {margin-top: 26px;}  
  
  /* Form */
  .layout-form {padding: 50px 0 40px 0; background: -webkit-linear-gradient(-180deg, #00d9ba 7%, #2f3f9e 35%, #000018 81%); background: linear-gradient(-180deg, #00d9ba 7%, #2f3f9e 35%, #000018 81%); background-size: auto 150%; background-position: center;}
  .layout-form article {text-align: center; margin-bottom: 36px;}
  .layout-form article, .layout-form li, .layout-form form {width: 100%; float: none;}
    .layout-form li#field_2_4 {position: static; padding-left: 0; width: 100%;}
  .layout-form p { margin-left: auto; margin-right: auto;}

 
    /* Careers */
    .layout-careers {padding: 46px 0 0 0;}
    .career {padding: 46px 0;}
    .career .button {margin-top: 18px;}
 
    /* Metrics */
  .layout-metrics {padding: 60px 0;}
  .layout-metrics .container {max-width: none;}
  .metric { width: 50%; padding-top:50%;}
  .metric:before {top:12px; right: 12px; left: 12px; bottom: 12px; }
  .metric h3 {font-size: 21px;}
  .metric label {font-size: 10px;}    
 
  /* Text */
  .layout-text { padding: 32px 0;}
  
  /* Clients */
  .client-logo {width: 33.33333%; margin-top: 30px; padding: 0 10px;}
  .client-logo img {width: 100%;}
 
  /* ==========================================================================
    Page : Pricing
     ========================================================================== */      
    .section-pricing {padding-top: 122px;}
    .section-pricing:before {width: 2px; margin-left: -1px; left:38px; top:156px;}
    .section-pricing:before, .section-pricing:after {bottom: 20px;}
    

    .pricing-intro {padding: 0 26px 49px 76px;}
    .section-pricing img {width: 40px; height: 39px; left: 17px; top: -5px;}
    .pricing-intro h1, .pricing-intro h2 {margin-bottom: 16px;}
    .pricing-intro:before, .section-pricing:after {width: 10px; height: 10px; border-width: 2px; margin-left: -5px; left: 38px;}
    .pricing-intro.has-bullet:before {left: 38px; top: 10px;}
 
    .pricing-tables {padding: 0 26px 10px 26px;}
    .pricing-tables-container {margin: 0;}
    .pricing-table-intro,.pricing-table-container {margin-left: -30px; margin-right: -30px;}
    .pricing-table-intro {margin-bottom: 14px; margin-bottom: 37px;}

    .pricing-table {width: auto; padding: 0; float: none; margin-bottom: 16px;}   
    .pricing-table td {line-height: normal; padding: 15px 0;}
    .pricing-table td.limit {padding-left: 30px;}
    .pricing-table td:after {display: block; padding-left: 0; font-size: 12px;}
    .pricing-table td {padding-left: 30px;}
    .pricing-table table {margin-bottom: 30px; margin-top: -20px;}
    .pricing-table-graphic {width: 68%; padding-top: 68%; }
    

    .pricing-bg {padding: 30px;}
    
    .pricing-page-bg {padding-bottom: 0;}
    .pricing-page-bg:before {display: none;}
    
    .professional.pricing-table {width: 100%; float: none;}
    .professional .pricing-table-block, .professional .pricing-table-block.last, .professional .pricing-table-block.first  {border:0; width: 100%; float: none; padding-left: 0; padding-right: 0; margin-bottom: 20px; }
    
    .section-faqs {padding: 35px 0;}
    .section-faqs h2 {margin-bottom: 28px;}
    .pricing-faq-answer {padding: 20px 0;}
    .pricing-faq-answer:before, .pricing-faq-answer:after {position: static; display: inline-block; margin: 0 20px 20px 0; width: 40px; height: 40px; margin-top: 6px; float: left; line-height: 40px;}
    .pricing-faq-answer:before { font-size: 18px; }
    .pricing-faq-answer:after {position: absolute; top:20px; left:0;}

  /* ==========================================================================
    Pricing : Comparison
     ========================================================================== */          
    .pricing-comparison {margin-top: 0;}
    .page-pricing-comparison .hero { min-height: 0; border-bottom: 0; padding-bottom: 52px; }
    .pricing-comparison-container {padding: 0;}
    .pricing-comparison-column {width: 100%; padding-bottom: 0;}
    
    .pricing-comparison-column h3 {padding: 0;}
    .pricing-comparison-pro h3 {padding-bottom: 20px;}
    .pricing-comparison h2 {padding: 22px 0 0 0; text-align: left;}
    
   /* Free - Span's 2 columns */
  .pricing-comparison-free.wide, .pricing-comparison-pro.wide {width: 100%;}
  .pricing-comparison-hybrid .pricing-comparison-free, .pricing-comparison-hybrid .pricing-comparison-pro.wide {visibility: visible;  margin-left:0;}
  
  .pricing-comparison-label {height: 54px; line-height: 54px; }

  .pricing-comparison .pricing-comparison-pro {margin-bottom: 10px; padding-bottom: 30px;}
  .pricing-comparison .pricing-comparison-enterprise {margin-bottom: 0; }
    
    .pricing-comparison table { width: 100%; float: none; }
    .pricing-comparison table tr td {padding-left: 20px; width: 50%;}
    .pricing-comparison table tr td:first-child {padding-left: 0; border-left: 0; padding-right: 20px;}
    .pricing-comparison table tr:first-child td {padding-top: 0;}
    
    .pricing-comparison-enterprise {margin-top: 0;}
    
    .pricing-button-row:before { content: ''; width: 10px; height: 100%; display: block; top: 0; left: 0; bottom: 0; position: absolute; background: #FF1745; }
    .pricing-button-row {margin-top: -30px;}
    
  /* ==========================================================================
    Page
     ========================================================================== */      
  .section-page {padding-top: 151px; padding-bottom: 60px;}
  .hasSidebar.section-page {padding-top: 0;}
  
  .hasSidebar .container:before {display: none;}
  .hasSidebar .page-content {width: 100%; flex: 0 0 100%; max-width: 100%; padding-left: 0; float: none; padding-top: 110px; padding-right: 30px;}
  .submenu-close {color: #000;} 
 
  .hasSidebar .page-submenu {position: fixed; top:77px; bottom: 0; left: 0; right: 0; overflow: auto; -webkit-transform: translateX(-100%); transform: translateX(-100%); width: auto; flex: 0 0 100%; max-width: 100%; min-width: 0; padding: 26px;  background: #f5f5f5; z-index: 3; margin: 0;}
  .show-submenu .page-submenu {-webkit-transform: translateX(0%); transform: translateX(0%);}

  .hasSidebar .page-aside, .hasSidebar aside {display: block !important; width: auto; float:none; padding: 110px 26px 38px 26px; margin: 0 -26px 42px -26px; background: #E1E1E1; position: static; }

  .submenu-toggle, .submenu-close {height: 15px; line-height: 15px; cursor: pointer; padding-top: 20px; background: none;}
  .submenu-toggle { padding-left: 60px;  position: absolute; top:-91px; left:0; right: 0; width: 100%; text-align: left; font-weight: bold; z-index: 1;}
  .submenu-toggle span {position: fixed; top:0; width: 60px; height: 60px;display: block; left:0; z-index: 1; }
  .submenu-toggle, .submenu-toggle span { background: #e1e1e1 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANIAAADSBAMAAADNt4NxAAAAHlBMVEXh4eEAABgQECZhYW/c3NxiYm8PDyVoaHUODiVpaXYXwExtAAAAdklEQVR42u3XsQ2AIBAFUFeABiltnIANnMAl3MPNTaSVmCgNyXvNLy+QIz9MEwAAAAAAAAAA/LKt5Y4zPJpLt0l7SDUaUrdJS4g1GuKAk95uL/fbiKNuRONQsXg0AAN0bta5OhdA5/rn6lydCwAAAAAAAAAAX12TVi2ZVFNHAAAAAABJRU5ErkJggg=='); background-size:auto 100%; background-position: top left; background-repeat: no-repeat; }

  .submenu-close {width: 15px; background: transparent; right: 20px; z-index: 4; position: fixed; font-size: 26px; top:8px; padding-top: 0;}

  .page-aside img {margin-bottom: 36px;}
  
  .two-column {-webkit-columns: initial; -moz-columns: initial; columns: initial;}
 

  /* ==========================================================================
    Page : Team
     ========================================================================== */      
  .page-team .hero.centered .hero-caption {position: absolute; -webkit-transform: none; transform:none; top:auto; margin: auto; padding: 46px 26px ; text-align: left; bottom: 0;}

  /* ==========================================================================
    Page : About
     ========================================================================== */      
  .page-about .hero-caption {position: absolute;}

  /* ==========================================================================
    Page : Blog
     ========================================================================== */      
  
  .hasSidebar .blog-sidebar {position: fixed; top:0; left:0; bottom: 0; right: 0; -webkit-transform: translateX(-100%); transform: translateX(-100%); margin: 0; z-index: 3; padding: 70px 26px; overflow: scroll; -webkit-overflow-scrolling: touch; background: #161b20;}
  .close-sidebar {display: inline-block;}
  .blog-sidebar h1 {display:none;}
  .blog-sidebar-calendar {display: none;}
  .show-blog-sidebar .hasSidebar .blog-sidebar {-webkit-transform: translateX(0%); transform: translateX(0%); }
  
  .section-blog-listing {margin-top: -76px;}
  .section-blog-listing .blog-post {margin-left: 0;}
  .section-blog-listing .blog-author, .section-blog-listing .blog-categories {display: none;}
  .section-blog-listing .blog-meta {border-bottom: 0; margin-bottom: 6px;}
  .section-blog-listing .blog-post {padding: 30px;}
  .blog-post h1 {margin-bottom: 26px;}
  
  /* Mobile Images */
  .blog-article-image {display:none; }
  .blog-article-image-mobile {display: block; float: none; margin-bottom: 26px;}
  .blog-article-image-mobile-container {margin: -30px -30px 30px -30px; display: block;}  
  
  /* Mobile Header */
  .blog-mobile-header {background: #171c21; height: 246px; padding: 0 26px; padding-top: 110px; color: #FFF; position: relative; display: block;}
  .blog-toggle-sidebar {background: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid #676773; color: #676773; line-height:42px; text-align: center; position: absolute; top:0; bottom: 0; margin: auto; right: 26px; }
  
  /* Single */
  .section-blog-article {padding-top: 60px !important; padding-bottom: 0;}
  .blog-article-content .blog-meta {padding-bottom: 10px;}
  .blog-article-content .blog-author, .blog-article-content .blog-categories, .blog-article-content .blog-date {display: block;}
  .blog-article-content .blog-article-image-mobile-container {margin: 0 -26px 18px -26px;}
   
  .blog-author-footer {margin: 60px -26px 0 -26px; padding: 60px 26px;} 
  .blog-author-footer img {float: none; margin: auto auto 30px auto;}
  
  /* ==========================================================================
    Page : Contact
     ========================================================================== */        
  .section-getintouch .container {padding: 26px;}
    
  /* ==========================================================================
    Case Study - Listing
     ========================================================================== */        
  .page-case-studies .listing {margin-top: -92px;}
  .case-study-listing {padding-bottom: 37px;}
  .case-study {padding: 30px 30px 114px 30px;}
  .case-study .button {left:30px; right:30px; bottom: 30px;}

  .listing {margin-left: 0; margin-right: 0;}
  .listing article {width: calc(100% - 10px);}

  .layout-clients {padding: 40px 0;}
  
  /* ==========================================================================
    Case Study - Detail
     ========================================================================== */        
  .section-case-study {padding-top: 0;}
  .hasSidebar .case-study-content { padding: 0 0 60px 0;}
  .case-study-content .layout {padding: 0 0 30px 0; margin-bottom: 30px;}
  .case-study-content .layout-gallery {margin-left: -10px; margin-right: -10px; padding-top: 0; margin-top: -60px;}
  .case-study-content .layout-gallery a {padding: 10px; width: 33.333%; margin: 0;}
  .case-study-content .layout-quote {padding-top: 30px;}
  
  .layout-casestudy-metrics h2:before, .layout-text h2:before {font-size: 40px; height: 40px; line-height: 40px; top:0;}
  .layout-text h2, .layout-casestudy-metrics h2 {padding-left: 54px; margin-bottom: 22px; line-height: 40px;} 
  .layout-quote blockquote {text-indent: 54px;}
  .layout-quote blockquote:before {text-indent: 0; top:14px;}
  .layout-metrics ul {display: block;}

  .share-print {position: absolute; top:90px; right:0; margin: 0;}
  .share-print span {display: none;}
  .share-print a {width: 60px; height: 50px; line-height: 50px; text-align: center;}
  .share-print a:before {padding: 0;}

  /* ==========================================================================
    Footer
     ========================================================================== */
  .footer .container {padding: 48px 26px;}
  .footer h3:after {display: none;}
  .footer-menu {width: 50%;} /*float: none; clear: both; overflow: auto; padding-bottom: 40px;*/
  .footer-menu a {width: 70%; float: right;}
  .footer small {right: 26px;}

  /* ==========================================================================
    Get Started
     ========================================================================== */
  .section-getstarted:before {display: none}
  .section-getstarted article {width: 100%; padding: 36px 0;}
  .section-getstarted h2 {margin-bottom: 20px;}
  .section-getstarted ul {margin-bottom: 42px;}
    
  .section-getstarted .getstarted-signup {border-bottom: 1px solid #26263a; margin-left: -26px; margin-right: -26px; padding-left: 26px; padding-right: 26px; width: auto;}
  .getstarted-install .button:last-of-type {margin-bottom: 36px;}
  
  .getstarted-products {margin-bottom: 20px; font-size: 14px;}
  .getstarted-products div {margin-right: 26px;}
  
}

@media only screen and (max-width : 768px) {

  /* ==========================================================================
    Page
     ========================================================================== */      
  .hasSidebar .page-content {padding-right: 0;}

  /* ==========================================================================
    Page : Contact - One Column
     ========================================================================== */        
  .location {padding: 0; position: relative; margin-bottom: 44px; }
  .locations-listing .block {width: 100%; float: none; }
  .location-address {width: 100%; padding: 0;}
  .location-address address {padding: 40px 0; text-align: center;}
  .location-image {width: 120px; height: 120px; overflow: hidden; border: 3px solid #FFF; left:14px; top:-30px; z-index: 1; padding: 0; bottom: auto;}
  .location-map {height: 242px;}

}

/* ==========================================================================
  Cross Browser
   ========================================================================== */
.browserupgrade {padding: 10px; position: fixed; bottom: 0; left:0; right:0; font-size: 13px; text-align: center; color: #000; background-color: #FFF;}
.browserupgrade a {color: #000; text-decoration: underline;}

/* ==========================================================================
  Slick Slider
   ========================================================================== */
.slick-slider{position:relative;display:block;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}.slick-list{position:relative;display:block;overflow:hidden;margin:0;padding:0}.slick-list:focus{outline:none}.slick-list.dragging{cursor:pointer;cursor:hand}.slick-slider .slick-track,.slick-slider .slick-list{-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);-o-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}.slick-track{position:relative;top:0;left:0;display:block}.slick-track:before,.slick-track:after{display:table;content:''}.slick-track:after{clear:both}.slick-loading .slick-track{visibility:hidden}.slick-slide{display:none;float:left;height:100%;min-height:1px}[dir='rtl'] .slick-slide{float:right}.slick-slide img{display:block}.slick-slide.slick-loading img{display:none}.slick-slide.dragging img{pointer-events:none}.slick-initialized .slick-slide{display:block}.slick-loading .slick-slide{visibility:hidden}.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}.slick-arrow.slick-hidden{display:none}


/* ==========================================================================
  venobox.css
   ========================================================================== */
.vbox-overlay *, .vbox-overlay *:before, .vbox-overlay *:after{
    -webkit-backface-visibility: hidden;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}
/* ------- overlay: change here background color and opacity ----- */
.vbox-overlay{
    background: #0b0b23;
    background: rgba(0,0,0,0.85); 
    width: 100%;
    height: auto;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 9999;
    opacity: 0;
    overflow-x: hidden;
    overflow-y: auto;

}

/* ----- navigation ----- */
.vbox-next, .vbox-prev{ position: fixed; top: 50%; color: #fff; width: 50px; height: 50px; margin-top: -25px; font-size: 0; text-align: center;}
.vbox-prev {left: 0;}
.vbox-next {right: 0;}
.vbox-prev:before, .vbox-next:before {font-family: 'tyk'; font-size: 26px; width: 50px; height: 50px; line-height: 50px; text-align: center;}
.vbox-prev:before {content: '\e801';}
.vbox-next:before {content: '\e802';}





/* ==========================================================================
  style.css
   ========================================================================== */
body.actenzo-help.collapse {display: block;}
.actenzo-help .aside-submenu {padding-top: 0;}
.actenzo-help .st-treed {right: 0; width: auto; font-size: 14px;}
.actenzo-help .st-treed ul {margin: 10px 0;}
.actenzo-help .st-treed ul:before {background: transparent; top: 0px; left: -21px; bottom: -5px;}
.actenzo-help .st-treed li {margin-bottom: 10px; padding-left: 25px;}
.actenzo-help .st-treed,
.actenzo-help .st-treed li {background: #f5f5f5;}
.actenzo-help .st-treed .st-file:after {width: 5px; height: 5px; top: 8px; left: 8px;}
.actenzo-help .st-treed .st-open:before,
.actenzo-help .st-treed .st-collapsed:before {padding-left: 0; font-size: 14px;}
.actenzo-help .st-treed .st-file.active {background-color: #e5e5e5; border-width: 3px 0; border-style: solid; border-color: #e5e5e5;}
.actenzo-help .docs-navigation #nextArticle,
.actenzo-help .docs-navigation #previousArticle {font-family: "Montserrat", Helvetica, Arial, serif !important;}
.actenzo-help .docs-navigation #nextArticle.fa-angle-right:before,
.actenzo-help .docs-navigation #previousArticle.fa-angle-left:before {font: 900 normal normal 16px/1 "Font Awesome 5 Free";}
.actenzo-help .docs-navigation #nextArticle.fa-angle-right:before {float: right; padding: 0 0 0 5px;}
.actenzo-help .docs-navigation #previousArticle.fa-angle-left:before {float: left; padding: 0 5px 0 0;}

@media only screen and (max-width : 460px) {
  .actenzo-help .quick.navbar-fixed-top .quick-access ul.navbar-left {text-align: left;}
}