/* normalize */
html {text-size-adjust: 100%;}
body {margin: 0;}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary {display: block;}
audio,canvas,progress,video {display: inline-block; vertical-align: baseline;}
audio:not([controls]) {display: none;height: 0;}
[hidden],template {display: none;}
a {background-color: transparent;}
a:active,a:hover {outline: 0;}
abbr[title] {border-bottom: 1px dotted;}  
b,strong {font-weight: bold;}
dfn {font-style: italic;}
h1 {font-size: 2em;margin: 0.67em 0;}
mark {background: #ff0;color: #000;}
small {font-size: 80%;}
sub,sup {font-size: 75%;line-height: 0;position: relative;vertical-align: baseline;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}
img {border: 0;}
svg:not(:root) {overflow: hidden;}
figure {margin: 0em;}
hr {-moz-box-sizing: content-box;box-sizing: content-box;height: 0;}
pre {overflow: auto;}
code,kbd,pre,samp {font-family: monospace, monospace;font-size: 1em;}
button,input,optgroup,select,textarea {color: inherit; font: inherit;margin: 0; appearance: none;border-radius: 0;}
button {overflow: visible;}
button,select {text-transform: none;}
button,html input[type="button"], input[type="reset"],input[type="submit"] {appearance: button; cursor: pointer; }
button[disabled],html input[disabled] {cursor: default;}
button::-moz-focus-inner,input::-moz-focus-inner {border: 0;padding: 0;}
input {line-height: normal;}
input[type="checkbox"],input[type="radio"] {box-sizing: border-box; padding: 0; }
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button {height: auto;}
input[type="search"] {appearance: textfield; -moz-box-sizing: content-box;-webkit-box-sizing: content-box; box-sizing: content-box;}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration {appearance: none;}
fieldset {border: 1px solid #c0c0c0;margin: 0 2px;padding: 0.35em 0.625em 0.75em;}
legend {border: 0; padding: 0; }
textarea {overflow: auto;}
optgroup {font-weight: bold;}
table {border-collapse: collapse;border-spacing: 0;}
td,th {padding: 0;} 

/* general */
body {
    font-family: Gilroy, Helvetica, Arial, sans-serif, sans-serif; overflow-x:hidden;
    --main-color:#0094DF;
    --main-bgcolor:black;
}
.title {font-family: Gilroy-Bold, Helvetica, Arial, sans-serif, sans-serif;}
.nomargin {margin:0!important}
.nopadding {padding:0!important}
.container {width:78vw; margin-left: auto; margin-right:auto; }
blockquote {margin:0; margin-top:2em; margin-bottom:2em; padding:0; border-left: .3em black solid; padding-left:1em;}
blockquote p:first-child {margin-top:0}
blockquote p:last-child {margin-bottom:0}
p + blockquote {margin-top:0}
hr {border:.05em black solid; width:5em;}
.nodesktop {display:none!important}
.nomobile {display:block!important}

main a {color:black; text-decoration: underline;}
main a:hover {color:var(--main-color)}

table {margin-top:1em; margin-bottom:2em; border:.1em black solid;}
table tr th {font-size:.875em; border-bottom:.1em black solid; padding:.5em;}
table tr td {font-size:.875em; border-right:.1em black solid; padding:.5em;}

/* frames */
.header {position:fixed; left:0; top:0; bottom:0; padding-top:2.5em; z-index:10;}
.header .menu .burger {margin-left:3.75em; display:inline-block; margin-right:1em; z-index:10; position:relative; text-decoration: none;}
.header .menu .burger .bar {width:1.1em; height:.28em; background:var(--main-bgcolor); margin-bottom:.07em;  display:block; font-size:2em; transition:all .3s;}
.header .menu .burger .title {display:none; font-size:1.75em; font-family: Gilroy-Bold, Helvetica, Arial, sans-serif, sans-serif; text-transform: uppercase; font-weight:normal; color:black; margin-top:-1.3em; margin-left:2.25em; position:absolute;}
.header .menu .burger:hover .bar1 {transform:translateY(-.1em); transition:all .3s; }
.header .menu .burger:hover .bar3 {transform:translateY(.1em); transition:all .3s;}

.header .menu .dropdown {position:absolute; left:0; top:0; bottom:0; background:var(--main-bgcolor); visibility:hidden; width:50vw; transform: translateX(-50vw); transition: all .4s; z-index:5; }
.header .menu.expanded {z-index:30;}
.header .menu.expanded .dropdown {visibility:visible; transform: translateX(0vw); transition: transform .4s}
.header .menu.expanded .burger .bar {background:white;}
.header .menu.expanded .burger .title {color:white;}
.header .menu.expanded .burger .bar1 {animation: mymove1 .5s linear .1s; transform:translateY(-.1em); animation-fill-mode:forwards;}
.header .menu.expanded .burger .bar2 {animation: mymove2 .5s linear .1s; animation-fill-mode: both; }
.header .menu.expanded .burger .bar3 {animation: mymove3 .5s linear .1s; transform:translateY(.1em); animation-fill-mode: both;}

@keyframes mymove1 {
    0% {transform: translateY(-.1em) rotate(0deg)}
    50% {transform: translateY(.35em) rotate(0deg)}
    75% {transform: translateY(.35em) rotate(0deg)}
    100% {transform: translateY(.35em) rotate(45deg);}
}
@keyframes mymove2 {
    0% {opacity:1;}
    50% {opacity:1;}
    75% {opacity:0;}
    100% {opacity:0;}
}
@keyframes mymove3 {
    0% {transform: translateY(.1em) rotate(0deg)}
    50% {transform: translateY(-.35em) rotate(0deg)}
    75% {transform: translateY(-.35em) rotate(0deg)}
    100% {transform: translateY(-.35em) rotate(-45deg);}
}

.header .dropdown {display: flex; }
.header .dropdown ul {margin:0; flex:3; display:flex; flex-direction: column; justify-content: center; }
.header .dropdown ul li {font-family:Rustico; font-size:3.1em; line-height:1.4em; padding-left:.45em; list-style-type: none}
.header .dropdown ul li a { color:white; text-decoration: none; transition:all .4s}
.header .dropdown ul li a::after {content:""; background:var(--main-color); width:0em; height:.22em; margin-left:-.2em; margin-top:-.5em; display:block; position:absolute; transition:all .25s}
.header .dropdown ul li a:hover::after {width:.8em; }
.header .dropdown ul li a:hover {padding-left:.1em;transition:all .4s}

.header .dropdown .contact {flex:2;color:white; justify-content: center; display:flex; flex-direction: column;}
.header .dropdown .contact span.title {color:#999999; display:block; font-weight:700; font-size:1.3em; font-weight: 700; margin-bottom:.5em;}
.header .dropdown .contact span.icon {color:#999999; font-size:2em; padding-left:1.5em; margin-bottom:.5em}
.header .dropdown .contact a {color:#999999; font-size:.875em; display:block; width:10em; margin-bottom:1em; text-decoration:none;}

.scroll-indicator {position: fixed; bottom:0; left:0; transform: rotate(-90deg) translate(0em,5.25em); transform-origin: left bottom; z-index:20;}
.scroll-indicator label {color:black;font-size:1.45em; text-transform: uppercase; text-decoration:none; cursor:pointer;}
.scroll-indicator label span.icon {width:1.2em; text-align:center;}
.scroll-indicator label span.next {transform:scaleX(-1);}
.scroll-indicator label span.prev {display:none;}
.scroll-indicator label[data-href='#'] span.next {opacity:0;}
.scroll-indicator label[data-href='#'] span.prev {display:inline-block;}


.footer .contact {display:flex; flex-direction:row; padding-bottom:2em;}
.footer .contact > div {width:33%; box-sizing:border-box}
.footer .contact span.title {color:black; display:block; font-weight:700; font-size:2.5em; font-weight: 700; text-transform: uppercase; line-height:1em;}
.footer .contact span.subtitle {color:black; display:block; font-weight:700; font-size:1.25em; font-weight: 700; width:9em; font-family: Gilroy-Bold}
.footer .contact a {color:#464646; font-size:1em; display:block; width:10em; margin-bottom:1em; text-decoration:none;}

.footer .icons ul {list-style:none; margin:0; padding:0; display:flex; padding-bottom:1em;}
.footer .icons ul li a {display:block; background:black; color:white;  font-size:1.5em; width:1.55em; line-height:1.55em; margin-right:1.55em; text-align:center}
.footer .icons ul li a span.label {display:none; }
.footer .menu ul {list-style:none; margin:0; padding:0; display:flex; padding-bottom:3.75em; flex-wrap: wrap;}
.footer .menu ul li a {color:#464646; text-decoration:none; text-transform: uppercase; font-size:.875em; line-height:2em; padding-right:1.5em;}

/* more */
.more { text-align:center; text-transform: uppercase; color:black; font-size:1.44em; font-family:Gilroy-Bold, Helvetica, Arial, sans-serif, sans-serif; text-decoration: none}
.more span.dot {width:.4em; height:.4em; background:black; display:inline-block}
.more label {cursor:pointer; display:block; color:black}

/* slide */
.slide {min-height: 62em; display:flex; flex-direction: column;  padding-bottom:10em;  box-sizing: border-box; }
.slide.height-full {min-height: 100vh}
.slide.width-medium {width:75%; }
.slide.width-thin {width:50%; }
.slide.nopadding {padding-bottom:0em;}
.slide.no-titles h2 {display:none}
.slide.no-titles h3 {display:none}
.slide.height-auto {min-height:85vh;}
.slide.text-simple p {font-size:1.25em}
.slide.text-simple p + p {margin-top:0;}
.slide.text-simple h2 {font-size:1.25em; margin:0; text-transform: none;}
.slide.text-simple h3 {font-size:1em; margin:0; text-transform: none; color:black; margin-top:1em;}
.slide.vcenter {justify-content: center; padding:0;}

.slide.home {justify-content: center; width:40%; padding:0}
.slide.home h1 {font-family:Rustico; font-size:4em; line-height: 1em; font-weight:normal; margin:0;}

.slide h2 {font-family:Gilroy-Bold, Helvetica, Arial, sans-serif, sans-serif; font-size:3.75em; margin-top:.15em; margin-bottom:.35em;} 
.slide h3 {color:#888888; margin:0; font-size:1.5em; font-weight:normal; max-width:19em;} 
.slide h3::after {content:""; background:black; width:0em; height:.4em;  display:block; }
.slide h3.underlined::after {width:1.45em; transition: width .5s;}
.slide h4 {color:black; font-size:1.4em; font-family:Gilroy-Bold, Helvetica, Arial, sans-serif, sans-serif; margin-bottom:.25em; margin-top:.9em;} 
.slide p {font-size:1.63em; line-height:1.65em;}
.slide ul li {list-style-type: square; font-size:1.25em; line-height:1.65em;}
.slide p + ul {margin-top:0;}
.slide ul li p {font-size:1em!important;}
.slide ul li p:first-child {margin-top:0}

.slide .banner {left:50vw; overflow:hidden; position: absolute; display:flex;  flex-direction: column; justify-content: center; }
.slide .banner > div { flex-shrink:0; box-sizing:border-box; display:block;  width:130vw; transition: all 2s; background-color:black; transform: translate3d(0px, 0px, 0px); }
.slide .banner > div > div {padding-left:59vw; mix-blend-mode: lighten; background: rgb(255, 255, 255); transition: all 2s;}
.slide .banner span {transform: translate3d(0px, 0px, 0px);text-transform: uppercase; letter-spacing: 0px;font-size: 23vw;line-height: .725em; display:block;} 

.slide .banner.slide-left > div > div {padding-left:0em; transition: all 2s;}

.slide .banner.letter {right:-50vw; }
.slide .banner.letter > div {background-image: url(/img/matias-quiet-pro-keyboards-1-large.jpg); }
.slide .banner.letter > div > div {width:50vw;}
.slide .banner.letter span {font-size:50vw;}

/* slider */ 
.slider-horizontal {padding-bottom:4em; position:relative;}
.slider-horizontal .content-wrapper {overflow-x:visible; }
.slider-horizontal .content {display:flex; padding-top:8.75em;} 
.slider-horizontal .content article {width:16.25em;  margin-right:4.5em; margin-bottom:3em; display:block; flex-shrink: 0; }
.slider-horizontal .content article a {color:black;}
.slider-horizontal .content article img {height:6.75em; display:block; }
.slider-horizontal .content article figcaption {display:block;box-sizing: border-box; color:#464646;}
.slider-horizontal .content article figcaption p {font-size:1em;}
.slider-horizontal .content article figcaption ul { margin:0; padding:0; }
.slider-horizontal .content article figcaption ul li {position: relative;padding-left: 1.2em; list-style-type:none; line-height:1.5em;}
.slider-horizontal .content article figcaption ul li:before {content: " "; position: absolute; display: block; width: .5em; height: .5em; top:.45em; left: 0; background:black;}

.slider-horizontal .buttons {bottom:0; position:absolute; bottom:0; right:0;}
.slider-horizontal .buttons a {font-size:1.5em; text-decoration: none;width:1.25em;line-height:2em; display:inline-block; text-align:center; color:var(--main-color);}
.slider-horizontal .buttons a span {transition: all .4s}
.slider-horizontal .buttons a:hover span {transform:scale(1.3);display:inline-block; transition: all .4s}
.slider-horizontal .buttons a.prev span.icon {transform:scale(-1) ;} 
.slider-horizontal .buttons a.prev:hover span.icon {transform:scale(-1) scale(1.3);;}
.slider-horizontal .buttons a.disabled {color:#BFBFBF; cursor: default}

/* projectes-container */ 
.projectes-container { display:grid; grid-template-columns: repeat(2,49.5%); margin-top:7.5em; justify-content: space-between; }
.projectes-container figure  { margin-bottom:.75em; height: 0; padding-bottom: 75%; position:relative; overflow:hidden;}
.projectes-container figure img {width:100%; box-sizing: border-box; object-fit:cover; transition:all 1s;}
.projectes-container figure figcaption {color:black; display:block; padding:2.25em; position:absolute; left:0; top:0; bottom:0; right:0; mix-blend-mode: lighten; background:white; opacity:0; transform: translateY(100%); transition:all .4s}
.projectes-container figure figcaption .title {font-size:1.5em; display:block; color:black; isolation: isolate;}
.projectes-container figure figcaption p {font-size:1em; padding-right:25%; line-height:1.1em}
.projectes-container figure figcaption .tags {margin-top:0em; font-size:5vw; line-height:.9em; font-family: Gilroy-Bold; font-weight:bold;text-transform: uppercase; }
.projectes-container figure figcaption .tags span {display:block; }
.projectes-container figure:hover img {transform:scale(1.5); }
.projectes-container figure:hover figcaption {transform:translateY(0); transition:all .2s; opacity:1;}
.projectes-container figure+figure+figure+figure+figure {display:none;}
.projectes-container.expanded figure+figure+figure+figure+figure {display:block;}
.projectes-container.expanded + .more {display:none;}

/* logos */
.logos-container { display:grid; grid-template-columns: repeat(4, 17%); margin-top:6em; justify-content: space-between; }
.logos-container .logo {display:flex; flex-direction: column; justify-content: center;}
.logos-container .logo img {width:100%; display:block; box-sizing: border-box; margin-bottom:1em; flex:0}

/* form */
form {margin-top:5.5em;}
form .datafield {position:relative; padding-top:2em;}
form .datafield.half {width:45%;}
form .datafield.half + .datafield.half {float:right; margin-top:-5.4em;}
form .datafield label {position:absolute; margin-top:-2.35em; line-height:2em; font-size:1.44em; transition: all .4s; cursor:text}
form .datafield input {border:none; line-height:2em; font-size:1.44em; border-bottom:.3em #e0e0e0 solid; width:100%; transition: all .4s;}
form .datafield input:focus {border-color:black!important; outline:none}
form .datafield input:focus + label {margin-top:-5em; font-size:.875em; transition: all .4s; color:#BFBFBF}  
form .datafield input:valid  {border-color:black;}
form .datafield input:valid + label {margin-top:-5em; font-size:.875em; transition: all .4s; color:#BFBFBF}  
form .datafield textarea {border:none; line-height:2em; font-size:1.44em; line-height:1.4em; border-bottom:.3em #E0E0E0 solid; width:100%; height:5em;}
form .datafield textarea:focus {border-color:black!important; outline:none}
form .datafield textarea+label { margin-top:-2.35em;}
form .datafield textarea:focus + label {margin-top:-11em; font-size:.875em; transition: all .4s; color:#BFBFBF}  
form .datafield textarea:valid  {border-color:black;}
form .datafield textarea:valid + label {margin-top:-11em; font-size:.875em; transition: all .4s; color:#BFBFBF}  
form .datafield2 {padding-top:2em; }
form .datafield2 label {font-size:1.44em; line-height: 2em; border-bottom:.3em #e0e0e0 solid; display:block; padding-left:1em; margin-top:-1.4em;}
form .datafield2 input[type="checkbox"]:valid + label {border-color:black;} 
  
form .buttons {text-align:right;padding-top:1.5em;}
form .buttons input {font-size:1.44em;text-transform: uppercase; border:none; background:none; font-family: Gilroy-Bold, Helvetica, Arial, sans-serif, sans-serif; }
form .buttons input + .icon {font-size:1.44em; padding-left:.75em; vertical-align: top}

/* typewriter */
.typewriter P {min-height:10em;}
.typewriter DIV.word {display:inline-block; padding-right:.3em;}
.typewriter DIV.word SPAN.letter {opacity:0;}
.typewriter SPAN.cursor::after {content:" ";background:#454545; width:.2em; height:1em; margin-left:.1em; margin-top:.25em; display:inline-block; animation: blinker 1s linear infinite; position:absolute;}
@keyframes blinker {50% { opacity: 0; }}


/*print */
@page {
    size: A4;
}
@media print {
    html, body {width: 210mm;height: 297mm; font-size:80%;}
    .header {display:none!important}
    .footer {display:none}
    .scroll-indicator {display:none}
    .container {width:100%;}    
    .slide {min-height:0!important; width:auto!important; padding: 1em!important;}
    .slide .banner {display:none}
}
DIV.page-break {page-break-after: always;}


@media only screen and (max-width:767px) {	
	.nodesktop {display:block!important}
    .nomobile {display:none!important}

    .container {margin-left:1.5em; margin-right:1.5em; width:auto;}
    
    .header {padding-top:1em}
    .header .menu .dropdown {width:100vw; transform: translateX(-100vw)}
    .header .menu .dropdown .contact {display:none}
    .header .menu .burger {margin-left:1.5em;}

    .slide {padding-bottom:6em; min-height:0;}
    .slide.home {width:100%;}
    .slide.home h1 {font-size:11vw; width:100%}
    .slide.home h3 {width:66%;}
    .slide.width-medium {width:100%;}
    .slide.width-thin {width:100%;}
    .slide h2 {font-size:1.9em!important; margin-top:.25em;}
    .slide h3 {font-size:1.3em!important; line-height:1.4em;}
    .slide p {font-size:1.38em;}
    
    .content-wrapper .container {margin-left:-1.5em; margin-right:-1.5em; overflow-x:scroll; padding-left:1.5em;}
    .slider-horizontal .content article {margin-right:1.5em; width:15em; margin-bottom:0;}
    .slider-horizontal .buttons {display:none;}

    .scroll-indicator {display:none;}

    .slide .banner {display:none}
    .projectes-container  {margin-top:3em; grid-template-columns: repeat(1,100%);}
    .projectes-container figure figcaption  {padding:1.5em}

    .logos-container {  grid-template-columns: repeat(2, 35%); margin-top:3em; margin-left:6vw; margin-right:6vw; margin-bottom:5em;}
 
    form{ margin-top:3em;}
    form .datafield.half {width:100%; margin:0;}
    form .datafield.half + .datafield.half {float:none; margin-top:0;}
    form .datafield2 label {font-size:1em; margin-top:-1.6em; border-width:.45em; display:block;}

    .footer .contact {flex-direction: column; padding-bottom:2.5em;}
    .footer .contact .subtitle {margin-bottom:.5em;}
    .footer .icons ul {padding-bottom:1.5em;}
    .footer .menu {overflow-x:scroll; margin-right:-1.5em; margin-left:-1.5em; padding-left:1.5em;}
    .footer .menu ul {display:block;}
    .footer .menu ul li a {white-space: nowrap;}
}
@media only screen and (min-width: 767px) and (max-width: 1024px) {
    .container {width:auto;}
    main > .container {margin-left:6em; margin-right:4em; width:auto;}
    .footer > .container {margin-left:6em; margin-right:4em; width:auto;}
    
    .header {padding-top:1.75em}
    .header .menu .dropdown {width:100vw; transform: translateX(-100vw)}
    .header .menu .dropdown .contact {width:25vw; flex:none}
    .header .menu .burger {margin-left:1.75em;}

    .scroll-indicator {left:-1.75em;}
    
    .slide.home .banner {display:none;}
    .slide.home {width:100%;}
    .slide.home h1 {font-size:8vw; width:80%}
    .slide.home h3 {width:66%;}
    .slide.width-medium {width:75%;}
    .slide.width-thin {width:75%;}
    .slide h2 {font-size:2.5em!important;}
    
    .slider-horizontal .content article {margin-right:1.5em; width:15em;}

    ___.slide .banner {left:63vw}
    .slider-horizontal .content article {margin-bottom:0;}
    .projectes-container figure figcaption  {padding:1.5em}
}
@media only screen and (min-width: 1024px) and (max-width: 1200px) {
    .container {width:auto;}
    main > .container {margin-left:7em; margin-right:4em; width:auto;}
    .footer > .container {margin-left:7em; margin-right:4em; width:auto;}
    .slide.home h1 {font-size:5vw;}
    ___.slide .banner {left:43vw}
}
@media only screen and (min-width: 1200px) {
    .container {width:1000px}
}
@media only screen and (min-width: 1400px) {
    .container {width:1100px}
}
@media only screen and (min-width: 1600px) {
    .container {width:1280px}
    .slide .banner span {font-size:20vw;}
}