html {font-size: 62.5%; }
body { font-family: "Titillium Web"; padding: 0; margin: 0; font-size: 1.5rem; }
ul {list-style: '- '; margin: 0;}
.blast {display: inline-block; }
#a1-grid-bg, #a2-grid-bg, #a3-grid-bg, #a4-grid-bg {background: rgba(0,0,0,1); }

.a2w span {display: none; }
.a2-line-wrap, .lb {display: none;}

.dg.ac {position: absolute !important; }

#interactive-container {-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}

#interactive-container {position: relative; width: 100%; height: calc(100vh - 100px);overflow: hidden; }


#home-01 {position: relative;}
.logo-outline {height: 180px !important; }
#tfl-logo-v1 {display: block; width: 70%; margin: 0 auto; fill: rgba(255,255,255,1); align-self: center; justify-self: center; animation: move2 3s ease-in-out infinite; }
#tfl-logo-path-2 {fill: #c27329;}

#c1, #c2, #c3, #c4 {width: 100%; height: calc(100vh - 100px); }

#tfl-body {background: #eee; display: grid; grid-template-columns: 22% 58% 20%; }
#tfl-left {margin:40px 40px 40px 0; }
.tfl-left {color: #fff; padding: 1.5em; box-shadow: inset 0 -4px 0 rgba(0,0,0,0.2); margin-bottom: 2em; }
#tfl-left-1 {background: #c27329;}
#tfl-left-2 {background: #111; box-shadow: 0px 4px 0 rgba(194,115,42,1);}
#tfl-left-2-title {text-align: center;}
#tfl-left-3 {background: #fafafa; color: #111;}
#tfl-left-1.a2-left {font-size: 1.8rem;}
#tfl-left-2.a2-left {font-size: 1.8rem;}

#tfl-center {margin: 40px 20px;}
.tfl-center {margin: 0 0 2em; padding: 1em; background: #;}

#tfl-right {margin: 40px 0 40px 40px;}
.tfl-right {padding: 1.5em; box-shadow: inset 0 -4px 0 rgba(0,0,0,0.2); margin: 2em 0; }
#tfl-right-1 {background: #fafafa; }
.tfl-membership {text-align: right; font-weight: 300;}
.tfl-membership img {max-width: 200px; max-width: 100%; padding-top: 1rem; display: block; }
#tfl-right-1.tfl-membership {background: #111; color: #fafafa; box-shadow: inset 0 -4px 0 rgba(194,115,42,1);}
#tfl-right-2.tfl-membership {background: #fafafa; color: #111; box-shadow: inset 0 -4px 0 rgba(0,0,0,0.2);}
#tfl-right-3.tfl-membership {background: #fafafa; color: #111; box-shadow: inset 0 -4px 0 rgba(0,0,0,0.2);}


 
.about-us-desc {display: grid; grid-template-columns: 30% 70%; background: #fafafa;}
.about-us-desc-1 {font-size: 3rem; font-weight: 100; padding: 0 1em; align-self: center; justify-self: center;}
.about-us-desc:nth-child(1) {box-shadow: inset 4px 0 0 #626262;}
.about-us-desc:nth-child(2) {box-shadow: inset 4px 0 0 #c6c6c6;}
.about-us-desc:nth-child(3) {box-shadow: inset 4px 0 0 #787878;}
.about-us-desc:nth-child(4) {box-shadow: inset 4px 0 0 #a9a9a9;}
.about-us-desc:nth-child(5) {box-shadow: inset 4px 0 0 #646464;}
.about-us-desc:nth-child(6) {box-shadow: inset 4px 0 0 #919191;}
.about-us-desc:nth-child(7) {box-shadow: inset 4px 0 0 #c27329; background: rgba(194,115,41,0.1);}
.about-us-desc i {font-style: normal; font-weight: 400; background: rgba(0,0,0,0.12);}

.tfl-we-are-different-list ul {list-style: none; padding: 0;}
.tfl-we-are-different-list li {padding: 0; box-shadow: 0 -1px 0px rgba(194,115,42,1); margin: 1.2em 0; font-weight: 200;}

.about-us-people {padding: 3em 4em 4em; box-shadow: inset 4px 0 0 #c27329; background: #fafafa;}
.about-us-people-desc {margin: 2em 0 0;}
.about-us-people-desc img {width: 120px; float: left; margin: 0 2em 1em 0; box-shadow: 0 1px 0 rgba(170,170,170,1)}
.about-us-people-name {font-size: 4rem; line-height: 5rem;}
.about-us-people-name span {display: block; font-size: 2rem; font-style: italic;}
.logo-img img {box-shadow: none !important;}

.the-process-desc {margin: 0 3em 2em; text-align: justify; font-weight: 500; font-size: 1.2em; padding: 0 1em; }
.the-process-desc:nth-child(1) { box-shadow: inset 4px 0 0 rgba(194,112,42,1);}
.the-process-desc:nth-child(2) { box-shadow: inset -4px 0 0 rgba(194,112,42,1);}

.a3-center-tab {display: grid; grid-template-columns: 60% 40%; border-top: 5px solid #c37329; background: #fafafa; padding: 0 0 2em 0; text-align: justify; hyphens: auto; box-shadow: inset 0 -4px 0 rgba(0,0,0,0.12);}
#tfl-the-process-11 {grid-column: 1 / span 2;}
#tfl-the-process-12 {background: #444; color: #fafafa;  box-shadow: 0 2px 0 rgba(0,0,0,0.82); margin: 1em 1em 1em 0;}
#tfl-the-process-13 {background: #ddd; font-size: 0.9em;  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.2); margin: 1em 1em 1em 0;} 
#tfl-the-process-14 {grid-row: 2 / span 3; grid-column: 2; font-weight: 200; background: rgba(194,115,42,1); color: #fafafa; align-self: start; box-shadow: inset 0 -2px 0 rgba(0,0,0,0.2); margin: 1em 0 1em 2em;}

.the-process-2 {font-size: 1.5rem; padding: 1.6em;}
#tfl-the-process-21 {grid-column: 1 / span 2;}
#tfl-the-process-22 {background: #444; color: #fafafa;  box-shadow: 0 2px 0 rgba(0,0,0,0.82); margin: 1em 1em 1em 0;}
#tfl-the-process-23 {background: #ddd; font-size: 0.9em;  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.2); margin: 1em 1em 1em 0;} 
#tfl-the-process-24 {grid-row: 2 / span 3; grid-column: 2; font-weight: 200; background: rgba(194,115,42,1); color: #fafafa; align-self: start; box-shadow: inset 0 -2px 0 rgba(0,0,0,0.2); margin: 1em 0 1em 2em;}

#tfl-the-process-31 {grid-column: 1 / span 2;}
#tfl-the-process-32 {background: #444; color: #fafafa;  box-shadow: 0 2px 0 rgba(0,0,0,0.82); margin: 1em 1em 1em 0;}
#tfl-the-process-32 span {display: block; font-weight: 200; padding-top: 1em;}
#tfl-the-process-33 {background: #ddd; font-size: 0.9em;  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.2); margin: 1em 1em 1em 0; } 
#tfl-the-process-34 {font-weight: 200; background: rgba(194,115,42,1); color: #fafafa; align-self: start; box-shadow: inset 0 -2px 0 rgba(0,0,0,0.2); margin: 1em 0 1em 2em; align-content: center;}
#tfl-the-process-35 {font-weight: 200; color: #fafafa; align-self: middle; box-shadow: inset 0 -2px 0 rgba(0,0,0,0.2); margin: 0 1em 1em; font-size: 1.05em; background: rgba(0,0,0,0.65); border-radius: 50%; width: calc(20vw - 40px - 3em); height: calc(20vw - 40px - 3em); justify-self: center; display: grid; align-content: center; padding: 1em; text-align: center; hyphens: none;}

#tfl-the-process-4 {grid-template-columns: 100%;}
#tfl-the-process-41 a {color: #333; text-decoration: none; box-shadow: inset 0 -3px 0 rgba(194,115,41,0.5);}
#tfl-the-process-41 a:hover {color: #c27329; box-shadow: none;}
#tfl-the-process-42 {padding: 0; justify-self: center;}
#tfl-the-process-43 {background: #ddd; font-size: 1em;  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.2); margin: 1em 1em 1em 0; width: 70%; hyphens: none;} 
#tfl-the-process-44 {align-self: start; margin: 1em 0 1em 2em; align-content: center; padding: 0;}
#tfl-the-process-44 iframe {width: 100%; height: 22vw; border: none; padding: 0;}

#tfl-the-process-11, #tfl-the-process-21, #tfl-the-process-31, #tfl-the-process-41 {font-size: 2.5rem; margin: 0;}
.the-process-1, .the-process-2, .the-process-3, .the-process-4 {font-size: 1.5rem; padding: 1.6em;}



@font-face {font-family: 'impact_labelregular'; src: url('/http/futures-lab.com/perch/resources/fonts/Impact_Label-webfont.eot'); src: url('/http/futures-lab.com/perch/resources/fonts/Impact_Label-webfont.eot?#iefix') format('embedded-opentype'), url('/http/futures-lab.com/perch/resources/fonts/Impact_Label-webfont.woff') format('woff'), url('/http/futures-lab.com/perch/resources/fonts/Impact_Label-webfont.ttf') format('truetype'), url('/http/futures-lab.com/perch/resources/fonts/Impact_Label-webfont.svg#impact_labelregular') format('svg'); font-weight: normal; font-style: normal; }

.small-only-break {display: none;}

.eventtype {display: flex; width: 100%; text-align: left; font-weight: 400; align-items: center; font-size: 1.05em; }
.eventtype-fxl0 {color: #fa1933; font-family: "impact_labelregular" !important; font-size: 1.75em; box-shadow: 3px 4px 2px rgba(0,0,0,0.4); line-height: 1; justify-self: left; margin: 1em;}
.eventtype-fxl1 {padding: ; color: #333; font-size: 1em; font-weight: 700; justify-self: left;}

#eventtype-11 {color: #fa1933 !important; -ms-transform: rotate(-7deg); -webkit-transform: rotate(-7deg);transform: rotate(-7deg);}
#eventtype-21 {color: #ad1f28 !important; -ms-transform: rotate(-2deg); -webkit-transform: rotate(-2deg);transform: rotate(-2deg);}
#eventtype-31 {color: #ad0f51 !important; -ms-transform: rotate(4deg); -webkit-transform: rotate(4deg);transform: rotate(4deg);} 
#eventtype-41 {color: #ad0079 !important; -ms-transform: rotate(-1deg); -webkit-transform: rotate(-1deg);transform: rotate(-1deg);}
#eventtype-51 {color: #ad0058 !important; -ms-transform: rotate(7deg); -webkit-transform: rotate(7deg);transform: rotate(7deg);}
#eventtype-61 {color: #ad0037 !important; -ms-transform: rotate(-5deg); -webkit-transform: rotate(-5deg);transform: rotate(-5deg);}
#eventtype-71 {color: #ad0016 !important; -ms-transform: rotate(3deg); -webkit-transform: rotate(3deg);transform: rotate(3deg);}
#eventtype-81 {color: #fa1933 !important; -ms-transform: rotate(-7deg); -webkit-transform: rotate(-7deg);transform: rotate(-7deg);}
#eventtype-91 {color: #ad2e00 !important; -ms-transform: rotate(5deg); -webkit-transform: rotate(5deg);transform: rotate(5deg);}
#eventtype-11:hover, #eventtype-21:hover, #eventtype-31:hover, #eventtype-41:hover, #eventtype-51:hover, #eventtype-61:hover, #eventtype-71:hover, #eventtype-81:hover, #eventtype-91:hover {-ms-transform: none; -webkit-transform: none; transform: none; }

.a3-tabs, .input {display: grid; grid-template-columns: repeat(4, 25%); justify-content: center;}
.input {position: absolute; opacity: 0;}
.a3-label {text-align: center; width: calc(14.2vw - 10px - 1em); height: calc(14vw - 10px - 1em); border-radius: 50%; margin: 2em 0.5em 1em; padding: 0; font-weight: 300; font-size: 2.1em; background: #ddd; color: #595959; transition: background 0.1s, color 0.1s; box-shadow: inset 0 -3px 0 rgba(0,0,0,0.1); display: grid; align-content: center; line-height: 1.2; font-weight: 200;}
.a3-label:hover {background: rgba(194,115,41,0.25);}
.a3-label:active {background: rgba(194,115,41,0.35);}
.input:focus + .a3-label {z-index: 1;}
.input:checked + .a3-label {background: rgba(194,115,41,0.95); color: #fff;}
.a3-field {display: none; padding: 20px 0 30px; grid-column: 1 / span 4;}

#tfl-frontline-panels {display: grid; grid-template-columns: 30% 40% 30%; margin:0; background: #fafafa; }
.tfl-processes-fp {padding: 1em; }
.tfl-processes-fp span {font-weight: 600; display: block;}

#tfl-frontline-panels-0 {font-size: 2em; grid-column: 1 / span 2; text-align: center; }
#tfl-frontline-panels-1 {grid-column: 1 / span 2; font-size: 2em; }
#tfl-frontline-panels-2 {grid-column: 1 / span 2; }
#tfl-frontline-panels-8 {grid-row: 1 / span 2; grid-column: 3; font-size: 1.1em; align-self: center; background: #c27329; color: #fff; text-align: right; font-weight: 100; letter-spacing: 2px; box-shadow: inset 0 2px 0 rgba(0,0,0,0.12) }
#tfl-frontline-panels-1 {font-size: 1.2em; }
#tfl-fp-container {}

#tfl-right-the-science-of-foresight {text-align: right;}
#tfl-right-the-science-of-foresight span {font-weight: 600; display: block; font-size: 1.2em; }
#tfl-right-the-science-of-foresight i {background: rgba(194,115,42,0.32); font-style: normal;}
.tfl-6stages-img {max-width: calc(100% - 4em); margin: 2em; }

/* Our clients */

#a4-label-10 { margin: 1em 0 4em 5em; font-weight: 600;}
.a4-label-10 a { color: #333; text-decoration: none;box-shadow: inset 0 -3px 0 rgba(194,115,41,0.5);}
.a4-label-10 a:hover {color: #c27329; box-shadow: none;}

#tfl-recommendations {font-size: 0.9em; }
.tfl-recommendation-title {font-weight: 600; font-size: 1.2em; margin-top: 3em !important;}
.tfl-quote {margin: 20px; padding: 10px;} 
.tfl-quote:nth-child(even) {box-shadow: 4px 0 0 #c27329; text-align: right; background: rgba(194,115,42,0.09);}
.tfl-quote:nth-child(odd) {box-shadow: -4px 0 0 #c27329; text-align: left; background: rgba(194,115,42,0.15);}
.quoteauthor {font-weight: 600;}

.tfl-casestudy {display: grid; padding: 1em; margin: 1em; }
.tfl-casestudy:nth-child(even) {text-align: right; box-shadow: 4px 0 0 rgba(0,0,0,0.20); grid-template-columns: 30% 70%; background: #fafafa;}
.tfl-casestudy:nth-child(odd) {text-align: left; box-shadow: -4px 0 0 rgba(0,0,0,0.15); grid-template-columns: 70% 30%; background: #fefefe;}
.tfl-casestudy:nth-child(odd) .tfl-client-logo {grid-column: 2; grid-row: 1;}
.tfl-casestudy:nth-child(odd) .tfl-client-desc {grid-column: 1; grid-row: 1;}
.tfl-client-logo {padding: 1em; align-self: center;}
.tfl-client-logo img {max-width: 100% !important; }
.tfl-client-logo-double img {padding: 1em 0;}
.tfl-client-name {font-weight: 700;}
.tfl-client-desc {font-size: 0.9em;}

.a4-tabs, .input {display: grid; justify-content: center; grid-template-columns: repeat(3,33.3%);}
.input {position: absolute; opacity: 0;}
.a4-label {justify-self: center; text-align: center; width: calc(14.2vw - 10px - 1em); height: calc(14vw - 10px - 1em); border-radius: 50%; margin: 1rem; padding: 0; font-weight: 300; font-size: 2.7rem; background: #ddd; color: #595959; transition: background 0.1s, color 0.1s; box-shadow: inset 0 -3px 0 rgba(0,0,0,0.1); display: grid; align-content: center; line-height: 1.2; font-weight: 200;}
.a4-label:hover {background: rgba(194,115,41,0.25);}
.a4-label:active {background: rgba(194,115,41,0.35);}

.input:focus + .a4-label {z-index: 1;}
.input:checked + .a4-label {background: rgba(194,115,41,0.95); color: #fff;} 
.a4-field {display: none; padding: 20px 30px 30px; grid-column: 1 / span 3;}
#a4-label-1 {justify-self: end;}
#a4-label-3 {justify-self: start;}

 
/* charts*/
.lines {fill: none; stroke: #222; stroke-width: 1px;}
.chart-title{fill: #111; font-size: 1em; font-weight: 600; }
#a4-chart-1, #a4-chart-2 {border-bottom: 1px solid #444;}
#a4-chart-1, #a4-chart-2, #a4-chart-3 {width: 50vw; padding: 1vw; }

/* News */
#list-of-tags {display: inline; font-size: 0.8em; font-weight: 600; }
#list-of-tags ul {display: inline; padding-left: 0;}
#list-of-tags li {display: inline; list-style: none; } 
#list-of-tags li:not(:last-child):after {content:','; } 
#list-of-tags a {color: #555; text-decoration: none !important; font-style: italic;}  
.newsfeed {list-style: none; margin:0; padding: 0 1rem;}
.newsfeed-entry {padding: 0; margin: 0 0 3em; display: grid; }
.newsfeed-entry:nth-child(odd) {grid-template-columns: 70% 30%; box-shadow: inset 4px 0 0 #969696; background: #fafafa;}
.newsfeed-entry:nth-child(even) {grid-template-columns: 30% 70%; box-shadow: inset -4px 0 0 #969696; background: #fefefe;}
.newsfeed-entry:nth-child(odd) .newsfeed-entry-left {grid-column: 2; grid-row: 2; }
.newsfeed-entry:nth-child(odd) .newsfeed-entry-otherleft {grid-column: 1; grid-row: 2;}
.newsfeed-entry-otherleft {text-align: justify;}
.newsfeed-top {grid-column: 1 / span 2; padding: 0 0 1em;}
.newsfeed-entry:nth-child(even) .newsfeed-top {text-align: right;}
.newsfeed-entry-title {margin: 0 0 2rem; font-size: 3rem; font-weight: 300; line-height: 1.25; background: rgba(0,0,0,0.13); padding: 1rem 3rem;}
.newsfeed-entry-title a {text-decoration: none; color: #111; }
.newsfeed-entry-title a:hover {color: #666;}
.newsfeed-entry-image {max-width:calc(100% - 2em) !important; padding: 1em; box-shadow: none !important;}
.newsfeed-entry-excerpt {} 
.newsfeed-entry-excerpt a {color: #333; text-decoration: none; box-shadow: inset 0 -3px 0 rgba(194,115,41,0.5);}
.newsfeed-entry-excerpt a:hover {color: #c27329; box-shadow: none;}
.newsfeed .list-of-cats {display: inline; font-size: 0.8em; font-weight: 600; }
.newsfeed-entry-info {display: grid; grid-template-columns: max-content max-content; align-items: center; font-size: 2rem; grid-column-gap: 1rem; grid-row-gap: 1rem;}
.newsfeed-entry-data {padding: 1px 10px; color: #888; font-style: italic; background: rgba(0,0,0,0.05); font-weight: 100; font-size: 95%; display: inline;}
.newsfeed-entry:nth-child(even) .newsfeed-entry-info {justify-content: right; }
.newsfeed-entry:nth-child(even) .newsfeed-entry-data {grid-column: 1; }
.newsfeed-entry:nth-child(even) .newsfeed-cats {grid-column: 2; grid-row: 1;}
.newsfeed-cat {color: #111; text-decoration: none !important; font-weight: 500; padding: 1px 1rem 1px 3rem;} 
.newsfeed-cats {background: rgba(194,115,41,0.28);}
.newsfeed-entry:nth-child(even) .newsfeed-cats {float: right;}
.newsfeed-readmore {font-weight: 600;}
.newsfeed-entry-left {padding: 2rem;}
.newsfeed-entry-otherleft {padding: 2rem;}
.newsfeed-paging {text-align: center; font-weight: 600; font-size: 0.9em; } 
.newsfeed-paging a {color: #333; text-decoration: none; box-shadow: inset 0 -3px 0 rgba(194,115,41,0.5);}
.newsfeed-paging a:hover {color: #c27329; box-shadow: none;}

.article-top {padding: 0 0 1em;}
.article-title {margin: 0 0 2rem; font-size: 3.4rem; font-weight: 400; line-height: 1.25; padding: 1rem;}
.article-title a {text-decoration: none; color: #111; }
.article-title a:hover {color: #666;}
.article-info {display: grid; grid-template-columns: max-content max-content; align-items: center; font-size: 2rem; grid-column-gap: 1rem; grid-row-gap: 1rem; justify-content: left;}
.article-entry-data {padding: 1px 10px; color: #888; font-style: italic; background: rgba(0,0,0,0.05); font-weight: 100; font-size: 95%; display: inline;}
.article-cat {color: #111; text-decoration: none !important; font-weight: 500; padding: 1px 10px; } 
.article-cats {background: rgba(194,115,41,0.28);}
.description .e-content {text-align: justify;}
.post img {max-width: 70%; max-height: 50vh; margin: 0 2em 1em 0; box-shadow: 0 1px 0 rgba(170,170,170,1); display: block; }
.post article {max-width: 600px; margin: 0 auto; }
.post-text {display: block;}
.post-text img { margin: 1em 0;}

/* Archive pages */
.archive-title {font-size: 4rem; text-align: center; margin: 0 0 2rem; font-weight: 200;}
.archive-title-span {background: rgba(194,115,41,0.12); padding: 0 6px; }

/* Sidebar Archives*/
.sidebar-cat {background: #c27329; color: #fff; text-decoration: none !important; font-weight: 300; padding: 1px 10px; font-size: 1.5rem; box-shadow: inset 2px 0 0 rgba(0,0,0,0.25);}
.sidebar-cats li {padding: 2px 0; list-style: none !important; margin: 0.5rem 1rem; display: inline-block;}
#news-links {margin-bottom: 40px; text-align: right; background: #ddd; padding: 0 0 1rem;box-shadow: 0 4px 0 rgba(0,0,0,0.27);}
#news-links-title {font-size: 2rem; padding: 0.5rem 1.5rem; background: #333; color: #fafafa; font-weight: 200; box-shadow: 0 2px 0 rgba(0,0,0,0.3); display: inline-block; top: -0.5rem; position: relative;}
.home-news-links .sidebar-cat {font-size: 2.2rem;}
.home-news-links .sidebar-cats li {margin: 1rem;}

/* menu */
#tfl-menu {height: 100px; }
#tfl-menu nav {height: 100%; width: 70%; padding: 0 15%; display: grid; grid-template-columns: 40% 15% 15% 15% 15%; grid-template-rows: 100%; justify-items: center; background: rgba(0,0,0,1); grid-row-gap: 1rem; grid-column-gap: 1rem;} 
.tfl-nav {align-self: center; margin: 0; display: grid; justify-items: center; border-radius: 0px 0px 7px 4px; width: 100%; padding: 1em 0;}
#tfl-nav-logo img {max-width: 60%; max-width: 220px; padding: 1%;}
#tfl-nav-logo svg {max-width: 40%; padding: 1%;}
#tfl-menu a {color:#f5eadf; text-decoration: none; font-family: 'titillium web'; font-weight: 600; text-transform: uppercase;}
#tfl-menu a:hover {color: #fff; }
#tfl-menu a:active {color: #c27329;}
#tfl-logo {width: calc(200px + 25vh); }
.menu-1-active #tfl-nav-news {background: #c27329; box-shadow: inset 2px -4px 0 rgba(0,0,0,0.4);}
.menu-2-active #tfl-nav-about-us {background: #c27329; box-shadow: inset 2px -4px 0 rgba(0,0,0,0.4);}
.menu-3-active #tfl-nav-the-process {background: #c27329; box-shadow: inset 2px -4px 0 rgba(0,0,0,0.4);}
.menu-4-active #tfl-nav-our-clients {background: #c27329; box-shadow: inset 2px -4px 0 rgba(0,0,0,0.4);}

/* TFL logo animation in menu */
#tfl-logo-c1 {fill: #d6d6d6;} #tfl-logo-c2 {fill: #a9a9a9;} #tfl-logo-t2 {fill: #949494;} #tfl-logo-c3 {fill: #787878;} #tfl-logo-c4 {fill: #595959;}#tfl-logo-t1, #tfl-logo-c5 {fill: #c27329;} #tfl-logo-c6 {fill: #333;}
@keyframes tfl-logo-c1 {0%{fill:#a9a9a9;} 20%{fill:#787878;} 40%{fill:#595959;} 60%{fill:#c27329;} 80%{fill:#d6d6d6;} }  @keyframes tfl-logo-c2 {4%{fill:#787878;} 24%{fill:#595959;} 44%{fill:#c27329;} 64%{fill:#333;} 84%{fill:#a9a9a9;} }  @keyframes tfl-logo-c3 {8%{fill:#595959;} 28%{fill:#c27329;} 48%{fill:#333;} 68%{fill:#d6d6d6;} 88%{fill:#787878;} }  @keyframes tfl-logo-c4 {12%{fill:#c27329;} 32%{fill:#333;} 52%{fill:#d6d6d6;} 72%{fill:#a9a9a9;} 92%{fill:#595959;} }  @keyframes tfl-logo-c5 {16%{fill:#333;} 36%{fill:#d6d6d6;} 56%{fill:#a9a9a9;} 76%{fill:#787878;} 96%{fill:#c27329;} }  @keyframes tfl-logo-c6 {20%{fill:#d6d6d6;} 40%{fill:#a9a9a9;} 60%{fill:#787878;} 80%{fill:#595959;} 100%{fill:#333;} }
#tfl-logo:hover #tfl-logo-c1 {animation: tfl-logo-c1 1.2s;} #tfl-logo:hover #tfl-logo-c2 {animation: tfl-logo-c2 1.2s;} #tfl-logo:hover #tfl-logo-c3 {animation: tfl-logo-c3 1.2s;} #tfl-logo:hover #tfl-logo-c4 {animation: tfl-logo-c4 1.2s;} #tfl-logo:hover #tfl-logo-c5 {animation: tfl-logo-c5 1.2s;} #tfl-logo:hover #tfl-logo-c6 {animation: tfl-logo-c6 1.2s;}
.tfl-logo-c {animation-timing-function: ease-in-out;}

/* infobar under the menu */
#tfl-infobar {background: #c27329; text-align: right; padding: 1em 2em; color: #fff; display: grid; grid-template-columns: 80% 20%; box-shadow: inset 0 -4px 0 rgba(0,0,0,0.2); font-size: 0.85em;}
#tfl-infobar-contacts {justify-self: start;}
#tfl-infobar-icons {justify-self: start; }
#tfl-infobar span {padding: 0 10px; text-align: left; }
#tfl-infobar i {padding: 0 10px; font-size: 1.2em; color: #fafafa;}
.tfl-infobar-1 {font-weight: 600; }
.infobar-c {font-size: 0.6em !important; color: #d6d6d6; }

/* Derek's favourite quotes*/
#tfl-dereks-fav-quotes {background: #111; color: #fafafa; padding: 2em; box-shadow: 0px 4px 0 rgba(194,115,42,1); font-size: 0.8em; min-height: 160px;}
.fav-quote-display {display: block;}
.fav-quotes {display: grid; grid-template: auto auto / auto; align-content: center; height: 160px;}
.fav-the-quote {font-style: italic; font-size: 1.3em; }
.fav-the-aut {justify-self: end;}
.fav-quotes-small {font-size: 90%;}

#footer {display: grid; grid-template-columns: 60% 10% 30%; background: #111; }
#tfl-dereks-quotes {background: #111; color: #fafafa; padding: 3rem; font-size: 0.8em;}
.fav-quote-derek-display {display: block;}
.fav-derek-quotes {display: grid; grid-template: auto auto / auto; align-content: center; }
.fav-derek-quote {font-weight: 200; font-size: 1.3em; }
.fav-derek-aut {justify-self: end;}
#footer-info {color: #999; justify-self: end; align-self: end; grid-column: 3; padding: 3rem; font-weight: 700; font-size: 90%; text-align: right;}
#footer-info a {color: #999; text-decoration: none;}
.footer-link-webdesign {color: #999; text-decoration: none; font-weight: 200;}

.close-button {color: #eee; width: 245px; border-radius: 2px 0 0 20px;}
#interactive-call {position: absolute; max-width: 205px; top: 30px; right: 20px; }
@keyframes tfl-call-c1 {0%{fill: #d6d6d6;} 4%{fill: #a9a9a9;} 8%{fill: #787878;} 12%{fill: #595959;} 16%{fill: #c27329;} 20%{fill: #333;} 24%{fill: #d6d6d6;} 28%{fill: #a9a9a9;} 32%{fill: #787878;} 36%{fill: #595959;} 40%{fill: #c27329;} 44%{fill: #333;} 48%{fill: #d6d6d6;} 52%{fill: #a9a9a9;} 56%{fill: #787878;} 60%{fill: #595959;} 64%{fill: #c27329;} 68%{fill: #333;} 72%{fill: #d6d6d6;} 76%{fill: #a9a9a9;} 80%{fill: #787878;} 84%{fill: #595959;} 88%{fill: #c27329;} 92%{fill: #333;} 96%{fill: #d6d6d6;} 100%{fill: #a9a9a9;} } @keyframes tfl-call-c2 {0%{fill: #a9a9a9;} 4%{fill: #787878;} 8%{fill: #595959;} 12%{fill: #c27329;} 16%{fill: #333;} 20%{fill: #d6d6d6;} 24%{fill: #a9a9a9;} 28%{fill: #787878;} 32%{fill: #595959;} 36%{fill: #c27329;} 40%{fill: #333;} 44%{fill: #d6d6d6;} 48%{fill: #a9a9a9;} 52%{fill: #787878;} 56%{fill: #595959;} 60%{fill: #c27329;} 64%{fill: #333;} 68%{fill: #d6d6d6;} 72%{fill: #a9a9a9;} 76%{fill: #787878;} 80%{fill: #595959;} 84%{fill: #c27329;} 88%{fill: #333;} 92%{fill: #d6d6d6;} 96%{fill: #a9a9a9;} 100%{fill: #787878;} } @keyframes tfl-call-c3 {0%{fill: #787878;} 4%{fill: #595959;} 8%{fill: #c27329;} 12%{fill: #333;} 16%{fill: #d6d6d6;} 20%{fill: #a9a9a9;} 24%{fill: #787878;} 28%{fill: #595959;} 32%{fill: #c27329;} 36%{fill: #333;} 40%{fill: #d6d6d6;} 44%{fill: #a9a9a9;} 48%{fill: #787878;} 52%{fill: #595959;} 56%{fill: #c27329;} 60%{fill: #333;} 64%{fill: #d6d6d6;} 68%{fill: #a9a9a9;} 72%{fill: #787878;} 76%{fill: #595959;} 80%{fill: #c27329;} 84%{fill: #333;} 88%{fill: #d6d6d6;} 92%{fill: #a9a9a9;} 96%{fill: #787878;} 100%{fill: #595959;} } @keyframes tfl-call-c4 {0%{fill: #595959;} 4%{fill: #c27329;} 8%{fill: #333;} 12%{fill: #d6d6d6;} 16%{fill: #a9a9a9;} 20%{fill: #787878;} 24%{fill: #595959;} 28%{fill: #c27329;} 32%{fill: #333;} 36%{fill: #d6d6d6;} 40%{fill: #a9a9a9;} 44%{fill: #787878;} 48%{fill: #595959;} 52%{fill: #c27329;} 56%{fill: #333;} 60%{fill: #d6d6d6;} 64%{fill: #a9a9a9;} 68%{fill: #787878;} 72%{fill: #595959;} 76%{fill: #c27329;} 80%{fill: #333;} 84%{fill: #d6d6d6;} 88%{fill: #a9a9a9;} 92%{fill: #787878;} 96%{fill: #595959;} 100%{fill: #c27329;} } @keyframes tfl-call-c5 {0%{fill: #c27329;} 4%{fill: #333;} 8%{fill: #d6d6d6;} 12%{fill: #a9a9a9;} 16%{fill: #787878;} 20%{fill: #595959;} 24%{fill: #c27329;} 28%{fill: #333;} 32%{fill: #d6d6d6;} 36%{fill: #a9a9a9;} 40%{fill: #787878;} 44%{fill: #595959;} 48%{fill: #c27329;} 52%{fill: #333;} 56%{fill: #d6d6d6;} 60%{fill: #a9a9a9;} 64%{fill: #787878;} 68%{fill: #595959;} 72%{fill: #c27329;} 76%{fill: #333;} 80%{fill: #d6d6d6;} 84%{fill: #a9a9a9;} 88%{fill: #787878;} 92%{fill: #595959;} 96%{fill: #c27329;} 100%{fill: #333;}} @keyframes tfl-call-c6 {0%{fill: #333;} 4%{fill: #d6d6d6;} 8%{fill: #a9a9a9;} 12%{fill: #787878;} 16%{fill: #595959;} 20%{fill: #c27329;} 24%{fill: #333;} 28%{fill: #d6d6d6;} 32%{fill: #a9a9a9;} 36%{fill: #787878;} 40%{fill: #595959;} 44%{fill: #c27329;} 48%{fill: #333;} 52%{fill: #d6d6d6;} 56%{fill: #a9a9a9;} 60%{fill: #787878;} 64%{fill: #595959;} 68%{fill: #c27329;} 72%{fill: #333;} 76%{fill: #d6d6d6;} 80%{fill: #a9a9a9;} 84%{fill: #787878;} 88%{fill: #595959;} 92%{fill: #c27329;} 96%{fill: #333;} 100%{fill: #d6d6d6;} }
#tfl-call-c1 {animation: tfl-call-c1 10s;} #tfl-call-c2 {animation: tfl-call-c2 10s;} #tfl-call-c3 {animation: tfl-call-c3 10s;}#tfl-call-c4 {animation: tfl-call-c4 10s;} #tfl-call-c5 {animation: tfl-call-c5 10s;} #tfl-call-c6 {animation: tfl-call-c6 10s;}
.tfl-call-c {animation-timing-function: ease-in-out; fill: rgba(0,0,0,0);}


/* RESPONSIVE */

@media only screen and (max-width: 1024px) {
.eventtype {text-align: center; margin-bottom: 30px;}
.eventtype-fxl0 {margin-bottom: 1em; text-align: center; } }

@media (max-width: 900px) and (orientation: portrait) {#c1, #c2, #c3, #c4 {width: 140vw; margin: 0 -20vw 0 0;}   }
@media (max-width: 900px) and (orientation: portrait) {#c1 {width: 200vw; margin: 0 -50vw 0 0;}   }

@media screen and (max-width: 900px) {
.a2-line-wrap, .lb {display: inline;}   }

/*@media (min-width: 600px) {.a4-field, .a3-field {order: 99; }  } */

@media (min-width: 1101px) and (max-width: 1200px) {#tfl-menu nav {width: 80%; padding: 0 10%; grid-template-columns: 32% 17% 17% 17% 17%; }}
@media (min-width: 1101px) and (max-width: 1300px) {.about-us-desc-1 {padding: 0 0.5em; font-size: 2.8rem;}}

@media (max-width: 1100px) {
#tfl-body {grid-template-columns: 100%;}
#tfl-menu {height: auto; }
#tfl-menu nav {width: 85%; padding: 5% 7.5%; grid-template-columns: repeat(3,33%); grid-template-rows: repeat(2 auto); } 
.tfl-nav:not(#tfl-nav-logo) {width:75%; justify-items: right; background: rgba(255,255,255,0.1); padding:0.35rem 2rem;}
#tfl-nav-logo {grid-row-start:1; grid-row-end: span 2;}
.menu-1-active #tfl-nav-news, .menu-2-active #tfl-nav-about-us, .menu-3-active #tfl-nav-the-process, .menu-4-active #tfl-nav-our-clients {box-shadow: inset 1px -2px 0 rgba(0,0,0,0.4);background: #c27329;}
.tfl-nav:nth-child(2) {align-self: end; justify-self: end;}
.tfl-nav:nth-child(3) {align-self: end; justify-self: start;}
.tfl-nav:nth-child(4) {align-self: start; justify-self: end;}
.tfl-nav:nth-child(5) {align-self: start; justify-self: start;}
#tfl-infobar-contacts i {display: none;}
#tfl-infobar {text-align: right; padding: 1em 2em 1.2em; color: #fff; display: grid; grid-template-columns: 60% 40%; }
#tfl-infobar-contacts {justify-self: start; display: grid; grid-template-columns: auto auto; align-items: center; grid-column-gap: 2rem;}
#tfl-infobar span:nth-child(2n) {text-align: left;}
#tfl-infobar-icons {justify-self: end; align-self: center;}  
#tfl-dereks-fav-quotes {min-width: 300px; width: 50vw; min-height: auto;}
.fav-quotes {height: auto;} 
#tfl-right {display: grid; justify-items: end;}
#tfl-right-1:not(.tfl-membership) {width: 80vw;} 
.about-us-desc {display: grid; grid-template-columns: 100%; padding: 1em;}
.about-us-desc-1 {margin: 0 0 1em; justify-self: left;}
.about-us-desc-2 {padding: 0 2em 2em;}
.a3-label {width: 11rem; height: 11rem; margin: 0.5em; font-size: calc(1.2vw + 1em); justify-self: center;}
.a4-label {width: 13rem; height: 13rem; margin: 0.5em; font-size: calc(1.2vw + 1em); justify-self: center;}
#tfl-the-process-35 {width: calc(24vw - 40px - 3em);height: calc(24vw - 40px - 3em);}
.a3-center-tab {grid-template-columns: 100%;}
#tfl-the-process-11 {grid-column: 1;}
#tfl-the-process-21 {grid-column: 1;}
#tfl-the-process-31 {grid-column: 1;}
#tfl-the-process-14, #tfl-the-process-24 {grid-column: auto;}
#tfl-the-process-35 {width: 200px; height: 200px;}
.a3-field {margin: 2em;}
.eventtype-fxl0 {font-size: 1.5em;}
.eventtype-fxl1 {font-size: 0.9em;}
#tfl-the-process-11, #tfl-the-process-21, #tfl-the-process-31, #tfl-the-process-41 {font-size: 2.5rem;}
#a4-chart-1, #a4-chart-2, #a4-chart-3 {width: auto; padding: 2vw;}

#tfl-memberships {display: grid; grid-template-columns: repeat(3,32%);grid-column-gap: 2%;}
.tfl-membership img {margin: 0 auto;}

#footer {grid-template-columns: 100%; background: #111; }
#footer-info {color: #999; justify-self: center; align-self: end; grid-column: 1; text-align: center; margin:2rem;}
#tfl-dereks-quotes {box-shadow: 0px -4px 0 rgba(194,115,42,1); max-width: 600px; justify-self: center;}
#tfl-left-1.a2-left {font-size: 3rem;}
#tfl-left-2.a2-left {font-size: 3rem;}
#tfl-left-3.a2-left {font-size: 2rem;}
#tfl-left-1.a5-left {font-size: 3rem;}
#tfl-left-2.a5-left {font-size: 3rem;}
#tfl-left-3.a5-left {font-size: 2rem;}
.a5-left {grid-row: 2;}
.newsfeed-entry:nth-child(odd) {grid-template-columns: 100%;}
.newsfeed-entry:nth-child(even) {grid-template-columns: 100%;}
.newsfeed-entry:nth-child(odd) .newsfeed-entry-left {grid-column: 1; grid-row: 2; }
.newsfeed-entry:nth-child(odd) .newsfeed-entry-otherleft {grid-column: 1; grid-row: 3;}
.newsfeed-top {grid-column: 1; padding: 0 0 1em; }

.article-info {grid-template-columns: max-content; }
.post {margin: 4rem;}
.sidebar-cat {font-size: 2.5rem;}

}

@media (min-width: 700px) and (max-width: 1100px) {
.a3-tabs, .input {grid-template-columns: 10% 20% 20% 20% 20% 10%;}
.a3-field {grid-column: 1 / span 6;}
#a3-label-1 {grid-column-start: 2;}

#tfl-center {max-width: 720px; justify-self: center;}

.newsfeed-entry-image {max-width: 50%;}
.newsfeed-entry:nth-child(even) .newsfeed-entry-left {text-align:right}
.newsfeed-top {width: 100%;}
.newsfeed-entry:nth-child(odd) .newsfeed-top {justify-self: right;}
}


@media (max-width: 600px) {
#tfl-menu nav {grid-template-columns: 100%; grid-row-gap: 0.5rem; }
#tfl-menu {width: 100%; height: auto; }
#tfl-center {margin: 0 !important;}
.tfl-nav {width: calc(20vw + 200px); align-self: center !important; justify-items: center !important; justify-self: center !important; background: rgba(0,0,0,0) !important;}
.tfl-nav a {z-index: 10;}
#tfl-logo {width:100%; text-align: center;}
#tfl-nav-logo {justify-self: center;}
#tfl-nav-logo svg {max-width: 60%; padding: 1%;}
.tfl-nav:nth-child(2):before, .tfl-nav:nth-child(4):before, .tfl-nav:nth-child(3):before, .tfl-nav:nth-child(5):before  {content:''; background: rgba(255,255,255,0.1);position: absolute; width: 70%; height: 3rem; border-radius: 0 0 7px 4px;}
.tfl-nav:nth-child(2):before, .tfl-nav:nth-child(4):before {left: 10vw;}
.tfl-nav:nth-child(3):before, .tfl-nav:nth-child(5):before {left: 20vw;}
.menu-1-active #tfl-nav-news:before {box-shadow: inset 1px -2px 0 rgba(0,0,0,0.4);background: #c27329;}
.menu-2-active #tfl-nav-about-us:before {box-shadow: inset 1px -2px 0 rgba(0,0,0,0.4);background: #c27329;}
.menu-3-active #tfl-nav-the-process:before {box-shadow: inset 1px -2px 0 rgba(0,0,0,0.4);background: #c27329;}
.menu-4-active #tfl-nav-our-clients:before {box-shadow: inset 1px -2px 0 rgba(0,0,0,0.4);background: #c27329;}
#tfl-infobar {grid-template-columns: 50% 50%; }
#tfl-infobar-contacts {grid-template-columns: auto; grid-column-gap: 1rem; font-size: 1.05em;}
#tfl-infobar-icons {justify-self: start; align-self: center; font-size: 1.5em;}  
.the-process-desc {margin: 0 1em 2em !important;}
.a3-label, .a4-label {width: 15rem; height: 15rem; margin: 0.5em; font-size: calc(3vw + 1em);}
.a3-field {margin: 0;}
.eventtype-fxl0 {font-size: 1.5em;}
.eventtype-fxl1 {font-size: 0.9em;}
#tfl-the-process-11, #tfl-the-process-21, #tfl-the-process-31, #tfl-the-process-41 {font-size: 2rem;}
#tfl-dereks-fav-quotes {min-width: auto; width: 75vw; min-height: auto;}
.fav-quotes {height: auto;} 
#tfl-right-1:not(.tfl-membership) {width: 75vw;}
#tfl-right {margin: 3rem 0;}
.tfl-casestudy:nth-child(even), .tfl-casestudy:nth-child(odd) {grid-template-columns: 100%;}
.tfl-casestudy:nth-child(even) .tfl-client-logo {grid-column: 1; grid-row: 1;}
.tfl-casestudy:nth-child(even) .tfl-client-desc {grid-column: 1; grid-row: 2;}
.a4-field {padding: 0;}

.a4-tabs, .input {grid-template-columns: repeat(2,50%);}
.a4-field {grid-column: 1 / span 2;}
#a4-label-1 {justify-self: center; grid-column: 1 / span 2;}
#a4-label-2 {justify-self: end;}
#a4-label-3 {justify-self: start;}
.tfl-client-logo {justify-self: center;}

.a3-tabs, .input {grid-template-columns: repeat(2,50%);}
.a3-field {grid-column: 1 / span 2;}
#a3-label-1, #a3-label-3 {justify-self: end;}
#a3-label-2, #a3-label-4 {justify-self: start;}
.eventtype-fxl0 {box-shadow: none; font-size: 1.2em;}
#tfl-left-1.a2-left {font-size: 2.5rem;}
#tfl-left-2.a2-left {font-size: 2.5rem;}
#tfl-left-3.a2-left {font-size: 1.5rem;}
#tfl-left-1.a5-left {font-size: 2.5rem;}
#tfl-left-2.a5-left {font-size: 2.5rem;}
#tfl-left-3.a5-left {font-size: 1.5rem;}

.newsfeed {padding: 0;}
.newsfeed-entry-info {display: grid; grid-template-columns: max-content;}
.newsfeed-entry-data {padding: 1px 10px;}
.newsfeed-entry:nth-child(even) .newsfeed-entry-data {grid-column: 1; grid-row: 2; margin: 0 0 auto; justify-self: right;}
.newsfeed-entry:nth-child(odd) .newsfeed-entry-data {margin: auto 0 0; justify-self: left;}
.newsfeed-entry:nth-child(even) .newsfeed-cats {grid-column: 1; grid-row: 1;}

.post {margin: 2rem;}


}

@media (max-width: 480px) { #tfl-memberships {display: grid; grid-template-columns: 100%;grid-column-gap: 2%; margin-top: 2em;} .tfl-membership img {max-width:160px;} .tfl-membership {width:75vw; margin: 1em 0 0;} }


#a3-tab-1:checked ~ #a3-field-1 {display: block;}
#a3-tab-2:checked ~ #a3-field-2 {display: block;}
#a3-tab-3:checked ~ #a3-field-3 {display: block;}
#a3-tab-4:checked ~ #a3-field-4 {display: block;}

#a4-tab-1:checked ~ #a4-field-1 {display: block;}
#a4-tab-2:checked ~ #a4-field-2 {display: block;}
#a4-tab-3:checked ~ #a4-field-3 {display: block;}

#tfl-privacy-title {font-size: 2em; text-align: center; margin: 0 0 2rem; font-weight: 200;}
#tfl-privacy-title span {background: rgba(194,115,41,0.12); padding: 0 6px;}
#tfl-privacy-body {text-align:justify; font-size: 1.35rem; width:80%; margin: 0 10%;}
#tfl-privacy-body strong {margin: 2rem 0 0; display: block;}

#tfl-webdesign-title {font-size: 2em; text-align: center; margin: 0 0 2rem; font-weight: 200;}
#tfl-webdesign-body {text-align:justify;  width:80%; margin: 0 10%;}