html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: 100%;
    vertical-align: baseline
}

html {
    line-height: 1
}

ol,ul {
    list-style: none
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

caption,th,td {
    text-align: left;
    font-weight: normal;
    vertical-align: middle
}

q,blockquote {
    quotes: none
}

q:before,q:after,blockquote:before,blockquote:after {
    content: "";
    content: none
}

a img {
    border: none
}

article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary {
    display: block
}

.otgs-development-site-front-end {
    display: none
}

@font-face {
    font-family: 'work_sansblack';
    src: url("../fonts/worksans-black-webfont.woff2") format("woff2"),url("../fonts/worksans-black-webfont.woff") format("woff");
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: 'work_sansbold';
    src: url("../fonts/worksans-bold-webfont.woff2") format("woff2"),url("../fonts/worksans-bold-webfont.woff") format("woff");
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: 'work_sansmedium';
    src: url("../fonts/worksans-medium-webfont.woff2") format("woff2"),url("../fonts/worksans-medium-webfont.woff") format("woff");
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: 'work_sansregular';
    src: url("../fonts/worksans-regular-webfont.woff2") format("woff2"),url("../fonts/worksans-regular-webfont.woff") format("woff");
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: 'work_sanssemibold';
    src: url("../fonts/worksans-semibold-webfont.woff2") format("woff2"),url("../fonts/worksans-semibold-webfont.woff") format("woff");
    font-weight: normal;
    font-style: normal
}

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

@font-face {
    font-family: 'Nexa-Book';
    src: url("../fonts/nexa/Nexa-Book.eot?#iefix") format("embedded-opentype"),url("../fonts/nexa/Nexa-Book.otf") format("opentype"),url("../fonts/nexa/Nexa-Book.woff") format("woff"),url("../fonts/nexa/Nexa-Book.ttf") format("truetype"),url("../fonts/nexa/Nexa-Book.svg#Nexa-Book") format("svg");
    font-weight: normal;
    font-style: normal
}

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

@font-face {
    font-family: 'EngraversGothicBT-Regular';
    src: url("../fonts/engravers/EngraversGothicBT-Regular.eot?#iefix") format("embedded-opentype"),url("../fonts/engravers/EngraversGothicBT-Regular.otf") format("opentype"),url("../fonts/engravers/EngraversGothicBT-Regular.woff") format("woff"),url("../fonts/engravers/EngraversGothicBT-Regular.ttf") format("truetype"),url("../fonts/engravers/EngraversGothicBT-Regular.svg#EngraversGothicBT-Regular") format("svg");
    font-weight: normal;
    font-style: normal
}

html {
    font-size: 1px;
    -webkit-text-size-adjust: none;
    -ms-text-size-adjust: none;
    text-size-adjust: none
}

@media screen and (max-width: 720px) {
    html {
        font-size:.25vw
    }
}

@media screen and (min-width: 1281px) {
    html {
        font-size:.08vw
    }
}

@media screen and (min-width: 1500px) {
    html {
        font-size:1.23333px
    }
}

@keyframes arrowRg {
    0% {
        transform: rotate(45deg);
        opacity: 1;
        border-color: #0fa
    }

    50% {
        transform: rotate(45deg) translate3D(10px, -10px, 0);
        opacity: 0
    }

    51% {
        transform: rotate(45deg) translate3D(-10px, 10px, 0);
        opacity: 0;
        border-color: #fff
    }

    100% {
        transform: rotate(45deg);
        opacity: 1
    }
}

@keyframes arrowDwn {
    0% {
        transform: rotate(135deg);
        opacity: 1;
        border-color: #0fa
    }

    50% {
        transform: rotate(135deg) translate3D(10px, -10px, 0);
        opacity: 0
    }

    51% {
        transform: rotate(135deg) translate3D(-10px, 10px, 0);
        opacity: 0;
        border-color: #fff
    }

    100% {
        transform: rotate(135deg);
        opacity: 1
    }
}

@keyframes loadPicto {
    0% {
        left: 0;
        right: auto;
        width: 0
    }

    50% {
        left: 0;
        right: auto;
        width: 100%
    }

    50.1% {
        left: auto;
        right: 0;
        width: 100%
    }

    99.9% {
        left: auto;
        right: 0;
        width: 0
    }

    100% {
        left: 0;
        right: auto;
        width: 0
    }
}

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

body {
    color: #000000;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -o-font-smoothing: antialiased;
    font-smoothing: antialiased;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    font-size: 13rem;
    font-family: "Nexa-Book";
    min-height: 100vh
}

html {
    max-width: 100vw;
    overflow-x: hidden
}

::selection {
    background: #0fa;
    color: #FFFFFF;
    text-shadow: none
}

.clear {
    clear: both
}

input {
    border: none
}

a {
    cursor: pointer;
    text-decoration: none
}

strong,b {
    font-weight: normal;
    font-family: "NexaBold"
}

em,i {
    font-style: italic
}

input,textarea {
    outline: none;
    resize: none
}

*:focus {
    outline: none
}

.flux {
    max-width: 1112rem;
    margin: auto
}

.flux-lite {
    max-width: 846rem;
    margin: auto
}

.crop-img {
    font-size: 0;
    overflow: hidden;
    position: relative;
    display: block;
    contain: content
}

.crop-img img {
    object-fit: cover;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.crop-img img.loaded {
    opacity: 1
}

form .select,form .multi-select {
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.ttl-part.ctr {
    text-align: center
}

.ttl-part .ttl {
    font-family: "EngraversGothicBT-Regular";
    text-transform: lowercase;
    letter-spacing: 9rem;
    font-size: 60rem;
    color: #212121;
    text-transform: uppercase
}

@media (max-width: 1020px) {
    .ttl-part .ttl {
        letter-spacing:7rem
    }
}

@media (max-width: 720px) {
    .ttl-part .ttl {
        letter-spacing:5rem
    }
}

.ttl-part .big-ttl {
    font-family: "EngraversGothicBT-Regular";
    text-transform: lowercase;
    letter-spacing: 9rem;
    color: #fff;
    font-size: 90rem;
    line-height: 90rem
}

@media (max-width: 1020px) {
    .ttl-part .big-ttl {
        letter-spacing:7rem
    }
}

@media (max-width: 720px) {
    .ttl-part .big-ttl {
        letter-spacing:5rem
    }
}

.subttl-dash {
    font-family: "NexaBold";
    text-transform: uppercase;
    letter-spacing: 3rem;
    font-size: 14rem;
    line-height: 22rem;
    position: relative
}

@media (max-width: 720px) {
    .subttl-dash {
        letter-spacing:2rem
    }
}

.subttl-dash:before {
    position: absolute;
    content: "";
    width: 110px;
    height: 1px;
    background: #e7e7e7;
    left: -130px;
    top: 50%
}

.intro-ttl {
    font-size: 18rem;
    line-height: 36rem;
    margin-bottom: 40px;
    font-family: "NexaBold";
    color: #212121
}

.box-ttl {
    font-size: 22rem;
    font-family: "NexaBold";
    line-height: 36rem;
    padding-bottom: 22rem;
    border-bottom: 1px solid #e7e7e7;
    text-transform: uppercase
}

.tmce {
    font-size: 15rem;
    line-height: 28rem;
    font-family: "Nexa-Book";
    letter-spacing: 0.75rem;
    color: #000
}

.tmce b {
    font-weight: normal;
    font-family: "NexaBold"
}

.tmce a {
    transition: color .4s;
    color: #000;
    position: relative;
    font-family: "NexaBold"
}

.tmce a strong,.tmce a b {
    font-family: "NexaBold"
}

.tmce a:before {
    content: "";
    position: absolute;
    left: -5px;
    top: -3px;
    bottom: -2px;
    right: -5px;
    background: #0fa;
    z-index: -1;
    transition: .5s;
    transform-origin: 0 0;
    transform: scaleX(0);
    transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1)
}

.tmce a:hover {
    color: #fff
}

.tmce a:hover:before {
    transform: scaleX(1)
}

.tmce h2 {
    font-size: 17rem;
    margin: 13rem 0;
    position: relative;
    text-transform: uppercase;
    font-family: "NexaBold"
}

.tmce h2:first-child {
    margin-top: -0px
}

.tmce h3 {
    font-size: 17rem;
    margin-bottom: 10rem
}

.tmce iframe,.tmce img {
    max-width: 100%;
    display: block;
    margin: 5px auto
}

.tmce iframe {
    min-height: 310px
}

@media (max-width: 720px) {
    .tmce iframe {
        min-height:210px
    }
}

.tmce li img {
    display: inline;
    margin: auto
}

.tmce ul li {
    position: relative;
    font-family: "Nexa-Book";
    color: #212121;
    line-height: 24rem;
    padding-left: 14rem;
    padding-bottom: 6rem
}

.tmce ul li:before {
    content: "";
    display: block;
    position: absolute;
    width: 3px;
    height: 3px;
    background: #0fa;
    left: 0;
    top: 10rem
}

.lite-tmce {
    font-size: 18rem;
    line-height: 34rem
}

.lite-tmce b {
    font-weight: normal;
    font-family: "NexaBold"
}

.lite-tmce a {
    transition: color .4s;
    color: #000;
    position: relative;
    font-family: "NexaBold"
}

.lite-tmce a strong,.lite-tmce a b {
    font-family: "NexaBold"
}

.lite-tmce a:before {
    content: "";
    position: absolute;
    left: -5px;
    top: -3px;
    bottom: -2px;
    right: -5px;
    background: #0fa;
    z-index: -1;
    transition: .5s;
    transform-origin: 0 0;
    transform: scaleX(0);
    transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1)
}

.lite-tmce a:hover {
    color: #fff
}

.lite-tmce a:hover:before {
    transform: scaleX(1)
}

.dbl-list ul {
    padding-left: 0
}

.dbl-list ul li {
    color: #212121;
    font-size: 15rem;
    font-family: "NexaBold";
    position: relative;
    line-height: 36rem;
    padding-left: 0
}

.dbl-list ul li:before {
    display: none
}

.dbl-list ul li ul {
    padding-bottom: 10rem
}

.dbl-list ul li ul li {
    font-family: "Nexa-Book";
    color: #212121;
    line-height: 24rem;
    padding-left: 0;
    padding-bottom: 6rem
}

.dbl-list ul li ul li:before {
    display: none
}

.bt {
    cursor: pointer;
    font-family: "NexaBold";
    color: #212121;
    font-size: 15rem;
    text-transform: uppercase;
    letter-spacing: .025em;
    line-height: 20rem
}

.bt p {
    display: inline-block;
    vertical-align: middle;
    line-height: 1
}

.bt:after {
    content: "";
    vertical-align: middle;
    margin-top: -2px;
    margin-left: 20px;
    width: 6px;
    height: 6px;
    border-top: 2px solid #0fa;
    border-right: 2px solid #0fa;
    transform: rotate(45deg);
    display: none;
    position: relative;
    z-index: 5
}

.bt.hv:after {
    transition-duration: .5s
}

.bt.hv:hover:after {
    border-color: #036;
    animation: arrowRg .7s
}

.bt.hv:hover.arr-dwn:after {
    animation: arrowDwn .7s
}

.bt.arr-dwn:after {
    margin-top: -10px;
    transform: rotate(135deg);
    display: inline-block
}

.bt.arr:after {
    display: inline-block
}

.bt.hv {
    position: relative;
    transition-duration: .2s
}

.bt.hv:before {
    content: "";
    display: block;
    position: absolute;
    z-index: 1;
    background: #0fa;
    height: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition-duration: .5s;
    transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1)
}

.bt.hv p,.bt.hv span {
    position: relative;
    z-index: 10;
    transition-duration: .5s
}

.bt.hv:hover {
    border-color: #0fa
}

.bt.hv:hover:before {
    height: 100%
}

.bt.hv:hover p,.bt.hv:hover span {
    color: #036
}

.bt.loading {
    position: relative;
    pointer-events: none
}

.bt.loading span {
    opacity: 0
}

.bt.loading:before {
    content: "";
    width: 60px;
    height: 60px;
    position: absolute;
    margin: -30px;
    top: 50%;
    left: 50%;
    background: none;
    background-image: url("../img/src/pictos/ripple.svg");
    background-size: 100% 100%;
    display: block;
    transition-duration: 0s
}

.simple-bt {
    padding: 22px 40px 18px
}

.bdr-bt {
    padding: 22px 40px 18px;
    border: 1px solid #e7e7e7
}

.play-bt {
    border: 1px solid rgba(255,255,255,0.3)
}

.play-bt p {
    color: #fff;
    display: inline-block;
    vertical-align: middle
}

.play-bt i {
    display: inline-block;
    vertical-align: middle;
    width: 30px;
    height: 30px;
    border: 2px solid #fff;
    border-radius: 50%;
    position: relative;
    margin-top: -2px;
    margin-left: 25px
}

.play-bt i:after {
    content: "";
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 4px 0 4px 6px;
    border-color: transparent transparent transparent #0fa;
    left: 50%;
    top: 50%;
    margin: -4px -2px
}

.play-bt.hv i:after {
    transition-duration: .5s
}

.play-bt.hv:hover i:after {
    border-color: transparent transparent transparent #fff
}

.full-bt {
    padding: 25px 74px 20px;
    background: #212121
}

.full-bt span {
    text-transform: uppercase;
    color: #fff;
    font-family: "NexaBold";
    text-align: center
}

.arw-bt {
    position: relative;
    transition-duration: .5s;
    width: 40px;
    height: 40px;
    margin: -20px
}

.arw-bt:hover span {
    border-color: #0fa !important
}

.arw-bt span {
    margin: 13px;
    width: 14px;
    height: 14px;
    border-top: 2px solid #000;
    border-right: 2px solid #000;
    display: block;
    cursor: pointer;
    transition-duration: .5s
}

.arw-bt.prev-bt span {
    transform: rotate(-135deg)
}

.arw-bt.prev-bt:hover span {
    transform: translateX(-5px) rotate(-135deg) scale(1.2)
}

.arw-bt.next-bt span {
    transform: rotate(45deg)
}

.arw-bt.next-bt:hover span {
    transform: translateX(5px) rotate(45deg) scale(1.2)
}

.close-bt {
    width: 28px;
    height: 28px;
    display: block;
    cursor: pointer;
    position: relative;
    opacity: 1
}

.close-bt span {
    display: block;
    position: absolute;
    height: 2px;
    width: 34px;
    background: #fff;
    opacity: 1;
    transform: rotate(0deg);
    transition: .25s ease-in-out;
    top: 50%;
    left: 50%;
    margin-left: -17px;
    margin-top: -1px
}

.close-bt span:nth-child(1) {
    transform: rotate(45deg)
}

.close-bt span:nth-child(2) {
    transform: rotate(-45deg)
}

.close-bt:hover span:nth-child(1) {
    transform: rotate(-45deg)
}

.close-bt:hover span:nth-child(2) {
    transform: rotate(45deg)
}

#main-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1500;
    width: 100vw;
    height: 100vh;
    line-height: 100vh
}

#main-loader .wh {
    background: #002448;
    width: 100vw;
    height: 100vh;
    position: absolute;
    z-index: 10
}

#main-loader .loader {
    width: 100vw;
    height: 100vh;
    line-height: 100vh;
    overflow: hidden;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    position: absolute;
    text-align: center
}

#main-loader img {
    display: inline-block;
    vertical-align: middle;
    line-height: 100vh;
    width: 50%;
    height: auto
}

#main-loader span {
    color: #fff;
    opacity: 1;
    top: 0;
    line-height: 100vh;
    vertical-align: middle;
    text-align: center;
    text-transform: uppercase;
    font-family: "NexaBold";
    font-size: 100rem;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw
}

.custom-select {
    display: inline-block;
    border-radius: 0;
    cursor: pointer;
    background: transparent;
    position: relative
}

.custom-select:after {
    content: "";
    position: absolute;
    right: 40px;
    top: 50%;
    transform: rotate(135deg) translateY(50%);
    width: 6px;
    height: 6px;
    border-top: 2px solid #0fa;
    border-right: 2px solid #0fa;
    display: inline-block;
    z-index: 5
}

.custom-select select {
    padding: 22px 40px 18px;
    border: 1px solid #e7e7e7;
    background: transparent;
    border-radius: 0;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    cursor: pointer;
    font-family: "NexaBold";
    color: #212121;
    font-size: 15rem;
    text-transform: uppercase;
    letter-spacing: .025em;
    line-height: 20rem
}

#main-header {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    height: 80px;
    line-height: 85px;
    font-family: "NexaBold";
    text-transform: uppercase;
    color: #fff;
    z-index: 1000;
    transition: all .5s;
    border-bottom: 1px solid rgba(245,245,245,0);
    transform: translate3d(0, 0, 0)
}

#main-header.hidden {
    transform: translateY(-80px);
    border-bottom: 1px solid rgba(245,245,245,0) !important
}

#main-header.hidden.menu-open {
    transform: translateY(0px);
    border-bottom: 1px solid #efefef !important
}

#main-header .header-c {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-align: center;
    align-items: center
}

#main-header:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120px;
    background-image: linear-gradient(to bottom, #000 0%, transparent 100%);
    z-index: 1;
    opacity: .5;
    transition-duration: .5s
}

#main-header:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: #fff;
    transition-duration: .5s;
    transform: translateY(-80px)
}

#main-header .logo-pt {
    margin-left: 50rem;
    position: relative;
    z-index: 20;
    transition-duration: .3s;
    overflow: hidden;
    height: 100%
}

#main-header .logo-pt a {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: center;
    align-items: center
}

#main-header .logo-pt .tagline {
    font-size: 9rem;
    letter-spacing: 0.43em;
    width: 100%;
    text-align: center;
    line-height: 1;
    margin-top: 5rem
}

#main-header .logo-pt svg g {
    transition: all 0.3s
}

#main-header .logo-pt .main {
    width: 280rem;
    display: inline-block;
    vertical-align: middle;
    height: auto;
    transition: opacity .3s
}

#main-header .logo-pt:hover svg g {
    fill: #0fa
}

#main-header .logo-pt:hover {
    transition-duration: .3s
}

#main-header .logo-pt:hover .green-mk {
    height: 100%
}

#main-header a {
    color: #ffffff
}

#main-header .links-pt {
    padding-right: 50rem;
    position: relative;
    z-index: 10
}

#main-header .links-c {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center
}

#main-header .links-pt ul {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center
}

#main-header .links-pt li {
    font-size: 16rem;
    margin-right: 20rem;
    position: relative
}

#main-header .links-pt li:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -2px;
    height: 6px;
    background: #0fa;
    display: block;
    transform: translateY(-7px);
    transition-duration: .5s;
    opacity: 0
}

#main-header .links-pt li.is-about {
    position: relative;
    margin-left: 20rem
}

#main-header .links-pt li.is-about:after {
    content: "|";
    position: absolute;
    left: -23rem;
    font-size: 12px;
    top: 0;
    color: #FFF;
    opacity: 0.5;
    transition: color 0.5s
}

#main-header .links-pt li.act:before {
    transform: translateY(0);
    opacity: 1
}

#main-header .links-pt li.act span,#main-header .links-pt li.act a {
    color: #0fa
}

#main-header .links-pt li a {
    position: relative;
    line-height: 1;
    display: inline-block;
    font-family: "NexaBold";
    text-transform: uppercase;
    letter-spacing: 3rem;
    font-size: 12rem
}

@media (max-width: 720px) {
    #main-header .links-pt li a {
        letter-spacing:2rem
    }
}

#main-header .links-pt li .grn {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    color: #0fa;
    overflow: hidden;
    height: 0%
}

#main-header .links-pt li .grn span {
    line-height: 1;
    display: block;
    bottom: 0;
    position: absolute;
    left: 0;
    right: 0
}

#main-header .links-pt li.hv .grn {
    transition-duration: .5s;
    transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1)
}

#main-header .links-pt li:hover .grn {
    height: 110%
}

#main-header .languages {
    font-size: 12rem;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    font-family: "NexaBold";
    margin-left: 10rem;
    height: 28px;
    margin-top: 4rem
}

#main-header .languages a {
    margin: 0 3rem;
    height: 100%;
    line-height: 28px
}

#main-header .languages>span {
    height: 100%;
    line-height: 28px
}

#main-header .languages .slash {
    font-size: 10rem
}

#main-header .languages .active {
    pointer-events: none;
    color: #0fa
}

#main-header .social-pt {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center
}

#main-header .social-pt a {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 28px;
    width: 28px;
    margin: 0 3rem
}

#main-header .social-pt a svg {
    width: 26px;
    height: 26px
}

#main-header .social-pt a svg path {
    fill: white
}

#main-header .social-pt a.insta svg {
    width: 20px;
    height: 20px
}

#main-header .social-pt a.hv .svg path {
    transition-duration: .5s
}

#main-header .social-pt a:hover .svg path {
    fill: #0fa
}

#main-header #mobile-burger-bt {
    height: 80px;
    width: 80px;
    position: absolute;
    right: 0;
    top: 0;
    display: inline-block;
    vertical-align: middle;
    z-index: 200;
    cursor: pointer;
    display: none
}

#main-header #mobile-burger-bt .bt {
    position: relative;
    height: 23px;
    width: 30px;
    margin: 28px auto
}

#main-header #mobile-burger-bt span {
    display: block;
    position: absolute;
    height: 3px;
    width: 100%;
    background: #fff;
    opacity: 1;
    left: 0;
    transform: rotate(0deg);
    transition: .25s ease-in-out
}

#main-header #mobile-burger-bt span:nth-child(1) {
    top: 0px
}

#main-header #mobile-burger-bt span:nth-child(2),#main-header #mobile-burger-bt span:nth-child(3) {
    top: 10px
}

#main-header #mobile-burger-bt span:nth-child(3) {
    opacity: 0
}

#main-header #mobile-burger-bt span:nth-child(4) {
    top: 20px
}

#main-header #mobile-burger-bt.open span {
    background: #000
}

#main-header #mobile-burger-bt.open span:nth-child(1),#main-header #mobile-burger-bt.open span:nth-child(4) {
    top: 14px;
    width: 0;
    left: 13px
}

#main-header #mobile-burger-bt.open span:nth-child(2) {
    transform: rotate(45deg)
}

#main-header #mobile-burger-bt.open span:nth-child(3) {
    opacity: 1;
    transform: rotate(-45deg)
}

#main-header.fx,#main-header.menu-open {
    color: #000;
    border-bottom: 1px solid #efefef
}

#main-header.fx .logo-pt svg g,#main-header.menu-open .logo-pt svg g {
    fill: #000
}

#main-header.fx .logo-pt:hover svg g,#main-header.menu-open .logo-pt:hover svg g {
    fill: #0fa
}

#main-header.fx .links-c .is-about::after,#main-header.menu-open .links-c .is-about::after {
    color: #000 !important
}

#main-header.fx .social-pt a .svg path,#main-header.menu-open .social-pt a .svg path {
    fill: #000
}

#main-header.fx:after,#main-header.menu-open:after {
    transform: translateY(-80px)
}

#main-header.fx:before,#main-header.menu-open:before {
    transform: translateY(0px)
}

#main-header.fx a,#main-header.menu-open a {
    color: #000
}

#main-header.fx a .grn,#main-header.menu-open a .grn {
    display: none;
    visibility: hidden
}

#main-header.fx .links-pt li.hv a,#main-header.menu-open .links-pt li.hv a {
    transition-duration: .5s
}

#main-header.fx .links-pt li.hv:hover a,#main-header.menu-open .links-pt li.hv:hover a {
    color: #0fa
}

#main-header.fx #mobile-burger-bt span,#main-header.menu-open #mobile-burger-bt span {
    background: #000
}

@media (max-width: 1180px) {
    #main-header .header-c {
        height:80px
    }

    #main-header .header-c .logo-pt {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: center;
        justify-content: center
    }

    #main-header #mobile-burger-bt {
        display: block
    }

    #main-header .links-pt {
        overflow: hidden;
        top: 0;
        position: absolute;
        right: -100%;
        width: 100%;
        text-align: center;
        z-index: 10;
        padding: 0;
        line-height: 70px;
        transition: .5s;
        height: 100vh;
        background: #fff
    }

    #main-header .links-pt.open {
        right: 0
    }

    #main-header .links-pt .links-c {
        height: 100%;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: center;
        justify-content: center;
        padding: 60px 0 80px;
        background: #fff;
        border-left: 1px solid #efefef;
        border-top: 1px solid #efefef
    }

    #main-header .links-pt .links-c .is-about {
        margin-left: auto;
        margin-top: 10px
    }

    #main-header .links-pt .links-c .is-about::after {
        content: "-";
        position: absolute;
        top: -32px;
        font-size: 12px;
        color: #FFF;
        opacity: 0.5;
        left: 49%;
        transition: color 0.5s
    }

    #main-header .links-pt .social-pt {
        position: absolute;
        bottom: 30px;
        -ms-flex-pack: center;
        justify-content: center;
        left: 0;
        right: 0
    }

    #main-header .links-pt .social-pt a svg path {
        fill: #000
    }

    #main-header .links-pt ul,#main-header .links-pt li {
        display: block
    }

    #main-header .links-pt li {
        margin: 0 auto;
        font-size: 24rem;
        display: table
    }

    #main-header .links-pt li:before {
        display: none
    }

    #main-header .links-pt li a {
        color: #000;
        font-size: 24rem !important;
        line-height: 66rem !important
    }
}

@media (max-width: 720px) {
    #main-header {
        padding-bottom:44px
    }

    #main-header .logo-pt {
        margin-left: 25px;
        margin-left: 25rem
    }

    #main-header .links-pt {
        width: 100%;
        right: -100%;
        line-height: calc(100vh - 80px)
    }

    #main-header .links-pt .links-c {
        padding: 0
    }

    #main-header .links-pt .links-c ul {
        line-height: 60rem;
        display: inline-block;
        vertical-align: middle;
        width: 100%;
        padding: 0 0 30px
    }

    #main-header .links-pt .links-c ul li a {
        line-height: 30rem !important
    }

    #main-header .links-pt .links-c .social-pt {
        line-height: 1;
        bottom: 40px !important
    }
}

/* S'assurer que les liens dans le menu sont bien blancs et visibles */
nav a, .menu-container a {
    color: #ffffff !important;
    padding: 0 20px;
    text-decoration: none;
    font-family: "NexaBold", Arial, sans-serif; /* Utilisation de votre police personnalisée */
    font-size: 16px;
}
/* 1. Base : On s'assure que le body a une taille de police par défaut correcte */
body {
    background-color: #f9f9f9;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* Force une taille de police de base plus grande si le CSS d'origine la réduit trop */
    font-size: 16px !important; 
    font-family: Arial, sans-serif; /* Police par défaut si non définie dans ton CSS */
}

/* 2. Structure de la carte de contact */
.contact-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px 20px;
}
.contact-card {
    background: #fff;
    width: 100%;
    max-width: 600px;
    padding: 50px; /* Plus d'espace intérieur */
    border-radius: 15px; /* Bords plus arrondis */
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); /* Ombre plus douce */
    text-align: center;
}

/* 3. Logo */
.contact-logo-container {
    margin-bottom: 40px;
    display: inline-block; /* Pour centrer */
}
.contact-logo {
    max-width: 280px; /* Logo légèrement plus grand */
    height: auto;
}

/* 4. Titre Principal - Forcer la taille */
.contact-card h1.ttl {
    font-size: 32px !important; /* Titre bien grand */
    color: #333 !important;
    margin-bottom: 10px;
    text-transform: none; /* Pas de majuscules automatiques */
}

.contact-card h2.ttl {
    font-size: 18px !important; /* Titre bien grand */
    color: #333 !important;
    margin-bottom: 10px;
    text-transform: none; /* Pas de majuscules automatiques */
}

/* 5. Séparateur */
.contact-card hr {
    border: 0;
    border-top: 2px solid #eee; /* Ligne plus visible */
    margin: 40px 0;
}

/* 6. Méthodes de Contact - Forcer la taille */
.contact-method {
    margin-bottom: 40px;
}
.contact-method h2 {
    font-size: 18px !important; /* Sous-titres plus grands */
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 15px;
    color: #555 !important;
    font-weight: bold !important;
}
.contact-method p, .contact-method a {
    font-size: 18px !important; /* Texte de contact bien lisible */
    color: #666 !important;
    line-height: 1.7; /* Plus d'espace entre les lignes */
    text-decoration: none;
}
.contact-method a:hover {
    color: #00a859 !important; /* Vert BEST au survol */
    text-decoration: underline;
}



.course-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px 20px;
}
.course-card {
    background: #fff;
    width: 100%;
    max-width: 1200px;
    padding: 50px; /* Plus d'espace intérieur */
    border-radius: 15px; /* Bords plus arrondis */
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); /* Ombre plus douce */
    text-align: center;
}

/* 3. Logo */
.course-logo-container {
    margin-bottom: 40px;
    display: inline-block; /* Pour centrer */
}
.course-logo {
    max-width: 280px; /* Logo légèrement plus grand */
    height: auto;
}

/* 4. Titre Principal - Forcer la taille */
.course-card h1.ttl {
    font-size: 48px !important; /* Titre bien grand */
    color: #333 !important;
    margin-bottom: 10px;
    text-transform: none; /* Pas de majuscules automatiques */
    letter-spacing: 10px;
}

.course-card h2.ttl {
    font-size: 26px !important; 
    color: #333 !important;
    margin-bottom: 10px;
    text-transform: none; /* Pas de majuscules automatiques */
    letter-spacing: 5px;
}

.course-card h3.ttl {
    font-size: 18px !important; 
    color: #000000 !important;
    margin-bottom: 10px;
    text-transform: none; /* Pas de majuscules automatiques */
    letter-spacing: 3px;
}

/* 5. Séparateur */
.course-card hr {
    border: 0;
    border-top: 2px solid #eee; /* Ligne plus visible */
    margin: 40px 0;
}

/* 6. Méthodes de course - Forcer la taille */
.course-method {
    margin-bottom: 40px;
}
.course-method h2 {
    font-size: 18px !important; /* Sous-titres plus grands */
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 15px;
    color: #555 !important;
    font-weight: bold !important;
}
.course-method p, .course-method a {
    font-size: 18px !important; /* Texte de course bien lisible */
    color: #666 !important;
    line-height: 1.7; /* Plus d'espace entre les lignes */
    text-decoration: none;
}
.course-method a:hover {
    color: #00a859 !important; /* Vert BEST au survol */
    text-decoration: underline;
}







/* 7. Lien de Retour - Forcer la taille */
.back-link {
    display: inline-block;
    margin-top: 30px;
    font-weight: bold !important;
    color: #00a859 !important; /* Vert BEST */
    font-size: 18px !important; /* Même taille que le reste */
    text-decoration: none;
}
.back-link:hover {
    text-decoration: underline;
}

/* 8. Pied de page simple */
#footer-simple {
    padding: 30px 0;
    background-color: #fff;
    border-top: 1px solid #eee;
    text-align: center;
}
#footer-simple p {
    font-size: 14px !important; /* Texte de copyright légèrement plus petit */
    color: #999 !important;
    margin: 0;
}

@media (max-width: 720px) and (orientation: landscape) {
    #main-header .links-pt ul {
        line-height:35rem !important
    }

    #main-header .links-pt ul li {
        display: inline-block;
        margin: 0 10px;
        line-height: 35rem !important
    }

    #main-header .links-pt ul li a {
        font-size: 15rem !important
    }
}

.mobile #main-header {
    padding-bottom: 44px
}

.mobile #main-header .logo-pt {
    margin-left: 25px;
    margin-left: 25rem
}

.mobile #main-header .links-pt {
    width: 100%;
    right: -100%;
    line-height: calc(100vh - 80px)
}

.mobile #main-header .links-pt.open {
    right: 0
}

.mobile #main-header .links-pt .links-c {
    padding: 0
}

.mobile #main-header .links-pt .links-c ul {
    line-height: 60rem;
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    padding: 0 0 30px
}

.mobile #main-header .links-pt .links-c ul li a {
    line-height: 30rem !important
}

.mobile #main-header .links-pt .links-c .social-pt {
    line-height: 1;
    bottom: 40px !important
}

@media (orientation: landscape) {
    .mobile #main-header .links-pt ul {
        line-height:35rem !important
    }

    .mobile #main-header .links-pt ul li {
        display: inline-block;
        margin: 0 10px;
        line-height: 35rem !important
    }

    .mobile #main-header .links-pt ul li a {
        font-size: 15rem !important
    }
}

@media (min-height: 500px) and (max-width: 720px) {
    #main-header .links-pt .links-c ul {
        padding:0px 0 120px
    }

    #main-header .links-pt .links-c .social-pt {
        bottom: 100px
    }
}

#footer {
    background: #036;
    color: #fff;
    padding-bottom: 35px;
    position: relative
}

#footer a {
    color: #fff
}

#footer .footer-c {
    padding: 70px 50px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    position: relative
}

@media (max-width: 1020px) {
    #footer .footer-c {
        -ms-flex-direction:column;
        flex-direction: column;
        padding: 40px 50px
    }
}

#footer .footer-c .logo-pt {
    z-index: 10;
    font-family: "NexaBold"
}

#footer .footer-c .logo-pt img {
    width: 200rem;
    height: auto
}

#footer .footer-c .links-pt {
    text-transform: uppercase;
    font-family: "NexaBold";
    text-transform: uppercase;
    letter-spacing: 3rem;
    font-size: 12rem;
    padding-top: 9px
}

@media (max-width: 720px) {
    #footer .footer-c .links-pt {
        letter-spacing:2rem
    }
}

#footer .footer-c .links-pt li {
    display: inline-block;
    vertical-align: middle;
    margin-right: 30rem
}

#footer .footer-c .links-pt li:last-child {
    margin-right: 0rem
}

#footer .footer-c .rg-pt {
    font-family: "NexaBold";
    font-size: 13px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center
}

#footer .footer-c .rg-pt a {
    margin: 0 5rem
}

#footer .footer-c .rg-pt .socials {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center
}

#footer .footer-c .rg-pt .socials a {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 28px;
    width: 28px;
    margin: 0 3rem
}

#footer .footer-c .rg-pt .socials a svg {
    width: 26px;
    height: 26px
}

#footer .footer-c .rg-pt .socials a svg path {
    fill: white
}

#footer .footer-c .rg-pt .socials a.insta svg {
    width: 20px;
    height: 20px
}

#footer .footer-c .rg-pt .socials a.hv .svg path {
    transition-duration: .5s
}

#footer .footer-c .rg-pt .socials a:hover .svg path {
    fill: #0fa
}

#footer .mention-p {
    text-align: center;
    font-size: 11px
}

#footer .mention-p a {
    color: #fff;
    opacity: .5
}

#footer .mention-p b {
    font-weight: normal;
    color: #fff;
    opacity: .5
}

#footer .mention-p span {
    display: inline-block;
    vertical-align: middle;
    margin: 0 5px;
    height: 10px;
    background: #fff;
    opacity: .5;
    width: 1px
}

#footer .logo-webedia {
    position: absolute;
    left: 50px;
    bottom: 35px
}

#footer .logo-webedia a {
    display: block
}

#footer .logo-webedia a.no-p {
    cursor: default;
    pointer-events: none
}

#footer .logo-webedia img {
    width: 70rem;
    height: auto
}

@media (max-width: 720px) {
    #footer .logo-webedia {
        position:relative;
        bottom: auto;
        left: auto;
        text-align: center;
        margin-bottom: 20px
    }

    #footer .logo-webedia a {
        display: inline-block
    }
}

@media (max-width: 1020px) {
    #footer .footer-c {
        -ms-flex-direction:column;
        flex-direction: column;
        padding: 40px 50px;
        -ms-flex-align: center;
        align-items: center
    }

    #footer .links-pt {
        margin: 20px 0
    }
}

@media (max-width: 720px) {
    #footer .footer-c .links-pt {
        -ms-flex-align:center;
        align-items: center;
        -ms-flex-pack: center;
        justify-content: center;
        display: -ms-flexbox;
        display: flex
    }

    #footer .footer-c .links-pt li {
        margin: 5rem
    }

    #footer .footer-c .rg-pt {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: center;
        justify-content: center;
        margin-top: 20rem
    }

    #footer .footer-c .rg-pt .socials {
        width: 100%;
        margin-top: 10rem;
        -ms-flex-pack: center;
        justify-content: center
    }
}

.page-cover {
    height: 590rem;
    position: relative
}

.page-cover.archive-cover {
    height: 700rem;
    background: #000
}

.page-cover.archive-cover .frt-c {
    height: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: end;
    justify-content: flex-end
}

.page-cover.archive-cover .frt-c .flux {
    height: auto
}

.page-cover.archive-cover .frt-c .sub-ttl {
    color: #fff;
    font-size: 14rem;
    padding-bottom: 12rem
}

.page-cover.archive-cover .frt-c .big-ttl {
    color: #FFF;
    font-size: 120rem;
    line-height: 120rem;
    text-transform: uppercase
}

.page-cover.archive-cover .frt-c .ttl-part {
    max-width: 830rem;
    position: relative;
    bottom: auto;
    left: auto
}

.page-cover .media-c {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10
}

.page-cover .media-c:before {
    content: "";
    background: #000;
    z-index: 20;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    opacity: .55
}

.page-cover .media-c .img-c {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: relative
}

.page-cover .frt-c {
    position: relative;
    z-index: 50
}

.page-cover .frt-c .flux {
    position: relative;
    height: 590rem
}

.page-cover .frt-c .sub-ttl {
    color: #FFF;
    font-family: "NexaBold";
    text-transform: uppercase;
    letter-spacing: 3rem;
    font-size: 14rem;
    text-transform: uppercase;
    padding-bottom: 15rem;
    padding-left: 3.5rem
}

@media (max-width: 720px) {
    .page-cover .frt-c .sub-ttl {
        letter-spacing:2rem
    }
}

.page-cover .frt-c .big-ttl {
    color: #fff;
    font-size: 90rem;
    line-height: 90rem
}

.page-cover .frt-c .ttl-part {
    position: absolute;
    left: 0;
    bottom: 100rem
}

.page-cover .frt-c .bt {
    position: absolute;
    right: 0;
    bottom: 100rem
}

.page-cover .frt-c .tmce {
    margin-top: 24rem;
    color: #fff;
    font-size: 18rem;
    line-height: 34rem
}

.page-cover .socials {
    padding-top: 20px
}

.page-cover .socials a {
    display: inline-block;
    margin: 10px;
    width: 30px;
    height: 30px
}

.page-cover .socials a .svg {
    width: 20px;
    height: 20px
}

.page-cover .socials a .svg * {
    fill: #fff;
    transition: .5s
}

.page-cover .socials a:hover .svg * {
    fill: #0fa
}

#tpl-single-page .simple-c {
    padding-top: 80px;
    padding-bottom: 80px
}

.project-list {
    margin-top: -81rem;
    padding-bottom: 73rem;
    position: relative;
    z-index: 50
}

.project-list .flux-list {
    margin: auto;
    position: relative;
    max-width: 1148rem
}

.project-list .flux-list:after {
    content: "";
    clear: both;
    display: block;
    position: relative
}

.project-list .filter-c {
    position: relative
}

.project-list .filter-c .form {
    background: #fff;
    padding: 35px 60px 50px;
    margin: 0 17rem -0px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between
}

@media (max-width: 1020px) {
    .project-list .filter-c .form {
        -ms-flex-direction:column;
        flex-direction: column
    }
}

.project-list .filter-c .form .just-mobile {
    display: none
}

.project-list .filter-c .form .bt {
    margin-top: 12rem
}

.project-list .filter-c .form .cat-selector-field {
    padding-top: 14px
}

.project-list .filter-c .form .cat-selector-field li {
    cursor: pointer;
    position: relative
}

.project-list .filter-c .form .cat-selector-field li sup {
    font-size: 10rem;
    font-family: "Nexa-Book";
    vertical-align: super;
    position: absolute;
    right: -34rem;
    top: -5rem
}

.project-list .filter-c .form .cat-selector-field ul li:first-child {
    padding-left: 0
}

.project-list.filter-list .project-box:first-child {
    margin-top: 0
}

.project-list .ld-picto {
    position: relative;
    display: block;
    margin: 50rem auto;
    height: 5px;
    background: #a4a4a4;
    width: 50px
}

.project-list .ld-picto span {
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    background: #0fa;
    animation: loadPicto 1.5s infinite
}

#tpl-about section:not(.page-cover) {
    padding-top: 90rem;
    padding-bottom: 90rem
}

#tpl-about section:not(.page-cover):nth-child(odd) {
    background: #f0f0f0
}

#tpl-about section:not(.page-cover) .ttl {
    margin-bottom: 40rem
}

#tpl-about section:not(.page-cover) .flux-lite {
    padding: 0 34rem
}

@media (max-width: 720px) {
    #tpl-about section:not(.page-cover) .flux-lite {
        padding:0 0;
        max-width: none;
        width: calc(100% - 30rem)
    }
}

#tpl-about section:not(.page-cover) .tmce p+p {
    margin-top: 10rem
}

#tpl-about section:not(.page-cover) .list-logos {
    display: -ms-flexbox;
    display: flex;
    border-top: 0;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-top: 30rem
}

#tpl-about section:not(.page-cover) .list-logos>a {
    width: 25%;
    position: relative;
    border: 1px solid #CCC;
    -ms-flex-positive: 0;
    flex-grow: 0;
    margin-left: -1px;
    margin-top: -1px;
    border-top: 1px solid #CCC
}

@media (max-width: 720px) {
    #tpl-about section:not(.page-cover) .list-logos>a {
        width:50%
    }
}

#tpl-about section:not(.page-cover) .list-logos>a.no-p {
    pointer-events: none;
    cursor: default
}

#tpl-about section:not(.page-cover) .list-logos>a:after {
    content: '';
    display: block;
    padding-bottom: calc(1 / 1 * 100%);
    pointer-events: none
}

#tpl-about section:not(.page-cover) .list-logos>a>div {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    background: #FFF
}

#tpl-about section:not(.page-cover) .list-logos>a:nth-child(even) {
    border-left: 1px solid #CCC
}

#tpl-about section:not(.page-cover) .list-logos>a img {
    max-width: 70%;
    height: auto;
    max-height: 70%;
    width: auto
}

#tpl-about .contact-part,#tpl-about .jobs-part {
    padding-top: 110rem;
    padding-bottom: 100rem
}

#tpl-about .contact-part .flux-lite,#tpl-about .jobs-part .flux-lite {
    max-width: 900rem
}

#tpl-about .contact-part .ttl-part,#tpl-about .jobs-part .ttl-part {
    padding-bottom: 110rem
}

#tpl-about .contact-part .dbl-list:after,#tpl-about .jobs-part .dbl-list:after {
    content: "";
    clear: both;
    display: block;
    position: relative
}

#tpl-about .contact-part .dbl-list .pt,#tpl-about .jobs-part .dbl-list .pt {
    width: 33.333%;
    float: left;
    padding-left: 34rem
}

#tpl-about .contact-part .dbl-list .pt a,#tpl-about .jobs-part .dbl-list .pt a {
    font-family: "Nexa-Book";
    position: relative;
    display: inline-block
}

#tpl-about .contact-part {
    background: #f0f0f0
}

#tpl-about .jobs-part {
    padding-bottom: 150rem
}

#tpl-about .simple-c {
    padding-top: 90rem;
    padding-bottom: 90rem
}

#tpl-about .simple-c .flux-lite {
    padding: 0 34rem
}

#tpl-about .simple-c .subttl-dash {
    margin-bottom: 40rem
}

#tpl-about .chronologie {
    padding-top: 90rem;
    padding-bottom: 90rem
}

#tpl-about .chronologie .flux {
    max-width: 900rem
}

#tpl-about .chronologie .ttl-part {
    padding-bottom: 160rem
}

#tpl-about .key-dates:after {
    content: "";
    clear: both;
    display: block;
    position: relative
}

#tpl-about .key-date {
    padding: 90px 0 90px;
    position: relative;
    width: 50%;
    float: left;
    padding-left: 45rem
}

#tpl-about .key-date:nth-child(3n-1) .ttl {
    opacity: .5
}

#tpl-about .key-date:nth-child(3n) .ttl {
    opacity: .3
}

#tpl-about .key-date:nth-child(even) {
    padding-right: 0;
    transform: translateY(80rem);
    padding-left: 85rem
}

#tpl-about .key-date:nth-child(even) .ttl {
    left: 40rem
}

#tpl-about .key-date .ttl {
    top: 0;
    left: 0;
    position: absolute;
    font-family: "EngraversGothicBT-Regular";
    text-transform: lowercase;
    letter-spacing: 9rem;
    color: #0fa;
    text-transform: uppercase;
    font-size: 70rem;
    z-index: 5;
    padding-right: 60rem
}

@media (max-width: 1020px) {
    #tpl-about .key-date .ttl {
        letter-spacing:7rem
    }
}

@media (max-width: 720px) {
    #tpl-about .key-date .ttl {
        letter-spacing:5rem
    }
}

#tpl-about .key-date .lite-tmce {
    position: relative;
    z-index: 10
}

#tpl-about .key-date .lite-tmce a {
    border-bottom: 2px solid #0fa
}

@media (max-width: 1020px) {
    #tpl-about .chronologie .flux {
        max-width:calc(100% - 100px)
    }

    #tpl-about .contact-part .flux-lite,#tpl-about .jobs-part .flux-lite {
        max-width: calc(100% - 100px)
    }

    #tpl-about .contact-part .dbl-list .pt,#tpl-about .jobs-part .dbl-list .pt {
        padding-left: 0px;
        min-height: 150px
    }

    #tpl-about .key-date {
        float: none;
        padding-left: 85rem;
        width: 580px;
        margin: auto
    }

    #tpl-about .key-date .ttl {
        max-width: 400px
    }

    #tpl-about .key-date:nth-child(even) {
        transform: none;
        padding-left: 80px
    }

    #tpl-about .key-date:nth-child(even) .ttl {
        left: 0
    }

    .project-list .filter-c .form {
        text-align: center
    }

    .project-list .filter-c .form .cat-selector-field {
        float: none
    }

    .project-list .filter-c .form .bt {
        float: none;
        display: table;
        margin: 50px auto 0
    }
}

@media (max-width: 720px) {
    .page-cover .frt-c .big-ttl {
        font-size:40rem;
        line-height: 45rem
    }

    .page-cover.archive-cover {
        height: auto
    }

    .page-cover.archive-cover .frt-c {
        padding-top: 200rem;
        padding-bottom: 140rem
    }

    .page-cover.archive-cover .frt-c .flux {
        height: auto
    }

    .page-cover.archive-cover .frt-c .big-ttl {
        font-size: 50rem;
        line-height: 55rem
    }

    .page-cover.archive-cover .frt-c .ttl-part {
        position: relative;
        bottom: auto
    }

    #tpl-about .simple-c {
        padding-top: 50rem;
        padding-bottom: 50rem
    }

    #tpl-about .simple-c .flux-lite {
        padding: 0
    }

    #tpl-about .chronologie {
        padding-top: 50rem;
        padding-bottom: 50rem
    }

    #tpl-about .chronologie .ttl-part {
        padding-bottom: 60rem
    }

    #tpl-about .chronologie .flux {
        max-width: calc(100% - 50rem)
    }

    #tpl-about .key-date {
        width: auto;
        padding-left: 40rem;
        padding-top: 70rem;
        padding-bottom: 70rem
    }

    #tpl-about .key-date .ttl {
        font-size: 60rem
    }

    #tpl-about .key-date:nth-child(even) {
        padding-left: 40rem
    }

    #tpl-about .contact-part,#tpl-about .jobs-part {
        padding-top: 60rem;
        padding-bottom: 60rem
    }

    #tpl-about .contact-part .ttl-part,#tpl-about .jobs-part .ttl-part {
        padding-bottom: 50rem
    }

    #tpl-about .contact-part .dbl-list .pt,#tpl-about .jobs-part .dbl-list .pt {
        width: auto;
        display: block;
        float: none;
        min-height: 0
    }

    .project-list {
        padding-bottom: 50rem;
        margin-top: 34px
    }

    .project-list .filter-c .form {
        padding: 0rem 30rem 30rem
    }

    .project-list .filter-c .form .cat-selector-field {
        padding-top: 0;
        text-align: center;
        width: 100%
    }

    .project-list .filter-c .form .just-nomobile {
        display: none
    }

    .project-list .filter-c .form .just-mobile {
        display: block;
        width: 100%
    }

    .project-list .filter-c .form .bt {
        margin-top: 20rem;
        width: 100%;
        border: none
    }
}

#tpl-home section {
    position: relative;
    z-index: 10
}

#hm-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 30
}

#hm-sidebar nav {
    position: absolute;
    top: 50%;
    transform: rotate(-90deg);
    color: #fff;
    text-align: center
}

#hm-sidebar nav ul {
    width: 500px;
    margin-left: -250px;
    position: absolute;
    height: 30px;
    line-height: 30px
}

#hm-sidebar nav li {
    text-transform: uppercase;
    color: #a4a4a4;
    font-size: 11px;
    font-family: "NexaBold";
    display: inline-block;
    vertical-align: middle;
    padding: 0 15px;
    margin: 0 16px;
    position: relative;
    transition-duration: .4s;
    cursor: pointer
}

#hm-sidebar nav li p {
    position: relative;
    z-index: 10
}

#hm-sidebar nav li:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0fa;
    display: block;
    z-index: 1;
    height: 0%;
    transition-duration: .4s
}

#hm-sidebar nav li:first-child:after {
    display: none
}

#hm-sidebar nav li:after {
    content: "";
    display: block;
    position: absolute;
    width: 18px;
    margin: -1px -9px;
    height: 1px;
    background: #d1d1d1;
    top: 50%;
    left: -16px
}

#hm-sidebar nav li.act {
    color: #036;
    opacity: 1
}

#hm-sidebar nav li.act:before {
    height: 100%
}

#reel-sect {
    height: 100vh;
    background: #036
}

#reel-sect .media-c {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: .6
}

#reel-sect .crop-img {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

#reel-sect .video-c {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 12
}

#reel-sect .video-c video {
    opacity: 0
}

#reel-sect .slideshow-c {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 1
}

#reel-sect .slideshow-c .slides-c,#reel-sect .slideshow-c .sl,#reel-sect .slideshow-c .img-c {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

#reel-sect .slideshow-c .sl.no-link {
    cursor: default
}

#reel-sect .slideshow-c .img-c {
    opacity: 0.75
}

#reel-sect .slideshow-c .ct {
    position: absolute;
    padding: 0px 50px 50px 0px;
    right: 0px;
    bottom: 0px;
    max-width: 60%;
    z-index: 10
}

#reel-sect .slideshow-c .ct p {
    font-family: "EngraversGothicBT-Regular";
    text-transform: lowercase;
    letter-spacing: 9rem;
    color: #FFF;
    font-size: 60rem;
    line-height: 60rem;
    text-align: right
}

@media (max-width: 1020px) {
    #reel-sect .slideshow-c .ct p {
        letter-spacing:7rem
    }
}

@media (max-width: 720px) {
    #reel-sect .slideshow-c .ct p {
        letter-spacing:5rem
    }
}

#reel-sect .slideshow-c .ct img {
    display: block;
    float: right;
    opacity: 0.75;
    margin-top: 10rem;
    max-height: 80px;
    filter: grayscale(100%)
}

#news-sect {
    padding-top: 100rem;
    padding-bottom: 50rem;
    background: #FFF
}

#news-sect .ttl-part {
    padding-bottom: 85rem
}

#news-sect .box-list {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

#news-sect .simple-bt {
    display: table;
    margin: 60px auto 0
}

#news-sect .flux {
    max-width: 1112px
}

.fb-box {
    background: #fff;
    padding: 26px 30px 30px;
    margin: 0 0 34rem;
    width: calc(50% - 17rem);
    float: left
}

.fb-box:nth-child(odd) {
    margin-right: 34rem
}

.fb-box .top-pt {
    font-family: "Nexa-Book";
    text-transform: uppercase;
    font-size: 12px;
    line-height: 30px
}

.fb-box .top-pt .fb-lk,.fb-box .top-pt .date {
    color: #000;
    display: inline;
    vertical-align: middle
}

.fb-box .top-pt .fb-lk {
    font-family: "NexaBold";
    text-transform: uppercase;
    letter-spacing: 3rem
}

@media (max-width: 720px) {
    .fb-box .top-pt .fb-lk {
        letter-spacing:2rem
    }
}

.fb-box .top-pt .fb-lk .svg {
    width: 30px;
    height: 30px;
    display: inline;
    vertical-align: middle
}

.fb-box .top-pt .fb-lk .svg path {
    fill: #3b5998
}

.fb-box .top-pt .date {
    float: right
}

.fb-box .ct-pt {
    padding-top: 50px
}

.fb-box .ct-pt .tmce {
    font-size: 13rem;
    line-height: 24rem
}

.fb-box .ct-pt .img-c {
    margin-top: 35rem;
    height: 275rem
}

.fb-box .ct-pt .media-c {
    position: relative;
    margin-top: 35rem;
    cursor: pointer
}

.fb-box .ct-pt .media-c .img-c {
    position: absolute;
    margin-top: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 30;
    display: none
}

.fb-box .ct-pt .media-c .img-c:hover:after,.fb-box .ct-pt .media-c .img-c:hover:before {
    opacity: 1;
    transform: none
}

.fb-box .ct-pt .media-c .img-c:after,.fb-box .ct-pt .media-c .img-c:before {
    opacity: 0;
    position: absolute;
    content: "";
    display: block;
    transition: .5s
}

.fb-box .ct-pt .media-c .img-c:after {
    background: rgba(0,0,0,0.3);
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 8
}

.fb-box .ct-pt .media-c .img-c:before {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 28px 0 28px 48px;
    border-color: transparent transparent transparent #fff;
    z-index: 10;
    left: 50%;
    top: 50%;
    margin: -19px -22px;
    transform: scale(0.8)
}

.fb-box .ct-pt .media-c .img-c img {
    z-index: 6
}

.fb-box .ct-pt .media-c .video-c {
    position: relative;
    z-index: 10;
    width: 100%
}

.fb-box .ct-pt .media-c .video-c video::-internal-media-controls-download-button {
    display: none
}

.fb-box .ct-pt .media-c .video-c video::-webkit-media-controls-enclosure {
    overflow: hidden
}

.fb-box .ct-pt .media-c .video-c video::-webkit-media-controls-panel {
    width: calc(100% + 30px)
}

.fb-box .ct-pt .media-c .video-c video,.fb-box .ct-pt .media-c .video-c iframe {
    width: 100%;
    height: 350px
}

#about-sect {
    padding-top: 100rem;
    padding-bottom: 120rem
}

#about-sect .ttl-part {
    padding-bottom: 120rem
}

#about-sect .subttl-dash {
    margin-bottom: 60rem
}

#about-sect .tmce p {
    font-size: 18rem;
    line-height: 36rem
}

#about-sect .bt {
    margin-top: 60px;
    display: table
}

#real-sect {
    background: #f0f0f0;
    padding-bottom: 10rem
}

#real-sect .flux {
    max-width: calc(100% - 160rem)
}

.projects-slsh {
    padding-top: 45px;
    position: relative
}

.projects-slsh .arw-bt {
    position: absolute;
    top: 50%;
    z-index: 30;
    margin-top: 3px
}

.projects-slsh .arw-bt span {
    border-color: #fff
}

.projects-slsh .arw-bt.prev-bt {
    left: calc(50% - 473rem)
}

.projects-slsh .arw-bt.next-bt {
    right: calc(50% - 473rem)
}

.projects-slsh .slsh-c {
    position: relative;
    height: 600rem;
    background: #036;
    margin-top: 50rem
}

.projects-slsh .slide {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%
}

.projects-slsh .slide .subttl-dash {
    text-align: center;
    padding-bottom: 40rem;
    position: absolute;
    top: -50rem;
    left: 0;
    right: 0
}

.projects-slsh .slide .subttl-dash:before {
    display: none
}

.projects-slsh .slide .big-project-box .frt-c .ttl-part .title {
    width: 100%;
    margin-left: -50%
}

@media (max-width: 1180px) {
    .projects-slsh .arw-bt.prev-bt {
        left:calc(50% - 380rem)
    }

    .projects-slsh .arw-bt.next-bt {
        right: calc(50% - 380rem)
    }

    #news-sect .flux {
        max-width: calc(100% - 130px)
    }

    #about-sect .subttl-dash:before {
        display: none
    }
}

@media (max-width: 1020px) {
    #reel-sect .slideshow-c .ct {
        max-width:80%
    }

    #reel-sect .slideshow-c .ct p {
        font-size: 50rem;
        line-height: 50rem
    }

    .projects-slsh .arw-bt.prev-bt {
        left: calc(50% - 260rem)
    }

    .projects-slsh .arw-bt.next-bt {
        right: calc(50% - 260rem)
    }

    .fb-box {
        float: none;
        width: 100%
    }

    .fb-box:nth-child(odd) {
        margin-right: 0
    }
}

@media (max-width: 720px) {
    #hm-sidebar {
        display:none
    }

    #reel-sect {
        height: 75vh
    }

    #reel-sect .slideshow-c .ct {
        max-width: 100%;
        padding: 0 20px 40px 20px;
        height: 150px
    }

    #reel-sect .slideshow-c .ct p {
        font-size: 35rem;
        line-height: 35rem
    }

    #real-sect .flux {
        max-width: 100%;
        width: 100%
    }

    .projects-slsh {
        padding-top: 36rem
    }

    .projects-slsh .slsh-c {
        height: 520rem
    }

    .projects-slsh .arw-bt {
        top: auto;
        bottom: 13px
    }

    .projects-slsh .arw-bt span {
        border-color: rgba(0,0,0,0.4)
    }

    .projects-slsh .arw-bt.prev-bt {
        left: 30rem
    }

    .projects-slsh .arw-bt.next-bt {
        right: 30rem
    }

    .slsh-nav li {
        margin-right: 0px
    }

    #news-sect {
        padding-top: 60rem
    }

    #news-sect .ttl-part {
        padding-bottom: 50rem
    }

    #news-sect .flux {
        max-width: calc(100% - 50rem)
    }

    .fb-box .top-pt {
        font-size: 11rem
    }

    .fb-box .ct-pt {
        padding-top: 20px
    }

    .fb-box .ct-pt .media-c .img-c:before {
        border-width: 14px 0 14px 24px;
        margin: -14px -12px
    }

    #about-sect {
        padding-top: 60rem;
        padding-bottom: 60rem
    }

    #about-sect .ttl-part {
        padding-bottom: 50rem
    }

    #about-sect .subttl-dash {
        margin-bottom: 40rem
    }
}

#tpl-project.brand .keys-box {
    margin-bottom: 120rem
}

#tpl-project .cover {
    position: relative
}

#tpl-project .cover .media-c {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20
}

#tpl-project .cover .media-c:before {
    content: "";
    background: #000;
    z-index: 20;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    opacity: .6
}

#tpl-project .cover .media-c .img-c {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: relative
}

#tpl-project .cover .media-c .video-c {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5
}

#tpl-project .cover .media-c .video-c video {
    opacity: 0
}

#tpl-project .cover .frt-c {
    position: relative;
    z-index: 50
}

#tpl-project .cover .frt-c .flux {
    position: relative
}

#tpl-project .cover .frt-c .flux:after {
    content: '';
    display: block;
    padding-bottom: calc(1 / 1.67 * 100%);
    pointer-events: none
}

#tpl-project .cover .frt-c .sub-ttl {
    color: #FFF;
    font-family: "NexaBold";
    font-size: 14rem;
    text-transform: uppercase;
    padding-bottom: 10rem;
    padding-left: 3.5rem;
    font-family: "NexaBold";
    text-transform: uppercase;
    letter-spacing: 3rem
}

@media (max-width: 720px) {
    #tpl-project .cover .frt-c .sub-ttl {
        letter-spacing:2rem
    }
}

#tpl-project .cover .frt-c .ttl-part {
    position: absolute;
    left: 0;
    bottom: 100rem;
    max-width: 700rem
}

#tpl-project .cover .frt-c .ttl-part .big-ttl {
    font-size: 85rem
}

#tpl-project .cover .frt-c .bt {
    position: absolute;
    right: 0;
    bottom: 100rem
}

#tpl-project .cover .iframe-c {
    display: none
}

#tpl-project .introduction .flux {
    padding-top: 90rem;
    padding-bottom: 90rem
}

#tpl-project .introduction .flux:after {
    content: "";
    clear: both;
    display: block;
    position: relative
}

#tpl-project .introduction .lf-pt,#tpl-project .introduction .rg-pt {
    float: left;
    width: 50%
}

#tpl-project .introduction .lf-pt {
    padding-left: 110px
}

#tpl-project .introduction .lf-pt .tmce {
    max-width: 240rem
}

#tpl-project .introduction .lf-pt .tmce li img {
    display: inline;
    margin: auto;
    max-width: 200px;
    max-height: 40px;
    width: auto;
    height: auto
}

#tpl-project .introduction .subttl-dash {
    margin-bottom: 50px
}

#tpl-project .socials {
    padding-top: 20px
}

#tpl-project .socials a {
    display: inline-block;
    margin: 10px;
    width: 30px;
    height: 30px
}

#tpl-project .socials a .svg {
    width: 20px;
    height: 20px
}

#tpl-project .socials a .svg * {
    fill: #000
}

#tpl-project .socials a:hover .svg * {
    fill: #0fa
}

#tpl-project .main-content {
    padding-top: 110rem;
    padding-bottom: 90rem;
    background: #f0f0f0
}

#tpl-project .main-content .ttl-part {
    padding-bottom: 70rem
}

#tpl-project .main-content .simple-slsh {
    margin-bottom: 70rem
}

#tpl-project .main-content .credits {
    margin-top: 70rem;
    border-top: 1px solid #e7e7e7;
    padding-top: 50rem
}

#tpl-project .main-content .credits .subttl-dash {
    margin-bottom: 40rem
}

#tpl-project .main-content .credits .subttl-dash:before {
    display: none
}

#tpl-project .main-content .credits .tmce {
    column-count: 2;
    column-gap: 40rem;
    break-inside: avoid
}

#tpl-project .main-content .credits .tmce li {
    margin: 0;
    break-inside: avoid-column;
    display: table
}

#tpl-project .galerie {
    margin-top: 30px
}

#tpl-project .galerie:after {
    content: "";
    clear: both;
    display: block;
    position: relative
}

#tpl-project .galerie .video-box {
    width: calc(50% - 17rem);
    float: left;
    margin-top: 50rem
}

#tpl-project .galerie .video-box .iframe-c {
    display: none;
    opacity: 0
}

#tpl-project .galerie .video-box:nth-child(odd) {
    margin-right: 34rem
}

#tpl-project .galerie .video-box .img-c {
    position: relative;
    height: 212rem;
    margin-bottom: 20rem
}

#tpl-project .galerie .video-box .img-c .hov {
    background: rgba(0,0,0,0.6);
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 10
}

#tpl-project .galerie .video-box .img-c .hov i {
    display: block;
    width: 96px;
    height: 96px;
    border: 2px solid #fff;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -48px
}

#tpl-project .galerie .video-box .img-c .hov i:after {
    content: "";
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 12.5px 0 12.5px 20px;
    border-color: transparent transparent transparent #0fa;
    left: 50%;
    top: 50%;
    margin: -12px -7px
}

#tpl-project .galerie .video-box .intro-ttl {
    margin-bottom: 0;
    line-height: 30rem
}

#tpl-project .galerie .video-box .tmce {
    line-height: 20rem
}

#tpl-project .more-content {
    padding-top: 110rem;
    padding-bottom: 60rem
}

#tpl-project .more-content .ttl-part {
    padding-bottom: 120rem
}

#tpl-project .dbl-box {
    margin-bottom: 120rem
}

#tpl-project .dbl-box:after {
    content: "";
    clear: both;
    display: block;
    position: relative
}

#tpl-project .dbl-box .lf-pt,#tpl-project .dbl-box .rg-pt {
    float: left;
    width: 50%
}

#tpl-project .dbl-box .lf-pt .img-c {
    height: 416rem
}

#tpl-project .dbl-box .rg-pt {
    padding-left: 68rem
}

#tpl-project .dbl-box .rg-pt .box-ttl {
    margin-bottom: 25rem
}

#tpl-project .keys-box {
    margin-bottom: 60rem
}

#tpl-project .keys-box .flux {
    padding-top: 80px;
    padding-bottom: 60px;
    padding-left: 60px;
    padding-right: 60px;
    border: 1px solid #e7e7e7;
    text-align: center;
    display: table;
    margin: auto;
    min-width: 846rem
}

#tpl-project .keys-box .key {
    display: inline-block;
    vertical-align: top;
    margin: 0 70rem 50rem;
    max-width: 200rem;
    min-width: 150rem
}

#tpl-project .keys-box .key .number {
    font-family: "NexaBold";
    font-size: 80rem;
    color: #036;
    position: relative
}

#tpl-project .keys-box .key .number sup {
    position: absolute;
    font-size: 28rem;
    vertical-align: top
}

#tpl-project .keys-box .key .title {
    font-size: 24rem;
    color: #036;
    font-family: "EngraversGothicBT-Regular";
    text-transform: lowercase;
    letter-spacing: 9rem;
    letter-spacing: 6rem
}

@media (max-width: 1020px) {
    #tpl-project .keys-box .key .title {
        letter-spacing:7rem
    }
}

@media (max-width: 720px) {
    #tpl-project .keys-box .key .title {
        letter-spacing:5rem
    }
}

#tpl-project .keys-box .key .subtitle {
    font-size: 14rem;
    line-height: 20rem;
    color: #212121;
    font-family: "Nexa-Book";
    padding-top: 10rem
}

#tpl-project .brand-push {
    position: relative;
    margin-top: -60rem
}

#tpl-project .brand-push .flux {
    position: relative;
    overflow: hidden
}

#tpl-project .brand-push .bg {
    z-index: 10;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    background: #212121
}

#tpl-project .brand-push .bg .img-c {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: .1
}

#tpl-project .brand-push .bg p {
    position: absolute;
    font-size: 250rem;
    line-height: 260rem;
    opacity: .08;
    left: -80rem;
    color: #fff;
    z-index: 5;
    top: 0;
    font-family: "NexaBold"
}

#tpl-project .brand-push .frt-c {
    position: relative;
    z-index: 20;
    padding: 110px 0px
}

#tpl-project .brand-push .frt-c:after {
    content: "";
    clear: both;
    display: block;
    position: relative
}

#tpl-project .brand-push .frt-c .lf-pt {
    float: left
}

#tpl-project .brand-push .frt-c .lf-pt p {
    color: #a4a4a4;
    text-transform: uppercase;
    font-family: "NexaBold";
    font-size: 14rem;
    position: relative
}

#tpl-project .brand-push .frt-c .lf-pt p:after {
    content: "";
    right: 0;
    top: 5rem;
    display: block;
    position: absolute;
    margin-left: 50rem;
    width: calc(100% - 110rem);
    height: 1px;
    background: #e7e7e7
}

#tpl-project .brand-push .frt-c .lf-pt h4 {
    color: #0fa;
    text-transform: uppercase;
    font-size: 24rem;
    font-family: "NexaBold";
    padding-top: 18rem
}

#tpl-project .brand-push .frt-c .rg-pt {
    float: right
}

#tpl-project .brand-push .frt-c .rg-pt .bt {
    display: inline-block
}

#tpl-project .brand-push .frt-c .rg-pt .bt p {
    color: #fff
}

#tpl-project .next-project {
    padding-top: 32rem;
    position: relative
}

#tpl-project .next-project .subttl-dash {
    text-align: center;
    padding-bottom: 30rem
}

#tpl-project .next-project .subttl-dash:before {
    display: none
}

@media (max-width: 1180px) {
    #tpl-project .cover .frt-c .ttl-part {
        max-width:620rem
    }

    #tpl-project .cover .frt-c .ttl-part .big-ttl {
        font-size: 75rem;
        line-height: 80rem
    }

    #tpl-project .keys-box .key {
        margin: 0 40rem 40rem;
        max-width: 150rem
    }

    #tpl-project .keys-box .key .number {
        font-size: 80rem;
        white-space: nowrap
    }

    #tpl-project .keys-box .key .number sup {
        font-size: 25rem
    }

    #tpl-project .keys-box .key .title {
        font-size: 20rem;
        color: #0fa;
        font-family: "NexaBold"
    }

    #tpl-project .keys-box .key .subtitle {
        font-size: 14rem
    }
}

@media (max-width: 1020px) {
    #tpl-project .cover .frt-c {
        padding-top:300rem
    }

    #tpl-project .cover .frt-c .flux {
        height: auto;
        padding-bottom: 50rem
    }

    #tpl-project .cover .frt-c .ttl-part {
        height: auto;
        position: relative;
        bottom: auto
    }

    #tpl-project .cover .frt-c .ttl-part .big-ttl {
        font-size: 40rem;
        line-height: 45rem
    }

    #tpl-project .cover .frt-c .bt {
        position: relative;
        bottom: auto;
        right: auto;
        display: table;
        margin-top: 50rem
    }

    #tpl-project .introduction .lf-pt {
        padding-left: 30px;
        width: 50%
    }

    #tpl-project .introduction .rg-pt {
        width: 50%;
        padding-left: 30px
    }

    #tpl-project .main-content .credits .tmce {
        column-count: 1
    }

    #tpl-project .dbl-box {
        margin-bottom: 60rem
    }

    #tpl-project .dbl-box .lf-pt .img-c {
        height: 300rem
    }

    #tpl-project .dbl-box .rg-pt {
        padding-left: 50rem
    }

    #tpl-project .keys-box {
        margin-bottom: 60rem
    }

    #tpl-project .keys-box .flux {
        min-width: 0;
        padding: 60px 30px;
        width: 100%
    }

    #tpl-project .keys-box .flux .key {
        min-width: 0;
        margin: 0 40rem
    }

    #tpl-project .keys-box .flux .key .number {
        font-size: 60px
    }

    #tpl-project .brand-push .frt-c {
        padding: 50px 0
    }

    #tpl-project .brand-push .frt-c .lf-pt {
        float: none
    }

    #tpl-project .brand-push .frt-c .lf-pt h4 {
        line-height: 40rem
    }

    #tpl-project .brand-push .frt-c .rg-pt {
        display: table;
        margin: 50px auto 0;
        float: none
    }
}

@media (max-width: 720px) {
    #tpl-project.brand .keys-box {
        margin-bottom:60rem
    }

    #tpl-project .introduction .flux {
        padding-top: 50rem;
        padding-bottom: 0
    }

    #tpl-project .introduction .lf-pt,#tpl-project .introduction .rg-pt {
        width: auto;
        float: none;
        padding-left: 0;
        padding-bottom: 50rem
    }

    #tpl-project .introduction .subttl-dash {
        margin-bottom: 20rem
    }

    #tpl-project .main-content {
        padding-top: 60rem
    }

    #tpl-project .main-content .ttl-part {
        padding-bottom: 50rem
    }

    #tpl-project .main-content .flux-lite {
        max-width: calc(100% - 30rem)
    }

    #tpl-project .brand-push .flux {
        max-width: calc(100% - 30rem)
    }

    #tpl-project .brand-push .flux-lite {
        max-width: 100%
    }

    #tpl-project .more-content {
        padding-top: 60rem
    }

    #tpl-project .more-content .ttl-part {
        padding-bottom: 50rem
    }

    #tpl-project .keys-box .flux {
        max-width: calc(100% - 50rem)
    }

    #tpl-project .keys-box .flux .key {
        display: block;
        max-width: 100%;
        text-align: center;
        margin-bottom: 35rem
    }

    #tpl-project .keys-box .flux .key:last-child {
        margin-bottom: 0rem
    }

    #tpl-project .keys-box .flux .key .number {
        font-size: 40rem
    }

    #tpl-project .dbl-box .lf-pt,#tpl-project .dbl-box .rg-pt {
        padding: 0;
        width: auto;
        display: block;
        float: none
    }

    #tpl-project .dbl-box .lf-pt .img-c,#tpl-project .dbl-box .rg-pt .img-c {
        height: 270rem
    }

    #tpl-project .dbl-box .rg-pt {
        padding-top: 20rem
    }

    #tpl-project .galerie {
        margin-top: 0
    }

    #tpl-project .galerie .video-box {
        width: auto;
        float: none;
        margin-right: 0 !important
    }
}

.simple-slsh {
    position: relative;
    margin-bottom: 150px
}

.simple-slsh .slsh-c {
    overflow: hidden
}

.simple-slsh .prev-bt,.simple-slsh .next-bt {
    position: absolute;
    top: calc(50% - 34px)
}

.simple-slsh .prev-bt {
    left: -50px
}

.simple-slsh .next-bt {
    right: -50px
}

.simple-slsh .slsh-nav {
    position: relative
}

.simple-slsh .mask {
    position: absolute;
    z-index: 20;
    background: #000;
    top: 0;
    bottom: 0
}

.simple-slsh .mask.lf {
    left: 0;
    right: 'auto'
}

.simple-slsh .mask.rg {
    right: 0;
    left: 'auto'
}

.simple-slsh .slsh-c,.simple-slsh .slsh {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    height: 450rem
}

.simple-slsh .slsh-c .slide,.simple-slsh .slsh .slide {
    position: absolute;
    top: 0;
    left: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.simple-slsh .slsh-c .slide .img-c,.simple-slsh .slsh .slide .img-c {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.slsh-nav {
    position: relative;
    display: table;
    margin: 40rem auto 45rem;
    line-height: 25px
}

.slsh-nav li {
    display: inline-block;
    vertical-align: middle;
    width: 34px;
    margin-right: 20px;
    cursor: pointer
}

.slsh-nav li:last-child {
    margin-right: 0
}

.slsh-nav li.act span {
    background: #000
}

.slsh-nav li.act span:before,.slsh-nav li.act span:after {
    transform: scaleX(1)
}

.slsh-nav li span {
    width: 2px;
    background: rgba(0,0,0,0.16);
    height: 25px;
    display: block;
    margin: auto;
    position: relative;
    transition-duration: .5s
}

.slsh-nav li span:after,.slsh-nav li span:before {
    content: "";
    position: absolute;
    width: 16px;
    height: 12px;
    background: #0fa;
    display: block;
    top: 50%;
    margin: -6px 0;
    transition-duration: .5s;
    transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    transform: scaleX(0)
}

.slsh-nav li span:before {
    left: -16px;
    transform-origin: 100% 50%
}

.slsh-nav li span:after {
    right: -16px;
    transform-origin: 0 50%
}

@media (max-width: 1020px) {
    .simple-slsh .prev-bt {
        left:-20px
    }

    .simple-slsh .next-bt {
        right: -20px
    }
}

@media (max-width: 720px) {
    .simple-slsh .slsh,.simple-slsh .slsh-c {
        height:300rem
    }

    .simple-slsh .prev-bt,.simple-slsh .next-bt {
        top: auto;
        bottom: 12px
    }

    .simple-slsh .prev-bt {
        left: 14px
    }

    .simple-slsh .next-bt {
        right: 14px
    }

    .slsh-nav li {
        width: 18px;
        margin-right: 5px
    }

    .slsh-nav li span {
        height: 15px
    }
}

.big-project-box {
    position: relative;
    padding: 80rem;
    overflow: hidden
}

.big-project-box .media-c {
    position: absolute;
    z-index: 5;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #036
}

.big-project-box .media-c .bg {
    opacity: .2;
    z-index: 10;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: relative
}

.big-project-box .media-c .bg .img-c {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 10
}

.big-project-box .media-c .bg .video-c {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 15
}

.big-project-box .media-c .bg .video-c video {
    opacity: 0
}

.big-project-box .media-c .project-ttl {
    position: absolute;
    z-index: 20;
    font-size: 334rem;
    width: 600vw;
    margin-left: -300vw;
    left: 50%;
    text-align: center;
    color: #0fa;
    font-family: "NexaBold";
    text-transform: uppercase;
    letter-spacing: 3rem;
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
    top: 50%;
    margin-top: -167rem;
    opacity: .4
}

@media (max-width: 720px) {
    .big-project-box .media-c .project-ttl {
        letter-spacing:2rem
    }
}

.big-project-box .frt-c {
    position: relative;
    z-index: 50;
    width: 846rem;
    margin: auto;
    height: 440rem;
    line-height: 430rem
}

.big-project-box .frt-c:hover .media-c {
    transform: scale(0.94)
}

.big-project-box .frt-c:hover .media-c img,.big-project-box .frt-c:hover .media-c video {
    transform: scale(1.06)
}

.big-project-box .frt-c:hover .ttl-part .title {
    transform: scale(1);
    transition-duration: .8s
}

.big-project-box .frt-c:hover .info-pt p {
    transform: translateY(-10px)
}

.big-project-box .frt-c .crop-img video {
    transition: transform .75s
}

.big-project-box .frt-c .media-c {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 20;
    box-shadow: 0 0 60px 10px rgba(0,0,0,0.5);
    background: none;
    transition: .75s;
    background: #036
}

.big-project-box .frt-c .media-c .video-c {
    position: absolute;
    z-index: 15;
    left: -2px;
    right: -2px;
    top: -2px;
    bottom: -2px
}

.big-project-box .frt-c .media-c .video-c video {
    opacity: 0
}

.big-project-box .frt-c .img-c {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 10;
    opacity: .65
}

.big-project-box .frt-c .img-c img {
    transition: transform .75s, opacity .5s
}

.big-project-box .frt-c .ttl-part {
    transition: .75s;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    padding: 0 20rem;
    color: #fff;
    z-index: 20;
    position: relative;
    height: 270rem;
    line-height: 270rem
}

.big-project-box .frt-c .ttl-part .title {
    height: 270rem;
    line-height: 270rem;
    transition: .75s;
    transform: scale(0.94);
    color: #fff;
    position: absolute;
    font-family: "EngraversGothicBT-Regular";
    text-transform: lowercase;
    letter-spacing: 9rem;
    font-size: 90rem;
    top: 0;
    width: 90vw;
    margin-left: -45vw
}

@media (max-width: 1020px) {
    .big-project-box .frt-c .ttl-part .title {
        letter-spacing:7rem
    }
}

@media (max-width: 720px) {
    .big-project-box .frt-c .ttl-part .title {
        letter-spacing:5rem
    }
}

.big-project-box .frt-c .ttl-part .title h3 {
    display: inline-block;
    width: 100%;
    vertical-align: middle;
    line-height: 70rem
}

.big-project-box .frt-c .info-pt {
    line-height: 1;
    position: absolute;
    z-index: 20;
    bottom: 60rem;
    text-align: center;
    left: 0;
    right: 0;
    color: #fff
}

.big-project-box .frt-c .info-pt p {
    transition: .5s;
    font-family: "NexaBold";
    text-transform: uppercase;
    letter-spacing: 3rem;
    letter-spacing: 1rem;
    font-size: 12rem
}

@media (max-width: 720px) {
    .big-project-box .frt-c .info-pt p {
        letter-spacing:2rem
    }
}

.big-project-box .frt-c .info-pt p span {
    display: inline-block;
    vertical-align: middle
}

.big-project-box .frt-c .info-pt img {
    display: inline;
    vertical-align: middle;
    margin-left: 10px;
    max-width: 200px;
    max-height: 40px;
    width: auto;
    height: auto
}

.project-box {
    width: 540rem;
    height: 305rem;
    position: relative;
    float: left;
    margin: 17rem;
    cursor: pointer;
    overflow: hidden
}

.project-box.hidden {
    display: none
}

.project-box.hv .frt-c .ttl-part {
    opacity: 0;
    transform: translateY(40px);
    transition-duration: .5s
}

.project-box.hv .frt-c .info-pt {
    opacity: 0;
    transition-duration: .5s
}

.project-box.hv .frt-c .info-pt p:before {
    transform: scaleX(0);
    transition-duration: .7s
}

.project-box.hv .media-c:before {
    opacity: 0;
    transition-duration: .5s
}

.project-box.hv:hover .media-c:before {
    opacity: .4
}

.project-box.hv:hover .media-c .video-c {
    opacity: 1
}

.project-box.hv:hover .frt-c .ttl-part {
    opacity: 1;
    transform: none
}

.project-box.hv:hover .frt-c .info-pt {
    opacity: 1;
    transform: none;
    transition-delay: .2s
}

.project-box.hv:hover .frt-c .info-pt p:before {
    transition-delay: .2s;
    transform: scaleX(1)
}

.project-box.hv.novideo:hover .media-c:before {
    opacity: .4
}

.project-box.hv.novideo:hover .media-c .img-c {
    opacity: 1
}

.project-box .media-c {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    background: #f5f5f5
}

.project-box .media-c:before {
    content: "";
    background: #036;
    z-index: 20;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    opacity: .4
}

.project-box .media-c .img-c {
    transition-duration: .5s;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 10
}

.project-box .media-c .video-c {
    position: absolute;
    z-index: 15;
    left: -2px;
    right: -2px;
    top: -2px;
    bottom: -2px;
    opacity: 0;
    transition-duration: .5s
}

.project-box .media-c .video-c video {
    width: 100%;
    height: 100%
}

.project-box .frt-c {
    position: absolute;
    z-index: 50;
    left: 50rem;
    bottom: 50rem;
    padding-right: 50rem
}

.project-box .frt-c .ttl-part .title {
    font-family: "EngraversGothicBT-Regular";
    text-transform: lowercase;
    letter-spacing: 9rem;
    letter-spacing: 9rem;
    opacity: 1;
    font-size: 30rem
}

@media (max-width: 1020px) {
    .project-box .frt-c .ttl-part .title {
        letter-spacing:7rem
    }
}

@media (max-width: 720px) {
    .project-box .frt-c .ttl-part .title {
        letter-spacing:5rem
    }
}

.project-box .frt-c .ttl-part .title a {
    color: #fff
}

.project-box .frt-c .info-pt {
    padding-top: 25rem
}

.project-box .frt-c .info-pt p {
    text-transform: uppercase;
    color: #fff;
    font-family: "NexaBold";
    font-size: 11rem
}

.project-box .frt-c .info-pt p:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 1px;
    width: 50rem;
    background: #e7e7e7;
    margin-right: 34rem;
    transform-origin: 0 0
}

.project-box .frt-c .info-pt p img {
    vertical-align: middle;
    display: inline;
    margin-left: 30rem;
    max-height: 40px
}

.project-box:nth-child(8n-8),.project-box:nth-child(8n+3) {
    margin-bottom: 34rem
}

.project-box:nth-child(8n-7),.project-box:nth-child(8n+4) {
    float: none;
    clear: both;
    width: auto;
    height: 625rem;
    margin: 34rem 17rem 17rem
}

.project-box:nth-child(8n-7) .media-c:before,.project-box:nth-child(8n+4) .media-c:before {
    opacity: .4
}

.project-box:nth-child(8n-7) .frt-c,.project-box:nth-child(8n+4) .frt-c {
    left: 106rem;
    bottom: 50rem;
    max-width: 900rem
}

.project-box:nth-child(8n-7) .frt-c .ttl-part,.project-box:nth-child(8n+4) .frt-c .ttl-part {
    opacity: 1;
    transform: none
}

.project-box:nth-child(8n-7) .frt-c .ttl-part .title,.project-box:nth-child(8n+4) .frt-c .ttl-part .title {
    font-size: 70rem;
    letter-spacing: 17rem
}

.project-box:nth-child(8n-7) .frt-c .info-pt,.project-box:nth-child(8n+4) .frt-c .info-pt {
    padding-top: 45rem;
    margin-left: 30rem;
    opacity: 1;
    transform: none
}

.project-box:nth-child(8n-7) .frt-c .info-pt p,.project-box:nth-child(8n+4) .frt-c .info-pt p {
    font-size: 14rem
}

.project-box:nth-child(8n-7) .frt-c .info-pt p:before,.project-box:nth-child(8n+4) .frt-c .info-pt p:before {
    width: 110rem;
    transform: none
}

@media (max-width: 1180px) {
    .big-project-box .frt-c {
        width:700rem
    }

    .big-project-box .frt-c .ttl-part .title {
        font-size: 70rem
    }

    .project-box {
        width: calc(50% - 34rem)
    }
}

@media (max-width: 1020px) {
    .big-project-box .frt-c {
        width:440rem
    }

    .big-project-box .frt-c .ttl-part .title {
        font-size: 50rem
    }
}

@media (max-width: 720px) {
    .big-project-box {
        padding:40rem 20rem
    }

    .big-project-box .frt-c {
        width: 100%
    }

    .big-project-box .frt-c .ttl-part .title {
        font-size: 40rem
    }

    .project-box {
        width: auto;
        float: none;
        display: block;
        margin-bottom: 34rem
    }

    .project-box .frt-c {
        width: 100%;
        left: 0 !important;
        padding: 0 25px
    }

    .project-box .frt-c .title {
        letter-spacing: 5rem !important
    }

    .project-box .frt-c .info-pt p:before {
        width: 0rem;
        margin-right: 0rem
    }

    .project-box .frt-c .info-pt p img {
        max-height: 25px
    }

    .project-box:nth-child(8n-8),.project-box:nth-child(8n+3) {
        margin: 17rem;
        margin-bottom: 34rem
    }

    .project-box:nth-child(8n-7),.project-box:nth-child(8n+4) {
        margin: 17rem;
        height: 305rem;
        margin-bottom: 34rem
    }

    .project-box:nth-child(8n-7) .frt-c,.project-box:nth-child(8n+4) .frt-c {
        left: 50rem;
        bottom: 50rem;
        padding-right: 50rem
    }

    .project-box:nth-child(8n-7) .frt-c .ttl-part .title,.project-box:nth-child(8n+4) .frt-c .ttl-part .title {
        font-size: 30rem
    }

    .project-box:nth-child(8n-7) .frt-c .info-pt,.project-box:nth-child(8n+4) .frt-c .info-pt {
        padding-top: 25rem;
        margin-left: 0
    }

    .project-box:nth-child(8n-7) .frt-c .info-pt p,.project-box:nth-child(8n+4) .frt-c .info-pt p {
        font-size: 11rem
    }

    .project-box:nth-child(8n-7) .frt-c .info-pt p:before,.project-box:nth-child(8n+4) .frt-c .info-pt p:before {
        width: 0rem;
        margin-right: 0rem
    }

    .project-box:nth-child(8n-7) .frt-c .info-pt p img,.project-box:nth-child(8n+4) .frt-c .info-pt p img {
        max-height: 25px
    }
}

#tpl-contact .form {
    padding-top: 50rem;
    padding-bottom: 110rem;
    position: relative
}

#tpl-contact .flux,#tpl-contact .flux-lite {
    position: relative;
    z-index: 50
}

#tpl-contact .flux:after,#tpl-contact .flux-lite:after {
    content: "";
    clear: both;
    display: block;
    position: relative
}

#tpl-contact .big-cat {
    font-size: 334px;
    font-family: "NexaBold";
    color: #0fa;
    position: absolute;
    z-index: 1;
    top: 130px;
    left: -120px;
    opacity: .15;
    display: none
}

#tpl-contact .flux {
    padding-bottom: 170rem
}

#tpl-contact .subttl-dash {
    margin-bottom: 40rem
}

#tpl-contact .radio-field {
    padding-bottom: 90rem
}

#tpl-contact .full-bt {
    display: table;
    float: right
}

#tpl-contact .contact-part,#tpl-contact .jobs-part {
    padding-top: 110rem;
    padding-bottom: 100rem
}

#tpl-contact .contact-part .flux-lite,#tpl-contact .jobs-part .flux-lite {
    max-width: 900rem
}

#tpl-contact .contact-part .ttl-part,#tpl-contact .jobs-part .ttl-part {
    padding-bottom: 110rem
}

#tpl-contact .contact-part .dbl-list:after,#tpl-contact .jobs-part .dbl-list:after {
    content: "";
    clear: both;
    display: block;
    position: relative
}

#tpl-contact .contact-part .dbl-list .pt,#tpl-contact .jobs-part .dbl-list .pt {
    width: 33.333%;
    float: left;
    padding-left: 34rem
}

#tpl-contact .contact-part .dbl-list .pt a,#tpl-contact .jobs-part .dbl-list .pt a {
    font-family: "Nexa-Book";
    position: relative;
    display: inline-block
}

#tpl-contact .contact-part {
    background: #f0f0f0
}

#tpl-contact .jobs-part {
    padding-bottom: 150rem
}

#tpl-contact .success-mention,#tpl-contact .error-mention {
    position: relative;
    font-size: 18px;
    line-height: 24px;
    display: none;
    padding-top: 70px
}

#tpl-contact .talent-push {
    position: relative;
    margin: 50px 0 100px
}

#tpl-contact .talent-push .flux {
    position: relative;
    overflow: hidden;
    padding-bottom: 0
}

#tpl-contact .talent-push .bg {
    z-index: 10;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    background: #212121
}

#tpl-contact .talent-push .bg p {
    position: absolute;
    font-size: 250rem;
    line-height: 260rem;
    opacity: .08;
    left: -80rem;
    color: #fff;
    z-index: 5;
    top: 0;
    font-family: "NexaBold"
}

#tpl-contact .talent-push .frt-c {
    position: relative;
    z-index: 20;
    padding: 110px 0px
}

#tpl-contact .talent-push .frt-c:after {
    content: "";
    clear: both;
    display: block;
    position: relative
}

#tpl-contact .talent-push .frt-c .lf-pt {
    float: left
}

#tpl-contact .talent-push .frt-c .lf-pt p {
    color: #a4a4a4;
    text-transform: uppercase;
    font-family: "NexaBold";
    font-size: 14rem;
    position: relative
}

#tpl-contact .talent-push .frt-c .lf-pt p:after {
    content: "";
    right: 0;
    top: 5rem;
    display: block;
    position: absolute;
    margin-left: 50rem;
    width: calc(100% - 110rem);
    height: 1px;
    background: #e7e7e7
}

#tpl-contact .talent-push .frt-c .lf-pt h4 {
    color: #0fa;
    text-transform: uppercase;
    font-size: 24rem;
    font-family: "NexaBold";
    padding-top: 18rem
}

#tpl-contact .talent-push .frt-c .rg-pt {
    float: right
}

#tpl-contact .talent-push .frt-c .rg-pt .bt {
    display: inline-block
}

#tpl-contact .talent-push .frt-c .rg-pt .bt p {
    color: #fff
}

.form .radio-field {
    line-height: 20rem
}

.form .radio-field.error label {
    color: #ef1c1c
}

.form .radio-field .radio-bt {
    display: inline-block;
    vertical-align: middle;
    padding-right: 51px;
    cursor: pointer;
    position: relative
}

.form .radio-field .radio-bt label,.form .radio-field .radio-bt i {
    cursor: pointer
}

.form .radio-field .radio-bt.checked i:after {
    transform: scale(1);
    opacity: 1
}

.form .radio-field .radio-bt i {
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    height: 16px;
    border: 1px solid #777;
    border-radius: 50%;
    margin-top: -4px;
    margin-right: 14px;
    position: relative
}

.form .radio-field .radio-bt i:after {
    content: "";
    display: block;
    position: absolute;
    width: 8px;
    height: 8px;
    margin: -4px;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    background: #777;
    transform: scale(0);
    opacity: 0;
    transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    transition-duration: .4s
}

.form .radio-field .radio-bt label {
    display: inline-block;
    vertical-align: middle;
    font-family: "NexaBold";
    color: #777;
    font-size: 15rem
}

.form .radio-field .radio-bt input {
    display: none
}

.form .cat-selector-field {
    line-height: 20rem;
    font-size: 18rem
}

.form .cat-selector-field p {
    display: inline-block;
    vertical-align: middle;
    font-family: "Nexa-Book";
    padding-right: 10px
}

.form .cat-selector-field ul {
    display: inline-block;
    vertical-align: middle
}

.form .cat-selector-field ul li {
    display: inline-block;
    vertical-align: middle;
    font-family: "NexaBold";
    text-transform: uppercase;
    letter-spacing: 3rem;
    text-transform: uppercase;
    font-size: 15rem;
    color: #777;
    padding: 0 55px;
    border-right: 1px solid #e7e7e7;
    cursor: pointer
}

@media (max-width: 720px) {
    .form .cat-selector-field ul li {
        letter-spacing:2rem
    }
}

.form .cat-selector-field ul li:last-child {
    border-right: 0;
    padding-right: 0
}

.form .cat-selector-field ul li span {
    position: relative;
    transition-duration: .5s
}

.form .cat-selector-field ul li span:after {
    transition-duration: .5s;
    content: "";
    width: 100%;
    height: 4px;
    background: #036;
    position: absolute;
    bottom: -20px;
    transform: scaleX(0);
    display: block;
    transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1)
}

.form .cat-selector-field ul li.act {
    color: #036
}

.form .cat-selector-field ul li.act span:after {
    transform: scaleX(1)
}

.form .txt-field {
    position: relative;
    font-family: "Nexa-Book";
    border-bottom: 1px solid #a4a4a4;
    margin-bottom: 40rem;
    width: 100%
}

.form .txt-field.error {
    border-bottom: 1px solid #ef1c1c
}

.form .txt-field.error label {
    color: #ef1c1c
}

.form .txt-field.demi {
    float: left;
    width: calc(50% - 17rem)
}

.form .txt-field.mr {
    margin-right: 34rem
}

.form .txt-field input,.form .txt-field textarea {
    padding-bottom: 20px;
    padding-top: 20px;
    font-size: 15px;
    height: 60px;
    width: 100%
}

.form .txt-field label {
    font-family: "Nexa-Book";
    color: #2c2c2c;
    font-size: 15rem;
    position: absolute;
    top: 23px;
    left: 0;
    opacity: .45
}

.form .txt-field input[type="email"]::-webkit-input-placeholder {
    text-align: right;
    color: #ef1c1c
}

.form .txt-field input[type="email"]::-moz-placeholder {
    text-align: right;
    color: #ef1c1c
}

.form .txt-field input[type="email"]::-ms-placeholder {
    text-align: right;
    color: #ef1c1c
}

.form .txt-field input[type="email"]:-ms-input-placeholder {
    text-align: right;
    color: #ef1c1c
}

.form .txt-field input[type="email"]::placeholder {
    text-align: right;
    color: #ef1c1c
}

.form .txt-field.area-field textarea {
    margin-top: 20px;
    padding-top: 0px;
    padding-bottom: 5px
}

.form .txt-field.area-field ::-webkit-input-placeholder {
    color: #bbbbbb
}

.form .txt-field.area-field ::-moz-placeholder {
    color: #bbbbbb
}

.form .txt-field.area-field ::-ms-placeholder {
    color: #bbbbbb
}

.form .txt-field.area-field :-ms-input-placeholder {
    color: #bbbbbb
}

.form .txt-field.area-field ::placeholder {
    color: #bbbbbb
}

.form .file-field {
    position: relative;
    margin-top: 60px;
    margin-bottom: 30px
}

.form .file-field.error .error-file {
    display: block
}

.form .file-field label {
    border: 2px solid #0fa;
    cursor: pointer;
    padding: 16px 20px 14px;
    display: inline-block;
    transition: .5s;
    font-family: "Nexa-Book";
    color: #2c2c2c
}

.form .file-field label:hover {
    background: #0fa;
    color: #fff
}

.form .file-field span {
    padding-left: 20px;
    color: #2c2c2c;
    font-size: 12px
}

.form .file-field .error-file {
    color: #ef1c1c;
    position: absolute;
    top: 100%;
    left: 0;
    padding-left: 0;
    padding-top: 10px;
    display: none
}

.form .file-field input {
    position: absolute;
    opacity: 0;
    left: 0;
    top: 0
}

.form .btm-pt {
    padding-top: 10rem
}

.form .btm-pt:after {
    content: "";
    clear: both;
    display: block;
    position: relative
}

.form .btm-pt .mention {
    float: left;
    padding-top: 23px
}

.form .mention {
    font-family: "Nexa-Book";
    font-size: 15rem;
    color: #bbbbbb
}

.form form.hidden {
    opacity: 0;
    transition-duration: .7s;
    overflow: hidden
}

.label-fd label {
    transition-duration: .3s;
    transform-origin: 0 0
}

.label-fd.focused label {
    transform: scale(0.8) translate(0px, -30px);
    color: #0fa;
    opacity: 1
}

input {
    background: none repeat scroll 0 0 transparent;
    border: medium none;
    margin: 0;
    font-size: 15rem;
    font-family: "Nexa-Book";
    color: #212121;
    -webkit-appearance: none;
    width: 100%
}

textarea {
    background: none repeat scroll 0 0 transparent;
    border: medium none;
    float: none;
    display: block;
    margin: 0;
    resize: none;
    -webkit-appearance: none;
    margin: 0;
    font-size: 15rem;
    font-family: "Nexa-Book";
    color: #212121;
    line-height: 22rem
}

@media (max-width: 1180px) {
    .form .cat-selector-field ul {
        display:block;
        margin-top: 30px
    }

    .form .cat-selector-field ul li:first-child {
        padding-left: 0
    }
}

@media (max-width: 1020px) {
    .form .cat-selector-field ul {
        display:block;
        margin-top: 30px
    }

    .form .cat-selector-field ul li {
        padding: 0 30px
    }

    .form .cat-selector-field ul li:first-child {
        padding-left: 0
    }

    #tpl-contact .contact-part .flux-lite,#tpl-contact .jobs-part .flux-lite {
        max-width: calc(100% - 100px)
    }

    #tpl-contact .contact-part .dbl-list .pt,#tpl-contact .jobs-part .dbl-list .pt {
        padding-left: 0px;
        min-height: 150px
    }

    #tpl-contact .talent-push .frt-c {
        padding: 50px 0
    }

    #tpl-contact .talent-push .frt-c .lf-pt {
        float: none
    }

    #tpl-contact .talent-push .frt-c .lf-pt h4 {
        line-height: 40rem
    }

    #tpl-contact .talent-push .frt-c .rg-pt {
        display: table;
        margin: 50px auto 0;
        float: none
    }
}

@media (max-width: 720px) {
    #tpl-contact .flux {
        padding-bottom:50rem
    }

    #tpl-contact .subttl-dash {
        margin-bottom: 20rem
    }

    #tpl-contact .full-bt {
        position: relative;
        float: none;
        margin: auto
    }

    #tpl-contact .contact-part,#tpl-contact .jobs-part {
        padding-top: 60rem;
        padding-bottom: 60rem
    }

    #tpl-contact .contact-part .ttl-part,#tpl-contact .jobs-part .ttl-part {
        padding-bottom: 50rem
    }

    #tpl-contact .contact-part .dbl-list .pt,#tpl-contact .jobs-part .dbl-list .pt {
        width: auto;
        display: block;
        float: none;
        min-height: 0
    }

    #tpl-contact .talent-push .flux {
        max-width: calc(100% - 30rem)
    }

    #tpl-contact .talent-push .flux-lite {
        max-width: 100%
    }

    .form .radio-field .radio-bt {
        margin-bottom: 20rem
    }

    .form .txt-field {
        margin-bottom: 20rem
    }

    .form .txt-field.demi {
        float: none;
        width: auto;
        display: block
    }

    .form .txt-field.mr {
        margin-right: 0
    }

    .form .btm-pt .mention {
        display: block;
        margin-bottom: 50rem
    }

    .form .cat-selector-field {
        text-align: center
    }

    .form .cat-selector-field.open ul {
        height: auto
    }

    .form .cat-selector-field p {
        padding-right: 0
    }

    .form .cat-selector-field ul {
        overflow: hidden;
        height: 42px;
        margin-left: 30px;
        margin-right: 30px;
        position: relative
    }

    .form .cat-selector-field ul:before {
        content: "";
        border-bottom: 3px solid #0fa;
        display: block;
        top: 39px;
        position: absolute;
        left: 0;
        right: 0
    }

    .form .cat-selector-field ul:after {
        content: "";
        position: absolute;
        display: block;
        width: 6px;
        height: 6px;
        border-left: 2px solid #0fa;
        border-bottom: 2px solid #0fa;
        top: 10px;
        right: 10px;
        transform: rotate(-45deg)
    }

    .form .cat-selector-field ul li {
        display: block;
        margin: 0;
        width: auto;
        padding: 10rem 0 20rem;
        border: none
    }

    .form .cat-selector-field ul li span:after {
        display: none
    }
}

#global-popin {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    display: none;
    opacity: 0;
    overflow-y: auto;
    background: #000
}

#global-popin.full-screen .popin-ct {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto
}

#global-popin.full-screen .popin-ct:after,#global-popin.full-screen .popin-ct:before {
    display: none
}

#global-popin.full-screen .overlay {
    display: none
}

#global-popin .overlay {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    background: #000;
    opacity: .77
}

#global-popin .popin-ct {
    background: #fff;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute
}

#global-popin .popin-ct:after,#global-popin .popin-ct:before {
    content: "";
    display: none;
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
    height: 70px
}

#global-popin .popin-ct:before {
    top: 0;
    background-image: linear-gradient(to bottom, #fff, rgba(255,255,255,0))
}

#global-popin .popin-ct:after {
    bottom: 0;
    background-image: linear-gradient(to top, #fff, rgba(255,255,255,0))
}

#global-popin .popin-ct.scroll {
    margin-top: 50px;
    margin-bottom: 50px;
    top: 0;
    height: auto !important
}

#global-popin .popin-ct .close-bt {
    position: absolute;
    top: 21px;
    right: 21px;
    z-index: 50
}

#global-popin .popin-ct .pop-ct {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute
}

#global-popin .popin-ct .pop-ct .iframe-c {
    background: #000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding-top: 80px;
    position: absolute
}

#global-popin .popin-ct .pop-ct iframe {
    width: 100%;
    height: 100%
}

.full-player-ct {
    position: fixed;
    z-index: 1500;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    display: none;
    opacity: 0
}

#full-player {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

#full-player .close-bt {
    position: absolute;
    z-index: 130;
    top: 30px;
    right: 30px
}

#full-player.mobile-tablet .controls {
    display: none
}

#full-player .controls {
    position: absolute;
    bottom: 0;
    z-index: 30;
    left: 0;
    right: 0;
    height: 50px;
    background: rgba(0,0,0,0.6);
    padding-left: 10px;
    padding-right: 10px;
    transition: .5s;
    transform: translateY(45px);
    line-height: 1
}

#full-player .controls:hover,#full-player .controls.active {
    transform: translateY(0px);
    opacity: 1
}

#full-player .controls .timer {
    text-align: center;
    position: absolute;
    width: 100%;
    font-size: 14px;
    text-transform: uppercase;
    color: #fff;
    left: 0;
    top: 20px;
    z-index: 30
}

#full-player .controls .controls-bt {
    position: absolute;
    top: 14px;
    height: 25px;
    line-height: 25px;
    width: 30px;
    text-align: center;
    z-index: 50;
    cursor: pointer
}

#full-player .controls .controls-bt.play-pause-btn {
    left: 20px
}

#full-player .controls .controls-bt.mute-unmute-bt {
    right: 20px
}

#full-player .controls .controls-bt .pause-bt {
    display: none
}

#full-player .controls .controls-bt .unmute-bt {
    display: none
}

#full-player .controls .controls-bt img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    display: inline-block
}

#full-player .video-ct {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    text-align: center;
    pointer-events: none
}

#full-player .video-ct video {
    display: inline-block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle
}

#full-player .iframe-ct .iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

#full-player .iframe-ct .iframe iframe {
    position: absolute;
    width: 100%;
    height: 150%;
    top: -25%;
    left: 0
}

#full-player .progress-bar {
    width: 100%;
    height: 5px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 30;
    background: #fff;
    cursor: pointer
}

#full-player .progress-bar .progress-bar-cursor {
    background: #0fa;
    position: absolute;
    left: 0;
    width: 0;
    top: 0;
    height: 100%
}

body.mobiletablet #full-player .iframe-ct {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 30
}

body.mobiletablet #full-player .controls {
    transform: translateY(0px);
    opacity: .7
}

body.mobiletablet #full-player.iframe-mode .controls {
    display: none
}

@media (max-width: 768px) {
    #full-player .iframe-ct {
        position:absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 30
    }

    #full-player .iframe-ct .iframe:before {
        display: none;
        content: "Click to play";
        position: absolute;
        color: #fff;
        text-transform: uppercase;
        z-index: 100;
        text-align: center;
        top: 60%;
        left: 50%;
        margin-left: -66px;
        pointer-events: none;
        padding: 10px 20px;
        border: 2px solid #0fa;
        background: rgba(0,0,0,0.5)
    }

    #full-player .iframe-ct .iframe iframe {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0
    }
}

.actu-box {
    background: #fff;
    padding: 40px;
    margin: 0 0 34rem;
    width: calc(50% - 17rem);
    border: 1px solid #f3f3f3
}

.actu-box:nth-child(odd) {
    margin-right: 34rem
}

.actu-box .top-pt {
    display: -ms-flexbox;
    display: flex;
    font-family: "NexaBold";
    text-transform: uppercase;
    font-size: 12px;
    line-height: 30px;
    -ms-flex-pack: justify;
    justify-content: space-between;
    color: #000
}

.actu-box .top-pt .cat {
    letter-spacing: 0.175em
}

@media (max-width: 720px) {
    .actu-box .top-pt {
        -ms-flex-direction:column;
        flex-direction: column
    }
}

.actu-box .img-c {
    margin-top: 20px
}

.actu-box .img-c:after {
    content: '';
    display: block;
    padding-bottom: calc(1 / 1.67 * 100%);
    pointer-events: none
}

.actu-box .title {
    font-size: 22px;
    line-height: 33px;
    font-family: "NexaBold";
    margin-top: 35px;
    transition: color 0.3s;
    color: #000
}

.actu-box .extract {
    margin-top: 35px;
    font-size: 15px;
    line-height: 25px;
    color: #000
}

.actu-box:hover .title {
    color: #0fa
}

#tpl-news .page-cover {
    height: 300rem
}

#tpl-news .page-cover .img-c img {
    filter: blur(20px)
}

#tpl-news .page-cover .img-c:after {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    background: #036;
    opacity: 0.9;
    position: absolute
}

#tpl-news .page-cover .frt-c .flux {
    height: 300rem
}

#tpl-news .list-c {
    position: relative
}

#tpl-news .list-c .post-list {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

#tpl-news .list-c #more-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -2.5px 0 0 -25px
}

#tpl-news .list-c #more-loader.more-post {
    bottom: 25px;
    top: auto
}

#tpl-news .list-c #bt-more {
    display: table;
    margin: auto;
    margin-top: 50rem;
    transition: all 0.3s
}

#tpl-news .list-c #bt-more.hidden {
    transform: translateY(20px);
    opacity: 0
}

#tpl-single-post .cover {
    height: 300rem
}

#tpl-single-post .cover .img-c {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

#tpl-single-post .cover .img-c img {
    filter: blur(20px)
}

#tpl-single-post .cover .img-c:after {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    background: #036;
    opacity: 0.9;
    position: absolute
}

#tpl-single-post .content {
    margin-top: -81rem;
    position: relative;
    z-index: 50
}

#tpl-single-post .content .flux {
    padding: 100px 100px;
    position: relative
}

#tpl-single-post .content .flux:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: #FFF;
    content: "";
    height: 100px
}

#tpl-single-post .content .flux .tmce h2 {
    margin-top: 40px
}

#tpl-single-post .content .flux .tmce h3 {
    margin-top: 20px
}

#tpl-single-post .content .flux .tmce p+p {
    margin-top: 10px
}

#tpl-single-post .content .top-pt {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    font-family: "NexaBold";
    text-transform: uppercase;
    font-size: 12px;
    line-height: 30px;
    -ms-flex-pack: justify;
    justify-content: space-between;
    color: #000
}

#tpl-single-post .content .top-pt .cat {
    letter-spacing: 0.175em
}

#tpl-single-post .content .title {
    font-size: 35px;
    line-height: 50px;
    margin-top: 30px;
    position: relative;
    font-family: "NexaBold";
    margin-bottom: 70px
}

#tpl-single-post .content .img-c {
    margin-bottom: 70px;
    height: 600px
}

#tpl-single-post .share-part {
    margin-top: 60px;
    padding: 30px 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    border-top: 1px solid #f3f3f3;
    border-bottom: 1px solid #f3f3f3;
    -ms-flex-align: center;
    align-items: center
}

#tpl-single-post .share-part p {
    font-family: "NexaBold";
    text-transform: uppercase;
    font-size: 12px;
    color: #000
}

#tpl-single-post .share-part .share {
    display: inline-block;
    margin-left: 10px;
    cursor: pointer
}

#tpl-single-post .share-part .share svg path {
    fill: #000
}

#tpl-single-post .share-part .share.linkedin svg {
    width: 80%
}

#tpl-single-post .other-actus .list-c {
    margin-top: 60rem
}

#tpl-single-post .other-actus .flux-list {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}


/* --- Mise en page "À Propos" --- */

#about-page {
    padding-top: 120px; /* Pour éviter que le header ne cache le titre */
    padding-bottom: 80px;
}

/* Section École */
.intro-content {
    display: flex;
    align-items: center;
    gap: 50px;
    margin-bottom: 80px;
}

.intro-content .text-part { flex: 1; }
.intro-content .img-part { flex: 1; }

.intro-content img {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

/* Grille des membres */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 40px;

}

.member-card {
    background: #f9f9f9;
    border-radius: 15px;
    overflow: hidden;
    text-align: center;
    transition: transform 0.3s ease;
}

.member-card:hover {
    transform: translateY(-10px);
}

.member-img img {
    width: 100%;
    height: 300px;
    object-fit: cover; /* Recadre proprement les photos */
}

.member-info {
    padding: 20px;
}

.member-info h3 {
    font-size: 1.2rem;
    font-weight: bold;
    color: #003366; /* Bleu ENSTA */
    margin-bottom: 5px;
}

/* --- Styles de la page À Propos --- */

#about-page {
    padding-top: 150px; /* Espace pour le header */
    background-color: #ffffff;
}

/* Introduction École */
.intro-content {
    display: flex;
    align-items: center;
    gap: 60px;
    padding: 40px 0;
}

.intro-content .text-part { flex: 1.2; }
.intro-content .img-part { flex: 0.8; }


/* Centrage du titre de section */
.center-title {
    text-align: center;
    margin-bottom: 20px;
    width: 100%;
    display: flex;
    justify-content: center;
}

/* On s'assure que le trait de soulignement (le pseudo-élément :after) est aussi centré */
.center-title .ttl-part:after {
    left: 50%;
    transform: translateX(-50%);
}

/* Style pour la sous-introduction centrée */
.sub-intro {
    text-align: center;
    font-size: 10rem !important;
    color: #666;
    margin-bottom: 50px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}


/* Le nom du membre */
.member-info h3 {
    font-size: 10rem !important; /* Force une taille plus grande */
    color: #003366;
    margin-bottom: 10px;
    font-weight: 700;
}

/* Le rôle (Président, etc.) */
.member-info .role {
    font-size: 10rem !important; /* Un peu plus grand que précédemment */
    letter-spacing: 1px;
    padding: 6px 15px;
}

/* La description sous le nom */
.member-info p {
    font-size: 10rem !important; /* Environ 17-18px */
    color: #555;
}


.description {
    font-size: 12rem; /* Environ 20px */
    line-height: 1.8;   /* Donne de l'espace entre les lignes */
    color: #333;        /* Un gris très foncé presque noir */
    margin-top: 30px;
    max-width: 800px;   /* Évite que les lignes ne soient trop longues à lire */
}

.image-wrapper {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff; /* Effet de relief doux */
}

.image-wrapper img {
    width: 100%;
    display: block;
    transition: transform 0.5s ease;
}

.image-wrapper:hover img {
    transform: scale(1.05);
}

/* Séparateur discret */
.separator {
    border: none;
    height: 1px;
    background: linear-gradient(to right, transparent, #003366, transparent);
    margin: 60px auto;
    opacity: 0.2;
}

/* Section Équipe */
.sub-intro {
    text-align: center;
    font-style: italic;
    color: #666;
    margin-bottom: 50px;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 40px;
}

/* Carte Membre */
.member-card {
    background: #fff;
    border-radius: 20px;
    padding: 15px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    border: 1px solid #eee;
}

.member-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,51,102,0.1);
    border-color: #003366;
}

.member-img {
    width: 100%;
    height: 320px;
    border-radius: 15px;
    overflow: hidden;
    margin-bottom: 20px;
}

.member-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.member-info .role {
    display: inline-block;
    padding: 4px 12px;
    background: #e6f0fa;
    color: #003366;
    font-size: 0.8rem;
    font-weight: bold;
    border-radius: 20px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.member-info h3 {
    font-size: 1.4rem;
    color: #222;
    margin-bottom: 8px;
    font-weight: 700;
}

.member-info p {
    font-size: 0.95rem;
    color: #777;
}

/* Responsive */
@media (max-width: 900px) {
    .intro-content {
        flex-direction: column;
        text-align: center;
    }
    .image-wrapper {
        max-width: 500px;
        margin: 0 auto;
    }
}



/* Adaptabilité Mobile */
@media (max-width: 768px) {
    .intro-content {
        flex-direction: column;
    }
    
    .team-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
}

@media (max-width: 1020px) {
    .actu-box {
        float:none;
        width: 100%
    }

    .actu-box:nth-child(odd) {
        margin-right: 0
    }

    #tpl-news .project-list .flux-list {
        width: 100%;
        padding: 0 50px
    }

    #tpl-single-post .cover {
        height: 150rem
    }

    #tpl-single-post .content {
        margin-top: 0
    }

    #tpl-single-post .content .flux {
        padding: 50px 50px;
        position: relative
    }

    #tpl-single-post .content .flux:before {
        display: none
    }

    #tpl-single-post .content .flux .title {
        font-size: 22px;
        line-height: 35px
    }

    #tpl-single-post .other-actus .project-list .flux-list {
        width: 100%;
        padding: 0 50px
    }
}

@media (max-width: 720px) {
    #tpl-news .project-list .flux-list {
        width:100%;
        padding: 0 30px
    }

    #tpl-single-post .cover {
        height: 150rem
    }

    #tpl-single-post .content {
        margin-top: 0
    }

    #tpl-single-post .content .flux {
        padding: 50px 00px;
        position: relative
    }

    #tpl-single-post .other-actus .ttl-part {
        padding: 0 50px
    }
}

@media (max-width: 1180px) {
    .flux {
        max-width:calc(100% - 130px)
    }
}

@media (max-width: 1020px) {
    .flux {
        max-width:calc(100% - 80px)
    }

    .flux-lite {
        max-width: calc(100% - 100px)
    }

    .subttl-dash:before {
        width: 50px;
        left: -70px
    }

    .ttl-part .ttl {
        font-size: 45rem
    }
}

@media (max-width: 720px) {
    .flux {
        max-width:calc(100% - 50px)
    }

    .flux-lite {
        max-width: calc(100% - 50px)
    }

    .ttl-part .ttl {
        font-size: 45rem
    }
}

body.mobile-tablet video {
    display: none !important;
    visibilty: hidden;
    opacity: 0
}

body.mobile-tablet .fb-video-box video {
    display: block !important;
    opacity: 1
}

body.mobile-tablet .fb-video-box .ct-pt .media-c .img-c:after,body.mobile-tablet .fb-video-box .ct-pt .media-c .img-c:before {
    opacity: 1;
    transform: none
}

@media (max-width: 720px) {
    .flux,.flux-lite {
        width:calc(100% - 50rem)
    }

    .ttl-part .ttl {
        font-size: 35rem;
        text-align: center
    }

    .subttl-dash {
        font-size: 16rem
    }

    .subttl-dash:before {
        display: none
    }

    .tmce {
        font-size: 16rem
    }

    #main-loader span {
        font-size: 70rem
    }
}