/**
 * Forms
 */

/* All elements */
.field { margin-bottom: 15px; position:relative; }
.field label { display: inline-block; margin:0; }

.field [data-validate-for] { display:none; font-size:10px; line-height:10px; position:absolute; right:0; bottom:-1.2em; }
.field [data-validate-for].visible { display:block; }

/* Textfields & textareas */
.field.textfield input,
.field.textarea textarea { display: block; width: 100%; padding: 10px; border: 1px solid #ccc; }

/* Checkbox & Radio */
.field.checkbox,
.field.radio { line-height: 20px; }
.field.checkbox input,
.field.radio input { width:20px; height:20px; float:left; margin-right:10px; }
.field.checkbox label,
.field.radio label { position:relative; margin-bottom: 0; cursor: pointer; }

.field.checkbox span:before,
.field.radio span:before { content:''; position:absolute; left:0; top:0; width:20px; height:20px; border:1px solid #ccc; background:#fff; }

.field.checkbox span:after,
.field.radio span:after { content:''; position:absolute; left:3px; top:3px; width: 14px; height:14px; background:#ccc; opacity:0; transition:all 0.5s ease 0s; }

.field.checkbox input:checked+span:after,
.field.radio input:checked+span:after { opacity: 1; }

.field.checkbox .message:before,
.field.checkbox .message:after,
.field.radio .message:before,
.field.radio .message:after { content:none; }

.field.checkbox span:before,
.field.checkbox span:after { border-radius: 0; }

.field.radio span:before,
.field.radio span:after { border-radius: 50%; }

/* Select */
.field.select select { display:block; width:100%; padding:10px; border:1px solid #ccc; }

/* Select2 */
.field.select2 .select2-selection { border-radius:0; border:1px solid #ccc; height:46px; }
.field.select2 .select2-selection__rendered { line-height:46px; }
.field.select2 .select2-selection__arrow { height:46px; }

/* Addresses */
.field.address .ap-input { height:auto; line-height:auto; border-radius:0; }
.field.address .ap-dropdown-menu { color:#000; }

/* Captcha */
.field.captcha { display:flex; flex-direction:row; justify-content:center; }

/**
 * Navigation
 **/
 
/* Frontend editor */
.ct-widget.ct-ignition { position:fixed; left:auto; top:auto; right:20px; bottom:80px; z-index:99999; transition:all 0.5s ease 0s; }
.ct-widget.ct-ignition .ct-ignition__button { position:static; margin-top:10px;}

.ce-element { outline:2px dashed rgba(243, 156, 18, 0.5); }
.ce-element--focused, .ce-element:focus { outline:2px dashed rgba(243, 156, 18, 1); }

/**
 * Maintenance
 **/
 
.maintenance { display:flex; align-items:center; justify-content:center; min-height:100vh; text-align:center; background:#004759 url(../themes/cec/assets/img/maintenance.jpg) no-repeat left top; background-size:cover; color:#fff; }
.maintenance:before { content:''; position:absolute; left:0; top:0; width:100%; height:100%; z-index:2; }
.maintenance .container { position:relative; z-index:3; visibility:hidden; }
.maintenance .code { font-size:120px; font-weight:300; }
.maintenance h1 { font-weight:500; font-size:40px; text-transform:uppercase; display:flex; flex-direction:column; justify-content:center; align-items:center; }    
.maintenance h1:after { content:''; display:block; width:50px; height:3px; background:#fff; margin:30px 0; }
.maintenance .btn { color:#fff; background:transparent; border:2px solid #fff; border-radius:99px; padding:10px 15px; text-transform:uppercase; margin:20px 10px 0 10px; display:inline-block; font-size:13px; transition:all 0.5s ease 0s; }
.maintenance .btn:hover { text-decoration:none; background:#fff; color:#333; }

/**
 * Legal
 **/
 
.legal { background:#ffd74e; color:#67604F; }
.legal .container { background:#fff; padding:80px 40px; }
.legal h1 { font-size:4rem; margin:0 0 1em 0; }
.legal h2 { font-size:3rem; margin:1em 0; }
.legal h3 { font-size:2.5rem; margin:1em 0; }
.legal h4 { font-size:2rem; margin:1em 0; }
.legal h5 { font-size:1.5rem; margin:1em 0; }
.legal table { width:100%; margin:2em 0; }
.legal table th,
.legal table td { padding:1em; border:1px solid rgba(0,0,0,0.25); }
.legal a { color:#E30613; }

/**
 * General Elements
 **/
 
html { font-size:10px; } 
body { font-size:1.8rem; /*font-family:'Oswald';*/ font-family: 'Roboto Condensed', sans-serif; font-weight:400; } 
:focus { outline:none; } 

/* Images */
img { max-width:100%; height:auto; } 
img[data-sizes] { display:block; width:100%; } 

/* Titles */
h1,h2,h3,h4,h5,h6 { font-weight:inherit; }

/* Alert */
.alert { position: relative; padding: .75rem 1.25rem; margin-bottom: 30px; border: 1px solid transparent; border-radius: .25rem; }
.alert-success { color: #155724; background-color: #d4edda; border-color: #c3e6cb; }
.alert .close { display:none; }
.alert p { margin:0; }

/* Forms */
#slider .content .field { margin-bottom:30px; }
#slider .content .field [data-validate-for] { font-size:1.2rem; color:#E30613; }
#slider .content .field.textfield { position:relative; }
#slider .content .field.textfield:before { content:''; position:absolute; left:0; bottom:0; width:100%; height:1px; background:#ddd; }
#slider .content .field.textfield:after { content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:#FFDD46; transition:all 0.3s ease 0s; }
#slider .content .field.textfield input { border:none; padding:10px 0; }
#slider .content .field.textfield label { position:absolute; left:0; top:50%; width:100%; transform:translateY(-50%); color:#67604F; transition:all 0.3s ease 0s; cursor:pointer; }
#slider .content .field.textfield.active:after,
#slider .content .field.textfield.filled:after { width:100%; }
#slider .content .field.textfield.active label,
#slider .content .field.textfield.filled label { position:absolute; left:0; top:-15px; transform:translateY(0); font-size:1.4rem; opacity:0.8; }
#slider .content .field.textarea:before { /*content:'';*/ position:absolute; left:0; top:0px; width:100%; height:1px; background:#ddd; }
#slider .content .field.textarea:after { /*content:'';*/ position:absolute; left:0; top:0px; width:0; height:1px; background:#FFDD46; transition:all 0.3s ease 0s;  }
#slider .content .field.textarea label { color:#67604F; transition:all 0.3s ease 0s; display:block; cursor:pointer; position:absolute; left:0; top:10px; }
#slider .content .field.textarea textarea { border:none; border-bottom:1px solid #FFDD46; padding:10px 0; margin-top:15px; }
#slider .content .field.textarea.active:after,
#slider .content .field.textarea.filled:after { width:100%; }
#slider .content .field.textarea.active label,
#slider .content .field.textarea.filled label { position:absolute; left:0; top:-25px; transform:translateY(0); font-size:1.4rem; opacity:0.8; }
#slider .content .field.error:after { background:#E30613; width:100%; }
#slider .content .field.captcha { justify-content:flex-start; }
#slider .content .field.checkbox span { color:#67604F; }
#slider .content .field.checkbox span:after, .field.radio span:after { background:#FFD74E; }
#slider .content .field.submit { text-align:right; }

#slider .panel .field.checkbox,
#slider .panel .field.radio { line-height:30px; }
#slider .panel .field.checkbox span:before, 
#slider .panel .field.radio span:before { width:30px; height:30px; border:none; }
#slider .panel .field.checkbox span:after, 
#slider .panel .field.radio span:after { width:18px; height:18px; left:6px; top:6px; background:#E30613; }
#slider .panel .field.checkbox input,
#slider .panel .field.radio input { width:30px; height:30px; margin-right:15px; }
#slider .panel .field.checkbox label,
#slider .panel .field.radio label { margin-bottom:15px; display:block; color:#67604f; }
#slider .panel .field.checkbox label:laft-child,
#slider .panel .field.radio label:last-child { margin-right:0; }

/* Buttons */
.btn, .fr-file { background:#FFD74E; border-radius:5px; color:#fff; padding:10px 20px; text-align:center; display:inline-block; cursor:pointer; border:none; transition:all 0.5s ease 0s;  }
.btn:hover, .fr-file:hover { background:#E30613; color:#fff; text-decoration:none; }

/* Fancybpx */

/**
 * Layout
 **/
 
/* Feneral elements */
#header { position:relative; z-index:5; color:#67604f; transition:all 1s ease 0s; }
#header.invert { color:#fff; }
#header .nav { position:absolute; top:4vh; right:10vw; display:flex; flex-direction:row; align-items:center; justify-content:flex-end; }
#header .nav ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:row; align-items:center; justify-content:flex-end; }
#header .nav ul li a { color:inherit; font-weight:300; font-size:1.8rem; }

#header .nav .menu li { margin-left:30px; }
#header .nav .menu li:first-child { margin-left:0; }
/*#header .nav .menu li.active a { border-bottom:1px solid #67604f; }*/
/*#header.invert .nav .menu li.active a { border-bottom:1px solid #fff; }*/

#header .nav .locale { list-style:none; margin:0 0 0 30px; padding:0; display:flex; flex-direction:row; align-items:center; justify-content:flex-end; }
#header .nav .locale li { margin-left:0; }
#header .nav .locale li:first-child { margin-left:0; }
#header .nav .locale li a { width:30px; height:30px; display:flex; align-items:center; justify-content:center; border-radius:100%; }
#header .nav .locale li.active a { background:#ffd74e; }

#slider #footer.sidebar { writing-mode: tb-rl; color: #fff; transform: rotate(180deg); margin: 0; font-size: 2rem; display:flex; flex-direction:row; align-items:center; justify-content:center;  }
#slider #footer ul { margin:0; padding:0; list-style:none; display:flex; flex-direction:row; align-items:center; justify-content:center; }
#slider #footer li { margin:15px 0; }
#slider #footer li a { color:#fff; }

.hamburger { display:none; padding:0; position:relative; z-index:10; }

#main { width:100vw; overflow:hidden; }

#slider .swiper-wrapper { box-sizing:border-box; }
#slider .swiper-slide { height:100vh; width:auto; display:flex; flex-direction:row; align-items:stretch; }

#slider .panel { width:40vw; padding:10vh 5vw 5vh 10vw; }
#slider .panel .inner { height:100%; position:relative; display:flex; flex-direction:column; justify-content:flex-start; align-items:flex-start; z-index:2; }
#slider .panel .title { position:relative; margin-top:10vh; }
#slider .panel .title h2 { position:relative; color:#fff; text-transform:uppercase; font-size:5rem; line-height:1.2em; z-index:2; font-weight:500; margin-bottom:1em; }
#slider .panel .title .quote { position:absolute; left:0; top:0; max-width:80px; z-index:1; transform:translate(-85%,-35%); }
#slider .panel .text { color:#67604f; text-transform:uppercase; font-size:2rem; line-height:1.4em; font-weight:400; }

#slider .content { width:60vw; padding:10vh 5vw 5vh 5vw; position:relative; }
#slider .content .inner { height:100%; display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start; }

#slider .sidebar { width:5vw; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; padding:5vh 0;}
#slider .sidebar .text { writing-mode:tb-rl; color:#fff; transform:rotate(180deg); margin:0; font-size:2rem; }

/* #slider .with-sidebar .content { width:65vw; } */

#slider .yellow .panel { background:#ffd74e; }
#slider .yellow .sidebar { background:#FBC015; }
#slider .yellow .quote { fill:#FBC015; }
#slider .yellow b { color:#E30613; font-weight:inherit; }
#slider .yellow a { color:#FBC015; font-weight:300; }

#slider .white .title h2 { color:#564E3F; }
#slider .white .title svg { fill:#FFB000; }


.jello-horizontal { animation: jello-horizontal 0.9s both; }

@keyframes jello-horizontal {
  0% {
            transform: scale3d(1, 1, 1);
  }
  30% {
            transform: scale3d(1.25, 0.75, 1);
  }
  40% {
            transform: scale3d(0.75, 1.25, 1);
  }
  50% {
            transform: scale3d(1.15, 0.85, 1);
  }
  65% {
            transform: scale3d(0.95, 1.05, 1);
  }
  75% {
            transform: scale3d(1.05, 0.95, 1);
  }
  100% {
            transform: scale3d(1, 1, 1);
  }
}


/* Accueil */
#slider .accueil .logo { width:100%; align-self:flex-start; max-width:20vw; margin-bottom:5vh; }
#slider .accueil .panel { padding-left:5vw; }
#slider .accueil .panel .inner { justify-content: center; }
#slider .accueil h2 { font-size:5rem; font-weight:bold; text-transform:uppercase; color:#686150; line-height:1.1;  }
#slider .accueil .content .title { align-self:flex-end; max-width:25vw;  }
/* #slider .accueil .panel .title { margin-top:0; } */
#slider .accueil .panel .text { display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; }
#slider .accueil .panel .record { max-width:320px; }
#slider .accueil .panel .title { font-weight:bold; text-transform:uppercase; color:#686150; }
#slider .accueil .panel .title p { position:relative; z-index: 2; }
#slider .accueil .content .inner { justify-content:flex-start; }
#slider .accueil .go { position:absolute; left:0; bottom:0; width:40%; height:60%; pointer-events:none; }
#slider .accueil .go .spring { position:absolute; left:0; bottom:0; max-width:50%; transform-origin:bottom left; }
#slider .accueil .go .jump { position:absolute; right:0; bottom:30%; max-width:75%; transition:all 0.5s ease 0.3s; }
#slider .accueil .go .jump.active { bottom:auto; left:auto; top:-1500px; right:-500px; }
#slider .accueil .link {  left:25%; bottom:5%; display:flex; flex-direction:row; align-items:center; justify-content:flex-start; margin-top:50px; }
#slider .accueil .link .mouse { width:50px; margin-right:15px; max-width:30px; }
#slider .accueil .panel { width:35vw; }
#slider .accueil .intro { max-width:55%; align-self:flex-start; margin-left:45%; align-self:flex-end; }

#slider .accueil .accueil-blog { display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; width:100%; }
#slider .accueil .accueil-blog h2 { color:#f9b91f; margin-bottom:-10px; }
#slider .accueil .accueil-blog .blog-link { color:#fff; font-weight:normal; text-transform:none; margin-bottom:15px; }
#slider .accueil .record { box-shadow: 0px 6.18px 4.41px rgba(22, 22, 21, 0.2); background:#fff; height:100%; width:100%; }
#slider .accueil .record .post-link { color:#564E3F; text-decoration:none; display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; height:100%; }
#slider .accueil .record .text { padding:20px; flex:1; display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; }
#slider .accueil .record .text svg { margin-top:auto; max-width:100%; }
#slider .accueil .record .date { font-size:1.3rem; font-weight:300; }
#slider .accueil .record .post-title { font-size:1.8rem; color:#D80010; line-height:1.2; }
#slider .accueil .record .teaser { font-size:1.3rem; font-weight:300; text-transform:none; line-height:1.2; }
#slider .accueil .record .image { overflow:hidden; }
#slider .accueil .record .image img { transition:all 0.5s ease 0s; transform:scale(1.1); width:100%; object-fit:cover;max-height:80px; }
#slider .accueil .record .link:hover .image img { transform:scale(1); }

/* Projets */
#slider .category { display:flex; flex-direction:row; align-items:stretch; justify-content:flex-start; width:auto; }
#slider .category .panel .text { color:#fff; font-weight:300; text-transform:none; }
#slider .category .content { display:flex; flex-direction:row; align-items:center; justify-content:flex-start; padding:5vh 2.5vw;  width:auto; }

#slider .category .project { width:40vw; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:10vh 2.5vw 5vh 2.5vw; }
#slider .category .project .teaser { width:100%; color:#fff; font-weight:300; position:relative; }
#slider .category .project .teaser .link { display:block; color:inherit; text-decoration:none; }
#slider .category .project .teaser .image .thumb { margin-bottom:3vh; }
#slider .category .project .teaser .image .overlay { position:absolute; top:-2vh; right:3vh; width:35%; height:70%; /*background:rgba(128,128,128,0.5);*/ display:flex; align-items:flex-start; justify-content:center; padding:30px; }
#slider .category .project .teaser .image .overlay .bg { position:absolute; left:0; top:0; width:100%; height:100%; opacity:0.7; z-index:1; }
#slider .category .project .teaser .image .overlay .logo { position:relative; z-index:2; }
#slider .category .project .teaser .image .plus { position:absolute; z-index:2; right:30px; bottom:30px; display:flex; align-items:center; justify-content:center; border:1px solid #fff; border-radius:100%; transition:all 0.5s ease 0s; padding:15px; }
#slider .category .project .teaser .image .plus .inner { position:relative; width:20px; height:20px; }
#slider .category .project .teaser .image .plus .inner:before { content:''; width:100%; height:1px; background:#fff; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
#slider .category .project .teaser .image .plus .inner:after { content:''; width:1px; height:100%; background:#fff; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
#slider .category .project .teaser .title h3 { text-transform:uppercase; }

#slider .category .project .teaser .link:hover .plus { transform:rotate(180deg); }

/*
#slider .category-1 .panel { background:#457F9D; }
#slider .category-1 .quote { fill:#346386; }
#slider .category-1 .content { background:#346386; }
#slider .category-1 .content .project .teaser .image .overlay { background:rgba(69,127,157,0.6); }

#slider .category-2 .panel { background:#8BBCA7; }
#slider .category-2 .quote { fill:#7AA592; }
#slider .category-2 .content { background:#7AA592; }
#slider .category-2 .content .project .teaser .image .overlay { background:rgba(139,188,167,0.6); }

#slider .category-3 .panel { background:#EC9840; }
#slider .category-3 .quote { fill:#D18737; }
#slider .category-3 .content { background:#D18737; }
#slider .category-3 .project {  }

#slider .category-4 .panel { background:#9798B9; }
#slider .category-4 .quote { fill:#8889A6; }
#slider .category-4 .content { background:#8889A6; }
#slider .category-4 .project {  }
*/

/** Call to action */
#slider .calltoaction { z-index: 0; }
#slider .calltoaction .panel .question { margin:5vh 0 10vh 0; }
#slider .calltoaction .content { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding-left:15vw; }
#slider .calltoaction .content .animation { transition:all 0.5s ease 0s; }
#slider .calltoaction .content .hide { opacity:0; pointer-events:none; }
#slider .calltoaction .content .logo { position:absolute; left:50%; top:30%; transform:translate(-50%, -50%);  z-index:3; max-width:40vw; }
#slider .calltoaction .content .form { width:100%; position:relative; z-index:2; }
#slider .calltoaction .content .image { position:absolute; right:0; bottom:0; min-width:75vw; z-index:1; }
#slider .calltoaction .content .image img { min-width:100%; max-width!70vw; }

/* Agence */
#slider .agence { display:flex; flex-direction:row; align-items:stretch; justify-content:flex-start; width:auto; }
#slider .agence .panel .text i { text-transform:none; font-weight:300; font-style:normal; font-size:1.8rem; }
#slider .agence .panel .image { position:absolute; right:-20vw; top:50%; transform:translateY(-50%); max-width:25vw; z-index:-1; }

#slider .agence .content { display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding-left:30vw; }
#slider .agence .content .intro { max-width:20vw; margin-bottom:5vh; font-size:2rem; color:#67604F; }
#slider .agence .content .item { display:flex; flex-direction:row; align-items:flex-start; justify-content:flex-start; color:#67604F; margin-bottom:5vh; z-index:2; }
#slider .agence .content .item.centered { align-items:center; }
#slider .agence .content .item h3 { text-transform:uppercase; font-weight:400; font-size:2.2rem; }
#slider .agence .content .item svg { margin-right:15px; min-width:60px; }
#slider .agence .content .item img { margin-right:15px; max-width:60px; }
#slider .agence .content .item ul { list-style:none; margin:0 0 0 15px; padding:0; font-weight:300; }
#slider .agence .content .item p { font-weight:300; margin-bottom:1em; }
#slider .agence .content .image { position:absolute; left:-10vw; bottom:20vh; max-width:35vw; max-height:50vh; z-index:1; }
#slider .agence .tete { position:absolute; left:calc(50% + 22px); top:25px; }

#slider .contact .panel { color:#67604f; }
#slider .contact .panel .socials { list-style:none; margin:30px 0; padding:0; color:#fff; display:flex; flex-direction:row; align-items:center; justify-content:flex-start; font-size:2.2rem; }
#slider .contact .panel .socials li { display:flex; align-items:center; justify-content:center; width:50px; height:50px; border-radius:100%; border:1px solid #fff; margin-right:15px; }
#slider .contact .panel .socials li a { color:inherit;  }
#slider .contact .panel .rgpd { font-weight:300; }
#slider .contact .panel a { color:#67604f; }
#slider .contact .content { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; background:url(../themes/cec/assets/img/contact.jpg) no-repeat center bottom / contain; }
#slider .contact .content .form { width:100%; }

#slider .agence.section-1 .image { transition:all 0.8s ease 0s; }
#slider .agence.section-1 .image.init { top:-2000px; right:2000px; }

#slider .agence.section-2 .panel .image { max-width:20vw; }
#slider .agence.section-3 .panel .image { max-width:25vw; }

::placeholder { color: #dddddd; opacity: 1; }

/* Blog */
#slider .blog { display:flex; flex-direction:row; align-items:stretch; justify-content:flex-start; width:auto; }
#slider .blog .panel { width:30vw; padding:10vh 0vw 5vh 5vw }
#slider .blog .panel .inner { justify-content:space-between; }
#slider .blog .swiper-container { height:50vh; padding:0 1.5rem; }
#slider .blog .content { width:65vw; }
#slider .blog .content .logo { text-align:right; margin:50px 0; }
#slider .blog .content .logo img { max-width:15vw; }
#slider .blog .content .swiper-slide { height:auto; display:block; }
#slider .blog .column { margin-bottom:3rem; }
#slider .blog .record { box-shadow: 0px 6.18px 4.41px rgba(22, 22, 21, 0.2); background:#fff; height:100%; }
#slider .blog .record .link { color:#564E3F; text-decoration:none; display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; height:100%; }
#slider .blog .record .text { padding:20px; flex:1; display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; }
#slider .blog .record .text svg { margin-top:auto; max-width:100%; }
#slider .blog .record .date { font-size:1.3rem; font-weight:300; }
#slider .blog .record .title { font-size:2.4rem; color:#D80010; line-height:1.1; }
#slider .blog .record .teaser { font-size:1.3rem; font-weight:300; }
#slider .blog .record .image { overflow:hidden; }
#slider .blog .record .image img { transition:all 0.5s ease 0s; transform:scale(1.1); width:100%; object-fit:cover;}
#slider .blog .record .link:hover .image img { transform:scale(1); }

#slider .blog .sidebar { background:#FFB000; }
#slider .blog .sidebar { display:flex; align-items:center; justify-content:center; }
#slider .blog .swiper-pagination { display:flex; flex-direction:column; align-items:center; justify-content:center; }
#slider .blog .swiper-pagination-bullet { margin:3rem 0; background:#fff; opacity:0.5; width:10px; height:10px; }
#slider .blog .swiper-pagination-bullet-active { opacity:1; }

#blog-post #main { width:100%; }
#blog .top { text-align:center; padding:200px 0 0 0; position:relative; color:#fff; }
#blog .top:before { content:''; position:absolute; left:0; top:0; width:100%; height:calc(100% - 150px); background:#ffd74e; z-index:-1; }
#blog .top h1 { margin-bottom:15px; font-size:4rem; }
#blog .top img { border-radius:10px; margin-top:50px; }
#blog .top .btn { background:#D80010; }
#blog .top .btn:hover { text-decoration:none; color:#ffd74e; background:#FFD74E; }
#blog .bottom { padding:50px 0; }
#blog .bottom ul,
#blog .bottom ol { margin:30px 0; }
#blog .bottom .fr-video { display:block; text-align:center; margin:30px auto; }
#blog .bottom .fr-fic { display:block; text-align:center; margin:30px auto; }
#blog .bottom .fr-img-caption { display:block; text-align:center; margin:30px auto; }
#blog .bottom .fr-img-caption .fr-img-wrap { display:flex; flex-direction:column; align-items:center; justify-content:center; }
#blog .bottom .fr-img-caption .fr-inner { font-style:italic; }
#blog .bottom .fr-fil { float:left; margin:5px 5px 5px 0; }
#blog .bottom .fr-fir { float:right; margin:5px 0 5px 5px; }
#blog .bottom h2,
#blog .bottom h3,
#blog .bottom h4 { margin-top:1.5em; margin-bottom:1em; }
#blog .bottom h2 { font-size:4rem; }
#blog .bottom h3 { font-size:3rem; }
#blog .bottom h4 { font-size:2.5rem; }
#blog .bottom table { width:100%; }
#blog .bottom table th,
#blog .bottom table td { padding:10px; border:1px solid #ddd; }


/* Popup */
#popup { position:absolute; left:0; top:0; height:100vh; z-index:20; transform:translateY(-100vh); transition:all 0.5s ease 0s; color:#fff; width:100vw; }
#popup.focus { transform:translateY(0); }

#popup .swiper-container { min-width:100vw; }
#popup .swiper-wrapper { box-sizing:border-box; }
#popup .swiper-slide { height:100vh; width:auto; display:flex; flex-direction:row; align-items:stretch; }

#popup .panel { width:40vw; padding:10vh 5vw 5vh 10vw; background:#ccc; }
#popup .panel .description { margin-top:5vh; }

#popup .content { padding:15vh 2.5vw; padding-right:calc(2.5vw + 65px); background:#ddd; display:flex; flex-direction:row; align-items:center; justify-content:flex-start; min-width:60vw; }
#popup .content .item { padding:0 2.5vw; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center;  }
#popup .content .item .video { height:100%; width:1230px; }
#popup .content .item .link { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; position:relative; }
#popup .content .item .link:before { content:''; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:2; opacity:0; pointer-events:none; transition:all 0.5s ease 0s; }
#popup .content .item .link i { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); color:#fff; z-index:3; font-size:5rem; opacity:0; pointer-events:none; transition:all 0.5s ease 0s; }
#popup .content .item .link:hover:before { opacity:1; }
#popup .content .item .link:hover i { opacity:1; }

#popup .content .item img { max-height:100%; /*height:100%;*/ object-fit:cover; }

#popup .close { display:flex; align-items:center; justify-content:center; border:3px solid #fff; border-radius:100%; transition:all 0.5s ease 0s; padding:15px; position:absolute; right:2vw; top:50%; z-index:5; transform:translateY(-50%); }
#popup .close .inner { position:relative; width:30px; height:30px; }
#popup .close .inner:before { content:''; width:100%; height:3px; background:#fff; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(45deg); }
#popup .close .inner:after { content:''; width:3px; height:100%; background:#fff; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(-135deg);; }

/*
#popup .category-1 .panel { background:#457F9D; }
#popup .category-1 .content { background:#8fb2c4; }

#popup .category-2 .panel { background:#8BBCA7; }
#popup .category-2 .content { background:#b9d7ca; }

#popup .category-3 .panel { background:#EC9840; }
#popup .category-3 .content { background:#e8b681; }

#popup .category-4 .panel { background:#9798B9; }
#popup .category-4 .content { background:#b8b8cb; }
*/












/**
 * Large devices (desktops, less than 1200px)
 **/
@media (max-width: 1400px) {
    #slider .panel .title h2 { font-size:4rem; }
}

@media (max-height: 850px) {
}

@media (max-width: 1199px) {
  #header .nav .menu li { margin-left:20px; }
  #header .nav .menu li a { font-size:1.6rem; }
  
  #slider .panel .title h2 { font-size:3.5rem; }
  #slider .panel .title .quote { max-width:60px; }
  #slider .panel .text { font-size:1.6rem; }
  
  #slider .category .project { width:50vw; }
  #slider .category .project .teaser .image .overlay { padding:15px; }
  #slider .category .project .teaser .image .plus { right:15px; bottom:15px; padding:10px; }
  
  #slider .agence .content { padding-left:20vw; }
  #slider .agence .content .intro { max-width:none; font-size:1.6rem; }
  #slider .agence .content .item h3 { font-size:1.6rem; }
  
  #popup .panel { width:50vw; } 
  #slider .accueil h2 { font-size:3rem; }
  
}

/**
 * Medium devices (tablets, less than 992px)
 **/
@media (max-width: 991px) {
  body { font-size:1.6rem; }
  #header .nav .menu li { margin-left:15px; }
  #header .nav .menu li a { font-size:1.4rem; }
  #header .nav .locale { margin-left:20px; }
  
  #slider .panel .title h2 { font-size:3.5rem; }
  #slider .panel .title .quote { max-width:50px; }
  #slider .panel .text { font-size:1.4rem; }
  #slider .panel { width:50vw; }
  #slider .content { width:50vw; }
  #slider .with-sidebar .panel { width:45vw; }
  #slider .with-sidebar .content { width:50vw; }
  #slider .with-sidebar .sidebar { width:5vw; }
  
  #popup .panel { width:50vw; }
  
}

/**
 * Small devices (landscape phones, less than 768px)
 **/
@media (max-width: 767px) {
  #slider .panel .title h2 { font-size:3rem; }
  #slider .panel .title .quote { max-width:40px; }
  #slider .content { width:100vw; }
  #slider .sidebar { width:10vw; }
  #slider .with-sidebar .content { width:90vw; }
  #slider .category .project { width:70vw; }
}

/**
 * Extra small devices (portrait phones, less than 544px)
 **/
@media (max-width: 575px) {
  body { font-size:1.4rem; }
  .hamburger { display:block; } 
  
  
  #header .nav { width:80vw; justify-content:space-between; }
  #header .nav .menu { position:fixed; left:0; top:0; width:100vw; height:100vh; opacity:0; pointer-events:none; transition:all 0.5s ease 0s; display:flex; flex-direction:column; align-items:center; justify-content:center; background:rgba(255, 215, 78,0.95); }
  #header .nav .menu li { margin:10px 0; }
  #header .nav .menu li a { color:#67604f; font-size:2rem;  }
  #header .nav .locale li.active a { background:#E30613; color:#fff; }
  body.open #header .nav .menu { opacity:1; pointer-events:auto; }
  
  #slider .panel { width:100vw; }
  #slider .panel .inner { justify-content:space-between; }
  #slider .panel .title h2 { font-size:2.5rem; }
  #slider .panel .title .quote { max-width:30px; }
  
  #slider .content { width:100vw; }
  #slider .content .field { margin-bottom:15px; }
  #slider .content .field textarea { max-height:100px; }
  #slider .accueil .intro { margin-left:0; }
  #slider .accueil .panel { order:3; width:90vw; }
  #slider .accueil .sidebar { order:2; width:10vw; }
  #slider .accueil .content { order:1; width:100vw; }
  #slider .accueil .logo { max-width:50vw; }
  #slider .accueil .go .jump { bottom:20%; }
  #slider .accueil .go { display:none; }
  #slider .accueil .content .title { max-width:none; }
  
  #slider .category .project { width:100vw; }
  
  #slider .calltoaction .panel,
  #slider .calltoaction .content { display:none; }
  
  #slider .agence .content { padding-left:5vw; }
  #slider .agence .content .intro { max-width:none; font-size:1.6rem; display:none; }
  #slider .agence .content .item { margin-bottom:2vh; }
  #slider .agence .content .item h3 { font-size:1.6rem; }
  
  
  
  #slider .agence .panel .image { right:auto; left:50%; transform:translate(-50%, -50%); max-width:50vw !important; }
  
  #slider .contact .panel { width:100vw; }
  #slider .contact .content { width:90vw; }
  #slider .contact .sidebar { width:10vw; }
  #slider .content .field [data-validate-for] { display:none; }
  
  #popup .panel { width:100vw; }
  
  #blog .bottom .fr-fil { float:none; margin:16px auto; }
    #blog .bottom .fr-fir { float:none; margin:16px auto; }
  
  
}