/* CSS Document */
/* Colors */
.accent-color {color: rgba(255,93,0,1.00)}
.accent-color-B {background-color: rgba(255,93,0,1.00)}

.shite-green    {background-color: #bcd200 ;}
.green          {background-color: #00ac30 ;}
.light-blue     {background-color: #01c9ff ;}
.deep-blue      {background-color: #1900ad ;}
.purple         {background-color: #6f32ff ;}
.pink           {background-color: #ff3cae ;}
.yellow         {background-color: #ffdf09 ;}
.soft-orange    {background-color: #ff9f01 ;}
.light-orange   {background-color: #ff9f01 ;}
.orange         {background-color: #ff5d00 ;}
.red            {background-color: #ff2e01 ;}
.heavy-red      {background-color: #fb0000 ;}

.multiply       {mix-blend-mode: multiply!important;}
.fill           {
    mix-blend-mode: multiply!important;
    -webkit-filter: grayscale(1); /* Webkit */
    filter: gray; /* IE6-9 */
    filter: grayscale(1); /* W3C */
}
.grayscale      {
    -webkit-filter: grayscale(1); /* Webkit */
    filter: gray; /* IE6-9 */
    filter: grayscale(1); /* W3C */
}

.white {color: #fff;}
.grey {color: #999999;}
.black {color: #000;}

.white-B {background-color: #fff;}
.grey-B {background-color: #999999;}
.greyA-B {background-color: #333333;}
.black-B {background-color: #000;}

.line {
    height: 1px;
    width: 100%;float: left;clear: left;
}
.space-top {height: 80px;width: 100%;float: left;clear: left;}
.space-A {
    height: 20px;
    width: 100%;float: left;clear: left;
}
.space-B {
    height: 40px;
    width: 100%;float: left;clear: left;
}
.space-C {
    position: relative;
    height: 10px;
    width: 100%;
    float: left;
    clear: left;
}
.pad-44 {padding-left: 44px; padding-right: 44px;}
.pad-22 {padding-left: 22px; padding-right: 22px;}

.wide {position: relative; width: 100vw;clear: left;float: left;}
.clear-left {clear: left;float: left; position:relative; display: block;}
.left {clear: left;float: left;position: relative;display: block;}
.special-clear {clear: ; }


#preloader {
	position: fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
    height: 100vh;
    width: 100vw;
    background-color: rgba(255,93,0,1.00) ;
	z-index: 9999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999;
}
#status {
	width:100px;
	height:100px;
	position:relative;
	left: 50%;
	top: 50%;
    transform: translateX(-50%) translateY(-50%);
    background-image: url(../img/site-root/symbols-a.gif);
	background-repeat:no-repeat;
	background-position:center;
    background-size: contain;
    mix-blend-mode: multiply;
}
#fullpage {
    z-index: 10;
    clear: left;
}

.video-box{
    display: block;
    float: left;
    clear: left;
    position: relative;
    top: 0px;
    left: 0px;
	
    width: 100%;
    height: inherit;
    
    border: 0px solid transparent!important;
    -moz-border-radius:10px!important;
    -webkit-border-radius:10px!important;
    border-radius: 10px!important;
    overflow: hidden!important;
    
    z-index: 1;
}

.corner-top-left, .corner-top-right, .corner-bot-left, .corner-bot-right {
    width: 10px;
    height: 10px;
    position: absolute;
    background: url(../img/site-root/corner-sprite.png) no-repeat;
    z-index: 1;
   }


#myVideoX {
    position: absolute;
	right: 0;
	bottom: 0;
	top:0;
	width: 100%;
    height: 100%;
	background-size: 100% 100%;
    background-color: black;
	background-image: /* video */;
    background-position: center center;
    background-size: contain;
	object-fit: cover;
	z-index:0; 
	-webkit-filter: grayscale(100%); 
	filter: grayscale(100%);
	opacity: 1;	
    
    
    border: 0px solid transparent!important;
    border-radius: 10px!important;
}

#myVideo {
    position: static;
	right: 0;
	bottom: 0;
	top:0;
	width: 100%;
    height: 100%;
	background-size: 100% 100%;
    background-color: black;
	background-image: /* video */;
    background-position: center center;
    background-size: contain;
	object-fit: cover;
	z-index:0; 
	-webkit-filter: grayscale(100%); 
	filter: grayscale(100%);
	opacity: 1;	

    -webkit-transform: translateZ(0);
    
    border: 0px solid transparent!important;
    border-radius: 10px!important;
    
    display: grid;
}



.flasher {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
	animation: flash 0.1s infinite;
}
.overlayer {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
	animation: prisma 30s infinite;
}
.fullwidth_images-cedric {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    top: 0;
    background-image: url(../img/site-root/me-4.jpg);
	background-repeat:no-repeat;
	background-position:top left;
    background-size: cover;
}
.footer {
    float: left;
    clear: left;
    position: relative;
}
.fade {
  opacity: 0;
  transform: translate(100px, 0px); 
  transition: all 1s;
}

.fade.visible {
  opacity: 1;
  transform: translate(0, 0); 
}
.wrap {
    margin-left: auto;
    margin-right: auto;
    height: auto;
    position: relative;
    clear: left;
    z-index: 100;
    width: 100vw;
    overflow-x: hidden;
    overflow-y: scroll;
    background-color: #ffffff;
}
.wrap > div {
    width: 100vw;
    position: relative;
    float: left;
    clear: left;
}
.wrap-2 {
    margin-left: auto;
    margin-right: auto;
    height: auto;
    position: relative;
    z-index: 100;
    width: 100vw;
    overflow-x: hidden;
    overflow-y: scroll;
}
.wrap-2 > div {
    width: 100vw;
    position: relative;
    float: left;
    clear: left;
}
.back-to-top {
    position: absolute;
    right: 44px;
    font-size: 40px;
    z-index: 1000000;
}
input.buttons {
    float: left;
    clear: left;
	
    height: 40px;
    width: auto;
    padding-left: 20px;
    padding-right: 20px;
	
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    
    font-size: 14px!important;
    font-family: 'regular'!important;
    font-weight: normal!important;
	line-height: auto!important;
    text-transform: none!important;
    
	border-radius: 30px!important;
    border-color: #000!important;
    border-width: 2px!important;
    -webkit-box-shadow: none!important;
    box-shadow: none!important;
	
	color: #fff!important;
    background-color:#000!important;
	
	transition: all 0.4s linear;
}
/* ---------------------------- */
/* MENU + HEADER */
/* ---------------------------- */
#the-dream-factory {display: none;}
#projects {display: none;}
#case-studies {display: none;}
#about {display: none;}
#contact {display: none;}
#jobs {display: none;}

#utopia {display: block;}
#wrangler-thang {display: block;}
#redbull-lefto {display: block;}
#leo {display: none;}
#paradise-city {display: block;}

#utopia-home {display: block;}
#wrangler-thang-home {display: block;}
#redbull-lefto-home {display: block;}
#leo-home {display: none;}
#paradise-city-home {display: none;}


/* Menu */
.work {display: none!important;}
.about {display: block;}
.contact {display: block;}
.lab {display: block;}
.links {display: block;}

/* Cases */
/*allways inline-block or none with !important, never just block*/
.LightAndDisruption {display: inline-block}
.FutureOfMobility {display: inline-block;}
.DeRoo {display: none!important;}


body{
}
body.no-scroll, body.also-no-scroll {
}
header {
    position: fixed;
    z-index: 99999999999999;
    background-color: #ffffff;
    top: 0;
    left: 0;
    height: 60px;
    width: 100vw!important;
    display: block;
}
.body-touch {
    display: block;
    position: fixed;
    z-index: 999;
    background-color: orangeX;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
}
.container-logo {
    position: fixed;
    width: 180px;
    height: 50px;
    top: 0;
    left: 0;
    padding-top: 20px;
    padding-left: 44px;
    cursor: pointer!important;
    z-index: 999999999999999999999999999999;
}
.container-logo a, .container-logo a h1 {cursor: pointer!important;}
.container-menu {
    position: fixed;
    float: left;
    width: 100%;
    height: 100vh;
    top: -100vh;
    right: 0px;
    padding-top: 20px;
    padding-left: calc(50% + 22px);
    cursor: pointer;
    opacity: 1;
    
    background-color: #fff;
    
    transition: 0.5s ease ;
}
.container-menu.activate {
    top: 0px;
    right: 0;
    
    transition: 1s ease ;
}
.container-menu .gradient {
    position: absolute; 
    top: 0;
    right: 0;
    width: 100vw;
    height: 100%;
    
    background: rgb(255,255,255);
    background: -moz-linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
    background: -webkit-linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#ffffff",GradientType=1);
}
.container-location, .container-quote {
    position: fixed;
    display: inline-block;
    width: 50%;
    height: 50px;
    top: 0px;
    left: calc(50vw - 0px)!important;
    padding-top: 20px;
    padding-left:20px;
    padding-right:20px;
    
    transition: 0.5s ease ;
}
.container-close {
    position: fixed;
    width: 60px;
    height: 50px;
    top: 0px;
    right: 0;
    padding-top: 20px;
    padding-right:20px;
    
    transition: 0.5s ease ;
}
.container-location.in-activate, .container-close.in-activate,  .container-quote.in-activate {
    top: -50px;
    opacity: 0;
    
    transition: 0.5s ease ;
}
.container-menu h1, .container-location a, .container-location .slash,
.container-close h1, .container-close a, .container-close .slash{
    position: relative;
    z-index: 99;
    text-transform: capitalize;
    color: #cccccc;
    transition: 0.5s ease ;
    cursor: pointer;
}
.container-menu h1, .container-menu p {
    position: relative;
    float: left;
    clear: left;
    width: auto;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    
}
.container-menu h1:hover {
    color: #000000;
    transition: 0.5s ease ;
}
.container-menu h1.active {
    color: #000000;
    transition: 0.5s ease ;
}
.container-location p, .container-location h1, .container-location a
,.container-close p, .container-close h1, .container-close a {
    position: relative;
    float: left;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    text-transform: capitalize;
    cursor: pointer;
}
.container-close p {
    width: 21px;
    height: 21px;
    background-image: url(../img/site-root/_close.png);
    background-position: center;
    background-repeat: no-repeat no-repeat;
    background-size: 16px;
    
}
.container-location div.info-button {
    position: absolute;
    float: left;
    left: calc(50% + 0px);
}
.container-location .indicator {
    position: relative;
    float: left;
    left:auto;
}
.container-location div p, .container-location div h1 {
    color: #cccccc!important;
    transition: 0.5s ease ;
}
.container-location.black div p, .container-location.black div h1 {
    color: #000000!important;
    transition: 0.5s ease ;
}

.container-location .active {display: block;}
.container-location .in-active {display: none;}
.container-location .slash {
    transform: scale(1.2);
    margin-top: 1px;
    margin-right: 4px!important;
    margin-left: 4px!important;
}
h1.menu-item {
    border-bottom: solid 1px #000000;
}
h1.close-item {
    border-bottom: solid 1px rgba(0,0,0,0);
    transition: 0.5s ease ;
}
h1.close-item:hover {
    border-bottom: solid 1px #000000;
    transition: 0.5s ease ;
}
.none-at-620p {display: block!important;}
.display-at-620p {display: none!important;}

.before {margin-right: 1px;}
.after {margin-left: 6px;}
/* /Menu */



/* ---------------------------- */
/* Containers */
/* ---------------------------- */
.container {
   background-color: red;
   position: relative;
   width: 100%;
}

.a169 {padding-top: 56.25%; /* 16:9 Aspect Ratio */}
.force169 {height: 54.25vw}

/* ---------------------------- */
/* Containers */
/* ---------------------------- */
 

/* KEYFRAMES */
#menu.active > .margin {
	animation: margin 0.82s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes margin {
  0% {
	  height: 8px;
  }

  100% {
	  height: 0px;
  }
}
#menu.active > .row > .dot{
	animation: dot 0.82s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes dot {
  0% {
    width: 4px;
    height: 4px;
  }

  100% {
    width: 13px;
    height: 10px;
  }
}
#menu.active > .row > .space {
	animation: spacer 0.82s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes spacer {
  0% {
    width: 10px;
    height: 4px;
  }

  100% {
    width: 0px;
    height: 10px;
  }
}
.shake:hover {
  animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}
@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}
.shaker {
  animation: shaker 10s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
  	animation-iteration-count: infinite;
	animation-fill-mode: forwards;
}

@keyframes shaker {
  4%, 20% {
    transform: translate3d(-1px, 0, 0);
  }
  
  8%, 15% {
    transform: translate3d(2px, 0, 0);
  }

  10%, 14%, 16% {
    transform: translate3d(-4px, 0, 0);
  }

  15%, 18% {
    transform: translate3d(4px, 0, 0);
  }

  45%, 100% {
    transform: translate3d(0, 0, 0);
  }
}

#menu-appear {position: fixed;z-index: 1000000;height: 100vh;width: 100vw;left: -120vw;opacity: 0;
    transition: all 0.5s cubic-bezier(.69,.01,1,.01);
}
#menu-appear.active {left: 0%;opacity: 1;
    transition: all 0.5s cubic-bezier(.83,.01,75,.39);
}
#stripes  {
    position: fixed;
    top: 0%;
    left: 0px;
    height: 200%;
    width: calc(100% - 0px);opacity: 0;z-index: 1;
    background:url("../img/site-root/streepjes-black.png") 50% 50% / cover no-repeat;
    transition: all 1s linear;
    z-index: 0;
}
#stripes.move  {opacity: 1;top: -100%;transition: all 1s linear;
    z-index: 20;
}

/* ---------------------------- */
/* MENU + HEADER END*/
/* ---------------------------- */

/* ---------------------------- */
/* Menu appear*/
/* ---------------------------- */

.type {
    position: relative;
    float: left;clear: left;
    margin-left: 0px;
    overflow: hidden;
    transition: all 1s linear;
}
.type > .A {
    float: left;clear: none;
    font-size: 28px;
    margin-top: 15px;
    margin-right: 10px;
    
    margin-left: -50px;
    width: 40px;
    height: auto;
    opacity: 0;
	transition: all 0.3s linear;
}
.type > .B {
    float: left;clear: none;
    
}
.type:hover > .A {
    opacity: 1;
    margin-left: 0px;
}
.type.enter > .A {
    margin-top: 6px;
    margin-right: 5px;
    width: 30px;
    opacity: 1;
    margin-left: 0px;
	transition: all 0.3s linear;
}
.type.enter > .B {
	transition: all 0.3s linear;
}
.downer {
    position: absolute;
    bottom: 44px;
}

/* ---------------------------- */
/* Sections */
/* ---------------------------- */

.intro {
    float: left;
    height: auto;
    clear: none;
    width: 100%;
    position: absolute;
    top: auto;
    left: 0px;
    bottom: 0px;
    right: auto;
    padding-right: 44px;
    padding-left: 44px;
    padding-bottom: 44px;
	
	z-index: 50;
}

.blackbox {
    width: 100%;
    min-height: 320px;
    height: 50vh;
    background-color: #000000;
    clear: left;
    display: block;
}
.blackbox > div {
    width: 100%;
    height: 100px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    overflow: hidden;
}
.blackbox h1.A {
    margin-top: 0px;
	transition: all 0.2s ease;
}
.blackbox h1.B {
    margin-top: 100px;
	transition: all 0.2s ease;
}
.blackbox:hover h1.A {
    margin-top: -100px;
	transition: all 0.2s ease;
}
.blackbox:hover h1.B {
    margin-top: 0px;
	transition: all 0.2s ease;
}


/* ---------------------------- */
/* Buttons + stuff */
/* ---------------------------- */

.arrowhead {
    position: relative;
    float: left;
    clear: left;
    height: 60px;
    width: auto;
}
.arrowhead > .icons {
    font-size: 60px;
    float: left; clear: none;
    margin-right: 22px;
}
.arrowhead > h3 {
    float: left; clear: none;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    
}

/* ---------------------------- */
/* Windows*/
/* ---------------------------- */

/*-- Paddings --*/
.split-100 {width: 100%!important; float: left;}
.split-75 {width: 75%!important; float: left;}
.split-66 {width: 66%!important; float: left;}
.split-50 {width: 50%!important; float: left;}
.split-33 {width: 33.33333%!important; float: left;}
.split-25 {width: 25%!important; float: left;}
.split-6 {width: 16.6666666667%!important; float: left;}
.split-text {width: 50%!important; float: left;}
.split-text-75 {width: 75%!important; float: left;}


.slide-100 {width: 100%!important; float: left;}
.slide-75 {width: 75%!important; float: left;}
.slide-66 {width: 66%!important; float: left;}
.slide-50 {
    width: 50%!important; 
    float: left;
    padding: 22px;
}
.slide-33 {width: 33.33333%!important; float: left;}
.slide-25 {width: 25%!important; float: left;}
.slide-text {width: 50%!important; float: left;}
.slide-text-75 {width: 75%!important; float: left;}


/*-- Slides --*/

.slides{
    position: relative;
    display: block;
    clear: left!important;
    float: left;
}

.navbox {
    position: absolute;
    z-index: 50;
    bottom: 11px;
    padding-right: 11px;
    padding-left: 11px;
    height: 40px;
    width: 100%;
}
.arrows {
    position: absolute;
    right: 11px;
    width: 90px;
    height: auto;
}
.arrows > div {
    width: 40px;
    height: 40px;
    background-color: aqua;
}
.arrows > div:hover {
    width: 40px;
    height: 40px;
    background-color: purple;
}
.arrows .prev {position: relative; left: 0; float: left; font-size: 40px;}
.arrows .next {position: relative; right: 0; float: right; font-size: 40px;}
.info {
    position: absolute;
    left: 11px;
    width: 90px;
    height: auto;
}
.info .plus {position: relative; left: 0; float: left; font-size: 40px;}
.info .in {position: relative; right: 0; float: right; font-size: 40px;}


/*-- /Paddings --*/
.blackandwhite {
    filter: grayscale(100);
}
.images {
    margin-bottom: 44px;
}
.window {
    position: relative;
    float: left;
    margin: 0px;
    padding-left:22px;
    padding-right: 22px;
	transition: all 0.3s linear;
}

.w-1 {
    color: #000;
    float: left;clear: left;
}
.w-2 {
    float: left;clear: left;
	transition: all 0.3s linear;
}
.w-3 {
    color: #999999;
    float: left;clear: left;
	transition: all 0.3s linear;
}
.window:hoverX {
    background-color: #000;
}
.window:hover > .w-1   {
    text-decoration: underline;
}
.window:hoverX > .w-1,
.window:hoverX > .w-3   {
    color: #fff;
}
.facebook-responsiveX {
    overflow:hidden;
    padding-bottom:56%;
    position:relative;
    height:100%;
}
.facebook-responsiveX  iframe {
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}
.container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
	float: left;
    top: 0;
    left: 0;
    margin:0;
	transition: all 0.3s linear;
}
.video-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.iframe {
    display:block;
    width:100%;
    height:100vh;
}

.w-50 {
    width: calc(50vw - 44px)!important;
    height: 28.125vw!important;
}
.holder {
	position: relative;
    width: calc( 50vw - 88px);
    height: calc( 28.1vw - 50px);
	overflow: hidden!important;
}
.image-box {
    display: block;
    float: left;
    clear: left;
    position: relative;
    top: 0px;
    left: 0px;
    
    overflow: hidden;
	
    width: 100%;
    height: inherit;
    
    border: 0px solid transparent!important;
    border-radius: 10px!important;
    overflow: hidden!important;
    
    z-index: 1;
}

.window .image-box,
.window .image-box-no {
    float: left;
    clear: left;
    position: relative;
    top: 0px;
    left: 0px;
    
    overflow: hidden;
	
    width: 100%;
    height: inherit;
    
    border: 0px solid transparent;
    border-radius: 10px;
    overflow: hidden!important;
	
    z-index: 1;
}
.slider-frame {
    width: 100%;
    height: 100%!important;
    float: left!important;
}
.slide img {
    width: 100%;
    height: auto;
}
.window .image-box >  img, 
.window .image-box > video, 
.window .image-box-no >  img, 
.window .image-box-no > video {
	float: left;
    clear: none;
    top: 0;
    left: 0;
    margin:0;
	
    width: 100%;
    height: auto;
	transition: all 0.3s linear;
    
    filter: grayscale(1);
}

.client-logo {
    width: 100%;
    height: auto;
}
.cross {
    display: none!important;
    position: absolute!important;
    width: 80px!important;
    height: auto!important;
    top: calc(50% - 40px)!important;
    left: calc(50% - 40px)!important;
    z-index: 5!important;
}
.copyright {
    position: absolute;
    bottom: 0;
    right: 10px;
    left: auto;
    top: auto;
    opacity: 0;
}
.colorscreen {
    display: block;
    position: absolute!important;
    width: calc(100%)!important;
    height: 100%!important;
    top: 0px!important;
    left: 0px!important;
    z-index: 2;
    mix-blend-mode: multiply;
    opacity: 0.1;
	transition: all 0.4s linear;
    background-color: #E9E9E9!important;
}
.colorscreen.radius {
    border: 0px solid transparent!important;
    border-radius: 10px!important;
}
figure:hover .image-box:hover >  img, 
.window .image-box:hover >  img, 
.window .image-box:hover >  video {
	opacity: 1;
	transition: all 0.3s linear;
}
figure:hover .image-box:hover > .copyright,
.window .image-box:hover > .copyright {
    opacity: 1;
}
figure:hover .image-box:hover > img.cross,
.window .image-box:hover > img.cross{
    transform: rotate(90deg);
}
figure:hover .image-box:hover > .colorscreen,
.window .image-box:hover > .colorscreen,
.window .image-box:hover > .colorscreen{
    opacity: 0;
}
figure:hover .image-box:hover > div.B,
.window .image-box:hover > div.B,
.window .image-box:hover > div.B{
	text-decoration: underline;
    color: #000!important;
	transition: all 0.3s linear;
}

.giphydiv {
    z-index: 0!important;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}
.giphydiv iframe {
    z-index: 0!important;
}
.giphy-embed {
    -webkit-filter: grayscale(1); /* Webkit */
    filter: gray; /* IE6-9 */
    filter: grayscale(1); /* W3C */
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}
.iframebox {
    overflow: hidden!important;
    display: block;
    width:100%;
    height:auto;
    position:relative;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
    background-color: aqua;
    margin-bottom: 0px;
}
.iframebox iframe {
    position: relative;
	float: left;
    clear: none;
    top: 0%;
    left: 0px;
    margin:0;
	transform: translateY(-0%);
    border: none;
    width: 100%!important;
	transition: all 0.3s linear;
}


/* ------------------------------------------------------------------------------------------------- */
/* Colums */
#columns {
	column-width: 20vw!important;
	column-gap: 0;
    width: 100%;
	max-width: 100vw;
	margin: 0px auto;
	transition: all 0.3s linear;
}

div#columns figure {
    width: 20vw;
    height: auto;
	padding: 22px;
	transition: opacity .4s ease-in-out;
    display: inline-block;
    column-break-inside: avoid;
    
    border: 0px solid transparent!important;
    border-radius: 10px!important;
    
    background-color: brownX;
}

div#columns figure img,
div#columns figure video {
	width: 100%; height: auto;
    margin-bottom: 0px;
    
    border: 0px solid transparent!important;
    border-radius: 10px!important;
	transition: all 0.3s linear;
}

/* ------------------------------------------------------------------------------------------------- */
/* /Colums */

/* ---------------------------- */
/* Footer*/
/* ---------------------------- */

.socials.A >  a > input,
.socials.B >  a > input{
    float: left;
    clear: none;
	
    height: 60px;
    width: 60px;
	
    margin-top: 22px;
    margin-left: 0px;
    margin-right: 11px;
    margin-bottom: 0px;
	
    font-family: 'regular';
    font-size: 16px;
    text-transform: uppercase;
	
    -webkit-box-shadow: none;
    box-shadow: none;
    
    border-radius: 30px;
    border-width: 2px;
    border-color: inherit;
	color: inherit;
    background-color: inherit;
	
	transition: all 0.4s linear;
}
.socials.A > a > input {
    border-color: #000;
	color: #000;
    background-color: rgba(0,0,0,0);
}
.socials.B > a > input {
    border-color: #fff;
	color: #fff;
    background-color: rgba(0,0,0,0);
}
.socials.A > a:hover > input {
    border-color: #000;
	color: #fff;
    background-color: #000;
}
.socials.B > a:hover > input {
    border-color: #fff;
	color: #000;
    background-color: #fff;
}
/* ---------------------------- */
/* Interface*/
/* ---------------------------- */
#interface {
    position: fixed;
    z-index: 100;
	right: 0;
	bottom: 0;
	top:0;
	width: auto;
    height: 100%;
}
#navigate {
    position: absolute;
    right: 44px;
    left: auto;
    bottom: auto;
    top: 50%;
    z-index: 1000;
    width: 80vw;
}
#navigate > #nextArrow,
#navigate > a {
    position: relative;
    float: right;
    font-size: 60px;
    margin-top: 0px;
	transition: all 0.3s linear;
    z-index: 10;
}
#navigate > div:hover {
    opacity: 0.7;
	transition: all 0.3s linear;
}
#navigate > #arrowMove {
    position: absolute;
    top: 0;
    left: auto;
    right: 100%;
    font-size: 60px;
    opacity: 0;
	transition: all 0.3s linear;
	animation: speed 1s infinite;
    mix-blend-mode: screen;
}
@keyframes speed {
  0% {
    right: 100%;
    opacity: 0;
  }
  50% {
  }
  90% {
    opacity: 1;
  }
  100% {
    right: 0%;
    opacity: 0;
  }
}
.done{
    height: 0px;
}
.video {
    position: fixed;
	right: 0;
	bottom: 0;
	top:0;
	width: 100%;
    height: 100%;
	background-size: 100% 100%;
    background-color: black;
	background-image: /* video */;
    background-position: center center;
    background-size: contain;
	object-fit: cover;
	z-index:0; 
	-webkit-filter: contrast(100%); 
	filter: contrast(100%);
}
.block {display: block;}
.none {display: none;}
.block-opacity {opacity: 1;transition: all 0.3s linear;}
.none-opacity  {opacity: 0;transition: all 0.3s linear;}
#navigate.arrowShow  {opacity: 1;transition: all 0.3s linear;}
#navigate.arrowHide {opacity: 0;transition: all 0.3s linear;}


#chat {
    position: fixed;
    left: 0px; 
    top: 0px;
    width: auto;
    z-index: auto;
}
#profile-picture {
    position: absolute;
    width: 60px;
    height: 60px;
    
    background-color: #fff;
    border-radius: 30px;
    
    background-image: url(../img/site-root/profile-cedric.png);
    background-size: 220px 220px;
    background-position: 50% -48px 
}
.profile-picture {
    position: relative;
    width: 60px;
    height: 60px;
    top: 0px;
    
    background-color: #fff;
    border-radius: 30px;
    
    background-image: url(../img/site-root/profile-cedric.png);
    background-size: 220px 220px;
    background-position: 50% -48px 
}
.messages {
    margin-left: 80px;
    clear: left;
    float: left;
}
.wider-1 {
    position: relative;
    float: left;
    clear: left;
    display: block;
    height: 250px;
    width: 100%;
}

/* CALLBACKS */
#loop-video.vid-add,
#before-video.vid-add,
#strategy-video.vid-add,
#design-video.vid-add,
#techno-video.vid-add,
#market-video.vid-add,
#end-video.vid-add{
    opacity: 1;
}
#loop-video.vid-remove,
#before-video.vid-remove,
#strategy-video.vid-remove,
#design-video.vid-remove,
#techno-video.vid-remove,
#market-video.vid-remove,
#end-video.vid-remove{
    opacity: 0;
}
#section-1, #section-2, #section-3, #section-4, #section-5, #section-6, #section-7, #section-8, #section-9, #section-10{
    position: relative;
    height: 100vh;
    width: 100vw;
    top: 0;
    left: 0;
}
#chatzone-1, #chatzone-2, #chatzone-3, #chatzone-4, #chatzone-5, #chatzone-6, #chatzone-7, #chatzone-8, #chatzone-9, #chatzone-10{
    position: relative;
    top: 50%;
    transform: translateY(-40%);
}
#section-1.sec-add,
#section-2.sec-add,
#section-3.sec-add,
#section-4.sec-add,
#section-5.sec-add,
#section-6.sec-add,
#section-7.sec-add,
#section-8.sec-add,
#section-9.sec-add,
#section-10.sec-add {
    display: none;
}
#section-1.sec-remove,
#section-2.sec-remove,
#section-3.sec-remove,
#section-4.sec-remove,
#section-5.sec-remove,
#section-6.sec-remove,
#section-7.sec-remove,
#section-8.sec-remove,
#section-9.sec-remove,
#section-10.sec-remove {
}
#chatzone-1.activate-remove > div,
#chatzone-2.activate-remove > div,
#chatzone-3.activate-remove > div,
#chatzone-4.activate-remove > div,
#chatzone-5.activate-remove > div,
#chatzone-6.activate-remove > div,
#chatzone-7.activate-remove > div,
#chatzone-8.activate-remove > div,
#chatzone-9.activate-remove > div,
#chatzone-10.activate-remove > div {
    position: relative;
    height: auto;
    width: auto;
    max-width: 80vw;
    margin-top:25vh;
    margin-bottom: 11px;
    opacity: 0;
    transition: all 1s cubic-bezier(.72,1.08,1,1);
}
#chatzone-1.activate-add > div,
#chatzone-2.activate-add > div,
#chatzone-3.activate-add > div,
#chatzone-4.activate-add > div,
#chatzone-5.activate-add > div,
#chatzone-6.activate-add > div,
#chatzone-7.activate-add > div,
#chatzone-8.activate-add > div,
#chatzone-9.activate-add > div,
#chatzone-10.activate-add > div {
    max-width: 80vw;
    margin-top:0vh;
    margin-bottom: 11px;
    opacity: 1;
    transition: all 0.7s cubic-bezier(.72,1.08,1,1);
}
.chatbox {
    position: relative;
    margin-bottom: 11px;
    height: auto;
    width: auto;
    float: left;
    clear: left;
    overflow: hidden;
    border-radius: 20px;
    transition: all 0.3s cubic-bezier(.72,1.08,1,1);
}
.black-chat {background-color: rgba(0,0,0,0.9);}
.white-chat {background-color: rgba(255,255,255,0.9);}
.max-width{max-width: 400px;}
.chatbox.single {
    border-radius: 20px;
}
.chatbox.top {
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
.chatbox.between {
    border-radius: 5px;
}
.chatbox.bottom {
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}
.chatbox h1, .chatbox h2, .chatbox h3,.chatbox h4,.chatbox h5,.chatbox h6,.chatbox h7 {
    width: auto;
    margin: 11px;
    padding: 0;
}
#loop {z-index: 1;}
/* KEYFRAMES - ANIMATIONS */
#prisma{
    position: fixed;
	right: 0;
	bottom: 0;
	top:0;
	width: 100%;
    height: 100%;
    z-index: 5;
    mix-blend-mode: screen;
    opacity: 1;
    transition: all 1s linear;
}
#prisma.color-strategyX {background-color: #00ac30;}
#prisma.color-designX {background-color: #ff5d00;}
#prisma.color-technoX {background-color: #ff3cae;}
#prisma.color-marketX {background-color: #6f32ff;}
.prismaX{
    position: fixed;
	right: 0;
	bottom: 0;
	top:0;
	width: 100%;
    height: 100%;
    z-index: 2;
    background-color: #ffdf09;
	animation: prisma 30s infinite;
    mix-blend-mode: screen;
}
@keyframes prisma {
  0% {
    background-color: #ffdf09 ;
  }
  8.3% {
    background-color: #ff9f01 ;
  }
  16.6% {
    background-color: #bcd200 ;
  }
  24.9% {
    background-color: #00ac30 ;
  }
  33.2% {
    background-color: #01c9ff ;
  }
  41.5% {
    background-color: #1900ad ;
  }
  49.8% {
    background-color: #6f32ff ;
  }
  58.1% {
    background-color: #ff3cae ;
  }
  66.4% {
    background-color: #ff9f01 ;
  }
  74.7% {
    background-color: #ff5d00 ;
  }
  83% {
    background-color: #ff2e01 ;
  }
  91.3% {
    background-color: #fb0000 ;
  }
  100% {
    background-color: #ffdf09 ;
  }
}
@keyframes flash {
  0% {
    opacity: 0.1 ;
  }
  100% {
    opacity: 0 ;
  }
}
.done{
    height: 0px;
}
.done{
    height: 0px;
}
@media only screen and (max-width: 1500px) {
    /* ------------------------------------------------------------------------------------------------- */
    /* Menu */
    .container-location, .container-quote {
        width: 50%;
        left: calc(50vw - 0px)!important;
    }

    /* /Menu */
    /* ------------------------------------------------------------------------------------------------- */
    .space-A {height: 20px;}
   
    
    
    .type.enter > .A {
        margin-top: 0px;
        margin-right: 5px;
        width: 30px;
        margin-left: 2px;
    }
    
    .blackbox > div {
        width: 100%;
        height: 90px;
    }
    .blackbox h1.A {
        margin-top: 0px;
    }
    .blackbox h1.B {
        margin-top: 0px;
    }
    .blackbox:hover h1.A {
        margin-top: -90px;
    }
    .blackbox:hover h1.B {
        margin-top: 10px;
    }
}
@media only screen and (max-width: 1440px) {
    .space-A {height: 20px;}

    
    .type.enter > .A {
        margin-top: -1px;
        margin-right: 5px;
        width: 30px;
        margin-left: 2px;
        font-size: 28px;
    }
    
    .blackbox > div {
        height: 80px;
    }
    .blackbox h1.A {
        margin-top: 0px;
    }
    .blackbox h1.B {
        margin-top: 0px;
    }
    .blackbox:hover h1.A {
        margin-top: -80px;
    }
    .blackbox:hover h1.B {
        margin-top: 10px;
    }
}
@media only screen and (max-width: 1300px) {
    /* ------------------------------------------------------------------------------------------------- */
    /* Menu */
    .container-logo {
        padding-left: 34px;
    }

    /* /Menu */
    /* ------------------------------------------------------------------------------------------------- */
    .back-to-top {
        right: 22px;
        font-size: 40px;
        z-index: 1000000;
    }
    .space-top {height: 60px;}
    .space-A {height: 20px;;}
    .space-B {height: 16px;}
    .space-C {height: 10px;}
    .intro {
        padding-right: 22px;
        padding-left: 22px;
        padding-bottom: 22px;
    }
    .fullwidth_images-cedric {
        background-image: url(../img/site-root/me-4.jpg);
        background-repeat:no-repeat;
        background-position:20% 0 ;
        background-size: cover;
    }
    .pad-44 {padding-left: 22px; padding-right: 22px;}
    .pad-22 {padding-left: 11px; padding-right: 11px;}
    .type.enter > .A {
        margin-top: -10px;
        margin-right: 0px;
        margin-left: 2px;
        font-size: 22px;
    }
    .type > .A {
        margin-top: 5px;
        font-size: 18px;
        width: 15px;
    }
    #logo {
        margin-left: 0px;
        margin-top: 0px;
        width: 80px;
        height: 80px;
    }
    #menu {
        top: 25px;
        right: 22px;
    }
    
    #navigate {
        right: 22px;
    }
    #chat {
    }
    .messages{margin-left: 44px;}
	#FACEBOOK{
        top: calc(100% - 0px - 40px);
        right: 22px;
    }
}
@media only screen and (max-width: 1125px) {
    .force169 {
        min-height: 100vh!important; 
        
    }
    .back-to-top {
        right: 16px;
        font-size: 40px;
        z-index: 1000000;
    }
    /* ------------------------------------------------------------------------------------------------- */
    /* Menu */
    .container-logo {
        padding-left: 16px;
    }
    .container-location, .container-quote {
        width: 50%;
        left: calc(50vw - 0px)!important;
    }

    /* /Menu */
    /* ------------------------------------------------------------------------------------------------- */
    .hide-res {display: none;}
    .space-A {height: 20px;}
  
    /*-- Paddings --*/
    .split-100 {width: 100%!important; float: left;}
    .split-50 {width: 50%!important; float: left;}
    .split-33 {width: 33.33333%!important; float: left;}
    .split-25 {width: 50%!important; float: left;}
    .split-text {width: 75%!important;}
    
    .window {
        padding-left:16px;
        padding-right: 16px;
    }
    #FACEBOOK {display: none;visibility: hidden;opacity: 0;}
    #navigate {
        right: 22px;
        left: auto;
        bottom: 22px;
        top: auto;
    }
    #navigate > #nextArrow,
    #navigate > a {
        font-size: 40px;
    }
    #navigate > #arrowMove {
        font-size: 40px;
    }
    
    .blackbox {
        min-height: 240px;
        height: 40vh;
    }
    .blackbox > div {
        height: 60px;
    }
    .blackbox h1.A {
        margin-top: 0px;
    }
    .blackbox h1.B {
        margin-top: 0px;
    }
    .blackbox:hover h1.A {
        margin-top: -60px;
    }
    .blackbox:hover h1.B {
        margin-top: 10px;
    }
    .pad-44 {padding-left: 16px; padding-right: 16px;}
    .pad-22 {padding-left: 0px; padding-right: 0px;}


    /* ------------------------------------------------------------------------------------------------- */
    /* Colums */
    #columns {
        column-width: 25vw!important;
    }

    div#columns figure {
        padding: 16px;
    }

    div#columns figure img {
    }
    /* ------------------------------------------------------------------------------------------------- */
    /* /Colums */

}
@media only screen and (max-width: 768px) {
    .split-6 {width: 25%!important; float: left;}
}
@media only screen and (max-width: 620px) {
    .back-to-top {
        right: 22px;
        font-size: 40px;
        z-index: 1000000;
    }
    /* ------------------------------------------------------------------------------------------------- */
    /* Menu */
    .space-top {height: 40px;}
    .container-logo {
    }
    .container-menu {
        height: calc(100vh - 50px);
        padding-left: calc(0% + 16px);
        width: 100%;
        max-width: 100%;
        min-width: 100%;
    }
    .container-menu.activate {
        top: 50px;
        right: 0;
    }
    .none-at-620p {display: none!important;}
    .display-at-620p {display: block!important;}
    .container-location p, .container-location h1, .container-location a
    ,.container-close p, .container-close h1, .container-close a {
        float: right!important;
    }
    .container-location div.info-button {
        float: right;
        left: auto;
        right: calc(50vw - 30px);
    }
    
    .container-location .indicator {
        width: auto;
        height: auto;
        float: right;
        display: inline-block;
        left:auto;
        right: 0;
        
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .container-quote {
        display: block;
        width: 100%;
        max-width: 100%;
        min-width: 100%;
        height: 50px;
        top: auto;
        bottom: 0;
        left: 0!important;
        padding-top: 20px;
        padding-left:20px;
        padding-right:0px;

        transition: 0.5s ease ;
        }
    
    .container-location .indicator h1 {
        float: left;
        max-width: 120px;
        width: auto;
        overflow: hidden;
    
        text-overflow: ellipsis;
        white-space: nowrap;
        }
    .indicator marquee {
        position: relative;
        display: inline-block;
        float: left;
        width: 180px;
        background-color: aqua;
    }
    /* /Menu */
    /* ------------------------------------------------------------------------------------------------- */
    .fullwidth_images-cedric {
        background-image: url(../img/site-root/me-4.jpg);
        background-repeat:no-repeat;
        background-position:15% 0 ;
        background-size: cover;
    }
    .hide-res-a {display: none;}
    .split-50 {width: 100%!important;}
    .split-33 {width: 50%!important;}
    .type.enter > .A {
        margin-top: 0px;
        margin-right: 0px;
        width: 25px;
        margin-left: 2px;
        font-size: 22px;
    }
    #chat {
    }
    #profile-picture {
        position: relative;
        width: 60px;
        height: 60px;
        margin-left: 0px;
        margin-top: 0px;
        margin-bottom: 10px;
        clear: left;
        float: left;
    }
    .messages{margin-left: 22px;}
    
    #chatzone-1, #chatzone-2, #chatzone-3, #chatzone-4, #chatzone-5, #chatzone-6, #chatzone-7, #chatzone-8, #chatzone-9, #chatzone-10{
        position: relative;
        top: 100px;
        transform: translateY(0%);
    }
    .pad-44 {padding-left: 22px; padding-right: 22px;}
    .pad-22 {padding-left: 0px; padding-right: 0px;}
    .hide-res-b {display: none;}
    .split-25 {width: 100%!important;}
    .split-33 {width: 100%!important;}
    .split-text {width: 100%!important;}

    /* ------------------------------------------------------------------------------------------------- */
    /* Colums */
    #columns {
        column-width: calc(50vw - 0px)!important;
        column-gap: 0;
        width: 100%;
        max-width: 100vw;
        margin: 0px auto;
        transition: all 0.3s linear;
    }

    div#columns figure {
        width: calc(50vw - 32px)!important;;
        height: auto;
        padding: 16px;

        background-color: brownX;
    }

    /* ------------------------------------------------------------------------------------------------- */
    /* /Colums */
    
    
    
    
}
@media only screen and (max-width: 480px) {
    /* ------------------------------------------------------------------------------------------------- */
    /* Menu */
    .container-location .indicator {
        width: auto;
        height: auto;
        float: right;
        display: inline-block;
        left:auto;
        right: 0;
        
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    .container-location .indicator h1 {
        float: left;
        max-width:  calc(100vw - 125px - 110px - 60px)!important;
        width:auto;
        overflow: hidden;
    
        text-overflow: ellipsis;
        white-space: nowrap;
        }
    /* /Menu */
    /* ------------------------------------------------------------------------------------------------- */
    
    .split-6 {width: 33.33333%!important; float: left;}
}