.hidden,
.hidden-element,
.hidden-page,
.display-none {
    display: none !important;
}

* {
    -webkit-touch-callout: none;
    /* user-select: none; */
    user-select: text;
    box-sizing: border-box;
}





:root {
    --header-height: 48px;
    --skin-grey: #f5f5f5;
    --skin-border: 1px solid #e6e6e6;
    --size-48: 48px;
    --grey:#e1e0e7b5;
    --grey-semi: #737373;
    --yellow: #fff5c88c;
    --wrap: 560px;
    --top01: 20px !important;
    --top02: 40px !important;
    --top03: 80px !important;
    --top04: 120px !important;
    --top05: 160px !important;
    --top06: 200px !important;
    --bottom02: 40px !important;
    --bottom05: 160px !important;
    --shadow01: 0 0 18px 2px rgba(0, 0, 0, 0.1);
    --link-color: #1A73E8;

}

/* roboto-regular (400) - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'),
       url('../fonts/roboto/roboto-v20-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/roboto/roboto-v20-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* roboto-mono-500 - latin */
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Mono'), local('RobotoMono-Regular'),
       url('../fonts/roboto-mono/roboto-mono-v7-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/roboto-mono/roboto-mono-v7-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}


body {
    background-color: #ffffff;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    color: #222;
    font-family: 'Roboto', 'San Francisco', 'SF Text', 'Helvetica Neue', sans-serif;
    -webkit-font-smoothing: antialiased;
    font-size: 100%;
}

#loadingmask {
    /* background-image: url("data:image/svg+xml;utf8,<svg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='90px' height='90px' viewBox='0 0 90 90' enable-background='new 0 0 90 90' xml:space='preserve'> <rect width='45' height='45'/> <rect y='45' fill='white' width='45' height='45'/> <rect x='45' fill='white' width='45' height='45'/> <rect x='45' y='45' width='45' height='45'/> </svg>");
    background-repeat: repeat;
  	background-size: 16vmin 16vmin;
  	background-position: center center; */
  	background-color: #000;
  	height: 100vh;
  	width: 100vw;
  	position: fixed;
  	top: 0;
  	bottom: 0;
  	margin: 0;
  	padding: 0;
  	z-index: 9300;
    opacity: 1;
}

.bg-image, .full-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -3;
    width: 100%;
    background-color: rgba(255, 255, 255, 0);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    height: auto;
}

#page {
    min-height: 100vh;
    line-height: 156%;
    /* margin-top: calc(var(--header-height) + 6vh);  in Case of top-header */
    letter-spacing: 0.006em;
}

.wrap {
    max-width: var(--wrap);
    width: 94vw;
    margin: 0 auto;
}

/* -------------------------------------------------------------  LAYOUT-OBJECTS --------------*/

.section {
    padding: 4vh 0 4vh 0;
    background-color: #fff;
    display: block;
    min-height: 100vh;
}

.section.half-height {
    min-height: 60vh;
}
.box-01 {
    padding: 1vmin 1vmin 0vmin 4vmin;
    background: var(--grey);
    margin: 6vmin 0 0vmin 0;
}
.box-02 {
    font-family: 'Roboto Mono', monospace;
    margin: 0;
    word-break: break-all;
    display: block;
    padding: 1vmin;
    box-shadow: inset 1px 1px 3px #00000040;
}
.box {
    width: 100%;
    display: table;
    text-align: center;
    margin: 0;
}
.box-border {
    border: var(--skin-border);
    width: 100%;
    display: table;
}
.box-border > *  {
    display: table-cell;
    vertical-align: middle;
    margin: 0 auto;
    text-align: center;
}
.bg-01 {background: var(--grey);}
.bg-03 {background: var(--yellow);}

#section-start {
    background-color: rgba(255, 255, 255, 0);
}

.shadow-01 {box-shadow: var(--shadow01);}

.topline {
    border-top: .3em solid;
    border-image: 100% 0 0 linear-gradient(90deg, currentColor 3em, transparent 0);
    padding: 6px 0 0 0;
    margin: 0;
}


/*------------------------------------------------------- COLUMNS --------------------*/

.flex-container {
  display: flex;
  align-items: flex-start;
  align-content: flex-start;
  flex-wrap: wrap;
  text-align: left;
  padding: 0;
  margin: 0;
}

.flex-item {
    flex: inherit;
}

.columns-3, .columns-2 {
  display: flex;
  justify-content: space-between;
}

.columns-2 .flex-item {width: 48%;}
.columns-3 .flex-item {width: 31%;}



.top-01 {margin-top: var(--top01);}
.top-02 {margin-top: var(--top02);}
.top-03 {margin-top: var(--top03);}
.top-04 {margin-top: var(--top04);}
.top-05 {margin-top: var(--top05);}
.top-06 {margin-top: var(--top06);}
.bottom-02 {margin-bottom: var(--bottom02);}
.bottom-05 {margin-bottom: var(--bottom05);}

/* ------------------------------------------------------------- TYPO --------------*/

pre, .monospace, .code-box, blockquote, code {
    font-family: 'Roboto Mono', monospace;
    margin: 0;
    text-align: left;
}
.code-box pre {
    margin: 1vmin 0 1.7vmin 0;
    white-space: pre-wrap;
}
p > code {
    font-size: 74%;
    background: var(--skin-grey);
    border: var(--skin-border);
    padding: 0 4px 0 4px;
    display: inline-block;
}
.monospace {
    color: inherit;
    letter-spacing: -0.02em !important;
}
.monospace.bg-01 {
    font-size: 84%;
    padding: 0 8px 0 8px;
}
small, .small, .source, .typo-small, figcaption {
    font-size: 74%;
    line-height: 164%;
    letter-spacing: 0.025em;
    color: inherit;
    text-align: left;
}
.color-white {
    color: white;
    letter-spacing: 0.04em;
}
.lang-en {
    color: var(--grey-semi);
}
.lang-pt {
    color: #856500;
}
.color-white p {
    letter-spacing: 0.03em;
}
h1, h2, h3, h4 {
    font-weight: 400;
    line-height: 124%;
    font-size: inherit;
    margin: 0;
    padding: 0;
    text-align: left;
    width: 100%;
}
h1 {
    font-size: 360%;
}
h2 {
    font-size: 240%;
    letter-spacing: -0.01em;
}
h3 {
    font-size: 180%;
}
.big-title {
    font-size: 6vw;
    letter-spacing: -0.1vw;
}

.section-full-typo {
    display: table;
    height: 100vh;
    width: 100%;
}
.typo-simple {
    position: relative;
    z-index: 10;
    display: table-cell;
    vertical-align: middle;
}
.section-text p:first-of-type {
    margin-top: 4vh;
}
p {
    margin-bottom: 4vmin;
}
.code-box {
    font-size: 70%;
    line-height: 148%;
    letter-spacing: -0.01em;
    color: inherit;
    overflow-y: auto;
}

.padding-01 {
    padding: 1vmin;
}
.padding-02 {
    padding: 2vmin;
}

blockquote {
    /* border-top: 6px solid #000; */
    padding: 3vmin 4vmin 2.4vmin 3vmin;
    margin: 0vmin 12vmin 0vmin 0vmin;
    word-spacing: -0.1em;
    font-size: 80%;
    line-height: 178%;
    letter-spacing: -0.01em;
}

ul li {
    list-style: square;
}

ul.no-square li {
    list-style: none;
    padding: 0 0 10px 0;
}
.point-list {
    border-left: var(--skin-border);
}

.align-center * {
    text-align: center;
}


.image-list a {
    display: flex;
    text-decoration: none;
}
.image-list a:hover {
    background-color: var(--grey);
}
.image-list .flex-item:first-of-type {
    width: 30% !important;
    margin-right: 10px;
    margin-bottom: 20px;
}
.image-list.columns-2 .flex-item {
    width: 68%;
}
.image-border {
    border: var(--skin-border);
}

::selection {
    background-color: var(--yellow);
}

.field-name:after {
    content: ":";
    padding: 0 2px 0 0;
}
.field-name {
    opacity: 0.8;
}

/* ------------------------------------------------------------- HEADER --------------*/

#outer-header * {
    -webkit-tap-highlight-color: transparent;
}
#outer-header {
    font-family: Roboto Mono;
    background: var(--skin-grey);
    color: inherit;
    width: 100%;
    font-size: 114%;
    line-height: 132%;
    letter-spacing: .01em;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    height: var(--header-height);
    text-align: left;
    -webkit-transition: top .3s ease-in-out;
    transition: top .6s ease-in-out;
}
#outer-header.scroll-down {
    top: -600px;
}
.icon-menu, .content-header {
    display: table-cell;
    vertical-align: middle;
}
#inner-header {
    display: table;
    height: 100%;
    padding: 0 20px 0 20px;
}


/* ------------------------------------------------------------- ICONS / LINKS / BUTTONS --------------*/
.svg-icon {
    content: "";
    background-repeat: no-repeat;
    background-position: center center;
    position: absolute;
    padding: 0;
    margin: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: table-cell;
    vertical-align: middle;
}
.icon-open-info {
    background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'> <path d='M0 0h24v24H0z' fill='none'></path> <path d='M11 17h2v-6h-2v6zm1-15C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM11 9h2V7h-2v2z'></path> </svg>");
    background-size: 24px;
}
.icon-close-info {
    background-image: url("data:image/svg+xml;utf8,<svg fill='black' width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'> <path d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/> <path d='M0 0h24v24H0z' fill='none'/> </svg>");
    background-size: 24px;
}
#open-info {
    display: table;
    position: absolute;
    right: 0;
    top: 0;
    height: var(--size-48);
    width: var(--size-48);
    cursor: pointer;
}
#close-info {
    display: table;
    position: absolute;
    right: 0;
    top: 0;
    height: var(--size-48);
    width: var(--size-48);
    cursor: pointer;
    background: #fff;
    z-index: 2;
}
a {
    color: inherit; /* #1A73E8 */
    text-decoration: underline;
    /* -webkit-tap-highlight-color: transparent; */
}
a:active, a:visited, a:focus, .btn, button {
    outline: 0;
}
a:hover {
    /* color: var(--link-color); */
    text-decoration: underline;
}
a:visited, .external-link:visited, a.internal-link:visited {
    opacity: 0.5;
}
.external-link, a.internal-link, a.zoom {
    position: relative;
    padding: 0 0 0 18px;
    word-wrap: break-word;
    display: inline-block;
    max-width: 100%;
    cursor: pointer;
}

.external-link:hover {
    color: #ce0008;
    background: #e4e4e4 !important;
}

a.external-link::before, a.internal-link::before, a.zoom::before, .doc-license a:before {
    content: "";
    background-size: 14px;
    background-repeat: no-repeat;
    background-position: 0 0;
    width: 14px;
    height: 14px;
    position: absolute;
    left: 0;
    top: 5px;
    opacity: 0.6;
}

.external-link.buttom {
    padding: 3px 8px 1px 25px;
    border: 1px solid rgb(0 0 0 / 2%);
    border-radius: 4px;
    text-decoration: none;
    background: rgb(0 0 0 / 5%);
    min-width: 220px;
}
a.external-link.buttom::before {
    left: 5px;
    top: 7px;
    opacity: 0.5;
}




figcaption a.external-link::before, .source a.external-link::before { top: 2px; }
a.external-link::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='black' height='14' viewBox='0 0 24 24' width='14'> <path d='M0 0h24v24H0z' fill='none'/> <path d='M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z'/> </svg>");
}
.doc-license a {
    text-decoration: none;
    color: var(--greydark);
    clear: both;
}
#doc-infos, .address {
    margin: 4px 0 18px 0;
}

.btn {
    cursor: pointer;
    display: inline-block;
    border-radius: 3px;
    text-align: center;
    padding: .1em 0.6em .05em 0.6em;
    text-decoration: none;
    border: var(--skin-border);
}
.btn.active {
    background: var(--skin-grey);
}

button {
    align-items: center;
    border: none;
    display: flex;
    justify-content: center;
}
button.blue-white {
    background-color: var(--link-color);
    color: #FFF;
    letter-spacing: 0.01em;
}
.button-icon {
    padding: 4px 16px 4px 8px;
}
button .icon {
    content: ' ';
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 24px;
    display: inline-block;
    height: 24px;
    width: 24px;
}
.button-icon .text {
    margin-left: 8px;
}
.button-link {
    align-items: center;
    border: none;
    display: flex;
    justify-content: center;
    text-decoration: none;
}

.icon-file-download {
    background-image: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='48px' height='48px' viewBox='192.75 192.75 48 48' enable-background='new 192.75 192.75 48 48' xml:space='preserve'><g><g id='file-download'><path fill='white' d='M232.141,211.254h-8.795v-13.191h-13.191v13.191h-8.793l15.389,15.39L232.141,211.254z M201.361,231.04v4.397h30.78 v-4.397H201.361z'/></g></g></svg>");
}









.current-page {
    z-index: 90000 !important;
    height: auto;
}
.pageinfo-content {
    position: relative;
    padding: 36px 36px 12px 36px;
}
#pageinfo {
    background: rgb(255, 255, 255);
    position: fixed;
    top: 0;
    right: 0;
    max-width: 360px;
    width: 100%;
    box-shadow: -3px 3px 12px 0 rgba(0,0,0,0.1);
}
.pageinfo-content-inner {
    overflow-y: auto;
    overflow-x: hidden;
    display: block;
    position: relative;
    width: 100%;
    padding: 0 0 24px 0;
    max-height: calc(100vh - 100px);
}




/* ---------------------------------------------------------- footer ---------------------------- */

#footer {
    margin: 0 auto;
    padding: 10vh 0 10vh 0;
    position: absolute;
    clear: both;
    background: var(--skin-grey);
    left: 0;
    right: 0;
    /* box-shadow: 0px 0px 12px 1px rgba(0, 0, 0, 0.1); */
}
.free-content-box .free-disclaimer {
    font-size: 116%;
    color: var(--greydark);
    line-height: 121%;
    padding: 0 0 0 4px;
    letter-spacing: 0.03em;
}
.free-content-box #logo-effet-outer {
    float: left;
    margin: 0;
}
.free-content-box {
    padding: 10vh 0 10vh 0;
}
.doc-license {clear: both;}

#toplink-wrapper {
    position: fixed;
    display: none;
    z-index: 999;
    bottom: 3vmin;
    right: 3vmin;
    width: 4vmin;
    min-width: 32px;
    height: 4vmin;
    min-height: 32px;
}
#topPageLink {
    width: 100%;
    height: 100%;
    text-decoration: none;
    transition: all .200s linear;
    -webkit-transition: all .200s linear;
    background: #000;
    border-radius: 50%;
    padding: 0;
    display: inline-block;
}
#topPageLink:hover {
    background: rgba(0, 0, 0, 0.5);
}
#topPageLink svg {
    fill: #fff;
    width: 100%;
    height: 100%;
}





/* --------------------------------------- IMAGES -----------------------------------------------*/
img {
    max-width: 100%;
    vertical-align: top;
}
.section-full-bg img {
    width: 100%;
}
.section-full-bg {
    height: auto;
    width: 100%;
    display: table;
    text-align: center;
    position: relative;
}
.section-half-bg {
    max-width: 50vw;
    min-width: var(--wrap);
    display: table;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}
.section-full-bg .flex-container  {
    margin: 0 auto;
    max-width: 90vw;
}
.section-full-bg h2, .section-half-bg h2 {width: 100%;}

figcaption {
    margin-top: 8px;
}

figcaption.inside {
    padding: 0.8vmin 1vmin 0.5vmin 1vmin;
    display: inline-block;
    text-align: left;
    width: 100%;
    margin: 0;
    background: black;
    letter-spacing: 0.04em;
    color: #fff;
    position: absolute;
    bottom: 0px;
    width: auto;
    left: 0;
}


figure {
    margin: 0;
    padding: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
    margin-block-start: 0;
    margin-block-end: 0;
}
figure svg {
    max-width: 100%;
    height: auto;
}
.box-border figcaption {
    border-top: var(--skin-border);
    padding: 1.2vmin 2vmin 0.9vmin 2vmin;
    margin: 0;
}
























/*------------------------------------------------------- ICONS / BUTTONS / LINKS --------------------*/

#logo-effet-outer {
    width: 100px;
    margin: 80px 0 200px 0;
}
.logo-effet-svg .type-edition, .logo-effet-svg .bg-effet {
    fill: #000;
}
#logo-effet {
    width: 100%;
    height: auto;
    max-width: 80vw;
    margin: 0 auto;
}
#logo-effet .type-edition {
    fill: black;
}
#logo-01241-outer, #logo-01241-outer-2 {
    padding: 6px 0 0px 0;
    background: #000;
    width: 74px;
    margin: 32px 0 0 0;
}
#logo-01241-outer a,
#logo-01241-outer-2 a,
#logo-01241-outer-2 a:hover,
#logo-01241-outer a:hover,
#logo-01241-outer a:visited,
#logo-01241-outer-2 a:visited {
    color: rgba(255, 255, 255, 0.5) !important;
    text-decoration: none;
    text-align: center;
}
#logo-01241-svg > svg,
#logo-01241-svg-2 > svg {
    width: 60%;
    height: auto;
    fill: #fff;
}

/*
.doc-license a:before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' id='Layer_1' x='0px' y='0px' width='384px' height='384.017px' viewBox='0 0 384 384.017' enable-background='new 0 0 384 384.017' xml:space='preserve'> <path d='M192,0.017c-106.036,0-192,85.964-192,192c0,106.024,85.964,192,192,192c106.036,0,192-85.976,192-192 C384,85.98,298.036,0.017,192,0.017z M192,348.015c-86.023,0-156.004-69.987-156.004-155.998c0-18.007,3.103-35.299,8.746-51.394 l61.013,27.169c-1.643,8.165-2.534,16.682-2.534,25.479c0,76.65,57.212,98.247,93.208,98.247c21.227,0,39.598-6.852,53.979-16.904 c2.733-1.959,5.209-3.93,7.484-5.936l-27.99-34.009c-0.821,0.938-1.678,1.83-2.557,2.628 c-10.887,10.323-22.853,10.323-25.527,10.323c-29.286,0-41.545-30.899-41.709-55.651l168.157,74.867 c0.199,0.035,0.363,0.035,0.527,0.07C302.259,315.215,250.89,348.015,192,348.015z M342.332,231.878l-173.436-77.412 c6.258-11.332,16.218-19.849,31.122-19.849c8.64,0,15.491,2.862,20.887,6.476c2.24,1.619,4.188,3.237,5.83,4.868l31.263-32.178 c-20.998-18.054-44.871-21.28-60.484-21.28c-36.688,0-62.649,15.86-77.952,39.944L61.564,106.58 C89.478,64.114,137.51,36.007,192,36.007c86.022,0,156.01,69.976,156.01,156.01c0,13.925-1.865,27.403-5.303,40.261 C342.566,232.137,342.473,232.019,342.332,231.878z'/> </svg>");
    opacity: 1;
}
.doc-license a {
    padding: 0 0 0 20px;
    position: relative;
    display: inline-block;
}
*/

.copy-code, .show-code {
    cursor: pointer;
}



/* ----------------------------------- FORMS ----------------------------------------------------- */

input[type="text"], input[type="email"], input[type="number"], input[type="url"], input[type="password"], #search-wrapper input[type="text"], textarea {
    font: 78%/164% 'Roboto Mono', monospace;
    border: 1px solid #D9D9D9;
    border-top: 1px solid silver;
    background: white none;
    padding: 6px;
    outline: none;
    width: 100%;
    letter-spacing: -0.02em;
}
input[type="text"]:hover, input[type="email"]:hover, input[type="url"]:hover, textarea:hover {
    box-shadow: inset 1px 1px 3px RGBa(102,102,102,0.2) !important;
    outline: none;
}






















/********* BASE MOBILE  ***********************/


@media only screen and (min-width: 120px) and (max-width: 720px) {

    body { font-size: 98%; }
    .wrap { max-width: 490px; }
    .section-half-bg { max-width: 94vw; min-width: auto; }
    .section { line-height: 152%; }
    h1, h2, h3 { zoom: 0.7; }
    .section-full-bg .columns-3 {
        font-size: 74%;
        line-height: 164%;
        letter-spacing: 0.025em;
    }
}

@media only screen and (max-width: 560px) {     /* the wrap width */

    .columns-3 .flex-item,
    .columns-2 .flex-item {
        width: 100%;
        margin-bottom: 10px;
        padding: 0 !important;
    }
    .image-list .flex-item:first-of-type {
        width: 40% !important;
    }
    .flex-item p {
        margin-bottom: 0;
    }
}

@media only screen and (max-width: 320px) {

    .image-list .flex-item:first-of-type {
        width: 100% !important;
        margin-bottom: 10px;
        padding: 0 !important;
    }
    .image-list a {
        display: block;
    }

}






@font-face {
    font-family: 'bebas';
    src: url('../fonts/bebas/BebasNeue-webfont.eot');
    src: url('../fonts/bebas/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/bebas/BebasNeue-webfont.woff') format('woff'),
         url('../fonts/bebas/BebasNeue-webfont.ttf') format('truetype'),
         url('../fonts/bebas/BebasNeue-webfont.svg#bebas_neueregular') format('svg');
    font-weight: normal;
    font-style: normal;
}



.effet-font {
    font-family: 'bebas', sans-serif;
}