/*
 * @author      Sky Gungoosingh
 * @copyright   Circus Advertising
*/
* {margin:0;padding:0;}
/*Reset*/
html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, em, font, img, strong, ul, li, fieldset, form, label, legend,table, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;border: 0;outline: 0;font-size: 100.01%;vertical-align: baseline;background: transparent;}
body {line-height: 1;font-weight: 400;font-family: 'Duplicate Ionic'}
ul,li {list-style: none;margin:0;padding:0}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {display: block;}
input, textarea, button {
  -webkit-appearance: none !important;
  -webkit-border-radius: 0 !important;
}
input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], textarea {
    background-color: white;
    font-family: inherit;
    border: 1px solid #cccccc;
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
    color: rgba(0,0,0,0.75);
    display: block;
    font-size: 0.875em;
    margin: 0;
    padding: 0.5em;
    height: 2.3125em;
    width: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: -webkit-box-shadow 0.45s,border-color 0.45s ease-in-out;
    -moz-transition: -moz-box-shadow 0.45s,border-color 0.45s ease-in-out;
    transition: box-shadow 0.45s,border-color 0.45s ease-in-out;
}

input[type="text"]:focus, input[type="password"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="month"]:focus, input[type="week"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="time"]:focus, input[type="url"]:focus, textarea:focus {
    background: #fafafa;
    border-color: #999999;
    outline: none;
}

/* font face */
@font-face {
	font-family: 'Duplicate Ionic';
	src: url('../fonts/DuplicateIonic-Regular.eot');
	src: url('../fonts/DuplicateIonic-Regular.eot?#iefix') format('embedded-opentype'),
		url('../fonts/DuplicateIonic-Regular.woff2') format('woff2'),
		url('../fonts/DuplicateIonic-Regular.woff') format('woff'),
		url('../fonts/DuplicateIonic-Regular.ttf') format('truetype'),
		url('../fonts/DuplicateIonic-Regular.svg#DuplicateIonic-Regular') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Duplicate Ionic Medium';
	src: url('../fonts/DuplicateIonic-Medium.eot');
	src: url('../fonts/DuplicateIonic-Medium.eot?#iefix') format('embedded-opentype'),
		url('../fonts/DuplicateIonic-Medium.woff2') format('woff2'),
		url('../fonts/DuplicateIonic-Medium.woff') format('woff'),
		url('../fonts/DuplicateIonic-Medium.ttf') format('truetype'),
		url('../fonts/DuplicateIonic-Medium.svg#DuplicateIonic-Medium') format('svg');
	font-weight: 500;
	font-style: normal;
}

@font-face {
	font-family: 'Duplicate Ionic Regular Italic';
	src: url('../fonts/DuplicateIonic-RegularItalic.eot');
	src: url('../fonts/DuplicateIonic-RegularItalic.eot?#iefix') format('embedded-opentype'),
		url('../fonts/DuplicateIonic-RegularItalic.woff2') format('woff2'),
		url('../fonts/DuplicateIonic-RegularItalic.woff') format('woff'),
		url('../fonts/DuplicateIonic-RegularItalic.ttf') format('truetype'),
		url('../fonts/DuplicateIonic-RegularItalic.svg#DuplicateIonic-RegularItalic') format('svg');
	font-weight: normal;
	font-style: italic;
}

@font-face {
	font-family: 'Duplicate Ionic Thin Italic';
	src: url('../fonts/DuplicateIonic-ThinItalic.eot');
	src: url('../fonts/DuplicateIonic-ThinItalic.eot?#iefix') format('embedded-opentype'),
		url('../fonts/DuplicateIonic-ThinItalic.woff2') format('woff2'),
		url('../fonts/DuplicateIonic-ThinItalic.woff') format('woff'),
		url('../fonts/DuplicateIonic-ThinItalic.ttf') format('truetype'),
		url('../fonts/DuplicateIonic-ThinItalic.svg#DuplicateIonic-ThinItalic') format('svg');
	font-weight: 100;
	font-style: italic;
}

@font-face {
	font-family: 'Duplicate Ionic Light';
	src: url('../fonts/DuplicateIonic-Light.eot');
	src: url('../fonts/DuplicateIonic-Light.eot?#iefix') format('embedded-opentype'),
		url('../fonts/DuplicateIonic-Light.woff2') format('woff2'),
		url('../fonts/DuplicateIonic-Light.woff') format('woff'),
		url('../fonts/DuplicateIonic-Light.ttf') format('truetype'),
		url('../fonts/DuplicateIonic-Light.svg#DuplicateIonic-Light') format('svg');
	font-weight: 300;
	font-style: normal;
}

@font-face {
	font-family: 'Duplicate Ionic Light Italic';
	src: url('../fonts/DuplicateIonic-LightItalic.eot');
	src: url('../fonts/DuplicateIonic-LightItalic.eot?#iefix') format('embedded-opentype'),
		url('../fonts/DuplicateIonic-LightItalic.woff2') format('woff2'),
		url('../fonts/DuplicateIonic-LightItalic.woff') format('woff'),
		url('../fonts/DuplicateIonic-LightItalic.ttf') format('truetype'),
		url('../fonts/DuplicateIonic-LightItalic.svg#DuplicateIonic-LightItalic') format('svg');
	font-weight: 300;
	font-style: italic;
}

@font-face {
	font-family: 'Duplicate Ionic Medium Italic';
	src: url('../fonts/DuplicateIonic-MediumItalic.eot');
	src: url('../fonts/DuplicateIonic-MediumItalic.eot?#iefix') format('embedded-opentype'),
		url('../fonts/DuplicateIonic-MediumItalic.woff2') format('woff2'),
		url('../fonts/DuplicateIonic-MediumItalic.woff') format('woff'),
		url('../fonts/DuplicateIonic-MediumItalic.ttf') format('truetype'),
		url('../fonts/DuplicateIonic-MediumItalic.svg#DuplicateIonic-MediumItalic') format('svg');
	font-weight: 500;
	font-style: italic;
}

@font-face {
	font-family: 'Duplicate Ionic Thin';
	src: url('../fonts/DuplicateIonic-Thin.eot');
	src: url('../fonts/DuplicateIonic-Thin.eot?#iefix') format('embedded-opentype'),
		url('../fonts/DuplicateIonic-Thin.woff2') format('woff2'),
		url('../fonts/DuplicateIonic-Thin.woff') format('woff'),
		url('../fonts/DuplicateIonic-Thin.ttf') format('truetype'),
		url('../fonts/DuplicateIonic-Thin.svg#DuplicateIonic-Thin') format('svg');
	font-weight: 100;
	font-style: normal;
}

@font-face {
	font-family: 'Duplicate Ionic Bold';
	src: url('../fonts/DuplicateIonic-Bold.eot');
	src: url('../fonts/DuplicateIonic-Bold.eot?#iefix') format('embedded-opentype'),
		url('../fonts/DuplicateIonic-Bold.woff2') format('woff2'),
		url('../fonts/DuplicateIonic-Bold.woff') format('woff'),
		url('../fonts/DuplicateIonic-Bold.ttf') format('truetype'),
		url('../fonts/DuplicateIonic-Bold.svg#DuplicateIonic-Bold') format('svg');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'Duplicate Ionic Black Italic';
	src: url('../fonts/DuplicateIonic-BlackItalic.eot');
	src: url('../fonts/DuplicateIonic-BlackItalic.eot?#iefix') format('embedded-opentype'),
		url('../fonts/DuplicateIonic-BlackItalic.woff2') format('woff2'),
		url('../fonts/DuplicateIonic-BlackItalic.woff') format('woff'),
		url('../fonts/DuplicateIonic-BlackItalic.ttf') format('truetype'),
		url('../fonts/DuplicateIonic-BlackItalic.svg#DuplicateIonic-BlackItalic') format('svg');
	font-weight: 900;
	font-style: italic;
}

@font-face {
	font-family: 'Duplicate Ionic Bold Italic';
	src: url('../fonts/DuplicateIonic-BoldItalic.eot');
	src: url('../fonts/DuplicateIonic-BoldItalic.eot?#iefix') format('embedded-opentype'),
		url('../fonts/DuplicateIonic-BoldItalic.woff2') format('woff2'),
		url('../fonts/DuplicateIonic-BoldItalic.woff') format('woff'),
		url('../fonts/DuplicateIonic-BoldItalic.ttf') format('truetype'),
		url('../fonts/DuplicateIonic-BoldItalic.svg#DuplicateIonic-BoldItalic') format('svg');
	font-weight: bold;
	font-style: italic;
}

@font-face {
	font-family: 'Duplicate Ionic Black';
	src: url('../fonts/DuplicateIonic-Black.eot');
	src: url('../fonts/DuplicateIonic-Black.eot?#iefix') format('embedded-opentype'),
		url('../fonts/DuplicateIonic-Black.woff2') format('woff2'),
		url('../fonts/DuplicateIonic-Black.woff') format('woff'),
		url('../fonts/DuplicateIonic-Black.ttf') format('truetype'),
		url('../fonts/DuplicateIonic-Black.svg#DuplicateIonic-Black') format('svg');
	font-weight: 900;
	font-style: normal;
}

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

#page .container {width: 95%;}
#page .section {padding-bottom: 0px;padding-top: 0px;}
#page .section .container {max-width: 980px;}
#page .section .row {margin-bottom: 0px;}
.not-fixed .logo-float {position: absolute}
.front.not-fixed .logo-float {position: fixed}
.not-fixed #trigger-overlay {position: absolute}
.front.not-fixed #trigger-overlay {position: fixed}
.logo-float {position: fixed;top: 60px;left: 30px;width: 140px;height: 30px;z-index: 36}
.logo-float img {width: 100%}
.logo-float.zindex {z-index: 41}
.film .container-masonry #masonry-grid1 {text-align: center;width: 100%;}
.film .container-masonry .grid-item--width2 {position: relative !important;margin: 0 auto;display: inline-block;left: inherit !important}


.overlay.overlay-door.open{position: fixed !important}
.overlay-door {z-index: 40;overflow: hidden;background: #FFFF00}
.overlay-door #logo {position: absolute;top: 60px;left: 20px;width: 140px;height: 30px;display: none;}
.overlay-door #logo a {display: block}
.overlay-door #logo img {width: 100%}
#trigger-overlay {z-index: 99;background: url(../images/icn/menu-black-open.svg) top left no-repeat;background-size: 100%;width: 40px;height: 40px;border: none;position: fixed;top: 60px;right: 60px;}
.not-front #trigger-overlay {background: url(../images/icn/menu-black-open.svg) top left no-repeat;}
#page .overlay .overlay-close {background: url(../images/icn/menu-black-close.svg) top left no-repeat;background-size: 100%;width: 40px;height: 40px;border: none;position: absolute;top: 60px;right: 60px;}

#main-nav {width: 592px;height: 572px;margin: 0 auto;background: url(../images/interface/menu.png) top left no-repeat;text-align: center}
#main-nav ul {padding: 90px 0 0 0}
#main-nav li {line-height: 65px}
#main-nav li a {font-family: 'Duplicate Ionic Medium';font-size: 46px;-webkit-transition:all 0.3s linear;-moz-transition:all 0.3s linear;-o-transition:all 0.3s linear;transition:all 0.3s linear;}
#main-nav li a:hover {color: #FFFF00}

.montgolfiere {position: absolute;width: 100px;bottom: 25px;margin-left: auto;margin-right: auto;left: 0;right: 0;z-index: 8;text-align: center}
.montgolfiere img {margin: 0 auto;display: block;text-align: center}
.montgolfiere span {color: #fff;font-size: 13px;text-align: center;text-transform: uppercase;display: block;margin: 5px 0 0 0;-webkit-transition:all 0.3s linear;-moz-transition:all 0.3s linear;-o-transition:all 0.3s linear;transition:all 0.3s linear;}
.montgolfiere:hover span {color: #fff}

.boxHide {position: absolute;width: 190px;height: 100vh;background: #00ECE8;top: 0px;left: 0px;z-index: 37 }

.container-masonry {overflow: hidden}
.container-masonry .grid-item {margin: -1px -1px 0 0;}
.container-masonry .grid-sizer,
.container-masonry .grid-item { width: 20%;overflow: hidden;}
.container-masonry .grid-item .cnInner {margin: 0;padding: 13px;position: relative;}
.container-masonry .grid-item .cnInner .cnImg {margin: 0;padding: 0;border: 1px solid #d0d0d0}
.container-masonry .grid-item .cnInner .cnImg img {margin: 0;padding: 0;display: block;width: 100%;}
.container-masonry .grid-item .cnInner .cnBut {position: absolute;top: 45%;left: 0px;right: 0px;width: 97px;height: 94px;margin: 0 auto}
.container-masonry .grid-item--width1 {width: 20%}
.container-masonry .grid-item--width2 {width: 40%}
.container-masonry .grid-item--width3 {width: 60%}
.container-masonry .grid-item--width4 {width: 80%}
.container-masonry .grid-item--width5 {width: 60%}
.container-masonry .grid-item--width6 {width: 40%}
.container-masonry .grid-video .cnInner .cnImg span.cnButton {display: none;width: 60px;height: 60px;position: absolute;z-index: 3;margin-left: auto;margin-right: auto;left: 0;right: 0;top: 46%}
.container-masonry .grid-video .cnInner .cnImg .videoYoutube {position: absolute;top: 13px;left: 13px;opacity: 1;}
.container-masonry .grid-video .cnInner .cnImg {border: none !important}
.container-masonry .grid-video .cnInner iframe {border: 1px solid #6c6c6c}

/*.container-masonry .grid-item--width3 .cnInner .cnImg img {width: auto;float: left;margin: 0 26px 0 0}*/
.container-masonry .grid-video img {opacity: 0}
.container-masonry .grid-item--width6 img {height: 100% !important}

.panel1 {background: #00ECE8}
.panel2 {background: #5a39e4}
.panel3 {background: #fff;}
.panel4 {background: #30e69d}
.pictureFrame {cursor: pointer;}

.cnDisplayTable {display: table;height: 100vh;width: 100%;}
.cnDisplayTableCell {display: table-cell;height: 100%;width: 100%;vertical-align: middle;}

.cnCircusWrap {width: 841px;height: 541px;position: relative;margin: 0 auto;z-index: 38}
.cnCircusWrap .clownHead {position: absolute;top: 0px;right: 0px;width: 458px;height: 546px;}
.cnCircusWrap .cnLogoCircus {width: 422px;height: 82px;position: absolute;bottom: 139px;left: -45px;}
.cnCircusWrap .cnEyeLeft {width: 261px;height: 329px;position: absolute;top: 0px;left: 0px;z-index: 1}
.cnCircusWrap .cnEyeRight {width: 166px;height: 275px;position: absolute;top: 9px;right: 0px;z-index: 1}
.cnCircusWrap .cnNose {width: 216px;height: 191px;position: absolute;top: 260px;right: 52px;z-index: 2}
.cnCircusWrap .cnMouth {width: 333px;height: 160px;position: absolute;bottom: 0px;right: 30px;z-index: 1}
.cnCircusWrap .circusMobile {display: none;}

.cnRte p, h1 ,h2, h3, li, span {color: #030000}
.cnRte p {margin: 0;padding: 0;line-height: 24px;font-size: 16px;}
.cnIntro {text-align: center}
.cnIntro .cnRte {width: 70%;margin: 0 auto;position: relative}

.cnIntroCreations {margin: 0;padding: 0}
.cnIntroCreations .cnRte p {font-style: normal}
.cnIntroCreations .cnRte p a {color: #00aac9}
.cnIntroCreations h1 {font-size: 30px;font-family: 'Duplicate Ionic Black';margin: 0 auto;}
.cnIntroExpertise h1 {font-size: 30px;font-family: 'Duplicate Ionic Black';margin: 0 auto;}
.cnIntroClients h1 {font-size: 30px;font-family: 'Duplicate Ionic Black';margin: 0 auto;}
.cnIntroCreations strong {font-family: 'Duplicate Ionic Black';}
.cnIntroCreations .cnRte {text-align: left;width: 38.7%;margin: 0;padding: 0 0 0 19px}

.panel#sec2 {position: relative}
.panel#sec2 .col.s12 {display: table;height: 100vh;width: 100%;}
.panel2 .purposeWrap {position: relative;height: 585px;width: 960px;display: table-cell;vertical-align: middle;}
.panel2 .purposeWrap .cnTitle {margin: 0;padding: 0;position: relative;z-index: 2;}
.panel2 .purposeWrap .cnTitle h1 {color: #CDFF38;font-size: 172px;font-family: 'Duplicate Ionic Bold';line-height: 95px;}
.panel2 .purposeWrap .cnTitle h2 {color: #CDFF38;font-size: 195px;font-family: 'Duplicate Ionic Bold';line-height: 95px;}
.panel2 .purposeWrap .cnCircle {background: url(../images/interface/circle-pink.png) top left no-repeat;width: 463px;height: 450px;display: table;float: right;margin: -50px 0 0 0}
.panel2 .purposeWrap .cnCircle .cnRte {display: table-cell;height: 100%;width: 100%;vertical-align: middle;padding: 0 70px}
.panel2 .purposeWrap .cnCircle .cnRte p {font-size: 35px;color: #CDFF38;line-height: 40px;text-align: center;/*font-family: 'Duplicate Ionic Thin';*/}
.cnOurPurposesAnime {width: 580px;height: 450px;position: absolute;bottom: -25px;left: -65px;z-index: 3}
.cnOurPurposesAnime .cnInner {width: 100%;height: 100%;position: relative;}
.cnOurPurposesAnime .cnInner .cnHead {width: 234px;height: 271px;position: absolute;top: 0px;left: 240px;}
.cnOurPurposesAnime .cnInner .cnLeftHand {width: 216px;height: 220px;position: absolute;top: 62px;left: 0px;}
.cnOurPurposesAnime .cnInner .cnRightHand {width: 153px;height: 178px;position: absolute;bottom: 0px;right: 2px;}
.cnOurPurposesAnime .cnInner .cnNeck {width: 93px;height: 132px;position: absolute;bottom: 0px;right: 186px;}

.bannerWork {height: 360px;margin: 0;padding: 0;background: url(../images/interface/fond-vert.jpg) center top repeat;position: absolute;top: 0px;left: 0px;width: 100%}
#sec3 {position: relative;padding-bottom: 50px !important}
/*.bannerTopWorks {position: absolute;top: 0px;left: 0px;width: 100%;height: 180px;overflow: hidden}
.bannerTopWorks .cnOverlay {height: 100%;background: url(../images/interface/pat-vert.png) center 16px repeat;width: 100%;position: absolute;top: 0px;left: 0px;width: 100%;z-index: 2;background-size: 25%}
.bannerTopWorks p.first {width: 100%;font-size: 175px;position: absolute;top: 55px;left: 0px;z-index: 1;text-align: center;font-family: 'Duplicate Ionic Medium';color: #4B27E2;padding: 0px 480px 0 0;margin: -60px 0 0 0}
.bannerTopWorks p.second {width: 100%;font-size: 200px;position: absolute;top: -27px;left: 142px;z-index: 3;text-align: center;font-family: 'Duplicate Ionic Medium';color: #4B27E2}*/
/*#sec3 .container {max-width: 100% !important; width: 100% !important}*/
.bannerTopWorks {
    position: absolute;
    top: 67px;
    left: 182px;
    width: 149px;
    height: 27px;
    overflow: hidden;
}
.bannerTopWorks .cnOverlay {
    height: 6px;
    
    width: 100%;
    position: absolute;
    top: 3px;
    left: 0px;
    width: 100%;
    padding: 15px 0 0 0;
    z-index: 2;
    
}
.bannerTopWorks p.first {
    width: auto;
    font-size: 25px;
    position: absolute;
    top: 0;
    left: 0px;
    z-index: 4;
    text-align: center;
    font-family: 'Duplicate Ionic Medium';
    color: #4a4a4a;
    padding: 0;
    margin: 0;
}
.bannerTopWorks p.second {
    width: auto;
    font-size: 25px;
    position: absolute;
    top: -4px;
    left: 45px;
    height: 25px;
    padding: 4px 0 0 0;
    z-index: 3;
    background-size: 30% !important;
    text-align: center;
    font-family: 'Duplicate Ionic Medium';
    color: #4a4a4a;
}
#sec3 .cnFilter {padding-top: 74px;padding-bottom: 30px}
#sec3 .cnFilter ul {margin:0 0 0 335px;padding:0 15px;}
#sec3 .cnFilter ul li {margin: 0 35px 0 0;text-align:center;display:inline}
#sec3 .cnFilter ul li:nth-child(3) {display: none;}
#sec3 .cnFilter ul li a {font-size: 16px;color: #4d4d4d;background: url(../images/icn/bullet-green.png) 0 6px no-repeat;padding: 0 0 0 15px;-webkit-transition:all 0.3s linear;-moz-transition:all 0.3s linear;-o-transition:all 0.3s linear;transition:all 0.3s linear;}
#sec3 .cnFilter ul li a.active {background: url(../images/icn/bullet-blue.png) 0 6px no-repeat}
#sec3 .cnFilter ul li a:hover {color: #4B27E2}
#sec3 .cnFilter ul li:last-child {margin: 0}
#sec3 .cnFilter .cnInner {position: relative}
#sec3 .cnFilter .cnInner .preloader {position: absolute;top: 30px;left: 0px;right: 0px;margin: 0 auto;width: 25px;height: 25px;display: none;}
#sec3 .cnFilter .cnInner .preloader img {width: 100%}
#sec3 .container-masonry .grid-sizer,
#sec3 .container-masonry .grid-item { width: 25%;overflow: hidden;}
#sec3 .container-masonry .grid-item--width1 {width: 25%}
#sec3 .container-masonry .grid-item--width3 {width: 50%}



.menu-filter {padding-top: 74px;padding-bottom: 30px}
.menu-filter ul {margin:0 0 0 335px;padding:0 15px;}
.menu-filter ul li {margin: 0 35px 0 0;text-align:center;display:inline}
.menu-filter ul li a {font-size: 16px;color: #4d4d4d;background: url(../images/icn/bullet-green.png) 0 6px no-repeat;padding: 0 0 0 15px;-webkit-transition:all 0.3s linear;-moz-transition:all 0.3s linear;-o-transition:all 0.3s linear;transition:all 0.3s linear;}
.menu-filter ul li a.active {background: url(../images/icn/bullet-blue.png) 0 6px no-repeat}
.menu-filter ul li a:hover {color: #4B27E2}
.menu-filter ul li:last-child {margin: 0}
.menu-filter .cnInner {position: relative}
.menu-filter .cnInner .preloader {position: absolute;top: 30px;left: 0px;right: 0px;margin: 0 auto;width: 25px;height: 25px;display: none;}

#page .sectionLatestNews .cnTitre {width: 600px;padding: 50px 0 25px 0}
#page .sectionLatestNews .cnTitre img {width: 100%;}
#page .sectionLatestNews .col.s6 .cnInner {margin: 0;padding: 0;position: relative}
#page .sectionLatestNews .col.s6 .cnInner img {width: 100%;display: block;opacity: 0}
#page .sectionLatestNews .col.s6 .cnInner iframe {width: 100%;height: 100%;position: absolute;top: 0px;left: 0px;}
#page .sectionLatestNews .col.s6 .cnInner {margin: 0;padding: 0}
#page .sectionLatestNews .col.s6 .cnInner .cnRte h3 {font-size: 48px;font-family: 'Duplicate Ionic Medium';color: #062C80}
#page .sectionLatestNews .col.s6 .cnInner .cnRte p {font-size: 14px;line-height: 20px;color: #062C80;}
#page .sectionLatestNews .cnInterviewMD {padding-top: 20px;}
#page .sectionLatestNews .col.s6 .cnInner.cnInterview {padding: 70px 0 0 0}
#page .sectionLatestNews .secondNews {min-height: 385px;}
#page .sectionLatestNews .secondNews .col.s6 .cnInner img {opacity: 1 !important}
#page .sectionLatestNews .secondNews .col.s6 .cnInner .cnRte h3 {text-transform: capitalize}

#contact .container {width: 100% !important;max-width: 100% !important;padding: 0}
#contact .row {margin: 0 !important}
#contact .col {padding: 0 !important}
#contact .flexslider {margin: 0;padding: 0;border: none;}
#contact li {height: 100vh;width: 100%;}
#contact li.first {background: url(../images/interface/pat-vert.png) center top repeat;}
#contact li.second {background: url(../images/interface/pat-red.png) center top repeat;}
#contact li.third {background: url(../images/interface/pat-jaune.png) center top repeat;}
#contact li.fourth {background: url(../images/interface/pat-pink.png) center top repeat;}
#contact .flex-direction-nav {display: none;}
#contact .cnBulle {width: 572px;height: 493px;margin: 0 auto}
#contact .cnBulle.cn1 {background: url(../images/interface/bulle1.png) top left no-repeat;}
#contact .cnBulle.cn2 {background: url(../images/interface/bulle2.png) top left no-repeat;}
#contact .cnBulle.cn3 {background: url(../images/interface/bulle3.png) top left no-repeat;}
#contact .cnBulle.cn4 {background: url(../images/interface/bulle4.png) top left no-repeat;}

#footer {background: #000;display: none;}
.contact #footer {display: block}
#footer .container {width: 96%;max-width: 100%;}
#footer .container .row {margin-bottom: 0px !important}
#footer .footer-inner {padding: 30px 0}
#footer .cnLeft {float: left}
#footer .cnRight {float: right;text-align: right;}
#footer .cnRight p {color: #fff;font-size: 16px;line-height: 20px;}
#footer .cnRight p a {color: #fff}
#footer .cnRight p.small {font-size: 14px;font-family: 'Duplicate Ionic Medium';}

.cnSocialIcon {padding: 40px 0 0 0;float: right}
.cnSocialIcon ul {margin: 0 auto;width: 100%;text-align: center;height: 50px;width: 170px;overflow: hidden}
.cnSocialIcon ul li {text-align: center;float: left;margin: 0 10px 0 0;}
.cnSocialIcon ul li a {display: block;color: #fff;line-height: 50px;border: 1px solid #fff;width: 50px;height: 50px;border-radius: 50%;-moz-border-radius: 50%;-webkit-border-radius: 50%;-webkit-transition:all 0.3s linear;-moz-transition:all 0.3s linear;-o-transition:all 0.3s linear;transition:all 0.3s linear;}
.cnSocialIcon ul li i {font-size: 20px;line-height: 48px;}
.cnSocialIcon ul li:last-child {margin: 0}

.cnSocialIcon ul li.fb:hover a {color: #3b5998;border: 1px solid #3b5998}
.cnSocialIcon ul li.in:hover a {color: #007bb5;border: 1px solid #007bb5}
.cnSocialIcon ul li.you:hover a {color: #bb0000;border: 1px solid #bb0000}

.panel3 .cnBlockMasonry .grid-item--width1 .cnInner a {display: block;}
.panel3 .cnBlockMasonry .grid-item--width1 .cnInner .cnOverlaytxtBox {position: absolute;bottom: -30px; left: -30px; background: url(../images/interface/dot.svg) bottom left no-repeat; width: 100%; height: 100%;padding: 19px; -webkit-transition: all .35s ease; -moz-transition: all .35s ease; -ms-transition: all .35s ease; -o-transition: all .35s ease; transition: all .35s ease; opacity: 0; visibility: hidden;}

.panel3 .cnBlockMasonry .grid-item--width1 .cnboxInnerHover {overflow: hidden; bottom: 5.3%; left: 5.3%; width: 89.4%; height: 89.4%; display: block; position: absolute;}
.panel3 .cnBlockMasonry .grid-item--width1 .cnInner:hover .cnOverlaytxtBox {opacity: 1;visibility: visible ;bottom: 0; left: 0; background-size: 150%; }
.panel3 .cnBlockMasonry .grid-item--width1 .cnInner .cnOverlaytxtBox ul {}
.panel3 .cnBlockMasonry .grid-item--width1 .cnInner .cnOverlaytxtBox ul li {font-size: 13px; color: #d8d8d8; float: left;border-bottom: 1px solid #d4d4d4;padding-bottom: 5px; margin: 0 19px 10px 0 }
.panel3 .cnBlockMasonry .grid-item--width1 .cnInner .cnOverlaytxtBox ul li:last-child {min-width: 103px; margin: 0;}
.panel3 .cnBlockMasonry .grid-item--width1 .cnInner .cnOverlaytxtBox h5 {font-size: 13px;  color: #fff;text-transform: uppercase;padding-top: 54px}
.panel3 .cnBlockMasonry .grid-item--width1 .cnInner .cnOverlaytxtBox h4 {font-size: 30px; color: #fff; font-family: 'Duplicate Ionic Medium';font-weight: 500;line-height: 25px;padding: 2px 0 0 }

.panel3 .cnBlockMasonry .grid-item--width3 .cnInner a {display: block;}
.panel3 .cnBlockMasonry .grid-item--width3 .cnInner .cnOverlaytxtBox {position: absolute;bottom: -30px; left: -30px; background: url(../images/interface/dot.svg) top left no-repeat; width: 397px; height: 390px;padding: 93px 30px 48px 30px; -webkit-transition: all .35s ease; -moz-transition: all .35s ease; -ms-transition: all .35s ease; -o-transition: all .35s ease; transition: all .35s ease; opacity: 0; visibility: hidden;}
.panel3 .cnBlockMasonry .grid-item--width3 .cnboxInnerHover {overflow: hidden; bottom: 2.66%; left: 2.66%; width: 94.68%; height: 94.68%; display: block; position: absolute;}
.panel3 .cnBlockMasonry .grid-item--width3 .cnInner:hover .cnOverlaytxtBox {opacity: 1;visibility: visible ;bottom: 0; left: 0;}
.panel3 .cnBlockMasonry .grid-item--width3 .cnInner .cnOverlaytxtBox ul {}
.panel3 .cnBlockMasonry .grid-item--width3 .cnInner .cnOverlaytxtBox ul li {font-size: 13px;color: #d8d8d8; float: left;border-bottom: 1px solid #d4d4d4;padding-bottom: 5px; margin: 0 19px 0 0 }
.panel3 .cnBlockMasonry .grid-item--width3 .cnInner .cnOverlaytxtBox ul li:last-child {min-width: 103px; margin: 0;}
.panel3 .cnBlockMasonry .grid-item--width3 .cnInner .cnOverlaytxtBox h5 {font-size: 13px; color: #fff;text-transform: uppercase;padding-top: 54px}
.panel3 .cnBlockMasonry .grid-item--width3 .cnInner .cnOverlaytxtBox h4 {font-size: 30px; color: #fff; font-family: 'Duplicate Ionic Medium'; font-weight: 500;line-height: 25px;padding: 2px 0 0 }
.panel3 .cnBlockMasonry .grid-item--width3 .cnInner .cnOverlaytxtBox p {font-size: 14px; color: #fff; line-height: 17px;padding: 70px 0 0 }



.videoBanner {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 199;
  display: none;
}

.videoBanner .closeIcon {
  position: absolute;
  right: 15px;
  top: 15px;
  width: 3rem;
  z-index: 200;
}

.videoBanner .closeIcon:hover {
  cursor: pointer;
}

.videoBanner iframe {
  max-width: 853px;
  max-height: 480px;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 50%;
  transform: translateY(-50%);
}

@media (min-width:1280px) and (max-width:1366px){  
  .menu-filter ul li {margin: 0 15px 0 0}
  #sec3 .cnFilter ul li {margin: 0 15px 0 0}
}

@media (min-width:1000px) and (max-width:1279px){
  .menu-filter ul {margin: 35px 0 0 16px}
  .menu-filter ul li {margin: 0 15px 0 0}
  
  #sec3 .cnFilter ul {margin: 35px 0 0 16px}
  #sec3 .cnFilter ul li {margin: 0 15px 0 0}
}

@media (min-width:1200px) and (max-width:1366px){  
  #page .sectionLatestNews .cnInterviewMD {margin-bottom: 20px; padding-top: 0}
  .menu-filter ul li {margin: 0 15px 0 0}
  #sec3 .cnFilter ul li {margin: 0 15px 0 0}
}

@media (min-width:900px) and (max-width:1024px){  
  .panel2 .purposeWrap {width: 850px}
  #sec3 .cnFilter ul li {margin: 0 23px 0 0 }
  #page .container {width: 90%}
}

@media (min-width:768px) and (max-width:999px){
  .boxHide {display: none}
  .cnCircusWrap .cnLogoCircus {display: none;}
  .bannerTopWorks {top: 46px;}
  /*.bannerTopWorks p.first {font-size: 160px;margin: -5px 405px 0 0;top: 30px }
  .bannerTopWorks p.second {top: 25px;font-size: 160px;left: 125px;}*/
  .logo-float {top: 40px}
  .menu-filter ul {margin: 33px 0 0 17px}
  .menu-filter ul li {margin: 0 15px 0 0}
  
  #sec3 .cnFilter ul {margin: 33px 0 0 17px}
  #sec3 .cnFilter ul li {margin: 0 15px 0 0}
  }

@media (min-width:0px) and (max-width:739px){
  .logo-float {display: none;}
  .not-fixed .logo-float {display: none !important;}
  /*.not-fixed .logo-float {display: block;top: 33px;}*/
  .front.not-fixed .logo-float {display: none;}
  .boxHide {display: none;}
  .panel2 .purposeWrap .cnTitle {padding: 0 0 0 25px}
  .montgolfiere {display: none;}
  #trigger-overlay {top: 20px;right: 20px;}
  #page .overlay .overlay-close {top: 20px;right: 20px;}
  .overlay-door #logo {top: 30px;display: block}
  #main-nav {width: 300px;height: 290px;background-size: 100%}
  #main-nav ul {padding: 40px 0 0 0}
  #main-nav li {line-height: 35px;}
  #main-nav li a {font-size: 30px;}
  .cnDisplayTable {height: 100%;}
  .cnCircusWrap {width: 202px;height: auto;margin: 0 auto;padding: 50px 0}
  .cnCircusWrap .cnLogoCircus {width: 190px;margin: 0 auto;height: auto;bottom: inherit;position: relative;left: inherit}
  .cnCircusWrap .cnLogoCircus img {width: 100%}
  .cnCircusWrap .clownHead {position: relative;top: 0px;right: 0px;width: 202px;height: 278px;margin: 0 auto;padding: 40px 0 0 0} 
  .cnCircusWrap .cnEyeLeft, 
  .cnCircusWrap .cnEyeRight,
  .cnCircusWrap .cnNose, 
  .cnCircusWrap .cnMouth {display: none;}
  .cnCircusWrap .circusMobile {display: block}
  .panel2 .purposeWrap {width: 100%;position: relative;height: auto;bottom: inherit;width: 270px;margin: 0 auto}
  .panel2 .purposeWrap .cnCircle {position:inherit;right: inherit;bottom: inherit}
  .panel2 .purposeWrap .cnTitle h1{font-size: 65px;line-height: 50px;}
  .panel2 .purposeWrap .cnTitle h2 {font-size: 75px;line-height: 75px;margin: -22px 0 0 0}
  .panel2 .purposeWrap .cnCircle {width: 270px;height: 265px;background-size: 100%;margin: -32px 0 0 0}
  .panel2 .purposeWrap .cnCircle .cnRte {padding: 0 50px}
  .panel2 .purposeWrap .cnCircle .cnRte p {font-size: 19px;line-height: 20px;}
  .panel#sec2 .col.s12 {height: auto;padding: 50px 0}
  
  .front .bannerTopWorks {
    width: 180px;
    height: 32px;
    top: inherit;
    left: inherit;
    position: relative;
    margin: 20px 0 0 25px;
}
  #sec3 .cnFilter ul li {margin: 0 0 17px 0;width: 100%;display: block;text-align: left}
  #sec3 .cnFilter .cnInner .preloader {top: 140px;}
  
  .panel8.agency .container-masonry .grid-item--width {width: 50% !important;float: left !important}
  
  .menu-filter ul {margin: 0;padding: 0 30px;top: 40px;}
  .menu-filter ul li {text-align: left;display: block;margin: 0 0 10px 0}
  /*.bannerTopWorks {height: 85px;top: 43px;left: 175px;}*/
  .sectionWorks .bannerTopWorks {top: 43px;left: 29px}
  .bannerTopWorks p.first {font-size: 20px;}
  .bannerTopWorks p.second {left: 35px;font-size: 20px;}
  /*.front .bannerTopWorks {height: 85px;top: 43px;left: 175px;}*/
  .front .bannerTopWorks p.first {font-size: 30px;}
  .front .bannerTopWorks p.second {left: 50px;font-size: 30px;}
  /*.bannerTopWorks .cnOverlay {background-size: 70%}
  .bannerTopWorks p.first {padding: 0px 140px 0 0;font-size: 55px;top: 70px;}
  .bannerTopWorks p.second {padding: 0px;font-size: 55px;top: 10px;left: 45px;}*/
  #sec3 .cnFilter {padding-top: 15px;padding-bottom: 15px;}
  #sec3 .container-masonry .grid-item--width1 {width: 100%}
  #sec3 .container-masonry .grid-item--width3 {width: 100%}
  .panel4 {padding-bottom: 25px !important}
  #page .sectionLatestNews .cnTitre {width: 100%;padding: 30px 0 10px 0}
  .cnInterviewMD .col.s6 {width: 100%}
  #page .sectionLatestNews .col.s6 .cnInner.cnInterview {padding: 20px 0 0 0}
  #page .sectionLatestNews .col.s6 .cnInner .cnRte h3 {font-size: 22px;}
  #page .sectionLatestNews .col.s6 .cnInner .cnRte p {font-size: 16px;line-height: 20px;}
  
  #contact .cnBulle {width: 255px;height: 220px;background-size: 100% !important;}
  #sec3 .cnFilter ul {padding: 0 0 0 15px;margin: 0}
  
  .sectionPeopleList .container-masonry .grid-item--width {width: 50% !important;margin: 0 auto;float: left}
   .container-masonry .grid-item {position: relative !important;top: inherit !important;left: inherit !important;float:left;height: auto !important}
  .container-masonry .grid-item img {height: auto !important;}
  .container-masonry .grid-item--width {width:50% !important;/*margin: 0 auto;float: none;*/}
  .container-masonry .grid-item--width2 {width: 100% !important}
  .container-masonry .grid-item--width4 {width: 100% !important}
  .container-masonry .grid-item--width5 {width: 100% !important}
  .container-masonry .grid-item--width4 img {height: auto !important}
  .container-masonry .grid-item--width5 img {height: auto !important}
  .container-masonry .grid-item .cnInner {padding: 13px !important}
  
  #footer .cnLeft {float: left;width: 30%;}
  #footer .cnLeft a {width: 150px;}
  #footer .cnLeft a img {width: 100%;}
  #footer .cnRight {float: right;width: 70%;}
  
  .front.not-fixed #trigger-overlay {position: absolute}
  
}


/* Clearing Floats
----------------------------------------------------------------------------------------------------------------------------*/
.clearfix:after{content: "."; display: block; height: 0; font-size:0; clear: both; visibility:hidden;}
.clearfix{display: inline-block;} 
/* Hides from IE Mac \*/ 
* html .clearfix {height: 1%;} 
.clearfix{display:block;} /* End Hack */