@font-face {
    font-family: "FiraSans";
    src: url("/themes/default/font/FiraSans.woff") format("woff"), url("/themes/default/font/FiraSans.ttf") format("truetype"), url("/themes/default/font/FiraSans.otf") format("opentype");
}
@font-face {
    font-family: "Boisu";
    src: url("/themes/default/font/Boisu.woff") format("woff"), url("/themes/default/font/Boisu.ttf") format("truetype"), url(".font/Boisu.otf") format("opentype");
}


* {
    box-sizing: border-box;
    border: 0 none;
    margin: 0;
    padding: 0;
}

.hidden { display: none !important; }
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0 none;
}

.slide {
    overflow-y: hidden !important;
    -webkit-transition: height .5s ease-in !important;
            transition: height .5s ease-in !important;
}

html {width:100%;padding: 0;margin: 0;}
body {padding: 0;margin: 0 auto;background-color: #222;font-size: 1rem;width: 100%;font-family:"FiraSans", Helvetica, sans-serif;height:100%;}
h1,h2,h3 {font-family:"Boisu", serif;}
h2 {}
h3 {}
h4 {}
h5 {}
ul {padding: 0 1em;}
li {padding: 0.2em 0;}
a {background-color: #ffffff82;border-radius: 2px;}
a:hover {
    background-color:rgb(255, 203, 0);
    color:#000;
}

video {
  display: block;
  width: 50%;
  margin: auto;
  padding-bottom:1em;
}
#header {/*! width:100%; */padding: 0;margin: 0;color: #ddd;}

#gauche {width:50%;display: inline-block;}

#droite {width:48%;min-height: 10em;display: inline-block;font-size: 1.1vw;}

#title a {
  text-decoration: none;
}

#logo {font-size:10vw;padding: 0 4vw;margin: 0;color:#fff;}

.tagline p {font-size:1.2vw;margin: 0;padding: 0 4vw;padding-bottom: 1vh;width: 100%;color:#fff;}

#competences {font-size:1.3em;margin: auto;width: 90%;}

#competences li a {
  text-decoration: none;
  color: #fff;
  background-color: transparent;
}

#competences li a:hover {
    color:#f00;
}

#main {min-height: 68vh;clear: both;}

#main .container { 
    overflow-x: auto;
    color: #fff;
    padding: 1em 25%;
}

.post {
    color: #000;
    text-shadow: #fff 0px 0px 5px;
}

.post a {
  background-color: transparent;
  color: #000;
}

.post ul {
    list-style-type:none;
}

.post li {
    display: inline-block;
    padding: 0;
}
.post img {
    height: 150px;
    cursor: pointer;
}

#nav {
    padding: 3em 0;
    text-align: right;
}
#nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#nav ul li {
    display: inline-block;
    margin-left: 1em;
    padding: 0;
    font-weight: bold;
}

#nav a, #nav-toggle { color: #afe1da; }
#nav .active a, #nav a:hover, #nav-toggle:hover { color: #fff; }

#nav-toggle { display: none; }

/* IE8 + IE9 clearfix */
#header > .container:after {
    content: '';
    display: block;
    clear: both;
}

#footer {
    text-align:center;
    background-color: #222;
    padding: 1em 0;
    margin: 0;
    color: #fff;
}

#footer a {
    background-color:transparent;
    color:#fff;
}

#news {
  width: 100%;
  background-color: #959595;
  background-image: url('/themes/default/img/news.jpg');
  background-size: cover;
  background-blend-mode: screen;
  padding-bottom: 1em;
}

#news h1{
  font-size: 3vw;
  padding: 0;
  margin: 0;
  color: #fff;
  text-shadow: #000 1px 1px 1px;
}

#one {
  width: 100%;
  background-color: #24c5ce;
  background-image: url('/themes/default/img/anim.jpg');
  background-size: cover;
  background-blend-mode: screen;
  padding-bottom: 1em;
}

#two {
  width: 100%;
  background-color: #bb3737;
  background-image: url('/themes/default/img/elec.jpg');
  background-size: cover;
  background-blend-mode: screen;
}

#three {
  width: 100%;
  background-color: #73ae38;
  background-image: url('/themes/default/img/conseil.jpg');
  background-size: cover;
  background-blend-mode: screen;
}

.section {
  clear: both;
}



.section h2{
  
  font-size: 4vw;
  padding: 2vw;
  margin: 0;
  color: #fff;
  text-shadow: #000 1px 1px 1px;
}

.section div {
  padding:5vw;
  background-color: #ffffff50;
  text-shadow: #ccc 0px 0px 5px;
}

.galerie {
    padding-top:1em !important;
    text-align:center;
}

.galerie #image_list {
    list-style-type:none;
}

.galerie #image_list li {
    display:inline-block;
    padding:0;
}

.galerie img {
    height:150px;
    cursor:pointer;
}

#selected_img {
    display:none;
    width: 100%;
    height: 100%;
    padding: 0;
    padding-bottom: 0px;
    margin: 0;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #fff;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    cursor:pointer;
}

#selected_img img {
    width: 90vh;
    padding-top: 2.5%;
    height: auto;
    display:none;
}

#selected_img div {
  padding: 1em 0 0 0;
  margin: -4px 0;
  background-color: #fffb;
}

#two div:nth-of-type(1) {
  padding-bottom: 1em !important;
}
.contact {clear: both;margin: auto;}

.contact_button {width: 300px;margin: auto;padding: 1vh 0;}

.contact_button a {
  text-decoration: none;
  color: #222;
  background-color: #ddd;
  width: 100%;
  display: inline-block;
  border-radius: 16px;
  text-align: center;
  padding: 6px 0;
  font-size: 1.4em;
}

.contact_button a:hover {
    background-color:rgb(255, 203, 0);
    color:#fff;
}

.contact_button:last-of-type {
  padding-bottom: 2em;
}

.svg-email-protection {
  vertical-align: middle;
  /*! height: 2vw; */
}


/*** TYPOGRAPHY ***/

body {
    line-height: 1.6;
    font-variant-ligatures: common-ligatures;
    text-rendering: optimizeLegibility;
    font-kerning: normal;
}

p, td, th, li, dd {
    text-align: justify;
    overflow-wrap: break-word;
    word-wrap: break-word;
}


@media screen and (max-width: 800px) {
  .section div {
  padding: 1vw;
/*
  width: 95%;
*/
  height:auto;
  }
  #droite, #left{
  width: 100%;
  padding: 1em 1em;}
  #logo {
    font-size: 23vw;
    margin: 0 0 -3vw;
  }
  #baseline {
    width: 120%;
  }
  video {
      display: block;
      width:100%;
      height:auto;
  }
    #nav {
        clear: both;
        padding: 0;
    }
    #nav ul {
        padding-bottom: 1em;
    }
    #nav ul li {
        display: block;
        margin-left: 0;
        text-align: center;
    }
    #nav ul li a {
        display: block;
        padding: 0.5em 0;
    }

    .js #nav-toggle {
        display: block;
        float: right;
        width: 2em;
        margin: 0.6667em 0;
        font-size: 1.5rem;
        line-height: 2em;
        text-align: center;
        cursor: pointer;
    }
    .js #nav-toggle > * { vertical-align: middle;  }
}

img { max-width: 100%; }

hr {
    border: 0.15em solid #f5f5f5;
    border-radius: 0.3em;
    background: #f5f5f5;
}

abbr { text-decoration: underline dotted; }

/*** UTILITIES ***/

.align-left { text-align: left; }
.align-center { text-align: center; }
.align-right { text-align: right; }
.align-justify { text-align: justify; }

.image { display: block; margin: 0 auto; }
.image.xsmall { width: 20%; }
.image.small { width: 40%; }
.image.large { width: 60%; }
.image.xlarge { width: 80%; }
.image.float-left { float: left; margin: 1em 2em 1em 0; }
.image.float-right { float: right; margin: 1em 0 1em 2em; }
.image img { display: block; width: 100%; }


@media (max-width: 767px) {
    .image.xsmall { width: 60%; }
    .image.small { width: 80%; }
    .image.large, .image.xlarge { width: 100%; }
    .image.float-left, .image.float-right { float: none; margin: 0 auto; }
}

/*** TABLES ***/

table { border-spacing: 0; }

td, th {
    padding: 0.4em 1em;
    vertical-align: top;
}
th {
    font-weight: bold;
    text-align: center;
    background: #f5f5f5;
    color: #333;
}

td, th {                                         border: 1px solid #ccc; }
tr:not(:last-child) td, tr:not(:last-child) th { border-bottom: 0 none; }
thead tr:last-child th {                         border-bottom: 0 none; }
td:not(:last-child), th:not(:last-child) {       border-right: 0 none; }

tr:first-child td:first-child, tr:first-child th:first-child { border-top-left-radius: 0.3em; }
tr:first-child td:last-child, tr:first-child th:last-child {   border-top-right-radius: 0.3em; }
tbody tr:last-child td:first-child {                           border-bottom-left-radius: 0.3em; }
tbody tr:last-child td:last-child {                            border-bottom-right-radius: 0.3em; }
table thead + tbody tr:first-child td {                        border-radius: 0 !important; }

.table-responsive { overflow-x: auto; }
.table-responsive > table { margin-bottom: 0; }

/*** LISTS ***/

ol, ul {
    list-style-position: outside;
    padding-left: 1.5em;
}
ol { padding-left: 2.5em; }
li { padding-left: 0.5em; }

dt { font-weight: bold; }
dd { margin-left: 2em; }

/*** CODE ***/

code {
    margin: 0 0.1em;
    padding: 0.1em 0.2em;
    border: 1px solid #ccc;
    border-radius: 0.3em;
    background: #f5f5f5;
    font-family: 'Droid Sans Mono', 'Courier New', 'Courier', monospace;
    font-size: 0.85rem;
    line-height: 1.9824;
}

pre {
    padding: 0 1em;
    border: 1px solid #ccc;
    border-radius: 0.3em;
    background: #f5f5f5;
}
pre code {
    display: block;
    margin: 0;
    padding: 1.1111em 0;
    border: 0 none;
    background: transparent;
    overflow-x: auto;
    line-height: 1.4;
}

/*** BLOCKQUOTE ***/

blockquote {
    font-style: italic;
    margin-left: 1em;
    padding-left: 1em;
    border-left: 0.5em solid #f5f5f5;
}

/*** FORMS ***/

label, fieldset legend { font-weight: bold; }

input:not([type="checkbox"]):not([type="radio"]), button, select, textarea, fieldset, fieldset legend {
    border: 1px solid #ccc;
    border-radius: 0.3em;
    background: #fff;
    -webkit-transition: none .2s ease-in;
            transition: none .2s ease-in;
    -webkit-transition-property: border-color, background, box-shadow;
            transition-property: border-color, background, box-shadow;
}

input:not([type="checkbox"]):not([type="radio"]), button, select, textarea {
    padding: 0.5em 1em;
    outline: 0 none;
    font-size: 1rem;
}
input:focus:not([type="checkbox"]):not([type="radio"]), button:focus, select:focus, textarea:focus {
    border-color: #2EAE9B;
    box-shadow: 0 0 8px #2EAE9B;
}
input[type="button"]:focus, input[type="submit"]:focus, input[type="reset"]:focus, button:focus,
input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover, button:hover {
    background: #f5f5f5;
    cursor: pointer;
}

textarea, select[multiple] {
    vertical-align: bottom;
    overflow: auto;
}

fieldset {
    padding: 1em;
    background: #f5f5f5;
}
fieldset legend { padding: 0 0.5em; }

fieldset label, fieldset input, fieldset button,
fieldset select, fieldset textarea {
    margin: 0.2em 0.5em;
}
fieldset label:first-child, fieldset input:first-child, fieldset button:first-child,
fieldset select:first-child, fieldset textarea:first-child {
    margin-left: 0;
}
fieldset label:last-child, fieldset input:last-child, fieldset button:last-child,
fieldset select:last-child, fieldset textarea:last-child {
    margin-right: 0;
}

/* Firefox input size fix */
input::-moz-focus-inner, button::-moz-focus-inner {
    border: 0;
    padding: 0;
}