a,
audio,
big,
body,
center,
code,
dd,
del,
div,
figure,
footer,
h1,
h2,
h3,
h4,
h5,
h6,
header,
html,
i,
img,
label,
li,
menu,
nav,
object,
p,
q,
s,
section,
small,
span,
strong,
tr,
ul,
var,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
figure,
footer,
header,
menu,
nav,
section {
    display: block;
}
body {
    line-height: 1;
}
ul {
    list-style: none;
}
q {
    quotes: none;
}
q:after,
q:before {
    content: "";
    content: none;
}
@font-face {
    font-family: Lato;
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/lato/v17/S6u9w4BMUTPHh7USSwiPHA.ttf) format("truetype");
}
@font-face {
    font-family: Lato;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/lato/v17/S6uyw4BMUTPHjx4wWw.ttf) format("truetype");
}
@font-face {
    font-family: Lato;
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/lato/v17/S6u9w4BMUTPHh6UVSwiPHA.ttf) format("truetype");
}
@font-face {
    font-family: Lato;
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/lato/v17/S6u9w4BMUTPHh50XSwiPHA.ttf) format("truetype");
}
@font-face {
    font-family: Merriweather;
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/merriweather/v22/u-4n0qyriQwlOrhSvowK_l521wRpXw.ttf) format("truetype");
}
@font-face {
    font-family: Merriweather;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/merriweather/v22/u-440qyriQwlOrhSvowK_l5Oew.ttf) format("truetype");
}
@font-face {
    font-family: Merriweather;
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/merriweather/v22/u-4n0qyriQwlOrhSvowK_l52xwNpXw.ttf) format("truetype");
}
@font-face {
    font-family: Montserrat;
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/montserrat/v15/JTURjIg1_i6t8kCHKm45_cJD7g4.ttf) format("truetype");
}
@font-face {
    font-family: Montserrat;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/montserrat/v15/JTUSjIg1_i6t8kCHKm45xW4.ttf) format("truetype");
}
@font-face {
    font-family: Montserrat;
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/montserrat/v15/JTURjIg1_i6t8kCHKm45_ZpC7g4.ttf) format("truetype");
}
@font-face {
    font-family: Montserrat;
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/montserrat/v15/JTURjIg1_i6t8kCHKm45_bZF7g4.ttf) format("truetype");
}
@font-face {
    font-family: "Libre Baskerville";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/librebaskerville/v9/kmKnZrc3Hgbbcjq75U4uslyuy4kn0pNe.ttf) format("truetype");
}
@font-face {
    font-family: "Libre Baskerville";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/librebaskerville/v9/kmKiZrc3Hgbbcjq75U4uslyuy4kn0qviTjYw.ttf) format("truetype");
}
@font-face {
    font-family: "Futura Std";
    src: url(FuturaStd-Bold.woff2) format("woff2"), url(FuturaStd-Bold.woff) format("woff"),
        url(https://wearetrafika.com/agency/2020/css/FuturaStd-Bold.ttf) format("truetype"), url(https://wearetrafika.com/agency/2020/css/FuturaStd-Bold.svg#FuturaStd-Bold) format("svg");
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: "Kremlin Pro Web Expanded Demi";
    src: url(https://wearetrafika.com/agency/2020/css/1439d108020f7f9921bfbbc64bcdbf55.eot);
    src: url(https://wearetrafika.com/agency/2020/css/1439d108020f7f9921bfbbc64bcdbf55.eot?#iefix) format("embedded-opentype"),
        url(1439d108020f7f9921bfbbc64bcdbf55.woff2) format("woff2"), url(1439d108020f7f9921bfbbc64bcdbf55.woff) format("woff"),
        url(https://wearetrafika.com/agency/2020/css/1439d108020f7f9921bfbbc64bcdbf55.ttf) format("truetype"), url("https://wearetrafika.com/agency/2020/css/1439d108020f7f9921bfbbc64bcdbf55.svg#Kremlin Pro Web Expanded Demi") format("svg");
}
@font-face {
    font-family: Material-Design-Iconic-Font;
    src: url(https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/fonts/Material-Design-Iconic-Font.woff2?v=2.2.0) format("woff2"),
        url(https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/fonts/Material-Design-Iconic-Font.woff?v=2.2.0) format("woff"),
        url(https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/fonts/Material-Design-Iconic-Font.ttf?v=2.2.0) format("truetype");
}
@font-face {
    font-family: 'Futura Std';
    src: url('FuturaStd-Bold.woff2') format('woff2'),
        url('FuturaStd-Bold.woff') format('woff'),
        url('FuturaStd-Bold.ttf') format('truetype'),
        url('FuturaStd-Bold.svg#FuturaStd-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {font-family: "Kremlin Pro Web Expanded Demi";
  src: url("1439d108020f7f9921bfbbc64bcdbf55.eot"); /* IE9*/
  src: url("1439d108020f7f9921bfbbc64bcdbf55.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
  url("1439d108020f7f9921bfbbc64bcdbf55.woff2") format("woff2"), /* chrome、firefox */
  url("1439d108020f7f9921bfbbc64bcdbf55.woff") format("woff"), /* chrome、firefox */
  url("1439d108020f7f9921bfbbc64bcdbf55.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url("1439d108020f7f9921bfbbc64bcdbf55.svg#Kremlin Pro Web Expanded Demi") format("svg"); /* iOS 4.1- */
}


/*TRAFIKA.CSS*/

@font-face{font-family:'webflow-icons';src:url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg6SAy0AAAC8AAAAYGNtYXAaVcxaAAABHAAAAExnYXNwAAAAEAAAAWgAAAAIZ2x5ZgscV1gAAAFwAAABhGhlYWQCkFKvAAAC9AAAADZoaGVhB0MDyQAAAywAAAAkaG10eBIAA10AAANQAAAAIGxvY2EBMADyAAADcAAAABJtYXhwAAwATQAAA4QAAAAgbmFtZWTuiIAAAAOkAAABe3Bvc3QAAwAAAAAFIAAAACAAAwQAAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADmAwPA/8D/wAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIOYD//3//wAAAAAAIOYA//3//wAB/+MaBAADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQEgAAADIAOAAAUAAAkBBwkBFwMg/kBAAYD+gEABwAHAQP6A/oBAAAEA4AAAAuADgAAFAAATARcJAQfgAcBA/oABgEABwAHAQP6A/oBAAAADAMAA4ANAAsAAGAAxAEoAAAEhIg4CHQEUHgIzITI+Aj0BNC4CIxUhIg4CHQEUHgIzITI+Aj0BNC4CIxUhIg4CHQEUHgIzITI+Aj0BNC4CIwMg/cAHCwkFBQkLBwJABwsJBQUJCwf9wAcLCQUFCQsHAkAHCwkFBQkLB/3ABwsJBQUJCwcCQAcLCQUFCQsHAsAFCQsHIAcLCQUFCQsHIAcLCQXABQkLByAHCwkFBQkLByAHCwkFwAUJCwcgBwsJBQUJCwcgBwsJBQAAAAABAJ0AtAOBApUABQAACQIHCQEDJP7r/upcAXEBcgKU/usBFFv+egGGAAAAAAEAAAABAADSLAJOXw889QALBAAAAAAAz/iHGQAAAADP+IcZAAAAAAOBA4AAAAAIAAIAAAAAAAAAAQAAA8D/wAAABAAAAAAAA4EAAQAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAACAAAABAABIAQAAOAEAADABAAAnQAAAAAACgAUAB4AMgBGAKwAwgAAAAEAAAAIAEsAAwAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAaAAAAAQAAAAAAAgAOAHEAAQAAAAAAAwAaADAAAQAAAAAABAAaAH8AAQAAAAAABQAWABoAAQAAAAAABgANAEoAAQAAAAAACgA0AJkAAwABBAkAAQAaAAAAAwABBAkAAgAOAHEAAwABBAkAAwAaADAAAwABBAkABAAaAH8AAwABBAkABQAWABoAAwABBAkABgAaAFcAAwABBAkACgA0AJkAdwBlAGIAZgBsAG8AdwAtAGkAYwBvAG4AcwBWAGUAcgBzAGkAbwBuACAAMQAuADAAdwBlAGIAZgBsAG8AdwAtAGkAYwBvAG4Ac3dlYmZsb3ctaWNvbnMAdwBlAGIAZgBsAG8AdwAtAGkAYwBvAG4AcwBSAGUAZwB1AGwAYQByAHcAZQBiAGYAbABvAHcALQBpAGMAbwBuAHMARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('truetype'),url(data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AAAVcAAoAAAAABRQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAA9AAAAZMAAAGTuzUomU9TLzIAAAKIAAAAYAAAAGAOkgMtY21hcAAAAugAAABMAAAATBpVzFpnYXNwAAADNAAAAAgAAAAIAAAAEGhlYWQAAAM8AAAANgAAADYCkFKvaGhlYQAAA3QAAAAkAAAAJAdDA8lobXR4AAADmAAAACAAAAAgEgADXW1heHAAAAO4AAAABgAAAAYACFAAbmFtZQAAA8AAAAF7AAABe2TuiIBwb3N0AAAFPAAAACAAAAAgAAMAAAEABAQAAQEBDndlYmZsb3ctaWNvbnMAAQIAAQA6+BwC+BsD+BgEHgoACXf/i4seCgAJd/+LiwwHi0v6lPpUBR0AAACaDx0AAACfER0AAAAJHQAAAYoSAAkBAQ4bHR8iJywxNndlYmZsb3ctaWNvbnN3ZWJmbG93LWljb25zdTB1MXUyMHVFNjAwdUU2MDF1RTYwMnVFNjAzAAACAYkABgAIAQEEBwoNJDvH4P6UDv6UDv6UDvyUDvm0+FQV/FT4VEtL+BT8FPwU/BTLSwUO93T4VBX4VPhUy0v8FPwU+BT8FEtLBQ75tPlUFfzUiwV5i319i3kIi2sFi3mZfZ2LCPjUiwWdi5mZi50Ii6sFi519mXmLCIv7VBX81IsFeYt9fYt5CItrBYt5mX2diwj41IsFnYuZmYudCIurBYudfZl5iwiL+1QV/NSLBXmLfX2LeQiLawWLeZl9nYsI+NSLBZ2LmZmLnQiLqwWLnX2ZeYsIDvm4+SkV+6n7qvuq96ovLvgG/Bj4BvgYBQ76lBT6lBWLDAoAAAMEAAGQAAUAAAKZAswAAACPApkCzAAAAesAMwEJAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA5gMDwP/A/8ADwABAAAAAAQAAAAAAAAAAAAAAIAAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAA4AAAACgAIAAIAAgABACDmA//9//8AAAAAACDmAP/9//8AAf/jGgQAAwABAAAAAAAAAAAAAAABAAH//wAPAAEAAAABAAC1pQTjXw889QALBAAAAAAAz/iHGQAAAADP+IcZAAAAAAOBA4AAAAAIAAIAAAAAAAAAAQAAA8D/wAAABAAAAAAAA4EAAQAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAACAAAABAABIAQAAOAEAADABAAAnQAAUAAACAAAAAAADgCuAAEAAAAAAAEAGgAAAAEAAAAAAAIADgBxAAEAAAAAAAMAGgAwAAEAAAAAAAQAGgB/AAEAAAAAAAUAFgAaAAEAAAAAAAYADQBKAAEAAAAAAAoANACZAAMAAQQJAAEAGgAAAAMAAQQJAAIADgBxAAMAAQQJAAMAGgAwAAMAAQQJAAQAGgB/AAMAAQQJAAUAFgAaAAMAAQQJAAYAGgBXAAMAAQQJAAoANACZAHcAZQBiAGYAbABvAHcALQBpAGMAbwBuAHMAVgBlAHIAcwBpAG8AbgAgADEALgAwAHcAZQBiAGYAbABvAHcALQBpAGMAbwBuAHN3ZWJmbG93LWljb25zAHcAZQBiAGYAbABvAHcALQBpAGMAbwBuAHMAUgBlAGcAdQBsAGEAcgB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==) format('woff');font-weight:normal;font-style:normal}[class^="w-icon-"],[class*=" w-icon-"]{font-family:'webflow-icons';speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.w-icon-slider-right:before{content:"\e600"}.w-icon-slider-left:before{content:"\e601"}.w-icon-nav-menu:before{content:"\e602"}.w-icon-arrow-down:before,.w-icon-dropdown-toggle:before{content:"\e603"}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}

body, html{
  margin:0;
  width: 100%;	
  height: auto;
  color: white;
}

body {
  color: white;	
  max-width: 1600px;
  margin: 0 auto;
  font-family: 'Lato', sans-serif;
  background-color:#000000; 
  font-weight: 300;
  line-height: 1.3;		
}

article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
  display: block;
}

.no-se{
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; 
}

.button-main {
    position: relative;
    /* top: 0px; */
    display: inline-block;
    width: auto;
    height: 50px;
    margin-top: 16px;
    padding-top: 11px;
    padding-right: 15px;
    padding-left: 15px;
    border: 1px solid #B8B7B8;
    border-radius: 6px;
    font-family: Rubik, sans-serif;
    color: #fff;
    font-size: 18px;
    font-weight: 400;
    text-align: center;
    letter-spacing: 0px;
    text-decoration: none;
    text-transform: none;
}

.reel {
    margin-top: 80px;
    position: absolute;
}

.img-p {
	pointer-events: none;
}

.page-section {
  padding: 8rem 0;
	height: 100vh;
}

.who-section {
    padding: 1rem 0;
    height: 100vh;
    margin-top:400px;
}

.case-section {
    padding: 5rem 0px 0px;
    margin-top: 100vh;
    height: 100vh;
    z-index: 1;
}

.case-bg {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	/*background-image: url(../img/trafika.gif);
  	background-color:#000;
	background-attachment:fixed;
	background-position:center center;
	background-repeat:no-repeat;
	-webkit-background-size:cover;
	-moz-background-size:cover;
	background-size:cover;
	-o-background-size:cover;*/	
	/*opacity: 0.5;*/
	z-index: -1;
}

#video-background {
    position: fixed;
    left: -400px;
    bottom: 0px;
    top: -230px;
    min-width: 160%;
    min-height: 160%;
    width: auto;
    height: auto;
    z-index: -100;
}
.clients-section {
	padding: 10rem 0 6rem 0;
	min-height: 100vh;
	height: auto;
}

.orange-section {
  padding: 8rem 0;
	height: 100vh;
}

.copy-section {
    padding: 18rem 0;
    height: 100vh;
}

.service-section {
    padding: 15rem 0;
    height: 100vh;
}

.portfolio {
  padding: 0;
	
}


.contact-section {
  /*padding: 8rem 0;*/
	padding: 4rem 0;
}

.awards {
	max-width: 50%
}

.mobile {
	display: none;
}

.copy01 {
	display: block;
    width: 100%;
    max-width: 640px;
    margin: 100px 0 0 -150px;
    height: 250px;
    padding: 10px;
}

.copy02 {
    display: block;
    width: 100%;
    max-width: 640px;
    margin: 100px 0 0 -150px;
    padding: 10px;
    margin-top: -260px;
    margin-left: 620px;
}

.copy03 {
	display: block;
    width: 100%;
    max-width: 640px;
    margin: 100px 0 0 -150px;
    padding: 10px;
    margin-top: -580px;
    margin-left: 350px;
}

p {
	font-size: 1em;
    font-weight: 300;
	color: #b8b7b7;
}

a {
    color: #ffffff;
    text-decoration: none;
    background-color: transparent;
	cursor: pointer!important;
	  opacity: 1;	
      transition: opacity .5s ease-out;
    -moz-transition: opacity .5s ease-out;
    -webkit-transition: opacity .5s ease-out;
    -o-transition: opacity .5s ease-out;
	
}

a:hover{
	 color: #ffffff;
      opacity: .5;	
      transition: opacity .5s ease-out;
    -moz-transition: opacity .5s ease-out;
    -webkit-transition: opacity .5s ease-out;
    -o-transition: opacity .5s ease-out;
	text-decoration: none;
	cursor: pointer!important;
}

li {
	list-style: none;
}

h1, h2 {
	font-family: 'Merriweather', serif;
	font-weight: 400;
    line-height: 1.25em;	
}

h2 {
	font-size: 1.7rem;
}

h2.work {
	font-size: 1.2rem;
}

h2.copy {
	font-size: 1.4rem;
}

.pad {
	    padding: 20px;
}

h3 {
    font-family: 'Futura Std';
    font-weight: bold;
    font-style: normal;
    text-transform: uppercase;
    font-size: 6em;
    line-height: .9em;
    letter-spacing: -4px;
}

h3.services {
	font-family: 'Futura Std';
    font-weight: bold;
    font-style: normal;
    text-transform: uppercase;
    font-size: 4em;
    line-height: 1em;
}

h3.footerlink {
	font-family: 'Futura Std';
    font-weight: bold;
    font-style: normal;
    text-transform: uppercase;
    font-size: 4em;
    line-height: 1em;
	padding: 20px 0;
}

h3.txt {
    font-size: 16em;
    line-height: 1em;
    float: right;
    position: relative;
    margin-top: -170px;
    margin-right: -440px;
}

h3.say {
	font-family: 'Futura Std';
    font-weight: bold;
    font-style: normal;
    text-transform: uppercase;
    font-size: 4em;
    line-height: 1em;
}

h3.motion {
    font-family: 'Futura Std';
    font-weight: bold;
    font-style: normal;
    text-transform: uppercase;
    font-size: 5.6em;
    line-height: 1em;
    margin-top: 35px;
}

h3.case-txt {
    font-size: 2em;
    line-height: .9em;
    letter-spacing: 0;
}

h4 {
    opacity: 1;
    font-family: "kremlin-pro-web" !important;
    font-size: 29px;
    line-height: 24px;
    letter-spacing: 0.7px;
}

h4.foot {
    opacity: 1;
    font-family: "kremlin-pro-web" !important;
    font-size: 39px;
    line-height: 34px;
    letter-spacing: 0.7px;
    margin-bottom:30px;
}
li#loc p {
  margin-bottom: 1rem;
}

/* Back to top */

.back-to-top[data-v-5533579c] {
    padding: 2rem;
    position: fixed;
    right: -1.1rem;
    bottom: 5.8rem;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    background: 0 0;
    color: #fff;
    opacity: 1;
    font-family: 'Lato', sans-serif;
    font-size: 1em;
    font-weight: 400;
    cursor: pointer;
    mix-blend-mode: difference;
    z-index:20;
}

.back-to-top--show[data-v-5533579c],.back-to-top[data-v-5533579c]{-webkit-transition:opacity .3s;transition:opacity .3s}

.back-to-top--show[data-v-5533579c],.back-to-top[data-v-5533579c]{-webkit-transition:opacity .3s;transition:opacity .3s}.back-to-top--show[data-v-5533579c]{opacity:1}

.caret[data-v-dd4caba6]{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);width:auto;position:relative;bottom:1px}

.svg-arrow{position:relative;top:2.5rem;-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}@media only screen and (max-width:768px){.project-button[data-v-f1330f4a] .svg-arrow{top:.9rem}}

@media only screen and (max-width:768px){.hide-on-med-and-down{display:none!important}}

button{cursor:pointer;color:inherit;background:0 0}button:focus{outline:0}.button,.button--small,.button--white{border-radius:0;padding:1.6rem 3.2rem;background:0 0;color:#000;border:1px solid #000;font-size:1.6rem;letter-spacing:-.53px;text-decoration:none}.button--small{padding:.5rem 1.1rem}.button--white{color:#fff;border-color:#fff}

/* End Back to top */

.pad120 {
	padding-bottom: 120px;
}

.top50 {
	padding-top: 50px;
}

.top100 {
	padding-top: 100px;
}

.top150 {
	padding-top: 150px;
}

.top200 {
	padding-top: 200px;
}

.top220 {
	padding-top: 220px;
}

.top100-0 {
	padding: 100px 0;
}


.case-txt-pos {
	padding: 200px 0 0 50px;
    position: absolute;
}

.case01-txt-pos {
    padding: 235px 0 0 50px;
    position: absolute;
}

.case03-txt-pos {
    padding: 228px 0 0 50px;
    position: absolute;
}

.case07-txt-pos {
    padding: 228px 0 0 50px;
    position: absolute;
}

.robot-txt {
	padding: 60px 10px 10px 155px;
}

.films {
    /* margin-top: 50px; */
    font-family: 'Merriweather', serif;
    font-weight: 400;
    font-size: 59px;
    line-height: 1.25em;
    margin-bottom: 15px;
    letter-spacing: -2px;
}

.cases {
	margin-top: 60px
}

/* Copy */

.copy-home-pink {
  position: relative;
  float: left;
  left: 450px;
  bottom: 290px;
  z-index: 1;
  width: 100%;
  padding-left: 66px;
  background-image: url(../img/arrow/arrow-left-up-pink.svg);
  background-position: 0% 10%;
  background-size: 60px;
  background-repeat: no-repeat;
  opacity: 1;
  font-family: "kremlin-pro-web" !important;
  color: rgba(236,0,140, 1);
  font-size: 40px;
  line-height: 32px;
  letter-spacing: 0.7px;
  text-align: left;
  padding-top: 8px;
  margin-top: 70px;
  top: 0;
}

.copy-home-orange {
    position: absolute;
    float: left;
    right: 170px;
    bottom: 280px;
    z-index: 1;
    width: 386px;
    padding-left: 56px;
    background-image: url(../img/arrow/arrow-left-up-orange.svg);
    background-position: 0% 15%;
    background-size: 47px;
    background-repeat: no-repeat;
    opacity: 1;
    font-family: "kremlin-pro-web" !important;
    color: rgba(234,167,0, 1);
    font-size: 29px;
    line-height: 24px;
    letter-spacing: 0.7px;
    text-align: left;
}

/* End Headers */

.ceo-copy {
	color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
	text-transform: uppercase;
}

.big {
	font-family: 'Futura Std';
    font-weight: bold;
    font-style: normal;
    text-transform: uppercase;
    font-size: 8em;
    line-height: 1em;
}

#portfolio.contariner-fluid {
	    width: 100%;
    /* padding-right: 15px; */
    /* padding-left: 15px; */
    margin-right: auto;
    margin-left: auto;
}

footer {
	background-color: #000000;
}

.footer {
	padding-top: 6rem!important;
    padding-bottom: 4rem!important;
}

.white_link {
	color:rgba(255,255,255,1);
	text-decoration: none;
}

#hello .white_link.active,#hello .white_link:active,#hello .white_link:focus,#hello .white_link:hover{
	
    opacity:.5;
    transition: .35s all ease;
}

.hello {
   text-decoration: none!important;
	cursor: pointer;
	  opacity: 1;	
      transition: opacity .5s ease-out;
    -moz-transition: opacity .5s ease-out;
    -webkit-transition: opacity .5s ease-out;
    -o-transition: opacity .5s ease-out;
	
}

#hello .hello.active,#hello .hello:active,#hello .hello:focus,#hello .hello:hover{
      opacity: .5;	
      transition: opacity .5s ease-out;
    -moz-transition: opacity .5s ease-out;
    -webkit-transition: opacity .5s ease-out;
    -o-transition: opacity .5s ease-out;
}

.block {
    display: inline-block;
  
}

#portfolio.container-fluid-port {
    width: 100%;
    padding-right: 0px;
    padding-left: 0px;
    margin-right: auto;
    margin-left: auto;
}

.port {
	    position: relative;
    width: 100%;
    padding-right: 0px!important;
    padding-left: 0px!important;
}

.centro {
    width: 100%;
    height: 50vh;
    line-height: 50vh;
    text-align: center;
}
	.centro>span {
		display:inline-block;
		vertical-align:middle;
		line-height:normal;
	}

.work-copy {
    font-family: 'Merriweather', serif;
    font-weight: 400;
    font-size: 70px;
    line-height: 1.2em;
    margin-bottom: 25px;
    padding-top: 10%;
    letter-spacing: -2px;
}



/* Header */

header.masthead{
	text-align:center;
	color:#fff;
	background-color: transparent;
	height: 100vh;
	min-height: 40rem;
	padding-top: 4.5rem;
	padding-bottom: 0;
	position: fixed;
	width: 100%;
	top: 0;
}

header.masthead .intro-text{
	padding-top:150px;
	padding-bottom:100px
}

header.masthead .intro-text .intro-lead-in{
	font-family: 'Merriweather', serif;
    font-weight: 400;
    font-size: 80px;
    line-height: 1.25em;
	margin-bottom:25px;
	letter-spacing: -2px;	
}

header.masthead .intro-text .intro-heading{
	font-size:50px;
	font-weight:600;
	line-height:50px;
	margin-bottom:25px;
	font-family: 'Montserrat', sans-serif;
}

#storytellers {
	margin-top: 100vh;
}

@media (min-width:768px){
	header.masthead .intro-text{
		padding-top:150px;
		padding-bottom:200px
	}
	
	header.masthead .intro-text .intro-lead-in{
		font-family: 'Merriweather', serif;
    font-weight: 400;
    font-size: 80px;
    line-height: 1.25em;
	margin-bottom:25px;
	letter-spacing: -2px;	
	}
	
	header.masthead .intro-text .intro-heading{
		font-size:75px;
		font-weight:700;
		line-height:75px;
		margin-bottom:50px;
		font-family:Montserrat,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji'
	}
}

/*End Header */

/* Scroll btn */

			
@-webkit-keyframes ani-mouse {
	0% {
	opacity: 1;
	top: 29%;
	}
	15% {
	opacity: 1;
	top: 50%;
	}
	50% {
	opacity: 0;
	top: 50%;
	}
	100% {
	opacity: 0;
	top: 29%;
	}
}
@-moz-keyframes ani-mouse {
	0% {
	opacity: 1;
	top: 29%;
	}
	15% {
	opacity: 1;
	top: 50%;
	}
	50% {
	opacity: 0;
	top: 50%;
	}
	100% {
	opacity: 0;
	top: 29%;
	}
}
@keyframes ani-mouse {
	0% {
	opacity: 1;
	top: 29%;
	}
	15% {
	opacity: 1;
	top: 50%;
	}
	50% {
	opacity: 0;
	top: 50%;
	}
	100% {
	opacity: 0;
	top: 29%;
	}
}

.scroll-btn {
    display: block;
    position: relative;
    left: 550px;
    /* right: 50px; */
    text-align: center;
    float: left;
    margin-top: 70px;
}
.scroll-btn > * {
	display: inline-block;
	font-family: 'Lato',sans-serif;
	font-weight: 300;
	font-size: 13px;
	/* line-height: 18px;
	font-size: 13px;
	font-weight: normal;
	color: #7f8c8d;
	color: #ffffff;
	font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
	letter-spacing: 2px; */
}
.scroll-btn > *:hover,
.scroll-btn > *:focus,
.scroll-btn > *.active {
	color: #8A8A8A;
}
.scroll-btn > *:hover,
.scroll-btn > *:focus,
.scroll-btn > *:active,
.scroll-btn > *.active {
	opacity: 0.8;
	filter: alpha(opacity=80);
}
.scroll-btn .mouse {
    position: relative;
    display: block;
    width: 28px;
    height: 45px;
    margin: 10px auto 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 2px solid #ffffff;
    border-radius: 23px;
}
.scroll-btn .mouse > * {
	position: absolute;
	display: block;
	top: 29%;
	left: 50%;
	width: 6px;
	height: 6px;
	margin: -2px 0 0 -3px;
	background: rgba(236,0,140, 1);
	border-radius: 50%;
	-webkit-animation: ani-mouse 2.5s linear infinite;
	-moz-animation: ani-mouse 2.5s linear infinite;
	animation: ani-mouse 2.5s linear infinite;
			}

/* End Scroll btn */

/* Nav */

#mainNav{
	background-color: transparent;
}

#mainNav .navbar-toggler{
	font-size:12px;
	right:0;
	padding:13px;
	text-transform:uppercase;
	color:#fff;
	border:0;
	background-color:#fed136;
	font-family: 'Montserrat', sans-serif;
		
}


#mainNav .navbar-brand{
	color: hsla(0, 0% , 100%, 1);
	font-family: 'Montserrat', sans-serif;
	font-size: 10px;
    letter-spacing: 6px;
	font-weight: 600;
	margin-left: 20px;
	cursor:pointer;
}

#mainNav .navbar-brand.active,#mainNav .navbar-brand:active,#mainNav .navbar-brand:focus,#mainNav .navbar-brand:hover{
	color:hsla(0, 0% , 100%, .5);
    opacity:.5;
    transition: .35s all ease;
}

#mainNav .navbar-nav .nav-item .nav-link{
	
	font-weight:400;
	padding:.75em 0;
	letter-spacing: 1px;
	color:#fff;
	font-family: 'Montserrat', sans-serif;
}

#mainNav .navbar-nav .nav-item .nav-link.active,#mainNav .navbar-nav .nav-item .nav-link:hover{
	color:#fed136
}

@media (min-width:992px){
	#mainNav{
		padding-top:25px;
		padding-bottom:25px;
		transition:padding-top .3s,padding-bottom .3s;
		border:none;
		background-color:transparent;
		mix-blend-mode: difference;
	}
	
	#mainNav .navbar-brand{
		font-size:16px;
		transition:all .3s
	}
	
	#mainNav .navbar-nav .nav-item .nav-link{
		padding:1.1em 1em!important
	}
	
	#mainNav.navbar-shrink{
		padding-top:0;
		padding-bottom:0;
		background-color:#212529
	}
	
	#mainNav.navbar-shrink .navbar-brand{
		font-size:1.25em;
		padding:12px 0
	}
	
}

/* End Nav */

/* Colors */

.gray {
	color:#8A8A8A;
}
.white {
	color:rgba(255,255,255,1);
}

.whiteop {
	color:rgba(255,255,255,.3);
}

.black {
	color:rgba(0,0,0,1);
}

.purple {
	color:rgba(176,0,234, 1);
}

.pink {
	color:rgba(236,0,140, 1);
}

.orange {
	color:rgba(234,167,0, 1);
}

.yellow {
	color:rgba(207,250,6, 1);
}

.bg-pink {
	background-color:rgba(236,0,140, 1)!important;
}

.bg-orange {
	background-color:rgba(234,167,0, 1)!important;
}


.bg-black {
	background-color:transparent;
}

.bg-services {
	background-color:#000000;
}

.bg-trafika {
	background-image: url(../img/trafika.gif);
		background-repeat:no-repeat;
	background-attachment:scroll;
	background-position:center center;
	background-size:cover
}

div#about {
	height: 4000px;
	z-index: -1;
	width: 100%;
	object-fit: cover;
	position: fixed;
  top: 0;
  -webkit-overflow-scrolling: touch;
}

#about img {
	width:100%;
	height:100%;
	height:100vh;
	object-fit:cover;
}
.overlayptrn {
	background:rgba(0,0,0,.6);
	position:fixed;
	top:0;
	left:0;
	z-index:1;
	width:100%;
	height:100%;
}

.tv {
    max-width: 100%;
    margin-top: -30px;
}

/* End Colors */

/* Custom */

.disable-scroll{
	overflow-y:hidden;
}
.menu-trigger {
	cursor: pointer;
	position: fixed;
	padding: 1rem;
	top: 10px;
	right: 40px;
	z-index: 100;
	color: #fff;
	-webkit-transform: rotate(225deg);
			transform: rotate(225deg);
	-webkit-transition: all 350ms ease;
	transition: all 350ms ease;
	}
	.menu-trigger.open {
	color: #fff;
	-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
	}

.menu-trigger:hover {
    opacity: .5;
    transition: opacity .5s ease-out;
    -moz-transition: opacity .5s ease-out;
    -webkit-transition: opacity .5s ease-out;
    -o-transition: opacity .5s ease-out;
	}

	#nav-overlay {
		overflow: hidden;
		position: fixed;
		width: 100%;
		height: 100%;
		z-index: -2;
		top:0;
	}
	#nav-overlay.open {
		z-index: 2;
	}
	#nav-overlay.indexopen {
		z-index: 2;
	}
	#nav-overlay nav {
	overflow: hidden;
	position: absolute;
	top: -150%;
	left: 0;
	width: 100%;
	height: 100%;
	display: -webkit-box;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
			flex-direction: column;
	-webkit-box-pack: center;
			justify-content: center;
	list-style: none;
	z-index: 90;
	-webkit-transition: top 350ms ease;
	transition: top 350ms ease;
	}
	#nav-overlay nav li {
	display: block;
	/*text-align: center;*/
	margin: 1rem 0;
	}
	#nav-overlay nav a, #nav-overlay nav a:visited {
	font-weight: 400;
	text-decoration: none;
	color: white;
	}

    #nav-overlay nav #loc a, #nav-overlay nav #loc a:visited {
    font-weight: 100;
    text-decoration: none;
    color: gray;
    }

.pad{
	padding: 0 30px 0 0;
}

.link {
	font-size: 4rem;
    line-height: 1.1;
    font-family: 'Merriweather', serif;
}

.serv_link {
	font-size: 2rem;
    line-height: 1.3;
    font-family: 'Merriweather', serif;
	color: white;
	cursor: pointer;
	  opacity: 1;	
      transition: opacity .5s ease-out;
    -moz-transition: opacity .5s ease-out;
    -webkit-transition: opacity .5s ease-out;
    -o-transition: opacity .5s ease-out;
	
	list-style: none;
    text-decoration: none;
	
}

ul .serv_link li a{
	text-decoration: none;
	list-style: none;
	color: white;
}

	ul .serv_link li a:hover, ul .serv_link li a:focus, ul .serv_link li a:visited, ul .serv_link li a:visited:hover, ul .serv_link li a:visited:focus, ul .serv_link li a:visited:visited {
	    opacity: .3;
    transition: opacity .5s ease-out;
    -moz-transition: opacity .5s ease-out;
    -webkit-transition: opacity .5s ease-out;
    -o-transition: opacity .5s ease-out;
		color: white;
		text-decoration: none;
	list-style: none;
	}

.footpos {
    text-align: left!important;
}


.footlink {
	font-size: 2rem;
    line-height: 1.3;
    font-family: 'Merriweather', serif;
	color: white;
	
}

footer li {
	text-decoration: none;
	list-style: none;
  padding:5px 0;
}

	footer li a:hover {
	    opacity: .3;
    transition: opacity .5s ease-out;
    -moz-transition: opacity .5s ease-out;
    -webkit-transition: opacity .5s ease-out;
    -o-transition: opacity .5s ease-out;
		color: white;
		text-decoration: none;
	list-style: none;
	}

.social-footlink {
    font-size: 1rem;
    line-height: 1.8;
	cursor: pointer;
	color: #b8b7b7!important;
}

.social-link {
    font-size: 1rem;
    line-height: 1.25;
    text-transform: uppercase;
	cursor: pointer;
}

.pais {
	font-size: 1rem;
    font-weight: 400;
	margin-bottom: 0;
}

.mail {
	font-size: 20px;
	letter-spacing: 1px;
	text-transform: none;
}

	#nav-overlay nav a:hover, #nav-overlay nav a:focus, #nav-overlay nav a:visited, #nav-overlay nav a:visited:hover, #nav-overlay nav a:visited:focus, #nav-overlay nav a:visited:visited {
	    opacity: .3;
    transition: opacity .5s ease-out;
    -moz-transition: opacity .5s ease-out;
    -webkit-transition: opacity .5s ease-out;
    -o-transition: opacity .5s ease-out;
	}
	#nav-overlay.open nav {
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
	  top: 0;
	}
	#nav-overlay:before, #nav-overlay:after {
	content: "";
	position: absolute;
	z-index: 50;
	top: 0;
	height: 100%;
	width: 100%;
	background: #000;
	transition: transform 350ms, -webkit-transform 350ms;
	/*background-image: url(https://dl.dropbox.com/s/5ug9619bpebuv6o/seaclouds.jpg);
	background-size: cover;
	background-repeat: repeat;
	background-position: center center;*/
	}
	#nav-overlay:before {
	left: 0;
	-webkit-transform: skew(50deg) translateX(-200%);
			transform: skew(50deg) translateX(-200%);
	clip: rect(auto 50vw auto auto);
	}
	@media (min-width: 500px) {
	#nav-overlay:before {
		-webkit-transform: skew(50deg) translateX(-150%);
				transform: skew(50deg) translateX(-150%);
	}
	}
	#nav-overlay.open:before {
	-webkit-transform: skew(0) translateX(0%);
			transform: skew(0) translateX(0%);
	}
	#nav-overlay:after {
	right: 0;
	-webkit-transform: skew(50deg) translateX(200%);
			transform: skew(50deg) translateX(200%);
	clip: rect(auto auto auto 50vw);
	}
	@media (min-width: 500px) {
		#nav-overlay:after {
			-webkit-transform: skew(50deg) translateX(150%);
					transform: skew(50deg) translateX(150%);
		}
	}
   
	#nav-overlay.open:after {
	-webkit-transform: skew(0) translateX(0%);
			transform: skew(0) translateX(0%);
	}

	.icon {
	display: inline-block;
	font: normal normal normal 14px/1 'Material-Design-Iconic-Font';
	font-size: inherit;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	}
	.icon.icon-menu:before {
	content: '\f136';
	font-size: 2rem;
	}

	.screen-reader-text {
	position: absolute;
	left: -999999em;
	}
	.bullets {
		position: fixed;
		right: .5%;
		top: 35%;
		z-index: 3;
	}
	.bullets ul li {
		padding: 2.5px 15px;
	}
	.bullets ul li a {
		cursor: pointer;
		transition: .35s all ease;
	}

	.bullets ul li a:hover {
		opacity:.8;
        transition: .35s all ease;
	}

	.bullet {
    background: rgba(255,255,255,.2);
    width: 10px;
    height: 10px;
    display: inline-block;
    border-radius: 50%;
}
.loader {
  width: 100%;
  height: 100vh;
  top: 0;
  position: fixed;
  z-index: 9999;
  background: #000;
  text-align: center;
  display: table;
}
.loadertext {
  position: relative;
  color: #222;
  font-size: 16px;
  display: table-cell;
  vertical-align: middle;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 6px;
  font-weight: 600;
}
.loadertext:before {
  content: attr(data-text);
  position: absolute;
  overflow: hidden;

  white-space: nowrap;
  color: #fff;
  max-width: 0;

}
.loadertext.percent1:before {max-width: .1em;}
.loadertext.percent2:before {max-width: .3em;}
.loadertext.percent3:before {max-width: .4em;}
.loadertext.percent4:before {max-width: .5em;}
.loadertext.percent5:before {max-width: .7em;}
.loadertext.percent6:before {max-width: .8em;}
.loadertext.percent7:before {max-width: .9em;}
.loadertext.percent8:before {max-width: 1em;}  
.loadertext.percent9:before {max-width: 1.1em;}
.loadertext.percent10:before {max-width: 1.2em;}
.loadertext.percent11:before {max-width: 1.3em;}
.loadertext.percent12:before {max-width: 1.4em;}
.loadertext.percent13:before {max-width: 1.5em;}
.loadertext.percent14:before {max-width: 1.6em;}
.loadertext.percent15:before {max-width: 1.7em;}
.loadertext.percent16:before {max-width: 1.8em;}  
.loadertext.percent17:before {max-width: 1.9em;}
.loadertext.percent18:before {max-width: 2em;}
.loadertext.percent19:before {max-width: 2.1em;}
.loadertext.percent20:before {max-width: 2.2em;}
.loadertext.percent21:before {max-width: 2.2em;}
.loadertext.percent22:before {max-width: 2.3em;}
.loadertext.percent23:before {max-width: 2.4em;}
.loadertext.percent24:before {max-width: 2.5em;}  
.loadertext.percent25:before {max-width: 2.6em;}
.loadertext.percent26:before {max-width: 2.6em;}
.loadertext.percent27:before {max-width: 2.6em;}
.loadertext.percent28:before {max-width: 2.6em;}
.loadertext.percent29:before {max-width: 2.7em;}
.loadertext.percent30:before {max-width: 2.7em;}
.loadertext.percent31:before {max-width: 2.8em;}
.loadertext.percent32:before {max-width: 2.8em;}
  
.loadertext.percent33:before {max-width: 2.8em;}
.loadertext.percent34:before {max-width: 2.9em;}
.loadertext.percent35:before {max-width: 2.9em;}
.loadertext.percent36:before {max-width: 3em;}
.loadertext.percent37:before {max-width: 3.1em;}
.loadertext.percent38:before {max-width: 3.1em;}  
.loadertext.percent39:before {max-width: 3.2em;}
.loadertext.percent40:before {max-width: 3.3em;}
.loadertext.percent41:before {max-width: 3.3em;}
.loadertext.percent42:before {max-width: 3.4em;}
.loadertext.percent43:before {max-width: 3.5em;}
.loadertext.percent44:before {max-width: 3.6em;}
.loadertext.percent45:before {max-width: 3.7em;}
.loadertext.percent46:before {max-width: 3.8em;}  
.loadertext.percent47:before {max-width: 3.9em;}
.loadertext.percent48:before {max-width: 3.9em;}
.loadertext.percent49:before {max-width: 4em;}
.loadertext.percent50:before {max-width: 4.1em;}
.loadertext.percent51:before {max-width: 4.2em;}
.loadertext.percent52:before {max-width: 4.3em;}
.loadertext.percent53:before {max-width: 4.4em;}
.loadertext.percent54:before {max-width: 4.5em;}  
.loadertext.percent55:before {max-width: 4.6em;}
.loadertext.percent56:before {max-width: 4.6em;}
.loadertext.percent57:before {max-width: 4.6em;}
.loadertext.percent58:before {max-width: 4.6em;}
.loadertext.percent59:before {max-width: 4.7em;}
.loadertext.percent60:before {max-width: 4.7em;}
.loadertext.percent61:before {max-width: 4.8em;}
.loadertext.percent62:before {max-width: 4.8em;}  

.loadertext.percent63:before {max-width: 4.9em;}
.loadertext.percent64:before {max-width: 5em;}
.loadertext.percent65:before {max-width: 5.1em;}
.loadertext.percent66:before {max-width: 5.2em;}
.loadertext.percent67:before {max-width: 5.3em;}
.loadertext.percent68:before {max-width: 5.4em;}  
.loadertext.percent69:before {max-width: 5.5em;}
.loadertext.percent70:before {max-width: 5.6em;}
.loadertext.percent71:before {max-width: 5.7em;}
.loadertext.percent72:before {max-width: 5.8em;}
.loadertext.percent73:before {max-width: 5.9em;}
.loadertext.percent74:before {max-width: 5.9em;}
.loadertext.percent75:before {max-width: 5.9em;}
.loadertext.percent76:before {max-width: 6em;}  
.loadertext.percent77:before {max-width: 6.1em;}
.loadertext.percent78:before {max-width: 6.1em;}
.loadertext.percent79:before {max-width: 6.1em;}
.loadertext.percent80:before {max-width: 6.5em;}
.loadertext.percent81:before {max-width: 7em;}
.loadertext.percent82:before {max-width: 7.25em;}
.loadertext.percent83:before {max-width: 7.5em;}
.loadertext.percent84:before {max-width: 7.75em;}  
.loadertext.percent85:before {max-width: 8em;}
.loadertext.percent86:before {max-width: 8.3em;}
.loadertext.percent87:before {max-width: 8.7em;}
.loadertext.percent88:before {max-width: 9em;}
.loadertext.percent89:before {max-width: 9.3em;}
.loadertext.percent90:before {max-width: 9.7em;}
.loadertext.percent91:before {max-width: 10em;}
.loadertext.percent92:before {max-width: 10.3em;}  
.loadertext.percent93:before {max-width: 10.7em;}
.loadertext.percent94:before {max-width: 11em;}  
.loadertext.percent95:before {max-width: 11.3em;}
.loadertext.percent96:before {max-width: 11.7em;}
.loadertext.percent97:before {max-width: 12em;}
.loadertext.percent98:before {max-width: 12.3em;}
.loadertext.percent99:before {max-width: 12.7em;}
.loadertext.percent100:before {max-width: 13em;}
	@keyframes loading {
		0% {
			max-width: 0;
		}
	}

	@media (max-width: 1024px) {
		.bullets ul li {
			padding: 5px 5px;
		}
		.icon.icon-menu::before {
			content: '\f136';
			font-size: 2rem;
		}
		.menu-trigger {
			padding: .25rem 1rem;
		}
		#nav-overlay nav a, #nav-overlay nav a:visited {
			/*font-size: 3rem;*/
		}				

	}

/* móvil */
	@media (max-width: 768px) {
		.container, .container-md, .container-sm {
      max-width: 100vw;
      padding: 30px;
      margin: 0;
  }
  section#work .container {
    padding: 30px 15px;
}
  .back-to-top[data-v-5533579c] {
      right: 0;
  }
		.loader {
    margin-top: -50px;
}
		
		#clients .col-lg-2 {
			width: 33.33%;
		}
		
	/* Fondo móvil */				
		
		body {
    background: url("../trafika_films.gif") no-repeat center center fixed;
        background-size: cover;
        -moz-background-size: cover;
        -webkit-background-size: cover;
        -o-background-size: cover;
}
		
			
	/* End Fondo móvil */	
		
header.masthead {
    text-align: center;
    color: rgb(255, 255, 255);
    background-color: transparent;
    min-height: 20rem;
    padding-top: 4rem;
    padding-bottom: 0px;
    position: fixed;
    width: 100%;
    top: 0px;
}
		
		header.masthead .intro-text {
    padding-top: 220px;
    padding-bottom: 100px;
}
		
				header.masthead .intro-text .intro-lead-in {
			font-size: 2.5rem;

		}
    .clients-section {
      padding: 100px 5%;
      min-height: 100vh;
      height: auto;
      width: 95vw;
  }
		.page-section {
			padding: 4rem 0;
			min-height: 100vh;
			height: auto;
		}
		
		.copy-section {
    padding: 8rem 0;
    height: 60vh;
}
		
		.orange-section {
    padding: 6rem 0;
    min-height: 100vh;
    height: auto;
}
			
.top220 {
    padding-top: 0;
    /* display: none; */
}
		
.pad120 {
	padding-bottom: 0;
}
		
.cases {
	margin-top: 0;
}
		
.case-section {
    padding: 8rem 0 0;
    margin-top: 100vh;
    /* height: 100vh; */
}
		
			#mainNav{
		mix-blend-mode: difference!important;
	}
		
		#mainNav .navbar-brand{
		font-size: 17px;
    transition: all .3s;
    margin-top: 8px;
    margin-left: 8px;	
	}
		
		.bullets {
			display: none;
	}
		
.tv {
    max-width: 100%;
    margin-top: 0;
    margin-bottom: 30px;
}
		
#parallax-it {
    padding: 0px;
    position: relative;
    width: 80%!important;
    margin-left: 40px;
    margin-top: 0;
}
		
#parallax-it-left {
    position: relative;
    left: -20px;
    overflow: hidden;
    margin-top: 150px;
    height: 380px;
}
		
		.big {
    font-size: 4em;
}
		h3.say {
    font-size: 3em;
    line-height: 1em;
}
		
		h3.txt {
    font-size: 7em;
    line-height: 1em;
    float: right;
    position: relative;
    margin-top: 0;
    margin-right: 0;
}

h3 {
    font-family: 'Futura Std';
    font-weight: bold;
    font-style: normal;
    text-transform: uppercase;
    font-size: 4.7em;
    line-height: 1em;
    padding: 35px 0 0;
}

h3.mob {
    font-size: 4.7em;
	padding: 102px 0 30px;
}

		
h3.footerlink {
    font-family: 'Futura Std';
    font-weight: bold;
    font-style: normal;
    text-transform: uppercase;
    font-size: 3.5em;
    line-height: 1em;
    padding: 20px 0;
}
	
		.top-mobile {
			padding-top: 150px;
		}
		
				.top-mobile2 {
			padding-top: 170px;
		}
		
		.case01-txt-pos {
    padding: 195px 0 0 50px;
    position: absolute;
}
		
		.case03-txt-pos {
    padding: 188px 0 0 50px;
    position: absolute;
}
		
		.case-txt-pos {
    padding: 170px 0 0 50px;
    position: absolute;
}
		
		.case07-txt-pos {
    padding: 175px 0 0 50px;
    position: absolute;
}
		
		.case07-txt-pos {
    padding: 195px 0 0 50px;
    position: absolute;
}
		
		
.scroll-btn {
  display: block;
  position: relative;
  left: 42.5%;
  text-align: center;
  float: left;
  margin-top: 0;
}	
#parallax-it {
  margin-top: 10px!important;
  margin-bottom: 200px!important;
}
.film-txt{max-width:90%;}
.scroll-btn .mouse {
    position: relative;
    display: block;
    width: 28px;
    height: 45px;
    margin: 85px auto 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 2px solid #ffffff;
    border-radius: 23px;
}
		
.copy-home-pink {
    position: absolute;
    float: left;
    left: 140px;
    bottom: 330px;
    z-index: 1;
    width: 386px;
    padding-left: 56px;
    background-image: url(../img/arrow/arrow-left-up-pink.svg);
    background-position: 0% 8%;
    background-size: 47px;
    background-repeat: no-repeat;
    opacity: 1;
    color: rgb(236, 0, 140);
    font-size: 39px;
    line-height: 34px;
    letter-spacing: 0.7px;
    text-align: left;
    font-family: kremlin-pro-web !important;
    margin-top: 90px;
}
		
.copy-home-orange {
    position: absolute;
    float: left;
    left: 40px;
    top: 100px;
    z-index: 1;
    width: 386px;
    padding-left: 56px;
    background-image: url(../img/arrow/arrow-left-down-orange.svg);
    background-position: 0% 8%;
    background-size: 47px;
    background-repeat: no-repeat;
    opacity: 1;
    font-family: "kremlin-pro-web" !important;
    color: rgba(234,167,0, 1);
    font-size: 39px;
    line-height: 34px;
    letter-spacing: 0.7px;
    text-align: left;
}
	
		
h3 span.smalli{
    font-family: 'Futura Std';
    font-weight: bold;
    font-style: normal;
    text-transform: uppercase;
    font-size: 2em;
    line-height: 1em;
}
		
		
		
		.work-copy {
    font-size: 50px;
    line-height: 1.2em;
    margin-bottom: 25px;
    padding-top: 10%;
}
		
		.awards {
			max-width: 100%;
		}
		
		.contact-section {
    padding: 2rem 0;
}
		
		.menu-trigger {
    padding: .39rem .1rem;
    margin-right: -20px;
}
		
#nav-overlay nav {
    overflow: auto;
    display: block;
	margin-top: 80px;
		}
		
		.social-link {
    font-size: 1rem!important;
		}

.desktop {
	display: none;
}
		
.mobile {
	display: inline-block;
}

		
.copy01 {
    display: block;
    width: 130%;
    max-width: 640px;
    margin: 100px 0 0 -130px;
    padding: 10px;
    margin-top: 50px;
    /* margin-left: 80px; */
    position: absolute;
}
		
.copy02 {
    display: block;
    width: 130%;
    max-width: 640px;
    margin: 100px 0 0 -210px;
    padding: 10px;
    margin-top: 150px;
    /* margin-left: 80px; */
    position: absolute;
}
		
.copy03 {
    display: block;
    width: 130%;
    max-width: 640px;
    margin: 100px 0 0 -130px;
    padding: 10px;
    margin-top: 170px;
    /* margin-left: 80px; */
    position: absolute;
}
	
.container-works {
    height: 50vh!important;
}
		
h3.works {
    font-size: 2em!important;
	top: 30%!important;
}
		
.footpos {
    text-align: center!important;
}
		
.social li{
	    display: inline;
    padding-left: 10px;
    padding-right: 10px;
    background-color: transparent;
		}

		
	}

@media(min-width:768px) {
header.masthead {
    height: 100vh;
    min-height: 40rem;
    padding-top: 20vh;
    padding-bottom: 0;
}
	
		
}

/* portfolio */

*,
*:before,
*:after {
  box-sizing: border-box;
}

h3.works {
  font-size: 6em;
  color: #fff;
  position: relative;
  position: absolute;
  left: 50%;
  top: 20%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  white-space: nowrap;
}
h3.works:after {
  content: "";
  position: absolute;
  width: 0;
  height: 4px;
  left: 0;
  bottom: -8px;
  background: #fff;
  -webkit-transition: 500ms all ease-in-out;
  transition: 500ms all ease-in-out;
}

a.cta {
  display: block;
  position: absolute;
  height: 50px;
  line-height: 50px;
  width: 120px;
  text-align: center;
  text-decoration: none;
  left: 45%;
  bottom: 20%;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 1;	
      transition: opacity .5s ease-out;
    -moz-transition: opacity .5s ease-out;
    -webkit-transition: opacity .5s ease-out;
    -o-transition: opacity .5s ease-out;	
}
a.cta:before {
  content: "";
  height: 0;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  -webkit-transition: 300ms all ease-in-out;
  transition: 300ms all ease-in-out;

}
a.cta:hover {
  opacity: .5;
    transition: opacity .5s ease-out;
    -moz-transition: opacity .5s ease-out;
    -webkit-transition: opacity .5s ease-out;
    -o-transition: opacity .5s ease-out;	
}

.container-works {
  background: #09f;
  width: 100%;
  height: 100vh;
  position: relative;
}
.container-works .one-half {
  position: absolute;
  width: 50%;
  height: 100%;
  overflow: hidden;
}
.container-works .one-half.left {
  left: 0;
  background-image: url(../img/trafika.gif);
		background-repeat:no-repeat;
	background-attachment:scroll;
	background-position:center center;
	background-size:cover
}
.container-works .one-half.left:before {
  content: "";
  width: 100%;
  height: 100%;
  background: rgba(0,0,0, .8);	
  /*background: rgba(255,0,170, .8);*/
  position: absolute;
}

.container-works .one-half.right {
  right: 0;
  background: url("https://images.unsplash.com/photo-1517134191118-9d595e4c8c2b") center center no-repeat;
  background-size: cover;
}
.container-works .one-half.right:before {
  content: "";
  width: 100%;
  height: 100%;
  background: rgba(0,0,0, 1);
  position: absolute;
}
.container-works .one-half.left, .container-works .one-half.right {
  -webkit-transition: 500ms all ease-in-out;
  transition: 500ms all ease-in-out;
}
.container-works .one-half.left:before, .container-works .one-half.right:before {
  -webkit-transition: 500ms all ease-in-out;
  transition: 500ms all ease-in-out;
}
.container-works.left-is-hovered .left {
  width: 85%;
}
.container-works.left-is-hovered .left h1:after {
  width: 100%;
}
.container-works.left-is-hovered .right {
  width: 15%;
}
.container-works.left-is-hovered .right:before {
  background: rgba(0, 0, 0, 0.65);
  z-index: 2;
}
.container-works.right-is-hovered .right {
  width: 85%;
}
.container-works.right-is-hovered .right h1:after {
  width: 100%;
}
.container-works.right-is-hovered .left {
  width: 15%;
}
.container-works.right-is-hovered .left:before {
  background: rgba(0, 0, 0, 0.65);
  z-index: 2;
}

/* Effects */
/* FadeInUp on Scroll transition */

.fadeInUp-scroll.visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition: all 1s;
}

/* Glith hover */
.case01 {
  position: relative;
  width: 100%;
	max-width: 350px;
  height: 271px;
  margin: 0 auto;
  background: url("../img/thumbs/tv_films_trafika.gif") no-repeat;
}

.case01:before {
  content:'';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 271px;
  background: url("../img/thumbs/tv_films_trafika.gif") no-repeat;
  opacity: .5;
  mix-blend-mode: hard-light;
	
}

.case01:hover:before {
  animation: animate .3s infinite;
}

.case02 {
  position: relative;
  width: 100%;
    max-width: 350px;
    height: 245px;
  margin: 0 auto;
  background: url("../img/thumbs/ecko_unltd.jpg") no-repeat;
}

.case02:before {
  content:'';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
    height: 245px;
  background: url("../img/thumbs/ecko_unltd.jpg") no-repeat;
  opacity: .5;
  mix-blend-mode: hard-light;
}

.case02:hover:before {
  animation: animate .3s infinite;
}

.case03 {
	position: relative;
	width: auto;
	max-width: 263px;
	height: 370px;
	/* margin: 0 auto; */
	background: url("../img/thumbs/audi.jpg") no-repeat;
	z-index: 10;
  left: 15px;
  cursor:pointer;
}
.case03:before {
  content:'';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 263px;
  background: url("../img/thumbs/audi.jpg") no-repeat;
  opacity: .5;
  mix-blend-mode: hard-light;
}

.case03:hover:before {
  animation: animate .3s infinite;
}

.case04 {
  position: relative;
  width: 100%;
  max-width: 350px;
  height: 271px;	
  margin: 0;
  background: url("../img/thumbs/post_production_trafika.gif") no-repeat;
  cursor:pointer;
}

.case04:before {
  content:'';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 271px;
  background: url("../img/thumbs/post_production_trafika.gif") no-repeat;
  opacity: .5;
  mix-blend-mode: hard-light;
}

.case04:hover:before {
  animation: animate .3s infinite;
}

.case05 {
  position: relative;
  width: 100%;
  max-width: 263px;
  height: 263px;	
  margin: 0 auto;
  background: url("../img/thumbs/bohemia.jpg") no-repeat;
  cursor:pointer;
}

.case05:before {
  content:'';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 263px;
  background: url("../img/thumbs/bohemia.jpg") no-repeat;
  opacity: .5;
  mix-blend-mode: hard-light;
}

.case05:hover:before {
  animation: animate .3s infinite;
}

.case06 {
  position: relative;
  width: 100%;
  max-width: 379px;
  height: 28vh;	
  margin: 0 auto;
  background: url("../img/thumbs/robot_trafika.gif") no-repeat;
  cursor:pointer;
}

/*.case06:before {
  content:'';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 28vh;
  background: url("../img/thumbs/robot_trafika.gif") no-repeat;
  opacity: .5;
  mix-blend-mode: hard-light;
}

.case06:hover:before {
  animation: animate .3s infinite;
}*/

.case07 {
  position: relative;
  width: 100%;
  max-width: 350px;
  height: 345px;	
  margin: 0 auto;
  background: url("../img/thumbs/makingof_trafika.jpg") no-repeat;
  cursor:pointer;
}

.case07:before {
  content:'';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 245px;
  background: url("../img/thumbs/makingof_trafika.jpg") no-repeat;
  opacity: .5;
  mix-blend-mode: hard-light;
}

.case07:hover:before {
  animation: animate .3s infinite;
}

@keyframes animate {
  0%{
    background-position: 0 0;
    filter: hue-rotate(0deg);
  }
  10%{
    background-position: 5px 0;
  }
    20%{
    background-position: -5px 0;
  }
 30%{
    background-position: 15px 0;
  }
  40%{
    background-position: -5px 0;
  }
  50%{
    background-position: -20px 0;
  }
  60%{
    background-position: -15px 0;
  }
  70%{
    background-position: 0 -15px;
  }
  80%{
    background-position: -10px -15px;
  }
  90%{
    background-position: 0 0;
  }
  100%{
    background-position: 0 0;
    filter: hue-rotate(-0.25turn);   
/*     filter: hue-rotate(405deg); */
  } 
}

/* Text Appear home */

.visiting-source {
  display: -webkit-box;
  display: flex;
  position: relative;
  width: 100%;
  padding: 0;
  pointer-events: all;
}
.visiting-source .visiting-source__icon {
  position: relative;
  -webkit-box-flex: 0;
          flex: none;
  width: 20px;
  height: 20px;
}
.visiting-source .visiting-source__icon::after {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #00caa8;
  content: "";
  will-change: transform, opacity;
}
.visiting-source .visiting-source__content-wrapper {
    /* position: relative; */
    -webkit-box-flex: 1;
    flex: auto;
    margin: 0;
    padding: 0px 0;
}
.visiting-source .visiting-source__content {
  position: absolute;
  opacity: 0;
  will-change: transform, opacity;
}
.visiting-source.is-glowing .visiting-source__icon::after {
  -webkit-animation-duration: 7s;
          animation-duration: 7s;
  -webkit-animation-name: visiting-source-icon-glow;
          animation-name: visiting-source-icon-glow;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.visiting-source.is-moving .visiting-source__content {
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
  -webkit-animation-name: visiting-source-text-appear;
          animation-name: visiting-source-text-appear;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.visiting-source.is-moving .visiting-source__content:nth-child(1) {
  -webkit-animation-delay: -0.5s;
          animation-delay: -0.5s;
}
.visiting-source.is-moving .visiting-source__content:nth-child(2) {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}
@-webkit-keyframes visiting-source-icon-glow {
  0%,
  85.71428571428571% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.6);
            transform: scale(1.6);
  }
}
@keyframes visiting-source-icon-glow {
  0%,
  85.71428571428571% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.6);
            transform: scale(1.6);
  }
}
@-webkit-keyframes visiting-source-text-appear {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-9px);
            transform: translateY(-9px);
  }
  7.142857142857142%,
  35.714285714285715% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  42.857142857142854% {
    opacity: 0;
    -webkit-transform: translateY(9px);
            transform: translateY(9px);
  }
}
@keyframes visiting-source-text-appear {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-9px);
            transform: translateY(-9px);
  }
  7.142857142857142%,
  35.714285714285715% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  42.857142857142854% {
    opacity: 0;
    -webkit-transform: translateY(9px);
            transform: translateY(9px);
  }
}

/* Scrollorama */

#examples-1 { overflow: hidden; }
#fly-it { position: relative; }
#scale-it { width: 500%; margin: 0px -200%; padding: 0; }

#examples-pin { position: relative; width: 100%; height: 600px; overflow: hidden; margin-bottom: -200px; }
.pin-frame { position: absolute; width: 100%; height: 100%; overflow: hidden; }
.pin-frame h2 { margin-top: 120px; }
#pin-frame-slide { background: #D92B00; margin-left:-100%; }
#pin-frame-wipe  { background: #FFB000; top:100%; }
#pin-frame-wipe h2  { color: #D92B00; }
#pin-frame-bounce  { background: #222438; }
#pin-frame-color  { background: #222438; }
#pin-frame-unpin  { top:100%; }

#examples-2 { z-index: 9999; width: 100%; height: 100%; overflow: hidden; }
#fling-it, #move-it { position: relative; }
#examples-parallax {
	/* padding-top: 200px; */
	height: 800px;
	margin-bottom: -600px;
	overflow: hidden;
	width: 100%;
}
#parallax-it {
    padding: 0;
    position: relative;
    margin-top: 100px;
    width: 30%;
}

#parallax-it-left {
	position: relative;
	/* left: -20px; */
	overflow: hidden;
	margin-top: -100px;
	height: 380px;
	margin: 0;
	width: 33%;
	left: 33%;
}
#parallax-it-right {
	position: relative;
	right: 0;
	overflow: hidden;
	width: 33%;
	margin-top: 0;
	height: 380px;
	left: 66%;
}

#parallax-it-left2 {
	position: relative;
	/* left: -20px; */
	overflow: hidden;
	margin-top: -100px;
	height: 380px;
	margin: 0;
	width: 33%;
	left: 0%;
}

#parallax-it-center {
	position: relative;
	right: 0;
	overflow: hidden;
	/* width: 1100px; */
	margin-top: -450px;
	height: 380px;
	width: 33%;
	margin: -450px 0 0;
	left: 49%;
	/* display: inline-block; */
}
#parallax-it-left3 {
	position: relative;
	/* left: 0; */
	overflow: hidden;
	margin-top: 580px;
	height: 380px;
	width: 33%;
	margin: 380px 0 0;
	left: 11%;
}
#showcase { padding: 60px 0; }
.gallery { width: 960px; margin: 0 auto; text-align: center; }
.gallery figure { text-align: center; float: left; margin: 10px; height: 270px; display: inline-block; }

#howtouse { padding-top: 200px; }

.divider { font-size: 14px; padding-top: 20px; }

.disclaimer {
	font-size: 18px;
	font-style: italic;
	font-weight: normal;
	margin: 0 auto;
}

#instructions { padding-top: 40px; }

#instructions p { margin: 0px auto 20px; }

#instructions-animation { padding-top: 40px; }

#instructions .documentation {
	font-size: 16px;
	text-align: left;
	width: 720px;
	margin: 10px auto 30px;
	padding: 20px 40px;
	text-shadow: none;
	border: solid 1px #69697A;
	color:#C5C3DE;
}

#instructions .param-list {
	font-size: 18px;
	line-height: 1.4;
	padding: 0 18px;
	margin: 1em 0 0;
}

#instructions .param-list-sub {
	padding-left: 36px;
	font-size: 15px;
}

#instructions .param-list li {
	font-weight: normal;
	padding-bottom: 20px;
	text-shadow: 0 2px 1px #000;
}
.param {
	font-style:italic;
}

.param-list small {
	display: block;
	font-weight: normal;
	font-style: italic;
}

#credits { 
	max-width: 860px;
	margin: 0 auto;
	padding: 80px 0; 
}

/* mobile demo */

.mobile-demo #fade-it {
	margin: 400px 0 500px 0;
}
.mobile-demo #examples-1 {
	margin-bottom: 200px;
}
.mobile-demo #instructions {
	width: 800px;
	text-align: left;
	margin: auto;
}
.mobile-demo ul {
	list-style: disc;
	color:#FFFFFF;
	margin: 20px 80px 100px 80px;
}
.mobile-demo #content-wrapper {
	margin-bottom: 100px;
	width: 100%;
}
.mobile-demo h2 {
	width: 90%;
}
.mobile-demo h3 {
	color:#C5C3DE;
}

#newversion {
	position: absolute;
	top: 230px;
	left: 50%;
	margin-left: 250px;
	z-index: 100;
	background-color: #D92B00;
	width: 200px;
	height: 200px;
	border-radius: 100px;
	box-shadow: 0 2px 1px #000;
}
#newversion h2 {
	font-size: 43px;
	margin: 0;
	padding: 30px 0px 0px 0px;
	color: #FFFFFF;
	font-style: normal;
}
#newversion a {
	text-decoration: none;
	padding: 0px 20px 20px 20px;
	display: block;
	font-size: 18px;
	color: #FFFFFF;
}
#newversion a:hover span {
	text-decoration: underline;
}

/* End scrollorama */


/* Burger */

.hamburglar {
  -webkit-transform: scale(1);
          transform: scale(1);
    margin: 0 auto;
    position: relative;
    display: block;
    width: 48px;
    height: 48px;
    background: transparent;
    right: 30px;
    top: -11px;
	  -webkit-touch-callout: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.path-burger {
  position: absolute;
  top: 0;
  left: 0;
  height: 68px;
  width: 68px;
  -webkit-mask: url(#mask);
          mask: url(#mask);
  -webkit-mask-box-image: url(https://raygun.io/upload/mask.svg);
}

.animate-path {
  position: absolute;
  top: 0;
  left: 0;
  width: 68px;
  height: 68px;
}

.path-rotation {
  height: 34px;
  width: 34px;
  margin: 34px 34px 0 0;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  -webkit-transform-origin: 100% 0;
          transform-origin: 100% 0;
}
.path-rotation:before {
  content: '';
  display: block;
  width: 30px;
  height: 34px;
  margin: 0 4px 0 0;
  background: #fff;
}

@-webkit-keyframes rotate-out {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  40% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes rotate-out {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  40% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate-in {
  0% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
  40% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@keyframes rotate-in {
  0% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
  40% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
.hamburglar.is-open .path {
  -webkit-animation: dash-in 0.6s linear normal;
          animation: dash-in 0.6s linear normal;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
.hamburglar.is-open .animate-path {
  -webkit-animation: rotate-in 0.6s linear normal;
          animation: rotate-in 0.6s linear normal;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.hamburglar.is-closed .path {
  -webkit-animation: dash-out 0.6s linear normal;
          animation: dash-out 0.6s linear normal;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
.hamburglar.is-closed .animate-path {
  -webkit-animation: rotate-out 0.6s linear normal;
          animation: rotate-out 0.6s linear normal;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.path {
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
  stroke-linejoin: round;
}

@-webkit-keyframes dash-in {
  0% {
    stroke-dashoffset: 240;
  }
  40% {
    stroke-dashoffset: 240;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes dash-in {
  0% {
    stroke-dashoffset: 240;
  }
  40% {
    stroke-dashoffset: 240;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
@-webkit-keyframes dash-out {
  0% {
    stroke-dashoffset: 0;
  }
  40% {
    stroke-dashoffset: 240;
  }
  100% {
    stroke-dashoffset: 240;
  }
}
@keyframes dash-out {
  0% {
    stroke-dashoffset: 0;
  }
  40% {
    stroke-dashoffset: 240;
  }
  100% {
    stroke-dashoffset: 240;
  }
}
.burger-icon {
  position: absolute;
  padding: 20px 16px;
  height: 68px;
  width: 68px;
}

.burger-container {
  position: relative;
  height: 28px;
  width: 36px;
}

.burger-bun-top,
.burger-bun-bot,
.burger-filling {
  position: absolute;
  display: block;
  height: 4px;
  width: 36px;
  border-radius: 2px;
  background: #fff;
}

.burger-bun-top {
  top: 0;
  -webkit-transform-origin: 34px 2px;
          transform-origin: 34px 2px;
}

.burger-bun-bot {
  bottom: 0;
  -webkit-transform-origin: 34px 2px;
          transform-origin: 34px 2px;
}

.burger-filling {
  top: 12px;
}

.burger-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 68px;
  height: 68px;
}

.svg-ring {
  width: 68px;
  height: 68px;
}

.hamburglar.is-open .burger-bun-top {
  -webkit-animation: bun-top-out 0.6s linear normal;
          animation: bun-top-out 0.6s linear normal;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
.hamburglar.is-open .burger-bun-bot {
  -webkit-animation: bun-bot-out 0.6s linear normal;
          animation: bun-bot-out 0.6s linear normal;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.hamburglar.is-closed .burger-bun-top {
  -webkit-animation: bun-top-in 0.6s linear normal;
          animation: bun-top-in 0.6s linear normal;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
.hamburglar.is-closed .burger-bun-bot {
  -webkit-animation: bun-bot-in 0.6s linear normal;
          animation: bun-bot-in 0.6s linear normal;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes bun-top-out {
  0% {
    left: 0;
    top: 0;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  20% {
    left: 0;
    top: 0;
    -webkit-transform: rotate(15deg);
            transform: rotate(15deg);
  }
  80% {
    left: -5px;
    top: 0;
    -webkit-transform: rotate(-60deg);
            transform: rotate(-60deg);
  }
  100% {
    left: -5px;
    top: 1px;
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
  }
}

@keyframes bun-top-out {
  0% {
    left: 0;
    top: 0;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  20% {
    left: 0;
    top: 0;
    -webkit-transform: rotate(15deg);
            transform: rotate(15deg);
  }
  80% {
    left: -5px;
    top: 0;
    -webkit-transform: rotate(-60deg);
            transform: rotate(-60deg);
  }
  100% {
    left: -5px;
    top: 1px;
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
  }
}
@-webkit-keyframes bun-bot-out {
  0% {
    left: 0;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  20% {
    left: 0;
    -webkit-transform: rotate(-15deg);
            transform: rotate(-15deg);
  }
  80% {
    left: -5px;
    -webkit-transform: rotate(60deg);
            transform: rotate(60deg);
  }
  100% {
    left: -5px;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
  }
}
@keyframes bun-bot-out {
  0% {
    left: 0;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  20% {
    left: 0;
    -webkit-transform: rotate(-15deg);
            transform: rotate(-15deg);
  }
  80% {
    left: -5px;
    -webkit-transform: rotate(60deg);
            transform: rotate(60deg);
  }
  100% {
    left: -5px;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
  }
}
@-webkit-keyframes bun-top-in {
  0% {
    left: -5px;
    bot: 0;
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
  }
  20% {
    left: -5px;
    bot: 0;
    -webkit-transform: rotate(-60deg);
            transform: rotate(-60deg);
  }
  80% {
    left: 0;
    bot: 0;
    -webkit-transform: rotate(15deg);
            transform: rotate(15deg);
  }
  100% {
    left: 0;
    bot: 1px;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@keyframes bun-top-in {
  0% {
    left: -5px;
    bot: 0;
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
  }
  20% {
    left: -5px;
    bot: 0;
    -webkit-transform: rotate(-60deg);
            transform: rotate(-60deg);
  }
  80% {
    left: 0;
    bot: 0;
    -webkit-transform: rotate(15deg);
            transform: rotate(15deg);
  }
  100% {
    left: 0;
    bot: 1px;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@-webkit-keyframes bun-bot-in {
  0% {
    left: -5px;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
  }
  20% {
    left: -5px;
    bot: 0;
    -webkit-transform: rotate(60deg);
            transform: rotate(60deg);
  }
  80% {
    left: 0;
    bot: 0;
    -webkit-transform: rotate(-15deg);
            transform: rotate(-15deg);
  }
  100% {
    left: 0;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@keyframes bun-bot-in {
  0% {
    left: -5px;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
  }
  20% {
    left: -5px;
    bot: 0;
    -webkit-transform: rotate(60deg);
            transform: rotate(60deg);
  }
  80% {
    left: 0;
    bot: 0;
    -webkit-transform: rotate(-15deg);
            transform: rotate(-15deg);
  }
  100% {
    left: 0;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
.hamburglar.is-open .burger-filling {
  -webkit-animation: burger-fill-out 0.6s linear normal;
          animation: burger-fill-out 0.6s linear normal;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.hamburglar.is-closed .burger-filling {
  -webkit-animation: burger-fill-in 0.6s linear normal;
          animation: burger-fill-in 0.6s linear normal;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes burger-fill-in {
  0% {
    width: 0;
    left: 36px;
  }
  40% {
    width: 0;
    left: 40px;
  }
  80% {
    width: 36px;
    left: -6px;
  }
  100% {
    width: 36px;
    left: 0px;
  }
}

@keyframes burger-fill-in {
  0% {
    width: 0;
    left: 36px;
  }
  40% {
    width: 0;
    left: 40px;
  }
  80% {
    width: 36px;
    left: -6px;
  }
  100% {
    width: 36px;
    left: 0px;
  }
}
@-webkit-keyframes burger-fill-out {
  0% {
    width: 36px;
    left: 0px;
  }
  20% {
    width: 42px;
    left: -6px;
  }
  40% {
    width: 0;
    left: 40px;
  }
  100% {
    width: 0;
    left: 36px;
  }
}
@keyframes burger-fill-out {
  0% {
    width: 36px;
    left: 0px;
  }
  20% {
    width: 42px;
    left: -6px;
  }
  40% {
    width: 0;
    left: 40px;
  }
  100% {
    width: 0;
    left: 36px;
  }
}

/* End Burger */

@media(max-width:800px){
  html {
    overflow-x: hidden;
    width: 100vw;
    max-width: 100vw;
    
}
  #video-background {
    position: fixed;
    left: 0;
    bottom: 0px;
    top: -50vh;
    min-width: 100%;
    min-height: 200vh;
    width: auto;
    height: 100vh;
    z-index: -100;
    object-fit: cover;
    object-position: center;
    left: -250%;
  }
  #examples-parallax {
    height: auto;
  }
  .case03-txt-pos {
    padding: 228px 0 0 12px;
  }
  h3.case-txt {
    font-size: 1.35em;
    padding-right: 15%;
  }
  .case-txt-pos {
    padding: 200px 0 0 12px;
  }
  .case07-txt-pos {
    padding: 228px 0 0 20px;
    position: absolute;
  }
  header.masthead {
    width: 100vw;
  }
  .copy-home-pink {
    position: relative;
    float: left;
    left: 280px;
    bottom: 0px;
    z-index: 1;
    width: 386px;
    padding-left: 56px;
    background-image: url(../img/arrow/arrow-left-up-pink.svg);
    background-position: left top;
    background-size: 47px;
    background-repeat: no-repeat;
    opacity: 1;
    color: rgb(236, 0, 140);
    font-size: 39px;
    line-height: 34px;
    letter-spacing: 0.7px;
    text-align: left;
    margin-top: 70px;
    font-family: kremlin-pro-web !important;
    /* top: 0; */
}
  #mainNav .navbar-brand {
    font-size: 15px;
  }
  body {
    max-width: 100vw;
  }
  #mainNav {
    width: 100vw;
  }
  .hamburglar {
    position: absolute;
  }
  .fixed-top {
    top: 10px;
  }
  #clients .col-lg-2 {
      width: 33%;
  }
  div#examples-parallax div {
      margin-bottom: 100px;
  }
  #nav-overlay.open nav {
    top: 0;
    max-height: 90vh;
    overflow-y: scroll;
    padding-bottom:50px;
}
.link {
	font-size: 2.5rem;
}
}

.sayhello {
  display: inline-block;
  width: 100%;
}
button.fancybox-button.fancybox-button--zoom, button.fancybox-button.fancybox-button--play {
  display: none!important;
}
.fancybox-button.fancybox-button--close {
  position: absolute;
  right: 20px;
  top: 20px;
  background: url(/img/svg/close.svg) center center / 90% no-repeat;
  width: 45px;
  height: 45px;
  z-index: 22222;
  cursor: pointer;
}

@media(max-width:600px){
  .closevideo {
      right: 20px!important;
      top: 20px!important;
  }
.case03 h3.case-txt {
  margin-top: 100px;
}
.case04 h3.case-txt {
  margin-top: 20px;
}
.case07-txt-pos {
  padding: 198px 0px 0px 20px;
}
  .case02 {
    height: 305px;
}
.top-mobile {
  padding-top: 80px;
}
.top-mobile2 {
  padding-top: 80px;
}
.case05 {
  height: 363px;
}
.case04 {
  height: 371px;
}
h4.foot {
  margin-bottom: 100px;
}
  h3 {
    font-family: "Futura Std";
    font-weight: bold;
    font-style: normal;
    text-transform: uppercase;
    font-size: 3.7em;
    line-height: 1em;
    padding: 35px 0px 0px;
    width: 90%;
  }
  #mainNav .navbar-brand {
    font-size: 15px;
  }
  .hamburglar {
    margin-top: 8px;
}
  .copy-home-pink {
    left: 150px;
    font-size: 26px;
    margin-top: 30px;
  }
  header.masthead {
    top: 10vh;
  }
  #parallax-it-left {
    width: 70%;
    left: 15%;
    margin-top:250px;
  }

  #parallax-it-right {
    right: 0px;
    width: 70%;
    margin-top: 530px;
    height: 380px;
    left: 33%;
    z-index: 11;
  }
  #parallax-it-left2 {
        margin-top: 0px;
        margin-bottom: 0px;
    width: 70%;
    left: 0;
    margin-top: 480px;
    margin-bottom: 100px !important;
    z-index: 12;
  }
  #parallax-it-center {
    margin-top: -810px;
    height: 380px;
    width: 70%;
    margin: -750px 0 0;
    left: 33%;
    z-index: 11;
  }
  #parallax-it-left3 {
    margin-top: 1000px;
    height: 380px;
    width: 70%;
    margin: 1100px 0 0;
    left: 0;
    z-index: 14;
  }
  div#examples-parallax div {
    margin-bottom: 0;
  }
  .who-section {
    margin-top: 1800px;
  }
  .back-to-top[data-v-5533579c] {
    padding: 0px;
    position: fixed;
    right: -1.1rem;
    bottom: 60px;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    background: 0 0;
    color: #fff;
    opacity: 1;
    font-family: 'Lato', sans-serif;
    font-size: 1em;
    font-weight: 400;
    cursor: pointer;
    mix-blend-mode: difference;
    z-index: 20;
  }
  h3.mob {
    font-size: 3.5em;
    padding: 102px 0 30px;
    width: 90%;
  }
  .clients-section {
    margin-top: 50px;
  }
  #clients .col-lg-2 {
    width: 33.33%;
    padding: 5px;
  }
  a.social-footlink.reel {
      margin-top: 45px;
      position:absolute;
  }
  .clients-section {
      padding: 150px 0% 0px;
      min-height: 100vh;
      height: auto;
      width: 100vw;
  }
  .case-section .container {
      padding: 30px 0;
  }
}

@media(max-width:380px){
  header.masthead {
      top: 0;
  }
  .scroll-btn {
    margin-top: -50px;
}
}

@media(max-width:360px){
  .clients-section {
    margin-top: 200px;
  }
  
}
@media(max-width:330px){
  h3 {
      font-size: 3em;
  }
  .copy-home-pink {
      left: 130px;
      font-size: 20px;
      margin-top: 50px;
      line-height: 1.4;
  }
    a.social-footlink.reel {
      margin-top: 90px;
  }
  
}


/*INLINE STYLES*/

#pageLoader
{
    font-size:12px;
    color:#fff;
    position:fixed;
    top:5px;
    left:5px;
    z-index:9999999;
    opacity:1;
}
div#about {
    height: 20000px;
    -webkit-overflow-scrolling: touch;
}
#clients .img-fluid{
    transition:.35s all ease;
}
#clients .img-fluid:hover{
    transition:.35s all ease;
    transform:scale(1.05);
}
#work .img-fluid {
    transition: .35s all ease;
}
#work .img-fluid:hover {
    transition: .35s all ease;
    transform: scale(1.1);
}
#work .text-left {
    overflow: hidden;
}
.hamburglar {
    -webkit-transform: scale(.65);
    transform: scale(.65);
    cursor: pointer;
}

#nav-overlay nav {
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
    opacity: 0;
    top:0;
}

#nav-overlay.indexopen nav {
    opacity:1;
    -webkit-transition: all 1s ease;
    transition: all all ease;
    top:0;
}
#nav-overlay::before, #nav-overlay::after {
    -webkit-transform: none;
    -webkit-transform: none;
    -webkit-transform: none;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;

}

body{overflow-x:hidden;}

#video-background {
    z-index: -2;
}

.contservices{transition: background-color 1s ease;}
#popVideo {
    background: rgba(0,0,0,.9);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    z-index: 9999;
    display:none;
}
.closevideo {
    position: absolute;
    right: 40px;
    top: 25px;
    background: url(/img/svg/close.svg);
    width: 45px;
    height: 45px;
    z-index: 22222;
    background-size: 90%;
    background-position: center;
    cursor: pointer;
    background-repeat: no-repeat;
}
.videopop {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#work .img-fluid {
    cursor: pointer;
}
.fancybox-bg {
  background: #000!important;
}