html {   color: #091633;   font-size: 1em;   line-height: 1.4; } ::-moz-selection {   background: #b3d4fc;   text-shadow: none; } ::selection {   background: #b3d4fc;   text-shadow: none; }  hr {   display: block;   height: 1px;   border: 0;   border-top: 1px solid #ccc;   margin: 1em 0;   padding: 0; }  audio, canvas, iframe, img, svg, video {   vertical-align: middle; }  fieldset {   border: 0;   margin: 0;   padding: 0; }  textarea {   resize: vertical; }  /* ==========================================================================    Browser Upgrade Prompt    ========================================================================== */  .browserupgrade {   margin: 0.2em 0;   background: #ccc;   color: #000;   padding: 0.2em 0; }  /* ==========================================================================    Fonts    ========================================================================== */  @font-face {   font-family: 'GT Walsheim Light';   src: url("/css/fonts/GT-Walsheim-Ultra-Light.eot");   src: url("/css/fonts/GT-Walsheim-Ultra-Light.eot?#iefix") format("embedded-opentype"), url("/css/fonts/GT-Walsheim-Ultra-Light.woff") format("woff"), url("/css/fonts/GT-Walsheim-Ultra-Light.ttf") format("truetype");   font-display: swap; } @font-face {   font-family: 'GT Walsheim Regular';   src: url("/css/fonts/GT-Walsheim-Light.eot");   src: url("/css/fonts/GT-Walsheim-Light.eot?#iefix") format("embedded-opentype"), url("/css/fonts/GT-Walsheim-Light.woff") format("woff"), url("/css/fonts/GT-Walsheim-Light.ttf") format("truetype");   font-display: swap; } @font-face {   font-family: 'GT Walsheim Medium';   src: url("/css/fonts/GT-Walsheim-Regular.eot");   src: url("/css/fonts/GT-Walsheim-Regular.eot?#iefix") format("embedded-opentype"), url("/css/fonts/GT-Walsheim-Regular.woff") format("woff"), url("/css/fonts/GT-Walsheim-Regular.ttf") format("truetype");   font-display: swap; } @font-face {   font-family: 'GT Walsheim Bold';   src: url("/css/fonts/GT-Walsheim-Bold.eot");   src: url("/css/fonts/GT-Walsheim-Bold.eot?#iefix") format("embedded-opentype"), url("/css/fonts/GT-Walsheim-Bold.woff") format("woff"), url("/css/fonts/GT-Walsheim-Bold.ttf") format("truetype");   font-display: swap; } body {   margin: 0;   padding: 0;   color: #000;   font-weight: normal;   -webkit-font-smoothing: antialiased; 	-moz-osx-font-smoothing: grayscale;   font-family: "GT Walsheim Regular", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; } b { font-weight: normal; font-family: "GT Walsheim Bold", "GT Walsheim Regular", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; }  /* GLOBAL --- */  .hidden{ display: none; } .bg-primary{ background-color: #FFCC00; } .bg-secondary{ background-color: #ffffff; } .bg-light{ background-color: #EBEBEB; } .bg-dark{ background-color:#1A1A1A; } .bg-gradient{ background-image: linear-gradient(45deg, #cf31ad, #ff3486, #ff615a, #ff982d, #ffcc00); } .bg-gradient-bis{ background-image: linear-gradient(135deg, #cf31ad, #ff3486, #ff615a, #ff982d, #ffcc00); }  .b-shadow{ box-shadow: 0 3px 2px -2px rgba(0,0,0,0.4); } .b-shadow-top{ box-shadow: 0 -3px 6px -2px rgba(0,0,0,0.6); }  .color-primary{ color: #000000; text-decoration: none; } .color-secondary{ color: #FFCC00; text-decoration: none; } .color-light{ color: #FFFFFF; text-decoration: none; } .color-dark{ color: #EBEBEB; text-decoration: none; } .gradient{    background: linear-gradient(45deg,#cf31ad, #ff3486, #ff615a, #ff982d, #ffcc00);   -webkit-background-clip: text;   -webkit-text-fill-color: transparent; }  html{ font-size: 100%; } body{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1{   margin: 0;   font-size: 4.3rem;   position: relative; } h2{   margin: 0;   font-size: 4.3rem;   line-height: 3.7rem;   position: relative; } h3{   margin: 0;   font-size: 1.3rem;   line-height: 1.3rem;   position: relative; } h3:after{   content:"";   background: #000000;   width: 25%;   height: 0.2rem;   position: absolute;   bottom: -1.5rem;   left: 0; } p{ margin: 0; }  .s-2{   margin: 0;   font-size: 2rem;   position: relative; }  /* STARS ANIMATION */ .stars-animation{   will-change: top;   position: absolute;   top: 0;   width: 100%;   height: 100%;   background-repeat: repeat;   background-position: 0 0;   pointer-events: none;   animation: move-stars 20s linear infinite;   background-image: url('/img/pictures/stars.svg?1'); } @keyframes move-stars {   0% {     background-position: 0 0;   }   100% {     background-position: 0 100%;   } }  /* CONTAINER --- */ .vmiddle{ display: flex!important; flex-direction: row; align-items: center; } .vbottom{ display: flex!important; flex-direction: row; align-items: flex-end; } .vtop{ display: flex!important; flex-direction: row; align-items: flex-start; } .wheight{ height: 100%; min-height: 380px;} .wide{ position: relative; z-index: 3; margin: 0; padding: 0; border: 0; width: 100%; display: block; overflow: hidden;  } .container{ margin: 0 auto; border: 0; width: 100%; max-width: 1024px; display: block; position: relative; text-align: left; } .container-full{ margin: 0 auto; border: 0; width: 100%; max-width: calc(100% - 60px); display: block; position: relative; text-align: left; } .presentation{ font-size: 1.5rem; } .presentation-inset{ font-size: 1.5rem; } .presentation.small{ font-size: 1.2rem; }  .presentation a{ position: relative; color: #000000; text-decoration: none; transition: width 0.3s ease 0s; } .presentation a:before {       content: "";   display: block;   position: absolute;   bottom: 0;   left: 0;   width: 0px;   height: 1px;   background: #000000;   opacity: 1;   transition: width 0.3s ease 0s; } .presentation a:hover:before{ width: 100%; }  /* SIZES --- */ .mt-1{ margin-top: 1rem; } .mtb-1{ margin-top: 0.75rem; margin-bottom: 0.75rem; } .mt-2{ margin-top: 2rem; } .mtb-2{ margin-top: 2rem; margin-bottom: 3rem; } .mt-3{ margin-top: 3rem; } .mt-4{ margin-top: 4rem; } .mtb-3{ margin-top: 3rem; margin-bottom: 3rem; } .mt-5{ margin-top: 5rem; } .mtb-5{ margin-top: 5rem; margin-bottom: 5rem; } .mt-8{ margin-top: 8rem; } .mt-10{ margin-top: 10rem; } .mb-1{ margin-bottom: 1rem; } .mb-2{ margin-bottom: 2rem; } .mb-3{ margin-bottom: 3rem; } .mb-4{ margin-bottom: 4rem; } .mb-5{ margin-bottom: 5rem; } .mb-10{ margin-bottom: 10rem; } .mb-8{ margin-bottom: 8rem; } .p-1{ padding: 1rem; } .p-2{ padding: 2rem; } .plr-1{ padding-left: 1rem; padding-right: 1rem; } .plr-2{ padding-left: 2rem; padding-right: 2rem; } .gt-regular{font-weight: normal; font-family: "GT Walsheim Regular", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;} .gt-medium{font-weight: 400; font-family: "GT Walsheim Medium", "GT Walsheim Regular", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;} .gt-bold{font-weight: 700; font-family: "GT Walsheim Bold", "GT Walsheim Regular", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;} .text-left{ text-align: left; justify-content: flex-start; } .text-right{ text-align: right; justify-content: flex-end; } .text-justify{ text-align: justify; } .text-center{ text-align: center; justify-content: center; } .text-big{ font-size: 2rem; }  /* HEADER --- */ /* header */ header{ position: fixed; width: 100%; z-index: 999; transition: all 200ms ease-in-out; top: 15px; } header .wide{ background: rgba(255, 255, 255, 0.0); box-shadow: 0 3px 2px -2px rgba(0,0,0,0.0); transition: all 200ms ease-in-out; } header .wide .header{ position: relative; padding-top: 15px; padding-bottom: 15px; display: flex; flex-direction: row; align-items: center; } header .wide .header a.logo{ flex: 0.3; align-items: center; justify-content: flex-start; position: relative; height: 44px; } header .wide .header a.logo #svglogo{ position: absolute; top: -4px; height: 44px; transition: all 200ms ease-in-out; } header .wide .header a.logo #svglogo #tecops{ transform: translate(0px, 0px); fill: rgba(0, 0, 0, 1); transition: all 200ms ease-in-out; } header .wide .header a.logo #svglogo #height-container{ transform: translate(61px, 9px); transition: all 200ms ease-in-out; } header .wide .header a.logo #svglogo #height-container #height{ fill: #000000; transition: all 200ms ease-in-out; } header .wide .header a.logo:hover #svglogo #tecops{ fill: rgba(0, 0, 0, 0.3); } header .wide .header a.logo:hover #svglogo #height-container #height{ transform: scale(1.05, 1.05); transform-origin: 10% 50%; }  /* Nav menu */ header .wide .header .nav{ flex: 0.7; right: 0; position: absolute; align-items: center; justify-content: flex-end; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: row; z-index: 998; overflow: hidden; } header .wide .header .nav li{ margin: 0 1vw; position: relative; } header .wide .header .nav li a {   line-height: 30px;   font-size: 1.2rem;   color: #000000;   text-decoration: none;   position: relative; } header .wide .header .nav li a:before {       content: "{";   display: block;   position: absolute;   top: -0.1em;   left: -0.4em;   opacity: 0;   transition: opacity 0.3s ease 0s; } header .wide .header .nav li a:after {       content: "}";   display: block;   position: absolute;   top: -0.1em;   right: -0.4em;   opacity: 0;   transition: opacity 0.3s ease 0s; } header .wide .header .nav li:hover a:before, header .wide .header .nav li:hover a:after, header .wide .header .nav li a.active:after,  header .wide .header .nav li a.active:before{ opacity: 1; }  header.fixed .wide{ background: rgba(255, 255, 255, 1); box-shadow: 0 3px 2px -2px rgba(0, 0, 0, 0.6); } header.fixed .wide .header{ padding-top: 15px; padding-bottom: 15px; } header.fixed .wide .header a.logo #svglogo{ height: 44px; transform: translateX(0px); } header.fixed .wide .header a.logo #svglogo #tecops{ fill: rgba(0, 0, 0, 0); } header.fixed .wide .header a.logo #svglogo #height-container{ transform: translate(0px, 9px); } header.fixed .wide .header a.logo #svglogo #height-container #height{ fill: #FFCC00; }  header.animateIn{   transform: translateY(0px); } header.animateOut{   transform: translateY(-100%); }  /* GRID --- */ .grid {   width: 100%;   display: flex;   flex-direction: row;   justify-content: flex-start; } .g-1,.g-2,.g-3,.g-4,.g-6,.g-7,.g-8,.g-9{   flex-grow: 0;   flex-shrink: 0;   flex-basis: 100%; } .g-1{ flex: 0.1; } .g-2{ flex: 0.2; } .g-3{ flex: 0.3; } .g-4{ flex: 0.4; } .g-6{ flex: 0.3; } .g-7{ flex: 0.7; } .g-8{ flex: 0.8; } .g-9{ flex: 0.9; } .flex-top{ display: flex; align-items: start; } .flex-center{ display: flex; align-items: center; } .flex-bottom{ display: flex; align-items: flex-end; } .flex-left{ justify-content: flex-start; } .flex-right{ justify-content: flex-end; }  /* PAGE --- */ .space{ margin: 0; padding: 0; width: 100%; } .wide.page{ position: fixed; z-index: 2; } .wide.page .container{ top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); } .next-page{ position: absolute; width: 100%; bottom: 10px; color: rgba(0, 0, 0, 1); display: flex; flex-direction: column; align-items: center;} .next-page span{ position: relative; } .next-page span:before {       content: "";   display: block;   position: absolute;   bottom: 0;   left: 0;   width: 0px;   height: 1px;   background: #000000;   opacity: 1;   transition: width 0.3s ease 0s; } .next-page svg{ margin-bottom: 15px; margin-top: 0px; transition: margin 200ms ease-in-out; } .next-page svg #next-page-fill{ fill: rgba(0, 0, 0, 1); transition: color 200ms ease-in-out; } .next-page:hover span:before{ width: 100%; } .next-page:hover svg{ margin-bottom: 5px; margin-top: 10px; }  .blocks{ list-style-type: none; margin: 0; padding: 0; display: flex; align-items: stretch; flex-direction: row; justify-content: center; } .blocks li{   flex: 1;   margin: 1rem 1rem 1rem 0; } .blocks li:last-child{ margin-right: 0; }  /* CARD --- */ .card{ margin: 1rem; border: 0; width: calc(100% - 2rem); position: relative; text-align: left; } .card.full{ margin: 1rem 0 1rem 0; } .card .card-paragraph{   font-size: 1.2rem;   font-weight: normal;   overflow: hidden;   position: relative;   margin-bottom: 2rem; }  .top-number{ font-size: 2.5rem; line-height: 2rem;}  .wide.nooverflow{ overflow: visible; } .container.frame{ border: 5px solid #000; position: relative; } .container.frame h2{ position: absolute; left: 6rem; margin-top: -2.4rem; background: #FFCC00; z-index: 100; padding: 0 2rem; }  .references{ display: flex; list-style-type: none; flex-direction: row; align-items: center; justify-content: center; flex-wrap: wrap; margin:0; padding:0; } .references li{ width: 250px; padding: 2rem; display: flex; flex-direction: column; align-items: left; justify-content: flex-start; } .references li img{ width: 200px; }  .technologies{ display: flex; list-style-type: none; flex-direction: row; align-items: center; justify-content: flex-start; flex-wrap: wrap; margin:0; padding:0; } .technologies li{ background: #FFCC00; width: 150px; height: 150px; margin-right: 1rem; margin-bottom: 1rem; display: flex; flex-direction: column; align-items: center; justify-content: center; } .technologies li img{ width: 100%; height: auto; }  /* BUTTONS --- */ a.btn-white{   display: inline-block;   font-size: 2rem;   line-height: 2rem;   margin-top: 1.25rem;   padding: 8px 0px 6px 0px;   color: #ffffff;   text-decoration: none;   position: relative;   -webkit-transition: color 0.3s ease-in-out; -moz-transition: color 0.3s ease-in-out; -ms-transition: color 0.3s ease-in-out; -o-transition: color 0.3s ease-in-out; transition: color 0.3s ease-in-out; } a.btn-white span{ width: 15px; text-align: right; } a.btn-white:hover{   zoom: 1; filter: alpha(color=50);   color: rgb(164, 164, 164); } a.btn-white:after {       bottom: -3px;   content: "";   display: block;   height: 3px;   left: 0;   position: absolute;   background: #2667f7;   transition: width 0.3s ease 0s, left 0.3s ease 0s;   width: 0; } a.btn-white:hover:after{ width: 100%; left: 0; }  a.btn-blue{   display: inline-block;   font-size: 2rem;   line-height: 2.5rem;   margin-top: 1.25rem;   padding: 8px 14px 6px 16px;   color: #ffffff;   text-decoration: none;   -webkit-transition: color 0.25s ease-in-out; -moz-transition: color 0.25s ease-in-out; -ms-transition: color 0.25s ease-in-out; -o-transition: color 0.25s ease-in-out; transition: color 0.25s ease-in-out; } a.btn-blue span{ width: 15px; text-align: right; } a.btn-blue:hover{   zoom: 1; filter: alpha(color=50);   color: #2667f7; }  .over-effect{ background-color: transparent; -webkit-transition: background-color 0.5s ease-out; -moz-transition: background-color 0.5s ease-out; -o-transition: background-color 0.5s ease-out; transition: background-color 0.5s ease-out; margin: 0.5rem; padding: 0.5rem 0 0.5rem 0; } .over-effect { background-color: #000000; } .bg-white .over-effect{ background-color: #efefef; }  /* IMAGES --- */ .image{ text-align: center; position: relative; cursor: pointer; padding: 1rem; } .image.line-b{ border-bottom: 1px solid rgba(164, 164, 164, 0.2); } .image.line-l{ border-left: 1px solid rgba(164, 164, 164, 0.2); } .image img{ width: 100%; } .image .explain{ top: 0; left: 0; color: #ffffff; text-align: center; border: 0; width: 100%; height: 100%; opacity:0; display: flex; position: absolute; background: rgba(0, 0, 0, 0.9); justify-content: center; align-items: center;-webkit-transition: opacity 0.5s ease-in-out; -moz-transition: opacity 0.5s ease-in-out; -ms-transition: opacity 0.5s ease-in-out; -o-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out; } .image:hover .explain{ opacity: 1; zoom: 1; filter: alpha(opacity=100); }  /* EFFECTS --- */ .fadeIn{opacity: 0}  /* ==========================================================================    Helper classes    ========================================================================== */  /*  * Hide visually and from screen readers  */  .hidden {   display: none !important; }  /* * Hide only visually, but have it available for screen readers: * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility * * 1. For long content, line feeds are not interpreted as spaces and small width *    causes content to wrap 1 word per line: *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe */  .sr-only {   border: 0;   clip: rect(0, 0, 0, 0);   height: 1px;   margin: -1px;   overflow: hidden;   padding: 0;   position: absolute;   white-space: nowrap;   width: 1px;   /* 1 */ }  /* * Extends the .sr-only class to allow the element * to be focusable when navigated to via the keyboard: * https://www.drupal.org/node/897638 */  .sr-only.focusable:active, .sr-only.focusable:focus {   clip: auto;   height: auto;   margin: 0;   overflow: visible;   position: static;   white-space: inherit;   width: auto; }  /* * Hide visually and from screen readers, but maintain layout */  .invisible {   visibility: hidden; }  /* * Clearfix: contain floats * * For modern browsers * 1. The space content is one way to avoid an Opera bug when the *    `contenteditable` attribute is included anywhere else in the document. *    Otherwise it causes space to appear at the top and bottom of elements *    that receive the `clearfix` class. * 2. The use of `table` rather than `block` is only necessary if using *    `:before` to contain the top-margins of child elements. */  .clearfix:before, .clearfix:after {   content: " ";   /* 1 */   display: table;   /* 2 */ }  .clearfix:after {   clear: both; }  /* ==========================================================================    EXAMPLE Media Queries for Responsive Design.    These examples override the primary ('mobile first') styles.    Modify as content requires.    ========================================================================== */  @media only screen and (min-width: 35em) {   /* Style adjustments for viewports that meet the condition */ }  @media print,   (-webkit-min-device-pixel-ratio: 1.25),   (min-resolution: 1.25dppx),   (min-resolution: 120dpi) {   /* Style adjustments for high resolution devices */ }  /* ==========================================================================    Print styles.    Inlined to avoid the additional HTTP request:    https://www.phpied.com/delay-loading-your-print-css/    ========================================================================== */  @media print {   *,   *:before,   *:after {     background: transparent !important;     color: #000 !important;     /* Black prints faster */     -webkit-box-shadow: none !important;     box-shadow: none !important;     text-shadow: none !important;   }   a,   a:visited {     text-decoration: underline;   }   a[href]:after {     content: " (" attr(href) ")";   }   abbr[title]:after {     content: " (" attr(title) ")";   }   /*      * Don't show links that are fragment identifiers,      * or use the `javascript:` pseudo protocol      */   a[href^="#"]:after,   a[href^="javascript:"]:after {     content: "";   }   pre {     white-space: pre-wrap !important;   }   pre,   blockquote {     border: 1px solid #999;     page-break-inside: avoid;   }   /*      * Printing Tables:      * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables      */   thead {     display: table-header-group;   }   tr,   img {     page-break-inside: avoid;   }   p,   h2,   h3 {     orphans: 3;     widows: 3;   }   h2,   h3 {     page-break-after: avoid;   } }  /* SCREENS --- */ @media screen and (max-width: 1024px) {   .container{ margin: 0 20px 0 20px; width: calc(100% - 40px); }   .technologies li{ width: 117px; height: 117px; } } @media screen and (max-width: 800px) {   .card .card-subtitle{width: 100%; }   .g-4{ flex: 1; flex-basis: 50%; }   a.btn-white:hover{ color: rgb(164, 164, 164); }   a.btn-white:after{ width: 100%; left: 0; }   .over-effect { background-color: #000000; }   .bg-white .over-effect { background-color: #efefef; }   .technologies li{ width: 110px; height: 110px; }   .mt-8{ margin-top: 6rem; }   .mb-8{ margin-bottom: 6rem; }   .mt-3{ margin-top: 2rem; }   .mb-3{ margin-bottom: 2rem; }   .mt-5{ margin-top: 3rem; }   .mb-5{ margin-bottom: 3rem; } } @media screen and (max-width: 706px) {   header .wide .header .nav{ display: none; }   header .wide .header a.logo{ text-align: center; flex: 1; margin-top: 1rem;}   header .wide .header a.logo #svglogo{ position: initial;}   header.fixed .wide .header a.logo #svglogo #height-container{ transform: translate(61px, 0px); }    h1{ font-size: 2rem; line-height: 1.9rem; margin-bottom: 1rem; }   h2{ font-size: 2rem; line-height: 1.9rem; }   .presentation, .presentation-inset{ font-size: 1.2rem; }    .blocks{ flex-wrap: wrap; }   .blocks li{ flex: 1; flex-basis: 100%; margin: 1rem 0 0 0; }   .blocks li .card svg{ max-width: 200px; }   .blocks li .card{ margin: 0 1rem 0 1rem; }   .blocks li .card.full{ margin: 0 1rem 0 1rem; }    .mt-8{ margin-top: 4rem; }   .mb-8{ margin-bottom: 4rem; }   .mt-3{ margin-top: 1.5rem; }   .mb-3{ margin-bottom: 1.5rem; }   .mt-5{ margin-top: 2rem; }   .mb-5{ margin-bottom: 2rem; } } @media screen and (max-width: 500px) {   .grid{ flex-wrap: wrap; }   .g-1, .g-2, .g-3, .g-4, .g-5, .g-6, .g-7, .g-8, .g-9{ flex: 1; flex-basis: 100%; }   .image{ padding: 0.25rem;}   h1{ font-size: 2rem; line-height: 1.9rem; margin-bottom: 1rem; }   h2{ font-size: 2rem; line-height: 1.9rem; }   .plr-2{padding-left: 1rem; padding-right: 1rem;}   .mt-8{ margin-top: 2rem; }   .mb-8{ margin-bottom: 2rem; }   .mt-3{ margin-top: 1rem; }   .mb-3{ margin-bottom: 1rem; }   .mt-5{ margin-top: 1rem; }   .mb-5{ margin-bottom: 1rem; }   .presentation, .presentation-inset{ font-size: 1.2rem; }    .technologies li{ width: calc(100vw / 3 - 2rem); height: calc(100vw / 3 - 2rem); }   .flex-right{justify-content: center;} } @media screen and (max-width: 375px) {   h1{ font-size: 2rem; line-height: 1.9rem; margin-bottom: 1rem; }   .card.home .card-content{ font-size: 1.2rem; } }