@font-face {
    font-display: swap;
    font-family: "font awesome 5 pro";
    font-style: normal;
    font-weight: 300;
    src: url(../../lib/fontawesome/webfonts/fa-light-300.eot);
    src: url(../../lib/fontawesome/webfonts/fa-light-300.eot?#iefix) format("embedded-opentype"), url(../../lib/fontawesome/webfonts/fa-light-300.woff2) format("woff2"), url(../../lib/fontawesome/webfonts/fa-light-300.woff) format("woff"), url(../../lib/fontawesome/webfonts/fa-light-300.ttf) format("truetype"), url(../../lib/fontawesome/webfonts/fa-light-300.svg#fontawesome) format("svg")
}
@font-face {
    font-display: swap;
    font-family: "font awesome 5 brands";
    font-style: normal;
    font-weight: 400;
    src: url(../../lib/fontawesome/webfonts/fa-brands-400.eot);
    src: url(../../lib/fontawesome/webfonts/fa-brands-400.eot?#iefix) format("embedded-opentype"), url(../../lib/fontawesome/webfonts/fa-brands-400.woff2) format("woff2"), url(../../lib/fontawesome/webfonts/fa-brands-400.woff) format("woff"), url(../../lib/fontawesome/webfonts/fa-brands-400.ttf) format("truetype"), url(../../lib/fontawesome/webfonts/fa-brands-400.svg#fontawesome) format("svg")
}
@font-face {
    font-display: swap;
    font-family: gilroy;
    src: url(../../lib/gilroy/Gilroy-Regular.eot);
    src: local('Gilroy Regular'), local('Gilroy-Regular'), url(../../lib/gilroy/Gilroy-Regular.eot?#iefix) format('embedded-opentype'), url(../../lib/gilroy/Gilroy-Regular.woff2) format('woff2'), url(../../lib/gilroy/Gilroy-Regular.woff) format('woff'), url(../../lib/gilroy/Gilroy-Regular.ttf) format('truetype');
    font-weight: 400;
    font-style: normal
}
@font-face {
    font-display: swap;
    font-family: gilroy;
    src: url(../../lib/gilroy/Gilroy-ExtraboldItalic.eot);
    src: local('Gilroy Extrabold Italic'), local('Gilroy-ExtraboldItalic'), url(../../lib/gilroy/Gilroy-ExtraboldItalic.eot?#iefix) format('embedded-opentype'), url(../../lib/gilroy/Gilroy-ExtraboldItalic.woff2) format('woff2'), url(../../lib/gilroy/Gilroy-ExtraboldItalic.woff) format('woff'), url(../../lib/gilroy/Gilroy-ExtraboldItalic.ttf) format('truetype');
    font-weight: 800;
    font-style: italic
}
@font-face {
    font-display: swap;
    font-family: gilroy;
    src: url(../../lib/gilroy/Gilroy-Bold.eot);
    src: local('Gilroy Bold'), local('Gilroy-Bold'), url(../../lib/gilroy/Gilroy-Bold.eot?#iefix) format('embedded-opentype'), url(../../lib/gilroy/Gilroy-Bold.woff2) format('woff2'), url(../../lib/gilroy/Gilroy-Bold.woff) format('woff'), url(../../lib/gilroy/Gilroy-Bold.ttf) format('truetype');
    font-weight: 700;
    font-style: normal
}
@font-face {
    font-display: swap;
    font-family: gilroy;
    src: url(../../lib/gilroy/Gilroy-Light.eot);
    src: local('Gilroy Light'), local('Gilroy-Light'), url(../../lib/gilroy/Gilroy-Light.eot?#iefix) format('embedded-opentype'), url(../../lib/gilroy/Gilroy-Light.woff2) format('woff2'), url(../../lib/gilroy/Gilroy-Light.woff) format('woff'), url(../../lib/gilroy/Gilroy-Light.ttf) format('truetype');
    font-weight: 300;
    font-style: normal
}
@font-face {
    font-display: swap;
    font-family: gilroy;
    src: url(../../lib/gilroy/Gilroy-UltraLight.eot);
    src: local('Gilroy UltraLight'), local('Gilroy-UltraLight'), url(../../lib/gilroy/Gilroy-UltraLight.eot?#iefix) format('embedded-opentype'), url(../../lib/gilroy/Gilroy-UltraLight.woff2) format('woff2'), url(../../lib/gilroy/Gilroy-UltraLight.woff) format('woff'), url(../../lib/gilroy/Gilroy-UltraLight.ttf) format('truetype');
    font-weight: 200;
    font-style: normal
}
@font-face {
    font-display: swap;
    font-family: gilroy;
    src: url(../../lib/gilroy/Gilroy-RegularItalic.eot);
    src: local('Gilroy Regular Italic'), local('Gilroy-RegularItalic'), url(../../lib/gilroy/Gilroy-RegularItalic.eot?#iefix) format('embedded-opentype'), url(../../lib/gilroy/Gilroy-RegularItalic.woff2) format('woff2'), url(../../lib/gilroy/Gilroy-RegularItalic.woff) format('woff'), url(../../lib/gilroy/Gilroy-RegularItalic.ttf) format('truetype');
    font-weight: 400;
    font-style: italic
}
@font-face {
    font-display: swap;
    font-family: gilroy;
    src: url(../../lib/gilroy/Gilroy-Extrabold.eot);
    src: local('Gilroy Extrabold'), local('Gilroy-Extrabold'), url(../../lib/gilroy/Gilroy-Extrabold.eot?#iefix) format('embedded-opentype'), url(../../lib/gilroy/Gilroy-Extrabold.woff2) format('woff2'), url(../../lib/gilroy/Gilroy-Extrabold.woff) format('woff'), url(../../lib/gilroy/Gilroy-Extrabold.ttf) format('truetype');
    font-weight: 800;
    font-style: normal
}
@font-face {
    font-display: swap;
    font-family: gilroy;
    src: url(../../lib/gilroy/Gilroy-BoldItalic.eot);
    src: local('Gilroy Bold Italic'), local('Gilroy-BoldItalic'), url(../../lib/gilroy/Gilroy-BoldItalic.eot?#iefix) format('embedded-opentype'), url(../../lib/gilroy/Gilroy-BoldItalic.woff2) format('woff2'), url(../../lib/gilroy/Gilroy-BoldItalic.woff) format('woff'), url(../../lib/gilroy/Gilroy-BoldItalic.ttf) format('truetype');
    font-weight: 700;
    font-style: italic
}
@font-face {
    font-display: swap;
    font-family: gilroy;
    src: url(../../lib/gilroy/Gilroy-UltraLightItalic.eot);
    src: local('Gilroy UltraLight Italic'), local('Gilroy-UltraLightItalic'), url(../../lib/gilroy/Gilroy-UltraLightItalic.eot?#iefix) format('embedded-opentype'), url(../../lib/gilroy/Gilroy-UltraLightItalic.woff2) format('woff2'), url(../../lib/gilroy/Gilroy-UltraLightItalic.woff) format('woff'), url(../../lib/gilroy/Gilroy-UltraLightItalic.ttf) format('truetype');
    font-weight: 200;
    font-style: italic
}
@font-face {
    font-display: swap;
    font-family: gilroy;
    src: url(../../lib/gilroy/Gilroy-LightItalic.eot);
    src: local('Gilroy Light Italic'), local('Gilroy-LightItalic'), url(../../lib/gilroy/Gilroy-LightItalic.eot?#iefix) format('embedded-opentype'), url(../../lib/gilroy/Gilroy-LightItalic.woff2) format('woff2'), url(../../lib/gilroy/Gilroy-LightItalic.woff) format('woff'), url(../../lib/gilroy/Gilroy-LightItalic.ttf) format('truetype');
    font-weight: 300;
    font-style: italic
}
*,
*:after,
*:before {
    -webkit-tap-highlight-color: transparent;
    list-style-position: inside;
    list-style-type: none;
    color: inherit;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    outline: none;
    position: relative;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}
html,
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td,
p,
figure,
figcaption,
button {
    font-size: inherit;
    color: inherit;
    background: 0 0
}
section,
article,
header,
footer,
nav,
aside {
    display: block
}
table,
td,
blockquote,
code,
pre,
textarea,
input {
    max-width: 100%
}
input,
textarea,
button {
    resize: none;
    -webkit-appearance: none;
    font-family: inherit
}
img {
    height: auto;
    vertical-align: bottom
}
i {
    font-style: normal
}
a,
button {
    touch-action: manipulation;
    border: 0;
    cursor: pointer;
    color: inherit;
    text-decoration: none;
    transition: .25s
}
a,
a:hover,
a:active,
a:focus,
button,
button:hover,
button:focus,
button:active {
    text-decoration: none;
    outline: none
}
address {
    font-style: normal
}
strong {
    font-weight: 700
}
[data-link] {
    cursor: pointer
}
[data-bg] {
    background-position: center center;
    background-size: cover
}
.sf-toolbar {
    display: none!important
}
.fx {
    margin-top: 0!important
}
.fxb {
    margin-top: 0!important;
    top: auto!important;
    bottom: 0!important
}
.js-color-bg {
    fill: #000
}

textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 0 transparent inset;
    transition: background-color 5000s ease-in-out 0s;
    background-color: inherit!important
}
*::-moz-selection {
    background-color: #fd7e14;
    color: #fff
}
*::selection {
    background-color: #fd7e14;
    color: #fff
}
::-webkit-input-placeholder {
    color: inherit;
    opacity: .5
}
::-moz-placeholder {
    color: inherit;
    opacity: .5
}
::-ms-input-placeholder {
    color: inherit;
    opacity: .5
}
.fa:before {
    font-family: "font awesome 5 pro";
    font-weight: 300
}
.fab:before {
    font-family: "font awesome 5 brands"
}
.phone:before {
    content: '\f095'
}
.heart:before {
    content: '\f004'
}
.envelope:before {
    content: '\f0e0'
}
.marker:before {
    content: '\f041'
}
.at:before {
    content: '\f1fa'
}
.times:before {
    content: '\f00d'
}
.cookie:before {
    content: '\f563'
}
.infos:before {
    content: '\f05a'
}
.lal:before {
    content: '\f177'
}
.instagram:before {
    content: '\f16d'
}
.facebook:before {
    content: '\f39e'
}
.linkedin:before {
    content: '\f0e1'
}
.twitter:before {
    content: '\f099'
}
.awr:before {
    content: '\f178'
}
.awl:before {
    content: '\f177'
}
.awd:before {
    content: '\f175'
}
.check:before {
    content: '\f00c'
}
.coffe:before {
    content: '\f7b6'
}
[data-cursor] {
    mix-blend-mode: difference;
    display: none;
    pointer-events: none;
    width: 0;
    height: 0;
    margin-top: 2px;
    margin-left: 2px;
    z-index: 99999999;
    position: absolute;
    top: 0;
    left: 0
}
.eth [data-cursor] {
    mix-blend-mode: normal
}
html:hover [data-cursor] {
    display: block
}
html.ie [data-cursor],
html.mob [data-cursor] {
    display: none!important
}
[data-cursor] .cur1 {
    width: 5px;
    height: 5px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    z-index: 5
}
[data-cursor] .cur1>* {
    opacity: 0;
    transition: .4s;
    font-weight: 800;
    font-size: 14px;
    color: #ffffff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    text-align: center
}
.eth [data-cursor] .cur1>.see {
    opacity: 1
}
[data-cursor] .cur2 {
    transition: opacity .4s, transform .4s;
    opacity: .3;
    width: 15px;
    height: 15px;
    background-color: #ffffff;
    margin: -11px 0 0 -10px;
    border-radius: 50%
}
.hover [data-cursor] .cur2,
.drag [data-cursor] .cur2 {
    transform: scale(4);
    opacity: .1
}
.eth [data-cursor] .cur2 {
    background-color: #000;
    opacity: 1;
    transform: scale(4)
}
body.eth * {
    cursor: none!important
}
.swiper-slide {
    overflow: hidden;
    flex: 1 0 auto;
    height: 100%
}
.swiper-wrapper {
    display: flex;
    flex-wrap: nowrap;
    height: 100%
}
@font-face {
    font-display: swap;
    font-family: icomoon;
    src: url(../../lib/icomoon/icomoon.eot);
    src: url(../../lib/icomoon/icomoon.eot?#iefix) format('embedded-opentype'), url(../../lib/icomoon/icomoon.woff2) format('woff2'), url(../../lib/icomoon/icomoon.woff) format('woff'), url(../../lib/icomoon/icomoon.ttf) format('truetype'), url(../../lib/icomoon/icomoon.svg#icomoon) format('svg');
    font-weight: 400;
    font-style: normal
}
[class^=i_]:before,
[class*=" i_"]:before {
    font-family: icomoon!important;
    speak: never;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1
}
.i_cdc:before {
    content: "\e900"
}
.i_cm:before {
    content: "\e901"
}
.i_comm-digi:before {
    content: "\e902"
}
.i_conseil-audit:before {
    content: "\e903"
}
.i_conversion:before {
    content: "\e904"
}
.i_creation:before {
    content: "\e905"
}
.i_dev:before {
    content: "\e906"
}
.i_ecommerce:before {
    content: "\e907"
}
.i_fideliser:before {
    content: "\e908"
}
.i_graphique:before {
    content: "\e909"
}
.i_graphisme:before {
    content: "\e90a"
}
.i_identite:before {
    content: "\e90b"
}
.i_image:before {
    content: "\e90c"
}
.i_logo:before {
    content: "\e90d"
}
.i_marketing:before {
    content: "\e90e"
}
.i_marketing-digital:before {
    content: "\e90f"
}
.i_marketplace:before {
    content: "\e910"
}
.i_nouvelle-techno:before {
    content: "\e911"
}
.i_print:before {
    content: "\e912"
}
.i_projet-global:before {
    content: "\e913"
}
.i_refonte:before {
    content: "\e914"
}
.i_ref-seo:before {
    content: "\e915"
}
.i_rs:before {
    content: "\e916"
}
.i_site:before {
    content: "\e917"
}
.i_vitrau:before {
    content: "\e918"
}
.i_vitrine:before {
    content: "\e919"
}
.i_adwords:before {
    content: "\e91a"
}
.i_app-pwa:before {
    content: "\e91b"
}
.i_art-digi:before {
    content: "\e91c"
}
.i_autre-objectif:before {
    content: "\e91d"
}
.i_autre-souhait:before {
    content: "\e91e"
}
html,
body {
    font-size: calc(13px + 2 * (100vw - 320px)/1080);
    background-color: #ffffff;
    color: #000;
    line-height: 1;
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: "Oswald";
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}
* {
    scrollbar-color: rgba(0, 0, 0, .1) transparent;
    scrollbar-width: thin
}
*::-webkit-scrollbar {
    width: 3px;
    background-color: transparent
}
*::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .1)
}
.scrollbar-track {
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s, background .3s;
    position: absolute;
    z-index: 9999;
    background-color: #eee;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}
.scrollbar-track:hover,
.scrollbar-track.show {
    opacity: 1
}
.landh .scrollbar-track,
.scrollbar-track.show {
    opacity: 1
}
.scrollbar-track-y {
    height: 100%;
    width: 3px;
    top: 0;
    right: 0;
    margin: 0 auto;
    background: rgba(0, 0, 0, .1)
}
.scrollbar-track-y .scrollbar-thumb {
    cursor: pointer;
    pointer-events: auto;
    width: 8px;
    left: -2px;
    border-radius: 5px 0 0 5px
}
.scrollbar-track-y .scrollbar-thumb:before {
    content: '';
    width: 4px;
    height: 100%;
    left: 1px;
    position: absolute;
    top: 0;
    background: rgba(255, 255, 255, .15);
    border-radius: 5px 0 0 5px
}
.landh .scrollbar-track-y .scrollbar-thumb:before {
    background: #000!important;
    border-radius: 5px 0 0 5px
}
#ck {
    overflow: hidden;
    background-color: #008aff;
    color: #ffffff;
    box-shadow: 0 15px 20px rgba(0, 0, 0, .3);
    border-radius: 30px;
    transition: transform .6s, opacity .6s, visibility .6s;
    transform: translateY(100%);
    opacity: 0;
    visibility: hidden;
    max-width: calc(99vw - 20px);
    position: fixed;
    bottom: calc(10px + .5vw);
    left: calc(10px + .5vw);
    z-index: 9990;
    width: 400px;
    font-size: 11px;
    line-height: 1.3
}
.cks.fix #ck {
    transform: translateY(0);
    opacity: 1;
    visibility: visible
}
#ck .ckc {
    display: flex;
    align-items: flex-start;
    padding: 20px
}
#ck p strong {
    display: block;
    margin-bottom: 10px;
    font-size: 130%;
    line-height: 1
}
#ck a {
    font-weight: 700;
    text-decoration: underline
}
#ck a:hover {
    color: #222
}
#ck i {
    color: #ffffff;
    font-size: 35px;
    margin-right: 15px;
    top: -8px
}
#ck i:before {
    animation: cookies 1s infinite linear
}
#ck .ckb {
    display: flex;
    font-size: 15px;
    font-weight: 700
}
#ck .ckb>* {
    border-top: 1px solid rgba(0, 0, 0, .1);
    flex: 1;
    background-color: rgba(0, 0, 0, .1);
    padding: 14px 0 15px
}
#ck .ckb>*:hover {
    background-color: rgba(0, 0, 0, .15)
}
#ck .ckb>*+* {
    border-left: 1px solid rgba(0, 0, 0, .1)
}
#ck .ckb small {
    font-size: 13px;
    font-weight: 400
}
@keyframes cookies {
    0% {
        content: '\f563'
    }
    100% {
        content: '\f564'
    }
}
.ct {
    width: 70vw;
    margin: auto
}
.trac * {
    fill: none;
    stroke: #000;
    stroke-width: 1;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10
}
.tc {
    color: #000;
    pointer-events: none;
    font-weight: 700;
    user-select: none;
    -moz-user-select: none;
    width: calc(90px + 25 * (100vw - 320px)/1080);
    height: calc(90px + 25 * (100vw - 320px)/1080);
    pointer-events: none
}
.tc svg {
    fill: #000;
    animation: rotate 8s infinite linear;
    position: absolute;
    width: 150%;
    height: 150%;
    left: -25%;
    top: -25%
}
.tc i {
    font-size: calc(20px + 10 * (100vw - 320px)/1080);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}
.tc i.is {
    font-size: calc(25px + 10 * (100vw - 320px)/1080)
}
.tc i.awr {
    animation: arrow 1s infinite linear
}
.tc i.awd {
    animation: arrowd 1s infinite linear
}
@keyframes arrow {
    0% {
        margin-left: -5px
    }
    50% {
        margin-left: 5px
    }
    100% {
        margin-left: -5px
    }
}
@keyframes arrowd {
    0% {
        margin-top: -5px
    }
    50% {
        margin-top: 5px
    }
    100% {
        margin-top: -5px
    }
}
@keyframes rotate {
    from {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(-360deg)
    }
}
/*.btn {
    transition: 0s;
    padding: 0 0 calc(10px + 3 * (100vw - 320px)/1080);
    font-size: calc(14px + 1 * (100vw - 320px)/1080);
    font-weight: 400;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: calc(2px + 3 * (100vw - 320px)/1080);
	font-family: "Lexend";
}
.btn span {
    transition: .2s;
    z-index: 5;
    display: block
}
.btn:active span {
    transform: scale(.95)
}
.btn:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    background: rgba(255, 255, 255, .05);
    height: 1px;
    left: calc(-1px - 1.5 * (100vw - 320px)/1080)
}
.btn.blck:after,
.btn.blck-ln:after {
    background: rgba(0, 0, 0, .1)
}
.btn:before {
    transition: .8s;
    z-index: 3;
    content: '';
    position: absolute;
    bottom: -1px;
    width: 40px;
    height: 3px;
    border-radius: 0% 0% 0% 0%;
    left: calc(-1px - 1.5 * (100vw - 320px)/1080)
}
.btn.blck:before {
    background: linear-gradient(to left, #000, #09080b)
}
.btn:hover:before {
    width: 100%;
    border-radius: 50% 0% 0% 50%
}*/
.scroll {
    position: absolute;
    bottom: calc(25px + 2%);
    left: calc(15px + 2%);
    height: calc(40px + 15 * (100vw - 320px)/1080)
}
.scroll>div {
    width: 3px;
    background-color: #ffffff;
    height: 100%
}
.scroll>div:after,
.scroll>div:before {
    content: '';
    bottom: -2px;
    position: absolute;
    background: inherit;
    height: 25%;
    width: inherit
}
.scroll>div:before {
    transform: rotate(-40deg);
    transform-origin: bottom left;
    border-bottom-left-radius: 3px
}
.scroll>div:after {
    transform: rotate(40deg);
    transform-origin: bottom right;
    border-bottom-right-radius: 3px
}
#app {
    box-shadow: 0 0 100px rgba(0, 0, 0, .1);
    overflow: hidden
}
html:not(.horiz) #app {
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0
}
html:not(.horiz) #app>.scroll-content {
    width: 100%;
    height: 100%;
    z-index: 5
}
html:not(.horiz) #app main {
    width: 100%;
    z-index: 6000
}
html:not(.horiz) #app .app-c {
    overflow: hidden
}
#sc .h1,
#cn .h1 {
    margin-top: calc(25px + 10 * (100vw - 320px)/1080);
    margin-bottom: -10px;
    text-transform: uppercase;
    font-size: calc(12px + 1 * (100vw - 320px)/1080);
    letter-spacing: calc(2px + 1 * (100vw - 320px)/1080)
}
#cn .h1 {
    margin-top: calc(15px + 5 * (100vw - 320px)/1080);
    margin-bottom: calc(15px + 5 * (100vw - 320px)/1080)
}
#sc .h1 h1,
#cn .h1 h1 {
    font-weight: 300
}
.cirbc {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    align-items: center;
    justify-content: center
}
.cirbc .cirb,
.cirbc .cirbr {
    width: 150vw;
    height: 150vw;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}
.cirbc .cirbr {
    background-color: #000;
    width: 0;
    height: 0
}
.cirbc svg {
    fill: none;
    stroke-linecap: round;
    stroke-dasharray: 0 999;
    opacity: 0;
    width: 100px;
    fill: transparent;
    stroke-width: 2px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100
}
.cirbc .ico {
    z-index: 100;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 40px;
    color: #ffffff
}
.cirbc .ico i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0
}
.sp {
    height: 100vh;
    pointer-events: none
}
.sp-3 {
    height: 30vh
}
#e {
    color: #ffffff;
    text-align: left;
    padding-top: 50vh;
    pointer-events: none
}
#e h2 span {
    display: block
}
.eavl {
    color: #ffffff;
    width: 100%;
    position: absolute;
    top: 0;
    display: flex;
    align-items: center;
    text-align: right
}
.eavl>* {
    flex: 1;
    margin: auto
}
.eavl .ct {}.eavl h2 {
    font-size: calc(25px + 15 * (100vw - 320px)/1080);
    font-weight: 200;
    width: 50%;
    left: calc(-80px - 30 * (100vw - 320px)/1080)
}
.eavl h2 span {
    display: block
}
.eavl h2 strong {
    font-weight: 800
}
#h,
.she {
    pointer-events: none;
    position: absolute;
    width: 100%;
    display: flex;
    pointer-events: none;
    align-items: center;
    justify-content: space-between;
    padding: calc(2px +  0.3%) calc(2px + 1%) calc(2px + 0.3%) calc(2px + 1%);
 
    z-index: 9997
}
#h .h1 {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(-110%)
}
.she {
    z-index: 9998;
    justify-content: flex-end
}
.she a {
    margin-left: auto;
    pointer-events: auto
}
#h.mixb {
    z-index: 500;
    mix-blend-mode: difference
}
#h.mixb .bn {
    pointer-events: none
}
#h.hcl,
.mix:not(.onav) #h {
    mix-blend-mode: difference
}
#h>*:not(#n) {
    pointer-events: auto;
    z-index: 10
}
#h>.r {
    margin-left: auto;
    display: flex;
    align-items: center
}
#h .pho {
    font-size: calc(14px + 3 * (100vw - 320px)/1080);
    font-weight: 800;
    color: #ffffff;
    display: inline-block;
    margin-right: 20px;
    opacity: 0;
    visibility: hidden;
    left: 30px;
    transition: .6s .1s
}
#h .pho i {
    margin-right: 10px
}
.onav #h .pho {
    opacity: 1;
    left: 0;
    visibility: visible;
    transition: .6s .5s
}
#h .lg {
    width: calc(160px + 30 * (100vw - 320px)/1080);
    display: block;
    transition: .4s
}
#h .logo {
    width: 100%;
    overflow: hidden;
    transition: width .4s, opacity .2s
}
html:not(.creaOpen) .fix:not(.onav) #h:not(:hover) .logo {
    width: 20.2%
}

html:not(.creaOpen) .fix:not(.onav) #h {
    background-color: white;
    -webkit-box-shadow: -2px 9px 5px -8px rgb(179 175 179);
    -moz-box-shadow: -2px 9px 5px -8px rgba(179,175,179,1);
    box-shadow: -2px 9px 5px -8px rgb(179 175 179);
}


#h .logo svg {
    fill: #ffffff;
    transition: fill .4s;
    width: calc(160px + 30 * (100vw - 320px)/1080)
}


 







body[class*=blck-]:not(.onav) #h .logo svg,
body:not(.onav) #h.blck-1 .logo svg {
    fill: #000
}
body[class*=whte-]:not(.onav) #h .logo svg {
    fill: #ffffff!important
}
.bn {
    transition: opacity .2s;
    cursor: pointer;
    width: calc(55px + 7 * (100vw - 320px)/1080);
    height: calc(55px + 7 * (100vw - 320px)/1080);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center
}
.bn>img {
    width: calc(40px + 4 * (100vw - 320px)/1080);
    height: 100%;
}
.bn>div>span {
    transition: background .4s;
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #ffffff
}
body[class*=blck-]:not(.onav) .bn>div>span,
body:not(.onav) #h.blck-1 .bn>div>span {
    background-color: #000
}
body[class*=whte-]:not(.onav) .bn>div>span {
    background-color: #ffffff
}
.bn>div>span:nth-child(1) {
    top: 0;
    transition: background .4s, top .2s .2s, transform .2s
}
.bn.clos>div>span:nth-child(1),
html.creaOpen .bn>div>span:nth-child(1) {
    top: 4px;
    transform: rotate(45deg)
}
.onav .bn>div>span:nth-child(1),
.bn.closH>div>span:nth-child(1) {
    top: 4px;
    transform: rotate(45deg);
    transition: background .4s, bottom .2s, transform .2s .2s
}
.onav:not(.fonav) .bn:hover>div>span:nth-child(1) {
    transform: rotate(0);
    transition: background .4s, transform .2s;
   /* position: absolute;
    z-index: 9000;*/
}
.bn>div>span:nth-child(2) {
    bottom: 0;
    transition: background .4s, bottom .2s .2s, transform .2s
}
.bn.clos>div>span:nth-child(2),
html.creaOpen .bn>div>span:nth-child(2) {
    bottom: 4px;
    transform: rotate(-45deg)
}
.bn.closH>div>span:nth-child(2),
.onav .bn>div>span:nth-child(2) {
    bottom: 4px;
    transform: rotate(-45deg);
    transition: background .4s, bottom .2s, transform .2s .2s
}
.onav:not(.fonav) .bn:hover>div>span:nth-child(2) {
    transform: rotate(0);
    transition: background .4s, transform .2s
}
.bn svg {
    mix-blend-mode: normal;
    pointer-events: none;
    transition: all .8s, opacity 0s .8s;
    stroke-linecap: round;
    stroke-dasharray: 0 999;
    fill: transparent;
    stroke-width: 4px;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0
}
.onav .bn svg,
.bn:hover svg {
    stroke-dasharray: 300 999;
    opacity: 1;
    transition: all .8s, opacity 0s;
    transform: rotate(90deg)
}
#we:not(.r) {
    z-index: 100;
    overflow: hidden;
    width: 100%;
    height: 100vh;
    /*background: linear-gradient(120deg, #000, #09080b);*/
    color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(50px + 5%) 0
}
#we .wec {
    width: 70%;
    z-index: 10
}
#we .wec .h1 {
    margin-top: calc(25px + 15 * (100vw - 320px)/1080);
    margin-bottom: calc(-5px - 10 * (100vw - 320px)/1080);
    font-size: calc(18px + 1 * (100vw - 320px)/1080);
}
#we .wec .h1 h1 {
    font-weight: 800
}
#we .wem {
    font-size: calc(25px + 50 * (100vw - 320px)/1080);
    font-weight: 800;
    line-height: 1.4;
    white-space: nowrap;
    margin-top: calc(15px + 2%);
    margin-bottom: calc(30px + 4%)
}
#we .wem>div {
    overflow: hidden;
    margin-bottom: calc(0px - 15 * (100vw - 320px)/1080)
}
#we .wem>div>div {
    display: flex;
    align-items: left;
}
#we .wem .wew {
    display: inline-block;
    width: 100%;
    color: transparent;
    height: 100%;
    overflow: hidden
}
#we .wem .wew>div {
    transform: translateY(0%);
    position: absolute;
    top: 0
}
#we .wem .wew>div.active {
    transform: translateY(0%);
	
}
#we .tc svg {
    fill: #ffffff
}
#we .screen {
    pointer-events: none;
    position: absolute;
    right: calc(-25px - 30 * (100vw - 320px)/1080);
    width: calc(500px + 300 * (100vw - 320px)/1080);
    top: 47%;
    transform: translateY(-50%);
    z-index: 0
}
#we .screen .sc {
    width: 100%
}
#we .screen .kb {
    width: 60%;
    position: absolute;
    bottom: -2%;
    left: 3%
}
#we .screen .ms {
    width: 17%;
    position: absolute;
    bottom: -8%;
    left: 55%
}
#we .sm {
    overflow: hidden;
    padding: 10px;
    z-index: 100;
    width: 65.6%;
    height: 57%;
    background-color: #110f16;
    position: absolute;
    top: 22.7%;
    left: 21%;
    transform: rotateY(6deg) skewY(26.4deg) skewX(-10.5deg);
    border-radius: 3px
}
#we .sm:before {
    z-index: 100;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    content: ''
}
#we .sm * {
    position: absolute;
    border-radius: 3px
}
#we .smc {
    height: calc(100% - 30px);
    top: 15px;
    width: calc(100% - 30px);
    left: 15px
}
#we .smc .smc_h {
    background-color: #000;
    width: 100%;
    top: 0;
    height: 13%
}
#we .smc .smc_lg1 {
    left: 3.5%;
    height: 8%;
    top: 5%
}
#we .smc .smc_lg>div {
    width: calc(7px + 5 * (100vw - 320px)/1080);
    height: calc(10px + 5 * (100vw - 320px)/1080);
    border-radius: 50%
}
#we .smc .smc_lg>div:nth-child(2) {
    left: calc(10px + 5 * (100vw - 320px)/1080)
}
#we .smc .smc_lg>div:nth-child(3) {
    left: calc(20px + 10 * (100vw - 320px)/1080)
}
#we .smc .smc_u {
    height: 1.3%;
    top: 6%;
    right: 5%;
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: space-between
}
#we .smc .smc_u li {
    position: relative;
    width: 20%;
    height: 100%
}
#we .smc .smc_u div {
    width: 100%;
    height: 100%;
    background-color: #24212d;
    right: 0;
    top: 0
}
#we .smc .smc_h {
    background-color: #000;
    width: 100%;
    top: 0;
    height: 13%;
    display: flex;
    align-items: center
}
#we .smc .smc_s {
    width: 100%;
    top: 15%;
    height: 50%;
    display: flex;
    align-items: center
}
#we .smc .smc_s>div {
    width: 80%;
    height: 30%;
    left: 10%
}
#we .smc .smc_s-sub {
    background-color: #24212d;
    width: 30%;
    top: 0;
    height: 6%;
    display: flex;
    align-items: center
}
#we .smc .smc_s-tit {
    width: 50%;
    top: 30%;
    height: 20%;
    display: flex;
    align-items: center
}
#we .smc .smc_s-tit.t2 {
    width: 40%;
    top: 60%;
    height: 20%;
    display: flex;
    align-items: center
}
#we .smc .smc_a {
    width: 20%;
    left: 0;
    height: 42%;
    background-color: #000;
    top: 65%
}
#we .smc .smc_a-c {
    width: 18%;
    left: 1%;
    height: 40%;
    top: 65%;
    z-index: 5;
    padding: 10px
}
#we .smc .smc_a-c li {
    width: 80%;
    height: 2%;
    background-color: #24212d;
    position: relative;
    margin-top: 10%
}
#we .smc .smc_a-c li.fi {
    width: 100%;
    margin-top: 20%
}
#we .smc .smc_c4 {
    width: 41%;
    right: 50%;
    height: 30%;
    background-color: #000;
    top: 135%
}
#we .smc .smc_c1 {
    width: 78%;
    height: 42%;
    background-color: #000;
    top: 65%
}
#we .smc .smc_cv div {
    width: 100%;
    height: 1%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(20deg);
    transform-origin: center center;
    background-color: #24212d
}
#we .smc .smc_cv div:nth-child(2) {
    transform: translate(-50%, -50%) rotate(-20deg)
}
#we .smc .smc_c4 div {
    transform: translate(-50%, -50%) rotate(30deg)
}
#we .smc .smc_c4 div:nth-child(2) {
    transform: translate(-50%, -50%) rotate(-30deg)
}
#we .smc .smc_c2 {
    width: 50%;
    height: 20%;
    left: 5%;
    background-color: #110f16;
    top: 95%
}
#we .smc .smc_c3 {
    width: 40%;
    height: 50%;
    left: 10%;
    top: 100%
}
#we .smc .smc_c3 div {
    position: relative;
    margin-top: 3%;
    width: 100%;
    height: 1%;
    position: relative;
    background-color: #24212d
}
#we .smc .smc_c3 div.fi {
    height: 2%
}
#we .smc .smc_c3 div.fim {
    width: 80%
}
#we .smc .smc_c3 div.fim+.fi {
    margin-top: 15%
}
#we .smc .smc_c3 div.fi+div:not(.fi) {
    margin-top: 6%
}
#we .smc .smc_ul {
    display: flex;
    top: 175%;
    width: 100%;
    height: 35%;
    left: 1%
}
#we .smc .smc_ul div {
    position: relative;
    height: 100%;
    width: 33.33%;
    max-width: 33.33%;
    flex-basis: 33.33%
}
#we .smc .smc_ul div>span {
    display: block;
    width: 0;
    height: 100%;
    background-color: #000;
    position: relative
}
#we .smc .smc_ul span>span {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    display: block;
    border: 2px solid #ffffff;
    width: calc(30px + 20 * (100vw - 320px)/1080);
    height: calc(35px + 20 * (100vw - 320px)/1080)
}
#we .smc .smc_f {
    width: 100%;
    height: 1px;
    top: 226%;
    left: 0%
}
#we .smc .smc_f>div {
    width: 40%;
    height: 3px;
    background-color: #24212d;
    left: 48%;
    transform: translateX(-50%)
}
#we .smc .smc_f>div:nth-child(2) {
    width: 25%;
    top: calc(7px + 3 * (100vw - 320px)/1080)
}
#we .smc .smc_lg2 {
    left: 44%;
    height: 8%;
    top: 218%
}
#we .down {
    height: 70px;
    width: 2px;
    background-color: #ffffff;
    margin-top: calc(30px + 3%)
}

.videoBack{position: absolute;
    height: 100vh;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;}
video {
    object-fit: cover;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
  }

.heading-two{
	font-size: calc(25px + (50 * (100vw - 320px)) / 1080);
}

/************* work **************/

[data-work] {
    pointer-events: auto;
    cursor: pointer
}
#wr {
    display: none;
    position: fixed;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 8888;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    text-align: center
}
#wr .bg {
    position: absolute;
    bottom: 0;
    height: 0;
    width: 100%;
    opacity: 1;
    background: linear-gradient(120deg, #000, #09080b);
    border-radius: 3px
}
#wr .wrc {
    position: absolute;
    width: 1000px;
    height: 600px;
    z-index: 1;
    border-radius: 3px;
    overflow: hidden
}
#wr .wrb {
    z-index: 10;
    padding: calc(25px + 5%);
    height: 100%
}
#wr .wrb h2 {
    font-size: calc(25px + 15 * (100vw - 320px)/1080);
    font-weight: 800;
    line-height: 1.3;
    overflow: hidden
}
#wr .wrb h2 span {
    display: inline-block
}
#wr .wrb h3 {
    font-size: calc(17px + 8 * (100vw - 320px)/1080);
    font-weight: 200;
    margin-bottom: calc(25px + 3%)
}
#wr .wrb h4 {
    font-size: calc(16px + 6 * (100vw - 320px)/1080);
    font-weight: 800
}
#wr .wrl {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 5px;
    border-top: 1px solid rgba(255, 255, 255, .01);
    background: rgba(0, 0, 0, .1)
}
#wr .wrl .line {
    position: absolute;
    width: 0;
    height: 4px
}
#wr .wrp {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 0;
    top: 0
}
#wr .wrp ul {
    margin-top: calc(15px + 2%);
    font-size: calc(12px + 2 * (100vw - 320px)/1080);
    display: flex;
    white-space: nowrap
}
#wr .wrp ul li {
    paddin: 0 10px 10px
}
#wr .ckb {
    transition: .2s;
    padding: calc(15px + 1%) calc(20px + 1%) calc(13px + 1%);
    font-weight: 800;
    display: inline-block;
    border: 2px solid transparent;
    background: rgba(0, 0, 0, .2);
    border-radius: 3px;
    cursor: pointer;
    user-select: none;
    -moz-user-select: none
}
#cl {
    color: #000;
    transition: color .8s .3s;
    text-align: center;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 9999;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center
}
.wcl #cl {
    color: #ffffff;
    pointer-events: none
}
#cl .clc {
    z-index: 5;
    display: none
}
#cl .tit {
    z-index: 10;
    overflow: hidden;
    font-weight: 800;
    font-size: calc(18px + 30 * (100vw - 320px)/1080);
    line-height: 1.2;
    letter-spacing: -1px;
    margin-bottom: calc(10px + 5 * (100vw - 320px)/1080)
}
#cl .tit>* {
    display: inline-block
}
#cl .tit .s2 {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    text-align: center;
    transform: translateY(100%)
}
#cl p {
    font-size: calc(13px + 4 * (100vw - 320px)/1080)
}
#cl .logo {
    display: none;
    z-index: 5;
    width: calc(100px + 20 * (100vw - 320px)/1080);
    position: absolute;
    bottom: calc(15px + 10 * (100vw - 320px)/1080);
    left: 50%;
    transform: translateX(-50%)
}
#cl .logo svg {
    transition: fill .8s .2s;
    fill: #000
}
html:not(.ie) #cl .logo svg {
    height: 20px
}
.wcl #cl .logo svg {
    fill: #ffffff
}
#cl .bg {
    z-index: 1;
    background-color: red;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 0;
    left: 0;
    overflow: hidden
}
#cl .bg>div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh
}
#cl .clb {
    margin-top: calc(25px + 10 * (100vw - 320px)/1080)
}
#cl [data-color] {
    transition: 0s!important;
    width: calc(30px + 5 * (100vw - 320px)/1080);
    height: calc(30px + 5 * (100vw - 320px)/1080);
    background-color: #000;
    display: inline-block;
    margin: 0 6px;
    border-radius: 50%;
    cursor: pointer
}
#cl [data-color]:before {
    opacity: 0;
    transition: .2s;
    position: absolute;
    border-radius: 50%;
    border: 2px solid #000;
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    left: -4px;
    top: -4px;
    content: ''
}
#cl [data-color]:hover:before {
    opacity: 1
}
#ld {
    text-align: center;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center
}
#ld .bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0
}
#ld .logo {
    width: calc(180px + 100 * (100vw - 320px)/1080);
    z-index: 5;
    overflow: hidden
}
#ld .logo svg {
    fill: #ffffff
}
#n {
    color: #ffffff;
    display: none;
    position: absolute;
    height: 100vh;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 5
}
.onav #n {
    pointer-events: auto
}
#n>* {
    width: 50%;
    height: 100%
}
#n>*>* {
    z-index: 5
}
#n .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    z-index: 0
}
#n .nr .bg {
    top: auto;
    bottom: 0;
    left: auto;
    right: 0
}
#n .nr .bg {
    background: linear-gradient(to top, #000, #09080b)
}
#n .nl .bg {
    background: linear-gradient(to top, #000, #09080b)
}
#n .nl {
    display: flex;
    align-items: center;
    justify-content: center
}
#n .nl .nlc {
    width: 100%;
    font-weight: 800;
    font-size: calc(25px + 23 * (100vw - 320px)/1080);
    padding-left: calc(25px + 15%);
    line-height: 1.3
}
#n .nl nav li {
    overflow: hidden;
    margin-top: calc(10px + 5 * (100vw - 320px)/1080)
}
#n .nl nav li:nth-child(4) {
    display: none
}
#n .nl nav a {
    transition: color .3s;
    display: inline-block;
    transform: translateY(0%)
}
#n .nl nav a:hover {
    color: #000
}
#n .ms {
    transform: translateY(50px);
    opacity: 0;
    flex-wrap: wrap;
    padding: 0 calc(15px + 1%);
    display: flex;
    font-weight: 400;
    font-size: calc(11px + 2 * (100vw - 320px)/1080);
    position: absolute;
    bottom: calc(10px + 10 * (100vw - 320px)/1080);
    left: 0;
    text-align: center;
    justify-content: center;
    width: 100%
}
#n .ms li {
    margin-bottom: 10px
}
#n .ms li:not(:last-child):after {
    content: '';
    width: 3px;
    height: 3px;
    background: rgba(255, 255, 255, .5);
    display: inline-block;
    margin: 0 10px;
    border-radius: 50%;
    top: -2px
}
#n .ms a:hover {
    color: #000
}
#n .nr {
    display: flex;
    align-items: center
}
#n .nr .nrc {
    padding: 0 calc(25px + 15%)
}
#n .nr .art li {
    margin-top: calc(25px + 5%)
}
#n .nr .art a {
    transition: color .4s;
    line-height: 1.2;
    display: inline-block;
    font-size: calc(16px + 8 * (100vw - 320px)/1080);
    font-weight: 800
}
#n .nr .art a span {
    display: inline-block
}
#n .nr .art time {
    color: #888;
    opacity: .6;
    font-size: calc(12px + 2 * (100vw - 320px)/1080);
    display: block;
    margin-bottom: calc(15px + 1%)
}
#n .nr .tc svg {
    fill: #ffffff
}
#n .nr .rs {
    display: flex;
    font-size: calc(18px + 5 * (100vw - 320px)/1080);
    margin-top: calc(30px + 5%)
}
#n .nr .rs li+li {
    margin-left: 20px
}
#sv {
    min-height: 100vh
}
#sv .rg {
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%;
    padding-left: 55%
}
/*#sv .cir {
    width: 76vh;
    height: 76vh;
    border-radius: 50%;
    top: 12vh
}*/

#sv .cir{width:60vh;height:60vh; top:10vh; border-radius:50%;}
#sv .circ {
    position: absolute;
    /*top: 0;
    left: 0;*/
    top: 15%;
    left: 25%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    /*border: 1px solid #cdcccf*/
}
#sv .circm {
    width: 1px;
    height: 1px;
    position: absolute;
    top: 50%;
    left: 50%
}
#sv .rnd {
    width: 1px;
    height: 1px;
    position: absolute
}
/*#sv .rnd>div {
    width: calc(120px + 50 * (100vw - 320px)/1080);
    height: calc(120px + 50 * (100vw - 320px)/1080);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}*/

#sv .rnd > div{width:calc(600px + 50 * (100vw - 320px) / 1080);height:calc(600px + 50 * (100vw - 320px) / 1080);position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);} 


#sv .rnd>div>div {
    transform-origin: center center;
    /*box-shadow: 0 1px 3px 1px rgba(99, 0, 243, .2);*/
    width: 5%;
    height: 5%;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity:0 /* fidenet*/
}
#sv .rnd i {
    font-size: calc(50px + 30 * (100vw - 320px)/1080);
    color: #ffffff;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}
#sv .crc {
    position: absolute
}

#sv .rnd img { width:70%;height:70%;display:flex;align-items:center;justify-content:center;;position:absolute;top:15%;left:15%;}


#sv .crc>div {
    position: absolute;
    width: 100%;
    height: 100%
}
/*#sv .crc:nth-child(1) {
    height: 1px;
    width: 38vh;
    right: 0
}
#sv .crc:nth-child(1)>div {
    right: 0
}
#sv .crc:nth-child(1) .rnd {
    left: 0
}
#sv .crc:nth-child(2) {
    height: 38vh;
    width: 1px;
    bottom: 0
}
#sv .crc:nth-child(2)>div {
    bottom: 0
}
#sv .crc:nth-child(2) .rnd {
    top: 0
}
#sv .crc:nth-child(3) {
    height: 1px;
    width: 38vh;
    left: 0
}
#sv .crc:nth-child(3)>div {
    left: 0
}
#sv .crc:nth-child(3) .rnd {
    right: 0
}
#sv .crc:nth-child(4) {
    height: 38vh;
    width: 1px;
    top: 0
}
#sv .crc:nth-child(4)>div {
    top: 0
}
#sv .crc:nth-child(4) .rnd {
    bottom: 0
}*/ 


#sv .crc:nth-child(0) > div{right:0;}
#sv .crc:nth-child(0) .rnd{left:0;}
#sv .crc:nth-child(1) > div{right:0; }
#sv .crc:nth-child(1) .rnd{left:0;}
#sv .crc:nth-child(2) > div{right:0;}
#sv .crc:nth-child(2) .rnd{left:0;}
#sv .crc:nth-child(3) > div{right:0;}
#sv .crc:nth-child(3) .rnd{left:0;}

#sv .crc:nth-child(4) > div{right:0;}
#sv .crc:nth-child(4) .rnd{left:0;}

#sv .crc:nth-child(5) > div{right:0;}
#sv .crc:nth-child(5) .rnd{left:0;}


#sv .lgt {
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    padding-right: 50%;
    padding-left: 15%
}


/*#sv .lgt h3 {
    font-weight: 200;
    font-size: calc(18px + 10 * (100vw - 320px)/1080);
    line-height: 1.3
}
#sv .lgt h3 strong {
    font-weight: 800;
    display: block;
    font-size: 130%
}*/
#sv .lgt .tx {
    font-size: calc(14px + 2 * (100vw - 320px)/1080);
    width: 80%;
    line-height: 1.8;
    margin: calc(20px + 5%) 0;
}



#sv .lgb {
    height: 100vh
}
#sv .lgb5 {
    height: 25vh
}
.sp-5 {
    position: absolute;
    top: 0
}
.lgtxt {
    color: #ffffff;
    text-align: center;
    z-index: 100;
    height: 100%;
    display: flex;
    align-items: center;
    font-weight: 200
}
.lgtxt>div {
    width: 100%
}
.lgtxt h2 {
    margin: 0 auto calc(25px + 3%);
    font-weight: 200;
    font-size: calc(25px + 20 * (100vw - 320px)/1080);
    width: 90%
}
.lgtxt h2 strong {
    font-weight: 800
}
.lgtxt .step {
    white-space: nowrap;
    font-size: calc(50px + 50 * (100vw - 320px)/1080);
    font-weight: 700
}
.lgtxt .stepc {
    position: absolute;
    left: 100%
}
.lgtxt .stepc span {
    font-weight: 200;
    font-style: italic
}
.lgtxc {
    text-align: left;
    height: 100vh;
    min-height: 600px;
    max-height: 950px;
    display: flex;
    align-items: center
}
.lgtxc .ct>div {
    width: calc(50% - 100px);
    left: calc(50% + 100px)
}
.lgtxc h3 {
    font-size: calc(45px + 10 * (100vw - 320px)/1080);
    font-weight: 200
}
.lgtxc h3>* {
    display: block
}
.lgtxc h3>strong {
    font-weight: 800;
    line-height: 75px;

}
.lgtxc .txt {
    font-size: calc(12px + 2 * (100vw - 320px)/1080);
    width: 100%;
    font-weight: 200;
    line-height: 1.8;
    margin: calc(25px + 2%) auto 0;
    color: #ffffff
}
.lgtxc .txt strong {
    font-weight: 800
}
.lgtxt .tc {
    position: absolute;
    bottom: 0;
    margin-bottom: calc(15px + 30 * (100vh - 320px)/1080)
}
.lgtxt svg {
    fill: #ffffff
}
#co {
    padding: calc(30px + 8%) 0;
    text-align: center;
    color: #ffffff;
    z-index: 5000
}
#co .ct {
    z-index: 1
}
#co h2 {
    font-weight: 800;
    margin-bottom: calc(20px + 3%);
    line-height: 1.3
}
#co h2 small {
    font-size: calc(20px + 10 * (100vw - 320px)/1080)
}
#co h2 span {
    display: inline-block
}
#co h2 strong {
    font-weight: 200;
    overflow: hidden;
    font-size: calc(30px + 30 * (100vw - 320px)/1080);
    display: block;
    margin-bottom: 5px
}
#co fieldset {
    background: #ffffff;
    width: calc(300px + 100 * (100vw - 320px)/1080);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    min-height: 50px
}
#co fieldset+fieldset {
    margin-top: 27px
}
#co fieldset.txt {
    overflow: hidden;
    width: calc(400px + 100 * (100vw - 320px)/1080)
}
#co fieldset>label {
    padding-top: 18px
}
#co fieldset.act>label {
    color: #ffffff;
    top: -15px;
    padding-top: 0;
    font-weight: 800;
    font-size: 12px
}
#co fieldset.act>textarea {
    color: #000;
    max-height: 250px;
    overflow: visible
}
#co fieldset.act>input {
    color: #000
}
#co fieldset+.btfb button {
    top: 10px!important
}
#co span.svg {
    position: absolute;
    width: 100%;
    left: 0;
    pointer-events: none
}
#co span.svg svg {
    width: 200px;
    height: 200px;
    max-width: 200px;
    margin: auto
}
#co .cls-1,
.cls-2,
.cls-3 {
    fill: #ffffff;
    opacity: 0
}
@keyframes fireworkone {
    0% {
        opacity: 0
    }
    25% {
        opacity: .15
    }
    50% {
        opacity: .3
    }
    75% {
        opacity: .15
    }
    100% {
        opacity: 0
    }
}
@keyframes fireworktwo {
    0% {
        opacity: 0
    }
    25% {
        opacity: .45
    }
    50% {
        opacity: .8
    }
    75% {
        opacity: .45
    }
    100% {
        opacity: 0
    }
}
@keyframes fireworthree {
    0% {
        opacity: 0
    }
    25% {
        opacity: .55
    }
    50% {
        opacity: 1
    }
    75% {
        opacity: .55
    }
    100% {
        opacity: 0
    }
}
.firework-icon .cls-1,
.firework-icon .cls-2,
.firework-icon .cls-3 {
    opacity: 0;
    animation-duration: 1s;
    animation-iteration-count: infinite
}
.firework-icon .cls-3 {
    animation-name: fireworthree;
    animation-delay: .11s
}
.firework-icon .cls-2 {
    animation-name: fireworktwo;
    animation-delay: .41s
}
.firework-icon .cls-1 {
    animation-name: fireworkone;
    animation-delay: .71s
}
@keyframes elastic-pulse {
    0% {
        transform: scale(.2)
    }
    100% {
        transform: scale(1)
    }
}
.img-firework {
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-name: elastic-pulse;
    animation-delay: 0s
}
#cof {
    padding: 0 calc(20px + 200 * (100vw - 320px)/1080);
    position: absolute;
    top: 15px;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 5;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center
}
.whte-99 #cof {
    pointer-events: auto
}
#cof form {
    width: 100%;
    padding: calc(25px + 10 * (100vw - 320px)/1080) 0;
    text-align: center
}
#cof .btf {
    transition: color .3s, background .3s, transform .3s;
    z-index: 100;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50%;
    background: rgba(0, 0, 0, .05);
    width: calc(40px + 10 * (100vw - 320px)/1080);
    height: calc(40px + 10 * (100vw - 320px)/1080);
    font-size: calc(15px + 5 * (100vw - 320px)/1080)
}
html:not(.mob) #cof .btf:hover {
    background-color: #ffffff
}
#cof .btf:active {
    transform: scale(.8)
}
#cof .times {
    top: -100px;
    opacity: 0;
    margin-bottom: calc(15px + 1%)
}
#cof .times:hover {
    transform: rotate(-90deg)
}
#cof .times:active {
    transform: scale(.8) rotate(-90deg)
}
#cof .btfb {
    display: flex;
    justify-content: center;
    margin-top: calc(15px + 1%);
    position: absolute;
    bottom: 0;
    width: 100%;
    transform: translateY(calc(100% + 15px))
}
#cof .btfb .btf {
    margin: 0 5px
}
#cof .tit {
    font-weight: 800;
    font-size: calc(18px + 18 * (100vw - 320px)/1080);
    overflow: hidden;
    line-height: 1.2
}
#cof .tit>div:not(.t1) {
    position: absolute;
    transform: translateY(100%);
    top: 0;
    width: 100%
}
#cof .fc {
    margin-top: calc(20px + 1%)
}
#cof .fm1 {
    z-index: 1
}
#cof .fm1>div {
    transition: height 1s!important
}
#cof .fc>div:not(.fm1) {
    z-index: 1;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none
}
#cof .fm2 {
    z-index: 0
}
#cof .slc {
    margin: 0 -5px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap
}
#cof .slc li {
    padding: 5px
}
#cof .slc3 li {
    width: 33.33%;
    max-width: 33.33%;
    flex-basis: 33.33%
}
#cof .slc li>div {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: rgba(0, 0, 0, .05);
    box-shadow: 0 15px 50px transparent;
    transition: all .4s, transform .2s;
    padding: calc(25px + 10 * (100vw - 320px)/1080) calc(20px + 10 * (100vw - 320px)/1080);
    cursor: pointer;
    border-radius: 30px
}
html:not(.mob) #cof .slc li>div:hover {
    background-color: #ffffff;
    box-shadow: 0 15px 50px rgba(0, 0, 0, .2)
}
#cof .slc li>div:active {
    transform: scale(.9)
}
#cof .slc i {
    opacity: .7;
    transition: transform .4s;
    display: inline-block;
    font-size: calc(45px + 10 * (100vw - 320px)/1080)
}
#cof .slc li>div:hover i {
    transform: scale(1.2) rotate(-5deg)
}
#cof .slc .t {
    font-size: calc(16px + 3 * (100vw - 320px)/1080);
    font-weight: 700
}
#cof .slc i+.t {
    margin-top: calc(15px + 5 * (100vw - 320px)/1080)
}
[data-range] {
    width: 30%;
    margin: calc(15px + .5%) auto calc(35px + 1%);
    height: 3px
}
[data-range]:before {
    content: "";
    position: absolute;
    top: 0;
    left: -10px;
    width: calc(100% + 20px);
    height: 100%;
    z-index: 0;
    background: rgba(0, 0, 0, .05);
    border-radius: 25px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .1) inset
}
[data-range] .ui-slider-range {
    opacity: .5;
    cursor: pointer;
    height: 100%;
    background-color: #000;
    border-radius: 25px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .05) inset
}
[data-range] .ui-slider-handle {
    cursor: grab;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: block;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%)
}
[data-range] .value {
    background-color: #ffffff;
    transition: .1s;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transform-origin: center bottom;
    font-size: 10px;
    padding-top: 15px;
    font-weight: 700;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-align: center;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 3px 10px rgba(0, 0, 0, .05)
}
[data-range] .both-max:before {
    opacity: 0;
    transition: .2s;
    width: 100%;
    text-align: center;
    content: 'ou +';
    position: absolute;
    bottom: 9px;
    left: 0;
    font-size: 9px
}
[data-range].maxi .both-max:before {
    opacity: 1
}
[data-range] .ui-state-active {
    cursor: grabbing;
    z-index: 9999;
    bottom: 100%
}
[data-range] .ui-state-active .value {
    transform: translate(-50%, -25%) scale(1.5)
}
#et {
    padding: calc(30px + 10%) 0;
    overflow: hidden;
    z-index: 4000
}
#et .swp {
    margin: 0 calc(-3px - 30 * (100vw - 320px)/1080)
}
#et .tc {
    left: -10px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    background-color: #ffffff;
    box-sizing: content-box;
    border: 5px solid #ffffff
}
#et .swiper-wrapper {
    cursor: grab
}
#et.premove .swiper-wrapper {
    cursor: grabbing
}
#et .sw {
    height: calc(300px + 300 * (100vw - 320px)/1080);
    max-height: 70vh;
    padding: 0 calc(6px + 60 * (100vw - 320px)/1080);
    cursor: grab
}
#et .cont {
    width: 100%;
    height: 100%;
    background-color: #ffffff
}
#et .bg {
    overflow: hidden
}
#et.move .bg {
    transform: scale(.9)
}
#et .bg:after {
    opacity: .5;
    content: '';
    background-color: #000
}
#et.move .bg:after {
    opacity: 0
}
#et .bg,
#et .bg>div,
#et .bg:after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}
#et .bg>div {
    height: 150%
}
#et.move .bg>div {
    transform: scale(1.1)
}
#et .txt {
    user-select: none;
    -moz-user-select: none;
    transition: opacity .8s!important;
    position: absolute;
    left: 0;
    top: 20px;
    width: 100%;
    height: 100%;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center
}
#et.move .txt {
    opacity: .2
}
#et .nm {
    white-space: nowrap;
    font-size: calc(35px + 65 * (100vw - 320px)/1080);
    text-align: center;
    font-weight: 800;
    color: #ffffff;
    z-index: 10;
    line-height: .9
}
#et .txt ul {
    margin-top: calc(10px + 5 * (100vw - 320px)/1080);
    color: #ffffff;
    display: flex;
    align-content: center;
    justify-content: center;
    font-size: calc(10px + 4 * (100vw - 320px)/1080);
    font-weight: 400
}
#et .txt ul li:not(:last-child):after {
    vertical-align: middle;
    margin: 0 7px;
    top: -1px;
    content: '';
    display: inline-block;
    width: 3px;
    height: 3px;
    background-color: #ffffff;
    border-radius: 50%
}
#f {
    overflow: hidden;
    font-size: calc(12px + 2 * (100vw - 320px)/1080);
    color: #5c5c5c;
    line-height: 1.5;
    padding: calc(30px + 3%) 0 calc(25px + 3%);
    font-weight: 700;
    background: linear-gradient(120deg, #000, #09080b)
}
#f .clo {
    display: flex;
    margin-top: calc(15px + 1%)
}
#f .clo button {
    width: 20px;
    height: 20px;
    border-radius: 50%
}
#f .clo button+button {
    margin-left: 8px
}
#f .clo button:before {
    transition: .2s;
    content: "";
    position: absolute;
    top: -3px;
    left: -3px;
    width: 26px;
    height: 26px;
    z-index: 0;
    border: 1px solid #ffffff;
    border-radius: 50%;
    opacity: 0
}
#f .clo button:hover:before {
    opacity: .2
}
#f .clo button.select:before {
    opacity: 1
}
#f .ct {
    display: flex
}
#f .l,
#f .lm {
    padding-right: calc(25px + 7%)
}
#f .r {
    margin-left: auto
}
#f .logo {
    fill: #ffffff;
    width: 200px;
    margin-bottom: calc(20px + 1%)
}
#f h4 {
    margin-top: 3px;
    font-size: calc(13px + 3 * (100vw - 320px)/1080);
    margin-bottom: calc(20px + 1%)
}
#f .inf {
    color: #ffffff;
    font-size: calc(20px + 3 * (100vw - 320px)/1080);
    line-height: 1.3;
    font-weight: 800
}
#f .inf>* {
    cursor: pointer;
    transition: color .3s
}
#f .rs {
    margin-bottom: calc(20px + 1%);
    display: flex;
    justify-content: space-between;
    font-size: calc(18px + 2 * (100vw - 320px)/1080)
}
#f .rs li+li {
    margin-left: calc(10px + 15 * (100vw - 320px)/1080)
}
#f .rs i {
    font-weight: 300
}
#f .r {
    text-align: right
}
#f .r a:hover {
    color: #ffffff
}
#f .ctbot {
    margin: calc(30px + 3%) 0 calc(-25px - 3%);
    font-size: 10px
}
fieldset {
    text-align: left;
    border: 0;
    background: rgba(0, 0, 0, .4);
    border-radius: 25px;
    height: 45px;
    font-size: 14px
}
fieldset ul {
    background: #ff4e4e;
    width: 35px;
    height: 35px;
    position: absolute;
    right: 5px;
    top: 5px;
    border-radius: 50%;
    padding: 0
}
fieldset ul:before {
    font-family: 'font awesome 5 pro';
    content: '\f00d';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}
fieldset ul li {
    display: none
}
fieldset+fieldset {
    margin-top: 13px
}
fieldset>* {
    position: absolute;
    height: 100%;
    width: 100%;
    border: 0;
    padding: 16px 25px;
    resize: none
}
fieldset>label {
    transition: .2s;
    color: #6d6681
}
fieldset.act>label {
    height: 15px;
    padding-top: 0;
    font-size: 10px;
    top: -4px
}
fieldset.txt {
    height: auto;
    min-height: 45px
}
fieldset textarea {
    position: relative;
    overflow: hidden
}
.tp {
    overflow: hidden;
    text-align: center;
    padding-top: calc(80px + 4%);
    background: linear-gradient(120deg, #000, #09080b);
    color: #ffffff
}
.tp .ct {
    z-index: 5;
    padding: calc(50px + 2%) 0
}
.tp .sub {
    margin-bottom: calc(15px + 5 * (100vw - 320px)/1080);
    font-size: calc(11px + 1 * (100vw - 320px)/1080);
    text-transform: uppercase;
    letter-spacing: calc(5px + 6 * (100vw - 320px)/1080)
}
.tp .h1 {
    font-weight: 800;
    font-size: calc(20px + 20 * (100vw - 320px)/1080);
    margin-bottom: calc(5px + 10 * (100vw - 320px)/1080)
}
.tp .bg {
    opacity: .08;
    filter: blur(5px) grayscale(1);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0
}
#err {
    height: 100vh;
    color: #ffffff;
    display: flex;
    align-items: center
}
#err .smile {
    font-weight: 800;
    font-size: calc(50px + 15 * (100vw - 320px)/1080)
}
#err .error-code {
    font-weight: 800;
    font-size: calc(18px + 8 * (100vw - 320px)/1080);
    margin: calc(25px + 2%) 0 calc(10px + .5%)
}
#err p {
    line-height: 1.3;
    font-size: calc(13px + 3 * (100vw - 320px)/1080);
    margin-bottom: calc(25px + 2%)
}
.def h2 {
    font-size: calc(17px + 7 * (100vw - 320px)/1080)
}
.def h3 {
    font-size: calc(15px + 5 * (100vw - 320px)/1080);
    font-weight: 400
}
.def h4 {
    font-size: calc(14px + 5 * (100vw - 320px)/1080);
    font-weight: 800
}
.def *+figure,
.def *+h2,
.def *+h3 {
    margin-top: calc(30px + 5 * (100vw - 320px)/1080)
}
.def *+h4 {
    margin-top: calc(25px + 5 * (100vw - 320px)/1080)
}
.def *+.p {
    margin-top: calc(20px + 5 * (100vw - 320px)/1080)
}
.def .p {
    font-weight: 400;
    font-size: calc(13px + 1 * (100vw - 320px)/1080);
    line-height: 1.6;
    color: #3f3b48
}
.def .p strong {
    display: inline
}
.def .p>*+* {
    margin-top: calc(15px + 5 * (100vw - 320px)/1080)
}
.def .p ul li {
    padding-left: 15px
}
.def .p ul li+li {
    margin-top: 10px
}
.def .p ul li:before {
    content: '•';
    position: absolute;
    left: 0
}
.shre {
    margin-top: calc(25px + 2%);
    padding-top: calc(20px + .5%);
    border-top: 1px solid rgba(0, 0, 0, .08);
    display: flex;
    font-weight: 800;
    font-size: calc(13px + 3 * (100vw - 320px)/1080)
}
.shre ul {
    margin-left: 15px;
    font-weight: 400;
    font-size: calc(15px + 3 * (100vw - 320px)/1080);
    display: flex;
    align-items: center
}
.shre ul li+li {
    margin-left: 10px
}
.hspan span {
    display: block;
    white-space: nowrap
}
.hspan>span {
    line-height: 1.2;
    overflow: hidden;
    margin-bottom: calc(0px - 5 * (100vw - 320px)/1080)
}

#nuestrastecno{
padding-bottom: 2px;
    margin-top: -150px;
	
}
#desarrollobloques .bloques{
	padding-bottom: 40%!important;
}
@media screen and (min-width: 1750px) {
	.circuloodoo{
	transform: scaleX(1.2) scaleY(1);
	}
}
@media screen and (max-width: 1200px) {
	#desarrolloiconotipo{
	top: 8rem;
    left: -4rem;
	}
}
@media screen and (min-width: 0px) and (max-width: 420px) {
	.arco{
	top: 38rem;
    width: 44rem!important;
    bottom: 0px!important;
    right: -4rem!important;
}
	#comunicacioniconotipo {
    top: 4rem;
    left: 4rem;
    margin-top: 0rem;
    width: 23rem;
}
	.lazodesarrollo{
      top: 40rem;
    height: 24rem;
    right: -70px!important;
	}
	#desarrolloiconotipo {
       top: -17rem;
    width: 26rem;
    left: 1rem;

	}
	.circuloodoo{
		width: 20rem!important;
    top: 32rem!important;
	}
	.imgodoo {
    width: 15rem!important;
    top: 5rem!important;
    left: 6rem!important;
}

	
}
@media screen and (min-width: 420px) and (max-width: 569px) {
	.arco{
width: 44rem!important;
        bottom: -20px!important;
    right: -4rem!important;
    transform: scaleX(1.2) scaleY(1);
}
	.lazodesarrollo{
      top: 38rem;
    height: 24rem;
    right: -70px!important;
	}
	#desarrolloiconotipo {
   top: -15rem;
    width: 22rem;
    left: 3rem;
	}
	.circuloodoo{
		width: 23rem!important;
    top: 32rem!important;
	}
	.imgodoo {
    width: 18rem!important;
    left: 5rem!important;
    top: 4rem!important;
}

}

@media screen and (min-width: 569px) and (max-width: 991px) {
	.arco{
	width: 44rem!important;
    bottom: -130px!important;
    right: -4rem!important;
    transform: scaleX(1.2) scaleY(1);
}
	#desarrolloiconotipo {
    top: -16rem;
    width: 30rem;
    left: 8rem;
	}
	.lazodesarrollo{
       top: 34rem;
    height: 24rem;
    right: -70px!important;
	}
	.circuloodoo{
	    width: 22rem!important;
    top: 29rem!important;
	}
	.imgodoo {
        width: 18rem!important;
    left: 12rem!important;
    top: 4rem!important;
}
    
}





@media screen and (min-width: 992px) and (max-width: 1370px) {
	.arco{
    width: 44rem!important;
    bottom: 0px!important;
    right: -4rem!important;
}
}
@media screen and (min-width: 991px) and (max-width: 1429px) {
	.lazodesarrollo{
		  right: -12rem!important;
	}
}
@media screen and (min-width: 1430px) and (max-width: 1595px) {
	.lazodesarrollo{
		  right: 0rem!important;
	}
}



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

	
    #f .ct {
        width: 90vw
    }
    #f .l,
    #f .lm {
        padding-right: calc(20px + 5%)
    }
}


@media screen and (min-width: 1250px) {
.wew {
  height: 1.2em !important;
  margin-top: 1%;
}
	#we .wem .wew > div{
	height: 2em;
	}
}
@media screen and (max-width: 1250px) {
    #sv .rg {
        padding-left: 75%
    }
    #sv .lgt {
        padding-right: 35%
    }
}
@media screen and (max-width: 1084px) {
    .ct,
    #we .wec {
        width: 85vw
    }
    #f .ct {
        flex-wrap: wrap
    }
    #f .l {
        order: 10;
        padding-top: calc(15px + 1%);
        margin-top: calc(15px + 1%);
        border-top: 1px solid rgba(255, 255, 255, .05);
        width: 100%;
        max-width: 100%;
        flex-basis: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-right: 0
    }
    #f .logo {
        margin-bottom: 0
    }
    #f .l br {
        display: none
    }
    #f .clo {
        margin-top: 0
    }
    .afar {
        display: block
    }
    .afar .left {
        width: 100%;
        max-width: 100%;
        flex-basis: 100%;
        padding-right: 0
    }
    .afar .asi {
        padding-left: 0;
        border-left: 0;
        width: 100%;
        max-width: 100%;
        flex-basis: 100%
    }
    .afar .asi h3 {
        font-size: calc(17px + 8 * (100vw - 320px)/1080);
        border-top: 1px solid rgba(0, 0, 0, .08);
        margin-top: calc(25px + 2%);
        padding-top: calc(15px + 1%)
    }
    .afar .asi .lasc h4 {
        font-size: calc(16px + 5 * (100vw - 320px)/1080)
    }
    .afar .asi .gct {
        display: flex;
        align-items: center;
        margin: -7px
    }
    .afar .asi .gct>* {
        margin-top: 0;
        margin: 7px
    }
    #crea .cre {
        display: flex;
        flex-direction: column
    }
    #crea .cre .l {
        position: relative;
        width: 100%;
        height: auto;
        padding-bottom: calc(40px + 10 * (100vw - 320px)/1080)
    }
    #crea .cre .r {
        width: 100%;
        position: relative
    }
    #crea .cre .bca {
        display: inline-block;
        margin-right: 25px
    }
    .line-p span {
        font-size: 9px
    }
}
@media screen and (min-width: 901px) {
	
    #sv .rg>div {
        transform: none!important
    }
}
@media screen and (max-width: 950px) {
    html:not(.horiz) #app .app-c.appet {
        overflow: visible
    }
    .ec {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow: hidden
    }
    .ec>*:not(.cov) {
        height: auto
    }
    .ec section:not(.cov) {
        display: block
    }
    .ec section>.ct,
    .ec .pres .ct,
    .ec .part-2 .ct {
        padding: calc(45px + 50 * (100vw - 320px)/1080) 0;
        width: 85vw;
        margin: auto
    }
    .ec .cov .tc {
        left: 50%;
        transform: translateX(-50%)
    }
    .ec .tc i.awr {
        animation: arrowd 1s infinite linear
    }
    .ec .tc i:before {
        display: block;
        transform: rotate(90deg)
    }
    .ec .pres .info>div {
        width: 50%
    }
    .ec .mck {
        margin: 5vh auto
    }
    .ec .mck-5 {
        margin-bottom: -3vh
    }
    .ec .mck img {
        max-height: auto;
        max-width: 100%
    }
    .ec .mck.mck-1 {
        left: -10vw
    }
    .ec .mck.mck-3 {
        margin-top: -15vw
    }
    .ec .bga {
        width: 100%;
        height: calc(350px + 250 * (100vw - 320px)/1080)
    }
    .ec .bga>div {
        width: 100%;
        height: 150%
    }
    .ec .desc>div {
        width: 50%
    }
    .ec .tch {
        left: 50%;
        top: 0
    }
    .ec .tch+.ct {
        padding: calc(70px + 20 * (100vw - 320px)/1080) 0
    }
    .line-ec {
        height: 2px
    }
    .ec .part-lg .ct {
        display: block
    }
    .ec .part-lg .lgs {
        flex-direction: column;
        margin: calc(30px + 3%) auto calc(50px + 200 * (100vw - 320px)/1080);
        margin-left: 0
    }
    .ec .part-lg .lgs img {
        width: calc(350px + 200 * (100vw - 320px)/1080);
        max-width: 85%;
        margin-left: auto;
        margin-right: auto
    }
    .ec .part-lg .lgs img+img {
        margin-top: calc(40px + 3%)
    }
    .ec .resul .chif {
        flex-wrap: wrap;
        margin-top: 10px
    }
    .ec .resul .chif>div {
        width: 50%;
        max-width: 50%;
        flex-basis: 50%;
        margin-right: 0;
        margin-top: calc(15px + 2%)
    }
    .ec .resul .nmb {
        margin: 0 calc(15px + 1%) 0 0
    }
    .ec section.nxt {
        width: 100%;
        height: 100vh;
        display: flex
    }
    #sv .rg {
        padding-left: 0!important;
        left: 0
    }
    #sv .rg>div {
        transform: translateY(-70%) rotate(-90deg);
        transform-origin: center center
    }
    #sv .rg .cir {
        top: 0;
        width: 100vw;
        height: 100vw
    }
    #sv .rg .rnd {
        transform: rotate(90deg)
    }
    #sv .lgt {
        padding: 30vw 0 0!important;
        text-align: center
    }
    #sv .lgt .tx {
        width: 100%;
        padding: 0 calc(20px + 5%);
        margin: calc(25px + 15 * (100vw - 320px)/1080) 0
    }
    #sv .crc:nth-child(1),
    #sv .crc:nth-child(3) {
        width: 50vw
    }
    #sv .crc:nth-child(2),
    #sv .crc:nth-child(4) {
        height: 50vw
    }
    #sv .lgt h3 strong {
        font-weight: 800;
        display: block;
        font-size: 130%
    }
    .eavl {
        text-align: center;
        margin-top: 0!important;
        position: relative;
        align-items: flex-end
    }
    .eavl h2 {
        display: none;
        transform: none!important;
        opacity: 1!important;
        width: 100%;
        top: 100vh;
        left: 0
    }
    .eavl .ct {
        width: 100%;
        text-align: center
    }
    .lgtxc .ct>div {
        width: 100%;
        left: 0;
        text-align: center
    }
    .cirbc svg,
    .cirbc .ico {
        top: 30%
    }
	
/**ICONOS WEB
	#sv .rnd>div>div svg {
   margin-left: -85%;
    margin-top: 30%;
    width: 45vw;
}*/
	/*Ocultamos iconos*/
	.lgtxc h3 {
    line-height: 20px;
	}
#Rectangulo_1{
	display: none;	
	}
	#Rectangulo_2{
		display: none;	
	}
	.move-icon{
	text-align: center;
	}

	.title-icon{
		font-size:20px;
	}
	
#afterscroll {
    padding-bottom: 0%!important;
}
#workonfidenet{
	margin-top: -16em!important;
	padding-right: 0%;
	}
	
/*.wpcf7-form p {
	margin: 20px 20px 20px 20px;
	
}*/
.wpcf7 input {
    width: 100%!important;
}
.wpcf7 textarea {
    width: 100%!important;
}		
.wpcf7 input[type="submit"]{
	width: 85%!important;
	text-align: start;
	}
	
/*#divenviarguay::before {
		left: 20px !important;
	}*/
}
@media screen and (max-width: 900px) {
    #n .nr {
        display: none
    }
    #n .nl {
        width: 100%;
        text-align: center
    }
    #n .nl .nlc {
        padding: 0 calc(20px + 3%);
        font-size: calc(25px + 30 * (100vw - 320px)/1080)
    }
    #n .nl nav li:nth-child(4) {
        display: block
    }
    #h .pho i {
        display: none!important
    }
    #cof {
        padding: 0 calc(10px + 60 * (100vw - 320px)/1080)
    }
}
@media screen and (min-width: 851px) {
    .lst>*.big {
        width: 100%;
        max-width: 100%;
        flex-basis: 100%
    }
    .lst .big>* {
        display: flex
    }
    .lst .big .lf {
        width: 50%;
        max-width: 50%;
        flex-basis: 50%;
        padding-right: 25px;
        margin-bottom: 0
    }
    .lst .big .rg {
        align-self: center;
        width: 50%;
        max-width: 50%;
        flex-basis: 50%;
        padding-left: 25px
    }
    .lst .big h2 {
        font-size: calc(24px + 15 * (100vw - 320px)/1080)
    }
}
@media screen and (max-width: 850px) {
    .lst>* {
        padding: calc(10px + 15 * (100vw - 320px)/1080) 20px
    }
    #crea .cre .l {
        padding-top: calc(90px + 30 * (100vw - 320px)/1080)
    }
    #crea .cre .l .lct .dte {
        margin-bottom: 0
    }
    #crea .cre .l .lct .p {
        display: none
    }
    #cn {
        width: calc(400px + 200 * (100vw - 320px)/1080);
        margin: 40vh auto 0;
        max-width: 100%
    }
    #map {
        width: 100%;
        height: 150vh;
        top: -40vh
    }
    #map:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        height: 50vh;
        width: 100%;
        z-index: 10;
        background: linear-gradient(to top, #000, rgba(0, 0, 0, 0))
    }
    #map .mapboxgl-control-container {
        display: none
    }
}
@media screen and (max-width: 800px) {
    #f .ct {
        width: 85vw
    }
    #f .logo {
        width: 150px
    }
    #f .ct>* {
        width: 100%;
        max-width: 100%;
        flex-basis: 100%
    }
    #f .rm,
    #f .lm {
        margin: 5px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-right: 0
    }
    #f h4 {
        margin-bottom: 0
    }
    #f .inf {
        font-size: calc(15px + 4 * (100vw - 320px)/1080)
    }
    #f .inf br {
        display: none
    }
    #f .tl:after {
        content: '-';
        margin-left: 5px;
        pointer-events: none;
        color: #ffffff!important
    }
    #f .r {
        padding-top: calc(15px + 1%);
        margin-top: calc(15px + 1%);
        border-top: 1px solid rgba(255, 255, 255, .05);
        width: 100%;
        max-width: 100%;
        flex-basis: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-right: 0
    }
    #f .rs {
        margin-bottom: 0
    }
    #sc {
        text-align: center
    }
    #sc .tc {
        margin: auto
    }
    #sc .ls li {
        margin-top: calc(40px + 10 * (100vw - 320px)/1080);
        width: 100%;
        max-width: 100%;
        flex-basis: 100%
    }
    #sc .ls .ic {
        margin: auto;
        width: calc(100px + 50 * (100vw - 320px)/1080);
        height: calc(100px + 50 * (100vw - 320px)/1080)
    }
    #sc .ic svg {
        stroke-width: 2px;
        opacity: 0
    }
    #sc i {
        font-size: calc(25px + 15 * (100vw - 320px)/1080)
    }
    #sc .ls.lsl>li {
        display: block;
        width: 50%;
        max-width: 50%;
        flex-basis: 50%;
        margin-top: calc(40px + 10 * (100vw - 320px)/1080)
    }
    #sc .ls.lsl .ic {
        margin-right: auto;
        margin-bottom: calc(20px + 5 * (100vw - 320px)/1080)
    }
    #sc .ls .p {
        margin-left: auto;
        margin-right: auto;
        width: 90%
    }
    .nvsw {
        justify-content: center
    }
	#et {
    padding-top: 115%!important;
	}
}
@media screen and (max-width: 780px) {
    #et .tc {
        top: 0;
        left: 50%;
        transform: translate(-50%, -50%)
    }
}
@media screen and (max-width: 750px) {
    #f .rm,
    #f .lm {
        margin: 0;
        display: block;
        text-align: center
    }
    #f .rm {
        margin-top: 15px;
        margin-bottom: 5px
    }
    #f .r {
        padding-top: 25px
    }
    #f h4 {
        margin-bottom: 5px
    }
    #f .inf {
        font-size: calc(14px + 10 * (100vw - 320px)/1080)
    }
    #f .l {
        flex-direction: column;
        padding-top: 25px
    }
    #f .clo {
        margin-top: 15px
    }
    .lst {
        margin-top: 5px
    }
    .lst>* {
        width: 100%;
        max-width: 100%;
        flex-basis: 100%
    }
    #a .gcat a i {
        font-size: calc(50px + 20 * (100vw - 320px)/1080);
        margin-bottom: 0
    }
    #a .gcat a span {
        display: none
    }
}
@media screen and (max-width: 700px) {
	
    .ec .resul .chif>div {
        width: 100%;
        max-width: 100%;
        flex-basis: 100%
    }
    .ec .pres .txt {
        font-size: calc(13px + 2 * (100vw - 320px)/1080)
    }
    .ec .sb {
        font-size: 10px;
        letter-spacing: 2px
    }
}
@media screen and (max-width: 680px) {
    .afar .asi .gct {
        flex-wrap: wrap
    }
    .afar .asi .gct>* {
        padding: calc(30px + 10 * (100vw - 320px)/1080) 15px
    }
    .afar .asi .gct a i {
        font-size: calc(30px + 5 * (100vw - 320px)/1080)
    }
    #we {
        align-items: flex-end
    }
    #sc h2 {
        font-size: calc(20px + 10 * (100vw - 320px)/1080)
    }
}
@media screen and (max-width: 600px) {
    #cof .slc li {
        width: 50%;
        max-width: 50%;
        flex-basis: 50%
    }
    #cof .slc li>div {
        padding: calc(20px + 10 * (100vw - 320px)/1080) calc(15px + 10 * (100vw - 320px)/1080)
    }
    #cof .slc li i {
        font-size: calc(40px + 10 * (100vw - 320px)/1080)
    }
    #cof .slc .t {
        font-size: calc(14px + 5 * (100vw - 320px)/1080)
    }
    .swe .nme {
        font-size: calc(30px + 15 * (100vw - 320px)/1080)
    }
    #eu .eui {
        height: calc(400px + 200 * (100vw - 320px)/1080)
    }
    .ec .desc {
        flex-wrap: wrap
    }
    .ec .desc>* {
        width: 100%;
        max-width: 100%;
        flex-basis: 100%
    }
    .ec .desc>*+* {
        margin-top: calc(25px + 2%)
    }
}
@media screen and (max-width: 550px) {
    #sc .ls.lsl>li {
        width: 100%;
        max-width: 100%;
        flex-basis: 100%
    }
    #h .pho {
        display: none
    }
}
@media screen and (max-width: 600px) {
    #cof .slc li>div {
        padding: calc(15px + 8 * (100vw - 320px)/1080) calc(10px + 8 * (100vw - 320px)/1080)
    }
    #cof .slc li i {
        font-size: calc(35px + 8 * (100vw - 320px)/1080)
    }
    #cof .slc .t {
        font-size: calc(13px + 4 * (100vw - 320px)/1080)
    }
}



.preloader {
    position: fixed;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 100%;
    bottom: 0;
    background-color: #fffbf4;
    z-index: 9998;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-shadow: inset .5px 0 0 0 #103a3a, inset -.5px 0 0 0 #103a3a;
    box-shadow: inset .5px 0 0 0 #103a3a, inset -.5px 0 0 0 #103a3a;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    overflow: hidden
}

.preloader:after,
.preloader:before {
    content: "";
    position: absolute;
    top: 0;
    width: 1.9444444444vw;
    z-index: 2;
    height: 100%;
    background-color: #fffbf4
}

@media(max-width:1023px) {

    .preloader:after,
    .preloader:before {
        width: 2.7777777778vw
    }
}

@media(max-width:767px) {

    .preloader:after,
    .preloader:before {
        width: 1.1111111111vw
    }
}

.preloader:after {
    left: 0
}

.preloader:before {
    right: 0
}

.preloader__year,
.preloader__year2 {
    font-size: 27.7777777778vw;
    opacity: 0
}

@media(max-width:767px) {

    .preloader__year,
    .preloader__year2 {
        font-size: 180px
    }
}

.preloader__text {
    position: absolute;
    bottom: 2.6388888889vw;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    opacity: 0
}

@media(max-width:767px) {
    .preloader__text {
        bottom: 24px;
        width: 300px;
        text-align: center;
        padding: 0 16px
    }
}

.preloader__text-line {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    height: .5px;
    background-color: #fff;
    position: relative;
    top: -.0694444444vw
}

.preloader__text-wrap {
    margin: 0 2.2222222222vw;
    white-space: nowrap
}

@media(max-width:767px) {
    .preloader__text-wrap {
        white-space: normal;
        margin: 0
    }
}

/*AGENCY*/
.agency-bg{
    background-image: url(https://fidenet.net/wp-content/uploads/2023/01/bienvenidos-a-la-ofi.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 900px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.orange-bg{
    background: linear-gradient(320deg, #ff7f22, #ff4141);   
    /*height: 550px;*/
}
.mt-7{
	margin-top: 7rem;
}
.agency-h1{
    font-size: 80px;
}
.agency-h2{
    font-size: 35px;
}
@media screen and (max-width:415px){
	.agency-h2{
		font-size: 25px;
	}
}
.section-black-h3{
    font-size: 35px;
}
.section-black-h4{
    font-size: 45px;
}

.title-h5{
    font-family: "Oswald";
    font-weight: bold;
}

.agency-step{
    font-family: "Oswald";
    font-size: 25px;
	color: #ffffff;
}

.title-gradient{
    background: linear-gradient(to right,#ff7f22,#ff4141);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.agency-title{
    font-size: 80px;
}

.agency-subtitle{
    font-size: 28px;
    line-height: 35px
}
@media screen and (max-width:415px){
	.agency-title{
		font-size: 60px;
	}
}

.bg-black{
    background-color: #000000;
    padding: 100px 0 100px;
}

.agency-orange{
    color: #EC663B;
}

@media screen and (max-width:980px){
#agency .d-flex{
    flex-direction: column;
}
}

/*odoo*/
.odoo-bg{
     background: linear-gradient(to right, #3F00E6, #7F00FD);   
    height: 835px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.title-grandient-odoo{
    background: linear-gradient(to right,#3F00E6,#7F00FD);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/*desarrollo*/
.desarrollo-bg{
     background: linear-gradient(to right, #22FCB0, #2181FA);   
    height: 835px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.title-grandient-desarrollo{
    background: linear-gradient(to right,#22FCB0,#2181FA);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/*comunicacion*/
.comunicacion-bg{
     background: linear-gradient(to right, #FC2169, #E221FF);   
    height: 835px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.comunicacion-encabezado{
    background-size: cover;
	height: 835px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.arco{
    position: absolute;
    z-index: 0;
    width: 50rem;
    right: 0;
    bottom: 0;
}
.desarrollo-encabezado{
height: 835px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.lazodesarrollo{
    position: absolute;
    z-index: 0;
    width: 50rem;
    right: 0;
}.odoo-encabezado{
height: 835px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.circuloodoo{
 position: absolute;
    z-index: 0;
    width: 32rem;
    right: 0;
    top: 15%;
}
.imgodoo{
    width: 18rem;
    left: 10rem;
}
.title-grandient-comunicacion{
    background: linear-gradient(to right,#FC2169,#E221FF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.mr-100{
    margin-right: 100px;
}
.bg-pink{
    background: linear-gradient(to right, #FC2169, #E221FF);   
	padding: 20px 0 150px 0;
}

/*error*/
.error-bg{
    height: 535px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}


/*desarrollo*/
.desarrollo-bg{
     background: linear-gradient(to right, #22FCB0, #2181FA);   
    height: 835px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.title-grandient-desarrollo{
    background: linear-gradient(to right,#22FCB0,#2181FA);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.move-img{
position: relative;
transition: transform 0.5s cubic-bezier(0.39, 0.58, 0.57, 1);
transform: translateX(0px);
}
.move-img:hover
{
transform: translateX(10px);
}

.move-img img
{
position: static;
z-index: 99;
}
.move-icon{
transition: transform 0.5s cubic-bezier(0.39, 0.58, 0.57, 1);
transform: translateX(0px);
}
.move-icon:hover
{
transform: translateX(10px);
}
.move-icon img
{
z-index: 99;
}



@media screen and (max-width:991px){
	
	//MOSTRAR ICONO
	.mob-none{
		display: none;
	}
	//CABECERAS
	
	.arco{
	display: none!important;
		width: 30px!important;
	}
	
	.fotoiconodesarrollo{
		    margin-top: 15rem;
	}
	
	
	.titulosubodoo{
    margin-top: -25rem;
	}
	
	.titulosmarketing{
    margin-top: -20rem;
	}
	.titulosubodoo{
	
    margin-top: -25rem;
	}
	//END CABECERAS

		
	.r {
    margin-left: -24%;
		
}
button.btn-close.text-reset {
    z-index: 1000;
}
	#lang_choice_polylang-2{
	font-size: 12px;
	}
.offcanvas-header.bg-light {
    margin-top: 10%;
	}
	.offcanvas-header.bg-light #h .logo {
    width: 50%;
	}
	.heading-two{
	line-height: 133%;
		font-size: 40px;
	}
	
	#we .wem {
    font-size: 40px;
	}
	.lgtxc .txt {
font-size:16px;
}
	#sv .lgt .tx {
    font-size: 16px;
	}
	#sv .lgt>div>p {
    font-size: 18px;
}
	.teimgainas strong {
    line-height: 50px!important;
}
	.comunicacion-bg{
	height: 650px;
	}
	#centramosiconos{
	text-align: center;
	}
	.mr-100{
	margin-right: 0!important;
	}
	#nuestrastecno{
	/*padding-top: 30%;*/
	}
	.odoo-bg{
	height: 650px;
	}
	#imagenesodoo p{
	font-size: 14px;
	}
	#ajustarworkodoo .workonfidenet{
	margin-top: -3em!important;
	}
	#bg-white-container-odoo .site-content.container.container-inside{
		padding-bottom: 0px!important;
	}
	.agency-bg{
		height: 500px; 
	}
	#mayoriaedad img{
	width: 100%;
	}
#agenciacontainermovil{
	padding-top: 0px!important;
	}
#atrabajarconnosotros #workonfidenet{
	margin-top: -4em!important;
	}
	#imgtrabajacon img{
		width: 250px;
		padding-top: 10%;
	}
	.fromulario#afterscroll>div {
    border-radius: 0px!important;
}
.codedropz-upload-handler{
	    margin-right: 8%;
	}
	.cf7sr-g-recaptcha {
    margin-left: 7%;
}
	label#telefono {
    margin-top: -8%;
}
#migasdepanportfloioblog{
	margin-top: -20%;
	}
	#nuestrosclientes {
    margin-top: 5%;
    padding-bottom: 0px!important;
	}
	
#desarrollotextos p {
    color: #342525;
}
	#serviciosdesarrollo {
    margin-top: 5%;
	}
	
#nuestrosclientesdesarrollo{
	margin-top: -20%;
	}
#laagenciamayoria {
    margin-bottom: -10rem!important;
}
.imagenarticulo{
height: 420px!important;
object-fit: cover;
}	
	.contenedorimagenrelacionada {
    margin-top: 5%;
	}
.textorelacionado a {
 
    font-size: 1.2em!important;
	}
.textorelacionado{
	    flex-direction: column;
	}
	.enmedio {
    width: 100%!important;
	}
}

/************* GENERAL **************/
.container-inside{
	margin-top:150px;
}
@media (max-width: 579px){
	.container-inside{
		margin-left: 0px;
		margin-right: 0px;
}
	
}

/************* breadcrumbs ****************/
.breadcrumbs-text{font-size: 15px;font-family:"Oswald";font-weight:bold;}
@media (max-width: 579px){
	.breadcrumbs{padding-left:20px;}
}
#breadcrumbs span a{font-size: 15px;font-family:"Oswald";}
#breadcrumbs span a:hover{color:#EC663B;}

/**************** portfolio ****************/
.header-content{
	position: absolute;
    width: 100%;
    bottom: 25px;
    left: 25px;
}
[data-vp-layout=tiles] .vp-portfolio__item-wrap .vp-portfolio__item{border-radius: 0 50px 50px 0;}
.vp-portfolio__items-style-fly .vp-portfolio__item-overlay{
	background: rgb(255,127,34);
	background: linear-gradient(90deg, rgba(255,127,34,1) 0%, rgba(255,65,65,1) 91%);
}
.vp-portfolio__items-style-fly .vp-portfolio__item-meta-title{
	font-size: 1.8em;
}
.vp-portfolio__items-style-default .vp-portfolio__item a:hover{
	color: #000000;
}
.vp-portfolio__item-meta-excerpt{
	font-family:"Lexend" !important;
}

.post-services{background-image: url(https://fidenet.net/wp-content/uploads/2023/01/bg-services.svg);background-position: center;padding: 60px;background-size: cover;background-repeat: no-repeat;}
.post-services h4{color:#ffffff;}
.post-services p{color:#ffffff;}
.pr-30{
	padding-right: 30px
}

.text-right{
	text-align: right;
}

.fidenews{
	font-size: 18px !important;
}
.cky-btn{
	font-family: "Lexend" !important;
}


/**MEDIA QUERIES*/
@media screen and (max-width:399px){
	/*Titulo #fidenews*/ 
	.fidenews {
    font-size: revert !important;
	}
	
		
	/*#sv .rnd>div>div svg {
    margin-left: 22%;
    width: 40vw;
    margin-top: 50%;
	}*/
}
@media screen and (min-width:951px) and (max-width:998px){
	.teimgainas{
		font-size: 4vw!important; 
		font-weight: 800!important; 
		line-height: 50px;
	}
}


#suscrinws p {
    margin: 0;
}

/**RELACIONADOS*/
.post-related {
    background-repeat: no-repeat;
    background-size: cover;
    padding: 20px;
}
/*#relacionados{
display: flex;
}
.entradarelacionada{
	width: 100%;
    height: 350px;
    border-radius: 0 50px 50px 0;
    margin-left: 2%;
    display: flex;
    align-content: space-around;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.cajaenlace{
width: 100%;
    margin-left: 1%;
}
.tituloentradarelacionada{
	visibility: hidden;
}
.cajaenlace:hover{
  transition: opacity 0.3s ease-in-out;
}*/
.wp-block-visual-portfolio.alignwide{
	display: none;
}
.contenedorimagenrelacionada {
  position: relative;
	
  /*width: 50%;*/
}

.imagenarticulo {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
    height: 350px;
    border-radius: 0 50px 50px 0;
	object-fit: cover;
}

.enmedio {
  width: 94%;
  height: 100%;
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.contenedorimagenrelacionada:hover .imagenarticulo {
  opacity: 0.3;
}

.contenedorimagenrelacionada:hover .enmedio {
  opacity: 1;
}

.textorelacionado {
  background: linear-gradient(to right,#ff7f22,#ff4141);
  width: 100%;
  height: 100%;
  color: white;
  font-family: 'Oswald';
  font-weight: bold;
  padding-left: 5%;
  padding-right: 5%;
  font-size: 1.8em;
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
	flex-wrap: wrap;
  border-radius: 0 50px 50px 0;
	flex-direction: column;
}
.textorelacionado a{
	 font-family: 'Oswald';
  font-weight: bold;
	font-size: 1.2em;
	color: white;
	    line-height: inherit;
}
.textorelacionado .cat {
      color: white;
    text-transform: uppercase;
    font-family: sans-serif;
    padding-bottom: 5%;
    font-size: large;
	
}


/**APARTADO PERSONALIZAR*/
.footer-background {
	position:relative;
	z-index:100
}


/* #dialog-window {
      height: 500px;
    padding-left: 10%;
}

#scrollable-content {
  height: 100%;
    overflow: auto;
    width: 70%;
    margin-left: 20%;
    padding: 0% 10% 10% 10%;
    overflow-y: auto;
}
#scrollable-content .mb-6{
   height: 400px;
}
div#scrollable-content::-webkit-scrollbar {
    display: none;
}*/
.ngr:before,
.ngr:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.ngr:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.ngr {
    *zoom: 1;
}
.bloque {
      width: 100%!important;
    padding: 0% 10% 0% 10%;
}
.contenido {
	/*width: 60%;*/
}
.contenido h1 {
  margin-top: 0;
}
.contenido p,
.workonfidenet p{
  
}
.workonfidenet {
	/*width: 40%;*/
	top: 40%!important;
	padding-bottom: 20%;
}
.workonfidenet h3 {
  margin: 0;
}
.contenido,
.workonfidenet {
  float: left;
}


/* The sticky */
.workonfidenet {
  /*position: -webkit-sticky;
  position: sticky;
  top: 15px;*/
	
}
#workonfidenet{
	transition: all 0.3s linear;
	padding-right: 15%;
}
.bloques{
    padding-bottom: 80%;
   /* padding-left: 20%;*/
}

@media (max-width: 515px){
.contenido {
	width: 100%;
}
	.workonfidenet {
			width: 100%;
		  position: inherit;
}
	.bloques{
    
    padding-left: 0%;
		padding-bottom: 40%;
}
	
}

@media (max-width: 901px){
	#consultoriaestrategiadigital{
		height: 660px!important;
	}
	#desarrolloamedidahastasuimplantacion{
		height: 520px!important;
	}
	#convertirmarketingycomunicacion{
		height: 520px!important;
	}
	#odooaccesibledesdecualquier{
		height: 380px!important;
}	
	/**
	 arreglar icono se ve mal home
	 * */
	.cirbc svg, .cirbc .ico {
   top: 10rem!important;
}
	.lgtxc .ct>div {
       margin-top: 35rem;
}
	.cirbc{
	    /*top: -9%!important;
    height: 110%!important;*/
	}
	.lgtxc{
		margin-top: 60%!important;
    max-height: 450px!important;
	}
	h3.teimgainas>strong {
    font-weight: 800;
    line-height: 38px!important;
    font-size: 2.8rem;
}
	.bloques {
		padding-top: 90%;
	}
	.section-black-h4{
		font-size: 40px!important;
	}
	.agency-h1 {
    font-size: 60px!important;
}
	.agency-title {
    font-size: 60px!important;
}
	.workonfidenet{
		text-align: left!important;
	}
	#imagenesodoo h5.title-h5.mb-3 {
    text-align: center;
    padding-top: 10%;
    padding-bottom: 5%;
}

label#politica {
    color: white;
	margin-left: 0%;
	font-family: 'Lexend';
}
	p#recapgoog {
    color: white;
		    font-size: 14px!important;
}
	.fromulario#afterscroll>div{
		margin-bottom: 0px!important;
	}
	
	.footer-background{
		    text-align: center;
	}
	#bootscore-navbar li a{
		color: black!important;
	}
}
/*.fade {
   margin: 50px;
  padding: 50px;
  background-color: lightgreen;
  transition: opacity 0.7s ease-in;
}

.fadeOut { opacity: 0; }
.fadeIn { opacity: 1; }*/

.vp-portfolio__item-meta-title a{
	    font-family: "Oswald" !important;
	font-size: 25px !important;
	font-weight: bold !important;
}
.vp-portfolio__items-style-default .vp-portfolio__item-meta>*{
	    margin-bottom: 1em !important;
}

.vp-filter__style-minimal .vp-filter__item>*{
	font-family: "Oswald" !important;
}
.vp-filter__style-minimal .vp-filter__item.vp-filter__item-active>*{
	color: #EC663B !important;
}
.vp-filter__style-minimal .vp-filter__item>a:hover{
	color: #EC663B !important;
}

.formulary {background-color: 'red'}
.cky-btn:last-child {
    margin-right: 0;
	background:linear-gradient(to right, #FF7F22, #3F00E6) !important;
    color: white!important;
		border: 0px;
}


/**COOKIES*/
.cky-btn-revisit-wrapper{
		background: linear-gradient(to right,#FF7F22,#FF4141)!important;
    color: white!important;

}
.cky-preference-content-wrapper .cky-show-desc-btn {
color: #ff5935!important;
}
.cky-always-active{
	    color: #ff5935!important;
}
.cky-accordion-header .cky-accordion-btn {
    color: #ff5935!important;
	
}
//Esconder powered by
div[data-cky-tag="detail-powered-by"] {
    /* color: white!important; */
    visibility: hidden!important;
}
.tablacookies {
    font-family: "Lexend";
}
.table-orange{
  background: linear-gradient(to right, #FF7F22, #3F00E6);
	font-family: 'Lexend';
}

.table-orange th {
	color: white;
}
.table-orange tr th {
    width: auto;
    white-space: nowrap;
}
table, td, blockquote, code, pre, textarea, input {
      
}

#we .wem .wew {
/*margin-top: 12px;*/
    /*line-height: calc(55px + (50 * (100vw - 320px)) / 1080);*/
	/*line-height: 100%*/
/*	margin-top: -4%;*/
}
.listafidenet{
    font-family: 'Lexend';
    font-weight: 300;
}
.listafidenet li:before {
    content: "· ";
		
}
.listafidenet li {
    line-height: 4ex;
}
.cky-revisit-bottom-left {
    display: none!important;
}



.wpcf7-form p label {
	font-size: 14px;
	font-family: 'Comfortaa';
	margin: 5px 10px;	
	width: 100%;
	
}

.c-grey{
	color: #00000050;
}
.formblack {
 color: white!important;
	
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea
{
	border-image: linear-gradient(to right, #ff7f22, #3F00E6);
	border-image-slice: 1;
	border-image-width: 0 0 2px 0; /* 2px determina la altura del borde inferior */
	border-image-outset: 0;
	border-image-repeat: stretch;
	height: 20px;
	width: 100%;
}

#wpcf7-f1180-p1275-o1 a{
	font-size: 12px !important;
}


.wpcf7 .wpcf7-submit:disabled {
	cursor: auto;
}

#divenviarguay::before {
	transition: .8s;
	z-index: 3;
	content: '';
	position: absolute;
	bottom: -10px;
	width: 40px;
	height: 3px;
	border-radius: 0 0 0 0;
	background: linear-gradient(185deg,#FF6633,#3F00E6) !important;
	left: calc(-1px - 1.5 * (100vw - 320px)/ 1080);
}

#divenviarguay:hover::before {
	width: 60px;
	border-radius: 50% 0 0 50% !important;
}

	
.wpcf7 input[type="submit"]
{
	font-family: 'Oswald';
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 3.2px;
	text-transform: uppercase;
	color: #000;
	outline: none;
	border: 0;
}

.wpcf7 input[type="submit"]:hover
{
	cursor: pointer;
}




.wpcf7 input[type="checkbox"]
{
	  
}
 #politica input#accceptance{
	cursor: pointer;
    background-color: #fff;
    width: 15px!important;
    height: 15px!important;
    appearance: none;
	     -webkit-appearance: checkbox;
    -moz-appearance: checkbox;
    appearance: checkbox;
}

.form-text {
	font-size: 25px;
}

.dot {
	height: 200px;
  width: 200px;
  background: linear-gradient(320deg, #ff7f22, #ff4141)!important;
  border-radius: 50%;
  display: inline-block;
}

.dot img {
	margin: 40px 30px 25px 35px;
}
/*VIEJO
.contenedormapa {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
	    height: 100%;
}*/

.contenedormapa {
    margin-top: 10%;
    height: 500px;
    top: 40;
    left: 0;
    bottom: 0;
    right: 0;
}

.contenidomapa {
 position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    opacity: 0.8;
    /* background-color: rgba(255, 255, 255, 0.8); */
    padding: 30px;
}
.cf7sr-g-recaptcha {
    margin-left: 2%;
}
/*img.logo.xs {
    width: 50%!important;
}*/
#suscrinws .cf7sr-g-recaptcha {
    margin-left: 0px!important;
}
label#politicatrabaja {
    color: #00000050;
	margin-left: 0%;
	font-family: 'Lexend';
}

#politicatrabaja input#accceptance{
	 cursor: pointer;
    border: 1px #00000050 solid;
    width: 15px!important;
    height: 15px!important;
    appearance: none;
	-webkit-appearance: checkbox;
-moz-appearance: checkbox;
appearance: checkbox;
}
#wpcf7-f3725-p46-o2 .wpcf7-response-output {
  color: white;
}
#wpcf7-f3064-p1411-o1 .wpcf7-response-output {
  color: white;
}

#sucribeformprobando .wpcf7-response-output{
	  color: white;

}

.wpcf7 input[name="acceptance-612"] {
  cursor: pointer;
  border: 1px black solid;
  width: 15px !important;
  height: 15px !important;
  appearance: none;
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox;
  appearance: checkbox;
}

.wpcf7 form .wpcf7-response-output {
	border: 0 !important;
	color: #FF7F22 !important;
	font-weight: 700 !important;
	margin-left: 0;
	padding-left: 0;
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: transparent;
}

#suscrinws p{
	margin: 1rem auto!important;
}

.vp-portfolio__item-meta-category::after {
	display: none;
}


.z-index {
	background-color: white !important;
}


@media (max-width: 767px) {
	.move-icon img {
		width: 50%	;
		padding-bottom: 5%;
	}
}