/* @override 
	https://static.fredfischer.fr/themes/fredf/assets/css/main.css */
body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  color: #011623;
}
main {
  flex: 1 0 auto;
}
html {
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
}
.container {
  min-width: 90%;
}
.container#main-content {
  padding-top: 60px;
  padding-bottom: 80px;
}
a {
  color: #f15f2c;
}
*:focus {
  outline: none;
}
.screen-reader-text {
  display: none;
}
/* pagination */
nav.pagination {
  background: inherit;
  box-shadow: none;
  height: auto;
  line-height: 1em;
  text-align: center;
}
nav.pagination span,
nav.pagination a {
  display: inline-block;
  vertical-align: middle;
  float: none;
  color: #000;
  padding: .5rem;
  line-height: 16px;
  min-width: 2em;
  background: #e5e6ec;
  margin: .5rem;
}
nav.pagination a:hover,
nav.pagination span.current {
  background: #dadcdf;
}
nav.pagination i,
nav.pagination [class^="mdi-"],
nav.pagination [class*="mdi-"],
nav.pagination i.material-icons {
  font-size: inherit;
  height: auto;
  line-height: 16px;
}
/* grey gradient */
.grey-gradient {
  background: #dbdce0;
  background: linear-gradient(to right, #dbdce0 0%, #e7e8ec 100%);
}
.my-orange {
  background-color: #f05f2a;
}
.my-dark-gradient {
  background: #033554;
  background: linear-gradient(to left, #033554 0%, #021c2d 100%);
}
.my-orange-txt {
  color: #f05f2a;
}
.my-grey-text {
  color: #596164;
}
/* HEADER */
header {
  background: #fff;
  padding-top: 30px;
}
header a {
  color: inherit;
}
header a.ff-logo,
footer a.ff-logo {
  font-family: 'Josefin Slab', serif;
  display: block;
}
header .brand,
footer .brand {
  font-weight: 100;
  font-size: 60px;
  line-height: 1.1em;
}
footer .brand {
  font-size: 40px;
}
header .brand span,
footer .brand span {
  color: #f15f2c;
  font-weight: 100;
}
header .brand strong {
  font-weight: 300;
}
header a.ff-logo h1.site-title,
header a.ff-logo div.site-title,
footer a.ff-logo div.site-title {
  font-size: 20px;
  margin: 0;
  color: #777;
}
footer a.ff-logo div.site-title {
  font-size: 16px;
}
footer .brand {
  color: #fff;
  margin-top: 30px;
}
footer a.ff-logo div.site-title {
  color: rgba(255, 255, 255, 0.6);
}
header a.toggle-nav {
  font-weight: 100;
  font-size: 18px;
  display: inline-block;
  position: relative;
  margin-top: 1.7em;
}
header a.toggle-nav:after,
header a.toggle-nav:before {
  position: absolute;
  left: 0;
  bottom: -10px;
  content: "";
  display: block;
  background: #dbdce1;
  width: 100%;
  height: 6px;
}
header a.toggle-nav:after {
  width: 0;
  margin-left: 50%;
  background: #f05f2b;
  transition: all 0.3s ease-in-out 0s;
}
header a.toggle-nav.active:after {
  width: 100%;
  margin-left: 0;
}
header .networks a {
  font-size: 24px;
  display: inline-block;
  margin-left: 30px;
  margin-top: 1.2em;
}
header .networks a.contact {
  color: #f05f2b;
}
/* HOME HERO */
div.hero-background {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 15vh 0;
}
#home-hero h2 {
  font-weight: 900;
  font-size: 3.6em;
  line-height: 1em;
  margin: 0;
  color: #fff;
}
.page-content h3,
#home-hero h3,
#home-orange h3,
#home-white h3 {
  font-size: 1.8em;
  font-weight: 100;
  margin: 0;
  line-height: 1.3em;
}
.line-after {
  display: inline-block;
  position: relative;
}
.line-after:after {
  display: block;
  content: "";
  margin: 15px 0;
  width: 33%;
  border-bottom: 1px solid #011623;
}
.line-after.ff-orange:after {
  border-color: #f05f2b;
}
.line-after.ff-grey:after {
  border-color: #dadcdf;
}
.line-after.ff-white:after {
  border-color: #fff;
}
.hero-title.line-after:after {
  margin-left: auto;
  margin-right: auto;
  border-color: rgba(255, 255, 255, 0.3);
}
.ff-orange-bg {
  background: #033554;
  color: #fff;
}
#home-orange,
#home-white {
  padding: 10vh 0;
}
.page-content h3 strong,
#home-orange h3 strong,
#home-white h3 strong {
  display: block;
  font-weight: 900;
  font-size: 1.5em;
  margin-bottom: 6px;
}
.page-content h3 small,
#home-orange h3 small,
#home-white h3 small {
  font-weight: 700;
  display: block;
  line-height: 1.1em;
}
.page-content p,
#home-orange p,
#home-white p {
  margin: 0 0 20px;
  font-size: 1.1em;
}
#home-orange p strong,
#home-white p strong {
  font-weight: 700;
}
.page-content,
#home-realisations,
#home-collaborations {
  padding: 5vh 0 10vh;
}
#home-realisations h4,
#home-collaborations h4 {
  font-weight: 200;
  font-size: 2em;
}
#home-collaborations h4 span.line-after:after,
#home-realisations h4 span.line-after:after {
  margin-left: auto;
  margin-right: auto;
}
.portfolio a.btn-realisations,
#home-realisations a.btn-realisations {
  display: inline-block;
  background: #fff;
  padding: 4px 12px;
  color: #011623;
  text-transform: uppercase;
  font-size: .9em;
}
.portfolio a.btn-realisations:hover,
#home-realisations a.btn-realisations:hover {
  color: #f05f2a;
}
.portfolio a.btn-realisations:after,
#home-realisations a.btn-realisations:after {
  font-family: 'FontAwesome';
  content: "\f105";
  color: #f05f2a;
  margin-left: 10px;
}
#home-collaborations .col.partners > div {
  min-height: 8em;
}
#home-collaborations .col.partners img {
  max-width: 90%;
  margin: auto;
}
.partners-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 50px;
  justify-content: center;
  align-items: center;
  margin: 40px 0;
}
.partners-logos > div {
  width: 150px;
  height: 100px;
  position: relative;
}
.partners-logos > div img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* FOOTER */
footer {
  background: #011623;
  color: #fff;
  padding-bottom: 60px;
  padding-top: 30px;
}
footer h4 {
  font-weight: 700;
  font-size: 1.4em;
  margin: 40px 0;
}
footer h4.alert:after {
  content: "\f107";
  font-family: 'FontAwesome';
  color: #f05f2b;
  margin-left: 15px;
}
footer h4 small {
  display: block;
  font-weight: 200;
}
footer ul.footer-menu {
  margin: 40px 0 0;
}
footer ul.footer-menu li {
  margin-bottom: 8px;
}
footer ul.footer-menu li:before {
  content: "/";
  margin-right: 10px;
  color: rgba(255, 255, 255, 0.2);
}
footer ul.footer-menu li a {
  color: #fff;
  transition: color 0.3s ease-in-out 0s;
}
footer ul.footer-menu li a:hover {
  color: #f05f2a;
}
footer input,
footer textarea {
  color: #fff;
  font-family: 'Raleway', sans-serif;
}
footer button.btn {
  background: transparent;
  text-transform: none;
  color: #f05f2b;
  border: 1px solid #f05f2b;
  box-shadow: none;
  transition: all 0.3s ease-in-out 0s;
}
footer button.btn:disabled {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.2) !important;
}
footer button.btn:hover {
  background: #f05f2b;
  color: #fff;
  box-shadow: none;
}
#contact-form .progress {
  background: transparent;
}
#contact-form .progress .indeterminate {
  background-color: #f05f2b;
}
.input-field input[type=text]:focus,
.input-field input[type=email]:focus,
.input-field input[type=tel]:focus,
.input-field textarea:focus {
  border-bottom: 1px solid #f05f2b !important;
  box-shadow: 0 1px 0 0 #f05f2b !important;
}
.input-field input:focus + label,
.input-field textarea:focus + label {
  color: #f05f2b !important;
}
/* navigation */
#main-nav {
  max-height: 0;
  overflow: hidden;
  background-color: #011623;
  transition: all 0.4s ease-in-out 0s;
}
#main-nav .container {
  color: #fff;
  padding: 30px 0;
}
#main-nav ul.menubar > li {
  display: inline-block;
  vertical-align: top;
  width: 33%;
  padding: 0 .75rem ;
  margin-bottom: 10px;
  text-align: center;
}
#main-nav ul.menubar li {
  margin-bottom: 8px;
}
#main-nav a {
  color: inherit;
}
#main-nav.active {
  max-height: 100em;
}
#main-nav ul.menubar > li.titre > a {
  display: block;
  font-size: 1.2em;
  font-weight: 100;
  color: #f05f2a;
  text-transform: uppercase;
  margin-bottom: 10px;
  cursor: default;
}
/* item realisations */
div.item-realisation {
  border: 8px solid #fff;
  margin-bottom: 30px;
  position: relative;
  overflow: hidden;
}
div.item-realisation img {
  display: block;
  margin: 0;
}
div.item-realisation div.logo {
  background: #033554;
  color: #fff;
  position: absolute;
  right: 0;
  top: 0;
  width: 50%;
  height: 100%;
  transition: all 0.3s ease-in-out 0s;
}
div.item-realisation div.logo span.arrow {
  position: absolute;
  right: 6px;
  top: 20%;
  margin-top: -0.5em;
  line-height: 1em;
  font-size: 1.5em;
  opacity: 0;
  transition: all 0.3s ease-in-out 0s;
}
div.item-realisation a:hover div.logo span.arrow {
  opacity: 1;
}
div.item-realisation div.logo:after {
  display: block;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 300px 50px;
  border-color: transparent transparent #033554 transparent;
  position: absolute;
  right: 100%;
  top: 0;
}
div.item-realisation a:hover div.logo {
  width: 55%;
}
div.item-realisation div.logo span.img {
  position: absolute;
  display: block;
  bottom: 10px;
  right: 10%;
  width: 90%;
  height: 50%;
}
div.item-realisation div.logo span.img img {
  display: block;
  height: auto;
  width: auto;
  max-height: 100%;
  float: right;
}
/* page hero */
div.page-hero {
  padding: 12vh 0 8vh;
  position: relative;
}
div.page-hero:after {
  display: block;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
}
div.page-hero.no-overlay:after {
  display: none;
}
div.page-hero .container {
  position: relative;
  z-index: 1;
}
div.page-hero h1 {
  text-transform: uppercase;
  font-weight: 200;
  color: #fff;
  margin: 0;
  font-size: 3.6em;
}
div.page-hero h2 {
  font-size: 1.3em;
  margin: 0;
  color: #fff;
}
/* filters */
#filters {
  margin: 0 .75rem 30px;
}
#filters ul {
  text-align: center;
}
#filters ul li {
  display: inline-block;
}
#filters ul li a {
  display: block;
  margin: 0 10px;
  padding: 4px 12px;
  background: #fff;
}
#filters ul li a:hover {
  color: #596363;
}
#filters ul li a.active {
  background-color: #596363;
  color: #fff;
}
/* single project */
div.page-hero.projet {
  padding: 2vh 0 3vh;
  color: #fff;
  text-transform: uppercase;
}
div.page-hero.projet a {
  color: inherit;
}
div.page-hero.projet #breadcrumbs {
  font-size: .75em;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 40px;
}
div.page-hero.projet #breadcrumbs a:hover {
  color: #fff;
}
div.page-hero.projet .date {
  margin: 15px 0;
  color: #f05f2a;
}
img.project-thumbnail {
  border: 10px solid #e5e6ec;
}
div.interventions {
  margin: 30px 0;
  padding: 30px 0;
  border-top: 1px solid #e5e6ec;
  border-bottom: 1px solid #e5e6ec;
}
div.interventions span.score {
  float: right;
}
div.interventions p:before {
  font-family: 'FontAwesome';
  content: "\f105";
  margin-right: 10px;
  color: #f05f2a;
}
div.interventions span.dot {
  display: inline-block;
  vertical-align: middle;
  width: 18px;
  height: 18px;
  background: #e5e6ec;
  content: "";
  margin-left: 8px;
}
div.interventions span.dot.checked {
  background: #f05f2a;
}
div.single-project h2 {
  font-size: 1.6em;
  margin: 0;
  color: #f05f2a;
}
div.single-project div.interventions h2 {
  margin: 0 0 20px;
  font-weight: 700;
  font-size: 1.3em;
  color: #191c24;
}
div.single-project p.website a:before {
  font-family: 'FontAwesome';
  content: "\f08e";
  margin-right: 8px;
}
div.page-hero .client-logo-wrapper > div {
  height: 14em;
}
div.page-hero img.client-logo {
  margin: auto;
}
.page-content.no-padding-bottom {
  padding-bottom: 0;
}
.page-content .row.top-margin {
  margin-top: 80px;
}
.page-content .row.bottom-margin {
  margin-bottom: 60px;
}
.page-content h4 {
  margin-top: 0;
  font-size: 1.6em;
  color: #586064;
  text-transform: uppercase;
}
.page-content p strong {
  font-weight: 700;
}
/* portfolio */
div.portfolio {
  padding: 2vh 0;
}
div.portfolio h4 {
  font-size: 1.6em;
  font-weight: 100;
}
div.portfolio .line-after:after {
  margin-left: auto;
  margin-right: auto;
}
.inner-padding {
  padding: 15px 25px;
}
.page-content.features {
  font-size: .9em;
}
.page-content.features h4 {
  font-size: 1.4em;
  font-weight: 300;
}
.page-content.features h4 strong {
  font-weight: 700;
}
.page-content.features ul {
  margin-top: 30px;
}
.page-content.features li,
.page-content .e-commerce-features li {
  margin-bottom: 12px;
  padding-left: 24px;
  position: relative;
}
.page-content.features li:before,
.page-content .e-commerce-features li:before {
  font-family: 'FontAwesome';
  content: "\f00c";
  position: absolute;
  left: 0;
  top: 0;
  color: #f05f2a;
}
.page-content.features .grey-gradient h4 {
  color: #f05f2a;
}
.page-content.features .icon {
  color: #e5e7eb;
  margin-bottom: 30px;
}
.page-content .features-samples {
  font-size: .9em;
}
.page-content .features-samples h3 {
  margin: 30px 0 50px;
  color: #596363;
}
.page-content .features-samples h4 {
  font-size: 1.3em;
}
.page-content .features-samples .inner {
  padding: 0 10px;
}
.page-content .features-samples .row .col:first-child .inner {
  padding-left: 0;
}
.page-content .features-samples .row .col:last-child .inner {
  padding-right: 0;
}
.page-content .features-samples .icon .fa {
  font-size: 36px;
  margin: 30px 0;
  color: #596363;
}
.page-content .e-commerce-features {
  margin-top: 30px;
  padding: 25px;
}
.page-content .e-commerce-more {
  color: #f05f2a;
  font-size: 1.4em;
  line-height: 1.4em;
}
/* 404 */
.container.error-404 {
  padding-top: 60px;
  padding-bottom: 60px;
}
.container.error-404 h1.error-404,
.container.error-404 h2.error-404 {
  font-size: 3em;
  font-weight: 200;
  margin: 0;
}
.container.error-404 h1.error-404 {
  color: #f05f2a;
  text-transform: uppercase;
}
.container.error-404 h2.error-404 {
  font-size: 1.8em;
  margin-bottom: 50px;
}
@media only screen and (max-width: 1200px) {
  #filters ul li a {
    margin: 0 .4vw;
    font-size: 1.3vw;
  }
}
@media only screen and (max-width: 900px) {
  header .brand,
  footer .brand {
    font-size: 5vw;
  }
  header a.toggle-nav {
    font-size: 2vw;
  }
  header a.ff-logo h1.site-title,
  header a.ff-logo div.site-title,
  footer a.ff-logo div.site-title {
    font-size: 2vw;
  }
  div.page-hero h1,
  #home-hero h2 {
    font-size: 5vw;
  }
  #home-hero h3,
  #home-orange h3,
  #home-white h3 {
    font-size: 3vw;
  }
  #home-orange h3 strong,
  #home-white h3 strong {
    font-size: 3.5vw;
  }
  div.interventions {
    text-align: center;
  }
  div.interventions p {
    margin-bottom: 25px;
  }
  div.interventions p:before {
    display: none;
  }
  div.interventions span.score {
    float: none;
    display: block;
  }
  div.single-project p.website {
    text-align: center;
    margin-bottom: 30px;
    font-size: .9em;
  }
}
@media only screen and (max-width: 600px) {
  header .brand,
  footer .brand {
    font-size: 10vw;
  }
  header a.toggle-nav {
    font-size: 3vw;
    font-weight: 300;
  }
  header a.ff-logo h1.site-title,
  header a.ff-logo div.site-title,
  footer a.ff-logo div.site-title {
    font-size: 3.2vw;
  }
  #home-hero h2 {
    font-size: 10vw;
  }
  div.page-hero h1 {
    font-size: 7vw;
  }
  #home-hero h3,
  #home-orange h3,
  #home-white h3 {
    font-size: 6vw;
    margin-bottom: 20px;
  }
  #home-orange h3 strong,
  #home-white h3 strong {
    font-size: 8vw;
  }
  #home-hero h3,
  #home-orange h3 {
    color: #fff;
  }
  #main-nav ul.menubar > li {
    display: block;
    width: auto;
    margin-bottom: 30px;
  }
  div.page-hero img.client-logo {
    display: block;
    max-width: 50%;
    margin: 30px auto 0;
  }
  .container#main-content {
    padding: 0;
  }
  img.project-thumbnail {
    margin-top: 40px;
  }
  #filters {
    padding-top: 30px;
  }
  #filters select {
    background: #fff;
    border: 1px solid #fff;
  }
  .page-content .features-samples .inner {
    padding: 0;
  }
  .page-content h3 {
    margin-bottom: 30px;
    font-size: 16px;
  }
}
#winsize {
  position: fixed;
  bottom: 0;
  right: 0;
  padding: 2px 8px;
  font-size: 14px;
  background: greenyellow;
  z-index: 9999;
  font-family: monospace;
}